@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Murecho:wght@500&family=Nokora:wght@100;300;400;700;900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Murecho:wght@500&family=Nokora:wght@100;300;400;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


  .fondo_degradado{
      background: white; /* Fondo completamente blanco */
    }


      /* Styles for the header division */
  .header-division {
    display: flex; /* Enable flexbox layout for the header division */
    align-items: center; /* Align items vertically within the header division */
    justify-content: space-between; /* Distribute items horizontally with space between */
    padding: 10px 20px; /* Add some padding around the content */
  } 


  .image-container {
  display: flex; /* Allow horizontal image placement */
  justify-content: center; /* Center the images horizontally within the container */
  margin:  auto; /* Add some optional space around the images */
  max-width: 60%; /* Set a maximum width for responsiveness (adjust as needed) */
  margin-top: -30px; /* Reduce the space above the image by using a negative margin */
}


  .header-image-SM {
  display: flex; /* Allow horizontal image placement */
  /*justify-content: center;  Center the images horizontally within the container */
  margin: 2em; /* Add some optional space around the images */
  max-width: 3em; 
  margin-top: 4em;
}




    body {
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0px;
    height: 100%;
      width: 100%;
      box-sizing: border-box;
    }

    .header-logo {
    /* Styles for the header logo */
    width: 70px; /* Adjust width as needed */
    height: auto; /* Maintain aspect ratio */
  }

  .header-text {
    /* Styles for the header text */
    font-size: 9px; /* Adjust font size as needed */
    font-style: italic; /* Make text bold */
    color: grey;
  }

  .image-container {
  text-align: center;
  transform: scale(1);  /*Adjust the value to scale the element */
  left: auto;
  top: -230px; /* Move 20px down from the top */
 /* left: -50px; /* Move 50px to the left */
} 

  .slogan-texto {
    text-align: center;
    font-size: 15px; /* Adjust font size as needed */
    font-family: "Caveat", cursive;
    font-style: italic; 
    position: relative; 
    top: -40px; /* Move 20px down from the top */
    left: 50%;
    transform: translate(-50%, 0);
  }





     .grid-container {
            display: grid;
            grid-template-columns: repeat(2, 4fr);
            gap: auto;
            width: 90%;
            vertical-align: middle;
            margin: auto;
        }



.center-botonwhats {
  display: flex;
  justify-content: center;
  width: 100%;
}

.whatsapp-button {
  background-color: #25D366; /* Color de fondo de WhatsApp */
  color: white; /* Color del texto */
  padding: 10px 20px; /* Espaciado interno */
  font-size: 16px; /* Tamaño del texto */
  border-radius: 20px; /* Bordes redondeados más pronunciados */
  text-decoration: none; /* Remover subrayado */
  display: inline-flex; /* Tipo de display */
  align-items: center; /* Alineación de ícono y texto verticalmente */
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25); /* Sombra para el botón */
  cursor: pointer; /* Cambiar el cursor */
  transition-duration: 0.4s; /* Animación al cambiar */
}

.whatsapp-button i {
  font-size: 24px; /* Tamaño del icono */
}


.botones_index {
    font-family: "Noto Sans", sans-serif;
    font-size: 17px;
    text-align: center;
    margin-top: 1em;
    padding: 1% 0%;
    border: 1px solid black;
    border-width: 0.5px;
    width: 35%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    transition: background-color 0.4s, color 0.4s;

}

.botones_index a {  /* Estilos del enlace dentro del botón */
  text-decoration: none;
  color: black;
  transition: color 0.4s;
}

.botones_index:hover {  
  background-color: #000033;
  border-color: #000033;
}

.botones_index:hover a {  
  color: white;
}




.bot_index {
    font-family: "Noto Sans", sans-serif;
    font-size: 13px;
    text-align: center;
    margin-top: 1em;
    padding: 2% 27%;
    border: 1px solid black;
    border-width: .5px;
    width: 35%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    transition: background-color 0.4s, color 0.4s;

}

.bot_index a {  /* Estilos del enlace dentro del botón */
  text-decoration: none;
  color: black;
  transition: color 0.4s;
}

.bot_index:hover {  
  background-color: #000033;
  border-color: #000033;
}

.bot_index:hover a {  
  color: white;
}




.contenedor-imagenes {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%; /* Asegura que el contenedor tome el ancho completo */
  margin-top: 0em; /* Ajusta el margen superior si es necesario */
}

.contenedor-imagenes img{
  flex: 0 1 auto; /* Hace que las imágenes tomen el 30% del contenedor */
  max-width: 60%; /* Asegura que las imágenes no excedan el 30% del ancho del contenedor */
  height: auto; /* Mantiene la proporción de las imágenes */
  margin: 2em; /* Añade un poco de espacio alrededor de las imágenes */
}


 .carousel {
  max-width: 65%;
  height: auto;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  border-radius: 10px;
}

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

 .carousel-images img {
  width: 100%;
  flex-shrink: 0;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
}

.prev {
  left: 1px;
}

.next {
  right: 1px;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}