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

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.fade-in{

animation:fadeIn .8s ease forwards;

}


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

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

.slide-left{

animation:slideLeft .8s ease forwards;

}


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

@keyframes slideRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

.slide-right{

animation:slideRight .8s ease forwards;

}


/* ==========================================
   SCALE
========================================== */

@keyframes scaleUp{

from{

opacity:0;

transform:scale(.85);

}

to{

opacity:1;

transform:scale(1);

}

}

.scale-up{

animation:scaleUp .6s ease forwards;

}


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

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

.floating{

animation:floating 3s ease-in-out infinite;

}


/* ==========================================
   HERO IMAGE
========================================== */

.hero-right img{

animation:floating 4s ease-in-out infinite;

}


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

.primary-btn,

.secondary-btn,

.quote-btn{

transition:.3s;

}

.primary-btn:hover,

.secondary-btn:hover,

.quote-btn:hover{

transform:translateY(-3px);

}


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

.product-card,

.feature-card{

transition:.35s;

}

.product-card:hover,

.feature-card:hover{

transform:translateY(-10px);

}


/* ==========================================
   MODAL
========================================== */

@keyframes modalOpen{

from{

opacity:0;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}

.modal-content{

animation:modalOpen .35s ease;

}


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

.product-card img{

transition:.4s;

}

.product-card:hover img{

transform:scale(1.06);

}


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

.navbar{

transition:.3s;

}


/* ==========================================
   SCROLL REVEAL
========================================== */

.reveal{

opacity:0;

transform:translateY(50px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}


/* ==========================================
   LOADING
========================================== */

.loading{

display:inline-block;

width:18px;

height:18px;

border:3px solid rgba(255,255,255,.4);

border-top:3px solid #fff;

border-radius:50%;

animation:spin .8s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}