/* ============================================================
   home.css — Achievers Little Minds · Montessori Home Page
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --alm-purple:  #423F8D;
  --alm-pink:    #ED078B;
  --alm-yellow:  #FBCE0F;
  --alm-teal:    #0BBFCC;
  --alm-green:   #3DB87F;
  --alm-orange:  #FF7244;
  --alm-cream:   #FFFBF5;
  --alm-lavender:#F5F3FF;
  --alm-text:    #2D2D3E;
  --alm-muted:   #6B7280;
  --alm-shadow:  0 8px 30px rgba(0,0,0,0.08);
  --alm-shadow-h:0 18px 50px rgba(0,0,0,0.14);
  --alm-radius:  24px;
}

/* ── Base overrides for home ───────────────────────────────── */
body { font-family: 'Nunito', 'Roboto', sans-serif; }

/* ── Hero decorative animations (from bachpan-global design) ─ */

/* Rainbow stripe across the very top of hero */
.alm-rainbow-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg,
    #F72585 0%, #FF6B35 18%, #FFD700 33%,
    #43A047 50%, #00B4D8 65%, #42A5F5 82%, #7B2D8B 100%);
  z-index: 20;
  pointer-events: none;
}

/* Confetti dots — rise from bottom, spin and fade out */
.alm-confetti-dot {
  position: absolute;
  border-radius: 50%;
  animation: almFloatDot linear infinite;
  pointer-events: none;
  z-index: 5;
  opacity: .7;
}
@keyframes almFloatDot {
  0%   { transform: translateY(0)        rotate(0deg)   scale(1);  opacity: .7; }
  50%  {                                                            opacity: .45; }
  100% { transform: translateY(-110vh)   rotate(360deg) scale(.5); opacity: 0;  }
}

/* Floating pills — gentle vertical bob */
.alm-float-pill {
  position: absolute;
  border-radius: 50px;
  padding: 7px 15px;
  font-family: 'Nunito', 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  animation: almFloatPill ease-in-out infinite;
  box-shadow: 0 4px 18px rgba(0,0,0,.14);
  pointer-events: none;
  z-index: 6;
}
@keyframes almFloatPill {
  0%,100% { transform: translateY(0);    }
  50%     { transform: translateY(-10px);}
}

/* Wrapper must be position:relative so absolute children work */
.slider-area { position: relative; overflow: hidden; }

/* ── Hero slider — fix fade jerk ──────────────────────────── */
/*
  With fade:true, slick switches the active slide between
  position:relative and position:absolute. That reflow collapses
  the .slick-list height for one frame, causing a visible jerk.
  Fixes:
    1. Pin .slick-list / .slick-track to a stable min-height.
    2. Promote slides to their own GPU layer (will-change + backface).
    3. Prevent any sub-pixel repaints with transform: translateZ(0).
*/
.slider-area .slick-list,
.slider-area .slick-track {
  min-height: 720px;
  height: 100%;
}
.slider-area .slick-list { overflow: hidden; }

