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

body{
background:#f4f6f9;
}

/* HEADER */

header{
background:#0057c8;
height:90px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 60px;
color:white;
}

.logo{
font-size:30px;
font-weight:bold;
}

nav a{
color:white;
text-decoration:none;
margin-left:35px;
font-size:18px;
}


/* HERO VIDEO */

.hero-video{
height:620px;
width:100%;
position:relative;
overflow:hidden;
display:flex;
align-items:center;
}

.hero-video video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
transition:.5s;
}

.hero-video::after{
content:"";
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.55);
z-index:2;
}

.hero-content{
position:relative;
z-index:3;
color:white;
margin-left:70px;
max-width:900px;
}

.hero-content h1{
font-size:60px;
font-weight:800;
margin-bottom:20px;
}

.hero-content h2{
font-size:35px;
margin-bottom:20px;
}

.hero-content p{
font-size:20px;
margin-bottom:25px;
}


.btn{
background:#ffc107;
padding:18px 45px;
border-radius:50px;
color:#000;
text-decoration:none;
display:inline-block;
font-size:18px;
}


/* VIDEO BUTTON */

.prev,.next{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:5;
font-size:45px;
background:rgba(0,0,0,.3);
border:none;
color:white;
height:60px;
width:60px;
border-radius:50%;
cursor:pointer;
}

.prev{
left:20px;
}

.next{
right:20px;
}


/* SERVICES */

section{
padding:60px;
}

section h1{
text-align:center;
font-size:40px;
margin-bottom:40px;
}


.card{
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 0 15px #ccc;
margin:20px;
}


/* WHATSAPP BUTTON */

.whatsapp{
position:fixed;
right:30px;
bottom:30px;
background:green;
color:white;
padding:18px 30px;
border-radius:40px;
text-decoration:none;
z-index:20;
}


/* MOBILE */

@media(max-width:768px){

header{
padding:20px;
height:auto;
display:block;
}

nav a{
display:inline-block;
margin:10px;
}

.hero-video{
height:550px;
}

.hero-content{
margin-left:25px;
}

.hero-content h1{
font-size:35px;
}

.hero-content h2{
font-size:24px;
}

}

.services{
padding:70px;
background:white;
}

.services h1{
font-size:45px;
text-align:center;
margin-bottom:50px;
}

.service-box{
display:flex;
justify-content:center;
gap:35px;
}

.service-card{
width:350px;
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 5px 25px #bbb;
transition:.4s;
}

.service-card:hover{
transform:translateY(-15px);
}

.service-card img{
width:100%;
height:230px;
object-fit:cover;
}

.service-card h2{
padding:20px;
font-size:25px;
}

.service-card p{
padding:0 20px 25px;
font-size:17px;
}


/* mobile */

@media(max-width:768px){

.service-box{
display:block;
}

.service-card{
width:100%;
margin-bottom:25px;
}

}

/* SERVICE SECTION FIX */

.services{
    padding:50px 60px;
    text-align:center;
    background:#f1f1f1;
}

.services h1{
    font-size:40px;
    margin-bottom:40px;
}

