@import url("/css/atoms/general.css");  
@import url("/css/atoms/space.css");  
@import url("/css/atoms/text.css");  
@import url("/css/atoms/color.css");  
@import url("/css/atoms/effects.css");  
@import url("/css/atoms/mixings.css");  

/**********************
***********************
ORGANISMS
***********************
**********************/

@import url("/css/organisms/loader.css");  
@import url("/css/organisms/response.css");  
@import url("/css/organisms/cookies.css");  
@import url("/css/organisms/mobileMenu.css");  
@import url("/css/organisms/header.css");  
@import url("/css/organisms/footer.css");  

.page{
    width: 100%;
    overflow-x: hidden;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

main{
    width: 100%;
    height: fit-content;
    flex: 1;
}

/*HERO*/
    .hero{
        position: relative;
    }

    .hero .block{
        position: absolute;
        width: fit-content;
        max-width: 100%;
        left: 50%;
        bottom: 40px;
        translate: -50% 0%;
    }

    .hero .block h2{
        padding: 10px 40px;
        border-radius: 10px;
        color: var(--white);
    }

    .hero .block p{
        background-color: var(--blue);
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        padding: 5px 10px;
        border-radius: 3px;
        color: var(--white);
    }

    .hero .block p svg{
        height: 20px;
        vertical-align: -3px;
        fill: var(--white)
    }

    .hero .block p a{
        color: var(--white);
        transition: 500ms ease-in-out;
        text-decoration: none;
    }

    .hero .block p a:hover{
        color: var(--orange);
    }
/*HERO*/