/* Mobil */

:root {
    --page-max-width: 1530px;
    --header-height: 75px;

    --columns: 12;
    --gutter: clamp(1.5625rem, 0.5479rem + 4.329vw, 4.6875rem);
    --gap: 12px;

    --margin-small: clamp(2.25rem, 2.0065rem + 1.039vw, 3rem);    
    --margin-medium: clamp(4.5rem, 4.013rem + 2.0779vw, 6rem);    
    --margin-large: clamp(6.75rem, 6.0195rem + 3.1169vw, 9rem);   
    --margin-huge: clamp(9rem, 8.026rem + 4.1558vw, 12rem);       

    --spacing-01: 4px;
    --spacing-02: 8px;
    --spacing-03: 12px;
    --spacing-04: 16px;
    --spacing-05: 20px;
    --spacing-06: 24px;
    --spacing-07: 28px;
    --spacing-08: 32px;
    --spacing-09: 36px;
    --spacing-10: 40px;
    --spacing-11: 44px;
    --spacing-12: 48px;
    --spacing-13: 56px;
    --spacing-14: 64px;
    --spacing-15: 72px;
    --spacing-16: 80px;
    --spacing-17: 88px;
    --spacing-18: 96px;
    --spacing-19: 104px;

    --picture-padding: 13px;

    --button-height: 42px;
    --icon-size: 25px;
    
    --font-family-normal: 'Roboto Condensed', sans-serif;
    /* --font-family-display: 'OPTICirrus-Bold', sans-serif; */
    --font-family-display: var(--font-family-normal);
    --font-weight-bold: 900;
    --font-size-mainnav: clamp(0.875rem, 0.8141rem + 0.2597vw, 1.0625rem);
    --font-size-base:  clamp(0.875rem, 0.8141rem + 0.2597vw, 1.0625rem);
    --font-size-p: clamp(0.875rem, 0.8141rem + 0.2597vw, 1.0625rem);
    --line-height-p:  clamp(1.25rem, 1.0471rem + 0.8658vw, 1.875rem);
    --font-margin-p: clamp(1.5625rem, 1.2581rem + 1.2987vw, 2.5rem);

    --font-size-h1: clamp(1.375rem, 0.1981rem + 5.0216vw, 5rem);
    --line-height-h1: clamp(1.5rem, 0.1607rem + 5.7143vw, 5.625rem);
    --font-size-h2: clamp(1.375rem, 1.0097rem + 1.5584vw, 2.5rem);
    --line-height-h2: clamp(1.5rem, 0.9724rem + 2.2511vw, 3.125rem);
    --font-size-h3:  clamp(0.875rem, 0.6924rem + 0.7792vw, 1.4375rem);
    --line-height-h3: clamp(1.125rem, 0.8815rem + 1.039vw, 1.875rem);

    --font-size-instagram-stats: clamp(0.875rem, 0.4489rem + 1.8182vw, 2.1875rem);
    --line-height-instagram-stats: clamp(1.0625rem, 0.7987rem + 1.1255vw, 1.875rem);

    --font-size-stats: clamp(2.9375rem, 1.1518rem + 7.619vw, 8.4375rem);
    --line-height-stats: clamp(3.25rem, 0.8758rem + 10.1299vw, 10.5625rem);
    --icon-size-stats: clamp(2.1875rem, 1.0308rem + 4.9351vw, 5.75rem);
    --font-size-stats-description: clamp(1rem, 0.7971rem + 0.8658vw, 1.625rem);
    --line-height-stats-description: clamp(1.1875rem, 0.9643rem + 0.9524vw, 1.875rem);

    --text-color: #001A33;
    --dark-blue: #001a33;
    --light-blue: #8bd6e6;
    --light-gray: #f9f9fa;
    --line-gray: #a3a3a3;

    --main-color: var(--light-blue);
}

/* Mobil L */

@media (min-width: 425px) {
    :root {
        
    }
}

/* Tablet */

@media (min-width: 768px) {
    :root {
        --page-max-width: 1530px;
        --header-height: 95px;
        --gap: 27px;

        --margin-small: 96px;
        --margin-medium: 150px;
        --margin-large: 108px;
        --margin-huge: 144px;

        --spacing-01: 4px;
        --spacing-02: 8px;
        --spacing-03: 12px;
        --spacing-04: 16px;
        --spacing-05: 20px;
        --spacing-06: 24px;
        --spacing-07: 28px;
        --spacing-08: 32px;
        --spacing-09: 36px;
        --spacing-10: 40px;
        --spacing-11: 44px;
        --spacing-12: 48px;
        --spacing-13: 56px;
        --spacing-14: 64px;
        --spacing-15: 72px;
        --spacing-16: 80px;
        --spacing-17: 88px;
        --spacing-18: 96px;
        --spacing-19: 104px;

        --picture-padding: 20px;
    }
}

/* Laptop */

@media (min-width: 1024px) {
    :root {
        --page-max-width: 1530px;
        --header-height: 145px;

        --gap: 27px;

        --margin-small: 96px;
        --margin-medium: 150px;
        --margin-large: 108px;
        --margin-huge: 144px;

        --spacing-01: 4px;
        --spacing-02: 8px;
        --spacing-03: 12px;
        --spacing-04: 16px;
        --spacing-05: 20px;
        --spacing-06: 24px;
        --spacing-07: 28px;
        --spacing-08: 32px;
        --spacing-09: 36px;
        --spacing-10: 40px;
        --spacing-11: 44px;
        --spacing-12: 48px;
        --spacing-13: 56px;
        --spacing-14: 64px;
        --spacing-15: 72px;
        --spacing-16: 80px;
        --spacing-17: 88px;
        --spacing-18: 96px;
        --spacing-19: 104px;
    }
}

/* Laptop L */

@media (min-width: 1440px) {
    :root {
        
    }
}

/* 4K */

@media (min-width: 2560px) {
    :root {
        
    }
}