/* =======================================================
   UCANADA PROJECT PAGE CSS
   PART 1A
======================================================= */

/* 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;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:#222;
    overflow-x:hidden;
    line-height:1.7;
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{
    width:90%;
    max-width:1280px;
    margin:auto;
}

/* ==========================================
   ROOT COLORS
========================================== */

:root{

--primary:#C8102E;

--primary-dark:#A40D26;

--dark:#222222;

--text:#666666;

--white:#ffffff;

--light:#f8f9fb;

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

}

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

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 38px;

background:var(--primary);

color:#fff;

font-size:16px;

font-weight:600;

border-radius:50px;

transition:.35s;

box-shadow:0 15px 35px rgba(200,16,46,.25);

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(200,16,46,.35);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 38px;

border:2px solid #fff;

color:#fff;

font-size:16px;

font-weight:600;

border-radius:50px;

transition:.35s;

}

.btn-secondary:hover{

background:#fff;

color:var(--primary);

transform:translateY(-5px);

}

.btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 38px;

border:2px solid var(--primary);

color:var(--primary);

font-size:16px;

font-weight:600;

border-radius:50px;

transition:.35s;

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

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

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:10px 25px;

background:#ffe8ec;

color:var(--primary);

border-radius:40px;

font-size:14px;

font-weight:600;

letter-spacing:1px;

margin-bottom:20px;

text-transform:uppercase;

}

.section-title h2{

font-size:48px;

font-weight:800;

color:#222;

margin-bottom:20px;

line-height:1.3;

}

.section-title p{

max-width:760px;

margin:auto;

font-size:17px;

color:#666;

line-height:1.9;

}

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

#header{

position:fixed;

top:0;

left:0;

width:100%;

background:#ffffff;

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

z-index:9999;

transition:.35s;

}

.navbar{

width:90%;

max-width:1300px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo img{

height:60px;

}

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

.nav-links{

display:flex;

align-items:center;

gap:35px;

}

.nav-links li a{

font-size:16px;

font-weight:600;

color:#222;

position:relative;

transition:.35s;

}

.nav-links li a:hover,

.nav-links li a.active{

color:#C8102E;

}

.nav-links li a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#C8102E;

transition:.35s;

}

.nav-links li a:hover::after,

.nav-links li a.active::after{

width:100%;

}

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

.donate-btn{

padding:14px 30px;

background:#C8102E;

color:#fff;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.donate-btn:hover{

background:#A40D26;

transform:translateY(-4px);

}

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

.menu-btn{

display:none;

font-size:30px;

cursor:pointer;

color:#222;

}

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

.projects-hero{

position:relative;

width:100%;

height:100vh;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

}

.projects-hero img{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

animation:heroZoom 18s linear infinite;

}

.hero-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:linear-gradient(

90deg,

rgba(0,0,0,.72),

rgba(0,0,0,.45)

);

z-index:1;

}

.projects-content{

position:relative;

z-index:2;

max-width:900px;

text-align:center;

color:#fff;

padding:20px;

}

.projects-content span{

display:inline-block;

padding:12px 28px;

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

border:1px solid rgba(255,255,255,.2);

backdrop-filter:blur(10px);

border-radius:40px;

font-size:14px;

font-weight:600;

letter-spacing:2px;

margin-bottom:25px;

text-transform:uppercase;

}

.projects-content h1{

font-size:68px;

font-weight:800;

line-height:1.15;

margin-bottom:25px;

text-shadow:0 10px 25px rgba(0,0,0,.3);

}

