*{margin:0;padding:0;box-sizing:border-box}
:root{
--primary:#00CED1;
--secondary:#48D1CC;
--accent:#20B2AA;
--indigo:#008B8B;
--dark:#1a1a2e;
--light-dark:#2d2d44;
--gray:#6c757d;
--light-gray:#f5f5f7;
--white:#ffffff;
--gradient:linear-gradient(45deg,#00CED1,#20B2AA);
--gradient-alt:linear-gradient(45deg,#48D1CC,#00CED1);
--shadow:0 10px 30px rgba(0,206,209,0.15);
--shadow-lg:0 20px 60px rgba(0,206,209,0.25);
--radius:16px;
--radius-sm:10px;
--transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
--bg-tint:linear-gradient(135deg,rgba(0,206,209,0.04),rgba(32,178,170,0.03));
--bg-tint-strong:linear-gradient(135deg,rgba(0,206,209,0.09),rgba(32,178,170,0.06));
--bg-wave:radial-gradient(circle at 15% 20%, rgba(0,206,209,0.10) 0, rgba(0,206,209,0) 34%), radial-gradient(circle at 85% 80%, rgba(32,178,170,0.09) 0, rgba(32,178,170,0) 34%), radial-gradient(circle at 50% 50%, rgba(0,139,139,0.05) 0, rgba(0,139,139,0) 50%);
--bg-dot:radial-gradient(rgba(0,206,209,0.16) 1.1px, transparent 1.1px);
--bg-grid:linear-gradient(rgba(0,206,209,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,206,209,0.08) 1px, transparent 1px);
}
/* ========== NEW TURQUOISE SECTION BACKGROUND PATTERNS ==========
Inspired by ref sites (royalmalespa, mykonosindelhi, krishmalespadelhi) pattern of:
- alternating white + tinted sections
- soft gradient meshes / glows / dotted & grid textures
- every 2-3 section changes visual tonality
All colors use SAME turquoise palette (#00CED1 / #48D1CC / #20B2AA / #008B8B)
NO new colors added outside existing theme family.
=========================================================== */
/* 1) Light tinted bg (soft wash) */
.section-tint,
.bg-tint{background:var(--bg-tint);}
.section-tint-strong,
.bg-tint-strong{background:var(--bg-tint-strong);}
/* 2) Wave gradient mesh bg (multi radial) */
.section-wave,
.bg-wave{background:var(--bg-wave);}
/* 3) Textured patterns (dots / grid + tint overlay) */
.section-dots,
.bg-dots{
background-image:
var(--bg-tint),
var(--bg-dot);
background-size: auto, 18px 18px;
}
.section-grid,
.bg-grid{
background-image:
var(--bg-tint),
var(--bg-grid);
background-size: auto, 36px 36px;
}
/* 4) "Warm white" tinted with turquoise hue (for cards and CTA sections) */
.section-aqua-light{
background:
radial-gradient(circle at 10% 10%, rgba(0,206,209,0.07) 0, rgba(0,206,209,0) 22%),
linear-gradient(180deg, #f8fffe 0%, #f2ffff 55%, #f4ffff 100%);
}
/* 5) Two-tone diagonal split bg (inspired by Mykonos' alternating layout with color blocks) */
.section-split{
background:
linear-gradient(115deg,
rgba(0,206,209,0.055) 0%,
rgba(0,206,209,0.055) 48%,
rgba(255,255,255,1) 48%,
rgba(255,255,255,1) 100%);
}
/* 6) Glow blob blobs in corners (use with section position relative, which all sections have) */
.section-glow::before,
.section-glow::after{
content:'';
position:absolute;
border-radius:50%;
filter:blur(80px);
opacity:0.38;
z-index:0;
pointer-events:none;
width:380px;height:380px;
}
.section-glow::before{
top:-120px;left:-120px;
background:radial-gradient(circle, rgba(0,206,209,0.55) 0%, rgba(0,206,209,0) 68%);
}
.section-glow::after{
bottom:-160px;right:-120px;
background:radial-gradient(circle, rgba(32,178,170,0.45) 0%, rgba(32,178,170,0) 68%);
}
.section-glow > *{position:relative; z-index:1;} /* keep content above blobs */
/* 7) Aqua deep bg (for CTA sections) */
.section-aqua-deep{
background:
radial-gradient(ellipse at 20% 0%, rgba(0,206,209,0.18) 0, rgba(0,206,209,0) 55%),
radial-gradient(ellipse at 100% 100%, rgba(32,178,170,0.22) 0, rgba(32,178,170,0) 60%),
linear-gradient(135deg, #ecfffe 0%, #f4ffff 100%);
}
/* 8) Divider wave between sections (optional pseudo) */
.section-wave-divider{
position:relative;
overflow:hidden;
}
.section-wave-divider::before{
content:'';
position:absolute;
top:0;left:0;right:0;height:46px;
background:url("data:image/svg+xml;utf8,") center/cover no-repeat;
pointer-events:none;
z-index:1;
}
.section-wave-divider::after{
content:'';
position:absolute;
bottom:-1px;left:0;right:0;height:46px;
background:url("data:image/svg+xml;utf8,") center/cover no-repeat;
pointer-events:none;
z-index:1;
}
.section-wave-divider > *{position:relative; z-index:2;}
/* 9) Accent card tint (Krish-like colored card tops with matching teal accents) */
.card-accent-top{
position:relative;
overflow:hidden;
}
.card-accent-top::before{
content:'';position:absolute;top:0;left:0;right:0;height:6px;border-radius:16px 16px 0 0;
background:var(--gradient);
z-index:2;
}
/* 10) Border style "glow" cards (Mykonos-like card accent borders) */
.card-glow-border{
position:relative;
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg, rgba(0,206,209,0.7), rgba(32,178,170,0.3), rgba(0,139,139,0.6)) border-box;
border:1.5px solid transparent;
border-radius:var(--radius);
}
.card-glow-border:hover{
box-shadow:
0 0 0 1px rgba(0,206,209,0.25),
0 12px 42px -8px rgba(0,206,209,0.35),
0 0 60px -10px rgba(72,209,204,0.35);
transition:var(--transition);
}
/* 11) Apply to section header accent underlines to match Mykonos styling */
.section-header h2{position:relative;}
.section-header h2::after{
content:'';
display:block;
margin:20px auto 0;
width:70px;height:4px;border-radius:10px;
background:linear-gradient(90deg, rgba(0,206,209,1) 0%, rgba(72,209,204,1) 55%, rgba(32,178,170,0.9) 100%);
opacity:0.9;
box-shadow:0 3px 10px rgba(0,206,209,0.35);
}
.section-header h2 span.froz{
background:linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip:text;background-clip:text;color:transparent;
-webkit-text-fill-color:transparent;
}
.section-header p{
max-width:620px;margin:0 auto;
font-size:15.5px;line-height:1.75;color:#5a6b7a;
}
/* SPECIFIC SECTION BGS (inspired by reference sites' alternating pattern) */
.services{background:var(--bg-wave);}
.why-choose{background:var(--bg-tint);}
.what-you-need{background:var(--bg-dot);}
.pricing{
background:
var(--bg-grid),
linear-gradient(180deg, #ffffff 0%, #f5ffff 100%);
}
.benefits{background:var(--bg-wave);}
.faqs{
background:
radial-gradient(circle at 10% 10%, rgba(0,206,209,0.09) 0, rgba(0,206,209,0) 35%),
radial-gradient(circle at 90% 90%, rgba(32,178,170,0.08) 0, rgba(32,178,170,0) 35%),
var(--light-gray);
}
.reviews{background:var(--bg-tint-strong);}
.book-section{background:var(--bg-wave);}
.cta-section{background:var(--bg-tint-strong);}
/* Pricing cards upgrade: glow border on hover + accent top */
.pricing-card{
transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, border-color .35s ease;
background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(180deg, rgba(0,206,209,0.12), rgba(255,255,255,1) 70%) border-box;
border:1.5px solid transparent;
border-radius:22px;
}
.pricing-card:hover{
background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(145deg, rgba(0,206,209,0.7), rgba(32,178,170,0.35), rgba(0,139,139,0.6)) border-box;
transform:translateY(-10px) scale(1.005);
box-shadow:
0 32px 60px -20px rgba(0,206,209,0.4),
0 18px 34px -18px rgba(0,139,139,0.25);
}
.pricing-card.featured{
background:
linear-gradient(145deg, #00CED1 0%, #18cfd2 40%, #19c4bb 72%, #20B2AA 100%) padding-box,
linear-gradient(145deg, rgba(0,139,139,0.8), rgba(72,209,204,0.9), rgba(0,139,139,0.7)) border-box;
border:1.5px solid transparent;
border-radius:24px;
box-shadow:
0 32px 60px -20px rgba(0,206,209,0.6),
0 0 0 1px rgba(0,206,209,0.3),
inset 0 1px 0 rgba(255,255,255,0.3);
}
.pricing-card.featured:hover{
transform:translateY(-12px) scale(1.025);
}
/* Service cards upgrade — Mykonos/Krish-like accent top & glow hover */
.services .service-card{
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(180deg, rgba(0,206,209,0.18), rgba(255,255,255,1) 60%) border-box;
border:1.5px solid transparent;
border-radius:22px;
overflow:hidden;
transition:var(--transition);
}
.services .service-card:hover{
transform:translateY(-10px);
box-shadow:
0 30px 60px -18px rgba(0,206,209,0.38),
0 10px 24px -10px rgba(0,139,139,0.2);
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(145deg, rgba(0,206,209,0.75), rgba(32,178,170,0.35), rgba(0,139,139,0.55)) border-box;
}
.service-card-icon{
background:linear-gradient(135deg, rgba(0,206,209,0.16), rgba(32,178,170,0.12));
border:1px solid rgba(0,206,209,0.2);
}
/* Benefit cards upgrade (Krish-like icon circle accent with dotted ring bg) */
.benefits-grid .benefit-card{
position:relative;
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(180deg, rgba(72,209,204,0.12), rgba(255,255,255,1) 58%) border-box;
border:1.5px solid transparent;
border-radius:22px;
overflow:visible;
z-index:1;
}
.benefits-grid .benefit-card::before{
content:'';position:absolute;top:28px;left:24px;
width:76px;height:76px;border-radius:50%;
background:var(--bg-dot);
opacity:0.55;
background-size:10px 10px;
z-index:0;pointer-events:none;
}
.benefit-card > *{position:relative; z-index:1;}
.benefits-grid .benefit-card:hover{
transform:translateY(-8px);
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(145deg, rgba(0,206,209,0.7), rgba(32,178,170,0.35), rgba(0,139,139,0.55)) border-box;
box-shadow:0 24px 52px -18px rgba(0,206,209,0.45);
}
/* FAQ items upgrade: white card on tinted bg, glow border on active (inspired by Mykonos' FAQ styling with cards & accent color) */
.faq-item{
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(180deg, rgba(0,206,209,0.08), rgba(255,255,255,1) 50%) border-box;
border:1.5px solid transparent;
border-radius:18px;
overflow:visible;
transition:var(--transition);
}
.faq-item:hover{
transform:translateY(-2px);
box-shadow:0 18px 40px -18px rgba(0,206,209,0.35);
border-color:rgba(0,206,209,0.3);
}
.faq-item.active{
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(145deg, rgba(0,206,209,0.7), rgba(32,178,170,0.3), rgba(0,139,139,0.55)) border-box;
border:1.5px solid transparent;
box-shadow:
0 22px 48px -16px rgba(0,206,209,0.45),
0 0 0 1px rgba(0,206,209,0.12);
}
.faq-toggle-wrap{
background:linear-gradient(135deg, rgba(0,206,209,0.12), rgba(32,178,170,0.1));
border:1px solid rgba(0,206,209,0.18);
}
/* CTA section: stronger bg (Krish/Mykonos gradient sections) */
.cta-section{position:relative; overflow:hidden;}
.cta-section::before{
content:'';position:absolute;
top:-80px;right:-100px;width:420px;height:420px;
background:radial-gradient(circle, rgba(0,206,209,0.24) 0%, rgba(0,206,209,0) 68%);
filter:blur(40px);
border-radius:50%;
pointer-events:none;z-index:0;
}
.cta-section::after{
content:'';position:absolute;
bottom:-140px;left:-120px;width:480px;height:480px;
background:radial-gradient(circle, rgba(32,178,170,0.22) 0%, rgba(32,178,170,0) 68%);
filter:blur(60px);border-radius:50%;pointer-events:none;z-index:0;
}
.cta-section > *{position:relative; z-index:1;}
/* Book section: strong teal pattern + soft gradient mesh (matching reference site section alternating layouts) */
.book-section{
position:relative;overflow:hidden;
}
.book-section::before{
content:'';position:absolute;inset:0;z-index:0;
background:
radial-gradient(circle at 10% 12%, rgba(0,206,209,0.09) 0, rgba(0,206,209,0) 35%),
radial-gradient(circle at 92% 88%, rgba(32,178,170,0.09) 0, rgba(32,178,170,0) 35%),
var(--bg-dot);
background-size:auto, auto, 18px 18px;
pointer-events:none;
}
.book-section > *{position:relative; z-index:1;}
/* Why choose cards + accent icon (Krish Male spa style) */
.why-choose-card{
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(180deg, rgba(0,206,209,0.12), rgba(255,255,255,1) 55%) border-box;
border:1.5px solid transparent;
border-radius:20px;
}
.why-choose-card:hover{
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(145deg, rgba(0,206,209,0.72), rgba(32,178,170,0.35), rgba(0,139,139,0.55)) border-box;
transform:translateY(-7px);
box-shadow:0 26px 52px -20px rgba(0,206,209,0.42);
}
/* What-you-need cards + tint + accent top border */
.need-card{
position:relative;overflow:hidden;
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(180deg, rgba(72,209,204,0.12), rgba(255,255,255,1) 55%) border-box;
border:1.5px solid transparent;
border-radius:22px;
}
.need-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:6px;
background:linear-gradient(90deg, #00CED1, #48D1CC, #20B2AA);
z-index:2;
}
.need-card:hover{
transform:translateY(-8px);
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(145deg, rgba(0,206,209,0.72), rgba(32,178,170,0.35), rgba(0,139,139,0.55)) border-box;
box-shadow:0 24px 50px -18px rgba(0,206,209,0.45);
}
/* ========== Responsive: keep new section bgs crisp on small screens ========== */
@media (max-width: 720px){
.section-glow::before, .section-glow::after{width:260px;height:260px;filter:blur(55px);opacity:0.28;}
.section-dots, .bg-dots{background-size: auto, 14px 14px;}
.section-grid, .bg-grid{background-size: auto, 28px 28px;}
}
html{scroll-behavior:smooth}
body{
font-family:'Poppins',sans-serif;
background:var(--white);
color:var(--dark);
line-height:1.7;
overflow-x:hidden;
}
span.froz{
color:var(--primary);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.btn-primary{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:var(--gradient);
color:var(--white);
padding:14px 32px;
border:none;
border-radius:50px;
font-weight:600;
font-size:15px;
cursor:pointer;
transition:var(--transition);
box-shadow:0 8px 25px rgba(0,206,209,0.4);
font-family:'Poppins',sans-serif;
position:relative;
z-index:1;
isolation:isolate;
-webkit-appearance:none;appearance:none;outline:none;
}
.btn-primary::after{
content:'';position:absolute;inset:0;border-radius:50px;
background:linear-gradient(45deg,#20B2AA,#008B8B);
opacity:0;transition:var(--transition);
z-index:-1;
}
.btn-primary>*{position:relative;z-index:2;color:var(--white)!important;-webkit-text-fill-color:var(--white)!important}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(32,178,170,0.5);color:var(--white)!important}
.btn-primary:hover::after{opacity:1}
.btn-block{width:100%}
.btn-secondary{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:transparent;
color:var(--white);
padding:14px 32px;
border:2px solid var(--white);
border-radius:50px;
font-weight:600;
font-size:15px;
cursor:pointer;
transition:var(--transition);
}
.btn-secondary:hover{background:var(--white);color:var(--primary);transform:translateY(-3px)}
.mt-20{margin-top:20px}
.section-header{text-align:center;max-width:720px;margin:0 auto 55px}
.section-tag{
display:inline-block;
background:rgba(0,206,209,0.1);
color:var(--primary);
padding:6px 18px;
border-radius:50px;
font-size:13px;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:8px;
}
.section-tag.light{background:rgba(255,255,255,0.2);color:var(--white)}
.section-header h2{
font-size:40px;
font-weight:800;
line-height:1.2;
margin-bottom:15px;
}
.section-header h2 span{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section-header p{color:var(--gray);font-size:16px}
section{padding:100px 0;position:relative}
.header{
position:fixed;top:0;left:0;right:0;
z-index:1000;
background:rgba(255,255,255,0.95);
backdrop-filter:blur(15px);
-webkit-backdrop-filter:blur(15px);
transition:var(--transition);
border-bottom:1px solid transparent;
}
.header.scrolled{
box-shadow:0 5px 30px rgba(0,0,0,0.08);
border-bottom:1px solid rgba(0,206,209,0.1);
}
.navbar{
display:flex;align-items:center;justify-content:space-between;
height:80px;
}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{
width:44px;height:44px;
background:var(--gradient);
border-radius:12px;
display:flex;align-items:center;justify-content:center;
color:var(--white);font-size:20px;
box-shadow:0 6px 15px rgba(0,206,209,0.35);
}
.logo-text{font-size:22px;font-weight:800;color:var(--dark)}
.logo-text span{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-menu{display:flex;align-items:center;gap:35px}
.nav-link{
font-weight:500;color:var(--dark);
position:relative;
transition:var(--transition);
font-size:15px;
}
.nav-link::after{
content:'';position:absolute;left:0;bottom:-6px;
width:0;height:2px;
background:var(--gradient);
transition:var(--transition);
border-radius:2px;
}
.nav-link:hover,.nav-link.active{color:var(--primary)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-btn{padding:11px 26px;font-size:14px}
.hamburger{
display:none;
flex-direction:column;gap:5px;
cursor:pointer;padding:5px;
z-index:1002;
}
.hamburger span{
width:26px;height:3px;
background:var(--dark);
border-radius:3px;
transition:var(--transition);
}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* ======================= NEW MOBILE NAV — SLIDE FROM LEFT SIDE ======================= */
.mobile-nav-overlay{
position:fixed;inset:0;
background:rgba(5, 32, 36, 0.55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index:998;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity 0.35s ease, visibility 0s linear 0.35s;
}
body.nav-open .mobile-nav-overlay{
opacity:1;
visibility:visible;
pointer-events:auto;
transition:opacity 0.35s ease, visibility 0s linear 0s;
}
/* Navigation slide panel - slides from LEFT side */
.nav-menu{
/* Mobile slide-in panel — overrides desktop flex below in media query */
}
/* Desktop (≥961px) — keep inline top nav as before */
@media (min-width:961px){
.nav-menu{display:flex;align-items:center;gap:35px;background:transparent;position:static;transform:none;box-shadow:none;padding:0;border:none;}
.mobile-nav-overlay{display:none !important;}
}
/* Mobile (<960px) — FULL SLIDE PANEL */
@media (max-width:960px){
/* ===== DEPRECATED OLD WHITE PANEL STYLE — FULLY OVERRIDDEN BY FINAL BLOCK LATER — keep only placeholder so page CSS parser ignores empty @media ===== */
body,html{}
}
/* Mobile Nav Banner: no overlap, no double X, proper layer order.
* HAMBURGER z-index LOW (992) so it hides under overlay when nav is open.
* OVERLAY = 997
* PANEL (nav-menu) = 999
* BOOKING MODAL stays 9999 in its own rules */
.hamburger{z-index:992 !important;}
/* Prevent page banner image bleeding behind nav panel:
* force solid background, correct clip, NO transparent bg */
.mobile-nav-overlay{
z-index:997 !important;
position:fixed;
inset:0;
background:rgba(6, 40, 43, 0.70) !important;
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity 0.35s ease, visibility 0s linear 0.35s;
}
body.nav-open .mobile-nav-overlay{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transition:opacity 0.35s ease, visibility 0s linear 0s;
}
/* ========================= FINAL AUTHORITATIVE SLIDE PANEL =========================
* Last rule block so nothing overrides it. Matches screenshot 2 layout.
* ================================================================================== */
@media (max-width: 960px){
.hamburger{display:flex !important;}
.nav-btn{display:none !important;}
.nav-menu{
position:fixed !important;
top:0 !important;
left:0 !important;
bottom:0 !important;
right:auto !important;
width: min(320px, 86vw) !important;
max-width:100% !important;
/* SOLID deep-teal (NOT transparent) — this stops the banner image bleeding through */
background: linear-gradient(180deg, #1F7070 0%, #145050 100%) !important;
color:#fff !important;
margin:0 !important;
padding:0 !important;
gap:0 !important;
border:none !important;
border-radius: 0 26px 26px 0 !important;
overflow: hidden !important;
z-index: 999 !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
transform: translateX(-104%) !important;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease !important;
box-shadow: 26px 0 90px rgba(0,0,0,0.40) !important;
}
body.nav-open .nav-menu{
transform: translateX(0) !important;
box-shadow: 26px 0 90px rgba(0,0,0,0.40) !important;
}
/* Panel top header strip: TEAL gradient + logo + close X. No banner bleed here either */
.nav-panel-header{
flex-shrink:0;
position:relative;
background: linear-gradient(135deg,#00CED1 0%,#48D1CC 55%,#20B2AA 100%) !important;
padding: 16px 18px 16px 20px !important;
min-height:72px;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
border-bottom:1px solid rgba(255,255,255,0.14) !important;
}
.nav-panel-logo{
display:flex !important;align-items:center !important;gap:10px !important;position:relative;z-index:1;
}
.nav-panel-logo .logo-icon{
background:#fff !important;
color:#008B8B !important;
width:40px !important;height:40px !important;
border-radius:11px !important;
font-size:18px !important;
display:flex !important;align-items:center !important;justify-content:center !important;
box-shadow:0 6px 14px rgba(0,0,0,0.12) !important;
}
.nav-panel-logo .logo-text{
font-size:19px !important;font-weight:800 !important;color:#fff !important;
letter-spacing:-0.01em;
}
/* ONLY ONE CLOSE BUTTON — positioned inside panel header (TOP-RIGHT corner) */
.nav-panel-close{
position:relative !important;
width:38px !important;height:38px !important;
border-radius:10px !important;
background: rgba(255,255,255,0.20) !important;
border:1px solid rgba(255,255,255,0.32) !important;
color:#fff !important;
font-size:15px !important;
display:flex !important;align-items:center !important;justify-content:center !important;
cursor:pointer !important;
transition:transform 0.25s ease, background 0.25s ease !important;
backdrop-filter:blur(8px) !important;
-webkit-backdrop-filter:blur(8px) !important;
}
.nav-panel-close:hover{
background:rgba(255,255,255,0.30) !important;
transform:rotate(90deg);
}
/* Hide ANY accidental duplicated / misplaced X buttons inside banner area:
* HAMBURGER when .nav-open is on screen — reduce z further and make fully transparent (but still clickable for close via script) */
body.nav-open .hamburger{
opacity: 0 !important;
visibility: hidden !important;
pointer-events:none !important;
transition: opacity 0.2s ease !important;
}
/* Menu item list: remove overflow so header/footer snap to top/bottom */
.nav-menu{overflow-y:auto;overflow-x:hidden;}
/* Menu items: white text + LEFT DOC ICON (fa-file-alt) exactly as reference screenshot2 */
.nav-menu > li{
width:100% !important;
display:block !important;
margin:0 !important;
padding:0 !important;
border-bottom:1px solid rgba(255,255,255,0.08) !important;
border-radius:0 !important;
}
.nav-menu > li:first-child{
border-top:1px solid rgba(255,255,255,0.08) !important;
}
.nav-menu > li.has-dropdown{border-bottom:none !important;}
.nav-menu > li > a.nav-link{
color: #ffffff !important;
font-weight:500 !important;
font-size:15.5px !important;
padding: 17px 50px 17px 26px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:14px !important;
width:100% !important;
border-radius:0 !important;
background: transparent !important;
text-decoration: none !important;
letter-spacing:0.1px;
position: relative !important;
}
/* Doc icon on LEFT */
.nav-menu > li > a.nav-link::before{
content:'\f15b' !important; /* fa-file-alt */
font-family:'Font Awesome 6 Free' !important;
font-weight:400 !important;
display:inline-flex !important;
align-items:center !important;justify-content:center !important;
width:22px !important;
font-size:16px !important;
color:rgba(255,255,255,0.78) !important;
flex-shrink:0 !important;
margin:0 !important;padding:0 !important;
order:0 !important;
}
.nav-menu > li > a.nav-link:hover,
.nav-menu > li > a.nav-link.active{
background:rgba(0,0,0,0.10) !important;
color:#fff !important;
}
/* Chevron caret RIGHT only for Services (has-dropdown) */
.nav-menu > li.has-dropdown > a.nav-link::after{
content:'\f078' !important; /* fa-chevron-down */
font-family:'Font Awesome 6 Free' !important;
font-weight:900 !important;
font-size:11px !important;
color:rgba(255,255,255,0.84) !important;
position:absolute !important;
right:22px !important;
top:50% !important;
transform: translateY(-50%) !important;
transition:transform 0.3s ease, color 0.25s ease !important;
display:block !important;
margin:0 !important;padding:0 !important;
width:auto !important;height:auto !important;
}
.nav-menu > li.has-dropdown.open > a.nav-link::after{
transform: translateY(-50%) rotate(180deg) !important;
color:#48D1CC !important;
}
/* Services dropdown */
.nav-menu > li > ul.services-dropdown{
position:static !important;
top:auto !important;left:auto !important;
transform:none !important;
min-width:unset !important;
width:100% !important;
max-height:0 !important;
overflow:hidden !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
background:rgba(0,0,0,0.16) !important;
border:none !important;
border-radius:0 !important;
box-shadow:none !important;
padding:0 !important;margin:0 !important;
transition: max-height 0.38s ease, opacity 0.25s ease, padding 0.25s ease !important;
}
.nav-menu > li.has-dropdown.open > ul.services-dropdown{
max-height:720px !important;
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
padding:6px 6px 10px !important;
}
.nav-menu > li > ul.services-dropdown::before{display:none !important;}
.nav-menu > li > ul.services-dropdown > li.dropdown-header{display:none !important;}
.nav-menu > li > ul.services-dropdown > li{
background:transparent !important;
border:none !important;
border-bottom:1px solid rgba(255,255,255,0.055) !important;
border-radius:0 !important;
margin:0 !important;
}
.nav-menu > li > ul.services-dropdown > li:last-child{border-bottom:none !important;}
.nav-menu > li > ul.services-dropdown > li > a{
background:transparent !important;
border:none !important;border-radius:0 !important;
box-shadow:none !important;
color:#d4f5f5 !important;
font-size:14px !important;
font-weight:400 !important;
padding:13px 22px 13px 48px !important;
display:block !important;
width:100% !important;
position:relative !important;
margin:0 !important;
text-decoration:none !important;
}
.nav-menu > li > ul.services-dropdown > li > a::before{
content:'\f111' !important; /* fa-circle tiny bullet */
font-family:'Font Awesome 6 Free' !important;
font-weight:400 !important;
font-size:5.5px !important;
color:#48D1CC !important;
display:inline-block !important;
position:absolute !important;
left:28px !important;
top:50% !important;
transform: translateY(-50%) !important;
}
.nav-menu > li > ul.services-dropdown > li > a:hover,
.nav-menu > li > ul.services-dropdown > li > a.active{
background:rgba(0,206,209,0.14) !important;
color:#fff !important;
}
.nav-menu > li > ul.services-dropdown > li > a i{display:none !important;}
/* Panel footer CTA (WhatsApp + Call) sits directly below menu items, NO margin-top:auto gap
* Fixes user complaint: "UL height sahi nahi hai / panel incomplete lagta hai" (giant empty space between last menu item and INSTANT BOOKING).
* Add moderate spacing so it isn't glued, but no 30%+ viewport gap. */
.nav-panel-footer{
margin-top: 18px !important;
background: rgba(0,0,0,0.18) !important;
padding: 18px 20px 24px !important;
border-top:1px solid rgba(255,255,255,0.08) !important;
display:flex !important;flex-direction:column !important;gap:10px !important;
flex-shrink:0;
}
.nav-panel-footer .nav-footer-title{
color:rgba(255,255,255,0.78) !important;
font-size:11.5px;font-weight:700;
text-transform:uppercase;
letter-spacing:0.12em;
margin-bottom:4px;
}
.nav-panel-footer .nav-footer-btn{
display:flex !important;align-items:center !important;justify-content:center !important;gap:10px;
width:100% !important;
padding:13px 18px !important;
border-radius:14px !important;
font-weight:700 !important;
font-size:14.5px !important;
cursor:pointer !important;
text-decoration:none !important;
color:#fff !important;
transition:transform 0.25s ease, box-shadow 0.25s ease !important;
}
.nav-panel-footer .nav-footer-btn.btn-wa{
background:#25D366 !important;
box-shadow:0 10px 26px -10px rgba(37,211,102,0.55) !important;
}
.nav-panel-footer .nav-footer-btn.btn-call{
background:linear-gradient(135deg,#00CED1,#20B2AA) !important;
box-shadow:0 10px 26px -10px rgba(0,206,209,0.55) !important;
}
.nav-panel-footer .nav-footer-btn:hover{transform:translateY(-2px);}
}
.banner{
min-height:100vh;
height:100vh;
padding:0;
display:flex;
align-items:flex-start;
justify-content:flex-start;
position:relative;
overflow:hidden;
padding-top:80px;
}
.banner-slider{position:absolute;inset:0;z-index:0}
.slide{
position:absolute;inset:0;
opacity:0;
transition:opacity 1s ease;
background-blend-mode:overlay;
}
.slide.active{opacity:1}
.slide-dots{
position:absolute;
bottom:40px;left:50%;
transform:translateX(-50%);
display:flex;gap:12px;z-index:5;
}
.slide-dots .dot{
width:40px;height:5px;
background:rgba(255,255,255,0.45);
border-radius:5px;
cursor:pointer;
transition:var(--transition);
}
.slide-dots .dot.active{background:var(--white);width:60px;box-shadow:0 0 15px rgba(255,255,255,0.6)}
.banner-content{position:relative;z-index:2;width:100%;flex:1;display:flex;align-items:center;padding-top:0;margin-top:auto!important;margin-bottom:auto!important;}
.banner-text-wrap{width:100%;display:flex;justify-content:flex-start;text-align:left}
.banner-text{
max-width:620px;
color:var(--white);
margin-left:0;
padding:0;
}
.banner-text.banner-text-change{animation:textFade 0.7s ease}
@keyframes textFade{
0%{opacity:0;transform:translateX(-20px)}
100%{opacity:1;transform:translateX(0)}
}
.badge{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,0.18);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
padding:7px 18px;
border-radius:50px;
font-size:12.5px;
font-weight:600;
margin-bottom:20px;
border:1px solid rgba(255,255,255,0.32);
text-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.badge i{color:#ffd700}
.banner-text h1{
font-size:56px;
font-weight:800;
line-height:1.1;
margin-bottom:18px;
text-shadow:0 3px 12px rgba(0,0,0,0.35);
}
.banner-text h1 span{
color:#ffe4e9;
-webkit-text-fill-color:#ffe4e9;
}
.banner-text p{
font-size:17px;
opacity:0.98;
margin-bottom:28px;
max-width:560px;
line-height:1.75;
text-shadow:0 2px 8px rgba(0,0,0,0.3);
font-weight:400;
}
.banner-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.banner-stats{
display:flex;gap:40px;
padding-top:25px;
border-top:1px solid rgba(255,255,255,0.3);
}
.stat h3{font-size:32px;font-weight:800;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,0.25)}
.stat p{font-size:13.5px;opacity:0.92;margin-top:5px;text-shadow:0 1px 4px rgba(0,0,0,0.25)}
.scroll-indicator{
position:absolute;
bottom:40px;left:50%;
transform:translateX(-50%);
width:30px;height:50px;
border:2px solid rgba(255,255,255,0.6);
border-radius:15px;
z-index:5;
display:flex;justify-content:center;
padding-top:8px;
}
.scroll-indicator span{
width:4px;height:10px;
background:var(--white);
border-radius:2px;
animation:scrollBounce 2s infinite;
}
@keyframes scrollBounce{
0%,100%{transform:translateY(0);opacity:1}
50%{transform:translateY(18px);opacity:0.3}
}
.services{background:var(--light-gray)}
.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
gap:32px;
}
.service-card{
background:var(--white);
border-radius:var(--radius);
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}
.service-card:hover{transform:translateY(-12px);box-shadow:var(--shadow-lg)}
.service-img{position:relative;overflow:hidden;height:250px}
.service-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease}
.service-card:hover .service-img img{transform:scale(1.1)}
.service-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,transparent 40%,rgba(0,206,209,0.35) 100%);
opacity:0;transition:var(--transition);
}
.service-card:hover .service-overlay{opacity:1}
.service-content{padding:30px;position:relative}
.service-icon{
width:60px;height:60px;
background:var(--gradient);
color:var(--white);
display:flex;align-items:center;justify-content:center;
border-radius:50%;
font-size:22px;
position:absolute;
top:-30px;
right:24px;
box-shadow:0 8px 18px -6px rgba(0,206,209,0.55);
transition:transform 0.3s ease;
}
.service-card:hover .service-icon{transform:scale(1.1) rotate(-5deg)}
.service-content h3{font-size:22px;font-weight:700;margin-bottom:12px;margin-top:10px}
.service-content p{color:var(--gray);font-size:15px;margin-bottom:18px}
/* ============ Services Read More / Less Accordion ============ */
.svc-short{display:block;margin-bottom:14px;}
.svc-extra{
max-height:0;
opacity:0;
overflow:hidden;
visibility:hidden;
transition:max-height 0.45s ease, opacity 0.35s ease, margin 0.35s ease, visibility 0s linear 0.45s;
border-left:3px solid rgba(0,206,209,0.35);
background:linear-gradient(180deg,rgba(0,206,209,0.04),rgba(255,255,255,0));
border-radius:0 14px 14px 0;
padding:0 16px 0;
}
.svc-extra p{font-size:14px;line-height:1.75;margin:0 0 10px;color:#334155;}
.svc-extra p:last-child{margin-bottom:0;}
.svc-accordion.svc-open .svc-extra{
max-height:800px;
opacity:1;
visibility:visible;
padding:14px 16px 18px;
margin-bottom:14px;
transition:max-height 0.7s ease, opacity 0.45s ease, margin 0.45s ease, visibility 0s linear 0s;
}
.svc-accordion.svc-open{
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(160deg,#00CED1,#48D1CC,#20B2AA,#008B8B) border-box !important;
border:1.5px solid transparent !important;
}
.svc-accordion.svc-open .svc-toggle{color:#008B8B;}
.svc-accordion.svc-open .svc-toggle i{transform:rotate(180deg);}
.svc-toggle{
margin-top:6px;
user-select:none;
cursor:pointer;
border:none;
background:transparent;
padding:0;
font-family:inherit;
line-height:inherit;
-webkit-appearance:none;
appearance:none;
outline:none;
}
.svc-toggle:focus-visible{
outline:2px dashed rgba(0,206,209,0.55);
outline-offset:3px;
border-radius:6px;
}
.svc-toggle i{transition:transform 0.35s ease;}
/* ============ /Services Read More / Less Accordion ============ */
.read-more{
display:inline-flex;align-items:center;gap:8px;
color:var(--primary);font-weight:600;font-size:14px;
transition:var(--transition);
}
.read-more i{transition:transform 0.3s ease}
.read-more:hover{color:var(--secondary)}
.read-more:hover i{transform:translateX(6px)}
.why-choose-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
.why-img{position:relative}
.why-img img{
border-radius:var(--radius);
box-shadow:var(--shadow-lg);
}
.why-badge{
position:absolute;
bottom:30px;left:-20px;
background:var(--gradient);
color:var(--white);
padding:22px 30px;
border-radius:var(--radius);
display:flex;align-items:center;gap:15px;
box-shadow:0 15px 40px rgba(0,206,209,0.4);
}
.badge-years{
font-size:44px;
font-weight:800;
line-height:1;
}
.badge-text{font-size:14px;line-height:1.3;font-weight:500}
.why-content .section-header{text-align:left;margin:0 0 25px}
.why-content h2{font-size:38px;}
.why-desc{color:var(--gray);margin-bottom:30px;font-size:15px}
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:35px}
.feature-item{display:flex;gap:15px;align-items:flex-start}
.feature-icon{
min-width:48px;height:48px;
background:rgba(0,206,209,0.1);
color:var(--primary);
border-radius:12px;
display:flex;align-items:center;justify-content:center;
font-size:18px;
transition:var(--transition);
}
.feature-item:hover .feature-icon{background:var(--gradient);color:var(--white);transform:scale(1.08)}
.feature-text h4{font-size:15px;font-weight:600;margin-bottom:4px}
.feature-text p{font-size:13px;color:var(--gray);line-height:1.5}
.parallax-section{
padding:120px 0;
position:relative;
text-align:center;
}
.parallax-content{max-width:1200px;margin:0 auto;color:var(--white)}
.parallax-content .section-header{margin-bottom:40px}
.parallax-content h2{font-size:44px;margin-bottom:20px;color:var(--white);font-weight:800}
.parallax-content h2 span{color:#ffe4e9}
.parallax-content p{font-size:17px;opacity:0.95;margin-bottom:50px}
.parallax-features{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}
.p-feature{
background:rgba(255,255,255,0.15);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.25);
padding:30px 20px;
border-radius:var(--radius);
transition:var(--transition);
}
.p-feature:hover{background:rgba(255,255,255,0.25);transform:translateY(-8px)}
.p-feature i{font-size:38px;margin-bottom:15px;color:#ffe4e9}
.p-feature h4{font-size:15px;font-weight:600}
.need-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}
.need-card{
background:var(--white);
border:1px solid rgba(0,206,209,0.08);
border-radius:var(--radius);
padding:40px 30px 35px;
position:relative;
overflow:hidden;
transition:var(--transition);
box-shadow:0 5px 20px rgba(0,0,0,0.03);
}
.need-card::before{
content:'';position:absolute;top:0;left:0;
width:100%;height:4px;
background:var(--gradient);
transform:scaleX(0);
transform-origin:left;
transition:transform 0.5s ease;
}
.need-card:hover::before{transform:scaleX(1)}
.need-card:hover{transform:translateY(-10px);box-shadow:var(--shadow);border-color:transparent}
.need-number{
position:absolute;
top:15px;right:20px;
font-size:56px;
font-weight:900;
color:rgba(0,206,209,0.08);
line-height:1;
transition:var(--transition);
}
.need-card:hover .need-number{color:rgba(0,206,209,0.18);transform:scale(1.1)}
.need-icon-wrap{
width:75px;height:75px;
background:rgba(0,206,209,0.1);
color:var(--primary);
border-radius:20px;
display:flex;align-items:center;justify-content:center;
font-size:30px;
margin-bottom:25px;
transition:var(--transition);
}
.need-card:hover .need-icon-wrap{background:var(--gradient);color:var(--white);transform:rotate(-5deg) scale(1.08)}
.need-card h3{font-size:20px;font-weight:700;margin-bottom:12px}
.need-card p{color:var(--gray);font-size:14px;line-height:1.7}
.cta-section{background:var(--light-gray)}
.cta-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
.cta-info h2{font-size:40px;font-weight:800;margin:15px 0 20px;line-height:1.2}
.cta-info h2 span{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cta-info > p{color:var(--gray);margin-bottom:35px;font-size:16px}
.cta-contact-list{display:flex;flex-direction:column;gap:22px}
.cta-contact-list li{display:flex;align-items:center;gap:18px}
.cta-contact-list li i{
width:55px;height:55px;
background:var(--gradient);
color:var(--white);
border-radius:16px;
display:flex;align-items:center;justify-content:center;
font-size:20px;
flex-shrink:0;
box-shadow:0 8px 20px rgba(0,206,209,0.3);
}
.cta-contact-list li strong{display:block;font-size:15px;font-weight:600;color:var(--dark)}
.cta-contact-list li span{color:var(--gray);font-size:14px}
.cta-form-wrap{
background:var(--white);
padding:45px;
border-radius:var(--radius);
box-shadow:var(--shadow);
position:relative;
overflow:hidden;
}
.cta-form-wrap::before{
content:'';position:absolute;top:-100px;right:-100px;
width:300px;height:300px;
background:var(--gradient);
opacity:0.08;
border-radius:50%;
}
.cta-form h3{font-size:26px;font-weight:700;margin-bottom:30px;position:relative}
.form-group{margin-bottom:20px;position:relative}
.form-group label{
display:block;
font-size:13px;
font-weight:600;
color:var(--dark);
margin-bottom:8px;
}
.form-group input,
.form-group select,
.form-group textarea{
width:100%;
padding:14px 18px;
border:2px solid #eee;
border-radius:var(--radius-sm);
font-size:14px;
font-family:'Poppins',sans-serif;
transition:var(--transition);
background:var(--light-gray);
color:var(--dark);
outline:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
border-color:var(--primary);
background:var(--white);
box-shadow:0 0 0 4px rgba(0,206,209,0.1);
}
.form-group textarea{resize:vertical;min-height:100px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.radio-row{display:flex;gap:25px;flex-wrap:wrap}
.radio-opt{
display:flex;align-items:center;gap:8px;
cursor:pointer;font-size:14px;color:var(--dark);font-weight:500;
}
.radio-opt input{accent-color:var(--primary);width:18px;height:18px}
.pricing{background:var(--light-gray)}
.pricing-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
max-width:1100px;
margin:0 auto;
}
.pricing-card{
background:var(--white);
border-radius:var(--radius);
padding:45px 35px 40px;
transition:var(--transition);
position:relative;
box-shadow:0 8px 25px rgba(0,0,0,0.05);
border:2px solid transparent;
}
.pricing-card:hover{transform:translateY(-12px);box-shadow:var(--shadow-lg)}
.pricing-card.featured{
background:var(--gradient);
color:var(--white);
transform:scale(1.04);
border:none;
z-index:2;
box-shadow:0 25px 60px rgba(0,206,209,0.45);
}
.pricing-card.featured:hover{transform:scale(1.04) translateY(-10px)}
.pricing-badge{
position:absolute;
top:-15px;left:50%;
transform:translateX(-50%);
background:#ffd700;
color:var(--dark);
padding:6px 22px;
border-radius:50px;
font-size:12px;
font-weight:700;
letter-spacing:0.5px;
box-shadow:0 5px 15px rgba(255,215,0,0.5);
}
.pricing-head{text-align:center;padding-bottom:30px;border-bottom:1px solid rgba(0,0,0,0.06);margin-bottom:30px}
.pricing-card.featured .pricing-head{border-color:rgba(255,255,255,0.2)}
.pricing-head h3{font-size:22px;font-weight:700;margin-bottom:18px}
.price-wrap{display:flex;align-items:flex-end;justify-content:center;gap:3px;margin-bottom:10px}
.currency{font-size:24px;font-weight:700;margin-bottom:8px}
.price{font-size:54px;font-weight:800;line-height:1}
.per{font-size:14px;margin-bottom:10px;opacity:0.7}
.pricing-duration{font-size:14px;font-weight:500;opacity:0.7}
.pricing-features{margin-bottom:35px;display:flex;flex-direction:column;gap:14px}
.pricing-features li{display:flex;align-items:center;gap:12px;font-size:14px}
.pricing-features li i{
width:24px;height:24px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:11px;
flex-shrink:0;
background:rgba(0,206,209,0.12);
color:var(--primary);
}
.pricing-card.featured .pricing-features li i{background:rgba(255,255,255,0.25);color:var(--white)}
.pricing-features li.disabled{opacity:0.45;text-decoration:line-through}
.pricing-card.featured .pricing-features li.disabled i{background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.7)}
.pricing-card .btn-primary{
background:var(--gradient);
position:relative;z-index:1;isolation:isolate;
}
.pricing-card.featured .btn-primary{
background:var(--white);
color:var(--primary)!important;
-webkit-text-fill-color:var(--primary)!important;
box-shadow:0 10px 24px rgba(0,0,0,0.18);
isolation:isolate;position:relative;z-index:1;
}
.pricing-card.featured .btn-primary > *{color:var(--primary)!important;-webkit-text-fill-color:var(--primary)!important;z-index:3;position:relative}
.pricing-card.featured .btn-primary::after{background:linear-gradient(45deg,#f8fafc,#e0f2fe)}
.pricing-card.featured .btn-primary:hover{color:var(--dark)!important;-webkit-text-fill-color:var(--dark)!important;transform:translateY(-3px)}
.pricing-card.featured .btn-primary:hover > *{color:var(--dark)!important;-webkit-text-fill-color:var(--dark)!important}
.benefits-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:28px;
}
.benefit-card{
background:var(--white);
padding:35px 28px;
border-radius:var(--radius);
text-align:center;
transition:var(--transition);
border:1px solid rgba(0,0,0,0.04);
position:relative;
overflow:hidden;
}
.benefit-card::after{
content:'';position:absolute;bottom:0;left:50%;
transform:translateX(-50%);
width:60%;height:4px;
background:var(--gradient);
border-radius:4px 4px 0 0;
opacity:0;
transition:var(--transition);
}
.benefit-card:hover{transform:translateY(-10px);box-shadow:var(--shadow);border-color:transparent}
.benefit-card:hover::after{opacity:1;width:100%}
.benefit-icon{
width:72px;height:72px;
margin:0 auto 22px;
background:var(--gradient);
border-radius:20px;
display:flex;align-items:center;justify-content:center;
color:var(--white);font-size:28px;
box-shadow:0 10px 25px rgba(0,206,209,0.3);
transition:var(--transition);
}
.benefit-card:hover .benefit-icon{transform:scale(1.1) rotate(360deg)}
.benefit-card h3{font-size:18px;font-weight:700;margin-bottom:10px}
.benefit-card p{color:var(--gray);font-size:14px;line-height:1.7}
.faqs{background:var(--light-gray)}
.faq-wrap{max-width:850px;margin:0 auto}
.faq-item{
background:var(--white);
border-radius:var(--radius);
margin-bottom:18px;
overflow:hidden;
box-shadow:0 4px 15px rgba(0,0,0,0.04);
border:1px solid rgba(0,0,0,0.03);
transition:var(--transition);
}
.faq-item:hover{box-shadow:var(--shadow)}
.faq-item.active{border:1px solid rgba(0,206,209,0.2)}
.faq-quest{
padding:25px 30px;
display:flex;align-items:center;gap:15px;
cursor:pointer;
position:relative;
}
.faq-label{
font-size:12px;font-weight:700;
padding:4px 10px;
border-radius:6px;
background:var(--gradient);
color:var(--white);
letter-spacing:0.5px;
flex-shrink:0;
}
.faq-ans .faq-label{background:rgba(0,206,209,0.1);color:var(--primary)}
.faq-quest h4{font-size:16px;font-weight:600;flex:1;padding-right:40px;line-height:1.5}
.faq-toggle{
position:absolute;
right:30px;top:50%;
transform:translateY(-50%);
width:34px;height:34px;
background:rgba(0,206,209,0.1);
color:var(--primary);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:12px;
transition:var(--transition);
}
.faq-item.active .faq-toggle{background:var(--gradient);color:var(--white);transform:translateY(-50%) rotate(45deg)}
.faq-ans{
padding:0 30px;
max-height:0;
overflow:hidden;
transition:max-height 0.4s ease,padding 0.3s ease;
display:flex;gap:15px;
align-items:flex-start;
}
.faq-item.active .faq-ans{max-height:400px;padding:0 30px 30px}
.faq-ans p{color:var(--gray);font-size:14.5px;line-height:1.8;padding-top:3px}
.reviews-carousel{
position:relative;
display:flex;align-items:center;gap:15px;
}
.reviews-track-wrap{overflow:hidden;flex:1;padding:10px 5px}
.reviews-track{
display:flex;
transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
gap:28px;
}
.review-card{
min-width:calc(33.333% - 19px);
background:var(--white);
padding:35px 30px;
border-radius:var(--radius);
box-shadow:0 5px 20px rgba(0,0,0,0.05);
border:1px solid rgba(0,0,0,0.03);
transition:var(--transition);
position:relative;
}
.review-card::before{
content:'\201C';
position:absolute;
top:15px;right:25px;
font-size:80px;
font-family:serif;
color:rgba(0,206,209,0.1);
line-height:1;
}
.review-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.review-rating{color:#ffb800;font-size:14px;margin-bottom:18px;letter-spacing:2px}
.review-text{
color:#444;
font-size:14.5px;
line-height:1.8;
margin-bottom:25px;
font-style:italic;
min-height:130px;
}
.review-author{display:flex;align-items:center;gap:15px;padding-top:20px;border-top:1px solid rgba(0,0,0,0.05)}
.review-avatar{
width:52px;height:52px;
background:var(--gradient);
color:var(--white);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-weight:700;
font-size:16px;
box-shadow:0 6px 15px rgba(0,206,209,0.3);
}
.review-info h5{font-size:15px;font-weight:600}
.review-info span{font-size:13px;color:var(--gray)}
.carousel-btn{
width:52px;height:52px;
background:var(--gradient);
color:var(--white);
border:none;
border-radius:50%;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-size:16px;
transition:var(--transition);
box-shadow:0 8px 20px rgba(0,206,209,0.35);
flex-shrink:0;
}
.carousel-btn:hover{transform:scale(1.1);box-shadow:0 12px 28px rgba(0,206,209,0.45)}
.carousel-btn:disabled{opacity:0.35;cursor:not-allowed;transform:none;box-shadow:none}
.carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:35px}
.carousel-dots .cd{
width:11px;height:11px;
background:rgba(0,206,209,0.25);
border-radius:50%;
cursor:pointer;
transition:var(--transition);
}
.carousel-dots .cd.active{background:var(--gradient);width:32px;border-radius:5px}
.book-section{
background:linear-gradient(135deg,var(--light-gray) 0%, #fff 100%);
}
.book-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:0;
border-radius:var(--radius);
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,0.1);
}
.book-half{padding:55px 50px}
.what-we-do{
background:var(--gradient);
color:var(--white);
}
.what-we-do .section-header{text-align:left;margin-bottom:25px}
.what-we-do h2{font-size:34px;font-weight:800;margin:15px 0 18px;color:var(--white);line-height:1.2}
.what-we-do h2 span{color:#ffe4e9}
.what-we-do > p{font-size:15px;opacity:0.95;margin-bottom:30px;line-height:1.8}
.wwd-list{display:flex;flex-direction:column;gap:22px}
.wwd-item{display:flex;gap:16px;align-items:flex-start}
.wwd-item i{font-size:24px;color:#ffd700;margin-top:2px;flex-shrink:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.15))}
.wwd-item h4{font-size:15.5px;font-weight:600;margin-bottom:4px}
.wwd-item p{font-size:13.5px;opacity:0.92;line-height:1.6}
.book-form-wrap{background:var(--white)}
.book-form-inner .section-tag{margin-bottom:8px}
.book-form-inner h3{font-size:28px;font-weight:800;margin-bottom:10px}
.form-sub{color:var(--gray);margin-bottom:28px;font-size:14px}
.book-form .form-group{margin-bottom:16px}
.footer{
background:var(--dark);
color:#c4c4d0;
padding:80px 0 0;
position:relative;
overflow:hidden;
}
.footer::before{
content:'';position:absolute;top:0;left:0;right:0;
height:5px;
background:var(--gradient);
}
.footer-grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1.3fr;
gap:45px;
padding-bottom:50px;
}
.footer-col .logo-text{color:var(--white);margin-bottom:20px}
.footer-about{font-size:14px;line-height:1.8;margin:18px 0 25px;opacity:0.85}
.social-links{display:flex;gap:12px}
.social-links a{
width:40px;height:40px;
background:rgba(255,255,255,0.08);
color:#c4c4d0;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:15px;
transition:var(--transition);
}
.social-links a:hover{background:var(--gradient);color:var(--white);transform:translateY(-4px)}
.footer-col h4{
color:var(--white);
font-size:17px;
font-weight:700;
margin-bottom:25px;
position:relative;
padding-bottom:12px;
}
.footer-col h4::after{
content:'';position:absolute;left:0;bottom:0;
width:40px;height:3px;
background:var(--gradient);
border-radius:3px;
}
.footer-links{display:flex;flex-direction:column;gap:13px}
.footer-links a{
font-size:14px;
display:flex;align-items:center;gap:8px;
transition:var(--transition);
opacity:0.85;
}
.footer-links a i{font-size:10px;color:var(--primary);transition:var(--transition)}
.footer-links a:hover{color:var(--white);opacity:1;transform:translateX(4px)}
.footer-links a:hover i{transform:translateX(3px)}
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-info li{display:flex;gap:14px;align-items:flex-start;font-size:13.5px;line-height:1.7}
.contact-info li i{
width:36px;height:36px;
background:rgba(0,206,209,0.15);
color:var(--secondary);
border-radius:10px;
display:flex;align-items:center;justify-content:center;
font-size:14px;
flex-shrink:0;
margin-top:2px;
}
.contact-info li strong{color:var(--white);margin-right:4px;font-weight:600}
.footer-bottom{
padding:25px 0;
border-top:1px solid rgba(255,255,255,0.08);
text-align:center;
font-size:14px;
opacity:0.8;
}
.footer-bottom a{color:var(--secondary);font-weight:600;transition:var(--transition)}
.footer-bottom a:hover{color:var(--primary)}
.booking-modal{
position:fixed;inset:0;
z-index:9999;
display:none;
align-items:center;justify-content:center;
padding:20px;
}
.booking-modal.active{display:flex}
.modal-overlay{
position:absolute;inset:0;
background:rgba(26,26,46,0.7);
backdrop-filter:blur(5px);
animation:fadeIn 0.3s ease;
}
.modal-box{
position:relative;
background:var(--white);
border-radius:var(--radius);
padding:50px 45px 40px;
max-width:560px;
width:100%;
max-height:90vh;
overflow-y:auto;
box-shadow:0 40px 100px rgba(0,0,0,0.3);
animation:modalPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalPop{
0%{opacity:0;transform:scale(0.85) translateY(20px)}
100%{opacity:1;transform:scale(1) translateY(0)}
}
.modal-close{
position:absolute;
top:18px;right:18px;
width:38px;height:38px;
background:var(--light-gray);
color:var(--dark);
border:none;
border-radius:50%;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-size:14px;
transition:var(--transition);
}
.modal-close:hover{background:var(--gradient);color:var(--white);transform:rotate(90deg)}
.modal-head{text-align:center;margin-bottom:30px}
.modal-head h3{font-size:26px;font-weight:800;margin:10px 0 8px}
.modal-sub{color:var(--gray);font-size:14px}
.whatsapp-float{
position: fixed;
bottom: 80px;
right: 30px;
z-index: 999;
animation: waFloat 3s ease-in-out infinite;
font-size: 25px;
background: var(--gradient);
color: #ffffff;
padding: 12px 14px;
line-height: 1;
border-radius: 50%;
}
.call-float{
position: fixed;
bottom: 15px;
right: 30px;
z-index: 999;
animation: waFloat 3s ease-in-out infinite;
font-size: 18px;
background: var(--gradient);
color: #ffffff;
padding: 15px 15px;
line-height: 1;
border-radius: 50%;
}
.whatsapp-float a{
width:60px;height:60px;
background:#25D366;
color:var(--white);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:30px;
box-shadow:0 8px 25px rgba(37,211,102,0.5);
transition:var(--transition);
}
.whatsapp-float a:hover{transform:scale(1.1);box-shadow:0 12px 35px rgba(37,211,102,0.6)}
@keyframes waFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}
.fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
.fade-in-up{opacity:0;transform:translateY(40px);transition:opacity 0.7s ease,transform 0.7s ease}
.fade-in-up.visible{opacity:1;transform:translateY(0)}
.fade-in-left{opacity:0;transform:translateX(-50px);transition:opacity 0.8s ease,transform 0.8s ease}
.fade-in-left.visible{opacity:1;transform:translateX(0)}
.fade-in-right{opacity:0;transform:translateX(50px);transition:opacity 0.8s ease,transform 0.8s ease}
.fade-in-right.visible{opacity:1;transform:translateX(0)}
.services-grid .service-card:nth-child(2){transition-delay:0.1s}
.services-grid .service-card:nth-child(3){transition-delay:0.2s}
.services-grid .service-card:nth-child(4){transition-delay:0.3s}
.services-grid .service-card:nth-child(5){transition-delay:0.4s}
.services-grid .service-card:nth-child(6){transition-delay:0.5s}
.need-grid .need-card:nth-child(2){transition-delay:0.1s}
.need-grid .need-card:nth-child(3){transition-delay:0.2s}
.need-grid .need-card:nth-child(4){transition-delay:0.3s}
.need-grid .need-card:nth-child(5){transition-delay:0.4s}
.need-grid .need-card:nth-child(6){transition-delay:0.5s}
.benefits-grid .benefit-card:nth-child(2){transition-delay:0.08s}
.benefits-grid .benefit-card:nth-child(3){transition-delay:0.16s}
.benefits-grid .benefit-card:nth-child(4){transition-delay:0.24s}
.benefits-grid .benefit-card:nth-child(5){transition-delay:0.32s}
.benefits-grid .benefit-card:nth-child(6){transition-delay:0.4s}
.benefits-grid .benefit-card:nth-child(7){transition-delay:0.48s}
.benefits-grid .benefit-card:nth-child(8){transition-delay:0.56s}
.pricing-grid .pricing-card:nth-child(2){transition-delay:0.15s}
.pricing-grid .pricing-card:nth-child(3){transition-delay:0.3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(max-width:1024px){
section{padding:80px 0}
.banner-text h1{font-size:52px}
.section-header h2{font-size:34px}
.parallax-content h2{font-size:36px}
.banner-stats{gap:35px}
.why-choose-wrap,.cta-wrap,.book-wrap{grid-template-columns:1fr;gap:50px}
.why-badge{left:20px}
.parallax-features{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr;gap:40px}
.review-card{min-width:calc(50% - 14px)}
.pricing-card.featured{transform:scale(1)}
.pricing-card.featured:hover{transform:translateY(-10px)}
}
@media(max-width:768px){
/* Mobile PORTRAIT banner (<=768 wide, tall screen) */
.banner{min-height:55vh;height:55vh;padding-top:95px;align-items:flex-start;margin-top:50px;}
.banner-text h1{font-size:40px}
.banner-text p{font-size:15.5px;margin-bottom:24px}
.slide-dots{bottom:22px}
/* Common mobile <768px both orientations */
.banner-text{max-width:100%}
.banner-btns{gap:12px;margin-bottom:30px}
.btn-primary,.btn-secondary{padding:12px 24px;font-size:14px}
.banner-stats{gap:25px;padding-top:22px;flex-wrap:wrap}
.stat h3{font-size:28px}
.section-header h2{font-size:28px}
.section-header p{font-size:14.5px}
section{padding:40px 0}
.services-grid,.need-grid,.benefits-grid,.pricing-grid{grid-template-columns:1fr}
.features-grid{grid-template-columns:1fr}
.parallax-section{padding:80px 0}
.parallax-content h2{font-size:28px}
.parallax-features{grid-template-columns:1fr 1fr;gap:15px}
.p-feature{padding:22px 15px}
.cta-form-wrap{padding:30px}
.form-row{grid-template-columns:1fr}
.review-card{min-width:100%}
.carousel-btn{width:42px;height:42px;font-size:13px}
.book-half{padding:35px 25px}
.what-we-do h2{font-size:26px}
.book-form-inner h3{font-size:22px}
.footer{padding-top:60px}
.footer-grid{grid-template-columns:1fr;gap:35px}
.modal-box{padding:35px 25px 30px}
.modal-head h3{font-size:22px}
.scroll-indicator{display:none}
.whatsapp-float{bottom:70px;right:30px}
.whatsapp-float a{width:52px;height:52px;font-size:26px}
.why-badge{padding:16px 20px;bottom:15px;left:15px}
.badge-years{font-size:34px}
.cta-wrap,.why-choose-wrap{gap:35px}
}
/* ================== MOBILE LANDSCAPE — FLATTENED, OUTSIDE 768 BECAUSE WIDTH >768 ==================
*
* Why separate rule?
* - iPhone 14/15 landscape width 844–932px → wider than 768px, so @768 media block NEVER fires!
* That's why banner was broken only in landscape.
* - Also add max-height ≤ 620px so iPads landscape (height 768+) NOT affected.
* - Use pixel min-height — NEVER vh on short landscape viewports (24vh * 390px = 94px TINY)
*/
@media (max-width:1100px) and (orientation:landscape) and (max-height:620px){
.banner{
min-height: 500px !important;
height: auto !important;
max-height: 500px;
padding-top: 88px !important;
padding-bottom: 34px !important;
align-items: flex-start !important;
justify-content: flex-start !important;
margin-top: 10% !important;
}
/* Banner variants — override inline style min-height vh values with pixel mins via !important */
.banner.banner-delhi,
.banner.banner-about,
.banner.banner-contact,
section.banner[style*="min-height:68vh"],
section.banner[style*="min-height:52vh"],
section.banner[style*="min-height:44vh"]{
min-height: 250px !important;
height: auto !important;
max-height: 380px;
padding-top: 82px !important;
padding-bottom: 28px !important;
margin-top: 0 !important;
}
/* Shrink text so nothing overflows short banner */
.banner-text{max-width:92%}
.banner-text h1{font-size:26px !important;line-height:1.15 !important;margin-bottom:10px !important;}
.banner-text p{font-size:13.5px !important;line-height:1.6 !important;margin-bottom:14px !important;max-width:560px;}
.badge{font-size:11px !important;padding:5px 14px !important;margin-bottom:10px !important;}
.banner-btns{gap:10px !important;margin-bottom:14px !important;flex-wrap:wrap;}
.btn-primary,.btn-secondary{padding:9px 18px !important;font-size:13px !important;}
.banner-stats{gap:18px !important;padding-top:14px !important;}
.stat h3{font-size:22px !important;}
.stat p{font-size:12px !important;}
/* Banner image: shift background 30% from top so models upper-body/faces don't get top-cropped */
.banner-slider > .slide{background-position: center 28% !important;}
.slide-dots{bottom:14px !important;gap:8px !important;}
.slide-dots .dot{width:30px;height:4px;}
.slide-dots .dot.active{width:46px;}
.banner-check{padding:10px 18px !important;font-size:12.5px !important;}
}
/* Also apply same landscape banner corrections for 420-768 WIDTH LANDSCAPE (smaller old phones) so they get proper height too: */
@media (max-width:768px) and (orientation:landscape){
.banner{min-height:380px !important;height:auto !important;padding-top:82px !important;padding-bottom:26px !important;margin-top:10% !important;}
.banner.banner-delhi,.banner.banner-about,.banner.banner-contact{min-height:230px !important;padding-top:78px !important;padding-bottom:24px !important;}
.banner-text h1{font-size:24px !important;}
.banner-text p{font-size:13px !important;}
.banner-slider > .slide{background-position: center 28% !important;}
}
@media(max-width:480px){
.banner-text h1{font-size:32px}
.section-header h2{font-size:24px}
.parallax-content h2{font-size:24px}
.banner-stats .stat{flex:1 1 40%}
.parallax-features{grid-template-columns:1fr}
.service-content{padding:25px 20px}
.need-card{padding:30px 22px 25px}
.cta-form-wrap{padding:25px 20px}
.pricing-card{padding:35px 25px 30px}
.price{font-size:44px}
.review-card{padding:28px 22px}
.review-text{min-height:auto}
}
/* ============================================================================
MOBILE NAVIGATION FINAL OVERRIDE
Single authoritative mobile drawer. This block intentionally comes LAST.
============================================================================ */
html.nav-lock,
html.nav-lock body{
overflow:hidden !important;
overscroll-behavior:none !important;
}
@media (max-width:960px){
/* Header stays above page content and respects small phone safe areas. */
.header{z-index:1100 !important;}
.navbar{height:70px !important;min-height:70px !important;}
.container{padding-left:16px !important;padding-right:16px !important;}
.logo{min-width:0 !important;}
.logo-text{font-size:19px !important;white-space:nowrap !important;}
.logo-icon{width:40px !important;height:40px !important;flex:0 0 40px !important;}
.nav-right{gap:8px !important;margin-left:auto !important;}
.hamburger{display:flex !important;width:42px !important;height:42px !important;align-items:center !important;justify-content:center !important;position:relative !important;z-index:1201 !important;touch-action:manipulation !important;}
.hamburger span{width:25px !important;height:3px !important;}
.nav-btn{display:none !important;}
/* Backdrop */
.mobile-nav-overlay{
display:block !important;
position:fixed !important;
inset:0 !important;
z-index:1198 !important;
background:rgba(5,32,36,.68) !important;
backdrop-filter:blur(3px) !important;
-webkit-backdrop-filter:blur(3px) !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transition:opacity .28s ease,visibility 0s linear .28s !important;
}
body.nav-open .mobile-nav-overlay{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transition:opacity .28s ease,visibility 0s linear 0s !important;
}
/* Drawer */
.nav-menu{
position:fixed !important;
top:0 !important;
left:0 !important;
bottom:0 !important;
right:auto !important;
width:min(340px,88vw) !important;
height:100dvh !important;
max-height:100dvh !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
gap:0 !important;
background:linear-gradient(180deg,#155858 0%,#103f40 100%) !important;
border:0 !important;
border-radius:0 22px 22px 0 !important;
box-shadow:22px 0 70px rgba(0,0,0,.42) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:touch !important;
transform:translate3d(-105%,0,0) !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:none !important;
transition:transform .36s cubic-bezier(.22,1,.36,1),box-shadow .36s ease !important;
z-index:1199 !important;
will-change:transform !important;
}
body.nav-open .nav-menu{
transform:translate3d(0,0,0) !important;
pointer-events:auto !important;
}
/* Static mobile panel header */
.nav-menu > li.nav-panel-top{
display:block !important;
flex:0 0 auto !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:linear-gradient(135deg,#00CED1 0%,#48D1CC 52%,#20B2AA 100%) !important;
border-radius:0 !important;
list-style:none !important;
}
.nav-panel-brand{
min-height:76px !important;
padding:14px 14px 14px 18px !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.nav-panel-brand-icon{
width:40px !important;height:40px !important;
border-radius:11px !important;
background:#fff !important;
color:#008B8B !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 40px !important;
box-shadow:0 5px 14px rgba(0,0,0,.12) !important;
}
.nav-panel-brand-text{
color:#fff !important;
font-size:18px !important;
font-weight:800 !important;
line-height:1.1 !important;
flex:1 1 auto !important;
white-space:nowrap !important;
}
.nav-panel-brand-text span{color:#eaffff !important;}
.nav-panel-close{
width:38px !important;height:38px !important;
flex:0 0 38px !important;
border:1px solid rgba(255,255,255,.35) !important;
border-radius:10px !important;
background:rgba(255,255,255,.16) !important;
color:#fff !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
cursor:pointer !important;
font-size:15px !important;
touch-action:manipulation !important;
}
.nav-panel-close:hover{background:rgba(255,255,255,.28) !important;transform:none !important;}
/* Main links */
.nav-menu > li:not(.nav-panel-top):not(.nav-panel-bottom){
width:100% !important;
flex:0 0 auto !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-bottom:1px solid rgba(255,255,255,.075) !important;
border-radius:0 !important;
list-style:none !important;
}
.nav-menu > li > a.nav-link,
.nav-menu > li:not(.has-dropdown) > a{
min-height:56px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:13px !important;
padding:15px 48px 15px 22px !important;
color:#fff !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
font-size:15px !important;
font-weight:500 !important;
line-height:1.35 !important;
text-decoration:none !important;
position:relative !important;
white-space:normal !important;
}
.nav-menu > li > a.nav-link::before,
.nav-menu > li:not(.has-dropdown) > a::before{
content:'\f15b' !important;
font-family:'Font Awesome 6 Free' !important;
font-weight:400 !important;
width:20px !important;
flex:0 0 20px !important;
color:rgba(255,255,255,.76) !important;
text-align:center !important;
font-size:15px !important;
}
.nav-menu > li > a.nav-link::after{
display:none !important;
}
.nav-menu > li.has-dropdown > a.nav-link::after{
content:'\f078' !important;
display:block !important;
position:absolute !important;
right:21px !important;
top:50% !important;
width:auto !important;height:auto !important;
transform:translateY(-50%) !important;
font-family:'Font Awesome 6 Free' !important;
font-weight:900 !important;
font-size:10px !important;
color:rgba(255,255,255,.78) !important;
transition:transform .25s ease !important;
}
.nav-menu > li.has-dropdown.open > a.nav-link::after{
transform:translateY(-50%) rotate(180deg) !important;
color:#48D1CC !important;
}
.nav-menu > li > a:hover,
.nav-menu > li > a.active{background:rgba(0,206,209,.12) !important;color:#fff !important;}
/* Services submenu */
.nav-menu > li.has-dropdown{border-bottom:1px solid rgba(255,255,255,.075) !important;}
.nav-menu > li > ul.services-dropdown{
position:static !important;
display:block !important;
width:100% !important;
min-width:0 !important;
max-height:0 !important;
overflow:hidden !important;
padding:0 !important;
margin:0 !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transform:none !important;
background:rgba(0,0,0,.17) !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
transition:max-height .35s ease,opacity .22s ease,visibility 0s linear .35s !important;
}
.nav-menu > li.has-dropdown.open > ul.services-dropdown{
max-height:520px !important;
padding:4px 0 8px !important;
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transition:max-height .38s ease,opacity .22s ease,visibility 0s linear 0s !important;
}
.nav-menu > li > ul.services-dropdown li.dropdown-header{display:none !important;}
.nav-menu > li > ul.services-dropdown li{
width:100% !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-bottom:1px solid rgba(255,255,255,.055) !important;
list-style:none !important;
}
.nav-menu > li > ul.services-dropdown li:last-child{border-bottom:0 !important;}
.nav-menu > li > ul.services-dropdown li a{
display:block !important;
width:100% !important;
min-height:46px !important;
padding:11px 18px 11px 47px !important;
position:relative !important;
color:#d8f6f6 !important;
background:transparent !important;
font-size:13px !important;
font-weight:400 !important;
line-height:1.4 !important;
text-decoration:none !important;
white-space:normal !important;
}
.nav-menu > li > ul.services-dropdown li a::before{
content:'\f111' !important;
position:absolute !important;
left:28px !important;
top:50% !important;
transform:translateY(-50%) !important;
font-family:'Font Awesome 6 Free' !important;
font-weight:400 !important;
font-size:5px !important;
color:#48D1CC !important;
}
.nav-menu > li > ul.services-dropdown li a i{display:none !important;}
.nav-menu > li > ul.services-dropdown li a:hover{background:rgba(0,206,209,.12) !important;color:#fff !important;}
/* Footer is always at the end, no giant auto gap. */
.nav-menu > li.nav-panel-bottom{
display:block !important;
flex:0 0 auto !important;
width:100% !important;
margin:0 !important;
padding:17px 18px 22px !important;
border:0 !important;
background:rgba(0,0,0,.16) !important;
list-style:none !important;
}
.nav-panel-footer-title{
color:rgba(255,255,255,.72) !important;
font-size:10.5px !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:.13em !important;
margin-bottom:9px !important;
}
.nav-panel-actions{display:grid !important;grid-template-columns:1fr 1fr !important;gap:9px !important;}
.nav-footer-btn{
min-height:45px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:10px 9px !important;
border-radius:11px !important;
color:#fff !important;
font-size:13px !important;
font-weight:700 !important;
text-decoration:none !important;
}
.nav-footer-btn.btn-wa{background:#25D366 !important;}
.nav-footer-btn.btn-call{background:linear-gradient(135deg,#00CED1,#20B2AA) !important;}
/* Never let the hidden desktop header/footer variants occupy space. */
.nav-panel-header,.nav-panel-footer{display:none !important;}
/* General mobile content improvements */
.container{width:100% !important;max-width:100% !important;}
section{padding:56px 0 !important;}
.section-header{padding:0 8px !important;margin-bottom:34px !important;}
.section-header h2{font-size:28px !important;line-height:1.25 !important;}
.section-header p{font-size:14px !important;line-height:1.7 !important;}
.services-grid,.need-grid,.benefits-grid,.pricing-grid{grid-template-columns:1fr !important;gap:20px !important;}
.why-choose-wrap,.cta-wrap,.book-wrap{grid-template-columns:1fr !important;gap:28px !important;}
.features-grid{grid-template-columns:1fr !important;gap:17px !important;}
.form-row{grid-template-columns:1fr !important;}
.footer-grid{grid-template-columns:1fr !important;gap:30px !important;}
.book-half{padding:32px 22px !important;}
.cta-form-wrap{padding:28px 20px !important;}
.modal-box{width:min(100%,560px) !important;max-height:88dvh !important;padding:34px 20px 26px !important;}
}
@media (max-width:480px){
.logo-text{font-size:17px !important;}
.navbar{height:64px !important;min-height:64px !important;}
.logo-icon{width:38px !important;height:38px !important;flex-basis:38px !important;}
.hamburger{width:40px !important;height:40px !important;}
section{padding:48px 0 !important;}
.section-header h2{font-size:24px !important;}
.service-content{padding:24px 18px !important;}
.need-card{padding:30px 20px 24px !important;}
.pricing-card{padding:32px 22px 28px !important;}
.nav-menu{width:min(330px,90vw) !important;}
}
@media (max-width:360px){
.logo-text{font-size:15px !important;}
.nav-menu{width:92vw !important;}
.nav-panel-actions{grid-template-columns:1fr !important;}
.nav-menu > li > a.nav-link,.nav-menu > li:not(.has-dropdown) > a{font-size:14px !important;padding-left:18px !important;}
}
@media (prefers-reduced-motion:reduce){
.nav-menu,.mobile-nav-overlay,.hamburger span{transition:none !important;}
}
/* ============================================================================
DESKTOP NAVIGATION FINAL FIX
Keep mobile drawer helper rows completely out of the desktop layout.
============================================================================ */
@media (min-width:961px){
.header .navbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
height:80px !important;
min-height:80px !important;
gap:20px !important;
}
.header .logo{
display:flex !important;
align-items:center !important;
flex:0 0 auto !important;
min-width:0 !important;
white-space:nowrap !important;
}
.header .logo-text{
display:block !important;
font-size:22px !important;
line-height:1.1 !important;
white-space:nowrap !important;
}
.header .nav-menu{
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 auto !important;
width:auto !important;
max-width:none !important;
gap:32px !important;
margin:0 auto !important;
padding:0 !important;
background:transparent !important;
position:static !important;
transform:none !important;
box-shadow:none !important;
border:0 !important;
overflow:visible !important;
}
.header .nav-menu > .nav-panel-top,
.header .nav-menu > .nav-panel-bottom{
display:none !important;
}
.header .nav-menu > li{
display:block !important;
width:auto !important;
flex:0 0 auto !important;
margin:0 !important;
padding:0 !important;
}
.header .nav-menu > li > a.nav-link,
.header .nav-menu > li > a:not(.nav-link){
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
white-space:nowrap !important;
min-height:40px !important;
padding:8px 0 !important;
font-size:15px !important;
line-height:1.2 !important;
}
.header .nav-right{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
flex:0 0 auto !important;
gap:14px !important;
margin-left:0 !important;
}
.header .nav-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
white-space:nowrap !important;
min-width:128px !important;
height:50px !important;
padding:0 24px !important;
border-radius:28px !important;
font-size:15px !important;
font-weight:700 !important;
}
.header .hamburger{display:none !important;}
}