@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Manrope:wght@200..800&display=swap');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-brands/css/uicons-brands.css');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Manrope", sans-serif;
}

body{
    width: 100%;
    height: 100vh;
}

.heading-font{
    font-family: "Pacifico", cursive;

}

.header{
    width: 100%;
    padding: 15px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1C2D37;
}

.header .logo a{
    color: #fff;
    font-family: "Lexend", sans-serif;
    text-decoration: none;
    font-size: 22px;
    font-weight: 600;
}

.header .logo img{
    width: 180px;
}

.header .logo a span{
    font-weight: 400;
    color: red;
}

.header nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
}

.header nav ul li a{
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    font-weight: 500;
    padding: 5px 20px;
    font-family: "Lexend", sans-serif;
    text-transform: uppercase;
}

.header nav a.nav-btn{
    color: #111;
    text-decoration: none;
    font-size: 15px;
    padding: 8px 30px;
    font-weight: 700;
    border-radius: 30px;
    background: #EED26E;
    margin-left: 30px;
}

.header nav ul li a:hover{
    color: #EED26E;
}

.banner-img .splide__arrow{
    display: none;
}
.hero{
    width: 100%;
    padding: 20px 40px;
    background: #1C2D37;
    position: relative;
}

.hero-content{
    position: absolute;
    top: 50%;
    left: 100px;
    transform: translateY(-50%);
}

.hero-content h1{
    color: #fff;
    font-family: "Lexend", sans-serif;
    font-weight: 800;
    font-size: 49px;
    text-shadow: 6px 4px 0px #222;
}

.hero-content a{
    font-size: 14px;
    color: #111;
    display: inline-flex;
    align-items: center;
    background: #EED26E;
    font-family: "Lexend", sans-serif;
    padding: 10px 50px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 20px;
}

.hero-content a i{
    font-size: 12px;
    margin-top: 3px;
    margin-left: 10px;
}



.hero-img{
    width: 100%;
    border-radius: 20px;
    margin: 0px auto;
}

.hero-img img{
    width: 100%;
    /* height: 500px; */
    object-fit: cover;
    border-radius: 20px;
}

