:root {
    --wrapper-top-pad: 20px;
    --wrapper-top-pad-transfom: calc(var(--wrapper-top-pad) * -2);

    --wrapper-top-pad-mobile: 20px;
    --wrapper-top-pad-transfom-mobile: calc(var(--wrapper-top-pad-mobile) * -2);

    --gap: 2em;
    --section-padding: calc(3.5em + (var(--gap) * 2));
    --container-padding: 2em;

    --size-unit: 16; /* body font-size in design - no px */
    --size-container-ideal: 1440; /* screen-size in design - no px */
    --size-container-min: 992px;
    --size-container-max: 1920px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

html, body {
    height: 100%;
    min-height: 100%;
}

@media screen and (max-width: 991px) {
    :root {
        --container-padding: 1.5em;
    }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
    :root {
        --container-padding: 1em;
        --section-padding: calc(var(--gap) * 2);
    }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
    :root {
    }
}

/* Tablet */
@media screen and (max-width: 991px) {
    :root {
        --size-container-ideal: 834; /* screen-size in design - no px */
        --size-container-min: 768px;
        --size-container-max: 991px;
    }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
    :root {
        --size-container-ideal: 390; /* screen-size in design - no px */
        --size-container-min: 480px;
        --size-container-max: 767px;
    }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
    :root {
        --size-container-ideal: 440; /* screen-size in design - no px */
        --size-container-min: 0px;
        --size-container-max: 479px;
    }
}

/* ------------------------- Hide Scrollbar -------------------------------------------------- */

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

/* Chrome, Safari, Opera */
body {
    -ms-overflow-style: none;
}

/* IE & Edge */
html {
    scrollbar-width: none;
}

/* Firefox */

/* ------------------------- Reset -------------------------------------------------- */
/**,*/
/**:after,*/
/**:before {*/
/*    -webkit-box-sizing: border-box;*/
/*    -moz-box-sizing: border-box;*/
/*    box-sizing: border-box;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

/*html {*/
/*    scroll-behavior: initial;*/
/*}*/

html,
body {
    -webkit-font-smoothing: antialiased;
}

/* about the animation */
/*.whitespace {*/
/*    background: #18181b;*/
/*    height: 100dvh;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    color: #fafafa;*/
/*    position: relative;*/
/*    z-index: 2;*/
/*}*/

.inner-wrapper {
    overflow: hidden;
}

.horisontal-container {
    z-index: 1;
    max-width: var(--size-container);
    padding-left: var(--container-padding);
    padding-right: calc(var(--container-padding) + 2vw);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-block: 8rem;
    /*background-color: #040202;*/
}

.horisontal-text-animation {
    /*margin: 500px 0 0 0;*/
    /*background-color: #ffffff;*/
}

.horisontal-text-animation .horisontal-container {
    height: 100vh;
    margin: -100vh 0;
    position: relative;
    display: flex;
    align-items: center;
}

.horisontal-text-animation .horisontal-container .horisontal-text {
    color: #ffffff;
    white-space: nowrap;
    font-size: 228px;
    line-height: 1;
    font-weight: 500;
    font-family: "Clash Grotesk", Sans-serif;
    padding: 0 101vw;
    letter-spacing: -0.025em;
    width: max-content;
}

@media screen and (max-width: 1450px) {
    .horisontal-text-animation .horisontal-container .horisontal-text {
        font-size: 180px;
    }
}

@media screen and (min-width: 1550px) {
    .horisontal-text-animation .horisontal-container .horisontal-text {
        font-size: 250px;
    }
}

/*========================================================================*/


/*========================================================================*/


.fill-container {
    position: relative;
    overflow: hidden !important;
    cursor: pointer;
    transition: color 0.5s ease-in-out !important; /* Делаем анимацию дольше */
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    transform: translateY(100%);
    z-index: -1;
    /*transition: transform 0.5s ease-in-out; !* Плавное появление градиента *!*/
}

.fill-container .fill-text h2 {
    transition: color 0.5s ease-in-out !important; /* Плавное изменение цвета текста */
    opacity: 1;
}

.fill-container.active .fill-text h2 {
    color: #040202 !important;
    opacity: 1;
}

.animated-container {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.animated-t h2,
.animated-t span {
    transition: color 0.3s ease-in-out;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
}


.underline-effect {
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
}

.underline-effect::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out;
}

/*===========================================================================*/

.transform-animate {
    transform: translate(0px, 0px);
    transition: all .5s ease;
}

.transform-animate:hover {
    transform: translate(0px, -5px);
}

.underline-animate {
    /*transform: translate(0px, 0px);*/
    transition: all .5s ease;
}

.underline-animate:hover {
    /*transform: translate(0px, -5px);*/
}

.underline-animate::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    height: 3px;
    width: 0;
    background-color: #ffffff;
    transition: width 0.5s ease;
}

.underline-animate:hover::after {
    width: 100%;
}

/*===========================================================================*/

