.mb-10 {margin-bottom: 10px;}
.mb-20 {margin-bottom: 20px;}
.mb-30 {margin-bottom: 30px;}
.mb-40 {margin-bottom: 40px;}
.mb-50 {margin-bottom: 50px;}
.mb-60 {margin-bottom: 60px;}
.mb-70 {margin-bottom: 70px;}
.mb-80 {margin-bottom: 80px;}
.mb-90 {margin-bottom: 90px;}
.mb-100 {margin-bottom: 100px;}


@media only screen and (min-width: 1025px) {
  .row.item-center {
    align-items: center;
  }
}

body.page-template-meet-safety-pro .slider-section {
    text-align: center;
    padding: 0 0 30px;
}
body.page-template-meet-safety-pro .slider-section .author-name {
    margin-top: 20px;
}
h1 {
    font-size: 42px;
    line-height: 60px;
    color: #50c266;
    text-align: center;
}
#page-title {
  margin-bottom: 35px;
}
#select2-billing_country-container,
#select2-billing_state-container {
  border: 1px solid;
}
.container h1 {
  color: #0a751d;
}
p {
  font-size: 16px;
  line-height: 27px;
}
.woocommerce form .form-row .input-text,
.woocommerce-page form .form-row .input-text {
  height: 48px;
  padding-left: 15px;
}

#order_comments {
  height: 250px;
}

.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-form-coupon-toggle.woocommerce-info {
  width: 90%;
  margin: auto;
}

.woocommerce-checkout .entry-title {
  display: none;
}

.primary-menu.sub-title .menu-link.active {
  background-color: rgb(0, 122, 26);
  color: white;
}

.primary-menu.sub-title .menu-link.active span {
  color: white;
}

.color-bounce1 {
  color: red;
}
.color-bounce2 {
  color: green;
}
.color-bounce3 {
  color: blue;
}
.color-bounce4 {
  color: blueviolet;
}

