/* =========================
   GLOBAL TRANSITION
========================= */

*{
    transition:
    background .3s ease,
    color .3s ease,
    border .3s ease,
    transform .4s ease,
    opacity .4s ease;
}

/* =========================
   FADE UP
========================= */

.fade-up{
    opacity:0;
    transform:translateY(40px);
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

/* =========================
   FADE IN
========================= */

.fade-in{
    opacity:0;
}

.fade-in.show{
    opacity:1;
}

/* =========================
   SLIDE LEFT
========================= */

.slide-left{
    opacity:0;
    transform:translateX(-50px);
}

.slide-left.show{
    opacity:1;
    transform:translateX(0);
}

/* =========================
   SLIDE RIGHT
========================= */

.slide-right{
    opacity:0;
    transform:translateX(50px);
}

.slide-right.show{
    opacity:1;
    transform:translateX(0);
}

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

.why-card:hover,
.service-card:hover,
.package-card:hover,
.facility-card:hover,
.therapist-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.3);

}

/* =========================
   IMAGE ZOOM
========================= */

.gallery-item{
    overflow:hidden;
    border-radius:20px;
}

.gallery-item img{
    transition:transform .8s ease;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

/* =========================
   BUTTON
========================= */

.btn-gold:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 10px 30px rgba(212,175,55,.3);

}

/* =========================
   NAVBAR
========================= */

.navbar{

    transition:
    all .4s ease;

}

.navbar.scrolled{

    padding:12px 8%;

    background:
    rgba(0,0,0,.9);

    backdrop-filter:
    blur(20px);

}

/* =========================
   SECTION TITLE
========================= */

.section-title h2{

    position:relative;

}

.section-title h2::after{

    content:"";

    width:60px;
    height:3px;

    background:#D4AF37;

    position:absolute;

    bottom:-15px;
    left:50%;

    transform:
    translateX(-50%);

}

/* =========================
   FLOATING WA
========================= */

.floating-wa{

    animation:
    pulse 2.5s infinite;

}

@keyframes pulse{

    0%{
        box-shadow:
        0 0 0 0 rgba(37,211,102,.5);
    }

    70%{
        box-shadow:
        0 0 0 15px rgba(37,211,102,0);
    }

    100%{
        box-shadow:
        0 0 0 0 rgba(37,211,102,0);
    }

}

/* =========================
   HERO CONTENT
========================= */

.hero-content{

    animation:
    heroFade 1.2s ease;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:
        translateY(30px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

/* =========================
   STAT COUNTER HOVER
========================= */

.stat-box:hover{

    transform:
    translateY(-5px);

}

/* =========================
   FAQ
========================= */

.faq-item{

    transition:
    all .3s ease;

}

.faq-item:hover{

    border-color:#D4AF37;

}