/*
  ========================================================================================================
  Project: Khabar24 RTL CSS File
  Description: This CSS file contains the styling for the Khabar24 website with a Right-to-Left (RTL)
               direction. It includes font definitions, global resets, typography, and component
               adjustments for RTL 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 RTL-specific font */

:root {
  --font-base: 'FF Shamel Sans', sans-serif; /* Base font family for RTL */
  --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 */
   /* tune height & color as you like */
  /* --page-top-gradient-height: clamp(260px, 32vh, 560px);
  --page-top-gradient-color: #ffdbd6;--top-gradient-height: clamp(240px, 35vh, 520px); */

  /* Animation timing used throughout micro‑interactions */
  --ease-duration: 0.3s;
}

/*
  ------------------------------------------------------------------------------------------------------
  1.1. Global enhancements
  ------------------------------------------------------------------------------------------------------
  These helpers make the site feel smoother and more interactive without sacrificing performance.  A
  smooth scroll behaviour is applied to anchor links, overflow on the x‑axis is hidden to prevent
  accidental sideways scrolling, and default transitions are disabled when visitors prefer reduced
  motion.  See `prefers‑reduced‑motion` below for details.
*/

html {
  scroll-behavior: smooth; /* Smooth scrolling for anchor links */
  min-height: 100%;
}

