*,
*::after,
*::before {
    box-sizing: border-box;
}

@font-face {
    font-family: "HG";
    src: url('../font/NHaasGrotesk.otf') format("truetype");
}

:root {
    font-size: 16px;
    --color-text: #fff;
    --color-bg: #29005A;
    --color-title: #FC33FF;
    --color-content: #676767;
    --color-btn: #6205d0;
    --color-weak: #FF8100;
    --color-menu: #5E00E6;
    --color-commercial-bg: #5E00E6;
    --color-commercial-grey-bg: #676767;
    --perspective: 1500px;
    --grid-item-ratio: 1.5;
    --grid-width: 100%;
    --grid-height: auto;
    --grid-gap: 2vw;
    --grid-columns: 4;
    --grid-inner-scale: 1;
    --circle-size: 36px;
    --circle-size-active: 54px;
}

body { -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    margin: 0;
    color: var(--color-text);
    background-color: var(--color-bg);

    font-family: "HG", Arial, sans-serif;
    font-variation-settings: "ital" 0, "wght" 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*-----menu------*/
.big-menu-wrap{
    background-color: var(--color-menu);
    display: none;
    position: fixed;
    top:0;
    left:0;
    right: 0;
    bottom:0;
    z-index: 99;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}
.big-menu-wrap.expanded{
    display: flex;
}
.big-menu{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.big-menu li{
    margin: 1rem 0;
}
.big-menu li a{
    text-decoration: none;
    font-size:4rem;
    text-align: center;
    place-items: center;
    position: relative;
    display: grid;
    color: var(--color-text);
}
.big-menu li a .lineParent {
    overflow: hidden;padding-bottom: 5px;
    max-width: max-content;
}
.big-menu li a .lineParent::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px; /* Adjust the thickness of the underline */
    width: 100%;
    background-color: var(--color-text); /* Adjust the underline color */
    transform: scaleX(0); /* Initially hidden */
    transform-origin: right; /* Starts the animation from the right */
    transition: transform 0.3s ease-out; /* Smooth transition */
}

.big-menu li a .lineParent:hover::after {
    transform: scaleX(1); /* On hover, reveal the underline */
    transform-origin: left; /* Starts the animation from the left when hovering */
}
.menu-toggle {
    float: right;
    text-align: right;
}
.menu-toggle {
    gap: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.menu-toggle .line {
    width: 44px;
    height: 4px;
    display: block;
    background-color: var(--color-text);
    transition: opacity .3s ease-in-out,transform .3s ease-in-out;
    position: relative
}

.menu-toggle .triangle {

    opacity: 0;
    border: solid var(--color-text);
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 8px;
    position: absolute;
    right: 0;
    transform: rotate(313deg);
    bottom: calc(50% - 8px);
    transition: opacity .3s ease-in-out
}

.menu-toggle.expanded .triangle {
    opacity: 1
}

.menu-toggle.expanded .line.first {
    transform: translateY(4px);
}

.menu-toggle.expanded .line.second {
    opacity: 0
}
/*----------*/
/* Page Loader */
.js .loading::before,
.js .loading::after {
    content: '';
    position: fixed;
    z-index: 1000;
}

.js .loading::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
}

.js .loading::after {
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    opacity: 0.4;
    background: var(--color-link);
    animation: loaderAnim 0.7s linear infinite alternate forwards;

}

@keyframes loaderAnim {
    to {
        opacity: 1;
        transform: scale3d(0.5, 0.5, 1);
    }
}

a {
    text-decoration: none;
    color: var(--color-link);
    outline: none;
    cursor: pointer;
}

a:hover {
    color: var(--color-link-hover);
    outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
    /* Provide a fallback style for browsers
     that don't support :focus-visible */
    outline: none;
    background: lightgrey;
}

a:focus:not(:focus-visible) {
    /* Remove the focus indicator on mouse-focus for browsers
     that do support :focus-visible */
    background: transparent;
}

a:focus-visible {
    /* Draw a very noticeable focus style for
     keyboard-focus on browsers that do support
     :focus-visible */
    outline: 2px solid red;
    background: transparent;
}

main {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.unbutton {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.unbutton:focus {
    outline: none;
}

.frame {
    position: relative;
    width: 100%;
    padding: 1rem;
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: 'title' 'prev' 'sponsor' 'demos';
    grid-gap: 0.5rem;
    justify-items: start;
    align-self: start;
    justify-self: start;
    pointer-events: none;
    align-items: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

body #cdawrap {
    justify-self: start;
}

.frame a {
    pointer-events: auto;
}

.frame a:not(.frame__title-back) {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.frame a:not(.frame__title-back)::before {
    content: '';
    height: 1px;
    width: 100%;
    background: currentColor;
    position: absolute;
    top: 90%;
    transition: transform 0.3s;
    transform-origin: 0% 50%;
}

.frame a:not(.frame__title-back):hover::before {
    transform: scaleX(0);
    transform-origin: 100% 50%;
}

.frame__title {
    grid-area: title;
    display: flex;
}

.frame__title-main {
    font-size: inherit;
    margin: 0;
    font-weight: inherit;
}

.frame__title-back {
    position: relative;
    display: flex;
    align-items: flex-end;
}

.frame__title-back span {
    display: none;
}

.frame__title-back svg {
    fill: currentColor;
}

.frame__prev {
    grid-area: prev;
}

.project {
    padding: 1rem;
    max-width: 1000px;
    margin: 20vh auto;
    display: grid;
    grid-column-gap: 7vw;
    grid-row-gap: 0.5rem;
}

.project--intro {
    grid-template-columns: 1fr;
    grid-template-areas: 'label-name' 'name' 'label-date' 'date' 'title' 'label-mission' 'mission';

}

.project--details {
    grid-template-areas: 'label-default' 'paragraph';
    grid-template-columns: 1fr;
}

.project--left {
    justify-content: start;
}

.project--right {
    justify-content: end;
}

.project--details p {
    grid-area: paragraph;
    max-width: 400px;
}

.project__label--default {
    grid-area: label-default;
}

.project p {
    line-height: 1.4;
    margin: 0;
    color: var(--color-text-alt);
}

.project__label {
    color: var(--color-label);
}

.project__label--name {
    grid-area: label-name;
}

.project__label--date {
    grid-area: label-date;
}

.project__label--mission {
    grid-area: label-mission;
}

.project__name {
    grid-area: name;
}

.project__date {
    grid-area: date;
}

.project__mission {
    grid-area: mission;
    line-height: 1.4;
}

.project__mission p:first-child {
    grid-area: p1;
}

.project__mission p:child {
    grid-area: p2;
}

.project__mission p {
    color: var(--color-text-alt);
}

.project__title {
    grid-area: title;
    font-size: clamp(2rem, 13vw, 8rem);
    font-weight: 400;
    margin: 10vh 0;
    line-height: 1;
}

.project__heading {
    color: var(--color-label);
    font-weight: inherit;
    font-size: inherit;
    margin: 0;
}

.gallery-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40vh auto;
    overflow: hidden;
}

.gallery-wrap--auto {
    height: auto;
}

.gallery-wrap--large {
    height: 110vh;
}

.gallery-wrap--dense {
    margin: 0;
}

.gallery {
    position: relative;
    width: 100%;
    height: 100%;
    flex: none;
}

.gallery--breakout {
    width: min-content;
}

.gallery__item {
    background-position: 50% 50%;
    background-size: cover;
    flex: none;
    border-radius: 1.5vw;
    position: relative;
    filter: brightness(1);
}
.gallery__item p{
    position: absolute;
    bottom:0;
}
.gallery__item-cut {
    overflow: hidden;
    display: grid;
    place-items: center;
}

.gallery__item-inner {
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.caption {
    font-size: clamp(1rem, 3vw, 1.75rem);
    z-index: 101;
    color: var(--color-caption);
    font-weight: 400;
}

.gallery--row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    --size-factor: 1.25;
    --item-height: 20vh;
}

.gallery--row .gallery__item {
    width: auto;
    aspect-ratio: 2 / 3;
}

.gallery--row .gallery__item--s {
    height: var(--item-height);
}

.gallery--row .gallery__item--m {
    height: calc(var(--size-factor) * var(--item-height));
}

.gallery--row .gallery__item--l {
    height: calc(var(--size-factor) * 2 * var(--item-height));
}

.gallery--row .gallery__item--xl {
    z-index: 100;
    height: calc(var(--size-factor) * 3 * var(--item-height));
}

.gallery--switch.gallery--row .gallery__item--m,
.gallery--switch.gallery--row .gallery__item--l {
    height: var(--item-height);
}

.gallery--row .caption {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: -50vh;
    left: 0;
    padding: 4.5vw;
    max-width: 730px;
    opacity: 0;
}

.gallery--switch.gallery--row .caption {
    bottom: 0;
    opacity: 1;
}

.gallery--one {
    display: grid;
    place-items: center;
}

.gallery--one .gallery__item {
    width: 400%;
    height: 400%;
    filter: brightness(1) hue-rotate(90deg);
}

.gallery--switch.gallery--one .gallery__item {
    width: 100%;
    height: 100%;
    filter: brightness(0.7) hue-rotate(0deg);
}

.gallery--one .caption {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 50%;
    left: 50%;
    margin: 100vh 0 0 -50vw;
    font-size: clamp(2rem, 5vw, 3rem);
    display: grid;
    place-items: center;
}

.gallery--switch.gallery--one .caption {
    margin-top: -50vh;
}

.gallery--grid {
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);
    row-gap: 2.5vw;
    column-gap: 3vw;
}

.gallery--grid .gallery__item {
    height: 33vh;
    width: 33vw;
}

.gallery--switch.gallery--grid {
    gap: 0;
}

.gallery--switch.gallery--grid .gallery__item {
    height: 110vh;
    width: 110vw;
    filter: brightness(0.65);
}

.gallery--grid .caption {
    position: absolute;
    width: 100vw;
    height: 100vh;
    padding: 0;
    top: 50%;
    left: 50%;
    margin-top: 50vh;
    margin-left: -50vw;
    display: grid;
    place-items: center;
    max-width: none;
    opacity: 0;
}

.gallery--switch.gallery--grid .caption {
    margin-top: -40vh;
    opacity: 1;
}

.gallery--grid .caption p {
    padding: 50vh 30vw 10vh 10vw;
}

.gallery--switch.gallery--grid .caption p {
    margin-top: 0;
}

.gallery--stack {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    justify-content: start;
    gap: 2rem;
    padding: 2rem;
    --offset: 1rem;
}

.pos-fr .gallery--stack {

    grid-template-columns: repeat(8, 1fr);

}
.rel-ind{

}
.esc-alg{

}
.guoc-go{

}
.gallery--stack .gallery__item {
    border-radius: 1.5vw;
    width: 25vw;
    height: 35vw;
    z-index: 1;
    overflow: hidden;
}
.gallery__item p {
    position: absolute;
    bottom: 0;
    margin: 0;

    left: 0;
    right: 0;
    padding: 0 1vw;
    font-size: 1rem;
    line-height: 3;
}
.gallery-grey p{
     background-color: var(--color-content);
}
.gallery-pink p{
    background-color: var(--color-title);
}.gallery-last p{
    background-color: var(--color-bg);
}
.gallery-purple p{
    background-color: var(--color-btn);
}

.gallery--stack-glass .gallery__item {
    filter: opacity(1);
}

.gallery--switch.gallery--stack .gallery__item {
    grid-area: 1 / 1 / 2 / 2 ;
}

.gallery--stack .caption {
    position: absolute;
    bottom: 0;
    left: 100vw;
    width: 100vw;
    padding: 5vw;
    color: var(--color-text-alt);
    opacity: 0;
    z-index: 0;
}

.gallery--stack .caption p {
    margin: 0;
}

.gallery--switch.gallery--stack .caption {
    left: 0;
    opacity: 1;
}
.gallery--stack-inverse .gallery__item:nth-child(8) {
    z-index: 8;
}
.gallery--stack-inverse .gallery__item:nth-child(7) {
    z-index: 7;
}
.gallery--stack-inverse .gallery__item:nth-child(6) {
    z-index: 6;
}
.gallery--stack-inverse .gallery__item:nth-child(5) {
    z-index: 5;
}

.gallery--stack-inverse .gallery__item:nth-child(4) {
    z-index: 4;
}

.gallery--stack-inverse .gallery__item:nth-child(3) {
    z-index: 3;
}

.gallery--stack-inverse .gallery__item:nth-child(2) {
    z-index: 2;
}

.gallery--stack-inverse .gallery__item:nth-child(1) {
    z-index: 1;
}
/*.gallery--stack-inverse .gallery__item:nth-child(5) {*/
    /*z-index: 2;*/
/*}*/

/*.gallery--stack-inverse .gallery__item:nth-child(4) {*/
    /*z-index: 3;*/
/*}*/

/*.gallery--stack-inverse .gallery__item:nth-child(3) {*/
    /*z-index: 4;*/
/*}*/

/*.gallery--stack-inverse .gallery__item:nth-child(2) {*/
    /*z-index: 5;*/
/*}*/

/*.gallery--stack-inverse .gallery__item:nth-child(1) {*/
    /*z-index: 6;*/
/*}*/

.gallery--switch.gallery--stack .gallery__item:nth-child(2) {
    margin-left: var(--offset);
}

.gallery--switch.gallery--stack .gallery__item:nth-child(3) {
    margin-left: calc(var(--offset) * 2);
}

.gallery--switch.gallery--stack .gallery__item:nth-child(4) {
    margin-left: calc(var(--offset) * 3);
}

.gallery--switch.gallery--stack .gallery__item:nth-child(5) {
    margin-left: calc(var(--offset) * 4);
}

.gallery--switch.gallery--stack .gallery__item:nth-child(6) {
    margin-left: calc(var(--offset) * 5);
}
.gallery--switch.gallery--stack .gallery__item:nth-child(7) {
    margin-left: calc(var(--offset) * 6);
}
.gallery--switch.gallery--stack .gallery__item:nth-child(8) {
    margin-left: calc(var(--offset) * 7);
}
/*.gallery--switch.gallery--stack-dark .gallery__item:nth-child(2) {*/
    /*filter: brightness(0.8);*/
/*}*/

/*.gallery--switch.gallery--stack-dark .gallery__item:nth-child(3) {*/
    /*filter: brightness(0.7);*/
/*}*/

/*.gallery--switch.gallery--stack-dark .gallery__item:nth-child(4) {*/
    /*filter: brightness(0.6);*/
/*}*/

/*.gallery--switch.gallery--stack-dark .gallery__item:nth-child(5) {*/
    /*filter: brightness(0.5);*/
/*}*/

/*.gallery--switch.gallery--stack-dark .gallery__item:nth-child(6) {*/
    /*filter: brightness(0.4);*/
/*}*/

.gallery--switch.gallery--stack-glass .gallery__item {
    opacity: 0.7;
}

.gallery--switch.gallery--stack-scale .gallery__item:nth-child(2) {
    transform: scale(0.98);
}

.gallery--switch.gallery--stack-scale .gallery__item:nth-child(3) {
    transform: scale(0.96);
}

.gallery--switch.gallery--stack-scale .gallery__item:nth-child(4) {
    transform: scale(0.94);
}

.gallery--switch.gallery--stack-scale .gallery__item:nth-child(5) {
    transform: scale(0.92);
}

.gallery--switch.gallery--stack-scale .gallery__item:nth-child(6) {
    transform: scale(0.9);
}

.gallery--gridtiny {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    width: 300%;
    padding: 0 2vh;
    height: min-content;
    gap: 1vh;
}

.gallery--switch.gallery--gridtiny {
    width: 100%;
    gap: 2vh;
}

.gallery--gridtiny .gallery__item {
    aspect-ratio: 1;
    width: 100%;
    height: auto;
    filter: contrast(0.8) saturate(0) brightness(0.6) opacity(1);
}

.gallery--switch.gallery--gridtiny .gallery__item {
    filter: contrast(1) saturate(1) brightness(0.8) opacity(0.8);
}

.gallery--gridtiny .caption {
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 50%;
    top: 50%;
    margin: -50vh 0 0 -50vw;
    display: grid;
    place-items: center;
    font-size: clamp(2rem, 8vw, 4rem);
    opacity: 0;
}

.gallery--switch.gallery--gridtiny .caption {
    opacity: 1;
}

.gallery--switch .gallery__item--center {
    height: 100vh;
    width: 100vw;
    aspect-ratio: auto;
    filter: brightness(0.5);
}

.gallery--bento {
    display: grid;
    gap: 1vh;
    grid-template-columns: repeat(3, 32.5vw);
    grid-template-rows: repeat(4, 23vh);
    justify-content: center;
    align-content: center;
}

.gallery--switch.gallery--bento {
    grid-template-columns: repeat(3, 100vw);
    grid-template-rows: repeat(4, 49.5vh);
    gap: 15vh;
}

.gallery--bento .gallery__item:nth-child(1) {
    grid-area: 1 / 1 / 3 / 2;
}

.gallery--bento .gallery__item:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
}

.gallery--bento .gallery__item:nth-child(3) {
    grid-area: 2 / 2 / 4 / 3;
}

.gallery--bento .gallery__item:nth-child(4) {
    grid-area: 1 / 3 / 3 / 3;
}

.gallery--bento .gallery__item:nth-child(5) {
    grid-area: 3 / 1 / 3 / 2;
}

.gallery--bento .gallery__item:nth-child(6) {
    grid-area: 3 / 3 / 5 / 4;
}

.gallery--bento .gallery__item:nth-child(7) {
    grid-area: 4 / 1 / 5 / 2;
}

.gallery--bento .gallery__item:nth-child(8) {
    grid-area: 4 / 2 / 5 / 3;
}

.gallery--bento .caption {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 50%;
    left: 50%;
    margin: 100vh 0 0 -50vw;
    font-size: clamp(2rem, 10vw, 5rem);
    display: grid;
    place-items: center;
}

.gallery--switch.gallery--bento .caption {
    margin-top: -50vh;
}

.gallery--grid10 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
}

