/* ==========================================================
   Header CSS Styles
   ----------------------------------------------------------
   Includes:
   - Notification popup link styling
   - Top bar layout & responsive behavior
   - Date & language section
   - Social media icons with hover effects
   - Platform-specific icon colors
   - Responsive rule: hides top bar on small screens
   ========================================================== */

.notification-popup a {
  color: black !important;
  text-decoration: none;
  text-bold:none !important;
  
}

  .top-bar {
    font-size: 1rem;
    font-weight: bold;
    background-color: #fff;
    color: #000;
    border-bottom: 1px solid gainsboro;
  }

  .date-lang {
    font-size: 0.9rem;
    min-width: 180px;
  }

  .social-icons a {
    margin-right: 5px !important;
    text-decoration: none;
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    color: white;
    background-color: #888;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .social-icons a:hover {
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }

  /* Platform specific colors */
  .social-icons a.facebook {
    background-color: #3b5998;
  }

  .social-icons a.twitter {
    background-color: #1da1f2;
  }

  .social-icons a.linkedin {
    background-color: #0077b5;
  }

  .social-icons a.instagram {
    background-color: #e4405f;
  }

  .social-icons a.youtube {
    background-color: #ff0000;
  }

  .social-icons a.whatsapp {
    background-color: #25d366;
  }

  .social-icons a.telegram {
    background-color: #0088cc;
  }
  /* 🔹 Hide top bar on screens smaller than 768px */
  @media (max-width: 767.98px) {
    .top-bar {
      display: none !important;
    }
  }
  
  
  
  /* ==========================================================
   Navbar & Header Component CSS
   ----------------------------------------------------------
   Includes:
   - Logo bar styles (shadow, border)
   - Right-side navigation links & hover effects
   - Icon buttons with badges and animations
   - Custom font (SolaimanLipi) import
   - Social popup dropdown with arrow and hover styles
   - Social media color themes
   - Notification popup with list and timestamps
   - Search popup with toggle functionality
   ========================================================== */

/*  Logo Bar Section */
 .logo-bar {
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .right-content {
    gap: 15px;
  }

  .right-content .nav-link {
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: #222 !important;

    transition: color 0.3s ease;
  }

  .right-content .nav-link:hover {
    color: #d40000;
  }

  .icon-link {
    font-size: 1rem;
    color: #444;
    padding: 6px;
    border-radius: 50%;
    background-color: #f5f5f5;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .icon-link:hover {
    color: #d40000;
    background-color: #e8e8e8;
    transform: scale(1.1);
  }

  .icon-link .badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: red;
    color: white;
    font-size: 0.7rem;
    padding: 3px 6px;
    border-radius: 50%;
    font-weight: bold;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  }
  

  .social-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    width: 820px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    /*font-family: "Baloo Da 2", "SolaimanLipi", sans-serif !important;*/
    font-weight: bold !important;
    /* Smooth Transition with Delay */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 1.5s ease-in-out 0.05s;

    pointer-events: none;
  }
  .social-popup::before {
    content: "";
    position: absolute;
    top: 0;
    right: 25px; /* adjust horizontal position */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 12px solid #e60023; /* bold red arrow */
    transform: translateY(-100%);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
    border-radius: 2px;
    z-index: 1001;
  }
  .nav-item:hover .social-popup {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .socialpop-section {
    margin-bottom: 30px;
  }

  .socialpop-heading {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
  }

  .socialpop-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 10px;
    column-gap: 25px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .socialpop-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #444;
    transition: color 0.3s ease;
    line-height: 1.4;
  }

  .socialpop-list li:hover {
    color: #e60023;
  }

  .socialpop-list i {
    font-size: 16px;
    width: 20px;
  }

  .socialpop-verified {
    color: #888;
    font-size: 13px;
    margin-left: 4px;
  }

  /* Icon Colors */
  .socialpop-facebook {
    color: #1877f2;
  }
  .socialpop-youtube {
    color: #ff0000;
  }
  .socialpop-tiktok {
    color: #010101;
  }
  .socialpop-twitter {
    color: #1da1f2;
  }
  .socialpop-instagram {
    background: radial-gradient(
      circle at 30% 107%,
      #fdf497 0%,
      #fdf497 5%,
      #fd5949 45%,
      #d6249f 60%,
      #285aeb 90%
    );
  }
  .socialpop-linkedin {
    color: #0077b5;
  }
  .socialpop-telegram {
    color: #0088cc;
  }
  .socialpop-like {
    color: #e0245e;
  }
  .socialpop-soundcloud {
    color: #ff5500;
  }
  .socialpop-news {
    color: #000;
  }
  .socialpop-imo {
    color: #00b0ff;
  }
  .socialpop-whatsapp {
    color: #25d366;
  }
  .socialpop-helo {
    color: #f06292;
  }

  .notification-wrapper {
    position: relative;
  }

  .notification-popup {
    display: none;
    position: absolute;

    top: 100%;
    right: 0;
    width: 260px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 2000; /* must be higher than navbar */
    padding: 15px;
  }

  .notification-wrapper:hover .notification-popup {
    display: block;
  }

  .notification-popup h4 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
  }

  .notification-popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .notification-popup ul li {
    font-size: 15px;
    color: #222;
    /*font-family: "Baloo Da 2", "SolaimanLipi", sans-serif !important;*/
    font-weight: bold !important;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .notification-popup ul li:last-child {
    border-bottom: none;
  }
  .notify-time {
    display: block;
    font-size: 12px;
    color: #888;
    font-weight: normal;
    margin-top: 3px;
  }
  .search-wrapper {
    position: relative;
    display: inline-block;
    /*font-family: "Baloo Da 2", "SolaimanLipi", sans-serif;*/
  }

  /* Icons styling */
  .icon-link {
    color: #e60023;
    font-size: 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    position: relative;
  }

  /* Initially show search icon, hide close icon */
  .icon-link .close-icon {
    display: none;
  }

  /* Toggle icons on checkbox checked */
  #search-toggle:checked + .icon-link .search-icon {
    display: none;
  }

  #search-toggle:checked + .icon-link .close-icon {
    display: inline;
  }

  /* Popup hidden by default */
  .search-popup {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    position: absolute;
    top: 110%;
    right: 0;
    width: 400px;
    background: #fff;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 2000;

    white-space: normal;
    font-weight: bold;

    display: flex;
    gap: 15px;
    align-items: center;

    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* Show popup when checkbox checked */
  #search-toggle:checked ~ .search-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Input style */
  .search-popup input {
    flex-grow: 1;
    padding: 14px 18px;
    font-size: 18px;
    border: 2px solid #e60023;
    border-radius: 10px;
    outline-offset: 2px;
    outline-color: #e60023;
    /*font-family: "Baloo Da 2", "SolaimanLipi", sans-serif;*/
  }

  /* Button style */
  .search-popup button {
    background-color: #e60023;
    color: white;
    border: none;
    padding: 14px 25px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
   /* font-family: "Baloo Da 2", "SolaimanLipi", sans-serif;*/
    font-size: 16px;
    transition: background-color 0.3s ease;
  }

  .search-popup button:hover {
    background-color: #b0001a;
  } 
  
 /* ==========================================================
   MOBILE NAVBAR CSS (Crime24)
   ----------------------------------------------------------
   Features:
   - Mobile responsive navbar for screens ≤ 768px
   - Layout: Logo (left), Icons (center), Menu toggle (right)
   - Search popup with toggleable search/close icons
   - Notification popup with hover dropdown
   - Offcanvas sidebar menu with submenu support
   - Dropdown menu styling for mobile
   ========================================================== */

  
 /* MOBILE NAVBAR CSS */
      @media (max-width: 768px) {
        .mobile-navbar-crime24 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 16px;
          background-color: #fff;
          position: relative;
          z-index: 999;
        }

        /* ===== LOGO LEFT ===== */
        .mobile-logo-crime24 {
          flex: 1;
          margin-right: -80px;
          margin-left: -27px;
        }

        .mobile-logo-crime24 img {
          height: 40px;
        }

        /* ===== ICONS CENTER ===== */
        .mobile-icons-crime24 {
          flex: 1;
          justify-content: center;
          display: flex;
          gap: 4px;
        }

        .icon-link-crime24 {
          color: #e60023;
          font-size: 22px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          position: relative;
        }

        .badge-crime24 {
          font-size: 0.6rem;
          padding: 2px 6px;
          color: white;
        }

        /* ===== MENU BUTTON RIGHT ===== */
        .mobile-toggler-crime24 {
          flex: 1;
          justify-content: flex-end;
          display: flex;
        }

        .btn-menu-toggle {
          background-color: red;
          border-color: red;
          padding: 6px 10px;
          font-size: 20px;
          border-radius: 4px;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* ===== SEARCH ===== */
        .search-wrapper-crime24 {
          position: relative;
          display: flex;
          align-items: center;
          /*font-family: "Baloo Da 2", "SolaimanLipi", sans-serif;*/
        }

        .search-popup-crime24 {
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          position: absolute;
          top: 120%;
          right: -70px; /* ⬅️ Adjust this value as needed */
          width: 300px;
          background: #fff;
          padding: 15px 20px;
          border-radius: 10px;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
          display: flex;
          gap: 10px;
          align-items: center;
          z-index: 2000;
          transition: 0.3s ease;
        }

        #search-toggle-crime24:checked ~ .search-popup-crime24 {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
        }

        .search-popup-crime24 input {
          flex-grow: 1;
          padding: 10px 14px;
          font-size: 16px;
          border: 2px solid #e60023;
          border-radius: 8px;
          outline: none;
        }

        .search-popup-crime24 button {
          background-color: #e60023;
          color: white;
          border: none;
          padding: 10px 16px;
          border-radius: 8px;
          font-weight: bold;
          font-size: 14px;
          cursor: pointer;
        }

        .search-popup-crime24 button:hover {
          background-color: #b0001a;
        }

        #search-toggle-crime24:checked
          + .icon-link-crime24
          .search-icon-crime24 {
          display: none;
        }

        #search-toggle-crime24:checked
          + .icon-link-crime24
          .close-icon-crime24 {
          display: inline;
        }

        .close-icon-crime24 {
          display: none;
        }

        /* ===== NOTIFICATION ===== */
        .notification-wrapper-crime24 {
          position: relative;
          display: flex;
          align-items: center;
        }

        .notification-popup-crime24 {
          display: none;
          position: absolute;
          top: 120%;
          right: 0;
          width: 260px;
          background: #fff;
          border-radius: 10px;
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
          padding: 15px;
          z-index: 2000;
        }

        .notification-wrapper-crime24:hover .notification-popup-crime24 {
          display: block;
        }

        .notification-popup-crime24 h4 {
          margin-bottom: 10px;
          font-size: 16px;
          font-weight: bold;
          border-bottom: 1px solid #ddd;
          padding-bottom: 6px;
        }

        .notification-popup-crime24 ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .notification-popup-crime24 li {
          font-size: 14px;
          color: #222;
          padding: 6px 0;
          border-bottom: 1px solid #eee;
         /* font-family: "Baloo Da 2", "SolaimanLipi", sans-serif;*/
          font-weight: 600;
        }

        .notification-popup-crime24 li:last-child {
          border-bottom: none;
        }

        .notify-time-crime24 {
          display: block;
          font-size: 12px;
          color: #888;
          margin-top: 3px;
          font-weight: normal;
        }

        /* ============ OTHERS (UNCHANGED) ============ */
        .offcanvas-start {
          width: 70vw !important;
          max-width: 350px;
        }

        .mobileNavbar {
          list-style: none;
          padding-left: 0;
          margin: 0;
        }

        .mobileNavbar .menu-link {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 20px;
          border-bottom: 1px solid #eee;
          cursor: pointer;
          background-color: #fff;
          font-weight: 500;
          transition: background-color 0.2s;
        }

        .mobileNavbar .menu-link:hover {
          background-color: red;
        }

        .mobileNavbar .submenu {
          padding-left: 30px;
          background-color: #f8f9fa;
        }

        .mobileNavbar .submenu div a {
          display: block;
          padding: 6px 0;
          color: #333;
          text-decoration: none;
          transition: all 0.2s;
        }

        .mobileNavbar .submenu div a:hover {
          color: blue;
          text-decoration: underline;
          background-color: gainsboro;
        }

        .logo-area {
          padding: 20px;
          background: #f8f9fa;
          text-align: center;
        }

        .logo-area img {
          max-width: 150px;
        }

        #mobileNavbar {
          border: 1.5px solid gainsboro;
          position: sticky;
          top: 0;
          z-index: 999;
          background-color: white;
        }

        /* Dropdown Menu */
        .dropdown-menu.fade-menu {
          display: none;
          position: static;
          background: none;
          border: none;
          box-shadow: none;
          padding-left: 10px;
          margin-top: 5px;
        }

        .nav-item.dropdown.show > .dropdown-menu.fade-menu {
          display: block;
        }

        .dropdown-item {
          padding: 5px 15px;
          color: #000;
          font-weight: 500;
        }

        .dropdown-item:hover,
        .dropdown-item:focus {
          background-color: #e60023;
          color: #fff;
        }
      } 
	  
	  
