@font-face {
    font-family: 'Sora';
    src: url('../fonts/sora.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
html, body {
    overflow-x: hidden; /* Oculta el scroll horizontal */
    width: 100%;
}
html {
    scroll-behavior: smooth;
}


body {
    font-family: Sora, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000;
    color: white;
}
/* Estilo para el botón */
.btn-primary {
    background: #00AEEF;
    border: none;
    padding: 0.8rem 1.8rem;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: inline-block;
    text-align: center;
}

/* ✅ Quitar estilos de enlace dentro del botón */
.btn-primary a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    font-size: inherit;
    font-weight: inherit;
}

/* ✅ Mantener el hover en el botón */
.btn-primary:hover {
    background: #008ecf;
}

/* ✅ Asegurar que el cursor siga siendo de botón */
.btn-primary a:hover {
    color: white;
}


.navbar {
    background: transparent !important;
    position: absolute;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0; /* Espacio uniforme */
    transition: all 0.3s ease-in-out; /* Transición suave */
}
flex-grow

.navbar .navbar-nav {
    display: flex;
    justify-content: flex-end; /* Mueve todo el menú hacia la derecha */
    align-items: center;
    flex-wrap: nowrap;
    padding-right: 2rem; /* Desplaza más el menú hacia la derecha */
}

.navbar .nav-group,
.navbar .nav-group-right {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem; /* Mantiene el espacio entre los elementos */
}

.navbar .nav-group-right {
    margin-left: auto; /* Mantiene el espacio entre los dos grupos */
}


.navbar .nav-group-right .nav-item,
.navbar .nav-group .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50px; /* Asegura que todos los elementos tengan la misma altura */
}

.navbar .nav-link {
    color: white !important;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 50px;
}

.navbar .nav-link sub {
    font-size: 12px;
    font-weight: normal;
    opacity: 0.8;
    line-height: 1.2;
}



.navbar-brand img {
    max-height: 50px;
    display: block;
    max-width: 80%;
    transition: all 0.3s ease-in-out; /* Transición suave */
}

@media (min-width: 992px) { /* Aplica solo en pantallas grandes */
    .navbar-collapse {
        flex-grow: 0; /* Evita que el menú se expanda demasiado */
    }
    .close-menu {
        display: none;
    }
}
/* Asegurar que el icono de hamburguesa esté a la derecha */
.navbar-toggler {
    margin-left: auto; /* Empuja el botón de menú a la derecha */
    border: none; /* Opcional: quitar el borde del botón */
    transition: all 0.3s ease-in-out; /* Transición suave */
}
@media (min-width: 992px) { /* Solo en pantallas grandes */
    .navbar-brand{
        width: 28%;
    }
}

/* Agregar un fondo oscuro al menú cuando se expande */
@media (max-width: 991px) { /* Solo en móviles */
    /* Fondo del menú cuando está abierto */
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        z-index: 1000;
    }

    /* Mostrar el menú cuando está activo */
    .navbar-collapse.show {
        opacity: 1;
        visibility: visible;
    }

    /* Centrar los elementos del menú */
    .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: 1.8rem; /* Espaciado uniforme */
        text-align: center;
        align-items: center;
    }

    /* Estilo de los enlaces */
    .navbar .nav-link {
        font-size: 1.5rem !important; /* Tamaño más grande */
        font-weight: bold;
        text-transform: uppercase;
        color: white !important;
        transition: color 0.3s ease-in-out;
        align-items: center;
        justify-content: flex-start;
        padding: 1.1rem 0.6rem !important; /* Ajuste de padding */
    }

    .navbar .nav-link:hover {
        color: #00AEEF !important; /* Efecto de color azul al pasar el mouse */
    }

    /* Estilo para el CALL US y EMAIL US */
    .navbar .contact-info {
        font-size: 1.2rem;
        font-weight: bold;
        margin-top: 1rem;
        color: white;
    }

    .navbar .contact-info span {
        display: block;
        font-size: 1rem;
        font-weight: normal;
        color: #cccccc;
    }

    /* Botón de cerrar menú */
    .close-menu {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 2.5rem;
        color: white;
        background: none;
        border: none;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .close-menu:hover {
        transform: scale(1.1);
    }
    .section-title {
        text-align: center;
        margin-left: 0; /* Centrar el título en móviles */
    }
    .service-box {
        border-right: none;
        border-bottom: 2px solid rgba(0, 174, 239, 0.7); /* Línea horizontal en móviles */
        padding-bottom: 2rem;
    }
    .service-box {
        border-right: none;
        border-bottom: 2px solid rgba(0, 174, 239, 0.7); /* Línea azul horizontal en móviles */
        padding-bottom: 2rem;
    }
    /* Ajustes de espaciado en la sección de servicios */
.service-box h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem; /* Aumenta el espacio entre el título y el primer párrafo */
}

