@font-face {
    font-family: Gruppo-Regular;
    src: url(../fonts/GoogleFonts-Gruppo-Regular.ttf);
}

@font-face {
    font-family: Michroma;
    src: url(../fonts/GoogleFonts-Michroma-Regular.ttf);
}
@keyframes menu {
    from{
        height: 0px;
    }
   to{
        height: 7vh;
   }
}
@keyframes fly {
    from {top: -60;}
    to{top: 0;}
}

#logo-clara{
    width: 75%;
}
#logo-escura{
    width: 75%;
    }
span{
    font-family: Arial, Helvetica, sans-serif;
}

main{
    display: flex;
    flex-direction: column;
    height: 100vh;
}
body{
    margin: 0;
    padding: 0;
}

section{
    display: flex;
    justify-content:center;
    align-items: flex-end;
    text-align: center;
    height: 100vh;
    
}
#menu{
    padding: 0;
    margin: 0;
    display: flex;    
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 50%;
  
}
#btn-menu{
    display: none;
}

@media screen and (min-width: 480px){
    
}

@media (max-width: 500px){
    
    #slider-marca{
        width: 60% !important;
        height: 50%;
    }
    #slider-etica{
        width: 80% !important;
        height: 60%;
    }
    .logo{
        width: 60% !important;
    }
    #logo-clara{
        width: 100%;
    }
    #logo-escura{
        width: 100%;
        }
        
    
    .conceito-icons{
        margin: 0 !important;
        width: 100%;
        margin-bottom: 20px !important;
    }
    .contexto{
        margin-top: 30px;
    }
    
}
@media (max-width: 814px){
   
    #marca{
        height: auto;
    }
    #etica{
        height: auto;
    }
    .corpo-section{
        margin-top: 100px !important;
        flex-direction: column !important;
        height: auto !important;
    }
    .slider{
        height: 35rem ;
    }
    .conceito{
        margin-bottom: 30px;
        width: 85% ;
    }
   
    .description{
        font-size: 10px !important;
    }
    .cookie{
        flex-direction: column !important;
        align-items: center;
        height: 25vh !important;
    }
    .button-cookie{
        width: 100% !important;
        height: 20% !important;
        margin-top: 10px;
    }
    .dialog{
        width: 100% !important;
    }




}

@media (max-width: 1024px){
    #menu{
      
        position: absolute;
        width: 100%;
        
        display: none;  
        
    }
    #menu a{
        color:#65B42A;
        font-size: 12px;       
    }    
    /* Botões de idioma desaparecem */
    .linguage{
        display: none !important;
    }
    /* Abre o menu no sentido coluna */
    #btn-menu{
        display: block;   
        
    }   

    #btn-menu{
        
        background:none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border: 2px solid #65B42A;
        height: 38px;
        width: 38px;
        border-radius: 3px;
        gap: .5rem;
    }
    #btn-menu:hover > div{
        border-top: 3px solid #fff;
        
    }
    
    #barra1,
    #barra2,
    #barra3 {
        
        margin: -2px;
        border-radius: 2px;
        width: 20px;
        border-top: 3px solid #65B42A;
        transition-duration: .5s;
        
        
    }
    
    

    .barra-on-1{
        transform: rotate(45deg) translateY(-0.6px) translateX(0.3px) translate(4px, 6px);
        
        
        
    }
    .barra-on-2{
        opacity: 0;
        
        
    }
    .barra-on-3{
        transform: rotate(-45deg) translateY(0.6px) translateX(0.3px) translate(4px,-6px);
        
    }

    #linguage-list{
        display: flex !important;  
        justify-content: center;  
        width: 100%;
    }
    #linguage-list:hover{
        background: #fff !important;
    }
    #linguage-list a{
        padding: 5px !important;
        margin: 5px;
        width: 40px;
    }
    
    #linguage-list img{
        width: 100%;
    }

    
    

    .active #menu{    
        background-color: #fff;
        top: 67px;
                    
        padding-left: 0;
        display: block;
        
        justify-content: space-around;
        
        
        
        
    }   
    
    .active #menu li{
        z-index: 1000;
        animation-name: menu;  
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
       
        padding: 0;
        margin: -1px;
        background-color: #fff;
        align-items: center;
        text-align: center;
            
    }
   
    .active #menu a{
        padding: 15px;
        display: flex;
        align-items:flex-start;  
        align-items: center;
        height: 100%;
        font-family: Gruppo-Regular;
        font-size: 13px;
        
    }
    
    .active #menu li:hover{
        color: aliceblue;
        background-color: #65B42A;
        
    }
    .active #menu li:hover a{
        color: aliceblue;
    }

    
    
  
    
    
}


.nav-selected{    
    box-shadow: none;
    border-bottom: 1px solid black;
    background-color: #fff;
    

    
}
.nav-selected li a{
    color: #383838;
}


nav{
    align-items: center;
    position: fixed;
    top: -60px;
    width: 100%;
    height: 68px;
    display: flex;
    list-style: none;    
    justify-content: space-around;
    text-align: center;   
    animation-name: fly;
    animation-duration: 2s;
    animation-fill-mode: forwards;   
    
    z-index: 1200;
}
.nav-shadow{   
    box-shadow: rgba(50, 50, 93, 0.5) 0px 50px 60px -12px inset, rgba(0, 0, 0, 1) 0px 18px 36px -18px inset; 
    background: none;
    border-bottom: none;
    z-index: 1000;    
}
.logo{  
    height: 100%;
    width: 25%;
    display: flex;    
    align-items: center;
    text-align: center;
    justify-content: flex-end;
}




nav li{
    display: flex;
    margin: 4px;
    padding: 4px;
    
    cursor: pointer;
    text-align: center;
    align-items: center;    
    
}
nav a{
    align-items: center;
    text-align:center;
    
    text-decoration: none;
    color:#8AFF3D;
    font-family: Michroma, sans-serif;
    font-weight: 600;
    font-size: 13px;
    transition: all .3s;
    width: 100%;
    

}

.nav-selected li a{
    color: #383838;
}
.nav-selected li :hover{
    color: #65B42A;
}

nav a:hover{
    color: #65B42A;
}
.linguage{
    
    
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    
    height: 100%;
    width: 25%;
}
.group{
    display: flex;
    align-items: center;    
    justify-content: center;
    width: 70%;
    
}
.linguage a{
    cursor: pointer;
    padding: 3px;
    width: auto;
}

.linguage img{
    
    height: 1.5rem;
    
}

#linguage-list{
    display: none;
   
}

.first-acess{
    display: flex !important;
}
.cookie{
    font-family: Michroma, sans-serif;
    background-color:#fff;
    width: 100%;
    height: 17vh;
    display: none;
    position: absolute;
    bottom: 5px;
}
.dialog{
    font-size: 15px;
    width: 80%;
    padding: 5px;
    margin-left: 15px;
    
}
.context{
    width: 90%;
    font-size: 12px;
}
.button-cookie{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    min-width: 200px;
    max-width: 400px;
    height: 100%;
    width: 20%;
}

.button-cookie button{
    background-color: #1976D2;
    cursor: pointer;
    border: none;
    font-size: 11px;
    color: #fff;
    height: 40px;
    width: 80%;
}
.button-cookie button:hover{
    box-shadow: 0 0 10px 5px #5D9ABC;
}
.saber-mais{
    margin: 5px;
    padding: 5px;
}

.instagram{
    position: absolute;
    bottom: 0;
    height: 40px;
}
.instagram img{
    
    height: 100%;
    padding: 5px;
}