/* Estilos personalizados */

/***** Fuentes ******/

/* Fuente Roboto Regular */
@font-face {
    font-family: 'Roboto Regular';
    src: url('../fuentes/roboto/Roboto-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
  }

  /* Clase para la fuente */
  .roboto_regular{
    font-family: "Roboto Regular";
  }

/* Fuente Roboto thin*/
@font-face {
    font-family: 'Roboto Thin';
    src: url('../fuentes/roboto/Roboto-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
  }

  /* Clase para la fuente */
  .roboto_thin{
    font-family: "Roboto Thin";
  }

  /* Cera Pro Medium 80*/
@font-face {
    font-family: 'Cera 80';
    src: url('../fuentes/cera/Cera_Pro_Medium.otf') format('truetype');
    font-style: normal;
    font-weight: normal;
  }

  /* Clase para la fuente */
  .cera_80{
    font-family: "Cera 80";
  }

/* Barra de navegación */

.navbar{

    background-color: #132869;
}

/* Icono de whastapp del navbar */

.whatsappIcon{
    
    color:white; 
    font-size: 22pt;
}

/* Submenus */
.nav-item .dropdown-menu {
    display: none; /* El submenú está oculto por defecto */
    position: absolute;
    top: 100%; /* Aparece justo debajo del elemento padre */
    left: 0;
    background-color: #132869; /* Fondo del submenú */
    padding: 10px 0; /* Espaciado interno */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra suave */
    opacity: 0.9;
}

.nav-item:hover .dropdown-menu {
    display: block; /* Se muestra el submenú al pasar el mouse */
}

.dropdown-item {
    padding: 10px 20px; /* Espaciado interno de cada ítem */
    color: white !important; /* Asegura que el texto sea blanco */
    background-color: #132869 !important; /* Asegura que el fondo sea el correcto */
    text-decoration: none !important; /* Sin subrayado */
    font-size: 12px;
}

.dropdown-item:hover {
    background-color: #071541 !important; /* Fondo azul oscuro al pasar el mouse */
    color: #ff7f00 !important; /* Texto anaranjado al pasar el mouse */
}


/* Responsive logo */

@media (max-width: 1024px) {

    .logo {
           
        width: 35%;
       
          
    }

}

/*************Footer**************/

/* Estilos para el color de fondo y color de letras del footer */

.footerStyle{

    background-color: #122c69;
    color: white;
}

/* Estilos para las redes sociales */
.social-icons a {
color: white;
font-size: 24px;
margin-right: 15px;
text-decoration: none;
}

.social-icons a:hover {
color: #FF6600; /* Color de hover para íconos de redes sociales */
}

/* Estilos adicionales para el formulario de contactos */
.footer .form-control {
border-radius: 20px;
border: none;
padding-left: 15px;
font-size: 14px;
}

.footer button {
border-radius: 20px;
font-size: 14px;
}

.form-group {
    position: relative;
    }
    
    textarea.form-control {
    padding-bottom: 40px; /* Aumenta el espacio inferior para que el texto no se sobreponga con el botón */
    }

    /* --------- Responsives ---------- */
    /* Botón de enviar con ancho ajustado en responsive */
.form-group button {
    width: 150px; /* Ancho por defecto */
    height: 40px; /* Altura por defecto */
    }
    
    /* Responsive del botón enviar*/
    @media (max-width: 767px) {
    .form-group button {
    width: 70%; /* Ancho completo en pantallas pequeñas */
    height: 50px; /* Aumenta la altura si es necesario */
    }
    }

    /* Estilos específicos para tablets (ancho entre 768px y 1024px) */



/* Estilos para los íconos y el texto de contacto del footer */
.col-lg-3 p {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.col-lg-3 i {
margin-right: 10px;
font-size: 18px;
}


/*****************************************************************************/