html[data-bs-theme="dark"] body.promo-bg {
    background-color: #0d1117;
}

.calculator-forwards {
    transform: translateZ(30px) !important;
}

.grad-bar-last {
    height: 150px;
}

.homepage-mobile-image {
    object-fit: cover;
}

.home-guide-video {
    filter: drop-shadow(2px 2px 20px rgba(0, 0, 0, 0.2));
    width: 70%;
    transform: translateY(10px) translateZ(30px);
}

.hero-section {
    background: linear-gradient(-30deg, #151819 50%, #111214 50%);
}

.chevrons-container {
    width: 40px;
    height: 40px;
}

.homepage-drop-shadow {
    filter: drop-shadow(2px 2px 20px rgba(0, 0, 0, 0.2));
}

.detailed-insights {
    filter: drop-shadow(2px 2px 20px rgba(0, 0, 0, 0.2));
    width: 70%;
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
    transform: translateY(10px) translateZ(30px);
}

.advanced-filtering {
    filter: drop-shadow(2px 2px 20px rgba(0, 0, 0, 0.2));
    width: 90%;
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg);
}

.offset-inner {
    transform: translateY(10px) translateX(30px) translateZ(30px) !important;
}

@media only screen and (max-width: 800px) {
    .offset-inner {
        transform: translateY(20px) translateX(0px) translateZ(30px) !important;
    }
}


.link{
    text-decoration: none;
    position: relative;
    transition: transform .1s ease-in-out;
    display: flex;
    align-items: center;
    width: min-content;
    white-space: nowrap;
    font-weight: bold !important;
    padding-top: 10px;
}

.link::before, .link::after{
    content: "";
    position: absolute;
    background-color: var(--bs-body-color);
    transition: transform .2s;
}

.link1::after{
    left: 0;
    width: 100%;
    height: 2px;
    bottom: -3px;
    transform: scaleX(0);
    transform-origin: left;
}
.link1:hover::after{
    transform: scaleX(1);
}

.link1 i {
    margin-left: 8px;
    transition: margin-left .2s;
    transition-delay: .1s;
    margin-bottom: 3px;
}

.link1:hover i {
    margin-left: 13px;
}

@media only screen and (max-width: 768px){
    .grad-bar-last {
        height: 70px;
    }
}

.breakdowns-container {
    max-height: 500px !important;
    overflow: hidden !important;
}

@media only screen and (max-width: 800px) {
    .breakdowns-container {
        max-height: 400px !important;
        overflow: hidden !important;
    }    
}

.transition-overlay::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #0d1117;
    background: linear-gradient(rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0.6) 100%);
    position: absolute;
    bottom: 0;
}

html[data-bs-theme="dark"] .transition-overlay::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #0d1117;
    background: linear-gradient(rgba(13, 17, 23, 0) 88%, rgba(13, 17, 23, 0.6) 100%);
    position: absolute;
    bottom: 0;
}


.insights-container {
    transform: translateX(50px);
    width: 110%;
}