/* =============================================
   ULTRAGUARD — HEADER CSS (self-contained)
   Include AFTER Bootstrap CSS + Bootstrap Icons CSS.
============================================= */

/* ── TOKENS ── */
:root {
    --red: #d91c1c;
    --red-dark: #a81515;
    --red-glow: rgba(217, 28, 28, 0.22);
    --ink: #0c0c0c;
    --dark: #111111;
    --dark-2: #1a1a1a;
    --panel: #222222;
    --muted: #666666;
    --line: #e8e8e8;
    --soft: #f5f5f3;
    --white: #ffffff;
    --radius: 6px;
    --radius-lg: 12px;
    --container: 1200px;
    --gap: 20px;
    --shadow: 0 20px 60px rgba(0, 0, 0, .10);
    --shadow-lg: 0 32px 80px rgba(0, 0, 0, .16);
}

/* ── BASE RESET ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, strong, b, em, i, small, mark, del, ins, sub, sup,
ul, ol, li, dl, dt, dd,
div, section, article, aside, header, footer, nav, main,
figure, figcaption, blockquote, pre, code, table, caption,
thead, tbody, tfoot, tr, th, td,
form, label, fieldset, legend,
button, input, select, textarea, optgroup, option,
iframe, img, video, audio {
    font-family: "Barlow Condensed", sans-serif !important;
}
html {
    scroll-behavior: smooth;
    width: 100%;
    /* overflow-x: hidden;  <-- HATA DIYA, ye sticky ko todta tha */
}

body {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;   /* horizontal scroll rokne ke liye ye kaafi hai */
    width: 100%;
    position: relative;
}

body.menu-open {
    overflow: hidden;
}

img,
video {
    display: block;
    max-width: 100%;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

ul[role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
}

p {
    margin-top: 0;
}

/* ── CONTAINER ── */
.container {
    width: min(100% - 40px, var(--container));
    margin-inline: auto;
}

/* ── BUTTON (used by "Become a Dealer" in header) ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    font-size: clamp(15.2px, .3vw + .85rem, 16.8px);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

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

.btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.btn--red {
    color: var(--white);
    background: var(--red);
    border-color: var(--red);
    box-shadow: 0 10px 28px var(--red-glow);
}

.btn--red:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
    color: white;
}

/* ── TOP STRIP ── */
.top-strip {
    position: relative;
    z-index: 201;
    background: var(--ink);
    color: #ebebeb;
    font-size: clamp(13.12px, .25vw + .74rem, 14.72px);
    font-weight: 600;
}

.ts-inner {
    width: min(100% - 40px, var(--container));
    margin-inline: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.ts-left,
.ts-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    row-gap: 6px;
}

.ts-left a,
.ts-right a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ebebeb;
    white-space: nowrap;
    transition: color .15s;
}

.ts-left a:hover,
.ts-right a:hover {
    color: var(--red);
}

.ts-left svg {
    width: 13px;
    height: 13px;
    color: var(--red);
}

.ts-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .2);
    flex-shrink: 0;
}

/* ── HEADER (solid black, sticky) ── */
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #0a0a0c;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: box-shadow .3s ease;
    max-width: 100vw;
    overflow: visible;
}

.site-header.scrolled {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

body.menu-open .site-header {
    background: #0a0a0c;
    border-bottom-color: rgba(255, 255, 255, .1);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    gap: 28px;
}

.brand img {
    width: 172px;
    height: auto;
    display: block;
}

/* nav list */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
    /* FIX: dropdown panels now position relative to the whole nav bar
       (see .has-dd below), not to each individual trigger li — this
       keeps every panel centered and fully on-screen at any width,
       instead of overflowing off the left edge for items near the
       start of the nav (e.g. "PPF") on wide desktop screens. */
    position: relative;
}

.nav-menu>li>a,
.nav-top,
.nav-drop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(14.08px, .5vw + .74rem, 16.32px);
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius);
    transition: color .15s, background .15s;
}

.nav-menu>li>a:hover,
.nav-top:hover,
.nav-drop-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.nav-menu>li>a.is-active,
.nav-top.is-active {
    color: var(--red);
}

.nav-actions .btn--outline {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .30) !important;
    background: transparent !important;
}

.nav-actions .btn--outline:hover {
    color: #fff !important;
    border-color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
}

.nav-top svg,
.nav-drop-btn svg {
    width: 13px;
    height: 13px;
    transition: transform .2s;
    opacity: .7;
}

.has-dd:hover .nav-top svg,
.has-mega:hover .nav-drop-btn svg,
.has-mega:focus-within .nav-drop-btn svg {
    transform: rotate(180deg);
}

/* ── MEGA DROPDOWN ── */
.has-dd {
    /* No longer position:relative — panels now anchor to .nav-menu
       (see above) so they stay centered/on-screen regardless of which
       item they belong to. */
}

