body{
margin:0;
font-family:Arial;
background:#f4f6fb;
}

h1,h2,h3{
color:#2196f3;
}

.header{
position:fixed;
top:0;
width:100%;
background:#0d47a1;
color:white;
z-index:1000;
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
max-width:1200px;
margin:auto;
padding:10px 15px;
}

.logo{
display:flex;
align-items:center;
gap:10px;
}

nav{
flex:1;
text-align:center;
}

.menu{
display:flex;
justify-content:center;
gap:20px;
list-style:none;
}

.menu a{
color:white;
text-decoration:none;
padding:8px 18px;
border-radius:25px;
}

.menu a:hover{
background:#2196f3;
}

/* BURGER */

.burger{
display:none;
flex-direction:column;
cursor:pointer;
margin-left:20px;
}

.burger span{
width:25px;
height:3px;
background:white;
margin:4px;
transition:.4s;
}

.burger.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.burger.active span:nth-child(2){
opacity:0;
}

.burger.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

/* LAYOUT */


.info-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.info-box{
background:#e3f2fd;
padding:15px;
}




.layout{
display:flex;
gap:20px;
max-width:1200px;
margin:auto;
padding-top:120px;
}

.content{
flex:3;
background:white;
padding:20px;
}

.sidebar{
flex:1;
}

.widget{
background:white;
padding:15px;
margin-bottom:20px;
}

.sidebar-slider img{
width:100%;
display:none;
}

/* GALLERY */

.gallery{
padding:40px;
text-align:center;
}

.gallery-track{
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;
}

.gallery-track img{
width:120px;
max-width:30vw;
cursor:pointer;
border-radius:6px;
}

/* LIGHTBOX */

#lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
justify-content:center;
align-items:center;
}

#lightbox img{
max-width:90%;
max-height:90%;
cursor:pointer;
}

/* MESSAGE BUTTON */

.contact-container{
text-align:center;
margin:40px;
}

.contact-btn{
background:#2196f3;
color:white;
border:none;
padding:14px 26px;
border-radius:30px;
cursor:pointer;
}

/* POPUP FORM */

.popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
justify-content:center;
align-items:center;
z-index:2000;
}

.popup-box{
background:white;
padding:30px;
border-radius:12px;
width:320px;
position:relative;
}

.popup-close{
position:absolute;
top:10px;
right:12px;
font-size:22px;
cursor:pointer;
}

.popup-box input,
.popup-box textarea{
width:100%;
padding:10px;
margin-bottom:10px;
border-radius:10px;
border:1px solid #ccc;
}

.send-btn{
background:#2196f3;
color:white;
border:none;
padding:10px;
border-radius:10px;
cursor:pointer;
}

/* FOOTER */

.footer-columns{
display:grid;
grid-template-columns:repeat(4,1fr);
background:#1c1c1c;
color:white;
padding:40px;
}

.footer-bottom{
background:#111;
color:white;
text-align:center;
padding:10px;
}

/* SCROLL */

#scrollTop{
position:fixed;
bottom:20px;
left:20px;
width:28px;
height:28px;
display:none;
cursor:pointer;
}

.arrow{
background:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#2196f3;
width:28px;
height:28px;
}

/* MOBILE */

@media(max-width:800px){

.menu{
flex-direction:column;
position:absolute;
top:70px;
left:0;
right:0;
background:#0d47a1;
display:none;
}

.menu.open{
display:flex;
}

.burger{
display:flex;
}

.layout{
flex-direction:column;
}

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

}

@media(max-width:600px){

.gallery-track img{
width:28vw;
}

}