/* ==========================================================================
eDreams - HTML5 display definitions
========================================================================== */


body {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-color: #f4f3ef;
  color: #333;
}

/* ==========================================================================
Hero
========================================================================== */
.hero {
  position: relative;
  padding: 20px 0;
  min-height: 185px;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #696969;
  background-position: 50% 100% !important;
  width: 100%;
  height: 100%;
}

.hero-christmas {
  background-image: url('https://eu-images.contentstack.com/v3/assets/blt51f5e57d10edf251/blt1e52f83ae4a4eb17/6734735ecf3756635ed04a5a/hero-christmas.webp');
      position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    color: white;
}

.hero-christmas h1 {
  font-weight: 600;
  font-size: 44px;
  color: #fff;
  margin: 50px 0 50px 0;
  color: #FFFFFF;
  text-shadow:  0 0 5px #d9ae00, 0 0 10px #d9ae00, 0 0 20px #d9ae00, 0 0 20px #d9ae00, 0 0 25px #d9ae00, 0 0 30px #d9ae00, 0 0 30px #d9ae00;
}

.hero h1 {
  font-weight: 600;
  font-size:44px;
  color: #fff !important;
  margin: 32px 0px;
}

.hero {
  background-image: url('https://eu-images.contentstack.com/v3/assets/blt51f5e57d10edf251/bltc70810e3ae8bde00/67a4ae0055ae620ba9ed342d/plane-flight.jpg');
  border-bottom: 0px;  
            
}


.breadcrums {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #19191972;
  padding: 10px;
  color: #fff;
  font-size: 14px;
  backdrop-filter: blur(10px);
  
}

.breadcrums a{
  color: #fff !important;
  font-size: 14px;
}

.breadcrums a:hover{
  color: #fff;
  font-size: 14px;
}

.breadcrums p{
 margin: 0px;
}

.hero-full {
  position: relative;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 0px;
}

/* Video de fondo */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(70%);
}


.hero-content {
  position: relative;
  width: 90%;
  max-width: 1170px;
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  opacity: 0;
  animation: fadeIn 1.5s ease-in forwards;
  text-align: left;
}

/* Estilos del título */
.hero-content h1 {
  font-size: 60px !important;
  margin-bottom: 10px !important;
}

/* Estilos del párrafo */
.hero-content p {
  font-size: 24px !important;
  margin-bottom: 1rem;
  max-width: 800px;
}

/* Media Query para pantallas más pequeñas */
@media (max-width: 768px) {
  .hero-content {
    width: 100%;
    padding: 20px;
  }

  .hero-content h1 {
    font-size: 40px !important;
    margin-bottom: 30px !important;
    text-align: center;
  }

  .hero-content p {
    font-size: 18px !important;
    max-width: 100%;
    text-align: center;
  }
}


/* Scroll Down Arrow */
.scroll-arrow {
position: absolute;
bottom: 5%; /* Ajusta la distancia desde la parte inferior */
left: 50%;
transform: translateX(-50%); /* Centra horizontalmente */
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: transparent;
border: 2px solid #fff;
transition: all 0.3 ease-in-out;
}

.scroll-arrow:hover {
background-color: rgba(255, 255, 255, 0.2);
transition: all 0.3s ease-in-out;
}

/* Animación de la flecha */
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(10px); }
}




/* Animations */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(-50%);
}
}

/* ==========================================================================
SearchBox
========================================================================== */
#flights .od-ui-datepicker-field .od-ui-datepicker-rightButton, #home .od-ui-datepicker-field .od-ui-datepicker-rightButton {
  padding: 0 17px 0 4px !important;
  }
  .od-moreoptions .od-moreoptions-label .od-moreoptions-arrow {
  padding: 0 17px 0 4px !important;
  }
  .od-flightsManager-iframe > iframe {
  width: 100% !important;
  }


  .fa-check {
    color: #ff6600;
    font-weight: 700;
    margin-right: 5px;
}

