@charset "UTF-8";
: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, .policy {
  padding: 40px 0px;
}
@media (min-width: 768px) {
  .commonPadding-120, .policy {
    padding: 60px 0px;
  }
}
@media (min-width: 992px) {
  .commonPadding-120, .policy {
    padding: 70px 0px;
  }
}
@media (min-width: 1200px) {
  .commonPadding-120, .policy {
    padding: 90px 0px;
  }
}
@media (min-width: 1350px) {
  .commonPadding-120, .policy {
    padding: 95px 0px;
  }
}
@media (min-width: 1440px) {
  .commonPadding-120, .policy {
    padding: 100px 0px;
  }
}
@media (min-width: 1600px) {
  .commonPadding-120, .policy {
    padding: 110px 0px;
  }
}
@media (min-width: 1900px) {
  .commonPadding-120, .policy {
    padding: 120px 0px;
  }
}

.position, .post-navigation a::before,
.post-navigation button::before, .other-works p + p::before, .work-details .work-info li + li::before, .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, .not-found h1, .about-page .accordion-button, .about-page .creative-visionary .feature-card h3, .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;
  }
}

.inner-banner {
  padding-top: clamp(120px, 12vw, 219px);
  padding-bottom: clamp(20px, 3vw, 37px);
  background-color: #F1F3F2;
}
.inner-banner .breadcrumb {
  display: flex;
  align-items: center;
  font-size: 14px;
  letter-spacing: 1px;
}
.inner-banner .breadcrumb li {
  position: relative;
  color: #666;
  font-weight: 400;
  text-transform: uppercase;
}
.inner-banner .breadcrumb li a {
  color: inherit;
  transition: 0.3s ease all;
}
.inner-banner .breadcrumb li a:hover {
  color: #000;
}
.inner-banner .breadcrumb li + li {
  padding-left: 10px;
  margin-left: 10px;
}
.inner-banner .breadcrumb li + li::before {
  content: "/";
  position: absolute;
  left: 0;
  color: #666;
}
.inner-banner .breadcrumb li + li:last-child {
  color: #000;
  font-weight: 700;
}

.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;
}

