/*=========================================
GOOGLE FONT
=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

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

body{

background:#ffffff;
color:#222;
overflow-x:hidden;
line-height:1.6;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1250px;
margin:auto;
padding:0 20px;
}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:99999;
padding:18px 0;
transition:.4s;

}

header.sticky{

background:#ffffff;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}

header .container{

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

}

/*=========================================
LOGO
=========================================*/
.logo {
    margin-left: -20px;
    display: flex;
    align-items: center;
}
.logo img{
    height:auto;         
    width:46px;
    display:block;
    object-fit: contain;
    transition:.4s;
    animation:floatLogo 4s ease-in-out infinite;
}

/*=========================================
NAVIGATION
=========================================*/

nav ul{

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

}

nav ul li a{

color:#f0e10c;
font-size:16px;
font-weight:600;
transition:.3s;

}

header.sticky nav ul li a{

color:#222;

}

nav ul li a:hover{

color:#FFC107;

}

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

.donate-btn{

background:#FF3B1F;
color:#ffffff!important;
padding:14px 30px;
border-radius:40px;
transition:.4s;

}

.donate-btn:hover{

background:#0D5BD7;
transform:translateY(-3px);

}

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

.hero{

position:relative;

width:100%;
height:100vh;

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

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

overflow:hidden;

}

/*=========================================
OVERLAY
=========================================*/

.overlay{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(

rgba(8,28,52,.70),
rgba(8,28,52,.60)

);

}

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

.hero-content{

position:relative;
z-index:5;
max-width:850px;
color:white;
padding:20px;

}

.hero-content h4{

font-size:25px;
font-weight:500;
color:#FFC107;
margin-bottom:15px;
letter-spacing:2px;

animation:fadeDown 1s;

}

.hero-content h1{

font-size:72px;
line-height:85px;
font-weight:800;
margin-bottom:25px;

animation:fadeUp 1.2s;

}

.hero-content p{

font-size:20px;
line-height:36px;
margin-bottom:45px;

animation:fadeUp 1.5s;

}

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

.hero-buttons{

display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;

}

.hero-buttons a{

padding:18px 38px;
border-radius:50px;
font-weight:600;
transition:.4s;

}

.btn1{

background:#FF3B1F;
color:#ffffff;

}

.btn1:hover{

background:#0D5BD7;
transform:translateY(-6px);

}

.btn2{

border:2px solid white;
color:white;

}

.btn2:hover{

background:white;
color:#0D5BD7;

}

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

.scroll{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

color:white;

font-size:35px;

animation:bounce 2s infinite;

z-index:10;

}

