/*=========================================
        GOLDEN FLAME AIRBNBS
        ANIMATIONS.CSS
==========================================*/

/*==============================
        SECTION REVEAL
==============================*/

.about,
.apartments,
.amenities,
.gallery,
.statistics,
.testimonials,
.location,
.contact,
footer{

    opacity:0;

    transform:translateY(80px);

    transition:all .9s ease;

}

.show{

    opacity:1 !important;

    transform:translateY(0) !important;

}

/*==============================
        RIPPLE EFFECT
==============================*/

.primary-btn,
.secondary-btn,
.card-btn{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    width:20px;

    height:20px;

    background:rgba(255,255,255,.5);

    border-radius:50%;

    transform:scale(0);

    animation:ripple .6s linear;

}

@keyframes ripple{

    to{

        transform:scale(20);

        opacity:0;

    }

}

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

.gallery-item{

    overflow:hidden;

}

.gallery-item img{

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.apartment-image{

    overflow:hidden;

}

.apartment-image img{

    transition:.5s;

}

.apartment-card:hover img{

    transform:scale(1.1);

}

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

.primary-btn,
.secondary-btn,
.card-btn{

    transition:.35s;

}

.primary-btn:hover{

    transform:translateY(-6px);

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

}

.secondary-btn:hover{

    transform:translateY(-6px);

}

.card-btn:hover{

    transform:translateY(-4px);

}

/*==============================
        FLOATING BUTTONS
==============================*/

.floating-whatsapp{

    animation:floatWhatsapp 2s infinite;

}

.floating-call{

    animation:floatCall 2s infinite .5s;

}

@keyframes floatWhatsapp{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes floatCall{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/*==============================
      SCROLL INDICATOR
==============================*/

.scroll-down{

    animation:scrollArrow 2s infinite;

}

@keyframes scrollArrow{

    0%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,10px);

    }

    100%{

        transform:translate(-50%,0);

    }

}

/*==============================
        PRELOADER
==============================*/

.loader{

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

.fade-in{

    animation:fadeIn .8s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

.zoom-in{

    animation:zoomIn .7s ease forwards;

}

@keyframes zoomIn{

    from{

        transform:scale(.9);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/*==============================
      SLIDE UP
==============================*/

.slide-up{

    animation:slideUp .8s ease forwards;

}

@keyframes slideUp{

    from{

        transform:translateY(50px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

/*==============================
      PAGE LOADED
==============================*/

.loaded{

    animation:pageLoaded .5s ease;

}

@keyframes pageLoaded{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}