@media only screen and (max-width: 676px) {
  .col-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

.img-thumbnail {
  text-align: right;
}
/* ----------------------------------------------------------------
  Custom CSS

  Add all your Custom Styled CSS here for New Styles or
  Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/



/* New home page CSS here */
.home.page-template h1,
.home.page-template h2,
.home.page-template h3,
.home.page-template h4,
.home.page-template h5,
.home.page-template h6 {
  margin-bottom: 10px;
  line-height: 1.25;
}
.home-content-section-1 {
  margin-top: 30px;
}
.lt-blue {
  background: #f3f5f9;
  text-align: center;
  margin-bottom: 20px;
}

/* Homepage hero band (.lt-blue) — vertical centring.
   The two columns were top-aligned with no padding on the band itself: the
   award image's only clearance from the nav was an ad-hoc `margin-top: 30px`
   on .wp-image-1852, while the band's HEIGHT was set by the *other* column
   (pt-4 + .home-content-section-1 margin-top + the button's margin-bottom:30px).
   Net effect on wide viewports: the full-bleed image sat tight under the nav
   (reads as clipped) with ~38px of dead band under it, and the two columns
   never optically aligned. Fix: symmetric fluid padding on the band, centre
   the row, and drop the per-element margins that were faking it. */
body.home .lt-blue {
  padding-top: clamp(24px, 2.4vw, 48px);
  padding-bottom: clamp(24px, 2.4vw, 48px);
}
body.home .lt-blue > .container > .row {
  align-items: center;
}
body.home .lt-blue > .container > .row > [class*="col-"] {
  padding-top: 0;
  padding-bottom: 0;
}
body.home .lt-blue .home-content-section-1 {
  margin-top: 0;
}
body.home .lt-blue .home-content-section-1 .btn-success {
  margin-bottom: 0;
}
/* Hero photo: fixed fluid frame + cover crop, so the band's height is set by
   the layout rather than by whatever aspect ratio the asset happens to have.
   max-width caps the upscale of the 540x360 source to ~1.04x. */
body.home .lt-blue .hero-media {
  display: block;
  width: 100%;
  max-width: 560px;
  height: clamp(190px, 15vw, 250px);
  margin: 0 auto;
  object-fit: cover;
  /* lower band of the frame: hands + phone, not torso. Keeps this crop
     distinct from the same photo's centre crop used by .box1 further down. */
  object-position: center 68%;
  /* the photo's right side is near-white and dissolves into the #f3f5f9
     band without a hairline to hold the edge. */
  border: 1px solid #dde3ec;
}

body.home .lt-blue .home-content-section-1 h2 {
  text-wrap: balance;
}

/* Award credentials as real, crawlable text — small, quiet, subordinate to
   the headline and the CTA. Hairline rule instead of a card. */
body.home .lt-blue .hero-awards {
  list-style: none;
  max-width: 62ch;
  margin: 22px auto 0;
  padding: 14px 0 0;
  border-top: 1px solid #dde3ec;
  font-family: Lato, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #55606f;
  text-wrap: balance;
}
body.home .lt-blue .hero-awards li + li {
  margin-top: 6px;
}

/* Focus floor. bootstrap.css:2536 does `.btn:focus { outline: 0 }` and never
   supplies a replacement, so the hero CTA (and every other button on the site)
   was keyboard-focusable with no visible indicator. :focus-visible = keyboard
   only; nothing changes for mouse users. Navy clears 3:1 against both the
   green button fill and the light band. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #0f2f4f;
  outline-offset: 2px;
}
.btn-default {
  color:#333333;
  background-color: white;
  border : 6px solid : orange;
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: none;
}
.h2 {
  color: #444;
}
.intro h1 {
  font-size: 44px;
  line-height: 60px;
  font-weight: 700;
  letter-spacing: 0px;
  color:#444;
}
.intro p{
     font-size: 1.18rem;
     line-height: 1.75;
     font-family: sans-serif;
}
.btn-default{     
  background-color: orange;
  /*border: 5px solid :orange;*/
  border:5px;
  border-color: white;
  text-transform: uppercase;
  font-weight: 800;
}
.box-image {
    height: 135px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 -15px 0 -15px;
    border: 2px solid #fff;
}
.box1 .box-image {
  background-image: url(/wp-content/themes/twenty-twenty-one-child/images/home-page/mobile-tablet.jpg);
}
.box2 .box-image {
  background-image: url(/wp-content/themes/twenty-twenty-one-child/images/home-page/cetp-requirements.jpg);
}
.box3 .box-image {
  background-image: url(/wp-content/themes/twenty-twenty-one-child/images/home-page/procedure-documents.jpg);
}
.box1 h2{
  color: #444;
  font-family:sans-serif;
}
.box2 h2{
  color: #444;
}
.box3 h2{
  color: #444;
}
.reporting-intro{
  text-align: center;
}
.reporting-intro h2{
  font-size: 42px;
}

.reporting-intro p {
  font-size: 18px;
  line-height: 32px;
}
.flex-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 20px 0 10px;
}
.flex-icon img {
  width: 40px;
  margin-right: 15px;
}
.home-last-section {
  margin-bottom: 50px;

}
.home-last-section{
  font-size: 12px;
}
/* New home page CSS here */




/*  start dot training page CSS here */

.testimonial-section p {
  color:#0a751d;
  font-size: 24px;
}
.row.middle-text {
  display: flex;
  align-items: center;
}
body.page-template-dot-training .testimonial-section p {
  line-height: 36px;
}
body.page-template-dot-training .employee-section {
  margin-top: 30px;
}
ul.es-list {
  margin-bottom: 30px;
}
.testimonial-section blockquote:before {
  content: ""
}
.testimonial-section blockquote {
border-left: 0px;
}
h1.dot-training-title {
color:#0a751d;
/*padding-left: 40px;*/
}
.employee-section h2 {
  margin-bottom: 20px;
}
.employee-section p{
  margin-bottom: 15px;
}
h4{
color: #32c34b;
margin-bottom: 0px;
}
ul {
padding-left: 25px;
margin: 0;
padding-top: 15px;
margin-bottom: 1rem;
}
h2{
color: #0a751d;
}
.box cite{
font-style: italic;
padding: 30px 0;
text-align: center;
font-size: 25px;
background: #0a751d;
color: var(--white);
/*font: normal normal normal 20px/35px Montserrat;*/
margin-top: 75px;
display: block;
padding-left: 30px;
}
.ui-li-list p{
padding-top: 0px;
margin: 0px;
}






