*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}


:root
{
    --primary-color:#000;
    --secondary-color:#fff;
    --primary-font:"Poppins", sans-serif;
    --secondary-font:"Rufina", serif;
}



body{
    font-family: var(--primary-font);
    font-family: var(--secondary-font);
    overflow-x: hidden;
    
}

/* modal pop-up */

/*  */

h1{
    font-size: 58px;
    line-height: 65px;
    font-weight: 700;
    color: var(--secondary-color) !important; 
    font-family: var(--secondary-font);
    margin-bottom: 20px;
    text-align: center;
}
h2{
    font-size: 32px;
    line-height: 39px;
    font-weight: 700;
    color: var(--primary-color);
    font-family: var(--secondary-font);
    margin-bottom: 20px;
}
 h4{
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    font-family: var(--primary-font);
    margin-bottom: 10px;
    text-transform: uppercase ;
} 
h3{
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: var(--primary-color);
    font-family: var(--secondary-font);
    margin-bottom: 20px;
}

p{
    font-size: 16px;
    font-family: var(--primary-font);
    font-weight: 300;
}
.main-btn{
    padding: 8px 40px;
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    text-decoration: none;
    border-radius: 40px;
    font-weight: 500;
    transition: .3s ease;
    font-family: var(--primary-font);
    width: fit-content;
}
.main-btn:hover{
    background-color:#1f3b35;
    color: #fff;
    transition: .3s ease;
}

.video-container{
    padding: 0px;
}


.about-row{
align-items: center;
}







@media only screen and (max-width: 992px)
{
    h1{
        font-size: 45px;
        line-height: 55px;
    }
    h2{
        font-size: 30px;
        line-height: 39px;
    }
    
}

@media only screen and (max-width: 768px){
    h1{
        font-size: 28px;
        line-height: 38px;
    }
    h2{
        font-size: 25px;
        line-height: 33px;
    }
    .banner-subtitle{
        margin-bottom: 10px;;
    }
    #banner-section .herocont .banner-btn {
        background-color: #fff0;
        color: #fff;
        font-weight: 400;
        font-size: 16px;
        border: solid 1px #fff;
        margin-top: 15px;
        padding: 8px 35px;
        transition: .3s ease;
    }
    #herosection
{
    background: black;
    background: url('../img/banner/herobanner2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height:70vh !important;
    overflow: hidden;
}
}
/* Home */
/* hero section */

#herosection
{
    background: black;
    background: url('../img/banner/herobanner2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height:100vh;
    overflow: hidden;
}

#header .navbar
{
    background: transparent !important;
    /* padding: 10px 0; */
    z-index: 2;
}


#navbarNav .navbar-nav
{
    gap:40px;
}
.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-family: var(--primary-font);
  font-size: 14px;
  color: #545454;
  white-space: nowrap;
  transition: 0.3s;
}
.navbar a i,
.navbar a:focus i {
  font-size: 16px;
  line-height: 0;
  margin-left: 5px;
}
.nav-link {
    position: relative;
    padding-bottom: 5px; 
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px; 
    background: linear-gradient(to right, #ffffff, rgb(245, 245, 245, 0.2 ));;
    transition: .3s ease;; 
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

#navbarNav .navbar-nav .nav-link
{
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 300;
    color: var(--secondary-color);
}
#header .logo-img{
    width: 230px;
}

.navbar-toggler {
    border: none;
}
/* .navbar-collapse.show .logo-img {
    display: none;
} */

#banner-section .herocont .banner-btn{
    background-color: #fff0;
    color: #000;
    font-weight: 400;
    font-size: 16px;
    border: solid 1px #000;
    margin-top: 15px;
    padding: 10px 45px;
    transition: .3s ease;; 
}

#banner-section .herocont .banner-btn:hover{
    background-color: #000;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    border: solid 1px #000;
    margin-top: 15px;
    padding: 10px 45px;
    transition: .3s ease;; 
}
#banner-section .herocont {
    margin-top: 30px;;
}


