/* #region imports */
@import url('//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
@import url('//unpkg.com/aos@next/dist/aos.css');
@import url('//use.typekit.net/bvn0ojt.css');
/* #endregion */

/* #region vars */
:root {
  --primary-color: #10069f;
  --secondary-color: #0168ff;
  --accent-color-1: #ff8f5d;
  --accent-color-2: #ff6cc3;
  --font-body: alber-new-web, sans-serif;
  --font-heading: expo-sans-pro-condensed, sans-serif;
}
/* #endregion */

/* #region defaults */
* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
}
html {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-body);
  background-color: var(--primary-color);
  font-size: 1vw;
  line-height: 1;
  font-weight: 700;
  color: #fff;
}
html:not(.no-js) [data-aos='fade-up'] {
  transform: translate3d(0, 6rem, 0);
}
body {
  padding-top: 6rem;
  background-color: var(--secondary-color);
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
body::after {
  content: '';
  position: fixed;
  z-index: 10;
  inset: 0;
  box-shadow: inset 0 0 0 0.334rem var(--primary-color);
  pointer-events: none;
}
button {
  cursor: pointer;
}
img,
svg {
  display: block;
}
em {
  font-style: italic;
}
a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}
@media only screen and (max-width: 1023px) {
  html {
    font-size: 1.5vw;
  }
}
@media only screen and (max-width: 767px) {
  html {
    font-size: 2vw;
    scroll-padding-top: 10rem;
  }
  body {
    padding-top: 10rem;
  }
}
/* #endregion */

/* #region typography */
h1,
.h1 {
  font-family: var(--font-heading);
  font-size: 9.333rem;
  line-height: 0.8;
  text-wrap: balance;
}
h2,
.h2 {
  font-family: var(--font-heading);
  font-size: 8rem;
  line-height: 0.85;
  text-wrap: balance;
}
h3,
.h3 {
  font-family: var(--font-heading);
  font-size: 6rem;
  line-height: 0.9;
}
h4,
.h4 {
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 1;
}
h5,
.h5 {
  font-family: var(--font-heading);
  font-size: 3.333rem;
  line-height: 1;
}
h6,
.h6 {
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1.1;
}
.p {
  font-size: 1.333rem;
  line-height: 1.1;
}
.p ul,
.p ol {
  padding-left: 2rem;
  margin-bottom: 1em;
}
.p a:not(.button) {
  text-decoration: underline;
}
.p a:not(.button):hover {
  text-decoration: none;
}
.p p {
  margin-bottom: 1em;
}
.p h1,
.p h2,
.p h3,
.p h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.p h5,
.p h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.p h1:first-child,
.p h2:first-child,
.p h3:first-child,
.p h4:first-child,
.p h5:first-child,
.p h6:first-child {
  margin-top: 0;
}
.p blockquote {
  margin-bottom: 2.5rem;
  font-style: italic;
}
.p strong {
  font-weight: bold;
}
@media only screen and (max-width: 1023px) {
  h1,
  .h1 {
    font-size: 8rem;
    line-height: 0.85;
  }
  h2,
  .h2 {
    font-size: 6rem;
    line-height: 0.9;
  }
  h3,
  .h3 {
    font-size: 5rem;
  }
  h4,
  .h4 {
    font-size: 3.5rem;
  }
  h5,
  .h5 {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  h4,
  .h4 {
    font-size: 4rem;
  }
  h5,
  .h5 {
    font-size: 3.5rem;
  }
  h6,
  .h6 {
    font-size: 3rem;
  }
  .p {
    font-size: 2.25rem;
  }
}
/* #endregion */

/* #region button */
.button {
  gap: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21rem;
  height: 7rem;
  border-radius: 50%;
  border: 0.334rem solid var(--primary-color);
  background-color: #fff;
  font-family: var(--font-heading);
  font-size: 2.3334rem;
  color: var(--primary-color);
  transition-duration: 200ms;
  transition-property: background-color, color;
}
.button--sm {
  width: 12rem;
  height: 4.5rem;
  font-size: 1.2rem;
}
.button:hover {
  background-color: var(--primary-color);
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .button {
    width: 25rem;
    height: 8rem;
    font-size: 3rem;
  }
}
/* #endregion */

/* HEADER */

/* #region header */
.header {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
}
.header__logo {
  opacity: 0;
  transition-duration: 200ms;
  transition-property: opacity;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  height: 70px;
  margin: 0 auto;
  padding: 0 50px;
  border-radius: 0 0 20px 20px;
  color: #133a59;
  transition-duration: 200ms;
  transition-property: height, background-color, box-shadow, color;
}
.header__burger {
  display: none;
}
.header.sticky .header__logo {
  opacity: 1;
}
.header.sticky .header__inner {
  height: 100px;
  background-color: rgba(1, 13, 31, 0.75);
  backdrop-filter: blur(2px);
  color: var(--primary);
}
@media only screen and (max-width: 1023px) {
  .header__logo {
    width: auto;
    height: 50px;
  }
  .header__inner {
    padding: 0 30px;
    border-radius: 0;
  }
  .header.sticky .header__inner {
    height: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .header__inner {
    height: 90px;
    padding-left: 60px;
    background-color: #133a59;
    backdrop-filter: blur(2px);
    color: var(--primary);
  }
  .header__logo {
    margin: 0 auto;
    opacity: 1;
  }
  .header__burger {
    display: block;
  }
  .header.sticky .header__inner {
    background-color: #133a59;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.1);
  }
}
/* #endregion */

/* #region logo */
.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 48rem;
  transform: translate(-50%, -50%);
  transition-duration: 600ms;
  transition-property: top, width;
}
.logo__img {
  width: 100%;
}
body {
  overflow: hidden;
}
body.loaded {
  overflow: visible;
}
body.loaded .logo {
  top: 3rem;
  width: 11rem;
}
@media only screen and (max-width: 767px) {
  .logo {
    width: 40rem;
  }
  body.loaded .logo {
    top: 5rem;
    width: 16rem;
  }
}
/* #endregion */

/* #region main nav */
.main-nav {
  display: flex;
  height: 6rem;
  border: 0.334rem solid var(--primary-color);
  background-color: var(--secondary-color);
  font-family: var(--font-heading);
  opacity: 0;
  transition-delay: 600ms;
  transition-duration: 600ms;
  transition-property: opacity;
}
body.loaded .main-nav {
  opacity: 1;
}
.main-nav__item {
  position: relative;
  width: 18%;
}
.main-nav__item:first-child {
  position: static;
}
.main-nav__item--alt {
  display: none;
  width: auto;
}
.main-nav__item--alt a {
  padding-right: 3rem;
  padding-left: 3rem;
  background: transparent;
}
.main-nav__item:nth-child(1),
.main-nav__item:nth-child(2) {
  border-right: 0.334rem solid var(--primary-color);
}
.main-nav__item:nth-child(2) {
  margin-right: auto;
}
.main-nav__item:nth-child(3),
.main-nav__item:nth-child(4),
.main-nav__item:nth-child(5) {
  border-left: 0.334rem solid var(--primary-color);
}
.main-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none !important;
  background-color: var(--secondary-color);
  text-align: center;
  text-transform: uppercase;
  transition-duration: 200ms;
  transition-property: background-color, color;
}
.main-nav__link:hover {
  background-color: var(--accent-color-1);
  color: var(--primary-color);
}
.main-nav__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  gap: 0.334rem;
  display: flex;
  flex-direction: column;
  margin-top: 0.334rem;
  box-shadow: 0 0 0 0.334rem var(--primary-color);
  background-color: var(--primary-color);
  line-height: 5.25rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2rem);
  transition-duration: 400ms;
  transition-property: opacity, transform;
}
.main-nav__dropdown::before {
  content: '';
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
}
.main-nav__item:hover .main-nav__dropdown {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 767px) {
  .main-nav {
    height: 10rem;
  }
  .main-nav__item {
    display: none;
  }
  .main-nav__item--alt {
    display: flex;
    margin-left: auto;
  }
}
/* #endregion */

