@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
.extra-bold {
  font-weight: 800;
}

.bold {
  font-weight: 700;
}

.semi-bold {
  font-weight: 600;
}

.medium {
  font-weight: 500;
}

.regular {
  font-weight: 400;
}

.light {
  font-weight: 300;
}

.uppercase {
  text-transform: uppercase;
}

.underline {
  text-decoration: underline;
}

html {
  font-size: 16px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  align-content: flex-start;
}

ul {
  list-style-type: none;
}

html {
  scroll-behavior: smooth;
}

.hidden {
  display: none;
}

html {
  overflow-x: hidden;
}

input:-internal-autofill-selected {
  appearance: menulist-button;
  background-image: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

* {
  font-family: "Urbanist", sans-serif;
  font-optical-sizing: auto;
}

@font-face {
  font-family: "Clash Display";
  src: url("./assets/font/ClashDisplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Clash Display";
  src: url("./assets/font/ClashDisplay-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Clash Display";
  src: url("./assets/font/ClashDisplay-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Clash Display";
  src: url("./assets/font/ClashDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Clash Display";
  src: url("./assets/font/ClashDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
.mobile {
  display: none !important;
}

header {
  font-size: 1rem;
}

main {
  font-size: 1rem;
}

footer {
  font-size: 1rem;
}

@media (max-width: 1820px) {
  header, main, footer {
    font-size: 0.97rem;
  }
}
@media (max-width: 1720px) {
  header, main, footer {
    font-size: 0.94rem;
  }
}
@media (max-width: 1620px) {
  header, main, footer {
    font-size: 0.91rem;
  }
}
@media (max-width: 1520px) {
  header, main, footer {
    font-size: 0.88rem;
  }
}
@media (max-width: 1420px) {
  header, main, footer {
    font-size: 0.85rem;
  }
}
@media (max-width: 1320px) {
  header, main, footer {
    font-size: 0.82rem;
  }
}
@media (max-width: 1220px) {
  header, main, footer {
    font-size: 0.79rem;
  }
}
@media (max-width: 1120px) {
  header, main, footer {
    font-size: 0.76rem;
  }
}
@media (max-width: 1020px) {
  main, footer {
    font-size: 1rem;
  }
  header {
    font-size: 1rem;
  }
  .desktop {
    display: none !important;
  }
  .mobile {
    display: flex !important;
  }
}
.logo {
  font-family: "Quiche Sans", sans-serif;
  color: #18072F;
  font-size: 2.3rem;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 500;
  letter-spacing: 0.32rem;
}

.link {
  color: #18072F;
  transition: ease-out 0.2s;
  font-family: "Quiche Sans", sans-serif;
  font-weight: 400;
}
.link svg {
  transition: ease-out 0.2s;
}
.link:hover {
  opacity: 0.5;
}
.link:hover svg {
  opacity: 1 !important;
  transform: translateX(0.125rem) translateY(-0.188rem);
}
.link.lang:hover {
  opacity: 1;
  text-decoration: underline;
}
.link {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.938rem;
}

.arrow-link {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1.125rem;
  text-decoration: underline;
  color: #FFFFFF;
  font-size: 1.563rem;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  cursor: pointer;
  transition: ease-out 0.2s;
  position: relative;
  z-index: 2;
}
.arrow-link svg {
  transition: ease-out 0.2s;
}
.arrow-link:hover svg {
  transform: translateX(0.375rem);
}
.arrow-link.dark {
  color: #18072F;
}
.arrow-link.back {
  flex-direction: row-reverse;
}
.arrow-link.back svg {
  transform: rotate(180deg);
}
.arrow-link.back:hover svg {
  transform: translateX(-0.375rem) rotate(180deg);
}
.arrow-link.back.active {
  transform: translateX(-0.375rem) rotate(180deg) !important;
}
.arrow-link.orange {
  color: #F09662;
}
.arrow-link.orange svg path {
  stroke: #18072F;
}
.arrow-link.active {
  pointer-events: none;
  text-decoration: underline !important;
}
.arrow-link.active svg {
  transform: translateX(0.375rem);
}

@media only screen and (max-width: 1020px) {
  .arrow-link {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.769rem;
    text-decoration: underline;
    color: #FFFFFF;
    font-size: 1.231rem;
    transition: ease-out 0.2s;
    position: relative !important;
    z-index: 2 !important;
  }
  .arrow-link svg {
    height: 1rem !important;
    width: 0.462rem !important;
  }
}
.small-button {
  display: flex;
  align-items: center;
  gap: 0.813em;
  padding: 0.563em 1em;
  transition: all 0.3s ease-out;
  border-radius: 200px;
  width: fit-content;
  cursor: pointer;
  background-color: #F1F4F9;
}
.small-button span {
  font-weight: 600;
  font-size: 0.875em;
  text-decoration: none;
  transition: all 0.2s ease-out;
  color: #122335;
}
.small-button svg path {
  transition: all 0.2s ease-out;
}
.small-button:hover {
  background-color: #D6EBFF;
}
.small-button.no-fill {
  background-color: rgba(0, 0, 0, 0);
}
.small-button.no-fill:hover {
  background-color: #F1F4F9;
}
.small-button.no-fill span {
  color: #122335;
}
.small-button.dark svg path {
  fill: white;
}
.small-button.dark {
  background-color: #122335;
}
.small-button.dark:hover {
  background-color: #F1F4F9;
}
.small-button.dark:hover span {
  color: #122335;
}
.small-button.dark:hover svg path {
  fill: #122335;
}
.small-button.dark span {
  color: white;
}

.big-button {
  display: flex;
  align-items: center;
  gap: 0.813em;
  padding: 0.813em 1.625em;
  transition: all 0.3s ease-out;
  border-radius: 200px;
  width: fit-content;
  cursor: pointer;
  background-color: #F1F4F9;
  border: 0;
  outline: 0;
}
.big-button span {
  font-weight: 600;
  font-size: 1.125em;
  text-decoration: none;
  transition: all 0.2s ease-out;
  color: #122335;
}
.big-button svg path {
  transition: all 0.2s ease-out;
}
.big-button:hover {
  background-color: #D6EBFF;
}
.big-button.disabled {
  background-color: #F1F4F9;
  pointer-events: none;
}
.big-button.disabled span {
  color: #868D97;
}
.big-button.stroked {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #FFF;
}
.big-button.stroked span {
  color: #FFF;
}
.big-button.stroked:hover {
  border: 1px solid #D6EBFF;
  background-color: #D6EBFF;
}
.big-button.stroked:hover span {
  color: #122335;
}
.big-button.stroked-dark {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #122335;
}
.big-button.stroked-dark span {
  color: #122335;
}
.big-button.stroked-dark:hover {
  background-color: #D6EBFF;
  border: 1px solid #D6EBFF;
}
.big-button.stroked-dark:hover span {
  color: #122335;
}
.big-button.no-fill {
  background-color: rgba(0, 0, 0, 0);
}
.big-button.no-fill:hover {
  background-color: #D6EBFF;
}
.big-button.no-fill span {
  color: #122335;
}
.big-button.dark {
  background-color: #122335;
}
.big-button.dark:hover {
  background-color: #D6EBFF;
}
.big-button.dark:hover span {
  color: #122335;
}
.big-button.dark:hover svg path {
  fill: #122335;
}
.big-button.dark span {
  color: white;
}

@media (max-width: 1020px) {
  .small-button span {
    font-weight: 500;
  }
  .big-button {
    justify-content: center;
    display: flex;
    padding: 1.125em;
    width: 100%;
  }
  .big-button span {
    font-size: 1em !important;
  }
}
.popup-wrap {
  width: 100vw;
  height: 100dvh;
  z-index: 200;
  background: rgba(18, 35, 53, 0.1);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.3s ease-out;
}
.popup-wrap.hidden {
  opacity: 0;
  pointer-events: none;
}
.popup-wrap.hidden .popup {
  transform: scale(0);
}
.popup-wrap .popup {
  transition: 0.2s ease-out;
  background-color: white;
  border-radius: 2em;
  padding: 1.875em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-wrap .popup h6 {
  font-size: 1.75em;
  text-align: center;
  font-weight: 500;
  color: #122335;
  font-family: "Clash Display";
}
.popup-wrap .popup button {
  width: 100%;
  height: 3em;
  border-radius: 200px;
  display: flex;
  justify-content: center;
}
.popup-wrap .popup button span {
  font-size: 1.125em;
}
.popup-wrap .popup p {
  max-width: 24.375em;
  font-size: 1em;
  color: #868D97;
  text-align: center;
  margin: 1em 0 1.5em 0;
}

#cookies {
  position: fixed;
  bottom: 0;
  border-top: #FFD7BC 1px solid;
  width: 100%;
  z-index: 50;
  transition: ease-out 0.3s;
  opacity: 1;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 2.375rem 7.3%;
}
#cookies .left {
  width: 66%;
}
#cookies .left h6 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #18072F;
}
#cookies .left p {
  color: #18072F;
  opacity: 0.75;
  font-size: 0.938rem;
  max-width: 56.688rem;
  padding-right: 5%;
}
#cookies .right button {
  background-color: #18072F;
  height: 3.125rem;
  border: 0;
  outline: none;
  cursor: pointer;
  padding-inline: 1.813rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  color: #FFFFFF;
  font-size: 1.125rem;
  transition: ease-out 0.3s;
}
#cookies .right button:hover {
  background-color: #F09662;
}
#cookies .right {
  width: 33%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 10%;
}
#cookies .right .arrow-link {
  font-size: 1.375rem;
  color: #18072F;
  text-decoration: none;
}
#cookies.fade {
  opacity: 0;
  transform: translateY(100%);
}