.projects-content p{

font-size:18px;

line-height:2;

max-width:760px;

margin:auto auto 45px;

color:#f3f3f3;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

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

@keyframes heroZoom{

0%{

transform:scale(1);

}

100%{

transform:scale(1.08);

}

}

/* =======================================================
   BREADCRUMB
======================================================= */

.breadcrumb{

background:#f8f9fb;

padding:22px 0;

border-bottom:1px solid #eee;

}

.breadcrumb .container{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

}

.breadcrumb a{

color:#666;

font-size:15px;

font-weight:500;

transition:.3s;

}

.breadcrumb a:hover{

color:#C8102E;

}

.breadcrumb span{

color:#999;

font-size:13px;

}

.breadcrumb p{

color:#C8102E;

font-weight:700;

font-size:15px;

}

/* =======================================================
   PROJECT OVERVIEW
======================================================= */

.project-overview{

padding:120px 0;

background:#fff;

}

.project-overview .container{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

}

.overview-left{

flex:1;

}

.overview-left h2{

font-size:48px;

font-weight:800;

line-height:1.3;

margin:20px 0;

color:#222;

}

.overview-left p{

font-size:17px;

line-height:1.9;

color:#666;

margin-bottom:22px;

}

.overview-right{

flex:1;

}

.overview-right img{

width:100%;

border-radius:25px;

box-shadow:0 20px 50px rgba(0,0,0,.10);

transition:.5s;

}

.overview-right:hover img{

transform:scale(1.05);

}

.overview-left .btn-primary{

margin-top:15px;

}

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

.project-stats{

padding:90px 0;

background:#f8f9fb;

}

.project-stats .container{

display:grid;

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

gap:30px;

}

.stat-box{

background:#fff;

padding:45px 25px;

border-radius:20px;

text-align:center;

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

transition:.35s;

}

.stat-box:hover{

transform:translateY(-10px);

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

}

.stat-box i{

font-size:45px;

color:#C8102E;

margin-bottom:18px;

}

.stat-box h2{

font-size:52px;

font-weight:800;

color:#C8102E;

margin-bottom:10px;

}

.stat-box p{

font-size:16px;

font-weight:600;

color:#555;

}

/* =======================================================
   FEATURED PROJECT
======================================================= */

.featured-project{

padding:120px 0;

background:#ffffff;

}


/* Main Layout */

.featured-project .container{

display:flex;

align-items:center;

gap:70px;

}


/* ==========================================
   FEATURED IMAGE
========================================== */

.featured-image{

flex:1;

position:relative;

border-radius:30px;

overflow:hidden;

box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.featured-image img{

width:100%;

height:550px;

object-fit:cover;

transition:.6s;

}


.featured-image:hover img{

transform:scale(1.08);

}


/* Badge */

.project-badge{

position:absolute;

top:25px;

left:25px;

background:#C8102E;

color:#fff;

padding:12px 25px;

border-radius:50px;

font-size:14px;

font-weight:600;

display:flex;

align-items:center;

gap:8px;

box-shadow:0 10px 30px rgba(200,16,46,.3);

}



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

.featured-content{

flex:1;

}


.project-category{

display:inline-block;

padding:10px 22px;

background:#ffe8ec;

color:#C8102E;

border-radius:40px;

font-size:14px;

font-weight:700;

margin-bottom:20px;

}


.featured-content h2{

font-size:45px;

font-weight:800;

line-height:1.3;

color:#222;

margin-bottom:25px;

}


.featured-content p{

font-size:17px;

line-height:1.9;

color:#666;

margin-bottom:20px;

}



/* ==========================================
   PROJECT INFORMATION
========================================== */


.project-info{

display:grid;

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

gap:20px;

margin:35px 0;

}


.project-info div{

background:#f8f9fb;

padding:20px;

border-radius:15px;

border-left:4px solid #C8102E;

}


.project-info h4{

font-size:16px;

color:#222;

margin-bottom:5px;

}


.project-info p{

font-size:14px;

margin:0;

color:#666;

}



/* ==========================================
   PROGRESS BAR
========================================== */


.progress-wrapper{

margin:35px 0;

}


.progress-top{

display:flex;

justify-content:space-between;

font-size:15px;

font-weight:600;

margin-bottom:12px;

color:#333;

}


.progress-bar{

height:12px;

width:100%;

background:#eee;

border-radius:20px;

overflow:hidden;

}


.progress-fill{

height:100%;

background:linear-gradient(

90deg,

#C8102E,

#ff526d

);

border-radius:20px;

}



/* ==========================================
   DONATION BOX
========================================== */


.donation-box{

display:flex;

justify-content:space-between;

align-items:center;

background:#fff;

padding:25px;

border-radius:20px;

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

margin-top:30px;

}


.donation-box h3{

font-size:32px;

color:#C8102E;

margin-bottom:5px;

}


.donation-box span{

font-size:14px;

color:#666;

}

/* =======================================================
   RECENT PROJECTS GRID
======================================================= */

.projects-grid-section{

padding:120px 0;

background:#f8f9fb;

}


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

.projects-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}


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


.project-card{

background:#fff;

border-radius:25px;

overflow:hidden;

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

transition:.45s ease;

position:relative;

}


.project-card:hover{

transform:translateY(-12px);

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

}


/* ==========================================
   PROJECT IMAGE
========================================== */


.project-image{

height:280px;

overflow:hidden;

position:relative;

}


.project-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}


