/* ============================================================   TRINITY EV — BRANDING & RESET CSS (CLEANED & OPTIMIZED)   ============================================================ *//* -----------------------------   1) FONT-FACE DECLARATIONS----------------------------- */@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; }@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; }@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; }@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; }@font-face { font-family: "SpaceGrotesk"; src: url("../fonts/SpaceGrotesk-Regular.ttf") format("truetype"); font-weight: 400; }@font-face { font-family: "SpaceGrotesk"; src: url("../fonts/SpaceGrotesk-Medium.ttf") format("truetype"); font-weight: 500; }@font-face { font-family: "SpaceGrotesk"; src: url("../fonts/SpaceGrotesk-SemiBold.ttf") format("truetype"); font-weight: 600; }@font-face { font-family: "SpaceGrotesk"; src: url("../fonts/SpaceGrotesk-Bold.ttf") format("truetype"); font-weight: 700; }@font-face { font-family: "Oswald"; src: url("../fonts/Oswald-Regular.ttf") format("truetype"); font-weight: 400; }@font-face { font-family: "Oswald"; src: url("../fonts/Oswald-Medium.ttf") format("truetype"); font-weight: 500; }@font-face { font-family: "Oswald"; src: url("../fonts/Oswald-SemiBold.ttf") format("truetype"); font-weight: 600; }@font-face { font-family: "Oswald"; src: url("../fonts/Oswald-Bold.ttf") format("truetype"); font-weight: 700; }@font-face { font-family: "HindSiliguri"; src: url("../fonts/HindSiliguri-Regular.ttf") format("truetype"); font-weight: 400; }@font-face { font-family: "HindSiliguri"; src: url("../fonts/HindSiliguri-Medium.ttf") format("truetype"); font-weight: 500; }@font-face { font-family: "HindSiliguri"; src: url("../fonts/HindSiliguri-SemiBold.ttf") format("truetype"); font-weight: 600; }@font-face { font-family: "HindSiliguri"; src: url("../fonts/HindSiliguri-Bold.ttf") format("truetype"); font-weight: 700; }/* ============================================================   2) ROOT VARIABLES — BRAND SYSTEM============================================================ */:root {    /* BRAND COLORS */    --trinity-red: #e00019;    --trinity-green: #00b23a;    --trinity-black: #1a1a1a;    --trinity-dark: #111;    --trinity-grey-1: #222;    --trinity-grey-2: #444;    --trinity-grey-3: #888;    --trinity-white: #fff;    --trinity-bg-light: #f5f5f5;    /* GRADIENTS */    --grad-electric: linear-gradient(135deg, var(--trinity-red), var(--trinity-green));    --grad-dark-electric: linear-gradient(135deg, #000, var(--trinity-black));    /* TYPOGRAPHY */    --font-primary: "Poppins", sans-serif;    --font-heading: "SpaceGrotesk", sans-serif;    --font-impact: "Oswald", sans-serif;    --font-bengali: "HindSiliguri", sans-serif;    /* FONT SIZES */    --fs-xxs: clamp(8px, 0.6vw, 10px);    --fs-xs: clamp(10px, 0.7vw, 12px);    --fs-sm: clamp(12px, 0.9vw, 14px);    --fs-md: clamp(14px, 1vw, 16px);    --fs-lg: clamp(18px, 1.6vw, 22px);    --fs-xl: clamp(26px, 3vw, 34px);    --fs-xxl: clamp(38px, 5vw, 54px);    /* SPACING */    --space-4: 4px;    --space-8: 8px;    --space-12: 12px;    --space-16: 16px;    --space-20: 20px;    --space-24: 24px;    --space-32: 32px;    --space-40: 40px;    --space-48: 48px;    --space-64: 64px;    /* SHADOWS */    --shadow-soft: 0 4px 14px rgba(0,0,0,0.08);    --shadow-medium: 0 8px 24px rgba(0,0,0,0.15);    --shadow-hard: 0 10px 40px rgba(0,0,0,0.25);    /* RADIUS */    --radius-sm: 6px;    --radius-md: 12px;    --radius-lg: 20px;    --radius-full: 999px;    /* TRANSITIONS */    --fast: 0.2s ease;    --medium: 0.35s ease;    /* BACKGROUND GRAPHICS */    --bg-electric-noise: url('../graphics/electric-noise.png');    --bg-grid: url('../graphics/grid.svg');    --container-width: 1320px;}/* ============================================================   3) GLOBAL RESET============================================================ */*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }html { scroll-behavior: smooth; }body {    font-family: var(--font-impact);    font-size: var(--fs-md);    background: var(--trinity-white);    color: var(--trinity-black);    overflow-x: hidden!important;}* { -webkit-tap-highlight-color: transparent; }a { color: inherit; text-decoration: none; transition: var(--fast); }a:hover { opacity: .8; }ul { list-style: none; }img { max-width: 100%; display: block; }button { cursor: pointer; background: none; border: none; }::-webkit-scrollbar { width: 6px; }::-webkit-scrollbar-thumb { background: var(--trinity-grey-3); border-radius: 6px; }/* ============================================================   4) UTILITIES============================================================ */.container {    width: 100%;    max-width: var(--container-width);    margin: auto;    padding: 0 16px;}.flex { display: flex; align-items: center; }.flex-between { display: flex; justify-content: space-between; align-items: center; }.grid { display: grid; }.h-impact { font-family: var(--font-impact); }.h-electric { font-family: var(--font-heading); }.bg-electric { background: var(--bg-electric-noise) center/cover; }.bg-grid-dark { background: var(--bg-grid); background-size: 50px 50px; opacity: .08; }.bg-gradient-electric { background: var(--grad-electric); }.bg-gradient-dark { background: var(--grad-dark-electric); }.text-red { color: var(--trinity-red); }.text-green { color: var(--trinity-green); }.text-dark { color: var(--trinity-dark); }.py-40 { padding: 40px 0; }.py-80 { padding: 80px 0; }.w-100 { width: 100%; }/* DARK MODE */@media (prefers-color-scheme: dark) {    body { background: #000; color: #eee; }}

    @media (max-width: 992px) {
        html, body {
            overflow-x: hidden !important; /* prevents horizontal scroll on mobile */
        }
    }


    /* ============================================================   5) NAVBAR — PREMIUM DESKTOP + MOBILE============================================================ *//* ============================================================   HEADER (Sticky + Scroll Shrink)============================================================ */.main-header {    position: sticky;    top: 0;    z-index: 9999;    background: #fff;    transition: all .35s ease;}.navbar {    height: 90px;    display: flex;    align-items: center;    transition: height .35s ease;}.main-header.scrolled {    background: #fff;    box-shadow: 0 6px 18px rgba(0,0,0,0.08);}.main-header.scrolled .navbar {    height: 68px;}.nav-logo img {    height: 58px;}/* ============================================================   UNIVERSAL CALL BOX (Desktop + Mobile Same Style)============================================================ */.nav-call-box,.nav-call-box-nav {    display: flex;    align-items: center;    gap: 10px;    padding: 8px 14px;    border-radius: 12px;    background: #fff;}.nav-call-box i,.nav-call-box-nav i {    font-size: 26px;    color: var(--trinity-red);    font-weight: 700;}.call-text {    display: flex;    flex-direction: column;    line-height: 1.1;}.call-label {    font-size: 11px;    color: var(--trinity-grey-2);    text-transform: uppercase;    font-weight: 600;}.call-number {    font-size: 16px;    font-weight: 700;    color: var(--trinity-black);    white-space: nowrap;}/* Desktop uses .nav-call-box */.nav-call-box-nav { display: none !important; }/* ============================================================   DESKTOP MENU============================================================ */.desktop-menu ul {    display: flex;    align-items: center;    gap: 15px;}.nav-link {    position: relative;    display: flex;    align-items: center;    gap: 8px;    padding: 12px 10px;    font-size: 18px;    font-weight: 600;    border-radius: 50px;    transition: color .35s, background .35s;}/* Hover underline */.nav-link::before {    content: "";    position: absolute;    left: 50%;    bottom: 2px;    width: 0;    height: 3px;    transform: translateX(-50%);    background: var(--trinity-green);    border-radius: 25px;    opacity: 0;    transition: width .45s cubic-bezier(.25,.46,.45,.94), opacity .3s;}.nav-item:hover .nav-link {    color: var(--trinity-green);    background: rgba(0,178,58,0.10);}.nav-item:hover .nav-link::before {    width: 60%;    opacity: 1;}.nav-scooty-icon {    width: 15px;    transition: .25s ease;}.nav-item:hover .nav-scooty-icon {    filter: invert(59%) sepia(91%) saturate(586%) hue-rotate(95deg);}/* ============================================================   PREMIUM DROPDOWN MENU (Vertical Only)============================================================ */.dropdown {    position: relative;}/* Remove Bootstrap default icon */.dropdown-toggle::after {    display: none !important;    content: none !important;}.dropdown-arrow {    margin-left: 6px;    font-size: 14px;    transition: transform .25s ease;}.dropdown.open .dropdown-arrow {    transform: rotate(180deg);}/* Dropdown panel */.dropdown-menu {    position: absolute;    top: 60px;    left: 0;    min-width: 230px;    width: 100%;    padding: 12px 0;    background: rgba(255,255,255,0.9);    backdrop-filter: blur(14px);    border-radius: 14px;    box-shadow: 0 15px 35px rgba(0,0,0,0.18);    opacity: 0;    visibility: hidden;    transform: translateY(18px);    transition: all .28s cubic-bezier(.25,.46,.45,.94);    z-index: 9999;}/* Ensure vertical stacking */.dropdown-menu,.dropdown-menu ul,.dropdown-menu li {    display: block !important;    width: 100%;    margin: 0;    padding: 0;    list-style: none;}/* Desktop hover show */@media (min-width: 992px) {    .dropdown:hover .dropdown-menu {        opacity: 1;        visibility: visible;        transform: translateY(0);    }    .dropdown:hover .dropdown-arrow {        transform: rotate(180deg);    }}/* Mobile JS open */.dropdown.open .dropdown-menu {    opacity: 1;    visibility: visible;    transform: translateY(0);}/* Dropdown links */.dropdown-menu li a {    display: block;    padding: 12px 20px;    font-size: 15px;    font-weight: 500;    color: var(--trinity-black);    border-bottom: 1px solid rgba(0,0,0,0.06);    transition: .25s ease;}.dropdown-menu li:last-child a {    border-bottom: none;}.dropdown-menu li a:hover {    background: rgba(0,150,60,0.08);    color: var(--trinity-green);    padding-left: 28px;}
    /* ============================================================
       MEGA MENU — FINAL PROFESSIONAL VERSION
    ============================================================ */
    
    .mega-parent {
        position: relative;
    }
    
    .mega-menu {
        position: absolute;
        top: 72px;
        left: 50%;
        width: 1200px;
        transform: translateX(-50%) translateY(20px);
        background: #fff;
        padding: 32px;
        border-radius: 14px;
        box-shadow: var(--shadow-medium);
        display: flex;
        gap: 32px;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s ease;
        z-index: 999;
    }
    
    @media (min-width: 1200px) {
        .mega-parent:hover .mega-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
    }
    
    /* ================= LEFT SIDE ================= */
    
    .mega-left {
        flex: 2;
    }
    
    .mega-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 16px;
    }
    
    .mega-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }
    
    .mega-item {
        padding: 12px;
        background: var(--trinity-bg-light);
        border-radius: 12px;
        text-align: center;
        cursor: pointer;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    
    .mega-item:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    }
    
    .mega-item img {
        width: 100%;
        height: 100px;
        object-fit: contain;
        margin-bottom: 8px;
    }
    
    .mega-item p {
        margin: 0;
        font-weight: 600;
        font-size: 14px;
        color: #111;
    }
    
    /* ================= RIGHT SIDE (FIXED) ================= */
    
    .mega-right {
        flex: 1;
        padding-left: 32px;
        border-left: 2px solid #eee;
        display: flex;
        flex-direction: column;
    }
    
    .mega-right h4 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 12px;
        text-align: center;
    }
    
    /* Featured Product Card */
    .featured-product {
        flex: 1;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        border: 2px solid #eee;
        display: flex;
    }
    
    /* Image fully covers space */
    .featured-product img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    /* ================= MOBILE ================= */
    
    .nav-toggle {
        display: none;
    }
    
    @media (max-width: 1200px) {
    
        body {
            overflow-x: hidden !important;
        }
    
        .desktop-menu {
            display: none;
        }
    
        .nav-toggle {
            display: block;
        }
    
        .mega-menu {
            position: static;
            transform: none;
            width: 100%;
            flex-direction: column;
            padding: 16px 0;
            border-radius: 0;
            box-shadow: none;
        }
    
        .mega-left,
        .mega-right {
            width: 100%;
            padding: 0 16px;
            border-left: none;
            margin-bottom: 16px;
        }
    
        .mega-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
    
        .featured-product {
            height: 240px;
        }
    }

