/* PortWarden brand overrides on top of the PortWarden template */
:root{
  --pw-accent: #2DE2E6;
}

/* Hide template buy-now button if present */
#buy-now{display:none !important;}

/* Slightly reduce topbar noise on mobile */
@media (max-width: 767px){
  #topbar{display:none;}
}

/* Make CTA buttons slightly more “SaaS” */
.btn-main.pw-secondary{background: transparent !important; border: 1px solid rgba(255,255,255,.25) !important;}

/* Keep content readable */
.pw-page p, .pw-page li{max-width: 70ch;}
:root{ --logo-width: 180px; }
#logo{ height:auto !important; }
#logo img.logo-main,
#logo img.logo-mobile{
  height: 44px !important;
  width: auto !important;
  max-width: var(--logo-width) !important;
  object-fit: contain;
  display: block;
  filter: none !important;
}
header.smaller #logo img.logo-main,
header.smaller #logo img.logo-mobile{
  height: 38px !important;
}
.logo-footer{
  height: 44px !important;
  width: auto !important;
  max-width: var(--logo-width) !important;
  object-fit: contain;
  filter: none !important;
}
:root{ --logo-width: 180px !important; }

#logo{ height:auto !important; line-height: 1 !important; }
#logo a{ display:flex; align-items:center; }

#logo img.logo-main,
#logo img.logo-mobile{
  height: 42px !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  display: block !important;
  filter: none !important;
}

header.smaller #logo img.logo-main,
header.smaller #logo img.logo-mobile{
  height: 36px !important;
  max-height: 36px !important;
}

.logo-footer{
  height: 42px !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  filter: none !important;
}
:root{ --logo-width: 180px !important; }

#logo{ height:auto !important; line-height: 1 !important; }
#logo a{ display:flex; align-items:center; }

#logo img.logo-main,
#logo img.logo-mobile{
  height: 42px !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  display: block !important;
  filter: none !important;
}

header.smaller #logo img.logo-main,
header.smaller #logo img.logo-mobile{
  height: 36px !important;
  max-height: 36px !important;
}

.logo-footer{
  height: 42px !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  filter: none !important;
}
:root{ --pw-logo-box: 52px; --pw-logo-radius: 14px; }

#logo{ height:auto !important; line-height: 1 !important; }
#logo a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  background:#fff;
  width: var(--pw-logo-box);
  height: var(--pw-logo-box);
  padding: 8px;
  border-radius: var(--pw-logo-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

#logo img.logo-main,
#logo img.logo-mobile{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
}

/* Only show ONE logo image (template has two for responsive). */
#logo img.logo-mobile{ display:none !important; }
@media (max-width: 767px){
  #logo img.logo-main{ display:none !important; }
  #logo img.logo-mobile{ display:block !important; }
}

/* Footer: keep it simple, same boxed mark */
.logo-footer{
  width: var(--pw-logo-box) !important;
  height: var(--pw-logo-box) !important;
  object-fit: contain !important;
  filter: none !important;
}
.logo-footer{
  width: var(--pw-logo-box) !important;
  height: var(--pw-logo-box) !important;
  background:#fff;
  padding: 8px;
  border-radius: var(--pw-logo-radius);
  object-fit: contain !important;
  filter: none !important;
}
  border-radius: var(--pw-logo-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

#logo img.logo-main{
  display:block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
}

/* Footer logo boxed too */
.logo-footer{
  width: var(--pw-logo-box) !important;
  height: var(--pw-logo-box) !important;
  background:#fff;
  padding: 2px;
  border-radius: var(--pw-logo-radius);
  object-fit: contain !important;
  filter: none !important;
}
  border-radius: var(--pw-logo-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

#logo img.logo-main{
  display:block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
}

/* Footer logo boxed too */
.logo-footer{
  width: var(--pw-logo-box) !important;
  height: var(--pw-logo-box) !important;
  background:#fff;
  padding: 2px;
  border-radius: var(--pw-logo-radius);
  object-fit: contain !important;
  filter: none !important;
}

/* ---- Logo + brand text (header) ---- */
:root{ --pw-logo-box: 52px; --pw-logo-radius: 14px; }

#logo{ height:auto !important; line-height:1 !important; }
#logo a.pw-logo-link{
  display:flex !important;
  align-items:center;
  gap: 12px;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#logo .pw-logo-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  width: var(--pw-logo-box);
  height: var(--pw-logo-box);
  padding: 2px;
  border-radius: var(--pw-logo-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

#logo img.logo-main{
  display:block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
}

#logo .pw-brand-text{
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .2px;
  color: #fff;
  white-space: nowrap;
}

/* When header turns scroll-light (white background), make text dark */
header.smaller.scroll-light #logo .pw-brand-text{ color: #111; }

/* Footer logo boxed too */
.logo-footer{
  width: var(--pw-logo-box) !important;
  height: var(--pw-logo-box) !important;
  background:#fff;
  padding: 2px;
  border-radius: var(--pw-logo-radius);
  object-fit: contain !important;
  filter: none !important;
}

/* ---- Brand text size override ---- */
#logo .pw-brand-text{ font-size: 27px !important; line-height: 1.05; }

/* ---- Header background: match hero subtitle blue ---- */
:root{ --pw-hero-blue: rgb(74, 129, 211); }

/* Desktop + mobile */
header,
header.header-mobile,
header.smaller,
header.smaller.scroll-light,
header.smaller.scroll-dark,
header.header-light,
header.header-solid{
  background: var(--pw-hero-blue) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep header text readable on blue */
header #mainmenu>li>a,
header #mainmenu li a,
header #mainmenu li.has-child:after,
header .topbar-widget a,
header .social-icons i,
header #menu-btn{
  color: #fff !important;
}

/* ---- Header background: match hero subtitle blue ---- */
:root{ --pw-hero-blue: rgb(74, 129, 211); }

/* Desktop + mobile */
header,
header.header-mobile,
header.smaller,
header.smaller.scroll-light,
header.smaller.scroll-dark,
header.header-light,
header.header-solid{
  background: var(--pw-hero-blue) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep header text readable on blue */
header #mainmenu>li>a,
header #mainmenu li a,
header #mainmenu li.has-child:after,
header .topbar-widget a,
header .social-icons i,
header #menu-btn{
  color: #fff !important;
}

/* ---- Header background: match "Need visibility..." section ---- */
:root{ --pw-header-bg: rgb(34, 46, 102); }

header,
header.header-mobile,
header.smaller,
header.smaller.scroll-light,
header.smaller.scroll-dark,
header.header-light,
header.header-solid{
  background: var(--pw-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- Header background: match "Need visibility..." section ---- */
:root{ --pw-header-bg: rgb(34, 46, 102); }

header,
header.header-mobile,
header.smaller,
header.smaller.scroll-light,
header.smaller.scroll-dark,
header.header-light,
header.header-solid{
  background: var(--pw-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- Home hero carousel: hide prev/next brackets ---- */
.swiper-button-prev,
.swiper-button-next{
  display:none !important;
}