@charset "UTF-8";
/*css variables*/
html {
  --bs-btn-active-bg: #000;
  --bs-accordion-btn-focus-border-color: #ccc !important;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
}

/*top level*/
body, html {
  overflow-x: hidden;
}

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

a, a:hover {
  transition: all 0.7s;
  -moz-transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -o-transition: all 0.7s;
}

a {
  color: #535353;
  text-decoration: none;
}

a:hover {
  color: #000;
}

.small, small {
  font-size: 0.8em;
  font-weight: 400 !important;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

hr {
  border-top: 1px solid #e2e2e2 !important;
  opacity: 1;
}

/*BS5 over rides*/
.btn {
  border-radius: 6px;
  padding: 12.5px 15px;
  font-weight: 500;
}

    .btn.btn-sm {
        padding: 5px 15px;
    }

.dropdown-menu {
  border-radius: 0 !important;
}
.dropdown-menu img {
  width: 100%;
}

.dropdown-menu.mega-menu {
  top: 96% !important;
  border: 0;
}

.dropdown-item {
  opacity: 0.8;
}

.dropdown-item:focus, .dropdown-item:hover {
  background: transparent;
  opacity: 1;
}

.p-4 {
  padding: 1.8rem !important;
}

h1, h2 {
  font-weight: 600 !important;
  line-height: 1 !important;
}

h3, h4, h5 {
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

@media (min-width: 1200px) {
  .h1, h1 {
    font-size: 3.4rem;
  }
}
@media (min-width: 1200px) {
  .h2, h2 {
    font-size: 2.4rem;
  }
}
.container {
  max-width: 1340px !important;
}

.more {
  display: none;
}

.form-control {
  padding: 0.675rem 0.75rem;
  border: 1px solid #989898;
}

    .form-control.form-control-sm {
        padding: 5px 12px;
    }

.form-control[type=file] {
  border: 0;
  border-color: #fff;
}

/*custom helpers*/
.mauto {
  margin: 0 auto;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.light-content h1, .light-content h2, .light-content h3, .light-content h4, .light-content h5, .light-content p, .light-content li {
  color: #fff;
}

@media (min-width: 768px) {
  .medium-header-md {
    font-size: 70px;
  }
}

@media (min-width: 768px) {
  .large-header-md {
    font-size: 112px;
  }
}

.light-grey {
  color: #b6b6b6;
}

.mt-10px {
  margin-top: 10px;
}

.mt-20px {
  margin-top: 20px;
}

.mt-30px {
  margin-top: 30px;
}

.mt-40px {
  margin-top: 40px;
}

.mt-50px {
  margin-top: 50px;
}

.mt-60px {
  margin-top: 60px;
}

.mt-70px {
  margin-top: 70px;
}

.mt-80px {
  margin-top: 80px;
}

.mb-10px {
  margin-bottom: 10px;
}

.mb-20px {
  margin-bottom: 20px;
}

.mb-30px {
  margin-bottom: 30px;
}

.mb-40px {
  margin-bottom: 40px;
}

.max-width-100px {
  max-width: 100px;
}

.max-width-50pc {
  max-width: 50%;
}

.max-width-200px {
  max-width: 200px;
}

.max-width-320px {
  max-width: 320px;
}

.max-width-380px {
  max-width: 380px;
}

.max-width-420px {
  max-width: 420px;
}

.max-width-480px {
  max-width: 480px;
}

.max-width-500px {
  max-width: 500px;
}

.max-width-520px {
  max-width: 520px;
}

.max-width-720px {
  max-width: 720px;
}

.max-width-780px {
  max-width: 780px;
}

.max-width-980px {
  max-width: 980px;
}

.max-width-1200px {
  max-width: 1200px;
}

.min-height-200px {
  min-height: 200px;
}

.min-height-220px {
  min-height: 220px;
}

.min-height-280px {
  min-height: 280px;
}

.min-height-300px {
  min-height: 300px;
}

.min-height-320px {
  min-height: 320px !important;
}

.min-height-360px {
  min-height: 360px;
}

.min-height-400px {
  min-height: 400px;
}

.min-height-420px {
  min-height: 420px;
}

.min-height-460px {
  min-height: 460px;
}

.min-height-640px {
  min-height: 640px;
}

.max-height-60px {
  max-height: 60px;
  width: auto;
}

.width-100 {
  width: 100%;
}

.height-100 {
  height: 100%;
}

.pr {
  position: relative;
}

.bottom {
  position: absolute;
  bottom: 20px;
}

.color-1 {
  color: #EFDBB2;
}

.color-2 {
  color: #EBC8AC;
}

.color-3 {
  color: #8C381C;
}

.color-4 {
  color: #A66372;
}

.color-5 {
  color: #C07C70;
}

.color-6 {
  color: #C3C6A8;
}

.color-7 {
  color: #A2AAAD;
}

.color-8 {
  color: #87968E;
}

.color-9 {
  color: #527A8A;
}

.color-10 {
  color: #2A5B6C;
}

.color-11 {
  color: #071437;
}

.color-gray-1 {
  color: #F7F7F7;
}

.bg-color-1 {
  background-color: #EFDBB2;
}

.bg-color-2 {
  background-color: #EBC8AC;
}

.bg-color-3 {
  background-color: #8C381C;
}

.bg-color-4 {
  background-color: #A66372;
}

.bg-color-5 {
  background-color: #C07C70;
}

.bg-color-6 {
  background-color: #C3C6A8;
}

.bg-color-7 {
  background-color: #A2AAAD;
}

.bg-color-8 {
  background-color: #87968E;
}

.bg-color-9 {
  background-color: #527A8A;
}

.bg-color-10 {
  background-color: #2A5B6C;
}

.bg-color-11 {
  background-color: #071437;
}

.bg-color-gray-1 {
  background-color: #F7F7F7;
}

.bg-colour-offblack {
  background-color: #1B1C1E;
}

.dark {
  color: #1B1C1E;
}

.gray {
  color: #989898;
}

.ul {
  text-decoration: underline;
}

.bold {
  font-weight: 600;
}

/*header*/
.container-topbar {
  padding: 5px 10px;
  font-size: 13px;
}

.navbar {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px); /* Adjust the blur intensity */
  z-index: 2;
  position: relative;
}

.top-bar-contacts {
  padding: 5px 20px;
  font-weight: 400;
}

.top-bar-item {
  padding: 5px 0;
  min-width: 110px;
}

.top-bar-item-3 {
  min-width: 63px;
}

.navbar-nav {
  width: 100%;
}

.nav-link {
  font-weight: 500;
}

.navbar-expand-lg .navbar-nav .nav-link {
  color: #000;
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 8px;
  color: #000;
}

.dropdown-toggle::after {
  display: none;
}

li.search img {
  max-width: 100px;
}

@media (min-width: 992px) {
  li.search {
    margin-left: auto;
  }
}
li.search a.nav-link {
  padding-right: 0 !important;
}

.ico {
  max-width: 18px;
}

.container-topbar a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}

/*custom helpers*/
.btn-wide {
  padding-left: 25px;
  padding-right: 25px;
}

.border-bottom {
  border-bottom: 1px solid #E2E2E2;
}

/* Custom CSS to style dropdown like a select input */
.dropdown-toggle-select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.675rem 0.75rem;
  border: 1px solid #989898;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  text-align: left;
  background-color: #fff;
  background-image: url(/assets/images/ico-select.svg);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border-radius: 0.375rem;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.dropdown-toggle-select:hover, .dropdown-toggle-select:focus, .dropdown-toggle-select:active, .btn.show {
  color: #495057 !important;
  background-color: #fff !important;
}

.form-check-input:checked {
  background: #000;
}

/* Adjust arrow icon position to look like a select */
.dropdown-toggle-select::after {
  margin-left: auto;
  margin-right: 0;
}

.col-product-index-filters select, .col-product-index-filters .dropdown-toggle-select {
  max-height: 48px !important;
  width: 100%;
}

@media (min-width: 992px) {
  .select-sort {
    max-width: 140px;
  }
}
.col-product p {
  font-size: 15px !important;
  margin-bottom: 0 !important;
}
.col-product .row-colours .pill-outline {
  color: #212529;
  border-color: #212529;
  font-size: 14px;
}

/* Ensure dropdown width is full like a select input */
.dropdown-menu {
  width: 150%;
}

/*mega menu*/
.dropdown-menu.mega-menu {
  left: 0; /* Align dropdown to the left */
  right: 0; /* Stretch dropdown to the right */
  width: 100vw; /* Full viewport width */
  top: 100%; /* Position below the nav */
  -webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1);
}
.dropdown-menu.mega-menu .col-md-3 {
  padding: 0;
}