.project-card:hover .project-image img{

transform:scale(1.1);

}



/* ==========================================
   CATEGORY TAG
========================================== */


.project-tag{

position:absolute;

top:20px;

left:20px;

background:#C8102E;

color:#fff;

padding:8px 20px;

border-radius:50px;

font-size:13px;

font-weight:600;

}



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


.project-content{

padding:30px;

}


.project-content h3{

font-size:25px;

font-weight:700;

color:#222;

margin-bottom:15px;

line-height:1.4;

}


.project-content p{

font-size:15px;

color:#666;

line-height:1.8;

margin-bottom:25px;

}



/* ==========================================
   PROJECT FOOTER
========================================== */


.project-footer{

display:flex;

align-items:center;

justify-content:space-between;

padding-top:20px;

border-top:1px solid #eee;

}


.project-footer span{

font-size:14px;

color:#777;

display:flex;

align-items:center;

gap:8px;

}


.project-footer span i{

color:#C8102E;

}


.project-footer a{

font-size:14px;

font-weight:600;

color:#C8102E;

display:flex;

align-items:center;

gap:8px;

transition:.3s;

}


.project-footer a:hover{

gap:14px;

}


/* ==========================================
   CARD TOP LINE
========================================== */


.project-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:#C8102E;

transform:scaleX(0);

transition:.4s;

transform-origin:left;

}


.project-card:hover::before{

transform:scaleX(1);

}

/* =======================================================
   PROJECT FILTER SECTION
======================================================= */

.project-filter-section{

padding:100px 0;

background:#ffffff;

}


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


.filter-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin-top:50px;

}


.filter-btn{

padding:14px 30px;

border:none;

background:#f8f9fb;

color:#555;

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

font-size:15px;

font-weight:600;

border-radius:50px;

cursor:pointer;

transition:.35s;

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

}


.filter-btn:hover{

background:#C8102E;

color:#fff;

transform:translateY(-4px);

}


.filter-btn.active{

background:#C8102E;

color:#fff;

box-shadow:0 15px 30px rgba(200,16,46,.25);

}


/* Filter Animation */

.project-card.hide{

display:none;

}

.project-card.show{

animation:projectShow .5s ease;

}


@keyframes projectShow{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* =======================================================
   SUCCESS STORY SECTION
======================================================= */


.success-story{

padding:120px 0;

background:#f8f9fb;

}


.success-story .container{

display:flex;

align-items:center;

gap:70px;

}


/* ==========================================
   STORY IMAGE
========================================== */


.story-image{

flex:1;

position:relative;

border-radius:30px;

overflow:hidden;

box-shadow:0 20px 50px rgba(0,0,0,.12);

}


.story-image img{

width:100%;

height:550px;

object-fit:cover;

transition:.6s;

}


.story-image:hover img{

transform:scale(1.07);

}



/* Image Badge */

.story-badge{

position:absolute;

bottom:25px;

left:25px;

background:#C8102E;

color:#fff;

padding:14px 25px;

border-radius:50px;

font-weight:600;

display:flex;

align-items:center;

gap:10px;

box-shadow:0 15px 35px rgba(200,16,46,.3);

}



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


.story-content{

flex:1;

}


.story-content h2{

font-size:48px;

font-weight:800;

line-height:1.3;

color:#222;

margin:20px 0;

}


.story-content p{

font-size:17px;

line-height:1.9;

color:#666;

margin-bottom:20px;

}



/* ==========================================
   STORY POINTS
========================================== */


.story-points{

margin:35px 0;

display:flex;

flex-direction:column;

gap:18px;

}


.story-item{

display:flex;

align-items:center;

gap:15px;

font-size:16px;

font-weight:600;

color:#444;

}


.story-item i{

font-size:22px;

color:#C8102E;

}



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


.story-buttons{

display:flex;

gap:20px;

margin-top:35px;

}


/* =======================================================
   UPCOMING PROJECTS
======================================================= */

.upcoming-projects{

padding:120px 0;

background:#ffffff;

}


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


.upcoming-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}



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


.upcoming-card{

background:#fff;

padding:45px 35px;

border-radius:25px;

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

position:relative;

overflow:hidden;

transition:.45s;

border:1px solid #f1f1f1;

}


.upcoming-card:hover{

transform:translateY(-12px);

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

}



/* Top Line */

.upcoming-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:#C8102E;

transform:scaleX(0);

transition:.4s;

transform-origin:left;

}


