/* =========================================================================
   HOME — PREMIUM THEME
   =========================================================================
   Everything here is scoped to body.home-premium, which only the home page
   sets (resources/views/index.blade.php, @section('body-class')). Nothing in
   this file can reach another page, so the theme can be tried on one page and
   removed by deleting two lines.

   It restyles the markup that is already there rather than replacing it, so
   the carousels, AOS animations and the Bootstrap grid keep working.

   Built on Montserrat, which the site already vendors — no new font is
   fetched, and no request is added beyond this stylesheet.
   ========================================================================= */

body.home-premium {
    /* ---- ink ---- */
    --ink: #16132e;
    --ink-2: #302c51;
    --ink-soft: #5b5676;
    --ink-faint: #8c88a3;

    /* ---- brand ---- */
    --accent: #ff6015;
    --accent-deep: #e04a06;
    --accent-tint: rgba(255, 96, 21, 0.10);

    /* ---- surfaces ---- */
    --surface: #ffffff;
    --surface-tint: #f7f6fb;
    --surface-deep: #14112b;

    --line: rgba(48, 44, 81, 0.10);
    --line-strong: rgba(48, 44, 81, 0.18);

    /* ---- depth ---- */
    --shadow-sm: 0 2px 10px rgba(22, 19, 46, 0.05);
    --shadow-md: 0 14px 34px -10px rgba(22, 19, 46, 0.18);
    --shadow-lg: 0 30px 64px -22px rgba(22, 19, 46, 0.32);

    --radius: 18px;
    --radius-lg: 26px;

    /* A cubic ease-out, not an expo one. Expo leaps and then crawls, which
       reads as abrupt; this starts more evenly and settles without the
       sudden stop. */
    --ease: cubic-bezier(0.33, 1, 0.68, 1);

    background: var(--surface);
    color: var(--ink-soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Long words and tight columns should never push the page sideways. */
body.home-premium main {
    overflow-x: clip;
}


/* =========================================================================
   TYPE
   ========================================================================= */

/* Confined to <main>. The topbar, the navigation and the footer are outside
   it and keep the colours the theme gives them — the footer's background is
   #302c51, so a dark heading colour reaching it made "Certified By", "Quick
   links" and "Contact Us" invisible against it. */
body.home-premium main h1,
body.home-premium main h2,
body.home-premium main h3,
body.home-premium main h4 {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.14;
}

/* Not p.btn. Several pages build a button out of a paragraph —
   <p class="btn btn-lg btn-success">Reform</p> — and a body-text colour
   applied to that repaints its label, which on a saturated button means
   the label stops being readable. Bootstrap's own colour is left alone. */
body.home-premium main p:not([class*="btn"]) {
    line-height: 1.75;
    color: var(--ink-soft);
}


/* =========================================================================
   SECTION HEADINGS
   -------------------------------------------------------------------------
   The markup is <h2> followed by an empty div carrying an inline orange
   border, then a <p>. That rule runs the full width of the column, which is
   what dates the page most — it becomes a short gradient bar instead. The
   inline style has to be beaten with !important; nothing else can.
   ========================================================================= */

body.home-premium .section-title {
    max-width: 760px;
    margin: 0 auto 46px;
    text-align: center;
}

body.home-premium .section-title h2 {
    font-size: clamp(28px, 3.4vw, 44px);
    margin-bottom: 0;
}

body.home-premium .section-title > div[style*="border-bottom"] {
    border-bottom: 0 !important;
    width: 62px;
    height: 4px;
    margin: 20px auto 22px !important;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #ffab74);
}

body.home-premium .section-title p {
    font-size: 16.5px;
    color: var(--ink-soft);
    margin-bottom: 0;
}


/* =========================================================================
   BUTTONS
   ========================================================================= */

body.home-premium .common-btn,
body.home-premium .btn-orange,
body.home-premium .impact-btn,
body.home-premium .blog-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 30px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 10px 26px -10px rgba(255, 96, 21, 0.75);
    overflow: hidden;

    /* Two layers: a light sweep on top of the brand gradient. Both are
       backgrounds rather than a pseudo-element, because a pseudo-element
       covering the face of the button would paint over the label — which is
       exactly what it did. Backgrounds always paint under the text. */
    background-image:
        linear-gradient(120deg, transparent 36%, rgba(255, 255, 255, 0.30) 50%, transparent 64%),
        linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    background-size: 220% 100%, 100% 100%;
    background-position: 160% 0, 0 0;
    background-repeat: no-repeat;

    transition:
        background-position 1.125s var(--ease),
        transform 0.525s var(--ease),
        box-shadow 0.525s var(--ease);
}

body.home-premium .common-btn:hover,
body.home-premium .btn-orange:hover,
body.home-premium .impact-btn:hover,
body.home-premium .blog-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -12px rgba(255, 96, 21, 0.8);
}

