/**
 * ============================================================================
 * National Green Care - Agricultural Design System
 * ============================================================================
 * Recreating the exact visual design from screenshot:
 * - Floating white pill navbar
 * - Dramatic agro hero with golden hour rice field & Bengali tagline
 * - "Tomorrow" with sprouting leaves icon
 * - Floating trust features bar
 * - Category cards with circular icon badge overlays
 * - Clean product cards with chemical subtitles & pill tags
 * - "Need Expert Advice?" dark green banner with soil seedling
 * - "Why Choose National Green Care?" feature cards
 * - Wavy organic dark green footer
 * 
 * @package    NationalGreenCare
 * @subpackage Assets
 * @version    2.0.0
 */

:root {
    --brand-green-dark: #0c4e32;
    --brand-green-deep: #022c1b;
    --brand-green: #059669;
    --brand-green-light: #10b981;
    --brand-lime: #bef264;
    --brand-yellow-btn: #eaf78d;
    --brand-yellow-text: #17320a;
    
    --text-heading: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-bangla: 'Hind Siliguri', sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-body);
    scroll-behavior: smooth;
    color: var(--text-body);
    background-color: #f8fafc;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-heading);
    letter-spacing: -0.025em;
}

.font-bangla {
    font-family: var(--font-bangla);
}

/* Nav Link Hover & Active */
.nav-active {
    color: #0f172a;
}

/* Hero "Tomorrow" Sprouting Leaf */
.tomorrow-wrapper {
    position: relative;
    display: inline-block;
    color: #a3e635;
}

.sprout-leaf-icon {
    position: absolute;
    top: -12px;
    right: -24px;
    transform: rotate(15deg);
    color: #4ade80;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Hero Background Image */
.hero-agriculture-bg {
    background-image: 
        linear-gradient(to right, rgba(4, 38, 24, 0.94) 0%, rgba(5, 48, 30, 0.85) 45%, rgba(6, 60, 36, 0.45) 80%, rgba(10, 70, 42, 0.25) 100%),
        url('https://images.unsplash.com/photo-1500937386664-56d1dfef3854?auto=format&fit=crop&w=2000&q=85');
    background-size: cover;
    background-position: center right;
}

@media (max-width: 1024px) {
    .hero-agriculture-bg {
        background-image: 
            linear-gradient(to bottom, rgba(4, 38, 24, 0.95) 0%, rgba(5, 48, 30, 0.90) 100%),
            url('https://images.unsplash.com/photo-1500937386664-56d1dfef3854?auto=format&fit=crop&w=1200&q=80');
    }
}

/* Floating Trust Features Card */
.trust-features-card {
    background: #ffffff;
    border-radius: 1.25rem;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08), 0 5px 15px -3px rgba(0, 0, 0, 0.04);
}

