@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Geist: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;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  align-content: flex-start;
  transition: all 0.3s ease-out !important;
}

ul {
  list-style-type: none;
}

html {
  scroll-behavior: smooth;
}

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 3s ease, transform 3s ease;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

@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;
}

@media only screen and (max-width: 1920px) {
  html {
    font-size: 17px;
  }
}
@media only screen and (max-width: 1820px) {
  html {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1720px) {
  html {
    font-size: 15px;
  }
}
@media only screen and (max-width: 1620px) {
  html {
    font-size: 14px;
  }
}
@media only screen and (max-width: 1520px) {
  html {
    font-size: 13px;
  }
}
@media only screen and (max-width: 1420px) {
  html {
    font-size: 13px;
  }
}
@media only screen and (max-width: 1320px) {
  html {
    font-size: 12px;
  }
}
@media only screen and (max-width: 1220px) {
  html {
    font-size: 11px;
  }
}
@media only screen and (max-width: 1120px) {
  html {
    font-size: 10px;
  }
}
@media only screen and (max-width: 1020px) {
  html {
    font-size: 13px;
  }
  .desktop {
    display: none !important;
  }
  .mobile {
    display: flex !important;
  }
}
@media only screen and (max-width: 380px) {
  html {
    font-size: 12px;
  }
}
.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;
}

.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.813rem;
  padding: 0.688rem 1rem;
  transition: all 0.3s ease-out;
  border-radius: 0.813rem;
  width: fit-content;
  height: 2.5rem;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgba(0, 0, 0, 0);
}
.small-button span {
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.2s ease-out;
  color: #122335;
  text-wrap: nowrap;
  text-align: center;
}
.small-button svg path {
  transition: all 0.2s ease-out;
}
.small-button.outline {
  border: 1px solid #122335;
}
.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 {
  box-shadow: 0 3px 2px 0 rgba(255, 255, 255, 0.24) inset, 0 -3px 2px 0 rgba(0, 0, 0, 0.24) inset;
}
.small-button.dark svg path {
  fill: white;
}
.small-button.dark {
  background-color: #122335;
}
.small-button.dark span {
  color: white;
}
.small-button:hover {
  background-color: #25364A;
  box-shadow: 0 3px 2px 0 rgba(255, 255, 255, 0.24) inset, 0 -3px 2px 0 rgba(0, 0, 0, 0.24) inset;
  border: 1px solid rgba(0, 0, 0, 0);
}
.small-button:hover span {
  color: white;
}
.small-button.disabled {
  pointer-events: none;
  background-color: #F1F4F9;
  box-shadow: none;
}
.small-button.disabled svg path {
  fill: #868D97;
}

.big-button {
  display: flex;
  align-items: center;
  gap: 0.813rem;
  padding: 0.875rem 1.25rem;
  transition: all 0.3s ease-out;
  border-radius: 1rem;
  width: fit-content;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  outline: 0;
  height: 3.375rem;
}
.big-button span {
  text-wrap: nowrap;
  font-weight: 500;
  font-size: 1.125rem;
  text-decoration: none;
  transition: all 0.2s ease-out;
  color: #122335;
  text-align: center;
}
.big-button svg path {
  transition: all 0.2s ease-out;
}
.big-button.outline {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #122335;
}
.big-button.outline span {
  color: #122335;
}
.big-button.outline.white {
  border: 1px solid white;
}
.big-button.outline.white span {
  color: white;
}
.big-button.outline.white:hover {
  background-color: white;
  box-shadow: 0 3px 2px 0 rgba(255, 255, 255, 0.24) inset, 0 -3px 2px 0 rgba(0, 0, 0, 0.24) inset;
  border: 1px solid rgba(0, 0, 0, 0) !important;
}
.big-button.outline.white:hover span {
  color: #122335;
}
.big-button.dark {
  background-color: #122335;
  box-shadow: 0 3px 2px 0 rgba(255, 255, 255, 0.24) inset, 0 -3px 2px 0 rgba(0, 0, 0, 0.24) inset;
}
.big-button.dark span {
  color: white;
}
.big-button:hover {
  background-color: #25364A;
  border: 1px solid rgba(0, 0, 0, 0) !important;
  box-shadow: 0 3px 2px 0 rgba(255, 255, 255, 0.24) inset, 0 -3px 2px 0 rgba(0, 0, 0, 0.24) inset;
}
.big-button:hover span {
  color: white;
}
.big-button.disabled {
  background-color: #F1F4F9;
  pointer-events: none;
  box-shadow: none;
}
.big-button.disabled span {
  color: #868D97;
}

@media (max-width: 1020px) {
  .small-button {
    height: 3.077rem;
    padding-inline: 1.231rem;
    border-radius: 1rem;
  }
  .small-button span {
    font-weight: 500;
    font-size: 1.077rem;
  }
  .big-button {
    justify-content: center;
    display: flex;
    height: 4rem;
    padding-inline: 1.538rem;
  }
  .big-button span {
    font-size: 1.385rem !important;
    font-weight: 500;
  }
}
.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: 2rem;
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-wrap .popup h6 {
  font-size: 1.75rem;
  text-align: center;
  font-weight: 500;
  color: #122335;
  font-family: "Clash Display";
}
.popup-wrap .popup button {
  width: 100%;
  height: 3rem;
  border-radius: 200px;
  display: flex;
  justify-content: center;
}
.popup-wrap .popup button span {
  font-size: 1.125rem;
}
.popup-wrap .popup p {
  max-width: 24.375rem;
  font-size: 1rem;
  color: #868D97;
  text-align: center;
  margin: 1rem 0 1.5rem 0;
}

.cookies-popup {
  position: fixed;
  bottom: 2.5rem;
  left: 2.5rem;
  z-index: 100;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.13);
  backdrop-filter: blur(6px);
  padding: 2rem;
  max-width: 33.2291666667%;
  transition: all 0.1s ease-out;
  transform: scale(1);
  transform-origin: bottom left;
}
.cookies-popup.hidden {
  transform: scale(0);
  pointer-events: none;
  opacity: 0;
}
.cookies-popup h2 {
  font-family: "Clash Display";
  color: #122335;
  font-weight: 500;
}
.cookies-popup p {
  margin: 1.5rem 0 0 0;
  font-size: 1rem;
  color: #868D97;
}
.cookies-popup a {
  color: #53ACF0;
  text-decoration: underline;
  font-weight: 500;
  margin-bottom: 2.25rem;
  font-size: 1rem;
  margin-bottom: 2.25rem;
  display: flex;
}
.cookies-popup .btns {
  display: flex;
  gap: 1rem;
}