.alert {
  width: fit-content;
  max-width: 95%;
  position: fixed;
  bottom: 5vh;
  z-index: 1100;
  min-height: 3.5rem;
  left: 50%;
  padding: 1rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 3vw;
  padding-inline: 1.25rem;
  transition: ease-out 0.2s;
}
.alert svg {
  flex-shrink: 0;
}
.alert .left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.625rem;
}
.alert .left span {
  font-size: 1.125rem;
  min-width: 18vw;
  max-width: 530px;
}
.alert .close {
  cursor: pointer;
}
.alert.error {
  background-color: rgb(254, 248, 243);
  border-bottom: 1px solid rgb(240, 150, 98);
}
.alert.error span {
  color: #F09662;
}
.alert.success {
  background-color: #f7f6f8;
  border-bottom: 1px solid rgb(24, 7, 47);
}
.alert.success span {
  color: rgb(24, 7, 47);
}
.alert.closed {
  opacity: 0;
  pointer-events: none;
}

.added-item-announcement {
  padding: 2.625rem;
  background-color: #FFFFFF;
  transition: ease-out 0.2s;
  position: absolute;
  display: flex;
  opacity: 0;
  transform: scale(0);
  transform-origin: right top;
}
.added-item-announcement.show {
  opacity: 1;
  transform: scale(1);
}
.added-item-announcement {
  box-shadow: 0px 0px 1.25rem rgba(24, 7, 47, 0.1019607843);
  top: 6rem;
  width: fit-content;
  min-width: 33rem;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.75rem;
}
.added-item-announcement .top {
  width: 100%;
}
.added-item-announcement .top button {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  outline: 0;
  cursor: pointer;
}
.added-item-announcement .top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
}
.added-item-announcement .top h4 {
  font-size: 1.125rem;
  color: #18072F;
  font-weight: 400;
  font-family: "Quiche Sans", sans-serif;
}
.added-item-announcement .item-info {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.25rem;
  height: 5.438rem;
}
.added-item-announcement .item-info .img-wrap {
  width: 5.438rem;
  height: 5.438rem;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.added-item-announcement .item-info .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  height: 5.438rem;
}
.added-item-announcement .item-info .right .product-type {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.813rem;
  color: #18072F;
}
.added-item-announcement .item-info .right .product-type .vl {
  height: 0.625rem;
  width: 1px;
  background-color: #F09662;
}
.added-item-announcement .item-info .right .bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.625rem;
}
.added-item-announcement .item-info .right .bottom .name {
  font-size: 1.375rem;
  color: #18072F;
  font-weight: 400;
  font-family: "Quiche Sans", sans-serif;
}
.added-item-announcement .item-info .right .bottom .price {
  font-size: 1rem;
  color: #18072F;
  font-weight: 400;
  font-family: "Quiche Sans", sans-serif;
}
.added-item-announcement .bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.625rem;
}
.added-item-announcement .bottom .shopping-btn, .added-item-announcement .bottom .cart-btn {
  width: 100%;
  height: 2.75rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 400;
  transition: ease-out 0.3s;
}
.added-item-announcement .bottom .shopping-btn {
  border: 0;
  background-color: rgba(0, 0, 0, 0);
  color: #18072F;
  box-shadow: inset 0 0 0 1.5px #18072F;
}
.added-item-announcement .bottom .shopping-btn:hover {
  background-color: #18072F;
  color: white;
}
.added-item-announcement .bottom .cart-btn {
  background-color: #18072F;
  color: white;
}
.added-item-announcement .bottom .cart-btn:hover {
  background-color: #F09662;
}

