/* Simple CSS for AjkerProttasha */

/* ===== ALL @-RULES MUST BE AT TOP ===== */

/* Handwriting Font - Google Fonts (Must be at top) */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=Pacifico&display=swap');

/* Bengali Font Support - SolaimanLipi Local Files */
/* Main SolaimanLipi font (default/regular) */
@font-face {
    font-family: 'SolaimanLipi';
    src: url('/frontend/newspaper/font/SolaimanLipi.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* SolaimanLipi Normal variant */
@font-face {
    font-family: 'SolaimanLipi';
    src: url('/frontend/newspaper/font/SolaimanLipi-Normal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* SolaimanLipi Bold variant */
@font-face {
    font-family: 'SolaimanLipi';
    src: url('/frontend/newspaper/font/SolaimanLipi-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* SolaimanLipi Bold variant (700) */
@font-face {
    font-family: 'SolaimanLipi';
    src: url('/frontend/newspaper/font/SolaimanLipi-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* SolaimanLipi Thin variant */
@font-face {
    font-family: 'SolaimanLipi';
    src: url('/frontend/newspaper/font/SolaimanLipi-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* SolaimanLipi Light variant (300) */
@font-face {
    font-family: 'SolaimanLipi';
    src: url('/frontend/newspaper/font/SolaimanLipi-Thin.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Fallback font for faster initial render */
@font-face {
    font-family: 'SolaimanLipi Fallback';
    src: local('Arial');
    ascent-override: 95.37%;
    descent-override: 28.44%;
    line-gap-override: 8.99%;
    size-adjust: 99.94%;
}

/* ===== REGULAR CSS RULES START HERE ===== */

/* ===== GLOBAL FONT APPLICATION - SolaimanLipi ===== */
/* Apply SolaimanLipi font to entire site with high specificity */
html,
body,
* {
    font-family: 'SolaimanLipi', 'SolaimanLipi Fallback', Arial, sans-serif !important;
}

/* Specific element overrides for consistency */
body {
    font-family: 'SolaimanLipi', 'SolaimanLipi Fallback', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th,
label, input, textarea, select, button,
div, article, section, header, footer, nav,
.text-sm, .text-base, .text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl {
    font-family: 'SolaimanLipi', 'SolaimanLipi Fallback', Arial, sans-serif !important;
}

/* Font weight utilities using SolaimanLipi variants */
.font-thin, .font-extralight, .font-light {
    font-family: 'SolaimanLipi', 'SolaimanLipi Fallback', Arial, sans-serif !important;
    font-weight: 100 !important;
}

.font-normal, .font-medium {
    font-family: 'SolaimanLipi', 'SolaimanLipi Fallback', Arial, sans-serif !important;
    font-weight: normal !important;
}

.font-semibold, .font-bold, .font-extrabold, .font-black {
    font-family: 'SolaimanLipi', 'SolaimanLipi Fallback', Arial, sans-serif !important;
    font-weight: bold !important;
}

/* Advertisement Images - Ensure they display properly */
.group img[alt*="মার্কেটিং"],
.group img[alt*="ডেভেলপমেন্ট"],
.group img[alt*="অ্যাপ"],
img[src*="unsplash.com"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Modern Header Slogan Styles - Redesigned */

/* Main Logo Styles */
.header-logo-main {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.header-logo-main:hover {
    transform: scale(1.08) translateY(-2px);
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.15));
}

/* English Slogan - Left Side (Above Date) */
.slogan-english-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    background: #ffffff;
    border-radius: 0;
    box-shadow: none;
    transition: all 0.3s ease;
    position: relative;
    border: none;
}

.slogan-english-badge:hover {
    background: #f3f4f6;
    transform: none;
    box-shadow: none;
}

.slogan-english-text {
    font-size: 0.65rem;
    font-weight: 400;
    color: #4b5563;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: normal;
    white-space: nowrap;
    text-shadow: none;
    position: relative;
    z-index: 1;
}

/* Date/Time Box Styling */
.border-l-4 {
    border-left-width: 4px;
}

/* Icon Box Styling */
.w-4\.5 {
    width: 1.125rem;
}

.h-4\.5 {
    height: 1.125rem;
}

/* Smooth Transitions */
.slogan-english-badge,
.date-time-box {
    transition: all 0.3s ease;
}

/* Hover Effects */
.slogan-english-badge:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

/* Gradient Animation */
@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.bg-gradient-animated {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

/* Bengali Slogan - Right Side (Above Social Icons) */
.slogan-bengali-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background: #ffffff;
    border-radius: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    max-width: fit-content;
    border: none;
}

.slogan-bengali-badge:hover {
    transform: translateX(-4px);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}

.slogan-bengali-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: 0.025em;
    line-height: 1.5;
    font-family: 'SolaimanLipi', 'Kalpurush', sans-serif;
    white-space: nowrap;
    text-shadow: none;
    position: relative;
    z-index: 1;
    font-style: normal;
    transform: none;
    filter: none;
}

/* Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes shimmer {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes shimmerRight {
    0% {
        transform: translate(50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(50%, -50%) rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .slogan-bengali-text {
        font-size: 0.7rem;
    }

    .slogan-english-text {
        font-size: 0.75rem;
    }

    .slogan-bengali-badge {
        padding: 0.4rem 0.75rem;
    }

    .slogan-english-badge {
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 768px) {
    .slogan-bengali-badge,
    .slogan-english-badge {
        display: none;
    }

    .header-logo-main {
        height: 3.5rem;
    }
}

/* Remove box shadows from all elements except footer */
.shadow-lg,
.shadow-xl,
.shadow-2xl,
.shadow-md,
.shadow-sm,
.hover\:shadow-lg:hover,
.hover\:shadow-xl:hover,
.hover\:shadow-2xl:hover,
.hover\:shadow-md:hover,
.hover\:shadow-sm:hover {
    box-shadow: none !important;
}

/* Keep shadows only for footer */
footer .shadow-lg,
footer .shadow-xl,
footer .shadow-2xl,
footer .shadow-md,
footer .shadow-sm,
footer .hover\:shadow-lg:hover,
footer .hover\:shadow-xl:hover,
footer .hover\:shadow-2xl:hover,
footer .hover\:shadow-md:hover,
footer .hover\:shadow-sm:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Remove header shadow */
.header-shadow {
    box-shadow: none !important;
}

/* Custom Color Override for Header - Replace all blue colors with #070788 */
.bg-blue-400:not(#sideMobileMenu *),
.bg-blue-500:not(#sideMobileMenu *),
.bg-blue-600:not(#sideMobileMenu *),
.bg-blue-700:not(#sideMobileMenu *),
.bg-blue-800:not(#sideMobileMenu *) {
  background-color: #070788 !important;
}

.hover\:bg-blue-400:hover:not(#sideMobileMenu *),
.hover\:bg-blue-500:hover:not(#sideMobileMenu *),
.hover\:bg-blue-600:hover:not(#sideMobileMenu *),
.hover\:bg-blue-700:hover:not(#sideMobileMenu *),
.hover\:bg-blue-800:hover:not(#sideMobileMenu *) {
  background-color: #05055f !important;
}

/* Additional mobile navigation color overrides - EXCLUDE mobile side menu */
button:hover[class*="hover:bg-blue"]:not(#sideMobileMenu *),
a:hover[class*="hover:bg-blue"]:not(#sideMobileMenu *) {
  background-color: #05055f !important;
}

/* Mobile navigation container - Clean white UI */
.mobile-nav-container,
#mobileNavbar {
  display: none;
  background-color: rgb(255, 255, 255) !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* Mobile Header Improvements - Removed (now in layout.blade.php inline styles) */

/* Mobile Quick Access Section - Hidden (now inside side menu) */
.mobile-quick-access-section,
#mobileQuickAccess {
  display: none !important;
}

/* Force all Tailwind blue colors to theme color - EXCLUDE mobile menu */
[class*="bg-blue"]:not(.border-blue-600):not(#sideMobileMenu *),
[class*="hover:bg-blue"]:hover:not(.border-blue-600):not(#sideMobileMenu *),
button[class*="bg-blue"]:not(.border-blue-600):not(#sideMobileMenu *),
button[class*="hover:bg-blue"]:hover:not(.border-blue-600):not(#sideMobileMenu *) {
  background-color: #070788 !important;
}

/* Exception: Allow standard blue for outlined buttons with border-blue-600 */
.border-blue-600[class*="hover:bg-blue"]:hover {
  background-color: #2563eb !important;
}

/* Mobile menu buttons - Clean gray UI */
.mobile-home-btn,
.mobile-hamburger-btn {
  background-color: transparent !important;
  color: #374151 !important;
}

.mobile-home-btn:hover,
.mobile-hamburger-btn:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

/* Override blue text colors */
.text-blue-600,
.text-blue-100,
.text-blue-400,
.text-blue-500,
.text-blue-700,
.text-blue-800 {
  color: #070788 !important;
}

.hover\:text-blue-600:hover,
.hover\:text-blue-400:hover,
.hover\:text-blue-500:hover {
  color: #05055f !important;
}

/* Social media icon overrides */
.w-10.bg-blue-600,
.w-10.bg-blue-400,
.w-10.bg-blue-700 {
  background-color: #070788 !important;
}

.w-10.bg-blue-600:hover,
.w-10.bg-blue-400:hover,
.w-10.bg-blue-700:hover {
  background-color: #05055f !important;
}

/* Final override for any remaining blue elements - ensuring theme consistency */

/* Force all Tailwind blue background colors to theme color - FINAL OVERRIDE */
.bg-blue-50, .bg-blue-100, .bg-blue-200, .bg-blue-300,
.bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-blue-700,
.bg-blue-800, .bg-blue-900 {
  background-color: #070788 !important;
}

/* Exception: Keep white background for mobile side menu */
#sideMobileMenu,
#sideMobileMenu .bg-white,
#sideMobileMenu .bg-blue-50,
#sideMobileMenu .bg-blue-100 {
  background-color: white !important;
}

/* Force all Tailwind blue text colors to theme color - FINAL OVERRIDE */
.text-blue-50, .text-blue-100, .text-blue-200, .text-blue-300, 
.text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, 
.text-blue-800, .text-blue-900 {
  color: #070788 !important;
}

/* Force all Tailwind blue hover states to theme color - FINAL OVERRIDE */
.hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover, .hover\:bg-blue-200:hover, .hover\:bg-blue-300:hover,
.hover\:bg-blue-400:hover, .hover\:bg-blue-500:hover, .hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover, .hover\:bg-blue-900:hover {
  background-color: #05055f !important;
}

.hover\:text-blue-50:hover, .hover\:text-blue-100:hover, .hover\:text-blue-200:hover, .hover\:text-blue-300:hover,
.hover\:text-blue-400:hover, .hover\:text-blue-500:hover, .hover\:text-blue-600:hover, .hover\:text-blue-700:hover,
.hover\:text-blue-800:hover, .hover\:text-blue-900:hover {
  color: #05055f !important;
}

/* Special override for news title hover - highest priority */
h3.hover\:text-blue-600:hover,
.hover\:text-blue-600:hover {
  color: #05055f !important;
}

/* Ensure all text-blue classes use theme color */
span.text-blue-600,
.text-blue-600 {
  color: #070788 !important;
}

/* Mobile Banner Full Width - Break out of container */
@media (max-width: 767px) {
  section.bg-white.py-0 {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
  }
  
  /* Ensure banner takes full viewport width */
  section.bg-white.py-0 > div > div {
    border-radius: 0 !important;
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
  
  /* Keep banner text centered in mobile */
  section.bg-white.py-0 .text-center {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  /* Ensure banner content container stays centered */
  section.bg-white.py-0 .relative.z-10 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  
  /* YouTube Slider Full Width in Mobile */
  section.bg-gray-100.py-6 {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
  }
  
  /* YouTube slider container full width */
  section.bg-gray-100.py-6 > div {
    padding-left: 54px !important;
    padding-right: 54px !important;
    max-width: none !important;
    width: 100% !important;
  }
  
  /* Video slider container full width */
  .video-slider-container {
    padding-left: 54px !important;
    padding-right: 54px !important;
  }
  
  /* YouTube News Card Container Full Width in Mobile */
  section.bg-white.py-12 {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
  }
  
  /* YouTube news card container - centered */
  section.bg-white.py-12 > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: none !important;
    width: 100% !important;
  }
  
  /* Center the multimedia card */
  section.bg-white.py-12 .rounded-2xl {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: calc(100vw - 2rem) !important;
  }
  
  /* Main video player mobile fixes */
  .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
  }
  
  /* Left side video player mobile */
  .lg\:w-1\/2 {
    width: 100% !important;
    margin-top: 0 !important;
    /* padding: 1rem !important; */
  }
  
  /* Video player aspect ratio mobile */
  .relative.aspect-video {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
  }
  
  /* Main video player area */
  #mainVideoPlayer {
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Thumbnail image mobile */
  #mainThumbnail {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* ===== BINODON SECTION MOBILE - IMPROVED UI ===== */

  /* Binodon Slider Container - Full Width */
  .binodon-slider-container {
    margin: 0 !important;
    padding: 0 !important;
    width: calc(100% + 2rem) !important;
    overflow: hidden !important;
    position: relative !important;
    left: -1rem !important;
    border-radius: 0 !important;
  }

  /* Binodon Right Column - Full Width */
  .lg\:w-1\/2.relative {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Binodon Slider - Flex Container */
  .binodon-slider {
    width: 100% !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Binodon Slide - Full Width Single Card */
  .binodon-slide {
    min-width: 100% !important;
    flex-shrink: 0 !important;
    display: block !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
  }

  /* Binodon Slide Grid - Single Column */
  .binodon-slide .grid {
    display: block !important;
    grid-template-columns: unset !important;
  }

  /* Hide all cards except first on mobile */
  .binodon-slide .grid > div:nth-child(n+2) {
    display: none !important;
  }

  /* Binodon Card - Full Width Style */
  .binodon-slide .grid > div:first-child {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  }

  /* Binodon Card Image - Proper Height */
  .binodon-slide .grid > div:first-child img {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* Binodon Card Content */
  .binodon-slide .grid > div:first-child .p-4 {
    padding: 16px !important;
    background: white !important;
  }

  /* Binodon Card Title */
  .binodon-slide .grid > div:first-child h4 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    color: #1f2937 !important;
  }

  /* Binodon Card Description */
  .binodon-slide .grid > div:first-child p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: #6b7280 !important;
  }

  /* Binodon Navigation Buttons - Styled */
  #binodonPrevBtn,
  #binodonNextBtn {
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    z-index: 20 !important;
  }

  #binodonPrevBtn {
    left: 12px !important;
  }

  #binodonNextBtn {
    right: 12px !important;
  }

  #binodonPrevBtn svg,
  #binodonNextBtn svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Binodon Section Layout - Column */
  .flex.flex-col.lg\:flex-row.gap-6 {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  
  /* Shastho (স্বাস্থ্য) Section Mobile - Full Width */
  section .shastho-slider-container {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
  }
  
  /* Shastho slider container mobile */
  .shastho-slider-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  
  /* Shastho slider mobile - one card per view */
  .shastho-slider {
    width: 100% !important;
  }
  
  /* Shastho slide mobile */
  .shastho-slide {
    min-width: 100% !important;
    padding: 0 0.5rem !important;
  }
  
  /* Shastho cards mobile - bigger images and full width */
  .shastho-slide .bg-white {
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
  }
  
  /* Shastho card images mobile - bigger size */
  .shastho-slide .bg-white img {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  
  /* Shastho card content mobile */
  .shastho-slide .bg-white .p-4 {
    padding: 1.5rem !important;
  }
  
  /* Video Cards Full Width in Mobile */
  .video-card-wrapper {
    width: calc(100vw - 2rem) !important;
    max-width: none !important;
    flex: none !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
  
  /* Video Slider Full Width */
  #videoSlider {
    gap: 0 !important;
  }
  
  /* Video Card Styling */
  .video-card {
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Slider Navigation Buttons Mobile Positioning */
  .slider-nav-btn {
    z-index: 20 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Desktop Video Cards - Normal Width */
@media (min-width: 768px) {
  .video-card-wrapper {
    width: 120px !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
}
}

.border-blue-600 {
  border-color: #070788 !important;
}

.hover\:border-blue-700:hover {
  border-color: #070788 !important;
}

.text-blue-100 {
  color: #e0e7ff !important;
}

.text-blue-700,
.hover\:text-blue-700:hover {
  color: #070788 !important;
}

/* Comprehensive hover text blue color overrides */
.hover\:text-blue-100:hover,
.hover\:text-blue-200:hover,
.hover\:text-blue-300:hover,
.hover\:text-blue-400:hover,
.hover\:text-blue-500:hover,
.hover\:text-blue-600:hover,
.hover\:text-blue-700:hover,
.hover\:text-blue-800:hover,
.hover\:text-blue-900:hover {
  color: #070788 !important;
}

/* Class-based hover color override */
a:hover[class*="hover:text-blue"],
h1:hover[class*="hover:text-blue"],
h2:hover[class*="hover:text-blue"],
h3:hover[class*="hover:text-blue"],
h4:hover[class*="hover:text-blue"],
h5:hover[class*="hover:text-blue"],
h6:hover[class*="hover:text-blue"] {
  color: #070788 !important;
}

/* Border color overrides - comprehensive */
.border-blue-100,
.border-blue-200,
.border-blue-300,
.border-blue-400,
.border-blue-500,
.border-blue-600,
.border-blue-700,
.border-blue-800,
.border-blue-900 {
  border-color: #070788 !important;
}

/* Border hover color overrides */
.hover\:border-blue-100:hover,
.hover\:border-blue-200:hover,
.hover\:border-blue-300:hover,
.hover\:border-blue-400:hover,
.hover\:border-blue-500:hover,
.hover\:border-blue-600:hover,
.hover\:border-blue-700:hover,
.hover\:border-blue-800:hover,
.hover\:border-blue-900:hover {
  border-color: #070788 !important;
}

/* Background hover color overrides */
.hover\:bg-blue-50:hover {
  background-color: #f0f8ff !important;
}

.bg-blue-50,
.hover\:bg-blue-50:hover {
  background-color: #f0f8ff !important;
}

.focus\:ring-blue-300:focus {
  --tw-ring-color: #070788 !important;
}

.focus\:ring-blue-500:focus {
  --tw-ring-color: #070788 !important;
}

/* Mobile sidebar header background override - REMOVED (using white background now) */

/* Desktop sliding menu background override */
#desktopSlidingMenu.bg-blue-600 {
  background-color: #070788 !important;
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Emergency Header Fix - Force Show Desktop Header */
header #desktopHeader {
  display: block !important;
  visibility: visible !important;
}

header #desktopNavbar {
  display: flex !important;
  visibility: visible !important;
}

body {
  font-family: 'SolaimanLipi', 'SolaimanLipi Fallback', Arial, sans-serif !important;
  line-height: 1.6;
  color: #333;
  /* background-color: #f9fafb00; */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 1rem;
}

/* Links */
a {
  text-decoration: none;
  color: #2563eb;
  transition: color 0.3s ease;
}

a:hover {
  color: #1d4ed8;
}

/* Utility Classes */
.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

/* Load More Button Styles */
#loadMoreBtn {
  cursor: pointer;
  transition: all 0.3s ease;
}

#loadMoreBtn:hover {
  transform: translateY(-2px);
}

#loadMoreBtn:active {
  transform: translateY(0);
}

/* Additional Content Animation */
#additionalNews, #additionalContent {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

#additionalNews.block, #additionalContent.block {
  opacity: 1;
  transform: translateY(0);
}

#additionalNews:not(.hidden), #additionalContent:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header Styles */
.header-shadow {
  /* Box shadow removed for flat design */
}

/* Social Media Icons */
.social-icon {
  transition: all 0.3s ease !important;
}

.social-icon:hover {
  background-color: inherit !important;
  background-image: inherit !important;
}

/* Navigation Menu */
.nav-item {
  position: relative;
  transition: all 0.3s ease;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #ffffff;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-item:hover::after {
  width: 80%;
}

/* Mobile Menu Animation */
@media (max-width: 768px) {
  #mobileMenu {
    animation: slideDown 0.3s ease-out;
  }
  
  #mobileMenu.hidden {
    animation: slideUp 0.3s ease-out;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Search Bar Animation */
#searchBar {
  animation: slideDown 0.3s ease-out;
}

#searchBar.hidden {
  animation: slideUp 0.3s ease-out;
}

/* Mobile Header Navigation - REMOVED (hamburger moved to mobile header) */

/* Mobile logo styles - defined in media query below */

.mobile-hamburger-btn {
  padding: 0.75rem;
  color: #374151;
  background: transparent;
  border: none;
  transition: all 0.3s;
  border-radius: 0.5rem;
  cursor: pointer;
}

.mobile-hamburger-btn:hover {
  background-color: #f3f4f6;
  color: #111827;
}

/* Default desktop display - Force show */
#desktopHeader {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Desktop Navigation - Blue Background - Show by default */
#desktopNavbar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #070788 !important;
}

/* Mobile Navigation - REMOVED (hamburger moved to mobile header) */

@media (min-width: 768px) {
  /* Desktop: Show desktop header and navbar */
  #desktopHeader {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #desktopNavbar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #070788 !important;
  }

  /* Desktop: Hide mobile navbar */
  #mobileNavbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 768px) {
  /* Mobile: Completely hide desktop header and navbar */
  #desktopTopBar,
  #desktopHeader,
  #desktopNavbar,
  nav#desktopNavbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Remove all blank space from header */
  header {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Mobile navbar removed - hamburger moved to mobile header */

  /* Mobile side menu improvements */
  #sideMobileMenu {
    background-color: white !important;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1) !important;
  }

  #sideMobileMenu .flex-1 {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Mobile menu overlay */
  #mobileMenuOverlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }

  /* Hide all desktop headers on mobile */
  #desktopHeader,
  #desktopNavbar,
  nav[style*="#070788"],
  .bg-gray-100.border-b.border-gray-200 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Mobile Header Display */
  #mobileHeader {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .mobile-header {
    display: block !important;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-bottom: 2px solid #e5e7eb;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .mobile-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
  }

  .mobile-logo-container {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .mobile-logo {
    flex-shrink: 0 !important;
    height: 2.5rem !important;
    width: auto !important;
  }

  .mobile-header-title {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
  }

  .mobile-header-title-main {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    font-family: 'SolaimanLipi', 'SolaimanLipi Fallback', Arial, sans-serif !important;
    line-height: 1.2 !important;
  }

  .mobile-header-title-sub {
    font-size: 0.65rem !important;
    color: #6b7280 !important;
    font-family: 'Georgia', serif !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  .mobile-header-icons {
    display: flex !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
  }

  .mobile-header-icon-btn {
    width: 2.25rem !important;
    height: 2.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.5rem !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
  }

  .mobile-header-icon-btn:active {
    background: #e5e7eb !important;
    transform: scale(0.95) !important;
  }

  .mobile-quick-links {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    background: white !important;
    border-bottom: 1px solid #e5e7eb !important;
    width: 100% !important;
  }

  .mobile-quick-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 0.5rem !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid #d1d5db !important;
    text-decoration: none !important;
    color: #374151 !important;
    transition: all 0.3s ease !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    font-family: 'SolaimanLipi', 'SolaimanLipi Fallback', Arial, sans-serif !important;
    text-align: center !important;
    white-space: nowrap !important;
    position: relative !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-quick-link span {
    display: inline !important;
    white-space: nowrap !important;
  }

  .mobile-quick-link:last-child {
    border-right: none !important;
  }

  .mobile-quick-link:active {
    background: transparent !important;
    opacity: 0.8 !important;
  }

  .mobile-quick-link svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
    flex-shrink: 0 !important;
    min-width: 1.1rem !important;
  }

  /* Mobile content improvements */
  body {
    background-color: #f9fafb !important;
  }

  /* Mobile section titles */
  h2, h3 {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Improve mobile image sizing */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Mobile button improvements */
  button {
    min-height: 2.5rem !important;
    min-width: 2.5rem !important;
  }

  /* Mobile link improvements */
  a {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Desktop: Show all desktop elements */
@media (min-width: 769px) {
  #desktopTopBar,
  #desktopHeader,
  #desktopNavbar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #mobileHeader,
  #mobileNavbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
  
  /* Remove container padding inside nav */
  nav.bg-blue-700 .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Mobile Header - Clean Simple Layout */
@media (max-width: 768px) {
  /* Remove all header spacing and padding */
  header {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Force center social media icons in mobile sidebar */
  #mobileSideMenu .border-t.border-gray-200 {
    text-align: center !important;
  }
  
  #mobileSideMenu .space-x-3 {
    justify-content: center !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Footer Social Media Icons - Force Center on Mobile */
  footer .flex-1.text-center.md\:text-right {
    text-align: center !important;
  }
  
  footer .flex.justify-center.md\:justify-end.space-x-3 {
    justify-content: center !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    width: fit-content !important;
  }
  
  footer .flex.justify-center.md\:justify-end {
    justify-content: center !important;
    margin: 0 auto !important;
  }
  
  /* Remove all white space from nav container */
  nav.bg-blue-700 {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Nav container - remove all extra padding */
  nav .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  
  /* Mobile navbar removed - hamburger moved to mobile header */
}

/* OLD RESPONSIVE DESIGN - REMOVED - See unified mobile responsive section below */

/* ===== ENHANCED VIDEO SLIDER STYLES ===== */

/* Video Card Base Styles - Enhanced */
.video-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
}

.video-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(7, 7, 136, 0.2);
}

/* Video Card Image Container */
.video-card .relative {
  position: relative;
  overflow: visible;
  border-radius: 12px 12px 0 0;
}

.video-card img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.video-card:hover img {
  transform: scale(1.08);
}

/* Enhanced Play Button Styles */
.play-button {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border: 3px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.play-button:hover {
  transform: scale(1.15);
  background: linear-gradient(135deg, #b91c1c, #991b1b);
  border-color: rgba(255, 255, 255, 1);
}

.play-button:active {
  transform: scale(1.05);
}

/* Play Button Overlay Enhancement */
.video-card .absolute.inset-0.bg-black.bg-opacity-30 {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
  transition: all 0.4s ease;
}

.video-card:hover .absolute.inset-0.bg-black.bg-opacity-30 {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
}

/* Top Video Slider Play Button Container Centering */
.video-card .absolute.inset-0.flex.items-center.justify-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 5 !important;
}

/* Modern Red Play Button */
.video-card .w-16.h-16.bg-red-600.rounded-full {
  width: 2rem !important;
  height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #dc2626 !important;
  border-radius: 50% !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

.video-card .w-16.h-16.bg-red-600.rounded-full:hover {
  background-color: #b91c1c !important;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.6) !important;
  transform: scale(1.15) !important;
}

/* Modern Play Icon Styling */
.video-card .play-button svg {
  margin: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  fill: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
}

.video-card .play-button:hover svg {
  color: rgba(255, 255, 255, 1) !important;
  fill: rgba(255, 255, 255, 1) !important;
  transform: scale(1.1) !important;
}

/* Enhanced Video Title Styles */
.video-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 3em;
  font-weight: 600;
  font-size: 0.75rem;
  color: white !important;
  margin-bottom: 0;
  transition: color 0.3s ease;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  visibility: visible !important;
  opacity: 1 !important;
}

.video-card:hover .video-title {
  color: #87ceeb !important;
}

/* Title Overlay Container */
.video-card .relative > a {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10 !important;
  padding: 2.75rem !important;
  display: block !important;
}

/* Enhanced Video Card Wrapper - Perfect 4 cards per slide */
@media (min-width: 1024px) {
  .video-card-wrapper {
    width: calc(25% - 24px) !important; /* Exactly 4 cards per row */
    min-width: calc(25% - 24px) !important;
    max-width: calc(25% - 24px) !important;
    margin: 0 12px !important;
    flex-shrink: 0 !important;
  }

  /* Container padding adjustment for perfect fit */
  .video-slider-container .overflow-hidden {
    padding: 0 !important;
  }

  /* Slider gap adjustment */
  #videoSlider {
    gap: 0 !important;
    justify-content: flex-start !important;
  }
}

/* Tablet Layout - 3 cards per slide */
@media (min-width: 768px) and (max-width: 1023px) {
  .video-card-wrapper {
    width: calc(33.333% - 20px) !important; /* Exactly 3 cards per row */
    min-width: calc(33.333% - 20px) !important;
    max-width: calc(33.333% - 20px) !important;
    margin: 0 10px !important;
    flex-shrink: 0 !important;
  }

  .video-slider-container .overflow-hidden {
    padding: 0 !important;
  }
}

/* Enhanced Slider Navigation Buttons */
.slider-nav-btn {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(255, 255, 255, 0.9);
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(12px);
  transform: translateY(-50%);
}

/* Enhanced Desktop Arrow Positioning */
@media (min-width: 481px) {
  #prevBtn {
    left: 0.5rem !important;
    transform: translateY(-50%) !important;
    width: 52px !important;
    height: 52px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) !important;
  }

  #nextBtn {
    right: 0.5rem !important;
    transform: translateY(-50%) !important;
    width: 52px !important;
    height: 52px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) !important;
  }

  .slider-nav-btn svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    stroke-width: 2 !important;
  }
}

/* Enhanced Navigation Button Hover States */
.slider-nav-btn:hover {
  background: linear-gradient(135deg, #070788, #0f0f9e);
  border-color: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.1);
}

.slider-nav-btn:hover svg {
  stroke: white !important;
  transform: scale(1.1);
}

.slider-nav-btn:active {
  transform: translateY(-50%) scale(1.05);
}

.slider-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.6);
}

.slider-nav-btn:focus {
  outline: none;
  border-color: #070788;
}

/* Navigation Button Icons */
.slider-nav-btn svg {
  transition: all 0.3s ease;
  stroke-width: 2.5;
  color: #374151;
}

/* ===== ENHANCED SECTION STYLING ===== */

/* Enhanced Video Slider Section Container */
section.bg-gray-100.py-6 {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  padding: 0;
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  max-width: 100%;
}

section.bg-gray-100.py-6 > div {
  max-width: 100%;
  padding: 0 !important;
}

section.bg-gray-100.py-6::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(7, 7, 136, 0.03) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(7, 7, 136, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* Enhanced Video Slider Container */
.video-slider-container {
  position: relative;
  z-index: 1;
  padding: 0 3rem;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

/* Enhanced Slider Wrapper */
.video-slider-container .overflow-hidden {
  border-radius: 16px;
  position: relative;
  flex: 1;
}

/* Enhanced Video Slider Grid */
#videoSlider {
  gap: 0;
  padding: 1rem 0;
  display: flex;
  align-items: stretch;
}

/* Video Slider Container - Desktop with proper spacing */
.video-slider-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 3rem;
  margin: 0;
}

/* Enhanced Video Card Wrapper Spacing - Desktop */
.video-card-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
}

/* Enhanced Video Card with Consistent Heights */
.video-card {
  height: 85%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin: 0 !important;
  padding: 0 !important;
}

.video-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.video-card .relative {
  flex-shrink: 0;
  height: 200px;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

.video-card .p-4 {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 120px;
}

/* Video Slider Responsive */
@media (max-width: 1280px) {
  .video-slider-container {
    padding: 0 1rem;
  }
}

/* ===== ENHANCED RESPONSIVE DESIGN ===== */

/* Tablet Responsive (768px and below) */
@media (max-width: 768px) {
  /* Video Slider Section - Mobile */
  section.py-4.md\:py-6 {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Container for video slider - Mobile */
  section.py-4.md\:py-6 > .container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Video Slider Container - Mobile */
  .video-slider-container {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Hide navigation buttons on mobile */
  .slider-nav-btn {
    display: none !important;
  }

  /* YouTube Video Slider Section - Tablet */
  section[style*="margin-left: 54px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 15px !important;
    padding: 0 !important;
  }

  /* Video Card - Full Width on Mobile */
  .video-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px;
  }

  .video-card img {
    height: 200px;
    width: 100%;
  }

  .video-card-wrapper {
    width: calc(100% - 1.5rem) !important;
    min-width: calc(100% - 1.5rem) !important;
    max-width: calc(100% - 1.5rem) !important;
    margin: 0 auto 1rem auto !important;
    padding: 0 !important;
  }

  .video-title {
    font-size: 0.95rem;
    line-height: 1.4;
    max-height: 2.8em;
    margin-bottom: 0.5rem;
  }

  /* Tablet Navigation Buttons */
  .slider-nav-btn {
    width: 40px;
    height: 40px;
    border-width: 1.5px;
  }

  .slider-nav-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2.5;
  }

  /* Tablet Play Button */
  .video-card .w-16.h-16.bg-red-600.rounded-full {
    width: 3rem !important;
    height: 3rem !important;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)) !important;
    backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  }

  .video-card .play-button svg {
    width: 1rem !important;
    height: 1rem !important;
    margin-left: 0.1rem !important;
  }

  /* Tablet Title Overlay Padding */
  .video-card .relative > a {
    padding: 1.5rem !important;
  }
}

/* ===== UNIFIED MOBILE RESPONSIVE DESIGN (640px and below) ===== */
@media (max-width: 640px) {
  /* ===== GLOBAL MOBILE STYLES ===== */

  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden !important;
  }

  .container {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ===== CONTAINER & SECTION PADDING ===== */

  /* Containers - minimal padding */
  .container,
  .container.mx-auto,
  .container.mx-auto.px-4,
  .container.mx-auto.px-6 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Sections - minimal padding */
  section {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* ===== HEADER & NAVIGATION ===== */

  .header-date {
    display: none !important;
  }

  .header-logo {
    height: 2.5rem !important;
  }

  .social-icons {
    gap: 0.5rem !important;
  }

  .social-icon {
    width: 1.75rem !important;
    height: 1.75rem !important;
  }

  .social-icon svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* ===== VIDEO SLIDER SECTION ===== */

  section[style*="margin-left: 54px"] {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    margin-top: 1rem !important;
  }

  .video-card {
    width: 200px !important;
    margin: 0 !important;
  }

  .video-card-wrapper {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    margin: 0 !important;
  }

  .video-card img {
    height: 140px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .video-slider-title {
    font-size: 1.125rem !important;
    padding: 0.5rem !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .video-title {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    max-height: 2.6em !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .video-card .relative > a {
    padding: 1.5rem !important;
    margin: 0 !important;
  }

  .slider-nav-btn {
    width: 36px !important;
    height: 36px !important;
    border-width: 1px !important;
    margin: 0 !important;
  }

  .slider-nav-btn svg {
    width: 1rem !important;
    height: 1rem !important;
    stroke-width: 2 !important;
    margin: 0 !important;
  }

  .video-card .w-16.h-16.bg-red-600.rounded-full {
    width: 1.75rem !important;
    height: 1.75rem !important;
    margin: 0 !important;
  }

  .video-card .play-button svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
    margin: 0 !important;
  }

  /* ===== NEWS CARDS & IMAGES ===== */

  .news-card,
  .news-item {
    padding: 0.5rem !important;
    margin: 0 !important;
    margin-bottom: 0.5rem !important;
  }

  .news-card img,
  .news-item img {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
  }

  .news-card h3,
  .news-card h4,
  .news-card p,
  .news-item h3,
  .news-item h4,
  .news-item p {
    padding: 0.25rem !important;
    margin: 0 !important;
  }

  /* ===== THUMBNAILS & TITLES ===== */

  .thumbnail,
  .video-thumbnail {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ===== GRID & FLEX ===== */

  .grid {
    gap: 0.5rem !important;
  }

  .grid > * {
    margin: 0 !important;
  }

  .flex {
    gap: 0.5rem !important;
  }

  .flex > * {
    margin: 0 !important;
  }

  /* ===== CARDS & BACKGROUNDS ===== */

  .bg-white,
  .rounded-lg,
  .rounded-xl {
    /* padding: 0.5rem !important; */
    margin: 0 !important;
  }

  /* ===== TYPOGRAPHY ===== */

  h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0.25rem !important;
  }

  h2 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0.25rem !important;
  }

  h3 {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0.25rem !important;
  }

  h4 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0.25rem !important;
  }

  p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0.25rem !important;
  }

  /* ===== IMAGES & BUTTONS ===== */

  img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  button {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
  }

  /* ===== SPACING UTILITIES ===== */

  

  .p-6 {
    padding: 1rem !important;
  }

  .gap-6 {
    gap: 1rem !important;
  }

  .gap-8 {
    gap: 1.5rem !important;
  }

  .mb-8 {
    margin-bottom: 1.5rem !important;
  }

  .mb-6 {
    margin-bottom: 1rem !important;
  }

  .mb-4 {
    margin-bottom: 0.75rem !important;
  }

  /* ===== GRID LAYOUTS ===== */

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .grid.grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  /* ===== FLEX LAYOUTS ===== */

  .flex.flex-col.md\:flex-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .flex.flex-wrap {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* ===== FOOTER ===== */

  footer {
    padding: 1rem 0.5rem !important;
  }

  footer .flex.flex-wrap.md\:flex-nowrap {
    flex-direction: column !important;
    text-align: center !important;
  }

  footer .flex-1 {
    width: 100% !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  /* Mobile container full width setup */
  .container.mx-auto.px-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Video slider container - full width */
  .video-slider-container {
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Slider wrapper - full width on mobile */
  .overflow-hidden {
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Video cards - full width on mobile */
  .video-card-wrapper {
    width: calc(100vw - 24px) !important;
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 6px !important;
    flex-shrink: 0 !important;
  }

  .video-card {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Video slider wrapper - ensure single card display */
  #videoSlider {
    display: flex !important;
    width: max-content !important;
  }

  /* Container for video slider section */
  .bg-gray-100 .container {
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  .video-card img {
    height: 200px !important;
    width: 100% !important;
    object-fit: cover;
  }
  
  .video-title {
    font-size: 1rem !important;
    -webkit-line-clamp: 2;
    max-height: 2.8em;
    padding: 0 1rem;
  }
  
  .play-button {
    width: 4rem !important;
    height: 4rem !important;
  }
  
  .play-button svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  /* MOBILE ARROW BUTTONS - POSITIONED RELATIVE TO SLIDER */
  body .bg-gray-100 .video-slider-container .slider-nav-btn,
  body .bg-gray-100 .video-slider-container #prevBtn,
  body .bg-gray-100 .video-slider-container #nextBtn {
    position: absolute !important;
    top: 50% !important;
    width: 50px !important;
    height: 50px !important;
    z-index: 999 !important;
    background: rgba(255, 255, 255, 0.985) !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    backdrop-filter: blur(4px) !important;
  }

  body .bg-gray-100 .video-slider-container #prevBtn {
    left: 10px !important;
  }

  body .bg-gray-100 .video-slider-container #nextBtn {
    right: 10px !important;
  }

  body .bg-gray-100 .video-slider-container .slider-nav-btn svg {
    width: 1.3rem !important;
    height: 1.3rem !important;
    color: #374151 !important;
    stroke: #374151 !important;
    stroke-width: 3 !important;
    fill: none !important;
  }

  body .bg-gray-100 .video-slider-container .slider-nav-btn:hover {
    background: #3b82f6 !important;
    transform: translateY(-50%) scale(1.1) !important;
    border-color: #3b82f6 !important;
  }

  body .bg-gray-100 .video-slider-container .slider-nav-btn:hover svg {
    color: white !important;
    stroke: white !important;
  }

  body .bg-gray-100 .video-slider-container .slider-nav-btn:active {
    transform: translateY(-50%) scale(0.9) !important;
  }

  /* Force display on all states */
  .bg-gray-100 .slider-nav-btn,
  section .slider-nav-btn,
  .relative .slider-nav-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 480px) {
  /* Mobile Side Menu Scrolling */
  #mobileSideMenu {
    height: 100vh;
  }
  
  /* Hide slider arrows when mobile menu is open */
  body:has(#mobileSideMenu.translate-x-0) .slider-nav-btn {
    display: none !important;
  }
  
  /* Shastho Section - Keep Slider Functionality on Small Mobile */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-4 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* Ensure slider navigation remains functional */
  .shastho-slider-container .absolute {
    position: absolute !important;
  }
  
  #shasthoPrevBtn,
  #shasthoNextBtn {
    position: absolute !important;
    z-index: 10 !important;
  }
  
  /* YouTube Slider Full Width in Mobile - Like Banner */
  section.bg-gray-100.py-6 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

 
  section.bg-gray-100.py-6 > div {
    padding-left: 54px !important;
    padding-right: 54px !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* Video Cards Mobile - Bigger width + half card visible */
  .video-card-wrapper {
    width: calc(80vw - 100px) !important;
    max-width: none !important;
    flex: none !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }

  /* Video Slider Full Width */
  #videoSlider {
    gap: 0 !important;
  }

  /* Video Card Styling */
  .video-card {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Video slider container mobile optimization */
  .video-slider-container {
    padding-left: 54px !important;
    padding-right: 54px !important;
  }

  /* Slider wrapper - allow arrows to overflow */
  .video-slider-container .overflow-hidden {
    overflow: visible !important;
  }

  /* But keep horizontal overflow hidden for slider */
  .video-slider-container .overflow-hidden {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  
  /* Navigation buttons mobile positioning - enhanced */
  .video-slider-container .slider-nav-btn {
    width: 44px !important;
    height: 44px !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    z-index: 25 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  .video-slider-container #prevBtn {
    left: 4px !important;
  }
  
  .video-slider-container #nextBtn {
    right: 4px !important;
  }
  
  /* Extra specificity for mobile buttons */
  body .bg-gray-100 .video-slider-container #prevBtn {
    left: 4px !important;
  }
  
  body .bg-gray-100 .video-slider-container #nextBtn {
    right: 4px !important;
  }
  
  /* Force mobile YouTube slider button positions with highest priority */
  section.bg-gray-100.py-6 .video-slider-container button#prevBtn {
    left: 4px !important;
    position: absolute !important;
  }
  
  section.bg-gray-100.py-6 .video-slider-container button#nextBtn {
    right: 4px !important;
    position: absolute !important;
  }
  
  /* Ensure video slider container allows overflow for buttons */
  .video-slider-container {
    position: relative !important;
    overflow: visible !important;
  }
  
  /* Force navigation buttons to appear above everything */
  #prevBtn, #nextBtn {
    z-index: 999 !important;
    position: absolute !important;
  }
  
  /* Specific override for right button positioning - symmetrical with left */
  section .video-slider-container button#nextBtn,
  .bg-gray-100 button#nextBtn {
    right: 4px !important;
    z-index: 999 !important;
  }
}

/* Desktop Video Cards - Normal Width */
@media (min-width: 768px) {
  .video-card-wrapper {
    width: 320px !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
  
  section.bg-gray-100.py-6 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  section.bg-gray-100.py-6 > div {
    padding-left: 54px !important;
    padding-right: 54px !important;
  }
}

  #mobileSideMenu .flex-1.overflow-y-auto {
    max-height: calc(100vh - 80px); /* Subtract header height */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
  }

  /* Webkit scrollbar for mobile menu */
  #mobileSideMenu .flex-1.overflow-y-auto::-webkit-scrollbar {
    width: 4px;
  }

  #mobileSideMenu .flex-1.overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
  }

  #mobileSideMenu .flex-1.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 2px;
  }

  #mobileSideMenu .flex-1.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
  }
  
  /* Mobile Side Menu Header - Logo and Close Button Layout */
  #mobileSideMenu .bg-blue-700.text-white {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem !important;
  }
  
  #mobileSideMenu .bg-blue-700 .flex.items-center {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
  }
  
  #mobileSideMenu .bg-blue-700 img {
    height: 2rem !important;
    width: auto !important;
  }
  
  #mobileSideMenu .bg-blue-700 button {
    flex-shrink: 0 !important;
    padding: 0.5rem !important;
    margin-left: auto !important;
  }
  
  /* Mobile Side Menu Social Media Icons - Force Perfect Center */
  #mobileSideMenu .mt-8.px-4.py-4.border-t.border-gray-200 {
    padding: 1.5rem 1rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #mobileSideMenu .flex.justify-center.space-x-3 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.875rem !important;
    flex-wrap: nowrap !important;
    margin: 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateX(0) !important;
  }
  
  #mobileSideMenu .flex.justify-center.space-x-3 a {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  
  /* Additional mobile centering for social icons */
  @media (max-width: 480px) {
    #mobileSideMenu .flex.justify-center.space-x-3 {
      justify-content: center !important;
      text-align: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
      display: flex !important;
      align-items: center !important;
    }
  }
}

