* {
  margin: 0;
  padding: 0;
  outline: none;
  text-decoration: none;
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a:focus {
  outline: none;
}

input[type=file]::-webkit-file-upload-button {
  cursor: pointer;
}

input[type=file]::-moz-file-upload-button {
  cursor: pointer;
}

input[type=file]::-ms-file-upload-button {
  cursor: pointer;
}

input[type=file]::-o-file-upload-button {
  cursor: pointer;
}

input[type=file] {
  cursor: pointer;
}

html body {
  font-family: "Plus Jakarta Sans";
  font-weight: normal;
  overflow-x: hidden;
  /* background: #F7F7F3 (was #fff) -- per follow-up feedback ("change
     white backgrounds to the same off-white used in the Why iBOX
     hero"). This is the page's own base/fallback background, showing
     through behind every section that doesn't set its own -- the most
     literal "white page background" on the site. */
  background: #F7F7F3;
  padding: 0;
  position: relative;
}

*::-moz-selection {
  color: #fff;
  background: var(--secondary);
}

*::selection {
  color: #fff;
  background: var(--secondary);
}

*::-moz-selection {
  color: #fff;
  background: var(--secondary);
}

*::-webkit-selection {
  color: #fff;
  background: var(--secondary);
}

*::-ms-selection {
  color: #fff;
  background: var(--secondary);
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  font-family: "Plus Jakarta Sans";
  border: 0;
  outline: 0;
  font-size: 100%;
}

b,
strong {
  font-weight: 600;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

a,
div a:hover,
div a:active,
div a:focus,
button {
  text-decoration: none;
  transition: all 0.5s ease 0s;
}

a,
span,
div a:hover,
div a:active,
button {
  text-decoration: none;
}

*::after,
*::before,
* {
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

body a {
  font-family: "Plus Jakarta Sans";
  font-weight: normal;
  color: #1B1D1F;
  text-decoration: none;
  outline: none !important;
}

body a:focus {
  outline: none !important;
}

body a:hover {
  color: var(--secondary);
  outline: none !important;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul,
li {
  list-style: none;
}

input,
select,
textarea,
.site textarea {
  font-family: "Plus Jakarta Sans";
  font-weight: normal;
  width: 100%;
  background: #fff;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

/**
 * FLUID DESKTOP TYPOGRAPHY -- replaces a chain of flat, device-targeted
 * breakpoint tiers (a "UNIFIED DESKTOP SCALE" pass, then a "TWO-TIER"
 * pass, then a (min-resolution: 2dppx) "Mac-only" pass layered on top)
 * that had drifted into a genuinely non-monotonic ladder: e.g. h1 was
 * 62px from 1101-1439px, jumped UP to 80px at 1440-1599px, then jumped
 * back DOWN to 62px at >=1600px, with a further separate value again
 * for high-density displays. That is the literal cause of headings
 * visibly growing then shrinking again as the window widened, and of
 * "Mac" vs "Windows" looking different at the same logical width --
 * (min-resolution: 2dppx) detects display density, not operating
 * system, so it was never a reliable Mac/Windows signal anyway.
 *
 * FIX: each heading now uses a single clamp() that grows smoothly from
 * this same floor value (still exactly what every viewport up to and
 * including tablet, <=1101px, already used) up to the old "restored
 * normal desktop" ceiling, reached at a 1920px viewport and held
 * there for wider screens -- a deliberate, reasonable upper limit for
 * very wide/ultra-wide monitors rather than unbounded growth, per this
 * site's own "reasonable upper limit... for extreme ultra-wide
 * screens" requirement. No device/resolution detection of any kind.
 * Mobile and tablet (<=1101px, where the clamp already sits at its
 * floor) are visually unchanged.
 */
h1 {
  font-family: "Plus Jakarta Sans";
  font-size: clamp(62px, 2.1978vw + 37.802px, 80px);
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

h2 {
  color: #212121;
  font-family: "Plus Jakarta Sans";
  font-size: clamp(32px, 0.7326vw + 23.934px, 38px);
  font-weight: 500;
  text-transform: uppercase;
}

h3 {
  color: #212121;
  font-size: clamp(27px, 0.3663vw + 22.967px, 30px);
  font-weight: 500;
  font-family: "Plus Jakarta Sans";
  line-height: normal;
  text-transform: uppercase;
}

h4 {
  color: #212121;
  font-size: clamp(20px, 0.3663vw + 15.967px, 23px);
  font-weight: 500;
  font-family: "Plus Jakarta Sans";
  line-height: normal;
  text-transform: uppercase;
}

h5 {
  color: #212121;
  font-size: clamp(20px, 0.3663vw + 15.967px, 23px);
  font-weight: 700;
  font-family: "Plus Jakarta Sans";
  line-height: normal;
  text-transform: uppercase;
}

h6 {
  color: #212121;
  font-size: clamp(19px, 0.3663vw + 14.967px, 22px);
  font-weight: 500;
  font-family: "Plus Jakarta Sans";
  line-height: normal;
  text-transform: uppercase;
}

/*
 * Official brand names (iBOX, OPTiCLEAN) must always render with their
 * exact casing -- the lowercase "i" must never be capitalised. The base
 * h1-h6 rules above (and several other uppercase/capitalize rules in
 * this stylesheet) force every heading to full caps by default; apply
 * this class directly to a heading/link that is *only* the brand name,
 * or wrap just the brand-name word in <span class="ibox-preserve-case">
 * inside a longer heading, to guarantee correct rendering everywhere on
 * the site regardless of which ancestor element sets the transform.
 */
.ibox-preserve-case {
  text-transform: none !important;
}

img {
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  outline: none !important;
}

body p {
  color: #212121;
  font-family: "Plus Jakarta Sans";
  font-weight: normal;
  /* Fluid desktop scale -- see the "FLUID DESKTOP TYPOGRAPHY" comment
     above the h1-h6 rules for the full explanation of what this
     replaces (a non-monotonic flat-tier ladder plus a
     (min-resolution: 2dppx) "Mac" override). Floor (14px) is what
     every viewport up to and including tablet already used; grows
     smoothly to 16px by a 1920px viewport and holds there. */
  font-size: clamp(14px, 0.2442vw + 11.311px, 16px);
  line-height: 170%;
  margin: 0;
  padding: 0 0 12px 0;
  text-align: left;
  display: block;
}

body p strong {
  color: #F6921E;
}

p:last-of-type {
  padding-bottom: 0;
}

.padding {
  padding: 100px 0;
}

iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
  position: absolute;
  left: -70px;
  right: auto;
  top: 50%;
  bottom: auto;
  margin: auto;
  font-size: 0;
  background-image: url("../images/Arrow-yellow.svg");
  background-color: #fff;
  background-size: contain;
  border-radius: 50%;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  z-index: 1;
  transform: translateY(-50%) rotate(180deg);
  background-size: 15px;
  background-position: center;
}

.owl-carousel .owl-nav button:hover {
  opacity: 0.8;
}

.owl-carousel .owl-nav button.owl-next {
  transform: translateY(-50%) rotate(0deg);
  left: auto !important;
  right: -70px;
}

.owl-carousel .owl-nav button.disabled {
  opacity: 0.5;
}

.owl-dots button {
  height: 8px;
  width: 8px;
  background: #161616 !important;
  border-radius: 50px;
  padding: 0;
  border: 0;
  transition: unset;
  margin: 0 7px;
}

.owl-dots button.active {
  height: 14px;
  width: 14px;
  background: transparent !important;
  border: 2px solid #AD7D45;
  transition: unset;
}

.owl-dots button span {
  display: none;
}

.gform_wrapper h2.gform_title {
  display: none;
}
.gform_wrapper .gfield input,
.gform_wrapper .gfield select {
  background: transparent;
  height: 55px;
  line-height: 55px;
  padding: 0 15px !important;
  border: 1px solid #EBEBEB !important;
  color: #1B1D1F;
  font-size: 16px !important;
  font-weight: 400;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 5px;
}
.gform_wrapper .gfield select {
  cursor: pointer;
  color: #808080;
}
.gform_wrapper .gfield .ginput_container_select {
  position: relative;
}
.gform_wrapper .gfield .ginput_container_select::before {
  position: absolute;
  content: "";
  background-image: url(../images/ic-menu-dropdown-arrow-black.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 10px;
  height: 6px;
  left: auto;
  right: 24px;
  top: 24px;
  filter: brightness(0) saturate(100%) invert(69%) sepia(0%) saturate(3502%) hue-rotate(44deg) brightness(93%) contrast(90%);
  pointer-events: none;
}
.gform_wrapper .gfield textarea {
  background: transparent;
  height: 145px !important;
  line-height: normal;
  padding: 15px !important;
  border: 1px solid #EBEBEB !important;
  color: #1B1D1F;
  font-size: 16px !important;
  font-weight: 400;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 5px;
  resize: none;
}
.gform_wrapper .gfield div.ginput_container {
  background-color: transparent;
  width: 100%;
}
.gform_wrapper::-moz-placeholder, .gform_wrapper select::-moz-placeholder {
  color: #61606B;
}
.gform_wrapper::placeholder,
.gform_wrapper select::placeholder {
  color: #61606B;
}
.gform_wrapper .gform_footer {
  padding: 0 !important;
  margin: 20px 0 0px !important;
  position: relative;
  width: -moz-max-content;
  width: max-content;
}
.gform_wrapper .gform_footer .gform_button {
  background: #D5AD51;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.96px;
  line-height: 130%;
  font-weight: bold;
  padding: 15px 50px 15px 24px;
  display: inline-block;
  position: relative;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  transition: all ease 0.5s;
}
.gform_wrapper .gform_footer .gform_button:hover {
  background: #DB8E11;
}
.gform_wrapper .gform_footer::before {
  position: absolute;
  content: "";
  background: url(../images/header-arrow.svg) no-repeat;
  background-size: contain;
  width: 13px;
  height: 11px;
  top: 19px;
  left: auto;
  right: 24px;
  pointer-events: none;
  z-index: 1;
}

select::-moz-placeholder {
  color: #31313F;
}

select::placeholder {
  color: #31313F;
}

.gform_validation_errors {
  display: none !important;
}

.gfield_validation_message {
  background: transparent !important;
  border: 0 !important;
  font-size: 13px !important;
  padding: 0 !important;
  color: red !important;
  font-weight: 400;
  letter-spacing: 0.5px !important;
  text-align: left !important;
}

.gform_wrapper.gravity-theme .gform_fields {
  grid-column-gap: unset !important;
  grid-gap: 20px 15px !important;
}

.gform_confirmation_message {
  text-align: left;
  color: green;
  font-weight: 500;
  font-size: 18px;
  background-color: #ebf4eb;
  padding: 20px 25px;
  border-radius: 3px;
}

.btn-main {
  background-color: var(--secondary);
  border-radius: 50px;
  padding: 16px 32px;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  display: block;
  width: -moz-max-content;
  width: max-content;
  text-transform: uppercase;
  transition: all 0.5s;
}

.btn-main:hover {
  background-color: var(--primary);
  color: var(--white);
  transition: all 0.5s;
}

.es_subscription_message.success {
  color: #13a513 !important;
}

.fixed {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
}

#header {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  transition-duration: 300ms;
  -webkit-transition-duration: 300ms;
  -moz-transition-duration: 300ms;
  transition-property: all;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
  -webkit-transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
  -moz-transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
  padding: 20px 51px;
}

#header.fixed::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
}

#header .container {
  width: 100%;
  padding: 0 40px;
}

#header .wrapper .menu ul#menu-header-menu {
  display: flex;
  align-items: center;
  margin: 0 -18px;
}

#header .wrapper .menu ul#menu-header-menu li {
  margin: 0 18px;
  position: relative;
}

#header .wrapper .menu ul#menu-header-menu li a {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  position: relative;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}

#header .wrapper .menu ul#menu-header-menu li a:hover {
  color: #D1AA4F;
}

#header .wrapper .menu ul#menu-header-menu li.menu-has-children:hover > a,
#header .wrapper .menu ul#menu-header-menu li.current-menu-item a {
  color: #D1AA4F;
}

#header .wrapper .header-menu {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/*
 * Logo sits in the middle grid column; the empty 1fr column on either
 * side is what keeps it mathematically centered on the header no
 * matter how wide the logo block is (single logo or dual lockup).
 * The nav/hamburger column keeps the same "auto"-equivalent behaviour
 * it always had (flex, right-aligned), just now explicitly placed in
 * the 3rd column so it stays flush with the right edge.
 */
#header .wrapper .header-menu .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  grid-column: 2;
}

.header-menu-wrapper {
  display: flex;
  justify-content: end;
}

#header .wrapper .header-menu .header-menu-wrapper {
  grid-column: 3;
}

#header .wrapper .header-menu .header-btn {
  margin-left: 45px;
}

#header .wrapper .menu ul#menu-header-menu li.menu-item-has-children {
  padding-right: 20px;
}

#header .wrapper .menu ul#menu-header-menu li.menu-item-has-children:hover ul.sub-menu {
  opacity: 1;
  visibility: visible;
}

#header .wrapper .menu ul#menu-header-menu li.menu-item-has-children::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  height: 20px;
  bottom: -18px;
}

#header .wrapper .menu ul#menu-header-menu span.submenu-click-arrow {
  background: url("../images/navigation-dropdown.svg") no-repeat;
  display: block;
  width: 10px;
  height: 6px;
  position: absolute;
  left: auto;
  right: 0px;
  top: 7px;
  cursor: pointer;
  transition: all ease 0.5s;
  background-size: contain;
  pointer-events: none;
}

