/* ===============================
   GLOBAL RESET
================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    overflow-x:hidden;
}

/* ===============================
   HERO SECTION
================================= */

.hero2{
    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.hero2 img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    top:0;
    left:0;
    z-index:-2;
    animation:zoomBg 12s ease-in-out infinite alternate;
}

.hero2::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.65)
    );
    z-index:-1;
}

.hero2-content{
    max-width:1250px;
    position: absolute;
    bottom: 50px;
    text-align: center;
    color:#fff;
    
}

.hero2-content h4{
    font-size:16px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#ffb703;
    margin-bottom:15px;
    animation:fadeUp 1s ease forwards;
}

.hero2-content h1{
    font-size:50px;
    line-height:1.2;
    margin-bottom:25px;
    opacity:0;
    animation:fadeUp 1s ease forwards;
    animation-delay:.3s;
}

.hero2-content p{
    font-size:18px;
    line-height:1.8;
    margin-bottom:35px;
    opacity:0;
    animation:fadeUp 1s ease forwards;
    animation-delay:.6s;
}

/* Buttons */

.hero2-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    opacity:0;
    animation:fadeUp 1s ease forwards;
    animation-delay:.9s;
}

.btn2{
    padding:15px 32px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:0.4s ease;
    display:inline-block;
}

.primary-btn{
    background:#ff7f11;
    color:#fff;
}

.primary-btn:hover{
    transform:translateY(-5px);
    background:#1535a0;
}

.secondary-btn{
    background: white;
    border:2px solid #fff;
    color:#f5f4f4;
}

.secondary-btn:hover{
    background:#fff;
    color:#111;
}

/* ===============================
   OLD AGE WELFARE SECTION
================================= */

.story2-section{
    width:100%;
    padding:100px 8%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
    background:#f8f5f1;
}

/* Content */

.story2-content{
    flex:1;
    max-width:600px;
}

.story2-content .tag2{
    display:inline-block;
    color:#082245;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:20px;
    text-transform:uppercase;
}

/* FIXED */
.story2-content .tag2::before{
    content:'';
    width:50px;
    height:2px;
    background:#ff7f11;
    display:inline-block;
    margin-right:12px;
    vertical-align:middle;
}

.story2-content h2{
    font-size:46px;
    line-height:1.2;
    color:#ff7f11;
    font-weight:700;
    margin-bottom:25px;
}

.story2-content p{
    font-size:17px;
    line-height:1.9;
    color:#666;
    margin-bottom:20px;
}

/* Button */

.story2-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 35px;
    background:#ff7f11;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.4s ease;
}

.story2-btn:hover{
    background:#082245;
    transform:translateY(-5px);
}

/* Image */

.story2-image{
    flex:1;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.story2-image img{
    width:100%;
    max-width:550px;
    height:650px;
    object-fit:cover;
    border-radius:25px;
    z-index:2;
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
    transition:.5s ease;
}

.story2-image:hover img{
    transform:scale(1.03);
}

/* Background Shape */

.image2-bg{
    position:absolute;
    width:90%;
    height:90%;
    background:#ff7f11;
    border-radius:30px;
    right:-20px;
    bottom:-20px;
    z-index:1;
    opacity:.12;
}

/* Animation (ONLY ONCE FIXED) */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes zoomBg{
    from{ transform:scale(1); }
    to{ transform:scale(1.1); }
}
/* ===============================
   TABLET + SMALL LAPTOP
================================= */

@media (max-width: 1024px){

.hero2-content h1{
    padding: 25px;
    font-size:25px;
}

.story2-section{
        gap: 40px;
        padding: 60px 5%;
    }

    .story2-content h2{
        font-size: 32px;
    }


}


/* ===============================
   MOBILE ( FIXED SAFE VERSION)
================================= */

@media (max-width: 768px){


.hero2{
    height:100vh;
    padding:20px;
}
.hero2-content h1{
    padding: 25px;
    font-size:25px;
margin-bottom: -2px;
}

.hero2-content p {
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 2px;
    padding: 15px;
}

   .story2-section{
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 50px 20px;
    }

    .story2-content{
        width: 100%;
    }

    .story2-content h2{
        font-size: 28px;
        line-height: 1.3;
    }

    .story2-content p{
        font-size: 16px;
        line-height: 1.8;
    }

    .story2-image{
        width: 100%;
    }

    .story2-image img{
        width: 100%;
        max-width: 400px;
        height: auto;
    }

    .image2-bg{
        width: 90%;
        height: 90%;
        top: 15px;
        right: 0;
        left: 0;
        margin: auto;
    }}

/* ===============================
   SMALL MOBILE 
================================= */

@media (max-width: 480px){

  .story2-section{
        padding: 40px 15px;
    }

    .tag2{
        font-size: 12px;
    }

    .story2-content h2{
        font-size: 24px;
    }

    .story2-content p{
        font-size: 15px;
        line-height: 1.7;
    }

    .story2-image img{
        max-width: 100%;
        border-radius: 15px;
    }
}

/*=================================
     Vision section
=============================*/
     .vision-section{
    padding:80px 8%;
    background:#fff;
    text-align:center;
}

/* HEADER */
.vision-header h2{
    font-size:48px;
    font-weight:800;
    margin-bottom:20px;
    color:#111;
    animation:fadeDown 1s ease;
}

.vision-header p{
    max-width:900px;
    margin:10px auto;
    color:#555;
    line-height:1.8;
    animation:fadeUp 1s ease;
}

/* ==================================
        VISION SECTION
================================== */

.vision-grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}

