*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.75;
  min-height: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ol,
ul {
  list-style: none;
}

ol {
    list-style: auto;
    list-style-type: auto;
    padding-left: 1.6250em;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

canvas, svg {
  display: block;
  max-width: 100%;
  /* width: 100%; */
  height: auto;
}

img, picture, video {
  display: block;
  max-width: 100%;
  height: auto;
  background-color: rgb(0 0 0 / 2%);
  max-height: 75svh;
  width: auto;
  margin: 0 auto;
  border-radius: .75em .75em .75em .75em;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  font-size: 1.0000em;
  width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

fieldset {
  border: none;
}

textarea {
  resize: none;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1.0000em;
}

sub,
sup {
  vertical-align: baseline;
  position: relative;
}

sub {
  bottom: -0.2500em;
}

sup {
  top: -0.5000em;
}

button, .btn, a {
  cursor: pointer;
}

/* ----------------------------------------------------------------------------- */

:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --body: #ffffff;
  --black: rgb(0 0 0 / 100%);
  --white: rgb(255 255 255 / 100%);
  --blue: #007AFF;
  --red: #c50000;
  --green: #00ad00;
  --black-rgb: 0 0 0;
  --white-rgb: 255 255 255;
  --red-rgb: 197 0 0;
  --green-rgb: 0 173 0;
  --a: rgb(0 118 194);
  --link-color: rgb(24 90 188);
  --visited-link-color: rgb(104 29 168);


--logo-yellow: #CA9B24;
--logo-green: rgb(57 164 74 / 50%);

--logo-yellow: #b28e2c;
--logo-green: rgb(43 168 35 / 50%);
}




html {
  -webkit-text-size-adjust: 100%;
  font-feature-settings: normal;
  -webkit-tap-highlight-color: transparent;
  font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
  font-variation-settings: normal;
  line-height: 1.5;
  tab-size: 4;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  /* min-height: 100vh; */
  min-height: 100svh;
  /* padding: 2.7500em 0.5000em 12.5000em 0.5000em; */
  padding: 2.7500em 1em 12.5000em 1em;
  font-size: 16px;
  background-color: rgb(var(--white-rgb) / 100%);
  color: rgb(var(--black-rgb) / 94.12%);
}

.main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* max-width: 65ch; */
  max-width: 42.3750em;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  width: 100%;
  background: rgb(var(--white-rgb) / 100%);
  background: linear-gradient(180deg, rgb(var(--white-rgb) / 100%) 75%, transparent);
  position: sticky;
  top: 0;
  z-index: 99999;
  padding-top: 0.5000em;
  /* padding-bottom: 0.5000em; */
  padding-bottom: 1.25em;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

svg.logo {
  max-width: 2.2500em;
  transition: opacity .1s;
  text-shadow: 0.0000em 0.0000em rgba(0, 0, 0, 0.25);
}

svg.logo rect {
  fill: rgb(var(--white-rgb) / 100%);
}

svg.logo path {
  stroke-width: 1.7500em;
  stroke-width: 2em;
}

body.home svg.logo {
  max-width: 6.0000em;
  border-color: transparent;
}

body.home .logo path {
  stroke-width: 1.2500em;
  stroke-width: 1.500em;
}

svg.svg-back {
    height: 1.0000em;
    width: 1.0000em;
    transform: rotate(0deg);
    stroke-width: 2;
    color: rgb(var(--black-rgb) / 20%);
    fill: none;
    stroke: currentColor;
    position: absolute;
    opacity: 0;
    margin-left: -0.1875em;
    transition: opacity .1s;
}

a.back span.div-back-svg {
    height: 2.2500em;
    width: 2.2500em;
    max-width: 2.2500em;
    max-height: 2.2500em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 624.9375em;
    box-shadow: 0 0 0px 0.0625em rgb(var(--black-rgb) / 20%);
    transition: background-color .1s;
}

a.back:hover span.div-back-svg svg.logo {
    opacity: 0;
}

a.back:hover span.div-back-svg svg.svg-back {
    opacity: 1;
}

a.back:hover .div-back-svg {
     background-color: rgb(0 0 0 / 2%);
}

body.home h1 {
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: 500;
  background: linear-gradient(162deg, var(--logo-yellow) 10%, var(--logo-green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0.0000em 0.0000em rgba(0, 0, 0, 0.12);
  line-height: 1;
}

body.home h1 span {
  color: #757575;
  font-size: .666665em;
  letter-spacing: -0.0269em;
  font-weight: 600;
  text-transform: uppercase;
}

.logo defs linearGradient>stop {
  stop-color: var(--logo-yellow);
}

.logo defs linearGradient>stop+stop {
  stop-color: var(--logo-green);
}

button,
.btn {
  align-items: center;
  border-color: transparent;
  /* border-radius: 0.6250em; */
  border-radius: .75em;
  border-radius: 0.875em;
  border-width: 0.0625em;
  display: inline-flex;
  flex-shrink: 0;
  font-weight: 400;
  justify-content: center;
  padding: 0.692em 0.7500em;
  padding: 0.75em 1.25em;
  /* padding: 0.8em 0.7500em; */
  /* padding: 12px 20px; */
  pointer-events: auto;
  width: 100%;
  font-size: 1.0000em;
  border-style: solid;
  color: unset;
  transition: box-shadow .1s;
}

.btn-secondary {
  background-color: rgb(var(--white-rgb) / 100%);
}

.btn-secondary:hover {
  background-color: rgb(var(--black-rgb) / 5%);
  text-decoration: none;
  /* background: linear-gradient(162deg, #b28e2c63 50%, rgb(43 168 35 / 25%) 100%); */
}

.icon-sm {
  stroke-width: 2;
  flex-shrink: 0;
  height: 1.0000em;
  width: 1.0000em;
}

svg.icon-left {
    width: 1.35em;
    height: 1.35em;
}

svg.icon-left-wwoof {
    /* width: 1.875em; */
    /* height: 1.875em; */
    width: 2.5em;
    height: 2.5em;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.gap-4 {
  gap: 0.2500em;
}

.gap-8 {
  gap: 0.5000em;
}

.gap-16 {
  gap: 1.2000em;
}


.gap-34 {
  gap: 2.1250em;
}

.gap-44 {
  gap: 2.7500em;
}

.width-full {
  width: 100%;
}

.space-between {
  justify-content: space-between;
}

.btn-grup {
    gap: .25em;
}

.btn-grup a,
.btn-grup .btn {
  position: relative;
}

.btn-grup a:last-child:before,
.btn-grup .btn:last-child:before {
  background-color: transparent;
}

.btn-grup a.icon:before,
.btn-grup .btn.icon:before {
  width: calc(100% - 1.0000em - 1.3750em - 1.0000em);
  left: calc(1.0000em + 1.3750em + 1.0000em);
}

a.link, button.link {
    border-radius: 0.6250em;
    display: inline-flex;
    font-weight: 500;
    justify-content: center;
    padding: 0.5000em 0.7500em;
    align-items: center;
    gap: .5em;
    color: rgb(var(--black-rgb) / 54.12%);
    font-size: 0.8125em;
    font-size: 1em;
    transition: background-color 0.1s;
}

a.link svg, button.link svg {
    width: 1.25em;
    height: 1.25em;
    min-width: 1.25em;
}

a.link svg path, button.link svg path {
    fill: currentColor;
}

a.link:hover, button.link:hover {
    text-decoration: none;
    /* background-color: rgb(0 0 0 / 2%); */
    background-color: rgb(var(--black-rgb) / 5%);
}


footer.footer>div span {
  border-left: 0.0625em solid;
  border-color: rgb(var(--black-rgb) / 20%);
  height: 1.3750em;
  opacity: 0;
}

a {
  /* color: var(--a); */
  color: var(--link-color);
  position: relative;
}

a:visited {
  color: var(--visited-link-color);
}

a[target="_blank"]::after {
    content: '↗';
    display: inline;
    font-size: 0.8em;
    margin-left: 0.25em;
    top: -0.15em;
    vertical-align: baseline;
    white-space: nowrap;
    position: relative;
}

a.link[target="_blank"]:after {
    content: '';
} 

a:hover {
  text-decoration: underline;
}

p {
  padding: 0.5000em 0.9375em;
}

input#age {
  text-align: right;
  width: 100%;
}

.label-btn-grup {
  margin-left: 0.0000em;
  margin-bottom: 0.4375em;
  text-transform: uppercase;
  font-size: 0.8125em;
  /* color: #757575; */
  color: rgb(var(--black-rgb) / 54.12%);
  position: sticky;
  top: 3.2500em;
  z-index: 1;
  background-color: rgb(var(--white-rgb) / 100%);
  padding: 0.5000em;
  padding-top: 1.25em;
  padding-bottom: 1.25em;
  background: linear-gradient(180deg, rgb(var(--white-rgb) / 100%) 75%, transparent);
}

div#photo-container {
  width: 7.5em;
  height: 7.5em;
  margin: 0 auto;
  border-width: 0.0625em;
  border-style: solid;
  border-color: rgb(var(--black-rgb) / 20%);
  border-radius: 624.9375em;
  margin-bottom: 2.0000em;
  position: relative;
  overflow: hidden;
  background-color: rgb(var(--white-rgb) / 100%);
  transition: all .2s;
}

div#photo-container:hover {
  box-shadow: 0 0 0 0.1250em rgb(var(--white-rgb) / 100%), 0 0 0 0.1875em rgb(var(--black-rgb) / 20%);
  background-color: rgb(var(--black-rgb) / 5%);
}

button#enable-camera {
  height: 100%;
  display: flex !important;
  align-items: flex-end !important;
  position: absolute;
  z-index: 9999;
  top: 0;
}