.service-box{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

.service-card{
    width:330px;
    background:white;
    border-radius:15px;
    overflow:hidden;
    text-decoration:none;
    color:black;
    box-shadow:0 5px 20px #aaa;
    transition:0.3s;
    display:block;
}

.service-card:hover{
    transform:translateY(-10px);
}

.service-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.service-card h2{
    padding:15px 10px 5px;
    font-size:24px;
}

.service-card p{
    padding:0 15px 20px;
    font-size:16px;
}

/* FINAL SERVICE FIX */

.services .service-box{
display:flex !important;
justify-content:center !important;
gap:30px !important;
flex-wrap:wrap !important;
}

.services .service-card{
width:320px !important;
background:white !important;
border-radius:15px !important;
overflow:hidden !important;
display:block !important;
text-decoration:none !important;
box-shadow:0 5px 20px #999 !important;
}

.services .service-card img{
width:320px !important;
height:220px !important;
object-fit:cover !important;
display:block !important;
}

.services .service-card h2{
font-size:22px !important;
color:#000 !important;
padding:15px !important;
}

.services .service-card p{
font-size:15px !important;
color:#333 !important;
padding:0 15px 20px !important;
}

.why{
padding:60px 20px;
text-align:center;
background:#f1f1f1;
}

.why h1{
font-size:38px;
margin-bottom:35px;
}

.why-box{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
}

.why-card{
width:260px;
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 5px 20px #999;
transition:.3s;
}

.why-card:hover{
transform:translateY(-10px);
}

.why-card h2{
font-size:22px;
color:#0057c8;
}

.why-card p{
font-size:16px;
color:#333;
}

/* WHY HEADING PREMIUM LOOK */

.why h1{
display:inline-block !important;
background:linear-gradient(135deg,#0057c8,#00b4ff) !important;
color:white !important;
padding:18px 45px !important;
border-radius:50px !important;
font-size:38px !important;
font-weight:900 !important;
letter-spacing:1px !important;
box-shadow:0 8px 25px #777 !important;
margin-bottom:50px !important;
}

/* MOBILE RESPONSIVE FIX */

@media(max-width:768px){

header{
height:auto !important;
padding:15px 20px !important;
display:block !important;
text-align:center !important;
}

.logo{
font-size:24px !important;
}

nav{
margin-top:15px !important;
}

nav a{
display:block !important;
margin:10px 0 !important;
font-size:18px !important;
}


/* HERO */
.hero{
height:500px !important;
padding:20px !important;
text-align:center !important;
}

.hero h1{
font-size:35px !important;
}

.hero h2{
font-size:22px !important;
}


/* SERVICE MOBILE */

.services .service-box{
display:block !important;
}

.services .service-card{
width:90% !important;
margin:25px auto !important;
}

.services .service-card img{
width:100% !important;
height:220px !important;
object-fit:cover !important;
}


/* WHY MOBILE */

.why h1{
font-size:24px !important;
padding:15px 25px !important;
}

.why-box{
display:block !important;
}

.why-card{
width:90% !important;
margin:25px auto !important;
}


/* PROJECT MOBILE */

.project-box{
display:block !important;
}

.project-box img{
width:90% !important;
height:220px !important;
margin:15px auto !important;
}

}

/* FINAL MOBILE FULL FIX */

@media(max-width:768px){

html,body{
width:100% !important;
overflow-x:hidden !important;
}

/* SERVICE FIX */

.services{
padding:40px 10px !important;
}

.service-box{
width:100% !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:25px !important;
}

.service-card{
width:92% !important;
max-width:350px !important;
margin:0 auto !important;
}

.service-card img{
width:100% !important;
height:200px !important;
object-fit:cover !important;
}


/* WHY CHOOSE FIX */

.why{
padding:40px 10px !important;
}

.why h1{
width:90% !important;
font-size:22px !important;
padding:15px !important;
}

.why-box{
width:100% !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:20px !important;
}

.why-card{
width:90% !important;
max-width:330px !important;
margin:0 !important;
}


/* ALL IMAGE CONTROL */

img{
max-width:100% !important;
}

}

/* MOBILE FORCE FIX */

@media only screen and (max-width:768px){

*{
max-width:100% !important;
}

body{
overflow-x:hidden !important;
}

/* OUR SERVICE CARD FORCE */

.service-box,
.services .service-box{
display:flex !important;
flex-direction:column !important;
width:100% !important;
padding:0 !important;
}

.service-card,
.services .service-card{
width:90% !important;
max-width:90% !important;
margin:20px auto !important;
display:block !important;
}

.service-card img,
.services img{
width:100% !important;
height:200px !important;
object-fit:cover !important;
}


/* WHY CHOOSE FORCE */

.why-box{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
}

.why-card{
width:90% !important;
max-width:90% !important;
margin:15px auto !important;
}

.why h1{
font-size:22px !important;
width:auto !important;
}

}

/* CUSTOMER REVIEW */

.reviews{
padding:70px 20px;
background:#f7f9ff;
text-align:center;
}

.reviews h1{
display:inline-block;
background:linear-gradient(135deg,#0057c8,#00b4ff);
color:white;
padding:15px 45px;
border-radius:50px;
font-size:38px;
margin-bottom:50px;
}

.review-box{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.review-card{
width:320px;
background:white;
padding:30px;
border-radius:20px;
box-shadow:0 5px 25px #aaa;
transition:.3s;
}

.review-card:hover{
transform:translateY(-10px);
}

.review-card p{
font-size:17px;
line-height:28px;
}

.review-card h3{
margin-top:20px;
color:#0057c8;
}


/* MOBILE REVIEW */

@media(max-width:768px){

.review-card{
width:90%;
}

.reviews h1{
font-size:25px;
}

}

.review-form{
width:400px;
max-width:90%;
margin:20px auto;
background:white;
padding:25px;
border-radius:20px;
box-shadow:0 5px 20px #999;
}

.review-form input,
.review-form select,
.review-form textarea{
width:100%;
padding:12px;
margin:10px 0;
border-radius:10px;
border:1px solid #aaa;
font-size:16px;
}

.review-form textarea{
height:100px;
}

.review-form button{
background:#0057c8;
color:white;
border:0;
padding:15px 30px;
border-radius:30px;
font-size:18px;
cursor:pointer;
}

.review-form button:hover{
background:#003b8f;
}

/* PROJECT GALLERY */

.projects{
padding:60px 20px;
background:#f1f6ff;
text-align:center;
}

.projects h1{
display:inline-block;
background:linear-gradient(45deg,#0057c8,#00c6ff);
color:white;
padding:20px 50px;
border-radius:50px;
font-size:42px;
box-shadow:0 10px 25px #777;
margin-bottom:50px;
}

.project-box{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.project-card{
width:330px;
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 25px #999;
transition:.4s;
}

.project-card:hover{
transform:translateY(-10px);
}

.project-card img{
width:100%;
height:230px;
object-fit:cover;
}

.project-card h2{
font-size:24px;
color:#0057c8;
padding:15px;
}

.project-card p{
padding:0 15px 25px;
font-size:16px;
}


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

.projects h1{
font-size:28px;
padding:15px 25px;
}

.project-card{
width:95%;
}

.project-card img{
height:220px;
}

}

/* PROJECT IMAGE SIZE FIX */

.projects .project-box{
display:flex !important;
justify-content:center !important;
gap:30px !important;
flex-wrap:wrap !important;
}

.projects .project-card{
width:320px !important;
height:auto !important;
background:white !important;
border-radius:20px !important;
overflow:hidden !important;
box-shadow:0 8px 25px #999 !important;
}

.projects .project-card img{
width:100% !important;
height:220px !important;
object-fit:cover !important;
display:block !important;
}

@media(max-width:768px){

.projects .project-card{
width:90% !important;
}

.projects .project-card img{
height:200px !important;
}

}

/* GALLERY FINAL FIX */

section.projects img{
width:100% !important;
height:220px !important;
max-width:100% !important;
object-fit:cover !important;
}

section.projects .project-card{
width:320px !important;
max-width:320px !important;
overflow:hidden !important;
border-radius:18px !important;
background:#fff !important;
}

section.projects .project-box{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
}


/* MOBILE FIX */
@media(max-width:768px){

section.projects .project-card{
width:90% !important;
max-width:90% !important;
}

section.projects img{
height:200px !important;
}

}

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

.top-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
background:#fff;
box-shadow:0 5px 20px rgba(0,0,0,.08);
position:sticky;
top:0;
z-index:9999;
}

.logo{
width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
border:3px solid #0d6efd;
}

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

.company h2{
font-size:30px;
margin:0;
color:#0d47a1;
}

.company p{
margin:0;
color:#666;
font-size:14px;
}

.nav-menu{
display:flex;
align-items:center;
gap:25px;
list-style:none;
}

.nav-menu a{
text-decoration:none;
font-weight:600;
color:#222;
transition:.3s;
}

.nav-menu a:hover{
color:#0d6efd;
}

.dropdown{
position:relative;
}

.submenu{
display:none;
position:absolute;
top:45px;
left:0;
background:#fff;
width:250px;
box-shadow:0 10px 30px rgba(0,0,0,.15);
border-radius:10px;
padding:10px 0;
}

.dropdown:hover .submenu{
display:block;
}

.submenu li{
padding:12px 20px;
list-style:none;
}

.call-btn{
background:#0d6efd;
color:#fff!important;
padding:12px 24px;
border-radius:40px;
}

.menu-toggle{
display:none;
}

@media(max-width:768px){

.menu-toggle{
display:block;
font-size:30px;
background:none;
border:0;
}

.nav-menu{
display:none;
flex-direction:column;
width:100%;
margin-top:20px;
}

.nav-menu.active{
display:flex;
}

.top-header{
flex-wrap:wrap;
}

}
/* ===== PREMIUM HEADER V2 ===== */

.top-header{
position:fixed;
top:0;
left:0;
width:100%;
height:85px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 55px;
background:rgba(255,255,255,.96);
backdrop-filter:blur(12px);
box-shadow:0 10px 30px rgba(0,0,0,.08);
z-index:99999;
transition:.35s;
}

body{
padding-top:85px;
}

.logo{
width:65px;
height:65px;
border-radius:50%;
border:3px solid #0d6efd;
}

.company h2{
font-size:30px;
font-weight:800;
color:#003b8f;
}

.company p{
font-size:14px;
color:#777;
}

.nav-menu{
display:flex;
gap:28px;
list-style:none;
align-items:center;
}

.nav-menu li{
list-style:none;
}

.nav-menu a{
font-size:16px;
font-weight:700;
color:#222;
text-decoration:none;
position:relative;
transition:.3s;
}

.nav-menu a:after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:3px;
background:#0d6efd;
transition:.3s;
}

.nav-menu a:hover:after{
width:100%;
}

.call-btn{
background:linear-gradient(135deg,#0057ff,#0099ff);
padding:13px 24px;
border-radius:40px;
color:#fff!important;
box-shadow:0 10px 25px rgba(13,110,253,.35);
}

.call-btn:hover{
transform:translateY(-3px);
}

@media(max-width:768px){

.top-header{
padding:15px;
height:auto;
}

.company{
display:none;
}

.nav-menu{
display:none;
width:100%;
flex-direction:column;
padding-top:20px;
}

.nav-menu.active{
display:flex;
}

.menu-toggle{
display:block;
font-size:30px;
border:none;
background:none;
cursor:pointer;
}

}

/* ===== PREMIUM HERO ===== */

.hero-banner{
position:relative;
height:520px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.hero-banner img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.45);
transform:scale(1.08);
}

.hero-banner::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,
rgba(0,25,60,.75),
rgba(0,0,0,.35));
}

.hero-text{
position:relative;
z-index:5;
color:#fff;
text-align:center;
max-width:900px;
padding:20px;
}

.hero-text h1{
font-size:60px;
font-weight:800;
margin-bottom:20px;
}

.hero-text p{
font-size:22px;
line-height:38px;
margin-bottom:35px;
}

.hero-btn{
display:inline-block;
padding:18px 45px;
background:#ffb400;
color:#111;
font-weight:bold;
text-decoration:none;
border-radius:50px;
transition:.35s;
}

.hero-btn:hover{
transform:translateY(-5px);
box-shadow:0 20px 40px rgba(255,180,0,.35);
}

/*==========================
ABOUT PREMIUM HERO
===========================*/

.about-hero{
position:relative;
height:620px;
overflow:hidden;
display:flex;
align-items:center;
}

.about-bg{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.08);
}

.about-overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(0,32,75,.88),
rgba(0,0,0,.45)
);
}

.about-content{
position:relative;
z-index:5;
max-width:700px;
margin-left:8%;
color:#fff;
}

.about-tag{

display:inline-block;
background:#ffb400;
padding:10px 22px;
border-radius:40px;
font-weight:700;
color:#111;
margin-bottom:25px;

}

.about-content h1{

font-size:68px;
line-height:78px;
margin-bottom:25px;
font-weight:900;

}

.about-content p{

font-size:22px;
line-height:38px;
color:#f2f2f2;
margin-bottom:35px;

}

.hero-btn{

display:inline-block;
padding:18px 42px;
background:#0d6efd;
color:#fff;
text-decoration:none;
font-size:18px;
font-weight:bold;
border-radius:50px;
transition:.35s;

}

.hero-btn:hover{

background:#0047d4;
transform:translateY(-5px);

}

@media(max-width:768px){

.about-hero{

height:520px;

}

.about-content{

margin:25px;

}

.about-content h1{

font-size:42px;
line-height:50px;

}

.about-content p{

font-size:18px;
line-height:30px;

}

}

/* =================================================
   SKY HOME SOLUTIONS - FINAL PREMIUM RESPONSIVE FIX
   ================================================= */

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding-top:85px;
    background:#f5f8fc;
    overflow-x:hidden;
}

