:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --heading-color: #000000;
  --surface-color: #f5f5f5;
  --border-color: #e5e5e5;
  --primary-color: #000000;
  --accent-color: #4B535D;
}

[data-theme=dark] {
  --bg-color: #0a0a0a;
  --text-color: #e0e0e0;
  --heading-color: #ffffff;
  --surface-color: #1a1a1a;
  --border-color: #333333;
  --primary-color: #ffffff;
  --accent-color: #a0a0a0;
}

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --heading-color: #000000;
  --surface-color: #f5f5f5;
  --border-color: #e5e5e5;
  --primary-color: #000000;
  --accent-color: #4B535D;
}

[data-theme=dark] {
  --bg-color: #0a0a0a;
  --text-color: #e0e0e0;
  --heading-color: #ffffff;
  --surface-color: #1a1a1a;
  --border-color: #333333;
  --primary-color: #ffffff;
  --accent-color: #a0a0a0;
}

@font-face {
  font-family: "Aeonik Pro Trail";
  src: url(../font/Light.otf) format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro Trail";
  src: url(../font/Regular.otf) format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro Trail";
  src: url(../font/Regular.otf) format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro Trail";
  src: url(../font/Bold.otf) format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro Italic";
  src: url(../font/LightItalic.otf) format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro Trail";
  src: url(../font/RegularItalic.otf) format("opentype");
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: 300;
  font-family: "Aeonik Pro Trail", sans-serif;
  font-size: 13px;
}
@media (min-width: 992px) {
  * {
    font-size: 12px;
  }
}
@media (min-width: 1200px) {
  * {
    font-size: 13px;
  }
}
@media (min-width: 1350px) {
  * {
    font-size: 14px;
  }
}
@media (min-width: 1440px) {
  * {
    font-size: 15px;
  }
}
@media (min-width: 1600px) {
  * {
    font-size: 16px;
  }
}
@media (min-width: 1900px) {
  * {
    font-size: 18px;
  }
}
* {
  color: #000;
}

body {
  transition: 0.5s ease all;
  overflow-x: hidden;
}

.container-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 93.314%;
}
@media (min-width: 922px) {
  .container-content {
    max-width: 85.314%;
  }
}
@media (min-width: 1200px) {
  .container-content {
    max-width: 75.314%;
  }
}

.container-ctn {
  max-width: 92%;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .container-ctn {
    max-width: 95%;
  }
}
@media (min-width: 992px) {
  .container-ctn {
    max-width: 88.685%;
  }
}
@media (min-width: 1200px) {
  .container-ctn {
    max-width: 86.9799%;
  }
}

.container-related-products {
  max-width: 94%;
  margin-left: auto;
}
@media (min-width: 992px) {
  .container-related-products {
    max-width: 94.15%;
  }
}

ul {
  padding: 0;
  margin: 0;
}

button {
  border: unset;
}

a {
  text-decoration: unset !important;
}
a:focus, a:active {
  outline: unset !important;
  box-shadow: unset !important;
}

.p-0 {
  padding: 0 !important;
}

.commonPadding {
  padding-top: 50px;
  padding-bottom: 50px;
}
@media (min-width: 992px) {
  .commonPadding {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
@media (min-width: 1200px) {
  .commonPadding {
    padding-top: 74px;
    padding-bottom: 74px;
  }
}
@media (min-width: 1280px) {
  .commonPadding {
    padding-top: 78px;
    padding-bottom: 78px;
  }
}
@media (min-width: 1440px) {
  .commonPadding {
    padding-top: 82px;
    padding-bottom: 82px;
  }
}
@media (min-width: 1600px) {
  .commonPadding {
    padding-top: 86px;
    padding-bottom: 86px;
  }
}
@media (min-width: 1900px) {
  .commonPadding {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}

.commonPadding-pt {
  padding-top: 50px;
}
@media (min-width: 992px) {
  .commonPadding-pt {
    padding-top: 70px;
  }
}
@media (min-width: 1200px) {
  .commonPadding-pt {
    padding-top: 74px;
  }
}
@media (min-width: 1280px) {
  .commonPadding-pt {
    padding-top: 76px;
  }
}
@media (min-width: 1350px) {
  .commonPadding-pt {
    padding-top: 82px;
  }
}
@media (min-width: 1440px) {
  .commonPadding-pt {
    padding-top: 86px;
  }
}
@media (min-width: 1600px) {
  .commonPadding-pt {
    padding-top: 90px;
  }
}
@media (min-width: 1900px) {
  .commonPadding-pt {
    padding-top: 100px;
  }
}

.commonPadding-pb {
  padding-bottom: 50px;
}
@media (min-width: 992px) {
  .commonPadding-pb {
    padding-bottom: 70px;
  }
}
@media (min-width: 1200px) {
  .commonPadding-pb {
    padding-bottom: 74px;
  }
}
@media (min-width: 1280px) {
  .commonPadding-pb {
    padding-bottom: 76px;
  }
}
@media (min-width: 1350px) {
  .commonPadding-pb {
    padding-bottom: 82px;
  }
}
@media (min-width: 1440px) {
  .commonPadding-pb {
    padding-bottom: 86px;
  }
}
@media (min-width: 1600px) {
  .commonPadding-pb {
    padding-bottom: 90px;
  }
}
@media (min-width: 1900px) {
  .commonPadding-pb {
    padding-bottom: 100px;
  }
}

.commonPadding-120 {
  padding: 40px 0px;
}
@media (min-width: 768px) {
  .commonPadding-120 {
    padding: 60px 0px;
  }
}
@media (min-width: 992px) {
  .commonPadding-120 {
    padding: 70px 0px;
  }
}
@media (min-width: 1200px) {
  .commonPadding-120 {
    padding: 90px 0px;
  }
}
@media (min-width: 1350px) {
  .commonPadding-120 {
    padding: 95px 0px;
  }
}
@media (min-width: 1440px) {
  .commonPadding-120 {
    padding: 100px 0px;
  }
}
@media (min-width: 1600px) {
  .commonPadding-120 {
    padding: 110px 0px;
  }
}
@media (min-width: 1900px) {
  .commonPadding-120 {
    padding: 120px 0px;
  }
}

.position, .testimonials::after, .we-offer .tabLetter::after, .we-offer-right picture::after, .footer-copyright .policy-links li + li::before, .footer-copyright .footer-left p + ul::before,
.footer-copyright .footer-left ul + p::before, label.error::after, .list ul li::before {
  content: "";
  position: absolute;
}

.wh-100 {
  width: 100%;
  height: 100%;
}

.slick-nav {
  cursor: pointer;
  width: 100%;
  transform: translateY(-50%);
  align-items: self-end;
  top: 38%;
}
@media (min-width: 1900px) {
  .slick-nav {
    width: 100%;
  }
}
.slick-nav > div {
  position: relative;
  display: flex;
  align-items: center;
  transition: 0.5s ease all;
}

.jq-stars {
  display: inline-block;
}

.jq-rating-label {
  font-size: 22px;
  display: inline-block;
  position: relative;
  vertical-align: top;
  font-family: helvetica, arial, verdana;
}

.jq-star {
  cursor: pointer;
}

.jq-star-svg {
  width: 100%;
  height: 100% !important;
}

.jq-star-svg polygon {
  stroke-linejoin: round;
}

.tab-content > .tab-pane {
  display: block;
  height: 0;
  overflow: hidden;
}

.tab-content > .active {
  height: auto;
}

/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 80px;
}

roll::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 10px;
  /* GAP using border and background clip */
  border: 2px solid transparent;
  background-clip: padding-box;
  margin: 10px 0;
  /* Adds top & bottom gap (optional) */
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-2 {
  margin-top: 20px !important;
}

.mt-3 {
  margin-top: 30px !important;
}

.mt-4 {
  margin-top: 40px !important;
}

.bg-unset {
  background: unset !important;
}

picture,
article {
  display: block;
}

.w-fit {
  width: -moz-fit-content !important;
  width: fit-content !important;
}

.py-0 {
  padding: 0 !important;
}

li {
  list-style: none;
}

.list ul li {
  position: relative;
  padding-left: clamp(18px, 1.88vw, 36px);
}
.list ul li::before {
  background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.1006 12H3.10058" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.1006 18L21.1006 12L15.1006 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  left: 0;
  width: clamp(15px, 1.25vw, 24px);
  height: clamp(15px, 1.25vw, 24px);
  top: 0px;
}
.list ul li + li {
  margin-top: clamp(8px, 1vw, 18px);
}
.list.listDark ul li::before {
  filter: invert(1);
}

span.error {
  border: 1px solid #FF4040 !important;
}

.error-message {
  color: #FF4040;
  display: none;
  font-size: 12px;
  position: absolute;
  bottom: -20px;
  left: 0;
  line-height: normal;
  z-index: 1;
  background: #fff;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0px 10px;
  border-radius: 5px;
  margin-bottom: 3px;
}

.iti {
  width: 100%;
}

.iti__flag-container {
  padding-left: 6px;
}

.iti--allow-dropdown input[type=tel] {
  padding-left: 71px;
}

.iti__country-list {
  z-index: 9;
}

.iti__arrow {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M12.75 7.5L9 11.25L5.25 7.5" stroke="%23414A66" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  border: unset !important;
  transition: 0.5s ease all;
  margin-left: 10px;
}

.iti__arrow--up {
  transform: rotate(180deg);
  transition: 0.5s ease all;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: unset;
}

.iti__selected-flag div:first-child {
  transform: scale(1.4);
}

.iti--allow-dropdown .iti__flag-container,
.iti--separate-dial-code .iti__flag-container {
  left: 5px;
}

textarea {
  resize: none;
}

input,
textarea,
select {
  outline: unset;
  border: unset;
}
input:focus, input:focus-visible, input:focus-within,
textarea:focus,
textarea:focus-visible,
textarea:focus-within,
select:focus,
select:focus-visible,
select:focus-within {
  outline: unset;
  border: unset;
}

select {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12" fill="none"> <path d="M19.513 0.438696C19.2317 0.157489 18.8502 -0.000484467 18.4525 -0.000484467C18.0547 -0.000484467 17.6733 0.157489 17.392 0.438696L9.96697 7.8637L2.54197 0.438696C2.25907 0.165459 1.88016 0.014267 1.48687 0.0176849C1.09357 0.021102 0.717352 0.178856 0.43924 0.456967C0.161127 0.73508 0.00337601 1.1113 -4.19617e-05 1.50459C-0.00345993 1.89789 0.147732 2.27679 0.420969 2.5597L8.90647 11.0452C9.18776 11.3264 9.56922 11.4844 9.96697 11.4844C10.3647 11.4844 10.7462 11.3264 11.0275 11.0452L19.513 2.5597C19.7942 2.2784 19.9521 1.89694 19.9521 1.4992C19.9521 1.10145 19.7942 0.719987 19.513 0.438696Z" fill="black"/> </svg>');
  border: unset;
  width: 100%;
  background-repeat: no-repeat;
  background-position: 95%;
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  appearance: none;
}
@media (max-width: 575px) {
  select {
    background-position: 96%;
    background-size: 14px;
  }
}
select:focus-visible {
  outline: unset;
}

@media (min-width: 992px) {
  .justify-content-lg-between {
    justify-content: space-between;
  }
}

.navbar-toggler {
  background: unset;
  border: unset;
  border-radius: unset;
}

.navbar-toggler:focus {
  border: unset;
  outline: unset;
  box-shadow: unset;
}

input[type=date] {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-align: left;
}

#fadeSection {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  /* Smooth transition */
}

/* Class to change opacity to 1 */
.visible {
  opacity: 1 !important;
  transition: opacity 1s ease-in-out;
}

.formGroup {
  position: relative;
}

input.error,
textarea.error {
  border: 1px solid #FF4040 !important;
}

label.error {
  color: #FF4040 !important;
  position: relative;
  width: -moz-fit-content !important;
  width: fit-content !important;
}
label.error::after {
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8ZM8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM5.74485 5.74477C5.96282 5.52681 6.31621 5.52681 6.53418 5.74477L7.99999 7.21058L9.46578 5.74479C9.68375 5.52682 10.0371 5.52682 10.2551 5.74479C10.4731 5.96276 10.4731 6.31615 10.2551 6.53412L8.78932 7.99991L10.2551 9.46569C10.4731 9.68366 10.4731 10.0371 10.2551 10.255C10.0371 10.473 9.68373 10.473 9.46576 10.255L7.99999 8.78924L6.53419 10.255C6.31623 10.473 5.96283 10.473 5.74487 10.255C5.5269 10.0371 5.5269 9.68367 5.74487 9.4657L7.21066 7.99991L5.74485 6.5341C5.52688 6.31613 5.52688 5.96274 5.74485 5.74477Z" fill="%23FF4040"/></svg>');
  background-size: cover;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
}

/* Hide number input spinner */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  /* Firefox */
}

