:root {
  --pixel-size: 1.2;
};

body {
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}
body.modal-open {
  overflow: hidden;
}
body {
  overflow-x: hidden;
}
p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.no-padding {
  padding: 0;
}
.bg-light {
  background-color: #ffffff !important;
}
.header-content-wrapper {
  /*height: 500px;*/
  height: 90vh;
  overflow: hidden;
  position: relative;
  padding: 0;
}
.subpage .header-content-wrapper {
  height: 90vh;
}
#about-dsx .header-caption-content {
  padding-left: 0;
}
.wrapper-short,
.subpage .wrapper-short {
  height: 400px;
}
.banner-image {
  background-size: cover;
  height: 100%;
  background-position: center 40%;
}
.product-banner-image {
  height: 100%;
  background-position: center 40%;
}
.banner-image-blur {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}
.banner-image-about {
  background-image: url('../images/header-image-about.jpg');
}
.banner-image-announcement {
  background-image: url('../images/header-image-announcement.jpg');
}
.banner-image-team {
  background-image: url('../images/header-image-team.jpg');
}
.banner-image-career {
  background-image: url('../../../uploads/2024/02/career.jpg');
}
.banner-image-contact {
  background-image: url('../images/header-image-contact.jpg');
}
.banner-image-ir {
  background-image: url('../images/header-image-ir.jpg');
}
.banner-image-products {
  background-image: url('../images/header-image-products.jpg');
}
.banner-image-dsx {
  background-image: url('../images/header-image-dsx.jpg');
}
.banner-image-edc {
  background-image: url('../images/header-image-product-edc.jpg');
}
.banner-image-wannatalk {
  background-image: url('../images/header-image-product-wannatalk.jpg');
}
.banner-image-anypay {
  background-image: url('../images/header-image-product-anypay.jpg');
}
.banner-image-buymall {
  background-image: url('../images/header-image-product-buymall.jpg');
}
.banner-image-financial {
  background-image: url('../images/header-image-product-financial.jpg');
}
.banner-image-b2c {
  background-image: url('../images/header-image-product-b2c.jpg');
}
.banner-image-revpay {
  background-image: url('../images/header-image-product-revpay.jpg');
}
.banner-image-partners {
  background-image: url('../images/header-image-partners.jpg');
}
.banner-image-tnc {
  background-image: url('../images/header-image-tnc.jpg');
}
#videobg {
  width: 100%;
}
.content-banner {
   position: absolute;
   width: 100%;
   z-index: 2;
   top: -40%;
}
.content-banner img {
  width: 100%;
}
.banner-image-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #3C311C;
  opacity: 0.5;
  mix-blend-mode: multiply;
  z-index: 15;
}
.banner-image-overlay-monotone {
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
  z-index: 4;
}
.banner-image-overlay-red {
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  mix-blend-mode: soft-light;
  z-index: 3;
}
.revpay-products-image-banner,
.b2c-products-image-banner {
  position: relative;
  width: 100%;
  height: 400px;
}
.revpay-products-image-redbg,
.b2c-products-image-redbg {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #c12033;
  z-index: 1;
}
.revpay-products-image {
  position: absolute;
  right: 0;
  top: -30%;
  z-index: 5;
}
.revpay-products-image img {
  width: auto;
  height: 700px;
}
.b2c-products-image {
  position: absolute;
  right: 0;
  top: 0%;
  z-index: 5;
}
.b2c-products-image img {
  width: auto;
  height: 440px;
}
.subpage .banner-image-overlay {
  mix-blend-mode: multiply;
  background-color: rgba(0,0,0,0.6);
}
.revenue-peak {
  position: absolute;
  right: 0;
  bottom: -40%;
  width: 100%;
  height: 100%;
  z-index: 10;
  mix-blend-mode: multiply;
  opacity: 0.95;
}
.revenue-peak-solid {
  opacity: 1;
  top: 40%;
}
.revenue-peak-icon img {
  max-height: 28px;
  width: 26px;
  padding-bottom: 6px;
}
.header-caption-content .revenue-peak-icon img {
  max-height: 48px;
  width: 32px;
  padding-bottom: 8px;
}
/*.header-caption-content span {
  display: inline-block;
}*/
.dsx-background {
  position: absolute;
  right: -20%;
  bottom: -25%;
  width: 75%;
  z-index: 4;
  opacity: 0.3;
}
.header-caption-wrapper {
  width: 100%;
  position: absolute;
  z-index: 99;
  bottom: 15%;
}
.inline-span {
  display: inline-block;
}
.header-caption-wrapper .section-link {
  text-align: center;
}
.mainpage .alt-header .header-caption-wrapper,
.subpage .alt-header .header-caption-wrapper {
  text-align: left;
  bottom: 14%;
  top: auto;
}
.subpage .alt-header .page-cat-header {
  padding-left: 0;
  margin-bottom: 15px;
}
.subpage .alt-header .header-caption-content {
  text-align: left;
  font-size: 3.5rem;
  line-height: 4rem;
  margin-bottom: 15px;
}
.mainpage .alt-header .header-caption-content,
.mainpage .alt-header .header-subcontent,
.mainpage .alt-header .header-caption-wrapper .section-link {
  text-align: left;
}
.subpage .header-caption-wrapper {
  top: 60%;
}
.subpage .header-caption-wrapper-center {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  text-align: center;
}
.header-caption-content {
  font-size: 5.5rem;
  line-height: 5.5rem;
  font-weight: 100;
  color: #ffffff;
  margin-bottom: 25px;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.subpage .header-caption-content {
  font-size: 4.5rem;
  line-height: 4.5rem;
  margin-bottom: 15px;
}
.body-caption-content {
  font-size: 3rem;
  line-height: 3rem;
  margin-top: 5rem;
  margin-bottom: 4rem;
  text-align: center;
  font-weight: bold;
  color: #000000;
}
.header-subcontent {
  font-size: 1.4rem;
  font-weight: 400;
  color: #ffffff;
  padding: 0;
  margin-bottom: 25px;
  text-align: center;
}
.header-subcontent-center {
  margin: 0 auto;
}
.subpage .header-subcontent {
  font-size: 1rem;
}
.header-caption-content span {
  font-weight: 700;
  opacity: 1;
}
.subpage .page-cat-header {
  font-size: 1rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 30px;
}
.landing-carousel {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}
.carousel-image-wrapper div {
  width: auto;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
}
.carousel-image-001 div {
  background-image: url("../images/landingcarousel/landing-image-001.jpg");
  background-position: center;
}
.carousel-image-002 div {
  background-image: url("../images/landingcarousel/landing-image-002.jpg");
  background-position: center;
}
.carousel-image-003 div {
  background-image: url("../images/landingcarousel/landing-image-003.jpg");
  background-position: center;
}
.carousel-image-004 div {
  background-image: url("../images/landingcarousel/landing-image-005.jpg");
  background-position: center;
}

.navbar {
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-brand {
  max-width: 180px;
}
/*new navbar*/
nav {
  float: right;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 15px;
  line-height: 2.5rem;
  background: #ffffff;
  color: #262626;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: bold;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
nav ul li a:hover,
nav ul li a:visited:hover,
nav ul li ul li a:hover,
nav ul li ul li a:visited:hover {
  background: #262626;
  height: 100%;
  color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
}
.navbar .nav-dropdown {
  box-shadow: 2px 12px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation */
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  /*background: #262626;*/
  height: 70px;
  width: 70px;
}


@media screen and (min-width: 992px) {
  .nav-list {
    display: block !important;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 14px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 2px;
  width: 35px;
  background: #262626;
  position: absolute;
  display: block;
  content: '';
  transition: all 0.2s ease-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}
/*end of new navbar*/
.tickerbar-bg {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
}
.tickerbar-info {
  font-size: 12px;
  font-weight: 100;
  color: #000000;
  height: 48px;
  line-height: 48px;
}
.ticker-companyname {
  font-weight: bold;
}
.ticker-stockprice-up {
  font-weight: bold;
  color: #46A500;
}
#product-main {
  position: relative;
  height: 90vh;
}
/*Spin animation*/
.spin-wrapper {
  width: 540px;
  height: 540px;
  position: absolute;
  top: 50%;
  left:  50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
#company-quick-intro {
  overflow: hidden;
}
.mainpage-hero-circle-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
}
.mainpage-hero-circle {
  position: absolute;
  top: -45%; left: 10%;
  border-radius: 50%;
  width: 500px;
  height: 500px;
  overflow: hidden
}
.mainpage-hero-circle img {
  width: 100%;
  height: auto;
}
#company-quick-intro .section-content {
  padding-left: 15px;
  padding-right: 15px;
}
#dsx-family-2 .spin-wrapper {
  top: 70%;
}
#dsx-family-2 .dsx-center {
  top: 70%;
  width: 180px;
  height: 180px;
}
.outerCircle2 {
  background-color: transparent;
  border: 1px dotted rgba(255, 255, 255, 0.9);
  opacity: 0.9;
  border-right: 0px solid transparent;
  border-left: 0px solid transparent;
  border-radius: 50%;
  width: 540px;
  height: 540px;
  margin: 0 auto;
  -moz-animation: spinoffPulse 3s infinite ease-in-out;
  -webkit-animation: spinoffPulse 3s infinite ease-in-out;
}
.outerCircle {
  background-color: transparent;
  border: 1px dotted rgba(255, 255, 255, 0.9);
  opacity: 0.9;
  border-right: 0px dotted transparent;
  border-left: 0px dotted transparent;
  border-radius: 50%;
  top: -470px;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  -moz-animation: spinPulse 3s infinite ease-in-out;
  -webkit-animation: spinPulse 3s infinite ease-in-out;
}
.innerCircle {
  background-color: transparent;
  border: 2px dotted rgba(255, 255, 255, 0.6);
  opacity: 0.9;
  border-left: 0px dotted transparent;
  border-right: 0px dotted transparent;
  border-radius: 50%;
  top: -820px;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  -moz-animation: spinoffPulse 5s infinite linear;
  -webkit-animation: spinoffPulse 5s infinite linear;
}

.circle{
  border:5px dotted #ffffff;
  border-radius:50%;
  margin:auto;
  position:absolute;
}
.inside{
  height:10px;
  width:10px;
  position:absolute;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.2);
}
.innerCircle .inside {
  top: 105px;
}
.outerCircle .inside {
  top: 150px;
}
.outerCircle2 .inside {
  top: 210px;
}

@-moz-keyframes spinPulse {
  0% {
    -moz-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px #bdd73c;
  }
  50% {
    -moz-transform: rotate(145deg);
    opacity: 1;
  }
  100% {
    -moz-transform: rotate(-320deg);
    opacity: 0;
  }
}
@-moz-keyframes spinoffPulse {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spinPulse {
  0% {
    -webkit-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px #bdd73c;
  }
  50% {
    -webkit-transform: rotate(145deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-320deg);
    opacity: 0;
  }
}
@-webkit-keyframes spinoffPulse {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotatecircle {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(-360deg);
  }
}

@-webkit-keyframes rotatecircle {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
/*end of spin animation*/
/*dsx v2 floating*/
.dsx-bg-wrapper {
  width: 100%;
  height: 500px;
  position: relative;
}
.dsx-bg-wrapper .featured-bg {
  width: 100%;
  margin: 0 auto;
}
/*end of dsx v2 floating*/
/*floating animation*/
.featured-bg {
  position: absolute;
  right: 180px;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.dsx-center {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 100%;
  background-color: #ffffff;
  z-index: 3;
}
.dsx-center div {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.dsx-center img {
  width: 75%;
}
#dsx-page .logo-round,
#revpay-page .logo-round,
#rev-products-page .logo-round {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  -webkit-box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
}
#revpay-page {
  position: relative;
  z-index: 10;
}
#dsx-page .logo-round img {
   width: 60%;
   height: auto;
}
#revpay-page .revpay-logo-wrap img {
   width: auto;
   height: 60px;
}
#edc-page .hero-circle {
  width: 100%;
  height: 100%;
  position: relative;
}
#edc-page .hero-circle-outline {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  bottom: -20%;
  left: 0;
  z-index: 20;
  padding: 4%;
  -webkit-box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
}
.hero-circle-image img {
  width: 100%;
  height: auto;
}
.edc-coverage-map {
  position: absolute;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}
.edc-stats-layer {
  position: relative;
  z-index: 10;
  width: 100%;
}
.edc-stats-wrapper {
  position: relative;
  width: 100%;
  height: 350px;
}
.transaction-stats-wrapper, .merchant-stats-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
}
.edc-stats {
  position: relative;
  width: 350px;
  height: 350px;
  bottom: 25%;
  left: 0;
}
.transaction-stats {
  position: absolute;
  width: 200px;
  height: 200px;
  bottom:0; left: 0;
}
.merchant-stats {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 0; right: 5%;
}
.edc-stats-border {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background-color: rgba(195, 14,46, 0.8);
  padding: 4%;
  -webkit-box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
  z-index: 13;
}
.transaction-stats-border, .merchant-stats-border {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(195, 14,46, 0.8);
  color: #000000;
  padding: 5%;
  z-index: 13;
}
.edc-stats-border-2 {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255, 0.4);
  top: -15px;
  left: -15px;
  /*background-color: rgba(195, 14,46, 0.6);*/
  z-index: 12;
  -webkit-animation: statCircleEnlarge 4s ease-in-out infinite;
          animation: statCircleEnlarge 4s ease-in-out infinite;
}
.transaction-stats .edc-stats-border-2 {
  width: 230px;
  height: 230px;
}
.merchant-stats .edc-stats-border-2 {
  width: 210px;
  height: 210px;
}
.edc-stats-border-3 {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: rgba(195, 14,46, 0.4);
  top: -25px;
  left: -25px;
  z-index: 11;
  -webkit-animation: statBorderEnlarge 2s ease-in-out infinite;
          animation: statBorderEnlarge 2s ease-in-out infinite;
}
.transaction-stats .edc-stats-border-3 {
  width: 250px;
  height: 250px;
  -webkit-animation: statBorderEnlarge2 2s ease-in-out infinite;
          animation: statBorderEnlarge2 2s ease-in-out infinite;
}
.merchant-stats .edc-stats-border-3 {
  width: 230px;
  height: 230px;
  -webkit-animation: statBorderEnlarge2 3s ease-in-out infinite;
          animation: statBorderEnlarge2 3s ease-in-out infinite;
}
.stats-circle, .transaction-stats-circle, .merchant-stats-circle {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 50%;
  text-align: center;
}
.stats-text-wrapper {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.stats-text {
  font-size: 1rem;
  font-weight: normal;
}
.transaction-stats-circle .stats-text {
  font-size: 0.8rem;
}
.merchant-stats-circle .stats-text {
  font-size: 0.7rem;
}
.stats-number {
  font-size: 4.5rem;
  color: #C30E2E;
  font-weight: bold;
}
.transaction-stats-circle .stats-number {
  font-size: 2.5rem;
}
.merchant-stats-circle .stats-number {
  font-size: 2rem;
}

@-moz-keyframes statCircleEnlarge {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
@-webkit-keyframes statCircleEnlarge {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
@-moz-keyframes statBorderEnlarge {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
@-webkit-keyframes statBorderEnlarge {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
@-moz-keyframes statBorderEnlarge2 {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@-webkit-keyframes statBorderEnlarge2 {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
#rev-products-page .logo-round img {
   width: 90%;
   height: auto;
}
/*v1 dsx
end of v1 dsx*/
#dsx-family {
  position: relative;
  height: auto;
  padding-bottom: 0;
}
#ekyc-section,
#rba-section,
#wannatalk-section,
#vsure-section,
#anypay-section {
  padding: 80px 0;
  background-color: #F7F7F7;
  overflow-x: hidden;
}
#revpay-terminals-lineup {
  padding: 80px 0;
  background-color: #F7F7F7;
}
#edc-page {
  background-color: #FFFFFF;
}
#revpay-section,
#tsp-section,
#creditpassport-section,
#financial-section,
#wanna-section,
#buymall-section {
  padding: 80px 0;
  background-color: #FFFFFF;
  overflow-x: hidden;
}
#tsp-section {
  overflow-y: hidden;
}
#wanna-section .section-title img,
#vsure-section .section-title img,
#buymall-section .section-title img,
#anypay-section .section-title img {
  margin-bottom: 20px;
}
#buymall-section .section-title img {
  width: auto;
  height: 80px;
}
#anypay-section .section-title img {
  width: auto;
  height: 100px;
}
#product-features {
  position: relative;
  height: auto;
}

