@import url('https://fonts.googleapis.com/css2?family=Pathway+Extreme:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');

body {
    font-family: 'Pathway Extreme', sans-serif;
}
header img {
    width: 550px; /* Ajusta el tamaño según sea necesario */
    height: auto; /* Mantiene la proporción de la imagen */
}

/* Estilos para el subtítulo en bold */
.subtitle-bold {
    font-size: 30px;
    
    font-weight: bold;
}
.leadsubtitle-bold {
    font-size: 50x;
    color: #ffffff; /* Azul marino */
    font-weight: bold;
}
/* Estilos para el texto informativo */
.info-text {
    font-size: 35px;
    color: #001f3f; /* Azul marino */
    font-weight: 400;
}

/* Cambiar el color del texto en los campos del formulario */
form input {
    color: #000; /* Cambia a negro o cualquier color que prefieras */
    
}

/* Cambiar el color del texto de los placeholders */
form input::placeholder {
    color: #6c757d; /* Color gris por defecto para placeholders */
}
/* Cambiar el color del título del formulario (Contáctanos) */
form h2 {
    color: #000; /* Cambia a negro o el color que prefieras */
   
}

/* Cambiar el color de las etiquetas (Nombre, Apellido, etc.) */
form label {
    color: #000; /* Cambia a negro o el color que prefieras */
}
/* Cambiar el color del texto del título "Contáctanos" */
.bg-light h2 {
    color: #000; /* Cambia a negro */
}
/* Aumentar el tamaño de la imagen */
.col-lg-5 img {
    width: 1250px; /* Ajusta este valor según lo que necesites */
    height: auto; /* Mantiene la proporción de la imagen */
}
.banner-section .title-uppercase {
    font-size: 50px;
    font-weight: 800 !important; /* Asegúrate de que se aplique */
    color: black !important; /* Asegúrate de que se aplique */
    text-transform: uppercase !important; /* Asegúrate de que se aplique */
}
.custom-form {
    background-color: #a5b2c06e !important; /* Forzamos el cambio de color */
    color: #333 !important; /* Forzamos el color del texto */
}
.title-progreso {
    font-size: 46px; /* Ajusta el tamaño según sea necesario */
}

.text-progreso {
    font-size: 20px; /* Ajusta el tamaño de los párrafos */
}


.bg-image {
    background-image: url('img/banner2.png'); /* Reemplaza con la ruta de tu imagen */
    background-size: cover; /* Asegura que la imagen cubra toda la sección */
    background-position: center; /* Centra la imagen */
    color: white; /* Cambia el color del texto si es necesario */
}
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgb(48 89 149) !important;
}
.image-divider {
    position: relative;
    height: 0; /* No ocupamos espacio adicional */
    z-index: 1; /* Para asegurarnos de que se vea por encima de las secciones */
}

#half-image {
    position: absolute;
    top: -50px; /* Ajusta según el tamaño de la imagen */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Controla la superposición */
    max-width: 50%; /* Ajusta el tamaño según lo que necesites */
    
}
.small-img {
    max-width: 150px; /* Puedes ajustar el tamaño a tu preferencia */
    height: auto; /* Mantiene la proporción */
}
/* Estilos personalizados para el encabezado */
header {
    background-color: #8aa9c9; /* Color de fondo claro */
}

.logo img {
    max-height: 60px; /* Altura máxima del logo */
}

.nav-link {
    color: #000000; /* Color del texto de los enlaces */
    margin: 0 15px; /* Espaciado entre enlaces */
    transition: color 0.3s; /* Transición suave para el color al pasar el ratón */
}

.nav-link:hover {
    color: #000000; /* Color al pasar el ratón */
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

.nav-link {
    display: block;
    padding: 0; /* Mantiene el padding en cero si eso es lo que deseas */
    text-align: left; /* Alinea el texto a la izquierda */
    width: 100%; /* Hace que el enlace ocupe el 100% del ancho del contenedor */
}

.nav {
    justify-content: flex-start; /* Alinea los elementos al principio (izquierda) */
}

.mx-3 {
    margin-right: 3.5rem !important;
    margin-left: 1rem !important;
}
.icono-valores {
    width: 200px; /* Cambia este valor para ajustar el tamaño */
    height: auto;
}
p {
    line-height: 1.8; /* Espaciado entre líneas */
   
}
.texto-limitado {
    max-width: 500px; /* Cambia este valor para ajustar el ancho */
    margin: 0 auto; /* Centrar el texto */
    text-align: left; /* Alinear el texto a la izquierda */
}
.map-responsive {
    width: 100%;
    height: 450px; /* Mantener altura fija */
}
.texto-grande {
    font-size: 1.25rem; /* O el tamaño que prefieras */
    line-height: 1.8;
}
@media (max-width: 768px) {
    .map-responsive {
        height: 500px; /* Reducir la altura en pantallas más pequeñas */
    }
}

@media (max-width: 576px) {
    .map-responsive {
        height: 200px; /* Reducir más en pantallas muy pequeñas */
    }
}
@media (max-width: 576px) { /* Cambiar 576px según tu diseño */
    .banner-section {
        height: 300px; /* Ajusta la altura según sea necesario */
    }
    .banner-section .title-uppercase {
        font-size: 30px;
        font-weight: 800 !important; /* Asegúrate de que se aplique */
        color: black !important; /* Asegúrate de que se aplique */
        text-transform: uppercase !important; /* Asegúrate de que se aplique */
        margin-top: 20px;
       
    }
    .subtitle-bold {
        font-size: 20px;
        
        font-weight: bold;
    }
    .leadsubtitle-bold {
        font-size: 20px;
        color: #ffffff; /* Azul marino */
        font-weight: bold;
    }
    .info-text {
        font-size: 15px;
        color: #001f3f; /* Azul marino */
        font-weight: 400;
    }

#quienes-somos {
    margin-right: 0 !important;
    
}

/* Repite para los otros enlaces según sea necesario */
#servicios {
    margin-right: 0 !important;
    
}