.trust-icon-box {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.85rem;
    background-color: #0c4e32;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Category Cards */
.category-card {
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px -5px rgba(5, 150, 105, 0.12);
    border-color: #a7f3d0;
}

.category-card-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: #ffffff;
    border: 2px solid #059669;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin: -1.5rem auto 0 auto;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   RESPONSIVE PRODUCT CARDS & GRID (Compact Mobile & Tablet Design)
   ========================================================================== */

/* Desktop Layout (1024px and above: 5 per row) */
.products-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.product-card {
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid #f1f5f9;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.08);
}

.product-image-container {
    aspect-ratio: 16 / 11;
    max-height: 135px;
    margin-bottom: 10px;
}

.product-title {
    font-size: 14.5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-desc {
    font-size: 11.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-crop-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.product-tag {
    font-size: 9.5px;
    padding: 2px 6px;
}

.product-btn {
    padding: 7px 12px;
    font-size: 12px;
    margin-top: 8px;
    min-height: 36px;
}

/* Tablet (768px – 1023px: 3 per row) */
@media (min-width: 768px) and (max-width: 1023px) {
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .product-card {
        padding: 13px;
        border-radius: 1rem;
    }

    .product-image-container {
        aspect-ratio: 16 / 11;
        max-height: 115px;
        margin-bottom: 8px;
    }

    .product-title {
        font-size: 13.5px;
    }

    .product-desc {
        font-size: 11px;
    }

    .product-crop-tags {
        gap: 4px;
        margin-top: 5px;
    }

    .product-tag {
        font-size: 9px;
        padding: 2px 5px;
    }

    .product-btn {
        padding: 7px 10px;
        font-size: 11.5px;
        margin-top: 6px;
        min-height: 34px;
    }
}

/* Mobile (up to 767px: 2 per row) */
@media (max-width: 767px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .product-card {
        padding: 10px;
        border-radius: 12px;
    }

    .product-image-container {
        aspect-ratio: 16 / 10;
        max-height: 88px;
        margin-bottom: 6px;
    }

    .product-badge {
        font-size: 9px;
        padding: 1.5px 6px;
    }

    .product-title {
        font-size: 12.5px;
        line-height: 1.25;
        -webkit-line-clamp: 2;
    }

    .product-desc {
        font-size: 10.5px;
        line-height: 1.3;
        -webkit-line-clamp: 2;
    }

    .product-crop-tags {
        gap: 3px;
        margin-top: 4px;
    }

    .product-tag {
        font-size: 8.5px;
        padding: 1.5px 5px;
    }

    .product-btn {
        padding: 6px 10px;
        font-size: 11px;
        margin-top: 6px;
        min-height: 32px;
    }
}

/* Responsive Product Carousel (Single row, 2/3/5 items) */
.product-carousel-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.product-carousel-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    will-change: transform;
}

.carousel-product-slide {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 50% !important;
    padding: 0 0.375rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .carousel-product-slide {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        min-width: 33.333333% !important;
        padding: 0 0.5rem;
    }
}

@media (min-width: 1024px) {
    .carousel-product-slide {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        min-width: 20% !important;
        padding: 0 0.5rem;
    }
}

/* Responsive Category Carousel (Exact visible counts: Desktop >= 1200px: 5, Tablet 768px-1199px: 3, Mobile < 768px: 2) */
.category-carousel-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.category-carousel-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    will-change: transform;
}

.carousel-category-slide {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 50% !important;
    padding: 0 0.375rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .carousel-category-slide {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        min-width: 33.333333% !important;
        padding: 0 0.5rem;
    }
}

@media (min-width: 1200px) {
    .carousel-category-slide {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        min-width: 20% !important;
        padding: 0 0.625rem;
    }
}


.product-badge-insecticide {
    background-color: #dcfce7;
    color: #15803d;
}

.product-badge-fungicide {
    background-color: #ffe4e6;
    color: #e11d48;
}

.product-badge-herbicide {
    background-color: #d1fae5;
    color: #047857;
}

.product-badge-nutrition {
    background-color: #fef3c7;
    color: #b45309;
}

.product-badge-protein {
    background-color: #ede9fe;
    color: #6b21a8;
}

/* Products Page Hero Background with Dew Drops Leaf */
.products-hero-bg {
    background-image: 
        linear-gradient(to right, rgba(4, 38, 24, 0.92) 0%, rgba(5, 48, 30, 0.78) 45%, rgba(6, 60, 36, 0.40) 80%, rgba(10, 70, 42, 0.20) 100%),
        url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?auto=format&fit=crop&w=2000&q=85');
    background-size: cover;
    background-position: center;
}

@media (max-width: 1024px) {
    .products-hero-bg {
        background-image: 
            linear-gradient(to bottom, rgba(4, 38, 24, 0.94) 0%, rgba(5, 48, 30, 0.85) 100%),
            url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?auto=format&fit=crop&w=1200&q=80');
    }
}

/* Knowledge Center Hero Background */
.knowledge-hero-bg {
    background-image: 
        linear-gradient(to right, rgba(4, 38, 24, 0.92) 0%, rgba(5, 48, 30, 0.75) 50%, rgba(6, 60, 36, 0.40) 80%, rgba(10, 70, 42, 0.20) 100%),
        url('https://images.unsplash.com/photo-1592841200221-a6898f307baa?auto=format&fit=crop&w=2000&q=85');
    background-size: cover;
    background-position: center;
}

@media (max-width: 1024px) {
    .knowledge-hero-bg {
        background-image: 
            linear-gradient(to bottom, rgba(4, 38, 24, 0.95) 0%, rgba(5, 48, 30, 0.88) 100%),
            url('https://images.unsplash.com/photo-1592841200221-a6898f307baa?auto=format&fit=crop&w=1200&q=80');
    }
}

/* Expert Advice Banner (Full-Section Background Image Design) */
.expert-advice-banner {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    background-color: #021c11;
}

.expert-advice-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    pointer-events: none;
    filter: brightness(1.02);
}