.edc-coverage-map {
  overflow-x: hidden;
}
#product-features-wrap,
#dsx-family-2 {
  position:relative;
  padding-top: 5%;
  width: 100%;
  height: auto;
  text-align: center;
}
#about-dsx #dsx-family-2 {
  position: absolute;
  bottom: 0;
  left: 47%;
}
.financial-animation-section #product-features-wrap {
  padding-top: 8%;
}
.product-features-icon-wrapper {
  width: 100%;
  height: auto;
  text-align: center;
}
.product-features-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 15px;
  padding: 2%;
  background-color: rgba(255, 255, 255, 0.5);
}
.product-features-icon img {
  width: 100%;
  height: auto;
}
.product-features-desc p {
  font-family: inherit;
  font-weight: normal;
  font-size: 0.8rem;
  color: #ffffff;
}
.product-features-desc .feature-title {
  font-weight: bold;
}
#dsx-family .outer-mask,
#product-features .outer-mask {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#dsx-family .inner-mask,
#product-features .inner-mask {
  position: absolute;
  left: 0; top: 0;
  width: 200%;
  height: 100%;
  overflow: hidden;
  transform: skew(0deg, -5deg);
}
.header-content-wrapper .red-bg {
  height: 100%;
}
#dsx-family .inner-mask .red-bg,
#product-features .inner-mask .red-bg,
#product-features .inner-mask .green-bg,
#product-features .inner-mask .blue-bg,
#product-features .inner-mask .pink-bg,
#product-features .inner-mask .magenta-bg {
  width: 100%;
  height: 100%;
}
#product-family {
  position: relative;
  height: 100%;
}
#product-family .dsx-left-wrapper {
  position: absolute;
  bottom: 10%;
}
#product-family .center-title {
  position: absolute;
  top: 15%;
}
.box-size-a {
  position: absolute;
  background-color: #ffffff;
  z-index: 5;
  width: 160px;
  height: 80px;
  box-sizing: border-box;
  border: 5px white solid;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.4);
  -webkit-transform: translatey(10px);
          transform: translatey(10px);
  -webkit-animation: float 6s ease-in-out infinite;
          animation: float 6s ease-in-out infinite;
}
.box-size-b {
  position: absolute;
  background-color: #ffffff;
  z-index: 5;
  width: 120px;
  height: 60px;
  box-sizing: border-box;
  border: 5px white solid;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.4);
  -webkit-transform: translatey(5px);
          transform: translatey(5px);
  -webkit-animation: float 5s ease-in-out infinite;
          animation: float 5s ease-in-out infinite;
}
.box-size-c {
  position: absolute;
  background-color: #ffffff;
  z-index: 5;
  width: 100px;
  height: 50px;
  box-sizing: border-box;
  border: 5px white solid;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.4);
  -webkit-transform: translatey(0px);
          transform: translatey(0px);
  -webkit-animation: float 4s ease-in-out infinite;
          animation: float 4s ease-in-out infinite;
}
.box-size-d {
  position: absolute;
  background-color: #ffffff;
  z-index: 5;
  width: 200px;
  height: 100px;
  box-sizing: border-box;
  border: 5px white solid;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.4);
  -webkit-transform: translatey(0px);
          transform: translatey(0px);
  -webkit-animation: float 4s ease-in-out infinite;
          animation: float 4s ease-in-out infinite;
}

/*v2 dsx box position*/
.box-revpay {
  position: relative;
  background-color: #ffffff;
  z-index: 5;
  width: 200px;
  height: 100px;
  top: -20%;
  margin: 0 auto;
  border: 5px white solid;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.4);
  animation: dsxfloat 4.5s ease-in-out infinite;
  -webkit-animation: dsxfloat 4.5s ease-in-out infinite;
}
.product-box .revpay-text {
  color: #C70522;
  line-height: 90px;
  font-size: 1.3rem;
}
.box-rba {
  position: absolute;
  width: 160px;
  height: 80px;
  background-color: #ffffff;
  left: 20%;
  top: 40%;
  z-index: 4;
  border: 5px white solid;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.4);
  animation: dsxfloat 5s ease-in-out infinite;
  -webkit-animation: dsxfloat 5s ease-in-out infinite;
}
.product-box .rba-text {
  color: #FA235A;
  line-height: 21px;
  font-size: 0.9rem;
  margin-top: 9%;
}
.box-tsp {
  position: absolute;
  width: 160px;
  height: 80px;
  background-color: #ffffff;
  right: 20%;
  top: 40%;
  z-index: 4;
  border: 5px white solid;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.4);
  animation: dsxfloat 4s ease-in-out infinite;
  -webkit-animation: dsxfloat 4s ease-in-out infinite;
}
.product-box .tsp-text {
  color: #7C06CB;
  line-height: 21px;
  font-size: 0.9rem;
  margin-top: 9%;
}
.box-creditpassport {
  width: 140px;
  height: 70px;
  position: absolute;
  left: 15%;
  top: 70%;
  background-color: #ffffff;
  z-index: 4;
  border: 5px white solid;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.4);
  animation: dsxfloat 4s ease-in-out infinite;
  -webkit-animation: dsxfloat 4s ease-in-out infinite;
}
.product-box .creditpassport-text {
  color: #860F7F;
  line-height: 18px;
  font-size: 0.8rem;
  margin-top: 9%;
}
.box-ekyc {
  width: 140px;
  height: 70px;
  position: absolute;
  right: 15%;
  top: 70%;
  background-color: #ffffff;
  z-index: 4;
  border: 5px white solid;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.4);
  animation: dsxfloat 5s ease-in-out infinite;
  -webkit-animation: dsxfloat 5s ease-in-out infinite;
}
.product-box .ekyc-text {
  color: #FA235A;
  line-height: 60px;
  font-size: 0.8rem;
}
@keyframes dsxfloat {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-10px);
            transform: translatey(-10px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
.product-box .box-a {
  font-size: 1rem;
}
.product-box .box-b {
  font-size: 0.8rem;
}
.product-box .box-c {
  font-size: 0.7rem;
}
.product-box .box-d {
  font-size: 1.2rem;
}
.product-box p {
  text-align: center;
  font-weight: bold;
  margin-bottom: 0;
}
.paymentterminal-box {
  top: 34%;
  left: 50%;
  transform: translateX(-50%);
}
.product-box .payment-terminal-text {
  color: #C70522;
  margin-top: 9%;
  line-height: 20px;
}
.ecommerce-box {
  left: 2%;
  top: 50%;
}
.product-box .ecommerce-text {
  color: #FA235A;
  margin-top: 8%;
  line-height: 26px;
}
.softwaredev-box {
  top: 10%;
  left: 45%;
}
.product-box .softwaredev-text {
  color: #860F7F;
  margin-top: 8%;
  line-height: 14px;
}
.paymentsecurity-box {
  bottom: 10%;
  left: 15%;
}
.product-box .paymentsecurity-text {
  color: #7C06CB;
  margin-top: 9%;
  line-height: 16px;
}
.aichatbot-box {
  right: 13%;
  bottom: 35%;
}
.product-box .aichatbot-text {
  color: #DB002D;
  margin-top: 9%;
  line-height: 30px;
}
/*end of v2 dsx box position*/

/*v3 dsx box position*/
.dsx-productbox {
  background-color: #ffffff;
  z-index: 5;
  width: 160px;
  height: 50px;
  border: 5px white solid;
  border-radius: 5px;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.4);
}
.box-ani-speed-1 {
  animation: dsxfloat 4.5s ease-in-out infinite;
  -webkit-animation: dsxfloat 4.5s ease-in-out infinite;
}
.box-ani-speed-2 {
  animation: dsxfloat 6s ease-in-out infinite;
  -webkit-animation: dsxfloat 6s ease-in-out infinite;
}
.box-ani-speed-3 {
  animation: dsxfloat 4s ease-in-out infinite;
  -webkit-animation: dsxfloat 4s ease-in-out infinite;
}
.dsx-revpay-position {
  position: absolute;
  top: 70%;
  left: 20%;
  margin: 0 auto;
}
.dsx-rba-position {
  position: absolute;
  top: 51%;
  right: 25%;
}
.dsx-tokenisation-position {
  position: absolute;
  top: 46%;
  left: 29%;
}
.dsx-passport-position {
  position: absolute;
  top: 92%;
  left: 33%;
}
.dsx-ekyc-position {
  position: absolute;
  top: 84%;
  left: 64%;
}
.logobox {
  position: absolute;
  z-index: 10;
  bottom: 80%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ffffff;
  left: 50%;
  transform: translateX(-50%);
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}
.wordingbox {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.wordingbox .content-title {
  width: 100%;
  color: #C70522;
  font-size: 0.7rem;
  font-weight: 500;
  z-index: 10;
  position: absolute;
  bottom: 22%;
  text-align: center;
}
.wordingbox .twoliner {
  bottom: 8%;
}
.passport-approval-ani {
  position: relative;
  left: 7%;
  top: 25%;
}
.passport-approval-ani .wrapper {
  width: 180px; /* Set the size of the progress bar */
  height: 180px;
  position: absolute; /* Enable clipping */
}
/* Set the sizes of the elements that make up the progress bar */
.passport-approval-ani .circle {
  width: 180px;
  height: 180px;
  border: 10px solid #17d3e6;
  border-radius: 90px;
  position: absolute;
  -webkit-animation: approveCircle 4s ease-in-out infinite;
          animation: approveCircle 4s ease-in-out infinite;
}
@keyframes approveCircle {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  25% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  45%, 90% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  } 
}
/*end of v3 dsx box position*/
/*v3 dsx images*/
.dsx-images-wrapper {
  width: 100%;
  min-height: 300px;
  position: relative;
}
.dsx-revpay-wrapper,
.dsx-rba-wrapper-01 {
  height: 360px;
}
.dsx-ekyc-wrapper {
  height: 360px;
  transform: translateY(30%);
}
.dsx-passport-wrapper {
  height: 380px;
  transform: translateY(15%);
}
.credit-score-wrapper {
  position: absolute;
  left: 0px; bottom: 60px;
  width: 100%; height: auto;
  padding: 20px 20px 20px 80px;
  background-color: rgba(0,0,0,0.5);
}
.credit-score-wrapper .section-content {
  margin-bottom: 0;
}
.credit-score-wrapper .credit-score {
  font-weight: bold;
  font-size: 2.2rem;
  color: white;
}
.credit-score-wrapper .credit-rating-result {
  font-weight: bold;
  font-size: 0.9rem;
  color: white;
}
.dsx-rba-wrapper-02 {
  height: 400px;
}
.dsx-tokenisation-wrapper {
  height: 480px;
}
.dsx-images-position,
.b2c-images-position {
  position: absolute;
  border-radius: 15px;
  overflow: hidden;
}
.dsx-images-position img {
  width: 100%;
  height: auto;
}
/*checked animation*/
.check-wrap {
  width: 40px;
  height: 40px;
  right: 2px;
  bottom: 2px;
  border-radius: 50%;
  border: 2px solid #27B478;
  position: absolute;
  overflow: hidden;
  z-index: 10;
  animation-delay: 0.3s;
  transform: scale(0);
}
.check-wrap-med {
  width: 40px;
  height: 40px;
  animation: wrap 0.3s ease-in-out forwards;
}
.check-wrap-small {
  width: 24px;
  height: 24px;
  animation: wrapsmall 0.3s ease-in-out forwards;
}
.check-wrap-test {
  width: 80px;
  height: 80px;
}
.check-wrap-large {
  width: 50px;
  height: 50px;
  animation: wraplarge 0.3s ease-in-out forwards;
}
.check-speed-2 {
  animation-delay: 1.3s;
}
.check-speed-3 {
  animation-delay: 2s;
}
.check-wrap::before, .check-wrap::after {
  content: "";
  position: absolute;
  background-color: white;
  width: 0;
  transform-origin: left;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.check-wrap-med::before, .check-wrap-med::after {
  height: 3px;
}
.check-wrap-small::before, .check-wrap-small::after {
  height: 2px;
}
.check-wrap-large::before, .check-wrap-large::after {
  height: 4px;
}
.check-wrap::before {
  transform: rotate(45deg);
  animation-name: left;
  animation-delay: 0.8s;
}
.check-speed-2::before {
  transform: rotate(45deg);
  animation-name: left;
  animation-delay: 1.7s;
}
.check-speed-3::before {
  transform: rotate(45deg);
  animation-name: left;
  animation-delay: 2.4s;
}
.check-wrap-small::before {
  animation-name: leftsmall;
}
.check-wrap-large::before {
  animation-name: leftlarge;
}
.check-wrap-med::before {
  top: 17px;
  left: 8px;
}
.check-wrap-small::before {
  top: 9px;
  left: 4px;
}
.check-wrap-large::before {
  top: 21px;
  left: 10px;
}
.check-wrap::after {
  transform: rotate(-45deg);
  animation-name: right;
  animation-delay: 1.1s;
}
.check-speed-2::after {
  transform: rotate(-45deg);
  animation-name: right;
  animation-delay: 2s;
}
.check-speed-3::after {
  transform: rotate(-45deg);
  animation-name: right;
  animation-delay: 2.7s;
}
.check-wrap-small::after {
  animation-name: rightsmall;
}
.check-wrap-large::after {
  animation-name: rightlarge;
}
.check-wrap-med::after {
  top: 25px;
  left: 14px;
}
.check-wrap-small::after {
  top: 14px;
  left: 8px;
}
.check-wrap-large::after {
  top: 31px;
  left: 18px;
}

@keyframes wrap {
  0% {
    background-color: transparent;
    transform: scale(0);
  }
  100% {
    background-color: #27B478;
    transform: scale(1);
  }
}
@keyframes left {
  0% {
    width: 0;
  }
  100% {
    width: 10px;
  }
}
@keyframes right {
  0% {
    width: 0;
  }
  100% {
    width: 20px;
  }
}
@keyframes wrapsmall {
  0% {
    background-color: transparent;
    transform: scale(0);
  }
  100% {
    background-color: #27B478;
    transform: scale(1);
  }
}
@keyframes leftsmall {
  0% {
    width: 0;
  }
  100% {
    width: 6px;
  }
}
@keyframes rightsmall {
  0% {
    width: 0;
  }
  100% {
    width: 12px;
  }
}
@keyframes wraplarge {
  0% {
    background-color: transparent;
    transform: scale(0);
  }
  100% {
    background-color: #27B478;
    transform: scale(1);
  }
}
@keyframes leftlarge {
  0% {
    width: 0;
  }
  100% {
    width: 14px;
  }
}
@keyframes rightlarge {
  0% {
    width: 0;
  }
  100% {
    width: 24px;
  }
}
/*end of checked animation*/
.dsx-revpay-image-001 {
  left: 6%; top: 8%;
  width: 160px;
  height: 160px;
  z-index: 2;
}
.dsx-revpay-image-002 {
  left: 18%; bottom: 12%;
  width: 150px;
  height: 150px;
  z-index: 5;
}
.dsx-revpay-image-003 {
  right: 6%; top: 0%;
  width: 220px;
  height: 220px;
  z-index: 4;
}
.dsx-revpay-image-004 {
  right: 20%; bottom: 2%;
  width: 120px;
  height: 120px;
  z-index: 1;
}
.dsx-ekyc-image-001 {
  left: 3%; top: 4%;
  width: 100px;
  height: 100px;
  z-index: 2;
}
.dsx-ekyc-image-002 {
  left: 12%; bottom: 8%;
  width: 140px;
  height: 140px;
  z-index: 5;
}
.dsx-ekyc-image-003 {
  right: -20%; top: 0%;
  width: 180px;
  height: 180px;
  z-index: 1;
}
.dsx-ekyc-image-004 {
  right: 22%; top: 14%;
  width: 120px;
  height: 120px;
  z-index: 1;
}
.dsx-ekyc-image-005 {
  left: 33%; top: 33%;
  width: 80px;
  height: 80px;
  z-index: 1;
}
.dsx-ekyc-image-006 {
  right: -10%; bottom: 15%;
  width: 60px;
  height: 60px;
  z-index: 2;
}
.dsx-ekyc-image-007 {
  left: 26%; top: -10%;
  width: 130px;
  height: 130px;
  z-index: 1;
}
.dsx-ekyc-image-008 {
  right: 24%; bottom: 0%;
  width: 120px;
  height: 120px;
  z-index: 2;
}
.dsx-ekyc-image-009 {
  right: 22%; top: -13%;
  width: 56px;
  height: 56px;
  z-index: 1;
}
.dsx-ekyc-image-010 {
  right: 12%; bottom: 30%;
  width: 98px;
  height: 98px;
  z-index: 2;
}
.dsx-passport-image-001 {
  top: 10%; right: -40%;
  width: 500px;
  height: 300px;
}
.dsx-passport-image-002 {
  /*left: 7%; top: 30%;*/
  width: 160px;
  height: 160px;
  border-radius: 50%;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) !important;
}
.dsx-rba-image-001 {
  top: -30%; left: -20%;
  width: 460px;
  height: 300px;
}
.dsx-rba-image-002 {
  top: -15%; right: -20%;
  width: 300px;
  height: 420px;
}
.dsx-rba-image-003 {
  top: 3%; right: 40%;
  width: 200px;
  height: 200px;
}
.dsx-tokenisation-image-001 {
  top: 10%; right: 0%;
  width: 320px;
  height: 320px;
}
.dsx-financial-image-001 {
  top: 40%; right: 10%;
  width: 200px;
  height: 200px;
  z-index: 20;
}
.dsx-financial-image-002 {
  top: 15%; left: 20%;
  width: 120px;
  height: 120px;
  z-index: 10;
}
.dsx-financial-image-003 {
  top: 25%; right: -15%;
  width: 140px;
  height: 140px;
  z-index: 10;
}
#tokenization-features .container {
  margin-top: 30px;
}
#tokenization-features .feature {
  padding: 0px 30px;
}
#tokenization-features .section-title {
  font-size: 1rem;
  margin-bottom: 10px;
}
#tokenization-features .section-content {
  font-size: 0.9rem;
  line-height: 1.5rem;
}
#tokenization-features .feature-icon {
  width: 64px;
  height: 64px;
}
#tokenization-features .feature-icon img {
  width: 100%;
  height: auto;
}
/*end of v3 dsx images*/
/*b2c images*/
.b2c-wanna-wrapper {
  height: 500px;
}
.b2c-wanna-image-001 {
  top: 8%; left: 5%;
  height: auto;
  z-index: 20;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.b2c-wanna-image-002 {
  top: 14%; left: 62%;
  height: auto;
  z-index: 10;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.vsure-product-image-001 {
  left: -45%; top: -10%;
  width: 300px;
  height: 420px;
  border-radius: 15px;
  z-index: 20;
  overflow: hidden;
}
.vsure-product-image-002 {
  left: 10%; top: 68%;
  width: 200px;
  height: 200px;
  border-radius: 15px;
  z-index: 10;
  overflow: hidden;
}
.vsure-product-image-003 {
  right: 20%; top: 24%;
  width: 160px;
  height: 160px;
  border-radius: 15px;
  z-index: 10;
  overflow: hidden;
}
.buymall-product-image-001 {
  left: 10%; top: 40%;
  width: 200px;
  height: 200px;
  border-radius: 15px;
  z-index: 20;
  overflow: hidden;
}
.buymall-product-image-002 {
  left: 60%; top: 70%;
  width: 160px;
  height: 160px;
  border-radius: 15px;
  z-index: 10;
  overflow: hidden;
}
.buymall-product-image-003 {
  left: 45%; top: 3%;
  width: 400px;
  height: 240px;
  border-radius: 15px;
  z-index: 10;
  overflow: hidden;
}
.anypay-product-image-001 {
  left: -10%; top: 10%;
  width: 200px;
  height: 200px;
  border-radius: 15px;
  z-index: 20;
  overflow: hidden;
}
.anypay-product-image-002 {
  left: 50%; top: 0%;
  width: 120px;
  height: 120px;
  border-radius: 15px;
  z-index: 10;
  overflow: hidden;
}
.anypay-product-image-003 {
  left: 24%; top: 35%;
  width: 200px;
  height: 280px;
  border-radius: 15px;
  z-index: 10;
  overflow: hidden;
}
.anypay-product-image-004 {
  left: 2%; bottom: 0%;
  width: 120px;
  height: 120px;
  border-radius: 15px;
  z-index: 20;
  overflow: hidden;
}
/*end of b2c images*/

/*revpay*/
.revpay-image-001 {
  top: 8%; right: -50%;
  width: 340px;
  z-index: 20;
  border-radius: 15px;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.revpay-image-001 img,
.rp3-bg-element img {
  width: 100%;
}
.rp3-bg-element {
  position: absolute;
  width: 900px;
  z-index: 1;
  top: -90%;
  left: -25%;
}
.revpay-products {
  position: relative;
  height: 200px;
}
.product-position {
  position: absolute;
  top: -50%;
  left: 0;
  right: 0;
}
.product-wrapper-box {
  width: 100%;
  height: auto;
  padding: 15px 0;
}
.product-wrapper-box .product-button {
  text-align: center;
}
.product-wrapper-box .product-button a {
  font-size: 0.8rem;
  color: #000000;
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
}
.lineup-photo {
  border-radius: 50%;
  width: 140px;
  height: 140px;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 20px;
}
.lineup-photo img {
  width: 100%;
  height: auto;
}
.lineup-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}
.company-contact .lineup-title {
  margin-bottom: 0;
  margin-top: 15px;
}
#map-wrapper-menjalara,
#map-wrapper-malacca,
#map-wrapper-johorbahru,
#map-wrapper-penang {
  display: none;
}
.view-map {
   cursor: pointer;
}
.company-location-map {
  font-size: 14px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
}
.company-contact p {
  margin-bottom: 0;
}
#scheme-supported .lineup-title,
#partners-main .lineup-title {
  font-size: 14px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 0;
}
.product-model-name {
  font-size: 14px;
  text-align: center;
}
/*end of revpay*/