body.home-premium .common-btn:hover,
body.home-premium .btn-orange:hover,
body.home-premium .impact-btn:hover,
body.home-premium .blog-btn:hover {
    background-position: -60% 0, 0 0;
}

/* Inside a news card the button sat in a stretching column and filled the
   whole width. It reads better as a compact control under the excerpt. */
body.home-premium .blog-item .blog-btn {
    align-self: flex-start;
    width: auto;
    margin-top: 18px;
    padding: 12px 26px;
    font-size: 14px;
}

body.home-premium .btn-small {
    padding: 11px 24px;
    font-size: 14px;
}


/* =========================================================================
   THE HERO
   -------------------------------------------------------------------------
   The slide's photograph is a background-image on .banner-slider-item. A
   scrim is laid over it so white text stays readable whatever the photo, and
   so the slide has a defined bottom edge rather than fading into the section
   under it.
   ========================================================================= */

body.home-premium .banner-area-two.three {
    position: relative;
    background: var(--surface-deep);
}

body.home-premium .banner-slider-item {
    position: relative;
    background-size: cover;
    background-position: center;
}

/* Only the photographic slides get a scrim; the artwork slide is the image
   itself and must not be darkened. It is the one with inline background:none.

   .page-hero is exempt too. On the home page the headline sits ON the photo and
   needs the scrim behind it; on an interior page the artwork is the whole point
   and the caption sits BELOW it in dark text, so a scrim there only dulls the
   picture and swallows the caption. */
body.home-premium .banner-slider-item:not([style*="background:none"]):not(.page-hero)::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20, 17, 43, 0.86) 0%, rgba(20, 17, 43, 0.55) 45%, rgba(20, 17, 43, 0.15) 100%),
        linear-gradient(0deg, rgba(20, 17, 43, 0.55) 0%, transparent 55%);
    pointer-events: none;
}

body.home-premium .banner-slider-item .d-table {
    position: relative;
    z-index: 2;
}

body.home-premium .banner-content {
    max-width: 680px;
}

body.home-premium .banner-content h1 {
    color: #fff;
    font-size: clamp(32px, 4.6vw, 62px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 20px;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

body.home-premium .banner-content p {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 30px;
}

body.home-premium .banner-btn-area {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/* =========================================================================
   SECTION RHYTHM
   -------------------------------------------------------------------------
   Alternating surfaces give the page a structure it did not have when every
   band was white.
   ========================================================================= */

body.home-premium .work-area {
    padding-top: 88px !important;
    padding-bottom: 78px;
    background: var(--surface-tint);
}

body.home-premium .about-area.two {
    padding-top: 88px;
    padding-bottom: 78px;
    background: var(--surface);
}

body.home-premium .blog-area {
    padding-top: 84px !important;
    padding-bottom: 80px;
    background: var(--surface-tint);
}


/* =========================================================================
   CARDS — "why reform government schools"
   ========================================================================= */

body.home-premium .benefit-item-index {
    position: relative;

    /* The three sit in one row and share its height, so a card with less to
       say was leaving a gap under its text. Centring the content in the card
       spreads that space evenly instead. */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 38px 30px 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}

/* A hairline of brand colour that draws itself in on hover. */
body.home-premium .benefit-item-index::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #ffab74);
    transform: translateX(-50%);
    transition: width 0.675s var(--ease);
}

body.home-premium .benefit-item-index:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

body.home-premium .benefit-item-index:hover::before {
    width: 62%;
}

/* The icon sits in a tinted disc rather than loose on the card. */
body.home-premium .benefit-item-index img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    padding: 13px;
    box-sizing: content-box;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--accent-tint);
}

body.home-premium .benefit-item-index p {
    margin-bottom: 0;
    font-size: 15.5px;
    color: var(--ink-soft);
}


/* =========================================================================
   CARDS — schools, news, galleries
   ========================================================================= */

body.home-premium .blog-item {
    height: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.675s var(--ease), box-shadow 0.675s var(--ease);
}

body.home-premium .blog-item:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-lg);
}

