<style>
	body{
			padding-top: 56px;
		}
	.card-title{
		height: 39px;
		overflow: hidden;
	}
	.card-title-popular{
		height: 36px;
		overflow: hidden;
	}
	
@media (max-width: 991px) {
  body {
    padding-top: 62px;
  }
}
	.video-thumb {
			  position: relative;
			  display: block;
			}

			.video-badge {
			  position: absolute;
			  bottom: 6px;
			  padding: 4px 6px;
			  font-size: 14px;
			  background: rgba(0, 0, 0, 0.8);
			  color: #fff;
			  border-radius: 4px;
			  line-height: 1;
			  z-index: 2;
			}

			.video-badge.left {
			  left: 6px;
			}

			.video-badge.right {
			  right: 6px;
			}


	

	.videorow{
		overflow: hidden;
	}
	
	
		@media only screen and (max-width: 600px) {
		.overlay1{
			height:380px;
		}
		.otherratio{
			height:380px;
		}
		.streamtaperatio{
			height:380px;
		}
		.streamtapefinal{
			height:256px;
			overflow: hidden;
		}
		.responsivetape{
			position: absolute;
			top: -15rem;
			height: 31rem!important;
		}
		.slick-next{
			display:none!important;
		}
		.slick-prev{
			display:none!important;
		}
		
	}
	#embededvideo{
		overflow: hidden;
	}


	@media only screen and (min-width: 600px) {
	.overlay1{
			height:402px;
		}
		.streamtaperatio{
			height:387px;
			overflow: hidden;
		}
		.otherratio{
			height:402px;
		}
		.responsivetape{
			position: absolute;
			top: -10rem;
			height: 33rem!important;
		}
		
	}


@media only screen and (min-width: 768px) {
	.overlay1{
			height:auto;
		}
		.otherratio{
			height:auto;
		}
		.streamtaperatio{
			height:auto;
			overflow: hidden;
		}
}


@media only screen and (min-width: 992px) {
		.responsivetape{
			width: 106%!important;
			left: 0%!important;
			height: 52rem!important;
		}
		.idark{
			display:none;
			
		}
		.darknav{
			padding:6px;
			width: 44px;
		}
}


@media only screen and (min-width: 1200px) {
	.streamtapefinal{
			height:auto;
		}
		.idark{
			display:inline;
			margin-top:5px;
		}
		.darknav{
			padding:6px;
			widht:auto;
		}
}

	/* Custom iOS-style sizing */
.form-check-input {
    width: 3em !important;
    height: 1.5em !important;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #34c759; /* Classic iOS green */
    border-color: #34c759;
}

/* Smooth transition for the whole page */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* Light Mode (Default) */
:root {
  --body-bg: #ffffff;
  --title-color: #000000;
}

/* Dark Mode overrides */
[data-bs-theme="dark"] {
  --body-bg: #121212; /* A deep dark grey/black */
  --title-color: #ffffff;
}

/* Apply the variables */
body {
  background-color: var(--body-bg) !important;
}

h1, .custom-title {
  color: var(--title-color);
}

/* --- Light Mode Gradient --- */
[data-bs-theme="light"] body {
    background: #ffffff;
	background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(222, 226, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
    color: #000000; /* Force black text */
    min-height: 100vh;
}

/* --- Dark Mode Gradient --- */
[data-bs-theme="dark"] body {
    background: #000000;
	background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(37, 17, 17, 1) 50%, rgba(0, 0, 0, 1) 100%);
    color: #ffffff; /* Force white text */
    min-height: 100vh;
}

/* --- Title Classes --- */
.main-title {
    transition: color 0.3s ease;
}

[data-bs-theme="light"] .main-title {
    color: #000000 !important;
}

[data-bs-theme="dark"] .main-title {
    color: #ffffff !important;
}
/* Styling for the anchor tag title */
.theme-link {
    text-decoration: none; /* Removes underline */
    font-weight: bold;
    transition: color 0.3s ease; /* Smooth transition like the background */
}

/* Color for Light Mode */
[data-bs-theme="light"] .theme-link {
    color: #000000 !important;
}

/* Color for Dark Mode */
[data-bs-theme="dark"] .theme-link {
    color: #ffffff !important;
}

/* Optional: Hover states so it still feels like a link */
[data-bs-theme="light"] .theme-link:hover {
    color: #555555 !important;
}

[data-bs-theme="dark"] .theme-link:hover {
    color: #cccccc !important;
}
.idark{
	color:#b4b4b4;
	padding:3px;
}
/* General Dot Styling - Adjusting the Opacity/Smoothness */
.slick-dots li button:before {
    transition: color 0.3s ease, opacity 0.3s ease;
    font-size: 12px; /* Adjust size if needed */
}

/* Light Mode Dots (Black) */
[data-bs-theme="light"] .slick-dots li button:before {
    color: #000000 !important;
    opacity: 0.25; /* Dim inactive dots */
}

[data-bs-theme="light"] .slick-dots li.slick-active button:before {
    opacity: 1; /* Active dot is solid black */
}

/* Dark Mode Dots (White) */
[data-bs-theme="dark"] .slick-dots li button:before {
    color: #ffffff !important;
    opacity: 0.25; /* Dim inactive dots */
}

[data-bs-theme="dark"] .slick-dots li.slick-active button:before {
    opacity: 1; /* Active dot is solid white */
}
/* --- Light Mode (Zebra + Bootstrap Pagination) --- */
[data-bs-theme="light"] .Zebra_Pagination .page-link {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #dee2e6 !important;
}

[data-bs-theme="light"] .Zebra_Pagination .page-item.active .page-link {
    background-color: #000000 !important; /* Active page is black */
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* --- Dark Mode (Zebra + Bootstrap Pagination) --- */
[data-bs-theme="dark"] .Zebra_Pagination .page-link {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Subtle transparent dark */
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="dark"] .Zebra_Pagination .page-item.active .page-link {
    background-color: #ffffff !important; /* Active page is white */
    border-color: #ffffff !important;
    color: #000000 !important;
}

/* Hover effects for both */
.Zebra_Pagination .page-link:hover {
    filter: brightness(0.8);
    transition: all 0.3s ease;
}
.videoheader{
	margin-top:10px;
	font-size:25px;
}

/* Mobile search overlay */
#mobileSearchBox{
  position: fixed;
  top: 56px; /* navbar height */
  left: 0;
  width: 100%;
  background: #111;
  z-index: 1050;
  display: none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Only mobile */
@media (min-width: 992px) {
  #mobileSearchBox{
    display: none !important;
  }
  #mobileSearchToggle{
    display: none !important;
  }
}

/* Hide desktop search form on mobile */
@media (max-width: 991px) {
  .mobile-search{
    display: none !important;
  }
}