/*
  ========================================================================================================
  Project: Khabar24 LTR CSS File
  Description: This CSS file contains the styling for the Khabar24 website with a Left-to-Right (LTR)
               direction. It includes font definitions, global resets, typography, and component
               adjustments for LTR layouts.
  Author: Aahed I. Zarouk
  Version: 1.0
  Date: August 6, 2025
  --------------------------------------------------------------------------------------------------------
  Table of Contents:
  1. Global Variables & Reset
  2. Typography
  3. Layout Helpers
  4. Components
     4.1. Navbar
     4.2. Mobile Tab Bar
     4.3. Cards & Images
  5. Homepage Specific
     5.1. Urgent News Section
     5.2. Trending Section
     5.3. Watch Now Section (Video)
     5.4. News Grid Section
     5.5. Culture Section
     5.6. Latest Articles Section
  6. Footer
  7. General Utilities & Search
  8. Skeleton Loading States
  9. Section Titles
  10. Media Queries (General)
  ========================================================================================================
*/

/*
  ========================================================================================================
  1. Global Variables & Reset
  --------------------------------------------------------------------------------------------------------
  This section defines custom fonts, CSS properties for colors and fonts,
  along with a universal box-sizing reset and base styles for the body.
  ========================================================================================================
*/

/* Font-face declarations for the 'FF Shamel Sans' Arabic font (Light weight) */
@font-face {
  font-family: 'FF Shamel Sans';
  src: url('../fonts/FFShamelSans-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap; /* Ensures font is displayed even if not fully loaded */
}

/* Font-face declarations for the 'FF Shamel Sans' Arabic font (Normal weight) */
@font-face {
  font-family: 'FF Shamel Sans';
  src: url('../fonts/FFShamelSans-Normal.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Font-face declarations for the 'FF Shamel Sans' Arabic font (Medium weight) */
@font-face {
  font-family: 'FF Shamel Sans';
  src: url('../fonts/FFShamelSans-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Font-face declarations for the 'FF Shamel Sans' Arabic font (Bold weight) */
@font-face {
  font-family: 'FF Shamel Sans';
  src: url('../fonts/FFShamelSans-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Custom CSS properties (variables) for consistent styling, with LTR-specific font */
:root {
  --font-base: 'Inter', sans-serif; /* Base font family for LTR */
  --color-primary: #c9111e; /* Primary brand color (red) */
  --color-dark: #333333; /* Dark text/element color */
  --color-light: #F8F2EA; /* Light background/element color */
  --color-gray: #ced2d6; /* Gray color for borders/dividers */
}

/* Universal box-sizing reset for all elements.
   Ensures padding and border are included in the element's total width and height. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Slider Arrows LTR RTL */
html[dir="ltr"] .bi-arrow-next::before {
  content: "\f138";
  /* Right arrow */
}

html[dir="ltr"] .bi-arrow-prev::before {
  content: "\f12f";
  /* Left arrow */
}

html[dir="rtl"] .bi-arrow-next::before {
  content: "\f12f";
  /* Left arrow in RTL becomes 'Next' */
}

html[dir="rtl"] .bi-arrow-prev::before {
  content: "\f138";
  /* Right arrow in RTL becomes 'Previous' */
}

/* Base styles for the body element with LTR font */
body {
  margin: 0; /* Removes default body margin */
  font-family: 'Inter', sans-serif; /* Applies the LTR base font */
  color: var(--color-dark); /* Sets default text color */
  line-height: 1.6; /* Sets default line height for readability */
  font-size: 16px; /* Sets base font size */
  overflow-x: hidden; /* Prevents horizontal scrolling */
  width: -webkit-fill-available; /* Ensures body fills available width */
  position: inherit; /* Inherits positioning */
}

/* Truncates text with an ellipsis for a single line of text */
.ellipsis-text {
  white-space: nowrap; /* Prevents text from wrapping */
  overflow: hidden; /* Hides overflowing content */
  text-overflow: ellipsis; /* Displays ellipsis (...) for truncated text */
  max-width: 75ch; /* Approx. 75 characters before truncation */
  font-size: 14px; /* Specific font size */
  font-weight: 500 !important; /* Medium font weight */
}

/* Enables smooth scrolling behavior for the entire page */
html {
  scroll-behavior: smooth;
}

/*
  -------------------------------------------------
  1.1. Selection & Scrollbar Styles
  -------------------------------------------------
*/

/* Custom styles for text selection (Firefox) */
::selection {
  background: #c9111e; /* Primary red background */
  color: #F8F2EA; /* Light text color */
  text-shadow: none; /* No text shadow */
}

/* Custom styles for text selection (WebKit browsers) */
::-moz-selection {
  background: #c9111e; /* Primary red background */
  color: #F8F2EA; /* Light text color */
  text-shadow: none; /* No text shadow */
}

/* Custom scrollbar styles for Firefox */
* {
  scrollbar-width: thin; /* Thin scrollbar */
  scrollbar-color: #c9111e #F8F2EA; /* Thumb color / Track color */
}

/* Custom scrollbar styles for WebKit browsers (Chrome, Safari, etc.) */
::-webkit-scrollbar {
  width: 12px; /* Fixed width */
  height: 12px; /* Fixed height */
}

/* Scrollbar track style */
::-webkit-scrollbar-track {
  background: #F8F2EA; /* Light track background */
  border-radius: 10px; /* Rounded corners */
}

/* Scrollbar thumb style */
::-webkit-scrollbar-thumb {
  background-color: #c9111e; /* Primary red thumb color */
  border-radius: 10px; /* Rounded corners */
  border: 3px solid #F8F2EA; /* Padding around thumb */
  transition: background-color 0.3s ease; /* Smooth transition for hover */
}

/* Hover effect for the scrollbar thumb */
::-webkit-scrollbar-thumb:hover {
  background-color: #c9111e; /* Maintains color on hover */
}

/*
  ========================================================================================================
  2. Typography
  --------------------------------------------------------------------------------------------------------
  This section contains styling for all headings, paragraphs, links, and other text-related elements.
  ========================================================================================================
*/

/* Heading styles for h1-h6 elements */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700; /* Bold font weight */
  margin-bottom: 1rem; /* Space below headings */
  font-size: 26px; /* Default font size for headings */
  line-height: inherit; /* Inherits line height from parent */
}

/* Paragraph styles */
p {
  margin-bottom: 1rem; /* Space below paragraphs */
}

/* Link styles */
a {
  color: var(--color-dark); /* Default link color */
  text-decoration: none; /* Removes default underline */
}

/* Link hover state */
a:hover {
  color: var(--color-primary); /* Changes color on hover */
  text-decoration: none; /* Removes underline on hover */
}

/* Specific styles for h4 and h5 headings */
h4,
h5 {
  font-family: 'Inter', sans-serif; /* Applies LTR base font */
  font-weight: 700; /* Bold font weight */
  font-size: 16px; /* Specific font size */
}

/* Creates a decorative border at the top of an element */
.border-top-300 {
  border-top: 1px solid #c9111e; /* Red top border */
  border-width: 48px; /* Sets border width (likely an error or specific use case) */
}

/*
  ========================================================================================================
  3. Layout Helpers
  --------------------------------------------------------------------------------------------------------
  This section includes utility classes for common layout tasks like spacing, alignment, and container
  management.
  ========================================================================================================
*/

/* Global container for centering content with a max-width */
.container {
  max-width: 1540px; /* Maximum width of the container */
  width: 100%; /* Ensures container takes full width up to max-width */
  margin: 0 auto; /* Centers the container horizontally */
  padding: 1rem; /* Internal padding */
}

/*
  ========================================================================================================
  4. Components
  --------------------------------------------------------------------------------------------------------
  This section contains styles for reusable UI components, with specific adjustments for LTR.
  ========================================================================================================
*/

/*News list image styles - Featured*/
.nimg{
  border-radius: 12px;
  height: 280px;
  width: 400px;
  object-fit: cover;
}

/* Show more button styles */
.show-more-btn{
  display: inline-block; /* Makes the button inline */
  padding: .8rem 1rem .8rem; /* Padding inside the button */
  color: #c9111e; /* Text color */
  border: none; /* No border */
  border-radius: 500px; /* Rounded corners */
  text-decoration: none; /* No underline */
  transition: background-color 0.3s; /* Smooth background color transition */
  margin-top: 32px; /* Adds top margin */
  text-decoration: none; /* No underline */
}
.show-more-btn:hover{
  text-decoration: none; /* No underline */
}
/* Styles for the main page heading, adjusted for LTR (margin-left) */
.page-heading {
  margin-left: 2.5%; /* Left margin for LTR */
  margin-top: 2.5% !important; /* Top margin */
} 

/* Styles for a category header section, adjusted for RTL (margin-right and margin-left) */
.cat-header {
  background-color: #f8f2ea !important; /* Light background color */
  padding-top: 1%; /* Top padding */
  padding-bottom: 1%; /* Bottom padding */
  border-radius: 20px; /* Rounded corners */
  margin-right: 2.5%; /* Right margin for RTL */
  margin-left: 4.5%; /* Left margin for RTL */
}
.cat-head{
  display: flex;
}
.cat-head .heading-with-icon{
  display:inline-flex;
  gap: 1rem;
}

.cat-icon{
  width: 32px;
  border-radius: 8px;
}

/* Styles for a category header section, adjusted for LTR (margin-left) */
.cat-header {
  background-color: #f8f2ea !important; /* Light background color */
  padding-top: 1%; /* Top padding */
  padding-bottom: 1%; /* Bottom padding */
  border-radius: 20px; /* Rounded corners */
  margin-right: 2.5%; /* Right margin for LTR */
  margin-left: 4.5%; /* Left margin for LTR */
}

/* Styles for a large category icon, floated to the left for LTR */
.cat-icon-lg {
  width: 80px; /* Fixed width */
  height: 80px; /* Fixed height */
  float: left; /* Floats the icon to the left for LTR */
  margin-left: 2.5%; /* Left margin */
  border-radius: 15px; /* Rounded corners */
}

/*
  -------------------------------------------------
  4.1. Navbar
  -------------------------------------------------
*/

/* Main navigation bar styles */
.navbar {
  font-weight: 400; /* Normal font weight */
  padding: 1rem 2.5%; /* Padding around the navbar */
  display: flex; /* Uses flexbox for layout */
  flex-wrap: wrap; /* Allows items to wrap to the next line */
  justify-content: space-between; /* Distributes space between items */
  align-items: center; /* Vertically aligns items in the center */
  background-color: #F8F2EA !important; /* Light background color */
}

/* Styles for the brand/logo within the navbar */
.navbar-brand {
  padding-top: var(--bs-navbar-brand-padding-y); /* Inherits padding from Bootstrap variable */
  padding-bottom: var(--bs-navbar-brand-padding-y); /* Inherits padding from Bootstrap variable */
  margin-right: var(--bs-navbar-brand-margin-end); /* Inherits margin from Bootstrap variable */
  font-size: var(--bs-navbar-brand-font-size); /* Inherits font size from Bootstrap variable */
  color: var(--bs-navbar-brand-color); /* Inherits color from Bootstrap variable */
  text-decoration: none; /* Removes underline */
  white-space: nowrap; /* Prevents text from wrapping */
  width: 140px; /* Fixed width for the brand logo */
}

/*
  -------------------------------------------------
  4.1.1. Navbar Link Hover Effects
  -------------------------------------------------
*/

/* Hover effect for navigation links */
.navbar-nav .nav-link:hover {
  color: #c9111e; /* Changes color to primary red on hover */
  font-weight: 500; /* Medium font weight on hover */
}

/* Smooth transition for the color change on nav links */
.navbar-nav .nav-link {
  transition: color 0.3s ease; /* Smooth color transition */
}

/*
  -------------------------------------------------
  4.1.2. Navbar Icon Buttons
  -------------------------------------------------
*/

/* Base style for all navbar icon buttons */
.navbar-icon-btn {
  display: flex; /* Uses flexbox for centering content */
  align-items: center; /* Vertically aligns content */
  justify-content: center; /* Horizontally aligns content */
  border: 1px solid #ccc; /* Light gray border */
  background-color: transparent; /* Transparent background */
  color: #333; /* Dark text color */
  width: 40px; /* Fixed width */
  height: 40px; /* Fixed height */
  border-radius: 50%; /* Makes the button circular */
  padding: 0; /* Removes internal padding */
  transition: background-color 0.2s, border-color 0.2s; /* Smooth transition for hover effects */
}

/* Hover styles for search and language buttons */
.navbar-icon-btn--search:hover,
.navbar-icon-btn--lang:hover {
  background-color: #f8f9fa; /* Light background on hover */
  border-color: #999; /* Darker border on hover */
}

/* User button with a solid red, pill-shaped design */
.navbar-icon-btn--user {
  background-color: #c9111e; /* Primary red background */
  color: #fff; /* White text color */
  border: none; /* No border */
  border-radius: 999px; /* Creates a pill shape */
  padding: 0 16px; /* Horizontal padding */
  width: auto; /* Width adjusts to content */
  height: 40px; /* Fixed height */
}

/* Hover style for the user button */
.navbar-icon-btn--user:hover {
  background-color: #780a12; /* Darker red on hover */
  color: #ccc; /* Lighter text on hover */
}

/*
  -------------------------------------------------
  4.2. Mobile Tab Bar
  -------------------------------------------------
*/

/* Styles for the fixed mobile navigation bar at the bottom of the screen */
.mobile-tab-bar {
  position: fixed; /* Fixed position */
  bottom: 0; /* Aligned to the bottom */
  left: 0; /* Aligned to the left */
  right: 0; /* Aligned to the right */
  height: 60px; /* Fixed height */
  background-color: #fff; /* White background */
  border-top: 1px solid #e0e0e0; /* Light border at the top */
  display: flex; /* Uses flexbox for layout */
  justify-content: space-around; /* Distributes space evenly around items */
  align-items: center; /* Vertically aligns items */
  z-index: 999; /* Ensures it stays on top of other content */
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow at the top */
  transition: transform 0.3s ease; /* Smooth transition for transform changes */
}

/* Styles for individual links in the mobile tab bar */
.tab-link {
  text-align: center; /* Centers text */
  font-size: 12px; /* Small font size */
  color: #666; /* Gray text color */
  flex: 1; /* Allows links to grow and shrink */
  text-decoration: none; /* Removes underline */
  display: flex; /* Uses flexbox for icon and text alignment */
  flex-direction: column; /* Stacks icon and text vertically */
  align-items: center; /* Centers items horizontally */
  justify-content: center; /* Centers items vertically */
  transition: background 0.2s ease; /* Smooth transition for background changes */
}

/* Icon styles within the tab links */
.tab-link i {
  font-size: 20px; /* Icon font size */
  margin-bottom: 2px; /* Small space below icon */
  position: relative; /* Needed for badge positioning */
}

/* Active state for the tab links */
.tab-link.active {
  color: #c9111e; /* Primary red color for active link */
}

/* Adds a ripple-like feedback on active state (when clicked/tapped) */
.tab-link:active {
  background-color: #f5f5f5; /* Light gray background on active */
}

/* Styles for a notification dot badge, adjusted for LTR (left position) */
.badge-dot {
  position: absolute; /* Absolute positioning relative to parent icon */
  top: 0; /* Aligned to the top */
  left: 0; /* Aligned to the left for LTR */
  width: 8px; /* Fixed width */
  height: 8px; /* Fixed height */
  background-color: #780a12; /* Darker red background */
  border-radius: 50%; /* Makes it circular */
  display: inline-block; /* Inline block display */
}

/*
  -------------------------------------------------
  4.3. Cards & Images
  -------------------------------------------------
*/

/* Styles for card titles */
.card-title {
  font-size: 1.5rem; /* Base font size for card titles */
}

/* Styles for card text content */
.card-text {
  font-size: 1rem; /* Base font size for card text */
}

/* Base styles for images and videos to ensure responsiveness */
img,
video {
  max-width: 100%; /* Ensures images/videos don't overflow their containers */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes extra space below images */
}

/* Hover effect for images, reducing opacity */
img:hover {
  opacity: 0.8; /* Slightly transparent on hover */
}

/*
  ========================================================================================================
  5. Homepage Specific
  --------------------------------------------------------------------------------------------------------
  This section contains styling for components and elements that are unique to the website's homepage,
  with specific adjustments for LTR.
  ========================================================================================================
*/

/* Adds a margin to the top of the header */
.header-t-6 {
  margin-top: 140px;
}

/* Styles for urgent heading, adjusted for LTR (text-align) */
.heading-urg {
  font-size: .9rem; /* Font size */
  font-weight: 500; /* Medium font weight */
  line-height: 2rem; /* Line height */
  text-align: left; /* Aligns text to the left for LTR */
}

/* Overlay style for a featured image card, with a semi-transparent dark background */
.featured-image .card-img-overlay {
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  padding: 1rem; /* Internal padding */
  border-radius: 0 0 10px 10px; /* Rounded bottom corners */
}

/*
  -------------------------------------------------
  5.1. Urgent News Section (LTR)
  -------------------------------------------------
*/

/* Hero section for urgent news, with a fade-up animation on load */
.hero.urgent {
  opacity: 0; /* Starts invisible */
  transform: translateY(30px); /* Starts slightly below its final position */
  animation: heroFadeUp 0.9s ease-out forwards; /* Applies fade-up animation */
  animation-delay: 0.2s; /* Delays animation start */
}

/* Keyframe animation for the fade-up effect */
@keyframes heroFadeUp {
  to {
    opacity: 1; /* Fades to fully visible */
    transform: translateY(0); /* Moves to its final position */
  }
}

/* Base styles for the urgent section container */
.urgent {
  position: relative; /* Establishes a positioning context */
  overflow: hidden; /* Hides overflowing content */
}

/* Image styles within the urgent section */
.urgent-image img {
  width: 95% !important; /* Fixed width */
  height: auto !important; /* Maintains aspect ratio */
  object-fit: cover; /* Covers the area, cropping if necessary */
  margin: 0 auto; /* Centers the image horizontally */
  display: block; /* Ensures it takes full width */
  border-radius: 16px; /* Rounds the corners */
}

/* Overlay container for the urgent card, positioned over the image, adjusted for LTR */
.urgent-card-overlay {
  position: absolute; /* Absolute positioning */
  bottom: -24px; /* Positioned below the image */
  right: 1rem; /* Aligned to the right for LTR, with padding */
  left: 1rem; /* Aligned to the left, with padding */
  width: auto; /* Allow width to be determined by left/right */
  max-width: calc(100% - 2rem); /* Max width based on container with padding */
  margin-inline: auto; /* Center it horizontally */
  z-index: 20; /* Ensures it stays on top */
  pointer-events: none; /* Prevents clicks on the overlay itself */
  padding: 0.75rem; /* Internal padding */
  box-sizing: border-box; /* Include padding in width */
}

/* Pointer events for the urgent card and hero arrows */
.urgent-card,
.hero-arrows {
  pointer-events: auto; /* Allows clicks on these elements */
}

/* Styles for the navigation arrows within the hero section */
.hero-arrows .btn {
  border-radius: 50px; /* Pill shape */
  padding: 0.4rem 1rem; /* Internal padding */
  background-color: #c9111e; /* Primary red background */
  color: #fff; /* White text color */
  border: none; /* No border */
  font-size: 1rem; /* Font size */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Subtle shadow */
  transition: background-color 0.3s ease; /* Smooth background transition on hover */
}

/* Main style for the urgent card, with a unique clipped corner shape, adjusted for LTR */
.urgent-card {
  width: 100%;
  /* Ensures the card takes the full width of its container */
  right: auto;
  /* Resets any right positioning */
  left: auto;
  /* Resets any left positioning */
  pointer-events: auto;
  /* Allows user interaction inside the card */
  position: relative;
  /* Allows absolute-positioned children inside */
  background-color: #f8f2ea;
  /* Light beige background */
  color: #1f2937;
  /* Dark gray text color for good readability */
  font-family: inherit;
  /* Inherits font from parent container */
  padding: 1rem;
  /* Adds space inside the card */
  max-width: 100%;
  /* Prevents overflow beyond parent */

  /* Create angled edge on the left using clip-path */
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0% calc(100% - 24px), 0% 24px);
  /* Custom clip-path for a unique shape (top-left corner cut) */
  border-left: 24px solid #c9111e;
  /* Bold red border on the left */
  border-right: none !important;
  /* Remove any right border */
  border-bottom: none;
  /* Optional: remove bottom border (previously 12px) */

  box-sizing: border-box;
  /* Includes padding and border in width calculations */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* Soft shadow for depth */
}

/* Decorative triangle at the bottom-left of the card, adjusted for LTR */
.urgent-card::after {
  content: '';
    position: absolute;
    bottom: 0;
    /* Stick to the bottom */
    right: 0;
    /* Align to the right corner */
    width: 16px;
    /* Width of the triangle */
    height: 16px;
    /* Height of the triangle */
    background-color: #101522;
    /* Triangle color */
  
    /* Triangle pointing up-left from the bottom-right corner */
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Label style for urgent cards */
.urgent-label {
  font-size: 0.7rem; /* Small font size */
  text-transform: uppercase; /* Uppercase text */
  font-weight: 600; /* Semi-bold font weight */
  margin-bottom: 0.75rem; /* Space below label */
}

/* Title style for urgent cards */
.urgent-title {
  font-size: 20px !important; /* Specific font size */
  font-weight: 700 !important; /* Bold font weight */
  margin: 0; /* Removes default margin */
  line-height: 1.3; /* Line height */
  color: #1b1e23; /* Dark text color */
}

/*
  -------------------------------------------------
  5.2. Trending Section (LTR)
  -------------------------------------------------
*/

/* Section for trending news, adjusted for LTR */
.section-trending {
  font-family: 'FF Shamel Sans', sans-serif; /* Applies LTR base font */
  padding: 3rem 0; /* Vertical padding */
}

/* Card style for trending news, with a clipped corner shape and shadow, adjusted for LTR */
.trending-card {
  background-color: #f8f2ea !important; /* Light background color */
  padding: 2rem; /* Internal padding */
  border-left: 24px solid #c9111e; /* Red left border for LTR */
  /* Custom clip-path for a unique shape (top-left corner cut) for LTR */
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0% calc(100% - 24px), 0% 24px);
  position: relative; /* Establishes positioning context */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Ensures no left border */
}

/* Decorative triangle at the bottom-left of the trending card, adjusted for LTR */
.trending-card::after {
  content: ''; /* Required for pseudo-element */
  position: absolute; /* Absolute positioning */
  bottom: 0; /* Aligned to the bottom */
  right: 0 !important; /* Aligned to the left for LTR */
  left: unset; /* Removes right alignment */
  width: 24px; /* Fixed width */
  height: 24px; /* Fixed height */
  background-color: #101522; /* Dark background color */
  /* Custom clip-path for a triangle shape */
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0% calc(100% - 24px), 0% 24px);
}

/* Small badge style */
.badge--small {
  font-size: 0.75rem; /* Small font size */
  color: #888; /* Gray text color */
  font-weight: 600; /* Semi-bold font weight */
  display: inline-block; /* Inline block display */
  margin-bottom: 0.5rem; /* Space below */
  text-transform: uppercase; /* Uppercase text */
}

/* Title for the trending section */
.trending-title {
  font-size: 1.6rem; /* Font size */
  font-weight: 700; /* Bold font weight */
  margin-bottom: 1.5rem; /* Space below */
  color: #111; /* Dark text color */
}

/* List styles for trending items, adjusted for LTR (padding-right) */
.trending-list {
  list-style: none; /* Removes default list bullets */
  padding-left: 0; /* Removes default right padding for LTR */
  margin: 0; /* Removes default margin */
  counter-reset: trending; /* Initializes a counter for numbered lists */
}

/* Individual item in the trending list */
.trending-item {
  counter-increment: trending; /* Increments the counter for each item */
  padding-right: 0 !important; /* Removes default right padding */
  position: relative; /* Establishes positioning context for ::before */
  width: 35ch; /* Fixed width for text overflow */
  text-overflow: ellipsis; /* Displays ellipsis for truncated text */
}

/* Counter for the list item, hidden by default */
.trending-item::before {
  content: counter(trending) '.'; /* Displays the counter number */
  position: absolute; /* Absolute positioning */
  left: 0; /* Aligned to the left */
  font-weight: bold; /* Bold font weight */
  color: #c9111e; /* Primary red color */
  display: none; /* Hidden by default */
}

/* Headline style for trending items */
.trending-headline {
  font-size: 0.95rem; /* Font size */
  font-weight: 500; /* Medium font weight */
  margin: 0; /* Removes default margin */
  color: #1a1a1a; /* Dark text color */
}

/* Date style for trending items */
.trending-date {
  font-size: 0.9rem; /* Font size */
  color: #999; /* Light gray text color */
  display: block; /* Ensures it takes full width */
  margin-top: 12px; /* Space above */
}

/* Link style for trending items */
.trending-link {
  display: inline-block; /* Inline block display */
  margin-top: 1rem; /* Space above */
  font-size: 0.85rem; /* Font size */
  font-weight: 600; /* Semi-bold font weight */
  color: #c9111e !important; /* Primary red color */
  text-decoration: none; /* No underline */
}

/* Hover effect for trending links, adding an underline */
.trending-link:hover {
  text-decoration: underline; /* Underline on hover */
}

/* Dropdown on hover functionality */
.hover-dropdown:hover .dropdown-menu {
  display: block; /* Shows dropdown on hover */
  margin-top: 0; /* Removes top margin */
}

/* Hides the dropdown menu by default and adds a transition */
.hover-dropdown .dropdown-menu {
  display: none; /* Hidden by default */
  transition: all 0.2s ease-in-out; /* Smooth transition for display */
  border-radius: 0.25rem; /* Slightly rounded corners */
}

/* Styles for a specific border utility class (trending box) */
.border-start.border-danger.border-4 {
  border-left-width: 6px !important; /* Thicker left border */
}

/*
  -------------------------------------------------
  5.3. Watch Now Section (Video) (RLT)
  -------------------------------------------------
*/

/* Section for "Watch Now" (video content) */
.section-watch-now {
  font-family: 'FF Shamel Sans', sans-serif; /* Applies LTR base font */
  padding: 3rem 0; /* Vertical padding */
}

/* Card style for the "Watch Now" section, with a clipped corner shape, adjusted for LTR */
.watch-now-card {
  background-color: #F1F1F1;
  /* Light gray background for contrast */
  padding: 2rem;
  /* Adds internal spacing for content */

  /* Creates a unique shape by clipping the top-left and bottom-left corners */
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0% calc(100% - 24px), 0% 24px);

  border-left: 24px solid #c9111e;
  /* Red accent border on the left */
  border-bottom: 24px solid #c9111e;
  /* Red accent border on the bottom */

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* Optional: soft shadow for depth */
  position: relative;
  /* Ensures it's positioned relative to its parent if needed */
}

/* Decorative triangle at the bottom-left of the watch now card, adjusted for LTR */
.watch-now-card::after {
  content: ''; /* Required for pseudo-element */
  position: absolute; /* Absolute positioning */
  bottom: 0; /* Aligned to the bottom */
  left: unset; /* Removes left alignment */
  right: 0; /* Aligned to the right for LTR */
  width: 24px; /* Fixed width */
  height: 24px; /* Fixed height */
  background-color: #101522; /* Dark background color */
  /* Custom clip-path for a triangle shape */
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0% calc(100% - 24px), 0% 24px);
}

/* Small badge style (reused) */
.badge--small {
  font-size: 0.75rem; /* Small font size */
  color: #888; /* Gray text color */
  font-weight: 600; /* Semi-bold font weight */
  display: inline-block; /* Inline block display */
  margin-bottom: 0.5rem; /* Space below */
  text-transform: uppercase; /* Uppercase text */
}

/* Title for the "Watch Now" section */
.watch-now-title {
  font-size: 18px; /* Font size */
  font-weight: 700; /* Bold font weight */
  margin-bottom: 1.5rem; /* Space below */
  color: #111; /* Dark text color */
  line-height: 1.4; /* Line height */
}

/* Link style for the "Watch Now" section */
.watch-now-link {
  margin-top: 2rem; /* Space above */
  display: inline-block; /* Inline block display */
  font-size: 0.9rem; /* Font size */
  color: #c9111e; /* Primary red color */
  font-weight: 600; /* Semi-bold font weight */
  text-decoration: none; /* No underline */
}

/* Hover effect for the "Watch Now" links, adding an underline */
.watch-now-link:hover {
  text-decoration: underline; /* Underline on hover */
}

/* Video Grid Inside Card */
.watch-now-grid {
  display: grid; /* Uses CSS Grid for layout */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive grid columns */
  gap: 1.5rem; /* Gap between grid items */
}

/* Individual video card style */
.video-card {
  background: #fff; /* White background */
  border-radius: 8px; /* Rounded corners */
  overflow: hidden; /* Hides overflowing content */
  transition: transform 0.2s ease; /* Smooth transition for hover effect */
}

/* Hover effect for video cards, slightly moving them up */
.video-card:hover {
  transform: translateY(-4px); /* Moves up on hover */
}

/* Thumbnail area for videos */
.video-thumbnail {
  position: relative; /* Establishes positioning context for play button */
  aspect-ratio: 16/9; /* Maintains 16:9 aspect ratio */
  background-color: #ddd; /* Placeholder background color */
}

/* Image within the video thumbnail */
.video-thumbnail img {
  width: 100%; /* Fills parent width */
  height: 100%; /* Fills parent height */
  object-fit: cover; /* Covers the area, cropping if necessary */
  display: block; /* Ensures it takes full width */
}

/* Play button/duration overlay on video thumbnail */
.video-play {
  position: absolute; /* Absolute positioning */
  bottom: 10px; /* Aligned from the bottom */
  right: 10px; /* Aligned from the right */
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent dark background */
  color: #fff; /* White text color */
  font-size: 1.1rem; /* Font size */
  padding: 4px 10px; /* Internal padding */
  border-radius: 999px; /* Pill shape */
  font-weight: bold; /* Bold font weight */
}

/* Title for video cards */
.video-title {
  font-size: 0.95rem; /* Font size */
  font-weight: 700; /* Bold font weight */
  color: #1a1a1a; /* Dark text color */
  margin: 0.75rem; /* Margin around title */
}

/* Specific width for post articles */
.post-article {
  width: 960px;
}

/*
  -------------------------------------------------
  5.4. News Grid Section (LTR)
  -------------------------------------------------
*/

/* Section for general news grid */
.section-news {
  font-family: 'Inter', sans-serif; /* Applies LTR base font */
  color: #111; /* Dark text color */
}

/* Billboard advertisement container */
.billboard-ad-container {
  background-color: #f0f0f0; /* Light gray background */
  text-align: center; /* Centers text */
  padding: 2rem; /* Internal padding */
  margin-bottom: 2rem; /* Space below */
  font-weight: bold; /* Bold font weight */
  font-size: 1.25rem; /* Font size */
  border-radius: 8px; /* Rounded corners */
  height: 240px; /* Fixed height */
}

/* Specific height for the billboard ad content */
.billboard-ad-container .billboard-ad {
  height: 180px;
}

/* Grid Layout for news items */
.news-layout {
  display: grid; /* Uses CSS Grid */
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: 2rem; /* Gap between grid items */
}

/* Column structure within the news layout */
.news-column {
  display: flex; /* Uses flexbox */
  flex-direction: column; /* Stacks items vertically */
  gap: 1.25rem; /* Gap between column items */
}

/* Section title for news categories */
.section-title {
  font-size: 1.3rem; /* Font size */
  font-weight: 700; /* Bold font weight */
  margin-bottom: 0.5rem; /* Space below title */
}

/* Individual news item style */
.news-item {
  display: flex; /* Uses flexbox */
  flex-direction: column; /* Stacks items vertically */
  gap: 0.25rem; /* Small gap between elements */
}

/* Image within a news item */
.news-item img {
  width: 100%; /* Fills parent width */
  border-radius: 6px; /* Rounded corners */
  margin-bottom: 0.5rem; /* Space below image */
}

/* Category label for news items */
.news-category {
  font-size: 0.75rem; /* Small font size */
  color: #888; /* Gray text color */
  text-transform: uppercase; /* Uppercase text */
  font-weight: 600; /* Semi-bold font weight */
}

/* Headline for news items */
.news-headline {
  font-size: 1rem; /* Font size */
  font-weight: 500; /* Medium font weight */
  color: #111; /* Dark text color */
}

/* "More" link style */
.more-link {
  font-size: 0.85rem; /* Font size */
  color: #c9111e; /* Primary red color */
  font-weight: 500; /* Medium font weight */
  text-decoration: none; /* No underline */
  margin-top: 0.5rem; /* Space above */
}

/* Skyscraper advertisement style */
.skyscraper-ad {
  background-color: #f4f4f4; /* Light gray background */
  display: flex; /* Uses flexbox */
  align-items: center; /* Vertically aligns content */
  justify-content: center; /* Horizontally aligns content */
  writing-mode: vertical-rl; /* Text written vertically, right-to-left */
  text-orientation: mixed; /* Allows characters to be oriented normally */
  font-size: 1rem; /* Font size */
  font-weight: 500; /* Medium font weight */
  border-radius: 4px; /* Slightly rounded corners */
  height: 100%; /* Fills parent height */
  min-height: 400px; /* Minimum height */
}

/* Rotates content within the skyscraper ad for vertical text */
.skyscraper-ad>div {
  transform: rotate(180deg); /* Rotates content to be readable vertically */
}

/*
  -------------------------------------------------
  5.5. Culture Section (LTr)
  -------------------------------------------------
*/

/* Container for the culture section */
.section-culture {
  font-family: 'Inter', sans-serif; /* Applies LTR base font */
  /* margin-left: 32px; */ /* Commented out margins */
  /* margin-right: 32px; */
}

/* Header for the culture section */
.section-culture__header {
  display: flex; /* Uses flexbox */
  justify-content: space-between; /* Distributes space between items */
  align-items: center; /* Vertically aligns items */
  margin-bottom: 1.5rem; /* Space below header */
}

/* Title for the culture section */
.section-culture__title {
  font-size: 1.25rem; /* Font size */
  font-weight: 700; /* Bold font weight */
  color: #111; /* Dark text color */
}

/* Arrow icon for the culture section */
.section-culture__arrow {
  font-size: 1.2rem; /* Font size */
  color: #c9111e; /* Primary red color */
}

/* Layout Grid for culture section content */
.section-culture__grid {
  display: flex; /* Uses flexbox */
  flex-wrap: wrap; /* Allows items to wrap */
  gap: 2rem; /* Gap between grid items */
}

/* Featured Area within the culture section grid */
.section-culture__featured {
  flex: 1 1 60%; /* Takes up 60% width, allows growing/shrinking */
}

/* Featured image container */
.featured-image {
  position: relative; /* Establishes positioning context for badges/cards */
}

/* Featured image itself */
.featured-image__img {
  width: 100%; /* Full width */
  border-radius: 8px; /* Rounded corners */
  display: block; /* Ensures it takes full width */
}

/*
  -------------------------------------------------
  5.5.1. Badges
  -------------------------------------------------
*/

/* Base badge style */
.badge {
  font-size: 0.75rem; /* Small font size */
  font-weight: 600; /* Semi-bold font weight */
  text-transform: uppercase; /* Uppercase text */
}

/* Pill-shaped badge, positioned absolutely */
.badge--pill {
  position: absolute; /* Absolute positioning */
  top: 1rem; /* Aligned from the top */
  left: 1rem; /* Aligned from the left */
  background-color: #fff; /* White background */
  padding: 4px 12px; /* Internal padding */
  border-radius: 999px; /* Pill shape */
}

/* Light text color for badges */
.badge--light {
  color: #333; /* Dark text color */
}

/* Small text color for badges */
.badge--small {
  color: #777; /* Gray text color */
}

/* Featured Card Overlay, adjusted for LTR */
.featured-card {
  position: absolute;
  /* Allows precise placement within parent */
  bottom: 0;
  /* Anchored to bottom */
  right: 0 !important;
  /* Anchored to right (LTR) */
  background-color: #f8f2ea;
  /* Light neutral background */
  padding: 1.5rem;
  /* Internal spacing for content */

  border-left: 20px solid #c9111e;
  /* Red accent border on the left */
  border-right: none !important;
  /* Remove right border just in case */

  /* Clip-path cuts top-right corner */
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0% calc(100% - 24px), 0% 24px);

  max-width: 420px;
  /* Prevents it from being too wide */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  /* Soft shadow for depth */
  z-index: 10;
  /* Ensures it stays above other elements */
}

/* Decorative triangle at the bottom-right of the featured card */
.featured-card::after {
  content: ''; /* Required for pseudo-element */
  position: absolute; /* Absolute positioning */
  bottom: 0; /* Aligned to the bottom */
  right: 0; /* Aligned to the right */
  width: 24px; /* Fixed width */
  height: 24px; /* Fixed height */
  background: #111; /* Dark background color */
  /* Custom clip-path for a triangle shape */
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0% calc(100% - 24px), 0% 24px);
}