/*
   FIX: dropdown used to be left:0 by default, with only the last 3
   items forced to right:0 (nth-last-child hack). On narrower laptop
   screens that made middle items (e.g. "Window Film") overflow past
   the right edge of the viewport and get visually clipped.
   Now every panel is centered under its own trigger instead, and its
   own max-width always keeps it inside the viewport — so it can never
   run off the side of the screen no matter which item it belongs to.
*/
.dd-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translate(-50%, 12px);
    width: clamp(460px, 55vw, 760px);
    max-width: calc(100vw - 40px);
    background: #0e0e11;
    border: 1px solid rgba(255, 255, 255, .1);
    border-top: 3px solid var(--red);
    border-radius: 16px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 60;
}

.dd-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -15px;
    height: 15px;
}

.has-dd:hover .dd-panel,
.has-dd:focus-within .dd-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.dd-mega {
    display: grid;
    grid-template-columns: minmax(180px, 250px) 1fr;
    gap: 26px;
    padding: 24px;
}

.dd-panel--ppf {
    width: clamp(520px, 62vw, 860px);
}

.dd-mega--ppf {
    grid-template-columns: 1fr minmax(130px, 190px);
    gap: 20px;
    padding: 20px 24px;
}

.dd-cat-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 0 16px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    padding-right: 20px;
}

.dd-cat-group {
    margin-bottom: 14px;
}

.dd-cat-group:last-child {
    margin-bottom: 0;
}

.dd-cat__label {
    font-size: clamp(11.52px, .2vw + .66rem, 12.8px);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--red);
    padding: 0 0 7px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(217, 28, 28, .22);
    display: block;
}

.dd-cat__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s, padding-left .15s;
}

.dd-cat__link span {
    font-size: clamp(14.72px, .3vw + .82rem, 16.32px);
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

.dd-cat__link i {
    font-size: 12.48px;
    color: var(--red);
    opacity: 0;
    transition: opacity .15s;
}

.dd-cat__link:hover {
    background: rgba(255, 255, 255, .05);
    padding-left: 10px;
}

.dd-cat__link:hover i {
    opacity: 1;
}

.dd-ppf-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dd-ppf-card .dd-big {
    height: clamp(110px, 15vw, 170px);
}

@media (max-width: 1400px) {
    .nav-menu {
        gap: 0;
    }

    .nav-menu>li>a,
    .nav-top,
    .nav-drop-btn {
        padding: 10px 10px;
    }

    .dd-cat-cols {
        gap: 0 12px;
        padding-right: 14px;
    }

    .dd-mega--ppf {
        gap: 14px;
        padding: 18px;
    }
}

@media (max-width: 1250px) {
    .dd-panel--ppf {
        width: clamp(460px, 78vw, 700px);
    }

    .dd-mega--ppf {
        grid-template-columns: 1fr minmax(100px, 140px);
    }

    .dd-ppf-card .dd-big {
        height: clamp(90px, 13vw, 140px);
    }
}

@media (max-width: 1100px) {
    .dd-mega,
    .dd-mega--ppf {
        display: block !important;
    }

    .dd-cat-cols {
        display: block !important;
        grid-template-columns: 1fr;
        border-right: none;
        padding-right: 0;
        row-gap: 14px;
    }

    .dd-cat-cols > div {
        display: block !important;
        width: 100% !important;
    }

    .dd-ppf-card {
        display: none;
    }

    .dd-cat__link {
        padding: 9px 8px;
        background: rgba(255, 255, 255, .04);
        margin-bottom: 3px;
    }

    .dd-cat-group,
    .dd-cat__label,
    .dd-cat__link {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .dd-cat__link {
        display: flex !important;
    }
}

.dd-links {
    display: flex;
    flex-direction: column;
}

.dd-links__label {
    font-size: clamp(12.16px, .2vw + .7rem, 13.6px);
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    padding: 4px 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.dd-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding: 11px 8px;
    border-radius: 8px;
    transition: background .15s, padding-left .15s;
}

.dd-link__name {
    font-size: clamp(16px, .3vw + .9rem, 17.6px);
    font-weight: 700;
    color: #fff;
}

.dd-link__meta {
    font-size: clamp(13.12px, .2vw + .76rem, 14.72px);
    font-weight: 500;
    color: rgba(255, 255, 255, .42);
}

.dd-link__arrow {
    width: 15px;
    height: 15px;
    margin-left: auto;
    color: var(--red);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s, transform .15s;
}

.dd-link:hover {
    background: rgba(255, 255, 255, .05);
    padding-left: 12px;
}

.dd-link:hover .dd-link__arrow {
    opacity: 1;
    transform: translateX(0);
}

.dd-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.dd-big {
    position: relative;
    display: block;
    height: clamp(150px, 18vw, 230px);
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .08);
}

.dd-big img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    z-index: -2;
    transition: transform .5s ease;
}

.dd-big::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(7, 7, 8, .92) 6%, rgba(7, 7, 8, .25) 55%, transparent);
}

.dd-big:hover img {
    transform: scale(1.08);
}

.dd-big__body {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
}

