@font-face {
    font-family: 'MazzardH';
    src: url('/assets/font/MazzardH-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'MazzardH';
    src: url('/assets/font/MazzardH-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'MazzardH';
    src: url('/assets/font/MazzardH-SemiBold.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'MazzardH';
    src: url('/assets/font/MazzardH-Black.ttf') format('truetype');
    font-weight: 900;
}

@font-face {
    font-family: 'MazzardH';
    src: url('/assets/font/MazzardH-ExtraBold.ttf') format('truetype');
    font-weight: 800;
}

@font-face {
    font-family: 'MazzardH';
    src: url('/assets/font/MazzardH-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'MazzardH';
    src: url('/assets/font/MazzardH-Thin.ttf') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: 'MazzardH';
    src: url('/assets/font/MazzardH-Regular.ttf') format('truetype');
    font-weight: 400;
}

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'MazzardH';
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    background: #21181E;
}

html {
    scroll-behavior: smooth;
}

header.header-navbar {
    max-width: 1360px;
    margin: auto;
    padding: 20px 80px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 24px;
    background: #3A2C36;
}

.nav-link {
    color: var(--Header-Footer-text-reversed, #FFF);
/* Body 1 */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 16px 8px 16px;
    text-decoration: none;
    margin: 0px 12px;
}

.navbar-nav {
    display: flex;
    align-items: center;
}

.navbar-toggler {
    background: transparent;
    border: none;
    display: none;
}

.btn {
    border-radius: var(--Corner-radius-corner-medium, 8px);
    color: var(--text-text-reversed, #161A1D);
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    padding: 12px 16px;
}

.btn.btn-primary {
    background: #F7B9C2;
}

.container {
    max-width: 1360px;
    margin: auto;
}

h1 {
    margin-top: 0;
}

.main-screen {
    margin-top: 24px;
    padding: 80px 80px 40px;
    background-image: url('/assets/img/banner.jpg');
    border-radius: 24px;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

.main-screen-content h1 {
    color: #2D2926;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 16px;
}

.main-screen-content h1 span {
    display: block;
    color: #fff;
    text-transform: uppercase;
}

.main-screen-content {
    max-width: 550px;
}

.main-screen-content p {
    color: #2D2926;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2; /* 136.364% */
    margin-top: 0;
}

a.btn-slider {
    margin-top: 24px;
    display: inline-block;
    width: 250px;
}

.default-screen {
    padding: 80px 80px;
}

.text-center {
    text-align: center;
}

.default-screen-title {
    color: #FFF;
    font-size: 64px;
    font-style: normal;
    font-weight: 600;
    line-height: 72px;
    margin-top: 0;
    margin-bottom: 40px;
}

.d-flex {
    display: flex;
}

.flex-about {
    margin: 0px -12px;
}

.item-about {
    border-radius: var(--Corner-radius-corner-large, 16px);
    border: 1px solid #F7B9C2;
    margin: 12px;
}

.align-items-center {
    align-items: center;
}

.p-3 {
    padding: 20px;
}

.item-about p {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}

.me-3 {
    margin-right: 18px;
}

.standart-screen-content.default-screen {
    padding-top: 0;
}

.standart-image {
    border-radius: var(--Corner-radius-corner-large, 16px);
    background: #2E3D30;
    width: 100%;
    padding: 83px 30px 66px;
    max-width: 430px;
    position: relative;
}

img.standart-image-arrow {
    max-width: 145px;
}

img.standart-image-arrow.arrow-top-right {
    position: absolute;
    right: 32px;
    top: 40px;
    transform: scaleX(-1);
}

.standart-description {
    width: calc(100% - 550px);
}

.standart-content > div {
    justify-content: space-between;
}

p.standart-text {
    margin-top: 0px;
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 40px;
}

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

ul.standart-list li {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
}

ul.standart-list li:last-child {
    margin-bottom: 0;
}

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

.standart-button {
    margin-top: 80px;
    text-align: center;
}

.standart-button a {
    padding: 12px 40px;
}

ul.standart-list li:before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><g clip-path="url(%23clip0_2074_13284)"><path d="M16 2.4375C19.1301 2.43812 22.1637 3.52109 24.5865 5.50285C27.0093 7.4846 28.6724 10.2432 29.2936 13.311C29.9149 16.3788 29.4563 19.5671 27.9954 22.3354C26.5345 25.1036 24.1613 27.2816 21.2781 28.5C17.9629 29.8998 14.2274 29.9254 10.8934 28.571C7.55932 27.2167 4.89985 24.5933 3.5 21.2781C2.10015 17.9629 2.0746 14.2274 3.42897 10.8934C4.78333 7.55932 7.40667 4.89985 10.7219 3.5C12.3918 2.79418 14.187 2.43279 16 2.4375ZM16 0C7.16375 0 0 7.16375 0 16C0 24.8363 7.16375 32 16 32C24.8363 32 32 24.8363 32 16C32 7.16375 24.8363 0 16 0Z" fill="%23F7B9C2"/><path d="M22.6022 10.1146L13.4947 19.2221L9.38907 15.1165C9.27293 14.9998 9.13487 14.9072 8.98283 14.8441C8.8308 14.7809 8.66778 14.7483 8.50314 14.7483C8.33849 14.7483 8.17547 14.7809 8.02344 14.8441C7.8714 14.9072 7.73335 14.9998 7.6172 15.1165C7.50051 15.2327 7.40791 15.3707 7.34473 15.5228C7.28155 15.6748 7.24902 15.8378 7.24902 16.0025C7.24902 16.1671 7.28155 16.3301 7.34473 16.4822C7.40791 16.6342 7.50051 16.7723 7.6172 16.8884L12.6128 21.884L12.6166 21.8878C12.8516 22.1225 13.1703 22.2544 13.5025 22.2544C13.8347 22.2544 14.1534 22.1225 14.3884 21.8878L24.3816 11.894C24.4985 11.7772 24.5912 11.6385 24.6545 11.4859C24.7178 11.3332 24.7504 11.1696 24.7504 11.0043C24.7504 10.8391 24.7178 10.6754 24.6545 10.5228C24.5912 10.3701 24.4985 10.2314 24.3816 10.1146C24.2647 9.9978 24.126 9.90512 23.9734 9.84188C23.8207 9.77864 23.6571 9.74609 23.4919 9.74609C23.3267 9.74609 23.163 9.77864 23.0104 9.84188C22.8577 9.90512 22.719 9.9978 22.6022 10.1146Z" fill="%23F7B9C2"/></g><defs><clipPath id="clip0_2074_13284"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>');
    margin-right: 24px;
    position: relative;
    top: 3px;
}

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

.standart-image-text {
    text-align: center;
    color: #FFF;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

.standart-image-text.standart-center-text {
    margin: 120px 0px;
}

img.standart-image-arrow.arrow-top-left {
    position: absolute;
    top: 40px;
    left: 32px;
}

img.standart-image-arrow.arrow-bottom-left {
    position: absolute;
    bottom: 40px;
    transform: scaleX(-1) scaleY(-1);
    right: 32px;
}

img.standart-image-arrow.arrow-bottom-right {
    position: absolute;
    transform: scaleY(-1);
    bottom: 40px;
    left: 32px;
}

.market-screen-content.default-screen {
    border-radius: 24px;
    background: #2D2926;
    overflow: hidden;
    position: relative;
}

.market-text ul {
    max-width: 870px;
    padding-left: 25px;
}

.market-text ul li {
    color: #FFF;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 24px;
}

img.market-image {
    position: absolute;
    right: -17%;
    top: 6%;
    max-width: 45%;
}

.metric-lists {
    margin: 0px -20px;
}

.metric-lists > div {
    margin: 20px;
}

.metric-item {
    border-radius: var(--Corner-radius-corner-large, 16px);
    border: 1px solid #F7B9C2;
    background: #2D2926;
    flex-basis: 33.33%;
    padding: 24px 16px;
    position: relative;
    z-index: 1;
}

span.metric-item-count {
    color: #F7B9C2;
    font-size: 92px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
}

span.metric-item-text {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 36px */
    letter-spacing: 0.96px;
    display: block;
}

.metric-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.btn {
    transition: all 0.4s ease-in-out;
}

header.header-navbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 20px;
    z-index: 100;
}

main {
    padding-top: 120px;
}

.technology-lists {
    margin: 0px -12px;
}

.technology-item {
    padding: 24px 16px;
    margin: 12px;
    border-radius: var(--Corner-radius-corner-large, 16px);
    width: 25%;
}

.technology-item.technology-item1 {
    background: #2E3D30;
}

.technology-item span {
    display: block;
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 24px;
    border-radius: var(--Corner-radius-corner-large, 16px);
}

.technology-item.technology-item2 {
    background: #5C6C44;
}

.technology-item.technology-item3 {
    background: #748D5D;
}

.technology-item.technology-item4 {
    background: #8BA475;
}

.technology-bottom {
    display: flex;
    margin-top: 70px;
    flex-direction: column;
    align-items: center;
}

.technology-bottom a.btn.btn-primary {
    padding: 12px 40px;
}

.technology-bottom-text {
    color: #F7B9C2;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 24px;
}

.faq-screen-content {
    border-radius: 24px;
    background: #3A2C36;
    position: relative;
    overflow: hidden;
}

.faq-content img {
    position: absolute;
    left: -28%;
}

.faq-lists {
    margin-left: auto;
    max-width: 765px;
}

.faq-item {
    border-radius: var(--Corner-radius-corner-large, 16px);
    border: 1px solid #F7B9C2;
    background: #3A2C36;
    margin-bottom: 16px;
    padding: 24px 40px;
}

.faq-item-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 1; /* 100% */
}

span.open-icon {
    border-radius: var(--Corner-radius-corner-medium, 8px);
    border: 1px solid #F7B9C2;
    background: rgba(255, 255, 255, 0.05);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.open-icon span {
    width: 14px;
    height: 2px;
    background: #F7B9C2;
    transition: all 0.4s ease-in-out;
    position: relative;
}

span.open-icon span:before {
    content: "";
    width: 14px;
    height: 2px;
    transform: rotate(90deg);
    background: #F7B9C2;
    display: block;
    transition: all 0.4s ease-in-out;
}

.faq-item-answer p:last-child {
    margin: 0;
}

.faq-item-answer {
    max-height: 0px;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.faq-item.open .faq-item-answer {
    max-height: 500px;
    padding-top: 24px;
}

.faq-item .faq-item-answer * {
    color: #fff;
    line-height: 1.5;
    font-size: 18px;
}

.faq-item.open span.open-icon span:before {
    transform: rotate(0deg);
}

.footer-content {
    padding: 80px;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.footer-logo {
    margin-bottom: 24px;
}

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

.footer-menu-item span {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5; /* 150% */
    display: block;
    margin-bottom: 20px;
}

.footer-menu-item-links a {
    color: var(--text-text-reversed, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8; /* 150% */
    margin-right: 24px;
    text-decoration: none;
}

.footer-copyright {
    color: var(--text-text-reversed, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    border-top: 2px solid #F7B9C2;
    padding-top: 24px;
    margin-top: 24px;
}

header.header-navbar {
    transition: all 0.4s ease-in-out;
}

header.header-navbar.scrolled {
    padding-top: 10px;
    padding-bottom: 10px;
    top: 10px;
}

.navbar-brand a {
    display: flex;
    align-items: center;
}








@media (max-width: 1360px) {
    header.header-navbar {
        left: 8px;
        right: 8px;
    }
}

@media (max-width: 1240px) {
    header.header-navbar {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .main-screen {
        padding: 40px;
    }
    
    .main-screen-content h1 {
        font-size: 56px;
    }
    
    .main-screen-content p {
        font-size: 20px;
    }
    
    .main-screen-content {
        max-width: 500px;
    }
    
    a.btn-slider {
        margin-top: 10px;
    }
    
    .default-screen {
        padding: 60px 40px;
    }
    
    .default-screen-title {
        font-size: 52px;
        margin-bottom: 20px;
        line-height: 1.3;
    }
    
    .item-about p {
        font-size: 22px;
    }
    
    p.standart-text {
        margin-bottom: 30px;
        font-size: 20px;
    }
    
    ul.standart-list li {
        font-size: 20px;
    }
    
    ul.standart-list li:before {
        width: 32px;
        background-size: 100%;
        height: 32px;
    }
    
    .standart-button {
        display: flex;
        align-items: center;
        justify-content: center !important;
        margin-top: 60px;
    }
    
    .market-text ul li {
        font-size: 20px;
    }
    
    span.metric-item-count {
        font-size: 82px;
    }
    
    span.metric-item-text {
        font-size: 22px;
    }
    
    .metric-button {
        margin-top: 20px;
    }
    
    .technology-item span {
        font-size: 20px;
    }
    
    .technology-bottom {
        margin-top: 40px;
    }
    
    .technology-bottom-text {
        font-size: 20px;
    }
    
    .faq-item {
        padding: 20px;
    }
    
    .faq-item-question {
        font-size: 20px;
    }
    
    span.open-icon {
        width: 40px;
        height: 40px;
    }
    
    .footer-content {
        padding: 60px 40px;
    }

    main {
        padding-top: 100px;
    }
}

@media (max-width: 1024px) {
    .item-about p {
        font-size: 18px;
    }
    
    .p-3 {
        padding: 16px;
    }
    
    .me-3 {
        margin-right: 12px;
    }
    
    span.icon-about svg {
        width: 28px;
    }
    
    .default-screen-title {
        font-size: 42px;
    }
    
    p.standart-text {
        font-size: 18px;
    }
    
    ul.standart-list li {
        font-size: 18px;
    }
    
    .standart-image-text {
        font-size: 26px;
    }
    
    .standart-image {
        padding: 75px 30px 66px;
        max-width: 400px;
    }
    
    .standart-description {
        width: calc(100% - 470px);
    }
    
    .market-text ul li {
        font-size: 18px;
    }
    
    span.metric-item-count {
        font-size: 62px;
    }
    
    .metric-lists > div {
        margin: 10px;
    }
    
    .metric-lists {
        margin: 0px -10px;
    }
    
    .technology-lists {
        margin: 0px -10px;
    }
    
    .technology-item {
        margin: 10px;
        padding: 16px;
    }
    
    .technology-item span {
        font-size: 16px;
        margin-top: 10px;
    }
    
    .faq-item {
        padding: 15px;
    }
    
    .faq-item-question {
        font-size: 18px;
    }
    
    span.open-icon {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 991px) {
    .nav-link {
        margin: 0px 5px;
        padding: 16px 5px;
    }
    
    .main-screen-content h1 {
        font-size: 46px;
    }
    
    .main-screen-content p {
        font-size: 18px;
        line-height: 1.4;
    }
    
    header.header-navbar {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .main-screen-content h1 {}
    
    .main-screen-content {
        max-width: 450px;
    }
    
    .default-screen {
        padding: 40px 0px;
    }
    
    .market-screen-content.default-screen {
        padding: 40px 16px;
    }
    
    div#faq {
        padding: 40px 16px;
    }
    
    .footer-content {
        padding: 40px 0px;
    }
    
    .main-screen {
        padding: 40px 16px;
    }
    
    .item-about {
        margin: 10px;
    }
    
    .flex-about {
        margin: 0px -10px;
    }
    
    .standart-button {
        margin-top: 40px;
    }
    
    .technology-item {
        min-width: 260px;
    }
    
    .technology-item span {
        font-size: 18px;
    }
    
    .technology-lists {
        overflow-x: scroll;
        margin-right: -8px;
    }
    
    .metric-item {
        min-width: 260px;
    }
    
    .metric-lists {
        overflow-x: scroll;
    }
    
    .market-text h2.default-screen-title {
        text-align: center;
    }
    
    .faq-content img {
        display: none;
    }
    
    .faq-lists {
        max-width: 100%;
    }
    
    .main-screen {
        background-position-x: left;
    }
}

@media (max-width: 800px) {

    .navbar-nav {
        display: none;
    }
    
    .navbar-brand a img {
        max-width: 158px;
    }
    
    header.header-navbar {
        padding: 8px 16px !important;
        border-radius: 8px;
        top: 8px;
    }
    
    button.navbar-toggler {
        display: block;
    }
    
    button.navbar-toggler span {
        width: 16px;
        height: 2px;
        display: block;
        background: #fff;
        margin: 4px 0px;
    }
    
    main {
        padding-top: 50px;
    }
    
    .navbar-main {
        order: 1 !important;
    }
    
    header.header-navbar > div {
        order: 2;
    }
    
    .flex-wrap-mobile {
        flex-wrap: wrap;
        margin: 0;
    }
    
    .item-about {
        width: 100%;
    }
    
    .default-screen-title {
        font-size: 32px;
        margin-bottom: 10px;
    }
    
    .standart-content .d-flex.align-items-end {
        flex-direction: column;
    }
    
    .standart-content > * {
        width: 100%;
    }
    
    .standart-description {
        width: 100%;
    }
    
    .standart-image {
        margin: auto;
        margin-top: 40px;
    }
    
    .standart-image-text {
        font-size: 24px;
    }
    
    img.market-image {
        display: none;
    }
    
    .technology-lists.d-flex.flex-wrap-mobile {
        flex-wrap: nowrap;
    }
    
    h2.default-screen-title.faq-title {
        text-align: center;
    }
    
    .faq-item {
        border-radius: 8px;
    }
    
    span.open-icon {width: 50px;height: 50px;min-width: 50px;min-height: 50px;}
    
    .footer-menu {
        flex-direction: column;
    }
    
    .footer-menu-item {
        margin-bottom: 24px;
    }
    
    .footer-menu-item:first-child .footer-menu-item-links {
        flex-direction: column;
        display: flex;
    }
    
    .footer-menu-item:last-child {
        margin-bottom: 0;
    }
    
    .footer-menu-item-links.social-links a {
        margin-right: 5px;
    }

    .navbar-nav {
        position: fixed;
        top: 66px;
        left: 8px;
        width: calc(100% - 16px);
        background: rgb(59 44 54);
        padding: 20px;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1000;
        display: block;
        right: 8px;
        border-radius: 8px;
    }
    
    .navbar-nav.show {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
       
    }
    
    .navbar-nav .nav-link {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
    }
    
    /* Анімація гамбургера */
    .navbar-toggler {
        background: none;
        border: none;
        padding: 10px;
        cursor: pointer;
    }
    
    .navbar-toggler span {
        display: block;
        width: 25px;
        height: 3px;
        background: white;
        margin: 5px 0;
        transition: all 0.3s ease;
    }
    
    .navbar-toggler.active span:nth-child(1) {
        transform: rotate(45deg) translate(2.5px, 5px);
    }
    
    .navbar-toggler.active span:nth-child(2) {
        opacity: 0;
    }
    
    .navbar-toggler.active span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -6px);
    }
    
    /* Блокування скролу */
    body.menu-open {
        overflow: hidden;
    }

}

@media (max-width: 576px) {

    .main-screen-content h1 {
        font-size: 40px;
    }
    
    .item-about {
        margin: 0;
        margin-bottom: 10px;
    }
    
    h2.default-screen-title.standart-title {
        text-align: center;
    }
    
    img.standart-image-arrow.arrow-top-left {
        left: 10px;
        top: 20px;
    }
    
    img.standart-image-arrow {
        width: 124px;
    }
    
    img.standart-image-arrow.arrow-top-right {
        top: 20px;
        right: 10px;
    }
    
    img.standart-image-arrow.arrow-bottom-right {
        bottom: 20px;
        left: 10px;
    }
    
    img.standart-image-arrow.arrow-bottom-left {
        right: 10px;
        bottom: 20px;
    }
    
    .standart-image {
        padding: 50px 30px;
    }
    
    .standart-image-text.standart-center-text {
        margin: 90px 0px;
    }
    
    .standart-button a {
        width: 100%;
    }
    
    .standart-button {
        margin-top: 20px;
    }

    a.btn-slider {
        width: 100%;
    }
    
    .main-screen {
        background-position-x: 30%;
        background-size: cover;
    }

}

@media (max-width: 470px) {

}

/* ===== АНІМАЦІЇ ТА НАВЕДЕННЯ ===== */

/* Анімація появи елементів при скролі */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Анімація для стрілок в standart-image */
@keyframes arrowFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes arrowRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Анімація для метрик */
@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Анімація для технологій */
@keyframes techGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(247, 185, 194, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(247, 185, 194, 0.6);
    }
}

/* Наведення для кнопок */
.btn.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(247, 185, 194, 0.4);
    background: #e8a5b0;
    border-color: #F7B9C2;
}

.btn.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(247, 185, 194, 0.3);
}

/* Ефект хвилі при кліку */
.btn.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn.btn-primary:active::before {
    width: 300px;
    height: 300px;
}

/* Анімація для header при скролі */
header.header-navbar.scrolled {
    background: rgba(58, 44, 54, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Анімація для навігаційних посилань */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #F7B9C2;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: #F7B9C2;
    transform: translateY(-2px);
}

/* Анімація для item-about */
.item-about {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.item-about::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(247, 185, 194, 0.1), transparent);
    transition: left 0.5s;
}

.item-about:hover::before {
    left: 100%;
}

.item-about:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(247, 185, 194, 0.2);
    border-color: #e8a5b0;
}

/* Анімація для метрик */
.metric-item {
    transition: all 0.3s ease;
    animation: countUp 0.6s ease-out;
}

/* Анімація для технологій */
.technology-item {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.technology-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(247, 185, 194, 0.1) 0%, transparent 70%);
    transform: scale(0);
    transition: transform 0.5s ease;
}

.technology-item:hover::before {
    transform: scale(1);
}

.technology-item:hover {
    transform: translateY(-8px);
    animation: techGlow 2s ease-in-out infinite;
}


/* Анімація для footer посилань */
.footer-menu-item-links a {
    transition: all 0.3s ease;
    position: relative;
}

.footer-menu-item-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #F7B9C2;
    transition: width 0.3s ease;
}

.footer-menu-item-links a:hover::after {
    width: 100%;
}

.footer-menu-item-links a:hover {
    color: #F7B9C2;
}

/* Анімація для соціальних іконок */
.social-item-link {
    transition: all 0.3s ease;
    display: inline-block;
}

.social-item-link:hover {
    transform: translateY(-3px) scale(1.1);
}

.social-item-link svg {
    transition: all 0.3s ease;
}

.social-item-link:hover svg {
    filter: drop-shadow(0 0 10px rgba(247, 185, 194, 0.5));
}

/* Анімація появи контенту при завантаженні */
.main-screen-content {
    animation: fadeInLeft 1s ease-out;
}

.main-screen-content h1 {
    animation: slideInFromTop 1s ease-out 0.2s both;
}

.main-screen-content p {
    animation: fadeInUp 1s ease-out 0.4s both;
}

.main-screen-content .btn {
    animation: scaleIn 1s ease-out 0.6s both;
}

/* Анімація для іконок в item-about */
.icon-about svg {
    transition: all 0.3s ease;
}

.item-about:hover .icon-about svg {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 0 10px rgba(247, 185, 194, 0.5));
}

/* Анімація для логотипу */
.logo-img {
    transition: all 0.3s ease;
}


/* Анімація для market-image */
img.market-image {
    animation: arrowFloat 4s ease-in-out infinite;
    transition: all 0.3s ease;
}

img.market-image:hover {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 20px rgba(247, 185, 194, 0.4));
}


/* Плавна анімація для всіх елементів */
* {
    transition: all 0.3s ease;
}

/* Спеціальні анімації для мобільних пристроїв */
@media (max-width: 768px) {
    .btn.btn-primary:hover {
        transform: none;
        box-shadow: 0 4px 15px rgba(247, 185, 194, 0.3);
    }
    
    .item-about:hover {
        transform: none;
    }
    
    .technology-item:hover {
        transform: none;
    }
    
    .metric-item:hover {
        transform: none;
    }
}