body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: 'Arial', sans-serif;
    scroll-behavior: smooth;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #080214;
    /* Fondo oscuro */
    color: #ffffff;
    /* Texto claro */
    padding: 20px 10%;
}

.logo {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
}

.nav-links li {
    padding: 0px 20px;
}

.nav-links a {
    transition: color 0.3s ease-out;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 16px;
}

.nav-links a:hover {
    color: #c0b283;
    /* Color de acento */
}

.burger {
    display: none;
}


@media screen and (max-width: 768px) {
    .navbar {
        padding: 20px;
        /* Valor fijo para evitar desbordamiento */
    }
}

@media screen and (max-width: 768px) {
    .nav-links {
        position: fixed;
        right: 0px;
        height: 100vh;
        top: 0;
        background: linear-gradient(135deg, #0A0F0D 0%, #003973 50%, #007BFF 100%);
        flex-direction: column;
        align-items: center;
        width: 100%;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
        padding-top: 30px;
        /* Espacio para el navbar */
    }

    .nav-links li {
        padding: 5px 0;
    }

    .nav-links.active {
        transform: translateX(0%);
    }

    .burger {
        display: block;
        z-index: 1001;
        cursor: pointer;
    }
}

/* Base del burger */
.burger div {
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    /* Color inicial del burger */
    margin: 5px;
    transition: all 0.3s ease;
    z-index: 1001;
}

/* Estilos cuando el navbar está activo (burger en forma de 'X') */
.burger.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
    background-color: #c0b283;
    /* Color de la 'X' */
}

.burger.toggle .line2 {
    opacity: 0;
}

.burger.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
    background-color: #c0b283;
    /* Color de la 'X' */
}


.swiper-slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 86vh;
    background-color: #121212;
    overflow: hidden;
}


.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-align: center;
    width: 90%;
    z-index: 25;
    /* Asegura que el contenido no sea demasiado ancho en pantallas grandes */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo semi-transparente */
    border-radius: 8px;
    /* Opcional: Añade bordes redondeados para suavizar el diseño */
}

.banner-content h1,
.banner-content p {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    /* Sombras para mejorar la legibilidad */
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 86vh;
    position: relative;
    
        z-index: 1;
    
}

.swiper-slide::before {
    content: '';
    position: absolute;
    top: -50px;
    /* Ajusta según necesites */
    left: -50px;
    /* Extiende más allá del borde de la imagen */
    right: -50px;
    /* Extiende más allá del borde de la imagen */
    bottom: -50px;
    /* Ajusta según necesites */
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 30%, #000 90%);
    z-index: 0;
}

@media (max-width: 768px) {
    .swiper-slide img {
        height: 50vh;
        width: 80%;
        border-radius: 8px;
        /* Altura más adecuada para dispositivos móviles */
    }

    .banner-content {
        top: 40%;
        left: 50%;
        width: 80%;
        /* Aumenta la anchura en dispositivos móviles para mejor legibilidad */
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.7);
        /* Más opacidad para fondos complicados */
    }
    body{
        overflow-x: hidden;
        
    }

        
}

.section-nosotros {
    padding: 60px 10%;
    background-color: #080214;
    /* Fondo oscuro general */
    text-align: center;
    color: #d7e2e7;
}

.section-nosotros h2 {
    color: #81D4FA;
    /* Color de acento */
    margin-bottom: 40px;
}

.cards-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

.card h3{
    color: #81D4FA !important;
    margin-bottom: 15px;

}

.card {
    background-color: #080214;
    border: 2px solid  #007bff;
    /* Fondo oscuro para las tarjetas */
    padding: 20px;
    border-radius: 8px;
    /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    /* Sombra para profundidad */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Transición suave para el efecto de escala y sombra */
    width: calc(33% - 20px);
    /* Tres tarjetas por fila, ajustando el gap */
    margin: 10px 0;
    /* Espacio vertical entre tarjetas */
    cursor: pointer;
    /* Cambia el cursor para indicar que es interactuable */
    position: relative;
    /* Necesario para la animación de la sombra */
}

.card h3 {
    color: #c0b283;
    margin-bottom: 15px;
}

.card:hover {
    transform: scale(1.05);
    /* Efecto de escala al pasar el mouse */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
    /* Sombra más pronunciada al hacer hover */
}

