/* =========================================================
   PrimeSys Branding for Zoho Desk Portal (FULL CSS)
   Header + Hero + Nav + Dropdown + Status + CTA + Cards + Popular
   + Hero video background
   + Create Ticket visual label + remove wrapper background
   + Footer CTA wave + Footer layout (3-col)
   + Zoho full-bleed safe breakout
   ========================================================= */

:root{
  --ps-navy-1: #082844;
  --ps-navy-2: #0a3b66;
  --ps-topbar: #061f36;

  --ps-green:  #9ad000;

  --ps-green-cta-1: #b7df00;
  --ps-green-cta-2: #7cc200;
  --ps-green-cta-3: #4aa700;

  --ps-footer-bg: #1f1f1f;

  --ps-text: rgba(255,255,255,0.92);
  --ps-text-muted: rgba(255,255,255,0.78);
}

/* Hide company name if Zoho injects it */
.Header__logotxt{ display:none !important; }

/* =========================================================
   TOP CONTACT STRIP
   ========================================================= */
.ps-topbar{
  background: var(--ps-topbar);
  color: #ffffff;
  font-size: 13px;
  padding: 6px 0;
}
.ps-topbar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.ps-topbar__link{ color:#fff; text-decoration:none; }
.ps-topbar__link:hover{ text-decoration: underline; }
.ps-topbar__sep{ opacity:.6; }

/* =========================================================
   SERVICE STATUS STRIP
   ========================================================= */
.ps-status{
  background: rgba(6,31,54,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  padding: 7px 0;
}
.ps-status__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.ps-status__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ps-green);
  display: inline-block;
}
.ps-status__text{ opacity:.95; }
.ps-status__link{
  color: var(--ps-green);
  text-decoration: none;
  margin-left: 6px;
}
.ps-status__link:hover{ text-decoration: underline; }

/* =========================================================
   BASE GRADIENT (Zoho blocks)
   ========================================================= */
.Header__headerBg,
.Header__bgColor,
.Header__titleSearchWrapper{
  background: linear-gradient(180deg, var(--ps-navy-1) 0%, var(--ps-navy-2) 55%, var(--ps-navy-1) 100%) !important;
}

/* =========================================================
   HEADER (sticky)
   ========================================================= */
.Header__menuWrapper.ps-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  padding: 16px 0 !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(6,31,54,0.92), rgba(6,31,54,0.55)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.Header__menuBox#navBarContainer{
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  position: relative !important;
}

