a.color-active {
    color: white !important;
    background-color: red;
}
section#out {

        background: white;
    }
div#about img {
    border: 1px solid #0000006b;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    
}

img#icon {
    width: 61px;
}
b#innovate {
    font-size: 20px;
}
.detail {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .header_content {
        border-bottom: 1px solid black;
    }
    .detail-content {
        position: relative;
        margin: 10% auto;
        padding: 20px;
        width: 80%;
        max-width: 600px;
        background: #fff;
        border-radius: 10px;
    }
b#come {
    color: #d4181d;

}
b {
    font-size: 23px;
}
h2#us {
    font-size: 28px;
}
    .detail-content iframe {
        width: 100%;
        height: 315px;
    }

    .closeed {
        position: absolute;
        top: 0px;
        right: 6px;
        color: darkblack;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
    }
      .section-sub-banner {
    position: relative;
    overflow: hidden;
}

.section-sub-banner .text {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.section-sub-banner .text.show {
    transform: translateX(0);
    opacity: 1;
}


p#para {
    margin-left: 26px;
}
h2#heading {
    font-size: 26px;
     text-transform: capitalize;
}
div#top {
    background-color: #D4181D;
    line-height: 0;
}
span#font {
    font-size: 18px;
    color: #ffffff;
}
h2#htag {
    font-size: 24px;
    text-transform: capitalize;
}
ul#contact {
    font-size: 20px;
}
span {
    color: red;
}
 span.fa.fa-caret-down {
    color: white;
}

.active-header {
     background: linear-gradient(to bottom, #000000 0%, #7a0202 100%) !important;
}

 
   a#abut {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff0002), color-stop(100%, #e81d23));
    margin: 5px;
    padding: 6px 20px;
    border-radius: 5px;
    color: white;
}
a#abut:hover {
     background: black;
}

   /* Ensure the background image is contained within the element */
#slider-revolution .slide-item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

/* Default slider height for larger screens */
#slider-revolution {
    width: 100%;
    height: 500px; /* Set a height for the slider */
}
p#about {
    line-height: 26px;
    text-align: justify;
    font-weight: 500;
    font-size: 17px;
}
div#Lap {
    margin-top: 0px;
}
 h3#heading {
   
    font-size: 22px;
     text-transform: capitalize;
    }
    button.awe-btn.awe-btn-12 {
    
    background-color: red;
    color: #fff;
    border-radius: 5px;
}
     a#btn {
     border:none ; 
    background-color: #dc1121;
   
}
div#item {
    width: 165px;
    height: 160px;
    background-color: white;
    padding: 0 5px;
    display: table-cell;
    vertical-align: middle;
}
#item:hover {
    background-color: red; /* Optional: Change background color on hover */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth effects */
}

#item:hover span {
    color:white; /* Change text color on hover */
}

#item:hover {
    transform: scale(1.05); /* Slightly enlarge the box on hover */
}

h6#text {
    padding: 15PX;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    text-transform: capitalize;
}
a#btn:hover {
  
    color: red !important;
    background-color: white;
}
li#address {
    margin-left: 43px;
}
section#room {
   
    padding-bottom: 44px;
}
    .card {
    text-align: center;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
}
h5.card-title {
    font-size: 15px;
}
.client-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
section.section-sub-banner.bg-12 {
    background-color: gray;
}
.client-box:hover {
    transform: translateY(-10px);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    }
}

.client-box {
    animation: pulse 2s infinite;
}



i#ullist {
    color: red;
}
    .room_item-5 .room_item-forward h2{
            font-size: 28px;
     text-transform: capitalize; 

    }
    .guestbook-event .guestbook-content_1 {
     margin-top: 0px;
    }
    h2.title.upper {
    font-size: 22px;
}
.header_content .menu>li.current-menu-item>a {
    background-color: #dc1121;
}
a#footer {
    color: red;
}
    h2.mb15 {
    font-weight: bold;
    margin: 0;
    color: #232323;
    font-size: 36px;
    font-weight: bold;
    font-family: 'Montserrat';
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    }
   
   
    .cat-video-wrapper {
    padding: 20px 0;
}

