/* ===================================================
   ABOUT
=================================================== */

.about{

    position:relative;

    min-height:780px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#050505 url("../images/sobre/sobre-bg.webp") no-repeat;

    background-size:92%;

    background-position:126% center;

    scroll-margin-top:110px;

}

/* ===================================================
   OVERLAY
=================================================== */

.about::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,.99) 0%,

        rgba(0,0,0,.97) 14%,

        rgba(0,0,0,.90) 30%,

        rgba(0,0,0,.72) 48%,

        rgba(0,0,0,.38) 66%,

        rgba(0,0,0,.08) 100%

    );

}

/* ===================================================
   CONTAINER
=================================================== */

.about .container{

    position:relative;

    z-index:5;

    width:100%;

    min-height:780px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

}

/* ===================================================
   CONTEÚDO
=================================================== */

.about-content{

    width:100%;

    max-width:620px;

    margin-top:0;

}

/* ===================================================
   TAG
=================================================== */

.about .section-tag{

    display:inline-block;

    color:var(--gold);

    font-size:14px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:0;

}

.about .section-tag::after{

    content:"";

    display:block;

    width:46px;

    height:2px;

    background:var(--gold);

    margin-top:16px;

}

/* ===================================================
   TITULO
=================================================== */

.about h2{

    font-size:clamp(68px,5vw,84px);

    line-height:.93;

    font-weight:800;

    color:#fff;

    margin:0 0 28px;

}

.about h2 span{

    color:var(--gold);

}

/* ===================================================
   TEXTO
=================================================== */

.about .section-description{

    max-width:560px;

    font-size:20px;

    line-height:1.8;

    color:rgba(255,255,255,.90);

}

.about strong{

    color:var(--gold);

}

/* ===================================================
   BOTÕES
=================================================== */

.about-buttons{

    display:flex;

    gap:22px;

    margin-top:48px;

}

.about-buttons .btn{

    min-width:210px;

}

/* ===================================================
   BARRA
=================================================== */

.about-tech-bar{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:35px;

    width:76%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid rgba(212,168,71,.35);

    padding-top:22px;

    z-index:20;

}

.tech-item{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    position:relative;

}

.tech-item i{

    color:var(--gold);

    font-size:20px;

}

.tech-item span{

    color:#fff;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.tech-item:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    width:1px;

    height:26px;

    background:rgba(212,168,71,.18);

}

/* ===================================================
   RESPONSIVO
=================================================== */

@media(max-width:1200px){

    .about{

        background-size:cover;

        background-position:72% center;

    }

}

@media(max-width:992px){

    .about{

        min-height:auto;

        padding:170px 0 120px;

        background-size:cover;

        background-position:center;

    }

    .about-content{

        width:100%;

    }

    .about h2{

        font-size:54px;

    }

    .about .section-description{

        max-width:100%;

        font-size:18px;

    }

    .about-buttons{

        flex-direction:column;

    }

    .about-buttons .btn{

        width:100%;

        min-width:auto;

    }

    .about-tech-bar{

        position:relative;

        left:auto;

        bottom:auto;

        transform:none;

        width:100%;

        margin-top:70px;

        flex-wrap:wrap;

        border:none;

        gap:25px;

    }

    .tech-item{

        width:45%;

        flex:none;

        justify-content:flex-start;

    }

    .tech-item::after{

        display:none;

    }

}

@media(max-width:768px){

    .about{

        padding:150px 0 90px;

    }

    .about h2{

        font-size:44px;

    }

    .about .section-description{

        font-size:17px;

    }

    .tech-item{

        width:100%;

    }

}