:root { 
            --header-h: 70px; /* keep header height in one place */
        }
        
        /* Ensure proper viewport handling */
        
        /* CSS for flip effect */
        /* .rotate-y-180 {
            transform: rotateY(180deg);
            transition: transform 0.5s ease;
        } */

        /* Use Tailwind's .relative (position) but keep perspective scoped to the flip-card only */
        .relative {
            position: relative;
        }

        .absolute {
            position: absolute;
        }

        /* Add a transition for the image flip */
        .object-cover {
            transition: transform 0.5s ease-in-out;
        }

        /* Flip card structure */
        /* .flip-card {
            perspective: 1000px;
            min-width: 0;
            min-height: 338px;
        } */

        /* .flip-card-inner {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s ease;
        } */

        /* Smooth transform for the slider inner wrapper; improves desktop animation.
           For mobile, scrollLeft updates are used instead of transform; scroll-behavior
           provides a smooth transition for programmatic scroll operations. */
        .slider-inner {
            will-change: transform, scroll-left;
            transition: transform 0.16s linear;
            scroll-behavior: smooth;
        }

        /* Scroll snap: make mobile swipe snap to one card per viewport */
        .slider-viewport {
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }

        /* .flip-card {
            scroll-snap-align: center;
            scroll-snap-stop: always;
        } */

        /* Keep card size/shape on mobile; centering is handled by JS padding so one
           card sits centered per swipe without forcing full-viewport widths. */

        /* .flip-card-inner.flipped {
            transform: rotateY(180deg);
        } */

        /* Ensure the front face stacks above the back when not flipped. This prevents
           the flipped-back overlay from visually covering the front image on mobile
           or in some browsers where stacking contexts can behave unexpectedly. */
        /* .flip-card-front {
            z-index: 20;
        }

        .flip-card-back {
            z-index: 10;
        } */

        /* Make sure images are visible and fill the card area */
        /* .flip-card-front img,
        .flip-card-back video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .flip-card-front {
            background-color: #ffffff;
        }

        .flip-card-back {
            z-index: 10;
            position: absolute;
            overflow: hidden;
        }

        .flip-card-back video {
            z-index: 1;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .flip-card-back::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 10;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.20) 100%);
            transition: opacity .25s ease-in-out;
            opacity: 1;
        }

        .flip-card-back.has-video::before {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.10) 100%);
        }

        .flip-card-front,
        .flip-card-back {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            position: absolute;
            inset: 0;
        }

        .flip-card-back {
            transform: rotateY(180deg);
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.6) 100%);
        } */

        /* @media (hover: hover) and (pointer: fine) {
            .flip-card:hover .flip-card-inner {
                transform: rotateY(180deg);
            }
        } */

        /* Disable the 3D flip animation on small screens — show the back as an overlay instead
       This keeps the card responsive on mobile while allowing taps to show the back content. */
        /* @media (max-width: 640px) {
            .flip-card-inner.flipped {
                transform: none !important;
            }

            .flip-card-back {
                transform: none !important;
                z-index: 20 !important;
                position: absolute !important;
                inset: 0 !important;
                opacity: 0;
                transition: opacity 0.28s ease-in-out;
            }

            .flip-card-inner.flipped .flip-card-back {
                opacity: 1;
            }

            .flip-card-front {
                z-index: 1 !important;
            }

            .flip-card-back video {
                z-index: 18 !important;
            }

            .flip-card:hover .flip-card-inner {
                transform: none !important;
            }
         } */
         
         .no-scrollbar {
             -ms-overflow-style: none;
             scrollbar-width: none;
         }
         
         .no-scrollbar::-webkit-scrollbar {
             display: none;
         }
         
        
         .scrollbar-thin {
             scrollbar-width: thin;
         }
         
         .scrollbar-thin::-webkit-scrollbar {
             width: 6px;
         }
         
         .scrollbar-thin::-webkit-scrollbar-track {
             background: #f1f1f1;
         }
         
         .scrollbar-thin::-webkit-scrollbar-thumb {
             background: #c1c1c1;
             border-radius: 3px;
         }