/*=========================================
ANIMATIONS
=========================================*/

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(70px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

@keyframes fadeDown{

0%{

opacity:0;
transform:translateY(-70px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

@keyframes bounce{

0%,100%{

transform:translate(-50%,0);

}

50%{

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

}

}

@keyframes floatLogo{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

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

@media(max-width:991px){

.hero-content h1{

font-size:48px;
line-height:60px;

}

.hero-content p{

font-size:18px;
line-height:30px;

}

nav{
display:none;

}

.logo img{

height:55px;

}

.hero{

padding:0 20px;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:36px;
line-height:45px;

}

.hero-content h4{

font-size:18px;

}

.hero-buttons{

flex-direction:column;
align-items:center;

}

.hero-buttons a{

width:220px;
text-align:center;

}

}
/*=========================================
SECTION TITLE
=========================================*/

.section-title{
text-align:center;
margin-bottom:70px;
}

.section-title h2{
font-size:45px;
font-weight:700;
color:#0D5BD7;
margin-bottom:15px;
position:relative;
display:inline-block;
}

.section-title h2::after{
content:"";
position:absolute;
left:50%;
bottom:-12px;
transform:translateX(-50%);
width:80px;
height:4px;
background:#FF3B1F;
border-radius:10px;
}

.section-title p{
max-width:700px;
margin:auto;
font-size:18px;
color:#666;
line-height:30px;
margin-top:20px;
}

/*=========================================
ABOUT
=========================================*/

.about{
padding:110px 0;
background:#ffffff;
}

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

.about-image img{
border-radius:20px;
box-shadow:0 25px 60px rgba(0,0,0,.12);
transition:.5s;
}

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

.about-text span{
color:#FF3B1F;
font-weight:600;
font-size:18px;
letter-spacing:1px;
}

.about-text h2{
font-size:48px;
margin:20px 0;
color:#0D5BD7;
line-height:60px;
}

.about-text p{
font-size:17px;
line-height:32px;
color:#555;
margin-bottom:20px;
}

.about-btn{
display:inline-block;
margin-top:20px;
padding:16px 34px;
background:#0D5BD7;
color:#fff;
border-radius:50px;
font-weight:600;
transition:.4s;
}

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

/*=========================================
MISSION
=========================================*/

.mission{
padding:110px 0;
background:#F8FAFC;
}

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

.card{
background:#fff;
padding:45px 35px;
text-align:center;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.4s;
}

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

.card i{
font-size:55px;
color:#FF3B1F;
margin-bottom:25px;
}

.card h3{
font-size:28px;
margin-bottom:18px;
color:#0D5BD7;
}

.card p{
color:#666;
line-height:30px;
}

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

.impact{
padding:110px 0;
background:linear-gradient(135deg,#0D5BD7,#1E40AF);
color:#fff;
}

.impact .section-title h2{
color:#fff;
}

.impact .section-title p{
color:#eee;
}

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

.impact-box{
background:rgba(255,255,255,.12);
backdrop-filter:blur(10px);
padding:40px;
border-radius:20px;
text-align:center;
transition:.4s;
}

.impact-box:hover{
transform:translateY(-10px);
background:rgba(255,255,255,.20);
}

.impact-box h2{
font-size:52px;
color:#FFC107;
margin-bottom:10px;
}

.impact-box h4{
font-size:20px;
font-weight:500;
}

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

@media(max-width:992px){

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

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

.impact-grid{
grid-template-columns:repeat(2,1fr);
}

.about-text{
text-align:center;
}

}

@media(max-width:768px){

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

.about-text h2{
font-size:34px;
line-height:45px;
}

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

}
/*=========================================
PROGRAMS
=========================================*/

.programs{
padding:120px 0;
background:#ffffff;
}

.program-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;

}

.program-card{

background:#fff;

border-radius:20px;

overflow:hidden;

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

transition:.4s;

}

.program-card:hover{

transform:translateY(-15px);

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

}

.program-card img{

width:100%;
height:260px;
object-fit:contain;
transition:.6s;

}

.program-card:hover img{

transform:scale(1.08);

}

.program-content{

padding:30px;

}

.program-content h3{

font-size:28px;

color:#0D5BD7;

margin-bottom:15px;

}

.program-content p{

color:#666;

line-height:30px;

margin-bottom:20px;

}

.program-content a{

display:inline-block;

padding:12px 26px;

background:#FF3B1F;

color:#fff;

border-radius:40px;

font-weight:600;

transition:.4s;

}

.program-content a:hover{

background:#0D5BD7;

}

/*=========================================
GALLERY
=========================================*/

.gallery{
    padding:100px 0;
    background:#f8f9fa;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:50px;
}

.gallery-grid img{
    width:100%;
    height:220px;
    object-fit:contain;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    transition:.4s;
}

.gallery-grid img:hover{
    transform:scale(1.05);
}

@media(max-width:480px){
.gallery-grid{
grid-template-columns:repeat(2,1fr);
}
}
/*=========================================
HOME BUTTON
=========================================*/

.home-button-container{
    text-align:center;
    margin:60px 0;
}

.home-btn{
    display:inline-block;
    padding:15px 35px;
    background:#0066cc;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-size:18px;
    font-weight:600;
    transition:.3s;
}

.home-btn:hover{
    background:#004a99;
    transform:translateY(-3px);
}

@media(max-width:768px){
.gallery-grid{
grid-template-columns:1fr;
}
}
/*=========================================
CTA
=========================================*/

.cta{

position:relative;

padding:140px 20px;

background:url("images/hero.jpg") center/cover;

text-align:center;

overflow:hidden;

}

.cta .overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(8,28,52,.82);

}

.cta-content{

position:relative;

z-index:10;

max-width:850px;

margin:auto;

color:white;

}

.cta-content h2{

font-size:55px;

margin-bottom:25px;

font-weight:700;

}

.cta-content p{

font-size:20px;

line-height:35px;

margin-bottom:45px;

color:#f1f1f1;

}

.cta .hero-buttons{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.cta .hero-buttons a{

padding:18px 40px;

border-radius:50px;

font-weight:600;

transition:.4s;

background:#FF3B1F;

color:white;

}

.cta .hero-buttons a:last-child{

background:transparent;

border:2px solid white;

}

.cta .hero-buttons a:hover{

background:#0D5BD7;

transform:translateY(-5px);

}

.cta .hero-buttons a:last-child:hover{

background:white;

color:#0D5BD7;

}

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

@media(max-width:992px){

.program-grid{

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

}

.gallery-grid{

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

}

.cta-content h2{

font-size:42px;

}

}

@media(max-width:768px){

.program-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.cta-content h2{

font-size:34px;

}

.cta-content p{

font-size:17px;

line-height:30px;

}

}
/*=========================================
CONTACT SECTION
=========================================*/

.contact{
    padding:120px 0;
    background:#ffffff;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
}

.contact-info{
    background:#0D5BD7;
    color:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.contact-info h3{
    font-size:30px;
    margin-bottom:25px;
}

.contact-info p{
    font-size:16px;
    margin-bottom:20px;
    line-height:28px;
}

.contact form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact input,
.contact textarea{

    width:100%;
    padding:18px 22px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:16px;
    outline:none;
    transition:.3s;

}

.contact textarea{

    height:180px;
    resize:none;

}

.contact input:focus,
.contact textarea:focus{

    border-color:#0D5BD7;
    box-shadow:0 0 10px rgba(13,91,215,.15);

}

.contact button{

    background:#FF3B1F;
    color:#fff;
    border:none;
    padding:18px;
    border-radius:50px;
    font-size:18px;
    cursor:pointer;
    transition:.4s;

}

.contact button:hover{

    background:#0D5BD7;
    transform:translateY(-4px);

}
 /*================ FOOTER STYLES =================*/
        footer {
            background: var(--primary-bg);
            padding: 80px 0 30px;
            color: var(--text-main);
            position: relative;
            overflow: hidden;
        }

        /* Subtle background decoration */
        footer::before {
            content: '';
            position: absolute;
            top: -50px;
            left: -50px;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
            pointer-events: none;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 25px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
            gap: 40px;
            margin-bottom: 60px;
        }

        .footer-col h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-col h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 30px;
            height: 2px;
            background: var(--accent-color);
        }

        .footer-col p {
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: var(--text-muted);
            text-decoration: none;
            transition: 0.3s;
            display: inline-block;
        }

        .footer-links a:hover {
            color: var(--accent-color);
            transform: translateX(5px);
        }

        /* Social Icons Styling */
        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .social-icons a {
            width: 45px;
            height: 45px;
            background: var(--glass-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text-main);
            font-size: 20px;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .social-icons a:hover {
            background: var(--accent-color);
            border-color: var(--accent-color);
            color: #fff;
            transform: translateY(-8px) scale(1.1);
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
        }

        /* Specific brand colors on hover (Optional) */
        .social-icons a.facebook:hover { background: #1877f2; border-color: #1877f2; }
        .social-icons a.twitter:hover { background: #1da1f2; border-color: #1da1f2; }
        .social-icons a.instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: transparent; }
        .social-icons a.linkedin:hover { background: #0077b5; border-color: #0077b5; }

        /* Newsletter Section */
        .newsletter-form {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .newsletter-form input {
            flex: 1;
            padding: 12px 15px;
            background: var(--glass-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: #fff;
            outline: none;
            transition: 0.3s;
        }

        .newsletter-form input:focus {
            border-color: var(--accent-color);
        }

        .newsletter-form button {
            padding: 12px 20px;
            background: var(--accent-color);
            border: none;
            border-radius: 8px;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s;
        }

        .newsletter-form button:hover {
            background: var(--accent-hover);
            transform: translateY(-2px);
        }

        /* Footer Bottom */
        .footer-bottom {
            border-top: 1px solid var(--border-color);
            padding-top: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .footer-bottom p {
            color: var(--text-muted);
            font-size: 14px;
        }

        .footer-bottom-links {
            display: flex;
            gap: 25px;
        }

        .footer-bottom-links a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 14px;
            transition: 0.3s;
        }

        .footer-bottom-links a:hover {
            color: var(--text-main);
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 600px) {
            .footer-grid {
                grid-template-columns: 1fr;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }
        
  <style>
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
        }
/* Footer Grid Layout */
.footer-grid {
    display: flex;
    justify-content: space-around;
    background-color: #f8f9fa;
    padding: 40px 20px;
    flex-wrap: wrap;
}

.footer-col {
    flex: 1;
    min-width: 220px;
    margin: 20px;
}

.footer-col h3 {
    color: #111827;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

/* Quick Links */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    text-decoration: none;
    color: #64748b;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #111827;
}

/* Social Media Icons */
.footer-social a {
    font-size: 2rem; /* Bigger icons */
    margin-right: 15px;
    color: #0047FF;
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer-social a:hover {
    transform: scale(1.2);
    color: #002DB3;
}

/* Donation Section */
.footer-col img {
    display: block;
    margin: 10px 0;
    border: 2px solid #0047FF;
    border-radius: 8px;
    width: 120px;
}

/* Newsletter Form */
.newsletter-form input {
    padding: 10px;
    width: 70%;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

.newsletter-form button {
    padding: 10px 15px;
    background-color: #0047FF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.newsletter-form button:hover {
    background-color: #002DB3;
}


/*=========================================
SCROLLBAR
=========================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F2F2F2;

}

::-webkit-scrollbar-thumb{

    background:#0D5BD7;
    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#FF3B1F;

}

/*=========================================
SECTION SPACING
=========================================*/

section{

    overflow:hidden;

}

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

@media(max-width:992px){

.contact-wrapper{

grid-template-columns:1fr;

}

.footer-logo{

flex-direction:column;

}

}

@media(max-width:768px){

.contact-info{

padding:35px;

}

.contact-info h3{

font-size:28px;

}

.contact button{

font-size:16px;

}

.footer-logo h2{

font-size:24px;

}

}
/*=====================================
SCROLL ANIMATION
=====================================*/
/
.about,
.mission,
.impact,
.programs,
.gallery,
.cta,
.contact{

opacity:0;
transform:translateY(80px);
transition:1s;

}

.show{

opacity:1;
transform:translateY(0);

}

/*=====================================
ACTIVE MENU
=====================================*/

nav a.active{

color:#FFC107 !important;

}

/*=====================================
BACK TO TOP
=====================================*/

#topButton{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#FF3B1F;

color:white;

font-size:22px;

cursor:pointer;

opacity:0;

pointer-events:none;

transition:.4s;

z-index:999;

}

.showTop{

opacity:1 !important;

pointer-events:auto !important;

}

#topButton:hover{

background:#0D5BD7;

}

/* ================= DIRECTORS ================= */

.directors{
    padding:70px 20px;
    background:#fff;
}

.director-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:25px;
    max-width:1250px;
    margin:60px auto 0;
}

.director-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.10);
    text-align:center;
    height:auto;
    min-height:420;
    padding:15px 20px 15px;

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

    min-width:0;
    box-sizing:border-box;

    transition:0.4s ease;
}

.director-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,0.14);
}


/* DIRECTOR IMAGE */

.director-image{
    width:175px;
    height:175px;

    object-fit:contain;
    object-position:center;

    display:block;
    flex-shrink:0;

    border-radius:50%;
    border:6px solid #f1f6ec;

    box-shadow:0 3px 12px rgba(0,0,0,0.12);

    background:#f5f5f5;
}
/* ONLY Director 3 */
.director-card:nth-child(3) .director-image {
    object-fit: cover;
    object-position: center;
}


/* CONTENT */

.director-content{
    width:100%;
    padding:20px 10px 0;

    text-align:center;

    box-sizing:border-box;
}

.director-card h3{
    font-size:25px;
    font-weight:700;
    color:#222;

    margin:0 0 10px;
}

.director-card h4{
    font-size:18px;
    font-weight:400;
    color:#222;

    margin:0 0 10px;
}

.director-card p{
    width:100%;
    max-width:270px;

    margin:0 auto;

    font-size:15px;
    font-weight:400;
    color:#666;

    line-height:1.7;
    text-align:center;
}
/* Small Donation QR */

.qr-section{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin:20px 0;
}

.qr-section img{
    width:120px;
    height:120px;
    border-radius:10px;
    background:#fff;
    padding:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.qr-section h4{
    margin-top:12px;
    font-size:18px;
    color:#fff;
}

.qr-section p{
    color:#f5f5f5;
    font-size:14px;
    margin:4px 0;
    line-height:1.6;
}
/* ================= WHATSAPP FLOATING BUTTON ================= */

.whatsapp-float{
    position: fixed;
    width: 60px;
    height: 60px;
    right: 25px;
    bottom: 110px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
    transition: all .3s ease;
    z-index: 9999;
}

.floating-whatsapp:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
        }

.whatsapp-icon{
    width:34px;
    height:34px;
}

/* Mobile Responsive */

@media(max-width:768px){

.whatsapp-float{
    width:55px;
    height:55px;
    right:20px;
    bottom:95px;
}

.whatsapp-icon{
    width:30px;
    height:30px;
}

    /* ==========================================
           PROGRAM DETAILS PAGE
        ========================================== */

        body{
            margin:0;
            padding:0;
            font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
            background:#f5f7fa;
        }

        /* Main Section */

        .program-section{
            padding:70px 5%;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        /* Container */

        .program-container{
            max-width:1200px;
            margin:0 auto;
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:60px;
            background: #fff;
            padding: 40px;
            border-radius: 24px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }

        /* Left Image */

        .program-image{
            flex:0 0 40%;
        }

        .program-image img{
            width:100%;
            max-width:450px;
            height:350px;
            object-fit:cover;
            object-position:center;
            border-radius:18px;
            box-shadow:0 10px 25px rgba(0,0,0,0.15);
            transition:.4s ease;
        }

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

        /* Right Content */

        .program-content{
            flex:1;
        }

        .program-content h1{
            font-size:42px;
            color:#0056b3;
            margin-top:0;
            margin-bottom:20px;
            font-weight:700;
        }

        .program-content p{
            font-size:18px;
            color:#555;
            line-height:2;
            text-align:justify;
        }

        /* Back Button */

        .back-btn{
            display:inline-block;
            margin-top:35px;
            padding:14px 32px;
            background:#0056b3;
            color:#fff;
            text-decoration:none;
            border-radius:50px;
            font-size:16px;
            font-weight:600;
            transition:.3s;
        }

        .back-btn:hover{
            background:#003d82;
            transform:translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 86, 179, 0.3);
        }

        /* Tablet */

        @media(max-width:992px){

        .program-container{
            gap:40px;
            flex-direction: column;
            align-items: center;
        }

        .program-image img{
            max-width:100%;
            height:auto;
        }

        .program-content h1{
            font-size:34px;
        }

        .program-content p{
            font-size:17px;
        }

        }

        /* Mobile */

        @media(max-width:768px){

        .program-section {
            padding: 40px 20px;
        }

        .program-container{
            padding: 25px;
            flex-direction:column;
            align-items:center;
            text-align:center;
        }

        .program-image{
            flex:100%;
            width: 100%;
        }

        .program-image img{
            width:100%;
            max-width:100%;
            height:250px;
        }

        .program-content{
            width:100%;
        }

        .program-content h1{
            font-size:30px;
            margin-top:25px;
        }

        .program-content p{
            text-align:left;
            font-size:16px;
            line-height:1.8;
        }

        .back-btn{
            display:inline-block;
            margin-top:30px;
        }

        }
    </style>
    /* ================= GOOGLE QR FLOAT ================= */

.google-float{
    position:fixed;
    right:20px;
    bottom:130px;          /* Places it above WhatsApp */
    z-index:9999;
}

.google-float img{
    width:70px !important;
    height:70px !important;
    object-fit:contain;
    background:#fff;
    border-radius:10px;
    padding:5px;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
    transition:0.3s ease;
}

.google-float img:hover{
    transform:scale(1.08);
}

@media(max-width:768px){
    .google-float{
        display:none;
    }
}
/* ==========================
MOBILE MENU
========================== */

.menu-toggle{
    display:none;
    font-size:28px;
    color:#fff;
    cursor:pointer;
}

header.sticky .menu-toggle{
    color:#222;
}

@media(max-width:768px){

.menu-toggle{
    display:block;
}

nav{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#ffffff;
    display:none;
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}

nav.active{
    display:block;
}

nav ul{
    flex-direction:column;
    padding:20px;
    gap:20px;
}

nav ul li{
    width:100%;
}

nav ul li a{
    color:#222;
    display:block;
}

}
/* ================================
   NGO VIDEO SECTION
================================ */

.ngo-video-section {
    padding: 90px 8%;
    background: #ffffff;
    text-align: center;
}

.video-heading span {
    color: #1760d5;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.video-heading h2 {
    font-size: 42px;
    margin: 12px 0;
    color: #222;
}

.video-heading p {
    color: #666;
    font-size: 17px;
    margin-bottom: 40px;
}

.video-placeholder {
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    margin: auto;

    background: linear-gradient(
        135deg,
        #0d47b5,
        #1760d5
    );

    border-radius: 25px;

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

    color: white;

    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.play-button {
    width: 80px;
    height: 80px;
    border-radius: 50%;

    background: rgba(255,255,255,0.95);
    color: #1760d5;

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

    font-size: 30px;
    padding-left: 5px;

    margin-bottom: 20px;
}

.video-placeholder h3 {
    font-size: 25px;
    margin: 5px 0;
}

.video-placeholder p {
    margin: 5px 0;
    opacity: 0.85;
}


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

@media (max-width: 768px) {

    .ngo-video-section {
        padding: 60px 20px;
    }

    .video-heading h2 {
        font-size: 30px;
    }

    .video-heading p {
        font-size: 15px;
    }

    .video-placeholder {
        border-radius: 18px;
    }

    .play-button {
        width: 65px;
        height: 65px;
        font-size: 24px;
    }

    .video-placeholder h3 {
        font-size: 20px;
    }
}
/* =========================================
TABLET
========================================= */

@media (max-width:1000px){

    .director-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:30px;
        max-width:850px;
    }

    .director-card{
        min-height:580px;
    }

}


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

@media (max-width:600px){

    .directors{
        padding:55px 15px;
    }

    .director-grid{
        grid-template-columns:1fr;
        gap:25px; 
        margin-top:35px;
    }

    .director-card{
        width:100%;
        max-width:380px;
        min-height:auto;

        margin:0 auto;

        padding:30px 20px 35px;
    }

    .director-card > img{
        width:170px;
        height:170px;

        margin-bottom:22px;
    }

    .director-card h3{
        font-size:24px;
    }

    .director-card h4{
        font-size:17px;
    }

    .director-card span{
        font-size:16px;
    }

    .director-card p{
        font-size:15px;
        max-width:320px;
    }

}
/* FIX DIRECTOR IMAGE SIZE */

.director-card img,
.director-card > img,
.director-card .director-image {
    width: 190px !important;
    height: 190px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto 25px auto !important;
    border: 6px solid #f1f6ec !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12) !important;
}
@media (max-width:600px){

    .director-card img,
    .director-card > img,
    .director-card .director-image {
        width:170px !important;
        height:170px !important;
    }

}
/* =========================================
   DIRECTOR SECTION - LAPTOP & DESKTOP
========================================= */

@media (min-width: 601px){

    .director-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        max-width: 1100px;
        margin: 50px auto 0;
    }

    .director-card{
      height:560px;
      padding:20px 18px;
      align-items:center;
      text-align:center;

      box-sizing:border-box;

      display:flex;
      flex-direction:column;
    }

    .director-image{
        width: 200px;
        height: 200px;
        object-fit: cover;
        object-position: center;
        border-radius: 50%;
        margin: 0 auto 25px;
        display: block;
        flex-shrink: 0;
    }

    .director-card h3{
        font-size: 27px;
        margin: 5px 0 10px;
        text-align: center;
    }

    .director-card h4{
        font-size: 18px;
        margin-bottom: 15px;
        text-align: center;
    }

    .director-card p{
        max-width: 420px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.7;
        text-align: center;
    }
}
/* ================= LAPTOP / DESKTOP ================= */

@media (min-width:1001px){

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

    .director-image{
        width:200px;
        height:200px;
    }

    .director-card{
        min-height:590px;
    }
}


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

@media (min-width:601px) and (max-width:1000px){

    .director-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:30px;
    }

    .director-image{
        width:180px;
        height:180px;
    }

    .director-card{
        min-height:auto;
    }
}
/* =========================================================
   PROFESSIONAL NGO MICRO-INTERACTIONS
   HTML CHANGES NOT REQUIRED
========================================================= */


/* ---------- GLOBAL SMOOTHNESS ---------- */

.director-card,
.program-card,
.project-card,
.gallery-item,
.contact-card,
.social-icon,
.qr-container,
button,
.btn {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* =========================================================
   DIRECTOR / PROGRAM / PROJECT CARDS
========================================================= */

.director-card:hover,
.program-card:hover,
.project-card:hover,
.contact-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 18px 45px rgba(0,0,0,0.14);
}


/* ---------- CARD IMAGES ---------- */

.director-card img,
.program-card img,
.project-card img,
.gallery-item img {

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Gentle image movement */

.director-card:hover img,
.program-card:hover img,
.project-card:hover img,
.gallery-item:hover img {

    transform: scale(1.035);
}


/* =========================================================
   DIRECTOR IMAGE — VERY SUBTLE
========================================================= */

.director-card:hover .director-image {

    transform: scale(1.025);

}


/* =========================================================
   GALLERY
========================================================= */

.gallery-item {

    overflow: hidden;
}

.gallery-item:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0,0,0,0.15);
}


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

.btn,
button {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.btn:hover,
button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 8px 22px rgba(0,0,0,0.16);

    filter: brightness(1.03);
}


/* =========================================================
   DONATE BUTTON — SLIGHTLY MORE ATTRACTIVE
========================================================= */

.cta-btn:hover {

    transform: translateY(-3px) scale(1.02);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.18);
}


/* =========================================================
   SOCIAL MEDIA ICONS
========================================================= */

.social-icon {

    cursor: pointer;
}

.social-icon:hover {

    transform:
        translateY(-5px)
        scale(1.08);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.15);
}


/* =========================================================
   QR / DONATION AREA
========================================================= */

.qr-container:hover,
.qr-section:hover {

    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.12);
}


/* =========================================================
   NAVIGATION
========================================================= */

nav ul li a {

    position: relative;
}

nav ul li a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -6px;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    background: currentColor;

    transition:
        width 0.3s ease;
}

nav ul li a:hover::after {

    width: 70%;
}


/* =========================================================
   SECTION TITLES
========================================================= */

.section-title h2 {

    transition:
        transform 0.3s ease;
}

.section-title h2:hover {

    transform: translateY(-3px);
}


/* =========================================================
   CONTACT LINKS
========================================================= */

.contact a {

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.contact a:hover {

    opacity: 0.8;
}


/* =========================================================
   MOBILE
   Keep interactions smaller on touch screens
========================================================= */

@media (max-width: 768px) {

    .director-card:hover,
    .program-card:hover,
    .project-card:hover,
    .contact-card:hover {

        transform: translateY(-3px);

        box-shadow:
            0 10px 25px rgba(0,0,0,0.10);
    }

    .director-card:hover img,
    .program-card:hover img,
    .project-card:hover img,
    .gallery-item:hover img {

        transform: scale(1.015);
    }

    .social-icon:hover {

        transform: translateY(-3px) scale(1.04);
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        transition: none !important;
        animation: none !important;
    }
}