.about-page {
  position: relative;
  overflow-x: hidden;
}
.about-page .about-hero {
  background-color: #fff;
}
.about-page .about-hero h1 {
  line-height: 62.5%;
  margin-bottom: clamp(15px, 1.25vw, 16px);
}
.about-page .about-hero p {
  margin-left: auto;
  margin-right: auto;
  line-height: 111.111%;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 111.111%;
  max-width: 85%;
}
@media (min-width: 992px) {
  .about-page .about-hero p {
    max-width: 64%;
  }
}
.about-page .about-hero .hero-image-wrapper {
  max-width: 82.5%;
}
.about-page .about-hero .hero-image-wrapper img {
  width: 100%;
  height: clamp(170px, 27.032vw, 519px);
  -o-object-fit: cover;
     object-fit: cover;
}
.about-page .creative-visionary h2 {
  margin-bottom: clamp(15px, 1.25vw, 16px);
}
.about-page .creative-visionary .row {
  margin-top: clamp(20px, 1.67vw, 32px);
}
.about-page .creative-visionary .feature-card {
  border-radius: 10px;
  border: 1px solid #DBDBDB;
  background: #FFF;
  padding: clamp(20px, 1.875vw, 36px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.about-page .creative-visionary .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.about-page .creative-visionary .feature-card p {
  color: #3E444A;
}
.about-page .podcast-spotcast {
  background-color: #fff;
  position: relative;
}
.about-page .podcast-spotcast > svg {
  position: absolute;
  top: 0;
  height: auto;
}
.about-page .podcast-spotcast > svg:first-child {
  left: 0;
  width: 16.475%;
}
.about-page .podcast-spotcast > svg + svg {
  right: 0;
  width: 34.624%;
}
.about-page .podcast-spotcast h3 {
  font-weight: 700;
  margin-bottom: clamp(15px, 0.834vw, 16px);
}
.about-page .podcast-spotcast .content {
  order: -2;
  width: 100%;
}
@media (min-width: 768px) {
  .about-page .podcast-spotcast .content {
    width: 37.362%;
  }
}
.about-page .podcast-spotcast .content + .content {
  order: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .about-page .podcast-spotcast .content + .content {
    width: 40.278%;
  }
}
.about-page .podcast-spotcast picture {
  order: -1;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .about-page .podcast-spotcast picture {
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
@media (min-width: 768px) {
  .about-page .podcast-spotcast picture {
    width: 14.584%;
  }
}
.about-page .trust {
  background: #F1F3F2;
}
.about-page .trust .accordion-button:not(.collapsed) {
  background: unset;
  color: #000;
}
.about-page .trust h2 {
  margin-bottom: clamp(25px, 2.5521vw, 49px);
}
.about-page .trust .trust-grid {
  gap: 3.5%;
}
.about-page .trust .hero-image {
  width: 100%;
}
@media (max-width: 575px) {
  .about-page .trust .hero-image {
    margin-bottom: 20px;
  }
}
@media (min-width: 576px) {
  .about-page .trust .hero-image {
    width: 37.7623%;
  }
}
@media (min-width: 992px) {
  .about-page .trust .hero-image {
    width: 37.7623%;
  }
}
.about-page .trust .hero-image img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  height: 200px;
}
@media (min-width: 576px) {
  .about-page .trust .hero-image img {
    height: clamp(280px, 15.84vw, 304px);
    border-radius: 20px;
  }
}
.about-page .trust .accordion {
  width: 100%;
}
.about-page .trust .accordion .accordion-item {
  background: #fff;
}
@media (min-width: 576px) {
  .about-page .trust .accordion {
    width: 56.079%;
  }
}
@media (min-width: 992px) {
  .about-page .trust .accordion {
    width: 36.079%;
  }
}
.about-page .accordion-item {
  overflow: hidden;
  border: 1px solid #DBDBDB;
  border-radius: 8px;
  padding: 0px 15px 0px 15px;
}
@media (min-width: 576px) {
  .about-page .accordion-item {
    padding: 0px 20px 0px 20px;
  }
}
.about-page .accordion-item button {
  padding-top: 14px;
  padding-bottom: 14px;
}
@media (min-width: 576px) {
  .about-page .accordion-item button {
    padding-top: 20px;
    padding-bottom: 14px;
  }
}
.about-page .accordion-item + div {
  margin-top: 16px;
}
.about-page .accordion-button {
  font-weight: 700;
  line-height: 92.593%;
}
.about-page .accordion-button:focus {
  border: unset;
  box-shadow: unset;
}
.about-page .accordion-body {
  border-top: 1px solid #E8E8E8;
  color: #3E444A;
  line-height: 111.111%;
  padding-top: 14px;
  padding-bottom: 14px;
}
@media (min-width: 576px) {
  .about-page .accordion-body {
    padding-top: 16px;
    padding-bottom: 20px;
  }
}
.about-page .accordion-body p {
  color: #3E444A;
  line-height: 111.111%;
}

.badge-pill {
  text-transform: uppercase;
  color: #1a1a1a;
  border-radius: 100px;
  background: #E8E8E8;
  font-weight: 300;
  padding: 5.5px 12px;
  margin-bottom: clamp(8px, 1vw, 16px);
}
@media (min-width: 992px) {
  .badge-pill {
    padding: 6.5px 19px;
  }
}

.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;
  }
}

.policy > svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: auto;
  width: clamp(80px, 20.833vw, 247.692px);
}
.policy ~ .footer-cta {
  display: none;
}
.policy ol li,
.policy ul li {
  color: #000;
  font-size: clamp(16px, 1.1vw, 20px);
  line-height: 1.6;
}
.policy h3 {
  color: #000;
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 18px);
  margin-bottom: clamp(10px, 1vw, 12px);
  display: inline-block;
}
.policy p + h3,
.policy li + li {
  margin-top: clamp(20px, 2vw, 38px);
}

.terms-dynamic-content {
  counter-reset: policy-counter;
}
.terms-dynamic-content p {
  counter-increment: policy-counter;
}
.terms-dynamic-content strong::before,
.terms-dynamic-content h3::before {
  content: counter(policy-counter) ". ";
  margin-right: 5px;
}

.inner-banner .title {
  font-size: clamp(30px, 4vw, 60px);
  font-weight: 700;
  margin-top: 20px;
  text-transform: uppercase;
  line-height: 1;
}

.contact ~ .footer-cta {
  display: none;
}
.contact .form-field {
  position: relative;
}
.contact .container-ctn {
  position: relative;
  z-index: 1;
}
.contact > svg {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  width: 13.0238%;
}
@media (min-width: 768px) {
  .contact .head {
    width: 40%;
  }
}
.contact-details {
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 20px;
  background: #000;
  padding: clamp(25px, 3.44vw, 66px);
  margin-top: clamp(22px, 2.292vw, 44px);
  width: 100%;
}
@media (min-width: 768px) {
  .contact-details {
    width: 36.667%;
  }
}
.contact-details h3,
.contact-details p,
.contact-details a,
.contact-details div {
  color: #fff;
}
.contact-details h3 {
  font-weight: 700;
  width: 100%;
  margin-bottom: clamp(24px, 2.553vw, 49px);
}
.contact-details div {
  align-items: center;
  display: flex;
  gap: clamp(8px, 1vw, 18px);
}
.contact-details div:nth-child(2) {
  align-items: flex-start;
}
.contact-details div + div {
  margin-top: clamp(14px, 1.46vw, 28px);
}
.contact-details div i {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #282B2D;
  width: clamp(33px, 3.2vw, 60px);
  height: clamp(33px, 3.2vw, 60px);
}
.contact-details div svg {
  width: clamp(20px, 2.1vw, 40px);
  height: clamp(20px, 2.1vw, 40px);
}
.contact-details div p,
.contact-details div a {
  width: 81.713%;
}
.contact-details div p {
  display: flex;
  flex-direction: column;
}
.contact-details div p,
.contact-details div a {
  font-weight: 400;
  line-height: 111.111%;
}
.contact-details > svg {
  position: absolute;
  bottom: 0;
  right: 0;
  height: auto;
  width: 26.161%;
}
.contact h2 {
  font-weight: 600;
}

