:root {
    --dark-color: #181d38; /* Same as rgba(24, 29, 56) */
    --primary-color: #007bff;
    --btn-font-size: 14px;
    --white-color: #fff;
}

.hero-section {
    position: relative;
    overflow: hidden;
    height: 100vh;
    min-height: 675px;
    padding-top: 100px;
    padding-bottom: 100px;
}

.hero-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    .hero-bg::after {
        content: "";
        background: linear-gradient(to top, var(--dark-color), transparent 200%);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .hero-bg .container {
        position: relative;
        z-index: 2;
    }

.hero-section small {
    color: var(--primary-color);
    display: block;
    font-size: var(--btn-font-size);
    font-style: italic;
    position: relative;
    padding-left: 75px;
}

    .hero-section small::before {
        content: "";
        background-color: var(--white-color);
        width: 50px;
        height: 2px;
        position: absolute;
        top: 50%;
        left: 35px;
        transform: translate(-50%, 0);
    }

.video-wrap {
    z-index: -100;
}

.custom-video {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.hero-title {
    color: var(--white-color);
}