/*start propane safety training here*/

.entry-title h1 {
    color: #0a751d;
    text-transform: uppercase;
    font-size: 42px;
    line-height: 60px;
}
.light-container {
  background: #f3f5f9;
  margin-bottom: 20px;
  display: block;

}

 @media only screen and (max-width: 767px) {
   .testimonial-section p {
    font-size: 20px;
    line-height: 28px;
    padding-bottom: 0px;
   }
   .testimonial-section{
    padding: 10px;
    margin: 0px;
    font-size:13px;
  }
   h2 {
    padding-top: 0px;
    margin: 0px;
   }
   .btn-default{
     padding-bottom: 5px;          
  }
  .dot-training-title{
    margin-bottom: 0px;
    text-align: left;
    padding-bottom: 0px;
  }
  .dot-training-title h1{
    padding-left: 0px;
  }
  .box cite {
    padding: 25px 10px;
    margin: 0px;
    font-size: 20px;
  }
  .difference-section{
    margin-bottom: 10px;
  }
  .light-background {
    padding: 25px 0;
  }
}





/*start oq  training here */
.safety-app-heading h1 {
  color: #0a751d;
  text-transform: uppercase;
  font-size: 48px;
  line-height: 60px;
  padding-top: 0;
}
h3{
  color: #0a751d;
}
.oq-training-h2{
  padding-top: 5px;
}
span.bold{
  font-size: 30px;
  font-weight: 800px;
}
.light-container{
  background: #f3f5f9;
  margin-bottom: 20px;
  display: block;

}


/* @media only screen and (max-width: 767px) { */
@media only screen and (max-width: 767px) {
.btn-default{
     padding-bottom: 3px;
}
  .safety-pro{
    padding-top: 10px;
  }
   span{
    font-size: 15px;
    color: #007a1a;
   }
   .operator-training{
    font-size: 20px;
    color: green;
    padding-bottom: 15px;
   }
}

/*end oq training */



/*start training service packages here */
.intro h1 {
  font-size: 36px;
  text-align: center;
  margin: 0;
  padding: 0;
}
.intro .huge {
  color: #444;
  font-weight: 800;
  font-size: 64px;
}
.ui-li-list{
  margin-top: 0px;
  padding-left: 0px;
  padding-bottom: 10px;
}
.ui-li-heading{
  padding-bottom: 0px;
  margin-bottom: 0px;
  }
.training-section p{
  padding-top: 0px;
}
.light-container{
  background: #f3f5f9;
  margin-bottom: 20px;
  display: block;
  margin-top: 0px;
}


