:root {
            --primary-bg: #f1f4f6;
            --accent: #d92550;
        }

        body {
            margin: 0;
            padding: 0;
            background: url(https://cdn.tamilbookshelf.in/flash/images/bg_down_menu.png) left top repeat;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

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

        #page-title {
            font-size: 2rem;
            color: #664f50;
            margin-top: 0px;
            font-weight: bold;
			float: right;
        }

        /* Back Button Style */
        .btn-outline-alternate {
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            text-decoration: none;
            color: #664f50;
            border: 2px solid #d4a37369;
            border-radius: 5px;
            font-weight: bold;
            transition: all 0.3s ease;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .btn-outline-alternate:hover {
            background-color: #1a0f0a;
			color: #d4a373;
			transform: translateY(-2px);
        }

        .btn-icon-wrapper {
            margin-right: 8px;
        }

        /* Webamp Container */
        #app {
            width: 100%;
            height: 60vh; /* Responsive height */
            background: #00000000;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
			border: 1px solid #fff;
        }

        /* Footer Info */
        .info-text {
            margin-top: 20px;
            color: #666;
            text-align: center;
            font-size: 0.9rem;
        }
		/* Footer Styles */
		.simple-footer {
			background-color: var(--primary-bg);
			padding: 30px 0;
			border-top: 1px solid #f1f2f6;
			margin-top: 50px;
			font-family: 'Segoe UI', Roboto, sans-serif;
			margin-bottom: -25px;
			border-top: 1px solid rgba(255, 255, 255, 0.1);
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
		}

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

		.footer-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			gap: 20px;
		}

		.footer-content p {
			margin: 0;
			color: #747d8c;
			font-size: 0.95rem;
		}

		.footer-links {
			list-style: none;
			display: flex;
			gap: 20px;
			margin: 0;
			padding: 0;
		}

		.footer-links li a {
			text-decoration: none;
			color: var(--accent-color);
			font-size: 0.9rem;
			font-weight: 500;
			transition: color 0.3s ease;
		}

		.footer-links li a:hover {
			color: var(--accent, #d92550); /* உங்கள் தளத்தின் பிரதான நிறம் */
		}

		/* Responsive Footer */
		@media (max-width: 768px) {
			.footer-content {
				flex-direction: column;
				text-align: center;
			}
			
			.footer-links {
				justify-content: center;
				gap: 15px;
			}
		}
		/* Station Grid */
		.stations-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
			gap: 20px;
		}

		/* Station Card */
		.station-card {
			background-color: var(--card-bg);
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			text-decoration: none;
			color: var(--text-color);
			transition: transform 0.2s, box-shadow 0.2s;
			display: block;
		}

		.station-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
		}

		.card-name {
			padding: 10px;
			text-align: center;
			font-weight: bold;
			background-image: linear-gradient(180deg, #5b1e1e 0%, #451107 100%) !important;
			color: white;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.card-video-container {
			width: 100%;
			height: 150px; /* Fixed height for video */
			overflow: hidden;
			position: relative;
			background-color: #222;
		}

		.card-video {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.card-footer {
			padding: 10px;
			text-align: center;
			font-size: 0.9rem;
			color: #666;
		}
		/* --- Added Styles for Related Stations --- */
		.related-stations-section {
			margin-top: 40px;
			padding-top: 20px;
			border-top: 1px solid #ddd;
		}

		#related-stations-title {
			margin-bottom: 20px;
			color: var(--secondary-color);
			font-size: 1.5rem;
		}

		/* Ensure the stations-grid class works correctly for the related section */
		/* The existing .stations-grid styles should naturally handle the layout here. */

		/* Reduce grid size for smaller screens for better fitting in the related row */
		@media (min-width: 992px) {
			/* Limit the related stations to 4 cards across on wide screens */
			.related-stations-section .stations-grid {
				grid-template-columns: repeat(4, 1fr); 
			}
		}
		#webamp {
			position: absolute;
			top: 65px !important;
			left: 0;
		}
		@media (max-width: 768px) {
			#webamp {
				position: absolute;
				top: -137px !important;
				left: -60px !important;
			}
		}

		.bckz {
			margin-right: 5px;
		}
		.pdctitle {
			text-align: center;
			font-family: 'Oswald';
			font-size: 32px;
			color: #27170f;
			text-shadow: 1px 1px black;
		}