/* About Us / subpage layout — matches genchemph about-us.html reference */

/* Canvas theme extended Bootstrap spacers (GrapesJS uses spacer 6 = 5rem) */
.genchemph .pt-6 {
  padding-top: 5rem !important;
}

.genchemph .pb-6 {
  padding-bottom: 5rem !important;
}

.genchemph .py-6 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.genchemph .pe-6 {
  padding-right: 5rem !important;
}

.genchemph .ps-6 {
  padding-left: 5rem !important;
}

.genchemph .px-6 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.genchemph .mt-6 {
  margin-top: 5rem !important;
}

.genchemph .mb-6 {
  margin-bottom: 5rem !important;
}

.genchemph .my-6 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

.genchemph .clear {
  clear: both;
}

.about-us-page,
.genchem-public-shell {
  background: #ffffff;
  overflow-x: clip;
  max-width: 100%;
}

.genchemph .cms-content,
.genchemph .public-page-content {
  overflow-x: clip;
  max-width: 100%;
}

.about-us-page .about-us-low {
  position: relative;
  background: #ffffff;
  overflow: visible;
  padding-bottom: 0;
}

.about-us-page .width-img-control {
  position: relative;
  width: 100%;
  overflow: visible;
}

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  .about-us-page .width-img-control,
  .genchem-products-page .width-img-control,
  .genchemph-canvas .width-img-control {
    min-height: 470px;
  }
}

@media only screen and (min-width: 1441px) {
  .about-us-page .width-img-control,
  .genchem-products-page .width-img-control,
  .genchemph-canvas .width-img-control {
    min-height: 630px;
  }
}

/* Last block — flush to footer, no extra margin; min-height keeps absolute images in flow */
.about-us-page .width-img-control:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
}

.about-us-page > .floating-logo,
.about-us-page > .floating-logo--subpage {
  background-color: #ffffff;
}

/* Home intro block — dark overlay + white text (reference index.html / GrapesJS) */
.cms-content .about-us-low[style*="background-image"],
.cms-content .home-intro-hero,
.cms-content #iz2p.about-us-low,
.public-page-content .about-us-low[style*="background-image"],
.public-page-content .home-intro-hero,
.public-page-content #iz2p.about-us-low {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
}

.cms-content .about-us-low[style*="background-image"]::before,
.cms-content .home-intro-hero#iz2p::before,
.cms-content #iz2p.home-intro-hero::before,
.cms-content #iz2p.about-us-low::before,
.public-page-content .about-us-low[style*="background-image"]::before,
.public-page-content .home-intro-hero#iz2p::before,
.public-page-content #iz2p.home-intro-hero::before,
.public-page-content #iz2p.about-us-low::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68) !important;
  z-index: 1;
}

.cms-content .about-us-low[style*="background-image"] .about-us-high,
.cms-content .home-intro-hero .about-us-high,
.cms-content #iz2p .about-us-high,
.public-page-content .about-us-low[style*="background-image"] .about-us-high,
.public-page-content .home-intro-hero .about-us-high,
.public-page-content #iz2p .about-us-high {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
}

.cms-content .about-us-low[style*="background-image"] .about-us-high p,
.cms-content .about-us-low[style*="background-image"] .about-us-high li,
.cms-content .home-intro-hero .about-us-high p,
.cms-content .home-intro-hero .about-us-high li,
.cms-content #iz2p .about-us-high p,
.cms-content #iz2p .about-us-high li,
.public-page-content .about-us-low[style*="background-image"] .about-us-high p,
.public-page-content .about-us-low[style*="background-image"] .about-us-high li,
.public-page-content .home-intro-hero .about-us-high p,
.public-page-content .home-intro-hero .about-us-high li,
.public-page-content #iz2p .about-us-high p,
.public-page-content #iz2p .about-us-high li {
  color: #ffffff !important;
}

.cms-content .home-intro-hero .about-us-high p.fs-3,
.cms-content #iz2p .about-us-high p.fs-3,
.public-page-content .home-intro-hero .about-us-high p.fs-3,
.public-page-content #iz2p .about-us-high p.fs-3 {
  font-size: 1.75rem !important;
  line-height: 1.5 !important;
  text-align: center;
}

