.button {
    pointer-events: auto;
    cursor        : pointer;
    background    : #d4f7ff;
    padding       : 1.5rem 3rem 1.25rem;
    margin        : 0;
    position      : relative;
    display       : inline-block;
    color         : #fff;
    font-family   : Trap_Regular !important;
    /* border        : 2px solid #131314; */
    letter-spacing: 2px
}

.button:after,
.button:before {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%
}

.button--calypso {
    overflow     : hidden;
    font-family  : freight-display-pro, serif;
    font-size    : 2rem;
    border-radius: 500px;
    color        : #fff
}

.button--calypso span {
    display       : block;
    position      : relative;
    mix-blend-mode: difference;
    z-index       : 100
}

.button--calypso:hover span {
    animation: MoveScaleUpInitial .3s forwards, MoveScaleUpEnd .3s .3s forwards
}

.button--calypso:before {
    content       : "";
    background    : #0AC0FF;
    width         : 120%;
    height        : 0;
    padding-bottom: 120%;
    top           : -110%;
    left          : -10%;
    border-radius : 50%;
    transform     : translate3d(0, 68%, 0) scale3d(0, 0, 0)
}

.button--calypso:hover:before {
    transform : translateZ(0) scaleX(1);
    transition: transform .4s cubic-bezier(.1, 0, .3, 1)
}

.button--calypso:after {
    content   : "";
    background: #0AC0FF;
    transform : translate3d(0, -100%, 0);
    transition: transform .4s cubic-bezier(.1, 0, .3, 1)
}

.button--calypso:hover:after {
    transform                 : translateZ(0);
    transition-duration       : .05s;
    transition-delay          : .4s;
    transition-timing-function: linear
}

.button_form {
    background: #000
}

.button_form:after,
.button_form:before {
    background: #d4f7ff
}

.App {
    opacity: 0
}

body.loading {
    width     : 100vw;
    max-height: 100vh !important;
    overflow  : hidden
}

.loadingContainer__heading {
    width: 100%
}

.loadingContainer__heading--text {
    display        : flex;
    align-items    : flex-start;
    justify-content: center;
    position       : relative
}

.loadingContainer__heading--text h1 {
    overflow  : hidden;
    text-align: center;
    position  : relative
}

.loadingContainer__heading--text h1 .dot {
    background-color: #7c70d2;
    width           : 50px;
    height          : 50px;
    border-radius   : 50%;
    display         : inline-block
}

.loadingContainer__heading--text h1.message--text {
    position: absolute
}

.loadingContainer__heading--text h1 div.message h1 {
    transform: translateY(100%)
}

.loader__container {
    width   : 100vw;
    height  : 100vh;
    z-index : 100000;
    position: fixed;
    top     : 0;
    left    : 0
}

.loader__container .logo_container {
    width: 100vw
}

.loader__container lottie-player {
    -o-object-fit: cover;
    object-fit   : cover;
    position     : fixed;
    top          : 0;
    left         : 0;
    border       : 1px solid red;
    scale        : 1.2
}

.mf-cursor {
    position      : fixed;
    top           : 0;
    left          : 0;
    z-index       : 250;
    direction     : ltr;
    contain       : layout style size;
    pointer-events: none;
    transition    : opacity .3s, color .4s
}

.mf-cursor:before {
    content      : "";
    position     : absolute;
    top          : -24px;
    left         : -24px;
    display      : block;
    width        : 48px;
    height       : 48px;
    transform    : scale(.2);
    background   : currentColor;
    border-radius: 50%;
    transition   : transform .25s ease-in-out, opacity .1s
}

.mf-cursor.-inverse {
    color: #fff
}

@supports (mix-blend-mode:exclusion) {
    .mf-cursor.-exclusion {
        mix-blend-mode: exclusion
    }

    .mf-cursor.-exclusion:before {
        background: #fff
    }
}

.mf-cursor.-pointer:before {
    transform: scale(.15)
}

.mf-cursor.-text:before {
    opacity  : .85;
    transform: scale(1.7)
}

.mf-cursor.-text.-active:before {
    transform          : scale(1.6);
    transition-duration: .2s
}

.mf-cursor.-icon:before {
    transform: scale(1.5)
}

.mf-cursor.-icon.-active:before {
    transform: scale(1.4)
}

.mf-cursor.-hidden:before {
    transform: scale(0)
}

.mf-cursor-text {
    position       : absolute;
    top            : -18px;
    left           : -18px;
    width          : 36px;
    height         : 36px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    transform      : scale(0) rotate(10deg);
    opacity        : 0;
    color          : #fff;
    font-size      : 16px;
    line-height    : 20px;
    text-align     : center;
    transition     : opacity .4s, transform .3s
}

.mf-cursor.-icon .mf-cursor-text,
.mf-cursor.-text .mf-cursor-text {
    opacity  : 1;
    transform: scale(1)
}

.mf-cursor-media {
    position: absolute;
    width   : 400px;
    height  : 400px;
    margin  : -200px 0 0 -200px
}

.mf-cursor-media img,
.mf-cursor-media video {
    position     : absolute;
    top          : 50%;
    left         : 50%;
    transform    : translate(-50%, -50%);
    border-radius: 50%
}

@supports ((-o-object-fit:cover) or (object-fit:cover)) {

    .mf-cursor-media img,
    .mf-cursor-media video {
        position     : static;
        width        : 100%;
        height       : 100%;
        -o-object-fit: cover;
        object-fit   : cover;
        transform    : translateZ(0)
    }
}

.mf-cursor-media-box {
    position     : relative;
    width        : 100%;
    height       : 100%;
    overflow     : hidden;
    transform    : scale(0) translateZ(0);
    padding      : 1px;
    opacity      : 0;
    border-radius: 50%;
    transition   : transform .35s, opacity .2s .2s
}