.reservation-container {
  position: fixed;
  top: 0;
  z-index: 20000;
  width: 100vw;
  height: 100dvh;
  opacity: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(24, 7, 47, 0.5);
  pointer-events: none;
  transition: ease-out 0.3s;
}
.reservation-container .mobile-wrap {
  background-color: white;
  opacity: 0;
  transform: scale(0);
  transition: ease-out 0.3s;
  width: 100%;
  max-width: 600px;
}
.reservation-container .mobile-wrap .reservation-popup {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  padding: 1.813rem;
}
.reservation-container .mobile-wrap .reservation-popup svg {
  margin-left: auto;
  align-self: flex-end;
  cursor: pointer;
}
.reservation-container .mobile-wrap .reservation-popup h3 {
  align-self: center;
  font-family: "Quiche Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 3rem;
}
.reservation-container .mobile-wrap .reservation-popup .booking-container {
  width: 100%;
}
.reservation-container .mobile-wrap .reservation-popup .booking-container iframe {
  width: 100%;
  max-width: 580px;
  border: 0 !important;
  box-shadow: none !important;
}
.reservation-container.active {
  pointer-events: all;
  opacity: 1;
}
.reservation-container.active .mobile-wrap {
  opacity: 1;
  transform: scale(1);
}

@media only screen and (max-width: 1020px) {
  .popup-wrap {
    padding: 1.923em;
  }
  .popup-wrap .popup {
    padding: 2.462em;
  }
  .popup-wrap .popup h6 {
    font-size: 1.846em;
  }
  .popup-wrap .popup p {
    margin: 1.231em 0 1.846em 0;
    font-size: 1.077em;
  }
  .popup-wrap .popup button {
    height: 4.231em;
  }
  .popup-wrap .popup button span {
    font-size: 1.231em !important;
  }
  .reservation-container .mobile-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
  }
  .reservation-container .mobile-wrap .reservation-popup {
    max-width: 590px;
  }
}
@media only screen and (max-width: 1020px) {
  .reservation-container {
    justify-content: flex-end;
  }
  .reservation-container .mobile-wrap {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    border-radius: 0.769rem 0.769rem 0px 0px;
    position: absolute;
    bottom: 0;
    transform-origin: bottom center;
    width: 100vw;
    max-width: 100%;
  }
  .reservation-container .mobile-wrap .close {
    margin-bottom: 1rem;
  }
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-touch-callout: none) {
      .reservation-container {
        padding-bottom: 4rem !important;
      }
    }
  }
  .alert {
    width: 90vw;
    max-width: 35rem;
  }
  #cookies {
    flex-direction: column;
  }
  #cookies .left {
    width: 100%;
  }
  #cookies .right {
    width: 100%;
    margin-top: 1.923rem;
    justify-content: flex-start;
  }
  .added-item-announcement {
    width: 100%;
    position: fixed;
    display: flex;
    bottom: 0;
    height: fit-content;
    align-self: flex-end;
    min-width: 0;
    transform-origin: bottom center;
    padding: 2.313rem 1.813rem !important;
  }
  .added-item-announcement .top h4 {
    font-size: 1.385rem;
  }
  .added-item-announcement .top svg {
    width: 0.923rem;
    height: 0.923rem;
  }
  .added-item-announcement .bottom .shopping-btn, .added-item-announcement .bottom .cart-btn {
    font-size: 1.154rem;
    text-transform: uppercase;
    height: 3.154rem;
  }
}
.select-input {
  display: flex;
  min-width: 10.25em;
  transition: all 0.3s ease-out;
}
.select-input:focus-within svg {
  transform: translateY(-50%) scale(-1);
}
.select-input:focus-within {
  background-color: #D6EBFF;
}
.select-input {
  border: 1px solid #D6EBFF;
  border-radius: 0.875em;
  position: relative;
}
.select-input select {
  border: 0;
  border-radius: 0.875em;
  outline: 0;
  width: 100%;
  padding: 0.688em 0.875em;
  background-color: rgba(0, 0, 0, 0);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.select-input select {
  font-size: 1em;
  font-weight: 500;
  color: #122335;
}
.select-input svg {
  position: absolute;
  right: 0.688em;
  top: 50%;
  transform: translateY(-50%);
}

footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 3.688em 7.4% 7.375em 7.4%;
}
footer .top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 4em;
  border-bottom: 1px solid #DDD8D2;
  align-items: center;
}
footer .top ul {
  list-style-type: none;
  display: flex;
  gap: 1.25em;
}
footer .top ul .logo-footer {
  margin-right: 1.75em;
}
footer article {
  padding: 4em 0 3.5em 0;
  width: 100%;
}
footer article p {
  font-size: 0.688em;
  color: #868D97;
  font-weight: 600;
}
footer article p a {
  color: #1A85D6;
  text-decoration: underline;
  font-weight: 500;
}
footer .bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer .bottom h6 {
  font-size: 0.688em;
  color: #122335;
  font-weight: 600;
}
footer .bottom ul {
  display: flex;
  gap: 1.25em;
}
footer .bottom ul a {
  font-size: 0.875em;
  font-weight: 600;
  color: #1A85D6;
  text-decoration: underline;
}