body.home-premium .blog-item .top,
body.home-premium .blog-item .about-img {
    position: relative;
    overflow: hidden;
}

body.home-premium .blog-item img {
    width: 100%;
    display: block;
    transition: transform 1.35s var(--ease);
}

body.home-premium .blog-item:hover img {
    transform: scale(1.06);
}

body.home-premium .blog-item .bottom {
    padding: 26px 26px 28px;
}

body.home-premium .blog-item h3,
body.home-premium .blog-item h4 {
    font-size: 19px;
    line-height: 1.34;
    margin-bottom: 12px;
}

body.home-premium .blog-item h3 a,
body.home-premium .blog-item h4 a {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.375s var(--ease);
}

body.home-premium .blog-item h3 a:hover,
body.home-premium .blog-item h4 a:hover {
    color: var(--accent);
}

body.home-premium .blog-item p {
    font-size: 15px;
    margin-bottom: 0;
}

/* The date line. */
body.home-premium .blog-item .icofont-calendar {
    color: var(--accent);
    margin-right: 6px;
}

body.home-premium .gallery-item {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

body.home-premium .gallery-item img {
    width: 100%;
    display: block;
    transition: transform 1.35s var(--ease);
}

body.home-premium .gallery-item:hover img {
    transform: scale(1.05);
}


/* =========================================================================
   VIDEO PLAY BUTTON
   ========================================================================= */

body.home-premium .video-wrap .js-modal-btn,
body.home-premium .video-wrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--accent);
    font-size: 22px;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45);
    transition: transform 0.525s var(--ease), background 0.525s var(--ease);
}

/* On hover style.css fills the 100px disc behind this button with
   #ff6015 (.js-modal-btn:hover:after) and turns the arrow white
   (.js-modal-btn:hover { color: #fff }). The colour above is on the
   button itself rather than on :hover, which outranks that, so the
   arrow stayed accent orange -- orange on orange, and it vanished
   the moment the pointer arrived. Brightening the button to #fff was
   no answer either: the disc behind is wider than the button, and a
   transform here makes the negative-z pseudo paint over the button's
   own background anyway.

   The button fills with the brand gradient instead and the arrow is
   told to be white, so the control answers the pointer and the arrow
   reads throughout. school-reform.css says the same thing for its own
   page; this covers the other seven that carry a play button. */
body.home-premium .video-wrap .js-modal-btn:hover,
body.home-premium .video-wrap a:hover {
    transform: scale(1.09);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: #fff;
}

body.home-premium .video-wrap .js-modal-btn:hover i,
body.home-premium .video-wrap a:hover i {
    color: #fff;
}


/* =========================================================================
   FAQ / ACCORDION
   ========================================================================= */

/* The list itself is only a container — the theme makes each <li> a panel,
   so that is where the card treatment belongs. Styling the <ul> put every
   item inside one box. */
body.home-premium .faq-area .accordion {
    border: 0;
    background: none;
    box-shadow: none;
    padding-left: 0;
    list-style: none;
}

body.home-premium .faq-area .accordion > li {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 12px;
    transition: box-shadow 0.525s var(--ease), border-color 0.525s var(--ease);
}

body.home-premium .faq-area .accordion > li:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
}

body.home-premium .faq-area .accordion > li > a {
    display: block;
    margin-top: 0;   /* the theme's 10px showed as a strip inside the card */
    padding: 17px 22px;
    color: var(--ink);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
}

/* The theme marks the open panel by putting .active on the link. */
body.home-premium .faq-area .accordion > li > a.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
}

body.home-premium .faq-area .accordion > li > p {
    padding: 18px 22px 22px;
    margin-bottom: 0;
    font-size: 15.5px;
}

/* ----------------------------------------------------------
   A LINK INSIDE AN ANSWER IS A LINK, NOT A ROW
   ----------------------------------------------------------
   style.css styles the question with

       .faq-area .accordion li a { width: 100%; display: block;
                                   font-size: 18px; font-weight: 500 }

   and that is a descendant selector, so it also catches every
   link written inside an answer. Each one became a full-width
   block at 18px, which is why "How can I contact Zindagi
   Trust?" came out as seven lines with a lone "." and a lone
   "/" stranded on their own:

       You can reach out via email at
       info@zindagitrust.org
       or call
       +92 21 34305614
       /
       111-111-439
       . The head office is located at ...

   Put back inline, at the paragraph's own size and weight,
   the sentence runs as a sentence. The address and the two
   numbers then read as links in the theme's accent, going to
   the deeper accent and underlining when pointed at. Scoped
   to a p inside a panel, so the question's own link -- the
   row you click to open it -- keeps the block it needs.
   ---------------------------------------------------------- */