html, body { background-color: #fff; }


/* create a gradient layer behind all content */
body::before{
  content: "";
  position: fixed;           /* stays at the top as you scroll */
  inset: 0 0 auto 0;         /* top/left/right = 0; height set below */
  height: calc(var(--page-top-gradient-height) + env(safe-area-inset-top));
  background: linear-gradient(to bottom,
              var(--page-top-gradient-color) 0%,
              rgba(255,219,214,0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;      /* never blocks clicks */
  z-index: 0;                /* sits underneath the content layer */
}

/* ensure your actual page content sits above the gradient layer */
header, .spot-wrap, main, .site, .container-wrap, #app, .page, .content{
  position: relative;
  z-index: 1;
}

/* avoid accidental horizontal scrollbars from wide children */
html, body { overflow-x: clip; }


/* Respect user preferences for reduced motion.  When enabled, animations are removed to improve
   accessibility and reduce potential motion sickness. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 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;
}

/* Base styles for the body element with RTL font */
body {
  margin: 0; /* Removes default body margin */
  font-family: 'FF Shamel Sans', sans-serif; /* Applies the RTL 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: underline; /* Adds underline on hover */
}

/* Specific styles for h4 and h5 headings */
h4,
h5 {
  font-family: 'FF Shamel Sans', sans-serif; /* Applies RTL 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 RTL.
  ========================================================================================================
*/
/*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 RTL (margin-right) */
.page-heading {
  margin-right: 2.5%; /* Right margin for RTL */
  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;
}
.heading-with-icon a{
  display: flex;
  gap: 1rem;
}

.cat-icon{
  width: 32px;
  border-radius: 8px;
}
/* Styles for a large category icon, floated to the left for RTL */
.cat-icon-lg {
  width: 80px; /* Fixed width */
  height: 80px; /* Fixed height */
  float: left; /* Floats the icon to the left for RTL */
  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 */

  /* Sticky navigation – the bar stays fixed to the top once scrolled past its initial position */
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 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 */
}

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

/* 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 RTL (right position) */
.badge-dot {
  position: absolute; /* Absolute positioning relative to parent icon */
  top: 0; /* Aligned to the top */
  right: 0; /* Aligned to the right for RTL */
  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 RTL.
  ========================================================================================================
*/

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

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

/* 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 (RTL)
  -------------------------------------------------
*/

/* 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 RTL */
.urgent-card-overlay {
  position: absolute; /* Absolute positioning */
  bottom: -24px; /* Positioned below the image */
  right: 0; /* Aligned to the right for RTL */
  width: 100%; /* Takes full width of its parent */
  z-index: 20; /* Ensures it stays on top */
  pointer-events: none; /* Prevents clicks on the overlay itself */
}

/* 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 RTL */
.urgent-card {
  right: -32px; /* Adjusted right position for RTL */
  pointer-events: auto; /* Allows clicks on the card itself */
  position: relative; /* Establishes positioning context */
  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 */
  /* Custom clip-path for a unique shape (top-right corner cut) for RTL */
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 0 24px);
  border-right: 24px solid #c9111e; /* Red right border for RTL */
  border-bottom: 24px solid #c9111e; /* Red bottom border */
  border-left: none !important; /* Ensures no left border */
  box-sizing: border-box; /* Includes padding and border in element's total size */

  /* Interactive micro‑interaction: animate transform and shadow on hover */
  transition: transform var(--ease-duration) ease, box-shadow var(--ease-duration) ease;
  will-change: transform, box-shadow;
}

/* Lift the urgent card on hover for an engaging effect */
.urgent-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Decorative triangle at the bottom-left of the card, adjusted for RTL */
.urgent-card::after {
  content: ''; /* Required for pseudo-element */
  position: absolute; /* Absolute positioning */
  bottom: 0; /* Aligned to the bottom */
  left: 0; /* Aligned to the left for RTL */
  width: 16px; /* Fixed width */
  height: 16px; /* Fixed height */
  background-color: #101522; /* Dark background color */
  /* Custom clip-path for a triangle shape */
  clip-path: polygon(100% 0, 0 100%, 100% 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 (RTL)
  -------------------------------------------------
*/

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

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

  /* Interactive micro‑interaction: smoothly animate transform and shadow on hover */
  transition: transform var(--ease-duration) ease, box-shadow var(--ease-duration) ease;
  will-change: transform, box-shadow;
}

/* Lift the trending card slightly on hover for a subtle interactive feel */
.trending-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

/* Decorative triangle at the bottom-left of the trending card, adjusted for RTL */
.trending-card::after {
  content: ''; /* Required for pseudo-element */
  position: absolute; /* Absolute positioning */
  bottom: 0; /* Aligned to the bottom */
  left: 0 !important; /* Aligned to the left for RTL */
  right: 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(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 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 RTL (padding-right) */
.trending-list {
  list-style: none; /* Removes default list bullets */
  padding-right: 0; /* Removes default right padding for RTL */
  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) (RTL)
  -------------------------------------------------
*/
/* Grid: 2-up mobile, 3-up tablet, 4-up desktop */
.section-watch-now .watch-now-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.25rem;
}
@media (min-width: 768px){
  .section-watch-now .watch-now-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1200px){
  .section-watch-now .watch-now-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Card + micro-interactions */
.video-card .video-link{ display:block; text-decoration:none; color:inherit; }
.video-card{ height:100%; }
.video-thumbnail{
  position:relative; aspect-ratio:16/9; background:#e9ecef; overflow:hidden; border-radius:12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1);
}
.video-thumbnail img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.0); transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s;
}
.video-link:hover .video-thumbnail{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.video-link:hover .video-thumbnail img{
  transform: scale(1.04); filter: saturate(1.05) contrast(1.02);
}

/* Gradient wash + subtle shine */
.video-thumbnail::before{
  content:""; position:absolute; inset:auto 0 0 0; height:42%;
  background: linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0));
  opacity:.0; transform: translateY(8px);
  transition: opacity .22s, transform .22s;
}
.video-thumbnail::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%); transition: transform .6s ease;
  pointer-events:none;
}
.video-link:hover .video-thumbnail::before{ opacity:1; transform: translateY(0); }
.video-link:hover .video-thumbnail::after{ transform: translateX(120%); }

/* Chips (duration/views/date) */
.video-chips{
  position:absolute; inset-block-start:.5rem; inset-inline-start:.5rem;
  display:flex; gap:.35rem; flex-wrap:wrap; z-index:2;
}
.chip{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.18rem .5rem; font-size:.75rem; border-radius:999px; line-height:1;
}
.chip--dark{ background: rgba(0,0,0,.6); color:#fff; }

/* Play pill micro pulse */
.video-play{
  position:absolute; inset-block-end:.6rem; inset-inline-end:.6rem;
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:999px;
  background: rgba(0,0,0,.7); color:#fff; font-size:1.1rem;
  transform: scale(1); transition: transform .22s cubic-bezier(.2,.8,.2,1), filter .22s;
  z-index:2;
}
.video-link:hover .video-play{ transform: scale(1.06); filter: brightness(1.05); }

/* Title */
.video-title{ margin:.6rem .2rem 0; font-weight:700; line-height:1.25; color:inherit; }

/* Focus styles */
.video-link:focus-visible{
  outline:3px solid color-mix(in oklab, var(--brand-red, #c9111e) 85%, white);
  outline-offset:4px; border-radius:12px;
}

/* Reserve space (CLS guard) even before image loads */
.video-thumbnail{ min-height: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .video-thumbnail, .video-thumbnail img, .video-thumbnail::before, .video-thumbnail::after,
  .video-play, .video-link:focus-visible { transition:none !important; }
}
/* 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 */
}
.video-thumbnail{ --mx:-200px; --my:-200px; }
.video-thumbnail{ position:relative; }
.video-thumbnail i{ pointer-events:none; }
.video-thumbnail > .spotlight{ display:none; }
.video-thumbnail::marker{ content: none; }
.video-thumbnail::selection{ background: transparent; }
.video-thumbnail:after{} /* already used by shine */
.video-thumbnail:before{} /* already gradient */
.video-thumbnail .spotlight{}
.video-thumbnail { /* add a radial spotlight layer */
  background-image: radial-gradient(120px 120px at var(--mx) var(--my), rgba(255,255,255,.12), transparent 60%);
  background-repeat: no-repeat;
}

/* 2-up mobile, 3-up tablet, 6-up desktop */
.section-watch-now .watch-now-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* mobile */
  gap: 1.25rem;
}
@media (min-width: 768px){
  .section-watch-now .watch-now-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } /* tablet */
}
@media (min-width: 1200px){
  .section-watch-now .watch-now-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); } /* desktop */
}

