.ani-menu-item {
    background: linear-gradient(to right, #cd537f 20%, #00affa 30%, #0190cd 70%, #da4a7e 80%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.tech-card {
    height: 89px;
    width: 98px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px dashed rgba(var(--ins-dark-rgb), 0.15);
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 5px 20px 0 rgba(18, 38, 63, .05) !important;
    white-space: nowrap;
    overflow: hidden;
}

.coming {
    position: absolute;
    inset: 0;
    opacity: 0.65;
    backdrop-filter: blur(1px);
    background-color: rgba(var(--ins-light-rgb), 0.6);
    cursor: wait;
}

.tech-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.translate-card {
    transform: translateY(50%);
    margin-top: -60px;
    margin-bottom: 180px;
}

[data-bs-theme=dark] .tech-card {
    background: rgba(var(--ins-light-rgb), 0.25) !important;
}

.demo-card img {
    max-height: auto;
    width: 100%;
}


@media (min-width: 1200px) {
    .demo-card img {
        max-height: 350px;
        width: auto;
        object-fit: cover;
    }
}


.demo-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(45px);
    /* background-color: rgba(var(--ins-light-rgb), 0.25); */
    transition: all .3s ease;
    opacity: 0
}

.demo-card:hover .demo-btn {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 992px) {

    .bg-home {
        position: relative;
        background: url('../images/bg-hero.png') repeat-y center center;
        background-size: cover;
        animation: bgScroll 190s linear infinite;
        z-index: 0;
        overflow: hidden;
    }

    .bg-home::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 90%);
        z-index: 1;
        pointer-events: none;
    }
}

@keyframes bgScroll {
    0% {
        background-position: center top;
    }

    50% {
        background-position: center bottom;
    }

    100% {
        background-position: center top;
    }
}


.fw-tab {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 24px;
    gap: 6px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 5;
    box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
    animation: border-angle-rotate 7s infinite linear;

}

.fw-tab:hover,
.fw-tab.active {
    border: 2px solid rgba(50, 58, 70, 0.1) !important;
    background: linear-gradient(white, white) padding-box,
        conic-gradient(from var(--border-angle),
            oklch(100% 100% 0deg),
            oklch(100% 100% 45deg),
            oklch(100% 100% 90deg),
            oklch(100% 100% 135deg),
            oklch(100% 100% 180deg),
            oklch(100% 100% 225deg),
            oklch(100% 100% 270deg),
            oklch(100% 100% 315deg),
            oklch(100% 100% 360deg)) border-box;
}


@keyframes border-angle-rotate {
    from {
        --border-angle: 0deg;
    }

    to {
        --border-angle: 360deg;
    }
}

@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


.coming-soon {
    position: absolute;
    inset: 0;
    opacity: 0.65;
    backdrop-filter: blur(1px);
    background-color: rgba(var(--ins-white-rgb), 0.6);
    cursor: wait;
}

.version-card {
    height: 99px;
    width: 109px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(50, 58, 70, 0.1);
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 4px 20px 0 rgba(19, 37, 66, .07) !important;
    white-space: nowrap;
    overflow: hidden;
}

.version-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}