.elementor-widget-slty-hero {
  padding: 48px 0;
}
@media (max-width: 767px) {
  .elementor-widget-slty-hero {
    padding: 24px 0;
  }
}
@media (min-width: 768px) {
  .elementor-widget-slty-hero {
    height: calc(100dvh - var(--slty-header-height));
  }
}

.slty-hero-content {
  position: relative;
  align-items: flex-start;
  z-index: 2;
  color: #ffffff;
  font-family: "Space Grotesk", sans-serif;
}
@media (min-width: 768px) {
  .slty-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 50%;
    height: 100%;
  }
}
.slty-hero-content > div {
  display: flex;
  row-gap: 24px;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 36px;
}
@media (max-width: 767px) {
  .slty-hero-content > div {
    margin-top: 24px;
  }
}
.slty-hero-content h1 {
  margin: 0;
  color: #ffffff;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(24px, 3vw + 1rem, 96px);
  line-height: 1;
  font-family: "graphik", sans-serif;
}

ul.slty-hero-features {
  display: flex;
  position: relative;
  row-gap: 8px;
  flex-direction: column;
  margin: 24px 0 0;
  padding: 0;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.333;
  list-style: none;
}
@media (max-width: 767px) {
  ul.slty-hero-features {
    margin: 16px 0 0;
  }
}
ul.slty-hero-features li:before {
  display: inline-block;
  align-items: center;
  vertical-align: middle;
  margin-right: 0.5em;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2079_16663' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='32'%3E%3Crect width='32' height='32' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2079_16663)'%3E%3Cpath d='M12.7333 24.0001L5.1333 16.4001L7.0333 14.5001L12.7333 20.2001L24.9666 7.9668L26.8666 9.8668L12.7333 24.0001Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100%;
  width: 1.25em;
  height: 1.25em;
  content: "";
}