.counter{
    width: 100%;
    padding: 40px 100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.counter div{
    text-align: center;
    width: 100%;
    transition: .3s ease-in-out;
    border: 1px solid transparent;
    padding: 30px;
}

.counter div:hover{
    border: 1px solid #001010;
}

.counter div h1{
    font-family: "Lexend", sans-serif;
    font-size: 32px;
    color: #000;
}

.counter div p{
    color: #888;
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-top: 10px;
}

.about{
    width: 100%;
    padding: 40px 100px;
    background: #1C2D37;
}

.section-title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn{
    font-size: 16px;
    text-decoration: none;
    padding: 12px 40px;
    border-radius: 5px;
    background: #EED26E;
    font-family: "Lexend", sans-serif;
    display: inline-flex;
    align-items: center;
    color: #000;
    border: 0;
    outline: 0;
    cursor: pointer;
}

.btn i{
    font-size: 14px;
    margin-top: 3px;
    margin-left: 15px;
}

.section-title .title{
    max-width: 70%;
    width: 100%;
}

.section-title .title h1{
    color: #fff;
    font-weight: 800;
    font-size: 52px;
}

.section-title .title p{
    color: #f3f3f3;
}

.about-img{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 30px;
}

.about-img img{
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 100px 50px 100px 50px;
}

.about h5{
    color: #cecece;
    font-size: 22px;
    font-weight: 400;
    line-height: 40px;
}

.about h5 span{
    color: var(--i);
}

.feature{
    width: 100%;
    padding: 40px 100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature div,
.contact-box div{
    width: 100%;
    text-align: center;
    background: #fffae6;
    border: 1px solid #EED26E;
    padding: 20px;
}

.feature div i,
.contact-box div i{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #EED26E;
    font-size: 32px;
    margin: 10px auto;
}

.feature div h3,
.contact-box div h3{
    font-size: 15px;
}

.feature div p,
.contact-box div p{
    color: #000;
    font-weight: 500;
    margin-top: 20px;
    font-size: 12px;
}

.room{
    width: 100%;
    padding: 40px 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    background: #222;
    color: #f3f3f3;
    border-top: 1px solid #333;
}

.room .info h4{
    font-size: 14px;
    color: #001010;
    padding: 4px 10px;
    display: inline-block;
    border: 1px solid #EED26E;
    border-radius: 20px;
    color: #EED26E;
    margin-bottom: 10px;
}

.room .info p{
    font-size: 14px;
    color: #999;
    display: block;
    margin-top: 20px;
}

.room .info a.call{
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #7e7c7c;
    font-size: 20px;
    font-weight: 600;
    margin-top: 40px;
}

.room .info a.call i{
    min-width: 40px;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #d8b534;
    color: #d8b534;
    border-radius: 50%;
    margin-right: 20px;

}

.room .info a.call span{
    font-family: "Lexend", sans-serif;
}

.room .info a.call:hover{
    color: #d8b534;
}

.room .info h2{
    font-family: "Pacifico", cursive;

}

.room-img{
    width: 100%;
    overflow: hidden;
}

.room-img img{
    width: 100%;
    border-radius: 5px;
}

.room-feature{
    margin:0px  30px;
}

.room-feature div{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
}

.room-feature div i{
    min-width: 40px;
    min-height: 40px;
    display: flex;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    border: 1px solid #d8b534;
    background: #d8b534;
    color: #222;
    border-radius: 50%;
    margin-right: 20px;
}

.short-imgs{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
}

.short-imgs::-webkit-scrollbar{
    background: #1a1919;
    height: 5px;
    border-radius: 5px;
}

.short-imgs::-webkit-scrollbar-thumb{
    background: #fff;
}

.short-imgs img{
    width: 100px;
    height: 60px;
    object-fit: cover;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
}

.why{
    width: 100%;
    background: #fffae6;
    display: grid;
    grid-template-columns: 600px 1fr;
    gap: 30px;
    padding: 40px 100px;
}

.why h2{
    font-family: "Pacifico", cursive;
}

.why p{
    color: #333;
    display: block;
    text-align: justify;
    margin: 20px 0px;
    font-size: 14px;
}

.why ul{
    padding-left: 20px;
    margin-top: 20px;
    display: block;
    list-style: square;
}

.why ul li{
    font-size: 14px;
    font-style: oblique;
    margin-top: 10px;
}

.why-images{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.why-images img{
    width: 100%;
    display: block;
    border-radius: 5px;
    border: 3px solid #EED26E;
}

.why-images div img{
    margin-bottom: 20px;
    min-height: 175px;
    object-fit: cover;
}


.inquiry{
    width: 100%;
    padding: 40px 100px;
    background: linear-gradient(rgba(255,255,255,0.68), rgba(255,255,255,0.68)), url('../img/new-gallery/14.jpeg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

.form{
    width: 50%;
    background: rgba(255,255,255,0.8);
    padding: 40px;
}

.form h2{
    font-family: "Pacifico", cursive;
    margin-bottom: 30px;
}

.form input{
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    width: 100%;
    border: 1px solid #EED26E;
}

.footer{
    padding: 40px 100px;
    background: #000;
    display: grid;
    grid-template-columns: 400px 1fr 1fr 1fr;
    gap: 20px;
    color: #cecece;
}

.footer h2{
    color: #fff;
    margin-bottom: 25px;
    font-size: 22px;
}

.footer h2 span{
    color: #EED26E;
    font-weight: 300;
}

.footer h4{
    font-size: 22px;
    font-family: "Lexend", sans-serif;
    margin-bottom: 20px;
}

.footer-contact ul{
    list-style: none;
    padding-left: 20px;
}

.footer-contact ul li a{
    display: inline-flex;
    text-decoration: none;
    margin-bottom: 10px;
}


.footer-contact ul li a span{
    margin-left: 10px;
    color: #fff;
}

.footer-contact ul li a i{
    min-width: 30px;
    min-height: 30px;
    max-height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #EED26E;
    border: 1px solid #EED26E;
    color: #EED26E;
    text-decoration: none;
}

.footer-link ul{
    list-style: none;
    padding-left: 20px;
}

.footer-link ul li a{
    color: #999;
    text-decoration: none;
}

footer{
    background: #000;
    padding: 10px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
}

footer a{
    color: #EED26E;
    text-decoration: none;
}

.mobile-btn{
    display: none;
}

.page-header{
    width: 100%;
    height: 250px;
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('../img/new-gallery/14.jpeg');
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.page-header h1{
    font-size: 48px;
    color: #fff;
    font-family: "Pacifico", cursive;
    font-weight: 600;
}

.page-header p{
    color: #fff;
    word-spacing: 10px;
    margin-top: 15px;
}

.page-header p a{
    color: #b3b0b0;
    text-decoration: none;
    font-family: "Lexend", sans-serif;
}

.about-us{
    width: 100%;
    padding: 40px 100px;
    text-align: center;
}

.about-us h5{
    color: #EED26E;
    background: #000;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 30px;
}

.about-us h2{
    font-size: 32px;
    margin-top: 20px;
    font-family: "Lexend", sans-serif;
}

.about-us p{
    margin-top: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #444
}

.hotel-room{
    width: 100%;
    height: 600px;
    background: url('../img/about/3.jpeg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.contact-box{
    width: 100%;
    padding: 40px 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.contact-form{
    width: 100%;
    padding: 20px 100px;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
}

.contact-form iframe{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    padding: 10px;
    background: #fff4b7;
}

.contact-form form .form-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.contact-form form label{
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

.contact-form form input,
.contact-form form textarea{
    width: 100%;
    display: block;
    padding: 10px;
    font-weight: 600;
    border: 1px solid #c5c5c5;
    background: #dadada;
    outline: 0;
}

.contact-form form textarea{
    resize: none;
    height: 100px;
}

.contact-form form button{
    padding: 10px 30px;
    background: #d8b534;
    color: #000;
    border: 0;
    outline: 0;
    margin-top: 20px;
    font-weight: 700;
}

.restaurant-container{
    width: 100%;
    padding: 40px 100px;
}

.restaurant-img img{
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.restaurant-container h1{
    font-family: "Lexend", sans-serif;
    margin-bottom: 20px;
}

.restaurant-container h5{
    margin-top: 10px;
    display: inline-flex;
    width: 100%;
    align-items: center;
    color: #7e7c7c;
}

.restaurant-container h5 i{
    margin-right: 10px;
    margin-top: 3px;
}

.restaurant-container p{
    font-weight: 600;
    display: block;
    margin-top: 30px;
}

.info-box{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.info-box .box{
    background: #FFFAE6;
    display: flex;
    align-items: center;
    margin-top: 40px;
    border: 1px solid #d8b534;
    padding: 10px 15px;
}

.info-box .box .icon{
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    background: #d8b534;
    margin-right: 10px;
}

.info-box .box h4{
    font-size: 16px;
    line-height: 10px;
    font-weight: 700;
}

.info-box .box p{
    margin-top: 5px;
    display: block;
    font-size: 12px;
    color: #757575;
}

.thanks-text{
    margin-bottom: 20px;
    display: block;
}

.thanks-text span{
    display: inline-block;
    padding: 0px 10px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.gallery-container{
    width: 100%;
    padding: 40px 100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.gallery-container img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.sticky-btn{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 65%;
    gap: 10px;
    right: 20px;
    z-index: 99999;
}

.sticky-btn a{
    display: block;
    width: 40px;
    height: 40px;
    background: var(--i);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sticky-btn a i{
    padding-top: 5px;
}

.imageSlide{
    width: 100%;
    padding: 40px 0px;
    background: #c49a04;
}

.slide-img img{
    text-align: center;
    width: 95%;
    height: 200px;
    object-fit: cover;
    margin: 0px auto;
    display: block;
    border-radius: 5px;
}

.slide-img .splide__pagination__page{
    display: none;
}

.restaurant-images{
width: 100%;
display: grid;
padding: 30px 0px;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.restaurant-images img{
    width: 100%;
    border-radius: 10px;
}

.pay-table{
    margin: 30px auto;
    max-width: 800px;
    width: 100%;
}

.pay-table tr th,
.pay-table tr td{
    padding: 10px;
    border: 1px solid #6e6e6e;
}





















@media (max-width: 768px) {

    .header .logo img{
        width: 95px;
    }

    .header{
        padding: 10px;
        height: 80px;
    }

    .header nav{
        display: block;
        width: 100%;
        background: #EED26E;
        position: absolute;
        top: 80px;
        left: 0;
        z-index: 9999;
        transform: scaleY(0);
        transition: .5s ease-in-out;
    }

    .header nav.active{
        transform: scaleY(1);
    }

    .header nav ul{
        flex-direction: column;
        width: 100%;
    }

    .header nav ul li,
    .header nav ul li a{
        display: block;
        width: 100%;
        color: #000;
    }

    .header nav a.nav-btn{
        display: none;
    }

    .header nav ul li a{
        padding: 10px;
    }

    .header nav ul li a:hover{
        background: #000;
        color: #EED26E;
    }

    .mobile-btn{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        background: #d8b534;
        color: #000;
        cursor: pointer;
        border-radius: 5px;
    }

.hero,
.counter,
.about,
.feature,
.room,
.inquiry,
.why,
.footer,
.restaurant-container,
.about-us,
.contact-box,
.contact-form,
.gallery-container{
    padding: 40px 20px;
}

.section-title{
    flex-direction: column;
}

.section-title .title{
    width: 100%;
    text-align: center;
}

.section-title .title h1{
    font-size: 28px;
}

.section-title .title p{
    display: block;
    width: 100%;
    font-size: 14px;
    margin-bottom: 20px;
}

.feature,
.room,
.why,
.why-images,
.footer,
.info-box,
.contact-box,
.contact-form form .form-grid,
.contact-form,
.gallery-container{
    grid-template-columns: repeat(1, 1fr);
}

.about h5{
    font-size: 18px;
}

.counter{
    grid-template-columns: repeat(2, 1fr);
}

.hero-content {
    left: 50px;
}

.hero-content h1{
    font-size: 32px;
    text-shadow: 2px 2px 0px #000;
}

.form{
    width: 100%;
}

.restaurant-img img{
    height: auto;
    width: 100%;
}

.page-header h1{
    font-size: 22px;
}

.hero{
    padding: 20px 0px;
}

.hero img{
    border-radius: 0;
}

.room-feature{
    margin: 0;
}

}