.expert-advice-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(2, 26, 16, 0.97) 0%, rgba(2, 32, 20, 0.93) 38%, rgba(3, 44, 27, 0.70) 58%, rgba(4, 52, 32, 0.32) 78%, rgba(5, 58, 36, 0.08) 92%, transparent 100%);
}

.expert-advice-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(2, 24, 14, 0.60) 0%, transparent 60%);
}

@media (max-width: 640px) {
    .expert-advice-overlay {
        background: linear-gradient(to right, rgba(2, 26, 16, 0.96) 0%, rgba(2, 30, 18, 0.88) 65%, rgba(3, 40, 24, 0.55) 100%),
                    linear-gradient(to bottom, rgba(2, 26, 16, 0.50) 0%, transparent 40%, rgba(2, 26, 16, 0.92) 100%);
    }
}

/* Handwriting Watermark */
.watermark-script {
    font-family: 'Outfit', cursive, sans-serif;
    font-style: italic;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
}

/* Why Choose Us Cards */
.why-card {
    background: #ffffff;
    border-radius: 0.875rem;
    border: 1px solid #e2e8f0;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
    height: 100%;
}

.why-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.why-icon-box {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    background: #ecfdf5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .why-card {
        border-radius: 1rem;
        padding: 1rem;
        flex-direction: row;
        align-items: flex-start;
        gap: 0.875rem;
    }

    .why-icon-box {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .why-card {
        border-radius: 1.25rem;
        padding: 1.25rem;
        gap: 1rem;
    }

    .why-icon-box {
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 0.85rem;
    }
}

/* Crop Solutions Hero Background (Rice Field & Golden Panicles) */
.crop-hero-bg {
    background-image: 
        linear-gradient(to right, rgba(4, 38, 24, 0.90) 0%, rgba(5, 48, 30, 0.75) 45%, rgba(6, 60, 36, 0.35) 80%, rgba(10, 70, 42, 0.15) 100%),
        url('https://images.unsplash.com/photo-1536657464919-892534f60d6e?auto=format&fit=crop&w=2200&q=85');
    background-size: cover;
    background-position: center;
}

@media (max-width: 1024px) {
    .crop-hero-bg {
        background-image: 
            linear-gradient(to bottom, rgba(4, 38, 24, 0.94) 0%, rgba(5, 48, 30, 0.85) 100%),
            url('https://images.unsplash.com/photo-1536657464919-892534f60d6e?auto=format&fit=crop&w=1200&q=80');
    }
}

/* About Us Hero Background (Lush Green Leaves in Sunlight) */
.about-hero-bg {
    background-image: 
        linear-gradient(to right, rgba(4, 38, 24, 0.92) 0%, rgba(5, 48, 30, 0.78) 45%, rgba(6, 60, 36, 0.35) 80%, rgba(10, 70, 42, 0.15) 100%),
        url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?auto=format&fit=crop&w=2200&q=85');
    background-size: cover;
    background-position: center;
}

@media (max-width: 1024px) {
    .about-hero-bg {
        background-image: 
            linear-gradient(to bottom, rgba(4, 38, 24, 0.94) 0%, rgba(5, 48, 30, 0.85) 100%),
            url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?auto=format&fit=crop&w=1200&q=80');
    }
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.25s ease-out forwards;
}