@use "../../mixins" as *;
@use "../../variables" as *;

.contact {
  padding: 50px 0;

  @include responsive(lg) {
    padding: 85px 0;
  }

  background-color: $bg-color;
  color: $primary-color;

  &__title {
    // margin-bottom: 59px;
    // font-weight: 400;
    text-align: center;
  }

  &__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 2rem;
    width: 100%;
  }

  &__item {
    display: inline-flex;
    align-items: center;

    gap: 0.75rem;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;

    color: #002f87;
  }

  &__img {
    display: grid;
    place-items: center;
    background-color: $primary-color;
    border-radius: 9999px;
    padding: 10px;
    width: 35px;
    height: 35px;
    @include responsive(md) {
      width: 50px;
      height: 50px;
    }
  }

  &__icon {
    width: 15px;
    height: 15px;
     @include responsive(md) {
      
    width: 20px;
    height: 20px;
     }
    object-fit: contain;
  }

  &__email {
    word-break: break-all;
    color: $primary-color;
    font-size: 14px;

    // @include responsive(md) {
    //   font-size: 18px;
    // }
    // @include responsive(lg) {
    //   font-size: 22px;
    // }
  }
}