/*sub-menu*/
#header .wrapper .menu ul#menu-header-menu li ul.sub-menu {
  background-color: #fff;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  left: 0;
  padding: 0;
  top: 38px;
  transition: cubic-bezier(0.25, 0.1, 0.32, 0.83) 0.5s;
  -webkit-transition: cubic-bezier(0.25, 0.1, 0.32, 0.83) 0.3s;
  -moz-transition: cubic-bezier(0.25, 0.1, 0.32, 0.83) 0.3s;
  -o-transition: cubic-bezier(0.25, 0.1, 0.32, 0.83) 0.3s;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
  transform-origin: top;
  border-radius: 5px;
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li {
  width: 100%;
  height: auto;
  margin: 0;
  position: relative;
  padding: 0px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li:first-child {
  border-radius: 5px 5px 0 0;
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li:last-child {
  border-radius: 0 0 5px 5px;
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li a {
  display: block;
  padding: 15px 25px;
  text-transform: initial;
  font-size: 15px;
  color: #192539;
  font-weight: 600;
  transition: none;
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li:last-child a {
  border: 0;
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li:hover,
#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li.current-menu-item {
  background: #D1AA4F;
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li:hover a,
#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li.current-menu-item a {
  color: #fff;
}

#header .wrapper .header-menu .logo a {
  display: block;
  transition: all ease 0.5s;
  width: 170px;
}

/**/
#header.fixed {
  padding: 16px 0;
}

#header.fixed .wrapper .header-menu .logo a {
  width: 140px;
}

/* ============================================================
   Dual-brand header logo (iBOX + OPTiCLEAN)
   Shown on every page except the dedicated Cases (iBOX-only) and
   Microfiber Cloths (OPTiCLEAN-only) templates -- see
   inc/header-branding.php.

   - iBOX stays at its normal single-logo width at every breakpoint
     (unchanged from the .logo a rules above).
   - OPTiCLEAN renders ~18% narrower than iBOX so it reads as the
     secondary mark, aspect ratio preserved (width-only sizing).
   - The divider is sized to roughly the cap-height of the two
     wordmarks only, not the taglines beneath them, so it sits
     shorter and more elegant than the full logo height.
   - gap is generous and equal on both sides of the divider (flex
     gap), so nothing feels cramped.
   ============================================================ */
/**
 * FLUID DESKTOP LOGO SIZE -- replaces two fixed-pixel desktop tiers
 * (>=1700px unconditional + a separate 1280-1699px override) with a
 * single clamp() per dimension, floor matching the existing <=1120px
 * tablet/mobile value (untouched, further down this file) and ceiling
 * matching the old >=1700px value, reached smoothly by a 1920px
 * viewport instead of jumping at the 1280px/1700px boundaries. No
 * device or resolution targeting was ever involved here.
 */
#header .wrapper .header-menu .logo.logo--dual {
  gap: clamp(16px, 0.5006vw + 10.388px, 20px);
}

#header .wrapper .header-menu .logo.logo--dual a {
  display: block;
  transition: all ease 0.5s;
}

#header .wrapper .header-menu .logo.logo--dual .logo__ibox {
  width: clamp(182px, 4.8811vw + 127.283px, 221px);
}

#header .wrapper .header-menu .logo.logo--dual .logo__opticlean {
  width: clamp(234px, 6.2578vw + 163.85px, 284px);
  position: relative;
  top: -4px;
}

#header .wrapper .header-menu .logo.logo--dual .logo__divider {
  display: inline-block;
  width: 2px;
  height: clamp(41px, 1.1264vw + 28.373px, 50px);
  background: #F6921E;
  flex-shrink: 0;
}

#header.fixed .wrapper .header-menu .logo.logo--dual .logo__ibox {
  width: clamp(142px, 3.0038vw + 108.328px, 166px);
}

#header.fixed .wrapper .header-menu .logo.logo--dual .logo__opticlean {
  width: clamp(200px, 4.2553vw + 152.298px, 234px);
}

#header.fixed .wrapper .header-menu .logo.logo--dual .logo__divider {
  height: clamp(36px, 0.6258vw + 28.985px, 41px);
}

@media (max-width: 1120px) {
  #header .wrapper .header-menu .logo.logo--dual {
    gap: 16px;
  }
  #header .wrapper .header-menu .logo.logo--dual .logo__ibox {
    width: 182px;
  }
  #header .wrapper .header-menu .logo.logo--dual .logo__opticlean {
    width: 234px;
  }
  #header .wrapper .header-menu .logo.logo--dual .logo__divider {
    height: 41px;
  }
  #header.fixed .wrapper .header-menu .logo.logo--dual .logo__ibox {
    width: 142px;
  }
  #header.fixed .wrapper .header-menu .logo.logo--dual .logo__opticlean {
    width: 200px;
  }
  #header.fixed .wrapper .header-menu .logo.logo--dual .logo__divider {
    height: 36px;
  }
}

@media (max-width: 991px) {
  #header .wrapper .header-menu .logo.logo--dual {
    gap: 14px;
  }
  #header .wrapper .header-menu .logo.logo--dual .logo__ibox {
    width: 156px;
  }
  #header .wrapper .header-menu .logo.logo--dual .logo__opticlean {
    width: 200px;
  }
  #header .wrapper .header-menu .logo.logo--dual .logo__divider {
    height: 35px;
  }
  #header.fixed .wrapper .header-menu .logo.logo--dual .logo__ibox {
    width: 130px;
  }
  #header.fixed .wrapper .header-menu .logo.logo--dual .logo__opticlean {
    width: 183px;
  }
  #header.fixed .wrapper .header-menu .logo.logo--dual .logo__divider {
    height: 32px;
  }
}

@media (max-width: 580px) {
  #header .wrapper .header-menu .logo.logo--dual {
    gap: 12px;
  }
  #header .wrapper .header-menu .logo.logo--dual .logo__ibox {
    width: 156px;
  }
  #header .wrapper .header-menu .logo.logo--dual .logo__opticlean {
    width: 200px;
  }
  #header .wrapper .header-menu .logo.logo--dual .logo__divider {
    height: 35px;
  }
  #header.fixed .wrapper .header-menu .logo.logo--dual .logo__ibox {
    width: 118px;
  }
  #header.fixed .wrapper .header-menu .logo.logo--dual .logo__opticlean {
    width: 167px;
  }
  #header.fixed .wrapper .header-menu .logo.logo--dual .logo__divider {
    height: 29px;
  }
}

#header .wrapper .header-menu .logo.logo--opticlean-solo a {
  width: 284px;
}

#header.fixed .wrapper .header-menu .logo.logo--opticlean-solo a {
  width: 234px;
}

/*sub menu css*/
#header .wrapper .menu ul#menu-header-menu span.submenu-click-arrow {
  width: 50px;
  height: 47px;
  right: 20px;
  top: 0;
  background-size: 8px;
  background-position: center;
  pointer-events: all;
  filter: brightness(0) saturate(100%) invert(6%) sepia(3%) saturate(2775%) hue-rotate(169deg) brightness(95%) contrast(87%);
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li {
  border-radius: 0 !important;
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li:last-child {
  border: 0 !important;
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu {
  width: 100% !important;
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  position: static;
  transform-origin: unset;
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  opacity: 1 !important;
  visibility: visible !important;
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu::before {
  content: none;
}

#header .wrapper .menu ul#menu-header-menu li ul.sub-menu li a {
  padding: 15px 15px 15px 30px;
  font-size: 14px !important;
  border: 0;
}

#header .wrapper .menu ul#menu-header-menu li.menu-item-has-children::after {
  content: none;
}

#header .wrapper .menu ul#menu-header-menu li#menu-item-67717 ul.sub-menu li a {
  padding: 15px 10px 15px 50px;
}

#header .wrapper .menu ul#menu-header-menu li#menu-item-67717 ul.sub-menu li a::before {
  top: 6px;
}

#header .wrapper .menu ul#menu-header-menu li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  margin: 0 !important;
  padding: 0 !important;
}

#header .wrapper .menu ul#menu-header-menu li:last-child {
  border: 0;
}

#header .wrapper .menu ul#menu-header-menu li a {
  width: 100%;
  display: block;
  padding: 14px;
  text-transform: capitalize;
  font-size: 16px;
  color: #1B1D1F;
}

#header .wrapper .menu ul#menu-header-menu li.menu-item-has-children {
  padding-right: 0;
}

#header .wrapper .menu ul#menu-header-menu li:hover::after {
  content: none;
}

#header .wrapper .menu ul#menu-header-menu li.current-menu-item::after {
  content: none;
}

#header .nav-main.nav.section {
  display: block;
  transform: translateX(0) translateY(0);
  -moz-transform: translateX(0) translateY(0);
  -webkit-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  width: 100%;
  max-width: 100%;
  transition: all 0.5s ease 0s;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 99;
  overflow-x: hidden;
  overflow-y: auto;
  float: none;
  margin: 0;
  height: auto;
  padding: 224px 50px 40px 50px;
  justify-content: end;
  text-align: end;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
}

#header .nav-main ul#menu-header-menu {
  margin: 100px 0px 0px 0 !important;
  display: block !important;
  height: 81vh;
  overflow-x: hidden;
  overflow-y: auto;
}

#header a.btn-main {
  font-size: 12px;
  padding: 10px 20px;
}

html body::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: hwb(0deg 0% 100%/90%);
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: all ease 0.3s;
}

html.menu-open {
  overflow: hidden;
}

html.menu-open body::before {
  opacity: 1;
  pointer-events: all;
}

html.menu-open #header .nav-main.nav.section {
  opacity: 1;
  pointer-events: all;
}

::-webkit-scrollbar {
  width: 2px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

*::-webkit-scrollbar-thumb {
  background-color: #555;
}

/* Hides the MAIN PAGE scrollbar specifically, per follow-up feedback.
   Root cause: js/intro-hero.js's lockAtTop()/unlockAtTop() toggles
   `body`'s position between static and `fixed` at the exact Intro
   Hero top boundary (a deliberate, unrelated fix for a wheel/trackpad
   compositor-timing race -- untouched here). While `fixed`, body is
   removed from <html>'s normal flow, so <html> briefly has nothing
   left to scroll -- the classic (non-overlay) scrollbar Windows
   browsers use disappears and reappears as that toggles, and because
   that scrollbar occupies real layout width there (unlike macOS's
   overlay scrollbars, which don't), the page's usable width visibly
   shifted with it. Hiding the scrollbar removes something to flicker
   in the first place, without touching that lock mechanism at all --
   scrolling itself is completely unaffected, since `overflow` is
   never set to `hidden` here, only the scrollbar's own visual track/
   thumb; mouse wheel, trackpad, touch, and keyboard scrolling all
   keep working exactly as before. Scoped to html/body only (more
   specific than the universal `*`/`::-webkit-scrollbar` rules above,
   so it wins only for the page scroll) -- every OTHER scrollable
   element sitewide (dropdowns, modals, the catalogue popup) keeps the
   thin, styled scrollbar set above; this is not a global disable. */
html,
body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Legacy Edge / IE */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome, Edge, Safari, and other WebKit/Blink browsers */
}

/**/
#header {
  padding: 15px 50px !important;
}

#header .container {
  padding: 0 !important;
}

#header .wrapper .header-menu .header-btn {
  margin-left: auto;
  order: 2;
  margin-right: 15px;
}

#header ul#menu-main-menu li {
  margin-bottom: 41px;
  overflow-x: hidden;
  width: -moz-max-content;
  width: max-content;
  margin-left: auto;
}

#header ul#menu-main-menu li:last-child {
  margin-bottom: 0px;
}

#header ul#menu-main-menu li a {
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -1.2px;
  position: relative;
  text-transform: uppercase;
}

#header ul#menu-main-menu li a:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  transform-origin: right;
  bottom: 0px;
  right: 0px;
  top: 0;
  transform: scale(0, 1);
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.5s ease 0s;
  margin: auto 0;
}

#header ul#menu-main-menu li a:hover:after {
  transform: scale(1);
}

html #header .nav-main.nav.section ul.social-link-list {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 160px;
  display: none;
}

/*menu animation*/
html.menu-open #header ul#menu-main-menu li {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-name: fadeInLeft;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html.menu-open #header ul#menu-main-menu li:nth-child(1) {
  animation-delay: 0.1s;
}

html.menu-open #header ul#menu-main-menu li:nth-child(2) {
  animation-delay: 0.2s;
}

html.menu-open #header ul#menu-main-menu li:nth-child(3) {
  animation-delay: 0.3s;
}

html.menu-open #header ul#menu-main-menu li:nth-child(4) {
  animation-delay: 0.4s;
}

html.menu-open #header ul#menu-main-menu li:nth-child(5) {
  animation-delay: 0.5s;
}

html.menu-open #header ul#menu-main-menu li:nth-child(6) {
  animation-delay: 0.6s;
}

html.menu-open #header ul#menu-main-menu li:nth-child(7) {
  animation-delay: 0.7s;
}

html.menu-open #header ul#menu-main-menu li:nth-child(8) {
  animation-delay: 0.8s;
}

html.menu-open #header ul#menu-main-menu li:nth-child(9) {
  animation-delay: 0.9s;
}

/* -------------------------------------------------------------------------
 * 8. Hamburger drawer: Products submenu.
 *    Expandable/collapsible, reusing the exact same toggle mechanism the
 *    theme already ships (js/main.js inserts a .submenu-click-arrow right
 *    before every ul.sub-menu and toggles .open-sub-menu on it when
 *    clicked/tapped) -- no new JS needed. The arrow is stretched to cover
 *    the whole "Products" row so the entire row is tappable, not just a
 *    small icon. Sized/coloured to match this drawer's own white-on-dark,
 *    uppercase, large-type look (see #header ul#menu-main-menu li a
 *    above) rather than the smaller unrelated #menu-header-menu dropdown
 *    styling elsewhere in this file, which belongs to different, unused
 *    markup.
 * ---------------------------------------------------------------------- */

#header ul#menu-main-menu li.menu-item-has-children {
  position: relative;
}

