/* ===--- Resets---=== */
:root{
  --shadow-sm: 0 1px 2px rgba(10, 18, 36, .06), 0 2px 8px rgba(10, 18, 36, .05);
  --shadow-md: 0 4px 12px rgba(10, 18, 36, .07), 0 18px 40px rgba(10, 18, 36, .08);
  --shadow-lg: 0 10px 30px rgba(10, 18, 36, .10), 0 40px 80px rgba(10, 18, 36, .12);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 100%;
}
html {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 62.5%;
}
html,
body {
    height: 100%;
}
body {
    min-height: 100svh;
    background: var(--color-bg);
    color: var(--font-color-body);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lh-body);
    font-style: normal;
    font-optical-sizing: auto;
    padding: 0;
    margin: 0;
    overflow-x: hidden !important;
    width: 100%;
    text-shadow: none;
    -webkit-text-size-adjust: none;
}
#page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-dark);
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
b,
strong {
  font-weight: bold;
}
img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}
li {
  display: list-item;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td,
caption {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}
q {
  quotes: none;
}
q:before,
q:after {
  content: "";
  content: none;
}
sub,
sup,
small {
  font-size: 75%;
}
sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
svg {
  overflow: hidden;
}
pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap !important;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  width: 100%;
}
input[name="hp_comment_verification"] {
  position: absolute !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}