.navbar-toggler .navbar-toggler-icon {
    background-image: url(../img/icons/web.svg);
    background-size: contain;
}

.banner-para {
    padding: 0% 12%;
}

/* mobile navigation */

@media only screen and (max-width: 992px)
{
    #header .mobile-logo{
        width: 200px;
    }
    /* #header .logo-img{
        display: none;
    } */
    .navbar a,
.navbar a:focus {
  padding: 10px 0 10px 0px;
}
#navbarNav .navbar-nav
{
    gap:10px;
}
.nav-link:hover::after,
.nav-link.active::after {
    width: 7%;
}
#navbarNav .navbar-nav .nav-link
{
    font-size: 18px;
}
 
     .navbar-collapse {
        position: absolute;
        top: 100%;
        width: 100%;
        background: #0f1c19;
        left: 0;
        padding: 20px;
        margin: 0px;
        padding-bottom: 35px;
    }
    .navbar-collapse.collapse
    {
        transition: height 0.5s ease !important;
    }
    .navbar
    {
        position: relative;
    }
     .navbar-collapse.show .navbar
    {
        background:#000 !important;

    }
}

@media only screen and (max-width: 768px) {
    #header .mobile-logo{
        width: 145px;
    }
    .navbar a,
    .navbar a:focus {
  padding: 0px;}

  .about-sec-3 .sec-3-img {
    background-image: url(../img/images/monarda_home_about.jpg);
    object-fit: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 240px;
    background-position: bottom;
}


#cta .cta {
    margin-top: 40px !important;
    padding: 40px 20px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.gallery {
    padding: 30px 15px !important;
    margin-top: 20px !important;
    overflow: hidden;
}

}
#banner-section .banner-sec{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column; 
    width: 50%;
} 
#banner-section .center_heading{
    margin-top: 25%;
}
.banner-sec p{
    color: var(--secondary-color);
}
.banner-sec .banner-subtitle{
    color: var(--secondary-color);
}

.banner-sec .home-banner-subtitle{
    color:#000;
}

.banner-sec .home-banner-title{
    color:#000 !important;
}

.banner-sec .home-banner-para{
    color:#000;
}




#banner-section .contact-detail{
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(10px);
    background:rgb(245, 245, 245, 0.2 );
    border-radius: 50px;
    padding: 10px 20px;
    margin-top: 50px;
}
#banner-section .banner-btn{
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 8px 40px;
    text-decoration: none;
    border-radius: 40px;
    font-weight: 600;
    transition: .3s ease;
    font-family: var(--primary-font);
    width: fit-content;
}

#banner-sectionl .banner-btn:hover{
    background-color: transparent;
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.contact-detail .icon-div p{
    /* color: #fff !important;  */
    padding-top: 17px;
}

.icon-div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 20px;
    border-right: 1px solid rgb(245, 245, 245, 0.5 );
    padding-right: 30px;
    height: 40px;
}

.icon-box h3{
    
    font-size:16px;
}




/* about section */

.about-sec-1{
    margin-top: 120px;
    width: 60%;
}


.abt-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.abt-main .flower{
    width: 50px;
}
.abt-main .main-para{
    text-align: center;
}

.about-sec-2{
    margin-top: 80px;
}

.about-sec-2 .icon-img{
    width: 60px;
    margin-bottom: 25px;
}

.about-sec-2 .icon-box{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}
.about-sec-2 .amenitie-iconbox {
    display: flex;
    justify-content: center;
    row-gap: 30px;
}

.about-sec-3 {
    margin-top: 120px;
    
}

/* width */
::-webkit-scrollbar {
    width: 12px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #0f1c19; 
    border-radius: 10px;
  }
  
.about-sec-3 .sec-3-img img{
    
    object-fit: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-position: center;
}
a:hover {
    color: #0f1c19;
}
.sec-3-content{
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    padding: 60px 204px 60px 60px;
    /* background-color: var(--secondary-color); */
    /* overflow: hidden; */
}

/* amenities */


.amenities{
    margin-top: 80px;
}
.aments-sec1{
    flex-direction: column;
}

        /* image slider */


