/********** Template CSS **********/

:root {

    --primary: #E88F2A;

    --secondary: #FAF3EB;

    --light: #FFFFFF;

    --dark: #2B2825;

}



.font-secondary {

    font-family: 'Pacifico', cursive;

}



.header_block {

    background-color: #FFFFFF;

}



h1,

h2,

.font-weight-bold {

    font-weight: 700 !important;

}



h3,

h4,

.font-weight-semi-bold {

    font-weight: 600 !important;

}



h5,

h6,

.font-weight-medium {

    font-weight: 500 !important;

}



.btn {

    font-family: 'Oswald', sans-serif;

    font-weight: 600;

    transition: .5s;

}



.btn-primary {

    color: #FFFFFF;

}



.border-inner {

    position: relative;

}



.border-inner * {

    position: relative;

    z-index: 1;

}



.border-inner::before {

    position: absolute;

    content: "";

    top: 10px;

    right: 10px;

    bottom: 10px;

    left: 10px;

    background: none;

    border: 1px solid var(--light);

    z-index: 0;

}



.btn-square {

    width: 40px;

    height: 40px;

}



.btn-sm-square {

    width: 30px;

    height: 30px;

}



.btn-lg-square {

    width: 50px;

    height: 50px;

}



.btn-square,

.btn-sm-square,

.btn-lg-square {

    padding-left: 0;

    padding-right: 0;

    text-align: center;

}



.back-to-top {

    position: fixed;

    display: none;

    right: 30px;

    bottom: 0;

    border-radius: 0;

    z-index: 99;

}



.navbar-dark .navbar-nav .nav-link {

    font-family: 'Oswald', sans-serif;

    padding: 30px 15px;

    font-size: 18px;

    font-weight: 500;

    text-transform: uppercase;

    color: var(--light);

    outline: none;

    transition: .5s;

}



.sticky-top.navbar-dark .navbar-nav .nav-link {

    padding: 20px 15px;

}



.navbar-dark .navbar-nav .nav-link:hover,

.navbar-dark .navbar-nav .nav-link.active {

    color: var(--primary);

}



@media (max-width: 991.98px) {

    .navbar-dark .navbar-nav .nav-link  {

        padding: 10px 0;

    }

}



.hero-header {

    background: url(../img/lodge_test.jpg) center no-repeat;

    background-size: cover;

}



.btn-play {

    position: relative;

    display: block;

    box-sizing: content-box;

    width: 16px;

    height: 26px;

    border-radius: 100%;

    border: none;

    outline: none !important;

    padding: 18px 20px 20px 28px;

    background: #FFFFFF;

}



.btn-play:before {

    content: "";

    position: absolute;

    z-index: 0;

    left: 50%;

    top: 50%;

    transform: translateX(-50%) translateY(-50%);

    display: block;

    width: 60px;

    height: 60px;

    background: #FFFFFF;

    border-radius: 100%;

    animation: pulse-border 1500ms ease-out infinite;

}



.btn-play:after {

    content: "";

    position: absolute;

    z-index: 1;

    left: 50%;

    top: 50%;

    transform: translateX(-50%) translateY(-50%);

    display: block;

    width: 60px;

    height: 60px;

    background: #FFFFFF;

    border-radius: 100%;

    transition: all 200ms;

}



.btn-play span {

    display: block;

    position: relative;

    z-index: 3;

    width: 0;

    height: 0;

    left: -1px;

    border-left: 16px solid var(--primary);

    border-top: 11px solid transparent;

    border-bottom: 11px solid transparent;

}



@keyframes pulse-border {

    0% {

        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

        opacity: 1;

    }



    100% {

        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);

        opacity: 0;

    }

}



#videoModal .modal-dialog {

    position: relative;

    max-width: 800px;

    margin: 60px auto 0 auto;

}



#videoModal .modal-body {

    position: relative;

    padding: 0px;

}



#videoModal .close {

    position: absolute;

    width: 30px;

    height: 30px;

    right: 0px;

    top: -30px;

    z-index: 999;

    font-size: 30px;

    font-weight: normal;

    color: #FFFFFF;

    background: #000000;

    opacity: 1;

}



.section-title::before {

    position: absolute;

    content: "";

    width: 60px;

    height: 10px;

    left: 50%;

    bottom: 0;

    margin-left: -30px;

    background: var(--primary);

}



.section-title::after {

    position: absolute;

    content: "";

    width: 180px;

    height: 2px;

    left: 50%;

    bottom: 4px;

    margin-left: -90px;

    background: var(--primary);

}



.service::after,

.contact::after {

    position: absolute;

    content: "";

    width: 100%;

    height: calc(100% - 45px);

    top: 135px;

    left: 0;

    background: linear-gradient(rgba(43, 40, 37, .9), rgba(43, 40, 37, .9)), url(../img/service.jpg) center center no-repeat;

    background-size: cover;

    z-index: -1;

}



.contact::after {

    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));

    background-size: cover;

}



.bg-offer {

    background: linear-gradient(rgba(43, 40, 37, .9), rgba(43, 40, 37, .9)), url(../img/accomodation/boma/boma1.jpg) center center no-repeat;

    background-size: cover;

}