.mf-cursor.-media .mf-cursor-media-box {
    opacity            : 1;
    transform          : scale(.696);
    transition-duration: .4s, .4s;
    transition-delay   : 0s, 0s
}

.cursor {
    --cursor-bg        : #f4a4b1;
    --cursor-blend-mode: difference;
    --gradient-text-1  : #85f2c3;
    --gradient-text-2  : #f66373;
    --color-text       : #000;
    --color-link       : #000;
    --color-link-hover : #000;
    --page-padding     : 1rem;
    --columns          : 30;
    --cursor-radius    : 0;
    height             : 100%;
    position           : fixed;
    width              : 100%;
    left               : 0;
    top                : 0;
    pointer-events     : none;
    z-index            : 99;
    mix-blend-mode     : difference;
    --size             : calc(100vw / var(--columns))
}

.cursor__inner {
    display              : grid;
    grid-template-columns: repeat(var(--columns), var(--size))
}

.cursor__inner-box {
    width        : var(--size);
    height       : var(--size);
    background   : var(--cursor-bg);
    opacity      : 0;
    border-radius: var(--cursor-radius)
}

@media screen and (min-width:53em) {
    :root {
        --columns     : 50;
        --page-padding: 2rem
    }

    .frame {
        grid-template-columns: auto auto auto 1fr;
        grid-template-areas  : "title prev sponsor demos";
        justify-items        : start;
        grid-gap             : 2rem
    }

    .frame__demos {
        justify-self: end
    }

    .frame__demos-item:first-child {
        width: auto
    }

    .content {
        align-items: center
    }
}

#sketchWrapper {
    width   : 100%;
    height  : 100%;
    position: fixed;
    top     : 0
}

#sketchWrapper canvas {
    position: absolute;
    width   : 100%;
    height  : 100%
}

input,
label {
    font-family: Trap_Bold !important
}

.css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root {
    background: #fff
}

.css-79ws1d-MuiModal-root {
    z-index: 100000 !important;
    border : 1px solid
}

.form_box.MuiBox-root {
    z-index       : 10000;
    padding-top   : 2rem;
    padding-bottom: 2rem
}

.modal_main {
    position: fixed;
    overflow: hidden
}

.modal_main h1 {
    text-align   : left;
    margin-bottom: 1.5rem
}

.modal_main .button {
    font-size : 2.5rem;
    margin-top: 1.5rem
}

.modal_main .modal_box {
    width          : 100%;
    height         : 100%;
    display        : flex;
    flex-direction : column;
    justify-content: space-evenly
}

.modal_main .modal_header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    width          : 100%;
    flex-grow      : 10%
}

.modal_main .inputs_container {
    display        : flex;
    flex-direction : column;
    justify-content: space-around;
    flex           : 0 0 60%
}

.modal_main .inputs_container .custom_input {
    width       : 75%;
    position    : relative;
    height      : 100%;
    margin-block: 2.5em
}

.modal_main .inputs_container .custom_input input {
    box-sizing   : border-box;
    width        : 100%;
    height       : 100%;
    border-radius: 20000px;
    font-size    : calc(.5vw + .5vh + .25vmin);
    line-height  : 1.1;
    padding      : 0 2.5rem;
    background   : #f2f2f2
}

.modal_main .inputs_container .custom_input input:focus {
    border : 1px solid #131314 !important;
    outline: 1px solid #131314 !important
}

.modal_main .inputs_container .custom_input input:-webkit-autofill,
.modal_main .inputs_container .custom_input input:-webkit-autofill:focus {
    -webkit-box-shadow     : inset 0 0 0 50px #fff;
    -webkit-text-fill-color: #333;
    border                 : 5px solid red
}

.modal_main .inputs_container .custom_input .custom_input_label {
    position       : absolute;
    top            : 50%;
    transform      : translate(25%, -50%);
    margin-left    : 1rem;
    background     : #f2f2f2;
    font-size      : calc(.6vw + .6vh + .3vmin);
    font-family    : Trap_Regular !important;
    display        : flex;
    justify-content: center;
    align-items    : center;
    line-height    : 1.1
}

.modal_main .inputs_container .custom_input .error_message {
    color         : red;
    font-size     : calc(.5vw + .5vh + .25vmin);
    margin        : .5rem 1rem;
    font-family   : Trap_Regular !important;
    text-transform: lowercase
}

.modal_main .form_cta_container {
    display    : flex;
    align-items: center;
    flex-grow  : 10%
}

.modal_main .form_cta_container button {
    padding      : 1rem 2rem;
    border-radius: 9000px;
    font-size    : 3rem;
    font-family  : Trap_Regular !important
}

.modal_main .form_cta_container button:after {
    border-radius: 500px
}

.modal_main .form_title {
    font-size: 4rem
}

.modal_main .form_box {
    width          : 60vw;
    height         : auto;
    aspect-ratio   : 16/10;
    background     : #f2f2f2;
    border-radius  : 2rem;
    position       : fixed;
    top            : 50%;
    left           : 50%;
    transform      : translate(-50%, -50%);
    padding        : 2rem;
    display        : flex;
    align-items    : flex-start;
    justify-content: space-around;
    flex-direction : column
}

.modal_main .close_cross {
    position      : absolute;
    right         : 0;
    top           : 0;
    pointer-events: auto
}

.modal_main .close_cross img {
    width : 100%;
    height: 100%;
    scale : .75
}