/* ============================================================   MOBILE MENU TOGGLE============================================================ */.nav-toggle { display: none; }@media (max-width: 992px) { body {overflow-x: hidden!important;}   .desktop-menu { display: none; }    .nav-toggle { display: block; }}/* Offcanvas */.offcanvas-menu {    position: fixed;    top: 0;    right: -100%;    width: 82%;    height: 100vh;    background: #fff;    padding: 20px;    border-left: 1px solid rgba(0,0,0,0.08);    box-shadow: -12px 0 35px rgba(0,0,0,0.15);    transition: right var(--medium);    z-index: 99999;}.offcanvas-menu.open { right: 0; }/* ============================================================   MOBILE NAVBAR LAYOUT (Logo Left — Call Center — Menu Right)============================================================ */@media (max-width: 992px) {    .navbar .container {        justify-content: center;        position: relative;        padding: 0 14px;    }    /* Left Logo */    .nav-logo {        position: absolute;        left: 10px;        top: 50%;        transform: translateY(-50%);    }    /* Center Call Box */    .nav-call-box-nav {        display: flex !important;        position: absolute;        left: 60%;        top: 50%;        transform: translate(-50%, -50%);        max-width: 200px;    }    /* Hide desktop call box */    .nav-call-box { display: none !important; }    /* Right Hamburger */    #hamburgerBtn {        position: absolute;        right: 12px;        top: 50%;        transform: translateY(-50%);    }}/* -----------------------------   Mobile Dropdown Animation----------------------------- */.dropdown-mobile .mobile-submenu {    max-height: 0;    overflow: hidden;    background: rgba(0,178,58,0.06);    border-radius: 10px;    padding-left: 18px;    margin-top: 4px;    opacity: 0;    transition:        max-height .45s cubic-bezier(.25,.46,.45,.94),        padding .35s,        opacity .35s;}.dropdown-mobile.open .mobile-submenu {    max-height: 500px;    opacity: 1;    padding: 10px 0;}.mobile-submenu .nav-link {    padding: 10px 0;    font-size: 16px;    color: var(--trinity-black);    border-bottom: 1px solid rgba(0,0,0,0.06);}.mobile-submenu li:last-child .nav-link { border-bottom: none; }
/* -----------------------------   EV Text----------------------------- */.text-success {    color: var(--trinity-green) !important;}/* -----------------------------   EV BUTTONS----------------------------- */.btn-ev {    padding: var(--space-12) var(--space-24);    background: var(--trinity-green);    color: #fff;    border-radius: var(--radius-full);    font-weight: 600;    transition: var(--medium);}.btn-ev:hover {    background: var(--trinity-red);    transform: translateY(-3px);}.btn-red { background: var(--trinity-red); }.btn-red:hover { background: var(--trinity-green); }/* ============================================================   HERO SECTION (Optimized & Cleaned)============================================================ */.hero-section {    position: relative;    padding: 40px 0 0;    background: url("../img/webs/hero-bg.webp") left center / cover no-repeat;    overflow: hidden;}/* ------------------------------------------------------------   Electric Particle FX------------------------------------------------------------ */.electric-particles {    position: absolute;    inset: 0;    background:        radial-gradient(circle at 20% 30%, rgba(255,0,40,0.25), transparent 60%),        radial-gradient(circle at 80% 70%, rgba(0,255,80,0.25), transparent 60%);    opacity: 0.35;    filter: blur(40px);    animation: particleFlow 8s linear infinite alternate;    z-index: 1;}@keyframes particleFlow {    from { transform: translateY(0); }    to   { transform: translateY(-40px); }}/* ------------------------------------------------------------   Light Sweep Line------------------------------------------------------------ */.hero-light-streak {    position: absolute;    top: 40%;    left: -30%;    width: 200%;    height: 4px;    background: linear-gradient(        90deg,        transparent,        rgba(255,255,255,0.7),        rgba(255,255,255,0.15),        transparent    );    animation: lightSweep 6s ease-in-out infinite;    z-index: 2;}@keyframes lightSweep {    0%   { transform: translateX(-20%) skewX(-10deg); opacity: 0; }    30%  { opacity: 1; }    60%  { transform: translateX(40%) skewX(-10deg); opacity: 1; }    100% { transform: translateX(90%) skewX(-10deg); opacity: 0; }}/* ============================================================   HERO GRID LAYOUT============================================================ */.hero {    position: relative;    display: flex;    justify-content: space-between;    align-items: flex-end;    gap: 40px;    min-height: 550px;    z-index: 3;}.hero-content {    max-width: 680px;    padding-bottom: 140px;}/* ============================================================   HERO TYPOGRAPHY============================================================ */.brand-highlight {    font-family: var(--font-impact);    color: var(--trinity-red);    letter-spacing: 2px;    font-size: 32px;    text-transform: uppercase;    margin-bottom: 10px;    display: block;}.hero-main-text {    font-family: var(--font-impact);    font-weight: 700;    font-size: 64px;    line-height: 1.1;    color: var(--trinity-black);    animation: glowPulse 3s ease-in-out infinite;}@keyframes glowPulse {    0%,100% { text-shadow: 0 0 0 transparent; }    50%     { text-shadow: 0 0 18px rgba(0,0,0,0.15); }}/* Underline */.electric-underline {    display: block;    width: 0;    height: 6px;    background: var(--grad-electric);    border-radius: 6px;    margin-top: 12px;    animation: underlineExpand 1.6s ease 0.5s forwards;}@keyframes underlineExpand {    from { width: 0; opacity: 0; }    to   { width: 140px; opacity: 1; }}/* Typing Line */.hero-animated-line {    margin-top: 16px;    font-size: 24px;    font-family: var(--font-primary);    font-weight: 600;    color: var(--trinity-grey-2);    height: 32px;    display: flex;    align-items: center;}.cursor {    font-size: 24px;    font-weight: 700;    color: var(--trinity-green);    margin-left: 3px;    animation: blink .6s infinite alternate;}@keyframes blink {    from { opacity: 1; }    to   { opacity: 0; }}/* ============================================================   HERO ACTIONS (CTA + CALL BOX)============================================================ */.hero-actions {    display: flex;    align-items: center;    gap: 10px;    flex-wrap: nowrap;}.hero-actions .btn-ev {    white-space: nowrap;}.hero-actions .nav-call-box {    display: flex;    align-items: center;    gap: 6px;}/* Mobile stack */

    @media (max-width: 768px) {    .hero-actions {        flex-direction: column;        text-align: center;        gap: 14px;        width: 100%;    }    .hero-actions .btn-ev {        width: 50%%;        justify-content: center;    }    .hero-animated-line {        text-align: center;        justify-content: center;    }}/* ============================================================   SCOOTY IMAGE (Hero Bike)============================================================ */.hero-image-wrapper {    flex: 1;    display: flex;    justify-content: flex-end;    align-items: flex-end;}.hero-image {    max-height: 650px;    width: auto;    transform: translateX(-160px);    margin-bottom: 0;    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.25));    animation:        heroFloat 4s ease-in-out infinite,        heroShift 8s ease-in-out infinite alternate;}/* Optimized animations */@keyframes heroFloat {    0%,100% { transform: translateY(0) translateX(-160px); }    50%     { transform: translateY(-10px) translateX(-160px); }}@keyframes heroShift {    0%   { transform: translateX(-160px); }    100% { transform: translateX(-172px); }}/* ============================================================   RESPONSIVE HERO (Mobile)============================================================ */@media (max-width: 768px) {    .hero {        flex-direction: column;        align-items: center;        text-align: center;        gap: 24px;        padding-bottom: 20px;    }    .hero-content { padding-bottom: 0; }    .brand-highlight { font-size: 22px; }    .hero-main-text  { font-size: 42px; }    .hero-animated-line { font-size: 18px; }    .hero-image-wrapper {        justify-content: center;        align-items: center;        width: 100%;    }    .hero-image {        max-width: 92%;        max-height: 420px;        margin: 0 auto;        transform: none;        animation:            heroFloatMobile 4s ease-in-out infinite,            heroShiftMobile 8s ease-in-out infinite alternate;    }    @keyframes heroFloatMobile {        0%,100% { transform: translateY(0); }        50%     { transform: translateY(-10px); }    }    @keyframes heroShiftMobile {        from { transform: translateX(0); }        to   { transform: translateX(-12px); }    }    .electric-underline {        margin-left: auto;        margin-right: auto;    }}/* ============================================================   HERO SPEC RIBBON (Vertical Pills)============================================================ */.hero-specs-ribbon {    position: absolute;    right: 32px;    top: 50%;    transform: translateY(-50%);    display: flex;    flex-direction: column;    gap: 12px;    padding: 10px 8px;    background: rgba(255,255,255,0.9);    border-radius: 999px;    box-shadow: 0 8px 24px rgba(0,0,0,0.12);    z-index: 5;}.spec-pill {    width: 72px;    padding: 10px 6px;    border-radius: 18px;    background: rgba(0,0,0,0.03);    display: flex;    flex-direction: column;    align-items: center;    gap: 4px;    font-size: 14px;    line-height: 1.2;    text-align: center;}.spec-pill i.bi {    font-size: 20px;    color: var(--trinity-green);}/* Mobile Ribbon */@media (max-width: 768px) {    .hero-specs-ribbon {        right: 8px;        bottom: 20px;        top: auto;        transform: none;        flex-direction: row;        overflow-x: auto;    }    .spec-pill { width: auto; white-space: nowrap; }} ============================================================   5) NAVBAR — PREMIUM DESKTOP + MOBILE============================================================ *//* ============================================================   HEADER (Sticky + Scroll Shrink)============================================================ */.main-header {    position: sticky;    top: 0;    z-index: 9999;    background: #fff;    transition: all .35s ease;}.navbar {    height: 90px;    display: flex;    align-items: center;    transition: height .35s ease;}.main-header.scrolled {    background: #fff;    box-shadow: 0 6px 18px rgba(0,0,0,0.08);}.main-header.scrolled .navbar {    height: 68px;}.nav-logo img {    height: 58px;}/* ============================================================   UNIVERSAL CALL BOX (Desktop + Mobile Same Style)============================================================ */.nav-call-box,.nav-call-box-nav {    display: flex;    align-items: center;    gap: 10px;    padding: 8px 14px;    border-radius: 12px;    background: #fff;}.nav-call-box i,.nav-call-box-nav i {    font-size: 26px;    color: var(--trinity-red);    font-weight: 700;}.call-text {    display: flex;    flex-direction: column;    line-height: 1.1;}.call-label {    font-size: 11px;    color: var(--trinity-grey-2);    text-transform: uppercase;    font-weight: 600;}.call-number {    font-size: 16px;    font-weight: 700;    color: var(--trinity-black);    white-space: nowrap;}/* Desktop uses .nav-call-box */.nav-call-box-nav { display: none !important; }/* ============================================================   DESKTOP MENU============================================================ */.desktop-menu ul {    display: flex;    align-items: center;    gap: 15px;}.nav-link {    position: relative;    display: flex;    align-items: center;    gap: 8px;    padding: 12px 10px;    font-size: 18px;    font-weight: 600;    border-radius: 50px;    transition: color .35s, background .35s;}/* Hover underline */.nav-link::before {    content: "";    position: absolute;    left: 50%;    bottom: 2px;    width: 0;    height: 3px;    transform: translateX(-50%);    background: var(--trinity-green);    border-radius: 25px;    opacity: 0;    transition: width .45s cubic-bezier(.25,.46,.45,.94), opacity .3s;}.nav-item:hover .nav-link {    color: var(--trinity-green);    background: rgba(0,178,58,0.10);}.nav-item:hover .nav-link::before {    width: 60%;    opacity: 1;}.nav-scooty-icon {    width: 15px;    transition: .25s ease;}.nav-item:hover .nav-scooty-icon {    filter: invert(59%) sepia(91%) saturate(586%) hue-rotate(95deg);}/* ============================================================   PREMIUM DROPDOWN MENU (Vertical Only)============================================================ */.dropdown {    position: relative;}/* Remove Bootstrap default icon */.dropdown-toggle::after {    display: none !important;    content: none !important;}.dropdown-arrow {    margin-left: 6px;    font-size: 14px;    transition: transform .25s ease;}.dropdown.open .dropdown-arrow {    transform: rotate(180deg);}/* Dropdown panel */.dropdown-menu {    position: absolute;    top: 60px;    left: 0;    min-width: 230px;    width: 100%;    padding: 12px 0;    background: rgba(255,255,255,0.9);    backdrop-filter: blur(14px);    border-radius: 14px;    box-shadow: 0 15px 35px rgba(0,0,0,0.18);    opacity: 0;    visibility: hidden;    transform: translateY(18px);    transition: all .28s cubic-bezier(.25,.46,.45,.94);    z-index: 9999;}/* Ensure vertical stacking */.dropdown-menu,.dropdown-menu ul,.dropdown-menu li {    display: block !important;    width: 100%;    margin: 0;    padding: 0;    list-style: none;}/* Desktop hover show */@media (min-width: 992px) {    .dropdown:hover .dropdown-menu {        opacity: 1;        visibility: visible;        transform: translateY(0);    }    .dropdown:hover .dropdown-arrow {        transform: rotate(180deg);    }}/* Mobile JS open */.dropdown.open .dropdown-menu {    opacity: 1;    visibility: visible;    transform: translateY(0);}/* Dropdown links */.dropdown-menu li a {    display: block;    padding: 12px 20px;    font-size: 15px;    font-weight: 500;    color: var(--trinity-black);    border-bottom: 1px solid rgba(0,0,0,0.06);    transition: .25s ease;}.dropdown-menu li:last-child a {    border-bottom: none;}.dropdown-menu li a:hover {    background: rgba(0,150,60,0.08);    color: var(--trinity-green);    padding-left: 28px;}/* ============================================================   MOBILE MENU TOGGLE============================================================ */.nav-toggle { display: none; }@media (max-width: 992px) { body {overflow-x: hidden!important;}   .desktop-menu { display: none; }    .nav-toggle { display: block; }}/* Offcanvas */.offcanvas-menu {    position: fixed;    top: 0;    right: -100%;    width: 82%;    height: 100vh;    background: #fff;    padding: 20px;    border-left: 1px solid rgba(0,0,0,0.08);    box-shadow: -12px 0 35px rgba(0,0,0,0.15);    transition: right var(--medium);    z-index: 99999;}.offcanvas-menu.open { right: 0; }/* ============================================================   MOBILE NAVBAR LAYOUT (Logo Left — Call Center — Menu Right)============================================================ */@media (max-width: 992px) {    .navbar .container {        justify-content: center;        position: relative;        padding: 0 14px;    }    /* Left Logo */    .nav-logo {        position: absolute;        left: 10px;        top: 50%;        transform: translateY(-50%);    }    /* Center Call Box */    .nav-call-box-nav {        display: flex !important;        position: absolute;        left: 60%;        top: 50%;        transform: translate(-50%, -50%);        max-width: 200px;    }    /* Hide desktop call box */    .nav-call-box { display: none !important; }    /* Right Hamburger */    #hamburgerBtn {        position: absolute;        right: 12px;        top: 50%;        transform: translateY(-50%);    }}/* -----------------------------   Mobile Dropdown Animation----------------------------- */.dropdown-mobile .mobile-submenu {    max-height: 0;    overflow: hidden;    background: rgba(0,178,58,0.06);    border-radius: 10px;    padding-left: 18px;    margin-top: 4px;    opacity: 0;    transition:        max-height .45s cubic-bezier(.25,.46,.45,.94),        padding .35s,        opacity .35s;}.dropdown-mobile.open .mobile-submenu {    max-height: 500px;    opacity: 1;    padding: 10px 0;}.mobile-submenu .nav-link {    padding: 10px 0;    font-size: 16px;    color: var(--trinity-black);    border-bottom: 1px solid rgba(0,0,0,0.06);}.mobile-submenu li:last-child .nav-link { border-bottom: none; }/* -----------------------------   Mobile Links----------------------------- */.offcanvas-nav .nav-link {    padding: 14px 0;    display: block;    font-size: 18px;    color: var(--trinity-black);    border-bottom: 1px solid rgba(0,0,0,0.08);}.offcanvas-nav .nav-link:hover { color: var(--trinity-green); }.nav-cta {    display: block;    margin-top: 16px;    padding: 12px 22px;    background: var(--trinity-green);    color: #fff;    border-radius: 8px;    text-align: center;    font-weight: 600;}.nav-cta:hover { background: rgb(0,150,48); }/* -----------------------------   Overlay----------------------------- */.offcanvas-overlay { display: none; }.offcanvas-menu.open + .offcanvas-overlay {    display: block;    position: fixed;    inset: 0;    background: rgba(0,0,0,0.45);    z-index: 9999;}/* -----------------------------   EV Text----------------------------- */.text-success {    color: var(--trinity-green) !important;}/* -----------------------------   EV BUTTONS----------------------------- */.btn-ev {    padding: var(--space-12) var(--space-24);    background: var(--trinity-green);    color: #fff;    border-radius: var(--radius-full);    font-weight: 600;    transition: var(--medium);}.btn-ev:hover {    background: var(--trinity-red);    transform: translateY(-3px);}.btn-red { background: var(--trinity-red); }.btn-red:hover { background: var(--trinity-green); }/* ============================================================   HERO SECTION (Optimized & Cleaned)============================================================ */.hero-section {    position: relative;    padding: 40px 0 0;    background: url("../img/webs/hero-bg.webp") left center / cover no-repeat;    overflow: hidden;}/* ------------------------------------------------------------   Electric Particle FX------------------------------------------------------------ */.electric-particles {    position: absolute;    inset: 0;    background:        radial-gradient(circle at 20% 30%, rgba(255,0,40,0.25), transparent 60%),        radial-gradient(circle at 80% 70%, rgba(0,255,80,0.25), transparent 60%);    opacity: 0.35;    filter: blur(40px);    animation: particleFlow 8s linear infinite alternate;    z-index: 1;}@keyframes particleFlow {    from { transform: translateY(0); }    to   { transform: translateY(-40px); }}/* ------------------------------------------------------------   Light Sweep Line------------------------------------------------------------ */.hero-light-streak {    position: absolute;    top: 40%;    left: -30%;    width: 200%;    height: 4px;    background: linear-gradient(        90deg,        transparent,        rgba(255,255,255,0.7),        rgba(255,255,255,0.15),        transparent    );    animation: lightSweep 6s ease-in-out infinite;    z-index: 2;}@keyframes lightSweep {    0%   { transform: translateX(-20%) skewX(-10deg); opacity: 0; }    30%  { opacity: 1; }    60%  { transform: translateX(40%) skewX(-10deg); opacity: 1; }    100% { transform: translateX(90%) skewX(-10deg); opacity: 0; }}/* ============================================================   HERO GRID LAYOUT============================================================ */.hero {    position: relative;    display: flex;    justify-content: space-between;    align-items: flex-end;    gap: 40px;    min-height: 550px;    z-index: 3;}.hero-content {    max-width: 680px;    padding-bottom: 140px;}/* ============================================================   HERO TYPOGRAPHY============================================================ */.brand-highlight {    font-family: var(--font-impact);    color: var(--trinity-red);    letter-spacing: 2px;    font-size: 32px;    text-transform: uppercase;    margin-bottom: 10px;    display: block;}.hero-main-text {    font-family: var(--font-impact);    font-weight: 700;    font-size: 64px;    line-height: 1.1;    color: var(--trinity-black);    animation: glowPulse 3s ease-in-out infinite;}@keyframes glowPulse {    0%,100% { text-shadow: 0 0 0 transparent; }    50%     { text-shadow: 0 0 18px rgba(0,0,0,0.15); }}/* Underline */.electric-underline {    display: block;    width: 0;    height: 6px;    background: var(--grad-electric);    border-radius: 6px;    margin-top: 12px;    animation: underlineExpand 1.6s ease 0.5s forwards;}@keyframes underlineExpand {    from { width: 0; opacity: 0; }    to   { width: 140px; opacity: 1; }}/* Typing Line */.hero-animated-line {    margin-top: 16px;    font-size: 24px;    font-family: var(--font-primary);    font-weight: 600;    color: var(--trinity-grey-2);    height: 32px;    display: flex;    align-items: center;}.cursor {    font-size: 24px;    font-weight: 700;    color: var(--trinity-green);    margin-left: 3px;    animation: blink .6s infinite alternate;}@keyframes blink {    from { opacity: 1; }    to   { opacity: 0; }}/* ============================================================   HERO ACTIONS (CTA + CALL BOX)============================================================ */.hero-actions {    display: flex;    align-items: center;    gap: 10px;    flex-wrap: nowrap;}.hero-actions .btn-ev {    white-space: nowrap;}.hero-actions .nav-call-box {    display: flex;    align-items: center;    gap: 6px;}/* Mobile stack */

    @media (max-width: 768px) {    .hero-actions {        flex-direction: column;        text-align: center;        gap: 14px;        width: 100%;    }    .hero-actions .btn-ev {        width: 50%%;        justify-content: center;    }    .hero-animated-line {        text-align: center;        justify-content: center;    }}/* ============================================================   SCOOTY IMAGE (Hero Bike)============================================================ */.hero-image-wrapper {    flex: 1;    display: flex;    justify-content: flex-end;    align-items: flex-end;}.hero-image {    max-height: 650px;    width: auto;    transform: translateX(-160px);    margin-bottom: 0;    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.25));    animation:        heroFloat 4s ease-in-out infinite,        heroShift 8s ease-in-out infinite alternate;}/* Optimized animations */@keyframes heroFloat {    0%,100% { transform: translateY(0) translateX(-160px); }    50%     { transform: translateY(-10px) translateX(-160px); }}@keyframes heroShift {    0%   { transform: translateX(-160px); }    100% { transform: translateX(-172px); }}/* ============================================================   HERO SPEC RIBBON (Vertical Pills)============================================================ */.hero-specs-ribbon {    position: absolute;    right: 32px;    top: 50%;    transform: translateY(-50%);    display: flex;    flex-direction: column;    gap: 12px;    padding: 10px 8px;    background: rgba(255,255,255,0.9);    border-radius: 999px;    box-shadow: 0 8px 24px rgba(0,0,0,0.12);    z-index: 5;}.spec-pill {    width: 72px;    padding: 10px 6px;    border-radius: 18px;    background: rgba(0,0,0,0.03);    display: flex;    flex-direction: column;    align-items: center;    gap: 4px;    font-size: 14px;    line-height: 1.2;    text-align: center;}.spec-pill i.bi {    font-size: 20px;    color: var(--trinity-green);}/* Mobile Ribbon */@media (max-width: 768px) {    .hero-specs-ribbon {        right: 8px;        bottom: 20px;        top: auto;        transform: none;        flex-direction: row;        overflow-x: auto;    }    .spec-pill { width: auto; white-space: nowrap; }}
    
