/* Exact approved header artwork, cropped only to remove screenshot whitespace. */
.topbar.sunshine-perfect-header{
  position:relative !important;
  top:auto !important;
  z-index:950 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  line-height:0 !important;

  border:0 !important;
  border-bottom:0 !important;
  outline:0 !important;
  background-color:transparent !important;
}
.topbar.sunshine-perfect-header .perfect-header-desktop{
  position:relative !important;
  width:100% !important;
  aspect-ratio:2172 / 242 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:url('images/sunshine-perfect-header-v3.png') center center / 100% 100% no-repeat !important;
  border-radius:0 !important;
  image-rendering:auto !important;
  overflow:visible !important;
}
.topbar.sunshine-perfect-header .perfect-hit,
.topbar.sunshine-perfect-header .nav-parent{
  position:absolute !important;
  z-index:5 !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:transparent !important;
  background:transparent !important;
  border:0 !important;
  text-decoration:none !important;
  font-size:0 !important;
  line-height:0 !important;
  cursor:pointer !important;
}
/* Hotspots aligned with the approved header artwork. */
.topbar.sunshine-perfect-header .perfect-hit-logo{left:4.2%;top:0%;width:13.5%;height:96%;}
.topbar.sunshine-perfect-header .perfect-hit-home{left:26.0%;top:36%;width:8.5%;height:31%;}
.topbar.sunshine-perfect-header .perfect-hit-services{left:35.4%;top:36%;width:11.2%;height:31%;position:absolute !important;z-index:7 !important;}
.topbar.sunshine-perfect-header .perfect-hit-gallery{left:47.3%;top:36%;width:9.5%;height:31%;}
.topbar.sunshine-perfect-header .perfect-hit-contact{left:57.5%;top:36%;width:9.8%;height:31%;}
.topbar.sunshine-perfect-header .perfect-hit-phone{left:70.8%;top:18%;width:14.0%;height:40%;}

.topbar.sunshine-perfect-header .perfect-hit-services{
  cursor:pointer !important;
}

.topbar.sunshine-perfect-header .perfect-hit-services > .nav-parent{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

/* Functional white Services dropdown. It begins directly under the
   hover area so the cursor can move into it without the menu closing. */
.topbar.sunshine-perfect-header .nav-dropdown-menu{
  position:absolute !important;
  top:calc(100% - 2px) !important;
  left:50% !important;
  z-index:9999 !important;
  display:block !important;
  min-width:240px !important;
  margin:0 !important;
  padding:9px !important;
  transform:translateX(-50%) !important;
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  border:1px solid rgba(13,47,87,.14) !important;
  border-radius:11px !important;
  box-shadow:0 16px 34px rgba(12,47,72,.18) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .12s ease !important;
}

.topbar.sunshine-perfect-header .perfect-hit-services:hover > .nav-dropdown-menu,
.topbar.sunshine-perfect-header .perfect-hit-services:focus-within > .nav-dropdown-menu,
.topbar.sunshine-perfect-header .nav-dropdown-menu:hover{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.topbar.sunshine-perfect-header .nav-dropdown-menu a,
.topbar.sunshine-perfect-header .nav-dropdown-menu a:link,
.topbar.sunshine-perfect-header .nav-dropdown-menu a:visited{
  display:block !important;
  padding:10px 12px !important;
  color:#101c31 !important;
  background:transparent !important;
  background-image:none !important;
  border-radius:8px !important;
  font-size:.92rem !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}

.topbar.sunshine-perfect-header .nav-dropdown-menu a:hover,
.topbar.sunshine-perfect-header .nav-dropdown-menu a:focus{
  color:#0877bb !important;
  background:#eef8fd !important;
  background-image:none !important;
}

/* Live counter number overlays only the number printed in the reference artwork. */
 .topbar.sunshine-perfect-header .perfect-live-counter{
  position:absolute !important;
  z-index:20 !important;

  /* Center the live number in the lower half of the Site Visits card. */
  left:91.85% !important;
  top:60.5% !important;
  width:5.0% !important;
  height:24% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;

  color:#102a63 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:clamp(14px,1.25vw,27px) !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-shadow:none !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}


.topbar.sunshine-perfect-header .perfect-header-mobile{display:none !important;}

@media(max-width:980px){
  .topbar.sunshine-perfect-header .perfect-header-desktop{display:none !important;}
  .topbar.sunshine-perfect-header .perfect-header-mobile{display:block !important;}
  .topbar.sunshine-perfect-header .mobile-bar{
    min-height:82px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:7px 16px !important;
    background:linear-gradient(90deg,#dff6fb 0%,#edfafd 48%,#0aa1a9 100%) !important;
  }
  .topbar.sunshine-perfect-header .mobile-brand img{
    display:block !important;
    width:115px !important;
    height:68px !important;
    object-fit:contain !important;
  }
  .topbar.sunshine-perfect-header .mobile-toggle{
    width:44px !important;
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid rgba(9,68,96,.20) !important;
    border-radius:10px !important;
    background:transparent !important;
    color:#0b5278 !important;
    font-size:23px !important;
    box-shadow:0 3px 9px rgba(10,48,71,.10) !important;
  }
  .topbar.sunshine-perfect-header .mobile-menu{
    width:100% !important;
    padding:10px 20px 22px !important;
    background:#0b5278 !important;
    box-shadow:0 14px 24px rgba(0,0,0,.15) !important;
  }
  .topbar.sunshine-perfect-header .mobile-menu a,
  .topbar.sunshine-perfect-header .mobile-menu strong{
    display:block !important;
    padding:9px 0 !important;
    color:#fff !important;
    text-decoration:none !important;
  }
}