/*
Theme Name: X Media News
Description: Professional news website converted from PHP to WordPress
Version: 1.0
Text Domain: xmn
*/

/* ===== Global Styles ===== */
:root {
  --primary-color: #1f76bb;
  --secondary-color: #6c757d;
  --dark-color: #343a40;
  --light-color: #f8f9fa;
  --white: #ffffff;
  --black: #000000;
  --font-family: "Tajawal", sans-serif;

  /* Colors */
  --color-navy: #1e3a5f;
  --color-teal: #2a9d8f;
  --color-orange: #ff8c1a;
  --color-gold: #f4a261;
  --color-amber: #e9c46a;
  --color-white: #ffffff;
  --color-light-bg: #f8f9fa;
  --color-red: #ef4444;
  --color-green: #22c55e;

  /* Gradients */
  --gradient-sunrise: linear-gradient(
    135deg,
    var(--color-gold),
    var(--color-orange)
  );
  --gradient-hero: linear-gradient(
    135deg,
    var(--color-teal) 0%,
    var(--color-orange) 100%
  );
  --gradient-team: linear-gradient(
    135deg,
    var(--color-navy),
    var(--color-teal)
  );

  /* Shadows */
  --shadow-soft: 0 4px 20px -2px rgba(30, 58, 95, 0.08);
  --shadow-warm: 0 8px 30px -4px rgba(231, 111, 81, 0.15);
  --shadow-deep: 0 20px 40px -8px rgba(30, 58, 95, 0.25);
  --shadow-text: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

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

a:hover {
  text-decoration: none;
}

.img-fluid {
  object-fit: cover;
}

#bodytxt_1 {
font-size: 1.2rem;
  color: #31404b;
  font-weight: 500;
}

body {
  font-family: var(--font-family);
  line-height: 1.6;
  background-color: var(--light-color);
  direction: rtl;
  text-align: right;
}

/* ===== Header Styles ===== */

.navbar-dark .navbar-nav .nav-link {
  color: var(--white);
  font-weight: 500;
  padding: 0.5rem 1rem;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
color: #fff;
  opacity: 1;
}

/* ===== Slider & Carousel Styles ===== */
.main-carousel,
.news-carousel,
.tranding-carousel {
  position: relative;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: var(--white);
  padding: 2rem;
}

.carousel-item-2 .position-relative {
  margin: 0 0.5rem;
}

/* ===== Section Titles ===== */
.section-title {
  position: relative;
}

.section-title h4 {
  font-weight: 800;
  color: var(--dark-color);
}

.section-title.bg-primary h4 {
  color: var(--white);
}

/* ===== News Cards ===== */
.position-relative.mb-3 {
  transition: transform 0.3s ease;
}

.position-relative.mb-3:hover {
  transform: translateY(-5px);
}

.bg-white.border {
  border-color: #dee2e6 !important;
}

/* ===== Badge Styles ===== */
.badge-primary {
  background-color: var(--primary-color);
  color: var(--white);
}

.badge-primary:hover {
  background-color: #0056b3;
  text-decoration: none;
}

/* ===== Advertisement Styles ===== */
.ad-container {
  display: inline-block;
  margin: 0 auto;
  background: #cfcfcf;
  text-align: center;
}

.ad-300x250 {
  width: 300px;
  height: 250px;
  min-height: 250px;
}

.ad-728x90 {
  width: 728px;
  height: 90px;
}

.ad-970x250 {
  width: 970px;
  height: 250px;
}

.ad-mobile-300x100 {
  width: 300px;
  height: 100px;
}

.ad-mobile-300x250 {
  width: 300px;
  height: 250px;
}

/* ===== Social Media Styles ===== */
.social-facebook {
  background: #39569e; /* Facebook Blue */
}

.social-twitter {
  background: #000000; /* X (Twitter) Black */
}

.social-youtube {
  background: #ff0000; /* YouTube Red */
}