/* ===== ENHANCED ANIMATIONS & INTERACTIONS ===== */

/* Smooth scrolling for slider */
.video-slider {
  scroll-behavior: smooth;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading State Animation */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.video-card.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}

/* Enhanced Focus States */
.video-card:focus-within {
  outline: 2px solid #070788;
  outline-offset: 4px;
  border-color: #070788;
}

/* Smooth Transitions for All Elements */
.video-card * {
  transition: inherit;
}

/* Enhanced Hover Effects for Better UX */
.video-card-wrapper:hover {
  z-index: 10;
}

/* Accessibility Improvements */
.slider-nav-btn:focus-visible {
  outline: 2px solid #070788;
  outline-offset: 2px;
}

.play-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Performance Optimizations */
.video-card,
.slider-nav-btn,
.play-button {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ===== ENHANCED TYPOGRAPHY & COLORS ===== */

/* Video Card Content Enhancement */
.video-card .p-4 {
  background: transparent;
  border-top: none;
  padding: 0 !important;
}

/* Duration Badge Modern Styling */
.video-card .absolute.bottom-2.right-2 {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8));
  backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Enhanced Color Scheme */
:root {
  --video-primary: #070788;
  --video-primary-hover: #0f0f9e;
  --video-secondary: #1f2937;
  --video-accent: #dc2626;
  --video-accent-hover: #b91c1c;
  --video-bg: #ffffff;
  --video-bg-hover: #fafafa;
  --video-border: rgba(0, 0, 0, 0.08);
  --video-border-hover: rgba(7, 7, 136, 0.2);
}

