/* ============================================================
   HARI CRACKERS — DESIGN TOKENS
   Palette: deep navy-blue ground, blazing orange ignition,
   warm gold ember accent (matches the Hari Crackers logo:
   peacock-blue feather + golden-orange fireworks)
   Display: Anton (bold, festive, poster-like)
   Body: Poppins
   Signature: the "lit fuse" — a dashed spark-line that runs
   between every section, echoing an actual firecracker fuse.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg: #ffffff;
    --bg-white: #ffffff;
    --bg-elevated: #fdf8e8;      /* Very light yellow background */
    --card: #ffc107;             /* Yellow (main accent) */
    --card-hover: #e6a800;       /* Darker yellow for hover */
    --border: rgba(45, 0, 80, 0.12);           /* Purple tint border */
    --border-strong: rgba(255, 193, 7, 0.30);  /* Yellow strong border */
    --yellow: #ffc107;           /* Main yellow */
    --yellow-bright: #ffd54f;    /* Bright yellow */
    --ember: #6a1b9a;            /* Dark Purple (replaces orange ember) */
    --ember-soft: rgba(106, 27, 154, 0.15);    /* Soft purple */
    --navy: #2d0050;             /* Dark Purple (replaces navy blue) */
    --navy-light: #4a148c;       /* Medium purple */
    --navy-deep: #1a0033;        /* Deep purple */
    --navy-soft: rgba(45, 0, 80, 0.08);        /* Soft purple */
    --text: #1f1f1f;
    --text-muted: #555555;
    --text-dim: #888888;
    --radius: 14px;
    --radius-sm: 8px;
    --max-w: 1200px;
    --shadow-glow: 0 0 30px rgba(106, 27, 154, 0.25);  /* Purple glow */
    --sidebar-width: 260px;
    --header-height: 70px;
}/* ============================================================
   🔥 FORCE YELLOW + PURPLE THEME - OVERRIDE ALL
   ============================================================ */

:root {
    --bg-elevated: #fdf8e8 !important;
    --card: #ffc107 !important;
    --card-hover: #e6a800 !important;
    --border-strong: rgba(255, 193, 7, 0.30) !important;
    --ember: #6a1b9a !important;
    --ember-soft: rgba(106, 27, 154, 0.15) !important;
    --navy: #2d0050 !important;
    --navy-light: #4a148c !important;
    --navy-deep: #1a0033 !important;
    --navy-soft: rgba(45, 0, 80, 0.08) !important;
    --shadow-glow: 0 0 30px rgba(106, 27, 154, 0.25) !important;
    --yellow: #ffc107 !important;
    --yellow-bright: #ffd54f !important;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    background-image:
        radial-gradient(circle at 15% 10%, rgba(255, 201, 60, 0.05), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(255, 90, 31, 0.05), transparent 40%);
}

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

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

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}

h1,
h2,
h3,
.display {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.05;
    text-transform: uppercase;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--yellow);
}

.eyebrow::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--ember);
}

.accent {
    color: var(--yellow);
}
/* ============================================================
   TOP BAR — Yellow background + Dark Purple text
   ============================================================ */

.top-bar {
    width: 100%;
    background-color: #ffc107;/* Yellow */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    box-sizing: border-box;
    text-align: center;
}

.top-bar-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.tb-tamil,
.tb-english {
    color: #2d0050; /* Dark Purple text */
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.5;
    white-space: normal;
    overflow: visible;
}

.tb-tamil {
    text-align: center;
}

.tb-english {
    text-align: center;
}

.tb-sep {
    color: #6a1b9a; /* Purple separator */
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
    .tb-tamil,
    .tb-english {
        font-size: 12.5px;
    }
    .top-bar-flex {
        gap: 10px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    .top-bar {
        padding: 8px 12px;
    }
    .top-bar-flex {
        flex-direction: column;
        gap: 4px;
    }
    .tb-sep {
        display: none;
    }
    .tb-tamil,
    .tb-english {
        font-size: 12px;
        line-height: 1.4;
    }
}

/* ---------- Small phone ---------- */
@media (max-width: 420px) {
    .tb-tamil,
    .tb-english {
        font-size: 11px;
    }
}

/* ---------------- HEADER ---------------- */

.site-header {
    width: 100%;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}

/* ---------------- TOP HEADER ---------------- */

.nav-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
    background: #ffffff;
    border-bottom: 1px solid rgba(45, 0, 80, .10);
    box-sizing: border-box;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 88px;
    width: auto;
}

/* Right */
.nav-top-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Phone */
.nav-top-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2d0050; /* Dark Purple */
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
}

.nav-top-phone i {
    color: #6a1b9a; /* Purple */
    font-size: 20px;
}

.nav-top-phone:hover {
    color: #6a1b9a;
}

/* ============================================================
   🔥 ALL CATEGORIES MENU
   ============================================================ */
.all-categories {
    position: relative;
}

.all-categories-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #ffffff;
    border: 1px solid rgba(45, 0, 80, 0.12);
    border-radius: 12px;
    min-width: 240px;
    padding: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    z-index: 999;
}

.all-categories-menu.open {
    display: block;
}

.all-categories-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #1e1e2a;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.all-categories-menu a i {
    color: #ffc107; /* Yellow */
    width: 20px;
    font-size: 0.9rem;
}

.all-categories-menu a:hover {
    background: rgba(106, 27, 154, 0.08); /* Light Purple */
    color: #6a1b9a;
}

/* Cart */
.header-cart {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #ffffff;
    border: 2px solid #6a1b9a; /* Purple border */
    border-radius: 999px;
    color: #2d0050; /* Dark Purple */
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.header-cart i,
#header-cart-total {
    color: #2d0050; /* Dark Purple */
}

.header-cart:hover {
    background: #6a1b9a; /* Purple */
    color: #fff;
    transform: translateY(-2px);
}

.header-cart:hover i,
.header-cart:hover #header-cart-total {
    color: #fff;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--card); /* Purple */
    color: #2d0050;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid #fff;
}/* ============================================================
   🔥 FIX: CART BADGE - FORCE PURPLE
   ============================================================ */

.cart-badge {
    background: var(--card) !important; /* Purple */
    color: #2d0050 !important;
    border: 2px solid #ffffff !important;
}

.cart-badge.empty {
    background: #999999 !important; /* Gray when empty */
}

/* ---------------- PURPLE MENU BAR ---------------- */

.nav-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(135deg, #2d0050, #4a148c); /* Dark Purple */
    padding: 8px 40px;
    box-sizing: border-box;
}

/* All Categories */
.all-categories-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #ffc107; /* Yellow */
    color: #2d0050; /* Dark Purple */
    border: none;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.all-categories-btn i {
    color: #2d0050; /* Dark Purple */
}

/* Main Menu */
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.main-nav ul li a {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: .3s;
}

.main-nav ul li a:hover {
    background: rgba(255, 255, 255, .15);
}

.main-nav ul li a.active {
    background: #ffc107; /* Yellow */
    color: #2d0050; /* Dark Purple */
}

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

.nav-actions .btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #ffc107; /* Yellow */
    color: #2d0050; /* Dark Purple */
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
}

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

/* ============================================================
   HAMBURGER MENU — PURPLE + YELLOW THEME
   ============================================================ */
    /* Force badge to always show */
    .cart-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background: var(--ember);
      color: #fff;
      font-size: 0.65rem;
      font-weight: 700;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex !important;
      /* ← Force display */
      align-items: center;
      justify-content: center;
      border: 2px solid var(--bg-white);
    }

    /* When cart is empty, show 0 with faded style */
    .cart-badge.empty {
      background: #999;
      font-size: 0.55rem;
    }
    
.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ffc107;         /* Yellow border */
    background: #2d0050;                /* Dark Purple background */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hamburger span {
    width: 18px;
    height: 2px;
    background: #6a1b9a;                /* Yellow lines */
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger:hover {
    background: #6a1b9a;                /* Lighter Purple on hover */
    border-color: #ffc107;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4); /* Yellow glow */
}

.hamburger:hover span {
    background: #ffffff;                /* White lines on hover */
}

/* Active state (when menu is open) */
.hamburger.active {
    background: #ffc107;                /* Yellow background */
    border-color: #2d0050;              /* Dark Purple border */
}

.hamburger.active span {
    background: #2d0050;                /* Dark Purple lines */
}


/* ============================================================
   OUR BRANDS SECTION - PURPLE + YELLOW THEME
   ============================================================ */

.our-brands {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f5e6ff 100%);
    overflow: hidden;
}

/* Background Glow */
.our-brands::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(106, 27, 154, 0.08), transparent 70%);
    pointer-events: none;
}

.our-brands::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.08), transparent 70%);
    pointer-events: none;
}

/* ============================================================
   SECTION HEADING
   ============================================================ */

.brands-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
    position: relative;
    z-index: 2;
}

/* Pill Badge - Purple with Yellow */
.brands-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(106, 27, 154, 0.10);
    border: 1px solid rgba(106, 27, 154, 0.20);
    border-radius: 999px;
    color: #6a1b9a;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.brands-pill i {
    color: #ffc107;
    font-size: 0.8rem;
}

/* Main Heading - Dark Purple */
.brands-head h2 {
    font-family: 'Anton', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #2d0050;
    margin: 10px 0 14px;
    letter-spacing: 1px;
    line-height: 1.1;
}

/* Accent - Yellow */
.brands-head h2 span {
    color: #ffc107;
    position: relative;
}

/* Underline Decoration */
.brands-head h2 span::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #6a1b9a, #ffc107);
    border-radius: 2px;
}

/* Description */
.brands-head p {
    color: #6a1b9a;
    font-size: 1rem;
    line-height: 1.7;
    max-width: 560px;
    margin: 16px auto 0;
}

/* ============================================================
   PRODUCT SLIDER (Integrated)
   ============================================================ */

.product-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    z-index: 2;
}

/* Edge Fade */
.product-slider::before,
.product-slider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 3;
    pointer-events: none;
}

.product-slider::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
}

.product-slider::after {
    right: 0;
    background: linear-gradient(270deg, #f5e6ff, transparent);
}

/* Slider Track */
.slider-track {
    display: flex;
    width: max-content;
    gap: 20px;
    animation: scrollProducts 45s linear infinite;
}

.slider-track:hover {
    animation-play-state: paused;
}

/* Product Card */
.product-card {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
    background: #ffffff;
    border: 2px solid rgba(106, 27, 154, 0.15);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(106, 27, 154, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    transition: all 0.35s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Card Hover */
.product-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #6a1b9a;
    box-shadow: 0 18px 40px rgba(106, 27, 154, 0.22);
}

/* Top Accent Bar */
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #6a1b9a, #ffc107, #6a1b9a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.product-card:hover::before {
    transform: scaleX(1);
}

/* Product Image */
.product-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.35s ease;
    filter: grayscale(0);
}

.product-card:hover img {
    transform: scale(1.08);
}

/* ============================================================
   ANIMATION
   ============================================================ */

@keyframes scrollProducts {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 10px));
    }
}

/* ============================================================
   HIDE SCROLLBAR
   ============================================================ */

.product-slider::-webkit-scrollbar {
    display: none;
}

.product-slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    .our-brands {
        padding: 60px 0;
    }

    .product-card {
        width: 160px;
        height: 160px;
        padding: 15px;
    }

    .slider-track {
        gap: 16px;
        animation-duration: 40s;
    }

    .product-slider::before,
    .product-slider::after {
        width: 60px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .our-brands {
        padding: 50px 0;
    }

    .brands-head {
        margin-bottom: 35px;
        padding: 0 16px;
    }

    .brands-head h2 {
        font-size: 1.8rem;
    }

    .brands-head p {
        font-size: 0.9rem;
    }

    .product-card {
        width: 130px;
        height: 130px;
        padding: 12px;
        border-radius: 16px;
    }

    .slider-track {
        gap: 14px;
        animation-duration: 35s;
    }

    .product-slider::before,
    .product-slider::after {
        width: 40px;
    }
}

/* Small Phone */
@media (max-width: 480px) {
    .our-brands {
        padding: 40px 0;
    }

    .brands-pill {
        font-size: 0.68rem;
        padding: 6px 14px;
    }

    .brands-head h2 {
        font-size: 1.5rem;
    }

    .brands-head p {
        font-size: 0.82rem;
    }

    .product-card {
        width: 100px;
        height: 100px;
        padding: 10px;
        border-radius: 14px;
    }

    .slider-track {
        gap: 12px;
        animation-duration: 28s;
    }

    .product-slider::before,
    .product-slider::after {
        width: 25px;
    }
}
/* ---------------- MOBILE ---------------- */
@media(max-width:992px) {
    .nav-top {
        padding: 14px 18px;
        flex-direction: column;
        gap: 14px;
    }
    .logo-img {
        height: 70px;
    }
    .nav-top-right {
        width: 100%;
        justify-content: space-between;
    }
    .nav-bottom {
        padding: 8px 14px;
        position: relative;
    }
    .main-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
        padding: 15px;
    }
    .main-nav.active {
        display: block;
    }
    .main-nav ul {
        flex-direction: column;
    }
    .main-nav ul li a {
        color: #333;
    }
    .main-nav ul li a.active {
        color: #6a1b9a; /* Purple */
        background: rgba(106, 27, 154, .08);
    }
    .hamburger {
        display: flex;
    }
    .nav-actions .btn {
        padding: 8px 14px;
        font-size: 13px;
    }
    .all-categories-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

@media(max-width:480px) {
    .nav-top-phone {
        font-size: 13px;
    }
    .header-cart {
        padding: 8px 12px;
    }
    .logo-img {
        height: 58px;
    }
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.3px;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    white-space: nowrap;
}

.btn-primary {
    background-color: #ffc107; /* Yellow */
    color: #2d0050; /* Dark Purple */
    box-shadow: 0 8px 24px rgba(255, 193, 7, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 193, 7, 0.4);
}

.btn-ghost {
    background: transparent;
    border: 1px solid #ffc107; /* Yellow */
    color: #2d0050; /* Dark Purple */
}

.btn-ghost:hover {
    border-color: #6a1b9a; /* Purple */
    color: #6a1b9a;
    background: rgba(106, 27, 154, 0.06);
}

/* ============================================================
   ORDER FORM (Client Information) — ADD-ON STYLES
   Paste this whole block at the very END of your existing style.css
   ============================================================ */

.client-info-section {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-bottom: 22px;
}

.client-info-section h3,
.order-details-heading {
    font-family: 'Anton', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.5px;
    color: var(--ember);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-details-heading {
    margin: 4px 0 14px;
}

.client-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.client-info-section .field input,
.client-info-section .field select,
.client-info-section .field textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: all 0.2s ease;
}

.client-info-section .field input:focus,
.client-info-section .field select:focus,
.client-info-section .field textarea:focus {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08);
}

.client-info-section .field-full {
    margin-bottom: 6px;
}

.client-info-section textarea {
    resize: vertical;
    min-height: 56px;
}

.client-form-error {
    display: none;
    align-items: center;
    gap: 8px;
    color: #c0392b;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.82rem;
    margin-top: 4px;
}

.client-form-error.show {
    display: flex;
}

@media (max-width: 560px) {
    .client-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Send to WhatsApp button ---- */
.btn-whatsapp {
    background: #25D366;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
    background: #21bd5c;
}

/* ============================================================
   TWO-MODAL CHECKOUT FLOW
   ============================================================ */

/* ---- Shopping Cart modal totals: two columns ---- */
.cart-modal-totals {
    justify-content: space-between;
    align-items: flex-start;
}

.cart-modal-totals-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-modal-totals-col.align-right {
    align-items: flex-end;
    text-align: right;
}

.cart-modal-minorder {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2ecc71;
}

.cart-modal-minorder strong {
    color: #2ecc71;
}

@media (max-width: 560px) {
    .cart-modal-totals {
        flex-direction: column;
        gap: 10px;
    }

    .cart-modal-totals-col.align-right {
        align-items: flex-start;
        text-align: left;
    }
}

/* ---- Order Summary modal: order details meta strip ---- */
.order-summary-meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
    padding: 14px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.order-summary-meta-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-summary-meta-col.align-right {
    align-items: flex-end;
    text-align: right;
}

.order-summary-meta strong {
    color: var(--text);
}

.os-overall strong {
    color: var(--ember);
    font-size: 1.05rem;
}

@media (max-width: 560px) {
    .order-summary-meta {
        flex-direction: column;
    }

    .order-summary-meta-col.align-right {
        align-items: flex-start;
        text-align: left;
    }
}

/* ============================================================
   🔥 FIX: ORDER SUMMARY MODAL - FULLY RESPONSIVE
   ============================================================ */

/* Force Order Summary table to be responsive */
#order-summary-modal .cart-modal-content {
    max-width: 800px;
    width: 100%;
    max-height: 95vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#order-summary-modal .cart-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

/* Order Summary Table - Desktop */
#os-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    display: table;
}

#os-table thead {
    display: table-header-group;
}

#os-table thead th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #555;
    background: #f8f4ef;
}

#os-table tbody {
    display: table-row-group;
}

#os-table tbody tr {
    display: table-row;
    border-bottom: 1px solid var(--border);
}

#os-table tbody td {
    display: table-cell;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    font-size: 0.85rem;
}

#os-table tfoot {
    display: table-footer-group;
}

#os-table tfoot tr {
    display: table-row;
}

#os-table tfoot td {
    display: table-cell;
    padding: 12px 12px;
}

/* ============================================================
   🔥 MOBILE: ORDER SUMMARY TABLE - STACK VIEW
   ============================================================ */

@media (max-width: 768px) {

    /* Force table to stack on mobile */
    #os-table,
    #os-table thead,
    #os-table tbody,
    #os-table tr,
    #os-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    #os-table thead {
        display: none !important;
    }

    #os-table tbody tr {
        display: block !important;
        margin-bottom: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 12px 14px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        width: 100% !important;
    }

    #os-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 0.82rem !important;
        width: 100% !important;
        text-align: left !important;
    }

    #os-table tbody td:last-child {
        border-bottom: none !important;
    }

    #os-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        flex-shrink: 0;
        margin-right: 12px;
    }

    /* Fix for tfoot on mobile */
    #os-table tfoot {
        display: block !important;
        margin-top: 10px;
        width: 100% !important;
    }

    #os-table tfoot tr {
        display: block !important;
        padding: 12px 14px;
        background: #f8f4ef;
        border-radius: var(--radius-sm);
        width: 100% !important;
    }

    #os-table tfoot td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 4px 0 !important;
        border: none !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* Grand Total row */
    .os-grand-total-row td {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }

    .os-grand-total-row td:last-child {
        color: var(--ember);
        font-weight: 700 !important;
    }
}

