body {font-family: "Roboto", Helvetica, Arial, sans-serif;color: #212121;margin: 0;padding: 0;overflow-x: hidden;}

/*-----------------------------------------------------------*/
/* Navigation - custom UberMenu 
/*-----------------------------------------------------------*/

#header.rebrand {background-color: #212121 !important;transition: transform 0.2s ease-out; position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); border-bottom: 2px solid #212121;}

@media all and (min-width: 851px){
  #header.rebrand #navHeader.rebrand .ubermenu .menu-pricing a.ubermenu-target{background: #005bf8 !important;color: #fff !important;border-radius: 25px !important;padding: 10px 30px !important; position: relative; border: none; cursor: pointer; background-image: radial-gradient(circle, #00aeef 10%, #005bf8 10%) !important;background-position: center !important; background-repeat: no-repeat !important; background-size: 0% !important;transition: background-size 0.2s ease !important; z-index: 1;}
	#header.rebrand #navHeader.rebrand .ubermenu .menu-pricing a.ubermenu-target:hover,	#header.rebrand #navHeader.rebrand .ubermenu .menu-pricing a.ubermenu-target:active{ text-decoration: none;background-size: 1000% !important; transition: background-size 0.2s ease !important;}
}
@media all and (min-width: 1011px){
	#header .ubermenu .ubermenu-target{padding: 12px 20px;}
	#header .menu-pricing a.ubermenu-target{padding: 10px 20px !important;}
}
@media all and (min-width: 851px) and (max-width: 1010px){
	#header .ubermenu .ubermenu-target{padding: 10px 15px;}
	#header .ubermenu .menu-pricing a.ubermenu-target{padding: 9px 15px !important;}
	/*.zn-wrapper {padding-top: 114px;}
	.zn-wrapper {padding-top: 159px;}*/
}


#header.rebrand {background-color:#212121 !important;}		
#navHeader.rebrand {background-color:#212121 !important; display:table; width:100%;}
#header.rebrand #navHeader.rebrand .ubermenu-main{background-color: transparent;background: transparent;}
#header.rebrand #navHeader.rebrand .ubermenu .ubermenu-target {padding: 12px 20px;background: transparent;background-color: transparent;}
#header.rebrand #navHeader.rebrand .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {color: #fff;}
#header.rebrand #navHeader.rebrand .ubermenu.ubermenu-main .ubermenu-item-level-0:hover > .ubermenu-target, .ubermenu-main .ubermenu-item-level-0.ubermenu-active > .ubermenu-target{color: #00aeff;}
#header.rebrand #navHeader.rebrand .topNav a {color: #FFF;}
#header.rebrand #navHeader.rebrand .topNav a:hover {color: #00aeff; text-decoration: none;}
#header.rebrand #navHeader.rebrand .topNav a:active,
#header.rebrand #navHeader.rebrand .topNav a:focus{color: #00aeff;text-decoration: none;}
#header.rebrand #navHeader.rebrand .ubermenu-submenu{background-color: #F4F4F4;}
#header.rebrand #navHeader.rebrand .ubermenu-submenu .ubermenu-target-text {color: #666666;}
#header.rebrand #navHeader.rebrand .ubermenu-skin-grey-white .ubermenu-tabs-group, .ubermenu-skin-grey-white .ubermenu-tab > .ubermenu-target, .ubermenu-skin-grey-white .ubermenu-tab-content-panel{border-color: #212121;}
#header.rebrand #navHeader.rebrand .mmListHead {display: block;font-size: 15px;font-weight: bold;color: #005bf8;white-space: nowrap;padding: 18px 0 12px 5px;width: 95% !important;}

body#rebrand .zonarLogo {display:table-cell; width:210px; vertical-align:middle; text-align:right}
body#rebrand .gpstLogo {display:table-cell; width:210px; vertical-align:middle; text-align:right; margin-right: 4em;float: right;}
body#rebrand .navContainer {display:table-cell; vertical-align:middle; padding:0 60px 0 10px}
body#rebrand .zonarLogo img {width:150px; display:inline}
body#rebrand .gpstLogo img {width:170px; display:inline}
body#rebrand .gpstLogo img {float: right;}
body#rebrand .topNav {display:block; margin:5px 0px; text-align:right;  padding:10px 110px 0 0; height:32px; font-family: Arial, Geneva, sans-serif; font-size:14px; text-align:right; position:relative;transition: display 1s ease-out;}
body#rebrand .mainNav {display:block; text-align:right; padding-bottom:10px; padding-top:5px}
body#rebrand .topNav a {color:#777777; font-weight:normal; text-decoration:none; display:inline-block; margin-right:20px; transition:none}
body#rebrand .topNav a:hover {color:#00aeff; text-decoration:none; transition:none}
body#rebrand .topNav a:active {color:#00aeff; text-decoration:none}
body#rebrand .topNav a:focus {color:#00aeff; text-decoration:none}

/* Site Search  */
#header.rebrand #navHeader.rebrand .search-wrapper { position: relative; display: inline-block;}

/* SVG Icon Overlay */
#header.rebrand #navHeader.rebrand .search-wrapper .search-icon { position: absolute;top: 50%;right: 12px;transform: translateY(-50%);pointer-events: none;transition: stroke 0.3s ease;}

/* Input Styling */
#header.rebrand #navHeader.rebrand .search-wrapper input[type="text"] {width: 94px;padding: 6px 28px 6px 10px;font-size: 14px;color: #212121;background-color: transparent;background-image: none !important;border: 2px solid #666;border-radius: 4px;box-sizing: border-box;cursor: pointer;transition: width 0.3s ease-in-out, background-color 0.4s ease, border-color 0.2s ease;}
/* Focus Expand */
#header.rebrand #navHeader.rebrand .search-wrapper input[type="text"]:focus {width: 475px;background-color: #fff;border: 2px solid #666;padding-right: 40px;cursor: auto;}

/* Hover + Focus icon color */
#header.rebrand #navHeader.rebrand .search-wrapper:hover .search-icon svg, #header.rebrand #navHeader.rebrand .search-wrapper:focus-within .search-icon svg {stroke: #00aeff;}

/* Hover/Active input styling */
#header.rebrand #navHeader.rebrand .search-wrapper input[type="text"]:hover,
#header.rebrand #navHeader.rebrand .search-wrapper input[type="text"]:active { border-color: #666;}


/* Mobile Menu */
body#rebrand .ubermenu-responsive-toggle.ubermenu-responsive-toggle-main,
body#rebrand .ubermenu.ubermenu-mobile-modal .ubermenu-mobile-close-button {font-size: 35px; color: #FFF; float: right; width: auto; padding: 10px; border-radius: 9px; margin-right: 12px; background: none;}
body#rebrand .ubermenu-main.ubermenu-mobile-modal.ubermenu-mobile-view {background: #212121;}
body#rebrand .ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target{background: #666666;color: #fff;}
body#rebrand .ubermenu.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{background:#F4F4F4;color: #212121;}
body#rebrand .mmListHead {color: #005bf8;}

/** UberMenu Custom Tweaks - Mobile **/
@media screen and (max-width: 850px) {
  body#rebrand .ubermenu .ubermenu-mobile-header, body#rebrand .ubermenu .ubermenu-mobile-footer {display: block;text-align: center;color: inherit;padding: 10px 15px 10px 15px;border-bottom: 1px solid #212121;}
  body#rebrand .ubermenu .ubermenu-mobile-footer{border-bottom: 0px;}
  
  body#rebrand .mMenuHeader img {visibility: hidden; width: 0; height: 0;}

  body#rebrand .mMenuHeader::before {content: "";display: inline-block;width: 110px;height: 34px;background-image: url('/wp-content/uploads/2025/07/zonar-header-logo-rev.webp');background-size: contain;background-repeat: no-repeat;}
  body#rebrand .ubermenu.ubermenu-main .ubermenu-mobile-header > div {width: 100%;display: flex;justify-content: flex-start;align-items: center;border-bottom: 0px;padding-left: 0px;}
  body#rebrand .ubermenu .ubermenu-submenu .ubermenu-column {padding:0 0 0 0}
  body#rebrand .ubermenu-responsive-toggle {padding: 15px 5px;}
  body#rebrand .ubermenu-mobile-footer {display: none !important;}
  body#rebrand .ubermenu-sub-indicator-close {display: none !important;}


  body#rebrand .ubermenu.ubermenu-main .ubermenu-mobile-header img {padding: 15px 10px 16px 15px; width: 135px;}
  body#rebrand .ubermenu.ubermenu-main .ubermenu-mobile-header .button-mobile {color: #FFF;margin-left: auto;margin-right: 0;font-size: 35px;  font-weight: normal;}
  body#rebrand .ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target {border-bottom: 1px solid #212121; background: #666666; color: #fff;}
}


body#rebrand .headBorder {margin:0 0 20px 0; height:2px; background-color:#ccc}
body#rebrand .ubermenu.ubermenu-disable-submenu-scroll .ubermenu-active>.ubermenu-submenu.ubermenu-submenu-type-mega {max-height: none; /*margin-top: 12px;*/}
body#rebrand .ubermenu-skin-grey-white.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-submenu-drop {border-top: none; /*margin-top: 12px;*/}
body#rebrand .mega-subheader a {transition:none; color: #163f6b;}
body#rebrand .mega-subheader a:hover {transition:none; color: #163f6b;}
body#rebrand .mainNav a {transition:none}
body#rebrand .mainNav a:hover {transition:none}
body#rebrand .subContact {font-size:16px; padding:15px 0 15px 0; line-height:21px}
body#rebrand .allnew {display:inline-block; margin:0 0 0 5px; color:#ff0000; font-style:italic; font-weight:bold}

/*-----Simple Nav Modifications------*/
body#rebrand .simpleNav {display:block; text-align:right; padding-bottom:20px; padding-top:20px}
body#rebrand .simpleNav .phoneNumber {display:inline-block; display:inline-block;font-size:17px; color:#333; font-weight:bold; padding: 0 10px 0 0}
body#rebrand .simpleNav .quoteBtn {display:inline-block; padding-right:20px}
body#rebrand .simpleNav .quoteBtn a {background-color:#0081c6; border-radius:4px; color:#fff; font-size:13px; padding:10px 15px 10px 15px;}
body#rebrand .simpleNav .quoteBtn a:hover {background-color:#009fdf; text-decoration:none;}

@media screen and (max-width:1280px) {
	body#rebrand .navContainer {padding:0 20px 0 10px;}
	body#rebrand .zonarLogo, body#rebrand .gpstLogo {width:170px;}
}
@media screen and (max-width:970px) {
	/*--Main menu font size--*/
	body#rebrand .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {font-size: 13px !important;}
}
@media screen and (max-width:900px) {
	/*--Main menu font size--*/
	body#rebrand .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {font-size: 12px !important;}
}
@media screen and (max-width:850px) {
	body#rebrand .topNav {display:none}
	body#rebrand .navContainer {padding:0 0 0 10px;}
	body#rebrand .mainNav {padding-bottom:0; padding:5px 0 5px 0}
	body#rebrand .zonarLogo {width:125px;  padding:3px 0 3px 0}
	body#rebrand .gpstLogo {width:125px;  padding:3px 0 3px 0; margin-right: 1em; float: right;}
	body#rebrand .zonarLogo img {width:110px;}
	body#rebrand .gpstLogo img  {width:140px;}
	body#rebrand .headBorder {margin:0 0 20px 0;}
	body#rebrand .mainNav {text-align:right;}
	body#rebrand .ubermenu.ubermenu-disable-submenu-scroll .ubermenu-active>.ubermenu-submenu.ubermenu-submenu-type-mega {max-height: none; margin-top: 0;}
	
	/*--Main menu font size--*/
	body#rebrand .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {font-size: 18px !important;}
	/*--submenu font size--*/
	body#rebrand .ubermenu-main .ubermenu-item-normal > .ubermenu-target {font-size: 17px !important;}
	
	body#rebrand .mmListHead {font-size:17px;padding:18px 0 12px 5px; width:100% !important;}
	body#rebrand .mmFeaturedItem {width:100% !important; border-right:0 solid #ccc !important; }
}
@media screen and (max-width:800px) {
	body#rebrand .mmRowPadding {border:0px solid #6cc24a !important; padding:0 15px 0 15px !important;}
	body#rebrand .fnc-container a {height:auto }
}

@media screen and (max-width:550px) {
	/*-----Simple Nav Modifications------*/
	body#rebrand .simpleNav .phoneNumber {display:none;}
}

/* Testimonial Slider */
body#rebrand .quote-slider .slick-slide { opacity: 0; pointer-events: none; transition: opacity 0.2s ease;}
body#rebrand .quote-slider .slick-slide.slick-active {opacity: 1; pointer-events: auto;}

/* Solution Nav Hover State */

body#rebrand .colorNavBar div:nth-of-type(1) a {background-color: #00aeff;}
body#rebrand .colorNavBar div:nth-of-type(1) a:hover {background-color: #0097cc;}
body#rebrand .colorNavBar div:nth-of-type(2) a {background-color: #ffd500;}
body#rebrand .colorNavBar div:nth-of-type(2) a:hover {background-color: #cca500;}
body#rebrand .colorNavBar div:nth-of-type(3) a {background-color: #a000a8;}
body#rebrand .colorNavBar div:nth-of-type(3) a:hover {background-color: #6a0072;}
body#rebrand .colorNavBar div:nth-of-type(4) a {background-color: #005bf8;}
body#rebrand .colorNavBar div:nth-of-type(4) a:hover {background-color: #0050c4;}
body#rebrand .colorNavBar div:nth-of-type(5) a {background-color: #66ae00;}
body#rebrand .colorNavBar div:nth-of-type(5) a:hover {background-color: #4b7a00;}
body#rebrand .colorNavBar div:nth-of-type(1) a:hover + span,.colorNavBar div:nth-of-type(2) a:hover + span,.colorNavBar div:nth-of-type(3) a:hover + span,.colorNavBar div:nth-of-type(4) a:hover + span,.colorNavBar div:nth-of-type(5) a:hover + span {color: #fff;}

/* Resources Hover State */

body#rebrand a.whiteBtnSm[href="/resources/articles/"]:hover {background-color: #00aeef;}
body#rebrand a.whiteBtnSm[href="/resources/whitepapers/"]:hover {background-color: #005bf8;}
body#rebrand a.whiteBtnSm[href="/resources/webinars/"]:hover {background-color: #8400ff;}
body#rebrand a.whiteBtnSm[href="/resources/infographics/"]:hover {background-color: #fcd532;color:#212121;}
body#rebrand a.whiteBtnSm[href="/news-events/press-releases/"]:hover {background-color: #77ad23;}
body#rebrand a.whiteBtnSm[href="/resources/qa/"]:hover {background-color: #a000a8;}

/*---- Hero and .blueActionBtn Action Blue Button ----*/
body#rebrand .hhContent-btn {background-color: #005bf8; color: #fff; text-decoration: none; font-size: 25px; padding: 15px 40px 15px 40px; border-radius: 50px; transition: background-size 0.4s ease !important; background-image: radial-gradient(circle, #00aeef 10%, #005bf8 1%)!important; background-position: center; background-repeat: no-repeat; background-size: 0%; z-index: 1;}
body#rebrand .blueActionBtn {border-radius: 25px; color: #fff; background-color: #005bf8; padding: 10px 30px; font-size: 20px; position: relative; border: none; cursor: pointer; background-image: radial-gradient(circle, #00aeef 10%, #005bf8 10%);background-position: center; background-repeat: no-repeat; background-size: 0%;transition: background-size 0.2s ease; z-index: 1;}
body#rebrand .blueActionBtn:hover {background-size: 1000%; transition: background-size 0.2s ease !important;text-decoration: none; color: #fff;}
body#rebrand .hhContent-btn:hover, .hhContent-btn:active, .hhContent-btn:focus {background-size: 1000%; transition: background-size 0.3s ease !important;text-decoration: none; color: #fff;}
body#rebrand .blueActionBtn:active, .blueActionBtn:focus {background-size: 1000%; transition: background-size 0.2s ease;text-decoration: none; color: #fff;}  

/*---- Co-Brand Landing Page ----*/
body#rebrand .logoWrap { width: 100%; padding: 20px 0; float: left; }
body#rebrand .gpstLogo img { float: right; padding-top:6px }


@media screen and (min-width: 851px) {
	.zn-wrapper.lp-cobrand { padding-top: 83px; }
}

@media screen and (max-width: 850px) {
	.zn-wrapper.lp-cobrand { padding-top: 88px; }
}


/*---- Announcment Bar ----*/
.announce{width:100%;background:#0b3a6a;color:#fff;font:500 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;z-index:1000}
.announce-inner{position:relative;max-width:1500px;margin:0 auto; height:45px; line-height:45px ;overflow:hidden; text-align:center}
.announce-mask::before,.announce-mask::after{content:"";position:absolute;top:0;width:40px;height:100%;pointer-events:none;z-index:1}
.announce-mask::before{left:0;background:linear-gradient(to right,rgba(11,58,106,1),rgba(11,58,106,0))}
.announce-mask::after{right:0;background:linear-gradient(to left,rgba(11,58,106,1),rgba(11,58,106,0))}
.announce-viewport{position:relative;overflow:hidden;white-space:nowrap}
/* Track holds two copies, with a BIG gap so the second begins off-screen */
.announce-track{display:inline-flex;gap:70vw;will-change:transform;animation:announce-loop 25s linear infinite}
.announce-text{display:inline-block;padding-inline:8px;color:#fff}
.announce-inner:hover .announce-track{animation-play-state:paused}

/* Move half the track width + half the gap for a perfect seamless loop */
@keyframes announce-loop{0%{transform:translateX(0)}100%{transform:translateX(calc(-50% - 50vw))}}
@media (prefers-reduced-motion: reduce){
.announce-track{animation:none;transform:none}
.announce-mask::before,.announce-mask::after{display:none}
}

@media (max-width:850px){.announce{display:none}}