body.home-premium .faq-area .accordion > li > p a {
    display: inline;
    width: auto;

    /* The same rule gives the question row 13px/38px/13px/20px of
       padding, a white fill, a 5px radius and a 10px top margin --
       all of it meant for a row you click. Inline, the padding read
       as a gap before and after every link, which is why a space
       opened up between the last number and the full stop. */
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-radius: 0;

    font-size: inherit;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: color 0.375s var(--ease);
}

body.home-premium .faq-area .accordion > li > p a:hover {
    color: var(--accent-deep);
    text-decoration: underline;
}


/* The FAQ page itself is nothing but answers, read one after another,
   so it is set the way the zindagi-trust site sets them rather than
   the way a stray accordion panel elsewhere is: a full 16px on the
   site's reading grey, with the roomier padding that page uses.
   Measured against it, those were the four values that differed;
   the weight and the measure already matched.

   .faq-page is set beside home-premium in that one Blade file, so
   this reaches the FAQ page and no other accordion on the site. */
body.home-premium.faq-page .faq-area .accordion > li > p {
    padding: 20px 25px;
    font-size: 16px;
    line-height: 1.7;
    color: #757575;
}


/* =========================================================================
   THE POLICY ACCORDION
   -------------------------------------------------------------------------
   Shaping Policy lays its accordion over a photograph, and its open panels
   carry Bootstrap's .text-white. A white card under white text shows nothing
   at all, which is why the text under "Implementation of Teacher Performance
   Evaluation in Sindh" could not be read. These panels are dark glass instead,
   so the white text has something to sit on and the photograph still reads
   through.
   ========================================================================= */

body.home-premium .intro-section .faq-area .accordion > li {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(20, 17, 43, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}

body.home-premium .intro-section .faq-area .accordion > li:hover {
    border-color: rgba(255, 255, 255, 0.38);
}

body.home-premium .intro-section .faq-area .accordion > li > a {
    color: #fff;

    /* style.css gives every closed link background-color:#fff. Left
       alone, that is a white bar under white title text — which is why
       the closed panels showed their icon and nothing else. The panel
       behind it is the surface here. */
    background-color: transparent;
}

body.home-premium .intro-section .faq-area .accordion > li > p,
body.home-premium .intro-section .faq-area .accordion > li > p b {
    color: rgba(255, 255, 255, 0.92);
}

/* Their icon needs to read against the dark panel too. */
body.home-premium .intro-section .faq-area .accordion > li > a i {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* The section heading sits above the photograph on its own white ground and
   stays centred; only the panels below it are a column on the left. */
body.home-premium .intro-section .section-title {
    margin-bottom: 30px;
}


/* =========================================================================
   THE TOP BAR
   -------------------------------------------------------------------------
   Two columns: "Follow Us" with the social icons on one side, the Fundraise
   button on the other. They were sitting on different baselines because each
   list flowed on its own; both are centred on the bar's own middle now.
   ========================================================================= */

body.home-premium .header-area .row {
    align-items: center;
}

body.home-premium .header-area ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    /* No gap of our own. style.css already spaces these with
       margin-right:5px on each li, and a flex gap adds to that margin
       rather than replacing it — 10px here made the social icons sit
       15px apart instead of the 5px they always had. */
    gap: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    min-height: 40px;
}

body.home-premium .header-area .left ul {
    justify-content: flex-end;
}

body.home-premium .header-area li {
    display: inline-flex;
    align-items: center;
}


/* =========================================================================
   CAROUSEL CONTROLS
   ========================================================================= */

body.home-premium .owl-theme .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    margin: 5px;
    border-radius: 999px;
    background: var(--line-strong);
    transition: width 0.525s var(--ease), background 0.525s var(--ease);
}

body.home-premium .owl-theme .owl-dots .owl-dot.active span {
    width: 26px;
    background: var(--accent);
}

body.home-premium .owl-theme .owl-nav [class*="owl-"] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    box-shadow: var(--shadow-md);
    transition: background 0.45s var(--ease), color 0.45s var(--ease);
}

body.home-premium .owl-theme .owl-nav [class*="owl-"]:hover {
    background: var(--accent);
    color: #fff;
}


/* =========================================================================
   SMALL SCREENS
   ========================================================================= */