.mega-menu-content {
  padding: 1rem; /* Add some padding to the inner content */
}

.mega-menu-content img {
  width: 100%; /* keep all images full width */
}

/*keeps mm dropdown relative to left of viewport not the dropdown nav item*/
.nav-item.dropdown {
  position: static;
}

.multiply {
  mix-blend-mode: multiply;
}

.container-align {
  max-width: 1315px !important;
}

/*bg asset classes*/
.bg-80-pc {
  background-size: 80%;
}

.bg-70-pc {
  background-size: 60%;
}

.bg-60-pc {
  background-size: 60%;
}

.bg-50-pc {
  background-size: 50%;
}

.bg-40-pc {
  background-size: 40%;
}

.bg-30-pc {
  background-size: 30%;
}

.bg-cover {
  background-size: cover;
}

.bg-no-r {
  background-repeat: no-repeat;
}

.bg-cc {
  background-position: center center;
}

.bg-cr {
  background-position: center right;
}

.bg-cl {
  background-position: center left;
}

.bg-tr {
  background-position: top right;
}

.bg-br {
  background-position: bottom right;
}

.bg1 {
  background-image: url(/assets/images/bg-1.jpg);
}

.bg2 {
  background-image: url(/assets/images/bg-2.jpg);
}

.bg3 {
  background-image: url(/assets/images/bg-3.jpg);
}

