/*
Theme Name: Muslims Guardian Premium
Version: 20.0 (rebuilt to match live theme markup exactly)
Author: Mamun

This version was written by reading the actual page source of
muslimsguardian.net, not guessed markup. Every selector below
corresponds to a real class in your theme's homepage output:

.hero > .container > .hero-grid > article.hero-main + div.side-news
   .side-news > article.side-card > a > img + div.side-card-content > h3

section.latest-news-section (NO .container wrapper - has its own width)
   > .section-header + div.latest-news-grid > article.news-card
     a.news-image > img
     div.news-content > span.news-category, h3 > a, p, div.news-meta

section.most-read-section > .container
   > .section-header + div.most-read-grid > article.news-card
     a > img + div.news-content > h3   (simpler variant, no meta/category)

section.news-section > .container
   > .section-header + div.news-grid > article.card
     a > img + div.card-content > span.category, h3, p

section.video-section > .container
   > .section-header + div.video-grid > article.video-card
     a > img + div.video-content > h3
*/

/* ==================================
RESET
================================== */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Hind Siliguri','SolaimanLipi',sans-serif;
font-size:17px;
line-height:1.8;
background:#f4f7fb;
color:#1f2937;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}

img{
display:block;
max-width:100%;
height:auto;
}

a{
text-decoration:none;
color:inherit;
transition:.25s;
}

ul,ol{
list-style:none;
}

button,input,textarea,select{
font:inherit;
}

/* ==================================
ROOT
================================== */

:root{
--primary:#d40000;
--primary-dark:#a80000;
--green:#0f8a2a;
--dark:#041b34;
--topbar-dark:#0a0a0a;
--muted:#6b7280;
--border:#e5e7eb;
--shadow:0 5px 20px rgba(0,0,0,.06);
--shadow-lg:0 15px 40px rgba(0,0,0,.12);
}

/* ==================================
LAYOUT
================================== */

.container{
width:100%;
max-width:1500px;
margin:0 auto;
padding-left:20px;
padding-right:20px;
}

.homepage{
width:100%;
}

/* ==================================
TYPOGRAPHY
================================== */

h1,h2,h3,h4,h5,h6{
font-weight:800;
line-height:1.3;
color:var(--dark);
}

.section-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:25px;
}

.section-header h2{
font-size:28px;
font-weight:900;
}

.section-header a{
color:var(--green);
font-weight:700;
font-size:14px;
}

/* ==================================
TOPBAR
================================== */

.topbar{
background:var(--topbar-dark);
color:#fff;
padding:9px 0;
font-size:13px;
}

.topbar-flex{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.top-left{
display:flex;
align-items:center;
gap:8px;
}

.live-dot{
width:9px;
height:9px;
background:red;
border-radius:50%;
animation:pulse 1.5s infinite;
flex-shrink:0;
}

@keyframes pulse{
0%{opacity:1;}
50%{opacity:.4;}
100%{opacity:1;}
}

.top-right{
display:flex;
align-items:center;
gap:16px;
}

.top-right a{
color:#d1d5db;
font-size:15px;
}

.top-right a:hover{
color:#fff;
}

/* ==================================
HEADER
================================== */

.main-header{
position:sticky;
top:0;
z-index:9999;
background:rgba(15,138,42,.97);
backdrop-filter:blur(12px);
box-shadow:0 4px 20px rgba(0,0,0,.08);
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:25px;
padding:10px 0;
}

.logo-wrap{
flex-shrink:0;
}

.custom-logo{
max-height:64px;
width:auto;
}

/* ==================================
NAVIGATION
================================== */

.main-nav{
flex:1;
min-width:0;
}

.nav-menu{
display:flex;
justify-content:center;
align-items:center;
gap:24px;
flex-wrap:wrap;
}

.nav-menu a{
color:#fff;
font-weight:700;
font-size:15px;
white-space:nowrap;
}

.nav-menu a:hover{
color:#ffe082;
}

/* ==================================
HEADER ACTIONS
================================== */

.header-actions{
display:flex;
align-items:center;
gap:14px;
flex-shrink:0;
}

.search-btn,
.mobile-toggle{
background:none;
border:none;
color:#fff;
font-size:18px;
cursor:pointer;
}

.live-btn{
padding:9px 18px;
background:var(--primary);
color:#fff;
border-radius:50px;
font-size:13px;
font-weight:700;
white-space:nowrap;
}

.mobile-toggle{
display:none;
}

/* ==================================
SEARCH OVERLAY
================================== */

.search-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:none;
z-index:99999;
}