/* Cursor ai begin code change  */
.button-container {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .button--social {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: white;
    border: 1px solid #e0e0e0; */
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  .button--social:hover {
    transform: scale(1.1);
  }
  
  .button--social img {
    width: 24px;
    height: 24px;
  }

  .button--social svg {
    width: 24px;
    height: 24px;
    }
    .button--twitter svg {
    fill: #033270;
    }
    .button--instagram svg {
    fill: #033270;
    }
/* Cursor ai end code change */

.modal_main .success_container {
    position       : absolute;
    width          : 100%;
    height         : 100%;
    left           : 0;
    border-radius  : 1.5rem;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
    text-align     : center;
    opacity        : 0;
    z-index        : -100;
    overflow       : hidden;
    pointer-events : none;
    margin         : 4rem 0
}

.modal_main .success_container .success_container_header {
    display        : flex;
    justify-content: center;
    align-items    : flex-end;
    flex           : 0.25
}

.modal_main .success_container .success_container_header h1 {
    margin : 0;
    padding: 0
}

.modal_main .success_container .success_container_main {
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex           : 0.5;
    width          : 100%
}

.modal_main .success_container .sucess_container_footer {
    display        : flex;
    justify-content: center;
    align-items    : flex-start;
    flex           : 0.25
}

.modal_main .success_container h1 {
    text-align: center;
    max-width : 80%
}

.modal_main .success_container:after {
    content         : "";
    position        : absolute;
    width           : 35vw;
    height          : 35vw;
    background-color: #faf0ff;
    border-radius   : 50%;
    top             : 50%;
    left            : 50%;
    transform       : translate(-50%, -50%);
    z-index         : -1
}

.modal_main .success_container .close_cross {
    pointer-events: auto;
    all           : unset;
    position      : absolute;
    right         : 0;
    top           : 0
}

.modal_main .success_container .close_cross img {
    width : 100%;
    height: 100%;
    scale : .75
}

.modal_main .success_container .img_container {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 100%
}

.modal_main .success_container .img_container img {
    width: 50%
}

.modal_main .success_container .img_container .left {
    transform: translateX(-100%)
}

.modal_main .success_container .img_container .right {
    transform: translateX(100%)
}

.moon_container {
    position: absolute;
    top     : 0;
    left    : 0;
    height  : 30rem;
    width   : 30rem
}

.color__slide--purple {
    background-color: #F26A4F
}

.color__slide--lime {
    background-color: #FEDFD4
}

/* First set of Backgrounds */
.color__slide--blue {
    /* background-color: #bdf4fe */
    /* Reflects Logo */
    background-color: #8CF8FB
}

.color__slide--green {
    background-color: #f26a4f
}

.border {
    border: 2px solid red
}

.border2 {
    border: 2px solid green
}

.gnooDifference_header {
    margin-left: 5vw;
    width      : 80vw
}

.gnooDifference_description {
    transform: translateY(20%)
}

.gnooBetter_title .char {
    opacity: 0
}

.gnooBetter_description {
    transform: translateY(40%)
}

.landing_desktop_description {
    opacity: 0
}

body::-webkit-scrollbar {
    display: none
}

.filler {
    width : 100%;
    height: 100vw
}

.word,
.word .char {
    display: inline-block
}

.word .char {
    opacity: 0
}

.slide_container {
    position       : fixed;
    top            : 0;
    height         : 100vh;
    display        : flex;
    align-items    : center;
    justify-content: center;
    z-index        : 4;
    pointer-events : none
}

.slide_container>div {
    width   : 100vw;
    height  : 100vh;
    position: relative
}

.slide_container .intro_slide {
    display        : flex;
    align-items    : flex-start;
    justify-content: center;
    flex-direction : column;
    width          : 80vw;
    height         : 100vh;
    margin         : auto;
    position       : relative
}

.slide_container .intro_slide.text_container {
    height: 80vh
}

.slide_container .lottie_div.slide_second {
    height         : 100vh;
    align-items    : flex-start;
    justify-content: space-around
}

.slide_container .lottie_div {
    display        : flex;
    align-items    : center;
    justify-content: center
}

.slide_container .lottie_div .intro_slide {
    width : 60vw;
    margin: 0;
    height: 80vh
}

.slide_container .lottie_div .lottie {
    display        : flex;
    align-items    : flex-end;
    justify-content: flex-end;
    height         : 100vh
}

.slide_container .lottie_div .lottie .phone_image {
    width   : auto;
    position: relative;
    margin  : auto;
    height  : 100vh
}

.slide_container .lottie_div .lottie .phone_image img {
    width: 100%
}

.slide_container .lottie_div .lottie lottie-player {
    z-index  : 100;
    left     : 0;
    width    : 100%;
    transform: scale(1.3)
}

.slide_container .third {
    justify-content: space-evenly;
    align-items    : flex-end;
    position       : relative
}

.slide_container .third .image_container {
    position: absolute;
    z-index : -1;
    top     : 20px;
    right   : 0;
    width   : 300px;
    height  : auto
}

.slide_container .third .image_container img {
    width: 100%
}

.slide_container .third h1 {
    white-space: nowrap
}

.slide_container .third p {
    line-height  : 1.1;
    margin-bottom: 1.5rem
}

.slide_container .mobile_div {
    display        : flex;
    align-items    : center;
    justify-content: space-around
}

.slide_container .mobile_div .intro_slide {
    width : 50vw;
    margin: 0
}

.slide_container .mobile_div .phone_last {
    height  : 100vh !important;
    position: unset;
    display : flex
}

.slide_container .mobile_div .phone {
    aspect-ratio: 8/16;
    height      : 80vh !important;
    position    : relative
}

.slide_container .mobile_div .phone .text_container {
    position  : absolute;
    left      : 50%;
    top       : 10%;
    transform : translateX(-50%);
    z-index   : 1;
    text-align: center
}

.slide_container .mobile_div .phone .text_container p {
    font-size: 4rem !important
}

.slide_container .mobile_div .phone .text_container p:before {
    content         : "";
    position        : absolute;
    width           : 80%;
    aspect-ratio    : 1/1;
    background-color: #F26A4F;
    border-radius   : 50%;
    left            : 50%;
    top             : 50%;
    transform       : translate(-50%, -50%);
    z-index         : -1
}
/* conveyor belt phone border */
.slide_container .mobile_div .phone .mobile {
    width           : 100%;
    height          : 100%;
    background-color: transparent;
    border-radius   : 3rem;
    border          : 5px solid #ffffff;
    transform       : rotateY(10deg);
    overflow        : hidden
}

.slide_container .mobile_div .phone .mobile .phone__canvas {
    width   : 100%;
    height  : 100%;
    position: absolute;
    top     : 0;
    left    : 0;
    z-index : -1
}

.color__slidecontainer {
    position       : fixed;
    top            : 0;
    height         : 100vh;
    display        : flex;
    align-items    : center;
    justify-content: center;
    z-index        : -100
}

.color__slidecontainer>div {
    width   : 100vw;
    height  : 100vh;
    position: relative
}

.fixed_image {
    position: fixed;
    bottom  : 0;
    left    : 40vw;
    opacity : 0;
    z-index : 1;
    height  : 40vh;
    width   : 15vw
}

.fixed_image img {
    width: 100%
}

#progress {
    position : fixed;
    top      : 20px;
    left     : 20px;
    transform: rotate(-90deg);
    z-index  : 1000
}

circle {
    stroke-dashoffset: 0;
    stroke-width     : 15%;
    fill             : none
}

#progress .indicator {
    stroke: red
}

