/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}





































/* TOP INFO BAR */
.top-info-bar {
    width: 100%;
    background: #f1f1f1;
    padding: 6px 20px;
    font-size: 14px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    z-index: 99999;
}

.left-group {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.divider {
    opacity: 0.6;
}

#forexHolder {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* MOBILE */
@media (max-width: 768px){
    .top-info-bar {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    #forexHolder {
        justify-content: center;
        gap: 12px;
    }
}




































/* Ads Banner */
.ads-slot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

.ad-banner {
    width: 100%;
    max-width: 728px;
    height: auto;
    border-radius: 6px;
    object-fit: contain;
    display: block;
}

/* Mobile version */
@media (max-width: 768px) {
    .ad-banner {
        max-width: 320px;
    }
}










































/* Left side — Date + Weather */
.left-group {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* small vertical separator */
.divider {
    opacity: 0.5;
}

/* Right side — Forex */
#forexHolder {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
}

/* MOBILE MODE */
@media (max-width: 768px) {
    .top-info-bar {
        flex-direction: column;
        text-align: center;
        font-size: 14px;
        padding: 10px;
        gap: 8px;
    }
    #forexHolder {
        justify-content: center;
        text-align: center;
        gap: 12px;
    }
}

















































#weather {
  background: #f1f1f1;
  padding: 10px;
  border-radius: 8px;
  font-size: 16px;
  font-family: "Arial", sans-serif;
  width: fit-content;
}

#weather p {
  margin: 0;
}

.weather-hot { background: #ffb3b3; }   /* Hashyushye 🌞 */
.weather-cold { background: #b3d9ff; } /* Hakonje ❄️ */
.weather-normal { background: #d9ffd9; } /* Hasanzwe 🌤️ */

























#forexHolder {
    display: flex;
    gap: 25px;
    font-weight: 600;
    font-size: 14px;
    flex-wrap: wrap;
}

#forexHolder span {
    opacity: 0.6;
}




























body {
    background: #f4f4f4;
}

/* ========== TOP BAR ========== */
.top-bar {
    background: #ffffff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    margin-bottom: 30px;
    border-bottom: 2px solid #ff0000;
    background-attachment:fixed;
    display: fixed ;
}














.top-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 30px;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
}

.site-logo {
    height: 45px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
    cursor: pointer;
}


.live-buttons {
    display: flex;
    gap: 10px;
}

.live-buttons button {
    background: #c40000;
    border: none;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

.live-buttons button:hover {
    background: #a70000;
}

/* SOCIAL ICONS */
.top-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-social img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.top-social img:hover {
    opacity: 0.5;
}





































/* LIVE BUTTONS */
.live-buttons button {
    border: none;
    padding: 10px 12px;
    border-radius: 2px;
    margin-left: 6px;
    font-weight: bold;
    font-style:unset;
    cursor: pointer;
}

.live-buttons .radio {
    background: #f42400;
    color: white;
}

.live-buttons .tv {
    background: #f42400;
    color: white;
}














.top-extra {
    display: flex;
    gap: 15px;
    align-items: center;
}

.translator {
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 14px;
}

.forex-box {
    font-size: 14px;
    font-weight: bold;
    color: #ffeb3b;
}



/* ===== TOP BAR (LOGO + RADIO/TV) ===== */

.top-bar {
    width: 100%;
    display: flex;
    justify-content: space-between; /* Logo left – buttons right */
    align-items: center;
    padding: 15px 40px;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 999;
    margin-bottom: 20px;
    border-bottom: 5px solid #ff0000;

}


.site-logo {
    height: 55px;   /* Increased logo size */
    width:fit-content;
    object-fit: contain;
    display: block;

    
}


/* ===== LIVE BUTTONS ===== */
.live-buttons {
    display: flex;
    gap: 15px;
}

.live-buttons button {
    padding: 12px 5px;
    border: none;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    color: white;
    transition: 0.3s ease;
}

/* RADIO button */
.live-buttons .radio {
    background: #ff6a00ab;
}
.live-buttons .radio:hover {
    background: #ff0000;
}

/* TV button */
.live-buttons .tv {
    background: #ff6a00ab;
}
.live-buttons .tv:hover {
    background: #ff0000;
}

/* ===== RESPONSIVE MODE ===== */
@media (max-width: 768px) {
    .top-bar {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }

    .site-logo {
        height: 55px;
    }

    .live-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .live-buttons button {
        width: 100%;
        max-width: 250px;
    }
}











.nav-bar {
    background: #ffffff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    margin-bottom: 30px;
    border-bottom: 2px solid #ff0000;
    background-attachment:fixed;
    display: fixed ;
}





























/* styles.css - cleaned & fixed (modern RFI-ish) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

:root{
  --bg:#f6f6f7;
  --card:#ffffff;
  --text:#111;
  --muted:#6b7280;
  --red:#ff0000;
  --accent:#ff5b4d;
}

html.dark{
  --bg:#0b0d10;
  --card:#0f1113;
  --text:#e6e9ee;
  --muted:#9aa3b2;
}

*{box-sizing:border-box}
body{font-family:"Roboto", Arial, sans-serif;background:var(--bg);color:var(--text);margin:0;line-height:1.5}
.container{max-width:1180px;margin:0 auto;padding:0 18px}

/* TOP HEADER */
.top-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--card);box-shadow:0 6px 18px rgba(0,0,0,0.04);position:sticky;top:0;z-index:60}
.top-header.small{padding:8px 18px}
.top-left{display:flex;align-items:center;gap:12px}
.date-time{font-size:13px;color:var(--muted)}