/*v2 dsx product section*/
#revpay-section .product-img-desc {
  position: relative;
  width: 100%;
  height: 300px;
}
.financial-hero-wrapper-mobile {
    display: none;
  }
.financial-hero-wrapper {
  position: relative;
  width: 100%; height: 100%;
}
.financial-animation-icon img {
  width: 100%;
  height: 100%;
}
.security-solution-art {
  position: relative;
  height: 120px;
  top: 10%; left: 50%;
  z-index: 10;
  transform: translateX(-50%);
}
.security-solution-center {
  position: relative;
  width: 120px;
  height: auto;
  margin: 0 auto;
  z-index: 10;
  -webkit-animation: securityfloat 4s ease-in-out infinite;
          animation: securityfloat 4s ease-in-out infinite;
}
.security-solution-left {
  position: absolute;
  width: 90px;
  height: auto;
  left: 5%;
  top: 15%;
  z-index: 3;
  -webkit-animation: securityfloat 5s ease-in-out infinite;
          animation: securityfloat 5s ease-in-out infinite;
}
.security-solution-right {
  position: absolute;
  width: 90px;
  height: auto;
  right: 5%;
  top: 15%;
  z-index: 3;
  -webkit-animation: securityfloat 5s ease-in-out infinite;
          animation: securityfloat 5s ease-in-out infinite;
}
.security-solution-ai {
  width: 100px;
  height: auto;
  position: relative;
  margin: 0 auto;
  top: 25%;
}
.financial-infra-art {
  width: 120px;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 30%;
}
.financial-line-animation {
  position: absolute;
  height: 15%;
  width: 2px;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  background: linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-y;
  background-size: 2px 4px;
  background-position: 0px 0px;
  z-index: 1;
  animation: borderdance 8s infinite linear;
}
.financial-line-animation-2 {
  position: absolute;
  height: 17%;
  width: 2px;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  background: linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-y;
  background-size: 2px 4px;
  background-position: 0px 0px;
  z-index: 1;
  animation: borderdance2 8s infinite linear;
}
@keyframes borderdance {
  0% {
    background-position: 0px 300px;
  }
  100% {
    background-position: 0px 0px;
  }
}
@keyframes borderdance2 {
  0% {
    background-position: 0px 300px;
  }
  100% {
    background-position: 0px 0px;
  }
}
@-webkit-keyframes securityfloat {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-10px);
            transform: translatey(-10px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

@keyframes securityfloat {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-10px);
            transform: translatey(-10px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

.rp-icon {
  position: absolute;
  width: 100px;
  height: 100px;
}
.rp-logo img,
.rp-icon img {
  width: 100%;
  height: 100%;
}
.rp-edc {
  left: 0; top: 0;
}
.rp-code {
  right: 0; top: 0;
}
.rp-mobilepayment {
  left: 0; bottom: 0;
}
.rp-ecomm {
  right: 0; bottom: 0;
}
.rp-logo {
  position: absolute;
  width: 150px;
  height: 150px;
  left: 50%; top: 50%;
  z-index: 10;
  transform: translate(-50%,-50%);
}

.rp-animation {
  position:absolute;
  height: 100px;
  width: 150px;
  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, green 50%, transparent 50%), linear-gradient(0deg, yellow 50%, transparent 50%), linear-gradient(0deg, red 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 5px 2px, 15px 4px, 4px 15px, 4px 15px;
  background-position: 0px 0px, 150px 100px, 0px 100px, 150px 0px;
  animation: border-dance 4s infinite linear;
}
@keyframes border-dance {
  0% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
  100% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
  }
}
.rp-line-animation-topright {
  position: absolute;
  height: 60px;
  width: 110px;
  right: 21%;
  top: 16%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #cd0000 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #cd0000 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 4px 2px, 0px 0px, 2px 4px, 0px 0px;
  background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
  z-index: 1;
  animation: rptopright 8s infinite linear;
  border-radius: 5px;
}

.rp-line-animation-topleft {
  position: absolute;
  height: 60px;
  width: 120px;
  left: 20%;
  top: 16%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 4px 2px, 4px 2px, 0px 0px, 2px 4px;
  background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
  z-index: 1;
  animation: rptopleft 8s infinite linear;
  border-radius: 5px;
}

.rp-line-animation-bottomright {
  position: absolute;
  height: 102px;
  width: 110px;
  right: 21%;
  bottom: 16%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 0px 0px, 4px 2px, 2px 4px, 0px 0px;
  background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
  z-index: 1;
  animation: rpbottomright 8s infinite linear;
  border-radius: 5px;
}

.rp-line-animation-bottomleft {
  position: absolute;
  height: 102px;
  width: 120px;
  left: 20%;
  bottom: 16%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 0px 0px, 4px 2px, 0px 0px, 2px 4px;
  background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
  z-index: 1;
  animation: rpbottomleft 8s infinite linear;
  border-radius: 5px;
}

@keyframes rptopright {
  0% {
    background-position: 150px 0px, 0 100px, 0 0px, 118px 100px;
  }
  100% {
    background-position: 0px 0px, 100px 100px, 0px 100px, 118px 0px;
  }
}

@keyframes rpbottomright {
  0% {
    background-position: 0px 0px, 150px 100px, 0 100px, 100px 100px;
  }
  100% {
    background-position: 300px 0px, 0px 100px, 0 0px, 100px 0;
  }
}
@keyframes rpbottomleft {
  0% {
    background-position: 0px 0px, 0 100px, 0 100px, 118px 100px;
  }
  100% {
    background-position: 300px 0px, 150px 100px, 0px 0px, 118px 0;
  }
}

@keyframes rptopleft {
  0% {
    background-position: 0px 0px, 0 100px, 0 100px, 118px 0px;
  }
  100% {
    background-position: 150px 0px, 100px 100px, 0px 0px, 118px 100px;
  }
}


#ekyc-section .product-img-desc-1 {
  position: relative;
  width: 120%;
  height: 400px;
}
#ekyc-section .product-img-desc-2 {
  position: relative;
  width: 100%;
  height: 200px;
}
.ekyc-icon {
  position: absolute;
}
.ekyc-icon img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 20;
}
.ekyc-face {
  left: 0;
  bottom: 0;
}
.ekyc-ai {
  left: 50%;
  transform: translateX(-50%);
  bottom: 10%;
}
.ekyc-server {
  right: 0;
  bottom: 10%;
}
.ekyc-icbig {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.ekyc-icbig-left {
  top: 15%;
  left: 0;
}
.ekyc-icbig-right {
  top: 15%;
  right: 0;
}
.ekyc-mobileuser {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.ekyc-success {
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  z-index: 20;
}
.ekyc-icsmall {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.ekyc-verified-wave {
  position: absolute;
  z-index: 5;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: -5px; left: -5px;
  -webkit-animation: expandcirclewave 2s ease-in-out infinite;
          animation: expandcirclewave 2s ease-in-out infinite;
}
.verified-wave-color {
  border: 1px solid #C30E2E;
}

#creditpassport-section .product-img-desc {
  position: relative;
  width: 120%;
  height: 400px;
}
.cp-user {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.cp-score {
  left: 35%;
  bottom: 5%;
}
.cp-house {
  top: 8%; left: 8%;
  animation: dsxfloat 4.5s ease-in-out infinite;
  -webkit-animation: dsxfloat 4.5s ease-in-out infinite;
}
.cp-bank {
  left: 0;
  bottom: 12%;
  animation: dsxfloat 4s ease-in-out infinite;
  -webkit-animation: dsxfloat 4s ease-in-out infinite;
}
.cp-rating {
  top: 0; right: 0;
  animation: dsxfloat 5.5s ease-in-out infinite;
  -webkit-animation: dsxfloat 5.5s ease-in-out infinite;
}

#rba-section .product-img-desc {
  position: relative;
  width: 140%;
  height: 300px;
}
#rba-section .product-img-desc-2 {
  position: relative;
  float: right;
  width: 130%;
  height: 300px;
}
.rba-aicheck {
  top: 50%;
  left: 35%;
  transform: translateY(-50%);
  z-index: 20;
}
.rba-source {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.rba-record-group {
  position: absolute;
  width: 200px;
  height: 100%;
  right: 0;
  top: 0;
}
.rba-record-wrapper {
  position: relative;
  width: 100%;
  height: 33%;
}
.rba-record {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.rba-record-status-alert {
  position: absolute;
  right: 83px;
  top: 35%;
  animation: rbaalert 6s infinite ease-in-out;
  animation-delay: 0s;
}
.rba-record-status-checked {
  position: absolute;
  right: 88px;
  top: 38%;
  animation: rbachecked 6s infinite ease-in-out;
  animation-delay: 0.2s;
}
.checked-delay {
  animation: rbachecked 6s infinite ease-in-out;
  animation-delay: 0.4s;
}
.rba-internet {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.rba-gauge {
  left: 48%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}
.rba-destination {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.rba-ai-line-animation {
  position: absolute;
  height: 2px;
  width: 66%;
  left: 14%;
  top: 49%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x;
  background-size: 4px 2px;
  background-position: 0px 0px;
  z-index: 1;
  animation: rbapwborder 8s infinite linear;
}
.rba-ai-line-animation-error {
  position: absolute;
  height: 100px;
  width: 100px;
  right: 19%;
  top: 16%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #cd0000 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #cd0000 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 4px 2px, 0px 0px, 2px 4px, 0px 0px;
  background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
  z-index: 1;
  animation: rbaerrorborder 8s infinite linear;
  border-radius: 5px;
}
.rba-ai-line-animation-success {
  position: absolute;
  height: 104px;
  width: 100px;
  right: 19%;
  top: 49%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #cd0000 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 0px 0px, 4px 2px, 2px 4px, 0px 0px;
  background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
  z-index: 1;
  animation: rbasuccessborder 8s infinite linear;
  border-radius: 5px;
}
.rba-pw-line-animation {
  position: absolute;
  height: 2px;
  width: 42%;
  left: 34%;
  top: 50%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x;
  background-size: 4px 2px;
  background-position: 0px 0px;
  z-index: 1;
  animation: rbapwborder 8s infinite linear;
}
.ekyc-line-animation-left {
  position: absolute;
  height: 2px;
  width: 28%;
  left: 17%;
  top: 50%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x;
  background-size: 4px 2px;
  background-position: 0px 0px;
  z-index: 1;
  animation: rbapwborder 8s infinite linear;
}
.ekyc-line-animation-right {
  position: absolute;
  height: 2px;
  width: 20%;
  right: 25%;
  top: 50%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x;
  background-size: 4px 2px;
  background-position: 0px 0px;
  z-index: 1;
  animation: ekyclineright 8s infinite linear;
}
.ekyc-ai-line-animation-left {
  position: absolute;
  height: 2px;
  width: 14%;
  left: 28%;
  bottom: 20%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x;
  background-size: 4px 2px;
  background-position: 0px 0px;
  z-index: 1;
  animation: rbapwborder 8s infinite linear;
}
.ekyc-ai-line-animation-right {
  position: absolute;
  height: 2px;
  width: 24%;
  right: 18%;
  bottom: 20%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x;
  background-size: 4px 2px;
  background-position: 0px 0px;
  z-index: 1;
  animation: ekyclineright 8s infinite linear;
}
.ekyc-ai-line-animation-center {
  position: absolute;
  width: 2px;
  height: 45%;
  left: 50%;
  bottom: 32%;
  background: linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-y;
  background-size: 2px 4px;
  background-position: 0px 0px;
  z-index: 1;
  animation: ekyclinecenter 8s infinite linear;
}
.ekyc-line-animation-topleft {
  position: absolute;
  height: 52px;
  width: 206px;
  left: 13%;
  top: 37%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 0px 0px, 4px 2px, 2px 4px, 0px 0px;
  background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
  z-index: 1;
  animation: ekyctopleft 8s infinite linear;
  border-radius: 5px;
}

.ekyc-line-animation-topright {
  position: absolute;
  height: 52px;
  width: 206px;
  right: 13%;
  top: 37%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 0px 0px, 4px 2px, 0px 0px, 2px 4px;
  background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
  z-index: 1;
  animation: ekyctopright 8s infinite linear;
  border-radius: 5px;
}
@keyframes ekyclinecenter {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px 300px;
  }
}

@keyframes ekyctopleft {
  0% {
    background-position: 0px 0px, 0px 50px, 0 100px, 100px 0px;
  }
  100% {
    background-position: 300px 0px, 150px 50px, 0 0px, 100px 50;
  }
}
@keyframes ekyctopright {
  0% {
    background-position: 0px 0px, 150px 50px, 0 100px, 204px 0px;
  }
  100% {
    background-position: 300px 0px, 0px 50px, 0px 0px, 204px 50px;
  }
}

@keyframes rbaalert {
  75%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  70% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@-webkit-keyframes rbaalert {
  75%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  70% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@keyframes rbachecked {
  75%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  70% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@-webkit-keyframes rbachecked {
  75%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  70% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@keyframes rbapwborder {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 300px 0px;
  }
}
@keyframes ekyclineright {
  0% {
    background-position: 300px 0px;
  }
  100% {
    background-position: 0px 0px;
  }
}
@keyframes rbaerrorborder {
  0% {
    background-position: 0px 0px, 0 100px, 0 100px, 100px 100px;
  }
  100% {
    background-position: 300px 0px, 100px 100px, 0 0px, 100px 0;
  }
}
@keyframes rbasuccessborder {
  0% {
    background-position: 0px 0px, 0 100px, 0 0px, 100px 100px;
  }
  100% {
    background-position: 300px 0px, 300px 100px, 0 100px, 100px 0;
  }
}
@-webkit-keyframes rbafloat {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-10px);
            transform: translatey(-10px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

#tsp-section .product-img-desc {
  position: relative;
  width: 100%;
  height: 300px;
}
.tsp-vault {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.tsp-user {
  left: 0; bottom: 0;
}
.tsp-merchant {
  right: 0; bottom: 0;
}
.random-token-number {
  font-size: 16px;
  width: 10ch;
  overflow: hidden;
}
.random-card-number-wrap .cardbox {
  display: inline-block;
  margin-right: 3px;
}
.random-card-number {
  font-size: 16px;
}
.random-card-number-wrap .cardbox {
  width: 4ch;
  overflow: hidden;
}
.random-token-number .random-counter {
  -webkit-animation: randomGen 2s steps(20) infinite;
          animation: randomGen 2s steps(20) infinite;
          animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

.cardbox .cc-1 {
  -webkit-animation: randomCardGen 2s steps(16) infinite;
          animation: randomCardGen 2s steps(16) infinite;
          animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.cardbox .cc-2 {
  -webkit-animation: randomCardGen 2s steps(16) infinite;
          animation: randomCardGen 2s steps(16) infinite;
          animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
.cardbox .cc-3 {
  -webkit-animation: randomCardGen 2s steps(16) infinite;
          animation: randomCardGen 2s steps(16) infinite;
          animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
.cardbox .cc-4 {
  -webkit-animation: randomCardGen 2s steps(16) infinite;
          animation: randomCardGen 2s steps(16) infinite;
          animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}

@-webkit-keyframes randomGen {
  0%, 50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-3000%);
  }
}

@keyframes randomGen {
  0%, 50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-3000%);
  }
}
@-webkit-keyframes randomCardGen {
  0%, 50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-400%);
  }
}

@keyframes randomCardGen {
  0%, 50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-400%);
  }
}
.tsp-carousel .card-wrapper {
  padding: 1% 0.5%;
  outline: none;
}
.tsp-carousel .card {
  padding: 40px 30px;
}
.tsp-carousel .section-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 10px;
}
.tsp-carousel .section-content {
  font-weight: lighter;
  margin-bottom: 0;
  font-size: 0.9rem;
}
.tsp-line-animation-left {
  position: absolute;
  height: 125px;
  width: 125px;
  left: 13%;
  top: 23%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #cd0000 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #cd0000 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 4px 2px, 0px 0px, 2px 4px, 0px 0px;
  background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
  z-index: 1;
  animation: rbaerrorborder 8s infinite linear;
  border-radius: 5px;
}
.tsp-line-animation-right {
  position: absolute;
  height: 112px;
  width: 112px;
  right: 13%;
  top: 23%;
  background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 4px 2px, 0px 0px, 0px 0px, 2px 4px;
  background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
  z-index: 1;
  animation: tspmerchant 8s infinite linear;
  border-radius: 5px;
}
@keyframes tspmerchant {
  0% {
    background-position: 0px 0px, 0 100px, 0 0px, 109px 0px;
  }
  100% {
    background-position: 300px 0px, 300px 100px, 0 100px, 109px 150px;
  }
}
/*end of v2 dsx product section*/
/*v1 dsx box position*/
#product-main .paymentterminal-box {
  top: 34%;
  left: 17%;
}
#product-main .ewallet-box {
  top: 30%;
  right: 25%;
}
#product-main .microloan-box {
  top: 20%;
  left: 13%;
}
#product-main .softwaredev-box {
  top: 10%;
  left: 45%;
}
#product-main .digitalcallcenter-box {
  top: 20%;
  right: -5%;
}
#product-main .dataanalytics-box {
  bottom: 25%;
  left: 23%;
}
#product-main .ecommerce-box {
  left: 2%;
  top: 50%;
}
#product-main .paymentsecurity-box {
  bottom: 10%;
  left: 15%;
}
#product-main .aichatbot-box {
  right: 13%;
  bottom: 35%;
}
#product-main .kioskterminal-box {
  right: 23%;
  bottom: 24%;
}
#product-main .paymentgateway-box {
  right: 30%;
  bottom: 5%;
}

