/* RESET + BASE */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Poppins','Noto Sans Bengali',system-ui,-apple-system,Arial,Helvetica,sans-serif;
}
body{
  background:#0c0c0c;
  color:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* HEADER / HERO */
.hero-header{
  position:relative;
  width:100%;
  height:160px;
  background:url('../images/header-banner.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  border-bottom:2px solid gold;
  box-shadow:0 4px 20px rgba(255,215,0,0.25);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.6),rgba(0,0,0,0.85));
}
.hero-content{
  position:relative;
  z-index:2;
}
.shine-logo{
  font-size:42px;
  font-weight:800;
  letter-spacing:1px;
  background:linear-gradient(90deg,#FFD700,#FFA500,#FFF);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 20px rgba(255,215,0,0.5);
  position:relative;
  overflow:hidden;
}
.shine-logo::after{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  animation:shineMove 4s infinite;
}
@keyframes shineMove{
  0%{left:-75%;}
  100%{left:125%;}
}
.tagline{
  font-size:14px;
  color:#FFD700;
  letter-spacing:0.5px;
  margin-top:6px;
  text-shadow:0 0 10px rgba(255,215,0,0.4);
}

/* NAVBAR */
.navbar{
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  background:linear-gradient(90deg,#000,#1a1a1a);
  border-bottom:2px solid gold;
  box-shadow:0 4px 12px rgba(255,215,0,0.2);
}
.logo a{
  color:gold;
  font-weight:700;
  font-size:18px;
  text-decoration:none;
  letter-spacing:0.5px;
  text-shadow:0 0 10px rgba(255,215,0,0.6);
}
.nav-links{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin:0;padding:0;
}
.nav-links a{
  color:#fff;
  padding:6px 10px;
  border-radius:6px;
  transition:0.3s;
  display:block;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}
.nav-links a:hover{
  background:linear-gradient(90deg,#FFD700,#FFA500);
  color:#000;
  box-shadow:0 0 12px rgba(255,215,0,0.8);
}
.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:#FFD700;
  font-size:28px;
  cursor:pointer;
  transition:transform 0.3s;
}
.menu-toggle:hover{transform:scale(1.15);}

/* MOBILE NAV */
@media(max-width:768px){
  .menu-toggle{display:block;}
  .nav-links{
    position:fixed;
    right:-100%;
    top:0;
    flex-direction:column;
    align-items:flex-start;
    width:75vw;max-width:320px;
    height:100vh;
    background:#000;
    padding:80px 20px;
    transition:right .3s ease;
    z-index:950;
    border-left:2px solid gold;
    box-shadow:-4px 0 20px rgba(0,0,0,0.7);
  }
  .nav-links.active{right:0;}
  .nav-links a{
    width:100%;
    border-bottom:1px solid #222;
    font-size:16px;
    padding:12px 0;
  }
}
.overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.75);
  opacity:0;visibility:hidden;
  z-index:900;
  transition:0.3s;
}
.overlay.active{
  opacity:1;visibility:visible;
}

