/* =========================================================
   SUMMIT PEOPLE GROUP - HOME PAGE CSS
   ========================================================= */


/* =========================================================
   HERO SECTION
   ========================================================= */

.hero-slider {
  position: relative;

  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #eef2ff 100%
  );

  padding: 80px 0 90px;

  overflow: hidden;
}


/* =========================================================
   HERO GRID
   ========================================================= */

.hero-grid-3 {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 1.2fr)
    minmax(0, 1fr);

  gap: 45px;

  align-items: center;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content {
  text-align: center;

  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-content h1 {
  margin-bottom: 18px;

  font-size: 52px;
  line-height: 1.12;

  color: var(--blue-dark);

  font-weight: 700;

  white-space: normal;
}

.hero-content p {
  max-width: 520px;

  margin-bottom: 28px;

  font-size: 18px;
  line-height: 1.5;

  color: #475569;
}


/* =========================================================
   HERO IMAGES
   ========================================================= */

.hero-image {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
}

.hero-image img {
  width: 100%;
  max-width: 330px;

  /*
     IMPORTANT:
     contain prevents the Summit logo/image from being cropped.
  */
  height: auto;

  max-height: 560px;

  object-fit: contain;
  object-position: center;

  border-radius: 28px;

  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   CLIENT LOGOS SECTION
   ========================================================= */

.section-mid {
  padding: 90px 0;

  background: #ffffff;
}


/* =========================================================
   LOGO SLIDER
   ========================================================= */

.logo-slider {
  width: 100%;

  overflow: hidden;
}

.logo-track {
  width: max-content;

  display: flex;
  align-items: center;

  gap: 60px;

  animation:
    logo-scroll 25s linear infinite;
}

.logo-track img {
  width: auto;
  height: 60px;

  opacity: 1;

  filter: none;

  object-fit: contain;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}


/* =========================================================
   LOGO HOVER
   SUMMIT GREEN - NOT BROWN
   ========================================================= */

.logo-track img:hover {
  transform: scale(1.05);

  filter:
    drop-shadow(
      0 0 6px rgba(199, 224, 0, 0.6)
    );
}


/* =========================================================
   LOGO ANIMATION
   ========================================================= */

@keyframes logo-scroll {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* =========================================================
   TESTIMONIALS
   ========================================================= */

.testimonials {
  padding: 100px 0 70px;

  /*
     Keep the section light.
     No brown/taupe.
  */
  background: #f1f1f1;

  text-align: center;
}

.testimonials h2 {
  margin-bottom: 40px;

  color: var(--blue-dark);
}


/* =========================================================
   TESTIMONIAL BOX
   ========================================================= */

.testimonial-box {
  width: 100%;
  max-width: 850px;

  margin: 0 auto;

  background: #ffffff;

  /*
     GREEN ACCENT - NOT BROWN
  */
  border-left: 5px solid var(--accent-green);

  padding: 40px 50px;

  border-radius: 14px;

  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.08);

  display: none;
}

.testimonial-box.active {
  display: block;
}


/* =========================================================
   TESTIMONIAL STARS
   ========================================================= */

.testimonial-stars {
  color: var(--accent-green);

  font-size: 20px;

  margin-bottom: 16px;

  letter-spacing: 2px;
}


/* =========================================================
   TESTIMONIAL TEXT
   ========================================================= */

.testimonial-text {
  font-size: 17px;

  line-height: 1.7;

  color: #333333;

  margin-bottom: 22px;
}


/* =========================================================
   TESTIMONIAL AUTHOR
   ========================================================= */

.testimonial-author {
  font-weight: 600;

  color: #000000;
}


/* =========================================================
   TESTIMONIAL ROLE
   ========================================================= */

.testimonial-role {
  font-size: 14px;

  color: #666666;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.home-cta {
  padding: 80px 0;

  /*
     SAME LIGHT BACKGROUND
  */
  background: #f1f1f1;

  text-align: center;
}

.home-cta h2 {
  margin-bottom: 10px;

  color: var(--blue-dark);
}

.home-cta p {
  margin-bottom: 26px;

  color: #555555;
}


/* =========================================================
   CTA BUTTON
   GREEN - NOT BROWN
   ========================================================= */

.home-cta .btn-green {
  display: inline-block;

  padding: 14px 34px;

  border-radius: 30px;

  background: var(--accent-green);
  color: #020617;

  font-weight: 600;

  text-decoration: none;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.home-cta .btn-green:hover {
  background: #b5cd00;

  color: #020617;

  transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .hero-slider {
    padding: 70px 0 80px;
  }

  .hero-grid-3 {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(360px, 1.2fr)
      minmax(0, 1fr);

    gap: 25px;
  }

  .hero-content h1 {
    font-size: 44px;
  }

  .hero-content p {
    font-size: 17px;
  }

  .hero-image img {
    max-width: 290px;
    max-height: 500px;
  }

}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 900px) {

  .hero-slider {
    padding: 60px 0 70px;
  }

  .hero-grid-3 {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  /*
     CONTENT FIRST
  */

  .hero-content {
    order: 1;
  }

  /*
     FIRST IMAGE
  */

  .hero-image:first-child {
    order: 2;
  }

  /*
     SECOND IMAGE
  */

  .hero-image:last-child {
    order: 3;
  }

  .hero-content h1 {
    font-size: 42px;
  }

  .hero-content p {
    max-width: 600px;

    font-size: 17px;
  }

  .hero-image img {
    width: auto;

    max-width: 100%;

    max-height: 500px;

    height: auto;
  }

  .logo-track img {
    height: 50px;
  }

  .testimonial-box {
    max-width: 90%;

    padding: 35px 30px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .hero-slider {
    padding: 50px 0 60px;
  }

  .hero-grid-3 {
    gap: 30px;
  }

  .hero-content h1 {
    font-size: 34px;

    line-height: 1.15;
  }

  .hero-content p {
    font-size: 15px;

    line-height: 1.5;

    margin-bottom: 22px;
  }

  .hero-image img {
    max-width: 90%;

    max-height: 420px;

    border-radius: 22px;
  }

  .testimonials {
    padding: 70px 0 50px;
  }

  .testimonials h2 {
    font-size: 28px;

    margin-bottom: 30px;
  }

  .testimonial-box {
    max-width: 92%;

    padding: 30px 22px;

    border-left-width: 4px;
  }

  .testimonial-text {
    font-size: 15px;

    line-height: 1.6;
  }

  .home-cta {
    padding: 60px 20px;
  }

  .home-cta h2 {
    font-size: 26px;
  }

  .home-cta p {
    font-size: 15px;
  }

}