/* =========================
   HERO SECTION
   ========================= */
.hero-modern {
  width: 100%;
  padding: 5rem 1.5rem 4.5rem;
  text-align: center;
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 18% 28%, rgba(96,93,186,0.12), transparent 60%),
    radial-gradient(circle at 82% 72%, rgba(255,120,90,0.12), transparent 60%);
}

.hero-content {
  max-width: 820px;
  margin: 0 auto 2.6rem;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1f2340;
}

.hero-subtitle {
  margin-top: .6rem;
  font-size: 1.2rem;
  color: #555;
}

.hero-desc {
  margin: 1rem auto 2rem;
  max-width: 560px;
  font-size: 1rem;
  color: #666;
}

/* =========================
   HERO BUTTONS
   ========================= */
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.hero-btn {
  padding: .9rem 1.9rem;
  border-radius: 40px;
  font-weight: 600;
  transition: all .25s ease;
}

.hero-btn.primary {
  background: #605dba;
  color: #fff;
}

.hero-btn.secondary {
  border: 1.5px solid #605dba;
  color: #605dba;
}

.hero-btn:hover {
  transform: translateY(-2px);
  opacity: .9;
}

/* =========================
   AUTO SLIDE WRAPPER
   DESKTOP: 2 CARDS VIEW
   ========================= */
.hero-slider-wrapper {
  max-width: 800px;   /* 2 cards visible */
  margin: 3rem auto 0;
  overflow: hidden;
  padding: 0 12px;
}
/* =========================
   GLASSMORPHIC CARD
   ========================= */
.hero-slide {
  flex: 0 0 300px;
  max-width: 300px;
  padding: 1.4rem 1.5rem;
  border-radius: 18px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.25)
  );

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border: 1.6px solid rgba(96,93,186,0.65);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.45),
    0 14px 36px rgba(96,93,186,0.22);

  transition: transform .45s ease, box-shadow .45s ease;
}

.hero-slide h4 {
  font-size: 1.05rem;
  margin-bottom: .45rem;
  color: #2d2a7c;
}

.hero-slide p {
  font-size: .9rem;
  line-height: 1.45;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-slide:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.6),
    0 22px 52px rgba(96,93,186,0.32);
}

/* =========================
   MOBILE OPTIMIZATION
   ========================= */
@media (max-width: 768px) {

  .hero-modern {
    padding: 3.2rem 1rem 3rem;
  }

  /* HERO TYPOGRAPHY */
  .hero-title {
    font-size: 2.3rem;
    line-height: 1.25;
    margin-bottom: .6rem;
  }

  .hero-subtitle {
    font-size: 1.05rem;
  }

  .hero-desc {
    font-size: .95rem;
    margin-bottom: 1.6rem;
  }

  .hero-btn {
    padding: .8rem 1.6rem;
    font-size: .95rem;
  }

  /* SLIDER MOBILE */
  .hero-slider-wrapper {
    max-width: 100%;
    margin-top: 2rem;
  }

  .hero-slide {
    flex: 0 0 250px;
    max-width: 250px;
    padding: 1.05rem 1.1rem;
  }

  .hero-slide h4 {
    font-size: .95rem;
  }

  .hero-slide p {
    font-size: .82rem;
    line-height: 1.35;
    -webkit-line-clamp: 3;
  }

  .hero-auto-strip {
    animation-duration: 46s;
  }
}
/* =========================
   DESKTOP HERO COMPACT FIX
   ========================= */
@media (min-width: 769px) {

  /* Reduce overall hero height */
  .hero-modern {
    padding-top: 4rem;     /* was 5rem */
    padding-bottom: 3.2rem; /* was 4.5rem */
  }

  /* Reduce gap below text */
  .hero-content {
    margin-bottom: 2rem; /* was 2.6rem */
  }

  /* Reduce gap before slider */
  .hero-slider-wrapper {
    margin-top: 2.2rem; /* was 3rem */
  }

  /* Slightly tighter card padding (vertical) */
  .hero-slide {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }

  /* Reduce card text height a bit */
  .hero-slide p {
    line-height: 1.4;
  }
}
/* ===== HERO SLIDER CLEAN FIX ===== */

.hero-slider-wrapper {
  max-width: 760px;              /* 👈 2 cards visible */
  margin: 2.2rem auto 0;
  padding: 1.2rem 0;
  overflow: hidden;
  position: relative;

  /* IMPORTANT: neutral base to stop color bleed */
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
  border-radius: 22px;
}

/* auto moving strip */
.hero-auto-strip {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  animation: heroSlideMove 28s linear infinite;
}

/* animation */
@keyframes heroSlideMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* card */
.hero-slide {
  flex: 0 0 300px;
  max-width: 300px;
  padding: 1.25rem 1.4rem;
  border-radius: 16px;

  background: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(96,93,186,0.45);

  box-shadow:
    0 10px 28px rgba(96,93,186,0.18);

  transition: transform .35s ease, box-shadow .35s ease;
}

/* hover (desktop only) */
.hero-slide:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(96,93,186,0.28);
}

.hero-slide h4 {
  font-size: 1rem;
  margin-bottom: .4rem;
  color: #2d2a7c;
}

.hero-slide p {
  font-size: .88rem;
  line-height: 1.45;
  color: #444;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {

  .hero-slider-wrapper {
    max-width: 100%;
    padding: 1rem;
    border-radius: 18px;
  }

  .hero-slide {
    flex: 0 0 250px;
    max-width: 250px;
    padding: 1rem;
  }

  .hero-auto-strip {
    animation-duration: 36s;
  }
}