body {
   
    overflow: hidden; /* Impede a rolagem vertical e horizontal 
    padding-top: 80px;
}

.sectionslite {
    height: 100vh; /* Reduz a altura do contêiner para 90% da altura da janela de visualização */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    background-color: rgb(255, 255, 255);
    /*margin-bottom: 10vh; /* Adiciona uma margem inferior de 10% da altura da janela de visualização */
}














/* Book */
.book {
    margin-top: 40px;
    position: relative;
    width: 390px;
    height: 600px;
    transition: transform 0.5s;
}

.paper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    perspective: 1500px;
    transition: transform 1s;

}

.front,
.back {
    background-color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: left;
    transition: transform 0.5s;
}

.front {
    z-index: 1;
    backface-visibility: hidden;
    border-left: 3px solid rgb(255, 255, 255);
}

.back {
    z-index: 0;
}

.front-content,
.back-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-content {
    transform: rotateY(180deg)
}

/* Paper flip effect */
.flipped .front,
.flipped .back {
    transform: rotateY(-180deg);
}


i {
    font-size: 50px;
    color: gray;
}

/* Paper stack order */
#p1 {
    z-index: 3;
}

#p2 {
    z-index: 2;
}

#p3 {
    z-index: 1;
}


.col-4{
    margin-left: -15px;
    font-weight:bold;

}
.col{
    font-weight: bold;
    margin-left: -7px;
}

.col-8{
    margin-left: 50px;
    font-weight:bold;

}

/* Controller Buttons */

.nextb-button button {
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    background-color: #d05757f0;

}

.nextb-button button a {
    text-decoration: none;
    color: #151414;
    font-weight: 500;
    font-size: 1.1rem;
}



* {
    padding: 0;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

header {
    background-color: #ffffff;
    box-shadow: 0px 3px 10px #bababa;
}

@media screen and (max-width: 730px) {
    .nav-bar {
        padding: 1rem 1rem;
        
    }
    .nav-item {
        display: none;
    }
    .login-button {
        display: none;
    }
    .mobile-menu-icon {
        display: block;
    }
    .mobile-menu-icon button {
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
    .mobile-menu ul {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding-bottom: 1rem;
    }
    .mobile-menu .nav-item {
        display: block;
        padding-top: 1.2rem;
    }
    .mobile-menu .login-button {
        display: block;
        padding: 1rem 2rem;
    }
    .mobile-menu .login-button button {
        width: 100%;
    }
    .open {
        display: block;
    }
}


/*** FEITO POR: LARISSA V. KICH ***/






#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 1000;
}


.o-button--primary {
    background-color: #38ab9e;
    color: #FFFFFF;
}

#button-container {
 
    width: 350px; /* Ajuste para a largura do seu livro */
    margin: 10px auto; /* Centraliza o contêiner dos botões */
    margin-top: -100px;
}

@media (max-width: 600px) {
    #button-container {
      
        
        margin-top: -100px;
    }


}



.buttonab {
    font-family:Arial, Helvetica, sans-serif;
    
    font-size:19px;
    
    border-radius:6px;
    
    padding-left:10px;
    
    padding-right:10px;
    
    padding-top:5px;
    
    padding-bottom:5px;
    
    color:#ffffff;
    
    background-color:#383d52;
    
    outline:none;
    
    border:none;
    
    cursor:pointer;
    
    display:inline-block;
    
    text-decoration: none;
    
    transition: .4s;
    margin-left: 4px;
    
    }
    
    .buttonAdicionar:hover {
    color:#ffffff;
    
    background-color:#100d0d;
    
    }

       .btn-excluir {
        font-family:Arial, Helvetica, sans-serif;
        
        font-size:19px;
        
        border-radius:6px;
        
        padding-left:10px;
        
        padding-right:10px;
        
        padding-top:5px;
        
        padding-bottom:5px;
        
        color:#ffffff;
        
        background-color:#ff8c9d;
        
        outline:none;
        
        border:none;
        
        cursor:pointer;
        
        display:inline-block;
        
        text-decoration: none;
        
        transition: .4s;
        margin-top: 5px;
        margin-left: 5px;
        
        }
        
        .button:hover {
        color:#ffffff;
        
        background-color:#ff1c1c;
        
        }

        .formatacaoespaco{
            
            padding-left:65px;
        }
        .formatacatdPreco{
            padding-left:25px;
            font-weight: 600;
        }




        @keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
          }
          
          .shake {
            animation: shake 0.5s;
            animation-iteration-count: infinite;
          }

    


@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}


    .buttonWhats {
        font-family:Arial, Helvetica, sans-serif;
        
        font-size:18px;
        
        border-radius:5px;
        
        padding-left:4px;
        
        padding-right:11px;
        
        padding-top:10px;
        
        padding-bottom:10px;
        
        color:#ffffff;
        
        background-color:#35fa80;
        
        outline:none;
        
        border:none;
        
        cursor:pointer;
        
        display:inline-block;
        
        text-decoration: none;
        
        transition: .4s;
        
        }
        
        .button:hover {
        color:#ffffff;
        
        background-color:#414141;
        
        }



        .carrocel{
            margin-top: 90px;
            width: 390px;
            height: 600px;
            overflow: hidden;
            box-shadow: 10px 10px 15px rgb(179, 179, 179) ;

            display: flex;
            justify-content: center;
             align-items: center;
        }