/* ==========================================================================
   Responsive overrides — about-us.aspx, product-listing.aspx (and shared
   header/footer, reused by any page that links this file)
   Breakpoints: 1366, 1200, 1199, 992, 767, 567
   Loaded after assets/style.css to override cleanly.
   ========================================================================== */

img {
  max-width: 100%;
}

/* Quality process: keep the detail useful without making the page feel dense. */
.qt-process-section {
  padding: 90px 0 110px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
  overflow: hidden;
}

.qt-process-section .abt-heading {
  max-width: 720px;
  margin: 0 auto 42px;
}

.qt-process-section .abt-heading h2 {
  color: #0a192f;
  margin-bottom: 12px;
}

.qt-process-section .abt-heading p {
  color: #536b8d;
  font-size: 17px;
}

.qt-carousel-wrapper {
  position: relative;
  padding: 28px 0 6px;
}

.qt-carousel-header {
  align-items: end;
  border-bottom: 1px solid rgba(36, 45, 98, 0.14);
  margin-bottom: 24px;
  padding: 0 4px 18px;
}

.qt-carousel-title h3 {
  color: #242d62;
  font-size: 23px;
  margin-bottom: 4px;
  text-transform: none;
}

.qt-carousel-title p {
  color: #6880a0;
  font-size: 14px;
  margin: 0;
}

.qt-nav-btn {
  background: #fff;
  border: 1px solid rgba(36, 45, 98, 0.18);
  color: #242d62;
  height: 42px;
  width: 42px;
}

.qt-nav-btn:hover {
  background: #242d62;
  border-color: #242d62;
  color: #fff;
}

.qtProcessSwiper {
  overflow: visible;
  padding: 4px 0 20px;
}

.qtProcessSwiper .swiper-slide {
  height: auto;
  width: min(340px, 82vw);
}