.product-page-recommendations {
    background-color: #1e1e1e
}

.intro_slide.fourth_slide {
    position: relative
}

.intro_slide.fourth_slide .image_container {
    position: absolute;
    left    : 15%;
    top     : 50%;
    width   : 300px;
    z-index : -1
}

.intro_slide.fifth__slide,
.intro_slide.fourth_slide {
    pointer-events: auto
}

.intro_slide.sixth__slide {
    align-items: flex-end;
    height     : 75vh
}

.intro_slide.sixth__slide .image_container {
    position: absolute;
    bottom  : -60%;
    left    : 50%;
    width   : 400px;
    z-index : -1
}

.intro_slide.sixth__slide .image_container img {
    width: 100%
}

.intro_slide.seventh__slide {
    width          : 90vw;
    align-items    : center;
    pointer-events : auto;
    justify-content: center;
    height         : 80vh
}

.intro_slide.seventh__slide .slide_text_container {
    display        : flex;
    align-items    : flex-start;
    justify-content: space-around;
    width          : 100%
}

.intro_slide.seventh__slide .slide_text_container .poweredByContainer {
    width: 30%
}

.intro_slide.seventh__slide .search_lottie_container {
    margin-top: 100px;
    width     : 50vw
}

.intro_slide.seventh__slide .image_container {
    position: absolute;
    z-index : -1;
    right   : -20%;
    width   : 20%;
    top     : -10%
}

.intro_slide.seventh__slide .image_container img {
    width: 80%
}

.intro_slide.eight__slide {
    align-items    : center;
    position       : static;
    height         : 50vh;
    justify-content: center
}

.intro_slide.eight__slide .play_way {
    margin-left: 20%
}

.intro_slide.eight__slide .coin_canvas_container {
    position: absolute;
    width   : 100vw;
    height  : 100vh;
    left    : 0;
    top     : 0
}

.intro_slide.ninth__slide {
    pointer-events: auto;
    height        : 76vh;
    width         : 66vw;
    padding-left  : 15%
}

.intro_slide.ninth__slide,
.mobile_div .intro_slide.fourth_slide {
    justify-content: flex-start
}

.mobile_div.last {
    pointer-events: auto
}

.mobile_div.last .intro_slide {
    width: 60vw
}

.mobile_div.last .phone {
    width : 40vw;
    height: 100vh
}

.navbar__container {
    width          : 100vw;
    position       : fixed;
    top            : 0;
    left           : 0;
    height         : 10rem;
    z-index        : 10000;
    display        : flex;
    justify-content: space-between;
    align-items    : center
}

.navbar__container .nav_filler {
    flex: 5
}

.navbar__container .logo__container {
    flex           : 1;
    height         : 100%;
    position       : relative;
    display        : flex;
    justify-content: center;
    align-items    : center
}

.navbar__container .logo__container .lottie__container {
    height     : 100%;
    position   : absolute;
    scale      : 1.25;
    margin-left: -1rem
}

.navbar__container .button {
    flex          : 1;
    pointer-events: auto;
    cursor        : pointer;
    background    : #73D9FC;
    border        : none;
    padding       : 1.5rem 3rem 1.25rem;
    margin        : 0 4.5rem;
    position      : relative;
    display       : inline-block;
    color         : #fff;
    font-family   : Trap_Regular !important;
    /* border        : 2px solid rgba(212, 247, 255, .75); */
    letter-spacing: 1.2px
}

.navbar__container .button:hover {
    /* border: 2px solid rgba(0, 0, 0, .8) */
}

.navbar__container .button:after,
.navbar__container .button:before {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%
}

.navbar__container .button--calypso {
    overflow     : hidden;
    font-family  : freight-display-pro, serif;
    font-size    : 2rem;
    border-radius: 3.5rem;
    color        : hsla(0, 0%, 100%, .8)
}

