*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

html{
    font-size: 62.5%;
    font-family: "Roboto", sans-serif;
}

.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  

:root{
    --white-color: #ffffff;
    --second-white-color: #fafafa;
    --principal-black-color: #0d131a;
    --second-black-color: #0d131a;
    --button-color: #fdc609;
    --principal-gris-color: #b8c0cc;
    --second-gris-color: #88888d;
}

/*Header*/


.main__section--presentacion--header{
    display: flex;
    align-items: center;
    justify-content: space-between; /* Alinea los elementos al inicio, manteniendo el logo a la izquierda */
    font-size: 1.6rem;
    position: absolute; /* Hace que el header sea fijo */
    top: 0; /* Alinea el header en la parte superior */
    width: 100%; /* Asegura que el header tenga un ancho completo */
    z-index: 1000;
    height: 100px;
    height: 18vh;
    padding: 0 40px 0 40px;
}
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.contenedor-logo img {
    width: 180px; 
    height: 80%; 
}

nav {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
}

.nav__a{
  
    display: flex;
    justify-content: center;
    color: var(--white-color);
    font-size: 1.8rem;
    font-weight: bold;
}

nav a {
    margin: 0 15px;
    text-decoration: none;
    color: var(--principal-black-color);
}

nav a:hover {
    color: var(--button-color);
}

nav a.active {
    background-color: var(--button-color);
    align-items: center;
    color: var(--white-color);
    width: 100px;
    height: 100%;
}

.mobileMenu{
    display: none;
}



/* This is the main section */
/* 
/* main {
    margin-top: 108px; /* Ajusta este valor según la altura real de tu header 
}  */

/*This part is main section presentation*/

.main__section--presentacion {
    padding: 0 90px 40px 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100vh;
    background-position: center;
    background-size: cover; 
     background-repeat: no-repeat;
    background-image: url("https://i.ibb.co/mzVBdCQ/Whats-App-Image-2024-03-01-at-8-36-02-AM.jpg");
    position: relative;
}

.header-fijo {
    background-color: white;
    color: black; /* Este estilo aplicará a los textos directamente dentro del header, pero no necesariamente a los links */
}

.header-fijo .nav__a {
    color: var(--principal-black-color); /* Asegura que los links dentro del nav tengan texto negro */
    font-weight: 300;
    font-size: 1.6rem;
}


.main__section--presentacion--background{
    width: 100%;
    height: 100vh;
    background-color: #003366;
    top: 0;
    position: absolute;
    opacity: 0.2;
    z-index: 0;
}

