@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap");

body,
html {
	margin: 0;
	padding: 0;
	background: #01010a;
	overflow: auto; /* Allow scrolling */
	font-family: "Orbitron", sans-serif;
	min-height: 100vh; /* Allow body to grow beyond viewport height */
	width: 100vw;
}

#particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.card {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	perspective: 1500px;
	gap: 60px;
	flex-wrap: wrap;
	z-index: 1;
}

.glow {
	position: absolute;
	width: 300vmax;
	height: 300vmax;
	background: conic-gradient(from 180deg at 50% 50%, #00faff, #0011ff, #00faff);
	filter: blur(180px);
	animation: glowRotate 30s linear infinite;
	z-index: 0;
	opacity: 0.15;
}

.card-content {
	position: relative;
	background: rgba(10, 10, 20, 0.85);
	border-radius: 20px;
	padding: 40px 30px;
	text-align: center;
	width: 90%;
	max-width: 420px;
	backdrop-filter: blur(12px);
	border: 3px solid rgba(0, 255, 255, 0.4);
	box-shadow: 0 0 60px rgba(0, 255, 255, 0.3),
		0 0 100px rgba(0, 255, 255, 0.1) inset;
	transition: transform 0.3s ease;
}

.float-a {
	animation: float-a 6s ease-in-out infinite, hueShift 20s infinite linear;
}

.float-b {
	animation: float-b 7s ease-in-out infinite, hueShift 25s infinite linear;
}

.tilt:hover {
	transform: rotateY(8deg) rotateX(8deg) scale(1.02);
}

.card-glow {
	background: linear-gradient(
		145deg,
		rgba(0, 10, 20, 0.95),
		rgba(0, 30, 60, 0.85)
	);
}

.card-content img {
	width: 100%;
	border-radius: 15px;
	margin-bottom: 20px;
	box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
}

.card-title {
	font-size: 2.7rem;
	margin-bottom: 10px;
	text-shadow: 0 0 30px #0ff, 0 0 60px #0ff;
}

.rainbow {
	background: linear-gradient(90deg, #00ffff, #00ff99, #00ffff, #00ffcc);
	background-size: 400% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shineText 6s linear infinite;
}

.card-description {
	font-size: 1.15rem;
	margin: 20px 0;
	color: #aaffff;
	text-shadow: 0 0 10px #0ff;
}

.card-btn {
	background: linear-gradient(90deg, #00ffff, #0088ff);
	border: none;
	padding: 12px 32px;
	color: #ffffff;
	border-radius: 12px;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.4s ease;
}

.neon-glow {
	box-shadow: 0 0 20px #00ffff, 0 0 50px #00ffff;
	text-shadow: 0 0 12px #00ffff, 0 0 22px #00ffff;
}

.card-btn:hover {
	transform: scale(1.1) rotate(2deg);
	box-shadow: 0 0 70px #00ffff;
}

@keyframes float-a {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-18px);
	}
}

@keyframes float-b {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
}

@keyframes glowRotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes shineText {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

@keyframes hueShift {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}

#logo-banner-container {
  height: 200px;
  width: 100%;
  text-align: center;
}

#logo-banner-container img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}