/* hero */

.hero{
position:relative;
height:70vh;
overflow:hidden;
}

.hero-slider{
position:absolute;
width:100%;
height:100%;
}

.slide{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:1s;
}

.slide.active{
opacity:1;
}

/* news bar */

.news-bar{
position:absolute;
bottom:0;
background:red;
width:100%;
overflow:hidden;
}

.news-track{
white-space:nowrap;
animation:scroll 18s linear infinite;
}

.news-track span{
margin-right:100px;
}

/* video news */

.video-news{
padding:60px 0;
}

.video-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:20px;
}

.video-grid video{
width:100%;
object-fit:cover;
pointer-events:none;
}

/* news grid */

.news-section{
padding:60px 0;
}

.news-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:20px;
}

.news-card img{
width:100%;
height:200px;
object-fit:cover;
}

.news-card h3{
margin-top:10px;
}

/* footer */

footer{
background:black;
padding:20px;
text-align:center;
margin-top:40px;
}




/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#0a0a0a;
color:white;
line-height:1.6;
}

/* CONTAINER */

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* HEADER */

header{
background:#000;
border-bottom:2px solid #c40000;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}

.logo{
color:#ff2a2a;
font-size:26px;
font-weight:bold;
letter-spacing:1px;
}

/* NAV */

nav ul{
display:flex;
list-style:none;
}

nav ul li{
margin-left:25px;
}

nav ul li a{
color:white;
text-decoration:none;
font-size:15px;
font-weight:500;
transition:0.3s;
}

nav ul li a:hover{
color:#ff2a2a;
}

/* HERO VIDEO */

.hero-video{
position:relative;
height:70vh;
overflow:hidden;
}

.hero-video video{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(0.6);
}

/* HERO TEXT */

.hero-overlay{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
}

.hero-overlay h1{
font-size:55px;
margin-bottom:10px;
}

.hero-overlay p{
font-size:18px;
opacity:0.9;
}

/* NEWS SECTION */

.news{
padding:60px 0;
}

.news h2{
font-size:30px;
margin-bottom:30px;
border-left:4px solid #ff2a2a;
padding-left:15px;
}

/* NEWS GRID */

.news-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:25px;
}

/* CARD */

.news-card{
background:#111;
border-radius:8px;
overflow:hidden;
transition:0.3s;
cursor:pointer;
}

.news-card:hover{
transform:translateY(-8px);
box-shadow:0 10px 25px rgba(0,0,0,0.6);
}

/* IMAGE */

.news-card img{
width:100%;
height:220px;
object-fit:cover;
}

/* TEXT */

.news-card h3{
font-size:18px;
padding:15px;
}

.news-card p{
font-size:14px;
padding:0 15px 20px 15px;
opacity:0.8;
}

/* FOOTER */

footer{
background:#000;
padding:25px;
text-align:center;
margin-top:50px;
border-top:1px solid #333;
}

footer p{
opacity:0.7;
}




/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

body {
  background: #0a0a0a;
  color: white;
  line-height: 1.6;
}

/* CONTAINER */
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
header {
  background: #000;
  border-bottom: 3px solid #c40000;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.logo {
  color: #ff2a2a;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* NAVIGATION */
nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-left: 25px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: 0.3s;
}

nav ul li a:hover {
  color: #ff2a2a;
}

/* HERO */
.page-hero {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  margin-bottom: 30px;
  border-left: 5px solid #ff2a2a;
}

.page-hero h1 {
  font-size: 40px;
  letter-spacing: 1px;
}

/* HERO VIDEO */
.hero-video {
  position: relative;
  height: 70vh;
  overflow: hidden;
  margin-bottom: 30px;
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hero-overlay h1 {
  font-size: 50px;
  margin-bottom: 10px;
}

.hero-overlay p {
  font-size: 18px;
  opacity: 0.9;
}



/* NEWS GRID */
.news {
  padding: 60px 0;
}

.news h2 {
  font-size: 30px;
  margin-bottom: 30px;
  border-left: 4px solid #ff2a2a;
  padding-left: 15px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.news-card {
  background: #111;
  border-radius: 8px;
  overflow: hidden;
  transition: 0.3s;
  cursor: pointer;
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

.news-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.news-card h3 {
  font-size: 18px;
  padding: 15px;
}

.news-card p {
  font-size: 14px;
  padding: 0 15px 20px 15px;
  opacity: 0.8;
}

/* VIDEO NEWS */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 40px 0;
}

.video-grid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FOOTER */
footer {
  background: #000;
  padding: 25px;
  text-align: center;
  margin-top: 50px;
  border-top: 1px solid #333;
}

footer p {
  opacity: 0.7;
}





.breaking-news {
  display: flex;
  align-items: center;  /* يبقى كلشي بمحاذاة الوسط عموديًا */
  background: #c40000;
  height: 50px;
  overflow: hidden;
  padding: 0;
}

.breaking-title {
  background: black;
  color: white;
  padding: 0 20px;
  font-weight: bold;
  height: 100%;
  display: flex;
  align-items: center; /* يثبت النص في منتصف الصندوق عموديًا */
  flex-shrink: 0;
}

.breaking-track {
  display: flex;
  white-space: nowrap;
  animation: scroll 15s linear infinite;
  align-items: center; /* يبقى النص في نفس مستوى BREAKING */
  margin-left: 10px;
}

.breaking-track span {
  display: inline-block;
  margin-right: 100px;
}

/* تحريك النص من اليمين لليسار */
@keyframes scroll {
  100% { transform: translateX(100%); }
  0% { transform: translateX(-100%); }
}




.breaking-news {
  display: flex;
  align-items: center;
  background: #c40000;
  height: 50px;
  overflow: hidden;
  padding: 0;
  justify-content: space-between; /* يعطي المسافة بين TRACK و BREAKING */
}

.breaking-title {
  background: black;
  color: white;
  padding: 0 20px;
  font-weight: bold;
  height: 100%;
  display: flex;
  align-items: center; /* تبقى وسط الخانة عمودياً */
  flex-shrink: 0;
  order: 2; /* باش تكون على اليمين */
}

.breaking-track {
  display: flex;
  white-space: nowrap;
  animation: scroll 15s linear infinite;
  align-items: center;
  margin-left: 10px;
  order: 1; /* باش تكون على الشمال */
}

.breaking-track span {
  display: inline-block;
  margin-right: 100px;
}
























































































































































































































































































/* VIDEO NEWS */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:40px 0;}
.video-grid video{width:100%;}

/* WORLD HERO VIDEO */
.hero-video{position:relative;height:70vh;overflow:hidden;margin-bottom:20px;}
.hero-video video{width:100%;height:100%;object-fit:cover;}
.hero-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}

/* NEWS GRID */
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:50px;}
.news-card img{width:100%;height:200px;object-fit:cover;}

/* NEWS LAYOUT */
.news-layout{display:grid;grid-template-columns:3fr 1fr;gap:30px;padding:40px 0;}
.sidebar{background:#1a1a1a;padding:20px;}
.sidebar li{margin-bottom:10px;border-bottom:1px solid #333;padding-bottom:10px;}

/* TOP STORIES */
.slider{position:relative;height:400px;overflow:hidden;}
.news-slide{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;transition:1s;}
.news-slide.active{opacity:1;}
footer{background:black;padding:20px;text-align:center;}