/* Apply Enhanced Color Variables */
.video-card {
  background: var(--video-bg);
  border-color: var(--video-border);
}

.video-card:hover {
  border-color: var(--video-border-hover);
}

.video-title {
  color: white !important;
}

.video-card:hover .video-title {
  color: #87ceeb !important;
}

.play-button {
  background: linear-gradient(135deg, var(--video-accent), var(--video-accent-hover));
}

.play-button:hover {
  background: linear-gradient(135deg, var(--video-accent-hover), #991b1b);
}

/* Footer Mobile Responsive Fixes */
@media (max-width: 768px) {
  /* Footer layout mobile optimization */
  footer .flex.flex-wrap.md\:flex-nowrap {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  /* Footer columns mobile stacking */
  footer .flex-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
    padding: 0 1rem !important;
  }
  
  /* Footer social media section mobile centering */
  footer .mb-6 {
    text-align: center !important;
  }
  
  footer .mb-6 h4 {
    text-align: center !important;
    margin-bottom: 1rem !important;
  }
  
  /* Footer social media icons - force perfect center */
  footer .flex.justify-center.md\:justify-end.space-x-3.mb-4 {
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 auto 1rem auto !important;
    width: fit-content !important;
    gap: 0.75rem !important;
  }
  
  /* Mobile Social Media Icon Fix - Ensure icons are visible */
  @media (max-width: 768px) {
    footer .w-10.h-10 {
      width: 2.5rem !important;
      height: 2.5rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 50% !important;
    }
    
    footer .w-10.h-10 svg {
      width: 1.25rem !important;
      height: 1.25rem !important;
      color: white !important;
      fill: currentColor !important;
    }
    
    /* Mobile Sidebar Social Media Icons Fix */
    .mobile-menu .w-10.h-10 {
      width: 2.5rem !important;  
      height: 2.5rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 50% !important;
    }
    
    .mobile-menu .w-10.h-10 svg {
      width: 1.25rem !important;
      height: 1.25rem !important;
      color: white !important;
      fill: currentColor !important;
    }
    
    /* Specific Background Colors for Mobile Icons */
    footer .bg-blue-600, .mobile-menu .bg-blue-600 {
      background-color: #2563eb !important;
    }
    
    footer .bg-blue-400, .mobile-menu .bg-blue-400 {
      background-color: #60a5fa !important;
    }
    
    footer .bg-red-600, .mobile-menu .bg-red-600 {
      background-color: #dc2626 !important;
    }
    
    footer .bg-blue-700, .mobile-menu .bg-blue-700 {
      background-color: #1d4ed8 !important;
    }
    
    /* Instagram Gradient Fix for Mobile */
    footer .bg-gradient-to-br.from-purple-600.via-pink-600.to-orange-500,
    .mobile-menu .bg-gradient-to-br.from-purple-600.via-pink-600.to-orange-500 {
      background: linear-gradient(135deg, #9333ea 0%, #ec4899 50%, #f97316 100%) !important;
    }
    
    /* Force icon visibility on very small screens */
    @media (max-width: 480px) {
      footer .w-10.h-10, .mobile-menu .w-10.h-10 {
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
        flex-shrink: 0 !important;
      }
      
      /* Extra mobile fix for social media containers */
      footer .space-x-3, .mobile-menu .space-x-3 {
        gap: 0.75rem !important;
      }
      
      footer .space-x-3 > * + *, .mobile-menu .space-x-3 > * + * {
        margin-left: 0 !important;
      }
    }
  }
  
  /* Universal Social Media Icon Fix */
  a[class*="w-10"][class*="h-10"][class*="rounded-full"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }
  
  a[class*="w-10"][class*="h-10"][class*="rounded-full"] svg {
    flex-shrink: 0 !important;
  }
  
  /* Instagram Icon Stroke Fix */
  a[class*="bg-gradient"] svg[fill="none"] {
    stroke: white !important;
    stroke-width: 2 !important;
  }
  
  a[class*="bg-gradient"] svg circle[fill="currentColor"] {
    fill: white !important;
  }
  
  /* Footer logo centering */
  footer .flex.justify-center.md\:justify-end.mb-4 {
    justify-content: center !important;
    margin: 0 auto 1rem auto !important;
  }
  
  /* Footer border adjustments on mobile */
  footer .border-r.border-gray-400 {
    border-right: none !important;
    border-bottom: 1px solid #9ca3af !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  footer .border-r.border-gray-400:last-child {
    border-bottom: none !important;
  }
}

/* Custom scrollbar for webkit browsers */
.video-slider-container::-webkit-scrollbar {
  display: none;
}

.video-slider-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Hero News Section Styles */
.news-card {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.news-card:hover {
  transform: translateY(-2px);
}

.news-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.news-card:hover:before {
  left: 100%;
}

.news-title {
  transition: color 0.3s ease;
}

/* Hero News Details Section */
#heroNewsDetails {
  transition: all 0.3s ease;
}

#heroNewsImage {
  transition: all 0.3s ease;
}

/* Border Animation for News Cards */
.news-card.border-t-4 {
  position: relative;
  border-top: 4px solid #6b7280; /* gray-500 default */
  transition: border-color 0.3s ease;
}

.news-card:hover.border-t-4 {
  border-top-color: #dc2626; /* red-600 on hover */
}

/* Border Animation for News Cards with border-t-2 */
.news-card.border-t-2 {
  position: relative;
  transition: all 0.3s ease;
}

.news-card:hover.border-t-2 {
  border-top-color: #dc2626 !important; /* red-600 on hover */
}

/* Ensure active card overrides hover state */
.news-card.active-card.border-t-2 {
  border-top-color: #dc2626 !important; /* red-600 for active - higher specificity */
}

.news-card.active-card.border-t-2:hover {
  border-top-color: #b91c1c !important; /* darker red on hover for active card */
}

/* Active Card Styling - Enhanced */
.news-card.active-card {
  border-top-color: #dc2626 !important; /* red-600 for active */
  background-color: #fef2f2 !important; /* red-50 background for active */
  transform: translateY(-2px) !important; /* slight lift */
}

.news-card.active-card .news-title {
  color: #dc2626 !important; /* red-600 for active title */
  font-weight: 600 !important; /* make title bolder */
}

.news-card.active-card .news-excerpt {
  color: #374151 !important; /* darker gray for better readability on red background */
}

/* Additional styling for news excerpts */
.news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar Styles */
.sticky {
  position: sticky;
}



/* News Item Responsive */
@media (max-width: 768px) {
  .news-item {
    margin-bottom: 1rem;
  }
  
  #newsHoverDisplay {
    margin-top: 1rem;
    padding: 1rem;
  }
  
  #newsHoverDisplay .flex {
    flex-direction: column;
  }
  
  #newsHoverDisplay img {
    height: 200px;
    margin-bottom: 1rem;
  }
}

