.content {
    max-width: 1100px;
}

.full-h {
    height: 100dvh;
}

.full-h-margin {
    height: calc(100dvh - 40px);
    margin: 20px;
}

.min-full-h {
    min-height: 100dvh;
}

.min-100-h {
    min-height: 100%;
    height: 100%;
}

#hero_top {
    margin-top: 6rem;
}

section {
    margin-bottom: 10rem;
}

.accordion-item {
    border: none;
    margin-bottom: .4rem;
}

.accordion-button {
    background-color: transparent!important;
}

.scroll-effect {
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    will-change: transform, opacity;
}

@keyframes scroll-reveal {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }

    20% {
        opacity: 1;
        transform: translateY(0);
    }

    75% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-60px);
    }
}

.blur-section {
    animation: blur-reveal linear both;
    animation-timeline: view();
    animation-range: cover;
}

@keyframes blur-reveal {
    0% {
        filter: blur(12px);
        opacity: 0;
        transform: translateY(30px);
    }

    30% {
        filter: blur(0);
        opacity: 1;
        transform: translateY(0);
    }

    70% {
        filter: blur(0);
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        filter: blur(12px);
        opacity: 0;
        transform: translateY(-30px);
    }
}

@media (max-width: 770px) {
    @keyframes scroll-reveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    20% {
        opacity: 1;
        transform: translateY(0);
    }

    75% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
    }

    .section-space-mobile {
        margin-bottom: 4rem;
    }

}

@media (min-width: 770px) {
    .nav-central {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

}

#hero_card {
    min-width: 1100px;
}

@media (max-width: 1100px) {
    #hero_card {
        min-width: 100%;
    }
}

.radio-demo .btn {
    color: var(--bs-secondary-color);
    background-color: transparent !important;
}

.radio-demo .active {

    color: var(--bs-body-color)!important;
    box-shadow: 
        1px 0px 1px 0px var(--be-shadow-nav-pill),
        -1px 0px 1px 0px var(--be-shadow-nav-pill),
        0 14px 36px var(--be-shadow-glass-color),
        inset 0px 0px 4px 0px color-mix(
            in srgb,
            var(--be-border-color-glass) var(--be-shadow-glass-opacity-m),
            transparent
        ),
        inset 1px 5px 1px -4px color-mix(
            in srgb,
            var(--be-border-color-glass) var(--be-shadow-glass-opacity-l),
            transparent
        ),
        inset -1px -5px 0px -4px color-mix(
            in srgb,
            var(--be-border-color-glass) var(--be-shadow-glass-opacity-l),
            transparent
        );
}


/* Demo APP */

#belomeDemoTabs .nav-link.active {
    background-color: var(--active-bg-color)!important;
}

