/* Navbar styling with sticky positioning */
        .navbar {
            background: linear-gradient(45deg, #4caf50, #8bc34a); /* Green gradient background */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow */
            position: sticky; /* Make the navbar sticky */
            top: 0; /* Stick to the top of the viewport */
            z-index: 1030; /* Ensure navbar stays on top of other elements */
            transition: all 0.3s ease; /* Smooth transition for any changes */
            width: 100%; /* Ensure full width */
        }

        /* Add a slight padding change when scrolling for visual feedback */
        .navbar.scrolled {
            padding-top: 8px;
            padding-bottom: 8px;
            background: linear-gradient(45deg, #388e3c, #7cb342); /* Slightly darker gradient when scrolled */
        }

        /* Logo styling */
        .navbar-brand {
            font-weight: bold;
            color: #ffffff; /* White text for logo */
            font-size: 1.4rem;
            transition: transform 0.3s ease; /* Smooth transform effect on hover */
        }

        .navbar-brand:hover {
            transform: scale(1.1); /* Slight scale on hover */
        }

        /* Nav link styling */
        .nav-link {
            color: #ffffff !important; /* White color for the links */
            font-size: 1rem;
            margin-right: 15px;
            font-weight: 500;
            position: relative;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        /* Nav link hover effect */
        .nav-link:hover {
            color: #f0f0f0 !important; /* Slightly lighter white on hover */
            transform: translateY(-3px); /* Slight upward shift on hover */
        }

        /* Animated underline effect for nav links */
        .nav-link::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #ffffff;
            transition: width 0.3s ease;
        }

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

        /* Active nav link styling */
        .nav-link.active {
            color: #ffffff !important;
            font-weight: 600;
        }

        .nav-link.active::after {
            width: 100%;
        }

        /* Navbar links should align to the right */
        .navbar-nav {
            margin-left: auto;
        }

        /* Navbar toggler (hamburger menu) styling */
        .navbar-toggler {
            border: none;
            padding: 10px;
            outline: none;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
        }

        .navbar-toggler:focus {
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        /* Responsive styling for smaller screens */
        @media (max-width: 992px) {
            .navbar-collapse {
                background-color: rgba(76, 175, 80, 0.95);
                border-radius: 0 0 10px 10px;
                padding: 10px 0;
                margin-top: 10px;
            }
            
            .nav-link {
                padding: 10px 20px;
                margin-right: 0;
            }
            
            .nav-link:hover {
                background-color: rgba(255, 255, 255, 0.1);
                transform: none;
            }
            
            .nav-link::after {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .navbar-brand {
                font-size: 1.2rem; /* Slightly smaller logo on mobile */
            }

            .nav-link {
                font-size: 1rem; /* Ensure legibility on mobile */
            }
        }
        
       
        
        .floating-cart:hover {
            box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
            transform: translateY(-50%) scale(1.05);
        }
        
        .cart-icon {
            position: relative;
            color: white;
            text-decoration: none;
            font-size: 24px;
        }