#product-main .product-box p {
  text-align: center;
  font-weight: bold;
  margin-bottom: 0;
}
#product-main .product-box .data-analytics-text {
  color: #810D82;
  margin-top: 10%;
  line-height: 24px;
}
#product-main .product-box .payment-terminal-text {
  color: #C70522;
  margin-top: 9%;
  line-height: 20px;
}
#product-main .product-box .digital-callcenter-text {
  color: #D2204D;
  margin-top: 9%;
  line-height: 20px;
}
#product-main .product-box .ewallet-text {
  color: #4500AA;
  margin-top: 9%;
  line-height: 30px;
}
#product-main .product-box .aichatbot-text {
  color: #DB002D;
  margin-top: 9%;
  line-height: 30px;
}
#product-main .product-box .microloans-text {
  color: #E71A2A;
  margin-top: 8%;
  line-height: 26px;
}
#product-main .product-box .ecommerce-text {
  color: #FA235A;
  margin-top: 8%;
  line-height: 26px;
}
#product-main .product-box .softwaredev-text {
  color: #860F7F;
  margin-top: 8%;
  line-height: 14px;
}
#product-main .product-box .kioskterminal-text {
  color: #941276;
  margin-top: 8%;
  line-height: 14px;
}
#product-main .product-box .paymentgateway-text {
  color: #640087;
  margin-top: 8%;
  line-height: 14px;
}
#product-main .product-box .paymentsecurity-text {
  color: #7C06CB;
  margin-top: 9%;
  line-height: 16px;
}
#product-main .product-box .box-a {
  font-size: 1rem;
}
#product-main .product-box .box-b {
  font-size: 0.8rem;
}
#product-main .product-box .box-c {
  font-size: 0.7rem;
}
#product-main .product-box .box-d {
  font-size: 1.2rem;
}
/*end of v1 dsx box position*/

@-webkit-keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    box-shadow: 0 20px 15px 0px rgba(0, 0, 0, 0.2);
    -webkit-transform: translatey(-10px);
            transform: translatey(-10px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    box-shadow: 0 20px 15px 0px rgba(0, 0, 0, 0.2);
    -webkit-transform: translatey(-10px);
            transform: translatey(-10px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
/*end of floating animation*/
/*Wannatalk page*/
.wannatalk-partner-wrap {
  position: relative;
  width: 100%;
  height: 400px;
  top: 10%;
}
.wannatalk-partner-logo {
  position: absolute;
  width: 80px;
  height: 80px;
}
.partner-logo-wrap {
  width: 100%;
  height: 100%;
  padding: 5%;
  background-color: #ffffff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.4);
}
.partner-logo-animation-a {
  -webkit-transform: translatey(0px);
          transform: translatey(0px);
  -webkit-animation: float 4s ease-in-out infinite;
          animation: float 4s ease-in-out infinite;
}
.partner-logo-animation-b {
  -webkit-transform: translatey(0px);
          transform: translatey(0px);
  -webkit-animation: float 3s ease-in-out infinite;
          animation: float 3s ease-in-out infinite;
}
.partner-logo-animation-c {
  -webkit-transform: translatey(0px);
          transform: translatey(0px);
  -webkit-animation: float 3.5s ease-in-out infinite;
          animation: float 3.5s ease-in-out infinite;
}
.partner-logo-wrap img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.partner-wanna {
  position: absolute;
  top: 50%; left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
}
.partner-whatsapp {
  top: 5%; left: 15%;
}
.partner-fb {
  top: 5%; right: 15%;
}
.partner-line {
  top: 50%; left: 0%;
  transform: translateY(-50%);
}
.partner-wechat {
  top: 50%; right: 0%;
  transform: translateY(-50%);
}
.partner-telegram {
  bottom: 5%; left: 15%;
}
.partner-skype {
  bottom: 5%; right: 15%;
}
.wannatalk-countries {
  position: relative;
  width: 100%;
  height: 250px;
}
.wanna-country {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
  padding: 1%;
}
.wanna-country img {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 20;
}
.country-msia {
  left: 50%; top: 0; transform: translateX(-50%);
}
.country-sg {
  left: 10%;
  bottom: 0;
}
.country-th {
  right: 10%;
  bottom: 0;
}
.wanna-country-wave {
  position: relative;
  z-index: 5;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  top: -130px; left: -18px;
  -webkit-animation: expandcircle 2s ease-in-out infinite;
          animation: expandcircle 2s ease-in-out infinite;
}
.wanna-country-wave2 {
  position: relative;
  z-index: 5;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  top: -280px; left: -18px;
  -webkit-animation: expandcirclewave 2s ease-in-out infinite;
          animation: expandcirclewave 2s ease-in-out infinite;
          animation-delay: 0.9s;
}
.country-wave-msia {
  border: 1px solid purple;
}
.country-wave-sg {
  border: 1px solid green;
}
.country-wave-th {
  border: 1px solid orange;
}


@-webkit-keyframes floatup {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    box-shadow: 0 20px 15px 0px rgba(0, 0, 0, 0.2);
    -webkit-transform: translatey(-10px);
            transform: translatey(-10px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

@keyframes floatup {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    box-shadow: 0 20px 15px 0px rgba(0, 0, 0, 0.2);
    -webkit-transform: translatey(-10px);
            transform: translatey(-10px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}


@-webkit-keyframes expandcircle {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}

@keyframes expandcircle {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@-webkit-keyframes expandcirclewave {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes expandcirclewave {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 0;
  }
}
/*end of Wannatalk page*/


.container {
  width: 1080px;
}
.category-section {
  padding: 40px 0 60px 0;
}
#revpay-offline-section {
  position: relative;
  z-index: 20;
}
.section-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 0;
}
.dsx-products .product-name,
.b2c-products .product-name {
  margin-bottom: 0px;
}
.dsx-products .section-subtitle,
.b2c-products .section-subtitle {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: normal;
  margin-bottom: 20px;
}
.b2c-products .section-link a,
#revpay-page .section-link a {
  font-size: 16px;
}
.red,
.redtext {
  color: #C30E2E;
  /*color: #c12033;*/
}
.item-wrapper {
  background-color: #F7F7F7;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}
.item-wrapper:hover {
  -webkit-box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
}
#revenue-team .item-wrapper {
  padding: 20px;
  background: #ffffff;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}
#revenue-team .item-wrapper:hover {
  -webkit-box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
}
/*#revenue-team .team-position span.position-02 {
  display: none;
}*/
#revenue-team .position-01,
#revenue-team .position-02 {
  display:  block;
}
/*team details modal*/
.modal-header {
  border-bottom: 0;
}
.modal-body {
  padding: 25px;
}
.modal .info-photo {
  padding: 0;
  margin-bottom: 15px;
}
.modal .info-position {
  padding: 0;
  font-size: 12px;
}
.modal .main-introduction {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px;
}
.modal .introduction-content {
  font-size: 12px;
  font-weight: 100;
}
.team-other-info,
.modal-team-other-info {
  margin-bottom: 15px;
}
/*end of team details modal*/

/*revpay product details modal*/
.modal .product-model-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.modal .product-model-tagline {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #a8a8a8;
}
.modal .product-model-content {
  font-size: 14px;
  font-weight: 100;
  margin-bottom: 10px;
}
.modal .product-details-gallery {
  width: 100%; 
  height: auto;
  border: 1px solid red;
}
.modal .product-suggestion {
  font-weight: bold;
}

.product-slides-modal img {
  max-width: 100%;
}
.slider-nav-product div.slick-slide.slick-current img {
  border: 2px solid #cd0000;
  border-radius: 5px;
}
.slider-nav-product div {
  margin: 0 1px;
  margin-bottom: 15px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}
.slider-for-product {
  margin-bottom: 5px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}
/*end of revpay product details modal*/
/*DSX product section*/
#product-example {
  background-color: #343434;
}
.progress-animation-section {
  height: auto;
  position: relative;
  padding: 25px;
}
.progress-animation-wrapper-left {
  position: absolute;
  z-index: 5;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  background-color: #343434;
}
.progress-animation-wrapper-right {
  position: absolute;
  z-index: 5;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  background-color: #343434;
}
.flow-animation {
  position: absolute;
  z-index: 1;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
  margin: 0 auto;
  border: 1px solid white;
}
.dsx-items {
  height: auto;
}
.user-icon,
.product-dsx-logo {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 15;
  border-radius: 50%;
}
.sample-logo {
  width: 100px;
  height: 100px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.progress-animation {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px dotted rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transition: opacity 1s;
}
.progress-animation-run {
  border: 2px dotted rgba(255, 255, 255, 0.9);
  /*border: 10px solid #ffffff;*/
  width: 100%;
  height: 100%;
  transition: opacity 1s;
  -moz-animation: dsxUserSpin ease-in-out;
  -webkit-animation: dsxUserSpin ease-in-out;
  animation-delay:0s;
  animation-duration:1s;
  animation-iteration-count:3;
}
.user-animation {
  animation: circleEnlarge 0.25s ease-in-out;
}
@-moz-keyframes circleEnlarge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes circleEnlarge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes dsxUserSpin {
  0% {
    -moz-transform: rotate(160deg);
    opacity: 1;
    box-shadow: 0 0 1px #bdd73c;
  }
  50% {
    -moz-transform: rotate(145deg);
    opacity: 0.5;
  }
  100% {
    -moz-transform: rotate(-320deg);
    opacity: 1;
  }
}
@-webkit-keyframes dsxUserSpin {
  0% {
    -webkit-transform: rotate(160deg);
    opacity: 1;
    box-shadow: 0 0 1px #bdd73c;
  }
  50% {
    -webkit-transform: rotate(145deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: rotate(-320deg);
    opacity: 1;
  }
}
#product-example .tabbar-bg {
  background-color: rgba(0,0,0,0);
  webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
/*edc map animation*/
.edc-map-wrap {
  width: calc(800px * var(--pixel-size));
  height: calc(290px * var(--pixel-size));
  overflow: hidden;
  position: relative;
  left: 30%;
  margin-top: 30px;
  transform: rotate(-4deg);
}
.edc-map {
  opacity: 0.7;
  width: calc(3200px * var(--pixel-size));
  -webkit-animation: expandmap 3s steps(4) infinite;
          animation: expandmap 3s steps(4) infinite;
}
@-webkit-keyframes expandmap {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

/*end of edc map animation*/
#cta-field {
  margin-bottom: 60px;
}
#cta-field .card {
  padding: 30px 20px;
}
#cta-field .submit-btn {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
#product-recommendation .logo-round {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  border-radius: 50%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  -webkit-box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
}
#product-recommendation .logo-round-customer {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  -webkit-box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
}
#product-recommendation .logo-round img {
   width: 60%;
   height: auto;
}
#product-recommendation .logo-round-customer img {
   width: 100%;
   height: auto;
}
/*end of DSX product section*/
/*Career accordion*/
.contact-card {
  padding: 25px;
  font-weight: 300;
  height: 100%;
  overflow: hidden;
}
#company-openings .contact-card {
  padding: 30px 30px !important;
}
.contact-card a {
  text-decoration: underline;
  font-weight: bold;
}
.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
}
#company-openings label {
  margin-bottom: 0;
}
#company-openings ul {
  margin-bottom: 2rem;
}
#company-openings ul li {
  cursor: default;
  display: list-item;
}
#company-openings p {
  font-weight: bold;
  text-transform: uppercase;
}
#company-openings input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tabs {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}