.gallery--switch.gallery--grid10 {
    grid-template-columns: 1fr 300px 1fr;
    grid-template-rows: 1fr 60vh 1fr;
    grid-gap: 0;
}

.gallery--switch.gallery--grid10 .gallery__item {
    grid-area: 2 / 2 / 3 / 3;
}

.gallery--grid10 .caption {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 50%;
    left: 50%;
    margin: 100vh 0 0 -50vw;
    display: grid;
    place-items: center;
    font-size: clamp(2rem, 8vw, 6rem);
}

.gallery--switch.gallery--grid10 .caption {
    opacity: 1;
    margin-top: -50vh;
}

@media screen and (min-width: 53em) {
    .frame {
        grid-template-columns: auto auto auto 1fr;
        grid-template-areas: 'title prev ... sponsor';
        align-content: space-between;
        justify-items: start;
        grid-gap: 2rem;
    }

    .frame__demos {
        justify-self: end;
    }

    .project--intro {
        grid-template-columns: auto 1fr;
        grid-template-areas: 'label-name name' 'label-date date' 'title title' 'label-mission mission';

    }

    .project--details {
        grid-template-areas: 'label-default paragraph';
        grid-template-columns: auto auto;
    }

    .project__label {
        text-align: right;
    }

    .project__mission {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 'p1 ...' '... p2';
        column-gap: 2rem;
    }

    .gallery--grid10 {
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .gallery--grid10:not(.gallery--switch) .pos-1 {
        grid-area: 1 / 1;
    }

    .gallery--grid10:not(.gallery--switch) .pos-2 {
        grid-area: 1 / 2;
    }

    .gallery--grid10:not(.gallery--switch) .pos-3 {
        grid-area: 1 / 4;
    }

    .gallery--grid10:not(.gallery--switch) .pos-4 {
        grid-area: 1 / 5;
    }

    .gallery--grid10:not(.gallery--switch) .pos-5 {
        grid-area: 3 / 6;
    }

    .gallery--grid10:not(.gallery--switch) .pos-6 {
        grid-area: 1 / 7;
    }

    .gallery--grid10:not(.gallery--switch) .pos-7 {
        grid-area: 1 / 9;
    }

    .gallery--grid10:not(.gallery--switch) .pos-8 {
        grid-area: 3 / 10;
    }

    .gallery--grid10:not(.gallery--switch) .pos-9 {
        grid-area: 2 / 8;
    }

    .gallery--grid10:not(.gallery--switch) .pos-10 {
        grid-area: 4 / 9;
    }

    .gallery--grid10:not(.gallery--switch) .pos-11 {
        grid-area: 3 / 8;
    }

    .gallery--grid10:not(.gallery--switch) .pos-12 {
        grid-area: 2 / 2;
    }

    .gallery--grid10:not(.gallery--switch) .pos-13 {
        grid-area: 3 / 1;
    }

    .gallery--grid10:not(.gallery--switch) .pos-14 {
        grid-area: 3 / 4;
    }

    .gallery--grid10:not(.gallery--switch) .pos-15 {
        grid-area: 4 / 3;
    }

    .gallery--grid10:not(.gallery--switch) .pos-16 {
        grid-area: 4 / 7;
    }

    .gallery--stack .caption {
        bottom: 33%;
        width: 45vw;
        /*max-width: 800px;*/
    }

    .gallery--switch.gallery--stack .caption {
        left: 40vw;
    }

    body #cdawrap {
        justify-self: end;
    }
}

