:root {
	--color-background: #f5f5f5;
	--color-white: #ffffff;
	--color-black: #000000;
	--color-text-primary: #140d1c;
	--color-text-secondary: rgba(0, 0, 0, 0.5);
	--color-text-light: #faf7fc;
	--color-primary: #a259ff;
	--color-border-light: rgba(0, 0, 0, 0.1);
	--color-border-medium: rgba(0, 0, 0, 0.2);
	--color-border-dark: rgba(0, 0, 0, 0.3);
	--font-main: 'Manrope', sans-serif;
	--font-secondary: 'Plus Jakarta Sans', sans-serif
}

* {
	box-sizing: border-box;
	outline: none;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-main);
	background-color: var(--color-background);
	color: var(--color-text-primary)
}

a {
	text-decoration: none;
	color: inherit
}

img {
	max-width: 100%;
	height: auto;
	display: block
}

.content-wrapper {
	max-width: 1118px;
	margin: 0 auto;
	padding: 0
}

.section-title {
	font-family: var(--font-main);
	font-weight: 800;
	font-size: 26px;
	line-height: 36px;
	color: var(--color-black);
	margin-bottom: 16px
}

.content-wrapper.border-top {
	border-top: 1px solid var(--color-border-light);
	padding-top: 32px
}

.site-header {
	position: fixed;
	top: 0;
	z-index: 100;
	background-color: rgba(245, 245, 245, .3);
	backdrop-filter: blur(28px) brightness(100%);
	-webkit-backdrop-filter: blur(28px) brightness(100%);
	padding: 8px;
	width: 100%
}

.header-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.logo {
	width: 200px
}

.main-nav {
	display: flex;
	align-items: center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .07);
	border-radius: 40px
}

.nav-item {
	background-color: var(--color-white);
	border: .2px solid var(--color-border-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 12px 24px;
	font-family: var(--font-main);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .48px;
	color: var(--color-black);
	transition: background-color .3s;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .07)
}

.nav-item:hover {
	background: linear-gradient(0deg, rgba(162, 89, 255, .2), rgba(162, 89, 255, .2)), #fff;
	border: 1px solid #a259ff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .07)
}

.nav-item-first {
	border-radius: 40px 0 0 40px
}

.nav-item-last {
	border-radius: 0 40px 40px 0
}

.close-menu-btn,
.hamburger {
	display: none
}

.menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	background: rgba(255, 255, 255, .2);
	backdrop-filter: blur(30px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease-in-out;
	z-index: 1000;
	display: flex;
	justify-content: center
}

#menu-toggle {
	display: none
}

#menu-toggle:checked~.menu-overlay {
	opacity: 1;
	visibility: visible
}

#menu-toggle:checked~.main-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	transform: translateX(0);
	z-index: 1001;
	box-shadow: none;
	border-radius: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0
}

#menu-toggle:checked~.main-nav .nav-item {
	border-radius: 40px;
	width: 170px
}

#menu-toggle:checked~.main-nav .close-menu-btn {
	display: flex;
	padding: 12px 18px;
	width: auto;
	margin-top: 60px
}

.hero-section {
	padding-top: 65px
}

.hero-section .content-wrapper {
	margin-top: 20px;
	max-width: 1148px;
}

.hero-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 100%;
	margin: 0 auto;
  	padding: 100px 20px;
	text-align: center;
}

.hero-content h1 {
	font-size: 32px;
	color: #A259FF;
	margin: 0;
}

.hero-content h2 {
	margin: 0;
	font-size: 30px;
}

.hero-content p {
	font-size: 14px;
	line-height: 22px;
	color: #5C5252;
	margin: 0;
}

.hero-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.25;
	color: var(--color-white);
	text-align: center;
	margin: 0
}

.hero-cta {
	background-color: var(--color-primary);
	color: var(--color-white);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	padding: 16px 44px;
	border-radius: 56px;
	transition: background-color .3s
}

.hero-cta:hover {
	background-color: #8a48e0
}

.content-details {
	font-family: var(--font-secondary);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-black);
	line-height: 22px;
}

.content-details a {
	color: #A259FF;
}

.footer-bottom {
	width: 100%;
	text-align: right;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--color-border-light);
	margin-bottom: 90px
}

.copyright {
	font-family: var(--font-secondary);
	font-weight: 500;
	font-size: 16px;
	color: var(--color-text-secondary);
	margin: 0
}



@media (max-width:768px) {
	.site-header {
		background: 0 0;
		backdrop-filter: unset;
		-webkit-backdrop-filter: unset
	}

	.header-container {
		justify-content: center;
		gap: 60px;
		border-radius: 40px;
		border: .2px solid rgba(0, 0, 0, .6);
		background: #fff;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .07);
		padding: 8px 0
	}

	.main-nav {
		display: none
	}

	.hero-title {
		font-size: 28px
	}

	.hero-section {
		padding-top: 0
	}

	.hero-section .content-wrapper {
		border-radius: 0;
		margin-top: 0;
		padding: 35px
	}

	.hero-content {
		padding: 20px;
	}

	.content-wrapper {
		padding: 0 20px
	}

	.hamburger {
		background: 0 0;
		border: none;
		padding: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.section-title {
		font-size: 22px
	}

	.footer-bottom {
		text-align: left;
	}

	.copyright {
		font-size: 12px;
	}
}