/* Headline style for cards */
.card-title {
  font-size: 1.4rem; /* Font size */
  font-weight: 700; /* Bold font weight */
  color: #111; /* Dark text color */
  margin: 0.5rem 0 0; /* Top margin */
  line-height: 1.3; /* Line height */
}

/* Trending Sidebar within the culture section */
.trending {
  flex: 1 1 20%; /* Takes up 20% width, allows growing/shrinking */
}

/* Title for the trending sidebar */
.trending__title {
  font-size: 0.9rem; /* Font size */
  font-weight: 600; /* Semi-bold font weight */
  color: #444; /* Dark gray text color */
  margin-bottom: 1rem; /* Space below */
}

/* List styles for trending items in the sidebar */
.trending__list {
  list-style: none; /* Removes default list bullets */
  padding: 0; /* Removes default padding */
  margin: 0; /* Removes default margin */
  counter-reset: trend; /* Initializes a counter */
}

/* Individual item in the trending sidebar list */
.trending__item {
  counter-increment: trend; /* Increments the counter */
  margin-bottom: 1rem; /* Space below */
  padding-left: 1.5rem; /* Left padding for counter */
  position: relative; /* Establishes positioning context for ::before */
}

/* Counter for the sidebar list item, hidden by default */
.trending__item::before {
  content: counter(trend) '.'; /* Displays the counter number */
  position: absolute; /* Absolute positioning */
  left: 0; /* Aligned to the left */
  color: #222; /* Dark text color */
  font-weight: 700; /* Bold font weight */
  display: none; /* Hidden by default */
}

