*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Outfit',sans-serif;
    color:white;
    
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/*==============================
CONTAINER
==============================*/

.container{
    width:92%;
    max-width:1400px;
    margin:auto;
}

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

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;

    background:white;
    backdrop-filter:blur(15px);

}

.header .container{

    height:90px;

    display:flex;
    align-items:center;
    justify-content:space-between;

}

.logo img{

    width:170px;

}

.navbar ul{

    display:flex;
    gap:30px;

}

.navbar a{

    color:black;
    font-size:16px;
    font-weight:500;
    transition:.3s;

}

.navbar a:hover,
.navbar .active{

    color:#5B248A;
    

}

.header-right{

    display:flex;
    align-items:center;
    gap:20px;

}
.header-right :hover{
     background-color: #793bb8;

}

.donate-btn{

    padding:14px 28px;

    background:#5B248A;
    color:white;

    border-radius:50px;

    font-weight:700;

}

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

.hero{

  
    
   
    position:relative;

    width:100%;

    min-height:650px;

    padding-top:150px;

    padding-bottom:80px;

    background:url("bannerimage.png");

     background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    display:flex;
    align-items:center;

}


/* Hero Container */

.hero-container{

    position:relative;
    z-index:2;

    width:92%;
    max-width:1400px;

    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:60px;

}

/* Left */

.hero-content{

    max-width:700px;

}

.hero-content h1{

    font-size:50px;

    line-height:1.1;

    font-weight:800;
    color: black;

}

.hero-content h1 span{

    color:#5B248A;

}

.hero-content p{

    margin-top:30px;

    font-size:20px;

    line-height:1.8;

    max-width:650px;

    color:#222;

}

/* Buttons */

.hero-buttons{

    display:flex;
    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}

.btn-primary{

    padding:18px 35px;

    border-radius:50px;

    background:#5B248A;

    color:white;

    font-weight:700;

}

.btn-secondary{

    padding:18px 35px;

    border:2px solid #111;

    border-radius:50px;

    color:#111;

}

/* Features */

.hero-features{

    display:flex;

    gap:45px;

    margin-top:70px;

    flex-wrap:wrap;

}

.hero-features span {
    color: #111;
}
.feature{

    display:flex;
    align-items:center;
    gap:12px;

}

.feature i{

    color:#5B248A;

    font-size:22px;

}

/* Floating Card */

.impact-card{

    width:310px;

    padding:45px;

    background:white;

    backdrop-filter:blur(20px);

    border-radius:24px;

}

.impact-card h5{

    font-size:40px;

    color:#5B248A;

}

.impact-card p{

    margin-top:10px;

    font-size:22px;

    line-height:1.6;
    color: #111;

}

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

.stats-section{

    width:100%;

    padding:60px 6%;

    background:#f6f6f6;

}

/*====================================
        CONTAINER
====================================*/