mark {
  background: var(--color-main);
  color: white;
}
/* ===--- Generic Tags ---=== */
*,
*:before,
*:after {
  box-sizing: border-box;
  font-size: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
::-moz-selection {
  background: hsla(0 0% 0% / 0.72);
  color: white;
}
::selection {
  background: hsla(0 0% 0% / 0.72);
  color: white;
}
hr {
  border: none;
  border-top-width: var(--border-hr-width);
  border-top-color: var(--color-border);
  border-top-style: solid;
  margin: var(--hr-margin) auto;
}
.light hr{
  border-top-color: var(--color-border-light);
}
.dark hr{
  border-top-color: var(--color-border-dark);
}
.main hr{
  border-top-color: var(--color-border-main);
}
a {
  color: var(--font-color-body);
}
a:hover {
  color: var(--font-color-body);
  text-decoration: none;
}
.light a {
  color: var(--font-color-body-light);
}
.light a:hover {
  color: var(--font-color-body-light);
  text-decoration: none;
}
.dark a {
  color: var(--font-color-body-dark);
}
.dark a:hover {
  color: var(--font-color-body-dark);
  text-decoration: none;
}
.main a {
  color: var(--font-color-body-main);
}
.main a:hover {
  color: var(--font-color-body-main);
  text-decoration: none;
}
a[href^="x-apple-data-detectors:"] {
  color: inherit;
  text-decoration: inherit;
}
.clear {
  clear: both;
}
/* ===--- Typography ---=== */
body,
p,
ol li,
ul li,
pre,
input,
textarea,
select {
  font-family: var(--font-body);
  line-height: var(--font-lh-body);
  margin: var(--font-margin-body);
  color: var(--font-color-body);
  font-weight: var(--font-weight-body);
  text-transform: var(--font-transform-body);
  letter-spacing: var(--font-ls-body);
  font-size: var(--font-size-body);
}
.light body,
.light p,
.light ol li,
.light ul li,
.light pre,
.light input,
.light textarea,
.light select {
  color: var(--font-color-body-light);
}
.dark body,
.dark p,
.dark ol li,
.dark ul li,
.dark pre,
.dark input,
.dark textarea,
.dark select {
  color: var(--font-color-body-dark);
}
.main body,
.main p,
.main ol li,
.main ul li,
.main pre,
.main input,
.main textarea,
.main select {
  color: var(--font-color-body-main);
}
.h0,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-family: var(--font-heading);
  line-height: var(--font-lh-heading);
  margin: var(--font-margin-heading);
  color: var(--font-color-heading);
  font-weight: var(--font-weight-heading);
  text-transform: var(--font-transform-heading);
  letter-spacing: var(--font-ls-heading);
}
.h0 em,
h1 em,
.h1 em,
h2 em,
.h2 em,
h3 em,
.h3 em,
h4 em,
.h4 em{
  color: var(--color-main);
  font-style: normal;
}
.dark .h0 em,
.dark h1 em,
.dark .h1 em,
.dark h2 em,
.dark .h2 em,
.dark h3 em,
.dark .h3 em,
.dark h4 em,
.dark .h4 em{
  color: var(--color-amber);
}
.light .h0,
.light h1,
.light .h1,
.light h2,
.light .h2,
.light h3,
.light .h3,
.light h4,
.light .h4{
  color: var(--font-color-heading-light);
}
.dark .h0,
.dark h1,
.dark .h1,
.dark h2,
.dark .h2,
.dark h3,
.dark .h3,
.dark h4,
.dark .h4{
  color: var(--font-color-heading-dark);
}
.main .h0,
.main h1,
.main .h1,
.main h2,
.main .h2,
.main h3,
.main .h3,
.main h4,
.main .h4{
  color: var(--font-color-heading-main);
}
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-accent);
  line-height: var(--font-lh-accent);
  margin: var(--font-margin-accent);
  color: var(--font-color-accent);
  text-transform: var(--font-transform-accent);
  font-weight: 700;
  letter-spacing: .16em;
}
.light h5,
.light .h5,
.light h6,
.light .h6 {
  color: var(--font-color-accent-light);
}
.dark h5,
.dark .h5,
.dark h6,
.dark .h6 {
  color: white;
}
.main h5,
.main .h5,
.main h6,
.main .h6 {
  color: white;
}
.h0{
  font-size: var(--font-size-h0);
}
h1,
.h1 {
  font-size: var(--font-size-h1);
}
h2,
.h2 {
  font-size: var(--font-size-h2);
}
h3,
.h3 {
  font-size: var(--font-size-h3);
}
h4,
.h4 {
  font-size: var(--font-size-h4);
}
h5,
.h5 {
  font-size: var(--font-size-h5);
}
h6,
.h6 {
    font-size: 12px;
}
p,
pre{
  margin: var(--font-margin-body);
}
ul {
  list-style: disc outside none;
  margin: 0 0 1.2rem 2rem;
}
ul li {
  padding: 0;
  margin: 0 0 .8rem;
}
ol{
  list-style: decimal outside none;
  margin: 0 0 1.2rem 2rem;
}
ol li {
  padding: 0;
  margin: 0 0 .8rem;
}
/* ===--- Section Spacing ---=== */
section.content_container{
    width: 100%;
    background: var(--color-bg);
    padding: var(--section-block-md) var(--section-inline);
}
section.content_container.light{
    background: var(--color-bg-light);
}
section.content_container.dark{
    background: var(--color-bg-dark);
}
section.content_container.main{
    background: var(--color-main);
}
section.content_container.spacious{
    padding: var(--section-block-xl) var(--section-inline);
}
section.content_container.relaxed{
    padding: var(--section-block-lg) var(--section-inline);
}
section.content_container.compact{
    padding: var(--section-block-sm) var(--section-inline);
}
.content{
    width: 100%;
    margin: 0 auto;
    max-width: var(--content-width-lg);
}
.content-xl .content{
    max-width: var(--content-width-xl);
}
.content-md .content{
    max-width: var(--content-width-md);
}
.content-sm .content{
    max-width: var(--content-width-sm);
}
.content-xs .content{
    max-width: var(--content-width-xs);
}
/* ===--- Text Alignment ---=== */
.align-left {
  text-align: left;
}
.align-center {
  text-align: center;
}
.align-center img {
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}
.align-center figcaption {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.align-right {
  text-align: right;
}
.align-right img {
  margin-left: auto;
}
.align-right figcaption {
  text-align: right;
  margin-left: auto;
}
.align-justify {
  text-align: justify;
}
.float-left {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
  max-width: 200px;
}
.float-right {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
  max-width: 200px;
}
.valign-top {
  align-items: start;
}
.valign-middle {
  align-items: center;
}
.valign-bottom {
  align-items: end;
}
.outset-right {
  position: relative;
  width: calc(100% + 24px);
  max-width: calc(100% + 24px);
  transform: translateX(24px) translate3d(0, 0, 0);
  left: calc(24px * -1);
}
.outset-left {
  width: calc(100% + 24px);
  max-width: calc(100% + 24px);
  transform: translateX(calc(24px * -1)) translate3d(0, 0, 0);
}
.outset-both {
  position: relative;
  width: calc(100% + 24px + 24px);
  max-width: calc(100% + 24px + 24px);
  transform: translateX(-50%) translate3d(0, 0, 0);
  left: 50%;
}
.center-list {
  justify-content: center;
}
/* ===--- Editable Content  ---=== */
.editable_content::after {
    content: '';
    clear: both;
    display: block;
}
.editable_content > *:last-child {
    margin-bottom: 0;
}
.editable_content ul {
    list-style: disc outside none;
    margin: 0 0 1.6rem 2rem;
}
.editable_content ul li {
    padding: 0;
    margin: 0 0 .8rem;
}
.editable_content ol {
    list-style: decimal outside none;
    margin: 0 0 1.6rem 2rem;
}
.editable_content ol li {
    padding: 0;
    margin: 0 0 .8rem;
}
.editable_content figure {
    display: block;
}
.editable_content figure.float-left {
    float: left;
    margin: .8rem .8rem .8rem 0;
}
.editable_content figure.float-right {
    float: right;
    margin: .8rem 0 .8rem .8rem;
}
.editable_content figure.wrap-center {
    margin: .8rem auto
}
.editable_content iframe,
.editable_content img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.editable_content table{
    margin: var(--font-margin-body);
    width: 100%;
    display: table;
    border-left: 2px solid var(--color-bg);
}
.editable_content table tr th,
.editable_content table thead tr td {
    font-weight: var(--font-weight-heading);
    font-family: var(--font-heading);
    color: var(--color-bg-light);
    background: var(--color-bg-dark);
    border: none;
    border-right: 2px solid var(--color-bg);
    border-bottom: 2px solid var(--color-bg);
    padding: .8rem;
}
.editable_content table tr td {
    border-right: 2px solid var(--color-bg);
    border-bottom: 2px solid var(--color-bg);
    background: var(--color-bg-light);
    padding: .8rem;
}
@media screen and (max-width: 1024px) {
  .editable_content figure {
    margin: .8rem 0;
  }
  .editable_content figure.float-left,
  .editable_content figure.float-right {
    float: none;
  }
  .editable_content figure.wrap-center {
    margin: .8rem auto;
  }
  .editable_content table thead{
    display: none;
  }
  .editable_content table tbody tr td::before {
    content: attr(data-cell)':';
    font-weight: var(--font-weight-heading);
    font-family: var(--font-heading);
    color: var(--color-font-heading);
    margin: 0 .4rem 0 0;   
  }
  .editable_content table tbody{
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }
  .editable_content table tbody tr{
    display: flex;
    flex-direction: column;
    gap: .2rem;
  }
  .editable_content table tbody tr td{
    width: 100%;
  }
}
@media screen and (max-width: 560px){
  .editable_content table tbody tr td::before{
    display: block;
  }
}
.light .editable_content table{
    border-left: 2px solid var(--color-bg-light);
}
.light .editable_content table tr th,
.light .editable_content table thead tr td {
    color: var(--color-bg);
    border-right: 2px solid var(--color-bg-light);
    border-bottom: 2px solid var(--color-bg-light);
}
.light .editable_content table tr td {
    border-right: 2px solid var(--color-bg-light);
    border-bottom: 2px solid var(--color-bg-light);
    background: var(--color-bg);
}
.dark .editable_content table{
    border-left: 2px solid var(--color-bg-dark);
}
.dark .editable_content table tr th,
.dark .editable_content table thead tr td {
    background: var(--color-bg);
    color: var(--font-color-heading);
    border-right: 2px solid var(--color-bg-dark);
    border-bottom: 2px solid var(--color-bg-dark);
}
.dark .editable_content table tr td {
    border-right: 2px solid var(--color-bg-dark);
    border-bottom: 2px solid var(--color-bg-dark);
    background: var(--color-border-dark);
    color: var(--font-color-body-dark);
}
.main .editable_content table{
    border-left: 2px solid var(--color-main);
}
.main .editable_content table tr th,
.main .editable_content table thead tr td {
    background: var(--color-bg);
    color: var(--font-color-heading);
    border-right: 2px solid var(--color-main);
    border-bottom: 2px solid var(--color-main);
}
.main .editable_content table tr td {
    border-right: 2px solid var(--color-main);
    border-bottom: 2px solid var(--color-main);
    background: var(--color-border-main);
    color: var(--font-color-body-main);
}
/* ===--- Top Header ---=== */
.top-header {
  background: var(--color-bg-light);
  padding: .8rem var(--section-inline);
}
.top-header .content {
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
  align-items: center;
}
.top-header .content .language {
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  gap: .8rem;
  margin-right: auto;
}
.top-header .content .language span {
  display: block;
}
.top-header .content .language span:first-of-type {
  padding-right: .8rem;
  border-right: 2px solid var(--color-border-light);
}
.top-header .content>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.6rem;
}
.top-header .content>ul li {
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
}
.top-header .content>ul li a:hover {
  color: var(--color-main);
}
.top-header .content .social_media ul {
  gap: .8rem;
  margin: 0;
  padding: 0;
}
.top-header .content .social_media ul li {
  margin: 0;
  padding: 0;
}
.top-header .content .social_media ul li a {
  width: 2.8rem;
  height: 2.8rem;
  background: var(--color-body);
  color: var(--color-bg-light);
}
.top-header .content .social_media ul li a:hover {
  background: var(--color-main);
}
.top-header .content .social_media ul li a i {
  font-size: 1.2rem;
}
@media screen and (max-width: 1024px) {
  .top-header {
    display: none;
  }
}
/* ===--- Full Header ---=== */
.full_header {
  display: none;
  background: var(--color-bg);
  width: 100%;
  z-index: 999;
  top: 0;
  position: sticky;
  padding: 0 var(--section-inline);
  box-shadow: var(--shadow);
}
.jqueryslidemenu {
  width: 100%;
  max-width: var(--content-width-md);
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.jqueryslidemenu a.logo {
  width: var(--logo-width);
  display: block;
  margin: 0;
  padding: 0;
}
.jqueryslidemenu a.logo img {
  width: 100%;
  height: auto;
}
.jqueryslidemenu nav {
  width: calc(100% - var(--logo-width) - 32px);
}
.jqueryslidemenu ul {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jqueryslidemenu ul li {
  position: relative;
  margin: 0;
  padding: 0;
}
.jqueryslidemenu ul li a {
  padding: var(--header-nav-padding);
  font-weight: var(--header-nav-weight);
  font-family: var(--header-nav-family);
  color: var(--header-nav-color);
  font-size: var(--header-nav-size);
  width: 100%;
  display: block;
  line-height: 1;
  text-decoration: none;
  position: relative;
}
.jqueryslidemenu ul li a:hover,
.jqueryslidemenu ul li:hover a,
.jqueryslidemenu ul li.Selected a,
.jqueryslidemenu ul li:has(ul li.Selected) a,
.jqueryslidemenu ul li.Selected a:hover {
  color: var(--header-nav-color-hover);
}
.jqueryslidemenu ul li a::after {
  content: "";
  display: var(--header-nav-after-active);
  background: var(--header-nav-after-bg);
  width: 0;
  height: 2px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  transition: var(--animate-medium);
}
.jqueryslidemenu ul li a:hover::after,
.jqueryslidemenu ul li:hover a::after,
.jqueryslidemenu ul li.Selected a::after,
.jqueryslidemenu ul li:has(ul li.Selected) a::after,
.jqueryslidemenu ul li.Selected a:hover::after {
  width: 100%;
}
/* ----- FIRST DROP-DOWN LAYER ----- */
.jqueryslidemenu ul li ul {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  position: absolute;
  left: 0;
  display: block;
  visibility: hidden;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: none;
  width: 256px;
  background: var(--header-dropdown-bg);
}
.jqueryslidemenu nav > ul > li:last-child ul{
  left: auto;
  right: 0;
}
.jqueryslidemenu ul li ul li {
  display: list-item;
  float: none;
  border: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.jqueryslidemenu ul li ul li a {
  color: var(--header-dropdown-color);
  padding: 1.6rem;
  margin: 0;
  background: none;
}
.jqueryslidemenu ul li ul li a::after {
  display: none;
}
.jqueryslidemenu ul li:hover ul {
  visibility: visible;
}
.jqueryslidemenu ul li:hover ul li a {
  color: var(--header-dropdown-color);
  padding: 1.6rem;
  margin: 0;
  background: none;
}
.jqueryslidemenu ul li.Selected ul li a:hover,
.jqueryslidemenu ul li ul li a:hover {
  color: var(--header-dropdown-color);
  text-decoration: none;
  background: var(--header-dropdown-hover);
}
/* ----- SUB DROP-DOWN LAYERS AFTER 1ST ----- */
.jqueryslidemenu nav ul li ul li ul {
  top: 0;
  margin: 0;
  left: auto;
  right: 100%;
  display: none;
}
.jqueryslidemenu nav > ul > li:last-child ul li ul{
  left: auto;
  right: 100%;
}
.jqueryslidemenu ul li ul li:hover ul{
  display: block;
}
@media (min-width:1024px) {
  .full_header {
    display: inherit;
  }
}
/* ----- Cart Button ----- */
.jqueryslidemenu a.cart_button {
  position: absolute;
  bottom: -44px;
  right: 0;
  background: var(--color-main);
  color: var(--color-bg);
  padding: .8rem 1.6rem;
  border-radius: 0 0 .4rem .4rem;
  font-size: 2rem;
  text-decoration: none;
  transition: var(--animate-medium);
}
.jqueryslidemenu a.cart_button:hover {
  background: var(--color-bg-dark);
}
.jqueryslidemenu a.cart_button span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-9px, calc(-50% + 3px));
  width: 18px;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-main);
  background: var(--color-bg);
  transition: var(--animate-medium);
}
.jqueryslidemenu a.cart_button:hover span {
  color: var(--color-bg-dark);
}
/* ----- Mega Menu ----- */
header.mega-menu .jqueryslidemenu ul li:hover ul li ul,
header.mega-menu .jqueryslidemenu ul li:hover ul li ul li ul{
  visibility: visible;
  display: block;
}
header.mega-menu .jqueryslidemenu ul li:hover ul li ul,
header.mega-menu .jqueryslidemenu ul li:hover ul li ul li ul{
  position: initial;
}
header.mega-menu .jqueryslidemenu nav > ul > li{
  position: initial;
}
header.mega-menu .jqueryslidemenu nav > ul > li > ul{
  padding: .8rem 1.6rem;
  width: 100%;
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
header.mega-menu .jqueryslidemenu nav > ul > li > ul > li{
  width: calc(100% / 4 - calc(1.6rem * 3 / 4));
}
header.mega-menu .jqueryslidemenu nav > ul > li > ul > li > a{
  font-size: 1.6rem;
  line-height: 1.1;
  padding: .8rem 0;
  border-bottom: 1px solid hsla(0 0% 100% / .16);
}
header.mega-menu .jqueryslidemenu ul li ul li{
  position: initial;
}
header.mega-menu .jqueryslidemenu ul li ul li a{
  padding: 0;
}
header.mega-menu .jqueryslidemenu ul li ul li a:hover{
  background: none;
  color: hsla(0 0% 100% / .72);
}
header.mega-menu .jqueryslidemenu ul li ul li ul{
  width: 100%;
}
header.mega-menu .jqueryslidemenu ul li ul li ul li{
  padding:0;
}
header.mega-menu .jqueryslidemenu ul li ul li ul li a{
  padding: .8rem 0;
  font-size: 1.4rem;
  font-weight: 400;
}
header.mega-menu .jqueryslidemenu ul li ul li ul li ul{
  width: 100%;
}
/* ---------- 6. Mobile Header & Navigation ---------- */
.mobile_header {
  background: var(--color-bg);
  box-shadow: var(--shadow);
  padding: .8rem var(--section-inline);
  width: 100%;
  z-index: 999;
  position: sticky;
  display: inherit;
  top: 0;
}
@media (min-width: 1024px) {
  .mobile_header {
    display: none;
  }
}
.mobile_header .logo_area {
  padding: 0;
  width: 100%;
}
.mobile_header .logo_area>a {
  width: var(--logo-width-mobile);
  display: block;
  margin: 0 auto;
}
.mobile_header .logo_area img {
  width: 100%;
  height: auto;
}
.mobile_header a.menu-btn,
.mobile_header a.cart_link {
  color: var(--color-body);
  left: 2.4rem;
  position: absolute;
  text-decoration: none;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 2.4rem;
}
.mobile_header a.cart_link {
  left: auto;
  right: .8rem;
}
#menu .mm-list a {
  color: var(--header-mobile-nav-color);
  font-family: var(--header-nav-family);
  padding: 1.6rem;
  font-size: var(--header-nav-size);
  line-height: 1;
  font-weight: var(--header-nav-weight);
  text-decoration: none;
  display: block;
  text-transform: none;
}
.mm-ismenu {
  background: var(--header-mobile-nav-bg);
}
.mm-menu {
  color: hsl(0 0% 100%);
}
.mm-menu .mm-list>li:after {
  border-color: rgba(0, 0, 0, 0.15);
}
.mm-menu .mm-list>li>a.mm-subclose {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.3);
}
.mm-menu .mm-list>li>a.mm-subopen:after,
.mm-menu .mm-list>li>a.mm-subclose:before {
  border-color: #fff;
}
.mm-menu .mm-list>li>a.mm-subopen:before {
  border-color: rgba(0, 0, 0, 0.15);
}
.mm-menu .mm-list>li.mm-selected>a:not(.mm-subopen),
.mm-menu .mm-list>li.mm-selected>span {
  background: rgba(0, 0, 0, 0.1);
}
.mm-menu .mm-list li.mm-label {
  background: rgba(255, 255, 255, 0.05);
}
.mm-menu.mm-vertical .mm-list li.mm-opened>a.mm-subopen,
.mm-menu.mm-vertical .mm-list li.mm-opened>ul {
  background: rgba(255, 255, 255, 0.05);
}
/* ---------- 7. Footer ---------- */
footer {
  background: var(--footer-bg);
  margin-top: auto;
  padding: 3.2rem var(--section-inline) 1.6rem;
}
footer .content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem 3.2rem;
}
footer a.logo {
  width: var(--footer-logo-width);
  display: block;
}
footer a.logo img {
  width: 100%;
  height: auto;
}
footer .h4 {
  color: var(--footer-heading-color);
  font-size: var(--footer-heading-size);
  line-height: 1;
  margin: 0 0 .8rem;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer ul li,
footer ul li a {
  margin: 0;
  padding: 0;
  color: var(--footer-body-color);
  font-size: var(--footer-body-size);
}
footer ul li a {
  text-decoration: none;
}
footer ul li a:hover {
  color: var(--footer-body-color-hover);
}
footer .sitemap {
  width: 32rem;
}
footer .sitemap ul {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
}
footer .sitemap ul li {
  width: calc(50% - (1.6rem * 2 / 3));
}
footer .footer-contact,
footer .footer-social {
  width: auto;
}
footer .social_media ul {
  gap: calc(1.6rem / 2);
  justify-content: flex-start;
}
footer .social_media ul li a {
  width: 2.8rem;
  height: 2.8rem;
}
footer .social_media ul li a {
  background: var(--footer-social-bg);
  color: var(--footer-social-color);
}
footer .social_media ul li a:hover {
  background: var(--footer-social-bg-hover);
  color:  var(--footer-social-color-hover);
}
footer .social_media ul li a i {
  font-size: 1.6rem;
}
footer p.signature {
  width: 100%;
  text-align: center;
  color: var(--footer-body-color);
  font-size: var(--footer-signature-size);
  line-height: 1.2;
  padding-top: 1.6rem;
  border-top: 2px solid hsla(0 0% 100% / .08);
  margin: 0;
}
footer p.signature a {
  color: var(--footer-body-color);
  text-decoration: none;
}
footer p.signature a:hover {
  color: var(--footer-body-color-hover);
}
/* Vertical Footer */
footer.vertical-footer .content{
  flex-direction: column;
  gap: 2.4rem;
  align-items: center;
}
footer.vertical-footer .sitemap,
footer.vertical-footer .footer-contact,
footer.vertical-footer .footer-social{
  width: 100%;
  padding-top: 2.4rem;
  border-top: 2px solid hsla(0 0% 100% / .08);
}
footer.vertical-footer .sitemap ul{
  justify-content: space-around;
}
footer.vertical-footer .sitemap ul li{
  width: auto;
}
footer.vertical-footer .footer-contact ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
footer.vertical-footer .footer-contact li{
  text-align: center;
  width: 33.3333%;
}
footer.vertical-footer .footer-contact strong{
  display: block;
}
footer.vertical-footer .h4{
  text-align: center;
  margin: 0 0 1.2rem;
}
footer.vertical-footer .social_media ul{
  justify-content: center;
}
@media screen and (max-width: 1024px) {
  footer{
    padding: 2.4rem 2.4rem 1.6rem;
  }
  footer .content {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    text-align: center;
  }
  footer .footer-social,
  footer .footer-contact,
  footer .sitemap,
  footer .sitemap ul li {
    width: 100%;
  }
  footer .social_media ul {
    justify-content: center;
  }
  footer.vertical-footer .footer-contact li,
  footer.vertical-footer .sitemap ul li{
    width: 100%;
  }
  footer.vertical-footer .footer-contact ul,
  footer.vertical-footer .sitemap ul{
    gap: 1.2rem;
  }
}
/* ---=== Text Link ===--- */
.button.text-link {
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    transition: var(--animate-medium);
    background: none;
    border: none;
    color: var(--font-color-body);
    padding: 0;
    height: auto;
}
.button.text-link:hover {
    color: var(--font-color-body);
    background: none;
}
.button.text-link::before {
    content: '';
    position: initial;
    display: block;
    width: 2rem;
    height: .2rem;
    border: none;
    background: var(--font-color-body);
    transition: var(--animate-medium);
}
.button.text-link:hover::before {
    width: 3.2rem;
}
.button.text-link::after{
    display: none;
}
/* ===--- Hero Styles ---=== */
.banner-container-constrained{
  position: relative;
  height: var(--hero-height);
  background: var(--color-bg);
}
.banner-container-constrained.colour{
  background: var(--color-main);
}
.banner-container-constrained.dark{
  background: var(--color-bg-dark);
}
.banner-container-constrained.light{
  background: var(--color-bg-light);
}
ul.ms-banner-constrained{
  display: inline-flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}
ul.ms-banner-constrained li{
  list-style: none;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  margin: 0;
  opacity: 0;
}
.banner-container-constrained li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--color-bg);
  opacity: var(--hero-overlay-opacity);
}
.banner-container-constrained.light li:after{
  background: var(--color-bg-light);
}
.banner-container-constrained.dark li:after{
  background: var(--color-bg-dark);
}
.banner-container-constrained.colour li:after{
  background: var(--color-main);
}
.banner-container-constrained .img-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.banner-container-constrained .img-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.banner-container-constrained .banner-details{
  position: absolute;
  width: 100%;
  max-width: 126.4rem;
  padding-inline: 3.2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.banner-container-constrained .banner-left .banner-details{
  justify-content: flex-start;
  text-align: left;
}
.banner-container-constrained .banner-right .banner-details{
  justify-content: flex-end;
  text-align: right;
}
.banner-container-constrained .banner-content{
  width: 100%;
  max-width: 72rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner-container-constrained .banner-left .banner-content{
  align-items: flex-start;
}
.banner-container-constrained .banner-right .banner-content{
  align-items: flex-end;
}
.banner-container-constrained .h6{
  margin: 0;
}
.banner-container-constrained .h0{
  margin: 0 0 2.4rem;
}
.banner-container-constrained p{
  margin: 0 0 3.2rem;
  max-width: 42rem;
  width: 100%;
}
.banner-container-constrained .button{
  margin: 0;
}
.banner-container-constrained.banner-bar li:after {
  display: none;
}
.banner-container-constrained.banner-bar .img-wrapper{
  width: 60%;
  left: 40%;
}
.banner-container-constrained.banner-bar .banner-right .img-wrapper{
  left: 0%;
}
.banner-container-constrained.banner-bar .img-wrapper:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--color-bg);
  opacity: var(--hero-overlay-opacity);
}
.banner-container-constrained.banner-bar.light .img-wrapper:after{
  background: var(--color-bg-light);
}
.banner-container-constrained.banner-bar.colour .img-wrapper:after{
  background: var(--color-main);
}
.banner-container-constrained.banner-bar.dark .img-wrapper:after{
  background: var(--color-bg-dark);
}
.banner-container-constrained.banner-bar .banner-details{
  justify-content: flex-start;
  text-align: left;
}
.banner-container-constrained.banner-bar .banner-right .banner-details {
  justify-content: flex-end;
  text-align: right;
}
.banner-container-constrained.banner-bar .banner-content{
  align-items: flex-start;
  max-width: 100%;
}
.banner-container-constrained.banner-bar .banner-right .banner-content{
  align-items: flex-end;
}
.banner-container-constrained.banner-bar .h6,
.banner-container-constrained.banner-bar .h0{
  max-width: 72rem;
}
.banner-container-constrained.banner-bar p{
  max-width: 100%;
  width: 40%;
  padding-right: 4rem;
}
.banner-container-constrained.banner-bar .banner-right p{
  padding-inline: 4rem 0;
}
.banner-container-constrained.banner-bar.banner-trans-bar .img-wrapper {
  width: 100%;
  left: 0;
}
.banner-container-constrained.banner-bar.banner-trans-bar .img-wrapper:before{
  content: "";
  position: absolute;
  width: 40%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--color-bg);
  opacity: var(--hero-overlay-opacity);
}
.banner-container-constrained.banner-bar.banner-trans-bar.light .img-wrapper:before{
  background: var(--color-bg-light);
}
.banner-container-constrained.banner-bar.banner-trans-bar.colour .img-wrapper:before{
  background: var(--color-main);
}
.banner-container-constrained.banner-bar.banner-trans-bar.dark .img-wrapper:before{
  background: var(--color-bg-dark);
}
.banner-container-constrained.banner-bar.banner-trans-bar .banner-right .img-wrapper:before{
  left: auto;
  right: 0;
}
.banner-container-constrained.banner-box-content li:after{
  display: none;
}
.banner-container-constrained.banner-box-content .banner-content{
  max-width: 102.4rem;
  padding: 3.2rem;
  position: relative;
  z-index: 1;
}
.banner-container-constrained.banner-box-content .banner-content::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: var(--color-bg);
  opacity: var(--hero-overlay-opacity);
}
.banner-container-constrained.banner-box-content.light .banner-content::after{
  background: var(--color-bg-light);
}
.banner-container-constrained.banner-box-content.colour .banner-content::after{
  background: var(--color-main);
}
.banner-container-constrained.banner-box-content.dark .banner-content::after{
  background: var(--color-bg-dark);
}
.banner-container-constrained.banner-float li:after{
  display: none;
}
.banner-container-constrained.banner-float .img-wrapper {
  width: 40%;
  max-width: 48rem;
  height: calc(100% - 6.4rem);
  position: absolute;
  top: 3.2rem;
  left: 60%;
  z-index: 0;
}
.banner-container-constrained.banner-float .banner-right .img-wrapper{
  left: auto;
  right: 60%;
}
.banner-container-constrained.banner-float .banner-details{
  justify-content: flex-start;
  text-align: left;
}
.banner-container-constrained.banner-float .banner-right .banner-details {
  justify-content: flex-end;
  text-align: right;
}
.banner-container-constrained.banner-float .banner-content{
  width: 60%;
  padding-right: 8rem;
  align-items: flex-start;
}
.banner-container-constrained.banner-float .banner-right .banner-content {
  align-items: flex-end;
  padding-inline: 8rem 0;
}
.banner-container-constrained .banner-next,
.banner-container-constrained .banner-previous,
.banner-container-constrained .banner-pause {
    top: var(--hero-nav-next-postition-top);
    right: var(--hero-nav-next-postition-right);
    bottom: var(--hero-nav-next-postition-bottom);
    left: var(--hero-nav-next-postition-left);
    border-top: var(--hero-nav-border-top);
    border-right: var(--hero-nav-border-right);
    border-bottom: var(--hero-nav-border-bottom);
    border-left: var(--hero-nav-border-left);
    border-radius: var(--hero-nav-radius);
    background: var(--hero-nav-bg);
    width: var(--hero-nav-width);
    height: var(--hero-nav-height);
    opacity: 0;
    position: absolute;
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: var(--animate-medium);
    z-index: 2;
}
.banner-container-constrained .banner-next:hover,
.banner-container-constrained .banner-previous:hover,
.banner-container-constrained .banner-pause:hover{
  background: var(--hero-nav-bg-hover);
}
.banner-container-constrained .banner-previous {
    top: var(--hero-nav-prev-postition-top);
    right: var(--hero-nav-prev-postition-right);
    bottom: var(--hero-nav-prev-postition-bottom);
    left: var(--hero-nav-prev-postition-left);
}
.banner-container-constrained .banner-pause {
    top: var(--hero-nav-pause-postition-top);
    right: var(--hero-nav-pause-postition-right);
    bottom: var(--hero-nav-pause-postition-bottom);
    left: var(--hero-nav-pause-postition-left);
    color: var(--hero-nav-color);
}
.banner-container-constrained.dark .banner-pause,
.banner-container-constrained.colour .banner-pause{
    color: var(--hero-nav-color-hover);
}
.banner-container-constrained:hover .banner-next,
.banner-container-constrained:hover .banner-previous,
.banner-container-constrained:hover .banner-pause {
  opacity: 1;
  cursor: pointer;
}
.banner-container-constrained .banner-next svg,
.banner-container-constrained .banner-previous svg {
  width: auto;
  height: var(--hero-nav-icon-height);
  fill: var(--hero-nav-color);
  transition: var(--animate-medium);
}
.banner-container-constrained.dark .banner-next svg,
.banner-container-constrained.dark .banner-previous svg,
.banner-container-constrained.colour .banner-next svg,
.banner-container-constrained.colour .banner-previous svg{
  fill: var(--hero-nav-color);
}
.banner-container-constrained .banner-next svg {
  transform: rotate(180deg);
}
.banner-container-constrained .banner-next:hover svg,
.banner-container-constrained .banner-previous:hover svg {
  fill: var(--hero-nav-color-hover);
}
.banner-container-constrained.dark .banner-next:hover svg,
.banner-container-constrained.dark .banner-previous:hover svg,
.banner-container-constrained.colour .banner-next:hover svg,
.banner-container-constrained.colour .banner-previous:hover svg {
  fill: var(--hero-nav-color-hover);
}
@media screen and (max-width: 1264px){
  .banner-container-constrained.banner-float .img-wrapper{
    left: auto;
    right: 3.2rem;
    width: calc(40% - 3.2rem);
  }
  .banner-container-constrained.banner-float .banner-right .img-wrapper {
    left: 3.2rem;
    right: auto;
    width: calc(40% - 3.2rem);
  }
}
@media screen and (max-width: 1024px){
  .banner-container-constrained{
    height: auto;
  }
  .banner-container-constrained li::after {
    display: none;
  }
  .banner-container-constrained .img-wrapper {
    position: initial;
    aspect-ratio: 1366 / 768;
    width: 100%;
    height: auto;
  }
  .banner-container-constrained.banner-bar .img-wrapper{
    width: 100%;
    position: relative;
    left: 0;
  }
  .banner-container-constrained .banner-details,
  .banner-container-constrained .banner-left .banner-details,
  .banner-container-constrained .banner-right .banner-details {
    position: initial;
    transform: none;
    padding: 4.8rem 3.2rem;
    justify-content: center;
    text-align: center;
  }
  .banner-container-constrained.banner-bar .banner-right .banner-details,
  .banner-container-constrained.banner-bar .banner-details{
    justify-content: center;
    text-align: center;
    padding-top: 0;
    margin-top: -6.5rem;
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
  }
  .banner-container-constrained.banner-bar p{
    padding: 0;
  }
  .banner-container-constrained.banner-box-content .banner-content::after,
  .banner-container-constrained.banner-bar.banner-trans-bar .img-wrapper:before{
    display: none;
  }
  .banner-container-constrained .banner-details .banner-content,
  .banner-container-constrained .banner-left .banner-details .banner-content,
  .banner-container-constrained .banner-right .banner-details .banner-content {
    width: 100%;
    align-items: center;
  }
  .banner-container-constrained.banner-float li{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.2rem;
  }
  .banner-container-constrained.banner-float .banner-right .img-wrapper,
  .banner-container-constrained.banner-float .img-wrapper{
    position: initial;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .banner-container-constrained.banner-float .banner-right .banner-details,
  .banner-container-constrained.banner-float .banner-details{
    justify-content: center;
    text-align: center;
    padding: 3.2rem 0 0;
  }
  .banner-container-constrained.banner-float .banner-right .banner-content,
  .banner-container-constrained.banner-float .banner-content{
    padding: 0;
  }
  .banner-container-constrained .banner-next,
  .banner-container-constrained .banner-previous,
  .banner-container-constrained .banner-pause {
    display: none !important;
  }
}
/* ----- Banner pagination ----- */
.banner_pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 1rem;
  color: var(--hero-pagination-color);
  z-index: 1;
}
.banner_pagination>div {
  margin: 0 .3rem;
  cursor: pointer;
}
.banner_pagination>div:hover {
  color: var(--hero-pagination-color-hover);
}
.banner_pagination>.active {
  color: var(--hero-pagination-color-active);
}
@media screen and (max-width: 1024px) {
  .banner_pagination {
    display: none;
  }
}
/* ===--- Inner Header ---=== */
.inner_header {
  width: 100%;
  height: var(--inner-header-height);
  min-height: 24rem;
  background: url(/assets/images/layout/inner_header.jpg) center center no-repeat;
  background-size: cover;
}
/* ===--- Forms ---=== */
form{
  display: flex;
  gap: var(--form-gap);
  flex-wrap: wrap;
}
fieldset{
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  position: relative;
}
label{
  font-size: 1.4rem;
  line-height: 1;
  color: var(--font-color-body);
  opacity: .64;
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 1;
}
textarea,
input{
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: .4rem;
  width: 100%;
  padding: 2.8rem .8rem .8rem;
}
textarea:focus,
textarea:focus-within,
textarea:focus-visible,
textarea:target,
input:focus,
input:focus-within,
input:focus-visible,
input:target,
.light textarea:focus,
.light textarea:focus-within,
.light textarea:focus-visible,
.light textarea:target,
.light input:focus,
.light input:focus-within,
.light input:focus-visible,
.light input:target{
  outline: none;
  border-color: var(--color-main);
  box-shadow: var(--shadow);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--font-color-body) !important;
  background: var(--color-bg) !important;
  color: var(--font-color-body) !important;
  -webkit-box-shadow: 0 0 0px 40rem var(--color-bg) inset !important;
}
.form_holder .message {
  margin: 0 0 1.6rem 0;
}
.form_holder .form_error {
  background: var(--color-danger);
  color: white;
  padding: 1.6rem;
  margin: 0 0 1.6rem;
}
form .form-terms {
  font-size: 1.2rem;
  line-height: 1.1;
  margin: 0;
  width: 100%;
  text-align: left;
  color: var(--font-color-body);
}
.light form .form-terms{
  color: var(--font-color-body-light);
}
.dark form .form-terms{
  color: var(--font-color-body-dark);
}
.main form .form-terms{
  color: var(--font-color-body-main);
}
form .full_width{
  width: 100%;
}
form .half_width{
  width: calc(50% - calc(var(--form-gap) / 2));
}
form .third_width{
  width: calc(33.333% - calc(var(--form-gap) * 2 / 3));
}
@media screen and (max-width: 1024px) {
  form .half_width,
  form .third_width{
    width: 100%;
  }
}
/* ----- Dynamic form: checkbox group ----- */
form .form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  width: 100%;
  padding-top: 3.2rem;
}
.form-checkbox-option {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--font-color-body);
  cursor: pointer;
  position: initial;
}
.light .form-checkbox-option {
  color: var(--font-color-body-light);
}
.dark .form-checkbox-option {
  color: var(--font-color-body-dark);
}
.main .form-checkbox-option {
  color: var(--font-color-body-main);
}
.form-checkbox-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: .3rem;
}
.light .form-checkbox-option input[type="checkbox"] {
  background: var(--color-bg-light);
  border-color: var(--color-border-light);
}
.dark .form-checkbox-option input[type="checkbox"] {
  background: var(--color-bg-dark);
  border-color: var(--color-border-dark);
}
.main .form-checkbox-option input[type="checkbox"] {
  background: var(--color-bg-main);
  border-color: var(--color-border-main);
}
.form-checkbox-option input[type="checkbox"]:hover {
  border-color: var(--color-main);
}
.main .form-checkbox-option input[type="checkbox"]:hover {
  border-color: var(--color-bg);
}
.form-checkbox-option input[type="checkbox"]:active {
  border-color: var(--color-main);
  transform: scale(0.92);
}
.main .form-checkbox-option input[type="checkbox"]:active {
  border-color: var(--color-bg);
}
.form-checkbox-option input[type="checkbox"]:checked {
  background: var(--color-main);
  border-color: var(--color-main);
}
.main .form-checkbox-option input[type="checkbox"]:checked {
  background: var(--color-bg);
  border-color: var(--color-bg);
}
.form-checkbox-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--color-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.main .form-checkbox-option input[type="checkbox"]:checked::after {
  border-color: var(--color-main);
}
.form-checkbox-option input[type="checkbox"]:focus,
.form-checkbox-option input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow);
}
/* Custom Form Checkbox */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 32px;
  color: var(--font-color-body);
  margin-bottom: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 2.4rem;
  display: flex;
  align-items: center;
}
.light .checkbox-container{
  color: var(--font-color-body-light);
}
.main .checkbox-container{
  color: var(--font-color-body-main);
}
.dark .checkbox-container{
  color: var(--font-color-body-dark);
}
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 2.4rem;
  width: 2.4rem;
  background-color: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: .4rem;
}
.light .checkmark {
  background-color: var(--color-bg-light);
  border: 2px solid var(--color-border-light);
}
.main .checkmark {
  background-color: var(--color-bg-main);
  border: 2px solid var(--color-border-main);
}
.dark .checkmark {
  background-color: var(--color-bg-dark);
  border: 2px solid var(--color-border-dark);
}
.checkbox-container:hover input ~ .checkmark,
.light .checkbox-container:hover input ~ .checkmark,
.dark .checkbox-container:hover input ~ .checkmark {
  border-color: var(--color-main);
}
.main .checkbox-container:hover input ~ .checkmark {
  border-color: var(--color-bg);
}
.checkbox-container input:checked ~ .checkmark,
.light .checkbox-container input:checked ~ .checkmark,
.dark .checkbox-container input:checked ~ .checkmark {
  background-color: var(--color-main);
  border-color: var(--color-main);
}
.main .checkbox-container input:checked ~ .checkmark {
  background-color: var(--color-bg);
  border-color: var(--color-bg);
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}
.checkbox-container .checkmark:after {
  left: 7px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--color-bg);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.main .checkbox-container .checkmark:after{
  border: solid var(--color-main);
}
/* Custom Form Radio Button */
.radio-container {
  display: block;
  position: relative;
  padding-left: 32px;
  color: var(--font-color-body);
  margin-bottom: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 2.4rem;
  display: flex;
  align-items: center;
}
.light .radio-container{
  color: var(--font-color-body-light);
}
.main .radio-container{
  color: var(--font-color-body-main);
}
.dark .radio-container{
  color: var(--font-color-body-dark);
}
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.radio-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 2.4rem;
  width: 2.4rem;
  background-color: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 50%;
}
.light .radio-checkmark{
  background-color: var(--color-bg-light);
  border: 2px solid var(--color-border-light);
}
.main .radio-checkmark{
  background-color: var(--color-bg-main);
  border: 2px solid var(--color-border-main);
}
.dark .radio-checkmark{
  background-color: var(--color-bg-dark);
  border: 2px solid var(--color-border-dark);
}
.radio-container:hover input ~ .radio-checkmark,
.light .radio-container:hover input ~ .radio-checkmark,
.dark .radio-container:hover input ~ .radio-checkmark {
  border-color: var(--color-main);
}
.main .radio-container:hover input ~ .radio-checkmark {
  border-color: var(--color-bg);
}
.radio-container input:checked ~ .radio-checkmark,
.light .radio-container input:checked ~ .radio-checkmark,
.dark .radio-container input:checked ~ .radio-checkmark {
  background-color: var(--color-main);
  border-color: var(--color-main);
}
.main .radio-container input:checked ~ .radio-checkmark {
  background-color: var(--color-bg);
  border-color: var(--color-bg);
}
.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.radio-container input:checked ~ .radio-checkmark:after {
  display: block;
}
.radio-container .radio-checkmark:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-bg);
}
.light .radio-container .radio-checkmark:after{
    background: var(--color-bg-light);
}
.dark .radio-container .radio-checkmark:after{
    background: var(--color-bg-dark);
}
.main .radio-container .radio-checkmark:after{
    background: var(--color-bg-main);
}
/* Custom Form Switch */
.radio-container.switch-container,
.checkbox-container.switch-container{
  padding-left: 5.6rem;
}
.radio-container.switch-container .radio-checkmark,
.checkbox-container.switch-container .checkmark{
  width: 4.8rem;
  border-radius: 1.2rem;
}
.radio-container.switch-container .radio-checkmark::after,
.checkbox-container.switch-container .checkmark:after {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  border: none;
  background: var(--color-bg-light);
  top: 1px;
  left: 1px;
  transform: none;
  border-radius: 50%;
  transition: var(--animate-fast);
}
.radio-container.switch-container:hover input ~ .radio-checkmark:after,
.checkbox-container:hover input ~ .checkmark:after{
  background: var(--color-main);
}
.radio-container.switch-container input:checked ~ .radio-checkmark:after,
.checkbox-container.switch-container input:checked ~ .checkmark:after{
  background: var(--color-main);
  left: calc(100% - 1.9rem);
}
/* Baseline Form */
.baseline-form label{
  position: initial;
  color: var(--font-color-body);
  margin: 0 0 .4rem;
  display: block;
}
.light .baseline-form label{
  color: var(--font-color-body-light);
}
.dark .baseline-form label{
  color: var(--font-color-body-dark);
}
.main .baseline-form label{
  color: var(--font-color-body-main);
}
.baseline-form .select-selected,
.baseline-form input,
.baseline-form textarea{
  border: none;
  border-radius: 0;
  background: var(--color-bg-light);
  border-bottom: 2px solid var(--color-main);
  padding: .8rem;
}
.light .baseline-form .select-selected,
.light .baseline-form input,
.light .baseline-form textarea{
  background: var(--color-bg);
  border-color: var(--color-main);
}
.dark .baseline-form .select-selected,
.dark .baseline-form input,
.dark .baseline-form textarea{
  background: hsla(0 0% 100% / .08);
  border-color: var(--color-main);
}
.main .baseline-form .select-selected,
.main .baseline-form input,
.main .baseline-form textarea{
  background: hsla(0 0% 100% / .08);
  border-color: var(--color-bg);
}
/* Outline Form */
.outline-form label{
  position: initial;
  color: var(--font-color-body);
  margin: 0 0 .4rem;
  display: block;
}
.light .outline-form label{
  color: var(--font-color-body-light);
}
.dark .outline-form label{
  color: var(--font-color-body-dark);
}
.main .outline-form label{
  color: var(--font-color-body-main);
}
.outline-form .select-selected,
.outline-form input,
.outline-form textarea{
  border-radius: 0;
  background: var(--color-bg-light);
  border: 2px solid var(--color-border);
  padding: .8rem;
}
.light .outline-form .select-selected,
.light .outline-form input,
.light .outline-form textarea{
  background: var(--color-bg);
  border: 2px solid var(--color-border-light);
}
.dark .outline-form .select-selected,
.dark .outline-form input,
.dark .outline-form textarea{
  background: hsla(0 0% 100% / .08);
  border: 2px solid var(--color-border-dark);
}
.main .outline-form .select-selected,
.main .outline-form input,
.main .outline-form textarea{
  background: hsla(0 0% 100% / .08);
  border: 2px solid var(--color-border-main);
}
/* Basic Form */
.basic-form label{
  position: initial;
  color: var(--font-color-body);
  margin: 0 0 .4rem;
  display: block;
  opacity: .64;
}
.light .basic-form label{
  color: var(--font-color-body-light);
}
.main .basic-form label{
  color: var(--font-color-body-main);
}
.dark .basic-form label{
  color: var(--font-color-body-dark);
}
.basic-form .select-selected,
.basic-form input,
.basic-form textarea{
  border-radius: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: .8rem;
}
.light .basic-form .select-selected,
.light .basic-form input,
.light .basic-form textarea{
  background: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
}
.main .basic-form .select-selected,
.main .basic-form input,
.main .basic-form textarea{
  background: var(--color-main);
  border: 1px solid var(--color-border-main);
}
.dark .basic-form .select-selected,
.dark .basic-form input,
.dark .basic-form textarea{
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border-dark);
}
/* ----- Placeholder  ------ */
::-webkit-input-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
::-moz-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
:-ms-input-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
:-moz-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
.light ::-webkit-input-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.light ::-moz-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.light :-ms-input-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.light :-moz-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.dark ::-webkit-input-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.dark ::-moz-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.dark :-ms-input-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.dark :-moz-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.main ::-webkit-input-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
.main ::-moz-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
.main :-ms-input-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
.main :-moz-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
/* ----- Validation ----- */
/* Validating Entries */
.form_holder input:not([type="submit"]):focus:valid,
.form_holder textarea:focus:valid,
.form_holder select:focus:valid {
  box-shadow: 0px 0px 5px var(--color-alert);
}
/* Invalidating Entries */
.form_holder input:not([type="submit"]):focus:invalid,
.form_holder textarea:focus:invalid,
.form_holder select:focus:invalid {
  box-shadow: 0px 0px 5px var(--color-danger);
}
/* ----- Date Picker ----- */
.ui-datepicker .ui-datepicker-header {
  border: none;
  border-radius: 0;
  background-image: none;
  background: var(--color-main);
}
#ui-datepicker-div {
  padding: 0;
  border: 3px solid var(--color-main);
  border-radius: 0 0 .8rem .8rem;
}
.ui-datepicker .ui-datepicker-title {
  color: white;
}
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
  background-color: transparent !important;
  background-image: none;
  border: none;
}
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  background: transparent;
  width: 2rem;
  height: 2rem;
  transform: rotate(45deg);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev span {
  transform: rotate(-135deg);
}
.ui-datepicker .ui-datepicker-next:hover span,
.ui-datepicker .ui-datepicker-prev:not(.ui-state-disabled):hover span {
  background: white;
}
.ui-datepicker .ui-datepicker-next span::after,
.ui-datepicker .ui-datepicker-prev span::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-5px, -3px);
}
.ui-datepicker .ui-datepicker-next:hover span::after,
.ui-datepicker .ui-datepicker-prev:not(.ui-state-disabled):hover span::after {
  border-color: var(--color-main);
}
.ui-datepicker table {
  margin: 0;
}
.ui-datepicker tbody tr td {
  border: 0;
  padding: 0;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}