button#enable-camera[style="display: flex;"] svg path {
  fill: white;
}

div#photo-container:before {
  content: 'Photo';
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125em;
  color: rgb(var(--black-rgb) / 54.12%);
  font-weight: 500;
  text-transform: uppercase;
  transition: opacity .15s;
}

.success-pass-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  background: hsl(0deg 0% 100% / 92%);
  backdrop-filter: blur(0.3750em);
  /* display: flex; */
  align-items: center;
  justify-content: center;
  display: none;
}

.videosuccessdiv {
  overflow: hidden;
  display: block;
  margin: 0 auto;
  margin-top: 0;
  position: relative;
  width: 100%;
  /* max-width: 37.5em; */
}

.videosuccessdiv video {
  border-radius: 1rem;
  filter: grayscale(.75);
  margin: 0 auto;
  width: 27.5em;
  max-width: 96%;
  height: auto;
}

.success-pass-video h1 {
  position: absolute;
  left: 0.5000em !important;
  font-weight: 600 !important;
  text-shadow: 0.0625em 0.0625em 0.0625em rgb(0 0 0 / 80%);
  /* color: #0a3161; */
  color: #b31942 !important;
  display: flex;
  background: white;
  border-radius: .75rem;
  text-transform: uppercase;
  backdrop-filter: blur(0.3125em);
  box-shadow: inset 0.0000em 0.0625em 0.1250em 0.0000em black;
  flex-direction: column;
  align-items: flex-start;
  line-height: .9;
  font-size: 2.25em !important;
  padding: .5em .75em;
  bottom: 0.25000em !important;
}

