.form-footer{
    width: 100%;
    padding: 100px 0;
}
.form-footer .container{
    padding: 108px;
    background-image: url(../imagens/header/form.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    gap: 50px;
    border-radius: 5px;
}
.form-footer .texto{
    max-width: 700px;
    width: 100%;
    gap: 10px;
}
.form-footer .texto p{
    font-size: 28px;
}
.form-footer .form-f{
    max-width: 756px;
    width: 100%;
    background-color: #fff;
    padding: 50px;
    gap: 30px;
    border-radius: 5px;
}
.form-footer .form-f .inputs{
    width: 100%;
    display: flex;
    gap: 30px;
}
.form-footer .form-f .input{
    width: 100%;
    gap: 10px;
}
.form-footer .form-f .input span{
    font-size: 24px;
    font-weight: 700;
    color: var(--titulo);
}
.form-footer .form-f .input input,
.form-footer .form-f .input select{
    width: 100%;
    height: 60px;
    border: 1px solid #C2C8D0;
    border-radius: 5px;
    padding: 0 20px;
    color: var(--titulo);
    font-size: 20px;
}
.form-footer .form-f .input select,
.form-footer .form-f .input option{
    cursor: pointer;
}
.form-footer .form-f .input textarea{
    width: 100%;
    height: 150px;
    border: 1px solid #C2C8D0;
    border-radius: 5px;
    padding: 20px;
    color: var(--titulo);
    font-size: 20px;
}
.form-footer .form-f .input input::placeholder,
.form-footer .form-f .input select option,
.form-footer .form-f .input textarea::placeholder{
    color: var(--titulo);
    font-size: 20px;
}
.form-footer .form-f .btn-enviar{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 66px;
    border: 1px solid var(--titulo);
    padding: 0 10px;
    border-radius: 5px;
    webkit-transition: ease .3s;
       -moz-transition: ease .3s;
        -ms-transition: ease .3s;
         -o-transition: ease .3s;
            transition: ease .3s;
}
.form-footer .form-f .btn-enviar:hover{
    background-color: var(--cor-1);
    border: 2px solid var(--cor-1);
    -webkit-transition: ease .3s;
       -moz-transition: ease .3s;
        -ms-transition: ease .3s;
         -o-transition: ease .3s;
            transition: ease .3s;
}


.carrinho{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: -110%;
    -webkit-transition: ease .3s;
       -moz-transition: ease .3s;
        -ms-transition: ease .3s;
         -o-transition: ease .3s;
            transition: ease .3s;
    z-index: 55;
}
.carrinho .bg{
    width: 100%;
    height: 100%;
    background-color: #00000090;
    position: absolute;
    top: 0;
    z-index: 1;
}
.carrinho.opened{
    right: 0;
    -webkit-transition: ease .3s;
       -moz-transition: ease .3s;
        -ms-transition: ease .3s;
         -o-transition: ease .3s;
            transition: ease .3s;
}
.carrinho .carrinho-div{
    max-width: 960px;
    width: 100%;
    height: 100%;
    padding: 50px 0 50px 50px;
    background-color: #fafafa;
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
}
/* CARRINHO GERAL */
.carrinho .carrinho-div .topo{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    overflow: hidden;
}
.carrinho .carrinho-div .topo h5,
.carrinho .carrinho-div .topo .voltar,
.carrinho .carrinho-div .topo .btn-voltar{
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 20px;
    -webkit-transition: ease .3s;
       -moz-transition: ease .3s;
        -ms-transition: ease .3s;
         -o-transition: ease .3s;
            transition: ease .3s;
}
.carrinho .carrinho-div .topo .btn-voltar i,
.carrinho .carrinho-div .topo .voltar i{
    font-size: 25px;
    color: var(--titulo);
}
.carrinho .carrinho-div .topo .voltar:hover,
.carrinho .carrinho-div .topo .btn-voltar:hover,
.carrinho .carrinho-div .topo .voltar:hover i,
.carrinho .carrinho-div .topo .btn-voltar:hover i{
    color: var(--cor-1);
    -webkit-transition: ease .3s;
       -moz-transition: ease .3s;
        -ms-transition: ease .3s;
         -o-transition: ease .3s;
            transition: ease .3s;
}
.carrinho .carrinho-div .topo .fechar{
    font-size: 40px;
    color: var(--sub-t);
    line-height: 0.6;
    -webkit-transition: ease .3s;
       -moz-transition: ease .3s;
        -ms-transition: ease .3s;
         -o-transition: ease .3s;
            transition: ease .3s;
}
.carrinho .carrinho-div .topo .fechar:hover{
    scale: 1.2;
    -webkit-transition: ease .3s;
       -moz-transition: ease .3s;
        -ms-transition: ease .3s;
         -o-transition: ease .3s;
            transition: ease .3s;
}
.carrinho .carrinho-div .progresso{
    max-width: 750px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}
.carrinho .carrinho-div .progresso .check{
    height: fit-content;
    display: flex;
    position: relative;
}
.carrinho .carrinho-div .progresso .check i{
    font-size: 25px;
    color: var(--cor-2);
}
.carrinho .carrinho-div .progresso .check span{
    position: absolute;
    bottom: -40px;
    left: 0;
    font-weight: 700;
}
.carrinho .carrinho-div .progresso .div{
    display: flex;
    width: 100%;
    height: 1px;
    background-color: var(--cor-2);
}
/* CARRINHO VAZIO */
.carrinho .carrinho-vazio{
    width: 100%;
    height: 100%;
    gap: 15px;
    padding-right: 50px;
}
.carrinho .carrinho-vazio .texto{
    width: 100%;
    margin: auto;
    gap: 15px;
    align-content: center;
    text-align: center;
}
.carrinho .carrinho-vazio .link{
    margin: 0 auto;
    border: 2px solid var(--titulo);
    border-radius: 5px;
    -webkit-transition: ease .3s;
       -moz-transition: ease .3s;
        -ms-transition: ease .3s;
         -o-transition: ease .3s;
            transition: ease .3s;
}
.carrinho .carrinho-vazio .link:hover{
    background-color: var(--cor-1);
    border: 2px solid var(--cor-1);
    -webkit-transition: ease .3s;
       -moz-transition: ease .3s;
        -ms-transition: ease .3s;
         -o-transition: ease .3s;
            transition: ease .3s;
}
.carrinho .carrinho-vazio.ativo,
.carrinho .carrinho-cheio.ativo,
.carrinho .carrinho-cadastro.ativo,
.carrinho .carrinho-concluido.ativo{
    display: flex;
    flex-wrap: wrap;
}
.carrinho .carrinho-vazio,
.carrinho .carrinho-cheio,
.carrinho .carrinho-cadastro,
.carrinho .carrinho-concluido{
    display: none;
}
/* CARRINHO CHEIO */
.carrinho .carrinho-cheio{
    width: 100%;
    height: 100%;
    gap: 50px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 50px;
    align-content: flex-start;
    position: relative;
}
.carrinho .carrinho-cheio .progresso .check:nth-child(3) i,
.carrinho .carrinho-cheio .progresso .check:nth-child(3) span,
.carrinho .carrinho-cheio .progresso .check:nth-child(5) i,
.carrinho .carrinho-cheio .progresso .check:nth-child(5) span{
    color: #54565A50;
}
.carrinho .carrinho-cheio .progresso .div:nth-child(4){
    background-color: #54565A50;
}
.carrinho .carrinho-cheio .texto{
    width: 100%;
    gap: 20px;
    flex-grow: 1;
    padding-bottom: 50px;
}
.carrinho .carrinho-cheio .texto h6{
    width: 100%;
}
.carrinho .carrinho-cheio .texto .prod-carrinho{
    width: 100%;
    max-height: 400px;
    overflow-x: hidden; 
    overflow-y: auto;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box{
    width: 100%;
    min-height: 116px;
    padding: 10px 5px;
    gap: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .img{
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .img img{
    max-width: 70px;
    max-height: 70px;
    object-fit: contain;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .desc{
    justify-content: space-between;
    max-width: calc(100% - 100px);
    height: 100%;
    padding-right: 20px;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .desc .cod{
    color: var(--sub-t);
    font-size: 16px;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .desc p{
    font-weight: 700;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .desc .unidade{
    color: var(--sub-t);
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .qtd{
    gap: 20px;
    margin-left: auto;
    margin-right: 30px;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .qtd span{
    width: 100%;
    color: var(--sub-t);
    font-size: 20px;
    font-weight: 600;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .qtd .input-group {
    display: flex;
    align-items: center;
    border: 2px solid #C2C8D0;
    border-radius: 5px;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .qtd input[type="number"] {
    width: 48px;
    height: 48px;
    text-align: center;
    border-right: 2px solid #C2C8D0;
    border-left: 2px solid #C2C8D0;
    -moz-appearance: textfield;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .qtd input[type="number"]::-webkit-inner-spin-button, 
.carrinho .carrinho-cheio .texto .prod-carrinho .box .qtd input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .qtd button {
    width: 48px;
    height: 48px;
    text-align: center;
    cursor: pointer;
    font-size: 40px;
    font-weight: 200;
    display: flex;
    justify-content: center;
    align-items: center;
}
.carrinho .carrinho-cheio .texto .prod-carrinho .box .excluir a i{
    font-size: 25px;
}
.carrinho .carrinho-cheio .botoes{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
    align-items: stretch;
    column-gap: 20px;
    row-gap: 20px;
    margin-top: auto;
}
.carrinho .carrinho-cheio .botoes .link{
    width: 100%;
}
.carrinho .carrinho-cheio .botoes a{
    border: 2px solid #000;
    border-radius: 5px;
}
.carrinho .carrinho-cheio .botoes button{
    background-color: var(--cor-1);
    border: 2px solid var(--cor-1);
    border-radius: 5px;
    transition: ease .3s;
}
.carrinho .carrinho-cheio .botoes .link:hover{
    border: 2px solid var(--hover-1);
    background-color: var(--hover-1);
    transition: ease .3s;
}
/* CARRINHO CADASTRO */
.carrinho .carrinho-cadastro{
    width: 100%;
    height: 100%;
    gap: 50px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 50px;
    align-content: flex-start;
    position: relative;
}
.carrinho .carrinho-cadastro .progresso .check:nth-child(5) i,
.carrinho .carrinho-cadastro .progresso .check:nth-child(5) span{
    color: #54565A50;
}
.carrinho .carrinho-cadastro .form{
    width: 100%;
    gap: 50px;
}
.carrinho .carrinho-cadastro .form form{
    width: 100%;
    gap: 25px;
}
.carrinho .carrinho-cadastro .form form div{
    width: 100%;
    gap: 5px;
}
.carrinho .carrinho-cadastro .form form div h6{
    font-weight: 600;
}
.carrinho .carrinho-cadastro .form form div input{
    width: 100%;
    height: 60px;
    border: 2px solid #C2C8D0;
    border-radius: 5px;
    background-color: transparent;
    padding: 0 20px;
}
.carrinho .carrinho-cadastro .botoes{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
    align-items: stretch;
    column-gap: 20px;
    row-gap: 20px;
    margin-top: auto;
}
.carrinho .carrinho-cadastro .botoes .link{
    width: 100%;
}
.carrinho .carrinho-cadastro .botoes a{
    border: 2px solid #000;
    border-radius: 5px;
}
.carrinho .carrinho-cadastro .botoes button{
    background-color: var(--cor-1);
    border: 2px solid var(--cor-1);
    border-radius: 5px;
    transition: ease .3s;
}
.carrinho .carrinho-cadastro .botoes .link:hover{
    border: 2px solid var(--hover-1);
    background-color: var(--hover-1);
    transition: ease .3s;
}
/* CARRINHO CONCLUIDO */
.carrinho .carrinho-concluido{
    width: 100%;
    max-height: 100vh;
    padding-right: 50px;
    gap: 50px;
    overflow: auto;
}
.carrinho .carrinho-concluido .texto{
    width: 100%;
    gap: 50px;
}
.carrinho .carrinho-concluido .texto .enviado{
    max-width: 510px;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    gap: 10px;
}
.carrinho .carrinho-concluido .texto .dados{
    width: 100%;
    padding: 20px;
    gap: 30px;
    background-color: #eeeeee;
    border-radius: 5px;
}
.carrinho .carrinho-concluido .texto .dados div{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}
.carrinho .carrinho-concluido .texto .dados div h6{
    font-size: 20px;
}
.carrinho .carrinho-concluido .texto .dados div span{
    color: var(--sub-t);
    font-size: 20px;
}
.carrinho .carrinho-concluido .texto .lista{
    width: 100%;
    gap: 20px;
    flex-grow: 1;
    padding-bottom: 50px;
}
.carrinho .carrinho-concluido .texto .lista h6{
    width: 100%;
}
.carrinho .carrinho-concluido .texto .lista .prod-carrinho{
    width: 100%;
    max-height: 350px;
    overflow-x: hidden; 
    overflow-y: auto;
}
.carrinho .carrinho-concluido .texto .lista .prod-carrinho .box{
    width: 100%;
    height: 116px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.carrinho .carrinho-concluido .texto .lista .prod-carrinho .box .img{
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
}
.carrinho .carrinho-concluido .texto .lista .prod-carrinho .box .img img{
    max-width: 70px;
    max-height: 70px;
    object-fit: contain;
}
.carrinho .carrinho-concluido .texto .lista .prod-carrinho .box .desc{
    justify-content: space-between;
    height: 100%;
}
.carrinho .carrinho-concluido .texto .lista .prod-carrinho .box .desc .cod{
    color: var(--sub-t);
    font-size: 16px;
}
.carrinho .carrinho-concluido .texto .lista .prod-carrinho .box .desc p{
    font-weight: 700;
}
.carrinho .carrinho-concluido .texto .lista .prod-carrinho .box .desc .unidade{
    color: var(--sub-t);
}


/* PAGINAÇÃO */
.paginacao{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.paginacao .lista-paginacao{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.paginacao .lista-paginacao span, 
.paginacao .lista-paginacao li a{
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-2);
    transition: ease .3s;
}

.paginacao .lista-paginacao span:hover, 
.paginacao .lista-paginacao li a:hover,
.paginacao .lista-paginacao li a.active{
    color: var(--cor-1);
    scale: 1.4;
    transition: ease .3s;
}


/* MEDIA DESKTOP */
@media screen and (max-width: 1600px){
    .form-footer .container{
        padding: 98px;
    }
}

@media screen and (max-width: 1440px){
    .form-footer .container{
        padding: 88px;
    }
}

@media screen and (max-width: 1366px){
    .form-footer .container{
        padding: 78px;
    }
}

@media screen and (max-width: 1280px){
    .form-footer .container{
        padding: 58px;
    }
    .form-footer .form-f{
        padding: 35px;
    }
}

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

@media screen and (max-width: 1200px){
    .form-footer .container{
        padding: 50px;
    }
    .form-footer .form-f{
        padding: 35px 20px;
    }
}
@media screen and (max-width: 1100px){
    .form-footer .container{
        padding: 30px;
    }
    .form-footer .form-f{
        padding: 30px 20px;
    }
    .form-footer .form-f .inputs{
        flex-direction: column;
    }


}

/* MOBILE */
@media screen and (max-width: 1000px){
    .form-footer .container{
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        padding: 50px 20px;
    }

    .carrinho .carrinho-concluido{
        padding-right: 10px;
    }
    .carrinho .carrinho-div .progresso{
        max-width: 100%;
        padding-right: 100px;
    }
}

@media screen and (max-width: 800px){
    .banner .absolute-container .container h2{
        font-size: 52px!important;
    }
    .carrinho .carrinho-cheio .texto .prod-carrinho .box{
        flex-direction: column;
        height: fit-content;
        gap: 30px;
        padding: 20px;
    }
    .carrinho .carrinho-cheio .texto .prod-carrinho .box .qtd{
        margin: unset;
    }
    .carrinho .carrinho-cheio .botoes{
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px){
    .banner .absolute-container .container h2{
        font-size: 45px!important;
        line-height: 1;
    }

    .carrinho .carrinho-div{
        padding: 20px 0 20px 20px;
    }
    .carrinho .carrinho-cheio{
        padding-right: 20px;
    }
    .carrinho .carrinho-div .progresso{
        display: none;
    }
}

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

}

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

}