.navbar__container .button--calypso span {
    display       : block;
    position      : relative;
    mix-blend-mode: difference;
    z-index       : 10
}

.navbar__container .button--calypso:hover span {
    animation: MoveScaleUpInitial .3s forwards, MoveScaleUpEnd .3s .3s forwards
}

@keyframes MoveScaleUpInitial {
    to {
        transform: translate3d(0, -105%, 0) scaleY(2);
        opacity  : 0
    }
}

@keyframes MoveScaleUpEnd {
    0% {
        transform: translate3d(0, 100%, 0) scaleY(2);
        opacity  : 0
    }

    to {
        transform: translateZ(0);
        opacity  : 1
    }
}

.navbar__container .button--calypso:before {
    content       : "";
    /* background    : #d4f7ff; */
    width         : 120%;
    height        : 0;
    padding-bottom: 120%;
    top           : -110%;
    left          : -10%;
    border-radius : 50%;
    transform     : translate3d(0, 68%, 0) scale3d(0, 0, 0)
}

.navbar__container .button--calypso:hover:before {
    transform : translateZ(0) scaleX(1);
    transition: transform .4s cubic-bezier(.1, 0, .3, 1)
}

.navbar__container .button--calypso:after {
    content   : "";
    background: #0AC0FF;
    transform : translate3d(0, -100%, 0);
    transition: transform .4s cubic-bezier(.1, 0, .3, 1)
}

.navbar__container .button--calypso:hover:after {
    transform                 : translateZ(0);
    transition-duration       : .05s;
    transition-delay          : .4s;
    transition-timing-function: linear
}

.intro_slide.fourth_slide {
    display        : flex;
    flex-direction : row;
    width          : 100vw;
    height         : 100vh;
    justify-content: space-around;
    align-items    : center
}

.intro_slide.fourth_slide .bridge__container {
    width           : 40vw;
    height          : 40vw;
    display         : flex;
    justify-content : center;
    align-items     : center;
    border-radius   : 50%;
    /* background-color: #2c5952; */
    background-image: url(https://cdn.dribbble.com/users/2617533/screenshots/15139161/media/43cdd95abe8a38ddf9ba64607be72c63.jpg?resize=1600x1200&vertical=center);
    background-size: cover;
    background-repeat: no-repeat;
    position        : relative;
    z-index         : 10;
    overflow        : hidden
}

.bridge__canvas {
    opacity: 0
}

.vertical_section_container {
    width   : 100vw;
    position: fixed;
    z-index : 1000;
    top     : -300%
}

.vertical_section_container .astronaut_container {
    width          : 100%;
    height         : 100vh;
    display        : flex;
    align-items    : center;
    justify-content: space-around;
    position       : relative
}

.vertical_section_container .astronaut_container .text_container {
    width: 40%
}

.vertical_section_container .astronaut_container .text_container h1 {
    color        : #fff;
    margin-bottom: 1.5rem
}

.vertical_section_container .astronaut_container .text_container button {
    color        : #fff;
    border-color : #fff;
    padding      : 20px 55px;
    font-size    : 2rem;
    border-radius: 55px
}

.vertical_section_container .astronaut_container .lottie_container {
    position: absolute;
    top     : 0;
    width   : 100%
}

.vertical_section_container .astronaut_container .cloud_container {
    position: absolute;
    z-index : -1;
    top     : 50%;
    width   : 100%
}

.vertical_section_container .astronaut_container .cloud_container img {
    width: 100%
}

.vertical_section_container .association_container {
    width          : 100%;
    height         : 100vh;
    display        : flex;
    align-items    : center;
    justify-content: center;
    position       : relative;
    flex-direction : column
}

.vertical_section_container .association_container h1 {
    color        : #fff;
    margin-bottom: 0
}

.vertical_section_container .association_container .cards_container {
    width                : 90%;
    margin               : auto;
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr))
}

.vertical_section_container .association_container .cards_container .card .image_container {
    display        : flex;
    align-items    : center;
    justify-content: center;
    position       : relative
}

.vertical_section_container .association_container .cards_container .card .image_container img {
    width: 20vw
}

.vertical_section_container .association_container .cards_container .card .image_container .text_container {
    position  : absolute;
    bottom    : 30%;
    text-align: center;
    margin    : auto
}

.vertical_section_container .association_container .cards_container .card .image_container .text_container h2 {
    font-size    : 2rem;
    margin-bottom: -20px
}

.vertical_section_container .association_container .cards_container .card .image_container .text_container p {
    font-size: 2.5rem;
    max-width: 70%;
    margin   : auto
}

.vertical_section_container .association_container .cloud_img {
    position: absolute;
    bottom  : -40%;
    left    : 0;
    width   : 100%;
    z-index : -1
}

.giftMobile {
    width             : 100%;
    height            : 100%;
    background-color  : transparent;
    border-radius     : 50px;
    border            : 5px solid #ffffff;
    border-right-width: 20px;
    transform         : rotateY(10deg);
    overflow          : hidden
}

.giftMobile .giftPhone__canvas {
    width   : 100%;
    height  : 100%;
    position: absolute;
    top     : 0;
    left    : 0;
    z-index : -1
}

.phone-canvas-container-test {
    position: absolute;
    top     : 0;
    left    : 0;
    right   : 0;
    bottom  : 0;
    width   : 100%;
    height  : 100%
}

.fixed_image img {
    position: fixed;
    bottom  : 0
}

.fixed_image .m_2 {
    opacity: 0
}

.footer {
    position: absolute;
    right   : -30%;
    top     : 0
}

.footer .footer_container {
    width           : 30vw;
    height          : 100vh;
    background-color: #f26a4f;
    padding         : 1.5rem;
    display         : flex;
    align-items     : flex-start;
    justify-content : space-between;
    flex-direction  : column;
    overflow        : hidden;
    position        : relative;
    cursor          : auto
}