/* ==========================================================================
Christmas*/


.snowflake {
  position: absolute;
  top: -10px;
  width: 15px;
  height: 15px;
  background: white;
  opacity: 0.8;
  border-radius: 50%;
  animation: fall linear infinite;
}

/* Animation keyframes for snowflakes */
@keyframes fall {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
  100% {
    /* Change 100vh to 600px to match the hero's height */
    transform: translateY(600px) translateX(20px); 
    opacity: 0;
  }
}



 h2 {
  font-weight: 600;
  margin: 0px 0px 20px 0px !important;
  font-size: 1.7em;
}

 h3 {
  font-weight: 600;
  font-size: 1.16em;
  margin: 0px 0px 20px 0px !important;
}



section.content {
  padding: 30px 0px;
}

section.content h2 {
  font-size: 2.5rem;
}

section.content h3 {
  font-size: 2rem;
}

section.content-white {
  background-color: #fff; 
  width: 100%; 
  margin: 40px 0px;
}

section.content strong{
  font-weight: 600;
}

section.content a {
  color: #ff6600;
  text-decoration: none;
}
section.content a:hover, section.content a:focus {
  color: #ff6600;
  text-decoration: none;
}
section.content a:hover i, section.content a:focus i {
  color: #73d0da
}

/* ==========================================================================
LP Editorial Article
========================================================================== */
.articleFULL {
  background: #fff;
  border-radius: 8px;
  box-shadow: rgba(0,0,0,0.2) 0 1px 1px 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
}
.articleFULL-transparent {
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
  margin: 20px auto;
}

.articleFULL-bg {
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  margin: 40px 0px;
}

.articleFULL ul {
  margin-left: 15px;
  list-style: inherit;
}

.articleFULL ol {
  list-style: decimal;
  margin-left: 15px;
  line-height: 2em;
}

.articleFULL strong {
  font-weight: 700;
}
      
h3 {
  margin: 0px 0px 20px 0px !important;
}

.articleFULL p {
  margin: 0 0 10px;
}

/* ==========================================================================
Container Image
========================================================================== */


.tips-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.tips-section:nth-child(odd) {
  flex-direction: row;
}

.tips-section:nth-child(even) {
  flex-direction: row-reverse;
}

.text-content {
  flex: 1;
}

.text-content ul {
  list-style: none;
  padding: 10px;
  margin: 30px 0px;
}

.text-content ul li {
  display: flex;
  align-items: flex-start;
  /* margin-bottom: 15px; */
}

.text-content ul li .tip-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: #ff6600;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 15px;
}



.image-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-content img {
  max-width: 400px;
  height: auto;
  border-radius: 16px;
  background-color: #fcf2e6;
  padding: 10px;
}

@media (max-width: 768px) {


  .tips-section:nth-child(even) {
      flex-direction: column;
  }

  .tips-section:nth-child(odd) {
      flex-direction: column;
  }

  .image-content img {
  max-width: 300px;
  margin-bottom: 30px;
  
}

  
}

/* ==========================================================================
Mobile
========================================================================== */

@media (max-width: 768px) {
  .hero h1 {font-size: 20px; text-align: center;}
  .articleFULL img {height:100%; width:100%;}
  .hero-box  {margin-top: 20px;}
}



/* ==========================================================================
Accordion
========================================================================== */


.accordion {
  overflow: hidden;
  font-size: 16px;
  }
  .tab__label,
  .tab__close {
  display: flex;
  border: 1px solid #d9d9d9;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 10px 0px;
  }
  .tab__label {
  justify-content: space-between;
  padding: 1rem;
  border-radius: 8px;
  font-weight: 400;
  color: #3d3d3d;
  }
  .tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
  color: #ff6600;
  }
  .tab input:checked + .tab__label::after {
  transform: rotate(270deg);
  }
  .tab__content p {
  margin: 0;
  padding: 1rem;
  }
  .tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  }


  /* --- Core Accordion Styles (Applied to all screen sizes) --- */