#header ul#menu-main-menu li.menu-item-has-children > .submenu-click-arrow {
  /* Still the full-row tap/click target that toggles the submenu open
     and closed (js/main.js toggles .open-sub-menu on this element) --
     only its visible chevron glyph has been removed, per follow-up
     feedback. "PRODUCTS" alone now indicates the expandable item. */
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 2;
}

#header ul#menu-main-menu li ul.sub-menu {
  /* position: relative; z-index: 3 -- fixes a real bug (not a styling
     change): the toggle arrow above is position:absolute; inset:0,
     which stretches to cover this whole <li> once it grows to fit the
     expanded submenu -- with no stacking context of its own, this
     submenu sat BEHIND that arrow (z-index: 2), so every click on a
     product link was actually landing on the arrow instead, just
     re-toggling the menu instead of navigating anywhere. Raising this
     above the arrow lets its links receive clicks again once visible;
     while still collapsed (max-height: 0, overflow: hidden below) it
     contributes no visible/clickable area, so the arrow alone
     continues to handle opening it exactly as before. */
  position: relative;
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.25, 0.1, 0.32, 0.83), opacity 0.35s ease, margin-top 0.45s ease;
}

#header ul#menu-main-menu li .submenu-click-arrow.open-sub-menu + ul.sub-menu {
  max-height: 480px;
  opacity: 1;
  margin-top: 18px;
}

#header ul#menu-main-menu li ul.sub-menu li {
  margin: 0 0 16px;
  width: auto;
}

#header ul#menu-main-menu li ul.sub-menu li:last-child {
  margin-bottom: 0;
}

#header ul#menu-main-menu li ul.sub-menu li a {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.4px;
  /* color: navy, not white -- the active claymorphism skin
     (css/claymorphism-theme.css) recolors this drawer's background to
     a light translucent overlay and its top-level links to navy
     (var(--primary)) for contrast, but this submenu-specific rule was
     never updated to match, leaving these links white-on-light and
     nearly invisible. Matches the top-level items' navy, at slightly
     reduced opacity for a touch of visual hierarchy under them. */
  color: rgba(27, 76, 130, 0.72);
}

#header ul#menu-main-menu li ul.sub-menu li a:hover {
  color: var(--secondary);
}

/* section css start */
/**
 * FLUID CONTENT CONTAINER -- replaces what had become a five-layer
 * stack of overlapping, sometimes contradictory rules: a tablet-only
 * tier, two different "desktop" tiers that together were actually
 * NON-MONOTONIC (1101-1439px got a narrow 1080px cap, 1440-1599px
 * jumped UP to a wider 1320px cap, then >=1600px dropped back DOWN to
 * 1080px -- i.e. the page visibly got wider then narrower then wider
 * again as the window was resized), plus a (min-resolution: 2dppx)
 * "Mac" override on top of that. (min-resolution: 2dppx) detects
 * display pixel density, not operating system, so it was never a
 * reliable Mac/Windows signal to begin with.
 *
 * FIX: one formula, no breakpoints, true at every width from phone to
 * ultra-wide monitor:
 *   - --ibox-gutter grows smoothly with the viewport (clamp floor
 *     20px, ceiling 80px, reached around a 2000px-wide viewport) --
 *     this is the "breathing space" the brief asks to scale with the
 *     screen. It is intentionally close to this file's previous base
 *     mobile padding (15px) at small widths.
 *   - The content column is the viewport minus that gutter on both
 *     sides, capped at 1600px so genuinely ultra-wide monitors (2560px
 *     and up) get a sensible, still-generous reading width instead of
 *     stretching indefinitely -- the "reasonable upper limit... for
 *     extreme ultra-wide screens" this project has always wanted,
 *     implemented as one continuous cap rather than a device guess.
 * At a 1440px viewport this resolves to a ~1325px content column --
 * i.e. almost exactly the older "restored Mac" 1320px value -- and it
 * keeps growing smoothly past that rather than snapping back down.
 *
 * Section-specific inner containers with their own separate max-width
 * token (css/materials-section.css's --container,
 * css/capabilities-section.css's own max-width) have been converted to
 * the same formula -- see each file's own comment.
 */
:root {
  --ibox-gutter: clamp(20px, 4vw, 80px);
  --ibox-content-max: 1600px;
}