.upcoming-card:hover::before{

transform:scaleX(1);

}



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


.upcoming-icon{

width:85px;

height:85px;

background:#ffe8ec;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

transition:.4s;

}


.upcoming-icon i{

font-size:38px;

color:#C8102E;

transition:.4s;

}


.upcoming-card:hover .upcoming-icon{

background:#C8102E;

}


.upcoming-card:hover .upcoming-icon i{

color:#fff;

}



/* ==========================================
   STATUS BADGES
========================================== */


.status{

display:inline-block;

padding:8px 20px;

border-radius:50px;

font-size:13px;

font-weight:600;

margin-bottom:20px;

}


/* Planning */

.status.planned{

background:#fff3cd;

color:#856404;

}


/* Progress */

.status.progress{

background:#d1ecf1;

color:#0c5460;

}


/* Future */

.status.future{

background:#e2d9ff;

color:#5a189a;

}



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


.upcoming-card h3{

font-size:26px;

font-weight:700;

color:#222;

margin-bottom:15px;

}


.upcoming-card p{

font-size:15px;

line-height:1.8;

color:#666;

margin-bottom:25px;

}



/* ==========================================
   PROJECT DATE
========================================== */


.project-date{

display:flex;

align-items:center;

gap:10px;

padding-top:20px;

border-top:1px solid #eee;

font-size:14px;

font-weight:600;

color:#555;

}


.project-date i{

color:#C8102E;

font-size:18px;

}

/* =======================================================
   PROJECT GALLERY PREVIEW
======================================================= */

.project-gallery{

padding:120px 0;

background:#f8f9fb;

}



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


.gallery-preview{

display:grid;

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

gap:25px;

margin-top:60px;

}



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


.gallery-item{

position:relative;

height:280px;

border-radius:22px;

overflow:hidden;

cursor:pointer;

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

}


.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}


.gallery-item:hover img{

transform:scale(1.12);

}



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


.gallery-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:linear-gradient(

to top,

rgba(0,0,0,.75),

transparent

);

display:flex;

align-items:flex-end;

padding:25px;

opacity:0;

transition:.4s;

}


.gallery-item:hover .gallery-overlay{

opacity:1;

}


.gallery-overlay h3{

color:#fff;

font-size:20px;

font-weight:700;

}



/* ==========================================
   VIEW GALLERY BUTTON
========================================== */


.gallery-button{

text-align:center;

margin-top:60px;

}


.gallery-button a{

display:inline-flex;

align-items:center;

gap:10px;

padding:16px 40px;

background:#C8102E;

color:#fff;

border-radius:50px;

font-weight:600;

transition:.35s;

}


.gallery-button a:hover{

background:#A40D26;

transform:translateY(-5px);

}



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


.projects-cta{

position:relative;

padding:140px 0;

background:url("why.png")
center/cover no-repeat;

text-align:center;

overflow:hidden;

}


.projects-cta::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(200,16,46,.85);

}



.cta-content{

position:relative;

z-index:2;

max-width:850px;

margin:auto;

color:#fff;

}


.cta-content span{

display:inline-block;

padding:10px 25px;

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

border-radius:40px;

font-size:14px;

font-weight:600;

letter-spacing:1px;

margin-bottom:20px;

}



.cta-content h2{

font-size:55px;

font-weight:800;

line-height:1.3;

margin-bottom:25px;

}



.cta-content p{

font-size:18px;

line-height:1.9;

margin-bottom:40px;

}


.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

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

footer{

background:#111;

color:#fff;

padding:90px 0 0;

}


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


.footer-container{

width:90%;

max-width:1200px;

margin:auto;

display:grid;

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

gap:40px;

}


/* ==========================================
   FOOTER COLUMN
========================================== */


.footer-col h3{

font-size:24px;

font-weight:700;

margin-bottom:25px;

position:relative;

}


.footer-col h3::after{

content:"";

position:absolute;

bottom:-10px;

left:0;

width:45px;

height:3px;

background:#C8102E;

}


.footer-col p{

font-size:15px;

line-height:1.9;

color:#bbb;

}



/* ==========================================
   FOOTER LOGO
========================================== */


.footer-logo{

width:150px;

margin-bottom:20px;

}



/* ==========================================
   SOCIAL LINKS
========================================== */


.social-links{

display:flex;

gap:15px;

margin-top:25px;

}


.social-links a{

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#222;

color:#fff;

font-size:18px;

transition:.35s;

}


.social-links a:hover{

background:#C8102E;

transform:translateY(-5px);

}



