:root{
	 --main-container: 1320px;
    --container-gutters: 24px;
}

section {
    position: relative;
    z-index: 1
}

figure {
    margin: 0
}
.p-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

img {
    border: none;
    max-width: 100%
}

.hero-container {
    max-width: calc(var(--main-container) + var(--container-gutters));
    margin: 0 auto;
    padding: 0 20px;
}

@media(max-width: 1399px) {
    :root {
        --main-container: 1250px
    }
}


@media(min-width: 1400px) {

    .hero-container{
        max-width: calc(var(--main-container) + var(--container-gutters))
    }

  
}

@media only screen and (min-width: 1300px) {

    .hero-container.px-0 {
        max-width: var(--main-container)
    }

   
}

.cover-background {
    background-size: cover;
    background-position: center center !important
}

.bg {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.bg.image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.bg-image.overlay::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--bs-bg-color3)
}

.text-underline {
    text-decoration: underline
}
[data-bg-src] {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
}

.position-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

[data-overlay] {
    position: relative;
    z-index: 2
}

[data-overlay] [class^=col-],
[data-overlay] [class*=col-] {
    z-index: 1
}

[data-overlay]:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}


.ripple-animation {
    animation-duration: var(--ripple-ani-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-name: ripple
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    100% {
        transform: scale(2.1);
        opacity: 0
    }
}

@keyframes ripple-video {
    0% {
        box-shadow: 0 0 0 0 hsla(0, 0%, 100%, .3), 0 0 0 10px hsla(0, 0%, 100%, .3), 0 0 0 20px hsla(0, 0%, 100%, .3)
    }

    100% {
        box-shadow: 0 0 0 10px hsla(0, 0%, 100%, .3), 0 0 0 20px hsla(0, 0%, 100%, .3), 0 0 0 30px hsla(0, 0%, 100%, 0)
    }
}

.movingX {
    animation: movingX 5s linear infinite
}

@keyframes movingX {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(30px)
    }

    100% {
        transform: translateX(0)
    }
}

.moving {
    animation: moving 8s linear infinite
}

@keyframes moving {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-50px)
    }

    100% {
        transform: translateX(0)
    }
}

.jump {
    animation: jumpAni 7s linear infinite
}

.jump1 {
    animation: jumpAni 6s linear infinite
}

.jump2 {
    animation: jumpAni 5s linear infinite
}

.jump3 {
    animation: jumpAni 4s linear infinite
}

@keyframes jumpAni {
    0% {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-30px)
    }

    100% {
        transform: translateY(0)
    }
}

.jump-reverse {
    animation: jumpReverseAni 7s linear infinite
}

@keyframes jumpReverseAni {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(30px)
    }

    100% {
        transform: translateY(0)
    }
}

.spin {
    animation: spin 15s linear infinite
}

.spin2 {
    animation: spin2 20s linear infinite
}

.spin3 {
    animation: spin3 20s linear infinite
}

.spin-slow {
    animation: spin 50s linear infinite
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-360deg)
    }
}

@keyframes spin2 {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes spin3 {
    0% {
        transform: rotateX(0)
    }

    100% {
        transform: rotateX(-180deg)
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }

    0% {
        border-right-color: rgba(0, 0, 0, 0);
        border-bottom-color: rgba(0, 0, 0, 0);
        border-top-color: rgba(0, 0, 0, 0);
        border-left-color: rgba(0, 0, 0, 0)
    }

    75% {
        border-top-color: #fff;
        border-left-color: #fff;
        border-right-color: #fff;
        border-bottom-color: rgba(0, 0, 0, 0)
    }

    100% {
        border-right-color: rgba(0, 0, 0, 0);
        border-bottom-color: rgba(0, 0, 0, 0);
        border-top-color: rgba(0, 0, 0, 0);
        border-left-color: rgba(0, 0, 0, 0)
    }
}

.img-anim-right {
    animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) .4s;
    opacity: 0
}

@keyframes img-anim-right {
    0% {
        transform: translateX(5%);
        clip-path: inset(0 0 0 100%);
        opacity: 0
    }

    100% {
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1
    }
}

.img-anim-left {
    animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) .4s;
    opacity: 0
}

@keyframes img-anim-left {
    0% {
        transform: translateX(-5%);
        clip-path: inset(0 100% 0 0);
        opacity: 0
    }

    100% {
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1
    }
}

.img-anim-top {
    animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0
}

@keyframes img-anim-top {
    0% {
        transform: translateY(-5%);
        clip-path: inset(0 0 100% 0);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
        opacity: 1
    }
}

.data-img-hover {
    position: relative;
    width: 100%
}

