@charset "UTF-8";
/* Importing the files in the abstracts folder. */
:root {
  --oct-primary: #5f57ff;
  --oct-primary-light: #8d88f2;
  --oct-dark: #090909;
  --oct-gray50: #F9F9F9;
  --oct-gray100: #d9d9d9;
  --oct-gray200: #b5b5b5;
  --oct-gray300: #858585;
  --oct-gray400: #B3B3B3;
  --oct-gray500: #434343;
  --oct-gray600: #C9C9C9;
  --oct-gray700: #E0E0E0;
  --oct-gray800: #3B3B41;
  --oct-orange-light: #FFE1DE;
  --oct-orange-light2: #E7C0BD;
  --oct-blue-light: #95D4FF;
  --oct-blue-light2: #C1E6FF;
  --oct-pink-light: #C8ADFF;
  --oct-pink-light2: #DECEFF;
  --oct-green-light: #D5EE98;
  --oct-green-light2: #BDD682;
  --oct-gray900: #111112;
  --oct-white: #fff;
  --oct-ff-bricolage: "Bricolage Grotesque", serif;
  --oct-ff-satoshi: "Satoshi";
  --otc-border-radius: 24px;
}

.container {
  max-width: 1266px !important;
}

/* Mask image */
/* select parent */
:root {
  --oct-primary: #5f57ff;
  --oct-primary-light: #8d88f2;
  --oct-dark: #090909;
  --oct-gray50: #F9F9F9;
  --oct-gray100: #d9d9d9;
  --oct-gray200: #b5b5b5;
  --oct-gray300: #858585;
  --oct-gray400: #B3B3B3;
  --oct-gray500: #434343;
  --oct-gray600: #C9C9C9;
  --oct-gray700: #E0E0E0;
  --oct-gray800: #3B3B41;
  --oct-orange-light: #FFE1DE;
  --oct-orange-light2: #E7C0BD;
  --oct-blue-light: #95D4FF;
  --oct-blue-light2: #C1E6FF;
  --oct-pink-light: #C8ADFF;
  --oct-pink-light2: #DECEFF;
  --oct-green-light: #D5EE98;
  --oct-green-light2: #BDD682;
  --oct-gray900: #111112;
  --oct-white: #fff;
  --oct-ff-bricolage: "Bricolage Grotesque", serif;
  --oct-ff-satoshi: "Satoshi";
  --otc-border-radius: 24px;
}

.container {
  max-width: 1266px !important;
}

.octopos-header {
  margin-top: 24px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  padding-top: 16px;
  padding-bottom: 16px;
  transition: margin-top 0.3s ease, padding-top 0.3s ease, padding-bottom 0.3s ease; /* Combine all transitions */
}
.octopos-header .menu-main-menu-container {
  display: flex;
  align-items: center;
}
.octopos-header .menu-main-menu-container .menu-main {
  display: flex;
  align-items: center;
  gap: 12px !important;
  margin-bottom: 0px !important;
}
.octopos-header .menu-main-menu-container .menu-main .menu-item {
  padding: 0px 12px;
}
.octopos-header .menu-main-menu-container .menu-main .menu-item a {
  color: var(--oct-white) !important;
  text-decoration: none !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}
.octopos-header .menu-main-menu-container .menu-main > .menu-item {
  position: relative;
}
.octopos-header .menu-main-menu-container .menu-main > .menu-item > .sub-menu {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 100%;
  display: none;
  padding: 5px 0 0 15px;
  white-space: nowrap;
  list-style: none;
}
.octopos-header .menu-main-menu-container .menu-main > .menu-item > .sub-menu .menu-item a {
  font-size: 16px !important;
}
.octopos-header .menu-main-menu-container .menu-main > .menu-item > .sub-menu .menu-item a:hover {
  text-decoration: underline;
}
.octopos-header .menu-main-menu-container .menu-main > .menu-item:hover > .sub-menu {
  display: block;
}

.scrolled {
  margin-top: 0px !important;
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: rgba(17, 17, 17, 0.7960784314);
}