#amenitiessection
{
    padding: 2% 0 7% 0;
}
#amenitiessection .right
{
    display: flex;
    justify-content: end;
    align-items: end;
}
#amenitiessection .right .main-btn
{
    height: fit-content;
}
.amenities-slide
{
    margin-top:40px;
    /* position: relative; */
}
.amenities-slide .amenities-items{
     border-radius: 10px; 
     overflow: hidden;
}
#amenitiessection .amenities-items{
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* border-radius: 15px; */
    /* overflow: hidden; */
    padding:200px 20px;
}

.amenities-slide .premium_am{
    background-image: url('../img/images/honeymooonsuite2.jpg'); 
}
.amenities-slide .restaurant_am{
    background-image: url('../img/images/retaurent.jpg'); 
}
.amenities-slide .conference_am{
    background-image: url('../img/images/conference_hall.jpg'); 
}
.amenities-slide .swimming_am{
    background-image: url('../img/images/swimmingpool.jpg'); 
}
.amenities-slide .football_am{
    background-image: url('../img/images/football.jpg'); 
}
.amenities-slide .badminton_am{
    background-image: url('../img/images/badminton.jpg'); 
}
.amenities-slide .carrom_am{
    background-image: url('../img/images/carrom.jpg'); 
}
.amenities-slide .table_am{
    background-image: url('../img/images/tabletennis.jpg'); 
}
.amenities-slide .rain_am{
    background-image: url('../img/images/rain.jpg'); 
}
.amenities-slide .ev_am{
    background-image: url('../img/images/charging_station.jpg'); 
}



/* .amenities-slide .amenities-items:nth-child(2) {
    background-image: url('../img/images/retaurent.jpg'); 
}

.amenities-slide .amenities-items:nth-child(3) {
    background-image: url('../img/images/3001\ 1.png');
}
.amenities-slide .amenities-items:nth-child(4) {
    background-image: url('../img/images/amenities-img.jpg');
} */

.main-amenities{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: space-between;
    color: white;
    padding: 20px;
    /* box-sizing: border-box; */
}


.amenities-slide .slider-para{
    color: #fff;
    font-size: 14px;
}
.amenities-slide .slider-text{
    color: #fff;
}
.btm-desc .service-btn{
    color: var(--secondary-color);
    text-decoration: none;
}



#amenitiessection .owl-nav
{
    display: none;
    align-items: center;
    justify-content: center;
    gap:70px;
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 13px;
    margin-bottom: -2px;
}
#amenitiessection .owl-dots
{
    display: flex;
    align-items: center;
    justify-content: left;
    gap:10px;
    margin-top:20px ;
}
#amenitiessection .owl-dots button
{
    height: 10px;
    width: 10px;
    background: rgb(216, 216, 216);
    border-radius: 20px;
}
#amenitiessection .owl-dot
{
    transition: .3s ease;
}
#amenitiessection .owl-dot.active
{
    background: #000 !important;
    width: 30px;
}
#amenitiessection .owl-nav span
{
    display: none;
}


/* rooms */

#rooms .room-sec1{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px 317px;
    text-align: center;
}
#rooms .top-text{
font-family: var(--secondary-font);
font-size: 28px;
font-weight: 400;
line-height: 39.52px;
text-align: left;

}
#rooms h1{
    color: var(--primary-color) !important;
    text-align: center;
}
#rooms .room-sec2{
    margin-top: 40px;
    overflow: hidden;
    border-radius: 10px;
}
#rooms h3{
    text-align: center;
}

#rooms .counter{
    margin-top: 80px;
    padding: 0px 120px;
}

.room-main{
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding:212px;
}

.room-main:nth-child(1) {
    background-image: url('../img/images/twobedroom.png'); 
}

.room-main:nth-child(2) {
    background-image: url('../img/images/honeymoon_suite_room.jpg'); 
}

.room-main:nth-child(3) {
    background-image: url('../img/images/room-1.jpg');
}

.room-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: space-between;
    color: white;
    padding: 20px;
    box-sizing: border-box;
}

