*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height:1.6;
color:#222;
background:#f8f8fc;
}

/* =========================
HEADER
========================= */

header{
background:#000;
color:#fff;
padding:60px 20px;
text-align:center;
}

#logo{
width:350px;
max-width:100%;
height:auto;
border-radius:12px;
margin-bottom:25px;
box-shadow:0 4px 15px rgba(255,255,255,.1);
}

h1{
color:#fff;
font-size:2.7rem;
font-weight:700;
margin-bottom:15px;
}

header p{
color:#f5f5f5;
font-style:italic;
font-size:1.1rem;
margin-bottom:25px;
}

.hero-text{
color:#fff;
margin-top:20px;
font-weight:600;
}

/* =========================
BUTTONS
========================= */

.btn{
display:inline-block;
margin:10px;
padding:14px 22px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
transition:.3s ease;
}

.btn-call{
background:#0b3d91;
color:#fffefe;
}

.btn:hover{
    color: #000;
}

.btn-whatsapp {
    background-color: #25D366  !important;
    color: #fffdfd!important;
    cursor: pointer;
}
.btn-whatsapp:hover{
opacity:.9;
}

/* =========================
SECTIONS
========================= */

section{
max-width:1200px;
margin:40px auto;
padding:30px;
background:#fff;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,.08);
}

section h2{
text-align:center;
margin-bottom:25px;
color:#000;
}

/* =========================
ABOUT SECTION
========================= */

.abt{
display:flex;
gap:30px;
align-items:stretch;
}

.para,
.mm{
flex:1;
}

.para{
background:#f8f8f8;
padding:25px;
border-radius:10px;
}

.mm img{
width:100%;
height:100%;
object-fit:cover;
border-radius:10px;
}

/* =========================
SERVICES
========================= */

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

.card{
background:#5f5f5f;
color:#fff;
padding:20px;
border-radius:10px;
border-left:5px solid #0b3d91;
box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.card h3{
color:#ffffff;
margin-bottom:10px;
text-decoration: underline;
}

.card p{
color:#fff;
}

/* =========================
WHY CHOOSE US
========================= */

.why-us{
display:flex;
gap:30px;
flex-wrap:wrap;
margin-top:40px;
}

.cards{
flex:1;
min-width:300px;
background:#fff;
padding:30px;
border-radius:12px;
box-shadow:0 4px 15px rgba(0,0,0,.1);
border-top:5px solid #0b3d91;
}

.cards h2{
text-align:center;
}

.cards ul{
list-style:none;
padding:0;
}

.cards li{
padding:12px 0;
border-bottom:1px solid #eee;
}

.cards li:last-child{
border-bottom:none;
}

.cards li::before{
content:"✓ ";
color:#25D366;
font-weight:bold;
}

/* =========================
IMAGE GALLERY
========================= */

.pics{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.pics img{
width:320px;
height:260px;
object-fit:cover;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,.15);
}

/* =========================
CTA SECTION
========================= */

.cta{
background:#0b3d91;
text-align:center;
}

.cta h2,
.cta p{
color:#fff;
}

/* =========================
CONTACT SECTION
========================= */

.cntt{
width:100%;
background:#000;
padding:60px 20px;
display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;
}

.box{
flex:1;
min-width:300px;
max-width:550px;
background:#fff;
padding:25px;
border-radius:12px;
}

.box h2{
color:#0b3d91;
margin-bottom:20px;
}

.contact p,
.process li{
margin-bottom:12px;
}

.contact a{
color:#0b3d91;
text-decoration:none;
}

.contact a:hover{
text-decoration:underline;
}

.process ol{
padding-left:20px;
}

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

footer{
background:#111;
color:#aaa;
text-align:center;
padding:25px;
font-size:.95rem;
}

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

@media (max-width:768px){


header{
    padding:40px 15px;
}

#logo{
    width:220px;
}

h1{
    font-size:1.8rem;
}

header p{
    font-size:1rem;
}

.btn{
    display:block;
    width:90%;
    max-width:300px;
    margin:10px auto;
    text-align:center;
}

.abt{
    flex-direction:column;
}

.para,
.mm{
    width:100%;
}

.mm img{
    height:300px;
}

.why-us{
    flex-direction:column;
}

.cntt{
    flex-direction:column;
    padding:40px 15px;
}

.pics img{
    width:100%;
    max-width:360px;
    height:240px;
}

#spic{
    display:none;
}

section{
    margin:20px 10px;
    padding:20px;
}



}