:root {
     --bg-dark: #111111;
     --text-light: #f1f1f1;
     --card-bg: #1a1a1a;
     /* Slightly lighter than background to show depth */
     --accent-red: #B80912;
 }

 html,
 body {
     background-color: var(--bg-dark) !important;
     color: var(--text-light) !important;
 }

 html,
 body {
     margin: 0;
     padding: 0;
     scrollbar-width: none;
     overflow-x: hidden;
     font-style: manrope;
 }

 html::-webkit-scrollbar {
     display: none;
 }

 /* Unified backgrounds for sidebar widgets and box containers to match bg-dark */
 .bg-dark-card,
 .box-container,
 .box-container-1,
 .sidebar-wrapper {
     background-color: var(--bg-dark) !important;
 }

 /* Global Link Styles */
 a {
     color: var(--text-light);
     transition: 0.3s;
 }

 a:hover {
     color: var(--accent-red);
 }

 /* Global Card Reset for Dark Mode */
 .card {
     background-color: #111111 !important;
     color: var(--text-light) !important;
     border-radius: 0 !important;
     /* Subtle border */
 }

 /* Fix for muted text in dark mode */
 .text-muted {
     color: #aaaaaa !important;
 }






 /* Navbar Base */
 .custom-navbar {
     background-color: #000000;
     z-index: 1050;
     padding: 0.8rem 0;
 }

 .auth-links {
     position: absolute;
     top: 5px;
     right: 20px;
     z-index: 1000;
 }

 .logo-main {
     width: 80px;
     height: auto;
 }

 .logo-text {
     width: 250px;
     height: 55px;
 }

 /* Search Bar */
 .search-container {
     position: relative;
     max-width: 600px;
     display: flex;
     width: 100%;
     margin-top: 15px;
 }

 .search-input {
     height: 50px;
     background-color: #2b2b2b !important;
     border: 1px solid #444 !important;
     border-radius: 25px !important;
     color: white !important;
     /* This is the text you TYPE */
     padding-left: 20px;
 }

 /* This is the text BEFORE you type */
 .search-input::placeholder {
     color: #6c6b6b !important;
     opacity: 1;
 }

 .btn-search {
     position: absolute;
     right: 5px;
     top: 5px;
     height: 40px;
     width: 45px;
     border-radius: 20px !important;
     background-color: #E50914;
     color: white;
     border: none;
 }

 /* Login Button */
 .btn-login {
     font-size: 11px;
     letter-spacing: 1px;
     padding: 4px 15px;
     background-color: #E50914;
     border: none;
     border-radius: 4px;
     color: white !important;
 }

 .btn-login:hover {
     background-color: #B0060F;
 }

 .social-icons {
     display: flex;
     margin-top: 45px;
 }

 .navbar-brand {
     gap: 10px;
     padding: 0px;
     margin: 0px;
 }

 /* Social Icons - Professional Styling */
 .social-icons a {
     margin-left: 15px;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .social-icons .fb {
     background-color: #1877F2;
     color: white !important;
     width: 35px;
     height: 35px;
     border-radius: 50%;
     font-size: 28px;
 }

 .social-icons .tw {
     color: #ffffff;
     font-size: 28px;
 }

 .social-icons .ig {
     color: #E4405F;
     font-size: 30px;
 }

 .social-icons .yt {
     color: #FF0000;
     font-size: 30px;
 }

 .social-icons a:hover {
     transform: scale(1.15);
     opacity: 0.9;
 }

 @media (max-width: 768px) {
     .logo-main {
         height: 50px;
         width: 60px;
     }

     .logo-text {
         height: 50px;
     }

     .search-input {
         height: 40px;
     }

     .btn-search {
         height: 30px;
         width: 35px;
     }

     .btn-login {
         font-size: 12px;
         padding: 4px 8px;
     }

     .auth-links {
         top: 5px;
         right: 10px;
     }

     .social-icons {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 10px;
         margin-top: 15px;
         width: 100%;
     }
 }


 /* 1. Shared Navigation Logic */
 .scroll-nav {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: auto;
     white-space: nowrap;
     scrollbar-width: none;
     /* Firefox */
     -ms-overflow-style: none;
     /* IE/Edge */
     -webkit-overflow-scrolling: touch;
 }

 .scroll-nav::-webkit-scrollbar {
     display: none;
     /* Chrome/Safari */
 }

 .scroll-nav .nav-link {
     transition: all 0.3s ease-in-out;
     text-transform: uppercase;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* 2. Category Bar (Red) */
 .category-bar {
     background-color: #B80912;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

 .category-nav .nav-link {
     color: #ffffff !important;
     font-size: 15px;
     /* Professional standard size */
     font-weight: 700;
     padding: 12px 19px !important;
     letter-spacing: 0.5px;
 }

 .category-nav .nav-link:hover {
     background-color: rgba(0, 0, 0, 0.15);
 }

 .home-icon i {
     font-size: 20px;
 }

 /* 3. In Focus Bar (Dark Grey) */
 .infocus-bar {
     background-color: #333333;
     border-bottom: 1px solid #444;
 }

 .infocus-label {
     background-color: #B80912;
     color: white;
     font-size: 11px;
     font-weight: 800;
     padding: 4px 12px;
     margin-right: 15px;
     border-radius: 5px;
     flex-shrink: 0;
     /* Prevents button from squeezing */
     letter-spacing: 1px;
 }

 .infocus-nav .nav-link {
     color: #cccccc !important;
     font-size: 13px;
     font-weight: 600;
     padding: 8px 15px !important;
 }

 .infocus-nav .nav-link:hover {
     color: #ffffff !important;
     background-color: rgba(255, 255, 255, 0.1);
 }

 /* 4. Responsive Adjustments */
 @media (max-width: 991px) {
     .category-nav .nav-link {
         font-size: 13px;
         padding: 10px 15px !important;
     }

     .infocus-bar .container-fluid {
         padding-left: 10px;
     }

     .infocus-label {
         font-size: 10px;
         padding: 3px 8px;
         margin-right: 10px;
     }
 }


 /* only for index page */
 /* =========================================
       SAFETY FIX FOR VITE/TAILWIND BUG
       (Forces g-4 gutters to work correctly 
       even if Tailwind Preflight wiped them)
       ========================================= */
 .row {
     display: flex;
     flex-wrap: wrap;
 }

 .row.g-4 {
     --bs-gutter-x: 1.5rem !important;
     --bs-gutter-y: 1.5rem !important;
     margin-right: calc(-.5 * var(--bs-gutter-x)) !important;
     margin-left: calc(-.5 * var(--bs-gutter-x)) !important;
     margin-top: calc(-1 * var(--bs-gutter-y)) !important;
 }

 .row.g-4>* {
     padding-right: calc(var(--bs-gutter-x) * .5) !important;
     padding-left: calc(var(--bs-gutter-x) * .5) !important;
     margin-top: var(--bs-gutter-y) !important;
 }

 /* =========================================
       Global Variables & Common Typography
       ========================================= */
 :root {
     --accent-red: #E50914;
     --text-light: #ffffff;
     --border-dark: #3B3B3B;
     --bg-dark-card: #1C1C1C;
 }

 .section-header {
     background-color: var(--accent-red);
     display: inline-block;
     padding-right: 40px;
     clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
 }

 .section-title {
     color: #ffffff;
     font-family: 'Inter', sans-serif;
     font-size: 1.1rem;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 1px;
     line-height: 1.2;
     padding: 5px 10px;
 }

 .card-title {
     font-size: 16px;
     line-height: 1.5;
     transition: color 0.3s ease;
 }

 .card-title:hover,
 a:hover .card-title {
     color: #ddd !important;
 }

 .sm-text {
     font-size: 13px;
     font-weight: 500;
 }

 .text-color-custom {
     color: rgb(8, 238, 132) !important;
 }

 /* =========================================
       Containers & Structure 
       ========================================= */
 .box-container {
     border: 1px solid var(--border-dark) !important;
     border-radius: 15px !important;
 }

 .box-container-1 {
     border: 1px solid var(--border-dark) !important;
     border-top: none !important;
     border-radius: 0px 0px 15px 15px !important;
 }

 .bg-dark {
     background-color: transparent !important;
 }

 .bg-dark-1 {
     background-color: #343434 !important;
 }

 .bg-dark-card {
     background-color: var(--bg-dark-card);
 }

 .sidebar-header {
     background: var(--accent-red);
 }

 .movies-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 24px;
     /* Native Grid gap matches g-4 (1.5rem) */
 }

 .movies-grid-list {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
 }

 .list-card-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
 }

 /* =========================================
       Horizontal Scroll Functionality (Hidden Scrollbars)
       ========================================= */

 .horizontal-scroll-container {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
     gap: 3rem;
     padding-bottom: 15px;
 }

 .scroll-item {
     flex: 0 0 auto;
     width: 287px;
 }

 /* Cross-browser hidden scrollbars while retaining scroll ability */
 .horizontal-scroll-container,
 .mobile-scroll-row,
 .mobile-scroll-grid {
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     /* Hide scrollbar for Firefox */
     -ms-overflow-style: none;
     /* Hide scrollbar for IE and Edge */
 }

 .horizontal-scroll-container::-webkit-scrollbar,
 .mobile-scroll-row::-webkit-scrollbar,
 .mobile-scroll-grid::-webkit-scrollbar {
     display: none;
     /* Hide scrollbar for Chrome, Safari, and Opera */
 }

 /* =========================================
       Cards & Image Sizes (Flex & Object-Fit)
       ========================================= */
 .img-v {
     width: 100%;
     object-fit: cover;
     display: block;
 }

 .img-h {
     object-fit: cover;
     display: block;
 }

 .img-h-137 {
     height: 162px;
     object-fit: contain;
 }

 .img-h-322 {
     height: 322px;
 }

 .img-h-200 {
     height: 200px;
 }

 .img-sq-150 {
     width: 137px;
     height: 78px;
 }

 .img-rect-100-150 {
     width: 100px;
     height: 150px;
 }

 .img-rect-122-91 {
     width: 122px;
     height: 91px;
 }

 .img-rect-122-146 {
     width: 122px;
     height: 146px;
 }

 .img-sq-80 {
     width: 80px;
     height: 80px;
 }

 .img-rect-170-146 {
     width: 137px;
     height: 78px;
 }

 .img-rect-170-115 {
     width: 170px;
     height: 115px;
 }

 .img-rect-118-99 {
     width: 200px;
     height: 115px;
 }
 @media (max-width: 768px) {

  .img-rect-118-99 {
     width: 147px;
     height: 81px;
 }
}



 /* Video Card Overlay */
 .video-thumb {
     position: relative;
 }



 .play-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.6);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     color: #fff;
     z-index: 2;
     opacity: 0.5;
     transition: opacity 0.3s ease, transform 0.3s ease;
 }

 .video-card:hover .play-icon {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1.1);
 }

 .btn-watch-now {
     width: fit-content;
     min-width: 90px;
     margin-top: 8px;
     padding: 4px 12px;
     font-size: 13px;
     background-color: var(--accent-red);
     color: #fff;
     border: none;
     border-radius: 5px;
     font-weight: 500;
     transition: 0.3s;
 }

 .btn-watch-now:hover {
     background-color: #c90812;
     color: #fff;
 }

 .main-trending-card .img-container {
     height: 385px;
     overflow: hidden;
 }

 .main-trending-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: 0.5s;
 }

 .main-trending-card:hover img {
     transform: scale(1.05);
 }

 .feature-card-body {
     padding-left: 0px;
     padding-right: 0px;
 }

 .main-title {
     font-size: 1.75rem;
     line-height: 1.3;
     transition: color 0.3s ease;
 }

 .list-img-wrapper {
     width: 200px;
     height: 113px;
     overflow: hidden;
 }

 .list-img-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .list-title {
     font-size: 1.05rem;
     line-height: 1.6;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .list-card {
     transition: 0.3s;
 }

 .list-card:hover {
     background-color: #252525 !important;
 }

 .custom-table {
     background: #1f1f1f;
     border-radius: 0;
     overflow: hidden;
 }

 .custom-table thead th {
     background: #111;
     color: #fff;
     font-size: 14px;
     font-weight: 700;
     text-transform: uppercase;
     border: 1px solid #343434;
     padding: 14px 12px;
 }

 .custom-table tbody tr {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .custom-table tbody tr:last-child {
     border-bottom: none;
 }

 .custom-table tbody th,
 .custom-table tbody td {
     padding: 14px 12px;
     vertical-align: middle;
     border: none;
     font-size: 14px;
     color: #d1d1d1;
 }

 .custom-table tbody th {
     color: #fff;
     font-weight: 600;
 }

 .custom-table.table-striped tbody tr:nth-of-type(odd) {
     background-color: rgba(255, 255, 255, 0.03);
 }

 .custom-table.table-striped tbody tr:hover {
     background-color: rgba(255, 193, 7, 0.08);
     transition: 0.3s ease;
 }

 .custom-margin-top {
     margin-top: 140px !important;
 }


 /* =========================================
       Responsive Media Queries
       ========================================= */

 @media (max-width: 992px) {

     /* Activate Mobile Scroll */
     .mobile-scroll-row {
         flex-wrap: nowrap !important;
         overflow-x: auto;
         overflow-y: hidden;
         padding-bottom: 15px;
         margin-top: 0 !important;
     }

     .horizontal-scroll-container {
         display: flex;
         flex-wrap: nowrap;
         overflow-x: auto;
         overflow-y: hidden;
         gap: 1rem;
         padding-bottom: 5px;
     }

     .mobile-scroll-row>* {
         margin-top: 0 !important;
     }

     .mobile-scroll-grid {
         display: flex !important;
         flex-wrap: nowrap !important;
         overflow-x: auto;
         overflow-y: hidden;
         padding-bottom: 15px;
     }

     .mobile-scroll-item {
         flex: 0 0 auto !important;
         width: 220px !important;
     }

     .mobile-scroll-item-sm {
         flex: 0 0 auto !important;
         width: 200px !important;
     }

     .main-title {
         font-size: 1.4rem;
     }

     /* 2 Columns on Tablet */
     .movies-grid-list {
         grid-template-columns: repeat(2, 1fr);
         gap: 15px;
     }

     .img-h-137,
     .img-h-322,
     .img-h-200,
     .main-trending-card .img-container {
         height: 220px;
     }

     .scroll-item {
         width: 220px;
     }

     .card-title {
         font-size: 16px;
     }

     .sidebar-header img {
         width: 32px !important;
         height: 32px !important;
     }

     .sidebar-header .section-title {
         font-size: 18px !important;
     }

     .section-title {
         font-size: 0.9rem;
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 1px;
         line-height: 1;
         padding: 3px 8px;
     }

     .custom-table th,
     .custom-table td {
         font-size: 13px;
         padding: 12px 10px;
     }

     .custom-margin-top {
         margin-top: 40px mpo !important;
     }
 }

 @media (max-width: 768px) {
     .main-title {
         font-size: 1.25rem;
     }

     .list-title {
         font-size: 0.95rem;
     }

     /* Keep 2 Columns on Mobile */
     .movies-grid-list,
     .list-card-container {
         grid-template-columns: repeat(2, 1fr);
         gap: 10px;
         /* slightly increased from 5px for better breathing room */
     }

     /* Shrink the image inside movies grid so text isn't crushed */
     .movies-grid-list .img-rect-100-150 {
         width: 80px !important;
         height: 120px !important;
     }

     .movies-grid-list .card-body p.sm-text {
         font-size: 10px !important;
         /* Scale down text to fit 2 columns */
     }

     .img-h-137,
     .img-h-322,
     .img-h-200,
     .main-trending-card .img-container {
         height: 200px;
     }

     .img-sq-150{
        width: 174px;
        height: 97px;
     }

     .scroll-item,
     .mobile-scroll-item,
     .mobile-scroll-item-sm {
         width: 180px !important;
     }

     .card-title {
         font-size: 14px !important;
     }

     .custom-table {
         font-size: 12px;
     }

     .custom-table th,
     .custom-table td {
         padding: 10px 8px;
     }

     .custom-margin-top {
         margin-top: 40px mpo !important;
     }

 }

 @media (max-width: 576px) {

     /* Ensure 2 Columns remain on the smallest mobile devices */
     .movies-grid-list {
         grid-template-columns: repeat(2, 1fr);
         gap: 8px;
     }

     /* Shrink the image even further for very small phones */
     .movies-grid-list .img-rect-100-150 {
         width: 65px !important;
         height: 100px !important;
     }

     /* Adjust text size drastically so it doesn't overflow */
     .movies-grid-list .card-title {
         font-size: 11px !important;
     }

     .movies-grid-list .card-body p.sm-text {
         font-size: 9px !important;
         margin-top: 2px !important;
     }

     .main-trending-card {
         height: 180px;
     }

     .img-h-322 {
         height: 219px;
     }

     .img-h-137,
     .img-h-200,
     .img-container {
         height: 80px;
     }



     .card-title {
         font-size: 11px;
         line-height: 1.5;
     }

     .list-img-wrapper {
         height: 113px;
     }

     .play-icon {
         width: 40px;
         height: 40px;
         font-size: 16px;
     }

     .scroll-item,
     .mobile-scroll-item,
     .mobile-scroll-item-sm {
         width: 150px !important;
     }

     .custom-margin-top {
         margin-top: 40px mpo !important;
     }
 }

 /* Customization for Video Section Mobile Height */
 @media (max-width: 768px) {

     /* Specifically target the image inside the video card */
     .video-card .img-h-200 {
         height: 130px !important;
         object-fit: cover;
         width: 100%;
     }

     /* Adjusting scroll item width for mobile to match the new height ratio */
     .video-section .scroll-item {
         width: 180px !important;
     }
 }

 .section-margin{
    margin-bottom: 40px;
 }
@media (max-width: 768px) {
 .section-margin{
    margin-bottom: 0px;
 }
}