/* Your existing CSS styles */
        p,
        span {
            font-size: 15px;
        }

        body {
            font-family: 'Poppins';
            font-size: 15px;
            margin-bottom: 180px;
            
        }
        #main_products_div{
            margin-top: 180px;
        }

        h3 {
            font-size: 20px;
        }

        h5 {
            font-size: small;
        }

        .product-image-container {
            background-color: #f8f9fa;
            position: relative;
        }

        .product-image-badges .badge {
            font-size: 0.85rem;
            color: #495057;
            background-color: #e9ecef;
            border: 1px solid #dee2e6;
        }

        .carousel-control-prev,
        .carousel-control-next {
            filter: invert(100%);
        }

        .product-details {
            padding: 2rem;
        }

        .flavor-options .btn {
            border: 1px solid #dee2e6;
            margin-right: 0.5rem;
        }

        .flavor-options .btn.active {
            border-color: #212529;
            background-color: #f8f9fa;
        }

        .price-option-card {
            border: 1px solid #dee2e6;
            padding: 1rem;
            border-radius: 0.5rem;
            cursor: pointer;
            margin-bottom: 1rem;
        }

        .price-option-card.active {
            border-color: #0d6efd;
            background-color: #eaf5ff;
        }

        .price-option-card:hover {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .free-frother-banner {
            background-color: #8cc63f;
            color: white;
            padding: 0.75rem;
            text-align: center;
        }

        .footer-note {
            font-size: 0.8rem;
            color: #6c757d;
            text-align: center;
            margin-top: 1rem;
        }

        /* Custom CSS to style the price options */
        .price-option-card {
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            padding: 1.5rem;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* Styling for the active state */
        .price-option-card.active-price {
            border: 2px solid #007bff;
            /* Blue border to indicate active state */
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
            /* Subtle glow */
            background-color: #f0f8ff;
            /* Light blue background for emphasis */
        }


     

        .navbar-nav a {
            font-size: 12px;
            /* font-weight: bolder; */
        }

        .navbar-nav li a {
            padding: 6px;

        }


        /* Default: Desktop mega menu */
        .mega-menu .col-12 {
            min-width: 267px;
        }

        /* For small screens */
        @media (max-width: 768px) {
            .mega-menu {
                width: 100% !important;
                left: 0 !important;
            }

            .mega-menu .row {
                display: block !important;
                /* stack items */
            }

            .mega-menu .col-12,
            .mega-menu .col-sm-6,
            .mega-menu .col-md-4,
            .mega-menu .col-lg-2 {
                width: 100% !important;
                max-width: 100% !important;
                margin-bottom: 15px;
            }

            .mega-menu h5 {
                font-size: 16px;
                font-weight: bold;
                margin-top: 10px;
            }

            .mega-menu ul li a {
                font-size: 14px;
                padding-left: 15px;
            }
        }