.search-overlay.active{
display:flex;
align-items:center;
justify-content:center;
}

.search-box{
background:#fff;
width:90%;
max-width:700px;
padding:30px;
border-radius:20px;
position:relative;
}

.close-search{
position:absolute;
top:10px;
right:15px;
font-size:30px;
border:none;
background:none;
cursor:pointer;
}

.search-form{
display:flex;
gap:10px;
}

.search-field{
flex:1;
height:50px;
padding:0 15px;
border:1px solid var(--border);
border-radius:10px;
outline:none;
}

.search-submit{
height:50px;
padding:0 20px;
border:none;
background:var(--primary);
color:#fff;
border-radius:10px;
cursor:pointer;
font-weight:700;
}

/* ==================================
BREAKING NEWS
================================== */

.breaking-news{
background:var(--primary);
overflow:hidden;
border-bottom:3px solid #920000;
}

.breaking-flex{
display:flex;
align-items:center;
height:48px;
overflow:hidden;
}

.breaking-label{
background:#920000;
color:#fff;
font-weight:900;
font-size:13px;
padding:0 18px;
height:48px;
display:flex;
align-items:center;
flex-shrink:0;
white-space:nowrap;
}

.breaking-ticker{
flex:1;
overflow:hidden;
}

.ticker-track{
display:flex;
align-items:center;
gap:70px;
white-space:nowrap;
width:max-content;
padding-left:100%;
animation:tickerMove 150s linear infinite;
}

.ticker-track a{
color:#fff;
font-weight:700;
font-size:14px;
}

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

/* ==================================
CATEGORY BADGE (used in hero overlay + news-section cards)
================================== */

.category{
display:inline-block;
background:var(--primary);
color:#fff;
padding:6px 14px;
border-radius:50px;
font-size:12px;
font-weight:800;
margin-bottom:12px;
}

/* ==================================
HERO SECTION
.hero > .container > .hero-grid > .hero-main + .side-news
================================== */

.hero{
margin:24px 0;
}

.hero-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:22px;
align-items:stretch;
}

.hero-main{
position:relative;
display:block;
overflow:hidden;
border-radius:18px;
background:#041b34;
box-shadow:var(--shadow-lg);
}

.hero-main .hero-image{
width:100%;
height:520px;
object-fit:cover;
}

.overlay{
position:absolute;
left:0;
right:0;
bottom:0;
padding:34px;
background:linear-gradient(to top,rgba(0,0,0,.94),rgba(0,0,0,.5) 55%,transparent);
color:#fff;
}

.overlay .category{
background:var(--primary);
}

.overlay h1{
font-size:30px;
color:#fff;
margin:12px 0;
line-height:1.4;
}

.overlay p{
font-size:15px;
color:#e5e7eb;
max-width:720px;
}

.hero-btn{
display:inline-block;
margin-top:16px;
background:var(--primary);
color:#fff;
padding:10px 20px;
border-radius:8px;
font-weight:700;
font-size:14px;
}

/* ==================================
SIDE NEWS (hero sidebar list)
================================== */

.side-news{
display:flex;
flex-direction:column;
gap:14px;
height:100%;
}

.side-card{
display:block;
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:var(--shadow);
flex:1;
transition:.3s;
}

.side-card:hover{
box-shadow:var(--shadow-lg);
transform:translateY(-3px);
}

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

.side-card-content{
padding:10px 14px;
}

