@use "../abstracts" as *;

.contact {
  padding: rem(100) 0;

  @media (max-width: 1399px) {
    padding: rem(90) 0;
  }

  @media (max-width: 1199px) {
    padding: rem(80) 0;
  }

  @media (max-width: 991px) {
    padding: rem(70) 0;
  }

  @media (max-width: 767px) {
    padding: rem(60) 0;
  }

  @media (max-width: 575px) {
    padding: rem(50) 0;
  }

  &__header {
    margin-bottom: rem(50);

    @media (max-width: 767px) {
      margin-bottom: rem(30);
    }
  }

  &__subtitle {
    font-size: rem(15);
    font-weight: 700;
    color: $color-primary;
    display: block;
    margin-bottom: rem(10);
    letter-spacing: rem(1);

    @media (max-width: 767px) {
      font-size: rem(14);
      margin-bottom: rem(5);
    }
  }

  &__title {
    font-size: rem(42);
    font-weight: 800;
    color: $color-heading;
    line-height: $line-height-heading;
    margin: 0;

    @media (max-width: 1199px) {
      font-size: rem(36);
    }

    @media (max-width: 991px) {
      font-size: rem(32);
    }

    @media (max-width: 767px) {
      font-size: rem(28);
    }

    @media (max-width: 575px) {
      font-size: rem(24);
    }
  }

  &__desc {
    font-family: $font-family-base;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0%;
    color: $color-text2;
    margin-top: rem(15);

    @media (max-width: 767px) {
      font-size: 15px;
      line-height: 26px;
      margin-top: rem(10);
    }
  }

  // --- Info Cards ---
  &__info-row {
    margin-bottom: rem(60);

    @media (max-width: 767px) {
      margin-bottom: rem(40);
    }
  }

  &__card {
    background: #EFF3FA;
    padding: rem(30);
    border-radius: rem(8);
    display: flex;
    align-items: center;
    gap: rem(20);
    transition: all 0.3s ease;
    height: 100%;

    @media (max-width: 1199px) {
      padding: rem(25);
      gap: rem(15);
    }

    @media (max-width: 991px) {
      margin-bottom: rem(20);
    }

    .icon-box {
      width: rem(60);
      height: rem(60);
      background: #1C1B21;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: rem(20);
      flex-shrink: 0;
      transition: all 0.3s ease;

      @media (max-width: 575px) {
        width: rem(50);
        height: rem(50);
        font-size: rem(18);
      }

      &.active {
        background: $color-primary;
      }
    }

    .info {
      .label {
        font-family: $font-family-base;
        font-weight: 600;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 5%;
        text-transform: uppercase;
        color: $color-text2;
        display: block;
        margin-bottom: rem(8);

        @media (max-width: 575px) {
          font-size: 12px;
          margin-bottom: rem(5);
        }
      }

      div {
        font-family: $font-family-base;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: 0%;
        color: $color-heading;
        margin: 0;

        @media (max-width: 1199px) {
          font-size: 16px;
        }

        @media (max-width: 575px) {
          font-size: 15px;
        }
      }
    }

    &:hover {
      background: #fff;
      box-shadow: 0 rem(15) rem(40) rgba(0, 0, 0, 0.05);

      .icon-box {
        background: $color-primary;
      }
    }
  }

  // --- Map and Form ---
  &__map-wrapper {
    height: 100%;
    min-height: rem(500);
    border-radius: rem(15);
    overflow: hidden;

    @media (max-width: 991px) {
      min-height: rem(400);
      margin-bottom: rem(30);
    }

    @media (max-width: 575px) {
      min-height: rem(300);
    }

    iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  &__form-container {
    background: #EFF3FA;
    padding: rem(60) rem(50);
    border-radius: rem(15);

    @media (max-width: 1199px) {
      padding: rem(40);
    }

    @media (max-width: 767px) {
      padding: rem(30) rem(20);
    }
  }

  &__form {
    .form-group {
      margin-bottom: rem(20);

      @media (max-width: 767px) {
        margin-bottom: rem(15);
      }

      label {
        font-family: $font-family-base;
        font-weight: 600;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: -2%;
        color: $color-heading;
        display: block;
        margin-bottom: rem(15);

        @media (max-width: 767px) {
          font-size: 16px;
          margin-bottom: rem(10);
        }

        span {
          color: $color-primary;
          margin-left: rem(3);
        }
      }

      input,
      textarea,
      select {
        width: 100%;
        background: #fff;
        border: none;
        height: rem(65);
        padding: 0 rem(25);
        border-radius: rem(30);
        font-size: rem(15);
        color: $color-heading;

        @media (max-width: 1199px) {
          height: rem(55);
        }

        @media (max-width: 767px) {
          font-size: rem(14);
          padding: 0 rem(20);
        }

        &::placeholder {
          color: #9DA6AE;
          text-transform: uppercase;
          font-family: $font-family-base;
          font-weight: 600;
          font-size: 14px;
          letter-spacing: 5%;
        }

        &:focus {
          outline: none;
        }
      }

      textarea {
        height: rem(150);
        padding: rem(20) rem(25);
        border-radius: rem(15);
        resize: none;

        @media (max-width: 1199px) {
          height: rem(120);
        }
      }

      .select-wrapper {
        position: relative;

        select {
          appearance: none;
          -webkit-appearance: none;
        }

        i {
          position: absolute;
          top: 50%;
          right: rem(25);
          transform: translateY(-50%);
          font-size: rem(12);
          color: $color-text2;
          pointer-events: none;
        }
      }
    }

    .theme-btn {
      width: 100%;
      height: rem(65);
      font-size: rem(16);
      border-radius: rem(35);

      @media (max-width: 1199px) {
        height: rem(55);
        font-size: rem(14);
      }
    }
  }
}