/*** Spinner Start ***/

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-out, visibility 0s linear 0.5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity 0.8s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.wow,
.animated {
    animation-duration: 2s !important;
}

/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 99;
    overflow: hidden;
    font-size: 20px !important;
    color: #c11111 !important;
    /* Prevent overflow of the water effect */
    background-color: transparent;
    /* Make background transparent for the effect */
    border: 1px solid #c11111 !important;
    /* Add a border to mimic a glass */
    border-radius: 25px;
    /* Round corners */
}

.back-to-top:hover {
    color: #c11111;
}

/* Water Effect */
.water-effect {
    position: absolute;
    bottom: 0;
    /* Start filling from the bottom */
    left: 0;
    width: 100%;
    height: 100%;
    /* Fill the entire button */
    background: rgba(20, 20, 74, 0.8);
    /* Water color */
    transition: height 0.5s ease;
    /* Smooth filling effect */
}

/* Initial state for the water filling effect */
.filled {
    height: 100%;
    /* Fill to the top */
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-weight: 700 !important;
    font-family: "Open", sans-serif !important;
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
    font-weight: 600 !important;
    font-family: "Open", sans-serif !important;
}

.py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/*** Button Start ***/

.btn {
    font-weight: 600;
    transition: 0.5s;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-md-square {
    width: 46px;
    height: 46px;
}

.btn-lg-square {
    width: 58px;
    height: 58px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn.btn-primary:hover {
    color: #c11111 !important;
    background: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}

.btn.btn-dark:hover {
    color: var(--bs-dark) !important;
    background: #c11111 !important;
    border-color: #c11111 !important;
}

/* General Button Styling */
.custom-btn {
    display: inline-block;
    padding: 10px;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(45deg, #c11111, #e23b3b);
    border: none;
    border-radius: 5px;
    text-transform: capitalize;
    font-weight: 400;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    /* Adds a nice shadow */
    position: relative;
    overflow: hidden;
}

/* Hover Effects */
.custom-btn:hover {
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(255, 65, 108, 0.5);
    /* Make the shadow stronger */
    transform: translateY(-5px);
    background: #14144a !important;
    /* Slight lift effect on hover */
}

/* Extra effect - Ripple hover animation */
.custom-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.6s ease;
    border-radius: 50%;
    z-index: 0;
}

.custom-btn:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

/*****blue btn******/
.custom-btn-blue {
    display: inline-block;
    padding: 10px;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(45deg, #14144a, #6b6585);
    border: none;
    border-radius: 5px;
    text-transform: capitalize;
    font-weight: 400;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    /* Adds a nice shadow */
    position: relative;
    overflow: hidden;
}

/* Hover Effects */
.custom-btn-blue:hover {
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(255, 65, 108, 0.5);
    /* Make the shadow stronger */
    transform: translateY(-5px);
    background: #c11111 !important;
    /* Slight lift effect on hover */
}

/* Extra effect - Ripple hover animation */
.custom-btn-blue::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.6s ease;
    border-radius: 50%;
    z-index: 0;
}

.custom-btn-blue:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

/* Make sure the button's content stays above the effect */
.custom-btn span {
    position: relative;
    z-index: 1;
}

/*** Button End ***/

/*** Topbar Start ***/
.topbar .topbar-inner {
    height: 45px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.5);
}

.topbar a,
.topbar a i {
    transition: 0.5s;
}

.topbar a:hover,
.topbar a i:hover {
    color: #c11111 !important;
}

/*** Topbar End ***/

/*** Navbar Start ***/
.fixed-top {
    transition: 0.5s;
}

.navbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.navbar .navbar-nav .nav-link {
    padding: 12px;
    color: var(--bs-dark);
    font-size: 17px;
    font-weight: 600;
    transition: 0.5s;
}

.navbar .navbar-nav .nav-link:hover,
.fixed-top.bg-white .navbar .navbar-nav .nav-link:hover,
.fixed-top.bg-white {
    color: #c11111;
}

/* Style for the active link */
.navbar .navbar-nav .nav-link.active {
    color: #c11111;
    position: relative;
    /* This makes sure the ::before pseudo-element is positioned relative to the link */
}

/* Circle behind the active link */
.navbar .navbar-nav .nav-link.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    /* Adjust the position to move it to the left side */
    transform: translateY(-50%);
    width: 30px;
    /* Size of the circle */
    height: 30px;
    /* Size of the circle */
    background-color: rgba(20, 20, 74, 0.4);
    /* Color of the circle */
    border-radius: 50%;
    /* Makes it a circle */
    visibility: visible;
    /* Make it visible only on active links */
}

