html, body{
overflow-x: hidden;
font-family: "Raleway", serif;
font-optical-sizing: auto;
}


.body-container{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
}

a{
    text-decoration: none;
}

li{
    list-style: none;
}
.grid1{
width:100%;
}
.banner{
    position:relative;
    height:100vh;
    z-index:-10;
}
.banner {
    position:relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* Full viewport height */
    object-fit: cover; /* Ensures the video scales and covers the container */
    z-index: -10; /* Stays behind other content */
}

.fixed-top-div{
    display:flex;
    flex-direction: column;
    position:fixed;
    top:0;
    z-index:999990;
    width:100%;
}
.top-bar{
    display: flex;
    width:100%;
    gap:2rem;
    background-color: black;
    color:white;
    color:#FAF8F4;
    padding:  0.7% 5%;
align-items: center;
gap:5rem;
justify-content: space-between;
z-index:1050 ;
    }



    .top-bar a{
        color:white;
        color:#FAF8F4;

    }

    #menuja{
        background-color:white;
        background-color: #FAF8F4 !important;
        border-bottom: 0.2px solid black;
width:100%;
z-index:100;
    }

.main-logo{
    height:3rem;
}

.dropdown-lang{
    color:white !important;

}

.dropdown-lang button{
    color:white !important;

}

.navbar-nav{
    gap:2rem;
}


/* Dropdown menu */
.dropdown-menu {
    position: absolute; /* Or fixed if needed */
    z-index: 1040; /* Slightly lower than offcanvas */
    background-color: black;

}


.container-fluid{
    display:flex;
    gap:5rem;
    align-items: center;
    z-index:1000;
}

#cartItemCount{
    color:#fff;
    background-color: rgb(237, 108, 108);
    background-color: #ff9800;
    font-size: 0.9rem;
    font-weight: 600;
}


#cartIcon{
    background-color: rgba(0, 255, 255, 0);
    border:0;
}

.cart{
    order:10;
position:relative;
font-size:1.3rem;
}

/* Offcanvas */
.offcanvas {
    position: fixed; /* Ensures it is above everything */
    z-index: 1090; 
}

.socials{
    display:flex;
    flex-direction: row;
    gap:2rem;
}

.links{
        display:flex;
        flex-direction: row;
        gap:2rem;
    }

    .banner-div{
        position:absolute;
        z-index:9;
        top:40%;
        /* left:25%; */
        color:white;
        color:#FAF8F4;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
width:100%;
gap:1rem;
    }

    h1{
        font-family: "Abril Fatface", serif;
        font-weight: 600 !important;
        font-style: normal;
        text-align: center;
        font-size: 6rem !important;
        text-shadow: 
            -1px -1px 0 black, /* Top-left */
            1px -1px 0 black,  /* Top-right */
            -1px 1px 0 black,  /* Bottom-left */
            1px 1px 0 black;   /* Bottom-right */
    }


    .banner-div h2{
        text-shadow: 
        -1px -1px 0 black, /* Top-left */
        1px -1px 0 black,  /* Top-right */
        -1px 1px 0 black,  /* Bottom-left */
        1px 1px 0 black;   /* Bottom-right */
        font-size: 1.5rem !important;
    }



