:root {

  /*--- Colors ---*/

  --bg-panel: #15291F;
  --gold: #C6A05C;
  --gold-soft: #DCC088;
  --cream: #F4EFE2;
  --mint-green:#dbf1dc;
  --sage: #9FB6A0;
  --sage-dim: #6E8676;
  --sage-liquid: rgba( 12, 26, 20, 0.55);
  --grey: #f0f0f0;
  --white-dim: hsla(0, 0%, 96.1%, .95);
  --white-liquid: rgba( 244, 239, 226, 0.05);
  --dark-green: #1B2A20;
  --deep-green: #0F2119;
  --black:#383838;


  /*--- Gradients ---*/

  --hero-gradient:linear-gradient(100deg,
        rgba(10,22,17,0.94) 0%,
        rgba(10,22,17,0.88) 26%,
        rgba(10,22,17,0.62) 46%,
        rgba(10,22,17,0.22) 66%,
        rgba(10,22,17,0.06) 82%,
        rgba(10,22,17,0.18) 100%),
      linear-gradient(0deg, rgba(8,18,14,0.55) 0%, rgba(8,18,14,0) 22%, rgba(8,18,14,0) 78%, rgba(8,18,14,0.6) 100%);
  --green-gradient: radial-gradient(ellipse 900px 600px at 82% 15%, rgba(198, 160, 92, 0.10), transparent 60%),
    linear-gradient(180deg, #0F2119 0%, #0C1B15 100%);
  --btn-gradient: linear-gradient(180deg, var(--gold-soft), var(--gold));


  /*--- Box Shadows ---*/
  
  --shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06);
  --shadow-md: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.25);
 


  /*--- Transitions ---*/

  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration: 300ms;
  --duration-slow: 600ms;


}


:focus {
  background-color: transparent;
  outline: none;
}


input[type='checkbox'].checkbox-trigger {
  width: auto;
  height: auto;
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
}


a,
button,
.link {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all var(--duration) var(--easing);
  -moz-transition: all var(--duration) var(--easing);
  -o-transition: all var(--duration) var(--easing);
  transition: all var(--duration) var(--easing);
  cursor: pointer;

}

button {
  border-width: 0;
  border-color: unset;
  border-image: unset;
  background-color: initial;
}


svg {
  width: var(--space-5);
  height: var(--space-5);
  position: relative;
  display: block;
  -webkit-transition: all var(--duration) var(--easing);
  -moz-transition: all var(--duration) var(--easing);
  -o-transition: all var(--duration) var(--easing);
  transition: all var(--duration) var(--easing);

}

label {
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn {
  width: auto;
  height: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding:var(--btn-padding);
  border-radius: var(--btn-radius);
  color: var(--dark-green);
  font-weight: 600;
  text-transform: uppercase;
  background: var(--btn-gradient);
  -webkit-transition: all var(--duration) var(--easing);
  -moz-transition: all var(--duration) var(--easing);
  -o-transition: all var(--duration) var(--easing);
  transition: all var(--duration) var(--easing);
}

.cta-row .btn {
    min-width: 11rem;
}


.prev,
.next {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  padding: var(--btn-padding);
  top: 0;
  bottom: 0;
  border-radius: var(--btn-radius);
  background-color: transparent;
  box-sizing: border-box;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

.prev svg {
  transform: rotate(-90deg);
}

.next svg {
  transform: rotate(90deg);
}



@media (max-width: 767px) {

  

}