/*======================================
        GLOBAL TRANSITIONS
======================================*/

*{
    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease;
}

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

.btn{

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

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(0,0,0,.15);

}

/*======================================
        IMAGE HOVER
======================================*/

img{

    transition:transform .6s ease;

}

.amenity-card:hover img,
.wellness-card:hover img,
.wellness-large:hover img,
.gallery .swiper-slide:hover img,
.about-image:hover img{

    transform:scale(1.06);

}

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

.amenity-card,
.feature-item,
.investment-card,
.location-item,
.contact-form{

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

}

.amenity-card:hover,
.feature-item:hover,
.investment-card:hover,
.location-item:hover,
.contact-form:hover{

    transform:translateY(-8px);

}

/*======================================
        NAV LINK
======================================*/

.nav-list a{

    transition:.3s;

}

.nav-list a:hover{

    color:var(--secondary);

}

/*======================================
        SOCIAL ICONS
======================================*/

.social-icons a{

    transition:.35s;

}

.social-icons a:hover{

    transform:translateY(-5px) rotate(8deg);

}

/*======================================
        BACK TO TOP
======================================*/

.back-to-top{

    transition:.35s;

}

.back-to-top:hover{

    transform:translateY(-8px);

}

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

.fade-up{

    opacity:0;

    transform:translateY(50px);

    transition:all .8s ease;

}

.fade-up.active{

    opacity:1;

    transform:translateY(0);

}

/*======================================
        FADE LEFT
======================================*/

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:all .8s ease;

}

.fade-left.active{

    opacity:1;

    transform:translateX(0);

}

/*======================================
        FADE RIGHT
======================================*/

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:all .8s ease;

}

.fade-right.active{

    opacity:1;

    transform:translateX(0);

}

/*======================================
        ZOOM IN
======================================*/

.zoom-in{

    opacity:0;

    transform:scale(.85);

    transition:all .8s ease;

}

.zoom-in.active{

    opacity:1;

    transform:scale(1);

}

/*======================================
        FLOAT ANIMATION
======================================*/

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.hero-form{

    animation:float 5s ease-in-out infinite;

}

/*======================================
        PULSE
======================================*/

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(49,74,45,.4);

    }

    70%{

        box-shadow:0 0 0 15px rgba(49,74,45,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(49,74,45,0);

    }

}

.call-btn{

    animation:pulse 2.5s infinite;

}