.container {
  width: min(100% - (var(--ibox-gutter) * 2), var(--ibox-content-max));
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

:root {
  --primary: #183358;
  --secondary: #F6921E;
  --dark: #000000;
  --text: #212121;
  --white: #ffffff;
}

body.logged-in header {
  margin-top: 32px;
}

.title {
  margin-bottom: 26px;
  text-align: center;
}

.slick-prev {
  left: 20px;
  z-index: 10;
}

.slick-next {
  right: 20px;
  z-index: 10;
}

.slick-next:before {
  content: "";
  display: block;
  height: 30px;
  width: 30px;
  background-image: url(../images/slider-right-arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.slick-prev:before {
  content: "";
  display: block;
  height: 30px;
  width: 30px;
  background-image: url(../images/slider-left-arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.slick-prev,
.slick-next {
  height: 30px;
  width: 30px;
}

span.scroll_section_cut {
  display: block;
  margin-top: 0;
  height: 0;
}

.main-banner-section {
  padding: 70px 0px;
  position: relative;
  text-align: center;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.main-banner-section.home {
  display: inherit;
  padding: 0px;
}

.main-banner-section.home .main-banner-slider {
  margin-bottom: 0px !important;
}

.main-banner-section.home .wrap {
  position: relative;
  height: 100vh;
}

/* Before slick.js runs, hide every hero slide except the first so the three
   stacked .wrap divs (each 100vh) can't render one after another and create
   a large blank gap above the "Unlock Your iBOX Eyecare Style" section. Once
   slick adds .slick-initialized to the slider, it takes over slide display
   itself and this rule steps aside. */
.main-banner-slider .wrap ~ .wrap {
  display: none;
}

.main-banner-slider.slick-initialized .wrap {
  display: block;
}

.main-banner-section.home .main-banner-slider .banner-content-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 99;
}

.main-banner-section.home .main-banner-slider .banner-image {
  height: 100%;
  width: 100%;
  position: unset;
}

.main-banner-section .main-banner-slider .slick-track {
  height: 100vh;
}

.main-banner-section.home .main-banner-slider ul.slick-dots {
  bottom: 15px;
  z-index: 20;
}

.main-banner-section.home .main-banner-slider .slick-dots li button:before {
  color: #fff;
  font-size: 15px;
}

.main-banner-section.home .main-banner-slider .slick-dots li.slick-active button:before {
  opacity: 1;
  color: #fff;
}

.main-banner-section .banner-content-wrap h6 {
  text-align: center;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4.8px;
  text-transform: uppercase;
}

.main-banner-section .banner-content-wrap h1 {
  color: var(--white);
  /* font-size / font-weight / line-height / letter-spacing -- per
     follow-up feedback ("these three Hero headings are currently too
     bold/heavy... match the Homepage Hero heading style"), matched
     exactly to .ibox-hero__heading's own values (css/hero.css) --
     that section's clamp() already scales fluidly across every
     viewport with no further breakpoints needed, which is why the
     three page-specific overrides that used to exist for this
     purpose (Eyewear Cases had none; Accessories' and OPTiCLEAN
     Microfiber Cloths' own narrower, heavier clamp()s below) have
     been removed -- this one rule now does the same job, identically,
     for all three pages that use this shared class (Eyewear Cases,
     Accessories, OPTiCLEAN Microfiber Cloths -- no other page/
     template uses .banner-content-wrap). font-family is unchanged
     (already "Plus Jakarta Sans" here, inherited from the global h1
     rule, same as .ibox-hero__heading's own explicit value). Only
     these four typography properties changed -- heading text,
     position, alignment, color, wrapping behaviour, animation,
     overlay, Hero height, and everything else on these three pages'
     heroes are untouched. */
  font-size: clamp(1.2rem, 6.6vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
}

.main-banner-section .banner-image {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  height: 100%;
  width: 100%;
}

/* <picture> is only a wrapper for the source selection -- it must fill
   the frame exactly so the <img> inside keeps the identical box, and
   therefore the identical object-fit: cover crop, it had before
   (same technique already used for the Intro Hero's own <picture>,
   .ibox-intro-hero__picture in css/intro-hero.css). Added alongside
   the Desktop/Mobile hero image split, per follow-up feedback --
   height/crop/overlay/positioning are otherwise completely
   unchanged. */
.main-banner-section .banner-image picture {
  display: block;
  height: 100%;
  width: 100%;
}

.main-banner-section .banner-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.main-banner-section .bookmark-link {
  position: absolute;
  padding: 0 20px;
  animation: bounce 2500ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
  cursor: pointer;
  bottom: 70px;
  display: table;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@keyframes bounce {
  50% {
    transform: translateY(-15px);
  }
}
.sector-section {
  padding: 80px 0px;
  background-color: #F4F5F7;
}

.sector-section .content-wrap {
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 75px;
}

.sector-section .content-wrap p {
  text-align: center;
}

.sector-section ul.sector-box-list {
  margin-bottom: 90px;
}

ul.sector-box-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

ul.sector-box-list li.sector-box {
  position: relative;
  transition: transform 0.5s linear 0s;
}

ul.sector-box-list li.sector-box .sector-image {
  height: 328px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

ul.sector-box-list li.sector-box .sector-image:before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  opacity: 0.3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  right: 0px;
  bottom: 0px;
  top: 0px;
  z-index: 1;
}

ul.sector-box-list li.sector-box .sector-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

ul.sector-box-list li.sector-box:hover .sector-image img {
  transform: scale(1.08);
}

ul.sector-box-list li.sector-box .sector-image h6 {
  position: absolute;
  bottom: 25px;
  color: var(--white);
  left: 0;
  right: 0;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  margin: 0 auto;
  z-index: 5;
}

ul.sector-icon-box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 980px;
  margin: 0 auto;
  gap: 20px;
}

ul.sector-icon-box-list li.sector-icon-box {
  text-align: center;
}

ul.sector-icon-box-list li.sector-icon-box .icon {
  width: 63px;
  margin: 0 auto;
  height: 49px;
  margin-bottom: 24px;
}

ul.sector-icon-box-list li.sector-icon-box h6 {
  color: #202528;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

.approach-section {
  padding: 80px 0px;
  background-color: #E0E3E8;
}

.approach-section .content-wrap {
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 75px;
}

.approach-section .content-wrap p {
  text-align: center;
}

ul.approach-box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

ul.approach-box-list li.approach-box {
  position: relative;
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.08));
  transition: transform 0.5s linear 0s;
  overflow: hidden;
}

ul.approach-box-list li.approach-box .approach-image {
  height: 328px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--clay-radius-md);
  position: relative;
  z-index: 1;
}

ul.approach-box-list li.approach-box .approach-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

ul.approach-box-list li.approach-box:hover .approach-image img {
  transform: scale(1.08);
}

ul.approach-box-list li.approach-box .approach-box-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 22px;
  transition: transform 0.5s linear 0s;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 5;
}

ul.approach-box-list li.approach-box .approach-box-content:before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  z-index: -1;
  bottom: 0px;
  background-color: white;
  transition: transform 0.5s linear 0s;
}

ul.approach-box-list li.approach-box:hover .approach-box-content:before {
  transition: transform 0.5s linear 0s;
  transform: scale3d(1, 2, 1);
}

ul.approach-box-list li.approach-box .approach-box-content h4 {
  color: #AAA;
  letter-spacing: 0.26px;
  border-right: 1px solid #ddd;
  padding-right: 15px;
  margin-right: 15px;
}

ul.approach-box-list li.approach-box .approach-box-content h6 {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.18px;
}

ul.approach-box-list li.approach-box:hover .approach-box-content {
  transform: translate3d(0, -50%, 0) scale(1);
}

/*
 * Custom Branding section (homepage) reuses all ".approach-section" /
 * ".approach-box-list" / ".approach-box" styling as-is (colors, spacing,
 * card design, hover effects, responsive carousel behaviour). The only
 * difference is the desktop column count: 5 items instead of 4.
 */
ul.approach-box-list.branding-box-list {
  grid-template-columns: repeat(5, 1fr);
}

/*
 * The 5-column layout gives each Custom Branding card less width than the
 * original 4-column Process cards. The theme already scales this exact
 * heading down at narrower breakpoints (see the responsive rules below).
 *
 * Root cause of the alignment inconsistency: with white-space: nowrap,
 * shorter titles ("PAD PRINTING", "EMBOSSING") fit on one line, but longer
 * ones ("FOIL PRINTING", "LASER ENGRAVING", "DIGITAL PRINTING") overflowed
 * that single line and were clipped by the card's overflow: hidden, and
 * the content box's height varied per title. Allowing the title to wrap
 * naturally, centering it, and reserving a fixed two-line-tall content
 * area (scaled in em so it still matches at every breakpoint) keeps every
 * card's white content area identical in height and its title identically
 * aligned, regardless of word length.
 */
ul.approach-box-list.branding-box-list li.approach-box .approach-box-content {
  justify-content: center;
}

ul.approach-box-list.branding-box-list li.approach-box .approach-box-content h6 {
  font-size: 15px;
  white-space: normal;
  text-align: center;
  width: 100%;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * Homepage: "Who We Are" section -- REDESIGNED FROM SCRATCH and moved
 * out of this file entirely. It's now its own template part
 * (template-parts/who-we-are-section.php), styled by its own
 * self-contained stylesheet (css/who-we-are-section.css, enqueued only
 * on the front page -- see functions.php). The old .who-we-are-teaser-*
 * rules that used to live here have been removed; nothing in this file
 * targets that section anymore.
 */

.catalogue-section {
  padding: 40px 0px;
  background: #738CAB;
}

.catalogue-section .row-wrapper {
  display: grid;
  grid-template-columns: 167px auto;
  gap: 58px;
  align-items: center;
}

.catalogue-section .row-wrapper .right-col {
  display: grid;
  grid-template-columns: 700px auto;
  align-items: center;
  justify-content: space-between;
}

.catalogue-section .row-wrapper .right-col h2 {
  color: var(--white);
  margin-bottom: 20px;
}

/**
 * CATALOGUE SECTION HEADING SIZE RESTORE -- per follow-up feedback
 * ("restore the Catalogue section text/content sizing to its previous
 * approved size... section heading"). This heading never had its own
 * font-size -- it was always inheriting the plain global h2 tag
 * (further up this file), which an earlier desktop-typography pass
 * reduced (44px/40px range down to a unified 32px) for headings
 * site-wide. That reduction was appropriate for ordinary section
 * headings elsewhere, but this specific heading was never meant to
 * shrink along with it. Restored here as its own dedicated font-size,
 * scoped to just this selector, matching this element's original
 * value (40px) before that reduction -- every other page's/section's
 * h2 sizing from that pass is completely untouched.
 *
 * This shared .catalogue-section component renders on the homepage
 * and five other pages (see template-parts/catalogue-section.php) --
 * applied here at the base/shared rule (not homepage-scoped) so it's
 * restored consistently everywhere it appears, per this follow-up's
 * explicit direction.
 *
 * Applied at this theme's own desktop breakpoint (min-width: 1101px)
 * only, matching the convention used throughout this project's other
 * desktop-specific sizing work -- mobile and tablet keep their
 * existing, already-approved sizing (also just inherited from the
 * global h2 at their own narrower breakpoints), unchanged either way.
 *
 * The description (.right-col p, directly below) already had its own
 * dedicated font-size: 18px that was never touched by anything -- no
 * restoration needed there. The button (.btn-main.catalog-btn) also
 * has its own dedicated styling, never touched -- unchanged.
 */
@media (min-width: 1101px) {
  .catalogue-section .row-wrapper .right-col h2 {
    font-size: 40px;
  }
}

.catalogue-section .row-wrapper .right-col p {
  /* font-size: clamp(15px, 0.2679vw + 13.71px, 18px) (was a flat
     18px here, but that value was permanently unreachable dead code
     -- the two desktop breakpoint tiers that used to sit further
     down this file, min-width: 1121px and max-width: 1120px, between
     them covered every possible viewport width and both flattened
     this to 15px, so this rule's own 18px never actually rendered
     anywhere -- exactly why the description looked "too small"
     regardless of screen size, including large Mac/iMac displays.
     Replaced with a fluid clamp() using this file's own established
     fluid-typography pattern: floor 15px (unchanged from what every
     viewport already showed) growing smoothly to 18px (this rule's
     own original intended value, now actually reachable) by roughly
     a 1600px-wide viewport, instead of two flat tiers that added up
     to one unreachable value and one constant unresponsive number.
     Both former tier rules are removed outright, not just edited,
     since a single clamp() here already covers the exact same range
     they did. The <=580px mobile tier further down this file (its
     own separate, deliberately smaller 14px !important value) is
     completely untouched -- this clamp's own floor (15px) never
     exceeds what that tier already enforces there. Windows keeps
     this exact previous flat 15px behavior unchanged -- see
     css/windows-legacy-sizing.css. */
  font-size: clamp(15px, 0.2679vw + 13.71px, 18px);
  color: var(--white);
}

.catalogue-section .row-wrapper .right-col .btn-main:hover {
  background-color: var(--white);
  color: var(--secondary);
}

.catalog-btn:hover {
  cursor: pointer;
}

.our-dna-section {
  padding: 80px 0px;
  background-color: #F4F5F7;
}

.our-dna-section .title {
  max-width: 840px;
  margin: 0 auto;
  margin-bottom: 26px;
}

.our-dna-section .content-wrap {
  max-width: 950px;
  margin: 0 auto;
}

.our-dna-section .content-wrap p {
  text-align: center;
}

.about-us-section {
  padding: 80px 0px;
  background-color: #EDE7DE;
}

.about-us-section .content-wrap {
  max-width: 880px;
  margin: 0 auto;
}

.about-us-section .content-wrap p {
  text-align: center;
}

.cases-section {
  padding: 80px 0px 100px 0px;
  background-color: #F3F6F7;
  position: relative;
}

.cases-section:before {
  content: "";
  display: block;
  width: 100%;
  height: 280px;
  background-color: #EDE7DE;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.cases-section .content-wrap {
  max-width: 875px;
  margin: 0 auto;
  margin-bottom: 113px;
}

.cases-section .content-wrap p {
  text-align: center;
}

.cases-section .title.title-two {
  margin-bottom: 31px;
}

ul.case-collection-list-gallery li.case-collection-data {
  margin: 0 15px;
}

ul.case-collection-list-gallery li.case-collection-data .case-collection-img {
  height: 328px;
  width: 100%;
  display: block;
}

ul.case-collection-list-gallery li.case-collection-data .case-collection-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.contact-us-section {
  /* padding: 60px 0px (was 85px 0px) -- per follow-up feedback ("the
     Windows desktop still looks enlarged... section spacing should
     not keep expanding"). This BASE rule (applying at >=1900px) was
     the largest step in a desktop-only ladder that climbed steadily
     from 60px at 1121-1279px up to 85px here -- unified to that same
     smallest existing desktop value instead of its own separate,
     larger number. See every other desktop tier's own declaration
     further down this file for the matching fix; the <=1120px
     (tablet) and <=580px (mobile) tiers are untouched. */
  padding: 60px 0px;
}

.contact-us-section .row-wrapper {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 360px;
  gap: 120px;
  justify-content: space-between;
}

.contact-us-section .row-wrapper h2 {
  margin-bottom: 11px;
  text-align: left;
  max-width: 750px;
}

.contact-us-section .row-wrapper .title-wrapper {
  margin-bottom: 43px;
}

.contact-form .gform_wrapper.gravity-theme .gfield_label {
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 8px;
  padding: 0;
  color: #212121;
  text-transform: capitalize;
}

.contact-form .gform_wrapper .gfield input,
.contact-form .gform_wrapper .gfield textarea,
.gform_wrapper .gfield select {
  border: none !important;
  background: #F4F5F7;
  padding: 0px 24px !important;
  color: #A4A4A6;
  border-radius: 0px;
  height: 52px;
  line-height: 52px;
}

.contact-form .gform_wrapper .gfield input::-moz-placeholder, .contact-form .gform_wrapper .gfield textarea::-moz-placeholder, .gform_wrapper .gfield select::-moz-placeholder {
  background: #F4F5F7;
  color: #A4A4A6;
}

.contact-form .gform_wrapper .gfield input::placeholder,
.contact-form .gform_wrapper .gfield textarea::placeholder,
.gform_wrapper .gfield select::placeholder {
  background: #F4F5F7;
  color: #A4A4A6;
}

html .contact-form .gform_wrapper .gfield input[type=checkbox] {
  height: 16px;
  width: 16px;
  padding: 0 !important;
  margin-right: 12px;
  background: #E3E5E5;
  border: none !important;
  cursor: pointer;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
}

html .contact-form .instruction.validation_message {
  display: none;
}

.contact-form .gform_wrapper.gravity-theme .gfield_checkbox label {
  color: #212121 !important;
  font-size: 16px !important;
  line-height: 26px;
}

.contact-form .gform_wrapper .gfield textarea {
  height: 160px !important;
}

.contact-form .gform_wrapper.gravity-theme .gform_fields {
  grid-gap: 25px 40px !important;
}

.contact-form .gform_wrapper .gform_footer .gform_button {
  background-color: var(--secondary);
  border-radius: 50px;
  padding: 16px 30px;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  display: block;
  letter-spacing: 0;
  width: unset;
  width: -moz-max-content;
  width: max-content;
  text-transform: uppercase;
  transition: all 0.5s;
}

.contact-form .gform_wrapper .gform_footer .gform_button:hover {
  background-color: var(--primary);
  color: var(--white);
  transition: all 0.5s;
}

.contact-us-section .contact-details h5 {
  letter-spacing: -0.4px;
  margin-bottom: 6px;
}

.contact-us-section .contact-details p {
  color: #6A7373;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
}

.contact-us-section .contact-details .contact-wrapper {
  margin-bottom: 40px;
}

.contact-us-section ul.contact-list {
  margin-top: 16px;
}

ul.contact-list {
  max-width: 300px;
}

ul.contact-list li {
  margin-bottom: 15px;
  display: grid;
  grid-template-columns: 18px auto;
  gap: 13px;
}

ul.contact-list li span {
  height: 18px;
  width: 18px;
  min-width: 18px;
}

ul.contact-list li a {
  font-size: 15px;
  font-weight: 700;
  line-height: 110%;
  text-decoration-line: underline;
}

.prosesses-section {
  padding: 90px 0px;
  background-color: #EDE7DE;
}

.prosesses-section .prosess-wrapper {
  display: flex;
  flex-direction: column;
}

.prosesses-section .prosess-wrapper .row-wrapper > div {
  display: flex;
  align-items: center;
  max-width: 1372px;
  margin-bottom: 100px;
  justify-content: space-between;
  width: 100%;
}

.prosesses-section .prosess-wrapper .row-wrapper:last-child > div {
  margin-bottom: 0;
}

.prosesses-section .prosess-wrapper .row-wrapper > div .left-col,
.prosesses-section .prosess-wrapper .row-wrapper > div .right-col {
  width: 46%;
}

.prosesses-section .prosess-wrapper .row-wrapper > div:nth-child(2n+2) .left-col {
  order: 2;
}

.prosesses-section .prosess-wrapper .row-wrapper > div:nth-child(2n+2) .right-col {
  order: 1;
}

.prosesses-section .prosess-wrapper > div:nth-child(odd) .inner-wrap {
  flex-direction: row-reverse;
}

.prosesses-section .processes-image {
  height: 400px;
  width: 100%;
}

.prosesses-section .processes-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.05));
}

.prosesses-section .processes-content h3.small-number-title {
  letter-spacing: -1.2px;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 3px;
}

.prosesses-section .processes-content h3.small-number-title:after {
  content: "";
  display: block;
  width: 45px;
  height: 2px;
  background-color: var(--secondary);
  position: absolute;
  left: 0;
  bottom: 0;
}

.prosesses-section .processes-content h2 {
  margin-bottom: 15px;
}

body.page-template-privacy-policy {
  padding-top: 0;
}

body.page-template-privacy-policy #header,
body.error404 #header {
  background-color: var(--white);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
}

.blue-logo {
  display: none;
}

body.page-template-privacy-policy .blue-logo,
body.error404 .blue-logo {
  display: block;
}

body.page-template-privacy-policy .white-logo,
body.error404 .white-logo {
  display: none;
}

body.page-template-privacy-policy #header.fixed::before,
body.error404 #header.fixed::before {
  background: var(--white);
}

html.menu-open body.page-template-privacy-policy .blue-logo,
html.menu-open body.error404 .blue-logo {
  filter: brightness(0) invert(1);
}

.privacy-policy-section .privacy-policy-content {
  max-width: 800px;
  margin: 0 auto;
}

.privacy-policy-section .privacy-policy-content h2 {
  margin-bottom: 20px;
  letter-spacing: -1.6px;
}

.privacy-policy-section .privacy-policy-content .content-wrapper {
  margin-bottom: 20px;
}

.privacy-policy-section .privacy-policy-content h5 {
  margin-bottom: 15px;
  font-weight: 600;
  text-transform: none;
}

.privacy-policy-section .privacy-policy-content p {
  letter-spacing: -0.8px;
}

.privacy-policy-section .privacy-policy-content ul {
  list-style: unset;
  padding-left: 25px;
}

.privacy-policy-section .privacy-policy-content ul li {
  list-style: unset;
  color: #212121;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.8px;
  margin-bottom: 10px;
}

.privacy-policy-section {
  padding-bottom: 60px;
}

.instagram-gallery-section {
  padding-top: 80px;
  display: none;
}

#sb_instagram #sbi_load {
  display: none;
}

.sbi_no_avatar .sbi_header_img {
  display: none;
}

.sb_instagram_header.sbi_medium .sbi_feedtheme_header_text {
  text-align: center;
  display: block;
  position: relative;
}

.sb_instagram_header.sbi_medium .sbi_feedtheme_header_text h3 {
  color: #000;
  text-align: center;
  font-weight: 600;
  display: inline-block;
  text-transform: unset;
  letter-spacing: 0.24px;
  background-color: var(--white);
  padding: 0 20px !important;
  transition: all 0.5s;
}

.sb_instagram_header.sbi_medium .sbi_feedtheme_header_text h3:hover {
  color: var(--secondary);
  transition: all 0.5s;
}

.sb_instagram_header.sbi_medium .sbi_feedtheme_header_text::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #D6D6D6;
  z-index: -1;
}

#sb_instagram {
  padding: 0 !important;
}

.mobile-image {
  display: none;
}

.page-not-found {
  text-align: center;
  padding: 70px 0px;
}

.page-not-found h1 {
  padding-bottom: 10px;
  font-size: 60px;
  font-weight: 500;
  color: #d3342c;
}

.page-not-found h2 {
  padding-bottom: 10px;
  font-size: 27px;
  color: #0061a5;
}

.page-not-found .btn-wrap {
  text-align: center;
  display: inline-block;
  margin-top: 40px;
}

.page-not-found .btn-wrap .btn {
  padding: 15px 30px;
  font-size: 15px;
}

body.error404 {
  margin-top: 103px;
}

.btn-main.sticky-contact-btn svg {
  margin-right: 10px;
}

.btn-main.sticky-contact-btn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 9;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}

.btn-main.sticky-contact-btn:hover {
  background-color: var(--white);
  color: var(--secondary);
}