.qtProcessSwiper .swiper-slide .qt-card {
  height: 100%;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.qtProcessSwiper .swiper-slide-active .qt-card,
.qtProcessSwiper .qt-card:hover {
  border-color: rgba(59, 162, 248, 0.55);
  box-shadow: 0 18px 42px rgba(36, 45, 98, 0.14);
  transform: translateY(-4px);
}

.qt-card-media {
  height: 170px;
}

.qt-card-body {
  padding: 20px 22px 22px;
}

.qt-card h4 {
  color: #0a192f;
  font-size: 19px;
}

.qt-card .qt-desc {
  color: #536b8d;
  font-size: 14px;
  line-height: 1.55;
  min-height: 44px;
}

.qt-outcome-box {
  background: #f4f8fd;
  border: 0;
  margin-top: 14px;
  padding: 12px 14px;
}

.qt-outcome-box p {
  color: #536b8d;
  font-size: 13px;
  line-height: 1.45;
}

.qt-pagination {
  position: relative;
  bottom: auto !important;
  margin-top: 8px;
}

/* Root cause of the horizontal overflow across this page: style.css defines
   .container with a fixed width:1400px instead of max-width, so it never
   shrinks below 1400px and clips/cuts every section on smaller screens. */
.container {
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 567px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

* {
  box-sizing: border-box;
}

/* ---------- Header / Nav (match Default.aspx mobile pill offset) ---------- */

@media (max-width: 1366px) {
  .site-header-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .site-nav-links {
    gap: 18px;
  }

  .site-nav-link {
    font-size: 16px;
  }

  .site-nav-cta {
    padding: 12px 22px;
    font-size: 12px;
  }
}

/* Tablet + mobile — same floating pill header as Default.aspx */
@media (max-width: 991px) {
  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: 12px;
  }

  .site-header.is-scrolled {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  .site-header-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .site-header-row {
    height: auto;
    min-height: 0;
    padding: 6px 10px 6px 14px;
    gap: 12px;
    background: #fff;
    border-radius: 40px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.55);
  }

  .site-logo-img,
  .site-header.is-scrolled .site-logo-img {
    height: 40px !important;
    max-width: 170px;
    width: auto;
    object-fit: contain;
  }

  .site-nav-toggle {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 38px;
    padding: 8px 14px;
    border-radius: 22px;
    background: #242d62;
    border: none;
    cursor: pointer;
    margin-left: auto;
    gap: 6px;
    z-index: 110;
  }

  .site-menu-btn .site-menu-label,
  .site-menu-btn .site-menu-icon {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .site-menu-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    white-space: nowrap;
  }

  .site-menu-icon {
    line-height: 0;
  }

  .site-menu-icon svg {
    display: block;
    width: 18px;
    height: 6px;
    color: #fff;
  }

  .site-header {
    z-index: 1000;
  }

  .site-nav-links {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .site-header {
    padding-top: 10px;
  }

  .site-header-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .site-header-row {
    padding: 6px 8px 6px 12px;
    gap: 10px;
    border-radius: 36px;
  }

  .site-logo-img,
  .site-header.is-scrolled .site-logo-img {
    height: 36px !important;
    max-width: min(200px, 58vw);
  }

  .site-nav-toggle {
    width: auto;
    height: 40px;
    padding: 8px 12px;
    border-radius: 20px;
  }

  .site-menu-label {
    font-size: 11px;
  }
}

@media (max-width: 567px) {
  .site-header {
    padding-top: 8px;
  }

  .site-header-container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .site-header-row {
    padding: 5px 8px 5px 12px;
    gap: 8px;
    border-radius: 32px;
  }

  .site-logo-img,
  .site-header.is-scrolled .site-logo-img {
    height: 32px !important;
    max-width: min(180px, 62vw);
  }

  .site-nav-toggle {
    width: auto;
    height: 38px;
    padding: 8px 12px;
    border-radius: 18px;
  }

  .site-nav-links {
    display: none !important;
  }
}

/* ---------- Breadcrumb / Hero ---------- */

@media (max-width: 1199px) {
  .abt-breadcrumb {
    min-height: 480px;
    padding-top: 140px;
    padding-bottom: 60px;
  }

  .abt-breadcrumb h1 {
    font-size: 44px;
    line-height: 1.25;
  }

  .abt-breadcrumb p {
    font-size: 18px;
    line-height: 1.6;
  }

  .abt-purpose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .abt-breadcrumb {
    min-height: 380px;
    padding-top: 105px;
    padding-bottom: 45px;
  }

  .abt-container {
    padding: 0 20px;
  }

  .abt-breadcrumb h1 {
    font-size: 36px;
    line-height: 1.25;
    margin-bottom: 12px;
  }

  .abt-breadcrumb p {
    font-size: 16px;
    line-height: 1.55;
  }

  .abt-breadcrumb-nav {
    margin-top: 18px;
    padding: 8px 20px;
    gap: 10px;
  }

  .abt-breadcrumb-nav a,
  .abt-breadcrumb-nav strong,
  .abt-breadcrumb-nav span {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .abt-breadcrumb {
    min-height: 330px;
    padding-top: 92px;
    padding-bottom: 35px;
  }

  .abt-container {
    padding: 0 16px;
  }

  .abt-breadcrumb h1 {
    font-size: 28px;
    line-height: 1.25;
    margin-bottom: 10px;
  }

  .abt-breadcrumb p {
    font-size: 14.5px;
    line-height: 1.5;
  }

  .abt-breadcrumb-nav {
    margin-top: 14px;
    padding: 6px 16px;
    gap: 8px;
    border-radius: 40px;
  }

  .abt-breadcrumb-nav a,
  .abt-breadcrumb-nav strong,
  .abt-breadcrumb-nav span {
    font-size: 13px;
  }
}

@media (max-width: 567px) {
  .abt-breadcrumb {
    min-height: 290px;
    padding-top: 80px;
    padding-bottom: 28px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .abt-container {
    padding: 0 8px;
  }

  .abt-breadcrumb h1 {
    font-size: 24px;
    line-height: 1.22;
    margin-bottom: 8px;
  }

  .abt-breadcrumb p {
    font-size: 13.5px;
    line-height: 1.45;
  }

  .abt-breadcrumb-nav {
    margin-top: 12px;
    padding: 6px 14px;
    gap: 6px;
    border-radius: 30px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .abt-breadcrumb-nav a,
  .abt-breadcrumb-nav strong,
  .abt-breadcrumb-nav span {
    font-size: 12px;
    line-height: 1.2;
  }

  .abt-circle-one {
    width: 180px;
    height: 180px;
    top: -60px;
    left: -60px;
  }

  .abt-circle-two {
    width: 200px;
    height: 200px;
    bottom: -80px;
    right: -60px;
  }
}

/* ---------- Who We Are (Manufacturing Excellence) ---------- */

@media (max-width: 1199px) {
  .who-we-are-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
    gap: 40px;
  }

  .who-we-are-image > img {
    max-height: 480px;
  }

  .abt-ceo-badge {
    position: absolute;
    left: 30px;
  }

  .abt-purpose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .who-we-are-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .who-we-are-image {
    height: auto;
  }

  .who-we-are-image > img {
    max-height: 400px;
    object-fit: cover;
  }

  .who-we-are-content h3 {
    font-size: 30px;
    line-height: 38px;
  }
}

@media (max-width: 767px) {
  .who-we-are-section {
    padding: 60px 0;
  }

  .who-we-are-image > img {
    max-height: 400px;
  }

  .who-we-are-content h3 {
    font-size: 26px;
    line-height: 34px;
  }

  .who-we-are-content p {
    font-size: 15px;
    line-height: 26px;
  }
}

@media (max-width: 567px) {
  .who-we-are-image > img {
    max-height: 100%;
  }

  .who-we-are-content h3 {
    font-size: 22px;
    line-height: 30px;
  }
}

/* ---------- CEO Section ---------- */

@media (max-width: 1199px) {
  .abt-ceo-wrapper {
    gap: 40px;
  }
}

@media (max-width: 992px) {
  .abt-ceo-wrapper {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .abt-ceo-image {
    order: -1;
  }

  .abt-ceo-sign h4 {
    font-size: 18px;
    margin-top: 20px;
    color: #0a192f;
    margin-bottom: 8px;
  }
}

@media (max-width: 767px) {
  .abt-ceo-section {
    padding-bottom: 60px;
    padding-top: 0px;
  }

  .abt-ceo-content h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .abt-ceo-photo {
    height: 320px;
  }

  .abt-ceo-photo img {
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 567px) {
  .abt-ceo-content h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .abt-ceo-badge {
    left: 16px;
    bottom: 16px;
    padding: 12px 18px;
  }

  .abt-ceo-photo {
    height: 260px;
  }

  .abt-ceo-photo img {
    height: 100%;
  }
}

/* ---------- Vision / Mission (Purpose) ---------- */

@media (max-width: 992px) {
  .abt-purpose-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .abt-purpose-section {
    padding: 60px 0;
  }

  .abt-heading h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .abt-heading p {
    font-size: 15px;
    line-height: 26px;
  }

  .abt-purpose-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 567px) {
  .abt-purpose-card {
    padding: 28px 20px;
  }

  .abt-heading h2 {
    font-size: 24px;
    line-height: 32px;
  }
}

/* ---------- Quality & Certification ---------- */

@media (max-width: 992px) {
  .certificationSwiper .certification-card {
    height: 360px;
  }

  .certifications-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .certifications-grid .certification-card {
    height: auto !important;
  }

  .certifications-grid .certification-card img {
    height: 280px;
  }
}

@media (max-width: 767px) {
  .quality-certification-section {
    padding: 50px 0;
  }

  .cert-nav {
    display: none;
  }

  .certificationSwiper .certification-card {
    height: 480px;
    padding: 16px;
  }

  .certifications-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 25px;
  }

  .certifications-grid .certification-card {
    height: auto !important;
    padding: 12px;
  }

  .certifications-grid .certification-card img {
    height: 260px;
    width: 100%;
    object-fit: contain;
  }
}

@media (max-width: 567px) {
  .quality-certification-section {
    padding: 40px 0;
  }

  .quality-certification-section .abt-heading h2 {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .quality-certification-section .abt-heading p {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .certificationSwiper .certification-card {
    height: 400px;
    padding: 14px;
  }

  .certifications-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 340px;
    margin: 20px auto 0;
    gap: 16px;
  }

  .certifications-grid .certification-card {
    height: auto !important;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  }

  .certifications-grid .certification-card img {
    height: auto !important;
    max-height: 150px;
    width: 100%;
    aspect-ratio: 1 / 1.414;
    object-fit: contain;
  }
}

@media (min-width: 480px) and (max-width: 567px) {
  .certifications-grid {
    max-width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .certifications-grid .certification-card img {
    height: 240px !important;
  }
}

/* ---------- Quality Testing Timeline ---------- */

/* style.css's mobile rule (.qt-timeline-number{right:24px; left:auto!important})
   loses to the higher-specificity desktop rule .qt-right-card .qt-timeline-number
   {right:auto} for right-side cards — right stays auto while left is forced
   auto too, so the badge has no edge to pin to and floats out of place.
   Pin both sides explicitly on the same selector to win. */
@media (max-width: 991px) {
  .qt-process-section {
    padding: 65px 0 80px;
  }

  .qt-infographic-banner {
    margin: 30px auto 45px;
    border-radius: 18px;
  }

  .qt-infographic-overlay {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    bottom: 16px;
    left: 16px;
    right: 16px;
  }

  .qt-infographic-zoom-btn {
    font-size: 12.5px;
    padding: 7px 15px;
  }

  .qt-carousel-title h3 {
    font-size: 22px;
    text-align: center;
  }

  .qt-carousel-title p {
    text-align: center;
  }

  .qt-card-media {
    border-radius: 10px;
  }
}

@media (max-width: 767px) {
  .qt-process-section {
    padding: 50px 0 65px;
  }

  .qt-carousel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .qt-nav-arrows {
    align-self: center;
  }

  .qt-card {
    padding: 0;
  }

  .qt-card-body {
    padding: 20px 22px 22px;
  }

  .qt-card h4 {
    font-size: 17.5px;
  }
}

@media (max-width: 575px) {
  .qt-infographic-tag {
    font-size: 11px;
    padding: 5px 10px;
  }

  .qt-infographic-zoom-btn {
    font-size: 11.5px;
    padding: 6px 12px;
  }

  .qt-card-icon {
    width: 44px;
    height: 44px;
    padding: 8px;
  }

  .qt-step-badge {
    font-size: 11.5px;
    padding: 3px 10px;
  }
}

/* ---------- Industries ---------- */

@media (max-width: 1199px) {
  .industries-section {
    height: 520px;
  }

  .industriesSwiper .industry-card {
    height: 420px;
  }

  .industriesSwiper .industry-card h3 {
    font-size: 30px;
    line-height: 36px;
  }
}

/* Below 991px cards stack. The desktop design overlays white text directly
   on the photo using a gradient that's dark at the bottom / light at the
   top (built for bottom-anchored text). A stacked mobile card can't rely on
   that gradient, so instead of overlaying text on the image at all, each
   card becomes: photo on top, solid-background caption band below — this
   keeps the title/paragraph readable no matter how bright the photo is. */
@media (max-width: 991px) {
  .industries-wrapper {
    padding: 60px 16px;
  }

  .industries-nav {
    display: none;
  }

  .industriesSwiper .industry-card {
    height: 380px;
  }

  .industriesSwiper .industry-card h3 {
    font-size: 26px;
    line-height: 32px;
  }

  .industriesSwiper .industry-overlay {
    padding: 28px;
  }

  .industriesSwiper .industry-overlay p {
    font-size: 16px;
    line-height: 26px;
    color: #fff !important;
  }

  .industries-section {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }

  .industries-section .industry-card,
  .industries-section .industry-card.active {
    width: 100% !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    flex: none;
  }

  .industries-section .industry-card img {
    position: static;
    width: 100%;
    height: 280px;
    object-fit: cover;
  }

  .industries-section .industry-card::before {
    display: none;
  }

  .industries-section .industry-overlay {
    position: static;
    inset: auto;
    padding: 22px 22px 24px;
    background: #0a192f;
  }

  .industries-section .industry-icon {
    position: static;
    margin-bottom: 14px;
    width: 40px;
    height: 40px;
    font-size: 16px;
    transform: none;
  }

  .industries-section .industry-overlay h3,
  .industries-section .industry-card:not(.active) h3 {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    writing-mode: initial !important;
    white-space: normal !important;
    text-align: left;
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 10px;
  }

  .industries-section .industry-overlay p,
  .industries-section .industry-card:not(.active) p {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    position: static;
    max-width: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 24px;
  }

  .industries-section .industry-overlay a {
    opacity: 1;
    transform: none;
    position: static;
  }
}

@media (max-width: 768px) {
  .industry-card:not(.active) h3,
  .industries-section .industry-card:not(.active) h3,
  .industries-section .industry-overlay h3,
  .industriesSwiper .industry-card:not(.active) h3,
  .industriesSwiper .industry-card h3 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    position: absolute;
    bottom: 120px;
    left: 5%;
    white-space: nowrap;
    margin: 0;
    transform: none;
    writing-mode: initial;
    line-height: normal;
  }

  .industriesSwiper .industry-overlay {
    position: absolute;
    inset: 0;
    padding: 0;
    background: transparent;
  }

  .industriesSwiper .industry-card::before {
    display: block;
  }
}

@media (max-width: 567px) {
  .industriesSwiper .industry-card {
    height: 340px;
  }

  .industriesSwiper .industry-card h3 {
    font-size: 22px;
    line-height: 28px;
  }

  .industriesSwiper .industry-overlay {
    padding: 22px;
  }

  .industries-section .industry-card img {
    height: 220px;
  }

  .industries-section .industry-overlay {
    padding: 18px 18px 20px;
  }

  .industries-section .industry-overlay h3 {
    font-size: 19px;
  }

  .industries-section .industry-overlay p {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ---------- Disable hover-only motion on touch/mobile ----------
   A tap on a touch device fires :hover with no matching "unhover" event
   until the user taps elsewhere, so scale/translateY hover effects built
   for desktop mouse-over get stuck mid-transform on phones. Below 991px
   (and on any touch pointer) these are neutralized site-wide. */
@media (max-width: 991px), (hover: none) {
  .industry-card:hover img,
  .who-we-are-image:hover img,
  .abt-ceo-photo:hover img,
  .abt-purpose-card:hover,
  .certification-card:hover,
  .qt-timeline-card:hover,
  .industry-item:hover,
  .industry-item:hover img,
  .premium-card:hover,
  .bls-product-card:hover,
  .bls-gallery-card:hover,
  .ei-card:hover,
  .scroll-top-btn:hover,
  .abt-infra-card:hover,
  .abt-infra-card:hover .abt-infra-image img,
  .abt-card:hover,
  .stack-card:hover img,
  .bls-stack-card:hover,
  .bls-trust-pill:hover,
  .industry-pill:hover,
  .client-logo-card:hover img {
    transform: none !important;
    box-shadow: revert;
  }
}

/* Responsive rules for bls-eco-section */
@media (max-width: 1199px) {
  .bls-eco-watermark {
    font-size: 130px;
    left: 42%;
  }

  .bls-eco-footprint {
    right: 22%;
    top: -65px;
    width: 135px;
  }

  .bls-eco-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
    margin-top: -65px;
  }

  .bls-eco-banner-card {
    min-height: 230px;
  }
}

@media (max-width: 767px) {
  .bls-eco-section {
    padding: 0px 0 0px;
  }

  .bls-eco-title {
    font-size: 28px;
  }

  .bls-eco-header {
    margin-bottom: 40px;
  }

  .bls-eco-watermark {
    font-size: 85px;
    letter-spacing: 8px;
    left: 45%;
  }

  .bls-eco-footprint {
    right: 12%;
    top: -50px;
    width: 105px;
  }

  .bls-eco-banner-card {
    min-height: 180px;
    border-radius: 24px;
  }

  .bls-eco-banner-card::before {
    border-radius: 24px;
  }

  .bls-eco-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    row-gap: 36px;
    margin-top: -45px;
  }

  .bls-eco-badge {
    width: 84px;
    height: 108px;
    margin-bottom: 14px;
  }

  .bls-eco-icon {
    width: 44px;
    height: 44px;
  }

  .bls-svg-icon {
    width: 38px;
    height: 38px;
  }

  .bls-brc-svg {
    width: 38px;
    height: 42px;
  }

  .bls-eco-text {
    font-size: 13px;
    max-width: 150px;
  }
}

@media (max-width: 480px) {
  .bls-eco-title {
    font-size: 23px;
  }

  .bls-eco-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    row-gap: 28px;
  }

  .bls-eco-badge {
    width: 76px;
    height: 98px;
  }

  .bls-eco-fold {
    width: 22px;
    height: 22px;
  }

  .bls-eco-fold::after {
    border-width: 0 22px 22px 0;
  }

  .bls-svg-icon {
    width: 34px;
    height: 34px;
  }

  .bls-eco-text {
    font-size: 12px;
    line-height: 1.3;
  }
}

/* ---------- Footer ---------- */

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 567px) {
  .site-footer-inner {
    padding: 48px 20px 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ---------- Generic section heading (shared) ---------- */

@media (max-width: 767px) {
  .section-heading h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .section-heading p {
    font-size: 15px;
    line-height: 26px;
  }
}

@media (max-width: 567px) {
  .section-heading h2 {
    font-size: 24px;
    line-height: 32px;
  }
}

/* ---------- Product Listing page ---------- */

/* Grid tracks default to min-width:auto, so a track can refuse to shrink
   below its content's intrinsic size and push the row wider than the
   viewport. min-width:0 lets both columns shrink and wrap normally. */
.bls-product-row > .bls-product-image,
.bls-product-row > .bls-product-content {
  min-width: 0;
}

@media (max-width: 1366px) {
  .bls-products-page {
    padding: 100px 0;
  }
}

@media (max-width: 1199px) {
  .bls-product-row {
    gap: 50px;
  }

  .bls-product-content h3 {
    font-size: 26px;
  }
}

@media (max-width: 992px) {
  .bls-products-page {
    padding: 100px 0;
  }

  .bls-product-row,
  .bls-product-row.reverse {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 50px;
  }

  .bls-product-row.reverse .bls-product-image,
  .bls-product-row.reverse .bls-product-content {
    order: initial;
  }

  .bls-product-image {
    padding: 30px;
    min-height: auto;
  }
}

@media (max-width: 767px) {
  .bls-products-page {
    padding: 60px 0;
  }

  .bls-product-row,
  .bls-product-row.reverse {
    margin-bottom: 56px;
  }

  .bls-product-image {
    padding: 24px;
    min-height: auto;
  }

  .bls-product-image img {
    max-height: 280px;
  }

  .bls-product-content h3 {
    font-size: 24px;
    line-height: 1.25;
  }

  .bls-product-content p {
    font-size: 16px;
    line-height: 24px;
  }

  .section-heading p,
  p {
    font-size: 16px;
    line-height: 24px;
  }

  .bls-feature-list {
    gap: 10px;
  }

  .bls-feature-list span {
    padding: 9px 16px;
    font-size: 14px;
  }

  .bls-btn {
    padding: 14px 30px;
  }
}

@media (max-width: 567px) {
  .bls-product-image {
    padding: 18px;
    border-radius: 20px;
  }

  .bls-product-image img {
    max-height: 220px;
  }

  .bls-product-tag {
    padding: 8px 16px;
    font-size: 12px;
  }

  .bls-product-content h3 {
    font-size: 21px;
  }

  .bls-product-content p {
    font-size: 16px;
    line-height: 24px;
  }

  .section-heading p,
  p {
    font-size: 16px;
    line-height: 24px;
  }

  .bls-feature-list {
    gap: 8px;
    margin-bottom: 20px;
  }

  .bls-feature-list span {
    padding: 7px 14px;
    font-size: 13px;
  }

  .bls-btn {
    width: auto;
    padding: 14px 20px;
  }
}

/* ---------- Product detail pages (container-liner, flexitank, fibc, etc.) ---------- */

/* Specs sidebar removed — detail content stays full width (col-12). */
.ftd-overview-grid-main,
.ftd-overview-spec-section .row {
  display: block;
}

.ftd-overview-left {
  width: 100%;
  max-width: 100%;
}

/* style.css hardcodes .ftd-overview-img-container to width:800px;height:400px
   — a fixed pixel box that overflows any viewport under 800px wide. Make it
   fluid at every breakpoint below that. */
.ftd-overview-img-container {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 2/1;
  margin-bottom: 30px;
}

.ftd-overview-img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 1366px) {
  .ftd-overview-spec-section {
    padding: 80px 0;
  }
}

@media (max-width: 1199px) {
  .ftd-overview-grid-main {
    gap: 40px;
  }

  .ftd-overview-left h2 {
    font-size: 32px;
    line-height: 38px;
  }
}

@media (max-width: 992px) {
  .ftd-overview-spec-section {
    padding: 60px 0;
  }
}

@media (max-width: 767px) {
  .ftd-overview-left h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .ftd-overview-left > p {
    font-size: 16px;
    line-height: 1.8;
  }

  .ftd-feature-card {
    padding: 26px 18px;
  }

  .ftd-spec-card th,
  .ftd-spec-card td {
    padding: 14px 18px;
    font-size: 14px;
  }

  .ftd-spec-header h3 {
    font-size: 20px;
  }
}

@media (max-width: 567px) {
  .ftd-overview-left h2 {
    font-size: 22px;
    line-height: 28px;
  }

  .ftd-feature-grid {
    gap: 14px;
  }

  .ftd-spec-card th,
  .ftd-spec-card td {
    padding: 12px 14px;
    font-size: 13px;
  }
}

/* ---------- Contact Us / Career & Contacts pages ---------- */

@media (max-width: 1366px) {
  .contact-getintouch-section {
    padding: 80px 0;
  }
}

@media (max-width: 1200px) {
  .gt-layout {
    gap: 50px;
  }

  .gt-layout.contacts-gt-row {
    gap: 50px;
  }

  .gt-info h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .gt-form-card {
    padding: 36px;
  }

  .site-header.is-scrolled .site-logo-img {
    height: 45px !important;
  }
}

@media (max-width: 992px) {
  .contact-getintouch-section {
    padding: 60px 0;
  }

  .gt-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .gt-layout.contacts-gt-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .gt-map {
    height: 380px;
  }

  .gt-detail-item {
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .gt-info h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .gt-info > p {
    font-size: 15px;
    line-height: 1.8;
  }

  .gt-form-card {
    padding: 28px;
  }

  .gt-form-card h3 {
    font-size: 22px;
  }

  .gt-detail-icon {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }

  .gt-detail-text h4 {
    font-size: 17px;
  }

  .gt-cta-btn {
    width: auto;
    justify-content: center;
  }

  .gt-map-full {
    height: 280px;
  }
}

@media (max-width: 567px) {
  .contact-getintouch-section {
    padding: 50px 0;
  }

  .gt-info h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .gt-map {
    height: 260px;
  }

  .gt-form-card {
    padding: 22px;
  }

  .gt-form-card h3 {
    font-size: 20px;
  }

  .gt-form-submit {
    width: auto;
    justify-content: center;
  }
}

/* =========================================================
   ABOUT US / HOME VIDEO RESPONSIVE BREAKPOINTS
   (1366px, 1200px, 1199px, 992px, 767px, 567px)
========================================================= */

@media (max-width: 1366px) {
  .home-video-section {
    padding: 30px 0 !important;
  }

  .home-video-section .abt-full-width-container {
    max-width: 1180px !important;
    padding: 0 20px !important;
  }

  .home-video-section .home-video-wrap {
    max-width: 1140px !important;
    border-radius: 16px !important;
    padding: 8px !important;
  }

  .home-video-section .home-video-player {
    max-height: 520px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 1200px) {
  .home-video-section {
    padding: 28px 0 !important;
  }

  .home-video-section .abt-full-width-container {
    max-width: 1060px !important;
    padding: 0 18px !important;
  }

  .home-video-section .home-video-wrap {
    max-width: 1020px !important;
    border-radius: 16px !important;
    padding: 7px !important;
  }

  .home-video-section .home-video-player {
    max-height: 480px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 1199px) {
  .home-video-section {
    padding: 26px 0 !important;
  }

  .home-video-section .abt-full-width-container {
    max-width: 960px !important;
    padding: 0 18px !important;
  }

  .home-video-section .home-video-wrap {
    max-width: 920px !important;
    border-radius: 14px !important;
    padding: 6px !important;
  }

  .home-video-section .home-video-player {
    max-height: 440px !important;
    border-radius: 9px !important;
  }
}

@media (max-width: 992px) {
  .home-video-section {
    padding: 24px 0 !important;
  }

  .home-video-section .abt-full-width-container {
    max-width: 720px !important;
    padding: 0 16px !important;
  }

  .home-video-section .home-video-wrap {
    max-width: 680px !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  }

  .home-video-section .home-video-player {
    max-height: 380px !important;
    border-radius: 8px !important;
  }

  .abt-purpose-section {
    padding: 30px 0;
  }
}

@media (max-width: 767px) {
  .home-video-section {
    padding: 20px 0 !important;
  }

  .home-video-section .abt-full-width-container {
    max-width: 100% !important;
    padding: 0 14px !important;
  }

  .home-video-section .home-video-wrap {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
    padding: 5px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
  }

  .home-video-section .home-video-player {
    max-height: 300px !important;
    border-radius: 6px !important;
  }

  .mvp-foundation-row {
    grid-template-columns: 1fr;
    gap: 0px;
  }
}

@media (max-width: 567px) {
  .home-video-section {
    padding: 16px 0 !important;
  }

  .home-video-section .abt-full-width-container {
    padding: 0 10px !important;
  }

  .home-video-section .home-video-wrap {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    padding: 4px !important;
    border: 1px solid #e2e8f0 !important;
  }

  .home-video-section .home-video-player {
    max-height: 240px !important;
    border-radius: 5px !important;
  }

  .mvp-foundation-row {
    grid-template-columns: 1fr;
    gap: 0px;
  }

  .footer-contact-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .footer-contact-list li {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}