/* Site-specific overrides. Built into assets/css/app.min.css by `node build/build-css.mjs` (edit here, then rebuild). */

/* ---------- header menu centered in the space between the logo and the "Get In Touch" button ---------- */
.header-layout5 .menu-wrap {
  justify-content: center;
}
.header-layout5 .main-menu {
  margin-right: var(--space, 36px);
}

/* ---------- Accessible colours (WCAG AA: 4.5:1 for normal text) ----------
   The original theme orange (#F47629) only reaches 2.8:1 against white, so white-on-orange buttons/badges and
   orange text on white failed the contrast check. These slightly deeper values pass everywhere they are used. */
:root {
  --theme-color: #C8500B;
  --body-color: #595959;
}
.home-electrician {
  --theme-color: #C8500B;
}

/* ---------- Hero banner: real <picture> instead of a JS-applied background ---------- */
.hero-inner {
  position: relative;
}
.hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: block;
}
.hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 991px) {
  /* phones/tablets: the portrait "_m" banner, shown whole and anchored right (same as the old background-size: contain) */
  .hero-bg img {
    object-fit: contain;
    object-position: right center;
  }
}

/* ---------- rules that used to live in the <style> block of index.php ---------- */
.product-details .slider-pagination {
  display: none !important;
}
#brandSlider2 .swiper-wrapper {
  height: auto !important;
}
@media (max-width: 768px) {
  #hero .hero-style5 .slideinup {
    display: none;
  }
  #hero .hero-inner {
    height: 100vh;
  }
  ._contY {
    background-color: #141b43;
    background-image: none !important;
  }
}
@media (min-width: 1024px) {
  .breadcumb-wrapper {
    padding: 120px 0 50px 0 !important;
  }
  .breadcumb-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
  }
  .breadcumb-menu li,
  .breadcumb-menu a,
  .breadcumb-menu span {
    font-size: 15px !important;
  }
  .breadcumb-menu {
    margin-top: 0px !important;
  }
  .breadcumb-title {
    font-size: 2.5rem;
  }
}

/* ---------- floating WhatsApp button (was inline styles in index.php) ---------- */
._linkSHare {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 9999;
}
._linkSHare ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
._linkSHare img {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 100000;
  padding: 12px 20px;
  background: #101840;
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}
#main:focus {
  outline: none;
}

/* ---------- skip rendering work for below-the-fold sections until they are close to the viewport ---------- */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 1100px;
}

/* ---------- orange links/text on the dark footer: the brighter brand orange is used there (6:1 on #101018) ---------- */
.footer-wrapper .copyright-text a,
.footer-wrapper .copyright-text a:hover {
  color: #ff8f5a;
}

/* ---------- orange TEXT colour (see build/build-css.mjs: every `color: var(--theme-color)` in the theme becomes var(--theme-text)) ----------
   white page -> #C8500B (4.6:1), grey inner-page background -> #A8410A (4.8:1), dark sections -> the bright brand orange (6:1) */
:root {
  --theme-text: #c8500b;
}
body:not(.home-electrician) {
  --theme-text: #a8410a;
}
.footer-wrapper,
#process-sec,
#testi-sec,
.contact-sec5,
.breadcumb-wrapper {
  --theme-text: #ff8f5a;
}

/* ---------- background colour shown until a lazily-applied section background image is set (see main.js) ---------- */
#process-sec[data-bg-src] { background-color: #131b41; }
#testi-sec[data-bg-src] { background-color: #323758; }
.footer-wrapper[data-bg-src] { background-color: #242a4e; }
.breadcumb-wrapper[data-bg-src] { background-color: #383e5e; }

/* ---------- links that sit inside a line of text must not rely on colour alone ---------- */
.footer-wrapper .copyright-text a {
  text-decoration: underline;
}
.blog-content p a,
.blog-content li a {
  text-decoration: underline;
}

/* ---------- decorative large numbers in service cards: drawn with CSS so they are not read as (low-contrast) text ---------- */
.service-card .box-number:before {
  content: attr(data-n);
}

/* ---------- equal-height service cards: swiper already stretches each .swiper-slide to the tallest slide, but the
   card inside it (height:auto) does not fill that height -- make the slide a flex container so its card stretches too ---------- */
#serviceSlider1 .swiper-slide {
  display: flex;
}
#serviceSlider1 .service-card {
  width: 100%;
}