/*responsive code here*/
@media only screen and (max-width: 767px) {
  .row h1 {
    font-size: 24px;
    line-height: 32px;
  }
  h2.border-header {
    font-size: 21px;
    line-height: 30px;
  }
  .ui-li-list {
    padding-left:15px;
    padding-bottom: 15px;
  }
  .ui-li-heading {
    padding-bottom: 0px;
    margin-bottom: 0px;
  }
  .border-header h2 {
    font-size: 30px;
    text-align: center;
  }
  .pragraph {
    padding-top: 7px;
  }
  .btn-default {
    margin-top: 5px;
  }
  .customer-saying-section{
    font-size: 35px;
    padding-bottom: 20px;
  }
  .widget.widget_links  {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .reporting-intro h2 {
    font-size: 26px;
    margin: 0;
    padding: 0;
  }
  .intro span.huge {
    font-size: 36px;
    line-height: 54px;
    margin-bottom: 0px;
    display: inline-block;
    margin-top: 15px;
  }
}
/*end training service packages here */

/*start hands on training packages here */
  .industry-expert {
     padding-top: 30px;
  }
  .light-container{
    background: #f3f5f9;
    margin-bottom: 20px;
    display: block;
  }
  .dark .footer-widgets-wrap a:hover {
    color: #1ee548;
  }
  .dark .menu-item:hover > .menu-link, 
  .dark .menu-item.current > .menu-link {
      color: #26d433;
  }
  .more-info-button {
    text-align: center;
    margin-bottom: 40px;
  }
  .request-consultant-button {
    margin-bottom: 20px;
  }

  .process-section h4 {
    margin-bottom: 15px;
  }
/*start hands on training packages here */


/* start responsive code here*/
@media only screen and (max-width: 767px) {
  .ui-li-list{
       padding-left:20px;
  }
  
  .heading2 {
    margin-bottom: 30px;
    color:green; 
  }
  .industry-expert{
     padding-bottom: 15px;
     padding-top: 25px;
   }
   .requirements-section{
    padding-bottom: 2px;
    padding-top: 0px;
   }
   .ui-li-list{
      margin-top: 0px;
      padding-left: 0px;
      padding-bottom: 10px;
  }
  .ui-li-list.list-first-section ul,
  .ui-li-list.list-first-section {
    margin-bottom: 0px;
    padding-bottom: 0px;
  }
  .ui-li-list.list-second-section ul,
  .ui-li-list.list-second-section {
    margin-top: 0px;
    padding-top: 0px;
  }
  .home-content-section-1 h2 {
    text-align: center;
  }
}
/*end hands on training  packages here */


 /*propane mobile safety code  start*/
.callout {
  background:#0a751d;
  color: white;
  margin-top: 25px;
  padding-bottom: 0px;
  padding-top:20px;
}
.callout h2{
  color: white;
}
.inspection-section {
  background:#fff;
  padding: 25px 0 30px;
  margin: 0px auto;
}
.btn-success {
    margin-bottom: 30px;
    padding: 10px 25px;
    letter-spacing: 1px;
}
.get-start-section {
  margin-top: 30px;
}
.safety-app-heading {
  text-align: center;
}
.inspection-ul-design {
  padding-left: 0px;
  padding-bottom: 10px;
}
.light-background .first-section {
  margin-bottom: 0px;
}
.policies-procedure-section h2 {
  margin-bottom: 40px;
}
.scenario-section h2 {
  font-size: 42px;
  line-height: 54px;
  margin-bottom: 30px;
}
.scenario-section h2 span {
  font-weight: 600;
}
.policy-bottom-section.new-first-section {
  margin-bottom: 45px;
}
.gray-bg.security-plans-content {
  margin-bottom: 0px !important;
}

/*homepage code*/
.small-text {
  min-height: 210px;
}

/* 4 Step Process: cap the "Repeat" icon so it doesn't dwarf the real
   screenshots in steps 1-3 (was rendering at native 600x600, no width
   constraint at desktop widths). Mobile/tablet already had their own
   sizing below via img.refresh-image media-query rules. */
img.refresh-image {
  width: 220px;
  height: auto;
  margin-top: 40px;
}

@media only screen and (min-width: 1450px) {
  .small-text {
    min-height: 180px;
  }
}

@media only screen and (max-width: 1270px) {
  .small-text {
    min-height: 220px;
  }
  .home.page-template h2 {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1024px) {
  .home.page-template h2 {
    line-height: 30px;
  }
  .small-text {
    min-height: 300px;
  }
}

@media only screen and (max-width: 767px) {
  .small-text {
    min-height: auto
  }
}












@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .sub-title .menu-container>.menu-item>.menu-link {
      position: relative;
      line-height: 15px;
      padding: 15px 9px !important;
      text-transform: uppercase;
    }
    /* band padding is symmetric + fluid above; the old 20/10 split re-broke
       the vertical centring at tablet widths. */
    .home.page-template .home-content-section-1 h2 {
      line-height: 30px;
      min-height: auto;
    }
    body.home .home-content-section-1 {
      margin-top: 0px;
    }
    .full-header .primary-menu .menu-container {
        padding-top: 0;
    }
    body.home .intro.text-center {
	    margin-top: 0px;
	}

	.container h1.dot-training-title,
	.entry-title h1,
	.dot-training-title h1,
	.safety-app-heading h1,
	.intro h1,
	.row h1,
	.home.page-template h1,
	h1.entry-title,
	.cetp-header h1.entry-title,
	.container h1,
	.home.page-template h1,
	h1.dot-training-title {
		font-size: 36px;
		line-height: 48px;
	}



	.safety-app-heading h1,
	h1,  {
	    font-size: 36px;
	    line-height: 48px;
	}
  } 
  /* @media only screen and (min-width: 768px) and (max-width: 1024px) { */

@media only screen and (max-width: 767px) {
    .singular .has-post-thumbnail .entry-header {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    body.single .entry-content p img {
      width: 100%;
    }
    body.single .post-navigation .nav-links {
      clear: both;
      height: 40px;
    }
    body.single .post-navigation .nav-links .nav-previous {
      float: left;
    }
    body.single .post-navigation .nav-links .nav-next {
      float: right;
      margin-top: 0;
    }
    h1 {
      font-size: 1.5rem;
      line-height: 2rem;
      text-align: center;
    }
    .container h1.dot-training-title{
      padding-top: 0px;
      font-size: 24px;
      line-height: 32px;
    }
    .btn-success{
      margin-bottom: 30px;
    }
    .ui-li-list{
      margin-bottom: 10px;
    }
    .testimonial-section blockquote {
      border-left: 0px;
      padding: 0 0 15px;
    }
    .testimonial-section blockquote > br {
      display: none;
    }

  .mobile-hide {
    display: none;
  }

  /* Home page */
  body.home .container .col-md-6 {
    margin: auto;
  }
  #copyrights {
    margin-top: 30px;
    padding-top: 10px;
  }
  .home.page-template h1 {
    margin-top: 15px;
  }



  .btn-success {
    margin-bottom: 25px;
  }
  .inspection-ul-design {
    padding-left: 0px;
    padding-bottom: 0px;
  }
  .documentation-industry {
    padding-bottom: 15px;
  }
  .safety-app-heading {
    padding-top: 0px;
  }
  #page-title.page-title-mini {
     padding: 20px 0;
  }
  

  /*safety app */
  .process-section .row > .col-sm-12,
  .process-section .row > .col-md-3 {
    width: 100%;
  }
  .process-section .row > .col-md-3 {
    margin-bottom: 20px;
  }
  .safety-app-heading h1 {
    font-size: 24px;
    line-height: 32px;
    margin: 0 auto;
    padding: 0;
    padding-top: 0px;
    text-align: center;
  }
  h2.big {
    font-size: 28px;
    line-hegiht: 36px;
  }
  .safety-app-heading p {
      margin-top: 20px;
      margin-bottom: 25px;
  }
  .light-background .first-section {
    margin-bottom: 0px;
  }
  .center-image{
  }
  /*home page code*/
  .intro span.huge{
    margin-top: 0px;
  }

  .intro.text-center {
    margin-top: 10px;
  }
  .lt-blue {
    margin-bottom: 0px;
  }
  
  h1.entry-title {
    font-size: 24px;
    line-height: 32px;
    text-align: center;
   }

  .prevent-safety-heading {
      font-size: 18px;
      margin-bottom: 15px;
   }
   .prevent-safety-heading br {
    display: none;
   }
   span.bold {
    font-size: 21px;
  }
  .mobile-image-mb15{
      margin-bottom: 15px !important;
  }
  .mobile-image-mt20{
      margin-top: 20px !important;
  }
  .step4-process-heading {
    margin-bottom: 20px;
  }
  .policies-procedure-section {
    margin-bottom: 25px;
  }
  .policies-procedure-section h2 {
    margin-bottom: 40px;
  }
  .scenario-section h2 {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 20px;
  }
  .scenario-section h2 span {
    font-weight: 600;
  }
  .scenario-section .first-section {
    margin-bottom: 0px;
  }
  .scenario-section .first-section img {
    display: none;
  }
  .policy-bottom-section > .row > .col-md-3 {
    margin-bottom: 30px;
  }
  .policy-bottom-section.new-first-section {
    margin-bottom: 5px;
  }
  h2.border-header.text-center {
    padding-bottom: 20px;
  }
  .cetp-header h1.entry-title {
    margin-bottom: 0px;
  }
  .cept-bottom-section h2.border-header {
    margin-top: 15px;
  }
  body.page-template-meet-safety-pro #page-title {
    margin-bottom: 0px;
  }
  body.page-template-meet-safety-pro .slider-section {
    text-align: center;
    padding: 0px 0 0px;
  }
  h2.wsite-content-title {
    margin-bottom: 15px;
  }
  .green-bg-section ul {
    margin: 0px 0 0px 0px;
    padding-top: 0px;
  }
  .green-bg-section {
    padding: 20px 15px 35px;
    margin-bottom: 0px;
  }
  .app-section {
    margin-bottom: 30px;
  }
  h4.find-out-title {
    font-size: 18px;
    line-height: 24px;
  }
  ul.footer-apps-section li {
    width: 44%;
  }
  .content-section-3 .col-sm-6:nth-child(2) ul {
    margin-bottom: 0px;
  } 
  .post-thumbnail-image {
    margin-bottom: 20px;
  }
  .col-mb-80>.col, .col-mb-80>[class*="col-"] {
    padding-bottom: 30px;
  }
  .col-mb-80 {
    margin-bottom: 0px;
  }
  img.aligncenter, div.aligncenter, div.aligncenter img {
      width: 360px;
  }
  img.refresh-image {
      width: 280px;
  }
  .process-section h4 {
      font-size: 20px;
  }
  .process-section h4 span {
      font-size: 20px;
  }
  .light-background {
      padding: 50px 0;
  }
  .inspection-section .col-md-4 {
    width: 100%;
  }
  .owl-carousel .owl-dots, .owl-carousel .owl-nav {
    display: none;
  }
  .prevent-safety-heading h2 {
    margin-bottom: 40px;
  }
  .wp-image-154.get-in-touch-now-image {
    margin-bottom: 30px !important;
  }
  .footer-widgets-wrap .col-sm-12 {
    width: 100% !important;
  }
  .col-md-6.intro.text-center.mobile-text {
    margin-top: 0px;
  }
  body.page-template-cetp-training .light-background img {
    margin-bottom: 0px;
  }
  body.page-template-dot-training .testimonial-section blockquote {
    padding: 15px 0 0px;
  }
  body.page-template-dot-training .employee-section {
    margin-top: 0px;
  }
  body.page-template-dot-training .light-background {
    padding-bottom: 0px;
    padding-top: 20px;
  }
  .propane-safery-pro-logo {
    width: 300px;
  }
  .top-header-section .col-sm-5 {
    width: 100%;
  }
}
/* @media only screen and (max-width: 767px) { */




