@import url('https://fonts.googleapis.com/css2?family=Baskervville+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baskervville+SC&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{
    font-family: "Inter", sans-serif;
}

:root{
    --primary: #002325;
    --secondary: #d5ac63;
}

a{
    text-decoration: none;
}

p{
    text-align: justify;
}

/* h1, h2, h3{
    font-family: "Baskervville SC", serif !important;
} */

h1, h2, h3, h4{
    margin-top: 0;
    margin-bottom: .5rem;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    line-height: 1.2;
    color: var(--secondary);
}


.hc h3{
    background-color:  var(--primary) !important;
    color: white !important;
    font-size: 30px !important;
}


/****** Navbar ******/

.navbar{
    background-color: var(--primary);
}

.navbar .nav-link{
    font-size: 17px;
    font-weight: 500;
    color: white;
    transition: .5s all ease-in-out;
}

.navbar .nav-link:hover{
    color: var(--secondary);
}

.navbar .nav-item .active{
    color: var(--secondary);
}

.navbar .navbar-brand h4{
    color: white;
    font-size: 30px;
}

.navbar .navbar-toggler{
    box-shadow: none !important;
    border: 0px !important;
    border-radius: 0px !important;
}

.navbar .menu{
    font-size: 30px;
    color: white;
}

.btnss{
    background-color: var(--secondary) !important;
    color: #FFFFFF !important;
    text-align: center;
    transition: all 0.5s;
    cursor: pointer;
    border-radius: 0px !important;
    border: 1px solid var(--secondary) !important;
    width: 200px;
}
  
  
.btnss span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
  
.btnss span::after{
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}
  
.btnss:hover span{
    padding-right: 25px;
}
  
.btnss:hover span::after{
    opacity: 1;
    right: 0;
}

/*** Navbar End ***/


/****** Carousel ******/

/* .slide-carousel{
    z-index: inherit;
} */

.owl-carousel{
    display: block;
}

.slide-carousel h1{
    font-size: 70px;
    color: #ffffff;
    letter-spacing: 5px;
    /* -webkit-text-stroke: 1px rgb(250, 0, 0); */
    text-shadow: 0px 0px 6px black;
}

.slide-carousel p{
    font-size: 25px;
    text-shadow: 0px 0px 6px #b4b4b4;
    letter-spacing: 2px;
}


.slide-carousel img{
    height: 100vh !important;
    width: 100%;
    /* object-fit: cover; */
    background-size: cover;
} 

@media(max-width:768px){
    .slide-carousel img{
        height: 100% !important;
    }
}

.carousel{
    position: relative;
}

.slide-carousel::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 15px;
    left: 0;
    z-index: 1;
}

.slide-carousel::after{
    bottom: -1px;
    background: url(../imgs/overlay-bottom.png);
}



/*** Carousel End ***/




/*** Page Header Start ***/

.page-header{
    /* background-color: #e7e7e7; */
    /* background: linear-gradient(90deg, #002325 0%, #d5ac63 100%); */
    background-image: url(../imgs/page-title.jpg);
    padding: 120px 0px;
}

@media(max-width:768px){
    .page-header{
        padding: 70px 0px;
    }
}

.page-header h4{
    font-size: 50px;
}

.page-header a{
    color: #888888;
    font-size: 18px;
}

.page-header .active{
    color: var(--primary);
    transition: .5s all ease-in-out;
}

.page-header .active:hover{
    color: var(--secondary);
}

.page-header .angle{
    font-size: 18px;
    color: var(--primary);
}


/*** Page Header End ***/




/*** About Start ***/

.about h4{
    font-size: 70px !important;
}

.about h5{
    font-size: 35px;
}

.about h6{
    font-size: 25px;
    letter-spacing: 1px;
}

.about .exp{
    border: 5px solid var(--secondary);
}


/*** About End ***/





/*** Highlight Start ***/

.highlight{
    background-image: url(../imgs/highlight-bg.jpg);
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-size: cover;
    object-fit: cover;
    /* background-position: center; */
    background-attachment: fixed;
    background-color: #00000083;
    background-blend-mode: multiply;
}

.cl{
    position: relative;
}

.highlight::after,
.highlight::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 15px;
    left: 0;
    z-index: 1;
}

.highlight::after{
    bottom: -1px;
    background: url(../imgs/overlay-bottom.png);
}

/* .highlight::before{
    top: -1px !important;
    background: url(../imgs/overlay-bottom.png);
} */