.cms-content .home-intro-hero ul.fs-4,
.cms-content .home-intro-hero ul.fs-4 li,
.cms-content .about-us-low[style*="background-image"] ul.fs-4,
.cms-content .about-us-low[style*="background-image"] ul.fs-4 li,
.cms-content #iz2p ul.fs-4,
.cms-content #iz2p ul.fs-4 li,
.public-page-content .home-intro-hero ul.fs-4,
.public-page-content .home-intro-hero ul.fs-4 li,
.public-page-content .about-us-low[style*="background-image"] ul.fs-4,
.public-page-content .about-us-low[style*="background-image"] ul.fs-4 li,
.public-page-content #iz2p ul.fs-4,
.public-page-content #iz2p ul.fs-4 li,
.genchemph-canvas .about-us-low[style*="background-image"] ul.fs-4,
.genchemph-canvas .about-us-low[style*="background-image"] ul.fs-4 li {
  font-size: 1.5rem !important;
  line-height: 1.65 !important;
}

.cms-content .about-us-low[style*="background-image"] .bi-check2-circle,
.cms-content .home-intro-hero .bi-check2-circle,
.cms-content #iz2p .bi-check2-circle,
.public-page-content .about-us-low[style*="background-image"] .bi-check2-circle,
.public-page-content .home-intro-hero .bi-check2-circle,
.public-page-content #iz2p .bi-check2-circle {
  color: #ffffff !important;
}

