@font-face {
    font-family: 'BNAttica';
    font-display: swap;
    src: url('../fonts/BNAttica.otf') format('opentype');
}

@font-face {
    font-family: 'BNBergen';
    font-display: swap;
    font-weight: 400;
    src: url('../fonts/BNBergenSt.ttf') format('truetype');
}

@font-face {
    font-family: 'BNBergen';
    font-display: swap;
    font-weight: 300;
    src: url('../fonts/BNBergenSt-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'BNBergen';
    font-display: swap;
    font-weight: 500;
    src: url('../fonts/BNBergenSt-Medium.ttf') format('truetype');
}

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

ul {
    list-style: none;
}

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

svg,
img {
    width: 100%;
    height: auto;
}

/*  page css  */
body {
    --bg-color: #F9F4E1;
    --grid-padding: 5.08svw;
    /* 24px;*/

    --color-light: #F9F4E1;
    --color-dark: #120E0D;
    --color-violet: #C4A3F2;
    --color-pink: #EA1C86;
    --color-green: #C7EF55;
    --color-blue: #3838E5;


    --text-s: min(3.56svw, 1.6svh);
    --text-m: min(4.07svw, 2svh);
    --text-xl: min(20.35svw, 10svh);
    /* 80px */
}

.BNAttica {
    font-family: 'BNAttica';
}

.Melts {
  font-family: "Galada", cursive;
  font-weight: 400;
  font-style: normal;
}

.container {
    position: relative;
    padding: var(--grid-padding);
    display: flex;
    flex-direction: column;
    height: 100svh;
    text-align: center;
    text-transform: uppercase;
    font-family: 'BNBergen';
}
.loader {
    position: fixed;
    z-index: 100;
    background-color: var(--bg-color);
    left: 0;
    top: 0;
    width: 100dvw;
    height: 100dvh;
    opacity: var(--before-opacity);
}

header {
    --color-1: black;
    --color-2: #C7EF55;
    --color-3: black;
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer {
    --color-1: #C4A3F2;
    --color-2: #120E0D;
    --color-3: white;
    --color-4: #120E0D;

    --mobile-color-1: #C4A3F2;
    --mobile-color-2: white;
    --mobile-color-3: #120E0D;
    --mobile-color-4: #C7EF55;
    --mobile-color-5: black;
}

footer>.only-mobile {
    font-size: var(--text-s);
}

header>div {
    flex: 1;
}

header .only-mobile {
    width: min(15.77svw, 7.154svh);
}

h1 {
    font-size: var(--text-m);
    line-height: 0.8;
    margin-bottom: 0.875em;
}

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

.normal-case {
    text-transform: none;
}

main {
    --color-1: #120E0D;
    --color-2: #C7EF55;
    --color-3: black;
    --color-4: black;

    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-ctn {
    font-size: var(--text-xl);
    line-height: 0.75;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 340px;
}

.main-text>span {
    display: inline-block;
    position: relative;

    padding-left: 0.2em;
    padding-right: 0.2em;
}

.main-text .inner-el {
    position: absolute;
}

.sparkle-1 {
    width: 0.3em;
    top: -0.22em;
    right: 0;
}

.sparkle-2 {
    width: 0.295em;
    top: 0;
    left: -0.125em;
}

.dude {
    position: relative;
    width: min(58.26svw, 31.6svh);
    transform: translateY(-0.275em);
}

.dude-1 {
    opacity: 0;
}

.dude-2 {
    position: absolute;
    left: -7.5%;
    top: -5%;
    opacity: 0;
}

.dude-3 {
    position: absolute;
    left: -2%;
    top: -7%;
    opacity: 0;
    width: 105%;
}

.mobile-film {
    position: absolute;
    width: 19.21%;
    right: 12%;
    bottom: 22%;
    transform: rotate(21.41deg);
}

.glass {
    width: 0.8em;
    top: -19%;
    left: 16.5%;
}

.inner-sparkles {
    transform: translateX(-61%) translateY(22%);
}

.caps-text {
    font-size: var(--text-m);
    /*line-height: 1;*/
    padding: 0.5em;
    padding-top: 0.7em;
    margin-bottom: 1.25em;
    background-color: var(--color-green);
    border-radius: 50px;
    overflow: hidden;
    width: 68.44svw;
    max-width: 340px;
}

.desc-text {
    font-size: var(--text-s);
    line-height: 1.1;
}

.cta-icon {
    width: 3em;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list {
    display: flex;
}

.list .cta-icon {
    background-color: var(--color-violet);
    border-radius: 50%;
    overflow: hidden;
    margin-right: 1.428em;
}

.list-icon-1 svg {
    width: 51.35%;
}

.list-icon-2 svg {
    width: 45.95%;
}

.talk-cta {
    display: flex;
    align-items: center;
    border: 1px solid black;
    border-radius: 50px;
}

.talk-text {
    padding-left: 1.64em;
    padding-right: 0.71em;
}

.talk-cta .cta-icon {
    background-color: var(--color-green);
    border: 1px solid black;
    border-radius: 50px;
    position: relative;
    right: -1px;
}

.talk-cta .cta-icon svg {
    width: 51.35%;
}

.only-desk {
    display: none;
}
.only-touch {
    background-color: var(--color-green);
    display: none;
    top: 0;
    right: 0;
    position: fixed;
    justify-content: center;
    align-items: center;
    width: 14.75%;
    max-width: 80px;
    aspect-ratio: 1 / 1;
}
.only-touch svg {
    width: 46.55%;
}
.main-logo {
    width: 8.91svw;
}

.desk-list {
    display: flex;
    align-items: flex-end;
    text-align: left;
}

.desk-list li {
    border-left: 3px solid var(--color-violet);
    padding-left: 10px;
    margin-right: 5.61svw;
    line-height: 1.2;
    font-weight: 500;
    font-size: var(--text-s);
}

.list-top {
    color: var(--color-violet);
    font-weight: 300;
    font-size: var(--text-xs);
}

.insta-cta {
    position: relative;
    display: flex;
    border: 1px solid var(--color-violet);
    border-radius: 50px;
    align-items: center;
    overflow: hidden;
}

.cta-bg {
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-violet);
    /*  right: 100%;
    /*transform: translateX(2.14svw);*/
    border-radius: 50px;
    overflow: hidden;
}

.cta-bg .insta-text {
    text-align: left;
    padding-left: 1.5em;
    padding-right: 0.78em;
}

.insta-cta .cta-icon {
    border-radius: 50px;
    position: relative;
    left: -1px;
    border-radius: 50px;
    overflow: hidden;
}

.insta-cta svg {
    width: 45%;
}

.insta-text {
    font-size: var(--text-xs);
    padding-right: 1.5em;
    padding-left: 0.78em;
}

.cursor-indicator {
    position: fixed;
    pointer-events: none;
    font-size: var(--text-s);
    border: 1px solid;
    border-radius: 30px;
    padding: 0.28em 0.57em 0.1em 0.57em;
    font-weight: 500;
    font-family: 'BNBergen';
    text-transform: uppercase;
    background-color: #F9F4E1;
    z-index: 10;
    top: var(--text-s);
    opacity: 0;
}
/* (min-aspect-ratio: 6 / 8) */
@media (min-width: 769px), (min-aspect-ratio: 8 / 6) {
    body {
        --grid-padding: 1.38svw;

        --text-xs: max(11px, 0.81svw);
        --text-s: max(12px, 1.04svw);
        --text-m: max(13px, 1.33svw);
        --text-l: max(15px, 1.38svw);
        --text-xl: 8.39svw;
    }

    header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    main {
        padding-bottom: 4svh;
    }

    .cta-icon {
        width: 2.64em;
        /* 2.14svw;*/
    }
    .main-logo {
        min-width: 130px;
    }

    .start {
        display: flex;
        justify-content: flex-start;
    }

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

    .end {
        display: flex;
        justify-content: flex-end;
    }

    .end .cta-icon {
        /*  background-color: var(--color-green); */
        border: 1px solid black;
        border-radius: 50%;
        overflow: hidden;
    }

    .end svg {
        width: 48%;
    }

    h1 {
        margin-bottom: unset;
    }

    .main-text {
        margin-bottom: 0.22em;
    }

    .caps-text {
        font-size: var(--text-l);
        width: max-content;
        padding-left: 0.91em;
        padding-right: 0.91em;
        margin-bottom: 1.125em;
        max-width: unset;
    }

    .desc-text {
        font-size: var(--text-xs);
        width: 37%;
        min-width: 350px;
    }

    .main-text>span {
        padding-left: 0.1em;
        padding-right: 0.1em;
    }

    .main-ctn {
        max-width: unset;
    }

    .sparkle-1 {
        width: 0.297em;
        top: -0.25em;
        right: -0.05em;
    }

    .sparkle-2 {
        width: 0.289em;
        top: 0.05em;
        left: 0.05em;
    }

    .mobile-film {
        position: absolute;
        width: 0.46em;
        bottom: 0.2em;
        left: -0.05em;
        transform: unset;
    }

    .only-mobile {
        display: none;
    }

    .only-desk {
        display: flex;
    }

    .dude {
        position: absolute;
        width: 2.4em;/* 20.13svw; */
    }

    .word-groupe-1 {
        transform: translateX(-0.73em);
    }

    .word-groupe-2 {
        transform: translateX(0.85em);
    }

    .word-groupe-3 {
        transform: translateX(-0.5em);
    }

    .word-groupe-4 {
        transform: translateX(0.6em);
    }

    .inner-sparkles {
        transform: unset;
    }

    .dude {
        transform: translateY(-0.8em);
    }
}

@media (pointer: coarse),(pointer: none) {
    .cursor-indicator {
        display: none;
    }
    .only-touch {
        display: flex;
    }
}