/* ==========================================================
   CUSTOM NAVBAR & SIDEBAR STYLES
   ----------------------------------------------------------
   Features:
   - Navbar styling (desktop + mobile responsive)
   - Navigation links, hover, and active states
   - Dropdown menus with hover/fade effects
   - Custom sidebar (slide-in) with overlay
   - Toggle button (hamburger animation)
   - News items (thumbnail + content)
   - Contact info styling
   - Responsive adjustments for screens ≤ 768px
   ========================================================== */
	  
	  
	  
	  
	  
	  
.custom-navbar {
    font-size: 0.5rem;
    border-radius: 0;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #b91c1c;
  }


  .section-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }

  .custom-navbar .testnav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }

  .custom-navbar .testnav .nav-item {
    margin-right: 30px;
    list-style-type: none;
    position: relative;
  }

  .custom-navbar .testnav .nav-link {
    list-style-type: none;
    background-color: transparent;
    color: white;
    font-weight: 800;
    font-size: 14px;
    padding: 10px 4px;
    border-radius: 0;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
  }

  .custom-navbar .testnav .nav-item:first-child .nav-link {
    color: black !important;
    background-color: white;
    font-weight: 700;
    padding-left: 20px;
    padding-right: 20px;
  }

  .custom-navbar .testnav .nav-link:hover,
  .custom-navbar .testnav .nav-link:focus {
    background-color: white;
    color: black !important;
    padding: 10px 4px;
    text-decoration: none;
  }

  .custom-navbar .testnav .nav-link.active {
    color: black;
  }

  .custom-navbar .testnav .nav-item:nth-child(n + 3) .nav-link::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: white;
  }

  /* Dropdown menu hover support */
  .custom-navbar .dropdown:hover > .dropdown-menu {
    display: block;
    visibility: visible;
    opacity: 1;
    top: 100%;
    transform: translateY(0);
  }

  .custom-navbar .dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 120%;
    left: 0;
    z-index: 1000;
    background-color: white;
    border-radius: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
  }

  .custom-navbar .dropdown {
    position: relative;
  }

  .dropdown-menu.fade-menu {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(5px);
  }

  .dropdown-item {
    color: black !important;
    padding: 10px 20px;
    white-space: nowrap;
  }

 .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: red;
  font-weight:bold;
}

  .custom-dropdown-menu {
    background-color: #000;
    border: none;
    border-radius: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  }


  .custom-dropdown-item {
    color: #fff;
    padding: 8px 20px;
  }

  .custom-dropdown-item:hover {
    background-color: #333;
    color: #f8d7da;
  }

  .custom-toggle-btn::after {
    display: none !important;
  }

  .custom-toggle-btn:hover {
    background-color: white;
  }

  .custom-toggle-btn:hover i {
    color: black;
  }

  .custom-navbar-toggler {
    border: none;
    background-color: black;
    padding: 8px;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 30px;
    transition: background-color 0.3s ease;
  }

  .custom-navbar-toggler:hover {
    background-color: white;
  }

  .custom-toggle-btn {
    border: none;
    border-radius: 0;
    padding: 8px 10px;
    background-color: transparent;
    color: white;
    width: 38px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
  }

  .custom-toggler-icon,
  .custom-toggler-icon::before,
  .custom-toggler-icon::after {
    content: "";
    display: block;
    background-color: white;
    height: 3px;
    width: 24px;
    border-radius: 2px;
    position: relative;
    transition: all 0.3s ease;
  }

  .custom-toggler-icon::before,
  .custom-toggler-icon::after {
    position: absolute;
    left: 0;
  }

  .custom-toggler-icon::before {
    top: -8px;
  }

  .custom-toggler-icon::after {
    top: 8px;
  }

  .custom-navbar-toggler:hover .custom-toggler-icon,
  .custom-navbar-toggler:hover .custom-toggler-icon::before,
  .custom-navbar-toggler:hover .custom-toggler-icon::after,
  .custom-toggle-btn:hover .custom-toggler-icon,
  .custom-toggle-btn:hover .custom-toggler-icon::before,
  .custom-toggle-btn:hover .custom-toggler-icon::after {
    background-color: black;
  }

  .custom-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 380px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 1050;
    transition: right 0.4s ease-in-out;
    overflow-y: auto;
  }

  .custom-sidebar.active {
    right: 0;
  }

  #customSidebar h5,
  #customSidebar h6 {
    color: red;
    font-weight: 700;
  }

  #customSidebar p,
  #customSidebar small {
    color: #777;
    font-size: 1rem;
    font-weight: bold;
  }

  #customSidebar ul {
    padding-left: 0;
  }

  #customSidebar li {
    padding-bottom: 10px;
  }

  #customSidebar .btn-close {
    border: 2px solid red;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: red;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  #customSidebar .btn-close:hover {
    background-color: #ffe6e6;
  }

  /* News image */
  .news-thumb {
    width: 100px;
    height: 95px;
    object-fit: cover;
    border-radius: 5px;
  }

  /* News content */
  .news-content {
    padding-left: 10px;
    flex: 1;
    min-width: 0;
    margin-top: -3px;
  }

  .badge {
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
  }

  #customSidebar .fab {
    font-size: 18px;
    transition: color 0.3s ease;
  }

  #customSidebar .fab:hover {
    color: red;
  }

  .news-link {
    color: #111;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
  }

  .news-link:hover {
    color: red;
    text-decoration: underline;
    cursor: pointer;
  }

  #bodyOverlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 1040;
    background: linear-gradient(to left, rgba(24, 23, 23, 0.6), rgba(24, 23, 23, 0.6));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s;
  }

  #bodyOverlay.active {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    visibility: visible;
    animation: overlaySlide 0.3s forwards;
  }

  .logo-img {
    width: 200px;
    object-fit: contain;
  }

  .contact-info-serial p {
    margin-bottom: 6px;
    line-height: 1.4;
    display: flex;
    align-items: center;
  }

  .contact-info-serial i {
    width: 20px;
  }

  .mobile-logo {
    display: none;
    height: 40px;
  }

  @media (max-width: 768px) {
    .mobile-logo {
      display: inline-block;
      height: 40px;
      margin-left: 10px;
    }

    .custom-navbar {
      z-index: 999;
      margin-top: 30px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      flex-direction: column;
      align-items: flex-start;
    }

    .custom-navbar .testnav {
      flex-direction: column;
      width: 100%;
    }

    .custom-navbar .testnav .nav-item {
      margin-right: 0;
      width: 100%;
    }

    .custom-navbar .testnav .nav-link {
      width: 100%;
      padding: 10px 9px;
      font-size: 15px;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .custom-navbar-toggler {
      display: flex;
      margin-left: auto;
      margin-right: 10px;
    }

    .custom-sidebar {
      width: 80%;
      right: -80%;
    }

    .custom-sidebar.active {
      right: 0;
    }

    .container-fluid {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    .custom-navbar .testnav .nav-item:nth-child(n + 3) .nav-link::before {
      display: none;
    }

    .custom-toggle-btn {
      width: 38px;
      height: 30px;
      padding: 6px 8px;
    }

    .custom-toggler-icon,
    .custom-toggler-icon::before,
    .custom-toggler-icon::after {
      width: 20px;
      height: 2px;
    }

    .custom-navbar .testnav .nav-item:first-child .nav-link {
      padding-left: 24px;
      padding-right: 24px;
    }
  }
  
/* ==========================================================
   BREAKING NEWS TICKER STYLES
   ----------------------------------------------------------
   Features:
   - News link style
   - Breaking news container (desktop + mobile)
   - Scrolling ticker text animation
   - Responsive adjustments for small screens (≤576px)
   ========================================================== */

/* 🔹 News Link (inside ticker) */
  
.custom-news-link {
    color: black !important;
    text-decoration: none;
}

  .breaking-news-wrapper {
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #b71c1c;
    padding: 10px 20px; /* slightly reduced padding */

    font-size: 0.95rem; /* small font size tweak */
    font-weight: 500;
    border-bottom: 1px solid gainsboro;
    overflow: hidden;
    white-space: nowrap;
  }

  .breaking-label {
    font-weight: 700;
    margin-right: 16px;
    font-size: 1.1rem;
    color: #b71c1c;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .news-scroll {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

.scrolling-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: scroll-left 85s linear infinite; /* Balanced speed */
  font-size: 0.9rem;
  font-weight: bold;
  color: #000;
  line-height: 1.4;
  letter-spacing: 0.3px;
}
.scrolling-text:hover {
  animation-play-state: paused;
  cursor: pointer;
}

  @keyframes scroll-left {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @media (max-width: 576px) {
    .breaking-news-wrapper {
      flex-direction: row; /* Make sure it's row even on mobile */
      align-items: center;
      flex-wrap: nowrap;
      font-size: 0.9rem;
    }

    .breaking-label {
      font-size: 1rem;
      margin-right: 2px;
      margin-left: -12px;
      white-space: nowrap;
    }

    .news-scroll {
      flex: 1;
      overflow: hidden;
    }

    .scrolling-text {
      padding-left: 100%;
      white-space: nowrap;
    }
  }
  
  
/* ==========================================================
   HERO SECTION CSS
   ----------------------------------------------------------
   Features:
   - Hero cards with hover zoom effect
   - Category badges with color variations
   - Title, date, and responsive text styling
   - Responsive layout for mobile (≤ 768px)
   ========================================================== */

.hero-content .title a:hover {
  color: #d00000 !important;
}
.title a {
  color: white; /* Bootstrap color override */
  text-decoration: none; /* Remove underline */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Shadow for readability */
}

  .hero-section {
    margin: 25px 10px;
    border: 1px solid gainsboro;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
  }

  .hero-card {
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: flex-end;
    background-color: #000;
  }

  .hero-card.large {
    height: 100%;
    min-height: 515px;
  }

  .hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

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

  .hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding:0px 10px;
  }

  .hero-card:hover .title,
  .hero-card:hover .title.small {
    color: red !important;
  }

  .hero-content .category {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 8px;
    text-transform: uppercase;
	background-color: #b91c1c;
  }

  .hero-content .title {
    font-size: 0.9rem;
    font-weight: 800;
    margin: 5px 0;
    line-height: 1.3;
    transition: color 0.3s ease;
  }

  .hero-content .title.small {
    font-size: 0.8rem;
    font-weight: 700;
  }

  .hero-content .title.small a {
    text-decoration:none;
	color:white;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  }
  
  .hero-content .date {
    font-size: 0.8rem;
    opacity: 0.9;
    font-weight: 600;
  }

  .hero-content .date i {
    margin-right: 5px;
    margin-right: 5px;
  }

  /* Category Colors */
  .category.travel {
    background-color: #ffc107;
    color: #000;
  }
  .category.fashion {
    background-color: #e91e63;
    color: #fff;
  }
  .category.sports {
    background-color: #4caf50;
    color: #fff;
  }
  .category.gadgets {
    background-color: #333;
    color: #fff;
  }

  @media (max-width: 768px) {
    .hero-section {
      display: flex;
      flex-direction: column;
      gap: 15px; /* Optional spacing between cards */
    }

    .hero-card {
      width: 100% !important; /* Full width */
      max-width: 100%;
      height: auto; /* Reset previous height */
      aspect-ratio: 1 / 1; /* Make card square */
      margin-bottom: 0; /* handled by gap */
    }

    .hero-card.large {
      min-height: unset;
      height: auto;
      aspect-ratio: 1 / 1;
    }

    /* Ensure images fill the card fully and maintain cover */
    .hero-card img {
      height: 400px;
      width: 400px;
      object-fit: cover;
    }
  }
  
  /* ==========================================================
   CRIME TAB SECTION STYLES
   ----------------------------------------------------------
   Features:
   - Image cards with hover zoom effect
   - Category badge styling
   - Tab navigation (desktop & mobile responsive)
   - Carousel height adjustments
   - Mobile-friendly dropdown select for tabs
   ========================================================== */
  
  
.tab-card-content{  
  color: white; /* Bootstrap color override */
  text-decoration: none; /* Remove underline */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); 
}

  .tab-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    height: 260px;
    cursor: pointer;
  }

  .tab-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .tab-image-card:hover img {
    transform: scale(1.05);
  }

  .category-badge {
    background-color: #e91e63;
    color: white;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.875rem;
    display: inline-block;
    margin-bottom: 6px;
  }

  .tab-card-content {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: transparent;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    transition: color 0.3s ease;
    user-select: none;
  }

  .tab-card-content small {
    display: block;
    font-weight: normal;
    font-size: 0.875rem;
    margin-top: 2px;
  }

 .tab-image-card:hover .tab-card-content a {
  color: #ffc107;
}

  .custom-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin: 10px 10px;
    border: 1px gainsboro solid;
    border-radius: 8px;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    margin-bottom: 1rem;
  }

  .section-header h2 {
    font-weight: bold;
    font-size: 28px;
  }

  .crime-Tab {
    border: none;
  }

  .crime-Tab .nav-link {
    padding: 10px 16px;
    border: none;
    background-color: white;
    font-weight: bold;
    color: black;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.4s ease, color 0.4s ease;
    font-size: 0.95rem;
  } 

  .crime-Tab .nav-link.active {
    background-color: red;
    color: white !important;
  }

  #middleCarousel .carousel-inner {
    height: 535px;
  }

  #middleCarousel .carousel-item {
    height: 100%;
  }

  #middleCarousel .tab-image-card {
    height: 100%;
  }

  /* Base Styles (for Desktop) */
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .crime-Tab {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
    padding-left: 0;
  }

  .crime-Tab .nav-item {
    list-style: none;
  }

  @media (max-width: 767.98px) {
    .section-header {
      flex-direction: column;
      align-items: stretch;
    }
    .trend-nav-link {
      font-size: 10px;
      left: 0;
    }
    .crime-Tab {
      flex-direction: column;
      width: 100%;
    }

    .crime-Tab .nav-link {
      width: 100%;
      text-align: left;
      margin-bottom: 8px;
      box-sizing: border-box;
    }
  }
  @media (max-width: 768px) {
    .crime-Tab {
      display: none !important;
    }
    .crime-tab-select {
      display: block !important;
      margin-top: 10px;
    }
  }

  @media (min-width: 769px) {
    .crime-tab-select {
      display: none !important;
    }
  }
  
  
