* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    outline: none;
    border: none;
    text-decoration: none !important;
}

:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Raleway", sans-serif;
    --nav-font: "Raleway", sans-serif;

    
    --background-color: #ffffff;
    --default-color: #2f3138;
    --heading-color: #0e1b4d;
    --paragraph-color:#4b4b4b;
    --review-strong:#3d3d3d;
    --accent-color: #d40a2e;
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
    --yellow: #ffc107;
    /* Dark-background */
    --dark-background-color: #000820;
    --dark-default-color: #ffffff;
    --dark-heading-color: #ffffff;
    --dark-surface-color: rgba(0, 21, 83, 0.7);

    --nav-color: rgba(255, 255, 255, 0.65);
    --nav-hover-color: #ffffff;
    --nav-mobile-background-color: #ffffff;
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color: #212529;
    --nav-dropdown-hover-color: #f82249;

    /* Smooth scroll */
    scroll-behavior: smooth;
    scroll-padding: 115px;

    font-size: 16px;
    overflow-x: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color) !important;
    font-family: var(--heading-font) !important;
}

.header{background-color: var(--dark-background-color);}
.sticky-top.active{opacity: 0.8;}

/* Navbar */
.navbar-toggler{background: none !important; border: none !important;}
.navbar-toggler:focus, 
.navbar-toggler:active, 
.navbar-toggler:focus-visible { outline: none !important;  box-shadow: none !important;}
.navbar-toggler span{display: block; width: 30px; height: 4px; border-radius: 12px; margin: 4px; background: var(--contrast-color) !important;}
.nav-item {padding: 15px 14px;}
.nav-item a{ color: var(--nav-color) !important; padding: 0 2px !important; font: 600 15px var(--nav-font); transition: 0.3s; position: relative;}
.nav-item a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--accent-color);
    visibility: hidden;
    width: 0;
    transition: all 0.3s ease-in-out 0s;
}
  .nav-item a:hover:before,
  .nav-item .active:before {
    visibility: visible;
    width: 100%;
}

.nav-item a:hover, .navbar .active{color: var(--nav-hover-color) !important;}
.cart-btn{background-color: var(--accent-color); color: var(--contrast-color) !important; text-decoration: none; font-size: 14px; padding: 8px 24px; margin: 0 0 0 30px; border-radius: 50px;}
.cart-btn:hover{color: var(--contrast-color); background-color: rgba(248, 34, 73, 0.85);}

/* Hero Section */
.hero-section h1{font-size: 42px;}
.hero-section h2{font-weight: 400; font-size: 30px;}

/* carousel */
.carousel-item img {height: 509px;  width: 100%; object-fit: cover; }

/* Video Section */
.video-section video{width: 100%; height: 100%; /*object-fit: cover;*/ background-color: var(--dark-background-color);}
.video-section.gallerys video{height: 350px;}


.homestay h1{font-size: 32px; font-weight: 700; position: relative;}
.homestay img{ width: 100%; height: 240px; object-fit: cover;}
.homestay .homestay-image{text-align: center; position: relative; overflow: hidden;}
.homestay .homestay-image-name{
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    padding: 15px 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.homestay .homestay-image-name p{margin: 0; color: var(--contrast-color); font-weight: 700; font-size: 16px;}

.shooting img{width: 100%; height: 400px; object-fit: cover;}


/* Common Heading */
.common-heading{font-size: 32px; font-weight: 700; position: relative;}
.common-heading::after{
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/* Rooms */
.img-card{width: 100%; height: 350px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;}
.img-card h2{font-size: 24px;}
.img-card img{width: 100%; height: 350px; object-fit: cover;}
.img-card img:hover{transition: 0.3s ease-in-out; transform: scale(1.1);}
.img-card video{width: 100%; height: 100%; object-fit: cover;}

/* Facilities */
.facilities {border: 5px solid var(--default-color);text-align: center;width: 416px;height: 270px;max-width: 100%;margin: 0 auto; }
.facilities img { width: 260px;  height: 260px; object-fit: cover;}

/* Gallery */
.gallery{ overflow: hidden; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .1); border: 1rem solid #fff; border-radius: 5rem; height: 18rem;}
.gallery img{width: 100%; height: 100%; object-fit: cover;}

/* Offer */
.offers{background-color: var(--contrast-color);}
.offers .free{color: var(--heading-color) !important;}
.offers .sub{color: var(--heading-color) !important;}
.offers img{width: 40px; height: 40px;}
.offers .offer-name{font-weight: 600; font-size: 18px; color: var(--heading-color);}

/* Review */
.center{margin: 0 6rem !important;}
.review{box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1); background-color: var(--background-color); padding: 20px; margin: 15px; max-width: 500px; }
.profile-img img{width: 50px; height: 50px; margin-right: 10px;}
.name-user p{font-weight: 700; font-size: 12px; color: var(--review-strong);}
.client-comment p{font-size: 12px; color: var(--paragraph-color);}

/* Near About  */
.info{font-size: 12px;}
.card-body p{font-weight: 600; font-size: 20px; color: var(--heading-color);}
.card:hover p{color: var(--accent-color) !important;}
.card-body p i{color: var(--yellow); font-size: 12px;}
.card-img{overflow: hidden;}
.card:hover img{transition: 0.3s ease-in-out; transform: scale(1.1);}

/* Contact */

.contact{ background-color: var(--background-color); padding: 20px 0 30px 0; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);}
.contact .box{width: 56px; height: 56px; border: 2px dotted var(--accent-color); border-radius: 50%; display: grid; place-items: center; color: var(--accent-color); font-size: 24px;}
.contact h2{font-size: 18px; font-weight: 700; margin: 10px 0;}
.contact p,.contact a{font-size: 16px;color: #2f3138;}

.php-email-form {background-color: var(--background-color); height: 100%; padding: 30px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);}