/* Headline style for trending items in the sidebar */
.trending__headline {
  font-size: clamp(1rem, 1.5vw, 1rem); /* Responsive font size */
  margin: .3rem; /* Small margin */
  font-weight: 500 !important; /* Medium font weight */
}

/* Date style for trending items in the sidebar */
.trending__date {
  font-size: clamp(0.7rem, 1.5vw, 0.9rem); /* Responsive font size */
  color: #999; /* Light gray text color */
  display: block; /* Ensures it takes full width */
  margin-top: 4px; /* Space above */
}

/*
  -------------------------------------------------
  5.6. Latest Articles Section (LTR)
  -------------------------------------------------
*/

/* Section for latest articles */
.section-latest {
  font-family: 'Inter', sans-serif; /* Applies LTR base font */
  padding: 2rem 0; /* Vertical padding */
}

/* Title for the latest articles section */
.section-latest__title {
  font-size: 1.7rem; /* Font size */
  font-weight: 700; /* Bold font weight */
  margin-bottom: 1.5rem; /* Space below */
  color: #1a1a1a; /* Dark text color */
}

/* Layout for latest articles section: 80% content / 20% ad, adjusted for LTR */
.section-latest__row {
  display: flex !important; /* Uses flexbox */
  gap: 2rem !important; /* Gap between content and ad */
  margin-left: 32px; /* Left margin */
  margin-right: 0px !important; /* Removes right margin */
}