/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
.intro {
    /*height: calc(100vh - 3rem); */
    /* text-align: center; */
    /* place-items: center; */
    /* display: grid; */
    /* margin-bottom: 30vh; */
    /* background: linear-gradient(0deg, transparent, var(--color-bg-alt)); */
    text-align: center;
    place-items: center;
    display: grid;
    /* margin-bottom: 30vh; */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.intro-titles {
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*position: static;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-titles .lineParent {
    overflow: hidden;
    max-width: max-content;
}

.intro-titles .mask {
    overflow: hidden;
}

.top-sects-title .lineParent {
    overflow: hidden;
    max-width: max-content;
}

.top-sects-title .mask {
    overflow: hidden;
}

.intro__title {
    place-items: center;
    margin: 0;
    line-height: 1.2;
    display: grid;
    position: fixed;
    text-align: center;
    /*opacity: 0;*/
    left: 0;
    top: 40vh;
    right: 0;
    width: 100vw;
}

.intro__title-pre {
    text-align: center;
    font-size: 4rem;

}

.intro__title-sub {
    font-size: 2rem;
    padding-top: 20px;
    text-align: center;
    /*color: var(--color-title);*/
}

.intro__info {
    max-width: 15ch;
    opacity: .6;
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    line-height: 1.2;
    position: relative;
    align-self: end;
    font-size: 0.8em;
}

.intro__info::after {
    content: "";
    width: 1px;
    height: 2rem;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 50%;
}

.content {
    position: relative;

    background-color: var(--color-bg);
}

.intro-video {
    height: 100vh;
    text-align: center;
    place-items: center;
    display: grid;
    /*margin-bottom: 30vh;*/
    position: relative;
}

#v0::-webkit-media-controls {
    display: none !important;
    opacity: 0;
}

#v0::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none;
}

