/* ========== Fade in Left Animation ========== */
@-webkit-keyframes fade-in-left {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-60px,0,0);
        -ms-transform: translate3d(-60px,0,0);
        -moz-transform: translate3d(-60px,0,0);
        transform: translate3d(-60px,0,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        -moz-transform: none;
        transform: none;
    }
}
@keyframes fade-in-left {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-60px,0,0);
        -ms-transform: translate3d(-60px,0,0);
        -moz-transform: translate3d(-60px,0,0);
        transform: translate3d(-60px,0,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        -moz-transform: none;
        transform: none;
    }
}
.fade-in-left {
    -webkit-animation-name: fade-in-left;
    -ms-animation-name: fade-in-left;
    -moz-animation-name: fade-in-left;
    animation-name: fade-in-left;
}
/* ========== End Fade in Left Animation ========== */

/* ========== Fade in Right Animation ========== */
@-webkit-keyframes fade-in-right {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(60px,0,0);
        -ms-transform: translate3d(60px,0,0);
        -moz-transform: translate3d(60px,0,0);
        transform: translate3d(60px,0,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        -moz-transform: none;
        transform: none;
    }
}
@keyframes fade-in-right {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(60px,0,0);
        -ms-transform: translate3d(60px,0,0);
        -moz-transform: translate3d(60px,0,0);
        transform: translate3d(60px,0,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        -moz-transform: none;
        transform: none;
    }
}
.fade-in-right {
    -webkit-animation-name: fade-in-right;
    -ms-animation-name: fade-in-right;
    -moz-animation-name: fade-in-right;
    animation-name: fade-in-right;
}
/* ========== End Fade in Right Animation ========== */

/* ========== Fade in Up Animation ========== */
@-webkit-keyframes fade-in-up {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,60px,0);
        -ms-transform: translate3d(0,60px,0);
        -moz-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        -moz-transform: none;
        transform: none;
    }
}
@keyframes fade-in-up {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,60px,0);
        -ms-transform: translate3d(0,60px,0);
        -moz-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        -moz-transform: none;
        transform: none;
    }
}
.fade-in-up {
    -webkit-animation-name: fade-in-up;
    -ms-animation-name: fade-in-up;
    -moz-animation-name: fade-in-up;
    animation-name: fade-in-up;
}
/* ========== End Fade in Up Animation ========== */

/* ========== Background Animation  ========== */
@-webkit-keyframes bg-bottom-left {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        -ms-transform: scale(1) translate(0, 0);
        -moz-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        -webkit-transform-origin: 16% 84%;
        -ms-transform-origin: 16% 84%;
        -moz-transform-origin: 16% 84%;
        transform-origin: 16% 84%;
    }
    100% {
        -webkit-transform: scale(1.08) translate(-20px, 15px);
        -ms-transform: scale(1.08) translate(-20px, 15px);
        -moz-transform: scale(1.08) translate(-20px, 15px);
        transform: scale(1.08) translate(-20px, 15px);
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        -moz-transform-origin: left bottom;
        transform-origin: left bottom;
    }
}
@keyframes bg-bottom-left {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        -ms-transform: scale(1) translate(0, 0);
        -moz-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        -webkit-transform-origin: 16% 84%;
        -ms-transform-origin: 16% 84%;
        -moz-transform-origin: 16% 84%;
        transform-origin: 16% 84%;
    }
    100% {
        -webkit-transform: scale(1.08) translate(-20px, 15px);
        -ms-transform: scale(1.08) translate(-20px, 15px);
        -moz-transform: scale(1.08) translate(-20px, 15px);
        transform: scale(1.08) translate(-20px, 15px);
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        -moz-transform-origin: left bottom;
        transform-origin: left bottom;
    }
}
.bg-bottom-left {
    -webkit-animation: bg-bottom-left 5s linear;
    -ms-animation: bg-bottom-left 5s linear;
    -moz-animation: bg-bottom-left 5s linear;
    animation: bg-bottom-left 5s linear;
}
/* ========== End Background Animation ========== */