.overlay p {
    margin: 0;
    font-size: 1em;
}

#rooms .video-container iframe {
    height: 450px;
    width: 100%;
    object-fit: cover;
    border-radius: 0px 0px 20px 20px;
}
/* cta section */
#cta{
    background-image: url('../img/banner/cta1.jpg');

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#cta .cta{
    margin-top: 80px;
    padding: 100px 268px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#cta .cta-para{
    text-align: center;
    color: #fff !important;
}
#cta .cta-text{
    text-align: center;
    color: #fff !important;
    font-size: 40px !important;
    line-height: 49.4px !important;
    
}

#cta .cta-btn{
    padding: 8px 40px;
    background-color: transparent;
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    text-decoration: none;
    border-radius: 40px;
    font-weight: 600;
    transition: .3s ease;
    font-family: var(--primary-font);
    width: fit-content;
}

#cta .cta-btn:hover{
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

/* gallery */

.gallery {
    padding: 30px 0;
    margin-top: 80px;
    overflow: hidden;
}
.gallery-title{
    margin-bottom: 40px;
}
.gallery-item {
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    max-height: 300px;

}
.gallery .glry-img{
    height: 300px;
}
.gallery-item img {
    transition: transform 0.3s ease, opacity 0.3s ease;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-item:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}
.gallery-item-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-item-caption {
    opacity: 1;
};

/* blg */
#blogsection
{
    padding: 2% 0 10% 0;
}

#blogsection .blog{
    margin-top: 80px;
    margin-bottom: 80px;
    overflow: hidden;
}
#blogsection .right
{
    display: flex;
    justify-content: end;
    align-items: end;
}
#blogsection .right .main-btn
{
    height: fit-content;
}
.blog-main
{
    margin-top:40px;
    position: relative;
    overflow: hidden;
    /* display: grid; */
    /* grid-template-columns: repeat(3,1fr); */
    /* gap:20px; */
}

.blog-main .img-div img
{
    transition: .3s ease;
    /* filter: saturate(0) ; */
    border-radius: 20px;
}
.blog-main .img-div:hover img
{
    scale: 1.1;
}

.blog-desc .top-blog
{
    display: flex;
    justify-content: space-between;
}
.blog-desc
{
    padding: 20px;
    gap:60px;
    display: flex;
    flex-direction: column;
    gap:15px;
} .blog-desc .top-blog p, .blog-desc .top-blog i
{
    margin: 0;
    font-size: 14px;
}
.cal-sec
{
    display: flex; 
    align-items: center;
    gap: 10px;
}
.cal-sec i
{
    margin-top: -3px;
}
.blog-desc h4
{
    font-weight: 700;
    font-size: 20px;
    font-family:var(--scndry-font);
    line-height: 22px;
    text-transform: lowercase;
    margin: 0;
}
.blog-desc p
{
    font-size: 14px;
    margin: 0;
}
.blog-desc .service-btn
{
    font-weight: 500;
    font-size: 14px;
    padding: 5px 30px;
}


#blogsection .owl-nav
{
    display: none;
    align-items: center;
    justify-content: center;
    gap:70px;
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 13px;
    margin-bottom: -2px;
}
#blogsection .owl-dots
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    margin-top:20px ;
}
#blogsection .owl-dots button
{
    height: 10px;
    width: 10px;
    background: rgb(216, 216, 216);
    border-radius: 20px;
}
#blogsection .owl-dot
{
    transition: .3s ease;
}
#blogsection .owl-dot.active
{
    background: #000 !important;
    width: 30px;
}
#blogsection .owl-nav span
{
    display: none;
}


#footersection iframe{
    width: 100%;
}

/* whatsapp chat */
.chatbox{
    height: 60px;
    width: auto;
    position: fixed;
    bottom: 10px;
    right: 20px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}




/* footer section */

