/* =========================================================
   DreamTree Technologies - common stylesheet (style.css)
   Used by: index.html, contact.html, manesar.html and future city pages
   Responsive: root font-size scales per device (see section 24)

   CONTENTS
   1. DESIGN TOKENS, RESET & BASE
   2. LAYOUT BASICS (container, sections, headings)
   3. BUTTONS
   4. TOP BAR (phone / WhatsApp / email)
   5. HEADER, LOGO & NAVIGATION (mega menu, dropdown, burger)
   6. HOME: HERO
   7. FORMS (shared by quote popup, contact page)
   8. HOME: TRUST STRIP
   9. SHARED GRIDS & SERVICE CARDS
   10. DARK SECTION & CASE CARDS
   11. STATS, WHY-US CARDS & PROCESS STEPS
   12. CHIPS (industries, technology, nearby areas)
   13. QUOTE CARDS & PRICING CARDS
   14. FAQ ACCORDION
   15. FINAL CTA BANNER
   16. FOOTER
   17. FLOATING BUTTONS (desktop WhatsApp, mobile sticky bar)
   18. QUICK-QUOTE POPUP (MODAL)
   19. RESPONSIVE: TABLET (max 1000px) & MOBILE (max 640px)
   20. ACCESSIBILITY: REDUCED MOTION
   21. HERO OVERRIDES & BROWSER MOCKUP (home + inner pages)
   22. HOME: RECENT WORK / PORTFOLIO CARDS
   23. HOME: TESTIMONIALS (Google reviews)
   24. SCREEN SCALING (root font-size per device: laptop, 24in, 32in, mobile)
   25. MOBILE MENU: CLOSE BUTTON & BACKDROP
   26. CONTACT PAGE (page hero, form, office cards, map)
   27. CITY / INNER PAGE (Manesar template)
   28. BLOG PAGE (featured post, filters, article cards)
   29. SERVICE PAGE (health card, feature checks; e.g. Website maintenance Jaigaon)
   30. BLOG DETAIL PAGE (article body, table of contents, share, author box)


   ========================================================= */
/* =========================================================
   1. DESIGN TOKENS, RESET & BASE
   ========================================================= */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}