.wrappa__son{
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.main__section--presentacion--son{
    margin-bottom: 20px;
    z-index: 8; 
}

.main__section--presentacion-logo{
    width: 80%;
    height: 60vh;
    margin-bottom: 10px;
}

.main__section--presentacion h1 {
    font-size: 6.4rem;
    color: var(--white-color);
}

.main__section--presentacion p {
    font-size: 2.2rem;
    color: var(--white-color);
    line-height: 1.6;
    font-weight: 500;
}

.contact-button {
    display: inline-block;
    background-color: var(--button-color);
    color: var(--second-white-color);
    padding: 20px 80px; /* Ajustado para un alto de 60px y ancho de 30px de texto */
    text-decoration: none;
    border-radius: 5px; /* Opcional: añade redondeo a tu botón */
    font-size: 1.8rem;
    margin-bottom: 60px;
    border-radius: 5px; /* Opcional: añade redondeo a tu botón */
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 500;
}

.main__section--presentacion .contact-button:hover {
    background-color: var(--second-white-color); /* Invierte los colores */
    color: var(--button-color);
    transform: scale(1.1); /* Aumenta el tamaño ligeramente */
}

.youtube-video{
    width: 60%;
    height: 60vh;
}

/*Here star main__section--quienessomos*/


.main__section--quienessomos {
    padding: 45px 90px 90px 90px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra el contenido verticalmente si deseas */
}

.main__section--quienessomos__title {
    font-size: 4.8rem;
    color: var(--principal-black-color);
    text-align: center;
}

.main__section--quienessomos__description {
    font-size: 1.6rem;
    width: 70%;
    color: var(--principal-black-color);
    margin-top: 20px; /* Espacio entre el título y el párrafo */
    text-align: center; /* Centra el texto del párrafo */
    line-height: 1.6;
}

.main__section--quienessomos__image {
    width: 80%;
    height: 400px;
    object-fit: cover; /* Asegura que la imagen cubra el espacio asignado sin deformarse */
    margin-top: 20px; /* Espacio entre el párrafo y la imagen */
}

/* Responsividad */
@media (max-width: 768px) {
    .main__section--quienessomos {
        padding: 0 20px 20px 20px; /* Ajuste de padding para dispositivos más pequeños */
    }

    .main__section--quienessomos__image {
        width: 100%; /* La imagen ocupa todo el ancho en dispositivos más pequeños */
        height: auto; /* Altura automática para mantener la proporción */
    }
}


/*Here star main section nuestros servicios */

.main__section--nuestros-servicios {
    padding: 40px;
    position: relative;
    flex-direction: column;
    background-color: var(--button-color);
    width: 100%;
    
}

.main__section--nuestros-servicios__title{
    font-size: 3.6rem;
    color: var(--second-black-color);
    margin-bottom: 40px;

}

.ourService__wrappa{

    display: flex;
    gap: 20px;
    overflow: hidden;
    width: 100%;
}

.ourService__card{
    display: flex;
    height: 260px;
    width: 50%;
    min-width: 50%;
    gap: 20px;
}
.ourService__card--img{
    width: 40%;
}

.ourService__card--img img {
    object-fit: cover;
    width: 100%;
    height: 220px;
}

.ourService__information{
    width: 60%;
    padding-top: 20px;
}

.ourService__information--title{
    font-size: 2.2rem;
    color: var(--second-black-color);
    margin-bottom: 10px;
}

.ourService__information--p{
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--second-black-color);
}

/* Arrow code*/

