/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&family=Petrona:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    font-family: var(--terinary-font);
}
/* Root Elements */
:root {
    --primary-color: #505050;
    --secondary-color: #222222;
    --terinary-color: #dba765;
    --forth-color: #ca9138;
     /* #c5965a; */
    --fifth-color: #8f8f8f;
    --white-color: #fff;
    --black-color: #000;
    --primary-font: "Petrona", serif;
    --secondary-font: "Charm", cursive;
    --terinary-font: "Poppins", sans-serif;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background-color: var(--forth-color);
}
::-webkit-scrollbar-track {
    background-color: var(--fifth-color);
}
.table-responsive {
    scrollbar-width: 2px !important;
}
/* Custom CSS */
:where(h1,h2,h3,h4,h5,h6,p,i,ul) {
    margin: 0 !important;
    padding: 0 !important;
}
a {
    text-decoration: none !important;
    color: var(--secondary-color) !important;
}
a:hover {
    color: var(--forth-color) !important;
}
i {
    color: var(--forth-color) !important;
}
input {
    box-shadow: none !important; 
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 10px 22px;
    border-bottom: 1px solid var(--fifth-color) !important;
}
textarea,select {
    box-shadow: none !important;
    outline: none !important;
}
:where(select, textarea):focus-visible {
    border-color: var(--primary-color) !important;
}
h2 {
    font-family: var(--secondary-font);
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--terinary-color);
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-bottom: 1rem !important;
}
h3 {
    font-family: var(--primary-font);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: clamp(1rem, 4vw, 2.8rem);
}
h1 {
    font-size: clamp(1.8rem, 4vw, 3rem) !important;
}
.wrapper {
    padding-top: 4rem;
}
.btn-link {
    color: var(--primary-color);
}
.btn-link:hover {
    color: var(--forth-color);
}
button {
    border-radius: 0 !important;
}
/* Animation For Images */
.img-ani {
    overflow: hidden;
} .img-ani > img {
    transition: scale 750ms ease-in,
                filter 250ms ease-in-out;
}
.img-ani:hover > img {
    scale: 1.15;
    filter: grayscale(80%);
}
/* Navbar Scroll */
.navbar.scroll-on {
    width: 100%;
    position: fixed;
    background-color: var(--white-color);
    box-shadow: 1px 2px 3px var(--fifth-color);
    z-index: 999;
    left: 0;
    top: 0;
}
/* .navbar-img {
    visibility: hidden;
} */
/* .navbar.scroll-on .navbar-img img{
   visibility: visible!important;
} */
.navbar-toggler {
    box-shadow: none !important;
    border: none !important;
}
.navbar-toggler i {
    color: #000 !important;
    font-size: 1rem !important;
    font-weight: 700;
}
/* Navbar */
.top-menu {
    padding: 28px 0 !important;
}
.top-menu .ph-link {
    color: var(--forth-color) !important;
    font-weight: 700;
    font-family: var(--primary-font);
    font-size: 1.2rem !important;
}
.navbar_btn .main-btn {
    border: 1px solid var(--forth-color);
    border-radius: 0;
    font-weight: 400;
    padding: 8px 16px;
    transition: all 0.8s ease-in;
}
.navbar_btn .main-btn:hover {
    transform: scale(1.04);
    background-color: var(--forth-color);
    color: var(--white-color) !important;
}
.navbar_btn .main-btn:hover i {
    color: var(--white-color) !important;
}
.navbar-nav li {
    margin: 4px 16px;
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 1.1rem;
}
.navbar .nav-items .nav-link:hover,
.navbar .nav-item .active {
    color: var(--forth-color) !important;
}
/* Hero Section */
.carousel-item .carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    padding:  100px !important;
}
.carousel-item .carousel-caption h5 {
    font-family: var(--secondary-font);
    font-size: 2rem;
    transition: all 0.8s ease;
    animation: textMove 4s both 0s infinite;
}
.carousel-item .carousel-caption h4 {
    font-size: 3rem;
    font-family: var(--primary-font);
    font-weight: 400;
    transition: all 0.8s ease;
    animation: textMove 8s both 0s infinite;
    margin: 1rem 0 !important;
}
.carousel-item .carousel-caption .sec-btn {
    padding: 10px 22px;background: var(--forth-color);
    border: 1px solid var(--black-color);
    border-radius: 0;
    transition: all 0.8s ease;
    animation: textMove 12s both 0s infinite;
}
.carousel-item .carousel-caption .sec-btn:hover {
    background: transparent;
    border: 2px solid var(--white-color);
}
@keyframes textMove {
    100% {
        transform: scale(1.08);
        transition: all .8s ease-in;
    }
}
/* stay time */
.main_btn {
    background: #ca9138;
    border-radius: 0;
    padding: 10px 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 400;
}
.main_btn:hover {
    border: 2px solid var(--secondary-color) !important;
}
/* Welcome */
.welcome strong {
    font-weight: 500;
    letter-spacing: 1px;
}
.welcome-border {
    border-left: 2px solid var(--forth-color);
}
/* Highlight */
.owl-carousel h6 {
    font-family: var(--secondary-font);
    color: var(--black-color);
    font-size: 2rem;
}
.owl-carousel strong {
    font-weight: 300;
    color: var(--secondary-color);
}
.owl-carousel p {
    margin: 2rem 0 !important;
}
.owl-carousel small {
    color: var(--fifth-color);
}
/* Rooms */
.rooms_section .card {
    border: 0 !important;
}
.rooms_section .card h6 {
    font-family: var(--primary-font);
    font-size: clamp(1rem, 4vw, 1.9rem);
}
.rooms_section .card .rooms {
    background-color: rgba(255, 255, 255, 0.5);
    margin-top: -12rem;
    color: var(--primary-color);
    border-top-right-radius: 100px;
}
/* card */
.card_section .card {
    text-align: center;
    border: 1px dotted var(--secondary-color);
    border-radius: 0;
    height: 100%;
    padding: 1rem 0.1rem !important;
    box-shadow: 0 0 3px var(--black-color);
}
.card_section .card h1 i {
    color: var(--secondary-color) !important;
}
.card_section .card h5 {
    font-size: 1.2rem;
    font-family: var(--secondary-font);
    font-weight: 600;
}
.card_section .card p {
    font-size: 0.9rem;
}
.card_section .card a {
    font-size: 0.8rem;
}
/* footer */ 
footer {
    color: #b66f12 !important;
    font-family: var(--primary-font);
    font-weight: 700;
    background-color: #fff;
}
.subscribe {
    font-family: var(--secondary-font);
}
.input-group {
    height: 60px;
    font-family: var(--terinary-font);
}
.input-group input {
    background: transparent !important;
    border: .5px solid #e5a904 !important;
    color: var(--white-color) !important;
}
.input-group input::placeholder {
    color: var(--fifth-color) !important;
}
footer h4 {
    color: #b66f12;
    font-weight: 700;
}
footer a {
    color: rgb(190, 113, 12) !important;
}
footer a:hover {
    color: var(--black-color) !important;
}
/* footer .contact-foot a {
    color: var(--fifth-color) !important;
} */
footer .contact-foot .ph-link-foot {
    color: var(--forth-color) !important;
    font-weight: 700;
}
footer .footer-link p {
    color: var(--fifth-color);
    letter-spacing: 1px;
}
footer .social-links li {
    height: 60px;
    width: 60px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 10px;
    margin: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
    -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
    background-color: #f3f3f3;
    transition: transform 0.5s;
}
footer .social-links a i {
    color: #e69328!important;
    font-size: 1.2rem !important;
    transition: transform 0.5s;
}
footer .social-links li:hover a i {
    transform: scale(0.90);
}
footer .social-links li:hover a .fa-facebook {
    color: #1877F2 !important;
}
footer .social-links li:hover a .fa-instagram {
    color: #EE2A7B !important;
}
footer .social-links li:hover {
    border-color: rgba(0, 0, 0, 0.0.2);
    cursor: pointer;
    transform: translateY(2px);
    box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
    inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
    -0.5px -0.5px 0px rgba(255, 255, 255, 1),
    0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
    0px 12px 10px -10px rgba(255, 255, 255, 0.5);
}
.footer-text {
    font-family: var(--terinary-font);
    font-size: 0.8rem;
    letter-spacing: 1px;
}
footer .copy-right p {
    font-size: 0.8rem;
    font-family: var(--terinary-font);
}
/* About Page */
.about_banner {
    color: var(--white-color);
    font-family: var(--secondary-font);
}
.about_banner h1 {
    font-size: 3.2rem;
}
.about_banner ul li {
    margin: 0 5px;
}
.about_banner ul li a {
    color: var(--white-color) !important;
    font-family: var(--primary-font);
    font-size: clamp(0.8rem, 4vw, 1.1rem) !important;
}
.about_banner ul li a:hover {
    color: var(--forth-color) !important;
}
.our_story_section h4 {
    color: var(--terinary-color);
    font-family: var(--primary-font);
    margin: 1rem 0 !important;
}
.our_story_section .btn-link {
    font-size: 0.8rem !important;
    font-weight: 700;
    border: 1px solid var(--secondary-color);
    border-radius: 0;
}
.our_story_section .btn-link:hover {
    border-color: var(--forth-color);
}
.our_team .card,
.our_team .card img {
    border-radius: 0;
}
.our_team .card .card-body {
    font-family: var(--secondary-font) !important;
}
.our_team .card .card-body p {
    font-family: var(--primary-font);
}
.img-review img {
    margin-left: -1.9rem;
    border: 8px solid var(--white-color);
    border-radius: 100px;
}
.review h6 {
    font-size: 1rem !important;
    font-family: var(--primary-font) !important;
}
.review p strong {
    font-weight: 700;
    font-family: var(--primary-font);
}
.review p {
    margin: 4px !important;
}
/* Contact Page */
.contact_section {
    font-family: var(--primary-font) !important;
}
.contact_section h1 {
    font-family: var(--secondary-font) !important;
}
.contact_section p {
    color: var(--fifth-color);
    font-size: 1.2rem;
}
.contact_section h4 a {
    color: var(--forth-color) !important;
    font-size: 1.9rem !important;
}
.contact_section h6 {
    color: var(--fifth-color);
}
.contact_section .mail {
    color: var(--primary-color) !important;
}
.contact_section .form-links ul li {
    margin: 0 5px;
    width: 35px;
    height: 35px;
    border: 1px solid var(--primary-color);
    padding: 4px;
    text-align: center;
    box-shadow: 0 0 3px var(--fifth-color);
}
.contact_section .form-links ul li a i {
    color: var(--primary-color) !important;
    font-size: 0.8rem!important;
}
.contact_section .form-links ul li:hover,
.contact_section .form-links ul li:hover i {
    border-color: var(--forth-color);
    color: var(--forth-color) !important;
    cursor: pointer;
}
.contact_section textarea {
    border-radius: 0;
}
/* booking */
.btn-link-1 {
    background: var(--terinary-color) !important;
    border-radius: 0;
}
.btn-link-1:hover {
    background-color: var(--primary-color) !important;
}
.form :where(select, input, textarea) {
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
    border: 1px solid var(--fifth-color) !important;
}

