/* ==========================================
   SATYA IMPACT PAGE
========================================== */


/* ==========================================
   SECTION 1 — IMPACT HERO
========================================== */

.impact-hero{

    position:relative;

    min-height:65vh;

    display:flex;

    align-items:center;

    background:
        url("../images/gallery/world-aids-day-2025/World-Aids-Day-Lakhmikanta-College-Bangiriposi--(34).jpg")
        center center / cover
        no-repeat;

    overflow:hidden;

}


.impact-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(7,45,20,.86) 0%,
            rgba(7,45,20,.68) 45%,
            rgba(0,0,0,.18) 100%
        );

}


.impact-hero .container{

    position:relative;

    z-index:2;

    width:100%;

}


.impact-hero-content{

    max-width:720px;

    color:#fff;

}


.impact-hero .section-tag{

    display:inline-block;

    margin-bottom:20px;

    color:#9EE37D;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}


.impact-hero h1{

    font-family:var(--heading-font);

    font-size:64px;

    line-height:1.1;

    margin:0 0 25px;

    color:#fff;

}


.impact-hero p{

    max-width:650px;

    margin:0 0 35px;

    font-size:20px;

    line-height:1.8;

    color:rgba(255,255,255,.90);

}


.impact-hero .breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:15px;

    color:rgba(255,255,255,.75);

}


.impact-hero .breadcrumb a{

    color:#fff;

    transition:.3s ease;

}


.impact-hero .breadcrumb a:hover{

    color:#9EE37D;

}


.impact-hero .breadcrumb span:last-child{

    color:#9EE37D;

}



/* ==========================================
   COMMON SECTION HEADING
========================================== */

.impact-section-heading{

    max-width:760px;

    margin:0 auto 65px;

    text-align:center;

}


.impact-section-heading .section-tag{

    display:inline-block;

    margin-bottom:18px;

    color:var(--primary-green);

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}


.impact-section-heading h2{

    font-family:var(--heading-font);

    font-size:50px;

    line-height:1.2;

    color:var(--dark);

    margin:0 0 22px;

}


.impact-section-heading p{

    font-size:17px;

    line-height:1.8;

    color:var(--text);

    margin:0 auto;

}



/* ==========================================
   SECTION 2 — ABOUT OUR IMPACT
========================================== */

.impact-about{

    padding:120px 0;

    background:var(--white);

    overflow:hidden;

}


.impact-about-grid{

    display:grid;

    grid-template-columns:48% 52%;

    align-items:center;

    gap:80px;

}


.impact-about-image{

    position:relative;

    margin:0;

}


.impact-about-image img{

    width:100%;

    height:560px;

    display:block;

    object-fit:cover;

    border-radius:24px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);

}


.impact-image-badge{

    position:absolute;

    right:-25px;

    bottom:35px;

    width:125px;

    height:125px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary-green);

    color:#fff;

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);

}


.impact-image-badge span{

    font-size:11px;

    letter-spacing:2px;

    font-weight:700;

}


.impact-image-badge strong{

    font-size:18px;

    letter-spacing:1px;

}


.impact-about-content{

    max-width:650px;

}


.impact-about-content .section-tag{

    display:inline-block;

    margin-bottom:18px;

    color:var(--primary-green);

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}


.impact-about-content h2{

    font-family:var(--heading-font);

    font-size:52px;

    line-height:1.18;

    color:var(--dark);

    margin:0 0 30px;

}


.impact-about-content p{

    font-size:17px;

    line-height:1.9;

    color:var(--text);

    margin:0 0 20px;

}


.impact-about-highlight{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:35px;

    padding:20px;

    border-left:4px solid var(--primary-green);

    background:#f4f8f5;

    border-radius:0 12px 12px 0;

}


.impact-highlight-icon{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(11,122,51,.10);

    color:var(--primary-green);

}


.impact-highlight-icon i{

    font-size:21px;

}


.impact-about-highlight h4{

    margin:0 0 5px;

    font-size:17px;

    color:var(--dark);

}


.impact-about-highlight p{

    margin:0;

    font-size:14px;

    line-height:1.6;

}



/* ==========================================
   SECTION 3 — WHY OUR WORK MATTERS
========================================== */

.impact-why{

    padding:120px 0;

    background:#f5f8f6;

}


.impact-why-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}


.impact-why-card{

    position:relative;

    padding:40px 35px;

    background:#fff;

    border:1px solid rgba(11,122,51,.08);

    border-radius:20px;

    overflow:hidden;

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

}


.impact-why-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.09);

}


.why-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    border-radius:16px;

    background:rgba(11,122,51,.09);

    color:var(--primary-green);

}


.why-icon i{

    font-size:27px;

}