/* ========== Text Shown Animation ========== */
@-webkit-keyframes text-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}
@keyframes text-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}
.text-expand {
	-webkit-animation: text-expand 1.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    -ms-animation: text-expand 1.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    -moz-animation: text-expand 1.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: text-expand 1.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
/* ========== End Text Shown Animation ========== */

/* ========== Border Animation ========== */
@-webkit-keyframes border-expand {
    0% {
        left:50%;
        right: 50%;
        width: 0;
        opacity: 0;
    }
    100% {
        left:0;
        right: 0;
        width: 40%;
        opacity: 1;
    }
}
@keyframes border-expand {
    0% {
        left:50%;
        right: 50%;
        width: 0;
        opacity: 0;
    }
    100% {
        left:0;
        right: 0;
        width: 40%;
        opacity: 1;
    }
}
.border-expand-animation:after {
	-webkit-animation: border-expand 2s .3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    -ms-animation: border-expand 2s .3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    -moz-animation: border-expand 2s .3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: border-expand 2s .3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
/* ========== End Border Animation ========== */

/* ========== Pulse Effect Animation ========== */
@-webkit-keyframes play-pulse-effect-sm {

    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 8px rgba(241, 186, 12, 0.3);
        box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 8px rgba(241, 186, 12, 0.3);
    }
    100% {
        -webkit-box-shadow: 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 8px rgba(241, 186, 12, 0.3), 0 0 0 16px rgba(241, 186, 12, 0);
        box-shadow: 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 8px rgba(241, 186, 12, 0.3), 0 0 0 16px rgba(241, 186, 12, 0);
    }
}
@keyframes play-pulse-effect-sm {

    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 8px rgba(241, 186, 12, 0.3);
        box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 8px rgba(241, 186, 12, 0.3);
    }
    100% {
        -webkit-box-shadow: 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 8px rgba(241, 186, 12, 0.3), 0 0 0 16px rgba(241, 186, 12, 0);
        box-shadow: 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 8px rgba(241, 186, 12, 0.3), 0 0 0 16px rgba(241, 186, 12, 0);
    }
}

@-webkit-keyframes play-pulse-effect {

    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 6px rgba(241, 186, 12, 0.3), 0 0 0 20px rgba(241, 186, 12, 0.3);
        box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 6px rgba(241, 186, 12, 0.3), 0 0 0 20px rgba(241, 186, 12, 0.3);
    }
    100% {
        -webkit-box-shadow: 0 0 0 6px rgba(241, 186, 12, 0.3), 0 0 0 20px rgba(241, 186, 12, 0.3), 0 0 0 36px rgba(241, 186, 12, 0);
        box-shadow: 0 0 0 6px rgba(241, 186, 12, 0.3), 0 0 0 20px rgba(241, 186, 12, 0.3), 0 0 0 36px rgba(241, 186, 12, 0);
    }
}
@keyframes play-pulse-effect {

    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 6px rgba(241, 186, 12, 0.3), 0 0 0 14px rgba(241, 186, 12, 0.3);
        box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 6px rgba(241, 186, 12, 0.3), 0 0 0 14px rgba(241, 186, 12, 0.3);
    }
    100% {
        -webkit-box-shadow: 0 0 0 6px rgba(241, 186, 12, 0.3), 0 0 0 14px rgba(241, 186, 12, 0.3), 0 0 0 30px rgba(241, 186, 12, 0);
        box-shadow: 0 0 0 6px rgba(241, 186, 12, 0.3), 0 0 0 14px rgba(241, 186, 12, 0.3), 0 0 0 30px rgba(241, 186, 12, 0);
    }
}

@-webkit-keyframes pulse-effect-lg {

    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.15), 0 0 0 15px rgba(241, 186, 12, 0.15), 0 0 0 38px rgba(241, 186, 12, 0.15);
        box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.15), 0 0 0 15px rgba(241, 186, 12, 0.15), 0 0 0 40px rgba(241, 186, 12, 0.15);
    }
    100% {
        -webkit-box-shadow: 0 0 0 15px rgba(241, 186, 12, 0.15), 0 0 0 38px rgba(241, 186, 12, 0.15), 0 0 0 40px rgba(241, 186, 12, 0);
        box-shadow: 0 0 0 15px rgba(241, 186, 12, 0.15), 0 0 0 38px rgba(241, 186, 12, 0.15), 0 0 0 40px rgba(241, 186, 12, 0);
    }
}
@keyframes pulse-effect-lg {

    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.15), 0 0 0 15px rgba(241, 186, 12, 0.15), 0 0 0 38px rgba(241, 186, 12, 0.15);
        box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.15), 0 0 0 15px rgba(241, 186, 12, 0.15), 0 0 0 38px rgba(241, 186, 12, 0.15);
    }
    100% {
        -webkit-box-shadow: 0 0 0 15px rgba(241, 186, 12, 0.15), 0 0 0 38px rgba(241, 186, 12, 0.15), 0 0 0 40px rgba(241, 186, 12, 0);
        box-shadow: 0 0 0 15px rgba(241, 186, 12, 0.15), 0 0 0 38px rgba(241, 186, 12, 0.15), 0 0 0 40px rgba(241, 186, 12, 0);
    }
}

