body{
margin:0;
font-family:Segoe UI,Arial;
background:#f5f7fb;
color:#222
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 40px;
background:linear-gradient(90deg,#0a2540,#1b6ca8,#00a8cc);
color:#fff
}

.logo{
font-weight:700;
font-size:20px
}

nav a{
color:white;
margin:10px;
text-decoration:none;
font-weight:600
}

.hero{
background:linear-gradient(120deg,#1b6ca8,#00a8cc,#6a11cb);
color:white;
text-align:center;
padding:120px 20px;
position:relative;
z-index:1;
}
/* Mobile Hero Fix */

@media (max-width:768px){

.hero{
padding:80px 15px;
}

.hero h1{
font-size:26px;
line-height:1.3;
}

.hero p{
font-size:15px;
}

}
.section{
max-width:1200px;
margin:auto;
padding:60px 20px
}


.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px
}

.service-box{
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 12px 28px rgba(0,0,0,.1);
transition:.3s
}

.service-box:hover{
transform:scale(1.08)
}

.blogcard{
background:white;
padding:22px;
border-radius:10px;
margin-bottom:20px;
box-shadow:0 8px 18px rgba(0,0,0,.08)
}

.faq-item{
background:white;
margin-bottom:10px;
border-radius:8px
}

.faq-q{
padding:15px;
font-weight:700;
cursor:pointer
}

.faq-a{
padding:0 15px 15px 15px;
display:none
}

footer{
background:#0a2540;
color:white;
text-align:center;
padding:35px;
margin-top:60px
}

.whatsapp{
position:fixed;
bottom:25px;
right:25px;
background:#25d366;
color:white;
padding:15px 20px;
border-radius:30px;
text-decoration:none
}

input,textarea{
padding:10px;
width:100%;
max-width:420px
}

button{
padding:12px 22px;
background:#00a8cc;
color:white;
border:none;
border-radius:6px
}

/* Top Bar */

.topbar{
background:linear-gradient(90deg,#0d2f4f,#1fa3c6);
padding:15px 0;
color:white;
}

.container{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-weight:bold;
font-size:20px;
color:white;
}

.mainnav{
display:flex;
align-items:center;
}

.mainnav a{
color:white;
text-decoration:none;
margin-left:25px;
font-weight:500;
}

.mainnav a:hover{
opacity:0.8;
}

/* Footer */

.footer{
background:#0d2f4f;
color:white;
padding:25px 0;
margin-top:60px;
text-align:center;
}

.footnav a{
color:white;
margin:0 15px;
text-decoration:none;
}

/* ===== FIXED DROPDOWN ===== */

/* ===== DROPDOWN FIX ===== */

.dropdown{
position:relative;
display:inline-block;
padding-bottom:15px;   /* creates hover bridge */
}

.dropbtn{
color:white;
margin:0 14px;
cursor:pointer;
font-weight:600;
}

.dropdown-content{
display:none;
position:absolute;
background:#ffffff;
min-width:240px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
border-radius:8px;

top:100%;
left:0;

z-index:9999;
padding:8px 0;
}

.dropdown-content a{
display:block;
padding:12px 18px;
color:#333;
text-decoration:none;
font-size:14px;
}

.dropdown-content a:hover{
background:#f4f6fb;
}

/* keep dropdown open while moving mouse */

.dropdown:hover .dropdown-content{
display:block;
}
.dropdown-content{
max-height:400px;
overflow-y:auto;
}
/* ---------- MOBILE RESPONSIVE ---------- */

@media (max-width: 900px){

.hero{
padding:80px 15px;
}

.hero h1{
font-size:28px;
}

.section{
padding:40px 15px;
}

.container{
flex-direction:column;
text-align:center;
}

.mainnav{
margin-top:10px;
}

.mainnav a{
display:block;
margin:10px 0;
}

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

.service-box{
margin-bottom:20px;
}

}

/* ---------- SMALL MOBILE ---------- */

@media (max-width: 600px){

body{
font-size:15px;
}

.hero h1{
font-size:24px;
}

.hero p{
font-size:14px;
}

nav a{
display:block;
margin:8px 0;
}

.dropdown-content{
position:relative;
width:100%;
box-shadow:none;
}

.footer{
padding:20px 10px;
}

.footnav a{
display:block;
margin:6px 0;
}

.whatsapp{
bottom:15px;
right:15px;
padding:12px 16px;
font-size:14px;
}

}