#gallerybutton {
		margin-top: -85px !important;
		/* Remove any top margin */
		height: 200px;
		/* Maintain specified height */
		width: 100%;
		/* Full width */
		position: relative;
		/* Proper positioning context */
		overflow: visible;
		/* Prevent clipping */
	}

	.btn-close {
		filter: none;
		/* Remove default filter %23ff0000 red*/
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff0000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707A1 1 0 01.293.293z'/%3e%3c/svg%3e") !important;
	}

	#video-container video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.video-trigger {

		align-items: center;
		justify-content: center;
		padding: 12px 16px;
		/* Makes it finger-friendly */
		font-size: 1.2em;
		cursor: pointer;
		user-select: none;
		touch-action: manipulation;
		line-height: 1;
		/* reduce vertical spacing */
	}

	.video-trigger i.play-button {
		pointer-events: none;
		/* Allows the whole span to be tappable, not just the icon */
	}

	@media (max-width: 1000px) {
		#secondlist {
			margin-top: -15px !important;
		}

		#xtrainingvideo {
			display: none !important;
		}

		#hoz1 {
			display: none !important;
		}

		#hoz2 {
			display: none !important;
		}
	}



	#video-container {
		position: relative;
	}

	.unmute-btn {
		position: absolute;
		bottom: 20px;
		right: 20px;
		z-index: 10;

		border: none;
		color: white;
		padding: 10px;
		border-radius: 50%;
		cursor: pointer;
		font-size: 16px;
	}



	.audio-toggle {
		font-size: 20px;
		cursor: pointer;
		color: #fff;
	}

	.audio-toggle:hover {
		color: #fff;
	}

	.button-container {
		margin-top: 20px;
		text-align: center;
	}

	#moredetails {
		display: inline-block;
		background-color: #343a40;
		/* Dark background (Bootstrap's btn-dark) */
		color: #ffffff;
		/* White text */
		padding: 10px 20px;
		text-decoration: none;
		border-radius: 4px;
		font-weight: 600;
		transition: background-color 0.3s, color 0.3s;
		text-align: center;
		justify-content: center;
	}

	#moredetails:hover {
		background-color: #23272b;
		/* Darker shade on hover */
		color: #ffffff;
		text-decoration: none;

	}

	<script > document.addEventListener('keydown', function(e) {

			// Disable F12
			if (e.key==='F12') {
				e.preventDefault();
			}

			// Disable Ctrl+Shift+I
			if (e.ctrlKey && e.shiftKey && e.key.toLowerCase()==='i') {
				e.preventDefault();
			}

			// Disable Ctrl+U
			if (e.ctrlKey && e.key.toLowerCase()==='u') {
				e.preventDefault();
			}

			// Disable Ctrl+Shift+J
			if (e.ctrlKey && e.shiftKey && e.key.toLowerCase()==='j') {
				e.preventDefault();
			}
		}

	);

	document.addEventListener('contextmenu', function(e) {
			e.preventDefault(); // Disable right-click
		}

	);
	</script >

	/* Prevent text selection */
	body {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}



	.modal-footer .btn {
		height: 40px;
		/* or any fixed height you want */
		line-height: 1.5;
		font-size: 16px;
		padding: 0 20px;
	}



	/*body {
      background: #ffffff;
      color: #212529;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }*/

	.timeline {
		position: relative;
		padding: 2rem 0;
	}

	.timeline::before {
		content: '';
		position: absolute;
		top: 0;
		left: 20px;
		width: 4px;
		height: 100%;
		background: #ced4da;
		/* light gray line */
	}

	.timeline-step {
		position: relative;
		margin-left: 60px;
		margin-bottom: 2.5rem;
		padding-left: 20px;
		border-left: 2px solid #dee2e6;
	}

	.timeline-step::before {
		content: '';
		position: absolute;
		left: -32px;
		top: 0;
		width: 20px;
		height: 20px;
		background-color: #6c757d;
		/* gray bullet */
		border-radius: 50%;
		box-shadow: 0 0 6px rgba(108, 117, 125, 0.4);
	}

	.timeline-step h5 {
		font-size: 1.35rem;
		font-weight: 700;
		color: #343a40;
		margin-bottom: 0.75rem;
	}

	.timeline-step p {
		color: #495057;
		font-size: 1.05rem;
		line-height: 1.7;
	}

	.text-muted-subtle {
		color: #6c757d;
	}


	/* Specific styling for this row only */
	.row.training-row {
		display: flex;
		margin: 0;
		/* Remove any default margin */
		gap: 0;
		/* Remove gaps between flex items */
		padding: 0;
		/* Remove padding if any */
	}

	.col-text {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 2rem;
		background: #f5f5f5;
		margin: 0;
		color: #222;
		/* Default text color */
	}

	.col-video {
		flex: 1;
		position: relative;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}

	.col-video video.video_training {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.overlay_training {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.4);
		color: #fff;
		padding: 2rem;
	}

	/* Mute/unmute button styling */
	.mute-btn {
		position: absolute;
		bottom: 15px;
		right: 15px;
		background-color: rgba(0, 0, 0, 0.6);
		border: none;
		color: white;
		padding: 0.5rem 1rem;
		font-size: 1rem;
		cursor: pointer;
		border-radius: 4px;
		z-index: 10;
		user-select: none;
	}

	.mute-btn:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}


	/* Dark theme overrides */
	.dark-theme .row.training-row {
		/* You can keep flex styles same */
	}

	.dark-theme .col-text {
		background: #1e1e1e;
		/* Dark background */
		color: #eee;
		/* Light text */
	}

	.dark-theme .col-text a.btn_training {
		color: #aad8ff;
		/* A light blue link/button color */
		border-color: #aad8ff;
	}

	.dark-theme .col-text a.btn_training:hover {
		color: #fff;
		background-color: #005bbb;
		border-color: #005bbb;
	}

	.dark-theme .overlay_training {
		background-color: rgba(0, 0, 0, 0.6);
		/* Slightly darker overlay */
		color: #eee;
	}

	.dark-theme .mute-btn {
		background-color: rgba(255, 255, 255, 0.2);
		color: #000;
	}

	.dark-theme .mute-btn:hover {
		background-color: rgba(255, 255, 255, 0.4);
		color: #000;
	}

	@media screen and (max-width: 768px) {
		.row.training-row {
			flex-direction: column;
		}

		.col-text,
		.col-video {
			flex: none;
			width: 100%;
			padding: 1.5rem;
		}

		.col-video {
			height: auto;
			position: relative;
			/* Ensure positioning context */
			padding: 0;
			/* Remove any extra padding */
		}

		.col-video video.video_training {
			height: auto;
		}

		.overlay_training {
			padding: 1.5rem;
			font-size: 0.95rem;
		}

		.mute-btn {
			bottom: 12px;
			right: 12px;
			padding: 0.5rem 0.9rem;
			font-size: 0.95rem;
			position: absolute;
			/* Stay fixed inside .col-video */
			z-index: 10;
		}
	}

	#trainingvideo {
		margin-bottom: 5px;
	}