.play-pulse-effect-sm {
    -webkit-animation: play-pulse-effect-sm linear infinite;
    -ms-animation: play-pulse-effect-sm linear infinite;
    -moz-animation: play-pulse-effect-sm linear infinite;
    animation: play-pulse-effect-sm linear infinite;
}

.play-pulse-effect {
    -webkit-animation: play-pulse-effect linear infinite;
    -ms-animation: play-pulse-effect linear infinite;
    -moz-animation: play-pulse-effect linear infinite;
    animation: play-pulse-effect linear infinite;
}
.pulse-effect-lg {
    -webkit-animation: pulse-effect-lg linear infinite;
    -ms-animation: pulse-effect-lg linear infinite;
    -moz-animation: pulse-effect-lg linear infinite;
    animation: pulse-effect-lg linear infinite;
}
/* ========== End Pulse Effect Animation ========== */

/* ========== Scroll Arrow Effect Animation ========== */
@-webkit-keyframes scroll-arrow-effect {
    0% {
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        transform: translateY(-5px);
        opacity: 0;
    }
    50% {
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
        opacity: .6;
    }
    100% {
        -webkit-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -moz-transform: translateY(5px);
        transform: translateY(5px);
        opacity: 1;
    }
}
@keyframes scroll-arrow-effect {
    0% {
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        transform: translateY(-5px);
        opacity: 0;
    }
    50% {
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
        opacity: .6;
    }
    100% {
        -webkit-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -moz-transform: translateY(5px);
        transform: translateY(5px);
        opacity: 1;
    }
}
.scroll-arrow-effect {
    -webkit-animation: scroll-arrow-effect .9s infinite alternate linear;
    -ms-animation: scroll-arrow-effect .9s infinite alternate linear;
    -moz-animation: scroll-arrow-effect .9s infinite alternate linear;
    animation: scroll-arrow-effect .9s infinite alternate linear;
}
/* ========== Scroll Arrow Effect Animation ========== */