@media (max-width: 767px) {
    body.home-premium .section-title {
        margin-bottom: 32px;
    }

    body.home-premium .work-area,
    body.home-premium .about-area.two,
    body.home-premium .blog-area {
        padding-top: 56px !important;
        padding-bottom: 50px;
    }

    body.home-premium .benefit-item-index {
        padding: 30px 22px 26px;
    }

    body.home-premium .blog-item .bottom {
        padding: 22px 20px 24px;
    }

    body.home-premium .common-btn,
    body.home-premium .btn-orange {
        padding: 13px 26px;
        font-size: 14px;
    }
}

/* Someone who has asked for less movement gets none of the lifts or sweeps. */
@media (prefers-reduced-motion: reduce) {
    body.home-premium *,
    body.home-premium *::before,
    body.home-premium *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}


/* =========================================================================
   BUTTON LABELS — beating the theme's own colours
   -------------------------------------------------------------------------
   style.css colours these buttons on the assumption they have a flat or
   transparent background, and two of its rules outrank everything above:

     .blog-item .bottom .blog-btn { color: #ff6015 }   three classes, so it
                                                       beat body.home-premium
     .btn-orange:hover { color: #ff6015 !important }   carried !important

   Both painted orange text onto the orange gradient, which left the label
   invisible. These put it back to white, at a weight that wins.
   ========================================================================= */

body.home-premium .blog-item .bottom .blog-btn,
body.home-premium .blog-item .bottom .blog-btn:hover,
body.home-premium .blog-item .bottom .blog-btn:focus {
    color: #fff !important;
}

body.home-premium .btn-orange:hover,
body.home-premium .btn-orange:focus,
body.home-premium .common-btn:hover,
body.home-premium .impact-btn:hover {
    color: #fff !important;
    background-color: transparent !important;   /* the gradient is the background */
}

/* The policy icons are black line drawings, drawn for a white panel. On the
   dark glass they all but disappear, so they are inverted to white — the art
   is transparent PNG line work, so inverting gives clean white strokes. */
body.home-premium .intro-section .faq-area .accordion > li img {
    filter: invert(1) brightness(1.9);
    opacity: 0.92;
}


/* =========================================================================
   THE LIFT
   =========================================================================
   Everything above is the theme as it was settled on. This last block is a
   measured step up in appeal on top of it — nothing structural, nothing
   coloured beyond the brand orange. Deleting this block returns the page to
   exactly the version that was chosen.
   ========================================================================= */

/* ---- headings carry a little more weight ------------------------------- */

body.home-premium .section-title {
    position: relative;
}

body.home-premium .section-title h2 {
    font-size: clamp(30px, 3.8vw, 50px);
    letter-spacing: -0.028em;
}

/* A single faint warm wash behind the heading. Just enough that the band is
   not flat white — at this opacity it reads as light, not as colour. */
body.home-premium .section-title::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 50%;
    width: 560px;
    height: 220px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 96, 21, 0.10), transparent);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}

body.home-premium .section-title h2,
body.home-premium .section-title p,
body.home-premium .section-title > div {
    position: relative;
    z-index: 1;
}

/* The accent bar, a touch wider and warmed at one end. */
body.home-premium .section-title > div[style*="border-bottom"] {
    width: 72px;
    height: 5px;
    background: linear-gradient(90deg, var(--accent), #ffab74);
    box-shadow: 0 5px 14px -5px rgba(255, 96, 21, 0.75);
}


/* ---- photographs sit better in their cards ----------------------------- */

/* A soft scrim where the photograph meets the card. It gives the image an
   edge to end on instead of stopping flat against the white. */
body.home-premium .blog-item .top::after,
body.home-premium .blog-item .about-img::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    /* Light enough to be invisible on a pale image — a document scan was
       picking up a grey haze at 0.22 — while still giving a photograph an
       edge to end on. */
    background: linear-gradient(to top, rgba(22, 19, 46, 0.13), transparent);
    pointer-events: none;
}


/* ---- cards feel a little more alive ------------------------------------ */

body.home-premium .blog-item:hover {
    transform: translateY(-8px);
}

body.home-premium .blog-item:hover img {
    transform: scale(1.06);
}

body.home-premium .benefit-item-index:hover {
    transform: translateY(-7px);
}


/* ---- the content buttons point somewhere ------------------------------- */

/* The buttons are inline-flex with a gap, so this arrow becomes a flex item
   beside the label rather than a layer over it. */