.vision-card{
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
}

.vision-card img{
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 20px;
    text-align: center;

    opacity: 0;
    transition: 0.4s ease;
}

/* Desktop hover */
.vision-card:hover .overlay{
    opacity: 1;
}

.vision-card:hover img{
    transform: scale(1.1);
}

/* Mobile touch */
.vision-card:active .overlay{
    opacity: 1;
}

.vision-card:active img{
    transform: scale(1.1);
}

.overlay h3{
    font-size: 24px;
    margin-bottom: 10px;
}

.overlay p{
    font-size: 15px;
    line-height: 1.6;
}

/* ANIMATIONS */
@keyframes fadeDown{
    from{opacity:0; transform:translateY(-30px);}
    to{opacity:1; transform:translateY(0);}
}

@keyframes fadeUp{
    from{opacity:0; transform:translateY(30px);}
    to{opacity:1; transform:translateY(0);}
}

@keyframes reveal{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================
   RESPONSIVE 
========================= */

/* TABLET */
@media(max-width:1024px){
     .vision-grid{
        grid-template-columns: repeat(2,1fr);
    }
}

/* MOBILE RESPONSIVE */
@media(max-width:600px){
   .vision-grid{
        grid-template-columns: 1fr;
        gap: 20px;
    }
}





/**********************
      WHO WE SERVE
**************************/


/* SECTION */

.serve-section{
    max-width:1200px;
    margin:auto;
    padding:120px 20px;
      background:#FBF8F6;
    overflow-x:hidden;
}

.section-header{
    text-align:center;
    max-width:800px;
    margin:auto;
    margin-bottom:70px;
}

.section-tag{
    display:inline-block;
    padding:20px 40px;
    background:#fff;
    color:#FF7A45;
    border-radius:50px;
    font-weight:600;
    margin-bottom:20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

.section-header h2{
    font-size:28px;
    line-height:1.2;
    color:#111827;
    margin-bottom:20px;
}

.section-header p{
    color:#6B7280;
    font-size:18px;
    line-height:1.8;
}

.serve-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.serve-card{
    background:#fff;
    padding:40px 30px;
    border-radius:24px;
    border:1px solid rgba(0,0,0,.06);
    transition:.5s ease;
    position:relative;
    overflow:hidden;
}

.serve-card::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:4px;
    background:#FF7A45;
    transition:1s;
}

.serve-card:hover::before{
    left:0;
}

.serve-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 50px rgba(0,0,0,.08);
}

.icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:rgba(255,122,69,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
}

.icon i{
    font-size:30px;
    color:#FF7A45;
}

.serve-card h3{
    font-size:24px;
    color:#111827;
    margin-bottom:15px;
}

.serve-card p{
    color:#6B7280;
    line-height:1.8;
}

/* LANDING ANIMATION */