.form-container {
  width: 100%;
}
@media (max-width: 767px) {
  .form-container {
    margin-bottom: 30px;
  }
}
@media (min-width: 768px) {
  .form-container {
    width: 54.723%;
  }
}
.form-container form {
  row-gap: clamp(10px, 1.5vw, 28px);
}
.form-container h3 {
  margin-bottom: clamp(25px, 2.5521vw, 49px);
  font-weight: 600;
}
.form-container .col--4 {
  width: 48.062%;
}
.form-container input {
  height: clamp(40px, 3.3vw, 62px);
}
.form-container input,
.form-container textarea {
  width: 100%;
  line-height: 100%;
  color: #000;
  font-weight: 300;
  border-bottom: 1px solid #000;
  background: #FFF;
  padding: clamp(10px, 1.05vw, 20px);
}
.form-container input::-moz-placeholder, .form-container textarea::-moz-placeholder {
  color: #000;
}
.form-container input::placeholder,
.form-container textarea::placeholder {
  color: #000;
}
.form-container button {
  border-radius: 80px;
  margin-top: clamp(20px, 3.99vw, 56px);
}

.map iframe {
  width: 100%;
  filter: grayscale(100%) invert(100%) contrast(90%);
  border-radius: 20px;
  height: clamp(329px, 32.769vw, 629px);
}

.services > svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: auto;
  width: clamp(80px, 20.833vw, 247.692px);
}
.services .head {
  margin-bottom: clamp(25px, 2.552vw, 49px);
}
.services .head h1 {
  margin-top: 5px;
}
.services-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 100%;
}
@media (min-width: 992px) {
  .services-grid {
    gap: 22px 33px;
    grid-template-columns: 40% 1fr 1fr;
    grid-template-rows: auto auto;
  }
}
.services .service-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
}
.services .service-card img {
  height: auto;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.services .service-card picture {
  display: block;
  height: auto;
}
.services .service-card .service-content {
  margin-top: 16px;
}
.services .service-card .service-content h3 {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
@media (min-width: 1200px) {
  .services .service-card .service-content h3 {
    font-size: 18px;
  }
}
.services .service-card .service-content p {
  font-size: 13px;
  color: #585858;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.2em;
}
@media (min-width: 1200px) {
  .services .service-card .service-content p {
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  .services .service-card:nth-child(1) {
    grid-column: 1/2;
    grid-row: span 2;
    height: 100%;
  }
  .services .service-card:nth-child(1) picture {
    flex: 1;
  }
  .services .service-card:nth-child(1) img {
    height: 100%;
  }
  .services .service-card:not(:nth-child(1)) picture {
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 4px;
  }
  .services .service-card:not(:nth-child(1)) img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.services + .footer-cta {
  display: none;
}

.works > svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: auto;
  width: clamp(80px, 20.833vw, 247.692px);
}
.works + .footer-cta {
  display: none;
}
.works .head {
  margin-bottom: clamp(25px, 2.55vw, 49px);
  width: 100%;
}
@media (min-width: 992px) {
  .works .head {
    width: 60%;
  }
}
.works .head h1 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.works .filters {
  margin-bottom: 40px;
  gap: 10px;
  flex-wrap: wrap;
}
.works .filters button {
  background: transparent;
  border: 1px solid #E8E8E8;
  border-radius: 100px;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s;
  color: #8C8C8C;
}
.works .filters button:hover, .works .filters button.active {
  background: #000;
  color: #fff;
  border-color: #000;
}
.works-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 768px) {
  .works-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 992px) {
  .works-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
  }
  .works-row .card.work-item:nth-child(1) .img-wrapper,
  .works-row .card.work-item:nth-child(2) .img-wrapper,
  .works-row .card.work-item:nth-child(3) .img-wrapper,
  .works-row .card.work-item:nth-child(6) .img-wrapper,
  .works-row .card.work-item:nth-child(7) .img-wrapper {
    aspect-ratio: 4/3;
    height: auto !important;
  }
  .works-row .card.work-item:nth-child(4) {
    grid-column: 1/2;
    grid-row: span 2;
    height: 100%;
  }
  .works-row .card.work-item:nth-child(4) .img-wrapper {
    height: 100%;
    min-height: 0;
  }
  .works-row .card.work-item:nth-child(4) img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .works-row .card.work-item:nth-child(5) {
    grid-column: 2/3;
    grid-row: span 2;
    height: 100%;
  }
  .works-row .card.work-item:nth-child(5) .img-wrapper {
    height: 100%;
  }
  .works-row .card.work-item:nth-child(5) img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .works-row .card.work-item:nth-child(6) {
    grid-column: 3/4;
  }
  .works-row .card.work-item:nth-child(7) {
    grid-column: 3/4;
  }
  .works-row.filtered .card.work-item {
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto !important;
  }
  .works-row.filtered .card.work-item .img-wrapper {
    height: auto !important;
    aspect-ratio: 4/3 !important;
  }
}
.works .card.work-item {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.works .card.work-item .img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  width: 100%;
}
.works .card.work-item .img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
.works .card.work-item .info-content {
  margin-top: 15px;
}
.works .card.work-item .info-content h4 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .works .card.work-item .info-content h4 {
    font-size: 18px;
  }
}
.works .card.work-item .info-content p {
  font-size: 14px;
  color: #585858;
}
.works .card.work-item:hover .img-wrapper img {
  transform: scale(1.05);
}
.works .filters-mobile {
  margin-bottom: 30px;
}
@media (min-width: 576px) {
  .works .filters-mobile {
    width: 100%;
  }
}
.works .custom-dropdown {
  position: relative;
  width: 100%;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  z-index: 10;
  font-family: "Outfit", sans-serif;
}
.works .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;
}
.works .custom-dropdown .dropdown-selected span {
  color: #fff;
}
.works .custom-dropdown .dropdown-selected .arrow {
  transition: transform 0.3s ease;
  width: 18px;
  height: 18px;
}
.works .custom-dropdown .dropdown-selected .arrow path {
  stroke: #fff;
}
.works .custom-dropdown .dropdown-selected.open .arrow {
  transform: rotate(180deg);
}
.works .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;
}
.works .custom-dropdown .dropdown-options div {
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.2s;
  color: #8C8C8C;
  font-weight: 500;
}
.works .custom-dropdown .dropdown-options div:hover {
  background: #f5f5f5;
  color: #000;
}
.works .custom-dropdown .dropdown-options div.active {
  background: #000;
  color: #fff;
}

