:root {
		--primary-blue: #1565c0;
		--accent-red: #d32f2f;
		--bg-gray: #f4f7f9;
		--text-dark: #2c3e50;
		--white: #ffffff;
		--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		/* Stylish Warning Variables */
		--warning-bg: linear-gradient(145deg, #ffffff, #fff8e1);
		--warning-text: #5d4037;
		--warning-border: #ff8f00;
		--warning-shadow: 0 10px 40px rgba(255, 143, 0, 0.15);
		}
			
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Segoe UI', Tahoma, sans-serif;
		}
	
	body {
		background-color: #F7F7F7;
		color: var(--text-dark);
		line-height: 1.6;
		}
		
	.container {
		max-width: 1100px;
		margin: 0 auto;
		padding: 0 20px;
		}
			
	/* --- HEADER --- */
	.header {
		background: var(--white);
		height: 75px;
		display: flex;
		align-items: center;
		border-bottom: 3px solid var(--primary-blue);
		position: sticky;
		top: 0;
		z-index: 1000;
		}
	
	.header .container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		}
	
	.logo {
		font-size: 1.6rem;
		font-weight: 800;
		text-decoration: none;
		color: var(--primary-blue);
		}
	
	.logo span { color: var(--accent-red); }
	
	.nav-links {
		display: flex;
		list-style: none;
		gap: 10px;
		}
	
	.nav-item { position: relative; }
	
	.nav-links a {
		text-decoration: none;
		color: var(--text-dark);
		font-weight: 600;
		font-size: 0.95rem;
		padding: 25px 15px;
		display: block;
		transition: 0.3s;
		position: relative;
		}
			
	.nav-links a:hover { color: var(--primary-blue); }
	
	/* --- NEW ACTIVE NAV STYLE --- */
	.nav-links a.active {
		color: var(--primary-blue);
		}
	
	.nav-links a.active::after {
		content: '';
		position: absolute;
		bottom: 18px;
		left: 15px;
		right: 15px;
		height: 3px;
		background: var(--primary-blue);
		border-radius: 10px;
		}
								
	.submenu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background: var(--white);
		min-width: 220px;
		box-shadow: var(--shadow);
		border-radius: 0 0 8px 8px;
		border-top: 2px solid var(--primary-blue);
		list-style: none;
		padding: 10px 0;
		}
	
	.submenu li a { padding: 10px 20px; font-weight: 500; }
	.submenu li a::after { display: none; }
	.submenu li a:hover { background: var(--bg-gray); }
	.nav-item:hover .submenu { display: block; }
	
	.mobile-btn {
		display: none;
		cursor: pointer;
		font-size: 1.5rem;
		color: var(--primary-blue);
		padding: 10px;
		}
	
	.hero {
		background: linear-gradient(to right, #1e3c72, #2a5298);
		color: var(--white);
		padding: 40px 0 80px;
		text-align: center;
		}
	
	.hero h1 { font-size: 2.5rem; margin-bottom: 10px; }
	
	.track-wrapper { margin-top: -60px; position: relative; z-index: 10; }
						
	.track-card {
		background: var(--white);
		padding: 40px;
		border-radius: 15px;
		box-shadow: var(--shadow);
		text-align: center;
		border: 1px solid rgba(0,0,0,0.05);
		}
	
	.input-group {
		display: flex;
		align-items: center;
		max-width: 750px;
		margin: 20px auto;
		background-color: #f5f8fc;
		border: 1.5px solid #e2e8f0;
		border-radius: 12px;
		padding-left: 18px;
		overflow: hidden;
		transition: 0.3s;
		}
	
	.input-group:focus-within { 
		border-color: var(--primary-blue); 
		box-shadow: 0 0 12px rgba(21, 101, 192, 0.12); 
		background-color: var(--white);
		}
	
	.input-icon-box {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: 5px;
		}
	
	.input-group input {
		flex: 1;
		padding: 20px 12px;
		border: none;
		outline: none;
		background: transparent;
		font-size: 1.15rem;
		color: #334155;
		font-weight: 500;
		}

	.input-group input::placeholder {
		color: #718096;
		font-family: 'Segoe UI', Tahoma, sans-serif;
		letter-spacing: 1px;
		font-weight: 500;
		opacity: 0.85;
		}
	
	.track-btn {
		background: var(--primary-blue);
		color: white;
		border: none;
		padding: 0 40px;
		font-weight: bold;
		cursor: pointer;
		font-size: 1rem;
		height: 65px;
		transition: 0.3s;
		}
	
	.track-btn:hover { background: #0d47a1; }
	
	.format-helper {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		margin: 18px auto 5px auto;
		font-size: 0.95rem;
		flex-wrap: wrap;
		}
	
	.format-label {
		font-weight: 700;
		color: #4a5568;
		font-size: 1rem;
		}
	
	.format-pill-code, .format-pill-desc {
		background: linear-gradient(145deg, #f0f4f9, #e6effd);
		color: #1565c0;
		padding: 6px 18px;
		border-radius: 24px;
		font-weight: 600;
		font-family: 'Segoe UI', Tahoma, sans-serif;
		border: 1px solid #d0e1fd;
		box-shadow: 0 2px 6px rgba(21, 101, 192, 0.04);
		}
	
	.format-pill-desc {
		font-family: 'Courier New', Courier, monospace;
		letter-spacing: 0.5px;
		}
	
	.format-arrow {
		color: #1e3c72;
		font-weight: bold;
		font-size: 1.1rem;
		}
	
	.track-badges {
		display: flex;
		justify-content: center;
		gap: 35px;
		margin-top: 25px;
		flex-wrap: wrap;
		align-items: center;
		}
	
	.badge-item {
		display: flex;
		align-items: center;
		gap: 12px;
		font-size: 1rem;
		color: #4a5568;
		font-weight: 500;
		}
	
	.badge-icon-box {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 10px;
		font-size: 1.1rem;
		}
	
	.bg-purple { background-color: #eedeff; color: #6200ee; }
	.bg-orange { background-color: #ffe8cc; color: #ff9200; }
	.bg-green { background-color: #def7ec; color: #03a854; }

	.live-status-container {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background-color: #f0fdf4;
		padding: 6px 14px;
		border-radius: 20px;
		margin-bottom: 15px;
		border: 1px solid #bbf7d0;
	}
	
	.status-text {
		font-size: 0.85rem;
		font-weight: 600;
		color: #166534;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	
	.blinking-dot {
		width: 8px;
		height: 8px;
		background-color: #22c55e;
		border-radius: 50%;
		position: relative;
		display: inline-block;
	}
	
	.blinking-dot::after {
		content: '';
		width: 100%;
		height: 100%;
		background-color: #22c55e;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		animation: pulse-ring 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}
	
	@keyframes pulse-ring {
		0% {
			transform: scale(1);
			opacity: 0.8;
		}
		100% {
			transform: scale(2.8);
			opacity: 0;
		}
	}
	
	.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 40px 0; }
	.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0; }
	
	.feature-item {
					background: var(--white);
					padding: 30px 20px;
					border-radius: 12px;
					text-align: center;
					box-shadow: 0 2px 10px rgba(0,0,0,0.03);
					border-bottom: 4px solid #eee;
					transition: 0.3s;
				}
	.feature-item:hover { transform: translateY(-5px); border-bottom-color: var(--accent-red); }
	.feature-item h3 { color: var(--primary-blue); margin-bottom: 10px; font-size: 1.1rem; }
	
	.article-section {
		background: var(--white);
		margin: 40px 0;
		padding: 35px;
		border-radius: 12px;
		box-shadow: 0 2px 15px rgba(0,0,0,0.02);
	}
	
	.article-section h2, .article-section h3, .article-section h4 { 
		color: var(--primary-blue); 
		margin: 25px 0 15px; 
	}
																	
	.article-section p { margin-bottom: 20px; color: #444; text-align: justify; }
	.article-section ul { margin: 0 0 20px 40px; color: #444; }
	.article-section ul li { margin-bottom: 10px; }
	
	.table-container { overflow-x: auto; margin: 30px 0; }
	table { width: 100%; border-collapse: collapse; min-width: 500px; }
	table th, table td { padding: 15px; border: 1px solid #eee; text-align: left; }
	table th { background: var(--primary-blue); color: white; }
	table tr:nth-child(even) { background: #f9f9f9; }
	
	.faq-container { margin-top: 40px; }
	.faq-item { 
		background: #fff; 
		border: 1px solid #eee; 
		margin-bottom: 10px; 
		border-radius: 8px; 
		overflow: hidden; 
	}
	.faq-question { 
		padding: 20px; 
		cursor: pointer; 
		font-weight: 600; 
		color: var(--primary-blue); 
		display: flex; 
		justify-content: space-between;
		transition: 0.3s;
	}
	.faq-question:hover { background: #f8faff; }
	.faq-answer { 
		max-height: 0; 
		overflow: hidden; 
		transition: 0.3s ease-out; 
		padding: 0 20px; 
		color: #666;
		background: #fff;
	}
	.faq-item.active .faq-answer { max-height: 500px; padding: 15px 20px 25px; border-top: 1px solid #f1f1f1; }
	
	.safety-container {
		margin: 50px auto;
		max-width: 1100px;
		padding: 0 20px;
	}
	
	.stylish-disclaimer {
		background: var(--warning-bg);
		border-left: 6px solid var(--warning-border);
		border-radius: 16px;
		padding: 35px;
		box-shadow: var(--warning-shadow);
		position: relative;
		overflow: hidden;
		border: 1px solid rgba(255, 143, 0, 0.1);
	}
	
	.stylish-disclaimer h4 {
		color: #e65100;
		font-size: 1.4rem;
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		gap: 10px;
		text-transform: uppercase;
		letter-spacing: 1.5px;
		font-weight: 800;
	}
	
	.stylish-disclaimer p {
		color: var(--warning-text);
		font-size: 1rem;
		margin-bottom: 15px;
		line-height: 1.8;
	}

	.warning-icon {
		font-size: 2rem;
		margin-bottom: 10px;
		display: block;
	}
	
	.footer {
		text-align: center;
		padding: 30px 0;
		background: #1a1a1a;
		color: var(--white);
		margin-top: 10px;
	}

    .footer a {
		color: var(--white);
		text-decoration: none;
		font-weight: 600;
		transition: 0.3s;
	}
		
	.footer a:hover {
		color: var(--primary-blue);
		text-decoration: underline;
	}
							
	:root {
		--primary-blue: #1565c0;
		--accent-red: #d32f2f;
		--bg-gray: #f4f7f9;
		--text-dark: #2c3e50;
		--white: #ffffff;
		--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	}
	
	.contact-wrapper {
		margin-top: -60px;
		margin-bottom: 60px;
		display: grid;
		grid-template-columns: 1fr 1.5fr;
		gap: 30px;
	}
	
	.contact-info {
		background: var(--primary-blue);
		color: white;
		padding: 40px;
		border-radius: 15px;
		box-shadow: var(--shadow);
	}
	
	.contact-info h2 {
		margin-bottom: 20px;
		font-size: 1.8rem;
	}
	
	.info-item {
		margin-bottom: 25px;
	}
	
	.info-item h4 {
		margin-bottom: 5px;
		color: #bbdefb;
		text-transform: uppercase;
		font-size: 0.8rem;
		letter-spacing: 1px;
	}
	
	.info-item p {
		font-size: 1.1rem;
	}
	
	.contact-card {
		background: var(--white);
		padding: 40px;
		border-radius: 15px;
		box-shadow: var(--shadow);
	}
	
	.form-group {
		margin-bottom: 20px;
	}
	
	.form-group label {
		display: block;
		margin-bottom: 8px;
		font-weight: 600;
		color: #555;
		font-size: 0.9rem;
	}
	
	.form-control {
		width: 100%;
		padding: 12px 15px;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		font-size: 1rem;
		outline: none;
		transition: border-color 0.3s, background 0.3s;
	}
	
	.form-control:focus {
		border-color: var(--primary-blue);
		background: #f8faff;
	}
	
	textarea.form-control {
		min-height: 150px;
		resize: vertical;
	}
	
	.submit-btn {
		background: var(--primary-blue);
		color: white;
		border: none;
		padding: 15px 30px;
		border-radius: 8px;
		font-weight: bold;
		font-size: 1rem;
		cursor: pointer;
		width: 100%;
		transition: all 0.3s ease;
	}
	
	.submit-btn:hover {
		background: #0d47a1;
		transform: translateY(-2px);
		box-shadow: 0 5px 15px rgba(21, 101, 192, 0.3);
	}
							
	.post-img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 25px auto;
		border-radius: 12px;
	}

	@media (max-width: 768px) {
		.nav-links { 
			display: none; 
			position: absolute; 
			top: 75px; 
			left: 0; 
			width: 100%; 
			background: white; 
			flex-direction: column; 
			box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
			max-height: calc(100vh - 75px);
			overflow-y: auto;
			gap: 0 !important;
			padding: 8px 0;
		}
		.nav-links.active { display: flex; }
								
		.nav-links li {
			width: 100%;
		}

		.nav-links a { 
			padding: 14px 24px;
			border-bottom: 1px solid #f1f5f9;
			font-size: 1rem;
			font-weight: 500;
			display: block;
		}
								
		.nav-links li:last-child a { 
			border-bottom: none; 
		}
								
		.nav-links a.active { 
			background: #eff6ff; 
			color: var(--primary-blue) !important;
			font-weight: 600;
		} 
		.nav-links a.active::after { display: none; }
								
		.nav-links a:hover {
			background: #f8fafc;
			color: var(--primary-blue);
		}

		.mobile-btn { 
			display: block; 
			font-size: 1.6rem;
			font-weight: bold;
		}
								
		.hero {
			padding: 25px 0 55px;
		}
								
		.hero h1 { 
			font-size: 1.6rem !important; 
			padding: 0 10px; 
		}

		.track-card h2 {
			font-size: 1.3rem !important;
			margin-bottom: 10px;
			line-height: 1.3;
		}

		.track-card p {
			font-size: 0.9rem;
			padding: 0 5px;
		}
								
		.grid-4, .grid-3 { 
			grid-template-columns: 1fr !important; 
			gap: 15px;
		}
								
		.track-wrapper { 
			margin-top: -30px !important; 
			padding: 0 10px;
			position: relative; 
			z-index: 10; 
		}
								
		.track-card {
			padding: 25px 20px !important;
		}

		.track-card h3 {
			margin-bottom: 15px;
			font-size: 1.2rem;
		}
								
		.input-group { 
			flex-direction: column; 
			border: none; 
			background: transparent; 
			gap: 12px; 
			margin: 10px auto 0 auto;
			padding-left: 0;
		}
								
		.input-icon-box {
			display: none;
		}
								
		.input-group input { 
			border: 2px solid #e0e0e0; 
			border-radius: 12px; 
			width: 100%; 
			text-align: left; 
			padding: 18px 16px; 
			font-size: 1rem;
			background: #f5f8fc;
		}
		.input-group input:focus { border-color: var(--primary-blue); background: var(--white); }
								
		.track-btn { 
			border-radius: 12px; 
			padding: 14px; 
			width: 100%; 
			height: auto; 
			font-size: 1.1rem;
		}
								
		.track-badges {
			flex-direction: column;
			align-items: flex-start;
			gap: 15px;
			margin-top: 20px;
		}
								
		.contact-wrapper {
			grid-template-columns: 1fr !important;
			margin-top: 20px !important;
			margin-bottom: 30px;
		}
												
		.contact-card, .contact-info {
			padding: 25px;
		}
		
		.form-row {
			grid-template-columns: 1fr !important;
			gap: 0 !important;
		}
											
		.article-section {
			padding: 20px;
			margin: 20px 0;
		}
								
		.article-section p {
			text-align: left;
		}
								
		.table-container {
			border-radius: 8px;
			border: 1px solid #eee;
		}
		table th, table td {
			padding: 10px;
			font-size: 0.85rem;
		}

		.format-helper {
			gap: 8px;
			margin-top: 15px;
		}
		.format-label {
			width: 100%;
			text-align: center;
			margin-bottom: 2px;
		}
		.format-pill-code, .format-pill-desc {
			font-size: 0.85rem;
			padding: 5px 12px;
		}
	}
							
	#scrollToTopBtn {
		display: none;
		position: fixed;
		bottom: 30px;
		right: 30px;
		z-index: 99;
		border: none;
		outline: none;
		background-color: var(--primary-blue);
		color: white;
		cursor: pointer;
		padding: 15px 20px;
		border-radius: 50%;
		font-size: 1.5rem;
		font-weight: bold;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
		transition: all 0.3s ease;
	}

	#scrollToTopBtn:hover {
		background-color: var(--accent-red);
		transform: translateY(-5px);
	}

	html {
		scroll-behavior: smooth;
	}