/* ============================================================
   MOBILE STYLES (≤992px) — TRINITY EV
============================================================ */

/* Prevent horizontal scroll */
@media (max-width: 992px) {
    html, body {
        overflow-x: hidden !important;
    }

    /* Navbar adjustments */
    .desktop-menu { display: none; }
    .nav-toggle { display: block; }

    .main-header {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 9999;
        background: #fff;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        transition: all .35s ease;
    }

    .navbar {
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        transition: height .35s ease;
    }

    .main-header.scrolled .navbar { height: 68px; }

    /* Logo left */
    .nav-logo {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Center Call Box */
    .nav-call-box-nav {
        display: flex !important;
        position: absolute;
        left: 60%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 200px;
    }

    /* Hide desktop call box */
    .nav-call-box { display: none !important; }

    /* Hamburger right */
    #hamburgerBtn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 10000;
    }

    /* Offcanvas menu */
    .offcanvas-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 82%;
        height: 100vh;
        background: #fff;
        padding: 20px;
        border-left: 1px solid rgba(0,0,0,0.08);
        box-shadow: -12px 0 35px rgba(0,0,0,0.15);
        transition: right var(--medium);
        z-index: 99999;
    }

    .offcanvas-menu.open { right: 0; }

    /* Overlay */
    .offcanvas-overlay { display: none; }
    .offcanvas-menu.open + .offcanvas-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 9999;
    }

    /* Mobile links */
    .offcanvas-nav .nav-link {
        padding: 14px 0;
        display: block;
        font-size: 18px;
        color: var(--trinity-black);
        border-bottom: 1px solid rgba(0,0,0,0.08);
        transition: color .25s ease;
    }
    .offcanvas-nav .nav-link:hover { color: var(--trinity-green); }

    /* Mobile CTA button */
    .nav-cta {
        display: block;
        margin-top: 16px;
        padding: 12px 22px;
        background: var(--trinity-green);
        color: #fff;
        border-radius: 8px;
        text-align: center;
        font-weight: 600;
        transition: background .3s;
    }
    .nav-cta:hover { background: rgb(0,150,48); }

    /* Mobile dropdown animation */
    .dropdown-mobile .mobile-submenu {
        max-height: 0;
        overflow: hidden;
        background: rgba(0,178,58,0.06);
        border-radius: 10px;
        padding-left: 18px;
        margin-top: 4px;
        opacity: 0;
        transition:
            max-height .45s cubic-bezier(.25,.46,.45,.94),
            padding .35s,
            opacity .35s;
    }

    .dropdown-mobile.open .mobile-submenu {
        max-height: 500px;
        opacity: 1;
        padding: 10px 0;
    }

    .mobile-submenu .nav-link {
        padding: 10px 0;
        font-size: 16px;
        color: var(--trinity-black);
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .mobile-submenu li:last-child .nav-link { border-bottom: none; }

    /* Hero Section adjustments */
    .hero-section { padding: 110px 0 0 !important; }

    .hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
        padding-bottom: 20px;
    }

    .hero-content { padding-bottom: 0; }
    .brand-highlight { font-size: 22px; }
    .hero-main-text  { font-size: 42px; }
    .hero-animated-line { font-size: 18px; text-align: center; justify-content: center; }

    .hero-actions {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        width: 100%;
    }
    .hero-actions .btn-ev {
        width: 50%;
        justify-content: center;
    }

    .hero-image-wrapper {
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .hero-image {
        max-width: 92%;
        max-height: 420px;
        margin: 0 auto;
        transform: none;
        animation:
            heroFloatMobile 4s ease-in-out infinite,
            heroShiftMobile 8s ease-in-out infinite alternate;
    }

    @keyframes heroFloatMobile {
        0%,100% { transform: translateY(0); }
        50%     { transform: translateY(-10px); }
    }
    @keyframes heroShiftMobile {
        from { transform: translateX(0); }
        to   { transform: translateX(-12px); }
    }

    .electric-underline {
        margin-left: auto;
        margin-right: auto;
    }

    /* Hero Specs Ribbon mobile */
    .hero-specs-ribbon {
        right: 8px;
        bottom: 20px;
        top: auto;
        transform: none;
        flex-direction: row;
        overflow-x: auto;
    }
    .spec-pill { width: auto; white-space: nowrap; }
}
    
    
    
    /* ============================================================   EV POWER SECTION============================================================ */.ev-power-section {    position: relative;    background: var(--trinity-green);    padding: 40px 0;    overflow: hidden;}/* ============================================================   FX LAYER============================================================ */.ev-green-fx {    position: absolute;    inset: 0;    pointer-events: none;    z-index: 3; /* ABOVE GREEN, BELOW WHITE */}/* ============================================================   SVG ORBIT CONTAINER============================================================ */.ev-orbit-svg {    position: absolute;    top: 50%;    left: 50%;    width: calc(100% - 120px);    height: 520px;    transform: translate(-50%, -50%);}/* ============================================================   ELECTRICAL ORBIT PATH============================================================ */.ev-orbit-path {    fill: none;    stroke: rgba(120,255,180,0.9);    stroke-width: 2.5;    /* Electric effect */    stroke-dasharray: 12 14;    stroke-dashoffset: 0;    filter:        drop-shadow(0 0 6px rgba(255,255,255,0.9))        drop-shadow(0 0 16px rgba(0,255,120,0.6));    animation: electricOrbit 10s linear infinite;}/* ============================================================   ORBIT ANIMATION============================================================ */@keyframes electricOrbit {    to {        stroke-dashoffset: -260;    }}/* ============================================================   WHITE WRAPPER============================================================ */.ev-power-wrapper {    position: relative;    background: #fff;    border-radius: 32px;    padding: 140px 60px 80px 420px;    box-shadow: 0 40px 90px rgba(0,0,0,0.22);    z-index: 4;}/* ============================================================   IMAGE — FINAL POSITION (HIGH + FULLY VISIBLE)============================================================ */.ev-power-visual {    position: absolute;    left: -210px;      /* 50% outside */    top: 40px;         /* Kept high */    width: 620px;    z-index: 3;    will-change: transform;}.ev-power-visual img {    width: 100%;    height: auto;    display: block;}/* ============================================================   RIGHT CONTENT============================================================ */.ev-power-content {    position: relative;    z-index: 4;}/* HEADER */.ev-power-header {    margin-bottom: 46px;}.ev-power-header h2 {    font-family: var(--font-impact);    font-size: clamp(32px, 4vw, 50px);    line-height: 1.1;}.ev-power-header span {    color: var(--trinity-red);}/* ============================================================   GRID============================================================ */.ev-power-grid {    display: grid;    grid-template-columns: repeat(3,1fr);    gap: 28px;}/* ============================================================   CARD — PREMIUM EV STYLE============================================================ */.ev-card {    position: relative;    background: linear-gradient(        180deg,        rgba(255,255,255,0.9),        rgba(245,245,245,0.9)    );    border-radius: 20px;    padding: 30px 24px;    text-align: center;    transition:        transform .35s ease,        box-shadow .35s ease;}/* Icon bubble */.ev-card i {    width: 56px;    height: 56px;    border-radius: 50%;    display: inline-flex;    align-items: center;    justify-content: center;    font-size: 28px;    color: var(--trinity-green);    background: rgba(0,178,58,0.12);    margin-bottom: 14px;    position: relative;}/* Title */.ev-card h4 {    font-size: 18px;    font-weight: 700;    margin-bottom: 8px;}/* Text */.ev-card p {    font-size: 14px;    color: var(--trinity-grey-2);    line-height: 1.6;}/* Hover effect */.ev-card:hover {    transform: translateY(-8px);    box-shadow:        0 20px 45px rgba(0,178,58,0.25),        inset 0 0 0 1px rgba(0,178,58,0.25);}/* ============================================================   ELECTRIC ICON PULSE============================================================ */.ev-card i::after {    content: "";    position: absolute;    inset: -6px;    border-radius: 50%;    border: 2px solid rgba(0,178,58,0.45);    opacity: 0;}.ev-power-section.active .ev-card i::after {    animation: electricPulse 2.6s ease-out infinite;}@keyframes electricPulse {    0% { opacity: .6; transform: scale(.8); }    70% { opacity: 0; transform: scale(1.45); }    100% { opacity: 0; }}/* ============================================================   RESPONSIVE============================================================ */@media (max-width: 992px) {    .ev-power-wrapper {        padding: 60px 24px;    }    .ev-power-visual {        position: relative;        left: 0;        top: auto;        width: 100%;        margin-bottom: 40px;    }    .ev-power-grid {        grid-template-columns: 1fr;    }}/* =========================================================   TRINITY EV — PRODUCT LISTING (FINAL • PREMIUM • CLEAN)========================================================= */.ev-products {    padding: 80px 0;    background: #f6f7f9;}/* =========================================================   SECTION HEADER========================================================= */.ev-products .section-header {    text-align: center;    margin-bottom: 48px;}.ev-products .section-header h2 {    font-size: 45px;    font-weight: 700;    color: #111;    margin-bottom: 8px;}.ev-products .section-header h2 span {    color: var(--trinity-green);}.ev-products .section-header p {    font-size: 15px;    color: var(--trinity-grey-3);    max-width: 520px;    margin: 0 auto;}/* =========================================================   PRODUCT GRID========================================================= */.product-grid {    display: grid;    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));    gap: 28px;}/* =========================================================   PRODUCT CARD========================================================= */.product-card {    background: #fff;    border-radius: 20px;    padding: 18px 18px 22px;    text-align: center;    box-shadow: var(--shadow-soft);    transition: transform .25s ease, box-shadow .25s ease;}.product-card:hover {    transform: translateY(-6px);    box-shadow: var(--shadow-medium);}/* =========================================================   PRODUCT IMAGE GALLERY (EQUAL HEIGHT + DIVIDER)========================================================= */.product-image-wrapper {    display: grid;    grid-template-columns: 56px 1fr;    gap: 16px;    align-items: stretch;                 /* 🔥 SAME HEIGHT */    margin-bottom: 18px;    padding-bottom: 18px;    border-bottom: 1px solid rgba(0,0,0,.06); /* 🔥 premium divider */}/* =========================================================   THUMBNAILS COLUMN — FULL HEIGHT MATCH========================================================= */.product-thumbs {    display: flex;    flex-direction: column;    justify-content: space-between;  /* 🔥 evenly fills height */    gap: 10px;    height: 100%;}/* THUMB */.product-thumb {    width: 46px;    aspect-ratio: 1 / 1;            /* 🔥 true square */    object-fit: cover;    border-radius: 12px;    cursor: pointer;    border: 1px solid #e5e7eb;    background: none;    padding: 0;    transition:        border-color .2s ease,        transform .2s ease,        box-shadow .2s ease;}.product-thumb:hover {    transform: scale(1.06);}.product-thumb.active {    border-color: var(--trinity-green);    box-shadow: 0 0 0 2px rgba(0,178,58,.16);}/* =========================================================   MAIN IMAGE — PERFECT 1024x1024 (NO BG, NO PADDING)========================================================= */.product-main-image {    width: 100%;    aspect-ratio: 1 / 1;           /* 🔥 locks height with thumbs */    border-radius: 16px;    overflow: hidden;}.product-main-image img {    width: 100%;    height: 100%;    object-fit: cover;    background: none;    padding: 0;    border-radius: 16px;}/* =========================================================   PRODUCT TITLE (PREMIUM SPACING)========================================================= */.product-card h3 {    font-size: 18px;    font-weight: 700;    color: #111;    margin: 14px 0 6px;}/* =========================================================   TAGLINE========================================================= */.product-card .tagline {    font-size: 13px;    color: var(--trinity-grey-3);    margin-bottom: 12px;    line-height: 1.4;}/* =========================================================   PRICE========================================================= */.product-card .price {    font-size: 18px;    font-weight: 700;    color: #111;    margin-bottom: 18px;}.product-card .price span {    font-size: 14px;    font-weight: 500;    color: var(--trinity-grey-3);    margin-left: 6px;    text-decoration: line-through;}/* =========================================================   ACTION BUTTONS========================================================= */.product-actions {    display: flex;    justify-content: center;    gap: 12px;}/* OUTLINE BUTTON */.product-actions .btn-outline {    padding: 10px 18px;    border-radius: 999px;    font-size: 13px;    font-weight: 600;    border: 1px solid var(--trinity-green);    color: var(--trinity-green);    background: transparent;    text-decoration: none;    transition:        background .2s ease,        color .2s ease,        transform .2s ease;}.product-actions .btn-outline:hover {    background: var(--trinity-green);    color: #fff;    transform: translateY(-2px);}/* PRIMARY BUTTON */.product-actions .btn-primary {    padding: 10px 20px;    border-radius: 999px;    font-size: 13px;    font-weight: 600;    border: none;    background: var(--trinity-green);    color: #fff;    cursor: pointer;    transition:        transform .2s ease,        box-shadow .2s ease,        background .2s ease;}.product-actions .btn-primary:hover {    background: #009b32;    transform: translateY(-2px);    box-shadow: var(--shadow-medium);}/* =========================================================   RESPONSIVE — TABLET & MOBILE========================================================= */@media (max-width: 768px) {    .ev-products {        padding: 56px 0;    }    .product-actions {        flex-direction: column;    }    .product-actions a,    .product-actions button {        width: 100%;    }}@media (max-width: 576px) {    .product-image-wrapper {        grid-template-columns: 1fr;        gap: 12px;    }    .product-thumbs {        flex-direction: row;        justify-content: center;        height: auto;        order: 2;    }    .product-thumb {        width: 52px;    }}@media (max-width: 480px) {    .ev-products .section-header h2 {        font-size: 28px;    }    .product-card h3 {        font-size: 17px;    }}.ev-stats-premium {    position: relative;    padding: 120px 0;    overflow: hidden;    color: #fff;    border-top: 5px solid var(--trinity-red);    border-bottom: 5px solid var(--trinity-green);}/* ===============================   VIDEO BACKGROUND================================ */.ev-stats-video {    position: absolute;    inset: 0;    width: 100%;    height: 100%;    object-fit: cover;    z-index: 0;    filter: saturate(1.1) contrast(1.05);}/* Dark overlay for readability */.ev-stats-overlay {    position: absolute;    inset: 0;    background: linear-gradient(        180deg,        rgba(0,0,0,0.45),        rgba(0,0,0,0.65)    );    z-index: 1;}.ev-stats-header {    position: relative;    z-index: 2;    max-width: 820px;    margin: 0 auto 60px;    text-align: center;    color: #fff;}.ev-stats-header h2 {    font-size: clamp(34px, 4vw, 52px);    font-weight: 800;    margin-bottom: 16px;}.ev-stats-header h2 span {    color: var(--trinity-red);}.ev-stats-header p {    font-size: 16px;    line-height: 1.7;    opacity: 0.95;}/* ===============================   GRID================================ */.ev-stats-grid {    position: relative;    z-index: 2;    display: grid;    grid-template-columns: repeat(4,1fr);    gap: 32px;}/* ===============================   CARD================================ */.ev-stat-card {    background: rgba(255,255,255,0.12);    backdrop-filter: blur(18px);    border-radius: 22px;    padding: 40px 28px;    text-align: center;    border: 1px solid rgba(255,255,255,0.18);    transition:        transform .4s ease,        box-shadow .4s ease;}.ev-stat-card:hover {    transform: translateY(-10px);    box-shadow: 0 30px 70px rgba(0,0,0,0.45);}/* ===============================   ICON (ANIMATED)================================ */.ev-stat-card i {    font-size: 38px;    margin-bottom: 16px;    display: inline-block;    color: #ffffff;    transition: transform .45s ease, filter .45s ease;}/* Electric hover */.ev-stat-card:hover i {    transform: scale(1.25) rotate(-6deg);    filter: drop-shadow(0 0 14px rgba(0,255,140,0.9));}/* ===============================   TEXT================================ */.ev-stat-card h3 {    font-size: clamp(36px, 4vw, 52px);    font-weight: 800;    margin-bottom: 8px;}.ev-stat-card p {    font-size: 14px;    letter-spacing: .14em;    text-transform: uppercase;    opacity: 0.95;}/* ===============================   RESPONSIVE================================ */@media (max-width: 992px) {    .ev-stats-grid {        grid-template-columns: repeat(2,1fr);    }}@media (max-width: 480px) {    .ev-stats-grid {        grid-template-columns: 1fr;    }}/* ================================   EV TIMELINE SECTION (LIGHT BG)================================ */.ev-timeline-section {    position: relative;    padding: 140px 0;    background: url("../img/webs/timeline_bg.webp") center/cover no-repeat;    color: var(--trinity-black);    overflow: hidden;}/* Soft overlay for depth (not dark) */.timeline-overlay {    position: absolute;    inset: 0;    background: linear-gradient(        rgba(255,255,255,0.65),        rgba(255,255,255,0.85)    );    z-index: 0;}/* ================================   HEADER================================ */.timeline-header {    position: relative;    z-index: 2;    max-width: 760px;    margin: 0 auto 90px;    text-align: center;}.timeline-header h2 {    font-size: clamp(34px, 4vw, 54px);    font-weight: 800;    margin-bottom: 16px;    color: var(--trinity-black);}.timeline-header h2 span {    color: var(--trinity-green);}.timeline-header p {    font-size: 16px;    line-height: 1.7;    color: var(--trinity-grey-2);}/* ================================   WRAPPER================================ */.ev-timeline-wrapper {    position: relative;    z-index: 2;}/* ================================   CURVED ELECTRIC PATH================================ */.timeline-path {    position: absolute;    top: 70px;    left: 0;    width: 100%;    height: 200px;}.timeline-path path {    fill: none;    stroke: var(--trinity-green);    stroke-width: 3;    stroke-linecap: round;    stroke-dasharray: 1;    stroke-dashoffset: 1;    animation: drawLine 3s ease forwards;    opacity: 0.9;}@keyframes drawLine {    to { stroke-dashoffset: 0; }}/* ================================   TIMELINE GRID================================ */.ev-timeline {    display: grid;    grid-template-columns: repeat(5, 1fr);    gap: 48px;    position: relative;    z-index: 3;}/* ================================   TIMELINE ITEM================================ */.timeline-item {    text-align: center;    padding-top: 130px;    opacity: 0;    transform: translateY(30px);    transition: all .7s ease;}.timeline-item.active {    opacity: 1;    transform: translateY(0);}/* ================================   ICON CIRCLE (BRAND FOCUS)================================ */.icon-circle {    width: 64px;    height: 64px;    margin: 0 auto 18px;    border-radius: 50%;    background: #ffffff;    border: 2px solid var(--trinity-green);    display: flex;    align-items: center;    justify-content: center;    box-shadow: 0 12px 30px rgba(0,0,0,0.12);    position: relative;    transition: all .35s ease;}.icon-circle i {    font-size: 28px;    color: var(--trinity-green);}/* Pulse ring (subtle on light bg) */.icon-circle::after {    content: "";    position: absolute;    inset: -10px;    border-radius: 50%;    border: 2px solid rgba(0,178,58,0.35);    animation: pulseRing 3s infinite;}@keyframes pulseRing {    0% { transform: scale(.8); opacity: .5; }    70% { transform: scale(1.6); opacity: 0; }    100% { opacity: 0; }}/* ================================   TEXT================================ */.timeline-item h4 {    font-size: 18px;    font-weight: 700;    margin-bottom: 6px;    color: var(--trinity-black);}.timeline-item p {    font-size: 14px;    color: var(--trinity-grey-2);    line-height: 1.6;}/* Hover refinement */.timeline-item:hover .icon-circle {    transform: translateY(-4px);    background: var(--trinity-green);}.timeline-item:hover .icon-circle i {    color: #fff;}/* ================================   RESPONSIVE================================ */@media (max-width: 992px) {    .ev-timeline {        grid-template-columns: 1fr;        gap: 60px;    }    .timeline-path {        display: none;    }    .timeline-item {        padding-top: 0;    }}/* =========================================================   EV SAVINGS — PREMIUM EDITION (FINAL, JS SAFE)========================================================= */.ev-savings-pro {    position: relative;    padding: 80px 0;    overflow: hidden;    color: var(--trinity-white);    background-image: url("../img/webs/ev-savings-bg.webp");    background-size: cover;    background-position: center;    background-repeat: no-repeat;}/* Cinematic overlay */.ev-savings-pro::before {    content: "";    position: absolute;    inset: 0;    background: linear-gradient(        180deg,        rgba(0,0,0,0.65) 0%,        rgba(0,0,0,0.45) 45%,        rgba(0,0,0,0.75) 100%    );    z-index: 0;}/* Vignette */.ev-savings-pro::after {    content: "";    position: absolute;    inset: 0;    background: radial-gradient(        circle at center,        transparent 55%,        rgba(0,0,0,0.65) 100%    );    z-index: 0;}.ev-savings-pro > * {    position: relative;    z-index: 1;}
        /* ===============================   SECTION HEADER================================ */.ev-savings-header {    max-width: 840px;    margin: 0 auto 90px;    text-align: center;}.ev-chip {    display: inline-block;    padding: 7px 20px;    border-radius: 50px;    background: rgba(0,178,58,.18);    color: var(--trinity-green);    font-size: 12px;    letter-spacing: .14em;    font-weight: 700;}.ev-savings-header h2 {    font-size: clamp(38px, 4vw, 58px);    font-weight: 900;    margin: 20px 0;    line-height: 1.1;    text-shadow: 0 14px 45px rgba(0,0,0,0.6);}.ev-savings-header h2 span {    color: var(--trinity-green);}.ev-savings-header p {    max-width: 640px;    margin: 0 auto;    font-size: 15px;    color: rgba(255,255,255,0.72);}/* ===============================   BOARD LAYOUT================================ */.ev-savings-board {    display: grid;    grid-template-columns: 1.1fr 1fr;    gap: 42px;}/* ===============================   GLASS PANELS================================ */.ev-panel {    background: linear-gradient(        180deg,        rgba(12,12,12,0.78),        rgba(12,12,12,0.58)    );    backdrop-filter: blur(26px) saturate(160%);    -webkit-backdrop-filter: blur(26px) saturate(160%);    border-radius: 30px;    padding: 44px;    border: 1px solid rgba(255,255,255,0.12);    box-shadow:        0 40px 90px rgba(0,0,0,0.75),        inset 0 1px 0 rgba(255,255,255,0.08);}/* ===============================   PANEL HEADER — SPLIT================================ */.panel-head {    display: flex;    justify-content: space-between;    align-items: flex-start;    gap: 28px;    margin-bottom: 36px;}.panel-head-left h4 {    font-size: 22px;    font-weight: 800;    color: #ffffff;    margin-bottom: 4px;}.panel-sub {    font-size: 13px;    color: rgba(255,255,255,0.65);}.panel-head-right {    display: flex;    flex-direction: column;    align-items: flex-end;    text-align: right;    gap: 8px;}/* ===============================   LIVE PETROL BADGE================================ */.live-pill.glow {    display: inline-flex;    align-items: center;    gap: 10px;    padding: 8px 16px;    border-radius: 50px;    font-size: 13px;    font-weight: 700;    white-space: nowrap;    background: linear-gradient(        135deg,        rgba(224,0,25,0.35),        rgba(155,0,17,0.35)    );    color: #ffd2d6;    box-shadow:        0 6px 20px rgba(224,0,25,0.45),        inset 0 1px 0 rgba(255,255,255,0.12);}.fuel-price {    display: inline-flex;    align-items: baseline;    gap: 2px;    min-width: 72px;}#petrolRate {    font-size: 16px;    font-weight: 900;    color: #ffffff;}.fuel-unit {    font-size: 11px;    opacity: 0.75;}/* ===============================   PRICE META================================ */.price-meta {    font-size: 12px;    line-height: 1.45;}.price-main {    color: rgba(255,255,255,0.6);}.price-change {    font-weight: 700;}.price-change.positive { color: #3cff9e; }.price-change.negative { color: #ff6b6b; }.price-change.neutral  { color: #bdbdbd; }.avg-note {    font-size: 11px;    opacity: .6;    margin-left: 6px;}.city-select {    margin-top: 6px;    padding: 8px 12px;    border-radius: 12px;    background: rgba(0,0,0,.45);    border: 1px solid rgba(255,255,255,.18);    color: #fff;    font-size: 12px;}.city-select option {    color: #000;}.price-update {    font-size: 11px;    color: rgba(255,255,255,0.45);}/* ===============================   CONTROLS================================ */.control-block {    margin-top: 36px;}.control-top {    display: flex;    justify-content: space-between;    align-items: center;    margin-bottom: 14px;}.control-top label {    font-size: 14px;    font-weight: 600;    color: #ffffff;}/* KM chip */.km-chip {    display: flex;    align-items: baseline;    gap: 6px;    padding: 8px 16px;    border-radius: 14px;    background: linear-gradient(        135deg,        rgba(0,178,58,0.35),        rgba(0,122,40,0.35)    );    color: #d9ffe7;}.km-chip strong {    font-size: 22px;    font-weight: 800;}/* Slider */.ev-range {    width: 100%;    appearance: none;    height: 6px;    border-radius: 50px;    background: var(--grad-electric);}.ev-range::-webkit-slider-thumb {    appearance: none;    width: 22px;    height: 22px;    border-radius: 50%;    background: #ffffff;    border: 4px solid var(--trinity-green);    box-shadow: 0 0 20px rgba(0,178,58,0.6);    cursor: pointer;}.range-scale {    display: flex;    justify-content: space-between;    font-size: 12px;    color: rgba(255,255,255,0.55);    margin-top: 6px;}/* Select */.select-wrap {    position: relative;}.select-wrap i {    position: absolute;    left: 14px;    top: 50%;    transform: translateY(-50%);    color: rgba(255,255,255,0.55);}.select-wrap select {    width: 100%;    padding: 14px 14px 14px 42px;    border-radius: 16px;    background: rgba(0,0,0,0.45);    border: 1px solid rgba(255,255,255,0.18);    color: #ffffff;}/* Note */.premium-note {    display: flex;    align-items: center;    gap: 10px;    margin-top: 28px;    padding: 14px;    border-radius: 14px;    background: rgba(0,178,58,0.18);    color: #c9ffdd;    font-size: 13px;}/* ===============================   RIGHT PANEL — OUTPUT================================ */.metrics-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 20px;}.metric-card {    padding: 26px;    border-radius: 20px;    background: rgba(0,0,0,0.55);    text-align: center;    box-shadow:        inset 0 1px 0 rgba(255,255,255,0.08),        0 12px 30px rgba(0,0,0,0.45);}.metric-card h3 {    font-size: 28px;    margin-top: 6px;    color: #ffffff;}.metric-card.highlight {    background: linear-gradient(135deg, #00b23a, #007a28);}.metric-card.accent {    background: linear-gradient(135deg, #e00019, #9b0011);}/* Cost bars */.cost-bar {    display: flex;    justify-content: space-between;    padding: 14px 18px;    border-radius: 14px;    margin-top: 16px;    font-weight: 700;}.cost-bar.petrol {    background: rgba(224,0,25,0.35);    color: #ffd2d6;}.cost-bar.ev {    background: rgba(0,178,58,0.35);    color: #d9ffe7;}/* CTA */.ev-cta {    display: block;    margin-top: 36px;    padding: 18px;    text-align: center;    border-radius: 60px;    background: var(--grad-electric);    color: #ffffff;    font-weight: 900;    letter-spacing: .4px;    transition: transform .25s ease;}.ev-cta:hover {    transform: translateY(-2px);}/* ===============================   RESPONSIVE================================ */@media (max-width: 992px) {    .ev-savings-board {        grid-template-columns: 1fr;        gap: 32px;    }    .metrics-grid {        grid-template-columns: 1fr;    }}@media (max-width: 576px) {    .panel-head {        flex-direction: column;        align-items: flex-start;    }    .panel-head-right {        align-items: flex-start;        text-align: left;        margin-top: 12px;    }}/* =========================================================   WHY ELECTRIC — IMAGE FEATURE REVEAL========================================================= */.ev-why-electric {    position: relative;    padding: 100px 0 120px; /* space for overlap */    background: var(--trinity-bg-light);    z-index: 1;    overflow: visible !important;}/* GRID */.ev-why-grid {    display: grid;    grid-template-columns: 1.2fr 1fr;    gap: 80px;    align-items: center;}/* LEFT */.ev-why-left h2 {    font-size: clamp(38px, 4vw, 54px);    font-weight: 900;    color: var(--trinity-black);}.ev-why-left span {    color: var(--trinity-green);}.ev-why-intro {    margin: 18px 0 40px;    max-width: 520px;    color: var(--trinity-grey-2);    line-height: 1.6;}/* LEFT CARDS */.ev-why-cards {    display: grid;    grid-template-columns: repeat(2,1fr);    gap: 26px;}.ev-why-card {    background: var(--trinity-black);    color: var(--trinity-white);    border-left: 5px solid var(--trinity-green);    border-radius: 18px;    padding: 26px 24px;    text-align: center;    box-shadow: 0 20px 50px rgba(0,0,0,.25);    transition: transform .35s ease, box-shadow .35s ease;}.ev-why-card i {    font-size: 34px;    color: var(--trinity-green);    margin-bottom: 14px;}.ev-why-card h4 {    font-size: 16px;    font-weight: 700;    margin-bottom: 6px;}.ev-why-card p {    font-size: 14px;    color: var(--trinity-grey-3);}.ev-why-card:hover {    transform: translateY(-6px);    box-shadow: 0 30px 70px rgba(0,178,58,.35);}/* =========================================================   RIGHT IMAGE + FEATURE CALLOUTS========================================================= */.ev-why-right {    position: relative;    text-align: center;}.ev-why-right img {    max-width: 520px;    width: 100%;    height: auto;    filter: drop-shadow(0 35px 70px rgba(0,0,0,.25));}/* FEATURE CALLOUT */.feature-callout {    position: absolute;    display: flex;    align-items: center;    gap: 10px;    background: var(--trinity-black);    color: var(--trinity-white);    padding: 10px 16px;    border-radius: 50px;    font-size: 14px;    white-space: nowrap;    opacity: 0;    transform: translateY(10px);    transition: all .6s ease;    box-shadow: 0 12px 30px rgba(0,0,0,.35);}.feature-callout i {    color: var(--trinity-green);    font-size: 18px;}/* POSITIONS */.feature-callout.left {    left: -40px;}.feature-callout.right {    right: -40px;}.f1 { top: 18%; }.f2 { top: 36%; }.f3 { top: 56%; }.f4 { top: 74%; }/* ACTIVE STATE */.feature-callout.show {    opacity: 1;    transform: translateY(0);}/* =========================================================   RESPONSIVE========================================================= */@media (max-width: 992px) {    .ev-why-grid {        grid-template-columns: 1fr;        gap: 60px;    }    .ev-why-cards {        grid-template-columns: 1fr;    }    .ev-why-right {        order: -1;    }    .feature-callout {        display: none; /* clean mobile */    }}/* =========================================================
               TESTIMONIAL — TRINITY EV (PREMIUM HERO FINAL)
            ========================================================= */
            .ev-testimonial-premium {
                position: relative;
                padding: 100px 0 40px;
                background: linear-gradient(
                    100deg,
                    #0aa34a 0%,
                    #0aa34a 42%,
                    #f5fbff 42%,
                    #e9f7ff 100%
                );
                color: #fff;
                overflow: visible;
            }
            
            /* =========================================================
               GRID
            ========================================================= */
            .testimonial-grid {
                display: grid;
                grid-template-columns: 1.2fr 0.8fr;
                gap: 100px;
                align-items: center;
            }
            
            /* =========================================================
               LEFT CONTAINER (OVERFLOW CONTEXT)
            ========================================================= */
            .testimonial-left {
                position: relative; /* REQUIRED for overlap */
            }
            
            /* =========================================================
               HEADER
            ========================================================= */
            .testimonial-header.left-align {
                text-align: left;
                margin-bottom: 48px;
                max-width: 640px;
            }
            
            .testimonial-tag {
                display: inline-block;
                padding: 6px 18px;
                border-radius: 50px;
                background: rgba(255,255,255,.18);
                color: #eafff3;
                font-size: 12px;
                letter-spacing: .14em;
                margin-bottom: 16px;
            }
            
            .testimonial-header h2 {
                font-size: clamp(38px, 4vw, 54px);
                font-weight: 900;
                line-height: 1.08;
            }
            
            .testimonial-header h2 span {
                color: #d7ffe9;
            }
            
            .testimonial-header p {
                margin-top: 16px;
                max-width: 560px;
                font-size: 15px;
                line-height: 1.6;
                color: rgba(255,255,255,.85);
            }
            
            /* =========================================================
               TESTIMONIAL CARD (FIXED WIDTH + OVERLAP)
            ========================================================= */
            .testimonial-card.horizontal {
                position: relative;
                display: grid;
                grid-template-columns: 220px 1fr; /* tighter image column */
                gap: 24px;
                width: calc(100% + 140px);   /* overlaps right side */
                margin-right: -140px;
                padding: 32px 46px;
                background: linear-gradient(135deg, #ffffff 0%, #f3f8f5 100%);
                border-radius: 30px;
                color: #1a1a1a;
                box-shadow:
                    0 28px 80px rgba(0,0,0,.18),
                    inset 0 1px 0 rgba(255,255,255,.7);
            }
            
            /* Accent strip */
            .testimonial-card.horizontal::before {
                content: "";
                position: absolute;
                left: 0;
                top: 28px;
                bottom: 28px;
                width: 5px;
                border-radius: 10px;
                background: linear-gradient(180deg, #0aa34a, #00c060);
            }
            
            /* =========================================================
               CLIENT IMAGE (LEFT)
            ========================================================= */
            .testimonial-media {
                width: 100%;
                height: auto;           /* auto height for responsiveness */
                overflow: hidden;
                border-radius: 18px;
            }
            
            .testimonial-media img {
                width: 100%;
                height: auto;           /* maintain aspect ratio */
                object-fit: contain;    /* show full image */
                display: block;
            }
            
            /* =========================================================
               CONTENT
            ========================================================= */
            .testimonial-content {
                padding-right: 8px;
            }
            
            .quote-mark {
                font-size: 64px;
                line-height: 1;
                color: rgba(0,178,58,.22);
                margin-bottom: 12px;
            }
            
            .testimonial-text {
                font-size: 17px;
                line-height: 1.85;
                color: #2a2a2a;
                margin-bottom: 24px;
                max-width: 520px;
            }
            
            .testimonial-author strong {
                font-size: 19px;
                font-weight: 900;
                color: #000;
            }
            
            .testimonial-author span {
                display: block;
                margin-top: 2px;
                font-size: 14px;
                color: #666;
            }
            
            /* =========================================================
               NAV
            ========================================================= */
            .testimonial-nav {
                margin-top: 32px;
                display: flex;
                gap: 16px;
            }
            
            .swiper-button-prev,
            .swiper-button-next {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: rgba(255,255,255,.18);
            }
            
            /* =========================================================
               RIGHT — HERO IMAGE (UNCHANGED)
            ========================================================= */
            .testimonial-right {
                position: relative;
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
            }
            
            .testimonial-hero {
                max-width: 680px;
                margin-top: -240px;
                margin-right: -40px;
                display: block;
                filter: drop-shadow(0 50px 120px rgba(0,0,0,.45));
                animation: floatHero 7s ease-in-out infinite;
                z-index: 5;
            }
            
            @keyframes floatHero {
                0%,100% { transform: translateY(0); }
                50% { transform: translateY(-22px); }
            }
            
            /* =========================================================
               RESPONSIVE SAFETY
            ========================================================= */
            @media (max-width: 992px) {
                .testimonial-grid {
                    grid-template-columns: 1fr;
                    gap: 60px;
                }
            
                .testimonial-card.horizontal {
                    width: 100%;
                    margin-right: 0;
                    grid-template-columns: 1fr; /* stack image above content */
                    padding: 28px 24px;
                    box-shadow: 0 20px 60px rgba(0,0,0,.15); /* slightly softer shadow on mobile */
                }
            
                .testimonial-media {
                    height: auto;
                    margin-bottom: 20px; /* spacing below image */
                }
            
                .testimonial-card.horizontal::before {
                    display: none; /* hide accent strip on mobile */
                }
            
                .testimonial-right {
                    justify-content: center;
                }
            
                .testimonial-hero {
                    margin-top: 0;
                    margin-right: 0;
                    max-width: 520px;
                }
            }
/* ============================================================   MOBILE FOOTER (Branded Action Toolbar)============================================================ */.mobile-footer {    position: fixed;    bottom: 0; left: 0;    width: 100%;    height: 54px;    padding: 0 4px;    display: flex;    justify-content: space-between;    align-items: center;    border-top: 1px solid rgba(255,255,255,0.08);    background: transparent;    z-index: 999;    animation: footerPop .45s ease-out;}.mobile-footer a {    flex: 1;    height: 100%;    margin: 4px;    padding: 0 6px;    display: flex;    align-items: center;    justify-content: center;    gap: 10px;    background: linear-gradient(180deg, rgba(35,35,35,0.85), rgba(15,15,15,0.9));    border-radius: 10px;    color: #fff !important;    text-decoration: none;    transition: transform .15s ease;}.mobile-footer a i {    font-size: 24px;    color: #fff !important;    transition: transform .3s cubic-bezier(.2,.9,.3,1.1), filter .3s ease;}.mobile-footer a span {    font-size: 18px;    font-weight: 600;    letter-spacing: .3px;    color: #fff !important;}/* Hover - Desktop Only */@media (hover:hover) {    .mobile-footer a:hover i {        transform: translateY(-6px) scale(1.15) rotate(-3deg);        filter: drop-shadow(0 8px 14px rgba(0,0,0,0.45));        animation: iconPulse .6s ease;    }}/* Tap Effect */.mobile-footer a:active {    background: var(--trinity-red);    transform: scale(.97);}.mobile-footer a:active i {    animation: tapVibrate .25s linear;}/* Unified Action Colors */.mobile-footer a.call,.mobile-footer a.book,.mobile-footer a.testride {    background-color: rgb(36,36,36);}.mobile-footer a.call:active,.mobile-footer a.book:active,.mobile-footer a.testride:active {    background: var(--trinity-red);}/* Mobile Typography Fix */@media (max-width: 768px) {    .mobile-footer a span {        font-size: 14px;    }}/* Animations */@keyframes iconPulse {    0% { transform: translateY(0) scale(1); }    50% { transform: translateY(-8px) scale(1.2); }    100% { transform: translateY(-6px) scale(1.15); }}@keyframes tapVibrate {    0%,100% { transform: translateX(0); }    20%,60% { transform: translateX(-2px); }    40%,80% { transform: translateX(2px); }}@keyframes footerPop {    from { transform: translateY(20px); opacity: 0; }    to   { transform: translateY(0); opacity: 1; }}/* ============================================================
   FOOTER SECTION — TRINITY EV (5 Columns)
============================================================ */
.footer {
    background: var(--trinity-bg-light);
    color: var(--trinity-dark);
    padding: 60px 0 120px; /* Increased bottom padding for mobile footer overlap */
    font-family: var(--font-impact);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns desktop */
    gap: 40px;
}

.footer-logo {
    height: 50px;
    margin-bottom: 16px;
}

.footer-desc {
    max-width: 340px;
    line-height: 1.6;
    opacity: 0.8;
    font-size: var(--fs-md);
}

.footer-links h4 {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: 12px;
}

.footer-links ul {
    padding: 0;
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 8px;
}

.footer-links ul li a {
    font-size: var(--fs-md);
    color: var(--trinity-dark);
    opacity: 0.9;
    transition: var(--fast);
}

.footer-links ul li a:hover {
    opacity: 1;
    color: var(--trinity-green);
}

.footer-links ul li a.product-link {
    display: inline-block;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================== FOOTER BOTTOM — CENTERED & MODERN ===================== */
.footer-bottom {
    margin-top: 50px;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 30px 0; /* top and bottom padding */
    display: flex;
    flex-direction: column; /* center content vertically */
    align-items: center; /* center horizontally */
    gap: 12px;
    font-size: var(--fs-sm);
    font-family: var(--font-impact);
    color: var(--trinity-dark);
    opacity: 0.8;
    text-align: center;
}

.footer-bottom span {
    font-size: var(--fs-sm);
    font-weight: 400;
}

/* Modern Social Icons */
.footer-social {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--trinity-red);
    color: #fff;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.footer-social a:hover {
    background: var(--trinity-green);
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Responsive Footer-Bottom */
@media (max-width: 768px) {
    .footer-bottom {
        gap: 10px;
        padding: 25px 0;
    }
    .footer-social a {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .footer-bottom {
        padding: 20px 0;
        gap: 8px;
    }
    .footer-social a {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}


/* ===================== RESPONSIVE ===================== */
@media (max-width: 1200px) {
    .footer-grid {
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer {
        padding-bottom: 160px; /* Extra space so mobile-footer toolbar doesn't overlap */
    }
}


/* ============================================================ 
               BOOTSTRAP MODAL — BRAND OVERRIDES (FINAL & SAFE)
            ============================================================ */
            
            /* Only hide backdrop visually — DO NOT KILL LIFECYCLE */
            .modal-backdrop {
                background-color: rgba(0,0,0,.55) !important;
                z-index: 9999 !important; /* below modal, above navbar */
            }
            /* prevent double backdrop ONLY when nested */
            .modal-backdrop + .modal-backdrop {
                display: none !important;
            }
            
            /* ============================================================
               MODAL Z-INDEX
            ============================================================ */
            .modal {
                z-index: 10000 !important; /* above navbar */
            }
            
            /* ============================================================
               MODAL WIDTH — RESPECT BOOTSTRAP SIZES
            ============================================================ */
            .modal-dialog {
                transition: transform .4s ease;
            }
            
            /* default (md) */
            .modal-dialog:not(.modal-lg):not(.modal-xl) {
                max-width: 520px;
            }
            
            /* large */
            .modal-lg {
                max-width: 900px !important;
            }
            
            /* extra large */
            .modal-xl {
                max-width: 1200px !important;
            }
            
            /* ============================================================
               MODAL CONTENT & HEIGHT
            ============================================================ */
            .modal-content {
                background: #fff;
                border-radius: var(--radius-lg);
                border: none;
                box-shadow: var(--shadow-medium);
                animation: modalFade var(--medium) ease;
                display: flex;
                flex-direction: column;
                max-height: 90vh; /* keeps modal within viewport */
            }
            
            /* scrollable body */
            .modal-body {
                padding: 20px 32px 10px;
                overflow-y: auto;
                max-height: calc(90vh - 140px); /* header + footer reserved */
            }
            .modal-body .form-label {
                font-size: var(--fs-sm);
                font-weight: 600;
                margin-bottom: 6px;
            }
            
            /* INPUT */
            .modal-body .form-control {
                padding: 12px;
                border: 1px solid #ddd;
                border-radius: var(--radius-md);
                font-size: var(--fs-sm);
            }
            .modal-body .form-control:focus {
                border-color: var(--trinity-green);
                box-shadow: 0 0 0 3px rgba(0,178,58,.15);
                outline: none;
            }
            
            /* ============================================================
               FORM SELECT — BRAND STYLE
            ============================================================ */
            .modal-body .form-select {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                padding: 12px 42px 12px 14px;
                border-radius: var(--radius-md);
                border: 1px solid #ddd;
                background:
                    #fff
                    url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300b23a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
                    no-repeat right 14px center;
                background-size: 14px;
                font-size: var(--fs-sm);
                cursor: pointer;
            }
            .modal-body .form-select:focus {
                border-color: var(--trinity-green);
                box-shadow: 0 0 0 3px rgba(0,178,58,.18);
                outline: none;
            }
            .modal-body .form-select option {
                font-weight: 500;
                padding: 8px;
            }
            .modal-body .form-select:disabled {
                background-color: #f2f2f2;
                cursor: not-allowed;
            }
            
            /* ============================================================
               CHECKBOX — BRAND STYLE
            ============================================================ */
            .ev-checkbox {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-top: 6px;
            }
            .ev-checkbox .form-check-input {
                width: 20px;
                height: 20px;
                border-radius: 6px;
                border: 2px solid #bbb;
                background-color: #fff;
                cursor: pointer;
                appearance: none;
            }
            .ev-checkbox .form-check-input:checked {
                background-color: var(--trinity-green);
                border-color: var(--trinity-green);
                background-image:
                    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: center;
                background-size: 14px;
            }
            .ev-checkbox .form-check-input:focus {
                box-shadow: 0 0 0 3px rgba(0,178,58,.2);
            }
            .ev-checkbox .form-check-label {
                font-size: var(--fs-sm);
                font-weight: 600;
                cursor: pointer;
            }
            
            /* ============================================================
               IOS-STYLE SWITCH — OPTIONAL (STATUS TOGGLE)
            ============================================================ */
            .ev-switch {
                position: relative;
                width: 48px;
                height: 26px;
            }
            .ev-switch input {
                display: none;
            }
            .ev-switch label {
                position: absolute;
                inset: 0;
                cursor: pointer;
                background: #ccc;
                border-radius: 999px;
                transition: .3s;
            }
            .ev-switch label::after {
                content: "";
                position: absolute;
                width: 20px;
                height: 20px;
                top: 3px;
                left: 3px;
                border-radius: 50%;
                background: #fff;
                transition: .3s;
                box-shadow: 0 2px 8px rgba(0,0,0,.25);
            }
            .ev-switch input:checked + label {
                background: var(--trinity-green);
            }
            .ev-switch input:checked + label::after {
                transform: translateX(22px);
            }
            
            /* ============================================================
               MODAL HEADER & FOOTER
            ============================================================ */
            .modal-header {
                padding: 20px 32px 10px;
                border-bottom: none;
            }
            .modal-title {
                font-family: var(--font-impact);
                font-size: var(--fs-lg);
                font-weight: 700;
            }
            .btn-close {
                opacity: .7;
                transition: .2s;
            }
            .btn-close:hover {
                opacity: 1;
                transform: rotate(90deg);
            }
            .modal-footer {
                padding: 20px 32px 28px;
                border-top: none;
                gap: 12px;
                flex-shrink: 0; /* prevent shrink */
            }
            .modal-footer .btn {
                padding: 10px 24px;
                border-radius: var(--radius-full);
                font-weight: 600;
            }
            .modal-footer .btn-secondary {
                background: #ccc !important;
                color: #000 !important;
            }
            .modal-footer .btn-danger {
                background: var(--trinity-green) !important;
                border: none;
            }
            .modal-footer .btn-danger:hover {
                background: var(--trinity-red) !important;
            }
            
            /* ============================================================
               MOBILE BOTTOM SHEET + FOOTER SAFE SPACE
            ============================================================ */
            @media (max-width: 576px) {
                .modal-dialog {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: 0;
                    width: 100%;
                    max-width: 100% !important;
                    height: auto;
                    max-height: calc(92vh - 60px); /* reserve space for footer */
                    border-radius: 18px 18px 0 0;
                    transform: translateY(100%);
                    transition: transform .35s ease;
                }
                .modal.show .modal-dialog {
                    transform: translateY(0);
                }
                .modal-content {
                    height: auto;
                    max-height: calc(92vh - 60px);
                    border-radius: 18px 18px 0 0;
                }
                .modal-body {
                    overflow-y: auto;
                    max-height: calc(92vh - 60px - 80px); /* header + footer reserved */
                    padding-left: 20px !important;
                    padding-right: 20px !important;
                }
                .modal-header,
                .modal-footer {
                    padding-left: 20px !important;
                    padding-right: 20px !important;
                }
                /* sticky footer buttons */
                .modal-footer {
                    position: sticky;
                    bottom: 0;
                    background: #fff;
                    z-index: 5;
                    box-shadow: 0 -8px 20px rgba(0,0,0,.08);
                }
            }
            
            /* ============================================================
               PREVENT BODY SHIFT
            ============================================================ */
            body.modal-open {
                padding-right: 0 !important;
                overflow: auto !important;
            }
            
/* ============================================================   FLOATING BUTTONS — Back To Top + WhatsApp============================================================ *//* Back To Top */.back-to-top {    position: fixed;    right: 20px;    bottom: 150px;    width: 54px;    height: 54px;    display: flex;    align-items: center;    justify-content: center;    background: rgba(20,20,20,0.80);    border-radius: 50%;    border: 1px solid rgba(255,255,255,0.12);    color: #fff;    opacity: 0;    pointer-events: none;    transition: .3s ease;    transform: translateY(20px);    box-shadow: 0 6px 18px rgba(0,0,0,0.2);    z-index: 999999;}.back-to-top.show {    opacity: 1;    pointer-events: auto;    transform: translateY(0);}.back-to-top:hover {    background: var(--trinity-green);    box-shadow: 0 0 18px var(--trinity-green);    transform: translateY(-5px);}/* WhatsApp Button */#help-chat {    position: fixed;    bottom: 90px;    right: 20px;    display: flex;    align-items: center;    gap: 8px;    background: #00b23a;    color: #fff;    padding: 10px 16px;    border-radius: 50px;    font-size: .95rem;    font-weight: 600;    text-decoration: none;    box-shadow: 0 4px 12px rgba(0,0,0,0.2);    animation: pulse 2s infinite;    transition: .3s;    z-index: 999;}@keyframes pulse {    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.6); }    70%  { box-shadow: 0 0 0 12px rgba(37,211,102,0); }    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }}/* Mobile adjustments */@media (max-width: 768px) {    .back-to-top { right: 16px; bottom: 130px; }    #help-chat { bottom: 60px; }}/*

/* ============================================================
   PREMIUM TOAST — TRINITY EV (Professional)
============================================================ */
.ev-toast-container {
    position: fixed;
    top: 90px; /* below navbar */
    right: 24px;
    z-index: 99999;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ev-toast {
    min-width: 300px;
    max-width: 380px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 16px 20px;
    background-color: #fff;
    border-radius: 14px;

    box-shadow:
        0 16px 40px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7);

    animation: toast-slide-in .35s cubic-bezier(.25,.46,.45,.94);
    position: relative;
}

.ev-toast-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    color: #fff;
    flex-shrink: 0;

    /* No default background — only set for success/error */
}

.ev-toast.success .ev-toast-icon {
    background-color: var(--trinity-green);
}

.ev-toast.error .ev-toast-icon {
    background-color: #e63946;
}

.ev-toast.success {
    border-left: 5px solid var(--trinity-green);
}

.ev-toast.error {
    border-left: 5px solid #e63946;
}

.ev-toast-content p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #111;
    line-height: 1.4;
}

.ev-toast-close {
    background: none;
    border: none;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    margin-left: auto;
}

.ev-toast-close:hover {
    color: #000;
}

/* Slide-in animation */
@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


 /* ============================================================
   Dealer Enquiry Page — Premium Styling
============================================================ */
.dealer-header {
    background: var(--grad-electric);
    color: var(--trinity-white);
    text-align: center;
    padding: 80px 20px;
    box-shadow: var(--shadow-medium);
    margin-bottom: 60px;
}

.dealer-header h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-xxl);
    margin-bottom: 16px;
}

.dealer-header p {
    font-size: var(--fs-lg);
    max-width: 700px;
    margin: 0 auto;
}

/* Dealer Section Layout */
.dealer-section {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 80px;
}

.dealer-left,
.dealer-right {
    flex: 1;
}

.dealer-left img {
    width: 100%;
    height: auto;
}

/* ============================================================
   Premium Benefits Section
============================================================ */
.benefits-section {
    position: relative;
    padding: 20px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: 50px;
    z-index: 1;
}

.benefits-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.benefits-section h3 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
    color: var(--text-dark);
    position: relative;
    z-index: 1;
}

/* Benefit Cards */
.benefits-section .benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    min-height: 250px; /* Equal height */
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.benefits-section .benefit-card i {
    font-size: 36px;
    color: var(--trinity-red);
    margin-bottom: 16px;
}

.benefits-section .benefit-card p {
    font-size: 16px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.benefits-section .benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* ============================================================
   Dealer Right Form Styling
============================================================ */
.dealer-right .card {
    box-shadow: var(--shadow-medium);
    border-radius: var(--radius-md);
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dealer-right .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hard);
}

.dealer-right h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    margin-bottom: 30px;
}

/* Form Styling */
.form-label {
    font-weight: 500;
}

.form-floating > label {
    color: var(--text-light);
    font-weight: 500;
}

/* Remove Bootstrap focus highlight */
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: #ccc;
    box-shadow: none;
}

/* Subtle hover highlight */
.form-floating > .form-control:hover,
.form-floating > .form-select:hover {
    border-color: var(--trinity-red);
}

/* ============================================================
   Responsive Styling
============================================================ */
@media (max-width: 992px) {
    .dealer-section {
        flex-direction: column;
    }
    .dealer-left,
    .dealer-right {
        width: 100%;
    }
    .dealer-header {
        padding: 60px 20px;
    }
    .benefits-section h3 {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    .benefit-card {
        padding: 30px 15px;
    }
}


/* ---------------- PRODUCT PAGE HEADER ---------------- */
.product-page-header {
    padding: 100px 20px;
    background:
        linear-gradient(120deg, rgba(224,0,25,0.15), rgba(0,0,0,0.65)),
        url('/assets/img/webs/ev-savings-bg.webp') no-repeat center center;
    background-size: cover;
    color: var(--trinity-white);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

/* Overlay for readability */
.product-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1;
}

.product-page-header .container {
    position: relative;
    z-index: 2;
}

.badge-ev {
    background: var(--grad-electric);
    color: var(--trinity-white);
    padding: 8px 20px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.product-title {
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.1;
    margin: 20px 0 16px;
}

.product-title span {
    color: var(--trinity-red);
}

.product-subtitle {
    max-width: 600px;
    font-size: 1.1rem;
    color: var(--trinity-white);
    line-height: 1.6;
    margin: 0 auto;
}

/* ---------------- PRODUCT MAIN ---------------- */
.product-main {
    margin: 80px auto;
}

.product-card {
    background: var(--trinity-white);
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 16px 44px rgba(0,0,0,.08);
}

/* ---------------- MAIN PRODUCT IMAGE + VERTICAL THUMBS ---------------- */
.main-product-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 15px; /* space between thumbs and main image */
}

.main-product-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.main-product-thumbs img {
    width: 70px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease;
    background: var(--trinity-bg-light);
}

.main-product-thumbs img.active,
.main-product-thumbs img:hover {
    border-color: var(--trinity-red);
    transform: scale(1.05);
}

/* MAIN IMAGE WRAPPER WITH GRAY BORDER */
.main-product-img-wrapper {
    border: 2px solid #ddd; /* gray border */
    border-radius: 16px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f9f9f9;
}

.main-product-img-wrapper img {
    max-height: 420px;
    width: 100%;
    object-fit: cover;
    border-radius: 12px; /* smaller radius to fit inside wrapper */
    transition: transform 0.3s ease;
}

.main-product-img-wrapper img:hover {
    transform: scale(1.03);
}



/* PRICE */
.price {
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--trinity-red);
}

.price del {
    font-size: 1.1rem;
    color: var(--trinity-grey-3);
    margin-left: 10px;
}

/* HIGHLIGHTS */
.highlight li {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

/* EV STATS */
.ev-stat {
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 16px;
    background: var(--trinity-bg-light);
    text-align: center;
}

.ev-stat i {
    font-size: 1.9rem;
    color: var(--trinity-red);
}

.ev-stat strong {
    display: block;
    margin-top: 4px;
}

/* DESCRIPTION */
.product-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--trinity-grey-2);
    margin-top: 20px;
}

/* Branded Buttons */
.btn-trinity {
    background: var(--trinity-red);
    color: var(--trinity-white);
    border: 2px solid var(--trinity-red);
    font-weight: 600;
    transition: 0.3s ease;
}

.btn-trinity:hover {
    background: var(--trinity-green);
    border-color: var(--trinity-green);
    color: var(--trinity-white);
}

.btn-trinity-outline {
    background: transparent;
    color: var(--trinity-red);
    border: 2px solid var(--trinity-red);
    font-weight: 600;
    transition: 0.3s ease;
}

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

/* ==============================
   PRODUCT PAGE FAQ - TRINITY BRAND
============================== */
.product-faq {
    background: var(--trinity-bg-light);
    color: var(--trinity-grey-3);
}

.product-faq .faq-title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--trinity-black);
}