/* Content area within the latest articles section */
.section-latest__content {
  flex: 0 0 80%; /* Takes up 80% width, no growing/shrinking */
  display: flex; /* Uses flexbox */
  flex-direction: column; /* Stacks items vertically */
  gap: 1.5rem; /* Gap between articles */
}

/* Ad area within the latest articles section */
.section-latest__ad {
  flex: 0 0 20%; /* Takes up 20% width, no growing/shrinking */
}

/* Article Card */
.box_title {
  font-size: 14px; /* Font size */
  line-height: 28px; /* Line height */
  margin-top: 8px; /* Top margin */
  display: block; /* Block display */
  font-weight: 500; /* Medium font weight */
}

/* Keyword as title style */
.keyword_as_title {
  text-transform: uppercase; /* Uppercase text */
  font-size: 12px; /* Small font size */
  line-height: 16px; /* Line height */
  margin: 16px 0 0; /* Top margin */
  display: block; /* Block display */
}

/* Individual latest article card */
.latest-card {
  display: flex; /* Uses flexbox */
  gap: 4rem; /* Larger gap between image and content */
  align-items: flex-start; /* Aligns items to the start */
  border-radius: 12px; /* Rounded corners */
  overflow: hidden; /* Hides overflowing content */
  transition: background 0.3s ease; /* Smooth transition for background on hover */
}

