:root {
  --font-primary-regular: "ABC-whyte-inktrap-regular";
  --font-primary-medium: "ABC-whyte-inktrap-medium";
  --font-primary-semiBold: "ABC-whyte-inktrap-semiBold";
  --font-primary-bold: "ABC-whyte-inktrap-bold";
  --font-primary-black: "ABC-whyte-inktrap-black";
  --white: #fff;
}

/* font */
@font-face {
  font-family: "ABC-whyte-inktrap-regular";
  src: url(../font/ABC-whyte/ABCWhyteInktrap-Regular-Trial-1.otf);
}

@font-face {
  font-family: "ABC-whyte-inktrap-medium";
  src: url(../font/ABC-whyte/ABCWhyteInktrap-Medium-Trial-1.otf);
}

@font-face {
  font-family: "ABC-whyte-inktrap-semiBold";
  src: url(../font/ABC-whyte/ABCWhyteInktrap-Regular-Trial-1.otf);
  font-weight: 600;
}

@font-face {
  font-family: "ABC-whyte-inktrap-bold";
  src: url(../font/ABC-whyte/ABCWhyteInktrap-Bold-Trial-1.otf);
}

@font-face {
  font-family: "ABC-whyte-inktrap-black";
  src: url(../font/ABC-whyte/ABCWhyteInktrap-Black-Trial-1.otf);
}

.container {
  padding: 0;
}

label {
  font-weight: unset !important;
}

body {
  color: var(--white);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  line-height: 24px;
  background-color: #000514;
  top: 0 !important;
}

body>.skiptranslate {
  max-height: 0 !important;
  overflow: hidden !important;
  display: none;
}

.text-white {
  color: var(--White) !important;
}

.text-center {
  text-align: center !important;
}

a {
  text-decoration: none !important;
}

.text-green {
  color: #00FFA3 !important;
}

h1:not(.editor-content h1),
h2:not(.editor-content h2),
h3:not(.editor-content h3),
h4:not(.editor-content h4),
h5:not(.editor-content h5),
h6:not(.editor-content h6),
p:not(.editor-content p) {
  padding: 0;
  margin: 0;
}

.header-container {
  width: 100%;
  position: relative;
  z-index: 10;
  padding-top: 20px;
}