/* Ensure the wrapper is clean */
.mobile-accordion {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-accordion .accordion-item {
  display: flex;
  flex-wrap: wrap; /* Allows header and content to wrap */
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  /* Set minimum height for the header row */
  min-height: 35px; 
}

/* Header (The clickable visible part) */
.mobile-accordion .accordion-header {
  flex-grow: 1;
  padding-right: 30px; /* Space for the chevron icon */
  font-size: 16px; 
  line-height: 1.3;
}

/* Icon styling */
.mobile-accordion .icon {
  flex-shrink: 0;
  width: 25px;
  margin-right: 10px;
}

/* Chevron Arrow (Must be applied to all sizes now) */
.mobile-accordion .accordion-header::after {
  content: "\276F"; /* Unicode for chevron right */
  position: absolute;
  right: 0px;
  top: 10px; /* Vertically position the arrow */
  font-size: 14px;
  color: #fff;
  transform: rotate(90deg); /* Starts pointing down/right (closed) */
  transition: transform 0.3s ease;
}

/* Active Arrow State */
.mobile-accordion .accordion-item.active .accordion-header::after {
  transform: rotate(270deg); /* Points up (open) */
}

/* Collapsible Content (Starts hidden) */
.mobile-accordion .accordion-content {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
  padding-left: 35px; /* Aligns with text content */
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* Open Content State (Expands) */
.mobile-accordion .accordion-item.active .accordion-content {
  max-height: 300px; /* Large enough value */
  padding-top: 5px;
  padding-bottom: 5px;
}

/* --- Desktop Adjustments (min-width: 768px) --- */
@media (min-width: 768px) {
  /* If the desktop info-box layout is too small, you may need to adjust its max-width here: */
  /* .info-box {
      max-width: 400px; 
  } */
  
  /* Ensure header font size remains appropriate for desktop */
  .mobile-accordion .accordion-header {
      font-size: 16px;
  }
  
  /* Ensure the content is properly aligned on desktop */
  .mobile-accordion .accordion-content {
      font-size: 16px; /* Larger font for desktop content */
  }
}

  /* Arrow animation */
  .tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce .5s infinite;
  }
  @keyframes bounce {
  25% {
      transform: rotate(90deg) translate(.25rem);
  }
  75% {
      transform: rotate(90deg) translate(-.25rem);
  }
  }
  .img-graphic {
      margin: 0px auto;
  }

  .img-graphic img {
      width: 300px;
  }

  .od-product-item-text {
      font-size: 16px;
      margin: 10px;
  }


  @media (max-width: 768px) {
    .accordion-container{
    flex-direction: column;
    gap: 20px;
}
}

/* Core styles/functionality */
.tab {
position: relative;

}
.tab input {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab__content {
max-height: 0;
overflow: hidden;
transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
    max-height: 30rem;
}


 /* Column Icon Styles */

    .columns-icon {
      display: flex;
      gap: 40px;
      margin: 20px 0px 0px 0px;
      width: auto;

    }

    .column-icon {
      flex: 1;
      align-items: center;
      text-align: center;
      margin: 0 auto;
      color: #5a5a5a;
    }

    .column-icon h4 {
      color: #4C4C4C;
      font-size: 19px;
      margin-bottom: 0px !important;
    }

    .column-icon svg {
      color: #ff6600;
    }


    @media (max-width: 768px) {


      .columns-icon {
          display: flex;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          gap: 20px;
      }

      .column-icon {
          flex: 0 0 80%;
          margin: 10px;
          scroll-snap-align: start;
      }
    }


/* =========== Tabs styles ====================*/

    .tabs-container {
      width: 100%;
      background-color: #fff;
      overflow: hidden;
      margin: 30px 0px 0px 0px;
  }

  .tabs {
      display: flex;
      gap: 10px;
      padding: 0px 0px 20px 0px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
  }

  .tab-button {
      flex: 1;
      padding: 10px;
      background-color: #eee;
      color: #8f8f8f;
      font-weight: bold;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease, color 0.3s ease;
      white-space: nowrap

  }

  .tab-button:hover {
      background-color: #ddd;
  }

  .tab-button.active {
      background-color: #ff6600;
      color: white;
      font-weight: bold;
  }

  .tab-content {
      display: none;
      padding: 10px;
      height: auto;
  }

  .tab-content.active {
      display: block;
  }



  /* City cards */

     
.card-city-container {
    display: flex;
    gap: 20px;
    margin-top: 40px;
 
}



.card-city {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  scroll-snap-align: start;
  transition: all 0.3s ease;

}

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

.card-city-image {
  position: relative;
  overflow: hidden;
}

.card-city .card-city-image img {
  width: 100%;
  height: 180px;
  display: block;
  transition: all 0.4s ease;
  object-fit: cover;
}

.card-city:hover  .card-city-image img {
  transform: scale(1.1);
}

.card-city-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  padding: 15px;
  gap: 10px;
}

.card-city-name {
    font-weight: 600;
    color: #606060;
}

.card-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  gap: 10px;
}

