.dd-body {
            background-color: #f5f7ff;
            padding: 2rem;
        }

        .dd-section-title {
            text-align: center;
            margin-bottom: 3rem;
            color: #2c3e50;
            font-size: 2.5rem;
            position: relative;
        }

        .shadow-sm {
	box-shadow: 0 .125rem 1.25rem rgba(0, 0, 0, .075)!important;
}
.user-panel-sidebar-link {
	padding: 14px;
}

.user-panel-sidebar-link a {
	background: #fff none repeat scroll 0 0;
	color: #6c757c;
    text-decoration: none;
	display: inline-block;
	margin-bottom: 1px;
	padding: 10px 13px;
	width: 100%;
	font-weight: 400;
	border-radius: 2px;
}

.user-panel-sidebar-link a i {
	background: #262e44;
	width: 25px;
	height: 25px;
	display: inline-block;
	color: #fff;
	line-height: 25px;
	text-align: center;
	margin: 0 11px 0 0px;
	border-radius: 50px;
}

.user-panel-sidebar-link a:hover,
.user-panel-sidebar-link a.active {
	background: #e7ecf7 none repeat scroll 0 0;
}

.user-info-img {
	border-radius: 50px;
	height: 60px;
	width: 60px;
}

.user-panel-tab-view .nav {
	background: #fbfbfd none repeat scroll 0 0;
	border: none;
}

.user-panel-tab-view .nav .nav-item .nav-link {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: -moz-use-text-color -moz-use-text-color transparent;
	border-image: none;
	border-radius: 0;
	border-style: none none solid;
	border-width: medium medium 2px;
	color: #7a7e8a;
	height: 40px;
	padding: 7px 17px;
}

.user-panel-tab-view .nav .nav-item {
	margin: 0 0 0 24px;
}