.product-faq .faq-title span {
    color: var(--trinity-red);
}

.product-faq .faq-subtitle {
    font-size: 1.1rem;
    color: var(--trinity-grey-2);
}

.accordion-button {
    background: var(--trinity-white);
    color: var(--trinity-black);
    padding: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    background: var(--trinity-red);
    color: var(--trinity-white);
    box-shadow: 0 4px 15px rgba(224,0,25,0.25);
}

.accordion-button::after {
    filter: invert(30%) sepia(100%) saturate(600%) hue-rotate(-5deg);
}

.accordion-body {
    background: var(--trinity-white);
    color: var(--trinity-grey-3);
    padding: 16px 20px;
    border-left: 2px solid var(--trinity-red);
    border-right: 2px solid var(--trinity-red);
    border-bottom: 2px solid var(--trinity-red);
    font-size: 1rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .accordion-button {
        padding: 14px;
        font-size: 0.95rem;
    }
    .accordion-body {
        padding: 14px 16px;
    }
}

/* ==============================
   SIMILAR PRODUCTS STYLING
============================== */
.product-similar .card {
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* ensures image corners respect card border-radius */
}

.product-similar .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 44px rgba(0,0,0,.1);
}

.similar-product-img {
    width: 100%;
    border-radius: 10px; /* rounded corners */
    transition: transform 0.3s ease;
}

