#advantages {margin: 0; padding: 0 0 100px 0; position: relative;}
.rippleWrapper {position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;}
#advantages h3 {margin: 0; padding: 0 0 30px 0; font-weight: 800; font-size: 44px; line-height: 68px; text-align: center; color: #3206B4;}
#advantages h2 {margin: 0; padding: 0; font-weight: 800; font-size: 34px; line-height: 44px; text-align: center; color: #393939;}
#advantages label {background: linear-gradient(90deg, #43089a, purple, purple, cyan); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: advantagesGradientText 4s ease infinite; text-align: center; width: 100%; font-size: 64px; font-weight: 800; margin: 0; padding: 0 0 80px 0;}
.advantagesWrapper {display: flex; width: 100%;}
.advantagesWrapper .left {width: 50%; padding-right: 0; padding-left: 80px;}
.advantagesWrapper .left .section .icon {padding-bottom: 20px; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start;}
.advantagesWrapper .left .section .icon img {max-width: 100px;}
.advantagesWrapper .section {padding: 100px 0 0 0; height: 700px;}
.advantagesWrapper .section h4 {font-size: 44px; font-weight: 600; color: #393939; width: 100%; margin: 0; padding: 0 0 20px 0; line-height: 62px;}
.advantagesWrapper .section h4 span {display: flex; margin: 15px 10px 15px 0; font-size: 72px; line-height: 72px; font-weight: 900; background: linear-gradient(90deg, #43089a, purple, purple, cyan); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: advantagesGradientText 4s ease infinite; width: 100%; text-transform: uppercase;}
.advantagesWrapper .section p {font-size: 18px; font-weight: 400; color: #393939; text-align: left; margin: 0; padding: 0 100px 0 0; line-height: 30px;}
.advantagesWrapper .right {width: 50%; position: relative;}
.advantagesWrapper .sticky-image {position: sticky; top: 200px; width: 100%; height: 100vh; max-height: 500px; overflow: hidden; border-radius: 12px;}
.advantagesWrapper .sticky-image .imageWrapper {display: flex; flex-wrap: wrap; justify-content: center; width: 100%; border-radius: 12px;}
.advantagesWrapper .sticky-image .imageWrapper.motivation img {width: 100%;}
.advantagesWrapper .sticky-image .imageWrapper.support {background: #1b2c7a;}
.advantagesWrapper .sticky-image .imageWrapper.support img {max-height: 500px; width: auto;}
.advantagesWrapper .sticky-image .imageWrapper {max-width: 100%; max-height: 100%; object-fit: cover; transition: opacity 0.5s ease; position: absolute; top: 0; left: 0; opacity: 0;}
.advantagesWrapper .sticky-image .imageWrapper img {max-width: 100%; border-radius: 12px;}
.advantagesWrapper .sticky-image .imageWrapper.active {opacity: 1;}
#dotLottie-canvas {width: 100%; height: 100%;}

@keyframes gradientText {
    0% {background-position: 0% 50%;}
    25% {background-position: 100% 50%;}
    75% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

@keyframes advantagesGradientText {
    0% {background-position: 0% 50%;}
    25% {background-position: 100% 50%;}
    75% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

#targetSection {position: relative; z-index: 1; padding-top: 100px;}
#targetSection .svgContainer {position: absolute; top: -4px; left: 50px; width: 100px; height: 100%;}
#targetSection .svgContainer svg {width: 100%; height: 100%;}
#targetSection .svgContainer path {stroke: #e74c3c; stroke-width: 8; fill: none; stroke-dasharray: 3000; stroke-dashoffset: 3000; transition: stroke-dashoffset 0.1s linear;}
.leftAniWrapper {display: none;}

/**** ripple animation ****/
.ripple-background {position: absolute; right: 0;}
.circle {position: absolute; top: 0; right: 0; border-radius: 50%; background: rgb(128 0 128 / 10%); animation: largeRipple 15s infinite; box-shadow: 0px 0px 1px 0px #ff0000;}
.small {width: 200px; height: 200px; left: -100px; top: 400px;}
.medium {width: 400px; height: 400px; left: -200px; top: 300px;}
.large {width: 600px; height: 600px; left: -300px; top: 200px;}
.xlarge {width: 800px; height: 800px; left: -400px; top: 100px;}
.xxlarge {width: 1000px; height: 1000px; left: -500px; top: 0;}
.shade1 {opacity: 0.2;}
.shade2 {opacity: 0.5;}
.shade3 {opacity: 0.7;}
.shade4 {opacity: 0.8;}
.shade5 {opacity: 0.9;}
.constellation {position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 500px; z-index: 1;}
canvas {background-color: transparent;}

@keyframes largeRipple {
    0% {transform: scale(0.8);}
    50% {transform: scale(1.2);}
    100% {transform: scale(0.8);}
}

/**** motivation animation ****/
.motivationBanner {width: 700px; margin: 0 auto; position: relative;}
.motivationBanner img.handImage {animation: scaleAnimation 4s infinite alternate ease-in-out;}
.motivationBanner img {width: 100%;}
.motivationBanner .motivationIcon {position: absolute; left: 250px; top: 160px;}
.motivationBanner .motivationIcon {opacity: 0;}
.motivationBanner .motivationIcon img {max-width: 120px !important;}
.motivationBanner .motivationIcon.two img {transform: rotate(180deg);}
.motivationBanner .motivationIcon.one {animation: fadeInOut 20s infinite; animation-delay: 0s;}
.motivationBanner .motivationIcon.two {animation: fadeInOut 20s infinite; animation-delay: 5s;}
.motivationBanner .motivationIcon.three {animation: fadeInOut 20s infinite; animation-delay: 10s;}
.motivationBanner .motivationIcon.four {animation: fadeInOut 20s infinite; animation-delay: 15s;}
.motivationBanner .borderOne {position: absolute; top: 20px; right: 100px; width: 0; height: 3px; background: #3206b4; animation: borderOne 1s forwards; border-radius: 10px;}
.motivationBanner .borderTwo {position: absolute; top: 0; right: 20px; width: 3px; height: 0; background: #3206b4; animation: borderTwo 1s forwards; animation-delay: 1s; border-radius: 10px;}
.motivationBanner .borderThree {position: absolute; bottom: 20px; left: 0; width: 0; height: 3px; background: #800080; animation: borderThree 1s forwards; animation-delay: 2s; border-radius: 10px;}
.motivationBanner .borderFour {position: absolute; bottom: 0; left: 20px; width: 3px; height: 0; background: #800080; animation: borderFour 1s forwards; animation-delay: 3s; border-radius: 10px;}

@keyframes scaleAnimation {
    0% {transform: scale(1);}
    100% {transform: scale(1.2);}
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    5%, 20% { opacity: 1; }
    25%, 100% { opacity: 0; }
}

@keyframes borderOne {
    0% {width: 0; right: 200px;}
    100% {width: 200px; right: 0;}
}

@keyframes borderTwo {
    0% {height: 0;}
    100% {height: 200px;}
}

@keyframes borderThree {
    0% {width: 0; left: 200px;}
    100% {width: 200px; left: 0;}
}

@keyframes borderFour {
    0% {height: 0;}
    100% {height: 200px;}
}

/**** visibility animation ****/
.visAnimationWrapper {width: 450px; height: 450px; margin: 0 auto; position: relative;}
.visAnimationWrapper .backgroundShape {position: absolute; top: 0; left: 0;}
.visAnimationWrapper .backgroundShape img {max-width: 100%; filter: invert(100%);}
.visAnimationWrapper .mainTitle {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; background: #dbe2f2; animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 1s;}
.visAnimationWrapper .mainTitle img.logo {max-width: 150px; border-radius: 0 !important; animation: visibilityRipple 0.7s linear infinite;}
.visAnimationWrapper .visiBox {position: absolute; width: 140px; height: 140px; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
.visAnimationWrapper .visiBox img {max-width: 100%;}
.visAnimationWrapper .visiBox h4 {margin: 10px 0 0 0; padding: 4px 14px; width: auto; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); border-radius: 6px; font-size: 15px; font-weight: 600; color: #fff; font-family: "Nunito Sans", sans-serif;}
.visAnimationWrapper .visiBox.visBoxOne {top: 0; left: 0;}
.visAnimationWrapper .visiBox.visBoxOne img {animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 2s;}
.visAnimationWrapper .visiBox.visBoxTwo {top: 0; right: 0;}
.visAnimationWrapper .visiBox.visBoxTwo img {animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 4s;}
.visAnimationWrapper .visiBox.visBoxThree {bottom: 0; right: 0;}
.visAnimationWrapper .visiBox.visBoxThree img {animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 6s;}
.visAnimationWrapper .visiBox.visBoxFour {bottom: 0; left: 0;}
.visAnimationWrapper .visiBox.visBoxFour img {animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 8s;}
.visAnimationWrapper .visiBox.visBoxOne h4 {background: #b58374; animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 3s;}
.visAnimationWrapper .visiBox.visBoxTwo h4 {background: #177cbe; animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 5s;}
.visAnimationWrapper .visiBox.visBoxThree h4 {background: #fda51d; animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 7s;}
.visAnimationWrapper .visiBox.visBoxFour h4 {background: #d71e10; animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 9s;}
.borderWrapper {position: absolute;}
.borderWrapper h5 {position: absolute; top: -43px; margin: 0; text-align: center; font-size: 15px; font-weight: 700; font-family: "Nunito Sans", sans-serif; color: #fff; left: 50%; transform: translateX(-50%); background: #393939; text-transform: uppercase;}
.borderWrapper.primaryBorder {top: 70px; left: 150px;}
.borderWrapper.primaryBorder h5 {padding: 20px 15px 6px 15px; border-radius: 76px 76px 0 0; animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 11s;}
.borderWrapper.secondaryBorder {top: 155px; right: 60px;}
.borderWrapper.secondaryBorder h5 {writing-mode: vertical-rl; left: 20px; top: 6px; padding: 12px 8px; border-radius: 0 6px 6px 0; animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 13s;}
.borderWrapper.tertiaryBorder {bottom: 60px; right: 150px;}
.borderWrapper.tertiaryBorder h5 {top: 0; padding: 6px 15px 20px 15px; border-radius: 0 0 76px 76px; animation: visFadeInOut 1s forwards; opacity: 0; animation-delay: 15s;}
.borderWrapper .borderOne {width: 0; height: 3px; background: #393939; border-radius: 10px; animation: visBorderOne 1s forwards; animation-delay: 10s;}
.borderWrapper .borderTwo {width: 3px; height: 0; background: #393939; border-radius: 10px; animation: visBorderTwo 1s forwards; animation-delay: 12s;}
.borderWrapper .borderThree {width: 0; height: 3px; background: #393939; border-radius: 10px; animation: visBorderOne 1s forwards; animation-delay: 14s;}
.borderWrapper .borderOne:before {width: 3px; height: 14px; background: #393939; position: absolute; top: -10px; right: 4px; content: ""; transform: rotate(-45deg); opacity: 0; animation: visFadeInOut 1s forwards; animation-delay: 10s;}
.borderWrapper .borderOne:after {width: 3px; height: 14px; background: #393939; position: absolute; top: -1px; right: 4px; content: ""; transform: rotate(45deg); opacity: 0; animation: visFadeInOut 1s forwards; animation-delay: 10s;}
.borderWrapper .borderTwo:before {width: 3px; height: 14px; background: #393939; position: absolute; bottom: -1px; right: -5px; content: ""; transform: rotate(45deg); opacity: 0; animation: visFadeInOut 1s forwards; animation-delay: 12s;}
.borderWrapper .borderTwo:after {width: 3px; height: 14px; background: #393939; position: absolute; bottom: -1px; right: 5px; content: ""; transform: rotate(-45deg); opacity: 0; animation: visFadeInOut 1s forwards; animation-delay: 12s;}
.borderWrapper .borderThree:before {width: 3px; height: 14px; background: #393939; position: absolute; top: -10px; left: 4px; content: ""; transform: rotate(45deg); opacity: 0; animation: visFadeInOut 1s forwards; animation-delay: 14s;}
.borderWrapper .borderThree:after {width: 3px; height: 14px; background: #393939; position: absolute; top: -1px; left: 4px; content: ""; transform: rotate(-45deg); opacity: 0; animation: visFadeInOut 1s forwards; animation-delay: 14s;}

@keyframes visFadeInOut {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-webkit-keyframes visibilityRipple {
	0% {box-shadow: 0 0 0 0 rgba(44, 82, 180, 0.05), 0 0 0 10px rgba(44, 82, 180, 0.05), 0 0 0 30px rgba(44, 82, 180, 0.05), 0 0 0 60px rgba(44, 82, 180, 0.05);}
	100% {box-shadow: 0 0 0 10px rgba(44, 82, 180, 0.05), 0 0 0 30px rgba(44, 82, 180, 0.05), 0 0 0 60px rgba(44, 82, 180, 0.05), 0 0 0 90px rgba(44, 82, 180, 0);}
}

@keyframes integrationRipple {
	0% {box-shadow: 0 0 0 0 rgba(44, 82, 180, 0.05), 0 0 0 10px rgba(44, 82, 180, 0.05), 0 0 0 30px rgba(44, 82, 180, 0.05), 0 0 0 60px rgba(44, 82, 180, 0.05);}
	100% {box-shadow: 0 0 0 10px rgba(44, 82, 180, 0.05), 0 0 0 30px rgba(44, 82, 180, 0.05), 0 0 0 60px rgba(44, 82, 180, 0.05), 0 0 0 90px rgba(44, 82, 180, 0);}
}

@keyframes visBorderOne {
	0% {width: 0;}
	100% {width: 140px;}
}

@keyframes visBorderTwo {
	0% {height: 0;}
	100% {height: 140px;}
}

/**** gamification animation ****/
.gamificationAnimation {width: 450px; margin: 0 auto; position: relative;}
.gamificationAnimation .gifWrapper, .gamificationAnimation .gamBorderOne, .gamificationAnimation .gamBorderTwo, .gamificationAnimation .firstLayer, .gamificationAnimation .secondLayer, .gamificationAnimation .thirdLayer, .gamificationAnimation .fourthLayer, .gamificationAnimation .fifthLayer, .gamificationAnimation .sixthLayer {opacity: 0; animation-fill-mode: forwards;}
.gamificationAnimation.active .gifWrapper {animation: gamiFadeIn 1s forwards 1s; }
.gamificationAnimation.active .gamBorderOne {animation: gamiBorderOne 1s forwards 2s;}
.gamificationAnimation.active .gamBorderTwo {animation: gamiBorderTwo 1s forwards 3s;}
.gamificationAnimation.active .firstLayer {animation: gamiFadeIn 0.75s forwards 4s;}
.gamificationAnimation.active .secondLayer {animation: gamiFadeIn 0.75s forwards 5s;}
.gamificationAnimation.active .fourthLayer {animation: gamiFadeIn 0.75s forwards 6s;}
.gamificationAnimation.active .fifthLayer {animation: gamiFadeIn 0.75s forwards 7s;}
.gamificationAnimation.active .sixthLayer {animation: gamiFadeIn 0.75s forwards 8s;}
.gamificationAnimation.active .thirdLayer {animation: gamiFadeInScale 0.5s forwards 9s;}
.gamificationAnimation.fadeout .gifWrapper, .gamificationAnimation.fadeout .gamBorderOne, .gamificationAnimation.fadeout .gamBorderTwo, .gamificationAnimation.fadeout .firstLayer, .gamificationAnimation.fadeout .secondLayer, .gamificationAnimation.fadeout .thirdLayer, .gamificationAnimation.fadeout .fourthLayer, .gamificationAnimation.fadeout .fifthLayer, .gamificationAnimation.fadeout .sixthLayer {animation: gamiFadeOut 1s forwards;}
.gamificationAnimation img {max-width: 100%;}
.gamificationAnimation .gamBorderOne, 
.gamificationAnimation .gamBorderTwo {position: absolute; background: #3206b4; border-radius: 10px; z-index: 10;}
.gamificationAnimation .gamBorderOne {top: 20px; left: 0; width: 0; height: 3px; z-index: 3;}
.gamificationAnimation .gamBorderTwo {top: 0; left: 20px; width: 3px; height: 0; z-index: 3;}
.gamificationAnimation .layerBox {position: absolute; border-radius: 11px; padding: 6px; display: inline-flex; align-items: center; flex-wrap: wrap; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); font-family: 'Nunito Sans', sans-serif;}
.gamificationAnimation .firstLayer {background: #fff; bottom: 50px; left: 10px; /* min-width: 170px; */}
.gamificationAnimation .secondLayer {background: #fff; top: 40px; left: 0; z-index: 4;}
.gamificationAnimation .thirdLayer {background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(3px); top: 50%; right: 0; transform: scale(1) translateY(-50%); width: 250px;}
.gamificationAnimation .fourthLayer {background: #fff; top: 58%; left: 0; transform: translateY(-50%);}
.gamificationAnimation .fifthLayer {background: #fff; top: 40%; right: 0; transform: translate(0, -50%);}
.gamificationAnimation .sixthLayer {background: #fff; bottom: 20px; right: 0;}
.gamificationAnimation .layerBox span img {max-width: 30px !important;}
.gamificationAnimation .layerBox label {width: calc(100% - 30px) !important; font-size: 14px !important; font-weight: 700 !important; color: #393939 !important; padding: 0 10px !important; text-align: left !important; background: none !important; -webkit-text-fill-color: #393939 !important;}
.gamificationAnimation .thirdLayer label {font-size: 20px; color: #000; font-weight: 500; text-align: center;}

@keyframes gamiBorderOne {
    0% {width: 0; opacity: 0;}
    100% {width: 160px; opacity: 1;}
}

@keyframes gamiBorderTwo {
    0% {height: 0; opacity: 0;}
    100% {height: 160px; opacity: 1;}
}

@keyframes gamiFadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes gamiFadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes gamiFadeInScale {
    0% {transform: scale(1) translateY(-50%); opacity: 0;}
    100% {transform: scale(1.2) translateY(-50%); opacity: 1;}
}

/**** architecture animation ****/
.arcAnimationWrapper {width: 450px; height: 450px; position: relative; margin: 0 auto;}
.arcAnimationWrapper .arcAniMAlogo, .layerBox {opacity: 0;}
.arcAnimationWrapper .backImgWrapper img, .arcAnimationWrapper .arcAniMAlogo img {max-width: 100%;}
.arcAnimationWrapper .backImgWrapper img {animation: arcFadeIn 0.75s forwards;}
.arcAnimationWrapper .arcAniMAlogo {position: absolute; top: 15px; left: 15px; max-width: 60px;}
.arcAnimationWrapper .layerBox {position: absolute; border-radius: 11px; padding: 6px; display: inline-flex; align-items: center; flex-wrap: wrap; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); font-family: 'Nunito Sans', sans-serif; background: #fff; width: auto !important;}
.arcAnimationWrapper .layerBox span img {max-width: 30px !important;}
.arcAnimationWrapper .layerBox label {width: calc(100% - 30px) !important; font-size: 14px !important; font-weight: 700 !important; color: #393939 !important; padding: 0 10px !important; text-align: left !important; background: none !important; -webkit-text-fill-color: #393939 !important;}
.arcAnimationWrapper .firstLayer {top: 30px; right: 10px;}
.arcAnimationWrapper .secondLayer {top: 100px; left: 10px; z-index: 4;}
.arcAnimationWrapper .thirdLayer {background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(3px); top: 170px; right: 50px; width: 260px;}
.arcAnimationWrapper .fourthLayer {top: 250px; left: 30px;}
.arcAnimationWrapper .fade-in {animation: arcFadeIn 0.75s forwards; opacity: 1 !important;}
.arcAnimationWrapper .fade-out {animation: arcFadeOut 1s forwards;}

@keyframes arcFadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes arcFadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

/**** support animation ****/
.supportAniWrapper {width: 450px; height: 450px; position: relative; margin: 0 auto;}.circleImage, .girlImage, .layerBox {position: absolute; opacity: 0; animation-fill-mode: forwards;}
.supportAniWrapper .circleImage {width: 100%; height: 100%; transform: scale(0); animation: growCircle 1.5s ease-out forwards; animation-delay: 0s;}
.supportAniWrapper .circleImage img, .girlImage img {max-height: 100%;}
.supportAniWrapper .girlImage {width: 100%; height: 100%; right: -29px; animation: supFadeIn 1s forwards; animation-delay: 2s;}
.supportAniWrapper .layerBox {border-radius: 11px; padding: 6px; display: inline-flex; align-items: center; flex-wrap: wrap; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); font-family: 'Nunito Sans', sans-serif; background: #fff;}
.supportAniWrapper .layerBox span img {max-width: 30px !important;}
.supportAniWrapper .layerBox label {width: calc(100% - 30px) !important; font-size: 14px !important; font-weight: 700 !important; color: #393939 !important; padding: 0 10px !important; text-align: left !important; background: none !important; -webkit-text-fill-color: #393939 !important;}
.supportAniWrapper .firstLayer {top: 20px; left: -20px; animation: supFadeIn 1s forwards; animation-delay: 4s;}
.supportAniWrapper .secondLayer {top: 160px; left: 20px; animation: supFadeIn 1s forwards; animation-delay: 5s;}
.supportAniWrapper .thirdLayer {bottom: 140px; left: 70px; animation: supFadeIn 1s forwards; animation-delay: 6s;}
.supportAniWrapper .fourthLayer {background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(3px); width: 280px; bottom: 20px; right: 0; animation: supFadeIn 1s forwards; animation-delay: 7s;}
.supportAniWrapper .fourthLayer label {font-size: 20px; color: #000; font-weight: 500; text-align: center;}
.supportAniWrapper.fadeout .circleImage, .supportAniWrapper.fadeout .girlImage, .supportAniWrapper.fadeout .layerBox {animation: supFadeOut 1s forwards;}

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

@keyframes supFadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes supFadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

/**** dynamic scheme engine ****/
.schEngineAnimation {width: 450px; margin: 0 auto; position: relative;}
.schEngineAnimation .gifWrapper, .schEngineAnimation .borderOne, .schEngineAnimation .borderTwo, .schEngineAnimation .firstLayer, .schEngineAnimation .secondLayer, .schEngineAnimation .thirdLayer, .schEngineAnimation .fourthLayer, .schEngineAnimation .fifthLayer, .schEngineAnimation .sixthLayer {opacity: 0; animation-fill-mode: forwards;}
.schEngineAnimation.active .gifWrapper {animation: schEngFadeIn 1s forwards 1s; }
.schEngineAnimation.active .borderOne {animation: schEngBorderOne 1s forwards 2s;}
.schEngineAnimation.active .borderTwo {animation: schEngBorderTwo 1s forwards 3s;}
.schEngineAnimation.active .firstLayer {animation: schEngFadeIn 0.75s forwards 4s;}
.schEngineAnimation.active .secondLayer {animation: schEngFadeIn 0.75s forwards 5s;}
.schEngineAnimation.active .fourthLayer {animation: schEngFadeIn 0.75s forwards 6s;}
.schEngineAnimation.active .fifthLayer {animation: schEngFadeIn 0.75s forwards 7s;}
.schEngineAnimation.active .sixthLayer {animation: schEngFadeIn 0.75s forwards 8s;}
.schEngineAnimation.active .thirdLayer {animation: schEngFadeInScale 0.5s forwards 9s;}
.schEngineAnimation.fadeout .gifWrapper, .schEngineAnimation.fadeout .borderOne, .schEngineAnimation.fadeout .borderTwo, .schEngineAnimation.fadeout .firstLayer, .schEngineAnimation.fadeout .secondLayer, .schEngineAnimation.fadeout .thirdLayer, .schEngineAnimation.fadeout .fourthLayer, .schEngineAnimation.fadeout .fifthLayer, .schEngineAnimation.fadeout .sixthLayer {animation: schEngFadeOut 1s forwards;}
.schEngineAnimation img {max-width: 100%;}
.schEngineAnimation .borderOne, .borderTwo {position: absolute; background: #3206b4; border-radius: 10px; z-index: 10;}
.schEngineAnimation .borderOne {top: 20px; left: 0; width: 0; height: 3px; z-index: 3;}
.schEngineAnimation .borderTwo {top: 0; left: 20px; width: 3px; height: 0; z-index: 3;}
.schEngineAnimation .layerBox {position: absolute; border-radius: 11px; padding: 6px; display: inline-flex; align-items: center; flex-wrap: wrap; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); font-family: 'Nunito Sans', sans-serif;}
.schEngineAnimation .firstLayer {background: #fff; bottom: 50px; left: 10px; /* min-width: 170px; */}
.schEngineAnimation .secondLayer {background: #fff; top: 40px; left: 0; z-index: 4;}
.schEngineAnimation .thirdLayer {background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(3px); top: 50%; right: 0; transform: scale(1) translateY(-50%); width: 250px;}
.schEngineAnimation .fourthLayer {background: #fff; top: 65%; left: 0; transform: translateY(-50%);}
.schEngineAnimation .fifthLayer {background: #fff; top: 30%; right: 0; transform: translate(0, -50%);}
.schEngineAnimation .sixthLayer {background: #fff; bottom: 20px; right: 0;}
.schEngineAnimation .layerBox span img {max-width: 30px !important;}
.schEngineAnimation .layerBox label {width: calc(100% - 30px) !important; font-size: 14px !important; font-weight: 700 !important; color: #393939 !important; padding: 0 10px !important; text-align: left !important; background: none !important; -webkit-text-fill-color: #393939 !important;}
.schEngineAnimation .thirdLayer label {font-size: 20px; color: #000; font-weight: 500; text-align: center;}

@keyframes schEngBorderOne {
    0% {width: 0; opacity: 0;}
    100% {width: 160px; opacity: 1;}
}

@keyframes schEngBorderTwo {
    0% {height: 0; opacity: 0;}
    100% {height: 160px; opacity: 1;}
}

@keyframes schEngFadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes schEngFadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes schEngFadeInScale {
    0% {transform: scale(1) translateY(-50%); opacity: 0;}
    100% {transform: scale(1.2) translateY(-50%); opacity: 1;}
}

/**** media queries ****/
@media only screen and (min-width: 0px) and (max-width: 575px) {
    #advantages {padding: 0;}
    .rippleWrapper {display: none;}
    #targetSection {padding-top: 60px;}
    #advantages h2 {font-size: 24px; line-height: 34px;}
    #advantages label {font-size: 40px; padding: 0 0 30px 0;}
    #targetSection .svgContainer {left: 0; width: 40px; display: none;}
    .advantagesWrapper .right {display: none;}
    .advantagesWrapper .left {width: 100%; padding-left: 0;}
    .advantagesWrapper .section {padding: 20px 0; height: inherit;}
    .advantagesWrapper .section h4 {font-size: 26px; line-height: 40px; text-align: center;}
    .advantagesWrapper .section h4 span {font-size: 45px; line-height: 50px; justify-content: center; margin-right: 0;}
    .advantagesWrapper .section p {font-size: 16px; text-align: center; padding: 0; line-height: 26px;}
    .leftAniWrapper {display: block; padding: 40px 0;}
    .motivationBanner {width: 100%; max-width: 300px;}
    .motivationBanner .borderOne {margin-right: -20px;}
    .motivationBanner .borderTwo {right: 0;}
    .motivationBanner .borderThree {margin-left: -20px;}
    .motivationBanner .borderFour {left: 0;}
    .motivationBanner .motivationIcon img {max-width: 60px !important;}
    .motivationBanner .motivationIcon {left: 100px; top: 60px;}

    @keyframes borderOne {
        0% {width: 0; right: 100px;}
        100% {width: 100px; right: 0;}
    }

    @keyframes borderTwo {
        0% {height: 0;}
        100% {height: 100px;}
    }

    @keyframes borderThree {
        0% {width: 0; left: 100px;}
        100% {width: 100px; left: 0;}
    }

    @keyframes borderFour {
        0% {height: 0;}
        100% {height: 100px;}
    }

    .visAnimationWrapper {width: 100%; max-width: 300px; height: 300px;}
    .visAnimationWrapper .visiBox {width: 80px; height: auto;}
    .visAnimationWrapper .mainTitle {top: 130px; transform: translateX(-50%); width: 120px;}
    .visAnimationWrapper .mainTitle img {width: 100%;}
    .visAnimationWrapper .visiBox h4 {font-size: 14px; line-height: 14px; padding: 4px 10px; border-radius: 4px; font-weight: 400 !important; white-space: nowrap;}
    .visAnimationWrapper .visiBox.visBoxTwo {top: -6px;}
    .borderWrapper h5 {font-size: 12px;}
    .borderWrapper.primaryBorder {top: 70px; left: 100px;}
    .borderWrapper.primaryBorder h5 {font-size: 12px; font-weight: 600; top: -33px; padding: 13px 11px 6px 11px; left: 47%;}
    .borderWrapper.secondaryBorder {top: 95px; right: 40px;}
    .borderWrapper.secondaryBorder h5 {left: 17px; top: 12px; padding: 6px 8px;}
    .borderWrapper.tertiaryBorder {bottom: 30px; right: 92px;}
    .borderWrapper.tertiaryBorder h5 {padding: 10px;}
    .visAnimationWrapper .visiBox.visBoxOne {top: -20px;}
    .visAnimationWrapper .visiBox.visBoxThree {bottom: -20px;}
    .visAnimationWrapper .visiBox.visBoxFour {bottom: -20px;}

    @keyframes visBorderOne {
        0% {width: 0;}
        100% {width: 100px;}
    }

    @keyframes visBorderTwo {
        0% {height: 0;}
        100% {height: 120px;}
    }

    .gamificationAnimation {width: 100%; max-width: 300px; height: 300px;}
    .gamificationAnimation .gamBorderOne {left: -20px;}
    .gamificationAnimation .gamBorderTwo {left: 0;}
    .gamificationAnimation .secondLayer {top: 26px; left: 6px;}
    .gamificationAnimation .fourthLayer {top: 54%;}
    .gamificationAnimation .fifthLayer {top: 35%;}
    .gamificationAnimation .sixthLayer {bottom: -10px;}

    @keyframes gamiBorderOne {
        0% {width: 0; opacity: 0;}
        100% {width: 100px; opacity: 1;}
    }

    @keyframes gamiBorderTwo {
        0% {height: 0; opacity: 0;}
        100% {height: 100px; opacity: 1;}
    }

    .leftAniWrapper .arcAnimationWrapper {display: block;}
    .arcAnimationWrapper {width: 100%; max-width: 300px; height: 215px;}
    .arcAnimationWrapper .arcAniMAlogo {max-width: 30px;}
    .arcAnimationWrapper .firstLayer {top: 20px;}
    .arcAnimationWrapper .secondLayer {top: 70px;}
    .arcAnimationWrapper .thirdLayer {top: 120px; right: 10px;}
    .arcAnimationWrapper .fourthLayer {top: 170px; left: 10px;}
    .arcAnimationWrapper .layerBox span img {max-width: 24px !important;}
    .arcAnimationWrapper .layerBox label {font-size: 12px !important; padding: 0 6px !important; white-space: nowrap;}
    .supportAniWrapper {width: 100%; max-width: 300px; height: 300px;}
    .supportAniWrapper .layerBox span img {max-width: 24px !important;}
    .supportAniWrapper .layerBox label {font-size: 12px !important; padding: 0 6px !important; white-space: nowrap;}
    .supportAniWrapper .thirdLayer {bottom: 160px; left: 130px;}
    .supportAniWrapper .fourthLayer {bottom: 20px; right: 0; width: auto;}
    .supportAniWrapper .fourthLayer label {white-space: normal; text-align: center !important; font-size: 14px !important; width: 100% !important;}
    .schEngineAnimation {width: 100%; max-width: 300px; height: 300px;}
    .schEngineAnimation .borderOne {left: -20px;}
    .schEngineAnimation .borderTwo {left: 0;}
    .schEngineAnimation .firstLayer {left: 0; bottom: 10px;}
    .schEngineAnimation .secondLayer {top: 23px; left: 4px;}
    .schEngineAnimation .fourthLayer {top: 70%;}
    .schEngineAnimation .layerBox span img {max-width: 24px !important;}
    .schEngineAnimation .layerBox label {font-size: 12px !important; padding: 0 6px !important; white-space: nowrap;}
    .schEngineAnimation .thirdLayer label {text-align: center !important; font-size: 14px !important; width: 100% !important; white-space: normal; line-height: 20px;}

    @keyframes schEngBorderOne {
        0% {width: 0; opacity: 0;}
        100% {width: 100px; opacity: 1;}
    }

    @keyframes schEngBorderTwo {
        0% {height: 0; opacity: 0;}
        100% {height: 100px; opacity: 1;}
    }
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
    .rippleWrapper {display: none;}
    #targetSection {padding-top: 60px;}
    #advantages h2 {font-size: 24px; line-height: 34px;}
    #advantages label {font-size: 40px; padding: 0 0 30px 0;}
    #targetSection .svgContainer {left: 0; width: 40px; display: none;}
    .advantagesWrapper .right {display: none;}
    .advantagesWrapper .left {width: 100%; padding-left: 0;}
    .advantagesWrapper .section {padding: 20px 0; height: inherit;}
    .advantagesWrapper .section h4 {font-size: 26px; line-height: 40px; text-align: center;}
    .advantagesWrapper .section h4 span {font-size: 45px; justify-content: center; margin-right: 0;}
    .advantagesWrapper .section p {font-size: 16px; text-align: center; padding: 0; line-height: 26px;}
    .leftAniWrapper {display: block; padding: 40px 0;}
    .motivationBanner {width: 450px;}
    .arcAnimationWrapper {height: 315px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #targetSection .svgContainer {left: 0;}
    #advantages h2 {font-size: 26px;}
    #advantages label {font-size: 48px;}
    .advantagesWrapper .section {padding: 0;}
    .advantagesWrapper .left {padding-left: 50px;}
    .advantagesWrapper .section h4 {font-size: 30px; line-height: 40px;}
    .advantagesWrapper .section h4 span {font-size: 50px; line-height: 60px;}
    .advantagesWrapper .section p {font-size: 16px; padding: 0 40px 0 0; line-height: 28px;}
    .motivationBanner {width: 380px;}
    .motivationBanner .borderOne {margin-right: -20px;}
    .motivationBanner .borderTwo {right: 0;}
    .motivationBanner .borderThree {margin-left: -20px;}
    .motivationBanner .borderFour {left: 0;}
    .motivationBanner .motivationIcon img {max-width: 60px !important;}
    .motivationBanner .motivationIcon {left: 130px; top: 85px;}

    @keyframes borderOne {
        0% {width: 0; right: 100px;}
        100% {width: 100px; right: 0;}
    }

    @keyframes borderTwo {
        0% {height: 0;}
        100% {height: 100px;}
    }

    @keyframes borderThree {
        0% {width: 0; left: 100px;}
        100% {width: 100px; left: 0;}
    }

    @keyframes borderFour {
        0% {height: 0;}
        100% {height: 100px;}
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    /* #targetSection .svgContainer {left: 0;}
    #advantages h2 { font-size: 28px; line-height: 38px;}
    #advantages label {font-size: 48px; padding: 0 0 50px 0;}
    .advantagesWrapper .section {padding: 0;}
    .advantagesWrapper .left {padding-left: 40px;}
    .advantagesWrapper .section h4 {font-size: 30px; line-height: 40px;}
    .advantagesWrapper .section h4 span {margin: 10px 10px 10px 0; font-size: 56px; line-height: 66px;}
    .advantagesWrapper .section p {font-size: 16px; padding: 0 50px 0 0; line-height: 28px;} */
    .motivationBanner {width: 450px;}
    .motivationBanner .borderOne {margin-right: -20px;}
    .motivationBanner .borderTwo {right: 0;}
    .motivationBanner .borderThree {margin-left: -20px;}
    .motivationBanner .borderFour {left: 0;}
    .motivationBanner .motivationIcon img {max-width: 80px !important;}
    .motivationBanner .motivationIcon {left: 150px; top: 100px;}

    #targetSection {padding-top: 60px;}
    #targetSection .svgContainer {left: 0;}
    #advantages h2 {font-size: 20px; line-height: 30px;}
    #advantages label {font-size: 38px; padding: 0 0 30px 0;}
    .advantagesWrapper .sticky-image {top: 100px; height: 400px;}
    .advantagesWrapper .left {padding-left: 40px;}
    .advantagesWrapper .section {padding-top: 40px; height: 590px;}
    .advantagesWrapper .section h4 {font-size: 18px; line-height: 26px;}
    .advantagesWrapper .section h4 span {font-size: 32px; line-height: 34px; margin: 8px 10px 8px 0;}
    .advantagesWrapper .section p {padding: 0 50px 0 0; font-size: 14px; line-height: 22px;}

    @keyframes borderOne {
        0% {width: 0; right: 100px;}
        100% {width: 100px; right: 0;}
    }

    @keyframes borderTwo {
        0% {height: 0;}
        100% {height: 100px;}
    }

    @keyframes borderThree {
        0% {width: 0; left: 100px;}
        100% {width: 100px; left: 0;}
    }

    @keyframes borderFour {
        0% {height: 0;}
        100% {height: 100px;}
    }

    .visAnimationWrapper {width: 340px; height: 340px;}
    .visAnimationWrapper .visiBox {width: 90px; height: 90px;}
    .borderWrapper h5 {top: -27px; font-size: 11px;}
    .borderWrapper.primaryBorder h5 {padding: 9px 15px 6px 15px;}
    .visAnimationWrapper .visiBox h4 {margin: 2px 0 0 0; padding: 2px 5px; font-size: 12px; border-radius: 4px;}
    .borderWrapper.secondaryBorder h5 {left: 15px; top: 11px;}
    .borderWrapper.tertiaryBorder h5 {padding: 8px 15px;}
    .borderWrapper.primaryBorder {left: 105px;}
    .borderWrapper .borderOne {height: 2px;}
    .borderWrapper .borderOne:before, .borderWrapper .borderOne:after {width: 2px;}
    .borderWrapper.secondaryBorder {top: 105px; right: 40px;}
    .borderWrapper .borderTwo {width: 2px;}
    .borderWrapper .borderTwo:before, .borderWrapper .borderTwo:after {width: 2px;}
    .borderWrapper.tertiaryBorder {bottom: 50px; right: 105px;}
    .borderWrapper .borderThree {height: 2px;}
    .borderWrapper .borderThree:before, .borderWrapper .borderThree:after {width: 2px;}
    .gamificationAnimation {width: 340px;}
    .gamificationAnimation .layerBox span img {max-width: 20px !important;}
    .gamificationAnimation .layerBox label {width: calc(100% - 20px) !important; font-size: 12px !important; font-weight: 500 !important;}
    .arcAnimationWrapper {width: 350px; height: 350px;}
    .arcAnimationWrapper .arcAniMAlogo {max-width: 40px;}
    .arcAnimationWrapper .layerBox span img {max-width: 20px !important; border-radius: 0px !important;}
    .arcAnimationWrapper .layerBox label {width: calc(100% - 20px) !important; font-size: 12px !important; font-weight: 500 !important;}
    .arcAnimationWrapper .secondLayer {top: 70px;}
    .arcAnimationWrapper .thirdLayer {top: 130px;}
    .arcAnimationWrapper .fourthLayer {top: 190px;}
    .supportAniWrapper {width: 350px; height: 350px;}
    .supportAniWrapper .layerBox span img {max-width: 20px !important; border-radius: 0 !important;}
    .supportAniWrapper .layerBox label.aniLabel {white-space: nowrap; width: calc(100% - 20px) !important; font-size: 12px !important; font-weight: 500 !important;}
	.supportAniWrapper .layerBox.fourthLayer label.aniLabel {white-space: normal !important;}
    .supportAniWrapper .secondLayer {top: 120px !important;}
    .supportAniWrapper .thirdLayer {bottom: 100px !important;}
    .schEngineAnimation {width: 350px;}
    .schEngineAnimation .layerBox span img {max-width: 20px !important;}
    .schEngineAnimation .layerBox label {width: calc(100% - 20px) !important; font-size: 12px !important; font-weight: 500 !important;}

    @keyframes visBorderOne {
        0% {width: 0;}
        100% {width: 120px;}
    }

    @keyframes visBorderTwo {
        0% {height: 0;}
        100% {height: 120px;}
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    #targetSection {padding-top: 80px;}
    #targetSection .svgContainer {left: 0;}
    #advantages h2 {font-size: 24px;}
    #advantages label {font-size: 44px; padding: 0 0 50px 0;}
    .advantagesWrapper .sticky-image {top: 100px;}
    .advantagesWrapper .left {padding-left: 40px;}
    .advantagesWrapper .section {padding-top: 40px;}
    .advantagesWrapper .section h4 {font-size: 24px; line-height: 30px;}
    .advantagesWrapper .section h4 span {font-size: 48px; line-height: 48px;}
    .advantagesWrapper .section p {padding: 0 50px 0 0; font-size: 16px; line-height: 26px;}
    .motivationBanner {width: 470px;}
    .motivationBanner .borderOne {margin-right: -20px;}
    .motivationBanner .borderTwo {right: 0;}
    .motivationBanner .borderThree {margin-left: -20px;}
    .motivationBanner .borderFour {left: 0;}
    .motivationBanner .motivationIcon {left: 160px; top: 100px;}
    .motivationBanner .motivationIcon img {max-width: 80px !important;}

    @keyframes borderOne {
        0% {width: 0; right: 130px;}
        100% {width: 130px; right: 0;}
    }

    @keyframes borderTwo {
        0% {height: 0;}
        100% {height: 130px;}
    }

    @keyframes borderThree {
        0% {width: 0; left: 130px;}
        100% {width: 130px; left: 0;}
    }

    @keyframes borderFour {
        0% {height: 0;}
        100% {height: 130px;}
    }

    .visAnimationWrapper {width: 420px; height: 420px;}
    .visAnimationWrapper .visiBox {width: 110px; height: 110px;}
    .borderWrapper h5 {top: -36px; font-size: 13px;}
    .borderWrapper.primaryBorder h5 {padding: 17px 15px 6px 15px;}
    .visAnimationWrapper .visiBox h4 {margin: 4px 0 0 0; padding: 4px 10px; font-size: 13px; border-radius: 4px;}
    .borderWrapper.secondaryBorder h5 {left: 17px; top: 14px;}
    .borderWrapper.tertiaryBorder h5 {padding: 9px 15px 12px 15px;}
}

@media only screen and (min-width: 1600px) and (max-width: 1799px) {
    #advantages h2 {font-size: 30px;}
    #advantages label {font-size: 54px;}
    .advantagesWrapper .section {padding: 50px 0 0 0;}
    .advantagesWrapper .section h4 {font-size: 34px; padding: 0 40px 20px 0; line-height: 44px;}
    .advantagesWrapper .section h4 span {font-size: 60px; line-height: 60px;}
    .motivationBanner {width: 550px;}
    .motivationBanner .borderOne {margin-right: -20px;}
    .motivationBanner .borderTwo {right: 0;}
    .motivationBanner .borderThree {margin-left: -20px;}
    .motivationBanner .borderFour {left: 0;}
    .motivationBanner .motivationIcon img {max-width: 100px !important;}
    .motivationBanner .motivationIcon {left: 190px; top: 110px;}

    @keyframes borderOne {
        0% {width: 0; right: 130px;}
        100% {width: 130px; right: 0;}
    }

    @keyframes borderTwo {
        0% {height: 0;}
        100% {height: 130px;}
    }

    @keyframes borderThree {
        0% {width: 0; left: 130px;}
        100% {width: 130px; left: 0;}
    }

    @keyframes borderFour {
        0% {height: 0;}
        100% {height: 130px;}
    }
}