.g_visual_wrap {
    position: relative;
    display: grid;
    grid-template-areas:"stack";
}

.g_visual_wrap > * {
    grid-area: stack;
}

.g_visual_wrap img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.g_visual_wrap .mask {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    will-change: clip-path, opacity, transform;
    z-index: 1;
}


body {
    transition: all .5s ease;
}

/*body.active {*/
/*    padding-left: 20px;*/
/*    padding-right: 20px;*/
/*    padding-top: var(--wrapper-top-pad);*/
/*    background-color: #d8f900 !important;*/
/*    overflow: auto;*/
/*}*/

body.active {
    padding-left: 20px;
    padding-right: 20px;
    /*padding: 20px 20px 0px 20px;*/
    padding-top: var(--wrapper-top-pad);
    background-color: #d8f900 !important;
    overflow: auto;
}

.wrapper_padding {
    position: fixed;
    z-index: 20;
    transition: all .5s ease;
    opacity: 0;
    height: var(--wrapper-top-pad);
    top: var(--wrapper-top-pad);
    left: 0;
    background-color: #d8f900;
    transform: translate(0px, var(--wrapper-top-pad-transfom)) scale(1.2, 1.2);
    width: calc(100vw - 40px);
    /*width: 100vw;*/
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.wrapper_padding.active {
    opacity: 1;
    top: 0;
    scale: none;
    transform: translate(0px, 0px);
    padding-left: 20px;
    padding-right: 20px;
}

.wrapper_padding svg {
    margin-bottom: -32px;
}

.bash_wrapper {
    border-radius: 33px 33px 0 0;
    position: relative;
    /*transform: scale(1);*/
    transition: all .5s ease;
    /*overflow: hidden;*/
}

.bash_wrapper.active {
    /*overflow: hidden !important;*/
}

/*header design*/

@media (max-width: 767px) {
    body.active {
        padding-left: 0px;
        padding-right: 0px;
        /*padding-top: var(--wrapper-top-pad-mobile);*/
        padding-top: 0px;
        background-color: #d8f900 !important;
        overflow: auto;
    }

    .bash_wrapper {
        border-radius: 0;
    }

    .wrapper_padding {
        display: none;
        position: absolute;
        height: var(--wrapper-top-pad-mobile);
        top: var(--wrapper-top-pad-mobile);
        transform: translate(0px, var(--wrapper-top-pad-transfom-mobile)) scale(1, 1);
    }

    .wrapper_padding.active {
        padding-left: 10px;
        padding-right: 10px;
    }

    .smart-header {
        backdrop-filter: blur(0);
    }

    .mobile-menu-wrapper {
        opacity: 0;
        transition: all .5s ease;
    }

    .mobile-menu-wrapper.active {
        opacity: 1;
    }

    .h-text-opacity {
        opacity: 0;
        display: none;
        transform: translateY(-250%);
        transition: all 0.3s ease; /* швидкий вихід */
    }
}


.smart-header.active {
    backdrop-filter: blur(0);
}

.smart-header.active .text-change h2 {
    color: #040202 !important;
}

.smart-header.active .text-change span {
    color: #ffffff !important;
}

.smart-header.active .underline-animate::after {
    background-color: #040202;
}

.h-text-opacity {
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.3s ease; /* швидкий вихід */
}

.smart-header.active .h-text-opacity {
    opacity: 1;
    display: flex;
    transform: translateY(0);
    transition: all 1s ease 0.3s; /* повільний вхід + затримка */
}


/* ============= text reveal animation code ===============*/
.char-text-reveal, .word-text-reveal, .line-w-text-reveal .reveal-lines {
    overflow: hidden;
    opacity: 0;
}

.reveal-ready {
    opacity: 1;
}

/* Нормалізація вкладеностей у зоні розкриття */
.reveal-lines .elementor-widget-container {
    display: block !important;
    position: static !important;
}

.reveal-lines .elementor-heading-title {
    display: block !important;
    white-space: normal !important; /* дозволити перенос */
    width: 100% !important;
}

.reveal-lines .tline {
    display: block;
    overflow: hidden; /* щоб слова в рядку “випливали” знизу */
}

.char-text-reveal .char {
    transform: translateY(100px);
    transition: transform .5s;
    opacity: 0;
}

.word-text-reveal .word {
    will-change: transform;
    transform: translateY(400px);
    transition: transform .5s;
}

.line-w-text-reveal {
    display: block;
}

.line-w-text-reveal .line {
    will-change: transform;
    display: inline-block !important;
    overflow: hidden;
}

.line-w-text-reveal .word {
    opacity: 0;
    display: inline-block;
    transform: translateY(100px);
    transition: transform .5s;
    will-change: transform;
}


.only-line-text-reveal .line {
    display: inline-block;
    overflow: hidden;
}

.char-text-reveal:not(.reveal-ready),
.word-text-reveal:not(.reveal-ready),
.line-w-text-reveal:not(.reveal-ready),
.reveal-lines:not(.reveal-ready) {
    opacity: 0;
    will-change: opacity;
}


.conteiner-underline-animate {
    position: relative; /* важно для ::before */
    transition: all .5s ease;
}

.conteiner-underline-animate::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 1px;
    width: 0;
    background-color: #ffffff;
    transition: width 0.5s ease;
}

