@import"https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap";
:root {
--color-black: hsl(0, 0%, 10%);
--color-white: hsl(0, 0%, 100%);
--color-darken: hsl(0, 0%, 20%);
--color-pink-100: hsl(336, 95%, 94%);
--color-pink-200: hsl(338, 91%, 87%);
--color-pink-300: hsl(339, 90%, 81%);
--color-pink-400: hsl(339, 88%, 74%);
--color-pink-500: hsl(339, 82%, 67%);
--color-pink-600: hsl(355deg 97% 31%);
--color-pink-700: hsl(355deg 97% 31%);
--color-pink-800: hsl(339, 68%, 45%);
--color-pink-900: hsl(339, 69%, 38%);
--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;
-webkit-box-sizing:border-box;
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%;
	-webkit-box-sizing:inherit;
	box-sizing:inherit;
	scroll-behavior:smooth
}
body {
	font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:1rem;
	font-weight:400;
	line-height:1.5;
	color:var(--color-black);
	background:var(--color-white)
}
a, button {
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
	cursor:pointer;
	border:none;
	outline:none;
	background:none
}
img, video {
	display:block;
	max-width:100%;
	height:auto;
	-o-object-fit:cover;
	object-fit:cover
}
img {
	image-rendering:-webkit-optimize-contrast;
	image-rendering:-moz-crisp-edges;
	image-rendering:crisp-edges
}
.container {
	max-width:75rem;
	height:auto;
	margin:0 auto;
	padding:0 1.25rem
}
.brand {
	font-family:"Rubik", sans-serif;
	font-size:1.625rem;
	font-weight:600;
	line-height:1.25;
	letter-spacing:-1px;
	color:var(--color-pink-600);
	text-transform:uppercase
}
.header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:auto;
	z-index:999999;
	margin:0 auto;
	background:var(--color-white);
	-webkit-box-shadow:var(--shadow-medium);
	box-shadow:var(--shadow-medium)
}
.header .wrapper {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between!important;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	gap:5rem;
	max-width:100%;
	height:6rem;
	margin:0 auto; float:right
}
.header .menu>.menu-item {
	position:relative;
	display:inline-block;
margin:0 .75rem
}
.header .menu>.menu-item>a {
	display:block;
	font-family:inherit;
	font-size:1rem;
	font-weight:500;
	line-height:inherit;
	padding:1rem 0;
	border:none;
	outline:none;
	color:var(--color-black);
	text-transform:capitalize;
-webkit-transition:all .35s ease;
transition:all .35s ease
}
.header .menu>.menu-item>a .expand {
	position:relative;
	display:inline-block;
width:.75rem;
height:.75rem;
margin-left:.35rem;
	pointer-events:none;
	border:none;
	outline:none
}
.header .menu>.menu-item>a .expand:before, .header .menu>.menu-item>a .expand:after {
	position:absolute;
	-webkit-box-sizing:inherit;
	box-sizing:inherit;
	content:"";
	top:50%;
	left:50%;
	width:100%;
	height:2px;
	background:var(--color-black);
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
-webkit-transition:all .35s ease;
transition:all .35s ease
}
.header .menu>.menu-item:hover>a {
	color:var(--color-pink-700)
}
.header .menu>.menu-item:hover>a .expand::before, .header .menu>.menu-item:hover>a .expand::after {
background:var(--color-pink-700)
}
.header .menu>.menu-item>a .expand::after {
-webkit-transform:translate(-50%, -50%) rotate(-90deg);
transform:translate(-50%, -50%) rotate(-90deg)
}
.header .menu>.menu-item>.sub-menu>.menu-item>a:hover {
	color:var(--color-pink-700)
}
.header .menu>.menu-item>.sub-menu {
	position:absolute;
	top:100%;
	left:-1rem;
	width:13rem;
	height:auto;
padding:.75rem 0;
	border:none;
	outline:none;
	opacity:0;
	visibility:hidden;
	border-top:3px solid var(--color-pink-600);
	background:var(--color-white);
	-webkit-box-shadow:var(--shadow-medium);
	box-shadow:var(--shadow-medium);
	-webkit-transform:translateY(1rem);
	transform:translateY(1rem);
-webkit-transition:all .35s ease;
transition:all .35s ease
}
.header .menu>.menu-item>.sub-menu>.menu-item {
	display:block
}
.header .menu>.menu-item>.sub-menu>.menu-item>a {
	display:block;
	font-family:inherit;
	font-size:1rem;
	font-weight:500;
	line-height:inherit;
padding:.5rem 1.25rem;
	color:var(--color-black);
	text-transform:capitalize;
-webkit-transition:all .35s ease;
transition:all .35s ease
}
.header .burger {
	position:relative;
	cursor:pointer;
	display:none;
	width:1.75rem;
	height:1rem;
	margin-top:-0.25rem;
	outline:none;
	opacity:0;
	visibility:hidden;
	background:none;
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
-webkit-transition:all .35s ease;
transition:all .35s ease
}
.header .burger-line {
	position:absolute;
	display:block;
	width:100%;
	height:2px;
	left:0;
	border:none;
	outline:none;
	opacity:1;
border-radius:.25rem;
	background:var(--color-black);
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
-webkit-transition:all .25s ease;
transition:all .25s ease
}
.header .burger-line:nth-child(1) {
top:0
}
.header .burger-line:nth-child(2), .header .burger-line:nth-child(3) {
top:.5rem
}
.header .burger-line:nth-child(4) {
top:1rem
}
.header .overlay {
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:100;
	opacity:0;
	visibility:hidden;
	background:rgba(0, 0, 0, .65);
-webkit-transition:all .35s ease;
transition:all .35s ease
}
@media only screen and (min-width: 993px) {
.header .menu>.menu-item-child:hover>.sub-menu {
display:block;
opacity:1;
visibility:visible;
-webkit-transform:translateY(0);
transform:translateY(0)
}
.header .menu>.menu-item-child:hover>a .expand::after {
-webkit-transform:translate(-50%, -50%) rotate(0deg);
transform:translate(-50%, -50%) rotate(0deg)
}
}
@media only screen and (max-width: 992px) {
.header .overlay.active {
display:block;
opacity:1;
visibility:visible
}
.header .navbar {
position:fixed;
top:0;
left:-100%;
width:75%;
height:100%;
z-index:999;
opacity:0;
overflow-y:auto;
visibility:hidden;
background:var(--color-white);
-webkit-box-shadow:var(--shadow-medium);
box-shadow:var(--shadow-medium);
-webkit-transition:all .5s ease;
transition:all .5s ease
}
.header .navbar.active {
left:0rem;
opacity:1;
visibility:visible
}
.header .menu {
width:100%;
height:auto;
margin:1rem 0
}
.header .menu>.menu-item {
display:block;
margin:0
}
.header .menu>.menu-item-child>a {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center
}
.header .menu>.menu-item>a {
padding:.625rem 1.25rem;
color:var(--color-black)
}
.header .menu>.menu-item>a .expand::before, .header .menu>.menu-item>a .expand::after {
background:var(--color-black)
}
.header .menu>.menu-item-child.active>a .expand:after {
-webkit-transform:translate(-50%, -50%) rotate(0deg);
transform:translate(-50%, -50%) rotate(0deg)
}
.header .menu>.menu-item>.sub-menu {
position:relative;
top:auto;
left:auto;
width:100%;
max-height:0;
padding:0px;
border:none;
outline:none;
opacity:1;
overflow:hidden;
visibility:visible;
background:transparent;
-webkit-box-shadow:none;
box-shadow:none;
-webkit-transform:translateY(0px);
transform:translateY(0px)
}
.header .menu>.menu-item>.sub-menu>.menu-item>a {
padding:.625rem 2rem;
color:var(--color-black)
}
.header .burger {
display:block;
opacity:1;
visibility:visible
}
}
