/*=========================================================
    Gururaj Trade Network
    Premium Animation Stylesheet
==========================================================*/

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

.fade-up{
    opacity:0;
    transform:translateY(50px);
    animation:fadeUp .8s ease forwards;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

.fade-down{
    opacity:0;
    transform:translateY(-40px);
    animation:fadeDown .8s ease forwards;
}

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

.fade-left{
    opacity:0;
    transform:translateX(60px);
    animation:fadeLeft .8s ease forwards;
}

@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(60px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

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

.fade-right{
    opacity:0;
    transform:translateX(-60px);
    animation:fadeRight .8s ease forwards;
}

@keyframes fadeRight{
    from{
        opacity:0;
        transform:translateX(-60px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

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

.zoom-in{
    opacity:0;
    transform:scale(.85);
    animation:zoomIn .8s ease forwards;
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.85);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/*=========================
Zoom Out Hover
=========================*/

.zoom-hover{
    overflow:hidden;
}

.zoom-hover img{
    transition:.6s ease;
}

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

/*=========================
Image Reveal
=========================*/

.image-reveal{
    overflow:hidden;
}

.image-reveal img{
    transform:scale(1.15);
    transition:1.2s ease;
}

.image-reveal.active img,
.image-reveal:hover img{
    transform:scale(1);
}

/*=========================
Reveal Animation
=========================*/

.reveal{
    opacity:0;
    transform:translateY(80px);
    transition:1s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/*=========================
Button Hover
=========================*/

.btn-theme,
.btn-outline-theme{
    transition:.35s ease;
}

.btn-theme:hover,
.btn-outline-theme:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

/*=========================
Card Hover
=========================*/

.card-hover{
    transition:.4s ease;
}

.card-hover:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

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

.float{
    animation:floating 4s ease-in-out infinite;
}

@keyframes floating{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
    100%{
        transform:translateY(0);
    }
}

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

.rotate{
    animation:rotate360 15s linear infinite;
}

@keyframes rotate360{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

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

.pulse{
    animation:pulse 2s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(237,45,65,.4);
    }

    70%{
        transform:scale(1.05);
        box-shadow:0 0 0 18px rgba(237,45,65,0);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(237,45,65,0);
    }

}

/*=========================
Underline Hover
=========================*/

.hover-line{
    position:relative;
    display:inline-block;
}

.hover-line::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:#ED2D41;
    transition:.35s ease;
}

.hover-line:hover::after{
    width:100%;
}

/*=========================
Section Transition
=========================*/

.section-transition{
    transition:all .5s ease;
}

/*=========================
Glass Effect
=========================*/

.glass-effect{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.2);
}

/*=========================
Hero Text Animation
=========================*/

.hero-title span{
    display:inline-block;
    animation:heroText .8s ease forwards;
}

@keyframes heroText{

    from{
        opacity:0;
        transform:translateY(80px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/*=========================
Loader
=========================*/

#pageLoader{
    transition:.6s ease;
}

#pageLoader.loaded{
    opacity:0;
    visibility:hidden;
}

/*=========================
Scroll Indicator
=========================*/

.scroll-indicator span{
    animation:scrollLine 2s infinite;
}

@keyframes scrollLine{

    0%{
        height:10px;
        opacity:1;
    }

    100%{
        height:60px;
        opacity:0;
    }

}

/*=========================
Background Gradient Animation
=========================*/

.gradient-bg{
    background:linear-gradient(-45deg,#ED2D41,#C62828,#007A4D,#565656);
    background-size:400% 400%;
    animation:gradientMove 10s ease infinite;
}

@keyframes gradientMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

/*=========================
Stagger Delay Classes
=========================*/

.delay-1{animation-delay:.2s;}
.delay-2{animation-delay:.4s;}
.delay-3{animation-delay:.6s;}
.delay-4{animation-delay:.8s;}
.delay-5{animation-delay:1s;}
.delay-6{animation-delay:1.2s;}

/*=========================
Smooth Transition Utility
=========================*/

.transition{
    transition:all .35s ease;
}