.service-box p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem; /* Aumenta la separación entre párrafos */
}

/* Ajuste de los títulos en negrita dentro de los párrafos */
.service-box p strong {
    display: block;
    margin-bottom: 0.8rem; /* Espaciado más consistente entre los subtítulos */
}

    
}
@media (max-width: 530px) {
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between; /* Asegura separación uniforme */
        padding: 0.5rem 1rem; /* Ajuste de padding */
    }

    .navbar-brand {
        flex: 1; /* Permite que el logo ocupe el espacio disponible */
    }

    .navbar-brand img {
        max-height: 40px; /* Reduce el tamaño del logo */
    }

    .navbar-toggler {
        height: 40px; /* Ajusta la altura del icono */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .navbar-brand{
        width: 28%;
    }
    .footer-links, .legal-links{
        display: grid!important;
        /* flex-direction: column;
        gap: 1rem; */
    }
    .feature h3{
        font-size: 1.6rem;
    }
    .hero-image{
        position: absolute;
        top: 60%;
    }
}
@media (max-width: 1400px) {
    .navbar-nav {
        gap: 0.3rem; /* Reduce el espacio entre los elementos del menú */
    }

    .navbar .nav-group {
        justify-content: center; /* Centra el grupo de navegación principal */
    }

    .navbar .nav-group-right {
        margin-left: 1rem; /* Ajusta la separación de la parte derecha del menú */
    }

    .navbar .nav-link {
        font-size: 13px; /* Reduce el tamaño del texto */
        padding: 0.3rem 0.6rem; /* Ajusta el padding para evitar que los elementos se encimen */
    }

    .navbar-brand img {
        max-height: 40px; /* Reduce ligeramente el tamaño del logo */
    }

    .navbar-toggler {
        height: 40px; /* Ajusta la altura del icono de hamburguesa */
    }
}

@media (max-width: 1200px) {
    .navbar-nav {
        gap: 0.1rem; /* Reduce el espacio entre los elementos del menú */
    }

    .navbar .nav-group {
        justify-content: center; /* Centra el grupo de navegación principal */
    }

    .navbar .nav-group-right {
        margin-left: 1rem; /* Ajusta la separación de la parte derecha del menú */
    }

    .navbar .nav-link {
        font-size: 10px; /* Reduce el tamaño del texto */
        padding: 0.3rem 0.6rem; /* Ajusta el padding para evitar que los elementos se encimen */
    }

    .navbar-brand img {
        max-height: 40px; /* Reduce ligeramente el tamaño del logo */
    }

    .navbar-toggler {
        height: 40px; /* Ajusta la altura del icono de hamburguesa */
    }
}
/* Transiciones suaves */
* {
    transition: all 0.3s ease-in-out;
}

.hero {
    background: url('../image/banner.png') center/cover no-repeat;
    color: white;
    height: 100vh;
    display: flex;
    align-items: center;
}

/* Mismo ancho que el navbar */
.hero .container {
    max-width: 1400px; /* Ajuste para que coincida con el navbar */
}

/* Imagen responsiva */
.hero-image {
    max-width: 150px;
    height: auto;
    opacity: 0.9;
}

/* Ajuste del texto */
.hero-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.hero-text {
    font-size: 1.2rem;
    max-width: 80%;
}

/* ✅ Ajustes responsivos */
@media (max-width: 768px) {
    .hero {
        height: auto;
        padding: 10rem 1rem;
    }

    .hero .row {
        flex-direction: column;
        text-align: center;
    }

    .hero-image {
        max-width: 120px;
        margin-bottom: 1rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-text {
        font-size: 1rem;
        max-width: 100%;
    }
    .feature h3{
        font-size: 1.6rem;
    }
}

@media (max-width: 430px) {
    .feature h3{
        font-size: 1.6rem!important;
    }
}



/* Sección Our Services */
.services-section {
    background: black;
    color: white;
    padding: 4rem 8%;
    position: relative;
}

/* Título Our Services (Alineado a la primera línea azul) */
.section-title {
    /* font-size: 1.5rem; */
    font-weight: bold;
    margin-bottom: 5rem;
    text-align: left;
}

/* Contenedor de servicios */
.services-section .container {
    max-width: 1900px;
    margin: auto;
}

.service-box h2 {
    font-size: 2rem;
    font-weight: bold;
    margin: 50px 0px;
    min-height: 100px; /* Ajusta esta altura según necesites */
    display: flex;
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente si es necesario */
    text-align: center;
}

/* Asegurar que todas las cajas de servicio tengan la misma altura */
.service-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Asegura que el contenido inicie alineado */
    min-height: 100%; /* Permite que todas las cajas tengan la misma altura */
}
.service-box h3 {
    font-size: 1.5rem; /* Tamaño del título */
    font-weight: bold;
    min-height: 1rem; /* Establece una altura mínima para los títulos */
    margin-bottom: 4rem; /* Espaciado uniforme con el párrafo */
    display: flex;
    align-items: center;
}