.reveal{
    opacity:0;
    transform:translateY(80px);
    transition:
    opacity 1s cubic-bezier(.215,.61,.355,1),
    transform 1s cubic-bezier(.215,.61,.355,1);
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* CARD STAGGER */

.serve-card:nth-child(1){
    transition-delay:.2s;
}

.serve-card:nth-child(2){
    transition-delay:.4s;
}

.serve-card:nth-child(3){
    transition-delay:.6s;
}

/* MOBILE */

@media(max-width:991px){

    .serve-grid{
        grid-template-columns:1fr;
    }

    .section-header h2{
        font-size:34px;
    }
}


/* =========================
  A Holistic Home of Care SECTION
========================= */


.care-section{
    width:100%;
    max-width:1200px;
    margin: auto;
    background: #eaebed00;
    padding:100px 20px;
    text-align:center;
}

.section-header{
    margin-bottom:60px;
    opacity:0;
    transform:translateY(50px) scale(.95);
    transition:all 0.8s ease;

}
.section-header.active{
    opacity:1;
    transform:translateY(0) scale(1);
}
.section-header h2{
    font-size:42px;
    font-weight:700;
    color:#111827;
    margin-bottom:20px;
}

.section-header p{
    max-width:850px;
    margin:auto;
    color:#6b7280;
    line-height:1.8;
    font-size:16px;
}

.care-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    max-width:1000px;
    margin:auto;
}

.care-card{
    background:#fff;
    padding:25px;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:18px;
    box-shadow:0 4px 20px rgba(0,0,0,0.05);
    transition:.4s;
    opacity:0;
    transform:translateY(60px);
    will-change:transform, opacity;
}

.care-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.icon-box{
    width:60px;
    height:60px;
    min-width:60px;
    border-radius:50%;
    background:#FF7A45;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.care-card p{
    font-size:17px;
    font-weight:500;
    color:#222;
    text-align:left;
}
.animate-card{
    opacity:0;
    transform:translateY(60px);
    transition:all 0.7s ease;
}

.animate-card.active{
    opacity:1;
    transform:translateY(0);
}


/* Mobile */

@media(max-width:768px){

    .section-header h2{
        font-size:30px;
    }

    .care-grid{
        grid-template-columns:1fr;
    }

    .care-card{
        padding:20px;
    }

    .care-card p{
        font-size:15px;
    }
}


/*=======================
 Funding Requirements  
 =======================*/
  
 .funding-section {
    max-width: 900px;
    margin: auto;
    padding: 80px 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 15px;
    color:#FF7A45;
}

.section-header p {
    max-width: 700px;
    margin: auto;
    line-height: 1.8;
    color: #6b7280;
}

.funding-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.funding-card,
.support-card {
    border-radius: 24px;
    padding: 30px;
}

.funding-card {
    background: #FFE3D3;
}

.funding-card.green {
    background: #EEFBF4;
}

.support-card {
    background: #FEFBF0;
    border: 2px solid #F3CD53;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.icon-box {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FF7A45;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.card-header h3 {
    margin: 0;
    font-size: 20px;
}

.card-header p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.metrics {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 600;
}

.progress-track {
    height: 24px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    width: 0;
    height: 100%;
    background: #A04060;
    border-radius: 999px;
    transition: width 1.5s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
}

.progress-fill span {
    color: white;
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    transition: opacity .5s;
}

.support-card h3 {
    margin-bottom: 20px;
}

.support-card ul {
    padding-left: 20px;
}

.support-card li {
    margin-bottom: 12px;
    line-height: 1.7;
}

/* Scroll Animation */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all .8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .funding-card,
    .support-card {
        padding: 24px;
    }

    .metrics {
        flex-direction: column;
        gap: 6px;
    }
}



/*=============================
Our Commitment to Transparency
=============================*/


.transparency-section{
  
    margin:0 auto;
   padding-right: 200px;
   padding-left: 200px; 
   padding-bottom: 40px;
    background-color:rgba(243, 240, 235, 0.388);
    overflow:hidden;
}

/* =========================
   HEADER
========================= */

.transparency-header{
    text-align:center;
    margin-bottom:60px;
    opacity:0;
    transform:translateY(50px) scale(0.98);
    transition:all 0.9s cubic-bezier(0.2,0.8,0.2,1);
}

.transparency-header.active{
    opacity:1;
    transform:translateY(0) scale(1);
}

.transparency-header h2{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:700;
    color:#FF7A45;
    margin-bottom:16px;
}

.transparency-header p{
    max-width:800px;
    margin:0 auto;
    color:#6b7280;
    line-height:1.8;
    font-size:16px;
}

/* =========================
   GRID
========================= */

.transparency-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

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

.transparency-card{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid #edf0f2;
    border-radius:24px;
    padding:24px;
    display:flex;
    gap:18px;
    align-items:flex-start;
    box-shadow:0 8px 30px rgba(0,0,0,0.04);
    opacity:0;
    transform:translateY(80px) scale(0.95);
    transition:
        opacity .8s ease,
        transform .8s ease,
        box-shadow .4s ease;
        
}