.success-pass-video h1 span {
  color: #0a3161 !important;
  font-size: unset !important;
  text-transform: uppercase !important;
}

.videosuccessdiv+h4 {
  color: #394457;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  font-weight: 700;
}

.videosuccessdiv+h4>span {
  display: flex;
  gap: 0.5000em;
}

label.toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.0000em;
  cursor: pointer;
}

label.toggle input {
  display: none;
}

label.toggle .circle {
  position: absolute;
  top: 0.0938em;
  left: 0.0938em;
  background: white;
  background: rgb(var(--white-rgb) / 100%);
  width: 1.0625em;
  height: 1.0625em;
  border-radius: 50%;
  transition: transform 0.3s;
}

label.toggle input[type="checkbox"]:checked+.slider .circle {
  transform: translateX(0.5938em);
}


label.toggle input[type="checkbox"]:checked+.slider {
  /* background-color: black; */
  /* border-color: black; */
  background-color: rgb(var(--black-rgb) / 94.12%);
  border-color: rgb(var(--black-rgb) / 94.12%);
}

label.toggle input[type="checkbox"]:checked~textarea,
#diet-other:checked~#diet-details {
  margin-top: 0.7500em;
  width: 100%;
  margin-bottom: 0.7500em;
}

span.toggle-label {
  display: inline-block;
  max-width: calc(100% - 5.3750em);
  padding: 0.0000em 0.0000em;
  position: relative;
  font-size: 1.0000em;
  color: rgb(var(--black-rgb) / 94.12%);
  transition: all .2s;
}



























.radio-custom {
  /* width: 1.2500em; */
  /* height: 1.2500em; */
  width: 1.75em;
  height: 1.75em;
  border: 0.0625em solid rgb(var(--black-rgb) / 20%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
  position: relative;
}

.radio-custom::after {
  content: "";
}

input[type="radio"]:checked+.radio-custom {
  /* border: 0.3750em solid black; */
  /* border: 0.50em solid black; */
  border: 0.50em solid rgb(var(--black-rgb) / 94.12%);
}

input[type="radio"]:checked+.radio-custom::after {
  transform: scale(1);
}








.btn-secondary.focus {
  box-shadow: inset 0 0 0 0.0625em rgb(var(--black-rgb) / 20%);
  background-color: rgb(var(--white-rgb) / 100%);
}

label.toggle+textarea {
  width: calc(100% - 3.5000em);
}

.consent-text {
  /* color: #757575; */
  color: rgb(var(--black-rgb) / 54.12%);
  display: block;
  font-size: 0.8313em;
  font-weight: 400;
}

.text-red {
  color: rgb(var(--red-rgb) / 100%);
}

.text-green,
.text-red.text-green {
  color: rgb(var(--green-rgb) / 100%);
}

.btn-primary {
  /* background-color: black; */
  background-color: rgb(var(--black-rgb) / 94.12%);
  color: rgb(var(--white-rgb) / 100%);
  font-size: 0.9375em;
  font-weight: 600;
  text-transform: uppercase;
}

.btn-primary:hover {
  box-shadow: 0 0 0 0.1250em white, 0 0 0.0000em 0.1875em black;
}

.btn-primary:active {
  box-shadow: 0 0 0 0.2500em white, 0 0 0.0000em 0.3125em black;
}

.btn.btn-secondary:active {
  box-shadow: 0 0 0 0.1250em rgb(var(--white-rgb) / 100%), 0 0 0.0000em 0.1875em rgb(var(--black-rgb) / 20%);
  z-index: 1;
}

:disabled {
  opacity: .05;
  cursor: not-allowed;
  /* color: white; */
}

div#video-container,
.success-pass-video {
  display: none;
  position: fixed;
  width: 100%;
  max-width: 100svw;
  max-height: 100svh;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(var(--white-rgb) / 100%);
  backdrop-filter: blur(1.5000em);
  z-index: 999999;
  margin: 0;
  padding: 0;
  height: 100%;
}

div#video-container:after,
div#video-container:before {
  content: '';
  background-color: rgb(255 255 255 / 50%);
  position: fixed;
  z-index: 1;
}

div#video-container:before {
  width: 0.0625em;
  height: 60%;
  top: 20%;
  left: 50%;
}

div#video-container:after {
  width: 60%;
  height: 0.0625em;
  top: 50%;
  left: 20%;
}

div#video-container video {
  position: absolute;
  width: 100svw;
  height: 100svh;
  object-fit: cover;
  margin: 0;
  max-height: none;
  border-radius: inherit;
}

button#capture {
  position: absolute;
  bottom: 0.5000em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  background-color: rgb(255 0 0 / 50%);
  backdrop-filter: blur(0.5000em);
  width: auto;
  font-size: 0.8313em;
  border-radius: 624.9375em;
  color: white;
}

button#capture:hover {
  box-shadow: none;
}