/* Equal-height cards & tidy structure (keeps your micro-interactions intact) */
.video-card{ height:100%; }
.video-card .video-link{ display:block; text-decoration:none; color:inherit; height:100%; }
.video-thumbnail{ aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:#e9ecef; position:relative; }
.video-thumbnail img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-title{ margin:.6rem .2rem 0; font-weight:700; line-height:1.25; }

/* Specific width for post articles */
.post-article {
  width: 960px;
}/*
  -------------------------------------------------
  5.4. Trending Posts Section (RTL/LTR)
  -------------------------------------------------
*/

/* Section for "Trending Posts" */

.section-trending-top {
  font-family: 'FF Shamel Sans', sans-serif;
  padding: 3rem 0;
}

/* Card wrapper with clipped corner (top-corner cut) */
.trending-card {
    background-color: #F1F1F1;
    padding: 2rem;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 0 24px);
    border-right: 24px solid #c9111e;
    border-bottom: 24px solid #c9111e;
    border-left: none !important;
    transition: transform var(--ease-duration) ease, box-shadow var(--ease-duration) ease;
    will-change: transform, box-shadow;
}
.trending-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* Direction-aware tweak for LTR (mirror the cut + border side) */
:root:dir(ltr) .trending-card {
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 24px), 0 0);
  border-inline-start: 24px solid #c9111e;
  border-inline-end: none;
}

/* Decorative triangle at bottom-inline-start */
.trending-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: unset;
  left: 0;
  width: 24px;
  height: 24px;
  background-color: #101522;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 0 24px);
}

/* Small badge (reused) */
.badge--small {
  font-size: 0.75rem;
  color: #888;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.trend-content{
  padding: 1rem;
}
/* Section title + link */
.trending-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #111;
  line-height: 1.4;
}
.trending-link {
  margin-top: 2rem;
  display: inline-block;
  font-size: 0.9rem;
  color: #c9111e;
  font-weight: 600;
  text-decoration: none;
}
.trending-link a:hover {
  font-weight: 600;
  text-decoration: none;
}
.trending-link:hover { text-decoration: none; }
.trend-content p:hover{
  text-decoration: none;
}

/* Grid of trending posts */
.trending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* Individual trending post card */
.trend-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.trend-card:hover { transform: translateY(-4px); }

