/* hero banner */
:root {
  --z8-green-dark: #00451F;
  --z8-green-mid:  #075F32;
  --z8-green-dot:  #00552A;
  --z8-gold:       #F3B44A;
  --z8-gold-light: #F8BD54;
  --z8-gold-deep:  #EEAA39;
  --z8-line:       rgba(255, 255, 255, 0.12);
  --z8-card-line:  rgba(255, 255, 255, 0.10);
}

.z8-hero-wrap {
  background: linear-gradient(117.04deg,
              var(--z8-green-dark) 0%,
              var(--z8-green-mid) 45%,
              var(--z8-green-dark) 100%);
  position: relative;
  overflow: hidden;
}

.z8-hero {
  position: relative;
  max-width: 1920px;
}
.z8-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;

  background:
    radial-gradient(circle at 895px 125px, transparent 309px, rgba(243,180,74,0.12) 309px 310px, transparent 310px),
    radial-gradient(circle at 895px 125px, transparent 214px, rgba(243,180,74,0.12) 214px 215px, transparent 215px),
    radial-gradient(circle at 1425px 493px, transparent 134px, rgba(243,180,74,0.12) 134px 135px, transparent 135px),
    radial-gradient(circle at 1418px 495px, transparent 94px, rgba(243,180,74,0.12) 94px 95px, transparent 95px),
    radial-gradient(89.82% 175.97% at 20% 20%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 25%),
    radial-gradient(79.93% 156.6% at 72% 68%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 38%);
}
.z8-hero > .e-con-inner,
.z8-hero > .e-con-inner > *,
.z8-hero > * {
  position: relative;
  z-index: 1;
}

.boutique .elementor-heading-title::before{
	content: "";
	display: inline-block;
	width: 43px;
	height: 3px;
	background: #F3B44A;
	border-radius: 20px;
	vertical-align: middle;
	margin-right: 16px;
	margin-bottom: 4px;
}

.z8-hero .elementor-widget-heading .elementor-heading-title span {
  font-family: "Inter", Sans-serif;
}

.z8-eyebrow .elementor-heading-title::before {
  content: "";
  display: inline-block;
  width: 43px;
  height: 3px;
  background: var(--z8-gold);
  border-radius: 20px;
  vertical-align: middle;
  margin-right: 16px;
  margin-bottom: 4px;
}

.z8-title .elementor-heading-title {
  text-shadow: 0px 9px 20px rgba(0, 0, 0, 0.18);
  max-width: 720px;
}

.z8-btn-ghost .elementor-button {
  background: transparent !important;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.z8-btn-ghost .elementor-button-icon {
  color: var(--z8-gold);
  font-size: 26px;
}
.z8-btn-ghost .elementor-button-icon svg {
  fill: var(--z8-gold);
  width: 26px;
  height: 26px;
}

.z8-hero-cards {
  border-left: 1px solid var(--z8-line);
}

.z8-stats .elementor-heading-title {
  white-space: nowrap;
}

.z8-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background-color .35s ease;
}

.z8-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  background: linear-gradient(135.62deg,
              var(--z8-gold-light) 0%,
              var(--z8-gold) 70%,
              var(--z8-gold-deep) 100%);
}
.z8-card:hover::before { opacity: 1; }

.z8-card::after {
  content: "";
  position: absolute;
  right: 31px;
  top: 29px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(243, 180, 74, 0.72);
  z-index: 5;
  transition: background .35s ease;
}
.z8-card:hover::after { background: var(--z8-green-dot); }

.z8-card > .e-con-inner,
.z8-card > .e-con-inner > * {
  position: relative;
  z-index: 1;
}

.z8-card h3.elementor-heading-title,
.z8-card p.elementor-heading-title,
.z8-card .elementor-widget-image img {
  transition: color .35s ease, filter .35s ease;
}
.z8-card:hover h3.elementor-heading-title { color: var(--z8-green-dark) !important; }
.z8-card:hover p.elementor-heading-title  { color: rgba(0, 69, 31, 0.75) !important; }