/*** Highlight End ***/




/*** Facilities Start ***/


.facilities .card{
    text-align: center;
    padding: 20px;
    /* box-shadow: 0px 0px 5px rgb(217, 217, 217); */
    transition: .5s all ease-in-out;
}

/* .facilities .card:hover{
    box-shadow: 0px 3px 5px #cecece;
} */

.facilities .card:hover .facility-icon{
    filter: drop-shadow(4px 5px 3px #888888);
}

.facilities .facility-icon{
    font-size: 40px;
    color: var(--secondary);
    text-align: center;
    display: flex;
    justify-content: center;
    transition: .5s all ease-in-out;
}


/*** Facilities End ***/






/*** Images Start ***/
 
.images img{
    height: 250px;
    width: 100%;
    object-fit: cover;
    background-size: cover;
}

.images .img-item{
    overflow: hidden;
    transition: .5s all ease-in-out;
}

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


/*** Images End ***/





/*** Book Now Start ***/

.book-now input, textarea{
    box-shadow: none !important;
}

select{
    box-shadow: none !important;
}

.book-now .btns{
    border: 1px solid var(--primary);
    background-color: var(--primary);
    color: white;
    border-radius: 0px !important;
    transition: .5s all ease-in-out;
}

.book-now .btns:hover{
    background-color: transparent !important;
    color: var(--primary) !important;
}


/*** Book Now End ***/



/*** Lodge Start ***/


.lodge_carousel img{
    display: flex;
    height: 500px;
    width: 100%;
    object-fit: cover;
     /* min-height: 500px; */
}
/* .lodge_carousel .position-absolute h4{
    background: linear-gradient( -90deg, transparent  , #ffffffa2);
    color: black;
    padding: 10px 10px;
} */
.lodge_carousel .position-absolute{
    z-index: 10;
    height: 100%;
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* background: linear-gradient( transparent 70%, var(--primary-color)); */
    /* background-color: #000000; */
    top: 0;
    bottom: 0; 
}
  

.lodge_carousel, .slide-carousel{
    position: relative;
}
.lodge_carousel .owl-nav {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content:space-between;
    top: 50%; 
}

.lodge_carousel .owl-nav button span{
    background-color: white;
    padding: 20px;
    
}

.lodge_carousel .owl-nav button:hover{
    background-color: transparent !important;
}



/*** Lodge End ***/





/*** Portfolio Start ***/

.portfolio img{
    height: 250px;
    width: 100%;
    object-fit: cover;
}

/*** Portfolio End ***/





/*** Contact Start ***/

.contact .info{
    background-color: #ffffff;
    /* filter: blur(20px); */
}

.contact .infos{
    background-color: var(--secondary);
}

.contact input, textarea{
    box-shadow: none !important;
}

.contact .btns{
    border: 1px solid var(--secondary);
    background-color: var(--secondary);
    color: white;
    border-radius: 0px !important;
}

.contact .ctn-icon{
    font-size: 20px;
    color: white;
    /* background-color: var(--primary); */
}


/*** Contact End ***/





/*** Footer Start ***/

.footer {
    background: var(--primary);
}
.footer .footer-item a {
    line-height: 30px;
    color: var(--bs-white);
    transition: 0.5s;
}

.footer .footer-item a:hover {
    letter-spacing: 2px;
    color: var(--bss-primary);
}

.footer-icon{
    font-size: 20px;
    color: white;
    /* background-color: var(--bss-primary); */
    /* border-radius: 50px; */
    border: 1px solid white !important;
    transition: .5s ease-in-out;
    border: 1px solid transparent;
}
.footer-icon:hover{
    background-color: var(--secondary) !important;
    border: 1px solid var(--secondary) !important;
   
}
.footer-contact-icon{
    font-size: 25px;
    color: white;
}

/*** Footer End ***/


.whats a{
    transition: .5s ;
    
  }
  
  .whats span{
    font-size: 0px;
     word-spacing: -40px;
    transition: .5s ;
   
  }
  
  .whats:hover span{
    font-size: 13px;
    word-spacing:  0px;
    transition: .5s all;
    /* margin-right: 50px; */
  }



/*** copyright Start ***/

.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--primary) !important;
    color: #898989 !important;
}

.copyright a{
    color: white;
    transition: .5s all ease-in-out;
}

.copyright a:hover{
    color: var(--secondary);
}

/*** copyright end ***/