.dd-big__t {
    font-size: clamp(16px, .3vw + .9rem, 17.92px);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
}

.dd-big__s {
    font-size: clamp(13.12px, .2vw + .74rem, 14.4px);
    font-weight: 500;
    color: rgba(255, 255, 255, .62);
    margin-top: 2px;
}

.dd-big::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 12px;
    box-shadow: inset 0 0 0 0 var(--red);
    transition: box-shadow .2s;
}

.dd-big:hover::before {
    box-shadow: inset 0 0 0 2px var(--red);
}

.nav-drop-btn svg {
    width: 14px;
    height: 14px;
    transition: transform .2s;
}

/* nav actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── RESPONSIVE (mobile nav) ── */
@media (max-width: 1100px) {
    .nav-menu {
        display: none;
    }

    .nav-actions .btn--outline {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-menu.is-open {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #0c0c0e;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Extra bottom padding — some pages have a fixed bottom nav bar
           (Home / PPF / Quote / Colour / Dealers) sitting on top of this
           menu, so the last items were getting hidden behind it with no
           way to scroll past it. This guarantees room to scroll every
           item fully into view, plus the device's safe-area inset. */
        padding: 16px 20px calc(100px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(255, 255, 255, .1);
        z-index: 300;
        gap: 0;
    }

    .nav-menu.is-open>li>a,
    .nav-menu.is-open .nav-top,
    .nav-menu.is-open .nav-drop-btn {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 17px 2px;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        border-radius: 0;
        font-size: clamp(15.2px, 1vw + .8rem, 17.6px);
    }

    /* Just an active-state highlight now — NOT sticky/pinned. It scrolls
       away with the rest of the list like any other row, so it reads as
       part of the accordion instead of a floating header. */
    .nav-menu.is-open .has-dd.is-open > .nav-top {
        background: #0c0c0e;
        border: 1px solid var(--red);
        border-radius: 8px;
        padding-left: 12px;
        padding-right: 12px;
        color: var(--red);
    }

    .nav-menu.is-open .has-dd .nav-top svg {
        transition: transform .2s;
    }

    .nav-menu.is-open .has-dd.is-open .nav-top svg {
        transform: rotate(180deg);
    }

    .mega-panel,
    .dd-panel {
        display: none;
    }

    .nav-menu.is-open .has-dd .dd-panel,
    .nav-menu.is-open .has-mega .mega-panel {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        z-index: auto !important;
    }

    .has-mega.is-open .mega-panel {
        display: grid;
    }

    .has-dd.is-open .dd-panel {
        display: block;
    }

    /* Cap an open category panel at 300px tall with its own scrollbar,
       instead of letting a long list (Color PPF, etc.) keep growing the
       whole mobile menu taller and taller. */
    .nav-menu.is-open .has-dd.is-open .dd-panel {
        max-height: 300px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .dd-mega {
        display: block;
        padding: 10px 0 12px;
    }

    .dd-cat-group {
        margin-bottom: 18px;
    }

    .dd-cat__label {
        font-size: 12.48px;
        letter-spacing: .04em;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .dd-cat__link {
        padding: 12px 12px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: 8px;
        margin-bottom: 6px;
    }

    .dd-cat__link span {
        font-size: 15.36px;
    }

    .dd-cat__link i {
        opacity: 1 !important;
        font-size: 11.52px;
    }

    .dd-links__label {
        display: none;
    }

    .dd-link {
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: 8px;
        margin-bottom: 6px;
        padding: 13px 14px;
    }

    .dd-link__meta {
        margin-left: auto;
    }

    .dd-link__arrow {
        display: none;
    }

    .dd-cards {
        display: none;
    }

    .mega-feature {
        display: none;
    }
}

/* top-strip — keep it tidy on phones instead of wrapping into a tall block */
@media (max-width: 760px) {
    .ts-inner {
        justify-content: center;
        text-align: center;
        display: none;
    }

    .ts-left,
    .ts-right {
        justify-content: center;
        width: 100%;
    }

    .ts-right {
        gap: 12px;
    }
}

/* keep logo + CTA + hamburger from colliding on narrow phones */
@media (max-width: 480px) {
    .brand img {
        width: 132px;
    }

    .nav-actions {
        gap: 8px;
    }

    .nav-actions .btn--red {
        padding: 10px 14px;
        min-height: 42px;
        gap: 6px;
    }

    .nav-actions .btn--red svg,
    .nav-actions .btn--red i {
        display: none;
    }
}

@media (max-width: 380px) {
    .nav-actions .btn--red .btn-label {
        display: none;
    }

    .nav-actions .btn--red {
        width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
    }

    .nav-actions .btn--red::after {
        content: "\2192";
        font-size: 17.6px;
        line-height: 1;
    }
}

.Become-a-Dealer{
padding: 6px 8px;
}
.Become-a-Dealer:hover{
    color: var(--white) !important;
}

@media(max-width:768px){
    .br{
        display: none;
    }
}