@font-face {
    font-family: 'khmerOS';
    src: url(../font/Khmer\ OS\ Battambang\ Regular.ttf);
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'khmerOS';
}

.container1{
    margin: auto;
    width: 1300px;
    height: 2700px;
    margin-top: 50px;
}

.mini-left{
    float: left;
    width: 270px;
    height:360px;
    border-radius: 5px;
    overflow: hidden;
    background-color: white;
}

.mini-box:hover{
    background-color: black;
    color: white;
}

.mini-box{
    height:25%;
    width: 100%;
    border: 1px solid #e0e0e0;
}

.content-right{
    float: right;
    margin-left: 1%;
    width: 1000px;
    height: 100%;
}

.mini-left a:visited{
    color: black;
    background-color: white;
}
.mini-left a:link{
    color: black;
    background-color: white;
}

.list-hotel{
    background-color: #fff;    
    height: 250px;
    width: 94%;
    margin-bottom: 10px;
    transition: 0.2s;
    float: right;
}

.img-left{
    float: left;
    background-color: blue;
    width: 300px;
    height: 100%;
    position: relative;
}
.img-left img{
    height: 100%;
    width: 100%;
    position: absolute;
    cursor: pointer;
}

.price-detail{
    float: left;
    width: 68%;
    height: 100%;
}

.place_name{
    padding-left: 30px;
    height: 45px;
    width: 100%;
}

.place_name p{
    font-size: 20px;
    color: #000;
    padding: 3px 3px;
    font-weight: bold;
}

.about_place{
    width: 100%;
    height: 205px;
}

.show_price{
    float: left;
    margin-top: 10px;
    width: 35%;
    height: 180px;
    border-right: 1px solid #e0e0e0;
}

.comment{
    float: left;
    margin-top:20px;
    background-color: white;
    height: 170px;
    width: 55%;
    margin-left: 7%;
    position: relative;
}

.comment i{
    color: #00aa6c;
    font-size: 17px;
    padding-left: 2px;
    padding-top: 20px;
}

.wifi{
    padding-left: 40px;
    width: 200px;
    height: 20px;
}

.pool,.break-fast{
    width: 270px;
    height: 20px;
    padding-left: 42.5px;
}

.price-button{
    float: left;
    width:200px;
    height: 140px;
    margin-left: 12px;
    margin-top: 10px;
    position: relative;
}

.price-button img{
    margin-left: 50px;
    margin-top: -20px;
    position: absolute;
    width: 97px;
    height: 50px;
}

.price{
    position: absolute;
    margin-top: 30px;
    width: 200px;
    height: 40px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-weight: bold;
    font-size: 20px;
}

.duration{
    position: absolute;
    margin-top: 132px;
    width: 200px;
    height: 20px;
    font-size: 12px;
}


.price-button button{
    position: absolute;
    background-color: #f2b203;
    margin-top: 80px;
    border: none;
    width: 200px;
    height: 40px;
    border-radius: 20px;
    font-size: 17px;
}

button:hover{
    background-color: #fdc735;
}

.list-hotel:hover{
    box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
}

.next-pages{
    margin-top: 20px;
    height: 80px;
    width: 94%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    float: right;
}

.previous{
    width: 80px;
    height: 40px;
    margin-left: 20px;
    border: 1px solid #000;
    border-radius: 5px;
    opacity: 0.3;
}

.previous p{
    padding: 7px 23px;
}