/* Scroll Reveal Active */
.transparency-card.active{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* Hover Effect */
.transparency-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 20px 50px rgba(0,0,0,0.12),
        0 0 0 1px rgba(255,122,69,0.12);
}


.transparency-card:hover::before{
    left:130%;
}

/* =========================
   ICON
========================= */

.icon-box{
    width:56px;
    height:56px;
    flex-shrink:0;
    border-radius:50%;
    background:#FF7A45;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    transform:scale(0.7);
    transition:all .5s ease;
   
}

.transparency-card.active .icon-box{
    transform:scale(1);
}

.transparency-card:hover .icon-box{
    transform:scale(1.1) rotate(0);
}

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

.card-content h3{
    margin-bottom:8px;
    font-size:1.125rem;
    font-weight:600;
    color:#111827;
}

.card-content p{
    color:#6b7280;
    line-height:1.7;
    font-size:0.95rem;
}

/* =========================
   REVEAL FALLBACK
========================= */

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* =========================
   STAGGER DELAY
========================= */

.transparency-card:nth-child(1){
    transition-delay:.1s;
}

.transparency-card:nth-child(2){
    transition-delay:.2s;
}

.transparency-card:nth-child(3){
    transition-delay:.3s;
}

.transparency-card:nth-child(4){
    transition-delay:.4s;
}

.transparency-card:nth-child(5){
    transition-delay:.5s;
}

.transparency-card:nth-child(6){
    transition-delay:.6s;
}

/* =========================
   FLOATING ICON ANIMATION
========================= */

@keyframes floatIcon{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

    100%{
        transform:translateY(0);
    }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px){

    .transparency-section{
        padding:60px 16px;
    }

    .transparency-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .transparency-card{
        padding:20px;
        border-radius:20px;
    }

    .icon-box{
        width:50px;
        height:50px;
        font-size:20px;
    }

    .transparency-header{
        margin-bottom:40px;
    }

    .transparency-header p{
        font-size:15px;
    }
}



/* ================= RESET ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    overflow-x:hidden;
    background:#f8f8f8;
}

/* ================= HERO SECTION ================= */
.eduhero{
    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 8%;
}

.eduhero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
    animation:zoomBg 12s ease-in-out infinite alternate;
}

.eduhero::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.7));
    z-index:-1;
}

.eduhero-content{
    max-width:550px;
    position: absolute;
    text-align: start;
    right: 40px;
    bottom: 100px;
    color:#fff;
    
}

.eduhero-content h1{
    font-size:50px;
    margin-bottom: 25px;
    line-height: 0;
    animation:fadeUp 1s ease forwards;
}

.eduhero-content p{
    font-size:18px;
    margin:60px 0;
    line-height: 0%;
    animation:fadeUp 1.2s ease forwards;
}



/* =========================
   EDUCATION HERO MOBILE
========================= */
@media (max-width:768px){

    .eduhero{
        height:100vh;
        justify-content:center;
        padding:0 20px;
    }

    .eduhero-content{
        position:relative;
        right:auto;
        bottom: -150px;;
        max-width:100%;
        text-align:center;
        padding:0 10px;
    }

    .eduhero-content h1{
        font-size:36px;
        line-height:1.2;
        margin-bottom:20px;
    }

    .eduhero-content p{
        font-size:16px;
        line-height:1.7;
        margin:25px 0 35px;
    }
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width:480px){

    .eduhero{
        padding:0 15px;
    }

    .eduhero-content h1{
        font-size:28px;
    }

    .eduhero-content p{
        font-size:15px;
        margin:20px 0 30px;
    }
}


/* ================= TOPIC SECTION ================= */
.topic-section{
    padding:100px 20px;
    text-align:center;
    background:#f8fafc;
}

.topic-container{
    max-width:900px;
    margin:auto;
    opacity:0;
    animation:fadeUp2 1s ease forwards;
}

.topic-title{
    font-size:50px;
    color:#ff7a2d;
}
.topic-h3{
    font-size: 30px;
    color: #ff7a2d;
}

@media (max-width:480px){
    .topic-title{
        font-size: 32px;
        color:#ff7a2d;
    }
}
/* ================= SLIDER ================= */
.hero-slider{
    position:relative;
    width:100%;
    height:100svh;
    overflow:hidden;
}

.slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transform:scale(1.1);
    transition:opacity 1s ease, transform 1s ease;
}

.slide.active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}

.slide.active{
    opacity:1;
    transform:scale(1);
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.5);
}

.hero-content{
    position:absolute;
    top:50%;
    left:8%;
    transform:translateY(-50%);
    color:#fff;
    max-width:500px;
}

.hero-content h1{
    font-size:48px;
    margin-bottom:10px; 
    opacity:0;
}

.hero-content p{
    font-size:16px;
    opacity:0;
}

.slide.active .hero-content h1{
    animation:fadeUp .8s ease forwards;
}

.slide.active .hero-content p{
    animation:fadeUp2 1s ease forwards;
    animation-delay:.3s;
}



/* dots */
.dots2{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) scale(1.1);
    display:flex;
    gap:12px;
    z-index:10;
    transition:1s ease;
}
.dots2 span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#aaa;
    cursor:pointer;
    transition:.4s ease;
}

.dots2 span.active{
    background:#ff7a2f;
    transform:scale(1.4);
}

/* ================= ANIMATIONS ================= */
@keyframes fadeUp{
    from{opacity:0; transform:translateY(40px);}
    to{opacity:1; transform:translateY(0);}
}

@keyframes fadeUp2{
    from{opacity:0; transform:translateY(60px);}
    to{opacity:1; transform:translateY(0);}
}

@keyframes zoomBg{
    from{transform:scale(1);}
    to{transform:scale(1.1);}
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
    .hero-slider{
        height: 60vh;
    }
    .eduhero-content h1{font-size:40px;}
    .hero-content h1{font-size:32px;
    text-align: left;
    padding-top: 100px;
     }
    .hero-content p{
        display: none;
    }

}


/* ==========================
HELP SECTION
========================== */

.help-section{
    padding:100px 8%;
    padding-top: 0%;
    background:#f8f6f3;
    overflow:hidden;
}

.help-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

/* LEFT */

.help-content{
    flex:1;               
}


.help-content h2{
    font-size:50px;
    line-height:1.15;
    margin:20px 0;
    color:#ff7a2f;
    font-weight:700;
}

.line{
    width:70px;
    height:4px;
    background:#c77b32;
    margin-bottom:40px;
}

/* CARDS */

.help-card{
    display:flex;
    gap:20px;
    padding:25px 0;
    border-bottom:1px solid #e5e5e5;
    transition:.4s;
}

.help-card:hover{
    transform:translateX(10px);
}

.icon{
    font-size:40px;
    color:#c77b32;
}

.card-content h3{
    color:#ff7a2f;
    margin-bottom:8px;
    font-size:26px;
}

.card-content p{
    color:#333;
    line-height:1.7;
}

/* BUTTON */

.learn-btn{
    display:inline-block;
    margin-top:35px;
    background:#ef8c2f;
    color:#fff;
    text-decoration:none;
    padding:15px 35px;
    border-radius:50px;
    font-weight:600;
    transition:.4s;
}

.learn-btn:hover{
    transform:translateY(-5px);
    background:#d87314;
}

/* RIGHT */
/* ================= HELP IMAGE ================= */

.help-image{
    flex:1;
    display:flex;             
    justify-content:center;   
    align-items:flex-start;    
    padding-top:450px;          
    position:relative;
}

.help-image img{
    width:100%;
    max-width:500px;
    height:600px;
    object-fit:cover;
    display:block;
    border-radius:25px;
    opacity:0;
    transform:scale(1.15);
    animation:imageReveal 1.5s ease forwards;
    transition:transform .8s ease;
}

/* Hover Zoom */
.help-image:hover img{
    transform:scale(1.25);
}

/* Landing Animation */
@keyframes imageReveal{

    0%{
        opacity:0;
        transform:translateY(80px) scale(1.3);
        filter:blur(10px);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1.15);
        filter:blur(0);
    }
}

.quote-box{
    position:absolute;
    left:-50px;
    bottom:-60px;
    width:400px;
    background:#fff;
    padding:35px;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
   line-height: 0px;
}

.quote-box span{
    color:#ff7a2d;
    font-size:50px;
}

.quote-box p{
    margin-top:10px;
    line-height:1.8;
    color:#333;
}

/* FLOAT ANIMATION */

@keyframes float{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
    100%{
        transform:translateY(0);
    }
}

/* LANDING ANIMATION */

.reveal-left,
.reveal-right{
    opacity:0;
    transition:1s;
}

