/* ══════════════════════════════════════════════════════════════
   ECOMMERCE PAGE THEME  ·  ecommerce-website-development-company-in-gurgaon.html
   Loaded AFTER gurgaon-page.css and ONLY on this page.
   Purpose: lift the page out of the dark agency palette into a light
   storefront palette, and make the surfaces read like product UI.
   No markup, copy, schema or meta is touched by this file.
   ══════════════════════════════════════════════════════════════ */

:root{
    --ec-ink:#0f1222;          /* headings */
    --ec-body:#5a6172;         /* body copy */
    --ec-muted:#8a90a2;        /* captions */
    --ec-line:#e8eaf2;         /* hairlines */
    --ec-surface:#ffffff;      /* cards */
    --ec-wash:#f6f7fc;         /* section wash */
    --ec-wash2:#fdf6f4;        /* warm wash */
    --ec-stock:#12a150;        /* "included" green, the in-stock cue */
    --ec-shadow:0 2px 10px rgba(16,20,45,.05);
    --ec-shadow-lg:0 18px 48px rgba(16,20,45,.10);
    --ec-radius:14px;          /* commerce UI corners, not agency pills */
}

/* ── NAVBAR: solid from the first pixel, colour logo ──────── */
nav#mainNav{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--ec-line)}
nav#mainNav .nav-link{color:#3a4152}
nav#mainNav .nav-link:hover{color:var(--red)}
nav#mainNav .navbar-toggler{border-color:#dfe2ec}
nav#mainNav .navbar-toggler-icon{filter:none}
nav#mainNav #navLogo{content:url("../img/logo.svg")}
.nav-cta-btn{border-radius:var(--ec-radius)!important;box-shadow:0 4px 14px rgba(255,56,56,.28)!important}
@media(max-width:991px){nav#mainNav .navbar-collapse{background:#fff;padding:16px 20px;border-radius:0 0 16px 16px;box-shadow:0 12px 24px rgba(16,20,45,.1)}}

/* ── HERO: storefront light ───────────────────────────────── */
#banner{
    background:linear-gradient(180deg,#ffffff 0%,#fdf7f5 38%,#f4f6fd 100%)!important;
    min-height:auto;
    padding:132px 0 76px;
    border-bottom:1px solid var(--ec-line);
}
@media(min-width:992px){#banner{padding:150px 0 90px}}
.h-blob{filter:blur(110px)}
.h-blob-1{background:#ffb4a2;opacity:.42}
.h-blob-2{background:#c9d8ff;opacity:.5}
.h-blob-3{background:#ffd9a8;opacity:.4}
/* product-grid wash instead of the dark dot field */
.h-grid{
    background-image:linear-gradient(rgba(16,20,45,.045) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(16,20,45,.045) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%);
    mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%);
}
.hero-badge{background:#fff;border:1px solid var(--ec-line);color:#c0392b;box-shadow:var(--ec-shadow)}
h1.hero-h{color:var(--ec-ink)}
.hero-tw-wrap{color:#4a5162}
#tw-text{color:var(--red-d)}
.hero-sub{color:var(--ec-body)}
/* attribute chips, the way a product page lists specs */
.hero-chip{background:#fff;border:1px solid var(--ec-line);color:#3f4657;box-shadow:var(--ec-shadow);backdrop-filter:none}
.hero-chip i{color:var(--red)}
.btn-ho{background:#fff;color:#2b3142;border:1.5px solid #dfe3ee;backdrop-filter:none;box-shadow:var(--ec-shadow)}
.btn-ho:hover{background:#fff;border-color:#c3c9db;color:var(--ec-ink);box-shadow:var(--ec-shadow-lg)}
.hero-scroll-btn{color:#b3b9ca}

/* ── HERO FORM: checkout panel, not smoked glass ──────────── */
.hero-form{
    background:#fff;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border:1px solid var(--ec-line);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(16,20,45,.12);
}
.hero-form>p:first-child{color:var(--ec-muted)!important}
.hero-form>p:nth-child(2){color:var(--ec-ink)!important}
.hero-form>p:nth-child(3){color:var(--ec-muted)!important}
.hf-label{color:#6b7285}
.hero-form .form-control{background:#fbfcfe!important;border:1.5px solid #e4e7f1!important;color:#1b2030!important;border-radius:10px!important}
.hero-form .form-control::placeholder{color:#a9afc0!important}
.hero-form .form-control:focus{background:#fff!important;border-color:rgba(255,56,56,.55)!important;color:#1b2030!important}
.hero-form>p:last-child{color:#b0b6c6!important}

/* ── COMMERCE BUTTONS: rectangles read as checkout ────────── */
.btn-hp,.btn-sc,.btn-cta-w,.btn-cta-dark{border-radius:var(--ec-radius)}
.btn-ho{border-radius:var(--ec-radius)}
.btn-hf{border-radius:var(--ec-radius)}

/* ── TRUST BAR: the strip under a checkout button ─────────── */
.marquee-wrap{background:var(--ec-wash);border-color:var(--ec-line)}
.mq-item{color:#7d8496}

/* ── STATS ────────────────────────────────────────────────── */
.stats-section{border-color:var(--ec-line)}
.stat-box{border-right-color:var(--ec-line)}
.stat-lbl{color:var(--ec-muted)}

/* ── SERVICE STACK: light product panels ──────────────────── */
.stack-head-band{background:var(--ec-wash);padding:76px 0 44px;border-top:1px solid var(--ec-line)}
.stack-head-band .sec-h-dark{color:var(--ec-ink);-webkit-text-fill-color:var(--ec-ink)}
.stack-head-band .sec-sub-dark{color:var(--ec-body)}
.stack-head-band .sec-tag{background:rgba(255,56,56,.09);border-color:rgba(255,56,56,.2);color:var(--red-d)}

.sc-1{background:#ffffff}
.sc-2{background:#fdf6f4}
.sc-3{background:#f4f7fd}
.sc-4{background:#f3faf5}
.sc-2,.sc-3,.sc-4{box-shadow:0 -20px 50px rgba(16,20,45,.10)}
.sc-2::before,.sc-3::before,.sc-4::before{background:linear-gradient(90deg,transparent,rgba(255,56,56,.3),transparent)}
.sc-ghost-num{color:rgba(16,20,45,.05)}
.sc-tag{background:#fff;border:1px solid var(--ec-line);color:var(--red-d);box-shadow:var(--ec-shadow)}
.sc-title{color:var(--ec-ink)}
.sc-desc{color:var(--ec-body)}
.sc-feat li{color:#474e60}
/* green ticks: these read as "included", the way a plan or product page lists what you get */
.sc-feat li i{color:var(--ec-stock)}
/* the screenshot framed like a product shot */
.sc-visual{
    background:#fff;
    padding:10px;
    border:1px solid var(--ec-line);
    border-radius:18px;
    box-shadow:var(--ec-shadow-lg);
}
.sc-visual img{border-radius:10px}

/* ── PROCESS: light ───────────────────────────────────────── */
.process-section{background:var(--ec-wash)}
.process-section .sec-h-dark{color:var(--ec-ink);-webkit-text-fill-color:var(--ec-ink)}
.process-section .sec-sub-dark{color:var(--ec-body)}
.process-section .sec-tag{background:rgba(255,56,56,.09);border-color:rgba(255,56,56,.2);color:var(--red-d)}
.proc-card{background:#fff;border:1px solid var(--ec-line);box-shadow:var(--ec-shadow)}
.proc-card:hover{background:#fff;border-color:rgba(255,56,56,.3);box-shadow:var(--ec-shadow-lg)}
.proc-ghost{color:rgba(16,20,45,.06)}
.proc-icon{background:#fff5f3;border-color:#ffe2db}
.proc-title{color:var(--ec-ink)}
.proc-desc{color:var(--ec-body)}

/* ── PORTFOLIO: light gallery, cards behave like product tiles ─ */
.portfolio-section{background:#fff;border-top:1px solid var(--ec-line)}
.portfolio-section .sec-h-dark{color:var(--ec-ink);-webkit-text-fill-color:var(--ec-ink)}
.portfolio-section .sec-sub-dark{color:var(--ec-body)}
.portfolio-section .sec-tag{background:rgba(255,56,56,.09);border-color:rgba(255,56,56,.2);color:var(--red-d)}
.pf-filter-btn{background:#fff;border:1.5px solid #e2e5f0;color:#555d70}
.pf-filter-btn.active,.pf-filter-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.project-card{border:1px solid var(--ec-line);box-shadow:var(--ec-shadow);transition:box-shadow .3s,transform .3s}
.project-card:hover{box-shadow:var(--ec-shadow-lg);transform:translateY(-4px)}

/* ── TESTIMONIALS: light review cards ─────────────────────── */
.testi-section{background:var(--ec-wash)}
.testi-section .sec-h-dark{color:var(--ec-ink);-webkit-text-fill-color:var(--ec-ink)}
.testi-section .sec-sub-dark{color:var(--ec-body)}
.testi-section .sec-tag{background:rgba(255,56,56,.09);border-color:rgba(255,56,56,.2);color:var(--red-d)}
.testi-card{background:#fff;border:1px solid var(--ec-line);box-shadow:var(--ec-shadow)}
.testi-quote-mark{color:rgba(255,56,56,.16)}
.testi-body{color:#474e60}
.testi-name{color:var(--ec-ink)}
.testi-role{color:var(--ec-muted)}
#testiCarousel .carousel-control-prev,#testiCarousel .carousel-control-next{background:#fff;border:1px solid var(--ec-line);box-shadow:var(--ec-shadow)}
/* base Bootstrap arrow SVG is white; brightness(0) turns it dark on the new white button */
#testiCarousel .carousel-control-prev-icon,#testiCarousel .carousel-control-next-icon{filter:brightness(0) opacity(.5)}

/* ── GENERIC DARK-SECTION TAGS ELSEWHERE ──────────────────── */
.pain-section .sec-tag,.industries-section .sec-tag,.tech-section .sec-tag,.faq-section .sec-tag,.contact-section .sec-tag{color:var(--red-d)}

/* ── CARD SURFACES: consistent product-tile feel ──────────── */
.pain-card,.why-card,.ind-card,.tech-chip,.ci-card{border-color:var(--ec-line)}
.why-card{background:#fff;box-shadow:var(--ec-shadow)}
.pain-section{background:var(--ec-wash2)}
.industries-section{background:var(--ec-wash)}
.tech-section{background:#fff;border-top:1px solid var(--ec-line)}
.contact-section{background:var(--ec-wash)}

/* ── FOOTER stays dark on purpose: it anchors a light page ── */

/* ── MOBILE ───────────────────────────────────────────────── */
@media(max-width:767px){
    #banner{padding:112px 0 56px}
    .hero-form{padding:26px}
    .sc-visual{padding:8px}
}

/* ══════════════════════════════════════════════════════════════
   ECOMMERCE WORK  ·  live storefronts in browser frames
   Cards are <a> wrappers, so every child is inline by default.
   ══════════════════════════════════════════════════════════════ */
.ep-work-section{background:#fff;border-top:1px solid var(--ec-line)}
.ep-card{
    display:flex;flex-direction:column;height:100%;
    text-decoration:none;color:inherit;background:#fff;
    border:1px solid var(--ec-line);border-radius:18px;overflow:hidden;
    box-shadow:var(--ec-shadow);
    transition:box-shadow .3s,border-color .3s,transform .3s;
}
.ep-card:hover,.ep-card:focus-visible{box-shadow:var(--ec-shadow-lg);border-color:rgba(255,56,56,.3);transform:translateY(-4px);color:inherit}
.ep-bar{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--ec-line);background:linear-gradient(180deg,#fcfcfe,#f5f6fa)}
.ep-dots{display:flex;gap:5px;flex-shrink:0}
.ep-dots i{width:8px;height:8px;border-radius:50%;display:block}
.ep-dots i:nth-child(1){background:#ff5f57}.ep-dots i:nth-child(2){background:#febc2e}.ep-dots i:nth-child(3){background:#28c840}
.ep-url{flex:1;min-width:0;font-size:.7rem;color:#8a90a2;background:#fff;border:1px solid var(--ec-line);border-radius:50px;padding:3px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-view{display:block;position:relative;height:250px;overflow:hidden;background:#f2f3f8}
.ep-view img{width:100%;height:auto;display:block;transform:translateY(0);transition:transform 7s cubic-bezier(.32,0,.36,1)}
.ep-card:hover .ep-view img,.ep-card:focus-visible .ep-view img{transform:translateY(calc(-100% + 250px))}
.ep-view::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -30px 30px -26px rgba(16,20,45,.16)}
.ep-body{display:block;padding:22px 22px 24px;flex:1}
.ep-tag{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red-d);background:rgba(255,56,56,.08);border:1px solid rgba(255,56,56,.18);border-radius:50px;padding:3px 10px}
.ep-name{font-size:1.14rem;font-weight:800;color:var(--ec-ink);margin:11px 0 7px}
.ep-desc{font-size:.87rem;color:var(--ec-body);line-height:1.7;margin:0}
.ep-list{list-style:none;padding:0;margin:14px 0 0}
.ep-list li{position:relative;padding-left:23px;margin-bottom:9px;font-size:.82rem;color:#5f6675;line-height:1.6}
.ep-list li i{position:absolute;left:0;top:3px;color:var(--ec-stock);font-size:.78rem}
.ep-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.84rem;font-weight:700;color:var(--red-d)}
.ep-card:hover .ep-link{gap:10px}
.ep-link i{transition:transform .25s}
@media (prefers-reduced-motion:reduce){.ep-view img{transition:none}.ep-card:hover .ep-view img{transform:none}}
@media(max-width:575px){.ep-view{height:210px}.ep-card:hover .ep-view img{transform:translateY(calc(-100% + 210px))}}