/* ---------- PREMIUM HEADER ---------- */

.top-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:85px !important;
    padding:8px 45px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:rgba(255,255,255,.97) !important;
    backdrop-filter:blur(15px);
    box-shadow:0 5px 25px rgba(0,0,0,.10) !important;
    z-index:99999 !important;
}

.logo-area{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
}

.logo{
    width:64px !important;
    height:64px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    border:3px solid #0d6efd !important;
}

.company h2{
    margin:0 !important;
    font-size:27px !important;
    font-weight:900 !important;
    color:#003b8f !important;
    letter-spacing:.3px;
}

.company p{
    margin:2px 0 0 !important;
    font-size:11px !important;
    color:#777 !important;
}

/* ---------- NAVIGATION ---------- */

.nav-menu{
    display:flex !important;
    align-items:center !important;
    gap:25px !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
}

.nav-menu li{
    list-style:none !important;
}

.nav-menu a{
    position:relative;
    text-decoration:none !important;
    color:#222 !important;
    font-size:14px !important;
    font-weight:700 !important;
    white-space:nowrap;
}

.nav-menu a:hover{
    color:#0d6efd !important;
}

.nav-menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-7px;
    width:0;
    height:2px;
    background:#0d6efd;
    transition:.3s;
}

.nav-menu a:hover::after{
    width:100%;
}

