:root {
  --blue-chill-50: #eafffd;
  --blue-chill-100: #cafffb;
  --blue-chill-200: #9cfffa;
  --blue-chill-300: #57fffa;
  --blue-chill-400: #0cfbff;
  --blue-chill-500: #00ddea;
  --blue-chill-600: #00afc4;
  --blue-chill-700: #008799;
  --blue-chill-800: #0b6e7f;
  --blue-chill-900: #0e5b6b;
  --blue-chill-950: #023d4a;
  --text-black: #313133;
  --white: #ffffff;
  --bg-primary: #f9f7ee;
  --border: #E8DEDE;
  --text-gray: #686868;
  --footer-bg: #f0f0f0;
  --bg-nav: #efede4;
}

html {
  font-family: "Dosis", sans-serif;
}

body {
  font-size: 16px;
  background-color: var(--bg-primary);
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
  border-radius: 10px;
}

body::-webkit-scrollbar {
  width: 8px;
  background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--blue-chill-700);
  background-image: -webkit-linear-gradient(45deg,
      rgba(255, 255, 255, .2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, .2) 50%,
      rgba(255, 255, 255, .2) 75%,
      transparent 75%,
      transparent)
}

.container {
  max-width: 1440px;
  width: 100%;
  margin-inline: auto;
}

.inner-wrapper {
  max-width: 1040px;
  width: 100%;
  margin-inline: auto;
}

.hide-pc {
  display: none;
}

.btn {
  height: 45px;
  padding: 10px 30px;
  font-size: 20px;
  border-radius: 35px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  color: var(--text-black);
}

.btn.primary {
  background-color: var(--blue-chill-600);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.btn.primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20px;
  height: 200%;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(25deg);
  animation: lightSweep 3s infinite;
  transition: all 0.3s;
}

.btn.primary:hover::after {
  animation: none;
  /* Reset or speed up on hover */
  left: 120%;
  transition: left 0.5s;
}

.btn.primary a {
  color: var(--white);
}

.btn.primary.btn-border {
  border: 1px solid var(--blue-chill-50);
}

a {
  color: unset;
}

.title {
  font-family: "Roslindale", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 48px;
  line-height: 48px;
  color: var(--text-black);
}

.title-blue {
  font-family: "Roslindale", sans-serif;
  font-weight: 300;
  font-size: 48px;
  line-height: 52px;
  color: var(--white);
}

.border-b {
  border-bottom: 2px solid var(--blue-chill-900);
}

.border-t {
  border-top: 2px solid var(--blue-chill-900);
}

.border-r {
  border-right: 2px solid var(--blue-chill-900);
}

.border-l {
  border-left: 2px solid var(--blue-chill-900);
}

.border {
  border: 2px solid var(--blue-chill-900);
}

.header-nav__item .header-nav__link {
  transition: all 250ms ease !important;
}

.header-nav__item:hover .header-nav__link {
  color: var(--blue-chill-700) !important;
}

/* Navbar */
.header-nav__item {
  position: relative;
}

.header-subnav__list {
  display: flex;
  flex-direction: column;
}

.header-subnav__list {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: var(--bg-primary);
  border-radius: 15px;
  border: 1px solid var(--blue-chill-700);
  padding: 12px;
}

.header-subnav__item {
  display: flex;
  justify-content: space-between;
  min-width: 260px;
  padding: 12px;
}

.header-subnav__item:hover {
  background-color: var(--bg-nav);
}

.header-subnav__item a {
  flex: 1;
}

.header-nav__item:hover>.header-subnav__list {
  display: flex;
}

/* Sub nav */

.subnav-item__list {
  display: none;
  position: absolute;
  left: 102%;
  top: 0;
  background-color: var(--bg-primary);
  border-radius: 15px;
  border: 1px solid var(--blue-chill-700);
  padding: 12px;
}

.subnav-item__list::before {
  position: absolute;
  content: "";
  z-index: 1;
  top: 0;
  bottom: 0;
  left: -25%;
  width: 80px;
}

.subnav-item__item {
  min-width: 260px;
  padding: 12px;
}

.subnav-item__item a {
  display: inline-block;
  flex: 1;
}

.subnav-item__item:hover {
  background-color: var(--bg-nav);
}

.header-subnav__item:hover>.subnav-item__list {
  display: flex;
  flex-direction: column;
}