/* Child CSS Fire Defense 2.1 */

/* =========================================
   IMPORTS & FONTS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:400,300,500,700&display=swap');


/* =========================================
   GLOBAL STYLES
   ========================================= */

/* * {
  outline: 1px solid red;
  background: rgba(255, 0, 0, 0.1);
} */


body {
  padding-top: 80px;
}

@media screen and (max-width: 1199px) {
  body {
    padding-top: 0px;
  }
}

@media screen and (max-width: 867px) {
  body {
    padding-top: 0px;
  }
}

@media screen and (max-width: 867px) {
  .blogposttitle {
    font-size: 24px !important;
  }
}

/* @media screen and (max-width: 867px) {
  .contenttopmarginadd {
    margin-top: 60px;
  }
} */

@media screen and (min-width: 1199px) {
.blog-listing {
  margin-top: 50px !important;
  }
}

.blog-posting-margin {
  margin-top: 120px !important;
  }
@media screen and (min-width: 1199px) {
.blog-posting-margin {
  margin-top: -60px !important;
  }
}



a.link {
  cursor: pointer !important;
}

/* Links */
.wp-block-post-content a:where(:not(.wp-element-button)) {
  color: #5297F7 !important;
}

.wp-site-blocks .topnoise {
  margin-block-start: 1rem;
  margin-top: -60px;
  height: 20rem;
  z-index: -1;
  rotate: 180deg;
  background-image: url("https://firedefense.com/wp-content/uploads/2023/07/bggradient05.webp");
  background-position: center;
}