.similar-product-img:hover {
    transform: scale(1.05);
}

.product-similar .price {
    font-weight: 700;
    color: var(--trinity-red);
}

.product-similar .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
}

   /* Premium page hero Styling */
        .page-hero {
            position: relative;
            overflow: hidden;
        }
        .page-hero::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.25);
            z-index: 1;
        }
        .page-hero .container {
            position: relative;
            z-index: 2;
        }
        .page-hero h2 {
            font-size: 2.5rem;
            font-family: var(--font-impact);
            font-weight: 700;
        }
        .page-content .content-wrapper {
            background: var(--trinity-white);
            padding: 40px 30px;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-medium);
            margin-top: -50px;
        }
        .page-content h2 {
            color: var(--trinity-black);
            border-left: 4px solid var(--trinity-red);
            padding-left: 12px;
            margin-bottom: 16px;
        }
        .page-content ul li {
            margin-bottom: 10px;
            line-height: 1.8;
        }
        .page-content a {
            color: var(--trinity-red);
            font-weight: 500;
            text-decoration: underline;
            transition: 0.3s;
        }
        .page-content a:hover {
            color: var(--trinity-green);
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
            .page-hero {
            margin-top: 90px;
            }
            .page-content .content-wrapper {
                padding: 30px 20px;
                margin-top: -30px;
            }
            .page-hero h1 {
                font-size: clamp(28px,5vw,40px);
            }
        }
        @media (max-width: 576px) {
            .page-content .content-wrapper {
                padding: 25px 16px;
            }
            .page-hero p {
                font-size: var(--fs-sm);
            }
        }

       /* ======================================================
   OUR STORY & ABOUT US — PREMIUM PAGE (FINAL)
====================================================== */