.dowonload-catalog-form {
  position: fixed;
  /* top: var(--glass-nav-content-offset) (was 0) -- per follow-up
     feedback ("the top part of the modal was getting hidden behind
     the floating navigation, especially the close button... move the
     entire modal slightly downward so the top edge is fully
     visible... it must respond automatically to different screen
     heights").
     DIAGNOSIS: two things were true at once. First, the floating nav
     (css/site-glass-nav.css) is z-index: 10000, while this modal was
     z-index: 9999 -- LOWER than the nav -- so wherever the two
     happened to overlap, the nav rendered visually on top, hiding
     whatever part of the modal sat underneath it. Second, this
     modal's own vertical centring (top: 0; bottom: 0; margin: auto,
     i.e. centred within the FULL viewport height, 0 to 100%) had no
     awareness of the nav's existence at all, so on shorter viewports
     its top edge could easily land underneath the nav bar's own
     space at the very top of the screen.
     FIX, two parts:
       1. This top value now starts the modal's available centring
          space from JUST BELOW the nav, using
          --glass-nav-content-offset -- the same custom property this
          theme already defines and uses (css/site-glass-nav.css) to
          push ordinary page content below the bar. It already
          accounts for the nav's current top offset + height (full or
          compact, whichever applies) + a breathing gap, and is
          already redefined at this theme's own tablet/mobile
          breakpoints -- so this single line automatically adapts to
          every screen size the nav itself adapts to, with no new
          media queries needed here. bottom: 0; margin: auto (below)
          still centre the modal within that remaining space, so it
          reads as "slightly lower, still centred and balanced" rather
          than pinned awkwardly to one fixed offset.
       2. z-index raised to 10001 (below, was 9999) -- now genuinely
          above the nav's own 10000, so even in the unlikely case they
          still overlap at some viewport size, the modal itself always
          wins visually rather than being hidden behind the bar.
     Modal width, colours, typography, and field content are
     completely unaffected by either change. */
  top: var(--glass-nav-content-offset);
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 1000px;
  background-color: var(--white);
  padding: 50px 50px 60px 50px;
  /* z-index: 10001 (was 9999) -- see the top: comment above. */
  z-index: 10001;
  /* max-height: 600px (was calc(100vh - 64px)) -- REVERTED per this
     same follow-up ("the previous version was actually correct in
     size... restore the Catalogue modal to its previous compact size
     and proportions... the modal height should be based on its
     content, not the full viewport"). The viewport-height-based value
     from an earlier pass was solving a different, narrower problem (a
     wide-but-short monitor where a WIDTH-tied fixed max-height
     exceeded the actual available height) -- but per this follow-up,
     that approach made the box's effective footprint viewport-driven
     rather than content-driven, which is the opposite of what's
     wanted here. 600px is this rule's own original value, restored
     exactly; the width-tiered max-height ladder further down this
     file (595/580/580/530/530/525px at progressively narrower
     widths) is restored alongside it, below. overflow-y: auto stays,
     as a safety net for genuinely short viewports where even this
     compact height doesn't fully fit -- the form scrolls internally
     rather than ever exceeding the viewport, without that safety net
     itself dictating the box's everyday size. */
  max-height: 600px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.open-catalog-form .dowonload-catalog-form {
  opacity: 1;
  visibility: visible;
  transition: all 0.5s;
}

.dowonload-catalog-form h2 {
  color: #212121 !important;
  text-align: center;
  margin-bottom: 10px !important;
}

.dowonload-catalog-form p {
  color: #212121 !important;
  text-align: center;
  font-size: 20px !important;
  line-height: 30px;
  letter-spacing: -0.8px;
}

.catalog-form {
  margin-top: 35px;
}

.catalog-form .gform_wrapper .gform_footer {
  margin: 0 auto !important;
  margin-top: 40px !important;
}

.catalog-form .gform_wrapper .gform_footer .gform_button {
  margin-bottom: 0;
}

.catalog-form-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

html.show-form body {
  position: relative;
}

html.show-form body:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8392156863);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  z-index: 999;
}

.dowonload-catalog-form .close-button {
  position: absolute;
  height: 30px;
  width: 30px;
  right: 10px;
  top: 10px;
  border-radius: 50%;
  cursor: pointer;
  background: var(--secondary) url(../images/close.svg) no-repeat;
  background-position: center;
  background-size: 14px;
  font-size: 0;
  border: 0;
}

html .gfield_required {
  display: none !important;
}

/* Shared shape rule for the two circular floating action buttons
   (WhatsApp + the mobile-only Call button) -- border-radius, flex
   icon-centering, position, and shadow weight are identical for both
   by definition here, so they can never quietly drift apart between
   edits. Only background colour (brand green vs theme blue) and the
   two buttons' own offsets/sizing per breakpoint stay in their own
   selectors below. */
.whatsapp-sticky-button,
.mobile-call-sticky-button {
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}

.whatsapp-sticky-button {
  background-color: #00aa00;
  height: 50px;
  width: 50px;
  right: 30px;
  bottom: 95px;
  border: 2px solid #00ce00;
}

.whatsapp-sticky-button:hover {
  background-color: green;
}

/* Mobile-only floating Call button (footer.php), positioned directly
   above the WhatsApp button. Hidden by default/desktop; shown only in
   the @media (max-width: 1120px) tier below -- the exact same
   breakpoint the WhatsApp/Contact Us buttons already switch to their
   own compact mobile/tablet sizing at, so no new breakpoint is
   introduced.
   border: 2px solid var(--primary) (was no border at all) -- restored
   per follow-up feedback asking for real visual parity with WhatsApp,
   not just matching size. WhatsApp itself declares a border here too
   (2px solid #00ce00, above) which css/claymorphism-theme.css (loaded
   after this file) then recolours to a shared translucent white for
   its final flat look -- this mirrors that exact same two-layer
   structure so the Call button's border ends up styled the identical
   way, rather than having no border for that later rule to act on.
   Position and size (matching the WhatsApp button's own mobile-tier
   45x45px exactly) are set in that media query below. */
.mobile-call-sticky-button {
  display: none;
  right: 15px;
  background-color: var(--primary);
  border: 2px solid var(--primary);
}

.mobile-call-sticky-button:hover {
  background-color: var(--secondary);
}

.pdf-dowonload-button {
  display: inline-block;
  padding: 15px 20px 15px 50px;
  background-color: #ffd9d9;
  background-image: url(../../../uploads/2024/10/pdf-icon.svg);
  background-repeat: no-repeat;
  background-position: left 17px center;
  color: red;
  background-size: 12%;
  cursor: pointer;
}

.pdf-dowonload-button:hover {
  color: red;
}

:root {
  --primary:#183358;
  --secondary:#F6921E;
  --dark:#000000;
  --text:#212121;
  --white:#ffffff;
}

footer {
  padding-top: 100px;
  position: relative;
  background-color: var(--primary);
}

.footer-top {
  display: grid;
  /**
   * FOOTER THREE-COLUMN REBALANCE -- per follow-up feedback ("remove
   * the entire Sitemap area from the footer... suitably rearrange the
   * remaining three footer areas... distribute cleanly and evenly
   * across the available footer width... the finished footer should
   * look intentionally designed as a three-part footer").
   *
   * Was: auto 230px 160px minmax(320px, 1fr) -- four columns (logo,
   * Head Office, Sitemap, Newsletter). With Sitemap's column removed
   * from the markup entirely (footer.php), simply deleting its 160px
   * track would have left Head Office fixed at 230px while Newsletter
   * silently absorbed all the freed-up width via its own minmax(...,
   * 1fr) -- an unbalanced, accidental result, not an "intentionally
   * designed three-part footer".
   *
   * Now: auto 1fr 1fr -- the logo column stays sized to its own
   * content (it's naturally compact and shouldn't stretch), while
   * Head Office and Newsletter -- the two columns with real,
   * comparable amounts of content -- share the entire remaining
   * container width EQUALLY, so the footer reads as three genuinely
   * balanced areas rather than one wide column and one narrow one.
   * iBOX logo, Head Office information, the newsletter form, their
   * wording, existing footer typography, and colours are all
   * completely untouched -- only this column-width distribution.
   */
  grid-template-columns: auto 1fr 1fr;
  /* align-items: start -- explicit (was relying on the implicit
     default) so all 4 columns are guaranteed to start at the same
     vertical position regardless of how tall each one's content ends
     up being, per follow-up feedback. */
  align-items: start;
  /* justify-content: space-between removed -- with a 1fr column
     already present, it has no extra space left to distribute, so
     this was dead/misleading code; the uniform `gap` below is what
     actually controls the (already-equal) spacing between all 4
     columns. */
  gap: 56px;
  /* padding-bottom: 65px (was 80px) -- slightly tightened per
     follow-up feedback, for a more proportional gap before the
     divider relative to the rest of this section's spacing scale. */
  padding-bottom: 65px;
}

/* margin-right: 84px -- adds on top of .footer-top's base 56px grid
   gap, making the logo-to-Head-Office gap 140px total (a 150% increase
   over the base 56px), per follow-up feedback. Only this one gap
   changes -- Head-Office-to-Newsletter (now the only other gap, since
   the Sitemap column and its own two adjacent gaps no longer exist)
   stays at the base 56px, since grid `gap` is otherwise uniform across
   all columns and this is the only way to single one gap out. */
.footer-col-one {
  margin-right: 84px;
}

.footer-logo {
  margin-bottom: 53px;
}

/* Stacked dual-brand footer logo lockup: iBOX logo, a subtle
   horizontal orange divider line, then the white OPTiCLEAN logo
   underneath, sized to visually match the iBOX logo above it. Was
   previously a horizontal (row) pairing built for a since-removed
   side-by-side layout -- repurposed to a vertical stack per
   follow-up feedback ("OPTiCLEAN branding under iBOX" in every page
   footer, not a replacement for it). Left-aligned (not centered) to
   match the iBOX logo's existing alignment in this footer column,
   which is left untouched. */
.footer-logo--dual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /* gap: 24px (was 16px) -- increased per follow-up feedback ("increase
     the gap between iBOX logo and orange divider, then make the gap
     between divider and OPTiCLEAN logo exactly the same"). A single
     flex `gap` value already applies equally to every pair of adjacent
     stacked children, so raising this one value increases BOTH gaps
     identically -- the divider sits exactly centred between the two
     logos with equal breathing space above and below by construction. */
  gap: 24px;
}

.footer-logo-link {
  display: block;
}

.footer-logo-link--ibox {
  /* Desktop only, >=1500px -- reduced 65% from the original 304px per
     an earlier follow-up, then increased ~32% from that 106px per a
     later follow-up (106px -> 140px). Deliberately NOT applied to the
     1121-1279px/1280-1499px breakpoints below: those widths are also
     reachable by tablets/iPads in landscape (e.g. iPad Pro 11" landscape
     is ~1194px, iPad Pro 12.9" landscape is ~1366px), so touching them
     would resize the logo on tablets too, which isn't wanted -- they
     stay at their own established 160px, untouched by this change.
     Only >=1500px is a width no tablet/iPad reaches, so it's the one
     safe "desktop only" rule -- matching this project's own existing
     precedent rather than the generic min-width: 1025px suggested in
     the follow-up request, which this same reasoning already ruled out
     as tablet-reachable. max-width: 1120px/991px/580px (tablet/mobile)
     are untouched. */
  width: 140px;
}

/* width: 246px (was 140px, i.e. equal to the iBOX logo) -- per
   follow-up feedback: matching the two logos' overall bounding-box
   widths made the OPTiCLEAN wordmark look visually smaller than iBOX,
   because the OPTiCLEAN artwork file (opticlean-logo-white.png) has
   noticeably more built-in empty margin and a smaller tagline row
   baked into the same canvas than the iBOX SVG does. Measured directly
   against both source files: the cap-height of the round "O" glyph is
   ~55.6% of the full iBOX logo's own height, but only ~47.2% of the
   full OPTiCLEAN logo's own height. Scaling OPTiCLEAN to ~1.76x the
   iBOX width (140 * 1.76 ≈ 246) makes those two "O" letters render at
   the same visual cap-height at this breakpoint, per "the height of
   the O in iBOX should visually match the height of the O in
   OPTiCLEAN" -- rather than matching the two logos' outer bounding
   boxes, which is what the previous 1:1 width made equal instead. */
.footer-logo-link--opticlean {
  width: 246px;
}

.footer-logo-link img {
  margin: 0;
  width: 100%;
}

/* Subtle horizontal divider line between the two stacked logos, left-
   aligned with (and starting at the same left edge as) both logos
   above/below it. width: 70px (was 140px, i.e. previously the full
   iBOX logo width) -- shortened from the RIGHT side only by ~50% per
   follow-up feedback ("shorten the orange divider from the right side
   only by approximately 50%... keep the left starting point where it
   currently is"). Because this is a left-aligned block element inside
   a flex column with align-items: flex-start (not centred or
   stretched), simply reducing its own width keeps its left edge
   exactly where it already was and only pulls in the right end --
   no position/margin change was needed to achieve that. Thickness
   (height: 2px) and colour are both untouched. */
.footer-logo-divider {
  display: block;
  width: 70px;
  height: 2px;
  background-color: #F6921E;
}


/* .footer-col-two / .footer-col-three margin-left: -30px hack removed
   -- it was compensating for the old, oversized 820px logo column
   above; with that fixed, natural grid spacing is correct without it. */

/* .footer-col-two's extra margin-right (was 28px, on top of the base
   56px grid gap) REMOVED per follow-up feedback ("remove the Sitemap
   area from the footer... distribute the remaining three areas
   cleanly and evenly"). That extra margin existed specifically to
   widen the Head-Office-to-Sitemap and Sitemap-to-Newsletter gaps
   around the now-deleted Sitemap column -- with Sitemap gone
   entirely, carrying that spacing forward would have made the
   Head-Office-to-Newsletter gap uneven/inconsistent with the rest of
   this now-three-column layout for no real reason. Head Office now
   uses the same clean, uniform 56px base grid gap as every other
   column boundary except the deliberately-wider logo-to-Head-Office
   one (.footer-col-one, 140px total, unchanged, kept for its own
   separate reason). */

