:root {
    font-variant-ligatures: no-common-ligatures;
}

/*html {*/
/*    height: 100%;*/
/*}*/



.maayan-logo {

}


/*<editor-fold desc="Hero">*/

/*                  */
/*      Hero        */
/*                  */

@keyframes fadeInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.maayan-hero-block {
    padding-top: 8rem;
    padding-bottom: 6rem;
    padding-inline: 1rem;
    /*height: 85vh;*/
    display: flex;
    justify-content: space-around;
    align-items: center;
}

@property --myn-bg-hero-angle{
    syntax: '<angle>';
    inherits: false;
    initial-value: 110deg;
}

@property --myn-bg-hero-step1 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0.03%;
}

@property --myn-bg-hero-step2 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 99.93%;
}


.maayan-hero-background {
/*    background: linear-gradient(110deg,
                    #6e2548,
                    #6c2449,
                    #5d204d,
                    #321f48,
                    #111e39,
                    #051d33,
                    #051d33,
                    #072238,
                    #0c324c,
                    #0a4b69,
                    #045674,
                    #035776);*/
    box-shadow: inset 0 0 20vw black;
    background-image:
            linear-gradient(
                    var(--myn-bg-hero-angle),
                    /*#051d33,*/
                    #000,
                    #000 calc(var(--myn-bg-hero-step1) - 0.02%),
                    #051d33 calc(var(--myn-bg-hero-step1) - 0.01%),
                    #6e2548 var(--myn-bg-hero-step1),
                    #051d33,
                    #035776 var(--myn-bg-hero-step2),
                    #051d33 calc(var(--myn-bg-hero-step2) + 0.01%),
                    #000 calc(var(--myn-bg-hero-step2) + 0.02%),
                    #000);
                    /*#051d33);*/
    animation: myn-hero-bg 2500ms ease-in-out 1;
}

@keyframes myn-hero-bg {
    0% {
        --myn-bg-hero-angle: 80deg;
        --myn-bg-hero-step1: 49.99%;
        --myn-bg-hero-step2: 50.01%;
    }
    20% {
        --myn-bg-hero-angle: 80deg;
        --myn-bg-hero-step1: 49.99%;
        --myn-bg-hero-step2: 50.01%;
    }
/*    80% {
        --myn-bg-hero-angle: 90deg;
        --myn-bg-hero-step1: 0.02%;
        --myn-bg-hero-step2: 99.98%;
    }*/
    100% {
        --myn-bg-hero-angle: 110deg;
        --myn-bg-hero-step1: 0.02%;
        --myn-bg-hero-step2: 99.98%;
    }
}

.maayan-hero-layout {
    display: flex;
    visibility: visible;
    opacity: 1;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
    animation: myn-hero-layout 2500ms ease-in-out 1;
}

@keyframes myn-hero-layout {
    0% {
        visibility: hidden;
        opacity: 0;
    }
    40% {
        visibility: hidden;
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}

.maayan-hero-main-text {
    padding-block: 3vh;
    font-family: var(--e-global-typography-section_title-font-family);
    font-weight: bold;
    font-size: min(8.8vw, 100px);
    line-height: 1.2em;
    color: transparent;
    text-align: center;
    background: linear-gradient(to right, #00CCFF, #AD4E87);
    background-clip: text;
    white-space: nowrap;
    opacity: 1;
    animation: fadeIn 1.5s;
}

.maayan-hero-main-dash {
    position: relative;
    bottom: -0.2em;
}

.maayan-hero-logo_highlight {
    background: linear-gradient(to right, #AD4E87, #465aac);
    background-clip: text;
}

.maayan-hero-secondary-text {
    /*padding-block-start: 2em;*/
    /*padding-block-end: 2em;*/
    padding-block: 5vh;
    font-family: var(--e-global-typography-text-font-family);
    font-weight: lighter;
    font-size: 25px;
    color: var(--e-global-color-white);
    text-align: center;
    line-height: 1.3em;
    opacity: 1;
    animation: fadeIn 1s;

}

.maayan-hero-main-text-scroll {
    line-height: 1.2em;
}

.maayan-hero-main-text-first {
    margin-bottom: -0.2em;
}

.maayan-hero-secondary-text > p {
    margin-block-end: 0;
}


.maayan-hero-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6em;
    padding-block-start: 5vh;
    opacity: 1;
    animation: fadeIn 1s;
}

.maayan-cta-button {
    padding: 0.3em 0.6em;
    font-family: var(--e-global-typography-text-font-family);
    font-size: 30px;
    font-weight: normal;
    border-radius: 2em 0.7em 2em 2em;
    cursor: pointer;
}

.maayan-hero-buttons > a.maayan-cta-button-solid {
    background-image: linear-gradient(
            90deg,
            #F2295BFF,
            #00CCFFFF
    );
    border: none;
    color: var(--e-global-color-white);
}
.maayan-hero-buttons > a.maayan-cta-button-solid:hover {
    color: var(--e-global-color-white);
}


.maayan-hero-buttons > a.maayan-cta-button-outline {
    background: transparent;
    border: solid 3px white;
    color: var(--e-global-color-white);
}

.maayan-hero-buttons > a.maayan-cta-button-outline:hover {
    color: var(--e-global-color-white);
}

.maayan-hero-main-text-second {
    display: inline-flex;
    overflow: hidden;
}

.maayan-hero-main-scroll-container {
    height: 1.2em;
    display: inline-flex;
    flex-direction: column;
}

.maayan-hero-main-scroll-container-transition {
    transform: translateY(0em);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

.maayan-hero-main-scroll-translate {
    /*transition-duration: ;*/
}

.maayan-hero-main-text-scroll {
    height: 1.2em;
    /*margin-bottom: 0.2em;*/
    line-height: 1.2em;
    background: linear-gradient(to right, #00CCFF, #AD4E87);
    background-clip: text;
}

.maayan-hero-main-text-second > span.maayan-hero-main-text-scroll {
    /*position: absolute;*/
    /*opacity: 0;*/
    /*display: none;*/
    /*overflow: hidden;*/
    /*animation-name: scroll-line;*/
    /*animation-iteration-count: 1;*/
    /*animation-timing-function: ease-in-out;*/
}

@keyframes scroll-line {
    0% { transform: translateY(0em) }
    /*40% { transform: translateY(0em) }*/
    /*60% { transform: translateY(-1.2em) }*/
    100% { transform: translateY(-1.2em) }
}
/*</editor-fold>*/


.maayan-text-scroll {
    display: inline-flex;
    overflow: hidden;
    text-align: center;
}

.maayan-text-scroll-container {
    height: 1.2em;
    display: inline-flex;
    flex-direction: column;
}

.maayan-text-scroll-container-transition {
    transform: translateY(0em);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

.maayan-text-scroll-item {
    height: 1.2em;
    /*margin-bottom: 0.2em;*/
    line-height: 1.2em;
    background: linear-gradient(to right, #00CCFF, #AD4E87);
    background-clip: text;
}

@keyframes scroll-line {
    0% { transform: translateY(0em) }
    /*40% { transform: translateY(0em) }*/
    /*60% { transform: translateY(-1.2em) }*/
    100% { transform: translateY(-1.2em) }
}




/*<editor-fold desc="Myn BG">*/
@property --myn-bg-product-gradient-angle{
    syntax: '<angle>';
    inherits: false;
    initial-value: 45deg;
}

@property --myn-bg-product-gradient-step1 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 49.1%;
}

@property --myn-bg-product-gradient-step2 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 51.1%;
}


.myn-bg-wrapper {
    position: relative;
    overflow: hidden;
}

.myn-bg-layer {
    position: absolute;
    inset: 0;
}

.myn-bg-layer-gradient_product_unfold {
    background-image:
            linear-gradient(
                    var(--myn-bg-product-gradient-angle),
                    #B24078,
                    #03379D var(--myn-bg-product-gradient-step1),
                    #03379D var(--myn-bg-product-gradient-step2),
                    #0088C3);
    animation: myn-bg-gradient-ease-in 2000ms ease-in-out 1;
}

@keyframes myn-bg-gradient-ease-in {
    0% {
        --myn-bg-product-gradient-angle: 135deg;
        --myn-bg-product-gradient-step1: 0.01%;
        --myn-bg-product-gradient-step2: 99.99%;
    }
    100% {
        --myn-bg-product-gradient-angle: 45deg;
        --myn-bg-product-gradient-step1: 49.99%;
        --myn-bg-product-gradient-step2: 50.01%;
    }
}

.myn-bg-layer-container {
    container-type: size;
}

/*
.myn-bg-layer-logo_product_slide-in {
    container-type: size;
}
*/

.myn-bg-layer-logo_product_slide-in-logo {
    background-image: url('../images/maayan-logo.svg');
    background-repeat: no-repeat;
    background-position-x: calc(100cqw - 100cqh);
    background-position-y: center;
    background-size: 140cqh;
    animation: myn-bg-logo-slide-in 2000ms ease-in-out 1;
}

@keyframes myn-bg-logo-slide-in {
    0% {
        background-position-x: calc(100cqw + 20cqh);
    }
    100% {
        background-position-x: calc(100cqw - 100cqh);
    }
}

.myn-bg-layer-blur {
    --myn-bg-blur-radius: 10px;
    filter: blur(var(--myn-bg-blur-radius));
    top: calc(var(--myn-bg-blur-radius) * -2);
    bottom: calc(var(--myn-bg-blur-radius) * -2);
    left: calc(var(--myn-bg-blur-radius) * -2);
    right: calc(var(--myn-bg-blur-radius) * -2);
}

.myn-bg-layer:has(.myn-bg-layer-blur) {
    overflow: hidden;
}


.myn-bg-layer-au_logo-logo {
    background-image: url('../images/maayan-logo.svg');
    background-repeat: no-repeat;
    background-position-x: calc(50cqw + 200px);
    background-position-y: calc(50% + 38px);
    background-size: 80cqh;
    /* animation: myn-bg-logo-slide-in 2000ms ease-in-out 1; */
}

.myn-bg-layer-au_logo_blurred-logo {
    background-image: url('../images/maayan-logo.svg');
    background-repeat: no-repeat;
    background-position-x: calc(50cqw + 102px);
    background-position-y: calc(50% + 38px);
    background-size: 110cqh;
    /* animation: myn-bg-logo-slide-in 2000ms ease-in-out 1; */
}

.myn-bg-layer-au_planet-logo {
    background-image: url('../images/nodes_planet.webp');
    background-repeat: no-repeat;
    background-position-x: calc(50cqw + 6px);
    background-position-y: calc(50% + 38px);
    background-size: 134cqh;
    /* animation: myn-bg-logo-slide-in 2000ms ease-in-out 1; */
}

.myn-about-us-qad:before {
    content: '';
    background-image: url('../images/maayan_about_us_coin.webp');
    z-index: 100;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 260px;
}

/*@starting-style {*/
/*    .elementor-1055 .myn-bg-layer-bubble:nth-child(2) {*/
/*    }*/
/*}*/

/*.elementor-1055>.myn-bg-wrapper:first-child>.myn-bg-layer-bubble {*/
/*    !*background-color: maroon !important;*!*/
/*}*/

.elementor-1055>.myn-bg-wrapper:first-child>.myn-bg-layer-bubble {
    transition: 2500ms ease-in-out;
}
.elementor-1055>.myn-bg-wrapper:first-child>.myn-bg-layer-au_logo_blurred {
    transition: 1500ms ease-in-out;
    transition-delay: 1500ms;

}
.elementor-1055>.myn-bg-wrapper:first-child>.myn-bg-layer-au_planet {
    transition: 1500ms ease-in-out;
    transition-delay: 1800ms;
}

.elementor-1055>.myn-bg-wrapper:first-child>.myn-bg-layer-bubble:nth-child(2) {
    opacity: 1;
    @starting-style {
        opacity: 0;
        transform: translate(1%, 80%);
    }
}

.elementor-1055>.myn-bg-wrapper:first-child>.myn-bg-layer-bubble:nth-child(3) {
    opacity: 1;
    @starting-style {
        opacity: 0;
        transform: translate(150%, -26%);
    }
}

.elementor-1055>.myn-bg-wrapper:first-child>.myn-bg-layer-bubble:nth-child(4) {
    opacity: 1;
    @starting-style {
        opacity: 0;
        transform: translate(-130%, -37%);
    }
}

.elementor-1055>.myn-bg-wrapper:first-child>.myn-bg-layer-au_logo_blurred {
    opacity: 1;
    /*transform: translateY(0%);*/
    @starting-style {
        opacity: 0;
        transform: translate(70%);
    }
}

.elementor-1055>.myn-bg-wrapper:first-child>.myn-bg-layer-au_planet {
    opacity: 1;
    /*transform: translateY(0%);*/
    @starting-style {
        opacity: 0;
        transform: translate(70%);
    }
}


@property --myn-bg-card-gradient-angle{
    syntax: '<angle>';
    inherits: false;
    initial-value: 45deg;
}

/*
.myn-bg-card-hover-wrapper {
    border-radius: 30px;
}
*/

.myn-bg-layer-gradient_card_hover {
    background-image:
            linear-gradient(
                    var(--myn-bg-product-gradient-angle),
                    #B24078,
                    #03379D 50%,
                    #0088C3);
    transition-property: --myn-bg-product-gradient-angle;
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
}

.myn-bg-wrapper:hover .myn-bg-layer-gradient_card_hover {
    --myn-bg-product-gradient-angle: 135deg;
}

.myn-bg-layer-logo_card_hover {
    container-type: size;
}

.myn-bg-layer-logo_card_hover-logo {
    background-image: url('../images/maayan-logo.svg');
    background-repeat: no-repeat;
    background-position-x: calc(100cqw - 93cqh);
    background-position-y: center;
    background-size: 120cqh;
    transition-property: background-size, background-position-x, filter;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;

}

.myn-bg-wrapper:hover .myn-bg-layer-logo_card_hover-logo {
    background-size: 90cqh;
    background-position-x: calc(100cqw - 100cqh);
    filter: blur(0px);

}
/*</editor-fold>*/


/*                  */
/*      Balls       */
/*                  */

:root {
    --myn-bg-blue: #003399;
    --myn-bg-light-blue: #00CCFF;
    --myn-bg-red: #E62460;
    /*--myn-bg-ball1-size: 250cqh;*/
}

.myn-bg-layer-bubble {
    aspect-ratio: 1;
    clip-path: circle();
    margin: auto;
}

/*                      */
/*      Editor hack     */
/*                      */

.e-con.elementor-element-edit-mode>.myn-bg-wrapper {
    position: absolute;
    inset: 0;
    margin-inline: auto;
    overflow: hidden;
    /*max-width: unset !important;*/
}

.e-con.elementor-element-edit-mode>.e-con-inner.myn-bg-wrapper>:not(.myn-bg-layer) {
    /*max-width: var(--content-width) !important;*/
    /*align-self: center;*/
}

.e-con.elementor-element-edit-mode:has(.myn-bg-layer) {
    /*overflow: hidden;*/
    position: relative;

}

.e-grid>.myn-bg-wrapper>.e-con {
    height: 100%;
}

/*                          */
/*     Pattern bg           */
/*                          */

.myn-bg-layer-pattern_gradient {
    background-image: repeating-linear-gradient(45deg, #E62460, #003399 60px, #00CCFF 120px, #003399 180px, #E62460 240px);
}
.myn-bg-layer-pattern {
    background-image: url(../images/pattern-grid-test.png);
}

.myn-bg-layer-pattern_mask svg .shadow{
    x: calc(var(--padding) + var(--offset));
    y: calc(var(--padding) + var(--offset));
    width: calc(100% - var(--padding)*2);
    height: calc(100% - var(--padding)*2);
    rx: var(--radius);
}
.myn-bg-layer-pattern_mask svg .shadowE {
    cx: calc(100% - var(--padding));
    cy: calc(100% - var(--padding));
    rx: 200px;
    ry: 100px;
    transform-origin-x: calc(86% - var(--padding));
    transform-origin-y: calc(120% - var(--padding));
    transform: rotate(-45deg);
}
.myn-bg-layer-pattern_mask svg .shadowE2 {
    cx: 50%;
    cy: 50%;
    rx: 30%;
    ry: 50%;
    /*transform-origin-x: calc(86% - var(--padding));*/
    /*transform-origin-y: calc(120% - var(--padding));*/
    /*transform: rotate(-45deg);*/
}