#footersection
{
    /* margin: 0 5%; */
    /* width: 100%;
    height: 100%; */
    background-color: #0f1c19;
    color: var(--secondary-color);
   
}
#footersection .footer-top{
    padding-top: 80px;
}
#footersection .footer-1
{
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: start;
    gap:20px;
    padding-bottom: 40px;
}
#footersection .footer-1 .footer-logo
{
    width: 60%;
}
#footersection .footer-1 .main-para
{
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    text-align: left;
    margin: 0;
    width: 90%;
}
#footersection .footer-cols h3{
    color:var(--secondary-color);
}

#footersection .copyright
{
    display: flex;
    justify-content: center;
    padding: 20px 0;
    border-top: 1px solid rgb(245, 245, 245, 0.5 );
}
#footersection .copyright-para{
    font-size: 16px;
    font-family: var(--primary-font);
    color: var(--secondary-color);
}

#footersection .footer-cols
{
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items:flex-start;
    color: #fff;
    text-align: left;
}
#about-herosection {
    background: black;
    background: url(../img/banner/banner-img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 70vh;
}

#footersection .footer-cols ul
{
    margin: 0;
    padding: 0;
    gap:10px;
}
#footersection .footer-cols ul li
{
    list-style: none;
    font-size: 16px;
    font-weight: 300;
    font-family: var(--primary-font);
    margin: 15px 0;
    display: flex;
    gap: 12px;
}
#footersection .footer-cols a
{
    text-decoration: none;
    color: #fff;
}
.social-links{
    gap: 20px;
    display: flex;
}
.social-links .icon_social{
    color: var(--secondary-color);
    font-size: 25px;
}

@media only screen and (max-width: 992px){
    #banner-section .banner-sec{
        width: 80%;
    } 
    .contact-detail .banner-btn{
        padding: 8px 30px;
        border-radius: 40px;
    }
    #banner-section .center_heading{
        margin-top: 250px;
    }

    .about-sec-1{
        margin-top: 40px;
        width: 80%;
    }
    .sec-3-content{
        padding: 60px 50px 60px 40px;
    }
    #rooms .room-sec1{
        padding: 0px 120px;
    }
    .room-main{
        padding: 180px;
    }

    /* #cta .cta{
        padding: 80px 55px;
    } */
    .gallery {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 768px) {
    #banner-section .banner-sec{
        width: 100%;
    }
    #banner-section .center_heading{
        margin-top: 150px;
    }
    .banner-sec .banner-para{
        padding: 0px 15px;
    }
    .banner-sec .banner-title{
        padding: 0px 20px;
    }
    #banner-section .contact-detail{
        padding: 10px 20px;
        margin-top: 50px;
        /* justify-content: center; */
    }
    /* .contact-detail .banner-btn{
        padding: 8px 40px;
        font-size: 16px;
    }
    
    .contact-detail .icon-div p{
        /* color: #fff !important;  */
        #banner-section .contact-detail{
            display: none;
        }
    
    
    .icon-div{
        gap: 20px;
        padding-right: 10px;
        height: 40px;
    } 

    .about-sec-1{
        margin-top: 40px;
        width: 100%;
    }
    .about-sec-3 {
        margin-top: 40px;
    }
  .sec-3-content {
        padding: 20px 15px 30px 15px;
    }
}
    #amenitiessection
{
    padding: 0 0 2% 0;
}
.amenities{
    margin-top: 40px;
}
#rooms{ 
    margin-top: 40px;
}
#rooms .room-sec2{
    margin-top: 40px;
    overflow: hidden;
    border-radius: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
#rooms .video-container img {
    width: 100%;
}

#rooms .room-sec1{
    padding: 0px;
}
#cta .cta-text{
    font-size: 25px !important;
    line-height: 32.4px !important;
    
}

}

/* about page */
#about-herosection
{
    background: black;
    background: url('../img/banner/banner-img.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 70vh;
}
#about-herosection .banner-sec{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    width: 50%;
    margin-top: 60px;
} 
.about-page .about-part-2{
    background-image: url('../img/images/monarda_about_mission_vision1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: 80px;
}

.about-part-2 .center-div{
    padding: 20px 40px;
    background-color: var(--secondary-color);
}

.about-footer{
    padding-top: 60px;
}