 <!-- Custom CSS for Color, Size, and Alignment --><style>
        :root {
            /* Color Variables */
            --main-bg: #0e2949; /* Deep Corporate Blue */
            --main-text: #ffffff;
            --main-text-light: #cccccc;
            --accent-color: #1abc9c; /* Teal/Aqua */
            --secondary-bg: #ffffff; /* UPDATED: Changed from light gray to white */
            --shadow-color: rgba(0, 0, 0, 0.15);
        }

        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--secondary-bg); /* Now uses white */
            color: #333;
        }
        
        /* ------------------- PRODUCTS CAROUSEL STYLES ------------------- */
        .products-section {
            padding: 80px 20px;
            text-align: center;
        }
        
        .section-header {
            max-width: 800px;
            margin: 0 auto 50px;
        }

        .section-title {
            font-size: 2.5em;
            font-weight: 800;
            color: var(--main-bg);
            margin-bottom: 10px;
        }

        .section-subtitle {
            font-size: 1.2em;
            font-weight: 500;
            color: var(--accent-color);
            margin-bottom: 30px;
        }

        /* Carousel Container */
        .carousel-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            overflow: hidden; /* Crucial for carousel functionality */
            border-radius: 12px;
        }

        /* Carousel Track - Holds all slides */
        .carousel-track {
            display: flex;
            transition: transform 0.5s ease-in-out;
            gap: 20px; /* Space between cards */
            padding-bottom: 20px;
            will-change: transform; /* Performance optimization */
        }
        
        /* Product Card (Slide) */
        .product-card {
            /* Desktop: 100% width for full-slide view, effectively showing 1 product at a time */
            flex: 0 0 100%; 
            background-color: var(--main-text); 
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 20px var(--shadow-color);
            /* NEW: Side-by-side layout for desktop */
            display: flex;
            flex-direction: row; 
            text-align: left;
            min-height: 400px; /* Ensure sufficient height for the side-by-side view */
        }

        .product-image-wrapper {
            /* NEW: 50% width for desktop image */
            width: 50%;
            height: auto;
            max-height: 500px; 
            overflow: hidden;
        }
        .product-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        .product-card:hover .product-image-wrapper img {
            transform: scale(1.05);
        }

        .product-content {
            /* NEW: 50% width for desktop content */
            width: 50%;
            padding: 40px; 
            flex-grow: 1; 
            display: flex;
            flex-direction: column;
            justify-content: center; /* Center content vertically */
        }

        .product-content h3 {
            font-size: 1.6em;
            color: var(--main-bg);
            margin: 0 0 5px; /* Reduced margin to bring tag closer */
            font-weight: 700;
        }
        
        /* Styling for the commodity tag with reduced padding */
        .product-tag {
            display: inline-block; /* Ensures the background only covers text + padding */
            font-size: 0.8em; 
            font-weight: 700;
            color: var(--accent-color);
            background-color: rgba(26, 188, 156, 0.1); 
            padding: 2px 6px; /* Tighter padding */
            border-radius: 4px;
            margin-bottom: 15px; 
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .product-content p {
            font-size: 0.95em;
            color: #555;
            margin-bottom: 20px;
            flex-grow: 1;
        }

        /* CTA Button Group - Desktop default (Row) */
        .cta-group {
            display: flex;
            gap: 15px;
            margin-top: auto; 
        }

        .cta-button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 15px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            flex-grow: 1;
            transition: background-color 0.3s, transform 0.1s;
        }

        /* Call Button (Primary Accent) */
        .cta-call {
            background-color: var(--accent-color);
            color: var(--main-bg);
            box-shadow: 0 4px 10px rgba(26, 188, 156, 0.4);
        }
        .cta-call:hover {
            background-color: #16a085;
            transform: translateY(-1px);
        }

        /* WhatsApp Button (Secondary/Brand Color) */
        .cta-whatsapp {
            background-color: #25D366; /* WhatsApp Green */
            color: var(--main-text);
            box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4);
        }
        .cta-whatsapp:hover {
            background-color: #128C7E;
            transform: translateY(-1px);
        }
        
        .cta-button i {
            margin-right: 8px;
        }

        /* ------------------- NEW TEXT NAVIGATION CONTROLS ------------------- */
        
        /* Control Container (Below the carousel) */
        .carousel-controls {
            display: flex;
            justify-content: center;
            margin-top: 40px; /* Space below the carousel track */
            gap: 20px;
        }
        
        /* Text Buttons Styling */
        .carousel-text-btn {
            padding: 12px 30px;
            font-size: 1em;
            font-weight: 600;
            border: 2px solid var(--accent-color);
            border-radius: 8px;
            cursor: pointer;
            background-color: var(--main-bg);
            color: var(--accent-color);
            transition: background-color 0.3s, color 0.3s, transform 0.1s;
        }
        .carousel-text-btn:hover {
            background-color: var(--accent-color);
            color: var(--main-bg);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(26, 188, 156, 0.4);
        }
        .carousel-text-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: #ccc;
            border-color: #ccc;
            color: #777;
            transform: none;
            box-shadow: none;
        }

        /* ------------------- MOBILE RESPONSIVENESS ------------------- */
        @media (max-width: 900px) {
            .products-section {
                padding: 50px 0; 
            }
            .section-title {
                font-size: 2em;
            }
            .section-subtitle {
                font-size: 1em;
                padding: 0 20px;
            }

            .carousel-container {
                padding: 0 20px; 
            }
            
            /* Mobile: Stacks image over text */
            .product-card {
                flex: 0 0 100%; 
                width: 100%;
                flex-direction: column; /* Stacked view on mobile */
                min-height: auto;
            }
            /* Mobile: full width for both image and text */
            .product-image-wrapper, .product-content {
                width: 100%; 
            }
            .product-content {
                padding: 25px 20px;
            }
            
            /* Smaller font size for product titles on mobile */
            .product-content h3 {
                font-size: 1.2em;
            }
            /* Ensure tag remains small on mobile */
            .product-tag {
                font-size: 0.7em;
                margin-bottom: 10px;
            }
            
            /* CTA buttons: Keep them small and side-by-side on mobile, allowing wrap for safety */
            .cta-group {
                display: flex;
                flex-direction: row; /* Ensure side-by-side (reverts previous stacking) */
                flex-wrap: wrap; /* Safety: allows wrapping if screen is tiny */
                justify-content: center; /* Center buttons if they don't fill the width */
                gap: 10px; /* Reduced gap for small screens */
            }
            .cta-button {
                flex: 0 0 45%; /* Force small, roughly equal width (45% each + gap fits under 100%) */
                max-width: 150px; /* Max size restriction */
                padding: 8px 12px; /* Smaller padding */
                font-size: 0.85em; /* Smaller font size */
                margin-bottom: 10px; /* Space in case buttons wrap to a new line */
            }

            /* Button adjustments for usability on touch devices */
            .carousel-controls {
                margin-top: 20px;
            }
        }
    </style>