body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .hero-bg-shape {
            position: absolute;
            top: -10%;
            right: -20%;
            width: 60%;
            height: 120%;
            background: linear-gradient(145deg, #ECFDF5, #A7F3D0); /* Green Gradient */
            border-radius: 45% 55% 70% 30% / 30% 30% 70% 70%;
            z-index: 0;
            animation: morph 15s ease-in-out infinite;
            opacity: 0.6;
        }
        @keyframes morph {
            0% { border-radius: 45% 55% 70% 30% / 30% 30% 70% 70%; }
            50% { border-radius: 30% 70% 30% 70% / 70% 45% 55% 30%; }
            100% { border-radius: 45% 55% 70% 30% / 30% 30% 70% 70%; }
        }
        .glassmorphism {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .parallax {
            transform: translateY(var(--parallax-offset));
            transition: transform 0.3s ease-out;
        }
        .product-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .product-card:hover {
            transform: translateY(-10px) rotate(2deg);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        .float {
            animation: float 3s ease-in-out infinite;
        }
        .float-slow {
            animation: float 6s ease-in-out infinite;
        }
        .float-fast {
            animation: float 2.5s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }
        #demo-canvas {
            width: 100%;
            height: 400px;
            border-radius: 1rem;
        }


        /* */

   .hsc-section-wrapper {
            position: relative; /* Added to contain pseudo-elements */
            overflow: hidden; /* Added to contain pseudo-elements */
            padding: 4rem 1rem;
            background-color: #ffffff; /* Clean white background */
        }

        /* Keyframes for the background animation */
        @keyframes hsc-move-bg {
            0% {
                transform: translate(-10vw, -10vh) rotate(0deg);
            }
            100% {
                transform: translate(110vw, 110vh) rotate(360deg);
            }
        }

        /* The moving background objects */
        .hsc-section-wrapper::before,
        .hsc-section-wrapper::after {
            content: '';
            position: absolute;
            border-radius: 20%;
            background-color: #88c592; /* Subtle gray for visibility on white */
            z-index: 1;
        }

        .hsc-section-wrapper::before {
            width: 300px;
            height: 300px;
            top: -50px;
            left: -50px;
            animation: hsc-move-bg 25s linear infinite;
        }

        .hsc-section-wrapper::after {
            width: 400px;
            height: 400px;
            bottom: -100px;
            right: -100px;
            animation: hsc-move-bg 35s linear infinite reverse;
        }

        .hsc-content-container {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
        }

        .hsc-title {
            color: #212529; /* Changed to dark color for white background */
            font-size: 2.25rem; /* 36px */
            font-weight: 700;
            text-align: center;
            margin-bottom: 2.5rem; /* 40px */
        }

        .hsc-cards-grid {
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: 2rem; /* 32px */
            flex-wrap: wrap;
        }

        .hsc-card {
            background-color: white;
            border-radius: 1rem; /* 16px */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            display: flex;
            overflow: hidden;
            width: 100%;
            max-width: 520px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

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

        .hsc-card__content {
            padding: 2rem; /* 32px */
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1 1 60%;
        }

        .hsc-card__title {
            font-size: 1.5rem; /* 24px */
            font-weight: 700;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .hsc-card__description {
            color: #666;
            margin-bottom: 1.5rem;
            line-height: 1.6;
            flex-grow: 1;
        }

        .hsc-card__button {
            display: inline-block;
            background-color: #007bff;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 500;
            text-align: center;
            transition: background-color 0.3s ease;
            width: fit-content;
        }

        .hsc-card__button:hover {
            background-color: #0056b3;
        }

        .hsc-card__image-wrapper {
            flex: 1 1 40%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 160px; /* Ensures image is visible on smaller card sizes */
        }

        .hsc-card__image {
            width: 200px;
            height: 200px;
            object-fit: cover;
            clip-path: circle(50% at 30% 50%); /* Creates the circular cut-in effect */
            transform: translateX(20%); /* Pulls the circle into the content area */
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
            .hsc-card {
                max-width: 450px;
            }
             .hsc-card__image {
                transform: translateX(10%);
            }
        }

        @media (max-width: 768px) {
            .hsc-section-wrapper {
                padding: 3rem 1rem;
            }
            .hsc-title {
                font-size: 1.875rem; /* 30px */
            }
             .hsc-card {
                flex-direction: column;
                max-width: 380px; /* A good width for single column cards */
            }
            .hsc-card__content {
                text-align: center;
                align-items: center;
            }
            .hsc-card__image-wrapper {
                order: -1; /* Move image to the top */
                padding-top: 1.5rem;
            }
            .hsc-card__image {
                width: 150px;
                height: 150px;
                 /* Reset clip-path and transform for stacked layout */
                clip-path: circle(50% at 50% 50%);
                transform: translateX(0);
            }
        }



          /* Custom styles for the moving background and overlay */
        #moving-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
        #content-overlay {
            position: relative;
            z-index: 10;
        }
        /* Setting the default font to Inter */
        body {
            font-family: 'Inter', sans-serif;
        }
        /* Ensure select text color is dark on light background */
        select {
            color: #17aa17; /* Gray 800 */
        }
        select option {
            background-color: white; /* Ensure options background is white */
        }



           .sidebar {
            transition: transform 0.3s ease;
        }
        .sidebar-hidden {
            transform: translateX(-100%);
        }
        .glassmorphism {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .hover-scale {
            transition: transform 0.2s ease;
        }
        .hover-scale:hover {
            transform: scale(1.03);
        }
        .dark-mode {
            background-color: #1e293b;
            color: #e2e8f0;
        }
        .dark-mode .card {
            background-color: #334155;
        }
        .dark-mode .glassmorphism {
            background: rgba(255, 255, 255, 0.05);
        }



        /* Simple reveal-on-scroll animation */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }


        .details-container {
            transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out, opacity 0.3s ease-in-out;
        }

       
        .category-circle {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        .category-circle:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
        


        /* Optional: Green splash background - replace with your actual image */
        .splash-background {
            background-image: url('mains.png'); /* Replace with your actual green splash image */
            background-repeat: no-repeat;
            background-position: top center; /* Adjust as needed */
            background-size: cover; /* Adjust as needed */
            opacity: 200%;
        }


#carousel img {
    object-fit: cover;
    object-position: center; /* Or 'top' if it's cutting off heads */
}