.slider-area .single-slider {
  will-change: opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Fade transition — stop slick's position:absolute from zeroing the height */
.slider-area .slick-slide { height: inherit; min-height: 720px; }

/* Responsive height adjustments to match .slider-height breakpoints */
@media (max-width: 1199px) {
  .slider-area .slick-list,
  .slider-area .slick-track,
  .slider-area .slick-slide { min-height: 650px; }
}
@media (max-width: 991px) {
  .slider-area .slick-list,
  .slider-area .slick-track,
  .slider-area .slick-slide { min-height: 600px; }
}
@media (max-width: 767px) {
  .slider-area .slick-list,
  .slider-area .slick-track,
  .slider-area .slick-slide { min-height: 550px; }
}
@media (max-width: 575px) {
  .slider-area .slick-list,
  .slider-area .slick-track,
  .slider-area .slick-slide { min-height: 520px; }
}

/* ── Hero slider arrows ────────────────────────────────────── */
.slider-area .slick-prev,
.slider-area .slick-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  color: #fff; font-size: 18px;
  line-height: 50px; text-align: center;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s;
  display: flex !important; align-items: center; justify-content: center;
}
.slider-area .slick-prev { left: 28px; }
.slider-area .slick-next { right: 28px; }
.slider-area .slick-prev:hover,
.slider-area .slick-next:hover {
  background: #ED078B; border-color: #ED078B;
  transform: translateY(-50%) scale(1.1);
}
.slider-area .slick-prev i,
.slider-area .slick-next i { color: #fff; font-size: 16px; line-height: 1; }
.slider-area .slick-prev::before,
.slider-area .slick-next::before { display: none; }

/* Hero slider dots */
.slider-area .slick-dots {
  position: absolute; bottom: 24px;
  left: 0; right: 0; text-align: center;
  list-style: none; padding: 0; margin: 0;
}
.slider-area .slick-dots li { display: inline-block; margin: 0 5px; }
.slider-area .slick-dots li button {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: transparent; text-indent: -9999px;
  cursor: pointer; padding: 0;
  transition: background .2s, border-color .2s, width .2s;
}
.slider-area .slick-dots li.slick-active button {
  background: #ED078B; border-color: #ED078B;
  width: 26px; border-radius: 5px;
}

/* Stats strip below hero */
.hero-stats-strip {
  background: #fff;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 8px 40px rgba(66,63,141,.10);
  padding: 28px 20px;
}
.hstat-item { text-align: center; padding: 8px 0; }
.hstat-num {
  font-family: 'Fredoka One', cursive;
  font-size: 2.2rem; display: block; line-height: 1;
}
.hstat-label {
  font-size: 11px; color: #888; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; margin-top: 5px;
}
.hstat-divider { width: 1px; height: 48px; background: #E8E4F7; margin: auto; }
@media (max-width: 767px) {
  .hero-stats-strip { border-radius: 0; padding: 20px 10px; }
  .hstat-num { font-size: 1.7rem; }
  .hstat-label { font-size: 10px; }
}

/* ── Shared utilities ──────────────────────────────────────── */
.alm-badge-label {
  display: inline-block;
  background: linear-gradient(135deg, var(--alm-pink) 0%, var(--alm-purple) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 50px;
  margin-bottom: 14px;
}
.alm-section-title h2 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--alm-purple);
  line-height: 1.2;
  margin-bottom: 12px;
}
.alm-section-title p {
  font-size: 16px;
  color: var(--alm-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}


/* ── FEATURES ──────────────────────────────────────────────── */
.alm-features { background: var(--alm-cream); padding: 100px 0 90px; }

.alm-feat-card {
  background: #fff;
  border-radius: 26px;
  padding: 38px 26px 32px;
  text-align: center;
  box-shadow: var(--alm-shadow);
  transition: transform .3s, box-shadow .3s;
  height: 100%;
  border-top: 5px solid transparent;
}
.alm-feat-card:hover { transform: translateY(-9px); box-shadow: var(--alm-shadow-h); }
.alm-feat-card.fc1 { border-top-color: var(--alm-pink); }
.alm-feat-card.fc2 { border-top-color: var(--alm-purple); }
.alm-feat-card.fc3 { border-top-color: var(--alm-teal); }
.alm-feat-card.fc4 { border-top-color: var(--alm-yellow); }

.alm-feat-icon {
  width: 80px; height: 80px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px; font-size: 32px;
}
.fc1 .alm-feat-icon { background: #FFF0F8; color: var(--alm-pink); }
.fc2 .alm-feat-icon { background: #ECEAFF; color: var(--alm-purple); }
.fc3 .alm-feat-icon { background: #E0FAFF; color: #0097A7; }
.fc4 .alm-feat-icon { background: #FFFBE6; color: #D97706; }

.alm-feat-card h5 {
  font-family: 'Fredoka One', cursive;
  font-size: 21px; color: var(--alm-purple);
  margin-bottom: 10px;
}
.alm-feat-card p { font-size: 14px; color: var(--alm-muted); line-height: 1.68; margin: 0; }

/* ── ABOUT ─────────────────────────────────────────────────── */
.alm-about { background: #fff; padding: 90px 0; }

.alm-about-visual { position: relative; display: inline-block; width: 100%; }
.alm-about-visual .blob-ring {
  position: absolute; width: 90%; height: 90%;
  background: linear-gradient(135deg, #EDE7F6, #FCE4EC);
  border-radius: 63% 37% 52% 48% / 48% 52% 48% 52%;
  top: 5%; left: 5%; z-index: 0;
}
.alm-about-visual img {
  position: relative; z-index: 1;
  width: 100%; height: 450px; object-fit: cover;
  border-radius: 56% 44% 52% 48% / 44% 52% 48% 56%;
  box-shadow: 0 24px 70px rgba(0,0,0,.13); display: block;
}
.alm-about-badge {
  position: absolute; top: 18px; right: 0px; z-index: 2;
  background: linear-gradient(135deg, var(--alm-yellow), #F59E0B);
  border-radius: 20px; padding: 16px 20px; text-align: center;
  box-shadow: 0 10px 30px rgba(251,206,15,.42); min-width: 106px;
}
.alm-about-badge .bnum {
  font-family: 'Fredoka One', cursive; font-size: 30px; color: #fff;
  display: block; line-height: 1;
}
.alm-about-badge .blbl { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.9); }

.alm-about-copy { padding-left: 48px; }
.alm-about-copy h2 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(28px, 3.2vw, 40px); color: var(--alm-purple); margin-bottom: 14px; line-height: 1.2;
}
.alm-about-copy p { font-size: 15px; color: var(--alm-muted); line-height: 1.78; margin-bottom: 12px; }

.alm-checklist { list-style: none; padding: 0; margin: 16px 0 28px; }
.alm-checklist li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; font-weight: 700; color: var(--alm-text); padding: 7px 0;
}
.alm-checklist li .ck-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--alm-pink), #BF0070);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px;
  margin-top: 1px;
}

/* ── PROGRAMS ──────────────────────────────────────────────── */
.alm-programs { background: var(--alm-lavender); padding: 90px 0; }

.alm-prog-card {
  background: #fff; border-radius: 26px; overflow: hidden;
  box-shadow: var(--alm-shadow); transition: transform .3s, box-shadow .3s; height: 100%;
}
.alm-prog-card:hover { transform: translateY(-9px); box-shadow: var(--alm-shadow-h); }

.alm-prog-card .prog-img { position: relative; height: 210px; overflow: hidden; }
.alm-prog-card .prog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.alm-prog-card:hover .prog-img img { transform: scale(1.07); }

.alm-prog-card .prog-stripe { height: 6px; width: 100%; }
.p1 .prog-stripe { background: linear-gradient(90deg, var(--alm-pink), #FF6BC1); }
.p2 .prog-stripe { background: linear-gradient(90deg, var(--alm-teal), #00BCD4); }
.p3 .prog-stripe { background: linear-gradient(90deg, var(--alm-purple), #6C63FF); }
.p4 .prog-stripe { background: linear-gradient(90deg, var(--alm-orange), #FFA040); }

.alm-prog-card .prog-body { padding: 22px 22px 26px; }

.alm-prog-card .age-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; padding: 4px 13px;
  border-radius: 50px; margin-bottom: 10px; letter-spacing: .02em;
}
.p1 .age-chip { background: #FFF0F8; color: var(--alm-pink); }
.p2 .age-chip { background: #E0FAFF; color: #0097A7; }
.p3 .age-chip { background: #ECEAFF; color: var(--alm-purple); }
.p4 .age-chip { background: #FFF3EE; color: var(--alm-orange); }

.alm-prog-card h5 { font-family: 'Fredoka One', cursive; font-size: 22px; color: var(--alm-purple); margin-bottom: 8px; }
.alm-prog-card p  { font-size: 14px; color: var(--alm-muted); line-height: 1.62; margin-bottom: 16px; }
.alm-prog-card .prog-link {
  font-size: 14px; font-weight: 800; color: var(--alm-purple);
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: gap .2s, color .2s;
}
.alm-prog-card .prog-link:hover { gap: 10px; color: var(--alm-pink); }

/* ── TESTIMONIALS ──────────────────────────────────────────── */
.alm-testimonials { background: #fff; padding: 90px 0; }

.alm-testi-card {
  background: var(--alm-cream);
  border-radius: 26px; padding: 34px 28px;
  box-shadow: var(--alm-shadow); height: 100%; position: relative;
  transition: transform .3s, box-shadow .3s;
}
.alm-testi-card:hover { transform: translateY(-7px); box-shadow: var(--alm-shadow-h); }

.alm-testi-card .open-quote {
  position: absolute; top: 14px; right: 20px;
  font-size: 80px; color: var(--alm-pink); opacity: .1;
  font-family: Georgia, serif; line-height: 1;
}
.alm-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.alm-stars i { font-size: 14px; color: var(--alm-yellow); }
.alm-testi-card blockquote {
  font-size: 15px; color: var(--alm-text); line-height: 1.74;
  font-style: italic; margin: 0 0 22px; padding: 0; border: none;
}
.alm-testi-author { display: flex; align-items: center; gap: 13px; }
.alm-testi-author .avatar {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka One', cursive; font-size: 22px; color: #fff;
}
.alm-testi-author .av1 { background: linear-gradient(135deg, var(--alm-pink), #BF0070); }
.alm-testi-author .av2 { background: linear-gradient(135deg, var(--alm-teal), #0097A7); }
.alm-testi-author .av3 { background: linear-gradient(135deg, var(--alm-purple), #6C63FF); }
.alm-testi-author .aname { font-weight: 800; font-size: 15px; color: var(--alm-purple); display: block; }
.alm-testi-author .achild { font-size: 12px; color: var(--alm-muted); }

/* ── GALLERY STRIP ─────────────────────────────────────────── */
.alm-gallery { background: var(--alm-cream); padding: 90px 0; }

.alm-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.alm-gal-item {
  position: relative; height: 250px; overflow: hidden; border-radius: 20px;
}
.alm-gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; display: block; }
.alm-gal-item:hover img { transform: scale(1.08); }
.alm-gal-item .gal-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(66,63,141,.68), rgba(237,7,139,.5));
  border-radius: 20px;
  opacity: 0; transition: opacity .3s;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 30px;
}
.alm-gal-item:hover .gal-overlay { opacity: 1; }

/* ── BLOG CARDS ────────────────────────────────────────────── */
.alm-blog { background: #fff; padding: 90px 0; }

.alm-blog-card {
  background: #fff; border-radius: 26px; overflow: hidden;
  box-shadow: var(--alm-shadow); height: 100%; transition: transform .3s, box-shadow .3s;
}
.alm-blog-card:hover { transform: translateY(-7px); box-shadow: var(--alm-shadow-h); }

.alm-blog-card .b-img { height: 215px; overflow: hidden; }
.alm-blog-card .b-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.alm-blog-card:hover .b-img img { transform: scale(1.06); }

.alm-blog-card .b-body { padding: 24px 22px; }
.alm-blog-card .b-cat {
  display: inline-block;
  background: #ECEAFF; color: var(--alm-purple);
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 13px; border-radius: 50px; margin-bottom: 10px;
}
.alm-blog-card .b-date { font-size: 12px; color: var(--alm-muted); margin-left: 8px; }
.alm-blog-card h5 { font-family: 'Fredoka One', cursive; font-size: 19px; color: var(--alm-purple); margin-bottom: 8px; line-height: 1.35; }
.alm-blog-card h5 a { color: inherit; text-decoration: none; }
.alm-blog-card h5 a:hover { color: var(--alm-pink); }
.alm-blog-card p { font-size: 14px; color: var(--alm-muted); line-height: 1.62; margin-bottom: 14px; }
.alm-blog-card .b-read {
  font-size: 14px; font-weight: 800; color: var(--alm-pink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: gap .2s;
}
.alm-blog-card .b-read:hover { gap: 10px; }

/* ── CTA ───────────────────────────────────────────────────── */
.alm-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #312E81 0%, #4338CA 40%, #A21CAF 100%);
  padding: 88px 0;
}
.alm-cta .cta-circle-1 {
  position: absolute; width: 450px; height: 450px;
  background: rgba(255,255,255,.05); border-radius: 50%;
  top: -160px; right: -80px; pointer-events: none;
}
.alm-cta .cta-circle-2 {
  position: absolute; width: 260px; height: 260px;
  background: rgba(237,7,139,.14); border-radius: 50%;
  bottom: -90px; left: 4%; pointer-events: none;
}
.alm-cta-body { position: relative; z-index: 2; text-align: center; color: #fff; }
.alm-cta-body h2 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(28px, 4.2vw, 50px); color: #fff; margin-bottom: 14px; line-height: 1.2;
}
.alm-cta-body p { font-size: 18px; opacity: .88; max-width: 600px; margin: 0 auto 38px; line-height: 1.65; color: rgba(255,255,255,.88); }

.btn-cta-white {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; color: var(--alm-purple) !important;
  padding: 16px 38px; border-radius: 50px;
  font-size: 16px; font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .22s, box-shadow .22s, color .22s;
  margin: 0 8px 10px;
}
.btn-cta-white:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.22); color: var(--alm-pink) !important; }

.btn-cta-outline {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; color: #fff !important;
  padding: 16px 38px; border-radius: 50px;
  font-size: 16px; font-weight: 800;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,.55);
  transition: all .22s;
  margin: 0 8px 10px;
}
.btn-cta-outline:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-3px); }

/* ── SECTION VIEW-ALL BUTTON ───────────────────────────────── */
.btn-alm-view-all {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--alm-purple), #6C63FF);
  color: #fff !important; padding: 14px 36px; border-radius: 50px;
  font-size: 15px; font-weight: 800; text-decoration: none;
  box-shadow: 0 8px 24px rgba(66,63,141,.3);
  transition: transform .22s, box-shadow .22s;
}
.btn-alm-view-all:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(66,63,141,.38); color: #fff !important; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 991px) {
  .alm-about-copy { padding-left: 0; margin-top: 32px; }
  .alm-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .alm-features, .alm-about, .alm-programs,
  .alm-testimonials, .alm-gallery, .alm-blog, .alm-cta { padding: 60px 0; }
  .alm-about-visual img { height: 320px; }
}
@media (max-width: 575px) {
  .alm-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .alm-gal-item { height: 160px; }
}