/* ============================================================
   🔥 EXTRA SMALL PHONES
   ============================================================ */

@media (max-width: 480px) {
    #order-summary-modal .cart-modal-body {
        padding: 10px 12px;
    }

    #os-table tbody td {
        font-size: 0.75rem !important;
        padding: 4px 0 !important;
    }

    #os-table tbody td::before {
        font-size: 0.6rem !important;
    }

    #os-table tbody tr {
        padding: 8px 10px !important;
        margin-bottom: 8px;
    }

    #os-table tfoot tr {
        padding: 8px 10px !important;
    }

    #os-table tfoot td {
        font-size: 0.8rem !important;
        padding: 3px 0 !important;
    }

    .os-grand-total-row td {
        font-size: 0.9rem !important;
    }

    .order-summary-meta {
        flex-direction: column !important;
        padding: 10px 12px !important;
        gap: 6px !important;
    }

    .order-summary-meta-col.align-right {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .os-overall {
        font-size: 0.95rem !important;
    }

    /* Client info grid - single column */
    .client-info-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .client-info-section {
        padding: 12px 14px !important;
    }

    .client-info-section .field input,
    .client-info-section .field select,
    .client-info-section .field textarea {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }

    /* Modal action buttons */
    #order-summary-modal .cart-modal-actions {
        flex-direction: column !important;
    }

    #order-summary-modal .cart-modal-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        font-size: 0.8rem !important;
    }

    #order-summary-modal .cart-modal-header h2 {
        font-size: 0.85rem !important;
    }

    #order-summary-modal .cart-modal-footer {
        padding: 10px 14px !important;
    }
}

/* ============================================================
   🔥 CART MODAL - ALSO FIX RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

    /* Shopping Cart Modal Table */
    #cart-modal-table,
    #cart-modal-table thead,
    #cart-modal-table tbody,
    #cart-modal-table tr,
    #cart-modal-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    #cart-modal-table thead {
        display: none !important;
    }

    #cart-modal-table tbody tr {
        display: block !important;
        margin-bottom: 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 10px 12px;
        background: #fafafa;
        width: 100% !important;
    }

    #cart-modal-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 5px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 0.82rem !important;
        width: 100% !important;
        text-align: left !important;
    }

    #cart-modal-table tbody td:last-child {
        border-bottom: none !important;
    }

    #cart-modal-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        flex-shrink: 0;
        margin-right: 10px;
    }

    .cart-modal-totals {
        flex-direction: column !important;
    }

    .cart-modal-totals-col.align-right {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .cart-modal-actions {
        flex-direction: column !important;
    }

    .cart-modal-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    #cart-modal-table tbody td {
        font-size: 0.75rem !important;
        padding: 4px 0 !important;
    }

    #cart-modal-table tbody td::before {
        font-size: 0.6rem !important;
    }

    #cart-modal-table tbody tr {
        padding: 8px 10px !important;
    }

    #cart-modal-table .cm-qty-stepper button {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.8rem !important;
    }
}

/* ---- Order Summary table grand-total row ---- */
.os-grand-total-row td {
    font-weight: 700;
    color: var(--ember);
    border-top: 2px solid var(--border);
    padding-top: 12px;
}

.os-grand-total-row td:first-child {
    text-align: right;
}

/* ---- Bottom bar minimum-order badge ---- */
.min-order-badge {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.25);
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .min-order-badge {
        order: 4;
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   HEADER — RESPONSIVE FIX (logo scaling + mobile nav-bottom row)
   Fixes the oversized/overflowing logo and the cramped
   "All Categories / Order Now / hamburger" row on narrow screens
   (index.html, and any other page using the same header markup).
   ============================================================ */

/* Base: keep the enlarged logo, but let it scale with the viewport
   instead of a fixed px height + fixed transform. */
.logo-img {
    height: clamp(48px, 14vw, 80px);
    width: auto;
    top: 0;
    transform: scale(1.4);
    transform-origin: left center;
}

.logo {
    min-height: 56px;
    display: flex;
    align-items: center;
}

@media (max-width: 900px) {
    .nav-top {
        padding: 12px 16px;
    }

    .logo-img {
        transform: scale(1.3);
    }

    .header-cart {
        padding: 7px 12px;
        font-size: 0.82rem;
        gap: 6px;
    }
}

@media (max-width: 600px) {
    .logo-img {
        height: clamp(46px, 16vw, 64px);
        transform: scale(1.2);
    }

    .nav-top-right {
        gap: 12px;
    }
}

@media (max-width: 400px) {
    .logo-img {
        height: clamp(42px, 18vw, 56px);
        transform: scale(1.1);
    }

    .header-cart span {
        font-size: 0.78rem;
    }
}

/* ---- Top bar: center phone + email on mobile ---- */
@media (max-width: 700px) {
    .top-bar-contacts {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .top-bar-contacts {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
}

/* ---- Mobile nav-bottom: tidy two-row layout ---- */
@media (max-width: 900px) {
    .nav-bottom {
        flex-wrap: wrap;
        row-gap: 10px;
        padding: 12px 16px;
    }

    .all-categories {
        order: 1;
        flex: 1 1 100%;
    }

    .all-categories-btn {
        width: 100%;
        justify-content: center;
        padding: 11px 16px;
        font-size: 0.85rem;
    }

    .all-categories-menu {
        left: 0;
        right: 0;
        width: 100%;
    }

    .nav-actions {
        order: 2;
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .nav-actions .btn {
        flex: 1;
        justify-content: center;
        padding: 11px 16px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .hamburger {
        display: flex;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 50%;
        background: var(--bg-elevated);
    }
}

@media (max-width: 420px) {

    .all-categories-btn,
    .nav-actions .btn {
        font-size: 0.78rem;
        padding: 10px 12px;
    }

    .hamburger {
        width: 38px;
        height: 38px;
    }
}

.btn-download {
    background: #d9822b;
    color: #fff;
    border: 2px solid #d9822b;
    transition: 0.3s ease;
}

.btn-download:hover {
    background: #8e592b;
    border-color: #8e592b;
    color: #fff;
}

.btn-secondary {
    background: transparent;
    color: #d9822b;
    border: 2px solid #d9822b;
    transition: 0.3s ease;
}

.btn-secondary:hover {
    background: #d9822b;
    color: #fff;
}

/* ---------- HERO ---------- */
.hero {
    position: relative;
    padding: 90px 0 60px;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}

.hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    margin: 18px 0;
}

.hero h1 .glow {
    color: var(--yellow);
    text-shadow: 0 0 30px rgba(255, 201, 60, 0.5);
}

.hero p.lede {
    color: var(--text-muted);
    max-width: 480px;
    font-size: 1.02rem;
    margin-bottom: 32px;
}

.hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.hero-cta a {
    margin-top: 35px;
    background-color: var(--yellow);
    color: var(--bg-white)
}

.hero-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.hero-phone strong {
    color: #2d0050;
}

.hero-stage {
    position: relative;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.burst-ring {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 1px solid var(--border);
}

.burst-ring.r2 {
    width: 300px;
    height: 300px;
    border-style: dashed;
    border-color: var(--border-strong);
    animation: spin 40s linear infinite;
}

.burst-ring.r3 {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 90, 31, 0.12), transparent 70%);
    border: none;
}

.cracker-visual {
    position: relative;
    width: 130px;
    height: 340px;
    border-radius: 14px;
    background: linear-gradient(180deg, #142a5e, #060c1f 60%);
    border: 2px solid var(--yellow);
    box-shadow: var(--shadow-glow);
    animation: float 5s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

.cracker-visual .cap {
    width: 100%;
    height: 26px;
    background: linear-gradient(90deg, var(--yellow), var(--yellow-bright));
    border-radius: 8px 8px 0 0;
    position: absolute;
    top: -2px;
    left: 0;
}

.cracker-visual .brand-ring {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 2px solid var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Anton', sans-serif;
    font-size: 0.7rem;
    color: var(--yellow-bright);
    margin-top: 20px;
}

.spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--yellow-bright);
    box-shadow: 0 0 10px 3px var(--ember-soft);
    animation: spark-pop 2.4s ease-in-out infinite;
}

@keyframes spark-pop {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}

/* ---------- TOP BANNER CAROUSEL ---------- */

/* ============================================================
   SECTION: INTRO - IMAGE LEFT / CONTENT RIGHT
   All styles for the intro section moved from inline to CSS
   ============================================================ */

/* ----- IMAGE BOX ----- */
.img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.img-box img {
    width: 100%;
    max-width: 460px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: auto;
    filter: drop-shadow(0 20px 35px rgba(255, 201, 60, 0.25));
    transition: transform 0.4s ease;
    align-items: center;
    text-align: center;
    justify-content: center;
}

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

/* ============================================================
   CONTENT FLEX - REVERSE (Image Right / Content Left)
   ============================================================ */

.content-flex {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
}

/* Reverse Layout - Image on Right, Content on Left */
.content-flex-reverse {
    grid-template-columns: 1.15fr 0.85fr;
}

/* IMAGE BOX - Right Side */
.content-flex-reverse .img-box {
    order: 2;
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-flex-reverse .img-box img {
    width: 100%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 20px 35px rgba(255, 201, 60, 0.25));
    transition: transform 0.4s ease;
}

.content-flex-reverse .img-box img:hover {
    transform: scale(1.05);
}

/* Content - Left Side */
.content-flex-reverse .reveal {
    order: 1;
}

.content-flex-reverse .reveal h2 {
    font-size: 3rem;
    margin: 14px 0 16px;
}

.content-flex-reverse .reveal .lede {
    max-width: 520px;
    font-size: 18px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .content-flex,
    .content-flex-reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .content-flex-reverse .img-box {
        order: -1;
        height: auto;
        min-height: 250px;
        padding: 10px;
    }

    .content-flex-reverse .img-box img {
        max-width: 300px;
    }

    .content-flex-reverse .reveal {
        order: 2;
    }

    .content-flex-reverse .reveal h2 {
        font-size: 1.6rem;
    }

    .icon-features {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .icon-feature {
        margin-bottom: 14px;
    }

    .icon-feature:last-child {
        margin-bottom: 0;
    }

    .icon-feature .ic {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .icon-feature strong {
        font-size: 16px;
    }
}

@media (max-width: 560px) {
    .content-flex-reverse .reveal h2 {
        font-size: 1.4rem;
    }

    .content-flex-reverse .img-box img {
        max-width: 260px;
    }

    .icon-feature .ic {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .icon-feature strong {
        font-size: 14px;
    }

    .icon-feature p {
        font-size: 0.8rem;
    }

    .hero-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-cta .btn {
        justify-content: center;
    }
}

/* ============================================================
   TOP BANNER CAROUSEL - ATTRACTIVE DESIGN
   ============================================================ */

.hero-carousel {
    position: relative;
    height: 580px;
    overflow: hidden;
    border-bottom: 3px solid var(--border-strong);
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

/* Background Gradient Overlay - Lighter for better image visibility */
.carousel-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg,
            rgba(10, 10, 10, 0.75) 0%,
            rgba(10, 10, 10, 0.40) 40%,
            rgba(10, 10, 10, 0.20) 70%,
            rgba(10, 10, 10, 0.50) 100%);
    z-index: 1;
}

/* Gold glow overlay */
.carousel-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(212, 175, 55, 0.08), transparent 60%),
        radial-gradient(ellipse at 70% 50%, rgba(212, 175, 55, 0.05), transparent 50%);
    z-index: 1;
    pointer-events: none;
}

/* Slide Images */
.slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: brightness(0.85) saturate(1.05);
    transition: transform 8s ease;
}

.carousel-slide:hover .slide-img {
    transform: scale(1.05);
}

/* Slide Content - Enhanced */
.slide-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
    padding: 0 24px;
    animation: slideFadeUp 0.8s ease forwards;
}

@keyframes slideFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-content .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--yellow);
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 18px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    margin-bottom: 16px;
}

.slide-content .eyebrow::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--yellow);
    border-radius: 2px;
}

.slide-content h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    margin: 14px 0 18px;
    color: #ffffff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    line-height: 1.1;
}

.slide-content h2 .accent {
    color: var(--yellow);
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
}

.slide-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    max-width: 480px;
    margin: 0 auto 28px;
    line-height: 1.6;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Slide Buttons - Enhanced */
.slide-content .btn {
    padding: 16px 36px;
    font-size: 1rem;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.slide-content .btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 40px rgba(212, 175, 55, 0.5);
}

/* ============================================================
   CAROUSEL ARROWS - Enhanced
   ============================================================ */

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #fff;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.carousel-arrow:hover {
    background: var(--yellow);
    color: #0a1230;
    border-color: var(--yellow);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 30px rgba(212, 175, 55, 0.4);
}

.carousel-arrow.prev {
    left: 24px;
}

.carousel-arrow.next {
    right: 24px;
}

/* ============================================================
   CAROUSEL DOTS - Enhanced
   ============================================================ */

.carousel-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 5;
}

.carousel-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.carousel-dots .dot:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.carousel-dots .dot.active {
    background: var(--yellow);
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    border-color: var(--yellow);
}

/* ============================================================
   SLIDE SPECIFIC BACKGROUND COLORS (Fallback)
   ============================================================ */

