.navbar-logo {
            max-width: 30px; /* Ajusta el tamaño máximo del logo según tus necesidades */
            margin-left: 30px;
        }

.bg-green {
    /*background-color: #7FA88F; /* Cambia este valor al color de fondo que desees */
    background-color: #08401d;
}

.elegant-font {
    font-family: "TuFuenteElegante", Times New Roman, sans-serif; /* Cambia "TuFuenteElegante" por la fuente que desees usar */
    /* Otros estilos de fuente, como tamaño y peso, pueden agregarse aquí según tus preferencias */
}

.custom-spacing .nav-item {
    margin-right: 30px; /* Ajusta el valor del margen según tu preferencia */
}

/* Estilo para el submenú del idioma */
.dropdown-menu {
    background-color: #08401d; /* Cambia este valor al color de fondo que desees para el submenú */
    border: none; /* Quita el borde */
    border-radius: 0; /* Quita la esquina redondeada */
    box-shadow: none; /* Quita la sombra */
    margin-top: 0; /* Evita que el submenú se solape con el menú principal */
    max-width: 20px; /* Ajusta el ancho máximo del submenú según tus necesidades */
    margin-left: -26px;
}

.dropdown-menu a {
    color: #fff; /* Cambia el color del texto a blanco */
    padding: 10px 15px; /* Añade un poco de espaciado alrededor de los elementos del submenú */
}
.bandera-idioma {
    width: 20px; /* Ajusta el ancho de las banderas según tus necesidades */
    margin-right: 10px; /* Ajusta el espaciado entre la bandera y el texto según tus necesidades */
}


/* Estilo para subrayar los nombres del navbar al pasar el cursor por encima */
.navbar-nav .nav-link:hover {
    text-decoration: underline; /* Subraya el texto en amarillo */
}






footer {
  background-color: #08401d;
  color: white;
  padding: 20px 0;
  text-align: center;
  position: relative;
}






.associations {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.association1 {
  flex: 1;
  max-width: 190px;
}

.association1 img {
  max-width: 100%;
  height: auto;
}
.association2 {
  flex: 1;
  max-width: 190px;
}

.association2 img {
  max-width: 100%;
  height: auto;
}

.social-media ul {
  list-style: none;
  padding: 0;
  position: relative;
}

.social-media ul li {
  display: inline-block;
  margin: 0 10px;
}

.social-media ul li img {
  width: 32px;
}
.legal-info a {
  text-decoration: none; /* Elimina el subrayado */
  color: inherit; /* Hereda el color del texto del elemento padre */
  cursor: default; /* Cambia el cursor a un cursor predeterminado */
  transition: color 0.3s ease; /* Agrega una transición de color suave */
}

.legal-info a:hover {
  color: #fcfcfc; /* Cambia el color del texto al pasar el cursor */
  text-decoration: underline;
}



/* Líneas blancas */
.social-media::before,
.social-media::after {
  content: "";
  position: absolute;
  background-color: white;
  height: 1px;
  width: calc(50% - 80px); /* Ajusta el ancho según el tamaño de los logos y los márgenes */
  top: 75%;
  transform: translateY(-50%);
}

.social-media::before {
  left: 0;
}

.social-media::after {
  right: 0;
}
.logo-footer img {
  max-width: 60px; /* Puedes ajustar el valor según tu preferencia */
}


@media only screen and (max-width: 600px) {
  .associations {
    flex-direction: column;
    align-items: center;
  }

  .association1 {
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .legal-info {
    margin-top: 20px;
  }
  .assodirections{
    margin-top: 20px;

  }
  .social-media::before,
.social-media::after {
  content: "";
  position: absolute;
  background-color: white;
  height: 1px;
  width: calc(50% - 80px); /* Ajusta el ancho según el tamaño de los logos y los márgenes */
  top: 84%;
  transform: translateY(-50%);
}

.social-media::before {
  left: 0;
}

.social-media::after {
  right: 0;
}
}




/* Estilos para los modales, ajusta según tus necesidades */
.modal {
  display: none; /* Inicialmente oculto */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  text-align: justify;
}

.modal-content {
  background-color: #fff;
  margin: 20% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.modal-trigger {
  cursor: pointer;
}
.modal-title {
  text-align: center;
}
#cookies-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#cookies-table th,
#cookies-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

#cookies-table th {
  background-color: #f2f2f2;
}
/* Estilos para hacer la tabla multipantalla */
@media screen and (max-width: 600px) {
  /* Ajustar la tabla para pantallas pequeñas */
  #cookies-table {
    border-collapse: collapse;
    width: 100%;
  }
  #cookies-table th,
  #cookies-table td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  #cookies-table th {
    background-color: #f2f2f2;
  }
  /* Ocultar el encabezado de la tabla en pantallas pequeñas */
  #cookies-table thead {
    display: none;
  }
  /* Mostrar la tabla en formato de fila en pantallas pequeñas */
  #cookies-table,
  #cookies-table tbody,
  #cookies-table tr,
  #cookies-table td {
    display: block;
    width: 100%;
  }
  /* Estilo para cada fila */
  #cookies-table tr {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
  }
  /* Estilo para cada celda */
  #cookies-table td {
    text-align: left;
    border-bottom: none;
  }
  /* Agregar espacio entre las celdas */
  #cookies-table td::before {
    content: attr(data-label);
    font-weight: bold;
    float: left;
    text-transform: uppercase;
  }
}














