/*Nav de navegacion*/
html, body {
    overflow-x: hidden;
  }

.navbar {
    padding: 0 !important;
    min-height: 8vh;
    background-color: white ;
  }
  .navbar-brand {
    padding: 0.75rem 1.5rem;
  }
  .navbar-toggler {
    padding: 0.75rem;
  }
  .navbar-collapse {
    padding: 0;
  }
  .navbar-nav {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
  }
  .nav-item {
    padding: 0 1rem;
  }
  .nav-link {
    font-family: 'neu' !important ;
    border-radius: 0.25rem;
    font-weight: bold !important;
    border-bottom: 1px solid transparent;   
    transition: border-bottom 0.3s ease;
    color: #00205c !important;
    position: relative
  }
  .nav-link::before {
    content: ""; /* Necesario para que el pseudo-elemento sea visible */
    position: absolute; /* Posiciona el pseudo-elemento relativo al elemento padre */
    bottom: 0; /* Alinea el pseudo-elemento en la parte inferior del enlace */
    left: 0; /* Posiciona el pseudo-elemento a la izquierda del enlace */
    width: 0; /* Inicialmente, el pseudo-elemento no tiene ancho */
    height: 1px; /* Altura del borde */
    background-color: red; /* Color del borde */
    transition: width 0.3s ease; /* Transición del ancho para crear el efecto */
  }

  .nav-link:hover::before {
    width: 100%; /* Aumenta el ancho del pseudo-elemento al pasar el mouse */
  }
  #map {
    height: 400px;
  }

  #titulo-serv{
    border-bottom: 2px solid red;
  }

  #titulo-serv{
    border-bottom: 2px solid red;
  }


  .jtmain{
    margin: 0;
    padding: 0;
    width: 100% !important;
    height: 100vh !important;
}


/* portada mobile */ 


/* Portada*/

  .image-container{
    border-radius: 15px;
    
    
}
.image-container:hover{
    padding: 0 4px !important; 
}

.accordion {
    display: flex;
    width: 100%;
    height: 100%;
}

.image-container {
    position: relative;
    width: 25%;
    height: 100vh; /* Altura fija para mantener el mismo tamaño */
    overflow: hidden; 
    transition: width 0.5s ease; /* Transición para el efecto de acordeón */
}

.image-container img {
    width: 100%;
    height: 100vh;
    object-fit: fill;
    
}
.expanded {
    width: 100%; /* Ancho completo cuando está expandido */
}





/******************** estilo para el servicio ***********************/
.card{
    transition: box-shadow 0.3s ease;
    border-radius: 15px;
    width: auto;
    height: 250px !important;

}
.card-body p{
  text-align: justify-all !important;
}
.card:hover {
      transform: scale(1.05);
      transition: transform 0.3s ease;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    }
    

    

    /************************ estilos para location***/
    .columna {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      padding: 20px;
    }

    .texto {
      text-align: center;
    }

    @media (max-width: 768px) {
      .columna {
        flex-direction: column;
      }

    }

/* Estilos base para la sección nuestros-servicios */
.nuestros-servicios {
  padding-top: 50px;
  padding-bottom: 50px; /* Añadido para espaciar la parte inferior */
  height: auto;
}

.nuestros-servicios h1,
.preguntas-frecuentes h1,
.oficians h1,
.aventureros h1 {
  font-weight: bold;
  text-transform: uppercase;
}

/* Estilos para el contenedor de imagen de servicios */
.img-servicios-container {
  display: flex;
  justify-content: center; /* Centra la imagen horizontalmente */
  overflow: hidden; /* Oculta el contenido que se salga del contenedor */
  max-width: 100%; /* Limita el ancho máximo del contenedor */
}

.img-servicios {
  width: 100%; /* Hace que la imagen ocupe todo el ancho del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  max-width: 450px; /* Establece el ancho máximo para la imagen */
}

@media (max-width: 991px) {
  .nuestros-servicios {
    padding: 30px 15px; /* Ajuste de padding en dispositivos móviles */
  }

  .img-servicios {
    max-width: 100%; /* La imagen ocupa el ancho total en pantallas más pequeñas */
  }
}

@media (max-width: 576px) {
  .nuestros-servicios {
    padding: 20px 10px; /* Padding más reducido para pantallas pequeñas */
  }

  .img-servicios {
    max-width: 100%; /* Ajuste adicional para asegurar que no se salga en móviles */
  }
}




.mensajejt{
  margin: 80px 0 0 80px;
  font-size: 64px;
  width: max-content;
  display: flex;
  flex-direction: column;
  height: 100px;
  background-color: #00205c;
  color: white;
}
.mensajejt > div {
  overflow: hidden;
}
.mensajejt > div > h1 {
  width: max-content;
  white-space: nowrap;
}


/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
  .mensajejt {
    text-align: center;
    font-size: 10px !important; 
    margin: 40px 0 0 40px; 
  }
}




.green {
  color: red;
}

    /* Aquí va tu CSS original */
    @keyframes slide-up {
      0% {
        transform: translateY(100px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .slide-up {
      opacity: 0; /* Inicia oculto */
    }

    .slide-up.animated {
      animation: slide-up 0.85s cubic-bezier(0.65, 0, 0.35, 1) both;
    }

.preguntas-frecuentes{
        width: 100% !important;

    }


    .preguntas-frecuentes, h5{
      font-family: 'neu';
    }

    .preguntas-frecuentes li{
      line-height: 1.5;
    }


    .review-google{
      background: 
      linear-gradient(0deg, rgb(187, 189, 189) 0%, rgb(255, 255, 255) 100%),
      url('../img/texture/test.jpeg'); 
      background-blend-mode: overlay; 
      background-size: cover; 
      margin: 0;
    }
      
  .whatsapp-button {
    display: inline-block;
    background-color: #25D366; /* Color de fondo de WhatsApp */
    color: #fff; /* Color del texto */
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .whatsapp-button:hover {
    background-color: #128C7E; /* Cambio de color al pasar el mouse */
  }

  /* Estilos para el icono de WhatsApp */
  .whatsapp-button img {
    vertical-align: middle;
    margin-right: 10px;
  }

  .btn-pago{
    background-color: #9068ca;
    border-radius: 22px !important;
    border: none !important;
  }
  .txt-btn-pag{
    border: none !important;
    color: white !important;
    font-size: 18px;
    font-weight: bold;
  }

  .nuestros-servicios .btn-primary{
    background-color: #00205c;
  }

  .nuestros-servicios .btn-primary:hover{
    background-color: #021a47;
    font-weight: bold;
  }