.tab {
  width: 100%;
  color: #000000;
  overflow: hidden;
}
.tab-label {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 1em;
  background: #ffffff;
  border-bottom: 1px solid #e2e2e2;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  /* Icon */
}
.tab-label:hover {
  background: #c12033;
  color: #ffffff;
  -webkit-transition: all .35s;
  transition: all .35s;
}
.tab-label::after {
  content: "\276F";
  width: 1em;
  height: 1.5em;
  text-align: center;
  -webkit-transition: all .35s;
  transition: all .35s;
}
#company-openings .tab-content {
  max-height: 0;
  padding: 0 1.5em;
  color: #2c3e50;
  background: white;
  -webkit-transition: all .35s;
  transition: all .35s;
}
.tab-close {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #2c3e50;
  cursor: pointer;
}
.tab-close:hover {
  background: #1a252f;
}

#company-openings input:checked + .tab-label {
  background: #c12033;
  color: #ffffff;
  -webkit-transition: all .35s;
  transition: all .35s;
}
#company-openings input:checked + .tab-label::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#company-openings input:checked ~ .tab-content {
  display: table;
  padding: 1.5em;
}
.btn,
.btn:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 0;
}
.submit-btn {
  background-color: #ffffff !important;
  font-size: 12px !important;  
  color: #c12033 !important;
  font-weight: bold;
  border-radius: 0;
  border: 1px solid #c12033 !important;
  padding: 10px 25px !important;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.submit-btn:hover,
.submit-btn:active,
.submit-btn:not(:disabled):not(.disabled):active,
.submit-btn:focus {
  background-color: #c12033 !important;
  color: #ffffff !important;
  border: 1px solid #c12033 !important;
}
/*end of career accordion*/
/*terms of use and privacy policy*/
#terms-of-use-page .list-page-header {
  padding-left: 20px;
  margin-bottom:25px;
}
#privacy-policy-page ol {
    counter-reset: item;
}
#privacy-policy-page .list-header,
#terms-of-use-page .list-header {
  font-weight: bold;
}
#privacy-policy-page .list-content,
#terms-of-use-page .list-content {
  font-weight: 300;
}
#privacy-policy-page ol li {
    display: block;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}
#privacy-policy-page ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}
#privacy-policy-page ul,
#terms-of-use-page ul {
    list-style-type: disc;
}
#privacy-policy-page ul li:before {
    content: none;
}
#privacy-policy-page ul li,
#terms-of-use-page ol li {
  display: list-item;
  padding-top: 5px;
  padding-bottom: 5px;
}
/*end of terms of use and privacy policy*/
/*News filter*/
ul li {
  cursor: pointer;
  display: inline-block;
  transition: ease-in-out .3s;
}
.item {
  display: block;
  float: left;
}
/*end of news filter*/
#company-intro ul li {
  cursor: auto;
  display: list-item;
}
/*rev timeline*/
#rev-timeline .section-header {
  text-align: center;
}
#rev-timeline .section-header h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}
#rev-timeline .section-header hr {
  border: 1px solid #000;
  width: 56px;
}

#rev-timeline .steps {
  position: relative;
  margin-top: 32px;
}
#rev-timeline .steps::after {
  content: "";
  position: absolute;
  width: 1px;
  background-color: #4d4d4d;
  opacity: 0.4;
  top: 0;
  bottom: 0;
  left: 50%;
}

#rev-timeline .steps .content p {
  color: #676767;
  font-size: 16px;
  margin-bottom: 0;
}

#rev-timeline .steps .content h2 {
  font-weight: 600;
  font-size: 16px;
  color: #676767;
}

#rev-timeline .steps-container {
  position: relative;
  background-color: inherit;
  width: calc(50% + 32px);
}

#rev-timeline .steps-container .content {
  width: 100%;
  padding: 32px;
  background-color: white;
  position: relative;
  border-radius: 15px;
  box-shadow: 0px 16px 27px rgb(0 11 30 / 10%);
}

#rev-timeline .current-timeline .content {
  padding: 0;
  background-color: rgba(255,255,255,0)
}

#rev-timeline .steps .steps-container:nth-child(even) {
  left: calc(50% - 32px);
  flex-direction: row-reverse;
  text-align: left;
}

#rev-timeline .steps-container {
  display: flex;
  z-index: 10;
  text-align: right;
}

#rev-timeline .steps .steps-container .date {
  font-weight: 900;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 10px;
  width: 62px;
  height: 62px;
  background-color: #C30E2E;
  border-radius: 50%;
  flex-shrink: 0;
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 777;
}

#rev-timeline .steps .steps-container .date {
  margin-bottom: 0;
}

#rev-timeline .step-line {
  width: 40px;
  background-color: #C30E2E;
  height: 1px;
  margin-top: 31px;
  opacity: 0.4;
  flex-shrink: 0;
}
#rev-timeline .current-timeline .step-line {
  display: none;
}

#rev-timeline .current-timeline .content {
  box-shadow: none;
}
.timeline-logo img {
  width: 100px;
  height: auto;
  padding: 0 10px 10px 0;
}
/*end of rev timeline*/
.news-photo {
  position: relative;
  height: 160px;
  overflow: hidden;
  padding: 0;
  background-color: #dedede;
}
.news-photo img {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.team-photo {
  height: 300px;
  overflow: hidden;
  padding: 0;
}
.team-photo img,
.modal .modal-detail-photo img {
  width: 100%;
}
.news-content,
.team-content {
  padding-top: 15px;
  padding-bottom: 15px;
}
.news-date {
  font-size: 11px;
  color: #727272;
  font-weight: 100;
  margin-bottom: 5px;
}
.news-title,
.team-name,
.modal-team-name,
.contact-company-name {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 10px;
}
.news-synopsis,
.team-position,
.modal-team-position {
  font-size: 12px;
  color: #333333;
  font-weight: 100;
  margin-bottom: 10px;
}
.article-synopsis, .has-medium-font-size {
  font-weight: bold !important;
}
.source-name {
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
}
.news-link a,
.team-details a {
  color: #C30E2E;
  font-size: 12px;
  font-weight: 100;
  text-decoration: none;
}
.page-numbers {
  padding: 10px 10px;
}
.prev, .next {
  padding: 10px 15px;
}
#main-announcement a,
#related-news a {
  text-decoration: none;
}
.section-link {
  width: 100%;
  margin-bottom: 15px;
}
.tickerbar-info .section-link {
  padding-bottom: 0;
}
.news-item {
  margin-bottom: 25px;
}
.section-link a {
  color: #2e2e2e;
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
}
.white-link a {
  color: #ffffff;
}
.link-icon {
  background-image: url("../images/link-icon.svg");
  display: inline-block;
  background-repeat: no-repeat;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-left: 10px;
  transition: transform .5s;
}
.section-link a:hover .link-icon {
  transform: translateX(10px);
}
.previous-link {
  margin-top: 35px;
}
.previous-link .link-icon {
  background-image: url("../images/prev-link-icon.svg");
  margin-left: 0;
  margin-right: 10px;
}
.previous-link a:hover .link-icon {
  transform: translateX(-10px);
}
.announcement-timestamp {
  padding: 0;
  margin-bottom: 10px;
}
.announcement-time {
  display: inline-block;
  font-size: 12px;
  margin-right: 35px;
}
.announcement-type {
  display: inline-block;
}
span.type-badge {
    display: block;
    z-index: 1;
    position: relative;
    color: #ffffff;
    font-weight: bold;
    /* custom sizes */
    width: auto;
    height: auto;
    /* demo-only decoration */
    margin: 0 auto;
    font-size: 12px;
    line-height: 1.6rem;
    text-transform: uppercase;
    text-align: center;
    background-color: #c12033;
  }
  
  span.type-badge:before,
  span.type-badge:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: -1;
    
    /* demo-only decoration */
    background-color: #c12033;
  }
  
  span.type-badge:before {
    transform: skew(-25deg);
    left: 25px;
  }
  
  span.type-badge:after {
    transform: skew(-25deg);
    right: 25px;
    left: auto;
  }
.link-icon-white {
  background-image: url("../images/link-icon-white.svg");
}
/*product line up*/
.product-lineup-wrapper {
  padding: 15px;
}
.lineup-product-box {
  position: relative;
  width: 100%;
  height: 250px;
  background-color: #ffffff;
  overflow: hidden;
}
.product-lineup-name {
  position: absolute;
  width: 100%;
  top: 50%;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  z-index: 20;
  cursor: default;
  transition: .3s all;
}
.product-lineup-icon {
  position: absolute;
  z-index: 20;
  width: 150px;
  height: 150px;
  top: -100%;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%);
  transition: .3s all;
}
.product-box-img {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.product-box-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.7);
  opacity: 0.5;
  transition: .3s all;
}
.product-edc-img {
  background-image: url("../images/product-lineup-edc.jpg");
}
.product-dsx-img {
  background-image: url("../images/product-lineup-dsx.jpg");
}
.product-revpay-img {
  background-image: url("../images/product-lineup-revpay.jpg");
}
.product-b2c-img {
  background-image: url("../images/product-lineup-b2c.jpg");
}
.product-wannatalk-img {
  background-image: url("../images/product-lineup-wannatalk.jpg");
}
.product-financial-img {
  background-image: url("../images/product-lineup-financial.jpg");
}
.product-buymall-img {
  background-image: url("../images/product-lineup-buymall.jpg");
}
.product-anypay-img {
  background-image: url("../images/product-lineup-anypay.jpg");
}
.lineup-product-box:hover .product-box-overlay {
  opacity: 1;
  transition: .3s all;
}
.lineup-product-box:hover .product-lineup-icon {
  top: 10%;
  opacity: 1;
  transition: .3s ease-out all;
}
.lineup-product-box:hover .product-lineup-name {
  top: 70%;
  transition: .3s ease-out all;
}
.lineup-product-box:hover .product-box-img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.box-a {
  width: 100px;
  height: 100px;
  background-color: green;
    transition: 0.3s all;
}
.box-b {
  width: 100px;
  height: 100px;
  background-color: blue;
}
.box-a:hover {
  width: 120px;
  height: 120px;
  transition: 0.3s all;
}
.box-a:hover ~ .box-b {
  background-color: red;
    transition: 0.3s all;
}
/*overlay blurred bg*/
.services-photo {
  height: 280px;
  background-color: #000000;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
  display: block;
}
.services-photo .services-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.services-photo .services-image,
.hover-overlay {
  transition: .3s all;
}
.hover-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #ffffff;
  text-align: center;
  opacity: 1;
}
.services-title-wrap {
  position: absolute;
  margin: auto;
  top: 45%;
  left: 0;
  right: 0;
  color: #ffffff;
  font-weight: bold;
  z-index: 5;
  -webkit-transition: top 0.8s ease;
  -moz-transition: top 0.8s ease;
  -o-transition: top 0.8s ease;
  -ms-transition: top 0.8s ease;
  transition: top 0.8s ease;
}
.services-icon {
  position: absolute;
  margin: auto;
  top: -10px;
  left: 0;
  right: 0;
  z-index: 6;
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
  opacity: 0;
}
.services-link {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 50px;
  z-index: 7;
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
  opacity: 0;
  font-size: 11px;
}
.services-item {
  position: relative;
  margin-bottom: 25px;
}
.services-item:hover .hover-overlay {
  opacity: 1;
}
.services-item:hover .services-image {
  -webkit-filter: blur(6px);
  filter: blur(6px);
}
.services-item:hover .services-title-wrap {
  top: 58%;
}
.services-item:hover .services-icon {
  top: 10%;
  opacity: 1;
}
.services-item:hover .services-link {
  bottom: 25%;
  opacity: 1;
}
.hover-overlay span {
  width: 140px;
  height: 140px;
  display: block;
  margin: 0 auto;
}
.hover-overlay .services-icon span {
  background-size: cover;
  background-repeat: no-repeat;
}
#img-paymentterminal {
  background-image: url("../images/services-bg-paymentterminal.png");
}
#img-ecommerce {
  background-image: url("../images/services-bg-ecommerce.png");
}
#img-kiosk {
  background-image: url("../images/services-bg-kiosk.png");
}
#img-vendingmachine {
  background-image: url("../images/services-bg-vendingmachine.png");
}
#img-hybridpayment {
  background-image: url("../images/services-bg-hybridpayment.png");
}
#img-softwaredev {
  background-image: url("../images/services-bg-softwaredev.png");
}
#services-paymentterminal {
  background-image: url(../images/services-paymentterminal.svg);
}
#services-ecommerce {
  background-image: url(../images/services-ecommerce.svg);
}
#services-kiosk {
  background-image: url(../images/services-kiosk.svg);
}
#services-vendingmachine {
  background-image: url(../images/services-vendingmachine.svg);
}
#services-hybridpayment {
  background-image: url(../images/services-hybridpayment.svg);
}
#services-softwaredev {
  background-image: url(../images/services-softwaredev.svg);
}
.section-content {
  padding: 0;
  font-size: 16px;
  line-height: 1.8rem;
  margin-bottom: 25px;
}
#ir-general-body .section-content {
  margin-bottom: 4rem;
}
.company-item > .col {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
  margin-bottom: 15px;
}
.company-item .company-details {
  padding: 15px;
}
.company-details .company-name {
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
}
.company-details .company-business ul {
  font-size: 9px;
  line-height: 1rem;
  padding-left: 0px;
  margin-bottom: 0;
}
.company-business ul li {
  cursor: auto;
}
.solutions-item .icon-wrapper {
  text-align: center;
  margin-bottom: 10px;
}
.solutions-item .icon-wrapper img {
  width: 100px;
  height: auto;
}
.solutions-item .icon-title {
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: #000000;
  padding: 0 2rem;
  line-height: 1rem;
  margin-bottom: 2.5rem;
}
#company-intro .section-content p,
#ir-general-body .section-content p {
  margin-bottom: 35px;
}
#company-intro .col-lg-3 {
  display: inline-block;
  padding-left: 0;
  padding-right: 0;
}
.company-item .company-image {
  background-size: cover;
  background-repeat: no-repeat;
  height: 100px;
}
.revenuesolution {
  background-image: url("../images/company-revenuesolution.png");
}
.revenuecommerce {
  background-image: url("../images/company-revenuecommerce.png");
}
.revenuetechpark {
  background-image: url("../images/company-revenuetechpark.png");
}
.revenuesafenets {
  background-image: url("../images/company-revenuesafenets.png");
}
.revenueprivilege {
  background-image: url("../images/company-revenueprivilege.png");
}
.quote-item {
  margin-top: 2rem;
  margin-bottom: 4rem;
}
.product-item {
  margin-top: 3rem;
  margin-bottom: 4rem;
}
.value-photo-frame {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
.product-photo-frame {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
.value-photo,
.product-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
}
.value-photo-frame .thomasedison {
  background-image: url("../images/thomasedison.jpg");
}
.value-photo-frame .jackma {
  background-image: url("../images/jackma.jpg");
}
.value-photo-frame .stevejobs {
  background-image: url("../images/stevejobs.jpg");
}
.product-photo-frame .product-payment-terminal {
  background-image: url("../images/products/payment-terminal.jpg");
}
.product-photo-frame .product-kiosk-payment {
  background-image: url("../images/products/kiosk-payment.jpg");
}
.product-photo-frame .product-virtual-payment {
  background-image: url("../images/products/virtual-payment.jpg");
}
.product-photo-frame .product-stallbooth-payment {
  background-image: url("../images/products/stallbooth-payment.jpg");
}
.product-photo-frame .product-mobile-business {
  background-image: url("../images/products/mobile-business.jpg");
}
.product-photo-frame .product-ewallet {
  background-image: url("../images/products/ewallet.jpg");
}
.product-photo-frame .product-hybrid-payment {
  background-image: url("../images/products/hybrid-payment.jpg");
}
.product-photo-frame .product-software-development {
  background-image: url("../images/products/software-development.jpg");
}
.product-photo-frame .product-revpay {
  background-image: url("../images/products/revpay.jpg");
}
.value-quote {
  font-size: 30px;
  font-family: serif;
  line-height: 2rem;
  margin-bottom: 0.6rem;
}
.quote-name {
  font-size: 14px;
  font-family: serif;
  color: #333333;
  margin-bottom: 0.6rem;
}
.value-type,
.product-category {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}
.quote-content,
.product-content {
  font-size: 14px;
  font-weight: 100;
}
.client-logo,
.partner-logo {
  padding: 0;
}
.client-logo img {
  width: 132px;
  height: 80px;
}
.partner-logo img {
  width: 132px;
  height: 80px;
}
#revpay-online-section .partner-logo img {
  max-height: 22px;
  max-width: 60px;
}
#revpay-online-section .partner-logo,
#scheme-supported .partner-logo {
  padding: 10px;
}