.impact-why-card > span{

    position:absolute;

    top:30px;

    right:30px;

    font-size:13px;

    font-weight:700;

    color:rgba(11,122,51,.35);

}


.impact-why-card h3{

    font-family:var(--heading-font);

    font-size:25px;

    color:var(--dark);

    margin:0 0 15px;

}


.impact-why-card p{

    font-size:16px;

    line-height:1.8;

    color:var(--text);

    margin:0;

}



/* ==========================================
   SECTION 4 — AREAS OF IMPACT
========================================== */

.impact-areas{

    padding:120px 0;

    background:var(--white);

}


.impact-areas-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}


.impact-area-card{

    position:relative;

    min-height:310px;

    padding:35px;

    border:1px solid rgba(11,122,51,.12);

    border-radius:22px;

    background:#fff;

    overflow:hidden;

    transition:all .35s ease;

}


.impact-area-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--primary-green);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}


.impact-area-card:hover{

    transform:translateY(-7px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.08);

}


.impact-area-card:hover::before{

    transform:scaleX(1);

}


.impact-area-number{

    position:absolute;

    top:25px;

    right:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    color:rgba(11,122,51,.35);

}


.impact-area-icon{

    width:65px;

    height:65px;

    margin-bottom:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#eef7f0;

    color:var(--primary-green);

}


.impact-area-icon i{

    font-size:27px;

}


.impact-area-card h3{

    font-family:var(--heading-font);

    font-size:25px;

    color:var(--dark);

    margin:0 0 12px;

}


.impact-area-card p{

    font-size:15px;

    line-height:1.8;

    color:var(--text);

    margin:0;

}


.impact-area-arrow{

    position:absolute;

    right:30px;

    bottom:27px;

    color:var(--primary-green);

    opacity:0;

    transform:translateX(-8px);

    transition:all .3s ease;

}


.impact-area-card:hover .impact-area-arrow{

    opacity:1;

    transform:translateX(0);

}



/* ==========================================
   SECTION 5 — IMPACT STORIES
========================================== */

.impact-stories{

    padding:120px 0;

    background:#f5f8f6;

    overflow:hidden;

}


.impact-stories-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:50px;

    margin-bottom:55px;

}


.impact-stories-header .section-tag{

    display:inline-block;

    margin-bottom:18px;

    color:var(--primary-green);

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}


.impact-stories-header h2{

    max-width:650px;

    font-family:var(--heading-font);

    font-size:50px;

    line-height:1.2;

    color:var(--dark);

    margin:0;

}


.impact-stories-header > p{

    max-width:430px;

    margin:0;

    font-size:17px;

    line-height:1.8;

    color:var(--text);

}



/* ==========================================
   STORY SLIDER
========================================== */

.impact-story-slider{

    display:flex;

    gap:25px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

    padding:10px 2px 25px;

}


.impact-story-slider::-webkit-scrollbar{

    display:none;

}



/* ==========================================
   STORY CARD
========================================== */

.impact-story-card{

    flex:0 0 calc(50% - 13px);

    scroll-snap-align:start;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(11,122,51,.08);

    box-shadow:
        0 12px 35px rgba(0,0,0,.05);

}


.impact-story-image{

    position:relative;

    height:300px;

    overflow:hidden;

}


.impact-story-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .5s ease;

}


.impact-story-card:hover
.impact-story-image img{

    transform:scale(1.04);

}


.impact-story-category{

    display:inline-block;

    padding:7px 13px;

    border-radius:30px;

    background:#eaf5ed;

    color:var(--primary-green);

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.impact-story-image
.impact-story-category{

    position:absolute;

    left:25px;

    bottom:20px;

}


/* ==========================================
   STORY CONTENT
========================================== */

.impact-story-content{

    padding:30px;

}


.impact-story-meta{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:15px;

    font-size:12px;

    color:#718078;

}


.impact-story-content h3{

    font-family:var(--heading-font);

    font-size:27px;

    line-height:1.3;

    color:var(--dark);

    margin:0 0 15px;

}


.impact-story-content p{

    font-size:15px;

    line-height:1.8;

    color:var(--text);

    margin:0 0 22px;

}


.impact-story-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary-green);

    font-size:14px;

    font-weight:700;

    text-decoration:none;

}


.impact-story-link i{

    transition:transform .3s ease;

}


.impact-story-link:hover i{

    transform:translateX(5px);

}



/* ==========================================
   PLACEHOLDER STORY
========================================== */

.impact-story-placeholder{

    min-height:520px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:50px;

    border:1px dashed rgba(11,122,51,.20);

    background:rgba(255,255,255,.65);

}