.bg4 {
  background-image: url(/assets/images/bg-4.jpg);
}

.bg5 {
  background-image: url(/assets/images/bg-5.jpg);
}

.bg8 {
  background-image: url(/assets/images/bg-8.jpg);
}

.bg10 {
  background-image: url(/assets/images/bg-10.png);
}

.bg12 {
  background-image: url(/assets/images/bg-12.jpg);
}

.bg13 {
  background-image: url(/assets/images/bg-13.jpg);
}

.product-code {
  color: #969696;
  font-size: 12px;
  margin-bottom: 3px;
}

/*icons*/
li.icon {
  padding-left: 25px;
  margin-bottom: 5px;
}

li.icon-styles {
  background: url(/assets/images/ico-styles.svg) no-repeat center left;
  background-size: 20px;
}

li.icon-colours {
  background: url(/assets/images/ico-colours.svg) no-repeat center left;
  background-size: 20px;
}

.icon-i {
  max-width: 14px;
}

/*content blocks*/
.gcode {
  font-size: 14px;
}

@media (min-width: 992px) {
  .package-image {
    position: absolute;
    left: 0;
    max-width: 500px;
  }
}

.pill-outline {
  display: inline-block;
  color: #969696;
  padding: 3px 18px;
  border: 1px solid #969696;
  border-radius: 30px;
  font-size: 13px;
  margin-bottom: 10px;
}
.pill-outline p, .pill-outline h2, .pill-outline h3, .pill-outline h4, .pill-outline h5 {
  margin-bottom: 0;
}

.pill-outline.black {
  color: #212529;
  border-color: 212529;
}

.pill-solid {
  display: inline-block;
  color: #fff;
  padding: 15.5px 36px;
  border-radius: 40px;
  margin-bottom: 20px;
  min-width: 220px;
}
.pill-solid p {
  margin-top: -5px;
}
.pill-solid p, .pill-solid h1, .pill-solid h2, .pill-solid h3, .pill-solid h4, .pill-solid h5 {
  margin-bottom: 0;
}

