/* ============================================================
   WNRESP — Worknest responsive + icons layer (yahan tak ka kaam)
   Load: header.php mein $custom_css ke BAAD link hai, is liye
   ye file sab pages par sab se aakhir mein load hoti hai.
   Desktop design untouched hai — neeche sirf 2 cheezein hain:
   (1) ICON MOVE (user ka order): WhatsApp RIGHT, chatbot LEFT,
       back-to-top WhatsApp ke UPAR (right side).
   (2) Mobile (575px) polish: chhote icons, FAQ/footer spacing.
   Text widths ko chheda NAHI gaya — wajah: site ke saare
   540-900px text widths asal mein max-width hain (jaise
   .bl-sub max-width:650px), jo chhoti screen par khud hi simat
   jaate hain aur kabhi overflow nahi karte. Un par
   max-width:100%!important lagana ulta nuqsan-deh hota
   (tablet par text 650px se zyada phail jaata).
   ============================================================ */

/* ---- Back-to-top: bottom-LEFT se hata kar WhatsApp ke UPAR (right side) ----
   Desktop: WhatsApp fab bottom 28 + height 58 + 16 gap = bottom 102px.
   !important is liye ke about.css page ke baad load hota hai. */
.ab-top{right:28px !important;left:auto !important;bottom:102px !important}

@media (max-width:575.98px){
  /* Back-to-top mobile: WhatsApp (bottom 14 + height 48 + 16 gap = 78px) ke upar */
  .ab-top{right:14px !important;bottom:78px !important;width:48px !important;height:48px !important}
  /* WhatsApp fab: RIGHT side hi rahe, mobile par chhota */
  .floating-whatsapp{width:48px;height:48px;font-size:26px;right:14px;bottom:14px}
  /* Contact toast: mobile par dono fabs ke upar aaye (contact.css ke baad load hota hai, is liye !important) */
  .ct-toast{bottom:90px !important;max-width:calc(100vw - 32px) !important;text-align:center}
  /* Header: chhoti phone screen par brand + capsule compact */
  .navbar-floating-capsule{padding:10px 14px}
  .brand-name-main{font-size:1.25rem}
  .brand-tag-sub{letter-spacing:1px}
  /* FAQ card: phone par padding kam, text ko zyada jagah */
  .faq-card-balanced{padding:18px 16px}
  /* Footer: phone par stacked columns ki spacing compact */
  .footer-title{margin-bottom:14px}
  .footer-contact li{margin-bottom:10px}
}

/* ============ Logo (header + footer) ============ */
.brand-logo-img{height:42px;width:auto;display:block}
.footer-logo-pill{display:inline-block;background:#fff;border-radius:14px;padding:6px 12px}
.footer-logo-img{height:44px;width:auto;display:block}

/* ============ Mobile hamburger: 3 lines ============
   Toggler button maujood tha lekin uska span (toggler-bars) ki
   koi CSS hi nahi thi, is liye phone par lines nazar nahi aati thin. */
.custom-capsule-toggler{padding:8px 10px}
.custom-capsule-toggler .toggler-bars{display:block;width:26px;height:3px;background:#161a39;border-radius:3px;position:relative}
.custom-capsule-toggler .toggler-bars::before,.custom-capsule-toggler .toggler-bars::after{content:"";display:block;width:26px;height:3px;background:#161a39;border-radius:3px;position:absolute;left:0}
.custom-capsule-toggler .toggler-bars::before{top:-8px}
.custom-capsule-toggler .toggler-bars::after{top:8px}

@media (max-width:575.98px){
  .brand-logo-img{height:34px}
  .footer-logo-img{height:38px}
}