/* ===============================
   TIMELINE
================================ */

.timeline {
    position: relative;
    margin: 40px 0;
    padding: 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 4px;
    background: linear-gradient(to bottom, var(--trinity-red), var(--trinity-green));
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 2px;
}

.story-timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
}

.story-timeline-item.left {
    left: 0;
    text-align: right;
}

.story-timeline-item.right {
    left: 50%;
    text-align: left;
}

.story-timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.timeline-icon {
    position: absolute;
    top: 20px;
    width: 50px;
    height: 50px;
    background: var(--trinity-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.story-timeline-item.left .timeline-icon { right: -25px; }
.story-timeline-item.right .timeline-icon { left: -25px; }

.story-timeline-item:hover .timeline-icon {
    transform: scale(1.2) rotate(10deg);
}

.story-timeline-content h3 {
    font-weight: 600;
    margin-bottom: 6px;
}

.story-timeline-content p {
    font-size: var(--fs-md);
}

/* ===============================
   CORE VALUES — PREMIUM DESIGN
================================ */

.core-values-section {
    padding: 70px 0 40px;
    background: linear-gradient(180deg, #f8f9fb, #ffffff);
}

.core-values-section h2 {
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Grid */
.core-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Card */
.core-value-card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.core-value-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(227, 6, 19, 0.08),
        rgba(0, 168, 89, 0.08)
    );
    opacity: 0;
    transition: opacity 0.35s ease;
}

.core-value-card:hover::before {
    opacity: 1;
}

.core-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.15);
}