.button {
  background-color: #ff6600;
  color: #fff !important;
  font-weight: 500;
  padding: 8px 16px;
  border: 0px;
  border-radius: 35px;
  transition: all 0.3s ease-in-out;
  /* margin: 0 auto; */
}

.button:hover {
  background-color: #0088ff;
}


.card-city-content h4 {
    font-size: 24px !important;
    margin: 0px !important;
    font-weight: 600;
    color: #8f8f8f;
}


.card-city-content p {
  font-size: 16px;
  color: #666;
  
}

/* Responsive Styles */
@media (max-width: 768px) {

.card-city-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
  .card-city {
    flex: 0 0 80%; /* Cards take 80% width in mobile view */
  }
}


/* SLIDER STYLES */

.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 60px;
}
.slider {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 100%;
  position: relative;
}
.slide img {
  width: 100%;
  height: 90vh;
  object-fit: cover;
}

.slide-container {
max-width: 1200px !important;
margin: 0 auto;
padding: 0 20px;
}
.info-box {
  position: absolute;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  backdrop-filter: blur(5px);
  border-radius: 8px;
  padding: 10px;
  max-width: 700px;
  width: 100%;
}

.info-box h3 {
  font-size: 24px;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}



@media (min-width: 768px) {
.info-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1170px;
margin: 0px 20px;
width: 90%;
display: flex;
align-items: center;
}

.info-box {
width: 500px;
background: rgba(0, 0, 0, 0.38);
backdrop-filter: blur(5px);
border-radius: 8px;
padding: 20px;
}
}


.info-box h3 {
color: #fff !important;
}

@media (max-width: 767px) {
  .info-box {
      left: 50%;
      bottom: 120px;
      transform: translateX(-50%);
      width: 90%;
  }
}


/* --- NEW: Swiper Slider Styles --- */
.swiper {
  width: 100%;
  overflow: hidden; /* Ensures nothing spills out */
}

/* Swiper pagination (dots) - Desktop */
.slider-container .swiper-pagination {
  position: absolute;
  bottom: 15px; /* Position dots at the bottom */
  width: 100%;
  text-align: center;
  z-index: 10; /* Above images */
}
.slider-container .swiper-pagination-bullet {
  background: #8a8a8a; /* Tu color */
  opacity: 0.6;
  width: 10px;
  height: 10px;
  margin: 0 5px !important; /* Override Swiper's inline styles */
}
.slider-container .swiper-pagination-bullet-active {
  background: #ff6600;
  opacity: 1;
}

