@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
:root {
	--blue: #050a30;
	--yellow: #f6dc2f;
	--dark-blue: #0a0f30;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* Global Styles */
body {
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	background-color: var(--dark-blue);
	color: white;
	font-family: "Archivo", Helvetica;
	text-align: center;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}
/* Circle Page Layout */
.circle-page {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	overflow: hidden;
	width: 100%;
}
/* Navigation Styles */
.circle-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	margin-top: 60px;
	backdrop-filter: blur(9px);
	background: #ffffff20;
	border-radius: 100px;
}
	.circle-nav img {
		height: 32px;
	}
	.circle-nav div .link {
		color: white;
		text-decoration: none;
		font-size: 18px;
	}
	/* Hero Section Styles */
	.circle-hero {
		position: relative;
		height: 640px;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin: 90px 0;
		padding: 2rem;
		overflow: hidden;
	}
.circle-hero-title {
	font-weight: 500;
	font-size: 108px;
	letter-spacing: 0.02em;
	text-align: center;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0px;
	z-index: 1000;
}
.circle-hero-subtitle {
	font-size: 140px;
	font-weight: 700;
	letter-spacing: 4.20px;
	line-height: 182px;
	white-space: nowrap;
	margin: 0;
	z-index: 1000;
}
.circle-hero-text {
	font-size: 30px;
	font-weight: 400;
	line-height: 39px;
	text-align: center;
	margin: 10px auto;
	max-width: 900px;
	z-index: 1000;
}
.circle-hero-content {
	position: relative;
	z-index: 2;
	max-width: 800px;
}
/* Buttons */
.circle-buttons {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	z-index: 1000;
}
.circle-btn-outline,
.circle-btn-fill,
.circle-btn-demo {
	padding: 10px 20px;
	border-radius: 30px;
	font-size: 18px;
	cursor: pointer;
	font-weight: 700;
	text-decoration: none;
}
.circle-btn-outline,
.circle-btn-fill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 250px;
	justify-content: center;
}
.circle-btn-outline {
	border: 2px solid var(--yellow);
	background: transparent;
	color: var(--yellow);
}
.circle-btn-demo,
.circle-btn-fill {
	background: var(--yellow);
	border: none;
	color: var(--dark-blue);
}
.circle-influencers {
	display: inline-flex;
	align-items: center;
	margin: 0 5px;
}
/* Circle Wrapper */
.circle-wrapper {
	display: inline-flex;
	align-items: center;
	border: 10px solid #fff;
	border-radius: 50px;
	padding: 10px;
}
	.circle-wrapper img {
		width: 50px;
		height: 50px;
		margin: 0 -5px;
		object-fit: cover;
	}
.creators-header {
	position: relative;
	text-align: center;
	margin-bottom: 40px;
	width: 90%;
	margin: auto;
	z-index: 20;
}
.creators-title {
	font-size: 60px;
	font-weight: 900;
	line-height: 78px;
	letter-spacing: 0.04em;
	text-align: left;
	z-index: 1000;
	position: relative;
}
.e {
	position: absolute;
	transform: rotate(28deg);
	border-radius: 50%;
	z-index: 1;
}
.e-small {
	width: 256px;
	height: 256px;
	background: linear-gradient(var(--yellow), var(--blue) 50%, var(--blue) 60%, var(--yellow));
}
.e-center {
	width: 640px;
	height: 640px;
	left: calc(50% - 320px);
	top: calc(50% - 320px);
	background: linear-gradient(var(--yellow), var(--blue) 50%, var(--blue) 73%, var(--yellow));
}
.e-left {
	left: 15px;
	top: 10%;
}
.e-right {
	right: 15px;
	bottom: 10%;
}
.highlight-outer {
	position: relative;
	display: inline-block;
}
	.highlight-outer::after {
		content: '';
		position: absolute;
		bottom: -10px;
		left: -20px;
		right: -10px;
		top: 0;
		border: 2px solid var(--yellow);
		border-radius: 100%;
		height: 94px;
		width: 210px;
	}
.highlight-inner {
	position: relative;
	display: inline-block;
}
	.highlight-inner::after {
		content: '';
		position: absolute;
		bottom: -10px;
		left: -20px;
		right: -20px;
		top: 0;
		border: 2px solid var(--yellow);
		border-radius: 100%;
		transform: rotate(10deg);
		height: 94px;
		width: 220px;
	}