.social-instagram {
  background: radial-gradient(circle at 30% 107%, 
    #fdf497 0%, 
    #fdf497 5%, 
    #fd5949 45%, 
    #d6249f 60%, 
    #285AEB 90%);
  color: #fff;
}

.social-tiktok {
  background: #010101; /* TikTok Black */
}

.social-telegram {
  background: #0088cc; /* Telegram Blue */
}

.social-whatsapp {
  background: #25d366; /* WhatsApp Green */
}

.social-link {
  display: flex;
  width: 100%;
  color: var(--white);
  text-decoration: none;
  margin-bottom: 1rem;
  align-content: center;
  align-items: center;
  border-radius: 5px;
  overflow: hidden;
}

.social-link:hover {
  color: var(--white);
  text-decoration: none;
  opacity: 0.9;
}

.social-icon {
  width: 65px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Utility Classes ===== */
.lign-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.no-auto-ads {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sizecolor {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  background: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  border-radius: 0.25rem;
}

.sizecolor:hover {
  background: #0056b3;
}

/* ===== Footer Styles ===== */
.bg-dark .text-white {
  color: var(--white) !important;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  display: none;
}

/* ===== Responsive Styles ===== */
@media (max-width: 768px) {
  .overlay {
    padding: 1rem;
  }

  .section-title h4 {
    font-size: 1.25rem;
  }

  .ad-container {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .navbar-brand img {
    max-width: 150px;
  }

  .social-link {
    font-size: 0.9rem;
  }
}

/* ===== Embed Container for YouTube ===== */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ===== Pagination Styles ===== */
.pagination .page-link {
  color: var(--primary-color);
  border-color: #dee2e6;
}

.pagination .page-item.active .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.pagination .page-link:hover {
  color: #0056b3;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

/* RTL Support */
.owl-carousel {
  direction: ltr;
}

.owl-carousel * {
  direction: rtl;
}

.text-left {
  text-align: right !important;
}

.text-right {
  text-align: left !important;
}

.mr-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

.ml-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

.mr-3 {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

.ml-3 {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

.border-left-0 {
  border-left: 1px solid #dee2e6 !important;
  border-right: 0 !important;
}

.border-right-0 {
  border-right: 1px solid #dee2e6 !important;
  border-left: 0 !important;
}

/* ===== Featured News Styles ===== */
.featured-news-card {
  background: var(--white);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  height: 100%;
}

.featured-news-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary-color);
}

.featured-image-container {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.featured-news-image {
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.featured-news-card:hover .featured-news-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

.featured-content {
  background: var(--white);
  position: relative;
  z-index: 2;
}

.featured-news-title {
  line-height: 1.4;
  transition: color 0.3s ease;
}

.featured-news-card:hover .featured-news-title {
  color: var(--primary-color) !important;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Owl Carousel adjustments for featured news */
.carousel-item-3 .owl-stage {
  padding: 10px 0;
}

.carousel-item-3 .owl-item {
  padding: 0 8px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .featured-image-container {
    height: 160px;
  }

  .featured-content {
    padding: 15px !important;
  }
}

@media (max-width: 576px) {
  .featured-news-card {
    margin-bottom: 20px;
  }
}

/* Most Read Section Styles */
.most-read-item {
  transition: all 0.3s ease;
}

.most-read-item:hover {
  transform: translateX(-5px);
}

.most-read-number {
  font-size: 12px;
  min-width: 30px;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Currently Reading Styles */
.reading-indicator {
  position: relative;
  width: 20px;
  height: 20px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #28a745;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}

.currently-reading-item {
  transition: all 0.3s ease;
}

.currently-reading-item:hover {
  background: #f8f9fa;
  border-radius: 5px;
  padding: 5px;
}

.post-meta-small {
  font-size: 12px;
}

.reading-time {
  font-size: 11px;
}

/* Social Share Buttons */
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.share-btn i {
  font-size: 1rem;
}

/* Facebook */
.share-btn.facebook {
  background: #1877f2;
  color: white;
}

.share-btn.facebook:hover {
  background: #166fe5;
  transform: translateY(-2px);
}

/* WhatsApp */
.share-btn.whatsapp {
  background: #25d366;
  color: white;
}

.share-btn.whatsapp:hover {
  background: #22c55e;
  transform: translateY(-2px);
}

/* Twitter (X) */
.share-btn.twitter {
  background: #000000;
  color: white;
}

.share-btn.twitter:hover {
  background: #1a1a1a;
  transform: translateY(-2px);
}

/* Email */
.share-btn.email {
  background: #ea4335;
  color: white;
}

.share-btn.email:hover {
  background: #d33426;
  transform: translateY(-2px);
}

/* LinkedIn */
.share-btn.linkedin {
  background: #0a66c2;
  color: white;
}

.share-btn.linkedin:hover {
  background: #0959aa;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .share-buttons {
    flex-direction: column;
  }

  .share-btn {
    justify-content: center;
  }
}


/* Pagination Styling */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.pagination a,
.pagination span {
    display: inline-block;
    margin: 3px;
    padding: 8px 14px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    background-color: #fff;
}

.pagination a:hover {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.pagination .current {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    font-weight: bold;
    cursor: default;
}

.pagination .dots {
    border: none;
    background: transparent;
    color: #888;
    cursor: default;
}

.pagination a.prev,
.pagination a.next {
    font-weight: bold;
}

/* Optional: Smaller screens adjustments */
@media (max-width: 576px) {
    .pagination a,
    .pagination span {
        padding: 6px 10px;
        font-size: 13px;
    }
}

 .bg-dark-bg-them{

  background: #6d6c6e;
}

.tranding-carousel .owl-nav {
    direction: ltr;
  background: #6d6c6e;
}

.news-carousel .owl-nav{
  top: -70px;
  direction: ltr;
}

.navbar-nav .current-menu-item > .nav-link,
.navbar-nav .current-menu-parent > .nav-link,
.navbar-nav .current-menu-ancestor > .nav-link {
    background-color: #1f76bb !important;
}

/* For dropdown active states */
.navbar-nav .dropdown.active > .nav-link {
    background-color: #1f76bb !important;
}

.sizecolor {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    user-select: none;
    color: #000;
}

.sizecolor:hover {
    color: #007bff;
    background: #e9ecef;
    border-color: #007bff;
}

.sizecolor.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

#bodytxt_1 {
    transition: font-size 0.3s ease;
    line-height: 1.6;
    text-align:right;
}


/* Make parent row flex */
.equal-height-row {
    display: flex;
    flex-wrap: wrap;
}

/* Ensure both columns stretch equally */
.equal-height-row > [class*='col-lg'] {
    display: flex;
    flex-direction: column;
}

/* Ensure carousel and side containers fill height */
.main-carousel,
.side-thumbnails {
    height: 100%;
}

/* Make side thumbnails fill the height evenly */
.side-thumbnails .col-md-6 {
    flex: 1 0 50%; /* Two per column → 50% height each */
    display: flex;
}

.side-thumbnail {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Make images cover full area without distortion */
.side-image,
.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optional overlay styling */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 15px;
}

/* Make each carousel item stretch fully */
.owl-carousel .owl-stage {
    display: flex;
}
.owl-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
    align-items: stretch;
}

/* Each card fills equal height */
.featured-news-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    background: #fff;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
}

/* Image section fixed height */
.featured-image-container {
    width: 100%;
    height: 220px; /* adjust if needed */
    overflow: hidden;
    flex-shrink: 0;
}

.featured-news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content fills remaining space below image */
.featured-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 1 auto; /* allow to grow/shrink */
    padding: 1rem;
}

/* Push read-more button to bottom */
.featured-content .read-more {
    margin-top: auto !important; /* THIS is key */
}

/* Keep text tidy */
.featured-news-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-news-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Optional responsive adjustment */
@media (max-width: 768px) {
    .featured-image-container {
        height: 160px;
    }
}

.position-relative.mb-3 {
  width: 100%;
}

.btn-lg-square {
  width: 42px;
  height: 42px;
}

.btn-lg-square svg{
  margin-top: -4px;
}

.flex-column img{
    height:220px;
}
@media (max-width: 768px) {
   .flex-column img{
    height:160px;
} 
}