@media only screen and (max-width: 395px) {
  img.aligncenter, div.aligncenter, div.aligncenter img {
      width: 280px;
  }
  img.refresh-image {
      width: 200px;
  }
}
/* @media only screen and (max-width: 395px) { */

/* Contact form "Services" select — match size of the text inputs above it (deck slide 21) */
.wpcf7-form .wpcf7-select.sm-form-control {
  padding: 8px 14px;
  font-size: 15px;
  line-height: 1.42857143;
}
/* ==========================================================================
   2026-09-23 web-revisions deck (PSP) — shared image fixes.
   Root cause of every "stretched" image: the mirror kept each <img>'s HTML
   width/height attributes but the theme never set height:auto, so any CSS that
   narrows the width (max-width, col widths, 40px icons) left the attribute
   height in place and squashed/stretched the picture. One rule fixes them all.
   ========================================================================== */
img {
  max-width: 100%;
  height: auto;
}
/* Header logo: the theme fixes the logo HEIGHT (80px / 60px sticky), so the
   width must follow the image's own ratio instead of the 374px attribute. */
#logo img {
  width: auto;
}

/* Emergency Action Plans: requirement icons — square and sized to the heading
   they sit beside, not the full column width (huge on phones). */
body.page-template-emergency-action-plans .col-sm-2 img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
@media only screen and (max-width: 767px) {
  body.page-template-emergency-action-plans .col-sm-2 img {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
  }
}

