/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    /*background-color: #EDEFEB;*/
   /* background-color: #A7D8F2;*/
    text-align: center;
}

/* Header Styles */
header {
    /*background-color: #48B0D9;*/
    background-color: #A7D8F2;
    padding: 15px 0;
}

/* Contenedor centrado */
.nav-container, .bod, .about, .clients, .contact-container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  /*  background-color: #A7D8F2;*/
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 60px;
}

/* Menú de navegación */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    z-index: 1000;
}

nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
}

nav ul li a {
    text-decoration: none;
    color: white;
    /*background-color: #48B0D9;*/
    font-size: 20px;
    /*background-color: #A7D8F2;*/
     background: rgba(167, 216, 242, 0.5); /* Color con transparencia */
    padding: 10px 15px;
    border-radius: 20px;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    /*background-color: #003f7f;*/
    background-color: #48B0D9;
}

/* Menú hamburguesa */
.checkbtn {
    display: none;
    font-size: 30px;
    cursor: pointer;
    color: white;
    z-index: 1100;
    position: relative;
}

#check {
    display: none;
}

/* Estilos para móviles */
@media (max-width: 768px) {
    .checkbtn {
        display: block;
        position: absolute;
        right: 20px; /* Ajusta la posición del icono ☰ */
        top: 15px; /* Alinea correctamente */
        z-index: 1100; /* Asegura que esté por encima */
        font-size: 30px; /* Asegura que sea visible */
    }

    nav ul {
        position: absolute;
        top: 80px; /* Baja el menú para evitar superposición */
        left: 0;
        width: 100%;
        background-color: #48B0D9;
        display: none;
        flex-direction: column;
        text-align: center;
        padding: 15px 0;
        z-index: 1001; /* Se mantiene sobre el contenido */
    }

    nav ul li {
        margin: 15px 0; /* Mayor espacio entre elementos */
    }

    #check:checked ~ ul {
        display: flex;
    }
}
/* About & Hero Sections */
.bod .content, .about .text, .clients .text, .contact-info {
    flex: 1;
    max-width: 500px;
}

.bod img, .about img, .clients img, .contact-info img {
    flex: 1;
    max-width: 500px;
}

.bod .btn, .about .btn, .clients .btn {
    display: inline-block;
    background-color: #48B0D9;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    margin-top: 10px;
}

/* Clients Section */
.clients h1{
    color: #048ABF;
}
.clients {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 20px 0;
}

.clients .logos {
    display: flex;
    justify-content: center;
    
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.clients .logos img {
    max-width: 150px;
}

.clients ul {
    list-style-position: inside; /* Asegura que los iconos (✔) se mantengan visibles */
    text-align: left; /* Justifica los elementos a la izquierda */
    margin: 20px auto; /* Centra la lista */
    max-width: 800px; /* Define un ancho máximo para no desbordar */
    padding-left: 0; /* Elimina el padding predeterminado */
}

.clients ul li {
    text-align: left; /* Asegura que el texto de cada elemento de la lista esté alineado a la izquierda */
    font-size: 18px; /* Ajusta el tamaño del texto */
    line-height: .5; /* Mejora la legibilidad */
    padding: 5px 0; /* Añade espaciado entre elementos */
}

.clients ul p {
    text-align: left; /* Asegura que el texto de cada elemento de la lista esté alineado a la izquierda */
    font-size: 18px; /* Ajusta el tamaño del texto */
    line-height: 1.5; /* Mejora la legibilidad */
    padding: 1px 0; /* Añade espaciado entre elementos */
}


.about ul {
    list-style-position: inside; /* Asegura que los iconos (✔) se mantengan visibles */
    text-align: left; /* Justifica los elementos a la izquierda */
    margin: 20px auto; /* Centra la lista */
    max-width: 800px; /* Define un ancho máximo para no desbordar */
    padding-left: 0; /* Elimina el padding predeterminado */
}

.about ul p {
    text-align: left; /* Asegura que el texto de cada elemento de la lista esté alineado a la izquierda */
    font-size: 18px; /* Ajusta el tamaño del texto */
    line-height: 1; /* Mejora la legibilidad */
    padding: 5px 0; /* Añade espaciado entre elementos */
}
.about .text p {
    text-align: left; /* Asegura que el texto de cada elemento de la lista esté alineado a la izquierda */
    font-size: 18px; /* Ajusta el tamaño del texto */
    line-height: 1; /* Mejora la legibilidad */
    padding: 5px 0; /* Añade espaciado entre elementos */
}


/* Contact Section */
.contact-container {
    padding: 40px 0;
    gap: 20px;
}

/* Imagen de contacto */
.contact-info img {
    max-width: 100%;
    border-radius: 10px;
}

/* Formulario */
.contact-form {
    flex: 1;
    max-width: 500px;
    text-align: left;
}

.contact-form h2 {
    margin-bottom: 15px;
    font-size: 35px;
    color: #333;
}

.contact-form .form-group {
    display: flex;
    gap: 10px;
}

.contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-form .btn {
    display: inline-block;
    background-color: #48B0D9;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: none;
}




.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 40px 0;
}