.call-btn{
    background:linear-gradient(135deg,#0057ff,#00a2ff) !important;
    color:#fff !important;
    padding:12px 22px !important;
    border-radius:30px !important;
    box-shadow:0 7px 20px rgba(13,110,253,.30);
}

/* ---------- SERVICES ---------- */

.services{
    padding:65px 30px !important;
    background:#f5f8fc !important;
    text-align:center !important;
}

.services h1{
    font-size:38px !important;
    font-weight:900 !important;
    margin-bottom:40px !important;
    color:#082b59 !important;
}

.service-box{
    display:flex !important;
    justify-content:center !important;
    align-items:stretch !important;
    gap:28px !important;
    flex-wrap:wrap !important;
}

.service-card{
    width:320px !important;
    max-width:320px !important;
    margin:0 !important;
    background:#fff !important;
    border-radius:18px !important;
    overflow:hidden !important;
    text-decoration:none !important;
    color:#111 !important;
    box-shadow:0 10px 30px rgba(0,0,0,.12) !important;
    transition:.35s ease !important;
}

.service-card:hover{
    transform:translateY(-10px) !important;
    box-shadow:0 18px 40px rgba(0,87,200,.20) !important;
}

.service-card img{
    width:100% !important;
    height:210px !important;
    display:block !important;
    object-fit:cover !important;
}

.service-card h2{
    margin:0 !important;
    padding:18px 15px 8px !important;
    font-size:21px !important;
    color:#003b8f !important;
}

.service-card p{
    margin:0 !important;
    padding:0 18px 22px !important;
    font-size:14px !important;
    line-height:22px !important;
    color:#555 !important;
}

/* ---------- WHY CHOOSE ---------- */

.why{
    padding:65px 25px !important;
    background:#fff !important;
    text-align:center !important;
}

.why h1{
    display:inline-block !important;
    margin:0 0 45px !important;
    padding:15px 35px !important;
    border-radius:50px !important;
    background:linear-gradient(135deg,#0057c8,#00a8ff) !important;
    color:#fff !important;
    font-size:32px !important;
    font-weight:900 !important;
    box-shadow:0 10px 30px rgba(0,87,200,.25) !important;
}

.why-box{
    display:flex !important;
    justify-content:center !important;
    gap:25px !important;
    flex-wrap:wrap !important;
}

.why-card{
    width:250px !important;
    margin:0 !important;
    padding:28px 22px !important;
    background:#fff !important;
    border-radius:18px !important;
    box-shadow:0 8px 25px rgba(0,0,0,.10) !important;
}

.why-card h2{
    color:#0057c8 !important;
}

/* ---------- PROJECTS ---------- */

.projects{
    padding:65px 25px !important;
    background:#f1f6ff !important;
    text-align:center !important;
}

.projects h1{
    font-size:36px !important;
}

.project-box{
    display:flex !important;
    justify-content:center !important;
    gap:28px !important;
    flex-wrap:wrap !important;
}

.project-card{
    width:320px !important;
    max-width:320px !important;
    margin:0 !important;
}

/* ---------- WHATSAPP ---------- */

.whatsapp{
    right:20px !important;
    bottom:20px !important;
    padding:12px 20px !important;
    border-radius:30px !important;
    z-index:99999 !important;
}

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

@media(max-width:768px){

    body{
        padding-top:75px !important;
    }

    .top-header{
        height:75px !important;
        padding:8px 12px !important;
    }

    .logo{
        width:55px !important;
        height:55px !important;
    }

    .company{
        display:block !important;
    }

    .company h2{
        font-size:18px !important;
    }

    .company p{
        font-size:8px !important;
    }

    .menu-toggle{
        display:block !important;
        font-size:28px !important;
        color:#0057c8 !important;
        background:none !important;
        border:0 !important;
        cursor:pointer !important;
    }

    .nav-menu{
        display:none !important;
        position:absolute !important;
        top:75px !important;
        left:0 !important;
        width:100% !important;
        padding:15px 0 !important;
        background:#fff !important;
        box-shadow:0 10px 25px rgba(0,0,0,.15) !important;
        flex-direction:column !important;
        gap:0 !important;
    }

    .nav-menu.active{
        display:flex !important;
    }

    .nav-menu li{
        width:100% !important;
        text-align:center !important;
    }

    .nav-menu a{
        display:block !important;
        padding:13px !important;
        font-size:15px !important;
    }

    .call-btn{
        display:inline-block !important;
        margin:5px auto !important;
    }

    .services{
        padding:45px 12px !important;
    }

    .services h1{
        font-size:28px !important;
        margin-bottom:30px !important;
    }

    .service-box{
        flex-direction:column !important;
        align-items:center !important;
        gap:22px !important;
    }

    .service-card{
        width:94% !important;
        max-width:360px !important;
    }

    .service-card img{
        height:200px !important;
    }

    .service-card h2{
        font-size:20px !important;
    }

    .why{
        padding:45px 12px !important;
    }

    .why h1{
        font-size:21px !important;
        padding:13px 20px !important;
        margin-bottom:30px !important;
    }

    .why-box{
        flex-direction:column !important;
        align-items:center !important;
    }

    .why-card{
        width:92% !important;
        max-width:340px !important;
    }

    .projects{
        padding:45px 12px !important;
    }

    .project-card{
        width:94% !important;
        max-width:360px !important;
    }

    .whatsapp{
        right:12px !important;
        bottom:12px !important;
        padding:10px 15px !important;
        font-size:13px !important;
    }
}

/* =========================================
   SKY HOME SOLUTIONS - PREMIUM SERVICE PAGE
   HEADER + HERO + SERVICE CARDS
========================================= */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    overflow-x:hidden;
}

/* ---------- HEADER ---------- */

.top-header{
    width:100%;
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 35px;
    background:#fff;
    position:relative;
    z-index:1000;
}

.top-header .logo{
    width:58px;
    height:58px;
    object-fit:contain;
    flex-shrink:0;
}

.top-header .company{
    display:flex;
    align-items:center;
    gap:12px;
}

.top-header .company h2{
    margin:0;
    font-size:22px;
    line-height:1.1;
    color:#06458f;
}

.top-header .company p{
    margin:3px 0 0;
    font-size:11px;
    color:#777;
}

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

.nav-menu{
    display:flex;
    align-items:center;
    gap:28px;
    margin:0;
    padding:0;
    list-style:none;
}

.nav-menu li{
    list-style:none;
}

.nav-menu a{
    color:#111;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
}

.nav-menu a:hover{
    color:#0878e8;
}

.menu-toggle{
    display:none;
}


/* ---------- SERVICE HERO ---------- */

.service-hero{
    width:100%;
    min-height:390px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.service-hero-content{
    width:min(1100px,92%);
    text-align:center;
    position:relative;
    z-index:2;
    color:#fff;
}

.service-hero-content span{
    display:block;
    color:#4fc3ff;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:12px;
}

.service-hero-content h1{
    margin:0 auto 15px;
    color:#fff !important;
    font-size:46px;
    line-height:1.15;
    font-weight:800;
    text-shadow:0 3px 12px rgba(0,0,0,.5);
}

.service-hero-content p{
    margin:0 auto 25px;
    color:#fff !important;
    font-size:17px;
    line-height:1.6;
    text-shadow:0 2px 8px rgba(0,0,0,.6);
}

.hero-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.hero-buttons a{
    display:inline-block;
    padding:13px 24px;
    border-radius:30px;
    text-decoration:none;
    font-weight:700;
}

.hero-buttons .btn-primary{
    background:#0878e8;
    color:#fff;
}

.hero-buttons .btn-secondary{
    background:#fff;
    color:#0878e8;
}


/* ---------- SERVICE SECTION ---------- */

.service-page{
    width:min(1200px,94%);
    margin:0 auto;
    padding:70px 0;
}

.service-intro{
    max-width:850px;
    margin:0 auto 40px;
    text-align:center;
}

.section-tag{
    display:block;
    color:#0878e8;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:8px;
}

.service-intro h2{
    margin:0 0 12px;
    font-size:34px;
    color:#111;
}

.service-intro p{
    margin:0;
    color:#666;
    font-size:16px;
    line-height:1.7;
}


/* ---------- WATERPROOFING CARDS ---------- */

.waterproofing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.waterproofing-card{
    min-height:245px;
    padding:28px 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    background:#fff;
    border:1px solid #e7edf5;
    border-radius:18px;

    text-decoration:none;
    color:#111;

    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:all .25s ease;
}

.waterproofing-card:hover{
    transform:translateY(-7px);
    box-shadow:0 18px 35px rgba(0,0,0,.14);
    border-color:#0878e8;
}

.wp-icon{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;

    border-radius:50%;
    background:#eaf6ff;

    font-size:28px;
}

.waterproofing-card h3{
    margin:5px 0 8px;
    font-size:19px;
}

.waterproofing-card p{
    margin:0;
    max-width:280px;
    min-height:48px;

    color:#666;
    font-size:14px;
    line-height:1.55;
}

.waterproofing-card span{
    margin-top:15px;
    color:#0878e8;
    font-size:14px;
    font-weight:700;
}


/* ---------- CTA ---------- */

.construction-cta{
    margin-top:60px;
    padding:45px 25px;
    text-align:center;
    color:#fff;

    border-radius:22px;
    background:linear-gradient(135deg,#0759b8,#08a4ed);
    box-shadow:0 12px 30px rgba(0,80,180,.2);
}

.construction-cta h2{
    margin:0 0 10px;
    font-size:28px;
}

.construction-cta p{
    max-width:700px;
    margin:0 auto 22px;
    line-height:1.6;
}

.construction-cta a{
    display:inline-block;
    margin:5px;
    padding:12px 22px;
    border-radius:25px;
    background:#fff;
    color:#0878e8;
    text-decoration:none;
    font-weight:700;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:1000px){

    .top-header{
        padding:10px 20px;
    }

    .nav-menu{
        gap:16px;
    }

    .nav-menu a{
        font-size:12px;
    }

    .service-hero{
        min-height:350px;
    }

    .service-hero-content h1{
        font-size:38px;
    }

    .waterproofing-grid{
        grid-template-columns:repeat(2,1fr);
    }
}


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

@media(max-width:700px){

    .top-header{
        min-height:68px;
        padding:7px 14px;
    }

    .top-header .logo{
        width:45px;
        height:45px;
    }

    .top-header .company h2{
        font-size:16px;
    }

    .top-header .company p{
        font-size:8px;
    }

    .nav-menu{
        display:none;
    }

    .menu-toggle{
        display:block;
        border:0;
        background:#0878e8;
        color:#fff;
        padding:9px 12px;
        border-radius:8px;
        font-size:18px;
        cursor:pointer;
    }

    .service-hero{
        min-height:330px;
    }

    .service-hero-content{
        width:92%;
    }

    .service-hero-content span{
        font-size:9px;
        letter-spacing:1.5px;
    }

    .service-hero-content h1{
        font-size:28px;
        line-height:1.2;
    }

    .service-hero-content p{
        font-size:13px;
        line-height:1.5;
    }

    .service-page{
        width:92%;
        padding:45px 0;
    }

    .service-intro{
        margin-bottom:28px;
    }

    .service-intro h2{
        font-size:27px;
    }

    .service-intro p{
        font-size:14px;
    }

    .waterproofing-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .waterproofing-card{
        min-height:210px;
        padding:25px 18px;
    }

    .construction-cta{
        margin-top:40px;
        padding:35px 18px;
    }

    .construction-cta h2{
        font-size:23px;
    }
}


/* SMALL MOBILE */

@media(max-width:400px){

    .top-header .company h2{
        font-size:14px;
    }

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

    .service-hero-content p{
        font-size:12px;
    }
}
/* FINAL HEADER + HERO FIX */

.top-header{
    height:78px !important;
    min-height:78px !important;
    padding:8px 28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    overflow:visible !important;
}

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

.logo-area .logo{
    width:55px !important;
    height:55px !important;
    object-fit:contain !important;
}

.logo-area .company{
    display:block !important;
}

.logo-area .company h2{
    margin:0 !important;
    font-size:21px !important;
    line-height:1.1 !important;
    color:#06458f !important;
}

.logo-area .company p{
    margin:3px 0 0 !important;
    font-size:10px !important;
    color:#777 !important;
}


/* HERO TEXT */

.service-hero-content{
    width:90% !important;
    max-width:1100px !important;
    text-align:center !important;
    color:#fff !important;
}

.service-hero-content span{
    color:#4fc3ff !important;
}

.service-hero-content h1{
    color:#fff !important;
    font-size:44px !important;
    text-shadow:0 3px 12px rgba(0,0,0,.7) !important;
}

.service-hero-content p{
    color:#fff !important;
    font-size:16px !important;
    text-shadow:0 2px 8px rgba(0,0,0,.7) !important;
}

.hero-buttons a{
    text-decoration:none !important;
}

@media(max-width:700px){

    .top-header{
        height:65px !important;
        min-height:65px !important;
        padding:6px 12px !important;
    }

    .logo-area .logo{
        width:42px !important;
        height:42px !important;
    }

    .logo-area .company h2{
        font-size:15px !important;
    }

    .logo-area .company p{
        font-size:8px !important;
    }

    .service-hero{
        min-height:330px !important;
    }

    .service-hero-content h1{
        font-size:28px !important;
    }

    .service-hero-content p{
        font-size:13px !important;
    }
}

/* ===== FINAL WATERPROOFING FIX ===== */

/* HEADER */
header.top-header{
    height:78px !important;
    min-height:78px !important;
    padding:8px 28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:#fff !important;
    overflow:visible !important;
}

header.top-header .logo-area{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:auto !important;
    flex-shrink:0 !important;
}

header.top-header .logo-area img.logo{
    width:52px !important;
    height:52px !important;
    max-width:52px !important;
    object-fit:contain !important;
}

header.top-header .company{
    width:auto !important;
    display:block !important;
}

header.top-header .company h2{
    margin:0 !important;
    padding:0 !important;
    font-size:20px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    color:#06458f !important;
}

header.top-header .company p{
    margin:3px 0 0 !important;
    padding:0 !important;
    font-size:9px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    color:#777 !important;
}


/* HERO */
.service-hero{
    position:relative !important;
}

.service-hero h1{
    color:#fff !important;
    font-size:44px !important;
    line-height:1.2 !important;
    text-shadow:0 3px 12px rgba(0,0,0,.75) !important;
}

.service-hero p{
    color:#fff !important;
    font-size:16px !important;
    text-shadow:0 2px 8px rgba(0,0,0,.75) !important;
}

.service-hero span{
    color:#55c8ff !important;
}

.service-hero a{
    text-decoration:none !important;
}

.service-hero .btn-primary{
    background:#0878e8 !important;
    color:#fff !important;
    padding:13px 24px !important;
    border-radius:30px !important;
}

.service-hero .btn-secondary{
    background:#fff !important;
    color:#0878e8 !important;
    padding:13px 24px !important;
    border-radius:30px !important;
}


/* CTA */
.construction-cta{
    color:#fff !important;
}

.construction-cta h2{
    color:#fff !important;
}

.construction-cta p{
    color:#fff !important;
}

.construction-cta a{
    text-decoration:none !important;
}


/* MOBILE */
@media(max-width:700px){

    header.top-header{
        height:65px !important;
        min-height:65px !important;
        padding:6px 12px !important;
    }

    header.top-header .logo-area img.logo{
        width:42px !important;
        height:42px !important;
        max-width:42px !important;
    }

    header.top-header .company h2{
        font-size:15px !important;
    }

    header.top-header .company p{
        font-size:8px !important;
    }

    .service-hero h1{
        font-size:27px !important;
    }

    .service-hero p{
        font-size:13px !important;
    }
}
/* ===== SKY HOME SOLUTIONS FINAL HEADER + HERO FIX ===== */

.top-header,
header.top-header {
    height: 78px !important;
    min-height: 78px !important;
    padding: 6px 25px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* LOGO */
.top-header .logo,
header .logo {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    display: block !important;
}

/* COMPANY NAME */
.top-header .company,
header .company {
    display: block !important;
    width: auto !important;
    height: auto !important;
}

.top-header .company h2,
header .company h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 22px !important;
    color: #06458f !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.top-header .company p,
header .company p {
    margin: 2px 0 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
    line-height: 12px !important;
    color: #777 !important;
    white-space: nowrap !important;
}


/* ===== HERO TEXT ===== */

.hero h1,
.service-hero h1,
.waterproofing-hero h1,
.waterproofing-hero h2,
.service-banner h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.8) !important;
}

.hero p,
.service-hero p,
.waterproofing-hero p,
.service-banner p {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.8) !important;
}

.hero a,
.service-hero a,
.waterproofing-hero a,
.service-banner a {
    text-decoration: none !important;
}


/* HERO BUTTONS */
.hero a[href*="tel"],
.service-hero a[href*="tel"],
.waterproofing-hero a[href*="tel"],
.service-banner a[href*="tel"] {
    background: #0878e8 !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    padding: 12px 22px !important;
}


/* MOBILE */
@media (max-width: 700px) {

    .top-header,
    header.top-header {
        height: 65px !important;
        min-height: 65px !important;
        padding: 5px 10px !important;
    }

    .top-header .logo,
    header .logo {
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    .top-header .company h2,
    header .company h2 {
        font-size: 15px !important;
        line-height: 17px !important;
    }

    .top-header .company p,
    header .company p {
        font-size: 7px !important;
        line-height: 9px !important;
    }

    .hero h1,
    .service-hero h1,
    .waterproofing-hero h1,
    .waterproofing-hero h2,
    .service-banner h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .hero p,
    .service-hero p,
    .waterproofing-hero p,
    .service-banner p {
        font-size: 13px !important;
    }
}

/* ================================
   RENOVATION PREMIUM PAGE
================================ */

.service-hero{
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:70px 20px;
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg,rgba(3,35,80,.95),rgba(0,145,220,.82)),
        url("images/renovation.jpg") center/cover no-repeat;
    color:#fff;
}

.service-hero-content{
    max-width:1000px;
    margin:auto;
}

.service-hero-content > span{
    display:block;
    color:#45c8ff;
    font-size:16px;
    font-weight:800;
    letter-spacing:5px;
    margin-bottom:20px;
}

.service-hero h1{
    margin:0 auto 22px;
    max-width:1000px;
    font-size:56px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    text-shadow:0 4px 15px rgba(0,0,0,.45);
}

.service-hero p{
    max-width:850px;
    margin:0 auto 30px;
    font-size:19px;
    line-height:1.7;
    color:#fff;
}

.service-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-light{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 28px;
    border-radius:40px;
    text-decoration:none;
    font-weight:700;
    transition:.3s ease;
}

.btn-primary{
    background:#0787ed;
    color:#fff;
    box-shadow:0 8px 25px rgba(0,100,200,.3);
}

.btn-light{
    background:#fff;
    color:#087ce5;
}

.btn-primary:hover,
.btn-light:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 28px rgba(0,0,0,.18);
}


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

