/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 10 2026 | 13:37:15 */
/* =========================================
   LOOP LYFSTYL — SERVICES
   ========================================= */

.ll-services {
    overflow: hidden;
}

/* Initial state */
.ll-services-heading,
.ll-services-intro,
.ll-service-card {
    opacity: 0;
    transform: translate3d(0, 80px, 0);
    will-change: opacity, transform;
}

/* Heading */
.ll-services-heading {
    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Intro */
.ll-services-intro {
    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 100ms;
}

/* Cards */
.ll-service-card {
    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================
   REVEALED
   ========================================= */

.ll-services-heading.ll-reveal,
.ll-services-intro.ll-reveal,
.ll-service-card.ll-reveal {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* =========================================
   STAGGER
   ========================================= */

.ll-service-card:nth-child(1) {
    transition-delay: 0ms;
}

.ll-service-card:nth-child(2) {
    transition-delay: 120ms;
}

.ll-service-card:nth-child(3) {
    transition-delay: 240ms;
}

.ll-service-card:nth-child(4) {
    transition-delay: 360ms;
}

.ll-service-card:nth-child(5) {
    transition-delay: 480ms;
}


/* =========================================
   SUBTLE HOVER
   ========================================= */

.ll-service-card.ll-reveal:hover {
    transform: translate3d(0, -6px, 0);
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .ll-services-heading,
    .ll-services-intro,
    .ll-service-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}