.contact-form {
    max-width: 600px;
    width: 100%;
    /*background-color: #1A1A1A;*/
    padding: 20px;
    border-radius: 10px;
}


/* Grid Configuration */
.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.div4, .div5, .div6 {
    grid-row-start: 2;
}

/* Grid Configuration */
/* Grid Configuration */
.grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center; /* Alinea todos los elementos al centro */
}

/* Asegura que los elementos dentro de cada grid-item también estén alineados al centro */
.grid-layout > div {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra imágenes y otros elementos */
    justify-content: center;
}

/* Asegura que las imágenes dentro de la cuadrícula estén centradas */
.grid-layout img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centra las imágenes */
}

/* Mantiene el texto alineado a la izquierda solo para los párrafos */
.grid-layout p {
    text-align: left;
    width: 90%; /* Ajusta el ancho para que no sea tan largo */
    margin-top: 10px; /* Espaciado para separación */
}

/* Distribución de elementos */
.grid-item1 {
    grid-column: span 3;
}

.grid-item2, .grid-item3, .grid-item4 {
    grid-row: span 2;
}

.grid-item5, .grid-item6, .grid-item7 {
    grid-row-start: 3;
}

.grid-item8, .grid-item9, .grid-item10 {
    grid-row-start: 4;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-container, .bod, .about, .clients, .contact-container {
        flex-direction: column;
        text-align: center;
    }

    .clients .logos {
        justify-content: center;
    }

    .contact-info img {
        max-width: 100%;
    }

    .contact-form {
        text-align: center;
    }

    .contact-form .form-group {
        flex-direction: column;
    }
}






/* 🔹 Contenedor del texto debajo del carrusel */
.carousel-text-container {
    display: flex;
    justify-content: flex-start; /* Alinea a la izquierda */
    margin: 15px auto; /* Centra horizontalmente */
    width: 60%; /* Mantiene el ancho en pantallas grandes */
}

/* 🔹 Estilo del texto */
.carousel-text {
    display: none;
    font-size: clamp(16px, 2vw, 20px); /* Se adapta al tamaño de pantalla */
    font-weight: bold;
    color: white; /* Texto en blanco */
    text-align: left; /* Alineado a la izquierda */
    word-wrap: break-word; /* Evita cortes de palabras */
}

/* Cuando el texto está activo */
.carousel-text.active {
    display: block;
    color: white;
}

/* 🔹 Contenedor responsivo de texto en cuadrícula */
.text-grid-carrusel {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en escritorio */
    gap: 10px; /* Espaciado uniforme */
    text-align: left; /* Alinea el texto a la izquierda */
    justify-content: center;
    max-width: 900px; /* Limita el ancho */
    margin: 0 auto; /* Centra el contenedor */
}

/* 🔹 RESPONSIVE: Ajuste para móviles */
@media (max-width: 768px) {
    .carousel-text-container {
        width: 90%; /* Asegura que el texto no quede fuera de la pantalla */
        text-align: center; /* Centra el texto en móviles */
    }

    .carousel-text {
        font-size: clamp(14px, 4vw, 18px); /* Se adapta mejor en móviles */
        text-align: center;
    }

    .text-grid-carrusel {
        grid-template-columns: 1fr; /* Pone el texto en una sola columna */
        text-align: center; /* Centra los elementos */
    }
}




@media (max-width: 768px) {
    .bod, .about {
        display: flex;
        flex-direction: column; /* Asegura que los elementos se apilen */
        align-items: center;
        justify-content: center;
        text-align: center; /* Centra el texto */
        width: 100%;
        padding: 20px 0;
    }

    .bod .content, .about .content,  {
        max-width: 90%; /* Ajusta el ancho del texto */
        text-align: left; /* Mantiene el texto alineado a la izquierda */
    }

    .bod img, .about img {
        max-width: 100%; /* La imagen se ajusta al ancho de la pantalla */
        height: auto;
        margin-top: 15px;
    }
}