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

.gallery-hero{

height:70vh;

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

display:flex;

align-items:center;

position:relative;

}

.gallery-hero .container{

position:relative;

z-index:5;

color:white;

}

.gallery-hero h1{

font-size:70px;

font-weight:800;

margin-top:20px;

}

.gallery-hero h1 span{

display:block;

color:#FFC107;

}

.gallery-hero p{

margin-top:25px;

max-width:650px;

line-height:1.8;

font-size:18px;

}


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

.featured-project{

padding:120px 0;

}

.featured-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.featured-image img{

border-radius:20px;

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

transition:.4s;

}

.featured-image:hover img{

transform:scale(1.03);

}

.featured-content span{

color:#C8102E;

font-weight:600;

letter-spacing:2px;

}

.featured-content h2{

font-size:46px;

margin:20px 0;

color:#071A2E;

}

.featured-content p{

line-height:1.9;

color:#64748B;

margin-bottom:30px;

}

.featured-content ul{

list-style:none;

margin-bottom:40px;

}

.featured-content li{

margin-bottom:18px;

display:flex;

gap:15px;

align-items:center;

}

.featured-content i{

color:#C8102E;

}


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

.gallery-filter{

padding-bottom:100px;

}

.filter-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.filter-buttons button{

padding:15px 30px;

border:none;

background:#F3F3F3;

border-radius:40px;

font-weight:600;

font-family:Poppins;

cursor:pointer;

transition:.35s;

}

.filter-buttons button:hover{

background:#C8102E;

color:white;

}

.filter-buttons .active{

background:#C8102E;

color:white;

}
/*==========================================
PROJECT GALLERY
==========================================*/

.project-gallery{

padding:0 0 120px;

background:white;

}

.gallery-grid{

display:grid;

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

gap:30px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:20px;

height:320px;

cursor:pointer;

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

}

.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}

.gallery-item:hover img{

transform:scale(1.1);

}

.gallery-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:30px;

background:linear-gradient(to top,
rgba(7,26,46,.95),
transparent);

color:white;

transform:translateY(100%);

transition:.45s;

}

.gallery-item:hover .gallery-overlay{

transform:translateY(0);

}

.gallery-overlay h3{

font-size:24px;

margin-bottom:10px;

}

.gallery-overlay p{

margin-bottom:20px;

opacity:.85;

}

.gallery-overlay a{

display:inline-flex;

width:48px;

height:48px;

border-radius:50%;

background:#C8102E;

align-items:center;

justify-content:center;

color:white;

font-size:20px;

transition:.35s;

}

.gallery-overlay a:hover{

background:#FFC107;

color:#071A2E;

}
/*==============================
LIGHTBOX
==============================*/

.lightbox{

position:fixed;

inset:0;

background:rgba(0,0,0,.92);

display:none;

align-items:center;

justify-content:center;

z-index:9999;

}

.lightbox.active{

display:flex;

}

.lightbox-image{

max-width:90%;

max-height:85vh;

border-radius:12px;

box-shadow:0 20px 60px rgba(0,0,0,.4);

}

.close-lightbox{

position:absolute;

top:30px;

right:45px;

font-size:50px;

color:white;

cursor:pointer;

}

.lightbox-controls{

position:absolute;

bottom:40px;

display:flex;

gap:20px;

}

.lightbox-controls button{

width:60px;

height:60px;

border:none;

border-radius:50%;

background:#C8102E;

color:white;

font-size:24px;

cursor:pointer;

transition:.3s;

}

.lightbox-controls button:hover{

background:#FFC107;

color:#071A2E;

}

/*==============================
STATISTICS
==============================*/

.gallery-stats{

padding:120px 0;

background:#071A2E;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-box{

text-align:center;

color:white;

}

.stat-box h2{

font-size:60px;

color:#FFC107;

margin-bottom:15px;

}

/*==============================
TESTIMONIAL
==============================*/

.testimonial{

padding:120px 0;

background:#fff;

}

.testimonial-card{

max-width:850px;

margin:auto;

padding:60px;

text-align:center;

border-radius:20px;

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

}

.testimonial-card i{

font-size:45px;

color:#C8102E;

margin-bottom:25px;

}

.testimonial-card p{

font-size:20px;

line-height:1.8;

margin-bottom:30px;

color:#64748B;

}

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

.gallery-cta{

padding:120px 0;

background:linear-gradient(135deg,#071A2E,#C8102E);

text-align:center;

color:white;

}

.gallery-cta h2{

font-size:52px;

margin-bottom:20px;

}

.gallery-cta p{

font-size:18px;

margin-bottom:40px;

}