/* hide cards via class (works with grid/Bootstrap) */
.card.is-hidden {
  display: none !important;
}

.work-details > svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: auto;
  width: clamp(80px, 20.833vw, 247.692px);
}
.work-details ~ .footer-cta {
  display: none;
}
.work-details #videoContainer {
  height: clamp(230px, 30.53vw, 586px);
}
.work-details .video-card {
  position: relative;
  overflow: hidden;
  background: #000;
  border-radius: 10px;
}
@media (min-width: 992px) {
  .work-details .video-card {
    border-radius: 14px;
  }
}
@media (min-width: 1200px) {
  .work-details .video-card {
    border-radius: 16px;
  }
}
@media (min-width: 1350px) {
  .work-details .video-card {
    border-radius: 18px;
  }
}
@media (min-width: 1600px) {
  .work-details .video-card {
    border-radius: 20px;
  }
}
.work-details .video-card video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  -o-object-fit: cover;
     object-fit: cover;
}
.work-details {
  /* Overlay controls */
}
.work-details .video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  padding: 16px 15px 16px;
  gap: 5px;
}
@media (min-width: 992px) {
  .work-details .video-controls {
    gap: 12px;
    padding: 11px 18px 18px;
  }
}
@media (min-width: 1200px) {
  .work-details .video-controls {
    padding: 12px 19px 19px;
    gap: 14px;
  }
}
@media (min-width: 1350px) {
  .work-details .video-controls {
    padding: 13px 20px 20px;
    gap: 16px;
  }
}
@media (min-width: 1440px) {
  .work-details .video-controls {
    padding: 14px 21px 21px;
    gap: 18px;
  }
}
@media (min-width: 1600px) {
  .work-details .video-controls {
    padding: 15px 22px 22px;
    gap: 19px;
  }
}
@media (min-width: 1900px) {
  .work-details .video-controls {
    padding: 16px 23px 23px;
    gap: 21px;
  }
}
.work-details .controls-top,
.work-details .controls-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
}
.work-details .controls-top {
  justify-content: flex-start;
}
.work-details .controls-bottom {
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
}
.work-details .video-card button {
  background: unset;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.work-details .play-btn:active {
  transform: scale(0.96);
}
.work-details .time-label {
  color: #fff;
  min-width: 41px;
  opacity: 0.9;
}
.work-details {
  /* Seek bar */
}
.work-details .seek-bar {
  flex: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  outline: none;
  cursor: pointer;
}
.work-details .seek-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  cursor: pointer;
}
.work-details .seek-bar::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}
.work-details {
  /* WebKit track – JS paints background */
}
.work-details .seek-bar::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 999px;
  background: transparent;
}
.work-details {
  /* Firefox track fallback */
}
.work-details .seek-bar::-moz-range-track {
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}
.work-details {
  /* Title & meta */
}
.work-details .title {
  color: #fff;
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 24px);
  width: 100%;
}
.work-details .meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.work-details .meta span {
  color: #fff;
  font-size: clamp(12px, 0.99vw, 16px);
  font-weight: 300;
}
.work-details .dot {
  width: 1px;
  height: 20px;
  background: #e8e8e8;
}
@media (min-width: 992px) {
  .work-details .dot {
    height: 30px;
  }
}
.work-details .like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.work-details .like-btn-icon {
  font-size: 13px;
}
.work-details .like-btn.liked path {
  fill: red;
  stroke: red;
}
.work-details .like-btn.liked .like-btn-icon,
.work-details .like-btn.liked .like-text {
  color: #fff;
}
.work-details .views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.work-details .views-icon {
  opacity: 0.9;
}
.work-details {
  /* Utility */
}
.work-details .is-hidden {
  display: none !important;
}
.work-details {
  /* Fullscreen */
}
.work-details #videoContainer:fullscreen video,
.work-details #videoContainer:-webkit-full-screen video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.work-details .work-info {
  margin-top: 12px;
}
.work-details .work-info li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.work-details .work-info li span {
  background: unset;
  padding: 0;
  color: #787878;
  font-weight: 300;
  margin: 0;
}
.work-details .work-info li img {
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  width: clamp(16px, 1.563vw, 30px);
  height: clamp(16px, 1.563vw, 30px);
}
.work-details .work-info li p {
  margin-top: 0;
}
.work-details .work-info li + li {
  padding-left: clamp(8px, 0.94vw, 18px);
  margin-left: clamp(8px, 0.94vw, 18px);
}
.work-details .work-info li + li::before {
  background: #E8E8E8;
  width: 1px;
  height: clamp(15px, 1.57vw, 30px);
  left: 0;
}
.work-details article {
  width: 100%;
}
@media (min-width: 992px) {
  .work-details article {
    width: 65.81%;
  }
}
@media (min-width: 1200px) {
  .work-details article {
    width: 68.81%;
  }
}
.work-details article h2 {
  color: #000;
  font-weight: 700;
  font-size: clamp(15px, 0.94vw, 18px);
  margin-bottom: clamp(8px, 1vw, 18px);
}
.work-details article p {
  line-height: 160%;
  color: #3E444A;
}
.work-details article p + p {
  margin-top: clamp(10px, 0.834vw, 16px);
}
.work-details aside {
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 20px;
  background: #E8E8E8;
  padding: clamp(18px, 2.09vw, 40px);
  width: 100%;
}
@media (max-width: 991px) {
  .work-details aside {
    margin-top: 30px;
  }
}
@media (min-width: 992px) {
  .work-details aside {
    width: 33.524%;
  }
}
@media (min-width: 1200px) {
  .work-details aside {
    width: 29.524%;
  }
}
.work-details aside .contact-info > div,
.work-details aside .contact-info p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 72%;
}
.work-details aside .contact-info a {
  width: 100%;
  color: #000;
}
.work-details aside .contact-info a + a {
  margin-top: 8px;
}
@media (min-width: 1900px) {
  .work-details aside .contact-info a + a {
    margin-top: 8px;
  }
}
@media (min-width: 1900px) {
  .work-details aside .contact-info a + a {
    margin-top: 8px;
  }
}
@media (min-width: 1900px) {
  .work-details aside .contact-info a + a {
    margin-top: 8px;
  }
}
@media (min-width: 1900px) {
  .work-details aside .contact-info a + a {
    margin-top: 8px;
  }
}
@media (min-width: 1900px) {
  .work-details aside .contact-info a + a {
    margin-top: 8px;
  }
}
@media (min-width: 1900px) {
  .work-details aside .contact-info a + a {
    margin-top: 8px;
  }
}
.work-details aside .contact-info div {
  gap: clamp(8px, 1vw, 18px);
}
.work-details aside .contact-info div + div {
  margin-top: clamp(12px, 1.25vw, 24px);
}
.work-details aside i {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #282B2D;
  width: 40px;
  height: 40px;
}
@media (min-width: 768px) {
  .work-details aside i {
    width: clamp(30px, 3.3vw, 60px);
    height: clamp(30px, 3.3vw, 60px);
  }
}
.work-details aside i svg {
  height: auto;
  width: 25px;
}
@media (min-width: 768px) {
  .work-details aside i svg {
    width: clamp(20px, 2.09vw, 40px);
  }
}
.work-details + .footer-cta {
  display: none;
}