/* активное состояние */
.conteiner-underline-animate.active::after {
    width: 100%;
}



.header-underline-animate {
    position: relative; /* важно для ::before */
    transition: all .5s ease;
}

.header-underline-animate::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 1px;
    width: 0;
    background-color: #ffffff;
    transition: width 0.5s ease;
}

/* активное состояние */
.header-underline-animate.active::after {
    width: 100%;
}




.p-word-opacity {
    opacity: 0.7;
}


.accordion-item {
    transition: .5s;
}

.accordion-item:hover {
    /*background-color: #ffffff;*/
    transition: .5s;
}

.accordion-item:hover .accordion-heading h2 {
    /*color: #1A1A5D !important;*/
    transition: .5s;
}

.accordion-heading {
    cursor: pointer;
    transition: background-color 0.7s ease;
}

.accordion-heading h2 {
    transition: background-color 0.7s ease;
}

.arrow {
    transition: transform 0.3s ease;
}

.accordion-answer {
    overflow: hidden;
    height: 0;
    padding: 0 50px 0 10px;
}

@media only screen and (max-width: 600px) {
    .accordion-answer {
        overflow: hidden;
        height: 0;
        padding: 0 20px 0 0px;
    }
}

.accordion-item.active {
    transition: ease 0.7s;
    background-color: #ffffff !important;
}

.accordion-item.active .accordion-heading h2 {
    transition: ease 0.7s;
}

/*.faq-answer p {*/
/*    padding: 10px 10px;*/
/*}*/

.footer-title {
    opacity: 0.5;
}

.half-opacity {
    opacity: 0.5;
}

.m-left {
    margin-left: 150px
}

.overflow-card .conteiner-underline-animate::after {
    bottom: -50px;
    background-color: #040202;
}



@media screen and (max-width: 768px) {
    .m-left {
        margin-left: 100px;
    }

    .overflow-card .conteiner-underline-animate::after {
        bottom: -10px;
    }
}


.test-menu {
    height: 80px !important;
    overflow: hidden;
    transition: all .5s ease;
    will-change: height;
}

.test-menu.open {
    height: calc(100vh - 80px);
}


.navbar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    z-index: 400;
    transition: opacity 0.3s ease;
}

.navbar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Navbar */
.navbar {
    font-family: "ClashGrotesk-Variable", Sans-serif;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 50px); /* X = -50%, Y = 50px */
    width: 800px;
    background: #1e1e1e;
    border-radius: 20px;
    color: white;
    overflow: hidden;
    z-index: 500;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: none;
}

/* Початковий стан navbar */

/* Активний стан після завантаження */
.navbar.ready {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Хедер */
.navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px 0 20px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    height: 50px;
}

.navbar-header-content {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.navbar-logo a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}


.navbar-logo img {
    width: 90px;
    height: auto;
}

.navbar-page {
    background: white;
    color: #111;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 14px;
}

/* Соцмережі */
.navbar-socials {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    width: auto;
}

.navbar-socials a {
    color: white;
    z-index: 901;
    /*text-decoration: none;*/
    font-size: 14px;
}

/* Триггер */
.navbar-header-trigger {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(50px); /* теж саме */
    width: 800px;
    height: 50px;
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: none;
}
@media (max-width: 768px) {
    .navbar,
    .navbar-header-trigger {
        width: calc(100vw - 60px);
    }
}

.navbar-header-trigger.ready {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.navbar-toggle {
    color: #ffffff;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: bold;
}

/* Меню */
.navbar-menu {
    pointer-events: none;
    padding: 20px;
    flex-grow: 1;
    overflow: hidden;
}

.navbar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-menu li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 30px;
    opacity: 0;
    transform: translateY(20px);
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
}

.menu-inside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /*gap: 20px;*/
}

.menu-inside a {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 25px;
    opacity: 0;
    transform: translateY(20px);
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
}

.image-inside {
    overflow: hidden;
    width: 100px;
    height: 60px;
}

.image-inside img {
    width: 100px;
    height: 60px;
    transform: scale(1);
    transition: transform .5s ease;
    object-fit: cover;
}

.menu-inside a:hover img {
    transform: scale(1.2);
}

.navbar-menu a {
    text-decoration: none;
    color: #ffffff;
}

.navbar.open .navbar-menu {
    pointer-events: auto;
}

.menu-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 50px;
}

.menu-top img {
    width: 80px;
    height: auto;
}

.menu-top .left-side {
    font-size: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.talk-btn {
    padding: 5px 15px;
    font-size: 15px;
    background-color: #ffffff;
    border-radius: 999px;
    color: #040202 !important;
}