/* Typography Helpers */
.titlegradient {
  font-size: 38px;
  background-image: linear-gradient(45deg, #EA3424 30%, #5297F8 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  width: fit-content;
}

.titlegradienthome {
  background-image: linear-gradient(45deg, #EA3424 30%, #5297F8 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  width: fit-content;
  margin: 0 auto;
}

@media only screen and (max-width: 781px) {
  .titlegradient {
    font-size: 32px;
  }
}


/* =========================================
   HEADER & NAVIGATION
   ========================================= */

header {
  background: #ffff;
  height: 40px;
  z-index: 999;
  margin: 0 auto;
  border-bottom: 0px solid #dadada;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.admin-bar header {
  top: 32px;
}

.headerbottom {
  border-bottom: 0px solid #1A2448;
}

/* Mega Menu */
.jupiterx-widget.widget_maxmegamenu {
  overflow: visible;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 {
  margin-top: -4px !important;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-megamenu>ul.mega-sub-menu li.mega-menu-column>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link {
  border-bottom: 1px solid #999;
  pointer-events: none;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item>a.mega-menu-link {
  font-family: 'Fira Sans', Arial, Helvetica, sans-serif !important;
  line-height: 32px !important;
  height: 32px !important;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-megamenu>ul.mega-sub-menu li.mega-menu-column>ul.mega-sub-menu>li.mega-menu-item li.mega-menu-item>a.mega-menu-link {
  white-space: nowrap !important;
  overflow: hidden;
  width: 100%;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-row {
  width: 100% !important;
  max-width: 1240px !important;
  margin: auto !important;
  float: none !important;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:hover,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:focus,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-megamenu>ul.mega-sub-menu li.mega-menu-column>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:hover,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-megamenu>ul.mega-sub-menu li.mega-menu-column>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:focus {
  border-bottom: 1px solid #999;
}

.mega-sub-menu ul li {
  list-style-type: none !important;
  overflow: auto !important;
}

/* Inline Nav */
.inlinenav a {
  text-decoration: none !important;
  color: #000 !important;
  font-size: 1.6rem;
}

.inlinenav a:hover {
  text-decoration: none !important;
  color: #DD0031 !important;
}

/* Sub Navigation */
.subnav {
  margin: 10px 0 10px 0;
  padding: 0 6px 0 6px;
  width: 100%;
  min-width: 300px;
  font-size: 60% !important;
}

.subnavsearchicon {
  position: relative;
  top: -5px;
  bottom: -10px;
  left: 0px;
  right: 0px;
}

.subnavsearchicon img {
  position: relative;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(102%) contrast(102%);
  top: 8px;
  bottom: -10px;
  left: 0px;
  right: 12px;
}

.subtopnav {
  vertical-align: top;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  height: 27px;
  padding: 0px 0px 0px 0px;
  /* 6px 0px 0px 0px; */
}

.subtopnav-item {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.subtopnav a:link,
.subtopnav a:visited {
  text-decoration: none !important;
  color: #EEE !important;
}

.subtopnav a:hover,
.subtopnav a:active {
  text-decoration: none !important;
  color: #6396F0 !important;
}

@media screen and (max-width: 1056px) {
  .subtopnav {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .subtopnav {
    display: none;
  }
}

/* Top Nav */
.topnav a:link,
.topnav a:visited {
  text-decoration: none !important;
  color: #FFF !important;
}

.topnav a:hover,
.topnav a:active {
  text-decoration: none;
  color: #6396F0 !important;
}

/* Misc Nav Elements */
.wp-block-navigation__submenu-icon {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(102%) contrast(102%);
}

@media screen and (max-width: 600px) {
  .wp-block-navigation__responsive-container-open {
    padding: 0 0 40px 0;
  }
}

.headermobile {
  min-height: 84px !important;
}

@media screen and (min-width: 341px) and (max-width: 781px) {
  .headermobile {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}

@media screen and (max-width: 340px) {
  .headermobile {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin: 0px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
}

.secondtier {
  font-size: 60% !important;
  color: #000 !important;
}

.thirdtier {
  font-size: 160% !important;
  color: #000 !important;
}

@media screen and (max-width: 600px) {
  .secondtier {
    font-size: 100% !important;
    margin-bottom: 20px;
  }

  .thirdtier {
    font-size: 100% !important;
    margin-bottom: 20px;
  }
}

/* Mobile Menu & ShiftNav */
#shiftnav-toggle-main .shiftnav-toggle-burger,
#shiftnav-toggle-main.shiftnav-toggle-main-entire-bar:before {
  padding: 22px !important;
}

.shiftnav,
.shiftnav *,
.shiftnav-toggle,
.shiftnav-toggle * {
  background: #3D3E44 !important;
  color: #fff !important;
}

.mobmenur-container {
  width: 30px !important;
}

@media only screen and (max-width: 600px) {
  .mobmenur-container {
    margin-top: -10px !important;
    margin-bottom: 3% !important;
  }
}

@media only screen and (min-width: 601px) and (max-width: 1056px) {
  .mobmenur-container {
    margin-top: -8px !important;
  }
}

.mob-menu-header-holder {
  font-weight: normal;
  top: 0px;
  right: 0px;
  background-color: transparent !important;
  display: block;
  z-index: 10000;
}

/* Apple Menu Style (Mobile) */
@media (min-width: 1024px) {

  .apple-menu-container,
  .apple-menu-toggle,
  .header-icons {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .apple-menu-container {
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    background: #1C1C1E;
    z-index: 9999;
    display: none;
    flex-direction: column;
    box-sizing: border-box;
    transition: opacity 0.2s;
    padding: 0px 0px 0px 20px;
  }

  .apple-menu-container.active {
    display: flex !important;
    opacity: 1;
  }

  .apple-menu-container a {
    color: #fff;
    font-size: 20px;
    line-height: 48px;
    text-decoration: none;
  }

  .apple-menu-toggle {
    position: fixed;
    top: 13px;
    right: 0.2em;
    z-index: 10000;
    font-size: 40px;
    color: #fff;
    background: transparent;
    border: none;
  }

  .apple-menu-toggle.active {
    display: none !important;
  }

  /* Menu Items */
  .apple-menu-link,
  .apple-menu-back {
    background: transparent;
    border: none;
    font-size: 20px;
    margin: 0;
    padding: 14px 0px 14px 0px;
    color: #fff;
    cursor: pointer;
    text-align: left;
  }

  .apple-menu-back {
    font-size: 40px;
    color: #fff;
  }

  /* Close Buttons */
  .apple-menu-close,
  .apple-menu-close-sub {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 40px;
    line-height: 1;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 16px;
    top: 20px;
  }

  .category-mobile {
    font-size: 19px;
    color: #858585;
    padding: 10px 0;
  }

  .apple-menu-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: right;
    width: 100%;
    padding: 0 0px 0 0;
    box-sizing: border-box;
  }

  .apple-menu-header-sub {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 50px 0 0;
    box-sizing: border-box;
  }
}

.apple-menu-toggle2 {
  position: fixed;
  top: 30px;
  right: 3em;
  z-index: 10000;
  font-size: 20px;
  color: #fff;
  background: transparent;
  border: none;
}

.apple-menu-toggle2.active {
  display: none !important;
}

@media (max-width: 340px) {
  .apple-menu-toggle {
    position: fixed;
    top: 13px;
    right: 0.4em;
    z-index: 10000;
    font-size: 40px;
    color: #fff;
    background: transparent;
    border: none;
    padding: 0px !important;
    margin: 0px !important;
  }

  .apple-menu-toggle2 {
    position: fixed;
    top: 30px;
    right: 3em !important;
    z-index: 10000;
    font-size: 21px;
    color: #fff;
    background: transparent;
    border: none;
    padding: 0px !important;
    margin: 0px !important;
  }
}


/* =========================================
   SEARCH & MODALS
   ========================================= */

#search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wp-block-search__inside-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 0px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  box-sizing: border-box;
}

.search-form {
  width: 100%;
  max-width: 100%;
}

.search-field {
  width: 100%;
  font-size: 1.8rem;
  padding: 1rem;
}

.search-icon {
  margin: 0 15px 0 5px !important;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.inputboxcustom {
  min-width: 200px;
  max-width: 100%;
  font-size: 1.8em;
  color: #fff;
  background-color: transparent;
  border-bottom: 1px #fff solid;
  border: 0;
  border-bottom: 1px #fff solid;
  border-radius: 0px;
  outline: none;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-grow: 1;
  padding: 10px 0;
}

.inputboxcustom:focus {
  outline: none;
  box-shadow: none !important;
}

/* Modal Overlay */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  background: rgba(61, 62, 68, 1.00);
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.modal-content {
  background: transparent;
  padding: 40px;
  margin: 0;
  height: 100vh;
  border-radius: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.modal-content .search-form {
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.modal-content .search-field {
  width: 100%;
  padding: 20px;
  font-size: 24px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-align: center;
}

.modal-content .search-field::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Modal Content Adjustments */
.modal-content .wp-block-search__inside-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-content .inputboxcustom {
  width: 100%;
  max-width: 100%;
  flex-grow: 1;
}

#closeModal {
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
  font-size: 36px;
  color: #fff;
  font-weight: bold;
  z-index: 10000;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  line-height: 1;
}

#closeModal:hover {
  opacity: 0.7;
  transform: scale(1.1);
}

/* Header Icons & Search Toggle */
.header-icons {
  display: flex;
  align-items: center;
  gap: 15px;
}

body.search-modal-open .header-icons {
  display: none !important;
}

.dashicons-search {
  font-size: 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: #fff;
  transition: opacity 0.3s ease;
}

.menu-active .dashicons-search {
  opacity: 0;
  pointer-events: none;
}

.mobile-search-icon {
  display: none;
}

@media (max-width: 768px) {
  .mobile-search-icon {
    display: inline-block;
    position: fixed;
    top: 20px;
    right: 60px;
    z-index: 9999;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
  }
}

/* This will ONLY apply to touch screen devices (phones/tablets), regardless of screen size! */
@media (pointer: coarse) and (hover: none) {
  .dashicons-search {
    margin-top: 2px;
  }
}

/* This rule will ONLY apply if the site was loaded on a recognized mobile device */
.is-mobile-device .dashicons-search {
  margin-top: 2px;
}


/* =========================================
   HERO SECTION
   ========================================= */

.herotreatment::after {
  position: absolute !important;
  z-index: 0 !important;
  content: ' ' !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background: rgb(0, 0, 0);
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: .8;
}

@media screen and (max-width: 600px) {
  .herotreatment {
    min-height: 200px !important;
  }
}

.heroindex {
  z-index: -9999 !important;
}

.hero-second {
  margin-block-start: 1rem;
  z-index: -1;
  background-position: center;
}

.heroreprisecol {
  max-width: 980px !important;
  background-image: url('https://firedefense.com/wp-content/uploads/2025/12/Hero_FireDefenseTechnician_Desktop_cards-bg_v1.webp') !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* min-height: 300px; */
  width: 100%;
}

.homerepriseleft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1 / 1 !important;
  padding: 0px 20px 20px 20px !important;
  width: 100%;
}

@media screen and (min-width: 281px) and (max-width: 781px) {
  .homerepriseleft {
    padding-top: 0px !important;
  }

  .col-bg-firesupp,
  .col-bg-exploprot,
  .col-bg-firesprink,
  .col-bg-detectdev,
  .col-bg-firealarm,
  .col-bg-firesuppkitchen,
  .col-bg-spraybooth,
  .col-bg-fireextinguisher,
  .col-bg-emergencylight,
  .col-bg-datacenter {
    padding-top: 20px !important;
  }
}

@media screen and (max-width: 781px) {
  .heroreprisecol {
    background-image: url('https://firedefense.com/wp-content/uploads/2025/12/Hero_FireDefenseTechnician_Mobile_cards-bg_v1.webp') !important;
  }

  .homerepriseleft {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
  }

  .homerepriseright {
    visibility: hidden !important;
  }
}

.hero-button-mobile {
  margin-left: -40px;
}

@media (max-width: 768px) {
  .hero-button-mobile {
    margin-left: 0px;
  }
}

.homehero {
  margin-top: -32px !important;
  min-height: 490px !important;
}

@media screen and (max-width: 781px) {
  .homehero {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 40px 40px 0 40px !important;
    margin: 0px !important;
    min-height: 490px !important;
    aspect-ratio: 1 / 1;
  }
}


/* =========================================
   LAYOUT & CONTENT
   ========================================= */

.contenttopmargin {
  margin-top: 0px;
}

@media screen and (max-width: 1199px) {
  .contenttopmargin {
    margin-top: 80px;
  }
}

@media screen and (max-width: 600px) {
  .contenttopmargin {
    margin-top: 80px;
  }
}

.contentblock {
  margin-top: -180px !important;
}

.contentbox {
  position: relative;
  z-index: 1;
}

.homebox {
  position: relative;
  border-radius: 3px;
  height: 100%;
  cursor: pointer;
}

.homeboxlink a:link {
  text-decoration: none;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
}

.rounded {
  border-radius: 3px;
  overflow: hidden;
}

.roundedvideo {
  border-radius: 3px;
  overflow: hidden;
}

.colbg01 {
  object-fit: cover;
}

.equalheight {
  height: 300px;
}

.hovernow {
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.0);
  transition: box-shadow 0.3s ease-in-out;
}

.hovernow:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.homeninebg {
  margin-top: 260px;
}

.imageoffset img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
  margin: 0 0 0 4em;
}

@media screen and (max-width: 1200px) {
  .imageoffset img {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    margin: 0 0 0 0;
  }
}

.total-page {
  margin-top: 20px !important;
}

@media only screen and (max-width: 781px) {

  .single-post .total-page {
    margin-top: 60px !important; /* previously 60px */
  }
}

.menu-desktop {
  height: 30px !important;
}

.viewport-img,
.viewport-img-section {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: block;
}

.imagemobilesquare,
.imagemobilesquare-section {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.imagemobilesquare img,
.imagemobilesquare-section img {
  width: 100%;
  height: auto;
  object-fit: cover;
}


.image-text-blurb {
  max-width: 655px;
  margin: 10px auto 52px auto !important;
  font-size: 12px !important;
  line-height: 14px !important;
}

.image-text-blurb-section {
  margin: 10px 0px 60px 0px !important;
}

@media screen and (max-width: 781px) {
  .section-group-bk .imagemobilesquare-section img {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }

  .image-text-blurb {
    max-width: 655px;
    margin: 10px 30px 30px 30px !important;
  }

  .image-text-blurb-vert {
    max-width: 655px;
    margin: 10px 30px 40px 30px !important;
  }

  .image-text-blurb-section {
    margin: 10px 30px 30px 30px !important;
  }

  .bk-inner-group {
    max-width: 655px;
    margin: 0px 30px 0px 30px !important;
  }
}

@media screen and (min-width: 782px) and (max-width: 1079px) {

  .viewport-img,
  .viewport-img-section {
    max-width: 980px;
  }

  .imagemobilesquare img,
  .imagemobilesquare-section img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

.cards {
  margin-top: -140px !important;
}

@media screen and (max-width: 781px) {
  .columnreverse {
    flex-direction: column-reverse;
  }
}

/* Home Blocks Borders Mobile */
@media screen and (max-width: 781px) {

  .homeblock01,
  .homeblock03 {
    border-right: solid 0px #fff !important;
    border-left: solid 0px #fff !important;
  }

  .homeblock05 {
    border-right: solid 0px #fff !important;
    border-left: solid 0px #fff !important;
    border-bottom: solid 0px #fff !important;
  }

  .textbottommargin {
    margin-bottom: 20px !important;
  }

  .textbottommarginminus {
    margin-bottom: 0px !important;
    line-height: 18px;
  }

  .textbottommarginbutton {
    margin-top: 10px !important;
  }
}


/* =========================================
   COMPONENTS
   ========================================= */

/* Logo */
.fdlogo {
  max-width: 100%;
}

@media screen and (max-width: 1199px) {
  .fdlogo {
    max-width: 70% !important;
  }
}

@media screen and (max-width: 781px) {
  .fdlogo {
    max-width: 60% !important;
    padding: 10px 0 10px 0;
  }
}

@media screen and (max-width: 340px) {
  .fdlogo {
    max-width: 300px !important;
    min-width: 100px !important;
    margin: 0px !important;
    padding: 0px !important;
    align-items: flex-start !important;
  }
}

.fdlogorow {
  display: flex !important;
  width: 100% !important;
  /* margin: 0 !important; */
  padding: 0 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.fdlogorow .fdlogo {
  margin-left: 0 !important;
  margin-right: auto !important;
  align-self: flex-start !important;
}

/* Captions */
.inverted-figcaption figcaption.wp-element-caption {
  color: #fff;
}

.page-sub-title {
  margin-bottom: -30px !important;
}

/* Accordions */
.sp-ea-single {
  border: 0px solid #0a0a0a !important;
  border-bottom: 1px solid #000 !important;
  border-radius: 1px !important;
}

.sp-easy-accordion .sp-ea-single {
  border-radius: 1px !important;
  margin-bottom: 0px !important;
}

.ea-header a:link {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #000 !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

.sp-easy-accordion .sp-ea-single .ea-header a {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 19px;
  line-height: 25px !important;
  padding: 15px 15px 15px 0px !important;
  letter-spacing: 0em;
}

.sp-easy-accordion .sp-ea-single .ea-body {
  padding: 15px 15px 15px 0px !important;
}

.ea-body a:link {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media screen and (max-width: 867px) {
  .sp-easy-accordion .sp-ea-single .ea-header a {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 22px !important;
    padding: 6px 6px 6px 0px !important;
    letter-spacing: 0em;
  }
}

.wp-block-kadence-pane .kt-accordion-header-wrap .kt-blocks-accordion-header {
  border-bottom: 1px solid #3b3e43 !important;
}

.kt-accordion-panel-inner {
  border-bottom: 1px solid #3b3e43 !important;
}

/* Card Backgrounds & Icons */
.col-bg-firesupp,
.col-bg-exploprot,
.col-bg-firesprink,
.col-bg-detectdev,
.col-bg-firealarm,
.col-bg-firesuppkitchen,
.col-bg-spraybooth,
.col-bg-fireextinguisher,
.col-bg-emergencylight,
.col-bg-datacenter {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.col-bg-firesupp {
  background-image: url('https://firedefense.com/wp-content/uploads/2025/12/FireSuppressionSystems_card-bg_v1_transparent-sized.webp') !important;
  background-color: #E2E2E2 !important;
  color: #FFF !important;
}

.col-bg-exploprot {
  background-image: url('https://firedefense.com/wp-content/uploads/2025/12/ExplosionProtection_card-bg_v1-sized.webp') !important;
  background-color: #333 !important;
  color: #fff !important;
}

.col-bg-firesprink {
  background-image: url('https://firedefense.com/wp-content/uploads/2025/12/FireSprinklerSystems_card-bg_v1-sized.webp') !important;
  background-color: #333 !important;
  color: #FFF !important;
  padding: 40px;
}

.col-bg-detectdev {
  background-image: url('https://firedefense.com/wp-content/uploads/2025/12/DetectionDevices_card-bg_v1_transparent-sized.webp') !important;
  background-color: #E2E2E2 !important;
  color: #fff !important;
}

.col-bg-firealarm {
  background-image: url('https://firedefense.com/wp-content/uploads/2025/12/FireAlarmSystems_card-bg_v1_transparent-sized.webp') !important;
  background-color: #E2E2E2 !important;
  color: #FFF !important;
}

.col-bg-firesuppkitchen {
  background-image: url('https://firedefense.com/wp-content/uploads/2025/12/KitchenFireSuppression.webp') !important;
  background-color: #333 !important;
  color: #fff !important;
}

.col-bg-spraybooth {
  background-image: url('https://firedefense.com/wp-content/uploads/2025/12/PaintSprayBooth_card-bg_v1-sized.webp') !important;
  background-color: #333 !important;
  color: #FFF !important;
}

.col-bg-fireextinguisher {
  background-image: url('https://firedefense.com/wp-content/uploads/2025/12/PortableFireExtinguishers_card-bg_v1_transparent-sized.webp') !important;
  background-color: #E2E2E2 !important;
  color: #fff !important;
}

.col-bg-emergencylight {
  background-image: url('https://firedefense.com/wp-content/uploads/2025/12/EmergencyLights_card-bg_v1_transparent-sized.webp') !important;
  background-color: #E2E2E2 !important;
  color: #FFF !important;
}

.col-bg-datacenter {
  background-image: url('https://firedefense.com/wp-content/uploads/2026/04/Data-Centers-Telecom-Room_card-bg_v1.webp') !important;
  background-color: #E2E2E2 !important;
  color: #FFF !important;
}

.eyebrow-home {
  padding-top: 44px !important;
}

/* Mobile Ordering & Adjustments for Cards */
@media only screen and (max-width: 781px) {
  .eyebrow-home {
    padding-top: 24px !important;
  }

  .col-bg-firesprink,
  .col-bg-spraybooth {
    order: 2;
  }

  .col-bg-detectdev,
  .col-bg-fireextinguisher {
    order: 1;
  }

  .order-firesprinkler,
  .order-lighting {
    order: 2;
  }

  .order-detection,
  .order-extinguisher {
    order: 1;
  }
}

/* Home Block Icons/Styles */
.hb-fireprotection,
.hb-explosionprot,
.hb-firealarm,
.hb-bidrect-icon-circle,
.hb-extinguisher-icon-circle {
  background: #EEE !important;
}

.hb-fireprotection img,
.hb-explosionprot img,
.hb-firealarm img,
.hb-bidrect-icon-circle img,
.hb-extinguisher-icon-circle img {
  transform: rotate(0deg);
  margin: auto;
  width: 100% !important;
  opacity: 100%;
  position: relative;
  top: 0% !important;
  left: 0% !important;
}

.hb-firealarm img {
  z-index: -5;
}

.fg-firealarm {
  z-index: -10;
  margin-top: -260px;
}

@media only screen and (max-width: 1199px) {

  .hb-fireprotection,
  .hb-explosionprot,
  .hb-firesprinkler,
  .hb-firealarm,
  .hb-bidrect-icon-circle,
  .hb-firesuppression,
  .hb-emergencylighting,
  .hb-extinguisher-icon-circle {
    aspect-ratio: 1 / 1 !important;
  }
}

/* Text Colors */
.hm-exploprotect-desc,
.hm-firesprinklers-desc,
.hm-kitchenfiresupp-desc,
.hm-emergencylight-desc {
  color: #fff !important;
}

/* Lists */
/* 1. Hide bullets globally (your original rule) */
ul li {
  list-style-type: none !important;
}

/* 2. Make all standard content lists have BLACK bullets */
.entry-content ul.wp-block-list li {
  list-style-type: disc !important;
  color: black !important;
}

.entry-content ul.wp-block-list li::marker {
  color: black !important;
}

/* 3. Make bullets WHITE *only* when the list has the white text class */
.entry-content ul.wp-block-list.has-base-color li {
  color: white !important;
}

.entry-content ul.wp-block-list.has-base-color li::marker {
  color: white !important;
}


.overviewlist a {
  text-decoration: none;
}

.contentbox ul li,
.listbullet03 li,
.listbullet03wh li {
  list-style-type: none !important;
  background: url('https://firedefense.com/wp-content/uploads/2023/08/circle-svgrepo-com.svg') no-repeat top 4px left;
  background-size: 18px;
  padding: 0;
  margin: 8px 0px 12px -30px;
  padding-left: 30px;
}

.listbullet03wh li {
  filter: brightness(0) invert(1);
}

.listbullet01 li,
.listbullet01wh li {
  list-style-type: none !important;
  background: url('https://firedefense.com/wp-content/uploads/2023/07/iconfire01.svg') no-repeat top left;
  background-size: 30px;
  padding: 0;
  margin: 10px 0 10px 0px;
  padding-left: 30px;
}

.listbullet01wh li {
  margin: 10px 0 10px -30px;
  filter: brightness(0) invert(1);
}

.listbullet02 li {
  list-style-type: none !important;
  background: url('https://firedefense.com/wp-content/uploads/2023/08/circle-exclamation-check-svgrepo-com.svg') no-repeat top left;
  background-size: 30px;
  padding: 0;
  margin: 10px 0 10px -30px;
  padding-left: 40px;
  filter: brightness(0) invert(1);
}

/* CTA & Buttons */
.ctafix {
  margin-block-start: 0rem !important;
}

.newslettercta {
  margin-bottom: -25px !important;
  background-image: url("https://firedefense.com/wp-content/uploads/2023/07/bggradient05.webp");
  background-position: bottom center;
}

.ctaquotebg {
  position: relative;
  overflow: hidden;
}

.ctaquotebg::before {
  content: " ";
  position: absolute;
  margin-top: -200px;
  width: 800px;
  height: 800px;
  background-image: url(https://firedefense.com/wp-content/uploads/2023/08/fdlogoiconwhtran2.svg) !important;
  opacity: 0.4;
  z-index: 0;
}

.ctacontent {
  position: relative;
  z-index: 12;
}

/* Videos */
.youtubecorners {
  border-radius: 15px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}

.youtubecorners iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* =========================================
   FOOTER
   ========================================= */

.footernavlinks a:link,
.footernavlinks a:visited {
  text-decoration: none !important;
  color: #fff !important;
  border-bottom: 4px solid transparent;
}

.footernavlinks a:hover {
  text-decoration: none;
  color: #fff !important;
  border-bottom: 4px solid #DD0031 !important;
}

.footernavlinks a:active {
  text-decoration: none !important;
  color: #fff;
  border-bottom: 4px solid transparent;
}

.footerlink a:link {
  text-decoration: none !important;
  color: #FFF !important;
}

.footerlink a:hover,
.footerlink a:active {
  text-decoration: none !important;
  color: #6396f0 !important;
}

.footer-col-mobile-f {
  margin-left: 0px !important;
}

@media only screen and (max-width: 781px) {
  .footer-col-mobile {
    margin-top: 30px !important;
  }

  .footer-col-mobile-f {
    margin-top: 30px !important;
    margin-left: 0px !important;
  }

  .footer-mobile-copyright {
    margin-bottom: 30px !important;
  }
}


/* =========================================
   WORDPRESS ADMIN BAR FIX
   ========================================= */

body.admin-bar .apple-menu-toggle {
  top: calc(32px + 0.4em) !important;
}

body.admin-bar .apple-menu-toggle2 {
  top: calc(32px + 1.6em) !important;
}

body.admin-bar .mobile-search-icon {
  top: calc(32px + 20px) !important;
}



/* =========================================
   ADDITIONS
   ========================================= */

@media (max-width: 767px) {
  /* Adding 'body' makes this rule stronger than Jetpack's defaults */
  body .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}
/* 1. Main Block Styling (Desktop) */
@media (min-width: 768px) {
  .wp-block-jetpack-slideshow {
    width: calc(655px + 120px) !important;
    box-sizing: border-box !important;
    margin-left: -60px !important;
    margin-right: -60px !important;
    max-width: none !important;
  }

}

.wp-block-jetpack-slideshow :is(.wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets,.wp-block-jetpack-slideshow_pagination.swiper-pagination-custom) {
    padding: 10px 0 20px !important;
}
@media (max-width: 767px) {
.wp-block-jetpack-slideshow :is(.wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets,.wp-block-jetpack-slideshow_pagination.swiper-pagination-custom) {
    padding: 10px 0 20px !important;
}
}

.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption { 
    padding: 20px 0;
}

.wp-block-jetpack-slideshow :is(.wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets,.wp-block-jetpack-slideshow_pagination.swiper-pagination-custom) .swiper-pagination-simple {
    text-align: center;
}

/* 2. Break Jetpack's Fixed Heights */
/* Let the container, wrapper, and slides size themselves naturally based on the image */
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container,
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_swiper-wrapper,
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide {
  height: auto !important;
  max-height: none !important;
}

.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption {
    background-color: #ffffff00;
}

/* 3. Turn the slide into a vertical stacking column */
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  height: auto !important;
  margin: 0 !important;
}

/* 4. Flush Full-Width Images */
/* By using height: auto, the portrait image dictates the height and won't shrink horizontally */
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image,
.wp-block-jetpack-slideshow .swiper-slide img {
  width: 655px !important;
  max-width: 100% !important; /* Keeps it safe on smaller mobile screens */
  height: auto !important; 
  object-fit: cover !important;
  flex: 0 0 auto !important; 
  margin: 0 auto !important;
}

/* 5. Match the caption width to the image and left-justify */
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption {
  position: relative !important;
  bottom: auto !important;
  /* background: #ffffff9a !important; */
  color: #767676 !important;
  text-shadow: none !important;
  text-align: left !important;
  width: 655px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 15px 0px 5px 0px !important;
  font-size: 12px !important;
  line-height: 1.4 !important; /* Fixed a small syntax error here (was 14.px) */
  min-height: 84px !important;
}


/* 6. Pagination Dots */
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination,
.wp-block-jetpack-slideshow .swiper-pagination {
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  transform: none !important;
  display: flex !important;
  justify-content: center !important;
}

/* 7. Navigation Arrows */
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev,
.wp-block-jetpack-slideshow .swiper-button-prev {
  left: 0 !important;
  top: 48% !important;
}

.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next,
.wp-block-jetpack-slideshow .swiper-button-next {
  right: 0 !important;
  top: 48% !important;
}





.gform_fields h3 {
  font-size: 19px;
  text-transform: uppercase;
  font-weight: 700 !important;
}
 .gform-theme--foundation .gform_fields {
   row-gap: 20px !important;
}

.gform-theme--framework:where(:not(.gform_editor)) .gfield--type-section {
    padding: 0;
    margin-bottom: -40px;
    border-block-end: transparent !important;
    padding-block-end: transparent !important;
}

a.more-link {
    display: inline-block; 
    margin-top: 20px;
}

a.more-link::after {
    content: " →"; 
}


.wp-block-jetpack-slideshow :is(.amp-carousel-button,.wp-block-jetpack-slideshow_button-next,.wp-block-jetpack-slideshow_button-pause,.wp-block-jetpack-slideshow_button-play,.wp-block-jetpack-slideshow_button-prev) {
    background-color: #ffffff00 !important;
}


/* Google maps */
.responsive-map-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio - adjust as needed */
  height: 0;
  overflow: hidden;
}

.responsive-map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* =========================================
   HORIZONTAL SLIDESHOW (widegallery class)
   Matches the 960px / 980px width of
   horizontal viewport-img-section images.
   Vertical slideshows are NOT affected.
   ========================================= */

/* 1. Desktop: expand the block to match the 980px image container, centered */
@media (min-width: 768px) {
  .wp-block-jetpack-slideshow.widegallery {
    width: calc(980px + 20px) !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 2. Image: let it fill the 980px container */
.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_image,
.wp-block-jetpack-slideshow.widegallery .swiper-slide img {
  width: 980px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
}

/* 3. Caption: keep at 655px max-width, centered within the wider block */
.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_caption {
  width: 655px !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4. Arrows: white, inset 60px from each side */
.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_button-prev,
.wp-block-jetpack-slideshow.widegallery .swiper-button-prev {
  left: 60px !important;
  background-color: #ffffff !important;
  opacity: 0.85;
}

.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_button-next,
.wp-block-jetpack-slideshow.widegallery .swiper-button-next {
  right: 60px !important;
  background-color: #ffffff !important;
  opacity: 0.85;
}

.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_button-prev:hover,
.wp-block-jetpack-slideshow.widegallery .swiper-button-prev:hover,
.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_button-next:hover,
.wp-block-jetpack-slideshow.widegallery .swiper-button-next:hover {
  opacity: 1;
}





/* =========================================
   HORIZONTAL SLIDESHOW (widegallery class)
   Matches the 960px / 980px width of
   horizontal viewport-img-section images.
   Vertical slideshows are NOT affected.
   ========================================= */

/* 1. Desktop: expand the block to match the 980px image container, centered */
@media (min-width: 768px) {
  .wp-block-jetpack-slideshow.widegallery {
    width: calc(980px + 20px) !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 2. Image: let it fill the 980px container */
.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_image,
.wp-block-jetpack-slideshow.widegallery .swiper-slide img {
  width: 980px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
}

/* 3. Caption: keep at 655px max-width, centered within the wider block */
.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_caption {
  width: 655px !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4. Arrows: white, inset 60px from each side */
.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_button-prev,
.wp-block-jetpack-slideshow.widegallery .swiper-button-prev {
  left: 60px !important;
  background-color: #ffffff !important;
  opacity: 0.85;
  top: 38% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
}

.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_button-next,
.wp-block-jetpack-slideshow.widegallery .swiper-button-next {
  right: 60px !important;
  background-color: #ffffff !important;
  opacity: 0.85;
  top: 38% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
}

.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_button-prev:hover,
.wp-block-jetpack-slideshow.widegallery .swiper-button-prev:hover,
.wp-block-jetpack-slideshow.widegallery .wp-block-jetpack-slideshow_button-next:hover,
.wp-block-jetpack-slideshow.widegallery .swiper-button-next:hover {
  opacity: 1;
}