body.home-premium .blog-btn::after,
body.home-premium .impact-btn::after {
    content: "→";
    font-size: 16px;
    line-height: 1;
    transform: translateX(-2px);
    transition: transform 0.525s var(--ease);
}

body.home-premium .blog-btn:hover::after,
body.home-premium .impact-btn:hover::after {
    transform: translateX(2px);
}


/* ---- the hero closes properly ------------------------------------------ */

body.home-premium .banner-content h1 {
    font-size: clamp(34px, 4.9vw, 66px);
}

/* A fade at the very bottom of the slide, so the hero hands over to the
   section under it rather than stopping on a hard line. */
body.home-premium .banner-slider-item:not([style*="background:none"]):not(.page-hero)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(22, 19, 46, 0.55), transparent);
    pointer-events: none;
    z-index: 1;
}


/* ---- small screens ----------------------------------------------------- */

@media (max-width: 767px) {
    body.home-premium .section-title::before {
        width: 320px;
        height: 150px;
        top: -40px;
    }
}


/* ---- fundraise / volunteer -------------------------------------------- */
/* These two were never restyled, so style.css's own dashed borders were still
   showing — green on one, pink on the other — and their icon discs were a
   lavender that appears nowhere else. They are cards like the rest now. */

body.home-premium .benefit-item {
    height: 100%;
    padding: 40px 34px 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}

body.home-premium .benefit-item.two {
    border: 1px solid var(--line);
}

body.home-premium .benefit-item:hover {
    transform: translateY(-7px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

body.home-premium .benefit-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(255, 96, 21, 0.10);
}

body.home-premium .benefit-item i img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

body.home-premium .benefit-item h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

body.home-premium .benefit-item p {
    font-size: 15.5px;
    margin-bottom: 0;
}


/* ---- the accordion's open/close sign ----------------------------------- */
/*
 * style.css pins this sign at top:19px right:20px and reserves room for it
 * with 38px of right padding on the link. The padding set earlier in this file
 * dropped that reservation, so a two-line title — "Banning Corporal Punishment
 * in Pakistan's Capital Islamabad and Sindh" — ran straight under the sign.
 *
 * The room is given back, and the sign is anchored to the link rather than to
 * the panel: at top:50% of the panel it would land in the middle of the body
 * text once the panel is open. position:relative on the link makes it the
 * thing the sign measures against.
 */

body.home-premium .faq-area .accordion > li > a {
    position: relative;
    padding-right: 66px;
}

body.home-premium .faq-area .accordion li a i {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 96, 21, 0.12);
    color: var(--accent);
    font-size: 13px;
    transition: background 0.45s var(--ease), color 0.45s var(--ease), opacity 0.45s var(--ease);
}

/* Open: the sign sits on the orange header, so it inverts. */
body.home-premium .faq-area .accordion li a.active i {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* On the policy panels the ground is dark rather than white. */
body.home-premium .intro-section .faq-area .accordion li a i {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}


/* ---- fundraise / volunteer: buttons on one line ------------------------ */
/*
 * The two cards share a row height, but their copy does not: "Join our
 * community of supporters and fundraise for Zindagi Trust." wraps to two lines
 * where "Be a change-maker by volunteering at Zindagi Trust." takes one. With
 * the content simply stacked, that put one button 27px lower than the other.
 * A column with the button pushed to the bottom lines them up at any width.
 */

body.home-premium .benefit-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

body.home-premium .benefit-item .impact-btn {
    margin-top: auto !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* The card's own text is centred by the theme; keep that, but let the flex
   column own the vertical rhythm. */
body.home-premium .benefit-item {
    text-align: center;
}

body.home-premium .benefit-item i,
body.home-premium .benefit-item h3,
body.home-premium .benefit-item p,
body.home-premium .benefit-item .impact-btn {
    align-self: center;
}


/* ---- fundraise / volunteer hover, matched to the cards above ----------- */
/*
 * The lift and the shadow already matched; what these two were missing was the
 * accent line that draws itself across the top of a "Why Reform" card on
 * hover. Same 3px bar, same gradient, same width and timing, so the two rows
 * behave identically.
 */

body.home-premium .benefit-item {
    position: relative;
}

body.home-premium .benefit-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #ffab74);
    transform: translateX(-50%);
    transition: width 0.675s var(--ease);
}

body.home-premium .benefit-item:hover::before {
    width: 62%;
}


/* =========================================================================
   SCROLL REVEALS
   -------------------------------------------------------------------------
   The page asks AOS for four different entrances at once — slide-right,
   slide-down, zoom-in and fade-up — and AOS's own defaults are large moves:
   100px of travel, or scale(.6). Sections arriving from four directions at
   two different scales is what makes the scrolling feel busy.
   Everything reveals the same way here: a short rise with a fade, on the
   easing used by the rest of the theme. The markup keeps its data-aos
   attributes; only what they look like changes, so removing this block puts
   the original entrances back.
   ========================================================================= */

body.home-premium [data-aos] {
    opacity: 0;
    transform: translate3d(0, 34px, 0) !important;

    /* Promoted to its own compositor layer for the duration of the
       reveal, so the rise is not sharing the main thread with layout.
       Released again on .aos-animate below — leaving it set on 73
       elements would hold the memory for the life of the page. */
    will-change: opacity, transform;

    /* The slide variants animate visibility rather than opacity and would
       otherwise stay hidden through the fade. */
    visibility: visible !important;

    transition-property: opacity, transform !important;
    /* Gentler than the curve the rest of the theme uses. That one is an
       expo ease — it leaps then crawls, which is right for a 200ms hover
       and too abrupt for a reveal. This is a cubic ease-out: it starts
       moving more evenly and settles without the sudden stop. */
    transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1) !important;

    /* Stated outright. Without it each element keeps whatever duration its
       own component rule declared — cards .5s, accordions .4s, the hero
       .75s — so the reveals ran at four different speeds. */
    transition-duration: 1650ms !important;
}