/* Hover effect for latest article cards */
.latest-card:hover {
  background-color: #f8f8f8; /* Light background on hover */
}

/* Image within a latest article card */
.latest-card__image {
  width: 360px; /* Fixed width */
  height: 260px; /* Fixed height */
  object-fit: cover; /* Covers the area, cropping if necessary */
  flex-shrink: 0; /* Prevents image from shrinking */
  border-radius: 12px; /* Rounded corners */
}

/* Content area within a latest article card */
.latest-card__content {
  flex: 1; /* Allows content to grow and shrink */
  padding-top: 4%; /* Top padding */
}

/* Title for a latest article card */
.latest-card__title {
  font-size: 18px; /* Font size */
  font-weight: 500 !important; /* Medium font weight */
  margin: 0 0 0.5rem; /* Bottom margin */
  color: #111; /* Dark text color */
  line-height: 1.4; /* Line height */
}

/* Date for a latest article card */
.latest-card__date {
  font-size: 1rem; /* Font size */
  color: #999; /* Light gray text color */
}

/* Skyscraper Ad Box (reused from news section) */
.skyscraper-ad {
  background-color: #f1f1f1; /* Light gray background */
  height: 600px; /* Fixed height */
  width: 100%; /* Full width */
  border-radius: 6px; /* Rounded corners */
  text-align: center; /* Centers text */
  padding: 1rem; /* Internal padding */
  font-weight: 600; /* Semi-bold font weight */
  color: #444; /* Dark gray text color */
  display: flex; /* Uses flexbox */
  align-items: center; /* Vertically aligns content */
  justify-content: center; /* Horizontally aligns content */
  writing-mode: vertical-rl; /* Text written vertically, right-to-left */
  text-orientation: mixed; /* Allows characters to be oriented normally */
  font-size: 0.9rem; /* Font size */
}

/*
   ========================================================================================================
   5. News Section (Specific overrides/ajustments for news layout on smaller screens)
   ========================================================================================================
*/

/*
  ========================================================================================================
  6. Footer
  --------------------------------------------------------------------------------------------------------
  This section contains styles for the website's footer, including columns, links, and subscription form,
  with specific adjustments for LTR.
  ========================================================================================================
*/
.site-footer {
  background-color: #F8F2EA !important; /* Light background color */
  color: #333; /* Dark text color */
  padding: 3rem 1rem; /* Vertical and horizontal padding */
  font-family: 'FF Shamel Sans', sans-serif; /* Applies LTR base font */
  direction: ltr; /* Sets text direction to Left-to-Right */
}

/* Container for footer columns */
.footer-container {
  max-width: 1200px; /* Maximum width */
  margin: 0 auto; /* Centers horizontally */
  display: flex; /* Uses flexbox */
  flex-wrap: wrap; /* Allows columns to wrap */
  gap: 2rem; /* Gap between columns */
  justify-content: space-between; /* Distributes space between columns */
}

/* Individual footer column */
.footer-column {
  flex: 1 1 280px; /* Allows columns to grow/shrink, with a base width */
}

/* Footer logo style */
.footer-logo {
  width: 160px; /* Fixed width */
  margin-bottom: 1rem; /* Space below logo */
}

/* Footer tagline style, adjusted for LTR (text-align) */
.footer-tagline {
  font-size: 0.9rem; /* Font size */
  color: #333; /* Dark text color */
  margin: 0; /* Removes default margin */
  text-align: left; /* Aligns text to the left for LTR */
  font-family: inherit; /* Inherits font from parent */
}

/* Heading style for footer sections, adjusted for LTR (text-align) */
.footer-heading {
  font-size: 1rem; /* Font size */
  font-weight: 600; /* Semi-bold font weight */
  margin-bottom: 1rem; /* Space below heading */
  color: #333; /* Dark text color */
  text-align: left; /* Aligns text to the left for LTR */
  font-family: inherit; /* Inherits font from parent */
}

/* List styles for footer links, adjusted for LTR (padding and text-align) */
.footer-links {
  list-style: none; /* Removes default list bullets */
  padding: 0; /* Removes default padding */
  margin: 0; /* Removes default margin */
  text-align: left; /* Aligns text to the left for LTR */
}

/* Individual footer link item */
.footer-links li {
  margin-bottom: 0.5rem; /* Space below each link */
}

/* Footer link style */
.footer-links a {
  color: #333; /* Dark text color */
  text-decoration: none; /* No underline */
  font-size: 0.9rem; /* Font size */
}

/* Hover effect for footer links */
.footer-links a:hover {
  text-decoration: none; /* No underline on hover */
}

/* Footer text style, adjusted for LTR (text-align) */
.footer-text {
  font-size: 0.85rem; /* Font size */
  margin-bottom: 1rem; /* Space below */
  color: #bbb; /* Light gray text color */
  text-align: left; /* Aligns text to the left for LTR */
}

/* Footer subscription form layout */
.footer-form {
  display: flex; /* Uses flexbox */
  flex-wrap: nowrap; /* Prevents items from wrapping */
  gap: 0.5rem; /* Gap between input and button */
}

/* Email input field in the footer form, adjusted for LTR (text-align) */
.footer-form input[type="email"] {
  flex: 1; /* Allows input to grow and shrink */
  padding: 0.5rem 0.75rem; /* Internal padding */
  border: none; /* No border */
  border-radius: 44px; /* Pill shape */
  font-size: 0.9rem; /* Font size */
  text-align: left; /* Aligns text to the left for LTR */
  font-family: inherit; /* Inherits font from parent */
}

/* Button in the footer form */
.footer-form button {
  padding: 0.5rem 1rem; /* Internal padding */
  background-color: #c9111e; /* Primary red background */
  color: #fff; /* White text color */
  border: none; /* No border */
  font-size: 0.9rem; /* Font size */
  border-radius: 44px; /* Pill shape */
  cursor: pointer; /* Pointer cursor on hover */
}

/* Hover effect for footer form button */
.footer-form button:hover {
  background-color: #780a12; /* Darker red on hover */
}

/* Post title style */
.post-title {
  font-size: 28px; /* Font size */
  line-height: inherit; /* Inherits line height */
}

/* Video element dimensions */
.video {
  width: 960px; /* Fixed width */
  height: 540px; /* Fixed height */
  border-radius: 12px; /* Rounded corners */
}

/* Iframe within video player */
.video-player iframe {
  width: 100%; /* Full width */
  height: 500px; /* Fixed height */
  border-radius: 12px; /* Rounded corners */
}

/* Description for video */
.video-description {
  color: #6c757d; /* Dark gray text color */
}

/* Video card style */
.video-card {
  background-color: #fff; /* White background */
  border-radius: 12px; /* Rounded corners */
  overflow: hidden; /* Hides overflowing content */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
  height: 100%; /* Full height */
}

/* Hover effect for video cards */
.video-card:hover {
  transform: scale(1.02); /* Slightly scales up on hover */
}

/* Video thumbnail container */
.video-thumb {
  position: relative; /* Establishes positioning context for duration */
}

/* Image within video thumbnail */
.video-thumb img {
  width: 100%; /* Full width */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Ensures it takes full width */
  border-radius: 12px !important; /* Rounded corners */
}