.reveal-left{
    transform:translateX(-100px);
}

.reveal-right{
    transform:translateX(100px);
}

.active{
    opacity:1;
    transform:translateX(0);
}

/* ==========================
TABLET (2 COLUMN)
========================== */

@media (max-width:991px){

    .help-container{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:40px;
        align-items:center;
    }

    .help-content h2{
        font-size:34px;
    }

    .card-content h3{
        font-size:20px;
    }

    .quote-box{
        width:85%;
        left:0;
        bottom:-30px;
        padding:25px;
    }

}

/* ==========================
MOBILE
========================== */

@media (max-width:768px){

    .help-section{
        padding:70px 20px;
    }

    .help-container{
        grid-template-columns:1fr 1fr;
        gap:60px;
    }

    .help-content h2{
        font-size:26px;
        line-height:1.3;
    }

    .help-card{
        flex-direction:column;
        gap:10px;
        padding:15px 0;
    }

    .icon{
        font-size:28px;
    }

    .card-content h3{
        font-size:18px;
    }

    .card-content p{
        font-size:14px;
        line-height:1.6;
    }

    .help-image{
        flex:none;
        width:100%;
        padding-top:60px;
        justify-content:center;
        align-items:center;
    }

    .help-image img{
        width:100%;
        max-width:350px;
        height:450px;
        border-radius:20px;
    }

    .quote-box{
        width:90%;
        max-width:320px;
        left:50%;
        bottom:-40px;
        transform:translateX(-50%);
        padding:20px;
        border-radius:18px;
        line-height: 0px;
    }

    .quote-box span{
        font-size:36px;
    }

    .quote-box p{
        font-size:14px;
        line-height:1.6;
    }

    .help-image:hover img{
        transform:scale(1.05);
    }
}


/* ==========================
SMALL MOBILE
========================== */

@media (max-width:576px){

    .help-container{
        grid-template-columns:1fr;
    }

    .help-content{
        order:2;
    }

    .help-image{
        order:1;
    }

}

/*Dashboard section for SSDP */

/* =========================
        IMPACT SECTION
========================= */

.impact{
    padding:100px 8%;
    background:#f8fbf6;
    text-align:center;
}

.impact-title{
    margin-bottom:60px;
}

.impact-title h2{
    font-size:42px;
    font-weight:700;
    color:#ff7a00;
    margin-bottom:10px;
}

.impact-title p{
    font-size:18px;
    color:#666;
}

.impact-stats-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
    gap:30px;
}

.impact-stat-card{
    background:#fff;
    padding:40px 25px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:all 0.3s ease;
}

