@import "icons.css";
@import "buttons.css";
@import "fonts.css";

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --bs-gutter-x: 1.5rem;

  --alert: #ff5c33;
  --black: #121212;
  --blue-100: #95beff;
  --blue-200-rgb: 116, 165, 243;
  --blue-200: #74a5f3;
  --blue-300: #185ca2;
  --blue-light: #becedb;
  --blue: #007bff;
  --gray: #797979;
  --green-100: #62cfa1;
  --green-200-rgb: 41, 173, 141;
  --green-200: #29ad8d;
  --green: #35a62b;
  --orange-100: #ff7c7c;
  --orange-200-rgb: 255, 110, 78;
  --orange-200: #ff6e4e;
  --orange: #ef7b1a;
  --purple-100: #dcafff;
  --purple-200-rgb: 181, 117, 231;
  --purple-200: #b575e7;
  --purple: #8f00ff;
  --sky-blue: #f3f9ff;
  --turquoise: #2edfcf;
  --yellow-100: #ffc368;
  --yellow-200-rgb: 255, 194, 38;
  --yellow-200: #ffc226;
  --yellow: #ffe12b;

  --icon-arrow-right: url("data:image/svg+xml,%3Csvg width='27' height='16' viewBox='0 0 27 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.8431 0.92888L26.2071 7.29284C26.5976 7.68336 26.5976 8.31653 26.2071 8.70705L19.8431 15.071C19.4526 15.4615 18.8195 15.4615 18.4289 15.071C18.0384 14.6805 18.0384 14.0473 18.4289 13.6568L23.0858 8.99995H0.5V6.99995H23.0858L18.4289 2.34309C18.0384 1.95257 18.0384 1.3194 18.4289 0.92888C18.8195 0.538355 19.4526 0.538355 19.8431 0.92888Z' fill='%23185CA2'/%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 8L0 0L13 1.10124e-06L6.5 8Z' fill='%23007BFF'/%3E%3C/svg%3E");
  --icon-check-alt: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='3' fill='white' fill-opacity='0.3'/%3E%3Cg clip-path='url(%23clip0_1_19993)'%3E%3Cpath d='M7.82649 10.1049L4.70609 7.15881L3.14648 8.63186L7.82649 13.0498L14.8465 6.42287L13.2869 4.94983L7.82649 10.1049Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.1' width='18' height='18' rx='3' fill='%23007BFF'/%3E%3Cg clip-path='url(%23clip0_1_19893)'%3E%3Cpath d='M7.82649 10.1049L4.70609 7.15881L3.14648 8.63186L7.82649 13.0498L14.8465 6.42287L13.2869 4.94983L7.82649 10.1049Z' fill='%23007BFF'/%3E%3C/g%3E%3C/svg%3E");
  --icon-list: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 0C2.68629 0 0 2.68629 0 6V20C0 23.3137 2.68629 26 6 26H20C23.3137 26 26 23.3137 26 20V6C26 2.68629 23.3137 0 20 0H6ZM6.79769 10.3407L11.3049 14.5961L19.1922 7.1499L21.4449 9.27763L11.3049 18.8499L4.54492 12.4684L6.79769 10.3407Z' fill='%23007BFF'/%3E%3C/svg%3E");
  --icon-puzzle: url("data:image/svg+xml,%3Csvg width='63' height='69' viewBox='0 0 63 69' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_63916)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39.8692 54.3564C39.8658 53.114 39.3723 51.9236 38.4971 51.0463C37.6218 50.169 36.4362 49.6764 35.2001 49.6764C33.0672 49.6764 32.7117 50.7658 31.1185 51.3105C29.7746 51.7767 28.7146 51.2015 28.6236 48.0641V39.9808H19.7363C17.3519 39.7324 16.9184 38.7454 17.3519 37.5253C17.9025 35.9261 18.9776 35.5644 18.9776 33.4226C18.991 32.798 18.8802 32.1769 18.6516 31.5958C18.423 31.0148 18.0813 30.4855 17.6465 30.0389C17.2117 29.5924 16.6926 29.2376 16.1196 28.9954C15.5466 28.7532 14.9312 28.6284 14.3096 28.6284C13.688 28.6284 13.0726 28.7532 12.4996 28.9954C11.9266 29.2376 11.4075 29.5924 10.9727 30.0389C10.5379 30.4855 10.1962 31.0148 9.96764 31.5958C9.73907 32.1769 9.62823 32.798 9.64162 33.4226C9.64162 35.7169 10.9682 36.1374 11.354 37.8303C11.6012 38.9066 11.0592 39.7542 8.87428 39.9808H0V68.7408H8.03974C11.1633 68.6471 11.7377 67.5817 11.2717 66.2352C10.7189 64.6359 9.64595 64.2743 9.64595 62.1325C9.63256 61.5078 9.7434 60.8868 9.97197 60.3057C10.2005 59.7247 10.5422 59.1954 10.977 58.7488C11.4118 58.3023 11.9309 57.9475 12.504 57.7053C13.077 57.4631 13.6923 57.3383 14.3139 57.3383C14.9356 57.3383 15.5509 57.4631 16.1239 57.7053C16.6969 57.9475 17.2161 58.3023 17.6509 58.7488C18.0856 59.1954 18.4273 59.7247 18.6559 60.3057C18.8845 60.8868 18.9953 61.5078 18.9819 62.1325C18.9819 64.4268 17.6553 64.8473 17.2673 66.5402C16.9921 67.7429 17.7009 68.658 20.5838 68.743H28.6236V60.6575C28.7081 57.7619 29.6185 57.0494 30.815 57.3261C32.4993 57.7161 32.9176 59.0495 35.2001 59.0495C36.4385 59.0495 37.6261 58.5551 38.5017 57.675C39.3773 56.7948 39.8692 55.6011 39.8692 54.3564Z' fill='url(%23paint0_linear_1_63916)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 11.3036H8.04191C10.9249 11.2186 11.6315 10.3013 11.3562 9.09865C10.9704 7.40574 9.64379 6.98741 9.64379 4.69315C9.63039 4.06847 9.74123 3.4474 9.9698 2.86636C10.1984 2.28531 10.5401 1.756 10.9749 1.30945C11.4097 0.862902 11.9288 0.508118 12.5018 0.265905C13.0748 0.0236913 13.6902 -0.101074 14.3118 -0.101074C14.9334 -0.101074 15.5488 0.0236913 16.1218 0.265905C16.6948 0.508118 17.2139 0.862902 17.6487 1.30945C18.0835 1.756 18.4252 2.28531 18.6538 2.86636C18.8823 3.4474 18.9932 4.06847 18.9798 4.69315C18.9798 6.83707 17.896 7.19439 17.354 8.7958C16.888 10.1445 17.4603 11.2121 20.586 11.3036H28.6236V19.3912C28.5303 22.5287 27.4704 23.0952 26.1264 22.6376C24.5354 22.082 24.1756 21.0035 22.0448 21.0035C20.8242 21.03 19.6624 21.5359 18.8085 22.413C17.9545 23.29 17.4763 24.4684 17.4763 25.6956C17.4763 26.9227 17.9545 28.1011 18.8085 28.9781C19.6624 29.8552 20.8242 30.3611 22.0448 30.3876C24.3273 30.3876 24.7457 29.0542 26.4299 28.6642C27.6264 28.3896 28.5368 29.0999 28.6236 31.9955V40.0788H20.5925C17.4668 39.9851 16.8945 38.9197 17.3605 37.5689C17.9111 35.9696 18.9863 35.608 18.9863 33.4662C18.96 32.2393 18.4566 31.0716 17.5841 30.2132C16.7115 29.3549 15.5392 28.8742 14.3183 28.8742C13.0974 28.8742 11.9251 29.3549 11.0525 30.2132C10.18 31.0716 9.67659 32.2393 9.65029 33.4662C9.65029 35.7605 10.9769 36.181 11.3627 37.8739C11.638 39.0766 10.9292 39.9917 8.04841 40.0788H0V11.3036Z' fill='url(%23paint1_linear_1_63916)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M62.9994 69V60.1563C62.7827 57.8969 61.9351 57.337 60.8513 57.5875C59.1671 57.9775 58.7509 59.311 56.4684 59.311C55.8552 59.311 55.2481 59.1896 54.6816 58.9537C54.1151 58.7179 53.6004 58.3722 53.1668 57.9364C52.7333 57.5006 52.3893 56.9832 52.1547 56.4138C51.9201 55.8444 51.7993 55.2342 51.7993 54.6179C51.7993 54.0015 51.9201 53.3913 52.1547 52.8219C52.3893 52.2525 52.7333 51.7351 53.1668 51.2993C53.6004 50.8635 54.1151 50.5178 54.6816 50.282C55.2481 50.0461 55.8552 49.9247 56.4684 49.9247C58.6013 49.9247 58.9568 51.0141 60.55 51.5588C61.7747 51.9946 62.7653 51.5436 62.9994 49.075V39.7563H34.3867V47.9682C34.4778 51.1601 35.5399 51.7462 36.8838 51.2691C38.4749 50.7069 38.8347 49.6088 40.9655 49.6088C42.2239 49.6088 43.4308 50.1113 44.3207 51.0057C45.2105 51.9002 45.7104 53.1133 45.7104 54.3782C45.7104 55.6431 45.2105 56.8562 44.3207 57.7506C43.4308 58.6451 42.2239 59.1476 40.9655 59.1476C38.683 59.1476 38.2646 57.7923 36.5804 57.4045C35.3838 57.1235 34.4734 57.8403 34.3867 60.7904V69.0066L62.9994 69Z' fill='url(%23paint2_linear_1_63916)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1_63916' x1='19.7016' y1='48.4955' x2='4.89317' y2='64.4272' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2394E69A'/%3E%3Cstop offset='1' stop-color='%2317ADC9'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_1_63916' x1='16.2117' y1='23.6007' x2='2.20462' y2='38.8328' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23235DA3'/%3E%3Cstop offset='1' stop-color='%23123A76'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_1_63916' x1='61.9568' y1='54.7268' x2='37.3063' y2='54.0863' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FDD248'/%3E%3Cstop offset='1' stop-color='%23FABD23'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_1_63916'%3E%3Crect width='63' height='69' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  --icon-quote-alt: url("data:image/svg+xml,%3Csvg width='45' height='28' viewBox='0 0 45 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.14832 13.8484H16.0822C17.8228 13.8484 18.8215 13.9917 19.0783 14.2783C19.3636 14.5649 19.5063 15.5824 19.5063 17.3308V22.5761C19.5063 25.0697 19.4064 26.5745 19.2067 27.0904C19.0355 27.5777 18.3507 27.8213 17.1522 27.8213H5.29618C2.81369 27.8213 1.3299 27.7353 0.844814 27.5633C0.35973 27.3627 0.117188 26.6605 0.117188 25.4566V17.3308C0.117188 14.4359 0.773478 11.5124 2.08606 8.56014C3.42717 5.57925 4.86816 2.99963 6.40902 0.821289L12.8721 1.38021C11.16 4.90568 10.0186 8.44549 9.44793 11.9996L9.14832 13.8484ZM24.6853 24.4248L24.7281 17.3308C24.7281 14.4359 25.3844 11.5124 26.697 8.56014C28.0381 5.60791 29.4933 3.0283 31.0627 0.821289L37.4829 1.38021C35.7709 4.90568 34.6295 8.44549 34.0588 11.9996L33.7592 13.8484H40.6503C42.3909 13.8484 43.4038 13.9917 43.6892 14.2783C43.9745 14.5649 44.1172 15.5824 44.1172 17.3308V22.5761C44.1172 25.0697 44.0173 26.5745 43.8176 27.0904C43.6464 27.5777 42.9615 27.8213 41.7631 27.8213H29.9499C27.4388 27.8213 25.9265 27.7353 25.4129 27.5633C24.9278 27.3627 24.6853 26.6605 24.6853 25.4566V24.4248Z' fill='white'/%3E%3C/svg%3E");
  --icon-quote: url("data:image/svg+xml,%3Csvg width='33' height='20' viewBox='0 0 33 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.2267 10.3503H21.0263C19.7208 10.3503 18.9718 10.2442 18.7792 10.0318C18.5652 9.81953 18.4582 9.06582 18.4582 7.7707V3.88535C18.4582 2.03822 18.5331 0.923567 18.6829 0.541401C18.8113 0.180467 19.3249 0 20.2237 0H29.1158C30.9776 0 32.0905 0.0636935 32.4543 0.191082C32.8181 0.339702 33 0.859873 33 1.75159V7.7707C33 9.91507 32.5078 12.0807 31.5233 14.2675C30.5175 16.4756 29.4368 18.3864 28.2811 20L23.4339 19.586C24.7179 16.9745 25.5739 14.3524 26.0019 11.7197L26.2267 10.3503ZM14.5739 2.51592L14.5418 7.7707C14.5418 9.91507 14.0496 12.0807 13.0652 14.2675C12.0593 16.4544 10.9679 18.3652 9.79086 20L4.97568 19.586C6.25973 16.9745 7.11576 14.3524 7.54377 11.7197L7.76848 10.3503H2.60019C1.29475 10.3503 0.535018 10.2442 0.321011 10.0318C0.107003 9.81953 0 9.06582 0 7.7707V3.88535C0 2.03822 0.0749031 0.923567 0.224709 0.541401C0.353113 0.180467 0.866731 0 1.76556 0H10.6255C12.5088 0 13.643 0.0636935 14.0282 0.191082C14.392 0.339702 14.5739 0.859873 14.5739 1.75159V2.51592Z' fill='%23007BFF'/%3E%3C/svg%3E");
  --icon-view: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.1184 4.01071L10.2756 0.167857C10.1684 0.0607143 10.0238 0 9.87199 0H2.28627C1.9702 0 1.71484 0.255357 1.71484 0.571429V15.4286C1.71484 15.7446 1.9702 16 2.28627 16H13.7148C14.0309 16 14.2863 15.7446 14.2863 15.4286V4.41607C14.2863 4.26429 14.2256 4.11786 14.1184 4.01071ZM12.9684 4.67857H9.6077V1.31786L12.9684 4.67857ZM13.0006 14.7143H3.00056V1.28571H8.39342V5.14286C8.39342 5.34177 8.47243 5.53254 8.61309 5.67319C8.75374 5.81384 8.9445 5.89286 9.14342 5.89286H13.0006V14.7143Z' fill='%23007BFF'/%3E%3C/svg%3E");
}