@media (max-width: 640px) {
  .lg\:w-3\/4 {
    width: 100%;
  }
  
  .lg\:w-1\/4 {
    width: 100%;
    margin-top: 2rem;
  }
  
  .sticky {
    position: relative;
  }
  
  .grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  /* Main Hero News Section Mobile */
  .mb-8.flex.flex-col.md\:flex-row.gap-6 {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .md\:w-1\/3 {
    width: 100% !important;
    order: 2;
  }
  
  .md\:w-2\/3 {
    width: 100% !important;
    order: 1;
  }
  
  #heroNewsImage {
    height: 250px !important;
    object-fit: cover;
  }
  
  .grid.grid-cols-1.md\:grid-cols-3.gap-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

/* Advertisement Styles */
.bg-red-600 {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.bg-blue-600 {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

/* Latest News Items Hover Effect */
.divide-y > div:hover {
  background: linear-gradient(90deg, #f8fafc, #f1f5f9);
}

/* Hero Image Overlay Enhancement */
.bg-gradient-to-t {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0.3) 80%,
    transparent 100%
  );
}

/* YouTube Video Container Styles */
.youtube-container {
  background: #28282a;
}

.video-card {
  transition: transform 0.3s ease;
}

.video-card:hover {
  transform: translateY(-5px);
}

.youtube-video-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0.5rem;
  overflow: hidden;
}

.youtube-video-card:hover {
  transform: translateY(-2px);
}

.youtube-video-card.group:hover img {
  transform: scale(1.05);
}

.youtube-video-card h5 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  height: 2.6em;
  text-align: left !important;
  padding: 0.5rem !important;
  margin: 0.75rem 0 !important;
  width: 100% !important;
  position: relative !important;
  bottom: 0 !important;
}

/* YouTube Video Card Play Button Centering - Enhanced */
.youtube-video-card .absolute.inset-0.flex.items-center.justify-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Additional play button container centering */
.youtube-video-card .absolute.inset-0 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.youtube-video-card .w-8.h-8.bg-red-600.rounded-full.flex.items-center.justify-center {
  width: 2rem !important;
  height: 2rem !important;
  background-color: #dc2626 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.youtube-video-card .w-8.h-8 svg {
  margin-left: 0.125rem !important;
  width: 0.75rem !important;
  height: 0.75rem !important;
  color: white !important;
  flex-shrink: 0 !important;
}

/* Main Video Player Styles */
.aspect-video {
  aspect-ratio: 16 / 9;
}

#mainVideoPlayer {
  position: relative;
  overflow: hidden;
}

#mainPlayButton {
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* position: relative !important; */
}

#mainPlayButton:hover {
  transform: scale(1.1);
  background-color: #dc2626 !important;
}

/* Main Play Button Container Centering */
#defaultThumbnail .absolute.inset-0.bg-black.bg-opacity-40.flex.items-center.justify-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* YouTube Embed Styles */
#youtubeEmbed iframe {
  border: none;
  border-radius: 0;
}

/* Video Grid Responsive */
@media (max-width: 1024px) {
  .lg\:w-2\/3 {
    width: 100%;
  }
  
  .lg\:w-1\/3 {
    width: 100%;
    margin-top: 1rem;
  }
  
  .lg\:flex-row {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
  }
  
  .video-card h5 {
    font-size: 0.875rem;
  }
  
  .youtube-video-card h5 {
    font-size: 0.875rem;
  }
}

/* Ring Animation for Active Video Card */
.youtube-video-card.ring-2 {
  animation: pulseRing 2s infinite;
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Smooth transitions for video loading */
#defaultThumbnail,
#youtubeEmbed {
  transition: opacity 0.3s ease-in-out;
}

#defaultThumbnail.hidden,
#youtubeEmbed.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Custom scrollbar for video grid area */
.video-grid-container::-webkit-scrollbar {
  width: 4px;
}

.video-grid-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.video-grid-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.video-grid-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Gradient overlay for section title */
.youtube-section-title {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Footer Styles */
footer {
  background-color: #e5e7eb; /* Light gray background */
}

/* Hide Clean Bottom Footer Bar with Full Width Background */
footer .w-full.bg-gradient-to-r.from-gray-900.to-gray-800 {
  display: none !important;
}

footer h3, footer h4 {
  color: #1f2937; /* Dark gray for headings */
}

footer .border-b-2 {
  border-color: #ef4444; /* Red underline for section titles */
}

footer a:hover {
  color: #dc2626 !important; /* Red hover color for links */
  text-decoration: none;
}

/* Social Media Icons Hover Effects */
footer .bg-blue-600:hover {
  background-color: #2563eb !important;
  transform: translateY(-2px);
}

footer .bg-blue-400:hover {
  background-color: #3b82f6 !important;
  transform: translateY(-2px);
}

footer .bg-blue-700:hover {
  background-color: #1d4ed8 !important;
  transform: translateY(-2px);
}

footer .bg-red-600:hover {
  background-color: #dc2626 !important;
  transform: translateY(-2px);
}

footer .bg-gradient-to-br:hover {
  transform: translateY(-2px);
}

/* Footer Menu Vertical Lines Centered Between Sections */
footer .border-r {
  position: relative;
  border-right: none;
}

footer .border-r::after {
  content: '';
  position: absolute;
  right: -36px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 70%;
  background-color: #6b7280;
  z-index: 1;
}

/* Hide line for last item */
footer div:last-child::after {
  display: none !important;
}

/* Video Modal Styles */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.video-modal.active {
  opacity: 1;
  visibility: visible;
}

.video-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.8);
  transition: transform 0.3s ease;
  z-index: 10000;
}

