@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  scroll-behavior: smooth;
  font-family: "Oxygen", Tahoma, Geneva, Verdana, sans-serif, Baloo, Poppins;
  scrollbar-width: none;
}

@font-face {
  font-family: "Oxygen";
  src: url("../fonts/oxygen/Oxygen-Regular.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "Baloo";
  src: url("../fonts/baloo/Baloo-Regular.ttf") format("truetype");
  font-style: normal;
}
/* Custom Scroll Bar CSS */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #0c97ed;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #4070f4;
}

.hidden {
  display: none;
}

/* Navbar style */
header .navbar {
  max-width: 1140px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Oxygen", sans-serif;
  margin-bottom: -1px;
  position: absolute;
  z-index: 3;
}

.navbar .menu-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 50px;
  padding-top: 20px;
}

.navbar a {
  color: rgba(242, 242, 242, 0.7);
  text-decoration: none;
}

.navbar a:hover {
  color: #fff;
}

.animated {
  text-decoration: none;
  display: inline-block;
}

.animated::after {
  content: "";
  display: block;
  color: #ffffff;
  width: 0; /* Hide border initially */
  height: 3px;
  background: #0393FF;
  border-radius: 20px;
  transition: 0.3s ease;
}

.animated:hover::after {
  width: 100%; /* Show border on hover */
}

