/* == INDUSTRIES PAGE ONLY == */

.hero { background-image: url('../img/hero/hero-industries.jpg'); background-position:left top; 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) 35%);}

@media (max-width: 1200px) {
    .hero {background-image: url('../img/hero/hero-industries-md.jpg'); background-position:center top;}
    .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.3) 65%);}
}
@media (max-width: 768px) {.hero {background-position:left top;}}

.industries .nav-tabs { border: none; background: color-mix(in srgb, var(--background-color), transparent 50%); border-radius: 16px; backdrop-filter: blur(8px); }
.industries .nav-tabs .nav-item { margin-bottom: 15px; }
.industries .nav-tabs .nav-item:last-child { margin-bottom: 0; }
.industries .nav-tabs .nav-link { width: 100%; text-align: left; padding: 20px; border: none; border-radius: 12px; background: var(--background-color); transition: all 0.4s ease; position: relative; overflow: hidden; cursor: pointer; }
.industries .nav-tabs .nav-link .d-flex { position: relative; z-index: 1; }
.industries .nav-tabs .nav-link .icon-box { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--pureflo-blue), transparent 92%); transition: all 0.4s ease; }
.industries .nav-tabs .nav-link .icon-box i { font-size: 24px; color: var(--pureflo-blue); transition: all 0.4s ease; }
.industries .nav-tabs .nav-link h4 { font-size: 1rem; font-weight: 600; margin: 0 0 5px 0; color: var(--hd-color); transition: all 0.4s ease; }
.industries .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; }
.industries .nav-tabs .nav-link:hover { transform: translateY(-2px); }
.industries .nav-tabs .nav-link:hover::before { opacity: 1; }
.industries .nav-tabs .nav-link:hover .icon-box { background: var(--pureflo-blue); }
.industries .nav-tabs .nav-link:hover .icon-box i { color: #ffffff; }
.industries .nav-tabs .nav-link:hover h4 { color: var(--pureflo-blue); }
.industries .nav-tabs .nav-link:hover p { color: color-mix(in srgb, var(--main-color), transparent 20%); }
.industries .nav-tabs .nav-link.active { background: var(--pureflo-blue); }
.industries .nav-tabs .nav-link.active::before { opacity: 0; }
.industries .nav-tabs .nav-link.active .icon-box { background: color-mix(in srgb, #ffffff, transparent 85%); }
.industries .nav-tabs .nav-link.active .icon-box i { color: #ffffff; }
.industries .nav-tabs .nav-link.active h4 { color: #ffffff; }
.industries .nav-tabs .nav-link.active p { color: color-mix(in srgb, #ffffff, transparent 20%); }

.industries .tab-content {color: color-mix(in srgb, var(--main-color), transparent 20%); font-size: 1rem; }
.industries .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; }
.industries .tab-content .content-box h3 { font-size: 28px; color: var(--hd-color); margin-bottom: 20px; position: relative; padding-bottom: 15px; }
.industries .tab-content .content-box h3::after { content: ""; position: absolute; bottom: 0; left: 0; width: 75px; height: 3px; background: var(--pureflo-blue); border-radius: 3px; }

.industries .tab-content .content-box .image-box { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); }
.industries .tab-content .content-box .image-box img { transition: all 0.6s ease; }
.industries .tab-content .content-box .image-box:hover img { transform: scale(1.05); }
.industries .tab-content .content-box .image-box::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.05) 100%); pointer-events: none; }
.industries .tab-pane { transition: all 0.4s ease; }
.industries .tab-pane.fade { transform: translateY(10px); opacity: 0; }
.industries .tab-pane.show { transform: translateY(0); opacity: 1; }

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

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

/* == WHY PUREFLO == */
.why-pf {position: relative; overflow: hidden;}
.why-pf::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 250px; opacity: 0.15; pointer-events: none; z-index: 0;
    background-image: url('../img/global/hex-pattern-left.png'); background-repeat: no-repeat; background-position: left top; background-size: 100% auto;}

.why-pf::after {content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 250px; opacity: 0.15; pointer-events: none; z-index: 0;
    background-image: url('../img/global/hex-pattern-right.png'); background-repeat: no-repeat; background-position: right bottom; background-size: 100% auto;}

.why-pf .container { position: relative; z-index: 1;}

.why-pf .row > .col-md-6:not(:last-child) { border-right: 1px solid rgba(0, 0, 0, 0.12);}
.why-pf-item { height: 100%; padding: 0 35px; }

.why-pf-icon { width: 64px; height: 64px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 50%; color: var(--pf-blue); font-size: 1.75rem; box-shadow: 0 3px 10px rgba(0, 40, 80, 0.08); }
.why-pf-item h3 { margin-bottom: 10px; color: var(--pf-blue); font-size: 0.9rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; }
.why-pf-item p { margin: 0 auto; font-size: 0.9rem; }

@media (max-width: 991.98px) {.why-pf .row > .col-md-6:not(:last-child) { border-right: none;} }
@media (max-width: 767.98px) {
    .why-pf-item { padding: 30px 20px; }
	  .why-pf .row > .col-md-6:not(:last-child) { border-bottom:1px solid rgba(0, 0, 0, 0.12);}
    .why-pf-icon { margin-bottom: 15px; } 
}