/* Swiper navigation (arrows) - Desktop */
.slider-container .swiper-button-prev,
.slider-container .swiper-button-next {
  color: #ff6600; /* Your brand color */
  background-color: rgba(255, 255, 255, 0.8);
  width: 64px; /* Tu tamaño de desktop */
  height: 64px; /* Tu tamaño de desktop */
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 10; /* Above images */
  /* Se posicionan absolute por defecto */
}

/* Tu regla SVG */
.swiper-button-next svg, .swiper-button-prev svg {
  height: 44px;
}

.slider-container .swiper-button-prev::after,
.slider-container .swiper-button-next::after {
  font-size: 16px; /* Tu tamaño de icono */
  font-weight: 900;
}
.slider-container .swiper-button-prev:hover,
.slider-container .swiper-button-next:hover {
  background-color: #fff;
}

/* Specific positioning - Desktop */
.slider-container .swiper-button-prev {
  left: 20px;
}
.slider-container .swiper-button-next {
  right: 20px;
}

/* --- NEW: Mobile Slider Controls (below image) --- */
@media (max-width: 768px) {
  
  /* 2. Creamos la barra de controles */
  .swiper-controls-bar {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f3ef; /* Color de fondo del body */
  }
  
  /* 3. Posicionamos la paginación (dots) dentro de la barra */
  .slider-container .swiper-pagination {
    position: static; /* Quitamos posicionamiento absoluto */
    flex-grow: 1; /* Ocupa el espacio central */
    width: auto;
    bottom: auto; /* Reseteamos */
  }
  
  /* 4. Posicionamos las flechas dentro de la barra */
  .slider-container .swiper-button-prev,
  .slider-container .swiper-button-next {
    position: static; /* Quitamos posicionamiento absoluto */
    top: auto;
    left: auto;
    right: auto;
    transform: none; /* Reseteamos transform de desktop */
    
    /* Reseteamos estilos para la barra */
    background-color: transparent;
    color: #ff6600;
    width: 35px; /* Tamaño móvil */
    height: 35px; /* Tamaño móvil */
    margin: 0 10px; /* Espaciado */
  }
  
  /* 5. Ajustamos el icono de la flecha en móvil */
  .slider-container .swiper-button-prev::after,
  .slider-container .swiper-button-next::after {
    font-size: 16px;
  }
  
  /* 6. Damos el color de fondo correcto al *otro* slider */
  .stay-slider-container .swiper-controls-bar {
    background-color: #fbf7f4;
  }
}


/* Wordpress blog posts slider module */

.slider-wrapper {
  overflow: hidden;
  max-width: 1200px;
  margin: 0px 50px;
  padding: 20px 0px;
  height: 300px; 
}

.card-list .post-card { 
  height: 250px;
  color: #333;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card-list .post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.311);
}

.post-card a {
  display: contents; 
}

.post-title { 
  padding: 10px 15px;
  font-size: 1.2em;
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
  flex-grow: 1; 
  display: flex;
  align-items: center; 
  color: #FF6600;
}