/* ==========================================================
   REGION SECTION STYLES
   ----------------------------------------------------------
   Features:
   - Region cards with hover zoom & overlay text
   - Badge styling for region categories
   - Responsive region news grid layout
   - Section header & container styling
   - Tabs for region filtering (desktop) 
   - Dropdown select for region filtering (mobile)
   ========================================================== */
  
  .region-card-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    height: 280px;
    transition: all 0.3s ease-in-out;
  }

  .region-card-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
  }

  .region-card-wrapper:hover img {
    transform: scale(1.05);
  }

  .region-badge {
    background-color: #e91e63;
    color: white;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 6px;
    display: inline-block;
  }

  .region-card-content {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: transparent;
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  }

  .region-card-content small {
    display: block;
    font-weight: normal;
    font-size: 12px;
  }

  .region-card-wrapper:hover .region-card-content {
    color: #ffc107;
  }

  .region-container {
    max-width: 100%;
    padding: 1rem;
    margin: 10px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  }

  .region-section-header h2 {
    font-weight: bold;
    font-size: 1.5rem;
  }

  .region-tabs {
    gap: 6px;
    border-bottom: none !important;
  }

  .region-tabs .nav-link {
    padding: 8px 14px;
    background-color: white;
    font-weight: bold;
    color: black;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  .region-tabs .nav-link.active,
  .region-tabs .nav-link:hover {
    background-color: red !important;
    color: white !important;
  }

  .region-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
  @media (max-width: 768px) {
    .region-tabs {
      display: none !important;
    }

    .region-tab-select {
      display: block !important;
      margin-top: 10px;
     
    }
  }

  @media (min-width: 769px) {
    .region-tab-select {
      display: none !important;
    }
  }
  
/* ==========================================================
   TRENDING SECTION STYLES
   ----------------------------------------------------------
   Features:
   - Main news & small news cards with hover zoom
   - Title overlays with shadows for readability
   - Sidebar with thumbnail news + horizontal tabs
   - Heading with red underline style
   - Category badges
   - Responsive grid adjustments for tablet & mobile
   - Tab dropdown replacement on small screens
   ========================================================== */
  
  
a {
  color: white !important; ;           /* Bootstrap color override */
  text-decoration: none !important; /* Underline/remove override */
  font-size: 14px ;
  font-weight: 700;
  line-height: 1.2;
  
  
}

.small-news-title a {
  color: white; /* Bootstrap color override */
  text-decoration: none; /* Remove underline */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Shadow for readability */
}

.news-title a {
  color: white; /* Bootstrap color override */
  text-decoration: none; /* Remove underline */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Shadow for readability */
}
.small-news-img {
  width: 100%;
  height: 155px;
  object-fit: cover;
  max-width: 264px !important;
  border-radius: 6px;
}


.news-title a:hover {
  color: #ffc107 !important;
}

.small-news-title a:hover {
  color: #ffc107 !important;
}


/* .trending-content */

.section-trending {
    padding: 10px;
    margin-right: 10px;
    margin-left: -5px;
  
    margin-bottom: 15px;
    /* border: #ddd solid 0.5px; */
    border-radius: 8px;
  }
  .heading-with-long-red-line {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .heading-with-long-red-line h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: white;
    padding-right: 20px;
    z-index: 2;
    position: relative;
  }
  
  .long-red-line {
    flex-grow: 1; /* Fill the remaining space */
    height: 3px; /* Thickness */
    background-color: red;
    margin-left: -10px; /* Optional: overlap or tighter joint */
    z-index: 1;
    margin-right: 30px;
  }
  .category-badge {
    background-color: #e91e63;
    color: white;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
  }
  
  .main-img {
    width: 537px;
    height: 517px;
    object-fit: cover;
  
    border-radius: 6px;
    transition: transform 0.3s ease;
  }

.main-img,
.small-news-img {
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); /* smooth & natural easing */
  will-change: transform; /* performance hint */
}