.service-box p {
    font-size: 0.8rem;
    line-height: 1.6;
    margin: 0rem 1rem 1rem 0; /* Espacio entre párrafos */
}

/* Agregar línea vertical azul en todas las columnas excepto la última */
@media (min-width: 992px) {
    .row {
        display: flex;
        align-items: stretch;
    }
    .col-lg-3:not(:last-child) .service-box {
        border-right: 2px solid rgba(0, 174, 239, 0.7); /* Línea azul en columnas excepto la última */
    }
    /* .service-box{
        padding: 0.5rem;
    } */
}

/* Ajustes generales para la sección How it works */
.how-it-works {
    color: black;
    background: white;
    padding: 4rem 8%;
    text-align: left;
}

.how-it-works p.quote {
    color: #00AEEF;
    font-weight: bold;
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 3rem;
}

/* Contenedor principal */
.how-it-works .container {
    max-width: 1200px;
    margin: auto;
}

/* Ajustes de título y subtítulo */
.how-it-works h3 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.2rem;
}

.how-it-works h2 {
    /* font-size: 1.5rem;  */
    font-weight: bold;
    margin-bottom: 1.2rem; /* Espaciado ajustado */
}

/* Alineación de los pasos */
.step {
    display: flex;
    align-items: center; /* Asegurar alineación vertical */
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.step img {
    width: 50px; /* Aumentado para que coincida con la altura del texto */
    height: 50px; /* Manteniendo la proporción */
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.3rem;
}

.step-content p {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 0.3rem;
}

/* Ajuste del gráfico */
.chart {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    max-width: 80%;
    margin: auto;
}

.chart img {
    width: 100%;
    height: auto;
}

/* Responsive ajustes */
@media (max-width: 991px) {
    .how-it-works .container {
        text-align: center;
    }
    .step {
        flex-direction: column;
        align-items: center;
    }
    .step img {
        margin-bottom: 0.8rem;
    }
    .chart {
        max-width: 75%;
    }
}





/* Sección Why Globalanz */
.why-globalanz {
    background: white;
    color: black;
    padding: 4rem 8%;
}

/* Título */
.why-globalanz h2 {
    /* font-size: 2rem; */
    font-weight: bold;
    text-align: left;
    margin-bottom: 3rem;
}

/* Contenedor de las tarjetas */
.features-container {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* Tarjetas individuales */
.feature {
    background: black;
    color: white;
    flex: 1;
    padding: 2rem;
    border-right: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea los textos a la izquierda */
    justify-content: flex-start;
    min-height: 250px;
    text-align: left; /* Asegura alineación izquierda */
}

/* Eliminar el borde de la última tarjeta */
.feature:last-child {
    border-right: none;
}

/* Contenedor del icono + título */
.feature .icon-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 2rem;
}

.feature .text-container {
    padding-bottom: 3rem;
}

/* Íconos */
.feature img {
    width: 23%; /* Se reduce un poco para igualar */
    height: auto;
}

/* Títulos de cada feature */
.feature h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

/* Texto de cada feature */
.feature p {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 90%;
    margin-top: 0; /* Evita espacio innecesario */
}

/* Ajustes responsivos */
@media (max-width: 991px) {
    .features-container {
        flex-direction: column;
        gap: 1rem;
    }

    .feature {
        border-right: none;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
        min-height: auto;
        padding: 1.5rem;
    }

    .feature:last-child {
        border-bottom: none;
    }
}





/* Sección Data & Privacy */
.data-privacy-section {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: black;
    padding: 4rem 8%;
    gap: 3rem; /* Espacio entre la imagen y el texto */
}

/* Contenedor de la imagen */
.data-privacy-section .image-container {
    flex: 1;
    max-width: 45%; /* Ajuste del ancho para no ocupar más de lo necesario */
}

.data-privacy-section .image-container img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Contenedor del texto */
.data-privacy-section .text-container {
    flex: 1;
    max-width: 55%;
}

/* Encabezado */
.data-privacy-section h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Resaltado de texto en azul */
.data-privacy-section h2 span {
    color: #00AEEF;
}

/* Subtítulo */
.data-privacy-section p {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

/* Botón */
.data-privacy-section .btn-primary {
    background: #00AEEF;
    border: none;
    padding: 0.8rem 1.8rem;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: inline-block;
    text-decoration: none;
}

.data-privacy-section .btn-primary:hover {
    background: #008ecf;
}

/* Ajustes responsivos */
@media (max-width: 991px) {
    .data-privacy-section {
        flex-direction: column;
        text-align: center;
    }

    .data-privacy-section .image-container {
        max-width: 100%;
    }

    .data-privacy-section .text-container {
        max-width: 100%;
        padding: 1.5rem;
    }

    .data-privacy-section h2 {
        font-size: 2rem;
    }

    .data-privacy-section p {
        font-size: 1.2rem;
    }

    .data-privacy-section .btn-primary {
        padding: 0.7rem 1.5rem;
    }
}

.tech-stack {
    background: #00AEEF;
    padding: 4rem 5%; /* Aumenta el padding para más espacio arriba y abajo */
    text-align: center;
    color: white;
}

.tech-stack h3 {
    font-size: 1.2rem;
    margin-bottom: 2rem; /* Aumenta el margen inferior para más separación */
    font-weight: bold;
}

.tech-stack .logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem; /* Aumenta el espacio entre los logos */
    padding: 2rem 0; /* Más separación en la parte superior e inferior */
}

.tech-stack .logos img {
    max-height: 60px; /* Aumenta el tamaño de los logos */
    width: auto;
}

/* RESPONSIVE: En pantallas pequeñas, apilar los logos verticalmente con más separación */
@media (max-width: 768px) {
    .tech-stack {
        padding: 5rem 5%; /* Más espacio en pantallas pequeñas */
    }

    .tech-stack h3 {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .tech-stack .logos {
        flex-direction: column; /* Apilar los logos */
        gap: 6.5rem; /* Más espacio entre logos */
    }

    .tech-stack .logos img {
        max-height: 70px; /* Aumenta ligeramente el tamaño para mejor visibilidad */
    }
}



.contact-section {
    background: white;
    color: black;
    padding: 3rem 6%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

/* Ajuste del contenedor del mapa */
.contact-section .map-container {
    flex: 1;
    max-width: 45%;
    display: flex;
    justify-content: center;
}

.contact-section .map-container iframe {
    width: 90%;
    height: 350px;
    border-radius: 8px;
    border: none;
}

/* Ajuste del formulario */
.contact-section .form-container {
    flex: 1;
    max-width: 50%;
    padding: 1.5rem;
}

.contact-section h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.8rem;
}

.contact-section p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.contact-section .form-control {
    width: 100%;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    padding: 0.7rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Botón */
.contact-section .btn-primary {
    background: #00AEEF;
    border: none;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
    font-weight: bold;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
}

/* Sección de información adicional */
.contact-section .info {
    margin-top: 1.5rem;
}

.contact-section .info h4 {
    font-weight: bold;
    margin-bottom: 0.3rem;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .contact-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 3rem 5%;
    }

    .contact-section .map-container {
        max-width: 100%;
    }

    .contact-section .map-container iframe {
        width: 100%;
        height: 400px;
    }

    .contact-section .form-container {
        max-width: 100%;
    }

    .contact-section .form-control {
        font-size: 0.9rem;
        padding: 0.6rem;
    }

    .contact-section .btn-primary {
        font-size: 0.9rem;
        padding: 0.6rem;
    }
}


.footer {
    background: black;
    color: white;
    text-align: center;
    padding: 3rem 1rem;
}

/* Ajuste del logo para que no sea gigante y bien centrado */
.footer-logo img {
    width: 150px; /* Tamaño adecuado del logo */
    height: auto;
    margin-bottom: 2.5rem; /* Más espacio debajo del logo */
}

/* Estilos del menú */
.footer-links, .legal-links {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem; /* Más espacio debajo del menú */
}

.footer-links a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 1px;
}

/* Ícono de LinkedIn con más separación */
.social-icon {
    margin-top: 3rem; /* Más separación desde el menú */
    margin-bottom: 2rem; /* Más espacio antes de las políticas */
}

.social-icon img {
    width: 45px;
    height: auto;
}

/* Enlaces legales con más espacio */
/* .legal-links {
    margin-top: 2.5rem;
    font-size: 0.9rem;
} */

.legal-links a {
    color: white;
    text-decoration: none;
    margin: 0 1.5rem; /* Más separación entre los links */
}

.legal-links a:hover {
    text-decoration: underline;
}