@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    
    font-family: "Roboto", serif;

    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

ul{
    list-style-type: none;
}

a{
    text-decoration: none;
}

:root{
    --menu-vertical-position-top: 65px;
    --frontend__menu--vertical-background-color: rgba(255, 255, 255, 1);
    --modal-tull-background-color: rgba(0, 0, 0, 0.1);
    --hamMenu-background-color: #34bf49;
    --frontend-footer-desktop: #0e0b0bef;
    --frontend-footer-mobile: #0e0b0bef;
    --body-background-color: #FFF;
    --color-primario: #34bf49;
    --color-secundary: #524a4a;
    --color-texto: #999999;
    --border: #e1e1e1;
    --white: #FFF;
    --black: #000;
}

body{
    background-color: var(--body-background-color);
    height: 100vh;
}

.modal__tull{
    position: absolute;
    display: none;
    background-color: var(--modal-tull-background-color);
    opacity: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    top: 0;
    left: 0;

    transition: all .3s linear;
}

.modal__tull.show{
    display: block;
    opacity: 1;
}

.frontend-header-desktop{
    display: block;
}

.frontend-header-desktop-flex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.frontend-header-mobile{
    display: none;
}

.frontend-header-mobile-flex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    border-bottom: 1px solid var(--border);
    background-color: var(--white);
    margin-bottom: 15px;
    padding: 15px 10px;
}



/**
*   Vertical menu for Frontend and Mobile
*/
.frontend__menu--vertical{
    position: absolute;
    background-color: var(--frontend__menu--vertical-background-color);
    visibility: hidden;
    opacity: 0;
    height: 100vh;
    width: 100%;
    z-index: 2;
    top: 0;
    left: -550px;

    transition: all .5s ease;
}

.frontend__menu--vertical.show{
    visibility: visible;
    opacity: 1;
    top: 85px;
    left: 0;
}

.frontend__menu--vertical .nav ul li{
    padding: 10px 5px;
}

.frontend__menu--vertical .nav ul li a{
    color: var(--color-primario);
    letter-spacing: 2px;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 20px;
}


/**
*   Footers desktop and mobile
*/

/* Footer Desktop */
.frontend-footer-desktop{
    display: block;
    border: 1px solid var(--border);
    background-color: var(--frontend-footer-desktop);
    height: 100px;
    width: 100%;
}

/* Footer Mobile */
.frontend-footer-mobile{
    display: none;
    border: 1px solid var(--border);
    background-color: var(--frontend-footer-mobile);
    height: 100px;
    width: 100%;
}



/**
*   home slides
*/
.home-sliders{
    padding: 5px;
}

.home-slider{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.home-slider .column-image{
    padding: 45px 0;
}


/**
*   specialities
*/
.specialitaties{
    position: relative;
    margin: 20px 0;
}

.container{
    width: 100%;
    margin: 5px auto;
}

.specialities-top{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    padding: 100px 0 20px 0;
}

.specialitaties-top--frame{
    padding: 5px 250px;
}

.specialities-top h2{
    text-align: center;
    color: var(--color-primario);
    line-height: 44px;
    font-size: 38px;
    padding: 10px 0;
}

.specialities-top p{
    text-align: center;
    color: var(--color-texto);
    line-height: 26px;
    font-size: 16px;
}

.specialities-section{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    margin: 20px 0;
}

.specialities-column{
    padding: 20px;
}

.specialities-column h3{
    color: var(--color-secundary);
    line-height: 36px;
    font-size: 26px;
}

.specialities-column p{
    color: var(--color-texto);
    line-height: 26px;
    margin-top: 10px;
    font-size: 16px;
}

.specialities-bottom h2{
    text-align: center;
    color: var(--color-primario);
    line-height: 44px;
    font-size: 38px;
    padding: 10px 0;
}

.specialitaties-bottom--frame{
    padding: 45px 250px;
}

.specialities-bottom p{
    text-align: center;
    color: var(--color-texto);
    line-height: 26px;
    font-size: 16px;
}

/**
*   Area Intersection Observer
*/
.specialities-section .text{
    opacity: 0;
    transition: .7s ease-in-out all;
}

.specialities-section .text.izq{
    transform: translateX(-100px);
}

.specialities-section .text.der{
    transform: translateX(100px);
}

.specialities-section .text.visible{
    opacity: 1;
    transform: translateX(0);
}


.specialities-section img{
    max-width: 470px;
    overflow: hidden;

    opacity: 0;
    transform: scale(0.9);
    transition: .7s ease-in-out all;

    object-fit: cover;
}

.specialities-section img.izq{
    transform: translateX(-100px);
}

.specialities-section img.der{
    transform: translateX(100px);
}

.specialities-section img.visible{
    opacity: 1;
    transform: scale(1) translateX(0);
}


.specialities-top .H2_{
    opacity: 0;
    transition: .7s ease;
}

.specialities-top .H2_.top{
    transform: translateY(-50px);
}

.specialities-bottom .H2_.visible{
    opacity: 1;
    transform: translateY(0);
}



/**
*   Button GO TOP
*/
.buttonGoTop{
    position: fixed;
    display: none;

    bottom: 20px;
    right: 30px;

    border: 4px solid var(--color-primario);
    background-color: var(--border);

    height: 50px;
    width: 50px;

}

.buttonGoTop.hover{
    background-color: var(--white);
}


.rotar-dish {
    animation: rotate15 2s linear infinite alternate;
}

@keyframes rotate15 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(15deg);
    }
}



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

    .frontend-header-mobile{
        display: block;
    }

    .frontend-header-desktop{
        display: none;
    }

    .home-slider{
        flex-direction: column-reverse;
    }
    
    .specialitaties-top--frame{
        padding: 0;
    }

    .specialitaties-bottom--frame{
        padding: 0;
    }
       
    .specialities-section{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .specialities-section.reverse{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .specialities-column h3{
        color: var(--color-primario);
    }
    
    .frontend-footer-desktop{
        display: none;
    }

    .frontend-footer-mobile{
        display: block;
    }
    
}