.footer .footer_container .footer__circles {
    width   : 100%;
    flex    : 0.7;
    overflow: hidden;
    margin  : 0;
    padding : 0
}

.footer .footer_container .footer__circles .footer__circle {
    border-radius: 50%;
    position     : absolute;
    background   : #fff
}

.footer .footer_container .footer__circles .footer__circle1 {
    height: 15rem;
    width : 15rem;
    top   : 60%;
    left  : -10%
}

.footer .footer_container .footer__circles .footer__circle_small1 {
    height: 2rem;
    width : 2rem;
    top   : 60%;
    left  : 27%
}

.footer .footer_container .footer__circles .footer__circle2 {
    height: 25rem;
    width : 25rem;
    top   : 15%;
    right : 5%
}

.footer .footer_container .footer__circles .footer__circle_small2 {
    height: 2rem;
    width : 2rem;
    top   : 80.5%;
    right : 50%
}

.footer .footer_container .footer__circles .footer__circle3 {
    height: 11rem;
    width : 11rem;
    top   : 80%;
    right : 20%
}

.footer .footer_container .section_bottom {
    flex           : 0.1;
    display        : flex;
    width          : 100%;
    align-items    : center;
    justify-content: space-between;
    padding        : 0;
    margin-bottom  : -1.8rem
}

.footer .footer_container .section_bottom p {
    color    : #fff;
    font-size: 1rem
}

.footer .footer_container .section_bottom a {
    margin         : 0 20px;
    color          : #000;
    text-decoration: none;
    font-size      : 1.5rem
}

.footer .footer_container .section_top {
    flex       : 0.1;
    display    : flex;
    align-items: end
}

.footer .footer_container .section_top .footer__logo {
    height: 70%
}

.footer .footer_container .section_top .social_container img {
    margin-right: 25px
}

.mf-cursor:before {
    background: #f26a4f;
    z-index   : 9999999;
    scale     : .5;
    opacity   : 1 !important
}

body {
    cursor: none
}

body:has(.modal_main) {
    cursor: unset
}

div.mf-cursor {
    z-index: 10001
}

@media screen and (min-width:640px) {
    .mobile_section_container {
        display: none
    }
}