#v0::--webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none;
}

#v0::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

/*.content--spacing {*/
/*margin-bottom: 100vh;*/
/*}*/

.content__title p {
    font-size: 1.3em;
    /*color: var(--color-title);*/
    margin: 0;
}

.content__title h3 {
    font-size: 2.5em;
    margin: 0;
}

.content__title {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 50%;
    left: 50%;
    margin: -50vh 0 0 -50vw;
    padding: 0 10vw;
    display: grid;
    place-items: center;
    text-align: center;

}

.content__title--top {
    align-items: start;
}

.content__title--bottom {
    align-items: end;
}

.content__title--left {
    justify-items: start;
    text-align: left;
}

.content__title--right {
    justify-items: end;
    text-align: right;
    padding-right: 18vw;
}

.my-spacer {
    display: block;
    height: 20vh;
}

.top-space {
    padding-top: 20vh;
}

.webinar__btn {
    position: fixed;
    padding: 15px 3.5vw;
    margin: 0 auto 0 auto;
    font-size: 1rem;
    line-height: 1rem;
    cursor: pointer;
    z-index: 98;
    background-color: var(--color-btn);
    border-radius: 55px;
    text-align: center;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

#webinar__btn.done-btn {
    display: none !important;
}

#static_webinar__btn {

    text-align: center;
    font-size: 2.3rem;
    min-width: 612px;
    z-index: 99999;
    display: table;
    padding: 25px;
    margin: 18vh auto 0 auto;
    background-color: var(--color-btn);
    border-radius: 55px;
}

