/* ===========================
   SERVICES
=========================== */

.services{

    padding:100px 0;

    background:#050505;

}

.services .section-tag{

    display:block;

    text-align:center;

}

.services h2{

    text-align:center;

    color:#fff;

    font-size:3rem;

    margin:18px 0 55px;

}

/* ===========================
   SERVICES ANIMATION
=========================== */

.services .section-tag,
.services h2,
.services-grid{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);

}

.services.active .section-tag{

    opacity:1;

    transform:translateY(0);

    transition-delay:.10s;

}

.services.active h2{

    opacity:1;

    transform:translateY(0);

    transition-delay:.25s;

}

.services.active .services-grid{

    opacity:1;

    transform:translateY(0);

    transition-delay:.45s;

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    overflow:hidden;

    padding:40px;

    transition:.35s ease;

}

.service-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary-color);

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}


.service-card img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    display:block;

    border-radius:16px;

    margin-bottom:25px;

    transition:transform .5s ease;

}

.service-card:hover img{

    transform:scale(1.06);

}

.service-card h3{

    color:#fff;

    font-size:1.45rem;

    margin-bottom:15px;

}

.service-card p{

    color:#bdbdbd;

    line-height:1.8;

}

/* ===========================
   SERVICES RESPONSIVE
=========================== */

@media (max-width:992px){

    .services{

        padding:80px 0;

    }

    .services h2{

        font-size:2.4rem;

        margin-bottom:45px;

    }

    .services-grid{

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

        gap:24px;

    }

    .service-card{

        padding:30px;

    }

}

@media (max-width:768px){

    .services{

        padding:70px 0;

    }

    .services h2{

        font-size:2rem;

        margin-bottom:35px;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .service-card{

        padding:24px;

    }

    .service-card h3{

        font-size:1.3rem;

    }

    .service-card p{

        font-size:.95rem;

    }

}