.volume-bar {
  transform: translate(0px, 2px);
}

.work-content {
  padding-top: clamp(20px, 1.98vw, 38px);
}
.work-content .buuton-wrapper {
  margin-top: 26px;
  gap: 5px;
}
@media (min-width: 768px) {
  .work-content .buuton-wrapper {
    margin-top: 29px;
    gap: 7px;
  }
}
@media (min-width: 992px) {
  .work-content .buuton-wrapper {
    margin-top: 32px;
    gap: 8px;
  }
}
@media (min-width: 1200px) {
  .work-content .buuton-wrapper {
    margin-top: 35px;
    gap: 10px;
  }
}
@media (min-width: 1350px) {
  .work-content .buuton-wrapper {
    margin-top: 38px;
    gap: 12px;
  }
}
@media (min-width: 1440px) {
  .work-content .buuton-wrapper {
    margin-top: 41px;
    gap: 14px;
  }
}
@media (min-width: 1600px) {
  .work-content .buuton-wrapper {
    margin-top: 44px;
    gap: 16px;
  }
}
@media (min-width: 1900px) {
  .work-content .buuton-wrapper {
    margin-top: 47px;
    gap: 18px;
  }
}
.work-content .buuton-wrapper button,
.work-content .buuton-wrapper a {
  border-radius: 80px;
  gap: 0px 10px;
}
.work-content .buuton-wrapper button svg,
.work-content .buuton-wrapper a svg {
  height: auto;
  width: clamp(15px, 1.25vw, 24px);
}
.work-content .buuton-wrapper button:hover svg,
.work-content .buuton-wrapper a:hover svg {
  filter: invert(1);
}

