/* CSS Variables */
:root {
    /* Colors */
    --color-primary: #004185;
    --color-white: #ffffff;

    /* Typography */
    --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-h1: 40px;
    --font-size-h2: 40px;
    --font-size-h3: 40px;
    --font-size-h4: 20px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 14px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
    --spacing-xxxl: 100px;
    --spacing-main: 179px;

    /* Layout */
    --container-max-width: 1200px;
    --border-radius: 8px;
    --border-radius-large: 12px;

    /* Effects */
    --transition: all 0.3s ease;
    --box-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 1250px) {
    :root {
        --spacing-main: 160px;
    }
}

@media (max-width: 1150px) {
    :root {
        --spacing-main: 120px;
    }
}

@media (max-width: 1000px) {
    :root {
        --spacing-main: 80px;
    }
}

@media screen and (max-width: 748px) {
    :root {
        --spacing-main: 24px;
        --font-size-h1: 30px;
        --font-size-h2: 25px;
        --font-size-h3: 25px;
    }
}

@media screen and (max-width: 500px) {
    :root {
        --spacing-main: 24px;
        --font-size-h1: 26px;
        --font-size-h2: 21px;
        --font-size-h3: 21px;
    }
}