/* ============================================================
   Home page UI/UX polish — scoped overrides on top of style.css
   Touches only the home page sections (hero / overview / faq).
   ============================================================ */

/* ---------- Hero: full-screen (header is absolute, so it sits inside) ---------- */
.sasmix-hero-section-05 {
  position: relative;
  padding-top: 120px; /* clear the overlaid absolute header */
  padding-bottom: 40px;
}
.sasmix-hero-section-05 .container {
  width: 100%;
}

/* Headline */
.sasmix-hero-section-05 .hero-content {
  padding: 0;
}
.sasmix-hero-section-05 .hero-content .title {
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: #0d294a;
  margin-bottom: 0;
}
.sasmix-hero-section-05 .hero-content .title span {
  color: #1680fb;
}
.sasmix-hero-section-05 .hero-content .text {
  font-size: 19px;
  line-height: 1.72;
  font-weight: 400;
  color: #45586b;
  max-width: 540px;
  margin-top: 26px;
}

/* Hero call-to-action group */
.hero-btn-group {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.sasmix-hero-section-05 .hero-btn-group .btn {
  height: 58px;
  line-height: 58px;
  padding: 0 38px;
  border-radius: 10px;
  font-weight: 600;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease,
    color 0.25s ease;
}
.hero-cta-primary {
  box-shadow: 0 10px 24px rgba(22, 128, 251, 0.28);
}
.hero-cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(22, 128, 251, 0.4);
  background: #136dd5;
  color: #fff;
}
.sasmix-hero-section-05 .hero-btn-group .hero-cta-secondary {
  background: transparent;
  color: #0d294a;
  box-shadow: inset 0 0 0 2px rgba(13, 41, 74, 0.16);
}
.sasmix-hero-section-05 .hero-btn-group .hero-cta-secondary:hover {
  transform: translateY(-3px);
  background: #0d294a;
  color: #fff;
  box-shadow: inset 0 0 0 2px #0d294a, 0 12px 26px rgba(13, 41, 74, 0.22);
}

/* Hero image — soften, lift, and keep it within the viewport */
.sasmix-hero-section-05 .hero-images {
  padding: 0;
}
.sasmix-hero-section-05 .hero-images .image img {
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(13, 41, 74, 0.18);
  width: 100%;
  max-height: 74vh;
  object-fit: cover;
}

/* Tone down the decorative shapes so they read as accents, not clutter */
.sasmix-hero-section-05 .shape-1 {
  opacity: 0.45;
  left: 2%;
}
.sasmix-hero-section-05 .shape-2 {
  opacity: 0.6;
}

/* Full-screen hero on tablet/desktop where the layout is side-by-side */
@media (min-width: 768px) {
  .sasmix-hero-section-05 {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .sasmix-hero-section-05 .row {
    width: 100%;
  }
}

/* ---------- Overview blocks (Consulting / Xelerator) — revamped ---------- */

/* Equal-height columns so the image and the panel line up cleanly */
.sasmix-overview-section-09 .overview-wrap-03 .row {
  align-items: stretch;
}
.sasmix-overview-section-09 .overview-wrap-03 .row > [class*="col-"] {
  display: flex;
}

/* Image card */
.sasmix-overview-section-09 .overview-image {
  width: 100%;
  margin-top: 0;
}
.sasmix-overview-section-09 .overview-image .image {
  overflow: hidden;
  border-radius: 28px;
  height: 100%;
}
.sasmix-overview-section-09 .overview-image .image img {
  border-radius: 28px;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sasmix-overview-section-09 .overview-image:hover .image img {
  transform: scale(1.05);
}

/* Floating "stat" badge — glassy, anchored to a corner */
.sasmix-overview-section-09 .overview-image .image-content {
  left: 28px;
  right: auto;
  top: auto;
  bottom: 28px;
  padding: 16px 26px 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 22px 48px rgba(13, 41, 74, 0.2);
  transition: transform 0.35s ease;
}
.sasmix-overview-section-09 .overview-image:hover .image-content {
  transform: translateY(-6px);
}
.sasmix-overview-section-09 .overview-image .image-content .image-text .title {
  font-size: 17px;
}

/* Content panel */
.sasmix-overview-section-09 .overview-content {
  background: #eef1fb;
  border-radius: 28px;
  padding: 72px;
  margin-top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* "Consulting" pill */
.sasmix-overview-section-09 .overview-content .section-title-wrap .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(13, 41, 74, 0.08);
  border-radius: 100px;
  padding: 9px 20px;
  font-weight: 600;
  color: #1680fb;
  margin-bottom: 22px;
}

/* Heading */
.sasmix-overview-section-09 .overview-content .section-title2 .title,
.sasmix-overview-section-09 .overview-content > .title {
  font-size: clamp(32px, 3vw, 50px);
  line-height: 1.07;
  letter-spacing: -1.2px;
  font-weight: 800;
  color: #0d294a;
}

/* Body copy — lighter & more readable than the theme's 600-weight */
.sasmix-overview-section-09 .overview-content p {
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: #5a6b7b;
  margin-top: 22px;
  max-width: 540px;
}

/* CTA */
.sasmix-overview-section-09 .overview-content .btn {
  border-radius: 10px;
  font-weight: 600;
  margin-top: 30px;
  align-self: flex-start;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.sasmix-overview-section-09 .overview-content .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(22, 128, 251, 0.3);
}

/* Stacked layout: drop equal-height + restore image height on small screens */
@media (max-width: 991px) {
  .sasmix-overview-section-09 .overview-wrap-03 .row,
  .sasmix-overview-section-09 .overview-wrap-03 .row > [class*="col-"] {
    display: block;
  }
  .sasmix-overview-section-09 .overview-image .image img {
    min-height: 0;
    height: 460px;
  }
  .sasmix-overview-section-09 .overview-content {
    padding: 48px 32px;
    margin-top: 24px; /* gap between the stacked image and panel */
  }
}

/* FAQ polish now lives in site-enhance.css (shared by home + faq page). */

/* ---------- Responsive (stacked layout < 768px) ---------- */
.sasmix-hero-section-05 .hero-content .title {
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .sasmix-hero-section-05 {
    padding-top: 130px;
    padding-bottom: 50px;
    text-align: center;
  }
  .sasmix-hero-section-05 .hero-content .text {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-btn-group {
    justify-content: center;
    gap: 12px;
  }
  .hero-btn-group .btn {
    flex: 1 1 100%;
    text-align: center;
  }
  .sasmix-hero-section-05 .hero-images {
    margin-top: 36px;
  }
  .sasmix-hero-section-05 .hero-images .image img {
    max-height: none;
    border-radius: 16px;
  }
}