.menu-button {
  height: 48px;
  width: 48px;
  border: 0px;
  background-color: rgba(255, 255, 255, 0.0745098039);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-button .ic-hamburger {
  height: 28px;
  width: 28px;
}

.offcanvas {
  background-color: var(--oct-gray900) !important;
}
.offcanvas .btn-close {
  --bs-btn-close-color: var(--oct-white) !important;
  --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-x%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M18%206l-12%2012%22%2F%3E%3Cpath%20d%3D%22M6%206l12%2012%22%2F%3E%3C%2Fsvg%3E");
}

@media (max-width: 992px) {
  .octopos-header {
    margin-top: 6px;
  }
  .menu-main-menu-container {
    justify-content: center;
  }
  .menu-main {
    flex-direction: column !important;
    display: none;
    align-items: start;
    justify-content: start;
    padding-bottom: 36px;
  }
  .menu-main .menu-item {
    padding: 0px !important;
    text-align: start !important;
  }
}
.social-box {
  height: 38px;
  width: 38px;
  border-radius: 50%;
  background-color: var(--oct-gray900);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.btn {
  outline: none;
  border: 0px;
  background-color: transparent;
  height: auto;
  min-height: auto;
  padding: 0px;
  transition: transform ease-in-out 0.6s;
}
.btn:hover {
  transform: scale(1.02);
}
.btn.btn-primary {
  display: flex;
  align-items: center;
  border-radius: 40px !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  background-color: var(--oct-primary) !important;
  padding: 4px !important;
}
.btn.btn-primary .btn-label {
  padding: 0px 18px !important;
}
.btn.btn-primary .btn-icon-append {
  background-color: var(--oct-primary-light) !important;
  height: 50px !important;
  width: 50px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  background-color: var(--oct-dark) !important;
  color: var(--oct-gray100);
  font-family: var(--oct-ff-satoshi);
}

.container-title {
  font-size: 48px !important;
  font-family: var(--oct-ff-bricolage);
  font-weight: 500 !important;
  line-height: 120%;
  color: var(--oct-gray50);
}
.container-title h2 {
  font-size: 48px;
  font-family: var(--oct-ff-bricolage);
  font-weight: 500;
  line-height: 120%;
  color: var(--oct-gray50);
}

.intro-title {
  font-size: 64px !important;
  font-family: var(--oct-ff-bricolage);
  font-weight: 500 !important;
  line-height: 120%;
  color: var(--oct-gray50);
}

.container-subtitle {
  font-weight: 500;
  font-size: 20px;
  line-height: 150%;
  color: var(--oct-gray400);
}

.icon-box {
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--oct-gray900);
  border-radius: 50%;
  flex-shrink: 0;
}
.icon-box.size-48 {
  height: 48px;
  width: 48px;
}
.icon-box.icon-large img {
  height: 32px;
  width: 32px;
}
.icon-box.icon-xl img {
  height: 48px;
  width: 48px;
}

/* Webkit Browsers */
::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
  background: transparent !important; /* Track color */
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--oct-gray800); /* Scrollbar thumb color */
  border-radius: 6px;
  border: 2px solid transparent !important; /* Adds space around thumb */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--oct-gray800); /* Darker color on hover */
}

/* Firefox */
body {
  scrollbar-color: #888 transparent !important; /* Thumb and track colors */
  scrollbar-width: thin; /* Thin scrollbar */
}