.slide-1 {
    background: linear-gradient(135deg, #0b1533, #060c1f);
}

.slide-2 {
    background: linear-gradient(135deg, #1a1208, #060c1f);
}

.slide-3 {
    background: linear-gradient(135deg, #121008, #060c1f);
}

.slide-4 {
    background: linear-gradient(135deg, #0e1208, #060c1f);
}

.slide-5 {
    background: linear-gradient(135deg, #180e08, #060c1f);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .hero-carousel {
        height: 500px;
    }

    .carousel-arrow {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
    }

    .carousel-arrow.prev {
        left: 16px;
    }

    .carousel-arrow.next {
        right: 16px;
    }

    .slide-content h2 {
        font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    }

    .slide-content p {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .hero-carousel {
        height: 420px;
    }

    .carousel-arrow {
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
    }

    .carousel-arrow.prev {
        left: 10px;
    }

    .carousel-arrow.next {
        right: 10px;
    }

    .slide-content .eyebrow {
        font-size: 0.65rem;
        padding: 4px 14px;
        letter-spacing: 2px;
    }

    .slide-content h2 {
        font-size: clamp(1.4rem, 3vw, 2rem);
        margin: 10px 0 14px;
    }

    .slide-content p {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }

    .slide-content .btn {
        padding: 12px 28px;
        font-size: 0.85rem;
    }

    .carousel-dots {
        bottom: 16px;
        gap: 8px;
    }

    .carousel-dots .dot {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .hero-carousel {
        height: 350px;
    }

    .carousel-arrow {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .carousel-arrow.prev {
        left: 6px;
    }

    .carousel-arrow.next {
        right: 6px;
    }

    .slide-content {
        padding: 0 16px;
    }

    .slide-content .eyebrow {
        font-size: 0.55rem;
        padding: 3px 10px;
        letter-spacing: 1.5px;
        gap: 6px;
    }

    .slide-content .eyebrow::before {
        width: 14px;
    }

    .slide-content h2 {
        font-size: clamp(1.1rem, 2.5vw, 1.5rem);
        margin: 8px 0 10px;
    }

    .slide-content p {
        font-size: 0.75rem;
        margin-bottom: 14px;
    }

    .slide-content .btn {
        padding: 10px 20px;
        font-size: 0.75rem;
    }

    .carousel-dots {
        bottom: 10px;
        gap: 6px;
    }

    .carousel-dots .dot {
        width: 8px;
        height: 8px;
    }
}

/* ---------- CONTENT FLEX (image left / copy right) ---------- */
.content-flex {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
}

.content-flex .img-box {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-features {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
}

.icon-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.icon-feature .ic {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    background: var(--card-hover);
    /* Orange BG */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--night-2);
    /* Blue Icon */
    font-size: 1.1rem;
}

.icon-feature .ic i {
    color: var(--night-2);
    font-size: 1.1rem;
}

.icon-feature strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
}

.icon-feature p {
    color: var(--text-muted);
    font-size: 0.94rem;
}

.btn {
    background-color: var(--navy);
    color: var(--bg-white);

}

.btn:hover {
    background-color: var(--card-hover);

}

@media (max-width: 900px) {
    .hero-carousel {
        height: 460px;
    }

    .content-flex {
        grid-template-columns: 1fr;
    }

    .content-flex .img-box {
        height: 280px;
        order: -1;
    }

    .icon-features {
        grid-template-columns: 1fr;
    }
}

/* ---------- SECTION HEADERS ---------- */
.section {
    padding: 84px 0;
}

.section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.section-head h2 {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    margin: 14px 0;
}

.section-head p {
    color: var(--text-muted);
}

/* ==========================================================
   HARI CRACKERS 2026 PREMIUM PRODUCTS (Purple Majority)
========================================================== */

.premium-products {
    position: relative;
    padding: 90px 0;
    background:
        linear-gradient(rgba(26, 0, 51, .92), rgba(45, 0, 80, .96)), /* Purple overlay */
        url("pictures/homepage2.jpg") center/cover fixed;
    overflow: hidden;
}

/* Purple Glow Overlay */
.premium-products::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(106, 27, 154, .22), transparent 35%), /* Purple glow */
        radial-gradient(circle at 80% 80%, rgba(255, 193, 7, .12), transparent 35%); /* Yellow accent */
}

.premium-products .section-head {
    text-align: center;
    margin-bottom: 55px;
    position: relative;
    z-index: 2;
}

.premium-products .section-head .eyebrow {
    color: #ffc107; /* Yellow accent */
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.premium-products .section-head h2 {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 10px 0;
}

.premium-products .section-head p {
    color: #d9d9d9;
}

.premium-products .accent {
    color: #ffc107; /* Yellow accent */
}

/* GRID */

.premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
    position: relative;
    z-index: 2;
}

/* CARD - Purple tint */

.premium-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(106, 27, 154, .18); /* Purple tint */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 193, 7, .18); /* Yellow tint border */
    transition: .35s ease;
    box-shadow: 0 18px 40px rgba(26, 0, 51, .35); /* Purple shadow */
}

.premium-card:hover {
    transform: translateY(-10px);
    border-color: #ffc107; /* Yellow border */
    box-shadow: 0 25px 50px rgba(106, 27, 154, .45); /* Purple shadow */
}

/* IMAGE */

.premium-img {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.premium-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: .45s ease;
}

.premium-card:hover img {
    transform: scale(1.08);
}

/* OFFER RIBBON - Yellow */

.offer-ribbon {
    position: absolute;
    top: 16px;
    left: -36px;
    z-index: 5;
    background: linear-gradient(135deg, #ffc107, #e6a800); /* Yellow gradient */
    color: #2d0050; /* Dark Purple text */
    font-size: .72rem;
    font-weight: 800;
    padding: 7px 40px;
    transform: rotate(-45deg);
    box-shadow: 0 6px 15px rgba(0, 0, 0, .3);
}

/* CONTENT */

.premium-content {
    padding: 20px;
    text-align: center;
}

.premium-content h3 {
    color: #ffffff;
    font-size: 1.05rem;
    margin-bottom: 14px;
}

/* PRICE - Dark Purple with Yellow text */

.premium-price {
    display: inline-block;
    background: #2d0050; /* Dark Purple */
    color: #ffc107; /* Yellow accent */
    font-size: 1.2rem;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: 999px;
    margin-bottom: 18px;
    box-shadow: 0 6px 16px rgba(26, 0, 51, .35); /* Purple shadow */
}

/* ==========================================================
   ADD TO CART BUTTON - YELLOW with DARK PURPLE TEXT
   (FIXED: text now clearly visible)
========================================================== */

.premium-cart {
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 999px;
    background: #ffc107;              /* Yellow */
    color: #2d0050;                   /* Dark Purple text */
    font-size: .95rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: .3s;
    letter-spacing: 0.3px;
}

/* Make sure inner span / text inside button also gets the Dark Purple color */
.premium-cart span,
.premium-cart .add-to-cart-btn {
    color: #2d0050;                   /* Dark Purple text */
    background: transparent;
}

/* Icon (cart icon) - Dark Purple */
.premium-cart i {
    color: #2d0050;
}

/* Hover - Darker Yellow, still Dark Purple text */
.premium-cart:hover {
    transform: translateY(-3px);
    background: #e6a800;              /* Darker Yellow */
    color: #2d0050;
    box-shadow: 0 12px 28px rgba(255, 193, 7, .45);
}

.premium-cart:hover i {
    color: #2d0050;
}

/* ADDED STATE - Dark Purple background, Yellow text */
.premium-cart.added {
    background: #2d0050 !important;   /* Dark Purple */
    color: #ffc107 !important;        /* Yellow text */
}

.premium-cart.added i {
    color: #ffc107 !important;
}

/* RESPONSIVE */

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

@media(max-width:768px) {
    .premium-products {
        padding: 70px 0;
    }

    .premium-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .premium-img {
        height: 180px;
    }

    .premium-content {
        padding: 16px;
    }

    .premium-price {
        font-size: 1rem;
    }
}

@media(max-width:480px) {
    .premium-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .premium-img {
        height: 150px;
    }

    .premium-content h3 {
        font-size: .9rem;
    }

    .premium-price {
        padding: 8px 12px;
        font-size: .9rem;
    }

    .premium-cart {
        padding: 11px;
        font-size: .82rem;
    }

    .offer-ribbon {
        font-size: .58rem;
        padding: 5px 30px;
        left: -28px;
    }
}
/* ============================================================
   PRODUCT TABLE - WHITE THEME
   ============================================================ */

.catalog-info {
    background: #fffdf8;
    padding: 40px 0 30px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.08);
    position: relative;
    overflow: hidden;
}

/* Subtle background pattern */
.catalog-info::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.03), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.catalog-info-content {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.catalog-info-content h2 {
    font-family: 'Anton', sans-serif;
    font-size: 2.2rem;
    color: #0b1533;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    position: relative;
    display: inline-block;
}

.catalog-info-content h2::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ffc94d, #d9822b);
    border-radius: 2px;
}

.catalog-info-content .catalog-tagline {
    font-size: 1.15rem;
    font-weight: 600;
    color: #2f241b;
    margin: 16px 0 4px;
}

.catalog-info-content .catalog-tagline i {
    color: #ffc94d;
    margin-right: 6px;
}

.catalog-info-content .catalog-desc {
    font-size: 0.95rem;
    color: #7b6a58;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .catalog-info {
        padding: 25px 0 20px;
    }

    .catalog-info-content h2 {
        font-size: 1.6rem;
    }

    .catalog-info-content .catalog-tagline {
        font-size: 0.95rem;
    }

    .catalog-info-content .catalog-desc {
        font-size: 0.85rem;
        padding: 0 10px;
    }

    .state-badge {
        font-size: 0.78rem;
        padding: 6px 16px;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .catalog-info-content h2 {
        font-size: 1.3rem;
    }

    .catalog-info-content .catalog-tagline {
        font-size: 0.85rem;
    }

    .catalog-info-content .catalog-desc {
        font-size: 0.78rem;
    }

    .state-badge {
        font-size: 0.72rem;
        padding: 5px 12px;
    }
}

.catalog-toolbar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* ============================================================
   SEARCH BOX - FIX ICON
   ============================================================ */

.search-box {
    flex: 1;
    min-width: 220px;
    position: relative;
}

/* Search Icon - Position inside input */
.search-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #a08d78;
    font-size: 0.95rem;
    z-index: 2;
    pointer-events: none;
}

.search-box input {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 13px 16px 13px 44px;
    /* ← Added left padding for icon */
    color: var(--text);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

.search-box input:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08);
}

.search-box input::placeholder {
    color: #a08d78;
}

/* ==========================
   CATEGORY FILTER
========================== */

.category-box {
    display: flex;
    align-items: center;
    gap: 14px;
}

.category-box label {
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.category-box select {
    min-width: 180px;
    height: 46px;
    padding: 0 42px 0 18px;

    background: var(--bg-white);
    color: var(--text);

    border: 1px solid var(--border);
    border-radius: 999px;

    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;

    transition: .3s ease;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Custom Arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b87333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

.category-box select:hover {
    border-color: var(--ember);
    box-shadow: 0 4px 14px rgba(184, 115, 51, .15);
}

.category-box select:focus {
    border-color: var(--ember);
    box-shadow: 0 0 0 4px rgba(184, 115, 51, .12);
}

.category-box option {
    background: #fff;
    color: var(--text);
}

@media (max-width:768px) {

    .category-box {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .category-box label {
        margin-bottom: 4px;
    }

    .category-box select {
        width: 100%;
    }

}

.min-order-note {
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    text-align: center;
}

/* ============================================================
   HARI CRACKERS - PRODUCT PAGE STYLES (CLEAN VERSION)
   ============================================================ */

/* ---------- CATEGORY SECTIONS ---------- */
.cat-section {
    margin-bottom: 40px;
}

.cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #0b1a45, #ff7a1a);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.cat-header h3 {
    font-family: 'Anton', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    color: #fff;
    margin: 0;
}

.cat-header h3 i {
    color: var(--yellow);
    margin-right: 8px;
}

.cat-header .offer-tag {
    background: rgba(255, 178, 56, 0.2);
    padding: 4px 16px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--yellow);
    border: 1px solid rgba(255, 178, 56, 0.2);
}

/* ---------- TABLE WRAPPER ---------- */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: #ffffff;
}

/* ---------- PRODUCT TABLE ---------- */
.product-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: #ffffff;
    min-width: 700px;
}

/* Table Header */
.product-table thead {
    background: #f8f4ef;
    border-bottom: 2px solid var(--border);
}

.product-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Table Body */
.product-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.2s ease;
}

.product-table tbody tr:hover {
    background: #faf7f2;
}

.product-table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    color: var(--text);
}

/* ---------- S.NO COLUMN ---------- */
.product-table tbody td:first-child {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* ---------- IMAGE COLUMN ---------- */
.product-image {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: block;
    background: #fff;
}

/* ---------- PRODUCT NAME COLUMN ---------- */
.product-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.88rem;
    display: block;
}

.product-table .sub {
    color: var(--text-dim);
    font-size: 0.75rem;
    display: block;
    margin-top: 2px;
}

/* ---------- PRICE COLUMN ---------- */
.product-table del {
    color: var(--text-dim);
    font-size: 0.75rem;
    margin-right: 6px;
    text-decoration: line-through;
}

.product-table .price-tag {
    color: #ff6a00;
    font-weight: 700;
    font-size: 0.95rem;
}

/* ---------- QUANTITY STEPPER ---------- */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: #ffffff;
}

.qty-btn {
    width: 30px;
    height: 30px;
    background: #f8f4ef;
    color: #333;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
    border: none;
    cursor: pointer;
}

.qty-btn:hover {
    background: rgba(212, 175, 55, 0.15);
}

.qty-btn.minus:hover {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.qty-btn.plus:hover {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.qty-input {
    width: 40px;
    text-align: center;
    border: none;
    background: #ffffff;
    color: var(--text);
    font-size: 0.9rem;
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-input:focus {
    outline: none;
}

/* ---------- AMOUNT COLUMN ---------- */
.row-amount {
    font-weight: 700;
    color: #ff6a00;
    font-size: 0.95rem;
}

/* ---------- NO RESULTS ---------- */
.no-results-msg {
    text-align: center;
    padding: 30px 0;
    color: var(--text-muted);
}

.no-results-msg i {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    color: var(--border-strong);
}

/* ---------- LOADING SPINNER ---------- */
.loading-spinner {
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted);
}

.loading-spinner i {
    font-size: 2rem;
    color: var(--yellow);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   MOBILE RESPONSIVE - STACK VIEW
   ============================================================ */
@media (max-width: 768px) {

    /* Hide table header */
    .product-table thead {
        display: none;
    }

    /* Each row becomes a card */
    .product-table,
    .product-table tbody,
    .product-table tr,
    .product-table td {
        display: block;
        width: 100%;
    }

    .product-table {
        min-width: 100%;
    }

    .product-table tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 14px 16px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .product-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.85rem;
        width: 100%;
    }

    .product-table tbody td:last-child {
        border-bottom: none;
    }

    /* Add labels before each field */
    .product-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        flex-shrink: 0;
        margin-right: 12px;
    }

    /* Image in mobile */
    .product-table tbody td .product-image {
        width: 50px;
        height: 50px;
    }

    /* Qty stepper mobile */
    .product-table tbody td .qty-stepper .qty-btn {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    .product-table tbody td .qty-stepper .qty-input {
        width: 36px;
        font-size: 0.8rem;
    }

    /* Cat header mobile */
    .cat-header {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 6px;
    }

    .cat-header h3 {
        font-size: 0.95rem;
    }

    .cat-header .offer-tag {
        font-size: 0.6rem;
        padding: 3px 10px;
    }
}

@media (max-width: 480px) {
    .product-table tbody td {
        font-size: 0.78rem;
        padding: 6px 0;
    }

    .product-table tbody td::before {
        font-size: 0.6rem;
    }

    .product-table tbody td .product-image {
        width: 40px;
        height: 40px;
    }

    .product-table tbody td .qty-stepper .qty-btn {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }

    .product-table tbody td .qty-stepper .qty-input {
        width: 30px;
        font-size: 0.7rem;
    }

    .product-table tbody tr {
        padding: 10px 12px;
        margin-bottom: 12px;
    }

    .cat-header {
        padding: 10px 12px;
    }

    .cat-header h3 {
        font-size: 0.85rem;
    }
}

/* ============================================================
   CART SUMMARY BAR - FIXED
   ============================================================ */

.cart-summary-bar {
    position: sticky;
    bottom: 0;
    z-index: 90;
    background: #ffffff;
    border-top: 2px solid var(--border-strong);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}

.cart-summary-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 20px;
    flex-wrap: wrap;
    max-width: var(--max-w);
    margin: 0 auto;
}

.cart-stat {
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.cart-stat strong {
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 700;
}

.min-order-badge {
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
}

/* Submit Button Container */
.submit-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: auto;
}

.btn-submit-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
}

.btn-submit-enabled {
    opacity: 1;
    cursor: pointer !important;
    pointer-events: auto;
}

.btn-submit-enabled:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 178, 56, 0.3);
}

.min-order-warning {
    display: none;
    align-items: center;
    gap: 6px;
    color: #e67e22;
    background: rgba(230, 126, 34, 0.08);
    border: 1px solid rgba(230, 126, 34, 0.2);
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    font-size: 0.7rem;
}

.min-order-warning.show {
    display: flex;
}

/* ============================================================
   RESPONSIVE - CART SUMMARY
   ============================================================ */
@media (max-width: 768px) {
    .cart-summary-inner {
        gap: 12px;
        padding: 10px 14px;
        justify-content: center;
    }

    .cart-stat strong {
        font-size: 0.95rem;
    }

    .submit-container {
        width: 100%;
        align-items: stretch;
        margin-left: 0;
    }

    .submit-container .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .cart-summary-inner {
        gap: 8px;
        padding: 8px 10px;
    }

    .cart-stat strong {
        font-size: 0.85rem;
    }

    .cart-stat span {
        font-size: 0.6rem;
    }

    .submit-container .btn {
        font-size: 0.8rem;
        padding: 8px 16px;
    }
}

/* ============================================================
   HIDE SOCIAL FLOATING ICONS ON MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .social-float {
        display: none !important;
    }
}

/* ======================================================
   SAFE DIWALI - FULL WIDTH (Purple Majority)
====================================================== */

.diwali-safety{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#f5e6ff,#ffffff); /* Light Purple to White */
    padding:80px 0 100px;
    width:100%;
}

/* Override default container width */
.diwali-safety .container{
    width:100%;
    max-width:100%;
    padding:0 50px;
    margin:0 auto;
    box-sizing:border-box;
}

/* LEFT HANGING CRACKER */
.hanging-cracker-left {
    position: absolute;
    top: -10px;
    left: 20px;
    z-index: 20;
    transform-origin: top center;
    animation: crackerSwing 4s ease-in-out infinite;
}

.hanging-cracker-left img {
    width: 160px;
    height: 400px;
    filter: drop-shadow(0 14px 28px rgba(106,27,154,.35)); /* Purple shadow */
}

@keyframes crackerSwing {
    0% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(-5deg);
    }
}

/* Fireworks - Purple */
.firework {
    position: absolute;
    font-size: 70px;
    opacity: .22;
    animation: pulse 3s infinite;
}

.fw1 {
    top: 90px;
    left: 120px;
    color: #6a1b9a; /* Purple */
}

.fw2 {
    top: 110px;
    right: 80px;
    color: #ffc107; /* Yellow accent */
}

@keyframes pulse {
    50% {
        transform: scale(1.15);
    }
}

/* Hanging Diyas - Purple */
.diya {
    position: absolute;
    top: 0;
    color: var(--card); /* Purple */
    font-size: 40px;
}

.diya::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 70px;
    background: var(--card); /* Purple */
    left: 50%;
    transform: translateX(-50%);
    top: -70px;
}

.diya1 {
    right: 80px;
}

.diya2 {
    right: 150px;
    top: 30px;
}

.diya3 {
    right: 20px;
    top: 55px;
}

/* Header */
.safety-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 55px;
}

.safety-logo img {
    width: 120px;
}

.safety-title {
    text-align: center;
}

/* Ribbon - Purple */
.ribbon {
    display: inline-block;
    background: #6a1b9a; /* Purple */
    color: #ffffff;
    padding: 10px 30px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    transform: skew(-10deg);
}

/* Heading - Dark Purple */
.safety-title h2 {
    font-size: 4rem;
    color: #2d0050; /* Dark Purple */
    margin: 12px 0;
    font-family: "Pacifico", cursive;
}

.safety-title p {
    color: #6a1b9a; /* Purple */
    font-weight: 600;
}

/* Grid */
.safety-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* Boxes */
.safety-box {
    background: #ffffff;
    border-radius: 30px;
    padding: 45px 28px 28px;
    position: relative;
    box-shadow: 0 18px 35px rgba(106,27,154,.10); /* Purple shadow */
}

.do-box {
    border: 5px solid #10a34a; /* Keep Green - Do */
}

.dont-box {
    border: 5px solid #ff5a1f; /* Keep Orange-Red - Don't */
}

/* Titles - Dark Purple */
.box-title {
    position: absolute;
    left: 25px;
    top: -28px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #2d0050; /* Dark Purple */
    color: #ffffff;
    padding: 12px 26px;
    border-radius: 999px;
    font-size: 1.7rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(45,0,80,.25); /* Purple shadow */
}

.circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.do-title .circle {
    background: #42d72d; /* Keep Green - Do */
}

.dont-title .circle {
    background: #ff3d3d; /* Keep Red - Don't */
}

/* Tips */
.tip {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(106,27,154,.12); /* Purple border */
}

.tip:last-child {
    border: none;
}

.icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

/* Do - Green */
.green {
    background: #d8f6d8;
    color: #0d8d38;
}

/* Don't - Red */
.red {
    background: #ffe4d8;
    color: #ff4d1c;
}

/* Tip Text - Dark Purple */
.tip p {
    margin: 0;
    color: #2d0050; /* Dark Purple */
    font-size: 1.03rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Responsive */
@media(max-width:768px) {

    .hanging-cracker-left {
        left: 5px;
        top: 0;
    }

    .hanging-cracker-left img {
        width: 90px;
    }

    .firework {
        font-size: 45px;
    }

    .diya {
        display: none;
    }

    .safety-title h2 {
        font-size: 2.6rem;
    }

    .safety-grid {
        grid-template-columns: 1fr;
    }

    .box-title {
        font-size: 1.4rem;
    }

    .icon {
        width: 58px;
        height: 58px;
        font-size: 1.5rem;
    }

    .tip p {
        font-size: .92rem;
    }

    .safety-logo img {
        width: 90px;
    }
}

@media(max-width:480px) {

    .hanging-cracker-left img {
        width: 70px;
    }

    .safety-title h2 {
        font-size: 2rem;
    }

    .ribbon {
        padding: 8px 18px;
        font-size: .8rem;
    }

    .box-title {
        left: 18px;
        top: -22px;
        font-size: 1.2rem;
        padding: 10px 18px;
    }

    .circle {
        width: 42px;
        height: 42px;
    }

    .tip {
        gap: 12px;
    }

    .icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
}

/* ---------- PRODUCT TILE (with fake image block) ---------- */
.product-tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}