/* ---------- About page "Our Mission / Our Vision": the image column has no fixed height, so it falls short of
   (or overshoots) the text column's natural height -- stretch it to match and crop with object-fit, same pattern
   the theme already uses for .img-box2. Pure layout: no new colours or fonts, everything stays on the theme tokens. ---------- */
.img-box1 {
  height: 100%;
}
.img-box1 .img1 {
  height: 100%;
}
.img-box1 .img1 img {
  height: 100%;
  object-fit: cover;
}

/* ---------- WooCommerce-style star rating: the (visually clipped) text only needs a readable colour ---------- */
.star-rating span {
  color: var(--title-color);
}

/* ---------- product cards: the whole card stays clickable through the title link ("stretched link"), without nested <a> ---------- */
.th-product {
  position: relative;
}
.th-product .product-title a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}

/* ---------- Why Choose Akvinz: equal card height and horizontal alignment between columns ---------- */
@media (min-width: 768px) {
  .why-feature-left,
  .why-feature-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .why-feature-left .why-feature,
  .why-feature-right .why-feature {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 32px;
    min-height: 195px;
    padding: 20px 22px;
  }
  .why-feature-left .why-feature:last-child,
  .why-feature-right .why-feature:last-child {
    margin-bottom: 0;
  }
  .why-feature .box-title {
    font-size: 19px;
    line-height: 1.35;
    margin-bottom: 8px;
    min-height: 52px;
    display: flex;
    align-items: flex-start;
  }
  .why-feature .box-icon {
    margin-bottom: 12px;
  }
  .why-feature .box-text {
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 0;
    text-align: left;
  }
}
@media (max-width: 767px) {
  .why-feature {
    margin-bottom: 32px;
    padding: 20px 22px;
  }
  .why-feature .box-title {
    font-size: 19px;
    line-height: 1.35;
    margin-bottom: 8px;
  }
  .why-feature .box-icon {
    margin-bottom: 12px;
  }
  .why-feature .box-text {
    font-size: 14.5px;
    line-height: 1.55;
    text-align: left;
  }
}
.counter-sec-wrap {
  margin-top: 45px;
  position: relative;
  z-index: 5;
}
@media (min-width: 1200px) {
  .counter-sec-wrap {
    margin-top: 20px;
  }
  .why-img2 {
    margin-bottom: -22px;
    position: relative;
    z-index: 6;
  }
  .why-img2 img {
    display: block;
    margin: 0 auto;
    vertical-align: bottom;
  }
}


/* ---------- FAQ accordion (home page): same bordered-card / rotating-chevron look as the Rent-O-Mate page's
   FAQ, but built on the shared theme tokens (--theme-color, --title-*, --body-*) instead of a one-off palette ---------- */
.faq-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.faq-item {
  background: var(--white-color);
  border: 1.5px solid rgba(16, 24, 64, 0.08);
  border-radius: 14px;
  margin-bottom: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item.active {
  border-color: var(--theme-color);
  box-shadow: 0 8px 24px rgba(200, 80, 11, 0.12);
}
.faq-q {
  margin: 0;
}
.faq-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 22px;
  font-family: var(--title-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--title-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}
.faq-item.active .faq-btn {
  color: var(--theme-text, var(--theme-color));
}
.faq-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--smoke-color, #f1f5f9);
  border: 1px solid rgba(16, 24, 64, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--title-color);
  font-size: 11px;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.faq-item.active .faq-icon {
  background: var(--theme-color);
  color: var(--white-color);
  border-color: transparent;
  transform: rotate(180deg);
}
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 22px;
}
.faq-item.active .faq-content {
  max-height: 800px;
  padding: 0 22px 20px;
}
.faq-body {
  font-family: var(--body-font);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--body-color);
  border-top: 1px solid rgba(16, 24, 64, 0.06);
  padding-top: 14px;
}
.faq-body p {
  margin-bottom: 0;
}

/* ---------- About Section: Equal Height & Spacing Optimization ---------- */
#about-sec {
  padding-top: 70px !important;
  padding-bottom: 25px !important;
}
@media (min-width: 1200px) {
  #about-sec .row {
    align-items: stretch !important;
  }
  #about-sec .col-xl-6 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #about-sec .img-box5 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
    position: relative;
  }
  #about-sec .img-box5 .img1 {
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
  }
  #about-sec .img-box5 .img1 img {
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
    border-radius: 24px;
    width: 100%;
  }
  #about-sec .about-media {
    padding: 24px 26px;
  }
  #about-sec .about-media .box-icon {
    margin-bottom: 16px;
  }
}
.why-choose-sec {
  padding-top: 30px !important;
  padding-bottom: 70px !important;
}