.hidden {
  display: none;
}

.show {
  display: inline-block;
}

/* Fullscreen Loader */
.visibility-hidden {
  visibility: hidden;
}

.dropdown-menu {
  width: 100%;
  margin: auto !important;
  background: unset;
}
.dropdown-menu button {
  color: #fff;
}

.dropdown-item.active {
  background: unset !important;
}
.dropdown-item.active:hover {
  color: #000 !important;
}

.dropdown-item:hover {
  background: #fff !important;
}

.dropDown {
  margin-bottom: 24px;
}
.dropDown button {
  color: #fff;
  font-weight: 400;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  position: relative;
  padding: 8px 20px 8px 20px;
  white-space: pre-line;
}
.dropDown button::after {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  border: unset;
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.0889 6.19526C13.3493 6.45561 13.3493 6.87772 13.0889 7.13807L8.4468 11.7802C8.32178 11.9052 8.15221 11.9754 7.9754 11.9754C7.79859 11.9754 7.62902 11.9052 7.50399 11.7802L2.86188 7.13807C2.60153 6.87772 2.60153 6.45561 2.86188 6.19526C3.12223 5.93491 3.54434 5.93491 3.80469 6.19526L7.9754 10.366L12.1461 6.19526C12.4065 5.93491 12.8286 5.93491 13.0889 6.19526Z" fill="%23ffff"/></svg>');
}
.dropDown {
  border-radius: 8px;
  background: #000;
  font-size: 16px;
  line-height: 24px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  border-radius: 8px;
}

.select2-container--default .select2-results > .select2-results__options {
  padding: 8px;
  background-color: #2f353f;
}
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track {
  background-color: #2f353f;
}
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
  background: #979A9C;
}

.select2-dropdown {
  background-color: transparent;
}

.select2-results__option {
  padding: 4px 12px;
  line-height: 150%;
  margin-bottom: 4px;
}

.enquiryBtn {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  color: #fff;
  background-color: #000;
  padding: 2.948% 11.205%;
}

.slick-track {
  margin-left: 0;
}

.fancybox-container {
  z-index: 100000000000000000;
}

.p-26 {
  font-weight: 400;
  font-family: "IBM Plex Serif";
  font-size: 16px;
  line-height: 138.462%;
}
@media (min-width: 768px) {
  .p-26 {
    font-size: 22px;
  }
}
@media (min-width: 992px) {
  .p-26 {
    font-size: 15px;
  }
}
@media (min-width: 1200px) {
  .p-26 {
    font-size: 17px;
  }
}
@media (min-width: 1360px) {
  .p-26 {
    font-size: 18px;
  }
}
@media (min-width: 1440px) {
  .p-26 {
    font-size: 19px;
  }
}
@media (min-width: 1600px) {
  .p-26 {
    font-size: 22px;
  }
}
@media (min-width: 1900px) {
  .p-26 {
    font-size: 26px;
  }
}

.theme-btn {
  text-transform: uppercase;
  width: -moz-fit-content;
  width: fit-content;
  transition: 0.3s ease all;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  line-height: normal;
  font-weight: 700;
  border-radius: 5px;
  padding: 9px 14px;
  font-size: clamp(12px, 0.84vw, 16px);
}
@media (min-width: 768px) {
  .theme-btn {
    padding: 10px 17px;
  }
}
@media (min-width: 992px) {
  .theme-btn {
    padding: 11px 18px;
  }
}
@media (min-width: 1200px) {
  .theme-btn {
    padding: 12px 20px;
  }
}
@media (min-width: 1350px) {
  .theme-btn {
    padding: 13px 21px;
  }
}
@media (min-width: 1440px) {
  .theme-btn {
    padding: 14px 22px;
  }
}
@media (min-width: 1600px) {
  .theme-btn {
    padding: 15px 23px;
  }
}
@media (min-width: 1900px) {
  .theme-btn {
    padding: 16px 24px;
  }
}
.theme-btn.round {
  color: #000;
  border-radius: 80px;
}
.theme-btn.round:hover {
  background-color: black;
  color: #fff;
}
.theme-btn.bgBlack {
  background-color: #000;
  color: #fff;
}
.theme-btn.bgBlack:hover {
  color: #000;
  background-color: rgb(239.7, 239.7, 239.7);
}
.theme-btn.bgWhite {
  background: #fff;
  color: #000;
}
.theme-btn.bgWhite:hover {
  color: #7a7a7a;
  background-color: rgb(239.7, 239.7, 239.7);
}

.slick-nav {
  justify-content: space-between;
  margin-left: auto;
  position: absolute;
  z-index: 0;
}
.slick-nav div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.slick-nav div svg {
  height: auto;
  width: 16px;
}
@media (min-width: 1440px) {
  .slick-nav div svg {
    width: 16px;
  }
}
@media (min-width: 1600px) {
  .slick-nav div svg {
    width: 18px;
  }
}
@media (min-width: 1900px) {
  .slick-nav div svg {
    width: 20px;
  }
}
.slick-nav div svg:hover path {
  fill: #B39775;
}