#contacto {
    margin-right: 0 !important;
    
}

}
#service-title {
    font-size: 48px; /* Tamaño más grande */
    color: rgb(186, 208, 255); /* Color cian */
}

/* Mostrar la imagen solo en pantallas grandes dentro del banner */
@media (min-width: 768px) {
    #generador-img-mobile {
        display: none; /* Ocultar la imagen móvil en pantallas grandes */
    }
}

/* Mostrar la imagen debajo del formulario en pantallas pequeñas */
@media (max-width: 767.98px) {
    #generador-img-mobile {
        display: block; /* Mostrar la imagen en pantallas pequeñas */
        margin-left: auto;
        margin-right: auto; /* Centrar la imagen horizontalmente */
    }

    /* Si necesitas ajustar el tamaño o posición de la imagen */
    #generador-img-mobile img {
        max-width: 100%; /* Asegura que la imagen no exceda el tamaño de pantalla */
    }
}

 /* Media Queries para responsive design */
 @media (max-width: 992px) {
    .servicios-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}
 /* Estilo para el contenedor de servicios */
 .servicios-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 2rem; /* Espacio entre servicios */
    padding: 2rem 0; /* Espacio arriba y abajo */
}

/* Estilo para cada servicio */
.servicio {
    background-color: #fff; /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    overflow: hidden; /* Para que las imágenes no se salgan del contenedor */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto hover */
    display: flex;
    flex-direction: column;
}

.servicio:hover {
    transform: translateY(-5px); /* Efecto de levantar al pasar el mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al hover */
}

/* Estilo para las imágenes de los servicios */
.servicio img {
    width: 100%; /* La imagen ocupa el 100% del ancho del contenedor */
    height: 280px; /* Altura fija para las imágenes */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
}

/* Estilo para el contenido de los servicios */
.servicio .contenido {
    padding: 1rem;
    flex-grow: 1; /* Para que el contenido ocupe el espacio restante */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espaciado entre título y descripción */
}

/* Estilo para los títulos de los servicios */
.servicio h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #333; /* Color del texto */
}

/* Estilo para las descripciones de los servicios */
.servicio p {
    font-size: 1rem;
    color: #666; /* Color del texto */
    line-height: 1.4; /* Espaciado entre líneas */
}

/* Estilo para la sección principal */
.bg-primary {
    padding: 4rem 0; /* Más espacio en la sección principal */
}

/* Estilo para el footer */
footer {
    padding: 2rem 0; /* Más espacio en el footer */
    background-color: #333; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
}

/* Estilo para el logo en el header */
.logo img {
    max-height: 80px;
    transition: transform 0.3s ease; /* Efecto hover */
}

.logo img:hover {
    transform: scale(1.1); /* Efecto de agrandar al pasar el mouse */
}

/* Estilo para los enlaces del menú */
.nav-link {
    font-size: 1.1rem;
    color: #333; /* Color del texto */
    transition: color 0.3s ease; /* Efecto hover */
}

.nav-link:hover {
    color: #007bff; /* Color azul al pasar el mouse */
}
.img-container {
    width: 100%;
    height: 200px; /* Ajusta según necesites */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media (max-width: 390px) {
    .servicios-container {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }

    .servicio {
        height: auto; /* Altura automática en móviles */
    }

    .servicio img {
        height: 250px; /* Altura más pequeña para imágenes en móviles */
    }

    .servicio h3 {
        font-size: 1.3rem; /* Tamaño de fuente más pequeño en móviles */
    }

    .servicio p {
        font-size: 0.9rem; /* Tamaño de fuente más pequeño en móviles */
    }

    .bg-primary {
        padding: 2rem 0; /* Menos espacio en la sección principal en móviles */
    }

    .logo img {
        max-height: 60px; /* Logo más pequeño en móviles */
    }

    .nav-link {
        font-size: 1rem; /* Tamaño de fuente más pequeño para enlaces en móviles */
    }
}