.elementor-193 .elementor-element.elementor-element-58c4bda:not(.elementor-motion-effects-element-type-background), .elementor-193 .elementor-element.elementor-element-58c4bda > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F9FA;}.elementor-193 .elementor-element.elementor-element-58c4bda > .elementor-container{max-width:589px;}.elementor-193 .elementor-element.elementor-element-58c4bda{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:-0px;padding:0px 0px 0px 0px;}.elementor-193 .elementor-element.elementor-element-58c4bda > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-193 .elementor-element.elementor-element-a351911{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-193 .elementor-element.elementor-element-28dc448{margin-top:-12px;margin-bottom:0px;}/* Start custom CSS for shortcode, class: .elementor-element-139aecd *//* ==========================================================================
   (0) Theme Tokens / Variables
   Maqsad: Brand colors, shadows waghera aik jaga define – baad mein asaani se change.
   ========================================================================== */
:root{
  --zp-primary: #0077bc;         /* brand accent */
  --zp-text:    #111;            /* base text color */
  --zp-bg:      #fff;            /* header background */
  --zp-line:    #e6e6e6;         /* borders/dividers */
  --zp-shadow:  0 6px 18px rgba(0,0,0,.06);  /* halka sa shadow */
  --zp-hover:   #f5f9ff;         /* mobile list hover bg */
  --zp-br:      8px;             /* rounded corner ki default radius */
}

/* ==========================================================================
   (1) Header Wrapper + Grid
   Maqsad: Header ko container aur grid layout dena (burger | links | actions)
   ========================================================================== */
.zp-nav{
  position: relative;
  z-index: 10020;
  background: var(--zp-bg);
}
.zp-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 40px 1fr auto; /* burger | menu | actions */
  align-items: center;
  gap: 12px;
}

/* ==========================================================================
   (2) Burger (Mobile Toggle)
   Maqsad: Mobile par menu kholne band karne ka button (checkbox hack)
   ========================================================================== */
.zp-toggle{ display:none; }
.zp-burger{
  width: 40px; height: 40px;
  border: 1px solid var(--zp-line);
  border-radius: var(--zp-br);
  background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer;
  box-shadow: var(--zp-shadow);
}
.zp-burger span{
  width: 18px; height: 2px; background: #444; border-radius: 2px;
}

/* ==========================================================================
   (3) Logo
   Maqsad: Brand logo ka size/placement set karna
   ========================================================================== */
.zp-logo img{
  height: 100px; /* zaroorat ho to yahan se badha/ghata sakte hain */
  display: block;
}

/* ==========================================================================
   (4) Actions (WhatsApp Image Button + Search Trigger)
   Maqsad: Header ke right side par WA image aur search icon ki styling
   ========================================================================== */
.zp-actions{ display:flex; align-items:center; gap:10px; }

/* --- WhatsApp image button (icon ki tarah dikhne wala chota image) --- */
.zp-wa-img{
  display:inline-flex; width:44px; height:44px; border-radius: var(--zp-br); overflow:hidden;
  background:#fff; border:1px solid var(--zp-line); box-shadow:var(--zp-shadow);
  align-items:center; justify-content:center;
}
.zp-wa-img img{ width:100%; height:100%; object-fit:contain; }

/* --- Search trigger (gol button jismein magnifier SVG) --- */
.zp-actions .oc-search-trigger{
  width:40px; height:40px;
  background:#fff; border:1px solid var(--zp-line); border-radius: var(--zp-br);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--zp-shadow); cursor:pointer;
}
.zp-actions .oc-search-trigger:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.10); }

/* ==========================================================================
   (5) Links (Navigation) – Base
   Maqsad: Menu items ki common styling + caret (dropdown) indicator
   ========================================================================== */
.zp-links ul{ list-style:none; margin:0; padding:0; }
.zp-links .zp-ul{ display:flex; gap:22px; align-items:center; }
.zp-links .zp-ul > li{ position:relative; }
.zp-links a{
  display:block; padding:10px 8px;
  color: var(--zp-text); text-decoration:none; font-weight:600;
}
.zp-links a:hover{ color: var(--zp-primary); }
.zp-links .current-menu-item > a{ color: var(--zp-primary); }

/* --- Dropdown walay items ke liye chhota arrow (caret) --- */
.zp-links .menu-item-has-children > a::after{
  content:"▾"; margin-left:6px; font-size:12px; opacity:.7;
}

/* ==========================================================================
   (6) Desktop Menu + Dropdown
   Maqsad: Desktop par hover se dropdown dikhana aur panel ki styling
   ========================================================================== */