.service-section{
    padding:80px 5%;
    background:#f5f8fc;
}

.section-heading{
    max-width:900px;
    margin:0 auto 45px;
    text-align:center;
}

.section-heading > span{
    color:#0787ed;
    font-size:14px;
    font-weight:800;
    letter-spacing:4px;
}

.section-heading h2{
    margin:12px 0;
    font-size:40px;
    color:#111827;
}

.section-heading p{
    margin:0 auto;
    max-width:800px;
    color:#64748b;
    font-size:17px;
    line-height:1.7;
}


/* ================================
   SERVICE CARDS
================================ */

.service-grid{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.service-card{
    background:#fff;
    min-height:280px;
    padding:32px 28px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 8px 30px rgba(15,23,42,.09);
    border:1px solid #edf2f7;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    transition:.3s ease;
}

.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(15,23,42,.15);
}

.service-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#e8f5ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    margin-bottom:20px;
}

.service-card h3{
    margin:0 0 12px;
    font-size:21px;
    color:#111827;
}

.service-card p{
    margin:0 0 20px;
    color:#64748b;
    line-height:1.6;
    font-size:15px;
}

.service-card a{
    margin-top:auto;
    color:#087ee8;
    font-weight:700;
    text-decoration:none;
}

.service-card a:hover{
    color:#005bb5;
}


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

.service-cta{
    max-width:1200px;
    margin:60px auto 80px;
    padding:55px 30px;
    border-radius:24px;
    text-align:center;
    color:#fff;
    background:linear-gradient(135deg,#075fc7,#08a9e8);
    box-shadow:0 15px 40px rgba(0,110,210,.22);
}

.service-cta h2{
    margin:0 0 15px;
    font-size:34px;
}

.service-cta p{
    max-width:700px;
    margin:0 auto 28px;
    line-height:1.7;
}

.service-cta .btn-light{
    color:#087ee8;
}


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

@media(max-width:900px){

    .service-hero{
        min-height:480px;
        padding:60px 20px;
    }

    .service-hero h1{
        font-size:40px;
    }

    .service-hero p{
        font-size:16px;
    }

    .service-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .section-heading h2{
        font-size:32px;
    }
}

@media(max-width:600px){

    .service-hero{
        min-height:500px;
        padding:50px 18px;
    }

    .service-hero-content > span{
        font-size:12px;
        letter-spacing:3px;
    }

    .service-hero h1{
        font-size:32px;
        line-height:1.15;
    }

    .service-hero p{
        font-size:15px;
        line-height:1.6;
    }

    .service-buttons{
        flex-direction:column;
    }

    .btn-primary,
    .btn-light{
        width:220px;
    }

    .service-section{
        padding:55px 16px;
    }

    .section-heading h2{
        font-size:28px;
    }

    .section-heading p{
        font-size:15px;
    }

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

    .service-card{
        min-height:250px;
    }

    .service-cta{
        margin:30px 16px 50px;
        padding:40px 20px;
    }

    .service-cta h2{
        font-size:27px;
    }
}
/* =========================================
   SKY HOME SOLUTIONS - FINAL HEADER FIX
   ========================================= */

html,
body{
    margin:0 !important;
    padding:0 !important;
}

/* HEADER FULL WIDTH */
.top-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:82px !important;
    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    padding:0 28px !important;
    margin:0 !important;

    background:rgba(255,255,255,.98) !important;
    box-shadow:0 5px 20px rgba(0,0,0,.10) !important;

    z-index:999999 !important;
}

/* BODY - HEADER KE NICHE SE START */
body{
    padding-top:82px !important;
}

/* LOGO + NAME */
.logo-area{
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
}

.logo-area > a{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    text-decoration:none !important;
}

/* LOGO */
.logo{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    border:2px solid #0d6efd !important;
    margin:0 !important;
}

/* COMPANY NAME */
.company{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
}

.company h2{
    margin:0 !important;
    padding:0 !important;
    font-size:22px !important;
    line-height:1.1 !important;
    font-weight:900 !important;
    color:#003b8f !important;
    white-space:nowrap !important;
}

.company p{
    margin:3px 0 0 !important;
    padding:0 !important;
    font-size:10px !important;
    line-height:1 !important;
    color:#777 !important;
    white-space:nowrap !important;
}

/* NAVIGATION */
.navbar{
    margin:0 !important;
    padding:0 !important;
}

.nav-menu{
    display:flex !important;
    align-items:center !important;
    gap:24px !important;
    margin:0 !important;
    padding:0 !important;
}

/* CALL BUTTON */
.call-btn{
    padding:11px 20px !important;
    border-radius:30px !important;
}