.impact-placeholder-icon{

    width:75px;

    height:75px;

    margin-bottom:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eaf5ed;

    color:var(--primary-green);

}


.impact-placeholder-icon i{

    font-size:28px;

}


.impact-story-placeholder
.impact-story-category{

    margin-bottom:20px;

}


.impact-story-placeholder h3{

    max-width:400px;

}



/* ==========================================
   SLIDER CONTROLS
========================================== */

.impact-slider-controls{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin-top:25px;

}


.impact-slider-btn{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(11,122,51,.15);

    border-radius:50%;

    background:#fff;

    color:var(--primary-green);

    cursor:pointer;

    transition:all .3s ease;

}


.impact-slider-btn:hover{

    background:var(--primary-green);

    color:#fff;

}


.impact-slider-dots{

    display:flex;

    align-items:center;

    gap:7px;

}


.impact-slider-dot{

    width:8px;

    height:8px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#cbd8cf;

    cursor:pointer;

}


.impact-slider-dot.active{

    width:24px;

    border-radius:10px;

    background:var(--primary-green);

}



/* ==========================================
   RESPONSIVE — 1100px
========================================== */

@media(max-width:1100px){

    .impact-about-grid{

        gap:50px;

    }


    .impact-about-content h2{

        font-size:44px;

    }


    .impact-section-heading h2,
    .impact-stories-header h2{

        font-size:44px;

    }


    .impact-areas-grid{

        grid-template-columns:repeat(2,1fr);

    }

}



/* ==========================================
   RESPONSIVE — 992px
========================================== */

@media(max-width:992px){

    .impact-hero{

        min-height:60vh;

    }


    .impact-hero h1{

        font-size:52px;

    }


    .impact-about{

        padding:90px 0;

    }


    .impact-about-grid{

        grid-template-columns:1fr;

    }


    .impact-about-image{

        max-width:700px;

        margin:auto;

    }


    .impact-about-content{

        max-width:100%;

    }


    .impact-why{

        padding:90px 0;

    }


    .impact-why-grid{

        grid-template-columns:1fr;

    }


    .impact-why-card{

        min-height:auto;

    }


    .impact-areas{

        padding:90px 0;

    }


    .impact-stories{

        padding:90px 0;

    }


    .impact-stories-header{

        align-items:flex-start;

        flex-direction:column;

        gap:20px;

    }


    .impact-story-card{

        flex:0 0 70%;

    }

}



/* ==========================================
   RESPONSIVE — 768px
========================================== */

@media(max-width:768px){

    .impact-hero{

        min-height:55vh;

        background-position:65% center;

    }


    .impact-hero-content{

        max-width:100%;

        text-align:center;

        margin:auto;

    }


    .impact-hero h1{

        font-size:40px;

    }


    .impact-hero p{

        font-size:17px;

        line-height:1.7;

    }


    .impact-hero .breadcrumb{

        justify-content:center;

    }


    .impact-about{

        padding:75px 0;

    }


    .impact-about-image img{

        height:400px;

        border-radius:20px;

    }


    .impact-image-badge{

        right:15px;

        bottom:20px;

        width:100px;

        height:100px;

    }


    .impact-image-badge strong{

        font-size:15px;

    }


    .impact-about-content h2{

        font-size:36px;

    }


    .impact-about-content p{

        font-size:16px;

    }


    .impact-section-heading{

        margin-bottom:45px;

    }


    .impact-section-heading h2,
    .impact-stories-header h2{

        font-size:36px;

    }


    .impact-section-heading p{

        font-size:16px;

    }


    .impact-why{

        padding:75px 0;

    }


    .impact-areas{

        padding:75px 0;

    }


    .impact-areas-grid{

        grid-template-columns:1fr;

    }


    .impact-area-card{

        min-height:280px;

    }


    .impact-stories{

        padding:75px 0;

    }


    .impact-stories-header > p{

        font-size:16px;

    }


    .impact-story-card{

        flex:0 0 88%;

    }


    .impact-story-image{

        height:240px;

    }

}



/* ==========================================
   RESPONSIVE — 480px
========================================== */

@media(max-width:480px){

    .impact-hero{

        min-height:60vh;

    }


    .impact-hero h1{

        font-size:34px;

    }


    .impact-hero p{

        font-size:16px;

    }


    .impact-about-image img{

        height:330px;

    }


    .impact-about-content h2{

        font-size:32px;

    }


    .impact-section-heading h2,
    .impact-stories-header h2{

        font-size:31px;

    }


    .impact-about-highlight{

        align-items:flex-start;

    }


    .impact-story-card{

        flex:0 0 94%;

    }


    .impact-story-content{

        padding:24px;

    }


    .impact-story-content h3{

        font-size:23px;

    }

}