.video-modal.active .video-modal-content {
  transform: scale(1);
}

.video-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.video-modal-close:hover {
  background: rgba(220, 38, 38, 0.8);
  transform: scale(1.1);
}

.video-modal-player {
  position: relative;
  width: 100%;
  background: #000;
}

.video-aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-aspect-ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-modal-info {
  padding: 20px;
  background: linear-gradient(135deg, #1f2937, #374151);
}

.video-modal-info h3 {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.4;
}

.video-modal-info p {
  color: #d1d5db;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

/* Video Modal Responsive */
@media (max-width: 768px) {
  .video-modal-content {
    width: 95%;
    max-height: 85vh;
    margin: 0 10px;
  }
  
  .video-modal-close {
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
  }
  
  .video-modal-close svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .video-modal-info {
    padding: 15px;
  }
  
  .video-modal-info h3 {
    font-size: 1.1rem;
  }
  
  .video-modal-info p {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .video-modal-content {
    width: 98%;
    max-height: 80vh;
    border-radius: 8px;
  }
  
  .video-modal-close {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
  }
  
  .video-modal-close svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .video-modal-info {
    padding: 12px;
  }
  
  .video-modal-info h3 {
    font-size: 1rem;
  }
  
  .video-modal-info p {
    font-size: 0.75rem;
  }
}

/* Animation for modal appearance */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.video-modal.active .video-modal-content {
  animation: modalFadeIn 0.3s ease-out;
}

/* Ensure modal is above everything */
.video-modal {
  z-index: 999999 !important;
}

.video-modal-overlay {
  z-index: 999998 !important;
}

.video-modal-content {
  z-index: 1000000 !important;
}

.video-modal-close {
  z-index: 1000001 !important;
}

/* Comprehensive Mobile Responsive Design */

/* Banner Section Mobile */
@media (max-width: 768px) {
  .bg-white.py-0 .container {
    padding: 1rem !important;
  }
  
  .bg-white.py-0 h1 {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .bg-white.py-0 h2 {
    font-size: 1.25rem !important;
  }
}

/* News Box Section Mobile */
@media (max-width: 768px) {
  .border-16 {
    border-width: 8px !important;
    padding: 1rem !important;
  }
  
  .grid.grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .grid.grid-cols-2 > div {
    margin-bottom: 1rem;
  }
}

/* Hero News Section Mobile */
@media (max-width: 768px) {
  .lg\:w-3\/4 {
    width: 100% !important;
  }
  
  .lg\:w-1\/4 {
    width: 100% !important;
    margin-top: 2rem;
  }
  
  .mb-8.flex.flex-col.md\:flex-row.gap-6 {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  
  .md\:w-1\/3 {
    width: 100% !important;
    order: 2;
  }
  
  .md\:w-2\/3 {
    width: 100% !important;
    order: 1;
  }
  
  #heroNewsImage {
    height: 250px !important;
  }
  
  .grid.grid-cols-1.md\:grid-cols-3.gap-4 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* প্রত্যাশা মাল্টিমিডিয়া Mobile Responsive */
@media (max-width: 768px) {
  /* YouTube News Card Container - Full Width on Mobile */
  /* Target the multimedia section specifically */
  section.bg-white.py-12:nth-of-type(6) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
  }
  
  section.bg-white.py-12:nth-of-type(6) .container.mx-auto.px-6 {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  section.bg-white.py-12:nth-of-type(6) .rounded-2xl {
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  /* Alternative targeting using content */
  section.bg-white:has(h2:contains("প্রত্যাশা মাল্টিমিডিয়া")),
  section.bg-white.py-12 div[style*="#28282a"] {
    width: 100% !important;
  }
  
  /* Universal approach for multimedia container */
  .bg-white .container:has(div[style*="#28282a"]) {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
  
  /* More specific targeting for multimedia section */
  .bg-white.py-12 .container.mx-auto.px-6:has(.rounded-2xl[style*="28282a"]) {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  /* Direct targeting of multimedia container */
  div[style*="background-color: #28282a"].rounded-2xl {
    border-radius: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Make main container flex column on mobile */
  .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
  
  /* Full width for both main video and video grid sections */
  .lg\:w-1\/2 {
    width: 100% !important;
  }
  
  /* Single column grid for video cards on mobile */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    /* padding: 1rem !important; */
  }
  
  /* Adjust main video player aspect ratio for mobile */
  .aspect-video {
    height: 250px !important;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  
  /* Mobile video card styling - প্রত্যাশা মাল্টিমিডিয়া section */
  .youtube-video-card {
    background-color: transparent !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Mobile video card image container */
  .youtube-video-card .relative.rounded-lg.overflow-hidden {
    background-color: #3a3a3c !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
  }
  
  .youtube-video-card img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 0.75rem !important;
    display: block !important;
  }
  
  .youtube-video-card h5 {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin: 0.75rem 0 !important;
    padding: 0 0.5rem !important;
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    height: auto !important;
    min-height: 2.8em !important;
  }
  
  /* Mobile video info section */
  .p-8 {
    padding: 1.5rem !important;
  }
  
  /* Mobile main video title */
  #mainVideoTitle {
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Mobile main video description */
  #mainVideoDescription {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}

/* প্রত্যাশা মাল্টিমিডিয়া Mobile Extra Small Screens */
@media (max-width: 480px) {
  /* Full width multimedia section for small screens */
  section.bg-white.py-12:nth-of-type(6) {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 0 !important;
  }
  
  section.bg-white.py-12:nth-of-type(6) .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Smaller video player on mobile */
  .aspect-video {
    height: 200px !important;
  }
  
  /* Tighter spacing for mobile video cards */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    /* padding: 0.75rem !important; */
    width: 100% !important;
  }
  
  /* Mobile multimedia section container */
  .lg\:w-1\/2 .p-8 {
    padding: 0.75rem !important;
    width: 100% !important;
  }
  
  /* Main Play Button Small Mobile */
  #mainPlayButton {
    width: 3.5rem !important;
    height: 3.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* position: static !important; */
    margin: 0 auto !important;
  }
  
  #mainPlayButton svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    margin-left: 0.125rem !important;
  }
  
  /* Force main video container centering */
  #mainVideoPlayer,
  #defaultThumbnail,
  #defaultThumbnail .absolute.inset-0 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Mobile multimedia video cards - Enhanced */
  .youtube-video-card {
    width: 100% !important;
    margin-bottom: 1rem !important;
    background-color: transparent !important;
    border-radius: 0.75rem !important;
    overflow: visible !important;
    display: block !important;
    padding: 0 !important;
  }
  
  /* Mobile card background wrapper */
  .youtube-video-card > div.rounded-lg {
    background-color: #3a3a3c !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
  }
  
  /* Mobile Video Card Image Container - Enhanced */
  .youtube-video-card .relative.rounded-lg.overflow-hidden {
    position: relative !important;
    width: 100% !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    background-color: #3a3a3c !important;
    display: block !important;
    max-width: 100% !important;
  }
  
  /* Enhanced mobile card wrapper */
  .youtube-video-card .rounded-lg[style*="#3a3a3c"] {
    background-color: #3a3a3c !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  .youtube-video-card img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 0.75rem !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Mobile play button overlay fixes */
  .youtube-video-card .absolute.inset-0.bg-black.bg-opacity-30 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 0.75rem !important;
  }
  
  /* Mobile multimedia section play button centering fix */
  .youtube-video-card .absolute.inset-0.flex.items-center.justify-center {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .youtube-video-card h5 {
    font-size: 0.85rem !important;
    margin: 0.5rem 0 !important;
    padding: 0 0.25rem !important;
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    height: auto !important;
    min-height: 2.4em !important;
  }
  
  /* Compact main video info */
  .p-8 {
    padding: 1rem !important;
  }
  
  #mainVideoTitle {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  #mainVideoDescription {
    font-size: 0.8rem !important;
  }
  
  /* Smaller play buttons on mobile */
  .youtube-video-card .w-8.h-8 {
    width: 2rem !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }
  
  /* Enhanced Mobile Play Button Container Centering */
  .youtube-video-card .absolute.inset-0.flex.items-center.justify-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    /* top: 0 !important;
    left: 0 !important; */
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important;
  }
  
  /* Force all play button overlays to center */
  .youtube-video-card .absolute.inset-0 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Center play button within its container */
  .youtube-video-card .w-8.h-8.bg-red-600 {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Force absolute centering for play button containers */
  .youtube-video-card .absolute.inset-0:has(.w-8.h-8) {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 2rem !important;
    height: 2rem !important;
  }
  
  .youtube-video-card .w-8.h-8 svg {
    margin-left: 0.125rem !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
    color: white !important;
  }
  
  .w-20.h-20 {
    width: 4rem !important;
    height: 4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Main Play Button Mobile Centering */
  #mainPlayButton {
    width: 4rem !important;
    height: 4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* position: relative !important; */
    margin: 0 !important;
    /* transform: none !important; */
  }
  
  /* Main Video Player Container Mobile */
  #mainVideoPlayer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #defaultThumbnail .absolute.inset-0 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
}

/* News Card 2 - Horizontal Layout Mobile Responsive */
@media (max-width: 768px) {
  /* Horizontal news card - make vertical on mobile */
  .md\:col-span-7.bg-white.rounded-lg .flex {
    flex-direction: column !important;
  }
  
  .md\:col-span-7.bg-white.rounded-lg .w-1\/3 {
    width: 100% !important;
    order: 2 !important;
    padding: 1rem !important;
  }
  
  .md\:col-span-7.bg-white.rounded-lg .w-2\/3 {
    width: 100% !important;
    order: 1 !important;
  }
  
  .md\:col-span-7.bg-white.rounded-lg .w-2\/3 img {
    border-radius: 0.5rem 0.5rem 0 0 !important;
    height: 200px !important;
    object-fit: cover !important;
  }
  
  .md\:col-span-7.bg-white.rounded-lg h3 {
    font-size: 1.125rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
  }
  
  .md\:col-span-7.bg-white.rounded-lg p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}

/* Jatiyo News Section Mobile */
@media (max-width: 768px) {
  .grid.grid-cols-1.lg\:grid-cols-2.gap-8 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .grid.grid-cols-2.gap-4 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .min-h-\[100px\] {
    min-height: auto !important;
    padding: 1rem !important;
  }
  
  /* Horizontal news card mobile - smaller screens */
  .md\:col-span-7.bg-white.rounded-lg .w-2\/3 img {
    height: 180px !important;
  }
  
  .md\:col-span-7.bg-white.rounded-lg .w-1\/3 {
    padding: 0.75rem !important;
  }
  
  .md\:col-span-7.bg-white.rounded-lg h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .md\:col-span-7.bg-white.rounded-lg p {
    font-size: 0.8rem !important;
  }
}

/* সারাদেশ Filter Section Mobile */
@media (max-width: 768px) {
  /* Filter container mobile */
  .container.mx-auto.px-4.py-4.mb-6 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    margin: 0 !important;
  }
  
  .flex.flex-wrap.items-stretch.gap-4 {
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  
  .flex.flex-wrap.items-stretch.gap-4 select {
    width: 100% !important;
    margin-bottom: 0.5rem;
    padding: 0.75rem !important;
    font-size: 1rem !important;
  }
  
  .flex.flex-wrap.items-stretch.gap-4 button {
    width: 100% !important;
    padding: 1rem !important;
    font-size: 1rem !important;
  }
  
  /* Location text mobile */
  .text-red-600.font-semibold.flex.items-center {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
    padding: 0.5rem 0 !important;
  }
}

/* সারাদেশ Section News Content Grid Mobile */
@media (max-width: 768px) {
  /* Main container grid fix */
  .grid.grid-cols-1.lg\:grid-cols-10.gap-8 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Left column news cards container */
  .lg\:col-span-7 {
    grid-column: span 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* News cards grid mobile */
  .grid.grid-cols-1.md\:grid-cols-10.gap-6 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Individual news cards */
  .md\:col-span-3,
  .md\:col-span-7 {
    grid-column: span 1 !important;
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 1rem !important;
  }
  
  /* News card containers */
  .md\:col-span-3.bg-white.rounded-lg,
  .md\:col-span-7.bg-white.rounded-lg {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  
  /* Image containers */
  .md\:col-span-3 .relative img,
  .md\:col-span-7 .w-2\/3 img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  
  /* Content padding */
  .md\:col-span-3 .p-4,
  .md\:col-span-7 .p-6 {
    padding: 1rem !important;
  }
  
  /* Section container mobile */
  .bg-white.py-8 .container.mx-auto.px-4 {
    width: 100% !important;
    max-width: 100% !important;
    /* padding: 0 1rem !important; */
    margin: 0 !important;
  }
  
  /* Fix any compressed layouts */
  .bg-white.rounded-lg.overflow-hidden {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* সারাদেশ Mobile Small Screens */
@media (max-width: 480px) {
  .container.mx-auto.px-4 {
    padding: 0 0.75rem !important;
  }
  
  .md\:col-span-3 .p-4,
  .md\:col-span-7 .p-6 {
    padding: 0.75rem !important;
  }
  
  .grid.grid-cols-1.md\:grid-cols-10.gap-6 {
    gap: 0.75rem !important;
  }
  
  .w-1\/3,
  .w-2\/3 {
    width: 100% !important;
  }
}

/* Poll Section Mobile */
@media (max-width: 768px) {
  .poll-option {
    padding: 0.75rem !important;
    margin-bottom: 0.5rem;
  }
  
  .flex.justify-between.items-center {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .flex.justify-between.items-center a {
    width: 100% !important;
    text-align: center !important;
  }
}

/* Rajniti Section Mobile */
@media (max-width: 768px) {
  .grid.grid-cols-1.lg\:grid-cols-10.gap-6 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .lg\:col-span-3,
  .lg\:col-span-4 {
    grid-column: span 1 !important;
  }
}

/* Kheladhula Section Mobile */
@media (max-width: 768px) {
  .flex.flex-col.lg\:flex-row.gap-6 {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  
  .lg\:w-2\/5,
  .lg\:w-1\/3,
  .lg\:w-1\/4 {
    width: 100% !important;
  }
  
  .flex.flex-col.md\:flex-row.gap-6 {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* Binodon Section Mobile */
@media (max-width: 768px) {
  /* Mobile responsive layout for binodon section */
  .binodon-slider-container {
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Show navigation buttons on mobile */
  .binodon-slider-container button {
    display: block !important;
    z-index: 10;
  }
  
  /* Mobile slider behavior - smooth slide transitions */
  .binodon-slider {
    display: flex !important;
    transition: transform 0.3s ease-in-out !important;
  }
  
  /* Each slide takes full width on mobile */
  .binodon-slide {
    min-width: 100% !important;
    flex-shrink: 0 !important;
  }
  
  /* Mobile: Show only 1 card per slide (hide other cards) */
  .binodon-slide .grid.grid-cols-3.gap-4 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    display: grid !important;
  }
  
  /* Hide extra cards on mobile - show only first card of each slide */
  .binodon-slide .bg-white:nth-child(n+2) {
    display: none !important;
  }
  
  /* Make the visible card full width and properly sized */
  .binodon-slide .bg-white:first-child {
    width: 100% !important;
    margin: 0 auto !important;
  }
  
  /* Adjust card heights for mobile */
  .binodon-slide .bg-white img {
    height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  
  /* Mobile layout for binodon section main container only */
  .flex.flex-col.lg\:flex-row.gap-6 {
    flex-direction: column !important;
  }
  
  /* Only apply to binodon section columns */
  .flex.flex-col.lg\:flex-row.gap-6 .lg\:w-1\/2 {
    width: 100% !important;
  }
  
  /* Ensure proper spacing between left and right columns on mobile */
  .flex.flex-col.lg\:flex-row.gap-6 .lg\:w-1\/2:first-child {
    margin-bottom: 2rem;
  }
  
  /* Mobile slider navigation adjustments */
  .binodon-slider-container button {
    width: 32px !important;
    height: 32px !important;
    padding: 0.5rem !important;
  }
  
  .binodon-slider-container button svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* Additional mobile styles for smaller screens */
@media (max-width: 480px) {
  .binodon-slide .bg-white {
    margin-bottom: 1rem;
  }
  
  .binodon-slide .bg-white .p-3 {
    padding: 0.75rem !important;
  }
  
  .binodon-slide .bg-white h4 {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }
  
  .binodon-slide .bg-white p {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }
  
  /* Ensure container has proper padding on mobile */
  .container.mx-auto.px-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Adjust section spacing on mobile */
  .flex.flex-col.lg\:flex-row.gap-6 {
    gap: 1.5rem !important;
  }
}

/* Binodon section specific mobile improvements */
@media (max-width: 768px) {
  /* Ensure proper section spacing */
  .বিনোদন-section {
    margin-bottom: 3rem;
  }
  
  /* Fix any potential overflow issues */
  .binodon-slider-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Antorjatik Section Mobile */
@media (max-width: 768px) {
  .lg\:w-3\/5,
  .lg\:w-2\/5 {
    width: 100% !important;
  }
  
  .w-2\/5,
  .w-3\/5 {
    width: 100% !important;
  }
  
  .flex.gap-3 {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .w-28 {
    width: 100% !important;
  }
}

/* Orthoniti and Shikkha Section Mobile */
@media (max-width: 768px) {
  .flex.flex-col.lg\:flex-row.gap-8 {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .flex.flex-col.md\:flex-row.gap-6 {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .md\:w-3\/5,
  .md\:w-2\/5 {
    width: 100% !important;
  }
}

/* ===== ENHANCED স্বাস্থ্য (HEALTH) SECTION MOBILE ===== */
@media (max-width: 768px) {
  /* Health Section Container */
  section.bg-gradient-to-br.from-teal-50 {
    padding: 1.5rem 0 !important;
  }

  /* Health Section Header */
  section.bg-gradient-to-br.from-teal-50 .flex.items-center.justify-between.mb-8 {
    margin-bottom: 1rem !important;
    padding: 0 12px !important;
  }

  section.bg-gradient-to-br.from-teal-50 h2 {
    font-size: 1.25rem !important;
  }

  /* Health slider container - full width */
  .shastho-slider-container {
    width: calc(100% + 2rem) !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* Health slider */
  .shastho-slider {
    width: 100% !important;
  }

  /* Health slide - full width */
  .shastho-slide {
    min-width: 100% !important;
    padding: 0 12px !important;
  }

  /* Health grid - 2 columns on mobile */
  .shastho-slide .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Health cards */
  .shastho-slide .bg-white.rounded-lg {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  /* Health card images */
  .shastho-slide .bg-white.rounded-lg img {
    height: 120px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* Health card content */
  .shastho-slide .bg-white.rounded-lg .p-4 {
    padding: 10px !important;
  }

  /* Health card title */
  .shastho-slide .bg-white.rounded-lg h3 {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Health slider navigation */
  #shasthoPrevBtn,
  #shasthoNextBtn {
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }

  #shasthoPrevBtn svg,
  #shasthoNextBtn svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ===== LIFESTYLE & TOTHOPROJUKTI SECTION MOBILE ===== */
@media (max-width: 768px) {
  /* Section container */
  section.bg-gradient-to-br.from-pink-50 {
    padding: 1.5rem 0 !important;
  }

  /* Main flex container - stack columns */
  section.bg-gradient-to-br.from-pink-50 .flex.flex-col.lg\:flex-row.gap-8 {
    flex-direction: column !important;
    gap: 2rem !important;
  }
}

/* Footer Responsive Design */
@media (max-width: 768px) {
  footer .flex-wrap {
    flex-direction: column;
  }
  
  footer .border-r {
    border-right: none;
    border-bottom: 1px solid #9ca3af;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
  
  footer .border-r:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  footer h4 {
    font-size: 1rem;
  }
  
  footer .text-sm {
    font-size: 0.75rem;
  }
  
  footer .px-6 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Footer bottom section mobile */
  footer .flex.flex-wrap.md\:flex-nowrap {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  footer .flex-1.text-center.md\:text-left {
    text-align: center !important;
    margin-bottom: 2rem;
  }
  
  footer .flex-1.text-center {
    margin-bottom: 2rem;
  }
  
  footer .flex-1.text-center.md\:text-right {
    text-align: center !important;
  }
  
  footer .justify-center.md\:justify-end {
    justify-content: center !important;
  }
}

/* OLD ADDITIONAL MOBILE RESPONSIVE FIXES - REMOVED - See unified mobile responsive section */

/* Tab Scrollable Container Styles */
.tab-scroll-container {
  scrollbar-width: thin;
  scrollbar-color: #9ca3af #f3f4f6;
}

.tab-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.tab-scroll-container::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}

.tab-scroll-container::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.tab-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Tab Content Smooth Scrolling */
.tab-content {
  transition: all 0.3s ease;
}

/* Tab Scroll Indicator (optional) */
.tab-scroll-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 8px;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #070788);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tab-scroll-container:hover::after {
  opacity: 0.5;
}

/* Mobile Tab Scrolling Enhancements */
@media (max-width: 768px) {
  .tab-scroll-container {
    max-height: 320px !important;
    -webkit-scroll-behavior: smooth;
    scroll-behavior: smooth;
  }
  
  .tab-scroll-container::-webkit-scrollbar {
    width: 4px;
  }
  
  .tab-scroll-container::-webkit-scrollbar-thumb {
    background: #070788;
    border-radius: 2px;
  }
  
  /* Scrollable content indicator removed for flat design */
  .tab-scroll-container {
    /* Box shadow removed */
  }
}

/* Tab News Item Hover Enhancement with Scrollable */
.tab-scroll-container .divide-y > div:hover {
  background: linear-gradient(90deg, #f8fafc, #f1f5f9);
  transform: translateX(2px);
  transition: all 0.3s ease;
}

/* Tab Scroll Container Focus Styles */
.tab-scroll-container:focus-within {
  border: 2px solid rgba(7, 7, 136, 0.2);
  border-radius: 4px;
}

/* Better contrast for scrollable content */
.tab-scroll-container .p-4 {
  border-left: 2px solid transparent;
  transition: all 0.3s ease;
}

.tab-scroll-container .p-4:hover {
  border-left-color: #070788;
  background-color: rgba(7, 7, 136, 0.05);
}

/* ===== ENHANCED লাইফস্টাইল (LIFESTYLE) SECTION MOBILE ===== */
@media (max-width: 768px) {
  /* Lifestyle container - full width */
  .lifestyle-container {
    width: 100% !important;
    padding: 0 12px !important;
    margin: 0 !important;
  }

  /* Lifestyle container inline style override */
  .lifestyle-container[style*="width: 70%"] {
    width: 100% !important;
  }

  /* Lifestyle header */
  .lifestyle-container .flex.items-center.justify-between.mb-8 {
    margin-bottom: 1rem !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .lifestyle-container h2 {
    font-size: 1.25rem !important;
  }

  /* Hide gradient line on mobile */
  .lifestyle-container .h-px.bg-gradient-to-r {
    display: none !important;
  }

  /* Main large news card - vertical layout */
  .lifestyle-container .bg-white.rounded-lg.mb-6 {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 1rem !important;
  }

  .lifestyle-container .bg-white.rounded-lg.mb-6 .flex {
    flex-direction: column !important;
  }

  .lifestyle-container .bg-white.rounded-lg.mb-6 .w-3\/5,
  .lifestyle-container .bg-white.rounded-lg.mb-6 .w-2\/5 {
    width: 100% !important;
  }

  .lifestyle-container .bg-white.rounded-lg.mb-6 img {
    height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .lifestyle-container .bg-white.rounded-lg.mb-6 .p-6 {
    padding: 16px !important;
  }

  .lifestyle-container .bg-white.rounded-lg.mb-6 h3 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  .lifestyle-container .bg-white.rounded-lg.mb-6 p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Three cards grid - 2 columns */
  .lifestyle-container .grid.grid-cols-1.md\:grid-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Third card - full width at bottom */
  .lifestyle-container .grid.grid-cols-1.md\:grid-cols-3 > div:nth-child(3) {
    grid-column: span 2 !important;
  }

  .lifestyle-container .grid .bg-white {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  .lifestyle-container .grid img {
    height: 100px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* Third card image bigger */
  .lifestyle-container .grid > div:nth-child(3) img {
    height: 140px !important;
  }

  .lifestyle-container .grid .p-3 {
    padding: 10px !important;
  }

  .lifestyle-container .grid h4 {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ===== ENHANCED তথ্যপ্রযুক্তি (TECHNOLOGY) SECTION MOBILE ===== */
@media (max-width: 768px) {
  /* Tothoprojukti container - full width */
  .tothoprojukti-container {
    width: 100% !important;
    padding: 0 12px !important;
    margin: 0 !important;
    margin-top: 1.5rem !important;
  }

  /* Tothoprojukti container inline style override */
  .tothoprojukti-container[style*="width: 30%"] {
    width: 100% !important;
  }

  /* Tothoprojukti header */
  .tothoprojukti-container .flex.items-center.justify-between.mb-8 {
    margin-bottom: 1rem !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .tothoprojukti-container h2 {
    font-size: 1.25rem !important;
  }

  /* Hide gradient line on mobile */
  .tothoprojukti-container .h-px.bg-gradient-to-r {
    display: none !important;
  }

  /* Main large card */
  .tothoprojukti-container .bg-white.rounded-lg.mb-5:first-of-type {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 12px !important;
  }

  .tothoprojukti-container .bg-white.rounded-lg.mb-5:first-of-type img {
    height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .tothoprojukti-container .bg-white.rounded-lg.mb-5:first-of-type .p-4 {
    padding: 14px !important;
  }

  .tothoprojukti-container .bg-white.rounded-lg.mb-5:first-of-type h3 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  /* News cards with title left, image right - horizontal layout */
  .tothoprojukti-container .bg-white.rounded-lg.mb-5 {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 10px !important;
  }

  .tothoprojukti-container .bg-white.rounded-lg.mb-5 .p-4 {
    padding: 10px !important;
  }

  .tothoprojukti-container .bg-white.rounded-lg.mb-5 .flex.gap-3 {
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .tothoprojukti-container .bg-white.rounded-lg.mb-5 .flex.gap-3 .w-1\/2:first-child {
    width: 60% !important;
    order: 1 !important;
  }

  .tothoprojukti-container .bg-white.rounded-lg.mb-5 .flex.gap-3 .w-1\/2:last-child {
    width: 40% !important;
    order: 2 !important;
  }

  .tothoprojukti-container .bg-white.rounded-lg.mb-5 .flex.gap-3 img {
    height: 80px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  .tothoprojukti-container .bg-white.rounded-lg.mb-5 h4 {
    font-size: 0.85rem !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* Footer menu mobile optimizations - 2 columns per row */
@media (max-width: 768px) {
  .footer-menu-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    justify-items: center !important;
    align-items: center !important;
  }

  /* Hide pipe separators on mobile */
  .footer-menu-container > div:nth-child(even) {
    display: none !important;
  }

  /* Menu items styling */
  .footer-menu-container > div:nth-child(odd) {
    width: 100% !important;
    text-align: center !important;
    padding: 0.5rem !important;
  }

  /* Make menu text smaller on mobile */
  .footer-menu-container a {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

}

/* ============================================================
   MODERN MOBILE UI - NEWSPAPER INDUSTRY BEST PRACTICES
   Complete Mobile-First Responsive Design
   AGGRESSIVE OVERRIDES FOR TAILWIND CSS
   ============================================================ */

@media (max-width: 768px) {

  /* ===== GLOBAL MOBILE RESET ===== */
  * {
    box-sizing: border-box !important;
  }

  html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }

  body {
    overflow-x: hidden !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ===== REMOVE ALL EXTRA PADDING/MARGIN ===== */
  .px-4, .px-5, .px-6, .px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== MAIN CONTAINER - FULL WIDTH NO GAPS ===== */
  .main-container,
  .max-w-7xl,
  [class*="max-w-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .container,
  .container.mx-auto,
  div.container,
  section .container,
  section > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    margin: 0 !important;
  }

  /* ===== TYPOGRAPHY - MOBILE OPTIMIZED ===== */
  h1 { font-size: 1.375rem !important; line-height: 1.3 !important; }
  h2 { font-size: 1.2rem !important; line-height: 1.35 !important; }
  h3 { font-size: 1.05rem !important; line-height: 1.4 !important; }
  h4 { font-size: 0.95rem !important; line-height: 1.4 !important; }
  p { font-size: 0.9rem !important; line-height: 1.6 !important; }

  /* ============================================================
     FORCE ALL TAILWIND WIDTH CLASSES TO 100%
     ============================================================ */

  [class*="lg:w-"],
  [class*="md:w-"],
  .lg\:w-3\/4,
  .lg\:w-1\/4,
  .lg\:w-1\/2,
  .lg\:w-2\/3,
  .lg\:w-1\/3,
  .lg\:w-3\/5,
  .lg\:w-2\/5,
  .md\:w-1\/2,
  .md\:w-1\/3,
  .md\:w-2\/3,
  .w-1\/2,
  .w-1\/3,
  .w-2\/3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* ============================================================
     FORCE ALL FLEX ROWS TO COLUMNS
     ============================================================ */

  [class*="lg:flex-row"],
  [class*="md:flex-row"],
  .flex.flex-col.lg\:flex-row,
  .flex.flex-col.md\:flex-row,
  .flex.lg\:flex-row,
  .flex.md\:flex-row {
    flex-direction: column !important;
  }

  /* ============================================================
     FORCE ALL GRIDS TO SINGLE COLUMN
     ============================================================ */

  [class*="grid-cols-"],
  [class*="lg:grid-cols-"],
  [class*="md:grid-cols-"],
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.grid-cols-4,
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4,
  .grid.lg\:grid-cols-10,
  .grid.grid-cols-1.md\:grid-cols-2,
  .grid.grid-cols-1.md\:grid-cols-3,
  .grid.grid-cols-1.lg\:grid-cols-2,
  .grid.grid-cols-1.lg\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ============================================================
     FORCE ALL COLUMN SPANS TO FULL WIDTH
     ============================================================ */

  [class*="col-span-"],
  [class*="lg:col-span-"],
  [class*="md:col-span-"],
  .lg\:col-span-3,
  .lg\:col-span-4,
  .lg\:col-span-7,
  .md\:col-span-3,
  .md\:col-span-7 {
    grid-column: span 1 !important;
    width: 100% !important;
  }

  /* ============================================================
     SECTION-SPECIFIC MOBILE STYLES
     All sections converted to single column full-width layout
     ============================================================ */

  /* ===== ALL SECTIONS - FULL WIDTH NO MARGIN ===== */
  section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  section > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    margin: 0 !important;
  }

  /* ===== HERO SECTION ===== */
  section.bg-white.py-8 {
    padding: 8px 0 !important;
  }

  section.bg-white.py-8 > .container {
    padding: 0 8px !important;
  }

  /* Force hero flex to column */
  section.bg-white.py-8 .flex.flex-col.lg\:flex-row,
  .bg-white.py-8 .container > .flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Hero left content - full width */
  section.bg-white.py-8 .lg\:w-3\/4,
  section.bg-white.py-8 [class*="lg:w-3/4"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
  }

  /* Hero right sidebar - full width */
  section.bg-white.py-8 .lg\:w-1\/4,
  section.bg-white.py-8 [class*="lg:w-1/4"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
  }

  /* Hero news row - stack vertically */
  .mb-8.flex.flex-col.md\:flex-row,
  .flex.flex-col.md\:flex-row.gap-6,
  .flex.flex-col.md\:flex-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Hero left panel and right image - full width */
  .md\:w-1\/3,
  .md\:w-2\/3,
  [class*="md:w-1/3"],
  [class*="md:w-2/3"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* Hero image container */
  .h-96,
  [class*="h-96"] {
    height: 200px !important;
  }

  /* ===== NEWS CARDS - FULL WIDTH ===== */
  .news-card,
  article.group,
  .bg-white.rounded-lg,
  .bg-white.rounded-xl,
  .bg-white.rounded-2xl {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
  }

  /* News card inner padding */
  .news-card .p-4,
  .news-card .p-5,
  article.group .p-4,
  article.group .p-5 {
    padding: 10px !important;
  }

  /* ===== ALL NEWS SECTION HEADERS ===== */
  .flex.items-center.justify-between {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
  }

  .flex.items-center.justify-between h2 {
    font-size: 1.1rem !important;
  }

  /* ===== ALL GRIDS - SINGLE COLUMN ===== */
  .grid.grid-cols-1.lg\:grid-cols-10,
  .grid.grid-cols-1.lg\:grid-cols-10.gap-8,
  .grid.grid-cols-1.lg\:grid-cols-10.gap-6,
  .grid.grid-cols-1.md\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.lg\:grid-cols-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* All column spans - full width */
  .lg\:col-span-3,
  .lg\:col-span-4,
  .lg\:col-span-7,
  .lg\:col-span-5,
  .lg\:col-span-6,
  [class*="lg:col-span-"],
  [class*="col-span-"] {
    grid-column: span 1 !important;
    width: 100% !important;
  }

  /* ===== ALL FLEX ROW TO COLUMN ===== */
  .flex.flex-col.lg\:flex-row,
  .flex.lg\:flex-row,
  .flex.flex-col.lg\:flex-row.gap-6,
  .flex.flex-col.lg\:flex-row.gap-8,
  .flex.md\:flex-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* All lg/md width classes - full width */
  .lg\:w-1\/2,
  .lg\:w-3\/5,
  .lg\:w-2\/5,
  .md\:w-1\/2,
  [class*="lg:w-"],
  [class*="md:w-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* ===== IMAGE HEIGHTS ===== */
  .h-48 { height: 180px !important; }
  .h-52 { height: 180px !important; }
  .h-56 { height: 200px !important; }
  .h-64 { height: 220px !important; }
  .h-72 { height: 220px !important; }

  /* ===== NEWS CARD STYLING ===== */
  .bg-white.rounded-lg,
  .bg-white.rounded-xl,
  .bg-white.rounded-2xl {
    width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  /* ============================================================
     MULTIMEDIA SECTION - MOBILE
     ============================================================ */

  /* Multimedia section container */
  section.bg-white.py-8.relative.overflow-hidden {
    padding: 10px 0 !important;
    overflow: hidden !important;
  }

  section.bg-white.py-8.relative.overflow-hidden > .container {
    padding: 0 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Multimedia title header */
  section.bg-white.py-8.relative.overflow-hidden .text-center.py-0.mb-6 {
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  section.bg-white.py-8.relative.overflow-hidden .text-center.py-0.mb-6 > div {
    padding: 12px 10px !important;
    border-radius: 10px 10px 0 0 !important;
  }

  /* Multimedia title text */
  section.bg-white.py-8.relative.overflow-hidden .text-4xl {
    font-size: 1.25rem !important;
    margin-bottom: 4px !important;
  }

  section.bg-white.py-8.relative.overflow-hidden .text-white\/80 {
    font-size: 0.75rem !important;
  }

  /* Multimedia title icons */
  section.bg-white.py-8.relative.overflow-hidden .flex.items-center.justify-center.space-x-4 {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  section.bg-white.py-8.relative.overflow-hidden .bg-white\/20.rounded-full.p-3 {
    padding: 6px !important;
  }

  section.bg-white.py-8.relative.overflow-hidden .bg-white\/20.rounded-full.p-3 svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Hide decorative circles on mobile */
  section.bg-white.py-8.relative.overflow-hidden .absolute.top-4.left-4,
  section.bg-white.py-8.relative.overflow-hidden .absolute.bottom-4.right-4,
  section.bg-white.py-8.relative.overflow-hidden .absolute.top-1\/2.left-8,
  section.bg-white.py-8.relative.overflow-hidden .absolute.top-1\/2.right-8 {
    display: none !important;
  }

  /* Multimedia flex to column */
  section.bg-white.py-8.relative.overflow-hidden .flex.flex-col.lg\:flex-row,
  .flex.flex-col.lg\:flex-row.border {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-radius: 0 0 10px 10px !important;
    overflow: hidden !important;
  }

  /* Multimedia left/right - full width */
  section.bg-white.py-8.relative.overflow-hidden .lg\:w-1\/2,
  .flex.flex-col.lg\:flex-row.border > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    overflow: hidden !important;
  }

  /* Video player container */
  section.bg-white.py-8.relative.overflow-hidden .lg\:w-1\/2.relative.group {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Video Player Container - aspect-video */
  section.bg-white.py-8.relative.overflow-hidden .relative.aspect-video {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Video player height */
  #mainVideoPlayer {
    min-height: 200px !important;
    max-height: 220px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Default thumbnail */
  #defaultThumbnail {
    width: 100% !important;
    max-width: 100% !important;
  }

  #defaultThumbnail img,
  #mainThumbnail {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
  }

  /* Play button */
  #mainPlayButton {
    width: 60px !important;
    height: 60px !important;
  }

  #mainPlayButton svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* Video info section */
  section.bg-white.py-8.relative.overflow-hidden .p-8.relative.overflow-hidden {
    padding: 12px !important;
    overflow: hidden !important;
  }

  #mainVideoTitle {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
  }

  #mainVideoDescription {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }

  /* Action buttons */
  section.bg-white.py-8.relative.overflow-hidden .flex.items-center.space-x-4 {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  section.bg-white.py-8.relative.overflow-hidden .flex.items-center.space-x-4 button {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }

  /* Advertisement inside multimedia */
  section.bg-white.py-8.relative.overflow-hidden .p-8.bg-gradient-to-br {
    padding: 10px !important;
  }

  /* Right side video grid container */
  section.bg-white.py-8.relative.overflow-hidden .lg\:w-1\/2.relative:last-child {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Right side inner container with p-8 */
  section.bg-white.py-8.relative.overflow-hidden .lg\:w-1\/2.relative:last-child > .p-8,
  section.bg-white.py-8.relative.overflow-hidden .lg\:w-1\/2.relative .p-8.relative.z-10 {
    padding: 12px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Hide background pattern on right side */
  section.bg-white.py-8.relative.overflow-hidden .lg\:w-1\/2.relative:last-child > .absolute.inset-0 {
    display: none !important;
  }

  /* Grid header */
  section.bg-white.py-8.relative.overflow-hidden .mb-6.text-center {
    margin-bottom: 8px !important;
    padding: 0 !important;
  }

  section.bg-white.py-8.relative.overflow-hidden .mb-6.text-center h3 {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
  }

  section.bg-white.py-8.relative.overflow-hidden .mb-6.text-center .w-16.h-1 {
    width: 40px !important;
  }

  /* Video grid - keep 2 columns */
  .grid.grid-cols-2.gap-6 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* YouTube video cards */
  .youtube-video-card {
    border-radius: 8px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .youtube-video-card .relative.rounded-xl {
    border-radius: 6px !important;
  }

  .youtube-video-card .h-36,
  .youtube-video-card img.h-36 {
    height: 65px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .youtube-video-card .p-3,
  .youtube-video-card .p-4 {
    padding: 6px !important;
    min-height: 50px !important;
  }

  .multimedia-video-title,
  .youtube-video-card h5 {
    font-size: 0.65rem !important;
    line-height: 1.25 !important;
  }

  /* Play button on video cards */
  .youtube-video-card .w-10.h-10 {
    width: 28px !important;
    height: 28px !important;
  }

  .youtube-video-card .w-10.h-10 svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Duration and number badges */
  .youtube-video-card .absolute.top-2.right-2,
  .youtube-video-card .absolute.top-2.left-2 {
    top: 4px !important;
    font-size: 0.6rem !important;
    padding: 2px 4px !important;
  }

  .youtube-video-card .absolute.top-2.right-2 {
    right: 4px !important;
  }

  .youtube-video-card .absolute.top-2.left-2 {
    left: 4px !important;
  }

  /* ============================================================
     VIDEO SLIDER SECTION - HORIZONTAL SWIPE ON MOBILE
     ============================================================ */

  section.py-4.md\:py-6,
  section.py-4 {
    padding: 12px 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  section.py-4.md\:py-6 > .container,
  section.py-4 > .container {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .video-slider-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  .video-slider-container .overflow-hidden {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .video-slider-container .overflow-hidden::-webkit-scrollbar {
    display: none !important;
  }

  #videoSlider,
  .video-slider {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    padding: 0 !important;
    width: auto !important;
    transform: none !important;
  }

  .video-card-wrapper {
    width: calc(100vw - 24px) !important;
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    flex: 0 0 auto !important;
    margin: 0 6px !important;
    padding: 0 !important;
    scroll-snap-align: center !important;
  }

  .video-card-wrapper:first-child {
    margin-left: 12px !important;
  }

  .video-card-wrapper:last-child {
    margin-right: 12px !important;
  }

  .video-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
  }

  .video-card .relative {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
    position: relative !important;
  }

  .video-card .relative img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .video-card .relative > div,
  .video-card .relative > a {
    position: absolute !important;
  }

  /* Title Overlay on Thumbnail - 70px bottom padding */
  .video-card .absolute.bottom-0.left-0.right-0,
  .video-card .bg-gradient-to-t.from-black {
    padding-bottom: 70px !important;
  }

  .video-title {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  /* Hide slider navigation on mobile */
  .slider-nav-btn,
  #prevBtn,
  #nextBtn {
    display: none !important;
  }

  /* ============================================================
     13. LATEST NEWS WIDGET - MOBILE
     ============================================================ */

  /* Tab Buttons Container */
  .flex.border-b,
  .tab-container {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
  }

  .flex.border-b::-webkit-scrollbar {
    display: none !important;
  }

  /* Tab Button */
  .refined-tab-button,
  .tab-button {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
  }

  /* Latest News Items */
  .tab-scroll-container,
  .latest-news-container {
    max-height: 400px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Latest News Item */
  .latest-news-item,
  .group.relative.bg-white {
    padding: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  /* ============================================================
     14. POPULAR NEWS WIDGET - MOBILE
     ============================================================ */

  /* Popular News Container */
  .popular-news-container {
    padding: 0 !important;
  }

  /* Popular News Item with Rank */
  .group.relative.bg-white.hover\:bg-gradient-to-r {
    padding: 12px !important;
    padding-left: 40px !important;
    margin-bottom: 8px !important;
  }

  /* Popular Rank Badge */
  .absolute.-left-1 {
    left: 8px !important;
  }

  .w-8.h-8.bg-gradient-to-br {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
  }

  /* ============================================================
     15. POLL WIDGET - MOBILE
     ============================================================ */

  /* Poll Container */
  .poll-container,
  .bg-white.rounded-lg.overflow-hidden.border {
    width: 100% !important;
    padding: 16px !important;
  }

  /* Poll Options */
  .poll-option {
    padding: 12px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
  }

  /* Poll Circle */
  .poll-circle {
    width: 22px !important;
    height: 22px !important;
  }

  /* Poll Action Buttons */
  .flex.justify-between.items-center.pt-4 {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .flex.justify-between.items-center.pt-4 span,
  .flex.justify-between.items-center.pt-4 button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ============================================================
     16. FOOTER SECTION - MOBILE
     ============================================================ */

  footer {
    padding: 24px 12px !important;
  }

  footer .container {
    padding: 0 !important;
  }

  /* Footer Grid to Single Column */
  footer .grid,
  footer .flex.flex-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Footer Columns Full Width */
  footer .lg\:w-1\/4,
  footer .lg\:w-1\/3,
  footer .w-full {
    width: 100% !important;
  }

  /* Footer Logo */
  footer .logo-container {
    text-align: center !important;
    margin-bottom: 16px !important;
  }

  footer .logo-container img {
    max-width: 200px !important;
    margin: 0 auto !important;
  }

  /* Footer Links Grid - 2 Columns */
  .footer-menu-container,
  footer .grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Footer Social Icons */
  footer .flex.space-x-4,
  footer .social-icons {
    justify-content: center !important;
    gap: 12px !important;
  }

  footer .w-10.h-10 {
    width: 40px !important;
    height: 40px !important;
  }

  /* Footer Copyright */
  footer .text-center.border-t {
    padding-top: 16px !important;
    margin-top: 16px !important;
    font-size: 0.8rem !important;
  }

  /* ============================================================
     জাতীয় (NATIONAL) SECTION - MOBILE
     ============================================================ */

  /* National Section Container */
  section.bg-gradient-to-br.from-gray-50.pt-12.pb-12 {
    padding: 12px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  section.bg-gradient-to-br.from-gray-50.pt-12.pb-12 > .container {
    padding: 0 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* National Section Header */
  section.bg-gradient-to-br.from-gray-50 .flex.items-center.justify-between.mb-10 {
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  section.bg-gradient-to-br.from-gray-50 .text-3xl {
    font-size: 1.25rem !important;
  }

  /* National Section Grid */
  .grid.grid-cols-1.lg\:grid-cols-2.gap-10 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Top 2 News Grid */
  section.bg-gradient-to-br.from-gray-50 .grid.grid-cols-2.gap-6 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* News Cards in National Section */
  section.bg-gradient-to-br.from-gray-50 article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  section.bg-gradient-to-br.from-gray-50 article .h-52 {
    height: 180px !important;
  }

  section.bg-gradient-to-br.from-gray-50 article .p-5 {
    padding: 10px !important;
  }

  /* Featured News Right Column */
  .bg-white.rounded-2xl.border.border-gray-100 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  /* National News Title List */
  .grid.grid-cols-1.md\:grid-cols-2.gap-5 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Space-y-8 in National Section */
  section.bg-gradient-to-br.from-gray-50 .space-y-8 {
    width: 100% !important;
  }

  section.bg-gradient-to-br.from-gray-50 .space-y-8 > * + * {
    margin-top: 10px !important;
  }

  /* ============================================================
     SIDEBAR - MOBILE (BELOW CONTENT)
     ============================================================ */

  .lg\:w-1\/4 .sticky {
    position: relative !important;
    top: 0 !important;
  }

  /* Live TV section on mobile */
  .lg\:w-1\/4 .bg-white.overflow-hidden.mb-6.border,
  .lg\:w-1\/4 .bg-white.overflow-hidden.mb-6 {
    padding: 0 !important;
  }

  .aspect-video {
    aspect-ratio: 16/9 !important;
  }

  /* Opinion Section */
  .divide-y.divide-gray-200 > div {
    padding: 12px !important;
  }

  .divide-y.divide-gray-200 .w-12.h-12 {
    width: 40px !important;
    height: 40px !important;
  }

  /* ============================================================
     SPACING - TIGHTER MOBILE OPTIMIZED
     ============================================================ */

  /* .p-4 { padding: 8px !important; } */
  .p-5 { padding: 10px !important; }
  .p-6 { padding: 10px !important; }
  .p-8 { padding: 12px !important; }
  .px-4 { padding-left: 8px !important; padding-right: 8px !important; }
  .px-5 { padding-left: 8px !important; padding-right: 8px !important; }
  .px-6 { padding-left: 8px !important; padding-right: 8px !important; }
  .px-8 { padding-left: 8px !important; padding-right: 8px !important; }
  .py-4 { padding-top: 10px !important; padding-bottom: 10px !important; }
  .py-6 { padding-top: 12px !important; padding-bottom: 12px !important; }
  .py-8 { padding-top: 12px !important; padding-bottom: 12px !important; }
  .py-12 { padding-top: 16px !important; padding-bottom: 16px !important; }
  .py-16 { padding-top: 20px !important; padding-bottom: 20px !important; }
  .py-20 { padding-top: 24px !important; padding-bottom: 24px !important; }
  .gap-4 { gap: 8px !important; }
  .gap-5 { gap: 8px !important; }
  .gap-6 { gap: 10px !important; }
  .gap-8 { gap: 10px !important; }
  .gap-10 { gap: 12px !important; }
  .space-y-4 > * + * { margin-top: 8px !important; }
  .space-y-6 > * + * { margin-top: 10px !important; }
  .space-y-8 > * + * { margin-top: 12px !important; }
  .mb-4 { margin-bottom: 8px !important; }
  .mb-6 { margin-bottom: 10px !important; }
  .mb-8 { margin-bottom: 12px !important; }
  .mb-10 { margin-bottom: 12px !important; }
  .mt-4 { margin-top: 8px !important; }
  .mt-6 { margin-top: 10px !important; }
  .mt-8 { margin-top: 12px !important; }

  /* ===== SECTIONS - FULL WIDTH NO GAPS ===== */
  section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Remove all negative margins */
  .-mx-4, .-mx-2, .-ml-4, .-mr-4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Remove auto margins that create centering gaps */
  .mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== TOUCH-FRIENDLY BUTTONS ===== */
  button,
  .btn,
  a.btn {
    min-height: 44px !important;
  }

  /* ===== TABS - MOBILE ===== */
  .refined-tab-button {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.85rem !important;
  }

  .refined-tab-button svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* ===== ROUNDED CORNERS - CONSISTENT ON MOBILE ===== */
  .rounded-2xl { border-radius: 12px !important; }
  .rounded-xl { border-radius: 10px !important; }
  .rounded-lg { border-radius: 8px !important; }

  /* ===== HIDE DESKTOP-ONLY ELEMENTS ===== */
  .hidden-mobile,
  .desktop-only {
    display: none !important;
  }

  /* ===== HIDE "সব দেখুন" BUTTONS ON MOBILE ===== */
  .flex.items-center.justify-between a[href*="category"],
  .flex.items-center.justify-between a.flex-shrink-0,
  a.flex-shrink-0[class*="bg-"]:not(.video-card):not(.news-card) {
    display: none !important;
  }

  /* ===== CATEGORY PAGE - MOBILE ===== */
  .category-header {
    padding: 1rem 0.75rem !important;
  }

  .category-header h1 {
    font-size: 1.25rem !important;
  }

  /* Category news grid */
  .category-news-grid {
    grid-template-columns: 1fr !important;
  }

  /* ===== SINGLE NEWS PAGE - MOBILE ===== */
  .single-news-content {
    padding: 0.75rem !important;
  }

  .single-news-title {
    font-size: 1.375rem !important;
    line-height: 1.35 !important;
  }

  .single-news-image {
    width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: cover !important;
  }

  .single-news-body {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  .single-news-body p {
    margin-bottom: 1rem !important;
  }

  /* Row 2 & 3 Combined: Meta Information + Font Controls + Social Media & Print - Mobile */
  .bg-white.border.border-gray-200.shadow-sm.p-4.mb-6 {
    padding: 8px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Meta row container - make it wrap on mobile */
  .bg-white.border.border-gray-200.shadow-sm.p-4.mb-6 .flex.flex-nowrap {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Published/Updated info - full width on mobile */
  .bg-white.border.border-gray-200.shadow-sm.p-4.mb-6 .flex.items-center.gap-2.text-xs {
    width: 100% !important;
    flex-wrap: wrap !important;
    font-size: 0.65rem !important;
    gap: 2px !important;
    order: 1 !important;
  }

  .bg-white.border.border-gray-200.shadow-sm.p-4.mb-6 .flex.items-center.gap-2.text-xs span {
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  /* Font Size Controls - Modern Clean Style - Mobile */
  .bg-white.border.border-gray-200.shadow-sm.p-4.mb-6 .flex.items-center.gap-1.flex-shrink-0.bg-gray-100 {
    padding: 2px !important;
    border-radius: 6px !important;
    order: 2 !important;
    flex-shrink: 0 !important;
  }

  .bg-white.border.border-gray-200.shadow-sm.p-4.mb-6 .flex.items-center.gap-1.flex-shrink-0.bg-gray-100 button {
    padding: 4px 8px !important;
    min-width: 28px !important;
    height: 26px !important;
  }

  .bg-white.border.border-gray-200.shadow-sm.p-4.mb-6 .flex.items-center.gap-1.flex-shrink-0.bg-gray-100 svg {
    width: 14px !important;
    height: 14px !important;
  }

  .bg-white.border.border-gray-200.shadow-sm.p-4.mb-6 .flex.items-center.gap-1.flex-shrink-0.bg-gray-100 .w-px {
    height: 16px !important;
  }

  /* Social Media Icons - Mobile */
  .bg-white.border.border-gray-200.shadow-sm.p-4.mb-6 .flex.items-center.gap-2.flex-shrink-0:last-child {
    gap: 6px !important;
    order: 3 !important;
    flex-shrink: 0 !important;
  }

  .bg-white.border.border-gray-200.shadow-sm.p-4.mb-6 .flex.items-center.gap-2.flex-shrink-0:last-child button {
    padding: 5px !important;
    border-radius: 4px !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bg-white.border.border-gray-200.shadow-sm.p-4.mb-6 .flex.items-center.gap-2.flex-shrink-0:last-child svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Related news on mobile */
  .related-news-grid {
    grid-template-columns: 1fr !important;
  }

  /* ===== SPECIAL NEWS SECTION - MOBILE ===== */
  .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  .lg\:divide-x {
    border: none !important;
  }

  .lg\:pr-6,
  .lg\:pl-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Special news images */
  .h-72 {
    height: 220px !important;
  }

  .h-40 {
    height: 160px !important;
  }

  /* ===== ADVERTISEMENT SECTIONS - MOBILE ===== */
  .ad-container {
    padding: 0.5rem !important;
  }

  .ad-container img {
    width: 100% !important;
    height: auto !important;
  }

  /* ===== FOOTER - MOBILE ===== */
  footer {
    padding: 1rem 0.75rem !important;
  }

  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  footer h3 {
    font-size: 1.1rem !important;
  }

  footer p,
  footer a {
    font-size: 0.9rem !important;
  }

  /* ===== SCROLL INDICATOR FOR VIDEO SLIDER ===== */
  .video-slider-container::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
  }

  /* ===== SMOOTH SCROLL BEHAVIOR ===== */
  .video-slider-container .overflow-hidden {
    scroll-behavior: smooth !important;
  }

}

/* ============================================================
   EXTRA SMALL MOBILE (320px - 480px)
   ============================================================ */

@media (max-width: 480px) {

  /* Even smaller typography */
  h1 { font-size: 1.2rem !important; }
  h2 { font-size: 1.05rem !important; }
  h3 { font-size: 0.95rem !important; }
  h4 { font-size: 0.875rem !important; }
  p { font-size: 0.85rem !important; }

  /* Container padding - very tight */
  .container,
  section > .container {
    padding: 0 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hero Section */
  .h-96 {
    height: 160px !important;
  }

  .relative.overflow-hidden.h-52,
  .relative.overflow-hidden.h-64 {
    height: 140px !important;
  }

  /* Video Slider - Full Width Cards */
  .video-card-wrapper {
    width: calc(100vw - 12px) !important;
    min-width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    margin: 0 3px !important;
  }

  .video-card-wrapper:first-child {
    margin-left: 6px !important;
  }

  .video-card-wrapper:last-child {
    margin-right: 6px !important;
  }

  .video-title {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }

  /* News Card Images */
  .h-48,
  .h-52,
  .h-56 {
    height: 150px !important;
  }

  /* Section Headers */
  .flex.items-center.justify-between.mb-8 h2,
  .flex.items-center.justify-between.mb-10 h2 {
    font-size: 1rem !important;
  }

  /* See All Button */
  .flex.items-center.justify-between a[href*="category"] {
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
  }

  /* Multimedia Section */
  .grid.grid-cols-2.gap-6 {
    gap: 6px !important;
    /* padding: 6px !important; */
  }

  .youtube-video-card .h-36 {
    height: 60px !important;
  }

  .multimedia-video-title {
    font-size: 0.65rem !important;
  }

  #mainVideoTitle {
    font-size: 0.95rem !important;
  }

  #mainVideoDescription {
    font-size: 0.75rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-clamp: 2 !important;
  }

  /* Tab Buttons */
  .refined-tab-button,
  .tab-button {
    padding: 6px 8px !important;
    font-size: 0.75rem !important;
  }

  /* Poll Widget */
  .poll-option {
    padding: 8px !important;
  }

  .poll-circle {
    width: 18px !important;
    height: 18px !important;
  }

  /* Popular News Rank Badge */
  .w-8.h-8.bg-gradient-to-br {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.65rem !important;
  }

  /* Footer */
  footer {
    padding: 12px 6px !important;
  }

  .footer-menu-container,
  footer .grid-cols-2 {
    gap: 4px !important;
  }

  footer .w-10.h-10 {
    width: 32px !important;
    height: 32px !important;
  }

  /* Spacing Adjustments - Extra Tight */
  .p-4 { padding: 6px !important; }
  .p-5 { padding: 8px !important; }
  .p-6 { padding: 8px !important; }
  .p-8 { padding: 10px !important; }
  .px-4, .px-5, .px-6, .px-8 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .gap-4 { gap: 6px !important; }
  .gap-6 { gap: 8px !important; }
  .gap-8 { gap: 8px !important; }

}