/* Video duration overlay */
.video-duration {
  position: absolute; /* Absolute positioning */
  bottom: 8px; /* Aligned from the bottom */
  right: 12px; /* Aligned from the right */
  background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent dark background */
  color: #fff; /* White text color */
  font-size: 0.75rem; /* Small font size */
  padding: 2px 6px; /* Internal padding */
  border-radius: 12px; /* Rounded corners */
}

/* Title for video cards */
.video-card-title {
  font-size: 1rem; /* Font size */
  font-weight: 600; /* Semi-bold font weight */
  padding: 0.5rem; /* Internal padding */
}

/* Primary background color utility */
.bg-primary {
  --bs-bg-opacity: 1; /* Bootstrap variable for background opacity */
  background-color: #c9111e !important; /* Primary red background */
}

/*
  ========================================================================================================
  7. General Utilities & Search (LTR)
  --------------------------------------------------------------------------------------------------------
  This section contains general utility classes and styles for the search functionality, adjusted for LTR.
  ========================================================================================================
*/

/* Placeholder text style for search input */
#search-input::placeholder {
  color: #888; /* Gray placeholder text */
}

/* Form control styling within search form, adjusted for LTR (padding and text-align) */
#search-form .form-control {
  padding-left: 1rem !important; /* Left padding for LTR */
  text-align: left; /* Aligns text to the left for LTR */
}

/* Search button position, adjusted for LTR */
.ser-btn {
  left: 0 !important; /* Aligns to the left for LTR */
}

/* Search results container */
#search-results {
  margin-top: 30px; /* Top margin */
}

/* Search item padding and border */
.search-item {
  padding: 15px; /* Internal padding */
  border-bottom: 1px solid #eee; /* Light bottom border */
}

/* Heading style within a search item */
.search-item h5 {
  font-size: 1.2rem; /* Font size */
  margin-bottom: 5px; /* Space below */
}

/* Paragraph style within a search item */
.search-item p {
  color: #555; /* Dark gray text color */
  font-size: 0.95rem; /* Font size */
}

/* Search item layout */
.search-item {
  display: flex; /* Uses flexbox */
  margin-bottom: 20px; /* Space below */
  border-bottom: 1px solid #eee; /* Light bottom border */
  padding-bottom: 15px; /* Bottom padding */
}

/* Image within a search item */
.search-item img {
  width: 360px; /* Fixed width */
  height: 260px; /* Fixed height */
  object-fit: cover; /* Covers the area */
  margin-right: 15px; /* Right margin */
  border-radius: 12px; /* Rounded corners */
}

/* Information section within a search item */
.search-item .info {
  flex: 1; /* Allows info to grow and shrink */
  align-content: center; /* Aligns content to the center */
}

/* Heading style within a search item */
.search-item h5 {
  font-size: 1.1rem; /* Font size */
  margin-bottom: 5px; /* Space below */
}

/* Paragraph style within a search item, with text truncation */
.search-item p {
  overflow: hidden; /* Hides overflowing content */
  display: -webkit-box; /* Required for line clamping */
  -webkit-line-clamp: 3; /* Limits text to 3 lines */
  -webkit-box-orient: vertical; /* Required for line clamping */
  text-overflow: ellipsis; /* Displays ellipsis for truncated text */
}

/*
  ========================================================================================================
  9. Section Titles (LTR)
  --------------------------------------------------------------------------------------------------------
  This section defines styles for common section titles across the website, including hover effects and
  responsive sizing, with specific adjustments for LTR.
  ========================================================================================================
*/

/* Base style for all section titles */
.section-title {
  font-weight: 700; /* Bold font weight */
  margin-bottom: 1rem; /* Space below title */
  color: #222; /* Dark text color */
  position: relative; /* Establishes positioning context for ::after */
  transition: color 0.3s ease; /* Smooth color transition on hover */
  cursor: pointer; /* Pointer cursor on hover */
}

/* Transforms the chevron right icon for LTR display */
.bi-chevron-right::before {
  content: "\f285"; /* Unicode for chevron right */
  transform: rotate(-180deg) !important; /* Rotates the icon 180 degrees for LTR */
  transition: transform 0.3s ease !important; /* Smooth transition for rotation */
}

/* Hover effect: changes color */
.section-title:hover {
  color: #d90429; /* Darker red on hover */
}

/* Underline animation for section titles on hover, adjusted for LTR (left alignment) */
.section-title::after {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Absolute positioning */
  bottom: -5px; /* Positioned below the text */
  left: 0; /* Starts from the left for LTR */
  width: 0%; /* Initially no width */
  height: 3px; /* Fixed height */
  background-color: #d90429; /* Darker red color */
  transition: width 0.3s ease; /* Smooth width transition */
}

/* Expands the underline on hover */
.section-title:hover::after {
  width: 10%; /* Expands to 10% width on hover */
}

/* Responsive Sizes for section titles */
.section-title-sm {
  font-size: 1.25rem; /* Default small size */
}

.section-title-md {
  font-size: 1.75rem; /* Default medium size */
}

.section-title-lg {
  font-size: 2.25rem; /* Default large size */
}

/*
  -------------------------------------------------
  9.1. Section Titles Media Queries (LTR)
  -------------------------------------------------
*/

/* Media Queries for section title sizes (min-width 576px) */
@media (min-width: 576px) {
  .section-title-sm {
    font-size: 1.5rem; /* Larger small size */
  }

  .section-title-md {
    font-size: 2rem; /* Larger medium size */
  }

  .section-title-lg {
    font-size: 2.5rem; /* Larger large size */
  }
}

/* Media Queries for section title sizes (min-width 768px) */
@media (min-width: 768px) {
  .section-title-sm {
    font-size: 1.75rem; /* Even larger small size */
  }

  .section-title-md {
    font-size: 2.25rem; /* Even larger medium size */
  }

  .section-title-lg {
    font-size: 3rem; /* Even larger large size */
  }
}

/* Media Queries for section title sizes (min-width 992px), adjusted for LTR */
@media (min-width: 992px) {
  .section-title-sm {
    font-size: 1.3rem; /* Adjusted small size for larger desktops */
    margin-left: 0; /* Left margin for LTR */
  }

  .section-title-md {
    font-size: 2rem; /* Adjusted medium size for larger desktops */
  }

  .section-title-lg {
    font-size: 2rem; /* Adjusted large size for larger desktops */
  }
}

/*
  ========================================================================================================
  10. Media Queries (General LTR Adjustments)
  --------------------------------------------------------------------------------------------------------
  This section contains general responsive adjustments that apply across various components,
  specifically for LTR layouts.
  ========================================================================================================
*/