.main-img:hover,
.small-news-img:hover {
  transform: scale(1.15); /* bigger zoom */
}

  .main-news-overlay,
  .small-news-overlay {
    position: absolute;
    bottom: -18px;
    left: 10px;
    right: 10px;
    color: white;
    background: transparent;
    padding: 10px 12px;
    border-radius: 6px;
    z-index: 2;
  }
  
  .news-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
    color: white;
    cursor: pointer;
  }
  
  .news-title:hover {
    color: #e91e63;
  }
  
  .small-news-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
  }
  
  .small-news-title:hover {
    color: #ffc107;
  }
  
  .date-text {
    font-size: 0.7rem;
    color: white;
    font-weight: 600;
    margin-top: -14px;
  }
  
  /* .nav-line {
    border-left: 2px solid red;
    padding-left: 15px;
    margin-bottom: 20px;
  } */
  
  .nav-link {
    font-weight: bold;
    font-size: 20px;
    color: black;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .nav-link:hover,
  .nav-link.active {
    color: #e91e63 !important;
  }
  
  .main-news-container {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    height: 100%;
  }
  
  .sidebar-thumb {
    width: 70px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
  }
  .news-title-sm a {
  color: black !important;
  text-decoration: none !important;
}
.news-title-sm a {
  color: black !important;
  text-decoration: none !important;
}

  
  .news-title-sm:hover {
    color: #d63384;
  }
  
 
  
  /* Sidebar 2 horizontal tabs style */
  .sidebar-tabs-container {
    width: 100%;
    background: white;
    border: 1.5px solid gainsboro;
    border-radius: 6px;
    overflow: hidden;
    user-select: none;
    position: relative;
    font-weight: 600;
  }
  
  .sidebar-tabs {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    height: 42px;
  }
  
  .sidebar-tabs li {
    flex: 1 1 50%;
    text-align: center;
    line-height: 42px;
    cursor: pointer;
    color: black;
    transition: color 0.3s ease;
    position: relative;
    z-index: 2;
  }
  
  .sidebar-tabs li.active {
    color: white;
  }
  
  /* The moving highlight background */
  .sidebar-tabs-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: red;
    border-radius: 4px;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
  }
  
  .tab-content-sidebar {
    margin-top: 15px;
    padding: 10px;
    /* border: 1px solid #0d6efd; */
    border-radius: 6px;
    background: white;
    min-height: 150px;
    font-size: 15px;
    color: #212529;
  }
  
  .sidebarmain {
    border: gainsboro 0.5px solid;
    padding: 10px;
  
    border-radius: 8px;
  }
  .sidebar-news-item {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    align-items: center;
  }
  
  .sidebar-thumb {
    width: 120px;
    height: 120px; 
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 2px solid #0d6efd;
  }
  
  .sidebar-news-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .news-title-sm {
    font-size: 1rem;
    font-weight: 500;
    color: #212529;
    margin: 0 0 8px;
    line-height: 1.3;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  .news-title-sm:hover {
    color: #d63384;
  }
  
  .date-textslider {
    font-size: 0.7rem;
    color: black;
    margin: 0;
  }
  
  @media (max-width: 992px) {
    .trending-content {
      flex-direction: column; /* Mobile-e column layout */
    }
  
    .square-card {
      height: 400px;
    }
    
  
    .custom-trending {
      flex: 0 0 100%;
      max-width: 100%;
      margin-right: 0;
      margin-bottom: 15px;
    }
    .main-img {
      width: 380px;
      height: 250px;
      padding-bottom: 10px;
    
    }
  }
  
  /* Trend Nav Link Button Styles */
  .trend-nav-link {
    padding: 10px 10px;
    margin-bottom: 10px;
    border: none;
    outline: none;
    background-color: white;
    font-size: 0.9rem;
    font-weight: bold !important;
    color: black !important;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.2s ease;
    box-shadow: none;
    display: inline-block;
    text-align: center;
    width: 100%; /* Full width in all views for better alignment */
  }
  
  /* Active state */
  .trend-nav-link.active {
    background-color: red;
    color: white;
  }
  
  /* Desktop Styles for .custom-trending */
  .custom-trending {
    flex: 0 0 70.83%;
    max-width: 70.83%;
    border: 1px solid gainsboro;
    border-radius: 8px;
    margin-right: 8px;
    padding: 10px;
  }
  
@media (max-width: 768px) {
  body {
    overflow-x: hidden; /* Prevent horizontal scroll */
  }

  .main-img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    display: block; /* Removes inline whitespace */
  }

  .small-news-img {
   max-width: 368px !important;
    height: 230px !important;
    object-fit: cover;
    display: block;
  }

  .main-news-container {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  .square-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .custom-trending {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box;
  }

  .col-lg {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .section-trending {
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box;
  }

  .row,
  .container {
    margin: 0 !important;
    padding: 0 !important;
  }
   #leftTab {
    display: none !important;
  }
  
}


  
  @media (min-width: 769px) {
    .tab-dropdown {
      display: none !important;
    }
    .fixed-tab-height {
      min-height: 520px; /* Same as your .hero-card.large */
    }
  }

/* ==========================================================
   ANALYSIS SECTION STYLES
   ----------------------------------------------------------
   Features:
   - Horizontal scroll cards with smooth scroll
   - Image covers card top, maintains aspect ratio
   - Card hover lift effect
   - Nav tabs for filtering analysis categories
   - Responsive for tablet & mobile
   ========================================================== */
  
  
.analysis-card-body a {
  color: black !important;
}


  .analysis-section {
    padding: 30px 0;
    margin: 12px;
    border: 1px solid gainsboro;
    border-radius: 8px;
  }

  .section-heading-tabs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
  }

  .section-heading-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
  }

  .section-heading-left h2 {
    font-weight: bold;
    font-size: 1.5rem;
    color: black;
    margin: 0;
    white-space: nowrap;
  }

  .section-heading-left hr {
    flex-grow: 1;
    border: none;
    height: 4px;
    background-color: #d00000;
    margin: 0;
    min-width: 120px;
  }

  .nav-tabs {
    border-bottom: none;
  }

  .nav-tabs .nav-link {
    color: #d00000;
    font-weight: 600;
    border: none;

    padding: 5px 10px;
    white-space: nowrap;
  }

  .nav-tabs .nav-link.active {
    color: #a80000;
  }

  .scroll-container {
    position: relative;
    padding: 0 60px;
  }

  .scroll-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
  }

  .scroll-wrapper::-webkit-scrollbar {
    display: none;
  }

  .analysis-card {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    border-radius: 15px;
    transition: transform 0.3s;
    flex: 0 0 calc(25% - 15px);
    min-height: 300px;
    display: flex;
    flex-direction: column;
  }

  .analysis-card:hover {
    transform: translateY(-7px);
  }