.static_webinar__btn_title {
    padding: 19px 4vw;
    cursor: pointer;

}

iframe#form-iframe {
    height: 560px;
    /*height: 500px;*/
}

footer {
    background-color: var(--color-bg);
    text-transform: uppercase;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 25vh 20px 20px 20px;
}

.full__text {
    font-size: 1.5em;
    color: var(--color-content);

    margin: auto;
    padding: 10vh 25vw;
    text-align: center;
    box-sizing: border-box;
}

.full__text.full__text-big {
    font-size: 2.5rem;
    padding: 20vh 15vw 10vh 15vw;
}
.full__text-bigger{
    font-size: 3rem;
    display: block;
}
.no-padd-top {
    padding-top: 0 !important;
}

.no-padd-bot {
    padding-bottom: 0 !important;
}

.top-sects-title {

    /*padding: 0;*/
    text-align: center;
    place-items: center;
    display: grid;

    padding: 10vh 50px;

}

.top-sects-title h2 {
    font-size: 4em;
    color: var(--color-text);
    margin: 0;
    padding: 0;

}

.extra-spacer {
    height: 30vh;
    display: block;
}

.full__text span {
    color: var(--color-title);
    text-decoration: underline;
}

header .logo {
}

header .logo svg {
    width: 17vw;
    max-width: 300px;
    min-width: 130px;
}

