*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    
}
.container{
    width:100%;
    height: auto;
}
.hero{
    width:100%;
    height: auto;
    background-image: url(../asset/pictures/hote.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    overflow-y: hidden;
}
.hero .nav{
    width:100%;
    padding: 0 150px;
}
.nav .box{
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: relative;
    top:10px;
    margin-bottom: 10px;
    transition: transform .5s ease-in-out;
    display: none;
}
.box .line1, .line2, .line3{
    width:40px;
    height: 6px;
    background-color: #D7A829;
    display: block;
    height: 4px;
    border-radius: 40px;
    margin: 4px;
    position: relative;
    pointer-events: none;
    transition: transform .5s ease-in-out;
    transition-timing-function: cubic-bezier(0.25,-0.62, 0.1, 1.44);
}
.nav .menu{
    width:100%;
    height: auto;
    padding:50px 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

.nav .menu a{
    text-decoration: none;
    text-transform:uppercase ;
    color:#fff;
    font-size: 14px;
    transition-duration: .5s;
    font-family: 'Open Sans', sans-serif;
}
.nav .menu a:hover{
    border-bottom: 1px solid #D7A829;
    padding-bottom: 5px;
}
.hero-txt{
    width:100%;
    text-align: center;
    color:#fff;
    margin-top: 50px;
}
.hero-heading{
    font-size: 60px;
    margin-bottom: 50px;
    font-weight: 400;
    font-family: 'Baskervville', serif;
}
.home{
    width:100%;
    height: auto;
    padding: 10px 50px;
    background-color: #184891;
}
.home a img{
    width:80px;
}
.search-divv{
    width:100%;
    height: auto;
    padding: 50px 50px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.book{
    width:40%;
    display: flex;
    flex-direction: column;
    
}
.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:60%;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.reservation{
    width:100%;
    height: auto;
    border:1px solid #dbd5d5;
}
.reservation .reservation-txt{
    width:100%;
    background-color: #184891;
    padding: 10px;
    color:#fff;
    font-family: 'Open Sans', sans-serif;
    font-size:20px;
    text-align: center;
}
.guest-info{
    background-color: #f3efef;
    width:100;
    height:auto;
    display: flex;
    flex-wrap: wrap;
    border-top:2px solid #e0dddd;
}
.guest-info .guest, .guest2{
    width:50%;
    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{
    display: flex;
    justify-content: flex-start;
}
.guest .tab-con .tab{
    width:160px;
    display: flex;
}
.guest .tab-con .tab div{
    width:40px;
    height: 40px;
    border:2px solid #e0dddd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    color:#807777;
}
.guest .tab-con .tab .activeTitle{
    background-color: #D7A829;
}
.guest form select{
    width:100px;
    border:1px solid #e0dddd;
    height:30px;
}
.guest form img{
    margin-top: 30px;
    width:40px;
    position: relative;
}
.guest form img:nth-child(2){
    top: -8px;
}
.info{
    width:100%;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    color:#807777;
    padding: 100px 30px;
    text-align: center;
}
.info a{
    text-decoration: none;
    background-color: #D7A829;
    padding: 16px 38px;
    color:#191613;
    border-radius: 20px;
    font-size:10px;
    transition-duration: .5s;
    margin-top: 20px;
}
.roomr{
    width:350px;
    height: 510px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    transition-duration: .5s;
    margin-bottom: 20px;
    border:1px solid #e0dfdf;
   margin-top: 40px;
}
.roomr:hover{
    box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
}
.roomr img{
    width:100%;
    height: 300px;
}
.roomr b{
    color:#184891;
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    margin-top: 20px;
    text-align: center;
}
.roomr p{
    color:#212121;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 20px;
    margin-top: 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;
}
  
    .link{
        width:200px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin-top:50px;
    }
    .link a{
        text-decoration: none;
        margin-bottom: 10px;
        color:#fff;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        font-size: 12px;
        transition-duration: .5s;
    }
    .link a:hover{
        color:#FFC200;
    }
    .link p{
        margin-bottom: 10px;
        color:#fff;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        font-size: 10px; 
    }
    
.footer-div{
        width:100%;
        height: auto;
        padding:40px 180px;
        margin-top: 100px;
        background-color:#184891;
    }    
    
  .footer{
        width:100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        padding-bottom: 60px;
        margin-bottom: 10px;
        border-bottom:1px solid #808080;
    }
    
 .logo-div{
        width:200px;
        height:auto;
        display: flex;
        flex-direction: column;
 }