.ui-datepicker tbody tr td:last-child {
  border-right: none;
}
.ui-datepicker tbody tr:last-child td {
  border-bottom: none;
}
.ui-datepicker th {
  padding: 5px 0;
  background: var(--color-bg-light);
  border-right: 2px solid #eaeaea;
  border-bottom: 2px solid #eaeaea;
}
.ui-datepicker th:last-child {
  border-right: none
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: none;
}
table.ui-datepicker-calendar span {
  border: none !important;
  font-family: var(--font-body);
  text-transform: uppercase;
}
.ui-state-highlight,
.ui-widget-content {
  font-family: var(--font-body);
}
.ui-datepicker .ui-datepicker-title {
  text-transform: capitalize;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background-image: none;
  color: white;
  background-color: #d5d1d1;
}
.ui-state-default:hover,
.ui-widget-content .ui-state-default:hover,
.ui-widget-header .ui-state-default:hover {
  color: var(--font-color-body);
  background: var(--color-bg-light);
}
.ui-state-disabled span,
.ui-widget-content .ui-state-disabled span,
.ui-widget-header .ui-state-disabled span {
  color: var(--font-color-body);
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border-color: var(--color-main);
  background-image: none;
  background-color: hsl(0 0% 100%);
}
td.ui-datepicker-current-day a {
  background: var(--color-main) !important;
  color: hsl(0 0% 100%) !important;
}
td.ui-datepicker-current-day a:hover {
  background: var(--color-bg-dark) !important;
  color: hsl(0 0% 100%) !important;
}
td.ui-datepicker-days-cell-over.ui-datepicker-current-day.ui-datepicker-today a.ui-state-default.ui-state-highlight.ui-state-active {
  color: hsl(0 0% 20%) !important;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: none;
  background: var(--color-main);
  color: white;
}
/* ----- Custom File Uploader ----- */
.resume {
  text-align: center;
  padding: 3.2rem 1.6rem;
  background: var(--color-bg-light);
  border-bottom: 3px solid var(--color-main);
}
.resume input[type="file"] {
  display: none;
}
.resume label {
  cursor: pointer;
  color: hsla(0 0% 0% / .35)
}
/* ---------- 12. Messages ---------- */
div.message_wrapper {
  margin: 0 0 1.6rem;
}
.content h2.hide_message {
  display: none;
}
.content h2.message_positive {
  width: 100%;
  color: white !important;
  background: var(--color-success) !important;
  padding: 1.6rem;
}
.content h2.message_negative {
  width: 100%;
  color: white !important;
  background: var(--color-danger) !important;
  padding: 1.6rem;
}
.message_wrapper a.message_link {
  color: white !important;
  text-decoration: underline;
}
.message_wrapper a.message_link:hover {
  text-decoration: none;
}

