/* =========================
GLOBAL RESET
========================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
margin:0;
padding:0;
overflow-x:hidden;
}

body{
font-family:Arial,Helvetica,sans-serif;
background:#f5f5f5;
color:#333;
line-height:1.6;
}

a{
text-decoration:none;
color:inherit;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* =========================
HEADER
========================= */
.site-header{
background:#f3b6b6;
padding:10px 0;
position:sticky;
top:0;
z-index:999;
}

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

/* LOGO */
.logo img{
height:45px;
max-width:200px;
object-fit:contain;
}

/* WHATSAPP */
.header-whatsapp{
display:flex;
gap:8px;
margin-left:20px;
}

.header-whatsapp a{
background:#128C7E;
color:#fff;
padding:6px 12px;
border-radius:6px;
font-size:14px;
font-weight:600;
white-space:nowrap;
}

/* DESKTOP NAV */
.desktop-nav a{
margin-left:20px;
font-weight:600;
color:#0b3c5d;
}

/* HAMBURGER */
.hamburger{
display:none;
font-size:26px;
cursor:pointer;
color:#0b3c5d;
}

/* =========================
MOBILE MENU
========================= */
.mobile-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.45);
z-index:998;
}

.mobile-overlay.show{
display:block;
}

.mobile-menu{
position:fixed;
top:0;
left:-70%;
width:70%;
height:100%;
background:#f3b6b6;
z-index:999;
padding-top:80px;
display:flex;
flex-direction:column;
transition:left .3s ease;
}

.mobile-menu.open{
left:0;
}

.mobile-menu a{
padding:15px 20px;
font-weight:600;
color:#0b3c5d;
border-bottom:1px solid #eee;
}

/* =========================
HERO BANNER
========================= */
.hero-banner{
width:100%;
max-width:1536px;
margin:auto;
overflow:hidden;
}

.hero-slide{
width:100%;
height:auto;
display:none;
}

.hero-slide.active{
display:block;
}

/* =========================
WHY US
========================= */
.why-us{
background:#f3b6b6;
color:#0b3c5d;
padding:20px 0;
}

.why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:15px;
text-align:center;
font-weight:600;
}

/* =========================
ABOUT
========================= */
.about-home{
background:#eef6ff;
padding:60px 0;
}

.about-home h2{
font-size:32px;
color:#0b3c5d;
margin-bottom:20px;
}

.about-home p{
font-size:16px;
line-height:1.8;
margin-bottom:15px;
text-align:justify;
}

/* =========================
SERVICES
========================= */
.services-home{
padding:60px 0;
background:#eef6ff;
}

.service-row{
display:flex;
align-items:center;
gap:35px;
margin-bottom:50px;
}

.service-text{flex:1;}
.service-img{flex:0 0 35%;}

.service-img img{
width:100%;
max-width:350px;
border-radius:8px;
box-shadow:0 0 15px rgba(0,0,0,0.15);
}

/* =========================
SERVICE DETAIL
========================= */
.service-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
align-items:flex-start;
}

.service-image img{
width:100%;
border-radius:6px;
box-shadow:0 0 15px rgba(0,0,0,0.15);
}