button#close-camera {
  position: fixed;
  z-index: 999;
  background-color: rgb(255 255 255 / 8%);
  backdrop-filter: blur(0.5000em);
  top: 0.5000em;
  right: 0.5000em;
  width: 2.0000em;
  height: 2.0000em;
  min-height: auto;
  max-height: 2.0000em;
  padding: 0;
  border-radius: 624.9375em;
}

button#close-camera svg {
  stroke-width: 1.5;
  flex-shrink: 0;
  height: 1.1250em;
  width: 1.1250em;
}

button#close-camera svg path {
  fill: white;
}

div#output {
  z-index: 1;
  position: relative;
  max-height: 7.5em;
}

div#output img {
    max-height: 7.5em;
    border-radius: inherit;
}

.personal-data {
  max-width: 27.5000em;
  position: relative;
}

hr {
  width: calc(100% - 1.7500em);
  margin: 3.0000em auto 3.0000em auto;
  border-top: 0.0625em solid;
  border-color: rgb(var(--black-rgb) / 5%);
}

body.profile hr {
  margin: 3.0000em auto 3.0000em auto;
}

strong {
  font-weight: 600;
}

ul {
  list-style: disc;
  list-style-type: disc;
  padding-left: calc(1.6250em * 1.75);
}

ul ul {
    list-style: circle;
    list-style-type: circle;
}

li {
  margin-bottom: 0.5000em;
  margin-top: 0.5000em;
  padding-left: 0.3750em;
}

/* otp */
body.otp {
  padding: 1em;
  justify-content: center;
  gap: 1.5000em;
}

.otp-container {
  text-align: center;
  gap: 1.5000em;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0 auto;
  height: calc(100svh - 2em);
  justify-content: center;
  align-items: center;
}

.otp-container h2 {
    display: none;
}

.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 0.6250em;
}

.otp-input {
  width: 1.5000em;
  height: 1.5000em;
  text-align: center;
  font-size: 1.5000em;
  border-radius: 624.9375em;
  outline: none;
  caret-color: transparent;
  transition: background-color 0.3s, border-color 0.3s;
  background-color: rgb(var(--white-rgb) / 100%);
  box-shadow: inset 0 0 0 .1em rgb(var(--black-rgb) / 20%);
  color: transparent;
}

.otp-input.filled {
  background-color: rgb(var(--black-rgb) / 100%) !important;
  box-shadow: inset 0 0 0 0em rgb(var(--black-rgb) / 20%);
}

.otp-input:focus {
  border-color: rgb(var(--black-rgb) / 100%);
  box-shadow: 0 0 0 0.1250em rgb(var(--white-rgb) / 100%), 0 0 0 0.1875em rgb(var(--black-rgb) / 20%);
  outline: none;
}

.error-message+.otp-inputs input.otp-input {
  box-shadow: 0 0 0 0.1250em rgb(var(--white-rgb) / 100%), 0 0 0 0.1875em rgb(var(--red-rgb) / 54.12%);
  background-color: rgb(var(--red-rgb) / 20%);
}

form#otp-form {
  display: flex;
  flex-direction: column;
}

.error-message {
  color: rgb(var(--red-rgb) / 100%);
  font-size: 0.8313em;
  order: 2;
  position: absolute;
  width: 100%;
  bottom: 0em;
}