.product-tile:hover {
    transform: translateY(-6px);
    border-color: var(--border-strong);
}

.product-media {
    height: 180px;
    background: linear-gradient(160deg, #0f1a3d, #060c1f);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid var(--border);
}

.product-media .mini-cracker {
    width: 46px;
    height: 120px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--yellow) 0%, #142a5e 22%, #060c1f 100%);
    border: 1px solid var(--yellow);
}

.badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--ember);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}

.product-body {
    padding: 20px;
}

.product-body h3 {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 6px;
    text-transform: none;
    letter-spacing: 0;
}

.product-body .sub {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin-bottom: 14px;
}

.product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-tag {
    color: var(--yellow);
    font-weight: 700;
}

.price-tag del {
    color: var(--text-dim);
    font-weight: 400;
    font-size: 0.8rem;
    margin-right: 6px;
}

.add-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--yellow);
    color: #0a1230;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.add-btn:hover {
    transform: scale(1.1) rotate(90deg);
}
/* ==========================================
   FESTIVAL STATS SECTION (Purple Majority)
========================================== */

.festival-stats {
    position: relative;
    padding: 90px 0;
    overflow: hidden;

    background:
        linear-gradient(rgba(26, 0, 51, .85), rgba(45, 0, 80, .90)), /* Purple overlay */
        url("./pictures/homepage.jfif");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Purple Glow Overlay */
.festival-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top, rgba(106, 27, 154, .18), transparent 60%); /* Purple glow */
    pointer-events: none;
}

.festival-header {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 55px;
}

/* Tag - Purple tint */
.festival-tag {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(106, 27, 154, .18); /* Purple tint */
    border: 1px solid rgba(255, 193, 7, .35); /* Yellow border */
    color: #ffc107; /* Yellow accent */
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.festival-header h2 {
    margin: 18px 0 12px;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #fff;
}

.festival-header h2 span {
    color: #ffc107; /* Yellow accent */
}

.festival-header p {
    color: rgba(255, 255, 255, .82);
}

.festival-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

/* Card - Purple tint */
.festival-card {
    text-align: center;
    padding: 35px 20px;
    border-radius: 22px;
    background: rgba(106, 27, 154, .15); /* Purple tint */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 193, 7, .15); /* Yellow tint border */
    transition: .35s ease;
    box-shadow: 0 14px 35px rgba(26, 0, 51, .35); /* Purple shadow */
}

/* Card Hover - Purple glow */
.festival-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 193, 7, .55); /* Yellow border */
    box-shadow: 0 18px 45px rgba(106, 27, 154, .45); /* Purple shadow */
    background: rgba(106, 27, 154, .25); /* Darker Purple tint */
}

/* Icon - Yellow with Purple icon */
.festival-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffc107, #e6a800); /* Yellow gradient */
    color: #2d0050; /* Dark Purple icon */
    font-size: 1.7rem;
    box-shadow: 0 10px 24px rgba(255, 193, 7, .4); /* Yellow glow */
}

.festival-card h3 {
    margin: 0;
    color: #ffffff;
    font-size: 2.2rem;
    font-family: 'Anton', sans-serif;
}

.festival-card p {
    margin-top: 10px;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
}

/* Tablet */
@media(max-width:992px) {
    .festival-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media(max-width:576px) {
    .festival-stats {
        padding: 60px 0;
        background-attachment: scroll;
    }

    .festival-grid {
        grid-template-columns: 1fr;
    }

    .festival-card {
        padding: 28px 18px;
    }

    .festival-icon {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    .festival-card h3 {
        font-size: 2rem;
    }
}
/* ==========================================================
   SPARK ZONE - PREMIUM WHITE THEME (Yellow + Purple)
========================================================== */

.spark-zone {
    background: #ffffff;
    padding: 90px 0;
}

.spark-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}

.spark-pill {
    display: inline-block;
    background: #fdf8e8; /* Light Yellow */
    color: #6a1b9a; /* Dark Purple */
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 999px;
    margin-bottom: 18px;
    font-size: .85rem;
}

.spark-head h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: #2d0050; /* Dark Purple */
    margin-bottom: 14px;
    line-height: 1.2;
}

.spark-head h2 span {
    color: #6a1b9a; /* Purple */
}

.spark-head p {
    color: #666;
    line-height: 1.8;
}

.spark-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 35px;
    align-items: stretch;
}

/* LEFT CARD - Yellow Gradient */
.flame-box {
    background: linear-gradient(135deg, #ffc107, #e6a800);
    border-radius: 28px;
    padding: 36px;
    color: #2d0050; /* Dark Purple text */
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(255, 193, 7, .22);
}

.flame-box::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
    top: -70px;
    right: -70px;
}

.flame-tag {
    display: inline-block;
    background: #2d0050; /* Dark Purple */
    color: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: .72rem;
    font-weight: 700;
}

.flame-box h3 {
    font-size: 2.3rem;
    margin: 22px 0 16px;
    color: #2d0050;
}

.flame-box h3 span {
    color: #6a1b9a; /* Purple */
}

.flame-box p {
    color: rgba(45, 0, 80, .92); /* Dark Purple text */
    line-height: 1.8;
}

.flame-list {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.flame-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-weight: 500;
    color: #2d0050;
}

.flame-list i {
    color: #6a1b9a; /* Purple */
}

/* BUTTON - Purple */
.ignite-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: #2d0050; /* Dark Purple */
    color: #ffffff; /* White text */
    padding: 15px 28px;
    border-radius: 999px;
    font-weight: 700;
    transition: .3s;
}

.ignite-btn:hover {
    background: #6a1b9a; /* Light Purple */
    color: #fff;
    transform: translateY(-3px);
}

/* RIGHT GRID */
.glow-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.glow-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 24px;
    padding: 30px 24px;
    transition: .35s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
}

.glow-card:hover {
    transform: translateY(-8px);
    border-color: #6a1b9a; /* Purple border */
    box-shadow: 0 18px 40px rgba(106, 27, 154, .15); /* Purple shadow */
}

.glow-icon {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffc107, #e6a800); /* Yellow */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d0050; /* Dark Purple icon */
    font-size: 1.6rem;
    margin-bottom: 20px;
}

.glow-card h4 {
    color: #2d0050; /* Dark Purple */
    font-size: 1.18rem;
    margin-bottom: 12px;
}

.glow-card p {
    color: #666;
    line-height: 1.7;
}

/* TABLET */
@media(max-width:992px) {
    .spark-layout {
        grid-template-columns: 1fr;
    }

    .flame-box {
        text-align: center;
    }

    .flame-list li {
        justify-content: center;
    }
}

/* MOBILE */
@media(max-width:768px) {
    .spark-zone {
        padding: 60px 0;
    }

    .glow-grid {
        grid-template-columns: 1fr;
    }

    .flame-box {
        padding: 28px;
    }

    .flame-box h3 {
        font-size: 2rem;
    }

    .ignite-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ---------- FORMS (contact) ---------- */
.form-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px;
}

.field {
    margin-bottom: 20px;
}

.field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--yellow);
}

.field textarea {
    resize: vertical;
    min-height: 120px;
}

/* ============================================================
   FAQ PAGE - WHITE THEME
   ============================================================ */

/* Page Banner */
.page-banner {
    padding: 60px 0 50px;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    min-height: 450px;
    background: var(--bg-white) url('./images/faq.png') no-repeat center center / cover;
}

.banner-content {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 20px 0;
}

.banner-content .eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--yellow-bright);
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.banner-content h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    margin-bottom: 12px;
    color: var(--yellow);
}

.banner-content p {
    color: var(--bg-elevated);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto 24px;
}

.banner-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.banner-stats span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--bg);
    font-size: 0.9rem;
}

.banner-stats span i {
    color: var(--yellow);
    font-size: 1rem;
}

/* FAQ Section */
.faq-section {
    background: var(--bg-white);
}

/* ==========================================================
   PREMIUM FAQ - HARI CRACKERS THEME (Purple Majority)
========================================================== */