/* Icon */
.icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #fff;
    font-size: 1.8rem;
}

/* Text */
.core-value-card h5 {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: var(--fs-md);
}

.core-value-card p {
    font-size: var(--fs-sm);
    color: var(--trinity-dark);
    line-height: 1.6;
}

/* Mobile tweaks */
@media (max-width: 576px) {
    .core-values-grid {
        gap: 20px;
    }
    .core-value-card {
        padding: 30px 20px;
    }
}

/* ===============================
   DEDICATED TEAM — PREMIUM
================================ */

.team-section {
    margin-top: 60px;
    padding-bottom: 80px;
}

.team-section h2 {
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: 50px;
}

/* Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    justify-items: center;
    gap: 20px;
}

/* Card */
.team-member {
    text-align: center;
    background: #fff;
    padding: 25px 15px;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

/* Image wrapper */
.team-img-wrapper {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 15px;
}

.team-member img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--trinity-red);
    position: relative;
    z-index: 2;
}

/* Background shape */
.team-img-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, var(--trinity-red), var(--trinity-green));
    border-radius: 20% 50% 50% 20%;
    z-index: 1;
    transition: transform 0.3s ease;
}

.team-member:hover .team-img-bg {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
}

/* Text */
.team-member h5 {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: var(--fs-md);
}

.team-member span {
    font-size: var(--fs-sm);
    color: var(--trinity-dark);
    display: block;
    margin-bottom: 12px;
}

/* Social */
.team-member .social a {
    font-size: 1.2rem;
    margin: 0 6px;
    color: var(--trinity-red);
    transition: 0.3s;
}

.team-member .social a:hover {
    color: var(--trinity-green);
}

/* ===============================
   RESPONSIVE — TIMELINE
================================ */

@media (max-width: 992px) {
    .timeline::before {
        left: 25px;
        transform: none;
    }

    .timeline-item {
        width: 100%;
        padding-left: 80px;
        padding-right: 30px;
        text-align: left;
        margin-bottom: 40px;
    }

    .timeline-item.left,
    .timeline-item.right {
        left: 0;
    }

    .timeline-item .timeline-icon {
        left: 0;
        right: auto;
    }
}

/* ===============================
   RESPONSIVE — TEAM
================================ */

@media (max-width: 768px) {
    .team-img-wrapper {
        width: 180px;
        height: 180px;
    }
    .team-img-bg {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 576px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .team-img-wrapper {
        width: 140px;
        height: 140px;
    }
    .team-img-bg {
        width: 120px;
        height: 120px;
    }
}