.block-content {
  margin-top: 30px;
}
.block-content a.underline {
  border-bottom: 1px solid;
  font-weight: 400;
}
.block-content .btn {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .block-content .btn {
    display: table;
  }
}

.container-cover--home {
  min-height: 764px;
  background: url(/assets/images/home-cover.jpg) no-repeat center center;
  z-index: 1;
  position: relative;
  background-size: cover;
}
@media (min-width: 768px) {
  .container-cover--home {
    padding-top: 83px;
    margin-top: -83px;
  }
}

.container-cover--subpage {
  min-height: 380px;
  z-index: 1;
}

.container-intro {
  position: relative;
}
.container-intro .av {
  max-width: 140px;
}
@media (min-width: 992px) {
  .container-intro .av {
    max-width: 220px;
  }
}
.container-intro .sig {
  max-width: 230px;
}
@media (min-width: 992px) {
  .container-intro .sig {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
}

.bg-cover-1 {
  background-image: url(/assets/images/bg-cover-1.jpg);
}

.row-4-col {
  min-height: 480px;
}
@media (min-width: 992px) {
  .row-4-col .btn {
    position: absolute;
    bottom: 20px;
  }
}

.row-4-col p {
  font-size: 13px;
  margin-bottom: 5px;
}

.pallette {
  max-width: 900px;
  margin-top: 120px;
}

.colour-option {
  height: 20px;
  width: 20px;
  margin-right: 5px;
  border-radius: 50%;
  display: block;
  border: 3px solid #fff;
}
@media (min-width: 992px) {
  .colour-option {
    height: 36px;
    width: 36px;
    margin-right: 15px;
  }
}

.colour-sample {
  height: 120px;
  width: 100%;
}

.underline-opacity-40 {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.colour-sample-diagonal {
    background: linear-gradient(135deg, var(--primary) 50%, var(--secondary) 50%);
}

/*breadrumb*/
.container-breadcrumb {
  padding: 10px;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  font-weight: 400;
}
.container-breadcrumb .active {
  font-weight: 600;
}
.container-breadcrumb .icon-chevron {
  max-width: 18px;
}
.container-breadcrumb ul {
  margin: 0;
}
.container-breadcrumb li, .container-breadcrumb a {
  padding-right: 5px;
  color: #b4b4b4;
}
.container-breadcrumb a:hover {
  color: #1B1C1E;
}

/*colour samples*/
.container-samples .new {
  visibility: hidden;
}
.container-samples .is-new {
  visibility: visible;
}
.container-samples .col-sample, .container-samples small {
  line-height: 1.2 !important;
}
.container-samples .col-sample .collapse, .container-samples small .collapse {
  line-height: 1.5 !important;
}
.container-samples small {
  font-weight: 300 !important;
}

/*product index*/
.tag {
  visibility: hidden;
}

.has-tag {
  visibility: visible;
}

.colour, .cord-colour {
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  overflow: hidden;
}

    .colour.colour-lg, .cord-colour.cord-colour-lg {
        width: 40px;
        height: 40px;
    }

.colour.light, .cord-colour.light {
    border: 1px solid #ddd;
}

@media (min-width: 992px) {
  .colour, .cord-colour {
    height: 28px;
    width: 28px;
  }

  .colour.colour-lg, .cord-colour.cord-colour-lg {
      height: 60px;
      width: 60px;
  }

  .colour.light, .cord-colour.light {
    }
}

.colour.selected, .cord-colour.selected {
    box-shadow: var(--bs-dark) 0 0 8px;
}

/*product single*/
/*swiper*/
.swiper-slide {
  overflow: hidden;
}

/*main image*/
.swiper-2 {
  width: 100%;
  max-width: 560px;
}

/*thumbnail nav*/
.swiper-1 {
  max-height: 495px;
}
.swiper-1 .swiper-slide {
  opacity: 0.2;
  transition: all 0.7s;
  -moz-transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -o-transition: all 0.7s;
}
.swiper-1 .swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-products-thumbs .swiper-slide {
  max-width: 150px;
  margin-bottom: 20px !important;
}

.swiper-products {
  margin-left: initial !important;
}

.col-prod-thumbnails img {
  max-width: 64%;
  margin-bottom: 20px;
}

.row-product-single-colors {
  max-width: 290px;
}

.swiper-button-next, .swiper-button-prev {
  color: #000;
}

.ico-zoom {
  margin-top: 20px;
  max-width: 20px;
}

#modal-search input {
  border-radius: 3px;
  background: url(/assets/images/icon-field-search-01.svg) no-repeat center right;
  background-size: 24px;
  border-color: #b6b6b6;
}

/*accordions*/
.accordion-button::after {
  display: none;
}

.accordion-button .icon {
  margin-left: auto;
}

.accordion-button .icon::before {
  content: "+";
  font-size: 25px;
  color: #212529;
}

.accordion-button:not(.collapsed) .icon::before {
  content: "×"; /* Change to 'x' when expanded */
}

.accordion-body {
  padding: 40px 20px;
}

.accordion-item {
  border-left: 0 !important;
  border-right: 0 !important;
}

.accordion-button {
  padding: 20px 15px 20px 15px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #212529 !important;
}

.accordion-button {
  color: #212529 !important;
}

.accordion-item:first-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion-button:focus {
  border-color: #212529 !important;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25) !important;
          box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25) !important;
}