.about-us-page .about-us-low:not([style*="background-image"]):not(.home-intro-hero):not(#iz2p)::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.about-us-page .floating-logo .floating-logo__mark,
.about-us-page .floating-logo--subpage .floating-logo__mark {
  top: -122px;
}

.about-us-page .floating-logo img,
.about-us-page .floating-logo__img {
  max-width: 250px;
  width: auto;
  height: auto;
  background: transparent !important;
  object-fit: contain;
}

.about-us-page .about-us-high {
  position: relative;
  z-index: 2;
  color: inherit;
}

.about-us-page .width-img-control .about-us-high .text-dark,
.about-us-page .width-img-control .about-us-high p.text-dark,
.about-us-page .width-img-control .about-us-high li,
.about-us-page .width-img-control .text-dark {
  color: #333333 !important;
}

/* Typography — match reference Bootstrap / Canvas sizes */
.about-us-page .display-4 {
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
  font-weight: 500 !important;
  line-height: 1.2;
}

.about-us-page h1.text-main-red {
  color: #f60000 !important;
}

.about-us-page .about-us-high p.fs-4,
.about-us-page p.fs-4 {
  font-size: 1.5rem !important;
  line-height: 1.65;
}

.about-us-page .fs-5,
.about-us-page .about-us-high .fs-5,
.about-us-page ul.fs-5 {
  font-size: 1.25rem !important;
  line-height: 1.65;
}

/* Disc bullets — beat main.css global `ul, li { list-style-type: none }` */
.about-us-page .about-us-high ul.text-dark,
.about-us-page .about-us-high ul.ms-3,
.cms-content .about-us-high ul.text-dark,
.cms-content .about-us-high ul.ms-3,
.public-page-content .about-us-high ul.text-dark,
.public-page-content .about-us-high ul.ms-3,
.genchemph-canvas .about-us-high ul.text-dark,
.genchemph-canvas .about-us-high ul.ms-3 {
  list-style: disc outside !important;
  list-style-type: disc !important;
  padding-left: 1.5rem !important;
  margin: 0.25rem 0 0 !important;
}

.about-us-page .about-us-high ul.text-dark li,
.about-us-page .about-us-high ul.ms-3 li,
.cms-content .about-us-high ul.text-dark li,
.cms-content .about-us-high ul.ms-3 li,
.public-page-content .about-us-high ul.text-dark li,
.public-page-content .about-us-high ul.ms-3 li,
.genchemph-canvas .about-us-high ul.text-dark li,
.genchemph-canvas .about-us-high ul.ms-3 li {
  display: list-item !important;
  list-style: disc outside !important;
  list-style-type: disc !important;
  margin-bottom: 0.2rem;
  padding-left: 0.15rem;
}

.about-us-page .about-us-high ul.text-dark li::marker,
.about-us-page .about-us-high ul.ms-3 li::marker,
.cms-content .about-us-high ul.text-dark li::marker,
.cms-content .about-us-high ul.ms-3 li::marker,
.public-page-content .about-us-high ul.text-dark li::marker,
.public-page-content .about-us-high ul.ms-3 li::marker,
.genchemph-canvas .about-us-high ul.text-dark li::marker,
.genchemph-canvas .about-us-high ul.ms-3 li::marker {
  color: #333333;
}

.about-us-page h4.display-6 {
  font-size: clamp(1.65rem, 2.5vw, 2.5rem) !important;
  font-weight: 600 !important;
  line-height: 1.25;
}

.about-us-page .btn.fs-5 {
  font-size: 1.25rem !important;
}

/* Staggered banner + image rows — match GrapesJS / reference about-us.html */
.genchemph .cms-content .about-us-low,
.genchemph .public-page-content .about-us-low,
.about-us-page .about-us-low {
  display: block !important;
}

.genchemph .cms-content .width-img-control,
.genchemph .public-page-content .width-img-control,
.about-us-page .width-img-control,
.genchemph-canvas .width-img-control {
  display: block !important;
  width: 100% !important;
  clear: both;
}

@media (min-width: 768px) {
.genchemph .cms-content .width-img-control > .d-flex.flex-row,
.genchemph .public-page-content .width-img-control > .d-flex.flex-row,
.about-us-page .width-img-control > .d-flex.flex-row,
.genchemph-canvas .width-img-control > .d-flex.flex-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  width: 100% !important;
}

  .genchemph .cms-content .width-img-control > .d-flex.flex-row > [class*="col-md-6"],
  .genchemph .public-page-content .width-img-control > .d-flex.flex-row > [class*="col-md-6"],
  .about-us-page .width-img-control > .d-flex.flex-row > [class*="col-md-6"],
  .genchemph-canvas .width-img-control > .d-flex.flex-row > [class*="col-md-6"] {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
  }

.genchemph .cms-content .width-img-control .position-absolute,
.genchemph .public-page-content .width-img-control .position-absolute,
.about-us-page .width-img-control .position-absolute,
.genchemph-canvas .width-img-control .position-absolute {
  position: absolute !important;
  top: -125px !important;
  left: 0;
  right: auto;
  z-index: 4;
  width: auto;
  max-width: 100%;
}

/* Resins block — image on the right column */
.genchemph .cms-content .width-img-control > .d-flex.flex-row > .col-md-6.position-relative:last-child .position-absolute,
.genchemph .public-page-content .width-img-control > .d-flex.flex-row > .col-md-6.position-relative:last-child .position-absolute,
.about-us-page .width-img-control > .d-flex.flex-row > .col-md-6.position-relative:last-child .position-absolute,
.genchemph-canvas .width-img-control > .d-flex.flex-row > .col-md-6.position-relative:last-child .position-absolute {
  left: auto;
  right: 0;
}
}

.genchemph .cms-content .width-img-control .col-md-6.position-relative,
.genchemph .public-page-content .width-img-control .col-md-6.position-relative,
.about-us-page .width-img-control .col-md-6.position-relative,
.genchemph-canvas .width-img-control .col-md-6.position-relative {
  position: relative !important;
  min-height: 1px;
}

.genchemph .cms-content .width-img-control .position-absolute img.shadow,
.genchemph .public-page-content .width-img-control .position-absolute img.shadow,
.about-us-page .width-img-control .position-absolute img.shadow {
  display: block;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  max-width: 100%;
  width: auto;
  height: auto;
}