@media (max-width: 1020px) {
  footer {
    padding: 2.25em 5.6%;
  }
  footer .top {
    align-items: flex-start;
    padding-bottom: 4em;
  }
  footer .top .left {
    flex-direction: column;
    gap: 1.125em;
  }
  footer .top .left .small-button {
    padding: 0;
  }
  footer .top .left .small-button span {
    font-size: 1em;
    font-weight: 600;
  }
  footer .top .left .small-button:hover {
    background-color: rgba(0, 0, 0, 0);
  }
  footer .top .left svg {
    width: 6.875em;
    height: 1.313em;
    margin-bottom: 2.875em;
    margin-top: 0.625em;
  }
  footer .top .select-input {
    min-width: 6em;
  }
  footer article {
    padding-bottom: 2.25em;
  }
  footer .bottom {
    flex-wrap: wrap;
    gap: 1em;
  }
  footer .bottom h6 {
    text-wrap: nowrap;
  }
  footer .bottom ul {
    gap: 1em;
  }
  footer .bottom ul li a {
    font-size: 0.813em;
    text-wrap: nowrap;
  }
}
header .burger-menu {
  z-index: 200;
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 0 16px 16px 0;
  width: 94.4%;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: 0.2s ease-out all;
}
header .burger-menu .top {
  width: 100%;
  position: relative;
  height: 64px;
  border-bottom: 1px solid #DDD8D2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
}
header .burger-menu .top .burger-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
header .burger-menu .nav {
  display: flex;
  flex-direction: column;
  padding-inline: 5.3%;
  gap: 1.5em;
  margin-top: 2.25em;
}
header .burger-menu .nav a {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-family: "Clash Display", sans-serif;
  font-size: 1.125em;
  color: #122335;
  font-weight: 500;
}
header .burger-menu .bottom {
  position: absolute;
  bottom: 10dvh;
  width: 100%;
  border-top: 1px solid #DDD8D2;
  display: flex;
  flex-direction: column;
  padding-inline: 5.3%;
  padding-top: 2.25em;
  gap: 1em;
}
header .burger-menu .bottom a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .burger-menu .bottom a span {
  font-size: 0.875em;
  font-weight: 500;
  color: #122335;
}
header .burger-menu .bottom a span .clash {
  font-family: "Clash Display", sans-serif;
  color: #868D97;
  font-size: 1em;
}
header .backdrop {
  position: fixed;
  height: 100dvh;
  width: 100%;
  background-color: rgba(18, 35, 53, 0.1);
  z-index: 190;
  opacity: 0;
  transition: 0.2s ease-out all;
  pointer-events: none;
}
header.burger-open .burger-menu {
  transform: translateX(0);
}
header.burger-open .backdrop {
  opacity: 1;
  pointer-events: all;
}
header {
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 100;
}
header .announcement {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2.5em;
  color: #333;
  font-weight: bold;
  /* gradient */
  background: linear-gradient(90deg, #D8FFB5, #FFE3A3, #FFD6C2, #EADCF8, #D6EBFF, #D8FFB5);
  background-size: 300% 100%; /* zvětšíme, aby byl posun plynulý */
  animation: gradientFlow 8s linear infinite;
}
header .announcement article {
  display: flex;
  flex-direction: row;
  gap: 0.688em;
  align-items: center;
}
header .announcement article p, header .announcement article a {
  font-size: 0.813em;
  color: #122335;
  font-weight: 600;
  width: fit-content;
}
header .announcement article a {
  text-decoration: underline;
  flex-shrink: 0;
}
header nav {
  position: relative;
  background-color: #FFF;
  height: 6.188rem;
  display: flex;
  padding-inline: 1.25%;
  align-items: center;
  justify-content: space-between;
}
header nav .header-logo {
  position: absolute;
  display: flex;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}
header nav ul {
  list-style: none;
  display: flex;
  align-items: center;
}
header nav .left {
  gap: 0.875em;
}

@media (max-width: 1020px) {
  header .announcement a {
    text-decoration: none !important;
  }
  header nav {
    height: 4em;
    padding-inline: 1.125em;
  }
  header nav .open-menu {
    padding: 1em;
    margin: -1em;
  }
}
@keyframes gradientFlow {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}
main {
  overflow-y: hidden !important;
}

.svg-wrap {
  overflow-y: hidden;
}

body.locked {
  touch-action: none;
}

section {
  position: relative;
}
section .scroll-to {
  position: absolute;
  bottom: calc(100% + 6.188em + 2.5em);
}

@media (max-width: 1020px) {
  section .scroll-to {
    bottom: calc(100% + 4em + 2.5em);
  }
}
.home-main {
  max-width: 100vw;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.home-main .hero {
  display: flex;
  flex-direction: column;
}
.home-main .hero .screens-slider-container {
  background-color: #D6EBFF;
  padding-top: 8vh;
}
.home-main .hero .screens-slider-container {
  position: relative;
  overflow: hidden;
  /* skryje přetékající obrázky */
  width: 100vw;
  max-width: 100vw;
}
.home-main .hero .screens {
  display: flex;
  gap: 1.875vw;
  width: max-content;
  /* potřebujeme pro animaci */
  /* Animace posunu */
  animation: slideInfinite 30s linear infinite;
  animation-delay: -1.5s;
  pointer-events: none;
}
.home-main .hero .screens img {
  width: 32vw;
  height: auto;
}
.home-main .hero {
  /* duplicujeme obsah, aby loop byl seamless */
}
.home-main .hero .screens::after {
  content: "";
  display: inline-block;
  width: 0;
}
.home-main .hero {
  /* keyframes pro nekonečný posun zleva doprava */
}
@keyframes slideInfinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
    /* posun o polovinu šířky duplikovaných obrázků */
  }
}
.home-main .hero .gradient {
  height: 8vh;
  width: 100%;
  background: linear-gradient(180deg, #D6EBFF 0%, #FFF 100%);
}
.home-main .hero article {
  padding: 9vh 1.25% 10.25em 1.25%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-main .hero article h1 {
  text-align: center;
  color: #122335;
  max-width: 19em;
  font-size: 3em;
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
}
.home-main .hero article p {
  text-align: center;
  margin: 1.5em 0 3.063em 0;
  font-size: 1.25em;
  color: #122335;
  max-width: 35em;
}
.home-main .hero article nav {
  display: flex;
  align-items: center;
  gap: 1.188em;
}
.home-main .team-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3.813em;
  padding-inline: 0.625em;
  padding-bottom: 26em;
}
.home-main .team-section .top {
  position: relative;
  background-color: #EADCF8;
  border-radius: 1.5em;
  padding: 5.625em 0 5.688em 0;
}
.home-main .team-section .top h2 {
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  font-size: 2.5em;
  color: #122335;
  max-width: 12em;
  position: relative;
  z-index: 2;
}
.home-main .team-section .top p {
  margin: 1.5em 0 2.25em 0;
  color: #122335;
  font-size: 1.25em;
  max-width: 25em;
  position: relative;
  z-index: 2;
}
.home-main .team-section .top .big-button {
  position: relative;
  z-index: 2;
}
.home-main .team-section .top .team {
  display: flex;
  gap: 5%;
  position: absolute;
  right: 10.47%;
  width: 100%;
  justify-content: flex-end;
  bottom: -13.5em;
}
.home-main .team-section .top .team .member2 {
  position: relative;
  top: 1.5em;
}
.home-main .team-section .top .team .member {
  max-width: 25em;
  width: 17%;
}
.home-main .team-section .top .team .member img {
  margin-bottom: 1.5em;
  width: 100%;
  object-position: center;
  object-fit: cover;
  aspect-ratio: 324/336;
  background-color: red;
  border-radius: 2em;
}
.home-main .team-section .top .team .member p {
  margin: 1em 0 1.5em;
  font-size: 1em;
}
.home-main .team-section .top .team .member p,
.home-main .team-section .top .team .member h4,
.home-main .team-section .top .team .member h3 {
  width: 100%;
  padding-inline: 2.5%;
  color: #122335;
}
.home-main .team-section .top .team .member h4 {
  font-family: "Clash Display", sans-serif;
  font-size: 1.25em;
  font-weight: 500;
}
.home-main .team-section .top .team .member h3 {
  font-size: 0.875em;
  color: #868D97;
  font-weight: 500;
  font-style: italic;
}
.home-main .team-section .top,
.home-main .team-section .bottom {
  width: 100%;
  padding-left: 10.26%;
}
.home-main .team-section .bottom p {
  font-style: italic;
  color: #868D97;
  font-size: 1em;
  line-height: normal;
  max-width: 32em;
}
.home-main .products-section .fade-out {
  opacity: 0 !important;
  transform: translateY(10px);
}
.home-main .products-section .fade-in {
  opacity: 1 !important;
  transform: translateY(0);
}
.home-main .products-section {
  width: 100%;
  display: flex;
  padding: 9.375em 0;
  gap: 14.5%;
  justify-content: center;
  background-color: #122335;
  align-items: center;
}
.home-main .products-section .left {
  max-width: 35.688em;
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}
.home-main .products-section .left h2 {
  color: #FFF;
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  line-height: normal;
  font-size: 2.5em;
}
.home-main .products-section .left h3 {
  color: #FFCD5C;
  font-family: "Clash Display", sans-serif;
  margin: 2.875em 0 0.688em 0;
  font-weight: 500;
  font-size: 1.25em;
  text-transform: uppercase;
}
.home-main .products-section .left .p1 {
  color: #FFF;
  font-size: 1.25em;
}
.home-main .products-section .left .big-button {
  margin: 2em 0 2.875em 0;
}
.home-main .products-section .left .p2 {
  color: #868D97;
  max-width: 29em;
  font-size: 0.813em;
}
.home-main .products-section .left .p2 a {
  color: white;
  text-decoration: underline;
}
.home-main .products-section .right {
  width: 22.1%;
  display: flex;
  flex-direction: column;
  gap: 5.625em;
}
.home-main .products-section .right img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  object-position: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}
.home-main .products-section .right nav {
  display: flex;
  justify-content: space-between;
}
.home-main .products-section .right nav .arrows {
  padding: 0.125em;
  gap: 0.25em;
  border-radius: 120px;
  display: flex;
  background-color: rgba(255, 255, 255, 0.2);
}
.home-main .products-section .right nav .arrows button {
  background-color: rgba(255, 255, 255, 0);
}
.home-main .products-section .right nav button {
  width: 1.813em;
  height: 1.813em;
  background-color: rgba(255, 255, 255, 0.2);
  border: 0;
  outline: 0;
  border-radius: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-out;
  cursor: pointer;
}
.home-main .products-section .right nav button:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
.home-main .reference-section {
  width: 100%;
  display: flex;
  gap: 6.82%;
  padding-top: 20.25em;
  justify-content: center;
  align-items: center;
}
.home-main .reference-section .img-container {
  width: 33.85%;
  background-color: #FCFBFA;
  aspect-ratio: 650/548;
  border-radius: 2em;
  overflow: hidden;
}
.home-main .reference-section .img-container img {
  width: 100%;
  object-position: bottom center;
  aspect-ratio: 650/548;
  margin-bottom: -2px;
}
.home-main .reference-section article {
  max-width: 45.313em;
}
.home-main .reference-section article h2,
.home-main .reference-section article h3,
.home-main .reference-section article p {
  color: #122335;
}
.home-main .reference-section article h2 {
  font-size: 2.5em;
  font-weight: 500;
  font-family: "Clash Display", sans-serif;
}
.home-main .reference-section article h3 {
  margin-top: 1.563em;
  font-size: 1.25em;
  font-weight: 400;
  color: #868D97;
}
.home-main .reference-section article p {
  margin: 2em 0 3em 0;
  font-size: 1.125em;
}
.home-main .bullets-section {
  padding: 14em 0 20.25em 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.688em;
}
.home-main .bullets-section h3,
.home-main .bullets-section h2 {
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  color: #122335;
}
.home-main .bullets-section .top,
.home-main .bullets-section .bottom {
  display: flex;
  justify-content: space-between;
  max-width: 89.625em;
  width: 74.68%;
  min-width: 50em;
}
.home-main .bullets-section .top {
  justify-content: flex-start;
  align-items: flex-end;
  gap: 11%;
}
.home-main .bullets-section .top h2 {
  font-size: 2.25em;
  max-width: 11em;
}
.home-main .bullets-section .top p {
  color: #868D97;
  font-size: 1.5em;
}
.home-main .bullets-section .bottom article {
  width: fit-content;
  max-width: 21.25em;
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}
.home-main .bullets-section .bottom article h3 {
  font-size: 1.5em;
}
.home-main .bullets-section .bottom article p {
  color: #122335;
  font-size: 1.25em;
}
.home-main .separator-section {
  background-color: #D6EBFF;
  padding: 7.813em 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
.home-main .separator-section h2 {
  font-size: 2.5em;
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  color: #122335;
  text-align: center;
  width: 92%;
  max-width: 20em;
}
.home-main .stored-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20.25em 0 0 0;
}
.home-main .stored-section .container {
  width: 100%;
  width: 78.5%;
  max-width: 155vh;
  overflow: hidden;
  gap: 3em;
  display: flex;
  flex-direction: column;
}
.home-main .stored-section .container .app-preview {
  background-color: #FFCD5C;
  width: 100%;
  aspect-ratio: 1506/742;
  border-radius: 2.25em;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
}
.home-main .stored-section .container .app-preview .image-wrap {
  width: 93.6%;
  aspect-ratio: 1410/646;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: opacity 0.2s ease-out, transform 0.3s ease;
  opacity: 0;
  transform: translateX(-50%);
}
.home-main .stored-section .container .app-preview .image-wrap.active {
  transform: translateX(0);
  opacity: 1;
}
.home-main .stored-section .container .app-preview .image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0 0 2.25em 0;
}
.home-main .stored-section .container .app-preview .navigation {
  padding-inline: 7px;
  height: 28px;
  background-color: rgba(0, 0, 0, 0.32);
  position: absolute;
  right: 1.5em;
  bottom: 1.5em;
  border-radius: 120px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.home-main .stored-section .container .app-preview .navigation button {
  border: 0;
  outline: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #D5D0CB;
  cursor: pointer;
  transition: 0.2s ease-out;
}
.home-main .stored-section .container .app-preview .navigation button:hover {
  background-color: white;
}
.home-main .stored-section .container .app-preview .navigation .indicator-wrap {
  background-color: #D5D0CB;
  border-radius: 120px;
  height: 14px;
  overflow: hidden;
  width: 62px;
}
.home-main .stored-section .container .app-preview .navigation .indicator-wrap .indicator {
  transition: width 0.05s linear;
  height: 100%;
  width: 0%;
  border-radius: 120px;
  background-color: white;
}
.home-main .stored-section .container article {
  width: 100%;
  display: flex;
  gap: 10%;
  justify-content: space-between;
}
.home-main .stored-section .container article .left {
  display: flex;
  gap: 3em;
}
.home-main .stored-section .container article .left p {
  flex-shrink: 0;
  text-wrap: nowrap;
  color: #122335;
  font-weight: 500;
}
.home-main .stored-section .container article .left p a {
  font-weight: 600;
  text-decoration: underline;
  color: #122335;
}
.home-main .stored-section .container article .right-p {
  max-width: 53%;
  color: #868D97;
  font-size: 0.875em;
}
.home-main .contact-section {
  padding: 20.25em 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-main .contact-section h2 {
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  font-size: 2.5em;
  color: #122335;
  max-width: 20em;
  text-align: center;
}
.home-main .contact-section .contacts-row {
  margin-top: 5.938rem;
  width: 100%;
  padding-inline: 4%;
  display: flex;
  justify-content: center;
  gap: 1.5em;
}
.home-main .contact-section .contacts-row .contact {
  max-width: 45.625em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2.375em 0 2em;
  background-color: #D6EBFF;
  flex: 1;
  height: 6em;
  border-radius: 2.25em;
  transition: all 0.3s ease-out;
}
.home-main .contact-section .contacts-row .contact:hover {
  background-color: #7CC6FF;
}
.home-main .contact-section .contacts-row .contact .left {
  display: flex;
  align-items: center;
  gap: 2.875em;
}
.home-main .contact-section .contacts-row .contact .left span {
  font-size: 1.5em;
  font-weight: 500;
  color: #122335;
}
.home-main .newsletter-section {
  display: flex;
  width: 100%;
  background-color: #122335;
  padding: 7.75em 0;
  gap: 8.5%;
  padding-left: 10.78%;
}
.home-main .newsletter-section h2 {
  color: white;
  font-weight: 600;
  max-width: 10.5em;
  font-size: 1.5em;
  margin-top: 0.542em;
}
.home-main .newsletter-section form {
  width: 55.7%;
  display: flex;
  gap: 3em;
}
.home-main .newsletter-section form .big-button {
  flex-shrink: 0;
  height: fit-content;
  margin-top: 1.5em;
}
.home-main .newsletter-section form .left {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
.home-main .newsletter-section form .left .check-wrap {
  display: flex;
  gap: 1.5em;
}
.home-main .newsletter-section form .left .check-wrap p {
  font-weight: 600;
  font-size: 0.875em;
  color: white;
}
.home-main .newsletter-section form .left .check-wrap p a {
  color: #53ACF0;
  text-decoration: underline;
}
.home-main .newsletter-section form .left .check-wrap .checkbox {
  cursor: pointer;
  position: relative;
  height: fit-content;
}
.home-main .newsletter-section form .left .check-wrap .checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.home-main .newsletter-section form .left .check-wrap .checkbox label {
  height: fit-content;
}
.home-main .newsletter-section form .left .check-wrap .checkbox span {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #868D97;
  transition: 0.2s ease-out;
  position: relative;
}
.home-main .newsletter-section form .left .check-wrap .checkbox span svg {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.3s all ease-out;
}
.home-main .newsletter-section form .left .check-wrap .checkbox:hover span {
  box-shadow: inset 0 0 0 1px #868D97;
}
.home-main .newsletter-section form .left .check-wrap .checkbox input:checked + span {
  border: 0;
  box-shadow: none;
}
.home-main .newsletter-section form .left .check-wrap .checkbox input:checked + span svg {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.home-main .newsletter-section form .newsletter-input-wrap {
  border-radius: 2.25em;
  position: relative;
  border: 1px solid #868D97;
  height: 5.25em;
  display: flex;
  transition: 0.1s ease-out all;
}
.home-main .newsletter-section form .newsletter-input-wrap input {
  color: white;
  outline: 0;
  border: 0;
  width: 100%;
  height: 100%;
  padding-inline: 1.3333333333em;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1.5em;
  caret-color: #7CC6FF;
  border-radius: 1.5em;
}
.home-main .newsletter-section form .newsletter-input-wrap input:placeholder-shown ~ .placeholder {
  opacity: 1;
  transform: translateY(-50%);
}
.home-main .newsletter-section form .newsletter-input-wrap input:not(:placeholder-shown) ~ .placeholder {
  opacity: 0;
  transform: translateY(-50%);
}
.home-main .newsletter-section form .newsletter-input-wrap input::placeholder {
  color: rgba(0, 0, 0, 0);
  transition: 0.2s ease-out all;
  font-weight: 500;
  transform-origin: left center;
}
.home-main .newsletter-section form .newsletter-input-wrap .placeholder {
  font-size: 1.5em;
  color: white;
  font-weight: 500;
  position: absolute;
  left: 1.3333333333em;
  top: 50%;
  transform-origin: left center;
  transform: translateY(-50%);
  pointer-events: none;
  transition: 0.2s all ease-out;
}
.home-main .newsletter-section form .newsletter-input-wrap:focus-within {
  border: 1px solid #7CC6FF;
  box-shadow: inset 0 0 0 1px #7CC6FF;
}
.home-main .newsletter-section form .newsletter-input-wrap:focus-within .placeholder {
  opacity: 0 !important;
  transform: translateY(-50%) !important;
}
.home-main .newsletter-section form .newsletter-input-wrap:focus-within input::placeholder {
  color: #868D97;
  transform: scale(1);
}

@media (max-width: 1020px) {
  .home-main .hero .screens-slider-container {
    padding-top: 3.938em;
  }
  .home-main .hero .screens-slider-container .screens img {
    width: 84.5vw;
    max-width: 400px;
  }
  .home-main .hero .screens-slider-container .gradient {
    height: 5.25em;
    margin-top: -3em;
  }
  .home-main .hero article {
    padding: 3em 5.5% 9.25em 5.5%;
  }
  .home-main .hero article h1 {
    font-size: 2.25em;
  }
  .home-main .hero article p {
    font-size: 1em;
    margin: 1.5em 0 2.25em 0;
  }
  .home-main .hero article nav {
    flex-direction: column;
    gap: 1.125em;
    width: 100%;
  }
  .home-main .team-section {
    padding: 0 2.3% 9.25em 2.3%;
  }
  .home-main .team-section .top {
    padding: 2.25em 7.6% 0 7.6%;
  }
  .home-main .team-section .top h2 {
    font-size: 2em;
  }
  .home-main .team-section .top p {
    font-size: 1.125em;
    margin: 1.5em 0 2.25em 0;
  }
  .home-main .team-section .top .big-button {
    margin-bottom: 3.563em;
  }
  .home-main .team-section .top .team {
    margin-top: -14em;
    top: 14em;
    z-index: 10;
    position: relative;
    width: 100vw;
    justify-content: flex-start;
    left: 50%;
    transform: translateX(-50%);
    gap: 2.25em;
    padding-inline: 9.3vw;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 9.3vw;
  }
  .home-main .team-section .top .team .member {
    max-width: 20em;
    width: 60vw;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .home-main .team-section .top .team .member h4 {
    font-size: 1.125em;
  }
  .home-main .team-section .top .team .member img {
    border-radius: 1.25em;
  }
  .home-main .team-section .top .team .member2 {
    top: 0;
  }
  .home-main .team-section .bottom {
    padding-inline: 7.6%;
    margin-top: 14em;
  }
  .home-main .products-section .right img,
  .home-main .products-section .products-section h3,
  .home-main .products-section .products-section .p1 {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .home-main .products-section .fade-in {
    opacity: 1;
    transform: translateY(0);
  }
  .home-main .products-section {
    flex-direction: column-reverse;
    padding: 6em 5.6%;
  }
  .home-main .products-section .left {
    margin-top: 4em;
  }
  .home-main .products-section .left .p1 {
    font-size: 1.125em;
  }
  .home-main .products-section .left h2 {
    font-size: 2em;
  }
  .home-main .products-section .left .p2 {
    font-size: 0.875em;
  }
  .home-main .products-section .left .big-button {
    margin: 2.25em 0;
  }
  .home-main .products-section .left .mobile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2.25em 0 1.125em 0;
  }
  .home-main .products-section .left .mobile-row h3 {
    margin: 0;
  }
  .home-main .products-section .left .mobile-row nav {
    display: flex;
    gap: 1.125em;
  }
  .home-main .products-section .left .mobile-row nav .arrows {
    padding: 0.125em;
    gap: 0.25em;
    border-radius: 120px;
    display: flex;
    background-color: rgba(255, 255, 255, 0.2);
  }
  .home-main .products-section .left .mobile-row nav .arrows button {
    background-color: rgba(255, 255, 255, 0);
    width: 1.875em;
    height: 1.875em;
  }
  .home-main .products-section .left .mobile-row nav button {
    width: 2.125em;
    height: 2.125em;
    background-color: rgba(255, 255, 255, 0.2);
    border: 0;
    outline: 0;
    border-radius: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-out;
    cursor: pointer;
  }
  .home-main .products-section .left .mobile-row nav button:hover {
    background-color: rgba(255, 255, 255, 0.25);
  }
  .home-main .products-section .right {
    width: 100%;
    max-width: 20.25em;
  }
  .home-main .reference-section {
    padding-top: 9.25em;
    flex-direction: column;
  }
  .home-main .reference-section .img-container {
    width: 89%;
  }
  .home-main .reference-section article {
    padding-inline: 9%;
    margin-top: 2.25em;
  }
  .home-main .reference-section article h2 {
    font-size: 2em;
  }
  .home-main .reference-section article p {
    margin-bottom: 2.25em;
  }
  .home-main .bullets-section {
    flex-direction: column;
    align-items: center;
    padding: 6em 0 6.25em 0;
    gap: 2.75em;
  }
  .home-main .bullets-section .top {
    flex-direction: column;
    max-width: 21.25em;
    align-items: center;
    width: 82%;
    min-width: auto;
    gap: 1.125em;
  }
  .home-main .bullets-section .top h2 {
    font-size: 2em;
  }
  .home-main .bullets-section .top p {
    font-size: 1.25em;
  }
  .home-main .bullets-section .bottom {
    min-width: auto;
    flex-direction: column;
    max-width: 21.25em;
    align-items: center;
    width: 82%;
    gap: 2.25em;
  }
  .home-main .bullets-section .bottom article {
    gap: 1.125em;
  }
  .home-main .bullets-section .bottom article.center {
    border-top: 1px solid #DDD8D2;
    border-bottom: 1px solid #DDD8D2;
    padding: 2.25em 0;
  }
  .home-main .separator-section {
    width: 95.4%;
    border-radius: 1.5em;
    align-self: center;
    padding: 2em 7.4%;
    min-height: 29em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .home-main .separator-section h2 {
    font-size: 1.938em;
  }
  .home-main .stored-section {
    flex-direction: column;
    align-items: center;
    padding: 9.25em 0 0 0;
  }
  .home-main .stored-section svg {
    margin-bottom: 2.25em;
  }
  .home-main .stored-section .container {
    width: 100%;
    gap: 2.25em;
  }
  .home-main .stored-section .container .app-preview {
    border-radius: 0;
  }
  .home-main .stored-section .container .app-preview .navigation {
    display: none;
  }
  .home-main .stored-section .container .app-preview {
    width: 100vw;
    overflow-x: scroll;
    aspect-ratio: auto;
    scroll-snap-type: x mandatory;
    background-color: rgba(0, 0, 0, 0);
    justify-content: flex-start;
    scroll-padding-left: 2vw;
    gap: 4vw;
    padding-inline: 2vw;
  }
  .home-main .stored-section .container .app-preview .image-wrap {
    width: 90vw;
    flex-shrink: 0;
    transform: none !important;
    padding: 1.75em 3.5%;
    background-color: #FFCD5C;
    border-radius: 1.125em !important;
    aspect-ratio: auto;
    position: static;
    scroll-snap-align: start;
    opacity: 1;
  }
  .home-main .stored-section .container .app-preview .image-wrap img {
    width: 100%;
    border-radius: 0.25em;
    aspect-ratio: 372/209;
  }
  .home-main .stored-section .container article {
    flex-direction: column;
    padding-inline: 5.5%;
    align-items: center;
    gap: 1.125em;
  }
  .home-main .stored-section .container article p {
    text-wrap: wrap !important;
    text-align: center;
    max-width: 100% !important;
  }
  .home-main .contact-section {
    padding: 9.25em 5.9% 7em 5.9%;
  }
  .home-main .contact-section h2 {
    font-size: 2.25em;
  }
  .home-main .contact-section .contacts-row {
    margin-top: 7em;
    flex-direction: column !important;
    padding: 0;
    gap: 1.5em;
  }
  .home-main .contact-section .contacts-row .contact {
    display: flex;
    flex-shrink: 0;
    max-width: 100%;
    min-height: 4em;
    padding-inline: 1.625em;
  }
  .home-main .contact-section .contacts-row .contact .left {
    gap: 1.125em;
  }
  .home-main .contact-section .contacts-row .contact .left svg {
    width: 1.5em;
    height: 1.5em;
  }
  .home-main .contact-section .contacts-row .contact .left span {
    font-size: 1em;
  }
  .home-main .contact-section .contacts-row .contact svg {
    width: 1.5em;
    height: 1.5em;
  }
  .home-main .contact-section .contacts-row .contact {
    height: 4em;
    border-radius: 1.5em;
  }
  .home-main .newsletter-section {
    padding: 6em 5.9%;
    flex-direction: column;
  }
  .home-main .newsletter-section h2 {
    max-width: 100%;
    margin: 0;
    font-size: 1.25em;
  }
  .home-main .newsletter-section form {
    margin-top: 2.25em;
    flex-direction: column;
    width: 100%;
  }
  .home-main .newsletter-section form .left {
    width: 100%;
    gap: 0;
  }
  .home-main .newsletter-section form .left .big-button {
    margin: 1.125em 0 2.25em 0;
  }
  .home-main .newsletter-section form .left .newsletter-input-wrap {
    border-radius: 1.25em;
    height: 4em;
  }
  .home-main .newsletter-section form .left .newsletter-input-wrap .placeholder {
    font-size: 1.125em;
  }
  .home-main .newsletter-section form .left .newsletter-input-wrap input {
    font-size: 1.125em;
    border-radius: 1.1111111111em;
  }
  .home-main .newsletter-section form .left .check-wrap {
    gap: 1em;
  }
  .home-main .newsletter-section form .left .check-wrap p {
    font-size: 0.813em;
    font-weight: 500;
  }
}
.legal-main {
  padding: 8.875em 10.7%;
  width: 100%;
  display: flex;
  gap: 9%;
  position: relative;
}
.legal-main .heading {
  max-width: 22.813em;
}
.legal-main .heading h1 {
  font-family: "Clash Display", sans-serif;
  font-size: 2.25em;
  font-weight: 500;
  color: #122335;
}
.legal-main .heading {
  display: flex;
  flex-direction: column;
  gap: 3em;
}
.legal-main .right {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.legal-main .right nav {
  display: flex;
  gap: 1.5em;
  margin-bottom: 2.25em;
}
.legal-main .right nav .dark {
  pointer-events: none;
}
.legal-main .right .legal-heading {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 3.125em;
}
.legal-main .right .legal-heading span {
  font-weight: 600;
  color: #868D97;
  font-size: 1em;
}
.legal-main .right .legal-heading .left {
  display: flex;
  flex-direction: column;
  gap: 0.563em;
}
.legal-main .right .legal-heading .left h2 {
  font-size: 2em;
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  color: #122335;
}
.legal-main .right .legal-heading .left h3 {
  font-size: 0.875em;
  font-weight: 600;
  text-transform: uppercase;
  color: #868D97;
}
.legal-main .right article h4 {
  color: #122335;
  font-size: 1.25em;
  font-weight: 600;
}
.legal-main .right article p.main-p {
  font-size: 1.25em;
}
.legal-main .right article p {
  color: #868D97;
}
.legal-main .right article p a {
  color: #122335;
  text-decoration-line: underline;
  font-weight: 600;
}

@media (max-width: 1020px) {
  .legal-main {
    flex-direction: column;
    padding: 4em 5.6%;
    align-items: center;
  }
  .legal-main .heading h1 {
    text-align: center;
    width: 100%;
  }
  .legal-main .right nav {
    margin: 2.25em 0;
    overflow-x: scroll;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-inline: 5.6%;
    scroll-padding-left: 5.6%;
    gap: 1.5em;
  }
  .legal-main .right nav .small-button span {
    text-wrap: nowrap;
  }
  .legal-main .right .legal-heading {
    gap: 1rem;
    flex-wrap: wrap;
  }
  .legal-main .right .legal-heading .left h2 {
    font-size: 1.5em;
  }
  .legal-main .right .legal-heading .left h3 {
    font-size: 0.813em;
  }
  .legal-main .right .legal-heading span {
    text-wrap: nowrap;
    align-self: flex-end;
    font-size: 0.813em;
  }
  .legal-main .right article {
    margin-bottom: 4em;
  }
  .legal-main .right article .main-p {
    font-size: 1.125em !important;
  }
  .legal-main .right article h4 {
    font-size: 1.125em;
  }
  .legal-main .big-button {
    padding: 1.125rem;
  }
  .legal-main .big-button span {
    font-size: 1rem !important;
  }
}