/* GLOBAL RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

body{
overflow-x:hidden;
}

/* ================= NAVBAR ================= */

.main-header{
background:linear-gradient(90deg,#001f3f,#004c99);
padding:15px 40px;
}

.nav-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}

.nav-logo{
height:65px;
width:auto;
border-radius:8px;
}

.nav-menu{
list-style:none;
display:flex;
gap:30px;
}

.nav-menu a{
text-decoration:none;
color:#fff;
font-weight:600;
transition:.3s;
}

.nav-menu a:hover,
.nav-menu .active{
color:#ffd633;
}

/* ================= GALLERY ================= */

.gallery-section{
padding:60px 20px;
text-align:center;
}

.gallery-section h1{
font-size:32px;
margin-bottom:35px;
}

/* GRID */

.gallery-grid{
max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

/* IMAGE CARD */

.gallery-item{
overflow:hidden;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.gallery-item img{
width:100%;
height:250px;
object-fit:cover;
transition:transform .4s ease;
cursor:pointer;
}

.gallery-item img:hover{
transform:scale(1.1);
}

/* ================= FOOTER ================= */

.footer{
background:#1f1f1f;
padding:40px 20px;
color:#ddd;
}

.footer-container{
max-width:1200px;
margin:auto;
display:flex;
gap:60px;
flex-wrap:wrap;
}

.footer-about{
flex:1.5;
max-width:400px;
}

.logo{
display:flex;
align-items:center;
font-size:22px;
color:#fff;
margin-bottom:15px;
}

.logo i{
color:#d32f2f;
margin-right:10px;
font-size:28px;
}

.footer-about p{
line-height:1.6;
color:#bbb;
margin-bottom:20px;
}

.social-icons a{
background:#2c2c2c;
color:#bbb;
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:6px;
margin-right:10px;
text-decoration:none;
transition:.3s;
}

.social-icons a:hover{
background:#d32f2f;
color:#fff;
}

/* LINKS */

.footer-links{
flex:2;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

.links-section ul{
list-style:none;
}

.links-section ul li{
margin-bottom:10px;
}

.links-section a{
color:#ddd;
text-decoration:none;
}

.links-section a:hover{
color:#d32f2f;
}

/* FOOTER BOTTOM */

.footer-bottom{
border-top:1px solid #333;
max-width:1200px;
margin:30px auto 0;
padding-top:15px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
font-size:13px;
}

/* ================= RESPONSIVE ================= */

/* Tablet */

@media(max-width:1024px){

.gallery-grid{
grid-template-columns:repeat(3,1fr);
}

}

/* Mobile */

@media(max-width:768px){

.gallery-grid{
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.gallery-item img{
height:200px;
}

.nav-container{
    display: flex;
flex-direction:row;
align-items:flex-start;
justify-content: center;
}

.nav-menu{
flex-direction:row;
gap:10px;
font-size: 9px;
margin-top:10px;
}

}

/* Small Mobile */

@media(max-width:480px){

.gallery-grid{
grid-template-columns:repeat(2,1fr);
}

.gallery-item img{
height:160px;
}

}