div.scroll {
    height: 500px;
    overflow: hidden;
    overflow-y: scroll;
}
/* our_services */
.our_services .card {
    border: none !important;
}
.our_services h1 {
    font-size: 5rem !important;
    color: var(--forth-color);
}
.our_services strong {
    color: var(--forth-color);
}
.our_services small {
    color: var(--fifth-color);
}
/* Gallery */
/* .gallery img {
    transition: all 0.8s ease-in;
}
.gallery img:hover {
    transform: scale(0.9);
} */
/* FAQs */
.accordion-body {
    font-size: 0.9rem !important;
}
.accordion-button {
    background-color: transparent !important;
    font-weight: 900;
    font-size: 1rem;
}
.accordion-button:focus {
    box-shadow: 0 0 0 2px #dba865a8!important;
}
/* Order Room */
.room-avail .card {
    box-shadow: 0 0 3px var(--fifth-color);
}
.room-avail .card .text {
    border: 1px solid var(--fifth-color);
    border-top: 0;
    font-family: var(--terinary-font);
    letter-spacing: 1px;
    font-size: 0.9rem;
    font-weight: 400;
    padding: 2px 8px !important;
}
.room-avail .card .card-body .fnt {
    font-family: var(--secondary-font);
    color: var(--forth-color);
}
.room-avail .card .card-body h4 {
    font-family: var(--primary-font);
    color: var(--terinary-color);
}
.room-avail .card .card-body h4 small {
    font-size: 0.9rem;
}
.room-avail .card  .card-footer :where(ul li, p, .btn-link-1){
    font-size: 0.8rem !important;
    margin: 0 6px;
}
.room-avail .card  .card-footer ul li a {
    color: rgb(3, 140, 225) !important;
}
.room-avail .card  .card-footer ul li a:hover {
    color: var(--primary-color) !important;
}
.room-avail .card  .card-footer .btn-link-1 {
    padding: 2px 8px !important;
    color: var(--white-color) !important;
}
.btn-group button {
    margin: 0 !important;
    border: 1px solid #fff;
}
/* Privacy & Policy */
.privacy_policy h4 {
    font-family: var(--primary-font);
    margin-bottom: 0.8rem !important;
    font-weight: 500;
}
.privacy_policy p {
    margin-bottom: 0.8rem !important;
    font-size: 0.9rem;
}
.privacy_policy li {
    margin-bottom: 0.3rem !important;
    font-size: 0.8rem;
}
.floating-icons {
    position: fixed;
    right: 0;
    top: 50%;
    list-style: none;
    background-color:#ca9138;
    padding: 0.8rem 0.5rem !important;
    z-index: 10000;
}
.floating-icons li a i {
    color: var(--white-color) !important;
    font-size: 2rem !important;
    font-weight: 400 !important;
}
.floating-icons li:hover a i {
    color: var(--secondary-color) !important;
}
.login_form .main_btn:hover {
    color: var(--secondary-color) !important;
}
.login-page .floating-icons {
    visibility: hidden !important;
}