#scheme-supported .revpay-clients .client-logo img {
  width: 132px;
  height: 80px;
}
/*section tabs*/
.tabbar-bg {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);
}
.tabbable-responsive {
  display: block;
  min-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  height: 48px;
}
.tabbable {
  min-width: 100%;
}
.tabbable .nav-tabs {
  white-space: nowrap;
  display: inline-block;
  min-width: 100%;
  /*padding: 0px 21px;*/
  border-bottom: none;
  height: 48px;
}
.tabbable .nav-tabs .nav-item {
  display: inline-block;
  margin-bottom: 0;
}
.tabbable .nav-tabs .nav-item .nav-link,
.tabbable .menu .nav-item .nav-link {
  display: inline-block;
  font-size: 12px;
  color: #000000;
  border: 0;
  border-radius: 0;
  padding: 0 2rem 0 0;
  line-height: 48px;
}
.tabbable .nav-tabs .nav-item .active,
.menu li.active {
  color: #c12033;
  font-weight: bold;
}
#product-example .tabbar-bg,
#product-example .tabbar-bg .container {
  padding-left: 0;
  padding-right: 0;
}
#product-example p {
  margin-bottom: 0;
}
.tabbable .dsx-menu .nav-item {
  margin-right: 10px;
}
.tabbable .dsx-menu .nav-item .nav-link {
  color: #ffffff;
  line-height: 40px;
  padding: 0 2.5em;
  border-radius: 10px;
  border: 1px solid #ffffff;
}
.tabbable .dsx-menu .nav-item .active {
  color: #c12033;
}
#product-example .dsx-items-wrapper .item-wrapper,
#product-example .product-items-wrapper .item-wrapper {
  padding: 10px 15px;
  border-radius: 10px;
}
.dsx-items-wrapper .item-wrapper .dsx-product-content {
  padding-top: 0;
  padding-bottom: 0;
}
.dsx-items-wrapper .item-wrapper .dsx-product-content .product-name,
.product-items-wrapper .item-wrapper .dsx-product-content .product-name {
  display: flex;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 0.8rem;
}
.product-check {
  display: flex;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  background-repeat: no-repeat;
}
.product-item {
  margin-top: 10px;
  margin-bottom: 10px;
}
/*end of section tabs*/
/*Investor relations*/
#shareholders-meeting #ir-iframe > .container {
  margin-top: -60px;
}
.ir-floatbox {
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}
.box-padding {
  padding: 30px;
}
.info-section {
  padding: 20px 0 20px 0;
}
.first-section {
  padding-top: 40px;
}
.last-section {
  padding-bottom: 60px;
}
#ir-general-body label {
  font-size: 0.8rem;
  font-weight: bold;
  margin-right: 15px;
}
#ir-general-body .form-control {
  width: auto;
  display: inline-block;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
}

th, td {
  padding: 16px;
}
th {
  border-right: 1px solid #ffffff;
}

tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.08);
}
tr td:first-child {
  width: 30%;
}
#ipo-statistic tr td:first-child {
  width: 60%;
}
td {
  vertical-align: top;
}
/*Competitive advantages accordion*/
#competitive-advantages label {
  font-size: 1rem;
  margin-bottom: 0;
  margin-right: 0;
}
#competitive-advantages .tab-label {
  text-transform: none;
}
#competitive-advantages ul {
  margin-bottom: 2rem;
}
#competitive-advantages ul li {
  cursor: default;
  display: list-item;
}
#competitive-advantages input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
#competitive-advantages .tab-content {
  max-height: 0;
  padding: 0 1.5em;
  color: #2c3e50;
  background: white;
  -webkit-transition: all .35s;
  transition: all .35s;
}
#competitive-advantages input:checked + .tab-label {
  background: #c12033;
  color: #ffffff;
  -webkit-transition: all .35s;
  transition: all .35s;
}
#competitive-advantages input:checked + .tab-label::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#competitive-advantages input:checked ~ .tab-content {
  display: table;
  padding: 1.5em;
}
#competitive-advantages .col {
  padding-left: 0;
}
/*end of Competitive advantages*/
/*End of Investor relations*/
/*Org chart*/
.hv-wrapper p {
  margin: 0;
  background-color: #fff;
  color: #DE5454;
  padding: 30px;
  border-radius: 7px;
  min-width: 70px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(204, 131, 103, 0.22);
  margin-bottom: 0 !important;
}