.footer-top p {
  color: #A3ADBC;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}

.footer-top h6 {
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  margin-bottom: 24px;
}

/* margin-bottom: 16px (was 20px) -- brought in line with .footer-links
   below so both lists share the same vertical rhythm, per follow-up
   feedback (they were 20px vs 10px, a clear inconsistency). */
ul.contect-list li {
  color: #A3ADBC;
  margin-bottom: 16px;
  font-weight: 500;
}

ul.contect-list li:last-child {
  margin-bottom: 0px;
}

ul.contect-list li a {
  color: #A3ADBC;
  font-weight: 500;
}

ul.contect-list li a:hover {
  color: var(--secondary);
}

/* margin-bottom: 16px (was 10px) -- matches ul.contect-list above, so
   Head Office and Sitemap share one consistent line-to-line rhythm
   instead of two different values, per follow-up feedback. */
.footer-links li {
  margin-bottom: 16px;
}

.footer-links li:last-child {
  margin-bottom: 0px;
}

.footer-links li a {
  color: #A3ADBC;
  font-weight: 500;
}

.footer-links li a:hover {
  color: var(--secondary);
}

/* gap: 21px (was margin-right: 21px on each li, with a :last-child
   override to remove the trailing one) -- functionally the same
   visual spacing, but `gap` guarantees genuinely equal space between
   every icon by construction, rather than relying on a margin +
   override pair, per follow-up feedback. */
ul.social-link-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 21px;
}

ul.social-link-list li a {
  height: 27px;
  width: 27px;
  display: flex;
  min-width: 27px;
  align-items: center;
  color: var(--white);
  justify-content: center;
}

ul.social-link-list li a:hover {
  color: var(--secondary);
}

/* margin-top: 32px (was 60px) -- the 60px gap here was noticeably
   larger than every other spacing value in this footer (16-24px),
   breaking the visual rhythm; tightened to feel proportional while
   still clearly separating the icons from the form above, per
   follow-up feedback. */
.footer-top ul.social-link-list {
  margin-top: 32px;
}

/* padding: 32px 0 (was 26px) -- slightly more generous, better
   balanced against the 72px gap above the divider line, per
   follow-up feedback. */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1215686275);
  padding: 32px 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  justify-content: space-between;
}

.footer-bottom p {
  color: #A3ADBC;
  font-size: 15px;
}

.footer-bottom p a {
  text-decoration: underline !important;
  margin: 0px 0px 0px 15px;
  color: #A3ADBC;
  font-size: 15px;
}

.footer-bottom p a:hover {
  color: var(--secondary);
}

.footer-bottom .poweredbywrap {
  display: flex;
  align-items: center;
}

.footer-bottom .poweredbywrap p {
  margin-right: 5px;
}

.email-subscription-form .es-form-field-container {
  position: relative;
}

.email-subscription-form .subscribe .gjs-row {
  margin: 0;
}

.email-subscription-form input {
  height: 50px;
  border-radius: 50px;
  font-size: 15px;
  color: var(--white);
  padding: 0 0px 0px 25px;
  background-color: transparent;
  border: 1px solid #465C79;
}

.email-subscription-form input::-moz-placeholder {
  color: var(--white);
}

.email-subscription-form input::placeholder {
  color: var(--white);
}

.email-subscription-form input[type=email] {
  padding-right: 60px;
}

html .email-subscription-form .es-form-field-container input[type=submit] {
  position: absolute;
  width: 44px;
  min-width: 44px;
  bottom: 0px;
  height: 44px;
  left: auto;
  right: 5px;
  top: 0px;
  background: var(--secondary) !important;
  color: var(--white);
  font-size: 0px;
  border: 0px;
  border-radius: 50px;
  cursor: pointer;
  margin: auto 0;
  padding: 10px;
  background-image: url(../images/right-arrow.svg) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition: all 0.5s;
}

.email-subscription-form form[data-form-id="1"] .es-form-field-container .gjs-row {
  margin-bottom: 0;
}

/* margin-top: 24px (was 13px) -- matches the 24px heading-to-content
   rhythm used everywhere else in the footer (.footer-top h6's
   margin-bottom), instead of a smaller, inconsistent value here, per
   follow-up feedback. */
.email-subscription-form {
  margin-top: 24px;
}

@media (min-width: 1920px) {
  html {
    max-width: 1920px;
    margin: 0 auto;
  }
}
/**
 * FLUID DESKTOP SECTION SIZING -- replaces four separate fixed-pixel
 * desktop tiers (1121-1279px, 1280-1499px, 1500-1699px, 1700-1899px,
 * each a full block of its own for the same ~60 selectors: section
 * top/bottom padding, card/image heights, content-column max-widths,
 * various desktop-only font-sizes, catalogue-modal sizing, etc.) with
 * ONE consolidated block, scoped to the same >=1121px desktop boundary
 * used throughout this stylesheet.
 *
 * For every property that genuinely differed only in magnitude across
 * the old tiers, the smallest tier's value is now the clamp() floor
 * and the largest tier's value is the ceiling, growing smoothly to
 * that ceiling by a 1920px viewport rather than jumping at each of
 * the four old boundaries. Where every old tier already agreed on the
 * same value (the majority of properties here), that single value is
 * kept as a plain, non-fluid declaration -- no clamp() needed. A
 * couple of properties (nav grid-template-columns, the sticky
 * Contact-Us/footer button's display toggle) are genuine discrete
 * layout switches, not sizing, and are kept as flat desktop-range
 * values, consistent with "keep normal breakpoints required for
 * actual layout changes" elsewhere in this pass.
 *
 * No (min-resolution: 2dppx) or any other device/resolution targeting
 * was ever part of this specific ladder. Mobile and tablet (<=1120px)
 * are completely untouched -- every base/unconditional rule for these
 * same selectors elsewhere in this file (used below 1121px) is
 * unedited.
 */
@media (min-width: 1121px) {
  .approach-section .content-wrap {
    margin-bottom: clamp(50px, 1.2516vw + 35.97px, 60px);
    max-width: clamp(550px, 6.2578vw + 479.85px, 600px);
  }
  .sector-section .content-wrap {
    margin-bottom: clamp(50px, 1.2516vw + 35.97px, 60px);
    max-width: clamp(550px, 6.2578vw + 479.85px, 600px);
  }
  .catalogue-section .row-wrapper .right-col {
    grid-template-columns: 600px auto;
  }
  .catalogue-section .row-wrapper .right-col h2 {
    margin-bottom: 20px;
  }
  .title {
    margin-bottom: 20px;
  }
  footer .footer-contact-btn.btn-main {
    display: none;
    right: 0;
  }
  .footer-bottom .footer-contact-btn.btn-main {
    display: block;
  }
  .our-dna-section {
    padding: clamp(70px, 0.6258vw + 62.985px, 75px) 0px;
  }
  .about-us-section {
    padding: clamp(70px, 0.6258vw + 62.985px, 75px) 0px;
  }
  .sector-section {
    padding: clamp(70px, 0.6258vw + 62.985px, 75px) 0px;
  }
  .approach-section {
    padding: clamp(70px, 0.6258vw + 62.985px, 75px) 0px;
  }
  .footer-bottom p {
    text-align: left;
  }
  footer {
    padding-top: clamp(80px, 1.2516vw + 65.97px, 90px);
  }
  .footer-top {
    gap: 36px;
    grid-template-columns: auto 1fr 1fr;
    padding-bottom: 65px;
  }
  .footer-logo-link--ibox {
    width: 160px;
  }
  .footer-logo-link--opticlean {
    /* 160 * ~1.76 -- see the base rule's comment for the full "O"
       cap-height measurement/reasoning. */
    width: 282px;
  }
  .footer-logo-divider {
    /* 50% of this breakpoint's iBOX width -- shortened from the right
       only, left edge unchanged. */
    width: 80px;
  }
  ul.approach-box-list li.approach-box .approach-box-content h6 {
    font-size: clamp(15px, 0.1252vw + 13.597px, 16px);
  }
  ul.approach-box-list.branding-box-list li.approach-box .approach-box-content h6 {
    font-size: clamp(13px, 0.1252vw + 11.597px, 14px);
    white-space: normal;
  }
  ul.sector-box-list li.sector-box .sector-image {
    height: 270px;
  }
  ul.sector-icon-box-list li.sector-icon-box .icon {
    height: 40px;
    width: 55px;
  }
  ul.approach-box-list li.approach-box .approach-image {
    height: clamp(240px, 3.7547vw + 197.91px, 270px);
  }
  .catalogue-section .row-wrapper {
    gap: 45px;
  }
  #header .wrapper .header-menu {
    grid-template-columns: 1fr auto 1fr;
  }
  .instagram-gallery-section {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: clamp(45px, 1.8773vw + 23.955px, 60px);
  }
  .cases-section {
    padding: clamp(60px, 1.8773vw + 38.955px, 75px) 0px;
  }
  .cases-section .content-wrap {
    margin-bottom: clamp(60px, 3.7547vw + 17.91px, 90px);
    max-width: 780px;
  }
  ul.case-collection-list-gallery li.case-collection-data .case-collection-img {
    height: clamp(230px, 5.0063vw + 173.88px, 270px);
  }
  .cases-section:before {
    height: 180px;
  }
  ul.case-collection-list-gallery li.case-collection-data {
    margin: 0 10px;
  }
  .contact-us-section {
    padding: 60px 0px;
  }
  .contact-form .gform_wrapper .gfield textarea {
    height: clamp(130px, 1.2516vw + 115.97px, 140px) !important;
  }
  .contact-form .gform_wrapper.gravity-theme .gfield_label {
    font-size: clamp(15px, 0.1252vw + 13.597px, 16px);
  }
  .contact-form .gform_wrapper .gfield input,
  .contact-form .gform_wrapper .gfield textarea,
  .gform_wrapper .gfield select {
    font-size: 14px !important;
    height: 45px;
    line-height: 45px;
  }
  .contact-form .gform_wrapper.gravity-theme .gform_fields {
    grid-gap: 20px 25px !important;
  }
  .contact-us-section .row-wrapper {
    gap: 100px;
  }
  .contact-form .gform_wrapper .gform_footer .gform_button {
    padding: 14px 25px;
  }
  .prosesses-section {
    padding: clamp(55px, 3.1289vw + 19.925px, 80px) 0px;
  }
  .prosesses-section .processes-image {
    height: clamp(300px, 6.2578vw + 229.85px, 350px);
  }
  .prosesses-section .processes-content h3.small-number-title {
    font-size: 25px;
  }
  .privacy-policy-section .privacy-policy-content ul li {
    font-size: clamp(16px, 0.2503vw + 13.194px, 18px);
  }
  .privacy-policy-section .privacy-policy-content h2 {
    font-size: 30px;
  }
  body.page-template-privacy-policy {
    padding-top: 0;
  }
  .page-not-found {
    padding: clamp(55px, 0.6258vw + 47.985px, 60px) 0px;
  }
  .page-not-found h1 {
    font-size: 50px;
  }
  .page-not-found h2 {
    font-size: 25px;
  }
  .page-not-found .btn-wrap {
    margin-top: 30px;
  }
  .btn-main.sticky-contact-btn {
    bottom: 60px;
    right: 15px;
  }
  .dowonload-catalog-form {
    max-height: clamp(530px, 8.1352vw + 438.805px, 595px);
    max-width: 900px;
    padding: 50px;
  }
  .prosesses-section .prosess-wrapper .row-wrapper > div {
    margin-bottom: clamp(60px, 1.2516vw + 45.97px, 70px);
  }
  .whatsapp-sticky-button {
    bottom: 125px;
  }
  #header .wrapper .header-menu .logo a {
    width: 150px;
  }
  #header.fixed .wrapper .header-menu .logo a {
    width: 130px;
  }
  .sector-section ul.sector-box-list {
    margin-bottom: 70px;
  }
  span.scroll_section_cut {
    height: 0;
    margin-top: 0;
  }
  .our-dna-section .content-wrap {
    max-width: clamp(700px, -6.2578vw + 820.15px, 750px);
  }
  .about-us-section .content-wrap {
    max-width: clamp(700px, -6.2578vw + 820.15px, 750px);
  }
  .privacy-policy-section .privacy-policy-content {
    max-width: clamp(600px, 12.5156vw + 459.7px, 700px);
  }
  .privacy-policy-section .privacy-policy-content h5 {
    margin-bottom: 10px;
  }
  .privacy-policy-section .privacy-policy-content p {
    font-size: clamp(16px, 0.2442vw + 13.311px, 18px) !important;
  }
  .privacy-policy-section {
    padding-bottom: 55px;
  }
  body.error404 {
    margin-top: 94px;
  }
  .prosesses-section .prosess-wrapper .row-wrapper .left-col,
  .prosesses-section .prosess-wrapper .row-wrapper .right-col {
    width: 47%;
  }
}