.premium-faq{
    position:relative;
    background:linear-gradient(180deg,#f5e6ff,#ffffff); /* Light Purple to White */
    padding:80px 0;
    overflow:hidden;
}

/* Fireworks */
.faq-firework{
    position:absolute;
    font-size:80px;
    opacity:.15;
    color:#6a1b9a; /* Purple */
}

.fw-left{
    top:60px;
    left:40px;
    transform:rotate(-15deg);
}

.fw-right{
    top:90px;
    right:50px;
    color:#ffc107; /* Yellow accent */
}

/* Header */
.premium-faq-header{
    text-align:center;
    margin-bottom:40px;
}

/* Ribbon - Purple Gradient */
.faq-ribbon{
    display:inline-flex;
    gap:10px;
    align-items:center;
    background:linear-gradient(90deg,#2d0050,#4a148c); /* Purple gradient */
    color:#ffffff;
    padding:10px 22px;
    border-radius:999px;
    font-weight:700;
    margin-bottom:18px;
}

/* Main Heading - Dark Purple */
.premium-faq-header h2{
    font-size:3rem;
    color:#2d0050; /* Dark Purple */
    font-family:'Anton',sans-serif;
    line-height:1.1;
    letter-spacing:1px;
}

/* Accent word - Yellow */
.premium-faq-header h2 span{
    color:#ffc107; /* Yellow accent */
}

.premium-faq-header p{
    max-width:650px;
    margin:16px auto 0;
    color:#555;
}

/* Search */
.faq-search{
    position:relative;
    max-width:700px;
    margin:0 auto 30px;
}

.faq-search input{
    width:100%;
    height:62px;
    border-radius:999px;
    border:2px solid rgba(106, 27, 154, 0.2); /* Purple border */
    padding-left:60px;
    font-size:1rem;
    background:#fff;
    box-shadow:0 10px 30px rgba(106, 27, 154, .08); /* Purple shadow */
}

.faq-search input:focus{
    outline:none;
    border-color:#6a1b9a; /* Purple focus */
    box-shadow:0 12px 35px rgba(106, 27, 154, .18); /* Purple glow */
}

.faq-search i{
    position:absolute;
    left:24px;
    top:50%;
    transform:translateY(-50%);
    color:#6a1b9a; /* Purple icon */
}

/* Category Buttons */
.faq-categories{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:35px;
}

.faq-cat{
    border:none;
    background:#fff;
    padding:12px 22px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-weight:600;
    color:#2d0050; /* Dark Purple */
    border:2px solid rgba(106, 27, 154, 0.15); /* Purple border */
    transition:.3s;
}

.faq-cat:hover{
    transform:translateY(-3px);
    border-color:#6a1b9a; /* Purple hover */
    background:rgba(106, 27, 154, 0.05);
}

/* Active Category - Purple Gradient */
.faq-cat.active{
    background:linear-gradient(90deg,#6a1b9a,#4a148c); /* Purple gradient */
    color:#ffffff;
    border-color:transparent;
}

/* Accordion */
.accordion-item{
    background:#fff;
    border-radius:22px;
    margin-bottom:18px;
    overflow:hidden;
    border:1px solid rgba(106, 27, 154, 0.15); /* Purple border */
    box-shadow:0 10px 30px rgba(106, 27, 154, .06); /* Purple shadow */
    transition:.35s;
}

.accordion-item:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 40px rgba(106, 27, 154, .12);
}

/* Open State - Purple border */
.accordion-item.open{
    border-color:#6a1b9a; /* Purple */
}

.accordion-q{
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px;
    cursor:pointer;
}

/* FAQ Badge - Purple Gradient */
.faq-badge{
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(135deg,#6a1b9a,#4a148c); /* Purple gradient */
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;
    box-shadow:0 6px 16px rgba(106, 27, 154, 0.3);
}

/* FAQ Heading - Dark Purple */
.faq-heading{
    flex:1;
    font-weight:700;
    color:#2d0050; /* Dark Purple */
    font-size:1.05rem;
}

/* Plus Button - Light Purple */
.plus{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#f5e6ff; /* Light Purple */
    color:#6a1b9a; /* Purple icon */
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
}

/* Open State - Plus Button Purple */
.accordion-item.open .plus{
    background:#6a1b9a; /* Purple */
    color:#ffffff;
    transform:rotate(45deg);
}

/* Answer */
.accordion-a{
    max-height:0;
    overflow:hidden;
    padding:0 22px;
    transition:max-height .45s ease,padding .35s ease;
}

.accordion-item.open .accordion-a{
    max-height:250px;
    padding:0 22px 22px;
}

.accordion-a p{
    color:#555;
    line-height:1.8;
}

/* Support Card - Purple Gradient */
.faq-support{
    margin-top:55px;
    background:linear-gradient(135deg,#2d0050,#4a148c); /* Purple gradient */
    border-radius:28px;
    color:#ffffff;
    padding:35px;
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    box-shadow:0 20px 45px rgba(45, 0, 80, 0.25);
}

/* Support Icon - Yellow accent */
.support-icon{
    width:74px;
    height:74px;
    border-radius:50%;
    background:#ffc107; /* Yellow */
    color:#2d0050; /* Dark Purple icon */
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.8rem;
    box-shadow:0 8px 20px rgba(255, 193, 7, 0.3);
}

.faq-support h3{
    margin-bottom:8px;
    font-family:'Anton',sans-serif;
    letter-spacing:.5px;
    color:#ffffff;
}

.faq-support p{
    color:rgba(255, 255, 255, 0.85);
}

.faq-support .btn{
    margin-left:auto;
    background:#ffc107 !important; /* Yellow */
    color:#2d0050 !important; /* Dark Purple text */
    border:none !important;
}

.faq-support .btn:hover{
    background:#e6a800 !important;
    transform:translateY(-2px);
}

/* Mobile */
@media(max-width:768px){

.premium-faq-header h2{
    font-size:2.2rem;
}

.faq-support{
    text-align:center;
}

.faq-support .btn{
    width:100%;
    margin-left:0;
}

.accordion-q{
    padding:18px;
}

.faq-badge{
    width:44px;
    height:44px;
}

.faq-heading{
    font-size:.9rem;
}

.faq-firework{
    display:none;
}

}
/* ---------- GALLERY ---------- */
.gallery-grid {
    columns: 4 220px;
    column-gap: 16px;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
    background: linear-gradient(160deg, #0f1a3d, #060c1f);
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease;
}

.gallery-item:hover {
    transform: scale(1.03);
    border-color: var(--border-strong);
}
/* ===========================================
   MOVING TESTIMONIALS (Purple Majority Theme)
=========================================== */

.moving-reviews {
    background: #ffffff;
    padding: 90px 0;
    overflow: hidden;
}

.review-heading {
    text-align: center;
    margin-bottom: 50px;
}

/* Small label above heading - Purple */
.review-heading span {
    color: #6a1b9a; /* Purple */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Main heading - Dark Purple */
.review-heading h2 {
    color: #2d0050; /* Dark Purple */
    font-size: 2.7rem;
    margin: 15px 0;
}

/* Accent word - Yellow (only accent) */
.review-heading .orange {
    color: #ffc107; /* Yellow accent */
}

.review-heading p {
    color: #666;
}

.review-slider {
    overflow: hidden;
    position: relative;
}

.review-track {
    display: flex;
    gap: 25px;
    width: max-content;
    animation: reviewMove 40s linear infinite;
}

.review-slider:hover .review-track {
    animation-play-state: paused;
}

@keyframes reviewMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Review Box - Purple tinted border */
.review-box {
    width: 330px;
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid rgba(106, 27, 154, 0.15); /* Light Purple border */
    padding: 25px;
    box-shadow: 0 10px 25px rgba(106, 27, 154, .08); /* Purple shadow */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(106, 27, 154, .18);
}

/* Top Border - Purple Gradient */
.review-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #2d0050, #6a1b9a, #ffc107); /* Purple to Yellow */
}

.review-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

/* Avatar - Purple Gradient */
.avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6a1b9a, #4a148c); /* Purple gradient */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    box-shadow: 0 6px 16px rgba(106, 27, 154, 0.3);
}

/* Reviewer Name - Dark Purple */
.review-top h4 {
    margin: 0;
    color: #2d0050; /* Dark Purple */
}

/* Reviewer Location - Purple tint */
.review-top small {
    color: #6a1b9a; /* Purple */
}

/* Stars - Yellow (keep as accent) */
.stars {
    color: #ffc107; /* Yellow */
    letter-spacing: 2px;
    margin: 10px 0;
}

/* Review Text */
.review-box p {
    color: #555;
    line-height: 1.7;
    font-style: italic;
}

@media(max-width:768px) {

    .review-heading h2 {
        font-size: 2rem;
    }

    .review-box {
        width: 270px;
    }

    .review-track {
        animation-duration: 30s;
    }
}

/*========================================
HARI FOOTER - PREMIUM VERSION (Purple Majority)
========================================*/

.hari-footer{
    background:linear-gradient(135deg,#1a0033 0%,#2d0050 60%,#4a148c 100%); /* Purple Gradient */
    color:#fff;
    padding:70px 0 25px;
    position:relative;
    overflow:hidden;
}

/* Top Accent Bar - Yellow to Purple */
.hari-footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#ffc107,#6a1b9a,#ffc107); /* Yellow to Purple */
}

/* Background Glow - Purple */
.hari-footer::after{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:320px;
    height:320px;
    background:radial-gradient(circle,rgba(106,27,154,.25),transparent 70%); /* Purple glow */
}

/* Container */

.hari-footer .container{
    position:relative;
    z-index:2;
}

/* Grid */

.hari-footer-grid{
    display:grid;
    grid-template-columns:1.3fr .8fr .8fr 1.1fr;
    gap:45px;
    padding-bottom:45px;
}

/* Brand */

.hari-footer-logo{
    width:170px;
    display:block;
    margin-bottom:18px;
}

.hari-brand p{
    color:var(--bg-white); /* Light Purple tint */
    line-height:1.8;
    max-width:320px;
    margin-bottom:22px;
}

/*========================
SOCIAL ICONS
========================*/

.hari-socials{
    display:flex;
    gap:12px;
    align-items:center;
}

.hari-socials a{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#3d1a5c; /* Dark Purple background */
    border:1px solid rgba(255,193,7,.15); /* Yellow tint border */
    text-decoration:none;
    transition:.35s ease;
    flex-shrink:0;
}

.hari-socials a i{
    font-size:18px;
    color:#ffc107; /* Yellow icons */
    line-height:1;
    display:block;
}

/* Individual Hover Colors */

.hari-socials a:nth-child(1):hover{
    background:#1877f2; /* Facebook Blue */
    transform:translateY(-4px);
}
.hari-socials a:nth-child(1):hover i{
    color:#fff;
}

.hari-socials a:nth-child(2):hover{
    background:linear-gradient(45deg,#833ab4,#fd1d1d,#fcb045); /* Instagram */
    transform:translateY(-4px);
}
.hari-socials a:nth-child(2):hover i{
    color:#fff;
}

.hari-socials a:nth-child(3):hover{
    background:#ff0000; /* YouTube Red */
    transform:translateY(-4px);
}
.hari-socials a:nth-child(3):hover i{
    color:#fff;
}

.hari-socials a:nth-child(4):hover{
    background:#25d366; /* WhatsApp Green */
    transform:translateY(-4px);
}
.hari-socials a:nth-child(4):hover i{
    color:#fff;
}

/* Headings */

.hari-links h4,
.hari-contact h4{
    color: var(--bg-white);
    font-size:1.15rem;
    margin-bottom:22px;
    position:relative;
}

/* Heading Underline - Yellow */
.hari-links h4::after,
.hari-contact h4::after{
    content:"";
    display:block;
    width:46px;
    height:3px;
    margin-top:8px;
    border-radius:50px;
    background:#ffc107; /* Yellow accent */
}

/* Links */

.hari-links a{
    display:block;
    color:var(--bg-white); /* Light Purple tint */
    text-decoration:none;
    margin-bottom:14px;
    transition:.3s;
}

.hari-links a:hover{
    color:#ffc107; /* Yellow hover */
    padding-left:8px;
}

/* Contact */

.contact-box{
    display:flex;
    gap:15px;
    align-items:flex-start;
    margin-bottom:18px;
}

.contact-box i{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#3d1a5c; /* Dark Purple */
    color:#ffc107; /* Yellow icon */
    border-radius:12px;
    font-size:17px;
    flex-shrink:0;
}

.contact-box span{
    color:var(--bg-white); /* Light Purple tint */
    line-height:1.6;
}

/* CTA Strip - Purple Gradient */
.hari-call-strip{
    margin:35px 0;
    background:linear-gradient(135deg,#4a148c,#6a1b9a); /* Purple gradient */
    border-radius:24px;
    padding:36px;
    text-align:center;
    color:#fff;
    box-shadow:0 20px 40px rgba(106,27,154,.35); /* Purple shadow */
}

.hari-call-strip h3{
    font-family:"Anton",sans-serif;
    font-size:2rem;
    letter-spacing:1px;
    margin-bottom:10px;
    color:var(--bg-white);
}

.hari-call-strip p{
    color:rgba(255,255,255,.85);
    margin-bottom:24px;
}

/* Call Button - Yellow */
.call-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 34px;
    background:#ffc107; /* Yellow */
    color:#2d0050; /* Dark Purple text */
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.call-btn:hover{
    background:#ffffff;
    color:#6a1b9a; /* Purple */
    transform:translateY(-3px);
}

/* Bottom */

.hari-footer-bottom{
    border-top:1px solid rgba(255,193,7,.15); /* Yellow tint border */
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
}

.bottom-links{
    display:flex;
    gap:22px;
}

.bottom-links a{
    color:var(--bg-white); /* Light Purple tint */
    text-decoration:none;
    transition:.3s;
}

.bottom-links a:hover{
    color:#ffc107; /* Yellow hover */
}

.developer-credit{
    text-align:center;
    margin-top:18px;
    color:var(--bg-white); /* Purple tint */
    font-size:.9rem;
}

.developer-credit strong{
    color:#ffc107; /* Yellow accent */
}

/*========================
Responsive
========================*/

@media(max-width:992px){

.hari-footer-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.hari-footer{
padding:50px 0 20px;
}

.hari-footer-grid{
grid-template-columns:1fr;
gap:35px;
text-align:left;
}

.hari-footer-logo{
width:150px;
}

.hari-socials{
justify-content:flex-start;
}

.hari-call-strip{
padding:28px 18px;
}

.hari-call-strip h3{
font-size:1.5rem;
}

.call-btn{
width:100%;
justify-content:center;
}

.hari-footer-bottom{
flex-direction:column;
text-align:center;
}

.bottom-links{
justify-content:center;
flex-wrap:wrap;
}

}/* ============================================================
   HARI FOOTER — TABLET + MOBILE RESPONSIVE (Left Aligned)
   ============================================================ */

/* ===== TABLET (992px and below) ===== */
@media (max-width: 992px) {

    .hari-footer {
        padding: 60px 0 22px;
    }

    .hari-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
        padding-bottom: 35px;
        text-align: left;
    }

    .hari-footer-logo {
        width: 150px;
    }

    .hari-brand p {
        max-width: 100%;
        font-size: 0.9rem;
    }

    .hari-socials {
        justify-content: flex-start;
    }

    .hari-socials a {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .hari-socials a i {
        font-size: 16px;
    }

    .hari-links h4,
    .hari-contact h4 {
        font-size: 1.05rem;
        margin-bottom: 18px;
        text-align: left;
    }

    .hari-links h4::after,
    .hari-contact h4::after {
        margin: 8px 0 0 0;
    }

    .hari-links a {
        font-size: 0.9rem;
        margin-bottom: 12px;
        text-align: left;
    }

    .contact-box {
        gap: 12px;
        margin-bottom: 16px;
        justify-content: flex-start;
        text-align: left;
    }

    .contact-box i {
        width: 40px;
        height: 40px;
        font-size: 15px;
        border-radius: 10px;
    }

    .contact-box span {
        font-size: 0.85rem;
        text-align: left;
    }

    .hari-call-strip {
        padding: 30px 24px;
        margin: 30px 0;
        border-radius: 20px;
        text-align: left;
    }

    .hari-call-strip h3 {
        font-size: 1.6rem;
    }

    .hari-call-strip p {
        font-size: 0.9rem;
    }

    .call-btn {
        padding: 14px 28px;
        font-size: 0.9rem;
    }

    .hari-footer-bottom {
        font-size: 0.85rem;
    }

    .developer-credit {
        font-size: 0.82rem;
    }
}

/* ===== MOBILE (768px and below) ===== */
@media (max-width: 768px) {

    .hari-footer {
        padding: 50px 0 20px;
    }

    /* Footer grid — single column, LEFT aligned */
    .hari-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 32px;
        text-align: left;
    }

    /* Brand section — left aligned */
    .hari-brand {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .hari-footer-logo {
        width: 140px;
        margin: 0 0 16px 0;
    }

    .hari-brand p {
        max-width: 100%;
        font-size: 0.88rem;
        line-height: 1.7;
        margin-bottom: 20px;
        padding: 0;
        text-align: left;
    }

    /* Social icons — left aligned */
    .hari-socials {
        justify-content: flex-start;
        gap: 10px;
    }

    .hari-socials a {
        width: 42px;
        height: 42px;
    }

    .hari-socials a i {
        font-size: 16px;
    }

    /* Links section — left aligned */
    .hari-links {
        text-align: left;
    }

    .hari-links h4,
    .hari-contact h4 {
        font-size: 1.05rem;
        margin-bottom: 18px;
        text-align: left;
    }

    /* Heading underline — left aligned */
    .hari-links h4::after,
    .hari-contact h4::after {
        margin: 8px 0 0 0;
    }

    .hari-links a {
        font-size: 0.9rem;
        margin-bottom: 12px;
        text-align: left;
    }

    .hari-links a:hover {
        padding-left: 8px;
    }

    /* Contact section — left aligned */
    .hari-contact {
        text-align: left;
    }

    .contact-box {
        justify-content: flex-start;
        text-align: left;
        gap: 12px;
        margin-bottom: 16px;
    }

    .contact-box i {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .contact-box span {
        font-size: 0.85rem;
        text-align: left;
    }

    /* CTA Strip — left aligned */
    .hari-call-strip {
        padding: 26px 20px;
        margin: 26px 0;
        border-radius: 18px;
        text-align: left;
    }

    .hari-call-strip h3 {
        font-size: 1.4rem;
        line-height: 1.3;
        text-align: left;
    }

    .hari-call-strip p {
        font-size: 0.88rem;
        line-height: 1.6;
        margin-bottom: 20px;
        text-align: left;
    }

    .call-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 0.88rem;
    }

    /* Footer bottom — left aligned */
    .hari-footer-bottom {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
        gap: 14px;
        padding-top: 20px;
        font-size: 0.82rem;
    }

    .bottom-links {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 16px;
    }

    .bottom-links a {
        font-size: 0.82rem;
    }

    .developer-credit {
        font-size: 0.78rem;
        margin-top: 14px;
        line-height: 1.5;
        padding: 0;
        text-align: left;
    }
}

/* ===== SMALL MOBILE (480px and below) ===== */
@media (max-width: 480px) {

    .hari-footer {
        padding: 40px 0 18px;
    }

    .hari-footer-grid {
        gap: 26px;
        padding-bottom: 26px;
        text-align: left;
    }

    .hari-footer-logo {
        width: 120px;
        margin: 0 0 14px 0;
    }

    .hari-brand p {
        font-size: 0.82rem;
        line-height: 1.6;
        margin-bottom: 18px;
        padding: 0;
        text-align: left;
    }

    /* Social icons — smaller, left aligned */
    .hari-socials {
        gap: 8px;
        justify-content: flex-start;
    }

    .hari-socials a {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .hari-socials a i {
        font-size: 14px;
    }

    /* Headings */
    .hari-links h4,
    .hari-contact h4 {
        font-size: 1rem;
        margin-bottom: 14px;
        text-align: left;
    }

    .hari-links h4::after,
    .hari-contact h4::after {
        width: 40px;
        height: 2px;
        margin: 8px 0 0 0;
    }

    .hari-links a {
        font-size: 0.85rem;
        margin-bottom: 10px;
        text-align: left;
    }

    /* Contact */
    .contact-box {
        gap: 10px;
        margin-bottom: 14px;
        justify-content: flex-start;
        text-align: left;
    }

    .contact-box i {
        width: 36px;
        height: 36px;
        font-size: 14px;
        border-radius: 9px;
    }

    .contact-box span {
        font-size: 0.8rem;
        line-height: 1.5;
        text-align: left;
    }

    /* CTA Strip */
    .hari-call-strip {
        padding: 22px 16px;
        margin: 22px 0;
        border-radius: 16px;
        text-align: left;
    }

    .hari-call-strip h3 {
        font-size: 1.2rem;
        line-height: 1.3;
        margin-bottom: 8px;
        text-align: left;
    }

    .hari-call-strip p {
        font-size: 0.82rem;
        line-height: 1.5;
        margin-bottom: 18px;
        text-align: left;
    }

    .call-btn {
        padding: 12px 18px;
        font-size: 0.82rem;
        gap: 8px;
        width: 100%;
        justify-content: center;
    }

    .call-btn i {
        font-size: 0.9rem;
    }

    /* Bottom */
    .hari-footer-bottom {
        gap: 12px;
        font-size: 0.78rem;
        align-items: flex-start;
        text-align: left;
    }

    .bottom-links {
        gap: 12px;
        justify-content: flex-start;
    }

    .bottom-links a {
        font-size: 0.78rem;
    }

    .developer-credit {
        font-size: 0.72rem;
        line-height: 1.4;
        padding: 0;
        text-align: left;
    }
}

/* ===== VERY SMALL MOBILE (380px and below) ===== */
@media (max-width: 380px) {

    .hari-footer {
        padding: 36px 0 16px;
    }

    .hari-footer-grid {
        gap: 22px;
        padding-bottom: 22px;
        text-align: left;
    }

    .hari-footer-logo {
        width: 100px;
        margin: 0 0 12px 0;
    }

    .hari-brand p {
        font-size: 0.78rem;
        line-height: 1.55;
        margin-bottom: 16px;
        text-align: left;
    }

    /* Social icons */
    .hari-socials {
        gap: 6px;
        justify-content: flex-start;
    }

    .hari-socials a {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .hari-socials a i {
        font-size: 13px;
    }

    /* Headings */
    .hari-links h4,
    .hari-contact h4 {
        font-size: 0.92rem;
        margin-bottom: 12px;
        text-align: left;
    }

    .hari-links a {
        font-size: 0.8rem;
        margin-bottom: 9px;
        text-align: left;
    }

    /* Contact */
    .contact-box {
        gap: 8px;
        margin-bottom: 12px;
        justify-content: flex-start;
        text-align: left;
    }

    .contact-box i {
        width: 32px;
        height: 32px;
        font-size: 12px;
        border-radius: 8px;
    }

    .contact-box span {
        font-size: 0.75rem;
        line-height: 1.45;
        text-align: left;
    }

    /* CTA Strip */
    .hari-call-strip {
        padding: 20px 14px;
        margin: 20px 0;
        border-radius: 14px;
        text-align: left;
    }

    .hari-call-strip h3 {
        font-size: 1.05rem;
        margin-bottom: 6px;
        text-align: left;
    }

    .hari-call-strip p {
        font-size: 0.76rem;
        margin-bottom: 16px;
        text-align: left;
    }

    .call-btn {
        padding: 11px 16px;
        font-size: 0.78rem;
        gap: 6px;
        width: 100%;
        justify-content: center;
    }

    /* Bottom */
    .hari-footer-bottom {
        gap: 10px;
        font-size: 0.72rem;
        align-items: flex-start;
        text-align: left;
    }

    .bottom-links {
        gap: 10px;
        justify-content: flex-start;
    }

    .bottom-links a {
        font-size: 0.72rem;
    }

    .developer-credit {
        font-size: 0.68rem;
        line-height: 1.35;
        text-align: left;
    }
}
/*========================================
CONTACT HERO BANNER (Purple Majority)
========================================*/

.contact-banner{
    position: relative;
    padding: 90px 0;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    /* Background Image with Purple Overlay */
    background-image:
        linear-gradient(rgba(45, 0, 80, .82), rgba(26, 0, 51, .88)), /* Purple overlay */
        url("./pictures/contact-banner.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Purple Glow */
.contact-banner::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right,
        rgba(106, 27, 154, .30), transparent 45%); /* Purple glow */
}

.contact-banner .container{
    position: relative;
    z-index: 2;
}

.banner-content{
    text-align: center;
    max-width: 760px;
    margin: auto;
}

/* Small Label - Purple tint with Yellow text */
.banner-content .eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(106, 27, 154, .35); /* Purple tint */
    border: 1px solid rgba(255, 193, 7, .35); /* Yellow border */
    color: #ffc107; /* Yellow accent */
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

/* Heading */
.banner-content h1{
    font-family: 'Anton', sans-serif;
    font-size: clamp(2.8rem,6vw,4.5rem);
    line-height: 1.05;
    color: #ffffff;
    margin-bottom: 18px;
    letter-spacing: 1px;
}

/* Accent - Yellow */
.banner-content .accent{
    color: #ffc107; /* Yellow accent */
}

/* Description */
.banner-content p{
    color: #edf2ff;
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 620px;
    margin: 0 auto 35px;
}

/* Stats */
.banner-stats{
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* Stat Box - Purple tint */
.stat-box{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 14px;
    background: rgba(106, 27, 154, .25); /* Purple tint */
    border: 1px solid rgba(255, 193, 7, .20); /* Yellow border */
    backdrop-filter: blur(10px);
    color: #ffffff;
    transition: .3s ease;
}

/* Stat Icon - Yellow */
.stat-box i{
    color: #ffc107; /* Yellow accent */
    font-size: 1.2rem;
}

/* Stat Hover - Purple */
.stat-box:hover{
    background: #6a1b9a; /* Purple */
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(106, 27, 154, .45); /* Purple shadow */
    border-color: #ffc107;
}

.stat-box:hover i{
    color: #ffffff;
}

/* Responsive */
@media(max-width:768px){

    .contact-banner{
        padding: 70px 0;
        min-height: 360px;
    }

    .banner-content h1{
        font-size: 2.4rem;
    }

    .banner-content p{
        font-size: .95rem;
    }

    .banner-stats{
        flex-direction: column;
        align-items: center;
    }

    .stat-box{
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media(max-width:480px){

    .contact-banner{
        padding: 60px 0;
    }

    .banner-content h1{
        font-size: 2rem;
    }

    .banner-content .eyebrow{
        font-size: .72rem;
    }
}

/* ============================================================
   CONTACT SECTION (Purple Majority)
   ============================================================ */

.contact-section {
    background: #ffffff;
    padding: 80px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: flex-start;
}

/* Left Side - Contact Info */
.contact-info .eyebrow {
    margin-bottom: 8px;
    color: #6a1b9a; /* Purple */
}

.contact-info h2 {
    font-size: 2rem;
    margin: 14px 0 16px;
    color: #2d0050; /* Dark Purple */
}

.contact-info>p {
    color: #555555;
    font-size: 1rem;
    margin-bottom: 30px;
    max-width: 420px;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}

/* Contact Info Card - Purple tint */
.contact-info-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    background: #f5e6ff; /* Light Purple */
    border-radius: var(--radius-sm);
    border: 1px solid rgba(106, 27, 154, 0.15); /* Purple border */
    transition: all 0.3s ease;
}

.contact-info-card:hover {
    border-color: #6a1b9a; /* Purple */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(106, 27, 154, 0.12);
}

/* Contact Info Icon - Purple */
.contact-info-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: rgba(106, 27, 154, 0.10); /* Purple tint */
    border: 1px solid rgba(106, 27, 154, 0.25); /* Purple border */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6a1b9a; /* Purple icon */
    font-size: 0.9rem;
}

.contact-info-detail {
    display: flex;
    flex-direction: column;
}

.contact-info-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888888;
}

.contact-info-detail a,
.contact-info-detail span {
    color: #1f1f1f;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.contact-info-detail a:hover {
    color: #6a1b9a; /* Purple hover */
}

/* Social */
.contact-social {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-social-label {
    font-size: 0.8rem;
    color: #555555;
    font-weight: 500;
}

.contact-social-icons {
    display: flex;
    gap: 10px;
}

/* Social Icons - Purple tint */
.contact-social-icons .cs-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6a1b9a; /* Purple */
    background: #f5e6ff; /* Light Purple */
    border: 1px solid rgba(106, 27, 154, 0.15);
    transition: all 0.3s ease;
    text-decoration: none;
}

.contact-social-icons .cs-icon:hover {
    transform: translateY(-3px);
}

.contact-social-icons .cs-icon.facebook:hover {
    background: #1877F2;
    color: #fff;
    border-color: #1877F2;
}

.contact-social-icons .cs-icon.instagram:hover {
    background: radial-gradient(circle at 30% 110%, #ffdb73 0%, #fd5 20%, #ff543e 40%, #c837ab 60%, #7038c0 80%);
    color: #fff;
    border-color: #ff543e;
}

.contact-social-icons .cs-icon.youtube:hover {
    background: #6a1b9a; /* Purple */
    color: #fff;
    border-color: #6a1b9a;
}

.contact-social-icons .cs-icon.whatsapp:hover {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}

/* WhatsApp Button - Keep Green but Purple border */
.whatsapp-btn {
    width: 100%;
    justify-content: center;
    background: #25D366 !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3) !important;
    border: 2px solid #6a1b9a !important; /* Purple border */
}

.whatsapp-btn:hover {
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5) !important;
}

/* Right Side - Form */
.contact-form-wrapper {
    background: #ffffff;
}

/* Form Card - Purple tint */
.form-card {
    background: #ffffff;
    border: 1px solid rgba(106, 27, 154, 0.15); /* Purple border */
    border-radius: var(--radius);
    padding: 36px;
    box-shadow: 0 12px 30px rgba(106, 27, 154, 0.08); /* Purple shadow */
}

.form-card h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: none;
    letter-spacing: 0;
    color: #2d0050; /* Dark Purple */
    margin-bottom: 4px;
}

.form-card>p {
    color: #555555;
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: #1f1f1f;
    margin-bottom: 6px;
}

/* Field Label Icon - Purple */
.field label i {
    color: #6a1b9a; /* Purple */
    margin-right: 6px;
}

/* Inputs - Purple border */
.field input,
.field textarea,
.field select {
    width: 100%;
    background: #f5e6ff; /* Light Purple */
    border: 1px solid rgba(106, 27, 154, 0.15); /* Purple border */
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    color: #1f1f1f;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

/* Focus - Purple */
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: #6a1b9a; /* Purple focus */
    box-shadow: 0 0 20px rgba(106, 27, 154, 0.15); /* Purple glow */
    background: #ffffff;
}

.field textarea {
    resize: vertical;
    min-height: 100px;
}

/* Submit Button - Purple */
.submit-btn {
    width: 100%;
    justify-content: center;
    padding: 16px;
    font-size: 1rem;
    background: #6a1b9a !important; /* Purple */
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

.submit-btn:hover {
    background: #4a148c !important; /* Darker Purple */
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(106, 27, 154, 0.3);
}

/* ============================================================
   MAP SECTION (Purple Majority)
   ============================================================ */

.map-section {
    padding: 0 0 60px 0;
    background: #ffffff;
}

.map-wrapper {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(106, 27, 154, 0.15); /* Purple border */
    box-shadow: 0 12px 30px rgba(106, 27, 154, 0.10); /* Purple shadow */
}

.map-wrapper iframe {
    display: block;
}

/* Map Overlay - Purple tint */
.map-overlay {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(245, 230, 255, 0.95); /* Light Purple */
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid rgba(106, 27, 154, 0.25); /* Purple border */
    backdrop-filter: blur(4px);
    font-size: 0.85rem;
    color: #2d0050; /* Dark Purple */
}

/* Map Icon - Purple */
.map-overlay i {
    color: #6a1b9a; /* Purple */
    margin-right: 6px;
}

/* ============================================================
   RESPONSIVE CONTACT PAGE
   ============================================================ */

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .contact-banner {
        min-height: 280px;
        padding: 40px 0 30px;
    }

    .contact-banner .banner-stats {
        gap: 16px;
        flex-wrap: wrap;
    }

    .contact-banner .banner-stats span {
        font-size: 0.78rem;
    }

    .contact-section {
        padding: 50px 0;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 24px 20px;
    }

    .map-section {
        padding: 0 0 40px 0;
    }

    .map-wrapper iframe {
        height: 200px;
    }

    .map-overlay {
        font-size: 0.7rem;
        padding: 6px 14px;
        bottom: 12px;
    }
}

@media (max-width: 480px) {
    .contact-banner {
        min-height: 220px;
        padding: 30px 0 25px;
    }

    .contact-banner .banner-stats {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .contact-section {
        padding: 30px 0;
    }

    .contact-info h2 {
        font-size: 1.5rem;
    }

    .contact-info>p {
        font-size: 0.9rem;
    }

    .form-card {
        padding: 18px 14px;
    }

    .form-card h3 {
        font-size: 1.1rem;
    }

    .field input,
    .field textarea,
    .field select {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .submit-btn {
        padding: 14px;
        font-size: 0.9rem;
    }

    .map-wrapper iframe {
        height: 150px;
    }
}

/* ============================================================
   CONTACT LIST (For Footer) - Purple Theme
   ============================================================ */

.contact-list {
    list-style: none;
    padding: 0;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.contact-list li:last-child {
    margin-bottom: 0;
}

/* Contact Icon - Purple */
.contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(106, 27, 154, 0.15); /* Purple tint */
    border: 1px solid rgba(106, 27, 154, 0.30); /* Purple border */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc107; /* Yellow icon */
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-list li:hover .contact-icon {
    background: rgba(106, 27, 154, 0.25);
    transform: scale(1.1);
}

.contact-detail {
    display: flex;
    flex-direction: column;
}

.contact-detail .contact-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
}

.contact-detail a,
.contact-detail span {
    color: #ffffff;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    text-decoration: none;
}

.contact-detail a:hover {
    color: #ffc107; /* Yellow hover */
}

/* Footer Bottom - White Text */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--bg-white);
    font-size: 0.82rem;
}

.footer-bottom strong {
    color: var(--yellow);
}

.footer-bottom-left span {
    color: var(--bg-white);
}

.footer-bottom-right {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-bottom-right span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--bg-white);
}

.footer-bottom-right span i {
    font-size: 0.9rem;
}

/* Footer Disclaimer - White Text */
.footer-disclaimer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: white;
    font-size: 0.78rem;
    text-align: center;
}

.footer-disclaimer i {
    color: var(--yellow);
    font-size: 1rem;
}

/* ============================================================
   RESPONSIVE FOOTER
   ============================================================ */

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-desc {
        max-width: 100%;
    }
}

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

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-right {
        justify-content: center;
    }

    .footer-disclaimer {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 16px 0 20px;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-logo-text {
        font-size: 1.2rem;
    }

    .footer-social .social-icon {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }

    .footer-bottom-right {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .contact-list li {
        gap: 10px;
    }

    .contact-icon {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
}

/* ---------- LEFT SOCIAL FLOAT STACK ---------- */
.social-float {
    position: fixed;
    top: 67%;
    left: 22px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 200;
}

.social-float a {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    border: 2px solid var(--bg);
    transition: transform .25s ease, box-shadow .25s ease;
}

.social-float a:hover {
    transform: scale(1.12) translateX(4px);
}

.social-float a svg {
    width: 21px;
    height: 21px;
}

.social-float .sf-phone {
    background: linear-gradient(135deg, var(--yellow-bright), var(--yellow));
    color: #0a1230;
}

.social-float .sf-whatsapp {
    background: #25D366;
}

.social-float .sf-instagram {
    background: radial-gradient(circle at 30% 110%, #ffdb73 0%, #fd5 20%, #ff543e 40%, #c837ab 60%, #7038c0 80%);
}

.social-float .sf-facebook {
    background: #1877F2;
}

@media (max-width: 700px) {
    .social-float {
        left: 12px;
        gap: 10px;
    }

    .social-float a {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
}

/* ---------- BACK TO TOP ---------- */
.back-to-top {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--yellow-bright), var(--yellow));
    color: #0a1230;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(255, 201, 60, 0.3);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(255, 201, 60, 0.45);
}

@media (max-width: 700px) {
    .back-to-top {
        bottom: 18px;
        right: 18px;
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
}

/* ---------- FLOAT BUTTONS ---------- */
.float-wa {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 200;
    font-size: 1.5rem;
    animation: pulse-wa 2.4s ease-in-out infinite;
}

@keyframes pulse-wa {

    0%,
    100% {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }

    50% {
        box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
    }
}

/* ============================================================
   PAGE HERO - WITH BACKGROUND IMAGE
   ============================================================ */

.page-hero {
    padding: 60px 0 50px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

/* Products Page Hero - With Background Image */
.products-hero {
    min-height: 450px;
    background-image: url('./images/productvideo.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

/* Dark Overlay for Text Readability */
.products-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    z-index: 0;
}

/* Gold Glow Overlay */
.products-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 40%, rgba(212, 175, 55, 0.06), transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(212, 175, 55, 0.04), transparent 50%);
    z-index: 0;
    pointer-events: none;
}

.products-hero .container {
    position: relative;
    z-index: 1;
}

/* Breadcrumb - White/Gold */
.products-hero .breadcrumb {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.products-hero .breadcrumb .accent {
    color: var(--yellow);
}

/* Heading - White */
.products-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    margin: 14px 0 10px;
    color: #ffffff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.products-hero h1 .accent {
    color: var(--yellow);
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.2);
}

/* Paragraph - Light */
.products-hero p {
    color: rgba(255, 255, 255, 0.8) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   OPTIONAL: Without Dark Overlay (Image More Visible)
   ============================================================ */
.products-hero-light::before {
    display: none;
}

.products-hero-light h1 {
    color: var(--text);
}

.products-hero-light p {
    color: var(--text-muted) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .products-hero {
        min-height: 280px;
        padding: 40px 0 30px;
    }

    .products-hero h1 {
        font-size: clamp(1.8rem, 4vw, 2.4rem);
    }
}

@media (max-width: 480px) {
    .products-hero {
        min-height: 220px;
        padding: 30px 0 25px;
    }

    .products-hero h1 {
        font-size: clamp(1.4rem, 3vw, 1.8rem);
    }

    .products-hero p {
        font-size: 0.85rem;
    }
}

/* ---------- FILTER BAR (products page) ---------- */
.filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.chip {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: all .2s ease;
}

.chip.active,
.chip:hover {
    border-color: var(--yellow);
    color: var(--yellow);
    background: rgba(255, 201, 60, 0.06);
}

/* ---------- RESPONSIVE ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    nav.main-nav {
        display: none;
    }

    nav.main-nav.open-mobile {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
        padding: 20px 24px;
    }

    nav.main-nav.open-mobile ul {
        flex-direction: column;
        gap: 18px;
    }

    nav.main-nav.open-mobile ul li a {
        color: var(--text-muted);
    }

    .hamburger {
        display: flex;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-stage {
        height: 320px;
        order: -1;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .strip .grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .gallery-grid {
        columns: 2 180px;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .strip .grid-4 {
        grid-template-columns: 1fr;
    }

    .track-form {
        flex-direction: column;
    }

    .track-form input {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

/* ==========================================================
   PREMIUM ABOUT HERO - HARI CRACKERS
========================================================== */

.about-premium-hero{
    position:relative;
    min-height:90vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(rgba(7,15,45,.78),rgba(8,18,52,.88)),
        url("./pictures/about-banner.png") center/cover no-repeat;
}

/* Soft glow */
.about-premium-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at 20% 20%, rgba(255,178,56,.22), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,122,26,.20), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(255,178,56,.12), transparent 50%);
}

/* Content */

.hero-content{
    position:relative;
    z-index:3;
    text-align:center;
    max-width:820px;
    margin:auto;
    padding:80px 0 50px;
}

/* Badge */

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 22px;
    border-radius:999px;
    background:rgba(255,178,56,.12);
    border:1px solid rgba(255,178,56,.35);
    color:#FFD166;
    font-weight:600;
    backdrop-filter:blur(10px);
    margin-bottom:24px;
}

/* Heading */

.hero-content h1{
    font-size:clamp(2.8rem,6vw,5rem);
    line-height:1.05;
    color:#fff;
    font-family:"Anton",sans-serif;
    letter-spacing:1px;
    margin-bottom:18px;
}

.hero-content h1 span{
    background:linear-gradient(90deg,#FFD166,#FF7A1A,#FFD166);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Paragraph */

.hero-content p{
    color:#F5F5F5;
    font-size:1.08rem;
    line-height:1.8;
    max-width:650px;
    margin:auto auto 35px;
}

/* Buttons */

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

/* Floating Cards */

.hero-floating-cards{
    position:absolute;
    bottom:35px;
    left:50%;
    transform:translateX(-50%);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    width:min(100%,920px);
    z-index:3;
}

.float-card{
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:14px;
    color:#fff;
    transition:.35s;
}

.float-card:hover{
    transform:translateY(-6px);
    border-color:#FFD166;
    box-shadow:0 10px 30px rgba(255,178,56,.22);
}

.float-card i{
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#FFD166,#FF7A1A);
    color:#071533;
    font-size:22px;
}

.float-card strong{
    display:block;
    font-size:1rem;
}

.float-card span{
    font-size:.82rem;
    color:#d9d9d9;
}

/* Animated Sparks */

.spark{
    position:absolute;
    width:8px;
    height:8px;
    background:#FFD166;
    border-radius:50%;
    box-shadow:0 0 12px #FFD166;
    animation:floatSpark 5s linear infinite;
}

.s1{left:8%;top:25%;animation-delay:0s;}
.s2{left:20%;top:15%;animation-delay:1s;}
.s3{left:35%;top:30%;animation-delay:2s;}
.s4{right:20%;top:20%;animation-delay:3s;}
.s5{right:12%;top:40%;animation-delay:1.5s;}
.s6{left:65%;top:12%;animation-delay:2.5s;}

@keyframes floatSpark{

0%{
    transform:translateY(0) scale(1);
    opacity:0;
}

20%{
    opacity:1;
}

70%{
    opacity:1;
}

100%{
    transform:translateY(-90px) scale(.2);
    opacity:0;
}

}
/* =========================================================
   RESPONSIVE - PREMIUM ABOUT HERO
========================================================= */


/* ================================
   TABLET
================================ */

@media (max-width: 992px) {

    .about-premium-hero {
        min-height: auto;
        padding: 70px 0 180px;
    }

    .about-premium-hero .hero-content {
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        padding: 70px 20px 40px;
    }

    .about-premium-hero .hero-floating-cards {
        width: 90%;
        grid-template-columns: repeat(2, 1fr);

        bottom: 25px;

        gap: 14px;
    }

    .about-premium-hero .float-card {
        padding: 15px;
    }
}


/* ================================
   MOBILE
================================ */

@media (max-width: 768px) {

    .about-premium-hero {

        min-height: auto !important;

        height: auto !important;

        padding: 0 0 40px !important;

        display: block !important;

        overflow: hidden !important;
    }


    /* Main Container */

    .about-premium-hero .container {

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        position: relative !important;
        z-index: 5 !important;
    }


    /* =================================
       HERO CONTENT
    ================================= */

    .about-premium-hero .hero-content {

        position: relative !important;

        z-index: 20 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        max-width: 650px !important;

        margin: 0 auto !important;

        padding: 55px 20px 30px !important;

        text-align: center !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    /* Badge */

    .about-premium-hero .hero-badge {

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: auto !important;

        max-width: 100% !important;

        margin-bottom: 18px !important;

        font-size: 12px !important;

        padding: 8px 15px !important;
    }


    /* Heading */

    .about-premium-hero .hero-content h1 {

        display: block !important;

        width: 100% !important;

        margin: 0 0 18px !important;

        font-size: clamp(2.2rem, 8vw, 3.2rem) !important;

        line-height: 1.15 !important;

        text-align: center !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    /* Paragraph */

    .about-premium-hero .hero-content p {

        display: block !important;

        width: 100% !important;

        max-width: 600px !important;

        margin: 0 auto 25px !important;

        font-size: 14px !important;

        line-height: 1.7 !important;

        text-align: center !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    /* Buttons */

    .about-premium-hero .hero-buttons {

        width: 100% !important;

        display: flex !important;

        flex-direction: row !important;

        justify-content: center !important;

        align-items: center !important;

        flex-wrap: wrap !important;

        gap: 12px !important;
    }


    .about-premium-hero .hero-buttons .btn {

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        min-height: 46px !important;

        padding: 0 22px !important;
    }


    /* =================================
       FLOATING CARDS
       
       IMPORTANT:
       Desktop = absolute
       Mobile = normal flow
    ================================= */

    .about-premium-hero .hero-floating-cards {

        position: relative !important;

        left: auto !important;

        right: auto !important;

        bottom: auto !important;

        top: auto !important;

        transform: none !important;

        width: 90% !important;

        max-width: 500px !important;

        margin: 15px auto 0 !important;

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 14px !important;

        z-index: 10 !important;
    }


    .about-premium-hero .float-card {
        width: 100% !important;
        min-height: 70px !important;
        padding: 14px !important;

        margin: 0 !important;
    }


    .about-premium-hero .float-card i {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        font-size: 18px !important;
    }
}

/* ================================
   SMALL MOBILE
================================ */
@media (max-width: 480px) {
    .about-premium-hero {
        padding-bottom: 30px !important;
    }

    .about-premium-hero .hero-content {
        padding: 45px 15px 25px !important;
    }

    .about-premium-hero .hero-badge {
        font-size: 10px !important;
        padding: 7px 12px !important;
        margin-bottom: 15px !important;
    }

    .about-premium-hero .hero-content h1 {
        font-size: 2.3rem !important;
        line-height: 1.15 !important;
        margin-bottom: 15px !important;
    }

    .about-premium-hero .hero-content p {
        font-size: 13px !important;
        line-height: 1.65 !important;
        max-width: 340px !important;
        margin-bottom: 22px !important;
    }

    /* Buttons one below another */
    .about-premium-hero .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }


    .about-premium-hero .hero-buttons .btn {
        width: 210px !important;
        min-height: 45px !important;
        justify-content: center !important;
    }


    /* Cards one by one */

    .about-premium-hero .hero-floating-cards {
        width: 88% !important;
        max-width: 340px !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
        margin-top: 15px !important;
    }


    .about-premium-hero .float-card {
        min-height: 68px !important;
        padding: 12px 14px !important;
        border-radius: 15px !important;
    }

    .about-premium-hero .float-card i {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        font-size: 17px !important;  
      }

    .about-premium-hero .float-card strong {
        font-size: 14px !important;   
     }

    .about-premium-hero .float-card span {
        font-size: 11px !important;
    }
}

/* ================================
   VERY SMALL MOBILE
================================ */

@media (max-width: 380px) {

    .about-premium-hero .hero-content {

        padding: 40px 12px 22px !important;
    }

    .about-premium-hero .hero-content h1 {

        font-size: 2.05rem !important;
    }

    .about-premium-hero .hero-content p {
        font-size: 12px !important;
        max-width: 310px !important;
    }

    .about-premium-hero .hero-badge {
        font-size: 9px !important;
        padding: 7px 10px !important;
    }

    .about-premium-hero .hero-buttons .btn {
        width: 195px !important;
        min-height: 43px !important;
    }
    .about-premium-hero .hero-floating-cards {
        width: 90% !important;
        max-width: 310px !important;
    }
}

/* ============================================================
   PREMIUM OUR STORY (Purple Majority)
============================================================ */

.story-section{
    background:
      radial-gradient(circle at top right,
      rgba(106,27,154,.10), transparent 40%), /* Purple glow */
      #ffffff;
    padding:90px 0;
}

.story-wrapper{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:center;
}

/* Left */

/* Chip - Purple tint with Yellow text */
.story-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    background:rgba(106,27,154,.12); /* Purple tint */
    border:1px solid rgba(255,193,7,.25); /* Yellow border */
    border-radius:999px;
    color:#ffc107; /* Yellow accent */
    font-size:.75rem;
    font-weight:700;
    letter-spacing:2px;
}

/* Heading - Dark Purple */
.story-content h2{
    font-size:clamp(2rem,4vw,3.2rem);
    line-height:1.15;
    margin:20px 0;
    color:#2d0050; /* Dark Purple */
}

/* Accent - Yellow */
.story-content h2 span{
    color:#ffc107; /* Yellow accent */
}

/* Line - Purple to Yellow */
.story-line{
    width:70px;
    height:5px;
    background:linear-gradient(90deg,#6a1b9a,#ffc107); /* Purple to Yellow */
    border-radius:999px;
    margin-bottom:24px;
}

.story-text{
    color:#5f6675;
    line-height:1.9;
    margin-bottom:20px;
    font-size:1rem;
}

/* Features */

.story-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin:28px 0;
}

/* Feature Box - Purple tint border */
.feature-box{
    display:flex;
    align-items:center;
    gap:12px;
    background:#ffffff;
    border:1px solid rgba(106,27,154,.15); /* Purple border */
    border-radius:16px;
    padding:16px;
    transition:.35s;
    box-shadow:0 8px 24px rgba(45,0,80,.04); /* Purple shadow */
}

/* Feature Icon - Purple gradient */
.feature-box i{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#6a1b9a,#4a148c); /* Purple gradient */
    color:#ffffff;
}

/* Feature Hover - Purple shadow */
.feature-box:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 35px rgba(106,27,154,.20); /* Purple shadow */
    border-color:rgba(106,27,154,.35);
}

/* ==========================================
   HARI CRACKERS - LOGO DISPLAY
========================================== */

.story-image{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.story-image-card{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    max-width:520px;
    padding:10px 0;
    background:transparent;
    border:none;
    box-shadow:none;
    overflow:visible;
}

/* Hide old glow elements */
.glow{
    display:none;
}

/* Main Logo */
.story-img{
    width:450px;
    max-width:380px;
    height:400px;
    display:block;
    position:relative;
    z-index:10;

    filter:drop-shadow(0 18px 35px rgba(45,0,80,.30)); /* Purple shadow */

    animation:logoFloat 5s ease-in-out infinite;
}

/* Smooth Floating */
@keyframes logoFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

/* Floating Badge - Dark Purple */
.story-badge{
    position:absolute;
    bottom:-8px;
    left:50%;
    transform:translateX(-50%);
    z-index:15;

    background:#2d0050; /* Dark Purple */
    color:#ffffff;
    padding:12px 22px;
    border-radius:999px;

    font-size:.82rem;
    font-weight:600;

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

    box-shadow:0 12px 30px rgba(45,0,80,.30); /* Purple shadow */
}

/* Badge Icon - Yellow */
.story-badge i{
    color:#ffc107; /* Yellow accent */
}

/* Responsive */
@media(max-width:768px){

    .story-img{
        max-width:300px;
    }

    .story-badge{
        font-size:.72rem;
        padding:10px 18px;
    }
}

@media(max-width:480px){

    .story-img{
        max-width:260px;
    }
}

/* Glow - Purple */
.glow{
    position:absolute;
    border-radius:50%;
    filter:blur(40px);
    opacity:.45;
    animation:pulseGlow 4s ease-in-out infinite;
}

.glow1{
    width:120px;
    height:120px;
    background:#6a1b9a; /* Purple */
    top:20px;
    left:-20px;
}

.glow2{
    width:100px;
    height:100px;
    background:#ffc107; /* Yellow accent */
    bottom:30px;
    right:-20px;
}

.glow3{
    width:70px;
    height:70px;
    background:#4a148c; /* Dark Purple */
    top:50%;
    right:20px;
}

@keyframes pulseGlow{
    0%,100%{
        transform:scale(1);
        opacity:.35;
    }
    50%{
        transform:scale(1.2);
        opacity:.65;
    }
}

/* Premium Badge - Dark Purple */
.story-badge{
    position:absolute;
    bottom:22px;
    left:50%;
    transform:translateX(-50%);
    background:#2d0050; /* Dark Purple */
    color:#ffffff;
    padding:10px 18px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.78rem;
    font-weight:600;
    box-shadow:0 10px 25px rgba(45,0,80,.30); /* Purple shadow */
    z-index:5;
}

/* Badge Icon - Yellow */
.story-badge i{
    color:#ffc107; /* Yellow accent */
}

/* Responsive */

@media(max-width:768px){

.story-wrapper{
grid-template-columns:1fr;
gap:40px;
}

.story-content{
text-align:center;
}

.story-line{
margin:0 auto 22px;
}

.story-features{
grid-template-columns:1fr 1fr;
}

.story-image-card{
max-width:360px;
margin:auto;
}

.story-img{
max-width:230px;
}

}

@media(max-width:480px){

.story-section{
padding:70px 0;
}

.story-features{
grid-template-columns:1fr;
}

.story-content h2{
font-size:1.9rem;
}

.story-image-card{
padding:28px 20px 55px;
}

.story-img{
max-width:190px;
}

.story-badge{
font-size:.7rem;
padding:8px 14px;
}

}

/* ==========================================================
   PREMIUM MISSION & VISION (Purple Majority)
========================================================== */

.premium-purpose{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:
    radial-gradient(circle at top left,rgba(106,27,154,.15),transparent 35%), /* Purple */
    radial-gradient(circle at bottom right,rgba(45,0,80,.12),transparent 40%), /* Dark Purple */
    linear-gradient(135deg,#f5e6ff,#ffffff,#fdf8e8); /* Light Purple to Yellow tint */
}

/* Animated background */

.purpose-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

/* Particles - Purple */
.particle{
    position:absolute;
    border-radius:50%;
    background:rgba(106,27,154,.25); /* Purple */
    animation:floatParticle linear infinite;
}

.p1{width:14px;height:14px;left:8%;top:15%;animation-duration:8s;}
.p2{width:8px;height:8px;right:12%;top:25%;animation-duration:6s;}
.p3{width:18px;height:18px;left:35%;bottom:18%;animation-duration:10s;}
.p4{width:10px;height:10px;right:28%;bottom:30%;animation-duration:7s;}
.p5{width:12px;height:12px;left:70%;top:55%;animation-duration:9s;}

@keyframes floatParticle{
    0%{transform:translateY(0) scale(1);opacity:.2;}
    50%{transform:translateY(-35px) scale(1.4);opacity:.8;}
    100%{transform:translateY(0);opacity:.2;}
}

/* Section Heading */

.premium-purpose .section-head{
    text-align:center;
    max-width:760px;
    margin:0 auto 60px;
}

/* Eyebrow - Purple tint with Yellow text */
.premium-purpose .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(106,27,154,.12); /* Purple tint */
    border:1px solid rgba(255,193,7,.30); /* Yellow border */
    padding:8px 18px;
    border-radius:999px;
    color:#ffc107; /* Yellow accent */
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:18px;
}

.premium-purpose h2{
    font-size:clamp(2rem,5vw,3rem);
    color:#2d0050; /* Dark Purple */
    margin-bottom:14px;
}

.premium-purpose .accent{
    color:#ffc107; /* Yellow accent */
}

.premium-purpose .section-head p{
    color:#5a6475;
    line-height:1.8;
}

/* Cards */

.purpose-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;
}

.purpose-card{
    position:relative;
    padding:42px;
    border-radius:28px;
    overflow:hidden;
    backdrop-filter:blur(12px);
    border:1px solid rgba(106,27,154,.15); /* Purple border */
    transition:.45s;
    box-shadow:0 25px 50px rgba(45,0,80,.10); /* Purple shadow */
}

.purpose-card::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.95;
    z-index:0;
}

/* Mission - Light Purple */
.mission::before{
    background:linear-gradient(145deg,#ffffff,#f5e6ff);
}

/* Vision - Dark Purple */
.vision::before{
    background:linear-gradient(145deg,#2d0050,#4a148c);
}

.purpose-card>*{
    position:relative;
    z-index:1;
}

.purpose-card:hover{
    transform:translateY(-12px);
    box-shadow:0 35px 70px rgba(106,27,154,.20); /* Purple shadow */
}

/* Purple Glow */
.purpose-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    top:-70px;
    right:-70px;
    background:radial-gradient(circle,rgba(106,27,154,.35),transparent 70%); /* Purple */
    animation:pulseGlow 4s infinite;
}

@keyframes pulseGlow{
    50%{transform:scale(1.15);}
}

/* Icon */

.purpose-icon{
    width:74px;
    height:74px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-bottom:24px;
    transition:.35s;
}

/* Mission Icon - Purple Gradient */
.mission .purpose-icon{
    background:linear-gradient(135deg,#6a1b9a,#4a148c); /* Purple */
    color:#ffffff;
}

/* Vision Icon - Yellow Gradient with Purple Icon */
.vision .purpose-icon{
    background:linear-gradient(135deg,#ffc107,#e6a800); /* Yellow */
    color:#2d0050; /* Dark Purple icon */
}

.purpose-card:hover .purpose-icon{
    transform:rotate(-10deg) scale(1.08);
}

/* Text */

.purpose-label{
    display:inline-block;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:10px;
}

/* Mission Label - Purple */
.mission .purpose-label{color:#6a1b9a;}

/* Vision Label - Yellow */
.vision .purpose-label{color:#ffc107;}

.purpose-card h3{
    font-size:1.6rem;
    margin-bottom:18px;
    line-height:1.3;
}

/* Mission Heading - Dark Purple */
.mission h3{color:#2d0050;}

/* Vision Heading - White */
.vision h3{color:#ffffff;}

.purpose-card p{
    line-height:1.8;
    margin-bottom:24px;
}

.mission p{color:#5b6575;}
.vision p{color:#d9e2ff;}

/* List */

.purpose-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:14px;
}

.purpose-list li{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:.95rem;
}

.mission .purpose-list li{color:#3d4655;}
.vision .purpose-list li{color:#eef3ff;}

/* List Icons - Yellow */
.purpose-list i{
    color:#ffc107; /* Yellow accent */
    font-size:1rem;
}

/* Responsive */

@media(max-width:900px){

    .purpose-grid{
        grid-template-columns:1fr;
    }

    .purpose-card{
        padding:34px 26px;
    }
}

@media(max-width:480px){

    .premium-purpose{
        padding:70px 0;
    }

    .purpose-card{
        padding:28px 20px;
        border-radius:22px;
    }

    .purpose-icon{
        width:62px;
        height:62px;
        font-size:24px;
    }

    .purpose-card h3{
        font-size:1.3rem;
    }

    .purpose-card p,
    .purpose-list li{
        font-size:.88rem;
    }
}


/* ============================================================
   PREMIUM VALUES SECTION (Purple Majority)
============================================================ */

.values-section{
    position:relative;
    overflow:hidden;
    padding:120px 0 90px;
    background:
        radial-gradient(circle at top,#4a148c 0%,#2d0050 45%,#1a0033 100%); /* Purple gradient */
}

/* Purple Glow */

.values-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%,rgba(106,27,154,.25),transparent 30%), /* Purple */
        radial-gradient(circle at 80% 10%,rgba(255,193,7,.12),transparent 35%), /* Yellow accent */
        radial-gradient(circle at 50% 90%,rgba(74,20,140,.20),transparent 35%); /* Purple */
}

/* ============================================================
   HANGING CRACKERS
============================================================ */

.hanging-crackers{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.hanger{
    position:absolute;
    top:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    transform-origin:top center;
    animation:swing 5s ease-in-out infinite;
}

.rope{
    width:2px;
    background:linear-gradient(#d8d8d8,#777);
    display:block;
}

/* Positions */

.h1{left:7%; animation-delay:0s;}
.h2{left:28%; animation-delay:1s;}
.h3{left:50%; animation-delay:2s;}
.h4{left:72%; animation-delay:3s;}
.h5{left:91%; animation-delay:4s;}

.h1 .rope{height:95px;}
.h2 .rope{height:120px;}
.h3 .rope{height:75px;}
.h4 .rope{height:110px;}
.h5 .rope{height:90px;}

.hanger img{
    width:70px;
    object-fit:contain;
    filter:drop-shadow(0 0 18px rgba(106,27,154,.55)); /* Purple glow */
}

.h3 img{
    width:95px;
}

@keyframes swing{
    0%,100%{transform:rotate(-4deg);}
    50%{transform:rotate(4deg);}
}

/* ============================================================
   HEADING
============================================================ */

.values-section .section-head{
    text-align:center;
    margin-bottom:55px;
    position:relative;
    z-index:5;
}

/* Eyebrow - Purple tint with Yellow text */
.values-section .eyebrow{
    display:inline-flex;
    gap:8px;
    align-items:center;
    color:#ffc107; /* Yellow accent */
    background:rgba(106,27,154,.15); /* Purple tint */
    border:1px solid rgba(255,193,7,.25); /* Yellow border */
    padding:8px 20px;
    border-radius:999px;
    letter-spacing:2px;
    font-weight:700;
}

.values-section h2{
    color:#ffffff;
    font-size:clamp(2rem,4vw,3rem);
    margin:18px 0 12px;
}

.values-section .accent{
    color:#ffc107; /* Yellow accent */
}

.values-section p{
    color:#d8deef;
}
/* ============================================================
   CARDS
============================================================ */

.values-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    position:relative;
    z-index:5;
}

.value-card{
    position:relative;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,178,56,.15);
    border-radius:28px;
    padding:35px 24px;
    text-align:center;
    transition:.4s;
    overflow:hidden;
}

.value-card::before{
    content:'';
    position:absolute;
    top:-100%;
    left:-50%;
    width:220%;
    height:220%;
    background:linear-gradient(transparent,rgba(255,255,255,.08),transparent);
    transform:rotate(25deg);
    transition:.6s;
}

.value-card:hover::before{
    top:100%;
}

.value-card:hover{
    transform:translateY(-10px);
    border-color:#ffb238;
    box-shadow:0 25px 55px rgba(255,120,20,.25);
}

.value-icon{
    width:72px;
    height:72px;
    margin:auto auto 18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#ffb238,#ff7a1a);
    color:#fff;
    font-size:28px;
    box-shadow:0 0 25px rgba(255,178,56,.45);
    transition:.35s;
}

.value-card:hover .value-icon{
    transform:rotate(12deg) scale(1.08);
}

.value-card h3{
    color:#fff;
    font-size:1.15rem;
    margin-bottom:12px;
}

.value-card p{
    color:#d9dceb;
    line-height:1.75;
    font-size:.92rem;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width:1024px){

.values-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.values-section{
padding:90px 0 70px;
}

.values-grid{
grid-template-columns:1fr;
}

.hanger img{
width:48px;
}

.h3 img{
width:62px;
}

.h1 .rope{height:70px;}
.h2 .rope{height:90px;}
.h3 .rope{height:60px;}
.h4 .rope{height:85px;}
.h5 .rope{height:70px;}

}

/* ==========================================================
   HARI CRACKERS - SAFETY SECTION (Yellow + Purple Theme)
========================================================== */

.safety-section{
    position:relative;
    padding:90px 0;
    overflow:hidden;

    background:url("pictures/safety-bg.jfif") center/cover no-repeat;
}

/* Dark Purple Overlay */
.safety-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(45, 0, 80, .88),
        rgba(74, 20, 140, .82),
        rgba(255, 193, 7, .20)
    );
}

.safety-section .container{
    position:relative;
    z-index:2;
}

/* Header */
.safety-section .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border-radius:999px;
    background:rgba(255, 193, 7, .12); /* Yellow tint */
    border:1px solid rgba(255, 193, 7, .35); /* Yellow border */
    color:#ffc107; /* Yellow */
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.safety-section h2{
    color:#fff;
    font-size:clamp(2rem,4vw,3rem);
    margin:16px 0;
}

.safety-section .accent{
    color:#ffc107; /* Yellow */
}

.safety-section .section-head p{
    color:rgba(255,255,255,.82);
    max-width:620px;
    margin:auto;
}

/* Cards */
.safety-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(420px,1fr));
    gap:35px;
    width:100%;
}

.safety-box{
    width:100%;
    background:#fff;
    border-radius:30px;
    padding:45px 28px 28px;
    position:relative;
    box-shadow:0 18px 35px rgba(0,0,0,.08);
}

.safety-card{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    padding:34px 26px;
    text-align:center;
    transition:.35s ease;
    position:relative;
    overflow:hidden;
}

/* Top Glow - Yellow to Purple */
.safety-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,#ffc107,#6a1b9a);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.safety-card:hover{
    transform:translateY(-10px);
    border-color:rgba(255, 193, 7, .55); /* Yellow border */
    box-shadow:0 22px 50px rgba(106, 27, 154, .28); /* Purple shadow */
}

.safety-card:hover::before{
    transform:scaleX(1);
}

/* Icon - Yellow Gradient with Purple Icon */
.safety-icon{
    width:74px;
    height:74px;
    margin:0 auto 18px;
    border-radius:50%;
    background:linear-gradient(135deg,#ffc107,#e6a800); /* Yellow */
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:#2d0050; /* Dark Purple icon */
    box-shadow:0 0 30px rgba(255, 193, 7, .35); /* Yellow glow */
    transition:.35s;
}

.safety-card:hover .safety-icon{
    transform:rotate(10deg) scale(1.08);
}

.safety-card h3{
    color:#fff;
    font-size:1.2rem;
    margin-bottom:10px;
    font-weight:700;
}

.safety-card p{
    color:rgba(255,255,255,.82);
    line-height:1.7;
    font-size:.95rem;
}

/* Floating Sparkles - Yellow */
.safety-section::after{
    content:'';
    position:absolute;
    inset:0;
    background-image:
      radial-gradient(2px 2px at 15% 20%, rgba(255, 193, 7, .8), transparent),
      radial-gradient(2px 2px at 80% 35%, rgba(255, 193, 7, .8), transparent),
      radial-gradient(2px 2px at 40% 70%, rgba(255, 193, 7, .7), transparent),
      radial-gradient(2px 2px at 65% 85%, rgba(255, 193, 7, .8), transparent);
    background-size:240px 240px;
    animation:safetySpark 18s linear infinite;
    pointer-events:none;
    opacity:.7;
}

@keyframes safetySpark{
    from{transform:translateY(0);}
    to{transform:translateY(-240px);}
}

/* Responsive */
@media(max-width:992px){
    .safety-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .safety-section{
        padding:70px 0;
    }

    .safety-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .safety-card{
        padding:28px 22px;
    }

    .safety-icon{
        width:64px;
        height:64px;
        font-size:26px;
    }
}

/* ============================================================
   🔥 FIX: CLIENT INFO FORM - FULLY RESPONSIVE
   ============================================================ */

/* Client Info Section - Desktop */
.client-info-section {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-bottom: 22px;
}

.client-info-section h3 {
    font-family: 'Anton', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.5px;
    color: var(--ember);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.client-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.client-info-section .field {
    width: 100%;
}

.client-info-section .field input,
.client-info-section .field select,
.client-info-section .field textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.client-info-section .field input::placeholder,
.client-info-section .field textarea::placeholder {
    color: #aaa;
}

.client-info-section .field input:focus,
.client-info-section .field select:focus,
.client-info-section .field textarea:focus {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08);
}

.client-info-section .field-full {
    grid-column: 1 / -1;
    margin-bottom: 6px;
}

.client-info-section textarea {
    resize: vertical;
    min-height: 56px;
}

.client-form-error {
    display: none;
    align-items: center;
    gap: 8px;
    color: #c0392b;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.82rem;
    margin-top: 4px;
}

.client-form-error.show {
    display: flex;
}

/* ============================================================
   🔥 MOBILE: CLIENT INFO - FULL WIDTH & CLEAR
   ============================================================ */

@media (max-width: 768px) {
    .client-info-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .client-info-section {
        padding: 14px 16px !important;
    }

    .client-info-section .field input,
    .client-info-section .field select,
    .client-info-section .field textarea {
        font-size: 0.9rem !important;
        padding: 11px 14px !important;
        width: 100% !important;
    }

    .client-info-section .field-full {
        grid-column: 1 !important;
    }

    .client-form-error {
        font-size: 0.78rem !important;
        padding: 8px 12px !important;
    }
}

@media (max-width: 480px) {
    .client-info-grid {
        gap: 8px !important;
    }

    .client-info-section {
        padding: 12px 12px !important;
    }

    .client-info-section .field input,
    .client-info-section .field select,
    .client-info-section .field textarea {
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
    }

    .client-info-section h3 {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
    }

    .client-form-error {
        font-size: 0.7rem !important;
        padding: 6px 10px !important;
    }
}

/* ============================================================
   🔥 FIX: ORDER SUMMARY MODAL BODY PADDING
   ============================================================ */

#order-summary-modal .cart-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

@media (max-width: 768px) {
    #order-summary-modal .cart-modal-body {
        padding: 12px 14px !important;
    }

    #order-summary-modal .cart-modal-header h2 {
        font-size: 0.95rem !important;
    }

    #order-summary-modal .cart-modal-footer {
        padding: 10px 14px !important;
    }

    #order-summary-modal .cart-modal-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        font-size: 0.82rem !important;
    }
}

@media (max-width: 480px) {
    #order-summary-modal .cart-modal-body {
        padding: 10px 10px !important;
    }

    #order-summary-modal .cart-modal-header h2 {
        font-size: 0.82rem !important;
    }

    #order-summary-modal .cart-modal-actions .btn {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }
}

/* ============================================================
   🔥 FIX: ORDER SUMMARY META - RESPONSIVE
   ============================================================ */

.order-summary-meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
    padding: 14px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.order-summary-meta-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-summary-meta-col.align-right {
    align-items: flex-end;
    text-align: right;
}

@media (max-width: 768px) {
    .order-summary-meta {
        flex-direction: column !important;
        padding: 12px 14px !important;
        gap: 8px !important;
    }

    .order-summary-meta-col.align-right {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .order-summary-meta-col {
        font-size: 0.8rem !important;
    }

    .os-overall {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 480px) {
    .order-summary-meta {
        padding: 10px 12px !important;
        gap: 6px !important;
    }

    .order-summary-meta-col {
        font-size: 0.75rem !important;
    }

    .os-overall {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 560px) {
    .client-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Send to WhatsApp button ---- */
.btn-whatsapp {
    background: #25D366;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
    background: #21bd5c;
}



/* ============================================================
   MOBILE NAV - ALL 3 ITEMS IN ONE ROW
   All Categories | Download Price List | Hamburger
   ============================================================ */
@media (max-width: 768px) {

    .nav-bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 6px 10px;
        min-height: 50px;
        flex-wrap: nowrap;
        width: 100%;
        box-sizing: border-box;
    }

    .all-categories {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .all-categories-btn {
        width: 100%;
        height: 36px;
        padding: 6px 8px;
        font-size: 0.72rem;
        justify-content: center;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .nav-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
    }

    .nav-actions .btn {
        width: auto;
        height: 36px;
        padding: 6px 9px;
        font-size: 0.65rem;
        line-height: 1;
        white-space: nowrap;
        gap: 4px;
        box-sizing: border-box;
    }

    .nav-actions .btn i {
        font-size: 0.62rem;
    }

    .nav-actions .hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 36px;
        padding: 0;
        flex: 0 0 36px;
        box-sizing: border-box;
    }

    .nav-actions .hamburger span {
        width: 17px;
    }
}

@media (max-width: 480px) {

    .nav-bottom {
        gap: 5px;
        padding: 5px 8px;
    }

    .all-categories-btn {
        height: 34px;
        padding: 5px 7px;
        font-size: 0.65rem;
    }

    .nav-actions {
        gap: 4px;
    }

    .nav-actions .btn {
        height: 34px;
        padding: 5px 7px;
        font-size: 0.58rem;
    }

    .nav-actions .btn i {
        font-size: 0.55rem;
    }

    .nav-actions .hamburger {
        width: 34px;
        height: 34px;
        min-width: 34px;
        flex-basis: 34px;
    }

    .nav-actions .hamburger span {
        width: 16px;
    }
}
/* ============================================================
   HOME — WELCOME BLOCK (Yellow + Dark Purple Theme)
   ============================================================ */
.welcome-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    align-items: stretch;
}

/* Yellow Content Panel */
.welcome-panel {
    background: linear-gradient(135deg, #ffc107 0%, #e6a800 55%, #cc9900 100%);
    border-radius: 22px;
    padding: 46px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(255, 193, 7, 0.28);
}

.welcome-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.14), transparent 45%),
        radial-gradient(circle at 6% 92%, rgba(45, 0, 80, 0.18), transparent 40%);
    pointer-events: none;
}

.welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(45, 0, 80, 0.28); /* Dark Purple */
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.welcome-panel h2 {
    color: #ffffff;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.welcome-panel h2 span {
    color: #2d0050; /* Dark Purple */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.welcome-panel p {
    color: rgba(45, 0, 80, 0.92); /* Dark Purple text */
    font-size: 1rem;
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 26px;
    position: relative;
    z-index: 1;
}

.btn-learn-more {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #2d0050, #4a148c); /* Dark Purple */
    color: #ffffff; /* White text */
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.82rem;
    padding: 14px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    z-index: 1;
}

.btn-learn-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.welcome-badge-card {
    background: #ffffff;
    border: 2px solid #ffc107; /* Yellow border */
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    box-shadow: 0 14px 32px rgba(45, 0, 80, 0.12); /* Purple shadow */
}

.welcome-badge-circle {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 320px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4a148c, #2d0050 60%, #1a0033 100%); /* Purple */
    border: 6px solid #ffc107; /* Yellow border */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.35);
}

.welcome-badge-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================
   TRUST SHOWCASE - PREMIUM GLASS THEME (Yellow + Purple)
========================================================== */

.trust-showcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 50px;
}

.trust-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff, #fdf8e8); /* Light Yellow tint */
    border: 1px solid rgba(255, 193, 7, .15); /* Yellow border */
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    overflow: hidden;
    transition: .35s ease;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
}

.trust-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #ffc107, #ffd54f, #2d0050); /* Yellow to Purple */
}

