:root {
	--white-100: hsl(206, 5%, 100%);
	--white-200: hsl(206, 5%, 90%);
	--white-300: hsl(206, 5%, 80%);
	--white-400: hsl(206, 5%, 65%);
	--white-500: hsl(206, 5%, 45%);
	--black-100: hsl(210, 21%, 12%);
	--black-200: hsl(210, 21%, 9%);
	--black-300: hsl(210, 21%, 6%);
	--black-400: hsl(210, 21%, 3%);
	--black-500: hsl(210, 21%, 1%);
	--night-100: hsl(217, 27%, 20%);
	--night-200: hsl(217, 27%, 16%);
	--night-300: hsl(217, 27%, 12%);
	--night-400: hsl(215, 27%, 8%);
	--night-500: hsl(215, 27%, 4%);
	--pink-100: hsl(236, 84%, 90%);
	--pink-200: hsl(229, 86%, 80%);
	--pink-300: hsl(231, 86%, 70%);
	--pink-400: hsl(240, 81%, 60%);
	--pink-500: hsl(246, 71%, 50%);
	--shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
	   0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
	   0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
	   0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  *,
  *::before,
  *::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style: none;
	list-style-type: none;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
  }
  
  html {
	font-size: 100%;
	box-sizing: inherit;
	scroll-behavior: smooth;
	height: -webkit-fill-available;
  }
  
  body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: clamp(1rem, calc(0.97rem + 0.14vw), 1.09rem);
	font-weight: normal;
	line-height: 1.5;
	color: var(--black-300);
	background-color: var(--white-100);
  }
  body.darkmode {
	color: var(--white-100);
	background-color: var(--night-400);
  }
  
  main {
	overflow: hidden;
  }
  
  a,
  button {
	cursor: pointer;
	user-select: none;
	border: none;
	outline: none;
	background: none;
  }
  
  img,
  video {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: cover;
  }
  
  img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
  }
  
  @keyframes slideLeft {
	0% {
	  opacity: 0;
	  transform: translateX(100%);
	}
	100% {
	  opacity: 1;
	  transform: translateX(0%);
	}
  }
  @keyframes slideRight {
	0% {
	  opacity: 1;
	  transform: translateX(0%);
	}
	100% {
	  opacity: 0;
	  transform: translateX(100%);
	}
  }
  .section {
	margin: 0 auto;
	padding: 6rem 0 2rem;
  }
  
  .container {
	max-width: 75rem;
	height: auto;
	margin-inline: auto;
	padding-inline: 1.5rem;
  }
  
  .centered {
	text-align: center;
	vertical-align: middle;
	margin-bottom: 1rem;
  }
  
  .btn {
	display: inline-block;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	user-select: none;
	border-radius: 0.25rem;
	text-transform: capitalize;
	transition: all 0.3s ease;
  }
  .btn-primary {
	padding: 0.75rem 1.5rem;
	color: var(--white-100);
	background-color: var(--pink-500);
	box-shadow: var(--shadow-medium);
  }
  .btn-darken {
	padding: 0.75rem 1.5rem;
	color: var(--white-100);
	background-color: var(--night-300);
	box-shadow: var(--shadow-medium);
  }
  
  .header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 100;
	margin: 0 auto;
	background-color: var(--white-100);
	box-shadow: var(--shadow-medium);
  }
  .darkmode .header {
	background-color: var(--night-300);
  }
  
  .brand {
	font-family: inherit;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--pink-500);
	text-transform: uppercase;
	order: 1;
	width: 130px;
	}
  .darkmode .brand {
	color: var(--pink-300);
	background: white;
	padding: 2px;
	width: 140px;
	}
  
  .navbar {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 4rem;
	margin: 0 auto;
  }
  .navbar-left {
	display: flex;
	align-items: center;
	flex: 0 0 17%;
  }
  .navbar-center {
	display: flex;
  }
  .navbar-right {
	display: flex;
	flex: 0 0 17%;
	align-items: center;
	justify-content: flex-end;
	column-gap: 1.5rem;
  }
  @media only screen and (max-width: 992px) {
	.navbar-left, .navbar-right {
	  flex: 0 0 auto;
	}
	.navbar-right {
	  align-items: center;
	}
	.navbar-center {
	  flex: 0 0 100%;
	  order: 3;
	  align-items: center;
	}
  }
  
  @media only screen and (max-width: 992px) {
	.menu {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 75%;
	  height: 100%;
	  z-index: 100;
	  overflow: hidden;
	  transform: translate(-100%);
	  background-color: var(--white-100);
	  transition: all 0.4s ease-in-out;
	}
	.menu.is-active {
	  transform: translate(0%);
	}
	.darkmode .menu {
	  background-color: var(--night-300);
	}
  }
  
  .menu-header {
	display: none;
	box-shadow: var(--shadow-medium);
  }
  .menu-item {
	display: inline-block;
	line-height: 1.5;
	padding-right: 1.25rem;
  }
  .menu-link {
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--black-300);
	text-transform: capitalize;
	transition: all 0.25s ease;
  }
  .menu-link > i.bx {
	font-size: 1.35rem;
	margin-left: 0.25rem;
	transform: rotate(90deg);
  }
  .darkmode .menu-link {
	color: var(--white-100);
  }
  .menu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 6px;
	font-size: 1.45rem;
	color: var(--black-300);
	transition: all 0.25s ease;
  }
  .darkmode .menu-icon {
	color: var(--white-100);
  }
  @media only screen and (min-width: 993px) {
	.menu-dropdown:hover > .submenu {
	  opacity: 1;
	  visibility: visible;
	  margin-top: 1.2rem;
	}
  }
  @media only screen and (max-width: 992px) {
	.menu-header {
	  position: relative;
	  top: 0;
	  display: flex;
	  align-items: center;
	  justify-content: flex-start;
	  height: 4rem;
	  z-index: 110;
	  visibility: hidden;
	  background: transparent;
	}
	.menu-header.is-active {
	  visibility: visible;
	  background-color: var(--white-100);
	}
	.menu-header.is-active > .menu-arrow {
	  display: block;
	}
	.darkmode .menu-header.is-active {
	  background-color: var(--night-100);
	}
	.menu-arrow {
	  display: none;
	  cursor: pointer;
	  width: 3rem;
	  height: 4rem;
	  text-align: center;
	}
	.menu-arrow > i.bx {
	  font-size: 1.5rem;
	  line-height: 4rem;
	  color: var(--black-300);
	  transition: all 0.25s ease;
	}
	.darkmode .menu-arrow > i.bx {
	  color: var(--white-100);
	}
	.menu-title {
	  font-family: inherit;
	  font-size: inherit;
	  font-weight: 500;
	  line-height: inherit;
	  text-transform: capitalize;
	  color: var(--black-300);
	}
	.darkmode .menu-title {
	  color: var(--white-100);
	}
	.menu-inner {
	  height: 100%;
	  margin-top: -3rem;
	  overflow-y: auto;
	  overflow-x: hidden;
	}
	.menu-item {
	  display: block;
	  line-height: 1;
	  padding-inline: 0;
	}
	.menu-link {
	  justify-content: space-between;
	  height: 2.5rem;
	  line-height: 2.5rem;
	  padding-inline: 1.25rem;
	}
	.menu-link > i.bx {
	  margin-left: 0.5rem;
	  transform: rotate(0deg);
	}
  }
  
  .submenu {
	position: absolute;
	width: 100%;
	height: auto;
	margin-top: 1.75rem;
	padding: 1rem 2rem;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	border-radius: 0.25rem;
	border-top: 2px solid var(--pink-400);
	background-color: var(--white-100);
	box-shadow: var(--shadow-medium);
	transition: all 0.25s ease-in-out;
  }
  .darkmode .submenu {
	border-top: 2px solid var(--pink-300);
	background-color: var(--night-300);
  }
  .submenu-inner {
	flex: 0 0 25%;
	padding: 0 1rem;
  }
  .submenu-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: 1;
	padding: 0.75rem 0;
	color: var(--pink-500);
	text-transform: uppercase;
	transition: all 0.3s ease;
  }
  .darkmode .submenu-title {
	color: var(--pink-300);
  }
  .submenu-item {
	display: block;
	line-height: 1;
	margin: 0 auto;
  }
  .submenu-link {
	display: inline-block;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: inherit;
	padding: 0.75rem 0;
	white-space: nowrap;
	text-transform: capitalize;
	color: var(--black-300);
	transition: all 0.25s ease-in-out;
  }
  .darkmode .submenu-link {
	color: var(--white-100);
  }
  .submenu-image {
	display: block;
	width: 100%;
	height: auto;
	margin-block: 0.5rem;
	object-fit: cover;
  }
  @media only screen and (max-width: 992px) {
	.submenu {
	  position: absolute;
	  display: none;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  max-width: none;
	  min-width: auto;
	  margin: 0;
	  padding: 1rem;
	  padding-top: 4rem;
	  opacity: 1;
	  overflow-y: auto;
	  visibility: visible;
	  box-shadow: none;
	  transform: translateX(0%);
	}
	.submenu.is-active {
	  display: block;
	}
	.submenu-inner {
	  flex: 0 0 100%;
	  padding: 0rem;
	}
	.submenu-list {
	  margin-bottom: 1rem;
	}
	.submenu-link {
	  display: block;
	}
	.submenu-image {
	  margin-top: 0;
	}
  }
  
  .megamenu {
	left: 50%;
	width: 100%;
	height: auto;
	margin: 0 auto;
	transform: translateX(-50%);
  }
  .megamenu-column-1 {
	left: 65%;
	max-width: 15rem;
	width: 100%;
	height: auto;
  }
  .megamenu-column-4 {
	display: flex;
	flex-wrap: wrap;
	max-width: 62rem;
	height: auto;
	margin: 0 auto;
  }
  @media only screen and (max-width: 992px) {
	.megamenu {
	  position: absolute;
	  display: none;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  max-width: none;
	  min-width: auto;
	  margin: 0;
	  padding: 1rem;
	  padding-top: 4rem;
	  opacity: 1;
	  overflow-y: auto;
	  visibility: visible;
	  transform: translateX(0%);
	  box-shadow: none;
	}
  }
  
  .switch {
	position: relative;
	display: block;
	cursor: pointer;
	user-select: none;
	margin-right: 0.5rem;
  }
  .switch-light, .switch-dark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: center;
	transform: translate(-50%, -50%);
	transition: all 0.3s ease-in;
  }
  .switch-light {
	font-size: 1.3rem;
	visibility: visible;
	color: var(--black-300);
  }
  .darkmode .switch-light {
	font-size: 0rem;
	visibility: hidden;
  }
  .switch-dark {
	font-size: 0rem;
	visibility: hidden;
	color: var(--white-100);
  }
  .darkmode .switch-dark {
	font-size: 1.3rem;
	visibility: visible;
  }
  
  .overlay {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	background-color: rgba(0, 0, 0, 0.7);
	transition: all 0.45s ease-in-out;
  }
  @media only screen and (max-width: 992px) {
	.overlay.is-active {
	  opacity: 1;
	  visibility: visible;
	}
  }
  
  .burger {
	position: relative;
	display: block;
	cursor: pointer;
	width: 1.6rem;
	height: 1rem;
	margin-right: 1rem;
	opacity: 0;
	visibility: hidden;
	background: transparent;
  }
  @media only screen and (max-width: 992px) {
	.burger {
	  opacity: 1;
	  visibility: visible;
	}
  }

  .burger-line {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 2px;
	opacity: 1;
	border-radius: 1rem;
	background: var(--black-400);
  }
  .darkmode .burger-line {
	background: var(--white-100);
  }
  .burger-line:nth-child(1) {
	top: 0px;
  }
  .burger-line:nth-child(2) {
	top: 0.5rem;
	width: 70%;
  }
  .burger-line:nth-child(3) {
	top: 1rem;
  }