/* Reset / Base */
:root{
  --primary:#006432;
  --accent:#FFD700;
  --white:#ffffff;
  --max-width:1100px;
}

*{box-sizing:border-box;margin:0;padding:0}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family: 'Inter', Arial, Helvetica, sans-serif;color:#222;line-height:1.55;background:#fff}
.wrap{max-width:var(--max-width);margin:0 auto;padding:20px}

.top-header{background:var(--primary);color:var(--white);font-size:13px;padding:6px 0;line-height:1.4}
.top-inner{display:flex;justify-content:space-between;align-items:center}
  .top-left a,.top-right a{color:var(--white);margin-right:12px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.top-right .social{opacity:0.95;display:inline-flex;align-items:center;justify-content:center}
.top-left i, .top-right i{font-size:14px;margin-right:6px}
.top-left .text{display:inline-block;line-height:1}
.country-code{display:none;margin-right:4px;color:rgba(255,255,255,0.95);font-weight:600}

/* Site header */
.site-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:40}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.brand .site-title{font-weight:700;color:var(--primary);text-decoration:none}
.primary-nav .menu{list-style:none;display:flex;gap:18px}
.primary-nav .menu li a{color:#333;text-decoration:none;padding:12px 6px;display:inline-block}
.header-cta .btn-enquiry{background:var(--accent);color:#000;padding:8px 14px;border-radius:4px;text-decoration:none;font-weight:600}

.mobile-toggle{display:none;background:transparent;border:0;font-size:22px}

/* Mobile menu */
.mobile-menu{display:none;background:#fff;padding:15px;border-top:1px solid #eee}
.mobile-menu-list{list-style:none}
.mobile-menu-list li a{display:block;padding:10px 0}
.btn-enquiry.mobile{display:block;margin-top:12px}

/* Hero */
.hero{background:linear-gradient(180deg,var(--primary) 0%,#054d2d 100%);color:var(--white);padding:40px 0;position:relative;overflow:hidden;min-height:50vh}
.hero .wrap{display:block}
/* Ensure the hero inner (which also uses .wrap) becomes a flex container.
  Use a more specific selector so this overrides the generic `.hero .wrap{display:block}`
  and lets the two-column layout work as intended. */
.hero .wrap.hero-inner{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}

/* Make hero full-bleed so the section spans the full viewport width while
  the inner `.wrap` remains constrained and aligned with header content */
.hero{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding-left:0;padding-right:0}
.hero .wrap{max-width:var(--max-width);margin:0 auto;padding-left:20px;padding-right:20px}
/* Match header/section padding breakpoints so hero content lines up exactly */
@media(max-width:900px){
  .hero .wrap{padding-left:12px;padding-right:12px}
}
@media(min-width:1200px){
  /* keep decorative image as flex item; no absolute positioning */
  .hero-decor{margin-left:28px}
}
@media(min-width:900px){
  .hero .wrap.hero-inner{flex-direction:row;align-items:center;gap:28px;justify-content:flex-start}
  .hero .wrap.hero-inner > div:first-child{flex:0 0 60%;max-width:60%}
}
.hero-inner{display:flex;flex-direction:column;gap:12px;justify-content:center;min-height:inherit}
.hero .hero-inner{position:relative;z-index:2}
  .hero-decor{order:2;position:relative;right:auto;bottom:auto;transform:none;align-self:stretch;width:100%;max-width:none;margin:0}

  /* Make the hero left column full width on mobile so content and decor stack naturally
     and center its contents (text, CTAs) */
  .hero-inner > div:first-child{flex:0 0 100%;max-width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}

  /* Ensure hero title/sub and CTA groups are centered */
  .hero-inner > div:first-child .hero-title,
  .hero-inner > div:first-child .hero-sub,
  .hero-inner > div:first-child .hero-ctas{width:100%;text-align:center}

  /* Center the decorative image inside its container and make it responsive */
  .hero-decor img{display:block;margin:0 auto;width:100%;height:auto;object-fit:contain}

/* Education-themed hero variant */
.hero.education{
  background:linear-gradient(135deg,#00695c 0%,#00bfa5 45%,#ffd54f 100%);
  color: #012;
  padding:40px 0;
  min-height:50vh;
  overflow:visible;
  transition:transform .28s ease;
}
.hero.education::before{
  content:'';
  position:absolute;inset:0;pointer-events:none;z-index:1;
  /* subtle repeating icon-swarm using a compact SVG; slightly more visible and animated */
  background-image:radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23004632' opacity='0.12'><path d='M3 21l18-9L3 3v6l12 3-12 3z'/><circle cx='18' cy='6' r='1.6'/><path d='M6 8h6v2H6z' opacity='0.08'/></g></svg>");
  background-size:20px 20px, 56px 56px;
  background-repeat:repeat, repeat;
  opacity:0.16;
  animation:swarmDrift 20s linear infinite;
}
/* decorative pencil SVG placed at bottom-right, animated */
  /* remove decorative pencil SVG so it doesn't overlap the right image */
  .hero.education::after{display:none !important}
.hero.education:hover::after{transform:rotate(18deg) translateY(0) scale(1)}
  /* Use flex centering so content stays visible; ensure inner content is above decorative backgrounds */
  .hero.education .hero-inner{transition:transform .36s ease;transform-origin:center;position:relative;top:auto;transform:none;z-index:3}
  .hero{display:flex;align-items:center}

  /* Layout: keep hero text on the left and decorative image on the right
     Give the content column fixed proportion so it doesn't get overlapped */
  /* Keep hero text column between 50-60% width so content wraps nicely */
  /* text column sits inside the centered .wrap, so no extra calc margin is needed */
    .hero-inner > div:first-child{flex:0 0 60%;max-width:60%;text-align:left;padding-left:0;margin-left:0}

  /* Slightly narrower on medium screens */
  @media(max-width:1100px){
    .hero-inner > div:first-child{flex:0 0 60%;max-width:60%;padding-left:0;margin-left:0}
  }

  /* Stack to full width on smaller screens */
  @media(min-width:900px){
    .hero-inner{flex-direction:row;align-items:center;gap:28px}
    .hero-inner > div{flex:1}
    /* Decorative image: place outside the centered .wrap so it won't overlap content */
     /* Restore flow layout: make the decorative image a normal flex item to the right
       so it aligns with the `.wrap` content and doesn't sit in the page center. */
     .hero-decor{position:relative;margin-left:28px;align-self:center;order:2;flex:0 0 auto;width:min(34vw,360px);max-width:360px;min-width:140px;height:auto;pointer-events:none;z-index:2;animation:floatSlow 6s ease-in-out infinite;transform-origin:center}
    /* remove large top padding so content can be perfectly centered; height is controlled by min-height */
    .hero{padding:0}
  }
  /* Ensure heading and subheading contrast on dark/green backgrounds */
  .hero.education .hero-title{color:var(--white)!important;text-shadow:0 4px 18px rgba(0,0,0,0.28)}
  .hero.education .hero-sub{color:rgba(255,255,255,0.92)}

    /* Right-side decorative image: gentle float animation, responsive sizing
      On large screens prefer vertical centering (top:50%) so the image sits in the middle/right.
      On small screens keep it anchored to the bottom-right to avoid overlapping content. */
    /* For larger widths keep it as a flex item (same rule applies) */
    .hero-decor{position:relative;margin-left:28px;align-self:center;order:2;flex:0 0 auto;width:min(34vw,360px);max-width:360px;min-width:140px;height:auto;animation:floatSlow 6s ease-in-out infinite;transform-origin:center;pointer-events:none;z-index:2}

  @keyframes floatSlow{
    0%{transform:translateY(0) rotate(0deg)}
    50%{transform:translateY(-8px) rotate(-1deg)}
    100%{transform:translateY(0) rotate(0deg)}
  }

@keyframes pencilFloat{0%{transform:rotate(18deg) translateY(0)}50%{transform:rotate(14deg) translateY(-8px)}100%{transform:rotate(18deg) translateY(0)}}

@keyframes swarmDrift{from{background-position:0 0}to{background-position:-720px 0}}

@media(min-width:900px){
  .hero-inner{flex-direction:row;align-items:center;gap:28px;justify-content:flex-start}
  .hero-inner > div{flex:1}
  /* Place decorative image just outside the centered .wrap so it doesn't overlap the content. */
  .hero-decor{position:relative;margin-left:28px;align-self:center;order:2;flex:0 0 auto;width:min(34vw,360px);max-width:360px;min-width:140px;height:auto;pointer-events:none;z-index:2}
  /* remove large top padding so content can be perfectly centered; height is controlled by min-height */
  .hero{padding:0}
  /* remove manual left nudge so hero content aligns with the .wrap naturally */
  .hero-inner > div:first-child{margin-left:0}
}

/* Reserve space on the content column so the image (pinned to right) doesn't overlap text */
@media(min-width:900px){
  /* Reset reserved padding so left content aligns normally inside the .wrap */
  .hero-inner > div:first-child{padding-right:0}
}

/* Slightly nudge the right offset on very large screens so the image sits visually balanced */
@media(min-width:1400px){
  .hero-decor{margin-left:32px}
}

/* On small screens anchor image to the bottom-right and use a smaller image */
@media(max-width:899px){
  /* In stacked layout, put the image below content and center it */
  .hero-decor{order:3;margin-left:auto;margin-right:auto;transform:none;width:100%;min-width:0;max-width:none}
}

/* accent underline on hero buttons */
.hero.education .btn-primary{box-shadow:0 12px 36px rgba(1,70,30,0.08);border-radius:14px}
.hero.education .hero-title{letter-spacing:0.6px}

/* Kid-friendly headings (lighter) */
h1,h2,h3,.hero-title{font-family:'Fredoka', 'Baloo 2', sans-serif; font-weight:600}
.hero-title{font-weight:600;text-shadow:none}

@keyframes kidBounce{
  0%{transform:translateY(6px) scale(0.99);opacity:0}
  60%{transform:translateY(-1px) scale(1.01);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}

 .hero-title{animation:kidBounce .7s cubic-bezier(.2,.9,.25,1) both}
 .hero-title:hover{transform:translateY(-2px) scale(1.01);transition:transform .18s ease}

.card{border-top:6px solid rgba(255,213,79,0.9)}
.card h3{font-family:'Baloo 2', sans-serif;margin-top:0}

/* Triangular 'patang' / mosque-wall edge at bottom of hero (smaller) */
.hero.education{position:relative;padding-bottom:62px}
.hero.education .hero-edge{position:absolute;left:0;right:0;bottom:0;height:42px;pointer-events:none;z-index:18;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='42' viewBox='0 0 60 42'><polygon points='0,42 30,0 60,42' fill='%23FFD54F' /></svg>");
  background-repeat:repeat-x;background-size:60px 42px;background-position:bottom center;box-shadow:0 -4px 12px rgba(0,0,0,0.05)}

@media(max-width:700px){
  .hero.education .hero-edge{height:30px;background-size:48px 30px}
  .hero.education{padding-bottom:48px}
}

.highlights{padding:40px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;padding:18px;border-radius:12px;box-shadow:0 8px 22px rgba(3,28,10,0.04);transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(3,28,10,0.08)}

/* New section styles */
.features{padding:36px 0}
.features .features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.feature{background:#fff;padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.06);transition:transform .24s ease}
.feature:hover{transform:translateY(-6px)}
.features .lede{margin-bottom:14px;color:rgba(0,0,0,0.7)}
/* Stronger look for features heading */
.features .wrap h2{font-size:clamp(24px,3vw,34px);letter-spacing:0.2px;color:var(--primary);margin-bottom:10px}
.features .wrap h2::before{font-size:22px;margin-right:10px;color:#FFD54F}
.features .wrap .lede{font-size:1.05rem;color:rgba(0,0,0,0.78);margin-bottom:20px}

.programs{padding:32px 0;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
.programs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.program{background:#fff;padding:14px;border-radius:10px}

/* Programs / Academics: clearer visual styling for the small three-column grid */
.programs .wrap h2{font-size:clamp(24px,3vw,34px);color:var(--primary);margin-bottom:10px}
.programs .wrap p{color:rgba(0,0,0,0.78);margin-bottom:18px}
.programs-grid .program{background:transparent;padding:10px 12px;border-left:6px solid rgba(0,100,50,0.08);border-radius:8px;box-shadow:none;transition:transform .2s ease,box-shadow .2s ease}
.programs-grid .program h3{margin-top:0;font-weight:800;color:rgba(0,40,20,0.9);margin-bottom:10px}
.programs-grid .program p{margin:0;color:rgba(0,0,0,0.78)}
.programs-grid .program:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,50,20,0.04)}

.faculty{padding:32px 0}
.faculty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.teacher{display:flex;gap:12px;align-items:center}
.teacher .avatar{width:144px;height:144px;border-radius:16px;object-fit:cover}

.gallery{padding:28px 0}
.gallery{padding:36px 0}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.gallery-grid .gitem{height:272px;overflow:hidden;border-radius:10px}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .28s ease,filter .28s ease}
.gallery-grid .gitem:hover img{transform:scale(1.05);filter:brightness(1.02)}
.gitem-link{display:block;width:100%;height:100%}

.hero-decor{position:relative;margin-left:28px;align-self:center;order:2;flex:0 0 auto;width:min(34vw,360px);max-width:360px;min-width:140px;height:auto;pointer-events:none;z-index:2}
.hero-decor img{width:100%;height:auto;object-fit:contain;max-width:none}

.testimonials{padding:30px 0;background:#fff}
.testimonial{display:block;background:#f7f7f7;padding:14px;border-radius:10px;margin-bottom:12px}

.events{padding:20px 0}
.events-list{list-style:none;padding-left:0}
.events-list li{padding:8px 0;border-bottom:1px dashed #eee}

.admissions{padding:30px 0;background:linear-gradient(180deg,rgba(255,250,230,0.6),transparent)}
.admission-steps ol{padding-left:18px}
/* Admissions: improve readability and button spacing */
.admissions p,
.admissions .admission-steps ol,
.admissions .admission-steps li{
  line-height:1.8;
}
.admissions .admission-steps ol{margin-top:10px}
.admissions .btn-primary{margin-top:18px;text-align:center}

.faq{padding:24px 0}
.faq-list details{background:#fff;padding:12px;border-radius:8px;margin-bottom:8px}
.faq-list details summary{cursor:pointer;text-decoration:none;color:rgba(0,0,0,0.88);font-weight:600}
.faq-list details summary::-webkit-details-marker{display:none}
.faq-list details summary:hover{text-decoration:none;color:rgba(0,0,0,0.88)}
.faq-list details p{margin-top:8px;color:rgba(0,0,0,0.78)}

.contact{padding:38px 0;background:linear-gradient(180deg,rgba(0,105,50,0.03),transparent)}
.contact .wrap{display:block}
.contact-grid{display:grid;grid-template-columns:1fr minmax(320px,44%);gap:20px;align-items:start}
.contact-info{padding:18px}
.contact-info p{margin-bottom:12px;color:rgba(0,0,0,0.78)}
.contact-info a{color:var(--primary);font-weight:700;text-decoration:none;padding:4px 8px;border-radius:8px;background:linear-gradient(90deg,rgba(255,213,79,0.08),transparent);transition:background .18s ease,transform .12s ease;display:inline-block}
.contact-info a:hover{background:linear-gradient(90deg,rgba(255,213,79,0.18),rgba(255,213,79,0.02));transform:translateY(-2px)}
.contact-map{min-height:220px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,0.05)}
.map-placeholder{display:flex;align-items:center;justify-content:center;color:#666;padding:18px;background:linear-gradient(180deg,#f6f9f6,#eef6ec)}
.map-embed iframe{width:100%;height:320px;border:0;display:block;border-radius:10px;box-shadow:0 12px 36px rgba(2,64,30,0.12);transform:translateZ(0)}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .map-embed iframe{height:220px}
}

.blog-teasers{padding:30px 0}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}

/* Blog card thumbnail and animation */
.blog-grid .card{overflow:hidden;position:relative;padding:14px}
.blog-grid .card .thumb-link img{width:100%;height:160px;object-fit:cover;border-radius:10px;margin-bottom:12px;display:block}
.blog-grid .card h3{margin-top:0}
.blog-grid .card{transform:translateY(10px);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.2,1),opacity .4s ease}
.blog-grid .card.visible{transform:none;opacity:1}

/* Flicker tilt on hover for a playful modern effect */
.card:hover{transform:translateY(-12px) rotate(-0.2deg) scale(1.02)}


@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr}
}

.sample-gallery{gap:12px}
.gitem{background:#f4f4f4;height:120px;display:flex;align-items:center;justify-content:center;border-radius:6px}

/* Pages & forms */
.page .content{margin-top:12px}
.contact-form label{display:block;margin-bottom:10px}
.contact-form input,.contact-form textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px}
.notice.success{background:#e8f7ea;border:1px solid #bfe6c9;padding:12px;margin-bottom:12px}

/* Contact page specific styles */
.page-contact .wrap h1{font-size:clamp(22px,3.6vw,36px);color:var(--primary);margin-bottom:14px}
.page-contact .contact-grid{display:grid;grid-template-columns:1fr minmax(320px,44%);gap:22px;align-items:start;padding:8px 0}
.page-contact .form-col{background:#fff;padding:18px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,0.04)}
.page-contact .form-col .contact-form label{font-weight:600;color:rgba(0,0,0,0.8)}
.page-contact .form-col .contact-form input,.page-contact .form-col .contact-form textarea{border:1px solid #e6e6e6;padding:12px;border-radius:8px;background:#fbfbfb}
.page-contact .form-col .contact-form textarea{min-height:140px}
.page-contact .form-col .btn-primary{display:inline-block;padding:12px 20px;border-radius:12px}
.page-contact .info-col .contact-info{background:linear-gradient(180deg,#ffffff,#fbfff9);padding:16px;border-radius:12px;box-shadow:0 10px 28px rgba(3,28,10,0.04)}
.page-contact .info-col .contact-info h3{margin-top:0;color:var(--primary)}
.page-contact .map-embed{margin-top:12px;border-radius:10px;overflow:hidden}
.page-contact .map-embed iframe{width:100%;height:300px;border:0;display:block}

@media(max-width:900px){
  .page-contact .contact-grid{grid-template-columns:1fr;gap:14px}
  .page-contact .form-col,.page-contact .info-col{padding:14px}
  .page-contact .map-embed iframe{height:220px}
  .page-contact .form-col .btn-primary{width:100%;text-align:center}
}

  /* Match homepage button visual for contact submit */
  .page-contact .form-col .btn-primary{
    background:linear-gradient(90deg,#FFD54F,#FFC107);
    padding:12px 20px;border-radius:18px;color:#000;font-weight:800;letter-spacing:0.3px;box-shadow:0 10px 30px rgba(255,193,7,0.12);transition:transform .18s ease,box-shadow .18s ease;display:inline-block;border:none;margin-top:14px
  }
  .page-contact .form-col .btn-primary:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(255,193,7,0.16)}

  /* Contact info icons */
  .contact-info .ci{display:inline-block;width:20px;height:20px;margin-right:10px;vertical-align:middle}
  .contact-info .ci svg{width:20px;height:20px;display:block;fill:var(--primary)}
  /* Font Awesome / icon font fallback: keep icon color consistent with footer */
  .contact-info .ci i,
  .contact-card .ci i,
  .contact .contact-info .ci i{
    color: var(--primary);
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Make phone/email links in contact card appear as normal text (no primary link color) */
  .contact .contact-info a,
  .contact .contact-info a:visited{
    color: inherit !important;
    text-decoration: none !important;
    font-weight: 600;
  }
  .contact .contact-info a:hover{
    text-decoration: underline !important;
    color: inherit !important;
  }
  .contact-info p{margin-bottom:10px}
  .contact-info a{color:var(--primary);text-decoration:none}
  .contact-info a:hover{text-decoration:underline}

  /* Contact cards (address/phone/email) on the right column */
  .contact-cards{display:grid;grid-template-columns:1fr;gap:12px}
  .contact-card{background:linear-gradient(180deg,#ffffff,#fbfff9);padding:14px;border-radius:10px;box-shadow:0 10px 28px rgba(3,28,10,0.04);display:flex;gap:12px;align-items:flex-start}
  .contact-card .ci{flex:0 0 32px;margin-top:4px}
  .contact-card .card-content{flex:1}
  .contact-card h4{margin:0 0 6px 0;color:var(--primary);font-size:15px}
  .contact-card p{margin:0;color:rgba(0,0,0,0.78);font-size:14px}
  .contact-card a{color:var(--primary);text-decoration:none;font-weight:600}
  .contact-card a:hover{text-decoration:underline}
  /* Keep phone/email links together on one line to avoid awkward breaks */
  .contact-card .card-content p a{white-space:nowrap;display:inline-block}
  .contact-card .card-content p{word-break:keep-all}
  @media(max-width:600px){
    /* Allow wrapping on narrow screens so layout doesn't overflow */
    .contact-card .card-content p a{white-space:normal;display:inline}
  }

  /* Utility: prevent breaking in inline phone/email anchors; allow small-screen fallback */
  .no-break{white-space:nowrap}
  @media(max-width:420px){ .no-break{white-space:normal} }

  @media(max-width:900px){
    .page-contact .form-col .btn-primary{width:auto;margin-left:auto;margin-right:auto;display:inline-block}
  }

  /* Terms page styles */
  .page-terms .wrap h1{font-size:clamp(22px,4vw,36px);color:var(--primary);margin-bottom:18px}
  .page-terms .terms-content{background:#fff;padding:22px;border-radius:10px;box-shadow:0 12px 30px rgba(2,64,30,0.04);line-height:1.7}
  .page-terms .terms-content h2,.page-terms .terms-content h3{color:var(--primary);margin-top:18px}
  .page-terms .terms-content p{margin-bottom:12px;color:rgba(0,0,0,0.78)}
  .page-terms .terms-content ul{margin-left:18px;margin-bottom:12px}
  .page-terms .terms-content ol{margin-left:18px;margin-bottom:12px}
  .page-terms .terms-content blockquote{border-left:4px solid rgba(0,100,50,0.08);padding:12px 16px;background:#fbfdf9;border-radius:8px;margin:12px 0}

  @media(max-width:900px){
    .page-terms .terms-content{padding:16px}
  }

  /* Page banner (site-wide) */
  .page-banner{background:linear-gradient(90deg, rgba(0,100,50,0.06), rgba(255,255,255,0.02));border-top:1px solid rgba(0,0,0,0.04);padding:72px 0;min-height:360px;display:flex;align-items:center}
  .page-banner .banner-inner{display:flex;align-items:center;justify-content:flex-start}
  .page-banner .banner-title{font-size:clamp(20px,3vw,34px);color:var(--primary);margin:0;font-weight:700}

  @media(max-width:900px){
    .page-banner{padding:14px 0}
    .page-banner .banner-inner{justify-content:center}
    .page-banner .banner-title{text-align:center}
  }

/* Desktop: left-align homepage banner content and add spacing between text and CTAs */
@media(min-width:901px){
  .page-banner .banner-inner{justify-content:flex-start;align-items:center;gap:28px}
  .page-banner .banner-title{ text-align:left }
  .page-banner .banner-inner > *{ text-align:left }
  /* Give the banner CTA some breathing room from the text */
  .page-banner .btn-primary{ margin-top:18px; margin-left:0 }
  .page-banner .banner-ctas{ margin-left:12px }
}

  /* Banner background image support */
  .page-banner.has-bg{background-size:cover;background-position:center;padding:88px 0;color:#fff;position:relative;min-height:480px}
  .page-banner.has-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.38),rgba(0,0,0,0.32));z-index:1}
  .page-banner.has-bg .wrap{position:relative;z-index:2}
  .page-banner.has-bg .banner-title{color:#fff}

  @media(max-width:900px){
    .page-banner.has-bg{padding:28px 0;min-height:140px}
  }

  /* Hide duplicate H1 in the main content when banner is present directly above */
  .page-banner + main .wrap > h1{display:none}

  @media(max-width:900px){
    .page-banner{padding:36px 0;min-height:220px}
    .page-banner .banner-title{font-size:20px}
    .page-banner.has-bg{min-height:260px;padding:36px 0}
  }

  /* Desktop footer: ensure first column (brand) is left-aligned on larger screens */
  @media(min-width:901px){
      .site-footer{text-align:left}
      .site-footer .wrap.footer-grid{display:grid;grid-template-columns:1fr 1fr 280px;align-items:start}
      .site-footer .footer-brand{text-align:left}
      .site-footer .footer-menu{align-items:flex-start;text-align:left}
      /* Ensure footer logo stays left-aligned on large screens; mobile rules keep it centered */
      .site-footer .footer-brand,
      .site-footer .footer-logo,
      .site-footer .footer-logo img{
        margin-left:0 !important;
        margin-right:0 !important;
        display:block;
        text-align:left;
      }
  }



  /* Consent checkbox styling */
  .contact-consent{display:flex;align-items:center;gap:14px;margin:12px 0;color:rgba(0,0,0,0.75);font-size:14px;line-height:1.2}
  .contact-consent input[type="checkbox"]{width:20px;height:20px;margin:0;accent-color:var(--primary);display:inline-block;vertical-align:middle;transform:translateY(0)}
  .contact-consent a{color:var(--primary);text-decoration:underline}

  /* Warning shown when consent is unchecked */
  .contact-consent-warning{display:block;margin-top:8px;padding:10px 12px;border-radius:8px;background:#fff8e6;border:1px solid rgba(255,193,7,0.14);color:#6b4f00;font-size:13px}

  /* Slightly larger, rounded checkbox for visual match */
  .contact-consent input[type="checkbox"]{width:20px;height:20px;border-radius:4px}
  .contact-consent input[type="checkbox"]:focus{outline:2px solid rgba(0,100,50,0.12)}



/* Footer */
.site-footer{background:#f7f7f7;color:rgba(0,0,0,0.88);padding:24px 0;margin-top:40px;border-top:4px solid rgba(0,0,0,0.04);font-size:13px}
.site-footer .wrap.footer-grid{display:grid;grid-template-columns:1fr 1fr 280px;gap:18px;align-items:start}
.site-footer .footer-brand .footer-logo, .site-footer .footer-brand img{max-height:110px;width:auto;display:block;margin-bottom:8px}

/* Defensive: hide known spinner/overlay elements that can block navigation (temporary) */
#preloader, .preloader, .loader, .loading-overlay, .site-preloader, .spinner, .sk-spinner, .chext_loader, .chext-overlay { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important }
.site-footer .footer-site-title{font-weight:400;color:rgba(0,0,0,0.88);font-size:15px;margin-bottom:6px}
.site-footer .footer-about{color:rgba(0,0,0,0.85);margin-top:6px;font-size:13px;line-height:1.4}
.site-footer .footer-nav{display:block}
.site-footer .footer-nav{justify-self:start;align-self:start}
.site-footer .footer-menu{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.site-footer .footer-menu li{margin-bottom:6px}
.site-footer .footer-menu a{color:rgba(0,0,0,0.85);text-decoration:none;font-size:13px;font-weight:400;letter-spacing:0.2px}
.site-footer .footer-menu a:hover{color:rgba(0,0,0,0.85);text-decoration:none}
.site-footer .footer-contact .contact-line{margin-bottom:8px;color:rgba(0,0,0,0.85);display:flex;align-items:center;gap:8px;font-size:13px}
.site-footer a{color:rgba(0,0,0,0.85);font-weight:400;text-decoration:none}
.site-footer a:hover{text-decoration:none;color:rgba(0,0,0,0.85)}
.site-footer .footer-contact i{background:rgba(0,0,0,0.06);padding:8px;border-radius:8px;color:var(--primary);min-width:36px;text-align:center}
.site-credit{text-align:center;padding:12px 0;color:rgba(0,0,0,0.6);font-size:12px;border-top:1px solid rgba(0,0,0,0.04);margin-top:18px}

@media(max-width:900px){
  .site-footer .wrap.footer-grid{grid-template-columns:1fr;gap:14px}
  .site-footer .footer-contact{order:3}
  .site-footer .footer-nav{order:2}
  /* Center footer navigation on mobile and center its menu items */
  .site-footer .footer-nav{justify-self:center;text-align:center}
  .site-footer .footer-menu{align-items:center;text-align:center}
}

  .top-header .wrap{padding:10px 20px}
.top-header .top-inner{align-items:center}
.top-left{display:flex;gap:12px;align-items:center}
.top-right{display:flex;gap:10px;align-items:center}

@media(max-width:900px){
  .grid-3{grid-template-columns:1fr;}
  .primary-nav{display:none}
  .mobile-toggle{display:block}
  .top-left a:first-child{margin-right:8px}
  /* On narrow screens: show readable text and hide compact country code to reduce clutter */
  .top-left .text{display:inline-block}
  .country-code{display:none}
  .top-left .icon{margin-right:0}
  .wrap{padding:12px}
}

/* Compact top-header for mobile: hide email text, show phone icon only, align socials right */
@media(max-width:900px){
  .top-header{padding:6px 0}
  .top-inner{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .top-left{display:flex;align-items:center;gap:8px}
  /* keep the email icon visible on mobile but hide the long email text to save space */
  .top-left .contact-email{display:flex;align-items:center;gap:6px}
  .top-left .contact-email .text{display:none}
  .top-left .contact-phone .text{display:none}
  .top-left .contact-phone{font-size:14px}
  .top-right{display:flex;gap:8px;align-items:center}
}

/* Hide the header CTA button on mobile; use the mobile menu button instead */
@media(max-width:900px){
  .header-cta .btn-enquiry{display:none !important}
  .btn-enquiry.mobile{display:block}
}

@media(min-width:901px){
  .top-header{display:block}
}

/* Logo sizing */
.brand img, .custom-logo-link img {
  max-height: 98px;
  height: 98px;
  width: auto;
  display: block;
}

/* Ensure the brand area centers its contents vertically */
.brand{display:flex;align-items:center;height:100%}
.logo-flip-inner{display:flex;align-items:center;justify-content:center}
/* Ensure the flip wrapper and logo link fill the header row so centering works reliably */
.logo-flip, .logo-flip-inner, .logo-front, .logo-back, .custom-logo-link {height:100%;display:flex;align-items:center;justify-content:center}
.custom-logo-link img{max-height:inherit;margin:0;display:block}
.logo-front img{margin:0;padding:0}

/* Logo animations: hover flip and optional slow spin */
.site-header .brand, .site-header .custom-logo-link { perspective: 1000px; }
.site-header .brand img, .site-header .custom-logo-link img {
  transition: transform 1s cubic-bezier(.2,.9,.2,1);
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform;
  display:block;
}
/* Hover: perform a full 360° rotation so the logo stays visible (shield-style) */
.site-header .brand:hover img, .site-header .custom-logo-link:hover img {
  transform: rotateY(360deg);
}
/* Optional: add the class `logo-spin` to the logo link (e.g. <a class="custom-logo-link logo-spin">) to enable slow continuous rotation */
.logo-spin img, .custom-logo-link.logo-spin img { animation: aiqraLogoSpin 14s linear infinite; }
@keyframes aiqraLogoSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* When spin is enabled, reduce hover intensity so both effects don't conflict */
.logo-spin:hover img { transform: rotate(0deg); }

/* Flip-card logo: smooth, slow flip showing site title on back */
.logo-flip{display:inline-block;perspective:1200px}
.logo-flip-inner{position:relative;display:inline-block;transition:transform 1.4s cubic-bezier(.2,.9,.2,1);transform-style:preserve-3d}
.logo-flip:hover .logo-flip-inner{transform:rotateY(180deg)}
.logo-front,.logo-back{display:flex;align-items:center;justify-content:center;backface-visibility:hidden}
  .logo-front{position:relative}
  .logo-front img{display:block;max-height:98px;height:auto}
  .logo-back{position:absolute;left:0;top:0;right:0;bottom:0;transform:rotateY(180deg);background:transparent}
.logo-back .site-title-back{display:inline-block;color:var(--primary);font-weight:800;text-decoration:none;padding:8px 12px;border-radius:8px;background:rgba(0,100,50,0.04)}

/* Make sure logo container reserves space so layout doesn't jump */
.brand .logo-flip,.brand .site-title{min-height:56px;display:flex;align-items:center}

@media(max-width:700px){
  .logo-front img{max-height:90px}
  .logo-back .site-title-back{font-size:14px;padding:6px 10px}
}
.brand .logo-flip,.brand .site-title{min-height:72px;display:flex;align-items:center}

/* Fix: ensure flip wrapper controls transforms and reserves space so the logo is always visible.
  Prevent the earlier global hover 360deg rule from conflicting with the flip-card behavior. */
.logo-flip-inner{min-height:110px}
.logo-flip img{backface-visibility:hidden;transform:none !important;transition:transform 1.4s cubic-bezier(.2,.9,.2,1) !important;display:block}
.logo-front{z-index:2}
.logo-back{z-index:1}
/* stronger override to prevent the global .site-header hover rotation affecting the flip-card */
.site-header .brand:hover .logo-flip img{transform:none !important}
.logo-back .site-title-back{pointer-events:none}

/* About page styles: semantic, SEO-friendly, and matching theme look */
.page-about .page-header{margin-bottom:18px}
.page-about .page-header h1{font-size:clamp(26px,4vw,40px);color:var(--primary);margin-bottom:8px;font-weight:700}
.page-about .lede{font-size:1.05rem;color:rgba(0,0,0,0.78);margin-bottom:14px}

.page-about section{margin-bottom:20px}
.page-about section h2{color:var(--primary);font-size:18px;margin-bottom:10px;border-left:4px solid rgba(0,100,50,0.08);padding-left:12px}

.page-about .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
.page-about .grid-3 .card{background:#fff;padding:16px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,0.04);min-height:120px}
.page-about .grid-3 .card h3{margin-top:0;color:var(--primary);font-size:16px}
.page-about .grid-3 .card p{color:rgba(0,0,0,0.78);margin:0}

.page-about .info-list{list-style:disc;margin-left:20px;color:rgba(0,0,0,0.78);line-height:1.6}
.page-about .info-list li{margin-bottom:8px}

.page-about aside.card{background:linear-gradient(180deg,#ffffff,#fbfff9);padding:14px;border-radius:10px;box-shadow:0 10px 28px rgba(3,28,10,0.04);margin-top:12px}
.page-about aside.card h4{margin:0 0 8px 0;color:var(--primary)}
.page-about aside.card p{margin:6px 0;color:rgba(0,0,0,0.78)}

.page-about .btn-primary{margin-top:8px}

@media(max-width:1100px){
  .page-about .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .page-about .grid-3{grid-template-columns:1fr}
  .page-about .page-header h1{font-size:22px}
}

/* Spacing tweaks to improve readability on About page */
.page-about .content{line-height:1.75}
.page-about .content > *{margin-bottom:20px}
.page-about .page-header{margin-bottom:22px}
.page-about .lede{margin-bottom:18px}
.page-about section{padding-top:8px;padding-bottom:8px}
.page-about .grid-3 .card{padding:20px}
.page-about .info-list li{margin-bottom:10px}
.page-about aside.card{margin-top:18px;padding:18px}

@media(max-width:900px){
  .page-about .content > *{margin-bottom:16px}
  .page-about .grid-3{gap:14px}
}

/* Menu colors and animated underline for active/hover */
.primary-nav .menu li a { color: var(--primary); position:relative; padding:10px 8px; display:inline-block; text-decoration:none }
.primary-nav .menu li a::after{ content:''; position:absolute; left:12%; right:12%; bottom:4px; height:4px; background:linear-gradient(90deg,var(--accent),#FFC107); border-radius:4px; transform:scaleX(0); transform-origin:left center; transition:transform .32s cubic-bezier(.2,.9,.2,1),opacity .28s ease; opacity:0 }
.primary-nav .menu li a:hover::after, .primary-nav .menu li.current-menu-item a::after, .primary-nav .menu li a:focus::after{ transform:scaleX(1); opacity:1 }
.primary-nav .menu li a:hover, .primary-nav .menu li.current-menu-item a{ color:#000 }

/* Mobile menu underline support */
.mobile-menu-list li a{ position:relative; padding:10px 6px; display:block }
.mobile-menu-list li a::after{ content:''; position:absolute; left:8%; right:8%; bottom:6px; height:3px; background:var(--accent); border-radius:3px; transform:scaleX(0); transform-origin:left center; transition:transform .28s cubic-bezier(.22,.9,.3,1); opacity:0 }
.mobile-menu-list li a:hover::after, .mobile-menu-list li.current-menu-item a::after, .mobile-menu-list li a:focus::after{ transform:scaleX(1); opacity:1 }

/* Sticky header shadow when scrolled */
.site-header.scrolled{ box-shadow: 0 6px 20px rgba(0,0,0,0.08); }

/* Header layout tweaks */
.site-header .wrap{gap:12px}
.brand{flex:0 0 auto}
.primary-nav{flex:1 1 auto;text-align:right;margin-right:12px}
.primary-nav .menu{justify-content:flex-end}
.header-cta{flex:0 0 auto}

.site-title{font-weight:800;color:var(--primary);font-size:20px}
.site-header-about{font-size:13px;color:rgba(0,0,0,0.6);margin-top:6px}

/* Mobile menu full width */
.mobile-menu{display:none}
.mobile-menu.open{display:block}


/* Prevent accidental horizontal scroll and ensure images scale */
html,body{overflow-x:hidden}
img, svg { max-width:100%; height:auto; display:block }

/* Fluid typography and container scaling */
html{font-size:16px}
h1{font-size:clamp(24px,2.5vw,44px);line-height:1.1}
h2{font-size:clamp(20px,2vw,28px)}
p{font-size:clamp(15px,1.2vw,18px)}

/* Buttons */
.btn-primary, .btn-enquiry{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700}
.btn-primary{background:var(--accent);color:#000}
.btn-enquiry{background:transparent;color:var(--primary);border:2px solid transparent}
.btn-enquiry:hover{background:var(--accent);color:#000}

/* Header responsive spacing */
.site-header .wrap{display:flex;align-items:center;gap:18px;padding:18px 20px}
@media(min-width:1400px){
  .wrap{max-width:1400px;padding:28px}
  .hero{padding:90px 0}
}

/* Primary nav adjustments */
.primary-nav .menu{display:flex;gap:22px;align-items:center}
.primary-nav .menu li a{font-size:clamp(14px,1.2vw,18px);padding:10px 8px}
.primary-nav .menu li a:focus{outline:3px solid rgba(255,215,0,0.25);outline-offset:3px}

.mobile-menu{position:fixed;left:0;right:0;top:56px;background:#fff;z-index:60;padding:16px;border-top:1px solid #eee;display:none}
.mobile-menu.open{display:block}
.mobile-toggle{display:none}
@media(max-width:900px){
  .mobile-toggle{display:block}
  .primary-nav{display:none}
  .site-header .wrap{padding:12px}
}

/* Grid responsiveness */
.grid-3{display:grid;gap:18px;grid-template-columns:repeat(1,1fr)}
@media(min-width:700px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* Footer responsiveness */
.site-footer .wrap{flex-wrap:wrap;gap:12px}
.site-footer .footer-left,.site-footer .footer-right{flex:1 1 300px}

/* Accessibility focus states */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(0,100,50,0.15);outline-offset:3px}

/* Large-screen tweaks for 32" monitors */
@media(min-width:1900px){
  h1{font-size:56px}
  .primary-nav .menu li a{font-size:20px}
  .wrap{max-width:1600px}
}

/* ---------- Visual polish: headings, cards, CTAs, animations ---------- */
/* Section heading style */
.wrap h2{font-family:Fredoka, 'Baloo 2', sans-serif;font-size:clamp(20px,2.2vw,30px);color:var(--primary);margin-bottom:12px;display:inline-block;position:relative}
.wrap h2::after{content:'';display:block;height:6px;width:60%;background:linear-gradient(90deg,var(--accent),#FFC107);border-radius:6px;margin-top:8px;opacity:0.9}
.wrap p.lede{color:rgba(0,0,0,0.72);font-size:1rem;margin-bottom:16px}

/* Card polish */
.card{background:linear-gradient(180deg,#ffffff, #fffdf8);padding:18px;border-radius:14px;box-shadow:0 10px 30px rgba(3,28,10,0.06);transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s ease;border-top:6px solid rgba(255,213,79,0.9)}
.card h3{font-family:Fredoka, 'Baloo 2', sans-serif;margin-bottom:8px;color:var(--primary)}
.card p{color:rgba(0,0,0,0.68)}
.card:hover{transform:translateY(-10px);box-shadow:0 30px 60px rgba(3,28,10,0.09)}

/* Feature specific */
.feature{position:relative;overflow:visible}
.feature h3{position:relative;padding-left:56px}
.feature h3::before{content:'';position:absolute;left:0;top:4px;width:44px;height:44px;border-radius:12px;background-color:#e9f7ed;box-shadow:0 6px 18px rgba(0,0,0,0.06);border:1px solid rgba(0,100,50,0.06)}
.feature p{margin-top:8px}

/* Apply subtle left accent to all feature cards for consistent visual language */
.features .feature{border-left:6px solid rgba(0,100,50,0.12);padding-left:12px}

/* Specific icon for first feature (Child‑Centric & Activity‑Based Learning) */
.features .feature:nth-child(1) h3::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23004d26' d='M12 2a3 3 0 0 0-3 3v1H8a3 3 0 0 0-3 3v4h14V9a3 3 0 0 0-3-3h-1V5a3 3 0 0 0-3-3zM7 20a1 1 0 0 1-1-1v-2h12v2a1 1 0 0 1-1 1H7z'/></svg>");background-size:20px 20px;background-repeat:no-repeat;background-position:center;}
.features .feature:nth-child(1) h3{padding-left:64px}
.features .feature:nth-child(1) h3::after{content:'';position:absolute;left:6px;top:6px;width:24px;height:24px;border-radius:6px;animation:iconBounce 2.2s ease-in-out infinite}
@keyframes iconBounce{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* Modern look for second feature (Strong Academic Foundation) */
.features .feature:nth-child(2){background:#fff;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.features .feature:nth-child(2) h3{position:relative;padding-left:64px}
.features .feature:nth-child(2) h3::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23004632' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 13h-2v-2h2v2zm0-4h-2V6h2v6z'/></svg>");background-size:18px 18px;background-repeat:no-repeat;background-position:center;border-radius:8px}
.features .feature:nth-child(2):hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(3,28,10,0.08)}
.features .feature:nth-child(3) h3::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23004d26' d='M12 2L2 7l10 5 10-5-10-5zm0 7l10 5v6l-10 5-10-5v-6l10-5z'/></svg>");background-size:18px 18px;background-repeat:no-repeat;background-position:center}
.features .feature:nth-child(3) h3{padding-left:64px}
.features .feature:nth-child(4) h3::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='7' r='3' fill='%23004d26'/><path fill='%23004d26' d='M5 20c1-4 5-6 7-6s6 2 7 6H5z'/></svg>");background-size:18px 18px;background-repeat:no-repeat;background-position:center}
.features .feature:nth-child(4) h3{padding-left:64px}

/* Faculty card */
.teacher{background:linear-gradient(90deg,#ffffff,#fbfdfb)}
.teacher .avatar{width:144px;height:144px;border-radius:16px;border:4px solid rgba(255,255,255,0.6);box-shadow:0 8px 20px rgba(0,0,0,0.06)}

/* Gallery hover */
.gallery-grid .gitem{transition:transform .28s ease,box-shadow .28s ease}
.gallery-grid .gitem:hover{transform:scale(1.03);box-shadow:0 18px 40px rgba(0,0,0,0.08)}

/* CTA buttons */
.btn-primary{background:linear-gradient(90deg,#FFD54F,#FFC107);padding:12px 20px;border-radius:18px;color:#000;font-weight:800;letter-spacing:0.3px;box-shadow:0 10px 30px rgba(255,193,7,0.12);transition:transform .18s ease,box-shadow .18s ease}
.btn-primary:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(255,193,7,0.16)}
.btn-enquiry{background:#ffffff;border:2px solid var(--accent);padding:10px 16px;border-radius:14px;color:var(--primary);font-weight:700}

/* subtle reveal animation for cards/features */
@keyframes revealUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.features-grid .feature,.programs-grid .program,.faculty-grid .teacher,.blog-grid .card{animation:revealUp .6s ease both}
.features-grid .feature:nth-child(1){animation-delay:.06s}
.features-grid .feature:nth-child(2){animation-delay:.12s}
.features-grid .feature:nth-child(3){animation-delay:.18s}
.features-grid .feature:nth-child(4){animation-delay:.24s}

/* Accessibility: focus visible for interactive items */
.btn-primary:focus,.btn-enquiry:focus,a:focus{outline:3px solid rgba(255,215,0,0.18);outline-offset:3px}

/* INITIAL HIDDEN STATE for reveal-on-scroll elements */
.features-grid .feature,
.programs-grid .program,
.faculty-grid .teacher,
.blog-grid .card,
.gallery-grid .gitem{
  opacity:0;transform:translateY(12px) scale(0.995);transition:transform .6s cubic-bezier(.2,.9,.2,1),opacity .5s ease;will-change:transform,opacity
}

/* VISIBLE state applied by JS */
.features-grid .feature.visible,
.programs-grid .program.visible,
.faculty-grid .teacher.visible,
.blog-grid .card.visible,
.gallery-grid .gitem.visible{
  opacity:1;transform:none
}

/* Auto-scroll behavior for containers when there are more than 4 items */
.aiqra-scrollable{
  overflow:hidden;position:relative;padding-bottom:6px;
}
.aiqra-scrollable > .aiqra-scroll-inner{display:flex;gap:18px;align-items:stretch}
.aiqra-scrollable > .aiqra-scroll-inner > *{flex:0 0 calc((100% - 54px) / 4);min-width:220px}

/* subtle blink class applied during moves */
.aiqra-scrolling .aiqra-scroll-inner > *{opacity:0.85}

/* Mobile fallback: horizontal swipe instead of autoplay */
@media(max-width:900px){
  .aiqra-scrollable > .aiqra-scroll-inner{display:flex;gap:12px;overflow-x:auto;padding:12px 6px;-webkit-overflow-scrolling:touch}
  .aiqra-scrollable > .aiqra-scroll-inner > *{flex:0 0 76%;min-width:240px}
}

/* Stagger delays via nth-child for smoother entrance */
.features-grid .feature:nth-child(1){transition-delay:0.06s}.features-grid .feature:nth-child(2){transition-delay:0.12s}
.features-grid .feature:nth-child(3){transition-delay:0.18s}.features-grid .feature:nth-child(4){transition-delay:0.24s}
.faculty-grid .teacher:nth-child(1){transition-delay:0.06s}.faculty-grid .teacher:nth-child(2){transition-delay:0.12s}.faculty-grid .teacher:nth-child(3){transition-delay:0.18s}
.programs-grid .program:nth-child(1){transition-delay:0.06s}.programs-grid .program:nth-child(2){transition-delay:0.12s}.programs-grid .program:nth-child(3){transition-delay:0.18s}
.blog-grid .card:nth-child(1){transition-delay:0.06s}.blog-grid .card:nth-child(2){transition-delay:0.12s}.blog-grid .card:nth-child(3){transition-delay:0.18s}.blog-grid .card:nth-child(4){transition-delay:0.24s}

/* Playful floating and micro-interactions */
@keyframes gentleFloat{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.teacher .avatar{animation:gentleFloat 5s ease-in-out infinite;transition:transform .25s ease}
.teacher .avatar:hover{transform:translateY(-6px) scale(1.02)}

/* Small decorative star on section headings */
.wrap h2::before{content:'✦';display:inline-block;margin-right:8px;color:#FFD54F;transform:rotate(-10deg);opacity:0.95}
.wrap h2::before{animation:rotateStar 6s linear infinite}
@keyframes rotateStar{0%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(8deg) translateY(-2px)}100%{transform:rotate(-10deg) translateY(0)}}

/* Unified button hover/focus/active: use primary green for all CTAs */
.btn-primary:hover,
.btn-enquiry:hover,
.btn-primary:focus,
.btn-enquiry:focus,
.btn-primary:active,
.btn-enquiry:active{
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 12px 36px rgba(0,100,50,0.12) !important;
  transform: translateY(-3px);
}

/* Ensure links styled as buttons also receive the same hover color */
a.btn-primary:hover,a.btn-enquiry:hover{background:var(--primary)!important;color:#fff!important}

/* Feature heading icon bounce */
.feature h3::before{animation:bounceDot 1.6s ease-in-out infinite}
@keyframes bounceDot{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}


/* ---------- Consolidated Mobile / Small-screen adjustments ---------- */
@media (max-width:900px){
  /* Hero: stack content and put decorative image below, centered */
  .hero{padding:36px 0}
  .hero-inner{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
  .hero .wrap{padding-left:14px;padding-right:14px}
  .hero-content{order:1}
  .hero-decor{order:2;position:relative;right:auto;bottom:auto;transform:none;align-self:stretch;width:100%;max-width:none;margin:0}

  /* Make the hero left column full width on mobile so content and decor stack naturally */
  .hero-inner > div:first-child{flex:0 0 100%;max-width:100%}
  .hero-decor img{width:100%;height:auto;object-fit:contain}

  /* Reduce header chrome and show mobile toggle */
  .site-header .wrap{padding:12px;align-items:center}
  .brand img{max-height:96px}

  /* Stack grids to single column for readability (faculty becomes single column on mobile) */
  .features-grid,.programs-grid,.blog-grid{grid-template-columns:1fr;gap:14px}
  .faculty-grid{grid-template-columns:1fr;gap:14px}
  .features .feature{padding-left:14px}
  .feature h3{padding-left:52px}
  .feature h3::before{left:0;top:6px;width:40px;height:40px}

  /* Programs and cards spacing */
  .programs .program,.card,.teacher{padding:12px}
  .programs-grid .program{border-left:6px solid rgba(0,100,50,0.08);padding-left:12px}

  /* Reduce gallery thumbnail height on small screens */
  .gallery-grid .gitem{height:170px}

  /* Force gallery to single column on mobile */
  .gallery-grid{grid-template-columns:1fr;gap:12px}

  /* Mobile toggle: ensure vertical centering and consistent size with logo */
  .mobile-toggle{display:flex;align-items:center;justify-content:center;font-size:24px;height:44px;width:44px;border-radius:8px}
  .brand{display:flex;align-items:center}

  /* Ensure scrollable carousels are swipe friendly */
  /* On mobile show stacked column instead of autoplay carousel */
  .aiqra-scrollable > .aiqra-scroll-inner{display:block;padding:0;overflow:visible}
  .aiqra-scrollable > .aiqra-scroll-inner > *{flex:none;width:auto;min-width:0;margin-bottom:14px}

  /* Tighten footer spacing */
  .site-footer{padding:18px 0}
  /* Center footer content on mobile */
  .site-footer{text-align:center}
  .site-footer .footer-grid{display:flex;flex-direction:column;align-items:center}
  .site-footer .footer-menu{display:flex;flex-direction:column;align-items:center}
  .site-footer .footer-contact,.site-footer .footer-brand,.site-footer .footer-nav{margin-bottom:12px;text-align:center}

  /* CTA sizing on small screens */
  .btn-primary,.btn-enquiry{width:auto;padding:10px 14px}

  /* Prevent overlapping reveal animations on very small screens */
  .features-grid .feature,.programs-grid .program{animation:none;opacity:1;transform:none}
  /* Center hero CTAs and remove excessive side gaps */
  .hero-ctas{display:flex;gap:12px;justify-content:center;margin-top:12px}

  /* Admissions: center button on mobile */
  .admissions .btn-primary{display:block;margin:18px auto 0;text-align:center}

  /* Center section headings and their underline + description */
  .wrap h2{display:block;text-align:center;margin-left:auto;margin-right:auto}
  .wrap h2::after{margin-left:auto;margin-right:auto}
  .wrap p.lede{text-align:center;margin-left:auto;margin-right:auto}
}

@media (max-width:480px){
  h1{font-size:28px}
  h2{font-size:20px}
  .hero-decor{max-width:320px;width:92%}
  .feature h3{padding-left:48px}
  .feature h3::before{width:36px;height:36px}
  .brand img{max-height:98px}
}

/* Reinforce left alignment for footer logo variants on large screens */
@media(min-width:901px){
  .site-footer .wrap.footer-grid{justify-items:start}
  .site-footer .footer-brand,
  .site-footer .custom-logo-link,
  .site-footer .custom-logo-link img,
  .site-footer .footer-logo,
  .site-footer .footer-brand img{
    justify-self:start !important;
    align-self:start !important;
    text-align:left !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* Faculty grid: keep 3-column layout on all viewports as requested */
.faculty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.teacher{padding:24px}

/* Mobile: stack faculty/teacher cards into a single column with spacing */
@media(max-width:900px){
  .faculty-grid{grid-template-columns:1fr !important;gap:18px}
  .faculty-grid .teacher{width:100%;display:flex;flex-direction:row;align-items:center;gap:12px;padding:20px;border-radius:10px;background:linear-gradient(180deg,#ffffff,#fbfff9);box-shadow:0 10px 28px rgba(3,28,10,0.04)}
  .faculty-grid .teacher .avatar{flex:0 0 144px;width:144px;height:144px;border-radius:16px;object-fit:cover}
  .faculty-grid .teacher > div{flex:1}
  .faculty-grid .teacher h3{margin:0 0 6px 0}
  .faculty-grid .teacher p{margin:0;color:rgba(0,0,0,0.72)}
}

  /* Off-canvas mobile menu (slide in from right) */
  /* Support both class and id for the mobile menu element. Explicitly reset `left` to avoid left-sided overrides. */
  .mobile-menu,#mobile-menu{position:fixed;top:0;right:-100%;left:auto;height:100vh;width:86%;max-width:380px;background:#fff;z-index:120;padding:20px 18px;box-shadow:-6px 0 40px rgba(0,0,0,0.12);transition:right .28s ease}
  .mobile-menu.open,#mobile-menu.open{right:0;left:auto}
  .mobile-menu-list li{position:relative}
  .mobile-menu-list li a{display:block;padding:12px 14px;font-size:16px;color:#222;position:relative;text-decoration:none}
  /* Wrap menu text in a .menu-text span (added by JS) and show the yellow indicator under that span */
  .mobile-menu-list li a .menu-text{position:relative;display:inline-block}
  .mobile-menu-list li a .menu-text::after{content:'';position:absolute;left:50%;bottom:-8px;width:36px;height:4px;background:var(--accent);border-radius:3px;transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform .28s ease,opacity .22s ease;opacity:0}
  .mobile-menu-list li.current-menu-item a .menu-text::after,
  .mobile-menu-list li a:hover .menu-text::after,
  .mobile-menu-list li a:focus .menu-text::after{transform:translateX(-50%) scaleX(1);opacity:1}
.mobile-menu-list li a:hover::after,.mobile-menu-list li.current-menu-item a::after,.mobile-menu-list li a:focus::after{transform:scaleX(1);opacity:1}

/* Footer logo centering on small screens only */
@media(max-width:900px){
  .site-footer .footer-brand,.site-footer .footer-logo,.site-footer .footer-logo img{margin-left:0;margin-right:auto;display:block}
}