/* DOT Training: breathing room between "THE DIFFERENCE WITH Propane Safety Pro"
   and the copy under it; both section images sit level with their text. */
body.page-template-dot-training .difference-section h2.border-header {
  margin: 36px 0 28px;
}
body.page-template-dot-training .col-md-3 img {
  display: block;
  width: 100%;
  margin: 0 auto 20px;
}

/* Article images, site-wide (deck: "all article images uniform 612x400").
   Every blog post wraps its body in .type-post, so this one rule gives every
   in-article picture the same 612x400 frame (smaller columns keep the same
   612:400 shape) and crops with object-fit instead of stretching. */
body.single-post .type-post img {
  display: block;
  width: 100%;
  max-width: 612px;
  height: auto;
  aspect-ratio: 612 / 400;
  object-fit: cover;
  object-position: center 25%;
  margin: 0 auto 20px;
}

/* Phones: several templates zero the .container padding but keep Bootstrap's
   -15px .row margins, so pages scrolled 16px sideways at 375px. clip (not
   hidden) stops the sideways scroll without breaking the sticky header. */
@media only screen and (max-width: 767px) {
  html, body {
    overflow-x: clip;
  }
}

/* #106 (2026-10-17): the theme sets .primary-menu{flex:0 0 auto}, so on desktop widths below ~1360px the
   9-item menu kept its full one-line width and ran past the right edge (1280: +71px, 1024: +129px).
   Let the nav shrink to the header row and wrap its items, and tighten link spacing on mid widths. */
