.dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  .dropdown > .nav-link::after {
    content: ' ▼';
    font-size: 0.75em;
  }

  .nav-link.active {
  color: #5350e6;
  font-weight: bold;
  border-bottom: 2px solid #5350e6;
}

/* clase boton wha */
.whatsapp-btn {
  position: fixed;
  bottom: 20px; /* Distancia desde la parte inferior */
  left: 10px; /* Distancia desde el borde derecho */
  z-index: 1000; /* Asegura que el botón esté sobre otros elementos */
  width: 60px;
  height: 60px;
  background-image: url('/abbaimagen/wa.ico'); /* Ruta de la imagen del icono de WhatsApp */
  background-size: cover; /* Ajusta el tamaño de la imagen al tamaño del botón */
  border: 2px solid #25D366; /* Borde sólido de 2px de color verde */
  border-radius: 50%; /* Hace que el botón sea completamente redondo */
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra */
  transition: transform 0.2s, background-color 0.2s; /* Transición de transformación y color de fondo */
  overflow: hidden; /* Oculta el exceso de animación */
  will-change: transform;
  
}

/* Efecto de ondas */
.whatsapp-btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: ripple 1s infinite;
}

@keyframes ripple {
  from {
      transform: scale(0);
      opacity: 1;
  }
  to {
      transform: scale(2.5);
      opacity: 0;
  }
}

/* Estilos cuando se pasa el cursor sobre el botón */
.whatsapp-btn:hover {
  transform: scale(1.1); /* Aumenta ligeramente el tamaño del botón */
  background-color: #4CAF50; /* Cambia el color de fondo cuando se pasa el cursor sobre el botón */
}



/* Estilo para pantallas móviles (ancho máximo de 768px) */
@media (max-width: 768px) {
  .responsive-link {
      font-size: 21px; /* Tamaño de letra más pequeño en móviles */
  }
}


/* clase boton llamada */
.call-btn {
  position: fixed;
  bottom: 5px; /* Distancia desde la parte inferior */
  left: 50%; /* Posición horizontal centrada */
  transform: translateX(-90%); /* Ajuste para centrar el botón completamente */
  z-index: 1000; /* Asegura que el botón esté sobre otros elementos */
  width: 60px;
  height: 60px;
  background-image: url('/abbaimagen/llamada.webp'); /* Ruta de la imagen del icono de llamada */
  background-size: cover; /* Ajusta el tamaño de la imagen al tamaño del botón */
  border: 2px solid #34b7f1; /* Borde sólido de 2px de color azul */
  border-radius: 50%; /* Hace que el botón sea completamente redondo */
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra */
  transition: transform 0.2s, background-color 0.2s; /* Transición de transformación y color de fondo */
  overflow: hidden; /* Oculta el exceso de animación */
  will-change: transform;
}

/* Efecto de ondas */
.call-btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: ripple 1s infinite;
}

@keyframes ripple {
  from {
      transform: scale(0);
      opacity: 1;
  }
  to {
      transform: scale(2.5);
      opacity: 0;
  }
}

/* Estilos cuando se pasa el cursor sobre el botón */
.call-btn:hover {
  transform: scale(1.1); /* Aumenta ligeramente el tamaño del botón */
  background-color: #4CAF50; /* Cambia el color de fondo cuando se pasa el cursor sobre el botón */
}

.btn-separado {
  margin-right: 15px; /* Ajusta la distancia aquí */
}



.custom-section {
  background-color: #222b6d; /* Color de fondo */
  padding: 0; /* Sin espaciado interno */
  height: 400px; /* Altura de la sección */
  display: flex; /* Usar flexbox para alinear */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  
}

.content-wrapper {
  display: flex; /* Usar flexbox para el alineamiento */
  justify-content: space-between; /* Espacio entre el texto y el botón */
  align-items: center; /* Alinear verticalmente al centro */
  width: 100%; /* Asegurarse de que ocupe todo el ancho */
  max-width: 1200px; /* Limitar el ancho máximo */
  padding: 0 20px; /* Agregar un poco de espaciado en los lados */
}

.info-text {
  color: #fff; /* Color del texto */
  margin: 0; /* Sin margen */
  font-size: 2.4rem; /* Tamaño de fuente */
}

.info-button {
  background-color: #fff; /* Color del botón */
  color: black; /* Color del texto del botón */
  padding: 12px 25px; /* Espaciado interno del botón */
  text-decoration: none; /* Sin subrayado */
  border-radius: 5px; /* Bordes redondeados */
  transition: background-color 0.3s; /* Efecto de transición para el hover */
  margin-left: 20px; /* Espacio entre el texto y el botón */
}



@media (max-width: 768px) {
  .content-wrapper {
      flex-direction: column; /* Cambiar a columna en dispositivos más pequeños */
      align-items: flex-start; /* Alinear a la izquierda */
      width: 90%; /* Ocupar 90% del ancho del contenedor */
      margin: 0 auto; /* Centrar el contenedor */
  }

  .info-text {
      font-size: 1.5rem; /* Reducir tamaño de fuente para mejor visibilidad */
      margin-bottom: 10px; /* Espacio debajo del texto */
      text-align: center;
  }

  .info-button {
      width: 100%; /* Hacer que el botón ocupe todo el ancho disponible */
      text-align: center; /* Centrar el texto dentro del botón */
      margin-left: 0; /* Sin margen a la izquierda */
  }
}