/*hot spot*/
.hs-image-wrapper {
  position: relative;
  width: 100%;
}

.infobox {
  display: none;
}
@media (max-width: 767px) {
  .infobox {
    display: block !important;
  }
}

.hotspot.active {
  background: url(/assets/images/hotspot-active.svg) no-repeat center center;
  background-size: contain;
}

.hotspot {
    width: 48px;
    height: 48px;
    display: block;
    background: url(/assets/images/hotspot.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    opacity: 0.8;
}
.hotspot:hover {
  cursor: pointer;
}
@media (max-width: 767px) {
  .hotspot {
    display: none;
  }
}

.infobox {
  border: 1px solid #000;
  width: 100%;
}
@media (min-width: 768px) {
  .infobox {
    position: absolute;
    top: 20px;
    right: 20px;
    max-width: 700px;
  }
}

.infobox.active {
  display: block;
}

/*tooltip themes*/
.tooltip-black {
  /* Override Bootstrap Tooltip background and text color */
}
.tooltip-black .tooltip-inner {
  font-weight: bold;
  padding: 10px 20px;
  background-color: #000 !important; /* Set the background to white */
  color: #fff !important; /* Set the text color to black */
  font-size: 13px; /* You can adjust the font size if needed */
  border-radius: 4px; /* Optional: Add rounded corners if desired */
}
.tooltip-black .tooltip-arrow::before {
  border-top-color: #000 !important;
}

/* Override Bootstrap Tooltip background and text color */
.tooltip-white .tooltip-inner {
  font-weight: bold;
  padding: 10px 20px;
  background-color: white !important; /* Set the background to white */
  color: black !important; /* Set the text color to black */
  font-size: 13px; /* You can adjust the font size if needed */
  border-radius: 4px; /* Optional: Add rounded corners if desired */
}
.tooltip-white .tooltip-arrow::before {
  border-top-color: #fff !important;
}

/*footer*/
.socials img {
  max-width: 40px;
}

.container-footer-c2a {
  background: url(/assets/images/bg-footer-c2a.jpg) no-repeat center center;
  background-size: cover;
}
.container-footer-c2a h1, .container-footer-c2a h2, .container-footer-c2a h3, .container-footer-c2a h4, .container-footer-c2a h5 {
  color: #fff;
}

.container-footer li {
  margin-bottom: 3px;
}
.container-footer .col-logos img {
  width: 16%;
  margin-right: 5px;
}
@media (min-width: 576px) {
  .container-footer .col-logos img {
    max-width: 75px;
  }
}
.container-footer .socials a {
  padding-right: 5px;
}
.container-footer .legal a {
  padding-left: 10px;
}