/* DESKTOP */
@media(min-width:769px){

    .menu-toggle{
        display:none !important;
    }

}

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

    .top-header{
        height:68px !important;
        padding:0 14px !important;
    }

    body{
        padding-top:68px !important;
    }

    .logo{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
    }

    .company h2{
        font-size:17px !important;
    }

    .company p{
        font-size:9px !important;
    }

    .menu-toggle{
        display:block !important;
        font-size:28px !important;
        margin-left:auto !important;
    }

    .nav-menu{
        display:none !important;
    }

    .nav-menu.active{
        display:flex !important;
    }
}
/* =========================================
   FINAL WEBSITE SPACING FIX
   SKY HOME SOLUTIONS
   ========================================= */

/* PAGE RESET */
html,
body{
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    overflow-x:hidden !important;
}

/* REMOVE TOP EMPTY SPACE */
body{
    padding-top:0 !important;
}

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

.top-header{
    position:relative !important;
    top:auto !important;
    left:auto !important;

    width:100% !important;
    max-width:none !important;

    height:78px !important;
    margin:0 !important;
    padding:0 22px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    box-sizing:border-box !important;

    background:#fff !important;
    z-index:9999 !important;

    box-shadow:0 4px 15px rgba(0,0,0,.10) !important;
}

/* LOGO AREA */
.logo-area{
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
}

/* LOGO LINK */
.logo-area > a{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    text-decoration:none !important;
    margin:0 !important;
    padding:0 !important;
}

/* LOGO */
.logo-area .logo{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    object-fit:contain !important;
    border-radius:50% !important;
    margin:0 !important;
}

/* COMPANY */
.logo-area .company{
    margin:0 !important;
    padding:0 !important;
}

.logo-area .company h2{
    margin:0 !important;
    padding:0 !important;

    font-size:21px !important;
    line-height:1.1 !important;
    font-weight:900 !important;

    color:#064da8 !important;
    white-space:nowrap !important;
}

.logo-area .company p{
    margin:3px 0 0 !important;
    padding:0 !important;

    font-size:9px !important;
    line-height:1 !important;
    color:#777 !important;

    white-space:nowrap !important;
}

/* NAV */
.top-header nav{
    margin:0 !important;
    padding:0 !important;
}

.top-header nav > ul{
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    gap:20px !important;
}

/* =========================
   HERO - FULL WIDTH
   ========================= */

.hero,
.hero-section,
.main-hero{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
}

/* HERO IMAGE/VIDEO */
.hero img,
.hero video,
.hero-section img,
.hero-section video,
.main-hero img,
.main-hero video{
    width:100% !important;
    max-width:none !important;
}

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

.services{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    padding:45px 28px !important;

    box-sizing:border-box !important;
}

/* SERVICES HEADING */
.services > h1{
    margin:0 0 10px !important;
}

/* DESCRIPTION */
.services > p{
    margin:0 auto 28px !important;
}

/* CARDS FULLER */
.service-box{
    width:100% !important;
    max-width:1500px !important;

    margin:0 auto !important;

    grid-template-columns:repeat(4,1fr) !important;
    gap:18px !important;
}

/* CARDS */
.service-card{
    min-width:0 !important;
}

/* CARD IMAGE */
.service-card > img{
    height:175px !important;
}

/* CARD CONTENT */
.service-card-content{
    padding:18px 18px 20px !important;
}

/* =========================
   REMOVE COMMON OUTER GAPS
   ========================= */

section{
    box-sizing:border-box;
}

/* =========================
   DESKTOP
   ========================= */

@media(min-width:1101px){

    .top-header{
        padding-left:28px !important;
        padding-right:28px !important;
    }

    .services{
        padding-left:22px !important;
        padding-right:22px !important;
    }

}

/* =========================
   TABLET
   ========================= */

@media(max-width:1000px){

    .top-header{
        height:74px !important;
        padding:0 18px !important;
    }

    .nav-menu{
        gap:14px !important;
    }

    .services{
        padding:40px 20px !important;
    }

    .service-box{
        grid-template-columns:repeat(2,1fr) !important;
    }

}

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