@media screen and (max-width:640px) {
    body {
        background-color: #87f7f9
    }

    .modal_main h1 {
        font-size: 4rem
    }

    .modal_main .form_box {
        width: 95vw
    }

    .modal_main .inputs_container {
        flex: 0 0 40%
    }

    .modal_main .inputs_container .custom_input input {
        padding  : 2.5rem;
        font-size: 2rem
    }

    .loader__container .logo__container {
        width        : 100vw;
        height       : 100vh;
        -o-object-fit: contain;
        object-fit   : contain
    }

    .loader__container .logo__container lottie-player {
        transform: scale(1.2)
    }

    .navbar__container {
        height: 100px
    }

    .navbar__container .btn_container,
    .navbar__container .logo__container {
        padding: 2rem
    }

    .navbar__container .button {
        font-size: 2rem;
        margin   : 0;
        display  : none
    }

    .colors_container {
        position: absolute;
        top     : 0;
        left    : 0;
        z-index : -10;
        width   : 100vw;
        height  : auto
    }

    .mobile_section_container {
        width   : 100vw;
        z-index : 0;
        position: relative
    }

    .mobile_section_container .fixed_image {
        left           : 50%;
        bottom         : 25%;
        opacity        : 0;
        width          : 50%;
        height         : 500px;
        transform      : translateX(-50%);
        z-index        : 1;
        display        : flex;
        align-items    : center;
        justify-content: center
    }

    .mobile_section_container .fixed_image img {
        width : 100%;
        bottom: unset
    }

    .mobile_section_container .mobile_section {
        width          : 100%;
        margin         : auto;
        min-height     : 100vh;
        display        : flex;
        align-items    : flex-start;
        justify-content: center;
        flex-direction : column;
        z-index        : 2;
        position       : relative
    }

    .mobile_section_container .mobile_section .mobile_container {
        width : 90%;
        margin: auto
    }

    .mobile_section_container .mobile_section .mobile_container .mobile_heading_primary {
        font-size  : 5.5rem;
        position   : relative;
        z-index    : 0;
        line-height: 1.1
    }

    .mobile_section_container .mobile_section .mobile_container .mobile_heading_primary.backdrop:before {
        content         : "";
        position        : absolute;
        left            : -10px;
        top             : -30px;
        background-color: #F26A4F;
        width           : 100px;
        height          : 100px;
        border-radius   : 50%;
        z-index         : -1
    }

    .mobile_section_container .mobile_section .mobile_container .mobile_heading_banner {
        font-size  : 10rem;
        line-height: 1.1
    }

    .mobile_section_container .mobile_section .mobile_container .landing_mobile_description {
        opacity: 0
    }

    .mobile_section_container .mobile_section .mobile_container .mobile_description_primary {
        font-size  : 4rem;
        margin     : 35px 0;
        line-height: 1.2;
        position   : relative
    }

    .mobile_section_container .mobile_section .mobile_container .mobile_description_primary.backdrop:before {
        content         : "";
        position        : absolute;
        left            : -20px;
        top             : -15%;
        background-color: #F26A4F;
        width           : 80px;
        height          : 80px;
        border-radius   : 50%;
        z-index         : -1
    }

    .mobile_section_container .mobile_section .mobile_container .mobile_description_secondary {
        font-size  : 3rem;
        margin     : 35px 0;
        line-height: 1.2
    }

    .mobile_section_container .mobile_section .mobile_container .mobile_description_large {
        font-size: 4.5rem
    }

    .mobile_section_container .mobile_section .mobile_container .button {
        pointer-events: auto;
        cursor        : pointer;
        padding       : 2rem 3rem;
        margin        : 0;
        position      : relative;
        display       : inline-block;
        color         : #fff;
        font-family   : Trap_Regular !important;
        border        : 2px solid #ffffff;
        letter-spacing: 1.2px
    }

    .mobile_section_container .mobile_section .mobile_container .button--calypso {
        overflow     : hidden;
        font-family  : freight-display-pro, serif;
        font-size    : 3.5rem;
        border-radius: 9999px;
        color        : #fff
    }

    .mobile_section_container .mobile_section_one .mobile_container .text_container {
        margin-bottom: 50px
    }

    .mobile_section_container .mobile_section_four,
    .mobile_section_container .mobile_section_four .mobile_container {
        min-height: 60vh
    }

    .mobile_section_container .mobile_section_four .mobile_container .text_container {
        min-height     : 60vh;
        display        : flex;
        flex-direction : column;
        justify-content: space-between
    }

    .mobile_section_container .mobile_section_four svg {
        max-width: 90%;
        margin   : auto
    }

    .mobile_section_container .mobile_section_eight,
    .mobile_section_container .mobile_section_seven,
    .mobile_section_container .mobile_section_six {
        min-height: 60vh
    }

    .mobile_section_container .mobile_section_five {
        overflow-x: hidden
    }

    .mobile_section_container .mobile_section_five .mobile_container {
        margin: 0 0 0 auto
    }

    .mobile_section_container .mobile_section_five .lottie_container {
        position: relative
    }

    .mobile_section_container .mobile_section_five .lottie_container .convyor_lottie {
        position: absolute;
        left    : -30%;
        top     : 10%;
        z-index : -1
    }

    .mobile_section_container .mobile_section_five .lottie_container .text_container {
        position       : absolute;
        left           : 5%;
        top            : 8%;
        width          : 90%;
        z-index        : 1;
        display        : flex;
        align-items    : center;
        justify-content: center;
        flex-direction : column
    }

    .mobile_section_container .mobile_section_five .lottie_container .curated {
        font-size: 3.5rem;
        position : relative
    }

    .mobile_section_container .mobile_section_five .lottie_container .curated:before {
        content         : "";
        position        : absolute;
        top             : -10px;
        left            : 12.5%;
        width           : 100px;
        height          : 100px;
        background-color: #F26A4F;
        border-radius   : 50%;
        z-index         : -1
    }

    .mobile_section_container .mobile_section_two .mobile_container {
        display        : flex;
        align-items    : flex-start;
        justify-content: flex-start;
        flex-direction : column
    }

    .mobile_section_container .mobile_section_two .mobile_container .lottie_slider_section {
        height: 100vh;
        width : 100%
    }

    .mobile_section_container .mobile_section_two .mobile_container .mobile_lottie_section {
        position: sticky;
        top     : 5%
    }

    .mobile_section_container .mobile_section_four .bridge__container {
        width          : 100%;
        aspect-ratio   : 1/1;
        display        : flex;
        justify-content: center;
        align-items    : center;
        border-radius  : 50%;
        position       : relative;
        z-index        : 10;
        overflow       : hidden
    }

    .mobile_section_container .mobile_section_eight .mobile_container {
        width: 100%
    }

    .mobile_section_container .mobile_section_eight .mobile_container .text_container {
        width : 90%;
        margin: auto
    }

    .mobile_section_container .mobile_section_ten {
        padding-bottom: 100px
    }

    .mobile_section_container .mobile_section_ten .mobile_cloud_top {
        position: absolute;
        top     : -24%;
        width   : 100%
    }

    .mobile_section_container .mobile_section_ten .mobile_cloud_bottom {
        position: absolute;
        bottom  : -10%;
        width   : 100%
    }

    .mobile_section_container .mobile_section_ten .mobile_container {
        position: relative
    }

    .mobile_section_container .mobile_section_ten .mobile_container .cards_container_section .heading {
        margin-bottom: 40px
    }

    .mobile_section_container .mobile_section_ten .mobile_container .cards_container_section .cards_container .cards {
        max-width      : 90%;
        margin-bottom  : 30px;
        display        : flex;
        align-items    : center;
        justify-content: center;
        position       : relative
    }

    .mobile_section_container .mobile_section_ten .mobile_container .cards_container_section .cards_container .cards .mobile_description_secondary {
        font-size  : 4rem;
        margin     : 20px;
        line-height: 1.2
    }

    .mobile_section_container .mobile_section_ten .mobile_container .cards_container_section .cards_container .cards img {
        width: 100%
    }

    .mobile_section_container .mobile_section_ten .mobile_container .cards_container_section .cards_container .cards p {
        position: absolute;
        bottom  : 10%
    }

    .mobile_section_container .mobile_section_eleven {
        padding-bottom: 8rem
    }

    .mobile_section_container .mobile_section_eleven .mobile_heading_primary.backdrop:before {
        left: -10px;
        top : 0 !important
    }

    .mobile_section_container .mobile_section_eleven .mobile_container {
        width: 100%
    }

    .mobile_section_container .mobile_section_eleven .mobile_container .text_container {
        width : 90%;
        margin: auto
    }

    .mobile_section_container .mobile_section_eleven .astro_container {
        margin         : auto;
        width          : 50%;
        height         : 500px;
        z-index        : 1;
        display        : flex;
        align-items    : center;
        justify-content: center
    }

    .mobile_section_container .mobile_section_eleven .astro_container img,
    .mobile_section_container .mobile_section_footer .mobile_container {
        width: 100%
    }

    .mobile_section_container .mobile_section_footer .mobile_container .footer {
        position: static
    }

    .mobile_section_container .mobile_section_footer .mobile_container .footer .footer_container {
        width: 100%
    }

    .mobile_section_container .mobile_section_nine .lottie_container {
        position   : relative;
        display    : flex;
        align-items: center
    }

    .mobile_section_container .mobile_section_nine .text_container {
        position      : absolute;
        top           : 8%;
        width         : 100%;
        z-index       : 1;
        display       : flex;
        align-items   : center;
        flex-direction: column
    }

    .mobile_section_container .mobile_section_nine .text_container .mobile_description_secondary {
        text-align: center;
        max-width : 90%;
        margin    : auto
    }

    .mobile_section_container .mobile_section_nine .curated {
        font-size : 3.5rem;
        position  : relative;
        text-align: center
    }

    .mobile_section_container .mobile_section_nine .curated:before {
        content         : "";
        position        : absolute;
        top             : -20px;
        left            : 50%;
        transform       : translateX(-50%);
        width           : 100px;
        height          : 100px;
        background-color: #F26A4F;
        border-radius   : 50%;
        z-index         : -1
    }

    .footer .footer_container .section_bottom {
        padding-bottom: 3rem;
        padding-left  : 1rem
    }

    .footer .footer_container .section_bottom p {
        font-size: 3rem
    }
}

