/* ===================================================
   EXPERTISE HERO
=================================================== */

.expertise-hero{

    position:relative;

    min-height:min(100vh,960px);

    display:flex;

    align-items:center;

    overflow:hidden;

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

    background-size:cover;

    background-position:center center;

    scroll-margin-top:110px;

}


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

.expertise-hero::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:linear-gradient(

        90deg,

        rgba(0,0,0,.98) 0%,
        rgba(0,0,0,.94) 18%,
        rgba(0,0,0,.82) 36%,
        rgba(0,0,0,.58) 52%,
        rgba(0,0,0,.25) 72%,
        rgba(0,0,0,.04) 100%

    );

}


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

.expertise-hero .container{

    position:relative;

    z-index:5;

    width:100%;

    min-height:min(100vh,960px);

    display:flex;

    align-items:center;

    justify-content:flex-start;

}


/* ===================================================
   WRAPPER
=================================================== */

.expertise-wrapper{

    width:100%;

}


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

.expertise-content{

    width:100%;

    max-width:620px;

    position:relative;

    z-index:5;

    transform:translateY(-30px);

}


.expertise-content strong{

    color:var(--gold);

    font-weight:700;

}


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

.expertise-hero .section-tag{

    display:inline-block;

    color:var(--gold);

    font-size:14px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:0;

}


.expertise-hero .section-tag::after{

    content:"";

    display:block;

    width:46px;

    height:2px;

    background:var(--gold);

    margin-top:16px;

}


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

.expertise-hero h2{

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

    line-height:.93;

    font-weight:800;

    color:#fff;

    margin:0 0 28px;

}


.expertise-hero h2 span{

    color:var(--gold);

}


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

.expertise-content p{

    max-width:560px;

    font-size:20px;

    line-height:1.8;

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

}


.expertise-content strong{

    color:var(--gold);

    font-weight:700;

}


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

.expertise-buttons{

    display:flex;

    align-items:center;

    gap:22px;

    margin-top:42px;

}


.expertise-buttons .btn,
.expertise-buttons .btn-gold,
.expertise-buttons .btn-outline{

    min-width:210px;

    min-height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.expertise-buttons .btn-gold{

    background:var(--gold);

    color:#050505;

    border-radius:12px;

}


.expertise-buttons .btn-outline{

    border:1px solid var(--gold);

    border-radius:12px;

}


/* ===================================================
   IMAGEM
=================================================== */

/*
   A imagem agora pertence ao background da seção.
   Mantemos esta div apenas porque ela existe no HTML.
*/

.expertise-image{

    display:none;

}


/* ===================================================
   FEATURES / BARRA INFERIOR
=================================================== */

.expertise-features{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:25px;

    width:84%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:22px;

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

    z-index:20;

}


/* ===================================================
   FEATURE
=================================================== */

.expertise-features .feature{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    position:relative;

    padding:0;

}


.expertise-features .feature i{

    color:var(--gold);

    font-size:20px;

}


.expertise-features .feature span{

    color:#fff;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

    text-align:center;

}


.expertise-features .feature:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    width:1px;

    height:28px;

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

}


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

@media(max-width:992px){

    .expertise-hero{

        min-height:auto;

        padding:170px 0 120px;

        background-size:cover;

        background-position:center;

    }


    .expertise-hero .container{

        min-height:auto;

        display:block;

    }


    .expertise-content{

        width:100%;

        max-width:100%;

    }


    .expertise-hero h2{

        font-size:54px;

    }


    .expertise-content p{

        max-width:100%;

        font-size:18px;

    }


    .expertise-features{

        position:relative;

        left:auto;

        bottom:auto;

        transform:none;

        width:100%;

        flex-wrap:wrap;

        gap:25px;

        margin-top:60px;

        padding-top:25px;

    }


    .expertise-features .feature{

        width:45%;

        flex:none;

        justify-content:flex-start;

    }


    .expertise-features .feature::after{

        display:none;

    }

}


@media(max-width:768px){

    .expertise-hero{

        padding:150px 0 90px;

    }


    .expertise-hero h2{

        font-size:44px;

    }


    .expertise-content p{

        font-size:17px;

    }


    .expertise-buttons{

        flex-direction:column;

    }


    .expertise-buttons .btn,
    .expertise-buttons .btn-gold,
    .expertise-buttons .btn-outline{

        width:100%;

    }


    .expertise-features .feature{

        width:100%;

    }

}