header {
    position: fixed;
    width: 100%;
    padding: 20px;
    z-index: 99;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

/*--------------------*/
.hero-video-container {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    display: flex;
    z-index: -1;
}

.hero-video-container .hero-video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;

    /*filter: opacity(0);*/
}

/*------------*/
.sections {
    background-color: var(--color-bg);
    position: relative;
}

.sections-nav {
    position: fixed;
    top: calc(50vh - 120px);
    right: 50px;
    text-align: right;
    z-index: 99999;
    opacity: 0;
}

.sections-nav a .grid-txt {

}

.sections-nav a .dot {
    height: var(--circle-size);
    width: var(--circle-size);
    margin-left: 20px;
    border: 2px solid #5E00E6;
    border-radius: 50%;
    display: inline-block;
    position: relative;

    transition: all 400ms ease;
    -webkit-transition: all 400ms ease;
}

.sections-nav a.active .dot {

    height: var(--circle-size-active);
    width: var(--circle-size-active);
    background-color: #FC33FF;
    border: 2px solid #FC33FF;
}

.sections-nav a {

    text-decoration: none;
    font-size: 0.7em;
    color: var(--color-content);

    text-align: right;
    /* vertical-align: middle; */
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: end;
}

.sections-nav a:hover {
    text-decoration: none;
    /*color: var(--color-text);*/
}