.analysis-card img {
  width: 100%;
  aspect-ratio: 1 / 1;        /* Keeps image square */
  object-fit: cover;          /* Ensures image covers the container without distortion */
  object-position: center;    /* Centers the image */
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}


  .analysis-card-body {
    padding: 10px;
    text-align: left;
    flex-grow: 1;
  }

  .analysis-card-body h5 {
    font-weight: bold;
    font-size: 1rem;
    color: #000;
    margin-bottom: 10px;
  }

  .analysis-card-body .date {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 8px;
  }

  .analysis-card-body p {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 0;
  }

  .scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #d00000;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  .scroll-btn.left {
    left: 10px;
  }

  .scroll-btn.right {
    right: 10px;
  }

  .analysis-nav-link {
    padding: 10px 10px;
    border: none;
    outline: none;
    font-size: 1rem;
    background-color: white;
    font-weight: 600;
    color: black;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.2s ease;
    box-shadow: none;
    text-decoration: none;
  }

  /* Active state */
  .analysis-nav-link.active {
    background-color: red;
    color: white;
  }
  @media (max-width: 992px) {
    .analysis-card {
      flex: 0 0 calc(50% - 10px);
    }
  }

  @media (max-width: 576px) {
    .analysis-card {
      flex: 0 0 100%;
    }
  }
  @media (max-width: 768px) {
    .analysis-card img {
      aspect-ratio: none;
      height: auto;
    }

    .analysis-card {
      min-height: 360px; /* Optional: make the card itself taller */
    }
  }
  
  
/* ==========================================================
   VIDEO SECTION STYLES
   ----------------------------------------------------------
   Features:
   - Left-side video cards with hover effects
   - Play icon pulse animation
   - Main video iframe display
   - Responsive layout for mobile
   ========================================================== */
  
  .FORmaring {
    margin-right: 20px;
  }

  .video-section {
    background-color: black;
    padding: 80px 10px 10px;
    min-height: 80vh;
    border-radius: 10px;
  }

  .videosection-title {
    position: relative;

    margin-left: 40px;
    margin-right: 40px;
  }

  .videosection-title h2 {
    margin-top: 10px;
    padding-right: 20px;
    display: inline-block;
    font-size: 1.8rem;
    padding: 25px 0px;
    z-index: 2;
    position: relative;
    font-weight: 600;
    color: #fff;
  }

  .videosection-title::before,
  .videosection-title::after {
    content: "";
    position: absolute;
    left: 220px;
    right: 0px;
    border-top: 3px dotted #505050;
    z-index: 1;
  }

  .videosection-title::before {
    top: 45%;
    transform: translateY(-50%);
  }

  .videosection-title::after {
    top: 55%;
    transform: translateY(-50%);
  }

  .lcard-container {
    padding-left: 20px;
    padding-right: 10px;
    overflow-y: auto;
    max-height: calc(95vh - 100px);
  }

  .lcard {
    display: flex;
    height: 160px;
    background-color: #1a1a1a;
    border-radius: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background 0.3s ease;
    overflow: hidden;
    align-items: center;
    position: relative;
  }

  .lcard:hover {
    background-color: #2a2a2a;
  }

  .lcard-img-container {
    position: relative;
    width: 40%;
    height: 100%;
  }

  .lcard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: pulse 1.6s infinite;
    z-index: 2;
  }

  .play-icon::before {
    content: "";
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #000;
    margin-left: 2px;
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
      box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }

  .lcard-content {
    width: 60%;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
  }

  .lcard-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px 0;
    line-height: 1.2;
  }

  .lcard-date {
    font-size: 12px;
    color: #bbb;
  }

  .lcard-tag {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 5px;
    margin-bottom: 6px;
    display: inline-block;
    color: white;
    width: fit-content;
  }
  .lcard-tag.politics {
    background-color: #e91e63; /* pink/red shade */
  }

  .lcard-tag.animals {
    background-color: #00bcd4;
  }
  .lcard-tag.health {
    background-color: #4caf50;
  }
  .lcard-tag.fitness {
    background-color: #f50057;
  }
  .lcard-tag.technology {
    background-color: #3f51b5;
  }

  .main-video {
    height: calc(80vh - 100px);
    border-radius: 12px;
    overflow: hidden;
  }

  .main-video iframe {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: none;
  }

  .main-video-info {
    margin-top: 15px;
    color: #fff;
    padding-left: 20px;
  }

  .main-video-info .lcard-tag {
    margin-bottom: 10px;
    font-weight: 600;
  }

  .row.align-top {
    align-items: flex-start;
  }

  @media (max-width: 768px) {
    .lcard {
      flex-direction: column;
      height: auto;
    }

    .lcard-img-container {
      width: 100%;
      height: auto;
    }

    .lcard-img {
      width: 100%;
      height: auto;
      border-radius: 10px 10px 0 0;
    }

    .lcard-content {
      width: 100%;
      align-items: center;
      text-align: center;
      padding: 8px;
    }

    .main-video {
      height: auto;
    }

    .main-video-info {
      padding-left: 0;
    }
  }
  
