:root {
  --bulma-link-h: 198deg;
  --bulma-link-l: 70%;
}

.navbar {
  --bulma-navbar-background-color: hsl(0, 5%, 96%);
}



.hero.is-primary {
  background-image: url('../images/background.webp');
  background-position: center center;
  background-size: cover;
  color: #f0f0f0;
}

.hero.is-primary h1,
.hero.is-primary p,
.hero.is-primary a {
  color: white;
}



@media screen and (max-width: 768px) {
  .navbar {
    margin-top: 0rem;
    /* Adjust the value as needed */
  }
  .hero.is-primary {
    background-image: url('../images/background-mobile.webp');
    background-position: center center;
    background-size: cover;
}
}

.navbar-brand .navbar-item img {
  max-height: 4rem;
  /* Adjust as needed */
  /*max-width: 20rem;*/
  /* Adjust as needed */
}

.is-fixed-top {
  background-color: #fff;
  /* Adjust background color as needed */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Add a subtle shadow */
}

.block:not(:last-child) {
  margin-bottom: 0.5rem;
}

.starico {
  position: relative;
}

.starico img {
  display: block;
  width: 70px;
}

.starico .star {
  position: absolute;
  bottom: -65px;
  left: 230px;
  z-index: 5;
}

.card:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

#back-to-top {
  position: fixed;
  bottom: 50px;
  right: 20px;
  display: none;
}

/* Add this to your global stylesheet or inline if needed */
.gallery-image {
  margin-bottom: 20px;
  /* Adjust spacing between images */
}

/* Override Bulma's flex styles for the targeted columns */
.column.is-half,
.column.is-half-tablet {
  display: block;
  /* Remove flexbox display */
  padding-right: 10px;
}

figure.image img {
  border-radius: 3%;
  /* For perfectly round images */
  /* border-radius: 10px; /* For slightly rounded corners */
}

.sticky-card {
  position: sticky;
  top: 100px;
  /* Adjust top offset as needed */
  z-index: 5;
}

/*############ TIME LINE CSS ############*/

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;
}




.sticky-search {
  position: sticky;
  top: 290px; /* Adjust as needed */ 
  z-index: 4;
}

.sticky-expedia {
  position: sticky;
  top: 445px; /* Adjust as needed */ 
  z-index: 3;
}

.blue-star {
  color: var(--bulma-info); 
}

.gold-star {
  color: #ffd700;
}

.discount-badge {
  /* ...properti CSS lainnya... */
  z-index: 10; 
  position: absolute;
  top: 5px; 
  right: 5px; 
  margin: 2; 
  padding: 2;
}

.fav-badge{
  z-index: 10; 
  position: absolute;
  top: 5px; 
  right: 70px; 
  margin: 2; 
  padding: 2;
}

.fav-badge-normal{
  z-index: 10; 
  position: absolute;
  top: 5px; 
  right: 5px; 
  margin: 2; 
  padding: 2;
}

.fav-badge-tour{
  z-index: 10; 
  position: absolute;
  top: 15px; 
  right: 25px; 
}

.price-container {
  line-height: 1; /* Mengurangi jarak antar baris */
  margin-bottom: -30px;
}

.discount-cotainer {
  margin-top: -50px;
}

.rating{
  z-index: 10; 
  position: absolute;
  top: 10px; 
  left: 15px; 
}

.duration{
  z-index: 10; 
  position: absolute;
  bottom: 5px; 
  right: 5px; 
}

.badge{
  z-index: 10; 
  position: absolute;
  top: 5px; 
  right: 118px; 
}

/*.mobile-availability
  {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f0f0f0; 
    padding: 1rem;
    z-index: 20;
  }*/


  .mobile-availability {
    position: -webkit-sticky; /* Safari */
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f0f0f0; /* Example background color */
    padding: 1rem;
    z-index: 20;
}


  /* Target smaller screens (adjust breakpoint as needed) */
  @media (max-width: 768px) { /* Example: Tablets and smaller */
    .field.has-addons {
      width: 100% !important; /* Override the 80% width */
    }

    /* Optional: Adjust button width for better mobile experience */
    .field.has-addons .control .button {
      width: auto; /* Or a specific percentage */
    }

    /* Optional: Make the input fill the remaining space */
    .field.has-addons .control.is-expanded {
      flex-grow: 1; /* Ensure input takes up available space */
    }
  }

  /* Example of CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.glide__arrow {
  background: none;
  border: none;
  font-size: 2rem;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.glide__arrow--left {
  left: 10px;
}
.glide__arrow--right {
  right: 10px;
}
.glide__slide img {
  width: 100%;
  height: auto;
}



.modal-content {
  display: flex; /* Enable flexbox for positioning */
  align-items: center; /* Vertically align items */
  justify-content: center; /* Horizontally center content */
  position: relative; /* Needed for absolute positioning of buttons */
}

.modal-content img {
  max-width: 90%; /* Adjust as needed */
  max-height: 90vh; /* Adjust as needed */
}

.modal-content .button {
  position: absolute; /* Position buttons relative to modal content */
  top: 50%; /* Vertically center buttons */
  transform: translateY(-50%); /* Adjust vertical alignment */
}

.modal-content .button.prev {
  left: 10px; /* Position previous button on the left */
}

.modal-content .button.next {
  right: 10px; /* Position next button on the right */
}

/* Optional: Style the buttons further */
.modal-content .button {
  background-color: #becdf8; /* Semi-transparent background */
  color: #2e333d;
  border: none;
  padding: 10px;
  border-radius: 5px;
  opacity: 0.8; /* Slightly transparent */
  transition: opacity 0.3s ease; /* Smooth transition on hover */
}

.modal-content .button:hover {
  opacity: 1;
}

/* Optional: Hide buttons if image is not loaded or only one image */
.modal-content .button:disabled {
  display: none;
}