.contact-info {
  display: flex;
  align-items: center;
}

.contact-info a {
  text-decoration: none;
  color: #464745;
  margin-right: 10px; /* Espacio entre elementos de contacto */
}

/* Estilos para los iconos en la información de contacto */     
.contact-info i {
  margin-right: 5px; /* Espacio entre el icono y el texto */
}
  
          /* Estilos para el botón flotante de WhatsApp */
          .whatsapp {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000; /* Asegura que esté sobre otros elementos */
          }
          
          .whatsapp a {
            display: block;
            background-color: #137236; /* Color de fondo de WhatsApp */
            width: 60px;
            height: 60px;
            border-radius: 50%;
            box-shadow: 0 2px 10px rgba(187, 9, 9, 0.2);
            text-align: center;
            transition: all 0.3s ease;
            line-height: 60px; /* Alinea verticalmente el icono */
          }
          
          .whatsapp a:hover {
            transform: scale(1.1); /* Efecto de escala al hacer hover */
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
          }
          
          .whatsapp img {
            width: 40px; /* Tamaño del icono de WhatsApp */
            height: 40px;
          }

/* Cambio de color al pasar el mouse en el menú */
.navbar-nav .nav-link:hover {
  color: #F9AC46;
}

/* Centrar el logo en la barra de navegación */
.navbar-brand-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}


  
  
  /* Estilo para el fondo de la página */
  body {
      background-image: url('../img/contactos-1-1.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      opacity: 0.9; /* Ajusta este valor para controlar la opacidad */
  }
  
  /* Estilo para mantener el footer abajo */
  .content-wrapper {
      min-height: calc(100vh - 66px);
      padding-bottom: 150px; /* Altura del footer */
      overflow: auto; /* Habilita el desplazamiento solo para el contenido */
      align-items: center
   }
  
  /* Estilo para el footer */
  footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color: #333; /* Cambia el color de fondo del footer según tu diseño */
      color: #fff; /* Cambia el color de texto según tu diseño */
      padding: 10px 0;
  }
  
  /* Estilos para mostrar el texto sobre las imágenes al hacer hover */
  .ciudad {
    
      position: relative;
      cursor: pointer; /* Cambia el cursor al hacer hover */
  }
  
  .ciudad .text-red {
    
      position: absolute;
      background-color: #A32641; /* Fondo semi-transparente */
      color: white;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px;
      text-align: center;
      opacity: 0;
      transition: opacity 0.3s ease;
  }
  
  .ciudad:hover .text-red {
      
    opacity: 2;
  }
  
  
  /* Estilos para el formulario */
  #formulario {
      max-width: 400px;
      margin:  auto;
      padding: 20px;
      background-color: #FBB03B;
      border-radius: 10px;
      box-shadow: 0px 0px 10px #1A1A1A;
      margin-top: 50px; /* Añadir margen superior para centrar verticalmente */
    }
    
    #formulario h2 {
      font-size: 24px;
      margin-bottom: 20px;
    }
    
    #formulario label {
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
    }
    
    #formulario input[type="text"],
    #formulario input[type="email"],
    #formulario input[type="tel"],
    #formulario select,
    #formulario textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #CCCCCC;
      border-radius: 5px;
      font-size: 16px;
    }
    
    #formulario select {
      height: 40px;
    }
    
    #formulario textarea {
      height: 120px;
    }
    
    #formulario button {
      background-color: #A81B33;
      color: #cccccc;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
    }
    
    #formulario button:hover {
      background-color: #A81B33;
    }
    
    #mi-imagen {
      width: 100px; /* Establece el ancho de la imagen en 200 píxeles */
      height: 100px; /* Establece la altura de la imagen en 150 píxeles */
  }