@media (max-width: 1127px) {
    .navbar .navbar-nav .nav-link {
        padding: 12px 8px;
    }
}

/* For responsiveness - Adjust the circle's size and position for smaller screens */
@media (max-width: 768px) {
    .navbar .navbar-nav .nav-link.active::before {
        left: -10px;
        /* Adjust the left position for smaller screens */
        width: 8px;
        /* Smaller circle for smaller screens */
        height: 8px;
        /* Smaller circle for smaller screens */
    }
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    vertical-align: middle;
    margin-left: 0px;
}

@media (min-width: 992px) {
    .navbar-collapse {
        background: transparent !important;
    }

    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        transition: 0.5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        background: var(--bs-light) !important;
        transition: 0.5s;
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .navbar .navbar-nav .nav-link {
        padding: 12px 12px 0px 12px;
    }
}

.navbar-toggler {
    color: #14144a !important;
    padding: 5px 10px;
    border: 0.5px solid #c11111 !important;
    box-shadow: none !important;
}
.mobile-profile-div {
    border: 0.5px solid #c11111 !important;
    color: #14144a !important;
    padding: 6px 4px !important;
    margin-right: 8px;
}

/*** Navbar End ***/

/*** Hero Header ***/
.hero-header {
    padding-top: 15rem;
    padding-bottom: 6rem;
    background-image: linear-gradient(
            rgba(255, 255, 255, 0.5),
            rgba(20, 20, 74, 0.5),
            rgba(20, 20, 74, 0.5)
        ),
        url(../img/bg-2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {
    .hero-header {
        padding-top: 12rem;
    }
}

@media (max-width: 500px) {
    .hero-header {
        padding: 8rem 0.5rem 4rem 1rem;
    }
}

.hero-header .breadcrumb-item {
    font-size: 18px;
}

/*** Hero Header ***/

/******* Carousel icon******/
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* Black transparent background */

    /* Make the background circular */
    padding: 15px;
    /* Add some padding to make it larger */
    color: #ffffff;
    /* White icon */
}

.carousel-control-prev,
.carousel-control-next {
    width: 35px;
    /* Make the control width smaller */
    height: 50px;
    /* Make the control height smaller */
    background-color: rgba(23, 23, 63, 0.6);
    /* Black transparent background */
    border-radius: 3px;
    /* Circular controls */
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-control-prev {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    /* Vertically center */
}

.carousel-control-next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    /* Vertically center */
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
    display: none;
    /* Remove default Bootstrap icon */
}

.carousel-control-prev-icon {
    background-image: url("../img/icon/left.png");
    /* Custom left arrow icon */
    background-size: 70% 70%;
    /* Adjust icon size */
}

.carousel-control-next-icon {
    background-image: url("../img/icon/left.png");
    rotate: 180deg;
    /* Custom right arrow icon */
    background-size: 70% 70%;
    /* Adjust icon size */
}

@media (max-width: 767px) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 25px;
        /* Make the control width smaller */
        height: 40px;
    }

    .carousel-control-prev-icon {
        background-image: url("../img/icon/left.png");
        /* Custom left arrow icon */
        background-size: 40% 40%;
        /* Adjust icon size */
    }

    .carousel-control-next-icon {
        background-image: url("../img/icon/left.png");
        rotate: 180deg;
        /* Custom right arrow icon */
        background-size: 40% 40%;
        /* Adjust icon size */
    }

    .carousel-control-prev {
        top: 60%;
    }

    .carousel-control-next {
        top: 60%;
    }
}

/******* Carousel icon end ********/

/*** About Start ***/
.about a.btn.btn-light:hover {
    background: var(--bs-dark) !important;
    color: #c11111 !important;
    border: 0;
}

/* Style for the Working Year Div */
.working-year {
    z-index: 1;
    /* Prevent it from being too large */
    max-width: 250px;
}

