@media screen and (max-width: 1300px){
    .room-div, .room-div2{
        padding: 100px 100px 0 100px;
    }
}
@media screen and (max-width: 1024px){
    .hero .nav{
        padding: 20px 50px 0 50px;
    }
    .nav .menu a{
        font-size: 12px;
    }
    .footer-div{
        padding:40px 100px;
    }
    .home{
        padding: 10px 20px;
    }
    .home a img{
        width:80px;
    }
    .search-divv{
        width:100%;
        height: auto;
        padding: 50px 50px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .book{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .check-divvv{
        width:350px;
        height: 350px;
        background-color: #333333;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px;
    }
    .check-divvv .check{
        background-color: #242424;
        width:120px;
        height: 120px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    .check-divvv .check label{
        font-size: 16px;
        font-family: 'Open Sans', sans-serif;
        display: block;
        color:#fff;
        width:100%;
        text-align: center;
    }
    .check-divvv .check form{
        display: block;
    }
    input[type="date"]{
        border:none;
        font-size: 14px;
        margin-top: 10px;
        color:#D7A829;
        background-color: transparent;
        width: 60px;
    }
    input[type="date"]:focus{
        outline:none;
    }
    ::-webkit-calendar-picker-indicator{ 
       background-color:#D7A829;
       border-radius: 50%;
       cursor: pointer;
    }
    .check-divvv select{
        margin-top: 10px;
        border:none;
        font-size: 30px;
        outline: none;
        font-weight: bold;
        color:#D7A829;
        cursor: pointer;
        background-color: transparent;
    }
    .search-divv .reservation-div{
        width:100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .search-divv{
        padding: 50px 20px;
        justify-content: space-around;
    }
    .check-div{
        width:350px;
        height: 350px;
        background-color: #333333;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px;
    }
    .check-div .check{
        background-color: #242424;
        width:120px;
        height: 120px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    .check label{
        font-size: 16px;
        font-family: 'Open Sans', sans-serif;
        display: block;
        color:#fff;
        width:100%;
        text-align: center;
    }
    input[type="date"]{
        border:none;
        font-size: 14px;
        margin-top: 10px;
        color:#D7A829;
        background-color: transparent;
        width: 60px;
    }
    .check-div select{
        margin-top: 10px;
        border:none;
        font-size: 30px;
        outline: none;
        font-weight: bold;
        color:#D7A829;
        cursor: pointer;
        background-color: transparent;
    }
    .roomr{
        width:300px;
        height: 540px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        transition-duration: .5s;
        margin-bottom: 40px;
        border:1px solid #e0dfdf;
        margin-top: 0;
    }
    .roomr img{
        width:300px;
        height: 240px;
    }
    .roomr p{
        color:#212121;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 20px;
        margin-top: 10px;
        margin-right: 10px;
        text-align: center;
    }
    .roomr b{
        color:#184891;
        font-family: 'Open Sans', sans-serif;
        font-size: 22px;
        margin-top: 20px;
        text-align: center;
    }
    .roomr a{
        padding: 8px 20px;
        background-color: #D7A829;
        border-radius: 20px;
        text-decoration: none;
        font-size: 12px;
        color:#fff;
        transition-duration: .5s;
    }
    .roomr a:hover{
        background-color: #000;
        color:#fff;
    }
    .roomr .icon{
        width:100%;
        margin-top: 20px;
        padding: 20px 0;
        border-top:1px solid #e0dfdf
    }
    .roomr .icon img{
        width:250px;
        height: auto;
    }
    .availability a{
        padding: 8px 22px;
        font-size: 6px;
    }
    .room-div, .room-div2{
        padding: 100px 60px 0 60px;
    }
    .room{
        width:45%;
    }
    .room img{
        width:400px;
    }
    .room-div .txt-div, .room-div2 .txt-div{
        width:40%;
        color:#191613;
    }
    .room-div .txt-div .txt, .room-div2 .txt-div .txt{
        font-size:25px;
        margin-bottom: 30px;
    }
    .room-div .txt-div a, .room-div2 .txt-div a{
        padding: 16px 22px;
    }
    .discover-div{
        padding: 160px  100px 20px 100px;
    }
    .discover-div .txt-div{
        width:40%;
    }
    .discover-div .txt-div .txt{
        font-size:25px;
        margin-bottom: 30px;
    }
    .discover-div .img{
        width:60%;
    }
    .discover-div .img img{
        width:300px;
    }
    .discover-div .txt:before{
        width:80px;
        height: 3px;
        top:-30px;
    }
    .catering{
        height: 400px;
    }
    .catering img{
        width:800px;
        height: 400px;
        transition-duration: .5s;
    }
    .caterings{
        padding:50px 100px;
    }
    .catering-txt{
        width:40%
    }
    .caterings img{
        width:300px;    
    }
    .caterings b{
        font-size:25px;
        margin-bottom: 0 30px 35px 30px;
    }
    .footer-div{
        padding:40px 100px;
    }
    .phamarcy-tab{
        justify-content: center;
    }
    .tastep{
        padding: 100px 100px;
    }
    .tastep .txt-heading{
        font-size:28px;
    }
    .icon-list{
        padding: 80px 100px 0 100px;
    }
    .icon-list .txt-div .txt{
        font-size:22px;
        margin-bottom: 20px;
    }
    .book-us{
        padding: 100px 100px;
    }
    .book-us div{
        margin-bottom: 50px;
    }
    .book-us div p{
        font-size:25px;
    }
    .check-diva{
        width:80%;
        top:520px;
        left:12%;    
    }
    .check-diva .check-in, .check-out{
        padding: 20px; 
    }
    .check-diva .availability{
        padding: 10px; 
    }
    .check-diva label{
        font-size: 10px;
    }
    .check-diva form{
        display: block;
    }
    input[type="date"]{
        border:none;
        font-size: 12px;
        margin-top: 10px;
    }
    .check-diva select{
        margin-top: 10px;
        border:none;
        font-size: 28px;
    }
    .hero-txta{
        margin: 100px 100px 0 100px;
    }
    .luxury-div{
        padding: 160px  100px 20px 100px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .luxury-div .txt-div{
        width:46%;
        height: auto;
    }
    .luxury-div .txt-div .txt{
        font-size:25px;
        margin-bottom: 30px;
    }
    .luxury-div .img{
        width:45%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start; 
    }
    .luxury-div .img img{
        width:400px;
        position: relative;
        top:-50px;
    }
    .luxury-div .txt{
        position: relative;
    }
    .luxury-div .txt:before{
        width:80px;
        height: 3px;
        top:-30px;
    }
    .explore-div{
        width:100%;
        height: auto;
        position: relative;
        padding: 160px  100px 100px 100px;
        background-color: #f5f5f5;
    }
    .explore-div .txt{
        font-size:25px;
    }
    .explore-div .txt:before{
        top:-30px;
        left:400px
    }
    .explore-div .explore{
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 50px;
    }
    .explore .room{
        width:250px;
        margin-bottom: 20PX;
    }
    .mission-div{
        padding: 160px  50px 0px 50px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-x: hidden;
    }
    .mission-div .mission{
        width:100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-top: 20px;
    }
    .mission-div .mission .txt{
        width: 48%;
    }
    .mission-div .mission b{
        font-family: 'Open Sans', sans-serif;
        font-size:16px;
        margin-bottom: 0 30px 35px 30px;
        color:#212121;
    }
    .mission-div .mission p{
        color:#212121;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 40px;
        margin-top: 20px;
    }
    .mission-div .mission img{
        width:250px;
        position: relative;
        top:-50px;
    }
}
@media screen and (max-width: 768px){
    .hero .nav{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        background-color: #fff;
        padding-top: 0px;
    }
    .nav .box{
        display: block;
    }
    .logo{
        margin-top: 20px;
    }
    .logo img{
        width:120px;
    }
    .nav .menu{
        width:100%;
        height: 80vh;
        padding:30px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items:center ;
        background-color: #fff;
        position: absolute;
        top:50px;
        border-top:1px solid #D7A829;
        transform: translateX(200%);
    }
    .nav .menu a{
        color:#D7A829;
    }
    .toggle .line1{
        transform: rotate(45deg) translateY(10px);
        left:10px;
        top:4px;
    }
    .toggle .line3{
        transform: rotate(-45deg) translateY(-10px);
        left:10px;
    }
    .toggle .line2{
        opacity: 0;
    }
    .showMenu.menu{
        transform: translateX(0);
    }
    .hero-txt{
       padding: 0 50px;
    }
    .hero-heading{
        font-size: 40px;
    }
    .footer{
        justify-content: center;
    }
        .logo-div{
            width:300px;
            align-items: center;
        }
        .link{
            width:300px;
            align-items: center;
        }
        .home{
            padding: 10px 20px;
        }
        .home a img{
            width:80px;
        }
        .search-div{
            padding: 50px 20px;
            justify-content: space-around;
        }
        .check-div{
            width:350px;
            height: 350px;
            background-color: #333333;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            padding: 10px;
            margin-bottom: 40px;
        }
        .check-div .check{
            background-color: #242424;
            width:120px;
            height: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }
        .check label{
            font-size: 16px;
            font-family: 'Open Sans', sans-serif;
            display: block;
            color:#fff;
            width:100%;
            text-align: center;
        }
        input[type="date"]{
            border:none;
            font-size: 14px;
            margin-top: 10px;
            color:#D7A829;
            background-color: transparent;
            width: 60px;
        }
        .check-div select{
            margin-top: 10px;
            border:none;
            font-size: 30px;
            outline: none;
            font-weight: bold;
            color:#D7A829;
            cursor: pointer;
            background-color: transparent;
        }
        .rooma{
            width:300px;
            height: 540px;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-wrap: wrap;
            transition-duration: .5s;
            margin-bottom: 40px;
            border:1px solid #e0dfdf;
        }
        .rooma img{
            width:300px;
            height: 240px;
        }
        .rooma p{
            color:#212121;
            font-family: 'Montserrat', sans-serif;
            font-weight: 300;
            font-size: 12px;
            line-height: 20px;
            margin-bottom: 20px;
            margin-top: 10px;
            margin-right: 10px;
            text-align: center;
        }
        .rooma b{
            color:#184891;
            font-family: 'Open Sans', sans-serif;
            font-size: 22px;
            margin-top: 20px;
            text-align: center;
        }
        .rooma a{
            padding: 8px 20px;
            background-color: #D7A829;
            border-radius: 20px;
            text-decoration: none;
            font-size: 12px;
            color:#fff;
            transition-duration: .5s;
        }
        .rooma a:hover{
            background-color: #000;
            color:#fff;
        }
        .rooma .icon{
            width:100%;
            margin-top: 20px;
            padding: 20px 0;
            border-top:1px solid #e0dfdf
        }
        .rooma .icon img{
            width:250px;
            height: auto;
        }
        .search-divv{
            width:100%;
            height: auto;
            padding: 50px 50px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .book{
            width:100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap: wrap;
        }
        .check-divvv{
            width:350px;
            height: 350px;
            background-color: #333333;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            padding: 10px;
        }
        .check-divvv .check{
            background-color: #242424;
            width:120px;
            height: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }
        .check-divvv .check label{
            font-size: 16px;
            font-family: 'Open Sans', sans-serif;
            display: block;
            color:#fff;
            width:100%;
            text-align: center;
        }
        .check-divvv .check form{
            display: block;
        }
        input[type="date"]{
            border:none;
            font-size: 14px;
            margin-top: 10px;
            color:#D7A829;
            background-color: transparent;
            width: 60px;
        }
        input[type="date"]:focus{
            outline:none;
        }
        ::-webkit-calendar-picker-indicator{ 
           background-color:#D7A829;
           border-radius: 50%;
           cursor: pointer;
        }
        .check-divvv select{
            margin-top: 10px;
            border:none;
            font-size: 30px;
            outline: none;
            font-weight: bold;
            color:#D7A829;
            cursor: pointer;
            background-color: transparent;
        }
        .search-divv .reservation-div{
            width:100%;
            height: auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .search-divv{
            padding: 50px 20px;
            justify-content: space-around;
        }
        .check-div{
            width:350px;
            height: 350px;
            background-color: #333333;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            padding: 10px;
        }
        .check-div .check{
            background-color: #242424;
            width:120px;
            height: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }
        .check label{
            font-size: 16px;
            font-family: 'Open Sans', sans-serif;
            display: block;
            color:#fff;
            width:100%;
            text-align: center;
        }
        input[type="date"]{
            border:none;
            font-size: 14px;
            margin-top: 10px;
            color:#D7A829;
            background-color: transparent;
            width: 60px;
        }
        .check-div select{
            margin-top: 10px;
            border:none;
            font-size: 30px;
            outline: none;
            font-weight: bold;
            color:#D7A829;
            cursor: pointer;
            background-color: transparent;
        }
        .roomr{
            width:380px;
            height: 540px;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-wrap: wrap;
            transition-duration: .5s;
            margin-bottom: 40px;
            border:1px solid #e0dfdf;
            margin-top: 40px;
        }
        .roomr img{
            width:300px;
            height: 240px;
        }
        .roomr p{
            color:#212121;
            font-family: 'Montserrat', sans-serif;
            font-weight: 300;
            font-size: 12px;
            line-height: 20px;
            margin-bottom: 20px;
            margin-top: 10px;
            margin-right: 10px;
            text-align: center;
        }
        .roomr b{
            color:#184891;
            font-family: 'Open Sans', sans-serif;
            font-size: 22px;
            margin-top: 20px;
            text-align: center;
        }
        .roomr a{
            padding: 8px 20px;
            background-color: #D7A829;
            border-radius: 20px;
            text-decoration: none;
            font-size: 12px;
            color:#fff;
            transition-duration: .5s;
        }
        .roomr a:hover{
            background-color: #000;
            color:#fff;
        }
        .roomr .icon{
            width:100%;
            margin-top: 20px;
            padding: 20px 0;
            border-top:1px solid #e0dfdf
        }
        .roomr .icon img{
            width:250px;
            height: auto;
        }
        .reservation .reservation-txt{
            font-size:16px;
        }
        .book .roomz{
            width:50%;
        }
        .special{
            padding-top:0px;
        }
        .special .txt, .guest .txt{
            width:100%;
            text-align: center;
        }
        .special textarea{
            width:100%;
            height: 150px;
            border:1px solid #dbd5d5;
            margin-top: 20px;
        }
        .special{
            padding:20px 20px 30px 20px;
        }
        .guest-info{
            
            border-top:2px solid #e0dddd;
        }
        .guest-info .guest, .guest2{
            width:100%;
            text-align: center;
            padding: 50px 30px 80px 30px;   
        }
        .guest form{
            width:100%;
            font-family: 'Montserrat', sans-serif;
            color:#807777;
            font-size: 12px;
            line-height: 20px;
            margin-top: 30px;
        }
        .guest form label{
            display: block;
            font-weight: 600;
            margin-bottom: 10px;
            margin-top: 20px;
            color:#807777;
        }
        .guest form input{
            width:280px;
            height: 30px;
            border:2px solid #e0dddd;
            border-radius: 4px;
            outline:none;
        }
        .guest .tab-con{
            justify-content: center;
        }
        .guest .tab{
            width:160px;
            display: flex;
        }
        
        .guest form img{
            margin-top: 30px;
        }
        .info{
            padding: 100px 20px;
        }
        .guest2{
            border-left:none;
        }
        .success{
            width:60%;
            height: 40%;
            background-color: #fff;
        }
        .check-divv{
            width:90%;
            top:450px;
            left:5%; 
            display: flex;
            justify-content: space-between;
            align-items: center;   
        }
        .check-divv .check-in, .check-out{
            padding: 5px; 
        }
        .check-divv .availability{
            padding: 5px; 
        }
        .check-divv label{
            font-size: 8px;
        }
        .check-divv form{
            display: block;
        }
        input[type="date"]{
            border:none;
            font-size: 10px;
            margin-top: 10px;
            width:60px;
        }
        .check-divv select{
            margin-top: 10px;
            border:none;
            font-size: 16px;
        }
        .room-div, .room-div2{
            padding: 50px 50px 20px 50px;
            justify-content: center;
            flex-wrap: wrap;
            flex-direction: column-reverse;
        }
        .room{
            width:100%;
            display: flex;
            justify-content: center;
            flex-direction: row;
        }
        
        .room-div .txt-div, .room-div2 .txt-div{
            width:100%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            
        }
        .room img{
            margin-bottom: 20px;
        }
        .room-div .txt-div .txt, .room-div2 .txt-div .txt{
            font-size:25px;
            margin-bottom: 25px;
        }
        .room-div .txt-div .price, .room-div2 .txt-div .price{
            margin-top: 20px;
            margin-bottom: 30px;
            font-size: 12px;
        }
        .room-div .txt-div .price, .room-div2 .txt-div .price{
            margin-bottom: 10px;
        }
        .room-div .txt-div .txt, .room-div2 .txt-div .txt{
            margin-bottom: 0px;
        }
        .discover-div{
            padding: 160px  50px 20px 50px;
            justify-content: center;
        }
        .discover-div .txt-div{
            width:100%;
            text-align: center;
        }
        .discover-div .txt-div .txt{
            font-size:25px;
            margin: 0 10px 30px 0px;
        }
        .discover-div .img{
            width:100%;
            display: flex;
            justify-content: center;
        }
        .discover-div .img img{
            width:300px;
            top:0px;
        }
        .discover-div .txt:before{
            display: none;
        }
        .catering{
            height: 350px;
        }
        .catering img{
            width:600px;
            height: 350px;
            transition-duration: .5s;
        }
        .catering img:hover{
            margin-left: 80px;
        }
        .caterings{
            padding:50px 50px;
        }
        .catering-txt{
            width:100%;
            text-align:center;
            margin-bottom: 50px;
        }
        .caterings img{
            width:300px;    
        }
        .caterings b{
            font-size:25px;
            margin-bottom: 0 30px 35px 30px;
        }
        .food-div{
            padding:100px 50px;
        }
        .food-div .food-divv{
            justify-content: center;
        }
        .food-div .txt{
            font-size:26px;
        }
        .taste .txt-heading{
            font-size:22px;
            margin-bottom: 20px;
            margin-top: 20px;
        }
        .opening{
            width:100%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            
            margin-top: 50px;
            font-family: 'Open Sans', sans-serif;
            color:#191613;
            font-size: 12px;
        }
        .check-out{
            transform: scale(0.8);
            left:-15px;
            top:180px;
        }
        .tastep{
            padding: 50px 50px 100px 50px;
        }
        .tastep .txt-heading{
            font-size:22px;
        }
        .icon-list{
            padding: 20px 50px 0 50px;
        }
        .icon-list .txt-div .txt{
            font-size:20px;
            margin-bottom: 15px;
        }
        .icon-list .iconss{
            margin-left:50px;
        }
        .icon-list .iconss .img{
            width:30%;
            margin-bottom: 50px;
        }
        .book-us{
            padding: 50px 50px;
        }
        .book-us div{
            margin-bottom: 50px;
        }
        .book-us div p{
            font-size:20px;
            text-align: center;
        }
        .check-diva{
            width:90%;
            top:480px;
            left:5%; 
            display: flex;
            justify-content: space-between;
            align-items: center; 
        }
        .check-diva .check-in, .check-out{
            padding: 5px; 
        }
        .check-diva .availability{
            padding: 5px; 
        }
        .check-diva label{
            font-size: 8px;
        }
        .check-diva form{
            display: block;
        }
        input[type="date"]{
            border:none;
            font-size: 10px;
            margin-top: 10px;
            width:60px;
        }
        .check-diva select{
            margin-top: 10px;
            border:none;
            font-size: 16px;
        }
        .hero-txta{
            margin: 100px 50px 0 50px;
        }
        .luxury-div{
            padding: 150px  50px 20px 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            flex-direction: column-reverse;
        }
        .luxury-div .txt-div{
            width:100%;
            text-align: center;
        }
        .luxury-div .txt-div .txt{
            font-size:25px;
            margin-bottom: 30px;
            margin-top: 20px;
        }
        .luxury-div .img{
            width:45%;
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
        }
        .luxury-div .img img{
            width:300px;
            position: relative;
            top:-50px;
        }
        .luxury-div .txt{
            position: relative;
        }
        .luxury-div .txt:before{
           display: none;
        }
        .explore-div{
            width:100%;
            height: auto;
            position: relative;
            padding: 100px  50px 100px 50px;
            background-color: #f5f5f5;
        }
        .explore-div .txt{
            font-size:22px;
        }
        .explore-div .txt:before{
            top:-30px;
            left:300px
        }
        .explore-div .explore{
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 50px;
        }
        .explore .room{
            width:250px;
            margin-bottom: 40PX;
        }
        .mission-div{
            padding: 160px  20px 0px 20px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
            overflow-x: hidden;
        }
        .mission-div .mission{
            width:100%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        .mission-div .mission .txt{
            width: 100%;
            text-align: center;
        }
        .mission-div .mission b{
            font-family: 'Open Sans', sans-serif;
            font-size:16px;
            margin-bottom: 0 30px 35px 30px;
            color:#212121;
        }
        .mission-div .mission p{
            color:#212121;
            font-family: 'Montserrat', sans-serif;
            font-weight: 300;
            font-size: 12px;
            line-height: 20px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .mission-div .mission img{
            width:250px;
            position: relative;
            top:-50px;
        }
        .check-cart{
            width:300px;
            height:450px;
            background-color: #fff;
            border-radius: 6px;
            position: relative;
        }
        .check-cart img{
            width:60px;
        }
        .check-cart p{
            color:#212121;
            font-family: 'Open Sans', sans-serif;
            font-weight: 300;
            font-size: 10px;
            line-height: 20px;
        }
        .check-cart .header{
            width:300px;
            height: 40px;
            padding:10px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #dadada;
        }
        .check-cart .header b{
            font-size: 12px;
            font-family: 'Baskervville', serif;
            font-weight: bold;
            color:#184891
        }
        .check-cart .header #user{
            font-size: 12px;
            font-family: 'Baskervville', serif;
            color:#184891;
            margin-left: 40px;
        }
        .check-cart #cart-back{
            position: absolute;
            right: 20px;
        }
        .check-cart img{
            width:10px;
        }
        .check-cart .sideNav{
            width:300px;
            height: 40px;
            border-bottom: 1px solid #dadada;
            padding-top: 20px;
        }
        .check-cart .sideNav ul{
            list-style: none;
            width:100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }
        .check-cart .sideNav ul li{
            margin-bottom: 20px;
            font-size: 12px;
            font-family: 'Baskervville', serif;
            color:#bdbcbc;
        }
        .navActive{
            color:#184891 !important;
            font-weight: bold;
        }
        #arrow2, #arrow3, #arrow4{
            display: none;
        }
        .order-section{
            width:300px;
            height: 280px;
            border-bottom: 1px solid #dadada;
            overflow-y: scroll;
            position: absolute;
            top:50px;
            right: 0;
            padding-bottom: 20px;
        }
        table{
            width:100%;
            height: 100%;
            padding: 0 10px;
            margin-top: 30px;
        }
        table tr{
            width:100%;
        }
        td{
            position: relative;
        }
        table th{
            font-size: 8px;
            font-family: 'Baskervville', serif;
            color:#8d8b8b;
            font-weight: bold;
            text-align: left;
        }
        table td input{
            width:10px;
            margin-right: 3px;
        }
        table td{
            font-size: 12px;
            font-family: 'Baskervville', serif;
            color:#8d8b8b;
        }
        td .qty{
            width: 50px;
            height: 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            background-color: #dde9ff;
            color:#7089b6;
            border-radius: 8px;
        }
        td .qty i{
            font-size: 8px;
            margin-right: 5px;
            cursor: pointer;
        }
        td .qty span{
            font-size: 12px;
        }
        td #cart-price{
            margin-right: 15px;
        }
        td #remove{
            position: absolute;
            right:2px;
            top:20px;
            cursor:pointer
        }
        .total{
            background-color: #184891;
             height: 30px;
              padding: 0 5px;
               border-radius: 10px;
               margin-top: 30px;
        }
        .cart-button{
            width:100%;
            height: 30px;
            display: flex;
            justify-content: flex-end;
            margin-top: 280px;
            padding-right: 10px;
        }
        .check-cart a{
            padding: 8px 20px;
            background-color: #D7A829;
            border-radius: 12px;
            text-decoration: none;
            font-size: 10px;
            color:#fff;
            margin-right: 10px;
            transition-duration: .5s;
        }
        .check-cart a:hover{
            background-color: #000;
            color:#fff;
        }
}
@media screen and (max-width: 480px){
    .hero-txt{
        padding: 0 20px;
    }
    .hero-heading{
        font-size: 28px;
        margin-bottom: 20px;
    }
    .check-div{
        width:290px;
        height: 290px;
        background-color: #333333;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px;
        margin-bottom: 40px;
    }
    .check-div .check{
        background-color: #242424;
        width:100px;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    .check label{
        font-size: 14px;
        font-family: 'Open Sans', sans-serif;
        display: block;
        color:#fff;
        width:100%;
        text-align: center;
    }
    .check-divvv{
        width:290px;
        height: 290px;
        background-color: #333333;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px;
        margin-bottom: 40px;
    }
    .check-divvv .check{
        background-color: #242424;
        width:100px;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    .rooma{
        width:280px;
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        transition-duration: .5s;
        margin-bottom: 40px;
        border:1px solid #e0dfdf;
    }
    .rooma img{
        width:280px;
        height: 200px;
    }
    .rooma p{
        color:#212121;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 20px;
        margin-top: 10px;
        margin-right: 10px;
        text-align: center;
    }
    .rooma b{
        color:#184891;
        font-family: 'Open Sans', sans-serif;
        font-size: 20px;
        margin-top: 20px;
        text-align: center;
    }
    .rooma a{
        padding: 8px 20px;
        background-color: #D7A829;
        border-radius: 20px;
        text-decoration: none;
        font-size: 12px;
        color:#fff;
        transition-duration: .5s;
    }
    .rooma a:hover{
        background-color: #000;
        color:#fff;
    }
    .rooma .icon{
        width:100%;
        margin-top: 20px;
        padding: 20px 0;
        border-top:1px solid #e0dfdf
    }
    .rooma .icon img{
        width:250px;
        height: auto;
    }
    .roomz{
        width:85%;
        margin-bottom: 50px;
    }
    .reservation .reservation-txt{
        font-size:14px;
    }
    .guest form input{
        width:230px;
    }
    .guest form img{
        margin-top: 30px;
    }
    .success{
        width:80%;
        height: 30%;
    }
    .check-divv{
        width:98%;
        top:400px;
        left:1%; 
        display: flex;
        justify-content: space-between;
        align-items: center;   
    }
    .check-divv .check-in, .check-out{
        padding: 5px; 
    }
    .check-divv .availability{
        padding: 5px; 
    }
    .check-divv label{
        font-size: 8px;
    }
    .check-divv form{
        display: block;
    }
    input[type="date"]{
        border:none;
        font-size: 10px;
        margin-top: 10px;
        width:40px;
    }
    .check-divv select{
        margin-top: 10px;
        border:none;
        font-size: 16px;
    }*/
    .room-div, .room-div2{
        padding: 80px 20px 0 20px;
    }
    .discover-div{
        padding: 160px  20px 20px 20px;
        justify-content: center;
    }
    .discover-div .txt-div .txt{
        font-size:22px;
        margin: 0 10px 20px 0px;
    }
    .discover-div .img{
        width:100%;
    }
    .discover-div .img img{
        width:300px;
        top:0px;
    }
    .catering{
        height: 260px;
    }
    .catering img{
        width:400px;
        height: 260px;
        transition-duration: .5s;
    }
    .catering img:hover{
        margin-left: 80px;
    }
    .caterings{
        padding:50px 20px;
    }
    .catering-txt{
        width:100%;
        text-align:center;
        margin-bottom: 50px;
    }
    .caterings img{
        width:250px;    
    }
    .caterings b{
        font-size:22px;
        margin-bottom: 0 30px 35px 30px;
    }
    .food-div{
        padding:100px 20px;
    }
    .food-div .txt{
        font-size:24px;
    }
    .taste .txt-heading{
        font-size:20px;
    }
    .open{
        width:250px;
        height: 250px;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         box-shadow: 0 0 8px 0 rgba(0,0,0,.1);
         position: relative;
     }
     .rest-opening{
         width:250px;
         height: 250px;
     }
     .tastep{
        padding: 50px 20px 100px 20px;
    }
    .icon-list{
        padding: 80px 20px 0 20px;
    }
    .icon-list .iconss{
        margin-left:15px;
    }
    .icon-list .iconss .img{
        width:28%;
        margin-bottom: 50px;
    }
    .book-us{
        padding: 50px 20px;
    }
    .book-us div{
        margin-bottom: 40px;
    }
    .book-us div p{
        font-size:18px;
        text-align: center;
    }
    .check-diva{
        width:98%;
        top:520px;
        left:1%; 
        display: flex;
        justify-content: space-between;
        align-items: center;   
    }
    .check-diva .check-in, .check-out{
        padding: 5px; 
    }
    .check-diva .availability{
        padding: 5px; 
    }
    .check-diva label{
        font-size: 8px;
    }
    .check-diva form{
        display: block;
    }
    input[type="date"]{
        border:none;
        font-size: 10px;
        margin-top: 10px;
        width:40px;
    }
    .check-diva select{
        margin-top: 10px;
        border:none;
        font-size: 16px;
    }
    .hero-txta{
        margin: 100px 20px 0 20px;
    }
    .luxury-div{
        padding: 100px  20px 20px 20px;
    }
    .luxury-div .txt-div .txt{
        font-size:22px;
        margin-bottom: 30px;
        margin-top: 30px;
    }
    .luxury-div .img{
        width:60%;
        display: flex;
        align-items: flex-end;
        justify-content: center; 
    }
    .luxury-div .img img{
        width:300px;
        position: relative;
        top:-50px;
    }
    .explore-div{
        width:100%;
        height: auto;
        position: relative;
        padding: 100px  20px 100px 20px;
        background-color: #f5f5f5;
    }
    .explore-div .txt{
        font-size:22px;
    }
    .explore-div .txt:before{
        top:-30px;
        left:150px
    }
    .explore-div .explore{
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 50px;
    }
    .explore .room{
        width:250px;
        margin-bottom: 40PX;
    }
}
@media screen and (max-width: 320px){
    .success{
        width:90%;
        height: 30%;
    }
    .rooma{
        width:260px;
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        transition-duration: .5s;
        margin-bottom: 40px;
        border:1px solid #e0dfdf;
    }
    .rooma img{
        width:260px;
        height: 200px;
    }
    .rooma .icon{
        width:80%;
        margin-top: 20px;
        padding: 20px 0;
        border-top:1px solid #e0dfdf
    }
    .check-diva{
        transform:scale(0.8)
    }
    .check-diva .check-in, .check-out{
        padding: 2px; 
    }
    .check-diva .availability{
        padding: 5px; 
    }
    .check-diva select{
        font-size: 14px;
    }
    .check-diva a{
        font-size: 3px;
    }
    .check-diva{
        transform:scale(0.8);
        top:600px;
    }
    .check-diva .check-in, .check-out{
        padding: 2px; 
    }
    .check-diva .availability{
        padding: 5px; 
    }
    .check-diva select{
        font-size: 14px;
    }
    .check-diva a{
        font-size: 3px;
    }
    .explore-div .txt:before{
        top:-30px;
        left:100px
    }
    .explore-div .explore{
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 50px;
    }
    .explore .room{
        width:220px;
        margin-bottom: 40PX;
    }
}