/* =========================
FOOTER
========================= */
.site-footer{
background:#0b3c5d;
color:#fff;
padding:50px 0 30px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.footer-bottom{
text-align:center;
margin-top:25px;
font-size:14px;
}

/* =========================
MOBILE RESPONSIVE FINAL
========================= */
@media (max-width:768px){

/* HEADER COMPACT */
.site-header{
padding:6px 0;
}

/* HEADER LAYOUT FIX */
.header-flex{
display:flex !important;
align-items:center;
justify-content:space-between;
flex-wrap:nowrap;
}

/* HAMBURGER LEFT */
.hamburger{
display:block;
margin-left:10px;
order:1;
}

/* LOGO FIX */
.logo{
order:2;
margin-left:10px;
margin-right:auto;
}

.logo img{
height:34px !important;
max-width:140px !important;
}

/* WHATSAPP RIGHT SIDE */
.header-whatsapp{
order:3;
display:flex;
flex-direction:column;
gap:5px;
margin-right:10px;
margin-left:0;
}

.header-whatsapp a{
font-size:12px;
padding:5px 10px;
}

/* DESKTOP NAV HIDE */
.desktop-nav{
display:none !important;
}

/* HERO FULL WIDTH */
.hero-banner{
margin:0;
padding:0;
}

.hero-slide{
width:100%;
display:none;
}

.hero-slide.active{
display:block;
}

/* SERVICES STACK */
.service-row{
flex-direction:column;
}

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

.footer-grid{
text-align:center;
}

}
/* ===============================
WHY-US MOBILE INLINE FIX
=============================== */
@media (max-width:768px){

    .why-grid{
        display:flex !important;
        justify-content:space-around;
        align-items:center;
        flex-wrap:nowrap !important;   /* ek line me rakhega */
        gap:8px;
    }

    .why-grid div{
        font-size:13px;
        white-space:nowrap;   /* line break band */
    }

    .why-us{
        padding:12px 0 !important;   /* pink area kam */
    }

}
/* =====================================================
   🔥 ULTRA PRO MOBILE HEADER (BIG COMPANY STYLE)
   SAFE UPGRADE – DESKTOP UNTOUCHED
===================================================== */

@media (max-width: 768px) {

    /* HEADER HEIGHT COMPACT */
    .site-header {
        padding: 8px 0 !important;
    }

    /* HEADER LAYOUT FIX */
    .header-flex {
        display: grid !important;
        grid-template-columns: auto auto 1fr !important;
        align-items: center !important;
        gap: 8px;
    }

    /* HAMBURGER LEFT */
    .hamburger {
        display: block !important;
        justify-self: start !important;
        margin-left: 6px;
        font-size: 26px;
    }

    /* LOGO LEFT (NOT CENTER) */
    .logo {
        justify-self: start !important;
    }

    .logo img {
        height: 34px !important;
        max-width: 120px !important;
        object-fit: contain;
    }

    /* WHATSAPP BUTTONS RIGHT SIDE */
    .header-whatsapp {
        width: auto !important;
        flex-direction: column;
        align-items: flex-end;
        margin: 0 !important;
        gap: 5px;
    }

    .header-whatsapp a {
        width: auto !important;
        font-size: 13px;
        padding: 6px 10px;
        white-space: nowrap;
    }

    /* HERO BANNER TOP GAP REMOVE */
    .hero-banner {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =====================================================
   WHY-US MOBILE ONE LINE FIX (NO EXTRA PINK AREA)
===================================================== */

@media (max-width: 768px){

    .why-grid{
        display:flex !important;
        justify-content:space-around;
        align-items:center;
        flex-wrap:nowrap !important;
        gap:8px;
        font-size:14px;
        padding:10px 6px;
        text-align:center;
    }

}
/* ===== HEADING DARK BLUE FIX ===== */

.about-home h3,
.services-home h2,
.service-text h3 {
    color: #0b3c5d !important;
}
/* =================================
   GLOBAL HEADING COLOR (ALL DEVICES)
   ================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0b3c5d !important;
}
/* ===== PERFECT TEXT JUSTIFY FIX ===== */

.about-home p,
.service-content p,
.service-text p {
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.8;
    word-spacing: normal;
    letter-spacing: normal;
}
/* ===== CLICKABLE SERVICE LINKS ===== */

.service-content a,
.service-text a {
    color: #0b3c5d;
    text-decoration: underline;
    font-weight: 600;
}

.service-content a:hover,
.service-text a:hover {
    color: #06304a;
}
/* ===== CTA BOX FIX ===== */
.cta-strip{
    background:#f3b6b6;
    padding:25px 15px;
    margin:25px 0;
    border-radius:8px;
    text-align:center;
}
/* CTA & FOOTER GAP REMOVE */
.cta-strip{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.site-footer{
    margin-top: 0 !important;
}
/* CTA HEIGHT INCREASE */
.cta-strip{
    padding-top: 35px !important;
    padding-bottom: 35px !important;
}