@media (max-width: 768px) {
    .cards-container {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 80%;
        /* Tarjetas más anchas en dispositivos móviles para una mejor visualización */
    }
}

/* Animaciones para las tarjetas al cargar la página */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    opacity: 0;
    /* Inicia las tarjetas en opacidad 0 para la animación */
    animation: fadeInUp 0.5s ease-out forwards;
    /* Aplica la animación */
    animation-delay: 0.2s;
    /* Retraso inicial para la secuencia */
}

/* Animación secuencial para cada tarjeta */
.card:nth-child(1) {
    animation-delay: 0.2s;
}

.card:nth-child(2) {
    animation-delay: 0.4s;
}

.card:nth-child(3) {
    animation-delay: 0.6s;
}

.btn {
    display: inline-block;
    background-color: #c0b283;
    /* Color de acento del botón */
    color: #000000;
    /* Color del texto */
    padding: 10px 20px;
    /* Espaciado interno del botón */
    border-radius: 5px;
    /* Bordes redondeados */
    text-decoration: none;
    /* Remueve el subrayado del enlace */
    font-weight: bold;
    /* Texto en negrita */
    transition: background-color 0.3s, color 0.3s;
    /* Transición suave para hover */
}

.btn:hover {
    background-color: #d4b783;
    /* Color de hover ligeramente más claro */
    color: #ffffff;
    /* Cambia el color del texto en hover */
}

/* Continúa según el número de tarjetas que tengas */
.servicios-destacados {
    background-color: #08141e;
    /* Fondo oscuro para la sección */
    color: #ffffff;
    text-align: center;
    padding: 60px 10%;
}

.servicios-destacados h2 {
    color: #c0b283;
    /* Color de acento */
    margin-bottom: 40px;
}

.servicios-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columnas en pantallas grandes */
    gap: 20px;
}

.servicio-card {
    background-color: #fff;
    /* Color de fondo más claro para las tarjetas */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.servicio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8);
}

.icono-servicio img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
    border-radius: 10px;
}

.servicio-card h3 {
    color: #000850;
}

.servicio-card p {
    font-size: 1rem;
    color: #06002f;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .servicios-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas para tabletas y pantallas medianas */
    }
}

@media (max-width: 768px) {
    .servicios-container {
        grid-template-columns: 1fr;
        /* 1 columna para móviles */
    }
}
.casos-exito {
    padding: 40px 10px;
    background-color: #080214;
    /* Nuevo color de fondo más suave */
    color: #ffffff;
    text-align: center;
}

.proyectos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 0 10px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.proyecto-card {
    background-color: #adbde6;
    /* Contraste sutil con el fondo */
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    /* Prepara las tarjetas para la animación */
    animation: fadeInUp 0.5s ease-out forwards;
    /* Cada tarjeta tendrá un delay específico, ajustado en el loop de nth-child abajo */
}

.proyecto-card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    /* Mantiene los bordes suavizados */
}

.proyecto-card h3 {
    color: #07045e;
    margin: 10px 0;
}

.proyectos-container.proyecto-card p {
    color: #07045e;
    font-size: 1rem;
    margin-bottom: 20px;
}

.proyecto-card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    /* Sombra más definida al hacer hover */
}

/* Animación secuencial para cada tarjeta */
.proyecto-card:nth-child(1) {
    animation-delay: 0.2s;
}

.proyecto-card:nth-child(2) {
    animation-delay: 0.4s;
}

.proyecto-card:nth-child(3) {
    animation-delay: 0.6s;
}


.modal1 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #add8e6;
    /* Azul claro */
    padding: 20px;
    z-index: 1000;
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    /* Opcional: añadir sombra para resaltar el modal */
}

.modal-header,
.modal-body {
    padding: 10px;

}

.title{
    text-align: center;
    color: #07045e;
    font-size: 1.5rem;
    margin-bottom: 20px;

}

.modal-body p {
    color: #07045e;
    font-size: 1.2rem;
    margin-bottom: 20px;

}

.close-button {
    cursor: pointer;
    background: none;
    border: none;
    color: #020269;
    font-size: 1.5rem;
    position: absolute;
    /* Posicionamiento absoluto dentro del modal */
    top: 10px;
    /* Ajuste fino de la posición hacia la parte superior */
    right: 10px;
    /* Ajuste fino de la posición hacia la derecha */
}