.modal-backdrop.show {
  opacity: 1;
  background: #000 !important;
  opacity: 0.7;
}

.load {
  line-height: 128.571%;
  font-weight: 600;
}

.mobile-menu {
  padding-bottom: 11px;
  display: flex;
  justify-content: flex-end;
  align-items: end;
}
.mobile-menu button {
  margin: 0;
  padding: 6px 19px;
  border: 1px solid #d6dffa;
  border-radius: 8px;
  color: rgba(46, 49, 146, 0.6588235294);
}

.p-36 {
  line-height: 144.444%;
  font-size: clamp(16px, 1.9vw, 36px);
}

.bgTheme {
  background-color: #000;
}
.bgTheme h2 {
  color: #fff;
}
.bgTheme p {
  color: #AEADAD;
}

.load {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.load div {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #000000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.fancybox-button svg {
  filter: invert(1);
}

section,
footer {
  z-index: 2;
  position: relative;
}

.h-21, .testimonials .head h2, .we-offer h2, .work-section .head h2, .footer-connect form div.title {
  font-size: clamp(16px, 1.13vw, 21.6px);
}

.submit-btn {
  line-height: 133.333%;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 80px;
  background: #000;
  color: #fff;
  padding: 18px 40px;
}
@media (min-width: 575px) {
  .submit-btn {
    padding: 20px 45px;
  }
}
@media (min-width: 768px) {
  .submit-btn {
    padding: 15px 30px;
  }
}
@media (min-width: 992px) {
  .submit-btn {
    padding: 20px 44px;
  }
}
@media (min-width: 1200px) {
  .submit-btn {
    padding: 22px 50px;
  }
}
@media (min-width: 1350px) {
  .submit-btn {
    padding: 24px 52px;
  }
}
@media (min-width: 1440px) {
  .submit-btn {
    padding: 27px 63px;
  }
}
@media (min-width: 1600px) {
  .submit-btn {
    padding: 27px 63px;
  }
}
@media (min-width: 1900px) {
  .submit-btn {
    padding: 27px 63px;
  }
}
.submit-btn:hover {
  background-color: #f3f3f3;
  color: #000;
}

.inner-head {
  margin-bottom: 35px;
}
@media (min-width: 768px) {
  .inner-head {
    margin-bottom: clamp(25px, 2.5521vw, 49px);
  }
}

header {
  transition: 0.7s ease all;
  padding-top: 18px;
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 999;
}
@media (min-width: 768px) {
  header {
    padding-top: 25px;
  }
}
@media (min-width: 992px) {
  header {
    padding-top: 30px;
  }
}
@media (min-width: 1200px) {
  header {
    padding-top: 33px;
  }
}
@media (min-width: 1350px) {
  header {
    padding-top: 35px;
  }
}
@media (min-width: 1440px) {
  header {
    padding-top: 38px;
  }
}
@media (min-width: 1600px) {
  header {
    padding-top: 41px;
  }
}
@media (min-width: 1900px) {
  header {
    padding-top: 43px;
  }
}
header .brand {
  width: 150px;
}
@media (min-width: 768px) {
  header .brand {
    width: 178px;
  }
}
header .brand img {
  width: 100%;
  height: auto;
}
header nav ul {
  gap: clamp(30px, 2.35vw, 61px);
}
header nav a {
  text-decoration: unset;
  color: #000;
  text-transform: uppercase;
  line-height: 114.286%;
  font-size: 14px;
}

.site-header {
  transition: color 0.3s ease;
}

.site-header.light .brand {
  transition: 0.5s ease all;
  filter: invert(1);
}
.site-header.light nav a {
  color: #fff;
  transition: 0.6s ease all;
}
.site-header.light button path {
  stroke: #fff;
  transition: 0.7s ease all;
}

.site-header.dark .brand {
  transition: 0.5s ease all;
  filter: invert(0);
}
.site-header.dark nav a {
  color: #000;
  transition: 0.6s ease all;
}
.site-header.dark button path {
  stroke: #000;
  transition: 0.7s ease all;
}

.site-header.scrolled {
  background: #fff;
  padding: 20px 0px;
  transition: 0.5s ease all;
}
.site-header.scrolled .brand {
  transition: 0.5s ease all;
  filter: invert(0);
}
.site-header.scrolled nav a {
  color: #000;
  transition: 0.6s ease all;
}
.site-header.scrolled button path {
  stroke: #000;
  transition: 0.7s ease all;
}

.header-right {
  gap: 38px;
}

.mobDropDown {
  position: relative;
}
.mobDropDown button {
  background: unset;
}
.mobDropDown button:focus-visible {
  border: unset;
  overflow: unset;
}
.mobDropDown button svg {
  height: auto;
  width: clamp(15px, 1.3vw, 24px);
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}
.mobDropDown button.show svg {
  transition: transform 0.5s ease;
  transform: rotate(180deg);
}
.mobDropDown .dropdown-menu {
  position: unset !important;
  transform: translate(0) !important;
  border: unset;
  padding-top: 15px;
  padding-left: 15px;
  background: unset;
}
.mobDropDown .dropdown-menu li:hover {
  background: #fff;
}
.mobDropDown .dropdown-menu li:hover a {
  color: #000;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.footer-cta {
  background: #FFF;
  padding-top: clamp(35px, 3.646vw, 70px);
  padding-bottom: clamp(35px, 3.646vw, 70px);
}
.footer-cta h2 {
  line-height: 106.25%;
  margin-bottom: clamp(8px, 0.834vw, 16px);
}
.footer-cta p {
  font-size: clamp(12px, 0.833vw, 16px);
}
.footer-cta-text {
  width: 100%;
}
@media (max-width: 767px) {
  .footer-cta-text {
    margin-bottom: 15px;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .footer-cta-text {
    width: 74.227%;
  }
}
.footer-cta .d-flex {
  z-index: 1;
  position: relative;
}
.footer-cta h2 {
  font-weight: 700;
}

footer {
  background: #000;
  background-color: #000;
}
@media (max-width: 991px) {
  footer {
    padding-bottom: 110px;
  }
}
footer a,
footer p {
  display: block;
}
footer p,
footer a,
footer li {
  color: #787878;
  line-height: normal;
}

.footer-connect {
  padding-bottom: clamp(30px, 4.5313vw, 87px);
}
.footer-connect .formGroup {
  width: 100%;
}
@media (max-width: 767px) {
  .footer-connect .formGroup {
    margin-top: 15px;
  }
}
@media (min-width: 768px) {
  .footer-connect .formGroup {
    width: 46.481%;
  }
}
.footer-connect form {
  width: 100%;
}
.footer-connect form p {
  color: #787878;
}
.footer-connect form div.title {
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.footer-connect form p {
  color: #FFF;
  font-size: clamp(13px, 0.84vw, 16px);
}
.footer-connect form input::-moz-placeholder {
  font-weight: 300;
  color: #fff;
  font-size: clamp(13px, 0.84vw, 16px);
}
.footer-connect form input::placeholder {
  font-weight: 300;
  color: #fff;
  font-size: clamp(13px, 0.84vw, 16px);
}
.footer-connect form input {
  color: #fff;
  font-weight: 300;
  width: 100%;
  border-radius: 100px;
  border: 1px solid #5B5B5B;
  background: #222222;
  padding-left: clamp(15px, 1.25vw, 32px);
  padding-right: clamp(20px, 3.34vw, 56px);
  height: clamp(38px, 3.03vw, 61px);
  font-size: clamp(13px, 0.84vw, 16px);
}
.footer-connect form button {
  background: unset;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 992px) {
  .footer-connect form button {
    right: 32px;
  }
}
.footer-connect form button svg {
  width: clamp(16px, 1.25vw, 24px);
  height: clamp(16px, 1.25vw, 24px);
}
.footer-connect form button svg:hover path {
  fill: #726e6e;
}

.footer-main {
  padding-bottom: clamp(34px, 5.79vw, 111px);
  border-bottom: 1px solid #646A70;
}
@media (max-width: 991px) {
  .footer-main-row {
    gap: 20px 0px;
  }
}
.footer-main-row picture {
  width: 100%;
}
.footer-main-row picture img {
  width: 45%;
}
@media (min-width: 768px) {
  .footer-main-row picture {
    width: 19.884%;
  }
  .footer-main-row picture img {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .footer-main-row picture {
    width: 10.884%;
  }
}
.footer-main-row picture img {
  height: auto;
}
.footer-main .contact-information {
  width: 100%;
}
@media (min-width: 768px) {
  .footer-main .contact-information {
    width: 25.372%;
  }
}
@media (min-width: 1200px) {
  .footer-main .contact-information {
    width: 14.372%;
  }
}
.footer-main div {
  color: #FFF;
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 20px);
}
@media (max-width: 575px) {
  .footer-main div {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.footer-main span {
  text-transform: uppercase;
  display: block;
  color: #FFF;
  font-weight: 600;
  font-size: clamp(14px, 1.05vw, 20px);
  margin-bottom: clamp(8px, 0.9vw, 16px);
}
.footer-main li + li {
  margin-top: clamp(8px, 0.94vw, 18px);
}
.footer-main .contact-information div + div {
  margin-top: clamp(8px, 1vw, 16px);
}
.footer-main .contact-information div a {
  margin-top: clamp(6px, 0.6771vw, 13px);
}
.footer-main a:hover {
  color: #fff;
}

.footer-copyright {
  padding: 15px 0px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .footer-copyright > div {
    gap: 20px;
  }
}
@media (min-width: 992px) {
  .footer-copyright {
    padding-top: clamp(8px, 1.407vw, 27px);
    padding-bottom: clamp(8px, 2.4479vw, 47px);
  }
}
.footer-copyright p,
.footer-copyright li,
.footer-copyright a {
  color: #fff;
}
.footer-copyright p span {
  color: #464646;
  font-weight: 600;
}
.footer-copyright p {
  align-items: center;
  gap: 6px;
}
@media (max-width: 767px) {
  .footer-copyright p {
    text-align: center;
  }
  .footer-copyright p a {
    display: inline-block;
  }
}
@media (min-width: 768px) {
  .footer-copyright p {
    display: flex;
  }
}
@media (max-width: 767px) {
  .footer-copyright .footer-left {
    gap: 10px 0px;
  }
  .footer-copyright .footer-left p,
  .footer-copyright .footer-left ul {
    width: 100%;
  }
}
.footer-copyright .footer-left p + ul,
.footer-copyright .footer-left ul + p {
  position: relative;
}
@media (min-width: 768px) {
  .footer-copyright .footer-left p + ul,
  .footer-copyright .footer-left ul + p {
    padding-left: 16px;
    margin-left: 16px;
  }
  .footer-copyright .footer-left p + ul::before,
  .footer-copyright .footer-left ul + p::before {
    width: 2px;
    height: 100%;
    background-color: #848484;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (max-width: 767px) {
  .footer-copyright .policy-links {
    order: -1;
  }
}
.footer-copyright .policy-links li,
.footer-copyright .policy-links a {
  line-height: normal;
  display: flex;
  align-items: center;
}
.footer-copyright .policy-links li {
  position: relative;
}
.footer-copyright .policy-links li + li {
  margin-left: 10px;
  padding-left: 10px;
}
.footer-copyright .policy-links li + li::before {
  width: 2px;
  height: 75%;
  background-color: #848484;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.footer-copyright a:hover {
  color: #757575;
}
@media (max-width: 767px) {
  .footer-copyright ul {
    width: 100%;
    justify-content: center;
  }
}
.footer-copyright .social {
  gap: 15px;
}
@media (min-width: 1200px) {
  .footer-copyright .social {
    gap: clamp(20px, 2.24vw, 43px);
  }
}
@media (max-width: 575px) {
  .footer-copyright .social {
    margin-bottom: 20px;
    order: -1;
    width: 100%;
    justify-content: center;
  }
}
.footer-copyright .social svg {
  height: 18px;
  width: 18px;
}
@media (min-width: 576px) {
  .footer-copyright .social svg {
    width: clamp(20px, 1.9vw, 24px);
    height: clamp(20px, 1.9vw, 24px);
  }
}
.footer-copyright .social svg {
  transition: 0.5s ease all;
  transform: translateY(0px);
}
.footer-copyright .social svg:hover {
  transition: 0.5s ease all;
  transform: translateY(-5px);
}
.footer-copyright .social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
}
@media (min-width: 768px) {
  .footer-copyright .social li a {
    min-width: 44px;
    min-height: 44px;
  }
}

.offcanvas {
  width: 100%;
  z-index: 9999999;
}

.mobile_left_menu {
  border: none;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px 0px 0px 20px;
}
@media (min-width: 576px) {
  .mobile_left_menu {
    width: 350px;
  }
}
.mobile_left_menu .offcanvas-header {
  padding: 20px 30px;
}
@media (min-width: 992px) {
  .mobile_left_menu .offcanvas-header {
    padding-top: 40px;
  }
}
.mobile_left_menu .offcanvas-header .btn-close {
  opacity: 1;
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none !important;
}
.mobile_left_menu .offcanvas-header .btn-close svg {
  width: 20px;
  height: 20px;
  transition: 0.3s ease all;
}
.mobile_left_menu .offcanvas-header .btn-close:hover svg {
  transform: rotate(90deg);
}
.mobile_left_menu .offcanvas-body {
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mobile_left_menu .offcanvas-body nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile_left_menu .offcanvas-body nav li {
  margin-bottom: 10px;
  opacity: 0;
  animation: slideUpFade 0.5s ease forwards;
}
@media (min-width: 992px) {
  .mobile_left_menu .offcanvas-body nav li {
    margin-bottom: 25px;
  }
}
.mobile_left_menu .offcanvas-body nav li:nth-child(1) {
  animation-delay: 0.1s;
}
.mobile_left_menu .offcanvas-body nav li:nth-child(2) {
  animation-delay: 0.2s;
}
.mobile_left_menu .offcanvas-body nav li:nth-child(3) {
  animation-delay: 0.3s;
}
.mobile_left_menu .offcanvas-body nav li:nth-child(4) {
  animation-delay: 0.4s;
}
.mobile_left_menu .offcanvas-body nav li:nth-child(5) {
  animation-delay: 0.5s;
}
.mobile_left_menu .offcanvas-body nav li:nth-child(6) {
  animation-delay: 0.6s;
}
.mobile_left_menu .offcanvas-body nav li:last-child {
  margin-bottom: 0;
}
.mobile_left_menu .offcanvas-body nav li a {
  text-decoration: unset;
  font-size: clamp(18px, 4vw, 25px);
  font-weight: 300;
  text-transform: uppercase;
  color: #000;
  line-height: 100%;
  transition: 0.3s ease all;
  display: inline-block;
  padding: 10px 0;
}
.mobile_left_menu .offcanvas-body nav li a:hover {
  color: #464646;
  transform: translateX(10px);
}

.modal-content {
  border-radius: 20px;
  box-shadow: 0 0 10px 10px rgba(54, 54, 54, 0.11);
  padding: clamp(25px, 1.563vw, 30px);
}
.modal-content .title {
  line-height: 100%;
  font-size: clamp(20px, 1.88vw, 36px);
  font-weight: 700;
  margin-bottom: clamp(20px, 2.344vw, 45px);
}
.modal-content .modal-dialog {
  width: 100%;
}
.modal-content .btn-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #D9D9D9;
  z-index: 1;
  right: clamp(10px, 3.23vw, 30px);
  top: clamp(10px, 3.23vw, 30px);
  width: clamp(30px, 3.23vw, 50px);
  height: clamp(30px, 3.23vw, 50px);
}
.modal-content .btn-close svg {
  width: clamp(10px, 3.23vw, 17px);
}
.modal-content input,
.modal-content select {
  height: clamp(38px, 3.23vw, 62px);
}
.modal-content textarea {
  height: 80px;
  padding-top: clamp(10px, 1.094vw, 21px);
}
@media (min-width: 992px) {
  .modal-content textarea {
    height: clamp(100px, 8.99vw, 171px);
  }
}
.modal-content input::-moz-placeholder, .modal-content textarea::-moz-placeholder {
  line-height: 100%;
  font-size: clamp(13px, 0.886vw, 18px);
}
.modal-content select,
.modal-content input,
.modal-content textarea,
.modal-content input::placeholder,
.modal-content textarea::placeholder {
  line-height: 100%;
  font-size: clamp(13px, 0.886vw, 18px);
}
.modal-content input,
.modal-content textarea,
.modal-content select {
  font-weight: 300;
  color: #000;
  width: 100%;
  border-radius: 0px;
  border: 1px solid #000;
  background-color: #FFF;
  padding-left: 12px;
  padding-right: 12px;
}
@media (min-width: 768px) {
  .modal-content input,
  .modal-content textarea,
  .modal-content select {
    padding-left: clamp(8px, 0.7vw, 22px);
    padding-right: clamp(8px, 0.7vw, 22px);
  }
}
.modal-content input::-moz-placeholder, .modal-content textarea::-moz-placeholder, .modal-content select::-moz-placeholder {
  color: #000;
}
.modal-content input::placeholder,
.modal-content textarea::placeholder,
.modal-content select::placeholder {
  color: #000;
}
.modal-content .form-group {
  position: relative;
}
.modal-content .buttonGroup {
  gap: 12px;
  margin-top: 15px;
}
.modal-content .buttonGroup button + button {
  border: 1px solid #000;
}
.modal-content .buttonGroup button + button:hover {
  border: 1px solid #7a7a7a;
}
.modal-content form {
  gap: 18px 0px;
}
.modal-content .col--4 {
  width: 100%;
}
@media (min-width: 768px) {
  .modal-content .col--4 {
    width: 48.277%;
  }
}
@media (min-width: 992px) {
  .modal-content .col--4 {
    width: 32.277%;
  }
}
@media (min-width: 767px) and (max-width: 991px) {
  .modal-content .col--4 + .col--4 + .col--4 {
    width: 100%;
  }
}
.modal-content .col--6 {
  width: 100%;
}
@media (min-width: 768px) {
  .modal-content .col--6 {
    width: 48.886%;
  }
}

.ProductEnquiryForm .modal-dialog,
.downloadBrochureForm .modal-dialog {
  max-width: 675px;
}
@media (min-width: 1200px) {
  .ProductEnquiryForm .modal-dialog,
  .downloadBrochureForm .modal-dialog {
    max-width: 35.304%;
  }
}

.siteEnquiryForm .modal-dialog {
  max-width: 95%;
}
@media (min-width: 1200px) {
  .siteEnquiryForm .modal-dialog {
    max-width: 1067px;
  }
}
.siteEnquiryForm .modal-content {
  padding: 0;
  overflow: hidden;
  border: none;
}
.siteEnquiryForm .btn-close {
  background-color: #E8E8E8;
  z-index: 10;
}
.siteEnquiryForm .modal-body-content {
  align-items: stretch;
}
.siteEnquiryForm .modal-image {
  width: 34.302%;
  padding: 0;
  position: relative;
  background: #f0f0f0;
}
@media (max-width: 767px) {
  .siteEnquiryForm .modal-image {
    display: none;
  }
}
.siteEnquiryForm .modal-image img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}
.siteEnquiryForm .modal-form {
  width: 100%;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* background: url(...) removed */
}
@media (min-width: 768px) {
  .siteEnquiryForm .modal-form {
    width: 64.699%;
    padding: 40px;
  }
}
@media (min-width: 1200px) {
  .siteEnquiryForm .modal-form {
    padding: 45px 37px 30px 30px;
  }
}
.siteEnquiryForm .modal-form .title {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 30px;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .siteEnquiryForm .modal-form .title {
    font-size: 24px;
    margin-bottom: 40px;
  }
}
.siteEnquiryForm .modal-form form input,
.siteEnquiryForm .modal-form form select,
.siteEnquiryForm .modal-form form textarea {
  border: 1px solid #000;
  border-radius: 0;
  padding: 12px 15px;
  font-size: clamp(13px, 0.886vw, 18px);
  color: #000;
  height: 50px;
}
.siteEnquiryForm .modal-form form input::-moz-placeholder, .siteEnquiryForm .modal-form form select::-moz-placeholder, .siteEnquiryForm .modal-form form textarea::-moz-placeholder {
  color: #555;
}
.siteEnquiryForm .modal-form form input::placeholder,
.siteEnquiryForm .modal-form form select::placeholder,
.siteEnquiryForm .modal-form form textarea::placeholder {
  color: #555;
}
.siteEnquiryForm .modal-form form input:focus,
.siteEnquiryForm .modal-form form select:focus,
.siteEnquiryForm .modal-form form textarea:focus {
  outline: none;
  border-color: #333;
}
.siteEnquiryForm .modal-form form textarea {
  height: 120px;
  resize: none;
  padding-top: 15px;
}
.siteEnquiryForm .modal-form form .buttonGroup {
  margin-top: 9px;
}
.siteEnquiryForm .modal-form form .buttonGroup .btn {
  min-width: 140px;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 100px;
}
.siteEnquiryForm .modal-form form .buttonGroup .btn.bgBlack {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
.siteEnquiryForm .modal-form form .buttonGroup .btn.bgWhite {
  background: #fff;
  color: #000;
  border: 1px solid #E8E8E8;
}
.siteEnquiryForm .modal-form form .buttonGroup .btn.bgWhite:hover {
  background: #f5f5f5;
}
.siteEnquiryForm .modal-form .modal-bg-svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 165px;
  height: 351px;
  z-index: 0;
  pointer-events: none;
}
.siteEnquiryForm .modal-form .modal-bg-svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2s ease-out forwards;
}
.siteEnquiryForm .modal-form > *:not(.modal-bg-svg) {
  position: relative;
  z-index: 1;
}
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.banner h1 {
  line-height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  position: absolute;
  top: 75%;
  z-index: 9;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}
@media (min-width: 992px) {
  .banner h1 {
    text-align: center;
    width: 100%;
    top: 50%;
  }
}
.banner h1 span,
.banner h1 strong {
  width: 100%;
  display: block;
}
@media (max-width: 991px) {
  .banner h1 span,
  .banner h1 strong {
    color: #fff;
  }
}
.banner h1 span {
  font-weight: 500;
  line-height: 100%;
}
.banner h1 strong {
  line-height: 112.5%;
}
.banner .heroSwiper {
  width: 100%;
  height: 60vh;
}
@media (min-width: 992px) {
  .banner .heroSwiper {
    height: 100vh;
  }
}
.banner .swiper-slide {
  position: relative;
  overflow: hidden;
}
.banner .swiper-slide video {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 575px) {
  .banner .swiper-slide video {
    top: -12px;
  }
}
@media (min-width: 992px) {
  .banner .swiper-slide video {
    height: 100%;
  }
}
.banner .slide-content {
  position: absolute;
  bottom: 56px;
  left: 0;
  color: #fff;
  z-index: 2;
}
.banner .hero-footer {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 60px;
  display: flex;
  gap: 40px;
  z-index: 10;
  color: #fff;
  max-width: 86.9799%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 991px) {
  .banner .hero-footer {
    display: none;
  }
}
.banner .hero-item {
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
@media (min-width: 992px) {
  .banner .hero-item {
    width: 215px;
  }
}
@media (min-width: 1350px) {
  .banner .hero-item {
    width: 266px;
  }
}
.banner .hero-item .location {
  opacity: 0;
  transform: translateY(-100%);
  transition: 0.5s ease all;
}
.banner .hero-item.active {
  opacity: 1;
}
.banner .hero-item.active .location {
  opacity: 1;
  transform: translateY(0);
  transition: 0.5s ease all;
}
.banner .hero-item .title {
  text-transform: uppercase;
  margin-bottom: clamp(9px, 0.625vw, 12px);
  font-weight: 600;
}
.banner .hero-item .title,
.banner .hero-item p {
  color: #fff;
  font-size: clamp(13px, 0.84vw, 16px);
}
.banner .hero-item p {
  font-style: italic;
  font-weight: 400;
}
.banner .progress-bar {
  margin-bottom: clamp(12px, 0.8334vw, 16px);
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.banner .progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
}

.banner {
  height: 56vh;
  overflow: auto;
}
@media (min-width: 992px) {
  .banner {
    height: 100vh;
  }
}

.hero {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  z-index: 1;
}
@media (min-width: 992px) {
  .hero {
    height: 100vh;
  }
}

.about {
  position: relative;
  background: #f5f6f3;
  z-index: 2;
}

.our-work {
  z-index: 2;
}

.about {
  background: #F1F3F2;
}
.about h2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 768px) {
  .about h2 {
    gap: 8px;
  }
}
.about h2 span {
  line-height: 65.625%;
  display: block;
}
.about .description {
  width: 100%;
}
@media (max-width: 767px) {
  .about .description {
    margin-top: 15px;
  }
}
@media (min-width: 768px) {
  .about .description {
    width: 48.57%;
  }
}
.about .description p {
  line-height: 122.222%;
}

.hero-video {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.work-section {
  background-color: #fff;
  position: relative;
  z-index: 2;
}
.work-section .head {
  width: 100%;
  margin-bottom: clamp(20px, 2.448vw, 47px);
}
@media (max-width: 767px) {
  .work-section .head p {
    width: 81%;
  }
}
@media (min-width: 992px) {
  .work-section .head {
    width: 40.764%;
  }
}
.work-section .head h2 {
  line-height: 97.222%;
  margin-bottom: clamp(8px, 0.834vw, 16px);
}
.work-section .columns {
  height: 800px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  gap: 36px 1.5%;
}
@media (min-width: 768px) {
  .work-section .columns {
    height: 600px;
  }
}
.work-section .column {
  position: relative;
  overflow: hidden;
}
.work-section .column.slow {
  width: 100%;
}
@media (min-width: 768px) {
  .work-section .column.slow {
    width: 29.1%;
  }
}
@media (min-width: 992px) {
  .work-section .column.slow {
    width: 36.112%;
  }
}
.work-section .column.medium {
  width: 100%;
}
@media (min-width: 768px) {
  .work-section .column.medium {
    width: 20.584%;
  }
}
@media (min-width: 992px) {
  .work-section .column.medium {
    width: 19.584%;
  }
}
.work-section .column.fast {
  width: 100%;
}
@media (min-width: 768px) {
  .work-section .column.fast {
    width: 20.153%;
  }
}
@media (min-width: 992px) {
  .work-section .column.fast {
    width: 17.153%;
  }
}
.work-section .column.reverse {
  width: 100%;
}
@media (min-width: 768px) {
  .work-section .column.reverse {
    width: 25.57%;
  }
}
@media (min-width: 992px) {
  .work-section .column.reverse {
    width: 22.57%;
  }
}
.work-section .track {
  display: flex;
  flex-direction: column;
}
.work-section .item {
  margin-bottom: 36px;
}
.work-section .item img {
  height: 150px;
}
@media (min-width: 576px) {
  .work-section .item img {
    height: 300px;
  }
}
.work-section .item .details {
  margin-top: 16px;
}
.work-section .item .details a {
  width: 11px;
}
@media (min-width: 1200px) {
  .work-section .item .details a {
    width: 12px;
  }
}
@media (min-width: 1350px) {
  .work-section .item .details a {
    width: 14px;
  }
}
@media (min-width: 1440px) {
  .work-section .item .details a {
    width: 16px;
  }
}
@media (min-width: 1600px) {
  .work-section .item .details a {
    width: 18px;
  }
}
.work-section .item .details a svg {
  width: 100%;
  height: auto;
}
.work-section .item h3 {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: clamp(10px, 0.63vw, 12px);
}
.work-section .item p {
  font-size: clamp(10px, 0.63vw, 12px);
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.24px;
}
.work-section .item img,
.work-section .item video {
  width: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.work-section {
  /* Animations */
}
.work-section .scroll .track {
  animation: scrollUp linear infinite;
}
.work-section .column.scroll:hover .track {
  animation-play-state: paused;
}
.work-section .slow .track,
.work-section .medium .track,
.work-section .fast .track {
  animation-duration: 15s;
}
@media (min-width: 768px) {
  .work-section .slow .track {
    animation-duration: 40s;
  }
  .work-section .medium .track {
    animation-duration: 30s;
  }
  .work-section .fast .track {
    animation-duration: 22s;
  }
}
.work-section {
  /* Reverse column for variation */
}
.work-section .reverse .track {
  animation-name: scrollDown;
  animation-duration: 35s;
}
.work-section .mobile-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.work-section .mobile-work-grid .grid-full-width {
  grid-column: 1/-1;
}
.work-section .mobile-work-grid .item {
  margin-bottom: 0;
}
.work-section a.btn {
  margin-left: auto;
  margin-right: auto;
}

@keyframes scrollUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
@keyframes scrollDown {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}
/* Responsive */
@media (max-width: 1024px) {
  .columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .columns {
    grid-template-columns: 1fr;
    height: auto;
  }
  .scroll .track {
    animation: none;
  }
}
.we-offer {
  background: #F1F3F2;
}
.we-offer > svg {
  position: absolute;
  right: 0;
  top: 0;
  width: 12.605%;
  height: 100%;
}
.we-offer h2 {
  margin-bottom: clamp(24px, 2.553vw, 49px);
}
.we-offer-left {
  width: 100%;
}
@media (min-width: 768px) {
  .we-offer-left {
    width: 33.5699%;
  }
}
@media (min-width: 1200px) {
  .we-offer-left {
    width: 27.5699%;
    display: flex;
    align-items: end;
  }
}
.we-offer-left .nav {
  gap: 5px;
}
@media (min-width: 768px) {
  .we-offer-left .nav {
    gap: 8px;
  }
}
@media (min-width: 1200px) {
  .we-offer-left .nav {
    gap: 11px;
  }
}
@media (min-width: 1280px) {
  .we-offer-left .nav {
    gap: 13px;
  }
}
@media (min-width: 1440px) {
  .we-offer-left .nav {
    gap: 18px;
  }
}
@media (min-width: 1600px) {
  .we-offer-left .nav {
    gap: 20px;
  }
}
@media (min-width: 1900px) {
  .we-offer-left .nav {
    gap: 22px;
  }
}
.we-offer-left .custom-dropdown {
  position: relative;
  width: 100%;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  z-index: 10;
  font-family: "Outfit", sans-serif;
}
.we-offer-left .custom-dropdown .dropdown-selected {
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 100px;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}
.we-offer-left .custom-dropdown .dropdown-selected span {
  color: #fff;
}
.we-offer-left .custom-dropdown .dropdown-selected .arrow {
  transition: transform 0.3s ease;
  width: 18px;
  height: 18px;
}
.we-offer-left .custom-dropdown .dropdown-selected .arrow path {
  stroke: #fff;
}
.we-offer-left .custom-dropdown .dropdown-selected.open .arrow {
  transform: rotate(180deg);
}
.we-offer-left .custom-dropdown .dropdown-options {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  z-index: 20;
}
.we-offer-left .custom-dropdown .dropdown-options div {
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.2s;
  color: #8C8C8C;
  font-weight: 500;
}
.we-offer-left .custom-dropdown .dropdown-options div:hover {
  background: #f5f5f5;
  color: #000;
}
.we-offer-left .custom-dropdown .dropdown-options div.active {
  background: #000;
  color: #fff;
}
.we-offer-left button {
  width: -moz-fit-content;
  width: fit-content;
  text-transform: uppercase;
  line-height: 142.857%;
  border-radius: 100px;
  border: 1px solid #DBDBDB;
  background: #F1F3F2;
  padding: 7px 17px;
  font-size: 13px;
}
@media (min-width: 768px) {
  .we-offer-left button {
    padding: 6px 12px;
    font-size: 11px;
  }
}
@media (min-width: 992px) {
  .we-offer-left button {
    padding: 7px 15px;
    font-size: 12px;
  }
}
@media (min-width: 1200px) {
  .we-offer-left button {
    padding: 7px 15px;
    font-size: 11px;
  }
}
@media (min-width: 1440px) {
  .we-offer-left button {
    padding: 7px 31px;
    font-size: 12px;
  }
}
@media (min-width: 1600px) {
  .we-offer-left button {
    padding: 8px 33px;
    font-size: 13px;
  }
}
@media (min-width: 1900px) {
  .we-offer-left button {
    padding: 9px 35px;
    font-size: 14px;
  }
}
.we-offer-left button.active {
  background: #010101;
  color: #fff;
  font-weight: 700;
}
.we-offer-right {
  width: 100%;
}
@media (max-width: 767px) {
  .we-offer-right {
    margin-top: 20px;
  }
}
@media (min-width: 768px) {
  .we-offer-right {
    width: 66.25%;
  }
}
.we-offer-right .tab-pane {
  justify-content: space-between;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
}
.we-offer-right .tab-pane.show picture {
  transform: translateX(0%);
  transition: 1s ease all;
}
.we-offer-right picture {
  filter: saturate(0);
  mix-blend-mode: luminosity;
  transform: translateX(-100%);
  transition: 0.5s ease all;
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 188px;
}
@media (min-width: 576px) {
  .we-offer-right picture {
    height: 138px;
    width: 35.221%;
  }
}
@media (min-width: 768px) {
  .we-offer-right picture {
    height: 165px;
  }
}
@media (min-width: 992px) {
  .we-offer-right picture {
    height: 185px;
  }
}
@media (min-width: 1200px) {
  .we-offer-right picture {
    height: 195px;
  }
}
@media (min-width: 1350px) {
  .we-offer-right picture {
    height: 220px;
  }
}
@media (min-width: 1440px) {
  .we-offer-right picture {
    height: 240px;
  }
}
@media (min-width: 1600px) {
  .we-offer-right picture {
    height: 255px;
  }
}
@media (min-width: 1900px) {
  .we-offer-right picture {
    height: 282px;
  }
}
.we-offer-right picture::after {
  mix-blend-mode: luminosity;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(180deg, rgba(1, 1, 1, 0) 40.25%, #000 100%);
}
.we-offer-right picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.we-offer-content {
  padding-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .we-offer-content {
    width: 61.532%;
  }
}
@media (min-width: 992px) {
  .we-offer-content {
    padding-bottom: 15px;
  }
}
@media (min-width: 1200px) {
  .we-offer-content {
    padding-bottom: 17px;
  }
}
@media (min-width: 1350px) {
  .we-offer-content {
    padding-bottom: 19px;
  }
}
@media (min-width: 1440px) {
  .we-offer-content {
    padding-bottom: 21px;
  }
}
@media (min-width: 1600px) {
  .we-offer-content {
    padding-bottom: 23px;
  }
}
@media (min-width: 1900px) {
  .we-offer-content {
    padding-bottom: 24px;
  }
}
.we-offer-content h3 {
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: clamp(6px, 0.834vw, 16px);
  font-size: clamp(18px, 1.618vw, 32px);
}
@media (min-width: 768px) {
  .we-offer-content h3 {
    width: 70%;
  }
}
.we-offer .tabLetter {
  color: transparent;
  /* IMPORTANT */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.08);
  display: block;
  opacity: 1;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: -3;
  text-transform: uppercase;
  font-style: normal;
  position: relative;
  font-weight: 700;
  line-height: 100%;
  margin-bottom: -15px;
  font-size: 45px;
}
@media (min-width: 768px) {
  .we-offer .tabLetter {
    font-size: clamp(90px, 9.375vw, 180px);
    margin-bottom: -44px;
  }
}
.we-offer .tabLetter::after {
  width: 100%;
  height: 47%;
  background: linear-gradient(45deg, rgba(241, 243, 242, 0.7490196078) 0%, rgba(252, 252, 252, 0.2901960784) 100%);
  left: 0;
  bottom: 0;
  z-index: 0;
}

.testimonials {
  background-image: url(../images/testimonial-bg.png);
  background-size: contain;
  background-position: center;
  position: relative;
}
.testimonials + .footer-cta {
  background: #f1f3f2;
}
.testimonials + .footer-cta .theme-btn.bgBlack:hover {
  background: #fff;
}
.testimonials::after {
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 0;
  opacity: 0.6;
  left: 0;
  top: 0;
}
.testimonials .head {
  margin-bottom: 50px;
  position: relative;
  z-index: 1;
}
.testimonials .head h2 {
  margin-bottom: 15px;
}
.testimonials .head h2 .highlight {
  color: #E2FF06;
  position: relative;
  z-index: 1;
}
.testimonials .head h2 .highlight::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(226, 255, 6, 0.3);
  z-index: -1;
}
.testimonials .head p {
  font-size: 16px;
  color: #666;
}
.testimonials .testimonialSwiper {
  padding: 20px 10px 20px;
}
@media (min-width: 768px) {
  .testimonials .testimonialSwiper {
    padding: 20px 10px 40px;
  }
}
@media (min-width: 1200px) {
  .testimonials .testimonialSwiper {
    padding: 20px 10px 50px;
  }
}
@media (min-width: 1350px) {
  .testimonials .testimonialSwiper {
    padding: 20px 10px 60px;
  }
}
@media (min-width: 1600px) {
  .testimonials .testimonialSwiper {
    padding: 20px 10px 80px;
  }
}
.testimonials .testimonialSwiper .swiper-wrapper {
  display: flex;
}
.testimonials .testimonialSwiper .swiper-slide {
  height: auto;
  display: flex;
  padding-bottom: 30px;
}
.testimonials .swiper-slide {
  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 40px 20px;
  border-radius: 20px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .testimonials .swiper-slide {
    padding: 40px;
  }
}
.testimonials .swiper-slide:hover {
  transform: translateY(-5px);
}
.testimonials .swiper-slide .client-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  flex-direction: column;
  text-align: center;
}
.testimonials .swiper-slide .client-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.testimonials .swiper-slide .client-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.testimonials .swiper-slide .client-info h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}
.testimonials .swiper-slide .client-info span {
  font-size: 14px;
  color: #888;
  font-weight: 500;
}
.testimonials .swiper-slide .testimonial-content {
  margin-bottom: 20px;
  flex-grow: 1;
}
.testimonials .swiper-slide .testimonial-content p {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  font-style: italic;
}
.testimonials .swiper-slide .my-rating-readonly {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.testimonials .swiper-nav-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.testimonials .swiper-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.testimonials .swiper-nav-btn:hover {
  color: #fff;
}
.testimonials .swiper-nav-btn.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.modal-content {
  border-radius: 20px;
  box-shadow: 0 0 10px 10px rgba(54, 54, 54, 0.11);
  padding: clamp(25px, 1.563vw, 30px);
}
.modal-content .title {
  line-height: 100%;
  font-size: clamp(20px, 1.88vw, 36px);
  font-weight: 700;
  margin-bottom: clamp(20px, 2.344vw, 45px);
}
.modal-content .modal-dialog {
  width: 100%;
}
.modal-content .btn-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #D9D9D9;
  z-index: 1;
  right: clamp(10px, 3.23vw, 30px);
  top: clamp(10px, 3.23vw, 30px);
  width: clamp(30px, 3.23vw, 50px);
  height: clamp(30px, 3.23vw, 50px);
}
.modal-content .btn-close svg {
  width: clamp(10px, 3.23vw, 17px);
}
.modal-content input,
.modal-content select {
  height: clamp(38px, 3.23vw, 62px);
}
.modal-content textarea {
  height: 80px;
  padding-top: clamp(10px, 1.094vw, 21px);
}
@media (min-width: 992px) {
  .modal-content textarea {
    height: clamp(100px, 8.99vw, 171px);
  }
}
.modal-content input::-moz-placeholder, .modal-content textarea::-moz-placeholder {
  line-height: 100%;
  font-size: clamp(13px, 0.886vw, 18px);
}
.modal-content select,
.modal-content input,
.modal-content textarea,
.modal-content input::placeholder,
.modal-content textarea::placeholder {
  line-height: 100%;
  font-size: clamp(13px, 0.886vw, 18px);
}
.modal-content input,
.modal-content textarea,
.modal-content select {
  font-weight: 300;
  color: #000;
  width: 100%;
  border-radius: 0px;
  border: 1px solid #000;
  background-color: #FFF;
  padding-left: 12px;
  padding-right: 12px;
}
@media (min-width: 768px) {
  .modal-content input,
  .modal-content textarea,
  .modal-content select {
    padding-left: clamp(8px, 0.7vw, 22px);
    padding-right: clamp(8px, 0.7vw, 22px);
  }
}
.modal-content input::-moz-placeholder, .modal-content textarea::-moz-placeholder, .modal-content select::-moz-placeholder {
  color: #000;
}
.modal-content input::placeholder,
.modal-content textarea::placeholder,
.modal-content select::placeholder {
  color: #000;
}
.modal-content .form-group {
  position: relative;
}
.modal-content .buttonGroup {
  gap: 12px;
  margin-top: 15px;
}
.modal-content .buttonGroup button + button {
  border: 1px solid #000;
}
.modal-content .buttonGroup button + button:hover {
  border: 1px solid #7a7a7a;
}
.modal-content form {
  gap: 18px 0px;
}
.modal-content .col--4 {
  width: 100%;
}
@media (min-width: 768px) {
  .modal-content .col--4 {
    width: 48.277%;
  }
}
@media (min-width: 992px) {
  .modal-content .col--4 {
    width: 32.277%;
  }
}
@media (min-width: 767px) and (max-width: 991px) {
  .modal-content .col--4 + .col--4 + .col--4 {
    width: 100%;
  }
}
.modal-content .col--6 {
  width: 100%;
}
@media (min-width: 768px) {
  .modal-content .col--6 {
    width: 48.886%;
  }
}

.ProductEnquiryForm .modal-dialog,
.downloadBrochureForm .modal-dialog {
  max-width: 675px;
}
@media (min-width: 1200px) {
  .ProductEnquiryForm .modal-dialog,
  .downloadBrochureForm .modal-dialog {
    max-width: 35.304%;
  }
}

.siteEnquiryForm .modal-dialog {
  max-width: 95%;
}
@media (min-width: 1200px) {
  .siteEnquiryForm .modal-dialog {
    max-width: 1067px;
  }
}
.siteEnquiryForm .modal-content {
  padding: 0;
  overflow: hidden;
  border: none;
}
.siteEnquiryForm .btn-close {
  background-color: #E8E8E8;
  z-index: 10;
}
.siteEnquiryForm .modal-body-content {
  align-items: stretch;
}
.siteEnquiryForm .modal-image {
  width: 34.302%;
  padding: 0;
  position: relative;
  background: #f0f0f0;
}
@media (max-width: 767px) {
  .siteEnquiryForm .modal-image {
    display: none;
  }
}
.siteEnquiryForm .modal-image img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}
.siteEnquiryForm .modal-form {
  width: 100%;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* background: url(...) removed */
}
@media (min-width: 768px) {
  .siteEnquiryForm .modal-form {
    width: 64.699%;
    padding: 40px;
  }
}
@media (min-width: 1200px) {
  .siteEnquiryForm .modal-form {
    padding: 45px 37px 30px 30px;
  }
}
.siteEnquiryForm .modal-form .title {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 30px;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .siteEnquiryForm .modal-form .title {
    font-size: 24px;
    margin-bottom: 40px;
  }
}
.siteEnquiryForm .modal-form form input,
.siteEnquiryForm .modal-form form select,
.siteEnquiryForm .modal-form form textarea {
  border: 1px solid #000;
  border-radius: 0;
  padding: 12px 15px;
  font-size: clamp(13px, 0.886vw, 18px);
  color: #000;
  height: 50px;
}
.siteEnquiryForm .modal-form form input::-moz-placeholder, .siteEnquiryForm .modal-form form select::-moz-placeholder, .siteEnquiryForm .modal-form form textarea::-moz-placeholder {
  color: #555;
}
.siteEnquiryForm .modal-form form input::placeholder,
.siteEnquiryForm .modal-form form select::placeholder,
.siteEnquiryForm .modal-form form textarea::placeholder {
  color: #555;
}
.siteEnquiryForm .modal-form form input:focus,
.siteEnquiryForm .modal-form form select:focus,
.siteEnquiryForm .modal-form form textarea:focus {
  outline: none;
  border-color: #333;
}
.siteEnquiryForm .modal-form form textarea {
  height: 120px;
  resize: none;
  padding-top: 15px;
}
.siteEnquiryForm .modal-form form .buttonGroup {
  margin-top: 9px;
}
.siteEnquiryForm .modal-form form .buttonGroup .btn {
  min-width: 140px;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 100px;
}
.siteEnquiryForm .modal-form form .buttonGroup .btn.bgBlack {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
.siteEnquiryForm .modal-form form .buttonGroup .btn.bgWhite {
  background: #fff;
  color: #000;
  border: 1px solid #E8E8E8;
}
.siteEnquiryForm .modal-form form .buttonGroup .btn.bgWhite:hover {
  background: #f5f5f5;
}
.siteEnquiryForm .modal-form .modal-bg-svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 165px;
  height: 351px;
  z-index: 0;
  pointer-events: none;
}
.siteEnquiryForm .modal-form .modal-bg-svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2s ease-out forwards;
}
.siteEnquiryForm .modal-form > *:not(.modal-bg-svg) {
  position: relative;
  z-index: 1;
}
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.leftFixedBox {
  position: fixed;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  padding: 15px 10px;
  background: #1a1a1a;
  border-radius: 50px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}
