.white-fade-bg {
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 40%, rgba(255,255,255,0.2) 70%, rgba(255,255,255,0) 100%);
  padding: 40px;
}

/* Install and assign NORD font to H Tags */
@font-face {
  font-family: 'Nord';
  src: url('/wp-content/themes/sepco/fonts/nord/Nord-Regular.woff2') format('woff2'),
       url('/wp-content/themes/sepco/fonts/nord/Nord-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Typography Style */

h1, h2, h3, h4, h5, h6,
.wpb_text_column h1,
.wpb_text_column h2,
.wpb_text_column h3,
.wpb_text_column h4,
.wpb_text_column h5,
.wpb_text_column h6 {
  font-family: 'Nord', sans-serif !important;
  font-weight: bold !important;
}

/* Override ONLY h4 size */
h4,
.wpb_text_column h4 {
  font-size: 18px !important; /* adjust to your preferred size */
}


p {
    font-family: 'DM Sans', sans-serif !important;
}

a {
    font-family: 'Nord', sans-serif !important;
}

/* MOBILE TYPOGRAPHY — applies at 767px and below */
@media (max-width: 767px) {

  h1, .wpb_text_column h1 {
    font-size: 32px !important; /* adjust */
  }

  h2, .wpb_text_column h2 {
    font-size: 28px !important;
  }

  h3, .wpb_text_column h3 {
    font-size: 24px !important;
  }

  h4, .wpb_text_column h4 {
    font-size: 18px !important; /* you already set this globally */
  }

  h5, .wpb_text_column h5 {
    font-size: 16px !important;
  }

  h6, .wpb_text_column h6 {
    font-size: 14px !important;
  }
}

/* Mobile-only left/right padding */
@media (max-width: 767px) {
  .mobile-pad-15 {
    padding: 0 !important;              /* resets all padding */
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* 50% text column right */
@media (min-width: 1400px) {.col-content {
  display: flex;
  max-width: 700px;   /* half of 1400 */
  width: 100%;
}
}

/* 50% text column left */
@media (min-width: 1400px) {
  .col-left {
    display: flex;
    justify-content: flex-end;
  }

  .col-left > * {          /* direct children */
    max-width: 700px;       /* cap width */
  }
}






/* This sets a left-to-right gradient background */
.left-right-gradient {
  background: linear-gradient(to right, rgb(0,157,220), rgb(0,89,132));
}

/* Button Style */
.SEPCO_btn {
  background-color: #005984;
  color: #ffffff;
  border: 2px solid #005984;
  border-radius: 0px;
  padding: 12px 24px;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
    font-family: 'Nord', sans-serif !important;
}

.SEPCO_btn:hover {
  background-color: #ffffff;
  color: rgb(0, 89, 132);
  border-color: rgb(0, 89, 132);
    font-family: 'Nord', sans-serif !important;
}

button.btn.btn-primary {
  background-color: #2caae2;
  color: #ffffff;
  border: 2px solid #2caae2;
  border-radius: 8px;
  padding: 12px 24px;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

button.btn.btn-primary:hover {
  background-color: #ffffff;
  color: rgb(0, 89, 132);
  border-color: rgb(0, 89, 132);
}

.SEPCO_btn-white {
  background-color: #FFFFFF;
  color: #005984;
  border: 0px solid #2caae2;
  border-radius: 0px;
  padding: 12px 24px;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
  font-family: 'Nord', sans-serif !important;
}

.SEPCO_btn-white:hover {
  background-color: #2caae2;
  color: #FFFFFF;
  border-color: rgb(0, 89, 132);
  font-family: 'Nord', sans-serif !important;
}

/* Change the circle background around the slider arrows */
.lswssp-slick-next.slick-arrow,
.lswssp-slick-prev.slick-arrow {
  background-color: rgb(0, 89, 132); /* your blue circle */
}

.lswssp-logo-title {
  font-family: 'Nord', Arial, sans-serif;}
  
  .site-find-sales-rep .holder {
  display: flex;
  flex-direction: column; /* stack children vertically */
  gap: 10px;              /* optional spacing between fields */
}

.site-find-sales-rep .holder .box {
  width: 100%;            /* make each select full width */
}

/* Apply Nord + color to everything except buttons */
.site-find-sales-rep,
.site-find-sales-rep select,
.site-find-sales-rep input {
  font-family: 'Nord', Arial, sans-serif;
}

/* Only target the country select box */
.site-find-sales-rep .box.e-country-box select {
  font-family: 'Nord', Arial, sans-serif;
  color: #005984;
}

.site-find-sales-rep .box.e-state-box select {
  font-family: 'Nord', Arial, sans-serif !important;
  color: #005984 !important;
}




/* Homepage bars in Shop by category */

/* 1) Make slides uniform and center content */
#lswssp-logo-carousel-1 .lswssp-slide-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  box-sizing: border-box;
}

/* 2) Normalize image sizing */
#lswssp-logo-carousel-1 .lswssp-logo-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  width: 100%;
}

#lswssp-logo-carousel-1 .lswssp-logo-img {
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 3) Bar above title */
#lswssp-logo-carousel-1 .lswssp-logo-title {
  position: relative;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 100%;
  box-sizing: border-box;
}

#lswssp-logo-carousel-1 .lswssp-logo-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: calc(100% - 20px);
  height: 4px;
  background-color: #005984;
}

/* Individual slide overrides */
#lswssp-logo-carousel-1 .lswssp-post-4437 .lswssp-logo-title::before {
  background-color: rgb(203, 40, 60); 
}

#lswssp-logo-carousel-1 .lswssp-post-3484 .lswssp-logo-title::before {
  background-color: rgb(121, 18, 21);
}

#lswssp-logo-carousel-1 .lswssp-post-4441 .lswssp-logo-title::before {
  background-color: rgb(114, 74, 29);
}

#lswssp-logo-carousel-1 .lswssp-post-4440 .lswssp-logo-title::before {
  background-color: rgb(145, 70, 40);
}

#lswssp-logo-carousel-1 .lswssp-post-12 .lswssp-logo-title::before {
  background-color: rgb(175, 125, 67);
}

#lswssp-logo-carousel-1 .lswssp-post-13 .lswssp-logo-title::before {
  background-color: rgb(110, 141, 93);
}

#lswssp-logo-carousel-1 .lswssp-post-14 .lswssp-logo-title::before {
  background-color: rgb(67, 95, 65);
}

#lswssp-logo-carousel-1 .lswssp-post-16 .lswssp-logo-title::before {
  background-color: rgb(0, 101, 158);
}

#lswssp-logo-carousel-1 .lswssp-post-17 .lswssp-logo-title::before {
  background-color: rgb(106, 160, 200);
}

#lswssp-logo-carousel-1 .lswssp-post-18 .lswssp-logo-title::before {
  background-color: rgb(48, 101, 113);
}

#lswssp-logo-carousel-1 .lswssp-post-4438 .lswssp-logo-title::before {
  background-color: rgb(141, 137, 136);
}

.bg-top.vc_column_container > .vc_column-inner {
  background-position: top center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.row-300  {
  min-height: 300px;
}



/* Right border on this column */
.wpb_column.col-right-border > .vc_column-inner {
  border-right: 1px solid #ddd;
}

/* Bottom border on this column */
.wpb_column.col-bottom-border > .vc_column-inner {
  border-bottom: 1px solid #ddd;
}

/* Make all columns in this row equal height */
.equal-columns .wpb_column > .vc_column-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Let the image take natural height */
.equal-columns .wpb_single_image {
  flex: 0 0 auto;
}