:root {
	--ft: clamp(16px, 5vw + 3.5rem, 128px);

	--bg-light: #d6dcef;
	--bg-dark: #0f172a;

	--sbg-light: #efd6e8;
	--sbg-dark: #2a1123;

	--cbg-light: #d6efdd;
	--cbg-dark: #112a18;

	--btn-light: #efe9d6;
	--btn-dark: #2a2411;

	--btn-fg-light: #000;
	--btn-fg-dark: #fff;

	--hd-light: var(--bg-light);
	--hd-dark: var(--bg-dark);

	--bd-light: #334155;
	--bd-dark: #334155;

	--h1-light: #2563eb;
	--h1-dark: #3b82f6;

	--h2-light: #60a5fa;
	--h2-dark: #60a5fa;

	--a-light: #1e40af;
	--a-dark: #93c5fd;

	--txt1-light: #1e293b;
	--txt1-dark: #e2e8f0;

	--txt2-light: #64748b;
	--txt2-dark: #94a3b8;
}

body {
	margin: 0;
	font-family: "Times New Roman";
	background-color: var(--bg);
	scroll-behavior: smooth;
}

body.dark {
	--h1: var(--h1-dark);
	--h2: var(--h2-dark);
	--a: var(--a-dark);
	--bg: var(--bg-dark);
	--hd: var(--hd-dark);
	--sbg: var(--sbg-dark);
	--cbg: var(--cbg-dark);
	--bd: var(--bd-dark);
	--txt1: var(--txt1-dark);
	--txt2: var(--txt2-dark);
	--btn: var(--btn-dark);
	--btn-fg: var(--btn-fg-dark);
}

body.light {
	--h1: var(--h1-light);
	--h2: var(--h2-light);
	--a: var(--a-light);
	--bg: var(--bg-light);
	--hd: var(--hd-light);
	--sbg: var(--sbg-light);
	--cbg: var(--cbg-light);
	--bd: var(--bd-light);
	--txt1: var(--txt1-light);
	--txt2: var(--txt2-light);
	--btn: var(--btn-light);
	--btn-fg: var(--btn-fg-light);
}

header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--hd);
	color: var(--h1);
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
header {
	flex-wrap: wrap;
	position: relative;
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 2rem;
	color: var(--a);
	cursor: pointer;
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	z-index: 1001;
}