/* DRAWER */
.submenu-drawer{
  position:fixed;
  top:0;left:0;
  width:320px;
  height:100vh;
  background:linear-gradient(180deg,#111,#1a1a1a,#0c0c0c);
  border-right:2px solid gold;
  transform:translateX(-100%);
  transition:transform .35s ease;
  overflow-y:auto;
  z-index:1001;
  box-shadow:6px 0 25px rgba(255,215,0,0.1);
}
.submenu-drawer.active{transform:translateX(0);}
.submenu-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#000;
  padding:16px 18px;
  border-bottom:2px solid gold;
  position:sticky;top:0;
}
.submenu-header h3{
  margin:0;
  color:#FFD700;
  text-shadow:0 0 10px rgba(255,215,0,0.6);
  font-size:16px;
  font-weight:600;
}
.close-btn{
  font-size:30px;
  background:none;
  border:none;
  color:#FFD700;
  cursor:pointer;
  transition:.3s;
  line-height:1;
}
.close-btn:hover{color:#ff4d4f;transform:rotate(90deg);}
.submenu-drawer ul{
  list-style:none;
  margin:0;
  padding:15px;
}
.submenu-drawer li{
  margin:12px 0;
}
.submenu-drawer a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  background:#181818;
  color:#fff;
  padding:14px 16px;
  border-radius:10px;
  transition:all .25s ease;
  border:1px solid transparent;
  text-decoration:none;
  font-size:14px;
}
.submenu-drawer a:hover{
  background:linear-gradient(90deg,#FFD700,#FFA500);
  color:#000;
  border-color:gold;
  transform:translateX(6px);
  box-shadow:0 0 15px rgba(255,215,0,0.6);
}
.submenu-drawer img{
  width:56px;height:56px;border-radius:50%;
  object-fit:cover;border:2px solid gold;
}

/* FILTER BAR */
.filter-bar{
  background:#111;
  border-bottom:1px solid #333;
  padding:12px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  justify-content:center;
}
.filter-btn{
  background:#1a1a1a;
  color:#fff;
  border:1px solid #444;
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:.25s;
}
.filter-btn.active,
.filter-btn:hover{
  background:linear-gradient(90deg,#FFD700,#FFA500);
  color:#000;
  border-color:gold;
  box-shadow:0 0 12px rgba(255,215,0,0.6);
}

/* MARQUEE */
.marquee-container{
  background:linear-gradient(90deg,#FFD700,#FFB300,#FF9800);
  color:#000;
  padding:14px;
  font-size:16px;
  font-weight:600;
  border-radius:12px;
  margin:20px;
  text-shadow:0 0 2px #fff;
  box-shadow:0 4px 12px rgba(255,215,0,0.4);
  overflow:hidden;
  white-space:nowrap;
}
.marquee-container b{
  color:#000;
}

/* CURVE */
.curve-section img{
  width:100%;
  display:block;
  margin-top:-10px;
  margin-bottom:20px;
  opacity:0.9;
}

/* SHARED SECTION HEADER */
.layout-block{
  padding:20px 16px 40px;
}
.section-head{
  text-align:center;
  margin-bottom:20px;
}
.section-title{
  font-size:20px;
  color:gold;
  font-weight:600;
  letter-spacing:0.4px;
  text-shadow:0 0 10px rgba(255,215,0,0.4);
  margin-bottom:6px;
}
.section-sub{
  font-size:14px;
  color:#aaa;
}

/* LAYOUT 1: CLASSIC GLOW GRID */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.post-card{
  background:#111;
  border:1px solid #333;
  border-radius:10px;
  padding:16px;
  text-align:center;
  transition:.3s;
  box-shadow:0 2px 10px rgba(0,0,0,0.4);
  position:relative;
}
.post-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:10px;
}
.post-card h3{
  color:#FFD700;
  font-size:16px;
  font-weight:600;
  margin-bottom:6px;
  line-height:1.4;
  text-shadow:0 0 6px rgba(255,215,0,0.4);
}
.post-card p{
  color:#ccc;
  font-size:14px;
  line-height:1.5;
  margin-bottom:10px;
  min-height:42px;
}
.post-card .read-more{
  color:#FFD700;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  display:inline-block;
  transition:.25s;
}
.post-card .read-more:hover{
  color:#fff;
  text-decoration:underline;
}
.post-card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 24px rgba(255,215,0,0.25);
}

/* PAGINATION */
.pagination-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px 0 8px;
}
.page-btn{
  background:#1a1a1a;
  color:#fff;
  border:1px solid #444;
  border-radius:6px;
  padding:8px 14px;
  font-size:14px;
  cursor:pointer;
  transition:.25s;
  display:flex;
  align-items:center;
  gap:6px;
}
.page-btn[disabled]{
  opacity:0.4;
  cursor:not-allowed;
}
.page-btn:hover:not([disabled]){
  background:linear-gradient(90deg,#FFD700,#FFA500);
  color:#000;
  border-color:gold;
  box-shadow:0 0 12px rgba(255,215,0,0.6);
}
.page-info{
  color:#FFD700;
  font-size:14px;
  font-weight:500;
  text-shadow:0 0 8px rgba(255,215,0,0.4);
}

/* LAYOUT 2: FLOATING MODERN CARD */
.post-grid-two-col{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
}
.post-card-2{
  background:radial-gradient(circle at top,#2a2a2a 0%,#0f0f0f 70%);
  border-radius:16px;
  border:1px solid rgba(255,215,0,0.4);
  box-shadow:0 0 12px rgba(255,215,0,0.3),0 20px 40px rgba(0,0,0,0.8);
  padding:20px;
  display:flex;
  gap:16px;
  transition:.3s;
  position:relative;
}
.post-card-2 .thumb{
  flex:0 0 120px;
  height:90px;
  border-radius:12px;
  background:#000;
  overflow:hidden;
  border:1px solid rgba(255,215,0,0.5);
  box-shadow:0 0 10px rgba(255,215,0,0.4);
}
.post-card-2 .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.post-card-2 .info h3{
  color:#fff;
  font-size:16px;
  line-height:1.4;
  margin-bottom:6px;
  font-weight:600;
}
.post-card-2 .info h3 a{
  color:#fff;
  text-decoration:none;
}
.post-card-2 .meta-line{
  font-size:12px;
  color:#aaa;
  margin-bottom:8px;
}
.post-card-2 .meta-line span{
  margin-right:10px;
}
.post-card-2 .excerpt{
  font-size:13px;
  color:#ccc;
  line-height:1.5;
  margin-bottom:10px;
}
.post-card-2 .more-link{
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color:#FFD700;
}
.post-card-2:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 15px 40px rgba(255,215,0,0.3);
}

/* LAYOUT 3: HERO OVERLAY CARD */
.hero-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
}
.hero-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  min-height:200px;
  background:#000;
  box-shadow:0 20px 40px rgba(0,0,0,0.8);
  border:2px solid rgba(255,215,0,0.3);
}
.hero-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.45);
  transition:.4s;
}
.hero-card .overlay-info{
  position:relative;
  z-index:2;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:100%;
  color:#fff;
}
.hero-card .badge-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.hero-card .badge{
  background:linear-gradient(135deg,#ffc400 0%,#ff9800 100%);
  color:#000;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-shadow:0 0 4px rgba(255,255,255,0.3);
}
.hero-card h3{
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  margin:0 0 10px;
  text-shadow:0 0 8px rgba(0,0,0,0.8),0 0 12px rgba(255,215,0,0.4);
}
.hero-card h3 a{
  color:#fff;
  text-decoration:none;
}
.hero-card .hero-meta{
  font-size:12px;
  color:#ddd;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.hero-card:hover img{
  filter:brightness(0.6) blur(1px);
  transform:scale(1.05);
}

/* LAYOUT 4: MINIMAL LIST / STRIP */
.mini-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.mini-card{
  background:#121212;
  border:1px solid #2a2a2a;
  border-radius:12px;
  padding:16px;
  display:flex;
  align-items:flex-start;
  gap:16px;
  transition:.3s;
}
.mini-card-thumb{
  flex:0 0 90px;
  height:70px;
  border-radius:10px;
  background:#000;
  overflow:hidden;
  border:1px solid #444;
}
.mini-card-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.mini-card-body{
  flex:1;
}
.mini-card-title{
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  margin-bottom:6px;
  color:#fff;
}
.mini-card-title a{
  text-decoration:none;
  color:#fff;
}
.mini-card-meta{
  font-size:12px;
  color:#888;
  margin-bottom:8px;
}
.mini-card-excerpt{
  font-size:13px;
  color:#bbb;
  line-height:1.5;
  margin-bottom:8px;
}
.mini-card-more{
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color:#FFD700;
}
.mini-card:hover{
  background:#1a1a1a;
  box-shadow:0 12px 30px rgba(0,0,0,0.8);
  border-color:gold;
  transform:translateY(-3px);
}

/* FOOTER */
.site-footer{
  background:#000;
  padding:40px 20px 20px;
  border-top:1px solid #333;
  box-shadow:0 -2px 8px rgba(0,0,0,0.8);
  color:#aaa;
  font-size:13px;
}
.footer-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  max-width:1200px;
  margin:auto;
}
.footer-col h3{
  margin-bottom:15px;
  color:gold;
  font-size:14px;
  font-weight:600;
  text-shadow:0 0 8px rgba(255,215,0,0.4);
}
.footer-col p,
.footer-col a{
  color:#ccc;
  font-size:14px;
  text-decoration:none;
  display:block;
  margin:6px 0;
  transition:0.3s;
}
.footer-col a:hover{
  color:gold;
  transform:translateX(5px);
}
.footer-social a{
  display:inline-block;
  margin-right:10px;
  color:#ccc;
  font-size:18px;
  transition:0.3s;
}
.footer-social a:hover{
  color:gold;
  transform:scale(1.2);
}
.footer-bottom{
  text-align:center;
  padding-top:20px;
  font-size:12px;
  color:#888;
  border-top:1px solid #333;
  margin-top:20px;
}

