@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--color-bg: #0f0f2a;
	--color-bg-lighter: #16213e;
	--color-bg-hover: #1e293b;
	--gradient-primary: linear-gradient(
		90deg,
		#039dff 0%,
		#00c6ff 35%,
		#4facfe 65%,
		#6a8dff 100%
	);
	--color-font-white: #e6f1ff;
	--color-font-secondary: #b8c5d6;
	--shadow-primary: 0 10px 30px #039dff1a, 0 4px 12px rgba(0, 0, 0, 0.35);
	--shadow-lighter: 0 6px 18px #00000040;
	--shadow-color-bg: 0 6px 18px #0f0f2a;
	--color-main-accent: #039dff;
	--border: 1px solid var(--border-color);
	--border-color: #ffffff0d;
}

html {
	overflow-x: hidden;
}

body {
	background-color: var(--bg-color);
	font-family: "Montserrat", sans-serif;
	color: #000;
	overflow-x: hidden !important;
}

:root.light {
	--color-bg: #f6f9ff;
	--color-bg-lighter: #eef3fb;
	--color-bg-hover: #e4ebf5;
	--gradient-primary: linear-gradient(
		90deg,
		#039dff 0%,
		#00c6ff 35%,
		#4facfe 65%,
		#6a8dff 100%
	);
	--color-font-white: #0f172a;
	--color-font-secondary: #475569;
	--shadow-primary: 0 10px 25px rgba(3, 157, 255, 0.12),
		0 4px 10px rgba(0, 0, 0, 0.08);
	--shadow-lighter: 0 4px 12px rgba(0, 0, 0, 0.06);
	--shadow-color-bg: 0 4px 12px rgba(15, 15, 42, 0.08);
	--color-main-accent: #039dff;
	--border: 1px solid var(--border-color);
	--border-color: #00000014;
}

main {
	background-color: var(--color-bg);
}

.blue-text {
	color: var(--main-color);
}

.shadow-bg {
	background-color: rgba(0, 0, 0, 0.9);
}

.section-title {
	text-align: center;
	text-transform: uppercase;
	font-size: 34px;
}

.underline {
	width: 60px;
	height: 4px;
	margin: 0 auto 40px;
	background-image: var(--gradient-primary);
}

footer {
	background-color: var(--color-bg-lighter);
	color: var(--color-font-secondary);
}