.hv-wrapper {
  display: flex;
}
.hv-wrapper .hv-item {
  display: flex;
  flex-direction: column;
  margin: auto;
}
.hv-wrapper .hv-item .hv-item-parent {
  margin-bottom: 50px;
  position: relative;
  display: flex;
  justify-content: center;
}
.hv-wrapper .hv-item .hv-item-parent p {
  font-weight: bold;
  color: #DE5454;
}
.hv-wrapper .hv-item .hv-item-parent:after {
  position: absolute;
  content: '';
  width: 2px;
  height: 25px;
  bottom: 0;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
}
.hv-wrapper .hv-item .hv-item-children {
  display: flex;
  justify-content: left;
}
.hv-wrapper .hv-item .hv-item-children .hv-item-child {
  padding: 0 15px;
  position: relative;
}
.hv-wrapper .hv-item .hv-item-children .hv-item-child:only-child:after {
  display: none;
}
.hv-wrapper .hv-item .hv-item-children .hv-item-child:before, .hv-wrapper .hv-item .hv-item-children .hv-item-child:after {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  left: 0;
}
.hv-wrapper .hv-item .hv-item-children .hv-item-child:before {
  left: 50%;
  top: 0;
  transform: translateY(-100%);
  width: 2px;
  height: 25px;
}
.hv-wrapper .hv-item .hv-item-children .hv-item-child:after {
  top: -25px;
  transform: translateY(-100%);
  height: 2px;
  width: 100%;
}
.hv-wrapper .hv-item .hv-item-children .hv-item-child:first-child:after {
  left: 50%;
  width: 50%;
}
.hv-wrapper .hv-item .hv-item-children .hv-item-child:last-child:after {
  width: calc(50% + 1px);
}
/*end of org chart*/
/*contact us*/
.contact-company-name span.thintext {
  font-size: 12px;
  font-weight: 100;
  margin-left: 15px;
}
.company-contact,
.ir-section-content {
  font-size: 14px;
  color: #333333;
  font-weight: 100;
  margin-bottom: 20px;
}
#company-openings .company-contact p {
  font-weight: 100;
  text-transform: none;
}
.company-contact-link {
  color: #333333;
  font-weight: bold;
}
.red-bg {
  background: rgb(239,46,80);
  background: -moz-linear-gradient(135deg, rgba(239,46,80,1) 0%, rgba(172,6,35,1) 100%);
  background: -webkit-linear-gradient(135deg, rgba(239,46,80,1) 0%, rgba(172,6,35,1) 100%);
  background: linear-gradient(135deg, rgba(239,46,80,1) 0%, rgba(172,6,35,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ef2e50",endColorstr="#ac0623",GradientType=1);
}
.green-bg {
  background: rgb(39,180,120);
  background: -moz-linear-gradient(135deg, rgba(39,180,120,1) 0%, rgba(5,129,76,1) 100%);
  background: -webkit-linear-gradient(135deg, rgba(39,180,120,1) 0%, rgba(5,129,76,1) 100%);
  background: linear-gradient(135deg, rgba(39,180,120,1) 0%, rgba(5,129,76,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#27B478",endColorstr="#05814C",GradientType=1);
}
.blue-bg {
  background: rgb(50,129,217);
  background: -moz-linear-gradient(135deg, rgba(50,129,217,1) 0%, rgba(21,94,175,1) 100%);
  background: -webkit-linear-gradient(135deg, rgba(50,129,217,1) 0%, rgba(21,94,175,1) 100%);
  background: linear-gradient(135deg, rgba(50,129,217,1) 0%, rgba(21,94,175,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3281D9",endColorstr="#155EAF",GradientType=1);
}
.pink-bg {
  background: rgb(244,169,180);
  background: -moz-linear-gradient(135deg, rgba(244,169,180,1) 0%, rgba(117,129,222,1) 100%);
  background: -webkit-linear-gradient(135deg, rgba(244,169,180,1) 0%, rgba(117,129,222,1) 100%);
  background: linear-gradient(135deg, rgba(244,169,180,1) 0%, rgba(117,129,222,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F4A9B4",endColorstr="#7581DE",GradientType=1);
}
.magenta-bg {
  background: rgb(198,20,88);
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -moz-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 12s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*financial typing animation*/
.fin-features-header {
  text-transform: uppercase;
}
.fin-features-header > span {
  font-weight: 100;
}
.fin-type-wrapper {
  height: 150px;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.effect-wrapper {
  text-align: center;
  font-weight: normal;
}

.typed {
  font-weight: bold;
  font-size: 3.5rem;
  color: #ffffff;
}

.cursor {
  display: inline-block;
  background-color: #b0ff95;
  line-height: 70px;
  animation: blinker 800ms infinite;
}

.cursor.typing-true {
  animation: none;
}

@keyframes blinker {
  0% { background-color: #b0ff95; }
  50% { background-color: transparent; }
  100% { background-color: #b0ff95; }
}
/*end of financial typing animation*/

.white-text {
  color: #ffffff;
}
.form-wrapper {
  border: 1px solid white;
  border-radius: 5px;
  height: auto;
  max-width: 80%;
  min-width: 420px;
  padding: 10px 40px 30px 40px;
  margin: 0px auto;
  background-color: #ffffff;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
}
.form-wrapper select,
.form-wrapper textarea,
.form-wrapper input {
  font-size: 0.875rem;
  border: 0;
  border-bottom: 1px solid #ced4da !important;
  color: #757575;
}
.wpforms-field-medium {
  font-size: 0.875rem !important;
  border: 0 !important;
  border-bottom: 1px solid #ced4da !important;
  color: #757575 !important;
}
/*wpforms*/
.wpforms-field-container>div {
  position: relative !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
}
.wpforms-field-label {
    font-size: .875rem !important;
    font-weight: normal !important;
}
.wpforms-field-label {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.wpforms-field {
    padding: 0px !important;
  }
.wpforms-field-label {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    font-size: 1rem;
    color: #757575 !important;
    cursor: text !important;
    -webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;
    transition: color .2s ease-out, -webkit-transform .2s ease-out;
    transition: transform .2s ease-out, color .2s ease-out;
    transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
    height: auto !important;
    padding: .6rem 0 .4rem 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}
div.wpforms-container-full .wpforms-form label.wpforms-error {
    display: block;
    color: #990000;
    font-size: 12px;
    float: none;
    cursor: default;
}
.wpforms-has-error ~ label.wpforms-error.active {
  margin-top: 0rem !important;
}
label.wpforms-field-label.active ~ label.wpforms-error.active {
  margin-top: 1rem !important;
}
.wpforms-label-hide {
  display: none !important;
}
/*end of wpforms*/
div.wpforms-container-full .wpforms-form input.wpforms-field-medium, div.wpforms-container-full .wpforms-form select.wpforms-field-medium, div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium {
    max-width: 100% !important;
}

/*Contact us v2 - to be apply on wordpress - Appearance to override _reboor*/

.wpcf7-form {
  margin-top: 20px;
}

.wpcf7-form label {
  font-size: 0.8rem;
  font-weight: bold;
  color: #666666;
  margin-bottom: 0;
}

.wpcf7-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.wpcf7-form .form-control {
  padding: 0;
  border-radius: 0;
  height: calc(1.2em + 0.75rem + 2px);
}

.wpcf7-form textarea.form-control {
  height: auto;
}

.wpcf7-form .product-conditional-dropdown {
  margin-bottom: 1rem;
}

.wpcf7-form [type="submit"]:not(:disabled) {
  background-color: #ffffff;
  font-size: 12px;
  color: #c12033;
  font-weight: bold;
  border-radius: 0;
  border-bottom: 1px solid #c12033 !important;
  border: 1px solid #c12033;
  padding: 10px 25px;
  margin-top: 1rem;
  margin-bottom: 2rem;
  transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.wpcf7-form [type="submit"]:hover {
  background-color: #c12033;
  color: #ffffff;
  border: 1px solid #c12033;
  transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/*End of contact us v2*/

/*end of contact us*/
footer {
  background-color: #212121;
  border-top: 5px solid #c12033;
  padding-top: 40px;
}
footer .section-title {
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 0px;
  margin-bottom: 5px;
}
footer .section-link {
  margin-bottom: 40px;
}
footer ul {
  list-style-type: none;
  padding: 0;
}
footer ul li {
  display: block;
}
footer .section-link a {
  font-weight: 100;
}
.footer-notes,
.footer-notes a {
  font-size: 10px;
  color: #ffffff;
  padding-bottom: 15px;
}
/*Menu overlay*/
#menu {
  position: relative;
  height: 100vh;
}
.menu-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.menu-peak img {
  position: absolute;
  height: 900px;
  right: 0;
  bottom: 0;
}
.menu-links {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
}
.link-category {
  margin-bottom: 35px;
}
.link-category-title {
  font-weight: bold;
  color: #707070;
  text-transform: uppercase;
}
.category-link ul {
  padding-left: 0;
}
.category-link ul li {
  display: inline-block;
  font-size: 14px;
  font-weight: 100;
  color: #000000;
  padding-left: 0;
  margin-top: 10px;
  margin-right: 25px;
}
.category-link ul li a {
  color: inherit;
  text-decoration: none;
}
#menuToggle
{
  display: block;
  position: relative;
  /*top: 15px;
  right: 50px;*/
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 106vw;
  height: 102vh;
  margin: -50px 0 0 0;
  padding-top: 100px;
  padding-left: 200px;
  left: -84vw;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
}
#menu li a.active,
#ir-general-body .url-link {
  color: #c12133;
  font-weight: bold;
  text-decoration: none;
}

/*End of Menu overlay*/
@media only screen and (max-width: 991px) {
  .navbar {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .nav-mobile {
    display: block;
  }

  nav {
    width: 100%;
    /*padding: 70px 0 15px;*/
    padding: 0;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
  .navbar .container {
    position: relative;
  }
  .navbar .container ul {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .navbar .container ul ul {
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar .container ul li {
    display: block;
  }
  .navbar .container ul li ul a {
    padding-left: 5%;
    color: #262626
    background-color: #ffffff;
  }
  .mainpage-hero-circle-wrapper {
    height: 160px;
  }
  .mainpage-hero-circle {
    left: auto;
    top: auto;
    right: -5%;
    bottom: 0;
    width: 340px;
    height: 340px;
  }
  .financial-hero-wrapper {
    display: none;
  }
  .financial-hero-wrapper-mobile {
    position: relative;
    display: block;
    height: 150px;
  }
  .security-solution-art {
    position: absolute;
    height: 80px;
    top: 0%; left: 0%;
    z-index: 10;
  }
  .security-solution-center {
    position: absolute;
    margin: 0;
    width: 80px;
  }
  .security-solution-ai {
    position: relative;
    width: 80px;
    top: 5%;
    margin: 0 auto;
    -webkit-animation: securityfloat 5s ease-in-out infinite;
          animation: securityfloat 5s ease-in-out infinite;
  }
  .financial-infra-art {
    position: absolute;
    width: 90px;
    top: 5%;
    right: 0;
    left: auto;
    bottom: auto;
    -webkit-animation: securityfloat 4.5s ease-in-out infinite;
          animation: securityfloat 4.5s ease-in-out infinite;
  }
  .financial-line-animation {
    width: 15%;
    height: 2px;
    left: 22%;
    top: 28%;
    background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%);
    background-repeat: repeat-x;
    background-size: 4px 2px;
    background-position: 0px 0px;
    z-index: 1;
    animation: borderdance 8s infinite linear;
  }
  .financial-line-animation-2 {
    width: 15%;
    height: 2px;
    right: 22%;
    top: 28%;
    left: auto;
    bottom: auto;
    background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%);
    background-repeat: repeat-x;
    background-size: 4px 2px;
    background-position: 0px 0px;
    z-index: 1;
    animation: borderdance2 8s infinite linear;
  }
  @keyframes borderdance {
    0% {
      background-position: 300px 0px;
    }
    100% {
      background-position: 0px 0px;
    }
  }
  @keyframes borderdance2 {
    0% {
      background-position: 300px 0px;
    }
    100% {
      background-position: 0px 0px;
    }
  }
  .fin-type-wrapper {
    justify-content: left;
    align-items: left;
  }
  .effect-wrapper {
    text-align: left;
  }
  .typed {
    font-size: 3.2rem;
  }

  /*dsx new layout*/
  #dsx-family-2 .dsx-center {
    width: 100px;
    height: 100px;
  }
  .featured-bg {
    right: -12%;
  }
  .dsx-revpay-position {
    position: absolute;
    top: 70%;
    left: 1%;
  }
  .dsx-rba-position {
    position: relative;
    top: 24%;
    left: 33%;
  }
  .dsx-tokenisation-position {
    position: absolute;
    top: 55%;
    left: 16%;
  }
  .dsx-passport-position {
    position: absolute;
    top: 93%;
    left: 34%;
  }
  .dsx-ekyc-position {
    position: absolute;
    top: 85%;
    left: 17%;
  }
  .logobox {
    width: 60px;
    height: 60px;
  }
  .dsx-productbox {
    height: 36px;
  }
  .wordingbox .content-title {
    bottom: 16%;
  }
  /*end of dsx new layout*/
  .revpay-products-image {
    position: absolute;
    right: 0;
    top: -10%;
    z-index: 5;
  }
  .revpay-products-image img {
    width: auto;
    height: 520px;
  }
  .b2c-products-image {
    position: absolute;
    right: -10%;
    top: 10%;
    z-index: 5;
  }
  .b2c-products-image img {
    width: auto;
    height: 360px;
  }
}
@media (max-width: 767px) {
  #videobg {
    height: 100%;
    width: auto;
  }
  .tickerbar-info {
    height: auto;
  }
  .mainpage-hero-circle-wrapper {
    height: 300px;
  }
  .mainpage-hero-circle {
    left: 5%;
    top: 0;
    right: auto;
    bottom: auto;
    width: 300px;
    height: 300px;
  }
  #product-main {
    height: auto;
    overflow: hidden;
  }
  #product-main .container {
    position: relative;
    z-index: 40;
  }
  #about-dsx .header-caption-content {
    font-size: 3rem;
    line-height: 3rem;
  }
  .featured-bg {
    display: inline-block;
    position: relative;
    right: 0;
    width: 100%;
    overflow: visible; /*need to show*/
    transform: scale(0.9);
  }
  .spin-wrapper {
    display: inline-block;
    position: relative;
  }
  #dsx-family-2 .dsx-center {
    position: absolute;
    top: 60%;
    transform: translateX(-50%);
  }
  .dsx-revpay-position {
    position: absolute;
    top: 70%;
    left: 1%;
  }
  .dsx-rba-position {
    position: absolute;
    top: 52%;
    left: 55%;
  }
  .dsx-tokenisation-position {
    position: absolute;
    top: 46%;
    left: 16%;
  }
  .dsx-passport-position {
    position: absolute;
    top: 88%;
    left: 54%;
  }
  .dsx-ekyc-position {
    position: absolute;
    top: 95%;
    left: 17%;
  }
  .box-size-a {
    width: 120px;
    height: 60px;
  }
  .box-size-b {
    width: 100px;
    height: 50px;
  }
  .box-size-c {
    width: 90px;
    height: 45px;
  }
  .box-size-d {
    width: 160px;
    height: 80px;
  }
  .paymentterminal-box {
    top: -16%;
    left: 20%;
  }
  .microloan-box {
    top: -27%;
    left: 2%;
  }
  .ecommerce-box {
    left: -1%;
    top: 0%;
  }
  .dataanalytics-box {
    bottom: 65%;
    left: 13%;
  }
  .paymentsecurity-box {
    bottom: 52%;
    left: 5%;
  }
  .ewallet-box {
    top: -24%;
    right: 10%;
  }
  .softwaredev-box {
    top: -30%;
    left: 40%;
  }
  .digitalcallcenter-box {
    top: -10%;
    right: -2%;
  }
  .aichatbot-box {
    right: 5%;
    bottom: 79%;
  }
  .kioskterminal-box {
    right: -1%;
    bottom: 64%;
  }
  .paymentgateway-box {
    right: 30%;
    bottom: 43%;
  }
  .product-box .box-a {
    font-size: 0.9rem;
  }
  .product-box .box-c {
    font-size: 0.6rem;
  }
  .product-box .box-d {
    font-size: 1rem;
  }
  .product-box .payment-terminal-text {
    margin-top: 7%;
    line-height: 18px;
  }
  .product-box .digital-callcenter-text {
    margin-top: 7%;
    line-height: 18px;
  }
  .product-box .data-analytics-text {
    margin-top: 10%;
    line-height: 20px;
  }
  .product-box .aichatbot-text {
    margin-top: 8%;
    line-height: 26px;
  }
  .product-box .softwaredev-text {
    margin-top: 8%;
    line-height: 11px;
  }
  .product-box .kioskterminal-text {
    margin-top: 8%;
    line-height: 11px;
  }
  .product-box .paymentgateway-text {
    margin-top: 8%;
    line-height: 11px;
  }
  .product-box .ecommerce-text {
    margin-top: 7%;
    line-height: 26px;
  }
  .product-box .paymentsecurity-text {
    margin-top: 7%;
    line-height: 14px;
  }
  .revpay-products-image {
    position: absolute;
    right: 0;
    top: 0%;
    z-index: 5;
  }
  .revpay-products-image img {
    width: auto;
    height: 420px;
  }
  /*rev timeline*/
  #rev-timeline .steps::after {
    left: 32px;
  }
  #rev-timeline .steps-container {
    left: 0;
    flex-direction: row-reverse;
    width: auto;
    margin-bottom: 16px;
    text-align: left;
  }
  #rev-timeline .steps .steps-container:nth-child(even) {
    left: 0;
  }
  /*end of rev timeline*/
  #contact-form-v2 .form-wrapper {
    width: 100%;
  }
  #shareholders-meeting #ir-iframe > .container {
    margin-top: -100px;
  }
}

/*Samsung Fold*/
@media (max-width: 717px) and (max-height:512px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
  .mainpage .alt-header .header-caption-wrapper, .subpage .alt-header .header-caption-wrapper {
    bottom: 5%;
  }
  #product-example {
    height: 520px;
  }
  .edc-map-wrap {
    left: -10%;
  }
  .transaction-stats {
    top: 0;
    bottom: auto;
    left: auto;
    right: 10%;
  }
  .merchant-stats {
    top: -25%;
    right: 50%;
  }
  .subpage .header-caption-wrapper-center {
    top: 60%;
    bottom: auto;
    text-align: center;
  }
  .header-caption-content {
    font-size: 4.5rem;
    line-height: 5rem;
  }
  .subpage .header-caption-content {
    font-size: 3.5rem;
    line-height: 4rem;
  }
  .team-photo {
    height: 220px;
  }
  .team-photo img {
    position: absolute;
    bottom: 0;
  }
  .team-position {
    margin-bottom: 0;
  }
  .modal-dialog {
    max-width: 650px;
  }
  .b2c-products-image img {
    height: 300px;
  }
  .b2c-wanna-image-001 img {
    height: 340px;
  }
  .vsure-product-image-001 {
    right: -35%;
    left: auto;
  }
  .vsure-product-image-003 {
    right: 60%;
    top: -4%;
    z-index: 21;
  }
  .buymall-product-image-002 {
    z-index: 21;
  }
  .buymall-product-image-003 {
    right: -45%;
    left: auto;
    height: auto;
  }
  .buymall-product-image-003 img {
    width: 80%;
  }
  .revpay-logo-wrap {
    margin-bottom: 20px;
  }
  .revpay-image-001{
    top: 28%;
    right: -60%;
  }
  .revpay-image-001 img {
    width: 80%;
  }
  .rp3-bg-element { 
    width: 750px;
    top: -10%;
    left: -60%;
  }
  .revpay-products {
    height: 540px;
  }
  .product-position {
    top: -12%;
  }
  #about-dsx #dsx-family-2 {
    left: 37%;
  }
  .dsx-center {
    left: 59%;
  }
  .dsx-revpay-position {
    left: 13%;
  }
  .dsx-rba-position {
    top: 44%;
    left: 47%;
  }
  .dsx-tokenisation-position {
    top: 49%;
    left: 22%;
  }
  .dsx-passport-position {
    top: 98%;
    left: 46%;
  }
  .dsx-ekyc-position {
    top: 92%;
    left: 20%;
  }
  .dsx-passport-image-001 {
    right: -100%;
    width: 400px;
    height: auto;
  }
  .dsx-passport-image-002 {
    width: 100px;
    height: 100px;
    left: -25%;
    top: 50%;
    transform: translateY(-50%) !important;
  }
  .dsx-rba-image-001 {
    top: -30%;
    left: -40%;
    width: 300px;
    height: auto;
  }
  .dsx-rba-image-002 {
    top: -5%;
    right: -30%;
    width: 240px;
    height: auto;
  }
  .dsx-rba-image-003 {
    top: 3%;
    right: 40%;
    width: 140px;
    height: 140px;
  }
  .dsx-financial-image-002 {
    top: -5%;
    left: 0%;
  }
  .dsx-financial-image-003 {
    top: 15%;
    right: 0%;
  }
  .dsx-financial-image-001 {
    right: 20%;
  }
  .dsx-tokenisation-image-001 {
    top: 0%;
  }
  .wannatalk-partner-wrap {
    height: 280px;
    top: 0%;
  }
  .dsx-ekyc-image-001 {
    left: -10%;
    top: -16%;
  }
  .dsx-ekyc-image-004 {
    right: 39%;
    top: 24%;
  }
  .dsx-ekyc-image-002 {
    left: -28%;
    bottom: -34%;
  }
  .dsx-ekyc-image-007 {
    left: 56%;
    top: 86%;
  }
  .dsx-ekyc-image-010 {
    right: 59%;
    bottom: 12%;
  }
  .dsx-ekyc-image-005 {
    left: 53%;
    top: 43%;
  }
  .dsx-ekyc-image-009 {
    top: -23%;
  }
  #shareholders-meeting #ir-iframe > .container {
    margin-top: -80px;
  }
}

@media (width: 280px) and (height: 653px) {
  #shareholders-meeting #ir-iframe > .container {
    margin-top: -140px;
  }
}

/*End of Samsung Fold*/

/*ipad mini*/
@media (width: 768px) and (height: 1024px) {
  #shareholders-meeting #ir-iframe > .container {
    margin-top: -80px;
  }
}

/*ipad air*/
@media (width: 820px) and (height: 1180px) {
  #shareholders-meeting #ir-iframe > .container {
    margin-top: -80px;
  }
}
/*end of ipad*/