.explore-btn{
    color:white;
    color:#FAF8F4;
    border:2px solid #FAF8F4;

    border-radius:10px;
    background-color: rgba(250, 235, 215, 0);
    padding:0.75rem 1.5rem;
    text-shadow: 
    -0.3px -0.3px 0 black, /* Top-left */
    0.3px -0.3px 0 black,  /* Top-right */
    -0.3px -0.3px 0 black,  /* Bottom-left */
    0.3px 0.3px 0 black;   /* Bottom-right */
margin-top:1rem;
letter-spacing:1px;
font-weight: 500;
            font-weight: 700;
/* THE MAGIC: Glassmorphism */
  background: rgba(255, 255, 255, 0.05); /* Semi-transparent white */
  backdrop-filter: blur(8px); /* Blurs the background */
  -webkit-backdrop-filter: blur(18px); /* Safari support */
  transition: all 0.4s ease;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  height: auto !important;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

.explore-btn:hover{
    background-color: #FAF8F4;

    color:black;
    text-shadow: none;
}
.flag{
    height:0.7rem;
}

.selected-flag {
    margin-right: 0.35rem;
}

ul.dropdown-menu.show{
    width:10%;
}

ul.dropdown-menu.show .dropdown-item{
    width:100%;
}

.content{
    display:flex;
    background-color: #FAF8F4;
    flex-direction: column;
    gap:4rem;
    width:100%;
}

.grid2{
    display:flex;
    flex-direction: column;
    width:100%;
    margin-top:4rem;
    gap:3rem;
}
.grid2-col1{
    display:flex;
    flex-direction: row;
    position:relative;
    padding-top:3rem;
    padding-bottom:3rem;
    gap:3rem;
    align-items: center;
    padding-left:5rem;
    padding-right:5rem;

}
.below-banner{
    width:40%;
    position:relative;

}

.below-banner img{
    position:absolute;
    top:28%;
    height:1.5rem;
    left:20%;
}
.below-banner h2{
    font-size:3.5rem;
    font-weight:600;
    line-height: 5rem;

}




.grid2-cta{
    width:40%;
    display:flex;
    flex-direction: column;
}



.below-banner-p{
    width:100%;
}
.cta-link {
    color: #0557ae; 
    font-weight: bold;
    text-decoration: none;
    width:fit-content;
    border:0;
    padding-left: 0;
    margin-left:0;
  }
  
  .cta-link:hover {
    text-decoration: underline;
  }


.grid2-col2{
    display:flex;
    flex-direction: row; 
    gap:2rem;
    width:100%;
    justify-content: center; 
    margin-top:5rem;
}


.grid2-col2-card{
    position: relative;
    z-index:90;
    width:30%;
}
.grid2-col2-1{
    background-color:#E5E7EB;
    border-radius:25px;
    padding:2rem;
    padding-bottom:3rem;
}
.grid2-col2-1 img {
    margin-top:2rem;
    height:5rem;
}

.enhanced{
    color: #1c4a80;;
}


.lupa-div{
    background-color: #FAF8F4;
    border-radius:25px;
    position:absolute;
    z-index:91;
    bottom:0;
    right:0;
    padding:1rem;
    border-top-right-radius:0;
    border-bottom-left-radius:0;
}
.lupa{
    background-color:#E5E7EB;
    padding:2rem;
    border-radius: 50%;
}


/* COUNTER */

.counter-section{
    margin-top:5rem;
    margin-bottom:2rem;
}
.counter-row{
    display: flex;
    justify-content: center;
    gap:5rem;
    width:100%;
}

.counter-row div{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
  .counter{
    color: #ff9c04;
    font-size:2.7rem;
  }


  /*   */
/*TESTIMONIALS*/


.testimonials-wrap {
    padding: 3rem 0;
}
.heading-section {
    text-align: center;
}
.sub-heading {
    display: block;
    font-weight: 600;
    color: #155a5e;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.heading-section h2 {
    font-weight: 600;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}


.testimonial-box {
    position: relative;
    gap:2rem;
    margin-bottom:1rem;
}
.user-img {
    border-radius: 50%;
}

.owl-stage-outer{
    margin-top:2rem;
    margin-bottom:2rem;
}

.owl-carousel .owl-item img{
height:2rem;
}
.carousel-testimonial .item {
    padding: 2rem 1rem;
    padding-bottom:1rem;                                                                                                                    
    display:flex;
    flex-direction: column;
    min-height:40vh;
    width:90%;
    /* background: #fff; */
    background: #E5E7EB; 
    border: 1px solid rgba(0,0,0,.03);
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .08);
}



.item > p{
    font-size:0.9rem;
}
.quote {
    position: absolute;
    top: -70%;
    color: #2e9da1;
    font-size: 27px;
}
.name {
    margin-bottom: 0;
    line-height: 14px;
    font-size: 17px;
    font-weight: 500;
}

.review-date{
    display: block;
    font-size: 0.8rem;
}

.review-text{
    margin-bottom:0;
}

.read-more-btn {
    color: #007bff;  
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    background-color: #ffffff00;
    border:0;
    padding:0;
    text-align: left;
    font-size:0.8rem;
  }
  .read-more-btn:hover {
    text-decoration: underline;
  }
.stars{
    font-size:0.7rem;
}
.position {
    color: #adadad;
    font-size: 14px;
}
.carousel-testimonial .owl-nav {
    text-align: center;
}
.carousel-testimonial .owl-nav button.owl-next, 
.carousel-testimonial .owl-nav button.owl-prev {
    padding: 0 12px !important;
}
.carousel-testimonial .owl-nav button {
    outline: none;
    padding: 0;
}
.carousel-testimonial .owl-nav button.owl-next span, 
.carousel-testimonial .owl-nav button.owl-prev span {
    display: block;
    font-size: 40px;
    width: 25px;
    height: 25px;
    vertical-align: 0px;
    line-height: 16px;
}
.carousel-testimonial .owl-nav button.owl-next.disabled, 
.carousel-testimonial .owl-nav button.owl-prev.disabled {
    opacity: 0.5;
}


  /*   */

  .booking-section {
    background: #111;
    color:#faf8f4b0;
    padding: 4rem 0;
    padding-bottom:0;
  }
  .booking-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    color: #ff9800;
  }

  .boat-trips-container, .van-tours-container{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom:5rem;
  }
  .boat-trips-container > p, .van-tours-container > p{
text-align: center;
  }
  .boat-trips-container h2, .van-tours-container h2{
    font-size: 1.5rem;
    text-align: center;
  }

  .boat-trips-container h3, .van-tours-container h3{
    font-size: 1.3rem;
    padding-top:1rem;
    font-weight: 600;
  }

  .boat-option p, .van-option p{
    font-size: 0.9rem;
  }
  
  .boat-trips-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 2rem;
    align-items: center;
  }
  
  .van-tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    align-items: stretch;
  }
  
  .boat-option {
    flex: 1 1 30%;
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
  }
  
  .van-option {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  } 
  .booking-img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 0.5rem;
  }
  .booking-section .btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    margin-top: 3rem;
    background: #ff9800;
    color: white;

    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: bold;
  }
 .booking-section  .btn:hover {
    background: #e68900;
  }
  @media (max-width: 768px) {
    .boat-trips-grid {
      flex-direction: column;
    }
    .boat-option {
      flex: 1 1 100%;
    }
    .van-tours-grid {
      grid-template-columns: 1fr;
    }
  }
  
  @media (min-width: 769px) and (max-width: 1024px) {
    .van-tours-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (min-width: 1025px) and (max-width: 1399px) {
    .van-tours-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  @media (min-width: 1400px) {
    .van-tours-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  .grid5{
display:flex;
flex-direction: column;
gap:3rem;
/* margin-top:3rem; */
  }
.grid5 a{
    color:#1B3A6D;
}
.grid5-row{
    display:flex;
    gap:4rem;
    align-items: center;
    position: relative;
}

.grid5-banner{
position: relative;
}

.grid5-banner img{
    position:absolute;
    top:40%;
    left:10%;
    height:1.5rem;
}

.grid5-intro{
    width:50%;
}
  .grid5 h2{
    font-size:3.5rem;
    font-weight:600;
    line-height: 5rem;
  }

  .arrow{
    position:absolute;
    top: 50%;
    right: 50%;
    transform: rotate(30deg);
  }

/*WHY CHOOSE US */

.why-choose-us {
    text-align: center;
    padding: 4rem 2rem;
  }
  .section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #333;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }
  .feature {
    background: #E5E7EB;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
  }
  .feature:hover {
    transform: translateY(-5px);
  }
  .icon {
    font-size: 2rem;
    color: #007bff;
    margin-bottom: 1rem;
  }

  .icon img{
    height:7rem;
    border-radius: 50%;
  }

  .why-choose-us h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  .why-choose-us p {
    font-size: 1rem;
    color: #555;
  }

/*   */



.final-section {
    text-align: center;
    padding: 3rem 1rem;
  }
  
  .final-section .container {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .final-section h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
        font-weight: 600;

  }
  
  .final-section p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 2rem;
  }
  
  .cta-button {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: #ff9800;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    border-radius: 10px;
    font-weight: bold;

  }
  
  .cta-button:hover {
    background: #e68900;
}


footer{
    display:flex;
    flex-direction: column;
    width:100%;
    justify-content: center;
    align-items: center;
    gap:4rem;
    padding-top:2rem;
    padding-bottom:2rem;
    background-color: black;
    color:#FAF8F4;
}


footer ul{
    padding-left:0;

}

footer a{
    color:#faf8f4b0;
}

footer li{
    color:#faf8f4b0;

}
.footer-columns-div{
    display:flex;
    flex-direction: row;
    gap:5rem;
    justify-content: space-around;
    /* width:95%; */
}

.footer-columns{
display:flex;
flex-direction: column;
gap:2rem;
/* width:30%; */
}


footer p, footer h6{
   color:#faf8f4b0;
}
.col1{
    width:30%; 
}

.col2 ul, .col3 ul{
display:flex;
flex-direction: column;
gap:0.5rem;
}
.col1 img{
    /* height:3rem; */
    width:10vw;
    /* width:fit-content ; */
}

.social-icons{
    display:flex;
    flex-direction: row;
    gap:1.5rem;
}


.footer-columns h6{
    font-size:1.3rem;
}

.find-other-locations{
    color:#50a1e7;
    /* text-decoration: underline; */
}


#backToTopBtn {
    position: fixed;
    bottom: 2.5rem;
    right: 2rem;
    width: 2.5rem;
    height: 2.5rem;
    background-color: #ff9800; 
    color: white;
    border: none;
    border-radius: 50%; 
    cursor: pointer;
    display: none; 
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
  }
  
  #backToTopBtn .arrow {
    display: inline-block;
    animation: moveUp 3s infinite; 
        position: absolute;
        right: 28%;
        top: 27%;
  }
  
  @keyframes moveUp {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px); 
    }
    100% {
      transform: translateY(0);
    }
  }
  
  #backToTopBtn:hover {
    background-color: #e68900;
  }


  /* Offcanvas Cart Styling */