.z8-card:hover .elementor-widget-image img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(60%) saturate(900%) hue-rotate(110deg);
}

.z8-card--first {
  box-shadow: inset 0 3px 0 0 var(--z8-gold);
}

@media (min-width: 1201px) and (max-width: 1536px) {

  .z8-hero,
  .z8-hero-left,
  .z8-hero-cards { min-height: 680px !important; }

  .z8-hero-left { padding: 56px 64px 44px 64px; }

  .z8-hero-wrap .z8-hero h1.elementor-heading-title { font-size: 48px !important; line-height: 48px !important; letter-spacing: -1.6px !important; }
  .z8-hero-wrap .z8-hero .elementor-widget-text-editor,
  .z8-hero-wrap .z8-hero .elementor-widget-text-editor p { font-size: 17px !important; line-height: 27px !important; }
  .z8-hero .z8-stat-num .elementor-heading-title { font-size: 30px; line-height: 30px; }

  .z8-hero-wrap .z8-hero .elementor-widget-button .elementor-button { font-size: 15px !important; }
  .z8-hero-wrap .z8-hero .elementor-widget-button:not(.z8-btn-ghost) .elementor-button { padding: 13px 28px !important; }

  .z8-card { min-height: 300px !important; padding: 28px 32px !important; }
  .z8-hero-wrap .z8-hero .z8-card h3.elementor-heading-title { font-size: 24px !important; line-height: 26px !important; }

  .z8-hero-left > .elementor-widget-heading:first-child .elementor-heading-title {
    font-size: 14px !important;
    letter-spacing: 3px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {

  .z8-hero-wrap .z8-hero,
  .z8-hero-wrap .z8-hero-left,
  .z8-hero-wrap .z8-hero-cards { min-height: auto !important; }
  .z8-hero-wrap .z8-hero-left { padding: 44px 64px 40px 64px !important; row-gap: 20px !important; }

  .z8-hero-left > .elementor-widget-heading:first-child .elementor-heading-title { font-size: 13px !important; letter-spacing: 1px !important; }

  .z8-hero-wrap .z8-hero h1.elementor-heading-title { font-size: 46px !important; line-height: 46px !important; letter-spacing: -1.4px !important; }
  .z8-hero-wrap .z8-hero .elementor-widget-text-editor,
  .z8-hero-wrap .z8-hero .elementor-widget-text-editor p { font-size: 16px !important; line-height: 25px !important; }
  .z8-hero .z8-stat-num .elementor-heading-title { font-size: 32px; line-height: 32px; }

  .z8-hero-wrap .z8-hero .elementor-widget-button .elementor-button { font-size: 14px !important; }
  .z8-hero-wrap .z8-hero .elementor-widget-button:not(.z8-btn-ghost) .elementor-button { padding: 12px 26px !important; }

  .z8-hero-wrap .z8-hero .z8-card h3.elementor-heading-title { font-size: 20px !important; line-height: 22px !important; }
  .z8-card { min-height: 300px !important; padding: 28px 32px !important; }
}

@media (max-width: 1024px) {
  .z8-hero::before { background-image: none; }
  .z8-hero-cards { border-left: none; }
  .z8-stats { gap: 16px 48px; }

  .z8-card { min-height: 280px !important; }
}
@media (max-width: 767px) {
  .z8-stats { gap: 16px 32px; }

  .z8-stats > .e-con,
  .z8-stats > .e-con-inner > .e-con { flex-direction: column; gap: 22px; }

  .z8-card p.elementor-heading-title { display: none; }

  .z8-card {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-height: 150px !important;
  }

  .z8-eyebrow .elementor-heading-title { letter-spacing: 0.5px; }

	.boutique .elementor-heading-title::before{
		width: 28px;
	}
}

.elementor-button-link .elementor-button-icon svg.e-fas-arrow-right {
  display: none;
}
.elementor-button-link .elementor-button-icon:has(svg.e-fas-arrow-right)::after {
  content: "";
  display: inline-block;
  height: 22px !important;
  aspect-ratio: 24 / 22;
  background: url("../images/icon-arrow-right.svg") no-repeat center/contain;
}
.elementor-button-link.elementor-size-lg .elementor-button-icon:has(svg.e-fas-arrow-right)::after {
  height: 18px;
}
.elementor-button-link.elementor-size-md .elementor-button-icon:has(svg.e-fas-arrow-right)::after {
  height: 12px;
}
.elementor-button-link.elementor-size-sm .elementor-button-icon:has(svg.e-fas-arrow-right)::after {
  height: 14px;
}
.elementor-button-link.elementor-size-xs .elementor-button-icon:has(svg.e-fas-arrow-right)::after {
  height: 12px;
}
@media only screen and (min-width: 768px) {
  .elementor-button-link.elementor-size-lg .elementor-button-icon:has(svg.e-fas-arrow-right)::after {
    height: 24px;
  }
  .elementor-button-link.elementor-size-md .elementor-button-icon:has(svg.e-fas-arrow-right)::after {
    height: 16px;
  }
}
@media (max-width: 767px) {
	.elementor-button-link .elementor-button-icon:has(svg.e-fas-arrow-right)::after {
		height: 14px !important;
	}
}

.arrow-right {
  display: inline-block;
  height: 0.72em;
  aspect-ratio: 24 / 22;
  vertical-align: middle;
  margin: 0 0.06em;
  background-color: #FFFFFF;
  -webkit-mask: url("../images/icon-arrow-right.svg") no-repeat center/contain;
  mask: url("../images/icon-arrow-right.svg") no-repeat center/contain;
}

.z8-card:hover .arrow-right {
	background-color: var(--z8-green-dark);
}

/* brands */
.z8-brands {
  width: 100%;
  padding: 64px 0;
  text-align: center;
	max-width: 1920px;
}

.z8-brands-title {
  margin: 0 auto 40px;
  color: var(--z8-green-dark);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.2;
}

.z8-brands-track {
  width: 100%;
  overflow: hidden;
}

.z8-brands-track .elementor-image-gallery {
  width: 100%;
  overflow: hidden;
}

.z8-brands-track .gallery {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;

  width: auto;
  backface-visibility: hidden;
  touch-action: pan-y pinch-zoom;
}

.z8-brands-track .gallery::after {
  content: none;
}

.z8-brands-track .gallery-item {
  box-sizing: border-box;
  width: 195px !important;
  height: 80px;
  margin: 6px 6px !important;
  padding: 0;
  float: none;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);

	box-shadow:

0 0 7.32px rgba(0,0,0,.12),

inset 0 2px 3px rgba(255,255,255,1),

inset 0 -12px 20px -8px rgba(255,255,255,1),
inset 0 0 0 1px rgba(255,255,255,.6),

inset 0 2px 5px rgba(0,0,0,.07),
inset 0 0 18px rgba(0,0,0,.04);
  border-radius: 8px;
}

.z8-brands-track .gallery-item img {
  width: auto;
  height: auto;
  max-width: 150px;
  max-height: 56px;
  object-fit: contain;
  border: 0;
}

.z8-brands-track .gallery-icon {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.z8-brands-track .gallery-caption {
  display: none;
}

@media (max-width: 767px) {
  .z8-brands {
    padding: 40px 0;
  }
  .z8-brands-track .gallery-item {
    width: 150px !important;
    height: 64px;
    margin: 0 5px;
  }
	.z8-brands-track .gallery-icon {
		height: 64px;
	}
  .z8-brands-track .gallery-item img {
    max-width: 116px;
    max-height: 40px;
  }
}