.trust-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(106, 27, 154, .15); /* Purple shadow */
}

.trust-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 20px;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffc107, #e6a800); /* Yellow */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d0050; /* Dark Purple icon */
    font-size: 1.9rem;
    box-shadow: 0 12px 24px rgba(255, 193, 7, .25);
}

.trust-card h3 {
    color: #2d0050; /* Dark Purple */
    font-size: 1.18rem;
    margin-bottom: 12px;
    font-weight: 700;
}

.trust-card p {
    color: #555;
    font-size: .92rem;
    line-height: 1.7;
}

/* Hover Icon Animation */
.trust-card:hover .trust-icon {
    transform: rotate(-8deg) scale(1.08);
}

/* Tablet */
@media(max-width:992px) {
    .trust-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media(max-width:576px) {
    .trust-showcase {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .trust-card {
        padding: 26px 20px;
    }

    .trust-icon {
        width: 66px;
        height: 66px;
        font-size: 1.7rem;
    }
}

@media (max-width: 900px) {
    .welcome-grid {
        grid-template-columns: 1fr;
    }

    .welcome-badge-card {
        order: -1;
    }

    .welcome-badge-circle {
        max-width: 220px;
    }

    .icon-features-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .welcome-panel {
        padding: 32px 26px;
    }

    .icon-features-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SHOP BY CATEGORY — quick icon nav strip (Home page)
   ============================================================ */
.cat-quicknav {
    background: linear-gradient(180deg, #fff3e8 0%, #ffffff 100%);
    padding: 36px 0;
    border-bottom: 1px solid var(--border);
}

.cat-quicknav-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
}

.cat-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    text-align: center;
    padding: 14px 8px;
    border-radius: 16px;
    transition: transform 0.25s ease, background 0.25s ease;
}

.cat-quick-item:hover {
    transform: translateY(-4px);
    background: rgba(255, 106, 0, 0.06);
}

.cat-quick-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--card), #ff8a1f);
    box-shadow: 0 8px 18px rgba(255, 106, 0, 0.3);
    transition: transform 0.25s ease;
}