/* ==========================================================
   NEWS UPDATE / ARCHIVE / CALENDAR SECTION
   ----------------------------------------------------------
   Features:
   - News updates cards
   - Carousel with controls & captions
   - Calendar styling
   - Archive buttons & selectors
   - Fully responsive
   ========================================================== */
  
  .formargin {
    margin-right: 10px;
    margin-left: -10px;
    margin-top: 15px;
    margin-bottom: 25px;
  }

  .nu-main-row {
    display: flex;
    gap: 20px;
  }

  .nu-left-section,
  .nu-right-section {
    background-color: white;
    border-radius: 12px;
    border: 1px solid gainsboro;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
    display: flex;
    flex-direction: column;
  }

  .nu-left-section {
    width: 75%;
  }

  .nu-right-section {
    width: 25%;
  }

  .nu-heading {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
  }

  .nu-heading::before,
  .nu-heading::after {
    content: "";
    flex: 1;
    height: 2px;
    background: red;
  }

  .nu-heading h3 {
    margin: 0 20px;
    font-weight: 600;
    font-size: 1.5rem;
    text-align: center;
    white-space: nowrap;
  }

  .nu-inner-left {
    flex: 1;
    display: flex;
    gap: 20px;
  }

  .nu-colman {
    width: 65%;

    display: flex;
    flex-direction: column;
  }

  .nu-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 450px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  }

  .nu-card-header {
    padding-left: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid gainsboro;
    margin-bottom: 20px;
  }

  .nu-card-title {
    font-weight: 700;
    font-size: 1rem; /* Reduced from 1.2rem */
  }

  .nu-carousel-controls a {
    color: rgb(248, 27, 27);
    font-weight: 700;
    padding-right: 10px;
    padding-bottom: 15px;
    font-size: 2rem; /* Reduced from 3rem */
    text-decoration: none;
    user-select: none;
  }

  .nu-carousel-controls a:hover {
    color: #0056b3;
  }

  .nu-carousel-caption {
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: left;
    z-index: 10;
  }

  .nu-carousel-caption h6 {
    font-weight: 700;
    font-size: 0.8rem; /* Reduced from 1.1rem */
    margin: 0 0 5px;
  }

  .nu-carousel-caption .nu-carousel-date {
    font-size: 0.7rem; /* Reduced from 0.9rem */
    font-weight: 400;
    color: #f2f2f2;
    margin-bottom: 10px;
  }

  .nu-carousel-caption p {
    margin: 5px 0 0;
    font-size: 0.7rem; /* Reduced from 0.95rem */
    line-height: 1.4;
  }

  .carousel-inner {
    position: relative;
  }

  .carousel-item {
    position: relative;
  }

  .nu-btn {
    display: block;
    text-align: center;
    padding: 12px 0;
    background: red;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-top: 1px solid #ddd;
    transition: background-color 0.3s ease;
    border-radius: 0 0 10px 10px;
  }

  .nu-btn:hover {
    background: #0056b3;
  }

  .nu-carousel {
    width: 100%;
    overflow: hidden;
  }

  .nu-carousel img {
    width: 100%;
    height: 480px;
    display: block;
  }

  .nu-news {
    width: 35%;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    height: 450px;
  }

  .nu-news h5 {
    text-align: center;
    font-weight: bold;
    font-size: 1rem; /* Slightly smaller but close to original */
    margin-bottom: 15px;
  }

  .nu-news-item {
    flex: 1;
    display: flex;
    background-color: #fdfdfd;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.04);
    margin-bottom: 10px;
  }

  .nu-news-item:last-child {
    margin-bottom: 0;
  }

.nu-news-item img {
  width: 120px;
  height: 100%;
  max-height: 120px;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  border-radius: 6px 0 0 6px;
}

.nu-news-title h6 {
  font-size: 0.85rem;
  font-weight: 600;
  color: #000;
  margin: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-news-title h6:hover {
  color: #ffc107;
}

  .nu-news-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;
  }

  .nu-news-title {
    color: black;
	font-size: 0.85rem; /* Reduced from 1rem */

    margin-bottom: 5px;
  }

  .nu-news-date {
    font-size: 0.75rem; /* Reduced from 0.9rem */
    color: gray;
  }

  /* Static Calendar Styling */
  .calendar {
    width: 100%;
    height: 400px;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    user-select: none;
  }

  .calendar-header {
    text-align: center;
    font-weight: 700;
    font-size: 1.3rem; /* Heading size kept intact */
    margin-bottom: 15px;
    color: red;
  }

  .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 0.7rem; /* Reduced */
    color: #555;
    margin-bottom: 8px;
  }

  .calendar-weekdays div {
    padding: 8px 2px;
    border-bottom: 1px solid #ddd;
  }

  .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .calendar-day {
    padding: 12px 0;
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8rem; /* Reduced */
    cursor: default;
    transition: background-color 0.2s ease;
  }

  .calendar-day:hover {
    background-color: #f5f5f5;
  }

  /* Differentiate days outside month */
  .calendar-day.outside {
    color: #bbb;
  }

  /* Highlight today's date */
  .calendar-day.today {
    background-color: red;
    color: white;
    font-weight: 700;
  }

  /* Buttons for archive section */
  .archive-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
  }

  .archive-buttons button {
    flex: 1;
    padding: 10px 0;
    font-weight: 600;
    font-size: 0.85rem; /* Reduced */
    border-radius: 8px;
    border: 2px solid red;
    background-color: white;
    color: red;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .archive-buttons button:hover {
    background-color: red;
    color: white;
  }

  /* Month & Year selectors */
  .archive-selectors {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }

  .archive-selectors select {
    flex: 1;
    padding: 8px 10px;
    font-size: 0.85rem; /* Reduced */
    border: 1.5px solid #ddd;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.3s ease;
  }

  .archive-selectors select:hover,
  .archive-selectors select:focus {
    border-color: red;
    outline: none;
  }

  @media (max-width: 992px) {
    /* Main Row becomes vertical */
    .nu-main-row {
      flex-direction: column;
      min-height: auto;
      gap: 20px;
    }

    /* Left and Right sections full width */
    .nu-left-section,
    .nu-right-section {
      width: 100%;
    }

    /* Inner left section becomes vertical */
    .nu-inner-left {
      flex-direction: column;
      gap: 20px;
    }

    /* Column and News Adjustments */
    .nu-colman,
    .nu-news {
      width: 100%;
      height: auto;
    }

    .nu-card {
      height: 400px;
    }

    .nu-news-item {
      flex-direction: column;
      height: auto;
    }

  .nu-news-item img {
  width: 50px;        
  height: 200px;       
  object-fit: cover;  
  display: block;      
}

    .nu-news-content {
      width: 100%;
      padding: 10px;
    }

    /* Calendar responsiveness */
    .calendar {
      height: auto;
      padding: 15px;
    }

    .calendar-weekdays,
    .calendar-days {
      grid-template-columns: repeat(7, 1fr);
      font-size: 0.65rem;
    }

    /* Archive section spacing */
    .archive-buttons {
      flex-direction: column;
    }

    .archive-buttons button {
      width: 100%;
    }

    .archive-selectors {
      flex-direction: column;
    }

    .archive-selectors select {
      width: 100%;
    }

    /* Headings */
    .nu-heading h3 {
      font-size: 1.2rem;
    }

    /* Margin fix for .formargin */
    .formargin {
      margin-left: 0;
      margin-right: 0;
    }
    .nu-carousel img {
    }
  }
  
   #inline-datepicker {
      margin-top: 20px;
    }
    .ui-datepicker {
      font-size: 16px;
    }
    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
      font-size: 16px;
      padding: 2px;
    }
	
	
/* ==========================================================
   INTERVIEW SECTION
   ----------------------------------------------------------
   Features:
   - Section layout and heading
   - Interview cards with hover effect
   - Carousel controls & captions
   - Custom buttons
   ========================================================== */
	
	 .interview-section {
        padding: 60px 20px;
        border: 1px solid gainsboro;
        margin: 12px;
        border-radius: 8px;
      }

      .section-heading-wrapper {
        display: flex;
        align-items: center;
        
      }

      .section-heading-wrapper hr {
        flex-grow: 1;
        border: none;
        height: 3px;
        background-color: red;
      }

      .section-heading-wrapper h2 {
        margin: 20px 20px;
        font-weight: bold;
        font-size: 2rem;
        white-space: nowrap;
        color: #d00000; 
      }

      .interview-card {
        border: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background: #ffffff;
        padding: 20px;
        border-radius: 10px;
        transition: transform 0.3s;
      }

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

      .interview-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #dee2e6;
      }

      .interview-card-heading {
        font-weight: bold;
        font-size: 14px;
        color: #000000; 
        margin: 0;
        text-align: left;
      }

      .interview-carousel-controls {
        display: flex;
        gap: 12px;
        font-size: 24px;
        font-weight: bold;
        color: #d00000; 
        cursor: pointer;
        user-select: none;
      }

      .interview-carousel-control-prev,
      .interview-carousel-control-next {
        display: flex;
        align-items: center;
        color: black !important;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 2px solid #d00000;
        transition: background-color 0.3s, color 0.3s;
        text-decoration: none;
      }

      .interview-carousel-control-prev:hover,
      .interview-carousel-control-next:hover {
        background-color: #d00000;
        color: white;
      }

      .interview-carousel .carousel-item img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 0.25rem;
        margin-bottom: 10px;
      }

      .interview-carousel-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 20px;
        text-align: left;
        border-radius: 0 0 0.25rem 0.25rem;
      }

      .interview-carousel-caption h6 {
        font-size: 14px;
        margin: 0;
		font-weight:bold;
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
      }

      .interview-carousel-caption p {
        font-size: 16px;
        margin: 5px 0 0;
      }

      .interview-btn-custom {
        background-color: #d00000;
        color: white;
        border: none;
        padding: 12px 24px;
        display: block;
        margin: 20px auto 0;
        border-radius: 4px;
        text-decoration: none;
        text-align: center;
        width: fit-content;
        font-weight: 500;
      }

      .interview-btn-custom:hover {
        background-color: #a80000;
        color: white;
      }

      .btn-primary {
        font-weight: bold;
        background-color: #d00000 !important;
        border-color: #d00000 !important;
      }

      .btn-primary:hover {
        background-color: #a80000 !important;
        border-color: #a80000 !important;
      }
      .btn-primary i {
        font-size: 1.25rem;
        line-height: 1;
        transition: color 0.3s ease;
      }

      .btn-primary:hover i {
        color: #ff0000; /* your red color */
      }
	  
	  
	  
