/* SecurityTalent 1.8.6 — unified tablet and phone experience. */
:root {
  --st-responsive-ivory: #faf7f0;
  --st-responsive-sage: #e8f4f1;
  --st-responsive-teal: #123f43;
  --st-responsive-teal-dark: #0b3035;
  --st-responsive-gold: #e1ad3d;
  --st-responsive-ink: #102a2e;
  --st-responsive-line: #c7dcd6;
}

html,
body,
.body-wrapper,
.body-innerwrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

body {
  background: var(--st-responsive-ivory) !important;
  color: var(--st-responsive-ink) !important;
}

/* Keep the wider drawer entirely outside the viewport until it is opened. */
body.ltr.offcanvs-position-right .offcanvas-menu {
  right: calc(-1 * min(88vw, 360px)) !important;
  left: auto !important;
  width: min(88vw, 360px) !important;
  max-width: 360px !important;
  border-left: 1px solid rgba(225, 173, 61, .45) !important;
  background: linear-gradient(180deg, #fbf8f1 0%, #edf6f3 100%) !important;
  box-shadow: -18px 0 42px rgba(16, 42, 46, .2) !important;
  transition: right .28s ease !important;
}

body.ltr.offcanvs-position-right.offcanvas-active .offcanvas-menu {
  right: 0 !important;
}

body:not(.offcanvas-active) .offcanvas-overlay {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.offcanvas-active .offcanvas-overlay {
  visibility: visible !important;
  opacity: 1 !important;
}

.offcanvas-menu .offcanvas-inner {
  padding: 72px 20px 26px !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li {
  border-bottom: 1px solid #d8e5e1 !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
  min-height: 50px !important;
  padding: 14px 38px 14px 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--st-responsive-ink) !important;
  font-weight: 750 !important;
  opacity: 1 !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li > a:focus-visible {
  color: #7b4a20 !important;
  background: rgba(225, 173, 61, .16) !important;
}

.offcanvas-menu .menu-child {
  margin: 2px 0 10px 10px !important;
  padding: 5px 0 5px 12px !important;
  border-left: 2px solid #9fc9c0 !important;
}

.offcanvas-menu .menu-child li a {
  display: block !important;
  padding: 9px 10px !important;
  color: #3f6662 !important;
  font-size: .94rem !important;
}

.offcanvas-menu .close-offcanvas {
  top: 16px !important;
  right: 16px !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid #bdd7d1 !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: var(--st-responsive-teal) !important;
}

#sp-header {
  min-height: 62px !important;
  height: 62px !important;
  border-bottom: 2px solid rgba(225, 173, 61, .42) !important;
  background: var(--st-responsive-teal) !important;
  box-shadow: 0 6px 18px rgba(16, 42, 46, .14) !important;
}

#sp-header > .container,
#sp-header .container-inner,
#sp-header .row,
#sp-header #sp-menu,
#sp-header #sp-menu > .sp-column {
  min-height: 62px !important;
  height: 62px !important;
}

#sp-menu > .sp-column {
  justify-content: flex-end !important;
}

#offcanvas-toggler {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 0 0 auto !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .07) !important;
}

#offcanvas-toggler .burger-icon > span {
  width: 25px !important;
  height: 2px !important;
  background: #fff9ef !important;
}

/* Application surfaces share the desktop sage-and-teal treatment. */
.com-easysocial .fd-toolbar,
.com-easyblog .fd-toolbar,
.com-easydiscuss .fd-toolbar,
.com-payplans .fd-toolbar,
.es-toolbar,
.eb-toolbar,
.ed-toolbar,
[data-fd-toolbar] {
  border: 1px solid var(--st-responsive-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f9fcfb, var(--st-responsive-sage)) !important;
  box-shadow: 0 6px 18px rgba(16, 42, 46, .07) !important;
}

.com-easysocial .es-card,
.com-easyblog .eb-card,
.com-easydiscuss .ed-card,
.com-payplans .pp-card,
.o-card {
  border-color: var(--st-responsive-line) !important;
  background: rgba(255, 255, 255, .9) !important;
}