.cat-video-wrapper .cat-story-video {
    position: relative;
    text-align: center;
}
ul#ul {
    line-height: 25px;
}
.cat-video-wrapper .cat-story-video img {
    width: 100%;
    height: auto;
    display: block;
}

.cat-video-wrapper .cat-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cat-video-wrapper .cat-play-btn a {
    font-size: 2rem;
    color: red;
}
h6#sub {
    color: red;
   text-transform: capitalize;
    font-weight: bold;
    font-size: 18px;
    font-family: 'Hind';
    margin-top: 20px;
    margin-left: 35px;

}
.accomd-modations-room {
    margin-top: 30px;
}

div#tab {
    margin-top: 10px;
    padding-top: 10px;
}
@media (max-width: 576px) {
    .cat-video-wrapper .cat-play-btn a {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 768px) {

.header_logo img {
     max-height: 0px; 
}
 .detail-content iframe {
    width: 100%;
    height: 170px;
}
p {
    text-align: justify;
}
.item.room-item-style-2 .bgr .details .price {
        
        text-align: center;
}
.item.room-item-style-2 .outer .bgr .details .title a {
    text-transform: capitalize;

}
.room_item-5 .room_item-forward h2 {
        font-size: 16px;
        text-transform: capitalize;
    }
    .cat-video-wrapper .row {
        flex-direction: column;
    }

    .cat-video-wrapper .col-md-4 {
        width: 100%;
        padding: 10px 0;
    }
    .card {
    margin-top: 23px;
    }
    .cat-video-wrapper .cat-story-video img {
    width: 91%;
    height: auto;
   display: inline;
    }
    div#detail {
    text-align: justify;
    padding-left: 15px;
    padding-right: 18px;
}
section#out {
    margin-top: 0px;
}

h2#htag {
        font-size: 16px;
        text-transform: capitalize;
    }
     #slider-revolution .slide-item {
        background-size:contain ; /* Make the image cover the area without being stretched */
        background-position: top;
    }
    .mt50 {
    margin-top: -490px !important;

}
 span.fa.fa-caret-down {
    color: white;
}
ul#sub {
    background-color: black;
} 
 li#sub {
    background-color: black;
 } 
 nav#nav {
    background-color: black;
}
ul#contact {
    font-size: 16px;
}

}




/*addd*/

 h5#come {
    margin-top: 80px;
    margin-left: 22%;
    font-size: 24px;
}
    .section-slider {
        position: relative;
    }

    #slider-revolution {
        position: relative;
    }

    .slide-item {
        position: relative;
        background-size: cover;
        background-position: center;
        height: 400px; /* Adjust the height as needed */
    }
span.dynamic-text-letter {
    color:#D4181D;
}.slider-title {
    position: absolute;
    top: 25%;
    left: 27%;
    transform: translateX(-50%);
    color: #830506;
    font-size: 20px; /* Adjust font size as needed */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 10px;
    opacity: 0;
    animation: slideIn 2s forwards; /* Slower animation */
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

@keyframes showLetter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-animate="true"] .slider-title {
    animation: showLetters 1s forwards; /* Adjusted for slower effect */
}

@keyframes showLetters {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dynamic-text-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: showLetter 0.3s forwards; /* Slower letter animation */
    animation-delay: 0.2s; /* Add delay between letters */
}


    @media (max-width: 600px) {
        .slider-title {
            font-size: 15px;
           top: 0%;
        left: 50%;
            
        }
       
        .sub-banner .text p{
            text-align: center;
        }
      h2#heading {
    font-size: 22px;
    text-transform: capitalize;
}
h5 {
    text-align: center;
}

div#list-title {
    margin-top: -73px;
}

    }

 /*preloader*/
 
 #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Preloader content */