body.home-premium [data-aos].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0) !important;
    will-change: auto;
}

/* A light stagger, so a row of cards arrives as a group rather than all at
   once. AOS writes its own transition-delay inline, so these have to insist. */
body.home-premium [class*="col-"]:nth-of-type(2) [data-aos],
body.home-premium .accordion > li:nth-child(2) {
    transition-delay: 110ms !important;
}

body.home-premium [class*="col-"]:nth-of-type(3) [data-aos],
body.home-premium .accordion > li:nth-child(3) {
    transition-delay: 220ms !important;
}

body.home-premium [class*="col-"]:nth-of-type(4) [data-aos],
body.home-premium .accordion > li:nth-child(4) {
    transition-delay: 330ms !important;
}

body.home-premium .accordion > li:nth-child(5) {
    transition-delay: 440ms !important;
}

/* Nobody who has asked for less movement should get any of this. */
@media (prefers-reduced-motion: reduce) {
    body.home-premium [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition-delay: 0ms !important;
    }
}


/* ---- the banner's prev / next arrows ----------------------------------- */
/*
 * style.css pins these at top:48% with no transform, so 48% positions the
 * arrow's TOP edge and its middle ends up half a button lower — 10px below
 * the centre of the banner. Inside the button the glyph carries a 50px
 * line-height in a 44px box, which drops it another 3px.
 *
 * Anchoring at 50% and pulling back by half the element's own height centres
 * it at any size, and the glyph is centred by the box rather than by a
 * hard-coded line-height.
 */

body.home-premium .banner-area-two .owl-prev,
body.home-premium .banner-area-two .owl-next {
    top: 50%;
    transform: translateY(-50%);

    /* owl.theme.default gives every nav button margin:5px. On an
       absolutely positioned element that margin still offsets it, which
       was the last 5px of the drop. */
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.home-premium .banner-area-two .owl-prev i,
body.home-premium .banner-area-two .owl-next i {
    line-height: 1;
    display: block;
}

/* The theme fades these in on hover by animating every property, which now
   includes the centring transform — it would slide as it appeared. */
body.home-premium .banner-area-two .owl-prev,
body.home-premium .banner-area-two .owl-next {
    transition: opacity 0.525s var(--ease), background-color 0.525s var(--ease);
}

/* ---- the topbar's Fundraise button ------------------------------------- */
/*
 * The button rules above would make this a pill with a gradient face. The
 * topbar is shared with every other page, so it keeps the box and the flat
 * fill it has there. Matches assets/css/site.css — change one, change both.
 */

body.home-premium .header-area .btn-orange {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--accent);
    border-radius: 3.2px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: normal;

    background-image: none;
    background-color: #ff6015;
    box-shadow: 0 6px 14px -6px rgba(255, 96, 21, 0.45);
}

body.home-premium .header-area .btn-orange:hover {
    color: #fff !important;
    background-image: none;
    /* !important: the general hover above clears the colour outright, which
       suits a gradient face and would leave this one empty. */
    background-color: #302c51 !important;
    border-color: #ff6015;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px rgba(255, 96, 21, 0.75);
}