ul.slty-hero-flavors {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.slty-hero-flavors li {
  display: inline-flex;
  -moz-column-gap: 8px;
       column-gap: 8px;
  justify-content: center;
  align-items: center;
  border: 1px solid #232a2d;
  padding-inline: 16px;
  height: 56px;
  color: #ffffff;
  font-size: 18px;
}
@media (max-width: 767px) {
  ul.slty-hero-flavors li {
    padding-inline: 12px;
    height: 48px;
    font-size: 13px;
  }
}
ul.slty-hero-flavors li span {
  display: block;
  border-radius: 50%;
  width: 16px;
  height: 16px;
}
@media (max-width: 767px) {
  ul.slty-hero-flavors li span {
    width: 12px;
    height: 12px;
  }
}
ul.slty-hero-flavors li.lemon span {
  background-color: #d0ff35;
}
ul.slty-hero-flavors li.blackcurrant span {
  background-color: #a053b4;
}

a.slty-hero-button {
  display: inline-flex;
  -moz-column-gap: 8px;
       column-gap: 8px;
  justify-content: center;
  align-items: center;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  background-color: #d0ff35;
  padding-inline: 32px;
  height: 64px;
  color: #000000 !important;
  font-style: italic;
  font-weight: 700;
  font-family: "graphik", sans-serif;
}
@media (max-width: 767px) {
  a.slty-hero-button {
    width: 100%;
    height: 56px;
  }
}
a.slty-hero-button:hover {
  box-shadow: inset 0 0 0 2px #d0ff35;
  background-color: transparent;
  color: #ffffff !important;
}
a.slty-hero-button:hover:after {
  filter: brightness(0) invert(1);
}
a.slty-hero-button:after {
  transition: filter 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7967 2.5603H19.1192L18.3479 7.14175H14.0254L14.7967 2.5603Z' fill='black' stroke='black'/%3E%3Cpath d='M14.0262 7.14166H18.3487L17.5774 11.7231H13.2549L14.0262 7.14166Z' fill='black' stroke='black'/%3E%3Cpath d='M20.7732 12.3468L24.7012 10.5427L25.9125 15.0279L21.9845 16.8321L20.7732 12.3468Z' fill='black' stroke='black'/%3E%3Cpath d='M21.9856 16.8316L25.9136 15.0275L27.1249 19.5127L23.1969 21.3169L21.9856 16.8316Z' fill='black' stroke='black'/%3E%3Cpath d='M6.6673 2.5603H10.9898L10.2185 7.14175H5.896L6.6673 2.5603Z' fill='black' stroke='black'/%3E%3Cpath d='M12.2869 15.7293H16.6095L15.8382 20.3108H11.5156L12.2869 15.7293Z' fill='black' stroke='black'/%3E%3Cpath d='M16.1876 24.5509L20.3064 25.8622L18.1816 29.9937L14.0628 28.6824L16.1876 24.5509Z' fill='black' stroke='black'/%3E%3Cpath d='M22.9266 2.5603H27.2491L26.4778 7.14175H22.1553L22.9266 2.5603Z' fill='black' stroke='black'/%3E%3Cpath d='M4.02049 13.626L7.07698 10.5695L9.77116 14.3545L6.71467 17.411L4.02049 13.626Z' fill='black' stroke='black'/%3E%3C/svg%3E");
  background-size: 100%;
  width: 32px;
  height: 32px;
  content: "";
}

.slty-hero-image {
  display: block;
  position: absolute;
  top: 0;
  right: -64px;
  z-index: 1;
  background-image: radial-gradient(rgb(14, 26, 31) 0%, rgba(14, 26, 31, 0) 80%);
  width: calc(55% + 64px);
}
@media (min-width: 768px) {
  .slty-hero-image {
    height: calc(100dvh - var(--slty-header-height));
  }
}
@media (max-width: 1600px) {
  .slty-hero-image {
    right: -24px;
    width: calc(55% + 64px);
  }
}
@media (max-width: 767px) {
  .slty-hero-image {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 48px;
    width: 100%;
    height: auto;
  }
}
.slty-hero-image > div {
  display: flex;
  background-image: url("data:image/svg+xml, %3Csvg width='212' height='140' viewBox='0 0 212 140' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='212' height='140' fill='url(%23paint0_radial_1_719)'/%3E%3Cpath d='M116 20H136L132 40H112L116 20Z' fill='black'/%3E%3Cpath d='M176 20L192 40H172L176 20Z' fill='black'/%3E%3Cpath d='M160 0L156 20H136L160 0Z' fill='black'/%3E%3Cpath d='M180 0L176 20H156L180 0Z' fill='black'/%3E%3Cpath d='M156 20L152 40H132L156 20Z' fill='black'/%3E%3Cpath d='M20 0H120L100 100H0L20 0Z' fill='%23D0FF35'/%3E%3Cpath d='M112 40H212L192 140H92L112 40Z' fill='%23A053B4'/%3E%3Cpath d='M4 80H24L20 100H0L4 80Z' fill='black'/%3E%3Cpath d='M84 80L100 100H80L84 80Z' fill='black'/%3E%3Cpath d='M80 100L92 140H72L80 100Z' fill='black'/%3E%3Cpath d='M100 100L116 120H96L100 100Z' fill='black'/%3E%3Cpath d='M116 120L112 140H92L116 120Z' fill='black'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_1_719' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(106 70) rotate(90) scale(70 106)'%3E%3Cstop stop-color='%230E1A1F'/%3E%3Cstop offset='1' stop-color='%230E1A1F' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
}
@media (min-width: 768px) {
  .slty-hero-image > div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-top: 4%;
    aspect-ratio: 53/35;
    height: auto;
  }
}
@media (max-width: 767px) {
  .slty-hero-image > div {
    position: relative;
    flex-direction: column;
    background-image: url("data:image/svg+xml, %3Csvg width='140' height='200' viewBox='0 0 140 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='140' height='200' fill='url(%23paint0_radial_3_251)'/%3E%3Cpath d='M120 0H140L136 20H116L120 0Z' fill='black'/%3E%3Cpath d='M20 0H120L100 100H0L20 0Z' fill='%23D0FF35'/%3E%3Cpath d='M40 100H140L120 200H20L40 100Z' fill='%23A053B4'/%3E%3Cpath d='M4 80H24L20 100H0L4 80Z' fill='black'/%3E%3Cpath d='M84 80L100 100H80L84 80Z' fill='black'/%3E%3Cpath d='M28 160L44 180H24L28 160Z' fill='black'/%3E%3Cpath d='M44 180L40 200H20L44 180Z' fill='black'/%3E%3Cpath d='M40 100L36 120H16L40 100Z' fill='black'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_3_251' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(70 100) rotate(90) scale(100 70)'%3E%3Cstop stop-color='%230E1A1F'/%3E%3Cstop offset='1' stop-color='%230E1A1F' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
    aspect-ratio: 7/10;
  }
}
.slty-hero-image .features {
  display: flex;
  position: absolute;
  bottom: 10%;
  left: 15%;
  gap: 15px 20px;
}
@media (max-width: 767px) {
  .slty-hero-image .features {
    top: 5%;
    right: 0;
    bottom: auto;
    left: auto;
    flex-direction: column;
  }
}
.slty-hero-image .features img {
  display: block;
  width: auto;
  height: 64px;
}
@media (max-width: 1600px) {
  .slty-hero-image .features img {
    height: 48px;
  }
}
.slty-hero-image img.lemon-image,
.slty-hero-image img.blackcurrant-image {
  display: block;
  flex-shrink: 0;
  aspect-ratio: 6/5;
  width: 50%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 767px) {
  .slty-hero-image img.lemon-image,
  .slty-hero-image img.blackcurrant-image {
    padding-top: 5%;
    width: 88%;
  }
}
@media (min-width: 768px) {
  .slty-hero-image img.lemon-image {
    margin-bottom: auto;
    padding-left: 5%;
  }
}
@media (min-width: 768px) {
  .slty-hero-image img.blackcurrant-image {
    margin-top: auto;
    padding-right: 5%;
  }
}
@media (max-width: 767px) {
  .slty-hero-image img.blackcurrant-image {
    margin-left: auto;
  }
}