.work-detail-page + .footer-cta {
  display: none;
}

.other-works {
  padding-bottom: clamp(90px, 7.7vw, 148px);
}
.other-works .media-header {
  display: flex;
  justify-content: flex-start;
  gap: clamp(5px, 0.43vw, 10px);
  margin-top: clamp(25px, 2.7vw, 51px);
  margin-bottom: clamp(25px, 2.7vw, 51px);
}
.other-works .tab-button {
  color: #000;
  background: unset;
  border-radius: 80px;
}
.other-works .tab-button.active-tab, .other-works .tab-button:hover {
  background: #000;
  color: #fff;
}
.other-works .tab-content {
  display: none;
}
.other-works .active-tab {
  display: block;
}
.other-works .slick-track {
  display: flex;
}
.other-works .slick-slide {
  border-radius: 10px;
  border: 1px solid #CED7E5;
  background: #FFF;
  overflow: hidden;
  padding: 10px;
}
.other-works .slick-slide img {
  width: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  height: 170px;
}
@media (min-width: 576px) {
  .other-works .slick-slide img {
    height: 140px;
  }
}
@media (min-width: 768px) {
  .other-works .slick-slide img {
    height: clamp(100px, 11.83vw, 227px);
  }
}
.other-works .media-thumbnail {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  margin-bottom: 5px;
}
.other-works .media-thumbnail video,
.other-works .media-thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 376/227;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.other-works .media-item:hover .media-thumbnail video,
.other-works .media-item:hover .media-thumbnail img {
  transform: scale(1.05);
}
.other-works .media-details {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 20px);
  margin-top: clamp(8px, 1vw, 15px);
}
.other-works .media-details .play-btn-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f4f4f4;
  width: clamp(35px, 3vw, 45px);
  height: clamp(35px, 3vw, 45px);
  transition: 0.3s ease all;
  flex-shrink: 0;
}
.other-works .media-details .play-btn-circle:hover {
  background: #000;
}
.other-works .media-details .play-btn-circle:hover svg path {
  fill: #fff;
  stroke: #fff;
}
.other-works .media-details .play-btn-circle svg {
  width: clamp(14px, 1.2vw, 18px);
  height: clamp(14px, 1.2vw, 18px);
}
.other-works .media-details .media-info {
  padding-top: 0;
  flex: 1;
}
.other-works .media-details .media-info h3 {
  margin-bottom: 4px;
  font-weight: 600;
}
.other-works .media-details .media-info p {
  margin: 0;
}
.other-works h3,
.other-works a h3 {
  display: block;
  color: #000;
  width: 100%;
  line-height: 100%;
  margin-bottom: 10px;
  font-size: clamp(14px, 1.25vw, 20px);
}
.other-works p {
  color: #787878;
  font-size: clamp(11px, 0.89vw, 16px);
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
}
.other-works p + p {
  padding-left: clamp(6px, 0.94vw, 12px);
  margin-left: clamp(6px, 0.94vw, 12px);
}
.other-works p + p::before {
  background: #E8E8E8;
  width: 1px;
  height: clamp(15px, 1.57vw, 30px);
  left: 0;
}