/* =========================================================================
   THE CAREERS BAND
   -------------------------------------------------------------------------
   partials/careers-band is shared by ten pages. Its copy is a .section-title,
   so the two rules this theme puts on .section-title both reach it, and both
   are wrong for it:

     max-width: 760px   "Transform Lives Through Education" is written to the
                        full container measure. At 760px it broke onto a second
                        line.

     margin: 0 auto 46px
                        the shorthand resets the margin-top of -204px that
                        site.css gives .careers-title. That offset is the whole
                        point of the band: the copy is meant to sit above the
                        photograph. Without it the heading, the lead and the
                        Careers button all dropped onto the picture, where dark
                        type on a photograph cannot be read.

   Both are restored to what site.css asks for. Only .careers-title is
   affected, so the 760px measure still applies to every other section title.
   ========================================================================= */

/* The pull is 100px deeper than the -204px site.css asks for, and the band is
   pushed down by the same 100px. The copy therefore sits exactly where it did
   relative to the page, while the artwork moves down beneath it — which is
   what lifts the Careers button off the photograph. Measured: the picture
   begins 135px below the band top, and the button used to end at 200px. */
body.home-premium .section-title.careers-title {
    max-width: none;
    margin-top: -304px;
}

body.home-premium .careers-band {
    margin-top: 100px;
}

@media only screen and (max-width: 767px) {
    body.home-premium .section-title.careers-title {
        margin-top: -180px;
    }
}


/* ---- the phone slider, clear of the menu bar --------------------------- */
/* meanmenu takes the logo bar out of flow (position: absolute, 56px tall)
   and the artwork slide carries an inline margin-top: 50px to clear it --
   six pixels short, so the bar sat on the top edge of the artwork and its
   title. The margin is inline and !important, so the room is added to the
   slider instead; it is the same navy as the bar. */
@media (max-width: 575.98px) {
    body.home-premium .banner-area-two.three.d-sm-none {
        padding-top: 14px;
    }
}


/* =========================================================================
   THE HOME HERO, AT THE PHOTOGRAPH'S OWN BRIGHTNESS
   -------------------------------------------------------------------------
   The eight slide photographs were made for this slider: each already
   carries its own dark fade on the left, where the words go. The scrim
   above (86% navy at the left edge, plus a fade up from the foot) was laid
   on top of that, so the pictures were darkened twice and read as dull. A
   much lighter wash keeps the words legible on the brightest of them and
   lets the rest show as they were shot.

   The paragraph under the heading had gone grey: the theme's "main p" rule
   outranks .banner-content p by one attribute selector, so the hero copy
   took the body-text ink and all but vanished on the photograph.
   ========================================================================= */
body.home-premium .banner-area-two.three .banner-slider-item:not([style*="background:none"]):not(.page-hero)::before {
    opacity: 1;
    background: linear-gradient(90deg, rgba(20, 17, 43, 0.48) 0%, rgba(20, 17, 43, 0.22) 42%, rgba(20, 17, 43, 0) 72%);
}

body.home-premium .banner-area-two.three .banner-slider-item:not([style*="background:none"]):not(.page-hero)::after {
    height: 90px;
    background: linear-gradient(to top, rgba(22, 19, 46, 0.35), transparent);
}

body.home-premium main .banner-area-two.three .banner-content h1 {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 6px 28px rgba(0, 0, 0, 0.45);
}

body.home-premium main .banner-area-two.three .banner-content p {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), 0 4px 18px rgba(0, 0, 0, 0.4);
}

/* The hero's call to action is the one button the whole page is built
   around, so it gets a size up from the theme's standard pill. */
body.home-premium .banner-area-two.three .banner-btn-area .common-btn {
    padding: 14px 34px;
    font-size: 15px;
}

/* On a phone the heading and copy are centred (responsive.css), but the
   button sat on the left edge of its flex row. */
@media (max-width: 767px) {
    body.home-premium .banner-area-two.three .banner-btn-area {
        justify-content: center;
    }

    body.home-premium .banner-area-two.three .banner-slider-item:not([style*="background:none"]):not(.page-hero)::before {
        /* The portrait crops put the subject behind the centred words, so a
           little more weight here than on the desktop, spread evenly. */
        background: linear-gradient(180deg, rgba(20, 17, 43, 0.18) 0%, rgba(20, 17, 43, 0.30) 55%, rgba(20, 17, 43, 0.18) 100%);
    }
}