.data-img-hover img {
    width: 100%;
    height: auto
}

.data-img-hover canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.text-anim-right {
    animation: text-anim-right .4s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s
}

@keyframes text-anim-right {
    from {
        transform: translateX(5%);
        clip-path: inset(0 0 0 100%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1
    }
}

.text-anim-left {
    animation: text-anim-left .4s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s
}

@keyframes text-anim-left {
    from {
        transform: translateX(-5%);
        clip-path: inset(0 0 0 100%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1
    }
}

.text-anim-top {
    animation: text-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s
}

@keyframes text-anim-top {
    from {
        transform: translateY(-5%);
        opacity: 0
    }

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

@keyframes rippleOne {
    70% {
        box-shadow: 0 0 0 40px rgba(244, 68, 56, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(244, 68, 56, 0)
    }
}

@keyframes cir36 {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes rounded {
    50% {
        transform: rotate(15deg)
    }
}

@keyframes spinner {
    to {
        transform: rotateZ(360deg)
    }
}

@keyframes letters-loading {

    0%,
    75%,
    100% {
        opacity: 0;
        transform: rotateY(-90deg)
    }

    25%,
    50% {
        opacity: 1;
        transform: rotateY(0deg)
    }
}

@keyframes loaderspin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes tpswing {
    0% {
        transform: rotate(20deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

@keyframes width {
    0% {
        width: 0%
    }

    100% {
        width: 100%
    }
}

@keyframes loaderpulse {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.2)
    }
}

@keyframes rounded {
    50% {
        transform: rotate(20deg)
    }
}

@keyframes cir36 {
    100% {
        transform: rotate(360deg)
    }
}

.float-bob-y {
    animation-name: float-bob-y;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes float-bob-y {
    0% {
        transform: translateY(-30px)
    }

    50% {
        transform: translateY(-10px)
    }

    100% {
        transform: translateY(-30px)
    }
}

@keyframes shine {
    from {
        -webkit-mask-position: 150%
    }

    to {
        -webkit-mask-position: -50%
    }
}

@keyframes bounce-x {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(30px)
    }

    100% {
        transform: translateX(0)
    }
}

.bounce-x {
    animation: bounce-x 7s infinite linear
}

@keyframes animate-positive {
    0% {
        width: 0
    }

    100% {
        width: var(--progress-width)
    }
}

.scroll {
    animation: scroll 60s linear infinite;
    -webkit-animation: scroll 60s linear infinite
}

.scroll2 {
    animation: scroll2 60s linear infinite;
    -webkit-animation: scroll2 60s linear infinite
}

@keyframes scroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}

@keyframes scroll2 {
    0% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(-200%)
    }
}

.rotate360 {
    animation: rotate360 10s linear infinite;
    -webkit-animation: rotate360 10s linear infinite
}

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

    to {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg)
    }
}

.img-shine {
    position: relative;
    overflow: hidden
}

.img-shine:after {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    transform: skewX(-20deg);
    opacity: 0
}

.img-shine:hover:after {
    animation: imgShine 1s;
    opacity: 1
}

@keyframes imgShine {
    100% {
        left: 125%
    }
}

@keyframes stickyAni {
    0% {
        transform: translate3d(0, -40px, 0) scaleY(0.8);
        opacity: .7
    }

    100% {
        transform: translate3d(0, 0, 0) scaleY(1);
        opacity: 1
    }
}

.moveAround {
    animation: moveAround 200s linear infinite;
    -webkit-animation: moveAround 200s linear infinite
}

@keyframes moveAround {
    0% {
        transform: translate(-100%, -100%) translate(-300px, 80px);
        -webkit-transform: translate(-100%, -100%) translate(-300px, 80px);
        -moz-transform: translate(-100%, -100%) translate(-300px, 80px);
        -ms-transform: translate(-100%, -100%) translate(-300px, 80px);
        -o-transform: translate(-100%, -100%) translate(-300px, 80px)
    }

    25% {
        transform: translate(50%, -60%) translate(1900px, 300px);
        -webkit-transform: translate(50%, -60%) translate(1900px, 300px);
        -moz-transform: translate(50%, -60%) translate(1900px, 300px);
        -ms-transform: translate(50%, -60%) translate(1900px, 300px);
        -o-transform: translate(50%, -60%) translate(1900px, 300px)
    }

    50% {
        transform: translate(-80%, -80%) translate(-150px, 0px);
        -webkit-transform: translate(-80%, -80%) translate(-150px, 0px);
        -moz-transform: translate(-80%, -80%) translate(-150px, 0px);
        -ms-transform: translate(-80%, -80%) translate(-150px, 0px);
        -o-transform: translate(-80%, -80%) translate(-150px, 0px)
    }

    75% {
        transform: translate(50%, 50%) translate(1160px, 550px);
        -webkit-transform: translate(50%, 50%) translate(1160px, 550px);
        -moz-transform: translate(50%, 50%) translate(1160px, 550px);
        -ms-transform: translate(50%, 50%) translate(1160px, 550px);
        -o-transform: translate(50%, 50%) translate(1160px, 550px)
    }

    100% {
        transform: translate(100%, 100%) translate(-800px, -50px);
        -webkit-transform: translate(100%, 100%) translate(-800px, -50px);
        -moz-transform: translate(100%, 100%) translate(-800px, -50px);
        -ms-transform: translate(100%, 100%) translate(-800px, -50px);
        -o-transform: translate(100%, 100%) translate(-800px, -50px)
    }
}

.moveAround2 {
    animation: moveAround2 160s linear infinite;
    -webkit-animation: moveAround2 160s linear infinite
}

@keyframes moveAround2 {
    0% {
        transform: translate(30%, 60%) translate(1450px, 500px);
        -webkit-transform: translate(30%, 60%) translate(1450px, 500px);
        -moz-transform: translate(30%, 60%) translate(1450px, 500px);
        -ms-transform: translate(30%, 60%) translate(1450px, 500px);
        -o-transform: translate(30%, 60%) translate(1450px, 500px)
    }

    25% {
        transform: translate(-50%, -60%) translate(-100px, -290px);
        -webkit-transform: translate(-50%, -60%) translate(-100px, -290px);
        -moz-transform: translate(-50%, -60%) translate(-100px, -290px);
        -ms-transform: translate(-50%, -60%) translate(-100px, -290px);
        -o-transform: translate(-50%, -60%) translate(-100px, -290px)
    }

    50% {
        transform: translate(-50%, 0%) translate(150px, 0px);
        -webkit-transform: translate(-50%, 0%) translate(150px, 0px);
        -moz-transform: translate(-50%, 0%) translate(150px, 0px);
        -ms-transform: translate(-50%, 0%) translate(150px, 0px);
        -o-transform: translate(-50%, 0%) translate(150px, 0px)
    }

    75% {
        transform: translate(50%, -50%) translate(1160px, -50px);
        -webkit-transform: translate(50%, -50%) translate(1160px, -50px);
        -moz-transform: translate(50%, -50%) translate(1160px, -50px);
        -ms-transform: translate(50%, -50%) translate(1160px, -50px);
        -o-transform: translate(50%, -50%) translate(1160px, -50px)
    }

    100% {
        transform: translate(50%, 50%) translate(-80px, 50px);
        -webkit-transform: translate(50%, 50%) translate(-80px, 50px);
        -moz-transform: translate(50%, 50%) translate(-80px, 50px);
        -ms-transform: translate(50%, 50%) translate(-80px, 50px);
        -o-transform: translate(50%, 50%) translate(-80px, 50px)
    }
}

.moveAround3 {
    animation: moveAround3 120s linear infinite;
    -webkit-animation: moveAround3 120s linear infinite
}

@keyframes moveAround3 {
    0% {
        transform: translate(-50%, -50%) translate(400px, 300px);
        -webkit-transform: translate(-50%, -50%) translate(400px, 300px);
        -moz-transform: translate(-50%, -50%) translate(400px, 300px);
        -ms-transform: translate(-50%, -50%) translate(400px, 300px);
        -o-transform: translate(-50%, -50%) translate(400px, 300px)
    }

    25% {
        transform: translate(50%, -60%) translate(1900px, -300px);
        -webkit-transform: translate(50%, -60%) translate(1900px, -300px);
        -moz-transform: translate(50%, -60%) translate(1900px, -300px);
        -ms-transform: translate(50%, -60%) translate(1900px, -300px);
        -o-transform: translate(50%, -60%) translate(1900px, -300px)
    }

    50% {
        transform: translate(-50%, 0%) translate(-150px, 0px);
        -webkit-transform: translate(-50%, 0%) translate(-150px, 0px);
        -moz-transform: translate(-50%, 0%) translate(-150px, 0px);
        -ms-transform: translate(-50%, 0%) translate(-150px, 0px);
        -o-transform: translate(-50%, 0%) translate(-150px, 0px)
    }

    75% {
        transform: translate(50%, 50%) translate(160px, 50px);
        -webkit-transform: translate(50%, 50%) translate(160px, 50px);
        -moz-transform: translate(50%, 50%) translate(160px, 50px);
        -ms-transform: translate(50%, 50%) translate(160px, 50px);
        -o-transform: translate(50%, 50%) translate(160px, 50px)
    }

    100% {
        transform: translate(50%, 50%) translate(-200px, 200px);
        -webkit-transform: translate(50%, 50%) translate(-200px, 200px);
        -moz-transform: translate(50%, 50%) translate(-200px, 200px);
        -ms-transform: translate(50%, 50%) translate(-200px, 200px);
        -o-transform: translate(50%, 50%) translate(-200px, 200px)
    }
}

.moveAround4 {
    animation: moveAround4 200s linear infinite;
    -webkit-animation: moveAround4 200s linear infinite
}

@keyframes moveAround4 {
    0% {
        transform: translate(50%, -50%) translate(500px, 300px);
        -webkit-transform: translate(50%, -50%) translate(500px, 300px);
        -moz-transform: translate(50%, -50%) translate(500px, 300px);
        -ms-transform: translate(50%, -50%) translate(500px, 300px);
        -o-transform: translate(50%, -50%) translate(500px, 300px)
    }

    25% {
        transform: translate(50%, 60%) translate(-100px, -300px);
        -webkit-transform: translate(50%, 60%) translate(-100px, -300px);
        -moz-transform: translate(50%, 60%) translate(-100px, -300px);
        -ms-transform: translate(50%, 60%) translate(-100px, -300px);
        -o-transform: translate(50%, 60%) translate(-100px, -300px)
    }

    50% {
        transform: translate(50%, 0%) translate(150px, 0px);
        -webkit-transform: translate(50%, 0%) translate(150px, 0px);
        -moz-transform: translate(50%, 0%) translate(150px, 0px);
        -ms-transform: translate(50%, 0%) translate(150px, 0px);
        -o-transform: translate(50%, 0%) translate(150px, 0px)
    }

    75% {
        transform: translate(50%, 50%) translate(760px, 550px);
        -webkit-transform: translate(50%, 50%) translate(760px, 550px);
        -moz-transform: translate(50%, 50%) translate(760px, 550px);
        -ms-transform: translate(50%, 50%) translate(760px, 550px);
        -o-transform: translate(50%, 50%) translate(760px, 550px)
    }

    100% {
        transform: translate(50%, 50%) translate(-800px, 350px);
        -webkit-transform: translate(50%, 50%) translate(-800px, 350px);
        -moz-transform: translate(50%, 50%) translate(-800px, 350px);
        -ms-transform: translate(50%, 50%) translate(-800px, 350px);
        -o-transform: translate(50%, 50%) translate(-800px, 350px)
    }
}

@keyframes characters {

    0%,
    75%,
    100% {
        opacity: 0;
        transform: rotateY(-90deg)
    }

    25%,
    50% {
        opacity: 1;
        transform: rotateY(0deg)
    }
}

.bg-anime-scratch {
    animation: scratch 4s linear infinite;
    overflow: hidden
}

@keyframes scratch {
    0% {
        height: 0
    }

    70% {
        height: 158px
    }

    100% {
        height: 158px
    }
}

@keyframes shine {
    0% {
        left: -100px
    }

    60% {
        left: 100%
    }

    to {
        left: 100%
    }
}

.fadein,
.scalein,
.slidetopleft,
.slidebottomright,
.slideinleft,
.slideinright,
.slideindown,
.slideinup,
.rollinleft,
.rollinright {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 1.3s;
    animation-delay: .3s;
    animation-name: var(--animation-name)
}

.swiper-slide-active .fadein {
    --animation-name: fadein
}

.swiper-slide-active .scalein {
    --animation-name: scalein
}

.swiper-slide-active .slidetopleft {
    --animation-name: slidetopleft
}

.swiper-slide-active .slidebottomright {
    --animation-name: slidebottomright
}

.swiper-slide-active .slideinleft {
    --animation-name: slideinleft
}

.swiper-slide-active .slideinright {
    --animation-name: slideinright
}

.swiper-slide-active .slideinup {
    --animation-name: slideinup
}

.swiper-slide-active .slideindown {
    --animation-name: slideindown
}

.swiper-slide-active .rollinleft {
    --animation-name: rollinleft
}

.swiper-slide-active .rollinright {
    --animation-name: rollinright
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes scalein {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.3)
    }
}

@keyframes slideinup {
    0% {
        opacity: 0;
        transform: translateY(100px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideinright {
    0% {
        opacity: 0;
        transform: translateX(180px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slideindown {
    0% {
        opacity: 0;
        transform: translateY(-100px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideinleft {
    0% {
        opacity: 0;
        transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slidebottomright {
    0% {
        opacity: 0;
        transform: translateX(120px) translateY(120px)
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0)
    }
}

@keyframes slidetopleft {
    0% {
        opacity: 0;
        transform: translateX(-100px) translateY(-100px)
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0)
    }
}

@keyframes wobble_vertical {
    16.65% {
        transform: translateY(8px)
    }

    33.3% {
        transform: translateY(-6px)
    }

    49.95% {
        transform: translateY(4px)
    }

    66.6% {
        transform: translateY(-2px)
    }

    83.25% {
        transform: translateY(1px)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes wobble_spatial {
    16.65% {
        transform: translate3d(10px, 8px, 0px)
    }

    33.3% {
        transform: translate3d(-10px, -6px, 5px)
    }

    49.95% {
        transform: translate3d(7px, 4px, -5px)
    }

    66.6% {
        transform: translate3d(-7px, -2px, 3px)
    }

    83.25% {
        transform: translate3d(3px, 1px, -2px)
    }

    100% {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes wobble_bell {
    0% {
        transform: rotate(0deg)
    }

    15% {
        transform: rotate(-10deg)
    }

    30% {
        transform: rotate(10deg)
    }

    45% {
        transform: rotate(-5deg)
    }

    60% {
        transform: rotate(5deg)
    }

    75% {
        transform: rotate(-2deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

@keyframes mirror_effect {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scaleX(-1)
    }

    100% {
        transform: scaleX(1)
    }
}

@keyframes mirrorEffect {
    0% {
        transform: scaleX(1);
        opacity: 1
    }

    25% {
        transform: scaleX(1.2);
        opacity: .9
    }

    50% {
        transform: scaleX(0.8);
        opacity: .7
    }

    75% {
        transform: scaleX(1.1);
        opacity: .85
    }

    100% {
        transform: scaleX(1);
        opacity: 1
    }
}

@keyframes mirrorReflection {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes mirrorWave {

    0%,
    100% {
        transform: scale(1)
    }

    25% {
        transform: scale(1.05)
    }

    50% {
        transform: scale(1.1)
    }

    75% {
        transform: scale(1.05)
    }
}

@keyframes mirrorSlide {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-20px)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes rotateAndScale {
    0% {
        transform: rotate(0deg) scale(1)
    }

    50% {
        transform: rotate(180deg) scale(1.2)
    }

    100% {
        transform: rotate(360deg) scale(1)
    }
}

.rotateAndScale {
    animation: rotateAndScale 4s infinite ease-in-out
}

@keyframes typing {
    0% {
        width: 0;
        opacity: 0
    }

    5% {
        opacity: 1
    }

    100% {
        width: 100%;
        opacity: 1
    }
}

@keyframes moveBorder {
    0% {
        left: 0
    }

    50% {
        left: calc(100% - 100px)
    }

    100% {
        left: 0
    }
}

@keyframes swirlArrow {
    0% {
        transform: rotate(0deg) scale(1);
        stroke-dasharray: 0, 100;
        opacity: 1
    }

    50% {
        transform: rotate(45deg) scale(1.2);
        stroke-dasharray: 50, 50;
        opacity: .8
    }

    100% {
        transform: rotate(90deg) scale(1);
        stroke-dasharray: 100, 0;
        opacity: 1
    }
}

.scribble {
    animation: scribble 2s infinite linear
}

@keyframes scribbleLeft {
    0% {
        transform: rotate(0deg) translateX(0)
    }

    25% {
        transform: rotate(10deg) translateX(-10px)
    }

    50% {
        transform: rotate(-10deg) translateX(10px)
    }

    75% {
        transform: rotate(5deg) translateX(-5px)
    }

    100% {
        transform: rotate(0deg) translateX(0)
    }
}

.your-element {
    animation: scribbleLeft 2s infinite;
    transform-origin: right center
}

@keyframes scribble {
    0% {
        transform: rotate(0deg) translateX(0)
    }

    25% {
        transform: rotate(-10deg) translateX(10px)
    }

    50% {
        transform: rotate(10deg) translateX(-10px)
    }

    75% {
        transform: rotate(-5deg) translateX(5px)
    }

    100% {
        transform: rotate(0deg) translateX(0)
    }
}

@keyframes scribble2 {
    0% {
        transform: scaleX(-1) rotate(35deg)
    }

    25% {
        transform: scaleX(-1) rotate(17.5deg)
    }

    50% {
        transform: scaleX(-1) rotate(0deg)
    }

    75% {
        transform: scaleX(-1) rotate(17.5deg)
    }

    100% {
        transform: scaleX(-1) rotate(35deg)
    }
}

@keyframes bounceArrowX {

    0%,
    100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(10px)
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(0.8)
    }

    50% {
        transform: scale(1)
    }

    100% {
        transform: scale(0.8)
    }
}

.zoomInAnimation1 {
    animation: zoomIn 2s ease-in-out infinite
}

.ripple-animation,
.play-btn:after,
.play-btn:before {
    animation-duration: var(--ripple-ani-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-name: ripple2
}

@keyframes ripple2 {
    0% {
        transform: scale(1);
        opacity: 0
    }

    30% {
        opacity: .4
    }

    100% {
        transform: scale(1.4);
        opacity: 0
    }
}

@keyframes ripple3 {
    0% {
        transform: scale(1);
        opacity: 0
    }

    30% {
        opacity: .4
    }

    100% {
        transform: scale(2.8);
        opacity: 0
    }
}

.fancy-animation {
    animation: morph 8s ease-in-out infinite
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
    }

    50% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%
    }

    100% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
    }
}

.popup-video {
    position: relative;
    z-index: 1
}

.play-btn:after,
.play-btn:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: -1;
    border-radius: 50%;
    transition: all .4s ease 0s
}

.play-btn:after {
    animation-delay: 2s
}

.play-btn.style-2:before,
.play-btn.style-2:after {
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid var(--white-color)
}

@keyframes pxl_btn_shine {
    100% {
        left: 200%
    }
}

@keyframes slideFromLeft {
    0% {
        transform: translateX(-200px);
        opacity: 0
    }

    100% {
        transform: translateX(0);
        opacity: 1
    }
}

.animate__slideFromLeft {
    animation-name: slideFromLeft;
    animation-duration: 1.2s;
    animation-fill-mode: both
}

@keyframes slideFromRight {
    0% {
        transform: translateX(200px);
        opacity: 0
    }

    100% {
        transform: translateX(0);
        opacity: 1
    }
}

.animate__slideFromRight {
    animation-name: slideFromRight;
    animation-duration: 1.2s;
    animation-fill-mode: both
}

@keyframes slideFromTop {
    0% {
        transform: translateY(-200px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

.animate__slideFromTop {
    animation-name: slideFromTop;
    animation-duration: 1.2s;
    animation-fill-mode: both
}

@keyframes slideFromBottom {
    0% {
        transform: translateY(200px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

.animate__slideFromBottom {
    animation-name: slideFromBottom;
    animation-duration: 1.2s;
    animation-fill-mode: both
}

@keyframes myZoomIn {
    0% {
        transform: scale(0.3);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.animate__myZoomIn {
    animation-name: myZoomIn;
    animation-duration: 1.4s;
    animation-fill-mode: both
}

@keyframes myZoomOut {
    0% {
        transform: scale(1.5);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.animate__myZoomOut {
    animation-name: myZoomOut;
    animation-duration: 1.4s;
    animation-fill-mode: both
}

.pageTurn.swiper-slide-active .bg.image,
.pageTurn.swiper-slide-active .thumb img {
    animation: pageTurn 2s ease-in-out forwards;
    transform-origin: left center
}

@keyframes pageTurn {
    0% {
        transform: rotateY(-90deg) scale(1.1);
        opacity: 0
    }

    100% {
        transform: rotateY(0deg) scale(1);
        opacity: 1
    }
}

.blurSkew.swiper-slide-active .bg.image,
.blurSkew.swiper-slide-active .thumb img {
    animation: blurSkew 1.5s ease-in forwards
}

@keyframes blurSkew {
    0% {
        filter: blur(10px);
        transform: skewX(20deg) scale(1.1);
        opacity: 0
    }

    100% {
        filter: blur(0);
        transform: skewX(0deg) scale(1);
        opacity: 1
    }
}

.centerCurtain.swiper-slide-active .bg.image,
.centerCurtain.swiper-slide-active .thumb img {
    animation: centerCurtain 2s ease-in-out forwards;
    will-change: clip-path, opacity
}

@keyframes centerCurtain {
    0% {
        clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
        opacity: 0
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1
    }
}

@keyframes emgSwing {
    0% {
        transform: rotate(20deg)
    }

    100% {
        transform: rotate(-10deg)
    }
}

.skewCurtain.swiper-slide-active .thumb img {
    animation: skewCurtain 2s ease-in-out forwards
}

@keyframes skewCurtain {
    0% {
        clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
        transform: skewX(-10deg);
        opacity: .5
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        transform: skewX(0deg);
        opacity: 1
    }
}

.blurStretch.swiper-slide-active .thumb img {
    animation: blurStretch 1.7s ease-in-out forwards
}

@keyframes blurStretch {
    0% {
        transform: scaleX(1.3) scaleY(0.8);
        filter: blur(10px) brightness(0.4);
        opacity: 0
    }

    100% {
        transform: scaleX(1) scaleY(1);
        filter: blur(0) brightness(1);
        opacity: 1
    }
}

.wipeDiagonal.swiper-slide-active .thumb img {
    animation: wipeDiagonal 2s ease-in-out forwards;
    will-change: clip-path, transform, opacity
}

@keyframes wipeDiagonal {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        transform: skewX(-10deg) scale(1.1);
        opacity: 0;
        filter: brightness(0.5) blur(3px)
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: skewX(0deg) scale(1);
        opacity: 1;
        filter: brightness(1) blur(0)
    }
}

.ant-bounce {
    display: inline-block;
    animation: antWalkBounce 1s ease-in-out infinite
}

@keyframes antWalkBounce {
    0% {
        transform: translateY(0) rotate(0deg) scale(1)
    }

    25% {
        transform: translateY(-5px) rotate(-2deg) scale(1.02)
    }

    50% {
        transform: translateY(0) rotate(0deg) scale(1)
    }

    75% {
        transform: translateY(-5px) rotate(2deg) scale(1.02)
    }

    100% {
        transform: translateY(0) rotate(0deg) scale(1)
    }
}

.robot {
    width: 150px;
    filter: drop-shadow(0px 0px 5px rgba(0, 170, 255, 0.5));
    animation: glow 2s ease-in-out infinite
}

@keyframes glow {

    0%,
    100% {
        filter: drop-shadow(0px 0px 5px rgba(0, 170, 255, 0.5))
    }

    50% {
        filter: drop-shadow(0px 0px 15px rgba(0, 170, 255, 0.8))
    }
}

.qtecMask {
    width: 110%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 1;
    transform: translateX(-10%);
    background: linear-gradient(270deg, rgb(255, 255, 255) 90%, rgba(237, 221, 83, 0) 100%)
}

.animateImg {
    transform: scale(2)
}

.tv-hero-section .hero-inner .hero-slider .hero-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 0px;
}

@media(max-width: 1399px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area {
        border-radius: 0px
    }
}

.tv-hero-section .hero-inner .hero-slider .hero-area::before {
    background-image: linear-gradient(100deg, rgb(44, 51, 99) 0%, rgb(44, 51, 99) 38%, rgba(5, 17, 83, 0) 58%, rgba(5, 17, 83, 0) 100%);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0
}

@media(max-width: 767px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area::before {
        background-image: linear-gradient(100deg, rgb(5, 17, 83) 0%, rgb(5, 17, 83) 38%, rgba(5, 17, 83, 0) 85%, rgba(5, 17, 83, 0) 100%)
    }
}

.tv-hero-section .hero-inner .hero-slider .hero-area .video-box {
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    z-index: 2;
    border: 30px solid var(--light-color);
    border-radius: 50% 0 0 50%;
    background: var(--light-color)
}

@media(max-width: 1299px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .video-box {
        border: none;
        background: rgba(0, 0, 0, 0);
        right: 40px
    }
}

@media(max-width: 575px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .video-box {
        top: 80%
    }
}

.tv-hero-section .hero-inner .hero-slider .hero-area .video-box::before {
    position: absolute;
    right: 0px;
    top: -59px;
    content: "";
    height: 30px;
    width: 30px;
    background: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-11 h-11"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23fff"></path></svg>');
    transform: rotate(180deg)
}

@media(max-width: 1299px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .video-box::before {
        all: unset
    }
}

.tv-hero-section .hero-inner .hero-slider .hero-area .video-box::after {
    position: absolute;
    right: 0px;
    bottom: -58px;
    content: "";
    height: 30px;
    width: 30px;
    background: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-11 h-11"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23fff"></path></svg>');
    transform: rotate(90deg)
}

@media(max-width: 1299px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .video-box::after {
        all: unset
    }
}

.tv-hero-section .hero-inner .hero-slider .hero-area .video-box .circle-box {
    width: 175px;
    height: 175px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--theme-color3);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px)
}

@media(max-width: 991px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .video-box .circle-box {
        width: 150px;
        height: 150px
    }
}

@media(max-width: 430px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .video-box .circle-box {
        width: 120px;
        height: 120px
    }
}

.tv-hero-section .hero-inner .hero-slider .hero-area .video-box .circle-box .logo-box {
    position: absolute
}

.tv-hero-section .hero-inner .hero-slider .hero-area .video-box .circle-box .logo-box i {
    color: var(--white-color);
    font-size: 30px
}

@media(max-width: 430px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .video-box .circle-box .logo-box i {
        font-size: 20px
    }
}

.tv-hero-section .hero-inner .hero-slider .hero-area .video-box .circle-box .text-inner svg {
    width: 120px;
    max-width: 100%;
    height: auto;
    overflow: visible;
    word-spacing: 20px;
    transform: rotate(0) scaleX(1) scaleY(1)
}

@media(max-width: 991px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .video-box .circle-box .text-inner svg {
        width: 100px
    }
}

@media(max-width: 430px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .video-box .circle-box .text-inner svg {
        width: 80px
    }
}

.tv-hero-section .hero-inner .hero-slider .hero-area .video-box .circle-box .text-inner path {
    fill: rgba(0, 0, 0, 0);
    stroke: rgba(0, 0, 0, 0);
    stroke-width: 1px;
    transition: .3s stroke, .3s fill
}

.tv-hero-section .hero-inner .hero-slider .hero-area .video-box .circle-box .text-inner text {
    fill: var(--white-color);
    direction: ltr;
    transition: .3s stroke, .3s stroke-width, .3s fill;
    font-size: 30px;
    font-weight: 600;
    font-family: var(--title-font)
}

.tv-hero-section .hero-inner .hero-slider .hero-area .slide-number {
    position: absolute;
    left: 3%;
    top: 20%;
    font-size: 150px;
    line-height: 1;
    color: rgb(85, 90, 126, 0.5); 
    font-weight: 700;
    font-family: var(--title-font)
}

.tv-hero-section .hero-inner .hero-slider .hero-area .hero-content {
    position: relative;
    z-index: 1;
    padding:100px 0 100px 0;
    max-width: 850px;
}

@media(max-width: 1399px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content {
        padding: 100px 0 100px 0;
       max-width: 800px;
    }

}

@media(max-width: 1299px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content {
        padding: 80px 0 80px 0;
         max-width:750px;
    }
}

@media(max-width: 1199px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content {
        padding: 80px 0 80px 0;
         max-width:650px;
    }
}

@media(max-width: 767px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content {
        padding: 70px 0 70px 0
    }
}

.tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .sub-title {
    display: inline-block;
    font-size: 14px;
    text-transform: uppercase;
    color:#fff;
    font-weight: 500;
    margin-bottom: 17px;
    padding:8px 20px 8px 20px;
    border-radius: 30px;
    background:var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .sub-title img {
    margin-right: 8px
}

.tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .hero-title {
    font-size:80px;
    line-height: 1;
    color:#fff;
    font-weight: 800;
}

.tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .hero-title span {
    font-weight: 600
}

@media(max-width: 1299px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .hero-title {
        font-size: 70px
    }
}

@media(max-width: 1199px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .hero-title {
        font-size: 60px
    }
}

@media(max-width: 575px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .hero-title {
        font-size: 50px
    }
}

@media(max-width: 390px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .hero-title {
        font-size: 50px
    }
}

.tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .text-icon {
    display: flex;
    align-items: start;
    gap: 20px
}

.tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .text-icon .icon {
    flex-shrink: 0
}

@media(max-width: 1399px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .text-icon .icon {
        display: none !important
    }
}

.tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .text-icon .text {
    font-size: 17px;
    line-height: 28px;
    color:#fff;
    font-weight: 400;
    margin:0;
}

@media(min-width: 992px)and (max-width: 1024px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .text-icon .text {
        max-width: 70%
    }

    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .text-icon .text br {
        display: none
    }
}

@media(min-width: 992px)and (max-width: 1024px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .text-icon .text br {
        display: none
    }
}

@media(max-width: 575px) {
    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .text-icon .text br {
        display: none
    }
}

.hero-bg-image {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute
}

.hero-content>* {
    opacity: 0;
    visibility: hidden;
    transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1)
}

.hero-content .sub-title {
    transform: translateY(-30px)
}

.hero-content .hero-title {
    transform: translateX(-60px)
}

.hero-content .text-icon {
    transform: translateY(40px)
}

.hero-content .theme-btn {
    transform: scale(0.8)
}

.swiper-slide-active .hero-content>* {
    opacity: 1;
    visibility: visible
}

.swiper-slide-active .hero-content .sub-title {
    transform: translateY(0);
    transition-delay: .6s
}

.swiper-slide-active .hero-content .hero-title {
    transform: translateX(0);
    transition-delay: 1s
}

.swiper-slide-active .hero-content .text-icon {
    transform: translateY(0);
    transition-delay: 1.4s
}

.swiper-slide-active .hero-content .theme-btn {
    transform: scale(1);
    transition-delay: 1.8s
}