:root {
  --theme-default: #00a6ff;
}
body {
  background-color: rgb(245, 245, 245);
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: black;
}
p {
  margin: 0;
}
/* .section_fit_screen {
  height: 100vh;
} */
.height_unset {
  height: unset !important;
}
.hero-font-size {
  font-size: 2.7rem;
}
@media (max-width: 992px) {
  .hero-font-size {
    font-size: 2rem;
  }
  .section_content {
    margin-top: 50px;
  }
  .section_fit_screen {
    height: initial;
  }
}

.primary-font-color {
  color: var(--theme-default);
}
.section_content .title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section_content .title .main-title {
  font-size: 1.8rem;
  font-weight: bold;
}
.section_content .title .line {
  width: 60px;
  height: 5px;
  background: var(--theme-default);
}

.card-service img {
  height: 50px;
}
.card-service .title_service {
  margin-top: 12px;
  color: var(--theme-default);
  font-size: 1.2rem;
  font-weight: bold;
}
.card-service ul {
  margin-top: 12px;
  list-style-type: disc var(--theme-default);
  margin-left: 1rem;
}
.card-service ul li {
  font-weight: bold;
}
.card-service ul li::marker {
  color: var(--theme-default);
}
.box-info {
  background-size: cover;
  overflow: hidden;
  border-radius: 2rem;
  overflow-y: hidden;
  position: relative;
}

.box-info::before {
  content: "";
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 100px;
  top: -50px;
  left: -50px;
}
.box-info .main-title {
  font-size: 2rem;
  font-weight: bold;
}
.box-info .btn-redesign {
  background-color: #d9deee;
  color: #6878ac;
}
.box-info .info-image {
  height: 500px;
  object-position: center;
}
@media (max-width: 992px) {
  .box-info {
    zoom: 0.5;
  }
  .box-info .info-image {
    height: 400px;
    object-position: center;
  }
}
/* // redesign */
.redesign::before {
  background-color: #d9dff2;
}

.redesign {
  background-color: #edf0f9;
}
.box-info .btn-redesign {
  background-color: #d9deee;
  color: #6878ac;
}
/* // saasup */
.saasup::before {
  background-color: #e3e3e3;
}
.saasup {
  background-color: #eaeaea;
}
.box-info .btn-saasup {
  background-color: #dfdfdf;
  color: #6878ac;
}
/* //ai_vision */
.ai_vision::before {
  background-color: #ffc9dc;
}
.ai_vision {
  background-color: #abebff;
}
.box-info .btn-ai_vision {
  background-color: #ffffff;
  color: #5ab5d1;
}

/* //prototyping */
.prototyping::before {
  background-color: #f4e5d8;
}
.prototyping {
  background-color: #fff3e9;
}
.box-info .btn-prototyping {
  background-color: #eccfb8;
  color: #ae7e56;
}

.splash_screen {
  height: 100vh;
  background: rgb(233, 233, 233);
}
html {
  scroll-behavior: smooth !important;
}
html:focus-within {
  scroll-behavior: smooth !important;
}
.scroll {
  position: relative;
  animation: down 1.5s infinite;
  -webkit-animation: down 1.5s infinite;
  cursor: pointer;
  &::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 18px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(-45deg);
  }
}

@keyframes down {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translateY(15px);
  }
  40% {
    transform: translate(0);
  }
}

@-webkit-keyframes down {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translateY(15px);
  }
  40% {
    transform: translate(0);
  }
}

.header-card {
  border-radius: 0;
}
.menu li {
  cursor: pointer;
}
.menu .active {
  background-color: var(--theme-default) !important;
  border-color: var(--theme-default) !important;
  color: white;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
}
.sidebar-drawer .el-drawer__header {
  margin-bottom: 0;
}
.sidebar-drawer .el-drawer__body {
  padding: 0;
  padding-top: 8px;
}

.mobile-drawer-menu ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-drawer-menu ul li:active {
  color: white;
}

.footer-container {
  position: relative;
  z-index: 2;
  padding: 12px 0;
  margin-top: 150px;
  background: white;
}
.footer-container ul {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
}

.copy-right {
  color: gray;
  font-size: 12px;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #00a6ff;
  --bs-btn-border-color: #00a6ff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #27a9f0;
  --bs-btn-hover-border-color: #1ba2eb;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0c84c5;
  --bs-btn-active-border-color: #0c84c5;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #00a6ff;
  --bs-btn-disabled-border-color: #00a6ff;
}

@media (min-width: 992px) {
  .min-992-none {
    display: none !important;
  }
}
@media (max-width: 992px) {
  .max-992-none {
    display: none !important;
  }
}