body {
	font-family: 'Inter', sans-serif;
	background-color: #0a0a0a;
	color: #f0f0f0;
	overflow-x: hidden; /* Prevent horizontal scrollbars from animations */
}
.hero-bg {
	position: relative; /* Needed for positioning the canvas */
	background: linear-gradient(rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.95)), url('https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1920&auto=format&fit=crop');
	background-size: cover;
	background-position: center;
	background-attachment: fixed; /* Parallax effect */
}
/* --- SPECIAL GRAPHICS CANVAS --- */
#particle-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.hero-content {
	position: relative;
	z-index: 2; /* Ensure text is above the canvas */
}

/* --- ANIMATED TAGLINE --- */
.tagline-bg {
	background: linear-gradient(90deg, #4f46e5, #a855f7, #4f46e5);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	animation: animated-gradient 3s ease-in-out infinite;
}
@keyframes animated-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.card {
	background: rgba(31, 41, 55, 0.5);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
}
.card:hover {
	transform: translateY(-10px) scale(1.02); /* Enhanced hover effect */
	box-shadow: 0 15px 30px rgba(0,0,0,0.3);
	border-color: rgba(168, 85, 247, 0.8);
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}
 @keyframes slideInUp {
	from { opacity: 0; transform: translateY(50px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
	from { opacity: 0; transform: translateX(-100px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
	from { opacity: 0; transform: translateX(100px); }
	to { opacity: 1; transform: translateX(0); }
}

.fade-in { animation: fadeIn 1s ease-out forwards; }
.fade-in-up { animation: slideInUp 0.8s ease-out forwards; }
.slide-in-left { animation: slideInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.slide-in-right { animation: slideInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

.animated-section {
	opacity: 0; /* Hidden by default */
}

/* New Feature Card Styles */
.feature-card {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}
.feature-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.feature-card img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease, filter 0.4s ease;
}
.feature-card:hover img {
	transform: scale(1.1);
	filter: blur(2px) brightness(0.7);
}
.feature-content {
	position: relative;
	z-index: 2;
	padding: 1.5rem;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.95), rgba(10, 10, 10, 0.6));
}

.icon-glow {
	filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.7));
}
.btn-primary {
	background: linear-gradient(90deg, #4f46e5, #a855f7);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
	transform: scale(1.05);
	box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

/* --- TEACHER GUIDE TIMELINE STYLES --- */
.timeline-container {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}
.timeline-container::after {
	content: '';
	position: absolute;
	width: 6px;
	background-color: #4f46e5;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -3px;
	z-index: 1;
	animation: drawLine 2s ease-out forwards;
}
@keyframes drawLine {
	from { height: 0; }
	to { height: 100%; }
}
.timeline-item {
	padding: 10px 40px;
	position: relative;
	width: 50%;
	opacity: 0;
	animation: slideInUp 0.8s ease-out forwards;
}
.timeline-item.left {
	left: 0;
}
.timeline-item.right {
	left: 50%;
}
.timeline-item::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 25px;
	right: -12px;
	background-color: #0a0a0a;
	border: 4px solid #a855f7;
	top: 25px;
	border-radius: 50%;
	z-index: 2;
	box-shadow: 0 0 15px rgba(168, 85, 247, 0.8);
}
.timeline-item.right::after {
	left: -13px;
}
.timeline-content {
	padding: 20px 30px;
	background: rgba(31, 41, 55, 0.5);
	position: relative;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}
.timeline-content:hover {
	transform: scale(1.03);
	border-color: rgba(168, 85, 247, 0.8);
}