/* Logo */
.Header__logoPart{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.Header__logoimg{ display:inline-flex !important; align-items:center !important; }
.Header__logo{
  max-height: 46px !important;
  width: auto !important;
  display: block !important;
}

/* Nav */
.Header__navbtn{ display:flex !important; align-items:center !important; }
.Header__nav{
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Prevent clipping of dropdowns */
.Header__menuWrapper,
.Header__menuBox#navBarContainer,
.Header__navbtn,
.ps-nav,
.Header__nav{
  overflow: visible !important;
}

/* Menu items */
.Header__menuList,
.Header__menuList > a,
.ps-nav__link,
.ps-dropdown__toggle{
  color: rgba(255,255,255,0.92) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 10px 4px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.Header__menuList:hover,
.Header__menuList > a:hover,
.ps-nav__link:hover,
.ps-dropdown__toggle:hover{
  color: var(--ps-green) !important;
}

/* =========================================================
   SOLUTIONS DROPDOWN
   ========================================================= */
.ps-dropdown{ position: relative !important; }

.ps-dropdown__toggle{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.ps-dropdown__toggle::after{
  content: "▾";
  margin-left: 4px;
  font-size: 10px;
  opacity: .85;
  transform: translateY(-1px);
}
.ps-dropdown__menu{
  display: none !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  min-width: 200px !important;
  background: #ffffff !important;
  padding: 10px 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
  z-index: 999999 !important;
}
.ps-dropdown:hover .ps-dropdown__menu,
.ps-dropdown:focus-within .ps-dropdown__menu{
  display:block !important;
}
.ps-dropdown__menu li{ list-style:none !important; margin:0 !important; }
.ps-dropdown__menu a{
  display:block !important;
  padding: 10px 16px !important;
  color: #0b2a4a !important;
  text-decoration:none !important;
  white-space: nowrap !important;
}
.ps-dropdown__menu a:hover{
  background: #f3f7fb !important;
  color: #0a5ea8 !important;
}

/* =========================================================
   HERO (video + overlay + dots)
   ========================================================= */
.Header__titleSearchWrapper.ps-hero{
  position: relative !important;
  padding: 64px 0 40px !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

/* Single overlay system */
.Header__titleSearchWrapper.ps-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index: 1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg, rgba(6,31,54,0.55) 0%, rgba(10,59,102,0.58) 55%, rgba(6,31,54,0.82) 100%),
    radial-gradient(1100px 520px at 50% 30%, rgba(255,255,255,0.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.22)) !important;
}

/* Content container */
.Header__titleSearchBox.ps-hero__inner{
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Video layer */
.ps-heroVideo{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.ps-heroVideo__media{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.80 !important;
  filter: saturate(1.08) contrast(1.08);
}

/* Dots overlay */
.ps-heroFX{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;
}
.ps-heroFX__dots{
  position:absolute;
  inset:0;
  opacity: .16;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(700px 420px at 50% 40%, #000 10%, transparent 70%);
}

/* Title text */
.Header__welcomeTitle{
  color: #ffffff !important;
  font-size: 42px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 30px rgba(0,0,0,0.28);
}
.Header__welcomeDescription{
  color: rgba(255,255,255,0.78) !important;
  text-align: center !important;
  font-size: 15px !important;
  margin: 0 0 22px 0 !important;
  text-shadow: 0 6px 16px rgba(0,0,0,0.22);
}

/* Search box */
.Header__searchBox{
  background:#ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,0.30) !important;
}
#searchContainer input,
.Header__searchBox input{
  height: 46px !important;
  font-size: 14px !important;
}

/* CTA */
.ps-hero__cta{
  margin-top: 14px;
  display:flex;
  justify-content:center;
}

/* Remove wrapper white background (Zoho quirks) */
.ps-ctaTicket,
.ps-ctaTicket ul,
.ps-ctaTicket li,
.ps-ctaTicket > *{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Style Zoho ${AddTicket} */
.ps-ctaTicket a,
.ps-ctaTicket button,
.ps-ctaTicket .btn,
.ps-ctaTicket [role="button"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  background: var(--ps-green) !important;
  color: #0b2a4a !important;
  text-decoration:none !important;
  font-weight: 700 !important;
  border:0 !important;
  cursor:pointer !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.26);
}

/* Visual rename Add Ticket -> Create Ticket */
.ps-ctaTicket a,
.ps-ctaTicket button,
.ps-ctaTicket [role="button"]{
  font-size: 0 !important;
}
.ps-ctaTicket a::after,
.ps-ctaTicket button::after,
.ps-ctaTicket [role="button"]::after{
  content: "Create Ticket";
  font-size: 14px;
  font-weight: 700;
}

/* Need help now strip */
.ps-helpNow{
  margin-top: 14px;
  display:flex;
  justify-content:center;
}
.ps-helpNow__inner{
  max-width: 920px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 34px rgba(0,0,0,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
}
.ps-helpNow__title{
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}
.ps-helpNow__meta{
  color: rgba(255,255,255,0.75);
  font-size: 12.5px;
}
.ps-helpNow__link{
  color: var(--ps-green);
  text-decoration: none;
  font-weight: 700;
}
.ps-helpNow__link:hover{ text-decoration: underline; }
.ps-helpNow__sep{ opacity: .55; margin: 0 8px; }

/* =========================================================
   SOLUTION CARDS (centred)
   ========================================================= */
.ps-tiles{
  margin-top: 32px;
  padding-bottom: 26px;
}
.ps-tiles__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.ps-card{
  display:flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;

  text-decoration:none;
  border-radius: 14px;
  padding: 22px;
  color: var(--ps-text);
  overflow:hidden;
  min-height: 260px;
  position: relative;

  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  transition: transform 140ms ease, filter 140ms ease;
}
.ps-card:hover{
  transform: translateY(-6px);
  filter: brightness(1.08);
}
.ps-card__icon{
  height: 42px;
  width:auto;
  margin: 0 0 14px 0;
  opacity: .95;
}
.ps-card__logo{
  height: 34px;
  width:auto;
  margin: 0 0 16px 0;
  max-width: 100%;
  object-fit: contain;
}
.ps-card__body{
  width: 100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align:center;
  flex: 1 1 auto;
}
.ps-card__desc{
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ps-text-muted);
  max-width: 240px;
  margin: 0 auto;
}
.ps-card__cta{
  display:inline-block;
  margin-top: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ps-accent, var(--ps-green));
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.14);
}
.ps-card--protect{ --ps-accent: #9ad000; background: linear-gradient(160deg, rgba(0,90,140,0.55), rgba(0,0,0,0.45)); }
.ps-card--store  { --ps-accent: #9ad000; background: linear-gradient(160deg, rgba(70,90,100,0.55), rgba(0,0,0,0.45)); }
.ps-card--connect{ --ps-accent: #1fbad6; background: linear-gradient(160deg, rgba(0,120,140,0.55), rgba(0,0,0,0.45)); }
.ps-card--secure { --ps-accent: #6a63ff; background: linear-gradient(160deg, rgba(90,40,120,0.55), rgba(0,0,0,0.45)); }

/* =========================================================
   POPULAR ARTICLES
   ========================================================= */
.ps-popular{ padding: 22px 0 10px; }
.ps-popular__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.ps-popular__title{
  margin: 0 0 12px 0;
  color: rgba(255,255,255,0.88);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}
.ps-popular__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ps-popular__item{
  display:block;
  text-decoration:none;
  border-radius: 12px;
  padding: 14px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}
.ps-popular__itemTitle{
  display:block;
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 4px;
}
.ps-popular__itemMeta{
  display:block;
  color: rgba(255,255,255,0.70);
  font-size: 12.5px;
  line-height: 1.4;
}

/* =========================================================
   FOOTER CTA + WAVE + FOOTER
   (this restores your footer editing)
   ========================================================= */

/* Zoho full-bleed breakout */
.ps-footer-cta,
.ps-footer{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* CTA band */
.ps-footer-cta{
  position: relative !important;
  background: linear-gradient(180deg, var(--ps-green-cta-1) 0%, var(--ps-green-cta-2) 45%, var(--ps-green-cta-3) 100%);
  padding: 82px 0 64px; /* tightened */
  overflow: hidden !important;
}

/* Wave */
.ps-footer-cta::before{
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 120px !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  background-size: 100% 120px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,52 C220,22 420,18 600,28 C780,38 860,62 1020,62 C1200,62 1320,38 1440,46 L1440,0 L0,0 Z'/%3E%3C/svg%3E") !important;
}

/* CTA inner (stack title + button) */
.ps-footer-cta__inner{
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  position: relative;
  z-index: 1;

  display:flex !important;
  flex-direction: column !important;
  align-items:center !important;
  text-align:center !important;
  gap: 16px !important;
}
.ps-footer-cta__title{
  margin: 0 !important;
  color:#fff;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.2;
}
.ps-footer-cta__btn{
  display:inline-block !important;
  padding: 12px 26px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.14);
  color:#fff;
  text-decoration:none;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(4px);
}
.ps-footer-cta__btn:hover{ background: rgba(255,255,255,0.22); }

/* Footer base */
.ps-footer{
  background: var(--ps-footer-bg);
  color: var(--ps-text-muted);
}
.ps-footer__inner{
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 56px 24px 30px !important;
  display:grid !important;
  grid-template-columns: 1.2fr 1fr 0.9fr !important;
  gap: 30px !important;
  align-items:center !important;
}

/* Left column */
.ps-footer__col--left{
  display:flex !important;
  flex-direction: column !important;
  align-items:flex-start !important;
  gap: 14px !important;
  min-width: 240px;
}
.ps-footer__logo{ display:inline-flex; align-items:center; }
.ps-footer__logoimg{
  height: 46px !important;
  width:auto !important;
  display:block !important;
  object-fit: contain;
}
.ps-footer__address{
  display:block !important;
  margin:0 !important;
  font-style: normal !important;
  font-size: 13px;
  line-height: 1.55;
}

/* Mid column */
.ps-footer__col--mid{ text-align:center !important; }
.ps-footer__ccslogoWrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height: 90px !important;
}
.ps-footer__ccslogo{
  height: 78px !important;
  width:auto !important;
  max-width: 320px !important;
  display:block !important;
  object-fit: contain;
  opacity: .95;
}

/* Right column */
.ps-footer__col--right{
  display:flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items:flex-end !important;
  text-align:right !important;
}
.ps-footer__link{
  color: var(--ps-green);
  text-decoration:none;
  font-size: 13px;
}
.ps-footer__link:hover{ text-decoration: underline; }

.ps-footer__bottom{
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 16px 24px 22px;
  text-align:center;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px){
  .ps-tiles__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-popular__grid{ grid-template-columns: 1fr; }
  .ps-popular__title{ text-align: center; }
}

@media (max-width: 768px){
  .ps-topbar, .ps-status{ display:none; }
  .Header__menuBox#navBarContainer{ padding: 0 14px !important; }

  .Header__welcomeTitle{ font-size: 28px !important; }
  .Header__titleSearchWrapper.ps-hero{ padding: 42px 0 30px !important; }

  .ps-tiles__grid{ grid-template-columns: 1fr; }
  .ps-card{ min-height: 0; }
  .ps-card__desc{ max-width: 320px; }

  .ps-footer-cta__title{ font-size: 26px; }
  .ps-footer-cta{ padding: 64px 0 54px; }

  /* Touch: don't rely on hover only */
  .ps-dropdown:hover .ps-dropdown__menu{ display:none !important; }
  .ps-dropdown__menu{
    position: static !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
  }

  /* Optional: disable video on mobile for performance */
  .ps-heroVideo{ display:none !important; }
}

@media (max-width: 900px){
  .ps-footer__inner{
    grid-template-columns: 1fr !important;
    text-align:center !important;
  }
  .ps-footer__col--left,
  .ps-footer__col--right{
    align-items:center !important;
    text-align:center !important;
  }
}

/* =========================================================
   HERO FIX: correct layering + lighten overlays
   Paste at VERY END of CSS
   ========================================================= */

/* Make sure hero is a clean stacking context */
.Header__titleSearchWrapper.ps-hero{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important; /* prevents odd stacking with Zoho layers */
}

/* Video behind everything */
.ps-heroVideo{ z-index: 0 !important; }
.ps-heroVideo__media{
  opacity: 0.55 !important;     /* lighter video */
  filter: saturate(1.08) contrast(1.05) !important;
}

/* The big overlay MUST be behind content */
.Header__titleSearchWrapper.ps-hero::before{
  z-index: 1 !important;
  /* lighten the overlay so content pops like primesys site */
  background:
    linear-gradient(180deg, rgba(6,31,54,0.35) 0%, rgba(10,59,102,0.42) 55%, rgba(6,31,54,0.55) 100%),
    radial-gradient(1100px 520px at 50% 30%, rgba(255,255,255,0.16), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.16)) !important;
}

/* Dots ABOVE overlay but BELOW content */
.ps-heroFX{ z-index: 2 !important; }
.ps-heroFX__dots{ opacity: 0.12 !important; }

/* Force ALL hero content ABOVE overlay/FX */
.Header__titleSearchBox.ps-hero__inner{ z-index: 5 !important; }
.Header__titleDescription,
.Header__banneralt,
#bannerContainer,
#searchBtnContainer{
  position: relative !important;
  z-index: 6 !important;
}

/* Ensure title/description are not inheriting any opacity from Zoho wrappers */
.Header__welcomeTitle,
.Header__welcomeDescription{
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Bring the search + CTA forward visually */
.Header__searchBox{
  position: relative !important;
  z-index: 7 !important;
}

/* Make sure the CTA isn't sitting “behind” something */
.ps-hero__cta,
.ps-ctaTicket{
  position: relative !important;
  z-index: 8 !important;
}

/* Optional: slightly more “website-like” spacing */
.Header__titleSearchWrapper.ps-hero{
  padding: 72px 0 44px !important;
}
.ps-helpNow{ margin-top: 16px !important; }
.ps-tiles{ margin-top: 28px !important; }

/* =========================================================
   POPULAR ARTICLES: brighten + lift off background
   ========================================================= */

.ps-popular{
  padding: 26px 0 28px !important;
  position: relative !important;
  z-index: 6 !important;
}

/* Add a subtle “lift” behind the popular row */
.ps-popular::before{
  content:"";
  position:absolute;
  left: 0; right: 0;
  top: -10px; bottom: -10px;
  background:
    radial-gradient(900px 220px at 50% 20%, rgba(255,255,255,0.10), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.20));
  pointer-events:none;
  z-index: 0;
}

.ps-popular__inner{ position: relative !important; z-index: 1 !important; }

.ps-popular__title{
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

.ps-popular__item{
  background: rgba(0,0,0,0.14) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28) !important;
}

.ps-popular__itemTitle{ color: rgba(255,255,255,0.92) !important; }
.ps-popular__itemMeta{  color: rgba(255,255,255,0.75) !important; }

.ps-popular__item:hover{
  filter: brightness(1.08) !important;
}

/* =========================================================
   HERO FULL BLEED (background/video edge-to-edge)
   ========================================================= */

.Header__titleSearchWrapper.ps-hero{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Make sure nothing clips the video */
.Header__titleSearchWrapper.ps-hero,
.ps-heroVideo{
  overflow: hidden !important;
}

/* Keep content constrained as before */
.Header__titleSearchBox.ps-hero__inner{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

<video class="ps-heroVideo__media"
       autoplay
       muted
       loop
       playsinline
       webkit-playsinline
       preload="auto"
       poster="https://www.primesys.co.uk/wp-content/uploads/2024/04/PrimeSys-Logo-1.png">
  <source src="https://www.primesys.co.uk/wp-content/uploads/2024/04/1109511_1080p_Animation_4k_1280x720.mp4" type="video/mp4">
</video>

/* =========================================================
   FIX: Remove the empty top band (Zoho header background spacer)
   Paste at VERY END of CSS
   ========================================================= */

/* Zoho sometimes leaves a reserved-height background block above the real header */
.Header__headerBg,
.Header__bgColor {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  display: block !important; /* keep block but collapse height */
}

/* If Zoho applies spacing via the first header wrapper, kill it */
.Header__headerBg + .Header__menuWrapper {
  margin-top: 0 !important;
}

/* Safety: remove any default body/page top spacing */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Extra safety: some themes add a top spacer container */
body > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}