:root {
            --font-bengali: 'Noto Sans Bengali', sans-serif;
            --font-serif: 'Playfair Display', serif;
        }

        body {
            font-family: var(--font-bengali);
            background-color: #ffffff;
            color: #2C2C2A;
            overflow-x: hidden;
        }

        .serif-heading {
            font-family: var(--font-serif), var(--font-bengali);
        }

        /* 3D Card & Button Styles */
        .card-3d {
            background: #ffffff;
            border-radius: 1.25rem;
            border: 1px solid rgba(201, 162, 39, 0.25);
            box-shadow: 0 10px 30px -5px rgba(15, 61, 46, 0.08), 
                        0 4px 6px -2px rgba(0, 0, 0, 0.03),
                        inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            transform-style: preserve-3d;
        }

        .card-3d:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 20px 40px -10px rgba(15, 61, 46, 0.15), 
                        0 8px 12px -4px rgba(201, 162, 39, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 1);
            border-color: rgba(201, 162, 39, 0.6);
        }

        .card-dark-3d {
            background: linear-gradient(145deg, #0f3d2e 0%, #0b3024 100%);
            border-radius: 1.25rem;
            border: 1px solid rgba(212, 175, 55, 0.35);
            box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.4),
                        inset 0 1px 1px rgba(255, 255, 255, 0.15);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .card-dark-3d:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 25px 50px -12px rgba(15, 61, 46, 0.7),
                        inset 0 1px 2px rgba(255, 255, 255, 0.3);
            border-color: rgba(212, 175, 55, 0.7);
        }

        /* Custom Gold Gradients & Shadows */
        .btn-gold {
            background: linear-gradient(135deg, #D4AF37 0%, #C9A227 50%, #B38F1F 100%);
            color: #0F3D2E;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5);
        }

        .btn-gold:hover {
            background: linear-gradient(135deg, #E5BF48 0%, #D4AF37 50%, #C9A227 100%);
            box-shadow: 0 8px 20px rgba(201, 162, 39, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.8);
            transform: translateY(-2px);
        }

        /* Before/After Slider Styling */
        .ba-slider {
            position: relative;
            width: 100%;
            height: 260px;
            border-radius: 16px;
            overflow: hidden;
            cursor: ew-resize;
            user-select: none;
        }

        @media (min-width: 640px) {
            .ba-slider {
                height: 340px;
            }
        }

        /* FAQ Accordion Transitions */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
            opacity: 0;
        }

        .faq-item.open .faq-answer {
            max-height: 250px;
            opacity: 1;
            padding-top: 10px;
        }

        .faq-item.open .faq-icon {
            transform: rotate(45deg);
        }

        /* Marquee Animation Keyframes */
        @keyframes marquee {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-50%); }
        }

        .animate-marquee {
            display: flex;
            width: max-content;
            animation: marquee 15s linear infinite;
        }

        /* Desktop Container Wrapper Constraint (Slightly smaller refined boxed width) */
        @media (min-width: 1024px) {
            .desktop-container {
                max-width: 1040px;
                margin-left: auto;
                margin-right: auto;
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }
        }
    


        #jbaWrap, #jbaWrap * { box-sizing: border-box; }
        #jbaWrap { max-width: 768px; margin: 0 auto; text-align: center; }
        .jba-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(201,162,39,0.25); border-radius: 1rem; padding: 0.75rem; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.35); }
        .jba-slider { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(201,162,39,0.4); background: #14140f; }
        .jba-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
        .jba-layer img { display: block; width: 100%; height: 100%; object-fit: cover; }
        .jba-before-wrap { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 50% 0 0); -webkit-clip-path: inset(0 50% 0 0); }
        .jba-tag { position: absolute; top: 12px; font-weight: 700; font-size: 10px; padding: 4px 10px; border-radius: 9999px; box-shadow: 0 1px 4px rgba(0,0,0,0.3); white-space: nowrap; }
        .jba-tag-after { right: 12px; background: #f0b429; color: #04231a; }
        .jba-tag-before { left: 12px; background: rgba(4,35,26,0.92); color: #f3d98a; border: 1px solid rgba(201,162,39,0.35); }
        .jba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #f0b429; transform: translateX(-50%); z-index: 10; pointer-events: none; }
        .jba-handle-btn { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: #f0b429; color: #04231a; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 4px 10px rgba(0,0,0,0.35); }
        .jba-range { width: 100%; margin-top: 1rem; accent-color: #f0b429; cursor: pointer; }
    

/* ===== Order button arrow + shine animation ===== */
.btn-gold { position: relative; overflow: hidden; text-decoration: none; }
.btn-gold .btn-arrow {
    display: inline-block;
    font-size: 1.15em;
    animation: arrowSlide 1.2s ease-in-out infinite;
}
.btn-gold:hover .btn-arrow { animation-duration: 0.6s; }
@keyframes arrowSlide {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}
.btn-gold::after {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    animation: btnShine 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes btnShine {
    0%   { left: -75%; }
    60%, 100% { left: 130%; }
}

/* ===== Hero slider: horizontal slide ===== */
.hs-slide-item {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .btn-gold .btn-arrow, .btn-gold::after { animation: none; }
    .hs-slide-item { transition: none; }
}