/* ===================================================================
   SaraikiCulture.com — Responsive Stylesheet (responsive.css)
   =================================================================== */

/* Large desktops down */
@media (max-width:1199.98px){
  .hero-content h1{font-size:54px}
  .masonry{column-count:3}
}

/* Tablets */
@media (max-width:991.98px){
  .section{padding:54px 0}
  .hero{min-height:480px}
  .hero-content{text-align:center;margin:0 auto}
  .hero-buttons{justify-content:center}
  .hero-content h1{font-size:46px}
  .section-title{font-size:28px}
  .page-banner h1{font-size:32px}
  .masonry{column-count:2}
  .navbar.main-nav .navbar-collapse{background:#fff;margin-top:10px;border-radius:10px;
    padding:10px 14px;box-shadow:0 12px 26px rgba(15,36,86,.12)}
  .main-nav .nav-link{padding:9px 4px}
  .main-nav .nav-link::after{display:none}
  .brand-logo .tag{display:none}
}

/* Small tablets / large phones */
@media (max-width:767.98px){
  .topbar-info{gap:14px;font-size:12px}
  .topbar .bar-inner{height:auto;padding:8px 0;justify-content:center}
  .hero{min-height:430px}
  .hero-content h1{font-size:38px}
  .hero-content .lead-sub{font-size:18px}
  .counter-box .num{font-size:36px}
  .footer{text-align:center}
  .footer h4::after{left:50%;transform:translateX(-50%)}
  .footer li a{justify-content:center}
  .footer .f-social{justify-content:center}
  .footer-bottom .fb-inner{justify-content:center;text-align:center}
}

/* Phones */
@media (max-width:575.98px){
  .section{padding:44px 0}
  .hero-content h1{font-size:32px}
  .hero-content h1 small{font-size:16px}
  .section-title{font-size:24px}
  .masonry{column-count:1}
  .page-banner{padding:44px 0}
  .page-banner h1{font-size:26px}
  .hero-buttons .btn{padding:10px 18px;font-size:13px}
  .to-top,.wa-btn{width:46px;height:46px}
  .wa-btn{bottom:78px}
}


/* Newsletter "Join Our Community" popup disabled per request */
#nlPopup { display: none !important; }


/* WhatsApp floating button disabled per request */
.wa-btn { display: none !important; }


/* ===== Footer mobile: compact version 2026-07-03 ===== */
@media (max-width:767.98px){
  .footer{padding:36px 0 12px}
  .footer .row{--bs-gutter-y:24px}
  .footer p.about{max-width:400px;margin:8px auto 0;font-size:12.5px;line-height:1.55}
  .footer .f-social{margin-top:10px}
  .footer .f-social a{width:32px;height:32px;flex:0 0 32px}
  .footer .f-social a i{font-size:13px}
  .footer .f-social a.s-tk i{font-size:12px}
  .footer .nl-form{max-width:400px;margin:8px auto 0}
  .footer .nl-form input{padding:9px 12px;font-size:12.5px}
  .footer h4{margin-bottom:10px;padding-bottom:8px;font-size:13px}
  .footer ul li{padding:2px 0}
  .footer ul li a{font-size:12.5px}
  .footer-bottom{margin-top:10px !important}
  .footer-bottom .fb-inner{flex-direction:column;gap:3px;padding:12px 0;font-size:11.5px}
}
@media (max-width:575.98px){
  .footer{padding:30px 0 10px}
  .footer .fname{font-size:19px}
  .media-card .ph,.news-card .ph{height:190px}
}

/* ===== Utility controls (theme + language) & hero glass stats ===== */
@media (max-width:991.98px){
  .util-controls{margin:10px 0 0;justify-content:center;width:100%}
  .hero-glass-row{justify-content:center}
}
@media (max-width:767.98px){
  .hero-glass-row .glass-stat{min-width:96px;padding:10px 12px}
  .hero-glass-row .glass-stat .num{font-size:18px}
  .hero-glass-row .glass-stat .lbl{font-size:10px}
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-bar select,.filter-bar input,.filter-bar .btn-gold{width:100%}
}
@media (max-width:575.98px){
  .hero-glass-row{gap:8px}
  .market-cat-card{padding:20px 12px}
}

/* Respect low-power / reduced-motion devices: never render the WebGL hero */
@media (prefers-reduced-motion:reduce){
  .hero-3d-canvas{display:none!important}
}


/* ===================================================================
   REBRAND 2026-07-22 -- glass navbar + cinematic hero refinements
   =================================================================== */

/* ---------- Glass navbar ---------- */
.navbar.main-nav{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.4);
  box-shadow:0 8px 30px rgba(122,31,43,.08);
}
.navbar.main-nav.scrolled{
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 32px rgba(122,31,43,.16);
}
[data-theme="dark"] .navbar.main-nav{
  background:rgba(32,22,15,.6);
  border-bottom-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .navbar.main-nav.scrolled{
  background:rgba(16,11,8,.9);
}
.nav-search,.lang-toggle,.theme-toggle{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
[data-theme="dark"] .nav-search,[data-theme="dark"] .lang-toggle,[data-theme="dark"] .theme-toggle{
  background:rgba(255,255,255,.06);
}

/* ---------- Cinematic hero overlay ---------- */
.hero::after{
  background:linear-gradient(180deg,rgba(10,8,6,.1) 0%,rgba(10,8,6,.5) 55%,rgba(10,8,6,.72) 100%);
}
.hero-scene{opacity:.16}

/* ---------- Hero badge pill ---------- */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.32);
  color:#fff;padding:9px 20px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.4px;
  margin-bottom:22px;text-shadow:none;
}
.hero-badge i{color:var(--gold-soft);font-size:11px}

/* ---------- Pill-shaped hero CTAs ---------- */
.hero-buttons .btn{border-radius:999px}

/* ---------- Scroll indicator ---------- */
.hero-scroll{
  position:absolute;left:50%;bottom:26px;z-index:3;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:#fff;opacity:.85;
}
.hero-scroll span{font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600}
.hero-scroll::after{
  content:"";width:1px;height:28px;
  background:linear-gradient(#fff,transparent);
  animation:heroScrollLine 1.8s ease-in-out infinite;
}
@keyframes heroScrollLine{
  0%{opacity:.2;transform:scaleY(.4);transform-origin:top}
  50%{opacity:1;transform:scaleY(1);transform-origin:top}
  100%{opacity:.2;transform:scaleY(.4);transform-origin:top}
}
@media(prefers-reduced-motion:reduce){.hero-scroll::after{animation:none}}

/* ---------- Left-align hero content on desktop ---------- */
@media (min-width:992px){
  .hero-content{text-align:left;margin-left:0;margin-right:auto}
  .hero-buttons{justify-content:flex-start}
  .hero-glass-row{justify-content:flex-start}
}