#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 500;
}

@media screen and (max-width: 768px) {
    .modal {
        width: 95%;
        /* Ajuste para una mejor visibilidad en dispositivos móviles */
    }
}

.contacto {
    padding: 40px 0;
    background-color: #08141e;
    color: #ffffff;
    text-align: center;
}

.formulario-contacto {
    margin: auto;
    max-width: 40vw;
    /* Aumentado para que el formulario sea un poco más ancho */
    padding-bottom: 2rem;
}

#contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#contact-form input,
#contact-form textarea {
    background-color: #ffffff;
    /* Cambiado a blanco */
    color: #000000;
    /* Texto en negro para contraste */
    padding: 10px;
    border: 1px solid #505050;
    border-radius: 5px;
}

#contact-form button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#contact-form button:hover {
    background-color: #0056b3;
}

.mapa {
    margin: 5rem 5rem;
    /* 5rem de los bordes para centrar el mapa */
    max-width: 90vw;
    /* Ancho del mapa ajustado al 90% */
}

.mapa iframe {
    width: 100%;
    /* El iframe llena el contenedor .mapa */
    height: 450px;
    border-radius: 8px;
    /* Bordes redondeados para el mapa */
}

@media (max-width: 768px) {
    .formulario-contacto {
        max-width: 90vw;
        /* Formulario más ancho en pantallas pequeñas */
    }

    .mapa {
        margin: 2rem 1rem;
        /* Ajusta los márgenes en dispositivos móviles */
    }
}

.footer {
    position: relative;
    /* Set to relative to position the overlay */
    background-image: url('banner.webp');
    background-size: cover;
    background-position: center;
    padding: 40px 20px;
    color: #ffffff;
    /* Text color */
    z-index: 1000;
    /* Adjust the z-index to be above the content */
}

.footer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
                rgba(10, 15, 13, 0.7) 0%,
                rgba(0, 57, 115, 0.7) 50%,
                rgba(0, 123, 255, 0.7) 100%);
    /* Dark overlay */
    z-index: -1;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
}

.footer-section {
    flex: 1 1 calc(25% - 30px);
    margin-bottom: 30px;
}

.footer-section h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.footer-section ul {
    list-style-type: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: #c0b283;
    /* Hover color */
}

@media (max-width: 768px) {
    .footer {
        padding: 20px;
    }

    .footer-section {
        flex: 1 1 50%;
    }

    .footer-section.about,
    .footer-section.services,
    .footer-section.portfolio,
    .footer-section.contact {
        flex: 1 1 100%;
    }
}

.testimonios {
    padding: 60px 0;
    background-color: #000;
    /* Fondo oscuro para mayor énfasis en las imágenes */
    color: #fff;
    text-align: center;
}

.swiper {
    width: 100%;
    height: 100vh;
    /* Altura completa para dar un efecto dramático */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Necesario para posicionar el texto sobre la imagen */
}

.testimonial-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 80%;
    margin: 0 auto;
}

.testimonial-image {
    width: 100%;
    height: 100vh;
    /* Imagen de fondo completa */
    object-fit: cover;
    /* Asegura que la imagen cubra el slide */
    opacity: 0.5;
    border-radius: 8px;
    /* Atenuar la imagen para que el texto resalte */
}

.testimonial-text,
.testimonial-author {
    position: absolute;
    /* Posicionamiento absoluto para superponer sobre la imagen */
    padding: 20px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo semitransparente para mejorar la legibilidad */
    color: #fff;
    font-size: 1.2rem;
    max-width: 600px;
    /* Limita el ancho del texto */
    z-index: 2;
}

.testimonial-author {
    margin-top: 15rem;
    font-size: 1rem;
}

/* Estilos para la navegación del swiper */
.swiper-button-prev,
.swiper-button-next {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos generales de los bullets de paginación */
.swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.8);
    /* Incrementa la opacidad para mejor visibilidad */
    width: 12px;
    /* Ajusta el tamaño según sea necesario */
    height: 12px;
    /* Ajusta la altura según sea necesario */
    opacity: 1;
    /* Asegura que los bullets sean visibles */
    border: 2px solid #2D2F33;
    /* Añade un borde para definir mejor los bullets contra el fondo */
}

