/* ============================================================
   JSKB HEADER — VIDEO BACKGROUND (height auto-adjusts, koi fixed px nahi)
   WPCode "CSS Snippet" me is poore block ko paste karo
============================================================ */

/* Nav ko relative banaya taaki video usi ke andar absolutely fit ho -
   height yahan set NAHI ki - jo bhi natural height ho (logo+menu+padding se)
   video usi ko follow karega.
   IMPORTANT: overflow:hidden yahan NAHI lagana - warna dropdown menus
   (Personal, Services waghera) clip ho jayenge aur khulenge hi nahi */
.jskb-video-nav{
  position: relative;
  z-index: 1;
}

/* Video wrapper - poori nav ki height/width cover karega (chahe wo kitni bhi ho) */
.jskb-video-bg-wrap{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.jskb-video-bg-wrap iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78%;
  transform: translate(-50%, -50%) scale(1.2);
  pointer-events: none;
}

/* Vignette overlay - center thoda dark, taaki YouTube ka center icon
   kabhi flash ho to visually mask ho jaye. Edges lighter rakhe hain
   taaki logo/menu par koi effect na pade (wo already z-index se upar hai) */
.jskb-video-overlay{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255, .8);
  z-index: 1;
  pointer-events: none;
}

/* IMPORTANT: aapka logo/menu wala .container-fluid pehle se z-index
   stacking context ke through video/overlay ke UPAR hi render hoga
   (DOM order ki wajah se) - lekin safety ke liye explicit kar rahe hain */
.jskb-video-nav > .container-fluid{
  position: relative;
  z-index: 2;
}

/* ---- Mobile pe video hata do (data + performance bachane ke liye) ---- */

/*
@media (max-width: 768px){
  .jskb-video-bg-wrap{ display: none; }
  .jskb-video-overlay{ background: none; }
}
*/