:root {

    --color1: rgb(var(--rgb-color1));
    --rgb-color1: 18, 89, 147;
    --color2: rgb(var(--rgb-color2));
    --rgb-color2: 19, 181, 193;
    --colorblack: rgb(var(--rgb-colorblack));
    --rgb-colorblack: 35, 35, 35;
    --colorgrey: rgb(var(--rgb-colorgrey));
    --rgb-colorgrey: 112, 112, 112;


    --section-padding: calc(45px + 40 * (100vw - 320px) / 1080);
    --mid-padding: calc(25px + 20 * (100vw - 320px) / 1080);
    --gap-padding: calc(80px + 40 * (100vw - 320px) / 1080);
    --gutter: calc(15px + 10 * (100vw - 320px) / 1080);
    --container-padding: calc(40px + 50 * (100vw - 320px) / 1080);
    --title-padding: calc(25px + 10 * (100vw - 320px) / 1080);
    --title-padding-pages: calc(35px + 25 * (100vw - 320px) / 1080);

    /* header */

    --header-top: 40px;
    --header-height: calc(60px + 20 * (100vw - 320px) / 1080);

    /* svg */

    --stroke-width: 1.5px;
    --stroke: var(--primary);

    /* transitions */

    --cubic:cubic-bezier(.23, 1, .32, 1);

    /* shadows */

    --shadow-section: 3px 5px 8px rgba(155, 163, 174, .2);

    /* border */

    --border-radius: 15px;



}