/* =========================
   BANNER GALERIE
========================= */


.gallery-banner{

height:450px;

background:

linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),

url("../images/gallery-banner.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

}



.gallery-banner span{

color:#ffccd5;

text-transform:uppercase;

letter-spacing:3px;

font-weight:600;

}



.gallery-banner h1{

font-family:'Playfair Display',serif;

font-size:70px;

margin:20px 0;

}



.gallery-banner p{

font-size:20px;

}









/* =========================
   INTRODUCTION
========================= */


.gallery-intro{

padding:80px 7% 30px;

}









/* =========================
   FILTRES
========================= */


.gallery-filter{

padding:30px 7%;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}



.filter-btn{

padding:12px 30px;

border-radius:50px;

background:white;

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

color:var(--green);

font-weight:600;

transition:.4s;

}



.filter-btn:hover,
.filter-btn.active{

background:var(--green);

color:white;

transform:translateY(-5px);

}









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


.gallery-container{

padding:50px 7% 100px;

}



.gallery-grid{

columns:3;

column-gap:30px;

}



.gallery-card{

position:relative;

overflow:hidden;

border-radius:25px;

margin-bottom:30px;

break-inside:avoid;

box-shadow:var(--shadow);

cursor:pointer;

}



.gallery-card img{

width:100%;

transition:.6s;

}



.gallery-card:hover img{

transform:scale(1.12);

}









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


.gallery-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
transparent,
rgba(0,0,0,.8)
);

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:30px;

opacity:0;

transition:.4s;

}



.gallery-card:hover .gallery-overlay{

opacity:1;

}



.gallery-overlay h3{

color:white;

font-family:'Playfair Display',serif;

font-size:25px;

margin-bottom:15px;

}



.open-gallery{

width:50px;

height:50px;

border-radius:50%;

background:white;

color:var(--green);

font-size:20px;

transition:.3s;

}



.open-gallery:hover{

background:var(--red);

color:white;

}









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


.lightbox{

position:fixed;

inset:0;

background:

rgba(0,0,0,.9);

display:none;

align-items:center;

justify-content:center;

z-index:2000;

padding:50px;

}



.lightbox.active{

display:flex;

}



.lightbox img{

max-width:90%;

max-height:90%;

object-fit:contain;

border-radius:20px;

animation:zoomImage .4s ease;

}



@keyframes zoomImage{

from{

transform:scale(.7);

opacity:0;

}


to{

transform:scale(1);

opacity:1;

}

}






.close-lightbox{

position:absolute;

top:30px;

right:40px;

color:white;

font-size:40px;

cursor:pointer;

transition:.3s;

}



.close-lightbox:hover{

color:var(--red);

transform:rotate(90deg);

}









/* =========================
   INSTAGRAM
========================= */


.instagram-section{

padding:100px 7%;

background:

linear-gradient(
135deg,
var(--green),
var(--dark-green)
);

color:white;

text-align:center;

}



.instagram-box i{

font-size:60px;

margin-bottom:20px;

}



.instagram-box h2{

font-family:'Playfair Display',serif;

font-size:45px;

}



.instagram-box p{

margin:20px 0;

font-size:18px;

}



.instagram-box a{

display:inline-block;

background:white;

color:var(--green);

padding:15px 35px;

border-radius:50px;

font-weight:600;

transition:.3s;

}



.instagram-box a:hover{

background:var(--red);

color:white;

}









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


@media(max-width:1100px){


.gallery-grid{

columns:2;

}


}



@media(max-width:700px){


.gallery-grid{

columns:1;

}



.gallery-banner h1{

font-size:45px;

}



.gallery-overlay{

opacity:1;

}


}

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

footer{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
    flex-wrap: wrap;
    text-align: center;
    padding: 60px 20px;
}

footer div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer h3,
footer h4{
    margin-bottom: 15px;
}

footer p,
footer a{
    text-align: center;
}

footer a{
    text-decoration: none;
    margin: 5px 0;
}

.copyright{
    text-align: center;
    padding: 20px;
}

.gallery-actions{

display:flex;

justify-content:center;

gap:15px;

margin-top:15px;

}

.gallery-actions button,
.gallery-actions a{

width:50px;

height:50px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:white;

color:#222;

border:none;

cursor:pointer;

text-decoration:none;

transition:.3s;

font-size:18px;

}

.gallery-actions button:hover,
.gallery-actions a:hover{

background:#0b8f45;

color:white;

transform:scale(1.1);

}

.download-lightbox{

margin-top:20px;

display:inline-flex;

align-items:center;

gap:10px;

padding:15px 25px;

background:#0b8f45;

color:white;

border-radius:30px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.download-lightbox:hover{

background:#087339;

transform:translateY(-2px);

}