.cat-quick-item:hover .cat-quick-icon {
    transform: scale(1.08) rotate(-4deg);
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    box-shadow: 0 10px 22px rgba(10, 26, 69, 0.35);
}

.cat-quick-item span:last-child {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}

@media (max-width: 900px) {
    .cat-quicknav-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .cat-quicknav-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .cat-quick-icon {
        width: 52px;
        height: 52px;
        font-size: 1.15rem;
    }

    .cat-quick-item span:last-child {
        font-size: 0.68rem;
    }
}
/* ==========================================
   FLOATING BUTTONS
========================================== */


.floating-shop{
    position: fixed;
    left: 5px;
    bottom: 10px;
    width: 220px;
    z-index: 99999;
    animation: shopFloat 3s ease-in-out infinite; /* Floating animation */
}

/* Floating Shop Image */
.floating-shop img{
    width: 180px;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 22px rgba(106, 27, 154, .45)); /* Purple shadow */
    transition: transform .3s ease, filter .3s ease;
    animation: shopPulse 2.5s ease-in-out infinite; /* Pulse animation */
}

/* Hover Effect */
.floating-shop img:hover{
    transform: scale(1.08) rotate(-2deg);
    filter: drop-shadow(0 15px 30px rgba(255, 193, 7, .55)); /* Yellow glow on hover */
}/* =========================================
   FLOATING SHOP - MOBILE RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .floating-shop {
        left: 5px;
        bottom: 12px;

        width: 250px;

        z-index: 99999;
    }

    .floating-shop img {
        width: 220px;
        max-width: none;

        height: auto;

        display: block;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .floating-shop {
        left: 3px;
        bottom: 10px;

        width: 240px;
    }

    .floating-shop img {
        width: 210px;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .floating-shop {
        left: 2px;
        bottom: 8px;

        width: 225px;
    }

    .floating-shop img {
        width: 200px;
    }
}

/* ==========================================
   ANIMATIONS
========================================== */