/*
  -------------------------------------------------
  10.1. Mobile & Tablet Devices (max-width: 768px)
  -------------------------------------------------
*/
@media (max-width: 768px) {
  /* Adjusts body positioning for mobile devices. */
  body {
    position: inherit; /* Inherits positioning */
  }
  /* Adjusts hero image height for mobile devices. */
  .hero-image {
    height: 30vh; /* Adjusted hero image height */
  }
  /* Adjusts urgent card overlay positioning for mobile devices (using logical properties for LTR). */
  .urgent-card-overlay {
    /* Ensure it spans the full width with some padding */
    left: 1rem; /* Adjust padding from left */
    right: 1rem; /* Adjust padding from right */
    bottom: -1rem; /* Keep existing bottom offset */
    width: auto; /* Allow width to be determined by left/right */
    max-width: calc(100% - 2rem); /* Max width based on container with padding */
    margin-inline: auto; /* Center it horizontally */
    z-index: 20; /* Ensures it stays on top */
    pointer-events: none; /* Prevents clicks on the overlay itself */
    padding: 0.75rem; /* Internal padding */
    box-sizing: border-box; /* Include padding in width */
  }
  /* Adjusts urgent card styling for mobile devices. */
  .urgent-card {
    /* Make it fill the overlay and remove problematic positioning/clipping */
    width: 100%; /* Ensure it takes full width of its parent */
    right: auto; /* Remove any fixed right offset */
    left: auto; /* Remove any fixed left offset */
    pointer-events: auto; /* Allows clicks on the card itself */
    position: relative; /* Ensure it's positioned relative to its normal flow */
    background-color: #f8f2ea; /* Light background color */
    color: #1f2937; /* Dark text color */
    font-family: inherit; /* Inherits font from parent */
    padding: 1rem; /* Internal padding */
    max-width: 100%; /* Ensures it doesn't overflow */
    /* Remove complex clip-path for mobile to prevent overflow */
    clip-path: none;
    border-left: 12px solid #c9111e; /* Main border for LTR */
    border-bottom: 12px solid #c9111e; /* Keep bottom border */
    border-right: none !important; /* Ensure no right border */
    box-sizing: border-box; /* Includes padding and border in element's total size */
  }
  /* Adjusts urgent title and label font sizes for mobile devices. */
  .urgent-title {
    font-size: 1.2rem; /* Smaller font size */
  }
  .urgent-label {
    font-size: 0.7rem; /* Smaller font size */
  }
  /* Adjusts urgent card pseudo-element size for mobile devices. */
  .urgent-card::after {
    /* Ensure the triangle is positioned correctly for LTR */
    left: 0;
    right: auto;
    clip-path: polygon(0 0, 100% 100%, 0 100%); /* Correct triangle for bottom-left */
  }
  /* Adjusts trending card styling on tablets. */
  .trending-card {
    padding: 1.5rem; /* Smaller padding */
    /* Adjusted clip-path for smaller size for LTR */
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 24px 100%, 0% 100%, 0 24px);
    border-left: 12px solid #c9111e; /* Thinner left border */
    border-bottom: 12px solid #c9111e; /* Thinner bottom border */
    width: min-content; /* Set width of the card */
  }
  /* Adjusts trending title font size on tablets. */
  .trending-title {
    font-size: 1.3rem; /* Smaller font size */
  }
  /* Adjusts watch now card styling on tablets. */
  .watch-now-card {
    padding: 1.5rem; /* Smaller padding */
    /* Adjusted clip-path for smaller size for LTR */
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 0 24px);
    border-left: 12px solid #c9111e; /* Thinner left border */
    border-bottom: 12px solid #c9111e; /* Thinner bottom border */
  }
  /* Adjusts watch now title font size on tablets. */
  .watch-now-title {
    font-size: 1.3rem; /* Smaller font size */
  }
  /* Adjusts watch now grid to two columns on tablets. */
  .watch-now-grid {
    grid-template-columns: 1fr 1fr; /* Two columns on smaller screens */
  }
  /* Stacks culture section grid items vertically on tablets. */
  .section-culture__grid {
    flex-direction: column; /* Stacks grid items vertically */
  }
  /* Adjusts featured card styling on tablets. */
  .featured-card {
    max-width: 100%; /* Full width */
    /* Adjusted clip-path for smaller size for LTR */
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 0 24px);
    border: none; /* Removes borders */
    padding: 1rem; /* Padding */
  }
  /* Adjusts card title font size within featured card on tablets. */
  .card-title {
    font-size: 1.2rem; /* Smaller font size */
  }
  /* Adjusts urgent card overlay for tablets. */
  .urgent-card-overlay {
    right: 28px; /* Adjusted right position */
    left: 0; /* Aligned to the left */
    bottom: -24px; /* Adjusted bottom position */
    padding: 1rem; /* Padding */
    max-width: 95%; /* Max width */
    margin: 0 auto; /* Centers horizontally */
  }
  /* Adjusts urgent card styling for tablets. */
  .urgent-card {
    padding: 1rem; /* Padding */
    font-size: 1rem; /* Font size */
    clip-path: none; /* Removes clip path */
    border-right: none; /* Removes right border */
    pointer-events: auto; /* Allows clicks */
    position: relative; /* Positioning context */
    background-color: #f8f2ea; /* Light background */
    color: #1f2937; /* Dark text */
    font-family: inherit; /* Inherits font */
    max-width: 100%; /* Max width */
    /* Custom clip-path for LTR */
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 0 24px);
    border-left: 24px solid #c9111e; /* Left border */
    border-bottom: 24px solid #c9111e; /* Bottom border */
    border-right: none !important; /* No right border */
    box-sizing: border-box; /* Box model */
  }
  /* Adjusts urgent title font size for tablets. */
  .urgent-title {
    font-size: 1.25rem; /* Font size */
  }
  /* Hides urgent card pseudo-element on tablets. */
  .urgent-card::after {
    display: none; /* Hides decorative triangle */
  }
  /* Adjusts recent news positioning and size for tablets. */
  .recent-news {
    right: -30px; /* Adjusted right position */
    width: 95%; /* Width */
    height: fit-content; /* Fits content height */
    margin-right: 2.5%; /* Right margin */
    margin-top: 5%; /* Top margin */
    background-color: #c9111e; /* Primary red background */
    padding: 1rem; /* Padding */
    align-content: end; /* Aligns content to the end */
    border-bottom-left-radius: 16px; /* Rounded corners */
    border-bottom-right-radius: 16px; /* Rounded corners */
  }
  /* Adjusts heading font size and text alignment for tablets. */
  .heading-urg {
    font-size: 1rem; /* Font size */
    font-weight: 500; /* Medium font weight */
    line-height: 2rem; /* Line height */
    text-align: left; /* Aligns text to the left */
  }
  /* Adjusts body font size for tablets and smaller screens. */
  body {
    font-size: 15px; /* Slightly smaller base font size */
  }
  /* Reduces container padding on smaller screens for better content fit. */
  .container {
    padding: 0.75rem; /* Reduced container padding */
    width: fit-content; /* Fits content width */
  }
  /* Adjusts card title font size for better readability on smaller screens. */
  .card-title {
    font-size: 1.15rem; /* Adjusted card title font size */
  }
  /* Specific adjustments for the urgent text block within the urgent section. */
  .urgent .urgent-text {
    width: 100% !important; /* Forces full width */
    margin-left: 0 !important; /* Removes left margin */
    padding: 0.75rem; /* Adds padding */
  }
  /* Removes custom clip-path and thins border for hero overlay on smaller screens. */
  .hero-overlay {
    border-left: 4px solid #c9111e; /* Thinner left border */
    /* Adjusted clip-path for smaller size for LTR */
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 0 24px);
  }
  /* Adjusts navbar padding for smaller screens. */
  .navbar {
    padding: 1rem; /* Adjusted navbar padding */
  }
  /* Stacks footer columns vertically on smaller screens. */
  .footer-container {
    flex-direction: column; /* Stacks footer columns vertically */
    align-items: flex-start; /* Aligns items to the start */
  }
  /* Stacks footer form elements vertically on smaller screens. */
  .footer-form {
    flex-direction: column; /* Stacks form elements vertically */
    width: 100%; /* Ensures full width */
  }
  /* Ensures footer form input and button take full width. */
  .footer-form input,
  .footer-form button {
    width: 100%; /* Full width for form elements */
  }
  /* Adjusts search form padding and control font size. */
  #search-form .form-control {
    padding-left: 1rem !important; /* Left padding for LTR */
    text-align: left; /* Aligns text to the left */
  }
  /* Adjusts search button position for LTR. */
  .ser-btn {
    left: 0 !important; /* Aligns to the left for LTR */
  }
  /* Adjusts search item image width and margin. */
  .search-item img {
    width: 100%; /* Full width */
    height: auto; /* Maintains aspect ratio */
    margin-bottom: 10px; /* Space below */
  }
  /* Adjusts search item info padding and text alignment. */
  .search-item .info {
    width: 100%; /* Full width */
    padding: 0; /* Removes padding */
    text-align: left; /* Aligns text to the left */
  }
  /* Adjusts search item heading and paragraph font sizes. */
  .search-item h5 {
    font-size: 1rem; /* Smaller font size */
  }
  .search-item p {
    font-size: 0.9rem; /* Smaller font size */
  }
}

/*
  -------------------------------------------------
  10.2. Tablet Devices (min-width: 769px and max-width: 1024px)
  -------------------------------------------------
*/
@media (min-width: 769px) and (max-width: 1024px) {
  /* Adjusts hero image height for tablet devices. */
  .hero-image {
    height: 41vh; /* Adjusted hero image height */
  }
  /* Adjusts urgent card overlay positioning for tablet devices (using logical properties for LTR). */
  .urgent-card-overlay {
    right: 37px !important; /* Force right position */
    bottom: -1.5rem; /* Adjusted bottom position */
    left: auto; /* Ensure left is auto */
    max-width: 92%; /* Max width */
  }
  /* Adjusts urgent card styling for tablet devices. */
  .urgent-card {
    left: -34px; /* Adjusted left position */
    width: 360px; /* Fixed width */
    padding: 1.25rem; /* Padding */
    font-size: 1rem; /* Font size */
  }
  /* Adjusts urgent title font size for tablet devices. */
  .urgent-title {
    font-size: 18px !important; /* Specific font size */
    font-weight: 500 !important; /* Medium font weight */
    margin: 0; /* Removes default margin */
    line-height: 1.3; /* Line height */
    color: #1b1e23; /* Dark text color */
  }
  /* Adjusts urgent card pseudo-element size for tablet devices. */
  .urgent-card::after {
    width: 20px; /* Larger triangle */
    height: 20px; /* Larger triangle */
  }
  /* Adjusts recent news positioning and size for tablet devices. */
  .recent-news {
    margin-top: -30px !important; /* Force top margin */
    height: fit-content; /* Fits content height */
    height: 160px; /* Fixed height */
    margin-left: 2.5%; /* Left margin */
    background-color: #c9111e; /* Primary red background */
    padding: 1rem; /* Padding */
    align-content: end; /* Aligns content to the end */
    border-bottom-left-radius: 16px; /* Rounded corners */
    border-bottom-right-radius: 16px; /* Rounded corners */
  }
  /* Adjusts heading font size and text alignment for tablet devices. */
  .heading-urg {
    font-size: 1rem; /* Font size */
    font-weight: 500; /* Medium font weight */
    line-height: 2rem; /* Line height */
    text-align: left; /* Aligns text to the left */
  }
  /* Adjusts section title font sizes for tablets and larger screens. */
  .section-title-sm {
    font-size: 1.75rem; /* Even larger small size */
  }
  .section-title-md {
    font-size: 2.25rem; /* Even larger medium size */
  }
  .section-title-lg {
    font-size: 3rem; /* Even larger large size */
  }
}

/*
  -------------------------------------------------
  10.3. Mobile & Small Tablet Devices (max-width: 600px)
  -------------------------------------------------
*/
@media (max-width: 600px) {
  /* Adjusts news layout to a single column for very small screens. */
  .news-layout {
    grid-template-columns: 1fr; /* Single column on very small screens */
  }
  /* Sets max height for featured news images to prevent excessive height. */
  .news-item.featured img {
    max-height: 220px; /* Max height for featured news images */
    object-fit: cover; /* Ensures image covers the area */
  }
  /* Adjusts font size for section titles on very small screens. */
  .section-title {
    font-size: 1.1rem; /* Smaller font size for section titles */
  }
  /* Adjusts font size for news headlines on very small screens. */
  .news-headline {
    font-size: 0.95rem; /* Smaller font size for news headlines */
  }
  /* Stacks latest article card content vertically. */
  .latest-card {
    flex-direction: column; /* Stacks image and content vertically */
    align-items: stretch; /* Stretches items to fill container */
  }
  /* Adjusts latest article card image size for very small screens. */
  .latest-card__image {
    width: 100%; /* Full width */
    height: 180px; /* Smaller height */
  }
}

