h1 {
            font-size: 2.25rem; /* text-4xl */
            font-weight: 700; /* font-bold */
            color: #1f2937; /* text-gray-800 */
            margin-bottom: 2rem; /* mb-8 */
            text-align: center;
        }

        /* Search Container Styles */
       .search2{
        width: 480px;
         height: 25px; 
         font-style: 16px;
         padding-top: 25px;
         padding-bottom: 25px;
         padding-left: 10px;
         border-left-width: 3px;
         margin-right: 0px;
         margin-left: 0px;
         margin-bottom: 20px;
         border-radius: 20px;
         color: #31b9a8;
         border: solid;
         border-color: #31b9a8;
         font-size: 18px;
         letter-spacing: 0.062em;
         background-image: url("");
         outline: none;
       }

        @media (max-width: 640px) { /* sm: breakpoint */
            /*.search-section-sw {
                
                
            }*/
            .search2 {
                flex-grow: 1; /* Allow input to take available space */
                width: 350px;
                
                
            }
             
            
         
            
               
             }
        

        /* Custom CSS for the cards container */
        #cardsbuy {
            display: flex;
            flex-wrap: nowrap; /* Force horizontal layout on smaller screens */
            justify-content: flex-start; /* Align items to start for scrolling */
            gap: 1.5rem; /* gap-6 */
            width: 100%; /* Ensure it tries to take full width */
            min-width: 20rem; /* NEW: Prevent container from shrinking below a certain point on mobile */
            max-width: 100vw; /* Take full viewport width for scrolling */
            padding: 0 1rem; /* Add padding to sides for aesthetic scrolling */
            overflow-x: auto; /* Enable horizontal scrolling */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
            /* Remove margin-left/right auto for mobile scrolling */
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 12px;
        }

        /* Styles for individual cards */
        .product-card {
            min-width: 18rem; /* Minimum width for cards on mobile to ensure readability */
            width: 260px; /* Make cards nearly full width of viewport on mobile, considering padding */
            max-width: 20rem; /* max-w-xs (320px) - still applies if viewport is very wide but single column */
            background-color: #ffffff; /* bg-white */
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
            overflow: hidden;
            flex-shrink: 0; /* Prevent cards from shrinking */
            display: flex;
            flex-direction: column;
            margin-bottom: 12px;
            padding-bottom: 5px;
        }

        /* Responsive adjustments for cards container and cards for larger screens */
        @media (min-width: 768px) { /* md: breakpoint and up */
            
                        
            #cardsbuy {
                flex-wrap: wrap; /* Allow wrapping to multiple columns */
                justify-content: center; /* Center items in multi-column layout */
                max-width: 80rem; /* max-w-5xl */
                overflow-x: unset; /* Disable horizontal scrolling */
                padding: 0; /* Remove horizontal padding for multi-column layout */
                margin-left: auto; /* Re-center the container */
                margin-right: auto;
                min-width: unset; /* Reset min-width for larger screens */
            }

            .product-card {
                width: calc(50% - 1.5rem); /* sm:w-[calc(50%-1.5rem)] */
                min-width: unset; /* Remove min-width for larger screens */
            }
        }
        @media (min-width: 1024px) { /* lg: breakpoint and up */
            .product-card {
                width: calc(33.33% - 1.5rem); /* md:w-[calc(33.33%-1.5rem)] */
            }
        }
        @media (min-width: 1280px) { /* xl: breakpoint and up (adjust as needed for 4 columns) */
             .product-card {
                width: calc(25% - 1.5rem); /* lg:w-[calc(25%-1.5rem)] */
            }
        }


        /* Image Section */
        .product-image-section {
            position: relative;
        }

        .product-image {
            width: 100%;
            height: 400px;
            display: block;
            object-fit: cover;
            border-top-left-radius: 0.75rem; /* rounded-t-xl */
            border-top-right-radius: 0.75rem; /* rounded-t-xl */
        }

        /* Badge Overlay */
        .product-badge {
            position: absolute;
            top: 0.75rem; /* top-3 */
            left: 0.75rem; /* left-3 */
            background-color: #facc15; /* bg-yellow-400 */
            color: #1f2937; /* text-gray-800 */
            font-size: 0.75rem; /* text-xs */
            font-weight: 600; /* font-semibold */
            padding: 0.25rem 0.75rem; /* px-3 py-1 */
            border-radius: 9999px; /* rounded-full */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
        }

        /* Content Section */
        .product-content {
            background-color: #ffffff; /* bg-red-700 */
            padding: 0px;
            color: #000000; /* text-white */
            text-align: center;
            border-bottom-left-radius: 0.75rem; /* rounded-b-xl */
            border-bottom-right-radius: 0.75rem; /* rounded-b-xl */
            flex-grow: 1; /* Allow content to grow and fill space */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Distribute content */
        }

        .product-description {
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 1rem; /* text-base */
            line-height: 1.5; /* leading-relaxed */
         

        }

        /* Button Link */
        .buy-button {
            display: inline-block;
            background-color: #14b8a6; /* bg-teal-500 */
            color: #ffffff; /* text-white */
            font-weight: 600; /* font-semibold */
            margin-right:30px ;
            margin-left: 30px;
            padding: 0.75rem 2rem; /* py-3 px-8 */
            border-radius: 9999px; /* rounded-full */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
            transition: background-color 200ms ease-in-out; /* transition-colors duration-200 */
            text-decoration: none; /* Remove underline from link */
            outline: none; /* Remove default focus outline */
        }

        .buy-button:hover {
            background-color: #0d9488; /* hover:bg-teal-600 */
        }

        .buy-button:focus {
            outline: 2px solid transparent; /* focus:outline-none */
            outline-offset: 2px;
            box-shadow: 0 0 0 2px #14b8a6; /* focus:ring-2 focus:ring-teal-500 */
            box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.75); /* focus:ring-opacity-75 */
        }

        /* Tags Section */
        .product-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem; /* gap-2 */
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .product-tag {
            background-color: #fcd34d; /* bg-yellow-500 */
            color: #1f2937; /* text-gray-800 */
            font-size: 0.75rem; /* text-xs */
            font-weight: 500; /* font-medium */
            padding: 0.25rem 1rem; /* px-4 py-1 */
            border-radius: 9999px; /* rounded-full */
        }