.cursor-tracking-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 468px;
  height: 468px;
  background: #5f57ff;
  filter: blur(150px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.wow {
  visibility: hidden;
}

.ic-arrow-right {
  background-image: url(../../svg/ic-arrow-right.svg);
  height: 24px;
  width: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-youtube {
  background-image: url(../../svg/ic-youtube.svg);
  height: 32px;
  width: 34px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-facebook {
  background-image: url(../../svg/ic-facebook.svg);
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-key {
  background-image: url(../../svg/ic-key.svg);
  height: 32px;
  width: 26.05px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-doc {
  background-image: url(../../svg/ic-doc.svg);
  height: 30px;
  width: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-logo {
  background-image: url(../../svg/ot-logo.svg);
  height: 32px;
  width: 111px;
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}

.ic-facebook-outline {
  background-image: url(../../svg/ic-fb.svg);
  height: 18.8px;
  width: 9.9px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-lindin {
  background-image: url(../../svg/ic-lindin.svg);
  height: 16.63px;
  width: 13.06px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-insta {
  background-image: url(../../svg/ic-insta.svg);
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-arrow-left {
  background-image: url(../../svg/ic-arrow-left.svg);
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-twitter {
  background-image: url(../../svg/ic-twitter.svg);
  height: 20px;
  width: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-priten {
  background-image: url(../../svg/ic-priten.svg);
  height: 20px;
  width: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-hamburger {
  background-image: url(../../svg/ic-menu.svg);
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@font-face {
  font-family: "Satoshi";
  src: url("../../fonts/satoshi/Satoshi-Light.otf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi";
  src: url("../../fonts/satoshi/Satoshi-LightItalic.otf");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Satoshi";
  src: url("../../fonts/satoshi/Satoshi-Regular.otf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi";
  src: url("../../fonts/satoshi/Satoshi-Italic.otf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Satoshi";
  src: url("../../fonts/satoshi/Satoshi-Medium.otf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi";
  src: url("../../fonts/satoshi/Satoshi-MediumItalic.otf");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Satoshi";
  src: url("../../fonts/satoshi/Satoshi-Bold.otf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi";
  src: url("../../fonts/satoshi/Satoshi-BoldItalic.otf");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Satoshi";
  src: url("../../fonts/satoshi/Satoshi-Black.otf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi";
  src: url("../../fonts/satoshi/Satoshi-BlackItalic.otf");
  font-weight: 700;
  font-style: italic;
}
.fs16 {
  font-size: 16px;
}

.fs48 {
  font-size: 48px;
}

.ff-bricolage {
  font-family: var(--oct-ff-bricolage);
}

.lh120 {
  line-height: 120%;
}

.lh150 {
  line-height: 150%;
}

.fs14 {
  font-size: 14px;
}

.fs18 {
  font-size: 18px;
}

.fs20 {
  font-size: 20px;
}

.fs22 {
  font-size: 22px;
}

.fs24 {
  font-size: 24px;
}

.fs32 {
  font-size: 32px;
}

.fw400 {
  font-weight: 400;
}

.fw500 {
  font-weight: 500;
}

.text-gray50 {
  color: var(--oct-gray50);
}

.text-gray100 {
  color: var(--oct-gray100);
}

.text-gray200 {
  color: var(--oct-gray200);
}

.text-gray300 {
  color: var(--oct-gray300);
}

.text-gray400 {
  color: var(--oct-gray400);
}

.text-gray500 {
  color: var(--oct-gray500);
}

.text-gray600 {
  color: var(--oct-gray600);
}

.text-gray700 {
  color: var(--oct-gray700);
}

.text-primary-light {
  color: var(--oct-primary-light);
}

.bg-orange-light {
  background-color: var(--oct-orange-light);
}

.bg-orange-light2 {
  background-color: var(--oct-orange-light2);
}

.bg-blue-light {
  background-color: var(--oct-blue-light);
}

.bg-blue-light2 {
  background-color: var(--oct-blue-light2);
}

.bg-pink-light {
  background-color: var(--oct-pink-light);
}

.bg-pink-light2 {
  background-color: var(--oct-pink-light2);
}

.bg-green-light {
  background-color: var(--oct-green-light);
}

.bg-green-light2 {
  background-color: var(--oct-green-light2);
}

.bg-gray900 {
  background-color: var(--oct-gray900);
}

.text-opacity-80 {
  opacity: 0.8;
}

.h-212 {
  height: 212px;
}

@media (max-width: 768px) {
  .container-title {
    font-size: 34px !important;
  }
  .container-title h2 {
    font-size: 34px !important;
  }
  .container-subtitle {
    font-size: 15px !important;
  }
  .intro-title {
    font-size: 32px !important;
  }
}
.intro-section {
  position: relative;
  z-index: 1;
}
.intro-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../svg/intro-bg.svg);
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
}
.intro-section .intro-section-bg-vector-1 {
  margin-top: -440px;
  position: absolute;
  width: 400px;
  height: 400px;
  left: auto;
  right: 0;
  margin-right: 60px;
  top: 0;
  background: radial-gradient(111.63% 111.63% at 42.64% -5.82%, #0fad63 33.65%, #5f57ff 44.58%, #ff47d6 100%);
  filter: blur(200px);
  transform: rotate(7.68deg);
  z-index: 0;
}
.intro-section .intro-section-top-wrapper {
  padding-top: 244px;
  padding-bottom: 321px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-section .intro-section-top-wrapper__title {
  font-size: 64px !important;
  line-height: 120%;
  text-align: center;
  max-width: 1044px;
  font-family: var(--oct-ff-bricolage) !important;
  position: relative;
  z-index: 1;
  font-weight: 500;
}
.intro-section .intro-section-top-wrapper__subtitle {
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 150%;
  font-size: 20px !important;
  max-width: 584px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--oct-gray200);
  font-weight: 500;
}
.intro-section .intro-vector-left-1 {
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../../images/intro/message.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  height: 192px;
  width: 192px;
  margin-left: -40px !important;
  margin-top: -30px !important;
  z-index: 1;
  animation: floatAnimation 3s ease-in-out infinite;
}
.intro-section .intro-vector-left-2 {
  position: absolute;
  left: 0;
  top: 50%;
  background-image: url(../../images/intro/channel-owner.png);
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  height: 184.02px;
  width: 191px;
  margin-left: 60px !important;
  z-index: 1;
  background-size: contain;
  animation: floatAnimation 3s ease-in-out infinite;
  animation-delay: 0.5s;
}
.intro-section .intro-vector-left-3 {
  position: absolute;
  left: 0;
  top: 100%;
  bottom: 0;
  background-image: url(../../images/intro/star.png);
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  height: 184.02px;
  width: 191px;
  margin-top: 24px;
  margin-left: 140px !important;
  z-index: 1;
  background-size: contain;
  animation: floatAnimation 3s ease-in-out infinite;
  animation-delay: 0.5s;
}
.intro-section .intro-vector-right-1 {
  position: absolute;
  left: auto;
  right: 0;
  top: 0;
  background-image: url(../../images/intro/vector2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  height: 192px;
  width: 191px;
  z-index: 1;
  margin-top: -120px !important;
  animation: floatAnimation 3s ease-in-out infinite;
}
.intro-section .intro-vector-right-2 {
  position: absolute;
  left: auto;
  right: 0;
  top: 100%;
  background-image: url(../../images/intro/channel-owner2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  height: 192px;
  width: 191px;
  z-index: 1;
  margin-right: 120px !important;
  animation-delay: 0.5s;
  animation: floatAnimation 3s ease-in-out infinite;
}
.intro-section .intro-vector-right-3 {
  position: absolute;
  left: auto;
  right: 0;
  top: 100%;
  background-image: url(../../images/intro/vector3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  height: 192px;
  width: 191px;
  z-index: 1;
  margin-top: 100px !important;
  animation-delay: 0.5s;
  animation: floatAnimation 3s ease-in-out infinite;
}

@media (max-width: 768px) {
  .intro-section .intro-vector-right-1 {
    height: 100px;
    width: 100px;
  }
  .intro-section .intro-vector-right-2 {
    height: 100px;
    width: 100px;
    margin-right: 0px !important;
  }
  .intro-section .intro-vector-right-3 {
    height: 100px;
    width: 100px;
  }
  .intro-section .intro-vector-left-1 {
    height: 100px;
    width: 100px;
    margin-left: 0px;
  }
  .intro-section .intro-vector-left-2 {
    height: 100px;
    width: 100px;
    margin-left: -60px !important;
  }
  .intro-section .intro-vector-left-3 {
    height: 100px;
    width: 100px;
    margin-left: 0px !important;
  }
  .intro-section .intro-section-top-wrapper__title {
    font-size: 40px !important;
  }
  .intro-section .intro-section-top-wrapper__subtitle {
    font-size: 16px !important;
  }
  .intro-section::after {
    aspect-ratio: 0.5;
    background-size: cover;
    background-position: top;
  }
  .services-page::after {
    aspect-ratio: 0.5 !important;
    background-size: cover;
  }
}
/* Keyframes cho hiệu ứng đung đưa */
@keyframes floatAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(0);
  }
}
.our-number-section {
  margin-bottom: 100px !important;
}

.our-number-section-list-row {
  margin-top: 64px;
}

.stat-box {
  background-color: var(--oct-gray900) !important;
  padding: 16px;
  min-height: 212px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: var(--otc-border-radius);
}
.stat-box__number {
  font-family: var(--oct-ff-bricolage);
  font-style: normal;
  font-weight: 500 !important;
  font-size: 40px;
  line-height: 120%;
  color: var(--oct-gray50);
}

.stat-box__text {
  font-size: 24px;
  line-height: 150%;
  font-weight: 500 !important;
  color: var(--oct-gray300) !important;
}

@media (max-width: 768px) {
  .stat-box__number {
    font-size: 32px !important;
  }
  .stat-box__text {
    font-size: 18px !important;
  }
}
.count-number {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.count-number.visible {
  opacity: 1;
  transform: translateY(0);
}

.what-we-do-section-list-row {
  margin-top: 64px !important;
  margin-bottom: 100px !important;
}

.flatform-box {
  border-radius: var(--otc-border-radius);
  padding: 48px;
  padding-top: 158px;
  height: 100%;
  transition: transform ease-in-out 0.3s !important;
}
.flatform-box:hover {
  transform: scale(1.02) !important;
}
.flatform-box__icon {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flatform-box__title {
  font-size: 32px;
  font-weight: 500;
  color: var(--oct-dark);
  font-family: var(--oct-ff-bricolage);
  line-height: 120%;
  padding-top: 12px;
  padding-bottom: 12px;
}
.flatform-box__subtitle {
  font-size: 20px;
  font-weight: 500;
  color: var(--oct-gray500);
  line-height: 150%;
}

.insights-wrapper__avatar {
  height: 108px;
  width: 108px;
  border-radius: 50%;
  -o-object-fit: contain;
     object-fit: contain;
}

.brand-slide-wrapper .brand-item {
  width: 165px;
  height: 60px;
  -o-object-fit: contain;
     object-fit: contain;
}
.brand-slide-wrapper .slick-slide {
  display: flex !important;
  justify-content: center !important;
}

.what-we-do-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.what-we-do-section-title div {
  text-align: center !important;
}
.what-we-do-section-title h2 {
  color: var(--oct-gray50);
  text-align: center;
  font-family: var(--oct-ff-bricolage) !important;
  font-size: 64px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 76.8px */
  max-width: 1000px;
}
.what-we-do-section-title p {
  color: rgba(224, 224, 224, 0.8);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 30px */
  max-width: 640px;
}

.titleBurrowingWhat .container-title {
  display: flex !important;
  justify-content: center;
}
.titleBurrowingWhat .container-subtitle {
  display: flex !important;
  justify-content: center;
}

@media (max-width: 768px) {
  .flatform-box {
    padding-top: 40px !important;
    padding: 24px !important;
  }
  .flatform-box__title {
    font-size: 20px !important;
  }
  .flatform-box__subtitle {
    font-size: 16px !important;
  }
  .what-we-do-section-list-row {
    padding-top: 32px !important;
  }
  .what-we-do-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .what-we-do-section-title h2 {
    font-size: 32px !important;
  }
  .what-we-do-section-title p {
    font-size: 15px !important;
  }
}
.story-section {
  position: relative;
  padding-top: 220px;
  overflow: hidden;
}
.story-section::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: url(../../svg/story-bg.svg);
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.story-section__title-wrapper {
  margin-top: 256px;
  margin-bottom: 256px;
  position: relative;
  z-index: 1;
}
.story-section__title {
  text-align: center;
  font-size: 64px;
  font-weight: 500;
  font-family: var(--oct-ff-bricolage) !important;
  line-height: 120%;
}
.story-section .story-section__avatar1 {
  position: absolute;
  top: 0;
  left: 20%;
  z-index: 1;
}
.story-section .story-section__avatar1 img {
  height: 229px;
  width: 229px;
}
.story-section .story-section__avatar2 {
  position: absolute;
  top: 0;
  left: auto;
  right: 10%;
  z-index: 1;
}
.story-section .story-section__avatar2 img {
  height: 229px;
  width: 229px;
}
.story-section .story-section__avatar3 {
  position: absolute;
  top: 20%;
  left: 0;
  margin-left: -32px !important;
  z-index: 1;
}
.story-section .story-section__avatar3 img {
  height: 270px;
  width: 270px;
}
.story-section__avatar4 {
  position: absolute;
  top: auto;
  left: 10%;
  bottom: 0;
  margin-bottom: 24px;
  z-index: 1;
}
.story-section__avatar4 img {
  height: 210px;
  width: 210px;
}
.story-section__avatar5 {
  position: absolute;
  top: 50%;
  left: auto;
  right: 0;
  margin-right: -100px !important;
  z-index: 1;
}
.story-section__avatar5 img {
  height: 305px;
  width: 305px;
}
.story-section__avatar6 {
  position: absolute;
  top: auto;
  bottom: 0;
  left: auto;
  right: 20%;
  z-index: 1;
}
.story-section__avatar6 img {
  height: 229px;
  width: 229px;
}

.story-section_image-avatar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 1920px) {
  .story-section_image-avatar.container {
    max-width: 100% !important;
  }
}
@media (max-width: 992px) {
  .story-section__title {
    font-size: 30px !important;
  }
  .story-section {
    padding-top: 120px;
  }
  .story-section .story-section__avatar1 img {
    height: 100px !important;
    width: 100px !important;
  }
  .story-section .story-section__avatar2 img {
    height: 110px !important;
    width: 110px !important;
  }
  .story-section .story-section__avatar3 {
    top: 18% !important;
    margin-left: -52px !important;
  }
  .story-section .story-section__avatar3 img {
    height: 120px !important;
    width: 120px !important;
  }
  .story-section__avatar4 img {
    height: 110px !important;
    width: 110px !important;
  }
  .story-section__avatar5 {
    margin-right: -60px !important;
  }
  .story-section__avatar5 img {
    height: 120px !important;
    width: 120px !important;
  }
  .story-section__avatar6 img {
    height: 90px !important;
    width: 90px !important;
  }
}
@media (max-width: 1200px) {
  .story-section {
    padding-top: 120px;
  }
  .story-section .story-section__avatar1 img {
    height: 129px;
    width: 129px;
  }
  .story-section .story-section__avatar2 img {
    height: 129px;
    width: 129px;
  }
  .story-section .story-section__avatar3 img {
    height: 170px;
    width: 170px;
  }
  .story-section__avatar4 img {
    height: 110px;
    width: 110px;
  }
  .story-section__avatar5 {
    margin-right: -40px;
  }
  .story-section__avatar5 img {
    height: 205px;
    width: 205px;
  }
  .story-section__avatar6 img {
    height: 129px;
    width: 129px;
  }
}
.services-page {
  padding-top: 198px;
  min-height: calc(100vh - 120px);
  position: relative;
}

.service-detail-cover-image {
  height: 522px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.title-service {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title-service h2 {
  max-width: 1040px !important;
  font-size: 64px !important;
  font-family: var(--oct-ff-bricolage) !important;
  font-weight: 500 !important;
  line-height: 120%;
  text-align: center;
}
.title-service p {
  max-width: 640px !important;
  padding-top: 18px;
  max-width: 600px;
  font-weight: 500;
  font-size: 20px;
  line-height: 150%;
  color: var(--oct-gray400);
  text-align: center;
}

.feature-section {
  padding-top: 124px;
}

.qna-section {
  padding-top: 160px;
}
.qna-section .qna-accordion-wrapper .accordion-item {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  background-color: transparent !important;
  border-right: 0px !important;
  border-left: 0px !important;
  border: 1px solid var(--oct-gray800);
  border-radius: 0px !important;
}
.qna-section .qna-accordion-wrapper .accordion-header .accordion-button {
  background-color: transparent !important;
  height: auto;
  font-weight: 500;
  font-size: 20px;
  line-height: 160%;
  color: #e0e0e0;
  padding: 0px !important;
}
.qna-section .qna-accordion-wrapper .accordion-header .accordion-button:focus {
  box-shadow: none !important;
}
.qna-section .qna-accordion-wrapper .accordion-body {
  padding: 0px !important;
}
.qna-section .qna-accordion-wrapper .accordion-body .accordion-body-text {
  color: var(--oct-gray700);
  opacity: 0.8;
}
.qna-section .qna-accordion-wrapper .accordion-button:not(.collapsed) {
  box-shadow: none !important;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("../../svg/ic-plus.svg") !important;
}

.accordion-button::after {
  background-image: url("../../svg/ic-minus.svg") !important;
}

.services-page::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 16/9;
  background-image: url(../../svg/service-bg-vector.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.services-page-box-wrapper {
  position: relative;
}
.services-page-box-wrapper::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(../../svg/service-vector-2.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  z-index: -1;
}

@media (max-width: 768px) {
  .intro-title-wrapper {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .title-service h1 {
    font-size: 48px !important;
  }
  .title-service p {
    font-size: 15px !important;
  }
  .services-page {
    padding-top: 140px !important;
  }
}
.services-intro-section {
  position: relative;
  height: 100%;
}
.services-intro-section .intro-title-wrapper {
  padding-top: 268px;
  padding-bottom: 312px;
}
.services-intro-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background-image: url(../../images/services/team-work.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.services-intro-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background: linear-gradient(0deg, rgba(9, 9, 9, 0.0591716) 25.92%, rgba(9, 9, 9, 0.5) 92.71%);
  mix-blend-mode: normal;
}

.service-intro-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.service-intro-wrapper h1 {
  font-size: 64px !important;
  font-family: var(--oct-ff-bricolage);
  font-weight: 500 !important;
  line-height: 120%;
  text-align: center;
  color: var(--oct-gray100);
}
.service-intro-wrapper p {
  padding-top: 18px;
  max-width: 600px;
  font-weight: 500;
  font-size: 20px;
  line-height: 150%;
  color: var(--oct-gray400);
  text-align: center;
}

.service-detail-container-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.service-detail-container-title-wrapper h3 {
  color: var(--oct-primary-light);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 28.8px */
}
.service-detail-container-title-wrapper h4 {
  color: var(--oct-gray100);
  font-family: var(--oct-ff-bricolage);
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 57.6px */
}
.service-detail-container-title-wrapper p {
  color: rgba(224, 224, 224, 0.8);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 30px */
  max-width: 640px;
}

@media (max-width: 768px) {
  .service-intro-wrapper h1 {
    font-size: 48px !important;
  }
  .service-intro-wrapper p {
    font-size: 15px !important;
  }
  .service-detail-container-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .service-detail-container-title-wrapper h3 {
    font-size: 17px !important;
  }
  .service-detail-container-title-wrapper h4 {
    font-size: 36px !important;
  }
  .service-detail-container-title-wrapper p {
    font-size: 15px !important;
  }
}
.about-us-intro-section {
  min-height: 120vh;
  position: relative;
}
.about-us-intro-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../svg/bg-vector-about-us.svg);
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.about-us-intro-section .about-us-intro-section-detail {
  padding-top: 248px;
  padding-bottom: 248px;
}
.about-us-intro-section .about-us-intro-section-detail-image {
  height: 462px;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  animation: floatAnimation 3s ease-in-out infinite;
}
.about-us-intro-section .mission-wrapper {
  padding-top: 224px;
}

.avatar-wrapper {
  transition: transform 0.3s ease-in-out;
}
.avatar-wrapper__image {
  display: flex;
  justify-content: center;
}
.avatar-wrapper__image img {
  border-radius: 50%;
  height: 180px;
  width: 180px;
  -o-object-fit: cover;
     object-fit: cover;
}
.avatar-wrapper__user-name {
  font-weight: 500;
  font-size: 20px;
  line-height: 120%;
  color: var(--oct-gray50);
  text-align: center;
  padding-top: 24px;
}
.avatar-wrapper__description {
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: rgba(249, 249, 249, 0.8);
  text-align: center;
}
.avatar-wrapper:hover {
  transform: scale(1.06);
}

.member-wrapper.row {
  margin-top: 48px !important;
  max-width: 1100px;
  justify-content: center;
  row-gap: 48px;
  padding-bottom: 150px !important;
}

.vision-wrapper {
  padding-bottom: 224px;
}

@media (max-width: 992px) {
  .about-us-intro-section-detail {
    padding-top: 120px !important;
  }
}
@media (max-width: 768px) {
  .vision-wrapper {
    padding-bottom: 84px !important;
  }
  .mission-wrapper {
    padding-top: 84px !important;
  }
  .about-us-intro-section-detail {
    padding-bottom: 84px !important;
  }
  .avatar-wrapper__image img {
    height: 130px !important;
    width: 130px !important;
  }
  .avatar-wrapper__user-name {
    font-size: 18px !important;
  }
  .avatar-wrapper__description {
    font-size: 14px !important;
  }
  .about-us-intro-section::after {
    aspect-ratio: 0.5;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
  }
}
.blogs-page {
  padding-top: 198px;
  min-height: calc(100vh - 136px);
}

.blog-item {
  transition: -webkit-text-decoration 0.3 ease-in-out;
  transition: text-decoration 0.3 ease-in-out;
  transition: text-decoration 0.3 ease-in-out, -webkit-text-decoration 0.3 ease-in-out;
}
.blog-item a {
  text-decoration: none;
  color: inherit !important;
}
.blog-item:hover a {
  text-decoration: underline !important;
}
.blog-item__image {
  height: 250px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--otc-border-radius);
  transition: transform ease-in-out 0.6s !important;
}
.blog-item__image:hover {
  transform: scale(1.02);
}
.blog-item__time {
  padding-top: 33px;
  font-size: 16px;
  color: var(--oct-primary-light);
  font-weight: bold;
  line-height: 20.8px;
}
.blog-item__title {
  font-size: 24px;
  font-family: var(--oct-ff-bricolage);
  font-weight: 600;
  line-height: 30px;
  padding-top: 12px;
  color: var(--oct-gray50) !important;
  text-decoration: none !important;
}
.blog-item__subtitle {
  font-size: 20px;
  font-weight: 500;
  line-height: 150%;
  color: var(--oct-gray700);
  opacity: 0.8 !important;
  padding-top: 12px;
}

.blog-detail-section {
  padding-top: 175px;
}

.pagination-blog {
  background-color: transparent !important;
  display: flex;
  border-top: 1px solid var(--oct-gray800);
  padding-top: 24px;
  margin-top: 66px;
  align-items: center;
  padding-bottom: 52px;
  position: relative;
  justify-content: center;
}
.pagination-blog .next {
  position: absolute;
  right: 0;
  top: 20%;
  left: auto;
  margin-right: 8px !important;
  transition: transform 0.3s ease-in-out;
}
.pagination-blog .next:hover {
  transform: translateX(6px) !important;
}
.pagination-blog .next .text-paging {
  opacity: 0.8;
  margin-right: 2px !important;
}
.pagination-blog .prev {
  position: absolute;
  top: 20%;
  margin-left: 10px !important;
  left: 0;
  transition: transform 0.3s ease-in-out;
}
.pagination-blog .prev:hover {
  transform: translateX(-6px) !important;
}
.pagination-blog a {
  text-decoration: none;
  color: var(--oct-gray700);
}
.pagination-blog .page-numbers {
  background-color: transparent;
  border: none !important;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--oct-gray700);
}
.pagination-blog .page-numbers.current {
  background-color: var(--oct-gray900) !important;
}
.pagination-blog .ic-arrow-right {
  height: 20px;
  width: 20px;
  flex-shrink: 0;
}
.pagination-blog .ic-arrow-left {
  height: 20px;
  width: 20px;
  flex-shrink: 0;
}

.blog-detail-section__thumbnail {
  width: 100%;
  height: 568px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--otc-border-radius);
}

.blog-detail-section__video {
  width: 100%;
  height: 568px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--otc-border-radius);
}

.blog-detail-section {
  max-width: 1000px;
}

.blog-detail-section h1 {
  color: var(--oct-gray50) !important;
  font-family: var(--oct-ff-bricolage) !important;
}
.blog-detail-section p {
  color: rgba(224, 224, 224, 0.8);
}

@media (max-width: 768px) {
  .blogs-page {
    padding-top: 120px;
  }
  .blog-item__time {
    padding-top: 16px !important;
    font-size: 14px !important;
  }
  .blog-item__title {
    padding-top: 6px !important;
    font-size: 18px !important;
  }
  .blog-item__subtitle {
    padding-top: 6px !important;
    font-size: 14px !important;
  }
  .blog-detail-section__thumbnail {
    height: 368px !important;
  }
  .blog-detail-section__video {
    height: 368px !important;
  }
  .blog-detail-section {
    padding-top: 90px !important;
  }
}
@keyframes zoomOutEffect {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.contact-page {
  padding-top: 198px;
  position: relative;
}
.contact-page .container-subtitle {
  padding-bottom: 64px;
}
.contact-page::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 16/9;
  background-image: url(../../svg/contact-vector.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.oct-form-control-name br {
  display: none !important;
}

.contact-form {
  display: flex;
  justify-content: end;
}

.oct-form-control {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #e0e0e0;
  width: 100% !important;
}
.oct-form-control input {
  height: 47px !important;
  background-color: transparent !important;
  border: none;
  border-bottom: 1px solid #555454 !important;
  padding: 0px !important;
  color: #e0e0e0;
  width: 100% !important;
}
.oct-form-control input:focus {
  border-color: var(--oct-primary) !important;
}
.oct-form-control select {
  height: 47px !important;
  background-color: transparent !important;
  border: none;
  border-bottom: 1px solid #555454 !important;
  padding: 0px !important;
  color: #e0e0e0;
  width: 100% !important;
}
.oct-form-control select:focus {
  border-color: var(--oct-primary) !important;
}
.oct-form-control select option {
  background-color: var(--oct-gray900) !important;
}
.oct-form-control textarea {
  background-color: transparent !important;
  border-bottom: 1px solid #555454 !important;
  padding: 0px !important;
  border: none;
  color: #e0e0e0;
}
.oct-form-control textarea:focus {
  border-color: var(--oct-primary) !important;
}

.button-submit-form-contact {
  width: 214px !important;
  margin: 0px !important;
  padding: 0px !important;
  position: relative;
  background-color: var(--oct-primary) !important;
  height: 58px;
  border-radius: 40px !important;
  text-align: center !important;
}
.button-submit-form-contact p {
  margin: 0px !important;
  height: 58px;
}
.button-submit-form-contact::after {
  content: "";
  position: absolute;
  top: 0;
  margin: 4px !important;
  width: 0;
  height: 48px;
  border-radius: 50%;
  width: 48px;
  right: 0;
  left: auto;
  background-image: url(../../svg/ic-arrow-box.svg);
  z-index: 0;
}
.button-submit-form-contact input[type=submit] {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
  border: none !important;
  height: 58px;
  padding: 0px;
  margin: 0px;
  padding-left: 12px !important;
  padding-right: 46px !important;
  color: var(--oct-white) !important;
  border-radius: 40px !important;
  font-size: 18px !important;
  width: 214px !important;
  font-family: var(--oct-ff-satoshi) !important;
  font-weight: 500 !important;
  letter-spacing: 0px !important;
}

form.wpcf7-form.invalid .wpcf7-response-output {
  display: none;
}
form.wpcf7-form.sent .wpcf7-response-output {
  display: block;
  border: none !important;
  color: #009990 !important;
  display: block !important;
  background-color: rgba(0, 153, 143, 0.3882352941);
  border-radius: 6px !important;
  padding: 12px !important;
}
form.wpcf7-form.failed .wpcf7-response-output {
  display: block;
  border: none !important;
  color: #FB4141 !important;
  display: block !important;
  background-color: rgba(251, 65, 65, 0.1098039216);
  border-radius: 6px !important;
  padding: 12px !important;
}

@media (max-width: 768px) {
  .contact-page {
    padding-top: 120px !important;
  }
  .contact-page::after {
    aspect-ratio: 0.5;
  }
  .button-submit-form-contact {
    margin-right: 16px !important;
  }
  .oct-form-control-name {
    font-size: 14px !important;
  }
  .oct-form-control {
    font-size: 14px !important;
  }
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-transition: background-color 600000s 0s, color 600000s 0s;
  transition: background-color 600000s 0s, color 600000s 0s;
}

input[data-autocompleted] {
  background-color: transparent !important;
}/*# sourceMappingURL=style.css.map */