.scroll-btn {
    display: none;
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: var(--second-white-color); /* Cambia esto según el esquema de colores de tu sitio */
    color: var(--button-color); /* Asume que tienes esta variable de color */
    border: none;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Botones circulares */
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scroll-btn:hover {
    transform: translateY(-50%) scale(1.1); /* Efecto de levitación y crecimiento */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada al hacer hover */
}

.main__section--nuestros-servicios:focus .scroll-btn {
    display: flex;
}

.scroll-btn.left {
    left: 10px; /* Ajusta según necesidad */
}

.scroll-btn.right {
    right: 10px; /* Ajusta según necesidad */
}

.ourService__wrappa {
    overflow-x: scroll; /* Permite desplazamiento horizontal */
    scroll-behavior: smooth;
    display: flex;
    gap: 20px;
}

/* Ocultar scrollbar para una apariencia limpia */
.ourService__wrappa::-webkit-scrollbar {
    display: none;
}

.ourService__wrappa {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* En lugar de utilizar :focus, usa :hover para revelar los botones */
.main__section--nuestros-servicios:hover .scroll-btn {
    display: flex;
}



/* Animation cards */



        /* Card section */

        .card{
            box-shadow: 8px 14px 38px rgb(39 44 49 / 6%), 1px 3px 8px rgb(39 44 49 / 3%);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin: 0 0 40px;
            padding: 20px 20px 20px 20px;
            min-height: 220px;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--second-white-color);
            position: relative;
            border-radius: 12px;
        }


/* Cuando el dispositivo tiene un ancho mayor a 920px */

        
        .card__a{
            position: relative;
            display: block;
            overflow: hidden;
            border-radius: 8px;
        }
        
        .card__img{
           width: 100%;
           height: 200px; 
           object-fit: cover;
           background: no-repeat 50%;
        }
        
        .card__info{
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        
        }
        
        .card__infoContent{
            position: relative;
            display: block;
        }
        
        .card__h2{
            margin: 15px 0 0;
            font-size: 2.2rem;
            color: #1B1A17;
            color: var(--principal-black-color);
            font-weight: 500;
            line-height: 2.85rem;
        }
        
        .card__description{
            font-size: 1.6rem;
            max-width: 56em;
            color: #1B1A17;
            color: var(--principal-black-color);
            font-weight: 300;
            margin-top: 15px;
        }
        
        .card__p{
            line-height: 2.4rem;
        }
        
        .card__author{
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        
        .card__authorAvatar{
            width: 36px;
            height: 36px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-image: url("https://i.ibb.co/N34xb91/Avatar.jpg");
            border-radius: 50%;
        }
        
        .card__authorInfo{
            display: flex;
            flex-direction: column;
            margin-left: 10px;
        }
        
        .card__authorName{
            color: #434952;
            color: var(--principal-text-color);
            font-size: 1.2rem;
            line-height: 1.8rem;
            font-weight: 600;
        }
        
        .card__authorData{
            color: #738A94;
            color: var(--description-perfil-color);
            font-size: 1.2rem;
            font-weight: 400;
        }



/* Here start empresas que confian en nosotros code */

.main__section--empresasQueConfian {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    height: 100px;
    padding: 0 80px 0 0;
    background-color: var(--white-color);
    margin-top: 20px;
    margin-bottom: 20px;
}

.empresas-fijo {
    margin-right: 30px; /* Espacio antes de la cinta corredora */
    color: var(--principal-black-color);
    font-size: 3rem;
    font-weight: 700;
    font-style: italic;
    z-index: 2;
    background-color: var(--white-color);
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 40px 0 40px;
    /* padding: 0 20px 0 40px; */
}

.empresas-fijo br {
  display: none;
}

.empresas-desplazamiento {
    display: inline-block;
    animation: desplazamiento 5s linear infinite; /* Ajusta la duración según la necesidad */
    color: var(--button-color);
    font-size: 2rem;
    font-weight: 700;
    z-index: 1;
}

.empresas-desplazamiento__span{
    display: inline-block;
    margin-right: 40px; /* Espacio entre nombres de empresas */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 240px;
    height: 60px;
}

.empresas-desplazamiento__span1{
    background-image: url("https://sf.ezoiccdn.com/ezoimgfmt/www.vectorlogo.es/wp-content/uploads/2022/06/logo-vector-gobernacion-de-antioquia.jpg?ezimgfmt=ng%3Awebp%2Fngcb1%2Frs%3Adevice%2Frscb1-1");
    
}

.empresas-desplazamiento__span3 {
    background-image: url("https://www.barranquilla.gov.co/wp-content/themes/barranquilla/assets/img/logo.svg");
    
}


.empresas-desplazamiento__span5 {
    background-image: url("https://www.edu.gov.co/images/logoedu.png");
    
}

.empresas-desplazamiento__span6 {
    background-image: url("https://iconape.com/wp-content/png_logo_vector/mindeporte-colombia.png");
    
}

.empresas-desplazamiento__span7 {
    background-image: url("https://www.enterritorio.gov.co/web/sites/default/files/vida1_1.png");
    
}


.empresas-desplazamiento__span2{
    background-image: url("https://www.atlantico.gov.co/images/botones/Logo_Gob_Atl-2024.png");
    
}

.empresas-desplazamiento__span4 {
    background-image: url("https://www.invias.gov.co/images/logos/logo_invias_nuevo.jpg");
    
}

@keyframes desplazamiento {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Main section experiencia */

.main__section--experiencia {
    /* Espacio entre filas y columnas */
    padding: 40px 40px 40px 40px; /* Espacio alrededor del contenido dentro de la sección */
    background-color: var(--second-gris-color); /* Color de fondo de la sección */
}

.main__Section--wrappa{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas de igual tamaño */
    grid-template-rows: repeat(3, auto); /* Crea 3 filas que se ajustan al contenido */
    gap: 20px;
    width: 100%;
}

.card__transition{
    transition: transform 500ms;
}

.card__transition:hover{
    transform: scale(1.1);
    transition: transform 500ms;
}

.main__section--experiencia--h2{
    font-size: 3.6rem;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* Experience Style Media*/

@media screen and (max-width: 1010px) {
 
}
  

/* Modal code */


/* Estilos para el modal */

/* Main section contacto */

.main__section--contacto{
    width: 100%;
    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 20px;
}

.contacto__titulo{
    color: var(--principal-black-color);
    font-size: 4.8rem;
}

.contacto__texto{
    
    color: var(--principal-black-color);
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.6;
}

.main__section--contacto {
    background-color: #f7f7f7;
    padding: 50px 0;
  }
  
  .formulario__contenedor {
    width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  
  .formulario__titulo {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .formulario {
    display: flex;
    flex-direction: column;
  }
  
  .formulario__campo {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  
  .formulario__label {
    width: 100%;
    margin-bottom: 5px;
    margin-left: 0;
    font-size: 1.4rem;
  }
  
  .formulario__input,
  .formulario__textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
  }

  .formulario__input{
    width: 100%;
    height: 40px;
  }
  
  .formulario__textarea {
    height: 100px;
  }
  
  .formulario__boton {
    cursor: pointer;
    background-color: var(--button-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 5px;
    display: block; /* Hace que el botón sea un bloque para permitir márgenes automáticos */
    margin-left: auto; /* Establece el margen izquierdo a auto */
    margin-right: auto;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 160px;
    height: 40px;
    font-size: 1.6rem;
  }
  
  .formulario__boton:hover, .formulario__boton:focus {
    background-color: #333; /* Color de fondo más oscuro al pasar el ratón por encima */
    transform: scale(1.05); /* Escala el botón ligeramente para dar sensación de elevación */
    outline: none; /* Remueve el contorno en foco para navegación con teclado */
  }

  .formulario__boton:active {
    transform: scale(0.95); /* Efecto de "presionado" al hacer clic */
  }
  
  /* Media queries para responsive */
  
  @media (max-width: 600px) {
    .formulario__contenedor {
      width: 90%;
    }
}


  
/* This is the footer section */

.footer {
    padding: 50px;
    width: 100%;
}

.footer__wrappa{
    width: 100%;
    display: flex;
    justify-content: space-around;
    background-color: var(--white-color);
    color: var(--principal-black-color);
}

.footer__column {
    display: flex; /* Esto habilita Flexbox para este contenedor */
    flex-direction: column; /* Organiza los hijos en una columna */
    align-items: center; /* Centra los elementos hijos horizontalmente */
    justify-content: center; /* Centra los elementos hijos verticalmente */
    text-align: center; /* Asegura que el texto también esté centrado */
    height: 100%; 
}

.footer__title {
    margin: 0 0 10px; /* Espacio debajo del título */
    font-size: 2.4rem;
    text-align: center;
}

.footer__content {
    margin: 8px 0; /* Espacio entre párrafos */
    font-size: 1.6rem;
    color: var(--principal-black-color);
    font-style: italic;
    text-align: center;

}

.footer__column--icons {
    display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Mantiene h3 en la parte superior */
  align-items: center;
  

} 

.footer__icons-father{
   
  display: flex;
  justify-content: center; /* Centra los íconos horizontalmente */
  align-items: center;
}

.footer__icons-father a{
    width: 40px;
    height: 40px;
    margin-left: 5px;
}

.footer__icons-father a img{
    width: 40px;
    height: 40px;
}

/* Here start the code to arroyo */


.main--fotos{
    width: 100%;
    height: 100vh;
    margin-top: 0;
    display: flex; /* Usa flexbox para centrar la sección de la grid */
    justify-content: center;
    align-items: center;
    padding: 20px;
   
}

.grid-section {
    display: grid;
    width: 100%; /* Ancho al 100% del contenedor */
    height: 100%; /* Altura al 100% del contenedor */
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    grid-template-rows: repeat(4, 1fr); /* 4 filas */
    gap: 20px; /* Espacio entre grid items */
}

.grid-section__item{ 
    background-size: cover; /* Asegura que la imagen cubra completamente el div sin distorsionarse */
    background-position: center; /* Centra la imagen en el div */
    background-repeat: no-repeat;
}

.grid-section__item:nth-child(1) { 
    grid-area: 1 / 1 / 3 / 3;
    background-image: url('https://i.ibb.co/WDg34vb/calle-91-1.jpg');
    
} 

.grid-section__item:nth-child(2) { 
    grid-area: 1 / 3 / 3 /5;
    background-image: url('https://i.ibb.co/yfcZd10/calle-91-canalizacion-2.jpg');
} 

.grid-section__item:nth-child(3) {
     grid-area: 3 / 1 / 5 / 3;
     background-image: url('https://i.ibb.co/G0tPsPM/la-3.jpg');
} 
.grid-section__item:nth-child(4) {
     grid-area: 3 / 3 / 5 / 5;
     background-image: url('https://i.ibb.co/dLMFRdD/4-la-4.jpg');
}

.grid-section__item {
    /* Estilos para los elementos de la grid */
    background-color: #f0f0f0; /* Color de fondo ligero para los items */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #d0d0d0; /* Borde sutil */
}


.close-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: var(--button-color);
    color: white;
    font-size: 24px; /* Ajusta este valor según necesites */
    font-weight: bold;
    border-radius: 50%;
    position: fixed;
    top: 20px; /* Distancia desde la parte superior de la pantalla */
    right: 20px; /* Distancia desde la parte derecha de la pantalla */
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para efecto flotante */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para hover */
}

.close-button:hover {
    transform: scale(1.1); /* Efecto de crecimiento al pasar el mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Sombra más pronunciada para efecto flotante */
}

/* Grid section complejo deportivo de Manati */

.grid-section__item--Manati:nth-child(1) {
    grid-area: 1 / 1 / 3 / 3;
    background-image: url('https://i.ibb.co/7QVtfx8/Complejo-deportivo-Manati.jpg');
}

.grid-section__item--Manati:nth-child(2) {
    grid-area: 1 / 3 / 3 /5;
    background-image: url('https://i.ibb.co/QpKJryz/Manati-1.jpg');
}

.grid-section__item--Manati:nth-child(3) {
    grid-area: 3 / 1 / 5 / 3;
    background-image: url('https://i.ibb.co/Vx3hTg1/Manati-2.jpg');
}

.grid-section__item--Manati:nth-child(4) {
    grid-area: 3 / 3 / 5 / 5;
    background-image: url('https://i.ibb.co/MZ6zh43/Manati-3.jpg');
}

/* Grid section Variante Sabalarga */

.grid-section__item3:nth-child(1) {
    grid-area: 1 / 1 / 3 / 3;
    background-image: url('https://i.ibb.co/xgP3tB6/variante-Sabanalarga.jpg');
}

.grid-section__item3:nth-child(2) {
    grid-area: 1 / 3 / 3 /5;
    background-image: url('https://i.postimg.cc/85JMFPyw/pav-sabanalarga-1.jpg');
}

.grid-section__item3:nth-child(3) {
    grid-area: 3 / 1 / 5 / 3;
    background-image: url('https://i.postimg.cc/q7p3Gx1t/pav-sabanalarga-2.jpg');
}

.grid-section__item3:nth-child(4) {
    grid-area: 3 / 3 / 5 /5;
    background-image: url('https://i.postimg.cc/kDrVRQVg/pav-sabanalarga-4.jpg');
}
/* Grid Estadio Riohacha */

.grid-section__item--estadioRioacha:nth-child(1) {
    grid-area: 1 / 1 / 5 / 5;
    background-image: url('https://i.postimg.cc/g0tPBMkn/Estadio-Riohacha-2022.jpg');
}

/* Plaza Usiacuri - Puerto colombia */

.grid-section__item--usiacuri:nth-child(1) {
    grid-area: 1 / 1 / 3 / 3;
    background-image: url('https://i.postimg.cc/RVjhgLZS/plaza-pto-colombia-1.jpg');
}

.grid-section__item--usiacuri:nth-child(2) {
    grid-area: 1 / 3 / 3 /5;
    background-image: url('https://i.postimg.cc/L8t9NdWD/plaza-pto-colombia-2.jpg');
}

.grid-section__item--usiacuri:nth-child(3) {
    grid-area: 3 / 1 / 5 / 3;
    background-image: url('https://i.postimg.cc/xjL90Vf2/plaza-pto-colombia-6.jpg');
}

.grid-section__item--usiacuri:nth-child(4) {
    grid-area: 3 / 3 / 5 / 5;
    background-image: url('https://i.postimg.cc/Vkg6zQF6/plaza-usiacuri-4.jpg');
}

/* Cramen de atrato */

.grid-section__item--carmenDeAtrato:nth-child(1) {
    grid-area: 1 / 1 / 3 / 3;
    background-image: url('https://i.postimg.cc/5tkkdyYm/intervencion-en-afirmado-carmen-de-atrato-El-Dauro-2.jpg');
}

.grid-section__item--carmenDeAtrato:nth-child(2) {
    grid-area: 1 / 3 / 3 /5;
    background-image: url('https://i.postimg.cc/90yx7Bxx/tierra-armada-carmen-de-atrato.jpg');
}

.grid-section__item--carmenDeAtrato:nth-child(3) {
    grid-area: 3 / 1 / 5 / 3;
    background-image: url('https://i.postimg.cc/3xttmNBH/estabilizacion-carmen-de-atrato.jpg');
}

.grid-section__item--carmenDeAtrato:nth-child(4) {
    grid-area: 3 / 3 / 5 / 5;
    background-image: url('https://i.postimg.cc/90yx7Bxx/tierra-armada-carmen-de-atrato.jpg');
}

/*Grid section sobre Carepa */

.grid-section__item--carepa:nth-child(1) {
    grid-area: 1 / 1 / 3 / 3;
    background-image: url('https://i.postimg.cc/s2rybnWc/Whats-App-Image-2024-02-26-at-2-07-44-PM.jpg');
}

.grid-section__item--carepa:nth-child(2) {
    grid-area: 1 / 3 / 3 /5;
    background-image: url('https://i.postimg.cc/QdpZgpzW/Whats-App-Image-2024-02-26-at-2-07-43-PM-1.jpg');
}

.grid-section__item--carepa:nth-child(3) {
    grid-area: 3 / 1 / 5 / 3;
    background-image: url('https://i.postimg.cc/D0tRLZdg/Whats-App-Image-2024-02-26-at-2-07-43-PM.jpg');
}

.grid-section__item--carepa:nth-child(4) {
    grid-area: 3 / 3 / 5 / 5;
    background-image: url('https://i.postimg.cc/9MkkHMSh/Whats-App-Image-2024-02-26-at-2-07-42-PM-2.jpg');
}

/*Grid section sobre Placa huella */

.grid-section__item--placaHuella:nth-child(1) {
    grid-area: 1 / 1 / 3 / 3;
    background-image: url('https://i.ibb.co/0mpjbf6/pavimento-placa-huella-santa-lucia3.jpg');
}

.grid-section__item--placaHuella:nth-child(2) {
    grid-area: 1 / 3 / 5 /5;
    background-image: url('https://i.ibb.co/kSzm8Jf/pavimento-placa-huella-santa-lucia.jpg');
}

.grid-section__item--placaHuella:nth-child(3) {
    grid-area: 3 / 1 / 5 / 3;
    background-image: url('https://i.ibb.co/N608QFd/pavimento-placa-huella-santa-lucia2.jpg');
}