/* TOP BAR: logo + live buttons */
.top-bar{display:flex;align-items:center;gap:20px}
.site-logo{height:64px;width:auto;object-fit:contain;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.live-buttons{display:flex;gap:10px;margin-left:auto}
.live-buttons button{background:linear-gradient(90deg,#ff6a00,#ff0000);border:none;color:white;padding:10px 14px;border-radius:8px;font-weight:700;cursor:pointer;transition:transform .12s}
.live-buttons button:hover{transform:translateY(-3px)}

/* social icons */
.top-social{display:flex;align-items:center;gap:10px;margin-left:18px}
.top-social img{width:22px;height:22px;object-fit:contain;transition:opacity .12s}
.top-social img:hover{opacity:.7}

/* search */
.search-wrap{display:flex;gap:8px;align-items:center}
.search-wrap input{padding:8px 10px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);min-width:180px}
.search-wrap button{padding:8px 10px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:var(--card);cursor:pointer}

/* nav */
.nav-menu{background:transparent;padding:12px 0;border-bottom:5px solid var(--red)}
.nav-menu ul{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;list-style:none;margin:0;padding:0}
.nav-menu li a{display:inline-block;padding:6px 8px;border-radius:6px;text-decoration:none;color:var(--red);font-weight:700;background:rgba(211,27,27,0.06);border:1px solid rgba(211,27,27,0.06)}
.nav-menu li a:hover{background:var(--red);color:#fff;transform:translateY(-2px)}


.nav-menu li a{
    display:inline-block;
    padding:10px 8px;
    border-radius:6px;
    text-decoration:none;
    color:#000; /* TEXT Y’UMUKARA */
    font-weight:700;
    background:#ffffff; /* background yera */
    border:1px solid #ddd; /* umurongo woroshye */
    transition:0.2s ease;
}

.nav-menu li a:hover{
    background:var(--red);
    color:#ffffff;
    transform:translateY(-2px);
}



/* breaking */
.breaking{display:flex;align-items:center;gap:12px;padding:10px 18px;background:var(--red);color:white}
.breaking .badge{background:#fff;color:var(--red);padding:4px 8px;border-radius:3px;font-weight:800}
.marquee{overflow:hidden;flex:1}
.marquee-inner{display:inline-block;white-space:nowrap;padding-left:12px;animation:scroll-left 18s linear infinite}
@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* HERO */
.hero{padding:28px 0;background-position:center;background-size:cover;background-repeat:no-repeat}
.hero-inner{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
.hero-main-card{display:block;height:420px;border-radius:10px;overflow:hidden;position:relative;background:#000}
.hero-main-card .hero-overlay{position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 60%)}
.hero-main-card .cat{background:rgba(0,0,0,0.5);padding:6px 10px;border-radius:4px;font-weight:700}
.hero-main-card h2{margin:10px 0 6px;font-size:28px}
.hero-main-card .lead{opacity:0.95;max-width:70%}

/* side cards */
.hero-side{display:grid;gap:12px}
.side-card{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:8px;padding:8px;text-decoration:none;color:inherit;box-shadow:0 6px 18px rgba(0,0,0,0.04)}
.side-card img{width:120px;height:80px;object-fit:cover;border-radius:6px}
.side-card h4{margin:0;font-size:14px}
.side-card .cat{display:inline-block;margin-bottom:6px;color:var(--red);font-weight:700}

/* latest grid */
.latest{padding:24px 0}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card, .news-card{background:var(--card);border-radius:8px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,0.04);transition:transform .18s ease,box-shadow .18s}
.card:hover, .news-card:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(0,0,0,0.08)}
.card img, .news-card img{width:100%;height:160px;object-fit:cover;display:block}
.card .cat, .news-card .cat{display:inline-block;padding:6px 10px;border-radius:6px;margin:10px}
.card h4, .news-card h4{margin:6px 12px;font-size:16px}
.card p, .news-card p{margin:0 12px 12px;color:var(--muted)}

/* article */
.article-page{display:grid;grid-template-columns:2fr 360px;gap:22px;padding:28px 0}
.article-box{background:var(--card);padding:22px;border-radius:8px}
.single-cat{display:inline-block;background:var(--red);color:#fff;padding:6px 10px;border-radius:6px;font-weight:700}
.single-title{font-size:28px;margin:14px 0}
.single-date{color:var(--muted);font-size:13px;margin-bottom:14px}
.single-img{width:100%;height:420px;object-fit:cover;border-radius:8px;margin-bottom:18px}
.single-body{font-size:18px;color:var(--text);line-height:1.7}

/* footer */
.site-footer{background:#7270708f;padding:24px 0;margin-top:28px;border-top:7px solid var(--red);color:#222}
.footer-grid{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.footer-logo{width:45px;height:auto;object-fit:contain;border-radius:6px}
.footer-copy h3{margin:0 0 6px}
.footer-copy p{margin:4px 0;color:var(--muted)}
.footer-right{display:flex;flex-direction:column;align-items:self-end}
.footer-right .contact p{margin:2px 0}
.footer-social img{width:23px;height:23px;object-fit:contain;margin-left:4px}

/* mono-white icons (add class .mono-icons on footer to invert) */
.site-footer.mono-icons .footer-social img{filter:brightness(0) invert(1) saturate(0);}

/* responsive */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-main-card{height:320px}
  .article-page{grid-template-columns:1fr}
  .nav-menu ul{overflow:auto;padding:10px;gap:10px}
}

/* small utility */
.btn{background:var(--card);border:1px solid rgba(0,0,0,0.06);padding:8px 10px;border-radius:6px;cursor:pointer}
.btn.small{padding:6px 8px;font-size:13px}