/* RESPONSIVE */
@media(max-width:480px){
  .shine-logo{font-size:32px;}
  .tagline{font-size:13px;}

  .filter-bar{padding:10px;gap:8px;}
  .filter-btn{font-size:12px;padding:7px 12px;}

  .marquee-container{
    font-size:14px;
    padding:12px;
    margin:16px;
  }

  .section-title{font-size:18px;}

  /* layout 2 card stack vertical */
  .post-card-2{
    flex-direction:column;
    align-items:flex-start;
  }
  .post-card-2 .thumb{
    width:100%;
    max-width:100%;
    height:160px;
  }

  .hero-card{
    min-height:220px;
  }
  .hero-card h3{
    font-size:16px;
  }

  .mini-card{
    flex-direction:column;
  }
  .mini-card-thumb{
    width:100%;
    max-width:100%;
    height:160px;
  }
}

/* VIDEO PLAY ICON overlay */
.video-thumb {
  position: relative;
  overflow: hidden;
}
.video-thumb::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 56px;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 0 25px rgba(255,255,255,0.8);
  pointer-events: none;
  transition: 0.3s;
}
.video-thumb:hover::after {
  color: gold;
  text-shadow: 0 0 25px rgba(255,215,0,0.8);
  transform: translate(-50%, -50%) scale(1.15);
}

/* optional small "🎥 Video" badge */
.video-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.6);
  color: gold;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
}