.stats-container{

    max-width:1350px;

    margin:auto;
   

    background:#ffffff;

    border-radius:18px;

    

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

   

    box-shadow:0 10px 30px rgba(0,0,0,.08);
     display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    

}
 .stats-container::-webkit-scrollbar{ height: 6px; }
  .stats-container::-webkit-scrollbar-thumb{ background: #cdc4dd; border-radius: 10px; }





/*====================================
        STAT BOX
====================================*/

.stat-box{

    padding:35px 18px;

    text-align:center;

    position:relative;

}

.stat-box:not(:last-child)::after{

    content:"";

    position:absolute;

    top:22%;

    right:0;

    width:1px;

    height:56%;

    background:#e8e8e8;

}

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

.stat-icon{

    font-size:28px;

    color:#6D33C7;

    margin-bottom:12px;

}

/*====================================
        NUMBER
====================================*/

.stat-box h2{

    font-size:38px;

    font-weight:800;

    color:#5B248A;

    margin-bottom:8px;

}

/*====================================
        TEXT
====================================*/

.stat-box p{

    font-size:15px;

    font-weight:500;

    color:#444;

    line-height:1.5;

}

/*====================================
        HOVER
====================================*/

.stat-box{

    transition:.35s;

}

.stat-box:hover{

    background:#faf8ff;

}

.stat-box:hover .stat-icon{

    transform:translateY(-5px);

    transition:.3s;

}


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

.impact-gallery{

    width:100%;
    

    padding:80px 6%;

    background:#ffffff;

}

.impact-container{

    max-width:1400px;

    margin:auto;

    background:#F9F4EC;

    border-radius:24px;

    display:grid;

    grid-template-columns:1.2fr 0.9fr 0.9fr 0.9fr;

    gap:18px;

    padding:22px;

    align-items:center;

    overflow:hidden;

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

}

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

.impact-content{

    padding:20px;

}

.impact-content h2{

    font-size:40px;

    font-weight:800;

    color:#222;

    line-height:1.15;

    margin-bottom:18px;

}

.impact-content h2 span{

    display:block;

    color:#5B248A;

}

.impact-content p{

    font-size:18px;

    color:#555;

    line-height:1.8;

   

}

.impact-content h4{

    color:#7D4CC2;

    font-size:28px;

    font-family:cursive;

    font-weight:600;

}

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

.gallery-card{

    height:320px;
    width: fit-content;

    border-radius:22px;

    overflow:hidden;

    background:#fff;

    border:5px solid #fff;

    transform:skewX(-10deg);

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

    transition:.4s;

}

.gallery-card:hover{

    transform:skewX(-10deg) translateY(-8px);

}

/* ==================================
   VIDEO PLAY BUTTON ON IMAGE
================================== */

.video-card{
    position:relative;
    cursor:pointer;
}

/* Play button */

.image-play-btn{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    width:50px;
    height:50px;

    border-radius:50%;

    background:rgba(91,36,138,0.95);

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

    color:#fff;

    text-decoration:none;

    z-index:5;

    box-shadow:0 8px 25px rgba(0,0,0,0.25);

    transition:all .3s ease;
}

/* Play icon */

.image-play-btn i{
    font-size:20px;
    margin-left:4px;
}

/* Hover */

.image-play-btn:hover{
    transform:translate(-50%, -50%) scale(1.12);

    background:#5B248A;

    box-shadow:0 12px 30px rgba(0,0,0,0.35);
}

/* Slight dark effect over image */

.video-card::after{
    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,0.08);

    pointer-events:none;

    z-index:2;
}

/* Keep play button above overlay */

.video-card .image-play-btn{
    z-index:4;
}



/*==================================
        IMAGE
==================================*/
.gallery-card img{

    width:100%;

    height:100%;

    object-fit:contain;

    background:#fff;

    

}

.gallery-card:hover img{

    transform:skewX(5deg) scale(1.15);

}

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

.impact-video{

    height:330px;

    border-radius:22px;

    background:#E8DCF9;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

}

.play-btn{

    width:74px;

    height:74px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

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

}

.play-btn i{

    color:#6D33C7;

    font-size:24px;

    margin-left:4px;

}

.impact-video h3{

    font-size:22px;

    color:#333;

    line-height:1.5;

    font-weight:700;

}


/*==================================================
            FOUNDER STORY SECTION
==================================================*/

.founder-story{

    width:100%;

    padding:60px 6% ;

    background:#ffffff;

}

.founder-container{

    max-width:1400px;

    margin:auto;

    background:#F5F1FA;

    border-radius:24px;

    padding:35px 45px;

    display:grid;

    grid-template-columns:320px 1fr 320px;

    gap:45px;

    align-items:center;

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

}

/*==================================================
                FOUNDER IMAGE
==================================================*/

.founder-image{

    display:flex;

    justify-content:center;

    align-items:flex-end;

}

.founder-image img{

    width:100%;

    max-width:290px;

    object-fit:contain;

    transition:.4s;

}

.founder-image img:hover{

    transform:scale(1.03);

}

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

.founder-content{

    padding-right:25px;

}

.section-tag{

    display:inline-block;

    color:#7A3FD4;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

   

}

.founder-content h2{

    font-size:40px;

    font-weight:800;

    line-height:1.15;

    color:#222;

    margin-bottom:25px;

}

.founder-content h2 span{

    display:block;

    color:#5B248A;

}