/* ==========Zoom In Effect Animation ========== */
@-webkit-keyframes zoom-in-effect {
    0% {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1.15);
        -ms-transform: scale(1.15);
        -moz-transform: scale(1.15);
        transform: scale(1.15);
        opacity: 1;
    }
}
@keyframes zoom-in-effect {
    0% {
        -webkit-transform: scale(0.4);
        -ms-transform: scale(0.4);
        -moz-transform: scale(0.4);
        transform: scale(0.4);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
.zoom-in-effect {
    -webkit-animation: zoom-in-effect;
    -ms-animation: zoom-in-effect;
    -moz-animation: zoom-in-effect;
    animation: zoom-in-effect;
}
/* ==========Zoom In Effect Animation ========== */

/* ========== CSS for Comman Transition ========== */
.client-logo,
.client-logo:after,
.footer-links-list a,
.accordion-button i,
.owl-nav-style .owl-nav button,
.border-animation:before,
.hover-link:after,
.hs-has-sub-menu:after,
.fixed-heade .navbar-brand,
#testimonial-slider .owl-dots .owl-dot span,
.index-banner-thumbnails img,
.app-platform a,
.founder-image:before,
.static-content-wrapper a,
.card,
.view-more,
.transition-all-3ms {
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
#client-list-slider .owl-item img,
.transition-all-4ms {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.fixed-headev .navbar-nav .nav-link,
.fixed-heade .navbar-nav .nav-item > .btn,
.transition-all-5ms {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
/* ========== End CSS for Comman Transition ========== */

/* ========== CSS for Animation Durations ========== */
.active .testimonial-content,
.animation-dl-1ms {
    -webkit-animation-delay: .1s;
    -ms-animation-delay: .1s;
    -moz-animation-delay: .1s;
    animation-delay: .1s;
}
.animation-dl-2ms {
    -webkit-animation-delay: .2s;
    -ms-animation-delay: .2s;
    -moz-animation-delay: .2s;
    animation-delay: .2s;
}
.active .testimonial-user-name,
.animation-dl-3ms {
    -webkit-animation-delay: .3s;
    -ms-animation-delay: .3s;
    -moz-animation-delay: .3s;
    animation-delay: .3s;
}
.animation-dl-4ms {
    -webkit-animation-delay: .4s;
    -ms-animation-delay: .4s;
    -moz-animation-delay: .4s;
    animation-delay: .4s;
}
.animation-dl-5ms {
    -webkit-animation-delay: .5s;
    -ms-animation-delay: .5s;
    -moz-animation-delay: .5s;
    animation-delay: .5s;
}
/* ==========  End CSS for Animation Durations ========== */

/* ========== CSS for Animation Durations ========== */
.animation-du-2ms {
    -webkit-animation-duration: .2s;
    -ms-animation-duration: .2s;
    -moz-animation-duration: .2s;
    animation-duration: .2s;
}
.animation-du-4ms {
    -webkit-animation-duration: .4s;
    -ms-animation-duration: .4s;
    -moz-animation-duration: .4s;
    animation-duration: .4s;
}
.animation-du-6ms {
    -webkit-animation-duration: .6s;
    -ms-animation-duration: .6s;
    -moz-animation-duration: .6s;
    animation-duration: .6s;
}
.animation-du-1s {
    -webkit-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}
.animation-du-1_5s {
    -webkit-animation-duration: 1.5s;
    -ms-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.animation-du-2s {
    -webkit-animation-duration: 2s;
    -ms-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;
}
.animation-du-3s {
    -webkit-animation-duration: 3s;
    -ms-animation-duration: 3s;
    -moz-animation-duration: 3s;
    animation-duration: 3s;
}
/* ========== End CSS for Animation Durations ========== */

/* ========== CSS for Use Animations ========== */
.item-animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 1;
}
.banner-content h1 {
    -webkit-animation-name: fade-in-left;
    -ms-animation-name: fade-in-left;
    -moz-animation-name: fade-in-left;
    animation-name: fade-in-left
}
.banner-content .banner-desc {
    -webkit-animation-name: fade-in-right;
    -ms-animation-name: fade-in-right;
    -moz-animation-name: fade-in-right;
    animation-name: fade-in-right
}
.banner-content .banner-action,
.active .testimonial-user-name,
.active .testimonial-content {
    -webkit-animation-name: fade-in-up;
    -ms-animation-name: fade-in-up;
    -moz-animation-name: fade-in-up;
    animation-name: fade-in-up;
}
.index-banner-img {
	-webkit-animation: bg-bottom-left 5s linear;
    -ms-animation: bg-bottom-left 5s linear;
    -moz-animation: bg-bottom-left 5s linear;
    animation: bg-bottom-left 5s linear;
}
.active .tumbnails-img {
    -webkit-animation: zoom-in-effect 1.pulse-effects linear;
    -ms-animation: zoom-in-effect 1.pulse-effects linear;
    -moz-animation: zoom-in-effect 1.pulse-effects linear;
    animation: zoom-in-effect 1.pulse-effects linear;
}
.border-animation:before {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -5px;
    top: -5px;
    border: 4px solid rgba(254, 205, 56,.8);
    /* z-index: 9; */
}
.border-animation:hover:before {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
/* ========== End CSS for Use Animations ========== */


@media (max-width: 767.98px) {
    @-webkit-keyframes play-pulse-effect {

        0% {
            -webkit-box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 10px rgba(241, 186, 12, 0.3);
            box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 10px rgba(241, 186, 12, 0.3);
        }
        100% {
            -webkit-box-shadow: 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 10px rgba(241, 186, 12, 0.3), 0 0 0 20px rgba(241, 186, 12, 0);
            box-shadow: 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 10px rgba(241, 186, 12, 0.3), 0 0 0 20px rgba(241, 186, 12, 0);
        }
    }
    @keyframes play-pulse-effect {
    
        0% {
            -webkit-box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 10px rgba(241, 186, 12, 0.3);
            box-shadow: 0 0 0 0 rgba(241, 186, 12, 0.3), 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 10px rgba(241, 186, 12, 0.3);
        }
        100% {
            -webkit-box-shadow: 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 10px rgba(241, 186, 12, 0.3), 0 0 0 20px rgba(241, 186, 12, 0);
            box-shadow: 0 0 0 2px rgba(241, 186, 12, 0.3), 0 0 0 10px rgba(241, 186, 12, 0.3), 0 0 0 20px rgba(241, 186, 12, 0);
        }
    }   
}