/* Media Queries */
@media (max-width: 1031px) and (min-width: 992px) {
    .navbar .navbar-nav .nav-item .nav-link {
        font-size: 0.9rem !important;
    }
}
@media(max-width:991px) {
    /* .navbar-img {
        visibility: visible;
    } */
    .top-menu {
        padding: 0 !important;
    }
    .check-form-banner .container-fluid {
        padding: 1rem !important;
        padding-top: 120px !important;
    }
    .check-form-banner .container-fluid .col-lg-12 {
        padding: 1.6rem !important;
    }
}
@media (max-width: 767px) {
    .room-avail .card .text {
        border: none !important;
    }
    
}
@media(max-width: 550px) {
    .input-group {
        width: 100% !important;
    }
    .review .item .w-50 {
        width: 100% !important;
    }
    .banner .container-fluid {
        padding: 100px 0 !important;
    }
    .room-avail-div {
        width: 100% !important;
    }
    
}
@media (max-width: 412px) {
    .rooms_section .card .rooms {
        background-color: transparent;
        margin-top: 0;
        border-top-right-radius: 0;
        width: 100% !important;
        text-align: center !important;
    }
    .rooms_section .card {
        height: 100% !important;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    }
    .input-group :where(input, button) {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
}
@media (max-width: 375px) {
    .img-review img {
        margin-left: -1.6rem;
        width: 75px !important;
    }
    .review_section .col_12 {
        padding: 0 10px !important;
        margin: 0 10px !important;
    }
}
@media (max-width: 320px) {
    .margin {
        margin-top: 0.5rem !important;
    }
}