#ctn-preloader {
    text-align: center;
    animation: fadeIn 1s ease-in-out;
    border:1px solid black;
    border-radius: 15px; /* Rounded corners */
    padding: 30px; /* Add some padding inside the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for better appearance */
}



/* Preloader heading */
.preloader-heading {
    font-size: 28px;
    font-weight: bold;
    color: red;
    margin-bottom: 20px;
    animation: fadeInText 3s ease-in-out infinite slow; /* Adjusted duration to 2 seconds */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), ;
}


/* Preloader image */
.preloader-img {
    width: 50%;
    
}

/* Keyframes for fade-in text */
@keyframes fadeInText {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Keyframes for fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
  .animated-text {
    position: relative;
    display: inline-block;
    font-size: 20px;
    animation: fadeIn 1.5s ease-in-out forwards;
    opacity: 0; /* Ensures animation is visible only on load */
    font-family: arial bold;
    color:white !important;
}


.animated-text:hover {
    color:red !important;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

   #whatsapp_button {
       margin-right: -106px;
    height: auto;
    
    z-index: 1001;
}
b#number {
    font-size: 17px;
    color: #ce171b;
}
img#chat {
    width: 44px;
}

/*.header_content .header_menu {*/
/*    margin: 10px auto !important ;*/
/*}*/

/*.header_logo {*/
/*    padding: 5px 0px !important;*/
/*}*/

.img-video-youtube {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.2); /* Added bottom shadow */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Hide overflow to maintain image borders */
    background: #D4181D; /* White background */
    transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease; /* Smooth hover effects */
    margin-bottom: 20px; /* Add spacing below each image */
    position: relative; /* To position text and hover effects */
}

/* Hover effect to scale the image */
.img-video-youtube:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    transform: translateY(-5px); /* Move up slightly */
    background-color: rgb(255 255 255); /* Subtle background color change */
}

/* Text hover effect */
.img-video-youtube:hover h3 {
    color: #007bff; /* Change text color to blue */
    transform: scale(1.1); /* Slightly enlarge the text */
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition */
}

 .img-video-youtube:hover::before {
    content: ''; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255 255 255 / 0%); 
    opacity: 0;  
    transition: opacity 0.3s ease;  
}

.img-video-youtube:hover::before {
    opacity: 1;  
}

 .img-video-youtube img {
    transition: transform 0.3s ease; /* Smooth scaling */
}

.img-video-youtube:hover img {
    transform: scale(1.1); /* Slightly zoom in the image on hover */
    transition: transform 0.3s ease; /* Smooth zooming */
}

/* Optional: Add a shadow effect to the title on hover */
.img-video-youtube h3 {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.img-video-youtube:hover h3 {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add shadow to text */
}

.img-video-youtube h3 {
    color: rgb(255 255 255) ;
}


.bg-22 {
    background-image: url(../images/bg-new.jpg);
} 

.bg-23 {
    background-image: url(../images/grind-bg_12.jpg);
} 

.section-about .about {
    margin-top: 0px !important;
}

.about-item .text {
    padding-left: 20px !important;
}


.about-item .img {
    margin: 45px auto !important;
}

.section-about {
    padding-bottom: 40px !important;
    padding-top: 40px !important;
}

.room-detail_img .room_img-item h6 {
    background-color: rgba(51, 51, 51, 0.6)!important;;
    position: absolute !important;;
    bottom: 0!important;;
    left: 0!important;;
    right: 0!important;;
    font-size: 32px !important;;
    color: #fff!important;;
    padding: 15px 20px !important;;
    font-weight: 600 !important;;
    letter-spacing: 1px!important;;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6)!important;;
    transition: background-color 0.3s ease, transform 0.3s ease!important;;
    z-index: 2!important;;
}

.room-detail_img .room_img-item:hover h6 {
    background-color: rgba(0, 0, 0, 0.75) !important;;
    transform: translateY(-5px)!important;;
}



.room-detail_img {
    position: relative !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease !important;
}

.room-detail_img:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;
}