/* ===================================================
   Hosty Design V2
   animations.css - Part 1
   Keyframes + Global Animations
=================================================== */

/* ===========================
   Fade In
=========================== */

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

/* ===========================
   Fade Up
=========================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
   Fade Down
=========================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
   Fade Left
=========================== */

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ===========================
   Fade Right
=========================== */

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ===========================
   Zoom In
=========================== */

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.7);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ===========================
   Floating
=========================== */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ===========================
   Pulse
=========================== */

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

/* ===========================
   Rotate
=========================== */

@keyframes rotate360{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ===========================
   Animation Classes
=========================== */

.fade-in{

    animation:fadeIn .8s ease forwards;

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.fade-down{

    animation:fadeDown .8s ease forwards;

}

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

.fade-right{

    animation:fadeRight .8s ease forwards;

}

.zoom-in{

    animation:zoomIn .7s ease forwards;

}

.float{

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

}

.pulse{

    animation:pulse 2s infinite;

}

.rotate{

    animation:rotate360 8s linear infinite;

}

/* ===================================================
   Hosty Design V2
   animations.css - Part 2
   Hover Effects + Interactive Animations
=================================================== */

/* ===========================
   Buttons
=========================== */

.btn-primary,
.btn-secondary{

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

}

.btn-primary:hover{

    transform:translateY(-5px);

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

}

.btn-secondary:hover{

    transform:translateY(-5px);

    background:#ffffff;

    color:var(--primary-color);

}

/* ===========================
   Cards
=========================== */

.project-card,
.feature-card,
.product-category,
.why-card,
.testimonial-card{

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

}

.project-card:hover,
.feature-card:hover,
.product-category:hover,
.why-card:hover,
.testimonial-card:hover{

    transform:translateY(-12px);

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

}

/* ===========================
   Gallery
=========================== */

.gallery-item{

    overflow:hidden;

    position:relative;

}

.gallery-item img{

    transition:
        transform .6s ease,
        filter .6s ease;

}

.gallery-item:hover img{

    transform:scale(1.12);

    filter:brightness(.9);

}

/* ===========================
   Navigation
=========================== */

.navbar a{

    transition:.35s ease;

}

.navbar a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    right:0;

    width:0;

    height:3px;

    background:var(--secondary-color);

    transition:.35s;

}

.navbar a:hover::after,

.navbar a.active::after{

    width:100%;

}

/* ===========================
   Logo
=========================== */

.logo img{

    transition:.5s ease;

}

.logo:hover img{

    transform:scale(1.08);

}

/* ===========================
   Statistics
=========================== */

.stat-box{

    transition:.4s ease;

}

.stat-box:hover{

    transform:translateY(-10px);

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

}

/* ===========================
   Hero Background
=========================== */

.hero{

    animation:fadeIn 1.2s ease;

}

.hero-content{

    animation:fadeRight 1s ease;

}

/* ===========================
   Scroll Animation Helper
=========================== */

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:all .9s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ===========================
   Smooth Image Hover
=========================== */

img{

    transition:transform .4s ease;

}

/* ===========================
   Icon Hover
=========================== */

.icon{

    transition:.35s ease;

}

.icon:hover{

    transform:rotate(8deg) scale(1.15);

}

/* ===========================
   Disable Animation
=========================== */

.no-animation{

    animation:none !important;

    transition:none !important;

}