/* ==========================================================
   FOOTER SECTION
   ----------------------------------------------------------
   Features:
   - Footer container & layout
   - Top line section
   - Navigation buttons
   - Social icons with brand colors
   - Contact box and text styling
   - Bottom credit section
   - Responsive adjustments
   ========================================================== */
	  
	  
/* === Footer Container === */
  .footer {
    padding: 60px 30px;
    border: 1px solid #dee2e6;
    margin-top: 25px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
  }

  /* === Top Line Section === */
  .footer .top-line {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 40px;
    gap: 20px;
  }

  .footer .top-line p {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    color: #2c3e50;
    margin-bottom: 0;
    max-width: 350px;
  }
  /* === Navigation Buttons === */
  .footer .nav-links {
    text-align: right;
    margin-top: 15px;
  }

  .footer .nav-links a {
    background-color: red;
    color: white;
    padding: 12px 22px;
    margin-left: 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-block;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(214, 51, 108, 0.3);
    transition: background-color 0.35s ease, transform 0.25s ease,
      box-shadow 0.3s ease;
  }

  .footer .nav-links a:hover {
    background-color: white;
    color: black !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(168, 44, 83, 0.5);
  }

  /* === Social Icons === */
  .footer .social-icons {
    text-align: right;
    margin-top: 12px;
    margin-right: -13px;
  }

  .footer .social-icons a {
    margin-left: 18px;
    color: #555;
    font-size: 28px;
    transition: color 0.3s ease, transform 0.3s ease;
  }

  .footer .social-icons a:hover {
    color: #6610f2;
    transform: scale(1.2);
  }

  /* === Divider === */
  .footer hr {
    margin: 40px 0;
    border-top: 1.5px solid #ced4da;
  }

  /* === General Text Styles === */
  .footer .title {
    font-weight: 700;
    font-size: 1rem;
    color: #1a1a1a;
  }

  .footer p {
    line-height: 1.6;
    color: #444;
    font-size: 17px;
  }

  .footer a {
    color: #d6336c;
    font-weight: 600;
    text-decoration: none;
  }

  .footer a:hover {
    color: #a82c53;
  
  }

  /* === Footer Left Column === */
  .footer-left .title {
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
    color: #333;
  }

  .footer-left p {
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
  }

  .footer-left img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .footer-left a:hover img {
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out;
  }

  /* === Contact Box (Right Column) === */
  .contact-box {
    text-align: left;
    padding-left: 12px;
  }

  .contact-box p {
    font-size: 16px;
    color: #343a40;
    margin-bottom: 10px;
    line-height: 1.6;
  }

  .contact-box i {
    font-size: 17px;
    vertical-align: middle;
    margin-right: 8px;
    opacity: 0.85;
  }

  .contact-box a {
    color: #d6336c;
    font-weight: 600;
    text-decoration: none;
  }

  .contact-box a:hover {
    color: #a82c53;
    text-decoration: underline;
  }

  /* === Responsive Styles === */

  @media (max-width: 768px) {
    /* Footer main layout adjustments */
    .footer {
      padding: 30px 20px;
      margin: 20px 10px;
      text-align: center;
    }

    .footer .top-line {
      flex-direction: column;
      text-align: center;
      gap: 15px;
    }

    .footer .top-line p {
      max-width: 100%;
      font-size: 1rem;
    }

    /* Navigation buttons stack nicely */
    .footer .nav-links {
      text-align: center;
      margin-top: 20px;
    }

    .footer .nav-links a {
      display: inline-block;
      margin: 8px 6px;
      padding: 10px 16px;
      font-size: 0.9rem;
    }

    /* Social icons centered */
    .footer .social-icons {
      text-align: center;
      margin-top: 18px;
    }

    .footer .social-icons a {
      margin: 6px;
      font-size: 15px;
      width: 30px;
      height: 30px;
      line-height: 30px;
    }

    /* Column handling */
    .footer .col-md-4,
    .footer-left .col-md-4 {
      width: 100% !important;
      max-width: 100%;
      margin: 15px 0;
      text-align: center !important;
    }

    .footer-left {
      text-align: center;
    }

    .footer-left img {
      margin: 0 auto 10px;
    }

    /* Contact box responsiveness */
    .contact-box {
      padding-left: 0;
      text-align: center;
    }

    .contact-box p {
      font-size: 15px;
    }

    .contact-box i {
      display: none; /* Optional: hide icon on mobile to save space */
    }

    /* Bottom credit section */
    .bottom-credit {
      flex-direction: column;
      padding: 20px 10px 10px;
      margin-bottom: 0;
      font-size: 16px;
    }

    .bottom-credit p {
      line-height: 1.4;
      margin-top: 10px;
    }
  }

  .footer .social-icons {
    text-align: right;
    margin-top: 12px;
  }

  .footer .social-icons a {
    margin: 0 10px;
    font-size: 18px;
    display: inline-block;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 50%;
    color: white;
    background-color: #888; /* fallback */
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  }

  /* Hover effect */
  .footer .social-icons a:hover {
    transform: scale(1.2) translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  /* Brand-specific background colors */
  .footer .social-icons a.facebook {
    background-color: #3b5998;
  }
  .footer .social-icons a.twitter {
    background-color: #1da1f2;
  }
  .footer .social-icons a.youtube {
    background-color: #ff0000;
  }
  .footer .social-icons a.linkedin {
    background-color: #0077b5;
  }
  .footer .social-icons a.instagram {
    background-color: #e4405f;
  }
  .footer .social-icons a.whatsapp {
    background-color: #25d366;
  }
  .footer .social-icons a.telegram {
    background-color: #0088cc;
  }

  .bottom-credit {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;

    margin-bottom: -40px;
    border-top: 1px solid #dee2e6;
    box-sizing: border-box;
    text-align: center;
    font-size: 18px;
    color: #495057;
  }

  .bottom-credit p {
    margin: 0;
    line-height: 1.3; 
  }

  .bottom-credit a {
    color: #d6336c !important;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .bottom-credit a:hover {
    color: #a82c53;
  }
  
  /* === Content Image Section === */
  
  	.comment {
	text-align: center;
}

.content_img {
  text-align: center;
  height: 100%;
}
.content_img img {
  max-height: 250px;
  border: 2px solid #ddd;
}
.content_title {
  margin-bottom: 25px;
  border-bottom: 4px solid #F00;
  display: inline-block;
  margin: ;
  padding-bottom: 5px;
}

.c24tv-mission-vision-section {
    padding: 50px 20px;
    background-color: #fdfdfd;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }

  .c24tv-section-header {
    text-align: center;
    margin-bottom: 40px;
  }

  .c24tv-main-title {
    font-size: 32px;
    font-weight: bold;
    color: black;
    display: inline-block;
    border-bottom: 4px solid #f00;
    padding-bottom: 8px;
    margin: 0 auto;
  }

  .c24tv-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
  }

  .c24tv-left {
    flex: 1;
    min-width: 280px;
    text-align: center;
  }

  .c24tv-image {
    max-width: 100%;
  }

  .c24tv-right {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .c24tv-card {
    background-color: #ffffff;
    padding: 25px 25px;
    border-left: 6px solid #d35400;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
  }

  .c24tv-card-title {
    font-size: 24px;
    color: #d35400;
    margin-bottom: 15px;
    font-weight: 600;
  }

  .c24tv-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .c24tv-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
  }

  .c24tv-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #27ae60;
    font-weight: bold;
  }
  
  
 .testimonial-section {
    padding: 60px 20px;

    font-family: "Noto Sans Bengali", sans-serif;
  }

  .testimonial-container {
    max-width: 1200px;
    margin: auto;
    text-align: center;
  }

  .testimonial-title {
    border-bottom: 4px solid #f00;
    display: inline-block;
    padding-bottom: 5px;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
  }

  .testimonial-description {
    font-size: 16px;
    color: #444;
    margin-bottom: 40px;
  }

  .testimonial-card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
  }

  .testimonial-card {
    background-color: #fdfdfd;
    padding: 25px 20px;
    border-radius: 10px;
    border: 2px solid transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: 0.3s ease;
  }

  .testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  }

  .testimonial-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
  }

  .testimonial-name {
    font-size: 18px;
    font-weight: 600;
    margin: 5px 0;
  }

  .testimonial-role {
    font-size: 14px;
    color: #222;
    margin-bottom: 15px;
    font-weight: bold;
  }

  .testimonial-feedback {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    text-align: left;
  }

  /* Color styling */
  .testimonial-green {
    color: #00695c;
  }
  .testimonial-border-green {
    border-color: #00695c;
  }

  .testimonial-pink {
    color: #d81b60;
  }
  .testimonial-border-pink {
    border-color: #d81b60;
  }

  /* Responsive */
  @media (max-width: 600px) {
    .testimonial-title {
      font-size: 28px;
    }
    .testimonial-feedback {
      text-align: justify;
    }
  }
  
  
      .blog-card {
        border: 1px solid #ddd;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 30px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      }

      .blog-meta {
        font-size: 14px;
        color: #888;
        background: #f0f0f0;
        padding: 10px 15px;
      }

      .blog-title {
        font-weight: bold;
        font-size: 1.5rem;
        padding: 10px 15px 0;
      }

      .blog-card img {
        width: 100%;
        height: auto;

        object-fit: cover;
      }

      .blog-text {
        padding: 10px 15px;
        font-size: 1rem;
        line-height: 1.6;
      }

      .blog-actions {
        padding: 10px 15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
      }

      .social-icons {
        display: flex;
        gap: 10px;
      }

      .social-icons a {
        width: 36px;
        height: 36px;
        background-color: #e9ecef;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-size: 1rem;
        transition: 0.3s ease-in-out;
        text-decoration: none;
      }

      .social-icons a:hover {
        transform: translateY(-3px);
        color: white;
      }

      .social-icons a.facebook:hover {
        background-color: #3b5998;
      }

      .social-icons a.twitter:hover {
        background-color: #1da1f2;
      }

      .social-icons a.linkedin:hover {
        background-color: #0077b5;
      }

      .social-icons a.whatsapp:hover {
        background-color: #25d366;
      }

      .comment-form {
        padding: 0 15px 20px;
      }

      .comment-form label {
        font-weight: 600;
        margin-top: 15px;
      }

      .comment-form textarea {
        resize: none;
      }

      .sidebar {
        margin-bottom: 30px;
        background: #f8f9fa;
        padding: 20px;
        border: 1px solid gainsboro;
        border-radius: 8px;
        position: sticky;
        top: 20px;
      }
      .sidebar ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
      }

      .sidebar ul li {
        background-color: #f0f0f0;
        margin-bottom: 8px;
        padding: 10px 15px;
        position: relative;
        cursor: pointer;
        font-weight: 600;
        color: #333;
        border-radius: 6px;
        transition: background-color 0.3s ease, color 0.3s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .arrow-icon {
        color: #333;
        font-size: 1.2rem;
        transition: color 0.3s ease;
      }

      .sidebar ul li:hover {
        background-color: #dc3545;
        color: white;
      }

      .sidebar ul li:hover .arrow-icon {
        color: white;
      }
      #scrollTopBtn {
        font-weight: bold;
        transition: background-color 0.3s, color 0.3s;
      }

      #scrollTopBtn:hover {
        background-color: #0d6efd;
        color: white;
      }

      .ad-placeholder .card {
        min-height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        background-color: #f0f0f0;
        font-weight: 500;
        font-size: 0.95rem;
        color: #555;
      }
      #navbar-container {
        position: sticky;
        top: 0;
        z-index: 999;
      }
	  
 .breadcrumb-section {
    height: 150px;
    width: 100%;
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 40%),
        rgba(0, 0, 0, 50%)
      ),
      url("/assets/images/Crime/crimebg.png");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding-left: 20px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
  }

  .breadcrumb-section a {
    color: white;
    text-decoration: none;
    margin-right: 10px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
  }

  .breadcrumb-section a:hover {
    color: red;
  }

  .breadcrumb-section i {
    margin: 0 6px;
  }

