*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

/* NAVBAR */

/* NAVBAR */

header{
background:white;
padding:5px 6%;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
position:fixed;
width:100%;
top:0px;
z-index:1000;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:28px;
font-weight:700;
color:#0B1F3A;
}

.menu-icon{
font-size:30px;
cursor:pointer;
}

/* MOBILE MENU */

.mobile-menu{
position:fixed;
top:0;
right:-100%;
width:70%;
height:100%;
background:rgba(255,255,255,0.95);
padding:80px 35px;
transition:0.4s;
z-index:999;
}

.mobile-menu.active{
right:0;
}

.mobile-menu ul{
list-style:none;
}

.mobile-menu li{
margin-bottom:35px;
font-size:22px;
font-weight:500;
}

.mobile-menu a{
text-decoration:none;
color:#333;
}

.close-menu{
font-size:28px;
position:absolute;
top:20px;
right:25px;
cursor:pointer;
}

/* GALERI */

.galeri{
padding:60px 6%;
background:#f5f7fb;
}

.judul{
text-align:center;
font-size:34px;
margin-bottom:35px;
color:#0B1F3A;
}

.filter{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-bottom:35px;
}

.filter button{
padding:10px 18px;
border:none;
border-radius:25px;
background:#e6e6e6;
cursor:pointer;
font-size:14px;
}

.filter button.active{
background:#0B1F3A;
color:white;
}

/* GRID GALERI */

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

.item img{
width:100%;
border-radius:16px;
display:block;
transition:0.4s;
cursor:pointer;
}

.item img:hover{
transform:scale(1.05);
}

/* CTA */

.cta{
background:#0B1F3A;
color:white;
text-align:center;
padding:70px 20px;
}

.cta h2{
font-size:30px;
margin-bottom:10px;
}

.cta p{
margin-bottom:25px;
}

.cta button{
background:#2ecc71;
border:none;
padding:14px 35px;
border-radius:30px;
font-size:16px;
color:white;
}

/* FOOTER */

footer{
background:#0B1F3A;
color:white;
padding:60px 6%;
}

.footer-grid{
display:grid;
gap:35px;
}

.footer-title{
font-size:22px;
margin-bottom:12px;
}

.footer-menu{
list-style:none;
}

.footer-menu li{
margin-bottom:8px;
}

.social{
margin-top:12px;
display:flex;
gap:15px;
font-size:22px;
}

.copyright{
border-top:1px solid rgba(255,255,255,0.2);
margin-top:40px;
padding-top:20px;
text-align:center;
font-size:14px;
}

/* FLOATING BUTTON */

.whatsapp{
position:fixed;
right:20px;
bottom:30px;
background:#2ecc71;
color:white;
padding:14px 24px;
border-radius:40px;
font-weight:600;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* IMAGE MODAL ZOOM */

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

.modal img{
max-width:90%;
max-height:90%;
border-radius:10px;
}

.modal.active{
display:flex;
}

.close{
position:absolute;
top:30px;
right:30px;
font-size:35px;
color:white;
cursor:pointer;
}
:root{

--primary:#0f172a;
--secondary:#1e293b;
--accent:#f59e0b;
--light:#f8fafc;
--text:#334155;

}

body{
font-family:'Poppins',sans-serif;
background:var(--light);
color:var(--text);
margin:0;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 8%;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.logo{
font-weight:700;
font-size:22px;
color:var(--primary);
}

.header{
text-align:center;
padding:80px 20px;
background:linear-gradient(135deg,#0f172a,#1e293b);
color:white;
}

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
padding:60px 8%;
}

.service-card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
text-align:center;
}

.service-icon{
font-size:40px;
margin-bottom:15px;
}

.service-btn{
display:inline-block;
margin-top:10px;
padding:8px 18px;
background:var(--accent);
color:white;
border-radius:5px;
text-decoration:none;
}
.seo-content{
padding:60px 20px;
background:#f7f7f7;
}