:root{
  --primary: #c0392b;
  --primary-dark: #922b21;
  --secondary: #1a2634;
  --accent: #f39c12;
  --bg: #f5f6f8;
  --text: #222831;
  --muted: #6c757d;
  --card-radius: 14px;
  --font-heading: 'Tajawal', sans-serif;
  --font-body: 'Cairo', sans-serif;
}

*{box-sizing:border-box}
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  margin:0;
  line-height:1.7;
}
h1,h2,h3,h4{font-family: var(--font-heading); font-weight:800; color: var(--secondary);}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}

/* ===== Top bar ===== */
.top-bar{background:var(--secondary); color:#dfe6e9; font-size:.85rem; padding:6px 0;}
.top-social a{color:#dfe6e9; margin-inline-start:12px; opacity:.85;font-size: 30px;}
.top-social a:hover{opacity:1; color:var(--accent);}
.top-date{font-size: 30px;}
/* ===== Header ===== */
.site-header{background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06); position:sticky; top:0; z-index:100;}
.site-logo-text{font-family:var(--font-heading); font-size:2rem; font-weight:900; color:var(--primary);}
.site-logo img{height:171px;width: 257;}
.text-center img{
  width: 570px;
  height: 100px;
}
.hero-main{
  height:400px;
}
.hero-slider{position:relative; overflow:hidden;}
.hero-slider .hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; z-index:1;
  transition:opacity .7s ease;
}
.hero-slider .hero-slide.active{opacity:1; visibility:visible; z-index:2;}
.hero-dots{position:absolute; bottom:16px; inset-inline-end:24px; display:flex; gap:8px; z-index:3;}
.hero-dot{width:9px; height:9px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:.25s;}
.hero-dot:hover{background:rgba(255,255,255,.8);}
.hero-dot.active{background:#fff; width:26px; border-radius:5px;}

.header-search{display:flex; border:2px solid var(--bg); border-radius:30px; overflow:hidden; background:var(--bg);}
.header-search input{border:none; background:transparent; padding:10px 18px; width:240px; font-family:var(--font-body);}
.header-search input:focus{outline:none;}
.header-search button{border:none; background:var(--primary); color:#fff; padding:0 18px; cursor:pointer;}

.main-nav{background:var(--secondary);}
.nav-list{list-style:none; display:flex; gap:4px; margin:0; padding:0; flex-wrap:wrap;}
.nav-list > li{position:relative;}
.nav-list > li > a{display:block; padding:14px 18px; color:#fff; font-weight:600; transition:.2s;}
.nav-list > li > a:hover{background:var(--primary);}
.nav-list .sub-menu{display:none; position:absolute; top:100%; right:0; background:#fff; min-width:200px; box-shadow:0 10px 30px rgba(0,0,0,.15); border-radius:0 0 10px 10px; z-index:50;}
.nav-list .has-sub:hover .sub-menu{display:block;}
.nav-list .sub-menu li a{color:var(--text); padding:10px 16px; display:block;}
.nav-list .sub-menu li a:hover{background:var(--bg); color:var(--primary);}
.nav-toggle{background:none; border:none; color:#fff; font-size:1.3rem; padding:12px;}

/* ===== Breaking news ticker ===== */
.breaking-news{background:none; color:#fff; padding:8px 0; overflow:hidden;}
.breaking-label{background:var(--secondary); padding:6px 16px; border-radius:6px; font-weight:800; white-space:nowrap; margin-inline-end:16px;}
.breaking-ticker{overflow:hidden; flex:1;}
.breaking-ticker ul{display:flex; gap:40px; list-style:none; margin:0; padding:0; animation:ticker 30s linear infinite; white-space:nowrap;}
.breaking-ticker a{color:black;}
@keyframes ticker{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

.ad-banner{margin-top:16px;}
.ad-banner img{border-radius:var(--card-radius); margin:0 auto;}

/* ===== Hero grid ===== */
.hero-grid{display:grid; grid-template-columns: 1.6fr 1fr; gap:16px;}
.hero-card{position:relative; border-radius:var(--card-radius); overflow:hidden; display:block; height:100%; min-height:340px;}
.hero-card img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .4s;}
.hero-card:hover img{transform:scale(1.06);}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85), transparent 60%); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; color:#fff;}
.hero-overlay h2{color:#fff; font-size:1.5rem; margin:8px 0;}
.badge-cat{background:var(--primary); padding:4px 12px; border-radius:6px; font-size:.75rem; align-self:flex-start; font-weight:700;}
.hero-overlay .meta{font-size:.8rem; opacity:.85;}

.hero-side{display:flex; flex-direction:column; gap:12px;height:400px;}
.hero-side-card{display:flex; gap:10px; background:#fff; border-radius:var(--card-radius); overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.05); flex:1;}
.hero-side-card img{width:110px; height:100%; object-fit:cover; flex-shrink:0;}
.hero-side-text{padding:0; display:flex; flex-direction:column; justify-content:center;}
.hero-side-text h3{font-size:.75rem; margin:0 0 6px;}
.hero-side-text .meta{color:var(--muted); font-size:.75rem;}

/* ===== Category section ===== */
.section-head{display:flex; justify-content:space-between; align-items:center; border-bottom:3px solid var(--primary); padding-bottom:10px; margin-bottom:16px;}
.section-head h2{margin:0; font-size:1.4rem;}
.section-head h2 a:hover{color:var(--primary);}
.see-more{color:var(--primary); font-weight:600; font-size:.9rem;}

.news-card{display:block; background:#fff; border-radius:var(--card-radius); overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.05); height:100%; transition:.25s;}
.news-card:hover{transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.1);}
.news-card-img{aspect-ratio:16/10; overflow:hidden;}
.news-card-img img{width:100%; height:100%; object-fit:cover;}
.news-card-body{padding:14px;}
.news-card-body h3{font-size:1rem; margin:0 0 8px; line-height:1.5;}
.news-card .meta{color:var(--muted); font-size:.8rem;}
.news-card-lg .news-card-img{aspect-ratio:21/9;}
.news-card-lg h3{font-size:1.25rem;}

/* ===== Widgets ===== */
.widget{background:#fff; border-radius:var(--card-radius); padding:18px; margin-bottom:20px; box-shadow:0 2px 10px rgba(0,0,0,.05);}
.widget-title{font-size:1.05rem; border-bottom:2px solid var(--bg); padding-bottom:10px; margin-bottom:14px; color:var(--primary);}
.widget-title i{margin-inline-end:6px;}

.hot-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.hot-list a{display:flex; align-items:center; gap:10px;}
.hot-list img{width:60px; height:60px; object-fit:cover; border-radius:10px; flex-shrink:0;}
.hot-list span{font-size:.9rem; font-weight:600;}

.gold-table{width:100%; border-collapse:collapse; font-size:.9rem;}
.gold-table th, .gold-table td{padding:8px; text-align:center; border-bottom:1px solid var(--bg);}
.gold-table th{background:var(--bg); font-weight:700;}

.most-viewed-list{padding-inline-start:20px; margin:0; display:flex; flex-direction:column; gap:10px;}
.most-viewed-list li{font-weight:600; font-size:.92rem;}
.most-viewed-list a:hover{color:var(--primary);}

.poll-option{display:block; margin-bottom:10px; cursor:pointer;}

.widget-weather-prayer .wp-row{display:grid; grid-template-columns:1fr 0fr; gap:16px;}
.widget-weather-prayer .widget-title{font-size:.92rem; padding-bottom:8px; margin-bottom:10px;}
.wp-loading, .wp-error{color:var(--muted); font-size:.85rem; text-align:center; padding:10px 0;}
.weather-now{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
.weather-now i{font-size:1.8rem; color:var(--primary);}
.weather-temp{font-size:1.4rem; font-weight:700; color:var(--secondary);}
.weather-city{font-size:.78rem; color:var(--muted);}
.prayer-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.prayer-list li{display:flex; justify-content:space-between; font-size:.82rem; padding:4px 8px; border-radius:6px;}
.prayer-list li.prayer-next{background:var(--bg); font-weight:700; color:var(--primary);}

@media (max-width: 575px){
  .widget-weather-prayer .wp-row{grid-template-columns:1fr;}
}
.btn-vote{background:var(--primary); color:#fff; border:none; padding:10px 24px; border-radius:8px; font-weight:700; cursor:pointer;}

.related-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.related-list a{display:flex; gap:10px; align-items:center;}
.related-list img{width:70px; height:70px; object-fit:cover; border-radius:10px; flex-shrink:0;}
.related-list span{font-size:.88rem; font-weight:600;}

/* ===== Article page ===== */
.breadcrumb-nav{color:var(--muted); font-size:.85rem; margin-bottom:14px;}
.breadcrumb-nav a:hover{color:var(--primary);}
.article-title{font-size:1.9rem; margin-bottom:10px;}
.article-meta{display:flex; gap:20px; color:var(--muted); font-size:.88rem; margin-bottom:16px; flex-wrap:wrap;}
.article-author{display:flex; align-items:center; gap:8px;}
.article-author a{display:flex; align-items:center; gap:8px; color:inherit;}
.article-author a:hover{color:var(--primary);}
.author-avatar{width:28px; height:28px; border-radius:50%; object-fit:cover;}
.article-featured-img img, .article-video{border-radius:var(--card-radius); margin-bottom:20px; overflow:hidden;}
.article-content{font-size:1.08rem; line-height:2; margin-bottom:24px;}
.article-content img{border-radius:10px; margin:14px 0;}
.article-gallery{margin-bottom:24px;}
.gallery-thumb{border-radius:10px; aspect-ratio:1/1; object-fit:cover; cursor:pointer; transition:.2s;}
.gallery-thumb:hover{opacity:.85;}
.article-tags{margin-bottom:20px;}
.tag{display:inline-block; background:var(--bg); padding:6px 14px; border-radius:20px; font-size:.82rem; margin:0 4px 8px 0;}
.tag:hover{background:var(--primary); color:#fff;}
.article-share{display:flex; align-items:center; gap:14px; padding:16px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; margin-bottom:24px;}
.article-share a{width:36px; height:36px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center;}
.article-share a:hover{background:var(--primary); color:#fff;}

.article-comments h3{margin-bottom:14px;}
.comment-form textarea{width:100%; border:1px solid #ddd; border-radius:10px; padding:12px; font-family:var(--font-body); margin-bottom:10px;}
.btn-comment{background:var(--secondary); color:#fff; border:none; padding:10px 22px; border-radius:8px; font-weight:700; cursor:pointer;}
.comment-list{list-style:none; margin:20px 0 0; padding:0;}
.comment-list li{background:#fff; border-radius:10px; padding:14px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,.04);}
.comment-date{color:var(--muted); font-size:.78rem;}

/* ===== Category / search / static pages ===== */
.category-header{padding:24px 0 10px;}
.category-header h1{font-size:1.6rem;}
.static-page{background:#fff; border-radius:var(--card-radius); padding:30px; margin:24px 0; box-shadow:0 2px 10px rgba(0,0,0,.05);}
.pagination-nav{margin:30px 0;}
.page-link{color:var(--primary);}
.page-item.active .page-link{background:var(--primary); border-color:var(--primary);}

/* ===== Footer ===== */
.site-footer{background:var(--secondary); color:#dfe6e9; padding:50px 0 0; margin-top:50px;}
.footer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; padding-bottom:30px;}
.footer-col h3, .footer-col h4{color:#fff;}
.footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.footer-col a:hover{color:var(--accent);}
.footer-social a{display:inline-flex; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); align-items:center; justify-content:center; margin-inline-end:8px;}
.footer-social a:hover{background:var(--primary);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding:16px 0; text-align:center; font-size:.85rem;}

.back-to-top{position:fixed; bottom:24px; left:24px; width:44px; height:44px; background:var(--primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.2); opacity:0; visibility:hidden; transition:.3s; z-index:200;}
.back-to-top.show{opacity:1; visibility:visible;}

@media (max-width: 992px){
  .hero-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .nav-list{display:none; flex-direction:column; background:var(--secondary); position:absolute; top:100%; right:0; left:0; padding:10px;}
  .nav-list.show{display:flex;}
  .nav-list .sub-menu{position:static; box-shadow:none; background:rgba(255,255,255,.05);}
}
.header-logo-ads{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* ===== تصميمات إضافية لأقسام الصفحة الرئيسية (تصميم أ + تصميم ب) ===== */
.mini-card{display:flex; gap:10px; background:#fff; border-radius:var(--card-radius); overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.05); transition:.25s;}
.mini-card:hover{transform:translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,.08);}
.mini-card img{width:90px; height:90px; object-fit:cover; flex-shrink:0;}
.mini-card-text{padding:8px 10px 8px 0; display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
.mini-card-text h4{font-size:.85rem; margin:0 0 4px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--secondary); font-weight:700;}
.mini-card-text .meta{color:var(--muted); font-size:.72rem;}

.section-head-mini{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--primary);}
.section-head-mini h3{margin:0; font-size:1.1rem;}
.section-head-mini h3 a:hover{color:var(--primary);}

.see-more-btn{display:flex; align-items:center; justify-content:center; gap:6px; margin:18px auto 0; padding:8px 26px; border:1px solid var(--primary); color:var(--primary); border-radius:30px; font-weight:600; font-size:.9rem; width:fit-content; background:#fff; transition:.2s;}
.see-more-btn:hover{background:var(--primary); color:#fff;}
  .editor-cheif-ceo{display:flex;flex-direction: column;}
.ceo{display: flex;}
.ceo p{font-size:20px;font-weight:700}
.editor-cheif{display: flex;}
.editor-cheif p{font-size:20px;font-weight:700}

@media (max-width: 767px){
  .mini-card img{width:70px; height:70px;}
  .header-logo-ads{flex-direction: column;}
  .top-date{display: none;}
  .top-bar{display:none;}
  .editor-cheif-ceo{display:flex;flex-direction: row; gap: 43px;}
  .ceo{flex-direction: column;}
    .editor-cheif{flex-direction: column;}

}
.col-md-6 a{
  height: auto;
}