:root {
        --primary-green: #1B4332;
        --accent-green: #2D6A4F;
        --mint: #95d5b2;
    }

    .fw-800 { font-weight: 800; }
    .fw-600 { font-weight: 600; }
    .text-mint { color: var(--mint); }
    .btn-success { background-color: var(--primary-green) !important; border-color: var(--primary-green) !important; }
    .btn-mint { background-color: var(--mint); color: var(--primary-green); border-radius: 50px; border: none; }
    .btn-mint:hover { background-color: white; color: var(--primary-green); }

    /* Slider Fixes */
    .carousel-item {
        height: 75vh; /* Standard laptop height */
        background: #000;
    }

    .slider-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to right, rgba(27, 67, 50, 0.8), transparent);
        z-index: 1;
    }

    .carousel-item img {
        height: 100%;
        object-fit: cover;
        opacity: 0.6;
        animation: kenburns 15s infinite alternate;
    }

    @keyframes kenburns {
        from { transform: scale(1); }
        to { transform: scale(1.1); }
    }

    .carousel-caption {
        z-index: 2;
        top: 30%;
        bottom: auto;
        text-align: left;
    }

    /* Responsive Mobile Adjustments */
    @media (max-width: 991px) {
        .carousel-item { height: 60vh; }
        .carousel-caption { 
            top: 20%; 
            text-align: center; 
            left: 5%; 
            right: 5%; 
        }
        .display-3 { font-size: 2.5rem; }
    }
        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--pure-white); color: #333; }
        .serif-italic { font-family: 'Playfair Display', serif; font-style: italic; color: var(--accent-green); }

        /* Navbar with Trade Status */
        .navbar { background: var(--pure-white); border-bottom: 2px solid var(--primary-green); padding: 10px 0; }
        .trade-status { font-size: 0.75rem; background: var(--light-mint); padding: 5px 12px; border-radius: 50px; color: var(--primary-green); font-weight: 700; }

        /* Hero Slider */
        .hero-slider .carousel-item { height: 75vh; position: relative; }
        .hero-slider .overlay { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            background: linear-gradient(to right, rgba(27, 67, 50, 0.85), transparent);
            z-index: 1;
        }
        .carousel-caption { z-index: 2; top: 25%; text-align: left; }

        /* Technical Bento Grid */
        .tech-card {
            background: var(--pure-white);
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            padding: 2rem;
            height: 100%;
            transition: 0.3s;
        }
        .tech-card:hover { border-color: var(--accent-green); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .hsn-tag { font-family: monospace; background: #eee; padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; }

        /* Logistics Timeline */
        .step-num { width: 40px; height: 40px; background: var(--primary-green); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-bottom: 15px; }

        .btn-green { background: var(--primary-green); color: white; border-radius: 8px; padding: 12px 30px; font-weight: 700; border: none; }
        .btn-green:hover { background: var(--accent-green); color: white; }
        
        /* Ensure the slider adjusts height for mobile devices */
    @media (max-width: 768px) {
        .hero-slider .carousel-item {
            height: 60vh; /* Shorter height for mobile screens */
        }
        .carousel-caption {
            top: 20%;
            left: 5%;
            right: 5%;
        }
        .carousel-caption h1 {
            font-size: 2rem !important; /* Smaller text for mobile */
        }
        .carousel-caption p {
            font-size: 0.9rem !important;
            width: 100% !important; /* Full width for text on mobile */
        }
        .navbar-brand .fs-3 {
            font-size: 1.4rem !important;
        }
    }

    /* Custom hover effect for Desktop Nav */
    @media (min-width: 992px) {
        .nav-link {
            position: relative;
            transition: 0.3s;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 50%;
            background-color: var(--primary-green);
            transition: 0.3s;
            transform: translateX(-50%);
        }
        .nav-link:hover::after {
            width: 70%;
        }
    }