.belome-demo {
        --demo-color: #e8cc8a;
        --demo-soft: #e8cc8a1a;
        --demo-border: #e8cc8a40;
        font-size: 12px;
        overflow: hidden;
        color: #252525;
        border-radius: 16px;
    }

    .belome-demo .demo-sidebar {
        background: var(--demo-soft);
        border-right: 1px solid #00000008;
    }

    .belome-demo .demo-nav .nav-link {
        color: #777;
        padding: 9px 10px;
        border-radius: 7px;
        transition: .2s;
    }

    .belome-demo .demo-nav .nav-link.active {
        background: var(--demo-border);
        color: #222;
        font-weight: 600;
    }

    .belome-demo .demo-card {
        border: 1px solid #0000000b;
        background: #fff;
        border-radius: 8px;
    }

    .belome-demo .demo-muted {
        color: #929292;
    }

    .belome-demo .demo-progress {
        height: 5px;
        background: #f1f1f1;
        border-radius: 10px;
        overflow: hidden;
    }

    .belome-demo .demo-progress-bar {
        height: 100%;
        background: var(--demo-color);
        border-radius: 10px;
    }

    .belome-demo .demo-chart {
        height: 90px;
        display: flex;
        align-items: end;
        gap: 9px;
        padding: 5px 2px 0;
    }

    .belome-demo .demo-chart div {
        flex: 1;
        border-radius: 4px 4px 0 0;
        background: var(--demo-border);
        transition: .3s;
    }

    .belome-demo .demo-chart div:nth-child(2n) {
        background: var(--demo-color);
    }

    .belome-demo .demo-chart div:hover {
        opacity: .6;
    }

    .belome-demo .demo-avatar {
        width: 27px;
        height: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: var(--demo-soft);
        color: var(--demo-color);
        font-weight: 700;
        flex-shrink: 0;
    }

    .belome-demo .demo-tag {
        background: var(--demo-soft);
        color: #777;
        border-radius: 5px;
        padding: 4px 7px;
        font-size: 10px;
        white-space: nowrap;
    }

    .belome-demo .demo-table-row {
        border-bottom: 1px solid #f4f4f4;
        padding: 10px 0;
    }

    .belome-demo .demo-table-row:last-child {
        border-bottom: 0;
    }

    .belome-demo .demo-tab-pane {
        animation: demoFade .25s ease;
    }

    @keyframes demoFade {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .belome-demo .demo-status {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #56b68a;
        margin-right: 5px;
    }

    .belome-demo .demo-circle {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: conic-gradient(var(--demo-color) 0 78%, #f1f1f1 78% 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .belome-demo .demo-circle::before {
        content: "";
        position: absolute;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: white;
    }

    .belome-demo .demo-circle span {
        position: relative;
        font-weight: 700;
        font-size: 15px;
    }

    .belome-demo .demo-small {
        font-size: 10px;
    }

    @media (max-width: 575px) {
        .belome-demo .demo-sidebar {
            padding: 10px !important;
        }

        .belome-demo .demo-sidebar-title {
            display: none;
        }

        .belome-demo .demo-nav .nav-link {
            padding: 8px 5px;
            text-align: center;
        }

        .belome-demo .demo-nav .nav-link i {
            margin: 0 !important;
        }

        .belome-demo .demo-nav .nav-link span {
            display: none;
        }
    }

    .belome-mobile {
        --mobile-color: #e8cc8a;
        --mobile-soft: #e8cc8a1A;
        --mobile-alpha: #e8cc8a4D;
        width: 280px;
        height: 500px;
        overflow: hidden;
        border-radius: 16px !important;
        font-size: 11px;
        color: #252525;
        position: relative;
        box-shadow: 0 20px 60px #00000020;
    }

    .belome-mobile .mobile-screen {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #fafafa;
    }

    .belome-mobile .mobile-status {
        height: 27px;
        flex-shrink: 0;
        background: white;
        font-size: 9px;
    }

    .belome-mobile .mobile-header {
        background: white;
        padding: 12px 15px;
        border-bottom: 1px solid #00000008;
        flex-shrink: 0;
    }

    .belome-mobile .mobile-content {
        flex: 1;
        overflow-y: auto;
        padding: 13px;
        scrollbar-width: none;
    }

    .belome-mobile .mobile-content::-webkit-scrollbar {
        display: none;
    }

    .belome-mobile .mobile-card {
        background: white;
        border: 1px solid #00000008;
        border-radius: 11px;
        padding: 11px;
    }

    .belome-mobile .mobile-muted {
        color: #999;
    }

    .belome-mobile .mobile-nav {
        flex-shrink: 0;
        background: white;
        border-top: 1px solid #0000000c;
        padding: 9px 5px 12px;
    }

    .belome-mobile .mobile-nav .nav-link {
        padding: 4px 2px;
        color: #999;
        font-size: 9px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        border-radius: 8px;
    }

    .belome-mobile .mobile-nav .nav-link i {
        font-size: 17px;
        line-height: 1;
    }

    .belome-mobile .mobile-nav .nav-link.active {
        color: var(--mobile-color);
        font-weight: 700;
    }

    .belome-mobile .mobile-nav .nav-link.active i {
        color: var(--mobile-color);
    }

    .belome-mobile .mobile-kpi {
        padding: 10px;
        border-radius: 10px;
        background: white;
        border: 1px solid #00000008;
    }

    .belome-mobile .mobile-chart {
        height: 72px;
        display: flex;
        align-items: end;
        gap: 6px;
    }

    .belome-mobile .mobile-chart div {
        flex: 1;
        border-radius: 3px 3px 0 0;
        background: var(--mobile-alpha);
    }

    .belome-mobile .mobile-chart div:nth-child(even) {
        background: var(--mobile-color);
    }

    .belome-mobile .mobile-avatar {
        width: 29px;
        height: 29px;
        border-radius: 8px;
        background: var(--mobile-soft);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        font-weight: bold;
        color: #777;
    }

    .belome-mobile .mobile-tag {
        background: var(--mobile-soft);
        padding: 4px 6px;
        border-radius: 5px;
        font-size: 9px;
    }

    .belome-mobile .mobile-progress {
        height: 4px;
        background: #eee;
        border-radius: 10px;
        overflow: hidden;
    }

    .belome-mobile .mobile-progress div {
        height: 100%;
        background: var(--mobile-color);
    }

    .belome-mobile .mobile-pane {
        animation: mobileFade .2s ease;
    }

    @keyframes mobileFade {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .style1 {
    background-size: cover;
    background-image: url("../assets/images/content/gradient.svg");
}