@media (min-width: 992px){
  .zp-inner{ grid-template-columns: auto 1fr auto; } /* burger hide, space adjust */
  .zp-burger{ display:none; }

  .zp-links{
    position: static; display:block; border:0; box-shadow:none; padding:0;
  }
  .zp-links .zp-ul{ flex-direction: row; gap:24px; }

  /* --- Dropdown panel --- */
  .zp-links .sub-menu{
    display:none;
    position:absolute; left:0; top:100%;
    min-width:220px; background:#fff; border:1px solid var(--zp-line);
    padding:8px 0; box-shadow:0 10px 24px rgba(0,0,0,.08); z-index:10030;
  }
  .zp-links .sub-menu li a{
    padding:10px 14px; font-weight:500; white-space:nowrap;
  }
  .zp-links .zp-ul > li:hover > .sub-menu{ display:block; } /* hover par show */
}

/* ==========================================================================
   (7) Mobile Menu (Dropdown Panel)
   Maqsad: Mobile par header ke niche slide-down panel jismein links aayen
   ========================================================================== */
@media (max-width: 991.98px){
  .zp-links{
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-top:1px solid #eee; box-shadow: var(--zp-shadow);
    display:none; padding:10px 12px; z-index:10022;
  }
  /* burger (checkbox) ON ho to menu khol do */
  .zp-toggle:checked ~ .zp-links{ display:block; }

  .zp-links .zp-ul{ flex-direction:column; gap:0; }
  .zp-links .zp-ul > li > a{ padding:12px; border-radius:6px; }
  .zp-links a:hover{ background: var(--zp-hover); }

  /* --- Mobile me parent item ke right par chhota caret --- */
  .zp-links .menu-item-has-children > a{ position:relative; }
  .zp-links .menu-item-has-children > a::after{
    content:"▾"; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  }

  /* --- Mobile sub-menu collapsible (JS se .open toggle hoga) --- */
  .zp-links .sub-menu{
    position:static; display:none; border:0; box-shadow:none; padding:0 0 6px 0;
  }
  .zp-links .menu-item-has-children.open > .sub-menu{ display:block; }
  .zp-links .sub-menu a{ padding:10px 16px 10px 24px; }

  /* --- Mobile Close (X) button panel ke andar --- */
  .zp-close{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; margin-left:auto; margin-bottom:6px;
    border-radius: var(--zp-br); border:1px solid var(--zp-line);
    background:#fff; color:#444; cursor:pointer; box-shadow: var(--zp-shadow);
    font-size:22px; line-height:1;
  }
}

/* ==========================================================================
   (8) Dark Overlay (Mobile Menu Open)
   Maqsad: Backdrop dark karna taa-ke focus menu par rahe
   ========================================================================== */
.zp-overlay{
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  z-index:10010; /* header se kam, is liye header upar rahega */
}
.zp-toggle:checked ~ .zp-overlay{ display:block; }

/* ==========================================================================
   (9) Off-Canvas Search (Overlay + Panel)
   Maqsad: Right side se slide hone wala search panel; z-index upar rakha
   ========================================================================== */
.oc-search-overlay{
  position:fixed; inset:0;
  z-index:120000 !important; /* header/overlay se upar */
}
.oc-search-panel{
  position:fixed; top:0; right:0; height:100vh; width:380px; max-width:90vw;
  z-index:120001 !important; /* overlay se bhi upar */
}
@media (max-width:480px){
  .oc-search-panel{ width:100vw; } /* chhote mobile par full width */
}