.leftFixedBox > div:first-child img {
  animation: pulse 2s infinite;
}
@media (max-width: 991px) {
  .leftFixedBox {
    display: none;
  }
}
.leftFixedBox .dropdown-menu {
  min-width: 40px;
  width: auto;
  height: 50px;
  background: transparent;
  padding: 0;
  border: 0;
}
.leftFixedBox .dropdown-menu .iconBox {
  background: linear-gradient(45deg, black, transparent);
  width: 35px;
  height: 35px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  box-shadow: 0px 2px 10px 2px rgba(56, 52, 52, 0.2);
  text-decoration: none;
}
.leftFixedBox .dropdown-menu .iconBox i {
  color: #ffffff;
  font-size: 18px;
}
.leftFixedBox .dropdown-menu .iconBox:hover {
  background: #0a1821;
}
.leftFixedBox .dropdown-menu.show {
  display: flex;
  flex-direction: row;
  align-items: center;
  grid-gap: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  grid-gap: 5px;
}
.leftFixedBox .iconBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  transition: all 0.3s ease;
  position: relative;
}
@media (min-width: 1600px) {
  .leftFixedBox .iconBox {
    width: 50px;
    height: 50px;
  }
}
.leftFixedBox .iconBox svg {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
}
.leftFixedBox .iconBox svg path {
  fill: rgba(255, 255, 255, 0.8);
}
.leftFixedBox .iconBox img {
  height: auto;
  width: 40px;
}
@media (min-width: 768px) {
  .leftFixedBox .iconBox img {
    width: 48px;
  }
}
@media (min-width: 992px) {
  .leftFixedBox .iconBox img {
    width: 50px;
  }
}
@media (min-width: 1200px) {
  .leftFixedBox .iconBox img {
    width: 52px;
  }
}
@media (min-width: 1360px) {
  .leftFixedBox .iconBox img {
    width: 54px;
  }
}
@media (min-width: 1440px) {
  .leftFixedBox .iconBox img {
    width: 56px;
  }
}
@media (min-width: 1600px) {
  .leftFixedBox .iconBox img {
    width: 58px;
  }
}
@media (min-width: 1900px) {
  .leftFixedBox .iconBox img {
    width: 60px;
  }
}
.leftFixedBox .iconBox:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}
.leftFixedBox .iconBox:hover svg {
  transform: scale(1.1);
}
.leftFixedBox .iconBox:hover svg path {
  fill: #fff;
}
.leftFixedBox .QuickSideRightBar {
  position: relative;
}
.leftFixedBox .QuickSideRightBar + div {
  margin-top: 5px;
}
.leftFixedBox .QuickSideRightBar .slideLeft {
  position: absolute;
  right: 120%;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: #1a1a1a;
  color: #fff;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.leftFixedBox .QuickSideRightBar .slideLeft::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: #1a1a1a;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.leftFixedBox .QuickSideRightBar .slideLeft .textRight {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}
.leftFixedBox .QuickSideRightBar:hover .slideLeft {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.bottomFixedMenu {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 30px);
  max-width: 400px;
  z-index: 9999;
  padding: 10px 15px;
  background: #1a1a1a;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(20px);
  transition: all 0.5s ease;
}
.bottomFixedMenu.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.bottomFixedMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.bottomFixedMenu span {
  color: #fff;
  display: block;
  line-height: 1;
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.bottomFixedMenu li {
  display: flex;
  flex: 1;
  justify-content: center;
  position: relative;
}
.bottomFixedMenu li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}
.bottomFixedMenu li a,
.bottomFixedMenu li button {
  background: unset;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  justify-content: center;
  text-decoration: none;
  padding: 12px 0;
  min-height: 48px;
  border: none;
  transition: all 0.3s ease;
}
.bottomFixedMenu li a:hover,
.bottomFixedMenu li button:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}
.bottomFixedMenu li a svg,
.bottomFixedMenu li button svg {
  width: 20px;
  height: 20px;
  margin-bottom: 2px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
h1,
.h1,
h2,
.h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
  font-weight: 500;
}

