/* ==========================================================================
   Frontend overrides — tighten global section spacing.
   Loaded after style.min.css in app/Views/common/head_assets.php.
   Base theme uses !important on these rules, so overrides must too.
   ========================================================================== */

/* Standard section gap (top + bottom) — was 130 / 60 / 40 */
.edu-section-gap        { padding: 60px 0 !important; }
.edu-section-gapTop     { padding-top: 60px !important; }
.edu-section-gapBottom  { padding-bottom: 60px !important; }

/* Course carousel band with dots — was 130 0 205 */
.edu-section-gap.slider-dots { padding: 60px 0 110px !important; }

/* Tablet (768–991) — base theme was 60 / 80 / 120 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .edu-section-gap        { padding: 40px 0 !important; }
    .edu-section-gapTop     { padding-top: 40px !important; }
    .edu-section-gapBottom  { padding-bottom: 40px !important; }
    .edu-section-gap.slider-dots { padding: 40px 0 90px !important; }
}

/* Mobile (≤767) — base theme was 40 / 80 / 100 */
@media only screen and (max-width: 767px) {
    .edu-section-gap        { padding: 32px 0 !important; }
    .edu-section-gapTop     { padding-top: 32px !important; }
    .edu-section-gapBottom  { padding-bottom: 32px !important; }
    .edu-section-gap.slider-dots { padding: 32px 0 80px !important; }
}

/* Mobile hero: close the large empty gap between the header and the hero image.
   The mobile header is ~80px, but .wrapper reserves 120px top padding (meant for
   a taller header) plus the row's mt-5 (30px) and the image column's
   responsive-top-space (20px), pushing the image to ~170px. Bring it to ~100px. */
@media only screen and (max-width: 767px) {
    .banner-style-5 .wrapper { padding-top: 60px !important; }
    .banner-style-5 .row { margin-top: 0 !important; }
    .banner-style-5 .order-1.responsive-top-space { margin-top: 0 !important; }
}

/* Mobile: trim remaining oversized INTERNAL padding not covered by the
   section-gap overrides above (these are inline styles, so !important is
   required to win over them). Scoped to phones only. */
@media only screen and (max-width: 767px) {
    /* Hero: the empty band below the CTA buttons before the next section. */
    .banner-style-5 { padding-bottom: 40px !important; }            /* was 150px inline */
    .banner-style-5 .inner.mb-5 { margin-bottom: 16px !important; } /* was 48px */

    /* Rich Life Mastery workshop section — inline 90px/100px. */
    .edu-workshop-area.workshop-style-1 { padding: 40px 0 !important; }

    /* Service / Panchshakti section trailing padding. */
    .edu-service-area.rich-life-ecosystem { padding-bottom: 40px !important; }

    /* About section "24/7 Strong Online Support" badge — 130px is too big on
       phones; shrink it (theme only repositions it on mobile, never resizes). */
    .about-style-6 .about-image-gallery .badge-icon {
        width: 88px !important;
        height: 88px !important;
    }
}

/* Success-story & YouTube-video sliders: these aren't wrapped in
   .edu-slick-button, so their dots fall back to raw slick.css and render as tiny
   broken 'slick'-font glyphs. Style them as proper circular dots to match the
   theme's other sliders. */
.shorts-slick-slider .slick-dots,
.videos-slick-slider .slick-dots {
    position: relative;
    bottom: auto;
    margin-top: 28px;
    padding: 0;
    line-height: 0;
    text-align: center;
}
.shorts-slick-slider .slick-dots li,
.videos-slick-slider .slick-dots li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0 4px;
}
.shorts-slick-slider .slick-dots li button,
.videos-slick-slider .slick-dots li button {
    width: 11px;
    height: 11px;
    padding: 0;
    border-radius: 50%;
    background: rgba(82, 95, 225, 0.4);
    transition: 0.3s;
}
.shorts-slick-slider .slick-dots li button::before,
.videos-slick-slider .slick-dots li button::before {
    display: none !important; /* remove the broken glyph */
}
.shorts-slick-slider .slick-dots li.slick-active button,
.videos-slick-slider .slick-dots li.slick-active button {
    background: var(--color-primary);
    transform: scale(1.2);
}

/* Hero header overlap (desktop): the hero content is taller than the viewport,
   so the wrapper's align-items:center pushes the top of the content (the
   "Transform Your Mind" pill) up under the transparent header. Top-align it so
   the content flows down from below the header. */
@media only screen and (min-width: 992px) {
    .banner-style-5 .wrapper {
        align-items: flex-start !important;
        height: auto !important; /* theme sets a fixed 860px that's shorter than
                                    this hero's content, so it overflowed into the
                                    next section — grow to contain it instead */
    }
}
/* On wide screens the header is the tall 118px variant; add top clearance so the
   pill sits just below it (the 992–1199 range keeps its own 120px wrapper padding
   + shorter 80px header). */
@media only screen and (min-width: 1200px) {
    .banner-style-5 .wrapper { padding-top: 60px !important; }
}

/* Hero achievement stats bar: the four items are wider than the hero's half
   column, so the last one ("100K+ Lives Transformed") overflowed past the white
   card. ≥1200: trim item padding so the single row fits; 992–1199: fall back to a
   2×2 grid (the theme already does this ≤991, but the column is too narrow for one
   row up to 1199 too). */
@media only screen and (min-width: 1200px) {
    .achievement-item { padding: 10px 10px !important; }
    .achievement-icon { margin-right: 8px !important; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .achievement-pill { flex-wrap: wrap !important; width: 100% !important; }
    .achievement-item { width: 50% !important; }
    .achievement-item:nth-child(1),
    .achievement-item:nth-child(3) { border-right: 1px solid #eaeaea !important; }
    .achievement-item:nth-child(2),
    .achievement-item:nth-child(4) { border-right: none !important; }
    .achievement-item:nth-child(1),
    .achievement-item:nth-child(2) { border-bottom: 1px solid #eaeaea !important; }
    .achievement-item:nth-child(3),
    .achievement-item:nth-child(4) { border-bottom: none !important; }
}

/* Footer top padding — was 130 / 80 / 80 (matches the tightened sections) */
.footer-style-default .footer-top { padding: 60px 0 !important; }

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer-style-default .footer-top { padding: 40px 0 !important; }
}
@media only screen and (max-width: 767px) {
    .footer-style-default .footer-top { padding: 40px 0 !important; }
}