.media-info {
  padding-top: 5px;
  display: flex;
  flex-wrap: wrap;
  width: 85%;
}
@media (min-width: 992px) {
  .media-info {
    padding-top: 10px;
  }
}

.slick-dots {
  z-index: 1;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: -38px;
}
@media (min-width: 768px) {
  .slick-dots {
    bottom: -58px;
  }
}
.slick-dots {
  gap: clamp(5px, 0.7vw, 12px);
}
.slick-dots li {
  transition: 0.3s ease all;
  opacity: 0.21;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="20" viewBox="0 0 38 20" fill="none"><path d="M21.0717 4.46838H28.0569C31.0909 4.46838 33.5582 6.94925 33.5582 10C33.5582 13.0507 31.0909 15.5316 28.0569 15.5316L21.0717 15.5316V20H28.0569C33.5401 20 38 15.5155 38 10.002C38 4.48852 33.5401 0.00201416 28.0569 0.00201416H21.0717V4.4704V4.46838Z" fill="black"/><path d="M0 10C0 15.5135 4.46187 20 9.94508 20L21.0717 20V15.5316L9.94508 15.5316C6.91109 15.5316 4.44385 13.0507 4.44385 10C4.44385 6.94926 6.91109 4.46838 9.94508 4.46838L21.0717 4.46838L21.0717 0H9.94508C4.46187 0 0 4.48651 0 10Z" fill="black"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(19px, 2vw, 38px);
  height: clamp(10px, 1.1vw, 20px);
}
.slick-dots li.slick-active {
  opacity: 1;
  transition: 0.5s ease all;
}
.slick-dots li button {
  font-size: 0;
  width: 100%;
  height: 100%;
}
.slick-dots li button::before {
  content: none;
}

.slick-slide {
  margin: 0 8px;
}
@media (min-width: 768px) {
  .slick-slide {
    margin: 0 9px;
  }
}
@media (min-width: 992px) {
  .slick-slide {
    margin: 0 10px;
  }
}
@media (min-width: 1200px) {
  .slick-slide {
    margin: 0 11px;
  }
}
@media (min-width: 1350px) {
  .slick-slide {
    margin: 0 12px;
  }
}
@media (min-width: 1440px) {
  .slick-slide {
    margin: 0 13px;
  }
}
@media (min-width: 1600px) {
  .slick-slide {
    margin: 0 14px;
  }
}
@media (min-width: 1900px) {
  .slick-slide {
    margin: 0 16px;
  }
}

.slick-list {
  margin: 0 -8px;
}
@media (min-width: 768px) {
  .slick-list {
    margin: 0 -9px;
  }
}
@media (min-width: 992px) {
  .slick-list {
    margin: 0 -10px;
  }
}
@media (min-width: 1200px) {
  .slick-list {
    margin: 0 -11px;
  }
}
@media (min-width: 1350px) {
  .slick-list {
    margin: 0 -12px;
  }
}
@media (min-width: 1440px) {
  .slick-list {
    margin: 0 -13px;
  }
}
@media (min-width: 1600px) {
  .slick-list {
    margin: 0 -14px;
  }
}
@media (min-width: 1900px) {
  .slick-list {
    margin: 0 -16px;
  }
}

#photos img {
  cursor: pointer;
}

.post-navigation {
  padding-top: clamp(16px, 1.88vw, 36px);
  border-top: 1px solid #000;
}
.post-navigation a,
.post-navigation button {
  text-transform: uppercase;
  transition: 0.5s ease all;
  color: #000;
  line-height: 100%;
  position: relative;
}
.post-navigation a::before,
.post-navigation button::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M16.0594 2.4548C16.3406 2.7361 16.4985 3.11756 16.4985 3.5153C16.4985 3.91305 16.3406 4.29451 16.0594 4.5758L8.63435 12.0008L16.0594 19.4258C16.3326 19.7087 16.4838 20.0876 16.4804 20.4809C16.4769 20.8742 16.3192 21.2504 16.0411 21.5285C15.763 21.8066 15.3867 21.9644 14.9935 21.9678C14.6002 21.9712 14.2213 21.82 13.9384 21.5468L5.45285 13.0613C5.17164 12.78 5.01367 12.3986 5.01367 12.0008C5.01367 11.6031 5.17164 11.2216 5.45285 10.9403L13.9384 2.4548C14.2196 2.1736 14.6011 2.01563 14.9989 2.01562C15.3966 2.01562 15.7781 2.1736 16.0594 2.4548Z" fill="black"/></svg>');
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(12px, 1.25vw, 24px);
  height: clamp(12px, 1.25vw, 24px);
}
.post-navigation a:first-child::before,
.post-navigation button:first-child::before {
  left: 0;
}
.post-navigation a:first-child,
.post-navigation button:first-child {
  padding-left: clamp(16px, 2vw, 36px);
}
.post-navigation a:last-child::before,
.post-navigation button:last-child::before {
  right: 0;
  transform: translateY(-50%) rotate(180deg);
}
.post-navigation a:last-child,
.post-navigation button:last-child {
  padding-right: clamp(16px, 2vw, 36px);
}
.post-navigation a:hover,
.post-navigation button:hover {
  color: #7f7f7f;
  transition: 0.5s ease all;
}
.post-navigation a:hover::before,
.post-navigation button:hover::before {
  transition: 0.5s ease all;
  opacity: 0.5;
}