@media (max-width: 1120px) {
  body p {
    font-size: 14px;
  }
  #header .wrapper .header-menu .logo a {
    width: 140px;
  }
  #header.fixed .wrapper .header-menu .logo a {
    width: 120px;
  }
  .approach-section .content-wrap {
    max-width: 550px;
    margin-bottom: 40px;
  }
  .sector-section .content-wrap {
    max-width: 550px;
    margin-bottom: 40px;
  }
  .catalogue-section .row-wrapper .right-col {
    grid-template-columns: 600px auto;
  }
  .catalogue-section .row-wrapper .right-col h2 {
    margin-bottom: 10px;
  }
  h1 {
    font-size: 60px;
  }
  .main-banner-section .banner-content-wrap h6 {
    font-size: 14px;
  }
  h2 {
    font-size: 30px;
  }
  .title {
    margin-bottom: 10px;
  }
  footer .footer-contact-btn.btn-main {
    display: none;
    right: 0;
  }
  .footer-bottom .footer-contact-btn.btn-main {
    display: block;
  }
  .our-dna-section {
    padding: 55px 0px;
  }
  .about-us-section {
    padding: 55px 0px;
  }
  .sector-section {
    padding: 55px 0px;
  }
  .approach-section {
    padding: 55px 0px;
  }
  .footer-bottom p {
    text-align: left;
  }
  footer {
    padding-top: 70px;
  }
  .footer-top {
    padding-bottom: 55px;
    grid-template-columns: 41% 52%;
    gap: 40px;
  }
  ul.approach-box-list li.approach-box .approach-box-content h6 {
    font-size: 14px;
  }
  ul.approach-box-list.branding-box-list li.approach-box .approach-box-content h6 {
    font-size: 12px;
    white-space: normal;
  }
  h4 {
    font-size: 19px;
  }
  ul.sector-box-list li.sector-box .sector-image {
    height: 240px;
  }
  ul.sector-icon-box-list li.sector-icon-box .icon {
    width: 55px;
    height: 40px;
  }
  ul.approach-box-list li.approach-box .approach-image {
    height: 250px;
  }
  .catalogue-section .row-wrapper {
    gap: 45px;
  }
  .sector-section ul.sector-box-list {
    margin-bottom: 50px;
  }
  ul.approach-box-list li.approach-box .approach-box-content {
    padding: 15px 15px;
  }
  ul.approach-box-list li.approach-box .approach-box-content h4 {
    padding-right: 10px;
    margin-right: 10px;
  }
  .catalogue-section .row-wrapper .right-col {
    grid-template-columns: 100%;
    gap: 25px;
  }
  .btn-main {
    padding: 14px 25px;
    font-size: 13px;
  }
  .footer-logo-link--ibox {
    width: 138px;
  }
  .footer-logo-link--opticlean {
    /* 138 * ~1.76 -- see the base rule's comment. */
    width: 243px;
  }
  .footer-logo-divider {
    width: 69px;
  }
  .footer-logo {
    margin-bottom: 40px;
  }
  .footer-top p {
    font-size: 14px;
  }
  ul.contect-list li {
    font-size: 15px;
  }
  .footer-links li a {
    font-size: 15px;
  }
  span.scroll_section_cut {
    margin-top: 0;
    height: 0;
  }
  #header .wrapper .header-menu {
    grid-template-columns: 1fr auto 1fr;
  }
  #header {
    padding: 15px 25px !important;
  }
  #header .nav-main.nav.section {
    padding: 180px 50px 40px 50px;
  }
  .instagram-gallery-section {
    padding-top: 40px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .cases-section {
    padding: 55px 0px;
  }
  .cases-section .content-wrap {
    margin-bottom: 50px;
    max-width: 780px;
  }
  ul.case-collection-list-gallery li.case-collection-data .case-collection-img {
    height: 230px;
  }
  .cases-section:before {
    height: 180px;
  }
  ul.case-collection-list-gallery li.case-collection-data {
    margin: 0 10px;
  }
  .contact-us-section {
    padding: 55px 0px;
  }
  .contact-form .gform_wrapper .gfield textarea {
    height: 100px !important;
  }
  .contact-form .gform_wrapper.gravity-theme .gfield_label {
    font-size: 15px;
  }
  .contact-form .gform_wrapper .gfield input,
  .contact-form .gform_wrapper .gfield textarea,
  .gform_wrapper .gfield select {
    height: 45px;
    line-height: 45px;
    font-size: 14px !important;
  }
  .contact-form .gform_wrapper.gravity-theme .gform_fields {
    grid-gap: 20px 25px !important;
  }
  .contact-us-section .row-wrapper {
    gap: 80px;
  }
  .contact-form .gform_wrapper .gform_footer .gform_button {
    padding: 14px 25px;
  }
  .contact-us-section .contact-details p {
    font-size: 15px;
  }
  .prosesses-section {
    padding: 55px 0px;
  }
  .prosesses-section .processes-image {
    height: 300px;
  }
  .prosesses-section .processes-content h3.small-number-title {
    font-size: 25px;
  }
  body.page-template-privacy-policy {
    padding-top: 0;
  }
  .privacy-policy-section .privacy-policy-content p {
    font-size: 16px;
  }
  .privacy-policy-section .privacy-policy-content ul li {
    font-size: 16px;
  }
  .privacy-policy-section {
    padding-bottom: 45px;
  }
  .page-not-found h1 {
    font-size: 50px;
  }
  .page-not-found h2 {
    font-size: 25px;
  }
  .page-not-found {
    padding: 55px 0px;
  }
  .page-not-found h1 {
    font-size: 50px;
  }
  .page-not-found h2 {
    font-size: 25px;
  }
  .page-not-found .btn-wrap {
    margin-top: 30px;
  }
  body.error404 {
    margin-top: 90px;
  }
  .btn-main.sticky-contact-btn {
    right: 15px;
    bottom: 60px;
    font-size: 0px;
    padding: 16px 5px 16px 15px;
  }
  .dowonload-catalog-form {
    padding: 40px;
    /* max-height: 530px -- RESTORED per a further follow-up ("the previous version was actually correct in size... restore the Catalogue modal to its previous compact size and proportions"). This tier's own original value, matching its own width range, same as before. */
    max-height: 530px;
    max-width: 900px;
  }
  .dowonload-catalog-form p {
    font-size: 17px !important;
  }
  .prosesses-section .prosess-wrapper .row-wrapper > div {
    margin-bottom: 60px;
  }
  .prosesses-section .prosess-wrapper .row-wrapper .left-col,
  .prosesses-section .prosess-wrapper .row-wrapper .right-col {
    width: 47%;
  }
  /* Shared with .mobile-call-sticky-button below (same shared-rule
     principle as the base rule above): both are exactly 45x45px with
     the same right offset at this tier, in one place, so they can't
     drift apart. */
  .whatsapp-sticky-button,
  .mobile-call-sticky-button {
    right: 15px;
    height: 45px;
    width: 45px;
  }
  .whatsapp-sticky-button {
    bottom: 115px;
  }
  /* Stacked directly above the WhatsApp button using the same 55px
     increment WhatsApp itself uses above the Contact Us button at
     this tier (115 - 60 = 55), so the spacing reads consistently
     across all three floating buttons. */
  .mobile-call-sticky-button {
    display: flex;
    bottom: 170px;
  }
}
@media (max-width: 991px) {
  /*
   * Below 991px both lists become slick carousels with identical
   * slidesToShow settings, so the branding cards get the exact same
   * slide width as the process cards. Revert the narrower-grid font
   * tweak so behaviour matches approach-box-list exactly here.
   */
  ul.approach-box-list.branding-box-list li.approach-box .approach-box-content h6 {
    font-size: 14px;
    white-space: normal;
  }
  h1 {
    font-size: 50px;
  }
  .main-banner-section .banner-content-wrap h6 {
    font-size: 13px;
  }
  .our-dna-section {
    padding: 55px 0px;
  }
  .about-us-section {
    padding: 55px 0px;
  }
  .sector-section {
    padding: 55px 0px;
  }
  .approach-section {
    padding: 55px 0px;
  }
  ul.sector-box-list {
    grid-template-columns: unset;
  }
  ul.sector-icon-box-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  ul.approach-box-list {
    grid-template-columns: unset;
  }
  ul.approach-box-list.branding-box-list {
    grid-template-columns: unset;
  }
  .catalogue-section .row-wrapper {
    gap: 40px;
  }
  .footer-top {
    padding-bottom: 50px;
    grid-template-columns: 48% 40%;
    gap: 40px;
  }
  .footer-logo-link--ibox {
    width: 98px;
  }
  .footer-logo-link--opticlean {
    /* 98 * ~1.76 -- see the base rule's comment. */
    width: 173px;
  }
  .footer-logo-divider {
    width: 49px;
  }
  .email-subscription-form input {
    font-size: 14px;
  }
  .footer-top h6 {
    font-size: 17px;
    margin-bottom: 20px;
  }
  .es_subscription_message.error {
    font-size: 15px;
  }
  .es_subscription_message.success {
    font-size: 15px;
  }
  .footer-top ul.social-link-list {
    margin-top: 45px;
  }
  ul.social-link-list li a {
    height: 20px;
    width: 20px;
    min-width: 20px;
  }
  #header .wrapper .header-menu {
    grid-template-columns: 1fr auto 1fr;
  }
  #header .wrapper .header-menu .logo a {
    width: 120px;
  }
  #header.fixed .wrapper .header-menu .logo a {
    width: 110px;
  }
  ul.sector-box-list .slick-list.draggable {
    margin: 0 -5px;
  }
  ul.sector-box-list li.sector-box {
    margin: 0 5px;
  }
  ul.approach-box-list .slick-list.draggable {
    margin: 0 -5px;
  }
  ul.approach-box-list li.approach-box {
    margin: 0 5px;
  }
  /*
   * Plain white nav arrow inside the mobile card carousels
   * (Unlock Your iBOX Eyecare Style / Imprinting-Branding Techniques /
   * Our Approach). Icon only - no box/background/shadow. Scoped to
   * these lists only so nothing elsewhere (e.g. the homepage hero
   * slider) is affected.
   */
  ul.sector-box-list .slick-prev,
  ul.sector-box-list .slick-next,
  ul.approach-box-list .slick-prev,
  ul.approach-box-list .slick-next {
    height: 32px;
    width: 32px;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    z-index: 10;
  }
  ul.sector-box-list .slick-prev {
    left: 10px;
  }
  ul.sector-box-list .slick-next {
    right: 10px;
  }
  ul.approach-box-list .slick-prev {
    left: 10px;
  }
  ul.approach-box-list .slick-next {
    right: 10px;
  }
  ul.sector-box-list .slick-prev:before,
  ul.approach-box-list .slick-prev:before {
    content: "";
    display: block;
    height: 14px;
    width: 14px;
    background-image: url(../images/slider-left-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  ul.sector-box-list .slick-next:before,
  ul.approach-box-list .slick-next:before {
    content: "";
    display: block;
    height: 14px;
    width: 14px;
    background-image: url(../images/slider-right-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  span.scroll_section_cut {
    margin-top: 0;
    height: 0;
  }
  .contact-us-section .row-wrapper {
    gap: 50px;
    grid-template-columns: 100%;
  }
  .contact-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .contact-us-section .row-wrapper h2 {
    text-align: center;
  }
  .contact-us-section .row-wrapper .title-wrapper p {
    text-align: center;
    max-width: 570px;
    margin: 0 auto;
  }
  .contact-us-section .contact-details .contact-wrapper {
    margin-bottom: 0px;
  }
  .prosesses-section .processes-content p br {
    display: none;
  }
  .prosesses-section .processes-content h2 {
    margin-bottom: 10px;
    font-size: 25px;
  }
  .prosesses-section .processes-content h3.small-number-title {
    font-size: 20px;
  }
  .prosesses-section .processes-content h3.small-number-title:after {
    width: 30px;
  }
  .privacy-policy-section .privacy-policy-content h2 {
    font-size: 25px;
  }
  .page-not-found {
    padding: 40px 0px;
  }
  .page-not-found h2 {
    font-size: 21px;
  }
  .page-not-found .btn-wrap .btn {
    padding: 13px 25px;
    font-size: 14px;
  }
  body.error404 {
    margin-top: 81px;
  }
  .dowonload-catalog-form {
    padding: 40px;
    /* max-height: 525px -- RESTORED per a further follow-up ("the previous version was actually correct in size... restore the Catalogue modal to its previous compact size and proportions"). This tier's own original value, matching its own width range, same as before. */
    max-height: 525px;
    max-width: 700px;
  }
  .dowonload-catalog-form p {
    font-size: 16px !important;
  }
}
@media (max-width: 767px) {
  /*
   * Global mobile-only safety net: guarantee every heading on the site
   * wraps at word boundaries only. Whole words are always kept intact
   * and moved to the next line; a word is only ever broken internally
   * as an absolute last resort, if a single word is wider than the
   * viewport can hold on its own line. Does not touch font-size,
   * spacing, or desktop/tablet styles.
   */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
  #header {
    padding: 15px 40px !important;
  }
  ul.sector-box-list .slick-list.draggable {
    margin: 0 -5px;
  }
  ul.sector-box-list li.sector-box {
    margin: 0 5px;
  }
  ul.approach-box-list .slick-list.draggable {
    margin: 0 -5px;
  }
  ul.approach-box-list li.approach-box {
    margin: 0 5px;
  }
  #header {
    padding: 15px 20px !important;
  }
  .contact-details {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  .page-not-found {
    padding: 40px 0px;
  }
  .page-not-found h1 {
    font-size: 35px;
  }
  .page-not-found h2 {
    font-size: 20px;
  }
  .page-not-found .btn-wrap .btn {
    padding: 11px 20px;
    font-size: 14px;
  }
}
@media (max-width: 580px) {
  ul.approach-box-list.branding-box-list li.approach-box .approach-box-content h6 {
    font-size: 17px;
  }
  #header .wrapper .header-menu .logo a {
    width: 120px;
  }
  #header.fixed .wrapper .header-menu .logo a {
    width: 100px;
  }
  .main-banner-section .banner-content-wrap h6 {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .main-banner-section .banner-content-wrap h1 {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
  .main-banner-section .bookmark-link {
    bottom: 50px;
  }
}

/* Mobile-only hero title fix for Sustainability and Accessories -- per
   follow-up feedback: on narrower phones (e.g. iPhone X, iPhone 13),
   the last letter of "SUSTAINABILITY" / "ACCESSORIES" was dropping to
   a second line, since these pages' one-word titles inherit the same
   global h1 sizing as every other hero on the site (50px at this
   width, see the h1 rule above), which isn't calibrated for a single
   long uppercase word with no natural break point. Scoped to these
   two pages only via WordPress's own automatic per-template body
   class (body_class(), header.php) -- page-template-template-
   sustainability-php / page-template-template-accessories-php --
   rather than editing either template's markup. Fluid clamp() sizing
   (not a single fixed override) keeps the title readable and
   proportionate down to ~320px while staying prominent on the wider
   end of mobile; white-space: nowrap is the hard guarantee against
   wrapping regardless of exact metrics, with html's existing global
   overflow-x: hidden (css/style.css) as a safety net against any
   horizontal scroll in an extreme edge case. Desktop and tablet
   (portrait and landscape) are completely unaffected -- this whole
   block only exists inside the existing @media (max-width: 580px)
   tier below the actual mobile fix, applied via a fresh, separate
   @media (max-width: 767px) block so it also covers phones between
   581-767px, not just the narrowest ones. Hero image, height,
   overlay, and wording are all untouched -- only font-size/wrapping
   behaviour changes. */
/* Hero heading size reduction -- Services page only, per follow-up
   feedback (its hero heading was too large). The equivalent
   Microfiber Cloths override that used to live here has been removed:
   that page's heading is now unified with the Homepage Hero heading's
   own typography instead (see the shared .main-banner-section
   .banner-content-wrap h1 rule above), per a later follow-up asking
   for exactly that across Eyewear Cases/Accessories/OPTiCLEAN
   Microfiber Cloths. Services' own hero has since been removed
   entirely (template-services.php) -- this rule is scoped to a page
   template that no longer has a matching h1 in its markup, so it has
   no live effect either way; left as-is rather than removed as part
   of an unrelated cleanup. */
body.page-template-template-services-php .main-banner-section .banner-content-wrap h1 {
  /* font-size: clamp(2rem, 1rem + 3.4vw, 3.25rem) (ceiling was 3.75rem
     = 60px, now 3.25rem = 52px) -- per a further follow-up ("reduce
     the size of the hero image heading suitably... proportional and
     refined, not drastic"). 60px * 0.87 = 52.2px, rounded to 52px
     (~13% reduction), reached at the same ~1101px desktop breakpoint
     as before (vw coefficient adjusted alongside the smaller ceiling
     so it still locks in at that same point, not later). Wording,
     hero image, hero height, heading position/alignment, and the
     floating navigation are all completely untouched -- only this
     font-size. */
  font-size: clamp(2rem, 1rem + 3.4vw, 3.25rem);
}

@media (max-width: 767px) {
  body.page-template-template-sustainability-php .main-banner-section .banner-content-wrap h1 {
    white-space: nowrap;
    width: 100%;
    max-width: 100%;
    text-align: center;
    overflow: visible;
  }

  body.page-template-template-sustainability-php .main-banner-section .banner-content-wrap h1 {
    /* "SUSTAINABILITY" -- 14 characters, needs a smaller ceiling than
       "ACCESSORIES" to reliably stay on one line at the same widths. */
    font-size: clamp(1.7rem, 7.2vw, 2.25rem);
  }

  /* The equivalent Accessories nowrap + font-size pair that used to
     live here has been removed -- per follow-up feedback, that page's
     heading now matches the Homepage Hero heading's own typography at
     every width instead (see the shared .main-banner-section
     .banner-content-wrap h1 rule above), the same as Eyewear Cases
     and OPTiCLEAN Microfiber Cloths, both of which never forced
     nowrap here either. Natural wrapping (word-break: normal;
     overflow-wrap: break-word -- see the @media (max-width: 991px)
     tier above) applies to all three pages equally now. */
}

@media (max-width: 580px) {
  .sector-section {
    padding: 65px 0px 70px 0px;
  }
  h2 {
    font-size: 28px;
  }
  body p {
    font-size: 16px;
  }
  .sector-section .content-wrap {
    max-width: 550px;
    margin-bottom: 40px;
  }
  ul.sector-icon-box-list {
    grid-template-columns: 100%;
    gap: 60px;
  }
  .approach-section {
    padding: 70px 0px 80px 0px;
  }
  .approach-section .content-wrap p {
    padding: 0px 5px;
  }
  .approach-section .content-wrap {
    margin-bottom: 34px;
  }
  .catalogue-section {
    padding: 80px 0px;
    text-align: center;
  }
  .catalogue-section .row-wrapper {
    grid-template-columns: 100%;
  }
  .catalogue-section .row-wrapper .right-col p {
    font-size: 16px;
    text-align: center;
  }
  .catalogue-section .row-wrapper .right-col .right-wrap .btn-main {
    margin: 0 auto;
  }
  .catalogue-section .row-wrapper .right-col h2 {
    margin-bottom: 22px;
  }
  .catalogue-section .row-wrapper .right-col {
    gap: 30px;
  }
  footer {
    padding-top: 90px;
  }
  ul.sector-icon-box-list li.sector-icon-box .icon {
    width: 63px;
    height: 49px;
    margin-bottom: 15px;
  }
  ul.approach-box-list li.approach-box .approach-box-content h4 {
    font-size: 24px;
  }
  ul.approach-box-list li.approach-box .approach-box-content h6 {
    font-size: 17px;
  }
  .footer-logo-link--ibox {
    width: 116px;
  }
  .footer-logo-link--opticlean {
    /* 116 * ~1.76 -- see the base rule's comment. */
    width: 204px;
  }
  .footer-logo-divider {
    width: 58px;
  }
  .footer-top {
    padding-bottom: 55px;
    grid-template-columns: 100%;
    gap: 44px;
  }
  .footer-logo {
    margin-bottom: 28px;
  }
  ul.contect-list li:first-child {
    max-width: 250px;
  }
  .footer-top p {
    font-size: 15px;
  }
  ul.contect-list li {
    font-size: 16px;
    line-height: 26px;
  }
  html .mobile-d-none {
    display: none !important;
  }
  .footer-top h6 {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .footer-col-four p {
    font-size: 16px;
  }
  .email-subscription-form {
    margin-top: 20px;
  }
  .footer-bottom {
    padding: 23px 0px 30px 0px;
  }
  .footer-bottom p {
    text-align: center;
    max-width: 220px;
    margin: 0 auto;
  }
  .footer-bottom .footer-contact-btn.btn-main {
    top: -38px;
    padding: 15px 32px;
  }
  span.scroll_section_cut {
    margin-top: 0;
    height: 0;
  }
  .btn-main {
    padding: 17px 33px;
    font-size: 13px;
  }
  .es_subscription_message.success {
    font-size: 15px !important;
  }
  .es_subscription_message.error {
    font-size: 15px !important;
  }
  .footer-contact-btn.btn-main svg {
    margin-right: 5px;
  }
  html.menu-open #header .nav-main.nav.section ul.social-link-list {
    display: flex;
  }
  #header {
    padding: 15px 25px !important;
  }
  #header .wrapper .header-menu {
    grid-template-columns: 1fr auto 1fr;
  }
  #header .nav-main.nav.section {
    text-align: center;
    padding: 150px 20px 30px 20px;
  }
  #header ul#menu-main-menu li a {
    font-size: 24px;
  }
  #header ul#menu-main-menu li {
    margin-bottom: 20px;
  }
  #header {
    padding: 15px 20px !important;
  }
  ul.approach-box-list li.approach-box .approach-image {
    height: 335px;
  }
  .instagram-gallery-section {
    padding-top: 60px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .sb_instagram_header.sbi_medium .sbi_feedtheme_header_text h3 {
    font-size: 20px !important;
  }
  .our-dna-section {
    padding: 45px 0px;
  }
  .about-us-section {
    padding: 45px 0px;
  }
  .cases-section {
    padding: 45px 0px;
  }
  .contact-us-section {
    padding: 45px 0px;
  }
  .contact-us-section .row-wrapper .title-wrapper {
    margin-bottom: 30px;
  }
  .contact-us-section .row-wrapper h2 {
    text-align: left;
  }
  .contact-us-section .row-wrapper .title-wrapper p {
    text-align: left;
  }
  .contact-form .gform_wrapper .gform_footer .gform_button {
    padding: 8px 25px;
  }
  .contact-details {
    grid-template-columns: 100%;
    gap: 30px;
  }
  h5 {
    font-size: 18px;
  }
  .prosesses-section .processes-image {
    height: 250px;
    margin-bottom: 15px;
  }
  .mobile-image {
    display: block;
  }
  .destop-image {
    display: none;
  }
  .prosesses-section .processes-content h2 {
    margin-bottom: 15px;
  }
  body.page-template-privacy-policy {
    padding-top: 0;
  }
  .privacy-policy-section .privacy-policy-content h2 {
    font-size: 22px;
    margin-bottom: 10px;
    letter-spacing: 0;
  }
  .privacy-policy-section .privacy-policy-content h5 {
    margin-bottom: 10px;
  }
  .privacy-policy-section .privacy-policy-content ul li {
    font-size: 15px;
    line-height: 150%;
  }
  .privacy-policy-section {
    padding-bottom: 40px;
  }
  .page-not-found .btn-wrap .btn-main {
    padding: 15px 25px;
  }
  ul.sector-box-list li.sector-box .sector-image {
    height: 335px;
  }
  .footer-bottom .poweredbywrap {
    justify-content: center;
    margin: 0 auto;
    margin-top: 10px;
  }
  .dowonload-catalog-form {
    padding: 40px 30px;
    margin-left: 15px;
    margin-right: 15px;
  }
  .dowonload-catalog-form h2 {
    font-size: 21px;
    text-align: left;
  }
  .catalogue-section .row-wrapper .right-col p {
    font-size: 14px !important;
    line-height: 150%;
    letter-spacing: 0;
  }
  .contact-form .gform_wrapper.gravity-theme .gfield_label {
    display: block;
    text-align: left;
  }
  .contact-form .gform_wrapper .gfield input,
  .contact-form .gform_wrapper .gfield textarea,
  .gform_wrapper .gfield select {
    padding: 0px 20px !important;
  }
  .catalog-form .gform_wrapper.gravity-theme .gfield_label {
    font-size: 14px;
  }
  .contact-form .gform_wrapper.gravity-theme .gfield_checkbox label {
    font-size: 13px !important;
    text-align: left;
    line-height: 150%;
  }
  .dowonload-catalog-form .close-button {
    height: 25px;
    width: 25px;
    background-size: 13px;
  }
  .prosesses-section .prosess-wrapper .row-wrapper .left-col,
  .prosesses-section .prosess-wrapper .row-wrapper .right-col {
    width: 100% !important;
  }
  .prosesses-section .prosess-wrapper .row-wrapper > div {
    margin-bottom: 40px;
  }
  .dowonload-catalog-form p {
    text-align: left !important;
  }
  .main-banner-section, .main-banner-section .main-banner-slider .slick-track, .main-banner-section.home .wrap {
    height: 80vh;
  }
  .main-banner-section.home .main-banner-slider .banner-content-wrap {
    top: 45%;
  }
  .main-banner-section.home .main-banner-slider .slick-prev {
    left: 0;
  }
  .main-banner-section.home .main-banner-slider .slick-next {
    right: 0px;
  }
}