/* Post thumbnail */
.trend-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background-color: #ddd;
}
.trend-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-item-card{
  background-color: rgba(253, 247, 240, 0.7);
  border-radius: 16px;
  padding: .5rem;
  margin: 8px;
  width: 340px;
}
.news-item-card:hover{
  background-color: #F3EDE5;
  border-radius: 16px;
  padding: .5rem;
  margin: 8px;
  width: 340px;
}
/* Overlay pill (e.g., "🔥 Trending", views, or time) */
.trend-chip {
  display: none;
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 300;
}
/* 2-up on mobile, 3-up on tablet (rows wrap), 6-up on desktop */
.section-trending-top .trending-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* mobile: 2 per row */
  gap: 1.25rem;
}

@media (min-width: 768px){ /* tablet */
  .section-trending-top .trending-grid{
    grid-template-columns: repeat(3, minmax(0,1fr)); /* 3 per row -> 2 rows for 6 items */
  }
}

@media (min-width: 1200px){ /* desktop */
  .section-trending-top .trending-grid{
    grid-template-columns: repeat(6, minmax(0,1fr)); /* 6 in one row */
  }
}

/* Equal-height cards & tidy structure */
.section-trending-top .trend-card{ height:100%; }
.section-trending-top .trend-card > a{
  display:flex; flex-direction:column; height:100%; text-decoration:none;
}
.section-trending-top .trend-thumb{ aspect-ratio:16/9; overflow:hidden; background:#ddd; }
.section-trending-top .trend-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.section-trending-top .trend-content{
  padding:.75rem .875rem 1rem; display:flex; flex-direction:column; gap:.25rem; flex:1;
}
.section-trending-top .trend-title{ margin:0; font-weight:700; line-height:1.25; }
.section-trending-top .trending-date{ margin-top:auto; } /* push date to bottom */

/* Card title */
.trend-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0.75rem;
}

/* Optional: specific width wrapper if you used it before */
.trend-article { width: 960px; }

/* ---- Backwards-compat aliases (optional while you migrate HTML) ---- */
.section-watch-now { all: unset; }
.watch-now-card, .watch-now-title, .watch-now-link,
.watch-now-grid, .video-card, .video-thumbnail,
.video-play, .video-title, .post-article { /* deprecated */ }


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

/* Section for general news grid */
.section-news {
  font-family: 'FF Shamel Sans', sans-serif; /* Applies RTL 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 */
}

/* keep cards equal height across breakpoints */
.news-item-card > a { display:flex; flex-direction:column; height:100%; text-decoration:none; }
.news-thumb { aspect-ratio: 16/9; overflow:hidden; background:#eee; }
.news-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.news-text { display:flex; flex-direction:column; }

/* 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 (RTL)
  -------------------------------------------------
*/

/* Container for the culture section */
.section-culture {
  font-family: 'FF Shamel Sans', sans-serif; /* Applies RTL 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 RTL */
.featured-card {
  position: absolute; /* Absolute positioning */
  bottom: 0; /* Aligned to the bottom */
  right: 0 !important; /* Aligned to the right for RTL */
  background-color: #f8f2ea; /* Light background color */
  padding: 1.5rem; /* Internal padding */
  border-right: 20px solid #c9111e; /* Red right border for RTL */
  border-left: none !important; /* Ensures no left border */
  /* Custom clip-path for a unique shape (top-right corner cut) for RTL */
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 0 24px);
  max-width: 420px; /* Maximum width */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* Subtle shadow */

  /* Micro‑interaction: animate transform and shadow on hover */
  transition: transform var(--ease-duration) ease, box-shadow var(--ease-duration) ease;
  will-change: transform, box-shadow;
}

/* Hover state for featured card: lifts slightly for tactile feedback */
.featured-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 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(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 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 (RTL)
  -------------------------------------------------
*/

/* Section for latest articles */
.section-latest {
  font-family: 'FF Shamel Sans', sans-serif; /* Applies RTL 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 RTL */
.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: 240px; /* Fixed width */
  height: 160px; /* 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/adjustments 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 RTL.
  ========================================================================================================
*/
.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 RTL base font */
  direction: rtl; /* Sets text direction to Right-to-Left */
}

/* 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 RTL (text-align) */
.footer-tagline {
  font-size: 0.9rem; /* Font size */
  color: #333; /* Dark text color */
  margin: 0; /* Removes default margin */
  text-align: right; /* Aligns text to the right for RTL */
  font-family: inherit; /* Inherits font from parent */
}
 
/* Heading style for footer sections, adjusted for RTL (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: right; /* Aligns text to the right for RTL */
  font-family: inherit; /* Inherits font from parent */
}

/* List styles for footer links, adjusted for RTL (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: right; /* Aligns text to the right for RTL */
}