@media only screen and (max-width: 1020px) {
  .cookies-popup {
    width: calc(100vw - 2.462rem);
    left: 1.231rem;
    bottom: 1.231rem;
    max-width: 100%;
  }
  .cookies-popup h2 {
    font-size: 1.846rem;
  }
  .cookies-popup p {
    margin: 1.846rem 0 1.231rem 0;
    font-size: 1.231rem;
  }
  .cookies-popup a {
    margin-bottom: 3.692rem;
    font-size: 1.231rem;
  }
  .popup-wrap {
    padding: 1.923rem;
  }
  .popup-wrap .popup {
    padding: 2.462rem;
  }
  .popup-wrap .popup h6 {
    font-size: 1.846rem;
  }
  .popup-wrap .popup p {
    margin: 1.231rem 0 1.846rem 0;
    font-size: 1.077rem;
  }
  .popup-wrap .popup button {
    height: 4.231rem;
  }
  .popup-wrap .popup button span {
    font-size: 1.231rem !important;
  }
}
.select-input {
  display: flex;
  min-width: 10.25rem;
  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.875rem;
  position: relative;
}
.select-input select {
  border: 0;
  border-radius: 0.875rem;
  outline: 0;
  width: 100%;
  padding: 0.688rem 0.875rem;
  background-color: rgba(0, 0, 0, 0);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.select-input select {
  font-size: 1rem;
  font-weight: 500;
  color: #122335;
}
.select-input svg {
  position: absolute;
  right: 0.688rem;
  top: 50%;
  transform: translateY(-50%);
}

footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2.688rem 0 3.125rem 0;
  position: relative;
  z-index: 2;
  background-color: white;
}
footer hr {
  width: 100%;
  border: 0;
  height: 1px;
  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;
}
footer .top {
  padding-inline: 7.4%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 2.188rem;
  align-items: center;
}
footer .top ul {
  list-style-type: none;
  display: flex;
  gap: 2rem;
  align-items: center;
}
footer .top ul .logo-footer {
  margin-right: 2rem;
  display: flex;
  align-items: center;
}
footer .top ul li a {
  font-size: 1rem;
  color: #122335;
  font-weight: 500;
}
footer .top ul li a:hover {
  color: #868D97;
}
footer .top .right {
  display: flex;
  align-items: center;
  gap: 0.813rem;
}
footer .top .right .lang-btn {
  margin-right: 1.188rem;
}
footer article {
  padding: 2.5rem 0 3rem 0;
  padding-inline: 7.4%;
  width: 100%;
}
footer article p {
  font-size: 0.688rem;
  color: #122335;
  font-weight: 500;
}
footer article p .bold {
  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;
  padding-inline: 7.4%;
}
footer .bottom h6 {
  font-size: 0.875rem;
  color: #868D97;
  font-weight: 600;
}
footer .bottom .left {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
footer .bottom .left .based-in {
  display: flex;
  align-items: center;
  gap: 0.563rem;
}
footer .bottom .left .based-in span {
  font-size: 0.688rem;
  color: #122335;
  font-weight: 500;
}
footer .bottom .left .vl {
  height: 1.063rem;
  width: 1px;
  background-color: rgba(18, 35, 53, 0.25);
}
footer .bottom .left ul {
  display: flex;
  gap: 1rem;
  align-items: center;
}
footer .bottom .left ul a {
  font-size: 0.875rem;
  font-weight: 500;
  color: #122335;
}
footer .bottom .left ul a:hover {
  color: #868D97;
}

@media (max-width: 1020px) {
  footer {
    padding: 3.692rem 5.6818181818% 3.692rem 5.6818181818%;
  }
  footer .top {
    align-items: flex-start;
    padding: 0 0 2.769rem 0;
    padding-bottom: 4rem;
    flex-direction: column;
    position: relative;
  }
  footer .top .lang-btn {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 0 !important;
    gap: 0.692rem;
  }
  footer .top .lang-btn svg {
    width: 1.462rem;
    height: 1.462rem;
  }
  footer .top .lang-btn span {
    font-size: 1.231rem;
  }
  footer .top .left {
    flex-direction: column;
    gap: 1.846rem;
    align-items: flex-start;
  }
  footer .top .left svg {
    margin-bottom: 1.846rem;
  }
  footer .top .left .link span {
    font-size: 1.385rem;
    font-weight: 600;
  }
  footer .top .left svg {
    width: 8.462rem;
    height: 1.615rem;
  }
  footer .top .right {
    margin-top: 3.692rem;
    flex-direction: column;
    width: 100%;
    gap: 1.231rem;
  }
  footer .top .right .small-button {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    height: 4rem;
  }
  footer .top .right .small-button span {
    font-size: 1.385rem;
  }
  footer .top .select-input {
    min-width: 6rem;
  }
  footer article {
    padding: 2.769rem 0;
  }
  footer article p {
    font-size: 0.846rem;
  }
  footer .bottom {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0;
    align-items: flex-start;
  }
  footer .bottom h6 {
    text-wrap: nowrap;
    font-size: 0.846rem;
    font-weight: 500;
    margin-top: 1px;
  }
  footer .bottom .left {
    gap: 2.769rem;
  }
  footer .bottom .left .based-in {
    gap: 0.692rem;
  }
  footer .bottom .left .based-in svg {
    width: 2.769rem;
    height: 1.846rem;
  }
  footer .bottom .left .based-in span {
    font-size: 0.846rem;
  }
  footer .bottom .left {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  footer .bottom .left .vl {
    display: none;
  }
  footer .bottom .left ul {
    gap: 1.2rem;
  }
  footer .bottom .left ul li a {
    font-size: 1rem;
    text-wrap: nowrap;
  }
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 0.563rem;
  color: #122335;
  font-size: 1rem;
  font-weight: 500;
}
.lang-btn:hover {
  color: #868D97;
}
.lang-btn:hover svg path {
  fill: #868D97;
}

header .burger-menu hr {
  margin-inline: -5.3%;
  margin-bottom: 1rem;
}
header .burger-menu hr.margin-top {
  margin-top: 1rem;
}
header .burger-menu hr {
  width: 100vw;
  border: 0;
  height: 1px;
  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 .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);
  width: 100vw;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: 0.2s ease-out all;
}
header .burger-menu .top {
  width: 100%;
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .burger-menu .top .right {
  display: flex;
  align-items: center;
  gap: 2.038rem;
}
header .burger-menu .top .right .contact-btn, header .burger-menu .top .right .close-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  margin: -7px;
  background-color: rgba(18, 35, 0, 0);
  border: 0;
  outline: none;
}
header .burger-menu .top .right .close-menu {
  padding: 12px;
  margin: -12px;
}
header .burger-menu .top .right .close-menu svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
header .burger-menu .top {
  padding-inline: 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.538rem;
}
header .burger-menu .nav a {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-size: 1.385rem;
  color: #122335;
  font-weight: 500;
}
header .burger-menu .nav a.contact {
  font-size: 1.231rem;
  margin-bottom: 0.308rem;
}
header .burger-menu .bottom {
  position: absolute;
  bottom: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-inline: 5.3%;
  padding-top: 2.25rem;
  gap: 1.231rem;
}
header .burger-menu .bottom a {
  width: 100%;
}
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%;
  position: sticky;
  top: 0;
  z-index: 100;
}
header .announcement {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  color: #333;
  font-weight: 500;
  /* 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.688rem;
  align-items: center;
}
header .announcement article p, header .announcement article a {
  font-size: 0.813rem;
  color: #122335;
  color: #122335;
  font-weight: 500;
  width: fit-content;
}
header .announcement article a {
  text-decoration: underline;
  flex-shrink: 0;
  font-weight: 600;
  text-transform: uppercase;
}
header nav {
  position: relative;
  background-color: #FFF;
  height: 5rem;
  display: flex;
  padding-inline: 3.3333333333%;
  align-items: center;
  justify-content: space-between;
}
header nav .header-logo {
  position: absolute;
  display: flex;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
  width: 8.154rem;
  height: 1.615rem;
}
header nav ul {
  list-style: none;
  display: flex;
  align-items: center;
}
header nav ul .link {
  font-size: 1rem;
  color: #122335;
  font-weight: 500;
}
header nav ul .link:hover {
  color: #868D97;
}
header nav .left {
  gap: 1.6666666667vw;
}
header nav .right {
  gap: 1.25vw;
}
header nav .right .btns {
  margin-left: 1.25vw;
  display: flex;
  gap: 0.625vw;
}
header nav .sales span {
  color: #868D97;
}
header nav .sales {
  font-size: 1rem;
  font-weight: 500;
  color: #122335;
}

@media (max-width: 1020px) {
  .lang-btn svg {
    width: 1.846rem;
    height: 1.846rem;
  }
  .lang-btn span {
    font-size: 1.231rem;
    font-weight: 500;
  }
  header .announcement {
    height: auto;
    padding: 0.769rem 5%;
  }
  header .announcement a {
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-align: center;
    align-items: center;
    display: flex;
  }
  header nav {
    height: 4.923rem;
    padding-inline: 1.125rem;
  }
  header nav .open-menu {
    padding: 1rem;
    margin: -1rem;
  }
  header nav .contact-btn {
    display: flex;
    padding: 1rem;
    margin: -1rem;
  }
  header nav .right {
    gap: 0.75rem;
  }
}
@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.188rem + 2.5rem);
}

@media (max-width: 1020px) {
  section .scroll-to {
    bottom: calc(100% + 4rem + 2.5rem);
  }
}
.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: linear-gradient(90deg, #D6EBFF 0%, #7CC6FF 100%);
  padding-top: 4.4444444444vh;
  padding-bottom: 13.2407407407vh;
  position: relative;
}
.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řebujreme pro animaci */
  /* Animace posunu */
  animation: slideInfinite 30s linear infinite;
  animation-delay: -1.5s;
  pointer-events: none;
}
.home-main .hero .screens img {
  width: 32vw;
  border-radius: 0.688rem;
  height: auto;
}
.home-main .hero {
  /* duplicujreme 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: 8.8888888889vh;
  width: 100vw;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFF 100%);
  backdrop-filter: blur(2px);
  position: absolute;
  bottom: -3px;
  z-index: 10;
}
.home-main .hero article {
  padding: 5.9259259259vh 1.25% 22.962962963vh 1.25%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-main .hero article h1 {
  text-align: center;
  color: #122335;
  max-width: 58.5rem;
  font-size: 3rem;
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
}
.home-main .hero article h1 span {
  font-family: "Clash Display", sans-serif;
}
.home-main .hero article h1 .orange {
  color: #FF9E73;
}
.home-main .hero article h1 .purple {
  color: #D19CFF;
}
.home-main .hero article p {
  text-align: center;
  margin: 1rem 0 2rem 0;
  font-size: 1.25rem;
  font-weight: 300;
  color: #122335;
  max-width: 43.75rem;
}
.home-main .hero article nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.home-main .team-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6rem;
  padding-inline: 1.4583333333vw;
  padding-bottom: 15.5rem;
}
.home-main .team-section .top {
  position: relative;
  background: linear-gradient(93deg, #EADCF8 0%, #D19CFF 100%);
  border-radius: 4rem;
  padding: 3.938rem 9%;
}
.home-main .team-section .top .left {
  display: flex;
  flex-direction: column;
  max-width: 60.1%;
}
.home-main .team-section .top .left h2 {
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  font-size: 2.5rem;
  color: #122335;
  max-width: 27.5rem;
  position: relative;
  z-index: 2;
}
.home-main .team-section .top .left p {
  margin: 1.5rem 0 2.25rem 0;
  color: #122335;
  font-size: 1.25rem;
  position: relative;
  z-index: 2;
}
.home-main .team-section .top .left .big-button {
  position: relative;
  z-index: 2;
}
.home-main .team-section .top .team {
  display: flex;
  gap: 5%;
  position: absolute;
  right: 9%;
  width: 24%;
  justify-content: flex-end;
  bottom: -16rem;
}
.home-main .team-section .top .team .member {
  width: 100%;
}
.home-main .team-section .top .team .member img {
  margin-bottom: 1.5rem;
  width: 100%;
  object-position: center;
  object-fit: cover;
  aspect-ratio: 324/336;
  background-color: #868D97;
  border-radius: 4rem;
}
.home-main .team-section .top .team .member p {
  margin: 1rem 0 1.5rem;
  font-size: 1.125rem;
}
.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.5rem;
  font-weight: 500;
}
.home-main .team-section .top .team .member h3 {
  font-size: 1rem;
  color: #868D97;
  font-weight: 500;
}
.home-main .team-section .top,
.home-main .team-section .bottom {
  width: 100%;
  padding-inline: 9%;
}
.home-main .team-section .bottom {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
.home-main .team-section .bottom p {
  color: #122335;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: normal;
  max-width: 35.313rem;
}
.home-main .team-section .bottom .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-main .team-section .bottom .row .team {
  display: flex;
  gap: 5vw;
}
.home-main .team-section .bottom .row .team .member.member2 {
  margin-top: 3rem;
}
.home-main .team-section .bottom .row .team .member {
  width: 16.875vw;
}
.home-main .team-section .bottom .row .team .member img {
  margin-bottom: 1.5rem;
  width: 100%;
  object-position: center;
  object-fit: cover;
  aspect-ratio: 324/336;
  background-color: #868D97;
  border-radius: 2.5rem;
}
.home-main .team-section .bottom .row .team .member p {
  margin: 1rem 0 1.688rem;
  font-size: 1rem;
  font-weight: 400;
}
.home-main .team-section .bottom .row .team .member p,
.home-main .team-section .bottom .row .team .member h4,
.home-main .team-section .bottom .row .team .member h3 {
  width: 100%;
  padding-inline: 2.5%;
  color: #122335;
}
.home-main .team-section .bottom .row .team .member h4 {
  font-family: "Clash Display", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
}
.home-main .team-section .bottom .row .team .member h3 {
  font-size: 0.875rem;
  color: #868D97;
  font-weight: 500;
}
.home-main .team-section .bottom .row p {
  font-size: 1.25rem;
  max-width: 29.5vw;
}
.home-main .cta {
  margin-top: 6rem;
  margin-bottom: 13.75rem;
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 85.1041666667vw;
  padding: 6rem 8%;
  border-radius: 4rem;
  align-items: center;
  gap: 1.5rem;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.home-main .cta h2 {
  text-align: center;
  font-family: "Clash Display";
  font-size: 2.5rem;
  max-width: 42.75rem;
  font-weight: 500;
}
.home-main .products-section .footer-p {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: white;
  max-width: 25rem;
}
.home-main .products-section .footer-p a {
  font-weight: 500;
  color: white;
  text-decoration: underline;
}
.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;
  flex-direction: column;
  padding: 9.125rem 7.44% 7.813rem 7.44%;
  background: linear-gradient(285deg, #122335 0%, #25364A 100%);
  margin-bottom: 7rem;
}
.home-main .products-section .top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 11.3020833333%;
  color: white;
  align-items: flex-end;
  margin-bottom: 6.063rem;
}
.home-main .products-section .top p {
  font-size: 1.5rem;
}
.home-main .products-section .top .heading {
  width: 30rem;
  min-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.home-main .products-section .top .heading h2 {
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: uppercase;
}
.home-main .products-section .top .heading h3 {
  font-size: 2.5rem;
  font-weight: 500;
  font-family: "Clash Display";
}
.home-main .products-section .services {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.938rem;
}
.home-main .products-section .services li {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.home-main .products-section .services li .preview {
  position: relative;
  opacity: 1;
}
.home-main .products-section .services li .preview .decor {
  position: absolute;
  height: 100%;
  right: 0;
}
.home-main .products-section .services li .preview {
  padding: 1.75rem;
  cursor: pointer;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 1.5rem;
  border: 0;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16) inset, 0 2px 2px 0 rgba(255, 255, 255, 0.16) inset;
  backdrop-filter: blur(1px);
  color: white;
}
.home-main .products-section .services li .preview h4 {
  font-size: 1.25rem;
  text-transform: uppercase;
  font-weight: 500;
}
.home-main .products-section .services li .preview p {
  width: 69.2599388379%;
  text-align: left;
  font-size: 1rem;
}
.home-main .products-section .services li .view {
  overflow: hidden;
  position: relative;
  height: 0;
  min-height: 0;
  opacity: 0;
  transform: scale(0);
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 2.25rem;
}
.home-main .products-section .services li .view .decor {
  position: absolute;
  height: auto;
  right: 0;
  width: 42.8%;
  bottom: 0;
  opacity: 0;
  transition: all 0.4s ease-out !important;
  transform: scale(0);
}
.home-main .products-section .services li .view .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-main .products-section .services li .view .row p {
  max-width: 50%;
  width: 50%;
  color: #122335;
}
.home-main .products-section .services li .view .heading {
  display: flex;
  align-items: center;
}
.home-main .products-section .services li .view .heading svg {
  margin: 0 0.563rem 0 0.188rem;
}
.home-main .products-section .services li .view .heading span, .home-main .products-section .services li .view .heading h3 {
  color: #25364A;
  font-size: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
}
.home-main .products-section .services li.service1 .view {
  background: var(--Purple-gradient, linear-gradient(93deg, #EADCF8 0%, #D19CFF 100%));
  box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16) inset, 0 2px 2px 0 rgba(255, 255, 255, 0.16) inset, 0 0 16px 0 rgba(0, 0, 0, 0.09);
}
.home-main .products-section .services li.service2 .view {
  background: var(--Blue-gradient, linear-gradient(93deg, #D6EBFF 0%, #7CC6FF 100%));
  box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16) inset, 0 2px 2px 0 rgba(255, 255, 255, 0.16) inset, 0 0 16px 0 rgba(0, 0, 0, 0.09);
}
.home-main .products-section .services li.service3 .view {
  background: var(--Oragne-gradient, linear-gradient(93deg, #FFD6C2 0%, #FF9E73 100%));
  box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16) inset, 0 2px 2px 0 rgba(255, 255, 255, 0.16) inset, 0 0 16px 0 rgba(0, 0, 0, 0.09);
}
.home-main .products-section .services li.service4 .view {
  background: var(--Green-gradient, linear-gradient(93deg, #D8FFB5 0%, #A8E85C 100%));
  box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16) inset, 0 2px 2px 0 rgba(255, 255, 255, 0.16) inset, 0 0 16px 0 rgba(0, 0, 0, 0.09);
}
.home-main .products-section .services li.active .preview {
  display: none;
  opacity: 0;
}
.home-main .products-section .services li.active .view {
  display: flex;
  height: 19.125rem;
  opacity: 1;
  transform: scale(1);
  padding: 2.5rem;
}
.home-main .products-section .services li.active .view .decor {
  opacity: 1;
  transform: scale(1);
}
.home-main .reference-section {
  width: 100%;
  display: flex;
  gap: 6.82%;
  padding-top: 5.5rem;
  justify-content: center;
  align-items: center;
}
.home-main .reference-section .img-container {
  width: 33.85%;
  background-color: #F8F6F2;
  aspect-ratio: 650/548;
  border-radius: 2.5rem;
  overflow: hidden;
}
.home-main .reference-section .img-container img {
  width: 62%;
  top: 3rem;
  position: absolute;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
}
.home-main .reference-section article {
  max-width: 45.313rem;
}
.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.5rem;
  font-weight: 500;
  font-family: "Clash Display", sans-serif;
}
.home-main .reference-section article h3 {
  font-size: 1rem;
  font-weight: 400;
  color: #868D97;
}
.home-main .reference-section article p {
  margin: 1.5rem 0;
  font-size: 1.125rem;
}
.home-main .reference-section .action-row {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-main .reference-section .action-row nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.home-main .reference-section .action-row nav .counter {
  color: #868D97;
  font-size: 1rem;
}
.home-main .reference-section .action-row nav .counter span {
  color: #122335;
}
.home-main .bullets-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 7rem;
  width: 100%;
  display: flex;
  margin-top: 6.25rem;
  padding-top: 6rem;
}
.home-main .bullets-section .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  border-left: 1px solid #DDD8D2;
  gap: 5.688rem;
  width: 88.6363636364vw;
  max-width: 94.125rem;
  padding-left: 4.780876494%;
}
.home-main .bullets-section .wrapper h3,
.home-main .bullets-section .wrapper h2 {
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  color: #122335;
}
.home-main .bullets-section .wrapper .top,
.home-main .bullets-section .wrapper .bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.home-main .bullets-section .wrapper .top {
  justify-content: flex-start;
  align-items: flex-end;
  gap: 4.25rem;
}
.home-main .bullets-section .wrapper .top h2 {
  font-size: 2.25rem;
  flex: 1;
  max-width: 23.438rem;
}
.home-main .bullets-section .wrapper .top p {
  color: #868D97;
  font-size: 1.5rem;
  max-width: 26.875rem;
}
.home-main .bullets-section .wrapper .bottom {
  display: flex;
  justify-content: space-between;
}
.home-main .bullets-section .wrapper .bottom article {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.home-main .bullets-section .wrapper .bottom article h3 {
  font-size: 1.5rem;
}
.home-main .bullets-section .wrapper .bottom article p {
  color: #868D97;
  font-size: 1.25rem;
}
.home-main .bullets-section .wrapper .bottom .border {
  border-left: 1px solid #DDD8D2;
  margin-left: 7.5697211155%;
  margin-right: 6.9057104914%;
}
.home-main .separator-section {
  background: var(--Gradients-Brand-gradient, linear-gradient(90deg, #D8FFB5 0%, #FFD6C2 50%, #EADCF8 100%));
  padding: 7.813rem 0;
  width: 97.0833333333vw;
  display: flex;
  justify-content: center;
  border-radius: 4rem;
  align-self: center;
  margin-top: 4rem;
}
.home-main .separator-section h2 {
  font-size: 3rem;
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  color: #122335;
  text-align: center;
  width: 92%;
  max-width: 57.313rem;
}
.home-main .ui-show-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10rem;
  margin-bottom: 4rem;
}
.home-main .ui-show-section .screens-wrap {
  padding-bottom: 2rem;
  padding-top: 5.625rem;
  background-color: #FCFBFA;
  width: 94.125rem;
  max-width: 78%;
  border-radius: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.125rem;
}
.home-main .ui-show-section .screens-wrap .screens {
  width: 65%;
  aspect-ratio: 973/547;
  position: relative;
}
.home-main .ui-show-section .screens-wrap .screens img {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-30%) scale(0);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.home-main .ui-show-section .screens-wrap .screens img.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.home-main .ui-show-section .screens-wrap nav {
  height: 2.375rem;
  padding-inline: 0.75rem;
  align-items: center;
  gap: 0.563rem;
  display: flex;
  border-radius: 2rem;
  background: rgba(243, 240, 236, 0.48);
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.09) inset, 0 4px 4px 0 rgba(255, 255, 255, 0.09) inset;
}
.home-main .ui-show-section .screens-wrap nav button {
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
  background-color: #EAE6E0;
  border: 0;
  outline: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: width 0.35s ease, background-color 0.25s ease;
}
.home-main .ui-show-section .screens-wrap nav button span {
  position: absolute;
  inset: 0;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background-color: #868D97;
  display: block;
}
.home-main .ui-show-section .screens-wrap nav button:hover {
  background-color: #d7d1ca;
}
.home-main .ui-show-section .screens-wrap nav button.active {
  width: 4.125rem;
}
.home-main .ui-show-section .screens-wrap nav button.active span {
  animation-name: screenIndicator;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes screenIndicator {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.home-main .ui-show-section .bottom {
  margin-top: 2rem;
  width: 94.125rem;
  max-width: 78%;
  display: flex;
  gap: 2.6560424967%;
}
.home-main .ui-show-section .bottom p {
  max-width: 90%;
  font-size: 0.875rem;
  color: #868D97;
  font-weight: 400;
}
.home-main .ui-show-section .bottom svg {
  flex-shrink: 0;
}
.home-main .ui-show-section .bottom a {
  margin-left: auto;
}
.home-main .stored-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20.25rem 0 0 0;
}
.home-main .stored-section .container {
  width: 100%;
  width: 78.5%;
  max-width: 155vh;
  overflow: hidden;
  gap: 3rem;
  display: flex;
  flex-direction: column;
}
.home-main .stored-section .container .app-preview {
  background-color: #FFCD5C;
  width: 100%;
  aspect-ratio: 1506/742;
  border-radius: 2.25rem;
  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.25rem 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.5rem;
  bottom: 1.5rem;
  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: 3rem;
}
.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.875rem;
}
.home-main .newsletter-section {
  display: flex;
  width: 100%;
  background-color: #122335;
  padding: 7.75rem 0;
  gap: 8.5%;
  padding-left: 10.78%;
}
.home-main .newsletter-section h2 {
  color: white;
  font-weight: 600;
  max-width: 16.25rem;
  font-size: 1.5rem;
  margin-top: 0.542rem;
}
.home-main .newsletter-section form {
  width: 55.7%;
  display: flex;
  gap: 3rem;
}
.home-main .newsletter-section form .big-button {
  flex-shrink: 0;
  height: fit-content;
  margin-top: 1.5rem;
}
.home-main .newsletter-section form .left .top {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.home-main .newsletter-section form .left .top button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.25rem;
  border: 0;
}
.home-main .newsletter-section form .left .top button span {
  color: white;
  font-size: 1.125rem;
  font-weight: 500;
}
.home-main .newsletter-section form .left .top button {
  box-shadow: inset 0 0 0 1px #868D97;
  padding-inline: 1.25rem;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 1rem;
  cursor: pointer;
}
.home-main .newsletter-section form .left .top button:hover {
  background-color: white;
  box-shadow: 0 3px 2px 0 rgba(255, 255, 255, 0.24) inset, 0 -3px 2px 0 rgba(0, 0, 0, 0.24) inset;
}
.home-main .newsletter-section form .left .top button:hover span {
  color: #122335;
}
.home-main .newsletter-section form .left .top button.disabled {
  pointer-events: none;
  opacity: 0.4;
}
.home-main .newsletter-section form .left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.home-main .newsletter-section form .left .check-wrap {
  display: flex;
  gap: 1.5rem;
  max-width: 44.688rem;
  width: 40vw;
}
.home-main .newsletter-section form .left .check-wrap p {
  font-weight: 600;
  font-size: 0.875rem;
  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 path {
  fill: #122335;
  opacity: 0;
  transition: 0.3s all ease-out;
}
@media (min-width: 1020px) {
  .home-main .newsletter-section form .left .check-wrap .checkbox:hover span {
    background-color: #868D97;
  }
  .home-main .newsletter-section form .left .check-wrap .checkbox:hover svg path {
    opacity: 1;
    fill: white;
  }
}
.home-main .newsletter-section form .left .check-wrap .checkbox input:checked + span {
  border: 0;
  box-shadow: none;
  background-color: white;
}
.home-main .newsletter-section form .left .check-wrap .checkbox input:checked + span svg {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.home-main .newsletter-section form .left .check-wrap .checkbox input:checked + span svg path {
  opacity: 1;
  fill: #122335;
}
.home-main .newsletter-section form .newsletter-input-wrap {
  border-radius: 1rem;
  position: relative;
  border: 1px solid #868D97;
  height: 3.25rem;
  display: flex;
  transition: 0.1s ease-out all;
  flex: 1;
  max-width: 44.688rem;
  width: 40vw;
}
.home-main .newsletter-section form .newsletter-input-wrap input {
  color: white;
  outline: 0;
  border: 0;
  width: 100%;
  height: 100%;
  padding-inline: 1.125rem;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1.125rem;
  caret-color: #7CC6FF;
  border-radius: 1rem;
}
.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.125rem;
  color: white;
  font-weight: 500;
  position: absolute;
  left: 1.125rem;
  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: 5rem;
    padding-bottom: 6rem;
  }
  .home-main .hero .screens-slider-container .screens img {
    width: 84.5vw;
    max-width: 400px;
  }
  .home-main .hero .screens-slider-container .gradient {
    height: 5.25rem;
    margin-top: -3rem;
  }
  .home-main .hero .gradient {
    bottom: -10px;
  }
  .home-main .hero article {
    padding: 3rem 5.5% 8rem 5.5%;
  }
  .home-main .hero article h1 {
    font-size: 2.25rem;
  }
  .home-main .hero article h1 br {
    display: none;
  }
  .home-main .hero article p {
    font-size: 1.231rem;
    margin: 1.5rem 0 2.25rem 0;
    font-weight: 400;
    color: #122335;
  }
  .home-main .hero article nav {
    gap: 1.125rem;
    width: 100%;
    justify-content: center;
  }
  .home-main .team-section {
    padding-inline: 2.27%;
    padding-bottom: 10.462rem;
  }
  .home-main .team-section .top {
    padding-inline: 7.61%;
    padding-bottom: 0;
    border-radius: 2.154rem;
  }
  .home-main .team-section .top .p2 {
    font-size: 1.077rem;
    font-weight: 500;
    color: #122335;
    margin-top: 3.692rem;
  }
  .home-main .team-section .top .left {
    width: 100%;
    max-width: 100%;
  }
  .home-main .team-section .top .left h2 {
    font-size: 2.462rem;
  }
  .home-main .team-section .top .left p {
    font-size: 1.385rem;
    margin-top: 2.462rem;
    margin-bottom: 1.846rem;
  }
  .home-main .team-section .top .team {
    margin-right: -9.5454545455vw;
    margin-top: 2.462rem;
    position: relative;
    padding-left: 7.61%;
    padding-right: calc(2.27vw + 7.61%);
    z-index: 10;
    top: 0;
    gap: 7.2vw;
    scroll-snap-type: x mandatory;
    margin-bottom: -18rem;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .home-main .team-section .top .team::-webkit-scrollbar {
    display: none;
  }
  .home-main .team-section .top .team {
    justify-content: flex-start;
    width: 97.73vw;
    scroll-padding-left: 7.3%;
  }
  .home-main .team-section .top .team .member {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 60vw;
    flex-direction: column;
  }
  .home-main .team-section .top .team .member img {
    border-radius: 2.462rem;
  }
  .home-main .team-section .top .team .member h4 {
    font-size: 1.385rem;
  }
  .home-main .team-section .top .team .member p {
    font-size: 1.231rem;
  }
  .home-main .team-section .top .team .member h3 {
    font-size: 1.077rem;
  }
  .home-main .team-section .bottom {
    margin-top: 16rem;
    padding-inline: 7.61%;
  }
  .home-main .team-section .bottom .row p {
    max-width: 100%;
    font-size: 1.077rem;
    font-weight: 500;
  }
  .home-main .products-section {
    padding: 4.923rem 7.2727272727vw;
  }
  .home-main .products-section .footer-p {
    font-size: 1.077rem;
  }
  .home-main .products-section .footer-a {
    font-size: 1.077rem;
    margin-top: 1.538rem;
    color: white;
    text-decoration: underline;
    font-weight: 500;
  }
  .home-main .products-section .top {
    height: auto;
    flex-direction: column;
    gap: 1.846rem;
    margin-bottom: 2.462rem;
  }
  .home-main .products-section .top p {
    width: 100%;
    font-size: 1.385rem;
  }
  .home-main .products-section .top .heading {
    width: 100%;
    min-width: 0;
    gap: 0.231rem;
  }
  .home-main .products-section .top .heading h2 {
    font-size: 1.231rem;
  }
  .home-main .products-section .top .heading h3 {
    font-size: 2.154rem;
  }
  .home-main .products-section .services li .preview {
    flex-direction: column;
    height: auto;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 1.538rem;
    gap: 1.385rem;
  }
  .home-main .products-section .services li .preview h4 {
    font-size: 1.385rem;
  }
  .home-main .products-section .services li .preview p {
    width: 100%;
    font-size: 1.077rem;
  }
  .home-main .products-section .services li .preview .decor {
    display: none;
  }
  .home-main .products-section .services li .preview svg {
    position: absolute;
    top: 1.538rem;
    right: 1.538rem;
  }
  .home-main .products-section .services li .view {
    border-radius: 1.846rem;
  }
  .home-main .products-section .services li .view .decor {
    width: 100%;
  }
  .home-main .products-section .services li .view .heading h3, .home-main .products-section .services li .view .heading span {
    font-size: 1.385rem !important;
  }
  .home-main .products-section .services li .view .row {
    position: relative;
    z-index: 2;
    flex-direction: column;
  }
  .home-main .products-section .services li .view .row p {
    font-size: 1rem;
    font-weight: 500;
  }
  .home-main .products-section .services li .view .row .small-button {
    align-self: flex-end;
  }
  .home-main .products-section .services li.active .view {
    gap: 3.077rem;
    padding: 1.538rem;
    height: auto;
  }
  .home-main .products-section .services li.active .view .heading svg {
    margin: 0 0.692rem;
  }
  .home-main .products-section .services li.active .view .row {
    gap: 3.077rem;
  }
  .home-main .products-section .services li.active .view .row p {
    width: 100%;
    max-width: 100%;
  }
  .home-main .reference-section {
    padding-top: 3rem;
    flex-direction: column;
  }
  .home-main .reference-section .img-container {
    width: 89.1%;
  }
  .home-main .reference-section article {
    padding-inline: 5.45%;
    margin-top: 0;
    max-width: 100%;
  }
  .home-main .reference-section article h2 {
    font-size: 2.462rem;
    margin: 3.077rem 0 1.846rem 0;
  }
  .home-main .reference-section article h3 {
    margin: 1.846rem 0 2.462rem 0;
    font-size: 1.231rem;
  }
  .home-main .reference-section article p {
    margin: 0;
    font-size: 1.385rem;
  }
  .home-main .reference-section article a {
    width: 100%;
  }
  .home-main .bullets-section {
    flex-direction: column;
    align-items: center;
    padding: 4.923rem 5.6818181818vw;
    gap: 2.75rem;
    margin: 0;
  }
  .home-main .bullets-section .wrapper {
    padding: 0;
    border: 0;
    width: 100%;
    gap: 1.846rem;
    max-width: 100%;
  }
  .home-main .bullets-section .wrapper .top {
    flex-direction: column;
    max-width: 100%;
    align-items: flex-start !important;
    justify-content: flex-start;
    width: 100%;
    min-width: auto;
    gap: 1.846rem;
  }
  .home-main .bullets-section .wrapper .top h2 {
    font-size: 2.154rem;
    max-width: 100%;
    max-width: 24rem;
  }
  .home-main .bullets-section .wrapper .top p {
    font-size: 1.385rem;
  }
  .home-main .bullets-section .wrapper .bottom {
    min-width: auto;
    flex-direction: column;
    max-width: 100%;
    align-items: center;
    width: 100%;
    gap: 0;
  }
  .home-main .bullets-section .wrapper .bottom article {
    gap: 1.385rem;
    width: 100%;
  }
  .home-main .bullets-section .wrapper .bottom article.center {
    border-top: 1px solid #DDD8D2;
    border-bottom: 1px solid #DDD8D2;
    padding: 2.25rem 0;
  }
  .home-main .bullets-section .wrapper .bottom article {
    padding: 2.25rem 0;
  }
  .home-main .bullets-section .wrapper .bottom article h3 {
    font-size: 1.538rem;
  }
  .home-main .bullets-section .wrapper .bottom article p {
    font-size: 1.385rem;
  }
  .home-main .separator-section {
    width: 95.4%;
    border-radius: 1.5rem;
    align-self: center;
    padding: 2rem 7.4%;
    min-height: 20.308em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }
  .home-main .separator-section h2 {
    font-size: 2.154rem;
  }
  .home-main .ui-show-section {
    margin-top: 2rem;
    padding-top: 5rem;
    margin-bottom: 8rem;
  }
  .home-main .ui-show-section .screens-wrap {
    width: 100%;
    max-width: 100%;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    gap: 3.077rem;
  }
  .home-main .ui-show-section .screens-wrap svg {
    align-self: flex-start;
    margin-left: 21vw;
  }
  .home-main .ui-show-section .screens-wrap .screens {
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    gap: 5.4vw;
    padding-inline: 5vw;
    scroll-padding-left: 5vw;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .home-main .ui-show-section .screens-wrap .screens::-webkit-scrollbar {
    display: none;
  }
  .home-main .ui-show-section .screens-wrap .screens .screen {
    width: 81vw;
    flex-shrink: 0;
    padding: 3.231rem 6.1%;
    background-color: #FCFBFA;
    border-radius: 1.846rem;
    scroll-snap-align: start;
  }
  .home-main .ui-show-section .screens-wrap .screens .screen img {
    opacity: 1;
    transform: scale(1);
    position: static;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
  }
  .home-main .ui-show-section .bottom {
    margin-top: 1.846rem;
    flex-direction: column;
    width: 90%;
    max-width: 100%;
    gap: 3.077rem;
  }
  .home-main .ui-show-section .bottom p {
    font-size: 1rem;
    width: 100%;
    max-width: 100%;
  }
  .home-main .ui-show-section .bottom a {
    width: 100%;
    justify-content: center;
    height: 4rem;
  }
  .home-main .ui-show-section .bottom a span {
    font-size: 1.385rem;
  }
  .home-main .stored-section {
    flex-direction: column;
    align-items: center;
    padding: 9.25rem 0 0 0;
  }
  .home-main .stored-section svg {
    margin-bottom: 2.25rem;
  }
  .home-main .stored-section .container {
    width: 100%;
    gap: 2.25rem;
  }
  .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.75rem 3.5%;
    background-color: #FFCD5C;
    border-radius: 1.125rem !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.25rem;
    aspect-ratio: 372/209;
  }
  .home-main .stored-section .container article {
    flex-direction: column;
    padding-inline: 5.5%;
    align-items: center;
    gap: 1.125rem;
  }
  .home-main .stored-section .container article p {
    text-wrap: wrap !important;
    text-align: center;
    max-width: 100% !important;
  }
  .home-main .cta {
    background-size: contain !important;
    overflow: hidden;
    position: relative;
    background-image: none !important;
    padding: 6rem 3%;
    background: linear-gradient(180deg, #F1F4F9 50%, #FFF 100%) !important;
    border-radius: 2.154rem;
    width: 97%;
    margin: 0 0 10.462rem 0;
  }
  .home-main .cta .decor {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: 100%;
    display: none;
    transform: translate(-50%, -50%);
  }
  .home-main .cta h2, .home-main .cta a {
    position: relative;
    z-index: 2;
  }
  .home-main .cta h2 {
    font-size: 2.154rem !important;
  }
  .home-main .contact-section {
    padding: 9.25rem 5.9% 7rem 5.9%;
  }
  .home-main .contact-section h2 {
    font-size: 2.25rem;
  }
  .home-main .contact-section .contacts-row {
    margin-top: 7rem;
    flex-direction: column !important;
    padding: 0;
    gap: 1.5rem;
  }
  .home-main .contact-section .contacts-row .contact {
    display: flex;
    flex-shrink: 0;
    max-width: 100%;
    min-height: 4rem;
    padding-inline: 1.625rem;
  }
  .home-main .contact-section .contacts-row .contact .left {
    gap: 1.125rem;
  }
  .home-main .contact-section .contacts-row .contact .left svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .home-main .contact-section .contacts-row .contact .left span {
    font-size: 1rem;
  }
  .home-main .contact-section .contacts-row .contact svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .home-main .contact-section .contacts-row .contact {
    height: 4rem;
    border-radius: 1.5rem;
  }
  .home-main .newsletter-section {
    padding: 4.538rem 5.9%;
    flex-direction: column;
  }
  .home-main .newsletter-section h2 {
    max-width: 100%;
    margin: 0;
    font-size: 2.462rem;
    text-align: center;
  }
  .home-main .newsletter-section form {
    margin-top: 2.462rem;
    flex-direction: column;
    width: 100%;
  }
  .home-main .newsletter-section form .left {
    width: 100%;
    gap: 0;
  }
  .home-main .newsletter-section form .left .check-wrap {
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    margin-top: 2.462rem;
  }
  .home-main .newsletter-section form .left .check-wrap p {
    font-size: 1rem;
    font-weight: 500;
  }
  .home-main .newsletter-section form .left .top button {
    width: 100%;
    text-align: center;
    height: 4rem;
    border-radius: 1.231rem;
  }
  .home-main .newsletter-section form .left .top button span {
    font-size: 1.385rem;
  }
  .home-main .newsletter-section form .left .top {
    flex-direction: column;
    gap: 1.538rem;
  }
  .home-main .newsletter-section form .left .top .newsletter-input-wrap {
    border-radius: 1.385rem;
    height: 4rem;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
  }
  .home-main .newsletter-section form .left .top .newsletter-input-wrap .placeholder {
    font-size: 1.231rem;
    left: 1.615rem;
  }
  .home-main .newsletter-section form .left .top .newsletter-input-wrap input {
    font-size: 1.231rem;
    border-radius: 1.385rem;
    padding: 1.077rem 1.615rem;
  }
}
.legal-main {
  padding: 8.875rem 10.7%;
  width: 100%;
  display: flex;
  gap: 9%;
  position: relative;
}
.legal-main .heading {
  max-width: 22.813rem;
}
.legal-main .heading h1 {
  font-family: "Clash Display", sans-serif;
  font-size: 2.25rem;
  font-weight: 500;
  color: #122335;
}
.legal-main .heading {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.legal-main .right {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.legal-main .right nav {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}
.legal-main .right nav .small-button {
  background-color: #F1F4F9;
}
.legal-main .right nav .small-button span {
  color: #122335;
}
.legal-main .right nav .small-button svg path {
  fill: #122335;
}
.legal-main .right nav .small-button.active {
  pointer-events: none;
}
.legal-main .right nav .small-button.active, .legal-main .right nav .small-button:hover {
  background-color: #25364A;
}
.legal-main .right nav .small-button.active span, .legal-main .right nav .small-button:hover span {
  color: white;
}
.legal-main .right nav .small-button.active svg path, .legal-main .right nav .small-button:hover svg path {
  fill: white;
}
.legal-main .right .legal-heading {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 3.125rem;
}
.legal-main .right .legal-heading span {
  font-weight: 600;
  color: #868D97;
  font-size: 1rem;
}
.legal-main .right .legal-heading .left {
  display: flex;
  flex-direction: column;
  gap: 0.563rem;
}
.legal-main .right .legal-heading .left h2 {
  font-size: 2rem;
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  color: #122335;
}
.legal-main .right .legal-heading .left h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #868D97;
}
.legal-main .right .content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.legal-main .right article .reset-cookies-form {
  display: flex;
}
.legal-main .right article .reset-cookies-form button {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  outline: none;
  font-size: 1rem;
  color: #53ACF0;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}
.legal-main .right article .reset-cookies-form button:hover {
  color: #1A85D6;
}
.legal-main .right article h4 {
  color: #122335;
  font-size: 1.25rem;
  font-weight: 600;
}
.legal-main .right article p.main-p {
  font-size: 1.25rem;
}
.legal-main .right article p {
  color: #868D97;
}
.legal-main .right article p a {
  color: #53ACF0;
  text-decoration-line: underline;
  font-weight: 600;
}
.legal-main .right article p a:hover {
  color: #1A85D6;
}

@media (max-width: 1020px) {
  .legal-main {
    flex-direction: column;
    padding: 4rem 5.6%;
    align-items: center;
  }
  .legal-main .heading h1 {
    text-align: center;
    width: 100%;
  }
  .legal-main .right nav {
    margin: 2.25rem 0;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .legal-main .right nav::-webkit-scrollbar {
    display: none;
  }
  .legal-main .right nav {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-inline: 5.6%;
    scroll-padding-left: 5.6%;
    gap: 1.5rem;
  }
  .legal-main .right nav .small-button span {
    text-wrap: nowrap;
  }
  .legal-main .right .legal-heading {
    gap: 1rrem;
    flex-wrap: wrap;
  }
  .legal-main .right .legal-heading .left h2 {
    font-size: 1.5rem;
  }
  .legal-main .right .legal-heading .left h3 {
    font-size: 0.813rem;
  }
  .legal-main .right .legal-heading span {
    text-wrap: nowrap;
    align-self: flex-end;
    font-size: 0.813rem;
  }
  .legal-main .right article {
    margin-bottom: 4rem;
  }
  .legal-main .right article .main-p {
    font-size: 1.125rem !important;
  }
  .legal-main .right article h4 {
    font-size: 1.125rem;
  }
  .legal-main .big-button {
    padding: 1.125rrem;
  }
  .legal-main .big-button span {
    font-size: 1rrem !important;
  }
}
.contact-main {
  position: relative;
  z-index: 2;
  background-color: white;
}
.contact-main .contact-section .fade-decor {
  position: absolute;
  bottom: 100%;
  width: 100%;
  height: 4rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFF 100%);
}
.contact-main .contact-section {
  position: relative;
  padding: 12.25rem 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-main .contact-section h2 {
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  font-size: 2.5rem;
  color: #122335;
  max-width: 53.75rem;
  text-align: center;
  margin-bottom: 6.063rem;
}
.contact-main .contact-section .contacts-row {
  width: 100%;
  padding-inline: 4%;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
.contact-main .contact-section .contacts-row .contact {
  box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.24) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.24) inset;
  max-width: 42rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2.375rem 0 2rem;
  background-color: #F1F4F9;
  flex: 1;
  height: 6rem;
  border-radius: 2.25rem;
  transition: all 0.3s ease-out;
}
.contact-main .contact-section .contacts-row .contact:hover {
  background-color: #D6EBFF;
}
.contact-main .contact-section .contacts-row .contact .left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.contact-main .contact-section .contacts-row .contact .left span {
  font-size: 1.375rem;
  font-weight: 500;
  color: #122335;
}
.contact-main .top-section {
  padding-top: 10.063rem;
  padding-bottom: 9.063rem;
  width: 100%;
  background-size: cover;
  background-position: top center;
  padding-inline: 10%;
  gap: 7.3%;
  display: flex;
}
.contact-main .top-section .left {
  display: flex;
  flex-direction: column;
  max-width: 22.813rem;
  gap: 2.5rem;
}
.contact-main .top-section .left h1 {
  font-size: 2.25rem;
  color: #122335;
  font-weight: 500;
  font-family: "Clash Display";
}
.contact-main .top-section .left p {
  font-size: 1.25rem;
  color: #122335;
}
.contact-main .top-section form {
  padding: 3rem;
  width: 100%;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.16) inset, 0 2px 4px 0 rgba(255, 255, 255, 0.16) inset, 0 2px 16px 0 rgba(0, 0, 0, 0.04);
  background-color: white;
  border-radius: 4rem;
}
.contact-main .top-section form .big-button {
  align-self: flex-end;
  margin-top: 3rem;
  margin-left: auto;
}
.contact-main .top-section form h2 {
  color: #122335;
  font-family: "Clash Display";
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 3rem;
}
.contact-main .top-section form .input-row {
  display: flex;
  gap: 2.125rem;
  margin-bottom: 1.5rem;
}
.contact-main .top-section form .text-area-wrap {
  margin-bottom: 2rem;
  width: 100%;
  position: relative;
  display: flex;
  gap: 0.813rem;
  flex-direction: column;
}
.contact-main .top-section form .text-area-wrap label {
  color: #122335;
  margin-left: 6px;
}
.contact-main .top-section form .text-area-wrap textarea::-webkit-resizer {
  display: none;
}
.contact-main .top-section form .text-area-wrap textarea {
  width: 100%;
  padding: 1.125rem;
  resize: vertical;
  min-height: 11.375rem;
  max-height: 25rem;
  border-radius: 1rem;
  border: 0;
  outline: 0;
  overflow-y: hidden;
  font-size: 1.125rem;
  color: #122335;
}
.contact-main .top-section form .text-area-wrap textarea ::placeholder {
  font-weight: 400;
  color: #868D97;
}
.contact-main .top-section form .text-area-wrap textarea:focus {
  box-shadow: inset 0 0 0 2px #7CC6FF;
}
.contact-main .top-section form .text-area-wrap textarea {
  background-color: #F8F6F2;
}
.contact-main .top-section form .text-area-wrap textarea:hover {
  background-color: #F3F0EC;
}
.contact-main .top-section form .text-area-wrap .resize-handle {
  cursor: grab;
  position: absolute;
  z-index: 3;
  bottom: 0;
  right: 0;
}
.contact-main .top-section form .input-wrap label {
  color: #122335;
  margin-left: 6px;
}
.contact-main .top-section form .input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.813rem;
  flex: 1;
  display: flex;
}
.contact-main .top-section form .input-wrap input {
  background-color: #F8F6F2;
  padding: 1.125rem;
  border: 0;
  flex: 1;
  border-radius: 1rem;
  font-size: 1.125rem;
}
.contact-main .top-section form .input-wrap input:hover {
  background-color: #F3F0EC;
}
.contact-main .top-section form .input-wrap input ::placeholder {
  font-weight: 400;
  color: #868D97;
}
.contact-main .top-section form .input-wrap input {
  color: #122335;
  border: 0;
  outline: 0;
}
.contact-main .top-section form .input-wrap input:focus {
  box-shadow: inset 0 0 0 2px #7CC6FF;
  border: 0;
  outline: 0;
}
.contact-main .top-section form .check-wrap {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
}
.contact-main .top-section form .check-wrap p {
  font-weight: 600;
  font-size: 0.875rem;
  color: #122335;
}
.contact-main .top-section form .check-wrap p a {
  color: #53ACF0;
  text-decoration: underline;
}
.contact-main .top-section form .check-wrap .checkbox {
  cursor: pointer;
  position: relative;
  height: fit-content;
}
.contact-main .top-section form .check-wrap .checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.contact-main .top-section form .check-wrap .checkbox label {
  height: fit-content;
}
.contact-main .top-section form .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;
}
.contact-main .top-section form .check-wrap .checkbox span svg path {
  fill: white;
  opacity: 0;
  transition: 0.3s all ease-out;
}
@media (min-width: 1020px) {
  .contact-main .top-section form .check-wrap .checkbox:hover span {
    background-color: #868D97;
  }
  .contact-main .top-section form .check-wrap .checkbox:hover svg path {
    opacity: 1;
    fill: white;
  }
}
.contact-main .top-section form .check-wrap .checkbox input:checked + span {
  border: 0;
  box-shadow: none;
  background-color: #122335 !important;
}
.contact-main .top-section form .check-wrap .checkbox input:checked + span svg {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.contact-main .top-section form .check-wrap .checkbox input:checked + span svg path {
  opacity: 1 !important;
  fill: white;
}

@media (max-width: 1020px) {
  .contact-main .top-section {
    flex-direction: column;
    background-position: top center;
    padding-inline: 1%;
    padding-top: 3.692rem;
    padding-bottom: 4.923rem;
  }
  .contact-main .top-section .left {
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding-inline: 3%;
    gap: 1.846rem;
  }
  .contact-main .top-section .left h1 {
    text-align: center;
    width: 100%;
    font-size: 2.462rem;
  }
  .contact-main .top-section .left p {
    text-align: center;
    max-width: 29.231rem;
    font-size: 1.538rem;
    margin-bottom: 1.846rem;
  }
  .contact-main .top-section form {
    margin-top: 3.692rem;
    border-radius: 2.769rem;
    padding: 2.769rem;
  }
  .contact-main .top-section form .input-row {
    flex-direction: column;
    gap: 1.538rem;
    margin-bottom: 1.538rem;
  }
  .contact-main .top-section form .input-row label {
    font-size: 1.077rem;
  }
  .contact-main .top-section form .input-row input {
    font-size: 1.231rem;
    padding: 1.077rem;
  }
  .contact-main .top-section form .text-area-wrap .resize-handle {
    display: none;
  }
  .contact-main .top-section form .text-area-wrap label {
    font-size: 1.077rem;
  }
  .contact-main .top-section form .text-area-wrap textarea {
    font-size: 1.231rem;
    padding: 1.077rem;
  }
  .contact-main .top-section form h2 {
    font-size: 2.154rem;
    margin-bottom: 2.462rem;
  }
  .contact-main .top-section form .check-wrap {
    gap: 1.231rem;
  }
  .contact-main .top-section form .check-wrap p {
    font-size: 0.923rem;
  }
  .contact-main .top-section form .check-wrap {
    margin-bottom: 1.231rem;
  }
  .contact-main .top-section form .big-button {
    width: 100%;
    justify-content: center;
  }
  .contact-main .contact-section {
    padding-inline: 5.6818181818%;
    padding-top: 9.538rem;
    padding-bottom: 9.538rem;
  }
  .contact-main .contact-section h2 {
    font-size: 2.462rem;
    margin-bottom: 4.923rem;
  }
  .contact-main .contact-section .contacts-row {
    flex-direction: column;
    padding: 0;
  }
  .contact-main .contact-section .contacts-row .contact {
    height: 4.923rem;
    flex-shrink: 0;
    flex: auto;
    border-radius: 1.846rem;
    padding-inline: 1.538rem;
  }
  .contact-main .contact-section .contacts-row .contact .left {
    gap: 1rem;
  }
  .contact-main .contact-section .contacts-row .contact .arrow {
    width: 1.846rem;
    height: 1.846rem;
  }
}