.working-year .working-content {
    background-color: #14144a !important;

    color: #fff;
}

/* Position the working year div centrally */
.position-relative {
    position: relative;
}

/* Style for the Distance Div */
.distance {
    z-index: 1;
    /* Prevent it from being too large */
}

.distance .distance-content {
    background-color: #14144a !important;
    padding: 45px 20px;
    color: #fff;
}

/* Position the working year div centrally */
.position-relative {
    position: relative;
}

/*** About End ***/

/*** Activities Start ***/
.activities .activities-item {
    display: flex;

    /* Center the icon and text vertically */
    box-shadow: rgba(20, 20, 74, 0.16) 0px 3px 6px,
        rgba(20, 20, 74, 0.13) 0px 3px 6px;
    transition: transform 2s;
    height: 20vh;
    border-radius: 10px;
    /* Apply transition to transform */
}

.activities .activities-item:hover {
    transform: translate(-8px, -8px);
    /* Move the item diagonally on hover */
}

.activities .activities-item img {
    height: 60px;
    width: 60px;
}

/*** Activities End ***/

/********* fACT sTART *********/
.fact-section {
    background-image: linear-gradient(
            rgba(20, 20, 74, 0.7),
            rgba(20, 20, 74, 0.7)
        ),
        url(../img/bg-1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 30px 0px 60px 0px;
}

.fact-section .fact-card {
    border: 1px solid white;
    border-radius: 50%;
    height: 30vh;
    width: 30vh;
    padding-top: 50px;
    margin-top: 30px;
}

@media (max-width: 500px) {
    .fact-section .fact-card {
        height: 20vh;
        width: 20vh;
        padding: 20px;
    }
}

/***** Fact End ******/

/*** room Start ***/
.room-item img {
    transition: 0.5s;
}

.room .room-item a {
    transition: 0.5s;
}

.room-item img:hover {
    transition: 0.5s;
    transform: scale(1.2);
}

.room-item a:hover {
    background: var(--bs-dark);
    color: #c11111;
    opacity: 0.5s;
}

.swiper {
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dots */
.swiper-pagination {
    bottom: 10px !important;
    text-align: center;
}
.swiper-pagination-bullet {
    background-color: #ccc;
    opacity: 1;
    margin: 0 4px !important;
}
.swiper-pagination-bullet-active {
    background-color: #c51616;
}

/*** Events End ***/

/*** hall Start ***/
.hall .hall-item {
    height: 100%;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.hall-item img {
    transition: 0.5s;
}

.hall-item:hover img {
    transform: scale(1.2);
}

.hall-item .hall-meta a,
.hall-item .hall-meta a i {
    transition: 0.5s;
}

.hall-item .hall-meta a:hover,
.hall-item .hall-meta a i:hover {
    color: #c11111 !important;
}

.tilt-hover-right {
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.tilt-hover-right:hover {
    transform: perspective(1000px) rotateY(20deg);
}

.tilt-hover-left {
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.tilt-hover-left:hover {
    transform: perspective(1000px) rotateY(-20deg);
}
/*** hall End ***/

/*** Event Start ***/
.event-item {
    height: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
    text-align: center;
    margin: 10px;
}

.event-item:hover {
    transform: perspective(1000px) rotateY(-2deg) scale(1.01);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.event-item .event-img {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.event-item img {
    transition: transform 0.6s ease;
    will-change: transform;
}

.event-item:hover img {
    transform: scale(1.05) rotateZ(0.5deg);
}

.event-item .bg-primary {
    background-color: #c11111 !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: 0 0 0 10px;
}

.event-item .h4 {
    transition: color 0.3s;
    color: #1c1c75;
    font-size: 20px;
}

.event-item .h4:hover {
    color: #c11111;
}

.event-item p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

.event-carousel .owl-dots {
    text-align: center;
    /* Center dots */
    margin-top: 15px;
    /* Space above dots */
}

.event-carousel .owl-dots .owl-dot {
    display: inline-block;
    /* Arrange dots horizontally */
    margin: 0 5px;
    /* Space between dots */
}

.event-carousel .owl-dots .owl-dot span {
    display: block !important;
    /* Ensure the dot is block */
    width: 12px;
    /* Width of the dot */
    height: 12px;
    /* Height of the dot */
    background: #c11111;
    /* Dot color */
    border-radius: 50%;
    /* Make dots circular */
    opacity: 0.5;
    /* Default opacity */
    transition: opacity 0.3s;
    /* Smooth transition on hover */
}

.event-carousel .owl-dots .owl-dot.active span {
    opacity: 1;
    /* Full opacity for active dot */
}

.owl-carousel .owl-dots.disabled {
    display: block;
}

.owl-carousel .owl-nav.disabled {
    display: none;
}

/*** event End ***/

/*** Team Start ***/
.team .team-img {
    height: 100%;
    padding: 25px;
    background: var(--bs-white);
    overflow: hidden;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
}

.team .team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team .team-item {
    position: relative;
    overflow: hidden;
}

.team .team-item img {
    transition: 0.5s;
}

.team .team-item:hover img {
    transform: scale(1.2);
}

.team .team-item .team-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 15px;
    transform: translateX(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s;
}

.team .team-item:hover .team-content {
    opacity: 1;
    background: rgba(241, 193, 82, 0.7);
}

/*** Team End ***/

/*** testimonial Start ***/
.testimonial-item {
    box-shadow: rgba(20, 20, 74, 0.34) 0px 3px 8px;
    padding: 40px;
    margin: 10px 0px;
}

.testimonial-carousel .owl-item img {
    width: 100px;
    height: 100px;
}

.testimonial-carousel {
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 60px;
    height: 40px;
    background: #c11111;
    color: var(--bs-dark);
    font-size: 22px;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    transition: 0.5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover {
    background: var(--bs-dark) !important;
    color: #c11111 !important;
}

.testimonial-carousel .owl-nav .owl-next {
    left: auto;
    right: 0px;
}

.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--bs-dark) !important;
    color: #c11111 !important;
}

/*** testimonial End ***/

/*** Footer Start ***/
.footer {
    margin-top: 6rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
        url(../img/bg-footer.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.footer .footer-item p {
    font-size: 16px;
    line-height: 30px;
}

.footer .border-top,
.footer .border-bottom {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.footer button {
    border: 0;
    transition: 0.5s;
}

.footer button:hover {
    background: var(--bs-dark);
    color: #c11111;
}

.footer-item a.btn.btn-light:hover {
    background: #c11111;
    color: var(--bs-dark) !important;
    border: #c11111;
}

.footer-item a,
.footer-item a i {
    transition: 0.5s;
}

.footer-item a:hover,
.footer-item a i:hover {
    color: #c11111 !important;
}

.footer .footer-social {
    height: 45px;
    width: 45px;
    background: white;
    display: flex;
    justify-content: center;
    /* Horizontally center */
    align-items: center;
    border-radius: 5px;
    /* Vertically center */
}

.footer .footer-social i {
    font-size: 25px;
    color: #c11111;
}

/*** Footer End ***/

/****** Extra div*****/
.extra-div {
    background-image: url(../img/room1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.extra-div .play-btn {
    width: 94px;
    height: 94px;
    background: radial-gradient(#c11111 50%, rgba(229, 166, 166, 0.4) 52%);
    border-radius: 50%;
    display: block;
    position: relative;
    overflow: hidden;
}

.extra-div .play-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 100;
    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.extra-div .play-btn::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation: pulsate-btn 2s;
    animation: pulsate-btn 2s;
    -webkit-animation-direction: forwards;
    animation-direction: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps;
    animation-timing-function: steps;
    opacity: 1;
    border-radius: 50%;
    border: 5px solid rgba(193, 17, 17, 0.7);
    top: -15%;
    left: -15%;
    background: rgba(198, 16, 0, 0);
}

.extra-div .play-btn:hover::after {
    border-left: 15px solid #c11111;
    transform: scale(20);
}

.extra-div .play-btn:hover::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 200;
    -webkit-animation: none;
    animation: none;
    border-radius: 0;
}

.extra-div .extra-div-service {
    background: rgba(20, 20, 74, 0.7);
    padding: 40px 20px;
}

@media (max-width: 767px) {
    .extra-div-space {
        padding: 90px 0px;
    }
}

/***** Amenities******/
.amenities .amenities-item {
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    justify-content: center;
    /* Center content vertically */
    align-items: center;
    /* Center content horizontally */
    transition: transform 2s;
    border: 0.5px solid rgba(20, 20, 74, 0.16);
    border-radius: 10px;
    padding: 20px;
    /* Add padding for spacing */
    text-align: center;
    /* Center the text */
}

.amenities .amenities-item img {
    margin-bottom: 10px;
    /* Add space between image and text */
}

.amenities .amenities-item:hover {
    transform: translate(-8px, -8px);
    /* Move the item diagonally on hover */
}

.amenities .amenities-item img {
    height: 60px;
    width: 60px;
}
@media (max-width: 500px) {
    .amenities .amenities-item h6 {
        font-size: 15px;
        font-weight:600 !important;
    }
}

/********* Conatct Card*********/
.contact-card {
    border: none;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
        rgba(20, 20, 74, 0.1) 0px 2px 4px 0px,
        rgba(20, 20, 74, 0.05) 0px 0px 0px 1px inset;
    border-radius: 10px;
    margin-top: 7px;
}

.contact-card .contact-small-div {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: #c11111;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
        rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
        rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
        rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
        rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.contact-card .contact-small-div img {
    height: 40px;
    width: 40px;
}

/******** room detail ********/
/* Add a border or some other visual cue to the active thumbnail */
.room-image-section img.active {
    border: 2px solid #c11111;
    /* Highlight with a specific color */
    opacity: 0.9;
    /* Dim non-active images slightly */
}

.large-image {
    transition: opacity 0.3s ease-in-out;
    /* Smooth transition when swapping large images */
}

.room-amenities-section {
    background: rgba(175, 175, 194, 0.5);
    padding: 20px;
}

.room-amenities-section .side-room-amenity {
    margin-top: 5px;
}

.room-amenities-section .side-room-amenity img {
    height: 40px;
    width: 40px;
}

.room-amenities-section .side-room-amenity p {
    font-size: 19px;
    margin-top: 4px;
    font-weight: 200 !important;
}

.room-amenities-section .side-room-room-section {
    margin-top: 15px;
}

.room-amenities-section .side-room-room-section img {
    height: 60px;
}

.room-amenities-section .side-room-room-section p {
    margin-top: 10px;
}

/************  Fixed Footer Start ***************/

.footer-fixed-nav {
    height: 55px !important;
    position: fixed;
    bottom: -3px;
    display: none;
    z-index: 1000;
    padding: 3px 0px;
    background: black;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    background: white;
}

.footer-fixed-nav i {
    margin-top: 2px;
    color: #c11111;
    font-size: 20px;
}

.footer .copyright {
    padding: 20px 0px;
}

@media (max-width: 991px) {
    .footer-fixed-nav {
        display: block;
    }

    .back-to-top {
        bottom: 60px;
        right: 10px;
    }

    .footer .copyright {
        padding: 20px 0px 70px 0px;
    }

    .footer {
        margin-top: 4rem;
    }
}

/************  Fixed Footer End ***************/

/* Accordion styles */
.faq-container {
    margin-top: 20px;
}

.faq-item {
    margin-bottom: 18px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
        rgba(0, 0, 0, 0.23) 0px 6px 6px;
    border-radius: 10px;
}

.faq-question {
    background-color: #c11111;
    color: #fff;
    font-family: "Poppins", sans-serif;
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    word-spacing: 1px !important;
    font-size: 17px;
}

.faq-question::after {
    content: "+";
    font-size: 20px;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
    content: "-";
}

.faq-answer {
    padding: 0 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 15px;
    max-height: 500px; /* Arbitrary large value */
}

/** Video show on FAQS **/
.youtube-video-container {
    position: relative;
    width: 100%;
    max-width: 150px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.youtube-video-container:hover {
    transform: scale(1.02);
}

.youtube-thumbnail img {
    width: 100%;
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 0, 0, 0.8);
    color: #fff;
    padding: 5px 8px;
    border-radius: 50%;
    font-size: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

.youtube-video-container:hover .play-button {
    background-color: rgba(255, 0, 0, 1);
}