.menu-links button {
  width: 164px;
  height: 48px;
  padding: 21px 32px;
  border: none;
  border-radius: 48px;
  background-color: #0c97ed;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 55px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Oxygen";
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.menu-links button:hover {
  background: var(--pruple-gradient, linear-gradient(90deg, #0393FF 0%, #9747FF 84.87%));
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}

.menu-links img {
  position: relative;
  width: 176px;
  height: 70px;
  top: 10px;
  left: -30px;
  margin-right: 76px;
  margin-left: 5px;
}

header .navbar #menu-btn {
  display: none;
}

header .navbar .mobile-navbar {
  display: none;
}

header .overlay {
  display: none;
}

header .overlay-content {
  display: none;
}

header .btn__GAQ {
  display: none;
}

/* Header navbar responsive */
@media only screen and (max-width: 1199px) {
  header .navbar {
    justify-content: center;
  }
  .navbar .menu-links {
    gap: 30px;
    font-size: 14px;
  }
  .navbar .menu-links img {
    width: 160px;
    height: 65px;
    top: 5px;
    margin-left: 25px;
  }
  .navbar .menu-links button {
    width: 153px;
    margin-left: 60px;
    font-size: 12px;
  }
}
@media only screen and (max-width: 991px) {
  .navbar .menu-links {
    gap: 15px;
  }
  .navbar .menu-links button {
    margin-left: 20px;
    margin-right: -10px;
  }
  .navbar .menu-links img {
    width: 150px;
    height: 60px;
    top: 0;
    margin-right: 0px;
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  header .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  header .navbar .menu-links {
    display: none;
  }
  header .navbar .mobile-navbar {
    display: flex;
  }
  header .navbar .mobile-navbar img {
    position: absolute;
    top: 20px;
    margin-left: 14px;
  }
  header .navbar .mobile-navbar a {
    margin-top: 10px;
  }
  header .navbar .menu-icon {
    background: var(--pruple-gradient, linear-gradient(90deg, #0393FF 0%, #9747FF 84.87%));
    width: 60px;
    height: 60px;
    border-radius: 100px;
    position: fixed;
    top: 20px;
    right: 24px;
    cursor: pointer;
    padding: 28px 16px;
    z-index: 21;
  }
  header .navbar input {
    display: none;
  }
  header .navbar .menu-icon .bar {
    width: 28px;
    height: 3px;
    background-color: #ffffff;
    display: block;
    position: relative;
    transition: all 0.3s ease-out;
  }
  header .navbar .menu-icon .bar::before {
    content: "";
    width: 28px;
    height: 3px;
    background-color: #ffffff;
    position: absolute;
    transition: all 0.3s ease-out;
    top: -8px;
    left: 0;
    transition: all 0.3s;
  }
  header .navbar .menu-icon .bar::after {
    content: "";
    width: 28px;
    height: 3px;
    background-color: #ffffff;
    position: absolute;
    transition: all 0.3s ease-out;
    top: 8px;
    left: 0;
    transition: all 0.3s;
  }
  header .navbar input:checked ~ .menu-icon .bar {
    background-color: transparent;
  }
  header .navbar input:checked ~ .menu-icon .bar::before {
    top: 0;
    transform: rotate(45deg);
  }
  header .navbar input:checked ~ .menu-icon .bar::after {
    top: 0;
    transform: rotate(-45deg);
  }
  header .overlay {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
    border-radius: 30px;
    opacity: 0;
    /* transform: scale(0); */
    clip-path: ellipse(0% 0% at 100% -100%);
    transition: all 0.4s ease-in-out;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    /* dropdown menu */
    /* #myLinks {
      display: none;
      transition: 0.3s ease;
      overflow-y: hidden;
    } */
  }
  header .overlay .overlay-content {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 105px 25px 0px 25px;
    opacity: 0;
    transform: scale(0);
    transition: 0.3s;
    transition-delay: 0.3s;
  }
  header .overlay .content-block {
    width: 100%;
    border-bottom: 1px solid;
    border-image: linear-gradient(0.25turn, #0393FF 0%, #9747FF 84.87%);
    border-image-slice: 1;
  }
  header .overlay .overlay-content a {
    text-decoration: none;
    color: var(--H1, #0A102F);
    font-family: "Oxygen";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;
    border-bottom: 10px;
  }
  header .overlay .overlay-content a:hover, header .overlay .overlay-content a:focus {
    color: #0393FF;
  }
  header .overlay .plusbtn {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }
  header .overlay .pluslogo {
    width: 30px;
    height: 40px;
    flex-shrink: 0;
    padding-top: 10px;
    cursor: pointer;
  }
  header .overlay .drop_container {
    overflow: hidden;
    max-height: 0;
  }
  header .overlay .drop_container.show {
    max-height: 400px;
    transition: max-height 0.3s ease-in;
  }
  header .overlay .drop_container.hide {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
  }
  header .overlay .service__block {
    display: flex;
    flex-direction: column;
    position: relative;
    transition: 0.3s ease;
  }
  header .overlay .service__block ul {
    list-style: none;
  }
  header .overlay .service__block li {
    color: var(--H1, #0A102F);
    font-family: "Oxygen";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    cursor: pointer;
  }
  header .overlay .btn__block {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 766px;
  }
  header .overlay .btn__GAQ {
    width: 267px;
    height: 61px;
    flex-shrink: 0;
    border-radius: 48px;
    background: var(--pruple-gradient, linear-gradient(90deg, #0393FF 0%, #9747FF 84.87%));
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    text-decoration: none;
  }
  header .overlay .btn__GAQ a {
    color: #fff;
    font-family: "Oxygen";
    font-weight: 700;
    font-size: 18px;
  }
  header .navbar input:checked ~ .overlay {
    /* transform: scale(1); */
    opacity: 1;
    clip-path: ellipse(150% 150% at 100% 0%);
  }
  header .navbar input:checked ~ .overlay .overlay-content {
    transform: scale(1);
    opacity: 1;
  }
}
#app {
  padding-top: 0px;
}

/* index-page */
/* Home page section*/
.home {
  width: 100%;
  background-image: url("../assets/images/home-page-blur.png");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
.home .home-content {
  display: flex;
  justify-content: center;
  padding-top: 200px;
}
.home .home-leftcontent {
  display: flex;
  flex-direction: column;
  padding-top: 97px;
  padding-left: 10px;
}
.home .home-title {
  width: 600px;
  color: #FFF;
  font-family: "Baloo";
  font-size: 54px;
  font-style: normal;
  font-weight: 400;
  line-height: 72px; /* 133.333% */
  padding-bottom: 10px;
}
.home .text-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
  height: 55px;
  overflow: hidden;
}
.home .sliding-text span {
  display: block;
  font-family: "Baloo";
  font-size: 54px;
  font-weight: 400;
  line-height: 38px;
  padding: 10px 0px;
  background: var(--pruple-gradient, linear-gradient(90deg, #0393FF 0%, #9747FF 84.87%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home .sliding-text {
  position: relative;
  animation: text-animation 24s ease infinite;
  animation-delay: 1s;
}
.home .home-contain {
  width: 539px;
  color: var(--Word-Font, #FFF);
  font-family: Oxygen;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 166.667% */
}
.home .count__block {
  display: flex;
  padding-top: 28px;
}
.home .count__content {
  display: flex;
  flex-direction: column;
}
.home .count {
  color: #FFF;
  font-family: "Baloo";
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.home .count::after {
  content: "+";
  position: relative;
  left: 5px;
}
.home .count-text {
  color: #FFF;
  font-family: "Oxygen";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: rgb(255, 255, 255);
}
.home .home-button {
  padding: 16px 32px;
  border-radius: 60px;
  background-color: #0c97ed;
  font-family: "Oxygen";
  font-size: 14px;
  font-weight: 700;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: all 0.4s ease;
  margin-right: 20px;
  margin-bottom: 32px;
}
.home .home-button:hover {
  background: var(--pruple-gradient, linear-gradient(90deg, #0393FF 0%, #9747FF 84.87%));
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.home .home-rightcontent {
  display: flex;
}
.home .desktop__image {
  width: 584px;
  height: 642px;
  flex-shrink: 0;
  margin-bottom: 200px;
  margin-left: -50px;
}

@keyframes text-animation {
  0% {
    top: 0;
  }
  12.5% {
    top: -58px;
  }
  25% {
    top: -116px;
  }
  37.5% {
    top: -174px;
  }
  50% {
    top: -232px;
  }
  62.5% {
    top: -290px;
  }
  75% {
    top: -348px;
  }
  87.5% {
    top: -406px;
  }
  100% {
    top: 0px;
  }
}
@media only screen and (max-width: 1199px) {
  .home .home-content {
    padding: 200px 24px 0px 24px;
  }
  .home .home-leftcontent {
    padding-left: 30px;
  }
  .home .home-title {
    font-size: 45px;
    line-height: 42px;
  }
  .home .sliding-text span {
    font-size: 45px;
  }
  .home .home-contain {
    width: 459px;
  }
  .home .count {
    font-size: 50px;
  }
  .home .desktop__image {
    width: 430px;
    height: 500px;
    margin-left: -120px;
  }
}
@media only screen and (max-width: 991px) {
  .home .home-leftcontent {
    padding-top: 57px;
    padding-left: 10px;
  }
  .home .home-title {
    font-size: 35px;
  }
  .home .sliding-text span {
    font-size: 35px;
  }
  .home .home-contain {
    width: 350px;
    font-size: 16px;
  }
  .home .home-button button {
    width: 150px;
  }
  .home .count {
    font-size: 40px;
  }
  .home .count-text {
    font-size: 16px;
  }
  .home .desktop__image {
    width: 350px;
    height: 400px;
    margin-left: -220px;
  }
}
@media only screen and (max-width: 767px) {
  .home {
    width: 100%;
    background-image: url("../assets/images/mobile-home-page-background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .home .home-content {
    flex-direction: column-reverse;
    align-items: center;
    padding-top: 150px;
  }
  .home .home-leftcontent {
    max-width: 342px;
    width: 100%;
    padding: 0px 0px 144px 0px;
  }
  .home .home-title {
    font-size: 30px;
    padding-bottom: 0px;
    max-width: 342px;
    width: 100%;
  }
  .home .sliding-text span {
    font-size: 28px;
  }
  .home .home-contain {
    max-width: 342px;
    width: 100%;
    font-size: 16px;
  }
  .home .home-button {
    padding: 15px 22px;
    margin-right: 10px;
    margin-bottom: 20px;
  }
  .home .count {
    font-size: 30px;
  }
  .home .home-rightcontent {
    padding-top: 20px;
    justify-content: center;
  }
  .home .desktop__image {
    width: 300px;
    height: 350px;
    margin-left: -10px;
    margin-bottom: 30px;
  }
}
/* Contact section */
.contact {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* .company__logoblock:before, .company__logoblock:after {
    content: "";
    position: absolute;
    height: 130px;
    width: 280px;
    z-index: 2;
  }

  .company__logoblock:after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
  }

  .company__logoblock:before {
    left: 0;
    top: 0;
  } */
}
.contact .contact-block {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: url("../assets/images/work.png");
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 1140px;
  width: 100%;
  height: 623px;
  flex-shrink: 0;
  margin: 0 auto;
  border-radius: 30px;
}
.contact .contact-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.contact .mobile__contact-block {
  display: none;
}
.contact .text-question {
  color: #FFF;
  font-family: "Oxygen";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px; /* 250% */
}
.contact .text-answer {
  color: #FFF;
  font-family: "Baloo";
  font-size: 80px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: -20px;
}
.contact .text-explain {
  color: #FFF;
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px; /* 277.778% */
  padding-bottom: 51px;
  margin-top: -20px;
}
.contact .contact-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 164px;
  height: 48px;
  padding: 21px 32px;
  background-color: #0c97ed;
  border: none;
  border-radius: 60px;
  cursor: pointer;
  transition: 0.3s ease;
  margin-bottom: 60px;
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.contact .contact-button:hover {
  background: var(--pruple-gradient, linear-gradient(90deg, #0393FF 0%, #9747FF 84.87%));
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.contact .company__logoblock {
  height: 180px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 65px;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
}
.contact .company__logoblock::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
.contact .logo-animation {
  display: flex;
  align-items: center;
  width: 5600px;
  animation-name: scroll;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-play-state: running;
}
.contact .logo-animation:hover {
  animation-play-state: paused;
}
.contact .logo-animation__item {
  display: flex;
  white-space: nowrap;
}
.contact .company__logo {
  display: flex;
  justify-content: center;
  width: 280px;
}
.contact .company__logo img {
  height: 100px;
}
.contact .client__word {
  color: #0393FF;
  font-family: "Baloo";
  font-size: 140px;
  font-style: normal;
  font-weight: 400;
  opacity: 0.06;
  text-align: center;
  margin-top: -90px;
  margin-bottom: -50px;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-60%);
  }
}
@media only screen and (max-width: 1199px) {
  .contact .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .contact .company__logoblock {
    padding: 65px 24px 0px 24px;
  }
}
@media only screen and (max-width: 991px) {
  .contact .contact-block {
    max-width: 720px;
  }
  .contact .text-answer {
    font-size: 45px;
  }
  .contact .text-explain {
    font-size: 16px;
    line-height: 30px;
    padding: 20px 20px 51px 20px;
  }
  .contact .client__word {
    font-size: 85px;
    margin-top: -60px;
    margin-bottom: -20px;
  }
}
@media only screen and (max-width: 767px) {
  .contact .company__logoblock {
    padding: 50px 33px 20px 33px;
  }
  .contact .company__logo img {
    height: 90px;
  }
  .contact .client__word {
    font-size: 50px;
    margin-bottom: 0px;
  }
  .contact .contact-block {
    display: none;
  }
  .contact .mobile__contact-block {
    max-width: 767px;
    width: 100%;
    height: 450px;
    background-image: url("../assets/images/mobile-work.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
  }
  .contact .contact-button {
    margin-bottom: 37px;
  }
  .contact .text-question {
    font-size: 16px;
    border-radius: 0px;
    font-weight: 400;
  }
  .contact .text-answer {
    font-size: 24px;
    margin-top: 0px;
    margin-bottom: 10px;
  }
  .contact .text-explain {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    padding-bottom: 39px;
  }
}
/* Services section (soon will change text "skills" to "service"*/
.skills {
  background-color: #fff;
  margin: 0 auto;
}
.skills .content {
  padding-top: 70px;
  padding-bottom: 70px;
}
.skills .content .text-one {
  color: var(--H1, #0A102F);
  font-family: Oxygen;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px;
}
.skills .content .text-two {
  color: var(--H1, #0A102F);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
}
.skills .content .text-two span {
  color: var(--Primary-Color, #0393FF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
}
.skills .content .text-three {
  color: #000;
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}
.skills .content button {
  display: inline-flex;
  /* width: 180px; */
  height: 48px;
  padding: 21px 32px;
  margin-top: 36px;
  margin-bottom: 30px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border: none;
  border-radius: 48px;
  background: var(--Primary-Color, #0393FF);
  color: white;
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px;
  cursor: pointer;
}
.skills .content button:hover {
  background: var(--pruple-gradient, linear-gradient(90deg, #0393FF 0%, #9747FF 84.87%));
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.skills .skills-details {
  display: flex;
}
.skills .skills-details .boxes {
  display: flex;
  flex-wrap: wrap;
  padding-left: 49px;
  max-width: 700px;
  width: 100%;
}
.skills .skills-details .box {
  width: 191px;
  margin: 0px 23px 53px 0px;
}
.skills .skills-details .boxes .topic {
  font-family: "Oxygen";
  font-size: 18px;
  color: black;
  font-weight: 700;
  line-height: 26px;
}
.skills .skills-details .boxes img {
  width: 40px;
  height: 40px;
}
.skills .skills-details .boxes .per {
  font-family: "Oxygen";
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: black;
  text-align: left;
}
.skills .skills-details .left {
  display: flex;
}
.skills .left-image {
  width: 448px;
  height: 565px;
  object-fit: cover;
  border-radius: 12px;
}

@media only screen and (max-width: 1199px) {
  .skills {
    padding: 0px 24px;
  }
  .skills .skills-details {
    align-items: flex-start;
  }
  .skills .skills-details .boxes {
    padding-left: 15px;
    justify-content: center;
  }
  .skills .skills-details .box {
    width: 170px;
    margin-right: 16px;
  }
  .skills .left-image {
    width: 370px;
    height: 490px;
  }
}
@media only screen and (max-width: 991px) {
  .skills .content .text-one {
    font-size: 18px;
  }
  .skills .content .text-two {
    font-size: 25px;
  }
  .skills .content .text-two span {
    font-size: 25px;
  }
  .skills .content .text-three {
    font-size: 16px;
  }
  .skills .content button {
    margin-top: 20px;
  }
  .skills .left img {
    width: 350px;
  }
  .skills .skills-details .boxes {
    padding-left: 38px;
    justify-content: flex-start;
  }
  .skills .skills-details .box {
    width: 150px;
  }
  .skills .skills-details .boxes .topic {
    font-size: 16px;
  }
  .skills .skills-details .boxes .per {
    font-size: 14px;
  }
}
@media only screen and (max-width: 767px) {
  .skills .content .text-one {
    font-size: 16px;
  }
  .skills .content .text-two {
    font-size: 20px;
  }
  .skills .content .text-two span {
    font-size: 20px;
  }
  .skills .content button {
    margin-top: 26px;
    margin-bottom: 36px;
  }
  .skills .left img {
    display: none;
  }
  .skills .skills-details {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .skills .skills-details .boxes {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding-left: 0px;
  }
  .skills .skills-details .boxes img {
    filter: drop-shadow(0px 1230px 0 rgb(3, 147, 255));
    transform: translateY(-1230px);
  }
  .skills .skills-details .box {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    margin-right: 0px;
  }
  .skills .skills-details .boxes .topic {
    font-size: 18px;
  }
  .skills .skills-details .boxes .per {
    font-size: 16px;
    text-align: center;
  }
}
/* Portfolio section */
.portfolio {
  width: 100%;
  padding-top: 100px;
  background-color: #0A102F;
  /* next & previous buttons */
}
.portfolio .portfolio-content {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding-top: 50px;
}
.portfolio .portfolio-content h2 {
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
}
.portfolio .portfolio-content label {
  color: var(--Word-Font, #FFF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; /* 166.667% */
}
.portfolio .portfolio-content span {
  color: var(--Primary-Color, #0393FF);
  font-family: Baloo;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
}
.portfolio nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 55px 0px 104px 0px;
  /* border-bottom: 4px solid rgba(255, 255, 255, 0.20) ; */
}
.portfolio ul li {
  display: inline-flex;
  text-align: center;
  cursor: pointer;
  margin: 0 45px;
}
.portfolio nav span {
  display: inline-block;
  padding: 0px 20px 22px 20px;
  font-family: "Oxygen";
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  color: #ffffff;
}
.portfolio .all.active ~ .underline {
  width: 72px;
  margin-left: 40px;
}
.portfolio .application.active ~ .underline {
  width: 142px;
  margin-left: 203px;
}
.portfolio .branding.active ~ .underline {
  width: 106px;
  margin-left: 450px;
}
.portfolio .e-commerce.active ~ .underline {
  width: 146px;
  margin-left: 658px;
}
.portfolio .website.active ~ .underline {
  width: 103px;
  margin-left: 908px;
}
.portfolio .underline {
  height: 4px;
  bottom: 0;
  position: relative;
  background: #0393FF;
  border: none;
  border-radius: 4px;
  z-index: 1;
  transition: 0.3s ease-in-out;
}
.portfolio .work__slider {
  position: relative;
  bottom: 4px;
  max-width: 1140px;
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.2);
}
.portfolio .card__containbox {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-height: 775px;
  overflow: hidden;
}
.portfolio .card {
  width: 372px;
  margin-bottom: 40px;
  display: none;
  overflow: hidden;
}
.portfolio .card-image {
  width: 372px;
  border-radius: 12px;
  border: 0px;
  overflow: hidden;
  margin-bottom: 7px;
}
.portfolio .card-image img {
  width: 372px;
  height: 283px;
}
.portfolio .card-image img:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
  transition: all 0.3s ease-out;
}
.portfolio .card a h3 {
  font-family: "Oxygen";
  font-size: 20px;
  font-weight: 700;
  color: rgb(3, 147, 255);
}
.portfolio .card span {
  font-family: "Oxygen";
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}
.portfolio .show {
  display: block;
}
.portfolio .button-work__block {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 60px 0px;
}
.portfolio .button-work {
  display: flex;
  width: 170px;
  height: 48px;
  padding: 21px 24px 21px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border: none;
  border-radius: 48px;
  background: var(--Primary-Color, #0393FF);
  font-size: 14px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}
.portfolio .button-work:hover {
  background: var(--pruple-gradient, linear-gradient(90deg, #0393FF 0%, #9747FF 84.87%));
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.portfolio .portfolio-bottom__block {
  display: flex;
  flex-direction: column;
  padding-bottom: 200px;
}
.portfolio .portfolio-bottom__topic {
  font-family: "Oxygen";
  font-size: 20px;
  font-weight: 400;
  color: #fff;
}
.portfolio .portfolio-mobile__btmtopic {
  display: none;
}
.portfolio .portfolio-bottom__content {
  font-family: "Baloo";
  font-size: 30px;
  font-weight: 400;
  color: #fff;
  padding-bottom: 100px;
}
.portfolio .portfolio-bottom__content span {
  font-family: "Baloo";
  font-size: 30px;
  font-weight: 400;
  color: rgb(3, 147, 255);
}
.portfolio .portfolio__slideshow {
  width: 1000px;
  position: relative;
  margin: auto;
  display: flex;
}
.portfolio .mySlides {
  display: none;
}
.portfolio .prev, .portfolio .next {
  cursor: pointer;
  position: absolute;
  top: 120px;
  width: auto;
  padding: 12px 10px 16px 16px;
  width: 48px;
  height: 48px;
  background-color: rgb(3, 147, 255);
  border-radius: 30px;
  user-select: none;
  color: white;
  font-weight: bold;
  font-size: 18px;
}
.portfolio .next {
  right: 0;
  border-radius: 30px;
}
.portfolio .next img {
  rotate: 180deg;
}
.portfolio .slideshow-fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
.portfolio .slideshow-fade img {
  width: 53px;
  height: 43px;
  position: relative;
  left: 470px;
  margin-bottom: 50px;
}
.portfolio .slideshow-text {
  width: 530px;
  font-family: "Oxygen";
  font-weight: 400;
  font-size: 18px;
  color: #FFF;
  text-align: center;
  position: relative;
  left: 230px;
  padding-bottom: 100px;
}
.portfolio .slideshow-client {
  position: relative;
  left: 500px;
  color: #fff;
  font-family: "Oxygen";
  font-weight: 400;
  font-size: 16px;
}
.portfolio .slideshow-client span {
  color: #fff;
  font-family: "Oxygen";
  font-weight: 700;
  font-size: 16px;
}
.portfolio .slideshow-client img {
  position: absolute;
  top: -20px;
  left: -80px;
  width: 57px;
  height: 57px;
  padding: 10px 0px;
  background-color: #fff;
  border-radius: 40px;
}
.portfolio .mobile__filter {
  display: none;
}

@media only screen and (max-width: 1199px) {
  .portfolio {
    padding: 0 24px;
  }
  .portfolio ul li {
    margin: 0px 30px;
  }
  .portfolio .all.active ~ .underline {
    margin-left: 26px;
  }
  .portfolio .application.active ~ .underline {
    margin-left: 158px;
  }
  .portfolio .branding.active ~ .underline {
    margin-left: 373px;
  }
  .portfolio .e-commerce.active ~ .underline {
    margin-left: 555px;
  }
  .portfolio .website.active ~ .underline {
    margin-left: 772px;
  }
  .portfolio .card__containbox {
    justify-content: center;
    max-height: 545px;
  }
  .portfolio .card {
    width: 280px;
    margin-bottom: 20px;
  }
  .portfolio .card-image {
    width: 100%;
  }
  .portfolio .card-image img {
    width: 282px;
    height: 193px;
  }
  .portfolio .portfolio__slideshow {
    width: 800px;
  }
  .portfolio .slideshow-fade img {
    left: 370px;
  }
  .portfolio .slideshow-client {
    width: 150px;
    left: 386px;
  }
  .portfolio .slideshow-client img {
    left: -80px;
  }
  .portfolio .slideshow-text {
    left: 130px;
  }
}
@media only screen and (max-width: 991px) {
  .portfolio ul li {
    margin: 0 10px;
  }
  .portfolio .all.active ~ .underline {
    margin-left: 7px;
  }
  .portfolio .application.active ~ .underline {
    margin-left: 99px;
  }
  .portfolio .branding.active ~ .underline {
    margin-left: 273px;
  }
  .portfolio .e-commerce.active ~ .underline {
    margin-left: 415px;
  }
  .portfolio .website.active ~ .underline {
    margin-left: 592px;
  }
  .portfolio .card__containbox {
    max-height: 515px;
  }
  .portfolio .card {
    width: 232px;
  }
  .portfolio .card-image img {
    width: 232px;
    height: 163px;
  }
  .portfolio .portfolio__slideshow {
    width: 650px;
  }
  .portfolio .slideshow-fade img {
    left: 300px;
  }
  .portfolio .slideshow-text {
    width: 430px;
    font-size: 16px;
    left: 110px;
  }
  .portfolio .slideshow-client {
    left: 290px;
  }
  .portfolio .slideshow-client img {
    left: -75px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio .portfolio-content {
    padding-bottom: 36px;
  }
  .portfolio .portfolio-content h2 {
    font-size: 20px;
  }
  .portfolio .portfolio-content span {
    font-size: 20px;
  }
  .portfolio .portfolio-content h3 {
    font-size: 16px;
  }
  .portfolio nav {
    display: none;
  }
  .portfolio .mobile__filter {
    display: flex;
    justify-content: center;
  }
  .portfolio .mobile__filter .dropdown {
    position: relative;
    width: 100%;
    background-color: #0A102F;
  }
  .portfolio .mobile__filter .dropdown::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 18px;
    width: 12px;
    height: 3px;
    background: #ffffff;
    z-index: 1;
    transform: rotate(40deg);
    transition: 0.5s;
  }
  .portfolio .mobile__filter .dropdown.active::before {
    right: 10px;
  }
  .portfolio .mobile__filter .dropdown::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 10px;
    width: 12px;
    height: 3px;
    background: #ffffff;
    z-index: 1;
    transform: rotate(-40deg);
    transition: 0.5s;
  }
  .portfolio .mobile__filter .dropdown.active::after {
    right: 18px;
  }
  .portfolio .mobile__filter .dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    cursor: pointer;
    padding: 12px 5px;
    color: #fff;
    font-size: 18px;
    font-family: "Oxygen";
    font-weight: 400px;
    background: #0A102F;
    outline: none;
    border: 0px;
  }
  .portfolio .mobile__filter .dropdown.active input {
    border-bottom: 0px;
  }
  .portfolio .mobile__filter .dropdown input::placeholder {
    color: #fff;
  }
  .portfolio .mobile__filter .dropdown .option {
    position: relative;
    top: 50px;
    max-height: 0;
    background: #0A102F;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
    border-bottom: 4px solid rgba(255, 255, 255, 0.2);
  }
  .portfolio .mobile__filter .dropdown.active .option {
    max-height: 500px;
  }
  .portfolio .mobile__filter .dropdown .option div {
    color: #fff;
    font-size: 18px;
    font-family: "Oxygen";
    font-weight: 400px;
    padding: 12px 5px;
    cursor: pointer;
  }
  .portfolio .mobile__filter .dropdown .option div:hover {
    color: #0393FF;
  }
  .portfolio .card__containbox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 2fr));
    gap: 20px;
    padding-bottom: 33px;
    margin-top: 92px;
    max-height: 850px;
    height: 100%;
  }
  .portfolio .card {
    width: 100%;
    margin-bottom: 40px;
  }
  .portfolio .card-image {
    width: 100%;
  }
  .portfolio .card-image img {
    width: 100%;
    /* max-height: 283px;
    height: 100%; */
  }
  .portfolio .portfolio-bottom__topic {
    display: none;
  }
  .portfolio .portfolio-mobile__btmtopic {
    display: block;
    font-family: "Oxygen";
    font-weight: 400;
    font-size: 16px;
    line-height: 35px;
    color: #fff;
  }
  .portfolio .portfolio-bottom__content {
    font-size: 20px;
  }
  .portfolio .portfolio-bottom__block {
    padding-bottom: 270px;
    justify-content: center;
  }
  .portfolio .portfolio-bottom__content span {
    font-size: 20px;
  }
  .portfolio .portfolio__slideshow {
    max-width: 342px;
    width: 100%;
  }
  .portfolio .slideshow-fade img {
    left: 45%;
    width: 35px;
    height: 28px;
  }
  .portfolio .slideshow-text {
    max-width: 342px;
    width: 100%;
    font-size: 16px;
    left: 0px;
    padding-bottom: 70px;
  }
  .portfolio .slideshow-client {
    left: 40%;
  }
  .portfolio .slideshow-client img {
    width: 53px;
    height: 53px;
    left: -65px;
  }
  .portfolio .prev, .next {
    position: absolute;
    top: 360px;
  }
  .portfolio .prev {
    left: 29%;
  }
  .portfolio .next {
    top: 360px;
    right: 29%;
  }
}
@media only screen and (max-width: 450px) {
  .portfolio .card__containbox {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    max-height: 2020px;
  }
  .portfolio .card-image img {
    height: 220px;
  }
}
/* Ask a question section */
.question {
  background-color: #ffffff;
  width: 100%;
  margin: 0 auto;
}
.question .question__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 70px 0px;
}
.question .question__topic h2 {
  font-family: "Baloo";
  font-weight: 400;
  font-size: 30px;
  color: #000;
  text-align: center;
}
.question .question__topic span {
  font-size: 30px;
  color: #2057eb;
}
.question .question__content {
  width: 700px;
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #000;
  text-align: center;
}
.question .question__bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 100px;
}
.question .question__toggle {
  display: flex;
  flex-direction: column;
  width: 610px;
  border-bottom: 1px solid rgba(10, 16, 47, 0.4);
}
.question .question__dropdown {
  display: flex;
  justify-content: space-between;
  width: 610px;
  height: 40px;
  align-items: center;
  background-color: #fff;
  border: 0px;
  margin: 30px 0px;
}

  .question .question__dropdown h3 {
    cursor: pointer;
    /* font */
    color: var(--Word-Font, #000000);
    font-family: "Oxygen";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 24px */
  }

.question .image__vector {
  width: 12px;
  height: 6px;
  flex-shrink: 0;
  stroke-width: 4px;
  stroke: var(--Primary-Color, #0393FF);
}
.question .question__innercontent {
  width: 616px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /* font */
  color: var(--H1, #000000);
  font-family: "Oxygen";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

@media only screen and (max-width: 767px) {
  .question .question__top {
    padding: 51px 24px 40px 24px;
  }
  .question .question__topic {
    font-size: 20px;
    padding-bottom: 26px;
  }
  .question .question__content {
    width: 100%;
  }
  .question .question__toggle {
    max-width: 610px;
    width: calc(100% - 48px);
  }
  .question .question__dropdown {
    width: 100%;
    font-size: 16px;
    text-align: left;
    margin: 21px 0px;
  }
  .question .question__innercontent {
    max-width: 610px;
    width: 100%;
  }
}
/* end of index-page */
/* Footer section */
.footer-container {
  width: 100%;
  background-color: #0A102F;
  background-image: url("../assets/images/footer-blue-shadow.png");
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 400px;
  color: #fff;
  margin-top: -2px;
}
.footer-container .footer__top-block {
  display: flex;
  justify-content: center;
  gap: 160px;
  padding: 102px 0px 72px 0px;
}
.footer-container .footer__top-content {
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
}
.footer-container .footer__top-content a {
  color: #fff;
  font-family: "Oxygen";
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
}
.footer-container .footer__tencent-block {
  display: flex;
  justify-content: center;
}
.footer-container .footer__tencent-content {
  display: flex;
  align-items: center;
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
}
.footer-container .footer__tencent-content span {
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
}
.footer-container .footer__tencent-content img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.footer-container .footer__fblogo-block {
  display: flex;
  align-items: center;
}
.footer-container .footer__fblogo {
  width: 30px;
  height: 30px;
}
.footer-container .footer__bottom-block {
  display: block;
}
.footer-container .footer__copyright {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  padding: 32px 0px;
}

/* Responsive 0f the footer */
@media only screen and (max-width: 1199px) {
  .footer-container .footer__top-block {
    gap: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .footer-container .footer__top-block {
    gap: 60px;
  }
  .footer-container .footer__top-content {
    font-size: 16px;
  }
  .footer-container .footer__top-content span {
    font-size: 14px;
  }
  .footer-container .footer__tencent-content {
    font-size: 16px;
  }
  .footer-container .footer__copyright {
    font-size: 14px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-container .footer__top-block {
    flex-direction: column;
    padding: 42px 0px 33px 24px;
    gap: 20px;
  }
  .footer-container .footer__tencent-block {
    justify-content: flex-start;
  }
  .footer-container .footer__fblogo-block {
    justify-content: center;
  }
  .footer-container .footer__fblogo {
    margin-top: 42px;
  }
  .footer-container .footer__copyright {
    padding: 10px 24px 22px 24px;
  }
}
/*end of footer */
.container {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
}

/* message logo */
.msg-logo__block {
  display: none;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.msg-logo {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  position: fixed;
  bottom: 41px;
  right: 39px;
  z-index: 2;
  display: none;
  /* border: 1px solid #0A102F;
  border-radius: 48px; */
}

@media only screen and (max-width: 767px) {
  .msg-logo {
    width: 60px;
    height: 60px;
    bottom: 15px;
    right: 24px;
  }
}
/* end of message logo */
/* google map */
.google-map {
  padding-bottom: 50%;
  position: relative;
}

.google-map iframe {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

/* about us-page */
.about-page {
  width: 100%;
  background-color: var(--H1, #0A102F);
  background-image: url("../assets/images/header-blue-shadow.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 200px;
  padding: 200px 0px;
}
.about-page .about__top {
  display: flex;
  flex-direction: column;
}
.about-page .about__topic {
  font-family: "Baloo";
  font-weight: 700;
  font-size: 30px;
  color: #fff;
  line-height: 50px;
}
.about-page .about__topic span {
  color: #0393FF;
}
.about-page .about__content {
  max-width: 1140px;
  font-family: "Oxygen";
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  line-height: 38px;
  padding-bottom: 50px;
}
.about-page .about__title {
  font-family: "Baloo";
  font-size: 30px;
  font-weight: 700;
  line-height: 50px;
  color: #fff;
}
.about-page .about__title span {
  color: #0393FF;
}
.about-page .about__detail {
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 400;
  line-height: 38px;
  color: #fff;
  padding-bottom: 100px;
}
.about-page .about__values-box {
  display: flex;
  flex-wrap: wrap;
  gap: 135px;
  padding-bottom: 80px;
}
.about-page .about__value {
  width: 289px;
  display: flex;
  flex-direction: column;
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 400;
  line-height: 38px;
  color: #fff;
}
.about-page .about__value span {
  font-family: "Baloo";
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #fff;
}
.about-page .about__value img {
  width: 51px;
}
.about-page .value-image {
  width: 70px;
  height: 67px;
  margin-bottom: 10px;
}
.about-page .about__center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-page .about__profile-block {
  display: inline-flex;
}
.about-page .about__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0px 40px 0px;
}
.about-page .about__portrait {
  display: inline-block;
}
.about-page .about__portrait img {
  width: 233px;
  height: 335px;
  margin: 15px 20px;
}
.about-page .about__work-unit {
  margin-bottom: 50px;
  height: 111px;
}
.about-page .about__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
}
.about-page .about__join {
  color: #fff;
  font-family: "Oxygen";
  font-size: 20px;
  font-weight: 400;
  text-align: center;
}
.about-page .about__join span {
  color: #fff;
  font-family: "Baloo";
  font-size: 40px;
  font-weight: 400;
}
.about-page .about__face-icon {
  display: inline-flex;
  gap: 20px;
  margin-top: 30px;
}
.about-page .view-position {
  display: flex;
  align-items: center;
  width: 170px;
  height: 48px;
  border: 0px;
  border-radius: 48px;
  background-color: rgb(3, 147, 255);
  padding: 21px 24px 21px 32px;
  gap: 10px;
  margin-top: 50px;
}
.about-page .view-position a {
  color: #fff;
  font-family: "Oxygen";
  font-size: 14px;
  font-weight: 700px;
}
.about-page .view-position:hover {
  background-image: linear-gradient(to right, #0393FF 0%, #9747FF 84.87%);
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.about-page .about__mobile-profile {
  display: none;
}
.about-page .about__mobile-portrait {
  display: none;
}
.about-page .about__mobile-post {
  display: none;
}

/* responsive of about-us page */
@media only screen and (max-width: 1199px) {
  .about-page .about__top {
    padding: 0px 30px;
  }
  .about-page .about__values-box {
    gap: 40px;
    justify-content: center;
  }
  .about-page .about__value {
    width: 280px;
  }
  .about-page .about__portrait img {
    margin: 0px 0px;
  }
}
@media only screen and (max-width: 991px) {
  .about-page .about__top {
    padding: 0px 24px;
  }
  .about-page .about__content {
    font-size: 16px;
  }
  .about-page .about-details {
    font-size: 16px;
  }
  .about-page .about__values-box {
    gap: 0px;
    justify-content: center;
  }
  .about-page .about__value {
    width: 240px;
    font-size: 16px;
    padding: 0px 20px 40px 0px;
  }
  .about-page .about__value span {
    font-size: 18px;
  }
  .about-page .about__portrait img {
    width: 180px;
    height: 280px;
  }
  .about-page .about__join {
    font-size: 18px;
  }
  .about-page .about__join span {
    font-size: 35px;
  }
  .about__face-icon img {
    width: 180px;
    height: 220px;
  }
}
@media only screen and (max-width: 767px) {
  .about-page {
    padding-top: 150px;
  }
  .about-page .about__topic {
    font-size: 20px;
  }
  .about-page .about__title {
    font-size: 20px;
  }
  .about-page .about__values-box {
    flex-direction: column;
    align-items: center;
  }
  .about-page .about__value {
    width: 100%;
    font-size: 16px;
    text-align: center;
    align-items: center;
    padding-right: 0px;
  }
  .about-page .about__value span {
    font-size: 16px;
  }
  .about-page .about__value img {
    width: 40px;
  }
  .about-page .about__profile {
    display: none;
  }
  .about-page .about__portrait {
    display: none;
  }
  .about-page .about__work-unit {
    display: none;
  }
  .about-page .about__mobile-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .about-page .about__mobile-portrait {
    display: inline-flex;
    gap: 40px;
    padding-bottom: 30px;
  }
  .about-page .about__mobile-post {
    display: block;
    margin-bottom: 20px;
  }
  .about-page .about__join span {
    font-size: 20px;
  }
  .about__face-icon img {
    width: 133px;
    height: 145px;
  }
}
/* end of about-us page */
/* service-page */
.service-page {
  width: 100%;
  background-color: var(--H1, #0A102F);
  background-image: url("../assets/images/header-blue-shadow.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 200px;
  /* .vertical-nav li:hover { 
    background: linear-gradient(90deg,#0393FF 0%, #9747FF 84.87%);
    border-radius: 10px 0px 0px 10px;
  } */
  /* .service__detail li::before {
    content: "•"; 
    position: relative;
    top: 2px;
    background: linear-gradient(to right, #0393FF 0%, #9747FF 84.87%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 25px;
    margin-right: 20px;
  } */
}
.service-page .service__top {
  display: flex;
  padding-top: 200px;
}
.service-page .vertical-nav {
  max-width: 249px;
  width: 100%;
}
.service-page .vertical-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: var(--H1, #0A102F);
  position: relative;
  border-right: 1px solid;
  border-image: linear-gradient(0.5turn, #0393FF 0%, #9747FF 84.87%);
  border-image-slice: 1;
}
.service-page .vertical-nav li {
  display: flex;
  position: relative;
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  padding: 30px;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px 0px 0px 10px;
  z-index: 1;
}
.service-page .vertical-nav li::after {
  content: "";
  width: 279px;
  height: 60px;
  position: absolute;
  top: 0;
  right: -400px;
  padding: 30px;
  background-image: linear-gradient(90deg, #0393FF 20%, #9747FF 84.87%);
  border-radius: 10px 0px 0px 10px;
  transition: 0.4s ease-in-out;
  z-index: -1;
}
.service-page .vertical-nav li.active::after {
  right: 0;
}
.service-page .clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.service-page .service__content {
  display: flex;
  flex-direction: column;
  padding-left: 80px;
  /* display: none; */
}
.service-page .service__title {
  font-family: "Baloo";
  font-size: 30px;
  font-weight: 400;
  line-height: 50px;
  color: #ffffff;
  padding-bottom: 15px;
}
.service-page .service__title span {
  font-family: "Baloo";
  color: rgb(3, 147, 255);
}
.service-page .service__contain {
  font-family: "Oxygen";
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
  color: #ffffff;
}
.service-page .service__detail {
  font-family: "Oxygen";
  font-weight: 400;
  font-size: 16px;
  line-height: 36px;
  color: #ffffff;
  padding-top: 50px;
}
.service-page .service__detail span {
  font-size: 20px;
  font-weight: 700;
  line-height: 50px;
}
.service-page .service__detail ul {
  list-style-image: url("../assets/images/list-doc.png");
  list-style-position: outside;
  padding: 30px 0px 0px 20px;
}
.service-page .service__center {
  display: flex;
  padding-top: 200px;
}
.service-page .service__topic {
  max-width: 289px;
  width: 100%;
  font-family: "Oxygen";
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 36px;
}
.service-page .service__topic span {
  font-size: 20px;
  font-weight: 700;
}
.service-page .service__design-block {
  display: flex;
  flex-wrap: wrap;
  padding-left: 60px;
  gap: 65px;
}
.service-page .service__design-process {
  display: flex;
  flex-direction: column;
  max-width: 220px;
  font-family: "Oxygen";
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 36px;
}
.service-page .service__design-process span {
  font-size: 18px;
  font-weight: 700;
  line-height: 50px;
}
.service-page .service__design-process img {
  width: 40px;
  height: 40px;
}
.service-page .service__bottom {
  display: block;
  padding-top: 200px;
}
.service-page .service__bottom-topic {
  font-family: "Baloo";
  font-size: 30px;
  font-weight: 400;
  line-height: 50px;
  color: #ffffff;
}
.service-page .service__bottom-topic span {
  color: rgb(3, 147, 255);
}
.service-page .service__bottom-content {
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 400;
  line-height: 38px;
  color: #ffffff;
  padding-bottom: 50px;
}
.service-page .service__form {
  display: flex;
  justify-content: center;
  padding-bottom: 113px;
}
.service-page .service__form form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.service-page input[type=text] {
  width: 489px;
  height: 60px;
  flex-shrink: 0;
  background-image: linear-gradient(#0A102F, #0A102F), linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-width: 3px;
  border-image-slice: 1;
  border-radius: 12px;
  outline: none;
  /* font */
  color: rgba(242, 242, 242, 0.5);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
  padding: 11px 20px;
}
.service-page input[type=text]:focus {
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-width: 3px;
  border-image-slice: 1;
}
.service-page textarea {
  max-width: 489px;
  min-width: 489px;
  width: 100%;
  height: 240px;
  flex-shrink: 0;
  background-image: linear-gradient(#0A102F, #0A102F), linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-width: 3px;
  border-image-slice: 1;
  border-radius: 12px;
  outline: none;
  /* font */
  color: rgba(242, 242, 242, 0.5);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
  padding: 11px 20px;
}
.service-page textarea:focus {
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-width: 3px;
  border-image-slice: 1;
}
.service-page input[type=submit] {
  display: flex;
  padding: 21px 44px;
  gap: 10px;
  border: 0px;
  border-radius: 48px;
  background: var(--Primary-Color, #0393FF);
  /* font */
  color: #FFF;
  font-family: "Oxygen";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 16.8px */
  margin-top: 38px;
}
.service-page input[type=submit]:hover {
  background-image: linear-gradient(to right, #0393FF 0%, #9747FF 84.87%);
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.service-page .service__image {
  width: 435px;
  height: 368px;
  margin: 70px 0px 0px 120px;
}
.service-page .seo-package {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
}
.service-page .seo-package__title {
  font-family: "Baloo";
  font-weight: 400;
  font-size: 30px;
  line-height: 48px;
  color: white;
}
.service-page .seo-package__title span {
  font-family: "Baloo";
  color: #0393FF;
  font-size: 30px;
}
.service-page .seo-package__content {
  font-family: "Oxygen";
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  color: #fff;
  padding-bottom: 60px;
}
.service-page .seo-package__selection-block {
  display: flex;
}
.service-page .seo-package__selection {
  width: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #0A102F;
  background-image: linear-gradient(to right, #0A102F, #0A102F), linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 4px solid;
  border-image: linear-gradient(to right, #0393FF 0%, #9747FF 84.87%);
  border-image-slice: 1;
  border-radius: 20px;
  margin: 0 7px;
}
.service-page .seo-package__selection-title {
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
  color: #fff;
  padding: 20px 0px;
}
.service-page .seo-package__price {
  font-family: "Oxygen";
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #fff;
  padding-bottom: 20px;
}
.service-page .seo-package__selection-content {
  width: 314px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  padding-bottom: 90px;
  font-family: "Oxygen";
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
  color: rgb(255, 255, 255);
}
.service-page .seo-package__selection-content span {
  font-weight: 700;
}
.service-page .service__mobile-topic {
  display: none;
}
.service-page .service__design-mobile {
  display: none;
}

/* responsive of the service page */
@media only screen and (max-width: 1199px) {
  .service-page .service__top {
    padding: 200px 20px 0px 20px;
  }
  .service-page .service__content {
    padding-left: 60px;
  }
  .service-page .service__topic {
    padding-left: 20px;
  }
  .service-page .service__design-block {
    padding-left: 30px;
    gap: 30px;
  }
  .service-page .service__bottom-topic {
    padding: 0px 20px;
  }
  .service-page .service__bottom-content {
    padding: 0px 20px 50px 20px;
  }
  .service-page .service__image {
    margin-left: 40px;
  }
  .service-page .seo-package__selection {
    width: 300px;
  }
  .service-page .seo-package__selection-content {
    width: 250px;
  }
}
@media only screen and (max-width: 991px) {
  .service-page .service__content {
    width: 530px;
    padding-left: 30px;
  }
  .service-page .vertical-nav {
    max-width: 220px;
  }
  .service-page .vertical-nav li {
    padding: 25px 10px 25px 20px;
  }
  .service-page .service__topic {
    padding-left: 20px;
  }
  .service-page .service__design-block {
    padding-left: 30px;
    gap: 40px;
  }
  .service-page .service__bottom-content {
    padding: 0px 20px 50px 20px;
  }
  .service-page input[type=text] {
    width: 350px;
  }
  .service-page textarea {
    max-width: 350px;
    min-width: 350px;
  }
  .service-page .service__image {
    width: 350px;
    height: 280px;
    margin-left: 20px;
  }
  .service-page .seo-package__selection {
    width: 240px;
  }
  .service-page .seo-package__selection-content {
    width: 200px;
    font-size: 14px;
  }
}
@media only screen and (max-width: 767px) {
  .service-page .service__top {
    padding-top: 150px;
  }
  .service-page .vertical-nav {
    display: none;
  }
  .service-page .service__title {
    font-size: 20px;
    line-height: 30px;
  }
  .service-page .service__content {
    width: 530px;
    padding-left: 0px;
  }
  .service-page .service__detail span {
    font-size: 16px;
  }
  .service-page .service__center {
    flex-direction: column;
    padding: 0px 20px;
  }
  .service-page .service__topic {
    max-width: 600px;
    padding: 50px 0px;
  }
  .service-page .service__topic span {
    font-size: 16px;
  }
  .service-page .service__design-block {
    align-items: center;
    flex-direction: column;
    gap: 0px;
    padding-left: 0px;
  }
  .service-page .service__design-process {
    max-width: 600px;
    width: 100%;
    text-align: center;
    padding-bottom: 50px;
  }
  .service-page .service__design-process span {
    font-size: 16px;
  }
  .service-page .service__design-process img {
    display: none;
  }
  .service-page .service__design-mobile {
    display: block;
    width: 50px;
    height: 50px;
    align-self: center;
  }
  .service-page .service__bottom {
    padding-top: 50px;
  }
  .service-page .service__bottom-topic {
    display: none;
  }
  .service-page .service__mobile-topic {
    display: block;
    font-family: "Baloo";
    font-size: 20px;
    font-weight: 400;
    line-height: 50px;
    color: #ffffff;
    padding: 0px 20px;
  }
  .service-page .service__mobile-topic span {
    color: rgb(3, 147, 255);
  }
  .service-page input[type=text] {
    width: 342px;
  }
  .service-page textarea {
    max-width: 342px;
    min-width: 342px;
  }
  .service-page .service__image {
    display: none;
  }
  .service-page .service__form form {
    align-items: flex-start;
  }
  .service-page .seo-package__title {
    font-size: 20px;
    text-align: center;
  }
  .service-page .seo-package__title span {
    font-size: 20px;
  }
  .service-page .seo-package__content {
    font-size: 16px;
  }
  .service-page .seo-package__selection-block {
    flex-direction: column;
  }
  .service-page .seo-package__selection {
    margin: 7px 0px;
  }
}
@media only screen and (max-width: 372px) {
  .service-page input[type=text] {
    width: 272px;
  }
  .service-page textarea {
    max-width: 272px;
    min-width: 272px;
  }
}
/* end of service-page */
/* work-page */
.work-page {
  width: 100%;
  background-color: var(--H1, #0A102F);
  background-image: url("../assets/images/header-blue-shadow.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 200px;
  padding-bottom: 100px;
  padding-top: 200px;
  /* nav #marker {
    position: absolute;
    height: 4px;
    left: 0px;
    width: 0px;
    background: #0393FF;
    bottom: 40px;
    transition: 0.5s;
    border-radius: 4px;
  } */
  /* .nav {
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    padding: 0 20px;
    margin: 60px 0px;
  }

  .nav-item {
    color: #ffffff;
    background-color: #0A102F;
    border: 0px;
    padding: 20px;
    text-decoration: none;
    transition: .3s;
    margin: 0px 45px;
    font-family: 'Oxygen';
    font-size: 20px;
    font-weight: 400;
    position: relative;

    &:before {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 100%;
      height: 5px;
      background-color: #aeaeae;;
      border-radius: 8px 8px 0 0;
      opacity: 0;
      transition: 0.3s;
    }
  }

  .nav-item:not(.is-active):hover:before {
    opacity: 1;
    bottom: 0;
  }

  .nav-item:not(.is-active):hover { 
    color: #aeaeae; 
  }

  .nav-indicator {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    transition: 0.3s;
    border-radius: 8px 8px 0 0;
  } */
}
.work-page .work__title {
  color: var(--Word-Font, #FFF);
  font-family: "Baloo";
  font-size: 30px;
  font-weight: 400;
  line-height: 50px; /* 166.667% */
}
.work-page .work__title span {
  font-family: "Baloo";
  color: #0393FF;
}
.work-page .work__content {
  color: var(--Word-Font, #FFF);
  font-family: Oxygen;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
}
.work-page nav {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 55px 0px 104px 0px;
  /* border-bottom: 4px solid rgba(255, 255, 255, 0.20) ; */
}
.work-page ul li {
  display: inline-flex;
  text-align: center;
  cursor: pointer;
  margin: 0px 45px;
}
.work-page nav span {
  display: inline-block;
  padding: 0px 20px 12px 20px;
  font-family: "Oxygen";
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  color: #ffffff;
}
.work-page .all.active ~ .underline {
  width: 72px;
  margin-left: 40px;
}
.work-page .application.active ~ .underline {
  width: 142px;
  margin-left: 203px;
}
.work-page .branding.active ~ .underline {
  width: 106px;
  margin-left: 450px;
}
.work-page .e-commerce.active ~ .underline {
  width: 146px;
  margin-left: 658px;
}
.work-page .website.active ~ .underline {
  width: 103px;
  margin-left: 908px;
}
.work-page .underline {
  height: 4px;
  bottom: -8px;
  background: #0393FF;
  border: none;
  border-radius: 4px;
  position: absolute;
  z-index: 1;
  transition: 0.3s ease-in-out;
}
.work-page .work__slider {
  position: relative;
  bottom: -8px;
  max-width: 1140px;
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.2);
}
.work-page .card__container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.work-page .card {
  width: 372px;
  height: 343px;
  border-radius: 12px;
  border: 0px;
  display: none;
  margin-bottom: 40px;
}
.work-page .card-image {
  width: 100%;
  border-radius: 12px;
  border: 0px;
  overflow: hidden;
  margin-bottom: 7px;
}
.work-page .card-image img {
  width: 100%;
  max-height: 283px;
  height: 100%;
}
.work-page .card-image img:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
  transition: all 0.3s ease-out;
}
.work-page .card a {
  color: var(--Primary-Color, #0393FF);
  text-align: center;
  font-family: "Oxygen";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.work-page .card span {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
}
.work-page .show {
  display: block;
}
.work-page .dropdown-menu {
  display: none;
}
.work-page .mobile__filter {
  display: none;
}

/* responsive of work page */
@media only screen and (max-width: 1199px) {
  .work-page .work__title {
    padding: 0px 24px;
  }
  .work-page .work__content {
    padding: 0px 24px;
  }
  .work-page ul li {
    margin: 0px 30px;
  }
  .work-page .all.active ~ .underline {
    margin-left: 25px;
  }
  .work-page .application.active ~ .underline {
    margin-left: 158px;
  }
  .work-page .branding.active ~ .underline {
    margin-left: 373px;
  }
  .work-page .e-commerce.active ~ .underline {
    margin-left: 555px;
  }
  .work-page .website.active ~ .underline {
    margin-left: 772px;
  }
  .work-page .work__slider {
    width: calc(100% - 48px);
  }
  .work-page .card__container {
    justify-content: center;
    padding: 0 24px;
  }
  .work-page .card {
    width: 305px;
  }
}
@media only screen and (max-width: 991px) {
  .work-page .work__content {
    max-width: 830px;
    width: 100%;
    font-size: 16px;
  }
  .work-page ul li {
    margin: 0px 10px;
  }
  .work-page .all.active ~ .underline {
    margin-left: 7px;
  }
  .work-page .application.active ~ .underline {
    margin-left: 99px;
  }
  .work-page .branding.active ~ .underline {
    margin-left: 273px;
  }
  .work-page .e-commerce.active ~ .underline {
    margin-left: 415px;
  }
  .work-page .website.active ~ .underline {
    margin-left: 592px;
  }
  .work-page .card {
    width: 232px;
    height: 262px;
  }
}
@media only screen and (max-width: 767px) {
  .work-page {
    padding-top: 150px;
  }
  .work-page .work__title {
    font-size: 20px;
    padding-top: 0;
  }
  .work-page .work__content {
    display: none;
  }
  .work-page nav {
    display: none;
  }
  /* .work-page .dropdown-menu {
    display: flex;
    flex-direction: column;
    margin-bottom: 58px;
    padding: 0px 24px;
  }

  .work-page .btn__mobile {
    max-width: 710px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #0A102F;
    border: 0px;
    padding: 12px 0px;
    cursor: pointer;

    color: #ffffff;
    text-align: right;
    font-family: 'Oxygen';
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    img {
      transition: transform 0.2s;
    }
  }

  .work-page .btn__mobile.active {
    display: flex;
    justify-content: space-between;
    border-bottom: 4px solid rgba(255, 255, 255, 0.20);
  }

  .work-page .btn__inner {
    display: none;
    overflow: hidden;
  }

  .work-page .inner__block {
    border-bottom: 2px solid rgba(255, 255, 255, 0.20);
  } */
  .work-page .mobile__filter {
    display: flex;
  }
  .work-page .mobile__filter .dropdown {
    position: relative;
    width: 100%;
    background-color: #0A102F;
    margin: 0px 24px;
  }
  .work-page .mobile__filter .dropdown::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 18px;
    width: 12px;
    height: 3px;
    background: #ffffff;
    z-index: 1;
    transform: rotate(40deg);
    transition: 0.3s;
  }
  .work-page .mobile__filter .dropdown.active::before {
    right: 10px;
  }
  .work-page .mobile__filter .dropdown::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 10px;
    width: 12px;
    height: 3px;
    background: #ffffff;
    z-index: 1;
    transform: rotate(-40deg);
    transition: 0.3s;
  }
  .work-page .mobile__filter .dropdown.active::after {
    right: 18px;
  }
  .work-page .mobile__filter .dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    font-family: "Oxygen";
    font-weight: 400px;
    padding: 20px 5px;
    background: #0A102F;
    outline: none;
    border: 0px;
  }
  .work-page .mobile__filter .dropdown.active input {
    border-bottom: 0px;
  }
  .work-page .mobile__filter .dropdown input::placeholder {
    color: #fff;
    font-size: 18px;
    font-family: "Oxygen";
    font-weight: 400px;
  }
  .work-page .mobile__filter .dropdown .option {
    position: relative;
    top: 50px;
    width: 100%;
    max-height: 0;
    background: #0A102F;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
    border-bottom: 4px solid rgba(255, 255, 255, 0.2);
  }
  .work-page .mobile__filter .dropdown.active .option {
    max-height: 500px;
  }
  .work-page .mobile__filter .dropdown .option div {
    color: #fff;
    font-size: 18px;
    font-family: "Oxygen";
    font-weight: 400px;
    padding: 12px 5px;
    cursor: pointer;
  }
  .work-page .mobile__filter .dropdown .option div:hover {
    color: #0393FF;
  }
  .work-page .card__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 2fr));
    text-decoration: none;
    padding: 0px 24px;
    margin-top: 92px;
    gap: 15px;
  }
  .work-page .card {
    width: 100%;
    max-height: 343px;
    height: 100%;
    margin-bottom: 40px;
  }
  .work-page .card-image {
    width: 100%;
    border-radius: 12px;
    border: 0px;
    overflow: hidden;
    margin-bottom: 7px;
  }
  .work-page .card-image img {
    width: 100%;
    max-height: 283px;
    height: 100%;
  }
  .work-page .card-image img:hover {
    -ms-transform: scale(1.2); /* IE 9 */
    -webkit-transform: scale(1.2); /* Safari 3-8 */
    transform: scale(1.2);
    transition: all 0.3s ease-out;
  }
  .work-page .card a {
    color: var(--Primary-Color, #0393FF);
    text-align: center;
    font-family: "Oxygen";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  .work-page .card span {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
  }
  .show {
    display: block;
  }
}
@media only screen and (max-width: 450px) {
  .work-page .card__container {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
/* end of work-page */
/* New Client page */
.client-page {
  width: 100%;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.client-page .top-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 75px;
}
.client-page .top__title {
  color: var(--H1, #0A102F);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; /* 166.667% */
}
.client-page .top__title span {
  color: var(--Primary-Color, #0393FF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
}
.client-page .content__text {
  width: 1140px;
  color: var(--H1, #0A102F);
  text-align: center;
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
  padding-bottom: 79px;
}
.client-page .bottom-content-1 {
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
}
.client-page .bottom-content-2 {
  display: flex;
  justify-content: center;
  padding-bottom: 114px;
}
.client-page .circle__content {
  width: 189px;
  height: 100px;
  fill: var(--Content, #ffffff);
  display: flex;
  justify-content: center;
  align-items: center;
}
.client-page .client__showplace {
  display: none;
}

/* Responsive client-page */
@media only screen and (max-width: 1199px) {
  .client-page .content__text {
    width: 900px;
  }
  .client-page .circle__content {
    width: 150px;
  }
  .client-page .circle__content img {
    width: 140px;
  }
}
@media only screen and (max-width: 991px) {
  .client-page .content__text {
    width: 700px;
  }
  .client-page .bottom-content-1 {
    padding-bottom: 20px;
  }
  .client-page .circle__content {
    width: 120px;
  }
  .client-page .circle__content img {
    width: 110px;
  }
}
@media only screen and (max-width: 767px) {
  .client-page {
    background: var(--White, #F2F2F2);
  }
  .client-page .top-content {
    padding-top: 60px;
  }
  .client-page .top__title {
    display: none;
  }
  .client-page .content__text {
    display: none;
  }
  .client-page .bottom-content-1 {
    display: none;
  }
  .client-page .bottom-content-2 {
    display: none;
  }
  .client-page .client__showplace {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .client-page .client__showplace .company__logoblock {
    display: flex;
    width: 100%;
    gap: 30px;
    align-items: center;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-x: scroll;
    padding-left: 33px;
    padding-right: 15px;
  }
  .client-page .client__showplace .company__logoblock::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }
  .client-page .client__showplace .company__logo {
    display: block;
    width: 189px;
  }
  .client-page .client__showplace .client__word {
    color: #0393FF;
    font-family: "Baloo";
    font-size: 49px;
    font-style: normal;
    font-weight: 400;
    line-height: 120px; /* 240% */
    opacity: 0.06;
    z-index: 1;
    margin-top: -10px;
    padding-bottom: 60px;
  }
}
.client-second {
  width: 100%;
  background: var(--H1, #0A102F);
  display: grid;
  justify-content: center;
  align-content: center;
  /* .mobile__topic{
    display: none;
  }

  .mobile__content {
    display: none;
  } */
}
.client-second .topic__block {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 156px;
}
.client-second .topic__title {
  color: var(--Word-Font, #FFF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; /* 166.667% */
}
.client-second .topic__title span {
  color: var(--Primary-Color, #0393FF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
}
.client-second .topic__content {
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
}
.client-second form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.client-second input[type=text] {
  width: 489px;
  height: 60px;
  flex-shrink: 0;
  background-image: linear-gradient(#0A102F, #0A102F), linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-width: 3px;
  border-image-slice: 1;
  border-radius: 12px;
  outline: none;
  /* font */
  color: rgba(242, 242, 242, 0.5);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
  padding: 11px 20px;
}
.client-second input[type=text]:focus {
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-width: 3px;
  border-image-slice: 1;
}
.client-second textarea {
  max-width: 489px;
  min-width: 489px;
  width: 100%;
  height: 240px;
  flex-shrink: 0;
  background-image: linear-gradient(#0A102F, #0A102F), linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 3px solid;
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-radius: 12px;
  outline: none;
  /* font */
  color: rgba(242, 242, 242, 0.5);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
  padding: 11px 20px;
}
.client-second textarea:focus {
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-width: 3px;
  border-image-slice: 1;
}
.client-second input[type=submit] {
  display: flex;
  padding: 21px 44px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 0px;
  border-radius: 48px;
  background: var(--Primary-Color, #0393FF);
  /* font */
  color: #FFF;
  font-family: "Oxygen";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 16.8px */
  margin-top: 38px;
}
.client-second input[type=submit]:hover {
  background-image: linear-gradient(to right, #0393FF 0%, #9747FF 84.87%);
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.client-second .image__content {
  display: flex;
  justify-content: center;
  padding: 60px 0px 49px 0px;
}
.client-second .image__size {
  width: 435px;
  height: 368px;
  margin: 40px 0px 0px 120px;
}
.client-second .mobile__topblock {
  display: none;
}

/* Responsive client-second */
@media only screen and (max-width: 1199px) {
  .client-second .topic__block {
    padding-left: 45px;
  }
  .client-second .image__size {
    width: 340px;
    height: 290px;
    margin-left: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .client-second .topic__block {
    padding-left: 30px;
  }
  .client-second input[type=text] {
    width: 350px;
    height: 60px;
    font-size: 16px;
  }
  .client-second textarea {
    max-width: 350px;
    min-width: 350px;
    width: 100%;
    height: 200px;
    font-size: 16px;
    padding-left: 11px;
  }
  .client-second .image__content {
    padding-left: 70px;
  }
  .client-second .image__size {
    width: 300px;
    height: 250px;
    margin-left: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .client-second .topic__block {
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 26px 24px 0px 24px;
  }
  .client-second .topic__title {
    display: none;
  }
  .client-second .topic__content {
    display: none;
  }
  .client-second .image__content {
    display: flex;
    justify-content: center;
    padding-left: 0px;
  }
  .client-second input[type=text] {
    max-width: 342px;
    width: 100%;
    height: 60px;
  }
  .client-second textarea {
    max-width: 342px;
    min-width: 342px;
    width: 100%;
    padding-right: 22px;
  }
  .client-second input[type=submit] {
    align-self: flex-start;
  }
  .client-second .image__size {
    display: none;
  }
  .client-second .mobile__topblock {
    display: block;
  }
  .client-second .mobile__topic {
    display: flex;
    color: var(--Word-Font, #FFF);
    font-family: "Baloo";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .client-second .mobile__topic span {
    color: var(--Primary-Color, #0393FF);
    font-family: "Baloo";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .client-second .mobile__content {
    display: flex;
    max-width: 480px;
    width: 100%;
    color: var(--Word-Font, #FFF);
    font-family: "Oxygen";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 162.5% */
    padding-top: 10px;
  }
}
@media only screen and (max-width: 372px) {
  .client-second input[type=text] {
    max-width: 272px;
    width: 100%;
    height: 60px;
  }
  .client-second textarea {
    max-width: 272px;
    min-width: 272px;
    width: 100%;
  }
}
/* end of client page */
/* career page */
.career-page {
  background-color: var(--H1, #0A102F);
  background-image: url("../assets/images/header-blue-shadow.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 200px;
  width: 100%;
  padding-top: 200px;
  /* new form of collapsible  */
  /* .lbl-toggle::before {  
    display: inline-box;
    transform: translateY(-2px);
    transition: transform 0.1s ease-out;
  }  */
  /* .toggle:checked + .lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  } */
}
.career-page .top__block {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.career-page .top__title {
  color: var(--Word-Font, #FFF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.career-page .top__title span {
  color: var(--Primary-Color, #0393FF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.career-page .top__content {
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
}
.career-page .top__content a {
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 38px;
  text-decoration-line: underline;
}
.career-page .top__button {
  display: flex;
  padding: 8px 55px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border: 0px;
  border-radius: 48px;
  background: var(--Primary-Color, #0393FF);
  margin-top: 30px;
  margin-bottom: 60px;
  text-decoration: none;
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px; /* 357.143% */
}
.career-page .top__button:hover {
  background-image: linear-gradient(to right, #0393FF 0%, #9747FF 84.87%);
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.career-page .top__contain {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  padding-top: 100px;
}
.career-page .contain__box {
  max-width: 320px;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
  padding-top: 50px;
}
.career-page .contain__box span {
  color: #FFF;
  font-family: "Baloo";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.career-page .box__images {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  margin-bottom: 15px;
}
.career-page .center__block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.career-page .center__title {
  color: var(--Word-Font, #FFF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; /* 166.667% */
  padding-top: 156px;
}
.career-page .center__title span {
  color: var(--Primary-Color, #0393FF);
  font-size: 30px;
}
.career-page .center__content {
  width: 819px;
  color: #FFF;
  text-align: center;
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
  padding-bottom: 52px;
}
.career-page .center__content a {
  font-family: "Oxygen";
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}
.career-page .plus__button {
  height: 30px;
  width: 30px;
  border: 2px solid white;
  border-radius: 50%;
  outline: none;
  background-color: #9747FF;
  padding: 6px;
  display: block;
  margin-right: 66px;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
}
.career-page .line-wrapper {
  position: relative;
  top: 5px;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.career-page .horizontal, .career-page .vertical {
  width: 100%;
  height: 2px;
  background-color: rgb(255, 255, 255);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.career-page .horizontal {
  position: relative;
  top: 1px;
}
.career-page .vertical {
  position: relative;
  bottom: 1px;
  transform: rotate(90deg);
}
.career-page .line-wrapper.open {
  transform: rotate(180deg);
}
.career-page .vertical.open {
  transform: rotate(0deg);
}
.career-page .wrap-collabsible {
  width: calc(100% - 48px);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  background: var(--pruple-gradient, linear-gradient(90deg, #0393FF 0%, #9747FF 84.87%));
}
.career-page input[type=checkbox] {
  display: none;
}
.career-page .lbl-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FFF;
  font-family: "Baloo";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px;
  padding: 31px 0px 27px 65px;
  cursor: pointer;
}
.career-page .collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.career-page .toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 5000px;
}
.career-page .collapsible-content .content-inner {
  width: 100%;
  color: #FFF;
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px;
  padding: 30px 65px;
}
.career-page .content-inner ul {
  padding: 10px 0px 60px 90px;
}
.career-page .bottom__block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.career-page .bottom__title {
  color: var(--Word-Font, #FFF);
  text-align: center;
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 58px;
  padding-top: 157px;
}
.career-page .bottom__title span {
  color: #0393FF;
}
.career-page .bottom__content {
  width: 702px;
  color: var(--Word-Font, #FFF);
  text-align: center;
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
}
.career-page .bottom__contain {
  display: flex;
  flex-direction: column;
  padding-top: 80px;
  padding-bottom: 110px;
}
.career-page .bottom__toggle {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 20px 0px;
}
.career-page .bottom__dropdown {
  display: inline-flex;
  justify-content: space-between;
  width: 610px;
  height: 60px;
  background-color: #0A102F;
  align-items: center;
  border: 0px;
  cursor: pointer;
  /* font */
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 24px */
}
.career-page .image__vector {
  width: 12px;
  height: 6px;
  flex-shrink: 0;
  stroke-width: 4px;
  stroke: var(--Primary-Color, #0393FF);
}
.career-page .bottom__innercontent {
  width: 600px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /* font */
  color: var(--H1, #ffffff);
  font-family: "Oxygen";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Responsive of career page */
@media only screen and (max-width: 1199px) {
  .career-page .top__title {
    padding: 0px 24px 0px 31px;
  }
  .career-page .top__content {
    padding: 0px 24px 0px 31px;
  }
  .career-page .top__button {
    margin: 30px 20px 60px 24px;
  }
  .career-page .top__title-2 {
    padding: 0px 24px 0px 31px;
  }
  .career-page .top__content-2 {
    padding: 0px 24px 100px 31px;
  }
  .career-page .top__contain {
    gap: 20px;
  }
  .career-page .contain__box {
    width: 280px;
  }
}
@media only screen and (max-width: 991px) {
  .career-page .contain__box {
    font-size: 16px;
  }
  .career-page .contain__box span {
    font-size: 18px;
  }
  .career-page .center__content {
    width: 720px;
  }
}
@media only screen and (max-width: 767px) {
  .career-page {
    padding-top: 150px;
  }
  .career-page .top__title {
    font-size: 20px;
    padding: 0px 24px;
  }
  .career-page .top__title span {
    font-size: 20px;
  }
  .career-page .top__content {
    font-size: 16px;
    padding: 0px 24px;
  }
  .career-page .top__content a {
    font-size: 16px;
  }
  .career-page .top__button {
    padding: 5px 26px;
    margin-left: 20px;
  }
  .career-page .top__contain {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 50px 24px 0px 24px;
  }
  .career-page .contain__box {
    max-width: 1140px;
    width: 100%;
    align-items: center;
    padding-top: 20px;
  }
  .career-page .center__title {
    font-size: 20px;
    padding-top: 98px;
  }
  .career-page .center__title span {
    font-size: 20px;
  }
  .career-page .center__content {
    max-width: 700px;
    min-width: 300px;
    width: 100%;
    padding: 0px 24px 52px 24px;
    font-size: 16px;
  }
  .career-page .center__content a {
    font-size: 16px;
  }
  .career-page .plus__button {
    padding: 2px;
    margin-right: 5px;
    width: 22px;
    height: 22px;
  }
  .carrer-page .line-wrapper {
    top: 4px;
  }
  .career-page .wrap-collabsible {
    width: calc(100% - 48px);
    align-items: center;
  }
  .career-page .lbl-toggle {
    width: 100%;
    font-size: 16px;
    padding: 20px 25px;
  }
  .career-page .content-inner {
    font-size: 16px;
    padding: 30px 0px;
  }
  .career-page .collapsible-content .content-inner {
    width: 100%;
    font-size: 16px;
    padding: 30px 25px;
  }
  .career-page .content-inner ul {
    padding: 10px 0px 30px 40px;
  }
  .career-page .bottom__title {
    font-size: 20px;
    padding-top: 65px;
  }
  .career-page .bottom__content {
    max-width: 700px;
    min-width: 300px;
    width: 100%;
    padding: 0px 24px;
    font-size: 16px;
  }
  .career-page .bottom__contain {
    padding: 80px 24px 65px 24px;
    align-items: center;
  }
  .career-page .bottom__toggle {
    max-width: 600px;
    padding: 20px 0px;
  }
  .career-page .bottom__dropdown {
    width: 100%;
    font-size: 16px;
    padding-right: 0px;
    text-align: left;
  }
  .career-page .bottom__innercontent {
    width: 100%;
    font-size: 14px;
  }
}
/* end of career page */
/* contact us page */
.contact-page {
  width: 100%;
  background-color: var(--H1, #0A102F);
  background-image: url("../assets/images/header-blue-shadow.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 200px;
  padding-top: 200px;
  /* .container:hover input ~ .checkmark {
    background-color: #ccc;
  } */
}
.contact-page .top__block {
  display: flex;
  flex-direction: column;
}
.contact-page .top__title {
  color: var(--Word-Font, #FFF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; /* 166.667% */
}
.contact-page .top__title span {
  color: var(--Primary-Color, #0393FF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
}
.contact-page .top__content {
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
}
.contact-page .center__block {
  display: flex;
  justify-content: center;
}
.contact-page .center__leftcontent {
  display: flex;
  padding-top: 105px;
}
.contact-page .form-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-page input[type=text] {
  width: 489px;
  height: 60px;
  flex-shrink: 0;
  background-image: linear-gradient(#0A102F, #0A102F), linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-width: 3px;
  border-image-slice: 1;
  border-radius: 12px;
  outline: none;
  /* font */
  color: rgba(242, 242, 242, 0.5);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
  padding: 11px 20px;
}
.contact-page input[type=text]:focus {
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-width: 3px;
  border-image-slice: 1;
}
.contact-page textarea {
  max-width: 489px;
  min-width: 489px;
  width: 100%;
  height: 240px;
  flex-shrink: 0;
  background-image: linear-gradient(#0A102F, #0A102F), linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 3px solid;
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-radius: 12px;
  outline: none;
  /* font */
  color: rgba(242, 242, 242, 0.5);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
  padding: 11px 20px;
}
.contact-page textarea:focus {
  border-image: linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  border-width: 3px;
  border-image-slice: 1;
}
.contact-page .center__rightcontent {
  display: flex;
  flex-direction: column;
  padding: 105px 0px 0px 73px;
}
.contact-page .checkbox__content {
  display: flex;
}
.contact-page .form-check-1 {
  display: flex;
  flex-direction: column;
}
.contact-page .form-check-2 {
  display: flex;
  flex-direction: column;
  padding-left: 50px;
}
.contact-page label {
  color: var(--Word-Font, #FFF);
  font-family: Oxygen;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
}
.contact-page .label__check {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.contact-page .label__check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.contact-page .checkmark {
  position: absolute;
  top: 10px;
  left: 0px;
  content: "\f00c";
  color: transparent;
  background: #0A102F;
  width: 20px;
  height: 20px;
  background-image: linear-gradient(#0A102F, #0A102F), linear-gradient(90.36deg, #0393FF 0%, #9747FF 84.87%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px solid;
}
.contact-page .container input:checked ~ .checkmark {
  background-color: #2196F3;
}
.contact-page .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.contact-page .container input:checked ~ .checkmark:after {
  display: block;
}
.contact-page .container .checkmark:after {
  left: 5px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.contact-page input[type=submit] {
  display: flex;
  width: 140px;
  height: 59px;
  padding: 21px 44px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 0px;
  border-radius: 48px;
  background: var(--Primary-Color, #0393FF);
  /* font */
  color: #FFF;
  font-family: "Oxygen";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 16.8px */
  margin-top: 74px;
}
.contact-page input[type=submit]:hover {
  background-image: linear-gradient(to right, #0393FF 0%, #9747FF 84.87%);
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.contact-page input[type=file] {
  color: #FFF;
  font-family: "Oxygen";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 16.8px */
  padding-top: 10px;
}
.contact-page .bottom__block {
  display: flex;
  flex-direction: column;
}
.contact-page .bottom__title {
  color: var(--Word-Font, #FFF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; /* 166.667% */
  padding-top: 100px;
  text-align: center;
}
.contact-page .bottom__title span {
  color: var(--Primary-Color, #0393FF);
  font-family: "Baloo";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
}
.contact-page .bottom__contents {
  display: flex;
  padding-bottom: 144px;
}
.contact-page .bottom__image {
  width: 400px;
  height: 380px;
  position: relative;
  /* margin-top: -600px;
  left: 50px; */
}
.contact-page .bottom__location-content {
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
  padding-left: 40px;
  padding-top: 84px;
}
.contact-page .bottom__location-content span {
  color: var(--Word-Font, #FFF);
  font-family: "Oxygen";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 38px; /* 190% */
}
.contact-page .bottom__contact {
  display: flex;
}
.contact-page .bottom__contact-content {
  color: var(--Word-Font, #FFF);
  font-family: Oxygen;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 38px; /* 190% */
  padding-top: 24px;
}
.contact-page .bottom__contact-content a {
  color: var(--Primary-Color, #0393FF);
  font-family: Oxygen;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 211.111% */
  text-decoration: none;
}
.contact-page .mobile__contents {
  display: none;
}

/* Responsive of contact page */
@media only screen and (max-width: 1199px) {
  .contact-page .top__title {
    padding: 0px 24px 0px 31px;
  }
  .contact-page .top__content {
    padding: 0px 24px 0px 31px;
  }
  .contact-page .center__leftcontent {
    padding-left: 18px;
  }
  .contact-page .center__rightcontent {
    padding-left: 40px;
  }
}
@media only screen and (max-width: 991px) {
  .contact-page input[type=text] {
    width: 350px;
  }
  .contact-page textarea {
    max-width: 350px;
    min-width: 350px;
  }
  .contact-page label {
    font-size: 16px;
  }
  .contact-page .label__check {
    font-size: 16px;
  }
  .contact-page .center__rightcontent {
    padding-left: 30px;
  }
  .contact-page .form-check-2 {
    padding-left: 20px;
  }
  .contact-page .bottom__image {
    width: 250px;
    height: 250px;
  }
  .contact-page .bottom__location-content {
    font-size: 16px;
    padding-top: 40px;
    padding-left: 20px;
  }
  .contact-page .bottom__contact-content {
    left: 61%;
    /* 63% */
    padding-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .contact-page {
    padding-top: 150px;
  }
  .contact-page .top__title {
    padding: 0px 24px;
    font-size: 20px;
  }
  .contact-page .top__title span {
    font-size: 20px;
  }
  .contact-page .top__content {
    padding: 0px 24px;
    font-size: 16px;
  }
  .contact-page .center__block {
    flex-direction: column;
    align-items: center;
  }
  .contact-page .center__leftcontent {
    max-width: 700px;
    padding-top: 77px;
    padding-left: 0px;
  }
  .contact-page input[type=text] {
    max-width: 342px;
    height: 60px;
  }
  .contact-page textarea {
    max-width: 342px;
    min-width: 342px;
    width: 100%;
    padding: 11px 20px;
  }
  .contact-page .center__rightcontent {
    padding: 28px 0px 0px 15px;
  }
  .contact-page label {
    font-size: 18px;
  }
  .contact-page .checkbox__content {
    flex-direction: column;
  }
  .contact-page .form-check-2 {
    padding-left: 0px;
  }
  .contact-page input[type=submit] {
    margin-top: 50px;
  }
  .contact-page .bottom__title {
    font-size: 20px;
  }
  .contact-page .bottom__contents {
    display: none;
  }
  .contact-page .mobile__contents {
    display: flex;
    flex-direction: column;
    padding: 40px 24px 0px 24px;
  }
  .contact-page .mobile__contents .mobile__location-content {
    color: var(--Word-Font, #FFF);
    font-family: "Oxygen";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 175% */
    padding-top: 15px;
  }
  .contact-page .mobile__contents .mobile__location-content span {
    font-size: 18px;
    font-weight: 700;
    line-height: 38px;
  }
  .contact-page .mobile__contents .mobile__contact-content {
    color: var(--Word-Font, #FFF);
    font-family: "Oxygen";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 38px; /* 237.5% */
    padding-top: 15px;
    padding-bottom: 59px;
  }
  .contact-page .mobile__contents .mobile__contact-content a {
    color: var(--Primary-Color, #0393FF);
    font-family: "Oxygen";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 38px; /* 237.5% */
  }
  .contact-page .mobile__contents .mobile__image {
    width: 261px;
    height: 241px;
    flex-shrink: 0;
    align-self: center;
  }
}
@media only screen and (max-width: 372px) {
  .contact-page input[type=text] {
    max-width: 272px;
    width: 100%;
    height: 60px;
  }
  .contact-page textarea {
    max-width: 272px;
    min-width: 272px;
    width: 100%;
  }
  .contact-page .center__rightcontent {
    width: 300px;
  }
}
/* end of contact page */
/* GET A QUOTE-page */
.get-a-quote {
  width: 100%;
  background-color: var(--H1, #0A102F);
  background-image: url("../assets/images/header-blue-shadow.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 200px;
}
.get-a-quote .get-a-quote__top {
  display: flex;
  flex-direction: column;
  padding-top: 200px;
}
.get-a-quote .get-a-quote__topic {
  font-family: "Baloo";
  font-size: 30px;
  font-weight: 400;
  line-height: 50px;
  color: #ffffff;
}
.get-a-quote .get-a-quote__topic span {
  font-family: "Baloo";
  color: rgb(3, 147, 255);
}
.get-a-quote .get-a-quote__content {
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 400;
  line-height: 38px;
  color: #ffffff;
  padding-bottom: 80px;
}
.get-a-quote .workflow__block {
  display: flex;
  flex-wrap: wrap;
  gap: 135px;
  padding-bottom: 200px;
}
.get-a-quote .workflow__process {
  display: flex;
  flex-direction: column;
  width: 289px;
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 400;
  line-height: 38px;
  color: #ffffff;
}
.get-a-quote .workflow__process span {
  font-family: "Baloo";
  font-size: 20px;
}
.get-a-quote .workflow__process img {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}
.get-a-quote .get-a-quote__bottom {
  width: 100%;
  background: rgb(242, 242, 242);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 150px 0px;
}
.get-a-quote .bottom__topic {
  font-family: "Baloo";
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  color: #000000;
}
.get-a-quote .bottom__topic span {
  color: rgb(3, 147, 255);
}
.get-a-quote .bottom__contain {
  font-family: "Oxygen";
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
  color: #000000;
}
.get-a-quote .bottom__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 237px;
  height: 48px;
  top: 16px;
  left: 46px;
  padding: 30px 24px 30px 32px;
  margin-top: 40px;
  border-radius: 48px;
  gap: 10px;
  background-color: #0393FF;
  border: 0px;
  text-decoration: none;
}
.get-a-quote .bottom__button a {
  font-family: "Oxygen";
  font-weight: 700;
  font-size: 14px;
  line-height: 50px;
  text-align: center;
  color: #ffffff;
}
.get-a-quote .bottom__button:hover {
  background: var(--pruple-gradient, linear-gradient(90deg, #0393FF 0%, #9747FF 84.87%));
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}

@media only screen and (max-width: 1199px) {
  .get-a-quote .get-a-quote__topic {
    padding: 0px 24px;
  }
  .get-a-quote .get-a-quote__content {
    padding: 0px 24px 80px 24px;
  }
  .get-a-quote .workflow__block {
    justify-content: center;
    gap: 40px;
    padding: 0px 24px 200px 24px;
  }
}
@media only screen and (max-width: 767px) {
  .get-a-quote .get-a-quote__top {
    padding-top: 150px;
  }
  .get-a-quote .get-a-quote__topic {
    font-size: 20px;
  }
  .get-a-quote .get-a-quote__content {
    font-size: 16px;
  }
  .get-a-quote .workflow__block {
    flex-direction: column;
    align-items: center;
  }
  .get-a-quote .workflow__process {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .get-a-quote .bottom__topic {
    font-size: 20px;
  }
  .get-a-quote .bottom__contain {
    text-align: center;
    width: 100%;
    font-size: 16px;
  }
  .get-a-quote .bottom__button {
    margin-top: 20px;
  }
}
/* end of GET A QUOTE page */
/* product page */
.product-page {
  width: 100%;
  background-color: #0A102F;
}
.product-page .mt-motor__top-background {
  background-image: url("../assets/images/mt-motor-page-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 673px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.product-page .mt-motor__top-background img {
  width: 804px;
  height: 603px;
  position: relative;
  top: 70px;
}
.product-page .beutea__top-background {
  background-image: url("../assets/images/beutea-top-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 673px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.product-page .beutea__top-background img {
  position: relative;
  top: 62px;
}
.product-page .yungkong__top-background {
  background-image: url("../assets/images/yungkong-top-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 673px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.product-page .yungkong__top-background img {
  position: relative;
  top: 62px;
}
.product-page .rentdeer__top-background {
  background-image: url("../assets/images/rentdeer-top-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 673px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.product-page .rentdeer__top-background img {
  position: relative;
  top: 62px;
}
.product-page .pigeon-wills__top-background {
  background-image: url("../assets/images/pigeon-wills-top-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 673px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.product-page .pigeon-wills__top-background img {
  position: relative;
  top: 62px;
}
.product-page .beer1602__top-background {
  background-image: url("../assets/images/1602-top-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 673px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.product-page .beer1602__top-background img {
  position: relative;
  top: 62px;
}
.product-page .applecrumby__top-background {
  background-image: url("../assets/images/applecrumby-top-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 673px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.product-page .applecrumby__top-background img {
  position: relative;
  top: 62px;
}
.product-page .ananta__top-background {
  background-image: url("../assets/images/ananta-top-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 673px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.product-page .ananta__top-background img {
  position: relative;
  top: 62px;
}
.product-page .jkjav__top-background {
  background-image: url("../assets/images/jkjav-top-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 673px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.product-page .jkjav__top-background img {
  position: relative;
  top: 62px;
}
.product-page .carbuyer__top-background {
  background-image: url("../assets/images/carbuyer-top-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 673px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.product-page .carbuyer__top-background img {
  position: relative;
  top: 62px;
}
.product-page .swift-hr__top-background {
  background-image: url("../assets/images/swift-hr-top-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 673px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.product-page .swift-hr__top-background img {
  position: relative;
  top: 62px;
}
.product-page .product__button-block {
  display: flex;
  justify-content: center;
  padding-top: 43px;
}
.product-page .product__button-view-website {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 26px;
  border: 0PX;
  background-color: rgb(3, 147, 255);
  padding: 15px 32px;
  font-family: "Oxygen";
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.product-page .product__button-view-website:hover {
  background: var(--pruple-gradient, linear-gradient(90deg, #0393FF 0%, #9747FF 84.87%));
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.product-page .product__top-block {
  display: flex;
  flex-direction: column;
  padding-top: 63px;
}
.product-page .content__block {
  display: inline-flex;
  justify-content: space-between;
}
.product-page .top__right-content {
  display: flex;
  flex-direction: column;
}
.product-page .product__automotive {
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  color: rgb(3, 147, 255);
}
.product-page .product__top-title h1 {
  font-family: "Baloo";
  font-size: 30px;
  font-weight: 400;
  line-height: 48px;
  color: #ffffff;
  padding-bottom: 11px;
}
.product-page .product__top-content {
  width: 771px;
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #ffffff;
}
.product-page .top__left-content {
  display: flex;
  flex-direction: column;
  padding-right: 24px;
  padding-top: 20px;
}
.product-page .product__top-contain {
  text-align: right;
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  color: #ffffff;
  padding-top: 78px;
}
.product-page .product__top-contain span {
  font-family: "Oxygen";
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  color: rgb(205, 205, 205);
}
.product-page .product__app-example {
  display: flex;
  align-items: center;
  padding: 100px 0px;
}
.product-page .product__app-example img {
  border-radius: 20px;
  width: 771px;
  height: 388px;
}
.product-page .product__app-function {
  font-family: "Oxygen";
  font-size: 18px;
  font-weight: 700;
  line-height: 50px;
  color: #ffffff;
  padding-left: 61px;
}
.product-page .product__app-function ul li {
  margin-left: 20px;
}
  .product-page .product__app-function ul li h3 {
    font-family: "Oxygen";
    font-size: 18px;
    font-weight: 400;
    line-height: 38px;
    color: #ffffff;
  }
.product-page .mt-motor__bottom-block {
  background-image: url("../assets/images/mt-bottom-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1272px;
  display: flex;
}
.product-page .beutea__bottom-block {
  background-image: url("../assets/images/beutea-bottom-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1302px;
  display: flex;
}
.product-page .yungkong__bottom-block {
  background-image: url("../assets/images/yungkong-bottom-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1272px;
  display: flex;
}
.product-page .rentdeer__bottom-block {
  background-image: url("../assets/images/rentdeer-bottom-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1302px;
  display: flex;
}
.product-page .pigeon-wills__bottom-block {
  background-image: url("../assets/images/pigeon-wills-bottom-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1275px;
  display: flex;
}
.product-page .beer1602__bottom-block {
  background-image: url("../assets/images/1602-bottom-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1272px;
  display: flex;
}
.product-page .applecrumby__bottom-block {
  background-image: url("../assets/images/applecrumby-bottom-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1272px;
  display: flex;
}
.product-page .ananta__bottom-block {
  background-image: url("../assets/images/ananta-bottom-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1272px;
  display: flex;
}
.product-page .jkjav__bottom-block {
  background-image: url("../assets/images/jkjav-bottom-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1306px;
  display: flex;
}
.product-page .carbuyer__bottom-block {
  background-image: url("../assets/images/carbuyer-bottom-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1272px;
  display: flex;
}
.product-page .swift-hr__bottom-block {
  background-image: url("../assets/images/swift-hr-bottom-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1302px;
  display: flex;
}
.product-page .image-container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  display: inline-flex;
  justify-content: center;
}
.product-page .bottom__left-image {
  max-width: 721px;
  width: 100%;
  height: 1151px;
  margin-top: 121px;
}
.product-page .bottom__right-image {
  max-width: 721px;
  width: 100%;
  height: 781px;
  margin: 492px 0px 0px -300px;
  box-shadow: -20px 10px 100px 0px rgba(0, 0, 0, 0.25);
}
.product-page .bottom__center-image {
  width: 767px;
  height: 921px;
  position: relative;
  top: 185px;
}
.product-page .bottom__right-image-yk {
  width: 721px;
  height: 364px;
  margin: 910px 0px 0px -300px;
}
.product-page .bottom__right-image-1602 {
  width: 721px;
  height: 526px;
  margin: 747px 0px 0px -300px;
}
.product-page .bottom__left-image-jkjav {
  max-width: 721px;
  width: 100%;
  height: 891px;
  margin-top: 250px;
}
.product-page .bottom__right-image-jkjav {
  max-width: 721px;
  width: 100%;
  height: 781px;
  margin: 512px 0px 0px -300px;
}
.product-page .product__pagination-block {
  display: flex;
  justify-content: center;
  padding-top: 100px;
}
.product-page .product__pagination-block img {
  width: 565px;
  height: 228px;
}
.product-page .pagination__prev {
  margin-right: 10px;
}
.product-page .pagination__next {
  margin: 0px;
}
.product-page .mt-motor__mobile-top {
  display: none;
}
.product-page .beutea__mobile-top {
  display: none;
}
.product-page .yungkong__mobile-top {
  display: none;
}
.product-page .rentdeer__mobile-top {
  display: none;
}
.product-page .pigeon-wills__mobile-top {
  display: none;
}
.product-page .beer1602__mobile-top {
  display: none;
}
.product-page .applecrumby__mobile-top {
  display: none;
}
.product-page .ananta__mobile-top {
  display: none;
}
.product-page .jkjav__mobile-top {
  display: none;
}
.product-page .carbuyer__mobile-top {
  display: none;
}
.product-page .swift-hr__mobile-top {
  display: none;
}
.product-page .mobile__content {
  display: none;
}
.product-page .mobile__bottom-left-image {
  display: none;
}
.product-page .mobile__bottom-right-image {
  display: none;
}
.product-page .mobile__bottom-left-image-yk {
  display: none;
}
.product-page .mobile__bottom-right-image-yk {
  display: none;
}
.product-page .mobile__bottom-left-image-pw {
  display: none;
}
.product-page .mobile__bottom-right-image-pw {
  display: none;
}
.product-page .mobile__bottom-left-image-1602 {
  display: none;
}
.product-page .mobile__bottom-right-image-1602 {
  display: none;
}
.product-page .mobile__bottom-right-image-applecrumby {
  display: none;
}
.product-page .mobile__bottom-right-image-ananta {
  display: none;
}
.product-page .mobile__pagination-block {
  display: none;
}

/* responsive of product pages */
@media only screen and (max-width: 1199px) {
  .product-page .product__top-block {
    padding: 52px 24px 0px 24px;
  }
  .product-page .product__top-content {
    width: 650px;
  }
  .product-page .product__app-example {
    padding: 100px 24px;
  }
  .product-page .product__app-example img {
    width: 600px;
    height: 310px;
  }
  .product-page .mt-motor__bottom-block {
    height: 1086px;
  }
  .product-page .yungkong__bottom-block {
    height: 1086px;
  }
  .product-page .pigeon-wills__bottom-block {
    height: 1094px;
  }
  .product-page .beer1602__bottom-block {
    height: 1086px;
  }
  .product-page .applecrumby__bottom-block {
    height: 1086px;
  }
  .product-page .ananta__bottom-block {
    height: 1086px;
  }
  .product-page .jkjav__bottom-block {
    height: 1086px;
  }
  .product-page .carbuyer__bottom-block {
    height: 1086px;
  }
  .product-page .bottom__left-image {
    max-width: 600px;
    height: 950px;
    margin-top: 128px;
  }
  .product-page .bottom__right-image {
    max-width: 600px;
    height: 650px;
    margin-top: 429px;
  }
  .product-page .bottom__right-image-yk {
    width: 600px;
    height: 364px;
    margin-top: 714px;
  }
  .product-page .bottom__right-image-1602 {
    max-width: 621px;
    height: 426px;
    margin-top: 653px;
  }
  .product-page .bottom__left-image-jkjav {
    max-width: 621px;
    height: 790px;
    margin-top: 165px;
  }
  .product-page .bottom__right-image-jkjav {
    width: 601px;
    height: 640px;
    margin-top: 440px;
  }
  .product-page .product__pagination-block {
    padding: 100px 24px 0px 24px;
  }
  .product-page .product__pagination-block img {
    width: 450px;
    height: 200px;
  }
}
@media only screen and (max-width: 991px) {
  .product-page .mt-motor__top-background img {
    width: 700px;
  }
  .product-page .beutea__top-background img {
    width: 704px;
    height: 503px;
  }
  .product-page .yungkong__top-background img {
    width: 704px;
    height: 503px;
    top: 101px;
  }
  .product-page .rentdeer__top-background img {
    width: 704px;
    height: 503px;
  }
  .product-page .pigeon-wills__top-background img {
    width: 704px;
    height: 503px;
    top: 101px;
  }
  .product-page .beer1602__top-background img {
    width: 704px;
    height: 503px;
    top: 101px;
  }
  .product-page .applecrumby__top-background img {
    width: 704px;
    height: 503px;
    top: 101px;
  }
  .product-page .ananta__top-background img {
    width: 704px;
    height: 503px;
    top: 101px;
  }
  .product-page .jkjav__top-background img {
    width: 704px;
    height: 503px;
    top: 101px;
  }
  .product-page .carbuyer__top-background img {
    width: 704px;
    height: 503px;
    top: 101px;
  }
  .product-page .swift-hr__top-background img {
    width: 704px;
    height: 503px;
  }
  .product-page .product__top-content {
    width: 480px;
  }
  .product-page .product__top-contain {
    padding-top: 30px;
  }
  .product-page .product__app-example img {
    width: 400px;
    height: 220px;
  }
  .product-page .mt-motor__bottom-block {
    height: 934px;
  }
  .product-page .yungkong__bottom-block {
    height: 934px;
  }
  .product-page .pigeon-wills__bottom-block {
    height: 940px;
  }
  .product-page .beer1602__bottom-block {
    height: 934px;
  }
  .product-page .applecrumby__bottom-block {
    height: 934px;
  }
  .product-page .ananta__bottom-block {
    height: 940px;
  }
  .product-page .jkjav__bottom-block {
    height: 940px;
  }
  .product-page .carbuyer__bottom-block {
    height: 940px;
  }
  .product-page .bottom__left-image {
    max-width: 450px;
    height: 801px;
  }
  .product-page .bottom__right-image {
    max-width: 450px;
    height: 500px;
    margin-left: -210px;
  }
  .product-page .bottom__center-image {
    width: 637px;
    height: 788px;
  }
  .product-page .bottom__right-image-yk {
    max-width: 450px;
    height: 264px;
    margin-top: 665px;
    margin-left: -210px;
  }
  .product-page .bottom__right-image-1602 {
    max-width: 488px;
    height: 376px;
    margin-top: 554px;
    margin-left: -210px;
  }
  .product-page .bottom__left-image-jkjav {
    max-width: 511px;
    height: 670px;
    margin-top: 165px;
  }
  .product-page .bottom__right-image-jkjav {
    width: 481px;
    height: 520px;
    margin-top: 409px;
  }
  .product-page .product__pagination-block img {
    width: 350px;
    height: 170px;
  }
}
@media only screen and (max-width: 767px) {
  .product-page .mt-motor__top-background {
    display: none;
  }
  .product-page .beutea__top-background {
    display: none;
  }
  .product-page .yungkong__top-background {
    display: none;
  }
  .product-page .rentdeer__top-background {
    display: none;
  }
  .product-page .pigeon-wills__top-background {
    display: none;
  }
  .product-page .beer1602__top-background {
    display: none;
  }
  .product-page .applecrumby__top-background {
    display: none;
  }
  .product-page .ananta__top-background {
    display: none;
  }
  .product-page .jkjav__top-background {
    display: none;
  }
  .product-page .carbuyer__top-background {
    display: none;
  }
  .product-page .swift-hr__top-background {
    display: none;
  }
  .product-page .mt-motor__mobile-top {
    background-image: url("../assets/images/mt-motor-page-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 767px;
    width: 100%;
    height: 570px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-page .mt-motor__mobile-top img {
    position: relative;
    top: 120px;
  }
  .product-page .beutea__mobile-top {
    background-image: url("../assets/images/beutea-top-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 767px;
    width: 100%;
    height: 570px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-page .beutea__mobile-top img {
    position: relative;
    top: 120px;
  }
  .product-page .yungkong__mobile-top {
    background-image: url("../assets/images/yungkong-mobile-top-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 767px;
    width: 100%;
    height: 570px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-page .yungkong__mobile-top img {
    position: relative;
    top: 120px;
  }
  .product-page .rentdeer__mobile-top {
    background-image: url("../assets/images/rentdeer-top-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 767px;
    width: 100%;
    height: 570px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-page .rentdeer__mobile-top img {
    position: relative;
    top: 120px;
  }
  .product-page .pigeon-wills__mobile-top {
    background-image: url("../assets/images/pigeon-wills-top-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 767px;
    width: 100%;
    height: 570px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-page .pigeon-wills__mobile-top img {
    position: relative;
    top: 120px;
  }
  .product-page .beer1602__mobile-top {
    background-image: url("../assets/images/1602-top-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 767px;
    width: 100%;
    height: 570px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-page .beer1602__mobile-top img {
    position: relative;
    top: 120px;
  }
  .product-page .applecrumby__mobile-top {
    background-image: url("../assets/images/applecrumby-top-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 767px;
    width: 100%;
    height: 570px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-page .applecrumby__mobile-top img {
    position: relative;
    top: 120px;
  }
  .product-page .ananta__mobile-top {
    background-image: url("../assets/images/ananta-top-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 767px;
    width: 100%;
    height: 570px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-page .ananta__mobile-top img {
    position: relative;
    top: 120px;
  }
  .product-page .jkjav__mobile-top {
    background-image: url("../assets/images/jkjav-top=background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 767px;
    width: 100%;
    height: 570px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-page .jkjav__mobile-top img {
    position: relative;
    top: 120px;
  }
  .product-page .carbuyer__mobile-top {
    background-image: url("../assets/images/carbuyer-top-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 767px;
    width: 100%;
    height: 570px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-page .carbuyer__mobile-top img {
    position: relative;
    top: 120px;
  }
  .product-page .swift-hr__mobile-top {
    background-image: url("../assets/images/swift-hr-top-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 767px;
    width: 100%;
    height: 570px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-page .swift-hr__mobile-top img {
    position: relative;
    top: 120px;
  }
  .product-page .content__block {
    display: none;
  }
  .product-page .product__automotive h2 {
    font-size: 16px;
    padding: 0px;
    margin: 0px;
  }
  .product-page .mobile__content {
    display: flex;
    flex-direction: column;
    padding: 0 24px;
  }
  .product-page .mobile__content .product__mobile-title {
    font-family: "Baloo";
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #ffffff;
    padding-bottom: 28px;
  }
  .product-page .mobile__content .product__mobile-contain {
    font-family: "Oxygen";
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    padding-bottom: 10px;
  }
  .product-page .mobile__content .product__mobile-contain span {
    font-family: "Oxygen";
    font-size: 16px;
    font-weight: 400;
    color: rgb(205, 205, 205);
  }
  .product-page .mobile__content .product__mobile-content {
    font-family: "Oxygen";
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #ffffff;
    padding-top: 30px;
  }
  .product-page .product__app-example {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 24px;
  }
  .product-page .product__app-example img {
    max-width: 342px;
    width: 100%;
    max-height: 235px;
    height: 100%;
    align-self: center;
  }
  .product-page .product__app-function {
    padding: 30px 0px 0px 10px;
  }
  .product-page .product__app-function ul {
    padding: 10px 0px 0px 0px;
  }
  .product-page .mt-motor__bottom-block {
    background-image: url("../assets/images/mt-bottom-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 665px;
    display: flex;
    align-items: flex-end;
  }
  .product-page .beutea__bottom-block {
    background-image: url("../assets/images/beutea-bottom-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 665px;
  }
  .product-page .yungkong__bottom-block {
    height: 585px;
    display: flex;
    align-items: flex-end;
  }
  .product-page .rentdeer__bottom-block {
    background-image: url("../assets/images/rentdeer-bottom-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 665px;
  }
  .product-page .pigeon-wills__bottom-block {
    background-image: url("../assets/images/pigeon-wills-bottom-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 675px;
    display: flex;
    align-items: flex-end;
  }
  .product-page .beer1602__bottom-block {
    background-image: url("../assets/images/1602-bottom-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px;
    display: flex;
    align-items: flex-end;
  }
  .product-page .applecrumby__bottom-block {
    height: 600px;
    display: flex;
    align-items: flex-end;
  }
  .product-page .ananta__bottom-block {
    height: 600px;
    display: flex;
    align-items: flex-end;
  }
  .product-page .jkjav__bottom-block {
    height: 600px;
  }
  .product-page .carbuyer__bottom-block {
    background-image: url("../assets/images/carbuyer-bottom-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 665px;
    display: flex;
    align-items: flex-end;
  }
  .product-page .swift-hr__bottom-block {
    background-image: url("../assets/images/swift-hr-bottom-background-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 665px;
  }
  .product-page .bottom__left-image {
    display: none;
  }
  .product-page .bottom__right-image {
    display: none;
  }
  .product-page .bottom__right-image-yk {
    display: none;
  }
  .product-page .bottom__right-image-1602 {
    display: none;
  }
  .product-page .mobile__bottom-left-image {
    display: block;
    height: 540px;
    margin-top: 51px;
  }
  .product-page .mobile__bottom-right-image {
    display: block;
    height: 262px;
    margin: 330px 0px 0px -150px;
    box-shadow: -6px 3px 33px 0px rgba(0, 0, 0, 0.25);
  }
  .product-page .mobile__bottom-left-image-yk {
    display: block;
    height: 540px;
    margin-top: 40px;
  }
  .product-page .mobile__bottom-right-image-yk {
    display: block;
    width: 256px;
    height: 262px;
    margin: 318px 0px 0px -190px;
  }
  .product-page .mobile__bottom-left-image-pw {
    display: block;
    height: 540px;
    margin-top: 111px;
  }
  .product-page .mobile__bottom-right-image-pw {
    display: block;
    width: 242px;
    height: 243px;
    margin: 408px 0px 0px -170px;
  }
  .product-page .mobile__bottom-left-image-1602 {
    display: block;
    height: 540px;
    margin-top: 84px;
  }
  .product-page .mobile__bottom-right-image-1602 {
    display: block;
    width: 242px;
    height: 243px;
    margin: 381px 0px 0px -180px;
  }
  .product-page .bottom__left-image-jkjav {
    max-width: 254px;
    height: 314px;
    margin-top: 50px;
  }
  .product-page .bottom__right-image-jkjav {
    width: 254px;
    height: 278px;
    margin-top: 315px;
    margin-left: -175px;
  }
  .product-page .mobile__bottom-right-image-applecrumby {
    display: block;
    height: 262px;
    margin: 329px 0px 0px -185px;
    box-shadow: -6px 3px 33px 0px rgba(0, 0, 0, 0.25);
  }
  .product-page .mobile__bottom-right-image-ananta {
    display: block;
    height: 262px;
    margin: 329px 0px 0px -195px;
    box-shadow: -6px 3px 33px 0px rgba(0, 0, 0, 0.25);
  }
  .product-page .bottom__center-image {
    width: 329px;
    height: 393px;
    top: 140px;
  }
  .product-page .product__pagination-block {
    display: none;
  }
  .product-page .mobile__pagination-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 2fr));
    padding: 40px 24px;
    gap: 10px;
    justify-items: center;
  }
  .product-page .mobile__pagination-block img {
    max-width: 342px;
    width: 100%;
    height: 100%;
  }
  .product-page .pagination__prev {
    margin-right: 0px;
  }
}
@media only screen and (max-width: 530px) {
  .product-page .mt-motor__pagination-block a {
    max-width: 342px;
    width: 100%;
  }
  .product-page .mobile__pagination-block {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 372px) {
  .product-page .mobile__bottom-left-image {
    margin-top: 111px;
  }
  .product-page .mobile__bottom-right-image {
    margin-top: 389px;
    margin-left: -200px;
  }
  .product-page .mobile__bottom-right-image-yk {
    margin: 318px 0px 0px -230px;
  }
  .product-page .mobile__bottom-right-image-pw {
    margin-left: -225px;
  }
  .product-page .mobile__bottom-right-image-1602 {
    margin-left: -225px;
  }
  .product-page .mobile__bottom-right-image-applecrumby {
    margin-top: 389px;
    margin-left: -245px;
  }
  .product-page .mobile__bottom-right-image-ananta {
    margin-top: 389px;
    margin-left: -245px;
  }
  .product-page .bottom__right-image-jkjav {
    margin-left: -210px;
  }
  .product-page .bottom__center-image {
    width: 289px;
    height: 359px;
  }
}
/* end of product pages */