/* ===--- Flex ---=== */
.flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flex-gap);
}
.flex>* {
    width: 100%;
}
.flex.flex-6>* {
    width: calc(calc(100% / 6) - calc(var(--flex-gap) * 5 / 6));
}
.flex.flex-5>* {
    width: calc(calc(100% / 5) - calc(var(--flex-gap) * 4 / 5));
}
.flex.flex-4>* {
    width: calc(calc(100% / 4) - calc(var(--flex-gap) * 3 / 4));
}
.flex.flex-3>* {
    width: calc(calc(100% / 3) - calc(var(--flex-gap) * 2 / 3));
}
.flex.flex-2>* {
    width: calc(calc(100% / 2) - calc(var(--flex-gap) / 2));
}
@media screen and (max-width: 1024px) {
    .flex.flex-6>*,
    .flex.flex-5>* {
        width: calc(calc(100% / 3) - calc(var(--flex-gap) * 2 / 3));
    }
    .flex.flex-4>*,
    .flex.flex-3>* {
        width: calc(calc(100% / 2) - calc(var(--flex-gap) / 2));
    }
    .flex.flex-2>* {
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .flex.flex-6>*,
    .flex.flex-5>* {
        width: calc(calc(100% / 2) - calc(var(--flex-gap) / 2));
    }
    .flex.flex-3>* {
        width: 100%;
    }
}
@media screen and (max-width: 320px) {
    .flex.flex-4>* {
        width: 100%;
    }
}
/* ===--- Grid ---=== */
.grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(12, 1fr);
}
.-grid .col-1 {
    grid-column: span 1;
}
.grid .col-2 {
    grid-column: span 2;
}
.grid .col-3 {
    grid-column: span 3;
}
.grid .col-4 {
    grid-column: span 4;
}
.grid .col-5 {
    grid-column: span 5;
}
.grid .col-6 {
    grid-column: span 6;
}
.grid .col-7 {
    grid-column: span 7;
}
.grid .col-8 {
    grid-column: span 8;
}
.grid .col-9 {
    grid-column: span 9;
}
.grid .col-10 {
    grid-column: span 10;
}
.grid .col-11 {
    grid-column: span 11;
}
.grid .col-12 {
    grid-column: span 12;
}
@media screen and (max-width: 1024px){
  .grid{
    grid-template-columns: repeat(8, 1fr);
  }
  .col-1{
    grid-column: span 1;
  }
  .col-2 {
    grid-column: span 2;
  }
  .col-3,
  .col-4 {
    grid-column: span 4;
  }
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11 {
    grid-column: span 8;
  }
}
@media screen and (max-width: 768px){
  .grid{
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-12);
  }
  .col-1{
    grid-column: span 1;
  }
  .col-2,
  .col-3 {
    grid-column: span 2;
  }

  .col-4 {
    grid-column: span 4;
  }
}
@media screen and (max-width: 520px){
  .col-1{
    grid-column: span 2;
  }
  .col-2,
  .col-3 {
    grid-column: span 4;
  }
}
/* ---=== Cards ===--- */
.card{
    padding-top: var(--card-padding-top);
    padding-right: var(--card-padding-right);
    padding-bottom: var(--card-padding-bottom);
    padding-left: var(--card-padding-left);
    border-radius: var(--card-radius);
    background: var(--card--bg);
    box-shadow: var(--card-shadow);
    overflow: var(--card-overflow);
    border-top: var(--card-border-top);
    border-right: var(--card-border-right);
    border-bottom: var(--card-border-bottom);
    border-left: var(--card-border-left);
}
.light .card{
    background: var(--card--bg-light);
}
.dark .card{
    background: var(--card--bg-dark);
}
.main .card{
    background: var(--card--bg-main);
}
a.card{
    text-decoration: none;
}
.card img{
  width: 100%;
  height: auto;
}
.card .content-wrapper{
  padding-top: var(--card-content-padding-top);
  padding-right: var(--card-content-padding-right);
  padding-bottom: var(--card-content-padding-bottom);
  padding-left: var(--card-content-padding-left);
}
.card h3{
  font-size: var(--card-title-size);
  line-height: 1.1;
  margin: 0 0 1.2rem;
}
.card h3 a{
  text-decoration: none;
  color: var(--font-color-heading);
}
.light .card h3 a{
  color: var(--font-color-heading-light);
}
.dark .card h3 a{
  color: var(--font-color-heading-dark);
}
.main .card h3 a{
  color: var(--font-color-heading-main);
}
.card h3 a:hover{
  color: var(--card-title-color-hover);
}
.light .card h3 a:hover{
  color: var(--card-title-color-hover-light);
}
.main .card h3 a:hover{
  color: var(--card-title-color-hover-main);
}
.dark .card h3 a:hover{
  color: var(--card-title-color-hover-dark);
}
.card p{
    margin: 0;
}
.card a.button{
  margin: 0;
}
/* Inline Card */
.inline-card .card{
  display: flex;
}
.inline-card .card .img-wrapper{
  width: 40%;
  height: 100%;
  border-right: var(--card-border-right);
}
.light .inline-card .card,
.light .inline-card .card .img-wrapper{
  border-color: var(--color-border-light);
}
.main .inline-card .card,
.main .inline-card .card .img-wrapper{
  border-color: var(--color-border-main);
}
.dark .inline-card .card,
.dark .inline-card .card .img-wrapper{
  border-color: var(--color-border-dark);
}
.inline-card .card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inline-card .card .content-wrapper{
  width: 60%;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.inline-card .card p{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media screen and (max-width: 640px){
  .inline-card .card{
    flex-direction: column;
  }
  .inline-card .card .img-wrapper{
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-right: none;
    border-bottom: var(--card-border-bottom);
  }
  .light .inline-card .card .img-wrapper{
    border-color: var(--color-border-light);
  }
  .dark .inline-card .card .img-wrapper{
    border-color: var(--color-border-dark);
  }
  .main .inline-card .card .img-wrapper{
    border-color: var(--color-border-main);
  }
  .inline-card .card .content-wrapper{
    width: 100%;
  }
}
/* Icon Card */
.icon-card .card{
  position: relative;
  margin-top: calc(var(--card-icon-height) / 2);
  padding-top: calc((var(--card-icon-height) / 2) + var(--card-padding-top));
}
.icon-card .card .img-wrapper{
  width: var(--card-icon-wrapper-height);
  height: var(--card-icon-wrapper-width);
  border-radius: var(--card-icon-radius);
  position: absolute;
  top: calc(var(--card-icon-height) / 2 * -1);
  left: var(--card-padding-left);
  border-top: var(--card-icon-border-top);
  border-right: var(--card-icon-border-right);
  border-bottom: var(--card-icon-border-bottom);
  border-left: var(--card-icon-border-left);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-card .card .img-wrapper img{
  width: var(--card-icon-height);
  height: var(--card-icon-width);
}
/* Box Styles */
.box-list .card{
  position: relative;
  overflow: hidden;
}
.box-list .card::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--box-overlay);
  opacity: var(--box-overlay-opacity);
  transition: var(--animate-medium);
  z-index: 0;
}
.box-list .card:hover::after{
  opacity: var(--box-overlay-opacity-hover);
}
.light .box-list .card::after{
  background: var(--box-overlay-light);
}
.main .box-list .card::after{
  background: var(--box-overlay-main);
}
.dark .box-list .card::after{
  background: var(--box-overlay-dark);
}
.box-list .img-wrapper{
  width: 100%;
  height: 100%;
}
.box-list .img-wrapper img{
  height: 100%;
  object-fit: cover;
}
.box-list .content-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}
.box-list .card h3{
  margin: 0;
}
.box-list .card p{
  display: none;
}
.box-list .card .button{
  display: none;
}
/* Animated Box */
.animated-box-list .card{
  position: relative;
  overflow: hidden;
}
.animated-box-list .card::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--box-overlay);
  opacity: var(--box-overlay-opacity);
  transition: var(--animate-medium);
  z-index: 0;
}
.animated-box-list .card:hover::after{
  opacity: var(--box-overlay-opacity-hover);
}
.animated-box-list .img-wrapper{
  width: 100%;
  height: 100%;
}
.animated-box-list .img-wrapper img{
  height: 100%;
  object-fit: cover;
}
.animated-box-list .card .content-wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 1;
}
.animated-box-list .card h3{
  margin: 0;
  transition: var(--animate-medium);
}
.animated-box-list .card:hover h3{
  margin: 0 0 1.2rem;
}
.animated-box-list .card p{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 0;
  opacity: 0;
  margin: 0;
  transition: var(--animate-medium);
}
.animated-box-list .card:hover p{
  height: calc(1.6rem * 1.4 * 3);
  opacity: 1;
  margin: 0 0 1.2rem;
}
.animated-box-list .card .button{
  height: 0;
  opacity: 0;
  padding-block: 0;
  margin-top: 0;
}
.animated-box-list .card:hover .button{
  height: var(--button-height);
  opacity: 1;
}
/* ---=== Section Styles ===--- */
.content_container .content > .img-wrapper{
  width: 100%;
  height: auto;
  max-width: 42rem;
}
.content_container .content > .img-wrapper img{
  width: 100%;
  height: auto;
}
/* Image Background */
.img-bg{
  position: relative;
  overflow: hidden;
}
.img-bg .img-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.img-bg .img-wrapper::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-bg);
  opacity: var(--section-img-bg-overlay-opcaity);
}
.img-bg .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-bg .content{
  position: relative;
  z-index: 2;
}
.img-bg.light .img-wrapper::after{
  background: var(--color-bg-light);
}
.img-bg.colour .img-wrapper::after{
  background: var(--color-main);
}
.img-bg.dark .img-wrapper::after{
  background: var(--color-bg-dark);
}
/* Blur Overlay */
.img-bg.blur-overlay .content{
  padding: 3.2rem;
  border-radius: 1.6rem;
  border: 1px solid hsla(0 0% 100% / .16);
  background: hsla(0 0% 100% / .16);
  backdrop-filter: blur(8px);
}
/* Shadow Content */
.shadow-content .content{
  padding: 3.2rem;
  border-radius: 1.6rem;
  background: var(--shadow-content-bg);
  box-shadow: var(--shadow);
}
.shadow-content.light .content{
  background: var(--shadow-content-light);
}
.shadow-content.main .content{
  background: var(--shadow-content-bg-main);
}
.shadow-content.dark .content{
  background: var(--shadow-content-bg-dark);
}
/* Image Float */
.img-float .content{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img-float .img-wrapper{
  max-width: 40rem;
  width: 100%;
}
.img-float .img-wrapper img{
  width: 100%;
  height: auto;
}
.img-float .editable_content{
  width: calc(100% - 48rem);
}
.img-float.img-right .content{
  flex-direction: row-reverse;
}
@media screen and (max-width: 1024px) {
  .img-float .content,
  .img-float.img-right .content{
    flex-direction: column;
    gap: 4rem;
  }
  .img-float .editable_content{
    width: 100%;
  }
}
/* Image Fade */
.img-fade{
  position: relative;
}
.img-fade .img-wrapper{
  width: 44%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.img-fade .img-wrapper::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, transparent 0%, var(--color-bg) 99%, var(--color-bg) 100%);
}
.img-fade .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-fade .content{
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.img-fade .editable_content{
  width: 60%;
}
.img-fade.img-right .img-wrapper{
  left: auto;
  right: 0;
}
.img-fade.img-right .img-wrapper::after{
  background: linear-gradient(to left, transparent 0%, var(--color-bg) 99%, var(--color-bg) 100%);
}
.img-fade.img-right .content{
  justify-content: flex-start;
}
.img-fade.light .img-wrapper::after{
  background: linear-gradient(to right, transparent 0%, var(--color-bg-light) 99%, var(--color-bg-light) 100%);
}
.img-fade.img-right.light .img-wrapper::after{
  background: linear-gradient(to left, transparent 0%, var(--color-bg-light) 99%, var(--color-bg-light) 100%);
}
.img-fade.colour .img-wrapper::after{
  background: linear-gradient(to right, transparent 0%, var(--color-main) 99%, var(--color-main) 100%);
}
.img-fade.img-right.colour .img-wrapper::after{
  background: linear-gradient(to left, transparent 0%, var(--color-main) 99%, var(--color-main) 100%);
}
.img-fade.dark .img-wrapper::after{
  background: linear-gradient(to right, transparent 0%, var(--color-bg-dark) 99%, var(--color-bg-dark) 100%);
}
.img-fade.img-right.dark .img-wrapper::after{
  background: linear-gradient(to left, transparent 0%, var(--color-bg-dark) 99%, var(--color-bg-dark) 100%);
}
@media screen and (max-width: 1024px){
  .img-fade{
    padding-top: 32rem; 
  }
  .img-fade .img-wrapper{
    width: 100%;
    height: 32rem;
  }
  .img-fade .editable_content{
    width: 100%;
  }
  .img-fade .img-wrapper::after,
  .img-fade.img-right .img-wrapper::after{
    background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 99%, var(--color-bg) 100%);
  }
  .img-fade.light .img-wrapper::after,
  .img-fade.img-right.light .img-wrapper::after{
    background: linear-gradient(to bottom, transparent 0%, var(--color-bg-light) 99%, var(--color-bg-light) 100%);
  }
  .img-fade.colour .img-wrapper::after,
  .img-fade.img-right.colour .img-wrapper::after{
    background: linear-gradient(to bottom, transparent 0%, var(--color-main) 99%, var(--color-main) 100%);
  }
  .img-fade.dark .img-wrapper::after,
  .img-fade.img-right.dark .img-wrapper::after{
    background: linear-gradient(to bottom, transparent 0%, var(--color-bg-dark) 99%, var(--color-bg-dark) 100%);
  }
}
/* Shadow Overlay */
.img-fade.shadow-overlay .img-wrapper::after{
  display: none;
}
.img-fade.shadow-overlay .editable_content{
  padding: 3.2rem;
  border-radius: 1.6rem;
  background: var(--shadow-content-bg);
  box-shadow: var(--shadow);
  width: 64%;
}
.img-fade.shadow-overlay.light .editable_content{
  background: var(--shadow-content-bg-light);
}
.img-fade.shadow-overlay.main .editable_content{
  background: var(--shadow-content-bg-main);
}
.img-fade.shadow-overlay.dark .editable_content{
  background: var(--shadow-content-bg-dark);
}
@media screen and (max-width: 1024px){
  .img-fade.shadow-overlay{
    padding-top: 28rem;
  }
  .img-fade.shadow-overlay .editable_content{
    width: 100%;
  }
}
/* No Fade */
.img-fade.no-fade .img-wrapper::after{
  display: none;
}
.img-fade.no-fade .editable_content {
  width: 55%;
  padding-left: 6.4rem;
}
.img-fade.no-fade.img-right .editable_content {
  padding-left: 0;
  padding-right: 6.4rem;
}
@media screen and (max-width: 1024px){
  .img-fade.no-fade .editable_content,
  .img-fade.no-fade.img-right .editable_content{
    width: 100%;
    padding: 4.8rem 0 0;
  }
}
/* Strip List */
.strip-list-wrapper{
  padding: 0;
}
.strip-list{
  position: relative;
  background: var(--strip-bg);
}
.strip-list:nth-of-type(2n){
  background: var(--strip-bg-alt);
}
.strip-list .img-wrapper{
  width: 40%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.strip-list:nth-of-type(2n) .img-wrapper{
  left: auto;
  right: 0;
}
.strip-list .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Strip lightbox: the lead image becomes a swipebox trigger when the strip has
   more than one photo. The anchor has to fill the wrapper so the img's
   height:100% still resolves. Trailing photos ride along hidden. */
.strip-gallery-trigger{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.strip-gallery-extra{
  display: none !important;
}
.strip-gallery-count{
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  background: hsla(0 0% 0% / .55);
  color: white;
  font-size: 1.3rem;
  line-height: 1;
  backdrop-filter: blur(4px);
  transition: var(--animate-fast);
}
.strip-gallery-trigger:hover .strip-gallery-count{
  background: var(--color-main);
}
.strip-list .content{
  display: flex;
  justify-content: flex-end;
}
.strip-list:nth-of-type(2n) .content{
  justify-content: flex-start;
}
.strip-list .editable_content{
  width: calc(60% - 8rem);
}
/* Strip with no image uploaded: content runs full width (no image column). */
.strip-list.strip-no-image .content{
  justify-content: flex-start;
}
.strip-list.strip-no-image .editable_content{
  width: 100%;
}
@media screen and (max-width: 1024px){
  .strip-list-wrapper .strip-list{
    padding: 34rem 2.4rem 4.8rem;
  }
  /* No image: drop the top padding reserved for the (absent) mobile image. */
  .strip-list-wrapper .strip-list.strip-no-image{
    padding-top: 4.8rem;
  }
  .strip-list .img-wrapper{
    width: 100%;
    height: 32rem;
  }
  .strip-list .editable_content{
    width: 100%;
  }
}
/* ---=== Animations ===--- */
.fadeFromLeft {
  opacity: 0;
  transform: translateX(-10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromRight {
  opacity: 0;
  transform: translateX(10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromTop {
  opacity: 0;
  transform: translateY(-10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromBottom {
  opacity: 0;
  transform: translateY(10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromLeft.show,
.fadeFromRight.show,
.fadeFromTop.show,
.fadeFromBottom.show {
  opacity: 1;
  transform: translateY(0);
}
/* ---=== Swipebox Styles =--- */
.swipebox_full a img {
  width: 100%;
  height: auto;
  transition: var(--animate-medium);
}
.swipebox_full a img:hover {
  opacity: 0.48;
}
/* ---=== 19. Sub Page Menu ===---  */
.files-list a.button{
  margin: 0;
  width: 100%;
}
/* ---------- 20. Contact ---------- */
ul.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.contact-list li{
  margin: 0;
  padding: 0;
}
ul.contact-list li i,
ul.contact-list li .icon-wrapper{
  display: none;
}
ul.contact-list li strong{
  display: block;
}
ul.contact-list li address{
  font-style: normal;
}
ul.contact-list li a {
  text-decoration: none;
}
ul.contact-list li ul.hours{
  list-style: none;
  margin: 0;
}
/* Contact Shadow */
ul.contact-list.contact-shadow > li{
  background: var(--color-bg);
  padding: 1.6rem;
  border-radius: 1.6rem;
  box-shadow: var(--shadow);
}
.dark ul.contact-list.contact-shadow > li,
.main ul.contact-list.contact-shadow > li{
  background: hsla(0 0% 100% / .08);
}
/* Contact FA Icon */
ul.contact-list.contact-fa-icon li{
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}
ul.contact-list.contact-fa-icon li i{
  margin: 2px 0 0;
  color: var(--color-main);
  display: block;
}
/* Contact Img Icon */
ul.contact-list.contact-img-icon li .icon-wrapper{
  display: flex;
  --icon-size: 6.4rem;
  width: var(--icon-size);
  height: var(--icon-size);
  border: 2px solid var(--color-main);
  margin: 0 0 0.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg);
}
ul.contact-list.contact-img-icon li .icon-wrapper img{
  width: 3.2rem;
  height: auto;
}
.main ul.contact-list.contact-img-icon li .icon-wrapper{
  background: var(--color-bg);
}
/* Contact Img Icon Inline */
ul.contact-list.contact-img-icon.icon-inline li{
  display: flex;
  gap: .8rem;
}
ul.contact-list.contact-img-icon.icon-inline li .icon-wrapper{
  margin: 0;
}
ul.contact-list.contact-img-icon.icon-inline li span{
  width: calc(100% - calc(.8rem - var(--icon-size)));
}
@media screen and (max-width: 420px) {
  ul.contact-list.contact-img-icon.icon-inline li{
    flex-direction: column;
  }
  ul.contact-list.contact-img-icon.icon-inline li span{
    width: 100%;
  }
}
/* Contact Img Icon Shadow */
ul.contact-list.contact-shadow.contact-img-icon > li{
  margin-top: 3.2rem;
}
ul.contact-list.contact-shadow.contact-img-icon li .icon-wrapper{
  margin-top: -4.8rem;
}
/* ---=== Contact Multi Location ===---*/
.multi-loc iframe {
  aspect-ratio: 6 / 3.5;
  width: 100%;
  height: auto;
}
.multi-loc h3 {
  font-size: 2.2rem;
  padding: 0 0 .8rem;
  margin: 0 0 .8rem;
  border-bottom: var(--color-border);
}
.multi-loc ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 0;
  margin: 0;
}
.multi-loc ul li{
  width: 100%;
  padding: 0;
  margin: 0;
}
.multi-loc strong {
  display: block;
  color: var(--color-heading);
}
.multi-loc address {
  font-style: normal;
}
.multi-loc a {
  text-decoration: none;
}
.multi-loc pre{
  margin: 0;
}
.dark .multi-loc h3{
  border-color: var(--color-border-dark);
}
.main .multi-loc h3{
  border-color: var(--color-border-main);
}
.dark .multi-loc strong{
  color: var(--color-heading-dark);
}
.main .multi-loc strong{
  color: var(--color-heading-main);
}
/* ---=== Map ===--- */
.map-holder {
  height: 42rem;
  overflow: hidden;
}
.map-holder iframe {
  height: 100%;
  width: 100%;
}
/* ---=== Social Media ===--- */
.social_media ul {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 16px;
}
.social_media ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.social_media ul li a {
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  color: var(--color-bg);
  background: var(--color-main);
  border-radius: 50%;
  transition: var(--animate-medium);
}
.social_media ul li a:hover {
  background: var(--color-bg-dark);
}
.social_media ul li a i {
  font-size: 2.2rem;
  line-height: 1;
}
.main .social_media ul li a{
  background: var(--color-bg);
  color: var(--color-main);
}
.colour .social_media ul li a:hover{
  background: var(--color-bg-dark);
  color: var(--color-bg);
}
.dark .social_media ul li a:hover{
  background: var(--color-bg);
  color: var(--color-bg-dark);
}
/* ---=== Toggler ===--- */
h4.toggle,
h4.toggle.active.open {
  color: var(--color-heading);
  background: url(/assets/images/layout/toggle.png) no-repeat 10px 11px;
  padding: 8px 0 8px 35px;
  margin: 10;
  cursor: pointer;
}
h4.toggle.active,
h4.toggle.open {
  background-position: 10px -39px;
}
h4.toggle:hover,
h4.toggle.active.open:hover {
  background-position: 10px -39px;
}
div.toggler {
  border-top: none;
  margin: 0;
  overflow: hidden;
  padding: 0 0 0 24px;
}
div.toggler p {
  margin: 0 0 1.2rem;
  padding: 0;
}
.toggle-wrapper .toggler ul,
.toggle-wrapper .toggler ol {
  margin: 0 0 1.2rem 2rem;
}
div.toggler>*:last-child {
  margin-bottom: 0;
}
/* ---===. Products ===--- */
/* Search */
form.search_form {
  display: flex;
  margin: 0 0 3.2rem;
}
form.search_form input.search_input {
  width: calc(100% - 16px);
  border-radius: .4rem 0 0 .4rem;
  border: 1px solid hsla(0 0% 0% / .15);
  border-radius: none;
  background: hsla(0 0% 0% / .05);
  padding: .5rem .8rem;
}
form.search_form input.button {
  width: 16rem;
  border-radius: 0 .4rem .4rem 0;
  margin: 0;
}
/* ---=== Modal Styles ===--- */
summary.btn {
  cursor: pointer;
  display: inline-block;
  background-color: var(--color-main);
  padding: 5px 20px;
  border-radius: 10px;
  margin: 10px 0;
}
.details-with-modal summary::-webkit-details-marker {
  display: none;
}
details-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  max-height: 80vh;
  overflow: scroll;
  max-width: 90vw;
  width: 448px;
  background-color: var(--color-bg);
}
.details-with-modal[open]>summary:before {
  content: " ";
  background: hsla(0 0% 0% / 0.32);
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.modal-header {
  padding: 20px;
  background-color: var(--color-main);
}
.modal-body {
  padding: 20px;
}
.modal-footer {
  padding: 20px;
  text-align: center;
}
.modal-footer button {
  width: 95%;
  display: inline-block;
  background-color: var(--color-main);
  font-size: 1rem;
  padding: 10px;
  cursor: pointer;
  transition: var(--animate-medium);
}
.modal-footer button:hover {
  background-color: var(--color-bg-dark);
  color: var(--color-bg);
}
/* ---=== Toggles ===--- */
.toggle-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.toggle-wrapper .toggle_faq {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 2.4rem;
  margin: 0;
  cursor: pointer;
  padding-left: 2.4rem;
  position: relative;
}
.toggle-wrapper .toggle_faq .icon {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  position: absolute;
  transition: var(--animate-medium);
  left: 0;
  top: 5px;
}
.toggle-wrapper .toggle_faq.active .icon {
  transform: rotate(135deg);
}
.toggle-wrapper .toggle_faq .icon i {
  width: 1.6rem;
  height: .2rem;
  background: var(--color-main);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
.toggle-wrapper h3.toggle_faq .icon i:nth-child(2) {
  transform: translate(-50%, -50%) rotate(0deg);
}
.toggle-wrapper .toggler {
  padding: .8rem 1.6rem 0 2.4rem;
}
/* ---=== Widget Slider ===--- */
.widget-slider {
  position: relative;
  padding-bottom: 4rem;
}
.widget-slider .swiper-slide {
  height: auto;
}
.widget-slider .swiper-slide .card{
  height: 100%;
  display: flex;
  align-items: center;
  gap: 3.2rem;
}
.widget-slider .swiper-slide .card .img-wrapper{
  width: 100%;
  max-width: 40rem;
  height: 100%;
}
.widget-slider .swiper-slide .card .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.widget-slider .swiper-slide .card .content-wrapper{
  width: calc(100% - 43.2rem);
  padding-block: 3.2rem;
}
.widget-slider .swiper-button-prev,
.widget-slider .swiper-button-next {
  color: white;
  top: calc(50% - 2rem);
  background: var(--color-main);
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  left: -2rem;
}
.widget-slider .swiper-button-next{
  left: auto;
  right: -2rem;
}
.widget-slider .swiper-button-prev:hover,
.widget-slider .swiper-button-next:hover{
  background: var(--color-bg-dark);
}
.swiper .swiper-button-next:after, .swiper .swiper-button-prev:after{
  font-size: 2rem;
}
.widget-slider .swiper-pagination-bullet-active {
  background: var(--color-main);
}
.swiper-pagination{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  bottom: 15px;
}
@media screen and (max-width: 1024px) {
    .widget-slider .swiper-slide .card{
    flex-direction: column;
    }
    .widget-slider .swiper-slide .card .img-wrapper{
    aspect-ratio: 2 / 1;
    max-width: 100%;
    }
    .widget-slider .swiper-slide .card .content-wrapper{
    width: 100%;
    padding: 0;
    }
}
/* ---=== Widget Category Filter ===--- */
.widget-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flex-gap);
  margin-block: 1.6rem;
}
.widget-category-filter .filter-btn {
  padding: 0 2.4rem;
  border: 2px solid var(--color-border);
  background: var(--color-bg-light);
  cursor: pointer;
  border-radius: .4rem;
  font-size: 1.4rem;
  line-height: 1;
  transition: var(--animate-medium);
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.widget-category-filter .filter-btn:hover,
.widget-category-filter .filter-btn.active {
  background: var(--color-main);
  border-color: var(--color-main);
  color: var(--font-color-body-main);
}
/* ---=== Pop Up ===--- */
.cta-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background: hsla(0 0% 0% / .5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cta-popup .pop-up {
  background: white;
  padding: 3.2rem;
  border-radius: 1.6rem 0 1.6rem 1.6rem;
  box-shadow: var(--shadow-medium);
  width: 48rem;
  position: relative;
  text-align: center;
}
.cta-popup .pop-up .close-popup {
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  top: -12px;
  right: -12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-main);
  border-radius: 50%;
  transition: var(--animate-medium);
  cursor: pointer;
}
.cta-popup .pop-up .close-popup:hover {
  background: var(--color-bg-dark);
}
.cta-popup .pop-up h3 {
  font-size: 3.2rem;
  margin: 0 0 1.6rem;
}
.cta-popup .pop-up .button {
  margin: 1.6rem 0 0;
}
/* ---=== Pop Up ===--- */
.page-details.h6 {
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 0 1.6rem;
  color: var(--font-color-body);
}
.page-details.h6 a {
  color: var(--font-color-body);
  text-decoration: none;
}
.page-details.h6 a:hover {
  color: var(--color-main);
}
/* ---=== Logo Slider ===--- */
#logo-link-slider {
  overflow: hidden;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#logo-link-slider .logo-link-slider-wrapper {
  display: block;
  width: 100%;
  position: relative;
}
#logo-link-slider .logo-link-slider-wrapper ul {
  position: relative;
  left: 0px;
  display: flex;
  justify-content: space-around;
  list-style: none;
}
#logo-link-slider .logo-link-slider-wrapper ul li {
  display: inline-block;
  position: relative;
  margin: 0px auto;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
#logo-link-slider .logo-link-slider-wrapper ul li a img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
  opacity: 0.65;
  width: 100%;
}
.logo_link_static {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.logo_link_static a img {
  width: 200px;
}
/* ----- Contact CTA ----- */
.contact-info-widget{
  position: relative;
}
.contact-info-widget .content{
  display: flex;
  flex-direction: column;
  --contact-gap: 4rem;
  gap: var(--contact-gap);
}
.contact-info-widget .content .contact-list{
  margin-top: 4rem;
}
.contact-info-widget.has-sidebar .content{
  flex-direction: row;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar,
.contact-info-widget.has-sidebar .content .contact-info-main{
  width: calc(50% - calc(var(--contact-gap) / 2));
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar form .half_width,
.contact-info-widget.has-sidebar .content .contact-info-sidebar form .third_width{
  width: 100%;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar .img-wrapper{
  width: 100%;
  height: 100%;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar .map-holder iframe,
.contact-info-widget.has-sidebar .content .contact-info-sidebar .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar .map-holder{
  position: absolute;
  top: 0;
  right: 0;
  width: calc(50% - calc(var(--contact-gap) / 2));
  height: 100%;
}
form .button{
  margin: 0 0 0 auto;
}
@media screen and (max-width: 1024px) {
  .contact-info-widget.has-sidebar .content{
    flex-direction: column;
  }
  .contact-info-widget.has-sidebar .content .contact-info-sidebar,
  .contact-info-widget.has-sidebar .content .contact-info-main{
    width: 100%;
  }
  .contact-info-widget.has-sidebar .content .contact-info-sidebar .map-holder{
    position: initial;
    width: 100%;
    height: 40rem;
  }
}
.sidebar-widget .content{
  display: flex;
  --sidebar-gap: 6.4rem;
  gap: var(--sidebar-gap);
  flex-direction: row-reverse;
}
.sidebar-widget.aside-right .content{
  flex-direction: row;
}
.sidebar-widget .content .sidebar-layout{
  width: 100%;
  max-width: 40rem;
}
.sidebar-widget .content .editable_content{
  width: 100%;
  max-width: calc(100% - 40rem - var(--sidebar-gap));
}
.aside-group{
  margin: 1.6rem 0 0;
}
.aside-group > h4{
  margin: 0 0 .8rem;
}
.aside-group > ul{
  border-top: 1px solid var(--color-border);
  list-style: none;
  margin: 0;
  padding: 0;
}
.aside-group > ul > li{
  margin: 0;
  padding: .8rem;
  border-bottom: 1px solid var(--color-border);
}
.aside-group > ul > li a{
  text-decoration: none;
}
.page-detail-layout {
  align-items: flex-start;
}
.page-detail-layout.layout-image-right {
  flex-direction: row-reverse;
}
.page-detail-gallery__main img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.page-detail-gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  margin-top: 12px;
  padding-bottom: 4px;
}
.page-detail-gallery__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 0;
  margin: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}
.page-detail-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-detail-gallery__thumb:hover,
.page-detail-gallery__thumb.is-active {
  opacity: 1;
  border-color: currentColor;
}
.page-detail-image {
  margin: 0;
}
.page-detail-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.page-detail-image figcaption {
  margin-top: 8px;
  font-size: 0.9em;
  opacity: 0.7;
}
@media screen and (max-width: 1024px) {
  .page-detail-layout.layout-image-right {
    flex-direction: column;
  }
}
/* ----- ===== Custom Styles ===== ----- */
.dark{
  position: relative;
}
.dark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 520px at 12% 0%, rgba(26, 26, 224, .42), transparent 62%), radial-gradient(700px 480px at 96% 88%, rgba(26, 26, 224, .22), transparent 60%);
}
.dark > *{
  position: relative;
  z-index: 1;
}
section.top-header{
  background: var(--color-navy);
}
section.top-header .content{
  justify-content: space-between;
}
section.top-header .content p,
section.top-header .content ul li,
section.top-header .content ul li a{
  margin: 0;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, .86);
}
section.top-header .content ul{
  gap: 2.4rem;
}
section.top-header .content p{
  font-weight: 600;
}
section.top-header .content ul li i{
  color: var(--color-amber);
}
section.top-header .content ul li a{
  text-decoration: none;
}
section.top-header .content ul li a:hover{
  color: white;
}
header.full_header{
  padding-block: 1.6rem;
}
header .jqueryslidemenu{
  max-width: var(--content-width-lg);
}
header .jqueryslidemenu nav{
  width: calc(100% - var(--logo-width) - 68rem);
}
header .jqueryslidemenu nav ul li a{
  padding: 1.2rem 1.6rem;
  border-radius: .8rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.6rem;
  overflow: hidden;
}
header .jqueryslidemenu nav ul li a:hover,
header .jqueryslidemenu nav ul li.Selected a{
  background: var(--color-brand-tint);
}
header .jqueryslidemenu .button{
  margin: 0;
}
.banner-container-constrained.dark .video-wrapper{
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.banner-container-constrained.dark .video-wrapper video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-container-constrained.dark .video-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 18, 36, .55), transparent 45%);
}
.banner-container-constrained.dark .video-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 18, 36, .55), transparent 45%);
}
.btn-wrapper{
  display: flex;
  gap: 1.6rem;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 20px;
}
.main .eyebrow,
.dark .eyebrow{
  color: var(--color-paper);
}
.eyebrow::before{
  content: "";
  width: 22px;
  height: 3px;
  background: var(--color-brand);
  border-radius: 2px;
  flex: none;
}
.main .eyebrow::before,
.dark .eyebrow::before{
  background: var(--color-amber);
}
.img-float .content .img-wrapper{
  border-radius: 2.4rem;
  overflow: hidden;
}
.icon-card {
  margin-top: 4rem;
}
.icon-card .card{
  margin: 0 !important;
  padding-top: 2.4rem !important;
  transition: var(--animate-medium);
}
.icon-card .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(10, 18, 36, .07), 0 18px 40px rgba(10, 18, 36, .08);
  border-color: var(--color-brand-tint-2);
}
.icon-card .card .img-wrapper{
  position: initial;
  border: none;
  background: var(--color-brand-tint);
  margin: 0 0 24px;
  transition: var(--animate-medium);
}
.icon-card .card .img-wrapper svg{
  fill: var(--color-main);
  transition: var(--animate-medium);
  width: 28px;
  height: auto;
}
.icon-card .card:hover .img-wrapper{
  background: var(--color-main);
}
.icon-card .card:hover .img-wrapper svg{
  fill: white;
}
.what-we-lift .content{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3.2rem 8rem;
}
.what-we-lift .content .editable_content{
  grid-column-start: 1;
  grid-column-end: 8;
}
.what-we-lift .content .btn-wrapper{
  grid-row-start: 3;
  grid-column-start: 1;
  grid-column-end: 8;
  align-self: end;
}
.what-we-lift .content .btn-wrapper .button{
  margin: 0;
}
.what-we-lift .content .img-wrapper{
  border-radius: 2.4rem;
  overflow: hidden;
  grid-column-start: 8;
  grid-column-end: 13;
  grid-row: span 3;
  max-width: 100%;
}
.what-we-lift .content .box-list{
  grid-row-start: 2;
  grid-column-start: 1;
  grid-column-end: 8;
}
.what-we-lift .content .box-list .card{
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  transition: var(--animate-medium);
}
.what-we-lift .content .box-list .card:hover{
  border-color: var(--color-amber);
  transform: translate(0 , -4px);
  box-shadow: 0 4px 12px rgba(10, 18, 36, .07), 0 18px 40px rgba(10, 18, 36, .08);
}
.what-we-lift .content .box-list .card::after{
  display: none;
}
.what-we-lift .content .box-list .card .content-wrapper{
  position: initial;
  display: block;
  padding: 0;
  height: auto;
}
.what-we-lift .content .box-list .card .content-wrapper h3{
  color: white;
  font-size: 1.6rem;
  line-height: 1.1;
  font-weight: 600;
  margin: 0;
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.what-we-lift .content .box-list .card .content-wrapper h3::before{
  font-family: "Font Awesome 7 Pro", "Font Awesome 5 Pro", "FontAwesome";
  font-weight: 900;
  content: "\f00c";
  font-size: 1.4rem;
  margin-left: .8rem;
  transition: transform .3s ease;
  color: var(--color-amber);
}
.cert-strip .content .editable_content h2,
.why-choose .editable_content h2{
  margin-bottom: 0;
}
.cert-strip .content .flex{
  margin-top: 4rem;
}
.cert-strip .content .flex .card{
  background: white;
}
section.content_container.insta-strip{
  overflow: hidden;
}
/* The heading and intro for this band are real content (the widget's intro_content
   RTE, "See Express Crane in Action"), and `display: none` here was the only reason
   it was the one band on the site with no heading. The padding override above was
   also dropped so the band matches every other section rather than running
   edge-to-edge. */
.insta-strip .editable_content{
  margin-bottom: 3.2rem;
}
.contact-cta{
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.contact-cta .content{
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 4px 12px rgba(10, 18, 36, .07), 0 18px 40px rgba(10, 18, 36, .08);
  padding: 3.2rem;
  border-radius: 3.2rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.contact-cta .content::before{
  content: '';  
  background: rgba(255, 255, 255, .03);
  width: 32rem;
  height: 32rem;
  position: absolute;
  z-index: -1;
  top: -8rem;
  right: -8rem;
  border-radius: 50%;
}
.contact-cta .content .btn-wrapper{
  justify-content: center;
  align-items: center;
}
.contact-cta .content .btn-wrapper .button.second-btn{
  padding: 0;
  text-transform: capitalize;
  background: none;
  color: white;
  display: flex;
  gap: .8rem;
  align-items: center;
  border: none;
}
.contact-cta .content .btn-wrapper .button.second-btn::before{
  font-family: "Font Awesome 7 Pro", "Font Awesome 5 Pro", "FontAwesome";
  font-weight: 400;
  content: "\f095";
  font-size: 1.4rem;
  margin-left: .8rem;
  transition: transform .3s ease;
  color: var(--color-amber);
}
.contact-cta .content .btn-wrapper .button.second-btn:hover{
  background: none;
  color: var(--color-amber);
  box-shadow: none;
}
.inner-intro .img-wrapper img{
  opacity: .32;
}
.inner-intro.img-bg.dark .img-wrapper::after{
  opacity: 1;
  background: linear-gradient(105deg, rgba(10, 18, 36, .94) 32%, rgba(10, 18, 36, .55) 100%), radial-gradient(700px 420px at 8% 10%, rgba(26, 26, 224, .45), transparent 60%);
}
.inner-intro .content .editable_content > *{
  max-width: 62ch;
}
.inner-service-list .content .flex{
  margin: 4rem 0 0;
}
.inner-service-list .content .flex .card{
  padding: 0;
  overflow: hidden;
  transition: var(--animate-medium)
}
.inner-service-list .content .flex .card:hover{
  transform: translate(0 , -4px);
  box-shadow: 0 4px 12px rgba(10, 18, 36, .07), 0 18px 40px rgba(10, 18, 36, .08);
}
.inner-service-list .content .flex .card .img-wrapper{
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner-service-list .content .flex .card .img-wrapper img{
  transition: var(--animate-medium);
  width: 100%; 
  height: 100%;
  object-position: center;
}
.inner-service-list .content .flex .card:hover .img-wrapper img{
  transform: scale(1.15);
}
.inner-service-list .content .flex .card .content-wrapper{
  padding: 2.4rem;
}
.inner-service-list .content .flex .card .content-wrapper h3{
  margin: 0 0 1.2rem;
}
section.content_container.dark.emerg-cta{
  background: var(--color-bg);
}
section.content_container.dark.emerg-cta::after{
  display: none;
}
section.content_container.dark.emerg-cta .content{
  background: var(--color-bg-dark);
  padding: 6.4rem;
  border-radius: 2.4rem;
  box-shadow: 0 4px 12px rgba(10, 18, 36, .07), 0 18px 40px rgba(10, 18, 36, .08);
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
}
section.content_container.dark.emerg-cta .content .img-wrapper{
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  border-radius: 0;
}
section.content_container.dark.emerg-cta .content .img-wrapper::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -1px;
  background: linear-gradient(to right, var(--color-bg-dark), transparent);
}
section.content_container.dark.emerg-cta .content .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.content_container.cap-strip .content .editable_content h2{
  margin: 0;
}
section.content_container.cap-strip .content .editable_content .grid:nth-child(2){
  margin-top: 3.2rem;
}
section.content_container.cap-strip .content .editable_content .grid .col-4{
  padding: 2.4rem;
  border-radius: 1.6rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
}
section.content_container.cap-strip .content .editable_content .grid .col-4 p{
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
}
section.content_container.spacious.contact-inner .content .contact-info-main{
  background: var(--color-bg-dark);
  padding: 3.2rem;
  border-radius: 2.4rem;
}
section.content_container.spacious.contact-inner .content .contact-info-main ul li,
section.content_container.spacious.contact-inner .content .contact-info-main ul li a,
section.content_container.spacious.contact-inner .content .contact-info-main h2,
section.content_container.spacious.contact-inner .content .contact-info-main h3,
section.content_container.spacious.contact-inner .content .contact-info-main p{
  color: white;
}
section.content_container.spacious.contact-inner .content .contact-info-main ul{
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  border-bottom: 2px solid hsla(0 0% 100% / .08);
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
}
section.content_container.spacious.contact-inner .content .contact-info-main ul li{
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}
section.content_container.spacious.contact-inner .content .contact-info-main ul li i{
  display: block;
  color: var(--color-amber);
  --fa-style: 300;
  width: 1.8rem;
}
section.content_container.spacious.contact-inner .content .contact-info-main ul li span{
  width: calc(100% - 2.6rem);
}
section.content_container.spacious.contact-inner .content .contact-info-main ul li strong{
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 4px;
}
section.content_container.spacious.contact-inner .content .contact-info-main ul li,
section.content_container.spacious.contact-inner .content .contact-info-main ul li a{
  font-size: 1.8rem;
  font-weight: 600;
}
section.content_container.spacious.contact-inner .content .contact-info-main ul li a:hover{
  color: var(--color-amber);
}
section.content_container.spacious.contact-inner .content .contact-info-main h2{
  font-size: 2.4rem;
  margin: 0 0 1.2rem;
}
section.content_container.spacious.contact-inner .content .contact-info-main .social_media ul{
  padding: 0;
  margin: 0;
  border: none;
  flex-direction: row;
}
section.content_container.spacious.contact-inner .content .contact-info-main .social_media ul li a{
  border: 2px solid hsla(0 0% 100% / .08);
  background: none;
  color: white;
}
section.content_container.spacious.contact-inner .content .contact-info-main .social_media ul li a i{
  color: white;
  font-size: 1.4rem;
}
section.content_container.spacious.contact-inner .content .contact-info-main .social_media ul li a:hover{
  background: white;
  border-color: white;
}
section.content_container.spacious.contact-inner .content .contact-info-main .social_media ul li a:hover i{
  color: var(--color-bg-dark);
}
section.content_container.spacious.contact-inner .content .contact-info-sidebar{
  background: var(--color-bg-light);
  padding: 3.2rem;
  border-radius: 2.4rem;
  border: 1px solid var(--color-line);
}
section.content_container.spacious.contact-inner .content .contact-info-sidebar textarea, 
section.content_container.spacious.contact-inner .content .contact-info-sidebar input{
  border: 1px solid var(--color-line);
  background: var(--color-bg);
}
section.content_container.spacious.contact-inner .content .contact-info-sidebar input.button{
  border: 2px solid var(--color-main);
  background: var(--color-main);
  width: auto;
}
section.content_container.spacious.contact-inner .content .contact-info-sidebar input.button:hover{
  background: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
}
section.content_container.spacious.contact-inner .content .contact-info-sidebar label{
  opacity: 1;
}
section.content_container.spacious.contact-inner .content .contact-info-sidebar form > *:nth-child(9) label{
  position: initial;
}
section.content_container.spacious.contact-inner .content .contact-info-sidebar form > *:nth-child(9) fieldset > label{
  margin: 0 0 1.2rem;
  display: block;
}
section.content_container.spacious.contact-inner .content .contact-info-sidebar form > *:nth-child(9) fieldset input{
  border: 1px solid var(--color-line);
}
section.content_container.spacious.contact-inner .content .contact-info-sidebar form > *:nth-child(9) fieldset .form-checkbox-option input[type="checkbox"]:checked {
  background: var(--color-main);
  border-color: var(--color-main);
}
section.content_container.spacious.contact-inner .content .contact-info-sidebar form > *:nth-child(9) fieldset .form-checkbox-group label{
  opacity: 1;
}
footer{
  padding-top: 6.4rem;
}
footer .content .brand-col{
  width: 100%;
  max-width: 32rem;
}
footer .content .brand-col .h4{
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 2px solid hsla(0 0% 100% / .08);
}
footer .content > div .h4{
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 2rem;
}
footer .content p{
    color: var(--footer-body-color);
    font-size: var(--footer-body-size);
    margin: 0;
}
footer .social_media ul li a{
  border: 2px solid hsla(0 0% 100% / .08);
  background: none;
  color: white;
  width: 4rem;
  height: 4rem;
}
footer .social_media ul li a:hover{
  border-color: white;
  background: white;
}
footer .social_media ul li a i{
  color: white;
  font-size: 1.4rem;
}
footer .social_media ul li a:hover i{
  color: var(--color-bg-dark);
}
footer .sitemap ul li{
  width: 100%;
}
footer .sitemap {
  width: 16rem;
}
footer .content p.signature{
  display: flex;
  justify-content: center;
}
footer .content p.signature > span:nth-child(1){
  margin-left: auto;
}
footer .content p.signature a{
  padding-inline: 1.6rem;
}
footer .content p.signature a:last-child{
  margin-left: auto;
  padding: 0;
}
footer .content a:hover{
  color: var(--color-amber) !important;
}
footer .footer-contact ul{
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
section.content_container.dark.emerg-cta{
  padding-top: 0;
  padding-bottom: 12.8rem;
}
form .anchor{
  position: absolute;
  transform: translate(0, -28rem);
}
@media screen and (max-width: 1240px){
  header .jqueryslidemenu nav {
      width: calc(100% - var(--logo-width) - 56rem);
  }
}
@media screen and (max-width: 1120px){
  header .jqueryslidemenu nav {
      width: calc(100% - var(--logo-width) - 42rem);
  }
}
@media screen and (max-width: 1024px) {
  form .anchor{
    position: absolute;
    transform: translate(0, -20rem);
  }
  section.content_container.dark.emerg-cta{
    padding-top: 0;
    padding-bottom: 7.2rem;
  }
  .mobile_header .logo_area>a{
    width: 16rem;
  }
  .mobile_header a.menu-btn, .mobile_header a.cart_link{
    color: var(--color-ink);
  }
  /* ONE row: hamburger, logo, then call + quote pushed right.
     An explicit flex row rather than the stack of absolutely positioned boxes this
     started as. Two things that cost measurable bugs and are worth keeping:
       - the actions group is `flex: 0 0 auto` + nowrap, so the Quote button can
         never break onto a second line and stretch the bar;
       - the logo stays IN FLOW. The wordmark is 1042x337, so at 16rem wide it is
         52px tall — taller than anything else in the bar. Taking it out of flow to
         centre it on the viewport made it overflow the header by 8px top and bottom,
         and left no room for it at 390px (it ran into the Quote button by 9px).
         In flow beside the burger it sets the bar's height, which is the height the
         header has always had. */
  .mobile_header{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem;
  }
  .mobile_header a.menu-btn{
    position: static;
    left: auto;
    top: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-self: start;
    font-size: 2.2rem;
  }
  .mobile_header .logo_area{
    width: auto;
    justify-self: center;
  }
  .mobile_header .logo_area>a{
    margin: 0;
  }
  .mobile_header .mobile_header_actions{
    justify-self: end;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
  }
  .mobile_header .mobile_header_actions a.mobile-call{
    color: var(--color-ink);
    font-size: 2rem;
    line-height: 1;
    text-decoration: none;
    display: flex;
    align-items: center;
  }
  .mobile_header .mobile_header_actions a.button.mobile-quote{
    /* --button-margin is `24px 0 0 0`, which pushed this button 24px below the call
       icon and set the whole bar's height. The desktop header zeroes it the same way
       (header .jqueryslidemenu .button). */
    margin: 0;
    height: 3.6rem;
    padding: 0 1.2rem;
    font-size: 1.1rem;
    white-space: nowrap;
  }
  /* Dead-centre costs logo width on a phone, and the arithmetic is unforgiving: the
     side columns are forced equal, so the logo can only be as wide as
     (viewport − 2 × actions − padding − gaps). At 390px with both actions showing
     that ceiling is ~108px if the actions are to keep clear air around them — measured
     at 12rem the phone icon sat 6px off the wordmark. So it steps down to 10rem up to
     480px and returns to 16rem above it, where there is room for it. */
  @media screen and (max-width: 480px) {
    .mobile_header .logo_area>a{
      width: 10rem;
    }
  }
  /* The quote button alone would crowd a 320px screen; the call icon stays. */
  @media screen and (max-width: 360px) {
    .mobile_header .mobile_header_actions a.button.mobile-quote{
      display: none;
    }
  }
  .mm-menu.mm-current::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .56;
    background: radial-gradient(900px 520px at 12% 0%, rgba(26, 26, 224, .42), transparent 62%), radial-gradient(700px 480px at 96% 88%, rgba(26, 26, 224, .22), transparent 60%);
  }
  #menu .mm-list a{
    opacity: 1;
    color: white;
    position: relative;
    z-index: 2;
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: .05em;
    font-size: 2rem;
  }
  .banner-container-constrained.dark{
    padding-top: 0;
  }
  .banner-container-constrained.dark .video-wrapper{
    position: relative;
    margin: 0 auto;
    top: auto;
    left: auto;
    height: auto;
    transform: none;
  }
  .what-we-lift .content{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
  }
  .what-we-lift .content .img-wrapper,
  .what-we-lift .content .box-list,
  .what-we-lift .content .btn-wrapper,
  .what-we-lift .content .editable_content {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .what-we-lift .content .img-wrapper{
    max-width: 42rem;
    margin: 0 auto;
    grid-row-start: 1;
  }
  .what-we-lift .content .editable_content{
    grid-row-start: 2;
  }
  .what-we-lift .content .box-list{
    grid-row-start: 3;
  }
  .what-we-lift .content .btn-wrapper{
    grid-row-start: 4;
  }
  footer a.logo{
    margin-inline: auto;
  }
  footer .content p.signature{
    flex-direction: column;
    gap: .8rem;
  }
  footer .content p.signature span{
    display: none;
  }
  footer .content p.signature a:last-child{
    margin: 0;
  }
  section.content_container.dark.emerg-cta .content .img-wrapper{
    width: 100%;
    height: 40rem;
    max-width: 100%;
  }
  section.content_container.dark.emerg-cta .content .img-wrapper::after{
    left: 0;
    top: 1px;
    background: linear-gradient(to top, var(--color-bg-dark), transparent);
    overflow: visible;
  }
  section.content_container.dark.emerg-cta .content{
    padding: 43.2rem 3.2rem 3.2rem;
    border-radius: 1.6rem;
  }
  section.content_container.services-cta .editable_content .col-4{
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .flex.flex-4>*, .flex.flex-3>* {
    width: 100%;
  }
  .grid{
    gap: 1.2rem;
  }
}
@media screen and (max-width: 680px){
  .contact-cta .content .btn-wrapper,
  .banner-container-constrained .banner-content .btn-wrapper{
    flex-direction: column;
  }
  .contact-cta .content .btn-wrapper .button.second-btn{
    margin-top: 0;
  }
}
section.content_container.error-page{
  min-height: calc(100svh - 90px - 34px - 310px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-light);
}
section.content_container.error-page .content{
  max-width: 768px;
  text-align: center;
}
.cert-strip .flex .card .img-wrapper img{
  object-fit: contain;
}
.cert-strip .flex .card::after{
  display: none;
}
section.content_container.process-strip .flex{
  margin-top: 4rem;
  position: relative;
  z-index: 1;
}
section.content_container.process-strip .flex::after{
  content: '';
  width: 100%;
  height: 0;
  border-top: 8px dashed var(--color-line);
  position: absolute;
  z-index: -1;
  left: 0;
  top: calc(50% - 4px);
}
section.content_container.process-strip .flex.box-list .card::after{
  display: none;
}
section.content_container.process-strip .flex.box-list .card .content-wrapper{
  position: initial;
  justify-content: flex-start;
}
section.content_container.process-strip .flex.box-list .card .content-wrapper h3{
  color: var(--color-ink);
}
section.content_container.process-strip .flex.box-list .card .content-wrapper h3 b{
  color: var(--color-main);
  display: block;
  margin: 0 0 2.4rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.review-strip{
  overflow: hidden;
}
.review-strip .editable_content{
  max-width: 64rem;
  margin: 0 0 4rem;
}