.genchemph .cms-content .width-img-control .bg-dark-red,
.genchemph .public-page-content .width-img-control .bg-dark-red,
.about-us-page .width-img-control .bg-dark-red {
  position: relative;
  z-index: 2;
}

.genchemph .cms-content .about-us-high > .row,
.genchemph .public-page-content .about-us-high > .row,
.about-us-page .about-us-high > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
}

@media (min-width: 768px) {
  .genchemph .cms-content .about-us-high > .row > [class*="col-md-6"],
  .genchemph .public-page-content .about-us-high > .row > [class*="col-md-6"],
  .about-us-page .about-us-high > .row > [class*="col-md-6"] {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
  }
}

.about-us-page #content,
.about-us-page main#content {
  background: #ffffff;
  position: relative;
  z-index: 1;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Footer must sit below about-us content (reference: footer inside #wrapper) */
.cms-footer-content {
  position: relative;
  z-index: 50;
  isolation: isolate;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
}

.cms-footer-content .footer-widgets-wrap > .bg-white img {
  background: transparent !important;
}

/* ——— Mobile: About Us image rows (fix overlapping absolute images) ——— */
@media (max-width: 767.98px) {
  .genchemph .cms-content .width-img-control,
  .genchemph .public-page-content .width-img-control,
  .about-us-page .width-img-control,
  .genchem-products-page .width-img-control,
  .genchemph-canvas .width-img-control {
    min-height: 0 !important;
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
    overflow: visible !important;
  }

  .genchem-products-page .width-img-control .about-us-high,
  .about-us-page .width-img-control .about-us-high,
  .genchemph-canvas .width-img-control .about-us-high {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .genchem-products-page .width-img-control .about-us-high p,
  .about-us-page .width-img-control .about-us-high p,
  .genchemph-canvas .width-img-control .about-us-high p {
    text-align: left !important;
    margin-bottom: 0.75rem !important;
  }

  .genchem-products-page .width-img-control .bg-dark-red,
  .about-us-page .width-img-control .bg-dark-red,
  .genchemph-canvas .width-img-control .bg-dark-red {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .genchemph .cms-content .width-img-control > .d-flex.flex-row,
  .genchemph .public-page-content .width-img-control > .d-flex.flex-row,
  .about-us-page .width-img-control > .d-flex.flex-row,
  .genchemph-canvas .width-img-control > .d-flex.flex-row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  .genchemph .cms-content .width-img-control > .d-flex.flex-row > [class*="col-md-6"],
  .genchemph .public-page-content .width-img-control > .d-flex.flex-row > [class*="col-md-6"],
  .about-us-page .width-img-control > .d-flex.flex-row > [class*="col-md-6"],
  .genchemph-canvas .width-img-control > .d-flex.flex-row > [class*="col-md-6"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .genchemph .cms-content .width-img-control .col-md-6.position-relative,
  .genchemph .public-page-content .width-img-control .col-md-6.position-relative,
  .about-us-page .width-img-control .col-md-6.position-relative,
  .genchemph-canvas .width-img-control .col-md-6.position-relative {
    position: relative !important;
    min-height: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .genchemph .cms-content .width-img-control .position-absolute,
  .genchemph .public-page-content .width-img-control .position-absolute,
  .about-us-page .width-img-control .position-absolute,
  .genchemph-canvas .width-img-control .position-absolute {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 auto 1rem !important;
    display: flex !important;
    justify-content: center;
    width: 100%;
    max-width: 100%;
  }

  .genchemph .cms-content .width-img-control .position-absolute img.shadow,
  .genchemph .public-page-content .width-img-control .position-absolute img.shadow,
  .about-us-page .width-img-control .position-absolute img.shadow,
  .genchemph-canvas .width-img-control .position-absolute img.shadow {
    max-width: min(100%, 320px);
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .genchemph .cms-content .width-img-control .about-us-high,
  .genchemph .public-page-content .width-img-control .about-us-high,
  .about-us-page .width-img-control .about-us-high,
  .genchemph-canvas .width-img-control .about-us-high {
    position: relative !important;
    z-index: 2;
    padding: 0.75rem 1rem 0 !important;
    overflow: visible !important;
  }

  .genchemph .cms-content .width-img-control .bg-dark-red,
  .genchemph .public-page-content .width-img-control .bg-dark-red,
  .about-us-page .width-img-control .bg-dark-red,
  .genchemph-canvas .width-img-control .bg-dark-red {
    margin-bottom: 0.75rem;
    border-radius: 0 0 12px 12px;
  }

  .about-us-page .floating-logo .floating-logo__mark,
  .about-us-page .floating-logo--subpage .floating-logo__mark,
  .genchemph-canvas .floating-logo .floating-logo__mark,
  .genchemph-canvas .floating-logo--subpage .floating-logo__mark {
    top: -48px;
  }

  .about-us-page .floating-logo img,
  .about-us-page .floating-logo__img,
  .genchemph-canvas .floating-logo img,
  .genchemph-canvas .floating-logo__img {
    max-width: 160px;
  }

  /* Collapse section spacers between PVC blocks */
  .about-us-page .clear.my-6,
  .about-us-page .clear.my-6.py-2,
  .genchemph-canvas .clear.my-6,
  .genchemph-canvas .clear.my-6.py-2 {
    margin-top: 0.75rem !important;
    margin-bottom: 0.25rem !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }

  .genchemph .cms-content .width-img-control .mt-6,
  .genchemph .public-page-content .width-img-control .mt-6,
  .about-us-page .width-img-control .mt-6,
  .genchemph-canvas .width-img-control .mt-6 {
    margin-top: 0.75rem !important;
  }

  .genchemph .cms-content .width-img-control .pt-5,
  .genchemph .public-page-content .width-img-control .pt-5,
  .about-us-page .width-img-control .pt-5,
  .genchemph-canvas .width-img-control .pt-5 {
    padding-top: 0.5rem !important;
  }

  .genchemph .cms-content .width-img-control .pe-6,
  .genchemph .public-page-content .width-img-control .pe-6,
  .about-us-page .width-img-control .pe-6,
  .genchemph-canvas .width-img-control .pe-6 {
    padding-right: 0 !important;
  }

  /* Hide empty placeholder columns (removes dead space only) */
  .genchemph .cms-content .width-img-control .about-us-high .row > .col-md-6:not(:has(p, a, ul, h4, img)),
  .genchemph .public-page-content .width-img-control .about-us-high .row > .col-md-6:not(:has(p, a, ul, h4, img)),
  .about-us-page .width-img-control .about-us-high .row > .col-md-6:not(:has(p, a, ul, h4, img)),
  .genchemph-canvas .width-img-control .about-us-high .row > .col-md-6:not(:has(p, a, ul, h4, img)) {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .genchemph .cms-content .width-img-control .col-md-6.position-relative:has(img),
  .genchemph .public-page-content .width-img-control .col-md-6.position-relative:has(img),
  .about-us-page .width-img-control .col-md-6.position-relative:has(img),
  .genchemph-canvas .width-img-control .col-md-6.position-relative:has(img) {
    min-height: 0 !important;
  }

  .genchemph .cms-content .width-img-control .about-us-high .btn,
  .genchemph .public-page-content .width-img-control .about-us-high .btn,
  .about-us-page .width-img-control .about-us-high .btn,
  .genchemph-canvas .width-img-control .about-us-high .btn {
    margin-bottom: 0.25rem !important;
  }

  .genchemph .cms-content .width-img-control .position-absolute img.shadow,
  .genchemph .public-page-content .width-img-control .position-absolute img.shadow,
  .about-us-page .width-img-control .position-absolute img.shadow,
  .genchemph-canvas .width-img-control .position-absolute img.shadow {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 991px) {
  .genchemph .cms-content .width-img-control,
  .genchemph .public-page-content .width-img-control,
  .about-us-page .width-img-control,
  .genchem-products-page .width-img-control,
  .genchemph-canvas .width-img-control {
    min-height: 0 !important;
    height: auto !important;
  }
}