/* ----- MENU ----- */
.header{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 100;
}
/* REDES */
.header .redes{
    width: 100%;
    background-color: #EEEEEE;
}
.header .redes .container{
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    height: 31px;
}
/* LOGO E PESQUISA */
.header .topo{
    width: 100%;
    background-color: #fff;
}
.header .topo .container{
    gap: 50px;
    align-items: center;
    height: 113px;
    justify-content: space-between;
}
.header .topo .header-logo{
    width: 218px;
    height: fit-content;
}
.header .topo .header-logo img{
  	width: 100%;
}
.header .pesquisar{
    display: flex;
    align-items: center;
    max-width: 996px;
    width: 100%;
    height: 47px;
    border: 1px solid #20343e73;
    border-radius: 3px;
    position: relative;
}
.header .pesquisar input{
    width: 100%;
    height: 100%;
    padding: 0 40px 0 20px;
    color: #7e7e7e;
}
.header .pesquisar input::placeholder{
    color: #7e7e7e;
}
.header .pesquisar button{
    position: absolute;
    right: 10px;
}
.header .pesquisar button i{
    font-size: 22px;
    color: var(--primaria);
}
/* MENU OPCOES */
.header .menu-topo{
    width: 100%;
    background-color: var(--cor-1);
}
.header .menu-topo .container{
    display: flex;
    align-items: center;
    height: 48px;
}
.header .menu-topo .header-menu{
    width: 100%;
    height: 100%;
    display: flex;
}
.header .menu-topo .header-menu ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
}
.header .menu-topo .header-menu ul li{
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}
.header .menu-topo .header-menu ul li.div{
    width: 1px;
    height: 60%;
    background-color: #ffffff49;
}
.header .menu-topo .header-menu ul li .ifood{
    display: flex;
    align-items: center;
    height: 80%;
    background-color: #AC2B2F;
    padding: 0 20px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    background-image: url(../imagens/header/m-ifood.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: right top;
    transition: ease .3s;
}
.header .menu-topo .header-menu ul li .ifood:hover{
    background-color: var(--cor-3);
    transition: ease .3s;
}
.header .menu-topo .header-menu .home{
    
}
.header .menu-topo .header-menu .home:hover{
    filter: brightness(0) saturate(100%) invert(76%) sepia(73%) saturate(544%) hue-rotate(343deg) brightness(108%) contrast(99%);
}
.header .menu-topo .header-menu .header-link {
    display: flex;
    align-items: end;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    border-bottom: 2px solid transparent;
    transition: ease .3s;
}
.header .menu-topo .header-menu .header-link i{
	color: #fff;
    font-size: 12px;
    margin-left: 5px;
}
.header .menu-topo .header-menu .header-link:hover{
    border-bottom: 2px solid var(--cor-2);
    transition: ease .3s;
}
.header .menu-topo .header-menu ul li .hover1,
.header-mobile ul li .hover1{
    display: none;
}
.header .menu-topo .header-menu  .hover-btn:hover .hover1{
    min-width: 170px;
    max-width: 300px;
    display: flex;
    position: absolute;
    text-align: center;
    align-items: center;
    background-color: #fff;
    flex-direction: column;
    padding: 10px;
    gap: 15px;
    z-index: 10;
    border-radius: 5px;
    top: 100%;
    left: -20px;
}
.header .menu-topo .header-menu  .hover-btn:hover .hover1 a{
    border-bottom: 2px solid transparent;
    transition: ease .3s;
}
.header .menu-topo .header-menu  .hover-btn:hover .hover1 a:hover{
    border-color: var(--cor-1);
    transition: ease .3s;
}
/* MOBILE */
.menu-hamburguer{
    display: none;
}
.close-mobile{
    display: none;
}
.header-mobile,
.mobile-menu{
    display: none;
}
.open-mobile i{
    color: #fff;
    font-size: 25px;
}
a.close-mobile{
    display: flex;
    position: absolute;
    right: 25px;
    top: 25px;
    border-bottom: none!important;
    padding: 0!important;
}
.close-mobile i{
    color: var(--primaria);
    font-size: 25px;
    transition: ease .3s;
}
a.close-mobile:hover i{
    color: var(--cor-1);
    transition: ease .3s;
}



/* FOOTER */
.footer{
    width: 100%;
    position: relative;
    z-index: 99;
}
.footer .container{
    max-width: 1520px!important;
}
.footer .topo{
    width: 100%;
    background-color: var(--bg1);
    padding: 50px 0;
}
.footer .topo .container{
    display: flex;
    gap: 30px;
    justify-content: space-between;
}
.footer .topo .logo{
    max-width: 204px;
    width: 100%;
}
.footer .topo .logo a,
.footer .topo .logo img{
    max-width: 204px;
    width: 100%;
}
.footer .topo .coluna:nth-child(2){
    max-width: 200px;
}
.footer .topo .coluna:nth-child(3){
    max-width: 160px;
}
.footer .topo .coluna:nth-child(4){
    max-width: 245px;
}
.footer .topo .coluna:nth-child(5){
    max-width: 180px;
}
.footer .topo .coluna{
    width: fit-content;
    height: fit-content;
    gap: 20px;
    color: #fff;
}
.footer .topo .coluna .lista{
    width: 100%;
    gap: 20px;
}
.footer .topo .redes{
    gap: 10px;
    height: fit-content;
}
.footer .topo .redes i{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 1px solid #fff;
    border-radius: 10px;
    color: #fff;
    font-size: 25px;
    transition: ease .3s;
}
.footer .topo .redes i:hover{
    background-color: #fff;
    color: var(--primaria);
    transition: ease .3s;
}
.footer .bottom{
    width: 100%;
    background-color: var(--bg2);
    padding: 30px 0;
}
.footer .bottom .container{
    display: flex;
    gap: 30px;
    justify-content: space-between;
}
.footer .bottom p{
    color: #fff;
}
.footer .bottom .cartoes{
    gap: 20px;
    height: fit-content;
}
.footer .bottom .cartoes img{
    max-width: 635px;
    width: 100%;
    height: fit-content;
}
.footer .bottom .apps{
    gap: 20px;
    height: fit-content;
}
.footer .bottom .apps .links{
    gap: 10px;
}
.footer .bottom .apps .links img{
    max-width: 132px;
    width: 100%;
}
.footer .bottom .ifood{
    height: fit-content;
    gap: 10px;
}
.footer .bottom .ifood p{
    display: flex;
    align-items: center;
}
/* copyright */
.footer .copyright{
    width: 100%;
    padding: 10px 0;
    background-color: #0F1A1F;
}
.footer .copyright .container{
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.footer .copyright p{
    color: #fff;
}
.footer .copyright a{
    display: flex;
    align-items: center;
}
.footer .copyright a img{

}


.flutuante{
    display: flex;
    position: fixed;
    bottom: 110px;
    right: -157px;
    z-index: 99;
    transition: right .5s;
}
.flutuante p{
    display: flex;
    align-items: center;
    position: relative;
}
.flutuante p img{
    width: 58px;
    height: 58px;
    position: relative;
    z-index: 5;
}
.flutuante p span{
    padding: 10px 10px 10px 20px;
    font-size: 14px;
    color: #fff;
    background-color: #20343E;
    transition: width .5s;
    margin-left: -10px;
}
.flutuante .flutuante-lista{
    height: 300px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    position: absolute;
    z-index: 10;
    opacity: 0;
    bottom: -100%;
    right: 0;
    pointer-events: none; 
    visibility: hidden;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: ease .5s;
}
.flutuante:hover{
    right: 0;
}
.flutuante:hover .flutuante-lista{
    opacity: 1;
    bottom: 48px;
    pointer-events: auto;
    visibility: visible;
}
.flutuante .flutuante-lista a:hover{
    color: var(--cor-1);
}


.modal-geral.opened{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
}
.modal-geral{
    display: none;
}
.modal-geral .bg{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: #0000009a;
}
.modal-geral.modal-ifood .content{
    max-width: 500px;
}
.modal-geral .content{
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    z-index: 5;
    background-color: #fff;
    gap: 15px;
    border-radius: 10px;
}
.modal-geral .content::before{
    display: flex;
    content: "";
    width: 100%;
    height: 20px;
    background-color: var(--cor-1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.modal-geral .content::after{
    display: flex;
    content: "";
    width: 100%;
    height: 20px;
    background-color: var(--cor-1);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.modal-geral .content .modal-fechar{
    width: fit-content;
    padding: 0 20px;
}
.modal-geral .content .modal-fechar i{
    font-size: 30px;
}
.modal-geral .content .titulo{
    width: 100%;
    padding: 0 50px;
}
.modal-geral .content .listagem{
    width: 100%;
    gap: 15px;
    margin-bottom: 20px;
}
.modal-geral .content .listagem a{
    color: #fff;
    padding: 10px 50px;
    position: relative;
    z-index: 5;
}
.modal-geral .content .listagem a span{
    color: #fff;
    position: relative;
    z-index: 5;
}
.modal-geral .content .listagem a::after{
    display: flex;
    content: "";
    width: 85%;
    height: 100%;
    background-color: var(--cor-1);
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    position: absolute;
    left: 0;
    top: 0;
    transition: ease .3s;
}
.modal-geral .content .listagem a:hover::after{
    width: 88%;
    background-color: #a12f33;
    transition: ease .3s;
}



/* MEDIA DESKTOP */
@media screen and (max-width: 1700px){
    .footer .container{
        max-width: 95%!important;
    }
}

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

}

@media screen and (max-width: 1366px){
    .footer .topo .redes i{
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
}

@media screen and (max-width: 1280px){
    .footer .topo .container{
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer .topo .logo{
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
    .footer .bottom .container{
        flex-wrap: wrap;
        justify-content: center;
        gap: 50px;
    }
}

@media screen and (max-width: 1200px){
    /* MENU MOBILE */
    .mobile-menu{
        display: flex;
        gap: 10px;
        justify-content: center;
        margin: 0 auto;
    }
    .mobile-menu a{
        color: #fff;
        font-size: 25px;
    }
    .header .menu-topo .header-menu{
        display: none;
        font-size: 25px;
    }
    .header-mobile{
        display: flex;
        flex-direction: column;
        padding: 30px 20px;
        position: fixed;
        max-width: 400px;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: #fff;
        top: 0;
        right: -100%;
        z-index: 999;
        transition: right 0.5s;
        margin-top: 0;
        gap: 20px;
    }
    .header-mobile.opened {
        right: 0;
    }
    .header-mobile ul{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .header-mobile .header-logo{
        height: fit-content;
        margin-bottom: 50px;
    }
    .header-mobile ul{
        gap: 20px;
    }
    .header-mobile .header-link{
        font-size: 25px;
        transition: ease .3s;
        display: flex;
        align-items: center;
        color: var(--primaria);
        transition: ease .3s;
    }
    .header-mobile .header-link i{
        color: var(--primaria);
        font-size: 12px;
        margin-left: 7px;
    }
    .header-mobile .header-link:hover,
    .header-mobile .header-link:hover i{
        color: var(--cor-2);
        transition: ease .3s;
    }
    .header-mobile .hover-btn .hover1.open{
        display: flex;
    }
    .header-mobile .hover-btn .hover1{
        display: none;
        flex-direction: column;
        padding: 10px 20px;
        gap: 15px;
    }
    .header-mobile .hover-btn .hover1 a{
        font-size: 22px;
        color: var(--primaria);
    }
    .header-container .header-mobile .contato{
        max-width: 200px;
        font-size: 25px;
    }
	
}

/* MOBILE */
@media screen and (max-width: 1000px){
   .footer .topo .container{
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 50px;
   }
}

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

@media screen and (max-width: 600px){
    header{
        box-shadow: 0px 5px 8px 4px rgba(0, 0, 0, 0.1);
    }
    .header .redes{
        display: none;
    }
    .header .topo .pesquisar,
    .header .menu-topo{
        display: none;
    }
    .header .topo{
        margin-top: -1px;
    }
    .header .topo .container{
        height: 80px;
    }
    .header .topo .header-logo{
        width: 150px;
    }
    .mobile-menu{
        margin: 0 0 0 auto;
    }
    .mobile-menu a i{
        color: var(--cor-1);
        font-size: 40px;
    }

    .header-mobile{
        right: -100%;
    }

    .footer .copyright .container{
        flex-direction: column;
        text-align: center;
    }
    
}

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

}

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

}