.tag-list a {
  color: black !important;
  text-decoration: none !important;
  border: none !important;
  font-size: 14px; 
}

.tag-list a:hover {
  color: #ffc107;
}

.breadcrumb-section {
    height: 150px;
    width: 100%;
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 40%),
        rgba(0, 0, 0, 50%)
      ),
      url("/assets/images/Crime/crimebg.png");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding-left: 20px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
  }

  .breadcrumb-section a {
    color: white;
    text-decoration: none;
    margin-right: 10px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
  }

  .breadcrumb-section a:hover {
    color: red;
  }

  .breadcrumb-section i {
    margin: 0 6px;
  }

  /* Section container */
      .section-category {
        padding: 15px 10px;
        margin-bottom: 15px;
        margin-top: 15px;
        margin-right: 15px;
        border-radius: 8px;
      }

      /* Left category news cards grid */
      .category-news {
        background: white;
        border: 1px solid gainsboro;
        border-radius: 8px;
        padding: 15px;
        height: 100%;
      }

      /* Category card square aspect ratio with hover & image zoom */
      .category-card {
        position: relative;
        width: 100%;
        padding-top: 100%;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background-color: #fff;
        border: 1px solid #ddd;
        display: flex;
        align-items: flex-end;
      }

      .category-card:hover {
        box-shadow: 0 10px 20px rgb(0 0 0 / 0.15);
      }

      .category-card img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        transition: transform 0.4s ease;
      }

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

      .category-card-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
        color: white;
        border-radius: 0 0 8px 8px;
      }

      .category-card-content h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: color 0.3s ease;
      }

      .category-card-content h5:hover {
        color: red;
        text-decoration: underline;
      }

      .category-card-content p {
        font-size: 0.8rem;
        margin: 4px 0 0 0;
      }

      .category-tag {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 4px;
        margin-bottom: 6px;
        color: white;
      }

      /* Tag Colors by Category */
      .tag-khuni {
        background-color: #dc3545;
      }
      .tag-oporohon {
        background-color: #6f42c1;
      }
      .tag-dhorshon {
        background-color: #d63384;
      }
      .tag-cyber {
        background-color: #0d6efd;
      }
      .tag-madok {
        background-color: #198754;
      }
      .tag-poribar {
        background-color: #fd7e14;
      }

      /* Sidebar styles */
      .sidebarmain {
        border: 1px solid gainsboro;
        padding-top: 15px;

        border-radius: 8px;
        max-height: 750px;
        background: white;
        margin-left: 15px !important;
      }

      .sidebar-tabs-container {
        width: 100%;
        border: 1.5px solid gainsboro;
        border-radius: 6px;
        overflow: hidden;
        user-select: none;
        position: relative;
        font-weight: 600;
        margin-bottom: 15px;
      }

      .sidebar-tabs {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
        height: 42px;
      }

      .sidebar-tabs li {
        flex: 1 1 50%;
        text-align: center;
        line-height: 42px;
        cursor: pointer;
        color: black;
        transition: color 0.3s ease;
        position: relative;
        z-index: 2;
      }

      .sidebar-tabs li.active {
        color: white;
      }

      .sidebar-tabs-highlight {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: red;
        border-radius: 4px;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
      }

      .tab-content-sidebar {
        padding: 10px;
        border-radius: 6px;
        min-height: 150px;
        font-size: 15px;
        color: #212529;
      }

      .sidebar-news-item {
        display: flex;
        gap: 15px;
        margin-bottom: 10px;
        align-items: center;
      }

      .sidebar-thumb {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 8px;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border: 2px solid #0d6efd;
      }

      .sidebar-news-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .news-title-sm {
        font-size: 1rem;
        font-weight: 500;
        color: #212529;
        margin: 0 0 8px;
        line-height: 1.3;
        cursor: pointer;
        transition: color 0.3s ease;
      }
.news-title-sm a {
  color: #000 !important;
  text-decoration: none;
}
.news-title-sm a:hover{
	  color: #ffc107 !important;

}
.category-card-content a {
  color: white !important;
  text-decoration: none;
  transition: color 0.3s ease;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.category-card-content a:hover {
  color: #ffc107 !important;
}
.hero-content a {
  color: #fff !important;
  text-decoration: none;
  transition: color 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.hero-content a:hover {
  color: #ffc107 !important;
}

      .news-title-sm:hover {
        color: #d63384;
      }

      .date-textslider {
        font-size: 0.7rem;
        color: black;
        margin: 0;
      }

      .sidebar-ad {
        margin-top: 6px;
        margin-bottom: 6px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 12px;
        background-color: #f0f0f0;
        text-align: left;
        font-size: 0.9rem;
        color: #555;
        min-height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .sidebar-ad img {
        width: 100%;
        border-radius: 8px;
        object-fit: contain;
      }

      /* Placeholder style */
      .ad-placeholder {
        width: 100%;
        height: 70px;
        background-color: #ccc;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-weight: 600;
      }
      .social-icons {
        display: flex;
        gap: 10px;
      }

      .social-icons a {
        width: 36px;
        height: 36px;
        background-color: #e9ecef;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-size: 1rem;
        transition: 0.3s ease-in-out;
        text-decoration: none;
      }

      .social-icons a:hover {
        transform: translateY(-3px);
        color: white;
      }

      .social-icons a.facebook:hover {
        background-color: #3b5998;
      }

      .social-icons a.twitter:hover {
        background-color: #1da1f2;
      }

      .social-icons a.linkedin:hover {
        background-color: #0077b5;
      }

      .social-icons a.whatsapp:hover {
        background-color: #25d366;
      }
      #navbar-container {
        position: sticky;
        top: 0;
        z-index: 999;
      }

      .nu-heading {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
      }

      .nu-heading::before,
      .nu-heading::after {
        content: "";
        flex: 1;
        height: 2px;
        background: red;
      }

      .nu-heading h3 {
        margin: 0 20px;
        font-weight: 600;
        font-size: 1.5rem;
        text-align: center;
        white-space: nowrap;
      }