/* Floating Up and Down */
@keyframes shopFloat{
    0%, 100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-15px);
    }
}

/* Pulsing Glow */
@keyframes shopPulse{
    0%, 100%{
        filter: drop-shadow(0 10px 22px rgba(106, 27, 154, .45));
    }
    50%{
        filter: drop-shadow(0 15px 30px rgba(255, 193, 7, .65));
    }
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 768px){
    .floating-shop{
        width: 140px;
        left: 12px;
        bottom: 20px;
        animation: shopFloatMobile 3s ease-in-out infinite;
    }

    .floating-shop img{
        width: 120px;
    }
}

/* Mobile Floating Animation (Smaller Movement) */
@keyframes shopFloatMobile{
    0%, 100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-8px);
    }
}


/* RIGHT SIDE BUTTONS */
.floating-actions{
    position:fixed;
    right:20px;
    bottom:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
    z-index:99999;
}

/* Common Button */
.fab-btn{
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border:2px solid #fff;
    box-shadow:0 10px 24px rgba(45, 0, 80, .35); /* Purple shadow */
    transition:.3s;
    position:relative;
    overflow:visible;
}

.fab-btn i{
    font-size:22px;
    color:#fff;
}

.fab-btn:hover{
    transform:translateY(-3px) scale(1.06);
}

.fab-instagram {
    background: linear-gradient(45deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888);
    color: white;
}

.fab-instagram:hover {
    transform: scale(1.1);
}

/* ==========================================
   PURPLE WAVE ANIMATION
========================================== */

/* Purple Ripple */
.fab-btn::before{
    content:"";
    position:absolute;
    inset:-6px;
    border:2px solid rgba(106, 27, 154, .45); /* Purple */
    border-radius:50%;
    animation:purpleWave 2s infinite;
}

.fab-btn::after{
    content:"";
    position:absolute;
    inset:-14px;
    border:2px solid rgba(255, 193, 7, .28); /* Yellow tint */
    border-radius:50%;
    animation:purpleWave 2s infinite .8s;
}

/* Wave Animation */
@keyframes purpleWave{
    0%{
        transform:scale(.85);
        opacity:.8;
    }
    70%{
        transform:scale(1.45);
        opacity:0;
    }
    100%{
        transform:scale(1.55);
        opacity:0;
    }
}

/* Hover */
.fab-whatsapp:hover,
.fab-call:hover{
    transform:translateY(-4px) scale(1.08);
    box-shadow:0 12px 28px rgba(106, 27, 154, .45); /* Purple shadow */
}

/* Mobile */
@media(max-width:768px){
    .fab-btn::before{
        inset:-5px;
    }
    .fab-btn::after{
        inset:-11px;
    }
}

/* WhatsApp - Keep Green but Purple border */
.fab-whatsapp{
    background:#25D366;
    color:#fff;
    border-color: #6a1b9a !important; /* Purple border */
}

.fab-whatsapp i{
    animation:iconBounce 2s infinite;
}

/* Call - Purple */
.fab-call{
    background:#6a1b9a; /* Purple */
    color:#fff;
    border-color: #ffc107 !important; /* Yellow border */
}

.fab-call i{
    animation:phoneRing 1.8s infinite;
    transform-origin:center;
}

/* Ripple Animation */
@keyframes rippleWave{
    0%{
        transform:scale(1);
        opacity:.55;
    }
    70%{
        transform:scale(1.55);
        opacity:0;
    }
    100%{
        transform:scale(1.7);
        opacity:0;
    }
}

/* WhatsApp Icon Bounce */
@keyframes iconBounce{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.12);
    }
}

/* Phone Ring Animation */
@keyframes phoneRing{
    0%,100%{
        transform:rotate(0deg);
    }
    15%{
        transform:rotate(-18deg);
    }
    30%{
        transform:rotate(18deg);
    }
    45%{
        transform:rotate(-12deg);
    }
    60%{
        transform:rotate(12deg);
    }
}

/* Back to Top - Dark Purple with Yellow icon */
.fab-top{
    background:#2d0050; /* Dark Purple */
    border-color:#ffc107; /* Yellow border */
}

.fab-top i{
    color:#ffc107; /* Yellow icon */
}

.fab-top:hover{
    background:#6a1b9a; /* Lighter Purple */
    border-color:#ffc107;
}

.fab-top:hover i{
    color:#ffffff; /* White icon on hover */
}

/* Mobile */
@media (max-width:768px){

    .floating-shop{
        left:12px;
        bottom:16px;
        width:70px;
    }

    .floating-actions{
        right:12px;
        bottom:16px;
        gap:10px;
    }

    .fab-btn{
        width:50px;
        height:50px;
    }

    .fab-btn i{
        font-size:20px;
    }
}