/*
  -------------------------------------------------
  10.4. Mobile Devices (max-width: 480px)
  -------------------------------------------------
*/
@media (max-width: 480px) {
  /* Further reduces base font size for very small mobile screens. */
  body {
    position: inherit; /* Inherits positioning */
    font-size: 14px; /* Even smaller base font size */
  }
  /* Reduces card title font size for very small mobile screens. */
  .card-title {
    font-size: 1rem; /* Smallest card title font size */
  }
  /* Reduces hero overlay padding for very small mobile screens. */
  .hero-overlay {
    padding: 0.5rem; /* Smallest hero overlay padding */
  }
  /* Adjusts urgent card overlay positioning for very small mobile screens. */
  .urgent-card-overlay {
    right: 0.5rem; /* Adjusted right position */
    left: 0.5rem; /* Adjusted left position */
    bottom: -0.75rem; /* Adjusted bottom position */
    padding: 0.5rem; /* Smaller padding */
    max-width: calc(100% - 1rem); /* Adjusted max-width */
  }
  /* Adjusts urgent card styling for very small mobile screens. */
  .urgent-card {
    padding: 0.75rem; /* Smaller padding */
    border-left: 8px solid #c9111e; /* Thinner border for LTR */
    border-bottom: 8px solid #c9111e; /* Thinner border */
    border-right: none !important; /* Ensure no right border */
  }
  /* Adjusts urgent title and label font sizes for very small mobile screens. */
  .urgent-title {
    font-size: 1rem; /* Smaller font size */
  }
  .urgent-label {
    font-size: 0.6rem; /* Smaller label font size */
  }
}

/*
  -------------------------------------------------
  10.5. Desktop Devices (min-width: 992px)
  -------------------------------------------------
*/
@media (min-width: 992px) {
  /* Hides the mobile tab bar on larger screens (desktops). */
  .mobile-tab-bar {
    display: none;
  }
  /* Adjusts card title font size for larger screens. */
  .card-title {
    font-size: 1.3rem; /* Adjusted card title font size */
  }
  /* Changes navbar to a column layout and aligns items to the start on larger screens. */
  .navbar {
    flex-direction: column; /* Stacks navbar items vertically */
    align-items: flex-start; /* Aligns navbar items to the start */
  }
  /* Adjusts news layout to two columns on larger screens. */
  .news-layout {
    grid-template-columns: 1fr 1fr; /* Two columns on medium screens */
  }
  /* Hides skyscraper ad on medium and smaller screens. */
  .skyscraper-ad {
    display: none; /* Hides skyscraper ad on medium and smaller screens */
  }
  /* Stacks latest articles section content and ad vertically on larger screens. */
  .section-latest__row {
    flex-direction: column; /* Stacks content and ad vertically */
    width: 80%; /* Adjusted width */
  }
  /* Hides ad on smaller screens within the latest articles section. */
  .section-latest__ad {
    display: none; /* Hides ad on smaller screens */
  }
  /* Arranges latest article cards horizontally on larger screens. */
  .latest-card {
    flex-direction: row; /* Arranges image and content horizontally */
  }
  /* Adjusts section title font sizes for larger desktops. */
  .section-title-sm {
    font-size: 1.3rem; /* Adjusted small size for larger desktops */
    margin-right: 2.5%; /* Right margin for LTR */
  }
  .section-title-md {
    font-size: 2rem; /* Adjusted medium size for larger desktops */
  }
  .section-title-lg {
    font-size: 2rem; /* Adjusted large size for larger desktops */
  }
}

/*
  -------------------------------------------------
  10.6. Large Desktop Devices (min-width: 1025px)
  -------------------------------------------------
*/
@media (min-width: 1025px) {
  /* Adjusts hero image height for large desktop devices. */
  .hero-image {
    height: 65vh; /* Adjusted hero image height */
  }
  /* Adjusts urgent card overlay positioning for large desktop devices (using logical properties for LTR). */
  .urgent-card-overlay {
    left: 22px !important; /* Force right position */
    bottom: -2rem; /* Adjusted bottom position */
    right: auto; /* Ensure right is auto */
    max-width: 540px; /* Max width */
    padding: 1.5rem; /* Padding */
  }
  /* Adjusts urgent card styling for large desktop devices. */
  .urgent-card {
    left: 21px; /* Adjusted right position */
    padding: 2rem; /* Padding */
    font-size: 1rem; /* Font size */
  }
  /* Adjusts urgent title font size for large desktop devices. */
  .urgent-title {
    font-size: 1.8rem; /* Larger font size */
  }
  /* Adjusts urgent card pseudo-element size for large desktop devices. */
  .urgent-card::after {
    width: 30px; /* Larger triangle */
    height: 30px; /* Larger triangle */
  }
  /* Adjusts recent news positioning and size for large desktop devices. */
  .recent-news {
    margin-top: 0px; /* Top margin */
    width: 95%; /* Width */
    height: fit-content; /* Fits content height */
    margin-left: 2.5%; /* Left margin */
    background-color: #c9111e; /* Primary red background */
    padding: 1rem; /* Padding */
    align-content: end; /* Aligns content to the end */
    border-bottom-left-radius: 16px; /* Rounded corners */
    border-bottom-right-radius: 16px; /* Rounded corners */
  }
}

/*
  -------------------------------------------------
  10.7. Extra Large Desktop Devices (min-width: 1200px)
  -------------------------------------------------
*/
@media (min-width: 1200px) {
  /* Adjusts urgent card overlay positioning for extra large desktop devices. */
  .urgent-card-overlay {
    left: 28px !important; /* Force left position */
    bottom: -36px; /* Adjusted bottom position */
    max-width: 90%; /* Max width */
  }
  /* Adjusts urgent card styling for extra large desktop devices. */
  .urgent-card {
    left: -15px !important; /* Force left position */
    width: 480px; /* Fixed width */
    padding: 1.5rem; /* Padding */
    font-size: 1.4rem; /* Font size */
  }
  /* Adjusts urgent title font size for extra large desktop devices. */
  .urgent-title {
    font-size: 1.6rem; /* Font size */
  }
}

/*
  -------------------------------------------------
  10.8. Very Large Desktop Devices (min-width: 1669px)
  -------------------------------------------------
*/
@media (min-width: 1669px) {
  /* Adjusts urgent card overlay positioning for very large desktop devices. */
  .urgent-card-overlay {
    left: 30px; /* Adjusted left position */
    bottom: -36px; /* Adjusted bottom position */
    max-width: 90%; /* Max width */
  }
  /* Adjusts urgent card styling for very large desktop devices. */
  .urgent-card {
    left: -5px !important; /* Force left position */
    width: 480px; /* Fixed width */
    padding: 1.5rem; /* Padding */
    font-size: 1.4rem; /* Font size */
  }
  /* Adjusts urgent title font size for very large desktop devices. */
  .urgent-title {
    font-size: 1.6rem; /* Font size */
  }
}
 
/* Prevents overflow and ensures consistent spacing for the urgent hero section */
.hero.urgent {
  overflow-x: hidden; /* Prevents horizontal overflow */
}

/* Breadcrumb item spacing and divider */
.breadcrumb-item+.breadcrumb-item {
  padding-left: 8px; /* Left padding */
  padding-right: 8px; /* Right padding */
}

/* Breadcrumb divider for LTR */
.breadcrumb-item+.breadcrumb-item::before {
  float: left; /* Floats divider to the left */
  color: var(--bs-breadcrumb-divider-color); /* Inherits divider color */
  content: var(--bs-breadcrumb-divider, "/"); /* Divider content */
  /* padding: 16px; */ /* Commented out padding */
  display: contents; /* Ensures it doesn't create a box */
}
/*Search*/
/* ---------- Search Overlay ---------- */
.search-overlay[hidden] { display: none; }

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.search-overlay__panel {
  position: relative;
  width: min(90vw, 840px);
  margin-inline: auto;
  margin-block-start: 12vh;
  background: transparent;
  padding: 0 1rem;
  transform: translateY(10px);
  transition: transform .28s ease;
}
.search-overlay.is-open .search-overlay__panel { transform: translateY(0); }

.search-overlay__close {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.05);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}
.search-overlay__close:hover { background: rgba(255,255,255,.12); }
.search-overlay__close:active { transform: scale(.96); }

/* Field container */
.search-form__field {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border-radius: 16px;
  padding-inline: 1rem;
  padding-block: .5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: box-shadow .25s ease, transform .15s ease;
}
.search-form__field:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent),
              0 12px 34px rgba(0,0,0,.22);
}

/* Icon + input + button */
.search-form__icon {
  font-size: 1.25rem;
  color: #777;
}
.search-form__input {
  appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  font: 500 1.125rem/1.4 var(--font-base, system-ui);
  color: #111;
  padding-block: .75rem;
  padding-inline: .25rem;
  flex: 1 1 auto;
}
.search-form__input::placeholder { color: #9aa0a6; }

.search-form__submit {
  border-radius: 12px;
  padding-inline: 1rem;
  padding-block: .65rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  transition: transform .08s ease;
}
.search-form__submit:active { transform: translateY(1px); }
@media (max-width: 480px) {
  .search-form__submit-text { display: none; }
  .search-form__submit { padding-inline: .8rem; }
}

/* Suggestions/result area (optional) */
.search-suggestions {
  margin-block-start: 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  max-height: min(50vh, 420px);
  overflow: auto;
  display: none; /* set to block when you render items */
}

/* Micro-interaction for the navbar search button */
.navbar-icon-btn--search {
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.navbar-icon-btn--search:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.navbar-icon-btn--search:active { transform: translateY(0); }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .search-overlay, .search-overlay__panel,
  .navbar-icon-btn--search, .search-form__submit { transition: none !important; }
}

.btn-danger{
  background-color: #c9111e !important; /* Primary red background */
  color: #fff; /* White text color */
}
.btn-danger:hover {
  background-color: #b00c1a !important; /* Darker red on hover */
  color: #fff; /* White text color */
}

/* Utility class to hide elements */

.display-none {
  display: none !important; /* Forces element to not display */
}