.php-email-form button[type=submit] {color: var(--contrast-color); background: var(--accent-color); border: 0; padding: 10px 30px; transition: 0.4s; border-radius: 50px;}
.php-email-form button[type=submit]:hover {background: var(--accent-color);}

.php-email-form input[type=text],
.php-email-form input[type=email],
.php-email-form input[type=tel],
.php-email-form textarea,.php-email-form select { font-size: 14px; padding: 10px 15px; box-shadow: none !important; border-radius: 0; color: var(--default-color); background-color: var(--surface-color);}

.php-email-form input[type=text]:focus,
.php-email-form input[type=email]:focus,
.php-email-form input[type=tel]:focus,
.php-email-form textarea:focus,.php-email-form select:focus { border-color: var(--accent-color);}

/* PHP Email Form Messages */
.php-email-form .error-message { display: none; background: var(--accent-color); color: var(--contrast-color); text-align: left; padding: 15px; margin-bottom: 24px; font-weight: 600;}

.php-email-form .sent-message { display: none; color: var(--contrast-color); background: #059652; text-align: center; padding: 15px; margin-bottom: 24px; font-weight: 600;}

.php-email-form .loading { display: none; background: var(--surface-color); text-align: center; padding: 15px; margin-bottom: 24px;}
.php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--surface-color);
    animation: php-email-form-loading 1s linear infinite;
}
@keyframes php-email-form-loading {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
}

/* FAQ */
.FAQ{margin: 40px 0;}

/* Footer */
.footer{background-color: var(--dark-background-color);}
.footer .copyright{padding: 30px 0;}
.copyright p{font-size: 14px; color: var(--contrast-color); margin: 0;}
.copyright .optimiser{color: #f50832;}

.social-media a{ font-size: 18px; display: inline-block; background-color: rgba(47, 49, 56, 0.8); color: var(--contrast-color); line-height: 1; padding: 8px 0; margin-right: 4px; border-radius: 4px; text-align: center; width: 36px; height: 36px; transition: 0.3s;}
.social-media a:hover{background-color: var(--accent-color);}

/* Scroll to top */
.scroll-top{ position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: 15px; z-index: 99; background-color: var(--accent-color); width: 44px;  height: 44px; border-radius: 50px; transition: all 0.4s;}
.scroll-top i { font-size: 24px;color: var(--contrast-color);}
.scroll-top.active { visibility: visible; opacity: 1;}

/* Preloader */
.preloaders { position: relative; display: flex; background-color: var(--background-color); height: 100vh; width: 100%; justify-content: center; align-items: center;}
.loading{color: var(--heading-color);margin: 0 3rem 1rem 0; font-size: 50px;}
.loader:before , .loader:after {
    content: '';
    width: 15px;
    height: 15px;
    display: inline-block;
    position: relative;
    margin: 0  5px;
    border-radius: 50%;
    color: var(--dark-background-color);
    background: currentColor;
    box-shadow: 50px 0 ,  -50px 0;
    animation: left 1s infinite ease-in-out;
}
.loader:after { color: #FF3D00; animation: right 1.1s infinite ease-in-out;}
@keyframes right {
    0% , 100%{transform: translateY(-10px) }
    50% { transform: translateY(10px) }
}
@keyframes left {
    0% , 100%{ transform: translateY(10px) }
    50% { transform: translateY(-10px) }
}

.show-more-btn{background: var(--accent-color);}

/* Media Query */
@media screen and (max-width:1120px){
    .carousel-item img {height: 350px;}
    .nav-item {padding: 15px 7px;}
    .hero-section h1{font-size: 32px;}
    .hero-section h2 {font-size: 28px;}

}
@media screen and (max-width:980px){
    .nav-item a{display: inline-block;}
    .center { margin: 0 0 !important;}
    .carousel-item img {height: 250px;}
    .hero-section h1{font-size: 26px;}
    .hero-section h2{font-size: 20px;}

}
@media screen and (max-width:767px){
    .nav-item a{display: inline-block;}
    .center {margin: 0 0 !important;}
    .common-heading {font-size: 28px;}
    .card-body p {font-size: 18px;}


}
@media (max-width: 575px) {
    .contact .php-email-form {padding: 20px;}
}
@media screen and (max-width:460px){
    .nav-item a{display: inline-block;}
    .center { margin: 0 0 !important;}
    .hero-section h1{font-size: 14px;}
    .hero-section h2{font-size: 14px;}
    .common-heading {font-size: 22px;}
    .card-body p {font-size: 18px;}
    .carousel-item img {height: 110px;}


}