/* ===================================================
   SERVIÇOS
=================================================== */

.services{

    background:#070707;

    scroll-margin-top:110px;

    padding:60px 0 120px;

    position:relative;

}


/* ===================================================
   IMAGEM EXCLUSIVA MOBILE
=================================================== */

.services-mobile-image{

    display:none;

}


/* ===================================================
   GRID
=================================================== */

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:34px;

    align-items:stretch;

    margin-top:70px;

}


/* ===================================================
   CARD
=================================================== */

.service-card{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:38px;

    min-height:285px;

    background:#0d0d0d;

    border:1px solid rgba(212,168,71,.14);

    border-radius:18px;

    overflow:hidden;

    position:relative;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}


.service-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );

    opacity:0;

    transition:.35s;

}


.service-card:hover::before{

    opacity:1;

}


.service-card:hover{

    transform:translateY(-8px);
    
    background:#111111;

    border-color:rgba(212,168,71,.45);

    box-shadow:
        0 16px 36px rgba(212,168,71,.10);

}


/* ===================================================
   ÍCONE
=================================================== */

.service-card i{

    width:78px;

    height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:26px;

    font-size:38px;

    color:var(--gold);

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

    border-radius:22px;

    transition:.35s;

}


.service-card:hover i{

    transform:scale(1.08);

}


/* ===================================================
   TÍTULO
=================================================== */

.service-card h3{

    color:#fff;

    font-size:30px;

    line-height:1.2;

    margin-bottom:18px;

}


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

.service-card p{

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

    font-size:16px;

    line-height:1.9;

    max-width:290px;

}


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

@media(max-width:1200px){

    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


@media(max-width:992px){

    .services-grid{

        grid-template-columns:1fr;

    }

}


/* ===================================================
   MOBILE
=================================================== */

@media(max-width:768px){

    .services{

        padding:70px 0;

        overflow:hidden;

    }


    /* ===================================================
   IMAGEM MOBILE - FULL WIDTH
=================================================== */

    .services-mobile-image{
    
        display:block;
    
        position:relative;
    
        width:100vw;
    
        left:50%;
    
        transform:translateX(-50%);
    
        margin:55px 0;
    
        overflow:hidden;
    
        border:0;
    
        border-radius:0;
    
        background:#070707;
    
    }
    
    
    .services-mobile-image img{
    
        display:block;
    
        width:100%;
    
        max-width:none;
    
        height:auto;
    
        object-fit:cover;
    
    }
    
    
    /* FADE SUPERIOR E INFERIOR */
    
    .services-mobile-image::after{
    
        content:"";
    
        position:absolute;
    
        inset:0;
    
        pointer-events:none;
    
        background:linear-gradient(
            to bottom,
            #070707 0%,
            rgba(7,7,7,.55) 5%,
            transparent 14%,
            transparent 86%,
            rgba(7,7,7,.55) 95%,
            #070707 100%
        );
    
    }


    /* ===================================================
       GRID MOBILE
    =================================================== */

    .services-grid{

        grid-template-columns:1fr;

        gap:25px;

        margin-top:0;

    }


    /* ===================================================
       CARDS MOBILE
    =================================================== */

    .service-card{

        padding:30px;

        min-height:auto;

    }


    .service-card h3{

        font-size:24px;

    }

}


/* ===================================================
   CELULARES PEQUENOS
=================================================== */

@media(max-width:480px){

    .services-mobile-image{

        width:100vw;

        margin:45px 0;

        border-radius:0;

    }


    .service-card{

        padding:28px;

    }


    .service-card h3{

        font-size:23px;

    }

}