<?php
$page_title = 'Music Classes - Kalaimagal Music Academy | All Courses Overview';
$page_description = 'Explore all music classes at Kalaimagal Music Academy - Veena, Violin, Piano, Keyboard, Guitar, Mouth Organ and Music Composing courses for all levels.';
$page_keywords = 'music classes, veena course, violin course, piano course, keyboard course, guitar lessons, mouth organ, composing, Tiruchengode';
$page_body_class = 'class-template-default single single-class';
$page_type = 'custom';

$page_styles = <<<'STYLES'
	<style>
		/* --- Global Reset & Variables --- */
		:root {
			--primary-color: #800020;
			/* Burgundy */
			--secondary-color: #ffd700;
			/* Gold */
			--text-color: #555;
			--light-bg: #f9f9f9;
			--white: #ffffff;
			--font-heading: 'Cormorant Garamond', serif;
			--font-body: 'Jost', sans-serif;
			--wp--preset--color--white: #ffffff;
		}

		body {
			font-family: var(--font-body);
			color: var(--text-color);
			background-color: var(--white);
			margin: 0;
			padding: 0;
			overflow-x: hidden;
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			font-family: var(--font-heading);
			color: var(--primary-color);
			font-weight: 700;
		}

		a {
			text-decoration: none;
			transition: 0.3s;
		}

		ul {
			list-style: none;
			padding: 0;
		}

		p {
			line-height: 1.6;
			margin-bottom: 15px;
		}

		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
		}

		.section-padding {
			padding: 80px 0;
		}

		.text-center {
			text-align: center;
		}

		/* --- Hero Banner --- */
		.page-banner {
			background-image: url(wp-content/uploads/2024/04/subbanner-1.png);
			background-size: cover;
			background-position: center;
			padding: 140px 0;
			position: relative;
			text-align: center;
			color: var(--white);
		}

		.page-banner::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
			/* Overlay */
		}

		.banner-content {
			position: relative;
			z-index: 1;
		}

		.banner-title {
			font-size: 4.5rem;
			margin-bottom: 15px;
			text-transform: uppercase;
			letter-spacing: 2px;
			color: var(--secondary-color);
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
		}

		.breadcrumbs {
			display: flex;
			justify-content: center;
			gap: 15px;
			font-size: 1.2rem;
			font-weight: 500;
		}

		.breadcrumbs a {
			color: var(--white);
		}

		.breadcrumbs a:hover {
			color: var(--secondary-color);
		}

		.breadcrumbs span {
			color: var(--secondary-color);
		}

		/* --- Intro Section --- */
		.intro-section {
			padding: 100px 0;
		}

		.intro-grid {
			display: grid;
			grid-template-columns: 1.2fr 1fr;
			gap: 60px;
			align-items: center;
		}

		.intro-text h5 {
			color: var(--secondary-color);
			text-transform: uppercase;
			letter-spacing: 1px;
			font-size: 1.1rem;
			margin-bottom: 10px;
		}

		.intro-text h2 {
			font-size: 3.2rem;
			margin-bottom: 25px;
			line-height: 1.2;
		}

		.intro-text p {
			font-size: 1.1rem;
			color: #666;
			margin-bottom: 20px;
		}

		.intro-image {
			position: relative;
		}

		.intro-image img {
			width: 100%;
			border-radius: 20px;
			box-shadow: -20px 20px 0 var(--primary-color);
			transition: transform 0.4s;
		}

		.intro-image img:hover {
			transform: translateY(-10px);
		}

		/* --- Features Grid (Accordion Replacement) --- */
		.features-section {
			background-color: var(--light-bg);
			padding: 100px 0;
		}

		.features-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 30px;
		}

		.feature-card {
			background: var(--white);
			padding: 50px 30px;
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
			transition: 0.4s;
			position: relative;
			overflow: hidden;
			border-bottom: 4px solid transparent;
			text-align: center;
		}

		.feature-card:hover {
			transform: translateY(-10px);
			box-shadow: 0 20px 40px rgba(128, 0, 32, 0.1);
			border-bottom-color: var(--secondary-color);
		}

		.feature-icon {
			font-size: 3.5rem;
			color: var(--primary-color);
			margin-bottom: 25px;
			transition: 0.3s;
		}

		.feature-card:hover .feature-icon {
			color: var(--secondary-color);
			transform: scale(1.1);
		}

		.feature-card h3 {
			font-size: 1.6rem;
			margin-bottom: 15px;
		}

		/* --- Quote Section --- */
		.quote-section {
			background: linear-gradient(135deg, #800020 0%, #4a0012 100%);
			padding: 100px 0;
			text-align: center;
			color: var(--white);
			position: relative;
		}

		.quote-text h2 {
			color: var(--secondary-color);
			font-size: 2.8rem;
			max-width: 900px;
			margin: 0 auto;
			line-height: 1.4;
			font-family: var(--font-heading);
		}

		.quote-text p {
			font-size: 1.2rem;
			opacity: 0.9;
			margin-top: 20px;
		}

		/* --- Why Choose Us (Icon Boxes) --- */
		.why-choose-section {
			padding: 100px 0;
		}

		.why-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 30px;
		}

		.why-box {
			text-align: center;
			padding: 30px 20px;
			border: 1px solid #eee;
			border-radius: 12px;
			transition: 0.3s;
		}

		.why-box:hover {
			border-color: var(--primary-color);
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
		}

		.why-icon {
			width: 80px;
			height: 80px;
			background: var(--light-bg);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 20px;
			color: var(--primary-color);
			font-size: 2rem;
			transition: 0.3s;
		}

		.why-box:hover .why-icon {
			background: var(--primary-color);
			color: var(--secondary-color);
		}

		.why-box h4 {
			font-size: 1.3rem;
			margin-bottom: 10px;
		}

		.why-box p {
			font-size: 0.9rem;
			color: #777;
			margin: 0;
		}


		/* --- Melody Horizontal Roadmap (Up/Down) --- */
		.melody-roadmap-section {
			padding: 100px 0;
			background: #e6e4df;
			overflow-x: hidden;
			text-align: center;
			/* Ensure heading is centered */
		}

		.melody-roadmap-section .section-heading {
			margin-bottom: 80px;
			max-width: 800px;
			margin-left: auto;
			margin-right: auto;
		}

		.melody-timeline {
			position: relative;
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			align-items: center;
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
			min-height: 500px;
			/* Ensure height for up/down items */
		}

		/* Central Line */
		.timeline-line {
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 4px;
			background: linear-gradient(90deg,
					rgba(128, 0, 32, 0.1) 0%,
					var(--primary-color) 20%,
					var(--primary-color) 80%,
					rgba(128, 0, 32, 0.1) 100%);
			z-index: 0;
			transform: translateY(-50%);
			border-radius: 4px;
		}

		.melody-item {
			position: relative;
			width: 100%;
			z-index: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 400px;
			/* Full height of section */
		}

		/* Dot on the line (Static Anchor) */
		.melody-dot {
			width: 50px;
			height: 50px;
			background: var(--white);
			border: 3px solid var(--primary-color);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--primary-color);
			font-size: 1.2rem;
			z-index: 10;
			box-shadow: 0 0 0 5px #fdfdfd;
			transition: 0.3s;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.melody-item:hover .melody-dot {
			background: var(--primary-color);
			color: var(--secondary-color);
			transform: translate(-50%, -50%) scale(1.2);
			box-shadow: 0 0 0 8px rgba(255, 215, 0, 0.2);
		}

		/* Connector Line (Absolute) */
		.melody-connector {
			position: absolute;
			width: 2px;
			height: 60px;
			background: rgba(128, 0, 32, 0.3);
			left: 50%;
			transform: translateX(-50%);
			transition: 0.3s;
			z-index: 5;
		}

		.melody-item:hover .melody-connector {
			background: var(--primary-color);
		}

		/* Card Styles (Absolute) */
		.melody-card {
			position: absolute;
			background: var(--white);
			padding: 15px;
			border-radius: 12px;
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
			text-align: center;
			width: 180px;
			left: 50%;
			transform: translateX(-50%);
			border-top: 3px solid var(--secondary-color);
			transition: 0.3s;
			z-index: 15;
		}

		.melody-item:hover .melody-card {
			box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
		}

		/* UP Configuration */
		.melody-item.up .melody-connector {
			bottom: 50%;
			margin-bottom: 20px;
			/* Tucked behind dot (25-5) */
		}

		.melody-item.up .melody-card {
			bottom: 50%;
			margin-bottom: 80px;
			/* Tucked connector + height */
		}

		.melody-item.up:hover .melody-card {
			transform: translateX(-50%) translateY(-5px);
		}

		/* DOWN Configuration */
		.melody-item.down .melody-connector {
			top: 50%;
			margin-top: 20px;
			/* Tucked behind dot (25-5) */
		}

		.melody-item.down .melody-card {
			top: 50%;
			margin-top: 80px;
			/* Tucked connector + height */
		}

		.melody-item.down:hover .melody-card {
			transform: translateX(-50%) translateY(5px);
		}

		.melody-card h3 {
			font-size: 1.2rem;
			margin: 10px 0 5px;
		}

		.melody-card p {
			font-size: 0.85rem;
			margin: 0;
			color: #666;
			line-height: 1.4;
		}

		.melody-duration {
			display: inline-block;
			background: rgba(128, 0, 32, 0.05);
			color: var(--primary-color);
			padding: 3px 10px;
			border-radius: 10px;
			font-size: 0.75rem;
			font-weight: 600;
			text-transform: uppercase;
		}

		/* Responsive - Switch to Vertical earlier */
		@media (max-width: 1200px) {
			.melody-roadmap-section {
				padding: 60px 0;
				height: auto;
				overflow: visible;
			}

			.melody-timeline {
				display: block;
				min-height: auto;
				padding-left: 50px;
				position: relative;
			}

			/* Vertical Line */
			.timeline-line {
				width: 4px;
				height: 100%;
				left: 50px;
				top: 0;
				transform: translateX(-50%);
				background: linear-gradient(to bottom,
						rgba(128, 0, 32, 0.1) 0%,
						var(--primary-color) 20%,
						var(--primary-color) 80%,
						rgba(128, 0, 32, 0.1) 100%);
			}

			.melody-item {
				width: 100%;
				height: auto;
				flex-direction: row;
				justify-content: flex-start;
				margin-bottom: 40px;
				position: relative;
			}

			/* Reset Absolute Positioning for Vertical Layout */
			.melody-dot {
				position: absolute;
				left: 50px;
				top: 20px;
				/* Align with card top approx */
				transform: translateX(-50%);
				margin: 0;
			}

			.melody-item:hover .melody-dot {
				transform: translateX(-50%) scale(1.2);
			}

			.melody-connector {
				display: none;
				/* Hide connectors in vertical */
			}

			.melody-card {
				position: relative;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				transform: none !important;
				margin: 0 0 0 80px !important;
				/* Space from line */
				width: calc(100% - 100px);
				max-width: 600px;
				text-align: left;
			}

			.melody-item.up .melody-card,
			.melody-item.down .melody-card {
				margin-top: 0;
				margin-bottom: 0;
			}
		}

		/* --- Class Info Grid --- */
		.info-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 40px;
			padding: 80px 0;
		}

		.info-box {
			background: var(--white);
			padding: 40px;
			border-radius: 20px;
			text-align: center;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
			border: 1px solid #f0f0f0;
			transition: 0.3s;
		}

		.info-box:hover {
			border-color: var(--secondary-color);
			transform: translateY(-8px);
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
		}

		.info-box i {
			font-size: 2.5rem;
			color: var(--primary-color);
			margin-bottom: 25px;
		}

		.info-box h3 {
			font-size: 1.6rem;
			margin-bottom: 20px;
		}

		.info-box li {
			padding: 12px 0;
			border-bottom: 1px solid #f5f5f5;
			color: #666;
			font-size: 1.05rem;
		}

		.info-box li:last-child {
			border: none;
		}

		/* --- CTA Alert --- */
		.cta-alert {
			background: linear-gradient(90deg, var(--primary-color), #a00028);
			color: var(--white);
			padding: 25px;
			text-align: center;
			border-radius: 50px;
			font-size: 1.3rem;
			font-weight: 600;
			margin: 60px auto 0;
			max-width: 800px;
			box-shadow: 0 10px 30px rgba(128, 0, 32, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 15px;
		}

		/* --- More Classes --- */
		.related-classes {
			background-color: #f4f4f4;
			padding: 100px 0;
		}

		.class-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 30px;
		}

		.class-card {
			background: var(--white);
			border-radius: 15px;
			overflow: hidden;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			transition: 0.3s;
		}

		.class-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
		}

		.class-thumb {
			height: 220px;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fdfdfd;
			padding: 20px;
		}

		.class-thumb img {
			max-height: 100%;
			width: auto;
			transition: 0.4s;
		}

		.class-card:hover .class-thumb img {
			transform: scale(1.1);
		}

		.class-body {
			padding: 25px;
			text-align: center;
		}

		.class-body h4 {
			font-size: 1.4rem;
			margin-bottom: 15px;
		}

		.class-link {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			color: var(--secondary-color);
			font-weight: 600;
			text-transform: uppercase;
			font-size: 0.9rem;
			letter-spacing: 1px;
		}

		.class-link:hover {
			color: var(--primary-color);
			gap: 12px;
		}

		/* --- Responsive --- */
		@media (max-width: 992px) {
			.page-banner {
				padding: 100px 0;
			}

			.banner-title {
				font-size: 3rem;
			}

			.intro-grid {
				grid-template-columns: 1fr;
				gap: 40px;
			}

			.features-grid,
			.why-grid,
			.class-grid {
				grid-template-columns: 1fr;
			}

			.timeline-container::after {
				left: 30px;
			}

			.timeline-row,
			.timeline-row:nth-child(even) {
				flex-direction: column;
				padding-left: 70px;
			}

			.timeline-content,
			.timeline-row:nth-child(even) .timeline-content {
				width: 100%;
				text-align: left;
				border-left: 5px solid var(--primary-color);
				border-right: none;
			}

			.timeline-dot {
				left: 30px;
			}
		}

		/* --- Tablet Portrait (768px) --- */
		@media (max-width: 768px) {
			.page-banner { padding: 70px 0; }
			.banner-title { font-size: 2.2rem; letter-spacing: 1px; }
			.breadcrumbs { font-size: 1rem; gap: 10px; }
			.intro-section { padding: 60px 0; }
			.intro-text h2 { font-size: 2.2rem; }
			.intro-image img { box-shadow: -8px 8px 0 var(--primary-color); }
			.features-section, .related-classes, .why-choose-section { padding: 60px 0; }
			.feature-card { padding: 35px 20px; }
			.feature-icon { font-size: 2.5rem; }
			.quote-section { padding: 60px 0; }
			.quote-text h2 { font-size: 1.8rem; }
			.why-grid { grid-template-columns: 1fr 1fr; gap: 15px; }
			.info-grid { grid-template-columns: 1fr; gap: 25px; padding: 40px 0; }
			.cta-alert { font-size: 1.1rem; padding: 20px; border-radius: 20px; flex-direction: column; }
			.melody-roadmap-section { padding: 50px 0; }
			.class-thumb { height: 180px; }
		}

		/* --- Mobile (576px) --- */
		@media (max-width: 576px) {
			.page-banner { padding: 50px 0; }
			.banner-title { font-size: 1.6rem; letter-spacing: 0; }
			.breadcrumbs { font-size: 0.85rem; }
			.intro-section { padding: 35px 0; }
			.intro-text h5 { font-size: 0.9rem; }
			.intro-text h2 { font-size: 1.6rem; margin-bottom: 12px; }
			.intro-text p { font-size: 0.95rem; }
			.intro-image img { box-shadow: -5px 5px 0 var(--primary-color); border-radius: 12px; }
			.features-section, .related-classes, .why-choose-section, .quote-section { padding: 35px 0; }
			.feature-card { padding: 25px 15px; }
			.feature-icon { font-size: 2rem; margin-bottom: 12px; }
			.feature-card h3 { font-size: 1.2rem; }
			.quote-text h2 { font-size: 1.4rem; line-height: 1.3; }
			.why-grid { grid-template-columns: 1fr; }
			.why-box { padding: 20px 15px; }
			.why-icon { width: 60px; height: 60px; font-size: 1.5rem; }
			.cta-alert { font-size: 0.9rem; padding: 14px 12px; border-radius: 12px; margin: 25px auto 0; }
			.info-box { padding: 25px 15px; }
			.class-body { padding: 15px; }
			.class-body h4 { font-size: 1.1rem; }
			.class-thumb { height: 160px; padding: 12px; }
			.melody-card { width: calc(100% - 80px); padding: 12px; }
			.melody-dot { width: 36px; height: 36px; font-size: 0.9rem; }
			.section-padding { padding: 40px 0; }
			.container { padding: 0 12px; }
		}
	</style>