@media(max-width:650px){

    .top-header{
        height:68px !important;
        padding:0 12px !important;
    }

    .logo-area .logo{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
    }

    .logo-area .company h2{
        font-size:16px !important;
    }

    .logo-area .company p{
        font-size:8px !important;
    }

    .services{
        padding:35px 12px !important;
    }

    .service-box{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .service-card > img{
        height:210px !important;
    }

}
/* =========================================
   SKY HOME SOLUTIONS - FINAL COMPACT LAYOUT
   ========================================= */

html,
body{
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
}

/* TOP HEADER */
.top-header{
    width:100% !important;
    max-width:100% !important;
    height:78px !important;
    margin:0 !important;
    padding:0 22px !important;
    box-sizing:border-box !important;
}

/* REMOVE ANY OUTER SITE SPACE */
body > *,
main,
section{
    max-width:100% !important;
    box-sizing:border-box !important;
}

/* HERO */
.hero-video,
.hero,
.hero-section,
.main-hero{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
}

/* SERVICES - COMPACT */
.services{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:32px 22px 38px !important;
    box-sizing:border-box !important;
}

/* HEADING */
.services > h1{
    margin:0 0 6px !important;
}

/* DESCRIPTION */
.services > p{
    margin:0 auto 20px !important;
}

/* FOUR CARDS - EQUAL WIDTH */
.services .service-box{
    width:100% !important;
    max-width:1450px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:16px !important;
    align-items:stretch !important;
}

/* CARD */
.services .service-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

/* CARD IMAGE */
.services .service-card > img{
    width:100% !important;
    height:175px !important;
    object-fit:cover !important;
    display:block !important;
}

/* CARD CONTENT */
.services .service-card-content{
    padding:14px 14px 16px !important;
}

/* REDUCE CARD HEIGHT */
.services .service-card h2{
    margin:0 !important;
    padding:10px 5px 6px !important;
    font-size:20px !important;
}

.services .service-card p{
    margin:0 !important;
    padding:0 8px 12px !important;
    font-size:13px !important;
    line-height:20px !important;
}

/* WHY SECTION */
.why{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:42px 22px !important;
}

/* REVIEWS */
.reviews{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:42px 22px !important;
}

/* PROJECTS */
.projects{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:42px 22px !important;
}

/* PROJECT CARDS */
.projects .project-box{
    width:100% !important;
    max-width:1450px !important;
    margin:0 auto !important;
    gap:18px !important;
}

.projects .project-card{
    box-sizing:border-box !important;
}

/* FOOTER */
.sky-footer,
.sky-trust-strip{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
}

/* DESKTOP */
@media(min-width:1101px){

    .services .service-box{
        grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    }

}

/* TABLET */
@media(max-width:1000px){

    .services .service-box{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    }

}

/* MOBILE */
@media(max-width:650px){

    .top-header{
        height:68px !important;
        padding:0 12px !important;
    }

    .services{
        padding:28px 12px 32px !important;
    }

    .services .service-box{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .services .service-card{
        width:100% !important;
    }

    .services .service-card > img{
        height:200px !important;
    }

    .why,
    .reviews,
    .projects{
        padding:32px 12px !important;
    }
}
/* =========================================================
   SKY HOME SOLUTIONS - FINAL COMPACT + MOBILE FIX
   ========================================================= */

/* ---------- GLOBAL WIDTH / SIDE SPACE ---------- */

html,
body{
    width:100%;
    max-width:100%;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden;
}

*{
    box-sizing:border-box;
}


/* ---------- HEADER DESKTOP ---------- */

.top-header{
    width:100% !important;
    max-width:100% !important;

    padding:8px 24px !important;

    min-height:68px !important;
    height:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    margin:0 !important;
}

.logo-area{
    margin:0 !important;
    padding:0 !important;
}

.logo-area a{
    display:flex !important;
    align-items:center !important;
}

.top-header .logo{
    width:52px !important;
    height:52px !important;
    margin-right:10px !important;
    border-width:2px !important;
}

.company h2{
    font-size:22px !important;
    line-height:1.1 !important;
    margin:0 !important;
}

.company p{
    font-size:10px !important;
    margin-top:3px !important;
}


/* ---------- DESKTOP MENU ---------- */

.navbar{
    margin:0 !important;
    padding:0 !important;
}

.navbar .nav-menu{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    gap:18px !important;

    margin:0 !important;
    padding:0 !important;
}

.navbar .nav-menu > li{
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap;
}

.navbar .nav-menu > li > a{
    font-size:13px !important;
    font-weight:600 !important;
    padding:8px 2px !important;
}

.navbar .call-btn{
    padding:9px 17px !important;
    border-radius:25px !important;
    font-size:13px !important;
}


/* ---------- SERVICES DROPDOWN ---------- */

.navbar .dropdown{
    position:relative !important;
}

.navbar .dropdown .submenu{
    position:absolute !important;

    top:calc(100% + 5px) !important;
    left:50% !important;

    transform:translateX(-50%) !important;

    width:205px !important;
    min-width:205px !important;

    background:#fff !important;

    padding:7px 0 !important;
    margin:0 !important;

    border-radius:10px !important;

    box-shadow:0 10px 25px rgba(0,0,0,.18) !important;

    z-index:99999 !important;

    display:none !important;
}

.navbar .dropdown:hover .submenu{
    display:block !important;
}

.navbar .submenu li{
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
}

.navbar .submenu li a{
    display:block !important;

    width:100% !important;

    padding:10px 16px !important;

    font-size:13px !important;

    color:#123b70 !important;
    background:#fff !important;

    text-decoration:none !important;
}

.navbar .submenu li a:hover{
    background:#eef6ff !important;
    color:#0878df !important;
}


/* ---------- HERO FULL WIDTH ---------- */

.hero-video{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    border-radius:0 !important;
}

.hero-video{
    height:500px !important;
}

.hero-content{
    margin-left:7% !important;
    max-width:850px !important;
}

.hero-content h1{
    font-size:44px !important;
    line-height:1.15 !important;
    margin-bottom:18px !important;
}

.hero-content h2{
    font-size:28px !important;
    margin-bottom:12px !important;
}

.hero-content p{
    font-size:17px !important;
    margin-bottom:20px !important;
}

.hero-content .btn{
    padding:14px 32px !important;
    font-size:16px !important;
}


/* ---------- VIDEO ARROWS ---------- */

.prev,
.next{
    width:50px !important;
    height:50px !important;
    font-size:35px !important;
}

.prev{
    left:15px !important;
}

.next{
    right:15px !important;
}


/* ---------- REMOVE LARGE SECTION SPACE ---------- */

section{
    margin:0 !important;
    padding-top:30px !important;
    padding-bottom:30px !important;
}


/* ---------- SERVICES COMPACT ---------- */

.services{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    padding:32px 24px !important;

    background:#f1f6ff !important;
}

.services h1{
    margin-top:0 !important;
    margin-bottom:12px !important;

    font-size:34px !important;
}

.services > p{
    margin:0 auto 22px !important;
    line-height:1.4 !important;
}


/* 4 cards properly fill the row */

.services .service-box{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
        repeat(4, minmax(0,1fr)) !important;

    gap:18px !important;

    margin:0 !important;
    padding:0 !important;
}

.services .service-card{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    border-radius:14px !important;
}

.services .service-card img{
    width:100% !important;
    height:185px !important;

    object-fit:cover !important;
}

.services .service-card h2{
    font-size:20px !important;
    padding:12px 10px 5px !important;
}

.services .service-card p{
    font-size:14px !important;
    line-height:1.5 !important;

    padding:0 12px 15px !important;
}


/* ---------- WHY CHOOSE ---------- */

.why{
    width:100% !important;
    margin:0 !important;
    padding:35px 24px !important;
}

.why h1{
    margin-top:0 !important;
    margin-bottom:25px !important;
}


/* ---------- PROJECTS ---------- */

.projects{
    width:100% !important;
    margin:0 !important;
    padding:35px 24px !important;
}

.projects h1{
    margin-top:0 !important;
    margin-bottom:25px !important;
}

.projects .project-box{
    gap:18px !important;
}

.projects .project-card{
    margin:0 !important;
}


/* ---------- REVIEWS ---------- */

.reviews{
    width:100% !important;
    margin:0 !important;
    padding:35px 24px !important;
}

.reviews h1{
    margin-top:0 !important;
    margin-bottom:25px !important;
}


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

@media(max-width:768px){

    html,
    body{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }


    /* MOBILE HEADER */

    .top-header{
        width:100% !important;

        min-height:64px !important;
        height:auto !important;

        padding:7px 12px !important;

        display:flex !important;
        flex-direction:row !important;

        align-items:center !important;
        justify-content:space-between !important;
    }


    .logo-area{
        flex:1 !important;
        min-width:0 !important;
    }

    .logo-area a{
        display:flex !important;
        align-items:center !important;
    }

    .top-header .logo{
        width:48px !important;
        height:48px !important;

        flex-shrink:0 !important;

        margin-right:8px !important;
    }

    .company{
        min-width:0 !important;
    }

    .company h2{
        font-size:18px !important;
        white-space:nowrap !important;
    }

    .company p{
        font-size:8px !important;
        white-space:nowrap !important;
    }


    /* HAMBURGER */

    .menu-toggle{
        display:flex !important;

        width:44px !important;
        height:44px !important;

        align-items:center !important;
        justify-content:center !important;

        background:#0d6efd !important;

        color:#fff !important;

        border:0 !important;
        border-radius:9px !important;

        font-size:24px !important;

        cursor:pointer !important;

        flex-shrink:0 !important;
    }


    /* MOBILE NAV CLOSED */

    .navbar{
        position:relative !important;
        margin:0 !important;
        padding:0 !important;
    }

    .navbar .nav-menu{
        display:none !important;

        position:absolute !important;

        top:calc(100% + 8px) !important;
        right:0 !important;

        width:240px !important;

        background:#fff !important;

        padding:8px !important;
        margin:0 !important;

        border-radius:12px !important;

        box-shadow:0 12px 30px rgba(0,0,0,.20) !important;

        z-index:99999 !important;
    }


    /* MOBILE NAV OPEN */

    .navbar .nav-menu.active{
        display:block !important;
    }


    .navbar .nav-menu > li{
        width:100% !important;

        display:block !important;

        margin:0 !important;
        padding:0 !important;
    }

    .navbar .nav-menu > li > a{
        display:block !important;

        width:100% !important;

        padding:12px 14px !important;

        font-size:14px !important;

        border-radius:8px !important;
    }

    .navbar .nav-menu > li > a:hover{
        background:#eef6ff !important;
    }


    /* MOBILE SERVICES */

    .navbar .dropdown{
        width:100% !important;
    }

    .navbar .dropdown .submenu{
        position:static !important;

        transform:none !important;

        width:100% !important;
        min-width:0 !important;

        display:none !important;

        box-shadow:none !important;

        background:#f5f9ff !important;

        border-radius:8px !important;

        padding:4px !important;
    }

    .navbar .dropdown.open .submenu{
        display:block !important;
    }

    .navbar .dropdown:hover .submenu{
        display:none !important;
    }

    .navbar .dropdown.open:hover .submenu{
        display:block !important;
    }

    .navbar .submenu li a{
        padding:10px 14px !important;
        font-size:13px !important;
    }


    /* CALL BUTTON */

    .navbar .call-btn{
        margin-top:4px !important;

        text-align:center !important;

        padding:11px !important;
    }


    /* HERO MOBILE */

    .hero-video{
        width:100% !important;

        height:430px !important;

        margin:0 !important;
    }

    .hero-content{
        width:100% !important;

        max-width:none !important;

        margin:0 !important;

        padding:0 45px !important;

        text-align:center !important;
    }

    .hero-content h1{
        font-size:30px !important;

        line-height:1.15 !important;

        margin-bottom:15px !important;
    }

    .hero-content h2{
        font-size:20px !important;

        margin-bottom:10px !important;
    }

    .hero-content p{
        font-size:14px !important;

        line-height:1.5 !important;

        margin-bottom:18px !important;
    }

    .hero-content .btn{
        padding:12px 25px !important;

        font-size:14px !important;
    }


    /* ARROWS MOBILE */

    .prev,
    .next{
        width:42px !important;
        height:42px !important;

        font-size:28px !important;
    }

    .prev{
        left:8px !important;
    }

    .next{
        right:8px !important;
    }


    /* ALL SECTIONS COMPACT */

    section{
        padding-top:25px !important;
        padding-bottom:25px !important;
    }


    /* SERVICES MOBILE */

    .services{
        width:100% !important;

        padding:25px 10px !important;

        margin:0 !important;
    }

    .services h1{
        font-size:28px !important;

        margin:0 0 8px !important;

        padding:0 !important;
    }

    .services > p{
        font-size:13px !important;

        margin:0 auto 18px !important;

        line-height:1.4 !important;
    }

    .services .service-box{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:15px !important;

        width:100% !important;
    }

    .services .service-card{
        width:100% !important;

        max-width:none !important;

        margin:0 !important;
    }

    .services .service-card img{
        width:100% !important;

        height:175px !important;
    }

    .services .service-card h2{
        font-size:20px !important;

        padding:11px 10px 4px !important;
    }

    .services .service-card p{
        font-size:13px !important;

        padding:0 12px 12px !important;
    }


    /* WHY */

    .why{
        padding:25px 10px !important;
    }

    .why h1{
        font-size:25px !important;

        padding:12px 20px !important;

        margin-bottom:18px !important;
    }

    .why-card{
        width:100% !important;
        max-width:none !important;

        margin:0 0 15px !important;
    }


    /* PROJECTS */

    .projects{
        padding:25px 10px !important;
    }

    .projects h1{
        font-size:27px !important;

        padding:13px 20px !important;

        margin-bottom:18px !important;
    }

    .projects .project-card{
        width:100% !important;
        max-width:none !important;
    }

    .projects .project-box{
        gap:15px !important;
    }


    /* REVIEWS */

    .reviews{
        padding:25px 10px !important;
    }

    .reviews h1{
        font-size:27px !important;

        padding:13px 20px !important;

        margin-bottom:18px !important;
    }

    .review-card{
        width:100% !important;
        max-width:none !important;
    }


    /* WHATSAPP */

    .whatsapp{
        right:12px !important;
        bottom:12px !important;

        padding:11px 17px !important;

        font-size:13px !important;
    }

}


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

@media(max-width:480px){

    .top-header{
        padding:6px 10px !important;
    }

    .top-header .logo{
        width:43px !important;
        height:43px !important;
    }

    .company h2{
        font-size:16px !important;
    }

    .company p{
        font-size:7px !important;
    }

    .menu-toggle{
        width:40px !important;
        height:40px !important;
        font-size:21px !important;
    }

    .hero-video{
        height:400px !important;
    }

    .hero-content{
        padding:0 40px !important;
    }

    .hero-content h1{
        font-size:27px !important;
    }

    .hero-content h2{
        font-size:19px !important;
    }

    .hero-content p{
        font-size:13px !important;
    }

}
/* =========================================================
   MOBILE COMPACT LAYOUT FIX
   Sky Home Solutions
   Desktop layout ko touch nahi karega
   ========================================================= */

@media (max-width: 768px) {

    /* ---------- PAGE / MAIN WIDTH ---------- */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    main,
    section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* ---------- SECTION SIDE SPACE ---------- */
    section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* ---------- COMMON CONTAINERS ---------- */
    .container,
    .section-container,
    .content-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        box-sizing: border-box;
    }

    /* ---------- HERO ---------- */
    .hero,
    .hero-section,
    .hero-slider {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ---------- SERVICES SECTION ---------- */
    #services,
    .services-section {
        width: 100% !important;
        margin: 0 !important;
        padding-top: 28px !important;
        padding-bottom: 25px !important;
    }

    /* Heading aur cards ke beech ka gap */
    #services .section-title,
    .services-section .section-title {
        margin-bottom: 8px !important;
    }

    #services .section-subtitle,
    .services-section .section-subtitle {
        margin-top: 4px !important;
        margin-bottom: 16px !important;
    }

    /* ---------- SERVICE GRID ---------- */
    .services-grid,
    .service-grid,
    .services-container {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        box-sizing: border-box;
    }

    /* ---------- SERVICE CARD ---------- */
    .service-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box;
        border-radius: 18px !important;
    }

    /* Card image ko compact karo */
    .service-card img {
        width: 100% !important;
        height: 145px !important;
        object-fit: cover !important;
        display: block;
        border-radius: 10px !important;
    }

    /* Icon */
    .service-card .service-icon,
    .service-card .icon {
        width: 38px !important;
        height: 38px !important;
        margin: 8px 0 5px 0 !important;
    }

    /* Card heading */
    .service-card h3,
    .service-card h2 {
        font-size: 20px !important;
        line-height: 1.15 !important;
        margin: 5px 0 6px !important;
    }

    /* Card description */
    .service-card p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin: 0 8px 10px !important;
    }

    /* Explore button */
    .service-card a,
    .service-card button {
        margin-top: 4px !important;
        margin-bottom: 2px !important;
        padding: 9px 16px !important;
        font-size: 13px !important;
        min-height: 0 !important;
    }

    /* ---------- WHY CHOOSE SECTION ---------- */
    #why-choose,
    .why-choose,
    .why-section {
        width: 100% !important;
        margin: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .why-choose .container,
    .why-section .container {
        padding: 0 6px !important;
    }

    /* Why Choose main card */
    .why-card,
    .why-content,
    .about-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 22px 16px !important;
        box-sizing: border-box;
    }

    /* ---------- STATS ---------- */
    .stats,
    .stats-grid,
    .counter-grid {
        width: 100% !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 12px 0 !important;
        padding: 0 4px !important;
    }

    .stat-card,
    .counter-card {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 18px 8px !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* ---------- GENERAL SECTION GAPS ---------- */
    .section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    section + section {
        margin-top: 0 !important;
    }

    /* ---------- CTA ---------- */
    .cta,
    .cta-section {
        width: 100% !important;
        margin: 0 !important;
        padding: 30px 14px !important;
        box-sizing: border-box;
    }

    /* ---------- FOOTER ---------- */
    footer {
        width: 100% !important;
        margin: 0 !important;
        padding: 28px 16px 20px !important;
        box-sizing: border-box;
    }

    footer .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    footer section,
    footer .footer-column {
        margin-bottom: 18px !important;
    }

    /* ---------- WHATSAPP ---------- */
    .whatsapp-float {
        right: 12px !important;
        bottom: 15px !important;
    }
}
/* =====================================================
   OUR SERVICE AREAS - FINAL
===================================================== */

.service-areas{
    width:100%;
    max-width:100%;
    margin:0;
    padding:45px 4%;
    background:#f7faff;
    box-sizing:border-box;
}

.service-areas-heading{
    width:100%;
    max-width:850px;
    margin:0 auto 28px;
    text-align:center;
}

.service-areas-heading span{
    display:inline-block;
    margin-bottom:5px;

    color:#0878df;

    font-size:12px;
    font-weight:800;

    letter-spacing:2px;
}

.service-areas-heading h2{
    margin:0 0 7px;

    color:#123b70;

    font-size:36px;
    font-weight:900;
    line-height:1.15;
}

.service-areas-heading p{
    margin:0;

    color:#667085;

    font-size:14px;
    line-height:1.5;
}


/* =========================
   5 LOCATION CARDS
========================= */

.areas-grid{
    width:100%;
    max-width:1500px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:15px;
}

.area-card{
    width:100%;
    min-width:0;

    padding:20px 16px;

    background:#fff;

    border:1px solid #e2ebf5;

    border-radius:16px;

    box-shadow:
        0 7px 22px rgba(0,60,120,.07);

    box-sizing:border-box;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.area-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 13px 30px rgba(0,60,120,.13);
}

.area-icon{
    font-size:22px;
    line-height:1;

    margin-bottom:7px;
}

.area-card h3{
    margin:0 0 8px;

    color:#075fc1;

    font-size:21px;
    font-weight:800;
}

.area-card p{
    margin:0 0 12px;

    color:#596579;

    font-size:12px;
    line-height:1.6;
}

.area-card a{
    color:#0878df;

    font-size:12px;
    font-weight:700;

    text-decoration:none;
}

.area-card a:hover{
    text-decoration:underline;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1100px){

    .areas-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


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

@media(max-width:768px){

    .service-areas{
        padding:30px 10px;
    }

    .service-areas-heading{
        margin-bottom:19px;
    }

    .service-areas-heading span{
        font-size:10px;
        letter-spacing:1.5px;
    }

    .service-areas-heading h2{
        font-size:28px;
        margin-bottom:6px;
    }

    .service-areas-heading p{
        font-size:12.5px;
        line-height:1.45;
    }

    .areas-grid{
        width:100%;

        grid-template-columns:1fr;

        gap:11px;
    }

    .area-card{
        width:100%;

        padding:16px 14px;

        border-radius:14px;
    }

    .area-icon{
        font-size:20px;
        margin-bottom:4px;
    }

    .area-card h3{
        font-size:20px;
        margin-bottom:5px;
    }

    .area-card p{
        font-size:12px;
        line-height:1.5;

        margin-bottom:9px;
    }

    .area-card a{
        font-size:12px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:480px){

    .service-areas{
        padding:26px 8px;
    }

    .area-card{
        padding:14px 13px;
    }

    .area-card p{
        font-size:11.5px;
    }

}