html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden; 
}

section {
    margin: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#seccion1 {
    height: 100%;
    color: white;
    background-color: #222;
}

#seccion2 {
    height: 100%;
    background-color: #222;
}

.elipse1 {
    position: absolute;
    top: -5%;
    left: -20%;
    width: 250px;
    height: 400px;
    background-color: #4d82bc;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(75deg); 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

.elipse2 {
    position: absolute;
    bottom: -5%;
    right: -12%;
    width: 250px;
    height: 400px;
    background-color: #42ab49;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-80deg); 
    overflow: hidden; 
    z-index: 7;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

.elipse3 {
    position: absolute;
    bottom: -5%;
    right: -11%;
    width: 250px;
    height: 400px;
    background-color: transparent;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-80deg); 
    overflow: hidden; 
    z-index: 6;
    border: 0.5px solid white; 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

.IGlogg {
    position: absolute;
    background-color: transparent;
    width: 600px;
    height: auto;
    top: 70px;
    overflow: hidden; 
}

.l1 {
    width: 220px;
    height: 70px;
    background-image: url('img/logoImproGroup.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    float: left;
}

.l2 {
    display: flex; 
    justify-content: center; 
    align-items: center;
    width: auto;
    height: 70px;
    float: right;
    font-size: 35px;
    color: white;
}


#objetivo {
    width: 600px;
    height: auto;
    text-align: justify;
    font-family: Roboto; 
    color: white;
    background-color: transparent;
    font-size: 18px;
}

.CRTG {
    position: absolute;
    background-color: transparent;
    height: 40px;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 0 10px; 
}

.CRTG div {
    display: flex;
    align-items: center;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    padding: 0 10px;
}

.CRTG div:hover {
    color: #005187;
}

.CRTG div:hover:nth-child(2) {
    color: #ff7f50; 
}

.CRTG div:hover:nth-child(3) {
    color: #4d82bc; 
}

.CRTG div:hover:nth-child(4) {
    color: #42ab49;
}

.CRTG div:not(:last-child)::after {
    content: "|";
    margin-left: 10px;
    color: white; 
}


#seccion3 {
    height: 100%;
    background-color: #222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .LQH {
    width: 100%; 
    max-width: 1040px; 
    margin-bottom: 20px;
    background-color: transparent;
    font-family: Roboto;
    font-size: 30px;
    color: white;
    font-weight: bold;
  }
  
  .containerS3cuadrado {
    display: flex;
    justify-content: center;
  }
  
  :root {
    --color-iconC: rgba(0, 81, 135, 0.3); 
    --color-iconR: rgba(255, 127, 80, 0.3); 
    --color-iconT: rgba(77, 130, 188, 0.3); 
    --color-iconG: rgba(66, 171, 73, 0.3);
  }
  
.S3cuadradoC,
.S3cuadradoR,
.S3cuadradoT,
.S3cuadradoG {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 230px;
    height: 300px;
    background-color: #222;
    margin: 0 20px;
    margin-top: 30px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
    transition: box-shadow 2s ease, transform 0.9s ease; 
}

.S3cuadradoC:hover {
    box-shadow: 0px 0px 20px var(--color-iconC);
    transform: scale(1.1);
}
.S3cuadradoR:hover {
    box-shadow: 0px 0px 20px var(--color-iconR);
    transform: scale(1.1);
}
.S3cuadradoT:hover {
    box-shadow: 0px 0px 20px var(--color-iconT);
    transform: scale(1.1);
}
.S3cuadradoG:hover {
    box-shadow: 0px 0px 20px var(--color-iconG);
    transform: scale(1.1);
}



.iconC {
    display: flex;
    justify-content: center; 
    align-items: center;
    margin-top: 20px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(to right, #005187, #3379a7); 
    margin-bottom: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4); 
}
.iconC i {
    font-size: 50px; 
    color: white; 
}


.iconR{
    display: flex;
    justify-content: center; 
    align-items: center;
    margin-top: 20px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(to right, #ff7f50, #ffa07a);
    margin-bottom: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4); 
}
.iconR i {
    font-size: 50px; 
    color: white; 
}

.iconT{
    display: flex;
    justify-content: center; 
    align-items: center;
    margin-top: 20px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(to right, #4d82bc, #6fa3d1); 
    margin-bottom: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4); 
}
.iconT i {
    font-size: 50px; 
    color: white; 
}

.iconG{
    display: flex;
    justify-content: center; 
    align-items: center;
    margin-top: 20px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(to right, #42ab49, #66c96d);
    margin-bottom: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4); 
}

.iconG i {
    font-size: 50px; 
    color: white; 
}

.textC{
    width: 90%;
    height: auto;
    margin-bottom: 15px;
    font-family: roboto;
    font-weight: bold;
    color: white;
    font-size: 18px;
    text-align: center;
}
  
.descpC{
    width: 85%;
    height: 47%;
    font-family: roboto;
    font-size: 15px;
    color: white;
    text-align: left;

}

.descpC p {
    margin-bottom: 10px;
    margin-top: 0;
}
  

.S3elipse1 {
    position: absolute;
    top: -5%;
    left: -20%;
    width: 250px;
    height: 400px;
    background-color: #ff7f50;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(75deg); 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
  
.S3elipse2 {
    position: absolute;
    bottom: -5%;
    right: -15%;
    width: 250px;
    height: 400px;
    background-color: #005187;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-60deg); 
    overflow: hidden; 
    z-index: 7;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
  
.S3elipse3 {
    position: absolute;
    bottom: -5%;
    right: -14%;
    width: 250px;
    height: 400px;
    background-color: transparent;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-60deg); 
    overflow: hidden; 
    z-index: 6;
    border: 0.5px solid white; 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
  
#seccion4 {  
    height: 100%;
    background-color: #222;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.tituloS4 {
    width: 100%; 
    max-width: 1100px; 
    background-color: transparent;
    font-family: Roboto;
    font-size: 30px;
    color: white;
    font-weight: bold;
    margin-bottom: -100px;
}

.containerS4cuadrado {
    display: flex;
    justify-content: center;
  }

#seccion4 .cuadrado1,
#seccion4 .cuadrado2,
#seccion4 .cuadrado3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 330px;
    height: 365px;
    margin: 30px;
    border-radius: 20px;
    padding-bottom: 12px;
    cursor: pointer;
    transition: transform 0.5s ease, background-color 0.5s ease;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

#seccion4 .cuadrado1 {
    background-color: #005187;
}

#seccion4 .cuadrado2 {
    background-color: #42ab49;
}

