* {
     box-sizing: border-box;
 }

 body,
 html {
     height: 100%;
 }
/* Start Fonts */
/* Load TheanoDidot */
@font-face {
  font-family: 'TheanoDidot';
  src: url('./fonts/TheanoDidot-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Load Nephilm Regular */
@font-face {
  font-family: 'Nephilm';
  src: url('./fonts/Nephilm.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Load Nephilm Italic */
@font-face {
  font-family: 'Nephilm';
  src: url('./fonts/Nephilm Italic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
}

/* Load RedRose Regular */
@font-face {
  font-family: 'RedRose';
  src: url('./fonts/RedRose-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Load RedRose Light */
@font-face {
  font-family: 'RedRose';
  src: url('./fonts/RedRose-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

/* Load RedRose Bold */
@font-face {
  font-family: 'RedRose';
  src: url('./fonts/RedRose-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Example usage */
.typo-caps{
    font-family: 'RedRose', sans-serif;
    font-weight: 500; /* Bold */
    text-transform: uppercase;
    letter-spacing: .1em;
}
.typo-h1, h1  {
  font-family: 'TheanoDidot', serif;
  font-weight: 800;
  font-style: normal;
}

.typo-h2, h2 {
  font-family: 'Nephilm', sans-serif;
  font-style: italic; 
  font-weight: 600;/* applies Nephilm Italic */
}

p,li,a {
  font-family: 'RedRose', sans-serif;
  font-weight: 500; /* Light */
}

strong {
  font-family: 'RedRose', sans-serif;
  font-weight: 700; /* Bold */
}

/* End Fonts */

 body {
      font-family: 'MyCustomFont', sans-serif;
    }

 @meta charset "UTF-8";
 @import"../../use.typekit.net/mep8lum.css";

 *,
 :before,
 :after {
     box-sizing: border-box;
     border-width: 0;
     border-style: solid;
     border-color: currentColor
 }

 :before,
 :after {
     --tw-content: ""
 }

 html {
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     -moz-tab-size: 4;
     -o-tab-size: 4;
     tab-size: 4;
     /* font-family: futura-pt, sans-serif; */
     font-feature-settings: normal;
     font-variation-settings: normal
 }

 body {
     margin: 0;
     line-height: inherit
 }

 hr {
     height: 0;
     color: inherit;
     border-top-width: 1px
 }

 abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-size: inherit;
     font-weight: inherit
 }

 a {
     color: inherit;
     text-decoration: inherit
 }

 b,
 strong {
     font-weight: bolder
 }

 code,
 kbd,
 samp,
 pre {
     /* font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; */
     font-size: 1em
 }

 small {
     font-size: 80%
 }

 sub,
 sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline
 }

 sub {
     bottom: -.25em
 }

 sup {
     top: -.5em
 }

 table {
     text-indent: 0;
     border-color: inherit;
     border-collapse: collapse
 }

 button,
 input,
 optgroup,
 select,
 textarea {
     /* font-family: inherit; */
     font-feature-settings: inherit;
     font-variation-settings: inherit;
     font-size: 100%;
     font-weight: inherit;
     line-height: inherit;
     color: inherit;
     margin: 0;
     padding: 0
 }

 button,
 select {
     text-transform: none
 }

 button,
 [type=button],
 [type=reset],
 [type=submit] {
     -webkit-appearance: button;
     background-color: transparent;
     background-image: none
 }

 :-moz-focusring {
     outline: auto
 }

 :-moz-ui-invalid {
     box-shadow: none
 }

 progress {
     vertical-align: baseline
 }

 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
     height: auto
 }

 [type=search] {
     -webkit-appearance: textfield;
     outline-offset: -2px
 }

 ::-webkit-search-decoration {
     -webkit-appearance: none
 }

 ::-webkit-file-upload-button {
     -webkit-appearance: button;
     font: inherit
 }

 summary {
     display: list-item
 }

 blockquote,
 dl,
 dd,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 hr,
 figure,
 p,
 pre {
     margin: 0
 }

 fieldset {
     margin: 0;
     padding: 0
 }

 legend {
     padding: 0
 }

 ol,
 ul,
 menu {
     list-style: none;
     margin: 0;
     padding: 0
 }

 dialog {
     padding: 0
 }

 textarea {
     resize: vertical
 }

 input::-moz-placeholder,
 textarea::-moz-placeholder {
     opacity: 1;
     color: #9ca3af
 }

 input::placeholder,
 textarea::placeholder {
     opacity: 1;
     color: #9ca3af
 }

 button,
 [role=button] {
     cursor: pointer
 }

 :disabled {
     cursor: default
 }

 img,
 svg,
 video,
 canvas,
 audio,
 iframe,
 embed,
 object {
     display: block;
     vertical-align: middle
 }

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

 [hidden] {
     display: none
 }

 .lenis.lenis-smooth {
     scroll-behavior: auto
 }

 .lenis.lenis-smooth [data-lenis-prevent] {
     overscroll-behavior: contain
 }

 .lenis.lenis-stopped {
     overflow: hidden;
     border-right: var(--scrollbar-gutter, 0) solid transparent
 }

 .lenis.lenis-stopped:after {
     content: "";
     pointer-events: none;
     position: fixed;
     top: 0;
     right: 0;
     z-index: 1000;
     height: 100%;
     width: auto;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     overflow-y: scroll
 }

 .lenis.lenis-scrolling iframe {
     pointer-events: none
 }

 html {
     overflow-x: hidden;
     overflow-y: scroll;
     font-size: min(4.266666666667vw, 16px)
 }
 .hero__background {
  position: relative;
  width: 100%;
  height: 100vh; /* Full screen height */
  overflow: hidden;
}
.hero__background::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: .6;
}

.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Makes video behave like background-size: cover */
  z-index: -1; /* Keep it behind content */
}
/* Start Category */
.categories {
  text-align: center;
  padding: 5rem 1.5rem;
}

.category-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 30px;
  width: 200px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
}

.category-card img {
  width: 80px;
  margin-bottom: 15px;
}

.category-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.category-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}


/* End Category */
image-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
  padding: 1.2rem;
}
image-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

 @media (min-width: 1024px) {
     html {
         font-size: clamp(10.24px, 1vw, 16px)
     }
         .client-list span:nth-of-type(4n) {
        margin-right: 1.5rem !important;
    }
 }
  @media (min-width: 1800px){
    .category-list{
        position: relative;
    }

    .categories .category-list::after{
       content: '';
        position: absolute;
        width: 180px;
        height: 355px;
        background-image: url(./media/casual.png);
        background-size: contain;
        background-repeat: no-repeat;
        right: 0;
    }
     .categories .category-list::before{
             content: '';
        position: absolute;
        width: 186px;
        height: 374px;
        background-image: url(./media/man.png);
        background-size: contain;
        background-repeat: no-repeat;
        left: 0;
        bottom: 0;
    }
  }

 html {
     -webkit-tap-highlight-color: transparent
 }

 body {

     font-size: 1.125rem;
     letter-spacing: .011111111111em;
     line-height: 1.2222222222222223;
     min-height: 100vh;
     min-height: 100svh;
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(15 16 16 / var(--tw-text-opacity))
 }

 details summary {
     cursor: pointer
 }

 details summary::-webkit-details-marker {
     display: none
 }

 details summary::details-marker {
     display: none
 }

 details summary::marker {
     content: ""
 }

 td,
 th {
     padding: 0
 }

 caption,
 th {
     text-align: left
 }

 video-embed {
     position: relative;
     padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
     --tw-aspect-w: 16
 }

 video-embed>* {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 video-embed {
     --tw-aspect-h: 9;
     display: block
 }

 video-embed button,
 video-embed iframe,
 video-embed img,
 video-embed video {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     height: 100%;
     width: 100%;
     -o-object-fit: cover;
     object-fit: cover
 }

 :root {
     --underline-offset: .075em;
     --underline-height: max(.03em, 1px)
 }

 @supports (background-size: round(nearest, max(.03em, 1px), 1px)) {
     :root {
         --underline-height: round(nearest, max(.03em, 1px), 1px)
     }
 }

 .underline-in,
 .underline-on,
 .underline-out {
     background-position-y: min(50% + .5em + var(--underline-height, 1px) / 2 + var(--underline-offset, 0em), 100%);
     background-repeat: no-repeat;
     display: inline;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1)
 }

 .underline-in,
 .underline-on {
     background-position-x: 0%;
     background-image: linear-gradient(var(--underline-color, currentColor), var(--underline-color, currentColor));
     transition-property: background-size;
     transition-duration: .4s
 }

 .underline-in {
     background-size: 0% var(--underline-height, 1px)
 }

 @media (hover: hover) and (pointer: fine) {

     .underline-in:hover,
     a:hover .underline-in,
     button:hover .underline-in {
         background-size: 100% var(--underline-height, 1px);
         color:black;
     }
 }

 .underline-out {
     background-image: linear-gradient(to right, var(--underline-color, currentColor) 0%, var(--underline-color, currentColor) 33.333%, transparent 33.333%, transparent 66.666%, var(--underline-color, currentColor) 66.666%, var(--underline-color, currentColor) 100%);
     background-size: 300% var(--underline-height, 1px);
     background-position-x: 100%;
     transition-property: background-position-x;
     transition-duration: 1.2s
 }

 @media (hover: hover) and (pointer: fine) {

     .underline-out:hover,
     a:hover .underline-out,
     button:hover .underline-out {
         background-position-x: 0%
     }
 }

 .underline-off {
     background-image: none
 }
/*
 .typo-body,
 .typo-button,
 .typo-caps,
 .typo-small {
     font-family: futura-pt, sans-serif
 } */

 /* .typo-h1,
 .typo-h2,
 .typo-h3,
 .typo-h4,
 .typo-pullout {
     font-family: Recife Display, sans-serif
 } */

 .typo-body {
     font-size: 1.125rem;
     letter-spacing: .011111111111em;
     line-height: 1.2222222222222223
 }

 .typo-button {
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1;
     
 }
 .button,.btn{
    font-family: 'RedRose', sans-serif;
 }

 @media (min-width: 1024px) {
     .typo-button {
         font-size: 1rem;
         letter-spacing: .025em;
         line-height: 1
     }
 }

 .typo-caps {
     text-transform: uppercase;
     letter-spacing: .028571428571em;
     line-height: 1.1428571428571428
 }

 .typo-h1 {
     font-size: 3.25rem;
     letter-spacing: -.046153846154em;
     /* line-height: 1.0769230769230769 */
 }

 @media (min-width: 1024px) {
     .typo-h1 {
         font-size: 7.5rem;
         letter-spacing: -.05em;
         /* line-height: 1 */
     }
 }

 .typo-h2 {
     font-size: 2.25rem;
     letter-spacing: -.027777777778em;
     line-height: 1.1111111111111112
 }

 @media (min-width: 1024px) {
     .typo-h2 {
         font-size: 3.75rem;
         letter-spacing: -.023333333333em;
         line-height: 1.0666666666666667
     }
 }

 .typo-h3 {
     font-size: 1.5rem;
     letter-spacing: -.016666666667em;
     line-height: 1.25
 }

 @media (min-width: 1024px) {
     .typo-h3 {
         font-size: 2.625rem;
         letter-spacing: -.02380952381em;
         line-height: 1.1904761904761905
     }
 }

 .typo-h4 {
     font-size: 1.25rem;
     letter-spacing: -.02em;
     line-height: 1.3
 }

 @media (min-width: 1024px) {
     .typo-h4 {
         font-size: 1.75rem;
         letter-spacing: -.021428571429em;
         line-height: 1.2857142857142858
     }
 }

 .container {
     margin-left: auto;
     margin-right: auto;
     max-width: 100%;
     padding-left: 1.125rem;
     padding-right: 1.125rem;
 }

 @media (min-width: 1024px) {
     .container {
         padding-left: 2rem !important;
         padding-right: 2rem !important;
     }
 }

 .grid-layout {
     display: grid;
     grid-template-columns: repeat(12, minmax(0, 1fr));
     -moz-column-gap: .5625rem;
     column-gap: .5625rem
 }

 @media (min-width: 1024px) {
     .grid-layout {
         -moz-column-gap: 1.5rem;
         column-gap: 1.5rem
     }
 }

 *,
 :before,
 :after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
     --tw-translate-y: 0;
     --tw-rotate: 0;
     --tw-skew-x: 0;
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
     --tw-pan-x: ;
     --tw-pan-y: ;
     --tw-pinch-zoom: ;
     --tw-scroll-snap-strictness: proximity;
     --tw-gradient-from-position: ;
     --tw-gradient-via-position: ;
     --tw-gradient-to-position: ;
     --tw-ordinal: ;
     --tw-slashed-zero: ;
     --tw-numeric-figure: ;
     --tw-numeric-spacing: ;
     --tw-numeric-fraction: ;
     --tw-ring-inset: ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / .5);
     --tw-ring-offset-shadow: 0 0 #0000;
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
     --tw-blur: ;
     --tw-brightness: ;
     --tw-contrast: ;
     --tw-grayscale: ;
     --tw-hue-rotate: ;
     --tw-invert: ;
     --tw-saturate: ;
     --tw-sepia: ;
     --tw-drop-shadow: ;
     --tw-backdrop-blur: ;
     --tw-backdrop-brightness: ;
     --tw-backdrop-contrast: ;
     --tw-backdrop-grayscale: ;
     --tw-backdrop-hue-rotate: ;
     --tw-backdrop-invert: ;
     --tw-backdrop-opacity: ;
     --tw-backdrop-saturate: ;
     --tw-backdrop-sepia:
 }

 ::backdrop {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
     --tw-translate-y: 0;
     --tw-rotate: 0;
     --tw-skew-x: 0;
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
     --tw-pan-x: ;
     --tw-pan-y: ;
     --tw-pinch-zoom: ;
     --tw-scroll-snap-strictness: proximity;
     --tw-gradient-from-position: ;
     --tw-gradient-via-position: ;
     --tw-gradient-to-position: ;
     --tw-ordinal: ;
     --tw-slashed-zero: ;
     --tw-numeric-figure: ;
     --tw-numeric-spacing: ;
     --tw-numeric-fraction: ;
     --tw-ring-inset: ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / .5);
     --tw-ring-offset-shadow: 0 0 #0000;
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
     --tw-blur: ;
     --tw-brightness: ;
     --tw-contrast: ;
     --tw-grayscale: ;
     --tw-hue-rotate: ;
     --tw-invert: ;
     --tw-saturate: ;
     --tw-sepia: ;
     --tw-drop-shadow: ;
     --tw-backdrop-blur: ;
     --tw-backdrop-brightness: ;
     --tw-backdrop-contrast: ;
     --tw-backdrop-grayscale: ;
     --tw-backdrop-hue-rotate: ;
     --tw-backdrop-invert: ;
     --tw-backdrop-opacity: ;
     --tw-backdrop-saturate: ;
     --tw-backdrop-sepia:
 }

 .aspect-h-1 {
     --tw-aspect-h: 1
 }

 .aspect-h-2 {
     --tw-aspect-h: 2
 }

 .aspect-h-3 {
     --tw-aspect-h: 3
 }

 .aspect-h-5 {
     --tw-aspect-h: 5
 }

 .aspect-h-9 {
     --tw-aspect-h: 9
 }

 .aspect-w-1 {
     position: relative;
     padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
     --tw-aspect-w: 1
 }

 .aspect-w-1>* {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 .aspect-w-16 {
     position: relative;
     padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
     --tw-aspect-w: 16
 }

 .aspect-w-16>* {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 .aspect-w-3 {
     position: relative;
     padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
     --tw-aspect-w: 3
 }

 .aspect-w-3>* {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 .aspect-w-4 {
     position: relative;
     padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
     --tw-aspect-w: 4
 }

 .aspect-w-4>* {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 .aspect-w-9 {
     position: relative;
     padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
     --tw-aspect-w: 9
 }

 .aspect-w-9>* {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 .form-input,
 .form-textarea,
 .form-select,
 .form-multiselect {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     background-color: #fff;
     border-color: #6b7280;
     border-width: 1px;
     border-radius: 0;
     padding: .5rem .75rem;
     font-size: 1rem;
     line-height: 1.5rem;
     --tw-shadow: 0 0 #0000
 }

 .form-input:focus,
 .form-textarea:focus,
 .form-select:focus,
 .form-multiselect:focus {
     outline: 2px solid transparent;
     outline-offset: 2px;
     --tw-ring-inset: var(--tw-empty, );
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: #2563eb;
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     border-color: #2563eb
 }

 .form-input::-moz-placeholder,
 .form-textarea::-moz-placeholder {
     color: #6b7280;
     opacity: 1
 }

 .form-input::placeholder,
 .form-textarea::placeholder {
     color: #6b7280;
     opacity: 1
 }

 .form-input::-webkit-datetime-edit-fields-wrapper {
     padding: 0
 }

 .form-input::-webkit-date-and-time-value {
     min-height: 1.5em;
     text-align: inherit
 }

 .form-input::-webkit-datetime-edit {
     display: inline-flex
 }

 .form-input::-webkit-datetime-edit,
 .form-input::-webkit-datetime-edit-year-field,
 .form-input::-webkit-datetime-edit-month-field,
 .form-input::-webkit-datetime-edit-day-field,
 .form-input::-webkit-datetime-edit-hour-field,
 .form-input::-webkit-datetime-edit-minute-field,
 .form-input::-webkit-datetime-edit-second-field,
 .form-input::-webkit-datetime-edit-millisecond-field,
 .form-input::-webkit-datetime-edit-meridiem-field {
     padding-top: 0;
     padding-bottom: 0
 }

 .form-select {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
     background-position: right .5rem center;
     background-repeat: no-repeat;
     background-size: 1.5em 1.5em;
     padding-right: 2.5rem;
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact
 }

 .form-select:where([size]:not([size="1"])) {
     background-image: initial;
     background-position: initial;
     background-repeat: unset;
     background-size: initial;
     padding-right: .75rem;
     -webkit-print-color-adjust: unset;
     print-color-adjust: unset
 }

 .form-checkbox,
 .form-radio {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     padding: 0;
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
     display: inline-block;
     vertical-align: middle;
     background-origin: border-box;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     flex-shrink: 0;
     height: 1rem;
     width: 1rem;
     color: #2563eb;
     background-color: #fff;
     border-color: #6b7280;
     border-width: 1px;
     --tw-shadow: 0 0 #0000
 }

 .form-checkbox {
     border-radius: 0
 }

 .form-radio {
     border-radius: 100%
 }

 .form-checkbox:focus,
 .form-radio:focus {
     outline: 2px solid transparent;
     outline-offset: 2px;
     --tw-ring-inset: var(--tw-empty, );
     --tw-ring-offset-width: 2px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: #2563eb;
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
 }

 .form-checkbox:checked,
 .form-radio:checked {
     border-color: transparent;
     background-color: currentColor;
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat
 }

 .form-checkbox:checked {
     background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")
 }

 .form-radio:checked {
     background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")
 }

 .form-checkbox:checked:hover,
 .form-checkbox:checked:focus,
 .form-radio:checked:hover,
 .form-radio:checked:focus {
     border-color: transparent;
     background-color: currentColor
 }

 .form-checkbox:indeterminate {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
     border-color: transparent;
     background-color: currentColor;
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat
 }

 .form-checkbox:indeterminate:hover,
 .form-checkbox:indeterminate:focus {
     border-color: transparent;
     background-color: currentColor
 }

 .rich-text {
     display: flex;
     flex-direction: column;
     overflow-wrap: break-word
 }

 .rich-text--text-center h1,
 .rich-text--text-center h2,
 .rich-text--text-center h3,
 .rich-text--text-center h4,
 .rich-text--text-center .h1,
 .rich-text--text-center .h2,
 .rich-text--text-center .h3,
 .rich-text--text-center .h4,
 .rich-text--text-center .lead-paragraph,
 .rich-text--text-center p {
     text-align: center
 }

 .rich-text--text-center .has-button {
     justify-content: center
 }

 .rich-text--text-center ol,
 .rich-text--text-center ul {
     align-self: center;
     padding-right: 1.5em
 }

 .rich-text h1,
 .rich-text .h1 {

     font-size: 3.25rem;
     letter-spacing: -.046153846154em;
     line-height: 1.0769230769230769
 }

 @media (min-width: 1024px) {

     .rich-text h1,
     .rich-text .h1 {
         font-size: 7.5rem;
         letter-spacing: -.05em;
         line-height: 1
     }
 }

 .rich-text h1+*,
 .rich-text .h1+* {
     margin-top: 2.5rem
 }

 @media (min-width: 1024px) {

     .rich-text h1+*,
     .rich-text .h1+* {
         margin-top: 3.5rem
     }
 }

 .rich-text h2,
 .rich-text .h2 {

     font-size: 2.25rem;
     letter-spacing: -.027777777778em;
     line-height: 1.1111111111111112
 }

 @media (min-width: 1024px) {

     .rich-text h2,
     .rich-text .h2 {
         font-size: 3.75rem;
         letter-spacing: -.023333333333em;
         line-height: 1.0666666666666667
     }
 }

 .rich-text h2+*,
 .rich-text .h2+* {
     margin-top: 1.75rem
 }

 @media (min-width: 1024px) {

     .rich-text h2+*,
     .rich-text .h2+* {
         margin-top: 3rem
     }
 }

 .rich-text h3,
 .rich-text .h3 {

     font-size: 1.5rem;
     letter-spacing: -.016666666667em;
     line-height: 1.25
 }

 @media (min-width: 1024px) {

     .rich-text h3,
     .rich-text .h3 {
         font-size: 2.625rem;
         letter-spacing: -.02380952381em;
         line-height: 1.1904761904761905
     }
 }

 .rich-text h3+*,
 .rich-text .h3+* {
     margin-top: 1.75rem
 }

 @media (min-width: 1024px) {

     .rich-text h3+*,
     .rich-text .h3+* {
         margin-top: 2.5rem
     }
 }

 .rich-text h4,
 .rich-text .h4 {

     font-size: 1.25rem;
     letter-spacing: -.02em;
     line-height: 1.3
 }

 @media (min-width: 1024px) {

     .rich-text h4,
     .rich-text .h4 {
         font-size: 1.75rem;
         letter-spacing: -.021428571429em;
         line-height: 1.2857142857142858
     }
 }

 .rich-text h4+*,
 .rich-text .h4+* {
     margin-top: 1.5rem
 }

 @media (min-width: 1024px) {

     .rich-text h4+*,
     .rich-text .h4+* {
         margin-top: 1.75rem
     }
 }

 .rich-text .lead-paragraph {

     font-size: 1.25rem;
     letter-spacing: -.02em;
     line-height: 1.3
 }

 @media (min-width: 1024px) {
     .rich-text .lead-paragraph {
         font-size: 1.75rem;
         letter-spacing: -.021428571429em;
         line-height: 1.2857142857142858
     }
 }

 .rich-text .lead-paragraph+* {
     margin-top: 1.25rem
 }

 @media (min-width: 1024px) {
     .rich-text .lead-paragraph+* {
         margin-top: 1.5rem
     }
 }

 .rich-text .caps {
     /* font-family: futura-pt, sans-serif; */
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1.1428571428571428
 }

 .rich-text .small-print {
     /* font-family: futura-pt, sans-serif; */
     font-size: .875rem;
     letter-spacing: 0em;
     line-height: 1.4285714285714286
 }

 @media (min-width: 640px) {
     .rich-text .small-print {
         font-size: 1rem;
         letter-spacing: 0em;
         line-height: 1.375
     }
 }

 .rich-text p+*,
 .rich-text ul+*,
 .rich-text ol+* {
     margin-top: 1.25rem
 }

 @media (min-width: 1024px) {

     .rich-text p+*,
     .rich-text ul+*,
     .rich-text ol+* {
         margin-top: 1.75rem
     }
 }

 .rich-text ul,
 .rich-text ol {
     list-style-position: outside;
     padding-left: 2.5em
 }

 .rich-text ul>li,
 .rich-text ol>li {
     margin-top: .5em
 }

 .rich-text ul {
     list-style-type: disc
 }

 .rich-text ol {
     list-style-type: decimal
 }

 .rich-text a {
     background-position-y: min(50% + .5em + var(--underline-height, 1px) / 2 + var(--underline-offset, 0em), 100%);
     background-repeat: no-repeat;
     display: inline;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     background-image: linear-gradient(to right, var(--underline-color, currentColor) 0%, var(--underline-color, currentColor) 33.333%, transparent 33.333%, transparent 66.666%, var(--underline-color, currentColor) 66.666%, var(--underline-color, currentColor) 100%);
     background-size: 300% var(--underline-height, 1px);
     background-position-x: 100%;
     transition-property: background-position-x;
     transition-duration: 1.2s
 }

 @media (hover: hover) and (pointer: fine) {

     .rich-text a:hover,
     a:hover .rich-text a,
     button:hover .rich-text a {
         background-position-x: 0%
     }
 }

 .rich-text p.has-button {
     display: flex;
     flex-wrap: wrap;
     -moz-column-gap: 1.5rem;
     column-gap: 1.5rem;
     row-gap: .75rem;
     padding-top: .75rem;
     padding-bottom: .75rem
 }

 .rich-text p.has-button a {
     background-position-y: min(50% + .5em + var(--underline-height, 1px) / 2 + var(--underline-offset, 0em), 100%);
     background-repeat: no-repeat;
     display: inline;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     background-position-x: 0%;
     background-image: linear-gradient(var(--underline-color, currentColor), var(--underline-color, currentColor));
     transition-property: background-size;
     transition-duration: .4s;
     background-size: 0% var(--underline-height, 1px)
 }

 @media (hover: hover) and (pointer: fine) {

     .rich-text p.has-button a:hover,
     a:hover .rich-text p.has-button a,
     button:hover .rich-text p.has-button a {
         background-size: 100% var(--underline-height, 1px)
     }
 }

 .rich-text p.has-button a {
     /* font-family: futura-pt, sans-serif; */
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1.1428571428571428;
     position: relative;
     margin-right: 1.5rem;
     display: block
 }

 .rich-text p.has-button a:after {
     position: absolute;
     left: 100%;
     top: 0;
     margin-left: .5rem;
     display: block;
     height: 100%;
     width: 1rem;
     --tw-content: "";
     content: var(--tw-content);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M14 4.5L0 4.5' stroke='%230F1010'/%3E%3Cpath d='M10 0.5L14 4.5L10 8.5' stroke='%230F1010'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center
 }

 .rich-text p.has-button a {
     width: -moz-max-content;
     width: max-content
 }

 .rich-text h1,
 .rich-text h2,
 .rich-text h3,
 .rich-text h4,
 .rich-text .h1,
 .rich-text .h2,
 .rich-text .h3,
 .rich-text .h4 {
     margin-top: calc(1rem + .25em)
 }

 .rich-text h1:first-child,
 .rich-text h2:first-child,
 .rich-text h3:first-child,
 .rich-text h4:first-child,
 .rich-text .h1:first-child,
 .rich-text .h2:first-child,
 .rich-text .h3:first-child,
 .rich-text .h4:first-child {
     margin-top: 0
 }

 .rich-text h1 strong,
 .rich-text h2 strong,
 .rich-text h3 strong,
 .rich-text h4 strong,
 .rich-text .h1 strong,
 .rich-text .h2 strong,
 .rich-text .h3 strong,
 .rich-text .h4 strong {
     font-weight: inherit
 }

 .arrow-button {
     background-position-y: min(50% + .5em + var(--underline-height, 1px) / 2 + var(--underline-offset, 0em), 100%);
     background-repeat: no-repeat;
     display: inline;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     background-position-x: 0%;
     background-image: linear-gradient(var(--underline-color, currentColor), var(--underline-color, currentColor));
     transition-property: background-size;
     transition-duration: .4s;
     background-size: 0% var(--underline-height, 1px)
 }

 @media (hover: hover) and (pointer: fine) {

     .arrow-button:hover,
     a:hover .arrow-button,
     button:hover .arrow-button {
         background-size: 100% var(--underline-height, 1px)
     }
 }

 .arrow-button {
     /* font-family: futura-pt, sans-serif; */
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1.1428571428571428;
     position: relative;
     margin-right: 1.5rem;
     display: block
 }

 .arrow-button:after {
     position: absolute;
     left: 100%;
     top: 0;
     margin-left: .5rem;
     display: block;
     height: 100%;
     width: 1rem;
     --tw-content: "";
     content: var(--tw-content);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M14 4.5L0 4.5' stroke='%230F1010'/%3E%3Cpath d='M10 0.5L14 4.5L10 8.5' stroke='%230F1010'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center
 }

 .\!button {
     background-image: none;
     /* font-family: futura-pt, sans-serif; */
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1
 }

 @media (min-width: 1024px) {
     .\!button {
         font-size: 1rem;
         letter-spacing: .025em;
         line-height: 1
     }
 }

 .\!button {
     position: relative;
     display: inline-flex;
     width: -moz-max-content;
     width: max-content;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     justify-content: center;
     overflow: hidden;
     border-radius: 0;
     padding-left: .875rem;
     padding-right: .875rem;
     text-align: center
 }

 .button {
     background-image: none;
     /* font-family: futura-pt, sans-serif; */
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
 }
 image-card img {
  clip-path: none; /* normal rectangle by default */
  transition: clip-path 0.5s ease-in-out;
}

image-card:hover img {
  clip-path: url(#clip-wave); /* wave shape on hover */
}


 @media (min-width: 1024px) {
     .button {
         font-size: 1rem;
         letter-spacing: .025em;
     }
 }

 .button {
     position: relative;
     display: inline-flex;
     width: -moz-max-content;
     width: max-content;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     justify-content: center;
     /* overflow: hidden; */
     border-radius: 0;
     padding-left: .875rem;
     padding-right: .875rem;
     text-align: center
 }

 .\!button,
 .button {
     border-width: calc(1.125rem - .5px);
     border-color: transparent;
     background-color: transparent;
     color: black;
 }

 .\!button {
     margin: 1px !important;
     outline: 1px solid var(--theme-text) !important;
     /* text-shadow: 0px 0px var(--theme-text), 0px 3em var(--theme-text) !important; */
     transition: background-color .5s cubic-bezier(.6, 0, .2, 1), text-shadow .5s cubic-bezier(.6, 0, .2, 1), outline-color .5s cubic-bezier(.6, 0, .2, 1) !important
 }

 .button {
     margin: 1px;
     outline: 1px solid var(--theme-text);
     /* text-shadow: 0px 0px var(--theme-text), 0px 3em var(--theme-text); */
     transition: background-color .5s cubic-bezier(.6, 0, .2, 1), text-shadow .5s cubic-bezier(.6, 0, .2, 1), outline-color .5s cubic-bezier(.6, 0, .2, 1)
 }
 .border-btn{
    color: white;
 }

 .\!button:disabled {
     pointer-events: none;
     opacity: .5
 }

 .button:disabled {
     pointer-events: none;
     opacity: .5
 }

 .\!button:hover,
 .button:hover {
     background-color: var(--theme-accent)
 }

 .\!button:hover {
     outline: 1px solid var(--theme-accent) !important;
     /* text-shadow: 0px -3em var(--theme-accent-contrast), 0px 0px var(--theme-accent-contrast) !important */
 }

 .button:hover {
     outline: 1px solid var(--theme-accent);
     /* text-shadow: 0px -3em var(--theme-accent-contrast), 0px 0px var(--theme-accent-contrast) */
 }

 .card {
     background-color: #0f10104d
 }

 .theme--light .card,
 .card.theme--light {
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity))
 }

 .theme--dark .card,
 .card.theme--dark {
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(15 16 16 / var(--tw-text-opacity))
 }
 a:hover{
    color:black;
 }
 .btn-white:hover{
    color: white;
 }
 .component+.component--media {
     padding-top: 0
 }



 @media (min-width: 1024px) {
     .component+.component--media {
         padding-top: 0
     }
 }

 .component--accordion {
     padding-top: 3rem;
     padding-bottom: 3rem
 }

 @media (min-width: 1024px) {
     .component--accordion {
         padding-top: 7rem;
         padding-bottom: 5rem
     }
 }

 .component--cards {
     padding-top: 4rem;
     padding-bottom: 4rem
 }

 @media (min-width: 1024px) {
     .component--cards {
         padding-top: 9rem;
         padding-bottom: 7rem
     }
 }

 .component--embed {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem
 }

 @media (min-width: 1024px) {
     .component--embed {
         padding-top: 2rem;
         padding-bottom: 2rem
     }
 }

 .component--embed+.component--media,
 .component--embed .component--embed {
     padding-top: 0
 }

 @media (min-width: 1024px) {

     .component--embed+.component--media,
     .component--embed .component--embed {
         padding-top: 0
     }
 }

 .component--form {
     padding-top: 4rem;
     padding-bottom: 4rem
 }

 @media (min-width: 1024px) {
     .component--form {
         padding-top: 7rem;
         padding-bottom: 7rem
     }
 }

 .component--link-list {
     padding-top: 2rem;
     padding-bottom: 4.5rem
 }

 @media (min-width: 1024px) {
     .component--link-list {
         padding-top: 3rem;
         padding-bottom: 10rem
     }
 }

 .component--link-list+.component--pattern-divide {
     padding-top: 0
 }

 @media (min-width: 768px) {
     .component--link-list+.component--pattern-divide {
         padding-top: 0
     }
 }

 @media (min-width: 1024px) {
     .component--link-list+.component--pattern-divide {
         margin-top: -2rem
     }
 }

 .component--media {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem
 }

 @media (min-width: 1024px) {
     .component--media {
         padding-top: 2rem;
         padding-bottom: 2rem
     }
 }

 .component--media+.component--media,
 .component--media .component--embed {
     padding-top: 0
 }

 @media (min-width: 1024px) {

     .component--media+.component--media,
     .component--media .component--embed {
         padding-top: 0
     }
 }

 .component--page-heading {
     padding-top: 8rem;
     padding-bottom: 4rem
 }

 @media (min-width: 1024px) {
     .component--page-heading {
         padding-top: 9rem;
         padding-bottom: 6rem
     }
 }

 .component--page-heading+.component--form,
 .component--page-heading+.component--text,
 .component--page-heading+.component--text-with-image {
     padding-top: 0
 }

 @media (min-width: 1024px) {

     .component--page-heading+.component--form,
     .component--page-heading+.component--text,
     .component--page-heading+.component--text-with-image {
         padding-top: 0
     }
 }

 .component--pattern-divide {
     padding-top: 3rem
 }

 @media (min-width: 768px) {
     .component--pattern-divide {
         padding-top: 4.5rem
     }
 }

 .component--pattern-divide+.component {
     margin-top: -1px
 }

 .component--spacer {
     padding-top: var(--spacer-mobile-value);
 }

 @media (min-width: 1024px) {
     .component--spacer {
         padding-top: var(--spacer-desktop-value)
     }
 }

 .component--spacer+.component {
     padding-top: 0
 }

 @media (min-width: 1024px) {
     .component--spacer+.component {
         padding-top: 0
     }
 }

 .component--text {
     padding-top: 0rem;
     padding-bottom: 3rem
 }

 @media (min-width: 1024px) {
     .component--text {
         padding-top: 0rem;
         padding-bottom: 7rem
     }
 }
 @media (min-width: 1366px) {
     .component--text {
         padding-top: 4rem;
     }
     .text-section{
        padding-bottom: 12rem !important;
     }
     .component--cards{
        padding-top: 7rem !important;
     }
 }

 .component--text+.component--cards,
 .component--text+.component--text,
 .component--text+.component--text-with-image {
     padding-top: 0
 }
 .client-list{
    display: flex !important;
    flex-direction: column;
    width: 291px;
 }
 /* Fix spacing for owl items */
.client-list .owl-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

 .client-list span {
	 display: flex;
	 width: 148px;
	 height: 90px;
	 border-radius: 5px;
	 padding: 0.5rem;
	box-shadow: 0 0 10px rgba(0 0 0 / 0.2);
     background-color: white;
     align-items: center;
     justify-content: center;
         margin: 20px 0;
         transition: .3s all;
}
.client-list span:hover{
    transform: scale(1.1);
}
 .client-list span img {
	 width: 100%;
	 height: auto;
	 object-fit: scale-down;
}
.client-list .owl-nav{
  display: flex;
    justify-content: space-between;
    width: 140px;
    align-self: center;
   margin: 1.5rem auto 0;
   z-index: -1;
}
.client-list .owl-nav .owl-prev,
.client-list .owl-nav .owl-next{
   display: flex;
    background-image: url(./media/gradient-arrow.svg) !important;
    background-size: 100% 100% !important;
    min-width: 54px;
    width: 54px;
    height: 41px;
    filter: grayscale(1);
}
.client-list .owl-nav .owl-prev{
     transform: rotate(-180deg);
    margin-right: 1rem;
}
.client-list .owl-nav .owl-prev.btn-active,
.client-list .owl-nav .owl-next.btn-active{
    filter: sepia(1);
}

 @media (min-width: 1024px) {

     .component--text+.component--cards,
     .component--text+.component--text,
     .component--text+.component--text-with-image {
         padding-top: 0
     }
 }

 .component--text-promo {
     padding-top: 4rem;
     padding-bottom: 4rem
 }

 @media (min-width: 1024px) {
     .component--text-promo {
         padding-top: 8rem;
         padding-bottom: 8rem
     }
 }

 .component--text-promo+.component--pattern-divide {
     padding-top: 0
 }

 @media (min-width: 1024px) {
     .component--text-promo+.component--pattern-divide {
         margin-top: -5rem;
         padding-top: 0
     }
 }

 .component--swatches {
     padding-bottom: 6rem
 }

 .component--swatches:first-child {
     padding-top: 6rem
 }

 @media (min-width: 1024px) {
     .component--swatches {
         padding-bottom: 12rem
     }

     .component--swatches:first-child {
         padding-top: 12rem
     }
 }

 .component--text-with-image {
     padding-top: 4rem;
     padding-bottom: 4rem
 }

 @media (min-width: 1024px) {
     .component--text-with-image {
         padding-top: 7rem;
         padding-bottom: 7rem
     }
 }

 .component--lookbook {
     padding-top: 6rem
 }

 @media (min-width: 1024px) {
     .component--lookbook {
         padding-top: 7rem
     }
 }

 .modal {
     position: fixed;
     top: 0;
     left: 0;
     margin: 0;
     display: none;
     height: 100%;
     max-height: none;
     width: min(100vw - var(--scrollbar-gutter, 0px), 100%);
     max-width: none;
     overflow: visible;
     overscroll-behavior: none;
     scroll-behavior: auto;
     background-color: #0f101000;
     padding: 1.125rem;
     outline: 2px solid transparent;
     outline-offset: 2px;
     outline-width: 0px;
     -ms-overflow-style: none;
     scrollbar-width: none
 }

 .modal::-webkit-scrollbar {
     display: none
 }

 @media (min-width: 1024px) {
     .modal {
         padding: 2rem
     }
 }

 .modal[open],
 .modal[transition] {
     display: flex
 }

 .modal[transition]:before {
     opacity: 1
 }

 .modal::backdrop {
     display: none
 }

 .modal:before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     cursor: default;
     touch-action: manipulation;
     background-color: #0f1010bf;
     opacity: 0;
     outline: 2px solid transparent;
     outline-offset: 2px;
     transition-property: opacity;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .5s;
     will-change: transform
 }

 .modal__content {
     position: relative;
     z-index: 10;
     margin-left: auto;
     margin-right: auto;
     max-height: 100%;
     width: 100%;
     max-width: 34rem;
     --tw-translate-y: 2.5rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     overflow-y: auto;
     overflow-x: hidden;
     overscroll-behavior: none;
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
     padding: 4.5rem 1rem 3rem;
     opacity: 0;
     outline-width: 0px;
     outline-color: #0f10101a;
     transition-property: transform, opacity;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .5s;
     will-change: transform
 }

 @media (min-width: 1024px) {
     .modal__content {
         padding: 5rem 2rem 4rem
     }
 }

 .modal__content--right {
     margin-left: auto;
     margin-right: 0;
     --tw-translate-x: calc(100% + 1.125rem);
     --tw-translate-y: 0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     opacity: 1
 }

 @media (min-width: 1024px) {
     .modal__content--right {
         --tw-translate-x: calc(100% + 2rem);
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }
 }

 .modal__content--small {
     max-width: 24rem
 }

 .modal[transition] .modal__content {
     --tw-translate-x: 0px;
     --tw-translate-y: 0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     opacity: 1
 }

 .modal__close {
     position: absolute;
     top: 1.5rem;
     right: 1rem;
     height: 1.5rem;
     width: 1.5rem
 }

 @media (min-width: 1024px) {
     .modal__close {
         top: 2rem;
         right: 2rem
     }
 }

 .modal__close:before,
 .modal__close:after {
     content: "";
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     border-top-width: 1px
 }

 .modal__close:before {
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .modal__close:after {
     --tw-rotate: -45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .filter-dropdown {
     position: relative;
     z-index: 0;
     width: 16rem;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none
 }

 @media (hover: hover) and (pointer: fine) {
     .filter-dropdown:hover {
         --tw-bg-opacity: 1;
         background-color: rgb(255 255 255 / var(--tw-bg-opacity));
         --tw-shadow: inset 0 0 0 1px;
         --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
         box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
         --tw-shadow-color: rgb(15 16 16 / .3);
         --tw-shadow: var(--tw-shadow-colored)
     }
 }

 .filter-dropdown[open] {
     z-index: 999
 }

 .filter-dropdown__summary {
     /* font-family: futura-pt, sans-serif; */
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1
 }

 @media (min-width: 1024px) {
     .filter-dropdown__summary {
         font-size: 1rem;
         letter-spacing: .025em;
         line-height: 1
     }
 }

 .filter-dropdown__summary {
     position: relative;
     z-index: 10;
     padding: 1.25rem
 }

 .filter-dropdown__summary-wrap {
     display: flex;
     width: 100%;
     align-items: center;
     justify-content: space-between
 }

 .filter-dropdown__summary-text {
     text-overflow: ellipsis;
     white-space: nowrap;
     padding-right: 1.25rem
 }

 .filter-dropdown__summary-icon {
     height: .875rem;
     width: .5rem;
     --tw-rotate: 90deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .filter-dropdown[open] .filter-dropdown__summary-icon {
     --tw-rotate: -90deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .filter-dropdown__content {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
     --tw-shadow: inset 0 0 0 1px;
     --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-shadow-color: rgb(15 16 16 / .3);
     --tw-shadow: var(--tw-shadow-colored)
 }

 .filter-dropdown__content-wrap {
     border-top: 3.5rem solid transparent;
     margin-right: 1px;
     margin-bottom: 1px;
     max-height: 70vh;
     overflow: auto;
     padding-left: 1.25rem;
     padding-right: 1.25rem;
     padding-bottom: 1.25rem
 }

 .filter-dropdown__list-item {
     /* font-family: futura-pt, sans-serif; */
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1.1428571428571428;
     display: flex;
     width: 100%;
     align-items: flex-start;
     padding-top: 1rem
 }

 .form-input,
 .form-select,
 .form-textarea,
 .form-datepicker {
     width: 100%;
     max-width: none;
     text-overflow: ellipsis;
     border-width: 1px;
     border-color: #0f10104d;
     background-color: transparent;
     padding: .875rem 1rem;
     font-size: 1rem;
     letter-spacing: .025em;
     line-height: 1
 }

 .form-input:focus,
 .form-select:focus,
 .form-textarea:focus,
 .form-datepicker:focus {
     --tw-border-opacity: 1;
     border-color: rgb(53 87 127 / var(--tw-border-opacity));
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(53 87 127 / var(--tw-ring-opacity))
 }

 .form-input::-moz-placeholder,
 .form-inputarea::-moz-placeholder,
 .form-datepicker::-moz-placeholder {
     text-transform: uppercase;
     --tw-text-opacity: 1;
     color: rgb(15 16 16 / var(--tw-text-opacity))
 }

 .form-input::placeholder,
 .form-inputarea::placeholder,
 .form-datepicker::placeholder {
     text-transform: uppercase;
     --tw-text-opacity: 1;
     color: rgb(15 16 16 / var(--tw-text-opacity))
 }

 .form-checkbox {
     height: 1.25rem;
     width: 1.25rem;
     cursor: pointer;
     background-image: none;
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     transition-property: border-color;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s;
     border-color: #0f10104d !important;
     --tw-bg-opacity: 1 !important;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
     --tw-ring-color: transparent !important
 }

 .form-checkbox:focus-visible {
     outline: auto;
     outline: -webkit-focus-ring-color auto 1px
 }

 .form-checkbox:checked {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 9.99985L8.33345 13.3332L15 6.6665' stroke='%230F1010'/%3E%3C/svg%3E")
 }

 .form-checkbox:hover {
     --tw-border-opacity: 1 !important;
     border-color: rgb(15 16 16 / var(--tw-border-opacity)) !important
 }

 .form-radio {
     height: 1.25rem;
     width: 1.25rem;
     cursor: pointer;
     border-radius: 9999px;
     background-image: none;
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     transition-property: border-color;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s;
     border-color: #0f10104d !important;
     --tw-bg-opacity: 1 !important;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
     --tw-ring-color: transparent !important
 }

 .form-radio:focus-visible {
     outline: auto;
     outline: -webkit-focus-ring-color auto 1px
 }

 .form-radio:checked {
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='%230F1010' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='20' /%3E%3C/svg%3E")
 }

 .form-radio:hover {
     --tw-border-opacity: 1 !important;
     border-color: rgb(15 16 16 / var(--tw-border-opacity)) !important
 }

 .umbraco-forms-page {
     display: flex;
     width: 100%;
     flex-direction: column
 }

 .umbraco-forms-caption {

     font-size: 1.25rem;
     letter-spacing: -.02em;
     line-height: 1.3
 }

 @media (min-width: 1024px) {
     .umbraco-forms-caption {
         font-size: 1.75rem;
         letter-spacing: -.021428571429em;
         line-height: 1.2857142857142858
     }
 }

 .umbraco-forms-caption {
     padding-bottom: 1rem
 }

 .umbraco-forms-fieldset {
     display: grid;
     grid-auto-columns: minmax(0, 1fr);
     grid-auto-flow: column;
     -moz-column-gap: .625rem;
     column-gap: .625rem;
     row-gap: 1.5rem
 }

 @media (min-width: 1024px) {
     .umbraco-forms-fieldset {
         -moz-column-gap: 1.5rem;
         column-gap: 1.5rem
     }
 }

 .umbraco-forms-field-wrapper {
     display: flex;
     flex-direction: column
 }

 .umbraco-forms-field {
     margin-bottom: 1.5rem;
     display: flex;
     flex-direction: column;
     row-gap: .75rem
 }

 @media (min-width: 1024px) {
     .umbraco-forms-field {
         row-gap: 1.125rem
     }
 }

 .umbraco-forms-field.input-validation-error {
     --tw-text-opacity: 1;
     color: rgb(204 0 0 / var(--tw-text-opacity))
 }

 .umbraco-forms-field.checkbox .umbraco-forms-field-wrapper {
     display: flex;
     flex-wrap: wrap
 }

 .umbraco-forms-field.checkbox .umbraco-forms-field-wrapper .form-checkbox {
     margin-top: .25rem
 }

 .umbraco-forms-field.checkbox .umbraco-forms-field-wrapper .umbraco-forms-label {
     margin-left: .5rem
 }

 .umbraco-forms-field.fileupload input[type=file]::file-selector-button,
 .umbraco-forms-field.upload input[type=file]::file-selector-button {
     display: none
 }

 .umbraco-forms-field.swatches {
     display: none
 }

 .umbraco-forms-label {
     display: block;
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1
 }

 .umbraco-forms-tooltip {
     /* font-family: futura-pt, sans-serif; */
     font-size: .875rem;
     letter-spacing: 0em;
     line-height: 1.4285714285714286
 }

 @media (min-width: 640px) {
     .umbraco-forms-tooltip {
         font-size: 1rem;
         letter-spacing: 0em;
         line-height: 1.375
     }
 }

 .umbraco-forms-navigation {
     margin-top: auto;
     padding-top: .5rem
 }

 .field-validation-error {
     margin-top: .5rem;
     display: block;
     width: 100%;
     --tw-text-opacity: 1;
     color: rgb(204 0 0 / var(--tw-text-opacity));
     font-size: .875rem;
     letter-spacing: 0em;
     line-height: 1.4285714285714286
 }

 @media (min-width: 640px) {
     .field-validation-error {
         font-size: 1rem;
         letter-spacing: 0em;
         line-height: 1.375
     }
 }

 .footer-form .form-input,
 .footer-form .form-select,
 .footer-form .form-textarea {
     width: 100%;
     padding: .875rem 1rem
 }

 .footer-form .umbraco-forms-caption {

     font-size: 2.25rem;
     letter-spacing: -.027777777778em;
     line-height: 1.1111111111111112
 }

 @media (min-width: 1024px) {
     .footer-form .umbraco-forms-caption {
         font-size: 3.75rem;
         letter-spacing: -.023333333333em;
         line-height: 1.0666666666666667
     }
 }

 .footer-form .umbraco-forms-caption {
     display: block;
     padding-bottom: 2rem
 }

 @media (min-width: 1024px) {
     .footer-form .umbraco-forms-caption {

         font-size: 1.5rem;
         letter-spacing: -.016666666667em;
         line-height: 1.25
     }

     @media (min-width: 1024px) {
         .footer-form .umbraco-forms-caption {
             font-size: 2.625rem;
             letter-spacing: -.02380952381em;
             line-height: 1.1904761904761905
         }
     }

     .footer-form .umbraco-forms-caption {
         padding-bottom: 2.5rem
     }
 }

 .footer-form .umbraco-forms-container {
     display: flex;
     flex-direction: column;
     row-gap: .5rem
 }

 .footer-form .umbraco-forms-field {
     margin-bottom: 0
 }

 .footer-form .umbraco-forms-navigation {
     display: flex;
     padding-top: .5rem
 }

 .footer-form .umbraco-forms-navigation .button,
 .footer-form .umbraco-forms-navigation .\!button {
     flex-grow: 1
 }

 .lookbook {
     display: block
 }

 .lookbook__modal {
     --swiper-gap: 15rem;
     padding: 0
 }

 .lookbook__modal:before {
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity))
 }

 .lookbook__modal[transition]:before {
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity))
 }

 .lookbook__modal-content {
     position: relative;
     z-index: 10;
     margin-left: auto;
     margin-right: auto;
     height: 100%;
     max-height: 100%;
     width: 100%;
     max-width: 100%;
     transform: none;
     overflow: hidden;
     background-color: transparent;
     padding: 4rem 2.5rem
 }

 @media (min-width: 1024px) {
     .lookbook__modal-content {
         padding: 4.5rem 9rem
     }
 }

 .lookbook__swiper {
     height: 100%;
     width: 100%;
     flex: 1 1 0%;
     --tw-scale-x: .9;
     --tw-scale-y: .9;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     overflow: visible;
     transition-property: transform;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .5s
 }

 .lookbook__modal[transition] .lookbook__swiper {
     --tw-scale-x: 1;
     --tw-scale-y: 1;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .lookbook__swiper-component {
     display: flex;
     height: 100%;
     width: 100%
 }

 .lookbook__swiper-wrapper {
     height: 100%;
     width: 100%;
     align-items: center
 }

 .lookbook__swiper-slide {
     display: flex;
     height: 100%;
     width: 100%;
     align-items: center;
     justify-content: center
 }

 .lookbook__swiper-prev,
 .lookbook__swiper-next {
     /* font-family: futura-pt, sans-serif; */
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1.1428571428571428;
     position: absolute;
     bottom: .5rem;
     z-index: 50;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     padding: 1.125rem;
     opacity: 1;
     transition-property: opacity;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .2s;
     height: auto !important;
     width: auto !important;
     background-color: transparent !important
 }

 @media (min-width: 1024px) {

     .lookbook__swiper-prev,
     .lookbook__swiper-next {
         bottom: 50%;
         --tw-translate-y: 50%;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }
 }

 .lookbook__swiper-prev:after,
 .lookbook__swiper-next:after {
     content: "";
     pointer-events: none;
     position: absolute;
     top: 50%;
     width: 2.5rem;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     border-top-width: 1px;
     border-color: #0f10104d;
     transition-property: transform;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .2s;
     will-change: transform
 }

 .lookbook__swiper-prev[disabled],
 .lookbook__swiper-next[disabled] {
     opacity: .3
 }

 .lookbook__swiper-prev[disabled]:after,
 .lookbook__swiper-next[disabled]:after {
     --tw-scale-x: .5;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .lookbook__swiper-prev {
     left: 0;
     padding-right: 1.25rem
 }

 @media (min-width: 1024px) {
     .lookbook__swiper-prev {
         left: .75rem
     }
 }

 .lookbook__swiper-prev:after {
     left: 100%;
     transform-origin: left
 }

 @media (hover: hover) and (pointer: fine) {
     .lookbook__swiper-prev:hover:after {
         --tw-scale-x: .5;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }
 }

 .lookbook__swiper-next {
     right: 0;
     padding-left: 1.25rem
 }

 @media (min-width: 1024px) {
     .lookbook__swiper-next {
         right: .75rem
     }
 }

 .lookbook__swiper-next:after {
     right: 100%;
     transform-origin: right
 }

 @media (hover: hover) and (pointer: fine) {
     .lookbook__swiper-next:hover:after {
         --tw-scale-x: .5;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }
 }

 .lookbook__listing {
     visibility: hidden;
     margin: -.3125rem;
     display: block;
     overflow: hidden
 }

 @media (min-width: 1024px) {
     .lookbook__listing {
         margin: -.75rem
     }
 }

 .no-js .lookbook__listing,
 .lookbook--ready .lookbook__listing {
     visibility: visible
 }

 .lookbook__listing>li {
     padding: .3125rem
 }

 @media (min-width: 1024px) {
     .lookbook__listing>li {
         padding: .75rem
     }
 }

 .lookbook__listing:not(.lookbook--ready .lookbook__listing) {
     margin: 0;
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: .625rem
 }

 .lookbook__listing:not(.lookbook--ready .lookbook__listing)>li {
     padding: 0
 }


 @media (min-width: 768px) {
     .lookbook__listing:not(.lookbook--ready .lookbook__listing) {
         grid-template-columns: repeat(3, minmax(0, 1fr))
     }
    .client-list{
        width: 100%;
    }
 
 }

 @media (min-width: 1024px) {
     .lookbook__listing:not(.lookbook--ready .lookbook__listing) {
         grid-template-columns: repeat(4, minmax(0, 1fr));
         gap: 1.5rem
     }
 }

 .lookbook__thumb {
     width: 100%;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     cursor: pointer;
     touch-action: manipulation;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     transition-property: transform;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .5s;
     transition-timing-function: cubic-bezier(.38, 0, .21, 1);
     will-change: transform
 }

 @media (hover: hover) and (pointer: fine) {
     .lookbook__thumb:hover {
         --tw-scale-x: 1.2;
         --tw-scale-y: 1.2;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }
 }

 .lookbook__image {
     width: auto;
     height: auto;
     max-width: min(100vw - 5rem, 900px);
     max-height: calc(100vh - 8rem);
     max-height: calc(100svh - 8rem);
     overflow: hidden;
     opacity: 1;
     transition-property: opacity;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .5s
 }

 @media (min-width: 1024px) {
     .lookbook__image {
         max-width: min(100vw - 18rem, 900px);
         max-height: calc(100vh - 9rem);
         max-height: calc(100svh - 9rem)
     }
 }

 .swiper-lazy-preloader+.lookbook__image {
     opacity: 0
 }

 .lookbook__caption {
     display: none
 }

 @media (min-width: 1024px) {
     .lookbook__caption {
         position: absolute;
         margin-top: .5rem;
         display: block;
         height: 0px;
         width: 0px;
         min-width: 100%;
         text-overflow: ellipsis;
         white-space: nowrap
     }
 }

 .lookbook__toggle {
     touch-action: manipulation;
     opacity: .3;
     transition-property: opacity;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .2s
 }

 .lookbook__toggle:disabled {
     opacity: 1
 }

 @media (hover: hover) and (pointer: fine) {
     .lookbook__toggle:hover {
         opacity: 1
     }
 }

 .media {
     position: relative
 }

 .media>*:not(picture),
 .media>picture>img {
     width: 100%;
     -o-object-fit: cover;
     object-fit: cover
 }

 .media>*:not(picture)[src$=".svg"],
 .media>picture>img[src$=".svg"] {
     -o-object-fit: contain;
     object-fit: contain
 }

 .media--landscape {
     position: relative;
     padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
     --tw-aspect-w: 16
 }

 .media--landscape>* {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 .media--landscape {
     --tw-aspect-h: 9
 }

 .media--square {
     position: relative;
     padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
     --tw-aspect-w: 1
 }

 .media--square>* {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 .media--square {
     --tw-aspect-h: 1
 }

 .nav-menu {
     --duration: .7s;
     --width: min(82.666vw, 20rem);
     --x: 0%;
     position: relative;
     z-index: 100;
     display: block
 }

 @media (min-width: 1024px) {
     .nav-menu {
         --width: 26.875vw
     }
 }

 .nav-menu--open {
     --x: 100%
 }

 .nav-menu__toggle,
 .nav-menu__close {
     position: relative;
     z-index: 40;
     display: block;
     height: 1.5rem;
     width: 1.5rem;
     touch-action: manipulation
 }

 .nav-menu__toggle:before,
 .nav-menu__toggle:after,
 .nav-menu__close:before,
 .nav-menu__close:after {
     content: "";
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 1px;
     transition: transform .5s ease 0s, box-shadow .5s ease .2s;
     position: absolute;
     left: 50%;
     top: 50%;
     display: block;
     height: 1px;
     width: 1.5rem;
     --tw-translate-x: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     background-color: currentColor
 }

 .nav-menu--open .nav-menu__toggle:before,
 .nav-menu--open .nav-menu__toggle:after,
 .nav-menu--open .nav-menu__close:before,
 .nav-menu--open .nav-menu__close:after {
     --tw-translate-y: 0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 @media (min-width: 1024px) {

     .nav-menu--open .nav-menu__toggle:before,
     .nav-menu--open .nav-menu__toggle:after,
     .nav-menu--open .nav-menu__close:before,
     .nav-menu--open .nav-menu__close:after {
         box-shadow: inset 0 0 0 1px #0f1010, inset 0 0 0 1px;
         transition-delay: 0s, 0s
     }
 }

 .nav-menu__toggle:before,
 .nav-menu__close:before {
     --tw-translate-y: -.25rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .nav-menu--open .nav-menu__toggle:before,
 .nav-menu--open .nav-menu__close:before {
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .nav-menu__toggle:after,
 .nav-menu__close:after {
     --tw-translate-y: .25rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .nav-menu--open .nav-menu__toggle:after,
 .nav-menu--open .nav-menu__close:after {
     --tw-rotate: -45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .nav-menu__toggle {
     z-index: 40
 }

 @media (max-width: 1023px) {
     .nav-menu__toggle {
         transition-property: visibility;
         transition-timing-function: cubic-bezier(.4, 0, .2, 1);
         transition-duration: .15s;
         transition-duration: var(--duration)
     }

     .nav-menu--open .nav-menu__toggle {
         visibility: hidden
     }
 }

 @media (min-width: 1024px) {
     .nav-menu__toggle {
         z-index: 50
     }
 }

 .nav-menu__overlay {
     pointer-events: none;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 30;
     height: 100vh;
     height: 100dvh;
     width: min(100vw - var(--scrollbar-gutter, 0px), 100%);
     touch-action: manipulation;
     --tw-bg-opacity: 1;
     background-color: rgb(15 16 16 / var(--tw-bg-opacity));
     opacity: 0;
     transition-property: opacity;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s;
     transition-duration: var(--duration);
     will-change: opacity
 }

 .nav-menu--open .nav-menu__overlay {
     pointer-events: auto;
     opacity: .75
 }

 .nav-menu__nav {
     position: fixed;
     top: 0;
     left: calc(var(--width) * -1);
     z-index: 50;
     display: flex;
     height: 100vh;
     height: 100dvh;
     width: var(--width);
     --tw-translate-x: var(--x);
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     overflow: hidden;
     --tw-text-opacity: 1;
     color: rgb(15 16 16 / var(--tw-text-opacity));
     transition-property: transform;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s;
     transition-duration: var(--duration)
 }

 @media (min-width: 1024px) {
     .nav-menu__nav {
         z-index: 40;
         overflow: visible
     }
 }

 .nav-menu__container {
     height: 100%;
     width: 100%;
     --tw-translate-x: calc(var(--nav-menu-index, 0) * -100%);
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     transition-property: transform;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s;
     transition-duration: var(--duration)
 }

 @media (min-width: 1024px) {
     .nav-menu__container {
         --tw-translate-x: 0px;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }
 }

 .nav-menu__level {
     pointer-events: auto;
     visibility: hidden;
     position: absolute;
     top: 0;
     left: 100%;
     z-index: -10;
     display: flex;
     height: 100%;
     width: 100%;
     flex-direction: column;
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity));
     transition-property: visibility;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s;
     transition-duration: var(--duration)
 }

 @media (min-width: 1024px) {
     .nav-menu__level {
         left: 0;
         transition-property: transform, visibility;
         transition-timing-function: cubic-bezier(.4, 0, .2, 1);
         transition-duration: .15s;
         transition-duration: var(--duration)
     }
 }

 .nav-menu__level:after {
     content: "";
     pointer-events: none;
     position: absolute;
     top: 0;
     right: 0;
     z-index: 10;
     height: 100%;
     border-right-width: 1px;
     border-right-color: #0f10104d
 }

 .nav-menu__level[data-nav-menu-level="0"] {
     visibility: visible;
     left: 0
 }

 [active]>.nav-menu__level {
     visibility: visible
 }

 @media (min-width: 1024px) {
     [active]>.nav-menu__level {
         z-index: -10;
         --tw-translate-x: var(--x);
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }
 }

 @media (max-width: 1023px) {
     .nav-menu__level[has-active] {
         visibility: hidden
     }
 }

 .nav-menu__block {
     display: flex;
     height: 100%;
     width: 100%;
     flex-direction: column;
     overflow: auto;
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity));
     padding-left: 1.125rem;
     padding-right: 1.125rem;
     padding-bottom: 2.5rem
 }

 @media (min-width: 1024px) {
     .nav-menu__block {
         padding-left: 2rem;
         padding-right: 2rem
     }

     .nav-menu__block:before {
         content: "";
         position: sticky;
         top: 0;
         z-index: 10;
         margin-bottom: 3rem;
         display: block;
         height: var(--site-header-h);
         flex: none;
         background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
         --tw-gradient-from: #F7F6F1 var(--tw-gradient-from-position);
         --tw-gradient-to: rgb(247 246 241 / 0) var(--tw-gradient-to-position);
         --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         --tw-gradient-from-position: 60%;
         --tw-gradient-to: transparent var(--tw-gradient-to-position)
     }
 }

 .nav-menu__top {
     position: sticky;
     top: 0;
     z-index: 10;
     margin-bottom: 2rem;
     display: flex;
     height: var(--site-header-h);
     flex: none;
     align-items: center;
     background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
     --tw-gradient-from: #F7F6F1 var(--tw-gradient-from-position);
     --tw-gradient-to: rgb(247 246 241 / 0) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
     --tw-gradient-from-position: 75%;
     --tw-gradient-to: transparent var(--tw-gradient-to-position)
 }

 @media (min-width: 1024px) {
     .nav-menu__top {
         display: none
     }
 }

 .nav-menu__list {
     pointer-events: none
 }

 @media (hover: hover) and (pointer: fine) {

     .nav-menu__list a,
     .nav-menu__list button {
         transition-property: opacity;
         transition-timing-function: cubic-bezier(.4, 0, .2, 1);
         transition-duration: .3s
     }

     .nav-menu__list:hover>li:not([active]):not(:hover)>a,
     .nav-menu__list:hover>li:not([active]):not(:hover)>button {
         opacity: .3
     }
 }

 [data-nav-menu-level="1"] .nav-menu__list {
     padding-top: .5625rem
 }

 .nav-menu__level[has-active]>.nav-menu__block>.nav-menu__list>li:not([active])>a,
 .nav-menu__level[has-active]>.nav-menu__block>.nav-menu__list>li:not([active])>button {
     opacity: .3
 }

 @media (hover: hover) and (pointer: fine) {

     .nav-menu__level[has-active]>.nav-menu__block>.nav-menu__list>li>a:hover,
     .nav-menu__level[has-active]>.nav-menu__block>.nav-menu__list>li>a:focus-visible,
     .nav-menu__level[has-active]>.nav-menu__block>.nav-menu__list>li>button:hover,
     .nav-menu__level[has-active]>.nav-menu__block>.nav-menu__list>li>button:focus-visible {
         opacity: 1
     }
 }

 .nav-menu__link,
 .nav-menu__next,
 .nav-menu__back {
     /* font-family: futura-pt, sans-serif; */
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1.1428571428571428;
     pointer-events: auto;
     display: flex;
     width: 100%;
     touch-action: manipulation;
     align-items: center;
     padding-top: .375rem;
     padding-bottom: .375rem;
     text-align: left
 }
.nav-menu__link:hover{
    color: black !important;
 }

 .nav-menu__link svg,
 .nav-menu__next svg,
 .nav-menu__back svg {
     margin-top: -.5em;
     margin-bottom: -.5em
 }

 @media (min-width: 1024px) {

     .nav-menu__link,
     .nav-menu__next {
         /* font-family: futura-pt, sans-serif; */
         font-size: 1.125rem;
         letter-spacing: .011111111111em;
         line-height: 1.2222222222222223
     }
 }

 .nav-menu__link--0,
 .nav-menu__next--0 {

     text-transform: none;
     font-size: 1rem;
     letter-spacing: -.021428571429em;
     line-height: 1.1428571428571428
 }

 [active] .nav-menu__link--0,
 [active] .nav-menu__next--0 {
     font-style: italic
 }

 .nav-menu__link {
     justify-content: flex-start
 }

 .nav-menu__link--all {
     /* font-family: futura-pt, sans-serif; */
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1.1428571428571428;
     margin-top: 2.5rem
 }

 .nav-menu__link svg {
     margin-left: .5rem;
     height: .5625rem;
     width: .9375rem
 }

 .nav-menu__next {
     justify-content: space-between
 }

 .nav-menu__next svg {
     margin-left: .5rem;
     height: .875rem;
     width: .5rem
 }

 .nav-menu__back {
     justify-content: flex-start
 }

 .nav-menu__back svg {
     order: -9999;
     margin-right: .5rem;
     height: .875rem;
     width: .5rem;
     --tw-scale-x: -1;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .nav-menu__bottom {
     margin-top: auto;
     padding-top: 2.5rem
 }

 .nav-menu__bottom li {
     padding-top: .375rem;
     padding-bottom: .375rem
 }

 .nav-menu__bottom a {
     display: inline;
     width: auto
 }

 .nav-menu__images {
     display: none
 }

 @media (min-width: 1024px) {
     .nav-menu__images {
         position: relative;
         padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
         --tw-aspect-w: 4
     }

     .nav-menu__images>* {
         position: absolute;
         height: 100%;
         width: 100%;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0
     }

     .nav-menu__images {
         --tw-aspect-h: 3;
         pointer-events: none;
         margin-left: -2rem;
         margin-right: -2rem;
         margin-top: auto;
         margin-bottom: -2.5rem;
         display: block;
         flex: none;
         border-top-width: 2.5rem;
         border-color: transparent
     }

     .nav-menu__images img {
         -o-object-fit: cover;
         object-fit: cover;
         opacity: 0
     }

     .nav-menu__images img:first-of-type,
     .nav-menu__images img[active] {
         opacity: 1
     }
 }

 .request-swatches {
     display: block
 }

 .request-swatches__filters {
     margin-bottom: .75rem;
     display: block;
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity));
     padding-top: 1.5rem;
     padding-bottom: .75rem;
     position: sticky;
     top: calc(var(--site-header-h) - .75rem);
     z-index: 60;
     transition-duration: .5s;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1)
 }

 @media (min-width: 1024px) {
     .request-swatches__filters {
         margin-bottom: 1.875rem
     }
 }

 .folded .request-swatches__filters {
     top: -.75rem
 }

 .request-swatches__item {
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none
 }

 .request-swatches__item-input:checked+.request-swatches__item-label {
     cursor: pointer
 }

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

 .request-swatches__item-label {
     display: block;
     touch-action: manipulation;
     padding-left: 1rem;
     padding-right: 1rem;
     text-align: center;
     transition-property: opacity;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .5s;
     transition-timing-function: cubic-bezier(.38, 0, .21, 1)
 }

 @media (min-width: 1024px) {
     .request-swatches__item-label {
         padding-left: .75rem;
         padding-right: .75rem
     }
 }

 .request-swatches--no-hover .request-swatches__item-label:not(.request-swatches__item-input:checked+.request-swatches__item-label) {
     opacity: .5
 }

 @media (hover: hover) and (pointer: fine) {
     .request-swatches__item-label:hover:not(.request-swatches--no-hover .request-swatches__item-label) {
         cursor: pointer
     }
 }

 .request-swatches__item-thumb {
     position: relative;
     z-index: 0;
     margin-bottom: 1.5rem;
     display: block;
     overflow: hidden;
     border-radius: 9999px;
     padding-top: 100%
 }

 .request-swatches__item-thumb:before {
     content: "";
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M24 12L24 36' stroke='%23F7F6F1' stroke-width='2'/%3E%3Cpath d='M36 24L12 24' stroke='%23F7F6F1' stroke-width='2'/%3E%3C/svg%3E") 50% 50% no-repeat;
     pointer-events: none;
     position: absolute;
     top: 50%;
     left: 50%;
     z-index: 20;
     height: 1.5rem;
     width: 1.5rem;
     --tw-translate-x: -50%;
     --tw-translate-y: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     background-size: contain
 }

 @media (hover: hover) and (pointer: fine) {
     .request-swatches__item-thumb:before {
         opacity: 0;
         transition-property: opacity;
         transition-timing-function: cubic-bezier(.4, 0, .2, 1);
         transition-duration: .5s;
         transition-timing-function: cubic-bezier(.38, 0, .21, 1)
     }
 }

 @media (min-width: 1024px) {
     .request-swatches__item-thumb:before {
         height: 3rem;
         width: 3rem
     }
 }

 .request-swatches__item-label:hover:not(.request-swatches--no-hover .request-swatches__item-label) .request-swatches__item-thumb:before,
 .request-swatches__item-input:checked+.request-swatches__item-label .request-swatches__item-thumb:before {
     opacity: 1
 }

 .request-swatches__item-input:checked+.request-swatches__item-label .request-swatches__item-thumb:before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M12 24L20.0003 32L36 16' stroke='%23F7F6F1' stroke-width='2.4'/%3E%3C/svg%3E")
 }

 .request-swatches__item-image {
     position: absolute;
     top: -10%;
     left: -10%;
     height: 120%;
     width: 120%;
     max-width: none;
     --tw-scale-x: .84;
     --tw-scale-y: .84;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     -o-object-fit: cover;
     object-fit: cover;
     transition-property: transform;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .5s;
     transition-timing-function: cubic-bezier(.38, 0, .21, 1)
 }

 .request-swatches__item-label:hover:not(.request-swatches--no-hover .request-swatches__item-label) .request-swatches__item-image,
 .request-swatches__item-input:checked+.request-swatches__item-label .request-swatches__item-image {
     --tw-scale-x: 1;
     --tw-scale-y: 1;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .request-swatches__item-name {
     display: block
 }

 .request-swatches__summary {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
     gap: .625rem
 }

 @media (min-width: 768px) {
     .request-swatches__summary {
         max-width: 21.5rem
     }
 }

 @media (min-width: 1024px) {
     .request-swatches__summary {
         gap: .375rem
     }
   
 
 }

 .request-swatches__summary>li {
     position: relative;
     padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
     --tw-aspect-w: 1
 }

 .request-swatches__summary>li>* {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 .request-swatches__summary>li {
     --tw-aspect-h: 1
 }

 .request-swatches__summary>li:before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     border-radius: 9999px;
     border-width: 1px;
     border-style: dashed;
     border-color: #0f10104d
 }

 .request-swatches__selected {
     position: relative;
     z-index: 0;
     display: block;
     width: 100%;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     overflow: hidden;
     border-radius: 9999px;
     padding-top: 100%
 }

 .request-swatches__selected:after {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     height: max(.0625rem, 1px);
     width: 1rem;
     --tw-translate-x: -50%;
     --tw-translate-y: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity))
 }

 @media (hover: hover) and (pointer: fine) {
     .request-swatches__selected:after {
         opacity: 0;
         transition-property: opacity;
         transition-timing-function: cubic-bezier(.4, 0, .2, 1);
         transition-duration: .5s;
         transition-timing-function: cubic-bezier(.38, 0, .21, 1)
     }

     .request-swatches__selected:hover:after {
         opacity: 1
     }
 }

 .request-swatches__selected img {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%
 }

 .request-swatches__modal .umbraco-forms-navigation .button,
 .request-swatches__modal .umbraco-forms-navigation .\!button {
     width: 100%
 }

 .request-swatches[inert] .request-swatches__pagination {
     visibility: hidden
 }

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

 .pointer-events-none {
     pointer-events: none
 }

 .pointer-events-auto {
     pointer-events: auto
 }

 .visible {
     visibility: visible
 }

 .invisible {
     visibility: hidden
 }

 .collapse {
     visibility: collapse
 }

 .static {
     position: static
 }

 .fixed {
     position: fixed
 }

 .absolute {
     position: absolute
 }

 .relative {
     position: relative
 }

 .sticky {
     position: sticky
 }

 .-inset-20 {
     top: -5rem;
     right: -5rem;
     bottom: -5rem;
     left: -5rem
 }

 .inset-0 {
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 .inset-x-0 {
     left: 0;
     right: 0
 }

 .inset-x-\[-14vw\] {
     left: -14vw;
     right: -14vw
 }

 .-top-10 {
     top: -2.5rem
 }

 .-top-6 {
     top: -1.5rem
 }

 .bottom-0 {
     bottom: 0
 }

 .bottom-1\/2 {
     bottom: 50%
 }

 .bottom-10 {
     bottom: 2.5rem
 }

 .bottom-2 {
     bottom: .5rem
 }

 .bottom-full {
     bottom: 100%
 }

 .left-0 {
     left: 0
 }

 .left-1\/2 {
     left: 50%
 }

 .left-4 {
     left: 1rem
 }

 .left-4\.5 {
     left: 1.125rem
 }

 .left-\[-10\%\] {
     left: -10%
 }

 .left-\[calc\(var\(--width\)\*-1\)\] {
     left: calc(var(--width) * -1)
 }

 .left-full {
     left: 100%
 }

 .right-0 {
     right: 0
 }

 .right-10 {
     right: 2.5rem
 }

 .right-4 {
     right: 1rem
 }

 .right-full {
     right: 100%
 }

 .top-0 {
     top: 0
 }

 .top-1\/2 {
     top: 50%
 }

 .top-20 {
     top: 5rem
 }

 .top-24 {
     top: 6rem
 }

 .top-6 {
     top: 1.5rem
 }

 .top-8 {
     top: 2rem
 }

 .top-\[-0\.75rem\] {
     top: -.75rem
 }

 .top-\[-10\%\] {
     top: -10%
 }

 .top-\[56\%\] {
     top: 56%
 }

 .top-\[calc\(var\(--heading-t\)-\(var\(--heading-h\,1lh\)\/2\)\)\] {
     top: calc(var(--heading-t) - (var(--heading-h, 1lh) / 2))
 }

 .top-\[calc\(var\(--site-header-h\)\+3rem\)\] {
     top: calc(var(--site-header-h) + 3rem)
 }

 .top-\[calc\(var\(--site-header-h\)-0\.75rem\)\] {
     top: calc(var(--site-header-h) - .75rem)
 }

 .top-full {
     top: 100%
 }

 .-z-1 {
     z-index: -1
 }

 .-z-10 {
     z-index: -10
 }

 .z-0 {
     z-index: 0
 }

 .z-1 {
     z-index: 1
 }

 .z-10 {
     z-index: 10
 }

 .z-20 {
     z-index: 20
 }

 .z-30 {
     z-index: 30
 }

 .z-40 {
     z-index: 40
 }

 .z-50 {
     z-index: 50
 }

 .z-60 {
     z-index: 60
 }

 .z-70 {
     z-index: 70
 }

 .z-\[1000\] {
     z-index: 1000
 }

 .z-\[100\] {
     z-index: 100
 }

 .z-\[99999\] {
     z-index: 99999
 }

 .z-\[999\] {
     z-index: 999
 }

 .z-behind {
     z-index: -1
 }

 .order-last {
     order: 9999
 }

 .col-span-1 {
     grid-column: span 1 / span 1
 }

 .col-span-12 {
     grid-column: span 12 / span 12
 }

 .col-span-2 {
     grid-column: span 2 / span 2
 }

 .col-span-4 {
     grid-column: span 4 / span 4
 }

 .col-span-5 {
     grid-column: span 5 / span 5
 }

 .col-span-6 {
     grid-column: span 6 / span 6
 }

 .col-span-7 {
     grid-column: span 7 / span 7
 }

 .col-start-1 {
     grid-column-start: 1
 }

 .col-start-3 {
     grid-column-start: 3
 }

 .col-end-11 {
     grid-column-end: 11
 }

 .col-end-13 {
     grid-column-end: 13
 }

 .col-end-2 {
     grid-column-end: 2
 }

 .-m-1 {
     margin: -.25rem
 }

 .-m-1\.25 {
     margin: -.3125rem
 }

 .m-0 {
     margin: 0
 }

 .-mx-4 {
     margin-left: -1rem;
     margin-right: -1rem
 }

 .-mx-4\.5 {
     margin-left: -1.125rem;
     margin-right: -1.125rem
 }

 .-mx-8 {
     margin-left: -2rem;
     margin-right: -2rem
 }

 .mx-4 {
     margin-left: 1rem;
     margin-right: 1rem
 }

 .mx-4\.5 {
     margin-left: 1.125rem;
     margin-right: 1.125rem
 }

 .mx-auto {
     margin-left: auto;
     margin-right: auto
 }

 .my-\[-0\.5em\] {
     margin-top: -.5em;
     margin-bottom: -.5em
 }

 .-mb-10 {
     margin-bottom: -2.5rem
 }

 .-ml-12 {
     margin-left: -3rem
 }

 .-ml-5 {
     margin-left: -1.25rem
 }

 .mb-1 {
     margin-bottom: .25rem
 }

 .mb-10 {
     margin-bottom: 2.5rem
 }

 .mb-12 {
     margin-bottom: 3rem
 }

 .mb-3 {
     margin-bottom: .75rem
 }

 .mb-4 {
     margin-bottom: 1rem
 }

 .mb-5 {
     margin-bottom: 1.25rem
 }

 .mb-6 {
     margin-bottom: 1.5rem
 }

 .mb-7 {
     margin-bottom: 1.75rem
 }

 .mb-8 {
     margin-bottom: 2rem
 }

 .mb-\[min\(20vh\,10rem\)\] {
     margin-bottom: min(20vh, 10rem)
 }

 .ml-0 {
     margin-left: 0
 }

 .ml-2 {
     margin-left: .5rem
 }

 .ml-4 {
     margin-left: 1rem
 }

 .ml-4\.5 {
     margin-left: 1.125rem
 }

 .ml-auto {
     margin-left: auto
 }

 .mr-0 {
     margin-right: 0
 }

 .mr-2 {
     margin-right: .5rem
 }

 .mr-5 {
     margin-right: 1.25rem
 }

 .mr-auto {
     margin-right: auto
 }

 .mr-px {
     margin-right: 1px
 }

 .mt-10 {
     margin-top: 2.5rem
 }

 .mt-12 {
     margin-top: 3rem
 }

 .mt-2 {
     margin-top: .5rem
 }

 .mt-20 {
     margin-top: 5rem
 }

 .mt-3 {
     margin-top: .75rem
 }

 .mt-4 {
     margin-top: 1rem
 }

 .mt-4\.5 {
     margin-top: 1.125rem
 }

 .mt-5 {
     margin-top: 1.25rem
 }

 .mt-6 {
     margin-top: 1.5rem
 }

 .mt-7 {
     margin-top: 1.75rem
 }

 .mt-\[0\.5em\] {
     margin-top: .5em
 }

 .mt-auto {
     margin-top: auto
 }

 .block {
     display: block
 }

 .inline {
     display: inline
 }

 .flex {
     display: flex
 }

 .inline-flex {
     display: inline-flex
 }

 .table {
     display: table
 }

 .grid {
     display: grid
 }

 .contents {
     display: contents
 }

 .hidden {
     display: none
 }

 .aspect-\[561\/736\] {
     aspect-ratio: 561/736
 }

 .h-0 {
     height: 0px
 }

 .h-10 {
     height: 2.5rem
 }

 .h-2 {
     height: .5rem
 }

 .h-2\.25 {
     height: .5625rem
 }

 .h-3 {
     height: .75rem
 }

 .h-3\.5 {
     height: .875rem
 }

 .h-4 {
     height: 1rem
 }

 .h-40 {
     height: 10rem
 }

 .h-5 {
     height: 1.25rem
 }

 .h-6 {
     height: 1.5rem
 }

 .h-\[120\%\] {
     height: 120%
 }

 .h-\[130\%\] {
     height: 130%
 }

 .h-\[15\.34vw\] {
     height: 15.34vw
 }

 .h-\[50vh\] {
     height: 50vh
 }

 .h-\[max\(0\.0625rem\,1px\)\] {
     height: max(.0625rem, 1px)
 }

 .h-\[var\(--site-header-h\)\] {
     height: var(--site-header-h)
 }

 .h-auto {
     height: auto
 }

 .h-full {
     height: 100%
 }

 .h-max {
     height: -moz-max-content;
     height: max-content
 }

 .h-px {
     height: 1px
 }

 .h-screen-dynamic {
     height: 100vh;
     height: 100dvh
 }

 .h-screen-small {
     height: 100vh;
     height: 100svh
 }

 .max-h-\[70vh\] {
     max-height: 70vh
 }

 .max-h-full {
     max-height: 100%
 }

 .max-h-none {
     max-height: none
 }

 .min-h-\[40vw\] {
     min-height: 40vw
 }

 .min-h-\[90vh\] {
     min-height: 90vh
 }

 .min-h-full {
     min-height: 100%
 }

 .min-h-screen-small {
     min-height: 100vh;
     min-height: 100svh
 }

 .w-0 {
     width: 0px
 }

 .w-10 {
     width: 2.5rem
 }

 .w-12 {
     width: 3rem
 }

 .w-18 {
     width: 4.5rem
 }

 .w-2 {
     width: .5rem
 }

 .w-3 {
     width: .75rem
 }

 .w-3\.75 {
     width: .9375rem
 }

 .w-4 {
     width: 1rem
 }

 .w-40 {
     width: 10rem
 }

 .w-5 {
     width: 1.25rem
 }

 .w-5\/6 {
     width: 83.333333%
 }

 .w-6 {
     width: 1.5rem
 }

 .w-64 {
     width: 16rem
 }

 .w-\[120\%\] {
     width: 120%
 }

 .w-\[3\.75rem\] {
     width: 3.75rem
 }

 .w-\[60\%\] {
     width: 60%
 }

 .w-\[68vw\] {
     width: 68vw
 }

 .w-\[80vw\] {
     width: 80vw
 }

 .w-\[var\(--width\)\] {
     width: var(--width)
 }

 .w-auto {
     width: auto
 }

 .w-full {
     width: 100%
 }

 .w-max {
     width: -moz-max-content;
     width: max-content
 }

 .w-viewport {
     width: min(100vw - var(--scrollbar-gutter, 0px), 100%)
 }

 .min-w-full {
     min-width: 100%
 }

 .max-w-\[100rem\] {
     max-width: 100rem
 }

 .max-w-\[1600px\] {
     max-width: 1600px
 }

 .max-w-\[24rem\] {
     max-width: 24rem
 }

 .max-w-\[34rem\] {
     max-width: 34rem
 }

 .max-w-full {
     max-width: 100%
 }

 .max-w-none {
     max-width: none
 }

 .max-w-screen-lg {
     max-width: 1024px
 }

 .flex-1 {
     flex: 1 1 0%
 }

 .flex-none {
     flex: none
 }

 .flex-shrink {
     flex-shrink: 1
 }

 .grow {
     flex-grow: 1
 }

 .border-collapse {
     border-collapse: collapse
 }

 .-translate-x-1\/2 {
     --tw-translate-x: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .-translate-y-1\/2 {
     --tw-translate-y: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .-translate-y-\[var\(--site-header-h\)\] {
     --tw-translate-y: calc(var(--site-header-h) * -1);
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .-translate-y-full {
     --tw-translate-y: -100%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .translate-x-0 {
     --tw-translate-x: 0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .translate-x-\[calc\(-100\%-1\.125rem\)\] {
     --tw-translate-x: calc(-100% - 1.125rem);
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .translate-x-\[calc\(100\%\+1\.125rem\)\] {
     --tw-translate-x: calc(100% + 1.125rem);
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .translate-x-\[calc\(var\(--nav-menu-index\,0\)\*-100\%\)\] {
     --tw-translate-x: calc(var(--nav-menu-index, 0) * -100%);
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .translate-x-\[var\(--x\)\] {
     --tw-translate-x: var(--x);
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .translate-y-0 {
     --tw-translate-y: 0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .translate-y-10 {
     --tw-translate-y: 2.5rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .rotate-180 {
     --tw-rotate: 180deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .rotate-90 {
     --tw-rotate: 90deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .scale-100 {
     --tw-scale-x: 1;
     --tw-scale-y: 1;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .scale-90 {
     --tw-scale-x: .9;
     --tw-scale-y: .9;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .scale-\[0\.84\] {
     --tw-scale-x: .84;
     --tw-scale-y: .84;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .scale-\[1\.2\] {
     --tw-scale-x: 1.2;
     --tw-scale-y: 1.2;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .-scale-x-100 {
     --tw-scale-x: -1;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .transform {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .transform-none {
     transform: none
 }

 .cursor-default {
     cursor: default
 }

 .cursor-pointer {
     cursor: pointer
 }

 .touch-manipulation {
     touch-action: manipulation
 }

 .select-none {
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none
 }

 .resize {
     resize: both
 }

 .auto-cols-fr {
     grid-auto-columns: minmax(0, 1fr)
 }

 .grid-flow-col {
     grid-auto-flow: column
 }

 .grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr))
 }

 .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr))
 }

 .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr))
 }

 .grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr))
 }

 .grid-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr))
 }

 .flex-row {
     flex-direction: row
 }

 .flex-col {
     flex-direction: column
 }

 .flex-col-reverse {
     flex-direction: column-reverse
 }

 .flex-wrap {
     flex-wrap: wrap
 }

 .flex-nowrap {
     flex-wrap: nowrap
 }

 .items-start {
     align-items: flex-start
 }

 .items-end {
     align-items: flex-end
 }

 .items-center {
     align-items: center
 }

 .justify-center {
     justify-content: center
 }

 .justify-between {
     justify-content: space-between
 }

 .gap-2 {
     gap: .5rem
 }

 .gap-2\.5 {
     gap: .625rem
 }

 .gap-3 {
     gap: .75rem
 }

 .gap-x-16 {
     -moz-column-gap: 4rem;
     column-gap: 4rem
 }

 .gap-x-2 {
     -moz-column-gap: .5rem;
     column-gap: .5rem
 }

 .gap-x-2\.25 {
     -moz-column-gap: .5625rem;
     column-gap: .5625rem
 }

 .gap-x-2\.5 {
     -moz-column-gap: .625rem;
     column-gap: .625rem
 }

 .gap-x-3 {
     -moz-column-gap: .75rem;
     column-gap: .75rem
 }

 .gap-x-5 {
     -moz-column-gap: 1.25rem;
     column-gap: 1.25rem
 }

 .gap-x-6 {
     -moz-column-gap: 1.5rem;
     column-gap: 1.5rem
 }

 .gap-x-9 {
     -moz-column-gap: 2.25rem;
     column-gap: 2.25rem
 }

 .gap-y-12 {
     row-gap: 3rem
 }

 .gap-y-16 {
     row-gap: 4rem
 }

 .gap-y-2 {
     row-gap: .5rem
 }

 .gap-y-2\.25 {
     row-gap: .5625rem
 }

 .gap-y-3 {
     row-gap: .75rem
 }

 .gap-y-4 {
     row-gap: 1rem
 }

 .gap-y-4\.5 {
     row-gap: 1.125rem
 }

 .gap-y-5 {
     row-gap: 1.25rem
 }

 .gap-y-6 {
     row-gap: 1.5rem
 }

 .gap-y-8 {
     row-gap: 2rem
 }

 .space-y-4>:not([hidden])~:not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(1rem * var(--tw-space-y-reverse))
 }

 .self-end {
     align-self: flex-end
 }

 .self-center {
     align-self: center
 }

 .justify-self-end {
     justify-self: end
 }

 .justify-self-center {
     justify-self: center
 }

 .overflow-auto {
     overflow: auto
 }

 .overflow-hidden {
     overflow: hidden
 }

 .overflow-visible {
     overflow: visible
 }

 .overflow-x-auto {
     overflow-x: auto
 }

 .overflow-y-auto {
     overflow-y: auto
 }

 .overflow-x-hidden {
     overflow-x: hidden
 }

 .overflow-y-scroll {
     overflow-y: scroll
 }

 .overscroll-none {
     overscroll-behavior: none
 }

 .scroll-auto {
     scroll-behavior: auto
 }

 .text-ellipsis {
     text-overflow: ellipsis
 }

 .whitespace-nowrap {
     white-space: nowrap
 }

 .rounded-full {
     border-radius: 9999px
 }

 .rounded-none {
     border-radius: 0
 }

 .border {
     border-width: 1px
 }

 .border-\[calc\(1\.125rem-0\.5px\)\] {
     border-width: calc(1.125rem - .5px)
 }

 .border-r {
     border-right-width: 1px
 }

 .border-t {
     border-top-width: 1px
 }

 .border-t-\[2\.5rem\] {
     border-top-width: 2.5rem
 }

 .border-dashed {
     border-style: dashed
 }

 .border-black {
     --tw-border-opacity: 1;
     border-color: rgb(15 16 16 / var(--tw-border-opacity))
 }

 .border-black\/30 {
     border-color: #0f10104d
 }

 .border-transparent {
     border-color: transparent
 }

 .border-r-black\/30 {
     border-right-color: #0f10104d
 }

 .border-t-black\/30 {
     border-top-color: #0f10104d
 }

 .bg-\[var\(--theme-accent\)\] {
     background-color: var(--theme-accent)
 }

 .bg-\[var\(--theme-color\)\] {
     background-color: var(--theme-color)
 }

 .bg-black {
     --tw-bg-opacity: 1;
     background-color: rgb(15 16 16 / var(--tw-bg-opacity))
 }

 .bg-black\/0 {
     background-color: #0f101000
 }

 .bg-black\/20 {
     background-color: #0f101033
 }

 .bg-black\/30 {
     background-color: #0f10104d
 }

 .bg-black\/75 {
     background-color: #0f1010bf
 }

 .bg-columbia {
     --tw-bg-opacity: 1;
     background-color: rgb(182 198 221 / var(--tw-bg-opacity))
 }

 .bg-gold {
     --tw-bg-opacity: 1;
     background-color: rgb(209 157 90 / var(--tw-bg-opacity))
 }

 .bg-grey-light {
     --tw-bg-opacity: 1;
     background-color: rgb(232 232 232 / var(--tw-bg-opacity))
 }

 .bg-kanda {
     --tw-bg-opacity: 1;
     background-color: rgb(84 64 76 / var(--tw-bg-opacity))
 }

 .bg-lilac {
     --tw-bg-opacity: 1;
     background-color: rgb(188 168 189 / var(--tw-bg-opacity))
 }

 .bg-lime {
     --tw-bg-opacity: 1;
     background-color: rgb(198 216 204 / var(--tw-bg-opacity))
 }

 .bg-orange {
     --tw-bg-opacity: 1;
     background-color: rgb(212 96 76 / var(--tw-bg-opacity))
 }

 .bg-pumpkin {
     --tw-bg-opacity: 1;
     background-color: rgb(248 152 81 / var(--tw-bg-opacity))
 }

 .bg-tan {
     --tw-bg-opacity: 1;
     background-color: rgb(255 227 183 / var(--tw-bg-opacity))
 }

 .bg-teal {
     --tw-bg-opacity: 1;
     background-color: rgb(48 113 102 / var(--tw-bg-opacity))
 }

 .bg-theme {
     background-color: var(--theme-color)
 }

 .bg-transparent {
     background-color: transparent
 }

 .bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity))
 }

 .bg-white-true {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity))
 }

 .bg-gradient-to-b {
     background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
 }

 .bg-none {
     background-image: none
 }

 .from-white {
     --tw-gradient-from: #F7F6F1 var(--tw-gradient-from-position);
     --tw-gradient-to: rgb(247 246 241 / 0) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
 }

 .from-60\% {
     --tw-gradient-from-position: 60%
 }

 .from-75\% {
     --tw-gradient-from-position: 75%
 }

 .bg-contain {
     background-size: contain
 }

 .bg-center {
     background-position: center
 }

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

 .object-contain {
     -o-object-fit: contain;
     object-fit: contain
 }

 .object-cover {
     -o-object-fit: cover;
     object-fit: cover
 }

 .p-1 {
     padding: .25rem
 }

 .p-10 {
     padding: 2.5rem
 }

 .p-2 {
     padding: .5rem
 }

 .p-4 {
     padding: 1rem
 }

 .p-4\.5 {
     padding: 1.125rem
 }

 .p-5 {
     padding: 1.25rem
 }

 .p-6 {
     padding: 1.5rem
 }

 .px-10 {
     padding-left: 2.5rem;
     padding-right: 2.5rem
 }

 .px-12 {
     padding-left: 3rem;
     padding-right: 3rem
 }

 .px-3 {
     padding-left: .75rem;
     padding-right: .75rem
 }

 .px-3\.5 {
     padding-left: .875rem;
     padding-right: .875rem
 }

 .px-3\.75 {
     padding-left: .9375rem;
     padding-right: .9375rem
 }

 .px-36 {
     padding-left: 9rem;
     padding-right: 9rem
 }

 .px-4 {
     padding-left: 1rem;
     padding-right: 1rem
 }

 .px-4\.5 {
     padding-left: 1.125rem;
     padding-right: 1.125rem
 }

 .px-5 {
     padding-left: 1.25rem;
     padding-right: 1.25rem
 }

 .px-8 {
     padding-left: 2rem;
     padding-right: 2rem
 }

 .py-0 {
     padding-top: 0;
     padding-bottom: 0
 }

 .py-0\.5 {
     padding-top: .125rem;
     padding-bottom: .125rem
 }

 .py-1 {
     padding-top: .25rem;
     padding-bottom: .25rem
 }

 .py-1\.5 {
     padding-top: .375rem;
     padding-bottom: .375rem
 }

 .py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem
 }

 .py-16 {
     padding-top: 4rem;
     padding-bottom: 4rem
 }

 .py-20 {
     padding-top: 5rem;
     padding-bottom: 5rem
 }

 .py-24 {
     padding-top: 6rem;
     padding-bottom: 6rem
 }

 .py-28 {
     padding-top: 7rem;
     padding-bottom: 7rem
 }

 .py-3 {
     padding-top: .75rem;
     padding-bottom: .75rem
 }

 .py-3\.5 {
     padding-top: .875rem;
     padding-bottom: .875rem
 }

 .py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem
 }

 .py-4\.5 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem
 }

 .py-5 {
     padding-top: 1.25rem;
     padding-bottom: 1.25rem
 }

 .py-6 {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem
 }

 .py-8 {
     padding-top: 2rem;
     padding-bottom: 2rem
 }

 .pb-10 {
     padding-bottom: 2.5rem
 }

 .pb-12 {
     padding-bottom: 3rem
 }

 .pb-16 {
     padding-bottom: 4rem
 }

 .pb-18 {
     padding-bottom: 4.5rem
 }

 .pb-20 {
     padding-bottom: 5rem
 }

 .pb-24 {
     padding-bottom: 6rem
 }

 .pb-3 {
     padding-bottom: .75rem
 }

 .pb-4 {
     padding-bottom: 1rem
 }

 .pb-4\.5 {
     padding-bottom: 1.125rem
 }

 .pb-5 {
     padding-bottom: 1.25rem
 }

 .pb-6 {
     padding-bottom: 1.5rem
 }

 .pb-8 {
     padding-bottom: 2rem
 }

 .pb-\[0\.25em\] {
     padding-bottom: .25em
 }

 .pl-2 {
     padding-left: .5rem
 }

 .pl-2\.5 {
     padding-left: .625rem
 }

 .pl-\[2\.5em\] {
     padding-left: 2.5em
 }

 .pr-2 {
     padding-right: .5rem
 }

 .pr-5 {
     padding-right: 1.25rem
 }

 .pr-\[1\.5em\] {
     padding-right: 1.5em
 }

 .pt-0 {
     padding-top: 0
 }

 .pt-10 {
     padding-top: 2.5rem
 }

 .pt-12 {
     padding-top: 3rem
 }

 .pt-16 {
     padding-top: 4rem
 }

 .pt-18 {
     padding-top: 4.5rem
 }

 .pt-2 {
     padding-top: .5rem
 }

 .pt-20 {
     padding-top: 5rem
 }

 .pt-24 {
     padding-top: 6rem
 }

 .pt-32 {
     padding-top: 8rem
 }

 .pt-4 {
     padding-top: 1rem
 }

 .pt-48 {
     padding-top: 12rem
 }

 .pt-5 {
     padding-top: 1.25rem
 }

 .pt-52 {
     padding-top: 13rem
 }

 .pt-6 {
     padding-top: 1.5rem
 }

 .pt-8 {
     padding-top: 2rem
 }

 .pt-\[0\.45rem\] {
     padding-top: .45rem
 }

 .pt-\[0\.5625rem\] {
     padding-top: .5625rem
 }

 .pt-\[100\%\] {
     padding-top: 100%
 }

 .pt-\[26\.667\%\] {
     padding-top: 26.667%
 }

 .pt-\[34\.375\%\] {
     padding-top: 34.375%
 }

 .pt-\[44\%\] {
     padding-top: 44%
 }

 .pt-\[var\(--site-header-h\)\] {
     padding-top: var(--site-header-h)
 }

 .text-left {
     text-align: left
 }

 .text-center {
     text-align: center
 }

 .text-right {
     text-align: right
 }

 .font-serif {
     /* font-family: Recife Display, sans-serif */
 }

 .uppercase {
     text-transform: uppercase
 }

 .italic {
     font-style: italic
 }

 .text-\[var\(--theme-color\)\] {
     color: var(--theme-color)
 }

 .text-\[var\(--theme-secondary-color\)\] {
     color: var(--theme-secondary-color)
 }

 .text-\[var\(--theme-text\)\] {
     color: var(--theme-text)
 }

 .text-black {
     --tw-text-opacity: 1;
     color: rgb(15 16 16 / var(--tw-text-opacity))
 }

 .text-black\/40 {
     color: #0f101066
 }

 .text-grey {
     --tw-text-opacity: 1;
     color: rgb(113 113 113 / var(--tw-text-opacity))
 }

 .text-lilac {
     --tw-text-opacity: 1;
     color: rgb(188 168 189 / var(--tw-text-opacity))
 }

 .text-white {
     --tw-text-opacity: 1;
     color: rgb(247 246 241 / var(--tw-text-opacity))
 }

 .underline {
     text-decoration-line: underline
 }

 .opacity-0 {
     opacity: 0
 }

 .opacity-100 {
     opacity: 1
 }

 .opacity-30 {
     opacity: .3
 }

 .opacity-40 {
     opacity: .4
 }

 .opacity-50 {
     opacity: .5
 }

 .opacity-\[0\.75\] {
     opacity: .75
 }

 .shadow-\[inset_0_0_0_1px\] {
     --tw-shadow: inset 0 0 0 1px;
     --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }

 .shadow-lg {
     --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
     --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }

 .outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px
 }

 .outline {
     outline-style: solid
 }

 .outline-0 {
     outline-width: 0px
 }

 .outline-black\/10 {
     outline-color: #0f10101a
 }

 .ring-transparent {
     --tw-ring-color: transparent
 }

 .filter {
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
 }

 .transition {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s
 }

 .transition-\[border-color\] {
     transition-property: border-color;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s
 }

 .transition-\[height\] {
     transition-property: height;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s
 }

 .transition-\[top\] {
     transition-property: top;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s
 }

 .transition-\[transform\,opacity\] {
     transition-property: transform, opacity;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s
 }

 .transition-\[transform\,visibility\] {
     transition-property: transform, visibility;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s
 }

 .transition-\[visibility\] {
     transition-property: visibility;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s
 }

 .transition-color {
     transition-property: color;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s
 }

 .transition-colors {
     transition-property: color, border-color, background-color;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s
 }

 .transition-opacity {
     transition-property: opacity;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s
 }

 .transition-transform {
     transition-property: transform;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .15s
 }

 .duration-200 {
     transition-duration: .2s
 }

 .duration-300 {
     transition-duration: .3s
 }

 .duration-500 {
     transition-duration: .5s
 }

 .duration-\[var\(--duration\)\] {
     transition-duration: var(--duration)
 }

 .ease-in-out {
     transition-timing-function: cubic-bezier(.4, 0, .2, 1)
 }

 .ease-zoom {
     transition-timing-function: cubic-bezier(.38, 0, .21, 1)
 }

 .will-change-\[opacity\] {
     will-change: opacity
 }

 .will-change-transform {
     will-change: transform
 }

 .content-\[\'\'\] {
     --tw-content: "";
     content: var(--tw-content)
 }

 .text-h4 {
     font-size: 1.25rem;
     letter-spacing: -.02em;
     line-height: 1.3
 }

 @media (min-width: 1024px) {
     .text-h4 {
         font-size: 1.75rem;
         letter-spacing: -.021428571429em;
         line-height: 1.2857142857142858
     }
 }

 .text-caps {
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1.1428571428571428
 }

 .text-nav {
     font-size: 1.75rem;
     letter-spacing: -.021428571429em;
     line-height: 1.1428571428571428
 }

 .text-small {
     font-size: .875rem;
     letter-spacing: 0em;
     line-height: 1.4285714285714286
 }

 @media (min-width: 640px) {
     .text-small {
         font-size: 1rem;
         letter-spacing: 0em;
         line-height: 1.375
     }
 }

 .text-button {
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1
 }

 @media (min-width: 1024px) {
     .text-button {
         font-size: 1rem;
         letter-spacing: .025em;
         line-height: 1
     }
 }

 .text-label {
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1
 }

 .text-input {
     font-size: 1rem;
     letter-spacing: .025em;
     line-height: 1
 }

 .anchor {
     display: block;
     height: 0px;
     scroll-margin-top: 6rem
 }

 .scroll-lock {
     overflow: hidden;
     touch-action: none;
     overscroll-behavior: none;
     background: rgba(0, 0, 0, .05) linear-gradient(white, white)
 }

 .scrollbar-none {
     -ms-overflow-style: none;
     scrollbar-width: none
 }

 .scrollbar-none::-webkit-scrollbar {
     display: none
 }

 .\[clip-path\:inset\(-100vh_0_0_0\)\] {
     -webkit-clip-path: inset(-100vh 0 0 0);
     clip-path: inset(-100vh 0 0 0)
 }

 .\[clip-path\:inset\(var\(--pattern-divide-inset\)\)\;\] {
     -webkit-clip-path: inset(var(--pattern-divide-inset));
     clip-path: inset(var(--pattern-divide-inset))
 }

 .\[font-size\:16vw\] {
     font-size: 16vw
 }

 .\[text-wrap\:balance\] {
     text-wrap: balance
 }

 .swiper {
     display: block;
     overflow: hidden;
     margin-left: calc(-1 * var(--swiper-gap, 0))
 }

 .swiper-component {
     display: block;
     overflow: hidden
 }

 .swiper-wrapper {
     position: relative;
     z-index: 0;
     display: flex
 }

 .swiper-android .swiper-slide,
 .swiper-wrapper {
     transform: translateZ(0)
 }

 .swiper-horizontal {
     touch-action: pan-y
 }

 .swiper-slide {
     position: relative;
     flex-shrink: 0;
     padding-left: var(--swiper-gap, 0);
     transition-property: transform;
     -webkit-backface-visibility: hidden;
     -webkit-transform: translate3d(0, 0, 0)
 }

 .swiper-slide-invisible-blank {
     visibility: hidden
 }

 .swiper-slide[hidden] {
     display: none
 }

 .swiper-backface-hidden .swiper-slide {
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transform: translateZ(0)
 }

 .swiper-button-next,
 .swiper-button-prev {
     height: 2.5rem;
     width: 2.5rem;
     background-color: #0f10104d
 }

 .swiper-pagination {
     display: flex;
     flex-wrap: wrap;
     gap: .5rem
 }

 .swiper-pagination-bullet {
     height: 1rem;
     width: 1rem;
     cursor: pointer;
     border-radius: 9999px;
     background-color: #0f10104d
 }

 .swiper-pagination-bullet-active {
     background-color: #0f101080
 }

 .swiper-lazy-preloader {
     display: none
 }

 @font-face {
     /* font-family: Recife Display; */
     src: url(fonts/RecifeDisplayWeb-Book.woff) format("woff"), url(fonts/RecifeDisplayWeb-Book.woff2) format("woff2");
     font-weight: 350;
     font-style: normal;
     font-display: swap
 }

 @font-face {
     /* font-family: Recife Display; */
     src: url(fonts/RecifeDisplayWeb-BookItalic.woff) format("woff"), url(fonts/RecifeDisplayWeb-BookItalic.woff2) format("woff2");
     font-weight: 350;
     font-style: italic;
     font-display: swap
 }

 .article-listing {
     display: block
 }

 .article-listing [data-article-listing-results],
 .article-listing [data-article-listing-pagination] {
     transition-property: opacity;
     transition-duration: .5s;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1)
 }

 .article-listing.content-hidden [data-article-listing-results],
 .article-listing.content-hidden [data-article-listing-pagination] {
     opacity: 0
 }

 .article-listing .active-category {
     background-position-y: min(50% + .5em + var(--underline-height, 1px) / 2 + var(--underline-offset, 0em), 100%);
     background-repeat: no-repeat;
     display: inline;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     background-position-x: 0%;
     background-image: linear-gradient(var(--underline-color, currentColor), var(--underline-color, currentColor));
     transition-property: background-size;
     transition-duration: .4s;
     background-size: 100% var(--underline-height, 1px);
     --tw-text-opacity: 1;
     color: rgb(15 16 16 / var(--tw-text-opacity))
 }

 .desktop-navigation {
     display: none
 }

 @media (min-width: 1024px) {
     .desktop-navigation {
         display: flex
     }
 }

 .desktop-navigation {
     font-size: 1.75rem;
     letter-spacing: -.021428571429em;
     line-height: 1.1428571428571428
 }

 .desktop-navigation__menu {
     display: flex;
     gap: 2rem
 }

 .desktop-navigation__item {
     display: block
 }

 .desktop-navigation__link {
     text-decoration-line: underline
 }

 .hero {
     --heading-t: 50vh;
     -webkit-clip-path: inset(0 0 0 0);
     clip-path: inset(0 0 0 0);
     position: relative;
     display: block
 }

 @supports (height: 50svh) {
     .hero {
         --heading-t: 50svh
     }
 }

 .hero__content {
     -webkit-clip-path: inset(0 0 7rem 0);
     clip-path: inset(0 0 7rem 0);
     margin-left: auto;
     margin-right: auto;
     width: 100%;
     padding-left: 1.125rem;
     padding-right: 1.125rem
 }

 @media (min-width: 1024px) {
     .hero__content {
         padding-left: 2rem;
         padding-right: 2rem
     }
 }

 .hero__content {
     position: relative;
     z-index: 10;
     min-height: 100vh;
     min-height: 100svh;
     padding-top: 7rem;
     padding-bottom: 7rem;
     text-align: center;
     --tw-text-opacity: 1;
     color: rgb(247 246 241 / var(--tw-text-opacity))
 }

 .hero__heading {

     font-size: 4.375rem;
     letter-spacing: -.046511627907em;
     line-height: 1
 }

 @media (min-width: 1024px) {
     .hero__heading {
         font-size: 7rem;
         letter-spacing: -.046948356808em;
         line-height: .6572769953051644
     }
 }

 .hero__heading {
     position: sticky;
     top: calc(var(--heading-t) - (var(--heading-h, 1lh) / 2));
     display: block;
     padding-bottom: .25em;
     line-height: 1
 }

 .hero__heading--small {

     font-size: 3.25rem;
     letter-spacing: -.046153846154em;
     line-height: 1.0769230769230769
 }

 @media (min-width: 1024px) {
     .hero__heading--small {
         font-size: 7.5rem;
         letter-spacing: -.05em;
         line-height: 1
     }
 }

 @media (min-width: 768px) {
     .hero__heading {
         line-height: 1;
         font-size: min(7rem);
     }
 }

 @media (min-width: 1024px) {
     .hero__heading {
         line-height: 1
     }
 }

 .hero__heading:after {
     position: absolute;
     top: 100%;
     left: 50%;
     display: block;
     height: 50vh;
     width: 0px;
     border-right-width: 1px;
     border-color: #f7f6f14d;
     --tw-content: "";
     content: var(--tw-content)
 }

 .hero__cta {
     position: absolute;
     left: 0;
     bottom: 2.5rem;
     display: flex;
     width: 100%;
     justify-content: center
 }



 .hero__background {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: -1;
     height: 100vh;
     height: 100svh
 }

 .hero__background:after {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1;
     --tw-bg-opacity: 1;
     background-color: rgb(15 16 16 / var(--tw-bg-opacity));
     content: var(--tw-content);
     opacity: var(--hero-overlay-opacity, .2)
 }

 .hero__media {
     height: 100%;
     width: min(100vw - var(--scrollbar-gutter, 0px), 100%);
     -o-object-fit: cover;
     object-fit: cover
 }

 @media (min-width: 1024px) {
     .pullout {
         display: none
     }
 }

 .pullout {
     pointer-events: auto;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 100%;
     display: flex;
     height: 100vh;
     height: 100svh;
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity));
     padding-top: var(--site-header-h);
     transition-property: transform;
     transition-duration: .5s;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1)
 }

 .pullout__container {
     display: flex;
     width: 100%;
     flex-direction: column;
     align-items: flex-start
 }

 .pullout__nav {
     display: flex;
     width: 100%;
     flex-grow: 1;
     overflow: auto
 }

 .pullout__menu {
     display: flex;
     flex-direction: column;
     gap: .75rem;
     padding-left: .9375rem;
     padding-right: .9375rem
 }

 @media (min-width: 768px) {
     .pullout__menu {
         padding-left: 1.5rem;
         padding-right: 1.5rem
     }
 }

 .pullout__item {
     display: block
 }

 .pullout__link {
     text-decoration-line: underline
 }

 .pullout__featured-container {
     display: flex;
     height: -moz-max-content;
     height: max-content;
     flex-direction: column;
     padding: 1.5rem .9375rem
 }

 @media (min-width: 768px) {
     .pullout__featured-container {
         padding-left: 1.5rem;
         padding-right: 1.5rem
     }
 }

 :root {
     --site-header-h: 6rem
 }

 @media (min-width: 1024px) {
     :root {
         --site-header-h: 7rem
     }
     .pt-lg-20 {
  padding-top:6rem; 
}
     .pb-lg-20 {
  padding-bottom: 6rem; 
}
 }

 .site-header {
     transition: transform .5s, background-color .5s, color .5s;
     /* font-family: futura-pt, sans-serif; */
     text-transform: uppercase;
     font-size: .875rem;
     letter-spacing: .028571428571em;
     line-height: 1
 }

 @media (min-width: 1024px) {
     .site-header {
         font-size: 1rem;
         letter-spacing: .025em;
         line-height: 1
     }
 }

 .site-header {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 100;
     display: flex;
     width: min(100vw - var(--scrollbar-gutter, 0px), 100%);
     transition-timing-function: cubic-bezier(.4, 0, .2, 1)
 }

 .site-header--over-dark {
     --tw-text-opacity: 1;
     color: rgb(247 246 241 / var(--tw-text-opacity))
 }

 .site-header__links {
     display: none
 }

 @media (min-width: 1024px) {
     .site-header__links {
         display: flex
     }
 }

 .site-header__links li {
     margin-left: 3rem
 }

 .site-header__links a {
     display: inline-flex;
     padding-top: .25rem;
     padding-bottom: .25rem
 }
  .site-header__links li a:hover{
    color: white !important;
  }
  .site-header__featured:hover{
   color: white !important;
  }

 .site-header__featured {
     display: inline-flex;
     padding-top: .25rem;
     padding-bottom: .25rem;
     text-align: right;
     text-wrap: balance
 }

 .site-header__logo {
     display: inline-flex;
     padding: .5rem;
    min-width: 135px;
 }
 .site-header_logo .logo{
  filter: invert(1);
 }


 html.folded .site-header {
     --tw-translate-y: calc(var(--site-header-h) * -1);
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 html.scrolled .site-header {
     --tw-bg-opacity: 1;
     background-color: rgb(247 246 241 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(15 16 16 / var(--tw-text-opacity));
     transition-delay: 0s, .5s, .5s;
     box-shadow: 0 0 3px rgb(0, 0, 0.10);
 }
 html.scrolled .site-header__links li a:hover{
color: black !important;
  }
  html.scrolled .site-header__featured:hover{
   color: black !important;
}
  html.scrolled .logo{
    filter: none !important;
  }


 @layer component {
     .sticky-element {
         position: sticky;
         top: calc(var(--site-header-h) + 3rem);
         display: block;
         transition-property: top;
         transition-duration: .5s;
         transition-timing-function: cubic-bezier(.4, 0, .2, 1)
     }

     html.folded .sticky-element {
         top: 3rem
     }
 }

 :root {
     --theme-color: #BCA8BD;
     --theme-secondary-color: #0F1010;
     --theme-text: #0F1010;
     --theme-accent: #54404C;
     --theme-accent-contrast: #F7F6F1
 }

 .dark {
     --theme-text: #F7F6F1;
     --theme-accent: #F7F6F1;
     --theme-accent-contrast: #0F1010
 }

 .theme--columbia,
 .theme--lilac,
 .theme--lime,
 .theme--pumpkin,
 .theme--tan {
     --theme-text: #0F1010
 }

 .theme--blue,
 .theme--gold,
 .theme--purple,
 .theme--orange,
 .theme--teal {
     --theme-text: #F7F6F1;
     --theme-accent: #F7F6F1;
     --theme-accent-contrast: #0F1010;
     --theme-secondary-color: #F7F6F1
 }

 .theme--blue {
     --theme-color: #35577F;
     --theme-text: #F7F6F1
 }

 .theme--columbia {
     --theme-color: #B6C6DD;
     --theme-secondary-color: #35577F
 }

 .theme--gold {
     --theme-color: #D19D5A
 }

 .theme--lilac {
     --theme-color: #BCA8BD;
     --theme-secondary-color: #54404C
 }

 .theme--lime {
     --theme-color: #C6D8CC;
     --theme-secondary-color: #307166
 }

 .theme--orange {
     --theme-color: #D4604C
 }

 .theme--pumpkin {
     --theme-color: #F89851;
     --theme-secondary-color: #D4604C
 }

 .theme--purple {
     --theme-color: #54404C;
     --theme-secondary-color: #BCA8BD
 }

 .theme--tan {
     --theme-color: #FFE3B7;
     --theme-secondary-color: #D19D5A
 }

 .theme--teal {
     --theme-color: #307166;
     --theme-text: #F7F6F1
 }

 .paper-texture:after {
     content: "";
     background-image: url(jpg/paper-tile.jpg);
     background-repeat: repeat;
     background-size: 300px;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     mix-blend-mode: multiply;
     opacity: .5
 }

 @media (min-width: 768px) {
     .paper-texture:after {
         background-size: auto
     }
 }

 .translate-pattern {
     will-change: transform;
     transform: translateY(calc(var(--pattern-parallax) * 1px))
 }

 /*!
 * Pikaday
 * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
 */
 .pika-single {
     z-index: 9999;
     display: block;
     position: relative;
     color: #333;
     background: #fff;
     border: 1px solid #ccc;
     border-bottom-color: #bbb;
     /* font-family: Helvetica Neue, Helvetica, Arial, sans-serif; */
 }

 .pika-single.is-hidden {
     display: none
 }

 .pika-single.is-bound {
     position: absolute;
     box-shadow: 0 5px 15px -5px #00000080
 }

 .pika-single:before,
 .pika-single:after {
     content: " ";
     display: table
 }

 .pika-single:after {
     clear: both
 }

 .pika-lendar {
     float: left;
     width: 240px;
     margin: 8px
 }

 .pika-title {
     position: relative;
     text-align: center
 }

 .pika-title select {
     cursor: pointer;
     position: absolute;
     z-index: 9998;
     margin: 0;
     left: 0;
     top: 5px;
     opacity: 0
 }

 .pika-label {
     display: inline-block;
     position: relative;
     z-index: 9999;
     overflow: hidden;
     margin: 0;
     padding: 5px 3px;
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
     color: #333;
     background-color: #fff
 }

 .pika-prev,
 .pika-next {
     display: block;
     cursor: pointer;
     position: relative;
     outline: none;
     border: 0;
     padding: 0;
     width: 20px;
     height: 30px;
     text-indent: 20px;
     white-space: nowrap;
     overflow: hidden;
     background-color: transparent;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: 75% 75%;
     opacity: .5
 }

 .pika-prev:hover,
 .pika-next:hover {
     opacity: 1
 }

 .pika-prev.is-disabled,
 .pika-next.is-disabled {
     cursor: default;
     opacity: .2
 }

 .pika-prev,
 .is-rtl .pika-next {
     float: left;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)
 }

 .pika-next,
 .is-rtl .pika-prev {
     float: right;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)
 }

 .pika-select {
     display: inline-block
 }

 .pika-table {
     width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
     border: 0
 }

 .pika-table th,
 .pika-table td {
     width: 14.2857142857%;
     padding: 0
 }

 .pika-table th {
     color: #999;
     font-size: 12px;
     line-height: 25px;
     font-weight: 700;
     text-align: center
 }

 .pika-table abbr {
     border-bottom: none;
     cursor: help
 }

 .pika-button {
     cursor: pointer;
     display: block;
     box-sizing: border-box;
     outline: none;
     border: 0;
     margin: 0;
     width: 100%;
     padding: 5px;
     color: #666;
     font-size: 12px;
     line-height: 15px;
     text-align: right;
     background: #f5f5f5;
     height: initial
 }

 .has-event .pika-button {
     color: #fff;
     background: #35577f
 }

 .is-today .pika-button {
     color: #307166;
     font-weight: 700
 }

 .is-selected .pika-button {
     color: #fff;
     font-weight: 700;
     background: #35577f;
     box-shadow: inset 0 1px 3px #178fe5;
     border-radius: 3px
 }

 .is-disabled .pika-button,
 .is-outside-current-month .pika-button {
     color: #999;
     opacity: .3
 }

 .is-disabled .pika-button {
     pointer-events: none;
     cursor: default
 }

 .pika-button:hover {
     color: #fff;
     background: #d4604c;
     box-shadow: none;
     border-radius: 3px
 }

 .pika-button .is-selection-disabled {
     pointer-events: none;
     cursor: default
 }

 .pika-week {
     font-size: 11px;
     color: #999
 }

 .is-inrange .pika-button {
     color: #666;
     background: #d5e9f7
 }

 .is-startrange .pika-button {
     color: #fff;
     background: #c6d8cc;
     box-shadow: none;
     border-radius: 3px
 }

 .is-endrange .pika-button {
     color: #fff;
     background: #35577f;
     box-shadow: none;
     border-radius: 3px
 }

 .group:hover .group-hover\:underline-on {
     background-position-y: min(50% + .5em + var(--underline-height, 1px) / 2 + var(--underline-offset, 0em), 100%);
     background-repeat: no-repeat;
     display: inline;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     background-position-x: 0%;
     background-image: linear-gradient(var(--underline-color, currentColor), var(--underline-color, currentColor));
     transition-property: background-size;
     transition-duration: .4s;
     background-size: 100% var(--underline-height, 1px)
 }

 @media (min-width: 1024px) {
     .lg\:typo-h3 {

         font-size: 1.5rem;
         letter-spacing: -.016666666667em;
         line-height: 1.25
     }

     @media (min-width: 1024px) {
         .lg\:typo-h3 {
             font-size: 2.625rem;
             letter-spacing: -.02380952381em;
             line-height: 1.1904761904761905
         }
     }
 }

 .after\:aspect-h-1:after {
     content: var(--tw-content);
     --tw-aspect-h: 1
 }

 .after\:aspect-w-1:after {
     content: var(--tw-content);
     position: relative;
     padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
     --tw-aspect-w: 1
 }

 .after\:aspect-w-1>*:after {
     content: var(--tw-content);
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 .before\:absolute:before {
     content: var(--tw-content);
     position: absolute
 }

 .before\:inset-x-4:before {
     content: var(--tw-content);
     left: 1rem;
     right: 1rem
 }

 .before\:inset-x-4\.5:before {
     content: var(--tw-content);
     left: 1.125rem;
     right: 1.125rem
 }

 .before\:block:before {
     content: var(--tw-content);
     display: block
 }

 .before\:h-0:before {
     content: var(--tw-content);
     height: 0px
 }

 .before\:h-10:before {
     content: var(--tw-content);
     height: 2.5rem
 }

 .before\:w-0:before {
     content: var(--tw-content);
     width: 0px
 }

 .before\:border-r:before {
     content: var(--tw-content);
     border-right-width: 1px
 }

 .before\:border-t:before {
     content: var(--tw-content);
     border-top-width: 1px
 }

 .before\:border-\[var\(--theme-text\)\]:before {
     content: var(--tw-content);
     border-color: var(--theme-text)
 }

 .before\:border-black\/30:before {
     content: var(--tw-content);
     border-color: #0f10104d
 }

 .before\:opacity-30:before {
     content: var(--tw-content);
     opacity: .3
 }

 .before\:content-\[\'-\'\]:before {
     --tw-content: "-";
     content: var(--tw-content)
 }

 .after\:absolute:after {
     content: var(--tw-content);
     position: absolute
 }

 .after\:relative:after {
     content: var(--tw-content);
     position: relative
 }

 .after\:inset-0:after {
     content: var(--tw-content);
     top: 0;
     right: 0;
     bottom: 0;
     left: 0
 }

 .after\:left-full:after {
     content: var(--tw-content);
     left: 100%
 }

 .after\:right-full:after {
     content: var(--tw-content);
     right: 100%
 }

 .after\:top-1\/2:after {
     content: var(--tw-content);
     top: 50%
 }

 .after\:z-1:after {
     content: var(--tw-content);
     z-index: 1
 }

 .after\:mx-3:after {
     content: var(--tw-content);
     margin-left: .75rem;
     margin-right: .75rem
 }

 .after\:block:after {
     content: var(--tw-content);
     display: block
 }

 .after\:h-0:after {
     content: var(--tw-content);
     height: 0px
 }

 .after\:h-10:after {
     content: var(--tw-content);
     height: 2.5rem
 }

 .after\:w-0:after {
     content: var(--tw-content);
     width: 0px
 }

 .after\:w-10:after {
     content: var(--tw-content);
     width: 2.5rem
 }

 .after\:w-full:after {
     content: var(--tw-content);
     width: 100%
 }

 .after\:border-r:after {
     content: var(--tw-content);
     border-right-width: 1px
 }

 .after\:border-t:after {
     content: var(--tw-content);
     border-top-width: 1px
 }

 .after\:border-black\/30:after {
     content: var(--tw-content);
     border-color: #0f10104d
 }

 .after\:bg-black:after {
     content: var(--tw-content);
     --tw-bg-opacity: 1;
     background-color: rgb(15 16 16 / var(--tw-bg-opacity))
 }

 .after\:pt-\[82\.489\%\]:after {
     content: var(--tw-content);
     padding-top: 82.489%
 }

 .after\:opacity-\[var\(--hero-overlay-opacity\,0\.2\)\]:after {
     content: var(--tw-content);
     opacity: var(--hero-overlay-opacity, .2)
 }

 .after\:opacity-\[var\(--promo-overlay-opacity\,0\.2\)\]:after {
     content: var(--tw-content);
     opacity: var(--promo-overlay-opacity, .2)
 }

 .after\:content-\[\'-\'\]:after {
     --tw-content: "-";
     content: var(--tw-content)
 }

 .first\:order-1:first-child {
     order: 1
 }

 .first\:mt-0:first-child {
     margin-top: 0
 }

 .first\:pt-0:first-child {
     padding-top: 0
 }

 .first\:pt-20:first-child {
     padding-top: 5rem
 }

 .first\:pt-24:first-child {
     padding-top: 6rem
 }

 .last\:pb-0:last-child {
     padding-bottom: 0
 }

 .hover\:text-black:hover {
     --tw-text-opacity: 1;
     color: rgb(15 16 16 / var(--tw-text-opacity))
 }

 .hover\:text-black\/30:hover {
     color: #0f10104d
 }

 .hover\:no-underline:hover {
     text-decoration-line: none
 }

 .hover\:opacity-75:hover {
     opacity: .75
 }

 .focus\:border-blue:focus {
     --tw-border-opacity: 1;
     border-color: rgb(53 87 127 / var(--tw-border-opacity))
 }

 .focus\:ring-blue:focus {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(53 87 127 / var(--tw-ring-opacity))
 }

 .disabled\:pointer-events-none:disabled {
     pointer-events: none
 }

 .disabled\:opacity-100:disabled {
     opacity: 1
 }

 .disabled\:opacity-40:disabled {
     opacity: .4
 }

 .group[open] .group-open\:-rotate-90 {
     --tw-rotate: -90deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .group:hover .group-hover\:scale-105 {
     --tw-scale-x: 1.05;
     --tw-scale-y: 1.05;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .group:hover .group-hover\:text-white {
     --tw-text-opacity: 1;
     color: rgb(247 246 241 / var(--tw-text-opacity))
 }

 .group:hover .group-hover\:opacity-75 {
     opacity: .75
 }

 @media (min-width: 640px) {
     .sm\:inset-x-12 {
         left: 3rem;
         right: 3rem
     }

     .sm\:col-span-3 {
         grid-column: span 3 / span 3
     }

     .sm\:col-span-4 {
         grid-column: span 4 / span 4
     }

     .sm\:col-span-6 {
         grid-column: span 6 / span 6
     }

     .sm\:col-span-8 {
         grid-column: span 8 / span 8
     }

     .sm\:col-start-3 {
         grid-column-start: 3
     }

     .sm\:col-start-4 {
         grid-column-start: 4
     }

     .sm\:col-start-9 {
         grid-column-start: 9
     }

     .sm\:col-end-10 {
         grid-column-end: 10
     }

     .sm\:col-end-11 {
         grid-column-end: 11
     }

     .sm\:row-span-2 {
         grid-row: span 2 / span 2
     }

     .sm\:mx-0 {
         margin-left: 0;
         margin-right: 0
     }

     .sm\:mx-20 {
         margin-left: 5rem;
         margin-right: 5rem
     }

     .sm\:block {
         display: block
     }

     .sm\:hidden {
         display: none
     }

     .sm\:h-auto {
         height: auto
     }

     .sm\:h-full {
         height: 100%
     }

     .sm\:w-\[60vw\] {
         width: 60vw
     }

     .sm\:max-w-\[50\%\] {
         max-width: 50%
     }

     .sm\:p-0 {
         padding: 0
     }

     .first\:sm\:col-end-6:first-child {
         grid-column-end: 6
     }

     .last\:sm\:col-start-6:last-child {
         grid-column-start: 6
     }
 }

 @media (min-width: 768px) {
     .md\:sticky {
         position: sticky
     }

     .md\:inset-x-24 {
         left: 6rem;
         right: 6rem
     }

     .md\:inset-x-\[-7vw\] {
         left: -7vw;
         right: -7vw
     }

     .md\:-top-12 {
         top: -3rem
     }

     .md\:bottom-4 {
         bottom: 1rem
     }

     .md\:bottom-4\.5 {
         bottom: 1.125rem
     }

     .md\:left-48 {
         left: 12rem
     }

     .md\:right-64 {
         right: 16rem
     }

     .md\:top-0 {
         top: 0
     }

     .md\:top-28 {
         top: 7rem
     }

     .md\:top-\[20\%\] {
         top: 20%
     }

     .md\:order-2 {
         order: 2
     }

     .md\:order-last {
         order: 9999
     }

     .md\:col-span-10 {
         grid-column: span 10 / span 10
     }

     .md\:col-span-2 {
         grid-column: span 2 / span 2
     }

     .md\:col-span-4 {
         grid-column: span 4 / span 4
     }

     .md\:col-span-5 {
         grid-column: span 5 / span 5
     }

     .md\:col-span-6 {
         grid-column: span 6 / span 6
     }

     .md\:col-span-7 {
         grid-column: span 7 / span 7
     }

     .md\:col-start-1 {
         grid-column-start: 1
     }

     .md\:col-start-11 {
         grid-column-start: 11
     }

     .md\:col-start-2 {
         grid-column-start: 2
     }

     .md\:col-start-3 {
         grid-column-start: 3
     }

     .md\:col-start-4 {
         grid-column-start: 4
     }

     .md\:col-start-5 {
         grid-column-start: 5
     }

     .md\:col-start-7 {
         grid-column-start: 7
     }

     .md\:col-start-8 {
         grid-column-start: 8
     }

     .md\:col-end-10 {
         grid-column-end: 10
     }

     .md\:col-end-11 {
         grid-column-end: 11
     }

     .md\:col-end-12 {
         grid-column-end: 12
     }

     .md\:col-end-6 {
         grid-column-end: 6
     }

     .md\:col-end-7 {
         grid-column-end: 7
     }

     .md\:col-end-9 {
         grid-column-end: 9
     }

     .md\:row-start-1 {
         grid-row-start: 1
     }

     .md\:mx-0 {
         margin-left: 0;
         margin-right: 0
     }

     .md\:ml-0 {
         margin-left: 0
     }

     .md\:block {
         display: block
     }

     .md\:hidden {
         display: none
     }

     .md\:h-14 {
         height: 3.5rem
     }

     .md\:w-1\/2 {
         width: 50%
     }

     .md\:w-14 {
         width: 3.5rem
     }

     .md\:w-2\/3 {
         width: 66.666667%
     }

     .md\:w-3\/4 {
         width: 75%
     }

     .md\:max-w-\[21\.5rem\] {
         max-width: 21.5rem
     }

     .md\:flex-row {
         flex-direction: row
     }

     .md\:flex-row-reverse {
         flex-direction: row-reverse
     }

     .md\:border-t {
         border-top-width: 1px
     }

     .md\:border-t-0 {
         border-top-width: 0px
     }

     .md\:px-0 {
         padding-left: 0;
         padding-right: 0
     }

     .md\:px-5 {
         padding-left: 1.25rem;
         padding-right: 1.25rem
     }

     .md\:pb-0 {
         padding-bottom: 0
     }

     .md\:pt-0 {
         padding-top: 0
     }

     .md\:pt-12 {
         padding-top: 3rem
     }

     .md\:pt-16 {
         padding-top: 4rem
     }

     .md\:text-right {
         text-align: right
     }

     .before\:md\:hidden:before {
         content: var(--tw-content);
         display: none
     }

     .hover\:md\:bg-purple:hover {
         --tw-bg-opacity: 1;
         background-color: rgb(84 64 76 / var(--tw-bg-opacity))
     }

     .hover\:md\:text-white:hover {
         --tw-text-opacity: 1;
         color: rgb(247 246 241 / var(--tw-text-opacity))
     }
 }

 @media (min-width: 1024px) {
     .lg\:bottom-8 {
         bottom: 2rem
     }

     .lg\:top-\[17\%\] {
         top: 17%
     }

     .lg\:col-span-1 {
         grid-column: span 1 / span 1
     }

     .lg\:col-span-4 {
         grid-column: span 4 / span 4
     }

     .lg\:col-span-8 {
         grid-column: span 8 / span 8
     }

     .lg\:col-start-4 {
         grid-column-start: 4
     }

     .lg\:col-start-5 {
         grid-column-start: 5
     }

     .lg\:col-start-6 {
         grid-column-start: 6
     }

     .lg\:col-start-9 {
         grid-column-start: 9
     }

     .lg\:col-end-10 {
         grid-column-end: 10
     }

     .lg\:col-end-12 {
         grid-column-end: 12
     }

     .lg\:col-end-6 {
         grid-column-end: 6
     }

     .lg\:col-end-9 {
         grid-column-end: 9
     }

     .lg\:mx-24 {
         margin-left: 6rem;
         margin-right: 6rem
     }

     .lg\:-mt-20 {
         margin-top: -5rem
     }

     .lg\:mb-10 {
         margin-bottom: 2.5rem
     }

     .lg\:mb-12 {
         margin-bottom: 3rem
     }

     .lg\:mb-5 {
         margin-bottom: 1.25rem
     }

     .lg\:mb-8 {
         margin-bottom: 2rem
     }

     .lg\:ml-8 {
         margin-left: 2rem
     }

     .lg\:mt-0 {
         margin-top: 0
     }

     .lg\:mt-10 {
         margin-top: 2.5rem
     }

     .lg\:mt-14 {
         margin-top: 3.5rem
     }

     .lg\:mt-28 {
         margin-top: 7rem
     }

     .lg\:mt-32 {
         margin-top: 8rem
     }

     .lg\:mt-6 {
         margin-top: 1.5rem
     }

     .lg\:mt-8 {
         margin-top: 2rem
     }

     .lg\:flex {
         display: flex
     }

     .lg\:hidden {
         display: none
     }

     .lg\:h-5 {
         height: 1.25rem
     }

     .lg\:h-72 {
         height: 18rem
     }

     .lg\:w-2\/3 {
         width: 66.666667%
     }

     .lg\:w-5 {
         width: 1.25rem
     }

     .lg\:w-64 {
         width: 16rem
     }

     .lg\:w-\[37\.5\%\] {
         width: 37.5%
     }

     .lg\:w-\[40vw\] {
         width: 40vw
     }

     .lg\:w-\[62\.5\%\] {
         width: 62.5%
     }

     .lg\:max-w-\[25\.5rem\] {
         max-width: 25.5rem
     }

     .lg\:translate-x-\[calc\(-100\%-2rem\)\] {
         --tw-translate-x: calc(-100% - 2rem);
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }

     .lg\:translate-x-\[calc\(100\%\+2rem\)\] {
         --tw-translate-x: calc(100% + 2rem);
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }

     .lg\:grid-cols-3 {
         grid-template-columns: repeat(3, minmax(0, 1fr))
     }

     .lg\:flex-row {
         flex-direction: row
     }

     .lg\:items-end {
         align-items: flex-end
     }

     .lg\:gap-1 {
         gap: .25rem
     }

     .lg\:gap-1\.5 {
         gap: .375rem
     }

     .lg\:gap-x-16 {
         -moz-column-gap: 4rem;
         column-gap: 4rem
     }

     .lg\:gap-x-6 {
         -moz-column-gap: 1.5rem;
         column-gap: 1.5rem
     }

     .lg\:gap-x-8 {
         -moz-column-gap: 2rem;
         column-gap: 2rem
     }

     .lg\:gap-y-16 {
         row-gap: 4rem
     }

     .lg\:gap-y-24 {
         row-gap: 6rem
     }

     .lg\:gap-y-28 {
         row-gap: 7rem
     }

     .lg\:gap-y-4 {
         row-gap: 1rem
     }

     .lg\:gap-y-4\.5 {
         row-gap: 1.125rem
     }

     .lg\:gap-y-5 {
         row-gap: 1.25rem
     }

     .lg\:gap-y-6 {
         row-gap: 1.5rem
     }

     .lg\:gap-y-8 {
         row-gap: 2rem
     }

     .lg\:p-8 {
         padding: 2rem
     }

     .lg\:px-0 {
         padding-left: 0;
         padding-right: 0
     }

     .lg\:px-12 {
         padding-left: 3rem;
         padding-right: 3rem
     }

     .lg\:py-12 {
         padding-top: 3rem;
         padding-bottom: 3rem
     }

     .lg\:py-16 {
         padding-top: 4rem;
         padding-bottom: 4rem
     }

     .lg\:py-48 {
         padding-top: 12rem;
         padding-bottom: 12rem
     }

     .lg\:py-8 {
         padding-top: 2rem;
         padding-bottom: 2rem
     }

     .lg\:pb-0 {
         padding-bottom: 0
     }

     .lg\:pb-16 {
         padding-bottom: 4rem
     }

     .lg\:pb-2 {
         padding-bottom: .5rem
     }

     .lg\:pb-20 {
         padding-bottom: 5rem
     }

     .lg\:pb-24 {
         padding-bottom: 6rem
     }

     .lg\:pb-40 {
         padding-bottom: 10rem
     }

     .lg\:pb-6 {
         padding-bottom: 1.5rem
     }

     .lg\:pb-8 {
         padding-bottom: 2rem
     }

     .lg\:pt-0 {
         padding-top: 0
     }

     .lg\:pt-10 {
         padding-top: 2.5rem
     }

     .lg\:pt-12 {
         padding-top: 3rem
     }

     .lg\:pt-20 {
         padding-top: 5rem
     }

     .lg\:pt-24 {
         padding-top: 6rem
     }

     .lg\:pt-28 {
         padding-top: 7rem
     }

     .lg\:pt-36 {
         padding-top: 9rem
     }

     .lg\:pt-40 {
         padding-top: 10rem
     }

     .lg\:pt-48 {
         padding-top: 12rem
     }

     .lg\:pt-56 {
         padding-top: 14rem
     }

     .lg\:pt-64 {
         padding-top: 16rem
     }

     .lg\:pt-8 {
         padding-top: 2rem
     }

     .lg\:pt-\[19\.5\%\] {
         padding-top: 19.5%
     }

     .before\:lg\:inset-x-8:before {
         content: var(--tw-content);
         left: 2rem;
         right: 2rem
     }

     .before\:lg\:h-20:before {
         content: var(--tw-content);
         height: 5rem
     }

     .after\:lg\:mx-5:after {
         content: var(--tw-content);
         margin-left: 1.25rem;
         margin-right: 1.25rem
     }

     .first\:lg\:pt-0:first-child {
         padding-top: 0
     }

     .lg\:first\:pt-48:first-child {
         padding-top: 12rem
     }
 }

 @media (min-width: 1280px) {
     .xl\:col-start-4 {
         grid-column-start: 4
     }

     .xl\:col-end-10 {
         grid-column-end: 10
     }

     .xl\:mx-40 {
         margin-left: 10rem;
         margin-right: 10rem
     }

     .xl\:grid-cols-4 {
         grid-template-columns: repeat(4, minmax(0, 1fr))
     }
 }

 .\[\&_\*\]\:w-full * {
     width: 100%
 }

 .\[\&_div\]\:scroll-mt-40 div {
     scroll-margin-top: 10rem
 }

 .\[\&_p\]\:before\:content-\[\'“\'\] p:before {
     --tw-content: "“";
     content: var(--tw-content)
 }

 .\[\&_p\]\:after\:content-\[\'”\'\] p:after {
     --tw-content: "”";
     content: var(--tw-content)
 }

 /* Start Footer */
 .footer {
     display: flex;
     padding: 3rem 1.5rem;
     background: #f7f1e7;
     /* beige-like background */
 }

 .footer h2 {
     margin-bottom: .6rem;
     font-size: 25px;
 }

 .footer p {
     font-size: 15px;
     font-weight: 400;
     margin-bottom: 1rem;
 }

 .footer .custom-btn {
     display: flex;
     align-items: center;
     transition: all 0.2s ease, visibility 0s;
     border: 2px solid #2F2E2E;
     background: #F2EADC;
     padding: 12px;
     box-shadow: 2.12px 2.12px 2px rgba(160, 160, 159, 0.75);
     border-radius: 0;
 }

 .footer .custom-btn:hover {
     color: black;
 }

 .footer .custom-btn svg {
     width: 27px;
     height: 27px;
     margin-left: 10px;
 }

 .footer .small .text {
     color: #9e553a;
     text-decoration: none;
     font-weight: 500;
 }

 .footer .footer-right h3 {
     font-size: 23px;
     margin-bottom: .8rem;
     font-weight: 600;
 }

 .footer form .input {
     border: none;
     border: 1px solid transparent;
     width: 100%;
     background-color: transparent;
     padding: 0;
     border-bottom: 2px solid black;
     padding-bottom: .5rem;
 }

 .footer form .input:focus {
     background-color: white;

 }

 .footer form .subscribe {
     background-color: rgb(124, 157, 109);
     border: none;
     width: 100%;
     margin-top: 1.2rem;
     border-radius: 0;
     padding: 12px;
     font-size: 18px;
 }

 .footer .description h4 {
     color: #bb6545;
     font-size: 16px;
 }

 .footer .description ul li {
     font-size: 15px;
     margin-top: .7rem;
     font-weight: 500;
 }
 .footer .footer-right label{
    font-size: 14px;
 }

 .footer .text-bold{
    font-weight: 500;
 }
 .footer .description ul li a {
     color: black;
     text-decoration: none;
 }

 /* Modal custom styles */
 .contact-modal {
     background: #f5ebdf;
     /* soft beige */
     border-radius: 4px;
     padding: 2rem;
     border: none;
     position: relative;
     box-shadow: none;
 }

 /* Close button */
 .btn-close-custom {
     position: absolute;
     top: 20px;
     right: 20px;
     font-size: 2rem;
     background: none;
     border: none;
     color: #7a3e32;
     /* dark brown/red */
     cursor: pointer;
 }

 /* Inputs */
 .contact-modal .form-control {
     border: 1px solid #ccc;
     border-radius: 0;
     background: #fff;
     font-size: 14px;
     padding: 10px 12px;
     box-shadow: none;
 }

 .contact-modal .form-control:focus {
     border-color: #d9a9a0;
     /* soft pink border */
     outline: none;
     box-shadow: none;
 }

 /* Send button */
 .btn-send {
     background: #d9a9a0;
     color: #fff;
     border: none;
     padding: 10px 25px;
     border-radius: 2px;
     transition: 0.3s;
 }

 .btn-send:hover {
     background: #c28b84;
 }

 /* End Footer */

 /* Start Copyright */
 /* Rainbow heart */
.fa-heart.rainbow {
    color: transparent;
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px;
    -webkit-text-stroke-color: transparent;
    background-clip: text;
}


 /* Instagram gradient */
 .fa-instagram.gradient {
     background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /* End Copyright */
 @media screen and (min-width:1024) {

     /* Start Footer */
     .footer {
         padding: 3rem 2rem;
         ;
     }

     /* End Footer */
 }

 @media screen and (min-width: 1366px) {

    .client-list{
        width: 80%;
        margin:auto;
        justify-content: center;
    }
    .client-list .owl-nav{
        position:absolute;
        width: calc(100% + 150px);
        margin-top: 0;
    }

     /* Start Footer */
     .footer {
         background-image: url(./media/footer-layer.avif);
         background-repeat: no-repeat;
         background-size: 100% 50%;
         padding: 8rem 0 2rem;
         background-color: rgb(234, 226, 207);
     }

     .footer .container {
         max-width: 1000px;
     }

     .footer .description h4 {
         font-size: 18px;
     }

     .footer .footer-right h3 {
         font-size: 38px;
         margin-bottom: 1rem;
     }

     .footer .description-list {
         margin-top: 5.5rem !important;
     }

     /* End Footer */
 }