@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  #videobg {
    /*height: 100%;*/
    width: 270%;
    transform: translate(-250px, 40px);
  }
  .section-link a {
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
  }
  .header-content-wrapper {
    height: 90vh;
  }
  .header-caption-wrapper {
    width: 100%;
    bottom: 10%;
    top: auto;
  }
  .subpage .header-caption-wrapper {
    width: 100%;
    bottom: 5%;
    top: auto;
  }
  .header-caption-content {
    font-size: 3.4rem;
    line-height: 3.6rem;
  }
  .header-subcontent-center {
    text-align: left;
    padding-left: 0;
  }
  .subpage .page-cat-header {
    margin-bottom: 10px;
  }
  .subpage .header-caption-content {
    font-size: 2.4rem;
    line-height: 2.6rem;
    margin-bottom: 15px;
    text-align: left;
    padding-left: 0;
  }
  .col-container {
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  /*left align header*/
  .subpage .alt-header .header-caption-wrapper {
    text-align: left;
    bottom: 8%;
    top: auto;
  }
  #about-dsx #dsx-family-2 {
    left: 50%;
    transform: translateX(-50%);
  }
  #dsx-family-2 .dsx-center {
    top: 43%;
    width: 120px;
    height: 120px;
  }
  .dsx-productbox {
    width: 130px;
    height: 40px;
  }
  .wordingbox .content-title {
    font-size: 0.6rem;
  }
  #about-dsx .header-caption-wrapper {
    bottom: 0;
  }
  #about-dsx .header-caption-content {
    font-size: 1.6rem;
    line-height: 1.6rem;
  }
  .header-caption-content .revenue-peak-icon img {
    max-height: 38px;
  }
  .subpage .alt-header .page-cat-header {
    padding-left: 0;
    margin-bottom: 15px;
  }
  .subpage .alt-header .header-caption-content {
    text-align: left;
    font-size: 2rem;
    line-height: 3rem;
    margin-bottom: 15px;
  }
  .carousel-image-001 div {
    background-image: url("../images/landingcarousel/landing-image-001.jpg");
    background-position: 80% 100%;
  }
  .carousel-image-002 div {
    background-image: url("../images/landingcarousel/landing-image-002.jpg");
    background-position: center;
  }
  .carousel-image-003 div {
    background-image: url("../images/landingcarousel/landing-image-003.jpg");
    background-position: 40% 100%;
  }
  .carousel-image-004 div {
    background-image: url("../images/landingcarousel/landing-image-005.jpg");
    background-position: center;
  }
  /*end of left align header*/
  #company-announcement .header-content-wrapper {
    height: 280px;
  }
  #company-announcement .content-banner {
    bottom: -10%;
    top: auto;
  }
  .tickerbar-info {
    height: auto;
  }
  /*.content-banner {
    height: 100%;
  }
  .revenue-peak img {
    height: auto;
  }*/
  .revenue-peak-solid {
    right: -15%;
  }
  .product-intro-section {
    margin-top: 20px;
  }
  .product-lineup-name {
    font-size: 1.2rem;
  }
  .mainpage-hero-circle-wrapper {
    height: 320px;
  }
  .mainpage-hero-circle {
    top: 0;
    left: 5%;
    width: 300px;
    height: 300px;
  }
  #dsx-family {
    position: relative;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
  #partners-main,
  #edc-page,
  #financial-ai-page,
  #revpay-section,
  #ekyc-section,
  #creditpassport-section,
  #rba-section,
  #tsp-section,
  #financial-section,
  #rev-products-page,
  #product-features,
  #clientele-main,
  #wanna-section,
  #vsure-section,
  #buymall-section,
  #anypay-section,
  #revpay-online-section,
  #revpay-offline-section {
    overflow: hidden;
  }
  #dsx-family .outer-mask {
    height: 100%;
    position: relative;
  }
  #product-family {
    padding-top: 10%;
  }
  #product-family .dsx-left-wrapper {
    position: relative;
  }
  .dsx-center {
    top: -13%;
  }
  .dsx-background {
    right: -70%;
    bottom: -15%;
    width: 160%;
  }
  .progress-animation-section {
    height: 150px;
  }
  #product-features-wrap {
    text-align: left;
  }
  .product-features-item {
    margin-bottom: 15px;
  }
  .product-features-desc p {
    text-align: left;
    font-size: 1rem;
    margin-bottom: 0;
    line-height: 1.5rem;
  }
  .product-features-icon {
    float: left;
    width: 75px;
    height: 75px;
    margin-bottom: 0;
  }
  #product-example .category-section {
    padding-bottom: 0;
  }
  .subpage .header-caption-wrapper-center {
    bottom: 5%;
    padding: 0;
  }
  .subpage .header-caption-wrapper-center-top {
    top: 15%;
    padding: 0;
  }
  #edc-page .hero-circle-outline,
  #rev-products-page .hero-circle-outline {
    position: relative !important;
    width: 400px;
    height: 400px;
    top: 5%;
    left: 0;
  }
  #rev-products-page .hero-circle-outline {
    left: auto;
    right: -100px;
  }
  .edc-coverage-map {
    overflow: hidden;
  }
  .edc-map-wrap {
    left: -10%;
    top:10%;
    margin-top: 60px;
  }
  .edc-stats {
    margin: 0 auto;
  }
  .edc-stats-layer {
    padding-left: 0;
    padding-right: 0;
  } 
  #dsx-family .outer-mask {
    position: absolute;
  }
  .dsx-bg-wrapper .featured-bg {
    top: -30px;
  }
  #dsx-family-2 .section-title {
    margin-top: 30px;
  }
  #dsx-family-2 .spin-wrapper {
    top: 55%;
  }
  .dsx-revpay-position {
    position: absolute;
    top: 74%;
    left: 32%;
  }
  .dsx-rba-position {
    top: 53%;
    left: -9%;
  }
  .dsx-tokenisation-position {
    top: 53%;
    left: 75%;
  }
  .dsx-passport-position {
    top: 70%;
    left: -3%;
  }
  .dsx-ekyc-position {
    top: 70%;
    left: 68%;
  }
  .wordingbox .twoliner {
    bottom: 2%;
    line-height: 1.2rem;
  }
  .credit-score-wrapper {
    padding: 20px 20px 20px 130px;
  }
  .box-revpay {
    top: -100%;
  }
  .box-rba {
    left: -10%;
    top: 35%;
  }
  .box-tsp {
    right: -10%;
    top: 35%;
  }
  .box-creditpassport {
    left: 5%;
  }
  .box-ekyc {
    right: 5%;
  }
  .product-img-desc,
  .product-img-desc-1,
  .product-img-desc-2 {
    margin-bottom: 30px;
  }
  #ekyc-section .product-img-desc-1,
  #creditpassport-section .product-img-desc,
  #rba-section .product-img-desc {
    width: 100%;
  }
  #rba-section .product-img-desc-2 {
    width: 120%;
  }
  #ekyc-section .product-img-desc-1 {
    height: 300px;
  }
  #creditpassport-section .product-img-desc {
    height: 300px;
  }
  #rba-section .product-img-desc-2 {
    height: 180px;
  }
  #tsp-section .product-img-desc {
    height: 260px;
  }
  .rp-icon {
    width: 80px;
    height: 80px;
  }
  .ekyc-icbig,
  .ekyc-icbig-left,
  .ekyc-icbig-right {
    width: 100px;
  }
  .ekyc-face {
    width: 100px;
    bottom: 8%;
  }
  .ekyc-server {
    width: 80px;
  }
  .cp-user {
    width: 140px;
  }
  .cp-rating {
    width: 140px;
  }
  .cp-house {
    width: 80px;
  }
  .cp-bank {
    width: 100px;
    bottom: 15%;
  }
  .cp-score {
    bottom: 10%;
  }
  .rba-source {
    width: 80px;
  }
  .rba-aicheck {
    width: 80px;
  }
  .rba-record {
    width: 80px;
  }
  .rba-record-status-alert {
    width: 16px;
    right: 55px;
    top: 37%;
  }
  .rba-record-status-checked {
    width: 16px;
    right: 55px;
  }
  .rba-gauge {
    width: 80px;
    left: 45%;
  }
  .rba-internet {
    width: 140px;
  }
  .rba-destination {
    width: 110px;
  }
  .tsp-vault {
    width: 100px;
  }
  .tsp-user {
    width: 100px;
  }
  .tsp-merchant {
    width: 100px;
  }
  .modal-team-name,
  .modal-team-position,
  .modal-team-other-info,
  .modal .main-introduction,
  .modal .introduction-content {
    font-size: 16px;
  }
  /*B2C section*/
  .vsure-product-image-001 {
    left: -25%;
    top: 5%;
    width: 290px;
    width: 240px;
    height: 340px;
  }
  .vsure-product-image-002 {
    left: 40%;
    top: 54%;
    width: 180px;
    height: 180px;
  }
  .vsure-product-image-003 {
    right: 0%;
    top: 12%;
    width: 160px;
    height: 160px;
  }
  .buymall-product-image-001 {
    left: -10%;
    top: 10%;
    width: 200px;
    height: 200px;
  }
  .buymall-product-image-002 {
    left: 51%;
    top: 43%;
    width: 140px;
    height: 140px;
  }
  .buymall-product-image-003 {
    left: 25%;
    top: -5%;
    width: 400px;
    height: 240px;
  }
  .anypay-product-image-003 {
    left: 42%;
    top: 28%;
    width: 200px;
    height: 280px;
  }
  .anypay-product-image-004 {
    left: 2%;
    bottom: 23%;
    width: 120px;
    height: 120px;
  }
  /*end of B2C section*/
  /*revpay*/
  .revpay-image-001 {
    top: -2%; right: 5%;
    width: 300px;
    z-index: 20;
    border-radius: 15px;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.2);
  }
  .revpay-image-001 img,
  .rp3-bg-element img {
    width: 100%;
  }
  .rp3-bg-element {
    position: absolute;
    width: 600px;
    z-index: 1;
    top: -20%;
    left: -25%;
  }
  .revpay-products {
    height: 500px;
  }
  #revpay-offline-section {
    margin-bottom: 140px;
  }
  .product-position {
    top: -14%;
  }
  .news-photo {
    height: 200px;
  }
  .b2c-products-image {
    position: absolute;
    right: -30%;
    top: -6%;
    z-index: 5;
  }
  .b2c-products-image img {
    width: auto;
    height: 320px;
  }
}

@media (max-width: 480px) {

  .header-caption-content {
    font-size: 4rem;
    line-height: 4.2rem;
  }
  .subpage .header-caption-wrapper-center {
    transform: none;
  }
  .mainpage .alt-header .header-caption-wrapper, .subpage .alt-header .header-caption-wrapper {
    bottom: 8%;
  }
  .subpage .header-caption-content {
    font-size: 1.6rem;
    line-height: 2rem;
  }
  .value-photo-frame {
    margin-bottom: 1.5rem;
  }
  .quote-content {
    font-size: 16px;
  }
  /*Front page stats*/
  .edc-stats-wrapper {
    height: 280px;
  }
  .transaction-stats-wrapper, .merchant-stats-wrapper {
    height: 240px;
  }
  /*DSX page animation*/
  .rp-line-animation-topright {
    position: absolute;
    height: 60px;
    width: 80px;
    right: 21%;
    top: 16%;
    background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #cd0000 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #cd0000 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 4px 2px, 0px 0px, 2px 4px, 0px 0px;
    background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
    z-index: 1;
    animation: rptopright 8s infinite linear;
    border-radius: 5px;
  }

  .rp-line-animation-topleft {
    position: absolute;
    height: 60px;
    width: 90px;
    left: 20%;
    top: 16%;
    background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 4px 2px, 4px 2px, 0px 0px, 2px 4px;
    background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
    z-index: 1;
    animation: rptopleft 8s infinite linear;
    border-radius: 5px;
  }

  .rp-line-animation-bottomright {
    position: absolute;
    height: 102px;
    width: 80px;
    right: 21%;
    bottom: 16%;
    background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 0px 0px, 4px 2px, 2px 4px, 0px 0px;
    background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
    z-index: 1;
    animation: rpbottomright 8s infinite linear;
    border-radius: 5px;
  }

  .rp-line-animation-bottomleft {
    position: absolute;
    height: 102px;
    width: 90px;
    left: 20%;
    bottom: 16%;
    background: linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(90deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%),linear-gradient(0deg, #a8a8a8 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 0px 0px, 4px 2px, 0px 0px, 2px 4px;
    background-position: 0px 0px, 100px 50px, 0 50px, 100px 0px;
    z-index: 1;
    animation: rpbottomleft 8s infinite linear;
    border-radius: 5px;
  }

  @keyframes rptopright {
    0% {
      background-position: 150px 0px, 0 100px, 0 0px, 118px 100px;
    }
    100% {
      background-position: 0px 0px, 100px 100px, 0px 100px, 118px 0px;
    }
  }

  @keyframes rpbottomright {
    0% {
      background-position: 0px 0px, 150px 100px, 0 100px, 100px 100px;
    }
    100% {
      background-position: 300px 0px, 0px 100px, 0 0px, 100px 0;
    }
  }
  @keyframes rpbottomleft {
    0% {
      background-position: 0px 0px, 0 100px, 0 100px, 88px 100px;
    }
    100% {
      background-position: 300px 0px, 150px 100px, 0px 0px, 88px 0;
    }
  }

  @keyframes rptopleft {
    0% {
      background-position: 0px 0px, 0 100px, 0 100px, 88px 0px;
    }
    100% {
      background-position: 150px 0px, 0px 100px, 0px 0px, 88px 100px;
    }
  }

  .ekyc-ai {
    bottom: 3%;
  }
  .ekyc-face {
    bottom: 0;
  }
  .ekyc-server {
    bottom: 4%;
  }
  .ekyc-ai-line-animation-left {
    width: 10%;
    bottom: 16%;
  }
  .ekyc-ai-line-animation-right {
    width: 13%;
    bottom: 16%;
    right: 23%;
  }
  .ekyc-line-animation-topright {
    width: 145px;
    right: 12%;
  }
  .ekyc-line-animation-topleft {
    width: 146px;
  }
  @keyframes ekyctopright {
    0% {
      background-position: 0px 0px, 150px 50px, 0 100px, 142px 0px;
    }
    100% {
      background-position: 300px 0px, 0px 50px, 0px 0px, 142px 50px;
    }
  }
  .ekyc-line-animation-left {
    width: 18%;
    left: 21%;
  }
  .ekyc-line-animation-right {
    width: 10%;
    right: 30%;
  }
  .rba-ai-line-animation {
    width: 56%;
    left: 22%;
  }
  .rba-ai-line-animation-error {
    width: 56px;
  }
  .rba-ai-line-animation-success {
    width: 56px;
  }
  .rba-pw-line-animation {
    width: 45%;
    left: 31%;
  }
  /*end of DSX page animation*/
  /*new dsx photos*/
  .dsx-revpay-image-001 {
    left: -7%;
  }
  .dsx-revpay-image-002 {
    left: 13%;
  }
  .dsx-revpay-image-004 {
    right: 0%;
  }
  .dsx-ekyc-wrapper {
    transform: translate(-10%,0);
    margin-bottom: 30px;
  }
  .dsx-passport-wrapper {
    height: 380px;
    transform: translate(10%,-10%);
  }
  .dsx-passport-image-002 {
    left: -8%;
  }
  .dsx-rba-wrapper-01 {
    height: 260px;
  }
  .dsx-rba-wrapper-02 {
    transform: translate(0,15%);
  }
  .dsx-tokenisation-image-001 {
    top: 0%;
    right: -10%;
  }
  .dsx-tokenisation-wrapper {
    height: 360px;
  }
  .wannatalk-partner-wrap {
    top: -5%;
  }
  .revpay-products-image {
    left: 30%;
    top: 0%;
  }
  .revpay-products-image img {
    height: 400px;
  }
  #about-dsx #dsx-family-2 {
    bottom: 5%;
  }
  .mobile-break {
    display: block;
  }
  #contact-form .form-wrapper {
    max-width: 100%;
    width: 100%;
    min-width: 300px;
    padding: 10px 20px 30px 20px;
  }
  #contact-form-v2 .form-wrapper {
    max-width: 100%;
    width: 100%;
    min-width: 300px;
    padding: 10px 20px 30px 20px;
  }
  #contact-form .float-right {
    float: left !important;
  }
  div.wpforms-container-full .wpforms-form .wpforms-field:not(.wpforms-field-phone):not(.wpforms-field-select-style-modern) {
    overflow-x: visible !important;
  }
}


@media (max-width: 375px) {
  .header-caption-content {
    font-size: 3.4rem;
    line-height: 3.6rem;
  }
  wrapper-short, .subpage .wrapper-short {
    height: 60vh;
  }
  .dsx-bg-wrapper .featured-bg {
    top: -80px;
  }
  .header-subcontent {
    font-size: 1.2rem;
  }
  .dsx-revpay-position {
    left: 32%;
    top: 80%;
  }
  .dsx-passport-position {
    top: 63%;
  }
  .dsx-rba-position {
    top: 43%;
    left: -8%;
  }
  .dsx-tokenisation-position {
    top: 43%;
    left: 70%;
  }
  .dsx-ekyc-position {
    top: 63%;
    left: 68%;
  }
  .revpay-products-image-banner {
    position: relative;
    width: 100%;
    height: 500px;
  }
  .revpay-products-image {
    right: -26%;
    top: 0;
  }
  .revpay-products-image img {
    width: auto;
    height: 500px;
  }
}

@media (max-width: 420px) and (max-height:830px) {
  .header-content-wrapper {
    height: 80vh;
  }
  #videobg {
    width: 280%;
    transform: translate(-280px, 30px);
  }
}

@media (max-width: 375px) and (max-height:667px) {
  #about-dsx .header-content-wrapper {
    height: 70vh;
  }
  .dsx-revpay-position {
    left: 30%;
    top: 79%;
  }
  .dsx-rba-position {
    top: 43%;
    left: -8%;
  }
  .dsx-passport-position {
    top: 63%;
    left: -3%;
  }
  .dsx-ekyc-position {
    top: 63%;
    left: 65%;
  }
  .revpay-products-image {
    right: -26%;
    top: -16%;
  }
}

@media (max-width: 360px) and (max-height:640px) {
  .header-content-wrapper {
    height: 90vh;
  }
  #about-dsx .header-content-wrapper {
    height: 80vh;
  }
  .dsx-revpay-position {
    left: 27%;
    top: 79%;
  }
  .dsx-rba-position {
    top: 43%;
    left: -14%;
  }
  .dsx-passport-position {
    top: 63%;
    left: -10%;
  }
  .dsx-ekyc-position {
    top: 63%;
    left: 65%;
  }
}