/* #region carrots nav */
.carrots-nav {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  padding: 1.5rem;
  margin-top: -0.334rem;
  border-top: 0.334rem solid transparent;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2rem);
  transition-duration: 400ms;
  transition-property: opacity, transform;
}
.carrots-nav__inner {
  padding: 4rem;
  border-radius: 2rem;
  border: 0.334rem solid var(--primary-color);
  background-color: var(--secondary-color);
}
.carrots-nav__cont {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.carrots-nav__item {
  gap: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-decoration: none !important;
  font-size: 2rem;
}
.carrots-nav__img {
  width: 100%;
  object-fit: cover;
  transform-origin: bottom;
  transition-duration: 400ms;
  transition-property: scale;
}
.carrots-nav__item:hover .carrots-nav__img {
  scale: 1.1;
}
.carrots-nav__foot {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
}
.main-nav__item:hover .carrots-nav {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
@media only screen and (max-width: 1023px) {
  .carrots-nav {
    display: none;
  }
}
/* #endregion */

/* #region mobile nav */
.mobile-nav {
  position: fixed;
  z-index: 10;
  top: 10rem;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 0;
  overflow: auto;
  background-color: var(--secondary-color);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition-duration: 600ms;
  transition-property: opacity;
}
.mobile-nav::-webkit-scrollbar {
  width: 1rem;
}
.mobile-nav::-webkit-scrollbar-thumb {
  background-color: white;
}
.mobile-nav.active {
  pointer-events: auto;
  opacity: 1;
}
.mobile-nav__item {
  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
}
.mobile-nav__item:first-child {
  margin-top: auto;
}
.mobile-nav__item:last-child {
  margin-bottom: auto;
}
.mobile-nav__item svg {
  width: 0.5em;
  margin-right: -1em;
  fill: currentColor;
  transition-duration: 200ms;
  transition-property: transform;
}
.mobile-nav__item.active svg {
  transform: rotate(180deg);
}
.mobile-nav__dropdown {
  display: none;
  padding-bottom: 2rem;
  text-align: center;
}
.mobile-nav__dropdown .mobile-nav__item {
  margin-top: 2rem;
}
/* #endregion */

/* CONTENT */

/* #region intro */
.intro {
  position: relative;
  padding: 7.5rem 5rem 0;
  text-align: center;
  opacity: 0;
  transition-delay: 800ms;
  transition-duration: 600ms;
  transition-property: opacity;
}
body.loaded .intro {
  opacity: 1;
}
.intro__title {
  max-width: 70rem;
  margin: 0 auto;
}
.intro__video {
  margin-top: 5rem;
  overflow: hidden;
  border-radius: 2.5rem;
  border: 0.334rem solid var(--primary-color);
}
.intro__video div {
  position: relative;
  margin: -1px;
  aspect-ratio: 16/9;
}
.intro__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.intro__video img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
@media only screen and (max-width: 1023px) {
  .intro {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
/* #endregion */

/* #region love reasons */
.love-reasons {
  padding: 10rem 5rem 5rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.love-reasons__head {
  gap: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rem;
}
.love-reasons__link svg {
  width: auto;
  height: 8rem;
}
.love-reasons__heading:not(:first-child) {
  /*margin-top: 10rem;*/
  margin-top: 1rem;
}
.love-reasons__subheading {
  max-width: 40rem;
  margin: 2rem auto 0;
}
.love-reasons__pic {
  margin-top: 4rem;
  overflow: hidden;
  border-radius: 2.5rem;
  border: 0.334rem solid var(--primary-color);
}
.love-reasons__list {
  gap: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin-top: 2.5rem;
  font-family: var(--font-heading);
  font-size: 2rem;
}
.love-reasons__list li:before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: #fff url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" fill="%23FC61A7" xmlns="http://www.w3.org/2000/svg"><path d="M10.1627 18.4621L10.1637 18.4596L10.1709 18.4419L10.204 18.3621C10.2342 18.2897 10.2806 18.1797 10.3423 18.0361C10.4659 17.7487 10.6509 17.3275 10.8913 16.8047C11.3729 15.7573 12.073 14.3111 12.944 12.7207C14.7244 9.46977 17.0745 5.88848 19.5808 3.75226L16.3825 0C13.1601 2.74666 10.4586 6.99472 8.61967 10.3524C8.30692 10.9234 8.01493 11.4766 7.74545 12.0021C6.69356 10.2682 5.51691 8.61057 4.22389 7.04252L0.42 10.1792C2.52029 12.7263 4.27291 15.541 5.63188 18.5496C6.0378 19.4483 6.94021 20.0186 7.92612 19.9995C8.91184 19.9805 9.79139 19.376 10.1624 18.4626L10.1627 18.4621Z" /></svg>') 50% 50%/1.334rem 1.334rem no-repeat;
}
.love-reasons__video,
.love-reasons__pack {
  width: 50rem;
  margin: 4rem auto 0;
}
.love-reasons__img {
  max-width: 50rem;
  height: 30rem;
  margin: 4rem auto 0;
  position: relative;
}
.love-reasons__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.love-reasons__pack--sm {
  width: 16rem;
  margin: 0 auto;
}
.love-reasons__packs {
  gap: 2.5rem;
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  text-align: center;
}
.love-reasons__packs-item {
  width: 17rem;
}
.love-reasons__packs-item img {
  transition-duration: 400ms;
  transition-property: scale;
}
.love-reasons__packs-item:hover img {
  scale: 1.1;
}
.love-reasons__packs-title {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 2rem;
}
.love-reasons__packs-title--sm {
  display: none;
}
.love-reasons__packs-caption {
  margin-top: 0.5rem;
}
.love-reasons__foot {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
@media only screen and (max-width: 1023px) {
  .love-reasons {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .love-reasons__list {
    gap: 3rem;
    font-size: 2.5rem;
  }
  .love-reasons__video,
  .love-reasons__pack {
    width: 100%;
  }
  /* .love-reasons__video {
    display: none;
  } */
  .love-reasons__pack--sm {
    display: block;
    width: 90%;
    margin-top: 4rem;
  }
  .love-reasons__packs {
    display: none;
    gap: 0;
    flex-wrap: wrap;
    margin-top: 0;
  }
  .love-reasons__packs-item {
    width: 50%;
  }
  .love-reasons__packs-item:first-child {
    width: 75%;
  }
  .love-reasons__packs-title {
    font-size: 3rem;
  }
  .love-reasons__packs-title--sm {
    display: block;
  }
  .love-reasons__packs-caption {
    display: none;
  }
}
/* #endregion */

/* #region outro */
.outro {
  overflow: hidden;
  padding: 10rem 5rem 5rem;
  text-align: center;
}
.outro__head {
  gap: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 50rem;
  margin: 0 auto;
}
.outro__foot {
  gap: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6rem;
}
.outro__logo {
  width: 22rem;
}
.outro__nav {
  gap: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.667rem;
  text-transform: uppercase;
}
.outro__nav a {
  transition-duration: 200ms;
  transition-property: opacity;
}
.outro__nav a:hover {
  opacity: 0.75;
}
@media only screen and (max-width: 1023px) {
  .outro {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .outro__nav {
    font-size: 2.5rem;
  }
}
/* #endregion */

/* #region hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 5rem 0;
  opacity: 0;
  transition-delay: 800ms;
  transition-duration: 600ms;
  transition-property: opacity;
}
body.loaded .hero {
  opacity: 1;
}
.hero__chip {
  position: absolute;
  opacity: 0;
  scale: 0;
  translate: 0 5rem;
  transition-delay: 1000ms;
  transition-duration: 800ms;
  transition-property: opacity, scale;
  transition-timing-function: cubic-bezier(0.73, 1.74, 0.85, 1);
}
body.loaded .hero__chip {
  opacity: 1;
  scale: 1;
  translate: 0 0;
}
.hero__chip--1 {
  top: 10rem;
  left: 2rem;
  width: 14rem;
}
.hero__chip--2 {
  top: 20rem;
  left: 3.5rem;
  width: 20.6rem;
  transition-delay: 1200ms;
}
.hero__chip--3 {
  bottom: 12rem;
  right: 2rem;
  width: 14rem;
  transition-delay: 1100ms;
}
.hero__title {
  position: relative;
  margin-bottom: 3rem;
  text-align: center;
}
.hero__video {
  width: 78rem;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 2rem;
  border: 0.334rem solid var(--primary-color);
}
.hero__video video,
.hero__video img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 1.666rem;
  height: auto;
  object-fit: cover;
}
.hero__video video:last-child {
  display: none;
}
.hero__img {
  display: block;
  width: 78rem;
  margin: 0 auto;
  border: 0.334rem solid var(--primary-color);
  border-radius: 2rem;
}
@media only screen and (max-width: 1023px) {
  .hero {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .hero__chip--1 {
    left: -7rem;
  }
  .hero__chip--2 {
    left: -7rem;
  }
  .hero__chip--3 {
    right: -5rem;
    bottom: 3rem;
  }
  .hero__title {
    margin-bottom: 5rem;
  }
  .hero__video {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .hero {
    padding-bottom: 0;
    text-align: center;
  }
  .hero__chip--1 {
    top: 10rem;
    left: -7.5rem;
  }
  .hero__chip--2 {
    top: 25rem;
    left: -10rem;
  }
  .hero__chip--3 {
    right: -4.5rem;
  }
  .hero__title span {
    margin-left: auto;
  }
  .hero__video video {
    display: none;
    aspect-ratio: 1/1;
  }
  .hero__video video:last-child {
    display: block;
  }
}
/* #endregion */

/* #region hero-qr */
.hero-qr {
  position: relative;
  overflow: hidden;
  padding: 5rem 5rem 0;
  opacity: 0;
  transition-delay: 800ms;
  transition-duration: 600ms;
  transition-property: opacity;
}
body.loaded .hero-qr {
  opacity: 1;
}
.hero-qr__chip {
  position: absolute;
  opacity: 0;
  scale: 0;
  translate: 0 5rem;
  transition-delay: 1000ms;
  transition-duration: 800ms;
  transition-property: opacity, scale;
  transition-timing-function: cubic-bezier(0.73, 1.74, 0.85, 1);
}
body.loaded .hero-qr__chip {
  opacity: 1;
  scale: 1;
  translate: 0 0;
}
.hero-qr__chip--1 {
  top: 5rem;
  left: 2rem;
  width: 14rem;
}
.hero-qr__chip--2 {
  top: 18rem;
  left: 3.5rem;
  width: 20.6rem;
  transition-delay: 1200ms;
}
.hero-qr__chip--3 {
  bottom: 1rem;
  right: -8rem;
  width: 14rem;
  transition-delay: 1100ms;
}
.hero-qr__title {
  position: relative;
  margin-bottom: 3rem;
  text-align: center;
}
.hero-qr__wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4rem 1.5rem;
  margin-top: 5rem;
}
.hero-qr__item {
  position: relative;
  text-align: center;
}
.hero-qr__item__image {
  position: relative;
  padding-bottom: 100%;
  border-radius: 3rem;
  border: 0.334rem solid var(--primary-color);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.hero-qr__item__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 400ms ease-in-out;
}
.hero-qr__item:hover .hero-qr__item__image img {
  transform: scale(1.1);
}
.hero-qr__item__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.hero-qr__item__link span {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .hero-qr {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .hero-qr__title {
    margin-bottom: 5rem;
  }
  .hero-qr__wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 767px) {
  .hero-qr {
    padding-bottom: 0;
    text-align: center;
  }
  .hero-qr__chip--1 {
    top: 8rem;
    left: -4rem;
    width: 10rem;
  }
  .hero-qr__chip--2 {
    top: 17rem;
    left: -3.5rem;
    width: 14rem;
  }
  .hero-qr__chip--3 {
    bottom: 1rem;
    right: -5rem;
    width: 9rem;
  }
  .hero-qr__title span {
    margin-left: auto;
  }
}
/* #endregion */

/* #region our carrots */
.our-carrots {
  padding: 5rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
  opacity: 0;
  transition-delay: 800ms;
  transition-duration: 600ms;
  transition-property: opacity;
}
body.loaded .our-carrots {
  opacity: 1;
}
.our-carrots__head {
  margin-bottom: 5rem;
}
.our-carrots__subtitle {
  margin-bottom: 2.5rem;
  font-family: var(--font-heading);
  font-size: 2.1334rem;
}
.our-carrots__cont {
  position: relative;
  overflow: hidden;
  margin-right: -5rem;
  margin-left: -5rem;
}
.our-carrots__cont .slick-list {
  cursor: grab;
}
.our-carrots__cont .slick-list:active {
  cursor: grabbing;
}
.our-carrots__marquee {
  overflow: auto;
}
/* .our-carrots__marquee.nocursor {
  cursor: none;
} */
.our-carrots__marquee:has(~ .our-carrots__arrow.active),
.our-carrots__marquee:has(~ .our-carrots__arrow.active) a {
  cursor: none;
}
.our-carrots__marquee::-webkit-scrollbar {
  display: none;
}
.our-carrots__marquee__track {
  display: flex;
  width: min-content;
}
.our-carrots__marquee__track::after,
.our-carrots__marquee__track::before {
  content: '';
  display: block;
  width: 4.5rem;
  flex-shrink: 0;
}
.our-carrots__arrow {
  position: absolute;
  width: 6rem;
  height: 4rem;
  margin: -2rem 0 0 -3rem;
  pointer-events: none;
  opacity: 0;
  scale: 0;
  transition-duration: 200ms;
  transition-property: opacity, scale;
}
.our-carrots__arrow.active {
  opacity: 1;
  scale: 1;
}
.our-carrots__arrow.flipped {
  rotate: 180deg;
}
.our-carrots__slider {
  display: none;
}
.our-carrots__slide {
  width: 29rem;
  flex-shrink: 0;
  margin: 0 0.5rem;
}
.our-carrots__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1/1;
  border-radius: 2.5rem;
  border: 0.334rem solid var(--primary-color);
}
.our-carrots__pic {
  width: 27.334rem;
  margin-bottom: 2rem;
  transition-duration: 400ms;
  transition-property: scale;
}
.our-carrots__item:hover .our-carrots__pic {
  scale: 1.1;
}
.our-carrots__badge {
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  display: flex;
  justify-content: center;
  width: 12rem;
  height: 12rem;
  padding-top: 1rem;
  border-radius: 50%;
  background-color: #00b5e2;
  transform: translate(-50%, 50%);
}
.our-carrots__badge img {
  height: 2.5rem;
}
.our-carrots__badge--red {
  background-color: #f04e98;
}
.our-carrots__badge--orange {
  background-color: #f04e4e;
}
.our-carrots__badge--lime {
  background-color: #27cb93;
}
.our-carrots__badge--green {
  background-color: #00cfb4;
}
.our-carrots__badge--pink {
  background-color: #ff8ad8;
}
.our-carrots__foot {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
@media only screen and (max-width: 1023px) {
  .our-carrots {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .our-carrots__cont {
    margin-right: -3rem;
    margin-left: -3rem;
  }
  .our-carrots__marquee {
    display: none;
  }
  .our-carrots__slider {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .our-carrots__subtitle {
    font-size: 3rem;
  }
  .our-carrots__slide {
    width: 40rem;
  }
  .our-carrots__pic {
    width: 38rem;
  }
}
/* #endregion */

/* #region our process */
.our-process {
  padding: 7.5rem 5rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.carrots-intro + .our-process {
  padding-top: 5rem;
}
.our-process__head {
  gap: 2rem;
  display: flex;
  flex-direction: column;
  max-width: 58rem;
  margin: 0 auto 5rem;
}
.our-process__cont {
  gap: 10rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.our-process__item {
  gap: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.our-process__pic {
  width: 24rem;
  margin-bottom: 1rem;
}
.our-process__button {
  margin-top: 2rem;
}
@media only screen and (max-width: 1023px) {
  .our-process {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .our-process__cont {
    gap: 5rem;
  }
}
@media only screen and (max-width: 767px) {
  .our-process__cont {
    grid-template-columns: minmax(0, 1fr);
    margin: 5rem 0;
  }
}
/* #endregion */

/* #region top recipes */
.top-recipes {
  overflow: hidden;
  padding: 10rem 5rem 5rem;
  border-bottom: 0.334rem solid var(--primary-color);
  background-color: var(--accent-color-2);
  text-align: center;
  color: var(--primary-color);
}
.top-recipes__head {
  gap: 10rem;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.top-recipes__subtitle {
  margin: 1rem 0 1.5rem;
  font-size: 3rem;
  font-style: italic;
}
.top-recipes__list {
  gap: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin-top: 2.5rem;
  font-family: var(--font-heading);
  font-size: 2rem;
}
.top-recipes__list li:before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: var(--primary-color) url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" fill="%23ff77b5" xmlns="http://www.w3.org/2000/svg"><path d="M10.1627 18.4621L10.1637 18.4596L10.1709 18.4419L10.204 18.3621C10.2342 18.2897 10.2806 18.1797 10.3423 18.0361C10.4659 17.7487 10.6509 17.3275 10.8913 16.8047C11.3729 15.7573 12.073 14.3111 12.944 12.7207C14.7244 9.46977 17.0745 5.88848 19.5808 3.75226L16.3825 0C13.1601 2.74666 10.4586 6.99472 8.61967 10.3524C8.30692 10.9234 8.01493 11.4766 7.74545 12.0021C6.69356 10.2682 5.51691 8.61057 4.22389 7.04252L0.42 10.1792C2.52029 12.7263 4.27291 15.541 5.63188 18.5496C6.0378 19.4483 6.94021 20.0186 7.92612 19.9995C8.91184 19.9805 9.79139 19.376 10.1624 18.4626L10.1627 18.4621Z" /></svg>') 50% 50%/1.334rem 1.334rem no-repeat;
}
.top-recipes__pic {
  position: relative;
}
.top-recipes__glass {
  aspect-ratio: 1/1;
  width: 37rem;
  margin: -3.5rem 0 -2.5rem auto;
}
.top-recipes__badge {
  position: absolute;
  top: 25%;
  left: 0%;
  width: 14rem;
}
.top-recipes__cont {
  margin: 5rem -5rem 0;
}
.top-recipes__slider .slick-list {
  padding-left: 5rem;
}
.top-recipes__slide {
  width: 29rem;
  margin-right: 1.5rem;
}
.top-recipes__foot {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
@media only screen and (max-width: 1023px) {
  .top-recipes {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .top-recipes__head {
    gap: 2rem;
  }
  .top-recipes__pic {
    margin-right: -3rem;
  }
  .top-recipes__glass {
    width: 30rem;
  }
  .top-recipes__badge {
    width: 12rem;
    left: 50%;
    margin-left: -15rem;
  }
  .top-recipes__cont {
    margin-right: -3rem;
    margin-left: -3rem;
  }
  .top-recipes__slider .slick-list {
    padding-left: 3rem;
  }
  .top-recipes__slide {
    width: 29.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .top-recipes {
    padding-top: 7.5rem;
  }
  .top-recipes__head {
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .top-recipes__pic {
    margin-right: 0;
  }
  .top-recipes__glass {
    width: 38rem;
    margin-right: auto;
  }
  .top-recipes__badge {
    width: 14rem;
    margin-left: -19rem;
  }
  .top-recipes__slide {
    width: 44rem;
  }
}
/* #endregion */

/* #region products nav */
.products-nav {
  gap: 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  font-family: var(--font-heading);
  font-size: 2rem;
}
.products-nav--alt {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  font-size: 3rem;
}
.products-nav__item {
  gap: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.products-nav__item:hover .products-nav__img {
  scale: 1.1;
}
.products-nav__img {
  width: 100%;
  aspect-ratio: 425/325;
  object-fit: cover;
  transform-origin: bottom;
  transition-duration: 400ms;
  transition-property: scale;
}
@media only screen and (max-width: 1023px) {
  .products-nav {
    gap: 1rem;
  }
  .products-nav--alt {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .products-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* #endregion */

/* #region most loved */
.most-loved {
  padding: 5rem;
  text-align: center;
}
.whole-carrot--alt + .most-loved {
  border-bottom: 0.334rem solid var(--primary-color);
}
.most-loved--alt {
  padding-top: 10rem;
  padding-bottom: 10rem;
  border-bottom: 0.334rem solid var(--primary-color);
  background-color: var(--accent-color-1);
  color: var(--primary-color);
}
.most-loved__head {
  gap: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 56rem;
  margin: 0 auto 2.5rem;
}
.most-loved__cont {
  position: relative;
  margin-top: 5rem;
}
.most-loved__chips {
  position: absolute;
  pointer-events: none;
}
.most-loved__chips--1 {
  top: 45%;
  right: -2rem;
  width: 22rem;
}
.most-loved__chips--2 {
  top: 100%;
  left: -3rem;
  height: 24rem;
}
.most-loved__item {
  gap: 2rem;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 5rem;
  text-align: center;
}
.most-loved__fig {
  overflow: hidden;
  border-radius: 2rem;
  border: 0.334rem solid var(--primary-color);
  background: var(--primary-color);
}
.most-loved__fig--alt {
  border-color: transparent;
  background: transparent;
}
.most-loved__fig img {
  margin: 0 auto;
}
.most-loved__fig img[width='480'] {
  width: 32rem;
  max-width: 100%;
}
.most-loved__video {
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: 1.666rem;
}
.most-loved__text {
  gap: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 33rem;
  margin: 0 auto;
}
.most-loved__text ul {
  list-style: none;
  gap: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: center;
}
.most-loved__text ul li {
  gap: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 1.5rem;
}
.most-loved__text ul svg {
  height: 2rem;
}
.most-loved__text .button {
  margin-top: 1.5rem;
}
@media only screen and (max-width: 1023px) {
  .most-loved {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .most-loved__text ul {
    font-size: 1.5rem;
  }
  .most-loved__chips {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .most-loved__item {
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .most-loved__text {
    max-width: none;
  }
  .most-loved__fig {
    order: -1;
  }
}
/* #endregion */

/* #region carrots intro */
.carrots-intro {
  padding: 5rem;
  text-align: center;
}
.carrots-intro__head {
  gap: 1.5rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 59rem;
  margin: 0 auto 2.5rem;
}
.carrots-intro__head p {
  /*max-width: 40rem;*/
}
.carrots-intro__new {
  height: 6.5rem;
  margin-bottom: -1rem;
}
.carrots-intro__fig {
  overflow: hidden;
  margin-top: 4rem;
  border-radius: 2rem;
  border: 0.334rem solid var(--primary-color);
}
.carrots-intro__video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
}
.carrots-intro__image {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 1023px) {
  .carrots-intro {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
/* #endregion */

/* #region carrots steps */
.carrots-steps {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 0 5rem 7.5rem;
  text-align: center;
}
.carrots-steps__item {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-direction: column;
  width: 23rem;
}
.carrots-steps__img {
  width: 100%;
  aspect-ratio: 345/237;
  object-fit: contain;
}
.carrots-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: white;
  color: var(--primary-color);
}
@media only screen and (max-width: 1023px) {
  .carrots-steps {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .carrots-steps__item {
    width: 18rem;
  }
}
@media only screen and (max-width: 767px) {
  .carrots-steps {
    font-size: 2rem;
  }
  .carrots-steps__item {
    width: 13rem;
  }
}
/* #endregion */

/* #region carrots filter */
.carrots-filter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 5rem;
  border-top: 0.334rem solid var(--primary-color);
  border-bottom: 0.334rem solid var(--primary-color);
}
.carrots-filter__anchor {
  position: absolute;
  top: -12rem;
  left: 0;
  right: 0;
}
.carrots-filter__item {
  width: 17rem;
  height: 6rem;
}
.carrots-filter__item.active {
  background-color: var(--primary-color);
  color: #fff;
}
@media only screen and (max-width: 1023px) {
  .carrots-filter {
    padding: 1.5rem 3rem;
  }
  .carrots-filter__item {
    width: 11rem;
    height: 4.5rem;
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .carrots-filter {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .carrots-filter__item {
    width: 14rem;
    height: 4.5rem;
  }
}
/* #endregion */

/* #region carrots catalog */
.carrots-catalog {
  padding: 5rem 5rem 10rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.carrots-catalog__title {
  margin: 5rem 0 2.5rem;
}
.carrots-catalog__title:first-child {
  margin-top: 0;
}
.carrots-catalog__cont {
  gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.carrots-catalog__item {
  padding-bottom: 3rem;
  border-radius: 2rem;
  border: 0.334rem solid var(--primary-color);
}
.carrots-catalog__fig {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 23rem;
}
.carrots-catalog__img {
  height: 100%;
  transition-duration: 400ms;
  transition-property: scale;
}
.carrots-catalog__name {
  max-width: 400px;
  margin: 0 auto;
}
.carrots-coming-text {
  font-size: 46px;
}
.carrots-catalog__item:hover .carrots-catalog__img {
  scale: 1.1;
}
@media only screen and (max-width: 1023px) {
  .carrots-catalog {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .carrots-catalog__cont {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 767px) {
  .carrots-catalog__cont {
    grid-template-columns: minmax(0, 1fr);
  }
  .carrots-catalog__item {
    padding: 3rem;
  }
  .carrots-catalog__fig {
    aspect-ratio: 1/1;
    height: auto;
    margin-top: -3rem;
  }
  .carrots-coming-text {
    font-size: 24px;
  }
}
/* #endregion */

/* #region carrots modal */
.carrots-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 3rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition-duration: 400ms;
  transition-property: opacity;
}
.carrots-modal.opened {
  pointer-events: auto;
  opacity: 1;
}
.carrots-modal.opened .carrots-modal__frame {
  transform: none;
}
.carrots-modal__back {
  position: fixed;
  inset: 0;
  background: black;
  cursor: pointer;
  opacity: 0.2;
  transition-duration: 400ms;
  transition-property: opacity;
}
.carrots-modal__back:hover {
  opacity: 0.3;
}
.carrots-modal__frame {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: auto;
  border: 0.334rem solid var(--primary-color);
  background-color: var(--secondary-color);
  transform: translateY(3rem);
  transition-duration: 400ms;
  transition-property: transform;
}
.carrots-modal__fig {
  position: relative;
  aspect-ratio: 1/1;
  padding: 3rem;
  opacity: 0;
  transition-duration: 400ms;
  transition-property: opacity;
}
.carrots-modal__fig img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.carrots-modal__cont {
  opacity: 0;
  gap: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2.5rem 5rem;
  border-left: 0.334rem solid var(--primary-color);
  transition-duration: 400ms;
  transition-property: opacity;
}
.carrots-modal__cont p {
  max-width: 33rem;
}
.carrots-modal__grid {
  display: grid;
  gap: 0.334rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  overflow: hidden;
  margin-top: 1.5rem;
  border-radius: 1.5rem;
  border: 0.334rem solid var(--primary-color);
  background-color: var(--primary-color);
  font-size: 1.1334rem;
}
.carrots-modal__cell {
  gap: 0.5rem;
  display: flex;
  align-items: center;
  padding: 1.25rem;
  background-color: var(--secondary-color);
}
.carrots-modal__cell svg {
  width: auto;
  height: 1.5rem;
}
.carrots-modal__actions {
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
}
.carrots-modal__actions a {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  text-decoration: none !important;
  transition-duration: 200ms;
  transition-property: color;
}
.carrots-modal__actions a:hover {
  color: var(--primary-color);
}
.carrots-modal__actions svg {
  width: auto;
  height: 1.1334rem;
  margin-top: 1px;
}
.carrots-modal__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: var(--primary-color);
  transition-duration: 200ms;
  transition-property: color;
}
.carrots-modal__close svg {
  width: 2.4rem;
  height: 2.4rem;
}
.carrots-modal__close:hover {
  color: white;
}
@media only screen and (max-width: 1023px) {
  .carrots-modal__frame {
    grid-template-columns: minmax(0, 1fr);
    max-width: 47rem;
  }
  .carrots-modal__cont {
    padding: 5rem;
    border-top: 0.334rem solid var(--primary-color);
    border-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .carrots-modal {
    padding: 0;
  }
  .carrots-modal__frame {
    max-width: none;
  }
  .carrots-modal__cont {
    gap: 2rem;
  }
  .carrots-modal__cont p {
    max-width: none;
  }
  .carrots-modal__grid {
    grid-template-columns: minmax(0, 1fr);
    font-size: 2rem;
  }
  .carrots-modal__cell {
    gap: 1rem;
  }
  .carrots-modal__cell svg {
    height: 2rem;
  }
  .carrots-modal__actions svg {
    height: 1.75rem;
  }
}
/* #endregion */

/* #region our roots */
.our-roots {
  overflow: hidden;
  padding: 5rem 5rem 10rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.our-roots__head {
  position: relative;
  gap: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 46rem;
  padding-top: 10rem;
  margin: 0 auto;
}
.our-roots__head h1,
.our-roots__head p {
  position: relative;
}
.our-roots__badge-1 {
  position: absolute;
  top: 0;
  left: -19rem;
  width: 25rem;
}
.our-roots__badge-2 {
  position: absolute;
  top: 13rem;
  left: 50%;
  width: 21rem;
  margin-left: 23rem;
}
.our-roots__cont {
  gap: 2rem;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10rem;
  text-align: center;
}
.our-roots__fig {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  border: 0.334rem solid var(--primary-color);
}
.our-roots__img {
  aspect-ratio: 669/450;
  width: 100%;
  opacity: 0;
  transition-duration: 200ms;
  transition-property: opacity;
}
.our-roots__img.active {
  opacity: 1;
}
.our-roots__img:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (max-width: 1023px) {
  .our-roots {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .our-roots__head {
    padding-top: 8rem;
  }
  .our-roots__badge-1 {
    left: -10rem;
    width: 20rem;
  }
  .our-roots__badge-2 {
    top: 9rem;
    left: 50%;
    width: 15rem;
    margin-left: 19rem;
  }
}
@media only screen and (max-width: 767px) {
  .our-roots__head {
    padding-top: 0;
  }
  .our-roots__badge-1 {
    position: static;
    width: 25rem;
  }
  .our-roots__badge-2 {
    position: static;
    order: 1;
    width: 21rem;
    margin: 0;
  }
  .our-roots__cont {
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr);
  }
}
/* #endregion */

/* #region more to love */
.more-to-love {
  padding: 7.5rem 5rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.more-to-love__cont {
  margin-top: 2.5rem;
}
@media only screen and (max-width: 1023px) {
  .more-to-love {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
/* #endregion */

/* #region better planet */
.better-planet {
  padding: 7.5rem 5rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.better-planet__head {
  gap: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 46rem;
  margin: 0 auto;
}
.better-planet__cont {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
.better-planet__cont img {
  width: auto;
  height: 27rem;
}
.better-planet__foot {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
@media only screen and (max-width: 1023px) {
  .better-planet {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
/* #endregion */

/* #region carrots */
.carrots {
  padding: 7.5rem 5rem 10rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.carrots__head {
  gap: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 75rem;
  margin: 0 auto;
}
.carrots__subtitle {
  text-wrap: pretty;
}
.carrots__more {
  display: flex;
  gap: 0.5em;
  align-items: center;
  margin-top: 2rem;
  font-size: 2.5rem;
}
.carrots__more svg {
  width: 0.8em;
  rotate: 180deg;
}
.carrots__cont {
  position: relative;
  width: 60rem;
  margin: 5rem auto 7.5rem;
}
.carrots__dot {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border-radius: 50%;
  background-color: #fc9851;
  box-shadow: 0 0 0 1.5rem rgba(255, 255, 255, 0.8);
}
.carrots__dot--1 {
  top: 10%;
  left: 75%;
}
.carrots__dot--2 {
  top: 45%;
  left: 35%;
}
.carrots__dot--3 {
  top: 70%;
  left: 60%;
}
.carrots__dot--4 {
  top: 100%;
  left: 25%;
}
.carrots__dot.active {
  width: 4rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
}
.carrots__foot {
  gap: 5rem;
  display: grid;
  align-items: center;
  grid-template-columns: 2fr 3fr;
  max-width: 70rem;
  margin: 7.5rem auto 0;
  padding: 5rem;
  border: 0.334rem solid var(--primary-color);
  border-radius: 2rem;
  text-align: center;
}
@media only screen and (max-width: 1023px) {
  .carrots {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .carrots__cont {
    width: 44rem;
  }
  .carrots__foot {
    gap: 3rem;
    grid-template-columns: 1fr;
    padding: 3rem;
  }
}
/* #endregion */

/* #region whole carrot */
.whole-carrot {
  padding: 7.5rem 5rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.whole-carrot--alt {
  padding-top: 5rem;
  padding-bottom: 0;
  border-bottom: 0;
}
.whole-carrot__head {
  gap: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 40rem;
  margin: 0 auto;
}
.whole-carrot__cont {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5rem;
  padding: 5rem 0;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  border: 0.334rem solid var(--primary-color);
}
.whole-carrot__cont div {
  position: relative;
}
.whole-carrot__img {
  height: 32rem;
}
.whole-carrot__dot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  color: var(--primary-color);
  translate: -50% -50%;
  transition-duration: 200ms;
  transition-property: scale;
}
.whole-carrot__dot:hover {
  scale: 1.125;
}
.whole-carrot__dot::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0.625rem;
  border-radius: 50%;
  background-color: white;
}
.whole-carrot__dot.active {
  pointer-events: none;
  scale: 1.375;
  animation: pulse 2s infinite;
}
.whole-carrot__dot--1 {
  top: 53%;
  left: 78%;
}
.whole-carrot__dot--2 {
  top: 95%;
  left: 27%;
}
.whole-carrot__dot--3 {
  top: 40%;
  left: 33%;
}
.whole-carrot__dot--4 {
  top: 60%;
  left: 55%;
}
.whole-carrot__foot {
  position: relative;
  overflow: hidden;
  margin-top: -0.334rem;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border: 0.334rem solid var(--primary-color);
  background-color: white;
  color: var(--primary-color);
}
.whole-carrot__foot::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 0.334rem solid var(--primary-color);
  transform: translateX(-50%);
}
.whole-carrot__tab {
  position: absolute;
  top: -9999px;
  left: -9999px;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 13rem;
  opacity: 0;
  transition-duration: 400ms;
  transition-property: opacity;
  -webkit-text-size-adjust: none;
}
.whole-carrot__tab.active {
  position: relative;
  top: auto;
  left: auto;
  opacity: 1;
}
.whole-carrot__cell {
  padding: 3rem 5rem;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0);
  }
}
@media only screen and (max-width: 1023px) {
  .whole-carrot {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .whole-carrot__img {
    height: 26rem;
  }
  .whole-carrot__cell {
    padding: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .whole-carrot__cont {
    font-size: 2rem;
  }
  .whole-carrot__img {
    height: 19rem;
  }
  .whole-carrot__foot::after {
    display: none;
  }
  .whole-carrot__tab {
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
    padding: 3rem;
  }
  .whole-carrot__cell {
    padding: 0;
  }
}
/* #endregion */

/* #region packaged planet */
.packaged-planet {
  gap: 10rem;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 7.5rem 5rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.packaged-planet__cont {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-direction: column;
}
.packaged-planet__list {
  gap: 2rem;
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 2rem 0;
  line-height: 1;
}
.packaged-planet__list li:before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--primary-color) url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" fill="%23ff77b5" xmlns="http://www.w3.org/2000/svg"><path d="M10.1627 18.4621L10.1637 18.4596L10.1709 18.4419L10.204 18.3621C10.2342 18.2897 10.2806 18.1797 10.3423 18.0361C10.4659 17.7487 10.6509 17.3275 10.8913 16.8047C11.3729 15.7573 12.073 14.3111 12.944 12.7207C14.7244 9.46977 17.0745 5.88848 19.5808 3.75226L16.3825 0C13.1601 2.74666 10.4586 6.99472 8.61967 10.3524C8.30692 10.9234 8.01493 11.4766 7.74545 12.0021C6.69356 10.2682 5.51691 8.61057 4.22389 7.04252L0.42 10.1792C2.52029 12.7263 4.27291 15.541 5.63188 18.5496C6.0378 19.4483 6.94021 20.0186 7.92612 19.9995C8.91184 19.9805 9.79139 19.376 10.1624 18.4626L10.1627 18.4621Z" /></svg>') 50% 50%/1.334rem 1.334rem no-repeat;
}
.packaged-planet__fig {
  max-width: 40rem;
  margin: 0 auto;
}
@media only screen and (max-width: 1023px) {
  .packaged-planet {
    gap: 5rem;
    grid-template-columns: minmax(0, 1fr);
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .packaged-planet__fig {
    order: -1;
  }
}
@media only screen and (max-width: 767px) {
  .packaged-planet__fig {
    max-width: none;
  }
  .packaged-planet__list {
    font-size: 2.5rem;
  }
  .packaged-planet__list br {
    display: none;
  }
}
/* #endregion */

/* #region packaging */
.packaging {
  padding: 5rem;
  text-align: center;
}
.packaging__head {
  display: flex;
  gap: 2rem;
  flex-direction: column;
  max-width: 52rem;
  margin: 0 auto;
}
.packaging__img {
  height: 27rem;
  margin: 2rem auto;
}
.packaging__cont {
  display: grid;
  gap: 5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  font-size: 3rem;
  text-align: center;
}
.packaging__item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-direction: column;
}
.packaging__item svg {
  height: 4rem;
}
@media only screen and (max-width: 1023px) {
  .packaging {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .packaging__cont {
    gap: 3rem;
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .packaging__img {
    height: 22rem;
  }
  .packaging__cont {
    gap: 2rem;
    font-size: 2.25rem;
  }
}
/* #endregion */

/* #region composting */
.composting {
  padding: 5rem 5rem 10rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.composting__head {
  margin-bottom: 4rem;
}
.composting__item {
  gap: 10rem;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
  padding: 1rem 5rem;
  border-radius: 2rem;
  border: 0.334rem solid var(--primary-color);
}
.composting__text {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
}
.composting__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background-color: #fff;
  color: var(--primary-color);
}
.composting__img {
  max-width: 100%;
  width: 26.6667rem;
  margin: 0 auto;
}
.composting__foot {
  margin-top: 10rem;
}
.composting__list {
  list-style: none;
  margin-top: 2rem;
}
.composting__list li {
  margin-top: 0.75rem;
}
@media only screen and (max-width: 1023px) {
  .composting {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .composting__item {
    gap: 3rem;
    padding: 1rem 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .composting__item {
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 3rem;
  }
  .composting__fig {
    order: -1;
    margin-top: -3rem;
  }
}
/* #endregion */

/* #region contact */
.contact {
  padding: 5rem 5rem 10rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.contact__head {
  gap: 2rem;
  display: flex;
  flex-direction: column;
}
.contact__form {
  /*max-width: 60rem;*/
  margin: 4rem auto 0;
  text-align: left;
}
.contact__form iframe {
  width: 100% !important;
  /*height: 1051px;*/
}
@media only screen and (max-width: 767px) {
  .contact__form iframe {
    /*height: 2000px;*/
  }
}

.contact__row {
  grid-column: 1 / 3;
}
.contact__input,
.contact__select {
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 1rem;
  background-color: #fff;
  font-size: 1.333rem;
  line-height: 1.2;
  color: var(--secondary-color);
  resize: none;
}
.contact__select {
  background: #fff url('data:image/svg+xml;utf8,<svg viewBox="0 0 54 54" fill="%2310069F" xmlns="http://www.w3.org/2000/svg"><path d="M37 22.4711L27.3449 35L17 22.5294L20.4699 20L27.2154 28.1315L33.4369 20.0583L37 22.4711Z"/></svg>') 100% 50% / auto 100% no-repeat;
  cursor: pointer;
}
.contact__input::placeholder {
  color: rgba(1, 104, 255, 0.5);
}
.contact__radio {
  gap: 0.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.contact__radio-label {
  font-size: 2rem;
}
.contact__radio-group {
  gap: 1.5rem;
  display: flex;
  align-items: center;
}
.contact__radio-input {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 99px;
  border: 0.5rem solid #fff;
  background-color: #fff;
  appearance: none;
  cursor: pointer;
}
.contact__radio-input:checked {
  background-color: var(--primary-color);
}
.contact__spoiler {
  gap: 2rem;
  display: none;
  grid-column: 1 / 3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact__spoiler a {
  text-decoration: underline;
}
.contact__spoiler a:hover {
  text-decoration: none;
}
.contact__spoiler.active {
  display: grid;
}
.contact__foot {
  display: flex;
  justify-content: center;
  grid-column: 1 / 3;
  margin-top: 2rem;
}
@media only screen and (max-width: 1023px) {
  .contact {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .contact__form {
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .contact__row {
    grid-column: auto;
  }
  .contact__input,
  .contact__select {
    padding: 1rem 1.5rem;
    font-size: 2.25rem;
  }
  .contact__radio-label {
    margin-bottom: -1.5rem;
    font-size: 2.5rem;
  }
  .contact__spoiler {
    gap: 2.5rem;
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .contact__foot {
    grid-column: auto;
    margin-top: 2.5rem;
  }
}
/* #endregion */

/* #region locator */
.locator {
  padding: 5rem 5rem 10rem;
  border-bottom: 0.334rem solid var(--primary-color);
  background-color: #f8f8f9;
  text-align: center;
  color: var(--primary-color);
}
.locator__head {
  gap: 1rem;
  display: flex;
  flex-direction: column;
}
.locator__cont {
  margin-top: 5rem;
}
body:has(.locator) {
  background-color: #f8f8f9;
}
@media only screen and (max-width: 1023px) {
  .locator {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
/* #endregion */

/* RECIPES */

/* #region recipes head */
.recipes-head {
  gap: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 7.5rem 5rem 10rem;
  /*text-align: center;*/
}
.recipes-head__subtitle {
  max-width: 88rem;
  text-wrap: pretty;
}
@media only screen and (max-width: 1023px) {
  .recipes-head {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .recipes-head {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
/* #endregion */

/* #region recipes filter */
.recipes-filter {
  gap: 1.5rem;
  display: flex;
  align-items: center;
  padding-right: 5rem;
  border-top: 0.334rem solid var(--primary-color);
  border-bottom: 0.334rem solid var(--primary-color);
}
.recipes-filter__item.active {
  background-color: var(--primary-color);
  color: #fff;
}
.recipes-filter__select {
  position: relative;
  width: 21rem;
  margin-right: auto;
  font-family: var(--font-heading);
  font-size: 2rem;
}
.recipes-filter__toggle {
  gap: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 7rem;
  border-right: 0.334rem solid var(--primary-color);
  border-left: 0.334rem solid transparent;
  user-select: none;
  transition-duration: 200ms;
  transition-property: color;
}
.recipes-filter__toggle:hover {
  color: var(--primary-color);
}
.recipes-filter__toggle svg {
  width: 0.867em;
}
.recipes-filter__toggle.pressed {
  pointer-events: none;
}
.recipes-filter__toggle.pressed svg {
  rotate: 180deg;
}
.recipes-filter__toggle.pressed ~ .recipes-filter__dropdown {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.recipes-filter__dropdown {
  position: absolute;
  z-index: 1;
  top: 100%;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 0.5em 0;
  border-top: 0.334rem solid var(--primary-color);
  border-right: 0.334rem solid var(--primary-color);
  border-bottom: 0.334rem solid var(--primary-color);
  background-color: var(--secondary-color);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(1, 0.9);
  transform-origin: top;
  transition-duration: 200ms;
  transition-property: opacity transform;
}
.recipes-filter__dropdown a {
  padding: 0.375em 0;
  transition-duration: 200ms;
  transition-property: color;
}
.recipes-filter__dropdown a:hover,
.recipes-filter__dropdown a.active {
  color: var(--primary-color);
}
@media only screen and (max-width: 1023px) {
  .recipes-filter {
    gap: 0.75rem;
    padding-right: 3rem;
  }
  .recipes-filter__item {
    width: 8rem;
    height: 3.5rem;
  }
  .recipes-filter__select {
    width: 18rem;
  }
}
@media only screen and (max-width: 767px) {
  .recipes-filter {
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-right: 0;
    padding-bottom: 1.5rem;
  }
  .recipes-filter__select {
    width: 100%;
    border-bottom: 0.334rem solid var(--primary-color);
    font-size: 3rem;
  }
  .recipes-filter__item {
    width: 14rem;
    height: 4.5rem;
    font-size: 1.75rem;
  }
  .recipes-filter__divider {
    width: 100%;
    height: auto;
    border-top: 0.334rem solid var(--primary-color);
    border-left: 0;
  }
}
/* #endregion */

/* #region recipes grid */
.recipes-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 5rem;
  border-bottom: 0.334rem solid var(--primary-color);
}
.recipes-grid__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1 / 4;
  margin-top: 2rem;
}
.recipes-grid__foot svg {
  height: 2rem;
}
@media only screen and (max-width: 1023px) {
  .recipes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .recipes-grid__foot {
    grid-column: 1 / 3;
  }
}
@media only screen and (max-width: 767px) {
  .recipes-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .recipes-grid__foot {
    grid-column: 1 / 2;
  }
}
/* #endregion */

/* #region recipes featured */
.recipes-featured {
  padding: 7.5rem 5rem 5rem;
  border-bottom: 0.334rem solid var(--primary-color);
  background-color: var(--accent-color-1);
  color: var(--primary-color);
}
.recipes-featured__head {
  display: flex;
  gap: 2rem;
  flex-direction: column;
  align-items: center;
  margin-bottom: 5rem;
  text-align: center;
}
.recipes-featured__head p {
  max-width: 40rem;
}
.recipes-featured__head svg {
  width: 12rem;
}
.recipes-featured__cont {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media only screen and (max-width: 1023px) {
  .recipes-featured {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .recipes-featured__cont {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
/* #endregion */

/* #region recipes favorites */
.recipes-favorites__cont {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 2.5rem;
  border: 0.334rem solid var(--primary-color);
}
.recipes-favorites__main {
  gap: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem;
  text-align: center;
}
.recipes-favorites__main p {
  max-width: 30rem;
}
.recipes-favorites__side {
  position: relative;
  height: 42rem;
}
.recipes-favorites__side img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 767px) {
  .recipes-favorites__cont {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .recipes-favorites__main {
    padding: 3rem;
  }
  .recipes-favorites__main p {
    max-width: none;
  }
  .recipes-favorites__side {
    order: -1;
  }
}
/* #endregion */

/* #region recipes card */
.recipes-card {
  display: block;
  padding-bottom: 2rem;
  overflow: hidden;
  border-radius: 2.5rem;
  border: 0.334rem solid var(--primary-color);
  text-align: center;
  transition-duration: 400ms;
  transition-property: background-color, color;
}
.recipes-card:hover {
  background-color: #fff;
  color: var(--primary-color);
}
.recipes-card__figure {
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.recipes-card__img {
  width: 100%;
  transition-duration: 400ms;
  transition-property: scale;
}
.recipes-card:hover .recipes-card__img {
  scale: 1.1;
}
.recipes-card__heading {
  margin-top: 0.5rem;
  font-size: 2rem;
}
.recipes-card__heading--lg {
  margin-top: 1rem;
  font-size: 3rem;
}
@media only screen and (max-width: 1023px) {
  .recipes-card__heading {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .recipes-card__heading {
    font-size: 3.5rem;
  }
}
/* #endregion */

/* #region recipe */
.recipe {
  padding: 5rem 5rem 10rem;
  border-bottom: 0.334rem solid var(--primary-color);
}
.recipe__head {
  gap: 2.5rem;
  display: flex;
  align-items: center;
  text-align: center;
}
.recipe__head__left {
  flex: 1;
}
.recipe__meta {
  gap: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.5rem;
}
.recipe__meta div {
  gap: 0.75rem;
  display: flex;
  align-items: center;
}
.recipe__meta svg {
  height: 1.5rem;
  flex-shrink: 0;
}
.recipe__meta small {
  font-size: 70%;
}
.recipe__overline {
  margin-bottom: 2rem;
}
.recipe__fig {
  flex-shrink: 0;
  width: 67%;
  overflow: hidden;
  border-radius: 2rem;
  border: 0.334rem solid var(--primary-color);
}
.recipe--employee .recipe__fig {
  width: 50%;
}
.recipe__fig img {
  aspect-ratio: 3/2;
  width: 100%;
  object-fit: cover;
}
.recipe--employee .recipe__fig img {
  aspect-ratio: 1/1;
}

.recipe__cont {
  gap: 4rem;
  display: flex;
  margin-top: 3rem;
}
.recipe__side {
  flex-grow: 1;
}
.recipe__side ul {
  margin-top: 2rem;
}
.recipe--employee .recipe__side ul {
  list-style: none;
}
.recipe__side li {
  margin-top: 1rem;
}
.recipe__main {
  flex-shrink: 0;
  width: 67%;
}
.recipe__main p {
  /*margin-top: 0.5rem;*/
}
.recipe__main h6 {
  /*margin-top: 2.5rem;*/
}
.recipe__main h5 + h6 {
  /*margin-top: 2rem;*/
}
.recipe__main blockquote {
  /*margin-bottom: 2.5rem;*/
  /*font-style: italic;*/
}
@media only screen and (max-width: 1023px) {
  .recipe {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .recipe__head {
    flex-direction: column;
  }
  .recipe__fig {
    width: 100%;
  }
  .recipe--employee .recipe__fig {
    width: 100%;
  }
  .recipe__cont {
    gap: 3rem;
  }
  .recipe__main {
    width: 60%;
  }
}
@media only screen and (max-width: 767px) {
  .recipe__meta svg {
    height: 2rem;
  }
  .recipe__cont {
    gap: 5rem;
    flex-direction: column;
  }
  .recipe__main {
    width: 100%;
  }
}
/* #endregion */

/* #region related recipes */
.related-recipes {
  padding: 5rem;
  border-bottom: 0.334rem solid var(--primary-color);
  text-align: center;
}
.related-recipes__head {
  max-width: 50rem;
  margin: 0 auto;
}
.related-recipes__cont {
  gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 5rem;
}
.related-recipes__foot {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
@media only screen and (max-width: 1023px) {
  .related-recipes {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .related-recipes__cont {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .related-recipes__cont > div:nth-child(3) {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .related-recipes__cont {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .related-recipes__cont > div:nth-child(3) {
    display: block;
  }
}
/* #endregion */


/* #region share */
.share {
  position: relative;
  width: 3em;
  margin-top: 1.5em;
  margin-left: auto;
}
.share__title {
  display: block;
  cursor: pointer;
}
.share__title svg {
  width: 100%;
}
.share__links {
  position: absolute;
  top: 50%;
  right: 2.5em;
  border: 0.334em solid var(--primary-color);
  background: var(--secondary-color);
  padding: 1em;
  border-radius: 1em;
  display: flex;
  align-items: center;
  gap: 1em;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(-50%);
}
.share:not(:hover) .share__links {
  opacity: 0;
  transform: scale(0.8) translateY(-50%);
  transform-origin: 100% 50%;
  pointer-events: none;
}

.share__link {
  width: 2em;
  height: 2em;
  background: white;
  mask: none center center no-repeat;
  mask-size: contain;
  transition: opacity 0.3s;
  color: transparent;
  overflow: hidden;
  &:hover {
    opacity: 0.6;
  }
}
.share__link--fb {
  mask-image: url(../img/social-fb.svg);
}
.share__link--tw {
  mask-image: url(../img/social-x.svg);
  mask-size: 90% 90%;
}
.share__link--li {
  mask-image: url(../img/social-li.svg);
}
.share__link--mail {
  mask-image: url(../img/social-mail.svg);
}
@media only screen and (max-width: 1023px) {
  .share {
    font-size: 150%;
  }
}
/* #endregion */

/* FOOTER */

/* #region footer */
.footer {
  overflow: hidden;
  padding: 7.5rem 5rem 2.5rem;
  background-color: var(--secondary-color);
}
.footer__logo {
  display: block;
  width: 35rem;
  height: auto;
  margin: 0 auto 5rem;
}
.footer__cont {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 7rem;
  font-family: var(--font-heading);
}
.footer__foot {
  display: grid;
  grid-template-columns: 1fr 3fr;
}
@media only screen and (max-width: 1023px) {
  .footer {
    padding-right: 3rem;
    padding-bottom: 4rem;
    padding-left: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .footer {
    text-align: center;
  }
  .subscribe {
    margin-bottom: 3rem;
  }
  .footer__cont {
    grid-template-columns: minmax(0, 1fr);
  }
  .follow-us {
    margin-top: 3rem;	/*3rem*/
  }
  .footer__foot {
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr);
  }
}
/* #endregion */

/* #region footer nav */
.footer-nav {
  display: flex;
  align-items: start;
  flex-direction: column;
  margin-top: 0.25rem;
  font-size: 1.667rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.footer-nav__item {
  transition-duration: 200ms;
  transition-property: opacity;
}
.footer-nav__item:hover {
  opacity: 0.75;
}
@media only screen and (max-width: 1023px) {
  .footer-nav {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .footer-nav {
    align-items: center;
    font-size: 3rem;
  }
}
/* #endregion */

/* #region follow us */
.follow-us__title {
  margin-bottom: 0.5rem;	/*1.5rem*/
  font-size: 3rem;
  letter-spacing: -0.02em;
}
.follow-us__grid {
  gap: 1.334rem;	/*1.334rem*/
  display: flex;
  align-items: center;
}
.follow-us__item {
  transition-duration: 200ms;
  transition-property: opacity;
}
.follow-us__item:hover {
  opacity: 0.75;
}
.follow-us__item svg {
  width: 2rem;
  height: 2rem;
}
@media only screen and (max-width: 1023px) {
  .follow-us__title {
    font-size: 2.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .follow-us__title {
    display: none;
  }
  .follow-us__grid {
    gap: 1.5rem;	/*2.5em*/
    justify-content: center;
  }
  .follow-us__item svg {
    width: 4rem;
    height: 4rem;
  }
}
/* #endregion */

/* #region subscribe */
.subscribe__title {
  font-size: 3rem;
  letter-spacing: -0.02em;
}
.subscribe__form {
  position: relative;
  margin-top: 1.5rem;
}
.subscribe__input {
  width: 100%;
  padding: 0.75rem 4.5rem 0.75rem 1.5rem;
  background-color: #fff;
  font-size: 1.4667rem;
  line-height: 1.5;
  color: var(--primary-color);
}
.subscribe__input::placeholder {
  color: var(--primary-color);
}
.subscribe__submit {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1rem;
}
.subscribe__submit svg {
  width: 2.5rem;
}
@media only screen and (max-width: 1023px) {
  .subscribe__title {
    font-size: 2.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .subscribe {
    order: -1;
  }
  .subscribe__title {
    font-size: 3rem;
  }
  .subscribe__input {
    font-size: 2.5rem;
  }
}
/* #endregion */

/* #region copyrights */
.copyrights {
  font-size: 1.066666666666667rem;
}
@media only screen and (max-width: 767px) {
  .copyrights {
    font-size: 1.75rem;
  }
}
/* #endregion */

/* #region legal nav */
.legal-nav {
  display: flex;
  gap: 1.5rem;
  font-size: 1.066666666666667rem;
  text-transform: uppercase;
}
.legal-nav__item {
  transition-duration: 200ms;
  transition-property: opacity;
}
.legal-nav__item:hover {
  opacity: 0.75;
}
@media only screen and (max-width: 767px) {
  .legal-nav {
    justify-content: center;
    font-size: 1.75rem;
  }
}

#WhereToBuy:hover{
	text-decoration: none;
  cursor: pointer;
  color: var(--primary-color);
}
/* #endregion */

.page-title {
  padding: 80px 50px 50px;
  text-align: center;
}


/* CARROT SLICK SLIDER */

/* Center dots below the image */
.carrots-modal .slick-dots {
  bottom: 10px !important;
  left: 50%;
  transform: rotate(-90deg) translate(0, -40%);
  position: absolute;
  list-style: none;
}

/* Style dots (remove numbers) */
.carrots-modal .slick-dots li {
  width: 10px;
  height: 10px;
  margin: 5px 0;
}
.carrots-modal .slick-dots li button {
  font-size: 0;
  width: 10px;
  height: 10px;
  background: #007bff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
.carrots-modal .slick-dots li.slick-active button {
  background: #fff;
}

/* Style navigation arrows */
.carrots-modal .slick-prev, .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 30px;
  color: white;
  cursor: pointer;
}
.carrots-modal .slick-prev {
  left: 30px; /* Adjust left position */
}
.carrots-modal .slick-next {
  right: 30px;
}

.locale-popup {
  position: fixed;
  width: 25rem;
  height: 25rem;
  bottom: 5rem;
  right: 5rem;
  max-width: 90%;
  background-color: var(--accent-color-1);
  border: 4px solid var(--primary-color);
  padding: 1rem;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s opacity;
}

.locale-popup__hidden,
body:not(.loaded) .locale-popup {
  opacity: 0;
  pointer-events: none;
}

.locale-popup__close {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.locale-popup__close::after,
.locale-popup__close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  margin-top: -0.5px;
  background-color: var(--primary-color);
  box-shadow: 0 0 0 0.5px var(--primary-color);
  rotate: -45deg;
}

.locale-popup__close::before {
  rotate: 45deg;
}

.locale-popup__content {
  text-align: center;
}

.locale-popup__title {
  margin-bottom: 2rem;
}

.locale-popup__button {
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

.locale-popup__reject {
  cursor: pointer;
}

.locale-popup__flag {
  position: absolute;
  bottom: 1rem;
  right: 1rem;

  img {
    width: 3rem;
    height: auto;
  }
}

@media only screen and (max-width: 767px) {
  .locale-popup {
    width: 75%;
    max-width: 400px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    aspect-ratio: 1;
  }

  .locale-popup__button {
    font-size: 2.6rem;
  }

  .locale-popup__reject {
    font-size: 2rem;
  }
}