.header-inner {
  width: min(95%, 1320px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-right {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.header-search {
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 64px;
  border: 1px solid rgba(255, 255, 255, 0.30);
}

.header-language {
  position: relative;
}

.header-language-header {
  display: flex;
  height: 44px;
  padding: 0 16px;
  align-items: center;
  gap: 8px;
  border-radius: 44px;
  background: #00FFA3;
}

.header-language-header>.title {
  color: #061428;
}

.header-language-list {
  position: absolute;
  top: 52px;
  right: 0;
  background-color: #00FFA3;
  border-radius: 8px;
  padding: 12px 8px;
  display: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 80%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.header-language:hover .header-language-list {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.header-language-list>.item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #061428;
  cursor: pointer;
}

.main-container {
  width: 100%;
  min-height: 100vh;
  margin-top: -68px;
  background: linear-gradient(180deg, rgba(0, 19, 47, 0.30) 0%, rgba(0, 19, 47, 0.00) 46.42%)
}

.banner-container {
  position: relative;
  border-radius: 0 0 32px 32px;
  overflow: hidden;
}

.scroll-down {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  color: #00FFA3;
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.banner-item {
  position: relative;
}

.banner-content {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.banner-content-inner {
  width: min(95%, 1320px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.banner-content-left {
  display: flex;
  width: 587px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.banner-title {
  color: var(--white);
  font-family: var(--font-primary-black);
  font-size: 50px;
  font-style: normal;
  line-height: 60px;
}

.banner-desc {
  width: 100%;
}

.banner-content-right {
  display: inline-flex;
  padding: 12px 32px 12px 12px;
  align-items: center;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(31, 76, 142, 0.20);
  backdrop-filter: blur(16px);
  width: 468px;
  cursor: pointer;
}

.banner-content-right-img {
  width: 176px;
  height: 133px;
  border-radius: 8px;
  overflow: hidden;
}

.banner-content-right-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease-in-out;
}

.banner-content-right:hover .banner-content-right-img img {
  transform: scale(1.05);
}

.banner-content-right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.banner-content-right-content>.first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.banner-content-right-content>.first>.title {
  color: #FFF;
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 100%;
}

.banner-content-right-content>.line {
  width: 100%;
  height: 1px;
  background: linear-gradient(218deg, #9DE8EE 25.05%, #9DE8EE 25.05%, #FA7C0B 51.71%, #9F8CED 79.45%);
}

.banner-content-right-content>a {
  color: #00FFA3;
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0px;
  border-bottom: 1px solid #00FFA3;
}

.box-1 {
  padding-top: 112px;
  background: radial-gradient(60.55% 86.34% at 50% 0%, rgba(94, 176, 239, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%);
  display: flex;
  flex-direction: column;
  gap: 112px;
}

.box-1-first-inner,
.box-1-second-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
}

.box-1-first-header,
.box-1-second-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

.main-title {
  color: #00FFA3;
  font-family: var(--font-primary-medium);
  font-size: 40px;
  font-style: normal;
  line-height: 48px;
}

.box-1-first-header>.main-title {
  width: 300px;
}

.box-1-first-header>.desc {
  width: 712px;
}

.box-1-first-content {
  width: 100%;
}

.box-1-first-content-slider .item {
  border-radius: 16px;
  border: 1px solid var(--Style, rgba(34, 211, 238, 0.00));
  position: relative;
  box-shadow: 0 0 0 0 rgba(127, 196, 219, 0.25) inset, 0 0 0 0 #9DEDFF;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.box-1-first-content-slider .item:hover {
  box-shadow: 0 4px 12.8px 0 rgba(127, 196, 219, 0.25) inset, 0 -4px 6px 0 #9DEDFF;
}

.box-1-first-content-slider .item::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 16px;
  background: linear-gradient(90deg, #22d3ee00 0%, #22D3EE 50%, #22d3ee00 100%);
}

.box-1-first-content-slider .item .content {
  background: linear-gradient(180deg, #223D66 0.06%, #020916 99.94%);
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: 16px;
  position: relative;
  z-index: 10;
  height: 200px;
}

.box-1-first-content-slider .item .content .title {
  color: #9CE7ED;
  font-family: var(--font-primary-regular);
  font-size: 20px;
  font-style: normal;
  line-height: 30px;
  text-transform: uppercase;
}

.box-1-first-content-slider .item .content .number {
  height: 66px;
  color: #FFF;
  font-family: var(--font-primary-bold);
  font-size: 56px;
  font-style: normal;
  line-height: 66px;
  text-transform: uppercase;
}

.box-1-first-content-slider .item .content .desc {
  color: rgba(255, 255, 255, 0.70);
}

.box-1-first-content-slider .owl-stage-outer {
  margin: -8px;
  padding: 8px;
}

.actions-silder {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.actions-silder-item {
  cursor: pointer;
}

.box-1-second-content {
  width: 100%;
  position: relative;
}

.box-1-second {
  position: relative;
}

.box-1-second::after {
  content: '';
  width: 100%;
  height: 282px;
  background-color: #FFF;
  position: absolute;
  bottom: 0;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 16px;
  box-shadow: 0 2px 6px 0 rgba(0, 19, 47, 0.10);
  cursor: pointer;
}

.service-item-img {
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  width: 100%;
}

.service-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease-in-out;
}

.service-item:hover .service-item-img img {
  transform: scale(1.05);
}

.service-slider .owl-stage-outer {
  margin: -8px;
  padding: 8px
}

.service-item-content {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  background: #F3F3F3;
  height: 244px;
}

.service-item-content .title {
  color: #06131A;
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 34px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 68px;
}

.service-item-content .desc {
  color: rgba(38, 38, 38, 0.80);
}

.service-slider .owl-dots {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin-top: 30px;
}

.service-slider .owl-dot span {
  display: none;
}

.service-slider .owl-dot {
  display: flex;
  width: 8px;
  height: 8px;
  align-items: center;
  gap: 8px;
  border-radius: 44px;
  background: #00FFA3;
  transition: all 0.3s ease-in-out;
  transform-origin: center;
}

.service-slider .owl-dot.active {
  width: 32px;
}

.box-2 {
  padding: 112px 0;
  background-color: #fff;
}

.box-partner-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.box-partner-header {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  align-self: stretch;
  justify-content: space-between;
}

.box-partner-header>.main-title {
  color: #061428;
  flex: 1;
  max-width: 553px;
}

.box-partner-header>.desc {
  color: rgba(38, 38, 38, 0.80);
  flex: 1;
  max-width: 553px;
}

.box-partner-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.partner-slider .owl-stage-outer,
.partner-slider-reverse .owl-stage-outer {
  margin: -8px;
  padding: 8px;
}

.partner-slider .owl-item .item,
.partner-slider-reverse .owl-item .item {
  display: flex;
  height: 66.036px;
  padding: 0 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  border: 1px solid #A1AEBF;
}

.partner-slider .owl-item .item img,
.partner-slider-reverse .owl-item .item img {
  width: 100%;
}

.footer-container {
  padding-top: 64px;
  background: linear-gradient(90deg, #22d3ee00 0%, #22d3ee36 50%, #22d3ee00 100%);
}

.footer-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  position: relative;
}

.footer-inner>.line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.00) 0%, rgba(34, 211, 238, 0.90) 50%, rgba(34, 211, 238, 0.00) 100%);
}

.footer-last {
  width: 100%;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  position: relative;
}

.footer-last .footer-last-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: calc(100vw / 8.5);
  font-family: var(--font-primary-black);
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.02);
}

.footer-last .first {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-last .first .left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.footer-last .first .left .item {
  color: #FFF !important;
}

.footer-last .first .social {
  display: flex;
  align-items: center;
  gap: 32px;
}

.footer-last .last {
  color: rgba(255, 255, 255, 0.60);
  font-size: 14px;
  line-height: 22px;
}

.footer-form-contact {
  width: min(100%, 576px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-form-contact-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-form-contact-header>.desc {
  text-align: center;
  color: rgba(255, 255, 255, 0.80);
}

.form-contact>.row {
  margin: 0 -4px;
}

.form-contact>.row>* {
  padding: 0 4px;
}

.form-contact .form-item {
  margin-bottom: 12px;
}

.form-contact .form-item .form-control {
  display: flex;
  padding: 8px 16;
  align-items: center;
  border-radius: 9999px;
  background: rgba(9, 9, 11, 0.30);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 0 #FFF;
  height: 40px;
  color: #FFF;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.20);
  transition: all 0.3s ease-in-out;
}

.form-contact .form-item .form-control:hover,
.form-contact .form-item .form-control:focus {
  border-color: rgba(255, 255, 255);
}

.form-contact .form-item .form-control::placeholder {
  color: var(rgba(255, 255, 255, 0.80));
  outline: none;
}

.form-contact .form-item textarea.form-control {
  height: 62px;
  border-radius: 64px;
  padding: 12px 16px;
  resize: none;
}

.form-contact .form-item select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url(../img/icons/CaretDown.svg);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 32px;
}

.form-contact .form-item select.form-control option {
  background-color: #Fff;
  color: #020916;
}

.form-contact .form-button {
  margin-top: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-contact .form-button .btn-submit-contact-form {
  display: flex;
  height: 44px;
  padding: 0 16px;
  align-items: center;
  gap: 8px;
  border-radius: 44px;
  background: #00FFA3;
  width: max-content;
  color: #061325;
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
  border: none;
  box-shadow: none;
}

@media (min-width: 1500px) {
  .container {
    width: 1320px;
  }
}

@media(min-width: 1850px) {

  .banner-content-inner,
  .header-inner {
    width: min(95%, 1800px);
  }
}

@media (max-width: 1500px) {}

@media (max-width: 1024px) {
  .banner-content-left {
    flex: 1;
  }

  .banner-content-inner {
    gap: 40px;
  }

  .banner-title {
    font-size: 36px;
    line-height: 44px;
  }

  .box-1-first-header>.desc {
    width: 550px;
  }

  .box-1 {
    padding: 80px 0 0 0;
    gap: 80px;
  }

  .box-2 {
    padding: 80px 0;
  }

  .box-1-first-inner,
  .box-1-second-inner {
    gap: 60px;
  }

  .box-1-second::after {
    height: 234px;
  }

  .box-partner-inner {
    gap: 52px;
  }

  .footer-inner {
    gap: 40px;
  }

  .footer-container {
    padding: 52px 0 0 0;
  }
}

@media (max-width: 768px) {
  .banner-container {
    border-radius: 0 0 16px 16px;
  }

  .banner-content-inner {
    flex-direction: column;
  }

  .banner-item {
    height: 650px;
  }

  .banner-item .banner-img {
    height: 100%;
  }

  .banner-item .banner-img img {
    height: 100%;
    object-fit: cover;
  }

  .banner-content-inner {
    gap: 20px;
  }

  .banner-content-left,
  .banner-content-right {
    width: 100%;
  }

  .scroll-down {
    bottom: 20px;
  }

  .box-1 {
    padding: 60px 0 0 0;
    gap: 60px;
  }

  .box-2 {
    padding: 60px 0;
  }

  .box-1-first-inner,
  .box-1-second-inner {
    gap: 40px;
  }

  .box-1-first-header,
  .box-partner-header {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .box-1-first-header>.main-title,
  .box-1-first-header>.desc,
  .box-partner-header>.main-title,
  .box-partner-header>.desc {
    max-width: unset;
    width: 100%;
    text-align: center;
  }

  .box-partner-inner {
    gap: 40px;
  }

  .box-partner-header>.main-title,
  .box-partner-header>.desc {
    width: 90%;
  }

  .footer-inner {
    gap: 32px;
  }

  .footer-form-contact {
    gap: 28px;
  }

  .footer-last .first {
    flex-direction: column;
    gap: 20px;
  }

  .footer-last .last {
    width: 100%;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 568px) {
  .container {
    padding: 0 15px;
  }

  .box-1-first-content-slider .item .content .number{
    font-size: 42px !important;
    line-height: 52px !important;
  }

  .main-title,.banner-title{
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .service-item-content .title{
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .banner-content-right-content>.first>.title,
  .box-1-first-content-slider .item .content .title {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  body,
  .scroll-down>div {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .banner-content-right-content>a{
    font-size: 12px !important;
    line-height: 20px !important;
  }

  .banner-content-left {
    gap: 8px;
  }

  .banner-content-right {
    padding: 8px;
    gap: 8px;
  }

  .banner-content-inner {
    gap: 16px;
  }

  .scroll-down {
    gap: 4px;
    bottom: 8px;
  }

  .scroll-down>img{
    width: 32px;
    height: 32px;
  }

  .banner-item {
    height: 580px;
  }

  .box-1{
    gap: 32px;
    padding: 32px 0 0 0;
  }

  .box-2{
    padding: 32px 0;
  }

  .box-1-first-inner, .box-1-second-inner,
  .box-partner-inner{
    gap: 20px;
  }

  .box-1-first-content-slider .item .content{
    padding: 12px;
    gap: 8px;
    height: 132px;
    border-radius: 8px;
  }

  .box-1-first-content-slider .item::after,
  .box-1-first-content-slider .item{
    border-radius: 8px;
  }

  .box-1-first-content-slider .item .content .number{
    height: 52px;
  }

  .actions-silder-item>img{
    width: 42px;
    height: 42px;
  }

  .service-item-content{
    gap: 8px;
    padding: 16px;
    height: 180px;
  }

  .service-item-content .title{
    width: 100%;
    height: 56px;
  }

  .box-1-second::after{
    height: 204px;
  }

  .service-slider .owl-dots{
    margin-top: 16px;
    gap: 8px;
  }

  .service-slider .owl-dot.active{
    width: 24px;
  }

  .box-partner-header>.main-title, .box-partner-header>.desc{
    width: 100%;
  }

  .box-partner-content{
    gap: 12px;
  }

  .box-1-first-header, .box-partner-header{
    gap: 12px;
  }

  .footer-container{
    padding: 32px 0 0 0;
  }

  .footer-last{
    padding-bottom: 32px;
    gap: 12px;
  }

  .footer-inner{
    gap: 20px;
  }

  .footer-last .first .social{
    gap: 20px;
  }

  .footer-last .first .left{
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .footer-last .first .left .item:first-child{
    width: 100%;
    text-align: center;
  }

  .footer-last .first .left .item:not(:first-child){
    width: 48%;
    text-align: center;
  }

  .header-logo>a>img{
    width: 140px;
  }

  .header-right{
    gap: 16px;
  }

  .header-search{
    width: 36px;
    height: 36px;
  }

  .header-search>img{
    width: 18px;
    height: 18px;
  }

  .header-language-header{
    height: 36px;
  }

  .header-language-list{
    top: 38px;
  }

  .header-language-list{
    padding: 8px;
    gap: 8px;
  }

  .banner-content-right-img{
    width: 126px;
    height: 120px;
  }
  
  .banner-content-right-content,
  .actions-silder{
    gap: 8px;
  }

  .banner-content-right-content>.first{
    gap: 4px;
  }

  .service-item-content .desc{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 88px;
  }

  .box-1-first-content-slider .item .content .title{
    height: 48px;
  }
}