h1 strong,
.h1 strong,
h1 span strong {
  font-size: 18px;
}
@media (min-width: 768px) {
  h1 strong,
  .h1 strong,
  h1 span strong {
    font-size: 22px;
  }
}
@media (min-width: 992px) {
  h1 strong,
  .h1 strong,
  h1 span strong {
    font-size: 24px;
  }
}
@media (min-width: 1200px) {
  h1 strong,
  .h1 strong,
  h1 span strong {
    font-size: 26px;
  }
}
@media (min-width: 1360px) {
  h1 strong,
  .h1 strong,
  h1 span strong {
    font-size: 28px;
  }
}
@media (min-width: 1440px) {
  h1 strong,
  .h1 strong,
  h1 span strong {
    font-size: 30px;
  }
}
@media (min-width: 1900px) {
  h1 strong,
  .h1 strong,
  h1 span strong {
    font-size: 32px;
  }
}
h1,
.h1,
h1 span {
  font-size: 20px;
}
@media (min-width: 768px) {
  h1,
  .h1,
  h1 span {
    font-size: 26px;
  }
}
@media (min-width: 992px) {
  h1,
  .h1,
  h1 span {
    font-size: 28px;
  }
}
@media (min-width: 1200px) {
  h1,
  .h1,
  h1 span {
    font-size: 30px;
  }
}
@media (min-width: 1360px) {
  h1,
  .h1,
  h1 span {
    font-size: 32px;
  }
}
@media (min-width: 1440px) {
  h1,
  .h1,
  h1 span {
    font-size: 34px;
  }
}
@media (min-width: 1900px) {
  h1,
  .h1,
  h1 span {
    font-size: 36px;
  }
}

