@font-face {

    font-family: PrimaryFont;

    src: url(../assets/fonts/FuturaCyrillicBold.ttf);

}



@font-face {

    font-family: SecondaryFont;

    src: url(../assets/fonts/FuturaCyrillicMedium.ttf);

}



:root {

    --lg-max-width: 1904px;

    --md-max-width: 1264px;

    --sm-max-width: 960px;

    --xs-max-width: 600px;

    --primary-font: PrimaryFont;

    --secondary-font: SecondaryFont;

    --white: #FFFFFF;

    --semitransparentwhite: #FFFFFFD8;

    --green: #00BC70;

    --darkgreen: #24B571;

    --lighterblue: #DEF4FB;

    --lightblue: #00A7E1;

    --darkblue: #255078;

    --blue: #0079C1;

    --orange: #F56231;

    --yellow: #FEB117;

    --black: #000000;

    --xl-text: 45px;

    --lg-text: 36px;

    --md-text: 27px;

    --sm-text: 22px;

    --xs-text: 18px;

}



@media only screen and (max-width: 1264px) {

    :root {

        --xl-text: 36px;

        --lg-text: 30px;

        --md-text: 23px;

        --sm-text: 20px;

        --xs-text: 16px;

    }

}



@media only screen and (max-width: 960px) {

    :root {

        /* --xl-text: 33px;

        --lg-text: 25px;

        --md-text: 20px;

        --sm-text: 15px; */

    }

}



@media only screen and (max-width: 600px) {

    :root {

        --xl-text: 25px;

        --lg-text: 20px;

        --md-text: 18px;

        --sm-text: 15px;

    }

}



.animate__delay-200ms { animation-delay: 200ms;}

.animate__delay-400ms { animation-delay: 400ms;}

.animate__delay-600ms { animation-delay: 600ms;}

.animate__delay-800ms { animation-delay: 800ms;}