.success-pass-video {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.videosuccessdiv video {
  border-radius: 0.6250em;
}

.hidden-submit {
  display: none;
}

label.toggle .slider {
  display: inline-block;
  position: relative;
  /* background: black; */
  background: rgb(var(--black-rgb) / 20%);
  /* width: 1.8750em; */
  /* height: 1.2500em; */
  width: 2.625em;
  height: 1.75em;
  border: 0.875em solid  rgb(var(--black-rgb) / 20%);
  border-radius: 624.9375em;
  cursor: pointer;
  transition: background 0.3s;
}

label.toggle .circle {
  display: inline-block;
  position: absolute;
  /* top: -0.5625em; */
  /* left: -0.5625em; */
  /* width: 1.1250em; */
  /* height: 1.1250em; */
  top: -0.8125em;
  left: -0.8125em;
  width: 1.625em;
  height: 1.625em;
  background: rgb(var(--white-rgb) / 100%);
  border-radius: 50%;
  border: 0.0000em solid rgb(var(--white-rgb) / 100%);
}

label.toggle input[type="checkbox"]:checked+.slider .circle {
  /* transform: translateX(0.6250em); */
  transform: translateX(0.875em);
  /* background: white; */
  /* border-color: white; */
  background: rgb(var(--white-rgb) / 100%);
  border-color: rgb(var(--white-rgb) / 100%);
}

svg.svg-more {
  height: 1.0000em;
  width: 1.0000em;
  transform: rotate(180deg);
  stroke-width: 0.125em;
  stroke-width: 0.15em;
  color: rgb(var(--black-rgb) / 45%);
  fill: none;
  stroke: currentColor;
  transition: transform .15s;
}

a:hover .svg-more {
    transform: rotate(180deg) translateX(-.5em);
}

label.gray {
  color: #757575;
}

.btn-primary.btn-danger:before {
  content: "";
  background: transparent;
  position: absolute;
  left: -0.2500em;
  top: -0.2500em;
  bottom: -0.2500em;
  right: -0.2500em;
  color: transparent;
  border: 0.0625em solid currentColor;
  border-radius: 624.9375em;
  transition: color .25s;
}

.btn-primary.btn-danger:hover:before {
  color: rgba(255, 0, 0, 0.5);
  border: 0.0625em solid currentColor;
  border-radius: 624.9375em;
}

body.home .main {
  padding: 2.7500em 0.5000em 2.7500em 0.5000em;
  height: calc(100% - 2.7500em);
  overflow-y: auto;
  scrollbar-width: none; /* Для Firefox */
  -ms-overflow-style: none; /* Для IE и Edge */
}

body.home .personal-data {
  max-width: 21.8750em;
}

body.home .content.width-full {
  margin-top: calc(2.7500em + 3.0000em);
  transition: margin-top .2s;
}

body.contact .content.width-full {
    margin-top: 0;
}

body.home a.btn.btn_a.relative.btn-secondary,
footer.rules a {
    font-weight: 500;
    box-shadow: 0 0 0 0.0625em rgb(var(--black-rgb) / 20%);
    /* background: rgb(var(--white-rgb) / 75%); */
    /* -webkit-backdrop-filter: grayscale(0) blur(10px); */
    backdrop-filter: grayscale(0) blur(10px);

}

body.home a.btn.btn_a.relative.btn-secondary:active,
footer.rules a:active {
  box-shadow: 0 0 0 0.1875em rgb(var(--white-rgb) / 100%), 0 0 0 0.2500em rgb(var(--black-rgb) / 20%);
}

.header h1 {
  font-size: 1.0625em;
  text-transform: uppercase;
  font-weight: 500;
  background: linear-gradient(162deg, var(--logo-yellow) 50%, var(--logo-green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  /* text-shadow: 0.0000em 0.0000em rgba(0, 0, 0, 0.25); */
  line-height: 1;
  top: auto;
  padding: inherit;
  letter-spacing: 0.02em;
}


ol.wwoofers-applications {
  list-style: auto;
}

ol.wwoofers-applications li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

ol.wwoofers-applications li button.btn.relative.btn-danger-outline {
  font-size: 0.8313em;
  border-color: rgb(var(--black-rgb) / 20%);
  padding: 0.2500em 0.5000em;
  min-height: auto;
  color: rgb(var(--red-rgb) / 100%);
}

ol.wwoofers-applications li button.btn.relative.btn-danger-outline:hover {
  border-color: rgb(var(--red-rgb) / 100%);
}

body.home {
  padding: 0;
  /* background-color: #fcfcfc; */
  max-height: 100svh;
  overflow-y: hidden;
}

.video-bg,
.video-bg video {
  display: none;
}

.flex.body-video .video-bg {
    width: 50%;
    /* order: 1; */
    border-radius: 1em 0 0 1em;
    /* overflow: hidden; */
    background-color: rgb(var(--white-rgb) / 100%);
    z-index: 1;
    /* min-width: 40vw; */
    height: auto;

}

.margin-top-96 {
    margin-top: 6em;
}

.max-width-375 {
    max-width: 23.4375em;
}

.margin-bottom-100 {
    margin-bottom: 1em;
}

.margin-24px-auto-48px-auto {
    margin: 1.5em auto 3em auto;
}

.max-width-440px {
    max-width: 27.5em;
}

.margin-bottom-16px {
    margin-bottom: 1em;
}

ol.all-wwoofers {
    max-width: 27.5000em;
    margin: 0 auto;
    width: 100%;
    padding-left: 0;
}

ol.all-wwoofers li {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 0.75em;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

ol.all-wwoofers li img {
    border: 0.0625em solid rgb(var(--black-rgb) / 20%);
    width: 4em !important;
    height: 4em !important;
    border-radius: 50%;
}

ol.all-wwoofers li img + div {
    flex-direction: column;
}

ol.all-wwoofers li img + div > a {
    font-size: 1.125em;
}

ol.all-wwoofers li img + div > a + form button {
    margin: 0;
    padding: 0;
    font-size: 0.83125em;
    color: #757575;
    width: auto;
}

li form {
    z-index: -1;
    opacity: 0;
    transition: all .1s;
    padding: 1em;
    display: none;
}

li.more-options form {
    z-index: 1;
    opacity: 1;
    display: block;
}


li form button {
    font-size: 0.83125em;
    color: rgb(var(--red-rgb) / 100%);
    padding: 1em;
    background-color: rgb(var(--red-rgb) / 5%);
    border: 0.0625em solid transparent;
    border-radius: 0.75em;
    font-weight: 500;
}

a.delete-link {
    width: 100%;
    padding: 1em;
    border: 0.0625em solid transparent;
    border-radius: 0.75em;
    justify-content: space-between;
    color: rgb(var(--black-rgb) / 94.12%);
    font-weight: 500;
}

a.delete-link:after {
    content:"";
    display:none;
}

a.delete-link span.delete-link-span {
    display: flex;
    align-items: center;
    gap: .75em;
}

a.delete-link:hover {
    background-color: rgb(0 0 0 / 2%);
    border: 0.0625em solid rgb(var(--black-rgb) / 20%);
}

li form button:hover {
    background-color: rgb(var(--red-rgb) / 8%);
    border: 0.0625em solid rgb(var(--red-rgb) / 20%);
}





.success-pass-video.frog {
    background-color: rgb(var(--white-rgb) / 100%);
}

.success-pass-video.frog .success-pass {
    width: 100%;
    height: 100%;
}

.success-pass-video.frog .videosuccessdiv video {
    width: 100%;
    filter: brightness(1.01);
    max-width: 100%;
    margin: auto;
    margin-left: 0;
    margin-bottom: 0;
    order: 3;
    border-radius: 0;
}

.success-pass-video.frog .success-pass .videosuccessdiv {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    height: 100%;
}

.success-pass-video.frog .videosuccessdiv video + div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    width: 100%;
    order: 2;
    padding: 1em;
    justify-content: flex-end;
    margin-bottom: 0;
    position: relative;
    top: 15svh;
    z-index: 1;
}

.success-pass-video.frog .videosuccessdiv video + div + div {
    width: 0;
}

.success-pass-video.frog .videosuccessdiv video + div h2 {
    color: rgb(var(--green-rgb) / 100%);
    font-size: 2em;
    font-weight: 500;
    padding: 0 0.425em;
}


a.back {
    text-decoration: none;
}

a.back h1 span:first-child,
a.back:hover h1 span:last-child {
    opacity: 1;
}

a.back:hover h1 span:first-child,
a.back h1 span:last-child {
    opacity: 0;
}


a.back h1 span:last-child,
a.back:hover h1 span:last-child {
    position: absolute;
    color: rgb(var(--black-rgb) / 20%);
    -webkit-text-fill-color: initial;
    text-transform: none;
    font-weight: 400;
}





figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    /* z-index: -1; */
    width: 100%;
    margin-block-start: 1em;
    margin-block-end: 2em;
}

li figure {
    max-width: calc(100% - 1.6250em - 0.3750em);
}

figcaption {
    color: rgb(var(--black-rgb) / 54.12%);
    color: rgb(var(--black-rgb) / 75%);
    padding: .5em 1em;
    padding: 1em 1em 0.5em 1em;
    text-align:center;
    font-size: 0.8125em;
    font-size: .9em;
    max-width: calc(100% - 0.75em - .75em);
    margin: 0 auto;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  display: block;
}

h2 {
  font-weight: bold;
  position: sticky;
  top: 1.5em;
  display: block;
  background-color: rgb(var(--white-rgb) / 100%);
  background: linear-gradient(180deg, rgb(var(--white-rgb) / 100%) 75%, transparent);
  padding-top: 1em;
  padding-bottom: 1.25em;
  z-index: 1;
}

span.v-guide {
    color: rgb(var(--black-rgb) / 54.12%);
    padding: .5em 1em;
    text-align: center;
    font-size: 0.8125em;
    font-weight: 600;
}

small {
    font-size: 0.8125em;
    color: rgb(var(--black-rgb) / 54.12%);
}


h1 { font-size: 1.375em; }
h2 {font-size: 1.25em;}
h3 {font-size: 1.125em;margin-block-start: 1.75em;margin-block-end: 0.5em;}
h4 {font-size: 1em;margin-block-start: 1em;margin-block-end: .25em;}
h5 { font-size: 0.875em; }
h6 { font-size: 0.8313em; }




footer.rules a {
    box-shadow: 0 0 0 0.0625em rgb(var(--black-rgb) / 20%), 0px .2em .6em rgb(var(--black-rgb) / 8%);
    background: rgb(var(--white-rgb) / 75%);
    -webkit-backdrop-filter: grayscale(0) blur(10px);
    backdrop-filter: grayscale(0) blur(10px);

}


footer.rules.flatbtn a {
    box-shadow: 0 0 0 0.0625em rgb(var(--black-rgb) / 20%), 0px 0em 0em rgb(var(--black-rgb) / 0%);
}







.btn-secondary > div > .flex.flex-col input,
.btn-secondary > div > .flex.flex-col .input {
    order: 1;
    opacity: 0;
    transition: all .2s;
    width: 100%;
}


.btn-secondary.focus > div > .flex.flex-col input,
.btn-secondary.focus > div > .flex.flex-col .input,
.btn-secondary.label-done > div > .flex.flex-col input,
.btn-secondary.label-done > div > .flex.flex-col .input {
    opacity: 1 !important;
}



.btn-secondary label {
    position: relative;
    top: .88em;
    transition: all .2s;
    min-height: 1.75em;
}

.btn-secondary.focus label,
.btn-secondary.label-done label {
    top: 0;
    font-size: 0.83125em;
    min-height: 2.1055em;
}




.btn-secondary > div > .flex.flex-col .toggle-container input,
.btn-secondary > div > .flex.flex-col .toggle-container .input,
.btn-secondary .toggle-container label,
.btn-secondary.focus .toggle-container label,
.btn-secondary.label-done .toggle-container label {
    top: 0;
    font-size: 1em;
    min-height: 1.75em;
}

.input.required + label:after, 
input[required] + label:after {
    content: '*';
    color: rgb(var(--red-rgb) / 100%);
    margin-left: 0.25em;
}

.btn-secondary.focus input[required] + label:after,
.btn-secondary.focus .input.required + label:after {
    content: 'required';
    background-color: rgb(var(--red-rgb) / 20%);
    padding: .25em .5em;
    border-radius: 1em;
    font-size: .75em;
    position: relative;
    top: -.15em;
    transition: color .2s, background-color .2s;
}



.input.required + label.gray:after, input[required] + label.gray:after {
    color: rgb(var(--green-rgb) / 90%);
    opacity: 0;
}


.btn-secondary.focus input[required] + label.gray:after, 
.btn-secondary.focus .input.required + label.gray:after {
    background-color: rgb(var(--green-rgb) / 15%);
}





footer {
    transition: all .4s;
}

footer.x3 {transform: translateY(200%);}

.videoiframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 = 9 / 16 = 0.5625 * 100 */
    height: 0;
    overflow: hidden;
    border-radius: .75em .75em .75em .75em;
}

.videoiframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




.contact-page {
    position: absolute;
    opacity: 0;
    width: 100%;
    z-index: -1;
    transition: all .2s;
    transform: scale(0.95);
    flex-direction: column;
    gap: .5em;
    display: none;
}


body.contact .contact-page {
    opacity: 1;
    z-index: 9999;
    transform: scale(1);
    position: relative;
    display: flex;
    margin-bottom: 3em;
}

body.contact .admin {
    opacity: 0;
    transform: scale(.95);
    z-index: -1;
    transition: all .2s;
    position: absolute;
}

body .admin {
    transition: all .2s;
    transform: scale(1);
}

body.home .contact-page a.btn.btn_a.relative.btn-secondary {
    font-weight: 400;
    box-shadow: none;
}

button.link span:first-child {
    opacity: 1;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.link span:last-child {
    opacity: 0;
    border: none;
    position:absolute;
    display: flex;
    align-items: center;
    /* color: rgb(var(--red-rgb) / 50%); */
    color: rgb(var(--black-rgb) / 75%);
    /* color: #555; */
}

body.contact button.link span:first-child {
    opacity: 0;
    
}

body.contact button.link:hover{
  background-color: rgb(var(--red-rgb) / 5%);
}
body.contact button.link span:last-child {
    opacity: 1;
}

img[alt="ava"] {
    width: 3.5em;
    height: 3.5em;
    border-radius: 3em;
}
.join {
    width: 4em;
    height: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3em;
}

span.local-time {
    display: none;
    color: rgb(var(--black-rgb) / 54.12%);
    font-size: 0.8125em;
    font-weight: 400;
    margin-top: -0.5em;
}

body.contact span.local-time {
    display: block;
}

.active-label {
    font-weight: 600;
}

label.toggle + textarea {
    margin-top: .75em;
}

svg.icon-phone {
    height: 1em;
    width: 1em;
    transform: rotate(-90deg);
    color: rgb(var(--black-rgb) / 54.12%);
    fill: currentColor;
}

body.wwoofers-list .wwoofer-info {
    display: flex;
    align-items: center;
    gap: .75em;
}

body.wwoofers-list ol.all-wwoofers li {
    display: flex;
    justify-content: flex-start;
}

body.wwoofers-list ol.all-wwoofers li {
    width: 100%;
    padding: 1em;
    border: 0.0625em solid transparent;
    border-radius: 0.75em;
    justify-content: space-between;
    color: rgb(var(--black-rgb) / 94.12%);
    font-weight: 500;
}

body.wwoofers-list .wwoofer-info img + span {
    justify-content: space-between;
    gap: 1em;
}

span.nation {
    display: none;
}

img[alt="Automated aquaponic system components developed by Aftaz Growing Systems"] {
    max-width: 14em;
}

/* @media (min-width: 768px)  */

@media (min-aspect-ratio: 1/1) {

.flex.body-video .video-bg + div {
        border-radius: 1.5em;
        background-color: rgb(var(--white-rgb) / 100%);
        order: 0;
    
    }
  
  .video-bg {
        position: relative;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0.0000em;
        right: 0;
        bottom: 0;
        order: 1;
        overflow: hidden;
        /* display: flex; */
        align-items: center;
        justify-content: center;
    
    }

  .video-bg,
  .video-bg video {
        display: flex;
    
    }

  .video-bg .video-container {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.0000em;
    overflow: hidden;
  }

  .video-bg .video-container:after {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    height: 100%;
    width: 100%;
  }


  .video-bg .video-container video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    bottom: 0%;
    right: 0;
    max-height: none;
    border-radius: initial;
    background-color: transparent;
  }

  .header {
    width: calc(100% + 5.6250em);
    gap: 1.5000em;
  }


  .success-pass-video.frog .videosuccessdiv video {
      width: 40%;
      order: 0;
      background-color: transparent;
  }

  .success-pass-video.frog .success-pass .videosuccessdiv {
      flex-direction: row;
  }

  .success-pass-video.frog .videosuccessdiv video + div {
      width: 40%;
      top: auto;
      justify-content: center;
      order: 1;
  }

  .success-pass-video.frog .videosuccessdiv video + div + div {
      width: 20%;
      order: 3;
  }

}


@media (min-width: 1440px) {

  body {
    /* font-size: 20px; */
    font-size: 16px;
  }

}

@media (min-width: 1980px) {

  body {
    /* font-size: 24px; */
    font-size: 20px;
  }

}

@media print {


  body {
    font-size: 14px !important;
    background-color: white !important;
  }

  .logo defs linearGradient>stop {
    stop-color: black !important;
  }

  .logo defs linearGradient>stop+stop {
    stop-color: white !important;
  }

  .header,
  .label-btn-grup {
    position: relative;
    top: 0.0000em;
  }

  .header h1 {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    color: #757575 !important;
    text-shadow: none !important;
  }

  .no-print {
    display: none !important;
  }

  .print-new-page {
    page-break-before: always;
    break-before: page;
  }

  .avoid-break {
    break-inside: avoid;
    page-break-inside: avoid;
  }

}





@media (prefers-color-scheme: dark) {
  
  :root {
    --black-rgb: 255 255 255;
    --white-rgb: 0 0 0;
    --a: rgb(0 153 255);
    --link-color: #8ab4f8;
    --visited-link-color: rgb(215 174 251);
  }

  body.contact button.link:hover {
      background-color: rgb(var(--red-rgb) / 15%);
  }
  
}






.avoid-break.width-full.photodiv {
    position: relative;
    top: 0.5000em;
    left: 0;
}





.avoid-break.width-full.photodiv.lip-photo button#enable-camera {
    align-items: center !important;
}

