/* ===================================
   TABLET & MOBILE
=================================== */

@media (max-width:991px){

    .header .container{
        padding:15px 20px;
    }

    .menu-toggle{
        display:block;
    }

    .navbar{
        display:none;
    }

    .btn{
        display:none;
    }

    .hero-content{
        flex-direction:column;
        text-align:center;
        gap:50px;
    }

    .hero-left h1{
        font-size:42px;
    }

    .hero-left p{
        margin:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-right{
        height:auto;
    }

    .book{
        position:relative;
        width:170px;
        margin:10px;
    }

    .one,
    .two,
    .three,
    .four{
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
        transform:none;
    }

}
.navbar.active{

    display:block;
    position:absolute;
    top:85px;
    left:0;
    width:100%;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.1);
    padding:20px;

}

.navbar.active ul{

    display:flex;
    flex-direction:column;
    gap:20px;

}