@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800&family=Roboto:wght@100;300;400;500;700;900&display=swap');

:root {
    --ff-primary: 'Maven Pro', sans-serif;
    --ff-secondary: 'Roboto', sans-serif;
    --color-primary: #002669;
    --color-secondary: #325283;
    --color-theme-acc: #006fbc;
    --color-regular: #9098a4;
    --content-color: #4e4e4f;
    --color-theme-light: #eaedf2;
    --color-sucess: #229300;
    --color-light: #fff;
    --color-dark: #0000;
    --fs-title: 46px;
    --fs-lg: 26px;
    --padding-inline: 50px;
    --padding-block: 120px;
    --padding-block-xl: 180px;
}


@media screen and (max-width: 1600px) {
    :root {
        --padding-inline: 40px;
        --fs-title: 40px;
        --padding-block: 100px;
        --fs-lg: 24px;
        --padding-block-xl: 140px;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --padding-inline: 25px;
        --fs-title: 36px;
        --padding-block: 70px;
        --fs-lg: 22px;
        --padding-block-xl: 90px;
    }
}


@media screen and (max-width: 767px) {
    :root {
        --padding-inline: 15px;
        --fs-title: 32px;
        --padding-block: 50px;
        --padding-block-xl: 60px;
        --fs-lg: 20px;
    }
}