.avoid-break.width-full.photodiv.lip-photo div#photo-container {
    width: 3.35em;
    height: 3.35em;
    margin-bottom: 0em;
}

.avoid-break.width-full.photodiv.lip-photo div#photo-container:before {
    opacity: 0;
    display: none;
}

.avoid-break.width-full.photodiv.lip-photo {
    width: auto;
    margin-left: auto;
    margin-right: 0;
    position: sticky;
    z-index: 99999;
}

.avoid-break.width-full.photodiv.lip-photo div#photo-container div#output {
    max-height: 3.35em;
}

.avoid-break.width-full.photodiv.lip-photo div#photo-container div#output img {
    max-height: 3.35em;
}

.avoid-break.width-full.photodiv.lip-photo.take-photo div#photo-container {
    border-color: rgb(var(--red-rgb) / 100%);
    animation: pulse-shadow 1.5s infinite ease-in-out;
}

@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 .1em rgb(var(--red-rgb) / 50%);
    }
    50% {
        box-shadow: 0 0 .6em rgb(var(--red-rgb) / 90%);
    }
    100% {
        box-shadow: 0 0 .1em rgb(var(--red-rgb) / 50%);
    }
}

p#photo-warning {
    color: rgb(var(--red-rgb) / 100%);
    background: linear-gradient(180deg, rgb(var(--red-rgb) / 5%), transparent);
    margin-bottom: 2em;
    border-top: 0.0625em solid rgb(var(--red-rgb) / 50%);
    font-size: 0.8313em;
}