/* Estilos para el bullet activo */
.swiper-pagination-bullet-active {
    background-color: #c0b283;
    /* Color de acento para el bullet activo, asegurando que destaque */
    opacity: 1;
    /* Mantiene el bullet activo completamente visible */
}

@media screen and (max-width: 768px) {
    .swiper-button-next,
        .swiper-button-prev {
            width: 20px;
            /* Reduce el ancho */
            height: 20px;
            /* Reduce la altura */
            background-size: 10px;
            
        }
            
    
}
#overlay-cookie {
    position: fixed;
    /* Posicionamiento fijo para cubrir toda la pantalla */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Color de fondo semitransparente */
    z-index: 999;
    /* Asegura que el overlay esté justo debajo del popup de cookies */
    display: none;
    /* Inicialmente oculto */
}

.cookie-consent-container {
    display: none;
    /* Inicialmente oculto */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #080214;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    max-width: 600px;
    text-align: center;
    z-index: 1500;
    border: 1px solid #81D4FA;
}

h2 {
    color: #d7e2e7;
}

.cookie-consent-container h2{
    color: #d9e4e9;

}

p {
    color: #CCCCCC;
}

.cookie-btn {
    padding: 10px 20px;
    background-color: #81D4FA;
    color: #0A0A0A;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    /* Espacio alrededor de los botones */
    font-weight: bold;
    text-transform: uppercase;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.cookie-btn:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

/*estilo modal config cookie*/

.config-modal {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    /* Fijo en pantalla */
    z-index: 16001;
    /* Por encima de otros contenidos */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Habilitar scroll si es necesario */
    background-color: rgba(0, 0, 0, 0.1);
    /* Color de fondo semitransparente */
}

.config-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    border: 2px solid #81D4FA;
    background-color: #080214;;
    /* Tono oscuro para el contenedor */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    /* Sombra para profundidad */
    color: #ffffff;
    /* Texto en blanco para contraste */
}

.config-container h2{
    color: #d9e4e9;

}

h2 {
    color: #e5edf1;
    /* Color azul claro para el título, para un mayor destaque */
    margin-bottom: 20px;
    /* Espaciado después del título */
}

h3 {
    margin-top: 20px;
    color: #BBDEFB;
    /* Tono de azul más suave para subtítulos */
}

label {
    display: block;
    margin-bottom: 10px;
    color: #E0E0E0;
    /* Asegurando que el texto sea legible en el fondo oscuro */
}

input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
    /* Indicador visual para interactividad */
}

button {
    padding: 10px 20px;
    background-color: #29B6F6;
    /* Un azul más vibrante para los botones */
    color: #0A0A0A;
    /* Texto oscuro para contraste */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    /* Transición suave para interactividad */
}

button:hover {
    background-color: #58A5F0;
    /* Color ligeramente más claro al hacer hover */
    transform: translateY(-2px);
    /* Efecto de "levantamiento" sutil al hacer hover */
}

@media (max-width: 768px) {
    .config-container {
        padding: 15px;
        margin: 20px auto;
        /* Ajustes para mejor visualización en móviles */
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 1002;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    background-color: #fefefe;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    color: #020269;
}

.modal-content span.close {
    float: right;
    font-size: 25px;
    cursor: pointer;
    color: #020269;
}

.modal-content span.close:hover {
    color: #c0b283;
}

.modal-content p {
    margin-bottom: 20px;
    color: #020269;
}

.modal-content h2{
    color: #020269;

}

.custom-notification {
    display: none;
    position: fixed;
    bottom: 10rem;
    right: 20px;
    background-color: #29b6f6;
    color: #030333;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    /* Asegúrate de que el z-index sea suficientemente alto */
    transition: opacity 0.5s, bottom 0.5s;
    opacity: 0;
    /* Inicialmente invisible */
}

h2{
    color: #fff;
}

#backToTop {
    position: fixed;
    /* Cambiado a fixed para que sea visible mientras se hace scroll */
    right: 20px;
    bottom: 20px;
    padding: 10px 15px;
    background-color: #29b6f6;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: none;
    /* Inicialmente no visible */
}

#backToTop:hover {
    background-color: #0277bd;
}