@import url(./utils.css);
@import url(./heroSection.css);
@import url(./provideLiquidity.css);
@import url(./createYourStrategy.css);
@import url(./professionalToolsSection.css);
@import url(./quadrantProtocol.css);
@import url(./quadratStrategyVaults.css);
@import url(./rebalancer.css);
@import url(./nftPass.css);
@import url(./ToolsRoadmapModel.css);
@import url(./quadratDAOSection.css);

.running-chart-video {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: fixed;
    z-index: -20;
}

.running-chart-video video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -20;
}

.running-chart-video::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 1;
}

.mid-section {
    width: 60%;
    margin: 0 auto;
}

.fade-in-left-trans {
    opacity: 0;
    transition: .2s .2s all ease;
}

.fade-in-left {
    opacity: 1;
}

.fade-out-left {
    opacity: 0;
}