html{scroll-behavior: smooth;}



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

body{font-family: 'segoe UI',sans-serif;
background: #eef3f9;
color: #222;}

header{position: sticky;
       top: 0;
        z-index: 1000;
        background: #c80000;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);}

        nav{display: flex;
            justify-content: space-between;
             align-items: center;
             padding: 15px 5%;}

    nav h1{color: white;
            font-size: 24px;}
    nav ul{display: flex;
           list-style: none;}
    nav ul li{margin-left: 20px}
    nav ul li a{ color:white;
                text-decoration:none;
                font-weight:bold;
                transition:o.3s;}
    nav ul li a:hover{color: #ffd700;}


    .breaking{background: black;
              color:white;
               padding: 8px;
               overflow: hidden;}


    .breaking span{color:red;
                    font-weight: bold;
                    margin-right: 10px;}

    .ticker{display: inline-block;
             white-space: nowrap;
             animation: scroll 12s linear infinite;}

    @keyframes scroll{0%{transform: translateX(100%);}
                      100%{transform: translateX(-100%);}}

    .hero{background:linear-gradient(to right,#1e3c72,#2a5298);
          color:white;
          padding:60px;
          text-align:center;
          animation:fadeIn 2s ease-in; }
    .hero{background: url(khale.jpg) center/cover;}
    .container:{width:90%;
                margin: 30px auto;}

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

    .news-card{background: white;
               border-radius: 12px;
                overflow: hidden;
               transition: transform 0.3s,box-shadow 0.3s;}

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


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

    .news-card-content{padding: 15px;}
    .news-card h3{margin-bottom: 10px;}

    .news-card a{color:#c80000;
                 font-weight: bold;
                text-decoration: none;}
    .news-card:hover{ transform:scale(1.05); }

    button{background: #c80000;
           color:white;
           padding: 10px;
          border: none;
          cursor: pointer;
          transition: 0.3s;}


button:hover{background: black;}


.video iframe{width: 100%;height: 400px;}

form input, form textarea{ padding:10px
                          margin: 10 px 0;
                          width:100%; }

footer{background:#111;
       color: white;
       text-align: center;
       padding: 20px;}

@keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}}

@media(max-width: 768px) { nav{ flex-direction:column; } }

.container h1 {
    margin-bottom: 10px;
}

.container h2 {
    margin-top: 20px;
    color: #c80000;
}

.container p {
    line-height: 1.6;
    margin: 10px 0;
}

.article-row {
    display: flex;
    gap: 20px;
    margin: 30px 0;
    align-items: center;
}

.article-row img {
    width: 45%;
    border-radius: 10px;
}

.article-text {
    width: 55%;
}

.article-text p {
    line-height: 1.7;
}

/* MOBILE RESPONSIVE */
@media(max-width: 768px){
    .article-row {
        flex-direction: column;
    }

    .article-row img,
    .article-text {
        width: 100%;
    }
}
/* IMAGE ROW */
.image-row {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

.image-row img {
    width: 50%;
    border-radius: 10px;
}

.back-btn{background: #c80000;
           color: white;
          border: none;
          padding: 8px 15px;
          cursor: pointer;
        border-radius: 5px;
        font-weight: bold;
        transition: 0.3s}

.back-btn:hover{background: black;}