@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; */
  position: fixed;
  width: 100%;
  left: 0;
  top: 70px;
  padding: 0;
}

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

.menu.active {
  display: block;
}

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

@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: 70px;
  left: 0;
  position: fixed;
  /* position: absolute; */
  top: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
}

.header .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
} */
.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: 0;
    position: fixed;
    top: 0;
    width: auto;
    z-index: 2;
    width: 100%;
  }

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

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

.header-content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  /* height: 46px; */
  width: 100%;
}

.header-logo {
  width: 200px;
}

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

.header-wrap {
  width: 100%;
}

.header,
.header-logo,
.header-wrap {
  transition: 0.3s;
}

.header-logo a {
  width: 100%;
  transition: 0.3s;
}

.header-logo img {
  width: 100%;
  transition: 0.3s;
}

@media (min-width: 992px) {
  .header-content {
    height: auto;
  }
  .header.scrolldown .header-wrap {
    padding: 15px;
    align-items: center;
  }

  .header.scrolldown .header-logo {
    width: 200px;
  }
}

.header.scrolldown .header-logo {
  width: 150px;
}

.header.scrolldown {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

.header.scrolldown .icon-hamburger {
  background-color: #007bff;
}

.header.scrolldown .icon-hamburger::before {
  background-color: #007bff;
}

.header.scrolldown .icon-hamburger::after {
  background-color: #007bff;
}

.header.scrolldown .menu ul {
  margin: 0;
}

.header.scrolldown .menu li a {
  text-shadow: none;
  color: #212529;
}

.header.scrolldown .menu li.active::before {
  background-color: #b6d9ff;
}

.header.scrolldown .menu li.active a {
  color: #004187;
}

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

.header.scrolldown .menu-hamburger.active .icon-hamburger::before {
  background-color: #fff;
}

.header.scrolldown .menu-hamburger.active .icon-hamburger::after {
  background-color: #fff;
}

.header.scrolldown .menu.active li a {
  color: #fff;
}

.header.scrolldown .menu.active li.active::before {
  background-color: rgba(var(--bs-white-rgb), 0.3);
}

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

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

@media (min-width: 992px) {
  .banner {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 665px;
    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;
  }
}

.nav-tabs {
  border: 0;
  gap: 24px;
}

.nav-tabs .nav-link {
  font-size: 20px;
  color: #007bff;
  font-weight: 700;
  padding: 8px 40px;
  border-radius: 100px;
  border: 1px solid #007bff;
}

.nav-tabs .nav-link.active {
  border-color: transparent;
  background: linear-gradient(to right, #60a9ff 0%, #06e4bc 100%);
  color: #fff;
}

.article_list {
  padding-top: 36px;
}

.article_list_item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background-color: #f0faff;
  margin-bottom: 24px;
  text-decoration: none;
}

.article_list_pic {
  width: 20%;
  padding-bottom: calc(20% * 0.725);
  position: relative;
}

.article_list_pic > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

.article_list_text {
  width: 80%;
  padding-left: 20px;
}

.article_list_date {
  font-size: 16px;
  color: #000;
  margin-bottom: 8px;
  transition: 0.3s;
}

.article_list_title {
  font-size: 20px;
  color: #242424;
  font-weight: 700;
  margin-bottom: 8px;
  transition: 0.3s;
}

.article_list_intro {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 18px;
  margin-bottom: 4px;
  color: #242424;
  transition: 0.3s;
}

.article_list_more {
  font-size: 14px;
  font-weight: 700;
  color: #007bff;
  margin: 0;
}

.article_list_item:hover p {
  color: #007bff;
}

.article_list_item:hover h2 {
  color: #007bff;
}

.article-detail, .article {
  padding-bottom: 120px;
}

.article-detail {
  max-width: 1000px;
  margin: 0 auto;
}

.article-detail_title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 7px;
  color: #007BFF;
}

.article-detail_date {
  font-size: 16px;
  margin-bottom: 16px;
  color: #5D5D5D;
}

.article-detail_pic {
  max-width: 700px;
  width: 100%;
  margin-bottom: 16px;
}

.article-detail_intro {
  font-size: 18px;
  color: #1D1D1D;
  margin-bottom: 20px;
}

.article-detail_back {
  display: block;
  padding: 4px 38px;
  background-color: #007BFF;
  color: #fff;
  border-radius: 100px;
  width: fit-content;
  margin-left: auto;
  text-decoration: none;
}

@media screen and (max-width: 575px) {
  .nav-tabs {
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .nav-tabs .nav-link {
    padding: 8px 20px;
    font-size: 16px;
    white-space: nowrap;
  }
  .article_list_item {
    flex-direction: column;
  }
  .article_list_pic {
    width: 100%;
    padding-bottom: 72.5%;
  }
  .article_list_text {
    width: 100%;
    padding-top: 15px;
    padding-left: 0;
  }
}