.offcanvas-cart {
    position: fixed;
    top: 0;
    right: 0;
    width: 90%; /* Mobile-friendly */
    max-width: 25rem; /* Limit width for larger screens */
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.offcanvas-cart.open {
    transform: translateX(0);
}

.offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

.offcanvas-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 2px solid #d1d1d1;
}

.cart-image {
    width: 20%; /* Keep image small */
    max-width: 3rem;
    border-radius: 5px;
}

.cart-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
}

.cart-total {
    padding: 1rem;
    text-align: right;
    font-size: 1.2rem;
    font-weight: bold;
}

.cart-actions {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.cart-actions button {
    padding: 0.8rem;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 5px;
}
.remove-btn{
width:max-content;
}


.cart-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.cart-footer p{
    margin-top:0;
    margin-bottom:0;
}
#grand-total {
    font-size: 1rem;
    font-weight: bold;
}

.btn-clear, .btn-checkout {
    width: max-content;
    padding: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-clear {
    background: #f44336;
    color: white;
    border: none;
}

.btn-clear:hover {
    background: #d32f2f;
}

.btn-checkout {
    background: #4CAF50;
    color: white;
    border: none;
}

.btn-checkout:hover {
    background: #388E3C;
}

/* Responsive Adjustments */
@media (min-width: 600px) {
    .cart-footer {
        flex-direction: row;
        justify-content: space-between;
    }

    .btn-clear, .btn-checkout {
        width: 48%;
    }
}




button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
@media (max-width: 1029.33px){
    .col1 img{
        width:12vw;
    }
    
}


@media (max-width: 768px) {

    .explore-btn{
                height: auto !important;
        width: 50%;
            font-weight: 700;
            font-size:1.1rem;
/* THE MAGIC: Glassmorphism */
  background: rgba(255, 255, 255, 0.05); /* Semi-transparent white */
  backdrop-filter: blur(4px); /* Blurs the background */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  transition: all 0.4s ease;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  -webkit-appearance: none;
  appearance: none;
  }
.links{
display:none;
}

h1{
    font-size:3rem !important;
}

.banner-div{
    padding:1rem;
    top:40%;
    text-align: center;
}

.banner-div h2{
    font-size:1.4rem !important;
      font-weight: 600;
}


.footer-columns-div .col1{
width:70%
}

.footer-columns-div{
    /* flex-wrap: wrap; */
    flex-direction: column;
    width:90%;
    justify-content: center;
    align-items: center;
}

.col2, .col3{
    width:70%;
}

.col1 img{
    width:20vw;
}
}
/* img#desktop{
    display:block;
}
img#tel{
display:none;
  } */
@media (max-width: 768px) {

    /* img#desktop{
        display:none;
    }
    
      img#tel{
        display:block;
    } */
    

    h1{
        font-size:3.5rem !important;
    }

    .banner-div h2{
        font-size:1.4rem !important;
    }
    .grid2-col1 {
      flex-direction: column; /* Stack elements on smaller screens */
      padding-left: 2rem;
      padding-right: 2rem;
      justify-content: center;
    }
  
    .below-banner,
    .grid2-cta {
      width: 100%; /* Full width on smaller screens */
      text-align: center;
      justify-content: center;
      align-items:center;
    }
  
    .below-banner img {
      position: relative; /* Adjust positioning */
      top: 0;
      height: 2rem; /* Adjust image size */
      left: 0;
      margin-bottom: 1rem;
    }
  
    .below-banner h2 {
      font-size: 2rem; /* Adjust heading size */
      line-height: 2.5rem;
    }
  
    .below-banner-p {
      font-size: 1rem; /* Adjust paragraph font size */
      line-height: 1.4rem;
    }

    .grid2-col2{
        flex-direction: column;
        justify-content: center;
        align-items:center;
    }

    
.grid2-col2-card{
    /* display:flex;
    flex-wrap: wrap; */
    position: relative;
    z-index:90;
    width:90%;
    /* height:50vh; */
}
.grid2-col2-1{
    background-color:#E5E7EB;
    border-radius:25px;
    padding:2rem;
    padding-bottom:3rem;
}
.grid2-col2-1 img {
    margin-top:2rem;
    height:5rem;
}


.carousel-testimonial .item {
    width:100%;
}

.grid5-row{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.arrow {
    position: absolute;
    top: 25%;
    right: 5%;
    transform: rotate(-40deg);
}

.grid2-arrow{
    transform: rotate(-40deg);
}

.grid5-intro{
    width:80%;
}

.grid5-banner img {
    top: 70%;
    left: 15%;
}

.grid5 h2 {
    font-size: 3rem;

}
.owl-carousel .owl-item img{
    height:2rem;
        width: auto;
    }


  }

  @media (max-width: 480px) {
    .col1 img{
        width:25vw;
    }
    
  }

@media screen and (max-width: 991.5px){
    .container-fluid{
        gap:1rem;
    }
    .navbar-toggler{
        border:0;
    }
    .cart{
        order:0;
      }
    
    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    padding-left:1rem;
    }
    .nav-border-bottom{
        border-bottom:  0.2px solid rgba(154, 154, 154, 0.534) ;
        /* padding-left: 1rem !important; */
        padding-top:0.2rem;
        padding-bottom:0.2rem;
      }
      .navbar-nav li{
        width:100%;
      }

      .container-fluid{
        /* padding:0;
        margin:0; */
        font-size:0.9rem;
      }
      .nav-link{
        padding:0;
      }

      .bi-bag{
        color:#000000;
      }

      div#offcanvasRight{
        width:60% !important;
      }
}