.side-card-content h3{
font-size:13.5px;
line-height:1.5;
font-weight:700;
color:var(--dark);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

/* ==================================
LATEST NEWS SECTION
(no .container wrapper in the markup - needs its own width)
================================== */

.latest-news-section{
max-width:1500px;
margin:60px auto;
padding:0 20px;
}

.latest-news-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.news-card{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:.35s;
display:flex;
flex-direction:column;
}

.news-card:hover{
transform:translateY(-6px);
}

.news-image{
display:block;
overflow:hidden;
}

.news-image img{
width:100%;
height:170px;
object-fit:cover;
transition:.5s;
}

.news-card:hover .news-image img{
transform:scale(1.08);
}

.news-content{
padding:16px;
display:flex;
flex-direction:column;
flex:1;
}

.news-category{
display:inline-block;
background:var(--primary);
color:#fff;
padding:5px 12px;
border-radius:20px;
font-size:11px;
font-weight:600;
margin-bottom:10px;
width:fit-content;
}

.news-content h3{
font-size:17px;
line-height:1.45;
margin-bottom:12px;
}

.news-content h3 a{
color:#111;
}

.news-content h3 a:hover{
color:var(--primary);
}

.news-content p{
color:#666;
line-height:1.7;
margin-bottom:14px;
font-size:14px;
}

.news-meta{
display:flex;
justify-content:space-between;
align-items:center;
font-size:13px;
margin-top:auto;
color:var(--muted);
}

.news-meta a{
color:#15803d;
font-weight:600;
}
<div class="container">
  <p style="text-align:center; font-size:12px; color:#888; margin-bottom:4px;">বিজ্ঞাপন</p>
  <div class="ad-slot" style="margin:0 auto 20px; text-align:center;">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4081431578105961"
       crossorigin="anonymous"></script>
    <!-- Homepage Banner -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-4081431578105961"
         data-ad-slot="6302097738"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
</div>

/* ==================================
MOST READ SECTION
(simple .news-card variant: just image + title, no meta/category/p)
================================== */

.most-read-section{
padding:20px 0 60px;
}

.most-read-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;
}

.most-read-grid .news-card img{
width:100%;
height:150px;
object-fit:cover;
}

.most-read-grid .news-content{
padding:14px;
}

.most-read-grid .news-content h3{
font-size:15px;
line-height:1.5;
margin-bottom:0;
color:var(--dark);
}

.most-read-grid .news-content h3:hover{
color:var(--primary);
}

/* ==================================
NEWS SECTION ("Latest News" card grid, .card / .card-content)
================================== */

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

.news-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.card{
display:flex;
flex-direction:column;
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:var(--shadow);
transition:.35s;
}

.card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
}

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

.card-content{
padding:16px;
display:flex;
flex-direction:column;
flex:1;
}

.card-content h3{
font-size:17px;
line-height:1.45;
font-weight:800;
margin-bottom:10px;
color:var(--dark);
}

.card:hover .card-content h3{
color:var(--primary);
}

.card-content p{
font-size:14px;
line-height:1.7;
color:var(--muted);
margin-top:auto;
}

/* ==================================
VIDEO SECTION (Featured Reports)
================================== */

.video-section{
padding:20px 0 60px;
}

.video-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.video-card{
display:flex;
flex-direction:column;
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:var(--shadow);
transition:.35s;
}

.video-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
}

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

.video-content{
padding:16px;
position:relative;
}

.video-content h3{
font-size:15px;
line-height:1.5;
color:var(--dark);
}

/* play icon overlay on video thumbnails */
.video-card a{
position:relative;
display:block;
}

.video-card a::after{
content:"\25B6";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:48px;
height:48px;
border-radius:50%;
background:rgba(0,0,0,.55);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
pointer-events:none;
}

/* ==================================
FOOTER
================================== */

.footer{
background:var(--dark);
color:#fff;
padding:60px 0 0;
margin-top:60px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:30px;
}

.footer-widget h3{
color:#fff;
font-size:20px;
margin-bottom:16px;
}

