/* == PRODUCTS SECTIONS ONLY == */

.hero { background-image: url('../img/hero/hero-products.jpg'); background-position:right bottom; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;}
.hero::after  { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.1) 20%);}

@media (max-width: 1200px) {.hero {background-image: url('../img/hero/hero-products-md.jpg');}}

hr.sm {width:200px; border-top-width:2px; color:var(--pureflo-blue);}
.img-overlap {margin-bottom:-250px;}

/* === INDEX CERTIFICATIONS === */

.certifications .niosh {background:var(--almost-white); padding:1.5rem; border-radius:0.35rem; height: 100%;}
.certifications .niosh .bi-shield,
.certifications .niosh .subbrow {color:var(--pf-blue);}
.certifications .niosh .card-body a {color:var(--ada-blue);}

.certifications .ence {background:#f4f9f9; padding:1.5rem; border-radius:0.25rem; height: 100%;}
.certifications .ence .bi-globe,
.certifications .ence .subbrow,
.certifications .ence .card-body a {color:#007744;}

.certifications .card-body a {text-transform: uppercase; font-size:0.9rem; display: inline-flex;  gap: 5px; transition: 0.3s ease;}
.certifications .card-body a:hover {color:var(--pf-blue); text-decoration: underline;}
.certifications  a:hover i { transform: translateX(4px); }

.certifications {font-size: 1rem;}
.certifications .header {font-weight: 500;}
.certifications .header .bi {font-size:2.5rem; margin-right:8px;}
.certifications .header small {display: block; font-size: 0.85rem; font-weight: 300;}
.certifications hr {border-top-color: #d9e4f2;}

.certifications .card-img-top {object-fit: cover; transition: transform 0.5s ease;}
.certifications .card-img-top:hover {transform: scale(1.1);}
.certifications .card .card-title {font-size: 1.4rem; margin:0 0 5px 0; font-weight: 600;}
.certifications .card .subbrow {font-weight: 500; margin-bottom: 1rem;}

.certifications .cert-features .card {display: flex; flex-direction: row; background: var(--almost-white); background: linear-gradient(90deg, rgba(235, 241, 249, 1) 0%, rgba(244, 249, 249, 1) 65%);}
.certifications .cert-features .card-body {display:flex; flex: 1; font-size: 0.8rem;}

.certifications .cert-features .card-body .bi {font-size:2rem; margin-right:5px; color:var(--pf-blue);}
.certifications .cert-features .card-body strong {display: block;}

.certifications .cert-features.niosh-feat .card-body .bi {color:var(--ada-blue);}
.certifications .cert-features.ence-feat .card-body .bi {color:#007744;}

@media (min-width: 1400px) { 
	.certifications .niosh .card, 
	.certifications .ence .card {min-height: 385px;}
	.certifications .cert-features .card {min-height: auto;}
}
@media (max-width: 950px) { .certifications .cert-features .card-body {flex-direction: column;}}
@media (max-width: 400px) {
    .certifications .cert-features .card {flex-direction: column; }
    .certifications .cert-features .card-body { width: 100%; flex: 0 0 100%; text-align: center;}
}

/* === SUB PAGES HERO === */


.hero.esm { background-image: url('../img/hero/hero-esm-niosh.jpg'); background-position:right top; background-repeat: no-repeat; background-size: cover;}
.hero.esm::after  { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.1) 35%);}
@media (max-width: 1200px) {.hero.esm {background-image: url('../img/hero/hero-esm-niosh-md.jpg'); }}
@media (max-width: 650px) {.hero.esm {background-image: url('../img/hero/hero-esm-niosh-sm.jpg'); background-position:center top;}}

.hero.esm-en { background-image: url('../img/hero/hero-esm-en.jpg'); background-position:left center; background-repeat: no-repeat; background-size: cover;}
.hero.esm-en::after  { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.1) 35%);}
@media (max-width: 1200px) {.hero.esm-en {background-image: url('../img/hero/hero-esm-en-md.jpg'); background-position:right top;}}

.hero.pf3000 { background-image: url('../img/hero/hero-pf3000.jpg'); background-position:left top; background-repeat: no-repeat; background-size: cover;}
.hero.pf3000::after  { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.1) 35%);}
@media (max-width: 1200px) {.hero.pf3000 {background-image: url('../img/hero/hero-pf3000-md.jpg'); background-position:right top;}}
@media (max-width: 650px) {.hero.pf3000 {background-image: url('../img/hero/hero-pf3000-sm.jpg'); background-position:center bottom;}}

.hero.pf3000-en { background-image: url('../img/hero/hero-pf3000-en.jpg'); background-position:right top; background-repeat: no-repeat; background-size: cover;}
.hero.pf3000-en::after  { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.1) 35%);}
@media (max-width: 1200px) {.hero.pf3000-en {background-image: url('../img/hero/hero-pf3000-en-md.jpg');}}
@media (max-width: 650px) {.hero.pf3000-en {background-image: url('../img/hero/hero-pf3000-en-sm.jpg'); background-position:center bottom;}}