.number{
    width: 300px;
    height: 32px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.six-box{
    width: 16.66%;
    height: 100%;
    padding-left: 17px;
    padding-top: 2px;
}

.six-box p:hover{
    color: #00aa6c;
}

.next{
    width: 80px;
    height: 40px;
    margin-right: 20px;
    /* border: 1px solid #000; */
    border-radius: 5px;
    background-color: #000;
    color: white;
    cursor: pointer;
}

.next p{
    padding: 7px 23px;
}

.next:hover{
    background-color: #3b3939;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    position: relative;
    font-size: 18px;
    background: #fff;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.food-name{
    position: absolute;
    width: 100%;
    height: 40px;
    margin-top: 160px;
    background-color: #fff;
    text-align: center;
    padding-top: 5px;
}

.swiper-button-next , .swiper-button-prev , .swiper-pagination{
    display: none!important;
    color: white!important;
}

.swiper:hover .swiper-button-next{
    display: block!important;
}
.swiper:hover .swiper-button-prev{
    display: block!important;
}
.swiper:hover .swiper-pagination{
    display: block!important;
}
.swiper-slide:hover img{
    opacity: 0.9;
}

.food-name:hover {
    text-decoration: underline;
}
/* ---------------------------------------------resturant------------------------------------------------- */

.browse{
    float: right;
    margin-bottom: 4%;
    width: 94%;
    height: 260px;
}

.browse-text{
    width: 100%;
    height: 60px;
}
.browse-text p{
    font-size: 25px;
    padding-left: 10px;
    padding-top: 5px;
}

.food-type{
    width: 100%;
    height: 200px;
}

.heart{
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: white;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    cursor: pointer;
}

.heart i{
    font-size: 20px;
    padding:5.5px 5px;
}

.heart:hover i{
    color: pink;
}

.food-top{
    margin: auto;
    height: 45%;
    width: 95%;
    border-bottom: 1px solid #e0e0e0;
    padding: 5px 5px;
}


.food-comment{
    margin: auto;
    height: 55%;
    width:95%;
    padding: 5px 5px;
}

.context1{
    width: 100%;
    height: 60px;
}
.star-rate{
    float: left;
    width: 110px;
    height: 30px;
    margin-left: 5px;
}
.star-rate i{
    font-size: 18px;
    color: #00aa6c;
}

.food-review{
    float: left;
    width: 80px;
    height: 30px;
    /* cursor: pointer; */
}
.food-review a{
    text-decoration: none;
}
.open-now{
    float: left;
    width: 100px;
    height: 30px;
    margin-left: 10px;
}
.type-food{
    float: left;
    width: 110px;
    height: 30px;
    margin-top: 30px;
    margin-left: -300px;
    font-size: 14px;
}

.price-between{
    float: left;
    width: 80px;
    height: 30px;
    margin-top: 30px; 
    margin-left:-200px;
}
.menu-sign{
    float: left;
    width: 90px;
    height: 30px;
    margin-top: 30px;
    margin-left: -110px;
    cursor: pointer;
}
.food-review p:hover{
    text-decoration: underline;
}
.menu-sign:hover{
    text-decoration: underline;
}

.context2{
    width: 100%;
    height: 80px;
}
.context2 p{
    font-size: 15px;
    color: #646363;
}

.cmt1,.cmt2{
    float: left;
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
}

.content_aboutme{
    width: 1300px;
    height: 650px;
    margin: auto;
    margin-top: 50px;
    background-color: white;
    position: relative;
}

.aboutme_img{
    width: 220px;
    height: 280px;
    margin-left:60px;
    margin-top: 130px;
    position: absolute;
    border: 2px solid #f2b203;
}
.aboutme_img img{
    height: 100%;
    width: 100%;
}
.myname{
    width: 300px;
    height: 160px;
    position: absolute;
    margin-top: 450px;
    margin-left:40px;
    padding-left: 10px;
    font-weight: bold;
    font-size: 18px;
}

.style-line{
    position: absolute;
    width: 5px;
    height: 100%;
    background-color: rgb(35, 6, 123);
    margin-left: 350px;
}
.aboutme{
    position: absolute;
    padding:40px 130px;
}

.aboutme_text{
    position: absolute;
    width: 60%;
    height: 70%;
    margin-left: 32%;
    margin-top: 130px;
    font-weight: bold;
    font-size: 20px;
}

.contactus{
    width: 1300px;
    height: 900px;
    margin: auto;
}

.upperBox{
    width: 1300px;
    height: 300px;
    background-color:rgb(241, 238, 238);
    background-image: url(../img/logo/bright-blue-sky.jpg);
    object-fit: cover;
}
.upperBox h1{
    padding-top: 70px;
    padding-left: 500px;
    font-size: 70px;
}
.upperBox p{
    padding-left:430px;
}

.downBox{
    width: 1300px;
    height:600px;
    background-color: white;
}

.boxLeft{
    float: left;
    width: 50%;
    height: 100%;
}

.boxRight{
    width: 50%;
    height: 100%;
    background-color: orange;
    float: left;
}

.boxLeft input[type=text]{
    margin-left: 60px;
    padding-left: 20px;
    margin-top: 20px;
    outline: none;
    background-color: transparent;
    border-radius: 5px;
    width: 500px;
    height: 40px;
}

.boxLeft input[type=submit]{
    background-color: red;
    color: white;
    width: 100px;
    height: 40px;
    border: none;
    margin-top: 25px;
    margin-left: 460px;
    border: 1px solid black;
}

.boxLeft input[type=submit]:hover{
    background-color: rgb(213, 25, 25);
    border: none;
}

.context3{
    margin-top: 25px;
    width: 500px;
    height: 130px;
    margin-left: 60px;

}

.costomer-care{
    height: 40%;
    width: 100%;
}

.social-media{
    height: 60%;
    width: 100%;
    padding-left: 40px;
}

.costom-text{
    float: left;
    width: 90%;
    height: 70px;
    margin-left: 35px;
    margin-top: 30px;
    padding-left: 10px;
}

.profilepic{
    height: 100px;
    width: 90%;
    float: left;
    margin-top:2px;
    margin-left: 30px;
}

.pf-pic{
    width: 16.66%;
    height: 100%;
    background-color: yellow;
    border-radius: 50%;
    background-image: url(../img/logo/image.jpg);
    object-fit: cover;
    background-size: cover;
    margin-left: 17px;
    border: 1px solid grey;
    float: left;
}

.pf-text{
    float: left;
    width: 50%;
    height: 90%;
    margin-top: 4px;
    margin-left: 15px;
}

.facebook{
    width: 90%;
    height: 100px;
    object-fit: cover;
    background-size: cover;
    margin-top: 20px;
}

.twitter{
    width: 90%;
    height: 100px;
    object-fit: cover;
    background-size: cover;
    margin-top: 20px;

}

.fb-logo{
    width: 18%;
    height: 100%;
    background-image: url(../img/logo/fb1-logo.jpg);
    float: left;
    border-radius: 50%;
    background-size: cover;
    cursor: pointer;
}

.fb-text{
    width: 80%;
    height: 100%;
    float: right;
}

.twitter-logo{
    width: 18%;
    height: 100%;
    background-image: url(../img/logo/twit-logo.jpg);
    object-fit: cover;
    float: left;
    border-radius: 50%;
    background-size: cover;
    cursor: pointer;
}

.twitter-text{
    width: 80%;
    height: 100%;
    float: right;
}

.review-place{
    margin: auto;
    margin-top: 170px;
    width: 1300px;
    height: 700px;
}

.review-place p{
    padding-left: 110px;
}

.review-place h1{
    padding-left: 110px;
}

.review-area{
    width: 1100px;
    height: 1150px;
    margin-top: 30px;
    margin-left: 100px;
    border-radius: 10px;
    border: 1px solid grey;
    background-color:#fdc735;
}

.review-left{
    width: 25%;
    height: 100%;
    float: left;
}

.review-right{
    width: 75%;
    height: 100%;
    float: right;
    border-left: 1px solid grey;
}

.reviewpic{
    width: 100%;
    height: 25%;
    border-top-left-radius: 10px;
    cursor: pointer;
    background-color: white;
}

.review-con{
    width: 90%;
    height: 100%;
    margin-left: 20px;
}

.review-con input[type=text]{
    margin-left: 110px;
    padding-left: 20px;
    outline: none;
    background-color: transparent;
    border-radius: 5px;
    width: 500px;
    height: 40px;
    background-color: white;
}

.review-con button{
    width: 100px;
    height: 40px;
}

.review-con hr{
    margin-left: 110px;
    width: 625px;
}

.box-label{
    width: 90%;
    height: 40px;
    margin-left: 110px;
    margin-top: 20px;
}

.box-label label{
    font-size: 15px;
    float: left;
    padding: 8px;
}

.box-label button{
    float: left;
    height: 40px;
    width: 60px;
}

.browe-thing{
    width: 100%;
    height: 260px;
    margin-top: 10px;
}

.thing-box{
    float: left;
    width: 23%;
    height: 100%;
    background-color: blue;
    margin-left: 2.66%;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.thing-box img{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 90%;
}

.img-text{
    position: absolute;
    width: 100%;
    height: 100%;
    /* cursor: pointer; */
    transition: 0.5s;
}
.img-text p{
    padding-top: 94%;
    padding-left: 38px;
    font-size: 15px;
    color: white;
}

.img-text:hover{
    background: linear-gradient(180deg, rgba(2,0,36,0.2007177871148459) 0%, rgba(0,0,0,0.8841911764705882) 100%);
}

.pop-cities{
    width: 100%;
    height: 270px;
    margin-top: 10px;
}

.pop-cities a{
    text-decoration: none;
}

.cities-box{
    float: left;
    width: 23%;
    height: 100%;
    background-color: blue;
    margin-left: 2.66%;
    cursor: pointer;
}
.city-img{
    height: 70%;
    width: 100%;
    background-color: red;
    position: relative;
}
.city-img img{
    position: absolute;
    width: 100%;
    height: 100%;
}

.city-text{
    background-color: white;
    height: 30%;
    width: 100%;
    padding-left: 5px;
    color: #000;
}

.city-text h3{
    padding-top: 5px;
}
.cities-box:hover h3{
    text-decoration: underline;
}

.pink-heart{
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: white;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    cursor: pointer;
}

.pink-heart i{
    font-size: 20px;
    padding:5.5px 5px;
    color: #000;
}

.pink-heart i:hover{
    color: pink;
}

.pop-place{
    width: 100%;
    height: 800px;
    margin-top: 20px;
}

.pop-box{
    float: left;
    width: 32%;
    height: 48%;
    background-color: blue;
    margin-left: 2%;
    margin-top: 3.2%;
}

.pop-img{
    width: 100%;
    height: 80%;
    position: relative;
}

.pop-text{
    width: 100%;
    height: 20%;
    background-color: white;
    padding-left: 10px;
    color: #000;
}

.pop-img img{
    position: absolute;
    width: 100%;
    height: 100%;
}
 
.pop-box:hover h3{
    text-decoration: underline;
}

.pop-box:hover{
    cursor: pointer;
}

.left-item{
    width: 50%;
    height: 100%;
    float: left;
}

.left-item h1{
    padding: 30px 220px 0px 200px;
}

.left-item form{
    width: 75%;
    height: 70%;
    margin:auto;
}
.left-item form p{
    padding: 10px 0px 0px 5px;
    color:#646363;
    font-size: 18px;
}
.left-item form input[type=text] {
    margin-top: 5px;
    border: 1px solid grey;
    outline: none;
    width: 450px;
    height: 40px;
    padding-left: 20px;
    border-radius: 5px;
    font-size: 15px;
}

.left-item select{
    margin-top: 5px;
    outline: none;
    width: 130px;
    height: 40px;
    border: 1px solid grey;
    border-radius: 5px;
    padding-left: 20px;
    color: grey;
}

table tr .head2{
    width: 150px;
    text-align: left;
}

table tr .head1{
    text-align: left;
    width: 320px;
}

.left-item form input[type=submit]{
    margin: 40px 0px 0px 160px;
    width: 90px;
    height: 30px;
    background-color:orange;
    outline: none;
    border: none;
    border-radius: 5px;
}

.left-item form input[type=submit]:hover{
    background-color: rgb(255, 209, 123);
}

.right-item{
    float: left;
    width: 50%;
    height: 100%;
}

.right-item img{
    width: 100%;
    height: 100%;
}

.social-media-login{
    margin: auto;
    width: 270px;
    height: 60px;
    margin-top: 20px;
}

.social-box{
    float: left;
    width: 18%;
    height: 80%;
    margin-left: 13%;
    border-radius: 50%;
}

.social-box img{
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.left-img{
    width: 50%;
    height: 100%;
    float: left;
}

.detail-img{
    width: 100%;
    height: 100%;
}

.detail-img img{
    object-fit: cover;
    background-position: center;
}

.right-thing{
    width: 50%;
    height: 100%;
    float: left;
}

.right-thing h1{
    padding: 20px 0px 0px 50px;
}

.right-thing p{
    padding: 20px 0px 0px 50px;
}

.right-thing i{
    color: green;
    padding-top: 30px;
}

.text-item1{
    margin:40px 0px 0px 55px;
    width: 550px;
    height: 200px;
}

.text-left-item{
    width: 40%;
    height: 100%;
    float: left;
}

.button-right-item{
    width: 50%;
    height: 100%;
    float:left;
}
.button-right-item button{
    margin: 60px 0px 0px 30px;
    background-color: #00acee;
    border-radius: 10px;
    cursor: pointer;
}
.button-right-item button:hover{
    background-color: #87cae4;
}