.actively{
    background-color: #adadad;
}


@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        align-items: center;
    }
}

#added-to-cart {
    display: none;
    background: rgba(0, 128, 0, 0.8); /* Green with transparency */
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    position: fixed;
    top:50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
}





h3#booknow-title {
    text-align: center;
    align-self: center;
}

@media screen and (min-width: 769px) and (max-width: 991.5px) {

    .below-banner img {
        left: 0;
        top: 35%;
    }

    .grid5-banner img {
        top: 30%;
        left: 0;
    }

    .arrow {
        position: absolute;
        top: 60%;
        right: 50%;
        transform: rotate(10deg);
    }
    .lupa-div {
        bottom: 4%;
        top: 75%;
    }
.lupa-div-main{
    bottom: 0;
    top: 80%;
}
.grid2-col2-1 img {
    height: 2rem;
}

.counter-percent{
    width:100%;
}

.links{
    display:none;
    }

}


@media screen and (min-width: 865px) and (max-width: 991.5px){
    .lupa-div {
        bottom: 4%;
        top: 70%;
    }
.lupa-div-main{
    bottom: 0;
    top: 80%;
}

}

@media screen and (min-width: 941px) and (max-width: 1029.33px){
    .below-banner img {
        top: 45%;
    }
}


@media screen and (min-width: 991.6px) and (max-width: 1029.33px){
    .lupa-div-main{
        bottom: 0;
        top: 65%;
    }
    .lupa-div-first{
        bottom: 4%;
        top: 70%;  
    }

    .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
        justify-content: center;
}
.container-fluid {
    gap: 2rem;
}

.links{
    display:none;
    }
}

.review-text {
    max-height: 4rem; /* Adjust height as you want */
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
  }

  .review-text.expanded {
    max-height: none;
  }

  .read-more-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    padding-top: 10px;
    font-size: 1rem;
  }
/* 
  @font-face {
    font-family: 'Abril Fatface';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/abrilfatface/v14/Z9XVDmdMWRiN1_T9ZczpD9PEw5g.woff2') format('woff2');
  } */

  .explore-btn{
                height: auto !important;
    min-height: unset !important;
    -webkit-appearance: none;
    appearance: none;
  }

  @media (max-width: 768px) {

  .banner {
    height: 115vh;
  }
}
/* The latest database-managed translations load before these elements are revealed. */
html.i18n-pending [data-i18n],
html.managed-content-pending [data-i18n] {
  visibility: hidden;
}

/* Inner-page titles keep a safe gutter and wrap naturally in every language. */
.banner-div.page-banner {
  box-sizing: border-box;
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.banner-div.page-banner > h1 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
  font-size: clamp(1.75rem, 7vw, 6rem) !important;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}