.founder-content p{

    font-size:17px;

    line-height:1.9;

    color:#555;

    

}

/*==================================================
                BUTTON
==================================================*/

.founder-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:12px;

    padding:15px 26px;

    background:#ffffff;

    color:#5B248A;

    border-radius:12px;

    font-size:16px;

    font-weight:700;

    border:2px solid #E7DDF9;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.founder-btn:hover{

    background:#5B248A;

    color:#fff;

    transform:translateY(-3px);

}

.founder-btn i{

    transition:.3s;

}

.founder-btn:hover i{

    transform:translateX(5px);

}

/*==================================================
            ACHIEVEMENTS
==================================================*/

.founder-achievements{

    border-left:2px solid #E6DBF5;

    padding-left:35px;

}

.achievement{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:28px;

}

.achievement:last-child{

    margin-bottom:0;

}

/*==================================================
                ICONS
==================================================*/

.achievement-icon{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    color:#fff;

    flex-shrink:0;

}

.pink{

    background:#F45BA8;

}

.purple{

    background:#8B5CF6;

}

.red{

    background:#EF4444;

}

.orange{

    background:#F59E0B;

}

.violet{

    background:#6D33C7;

}

/*==================================================
            ACHIEVEMENT TEXT
==================================================*/

.achievement h6{

    font-size:16px;

    color:#333;

    margin-bottom:4px;

    font-weight:700;

}

.achievement small{

    color:#666;

    font-size:14px;

}

/*==================================================
                HOVER
==================================================*/

.achievement{

    transition:.35s;

}

.achievement:hover{

    transform:translateX(8px);

}

.achievement:hover .achievement-icon{

    transform:rotate(10deg);

    transition:.35s;

}

/*==================================================
            CORE FOCUS AREAS
==================================================*/

.focus-section{

    width:100%;

    padding:80px 6%;

    background:#ffffff;

}

/*==================================================
                HEADING
==================================================*/

.focus-heading{

    text-align:center;

    margin-bottom:55px;

}

.focus-heading span{

    display:block;

    font-size:16px;

    font-weight:700;

    color:#555;

    margin-bottom:10px;

}

.focus-heading h2{

    font-size:44px;

    font-weight:800;

    color:#222;

}

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

.focus-container{

    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:22px;

}

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

.focus-card{

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:18px;

    padding:35px 22px;

    text-align:center;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.focus-card:hover{

    transform:translateY(-8px);

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

}

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

.focus-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 20px;

    color:#fff;

    font-size:28px;

}

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

.education{

    background:#6D33C7;

}

.employment{

    background:#F59E0B;

}

.entrepreneurship{

    background:#06B6D4;

}

.health{

    background:#EC4899;

}

.assistive{

    background:#2563EB;

}

/*==================================================
                TITLE
==================================================*/

.focus-card h6{

    font-size:24px;

    color:#222;

    font-weight:700;

    margin-bottom:15px;

}

/*==================================================
            DESCRIPTION
==================================================*/

.focus-card p{

    font-size:16px;

    color:#666;

    line-height:1.8;

}

/*==================================================
                BUTTON
==================================================*/

.focus-button{

    text-align:center;

    margin-top:45px;

}

.focus-button a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:#5B248A;

    color:#fff;

    padding:16px 34px;

    border-radius:10px;

    font-size:16px;

    font-weight:700;

    transition:.35s;

    box-shadow:0 12px 25px rgba(91,36,138,.30);

}

.focus-button a:hover{

    background:#461C72;

    transform:translateY(-4px);

}

.focus-button a i{

    transition:.35s;

}

.focus-button a:hover i{

    transform:translateX(5px);

}

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

.impact-section{
    position:relative;
    width:100%;
    background:url("images/impact-bg.jpg") center center/cover no-repeat;
    overflow:hidden;
}

/* Purple Overlay */

.impact-overlay{
    background:rgba(49,18,94,.90);
    padding:35px 5%;
}

/* Heading */

.impact-title{
    text-align:center;
    color:#fff;
    font-size:34px;
    font-weight:700;
    margin-bottom:35px;
    letter-spacing:.5px;
}

/* Grid */

.impact-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap: 18px;
    align-items:start;
}

