#contact {
  justify-content: center;
  align-items: center;

  & .content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 2vw;
  }

  .contact-option-cont {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    .contact-option {
        border-radius: 10px;
        border: 4px solid black;
      flex-direction: column;
      /* min-width: 350px; */
      width: clamp(350px, 30vw, 100%);
      min-height: fit-content;
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
      font-weight: bold;
      text-align: center;
      padding: 10px;

      & a {
        margin-top: 10px;
        width: 100%;
        flex-shrink: 0;
        text-wrap: nowrap;
        min-width: fit-content;
        color: black;
        text-decoration: none;
        display: inline-block;
        padding: 10px 20px;
        border: 2px solid black;
        border-radius: 5px;
        transition: all 0.3s ease;
        position: relative;
        &:hover {
          background-color: black;
          color: white;
        }

        & i {
          margin-right: 8px;
          font-weight: lighter;
          
        }
      }
    }
  }
}