.footer-widget p{
color:#cbd5e1;
line-height:1.8;
}

.footer-widget ul{
display:flex;
flex-direction:column;
gap:10px;
}

.footer-widget ul li a{
color:#cbd5e1;
}

.footer-widget ul li a:hover{
color:#fff;
}

.footer-logo{
margin-bottom:14px;
}

.footer-logo .custom-logo{
max-height:60px;
width:auto;
}

.footer-social{
display:flex;
gap:12px;
margin-top:18px;
}

.footer-social a{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.1);
color:#fff;
font-size:15px;
}

.footer-social a:hover{
background:var(--primary);
}

.footer-menu{
display:flex;
flex-direction:column;
gap:10px;
}

.footer-bottom{
margin-top:45px;
padding:20px 0;
border-top:1px solid rgba(255,255,255,.1);
}

.footer-bottom-wrap{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.footer-bottom p{
color:#cbd5e1;
font-size:14px;
}

.footer-bottom-links{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.footer-bottom-links a{
color:#cbd5e1;
font-size:14px;
}

.footer-bottom-links a:hover{
color:#fff;
}

/* ==================================
BACK TO TOP
================================== */

.back-top{
position:fixed;
right:20px;
bottom:20px;
width:46px;
height:46px;
border:none;
border-radius:50%;
background:var(--primary);
color:#fff;
font-size:16px;
cursor:pointer;
z-index:999;
box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.back-top:hover{
background:var(--primary-dark);
}

/* ==================================
PERFORMANCE
================================== */

.card img,
.news-card img,
.video-card img,
.side-card img,
.hero-image{
transform:translateZ(0);
backface-visibility:hidden;
}

/* ==================================
RESPONSIVE — TABLET (≤1200px)
================================== */

@media(max-width:1200px){

.hero-grid{
grid-template-columns:1fr;
}

.hero-main .hero-image{
height:380px;
}

.side-news{
flex-direction:row;
overflow-x:auto;
}

.side-card{
min-width:220px;
}

.latest-news-grid,
.most-read-grid,
.news-grid,
.video-grid{
grid-template-columns:repeat(2,1fr);
}

.footer-grid{
grid-template-columns:repeat(2,1fr);
}
}

/* ==================================
RESPONSIVE — MOBILE (≤768px)
================================== */

@media(max-width:768px){

.topbar{
display:none;
}

.container{
padding-left:15px;
padding-right:15px;
}

.custom-logo{
max-height:48px;
}

.mobile-toggle{
display:block;
}

.main-nav{
display:none;
}

.main-nav.active{
display:block;
position:absolute;
top:100%;
left:0;
width:100%;
background:var(--green);
padding:20px;
z-index:999;
}

.nav-menu{
flex-direction:column;
align-items:flex-start;
gap:14px;
}

.hero-main .hero-image{
height:260px;
}

.overlay{
padding:18px;
}

.overlay h1{
font-size:20px;
}

.overlay p{
font-size:14px;
}

.side-news{
flex-direction:column;
}

.side-card{
min-width:0;
}

.latest-news-grid,
.most-read-grid,
.news-grid,
.video-grid{
grid-template-columns:1fr;
}

.footer-grid{
grid-template-columns:1fr;
}

.footer-bottom-wrap{
flex-direction:column;
align-items:flex-start;
}
}

/* ==================================
SIDEBAR SYSTEM
.single-layout > .archive-content|article-card + .single-sidebar
.single-sidebar > .sidebar-box, .sidebar-news, dynamic_sidebar,
  .site-sidebar > .sidebar-widget (most-popular, newsletter,
  prayer-time, editors-pick, featured-video, categories)
================================== */

.single-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:32px;
align-items:start;
}

.single-sidebar{
display:flex;
flex-direction:column;
gap:24px;
min-width:0;
}

.sidebar-box{
background:#fff;
border-radius:10px;
padding:20px;
box-shadow:var(--shadow);
}

.sidebar-box h3{
font-size:18px;
margin-bottom:14px;
padding-bottom:10px;
border-bottom:2px solid var(--primary);
}

.sidebar-news{
display:flex;
gap:12px;
align-items:center;
margin-bottom:14px;
}

.sidebar-news:last-child{
margin-bottom:0;
}

.sidebar-news a{
display:flex;
gap:12px;
align-items:center;
}

.sidebar-news img{
width:70px;
height:70px;
object-fit:cover;
border-radius:8px;
flex-shrink:0;
}

.sidebar-news span{
font-size:14.5px;
font-weight:600;
line-height:1.5;
}

.site-sidebar{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
}

.sidebar-widget{
background:#fff;
border-radius:10px;
padding:20px;
box-shadow:var(--shadow);
min-width:0;
}

.widget-title{
font-size:18px;
margin-bottom:14px;
padding-bottom:10px;
border-bottom:2px solid var(--primary);
}

.widget-empty-note{
font-size:14px;
color:var(--muted);
line-height:1.6;
}

/* Most Popular / Editor's Pick post lists */
.popular-post-list,
.editors-pick-list{
display:flex;
flex-direction:column;
gap:14px;
}

.popular-item,
.editors-pick-item{
display:flex;
gap:12px;
align-items:center;
}

.popular-number{
flex-shrink:0;
width:26px;
height:26px;
border-radius:50%;
background:var(--primary);
color:#fff;
font-size:13px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
}

.popular-thumb,
.editors-pick-thumb{
flex-shrink:0;
width:64px;
height:64px;
border-radius:8px;
overflow:hidden;
}

.popular-thumb img,
.editors-pick-thumb img{
width:100%;
height:100%;
object-fit:cover;
}

.popular-content h4,
.editors-pick-content h4{
font-size:14.5px;
line-height:1.5;
margin-bottom:4px;
}

.popular-date,
.editors-pick-date{
font-size:12.5px;
color:var(--muted);
}

/* Prayer Times */
.prayer-list{
display:flex;
flex-direction:column;
gap:10px;
}

.prayer-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 0;
border-bottom:1px solid var(--border);
font-size:14.5px;
}

.prayer-item:last-child{
border-bottom:none;
}

.prayer-item strong{
color:var(--primary-dark);
}

/* Newsletter */
.newsletter-header p{
font-size:14px;
color:var(--muted);
margin:8px 0 14px;
}

.newsletter-form{
display:flex;
flex-direction:column;
gap:10px;
}

.newsletter-form input{
padding:10px 12px;
border:1px solid var(--border);
border-radius:6px;
font-size:14px;
}

.newsletter-form button{
padding:10px 12px;
border:none;
border-radius:6px;
background:var(--primary);
color:#fff;
font-weight:700;
cursor:pointer;
}

.newsletter-form button:hover{
background:var(--primary-dark);
}

.newsletter-success{
background:#eafaf0;
color:var(--green);
padding:10px 12px;
border-radius:6px;
font-size:14px;
margin-bottom:10px;
}

/* Categories */
.categories-list{
display:flex;
flex-direction:column;
gap:4px;
}

.categories-item a{
display:flex;
justify-content:space-between;
align-items:center;
padding:9px 4px;
border-bottom:1px solid var(--border);
font-size:14.5px;
}

.categories-item:last-child a{
border-bottom:none;
}

.categories-count{
background:#f4f7fb;
color:var(--muted);
font-size:12.5px;
font-weight:700;
padding:2px 9px;
border-radius:20px;
}

/* Featured Video */
.featured-video-embed{
border-radius:8px;
overflow:hidden;
margin-bottom:12px;
}

.featured-video-embed iframe{
width:100%;
aspect-ratio:16/9;
border:none;
}

.featured-video-title{
font-size:14.5px;
line-height:1.5;
}

/* Homepage "more to explore" section */
.homepage-extras-section{
padding:36px 0 8px;
}

@media(max-width:992px){

.single-layout{
grid-template-columns:1fr;
}

}