@media (min-width: 992px) {
  #header .primary-menu { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  #header .primary-menu .menu-container { justify-content: center; margin-right: 0; border-right: 0; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  #header .primary-menu .menu-container > .menu-item > .menu-link { padding-left: 11px !important; padding-right: 11px !important; letter-spacing: 0.5px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  #header .primary-menu .menu-container > .menu-item > .menu-link { padding-left: 5px !important; padding-right: 5px !important; letter-spacing: 0; font-size: 12px; }
}
@media (min-width: 992px) and (max-width: 1023.98px) { #header .primary-menu .menu-container > .menu-item > .menu-link { padding-left: 3px !important; padding-right: 3px !important; } }

/* psp-answer: state + Duty to Warn answer pages match the existing answer-page pattern
   (h1 in the page-title banner; body 18px / 1.7em like the inline p styles on sibling pages;
   banner clears the fixed ~119px desktop header, same fix as cetp-training). */
body.psp-answer #content article p,
body.psp-answer #content article li {
  font-size: 18px;
  line-height: 1.7em;
}
@media only screen and (min-width: 992px) {
  body.psp-answer #page-title.page-title-mini {
    padding-top: 88px;
  }
}
/* breadcrumb on its own line under a long h1 (was absolute right, overlapped the title) */
body.psp-answer #page-title.page-title-mini .breadcrumb {
  position: static !important;
  transform: none !important;
  width: auto !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  justify-content: flex-start;
}

