#plateform {margin: 0; padding: 80px 0; background: url(../images/platform-background.png) no-repeat top center #fff; position: relative;}
#plateform::before {content: ""; position: absolute; top: -130px; left: 0; width: 100%; height: 130px; background: url(https://front-end-noobs.com/jecko/img/wave-mid.png) no-repeat;}
#plateform h3 {margin: 0; padding: 0 0 60px 0; height: auto; font-weight: 800; font-size: 60px; font-family: "Oswald", sans-serif; line-height: 70px; text-align: center; background: linear-gradient(90deg, blue, purple, cyan); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: headingGradientText 5s ease infinite;}
#plateform h4 {margin: 0; padding: 0 0 40px 0; font-weight: 400; font-size: 30px; line-height: 40px; text-align: center; color: #393939;}
#plateform h4 span {font-weight: 600;}

/**** platform card ****/
.plateformIcon {position: relative; z-index: 2; width: 70px; height: 70px; line-height: 65px; text-align: center;}
.plateformIcon img {max-width: 40px;}
.plateformIcon:before {content: ''; position: absolute; inset: 0; background-color: #E2E8FA; border-radius: 100%; z-index: -1; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
.plateformIcon .dots:after {content: ''; position: absolute; background-color: #684DF4; height: 24px; width: 23px; border-radius: 50%;}
.plateformIcon .dots:after {height: 12px; width: 12px; bottom: -4px; left: 27px;}
.service-featured {text-align: center; position: relative; z-index: 2;}
.service-featured:before {content: ''; height: 180px; width: 100%; background-color: #F5F5F5; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-radius: 10px; z-index: -1; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
.service-featured .plateformIcon {margin: 0 auto 30px auto;}
.service-featured .icon-btn {border-radius: 99px; background-color: #684DF4; box-shadow: 0 6px 20px rgb(0 96 255 / .5); border: none; color: #fff; position: absolute; bottom: -28px; left: calc(50% - 28px);}
.service-featured .icon-btn:hover {background-color: #fff; color: #684DF4;}
.service-featured_content {background-color: #fff; max-width: 312px; box-shadow: 0 10px 30px rgb(8 14 28 / .06); border-radius: 10px; margin-left: auto; margin-right: auto; padding: 40px 15px 28px 15px; margin-bottom: 28px;}
.service-featured_text {max-width: 255px; margin: 0 auto 31px auto;}
.plateformCard {padding: 20px 20px 70px 20px; position: relative; z-index:2; box-shadow: 0 10px 30px rgb(8 14 28 / .06); background-color: #fff; border-radius: 10px; overflow: hidden; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; margin-bottom: 30px;}
.plateformCard a.readMore {position: absolute; bottom: 20px; color: #684DFA; font-size: 15px;}
.plateformCard a.readMore img {margin-left: 6px;}
.plateformCard:hover a.readMore {color: #fff;}
.plateformCard:hover a.readMore img {filter: brightness(0) invert(1);}
.plateformCard:before,.plateformCard:after {content: ''; position: absolute; height: 110px; width: 110px; opacity: .2; border-radius: 100%; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; z-index: -1; background: rgba(32, 0, 245);}
.plateformCard:before {bottom: -103px; right: -48px;}
.plateformCard:after {right: -103px; bottom: -48px;}
.plateformCard .plateformIcon {margin-bottom: 20px;}
.plateformCard .plateformContent h5 a:hover {color: #E2E8FA;}
.plateformCard .plateformBgShape {position: absolute; bottom: -200px; left: 0; width: 100%; opacity: 0; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; pointer-events: none;}
.plateformCard .plateformBgShape img {width: 100%;}
.plateformCard_number {position: absolute; top: 25px; right: 40px; font-size: 100px; line-height: 1; font-weight: 700; color: #E2E8FA; opacity: .3;}
.plateformCard_text {-webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; margin-bottom: 22px;}
.plateformCard .th-btn {background-color: #E2E8FA; color: #141D38; padding: 12.5px 20px; box-shadow: none;}
.plateformCard .th-btn:before, .plateformCard .th-btn:after {background-color: #E2E8FA}
.plateformCard:hover {width: 100%;}
.plateformCard:hover:before, .plateformCard:hover:after {right: 0; opacity: 1; height: 120%; width: 120%; border-radius: 0;}
.plateformCard:hover:after {background: linear-gradient(300deg,#430171,#2b00ba,#430171,#2b00ba); background-size: 300% 300%; animation: plateformcard-animation 6s ease infinite;}
.plateformCard:hover .plateformIcon:before {background-color: #fff;}
.plateformCard:hover .plateformBgShape {bottom: 0; opacity: 1}
.plateformCard:hover .plateformContent h5 {color: #fff;}
.plateformCard:hover .plateformContent p {color: #fff;}
.plateformCard:hover .th-btn {background-color: #fff;}
.plateformCard:hover .plateformCard_text {color: #fff}
.service-sec {background-size: auto; background-position: top center; background-color: #F5F5F5;}
.plateformcardNumber {position: absolute; top: 15px; right: 15px; font-size: 80px; line-height: 1; font-weight: 700; color: #eceef5; opacity: 0.3;}
.plateformContent {margin: 0; padding: 0;}
.plateformContent h5 {margin: 0; padding: 0 0 10px 0; font-weight: 700; font-size: 18px; line-height: 26px; color: #393939;}
.plateformContent p {margin: 0; padding: 0; font-weight: 400; font-size: 16px; line-height: 26px; color: #393939; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
#plateform .strokeAnimationWrapper {width: 100%;}
#plateform .strokeAnimationWrapper .svg-wrapper {width: 300px; top: 10px; right: 30px; left: inherit;}
.waveWrapper {overflow: hidden; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto;}
.botToTop .waveWrapperInner {transform: rotate(360deg); top: -780px;}
.waveWrapperInner {position: absolute; width: 100%; overflow: hidden; height: 200px; top: 300px; -webkit-filter: hue-rotate(275deg); filter: hue-rotate(275deg); transform: rotate(180deg);}
.bgTop {z-index: 15; opacity: 0.5;}
.bgMiddle {z-index: 10; opacity: 0.75;}
.bgBottom {z-index: 5;}
.wave {position: absolute; left: 0; width: 200%; height: 100%; background-repeat: repeat no-repeat; background-position: 0 bottom; transform-origin: center bottom;}
.waveTop {background-size: 50% 100px;}
.waveAnimation .waveTop {animation: move-wave 3s; -webkit-animation: move-wave 3s; -webkit-animation-delay: 1s; animation-delay: 1s;}
.waveMiddle {background-size: 50% 120px;}
.waveAnimation .waveMiddle {animation: move_wave 10s linear infinite;}
.waveBottom {background-size: 50% 100px;}
.waveAnimation .waveBottom {animation: move_wave 15s linear infinite;}

@keyframes headingGradientText {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

@keyframes plateformcard-animation {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

@keyframes move_wave {
    0% {transform: translateX(0) translateZ(0) scaleY(1);}
    50% {transform: translateX(-25%) translateZ(0) scaleY(0.55);}
    100% {transform: translateX(-50%) translateZ(0) scaleY(1);}
}

/**** media queries ****/
@media only screen and (min-width: 0px) and (max-width: 575px) {
    #plateform {padding: 60px 0;}
    #plateform .waveWrapper {display: none;}
    #plateform h3 {font-size: 42px; line-height: 52px; padding: 0;}
    #plateform .strokeAnimationWrapper .svg-wrapper {position: static; margin-top: 40px;}
    #plateform .strokeAnimationWrapper .svg-wrapper svg {margin-top: 30px;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    #plateform .waveWrapper {display: none;}
    #plateform h3 {font-size: 44px; line-height: 54px; padding: 0; width: 100%; margin-bottom: 80px;}
    #plateform .strokeAnimationWrapper .svg-wrapper {margin-top: 40px; bottom: 10px; top: inherit; right: inherit; left: 50%; transform: translateX(-50%);}
    #plateform .strokeAnimationWrapper .svg-wrapper svg {margin-top: 30px;}
    .plateformContent h5 {font-size: 18px; line-height: 24px;}
    .plateformContent p {font-size: 14px; line-height: 20px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #plateform .waveWrapper {display: none;}
    #plateform h3 {font-size: 50px; line-height: 66px; padding: 0 60px; width: 100%; margin-bottom: 80px;}
    #plateform .strokeAnimationWrapper .svg-wrapper {margin-top: 40px; bottom: 10px; top: inherit; right: inherit; left: 50%; transform: translateX(-50%);}
    #plateform .strokeAnimationWrapper .svg-wrapper svg {margin-top: 30px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #plateform h3 {font-size: 46px; line-height: 56px;}
    #plateform .strokeAnimationWrapper .svg-wrapper {width: 230px; top: 60px; right: 230px;}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #plateform {padding: 40px 0;}
    #plateform h3 {padding: 0 0 60px 0; font-size: 36px; line-height: 46px; max-width: 770px; margin: 0 auto;}
    #plateform .strokeAnimationWrapper .svg-wrapper {width: 180px; top: 33px; right: 300px;}

    .plateformIcon {width: 60px; height: 60px; line-height: 60px; margin-bottom: 10px;}
    .plateformcardNumber {top: 26px; font-size: 50px;}
    .plateformContent h5 {padding: 0 0 6px 0; font-size: 15px; line-height: 22px;}
    .plateformContent p {font-size: 12px; line-height: 20px;}
    .plateformCard {padding: 20px 20px 38px 20px;}
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    #plateform h3 {font-size: 48px;}
    #plateform .strokeAnimationWrapper .svg-wrapper {width: 210px;}
}