.post-image {
  width: 100%;
  height: 115px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.post-image img{
  width: 100%;
  height: 115px;
  object-fit: cover;
  transition: all 0.4s ease;
}

.card-list .post-card:hover .post-image{
  transform: scale(1.1);
}

.post-excerpt { 
  display: none !important; 
}

.loading-message, .error-message {
  text-align: center;
  padding: 50px;
  font-size: 1.2em;
  color: #FF6600;
}
.error-message {
  color: red;
}

.slider-wrapper .swiper-pagination-bullet {
  background: #FF6600;
  height: 13px;
  width: 13px;
  opacity: 0.5;
}
.slider-wrapper .swiper-pagination-bullet-active {
  opacity: 1;
}
.slider-wrapper .swiper-slide-button {
  color: #FF6600;
  margin-top: -55px;
  transition: all 0.3s ease-in-out;
}
.slider-wrapper .swiper-slide-button:hover {
  color: #FF6600;
}
@media (max-width: 768px) {
  .slider-wrapper {
      margin: 0 10px 40px;
  }
  .slider-wrapper .swiper-slide-button {
      display: none;
  }
}


/* ==========================================================================
 ALL NEW STYLES FROM EMBEDDED BLOCK
========================================================================== */

  /* --- NEW: Scroll-behavior --- */
  html {
    scroll-behavior: smooth;
  }
  
  /* --- NEW: Sticky Nav Styles --- */
  .sticky-nav {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .sticky-nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    justify-content: center;
    white-space: nowrap;
  }
  .sticky-nav-links li {
    padding: 0 15px;
  }
  .sticky-nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
  }
  .sticky-nav-links a:hover {
    color: #ff6600;
  }
  .sticky-nav-links a.active {
    color: #ff6600;
    border-bottom-color: #ff6600;
  }
  @media (max-width: 768px) {
    .sticky-nav {
      justify-content: flex-start;
      padding: 0 10px;
    }
    .sticky-nav-links {
      justify-content: flex-start;
    }
    .sticky-nav-links li {
      padding: 0 12px;
    }
    .sticky-nav-links a {
      font-size: 15px;
    }
  }

  /* --- NEW: Scroll to Top Button --- */
  #scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 999;
    border: none;
    outline: none;
    background-color: #ff6600;
    color: white;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 18px;
    transition: all 0.3s ease;
    opacity: 0.8;
  }
  #scrollToTopBtn:hover {
    background-color: #b74900;
    opacity: 1;
  }
  #scrollToTopBtn.show {
    display: block;
  }

  /* --- NEW: Reveal on Scroll Effect --- */
  .reveal-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .reveal-section.visible {
    opacity: 1;
    transform: translateY(0);
  }


  /* --- Tab Section Styles --- */
  .tab-column-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
  }
  .tab-column {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }
  .tab-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  }
  .tab-column-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
  }
  .tab-column-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .tab-column-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  .tab-column h4 {
    display: flex;
    align-items: center;
    font-size: 20px !important;
    font-weight: 600;
    color: #ff6600;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
  }
  .tab-column-icon {
    font-size: 20px;
    color: #ff6600;
    margin-right: 10px;
    margin-bottom: 0;
  }
  .tab-column p {
    font-size: 16px;
    line-height: 1.6;
    flex-grow: 1;
  }
  .tab-column .perfect-for {
    font-weight: 600;
    color: #333;
    margin-top: 15px;
    font-size: 16px;
  }
  .tab-column .tip {
    font-style: italic;
    margin-top: 20px;
    background: #fcf2e6;
    padding: 15px;
    border-radius: 4px;
    line-height: 1.6;
  }
  .planning-tip {
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    background: #fbf7f4;
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
    border: 1px solid #fcf2e6;
  }
  @media (max-width: 768px) {
    .tab-column-container {
      /* REPLACED grid with flex for horizontal scroll */
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 15px;
      padding-bottom: 15px; /* Space for scrollbar */
    }
    /* ADDED this to control child width */
    .tab-column {
      flex: 0 0 85%; /* Each card is 85% of screen width */
      scroll-snap-align: start;
    }
    .tab-column-image {
      height: 200px;
    }
  }
  /* --- Slider Info Box Styles (with Icons) --- */
  .info-box ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    color: #fff;
  }
  .info-box li {
    line-height: 1.5;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
  }
  .info-box li .icon {
    font-size: 16px;
    width: 25px;
    flex-shrink: 0;
    margin-right: 8px;
    margin-top: 2px;
    text-align: center;
    color: #fff;
  }
  .info-box li .text-content {
    flex-grow: 1;
  }
  .info-box li strong {
    color: #fff;
    font-weight: 600;
    display: block;
  }
  .info-box .button {
    background-color: #fff;
    color: #ff6600 !important;
    font-weight: 600;
    padding: 10px 20px;
    border: 0px;
    border-radius: 35px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
  }
  .info-box .button:hover {
    background-color: #fcf2e6;
    color: #002c52 !important;
    transform: scale(1.05);
  }

  /* --- Responsive Table Styles --- */
  .responsive-table-container {
    margin: 30px 0;
    width: 100%;
    overflow-x: auto;
  }
  .styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    min-width: 500px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
  }
  .styled-table thead tr {
    background-color: #ff6600;
    color: #ffffff;
    text-align: left;
  }
  .styled-table th,
  .styled-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
  }
  .styled-table tbody tr {
    border-bottom: 1px solid #ddd;
  }
  .styled-table tbody tr:nth-of-type(even) {
    background-color: #f9f9f9;
  }
  .styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #ff6600;
  }
  .styled-table tbody tr:hover {
    background-color: #f1f1f1;
  }

  /* --- Card Icon Styles (REPLACED) --- */
  .cards-icon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    width: auto;
    margin: 20px 0px;
    gap: 20px;
  }
  .card-icon {
    background-color: #fff;
    flex: 1;
    align-items: center;
    text-align: center;
    padding: 20px;
    margin: 0;
    color: #5a5a5a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #d9d9d9;
    border-radius: 8px;
  }
  .card-icon h4 {
    color: #4C4C4C !important;
    margin: 15px 0px !important;
    font-weight: 600 !important;
  }
  .card-icon p {
    font-size: 16px;
  }
  @media (max-width: 768px) {
    .cards-icon {
      /* REPLACED grid with flex for horizontal scroll */
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 15px;
      padding-bottom: 15px; /* Space for scrollbar */
    }
    /* ADDED this to control child width */
    .card-icon {
      flex: 0 0 80%; /* Each card is 80% of screen width */
      scroll-snap-align: start;
    }
  }

  /* --- Stay-Length Slider --- */
  .stay-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fbf7f4;
    padding-top: 40px;
  }
  .stay-slider-container .slide {
    min-height: 450px;
  }
  .stay-slider-container .slide img {
    filter: brightness(0.6);
  }
  .stay-info-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    width: 90%;
    max-width: 500px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    backdrop-filter: blur(5px);
  }
  .stay-info-box h3 {
    font-size: 28px !important;
    font-weight: 600;
    color: #fff !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
  }
  .stay-info-box .stat-group {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }
  .stay-info-box .stat {
    flex-basis: 50%;
  }
  .stay-info-box .stat .label {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 5px;
  }
  .stay-info-box .stat .value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
  }
  @media (max-width: 768px) {
    .stay-slider-container .slide {
      min-height: 400px;
    }
    .stay-info-box h3 {
      font-size: 22px !important;
    }
    .stay-info-box .stat .value {
      font-size: 30px;
    }
  }
  
  /* --- Visitor Card Styles --- */
  .visitor-cards-container {
    display: flex;
    gap: 20px;
    margin: 30px 0;
  }
  .visitor-card {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    min-width: 200px;
    padding: 20px;
    text-align: center;
    overflow: hidden;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .visitor-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fcf2e6;
    height: 0;
    z-index: 1;
    transition: height 1.5s ease-out;
  }
  .visitor-card .flag,
  .visitor-card .country,
  .visitor-card .percentage {
    position: relative;
    z-index: 2;
  }
  .visitor-card img {
    width: 45px;
    height: auto;
  }
  .visitor-card .country {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  .visitor-card .percentage {
    font-size: 36px;
    font-weight: 700;
    color: #ff6600;
    margin-top: 10px;
  }
  .visitor-card.is-animated::before {
    height: var(--fill-height, 0%);
  }
  @media (max-width: 768px) {
    .visitor-cards-container {
      /* REPLACED grid with flex for horizontal scroll */
      display: flex;
      justify-content: flex-start;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 15px;
      padding-bottom: 15px; /* Space for scrollbar */
    }
    /* ADDED this to control child width */
    .visitor-card {
      flex: 0 0 70%; /* Each card is 70% of screen width */
      scroll-snap-align: start;
    }
  }