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

a,
button,
.btn,
img,
.card,
.project-card,
.news-card,
.gallery-card,
.connect-card,
.counter-box,
.vision-card{

    transition:all .35s ease;

}





/*=====================================================
FLOATING ANIMATION
=====================================================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.floating{

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

}





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

@keyframes pulse{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 rgba(245,130,32,.5);

    }

    70%{

        transform:scale(1.05);

        box-shadow:0 0 0 18px rgba(245,130,32,0);

    }

    100%{

        transform:scale(1);

        box-shadow:0 0 0 rgba(245,130,32,0);

    }

}

.pulse{

    animation:pulse 2.8s infinite;

}





/*=====================================================
BUTTON SHINE
=====================================================*/

.btn{

    overflow:hidden;

    position:relative;

}

.btn::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

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

    transform:skewX(-25deg);

}

.btn:hover::after{

    animation:btnShine .9s linear;

}

@keyframes btnShine{

    100%{

        left:150%;

    }

}





/*=====================================================
IMAGE ZOOM
=====================================================*/

.zoom-hover{

    overflow:hidden;

}

.zoom-hover img{

    transition:.6s;

}

.zoom-hover:hover img{

    transform:scale(1.08);

}





/*=====================================================
ROTATE ICON
=====================================================*/

.rotate-hover:hover i{

    transform:rotate(360deg);

}





/*=====================================================
GRADIENT ANIMATION
=====================================================*/

.gradient-bg{

    background:linear-gradient(
        270deg,
        #f58220,
        #ffb14d,
        #1c2f5b,
        #f58220
    );

    background-size:600% 600%;

    animation:gradientMove 12s ease infinite;

}

@keyframes gradientMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}





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

.fade-up{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}





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

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}





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

.fade-right{

    animation:fadeRight .8s ease forwards;

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}





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

.zoom-in{

    animation:zoomIn .7s ease;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}





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

.back-to-top{

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

}

@keyframes floatButton{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}





/*=====================================================
SCROLLBAR
=====================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ececec;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}

@media(max-width:992px){
.hero-content{
margin-left:0;
text-align:center;
}
}
@media (max-width:767.98px){
.top-bar{
display:none!important;
}
.hero-section {
    padding-top: 117px;
}
}