body {
	font-family: 'Poppins', sans-serif;
	overflow-x: hidden;
}
.gradient-text {
	background: linear-gradient(90deg, #4F46E5, #EC4899);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.hero-bg {
	background-color: #f8fafc;
	background-image: 
		radial-gradient(circle at 15% 50%, #e0e7ff, transparent 40%),
		radial-gradient(circle at 85% 30%, #fce7f3, transparent 40%);
}
.pedagogy-tab.active {
	background-color: #4F46E5;
	color: white;
}
.pedagogy-content {
	transition: opacity 0.5s ease-in-out;
}
/* Flip Card Styles */
.flip-card {
	background-color: transparent;
	width: 100%;
	height: 300px;
	perspective: 1000px;
}
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
}
.flip-card-front {
	background-color: white;
}
.flip-card-back {
	color: white;
	transform: rotateY(180deg);
}

#book-canvas-container {
	width: 100%;
	height: 450px;
	cursor: grab;
	/* background-image: url("../images/activity-screen.jpg");
	background-color: #ff0000; */
}

/* Solution section animation */
.solution-step {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
#solution-steps.is-visible .solution-step {
	opacity: 1;
	transform: translateY(0);
}
#solution-steps.is-visible .solution-step:nth-child(1) { transition-delay: 0.2s; }
#solution-steps.is-visible .solution-step:nth-child(2) { transition-delay: 0.4s; }
#solution-steps.is-visible .solution-step:nth-child(3) { transition-delay: 0.6s; }

.solution-icon-bg {
	animation: pulse 2.5s infinite;
}
@keyframes pulse {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(79, 70, 229, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.solution-step:nth-child(2) .solution-icon-bg { animation-name: pulse-pink; }
@keyframes pulse-pink {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(236, 72, 153, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
}
.solution-step:nth-child(3) .solution-icon-bg { animation-name: pulse-green; }
@keyframes pulse-green {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Timeline Section */
.timeline-container::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 4px;
	height: 0;
	background-image: linear-gradient(to bottom, #818cf8, #ec4899, #10b981);
	transform: translateX(-50%);
	transition: height 2s ease-out;
}
.timeline-container.is-visible::before {
	height: 100%;
}

.timeline-item {
	position: relative;
}
.timeline-item:nth-child(odd) {
	padding-right: calc(50% + 40px);
	text-align: right;
}
.timeline-item:nth-child(even) {
	padding-left: calc(50% + 40px);
	text-align: left;
}
.timeline-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 70px;
	height: 70px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	border: 4px solid #f8fafc;
	transition: transform 0.5s ease-out;
}
.timeline-item.is-visible .timeline-icon {
	transform: translate(-50%, -50%) scale(1);
}

.timeline-content {
	transition: all 0.6s ease-out;
	opacity: 0;
}
.timeline-item:nth-child(odd) .timeline-content { transform: translateX(50px); }
.timeline-item:nth-child(even) .timeline-content { transform: translateX(-50px); }

.timeline-item.is-visible .timeline-content {
	transform: translateX(0);
	opacity: 1;
}

.book-container {
            width: 250px;
            height: 350px;
            animation: rotateBook 14s linear infinite;
            transform-style: preserve-3d; /* Smooth 3D rotation */
        }

	.book-container img {
		width: 100%;
		height: 100%;
		display: inline-block;
		border-radius: 8px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	}

	@keyframes rotateBook {
		from { transform: rotateY(0deg); }
		to { transform: rotateY(360deg); }
	}