/* 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: underline; /* Underline on hover */
}

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

/* 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 RTL (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: right; /* Aligns text to the right for RTL */
  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 */
  padding: 8px; /* Internal padding */
}

/* 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 (RTL)
  --------------------------------------------------------------------------------------------------------
  This section contains general utility classes and styles for the search functionality, adjusted for RTL.
  ========================================================================================================
*/

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

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

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

/* 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 {
  color: #555; /* Dark gray text color */
  font-size: 0.95rem; /* Font size */
  margin-bottom: 0; /* Removes default margin */
}

/* Text truncation for search item paragraphs */
.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 (RTL)
  --------------------------------------------------------------------------------------------------------
  This section defines styles for common section titles across the website, including hover effects and
  responsive sizing, with specific adjustments for RTL.
  ========================================================================================================
*/

/* 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 */
}
.section-title a {
  color: #d90429; /* Inherits color from parent */
  text-decoration: none; /* No underline */
}

/* Transforms the chevron right icon for RTL display */
.bi-chevron-right::before {
  content: "\f285"; /* Unicode for chevron right */
  transform: rotate(180deg) !important; /* Rotates the icon 180 degrees for RTL */
  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 RTL (right alignment) */
.section-title::after {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Absolute positioning */
  bottom: -5px; /* Positioned below the text */
  right: 0; /* Starts from the right for RTL */
  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: 80%; /* 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 */
}


/* ===== News-by-Category enhancements ===== */

/* Header */
.k24-cat__head{ margin-bottom:.75rem; text-align:center; }
.k24-cat__title{ font-weight:800; display:inline-flex; align-items:center; gap:.5rem; margin:0; }
.k24-cat__link{ color:inherit; text-decoration:none; }
.k24-cat__link:hover{ text-decoration:underline; }
.cat-icon{ width:24px; height:24px; object-fit:cover; border-radius:6px }

/* Main article card */
.k24-main{ margin-bottom:1rem; }
.k24-main__link{ display:block; text-decoration:none; color:inherit; }
.k24-main__media{
  position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.k24-main__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.k24-main__link:hover .k24-main__media img{ transform:scale(1.03); }

.k24-chip{
  display:inline-block; margin:.75rem 0 .25rem; padding:.2rem .6rem;
  font-size:.8rem; border-radius:999px; background:rgba(0,0,0,.06);
}
.k24-main__title{ margin:0; font-weight:700; line-height:1.25; }

/* Secondary list */
.k24-list{ list-style:none; padding:0; margin:0 0 .5rem 0; display:grid; gap:.5rem; }
.k24-item__link{ display:block; text-decoration:none; color:inherit; padding:.35rem .25rem; border-radius:.5rem; }
.k24-item__link:hover{ background:rgba(0,0,0,.035); }
.k24-item__cat{ display:block; font-size:.85rem; color:var(--bs-secondary-color,#6b7280); }
.k24-item__title{ display:block; font-weight:600; }

/* More link */
.k24-more{ display:inline-flex; align-items:center; gap:.35rem; color:#c9111e; font-weight:700; text-decoration:none; margin-top:.75rem; }
.k24-more:hover{ text-decoration:underline; }

/* Line clamp helpers */
.clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }


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

/* 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 RTL */
@media (min-width: 992px) {
  .section-title-sm {
    font-size: 1.3rem; /* Adjusted small size for larger desktops */
    margin-right: 2.5%; /* Right margin for RTL */
  }

  .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 RTL Adjustments)
  --------------------------------------------------------------------------------------------------------
  This section contains general responsive adjustments that apply across various components,
  specifically for RTL 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 */
  }
  .news-item-card {
    background-color: rgba(253, 247, 240, 0.7);
    border-radius: 16px;
    padding: .5rem;
    margin: 8px;
    width: 300px;
}
.nimg {
    border-radius: 12px;
    height: 380px;
    width: 100%;
    object-fit: cover;
}
  /* Adjusts urgent card overlay positioning for mobile devices (using logical properties for RTL). */
  .urgent-card-overlay {
    inset-inline: 0.75rem; /* Logical property for left/right */
    bottom: -1rem; /* Adjusted bottom position */
    padding: 0.75rem; /* Padding */
  }
  /* Adjusts urgent card styling for mobile devices. */
  .urgent-card {
    padding: 1rem; /* Padding */
    font-size: 0.9rem; /* Smaller font 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 {
    width: 16px; /* Smaller triangle */
    height: 16px; /* Smaller triangle */
  }
  /* Adjusts trending card styling on tablets. */
  .trending-card {
    padding: 1.5rem; /* Smaller padding */
    /* Adjusted clip-path for smaller size for RTL */
    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 */
    width:100%;
  }
  /* 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 RTL */
    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 RTL */
    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 RTL */
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 0 24px);
    border-right: 24px solid #c9111e; /* Right border */
    border-bottom: 24px solid #c9111e; /* Bottom border */
    border-left: none !important; /* No left 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: right; /* Aligns text to the right */
  }
  /* 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 RTL */
    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-right: 1rem !important; /* Right padding for RTL */
    text-align: right; /* Aligns text to the right for RTL */
  }
  /* Adjusts search button position for RTL. */
  .ser-btn {
    left: 0 !important; /* Aligns to the left for RTL */
  }
  /* 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: right; /* Aligns text to the right */
  }
  /* 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 RTL). */
  .urgent-card-overlay {
    right: 37px !important; /* Force right position */
    bottom: -1.5rem; /* Adjusted bottom position */
    inset-inline: 1rem; /* Logical property for left/right */
    max-width: 92%; /* Max width */
  }
  /* Adjusts urgent card styling for tablet devices. */
  .urgent-card {
    right: -34px; /* Adjusted right 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-right: 2.5%; /* Right 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: right; /* Aligns text to the right */
  }
  /* 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 */
  }
}