body {
    font-family: Times New Roman, sans-serif;
    text-align: center;
}

/* INDEX */
.custom-section {
  background-color: #f2f2f2;
  padding: 0 0 40px;
  margin-top: 0;
}

.image-container {
  position: relative;
  width: 100%;
  height: 540px;
  overflow: hidden;
}

.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.logo {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  filter: grayscale(0%);
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: white;
  font-size: 6vw;
  z-index: 1;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.text-overlay.show {
  opacity: 1;
}

.additional-text {
  text-align: center;
  padding: 10px;
  background-color: rgba(43, 39, 39, 0.8);
  color: white;
}

.additional-text p {
  font-size: 15px;
}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 576px) {
  .image-container {
    height: 200px;
  }
  .text-overlay {
    font-size: 6vw;
  }
  .additional-text p {
    font-size: 14px;
  }
}

/* Estilos para iPads */
@media screen and (min-width: 577px) and (max-width: 1024px) {
  .image-container {
    height: 300px; /* Ajusta la altura para iPads */
  }
  .text-overlay {
    font-size: 4vw; /* Ajusta el tamaño de fuente para iPads */
  }
  .additional-text p {
    font-size: 12px; /* Ajusta el tamaño de fuente para iPads */
  }
}


.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 18px;
  z-index: 2;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}




.container1 {
  display: flex;
  flex-direction: column;
  padding: 20px; /* Reducimos el padding general */
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 20px;
  border-radius: 10px;
  transition: box-shadow 0.3s ease;
  text-align: center; /* Centramos el contenido en dispositivos móviles */
}

.container1:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.logo1 {
  max-width: 200px;
  margin-bottom: 20px; /* Añadimos margen inferior */
  margin-left: auto;
  margin-right: auto;
}

.text1 {
  font-size: 18px;
  text-align: justify;
  
}