.impact-stat-card:hover{
    transform:translateY(-10px);
    box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

.impact-stat-icon{
    font-size:50px;
    color:#ff7a00;
    margin-bottom:20px;
}

.impact-stat-card h3{
    font-size:42px;
    font-weight:700;
    color:#ff7a00;
    margin-bottom:15px;
}

.impact-stat-card p{
    font-size:15px;
    color:#666;
    line-height:1.6;
}

/* Mobile Responsive */
@media(max-width:768px){

    .impact{
        padding:70px 20px;
    }

    .impact-title h2{
        font-size:32px;
    }

    .impact-title p{
        font-size:16px;
    }

    .impact-stat-card{
        padding:30px 20px;
    }

    .impact-stat-card h3{
        font-size:32px;
    }

    .impact-stat-icon{
        font-size:40px;
    }
}

/*===========================
   ALUMNI ASSOCIATION
   ========================*/
.alumni{
    padding:100px 5%;
    background:#f7f7f7;
}

.alumni-header{
    margin-bottom:60px;
}

.alumni-header span{
    color:#0f172a;
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
}

.alumni-header h2{
    font-size:60px;
    margin:15px 0;
    font-family:'Poppins',sans-serif;;
    color:#ff7a00;
}

.alumni-header a{
    text-decoration:none;
    color:#555;
    font-weight:600;
}

.slider-wrapper{
    position:relative;
}
.alumni-slider{
    display:flex;
    gap:30px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    cursor:grab;

    -ms-overflow-style:none;
    scrollbar-width:none;

    padding:20px;
}

.alumni-slider::-webkit-scrollbar{
    display:none;
}

.alumni-slider.active{
    cursor:grabbing;
    cursor:-webkit-grabbing;
}

.alumni-card{
    flex:0 0 320px;
    scroll-snap-align:center;
    background:#fff;
    border-radius:25px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.alumni-card:hover{
    transform:translateY(-10px);
}

.profile{
    width:120px;
    height:120px;
    margin:auto;
    border:4px solid #ff7a00;
    border-radius:50%;
    overflow:hidden;
    margin-bottom:25px;
}

.profile img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.alumni-card h3{
    font-size:34px;
    margin-bottom:10px;
}

.alumni-card h4{
    color:#ff7a00;
    letter-spacing:2px;
    font-size:14px;
    margin-bottom:20px;
}

.alumni-card p{
    color:#555;
    line-height:1.8;
}

.nav-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    border:none;
    background:#fff;
    border-radius:50%;
    box-shadow:0 5px 20px rgba(0,0,0,.2);
    cursor:pointer;
    z-index:10;
}

.prev{
    left:-25px;
}

.next{
    right:-25px;
}

/* TABLET */

@media(max-width:992px){

    .alumni-header h2{
        font-size:48px;
    }

    .alumni-card{
        flex:0 0 280px;
    }
}

/* MOBILE */

@media(max-width:768px){

    .alumni{
        padding:70px 20px;
    }

    .alumni-header{
        text-align:center;
    }

    .alumni-header h2{
        font-size:38px;
    }

    .nav-btn{
        display:none;
    }

    .alumni-slider{
        gap:20px;
        scroll-snap-type:x mandatory;
    }

    .alumni-card{
        flex:0 0 90%;
        scroll-snap-align:center;
        padding:25px;
    }

    .profile{
        width:100px;
        height:100px;
    }

    .alumni-card h3{
        font-size:28px;
    }
}

/* SMALL MOBILE */

@media(max-width:480px){

    .alumni-header h2{
        font-size:32px;
    }

    .alumni-card{
        flex:0 0 95%;
    }
}

/*==============================
A Glimpse of Our Activities
===============================*/


.labs{
    padding:80px 0;
    overflow:hidden;
    background: #f7f7f7;
}

.labs-header{
    width:90%;
    margin:auto;
    margin-bottom:50px;
}

.labs-header span{
    color:#ff7a00;
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
}

.labs-header h2{
    font-size:46px;;
    margin-top:10px;
    font-family:'Poppins',sans-serif;
    font-weight: 700;
    color:#ff7a00;
}

.swipe-text{
    margin-top:25px;
    color:#777;
    font-size:20px;
}

.carousel-wrapper{
    position:relative;
    width:100%;
    overflow:hidden;
}

.carousel-track{
    display:flex;
    align-items:center;
    gap:20px;
    transition:transform .7s ease;
    padding:30px 10%;
}

.card{
    flex:0 0 250px;
    background:#fff;
    border-radius:24px;
    padding:14px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transform:scale(.9);
    opacity:.7;
    transition:.5s;
      transition:
        transform .6s ease,
        opacity .6s ease,
        filter .6s ease,
        box-shadow .6s ease;
}

.card.active{
    transform:scale(1.1);
    opacity:1;
     filter:none;
    z-index:100;
    box-shadow:
        0 25px 50px rgba(0,0,0,.15),
        0 8px 20px rgba(0,0,0,.08);
}

.card img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:18px;
}

.card span{
    display:block;
    margin:15px 0 10px;
    color:#d89b2d;
    font-weight:700;
}

.card h3{
    font-size:16px;
    text-align: center;
    line-height:1.8;
    color:#ff7a00;
}

.dots{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:10px;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#d7d7d7;
    cursor:pointer;
    transition:.3s;
}

.dot.active{
    background:#ff7a00;
    transform:scale(1.3);
}

@media(max-width:768px){
    .labs{
        padding: 0%;
    }
    .labs-header h2{
        font-size:32px;
        
    }

    .carousel-track{
        padding:20px;
        gap:15px;
    }

    .card{
        flex:0 0 220px;
    }

    .card.active{
        transform:scale(1);
    }

    .card h3{
        font-size:15px;
    }
}




/* =========================================
   EDUCATION VIDEO FEATURE
   UNIQUE CLASS NAMES
========================================= */

.learn-video-feature {
    position: relative;
    width: 100%;
    padding: 100px 6%;
    overflow: hidden;
    background: #fffaf5;
}


/* SOFT DECORATIVE BACKGROUND */

.learn-video-feature::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: -160px;
    left: -100px;
    border-radius: 50%;
    background: #ffe6d2;
    opacity: .7;
}