/* Card */
/* Icon */

.impact-item{
    text-align:center;
    color:#fff;
}
/* =================================
   FOLLOW US - SOCIAL ICON COLORS
================================= */
.impact-item i{
    width:65px;
    height:65px;

    border-radius:50%;

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

    font-size:32px;

    color:#fff !important;

    transition:0.3s ease;
}

/* Facebook */
.impact-item:nth-child(1) i{
    background:#1877F2;
}

/* Instagram */
.impact-item:nth-child(2) i{
   background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* LinkedIn */
.impact-item:nth-child(3) i{
    background:#0A66C2;
}

/* YouTube */
.impact-item:nth-child(4) i{
    background:#FF0000;
}

.impact-item:hover i{
    transform:translateY(-5px) scale(1.08);
}


/*==========================
PARTNERS
==========================*/

.partners-section{

    padding:60px 0;
    background:#fff;

}

.partners-title{

    text-align:center;
    font-size:34px;
    font-weight:700;
    margin-bottom:35px;
    color: #111;

}

.partners-wrapper{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;

}

/* Buttons */

.partner-btn{

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    background:#5A189A;
    color:#fff;

    cursor:pointer;

    flex-shrink:0;

    transition:.3s;

}

.partner-btn:hover{

    background:#7b2cbf;

}

.partner-btn i{

    font-size:20px;

}

/* Track */

.partners-track{

    display:flex;
    overflow:hidden;
    width:1100px;

    scroll-behavior:smooth;

}

/* Card */

.partner-item{

    min-width:180px;
    height:100px;

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

    border-right:1px solid #ddd;

    flex-shrink:0;

}

.partner-item:last-child{

    border-right:none;

}

.partner-item img{

    max-width:120px;
    max-height:55px;
    object-fit:contain;

    transition:.3s;

}

.partner-item img:hover{

    transform:scale(1.08);

}
/*====================================
    INCLUSION MOVEMENT
====================================*/

.movement-section{

    background:url("images/movement-bg.jpg") center center/cover no-repeat;

    position:relative;

    overflow:hidden;

}

.movement-overlay{

    background:rgba(56,18,96,.92);

    padding:45px 0;

}

.movement-container{

    width:92%;

    max-width:1350px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

}

/* Left */

.movement-content{

    width:35%;

}

.movement-content h2{

    color:#ffffff;

    font-size:48px;

    line-height:1.2;

    font-weight:700;

    margin-bottom:18px;

}

.movement-content span{

    color:#F5B623;

}

.movement-content p{

    color:#f5f5f5;

    font-size:17px;

    line-height:1.8;

    max-width:420px;

}

/* Right */

.movement-cards{

    width:65%;

    display:flex;

    justify-content:flex-end;

    gap:20px;

}

/* Card */

.movement-card{

    width:120px;

    height:120px;

    background:#fff;

    border-radius:25px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    transition:.35s;

    cursor:pointer;

}

.movement-card:hover{

    transform:translateY(-8px);

}

/* Icons */

.movement-card i{

    font-size:34px;

    margin-bottom:14px;

}

/* Different Icon Colors */

.movement-card:nth-child(1) i{

    color:#7B2CBF;

}

.movement-card:nth-child(2) i{

    color:#ff4d7d;

}

.movement-card:nth-child(3) i{

    color:#3578e5;

}

.movement-card:nth-child(4) i{

    color:#5fbf3d;

}

.movement-card:nth-child(5) i{

    color:#f5a623;

}

.movement-card h4{

    font-size:15px;

    color:#333;

    font-weight:600;

}
/*==================================
            FOOTER
==================================*/

.footer{

    background:#fff;

    color:black;

    padding-top:45px;

    font-family:'Poppins',sans-serif;

}

.footer-container{

    width:92%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:2fr 0.8fr 0.8fr 1.4fr 0.8fr;

    gap:30px;

}

/* Logo */

.footer-logo img{

    width:300px;
    height: 250px;
    

    margin-bottom:10px;

}

.footer-logo p{

    color:black;

    font-size:14px;
    font-weight: 600;
    margin-left: 70px;

}

/* Heading */

.footer-col h4{

    font-size:18px;
   

    margin-bottom:13px;
    

    color:#35115f;
    margin-top: 32px;

}

/* Links */

.footer-col ul{

    list-style:none;

    padding:0;
    margin: 20px;
    
    

}

.footer-col ul li{

    margin-bottom:10px;

    font-size:14px;
   
    

}

.footer-col ul li a{

    color:black;

    text-decoration:none;

    transition:.3s;
    font-weight: 700;

}

.footer-col ul li a:hover{

    color:#35115f;

    padding-left:2px;
    transform:translateY(-1px);

}

/* Contact */

.contact-list li{

    display:flex;

    gap:10px;

    align-items:flex-start;

    color:black;
    font-weight: 700;

}

.contact-list i{

    color:black;

    margin-top:3px;

}

/* =================================
   FOOTER SOCIAL ICONS
================================= */

.social-icons{
    display:flex;
    gap:12px;
    margin:20px;
}

.social-icons a{
    width:40px;
    height:40px;

    border:1px solid #ddd;
    border-radius:50%;

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

    text-decoration:none;

    background:#fff;

    transition:.3s;
}

/* Facebook */
.social-icons a:nth-child(1){
    background:#1877F2;
    color:#fff;
    border-color:#1877F2;
}

.social-icons a:nth-child(2){
    background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color:#fff;
    border-color:#E4405F;
}

.social-icons a:nth-child(3){
    background:#0A66C2;
    color:#fff;
    border-color:#0A66C2;
}

.social-icons a:nth-child(4){
    background:#FF0000;
    color:#fff;
    border-color:#FF0000;
}

/* Hover */
.social-icons a:hover{
    transform:translateY(-5px);
   
}

/* Bottom */

.footer-bottom{

    margin-top:8px;

    border-top:1px solid rgba(255,255,255,.15);

    padding:18px 4%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:13px;

    color:black;

}

.footer-bottom span{

    color:#ff4d6d;

}





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

@media(max-width:768px){

    /* Keep mobile similar to desktop */
    html,body {
        overflow-x: hidden;
    }

    .header .container{

        height:80px;

    }

    
    /* Hide Nav */

    .navbar{

        display:none;

    }

    .header-right{

        gap:10px;

    }

    .search-btn{

        display:none;

    }

    .donate-btn{

        padding:12px 18px;

        font-size:14px;

    }

    .hero{

        padding-top:130px;
         padding-bottom: 50px;
       

        min-height:auto;

        background-position:center top;
         background-size: 100% auto;

        background-size:cover;

    }

    /* Keep horizontal like desktop */

    .hero-container{

        flex-direction:row;

        align-items:center;

        gap:10px;

    }

    .hero-content{

        width:65%;

    }

    .impact-card{

        width:35%;

        padding:20px;

    }

    .hero-content h1{

        font-size:36px;

        line-height:1.2;

    }

    .hero-content p{

        font-size:15px;

        margin-top:20px;

    }

    .hero-buttons{

        gap:10px;

        margin-top:25px;

    }

    .btn-primary,
    .btn-secondary{

        padding:12px 18px;

        font-size:13px;

    }

    .hero-features{

        gap:15px;

        margin-top:25px;

    }

    .feature{

        font-size:13px;

    }

    .impact-card h5{

        font-size:25px;

    }

    .impact-card p{

        font-size:14px;

    }

     .stats-section{
        padding:25px 15px;
        overflow-x:auto;
    }

    .stats-container{

        display:flex;

        flex-wrap:nowrap;

        overflow-x:auto;

        overflow-y:hidden;

        white-space:nowrap;

        border-radius:12px;

        -webkit-overflow-scrolling:touch;

       
    }

    

    .impact-gallery{
        padding:40px 18px;
    }

    .impact-container{

        display:grid;

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

        grid-template-areas:

        "content content content"
        "img1 img2 img3"
        "video video video";

        gap:15px;

        padding:18px;

        align-items:stretch;

    }

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

    .impact-content{
        grid-area:content;
        text-align:center;
        padding:10px;
    }

    .gallery-card:nth-child(2){
        grid-area:img1;
    }

    .gallery-card:nth-child(3){
        grid-area:img2;
    }

    .gallery-card:nth-child(4){
        grid-area:img3;
    }

    .impact-video{
        grid-area:video;
    }

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

    .impact-content h2{

        font-size:30px;

        line-height:1.25;

        margin-bottom:15px;

    }

    .impact-content p{

        font-size:15px;

        line-height:1.7;

        margin-bottom:15px;

    }

    .impact-content h4{

        font-size:22px;

    }

    /*=========================
        IMAGE CARDS
    =========================*/

    .gallery-card{

        width:100%;

        height:170px;

        transform:none;

        border-radius:14px;

        border:3px solid #fff;

    }

    .gallery-card:hover{

        transform:translateY(-4px);

    }

    .gallery-card img{

        width:100%;

        height:100%;

        object-fit:cover;

        transform:none;

        margin-left:0;

    }

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

    .impact-video{

        width:100%;

        height:180px;

        border-radius:16px;

    }

    .play-btn{

        width:55px;

        height:55px;

        margin-bottom:15px;

    }

    .play-btn i{

        font-size:18px;

    }

    .impact-video h3{

        font-size:18px;

        line-height:1.4;

    }


    .founder-story{

    padding:25px 10px;

}

.founder-container{

    display:grid;

    grid-template-columns:1fr;

    gap:25px;

    padding:20px;

    text-align:center;

}

.founder-image{

    order:1;

}

.founder-image img{

    max-width:220px;

}

.founder-content{

    order:2;

     padding-top:13px;
}

.founder-content h2{

    font-size:32px;

}

.founder-content p{

    font-size:15px;

    line-height:1.7;

}

.founder-btn{

    margin:auto;

}

.founder-achievements{

    order:3;

    border-left:none;

    border-top:2px solid #E6DBF5;

    padding-left:0;

    padding-top:13px;
    color: #333;

}

.achievement{

    justify-content:flex-start;

    text-align:left;

}

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



    .focus-section{
        padding:45px 20px;
    }

    /*=========================
            HEADING
    =========================*/

    .focus-heading{
        margin-bottom:35px;
    }

    .focus-heading span{
        font-size:15px;
    }

    .focus-heading h2{
        font-size:30px;
        line-height:1.3;
    }

    /*=========================
            CONTAINER
    =========================*/

    .focus-container{

        display:grid;

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

        gap:12px;

    }

    /*=========================
            CARDS
    =========================*/

    .focus-card{

        padding:18px 10px;

        border-radius:14px;

    }

    /* First Row */

    .focus-card:nth-child(1){
        grid-column:1 / span 2;
    }

    .focus-card:nth-child(2){
        grid-column:3 / span 2;
    }

    .focus-card:nth-child(3){
        grid-column:5 / span 2;
    }

    /* Second Row */

    .focus-card:nth-child(4){
        grid-column:2 / span 2;
    }

    .focus-card:nth-child(5){
        grid-column:4 / span 2;
    }

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

    .focus-icon{

        width:48px;

        height:48px;

        font-size:20px;

        margin-bottom:12px;

    }

    /*=========================
            TEXT
    =========================*/

    .focus-card h6{

        font-size:9px;

        line-height:1.3;

        margin-bottom:8px;

    }

    .focus-card p{

        font-size:12px;

        line-height:1.5;

    }

    /*=========================
            BUTTON
    =========================*/

    .focus-button{

        margin-top:30px;

    }

    .focus-button a{

        padding:14px 24px;

        font-size:14px;

    }

/*==============================
 Responsive
==============================*/


.impact-overlay{
    padding:25px 15px;
}

.impact-title{
    font-size:28px;
    margin-bottom:25px;
}

.impact-grid{
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.impact-item h6{
    font-size:23px;
}

.impact-icon{
    font-size:25px;
}

.impact-item p{
    font-size:13px;
}

/*==========================
Responsive
==========================*/

.partners-track{

    width:100%;

}

.partner-item{

    min-width:140px;
    height:80px;

}

.partner-item img{

    max-width:90px;

}

.partner-btn{

    width:36px;
    height:36px;

}

/*====================================
 Responsive
====================================*/

.movement-container{

    flex-direction:column;

    text-align:center;

    gap:35px;

}

.movement-content{

    width:100%;

}

.movement-content h2{

    font-size:34px;

}

.movement-content p{

    margin:auto;

    font-size:15px;

}

.movement-cards{

    width:95%;

    display:grid;

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

    gap:12px;

    justify-items:center;
   

}

.movement-card{

    width:90px;

    height:100px;

}

.movement-card i{

    font-size:28px;

}

nav{
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#0f172a;
    flex-direction:column;
    display:none;
    padding:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
}

/*=============================
Responsive
=============================*/


  .footer{
        width:100%;
        max-width:100%;
        padding:35px 0 0;
        margin:0;
        overflow:hidden;
    }

   .footer-container{
        width:100%;
        max-width:100%;
        grid-template-columns:1fr !important;
        gap:2px;
        padding:0 15px;
    }

    .footer-logo{
        grid-column:auto !important;
        width:100%;
    }

    .social{
        grid-column:auto !important;
        width:100%;
    }


    /* ===============================
       CONTACT LIST
    =============================== */

    .contact-list{
        width:100%;
        margin:0 !important;
        padding:0 !important;
    }

    .contact-list li{
        width:100%;
        display:grid;
        grid-template-columns:22px minmax(0,1fr);

        gap:8px;

        align-items:start;
        justify-content:initial;

        margin-bottom:15px;

        text-align:left;
    }


    /* ICON */

    .contact-list li > i{
        width:22px;
        min-width:22px;

        margin-top:3px;

        text-align:center;
    }


    /* ADDRESS TEXT */

    .contact-list .contact-text{
        width:100%;
        max-width:none;

        min-width:0;

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

        line-height:1.4;

        text-align:left;

        /* Don't break normal words */
        word-break:normal;

        /* Only break very long strings when necessary */
        overflow-wrap:break-word;
    }


    /* PHONE / EMAIL / WEBSITE */

    .contact-list li a{
        width:100%;
        max-width:none;

        min-width:0;

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

        line-height:1.4;

        color:#000;

        text-align:left;

        word-break:normal;

        /* Allows long email/website to fit */
        overflow-wrap:anywhere;
    }


    /* SOCIAL */

    .social{
        width:100%;
        max-width:100%;
    }

    .social-icons{
        display:flex;

        justify-content:center;
        align-items:center;

        gap:12px;

        width:100%;

        margin:0;
        padding:0;
    }


    /* BOTTOM */

    .footer-bottom{
        width:100%;
        max-width:100%;

        margin-top:20px;

        padding:15px 10px;

        display:flex;

        justify-content:center;
        align-items:center;

        text-align:center;

        box-sizing:border-box;

        overflow:hidden;
    }

    .footer-bottom p{
        max-width:100%;

        margin:0;

        font-size:12px;

        text-align:center;

        overflow-wrap:anywhere;
    }
}

@media (max-width:992px){
.footer-container{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-logo{
        grid-column:span 2;
    }

    .social{
        grid-column:span 2;
    }

}
/* =========================
   HIDE CHECKBOX
========================= */

#menu-toggle {
    display: none;
}


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

.menu-icon {
    display: none;
}


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

@media (max-width: 768px) {

    .logo img{

        width:140px;
        margin-left: 40px;

    }


    .menu-icon {
        display: block;
        position: absolute;
       margin: 10px;
        top: 10px;
        font-size: 32px;
        color: black;
        cursor: pointer;
        z-index: 1001;
    }

    /* Hide navbar initially */
    .navbar {
        display: none;
    }

    /* Show navbar when checkbox is checked */
    #menu-toggle:checked ~ .container .navbar {
        display: block;
    }

    /* Mobile navbar */
    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        z-index: 1000;
    }

    .navbar ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 1px 0;
        margin: 0;
    }

    .navbar ul li {
        width: 100%;
        height: 1px;
        text-align: center;
        cursor: pointer;
    }

    .navbar ul li a {
        display: block;
        padding: 1px 4px;
        color: black;
    }
    .navbar ul-hover {
        background-color:#6d4094;

}
}