/* October 17: contrast on existing green CTAs and dark footer surfaces. */
.btn.btn-success { background-color: #1c7731; border-color: #1c7731; }
#copyrights a, #footer span[title] strong { color: #64c779 !important; }
.breadcrumb-item.active { color: #60686f; }


/* October 2026 design pass: scoped to reviewed pages. */
/* October reading layouts; existing Poppins/Lato and safety-green palette. */
body.design-pass #page-title { padding: 40px 0 !important; background: #f1f6f3; margin-bottom: 0 !important; text-align: left; }
body.design-pass #page-title .container { width: 100%; max-width: 800px; padding-inline: 20px; }
body.design-pass #page-title h1 { font-family: Poppins, sans-serif; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem) !important; line-height: 1.25; letter-spacing: -.02em; text-transform: none; color: #123c27; }
body.design-pass #page-title .breadcrumb { position: static !important; width: auto !important; margin: 20px 0 0 !important; padding: 0 !important; transform: none; display: block; font-size: 14px; line-height: 1.7; text-align: left; }
body.design-pass :is(main article, article.answer-article, article.post) { width: 100%; max-width: 800px; margin: 0 auto; padding-inline: 20px; float: none; color: #34463b; }
body.design-pass article :is(p,li) { font-size: 18px; line-height: 1.75; }
body.design-pass article p { margin-bottom: 24px; }
body.design-pass article :is(h2,h3) { font-family: Poppins, sans-serif; color: #136522; line-height: 1.35; margin: 40px 0 16px; }
body.design-pass article h2 { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.875rem); }
body.design-pass article h3 { font-size: 21px; }
body.design-pass article > p:first-of-type:not(:has(img)), body.design-pass article .answer-summary { padding: 24px; border-left: 4px solid #136522; background: #f1f6f3; color: #123c27; }
body.design-pass article a { color: #126025; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.design-pass article li { padding-left: 4px; margin-bottom: 12px; }
body.design-pass article :is(img,iframe,video) { max-width: 100%; }
body.design-pass article img { height: auto; }
@media(max-width:767px) { body.design-pass #page-title { padding: 28px 0 !important; } body.design-pass article > p:first-of-type:not(:has(img)), body.design-pass article .answer-summary { padding: 20px; } body.design-pass #content .content-wrap { padding-block: 32px; } }

body.design-pass :is(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 3px solid #135476; outline-offset: 4px; box-shadow: 0 0 0 2px #fff; }
body.design-pass :is(h1,h2,h3,p,li) { overflow-wrap: break-word; }
body.design-pass :is(header,footer) a { text-underline-offset: 3px; }

/* Exported theme rules use important link resets and legacy inline highlights. */
body.design-pass article a:not(.btn) { text-decoration: underline !important; }
body.design-pass article a.btn { color: #fff; background-color: #17632a; }
body.design-pass article h4 { color: #126025; }
body.design-pass article span[style*="#fd8e8e"] { color: #a62727 !important; }

/* Let the two-row desktop navigation reserve its actual height above the title. */
@media (min-width: 992px) {
  body.design-pass #header:not(.sticky-header) { height: auto !important; }
  body.design-pass #header:not(.sticky-header) #header-wrap { position: relative !important; }
  body.design-pass #header:not(.sticky-header) .header-wrap-clone { display: none; }
}

/* Round 1: keep breadcrumb separators with the following text on narrow screens. */
body.design-pass #page-title .breadcrumb li { display: inline; float: none; padding: 0; font-size: 14px; line-height: 1.7; }
body.design-pass #page-title .breadcrumb-item + .breadcrumb-item::before { float: none; padding: 0 0 0 8px; content: "/\00a0"; }

/* Both exported answer wrappers and the training template use a 40px entry gap. */
body.design-pass #content .content-wrap { padding-top: 40px; }
body.design-pass #page-title + .bg-1.pt-5 { padding-top: 40px !important; }
body.design-pass #main .cetp-header:has(> article) { padding: 40px 0 0 !important; }

/* Round 1: promote existing closing links and separate the disclosure footer. */
body.design-pass article a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: calc(100% - 1em); padding: 10px 18px; white-space: normal; line-height: 1.5; text-decoration: none !important; }
body.design-pass article p.article-disclosure { margin-top: 32px; padding-top: 20px; border-top: 1px solid #ccd4ce; color: #60686f; font-size: 15px !important; line-height: 1.6 !important; }
body.design-pass article p.article-disclosure + p.article-disclosure { margin-top: 0; padding-top: 0; border-top: 0; }

/* Round 2: breadcrumb anchors must match their 14px list items. */
body.design-pass #page-title .breadcrumb a { font-size: inherit; text-decoration: underline !important; text-underline-offset: 3px; }

/* Round 2: sentence links wrap with prose. The existing standalone demo
   links and news buttons retain the 44px button rule above. */
body.design-pass :is(main,#main) article:not(.type-post) :is(p,li) a.btn:not([href="https://propanesafetypro.com/get-access/"]) {
  display: inline;
  font-size: inherit;
  letter-spacing: normal;
  font-weight: 600;
  padding: .15em .5em;
  min-height: 0;
  line-height: inherit;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Round 3: separate the existing author bio from the answer and disclosures. */
body.design-pass article p.article-author {
  background: #f1f6f3;
  font-size: 16px !important;
  padding: 16px 20px;
  border-radius: 4px;
  margin-top: 32px;
}

/* Round 4: the consulting introduction flows below its uncropped portrait. */
body.design-pass #post-342 .first-div-section {
  display: block !important; /* Override the exported inline flex layout. */
}
body.design-pass #post-342 .first-div-section > img {
  float: none;
  width: min(100%, 300px);
  max-width: 300px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0 0 24px;
}

/* Match this post's inherited Bootstrap wrappers to the title's reading width. */
body.design-pass .container:has(> .row > .col-sm-8.offset-2 > #post-342) {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 20px;
}
body.design-pass .row:has(> .col-sm-8.offset-2 > #post-342) {
  margin-inline: 0;
}
body.design-pass .col-sm-8.offset-2:has(> #post-342) {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding-inline: 0;
}
body.design-pass #post-342 {
  padding-inline: 0;
}