/* =========================================
   BG
========================================= */

.services-bg {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
    
    background-color: #1A1C2B;
}


/* =========================================
   ORBS
========================================= */

.orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .55;

    mix-blend-mode: screen;

    will-change: transform;
}



.orb-01,
.orb-02,
.orb-03 {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* ORB 01 */

.orb-01 {

    width: 40vw;
    height: 40vw;

    background: #1f202b;

    top: 10%;
    left: -10%;
}


/* ORB 02 */

.orb-02 {

    width: 35vw;
    height: 35vw;

    background: #1f1927;

    bottom: -10%;
    right: -5%;
}


/* ORB 03 */

.orb-03 {

    width: 25vw;
    height: 25vw;

    background: #ff3c78;

    top: 20%;
    left: 40%;
}

/* =========================================
   SERVICES
========================================= */
.services {
    position: relative;

    /* espaço extra para intro */
    min-height: 100vh;
}

.service-footer span{

    width:4px;
    height:4px;

    background:#ff4d6d;

    border-radius:50%;

    display:inline-block;

    margin:0 .8rem;

    transform:translateY(-2px);
}



/* TOPBAR */
.services-topbar{
    position:absolute;

    top:50%;
    left:50% !important;

    transform:translate(-50%, -50%) !important;

    z-index:20;
    will-change:transform;
}

/* TEXTO */

.services-topbar p {
    font-weight: 400;
    letter-spacing: -0.05em;
}


.services-heading {
    font-size: clamp(1.1rem, 10vw, 15rem);
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 960px){

    .services-heading{
        font-size: clamp(2rem, 8vw, 4rem);
        max-width: 90vw;
        text-align:center;
    }

}

/* LETRAS */
.services-heading .char {
    display: inline-block;

    opacity: 0;
    transform: translateY(20px);
}

/* STACK */

.services-stack {
    position: relative;
    top: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;
}

/* CARD */

.service-card {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 80px;

    opacity: 0;
}

/* ACTIVE */
/* PRIMEIRO CARD VISÍVEL */

.service-card:first-child {
    opacity: 1;
}

/* CONTENT */

.service-content {
    width: 100%;
    max-width: 1400px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


/* TITLE */

.service-title {
    font-size: clamp(6rem, 18vw, 14rem);
    line-height: .85;
    letter-spacing: -.08em;
    font-weight: 800;

    margin-bottom: 40px;
}

/* TAGLINE */

.service-tagline {
    font-size: clamp(1rem, 2vw, 1.4rem);
    line-height: 1.5;

    max-width: 800px;

    margin-bottom: 80px;

    opacity: .9;
}

/* FOOTER */

/* =========================================
   SERVICE LIST
========================================= */

.service-list{

    list-style:none;

    padding:0;
    margin:0;

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;

    gap:18px;

    font-size:.9rem;
    letter-spacing:.04em;

    opacity:.6;

}

.service-list li{

    display:flex;
    align-items:center;
    color: #ffffff;

}

.service-list li:not(:last-child)::after{

    content:"";

    width:4px;
    height:4px;

    border-radius:50%;

    background:#ff4d6d;

    margin-left:18px;

}

.service-footer span {
    width: 4px;
    height: 4px;

    border-radius: 50%;
}

@media (max-width:960px){

    .service-list{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        width:fit-content;

        margin:0 auto;

    }

    .service-list li{

        position:relative;

        padding-left:18px;

    }

    /* remove a bolinha horizontal */

    .service-list li::after{

        display:none;

    }

    /* adiciona marcador */

    .service-list li::before{

        content:"";

        position:absolute;

        left:0;
        top:50%;

        width:6px;
        height:6px;

        border-radius:50%;

        background:#ff4d6d;

        transform:translateY(-50%);

    }

}