/*
 * ---------------------------------------------------------------------
 * Cases page: "Explore Our Series" navigation + per-series product list
 * ---------------------------------------------------------------------
 * Reuses existing design tokens throughout: .container, .title,
 * .content-wrap, .btn-main, the --primary/--secondary colour variables,
 * the 90px section padding rhythm, the 328px/20px-gap card grid already
 * used by the Approach and Sector sections, and the same drop-shadow
 * card treatment. No new colours, fonts, spacing scale or button style
 * are introduced.
 */
.series-nav-section {
  padding: 80px 0px;
  background-color: var(--white);
}

.series-nav-section .content-wrap {
  max-width: 620px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.series-nav-section .content-wrap p {
  text-align: center;
  text-wrap: balance;
}

ul.series-tab-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 60px;
  padding: 0;
  list-style: none;
}

.series-tab-btn {
  font-family: "Plus Jakarta Sans";
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18px;
  color: var(--primary);
  background-color: var(--white);
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 14px 30px;
  cursor: pointer;
  transition: all 0.5s;
}

.series-tab-btn:hover {
  border-color: var(--primary);
  background-color: rgba(24, 51, 88, 0.06);
  transition: all 0.5s;
}

.series-tab-btn.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  transition: all 0.5s;
}

.series-panel-wrap {
  position: relative;
}

.series-panel {
  display: none;
}

.series-panel.active {
  display: block;
}

.series-products-section {
  padding: 80px 0px;
  background-color: #F4F5F7;
}

.series-products-panel {
  display: none;
}

.series-products-panel.active {
  display: block;
}

.series-products-panel .title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.series-products-icon {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
}

.series-products-icon img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

ul.series-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

ul.series-products-grid li.series-product-card {
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.08));
  overflow: hidden;
  transition: transform 0.5s linear 0s;
}

ul.series-products-grid li.series-product-card .series-product-img {
  height: 328px;
  width: 100%;
  display: block;
  overflow: hidden;
}

ul.series-products-grid li.series-product-card .series-product-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s linear 0s;
}

ul.series-products-grid li.series-product-card:hover .series-product-img img {
  transform: scale(1.1);
  transition: transform 0.5s linear 0s;
}

ul.series-products-grid li.series-product-card .series-product-title {
  background-color: var(--white);
  padding: 16px 22px;
}

ul.series-products-grid li.series-product-card .series-product-title h6 {
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.18px;
  text-align: center;
}

.series-products-empty {
  text-align: center;
}

@media (max-width: 1120px) {
  ul.series-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .series-nav-section {
    padding: 55px 0px;
  }
  .series-products-section {
    padding: 55px 0px;
  }
  ul.series-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  ul.series-tab-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 40px;
    padding-bottom: 10px;
  }
  .series-tab-btn {
    padding: 12px 20px;
    white-space: nowrap;
  }
}

@media (max-width: 580px) {
  ul.series-products-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}


/*# sourceMappingURL=style.css.map */