.sections-nav a.active {
    color: var(--color-text);
}

.exp-content {
    overflow: hidden;
    height: 0px;
}

/*----*/

.section-consumer-data {
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    grid-column-gap: 5vw;
    /* grid-row-gap: 5px; */
    max-width: 80vw;
    margin: 0 auto;

}

.consumer-data-item {
    background: #fff;
    border-radius: 1.5vw;
    display: flex;
    text-align: center;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    flex-direction: column;
}
.consumer-data-item p{
    color: var( --color-title);
    font-size: 1.3rem;
    padding:0 10%;
    align-self: flex-start; /* Align the first item to the top */
    margin-bottom: auto; /* Push the remaining items downward */
    width:100%;
}
.section-consumer-data svg, .section-consumer-data img {

    max-width: 100%;
    max-height: 100%;
}

.blurred {
    filter: blur(12px);
    -webkit-filter: blur(12px);

}
.blurred-content{
    position: relative;
}
.blurred-btn{
    position: absolute;
    top: 15%;
    z-index: 10;
    cursor: pointer;
    display: none;
    padding: 15px 3.5vw;
    font-size: 1rem;
    color: #fff;
    background-color: var(--color-btn);
    border-radius: 55px;
    text-align: center;
    margin-inline: auto;
    width: fit-content;
    left: 0;
    right: 0;
}
.consumer-data-item .blurred-btn{
    top: 45%;
}
.blurred-content:hover .blurred-btn {
    display: block;

}
/*----*/

.section-commercial-data {
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    grid-column-gap: 5vw;
    /* grid-row-gap: 5px; */
    max-width: 80vw;
    margin: 0 auto;
    align-items: stretch;
    padding-bottom: 10vh;
}

.commercial-data-item .weak-tag {
    background-color: var(--color-weak);
}

.commercial-data-item .case-tag {
    background-color: var(--color-title);
}

.commercial-data-item {
    background: #fff;
    overflow: hidden;
    border-radius: 1.5vw;
    display: flex; /* Optional: to allow vertical alignment of content */
    flex-direction: column;
}

.commercial-data-inside {
    text-align: left;
    padding: 4vh 20px;
    font-size: 1.5rem;
    position: relative;
}

.section-commercial-data svg {
    padding: 20px;
    max-width: 100%;
    max-height: 100%;
}

.commercial-data-item.white-bg {
    background-color: #fff;
    color: #29005A;

}

.commercial-data-item.grey-bg {
    background-color: var(--color-commercial-grey-bg);
    color: #fff;
}

.commercial-data-item.purple-bg {
    background-color: var(--color-commercial-bg);
    color: #fff;
}

.commercial-data-item .purple-sub {
    color: var(--color-btn);
}