@media (max-width: 700px) {
	.menu-toggle {
		display: block;
	}

	header nav {
		display: none;
		flex-direction: column;
		width: 100%;
		margin-top: 1rem;
	}

	body.menu-open header nav {
		display: flex;
	}

	header nav a {
		margin: 0.5rem 0;
		font-size: calc(0.2 * var(--ft));
		transform: none !important;
	}
}
.logo-container {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: calc(0.24 * var(--ft));
	background: -webkit-linear-gradient(360deg, #4aff89, #5d87ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.logo {
	width: 40px;
	height: 40px;
	background-color: #1e293b;
	border-radius: 50%;
}
nav a {
	color: var(--a);
	margin-left: 1rem;
	text-decoration: none;
	font-weight: 500;
	font-size: calc(0.16 * var(--ft));
	transition: transform 0.3s ease, color 0.3s ease;
}
nav a:hover {
	color: #fff;
	transform: scale(1.1);
}
.hero {
	height: calc(100vh - 4.5rem);
	width: 100%;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.hero .bg {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background: #fff;
}
.hero .mn {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background: #00000000;
}
.hero .wrapper {
	background-color: #000c;
	height: 100%;
	padding: 0px 4rem;
	display: flex;
	position: relative;
	align-items: center;
}
.wrapper img {
	aspect-ratio: 1;
	background-color: #000;
	border: 3px solid #25f;
	border-radius: 25%;

	animation: slideFromRight 1s ease-out forwards;
	animation-delay: 0s;
	animation-fill-mode: backwards;
}
.wrapper .top {
	width: 100%;
	display: none;
}
.wrapper .rt {
	height: 60%;
	display: block;
}
.wrapper .lt {
	height: 100%;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	text-align: left;
}
.lt .hdng,
.lt p {
	padding: 20px;
	width: fit-content;
	border: 3px solid #25f;
	border-radius: 50px;
}
.lt .hdng,
.lt p,
.wrapper img {
	background-image: radial-gradient(#23447f, #08122e);
}
.lt .hdng {
	color: #61fd98;
	margin-bottom: 0;
	font-size: calc(0.6 * var(--ft));

	animation: slideFromTop 1s ease-out forwards;
	animation-delay: 0s;
	animation-fill-mode: backwards;
}
.lt p {
	color: #6198fd;
	font-size: calc(0.36 * var(--ft));

	animation: slideFromBottom 1s ease-out forwards;
	animation-delay: 0s;
	animation-fill-mode: backwards;
}
section {
	padding: 1.5rem;
	margin: auto;
	margin-top: 2rem;
	margin-bottom: 2rem;
	max-width: 900px;
	background-color: var(--sbg);
	border: 3px solid var(--bd);
	border-style: ridge;
	border-radius: 20px;
}
section h2 {
	font-size: calc(0.32 * var(--ft));
	color: var(--h2);
	margin: 0px;
	margin-bottom: 1rem;
}
section p,
section ul {
	margin-top: 0px;
	line-height: 1.6;
	font-size: calc(0.2 * var(--ft));
	color: var(--txt2);
}
.content-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}
.scroll-controls {
	display: flex;
	gap: 0.5rem;
}
.scroll-controls button {
	background-color: var(--btn);
	color: var(--btn-fg);
	border: none;
	font-size: 1.5rem;
	padding: 0.3rem 0.75rem;
	cursor: pointer;
	border-radius: 0.5rem;
}
.content {
	display: flex;
	gap: 1.5rem;
	overflow-x: hidden;
	scroll-behavior: smooth;
}
.card {
	background: var(--cbg);
	border-radius: 0.75rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	width: 300px;
}

.card img {
	height: 200px;
	width: auto;
}
#products .card img {
	width: 200px;
	height: auto;
	border-radius: 1rem;
	object-fit: cover;
}
.card-content {
	padding: 1.5rem;
}
.card h3 {
	margin-top: 0;
	font-size: calc(0.24 * var(--ft));
	color: var(--txt1);
}
.card p,
.card ul {
	color: var(--txt2);
}
.team-member {
	background: var(--cbg);
	border-radius: 0.75rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: center;
}
.team-info {
	flex: 1;
	min-width: 0px;
	text-align: left;
	padding: 20px;
}
.team-info h3 {
	margin-top: 0;
	font-size: calc(0.24 * var(--ft));
	color: var(--txt1);
}
.team-photo {
	width: 200px;
	height: auto;
	border-radius: 1rem;
	object-fit: cover;
}
.team-photo.top {
	display: none;
}
.team-photo.lt {
	display: block;
}
@media (min-width: 768px) {
	.team-member {
		flex-direction: row-reverse;
		align-items: flex-start;
		justify-content: space-between;
	}
	.team-photo.top {
		display: block;
	}
	.team-photo.lt {
		display: none;
	}
}
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
.contact-form input,
.contact-form textarea {
	flex: 1;
	padding: 0.75rem;
	border: 1px solid var(--bd);
	border-radius: 0.5rem;
	font-size: 1rem;
	background: var(--sbg);
	color: var(--txt1);
}
.contact-form textarea {
	resize: vertical;
}
.contact-form button {
	align-self: flex-start;
	background-color: var(--a);
	color: #fff;
	border: none;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background 0.3s;
}
.contact-form button:hover {
	background-color: var(--h2);
}
footer {
	background-color: #1e293b;
	color: #cbd5e1;
	text-align: center;
	padding: 1.5rem;
}

@keyframes slideFromTop {
	from {
		opacity: 0;
		transform: translateY(-500px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideFromBottom {
	from {
		opacity: 0;
		transform: translateY(500px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideFromRight {
	from {
		opacity: 0;
		transform: translateX(500px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (max-width: 600px) {
	.wrapper {
		padding: 1rem 2rem !important;
		flex-direction: column;
	}
	.wrapper .top {
		display: block;
	}
	.wrapper .lt {
		min-height: 0;
		width: 100%;
		gap: 0.25rem;
	}
	.wrapper .rt {
		display: none;
	}
	section {
		margin: 1rem;
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
	.lt .hdng {
		font-size: calc(0.45 * var(--ft));
	}
	.lt p {
		font-size: calc(0.25 * var(--ft));
	}
}

@media (min-width: 600px) {
	.wrapper {
		padding: 0px 4rem !important;
		flex-direction: row;
	}
	.wrapper .top {
		display: none;
	}
	.wrapper .rt {
		display: block;
	}
	.wrapper .lt {
		height: 100%;
		min-width: 0;
		gap: 0.5rem;
	}
	section {
		margin: auto;
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
}