.about-aerit{
    padding:120px 20px;
}

.about-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    gap:60px;
}

/* LEFT */

.about-left{
    position:relative;
}

.about-images{
    position:relative;
    max-width:520px;
}

.about-img-main{
    position:relative;
}

.about-img-main img{
    width:100%;
    border-radius:26px;
    display:block;
}

/* glow */

.about-img-main::before{
    content:"";
    position:absolute;
    width:70%;
    height:70%;
    background:radial-gradient(circle, rgba(0,195,255,.35), transparent 70%);
    top:-40px;
    left:-40px;
    filter:blur(60px);
    z-index:-1;
}

/* BADGE */

.about-badge{
    position:absolute;
    top:20px;
    right:20px;
    width:100px;
    height:100px;
    border-radius:50%;
    background:linear-gradient(135deg,#0072ff,#00c6ff);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
    box-shadow:0 0 40px rgba(0,150,255,.6);
}

.about-badge span{
    font-size:28px;
    font-weight:700;
    line-height:1;
}

.about-badge small{
    font-size:11px;
}

/* SECOND IMAGE */

.about-img-secondary{
    position:relative;
    width:80%;
    margin:30px auto 30px;
}

.about-img-secondary img{
    width:100%;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    border: 3px solid #ffffff;
}

/* CLIENTS */

.about-clients{
    margin-top:30px;
}

.clients-avatars{
    display:flex;
    align-items:center;
    margin-bottom:10px;
}

.clients-avatars span{
    width:36px;
    height:36px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid #00c6ff;
    margin-left:-10px;
}

.clients-avatars span:first-child{
    margin-left:0;
}

.clients-avatars img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.clients-avatars .plus{
    background:#00c6ff;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* RIGHT */

.about-label{
    color:#00c6ff;
    letter-spacing:2px;
    font-size:12px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.about-right h2{
    color:white;
    font-size:30px;
    line-height:1.3;
    margin-bottom:20px;
}

.about-right h2 span{
    background:linear-gradient(90deg,#00c6ff,#0072ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.about-text{
    color:rgba(255,255,255,.75);
    line-height:1.8;
    margin-bottom:30px;
}

.about-list{
    list-style:none;
    padding:0;
    margin-bottom:40px;
}

.about-list li{
    color:white;
    margin-bottom:12px;
    position:relative;
    padding-left:26px;
}

.about-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#00c6ff;
}

.about-services{
    display:grid;
    gap:20px;
}

.service-box{
    background:rgba(0,195,255,.05);
    border:1px solid rgba(0,195,255,.2);
    padding:20px;
    border-radius:14px;
    transition:.3s;
}

.service-box:hover{
    transform:translateY(-6px);
    background:rgba(0,195,255,.1);
}

.service-box h4{
    color:white;
    margin-bottom:8px;
}

.service-box p{
    color:rgba(255,255,255,.7);
}

/* SCROLL ANIMATION */
.about-left,
.about-right{
    opacity:0;
}

.about-left{
    transform:translateX(-80px);
}

.about-right{
    transform:translateX(80px);
}

.about-left,
.about-right{
    transition:all 1.2s cubic-bezier(.19,1,.22,1);
}

.about-left.reveal,
.about-right.reveal{
    opacity:1;
    transform:translateX(0);
}

/*  FONDO  */
.about-aerit{
    position:relative;
    overflow:hidden;
    padding:120px 20px;
    /*background:#050b16;*/
}

/* GRID TECNOLÓGICO */

.about-tech-bg{
    position:absolute;
    inset:0;

    /*background:*/
    /*        radial-gradient(circle at 20% 20%, rgba(31,163,255,.12), transparent 40%),*/
    /*        radial-gradient(circle at 80% 70%, rgba(31,163,255,.12), transparent 40%);*/

    z-index:0;
}

/* grid lines */

.about-tech-bg::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
            linear-gradient(rgba(31,163,255,.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(31,163,255,.06) 1px, transparent 1px);

    background-size:40px 40px;

    animation:gridMove 20s linear infinite;
}

/* glow moving */

.about-tech-bg::after{
    content:"";
    position:absolute;
    width:600px;
    height:600px;

    background:radial-gradient(circle, rgba(31,163,255,.25), transparent 70%);

    top:-200px;
    left:-200px;

    filter:blur(120px);

    animation:glowMove 12s ease-in-out infinite alternate;
}

/* canvas particles */

.about-network{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
}

.about-container{
    position:relative;
    z-index:2;
}

/* animations */

@keyframes gridMove{

    0%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(40px);
    }

}

@keyframes glowMove{

    0%{
        transform:translate(0,0);
    }

    100%{
        transform:translate(200px,120px);
    }

}


.about-dots{
    position:absolute;
    top:0;
    left:-50%;
    width:200%;
    height:220px;

    background:url("../images/about-four-bg-shape.png") repeat-x;

    opacity:.25;

    animation:dotsMove 80s linear infinite alternate;

    pointer-events:none;
    z-index:0;
}

@keyframes dotsMove{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-30%);
    }

}
/* TABLET */

@media(min-width:768px){

    .about-img-secondary{
        position:absolute;
        bottom:-40px;
        right:-40px;
        width:60%;
        margin-top:0;
    }

    .about-clients{
        margin-top:80px;
    }

    .about-badge{
        width:120px;
        height:120px;
        top:30px;
        right:30px;
    }

    .about-badge span{
        font-size:32px;
    }

    .about-right h2{
        font-size:34px;
    }

}

/* DESKTOP */

@media(min-width:1024px){

    .about-container{
        grid-template-columns:1fr 1fr;
        align-items:center;
        gap:80px;
    }

    .about-right h2{
        font-size:36px;
    }

}