button#save-button span:first-child,
button#save-button.take-photo-fuck span:last-child {
    display: block;
}

button#save-button.take-photo-fuck span:first-child,
button#save-button span:last-child {
    display: none;
}




.insta-div {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.insta-div a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    color: white;
    font-size: 1.25em;
    font-weight: 500;
    gap: .5em;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgb(0 0 0 / 50%), transparent);
    opacity: 0;
    transition: opacity .15s;
}

.insta-div a span {
    gap: .25em;
    margin-bottom: 0em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-bottom: 2em;
    transition: padding-bottom .15s;
}

.insta-div a span svg {
    width: 3em;
}

.insta-div a:hover {
    opacity: 1;
}

.insta-div a:hover:after {
    content: '';
}

.insta-div a:hover span {
    padding-bottom: 4.6em;
}



body.home.contact .personal-data p {
    display: none;
}



body.home.contact a.link {
    width: 100%;
    padding: 0.5em 3.75em;
}

body.home.contact footer.footer {
    position: sticky;
    padding: 5em 0.25em 0.25em 0.25em;
    bottom: 0em;
    background: linear-gradient(0deg, rgb(var(--white-rgb) / 75%), transparent);
    /* -webkit-backdrop-filter: grayscale(0) blur(10px); */
    /* backdrop-filter: grayscale(0) blur(4px); */
    z-index: 999999;
}