.btn-primary,
.btn-es-primary,
.sppb-btn-primary {
  border-color: #087779 !important;
  background: linear-gradient(135deg, #087779, #2e9b91) !important;
  color: #fff !important;
}

@media (max-width: 767.98px) {
  :root { --st-mobile-gutter: 14px; }

  #sp-top-bar {
    min-height: 76px !important;
    height: 76px !important;
    padding: 6px 0 !important;
    color: var(--st-responsive-ink) !important;
    background: var(--st-responsive-ivory) !important;
    box-shadow: 0 1px 0 rgba(16, 42, 46, .12) !important;
  }

  #sp-top-bar > .container,
  #sp-top-bar .container-inner,
  #sp-top-bar .row,
  #sp-top-bar #sp-top1,
  #sp-top-bar .st-top-logo-column {
    min-height: 64px !important;
    height: 64px !important;
  }

  #sp-top-bar .row {
    margin: 0 !important;
  }

  #sp-top-bar #sp-top1,
  #sp-top-bar .st-top-logo-column {
    width: 100% !important;
    padding: 0 !important;
  }

  #sp-top-bar .st-top-logo-column {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #sp-top-bar .st-top-logo-column > a,
  #sp-top-bar .st-top-logo,
  #sp-top-bar .logo,
  #sp-top-bar a:has(> img) {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 190px !important;
    height: 60px !important;
  }

  #sp-top-bar .st-top-logo-column img,
  #sp-top-bar #sp-top1 img {
    display: block !important;
    width: auto !important;
    max-width: 182px !important;
    height: auto !important;
    max-height: 58px !important;
    object-fit: contain !important;
  }

  #sp-top-bar .st-top-logo-column > .sp-module,
  #sp-top-bar #mod-custom322,
  #sp-top-bar .st-top-slogan,
  #sp-top-bar .st-logo-slogan {
    display: none !important;
  }

  #sp-header,
  #sp-header > .container,
  #sp-header .container-inner,
  #sp-header .row,
  #sp-header #sp-menu,
  #sp-header #sp-menu > .sp-column {
    min-height: 58px !important;
    height: 58px !important;
  }

  .container,
  .sppb-row-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: var(--st-mobile-gutter) !important;
    padding-left: var(--st-mobile-gutter) !important;
  }

  #sp-main-body {
    padding: 18px 0 42px !important;
  }

  .st-home-carousel,
  .slideshow,
  .st-native-hero,
  [data-st-carousel] {
    width: 100% !important;
    min-height: 540px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .st-home-slide,
  .slideshow .swiper-slide,
  .st-native-hero [data-st-slide] {
    width: 100% !important;
    min-height: 540px !important;
    background-position: 66% center !important;
  }

  .st-slide-inner,
  .slideshow .item-content,
  .slideshow .slide-content,
  .st-native-hero .item-content {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin: 0 14px !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
  }

  .st-slide-inner h1,
  .st-slide-inner h2,
  .slideshow h1,
  .slideshow h2 {
    max-width: 100% !important;
    font-size: clamp(1.85rem, 9vw, 2.5rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
  }

  .st-slide-inner p,
  .slideshow .item-content p {
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }

  .st-slide-inner .btn,
  .slideshow .item-content .btn {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .es-toolbar,
  .eb-toolbar,
  .ed-toolbar,
  [data-fd-toolbar],
  .o-toolbar {
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
  }

  .es-container,
  .eb-container,
  .ed-container,
  .pp-container {
    display: block !important;
    width: 100% !important;
  }

  .es-sidebar,
  .eb-sidebar,
  .ed-sidebar,
  .pp-sidebar,
  .es-content,
  .eb-content,
  .ed-content,
  .pp-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
  }

  .st-footer-nav .row,
  #sp-bottom .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .st-footer-nav [class*="col-"],
  #sp-bottom [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 16px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .13) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  #sp-top-bar {
    min-height: 84px !important;
    background: var(--st-responsive-ivory) !important;
  }

  #sp-header {
    background: var(--st-responsive-teal) !important;
  }

  body.ltr.offcanvs-position-right .offcanvas-menu {
    right: -360px !important;
    width: 360px !important;
  }

  body.ltr.offcanvs-position-right.offcanvas-active .offcanvas-menu {
    right: 0 !important;
  }
}