:root{--navy:#0a1f3d;--navy2:#0f2a52;--ink:#0b1b33;--amber:#f5a30f;--amber2:#ffb62e;--paper:#fff;--soft:#f3f6fb;--mut:#5b6b82;--line:#dfe6f0;--wa:#1faa59;--blue:#1d56b3;--r:0.875rem}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:5.625rem}
body{font-family:"Plus Jakarta Sans",system-ui,Segoe UI,Roboto,sans-serif;color:var(--ink);line-height:1.6;background:#fff;-webkit-text-size-adjust:100%}
img,svg{max-width:100%}a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* =========================================================
   2. LAYOUT BASICS (container, sections, headings)
   ========================================================= */
.w{width:min(80rem,100% - 2rem);margin-inline:auto}
section{padding:4.5rem 0}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(1.55rem,2.6vw,2.5rem);margin-bottom:0.75rem}
.lead{color:var(--mut);max-width:62ch;margin-bottom:2.25rem}

/* =========================================================
   3. BUTTONS
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;border:0;cursor:pointer;font:inherit;font-weight:700;border-radius:62.4375rem;padding:0.875rem 1.625rem;background:var(--amber);color:var(--navy);transition:background .2s,transform .2s}
.btn:hover{background:var(--amber2)}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.sm{padding:0.6875rem 1.375rem}

/* =========================================================
   4. TOP BAR (phone / WhatsApp / email)
   ========================================================= */
.top{background:var(--navy);color:#cfdaf0;font-size:.82rem}
.top .w{display:flex;justify-content:space-between;gap:1rem;padding:0.5rem 0;flex-wrap:wrap}
.top a{margin-left:1.125rem;color:#fff;font-weight:600}
.top span{opacity:.85}

/* =========================================================
   5. HEADER, LOGO & NAVIGATION (mega menu, dropdown, burger)
   ========================================================= */
header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:4.625rem}
.logo{font-weight:800;font-size:1.45rem;letter-spacing:-.03em;color:var(--navy)}
.logo b{color:var(--amber)}
.logo small{display:block;font-size:.58rem;font-weight:600;letter-spacing:.06em;color:var(--blue);margin-top:-4px}
nav>ul{display:flex;align-items:center;gap:0.375rem;list-style:none;padding:0}
nav>ul>li>a,nav>ul>li>button{font:inherit;font-weight:600;font-size:.94rem;background:none;border:0;cursor:pointer;padding:1.625rem 0.75rem;display:flex;align-items:center;gap:0.3125rem;color:var(--ink)}
nav>ul>li:hover>a,nav>ul>li:hover>button{color:var(--blue)}
.has-mega{position:static}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 1.5rem 2.5rem rgba(10,31,61,.14);display:none;padding:1.75rem 0}
.has-mega:hover .mega,.has-mega.open .mega{display:block}
.mega .w{display:grid;grid-template-columns:repeat(3,1fr) 1.1fr;gap:1.75rem}
.mega h4{font-size:.9rem;margin-bottom:0.625rem;color:var(--blue)}
.mega a{display:block;padding:0.375rem 0;color:var(--ink);font-size:.92rem}
.mega a:hover{color:var(--blue)}
.mega .promo{background:var(--navy);color:#fff;border-radius:var(--r);padding:1.25rem}
.mega .promo p{color:#cfdaf0;font-size:.88rem;margin:0.375rem 0 0.875rem}
.mega .promo a{display:inline-block;background:var(--amber);color:var(--navy);padding:0.5625rem 1.125rem;border-radius:6.1875rem;font-weight:700}
.drop{position:relative}
.drop ul{position:absolute;top:100%;left:0;min-width:12.5rem;background:#fff;border:1px solid var(--line);border-radius:0.75rem;box-shadow:0 1.125rem 2.25rem rgba(10,31,61,.14);padding:0.5rem;list-style:none;display:none}
.drop:hover ul,.drop.open ul{display:block}
.drop ul a{display:block;padding:0.5rem 0.75rem;border-radius:0.5rem;font-size:.92rem}
.drop ul a:hover{background:var(--soft)}
.burger{display:none;background:none;border:0;padding:0.5rem;cursor:pointer}
.burger span{display:block;width:1.5rem;height:2px;background:var(--navy);margin:0.3125rem 0}

/* =========================================================
   6. HOME: HERO
   ========================================================= */
.hero{background:radial-gradient(56.25rem 31.25rem at 85% 10%,#1b4a8a55,transparent 60%),linear-gradient(180deg,var(--navy),#071731);color:#fff;padding:4.5rem 0 4rem;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px),radial-gradient(56.25rem 31.25rem at 85% 10%,#1b4a8a66,transparent 60%),linear-gradient(180deg,var(--navy),#071731);background-size:2.75rem 2.75rem,2.75rem 2.75rem,auto,auto}
.hero .w{display:grid;grid-template-columns:1.25fr .85fr;gap:3rem;align-items:center}
.pill{display:inline-block;border:1px solid #ffffff2e;background:#ffffff10;border-radius:6.1875rem;padding:0.375rem 0.875rem;font-size:.84rem;font-weight:600;margin-bottom:1.375rem}
.hero h1{font-size:clamp(2rem,3.3vw,3.5rem);line-height:1.12;font-weight:800}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p.sub{color:#c5d3ea;font-size:1.08rem;margin:1.25rem 0 1.375rem;max-width:56ch}
.note{border:1px solid #ffffff22;background:#ffffff0d;border-radius:0.625rem;padding:0.75rem 1rem;font-weight:600;font-size:.94rem;margin-bottom:1.625rem;max-width:56ch}
.ctas{display:flex;gap:0.75rem;flex-wrap:wrap}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.125rem;padding-top:1.5rem;border-top:1px solid #ffffff22}
.trust b{display:block;font-size:1.35rem}
.trust span{font-size:.8rem;color:#a9bbd8}

/* =========================================================
   7. FORMS (shared by quote popup, contact page)
   ========================================================= */
.card-form{background:#fff;color:var(--ink);border-radius:1.125rem;padding:1.625rem;box-shadow:0 1.875rem 3.75rem rgba(0,0,0,.35)}
.card-form h2{font-size:1.4rem;margin-bottom:0.375rem}
.card-form .s{font-size:.88rem;color:var(--mut);margin-bottom:0.875rem}
label{display:block;font-size:.82rem;font-weight:700;margin:0.625rem 0 0.3125rem}
input,select,textarea{width:100%;font:inherit;font-size:.95rem;padding:0.6875rem 0.8125rem;border:1px solid var(--line);border-radius:0.625rem;background:#fff;color:var(--ink)}
textarea{resize:vertical;min-height:4.375rem}
.card-form .btn{width:100%;margin-top:1rem}
.form-msg{margin-top:.9rem;padding:.8rem 1rem;border-radius:.7rem;font-size:.9rem;font-weight:600}
.form-msg.ok{background:#e8f7ee;color:#14633a;border:1px solid #b7e4c7}
.form-msg.err{background:#fdecec;color:#8a1f1f;border:1px solid #f5c2c2}
.form-msg a{text-decoration:underline}
.btn[disabled]{opacity:.65;cursor:wait}
.fine{font-size:.78rem;color:var(--mut);text-align:center;margin-top:0.625rem}
.fine a{color:var(--blue);font-weight:700}

/* =========================================================
   8. HOME: TRUST STRIP
   ========================================================= */
.strip{padding:1.75rem 0;background:var(--soft)}
.strip .w{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.875rem 1.75rem;align-items:center;font-weight:700;color:var(--mut)}
.strip span{display:flex;align-items:center;gap:0.5rem;font-size:.92rem}
.strip i{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--amber);display:inline-block}

/* =========================================================
   9. SHARED GRIDS & SERVICE CARDS
   ========================================================= */
.grid{display:grid;gap:1.25rem}
.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.svc{border:1px solid var(--line);border-radius:var(--r);padding:1.625rem;background:#fff;transition:border-color .2s,box-shadow .2s}
.svc:hover{border-color:var(--amber);box-shadow:0 0.875rem 1.875rem rgba(10,31,61,.08)}
.ic{width:2.875rem;height:2.875rem;border-radius:0.75rem;background:var(--navy);color:var(--amber);display:grid;place-items:center;margin-bottom:1rem}
.ic svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:1.15rem;margin-bottom:0.375rem}
.svc p{color:var(--mut);font-size:.94rem;margin-bottom:0.75rem}
.more{font-weight:700;color:var(--blue);font-size:.92rem}

/* =========================================================
   10. DARK SECTION & CASE CARDS
   ========================================================= */
.dark{background:var(--navy);color:#fff}
.dark .lead{color:#b9c9e3}
.case{background:var(--navy2);border:1px solid #ffffff1c;border-radius:var(--r);overflow:hidden}
.shot{height:9.375rem;background:linear-gradient(135deg,#1b4a8a,#0a1f3d);display:flex;align-items:flex-end;padding:0.875rem;font-weight:800;font-size:1.1rem;color:var(--amber)}
.case div.b{padding:1.25rem}
.case dt{font-size:.78rem;color:var(--amber);font-weight:700;margin-top:0.625rem}
.case dd{margin:0;color:#d4e0f3;font-size:.92rem}

/* =========================================================
   11. STATS, WHY-US CARDS & PROCESS STEPS
   ========================================================= */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin:0 0 2.25rem;text-align:center}
.stats b{font-size:2.2rem;color:var(--navy);display:block}
.stats span{color:var(--mut);font-size:.9rem}
.why{padding:1.375rem;border-left:4px solid var(--amber);background:var(--soft);border-radius:0 0.75rem 0.75rem 0}
.why h3{font-size:1.05rem;margin-bottom:4px}.why p{color:var(--mut);font-size:.93rem}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0.875rem;counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding-top:3.125rem;font-weight:700}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--amber);color:var(--navy);display:grid;place-items:center;font-weight:800}
.steps li::after{content:"";position:absolute;top:1.125rem;left:2.75rem;right:-0.375rem;height:2px;background:#ffffff30}
.steps li:last-child::after{display:none}
.steps small{display:block;font-weight:400;color:#b9c9e3;font-size:.85rem}

/* =========================================================
   12. CHIPS (industries, technology, nearby areas)
   ========================================================= */
.chips{display:flex;flex-wrap:wrap;gap:0.625rem}
.chips a,.chips span{border:1px solid var(--line);border-radius:6.1875rem;padding:0.5625rem 1.125rem;font-weight:600;font-size:.92rem;background:#fff}
.chips a:hover{border-color:var(--amber)}

/* =========================================================
   13. QUOTE CARDS & PRICING CARDS
   ========================================================= */
.quote{border:1px solid var(--line);border-radius:var(--r);padding:1.5rem}
.quote p{margin-bottom:0.875rem}.quote b{display:block}.quote small{color:var(--mut)}
.price{border:1px solid var(--line);border-radius:var(--r);padding:1.625rem}
.price h3{margin-bottom:0.375rem}.price p{color:var(--mut);font-size:.94rem}
.price.hl{border:2px solid var(--amber);background:#fffaf0}

/* =========================================================
   14. FAQ ACCORDION
   ========================================================= */
details{border-bottom:1px solid var(--line);padding:1rem 0}
summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--amber)}
details[open] summary::after{content:"–"}
details p{color:var(--mut);margin-top:0.625rem;max-width:70ch}

/* =========================================================
   15. FINAL CTA BANNER
   ========================================================= */
.final{background:linear-gradient(135deg,var(--navy),#143b73);color:#fff;text-align:center}
.final h2{font-size:clamp(1.7rem,3vw,3rem)}
.final .ctas{justify-content:center;margin-top:1.5rem}

/* =========================================================
   16. FOOTER
   ========================================================= */
footer{background:#071731;color:#b4c3dc;padding:3.5rem 0 1.5rem;font-size:.92rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.25rem}
footer h4{color:#fff;margin-bottom:0.875rem;font-size:1rem}
footer li{list-style:none;margin-bottom:0.5rem}footer ul{padding:0}
footer a:hover{color:var(--amber)}
.soc{display:flex;gap:0.625rem;margin-top:0.875rem}
.soc a{width:2.375rem;height:2.375rem;border-radius:50%;border:1px solid #ffffff30;display:grid;place-items:center;font-weight:700;font-size:.8rem}
.copy{border-top:1px solid #ffffff1c;margin-top:2.25rem;padding-top:1.25rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.625rem;font-size:.85rem}

/* =========================================================
   17. FLOATING BUTTONS (desktop WhatsApp, mobile sticky bar)
   ========================================================= */
.wa-float{position:fixed;right:1.375rem;bottom:1.375rem;z-index:60;width:3.625rem;height:3.625rem;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 0.625rem 1.5rem rgba(0,0,0,.3)}
.wa-float svg{width:1.875rem;height:1.875rem;fill:#fff}
.bar{display:none}

/* =========================================================
   18. QUICK-QUOTE POPUP (MODAL)
   ========================================================= */
.modal{position:fixed;inset:0;z-index:100;background:rgba(7,23,49,.7);display:none;align-items:center;justify-content:center;padding:1rem}
.modal.on{display:flex}
.modal .card-form{width:min(27.5rem,100%);max-height:92vh;overflow:auto;position:relative}
.x{position:absolute;top:0.625rem;right:0.875rem;background:none;border:0;font-size:1.8rem;cursor:pointer;color:var(--mut);line-height:1}
.quick{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0.375rem 0 4px}
.quick button{border:1px solid var(--line);background:#fff;border-radius:6.1875rem;padding:0.4375rem 0.875rem;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
.quick button.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* =========================================================
   19. RESPONSIVE: TABLET (max 1000px) & MOBILE (max 640px)
   ========================================================= */
@media(max-width:1000px){
.hero .w{grid-template-columns:1fr}
.g4,.g3{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}.steps li::after{display:none}
.fgrid{grid-template-columns:1fr 1fr}
.burger{display:block}
nav{position:fixed;inset:0 0 0 auto;width:min(21.25rem,88vw);background:#fff;transform:translateX(105%);transition:transform .25s;padding:5rem 1.25rem 6.25rem;overflow:auto;box-shadow:-1.25rem 0 2.5rem rgba(0,0,0,.2);z-index:70}
nav.on{transform:none}
nav>ul{flex-direction:column;align-items:stretch;gap:0}
nav>ul>li>a,nav>ul>li>button{padding:0.875rem 4px;width:100%;justify-content:space-between;border-bottom:1px solid var(--line)}
.mega,.drop ul{position:static;box-shadow:none;border:0;padding:4px 0 0.5rem 0.625rem}
.mega .w{display:block;width:100%}.mega .promo{display:none}.mega h4{margin-top:0.625rem}
.has-mega:hover .mega,.drop:hover ul{display:none}.has-mega.open .mega,.drop.open ul{display:block}
.top .hide-m{display:none}
}
@media(max-width:640px){
section{padding:3.25rem 0}
.g4,.g3,.g2,.stats{grid-template-columns:1fr 1fr}
.g3,.g2{grid-template-columns:1fr}
.trust{grid-template-columns:repeat(2,1fr)}
.fgrid{grid-template-columns:1fr}
.top .w{justify-content:center}
.top span{display:none}
.wa-float{display:none}
body{padding-bottom:calc(4rem + env(safe-area-inset-bottom,0px))}
.bar{display:grid;grid-template-columns:1fr 1fr 1.3fr;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--navy);padding:0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom,0px));gap:0.5rem;box-shadow:0 -0.375rem 1.25rem rgba(0,0,0,.25)}
.bar a,.bar button{display:flex;align-items:center;justify-content:center;gap:0.375rem;height:2.875rem;border-radius:0.75rem;font:inherit;font-weight:700;font-size:.9rem;border:0;color:#fff;background:#1d56b3;cursor:pointer}
.bar .w2{background:var(--wa)}.bar .q{background:var(--amber);color:var(--navy)}
.hero{padding:2.75rem 0}.ctas .btn{flex:1 1 100%}
}

/* =========================================================
   20. ACCESSIBILITY: REDUCED MOTION
   ========================================================= */
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   21. HERO OVERRIDES & BROWSER MOCKUP (home + inner pages)
   ========================================================= */
.hero .w{grid-template-columns:1.2fr .8fr}
.mock{position:relative;background:#fff;border-radius:1rem;box-shadow:0 1.875rem 3.75rem rgba(0,0,0,.4);overflow:visible}
.mb{display:flex;align-items:center;gap:0.375rem;padding:0.625rem 0.875rem;background:#eef2f8;border-radius:1rem 1rem 0 0}
.mb i,.fb i{width:0.5625rem;height:0.5625rem;border-radius:50%;background:#c3cddd;display:block}
.mb span,.fb span{margin-left:0.625rem;font-size:.72rem;color:#6b7b93;background:#fff;border-radius:6.1875rem;padding:3px 0.75rem}
.mc{padding:1rem;display:grid;gap:0.75rem}
.m1{height:7.5rem;border-radius:0.625rem;background:linear-gradient(135deg,var(--navy),#1b4a8a);padding:1.125rem;display:grid;align-content:center;gap:0.625rem}
.m1 b{display:block;height:0.75rem;width:70%;background:#fff;border-radius:0.375rem}.m1 u{display:block;height:1.5rem;width:5.625rem;background:var(--amber);border-radius:6.1875rem}
.m2{display:grid;grid-template-columns:repeat(3,1fr);gap:0.625rem}.m2 em{height:3.5rem;border-radius:0.5rem;background:var(--soft);border:1px solid var(--line)}
.m3 span{display:block;height:0.5rem;border-radius:4px;background:var(--line);margin-bottom:0.5rem}.m3 span+span{width:60%}
.chip{position:absolute;background:var(--amber);color:var(--navy);font-weight:800;font-size:.8rem;padding:0.5rem 0.875rem;border-radius:6.1875rem;box-shadow:0 0.625rem 1.5rem rgba(0,0,0,.3)}
.c1{top:3.75rem;left:-1.375rem}.c2{bottom:1.875rem;right:-1.125rem;background:#fff}
@media(max-width:1000px){.hero .w{grid-template-columns:1fr}.mock{display:none}}

/* =========================================================
   22. HOME: RECENT WORK / PORTFOLIO CARDS
   ========================================================= */
.work{background:linear-gradient(180deg,var(--navy),#071731)}
.wh{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.25rem}
.wh h2{margin-bottom:0.625rem}.wh .lead{max-width:56ch}
.pj{background:#fff;color:var(--ink);border-radius:1.125rem;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.pj:hover{transform:translateY(-0.375rem);box-shadow:0 1.625rem 3.125rem rgba(0,0,0,.4)}
.frame{background:#dfe7f3;padding:1rem 1rem 0}
.fb{display:flex;align-items:center;gap:0.375rem;background:#eef2f8;border-radius:0.625rem 0.625rem 0 0;padding:0.5625rem 0.75rem}
.fb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:75%}
.scr{--a:#1b4a8a;background:#fff;padding:0.75rem;height:10.625rem;display:grid;grid-template-rows:3.75rem 2.75rem 0.5rem 0.5rem;gap:0.625rem;border:1px solid #d5deeb;border-top:0}
.scr .hd{border-radius:0.5rem;background:linear-gradient(120deg,var(--a),var(--navy))}
.scr .rw{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}.scr .rw b{border-radius:0.375rem;background:var(--soft);border-bottom:3px solid var(--a)}
.scr .ln{border-radius:4px;background:var(--line)}.scr .sh{width:55%}
.s2{--a:#0e7c66}.s3{--a:#c2410c}
.pb{padding:1.375rem;display:flex;flex-direction:column;gap:0.5rem;flex:1}
.tag{font-size:.78rem;font-weight:700;color:var(--blue)}
.pb h3{font-size:1.25rem}.pb p{color:var(--mut);font-size:.93rem}
.res{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0;margin:0.375rem 0 0.625rem}
.res li{list-style:none;background:var(--soft);border:1px solid var(--line);border-radius:6.1875rem;padding:0.3125rem 0.75rem;font-size:.8rem;font-weight:600}
.res .todo{background:#fff8e6;border:1px dashed var(--amber);color:#8a5a00}
.pb .more{margin-top:auto}

/* =========================================================
   23. HOME: TESTIMONIALS (Google reviews)
   ========================================================= */
.tm{background:#f7faff}
.th{text-align:center;margin-bottom:2.75rem}
.tl{display:block;font-size:.8rem;font-weight:700;letter-spacing:.14em;color:#4338ca;margin-bottom:0.5rem}
.th h2{color:#0a2472;font-size:clamp(1.8rem,3vw,3rem);font-weight:800;margin-bottom:0.75rem}
.th p{color:#5f6f86;max-width:60ch;margin-inline:auto}
.tc{background:#fff;border:1px solid #e3eaf5;border-radius:1.5rem;padding:2.25rem;display:flex;flex-direction:column;margin:0}
.glg{font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1;font-family:"Product Sans",Arial,sans-serif}
.gr{font-size:.85rem;font-weight:700;color:#5f6368;margin:2px 0 1.5rem}.gr span{color:#fbbc05;letter-spacing:1px}
.tc blockquote{margin:0 0 1.75rem;color:#5f6f86;line-height:1.95;font-size:.98rem;flex:1}
.tc figcaption b{display:block;font-size:1.05rem;color:#000}.tc figcaption small{color:#6b7280;font-size:.85rem}

/* =========================================================
   24. SCREEN SCALING (root font-size per device: laptop, 24in, 32in, mobile)
   ========================================================= */
html{font-size:15.5px}
.logo img{height:3.4rem;width:auto;display:block}
@media(min-width:641px){html{font-size:15.5px}}
@media(min-width:1025px){html{font-size:15px}}      /* laptops (incl. Windows 125-150% scaling) */
@media(min-width:1440px){html{font-size:16px}}      /* desktops / 1440p */
@media(min-width:1920px){html{font-size:18px}}      /* 24 inch Full HD */
@media(min-width:2560px){html{font-size:22px}}      /* 27-32 inch QHD / 4K */
@media(min-width:3200px){html{font-size:26px}}      /* large 4K at 100% */
@media(max-width:380px){html{font-size:14.5px}}     /* small phones */

/* =========================================================
   25. MOBILE MENU: CLOSE BUTTON & BACKDROP
   ========================================================= */
.nclose,.nback{display:none}
@media(max-width:1000px){
.nclose{display:grid;place-items:center;position:absolute;top:1rem;right:1rem;width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--navy);font-size:1.8rem;line-height:1;cursor:pointer}
.nclose:hover{background:var(--amber)}
.nback.on{display:block;position:fixed;inset:0;background:rgba(7,23,49,.55);z-index:65}
}

/* =========================================================
   26. CONTACT PAGE (page hero, form, office cards, map)
   ========================================================= */
.ph{background:linear-gradient(180deg,var(--navy),#071731);color:#fff;padding:3.5rem 0 3.2rem;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(180deg,var(--navy),#071731);background-size:44px 44px,44px 44px,auto}
.crumb{font-size:.85rem;color:#a9bbd8;margin-bottom:1rem}.crumb a:hover{color:var(--amber)}
.ph h1{font-size:clamp(2rem,3.3vw,3.2rem);font-weight:800;max-width:20ch}
.ph p{color:#c5d3ea;max-width:58ch;margin:1rem 0 1.6rem;font-size:1.05rem}
.cgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
.ci{display:flex;gap:1rem;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem;margin-bottom:1rem;background:#fff}
.ci .ic{margin:0;flex:none}.ci b{display:block;font-size:.85rem;color:var(--mut);font-weight:600}.ci a,.ci span{font-weight:700;font-size:1.05rem}
.ci a:hover{color:var(--blue)}
.formcard{background:#fff;border:1px solid var(--line);border-radius:1.2rem;padding:2rem;box-shadow:0 20px 44px rgba(10,31,61,.08)}
.formcard h2{font-size:1.6rem}.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.formcard .btn{width:100%;margin-top:1.1rem}
.locs{background:var(--soft)}
.loc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;display:flex;flex-direction:column;gap:.5rem}
.loc.hq{border:2px solid var(--amber)}
.loc .tg{font-size:.78rem;font-weight:700;color:#8a5a00;background:#fff3d6;border-radius:99px;padding:.2rem .7rem;align-self:flex-start}
.loc .tg.n{color:var(--blue);background:#e8f0fc}
.loc h3{font-size:1.4rem}.loc p{color:var(--mut);font-size:.95rem}
.loc .ph2{font-size:1.2rem;font-weight:800;color:var(--navy)}
.lb{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.8rem}
.lb a,.lb button{font:inherit;font-weight:700;font-size:.85rem;border:1px solid var(--line);background:#fff;border-radius:99px;padding:.5rem 1rem;cursor:pointer;color:var(--ink)}
.lb a:hover,.lb button:hover,.lb button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.mapw{margin-top:2rem;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#e9eef6}
.mapw iframe{display:block;width:100%;height:26rem;border:0}
@media(max-width:1000px){.cgrid{grid-template-columns:1fr;gap:2rem}}
@media(max-width:640px){.row2{grid-template-columns:1fr}.formcard{padding:1.3rem}.mapw iframe{height:20rem}.ph{padding:2.4rem 0}}

/* =========================================================
   27. CITY / INNER PAGE (Manesar template)
   ========================================================= */
.crumb2{font-size:.85rem;color:#a9bbd8;margin-bottom:1.2rem}.crumb2 a:hover{color:var(--amber)}
.hl{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.hl span{display:flex;align-items:center;gap:.5rem;border:1px solid #ffffff2e;background:#ffffff10;border-radius:99px;padding:.45rem 1rem;font-size:.88rem;font-weight:600}
.hl span::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--amber)}
.split{display:grid;grid-template-columns:1.3fr .7fr;gap:3.5rem;align-items:start}
.split p{color:var(--mut);margin-bottom:1rem;max-width:68ch}
.facts{background:var(--navy);color:#fff;border-radius:1.2rem;padding:1.8rem;position:sticky;top:6rem}
.facts h3{font-size:1.15rem;margin-bottom:1rem}
.facts div{padding:.8rem 0;border-top:1px solid #ffffff22}
.facts b{display:block;font-size:1.25rem;color:var(--amber)}.facts span{font-size:.88rem;color:#c5d3ea}
.facts .btn{width:100%;margin-top:1rem}
.lc{background:var(--navy2);border:1px solid #ffffff1c;border-top:3px solid var(--amber);border-radius:var(--r);padding:1.5rem}
.lc h3{font-size:1.08rem;margin-bottom:.5rem}.lc p{color:#c5d3ea;font-size:.92rem}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}
.cat h3{font-size:1.05rem;margin-bottom:.4rem}.cat p{color:var(--mut);font-size:.92rem}
.rows{border-top:1px solid var(--line)}
.rw{display:grid;grid-template-columns:1fr 1.6fr;gap:2rem;padding:1.3rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.rw h3{font-size:1.15rem}.rw p{color:var(--mut)}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 2rem;counter-reset:s;list-style:none;padding:0}
.steps3 li{counter-increment:s;position:relative;padding-top:3.4rem}
.steps3 li::before{content:counter(s);position:absolute;top:0;left:0;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--amber);color:var(--navy);display:grid;place-items:center;font-weight:800}
.steps3 h3{font-size:1.1rem;margin-bottom:.3rem}.steps3 p{color:#b9c9e3;font-size:.93rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.two h2{font-size:clamp(1.4rem,2.1vw,2rem)}
.lnk{display:grid;gap:.5rem;margin-top:1rem}
.lnk a{display:flex;justify-content:space-between;border:1px solid var(--line);background:#fff;border-radius:.8rem;padding:.8rem 1.1rem;font-weight:600;font-size:.93rem}
.lnk a::after{content:"→";color:var(--amber)}.lnk a:hover{border-color:var(--amber)}
@media(max-width:1000px){.split,.two{grid-template-columns:1fr;gap:2rem}.facts{position:static}.steps3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.steps3{grid-template-columns:1fr}.rw{grid-template-columns:1fr;gap:.4rem}}

/* =========================================================
   28. BLOG PAGE (featured post, filters, article cards)
   ========================================================= */
.fbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1.8rem}
.fbtns{display:flex;flex-wrap:wrap;gap:.5rem}
.fbt{font:inherit;font-weight:600;font-size:.88rem;border:1px solid var(--line);background:#fff;border-radius:99px;padding:.5rem 1.1rem;cursor:pointer;color:var(--ink)}
.fbt:hover{border-color:var(--amber)}
.fbt.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.srch{width:min(18rem,100%);border-radius:99px;padding:.6rem 1.1rem}
.feat{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--line);border-radius:1.2rem;overflow:hidden;background:#fff;margin-bottom:2.5rem}
.feat .pt{height:100%;min-height:18rem;font-size:1.6rem;padding:2rem}
.feat .pbd{padding:2rem;justify-content:center;gap:.8rem}
.feat h2{font-size:clamp(1.4rem,2.2vw,2rem);margin:0}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .25s,box-shadow .25s}
.post[hidden]{display:none}
.post:hover{transform:translateY(-.3rem);box-shadow:0 18px 36px rgba(10,31,61,.1)}
.pt{--a:#1b4a8a;position:relative;overflow:hidden;height:9rem;background:linear-gradient(135deg,var(--a),var(--navy));display:flex;align-items:flex-end;padding:1rem;color:#fff;font-weight:800;font-size:1.05rem}
.pt::after{content:"";position:absolute;right:-1.5rem;top:-1.5rem;width:7rem;height:7rem;border-radius:50%;background:#ffffff14}
.pt.a2{--a:#0e7c66}.pt.a3{--a:#c2410c}.pt.a4{--a:#6d28d9}.pt.a5{--a:#b45309}.pt.a6{--a:#0369a1}
.pbd{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.pbd h3{font-size:1.12rem}.pbd p{color:var(--mut);font-size:.92rem}
.pbd .more{margin-top:auto;padding-top:.4rem}
.empty{text-align:center;color:var(--mut);padding:2rem 0}
@media(max-width:1000px){.feat{grid-template-columns:1fr}.feat .pt{min-height:10rem;height:10rem}}
@media(max-width:640px){.feat .pbd{padding:1.4rem}}

/* =========================================================
   29. SERVICE PAGE (health card, feature checks; e.g. Website maintenance Jaigaon)
   ========================================================= */
.hc{position:relative;background:#fff;color:var(--ink);border-radius:1.2rem;padding:1.6rem;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.hc .sh{width:3.4rem;height:3.4rem;border-radius:1rem;background:var(--navy);color:var(--amber);display:grid;place-items:center;margin-bottom:1rem}
.hc .sh svg{width:1.8rem;height:1.8rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hc h3{font-size:1.15rem;margin-bottom:.8rem}
.hc ul{padding:0;margin:0;list-style:none;display:grid;gap:.6rem}
.hc li,.fc{display:flex;align-items:center;gap:.7rem;font-weight:600}
.hc li{font-size:.93rem;padding:.6rem .8rem;background:var(--soft);border-radius:.7rem}
.hc li::before,.fc::before{content:"\2713";display:grid;place-items:center;flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--wa);color:#fff;font-size:.8rem}
.hc .chip{top:-1rem;right:-1rem}
.fc{align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem;background:#fff}
.fc::before{background:var(--amber);color:var(--navy);margin-top:.1rem}
@media(max-width:1000px){.hc .chip{right:.5rem}}

/* =========================================================
   30. BLOG DETAIL PAGE (article body, table of contents, share, author box)
   ========================================================= */
.rp{position:fixed;top:0;left:0;height:.25rem;width:0;background:var(--amber);z-index:90}
.ph .meta{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.88rem;color:#a9bbd8;margin-top:1.2rem}
.ph .atag{display:inline-block;background:var(--amber);color:var(--navy);font-weight:700;font-size:.78rem;border-radius:99px;padding:.25rem .8rem;margin-bottom:1rem}
.ph h1.at{max-width:26ch}
.art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:3.5rem;align-items:start}
.art{max-width:46rem}
.art h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:2.4rem 0 .8rem;scroll-margin-top:6rem}
.art h2:first-child{margin-top:0}
.art p{margin-bottom:1.1rem;font-size:1.04rem;line-height:1.8;color:#27364d}
.art ul,.art ol{margin:0 0 1.3rem 1.2rem;padding:0}
.art li{margin-bottom:.5rem;line-height:1.75;color:#27364d}
.art a{color:var(--blue);text-decoration:underline}
.art .lede{font-size:1.2rem;color:var(--ink);font-weight:500}
.callout{border-left:4px solid var(--amber);background:#fffaf0;border-radius:0 var(--r) var(--r) 0;padding:1.1rem 1.3rem;margin:1.6rem 0}
.callout p{margin:0}
.tblw{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--r)}
.art table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:30rem}
.art th{background:var(--navy);color:#fff;text-align:left;padding:.8rem 1rem}
.art td{padding:.8rem 1rem;border-top:1px solid var(--line);vertical-align:top;color:#27364d}
.art td:first-child{font-weight:700}
.side{position:sticky;top:6rem;display:grid;gap:1.2rem}
.toc,.sq{border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;background:#fff}
.toc h3{font-size:1rem;margin-bottom:.7rem}
.toc ol{list-style:none;padding:0;margin:0;display:grid;gap:.1rem}
.toc a{display:block;padding:.4rem .7rem;border-left:2px solid var(--line);font-size:.9rem;color:var(--mut)}
.toc a:hover,.toc a.on{color:var(--navy);border-left-color:var(--amber);font-weight:700}
.sq{background:var(--navy);color:#fff;border:0}
.sq h3{font-size:1.1rem}
.sq p{color:#c5d3ea;font-size:.9rem;margin:.4rem 0 1rem}
.sq .btn{width:100%}
.share{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.share b{font-size:.9rem;margin-right:.3rem}
.share a,.share button{font:inherit;font-weight:600;font-size:.85rem;border:1px solid var(--line);background:#fff;border-radius:99px;padding:.45rem 1rem;cursor:pointer;color:var(--ink);text-decoration:none}
.share a:hover,.share button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.author{display:flex;gap:1rem;align-items:center;background:var(--soft);border-radius:var(--r);padding:1.3rem;margin-top:2rem}
.author .av{flex:none;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--navy);color:var(--amber);display:grid;place-items:center;font-weight:800}
.author b{display:block}.author span{color:var(--mut);font-size:.9rem}
@media(max-width:1000px){.art-wrap{grid-template-columns:1fr;gap:2rem}.side{position:static}.toc{display:none}}



/*by Dream Tree Technologies*/

.tc blockquote {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}
    .tc blockquote::-webkit-scrollbar {
        width: 6px;
    }

    .tc blockquote::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .tc blockquote::-webkit-scrollbar-thumb {
        background: #3478D4;
        border-radius: 10px;
    }
/*end by Dream Tree Technologies*/