STYLES;

include 'partials/header.php';
?>
		<!-- HERO BANNER -->
		<section class="page-banner">
			<div class="container banner-content" data-aos="fade-in">
				<h1 class="banner-title">Our Class</h1>
				<div class="breadcrumbs">
					<a href="home">Home</a>
					<span>/</span>
					<span>Class</span>
				</div>
			</div>
		</section>

		<!-- INTRO SECTION -->
		<section class="intro-section">
			<div class="container">
				<div class="intro-grid">
					<div class="intro-text" data-aos="fade-right">
						<h5>Welcome to Kalaimagal</h5>
						<h2>We Create Magical Moments With Music</h2>
						<p>Kalaimagal Academy offers professional music classes for students of all ages and skill
							levels. Our experienced instructors provide structured training in keyboard, piano, guitar,
							and classical music</p>
						<p>We focus on building strong fundamentals, improving confidence, and developing performance
							skills. Our goal is to nurture talent and help every student grow into a skilled musician.
						</p>
					</div>
					<div class="intro-image" data-aos="fade-left">
						<img src="wp-content/uploads/2024/03/b-d-2.png" alt="Music Class">
					</div>
				</div>
			</div>
		</section>

		<!-- FEATURES GRID (Replaces Accordion) -->
		<section class="features-section">
			<div class="container">
				<div class="section-heading" data-aos="fade-up">
					<h2>Our Key Features</h2>
				</div>
				<div class="features-grid">
					<div class="feature-card" data-aos="fade-up" data-aos-delay="100">
						<i class="fas fa-chalkboard-teacher feature-icon"></i>
						<h3>Expert Teachers</h3>
						<p>Learn from the masters. Our faculty consists of renowned professionals dedicated to nurturing
							talent.</p>
					</div>
					<div class="feature-card" data-aos="fade-up" data-aos-delay="200">
						<i class="fas fa-gift feature-icon"></i>
						<h3>Special Offers</h3>
						<p>Exclusive packages for long-term courses. Get the best value for your musical education.</p>
					</div>
					<div class="feature-card" data-aos="fade-up" data-aos-delay="300">
						<i class="fas fa-users feature-icon"></i>
						<h3>Learning Groups</h3>
						<p>Collaborate with peers. Our group sessions foster community learning and ensemble skills.</p>
					</div>
				</div>
			</div>
		</section>

		<!-- GENIUS QUOTE -->
		<section class="quote-section">
			<div class="container">
				<div class="quote-text" data-aos="zoom-in">
					<h2>"Genius Starts With a Note. You Bring the Passion. Together, We'll Build Your Future."</h2>
					<p>- Kalaimagal Academy</p>
				</div>
			</div>
		</section>

		<!-- WHY CHOOSE US (Icon Boxes) -->
		<section class="why-choose-section">
			<div class="container">
				<div class="why-grid">
					<!-- Qualified Teachers -->
					<div class="why-box" data-aos="fade-up" data-aos-delay="100">
						<div class="why-icon"><i class="fas fa-user-graduate"></i></div>
						<h4>Qualified Teachers</h4>
						<p>Highly experienced mentors.</p>
					</div>
					<!-- Musical Compositions -->
					<div class="why-box" data-aos="fade-up" data-aos-delay="200">
						<div class="why-icon"><i class="fas fa-music"></i></div>
						<h4>Musical Compositions</h4>
						<p>Learn to create own music.</p>
					</div>
					<!-- Unique Classes -->
					<div class="why-box" data-aos="fade-up" data-aos-delay="300">
						<div class="why-icon"><i class="fas fa-star"></i></div>
						<h4>Unique Classes</h4>
						<p>Specialized training methods.</p>
					</div>
					<!-- Lessons -->
					<div class="why-box" data-aos="fade-up" data-aos-delay="400">
						<div class="why-icon"><i class="fas fa-book-open"></i></div>
						<h4>Structured Lessons</h4>
						<p>Comprehensive curriculum.</p>
					</div>
				</div>
			</div>
		</section>

		<!-- MELODY HORIZONTAL ROADMAP (Up/Down) -->
		<section class="melody-roadmap-section" id="curriculum">
			<div class="container-fluid">
				<div class="section-heading">
					<h2>Course Curriculum</h2>
					<p>A structured path from beginner to professional mastery</p>
				</div>

				<div class="melody-timeline" data-aos="fade-up">
					<div class="timeline-line"></div>

					<!-- Level 1 (UP) -->
					<div class="melody-item up">
						<div class="melody-dot"><i class="fas fa-leaf"></i></div>
						<div class="melody-connector"></div>
						<div class="melody-card">
							<span class="melody-duration"><i class="far fa-clock"></i> 3 Months</span>
							<h3>Beginner</h3>
							<p>Basics, instrument anatomy, fingering techniques, and introductory rhymes.</p>
						</div>
					</div>

					<!-- Level 2 (DOWN) -->
					<div class="melody-item down">
						<div class="melody-dot"><i class="fas fa-book-reader"></i></div>
						<div class="melody-connector"></div>
						<div class="melody-card">
							<span class="melody-duration"><i class="far fa-clock"></i> 6 Months</span>
							<h3>Beginner II</h3>
							<p>Advanced basics, popular film song rendition, and rhythm sense development.</p>
						</div>
					</div>

					<!-- Level 3 (UP) -->
					<div class="melody-item up">
						<div class="melody-dot"><i class="fas fa-pencil-alt"></i></div>
						<div class="melody-connector"></div>
						<div class="melody-card">
							<span class="melody-duration"><i class="far fa-clock"></i> 1 Year</span>
							<h3>Intermediate</h3>
							<p>Grading exams preparation and comprehensive background rhythm knowledge.</p>
						</div>
					</div>

					<!-- Level 4 (DOWN) -->
					<div class="melody-item down">
						<div class="melody-dot"><i class="fas fa-medal"></i></div>
						<div class="melody-connector"></div>
						<div class="melody-card">
							<span class="melody-duration"><i class="far fa-clock"></i> 2 Years</span>
							<h3>Intermediate II</h3>
							<p>Intermediate grading accreditation and deep sound sense cultivation.</p>
						</div>
					</div>

					<!-- Level 5 (UP) -->
					<div class="melody-item up">
						<div class="melody-dot"><i class="fas fa-rocket"></i></div>
						<div class="melody-connector"></div>
						<div class="melody-card">
							<span class="melody-duration"><i class="far fa-clock"></i> 4 Years</span>
							<h3>Advanced</h3>
							<p>Grade completion, original song composing, and orchestral score writing.</p>
						</div>
					</div>

					<!-- Level 6 (DOWN) -->
					<div class="melody-item down">
						<div class="melody-dot"><i class="fas fa-crown"></i></div>
						<div class="melody-connector"></div>
						<div class="melody-card">
							<span class="melody-duration"><i class="far fa-clock"></i> 5 Years</span>
							<h3>Professional</h3>
							<p>Film background score composing, professional songwriting, and sound engineering.</p>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- Class Details Grid -->
		<div class="info-grid intro-section">
			<div class="info-box" data-aos="flip-left">
				<i class="fas fa-laptop-house"></i>
				<h3>Class Modes</h3>
				<ul>
					<li>Online Interactive Sessions</li>
					<li>Offline Studio Classes</li>
					<li>Hybrid (Flexible Learning)</li>
				</ul>
			</div>
			<div class="info-box" data-aos="flip-up" data-aos-delay="100">
				<i class="far fa-calendar-alt"></i>
				<h3>Frequency</h3>
				<ul>
					<li>Everyday Intensive</li>
					<li>Weekly 3 Times</li>
					<li>Weekly 2 Times</li>
					<li>Weekend Batches</li>
				</ul>
			</div>
			<div class="info-box" data-aos="flip-right" data-aos-delay="200">
				<i class="fas fa-layer-group"></i>
				<h3>Skill Levels</h3>
				<ul>
					<li>Beginner (Foundation)</li>
					<li>Intermediate (Development)</li>
					<li>Advanced (Mastery)</li>
				</ul>
			</div>
		</div>

		<div class="cta-alert" data-aos="zoom-in">
			<i class="fas fa-star" style="color:var(--secondary-color);"></i>
			Enroll Today! Courses available for everyone aged 6 years and above.
		</div>
	</div>
	</section>

	<!-- MORE CLASSES -->
	<section class="related-classes">
		<div class="container">
			<div class="section-heading">
				<h2>Other Classes</h2>
				<p>Explore more instruments and styles</p>
			</div>
			<div class="class-grid" data-aos="fade-up">
				<!-- Guitar -->
				<div class="class-card">
					<div class="class-thumb">
						<img src="wp-content/uploads/2024/04/s-1-2.png" alt="Guitar">
					</div>
					<div class="class-body">
						<h4>Guitar Classes</h4>
						<a href="guitar" class="class-link">View Details <i
								class="fas fa-arrow-right"></i></a>
					</div>
				</div>
				<!-- Piano -->
				<div class="class-card">
					<div class="class-thumb">
						<img src="wp-content/uploads/2024/04/p1.jpg" alt="Piano">
					</div>
					<div class="class-body">
						<h4>Piano Classes</h4>
						<a href="piano" class="class-link">View Details <i
								class="fas fa-arrow-right"></i></a>
					</div>
				</div>
				<!-- Violin -->
				<div class="class-card">
					<div class="class-thumb">
						<img src="wp-content/uploads/2024/04/s-3-1.png" alt="Violin">
					</div>
					<div class="class-body">
						<h4>Violin Classes</h4>
						<a href="violin" class="class-link">View Details <i
								class="fas fa-arrow-right"></i></a>
					</div>
				</div>
				<!-- Saxophone -->
				<div class="class-card">
					<div class="class-thumb">
						<img src="wp-content/uploads/2024/04/s-2-1.png" alt="Keyboard">
					</div>
					<div class="class-body">
						<h4>keyboard</h4>
						<a href="key" class="class-link">View Details <i
								class="fas fa-arrow-right"></i></a>
					</div>
				</div>
				<!-- Composing -->
				<div class="class-card">
					<div class="class-thumb">
						<img src="wp-content/uploads/2024/05/compo.png" alt="Composing">
					</div>
					<div class="class-body">
						<h4>Composing</h4>
						<a href="composing" class="class-link">View Details <i
								class="fas fa-arrow-right"></i></a>
					</div>
				</div>
				<!-- Veena (Current) -->
				<div class="class-card">
					<div class="class-thumb">
						<img src="wp-content/uploads/2024/05/veena.png" alt="Veena">
					</div>
					<div class="class-body">
						<h4>Veena Class</h4>
						<a href="veena" class="class-link">View Details <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>
				<!-- Mouth Organ -->
				<div class="class-card">
					<div class="class-thumb">
						<img src="wp-content/uploads/2024/04/mouth.jpg" alt="Mouth Organ">
					</div>
					<div class="class-body">
						<h4>Mouth Organ</h4>
						<a href="mouth" class="class-link">View Details <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- FOOTER -->

<?php include 'partials/footer.php'; ?>