/* ==========================================
   FOOTER LINKS
========================================== */


.footer-col ul li{

margin-bottom:14px;

}


.footer-col ul li a{

color:#bbb;

font-size:15px;

transition:.3s;

}


.footer-col ul li a:hover{

color:#C8102E;

padding-left:8px;

}



/* ==========================================
   NEWSLETTER
========================================== */


.footer-col form{

display:flex;

margin-top:20px;

background:#fff;

border-radius:50px;

overflow:hidden;

height:50px;

}


.footer-col input{

flex:1;

border:none;

outline:none;

padding:0 20px;

font-size:14px;

}


.footer-col button{

border:none;

background:#C8102E;

color:#fff;

padding:0 25px;

cursor:pointer;

font-weight:600;

transition:.3s;

}


.footer-col button:hover{

background:#A40D26;

}



/* ==========================================
   COPYRIGHT
========================================== */


.copyright{

margin-top:70px;

padding:25px 0;

text-align:center;

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

}


.copyright p{

font-size:14px;

color:#aaa;

}


.copyright strong{

color:#C8102E;

}



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


.top-btn{

position:fixed;

right:30px;

bottom:30px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#C8102E;

color:#fff;

font-size:20px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:999;

box-shadow:0 10px 30px rgba(200,16,46,.3);

}


.top-btn.active{

opacity:1;

visibility:visible;

}


.top-btn:hover{

background:#A40D26;

transform:translateY(-5px);

}

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


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

@media(max-width:1024px){


.navbar{

padding:15px 25px;

}


.nav-links{

gap:20px;

}


.projects-content h1{

font-size:52px;

}


.projects-content p{

font-size:17px;

}



/* Overview */

.project-overview .container,
.success-story .container{

flex-direction:column;

}


.overview-left h2,
.story-content h2{

font-size:38px;

}



.project-stats .container{

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

}



.projects-grid{

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

}



.upcoming-grid{

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

}



.gallery-preview{

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

}



.footer-container{

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

}


}


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


@media(max-width:768px){



/* HEADER */


.navbar{

padding:15px 20px;

}


.logo img{

height:50px;

}


.menu-btn{

display:block;

}


/* Mobile Menu */


.nav-links{

position:absolute;

top:80px;

left:0;

width:100%;

background:#fff;

display:flex;

flex-direction:column;

gap:25px;

padding:35px 0;

transform:translateY(-150%);

transition:.4s;

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

}


.nav-links.active{

transform:translateY(0);

}


.nav-links li a{

color:#222;

}



.donate-btn{

display:none;

}




/* HERO */


.projects-hero{

height:90vh;

}


.projects-content h1{

font-size:38px;

}


.projects-content p{

font-size:15px;

line-height:1.8;

}



.hero-buttons{

flex-direction:column;

}


.hero-buttons a{

width:220px;

}




/* OVERVIEW */


.project-overview{

padding:80px 0;

}


.overview-left h2,
.story-content h2{

font-size:32px;

}


.overview-left p,
.story-content p{

font-size:15px;

}



.overview-right img,
.story-image img{

height:350px;

}



/* STATS */


.project-stats .container{

grid-template-columns:1fr;

}


.stat-box h2{

font-size:42px;

}




/* FEATURED */

.featured-project .container{

flex-direction:column;

}


.featured-image img{

height:350px;

}



.featured-content h2{

font-size:32px;

}



.project-info{

grid-template-columns:1fr;

}



.donation-box{

flex-direction:column;

gap:20px;

text-align:center;

}



/* PROJECT CARDS */


.projects-grid,
.upcoming-grid{

grid-template-columns:1fr;

}



.project-image{

height:240px;

}



/* FILTER */


.filter-buttons{

gap:12px;

}


.filter-btn{

padding:12px 22px;

font-size:14px;

}



/* GALLERY */


.gallery-preview{

grid-template-columns:1fr;

}


.gallery-item{

height:250px;

}



/* CTA */


.projects-cta{

padding:90px 20px;

}


.cta-content h2{

font-size:35px;

}



.cta-content p{

font-size:15px;

}



/* FOOTER */


.footer-container{

grid-template-columns:1fr;

gap:35px;

}


.footer-col form{

height:45px;

}



.copyright p{

font-size:13px;

padding:0 20px;

}



/* TOP BUTTON */


.top-btn{

right:20px;

bottom:20px;

width:45px;

height:45px;

}


}

.web{
   color: rgb(255, 20, 39);
}