:root {
  --footer-blue: rgba(21, 99, 140, 1);
  --btn-primary: rgba(242, 99, 54, 1);
}

a {
  text-decoration: none;
  color: inherit;
}

.custom-container {
  width: 90%;
  margin: 0 auto;
}

#our-story-hero {
  padding: 80px 12px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .hero-title {
    color: #170f49;
  }
}

#our-roots {
  background-color: rgba(247, 245, 240, 1);
  padding-top: 50px;
  padding-bottom: 50px;

  .title-color {
    color: var(--btn-primary);
  }
}
#our-clients {
  background-color: rgba(247, 245, 240, 1);
  padding-top: 50px;
  .title-color {
    color: var(--btn-primary);
  }
}
#our-mission {
  background-color: rgba(247, 245, 240, 1);

  padding-top: 50px;
  padding-bottom: 50px;

  .title-color {
    color: var(--btn-primary);
  }
}
#brand-section {
  background-color: rgba(247, 245, 240, 1);
  padding-bottom: 170px;
  .swiper-wrapper {
    transition-timing-function: linear !important;
    pointer-events: none;
    height: 48px;
  }
  .swiper-slide {
    width: 100%;
    height: 100%;
  }
}
.swiper-wrapper {
  transition-timing-function: linear !important;
  pointer-events: none;
}
#review-section {
  padding: 50px 0px !important;
  background-image: url("../img/landingPage/review-background.png");
  background-size: cover;
  background-position: center;
  position: relative;
  width: 100%;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgb(247, 245, 240) 0%,
      /* Top fully white */ rgba(247, 245, 240, 0) 30%,
      /* Middle medium fade */ rgba(247, 245, 240, 0) 100%
        /* Bottom transparent */
    );
    z-index: 0;
  }

  > * {
    position: relative;
    z-index: 1;
  }

  .stat-cards-wrapper {
    padding: 20px 25px;
    align-self: stretch;
    border-radius: 40px;
    border: 1px solid #fff;
    background: linear-gradient(
      90deg,
      rgba(211, 211, 211, 0.1) 0%,
      rgba(220, 220, 220, 0.12) 100%
    );
    backdrop-filter: blur(5px);
    --webkit-backdrop-filter: blur(5px);
    position: relative;
    z-index: 1;
    margin-bottom: 80px;

    .slash {
      font-weight: 200 !important;
    }

    .stat-card {
      flex-grow: 1;
    }

    .stat-subtitle {
      font-size: 18px !important;
    }
  }

  .card-button {
    bottom: 0px;
    right: 0px;
  }

  .card-wrapper {
    max-width: 788px;
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.4) -288.82%,
      rgba(0, 0, 0, 0.1) 122.97%
    );
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 24px;
    color: white;
  }

  .card-content {
    flex-grow: 1 !important;
    justify-content: space-between;
  }

  .quote-icon {
    width: 24px;
  }

  .profile-name {
    font-weight: 700;
    margin-bottom: 8px;
  }

  .profile-title {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.5;
  }

  .testimonial-text {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.8px;
  }
}

@media screen and (min-width: 576px) {
  #review-section {
    .card-wrapper {
      min-height: 364px;
    }
  }
}
@media (min-width: 1025px) {
  #our-story-hero {
    .hero-content {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 60%;
      max-width: 510px;
    }
    .hero-image-wrapper {
      width: 100%;
      text-align: right;
      img {
        width: 70%;
      }
    }
  }

  /* RTL Support for hero section */
  [dir="rtl"] #our-story-hero {
    .hero-content {
      left: auto;
      right: 0;
    }
    .hero-image-wrapper {
      text-align: left;
      img {
        transform: scaleX(-1);
      }
    }
  }
  #review-section {
    .section-title {
      font-size: 40px !important;
    }

    .stat-title {
      font-size: 120px;
      font-weight: 500;
    }

    .stat-cards-wrapper {
      gap: 100px !important;

      .stat-subtitle {
        font-size: 24px !important;
        line-height: 122%;
      }

      .ratings-small {
        font-size: 40px !important;
      }

      .stat-card-1 {
        max-width: 400px;
      }

      .stat-card-2 {
        max-width: 365px;
      }

      .stat-card-3 {
        max-width: 462px;
      }
    }

    .swiper {
      margin-top: 88px !important;
      margin-bottom: 88px !important;
    }

    .card-wrapper {
      min-height: 364px;
    }

    .testimonial-text {
      font-size: 20px !important;
    }
  }
}

@media (min-width: 1700px) {
  #our-story-hero {
    padding-top: 87px !important;
    padding-bottom: 140px !important;
    .hero-content {
      max-width: 780px;
      .hero-title {
        font-size: 3.62rem;
      }
    }
  }

  .section-description {
    font-size: 24px;
  }

  #our-clients {
    padding-top: 252px;
    .title {
      font-size: 3.5rem;
    }
  }

  #our-roots {
    background-color: rgba(247, 245, 240, 1);
    padding-top: 202px;

    .title {
      font-size: 3.375rem;
    }
  }

  #our-mission {
    padding-top: 263px !important;
    padding-bottom: 256px !important;

    .title {
      font-size: 3.5rem !important;
    }
    .text-container {
      padding-right: 5rem;
    }
    .image-container {
      padding-left: 5rem;
    }

    .section-description {
      font-size: 24px;
    }
  }
  #review-section {
    .section-title {
      font-size: 60px !important;
    }

    .stat-cards-wrapper {
      gap: 200px !important;
      margin-bottom: 158px;

      .stat-title {
        font-size: 160px !important;
      }

      .stat-subtitle {
        font-size: 32px !important;
      }

      .ratings-small {
        font-size: 90px !important;
      }
    }

    .card-wrapper {
      min-width: 788px;
      padding: 48px !important;
    }

    .quote-icon {
      width: 38px;
    }

    .profile-name {
      font-size: 24px !important;
    }

    .video-btn {
      padding: 12px !important;
      font-size: 16px !important;
    }
  }
}