*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  scroll-behavior: smooth;
  font-family: 'Lato', sans-serif;
}
html, body {
  overflow-x: hidden;
} 

/* Botón de WhatsApp */
.whatsapp-button {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  background-color: #25D366; 
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 1.5s infinite;
  z-index: 1000;
  transition: transform 0.3s ease;
}

.whatsapp-button:hover {
  transform: scale(1.1);
}

.whatsapp-button img {
  width: 3rem;
  height: 3rem;
}

@keyframes pulse {
  0% {
      transform: scale(1);
      opacity: 1;
  }
  50% {
      transform: scale(1.2);
      opacity: 0.8;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

/* sombreado título en cabecera página*/
.shadow-text {
  text-shadow: 
  -1px -1px 0 #000,  
      1px -1px 0 #000,
  -1px  1px 0 #000,
      1px  1px 0 #000;
}

/* imágenes de promociones */
.img-promo{
  height: 800px;
}

/* figuras decorativas en div */
#sobre-nosotros, #contacto, #destinos, #promociones, #ubicacion{
  box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 0.3);
}
#destinos {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"%3E%3Cpath fill="%230066cc" fill-opacity="1" d="M0,224L48,192C96,160,192,96,288,85.3C384,75,480,117,576,128C672,139,768,117,864,112C960,107,1056,117,1152,106.7C1248,96,1344,64,1392,48L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"%3E%3C/path%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}
#promociones {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"%3E%3Cpath fill="%23ff7f00" fill-opacity="1" d="M0,224L48,192C96,160,192,96,288,85.3C384,75,480,117,576,128C672,139,768,117,864,112C960,107,1056,117,1152,106.7C1248,96,1344,64,1392,48L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"%3E%3C/path%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
}

/* icons redes sociales */
.icon-redes-sociales{
  width: 10%;
}


/* Asegúrate de que el modal y el cuerpo tengan un comportamiento adecuado */
.modal-body {
  display: flex;
  padding: 0; /* Elimina el padding para evitar espacio extra */
}

.col-4 {
  max-height: 100%; /* Permite el desplazamiento vertical si es necesario */
  overflow-y: auto; /* Permite el desplazamiento vertical en el listado */
}

.col-8 {
  padding-left: 0; /* Ajusta el padding para que no interfiera con el slider */
  position: relative; /* Permite posicionar los botones de navegación dentro de la columna */
}

.swiper-container {
  height: 300px; /* Ajusta la altura del slider según tus necesidades */
  overflow: hidden; /* Asegúrate de que el contenido no se desborde del contenedor */
}

.swiper-wrapper {
  display: flex;
  height: 100%; /* Asegúrate de que el contenedor de las diapositivas ocupe toda la altura del slider */
}

.swiper-slide {
  display: flex;
  justify-content: center; /* Centra la imagen en el slide */
  align-items: center; /* Centra la imagen verticalmente */
}

.swiper-slide img {
  width: auto; /* Ajusta el tamaño de la imagen dentro del slider */
  max-height: 100%; /* Asegura que la imagen no exceda la altura del slider */
  max-width: 100%; /* Asegura que la imagen no exceda el ancho del slider */
}

/* Botones de navegación del slider */
.swiper-button-next,
.swiper-button-prev {
  color: #000; /* Color del icono de los botones */
  width: 44px; /* Tamaño del botón */
  height: 44px; /* Tamaño del botón */
  top: 50%; /* Posiciona los botones verticalmente al centro */
  transform: translateY(-50%); /* Centra verticalmente */
}

/* Posiciona el botón siguiente en el lado derecho */
.swiper-button-next {
  right: 10px; /* Ajusta la posición desde el borde derecho */
}

/* Posiciona el botón anterior en el lado izquierdo */
.swiper-button-prev {
  left: 10px; /* Ajusta la posición desde el borde izquierdo */
}