/*
  -------------------------------------------------
  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 RTL */
  }
  .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 RTL). */
  .urgent-card-overlay {
    right: 22px !important; /* Force right position */
    bottom: -2rem; /* Adjusted bottom position */
    inset-inline-end: 2.5rem; /* Logical property for right */
    max-width: 540px; /* Max width */
    padding: 1.5rem; /* Padding */
  }
  /* Adjusts urgent card styling for large desktop devices. */
  .urgent-card {
    right: 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-right: 2.5%; /* Right 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 {
    right: 28px !important; /* Force right position */
    bottom: -36px; /* Adjusted bottom position */
    max-width: 90%; /* Max width */
  }
  /* Adjusts urgent card styling for extra large desktop devices. */
  .urgent-card {
    right: -12px !important; /* Force right position */
    width: 480px; /* Fixed width */
    right: -12px; /* Adjusted right position */
    padding: 1.5rem; /* Padding */
    font-size: 1.4rem; /* Font size */
    border-right: 24px solid #c9111e !important;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0% 100%, 0 24px);
  }
  /* 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 {
    right: 30px; /* Adjusted right position */
    bottom: -36px; /* Adjusted bottom position */
    max-width: 90%; /* Max width */
  }
  /* Adjusts urgent card styling for very large desktop devices. */
  .urgent-card {
    right: -5px !important; /* Force right position */
    width: 480px; /* Fixed width */
    right: -12px; /* Adjusted right position */
    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 RTL */
.breadcrumb-item+.breadcrumb-item::before {
  float: right; /* Floats divider to the right */
  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(12px);
  -webkit-backdrop-filter: blur(12px);
  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 */
}