/* ---------- Product Details: Key Feature Highlight Cards ---------- */
.feature-highlight-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 64, 0.08);
  border-radius: 18px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 4px 20px rgba(16, 24, 64, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}
.feature-highlight-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--theme-color, #F47629), var(--gr-color2, #FD8900));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.feature-highlight-card:hover {
  transform: translateY(-5px);
  border-color: rgba(244, 118, 41, 0.35);
  box-shadow: 0 14px 28px rgba(244, 118, 41, 0.1), 0 4px 12px rgba(16, 24, 64, 0.04);
}
.feature-highlight-card:hover::after {
  opacity: 1;
}
.feature-highlight-card .card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.feature-highlight-card .number-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--theme-color, #F47629) 0%, var(--gr-color2, #FD8900) 100%);
  color: #ffffff;
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(244, 118, 41, 0.28);
  flex-shrink: 0;
}
.feature-highlight-card .category-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(244, 118, 41, 0.08);
  color: var(--theme-color, #F47629);
  border: 1px solid rgba(244, 118, 41, 0.18);
}
.feature-highlight-card .feature-title {
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--title-color, #101840);
  margin-bottom: 12px;
  transition: color 0.3s ease;
}
.feature-highlight-card:hover .feature-title {
  color: var(--theme-color, #F47629);
}
.feature-highlight-card .feature-desc {
  font-family: var(--body-font, "Inter", sans-serif);
  font-size: 14px;
  line-height: 1.65;
  color: #555555;
  margin-bottom: 0;
  flex-grow: 1;
}

/* ---------- Product Details: Diagonal Wedge Feature Cards ---------- */
.shape-mockup-wrap .row.gy-4 > [class*="col-"] {
  display: flex;
}
.process-flow-card {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-height: 178px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(16, 24, 64, 0.07);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* folded-corner wedge: base fill + a crease shadow where the "fold" meets the card + a glossy sheen on the raised tip */
.process-flow-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 92px;
  height: 92px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(145deg, transparent 44%, rgba(70, 25, 0, 0.22) 47%, transparent 52%),
    linear-gradient(145deg, var(--theme-color, #C8500B), var(--gr-color2, #FD8900));
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  filter: drop-shadow(-3px 5px 10px rgba(200, 80, 11, 0.32));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-flow-card::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--theme-color, #C8500B), var(--gr-color2, #FD8900));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.process-flow-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(16, 24, 64, 0.12), 0 8px 18px rgba(200, 80, 11, 0.1), 0 0 0 3px rgba(200, 80, 11, 0.08);
}
.process-flow-card:hover::before {
  transform: scale(1.1) rotate(2deg);
}
.process-flow-card:hover::after {
  transform: scaleX(1);
}
.process-flow-card .step-hex {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 1;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: #ffffff;
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
}
.process-flow-card .step-title {
  position: relative;
  z-index: 1;
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--title-color, #101840);
  margin: 36px 0 10px;
  max-width: 78%;
  transition: color 0.3s ease;
}
.process-flow-card:hover .step-title {
  color: var(--theme-color, #C8500B);
}
.process-flow-card .step-desc {
  position: relative;
  z-index: 1;
  font-family: var(--body-font, "Inter", sans-serif);
  font-size: 13.5px;
  line-height: 1.65;
  color: #697386;
  margin-bottom: 0;
  text-align: justify !important;
  text-justify: inter-word;
}

.service-card .box-text {
  text-align: justify;
}

/* ---------- Explore CTA Box: Call Icon Color Scheme ----------
   Default state: Navy Blue background with White icon and Navy Blue ripple
   Hover state: Theme Orange background with White icon and Theme Orange ripple */
.explore-cta-box .call-btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.explore-cta-box .call-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.explore-cta-box .call-btn .play-btn {
  cursor: pointer;
  text-decoration: none;
}

.explore-cta-box .call-btn .play-btn > i {
  background-color: var(--title-color, #101840) !important;
  color: #ffffff !important;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.explore-cta-box .call-btn .play-btn:before,
.explore-cta-box .call-btn .play-btn:after {
  background-color: var(--title-color, #101840) !important;
  transition: background-color 0.4s ease;
}

.explore-cta-box .call-btn:hover .play-btn > i,
.explore-cta-box .call-btn .play-btn:hover > i {
  background-color: var(--theme-color, #C8500B) !important;
  color: #ffffff !important;
}

.explore-cta-box .call-btn:hover .play-btn:before,
.explore-cta-box .call-btn:hover .play-btn:after,
.explore-cta-box .call-btn .play-btn:hover:before,
.explore-cta-box .call-btn .play-btn:hover:after {
  background-color: var(--theme-color, #C8500B) !important;
}

/* ---------- Product Details: Specification Pill Grid ---------- */
.spec-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.spec-pill {
  background: #ffffff;
  border: 1px solid rgba(16, 24, 64, 0.08);
  border-left: 3px solid var(--theme-color, #F47629);
  border-radius: 8px;
  padding: 10px 14px;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.spec-pill:hover {
  box-shadow: 0 8px 18px rgba(16, 24, 64, 0.08);
  transform: translateY(-2px);
  border-color: rgba(244, 118, 41, 0.3);
}
.spec-pill--full {
  grid-column: 1 / -1;
}
.spec-pill-label {
  display: block;
  font-family: var(--body-font, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a8f9c;
  margin-bottom: 3px;
}
.spec-pill-value {
  display: block;
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--title-color, #101840);
}
@media (max-width: 575px) {
  .spec-pill-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Universal Theme Typography (All Pages) ----------
   Applies Exo to all headings, titles, buttons, badges and navigation;
   Applies Inter to all body copy, paragraphs, descriptions and form elements. */
:root {
  --title-font: "Exo", sans-serif !important;
  --body-font: "Inter", sans-serif !important;
  --bs-font-sans-serif: "Inter", sans-serif !important;
  --bs-body-font-family: "Inter", sans-serif !important;
}

html,
body {
  font-family: "Inter", sans-serif !important;
  --bs-font-sans-serif: "Inter", sans-serif !important;
  --bs-body-font-family: "Inter", sans-serif !important;
}

/* Headings and Titles */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.sec-title,
.sub-title,
.title,
.box-title,
.product-title,
.step-title,
.feature-title,
.breadcumb-title,
.widget_title,
.header-title,
.banner-title,
.process-flow-card .step-title,
.service-card .box-title,
.why-feature .box-title,
.feature-highlight-card .feature-title,
.faq-btn {
  font-family: "Exo", sans-serif !important;
}

/* Buttons, Menus, Price & Badges */
.th-btn,
.btn,
.btn-primary,
.btn-secondary,
.call-btn,
.main-menu,
.main-menu a,
.th-menu-area,
.th-menu-area a,
.mobile-menu a,
.breadcumb-menu,
.breadcumb-menu a,
.breadcumb-menu li,
.breadcumb-menu span,
.price,
.product-price,
.box-label,
.box-number,
.number-badge,
.category-pill,
.quick-spec-inner {
  font-family: "Exo", sans-serif !important;
}

/* Paragraphs, Text, Form Elements & Tables */
p,
li,
ul,
ol,
span,
label,
input,
textarea,
select,
button,
table,
td,
th,
.sec-text,
.box-text,
.step-desc,
.feature-desc,
.faq-body,
.about-text,
.contact-text,
.copyright-text,
.form-control,
.form-select,
.quick-spec-label {
  font-family: "Inter", sans-serif;
}

/* Protect FontAwesome icon glyphs */
i[class*="fa-"],
span[class*="fa-"] {
  font-family: var(--fa-style-family, "Font Awesome 6 Pro");
}

/* ---------- Product Details 2-Option Tabs (Specifications & Highlights) ---------- */
.product-spec-tech-tabs {
  margin: 20px 0 25px;
}

.product-tab-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid rgba(16, 24, 64, 0.08);
  padding-bottom: 14px;
}

.product-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 22px;
  border-radius: 40px;
  font-family: var(--title-font, "Exo", sans-serif) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--title-color, #101840);
  background: #ffffff;
  border: 1.5px solid rgba(16, 24, 64, 0.12);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(16, 24, 64, 0.04);
}

.product-tab-btn i {
  font-size: 14px;
  color: var(--theme-color, #C8500B);
  transition: color 0.3s ease;
}

.product-tab-btn:hover {
  border-color: var(--theme-color, #C8500B);
  color: var(--theme-color, #C8500B);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(200, 80, 11, 0.14);
}

.product-tab-btn.active {
  background: linear-gradient(135deg, #101840 0%, #1d2757 100%) !important;
  color: #ffffff !important;
  border-color: #101840 !important;
  box-shadow: 0 6px 18px rgba(16, 24, 64, 0.22);
  transform: translateY(-2px);
}

.product-tab-btn.active i {
  color: #ffffff !important;
}

/* Tab Panes */
.product-tab-pane {
  display: none;
  animation: tabFadeIn 0.3s ease forwards;
}

.product-tab-pane.active {
  display: block;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.spec-card-wrapper {
  max-width: 880px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 64, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 4px 20px rgba(16, 24, 64, 0.04);
}

.spec-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 64, 0.08);
  font-size: 13.5px;
}

.spec-table th {
  background: #f8fafc;
  color: var(--title-color, #101840);
  font-family: var(--title-font, "Exo", sans-serif);
  font-weight: 700;
  width: 32%;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(16, 24, 64, 0.06);
  border-right: 1px solid rgba(16, 24, 64, 0.06);
  vertical-align: middle;
}

.spec-table td {
  padding: 8px 14px;
  color: var(--body-color, #595959);
  border-bottom: 1px solid rgba(16, 24, 64, 0.06);
  vertical-align: middle;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: none;
}

.spec-table tr:nth-child(even) td {
  background: #fcfdfe;
}

/* Highlights Box inside Tab 2 */
.highlights-card-wrapper {
  max-width: 880px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 64, 0.08);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 4px 20px rgba(16, 24, 64, 0.04);
}

.highlights-pill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.highlight-meta-item {
  background: #f8fafc;
  border: 1px solid rgba(16, 24, 64, 0.07);
  border-left: 3px solid var(--theme-color, #C8500B);
  border-radius: 8px;
  padding: 8px 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.highlight-meta-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 24, 64, 0.06);
}

.highlight-meta-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #8a8f9c;
  margin-bottom: 2px;
}

.highlight-meta-value {
  display: block;
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--title-color, #101840);
  line-height: 1.3;
}

.highlights-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
}

.highlight-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  background: #fbfcfe;
  border-radius: 8px;
  border: 1px solid rgba(16, 24, 64, 0.06);
  transition: all 0.25s ease;
}

.highlight-list-item:hover {
  background: #ffffff;
  border-color: rgba(200, 80, 11, 0.3);
  box-shadow: 0 4px 12px rgba(16, 24, 64, 0.05);
  transform: translateX(2px);
}

.highlight-check-bullet,
.highlight-list-item i {
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background-color: rgba(200, 80, 11, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C8500B'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.highlight-list-item i:before {
  display: none !important;
  content: "" !important;
}

.highlight-list-item span {
  font-size: 13.5px;
  color: var(--body-color, #595959);
  line-height: 1.45;
}

@media (max-width: 767px) {
  .product-tab-nav {
    flex-direction: column;
    gap: 8px;
  }
  .product-tab-btn {
    width: 100%;
    padding: 8px 14px;
    font-size: 13px;
  }
  .highlights-list-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .spec-table th {
    width: 42%;
    padding: 7px 10px;
    font-size: 12.5px;
  }
  .spec-table td {
    padding: 7px 10px;
    font-size: 12.5px;
  }
  .spec-card-wrapper,
  .highlights-card-wrapper {
    padding: 14px;
  }
}

/* ---------- Section Title & Text Spacing ---------- */
.title-area .sec-title,
.sec-title {
  margin-bottom: 22px !important;
}

.title-area.mb-0 .sec-title {
  margin-bottom: 22px !important;
}

.title-area.mb-0 .sec-title:last-child {
  margin-bottom: 0 !important;
}

.sec-title + .sec-text,
.sec-title + p,
.title-area .sec-title + .sec-text,
.title-area .sec-title + p {
  margin-top: 20px !important;
}

@media (max-width: 767px) {
  .title-area .sec-title,
  .title-area.mb-0 .sec-title,
  .sec-title {
    margin-bottom: 16px !important;
  }
  .sec-title + .sec-text,
  .sec-title + p,
  .title-area .sec-title + .sec-text,
  .title-area .sec-title + p {
    margin-top: 14px !important;
  }
}

/* ---------- Creative Multi-Stage Process Pipeline (Ceramic Technology) ---------- */
.process-stage-pipeline {
  position: relative;
}

.process-stage-pipeline > [class*="col-"] {
  display: flex;
  position: relative;
}

.process-stage-card {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 64, 0.08);
  box-shadow: 0 10px 28px rgba(16, 24, 64, 0.06);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), 
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), 
              border-color 0.35s ease;
  z-index: 2;
}

/* Glowing top accent stripe */
.process-stage-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--theme-color, #C8500B) 0%, var(--gr-color2, #FD8900) 100%);
  transition: height 0.3s ease;
}

.process-stage-card:hover {
  transform: translateY(-8px);
  border-color: rgba(200, 80, 11, 0.35);
  box-shadow: 0 24px 44px rgba(16, 24, 64, 0.12), 0 8px 24px rgba(200, 80, 11, 0.12);
}

.process-stage-card:hover::before {
  height: 5px;
}

/* Header */
.stage-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

.stage-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--theme-color, #C8500B);
  background: rgba(200, 80, 11, 0.09);
  padding: 5px 14px;
  border-radius: 20px;
  font-family: var(--title-font, "Exo", sans-serif);
}

.stage-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid rgba(16, 24, 64, 0.07);
  transition: all 0.3s ease;
}

.process-stage-card:hover .stage-icon-wrap {
  background: rgba(200, 80, 11, 0.12);
  border-color: rgba(200, 80, 11, 0.25);
  transform: scale(1.06);
}

.stage-media-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.stage-media-icon.icon-ph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C8500B'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
}

.stage-media-icon.icon-adsorption {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C8500B'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3C/svg%3E");
}

.stage-media-icon.icon-orp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C8500B'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E");
}

.stage-media-icon.icon-mineral {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C8500B'%3E%3Cpath d='M12 2l2.4 7.4h7.6l-6.2 4.5 2.4 7.4-6.2-4.5-6.2 4.5 2.4-7.4-6.2-4.5h7.6z'/%3E%3C/svg%3E");
}

/* Body */
.stage-card-body {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  margin-bottom: 16px;
}

.stage-title {
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--title-color, #101840);
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.process-stage-card:hover .stage-title {
  color: var(--theme-color, #C8500B);
}

.stage-desc {
  font-family: var(--body-font, "Inter", sans-serif);
  font-size: 13.5px;
  line-height: 1.65;
  color: #595959;
  margin-bottom: 0;
  text-align: justify !important;
  text-justify: inter-word;
}

/* Footer */
.stage-card-footer {
  position: relative;
  z-index: 2;
  padding-top: 12px;
  border-top: 1px dashed rgba(16, 24, 64, 0.1);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.stage-benefit-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--title-color, #101840);
  letter-spacing: 0.2px;
}

.stage-tag-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--theme-color, #C8500B);
  box-shadow: 0 0 6px rgba(200, 80, 11, 0.6);
}

/* Remove legacy connector and watermark */
.stage-flow-connector,
.stage-watermark,
.stage-num {
  display: none !important;
}

/* Legacy process-card neutralization */
.process-card .box-content {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ---------- Universal Mobile & Card Text Justification ---------- */
.process-flow-card .step-desc,
.process-stage-card .stage-desc,
.step-desc,
.stage-desc,
.explore-cta-box p:not(.box-label):not(.font-weight-bold),
.faq-body,
.faq-body p {
  text-align: justify !important;
  text-justify: inter-word !important;
}

.explore-cta-box p.font-weight-bold {
  text-align: center !important;
}

@media (max-width: 991px) {
  .process-flow-card .step-desc,
  .process-stage-card .stage-desc,
  .step-desc,
  .stage-desc,
  .service-card .box-text,
  .why-feature .box-text,
  .feature-card p,
  .feature-desc,
  .sec-text,
  .about-text,
  .product-about-text,
  .spec-card-wrapper p,
  .highlights-card-wrapper p,
  .explore-cta-box p:not(.box-label):not(.font-weight-bold),
  .faq-body,
  .faq-body p {
    text-align: justify !important;
    text-justify: inter-word !important;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .explore-cta-box p.font-weight-bold {
    text-align: center !important;
  }
}