.hero.purelite { background-image: url('../img/hero/hero-purelite.jpg'); background-position:right top; background-repeat: no-repeat; background-size: cover;}
.hero.purelite::after  { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.1) 35%);}
@media (max-width: 1200px) {.hero.purelite {background-image: url('../img/hero/hero-purelite-md.jpg'); background-position:right top;}}

@media (max-width: 992px) {.hero::after { background: linear-gradient(0deg,rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.1) 95%) !important;}}

.quick-scan h5 {font-weight:600;}
.quick-scan p {font-size:1.1rem; opacity:.9;}

.trust-bar {text-align: center; padding:1rem; color:#ffffff; font-size:1.5rem; font-family: "new-science"; font-weight: 500; letter-spacing: 5px;}
@media (max-width: 768px) {.trust-bar { font-size: 1.3rem; line-height: 1.2;} }
@media (max-width: 576px) {.trust-bar { font-size: 1rem; font-weight: 500;} }

    /* == CARDS == */
    
.features .card-img-top {object-fit: cover; transition: transform 0.5s ease;}
.features .card-img-top:hover {transform: scale(1.2);}
.features .card-title {font-size:1.35rem; font-weight: 600;}
.features .card-text {font-size:1.2rem;}

    /* == GALLERIES == */

#galleryMainImage { max-height: 500px; object-fit: contain; }
.gallery-thumb { background:none; border:0; width:50px; height:50px; object-fit: cover; cursor: pointer; transition: all 0.2s ease; opacity: 0.5; }
.gallery-thumb:hover { transform: scale(1.05); opacity: 1;}
.gallery-thumb.active { border: 2px solid var(--pureflo-blue); opacity: 1;}
@media (max-width: 768px) {#galleryMainImage { max-height: 350px;} }

    /* === VERTICAL PRODUCT TABS === */

.product-tabs .nav-tabs { border: none; background: color-mix(in srgb, var(--background-color), transparent 50%); border-radius: 16px; backdrop-filter: blur(8px); }
.product-tabs .nav-tabs .nav-item { margin-bottom: 15px; }
.product-tabs .nav-tabs .nav-item:last-child { margin-bottom: 0; }
.product-tabs .nav-tabs .nav-link { width: 100%; padding: 20px; border: none; border-radius: 12px; background: var(--background-color); transition: all 0.4s ease; position: relative; overflow: hidden; cursor: pointer; }
.product-tabs .nav-tabs .nav-link .d-flex { position: relative; z-index: 1; }
.product-tabs .nav-tabs .nav-link .icon-box { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; background: color-mix(in srgb, var(--pureflo-blue), transparent 92%); transition: all 0.2s ease; }
.product-tabs .nav-tabs .nav-link .icon-box i { font-size: 24px; color: var(--pureflo-blue); transition: all 0.2s ease; }

.product-tabs .nav-tabs .nav-link h4 { font-size: 1rem; letter-spacing:normal; font-weight: 600; margin: 0 0 5px 0; color: var(--hd-color); transition: all 0.4s ease; }
.product-tabs .nav-tabs .nav-link p { font-size: 14px; margin: 0; color: color-mix(in srgb, var(--main-color), transparent 40%); transition: all 0.4s ease; }
.product-tabs .nav-tabs .nav-link:hover { transform: translateY(-2px); }
.product-tabs .nav-tabs .nav-link:hover::before { opacity: 1; }

.product-tabs .nav-tabs .nav-link:hover h4 { color: var(--pureflo-blue); }
.product-tabs .nav-tabs .nav-link:hover p { color: color-mix(in srgb, var(--main-color), transparent 20%); }
.product-tabs .nav-tabs .nav-link:hover .icon-box {box-shadow: 5px 5px 5px 2px rgba(0, 75, 136, 0.3);}

.product-tabs .nav-tabs .nav-link.active { background: var(--pureflo-blue); }
.product-tabs .nav-tabs .nav-link.active::before { opacity: 0; }
.product-tabs .nav-tabs .nav-link.active h4 { color: #ffffff; }
.product-tabs .nav-tabs .nav-link.active p { color: color-mix(in srgb, #ffffff, transparent 20%); }
.product-tabs .nav-tabs .nav-link.active .icon-box { background: color-mix(in srgb, #ffffff, transparent 85%); }
.product-tabs .nav-tabs .nav-link.active .icon-box i { color: #ffffff; }

.product-tabs .tab-content {color: color-mix(in srgb, var(--main-color), transparent 20%); font-size: 1rem; }
.product-tabs .tab-content .content-box { background: var(--background-color); border-radius: 1rem; padding: 1.5rem 2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: all 0.4s ease; }
.product-tabs .tab-content .content-box h3,
.product-tabs .tab-content .content-box .h3 { font-size: 1.5rem; color: var(--hd-color); margin-bottom: 20px; position: relative; padding-bottom: 15px; }
.product-tabs .tab-content .content-box h3::after,
.product-tabs .tab-content .content-box .h3::after { content: ""; position: absolute; bottom: 0; left: 0; width: 50%; height: 3px; background: var(--pureflo-blue); border-radius: 3px; }

.product-tabs .tab-content .content-box .image-box { position: relative;  overflow: hidden; }
.product-tabs .tab-content .content-box .image-box img { transition: all 0.6s ease; max-width:300px; }
.product-tabs .tab-content .content-box .image-box:hover img { transform: scale(1.05); }
.product-tabs .tab-pane { transition: all 0.4s ease; }
.product-tabs .tab-pane.fade { transform: translateY(10px); opacity: 0; }
.product-tabs .tab-pane.show { transform: translateY(0); opacity: 1; }

@media (max-width: 991px) { .product-tabs .nav-tabs { margin-bottom: 30px; }
  .product-tabs .nav-tabs .nav-item { margin-bottom: 0; }
  .product-tabs .nav-tabs .nav-link { padding: 5px 8px; background:#f9f9f9;}
  .product-tabs .nav-tabs .nav-link .icon-box { width: 30px; height: 30px; }
  .product-tabs .nav-tabs .nav-link .icon-box i { font-size: 20px; }
  .product-tabs .tab-content .content-box { padding: 30px; }
  .product-tabs .tab-content .content-box h3 { font-size: 24px; }
}

@media (max-width: 767px) { .product-tabs .nav-tabs .nav-item { margin-bottom: 10px; }
  .product-tabs .nav-tabs .nav-link h4 { font-size: 15px; }
  .product-tabs .nav-tabs .nav-link p { font-size: 13px; }
  .product-tabs .tab-content .content-box { padding: 25px; }
  .product-tabs .tab-content .content-box h3 { font-size: 22px; }
  .product-tabs .tab-content .content-box p { font-size: 15px; }
}

    /* PRODUCT CAROUSELS */

.pf-icons  {flex-wrap: wrap; max-width: 100%; margin-inline: auto;}
.pf-icons button {border:0; background:none; max-width: 100px; opacity: .5;}
.pf-icons button span {display: block; font-size:14px; font-weight: 500;}
.pf-icons button.active {opacity: 1;}
.pf-icons button img {max-width: 75px; filter: grayscale(100%);}
.pf-icons button.active img {filter:none;}

@media (max-width: 992px) {
    .pf-icons button {flex: 0 1 75px;}
    .pf-icons button img {display: block; max-width: 100%; height: auto;}
}
@media (max-width: 500px) {.pf-icons button img {max-width: 55px;} }

#pfCarousel {font-size:1rem; background: var(--background-color); border-radius: 1rem; padding: 1.5rem 2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: all 0.4s ease;}
#pfCarousel h3, #pfCarousels h3 {font-size:1.4rem;}
#pfCarousel .image-box { position: relative;  overflow: hidden; text-align:center; }
#pfCarousel .image-box img { transition: all 0.6s ease; width:100%; max-width:300px; }
#pfCarousel .image-box:hover img { transform: scale(1.05); }
#pfCarousel .callout-list li {margin-bottom: 0;}

#certSelect {background-color: #1d5aaa; border-color: #1d5aaa; color: #fff;  cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.343 4 3.204 4h9.592c.861 0 1.319 1.013.753 1.658L8.753 11.14a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");}

    /* CERTIFICATION MARKS */

.niosh-logo {position:absolute; bottom:1rem; right:1rem; max-width: 125px; filter: grayscale(100%);}
.ce-mark {position:absolute; bottom:1rem; right:2rem; max-width:75px; }
.ce-mark.bottom-left { bottom:2rem; left:2rem; }

@media (max-width: 992px) { 
    .ce-mark.bottom-left {left:auto; bottom:1rem; right:1rem;} 
    .niosh-logo {margin:1rem 0 0.5rem; position:static;}
}
@media (max-width: 768px) { #pfCarousel .ce-mark { margin:0.5rem 0 0.5rem; position:static; max-width: 55px;} }
@media (max-width: 450px) { .ce-mark { margin-top:1.5rem; position:static; max-width: 55px;} }

.table-striped tbody tr > th {font-weight: 500;}
.table-striped tbody tr > th small {display:block; font-weight:300;}
.table-striped tbody tr.header > th {background-color: var(--pureflo-blue) !important; color: #fff; }

.table-striped.specs {font-size:0.95rem;}
.table-striped.specs.checks td {text-align: center;}
.table-striped.specs.checks tr td:first-of-type {text-align: left;}
.table-striped.specs .bi { font-weight: 500; font-size:1.1rem;}
.table-striped.specs .bi-check {color:#33aa55;}
.table-striped.specs .bi-x {color:var(--opscore-red);}

@media (max-width: 576px) {.table-striped.specs {font-size:0.8rem;} }