.creators-gallery {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
	transform: rotate(-8deg);
	margin: 92px 0px;
	position: relative;
	z-index: 1000;
}
.gallery-card {
	width: 379px;
	height: 509px;
	border-radius: 20px;
	overflow: hidden;
	transition: transform 0.3s;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
	.gallery-card:hover {
		transform: translateY(-10px);
	}
.card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Footer Styles */
.footer {
	background: var(--blue);
	padding: 25px;
}
.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4rem;
}
.footer-logo {
	height: 40px;
	margin-bottom: 1rem;
}
.social-links {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
	justify-content: center;
}
	.social-links img {
		width: 30px;
	}
.footer-links h4 {
	margin-bottom: 1rem;
	color: var(--yellow);
	font-size: 24px;
}
.footer-links a {
	color: #fff;
	text-decoration: none;
	display: block;
	margin-bottom: 0.5rem;
	font-size: 16px;
}
.center_mode-container {
	width: 100%;
	position: relative;
	margin: 40px 0;
	position: relative;
	overflow: hidden;
	height: 800px;
	align-content: center
}
.center_mode {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1000;
	perspective: 1000px;
}
	.center_mode .card {
		position: absolute;
		height: 100%;
		width: 335px;
		background: #000;
		transition: all 0.6s ease;
		overflow: hidden;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
		opacity: 0;
		pointer-events: none;
		object-fit: cover;
		border-radius: 1px;
		transform-style: preserve-3d;
		backface-visibility: hidden;
		touch-action: manipulation; /* Improves touch targeting accuracy */
		cursor: pointer; /* Shows it's clickable */
	}
	.center_mode .visible-card {
		opacity: 1;
		pointer-events: auto;
	}
	.center_mode .center {
		transform: scale(1.4);
		z-index: 20;
		width: unset !important;
		height: 50%;
		border-radius: 10px;
		box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.5), 0 20px 40px rgba(0, 0, 0, 0.7);
	}
/* Responsive Design */
@media (max-width: 1024px) {
	.circle-hero-title {
		font-size: 72px;
		line-height: 1.2;
	}
	.circle-wrapper {
		border-width: 8px;
		padding: 8px;
	}
		.circle-wrapper img {
			width: 30px;
			height: 30px;
		}
	.circle-hero-subtitle {
		font-size: 90px;
		line-height: 1.2;
		letter-spacing: 2.10px;
	}
	.circle-hero-text {
		font-size: 24px;
		line-height: 1.4;
	}
}
@media (max-width: 768px) {
	.circle-page {
		padding: 10px;
	}
	.circle-nav {
		margin-top: 29px;
	}
		.circle-nav img {
			height: 17px;
		}
	.circle-logo {
		margin-bottom: 10px;
	}
	.circle-hero {
		margin: 40px 0;
		height: 400px;
		min-height: unset;
	}
	.circle-hero-title {
		font-size: 48px;
	}
	.circle-hero-subtitle {
		font-size: 60px;
	}
	.circle-wrapper {
		padding: 5px;
		border-width: 5px;
	}
		.circle-wrapper img {
			width: 25px;
			height: 25px;
			margin: 0 -3px;
		}
	.circle-hero-text {
		font-size: 18px;
		padding: 0 15px;
	}
	.e-center {
		width: 400px;
		height: 400px;
		left: calc(50% - 200px);
		top: calc(50% - 200px);
	}
	.e-small {
		width: 150px;
		height: 150px;
	}
	.circle-btn-outline,
	.circle-btn-fill {
		margin-bottom: 10px;
	}
	.creators-title {
		font-size: 36px;
		line-height: 1.3;
	}
	.creators-gallery {
		width: 60vw;
		margin: 0 auto;
	}
	.gallery-card {
		width: auto;
		max-width: 288px;
		margin-bottom: 20px;
		height: auto;
	}
	.footer {
		padding: 20px 15px;
	}
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.highlight-outer::after {
		height: 36px;
		width: 98px;
		left: -9px;
	}
	.creators-header {
		text-align: left;
		width: 95%;
	}
	.highlight-inner::after {
		left: -9px;
		height: 36px;
		width: 99px;
	}
	.d-mob-none {
		display: none
	}
}
@media (max-width: 480px) {
	.circle-hero-title {
		font-size: 36px;
	}
	.circle-hero-subtitle {
		font-size: 48px;
	}
	.creators-title {
		font-size: 28px;
	}
	.circle-buttons {
		gap: 0;
	}
	.circle-wrapper {
		padding: 2px;
		border-width: 2px;
	}
		.circle-wrapper img {
			width: 20px;
			height: 20px;
			margin: 0 -2px;
		}
}