/* --- Search panel ke header me Close (X) --- */
.oc-search-header{ position: relative; }
.oc-search-close{
  position:absolute; right:12px; top:12px;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:#fff; color:#333; border:1px solid var(--zp-line); border-radius: var(--zp-br);
  font-size:22px; line-height:1; font-weight:700; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.06); z-index:2;
}
.oc-search-close:hover{ background:#f6f6f6; }
.oc-search-close:empty::before{ content:"×"; font-size:22px; line-height:1; }

/* --- GO (search) round button par Elementor/Theme ki unwanted styles reset --- */
.oc-search-inputwrap .oc-search-go{
  width:40px !important; height:40px !important; min-width:40px !important;
  padding:0 !important; border-radius:50% !important;
  display:flex; align-items:center; justify-content:center;
  line-height:1 !important; box-shadow:none !important;
}
.oc-search-inputwrap .oc-search-go svg{ pointer-events:none; }

/* ==========================================================================
   (10) Accessibility (Keyboard Focus)
   Maqsad: Keyboard users ko clear focus outline dikhana
   ========================================================================== */
.zp-burger:focus-visible,
.zp-close:focus-visible,
.zp-actions .oc-search-trigger:focus-visible,
.zp-links a:focus-visible,
.oc-search-close:focus-visible{
  outline: 2px solid var(--zp-primary);
  outline-offset: 2px;
}

/* === Mobile menu: left aligned === */
@media (max-width: 992px){

  /* dropdown panel full width + left text */
  .zp-links{
    left: 0;                /* panel ko left se start kar do */
    right: 0;
    padding: 10px 0 8px;    /* vertical spacing */
    text-align: left;
  }

  /* list ko left align karein (center ki jagah) */
  .zp-links .zp-ul{
    flex-direction: column;
    gap: 0;
    align-items: flex-start;   /* <- yahan se left align */
  }

  /* har item 100% width + left text */
  .zp-links .zp-ul > li{ width: 100%; }
  .zp-links .zp-ul > li > a{
    width: 100%;
    text-align: left;
    padding: 12px 36px 12px 16px;  /* left padding thoda, right caret ke liye */
    border-radius: 6px;
  }

  /* parents ke arrow ko right par fix hi rakho */
  .zp-links .menu-item-has-children > a{
    position: relative;
    padding-right: 34px;
  }
  .zp-links .menu-item-has-children > a::after{
    content:"";
    position:absolute; right:12px; top:50%;
    width:8px; height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    opacity:.75;
  }
  .zp-links .menu-item-has-children.open > a::after{
    transform: translateY(-50%) rotate(-135deg);
  }
}
/* Hide header close "X" on desktop; show only for mobile open menu */
@media (min-width: 992px){
  .zp-close{ display:none !important; }
}

@media (max-width: 991.98px){
  .zp-toggle:not(:checked) ~ .zp-links .zp-close{ display:none !important; }
  .zp-toggle:checked      ~ .zp-links .zp-close{ display:flex !important; }
}


/* Center main menu on desktop only */
@media (min-width: 992px){
  /* make the menu container flex so we can center its list */
  .zp-links{ display:flex !important; justify-content:center; }

  /* center the <ul> that holds the menu items */
  .zp-links .zp-ul{
    width:100%;
    display:flex;
    justify-content:center;   /* <- items in the middle */
  }

  /* if grid is pulling menu slightly left/right, allow self-centering */
  .zp-links{ justify-self:center; }
}




/* =========================
   ZIA Header Menu – AI-Mode Pill Animation (Top + Dropdown)
   Paste as-is (Customizer → Additional CSS)
   ========================= */

/* Vars */
:root{
  --zp-primary: #0077bc;        /* your brand blue (already in your CSS) */
  --ai-pill-bg: #fff;           /* pill background */
  --ai-ring-w: 1.5px;           /* ring thickness */
  --ai-speed: 1.6s;             /* animation speed */
  --ai-gradient: linear-gradient(90deg,#4285F4,#34A853,#FBBC05,#EA4335,#4285F4);
}

/* Make anchors pill-ready (both top & dropdown) */
.zp-nav .zp-links .zp-ul > li > a,
.zp-nav .zp-links .sub-menu a{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;                    /* dropdown can be 8px 12px if you prefer */
  border-radius: 999px;                  /* full pill */
  border: var(--ai-ring-w) solid transparent;
  background:
    linear-gradient(var(--ai-pill-bg), var(--ai-pill-bg)) padding-box,
    var(--ai-border, linear-gradient(#0000,#0000)) border-box; /* ring off by default */
  background-size: 100% 100%, 300% 100%;
  background-position: 0 0, 0% 0;
  transition: color .25s ease, transform .25s ease, box-shadow .25s ease, background-position .25s linear;
  text-decoration: none;
}

/* Desktop effects (hover + active) */
@media (min-width: 992px){

  /* Hover: show animated rainbow ring + micro-float */
  .zp-nav .zp-links .zp-ul > li > a:hover,
  .zp-nav .zp-links .sub-menu a:hover{
    --ai-border: var(--ai-gradient);
    transform: translateY(-1px);
    color: var(--zp-primary);
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
    animation: ai-ring var(--ai-speed) linear infinite;
  }

  /* Current page (top-level): keep ring visible (slower sweep) */
  .zp-nav .zp-links .zp-ul > li.current-menu-item > a{
    --ai-border: var(--ai-gradient);
    animation: ai-ring calc(var(--ai-speed)*1.5) linear infinite;
  }
}

/* Dropdown spacing tidy (optional, keeps pill look clean) */
.zp-nav .zp-links .sub-menu a{
  white-space: nowrap;
}

/* Gradient motion */
@keyframes ai-ring{
  0%   { background-position: 0 0,   0% 0; }
  100% { background-position: 0 0, 300% 0; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .zp-nav .zp-links .zp-ul > li > a,
  .zp-nav .zp-links .sub-menu a{ transition:none; animation:none !important; }
}/* End custom CSS */