.commercial-data-tag {
    font-size: 1rem;
    line-height:1.5rem;
    color: #fff;
    /* display: inline-block; */
    position: absolute;
    padding: 2px 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 0;
    border-radius: 1.5vw;
}

.commercial-data-sub {
    padding-top: 30px;
    font-size: 1rem;
}

.commercial-data-bg {
    height: 25vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/*----*/
.bottom-section {
    position: relative;
    text-align: left;
}

.bottom-side-img {
    position: absolute;
    overflow: hidden;
    width:23vw;

}
.bottom-side-img img, .bottom-side-img svg{
    width:100%;
    border-radius: 1.5vw;
}
.bottom-side-img.right-side-img {
    top: 25vh;
    /*right: -5vw;*/
    right: -23vw;
}

.bottom-side-img.left-side-img {
    bottom: 0;
    /*left: -5vw;*/
    left: -23vw;
}

/*----*/
@media screen and (max-width: 900px) {
    :root {
        font-size: 12px;
    }
    .section-consumer-data {

        grid-template-columns: initial;
        grid-auto-rows: auto;
        grid-row-gap: 5vh;
    }
    .section-commercial-data {

        grid-template-columns: initial;
        grid-auto-rows: initial;
        grid-row-gap: 5vh;

        align-items: initial;
        padding-bottom: 5vh;
    }

    #cookie-bar {
        line-height: 1.8em;
        font-size: 1.2em;
    }

    .sections-nav {
        top: calc(50vh - 85px);
        right: 30px;
    }

    .sections-nav a .dot {
        height: 24px;
        width: 24px;
        margin-bottom: -6px;
    }

    .sections-nav a {
        padding: 10px 0;
    }

    .sections-nav a.active .dot {
        margin-bottom: -10px;
        height: 34px;
        width: 34px;
    }



    #static_webinar__btn {
        margin: 10vh auto 0 auto;
        min-width: 55vw;
    }

    iframe#form-iframe {
        height: 600px;
        /*height: 560px;*/
    }


}

@media screen and (max-width: 700px) {
    .menu-toggle .line {

        height: 2px;
    }
    .menu-toggle .triangle {
        border-width: 0 2px 2px 0;
        right: 1px;
    }
    .gallery__item p {
        position: absolute;
        bottom: 0;
        margin: 0;
        left: 0;
        right: 0;
        padding: 0 4vw;
    }
    .gallery--stack .caption {

        font-size: clamp(1rem, 2vh, 30vh);
        line-height: 1.3;
        word-wrap: break-word;
        padding: 0vh 10vw;
    }
    .gallery--stack .gallery__item {

        width: 55vw;
        height: 40vh;
    }
    .gallery--stack {

        align-items: start;
    }
    .gallery {


    }
    .gallery-wrap {
        padding-top:20vh;


    }
    .scroll-pause{
        height:10vh;
    }
    /*-------------*/
    .bottom-side-img{
        display: none;
    }
    :root {
        font-size: 8px;
    }
    .full__text {
        font-size: 2em;

        padding: 10vh 10vw;}

    .full__text.full__text-big {

        padding: 10vh 10vw 0 10vw;
    }
    .my-spacer {
        height: 5vh;
    }

    .top-space {
        padding-top: 5vh;
    }

    .webinar-date {
        font-size: 1.2em;
    }

    .sections-nav {

        right: -400px;
    }

    .webinar__btn {

        font-size: 2.4em;
        line-height: 1;
    }

    footer {

        padding: 15vh 20px 20px 20px;
    }

    .content__title--right {
        justify-items: center;
        text-align: center;
        padding-right: 10vw;
    }

    #static_webinar__btn {

        margin: 10vh auto 0 auto;
    }
}

@media screen and (min-width: 1700px) {
    :root {
        font-size: 20px;
    }
}

@media screen and (min-width: 2000px) {
    :root {
        font-size: 24px;
        --circle-size: 40px;
        --circle-size-active: 60px;
    }
}

@media screen and (min-width: 2700px) {
    :root {
        font-size: 28px;
        --circle-size: 44px;
        --circle-size-active: 66px;
    }

    .content__title h3 {
        font-size: 2.8em;
    }

    .content__title p {
        font-size: 1.5em;
    }

    .sections-nav a {
        font-size: 0.9em;
    }
    .gallery__item p {

        font-size: 1.2rem;
    }

}