.gnooDifference_description_mobile {
    transform: translateY(10%)
}

.mobile__footer__circles {
    width   : 100%;
    flex    : 0.7;
    overflow: hidden;
    margin  : 0;
    padding : 0
}

.mobile__footer__circles .footer__circle {
    border-radius: 50%;
    position     : absolute;
    background   : #fff
}

.mobile__footer__circles .footer__circle1 {
    height: 25rem;
    width : 25rem;
    top   : 60%;
    left  : -10%
}

.mobile__footer__circles .footer__circle_small1 {
    height: 5rem;
    width : 5rem;
    top   : 60%;
    left  : 40%
}

.mobile__footer__circles .footer__circle2 {
    height: 35rem;
    width : 35rem;
    top   : 15%;
    right : -25%
}

.mobile__footer__circles .footer__circle_small2 {
    height: 3rem;
    width : 3rem;
    top   : 72.5%;
    right : 20%
}

.mobile__footer__circles .footer__circle3 {
    height: 15rem;
    width : 15rem;
    top   : 75%;
    right : -5%
}

.gnooBetter_cta {
    position: absolute
}

:root {
    font-size: 16px
}

@media only screen and (max-width:767px) {
    :root {
        font-size: 7px
    }

    .custom_input {
        width: 100% !important
    }

    .form_box {
        height: 75vh !important
    }

    .success_container:after {
        width : 25rem !important;
        height: 25rem !important
    }
}

@media only screen and (min-width:768px) and (max-width:1199px) {
    :root {
        font-size: 8px
    }
}

@media only screen and (min-width:1200px) and (max-width:1599px) {
    :root {
        font-size: 10px
    }
}

@media only screen and (min-width:1600px) and (max-width:1920px) {
    :root {
        font-size: 14px
    }
}

@media only screen and (width:1920px) and (height:1280px) {
    .mobile_div .phone_last #giftPhoneLottieAnim {
        margin-top: 2.5rem
    }
}

@media only screen and (min-width:1921px) and (max-width:2150px) {
    :root {
        font-size: 18px
    }
}

@media only screen and (min-width:2151px) {
    :root {
        font-size: 22px
    }

    .astronaut_container .image_container img {
        width: 24rem !important
    }
}

.slide_container .lottie_div .desktopCard_lottie {
    height: 100vh;
    top   : 0
}

.heading__primary {
    font-size  : calc(4vw + 4vh + 2vmin);
    line-height: 1.2
}

.heading__secondary {
    font-size  : calc(3.25vw + 3.25vh + 1.75vmin);
    line-height: 1.4
}

.description__primary {
    font-size  : calc(1.5vw + 1.5vh + .75vmin);
    line-height: 1.1
}

.description__secondary {
    font-size  : calc(1.2vw + 1.2vh + .6vmin);
    line-height: 1.1
}

.div .cutNoise {
    width   : 60vw;
    height  : 100%;
    position: relative
}

.div .cutNoise .cutNoise__description {
    position: absolute;
    top     : 20%;
    left    : 25%
}

.phone__container {
    height         : 100%;
    display        : flex;
    justify-content: center;
    align-items    : center;
    position       : relative
}

.phone__container .lottie_conveyor {
    position : absolute;
    top      : 0;
    z-index  : -1;
    left     : 10%;
    transform: translate(-50%)
}

.handPickedSlide .handPickedContainer {
    flex    : 1;
    height  : 100%;
    position: relative
}

.handPickedSlide .handPickedContainer .handPick {
    position: absolute;
    top     : 20%;
    left    : 25%
}

.handPickedSlide .phone__container {
    flex: 1
}

.memberBenefitsContainer .memberBenefitsDescription {
    flex    : 1;
    height  : 100%;
    position: relative
}

.memberBenefitsContainer .memberBenefitsDescription .memberBenefits {
    position: absolute;
    top     : 20%;
    left    : 25%
}

.memberBenefitsContainer .memberBenefitsPhone {
    flex  : 1;
    height: 100%
}

.gamifiedContainer {
    height  : 100%;
    position: relative
}

.gamifiedContainer .gamifiedApp {
    position: absolute;
    top     : 20%;
    left    : 25%
}

.smartShopping {
    position: absolute;
    top     : 20%
}