::placeholder {
  color: var(--blue-light) !important;
  opacity: 1;
}

body,
input,
textarea,
option,
select {
  font-family: "Noto Sans TC", sans-serif;
}

.ff-roboto {
  font-family: "Roboto", sans-serif;
}

.ff-work-sans {
  font-family: "Work Sans", sans-serif;
}

.ff-montserrat {
  font-family: "Montserrat", sans-serif;
}

.ff-pt-sans-caption {
  font-family: "PT Sans Caption", sans-serif;
}

.ff-manrope {
  font-family: "Manrope", sans-serif;
}

.text-medium {
  font-weight: 500;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

@media (min-width: 992px) {
  .text-lg-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/***********************************************
 Menu
/**********************************************/

.menu {
  display: none;
  padding-top: 20px;
}

@media (min-width: 992px) {
  .menu {
    display: block;
    padding-top: 0;
  }
}

.menu.active {
  display: block;
}

.menu ul {
  font-size: 16px;
  list-style: none;
  padding: 0;
  text-align: center;
}

@media (min-width: 992px) {
  .menu ul {
    display: flex;
    font-size: 22px;
    gap: 38px;
    text-align: left;
    text-shadow: 0px 2px 2px rgba(var(--bs-black-rgb), 0.25);
  }
}

.menu li {
  margin: 30px 0;
}

@media (min-width: 992px) {
  .menu li {
    margin: 0;
  }
}

.menu li a {
  color: var(--bs-white);
  display: block;
  font-weight: 500;
  text-decoration: none;
}

@media (min-width: 992px) {
  .menu li a {
    font-weight: 700;
  }
}

.menu li.active {
  position: relative;
}

.menu li.active::before {
  background-color: rgba(var(--bs-white-rgb), 0.3);
  bottom: 0;
  content: "";
  height: 8px;
  left: 50%;
  position: absolute;
  transform: skew(-30deg) translateX(-50%);
  width: 47px;
  z-index: -1;
}

/***********************************************
 Menu Hamburger
/**********************************************/

.menu-hamburger {
  cursor: pointer;
  display: block;
  height: 26px;
  position: relative;
  width: 40px;
}

.menu-hamburger.active .icon-hamburger {
  background: transparent;
}

.menu-hamburger.active .icon-hamburger:before {
  top: 0;
  transform: rotate(-45deg);
}

.menu-hamburger.active .icon-hamburger:after {
  top: 0;
  transform: rotate(45deg);
}

/***********************************************
 Submenu
/**********************************************/

@media (min-width: 992px) {
  .submenu {
    font-size: 18px;
  }
}

.submenu ul {
  display: flex;
  list-style: none;
  padding-left: 0;
}

@media (min-width: 992px) {
  .submenu ul {
    display: block;
  }
}

.submenu li {
  margin-bottom: 12px;
  position: relative;
  width: 100%;
}

@media (min-width: 992px) {
  .submenu li {
    width: auto;
  }
}

.submenu li::before {
  background-color: var(--blue-light);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%;
}

@media (min-width: 992px) {
  .submenu li::before {
    content: none;
  }
}

.submenu li a {
  color: #242424;
  display: block;
  font-weight: 500;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

@media (min-width: 992px) {
  .submenu li a {
    border-radius: 5px;
    border: 1px solid var(--blue-light);
    text-align: left;
  }
}

.submenu li a:hover,
.submenu li.active a {
  color: var(--blue);
  font-weight: bold;
}

@media (min-width: 992px) {
  .submenu li a:hover,
  .submenu li.active a {
    border: 1px solid var(--blue);
  }
}

.submenu li.active::before {
  background-color: var(--blue);
  height: 2px;
}

/***********************************************
 General
/**********************************************/

.container {
  max-width: 1440px;
}

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

.container-full {
  margin-left: auto;
  margin-right: auto;
  max-width: 1610px;
  padding-left: calc(1.5rem * 0.5);
  padding-right: calc(1.5rem * 0.5);
  width: 100%;
}

@media (min-width: 992px) {
  .bg-lg-white {
    background-color: var(--bs-white);
  }
}

.bg-blue {
  background: linear-gradient(123deg, #2db3ff 24.39%, #525fcc 89.85%);
}

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

.bg-light-blue {
  background: linear-gradient(180deg, #f3faff 0%, #f6f8f8 100%);
}

@media (min-width: 992px) {
  .bg-lg-light-blue {
    background: linear-gradient(180deg, #f3faff 0%, #f6f8f8 100%);
  }
}

.hpx-max-240 {
  max-height: 240px;
}

.border-top-30 {
  border-top: 1px solid rgba(var(--bs-white-rgb), 0.3);
}

@media (min-width: 992px) {
  .shadow-form {
    box-shadow: 0px 4px 44px 0px rgba(138, 175, 232, 0.37);
  }
}

.lh-10 {
  line-height: 1;
}

.lh-11 {
  line-height: 1.1;
}

.lh-12 {
  line-height: 1.2;
}

.lh-13 {
  line-height: 1.3;
}

.lh-14 {
  line-height: 1.4;
}

.lh-15 {
  line-height: 1.5;
}

.lh-16 {
  line-height: 1.6;
}

.lh-17 {
  line-height: 1.7;
}

label {
  color: var(--blue);
  font-weight: 700;
}

@media (min-width: 992px) {
  label {
    font-size: 18px;
  }
}

.text-shadow {
  text-shadow: 1px 1px 1px #fbffd1;
}

@media (min-width: 992px) {
  .text-lg-shadow {
    text-shadow: none;
  }
}

.text-primary,
.hover\:text-primary:hover {
  color: var(--blue) !important;
}

.text-gray,
.hover\:text-gray:hover {
  color: var(--gray) !important;
}

.text-orange,
.hover\:text-orange:hover {
  color: var(--orange) !important;
}

.text-green,
.hover\:text-green:hover {
  color: var(--green) !important;
}

.text-purple,
.hover\:text-purple:hover {
  color: var(--purple) !important;
}

.text-blue-300 {
  color: var(--blue-300) !important;
}

@media (min-width: 992px) {
  .text-lg-dark {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
  }
}

.border-turquoise {
  border-color: var(--turquoise);
}

.border-orange {
  border-color: var(--orange);
}

.border-purple {
  border-color: var(--purple);
}

.border-green {
  border-color: var(--green);
}

.border-primary {
  border-color: var(--primary);
}

.text-alert {
  color: var(--alert);
}

.text-justify {
  text-align: justify;
}

.text-heading {
  background: linear-gradient(90deg, #60a9ff 0%, #06e4bc 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-heading-blue {
  background: linear-gradient(123deg, #2db3ff 24.39%, #525fcc 89.85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-heading-purple {
  background: linear-gradient(90deg, #7b81ff 1.64%, #0ddbf6 100.77%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-heading-yellow {
  background: linear-gradient(180deg, #ffbb4d 0%, #f6a31d 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-heading-green {
  background: linear-gradient(180deg, #a3d416 0%, #5eb11c 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 992px) {
  .bg-service {
    background-image: image-set(
      url("../../front/images/bg-service.png") 1x,
      url("../../front/images/bg-service@2x.png") 2x
    );
    background-position: center 510px;
    background-repeat: no-repeat;
  }
}

.bg-tool {
  background-image: image-set(
    url("../../front/images/tool.jpg") 1x,
    url("../../front/images/tool@2x.jpg") 2x
  );
  background-position: right 107.5%;
  background-repeat: no-repeat;
}

@media (max-width: 991px) {
  .bg-tool.register {
    background: transparent;
  }
}

.bg-tool-small {
  background-size: 40%;
  background-position: 111% 101.5%;
}

.rounded-btn {
  border-radius: 30px;
}

.wpx-28 {
  width: 28px;
}

.wpx-36 {
  width: 36px;
}

.wpx-75 {
  width: 75px;
}

.wpx-80 {
  width: 80px;
}

.wpx-120 {
  width: 120px;
}

.wpx-140 {
  width: 140px;
}

.wpx-150 {
  width: 150px;
}

@media (min-width: 768px) {
  .w-md-auto {
    width: auto !important;
  }
}

@media (min-width: 992px) {
  .w-lg-auto {
    width: auto !important;
  }

  .w-lg-100 {
    width: 100% !important;
  }

  .wpx-lg-75 {
    width: 75px !important;
  }

  .wpx-lg-105 {
    width: 105px;
  }

  .wpx-lg-120 {
    width: 120px !important;
  }

  .bottom-lg-n20 {
    bottom: -20px;
    position: relative;
  }
}

.wpx-min-160 {
  min-width: 160px !important;
}

.wpx-min-320 {
  min-width: 320px !important;
}

.wpx-max-460 {
  max-width: 460px;
}

.wpx-max-550 {
  max-width: 550px;
}

@media (min-width: 992px) {
  .wpx-min-lg-190 {
    min-width: 190px !important;
  }

  .mt-lg-n5 {
    margin-top: -10px;
  }
}

.mt-n1 {
  margin-top: -2px;
}

.mt-n4 {
  margin-top: -1.5rem;
}

.mx-n4 {
  margin-left: calc(-1.5rem * 0.5);
  margin-right: calc(-1.5rem * 0.5);
}

.mbpx-n40 {
  margin-bottom: -40px;
}

@media (min-width: 992px) {
  .g-lg-c4 {
    --bs-gutter-y: 2rem;
    --bs-gutter-x: 2rem;
  }
}

/***********************************************
 Max Width
/**********************************************/

.wmax-px-730 {
  max-width: 730px;
}

.wmax-px-700 {
  max-width: 700px;
}

/***********************************************
 Main
/**********************************************/

@media (min-width: 992px) {
  .main {
    background-image: image-set(
      url("../../front/images/header.png") 1x,
      url("../../front/images/header@2x.png") 2x
    );
    background-position: top center;
    background-repeat: no-repeat;
  }
}

/***********************************************
 Banner
/**********************************************/

.header {
  height: 46px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.header .container {
  position: relative;
  z-index: 1;
}

.header::before {
  backdrop-filter: blur(5.5px);
  background: linear-gradient(
    123deg,
    rgba(45, 179, 255, 0.95) 24.39%,
    rgba(82, 95, 204, 0.95) 89.85%
  );
  content: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.header::after {
  background-image: image-set(
    url("../../front/images/menu.png") 1x,
    url("../../front/images/menu@2x.png") 2x
  );
  background-position: bottom right;
  background-repeat: no-repeat;
  bottom: 0;
  content: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.header.active::after,
.header.active::before {
  content: "";
}

@media (min-width: 992px) {
  .header {
    height: auto;
    left: auto;
    position: relative;
    top: auto;
    width: auto;
    z-index: 2;
  }

  .header.active::after,
  .header.active::before {
    content: none;
  }
}

.header.active .header-wrap {
  display: block;
}

@media (min-width: 992px) {
  .header-wrap {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    padding-top: 3rem;
    width: 100%;
  }
}

.header-content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  height: 46px;
}

@media (min-width: 992px) {
  .header-content {
    height: auto;
  }
}

/***********************************************
 Banner
/**********************************************/

.banner {
  color: var(--bs-white);
  position: relative;
}

@media (min-width: 992px) {
  .banner {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 575px;
    text-align: center;
  }
}

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

@media (min-width: 992px) {
  .banner-wrap {
    padding-bottom: 50px;
  }
}

.banner-name {
  background: -webkit-linear-gradient(var(--bs-white), transparent);
  display: none;
  font-family: "Roboto", sans-serif;
  font-size: 75px;
  font-weight: 500;
  line-height: 1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 992px) {
  .banner-name {
    display: block;
  }
}

.banner-title {
  font-size: 18px;
  font-weight: 700;
  margin-top: -37px;
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) {
  .banner-title {
    font-size: 24px;
  }
}

.banner-title span {
  display: inline-block;
  position: relative;
}

.banner-title span::before {
  background-color: var(--blue);
  bottom: -15%;
  content: "";
  height: 22px;
  left: 50%;
  position: absolute;
  transform: skew(-25deg) translateX(-50%);
  width: 125%;
  z-index: -1;
}

/***********************************************
 Forms
/**********************************************/

.form-control {
  background-color: #f0faff;
  border-color: transparent;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  height: 40px;
  min-height: 39px;
}

@media (min-width: 992px) {
  .form-control {
    font-size: 18px;
    height: 56px;
    min-height: 55px;
  }
}

.form-control:focus {
  background-color: #f0faff;
  border-color: var(--blue);
  box-shadow: none;
}

@media (min-width: 992px) {
  .form-control-lg {
    border-radius: 12px;
    font-size: 20px;
    height: 73px;
    min-height: 72px;
  }
}

.form-news {
  background: var(--bs-white);
  border-radius: 50px;
  box-shadow: 0px 7px 25px 0px rgba(var(--bs-black-rgb), 0.1);
  display: flex;
  height: 34px;
  width: 227px;
}

@media (min-width: 992px) {
  .form-news {
    height: 50px;
    width: 265px;
  }
}

.form-news input {
  color: #a1bbd6;
  font-size: 14px;
  font-weight: 400;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

@media (min-width: 992px) {
  .form-news input {
    font-size: 16px;
  }
}

.form-news input,
.form-news button {
  background-color: transparent;
  border-radius: 0;
  border: none;
  outline: none;
}

.form-select {
  background-image: var(--icon-arrow);
  background-position: right 1.15rem center;
  background-size: 13px 8px;
  cursor: pointer;
  padding-left: 15px;
}

.form-control:disabled {
  background-color: var(--blue-light);
}

/***********************************************
 Download
/**********************************************/

.download-item {
  font-weight: 500;
}

@media (min-width: 992px) {
  .download-item {
    align-items: center;
    border-radius: 8px;
    border: 1px solid #cecece;
    display: flex;
    padding: 12px 16px;
  }
}

.download-wrap .download-item:last-child {
  border-bottom: 1px solid #becedb;
  padding-bottom: 25px;
}

@media (min-width: 992px) {
  .download-wrap .download-item:last-child {
    border-color: #becedb;
    padding-bottom: 12px;
  }
}

.download-content {
  align-items: center;
  border-radius: 8px;
  border: 1px solid #cecece;
  display: flex;
  padding: 6px 8px;
}

@media (min-width: 992px) {
  .download-content {
    border-radius: 0;
    border: none;
    padding: 0;
  }
}

/***********************************************
 Faq
/**********************************************/

.faq-item {
  font-weight: 500;
  margin-bottom: 20px;
}

@media (min-width: 992px) {
  .faq-item {
    display: flex;
    font-size: 18px;
    margin-bottom: 50px;
  }
}

.faq-item:last-child {
  margin-bottom: 30px;
}

.faq-name {
  color: var(--blue);
  margin-bottom: 0.25rem;
  margin-right: 15px;
}

@media (min-width: 992px) {
  .faq-name {
    margin-bottom: 0;
    white-space: nowrap;
    width: 75px;
  }
}

.faq-content {
  border-bottom: 1px dashed var(--gray);
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  width: calc(100% - 10px);
}

.faq-content.none {
  border-bottom: none;
  padding-bottom: 0;
}

/***********************************************
 Step
/**********************************************/

.step {
  display: flex;
  font-size: 14px;
  margin-bottom: 45px;
  text-align: center;
}

@media (min-width: 992px) {
  .step {
    border-radius: 8px;
    box-shadow: 0px 2px 10px 0px rgba(var(--bs-black-rgb), 0.1);
    color: #a7a7a7;
    padding: 20px;
  }
}

.step-item {
  width: 33%;
}

.step-date {
  font-size: 12px;
}

.step-name {
  font-weight: 600;
}

.step-item.active .step-name {
  color: var(--blue);
}

.step-item.active .step-date {
  color: #242424;
}

.step-item:first-child .step-circle::before,
.step-item:last-child .step-circle::after {
  content: none;
}

.step-circle {
  position: relative;
  margin: auto auto 5px;
}

.step-circle::before,
.step-circle::after {
  background-color: var(--blue-light);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
}

.step-circle::after {
  left: auto;
  right: 0;
}

.step-circle span {
  background-color: var(--bs-white);
  border-radius: 50%;
  border: 1px solid var(--blue-light);
  display: block;
  height: 16px;
  margin: auto;
  position: relative;
  width: 16px;
  z-index: 1;
}

.step-item.active .step-circle span {
  border-color: var(--blue);
}

.step-circle span::before {
  background-color: var(--blue-light);
  border-radius: 50%;
  content: "";
  height: 8px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
}

.step-item.active .step-circle span::before {
  background-color: var(--blue);
}

.step-item.active + .step-item .step-circle::before,
.step-item.active .step-circle::after {
  background-color: var(--bs-white);
  background-image: linear-gradient(
    90deg,
    var(--blue-light),
    var(--blue-light) 50%,
    transparent 50%,
    transparent 100%
  );
  background-size: 4px 1px;
  border: none;
}

/***********************************************
 Heading
/**********************************************/

.heading {
  background-image: var(--icon-puzzle);
  background-repeat: no-repeat;
  height: 69px;
  margin-bottom: 15px;
  padding-left: 75px;
  padding-top: 10px;
  position: relative;
}

.heading::before {
  background-color: var(--bs-white);
  background-image: linear-gradient(
    90deg,
    var(--blue),
    var(--blue) 50%,
    transparent 50%,
    transparent 100%
  );
  background-size: 4px 1px;
  border: none;
  bottom: 0;
  content: "";
  height: 1px;
  position: absolute;
  right: 0;
  width: calc(100% - 66px);
}

.heading::after {
  background-color: var(--bs-white);
  border-radius: 50%;
  border: 1px solid var(--blue);
  bottom: -3px;
  content: "";
  height: 8px;
  position: absolute;
  right: 0;
  width: 8px;
}

.heading-name {
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

.heading-title {
  background: linear-gradient(90deg, #60a9ff 0%, #06e4bc 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
  font-weight: 700;
}

/***********************************************
 Table Member
/**********************************************/

@media (max-width: 991px) {
  .table-member,
  .table-member td,
  .table-member th,
  .table-member tr,
  .table-member thead,
  .table-member tbody,
  .table-member tfoot {
    display: block;
  }

  .table-member .wpx-140,
  .table-member .wpx-120 {
    width: auto;
  }

  .table-member thead {
    display: none;
  }

  .table-member tbody td:first-child,
  .table-member tbody td:last-child,
  .table-member tbody td {
    border: none;
  }

  .table-member tr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }

  .table-member tbody td.table-member-content {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom: 1px solid #becedb;
    border-left: 1px solid #becedb;
    border-right: 1px solid #becedb;
    order: 5;
    padding-top: 0;
    position: relative;
    width: 100%;
  }

  .table-member tbody td.table-member-content::before {
    border-top: 1px dashed #becedb;
    content: "";
    display: block;
    height: 0;
    margin-bottom: 10px;
    width: 100%;
  }

  .table-member tbody td.table-member-report {
    background-color: var(--blue);
    border-top-left-radius: 8px;
    color: var(--bs-white);
    font-size: 14px;
    font-weight: 700;
    width: 60%;
  }

  .table-member tbody td.table-member-report::before {
    content: attr(data-title) ": ";
  }

  .table-member tbody td.table-member-date {
    background-color: var(--blue);
    border-top-right-radius: 8px;
    color: var(--bs-white);
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    width: 40%;
  }

  .table-member tbody td.table-member-number {
    align-items: center;
    border-left: 1px solid #becedb;
    color: var(--blue);
    display: flex;
    font-size: 14px;
    font-weight: 700;
  }

  .table-member tbody td.table-member-button {
    border-right: 1px solid #becedb;
  }

  .table-member tbody .btn {
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
  }
}

.table-member {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  table-layout: fixed;
}

.table-member th:first-child {
  border-top-left-radius: 4px;
}

.table-member th:last-child {
  border-top-right-radius: 4px;
}

.table-member th,
.table-member td {
  padding-left: 15px;
  padding-right: 15px;
  vertical-align: middle;
}

.table-member th {
  background-color: var(--blue);
  border-bottom: none;
  color: var(--bs-white);
  font-weight: bold;
  padding-bottom: 10px;
  padding-top: 10px;
}

.table-member td {
  border-bottom: 1px solid var(--blue-light);
  border-top: none;
}

.table-member td:first-child {
  border-left: 1px solid var(--blue-light);
}

.table-member td:last-child {
  border-right: 1px solid var(--blue-light);
}

@media (min-width: 992px) {
  .table-member tr:hover td {
    background-color: #f0faff;
  }

  .table-member tr:hover td.table-member-content {
    color: var(--blue);
  }
}

.table-member tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}

.table-member tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

/***********************************************
 Border
/**********************************************/

.border-center {
  align-items: center;
  display: flex;
  position: relative;
  white-space: nowrap;
}

.border-center span {
  font-weight: 500;
  padding-left: 13px;
  padding-right: 13px;
}

.border-center::before,
.border-center::after {
  background-color: #a7a7a7;
  content: "";
  height: 1px;
  width: 100%;
}

/***********************************************
 Upload
/**********************************************/

.upload {
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
  background-image: repeating-linear-gradient(
      0deg,
      var(--blue),
      var(--blue) 6px,
      transparent 6px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      var(--blue),
      var(--blue) 6px,
      transparent 6px,
      transparent 12px
    ),
    repeating-linear-gradient(
      180deg,
      var(--blue),
      var(--blue) 6px,
      transparent 6px,
      transparent 12px
    ),
    repeating-linear-gradient(
      270deg,
      var(--blue),
      var(--blue) 6px,
      transparent 6px,
      transparent 12px
    );
  border-image: repeating-linear-gradient(
    0deg,
    var(--blue),
    var(--blue) 6px,
    transparent 6px,
    transparent 12px
  );
  border-radius: 8px;
  color: var(--blue);
  font-size: 18px;
  font-weight: 500;
  padding: 20px 20px 40px;
  position: relative;
  text-align: center;
}

/***********************************************
 About
/**********************************************/

.about {
  background-color: #e0e8fa;
  border-radius: 30px;
  box-shadow: 0px 10px 20px 0px rgba(var(--bs-black-rgb), 0.05);
  font-size: 14px;
  padding: 15px 10px;
  position: relative;
}

@media (min-width: 992px) {
  .about {
    font-size: 17px;
    padding: 25px 60px 50px 60px;
  }
}

.about::before {
  background-color: #e0e8fa;
  border-radius: 7px;
  content: "";
  height: 40px;
  left: 50%;
  position: absolute;
  top: -18px;
  transform: translateX(-50%) rotate(-45deg);
  width: 40px;
  z-index: 2;
}

.about::after {
  border-color: transparent transparent #e0e8fa;
  border-style: solid;
  border-width: 20px 30px;
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  top: -40px;
  transform: translateX(-50%);
  width: 0;
  z-index: 1;
}

/***********************************************
 List Items
/**********************************************/

.list-items {
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

@media (min-width: 992px) {
  .list-items {
    font-size: 20px;
  }
}

.list-items li {
  align-items: center;
  display: inline-flex;
  margin-bottom: 13px;
  margin-top: 13px;
  position: relative;
  width: 49%;
}

.list-items li::before {
  background-image: var(--icon-list);
  background-size: cover;
  content: "";
  flex-shrink: 0;
  height: 20px;
  margin-right: 10px;
  width: 20px;
}

@media (min-width: 992px) {
  .list-items li::before {
    height: 26px;
    width: 26px;
  }
}

.list-check {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

.list-check li {
  display: flex;
  font-weight: 500;
  padding-bottom: 5px;
  padding-top: 5px;
  position: relative;
}

@media (min-width: 992px) {
  .list-check li {
    padding-bottom: 10px;
    padding-top: 10px;
  }
}

.list-check li::before {
  background-image: var(--icon-check);
  background-size: cover;
  content: "";
  flex-shrink: 0;
  height: 15px;
  margin-right: 8px;
  margin-top: 2px;
  width: 15px;
}

@media (min-width: 992px) {
  .list-check li::before {
    height: 18px;
    margin-top: 4px;
    width: 18px;
  }
}

/***********************************************
 Rates
/**********************************************/

.rating {
  background: linear-gradient(180deg, #fff9e5 9.88%, #fffbf2 100%);
  border-radius: 12px;
  border: 1px solid #ffe39a;
  box-shadow: 0px 10px 24px 0px rgba(222, 144, 28, 0.13),
    1px 4px 4px 0px rgba(var(--bs-white-rgb), 0.25) inset;
  color: #ca5f12;
  display: inline-flex;
  font-size: 10px;
  font-weight: 500;
  padding: 5px 20px 0 8px;
}

@media (min-width: 992px) {
  .rating {
    border-radius: 20px;
    font-size: 15px;
    min-width: 260px;
    padding: 10px 20px 0 8px;
  }
}

.rating img {
  width: 60px;
  height: auto;
}

@media (min-width: 992px) {
  .rating img {
    width: auto;
  }
}

.rating-purple {
  background: linear-gradient(180deg, #f2ecff 0%, #fbf9ff 100%);
  border: 1px solid #fbf9ff;
  box-shadow: 0px 8px 18px 0px rgba(131, 40, 163, 0.12),
    1px 4px 4px 0px rgba(var(--bs-white-rgb), 0.53) inset;
  color: #944ac1;
}

.rating-purple .rating-number {
  color: #944ac1;
  font-size: 18px;
  font-weight: bold;
}

@media (min-width: 992px) {
  .rating-purple .rating-number {
    font-size: 28px;
  }
}

.rating-number {
  color: var(--orange);
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

@media (min-width: 992px) {
  .rating-number {
    font-size: 30px;
  }
}

.rating-content {
  padding-top: 5px;
}

/***********************************************
 Slider
/**********************************************/

.slider-team {
  position: relative;
}

@media (min-width: 576px) {
  .slider-team {
    margin-bottom: 65px;
  }
}

.slider-team .slider-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 50px;
}

@media (min-width: 576px) {
  .slider-team .slider-item {
    padding-top: 0;
    padding-bottom: 20px;
    min-height: 690px;
  }
}

.slider-team::before {
  background-color: #e4edff;
  border-radius: 50%;
  content: "";
  height: 400px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 400px;
  z-index: -1;
}

@media (min-width: 420px) {
  .slider-team::before {
    height: 440px;
    width: 440px;
  }
}

@media (min-width: 576px) {
  .slider-team::before {
    height: 690px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 690px;
  }
}

.slider-team .slider-wrap > div {
  position: relative;
  z-index: 1;
}

.slider-team .slider-item {
  text-align: center;
  padding-left: 40px;
  padding-right: 40px;
}

.slider-team .slider-item.active {
  padding-left: 0;
  padding-right: 0;
}

.slider-team .slider-item-wrap {
  background-color: var(--bs-white);
  border-radius: 20px;
  box-shadow: 0px 20px 54px 0px rgba(148, 145, 143, 0.15);
  flex-shrink: 0;
  font-weight: bold;
  margin: auto;
  padding: 20px 25px;
  position: relative;
}

@media (min-width: 576px) {
  .slider-team .slider-item-wrap {
    border-radius: 30px;
    padding: 30px 40px;
  }
}

.slider-team .slider-item-wrap::before {
  background-image: image-set(
    url("../../front/images/team/bottom.png") 1x,
    url("../../front/images/team/bottom@2x.png") 2x
  );
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -50px;
  content: none;
  height: 92px;
  left: -42px;
  position: absolute;
  width: 96px;
}

@media (min-width: 576px) {
  .slider-team .slider-item-wrap::before {
    bottom: -80px;
    height: 149px;
    left: -75px;
    width: 157px;
  }
}

.slider-team .slider-item-wrap::after {
  background-image: image-set(
    url("../../front/images/team/top.png") 1x,
    url("../../front/images/team/top@2x.png") 2x
  );
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  content: none;
  height: 96px;
  left: 46px;
  position: absolute;
  top: -8%;
  width: 70%;
}

@media (min-width: 576px) {
  .slider-team .slider-item-wrap::after {
    height: 96px;
    left: 56px;
    top: -44px;
    width: 340px;
  }
}

.slider-team .slider-content {
  display: none;
}

.slider-team .slider-item-wrap img {
  display: block;
  max-width: 100%;
}

.slider-team .slider-fullname {
  font-size: 18px;
}

@media (min-width: 576px) {
  .slider-team .slider-fullname,
  .slider-team .slider-title {
    font-size: 26px;
  }

  .slider-team .slider-name {
    font-size: 24px;
  }
}

.slider-team .slider-image {
  position: relative;
}

.slider-team .slider-image::before {
  background: linear-gradient(144deg, #bada5f 15.73%, #6dca4d 93.89%);
  border-radius: 50%;
  bottom: -7px;
  content: none;
  height: 22px;
  position: absolute;
  right: -15px;
  width: 22px;
}

@media (min-width: 576px) {
  .slider-team .slider-image::before {
    bottom: -19px;
    height: 38px;
    right: -38px;
    width: 38px;
  }
}

.slider-item.active .slider-item-wrap {
  background-color: #4f5ee2;
  box-shadow: 0px 20px 54px 0px rgba(57, 38, 81, 0.3);
  color: var(--bs-white);
  max-width: 80%;
}

@media (min-width: 576px) {
  .slider-item.active .slider-item-wrap {
    max-width: 460px;
    padding: 25px 50px 35px;
  }
}

.slider-item.active .slider-item-wrap::after,
.slider-item.active .slider-item-wrap::before {
  content: "";
}

.slider-item.active .slider-item-wrap .slider-name {
  display: none;
}

.slider-item.active .slider-item-wrap .slider-content {
  display: block;
}

.slider-item.active .slider-item-wrap .slider-image::before {
  content: "";
}

.slider-team .slider-featured {
  align-items: center;
  display: flex;
  font-size: 12px;
  font-weight: 500;
  gap: 10px;
  justify-content: center;
  margin-top: 5px;
}

@media (min-width: 576px) {
  .slider-team .slider-featured {
    font-size: 20px;
    gap: 20px;
    margin-top: 10px;
  }
}

.slider-team .slider-featured .dot {
  background-color: #fbb03b;
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 5px;
  width: 5px;
}

@media (min-width: 576px) {
  .slider-team .slider-featured .dot {
    height: 10px;
    width: 10px;
  }
}

.slider-prev,
.slider-next {
  background-color: var(--bs-white);
  border-radius: 50%;
  box-shadow: 0px 7px 25px 0px rgba(var(--bs-black-rgb), 0.1);
  cursor: pointer;
  display: none;
  height: 36px;
  left: calc(50vw - 300px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  z-index: 3;
}

.slider-prev::before,
.slider-next::before {
  background-image: var(--icon-arrow-right);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  content: "";
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.slider-prev {
  transform: translateY(-50%) rotate(-180deg);
}

.slider-prev.swiper-button-disabled,
.slider-next.swiper-button-disabled {
  opacity: 0.5;
  cursor: initial;
}

@media (min-width: 576px) {
  .slider-team .slider-prev,
  .slider-team .slider-next {
    left: calc(50vw - 280px);
    display: block;
    height: 56px;
    width: 56px;
  }

  .slider-team .slider-next {
    left: auto;
    right: calc(50vw - 280px);
  }
}

@media (min-width: 1200px) {
  .slider-team .slider-prev,
  .slider-team .slider-next {
    left: calc(50% - 260px);
  }

  .slider-team .slider-next {
    left: auto;
    right: calc(50% - 260px);
  }
}

@media (min-width: 1300px) {
  .slider-team .slider-prev,
  .slider-team .slider-next {
    left: calc(50% - 270px);
  }

  .slider-team .slider-next {
    left: auto;
    right: calc(50% - 270px);
  }
}

@media (min-width: 1400px) {
  .slider-team .slider-prev,
  .slider-team .slider-next {
    left: calc(50% - 290px);
  }

  .slider-team .slider-next {
    left: auto;
    right: calc(50% - 290px);
  }
}

/***********************************************
 Line
/**********************************************/

.line {
  background-color: var(--blue);
  flex-shrink: 0;
  height: 2px;
  width: 67px;
}

.line-black {
  background-color: #797979;
  flex-shrink: 0;
  height: 1px;
  position: relative;
  width: 83px;
}

@media (min-width: 992px) {
  .line-black {
    width: 206px;
  }
}

.line-black::before {
  background-color: #242424;
  border-radius: 50%;
  content: "";
  display: block;
  height: 6px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
}

.line-horz {
  background-color: var(--blue);
  width: 100%;
  height: 1px;
  position: relative;
}

@media (min-width: 992px) {
  .line-horz {
    height: 2px;
  }
}

.line-vert {
  background-color: var(--blue);
  height: 100px;
  margin-bottom: -80px;
  margin-left: 60px;
  position: relative;
  width: 2px;
}

.line-vert::before,
.line-horz::before {
  background-color: var(--blue);
  border-radius: 50%;
  content: "";
  display: block;
  height: 11px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
}

.line-vert::before {
  left: 50%;
  right: auto;
  top: 0;
  transform: translateX(-50%);
}

/***********************************************
 Form Block
/**********************************************/

.form-block {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.form-content {
  background-color: #e4edff;
  border-radius: 16px;
  padding: 18px 12px;
}

@media (min-width: 576px) {
  .form-content {
    border-radius: 30px;
    padding: 35px;
  }
}

@media (min-width: 1200px) {
  .form-content {
    padding: 0;
  }

  .form-block {
    margin-bottom: 150px;
    min-height: 756px;
    min-width: 1300px;
  }
}

.form-wrap {
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) {
  .form-wrap {
    padding-top: 64px;
  }
}

@media (min-width: 1200px) {
  .form-block::before {
    background-color: #e4edff;
    content: "";
    height: calc(100% - 42px);
    left: 0;
    position: absolute;
    top: 42px;
    width: 100%;
  }
}

.form-content {
  position: relative;
}

.form-content::before {
  background-image: image-set(
    url("../../front/images/contact/contact-top.png") 1x,
    url("../../front/images/contact/contact-top@2x.png") 2x
  );
  background-position: top left;
  background-repeat: no-repeat;
  content: "";
  height: 39px;
  position: absolute;
  right: 0;
  top: -21px;
  width: 56px;
  z-index: 2;
}

.form-content::after {
  background-image: image-set(
    url("../../front/images/contact/contact-bottom.png") 1x,
    url("../../front/images/contact/contact-bottom@2x.png") 2x
  );
  background-position: top left;
  background-repeat: no-repeat;
  content: "";
  height: 62px;
  position: absolute;
  left: -11px;
  bottom: 22px;
  width: 62px;
}

@media (min-width: 1200px) {
  .form-content::before,
  .form-content::after {
    content: none;
  }

  .form-wrap::before {
    background-image: image-set(
      url("../../front/images/contact/contact.png") 1x,
      url("../../front/images/contact/contact@2x.png") 2x
    );
    background-position: top left;
    background-repeat: no-repeat;
    content: "";
    height: 756px;
    left: 0;
    position: absolute;
    top: 0;
    width: 170px;
  }

  .form-wrap::after {
    background-image: image-set(
      url("../../front/images/contact/contact.png") 1x,
      url("../../front/images/contact/contact@2x.png") 2x
    );
    background-position: top right;
    background-repeat: no-repeat;
    content: "";
    height: 756px;
    position: absolute;
    right: 0;
    top: 0;
    width: 241px;
  }
}

.form-block .form-control {
  background-color: var(--bs-white);
}

@media (min-width: 992px) {
  .form-block .form-control {
    border-radius: 12px;
    height: 48px;
    min-height: 47px;
  }
}

.form-block textarea.form-control {
  resize: none;
}

@media (min-width: 992px) {
  .form-block textarea.form-control {
    border-radius: 20px;
  }
}

.form-block label {
  color: var(--bs-dark);
  font-weight: 500;
}

@media (min-width: 992px) {
  .form-block label {
    font-size: 22px;
    font-weight: 700;
  }
}

.form-block .form-submit {
  text-align: center;
}

@media (min-width: 1200px) {
  .form-block .form-submit {
    bottom: -75px;
    position: relative;
  }
}

/***********************************************
 Blockquote
/**********************************************/

.blockquote-comment {
  background-image: var(--icon-quote);
  background-position: 40px 30px;
  background-repeat: no-repeat;
  background-color: linear-gradient(
    180deg,
    var(--bs-white) 4.72%,
    rgba(var(--bs-white-rgb), 0.8) 107.96%
  );
  border-radius: 4px;
  box-shadow: 0px 8px 24px 0px rgba(var(--bs-black-rgb), 0.15);
  font-weight: 500;
  line-height: 2;
  margin-bottom: 25px;
  padding: 45px 20px 35px 83px;
  position: relative;
}

.blockquote-comment::before {
  border-color: var(--bs-white) transparent transparent;
  border-style: solid;
  border-width: 10px;
  content: "";
  left: 20px;
  position: absolute;
  top: 100%;
}

.blockquote-user {
  align-items: center;
  display: flex;
  font-family: "Work Sans", sans-serif;
}

.blockquote-user img {
  margin-right: 15px;
}

.blockquote-position {
  color: #797979;
}

/***********************************************
 Wave
/**********************************************/

.wave {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 340px;
  position: relative;
}

@media (min-width: 992px) {
  .wave {
    justify-content: flex-start;
    min-height: 543px;
  }
}

.wave::before {
  background-image: image-set(
    url("../../front/images/wave.png") 1x,
    url("../../front/images/wave@2x.png") 2x
  );
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 340px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
}

@media (min-width: 992px) {
  .wave::before {
    height: 543px;
    left: 0;
    top: 0;
    transform: none;
    width: 543px;
  }
}

.wave-wrap {
  position: relative;
  z-index: 1;
}

.wave-title {
  color: var(--blue-300);
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 30px;
  position: relative;
}

@media (min-width: 992px) {
  .wave-title {
    font-size: 29px;
    padding-left: 23px;
  }
}

.wave-title::before {
  background-color: #ffc224;
  bottom: 4px;
  content: none;
  display: block;
  height: 88px;
  left: 0;
  position: absolute;
  width: 5px;
}

@media (min-width: 992px) {
  .wave-title::before {
    content: "";
  }
}

.wave-content {
  margin: auto;
  max-width: 280px;
}

@media (min-width: 992px) {
  .wave-content {
    max-width: inherit;
  }
}

/***********************************************
 Our
/**********************************************/

.bg-our {
  background-color: #f2f9ff;
  padding-bottom: 70px;
  position: relative;
}

.bg-our-mobile {
  background-image: image-set(
    url("../../front/images/our/bg-our-mobile.png") 1x,
    url("../../front/images/our/bg-our-mobile@2x.png") 2x
  );
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: calc(-1.5rem * 0.5);
  margin-right: calc(-1.5rem * 0.5);
}

@media (min-width: 992px) {
  .bg-our-mobile {
    background: none;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 992px) {
  .bg-our {
    background-color: transparent;
    background-image: image-set(
      url("../../front/images/our/bg-our.png") 1x,
      url("../../front/images/our/bg-our@2x.png") 2x
    );
    margin-top: -110px;
    min-height: 805px;
    padding-bottom: 0;
    position: static;
  }
}

.bg-our::before {
  background-image: image-set(
    url("../../front/images/our/our-line.png") 1x,
    url("../../front/images/our/our-line@2x.png") 2x
  );
  background-position: top center;
  background-repeat: no-repeat;
  bottom: 0;
  content: "";
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

@media (min-width: 992px) {
  .bg-our::before {
    content: none;
  }
}

.bg-our > div {
  position: relative;
}

.our-title {
  color: var(--blue);
  font-family: "Work Sans", sans-serif;
  font-size: 26px;
  font-style: italic;
  letter-spacing: 4px;
  line-height: 1;
  padding-left: 15px;
  position: relative;
}

@media (min-width: 992px) {
  .our-title {
    color: var(--bs-white);
    font-size: 50px;
    padding-left: 20px;
  }
}

.our-title::before {
  background-color: var(--blue);
  bottom: 1px;
  content: "";
  height: 25px;
  left: 0;
  position: absolute;
  width: 3px;
}

@media (min-width: 992px) {
  .our-title::before {
    background-color: var(--bs-white);
    bottom: 3px;
    height: 40px;
    width: 5px;
  }
}

.our-subtitle {
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
}

@media (min-width: 992px) {
  .our-subtitle {
    color: #7ee8ff;
    font-size: 22px;
  }
}

.our-content {
  font-size: 14px;
}

@media (min-width: 992px) {
  .our-content {
    color: var(--bs-white);
    font-size: 18px;
    line-height: 2;
  }
}

/***********************************************
 Pager
/**********************************************/

.pager {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-bottom: 120px;
}

.pager.pager-left {
  gap: 12px;
  justify-content: flex-start;
}

.pager-item {
  background-color: #d7ebf6;
  border-radius: 50%;
  cursor: pointer;
  height: 18px;
  position: relative;
  width: 18px;
}

.pager-item:hover {
  background-color: #b6dcf0;
}

.pager-item.active {
  border: 1px solid #3d91d6;
}

.pager-item::before {
  background: linear-gradient(147deg, #3fa8e3 1.99%, #525fcc 100%);
  border-radius: 50%;
  content: none;
  height: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
}

.pager-item.active::before {
  content: "";
}

.pager-item.active:hover {
  background-color: var(--bs-white);
}

/***********************************************
 Service
/**********************************************/

.service {
  background: linear-gradient(
    180deg,
    var(--bs-white) 4.72%,
    rgba(var(--bs-white-rgb), 0.8) 107.96%
  );
  border-left-width: 3px;
  border-left-style: solid;
  border-radius: 0px 20px 20px 0px;
  box-shadow: 0px 6px 14px 0px rgba(var(--bs-black-rgb), 0.1);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
  padding: 12px;
}

@media (min-width: 992px) {
  .service {
    background: linear-gradient(
      180deg,
      var(--bs-white) 4.72%,
      rgba(var(--bs-white-rgb), 0.8) 107.96%
    );
    border-left: none;
    border-radius: 20px;
    box-shadow: 0px 10px 34px 0px rgba(var(--bs-black-rgb), 0.15);
    font-size: 20px;
    padding: 35px 35px 40px 35px;
    text-align: center;
  }
}

.service img {
  width: 40px;
  height: auto;
}

@media (min-width: 992px) {
  .service img {
    width: auto;
  }
}

.service-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

@media (min-width: 992px) {
  .service-title {
    font-size: 28px;
  }
}

/***********************************************
 Compare
/**********************************************/

.slider-price {
  margin-left: -15px;
  margin-right: -15px;
  padding-bottom: 50px;
  padding-top: 50px;
}

@media (min-width: 992px) {
  .slider-price {
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
    padding: 0;
  }
}

.slider-price .slider-price-wrap {
  align-items: center;
}

.slider-price .price-item {
  background-color: var(--bs-white);
  border-top: 2px solid var(--black);
  box-shadow: 0px 4px 34px 0px rgba(var(--bs-black-rgb), 0.15);
  padding: 40px 20px;
  position: relative;
  text-align: center;
  width: 66%;
}

@media (min-width: 992px) {
  .slider-price .price-item {
    padding: 60px 65px;
    width: auto;
  }
}

.slider-price .price-item.active {
  background: linear-gradient(123deg, #9ca8eb 24.39%, #e599e7 89.85%);
  border-top-color: transparent;
  box-shadow: 0px 4px 34px 0px rgba(var(--bs-black-rgb), 0.15);
  color: var(--bs-white);
  margin-bottom: -20px;
  margin-top: -20px;
  padding-bottom: 60px;
  padding-top: 60px;
}

.slider-price .price-item:hover .text-primary,
.slider-price .price-item.active .text-primary {
  color: var(--bs-white) !important;
}

@media (min-width: 992px) {
  .slider-price .price-item.active {
    padding-bottom: 80px;
    padding-top: 80px;
  }
}

@media (min-width: 992px) {
  .slider-price .price-item:hover {
    background: linear-gradient(123deg, #9ca8eb 24.39%, #e599e7 89.85%);
    border-top-color: transparent;
    box-shadow: 0px 4px 34px 0px rgba(var(--bs-black-rgb), 0.15);
    color: var(--bs-white);
  }
}

.slider-price .price-item * {
  position: relative;
}

.slider-price .price-item::before {
  background-image: image-set(
    url("../../front/images/compare.png") 1x,
    url("../../front/images/compare@2x.png") 2x
  );
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  content: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.slider-price .compare-price {
  margin-left: 7px;
  margin-right: 10px;
}

.slider-price .compare-heading {
  align-items: center;
  background-color: #f3f9ff;
  border-radius: 40px;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  margin-bottom: 34px;
}

@media (min-width: 992px) {
  .slider-price .compare-heading {
    font-size: 20px;
    height: 57px;
  }
}

.slider-price .price-item.active::before {
  content: "";
}

@media (min-width: 992px) {
  .slider-price .price-item:hover::before {
    content: "";
  }
}

.slider-price .price-item.active .compare-price {
  color: #5540d9;
  text-shadow: 0px 0px 2px rgba(var(--bs-white-rgb), 0.79);
}

@media (min-width: 992px) {
  .slider-price .price-item:hover .compare-price {
    color: #5540d9;
    text-shadow: 0px 0px 2px rgba(var(--bs-white-rgb), 0.79);
  }
}

.slider-price .price-item.active .list-check li::before {
  background-image: var(--icon-check-alt);
}

@media (min-width: 992px) {
  .slider-price .price-item:hover .list-check li::before {
    background-image: var(--icon-check-alt);
  }
}

.slider-price .price-item.active .compare-heading {
  background: rgba(79, 94, 226, 0.9);
  box-shadow: 3px 3px 6px 0px rgba(255, 219, 219, 0.25) inset,
    0px 4px 4px 0px rgba(93, 78, 190, 0.25);
}

@media (min-width: 992px) {
  .slider-price .price-item:hover .compare-heading {
    background: rgba(79, 94, 226, 0.9);
    box-shadow: 3px 3px 6px 0px rgba(255, 219, 219, 0.25) inset,
      0px 4px 4px 0px rgba(93, 78, 190, 0.25);
  }
}

.slider-price .slider-next,
.slider-price .slider-prev {
  display: block;
  left: auto;
  position: relative;
  right: auto;
  top: auto;
  transform: none;
}

.slider-price .slider-prev {
  transform: rotate(-180deg);
}

/***********************************************
 Backgrounds
/**********************************************/

@media (min-width: 992px) {
  .bg-comments {
    background-image: image-set(
      url("../../front/images/bg-comments.png") 1x,
      url("../../front/images/bg-comments@2x.png") 2x
    );
    background-position: bottom center;
    background-repeat: no-repeat;
    padding-bottom: 170px;
  }

  .bg-dashboard {
    align-items: center;
    display: flex;
    margin-bottom: 60px;
    min-height: 577px;
    position: relative;
  }
}

.bg-dashboard::before {
  background-image: image-set(
    url("../../front/images/bg-dashboard.png") 1x,
    url("../../front/images/bg-dashboard@2x.png") 2x
  );
  background-position: top left;
  background-repeat: no-repeat;
  content: none;
  height: 100%;
  left: 60%;
  position: absolute;
  top: 0;
  width: 40%;
}

@media (min-width: 992px) {
  .bg-dashboard::before {
    content: "";
  }

  .innovation {
    padding-bottom: 150px;
  }
}

/***********************************************
 Comments
/**********************************************/

.comments {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-left: calc(-1.5rem * 0.5);
  margin-right: calc(-1.5rem * 0.5);
  margin-top: -90px;
  padding: 53% 0 100px 0;
  position: relative;
  z-index: -1;
}

@media (min-width: 480px) {
  .comments {
    min-height: 600px;
  }
}

@media (min-width: 580px) {
  .comments {
    min-height: 800px;
  }
}

@media (min-width: 680px) {
  .comments {
    min-height: 900px;
  }
}

@media (min-width: 780px) {
  .comments {
    min-height: 1050px;
  }
}

@media (min-width: 992px) {
  .comments {
    margin: 0;
    min-height: 767px;
    padding-bottom: 0;
    padding-left: 30px;
    padding-top: 120px;
    z-index: inherit;
  }
}

.comments * {
  position: relative;
}

.comments::before {
  background-image: image-set(
    url("../../front/images/comments-mobile.png") 1x,
    url("../../front/images/comments-mobile@2x.png") 2x
  );
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media (min-width: 480px) {
  .comments::before {
    background-size: cover;
  }
}

@media (min-width: 992px) {
  .comments::before {
    background-image: image-set(
      url("../../front/images/comments.png") 1x,
      url("../../front/images/comments@2x.png") 2x
    );
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto;
  }
}

.comments-content {
  color: var(--bs-white);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.8;
  margin: auto;
  max-width: 60%;
  padding-bottom: 10px;
  position: inherit;
  width: 100%;
}

@media (min-width: 400px) {
  .comments-content {
    font-size: 12px;
    max-width: 55%;
  }
}

@media (min-width: 480px) {
  .comments-content {
    font-size: inherit;
  }
}

@media (min-width: 768px) {
  .comments-content {
    margin: 0;
    font-size: 22px;
    padding-bottom: 33px;
    max-width: 530px;
  }
}

@media (min-width: 780px) {
  .comments-content::before {
    background-image: var(--icon-quote-alt);
    content: "";
    height: 27px;
    left: -35px;
    position: absolute;
    top: -35px;
    width: 44px;
  }

  .comments-content::after {
    background-image: var(--icon-quote-alt);
    bottom: 0;
    content: "";
    height: 27px;
    position: absolute;
    right: 0;
    transform: scaleX(-1);
    width: 44px;
  }
}

.comments-user {
  align-items: center;
  color: var(--bs-white);
  display: flex;
  font-size: 10px;
  font-weight: 500;
  justify-content: center;
  margin-left: -40px;
}

@media (min-width: 560px) {
  .comments-user {
    font-size: inherit;
    margin-left: -120px;
  }
}

.comments-user img {
  width: 30px;
}

@media (min-width: 560px) {
  .comments-user img {
    width: auto;
  }
}

.comments-user img {
  margin-right: 12px;
}

/***********************************************
 Dashboard
/**********************************************/

.dashboard-title {
  align-items: center;
  background: linear-gradient(
    88deg,
    #41ddff 4.53%,
    rgba(150, 255, 86, 0.5) 34.36%,
    rgba(255, 243, 139, 0.73) 68.79%,
    rgba(255, 230, 166, 0) 92.66%
  );
  border-radius: 100px;
  display: flex;
  height: 62px;
  max-width: 262px;
  padding-left: 26px;
  position: relative;
}

@media (min-width: 992px) {
  .dashboard-title {
    height: 121px;
    max-width: 568px;
    padding-left: 53px;
  }
}

.dashboard-title * {
  position: relative;
}

.dashboard-title::before {
  background: linear-gradient(
    90deg,
    #96c9ff 1.64%,
    rgba(158, 246, 241, 0.78) 43.98%,
    rgba(225, 255, 104, 0.15) 79.08%,
    rgba(118, 244, 98, 0) 100.77%
  );
  border-radius: 100px;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/***********************************************
 Contact
/**********************************************/

.bg-contact {
  position: relative;
}

.bg-contact::before {
  background-image: image-set(
    url("../../front/images/bg-contact.png") 1x,
    url("../../front/images/bg-contact@2x.png") 2x
  );
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media (min-width: 992px) {
  .bg-contact {
    min-height: 664px;
  }

  .bg-contact::before {
    background-position: 25% top;
    height: 100%;
    left: 50%;
    top: 0;
    width: 50%;
  }
}

.bg-contact * {
  position: relative;
}

.contact-content {
  background: rgba(var(--bs-white-rgb), 0.9);
  border-radius: 20px;
  box-shadow: 0px 7px 25px 0px rgba(var(--bs-black-rgb), 0.1);
  font-weight: 500;
  line-height: 2;
  padding: 20px 20px 35px;
  position: relative;
  text-align: left;
}

@media (min-width: 768px) {
  .contact-content {
    background: #e4efff;
    border-radius: 25px;
    box-shadow: none;
    padding: 45px 60px;
  }
}

.contact-content::before {
  background-image: image-set(
    url("../../front/images/mesh.png") 1x,
    url("../../front/images/mesh@2x.png") 2x
  );
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 50px;
  left: -21px;
  position: absolute;
  top: -23px;
  width: 60px;
  z-index: -1;
}

@media (min-width: 768px) {
  .contact-content::before {
    background-size: inherit;
    height: 160px;
    left: -42px;
    top: -42px;
    width: 192px;
  }
}

.contact-button {
  bottom: 30px;
  position: relative;
}

@media (min-width: 992px) {
  .contact-button {
    bottom: auto;
    position: static;
  }
}

/***********************************************
 PRO
/**********************************************/

@media (min-width: 992px) {
  .pro {
    margin-bottom: 165px;
  }
}

@media (min-width: 992px) {
  .pro-content {
    background: #f3f9ff;
    border-radius: 120px;
    padding: 80px 40px 0;
  }
}

.pro-title {
  color: #2a69e2;
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.pro-item {
  border-radius: 20px;
  box-shadow: 0px 19.75px 49.375px 0px rgba(var(--bs-black-rgb), 0.1);
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  padding: 16px 14px;
}

@media (min-width: 992px) {
  .pro-item {
    border-radius: 0;
    box-shadow: none;
    padding: 40px 25px;
  }
}

@media (min-width: 992px) {
  .pro-item.active {
    background: var(--bs-white);
    border-radius: 32px;
    bottom: -45px;
    box-shadow: 0px 34px 85px 0px rgba(var(--bs-black-rgb), 0.1);
    position: relative;
  }
}

/***********************************************
 Project
/**********************************************/

.project-wrap {
  margin: auto;
  max-width: 587px;
  position: relative;
  text-align: left;
}

.project-wrap * {
  position: relative;
}

.slider-work .swiper-slide {
  width: 70%;
}

@media (min-width: 768px) {
  .slider-work .swiper-slide {
    width: auto;
  }
}

.slider-work .swiper-slide .project-content {
  display: none;
  padding-right: 50px;
}

@media (min-width: 768px) {
  .slider-work .swiper-slide .project-content {
    display: block;
    padding-right: 110px;
  }
}

.slider-work .swiper-slide .project-wrap > div {
  padding-left: 25px;
}

.slider-work .swiper-slide-active {
  color: var(--bs-white);
}

@media (max-width: 767px) {
  .slider-work .swiper-slide-active {
    margin-right: 0 !important;
  }
}

.slider-work .swiper-slide-active .project-content {
  display: block;
}

.slider-work .swiper-slide-active .project-wrap::before {
  background: linear-gradient(114deg, #3fa8e3 27.06%, #525fcc 89.25%);
  border-radius: 0px 0px 0px 40px;
  bottom: 0;
  content: "";
  height: calc(100% - 65px);
  left: 0;
  position: absolute;
  width: calc(100% - 25px);
}

@media (min-width: 992px) {
  .slider-work .swiper-slide-active .project-wrap::before {
    border-radius: 0px 0px 0px 100px;
    height: calc(100% - 170px);
    left: -25px;
    width: calc(100% - 50px);
  }
}

.slider-work .project-image {
  position: relative;
}

.slider-work .project-preview {
  border-radius: 28px 0px 0px 0px;
  bottom: 0;
  box-shadow: 0px 4px 96px 0px rgba(var(--bs-black-rgb), 0.25);
  position: absolute;
  right: 44px;
  width: 71%;
}

.slider-work-next,
.slider-work-prev {
  align-items: center;
  border-radius: 50%;
  box-shadow: 0px 7px 25px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  height: 36px;
  justify-content: center;
  left: 10px;
  right: auto;
  width: 36px;
  top: auto;
  bottom: 80px;
}

.slider-work-next {
  left: auto;
  right: 10px;
}

@media (min-width: 992px) {
  .slider-work-next,
  .slider-work-prev {
    bottom: 0;
    height: 56px;
    left: calc(50% - 425px);
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
  }

  .slider-work-next {
    left: auto;
    right: calc(50% - 400px);
  }
}

.slider-work-next::before,
.slider-work-prev::before {
  background-image: url("data:image/svg+xml,%3Csvg width='26' height='15' viewBox='0 0 26 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.65686 14.3576L0.292893 8.30821C-0.097631 7.93698 -0.097631 7.33511 0.292893 6.96389L6.65686 0.914465C7.04738 0.543242 7.68054 0.543242 8.07107 0.914465C8.46159 1.28569 8.46159 1.88756 8.07107 2.25878L3.41421 6.68547H26V8.58662H3.41421L8.07107 13.0133C8.46159 13.3845 8.46159 13.9864 8.07107 14.3576C7.68054 14.7289 7.04738 14.7289 6.65686 14.3576Z' fill='%23185CA2'/%3E%3C/svg%3E");
  content: "";
  height: 15px;
  width: 17px;
}

@media (min-width: 992px) {
  .slider-work-next::before,
  .slider-work-prev::before {
    height: 15px;
    width: 26px;
  }
}

.slider-work-next::before {
  transform: rotate(180deg);
}

.slider-work-next::after,
.slider-work-prev::after {
  content: none;
}

.slider-work-next:hover,
.slider-work-prev:hover {
  background: linear-gradient(123deg, #2db3ff 24.39%, #525fcc 89.85%);
  color: var(--bs-white);
}

.slider-work-next:hover::before,
.slider-work-prev:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg width='26' height='15' viewBox='0 0 26 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.65686 14.3576L0.292893 8.30821C-0.097631 7.93698 -0.097631 7.33511 0.292893 6.96389L6.65686 0.914465C7.04738 0.543242 7.68054 0.543242 8.07107 0.914465C8.46159 1.28569 8.46159 1.88756 8.07107 2.25878L3.41421 6.68547H26V8.58662H3.41421L8.07107 13.0133C8.46159 13.3845 8.46159 13.9864 8.07107 14.3576C7.68054 14.7289 7.04738 14.7289 6.65686 14.3576Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/***********************************************
 Work
/**********************************************/

.work {
  color: #242424;
  margin-left: calc(-1.5rem * 0.5);
  margin-right: calc(-1.5rem * 0.5);
  padding: 40px 15px;
  width: 100%;
  overflow-x: auto;
}

@media (min-width: 992px) {
  .work {
    display: flex;
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 140px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 100px;
  }

  .work-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
  }
}

.work-item {
  border-radius: 20px;
  flex-shrink: 0;
  font-weight: 500;
  padding-top: 20px;
  position: relative;
  width: 40vw;
}

@media (min-width: 992px) {
  .work-item {
    border-radius: 80px;
    flex-shrink: inherit;
    font-size: 20px;
    height: auto;
    padding-top: 0;
    text-align: center;
    width: 20%;
  }
}

@media (min-width: 992px) {
  .work-item::before {
    border-left: 4px solid #666666;
    border-right: 4px solid #666666;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    border-top: 4px solid #666666;
    content: "";
    height: 50%;
    left: -1px;
    position: absolute;
    top: 0;
    width: calc(100% + 4px);
  }

  .work-item:nth-child(even)::before {
    border-bottom: 4px solid #666666;
    border-radius: 0 0 80px 80px;
    border-top: none;
    bottom: 0;
    top: auto;
  }

  .work-item:nth-child(3n)::before {
    height: calc(50% + 50px);
  }

  .work-item:nth-child(even) {
    border: none;
  }

  .work-item:nth-child(even) .work-wrap {
    flex-direction: column-reverse;
  }

  .work-item:nth-child(odd) .work-wrap::after,
  .work-item:nth-child(even) .work-wrap::before {
    background-image: url("data:image/svg+xml,%3Csvg width='31' height='18' viewBox='0 0 31 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.732414 4.26777C-0.244137 3.29146 -0.244138 1.70854 0.732413 0.732233C1.70896 -0.244078 3.29227 -0.244078 4.26882 0.732233L16.2926 12.753C17.2692 13.7294 17.2692 15.3123 16.2926 16.2886C15.316 17.2649 13.7327 17.2649 12.7562 16.2886L0.732414 4.26777Z' fill='%23666666'/%3E%3Cpath d='M29.2957 4.26777C30.2723 3.29146 30.2723 1.70854 29.2957 0.732233C28.3192 -0.244078 26.7359 -0.244078 25.7593 0.732233L13.7355 12.753C12.759 13.7294 12.759 15.3123 13.7355 16.2886C14.7121 17.2649 16.2954 17.2649 17.2719 16.2886L29.2957 4.26777Z' fill='%23666666'/%3E%3C/svg%3E");
    content: "";
    height: 18px;
    left: -13px;
    position: absolute;
    top: 50%;
    width: 31px;
  }

  .work-item:nth-child(3n) {
    margin-top: -100px;
  }

  .work-item:nth-child(even) .work-content {
    margin-bottom: 60px;
  }

  .work-item:nth-child(3n) .work-image {
    margin-bottom: 60px;
  }

  .work-item:nth-child(4n) .work-wrap::before {
    top: 65%;
  }

  .work-item:nth-child(odd) .work-wrap::after {
    left: -15px;
    top: 35%;
    transform: rotate(-180deg);
  }

  .work-item:nth-child(3n) .work-wrap::after {
    top: 20%;
  }

  .work-item:first-child .work-wrap::after {
    content: none;
  }

  .work-item:last-child .work-wrap::before,
  .work-item:first-child .work-wrap::before {
    background-color: #666666;
    border-radius: 50%;
    content: "";
    height: 18px;
    left: -8px;
    position: absolute;
    top: calc(50% + 18px);
    width: 18px;
  }

  .work-item:nth-child(4n)::before {
    height: 65%;
  }

  .work-item:last-child::before {
    height: 35%;
  }

  .work-item:last-child .work-wrap::before {
    top: 36%;
    left: auto;
    right: -11px;
  }
}

.work-content {
  padding: 0 10px 10px;
  text-align: center;
}

@media (min-width: 992px) {
  .work-content {
    padding: 30px 20px;
  }
}

.work-title {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  left: 15px;
  position: absolute;
  top: 15px;
}

@media (min-width: 992px) {
  .work-title {
    font-size: 24px;
    left: auto;
    margin-bottom: 5px;
    position: static;
    top: auto;
  }
}

.work-title span {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  z-index: 1;
}

.work-title span::before {
  background-color: var(--gray);
  border-radius: 50%;
  content: "";
  height: 10px;
  left: -3px;
  position: absolute;
  top: 0;
  width: 10px;
  z-index: -1;
}

@media (min-width: 992px) {
  .work-title span::before {
    height: 24px;
    left: -11px;
    top: -1px;
    width: 24px;
  }
}

.work-blue {
  background-color: rgba(var(--blue-200-rgb), 0.2);
}

.work-purple {
  background-color: rgba(var(--purple-200-rgb), 0.2);
}

.work-green {
  background-color: rgba(var(--green-200-rgb), 0.2);
}

.work-yellow {
  background-color: rgba(var(--yellow-200-rgb), 0.2);
}

.work-orange {
  background-color: rgba(var(--orange-200-rgb), 0.2);
}

@media (min-width: 992px) {
  .work-blue,
  .work-purple,
  .work-green,
  .work-yellow,
  .work-orange {
    background-color: transparent;
  }
}

.work-blue .work-title span::before {
  background-color: var(--blue-100);
}

.work-purple .work-title span::before {
  background-color: var(--purple-100);
}

.work-green .work-title span::before {
  background-color: var(--green-100);
}

.work-yellow .work-title span::before {
  background-color: var(--yellow-100);
}

.work-orange .work-title span::before {
  background-color: var(--orange-100);
}

.work-blue .work-progress {
  color: var(--blue-200);
}

.work-purple .work-progress {
  color: var(--purple-200);
}

.work-green .work-progress {
  color: var(--green-200);
}

.work-yellow .work-progress {
  color: var(--yellow-200);
}

.work-orange .work-progress {
  color: var(--orange-200);
}

.work-subtitle {
  font-weight: 500;
}

@media (min-width: 992px) {
  .work-subtitle {
    font-size: 24px;
  }
}

.work-description {
  display: none;
  font-family: "Montserrat", sans-serif;
  line-height: 1.8;
  margin-bottom: 15px;
}

@media (min-width: 992px) {
  .work-description {
    display: block;
  }
}

.work-progress {
  display: none;
  font-family: "Montserrat", sans-serif;
  font-size: 44px;
  font-weight: 700;
}

@media (min-width: 992px) {
  .work-progress {
    display: block;
  }
}

.work-image {
  padding: 10px 10px 0;
}

.work-item:nth-child(even) .work-image {
  padding-bottom: 0;
}

/***********************************************
 Home
/**********************************************/

.home .header {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.bg-home {
  background-image: image-set(
    url("../../front/images/home/bg-home.png") 1x,
    url("../../front/images/home/bg-home@2x.png") 2x
  );
  background-position: top center;
  background-repeat: no-repeat;
}

.bg-works {
  background-image: image-set(
    url("../../front/images/home/bg-works.png") 1x,
    url("../../front/images/home/bg-works@2x.png") 2x
  );
  background-position: center 670px;
  background-repeat: no-repeat;
}

@media (min-width: 992px) {
  .bg-works {
    padding-bottom: 150px;
  }
}

.bg-works-mobile {
  background-color: #f2f9ff;
  background-image: image-set(
    url("../../front/images/our/our-line.png") 1x,
    url("../../front/images/our/our-line@2x.png") 2x
  );
  background-position: bottom center;
  background-repeat: no-repeat;
  padding-bottom: 15px;
}

@media (min-width: 992px) {
  .bg-works-mobile {
    background: none;
    padding-bottom: 0;
  }
}

/***********************************************
 Slide Home
/**********************************************/

.slider-home {
  background-color: #f2f9ff;
}

@media (min-width: 992px) {
  .slider-home {
    background: none;
    padding-bottom: 100px;
  }
}

.slider-home .slider-item {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  max-height: 50vh;
  min-height: 45vh;
  text-align: right;
}

@media (min-width: 992px) {
  .slider-home .slider-item {
    background: none !important;
    height: inherit;
    max-height: inherit;
    min-height: inherit;
  }
}

.slider-home .slider-item::before {
  background: linear-gradient(
    180deg,
    rgba(42, 100, 132, 0.97) 0%,
    rgba(0, 122, 190, 0.38) 36.98%,
    #f2f9ff 100%
  );
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media (min-width: 992px) {
  .slider-home .slider-item::before {
    content: none;
  }
}

.slider-home .slider-item img {
  margin-right: -15%;
  max-width: 1200px;
  width: 85%;
}

@media (min-width: 992px) {
  .slider-home .slider-wrap {
    padding-left: 25px;
    padding-top: 180px;
    position: absolute;
    top: 0;
    z-index: 1;
  }
}

.slider-home .slider-home-pagination {
  align-items: center;
  background: var(--bs-white);
  box-shadow: 0.57111px 1.71332px 5.13995px 0px rgba(6, 34, 60, 0.15) inset,
    -3.99774px -3.42664px 5.71106px 0px rgba(255, 224, 224, 0) inset,
    3px 3px 7px 0px rgba(112, 168, 200, 0.25);
  border-radius: 30px;
  bottom: 60px;
  display: flex;
  left: auto;
  margin: auto;
  padding: 4px;
  position: relative;
  top: auto;
  transform: none;
  width: 255px;
}

@media (min-width: 992px) {
  .slider-home .slider-home-pagination {
    background: linear-gradient(
      92deg,
      rgba(236, 241, 255, 0.9) 35.91%,
      rgba(233, 240, 251, 0.9) 93.83%
    );
    box-shadow: 1px 3px 9px 0px rgba(6, 34, 60, 0.15) inset,
      -7px -6px 10px 0px rgba(255, 224, 224, 0) inset;
    border-radius: 50px;
    bottom: auto;
    margin-left: 90px;
    margin-top: 50px;
    padding: 7px;
    width: 443px;
  }
}

.slider-home .slider-home-pagination .swiper-pagination-bullet {
  align-items: center;
  background-color: transparent;
  border-radius: 20px;
  color: #242424;
  display: flex;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  height: 30px;
  justify-content: center;
  opacity: 1;
  text-align: center;
  width: 50%;
}

@media (min-width: 992px) {
  .slider-home .slider-home-pagination .swiper-pagination-bullet {
    border-radius: 37px;
    font-size: 26px;
    height: 56px;
  }
}

.slider-home-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #2a69e2;
  box-shadow: 2px 3px 6px 0px rgba(174, 211, 255, 0.61) inset;
  color: var(--bs-white);
  font-weight: 600;
}

.slider-home .slider-block {
  left: 15px;
  position: absolute;
  top: 80px;
  width: calc(100% - 30px);
  z-index: 1;
}

@media (min-width: 992px) {
  .slider-home .slider-block {
    left: auto;
    margin-top: 60px;
    position: relative;
    top: 0;
    width: auto;
  }
}

.slider-home .slider-comment {
  background: var(--bs-white);
  border-radius: 8px;
  box-shadow: -20px 14px 34px 0px rgba(47, 88, 192, 0.15);
  margin-bottom: 25px;
  margin-left: 15px;
  padding: 14px;
  position: relative;
  width: 140px;
}

@media (min-width: 992px) {
  .slider-home .slider-comment {
    border-radius: 18px;
    margin-bottom: 55px;
    margin-left: 0;
    padding: 17px;
    width: 280px;
  }
}

.slider-home .slider-comment:nth-child(2) {
  margin-left: 40px;
}

@media (min-width: 992px) {
  .slider-home .slider-comment:nth-child(2) {
    margin-left: 55px;
  }
}

.slider-home .slider-comment-image {
  bottom: -30px;
  left: -35px;
  position: absolute;
}

@media (min-width: 992px) {
  .slider-home .slider-comment-image {
    bottom: -50px;
    left: -60px;
  }
}

.slider-home .slider-comment-image img {
  width: 60px;
}

@media (min-width: 992px) {
  .slider-home .slider-comment-image img {
    width: auto;
  }
}

.slider-home .slider-image {
  left: 150px;
  position: absolute;
  top: -5px;
  z-index: 1;
}

@media (min-width: 992px) {
  .slider-home .slider-image {
    left: 250px;
    top: -15px;
    z-index: -1;
  }
}

.slider-home .slider-image img {
  width: 110px;
}

@media (min-width: 992px) {
  .slider-home .slider-image img {
    width: auto;
  }
}

.slider-home .slider-number {
  right: 10px;
  position: absolute;
  top: 10px;
  z-index: -1;
}

@media (min-width: 992px) {
  .slider-home .slider-number {
    right: auto;
    left: 490px;
    top: 65px;
  }
}

/***********************************************
 Join
/**********************************************/

@media (min-width: 992px) {
  .join {
    text-align: center;
    margin-bottom: -30px;
  }
}

.join-wrap {
  position: relative;
}

@media (min-width: 992px) {
  .join-wrap {
    background-image: image-set(
      url("../../front/images/home/join.png") 1x,
      url("../../front/images/home/join@2x.png") 2x
    );
    background-position: right 62.5%;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: 110px;
    padding-right: 255px;
    position: relative;
    text-align: left;
  }
}

.join-wrap::after {
  background-image: image-set(
    url("../../front/images/home/line.png") 1x,
    url("../../front/images/home/line@2x.png") 2x
  );
  background-position: 0 0;
  background-repeat: no-repeat;
  bottom: -45px;
  content: "";
  height: 37px;
  left: 65px;
  position: absolute;
  width: 28px;
}

.join-wrap::before {
  background-image: image-set(
    url("../../front/images/home/person.png") 1x,
    url("../../front/images/home/person@2x.png") 2x
  );
  background-position: top left;
  background-repeat: no-repeat;
  content: "";
  height: 90px;
  right: 10vw;
  position: absolute;
  top: 35px;
  width: 84px;
}

@media (min-width: 480px) {
  .join-wrap::before {
    right: 15vw;
  }
}

@media (min-width: 992px) {
  .join-wrap::after {
    content: none;
  }

  .join-wrap::before {
    background-image: image-set(
      url("../../front/images/home/circle.png") 1x,
      url("../../front/images/home/circle@2x.png") 2x
    );
    height: 86px;
    left: -40px;
    right: auto;
    top: -52px;
    width: 90px;
  }
}

.join-content {
  padding-left: 50px;
}

@media (min-width: 992px) {
  .join-content {
    padding-left: 265px;
  }
}

/***********************************************
 Slider Comment
/**********************************************/

.slider-comment {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 20px;
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) {
  .slider-comment {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 80px;
  }
}

.slider-comment-item {
  width: 90%;
}

@media (min-width: 992px) {
  .slider-comment-item {
    padding: 0 25px;
    width: auto;
  }
}

@media (min-width: 992px) {
  .slider-comment-item.active {
    margin-top: -50px;
  }
}