/* Put this in assets/css/custom.css and load it last */
.bg-orange { background-color: #f25a29 !important; }      /* PureSecure orange */
.bg-teal { background-color: #27becf !important; } /* PureSecure teal */
.bg-gray { background-color: #323a47 !important; } /* PureSecure gray */
.bg-gold { background-color: #ffd700 !important; } /* Primary gold */

/* Make all icon-font glyphs take the element's text color */
[class^="icon-"]::before,
[class*=" icon-"]::before {
  color: currentColor !important;
}
.border-ps-teal { border: 2px solid #27becf !important; }
.border-ps-orange { border: 2px solid #f25a29 !important; }
.ps-badge{ line-height:1.05; }
.ps-badge-line1{ display:block; color:#323a47; font-weight:700; font-size:clamp(12px,1.6vw,14px); }
.ps-badge-line2{ display:block; color:#27becf; font-weight:800; font-size:clamp(13px,1.8vw,16px); }

@media (min-width: 992px){ /* tighten for col-lg-2 */
  .ps-badge-line1{ font-size:12px; }
  .ps-badge-line2{ font-size:13px; }
}


/* Your brand colors (examples) */
.color-ps-gray   { color: #323a47 !important; }
.color-ps-orange { color: #f25a29 !important; }
.color-ps-teal   { color: #27becf !important; }

/* PureSecure button — teal -> orange hover, gray border */
.btn-ps,
a.btn-ps,
button.btn-ps {
  --ps-teal:   #27becf;
  --ps-orange: #f25a29;
  --ps-gray:   #323a47;

  background-color: var(--ps-teal) !important;
  color: #fff !important;
  border: 2px solid var(--ps-gray) !important;

  transition: background-color .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .2s ease;
}

/* Hover / focus */
.btn-ps:hover,
.btn-ps:focus,
.btn-ps:focus-visible {
  background-color: var(--ps-orange) !important;
  color: #fff !important;
  border-color: var(--ps-gray) !important;
  box-shadow: 0 0 0 .2rem rgba(39,190,207,.25); /* subtle focus ring */
}

/* Active press */
.btn-ps:active {
  background-color: #d94e1f !important; /* slightly darker orange */
  border-color: var(--ps-gray) !important;
}

/* Disabled */
.btn-ps:disabled,
.btn-ps.disabled {
  opacity: .6;
  pointer-events: none;
}

/* Replace all template blues with your gray */
.bg-blue,
.bg-dark-blue {
  background-color: #323a47 !important;
  background-image: none !important;   /* cancel gradients/images if any */
}

/* If the theme uses text helpers too */
.color-blue { color: #323a47 !important; }

/* Common overlay patterns used by these themes */
.bg-blue::before,
.bg-dark-blue::before,
.bg-blue .dtr-overlay,
.bg-dark-blue .dtr-overlay,
.dtr-overlay-bg::before {
  background: #323a47 !important;   /* solid tint */
  opacity: 1 !important;
}

/* If the section has a background image class, cancel it */
.section-bg-img1,
.section-bg-img2 {
  background-image: none !important;
  background-color: #323a47 !important;
}

/* ===== Brand palette (reuse) ===== */
:root {
  --ps-gray:   #323a47;
  --ps-orange: #f25a29;
  --ps-teal:   #27becf;
}

/* ===== Sticky tabs (the “dtr-sticky-tabs-nav” bar) ===== */
.dtr-sticky-tabs-nav .nav-link {
  color: var(--ps-gray) !important;
  border-color: var(--ps-gray) !important;
}
.dtr-sticky-tabs-nav .nav-link:hover,
.dtr-sticky-tabs-nav .nav-link:focus {
  color: var(--ps-orange) !important;
  border-color: var(--ps-orange) !important;
}
.dtr-sticky-tabs-nav .nav-link.active,
.dtr-sticky-tabs-nav .nav-link.active:focus {
  background-color: var(--ps-gray) !important;
  color: #fff !important;
  border-color: var(--ps-gray) !important;
}

/* ===== About / Testimonial / CTA section blues & overlays ===== */
/* If these sections had bg-blue or an overlay, force your gray */
.bg-blue, .bg-dark-blue,
.bg-blue::before, .bg-dark-blue::before,
.bg-blue .dtr-overlay, .bg-dark-blue .dtr-overlay,
.dtr-overlay-bg::before {
  background: var(--ps-gray) !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* If the template uses specific section classes */
.dtr-about, .about-section,
.dtr-testimonial, .testimonial-section,
.dtr-cta, .cta-section {
  background-color: var(--ps-gray) !important;
  background-image: none !important;
}

/* ===== Slider pagination/dots (covering the 3 usual plugins) ===== */

/* Slick */
.slick-dots li button:before { color: var(--ps-gray) !important; }
.slick-dots li.slick-active button:before { color: var(--ps-orange) !important; }
/* If your dots are solid circles instead of :before glyphs */
.slick-dots li button {
  background-color: var(--ps-gray) !important;
  border: 2px solid var(--ps-gray) !important;
}
.slick-dots li.slick-active button {
  background-color: var(--ps-orange) !important;
  border-color: var(--ps-orange) !important;
}

/* Swiper */
.swiper-pagination-bullet { background: var(--ps-gray) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: var(--ps-orange) !important; }

/* Owl Carousel */
.owl-theme .owl-dots .owl-dot span {
  background: var(--ps-gray) !important;
  border: 2px solid var(--ps-gray) !important;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--ps-orange) !important;
  border-color: var(--ps-orange) !important;
}

/* Slider arrows (if present) */
.slick-prev, .slick-next,
.swiper-button-prev, .swiper-button-next,
.owl-prev, .owl-next {
  color: var(--ps-gray) !important;
  border-color: var(--ps-gray) !important;
}
.slick-prev:hover, .slick-next:hover,
.swiper-button-prev:hover, .swiper-button-next:hover,
.owl-prev:hover, .owl-next:hover {
  color: var(--ps-orange) !important;
  border-color: var(--ps-orange) !important;
}
.dtr-testimonial-icon::before { background-color: #f25a29; color: #fff; } /* Testimonial icon background color */
.dtr-testimonial-icon::before { background-color: #27becf; color: #fff; } /* Testimonial icon background color */

/* Testimonial overlay: replace theme blue with your gray */
.dtr-overlay.dtr-overlay-blue,
.dtr-overlay.dtr-overlay-blue::before {
  background: #323a47 !important;
  background-color: #323a47 !important;
  background-image: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* If the testimonial block has a specific wrapper */
.testimonial-section .dtr-overlay::before,
.dtr-testimonial .dtr-overlay::before {
  background: #323a47 !important;
  opacity: 40 !important;
}
.dtr-sticky-tabs-nav { background-color: #323a47 !important; } /* bar bg if needed */

.dtr-sticky-tabs-nav .nav-link{
  color: #fff !important;
  border-color: #323a47 !important;
}
.dtr-sticky-tabs-nav .nav-link:hover,
.dtr-sticky-tabs-nav .nav-link:focus{
  color: #f25a29 !important;           /* orange on hover */
  border-color: #f25a29 !important;
}
.dtr-sticky-tabs-nav .nav-link.active{
  background-color: #f25a29 !important; /* active = orange pill */
  color: #fff !important;
  border-color: #f25a29 !important;
}
/* Dots */
.slick-dots li button:before { color: #323a47 !important; opacity: 1 !important; }
.slick-dots li.slick-active button:before { color: #f25a29 !important; }

/* If your theme uses solid dot buttons instead of the :before glyph */
.slick-dots li button{
  background-color: #323a47 !important;
  border: 2px solid #323a47 !important;
}
.slick-dots li.slick-active button{
  background-color: #f25a29 !important;
  border-color: #f25a29 !important;
}

/* Arrows (if present) */
.slick-prev, .slick-next{
  color: #323a47 !important;
  border-color: #323a47 !important;
}
.slick-prev:hover, .slick-next:hover{
  color: #f25a29 !important;
  border-color: #f25a29 !important;
}

/* Rounded image wrapper sometimes paints a bg/overlay */
.dtr-img-slider-1col.dtr-rounded-img,
.dtr-rounded-img,
.dtr-rounded-img::before{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important; /* optional if you see a blue glow */
}

/* ===== PureSecure slider arrows: teal default, orange hover, gray border ===== */
:root{
  --ps-teal:   #27becf;
  --ps-orange: #f25a29;
  --ps-gray:   #323a47;
}

/* Size/shape the arrow buttons */
.dtr-slick-slider .slick-prev,
.dtr-slick-slider .slick-next{
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--ps-teal) !important;
  border: 2px solid var(--ps-gray) !important;
  box-shadow: none;
  z-index: 2;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  background-image: none !important;   /* stomp theme sprites if any */
}

/* Arrow glyph color (Slick uses :before for the icon) */
.dtr-slick-slider .slick-prev:before,
.dtr-slick-slider .slick-next:before{
  color: #fff !important;
  opacity: 1 !important;
  font-size: 18px;                     /* bump if you want bigger chevrons */
  line-height: 44px;
}

/* Hover state = orange */
.dtr-slick-slider .slick-prev:hover,
.dtr-slick-slider .slick-next:hover{
  background: var(--ps-orange) !important;
  border-color: var(--ps-gray) !important;
}

/* Disabled arrows (at ends) */
.dtr-slick-slider .slick-prev.slick-disabled,
.dtr-slick-slider .slick-next.slick-disabled{
  opacity: .4; pointer-events: none;
}

/* Optional: move arrows a bit away from the image edges */
.dtr-slick-slider .slick-prev{ left: -12px; }
.dtr-slick-slider .slick-next{ right: -12px; }

/* If dots under the slider are still blue, keep them on-brand too */
.dtr-slick-slider .slick-dots li button:before{ color: var(--ps-gray) !important; opacity: 1 !important; }
.dtr-slick-slider .slick-dots li.slick-active button:before{ color: var(--ps-orange) !important; }

/* ===== Author image styling ===== */
.dtr-author-img{
  width:60px; height:60px;          /* you already set these in HTML */
  object-fit: cover;                 /* fill the square */
  object-position: 115% 50%;          /* push focus slightly right */
  border-radius: 50%;                /* if you want a circle */
}
/* PureSecure FAQ (no JS, fits any container) */
:root{
  --ps-teal:#27becf;
  --ps-orange:#f25a29;
  --ps-gray:#323a47;
  --ps-panel:#2b323d;   /* collapsed card */
  --ps-panel-open:#232a33; /* opened body */
  --ps-text:#e6eef3;
}

.ps-faq details{
  background:var(--ps-panel);
  color:var(--ps-text);
  border-left:4px solid var(--ps-teal);
  border-radius:12px;
  margin:14px 0;
  overflow:hidden;
  transition:border-color .2s ease, background .2s ease;
}

.ps-faq details[open]{
  border-left-color:var(--ps-orange);
  background:var(--ps-panel-open);
}

.ps-faq summary{
  cursor:pointer;
  list-style:none;
  padding:14px 18px;
  font-weight:700;
  font-size:clamp(15px,1.9vw,18px);
  display:flex; align-items:center; gap:10px;
}

.ps-faq summary::-webkit-details-marker{ display:none; }

/* Chevron */
.ps-faq summary::after{
  content:"";
  margin-left:auto;
  width:10px; height:10px;
  border-right:2px solid var(--ps-teal);
  border-bottom:2px solid var(--ps-teal);
  transform:rotate(-45deg);
  transition:transform .2s ease, border-color .2s ease;
}
.ps-faq details[open] summary::after{
  transform:rotate(45deg);
  border-color:var(--ps-orange);
}

.ps-faq .ps-faq div{
  padding:0 18px 16px 18px;
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.5;
  color:#d9e3ea;
}

/* Tighten spacing on very small screens */
@media (max-width: 480px){
  .ps-faq summary{ padding:12px 14px; }
  .ps-faq .ps-faq div{ padding:0 14px 14px 14px; }
}

/* kill the black border but keep spacing (1px transparent) */
.dtr-btn,
.dtr-btn-flat,
.dtr-text-btn,
input[type="submit"],
input[type="reset"]{
  border: 1px solid transparent !important;
}

/* also kill any hover/focus border or glow the theme adds */
.dtr-btn:hover,
.dtr-btn:focus,
.dtr-btn:active,
.dtr-btn-flat:hover,
.dtr-btn-flat:focus,
.dtr-text-btn:hover,
.dtr-text-btn:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus{
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 1) Kill real borders on all button types + states */
.dtr-btn,
.dtr-btn-flat,
.dtr-text-btn,
input[type="submit"],
input[type="reset"]{
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;   /* Safari forms */
}

/* 2) Kill hover/active/focus artifacts */
.dtr-btn:hover,
.dtr-btn:active,
.dtr-btn:focus,
.dtr-btn-flat:hover,
.dtr-btn-flat:active,
.dtr-btn-flat:focus,
.dtr-text-btn:hover,
.dtr-text-btn:active,
.dtr-text-btn:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="reset"]:focus{
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3) Some themes draw a “border” with ::before/::after */
.dtr-btn::before,
.dtr-btn::after,
.dtr-btn-flat::before,
.dtr-btn-flat::after,
.dtr-text-btn::before,
.dtr-text-btn::after,
input[type="submit"]::before,
input[type="submit"]::after,
input[type="reset"]::before,
input[type="reset"]::after{
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 4) If they used an inset box-shadow to fake a border */
.dtr-btn,
.dtr-btn-flat,
.dtr-text-btn{
  box-shadow: none !important;
}

/* Optional: keep an accessible focus style without a border */
.dtr-btn:focus-visible,
.dtr-btn-flat:focus-visible,
.dtr-text-btn:focus-visible{
  outline: 2px solid #27becf;   /* or remove if you truly want nothing */
  outline-offset: 2px;
}

/* Nuke borders on every DTR button variant + states */
a.dtr-btn, .dtr-btn, .dtr-btn.dtr-btn,
.dtr-btn-flat, .dtr-text-btn,
button.dtr-btn,
input[type="submit"], input[type="reset"]{
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important; /* kills gradient “borders” */
}

/* States */
a.dtr-btn:hover, a.dtr-btn:focus, a.dtr-btn:active,
.dtr-btn:hover, .dtr-btn:focus, .dtr-btn:active,
.dtr-btn-flat:hover, .dtr-btn-flat:focus, .dtr-btn-flat:active,
.dtr-text-btn:hover, .dtr-text-btn:focus, .dtr-text-btn:active,
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active,
input[type="reset"]:hover,  input[type="reset"]:focus,  input[type="reset"]:active{
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

/* Some themes draw a border with pseudo-elements */
a.dtr-btn::before, a.dtr-btn::after,
.dtr-btn::before, .dtr-btn::after,
.dtr-btn-flat::before, .dtr-btn-flat::after,
.dtr-text-btn::before, .dtr-text-btn::after,
input[type="submit"]::before, input[type="submit"]::after,
input[type="reset"]::before,  input[type="reset"]::after{
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* If they snuck it into outline-only focus styles */
.dtr-btn:focus-visible,
.dtr-btn-flat:focus-visible,
.dtr-text-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
.dtr-copyright { background-color: #f25a29; }

/* ===== MOBILE HEADER FIX ===== */

/* Slim down the header bar */
.dtr-responsive-header {
  padding: 10px 0 !important;
}

/* Logo size — bump up from 40 to something visible */
.dtr-responsive-header img {
  max-height: 90px !important;
  width: auto !important;
}

/* Menu dropdown background */
.dtr-responsive-header-menu {
  background-color: var(--ps-gray, #323a47) !important;
}

/* Slicknav menu wrapper */
.slicknav_menu {
  background-color: var(--ps-gray, #323a47) !important;
  display: block !important;
}

/* The nav list itself */
.slicknav_nav {
  background-color: var(--ps-gray, #323a47) !important;
  padding: 10px 20px !important;
  display: none;
}

/* When menu is open, show it */
.slicknav_nav.slicknav_open {
  display: block !important;
}

/* Menu links */
.slicknav_nav a {
  color: #fff !important;
  font-size: 16px !important;
  padding: 12px 0 !important;
}

.slicknav_nav a:hover {
  color: var(--ps-orange, #f25a29) !important;
}

/* Menu item borders */
.slicknav_nav li {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Hamburger lines */
.dtr-hamburger-lines,
.dtr-hamburger-lines:before,
.dtr-hamburger-lines:after {
  background-color: var(--ps-gray, #323a47) !important;
}

.dtr-hamburger.is-active .dtr-hamburger-lines:before,
.dtr-hamburger.is-active .dtr-hamburger-lines:after {
  background-color: var(--ps-gray, #323a47) !important;
}

/* ===== TESTIMONIAL DOTS — show inactive dots ===== */
.dtr-testimonial-slider .slick-dots li button {
  background-color: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 50% !important;
  width: 12px !important;
  height: 12px !important;
}

.dtr-testimonial-slider .slick-dots li button:before {
  content: none !important;
}

.dtr-testimonial-slider .slick-dots li.slick-active button {
  background-color: var(--ps-orange, #f25a29) !important;
  border-color: var(--ps-orange, #f25a29) !important;
}