#seccion4 .cuadrado3 {
    background-color: #4d82bc;
}

.logoImproconsulting{
    margin-top: 20px;
    width: 200px;
    height: 60px;
    background-image: url('img/logoImproconsulting.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-bottom: 10px;
}

.logoImproagro{
    margin-top: 20px;
    width: 200px;
    height: 60px;
    background-image: url('img/logoImproagro.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-bottom: 10px;
}

.logoImprotecsa{
    margin-top: 20px;
    width: 200px;
    height: 60px;
    background-image: url('img/logoImprotecsaWhite.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-bottom: 10px;
}

.textoImpro{
    width: 90%;
    height: auto;
    margin-bottom: 10px;
    font-family: roboto;
    font-weight: bold;
    color: white;
    font-size: 18px;
    text-align: left;
}
  
.descpImpro{
    width: 85%;
    height: 47%;
    font-family: roboto;
    font-size: 15px;
    color: white;
    text-align: left;

}

.descpImpro li {
    margin-bottom: 10px; 
    margin-top: 0;
}



.S4elipse1 {
    position: absolute;
    top: -5%;
    left: -20%;
    width: 250px;
    height: 400px;
    background-color: #4d82bc;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(75deg); 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
  
.S4elipse2 {
    position: absolute;
    bottom: -5%;
    right: -15%;
    width: 250px;
    height: 400px;
    background-color: #42ab49;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-160deg); 
    overflow: hidden; 
    z-index: 7;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
  
.S4elipse3 {
    position: absolute;
    bottom: -5%;
    right: -14%;
    width: 250px;
    height: 400px;
    background-color: transparent;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-160deg); 
    overflow: hidden; 
    z-index: 6;
    border: 0.5px solid white; 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

a {
    text-decoration: none;
}


#seccion5 {
    height: 100%;
    background-color: #222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.tituloS5 {
    width: 100%;
    max-width: 1040px; 
    background-color: transparent;
    font-family: Roboto;
    font-size: 30px;
    color: white;
    font-weight: bold;
}

.contenedorEquipo {
    display: flex;
    justify-content: center;
}

.areaEquipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 830px;
    height: 480px;
    background-color: #222;
    margin: 0 20px;
    margin-top: 30px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: box-shadow 2s ease, transform 0.9s ease;
    font-size: 100px;
}

.fotoEquipo{
    margin-top: 20px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: #42ab49;
    margin-bottom: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4); 
}

.nombreEquipo{
    width: 90%;
    height: auto;
    margin-bottom: 15px;
    font-family: roboto;
    font-weight: bold;
    color: white;
    font-size: 18px;
    text-align: center;
}
  
.descpEquipo{
    width: 90%;
    height: 47%;
    font-family: roboto;
    font-size: 15px;
    color: white;
    text-align: left;
}

.S5elipse1 {
    position: absolute;
    top: -5%;
    left: -20%;
    width: 250px;
    height: 400px;
    background-color: #005187;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(75deg); 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
  
.S5elipse2 {
    position: absolute;
    bottom: -5%;
    right: -18%;
    width: 250px;
    height: 400px;
    background-color: #ff7f50;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-296deg); 
    overflow: hidden; 
    z-index: 7;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
  
.S5elipse3 {
    position: absolute;
    bottom: -5%;
    right: -17%;
    width: 250px;
    height: 400px;
    background-color: transparent;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-296deg); 
    overflow: hidden; 
    z-index: 6;
    border: 0.5px solid white; 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

#seccion6 {
    height: 100%;
    background-color: #222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.tituloS6 {
    width: 100%; 
    max-width: 1100px; 
    background-color: transparent;
    font-family: Roboto;
    font-size: 30px;
    color: white;
    font-weight: bold;
    margin-bottom: 60px;
}

.contenedorEquipo {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 85%;
}

.cliente1, .cliente2, .cliente3, .cliente4, .cliente5, .cliente6, .cliente7 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 230px;
    height: 80px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35); 
}

.cliente1 {
    background-image: url('img/clientes/logoEntrepalmas.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
}

.cliente2 {
    background-image: url('img/clientes/logoPalermo.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
}

.cliente3 {
    background-image: url('img/clientes/logoOleo.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
}

.cliente4 {
    background-image: url('img/clientes/logoUnion.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
}

.cliente5 {
    background-image: url('img/clientes/logoAceites.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
}

.cliente6 {
    background-image: url('img/clientes/logoFlores.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
}

.cliente7 {
    background-image: url('img/clientes/logoGloria.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
}

.S6elipse1 {
    position: absolute;
    top: -5%;
    left: -20%;
    width: 250px;
    height: 400px;
    background-color: #42ab49;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(55deg); 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  }
  
.S6elipse2 {
    position: absolute;
    bottom: 10%;
    right: -18%;
    width: 250px;
    height: 400px;
    background-color: #4d82bc;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-60deg); 
    overflow: hidden; 
    z-index: 7;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
  
.S6elipse3 {
    position: absolute;
    bottom: 10%;
    right: -17%;
    width: 250px;
    height: 400px;
    background-color: transparent;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-60deg); 
    overflow: hidden; 
    z-index: 6;
    border: 0.5px solid white; 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

#seccion7 {
    height: 100%;
    background-color: #222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.tituloS7 {
    width: 100%; 
    max-width: 1040px; 
    background-color: transparent;
    font-family: Roboto;
    font-size: 30px;
    color: white;
    font-weight: bold;
    margin-bottom: 40px;

}

.contenedorContacto {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 50px;
    max-width: 85%;
}

.contacto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    height: auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.089);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35); 
    cursor: pointer;
}

.nombre {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: bold;
    font-family: roboto;
    color: white; 
}

.correo {
    margin-bottom: 10px;
    font-size: 16px;
    font-family: roboto;
    font-weight: 300;
    color: white;
}

.telefono {
    font-size: 16px;
    font-family: roboto;
    font-weight: 300;
    color: white;
}

.S7elipse1 {
    position: absolute;
    top: -5%;
    left: -20%;
    width: 250px;
    height: 400px;
    background-color: #42ab49;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(55deg); 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  }
  
.S7elipse2 {
    position: absolute;
    bottom: 10%;
    right: -18%;
    width: 250px;
    height: 400px;
    background-color: #4d82bc;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-60deg); 
    overflow: hidden; 
    z-index: 7;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
  
.S7elipse3 {
    position: absolute;
    bottom: 10%;
    right: -17%;
    width: 250px;
    height: 400px;
    background-color: transparent;
    border-radius: 50% / 80% 60% 40% 20%; 
    transform: rotate(-60deg); 
    overflow: hidden; 
    z-index: 6;
    border: 0.5px solid white; 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}


@keyframes parpadeo {
    0%, 41%, 45%, 47%, 49.5%, 100% { 
        opacity: 1;
    }
    42%, 44%, 46%,48%,  50% { 
        opacity: 0; 
    }
}

#particles-js {
    position: relative; 
    height: 100%; 
    width: 100%;
    z-index: 1;
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

#logoImproGroup {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 450px;
    height: 120px;
    z-index: 2;
    background-image: url('img/logoImproGroup.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    cursor: pointer;
}

#areas {
    position: absolute;
    width: auto;
    height: auto;
    z-index: 3;
    top: 75%;
    font-size: 22px;
    font-family: roboto;
    display: flex;
}

#areas > div {
    margin-right: 50px; 
    transition: color 0.3s; 
}

#areas > div:hover {
    color: inherit; 
}

#areas > div:hover:nth-of-type(1) {
    color: #005187; 
}

#areas > div:hover:nth-of-type(2) {
    color: #ff7f50; 
}

#areas > div:hover:nth-of-type(3) {
    color: #4d82bc; 
}

#areas > div:hover:nth-of-type(4) {
    color: #42ab49; 
}

#areas > div:last-child {
    margin-right: 0; 
}

@media (max-width: 820px) {
    section {
        flex-direction: column;
        align-items: stretch;
    }

    #seccion3 {
        height: auto;
    }

    #seccion4 .cuadrado1,
    #seccion4 .cuadrado2,
    #seccion4 .cuadrado3 {
        width: calc(100% - 20px);
        margin: 5px;
    }
}

#seccion4 .cuadrado1:hover,
#seccion4 .cuadrado2:hover,
#seccion4 .cuadrado3:hover {
    transform: scale(1.1); 
}