.team-item img {

    transition: .5s;

}



.team-item:hover img {

    transform: scale(1.1);

    filter: blur(5px)

}



.team-item .team-overlay {

    transition: .5s;

    opacity: 0;

}



.team-item:hover .team-overlay {

    opacity: 1;

}



.testimonial-carousel .owl-dots {

    height: 45px;

    margin-top: 30px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

}



.testimonial-carousel .owl-dot {

    position: relative;

    display: inline-block;

    margin: 0 2px;

    width: 20px;

    height: 25px;

    background: #DDDDDD;

    transition: .5s;

}



.testimonial-carousel .owl-dot.active {

    height: 45px;

    background: var(--primary);

}



.testimonial-carousel .owl-item .testimonial-item {

    opacity: .1;

    transition: .5s;

}



.testimonial-carousel .owl-item.center .testimonial-item {

    opacity: 1;

}



.bg-img {

    background: linear-gradient(rgba(43, 40, 37, .5), rgba(43, 40, 37, .5)), url(../img/bgimg.jpg) center center no-repeat;

    background-size: cover;

}



div.gallery {

    margin: 5px;

    float: left;

    width: 300px;

    padding: auto;

    border-radius: 1.5rem;

  }

  

  div.gallery:hover {

    transform: scale(1.1);

    transition: all 0.3s ease;

  }

  

  div.gallery img {

    width: 100%;

    height: auto;

    border-radius: 0.2rem;

  }

  

  div.desc {

    padding: 15px;

    text-align: center;

  }



/********** Slider starts here **********/

 .slider-container {

  position: relative;

  width: 100%;

  height: 50vh;

  overflow: hidden;

}



.slider {

  display: flex;

  transition: transform 0.5s ease-in-out;

}



.slide {

  position: relative;

  flex: 0 0 100%;

  height: 50vh;

  background-size: cover;

  background-position: center;

}



.overlay {

  position: absolute;

  bottom: 0; /* Position from the bottom of the slide */

  left: 0; /* Stretch from the left edge of the slide */

  width: 100%; /* Make the overlay span the entire width of the slide */

  text-align: start;

  color: white;

  background-color: rgba(0, 0, 0, 0.5);

  height: 50vh;

  padding: 10px;

  border-radius: 0; /* Rounded corners at the top */

  box-sizing: border-box; /* Include padding in width */

}



.overlay h1 {

  font-size: 2rem;

  margin-bottom: 10px;

}



.overlay p {

  font-size: 1.2rem;

}

/********** Slider ends here **********/



/*THIS IS FOT THE GALLERY IMAGES TO OPEN UP IN A MODAL*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

.wrapper{

    max-width: 1400px;

  }

  .gallery_modal{

    display: flex;

    flex-wrap: wrap;

    backdrop-filter: 10,10,10;

  }

  .gallery_modal .image{

    padding: 7px;

    width: calc(100% / 4);

  }

  .gallery_modal .image span{

    display: flex;

    width: 100%;

    overflow: hidden;

  }

  .gallery_modal .image img{

    width: 100%;

    height: 220px;

    vertical-align: middle;

    transition: all 0.3s ease;

  }

  .gallery_modal .image:hover img{

    transform: scale(1.1);

  }

  

  .preview-box{

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.9);

    background: #fff;

    max-width: 1210px;

    width: 100%;

    z-index: 100000000000000000;

    opacity: 0;

    pointer-events: none;

    border-radius: 3px;

    padding: 0 5px 5px 5px;

    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);

  }

  .preview-box.show{

    opacity: 10;

    pointer-events: auto;

    transform: translate(-50%, -50%) scale(1);

    transition: all 0.3s ease;

  }

  .preview-box .details{

    display: flex;

    align-items: center;

    padding: 12px 15px 12px 10px;

    justify-content: space-between;

  }

  .preview-box .details .title{

    display: flex;

    font-size: 18px;

    font-weight: 400;

  }

  .details .title p{

    margin: 0 5px;

  }

  .details .title p.current-img{

    font-weight: 500;

  }

  .details .icon{

    color: var(--primary);

    font-size: 20px;

    cursor: pointer;

  }

  .preview-box .image-box{

    display: flex;

    width: 1200px;

    height: 700px;

    position: relative;

  }

  .image-box .slide{

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    color: #fff;

    font-size: 30px;

    cursor: pointer;

    height: 50px;

    width: 60px;

    line-height: 50px;

    text-align: center;

    border-radius: 3px;

  }

  .slide.prev{

    left: 0px;

  }

  .slide.next{

    right: 0px;

  }

  .image-box img{

    width: 100%;

    border-radius: 0 0 3px 3px;

  }

  .shadow{

    position: fixed;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    z-index: 2;

    display: none;

    background: rgba(0,0,0,0.9)

  }

  

  @media(max-width: 1000px){

    .gallery_modal .image{

      width: calc(100% / 2);

    }

  }

  @media(max-width: 600px){

    .gallery_modal .image{

      width: 100%;

      padding: 4px;

    }

  }