.user-panel-tab-view .nav .nav-item .nav-link.active,
.user-panel-tab-view .nav .nav-item .nav-link:hover {
	background: transparent none repeat scroll 0 0 !important;
	border-bottom: 2px solid #3868fb;
	color: #3868fb;
}



        .dd-section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, #4a6bff, #ff6b6b);
            border-radius: 2px;
        }

        .dd-merchants-container {
            /* max-width: 1200px; */
            margin: 0 auto;
            padding: 0 20px;
        }

        .dd-logo img {
            height: 40px;
        }

        /* Remove the grid view and only use slider */
        .dd-merchants-grid {
            display: none;
        }

        /* Enhanced slider container */
        .dd-merchants-slider {
            padding: 20px 0 40px;
            overflow: hidden;
        }

        .dd-merchant-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            cursor: pointer;
            height: 100%;
            margin: 0 5px;
        }

        .dd-merchant-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .dd-merchant-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, #4a6bff, #ff6b6b);
        }

        .dd-card-image {
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .dd-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .dd-merchant-card:hover .dd-card-image img {
            transform: scale(1.1);
        }

        .dd-card-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: #ff6b6b;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            animation: dd-pulse 2s infinite;
        }

        @keyframes dd-pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        .dd-card-content {
            padding: 1.5rem;
        }

        .dd-merchant-name {
            font-size: 1.4rem;
            color: #2c3e50;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        .dd-merchant-category {
            display: inline-block;
            background-color: #e0e7ff;
            color: #4a6bff;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-bottom: 1rem;
        }

        .dd-merchant-description {
            color: #666;
            margin-bottom: 1.5rem;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .dd-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
            padding-top: 1rem;
        }

        .dd-rating {
            color: #ffc107;
            font-size: 0.9rem;
        }

        .dd-view-deals-btn {
            background: linear-gradient(to right, #4a6bff, #ff6b6b);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .dd-view-deals-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(74, 107, 255, 0.4);
        }

        /* Swiper slider styles */
        .dd-swiper-slide {
            height: auto;
            padding: 10px;
        }

        /* Responsive styles */
        @media (max-width: 768px) {
            .dd-section-title {
                font-size: 2rem;
            }
        }

        /* Floating animation for cards */
        @keyframes dd-float {
            0% {
                transform: translateY(0px);
            }

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

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

        .swiper-slide:nth-child(odd) .dd-merchant-card {
            animation: dd-float 6s ease-in-out infinite;
        }

        .swiper-slide:nth-child(even) .dd-merchant-card {
            animation: dd-float 6s ease-in-out infinite 1s;
        }

        /* Custom pagination bullets */
        .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: #ccc;
            opacity: 1;
        }

        .swiper-pagination-bullet-active {
            background: linear-gradient(to right, #4a6bff, #ff6b6b);
        }
    




    <!-- Mobile Header (visible only on mobile) -->
    
        /* Default - hide the header */
        .header-main {
            display: none;
        }

        /* Show only on mobile screens (typically 768px and below) */
        @media only screen and (max-width: 768px) {
            .header-main {
                display: block;
            }
        }

        /* Hide scrollbar but allow scrolling */
        .testimonial-slider-container {
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        .testimonial-slider-container::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari and Opera */
        }

        @media (max-width: 767px) {
            .testimonial-slider-container {
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
            }

            #testimonial-slider {
                display: flex;
                width: max-content;
            }

            #testimonial-slider>div {
                scroll-snap-align: start;
            }
        }
    


    <!-- the font css starts -->


    
        html {
            font-size: 16px;
            /* Base font size */
            font-family: "Poppins", sans-serif;
        }

        @media (max-width: 768px) {
            html {
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            html {
                font-size: 13px;
            }
        }
    
    
        h1 {
            font-size: 2.5rem;
            /* 40px on desktop */
            line-height: 1.2;
        }

        h2 {
            font-size: 2rem;
            /* 32px on desktop */
            line-height: 1.25;
        }

        h3 {
            font-size: 1.5rem;
            /* 24px on desktop */
            line-height: 1.3;
        }

        /* Mobile adjustments */
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }

            h2 {
                font-size: 1.75rem;
            }

            h3 {
                font-size: 1.25rem;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 1.75rem;
            }

            h2 {
                font-size: 1.5rem;
            }
        }
    
    
        p {
            font-size: 1rem;
            /* 16px on desktop */
            line-height: 1.6;
        }

        /* Small text */
        .text-sm {
            font-size: 0.875rem;
            /* 14px */
        }

        /* Extra small text */
        .text-xs {
            font-size: 0.75rem;
            /* 12px */
        }

        /* Medium text */
        .text-md {
            font-size: 1.125rem;
            /* 18px */
        }

        /* Large text */
        .text-lg {
            font-size: 1.25rem;
            /* 20px */
        }

        /* Extra large text */
        .text-xl {
            font-size: 1.5rem;
            /* 24px */
        }
    
    
        .btn {
            font-size: 1rem;
            font-weight: 600;
        }

        .btn-lg {
            font-size: 1.125rem;
        }

        .btn-sm {
            font-size: 0.875rem;
        }

        @media (max-width: 768px) {
            .btn {
                font-size: 0.9375rem;
            }

            .btn-lg {
                font-size: 1rem;
            }
        }
    
    
        .nav-item {
            font-size: 1rem;
        }

        @media (max-width: 1024px) {
            .nav-item {
                font-size: 0.9375rem;
            }
        }

        @media (max-width: 768px) {
            .nav-item {
                font-size: 0.875rem;
            }
        }
    
    
        .card-title {
            font-size: 1.125rem;
        }

        .card-text {
            font-size: 0.9375rem;
        }

        .card-price {
            font-size: 1.25rem;
        }

        @media (max-width: 768px) {
            .card-title {
                font-size: 1rem;
            }

            .card-text {
                font-size: 0.875rem;
            }

            .card-price {
                font-size: 1.125rem;
            }
        }
    
    
        .hero-title {
            font-size: 3rem;
            line-height: 1.1;
        }

        .hero-subtitle {
            font-size: 1.5rem;
        }

        @media (max-width: 1024px) {
            .hero-title {
                font-size: 2.5rem;
            }

            .hero-subtitle {
                font-size: 1.25rem;
            }
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1.125rem;
            }
        }
    


    <!-- the font css ends -->





    
        .product-slider-container {
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE/Edge */
        }

        .product-slider-container::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari */
        }

        .product-slider-track {
            display: flex;
            transition: transform 0.5s ease-out;
            will-change: transform;
        }

        .product-card {
            scroll-snap-align: start;
            flex: 0 0 auto;
        }

        @media (max-width: 640px) {
            .product-card {
                width: 80vw;
                /* Show 2 cards at a time on mobile */
            }
        }
    

    
        /* Hide navigation on desktop */
        .mobile-nav {
            display: none;
        }

        /* Mobile styles */
        @media only screen and (max-width: 767px) {
            .mobile-nav {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                background: white;
                padding: 10px 0;
                box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
                z-index: 100;
                border-top: 1px solid #eee;
            }

            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-decoration: none;
                color: #666;
                font-size: 11px;
                font-weight: 500;
                padding: 6px 10px;
                border-radius: 10px;
                transition: all 0.2s ease;
                width: 20%;
                text-align: center;
            }

            .nav-icon {
                font-size: 20px;
                margin-bottom: 4px;
                transition: all 0.2s ease;
            }

            .nav-item.active {
                color: #4361ee;
            }

            .nav-item.active .nav-icon {
                transform: translateY(-3px);
                color: #4361ee;
            }

            /* Special style for Predict & Win */
            .nav-item.predict-win {
                color: #f72585;
            }

            .nav-item.predict-win .nav-icon {
                color: #f72585;
            }

            .nav-item.predict-win.active .nav-icon {
                animation: pulse 1.5s infinite;
            }

            @keyframes pulse {
                0% {
                    transform: translateY(-3px) scale(1);
                }

                50% {
                    transform: translateY(-3px) scale(1.1);
                }

                100% {
                    transform: translateY(-3px) scale(1);
                }
            }

            .content {
                padding: 20px;
            }
        }

        /* Demo content */
        .content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px;
        }

        h1 {
            margin-bottom: 20px;
        }

        p {
            margin-bottom: 15px;
            line-height: 1.6;
        }
    

    
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        .play-button {
            transition: all 0.3s ease;
            opacity: 0.9;
        }

        .play-button:hover {
            transform: scale(1.1) !important;
            opacity: 1;
            background-color: rgba(255, 255, 255, 0.95);
        }

        video {
            transition: transform 0.5s ease;
            width: 288px;
        }

        .group:hover video {
            transform: scale(1.05);

            .merchant-slider .swiper-pagination-bullet {}
    


    
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        /* Global Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }

            to {
                transform: translateX(0);
            }
        }

        @keyframes scaleIn {
            from {
                transform: scale(0.9);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }

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

            100% {
                transform: transl
                    /* Firefox */
            }

            .scrollbar-hide::-webkit-scrollbar {
                display: none;
                /* Chrome, Safari and Opera */
            }

            /* Card Navigation */
            .card-container {
                position: relative;
                overflow: hidden;
            }

            ateY(0px);
        }
        }

        /* Hide scrollbar but keep functionality */
        .scrollbar-hide {
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        .scrollbar-hide::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari and Opera */
        }

        /* Card Navigation */
        .card-container {
            position: relative;
            overflow: hidden;
        }

        .card-scroll {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .card-scroll::-webkit-scrollbar {
            display: none;
        }

        .nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            z-index: 10;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        .nav-butt .category-card {
            on:hover {
                opacity: 1;
            }

            .nav-but ton.left {
                left: 10px;
            }

            .nav-button.right {
                right: 10px;
            }

            .nav-bu tton svg {
                width: 20px;
                height: 20px;
                color: #333;
            }

            /* Header Animations */
            .hea der-logo {
                animation: fadeIn 1s ease-out;

                /* Category Animations */
                .category-card {
                    transition: all 0.3s ease;
                    animation: scaleIn 0.5s ease-out backwards;
                }

                .category-ca @keyframes pulse {
                    rd:hover {
                        transform: transla teY(-5px);
                        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                    }

                    /* Deal Card Ani    mations */
                    .d eal-card {
                        transition: all 0.3s ease;
                        animation: scaleIn 0.5s ease-out backwards;
                    }

                    .deal-ca rd:hover {
                        transform: translateY(-5px) scale(1.02);
                        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
                    }

                    .de al-badge {
                        animation: float 3s ease-in-out infinite;

                        .testimonial-card:hover {}

                        /* Flash Deal Ani    mations */
                        .flash-deal-timer {
                            animation: pulse 2s infinite;
                        }

                        @keyfram es pulse {
                            0% {
                                transform:
                                    scale(1);
                            }

                            50% {
                                transform: scale(1.05);
                            }

                            100% {
                                transform: scale(1);
                            }

                            transform: scale(1.1);
                            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
                        }

                        /* Footer Animations */
                        .footer-link {
                            transition: all 0.3s ease;
                            position: relative;
                        }

                    }

                    /* Testimonial Ani    mations */
                    .testimon ial-card {
                        transition: all 0.3s ease;
                    }

                    .testimonial-ca rd:hover {
                        transform: transla teY(-5px);
                        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                    }

                    /* Success Story Ani    mations */
                    .succ ess-card {
                        transition: all 0.3s ease;
                        animation: fadeIn 0.8s ease-out backwards;
                    }

                    .success-ca rd:hover {
                        transform: translateY(-5px);
                        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                    }


                }

                .play-button {
                    transition: all 0.3s ease;
                }

                .play-butt on:hover {
                    transform: s cale(1.1);
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

                    @keyframes spin {}

                    /* Footer Ani    mations */
                    .footer-link {
                        transition: all 0.3s ease;
                        position: relative;
                    }

                    .footer-link::after {
                        content: '';
                        position: absolute;
                        bottom: -2px;
                        left: 0;
                        width: 0;

                        100% {
                            transform: translateY(0);
                        }

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

                    /* Pulse animation */
                    @keyframes pulse {

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

                        50% {
                            transform: scale(1.05);
                            opacity: 0.8;
                        }
                    }

                    /* Bounce animation */
                    @keyframes bounce {

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

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

                    /* Shine effect */
                    @keyframes shine {
                        0% {
                            background-position: -100%;
                        }

                        100% {
                            background-position: 100%;
                        }
                    }

                    /* Apply animations */
                    .animate-float {
                        animation: float 3s ease-in-out infinite;
                    }

                    .animate-float-delay {
                        animation: float 3s ease-in-out infinite 0.5s;
                    }

                    .animate-pulse {
                        animation: pulse 2s ease-in-out infinite;
                    }

                    .animate-bounce {
                        animation: bounce 1s ease-in-out infinite;
                    }

                    /* Button hover effects */
                    .btn-hover-grow {
                        transition: transform 0.3s ease;
                    }

                    .btn-hover-grow:hover {
                        transform: scale(1.05);
                    }

                    /* Card hover effects */
                    .card-hover {
                        transition: all 0.3s ease;
                    }

                    .card-hover:hover {
                        transform: translateY(-5px);
                        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
                    }

                    /* Gradient text */
                    .text-gradient {
                        background-clip: text;
                        -webkit-background-clip: text;
                        color: transparent;
                        background-image: linear-gradient(to right, var(--primary), var(--accent));
                    }

                    @keyframes fadeInUp {
                        from {
                            opacity: 0;
                            transform: translateY(20px);
                        }

                        to {
                            nd: white;
                            transition: width 0.3s ease;
                        }

                        .footer-link:hover::after {
                            width: 100%;
                        }

                        /* Scroll Reveal Animation */
                        .reveal {
                            opacity: 0;
                            transform: translateY(30px);
                            transition: all 0.8s ease;
                        }

                        .reveal.active {
                            opacity: 1;
                            overflow: hidden;
                            transform: translateY(0);
                        }

                        /* Loading Animation */
                        .loading-spinner {
                            animation: spin 1s linear infinite;
                        }

                        @keyframes spin {
                            from {
                                transform: rotate(0deg);
                            }

                            to {
                                transform: rotat opacity: 1;
                            }
                        }

                        .animate-fade-in-up {
                            animation: fadeInUp 0.8s ease-out forwards;
                        }

                        .animate-count-up {
                            animation: countUp 0.8s ease-out forwards;
                            e(360deg);
                        }
                    }
    

    
        /* Default styles - hidden on all screens */
        .mobile-header {
            display: none;
        }

        /* Show only on mobile devices (typically screens less than 768px) */
        @media only screen and (max-width: 767px) {
            .mobile-header {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 1000;
                padding: 12px 15px;
                background-color: #ffffff;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            }

            .header-top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 4px;
            }

            .logo-container {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .menu-icon {
                display: flex;
                flex-direction: column;
                gap: 3px;
                cursor: pointer;
            }

            .menu-line {
                width: 18px;
                height: 2px;
                background-color: #000000;
            }

            .logo {
                font-weight: 800;
                font-size: 20px;
                color: #000000;
                letter-spacing: -0.5px;
            }

            .header-icons {
                display: flex;
                gap: 15px;
            }

            .header-icons i {
                font-size: 18px;
                color: #333333;
            }

            .address {
                font-size: 12px;
                color: #666666;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-left: 30px;
                /* Align with logo text */
            }

            .search-container {
                position: relative;
            }

            .search-bar {
                width: 100%;
                padding: 10px 15px 10px 40px;
                border: none;
                border-radius: 8px;
                background-color: #f5f5f5;
                color: #333333;
                font-size: 14px;
                outline: none;
            }

            .search-icon {
                position: absolute;
                left: 15px;
                top: 50%;
                transform: translateY(-50%);
                color: #999999;
                font-size: 14px;
            }

            .search-bar::placeholder {
                color: #999999;
                font-weight: 400;
            }


        }
    

    
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        /* Floating animation */
        @keyframes float {

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

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

        /* Pulse animation */
        @keyframes pulse {

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

            50% {
                transform: scale(1.
                }

                100% {
                    opacity: 1;
                }
            }

            /* Ensure vertical centering */
            .flex-col.items-center {
                justify-content: center;
            }

            /* Add some spacing between steps on mobile */
            @media (max-width: 767px) {
                .flex-col.items-center {
                    05);
                opacity: 0.8;
            }
        }

        /* Bounce animation */
        @keyframes bounce {
            .brand-carousel::-webkit-scrollbar,


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

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

        /* Shine effect */
        transform: translateY(0);
        }

        .product-slider-container {
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

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

        @keyframes shine {
            0% {
                background-position: -100%;
            }

            100% {
                background-position: 100%;
            }
        }

        /* Apply animations                50% {
                    transform: translateY(-20px) translateX(10px);
                }
            }

            @keyframes float-delay {

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

                50% {
                    transform: translateY(-15px) translateX(-5px);
                }
            }

            @keyframes shine {
                0% {
                    left: -100%;
                }

                100% {
                    left: 100%;
                }
            }

            .animate-float {
                animation: float 3s ease-in-out infinite;
            }

            .animate-float-delay {
                animation: float 3s ease-in-out infinite 0.5s;
            }

            .animate-shine {
                animation: shine 1.5s ease-in-out infinite;
            }

            .perspective-1000 {
                perspective: 1000px;
            }

            .transform-style-preserve-3d {
                transform-style: preserve-3d;
            }

            .backface-hidden {
                backface-visibility: hidden;
            }

            .group-hover\:rotate-y-15:hover {
                transform: rotateY(15deg);
            }

            /* Custom Animations */
        @keyframes spin-slow {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes pulse-slow {
            te-float {
                animation: float 3s ease-in-out infinite;
            }

            .animate-float-delay {
                animation: float 3s ease-in-out infinite 0.5s;
            }

            .animate-pulse {
                animation: pulse 2s ease-in
            }

            -out infinite;
        }

        .animate-bounce {
            animation: bounce 1s ease-in-out infinite;
        }

        /* Button hover effects */
        .btn-hover-grow {
            transition: transform 0.3s ease;
        }

        .btn-hover-grow:hover {
            transform: scale(1.05);
        }

        }

        @keyframes progress {
            0% {
                width: 0%;
            }

            100% {
                width: 100%;
            }
        }

        /* Card hover effects */
        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
    
    
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        @keyframes fadeInUp {
            from {
                font-size: 2rem;
                opacity: 0;
                transform: translateY(20px);
            }

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

        @keyframes countUp {
            from {
                transform: translateY(100%);
            }

            to {
                transform: translateY(0);
            }
        }

        @keyframes underlineExpand {
            from {
                width: 0;
            }

            to {
                width: 100%;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }

        .animate-count-up {
            animation: countUp 0.8s ease-out forwards;
        }

        .animate-step {
            animation: fadeInUp 0.6s ease-out forwards;
        }

        .animate-pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.7;
            }

            100% {
                opacity: 1;
            }
        }

        /* Ensure vertical centering */
        .flex-col.items-center {
            justify-content: center;
        }

        /* Add some spacing between steps on mobile */
        @media (max-width: 767px) {
            .flex-col.items-center {
                margin-bottom: 2rem;
            }
        }
    
    
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        .brand-carousel::-webkit-scrollbar,
        .product-carousel::-webkit-scrollbar {
            display: none;
        }

        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease-out;
        }

        .reveal.active {
            opacity: 1;
            overflow: hidden;
            transform: translateY(0);
        }
    
    
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        .product-slider-container {
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .product-slider-container::-webkit-scrollbar {
            display: none;
        }
    
    
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        /* Custom animations and 3D effects */
        @keyframes float {

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

            50% {
                transform: translateY(-20px) translateX(10px);
            }
        }

        @keyframes float-delay {

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

            50% {
                transform: translateY(-15px) translateX(-5px);
            }
        }

        @keyframes shine {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        .animate-float-delay {
            animation: float 3s ease-in-out infinite 0.5s;
        }

        .animate-shine {
            animation: shine 1.5s ease-in-out infinite;
        }

        .perspective-1000 {
            perspective: 1000px;
        }

        .transform-style-preserve-3d {
            transform-style: preserve-3d;
        }

        .backface-hidden {
            backface-visibility: hidden;
        }

        .group-hover\:rotate-y-15:hover {
            transform: rotateY(15deg);
        }
    
    
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        /* Custom Animations */
        @keyframes spin-slow {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes pulse-slow {

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

            50% {
                transform: scale(1.03);
                opacity: 0.9;
            }
        }

        @keyframes float {

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

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

        @keyframes progress {
            0% {
                width: 0%;
            }

            100% {
                width: 100%;
            }
        }

        .animate-spin-slow {
            animation: spin-slow 2.5s linear infinite;
        }

        .animate-pulse-slow {
            animation: pulse-slow 2s ease-in-out infinite;
        }

        .animate-float {
            animation: float 2s ease-in-out infinite;
        }

        .animate-float-delay {
            animation: float 2s ease-in-out infinite 0.5s;
        }

        .animate-progress {
            animation: progress 2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
        }
    
    
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        html {
            font-family: "Poppins", sans-serif;
        }

        h1 {
            font-size: 2.5rem;
            line-height: 1.2;
        }

        h2 {
            font-size: 2rem;
            line-height: 1.25;
        }

        h3 {
            font-size: 1.5rem;
            line-height: 1.3;
        }

        p {
            font-size: 1rem;
            line-height: 1.5;
        }

        @media (min-width: 768px) {
            h1 {
                font-size: 3rem;
            }

            h2 {
                font-size: 2.5rem;
            }
        }