/* MAIN WRAPPER */

.learn-video-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}


/* =========================================
   LEFT CONTENT
========================================= */

.learn-video-copy {
    max-width: 650px;
}


/* LABEL */

.learn-video-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    color: #ff6b2c;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .3px;
}

.learn-video-label i {
    font-size: 24px;
}


/* HEADING */

.learn-video-copy h2 {
    margin: 0;
    color: #101b2d;
    font-family: Georgia, serif;
    font-size: 48px;
    line-height: 1.08;
}

.learn-video-copy h2 span {
    display: block;
    color:#ff6b2c;
}


/* ORANGE LINE */

.learn-video-line {
    width: 100px;
    height: 5px;
    margin: 32px 0;
    border-radius: 20px;
    background:#ff6b2c;
}


/* PARAGRAPHS */

.learn-video-copy > p {
    max-width: 620px;
    margin-bottom: 18px;
    color: #3d3d3d;
    font-size: 18px;
    line-height: 1.65;
}


/* =========================================
   STATS
========================================= */

.learn-video-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 38px;
}


.learn-video-stat {
    position: relative;
    text-align: center;
    padding: 0 16px;
    border-right: 1px solid #ddd;
}

.learn-video-stat:last-child {
    border-right: none;
}


.learn-video-stat i {
    display: block;
    margin-bottom: 15px;
    color: #ff6b2c;
    font-size: 38px;
}


.learn-video-stat strong {
    display: block;
    color: #ff6b2c;
    font-size: 34px;
    font-weight: 700;
}


.learn-video-stat h4 {
    margin: 5px 0 2px;
    color: #222;
    font-size: 15px;
}


.learn-video-stat small {
    color: #333;
    font-size: 13px;
}


/* =========================================
   CTA
========================================= */

.learn-video-action {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 45px;
}


.learn-video-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 20px 28px;

    border-radius: 10px;

    color: #fff;
    background: #ff6b2c;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition: .3s ease;
}


.learn-video-button:hover {
    transform: translateY(-4px);

    background:#ff6b2c;
    box-shadow: 0 12px 25px rgba(237, 117, 17, .25);
}


.learn-video-action p {
    max-width: 280px;
    margin: 0;
    color: #444;
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================
   VIDEO CARD
========================================= */

.learn-video-card {
    position: relative;

    overflow: hidden;

    border-radius: 15px;

    background: #fff;

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

    transition: .4s ease;
}


.learn-video-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 25px 50px rgba(0, 0, 0, .18);
}


/* VIDEO */

.learn-video-player {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #111;
}


.learn-video-player iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: none;
}


/* VIDEO INFO */

.learn-video-info {
    display: flex;
    align-items: center;
    gap: 25px;

    padding: 35px;
}


.learn-video-heart {
    flex-shrink: 0;

    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background:#ff6b2c;

    font-size: 34px;
}


.learn-video-info h3 {
    margin: 0 0 8px;
    color: #111b2e;
    font-family: Georgia, serif;
    font-size: 23px;
}


.learn-video-info p {
    margin: 0;
    color: #555;
    font-size: 16px;
    line-height: 1.6;
}


/* DECORATION */

.learn-video-decoration {
    position: absolute;
    right: 30px;
    bottom: 20px;
    color: #f9d8bd;
    font-size: 80px;
    transform: rotate(-15deg);
    pointer-events: none;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .learn-video-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .learn-video-copy {
        max-width: 800px;
    }
    .learn-video-card {
        max-width: 800px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .learn-video-feature {
        padding: 70px 20px;
    }


    .learn-video-label {
        font-size: 14px;
    }


    .learn-video-copy h2 {
        font-size: 42px;
    }


    .learn-video-copy > p {
        font-size: 16px;
    }


    .learn-video-stats {
        grid-template-columns: repeat(2, 1fr);

        gap: 25px 0;
    }


    .learn-video-stat:nth-child(2) {
        border-right: none;
    }


    .learn-video-action {
        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }


    .learn-video-button {
        width: 100%;

        justify-content: center;
    }


    .learn-video-info {
        align-items: flex-start;

        padding: 25px 20px;

        gap: 15px;
    }


    .learn-video-heart {
        width: 58px;
        height: 58px;

        font-size: 24px;
    }


    .learn-video-info h3 {
        font-size: 19px;
    }


    .learn-video-info p {
        font-size: 14px;
    }


    .learn-video-decoration {
        font-size: 55px;
    }

}