/* Media query para dispositivos móviles */
/* Media query para pantallas más grandes */
@media only screen and (min-width: 600px) {
  .container1 {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 50px; /* Ajustamos el padding original */
    text-align: left; /* Ajustamos la alineación del texto */
  }

  .logo1 {
    margin-bottom: 0; /* Eliminamos el margen inferior */
    margin-right: 20px; /* Ajustamos el margen derecho del logo */
  }

  .text1 {
    max-width: calc(100% - 240px); /* Ajustamos el ancho del texto */
    margin-left: 50px; /* Ajustamos el margen izquierdo del texto */
  }

}
  /* Media query para dispositivos móviles */
  @media only screen and (max-width: 600px) {
    .logo1 {
      max-width: 120px; /* Reducimos el tamaño del logo */
    }
  }




  

  .selling-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
  }
  
  .selling-content {
    margin-bottom: 30px;
  }
  
  .selling-content h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }
  
  .selling-content p {
    font-size: 18px;
    margin-bottom: 20px;
  }

  
  



  .container123 {
    width: 100%;
    height: 300px;
    background-image: url('../fotos/pages/index/back.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    text-align: center;
    padding-top: 0px;
    filter: brightness(95%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .venta-link {
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 5px;
  }
  
  .venta-texto {
    font-size: 24px;
    font-weight: bold;
    color: white; /* asegura que el texto sea blanco */
  }
  
  


  
  /* Añade más estilos según sea necesario */
  
  
  
  









  
/* -------------------- */





/* Agrega este CSS en tu archivo de estilo o en la sección de estilos dentro del <head> */
.section {
    margin-bottom: 30px; /* Puedes ajustar el valor según el espacio deseado */
    margin-top: 30px;
}





.contact-form {
            background-color: #ffffff;
            padding: 30px;
            margin-top: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

.btn-send {
          display: block;
          width: 100px;
          margin: 20px auto;
          padding: 10px;
          text-align: center;
          background-color: #56728f;
          color: white;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          text-decoration: none;
}
















/* The actual timeline (the vertical ruler) */
.main-timeline-2 {
  position: relative;
}

/* The actual timeline (the vertical ruler) */
.main-timeline-2::after {
  content: "";
  position: absolute;
  width: 3px;
  background-color: #7FA88F;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timeline-2 {
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.timeline-2::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -11px;
  background-color: #346C4A;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left-2 {
  padding: 0px 40px 20px 0px;
  left: 0;
}

/* Place the container to the right */
.right-2 {
  padding: 0px 0px 20px 40px;
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left-2::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right-2::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right-2::after {
  left: -14px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .main-timeline-2::after {
    left: 31px;
  }

  /* Full-width containers */
  .timeline-2 {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .timeline-2::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left-2::after,
  .right-2::after {
    left: 18px;
  }

  .left-2::before {
    right: auto;
  }

  /* Make all right containers behave like the left ones */
  .right-2 {
    left: 0%;
  }
}



        
.timeline-2 {
  opacity: 0;
  transform: translateX(100px); /* Opción: Iniciar desde la derecha */
  transition: opacity 0.5s, transform 0.5s;
}

.timeline-2.active {
  opacity: 1;
  transform: translateX(0); /* Opción: Mover hacia la izquierda */
}


/* Agrega un estilo a las imágenes para aplicar el efecto de zoom */
.photo img {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

/* Agrega un estilo para el efecto de zoom al pasar el mouse (opcional) */
.photo:hover img {
    transform: scale(1.1);
}


/* Agrega una clase de animación para las imágenes */
.animated-image {
    opacity: 0; /* Las imágenes comienzan invisibles */
    animation: fade-in 1s ease-in-out forwards; /* Duración y tipo de animación */
}

/* Define la animación con keyframes */
@keyframes fade-in {
    from {
        opacity: 0; /* Comienza completamente transparente */
        transform: translateY(50px); /* Comienza desplazada hacia abajo */
    }
    to {
        opacity: 1; /* Termina completamente visible */
        transform: translateY(0); /* Vuelve a su posición original */
    }
}


#backgroundDiv {
    background-image: url('../fotos/car4.jpg'); /* Reemplaza 'ruta_de_tu_imagen.jpg' con la ruta de tu imagen de fondo */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
    background-attachment: fixed; /* Fija la imagen de fondo en su posición mientras se desplaza el contenido */
    /* Puedes agregar más propiedades CSS según tus necesidades, como el color de texto, margen, relleno, etc. */
}





















.gallery {
  display: flex;
  flex-wrap: wrap;
}

.photo {
  position: relative;
  flex: 1 1 100%; /* Para que ocupe todo el ancho en dispositivos móviles */
  overflow: hidden;
}

.photo img {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.5s;
}

.overlay-mobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
  opacity: 0; /* Inicialmente oculta */
  transition: opacity 0.5s;
}

.photo:hover img,
.photo.touch img {
  filter: grayscale(100%);
}

.photo:hover .overlay,
.photo.touch .overlay,
.photo:hover .overlay-mobile,
.photo.touch .overlay-mobile {
  opacity: 1;
}

@media only screen and (min-width: 600px) {
  .photo {
    position: relative;
    flex: 1 1 25%; /* Vuelve a mostrar las imágenes en una fila horizontal en dispositivos de escritorio */
  }
}








.containercounter {
  max-width: 800px;
  margin: 50px auto;
  display: flex;
  justify-content: space-around;
}

.counter {
  text-align: center;
}

.counter h2 {
  font-size: 24px;
  color: #333;
}

.counter .count {
  font-size: 48px;
  color: #08401d;
  margin-top: 10px;
  margin-bottom: 0;
  
}

.counter .count.animate {
  transition: 2s ease-out;
}

/* Estilos para dispositivos móviles */
@media only screen and (max-width: 600px) {
  .counter h2 {
    font-size: 14px; /* Tamaño de fuente más pequeño para dispositivos móviles */
  }

  .counter .count {
    font-size: 36px; /* Tamaño de fuente más pequeño para dispositivos móviles */
  }
}













/* Estilos para el aviso de cookies */
#cookie-consent {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  
  text-align: center;
  display: none;
  z-index: 9999; /* Asegura que el aviso de cookies esté en la parte superior */
}

#cookie-consent p {
  margin-bottom: 10px;
}

#accept-cookies, #deny-cookies {
  background-color: #08401d;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 10px;
}

#consult-cookies {
  background-color: #6c757d; /* Color de fondo gris */
  color: #fff; /* Color del texto blanco */
  border: none; /* Sin borde */
  padding: 10px 20px; /* Espaciado interior */
  border-radius: 4px; /* Bordes redondeados */
  cursor: pointer; /* Cursor de puntero */
  margin: 0 10px; /* Margen horizontal */
  margin-top: 3px;
}

#consult-cookies:hover {
  background-color: #495057; /* Color de fondo gris oscuro cuando se pasa el ratón */
}

 /* Estilo para hacer los botones más pequeños en pantallas móviles */
 @media (max-width: 600px) {
  #accept-cookies, #deny-cookies, #consult-cookies {
    padding: 8px 16px; /* Reducir el padding para hacer los botones más pequeños */
  }
  #accept-cookies, #deny-cookies, #consult-cookies {
   
    border: none;
    padding: 5px 10px;
    border-radius: 2px;
    cursor: pointer;
    margin: 0 5px;
    margin-top: 4px;
  }

}

.VolvercookiesIndex {
  display: inline-block;
  padding: 10px 20px;
  background-color:#08401d; /* Color de fondo */
  color: white; /* Color del texto */
  text-decoration: none; /* Quitamos subrayado del enlace */
  border: none; /* Quitamos el borde */
  border-radius: 5px; /* Añadimos esquinas redondeadas */
  cursor: pointer; /* Cambiamos el cursor al pasar por encima */
  transition: background-color 0.3s; /* Transición suave del color de fondo */
}

.VolvercookiesIndex:hover {
  background-color: #293a2a; /* Cambiamos el color de fondo al pasar el ratón por encima */

}
.botonvolvercookies{
  margin-top: 20px;
  margin-bottom: 20px;
}