.not-found > svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: auto;
  width: clamp(80px, 20.833vw, 247.692px);
}
.not-found {
  padding-top: clamp(80px, 7.97vw, 153px);
  padding-bottom: clamp(80px, 7.97vw, 120px);
}
.not-found .container-short img,
.not-found .container-short svg {
  margin-bottom: clamp(10px, 1.407vw, 27px);
  width: 70.726%;
  height: -moz-fit-content;
  height: fit-content;
}
@media (min-width: 768px) {
  .not-found .container-short img,
  .not-found .container-short svg {
    width: 44.666%;
  }
}
@media (min-width: 1200px) {
  .not-found .container-short img,
  .not-found .container-short svg {
    margin-top: -80px;
  }
}
.not-found span {
  line-height: normal;
  font-weight: 400;
  font-size: 22px;
}
@media (min-width: 768px) {
  .not-found span {
    font-size: 24px;
  }
}
@media (min-width: 992px) {
  .not-found span {
    font-size: 28px;
  }
}
@media (min-width: 1200px) {
  .not-found span {
    font-size: 30px;
  }
}
@media (min-width: 1280px) {
  .not-found span {
    font-size: 32px;
  }
}
@media (min-width: 1440px) {
  .not-found span {
    font-size: 34px;
  }
}
.not-found p {
  color: #3E444A;
  line-height: 111.111%;
  width: 80%;
  font-size: 18px;
}
@media (min-width: 768px) {
  .not-found p {
    width: clamp(498px, 32.084vw, 616px);
  }
}
.not-found h1 {
  color: #000;
  line-height: 100%;
  font-weight: 700;
}
@media (max-width: 575px) {
  .not-found h1 {
    margin-bottom: 20px;
  }
}
.not-found .buttonwrapper {
  margin-top: clamp(18px, 1.98vw, 38px);
  gap: clamp(11px, 1.1vw, 21px);
}
.not-found .buttonwrapper a + a {
  border: 1px solid #000;
}
.not-found .buttonwrapper a + a:hover {
  border: 1px solid #7a7a7a;
}
.not-found ~ .footer-cta {
  display: none;
}

section.thank-you {
  padding-top: clamp(80px, 7.97vw, 153px);
  padding-bottom: clamp(80px, 7.97vw, 120px);
}
section.thank-you > svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: auto;
  width: clamp(80px, 20.833vw, 247.692px);
}
section.thank-you ~ .footer-cta {
  display: none;
}
section.thank-you h1 {
  font-weight: 700;
  margin-bottom: clamp(8px, 0.94vw, 18px);
}
section.thank-you picture {
  margin-bottom: clamp(10px, 2.11vw, 40.5px);
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  section.thank-you picture {
    width: 21.429%;
  }
}
section.thank-you picture img {
  width: 100%;
  height: auto;
}
section.thank-you p {
  color: #3E444A;
  line-height: 160%;
  margin-bottom: clamp(10px, 2.1vw, 36px);
}

@keyframes tailWag {
  0% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(-4deg);
  }
  85% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.cat-tail {
  transform-box: view-box;
  transform-origin: 504px 515px;
  animation: tailWag 5s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

@keyframes eyebrowRaise {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
.eybrow-left,
.eybrow-right {
  animation: eyebrowRaise 3s infinite ease-in-out;
}

.eybrow-right {
  animation-delay: 0.2s;
}

@keyframes whiskerTwitchLeft {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-3deg);
  }
}
@keyframes whiskerTwitchRight {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
.moustache-left-top,
.moustache-left-bottom {
  transform-box: fill-box;
  transform-origin: right center;
  /* Pivot from the face */
  animation: whiskerTwitchLeft 1s infinite ease-in-out;
}

.moustache-right-top,
.moustache-right-bottom {
  transform-box: fill-box;
  transform-origin: left center;
  /* Pivot from the face */
  animation: whiskerTwitchRight 1s infinite ease-in-out;
}

.moustache-left-top {
  animation-delay: 0.1s;
}

.moustache-right-top {
  animation-delay: 0.3s;
}

.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=style.css.map */