@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@100;200;300;400;500;600;700&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import './components/menu.css';
@import './components/blocks.css';
@import './components/slider.css';
@import './components/outcomes-slider.css';
@import './components/welcome-animation.css';
/* @import './components/what-we-say-slider.css'; */

:root
{
    --page-background-dark: rgb(111, 111, 111);
    --page-background-light: rgb(245, 245, 245);
    --white: rgb(255, 255, 255);
    --black: rgb(0, 0, 0);
    --grey: rgb(128, 128, 135);
    --light-teal: rgb(51, 158, 150);
    --dark-teal: rgb(69, 116, 114);
    --green: rgb(57, 208, 74);
    --section-grey-overlay: rgba(51, 51, 51, .8);
    --section-dark-green-overlay: rgba(76, 101, 78, .8);
    --section-medium-green-overlay: rgba(68, 141, 76, .8);
    --section-light-green-overlay: rgba(57, 208, 74, .8);
    --section-light-teal-overlay: rgba(51, 158, 150, .8);
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--page-background-light);
}

::-webkit-scrollbar-thumb {
    background: var(--dark-teal);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--light-teal);
}

body.loading {
    background: linear-gradient(90deg, #808087 0%, #808087 100%);
    opacity: 0.8;
    min-height: 100vh;
    min-width: 100vw;
    /* height: 100vh; */
    /* width: 100vw; */
    /* overflow: hidden; */
}

body.loading .main-menu-wrapper, body.loading .blocks {
    display: none !important;
}