h2,
.h2,
h2 span,
.h2 span,
h2 strong {
  font-weight: 700;
  font-size: 20px;
}
@media (min-width: 768px) {
  h2,
  .h2,
  h2 span,
  .h2 span,
  h2 strong {
    font-size: 22px;
  }
}
@media (min-width: 992px) {
  h2,
  .h2,
  h2 span,
  .h2 span,
  h2 strong {
    font-size: 24px;
  }
}
@media (min-width: 1200px) {
  h2,
  .h2,
  h2 span,
  .h2 span,
  h2 strong {
    font-size: 26px;
  }
}
@media (min-width: 1360px) {
  h2,
  .h2,
  h2 span,
  .h2 span,
  h2 strong {
    font-size: 28px;
  }
}
@media (min-width: 1440px) {
  h2,
  .h2,
  h2 span,
  .h2 span,
  h2 strong {
    font-size: 30px;
  }
}
@media (min-width: 1900px) {
  h2,
  .h2,
  h2 span,
  .h2 span,
  h2 strong {
    font-size: 32px;
  }
}

h3,
.h3,
.h3 strong {
  font-size: clamp(16px, 1.13vw, 21.6px);
}

h4,
.h4,
.h4 strong {
  font-size: 12px;
}

h5,
.h5,
.h5 strong {
  font-size: 12px;
}
@media (min-width: 768px) {
  h5,
  .h5,
  .h5 strong {
    font-size: 13px;
  }
}
@media (min-width: 992px) {
  h5,
  .h5,
  .h5 strong {
    font-size: 12px;
  }
}
@media (min-width: 1200px) {
  h5,
  .h5,
  .h5 strong {
    font-size: 13px;
  }
}
@media (min-width: 1350px) {
  h5,
  .h5,
  .h5 strong {
    font-size: 14px;
  }
}
@media (min-width: 1440px) {
  h5,
  .h5,
  .h5 strong {
    font-size: 15px;
  }
}
@media (min-width: 1600px) {
  h5,
  .h5,
  .h5 strong {
    font-size: 16px;
  }
}
@media (min-width: 1900px) {
  h5,
  .h5,
  .h5 strong {
    font-size: 18px;
  }
}

p {
  margin-bottom: 0;
}/*# sourceMappingURL=home.css.map */