.section {
    max-width: 800px;
    margin: 0 auto;
    position: absolute;
}

.carrousel {
    background-color:white;
    padding: 1rem;
}

.carrousel .box-container {
    display: flex;
    justify-content: space-around;
    gap: 10px;
}

.carrousel .box-container .box {
    border-radius: 10px;
    text-align: center;
    margin-top: 77px;
    transition: all 0.4s;
    padding: 5px;
    width: 220px;
}

.carrousel .box-container .box:hover {
    background-color: #82a1f741;
}

.box h3 {
    font-size: 16px;
    font-weight: 600;
    color: #06102B;
}

.box a {
    font-size: 14px;
    font-weight: 400;
    
}

.box p {
    font-size: 14px;
    color: #1a6ccd;
}

.box a:visited {
    color: #06102B;
}

/* banner principal */

.image img {
    max-width: 100%;
    height: auto;
}
.text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 600px;
    width: auto;
    background-size: cover;
}

.cpu {
    background-image: url("/assets/img/capa-pdv.png")
}

.leitor {
    background-image: url("/assets/img/capa-leitor.jpg")
}

.impressora {
    background-image: url("/assets/img/capa-impressora.jpg")
}

.teclado {
    background-image: url("/assets/img/capa-teclado.jpg")
}

.balanca {
    background-image: url("/assets/img/capa-balanca.jpg")
}

.terminal {
    background-image: url("/assets/img/capa-terminal.jpg")
}

.gaveta {
    background-image: url("/assets/img/capa-gaveta.jpg")
}

.text h1 {
    margin-left: 50px;
    font-size: 80px;
    font-family: Roboto Slab;
    color: white;
}

.text h3 {
    margin-left: 50px;
    font-size: 30px;
    color: white;
    font-weight: 500;
}

.intro {
    display: flex;
    justify-content: center;
    text-align: center;
    background-color:rgba(255, 255, 255, 0.90);
    font-size: 40px;
    font-family: Roboto Slab;
    color: #06102B;
}

.produtos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.90);
    gap:15px;
    padding-bottom: 10px;
}

.p {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 500px;
    height: auto;
    margin-top: 100px;
    font-family: 'Open Sans', sans-serif;
    color: #06102B;
    font-size: 15px;
    font-weight: 500;
}

.p img {
   width: 30%;
}
.produtos .p button {
    display: inline;
    transition: all 0.4s;
    font-weight: 500;
    font-size: 15px;  
    color: #06102B;
    border-radius: 5px;
    border-style: none;  
    background-color: #85BFDD;
    padding: 10px 20px;
    font-weight:600;
    text-transform:uppercase;
}
 
.produtos .p button:hover {
    cursor: pointer;
    color: #85BFDD;
    background-color: #06102B;
    padding: 10px 20px;
}

.introClientes {
    display: flex;
    justify-content: center;
    text-align: center;
    background-color:rgb(255, 255, 255);
    font-size: 30px;
    font-family: Roboto Slab;
    color: #06102B;
}

.box-container .box-parceiro img {
    width: 260px;
  }

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

    .nav-list {
        top: 55px !important; 
    }
    
    .gnv {
        margin-top: 35px !important;
    }

    .carrousel {
        background-color: white;
    }

    .carrousel .box-container {
        display: flex;
        justify-content:stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 0px 50px 0px 50px;
    }
    
    .carrousel .box-container .box, .carrousel .box-container .box-parceiro {
        width: 250px;
        border-radius: 10px;
        text-align: center;
        flex: 0 0 auto;
        scroll-snap-align: center;
    }

    .text {
        text-align: center; 
    }

    .text h1 {
        font-size: 12vw; 
        margin-left: 0px;
        margin-bottom: 0;
    }

    .text h3 {
        font-size: 5vw; 
        margin-left: 0px;
        margin-top: 0;
    }

    .image img {
        max-width: 100%; 
        max-height: 70vh; 
        object-fit: cover; 
        width: 100%; 
        height: 500px;
    }

    .intro h1 {
        font-size: 35px;
    }

    .p {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 500px;
        height: auto;
        margin-top: 100px;
        font-family: Roboto Slab;
        color: #06102B;
        font-size: 15px;
        padding: 15px;
    }

}

@media screen and (max-width: 400px) {
    .carrousel .box-container .box, .carrousel .box-container .box-parceiro {
        width: 235px;
    }
}