body.home.contact .main {
    height: calc(100% - 0em);
    padding: 15em 0.5000em 5em 0.5000em;
}


.framer-blur-container {
    bottom: 0;
    cursor: none;
    flex: none;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: -1;
}


        .framer-blur-container div {
            position: absolute;
            inset: 0;
            border-radius: 0px;
            pointer-events: none;
        }
        .framer-blur-container div:nth-child(1) {
            z-index: 1;
            backdrop-filter: blur(0.078125px);
            -webkit-backdrop-filter: blur(0.078125px);
            mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%);
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%);
        }
        .framer-blur-container div:nth-child(2) {
            z-index: 2;
            backdrop-filter: blur(0.15625px);
            -webkit-backdrop-filter: blur(0.15625px);
            mask-image: linear-gradient(rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%);
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%);
        }
        .framer-blur-container div:nth-child(3) {
            z-index: 3;
            backdrop-filter: blur(0.3125px);
            -webkit-backdrop-filter: blur(0.3125px);
            mask-image: linear-gradient(rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%);
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%);
        }
        .framer-blur-container div:nth-child(4) {
            z-index: 4;
            backdrop-filter: blur(0.625px);
            -webkit-backdrop-filter: blur(0.625px);
            mask-image: linear-gradient(rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%);
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%);
        }
        .framer-blur-container div:nth-child(5) {
            z-index: 5;
            backdrop-filter: blur(1.25px);
            -webkit-backdrop-filter: blur(1.25px);
            mask-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%);
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%);
        }
        .framer-blur-container div:nth-child(6) {
            z-index: 6;
            backdrop-filter: blur(2.5px);
            -webkit-backdrop-filter: blur(2.5px);
            mask-image: linear-gradient(rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
        }
        .framer-blur-container div:nth-child(7) {
            z-index: 7;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            mask-image: linear-gradient(rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
        }
        .framer-blur-container div:nth-child(8) {
            z-index: 8;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            mask-image: linear-gradient(rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
        }