/* RESET & DEFAULTS */
:root {
    --primary-color: #2E7D32;
    --secondary-color: #1B5E20;
    --accent-color: #FFD600;
    --text-color: #333333;
    --light-bg: #F5F9F6;
    --white: #FFFFFF;
    --gray: #666666;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

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

/* LAYOUT UTILITIES */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}


html {
    font-size: 16px;
    /* Base font size for rem calculation */
    scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

body {
    font-family: 'Outfit', sans-serif;
    color: #0C5C3E;
    font-weight: 500;
    /* Mobile-first base styles (~320px+) */
    font-size: 1rem;
    /* approx 16px */
    line-height: 1.5;
    /* Ambient gradient background - edge-anchored radial glows on dark base */
    background:
        /* Left glow - primary layer */
        radial-gradient(circle at -20% 50%, rgba(80, 180, 170, 0.3) 0%, rgba(80, 180, 170, 0.15) 20%, transparent 55%),
        /* Left glow - secondary layer (depth) */
        radial-gradient(circle at -15% 40%, rgba(100, 200, 190, 0.2) 0%, rgba(100, 200, 190, 0.08) 25%, transparent 50%),
        /* Right glow - primary layer */
        radial-gradient(circle at 120% 40%, rgba(80, 180, 170, 0.28) 0%, rgba(80, 180, 170, 0.12) 20%, transparent 55%),
        /* Right glow - secondary layer (depth) */
        radial-gradient(circle at 115% 35%, rgba(100, 200, 190, 0.18) 0%, rgba(100, 200, 190, 0.06) 25%, transparent 50%),
        /* Bottom glow - primary layer */
        radial-gradient(circle at 50% 120%, rgba(80, 180, 170, 0.22) 0%, rgba(80, 180, 170, 0.08) 20%, transparent 50%),
        /* Base white background */
        #ffffff;
    background-attachment: fixed;
}

/* Ensure form elements inherit font */
input,
button,
textarea,
select {
    font-family: 'Outfit', sans-serif;
}

/* Images */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* DESKTOP RESPONSIVE (min-width: 1024px) */
@media screen and (min-width: 1024px) {

    /* Body & Background restore */
    body {
        font-size: 1.1vw;
        /* Desktop ambient gradient background - edge-anchored radial glows */
        background:
            /* Left glow - primary layer */
            radial-gradient(circle at -20% 50%, rgba(80, 180, 170, 0.3) 0%, rgba(80, 180, 170, 0.15) 20%, transparent 55%),
            /* Left glow - secondary layer (depth) */
            radial-gradient(circle at -15% 40%, rgba(100, 200, 190, 0.2) 0%, rgba(100, 200, 190, 0.08) 25%, transparent 50%),
            /* Right glow - primary layer */
            radial-gradient(circle at 120% 40%, rgba(80, 180, 170, 0.28) 0%, rgba(80, 180, 170, 0.12) 20%, transparent 55%),
            /* Right glow - secondary layer (depth) */
            radial-gradient(circle at 115% 35%, rgba(100, 200, 190, 0.18) 0%, rgba(100, 200, 190, 0.06) 25%, transparent 50%),
            /* Bottom glow - primary layer */
            radial-gradient(circle at 50% 120%, rgba(80, 180, 170, 0.22) 0%, rgba(80, 180, 170, 0.08) 20%, transparent 50%),
            /* Base white background */
            #ffffff;
        background-attachment: fixed;
        overflow-y: hidden;
        /* Prevent vertical scroll */
    }
}