/* background */
.back-ground-white { background: var(--white); }
.back-ground-gray { background: var(--bg-light); }
.back-ground-white-and-stripes { background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(0,78,138,0.15) 25.1%, transparent 25.2%, transparent 50%, rgba(0,78,138,0.15) 50.1%, transparent 50.2%, transparent 75%, rgba(0,78,138,0.15) 75.1%, transparent 75.2%, transparent 100%); }

.vector-bg-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ===== BACKGROUND LAYERS ===== */

.vector-bg-top,
.vector-bg-middle,
.vector-bg-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 0;
}

/* TOP */
.vector-bg-top {
    height: 1500px;

    background-image:
            linear-gradient(
                    to right,
                    transparent 0%,
                    transparent 25%,
                    rgba(0, 78, 138, 0.15) 25.1%,
                    transparent 25.2%,
                    transparent 50%,
                    rgba(0, 78, 138, 0.15) 50.1%,
                    transparent 50.2%,
                    transparent 75%,
                    rgba(0, 78, 138, 0.15) 75.1%,
                    transparent 75.2%,
                    transparent 100%
            ),
            radial-gradient(
                    ellipse at left center,
                    rgb(31,116,235) 3%,
                    rgba(255,255,255,1) 70%
            ),
            linear-gradient(
                    42deg,
                    rgba(255,255,255,1) 70%,
                    #e2725b 100%
            );

    background-size:
            100% 100%,
            50% 100%,
            50% 100%;

    background-position:
            1px 0,
            left top,
            right top;

    background-repeat:
            no-repeat,
            no-repeat,
            no-repeat;
}

/* MIDDLE */
.vector-bg-middle {
    top: 1500px;

    background:
            linear-gradient(
                    to right,
                    transparent 0%,
                    transparent 25%,
                    rgba(0, 78, 138, 0.15) 25.1%,
                    transparent 25.2%,
                    transparent 50%,
                    rgba(0, 78, 138, 0.15) 50.1%,
                    transparent 50.2%,
                    transparent 75%,
                    rgba(0, 78, 138, 0.15) 75.1%,
                    transparent 75.2%,
                    transparent 100%
            );

    background-position: 1px 0;
}

/* BOTTOM */
.vector-bg-bottom {
    height: 420px;

    background-image:
            linear-gradient(
                    to right,
                    transparent 0%,
                    transparent 25%,
                    rgba(0, 78, 138, 0.15) 25.1%,
                    transparent 25.2%,
                    transparent 50%,
                    rgba(0, 78, 138, 0.15) 50.1%,
                    transparent 50.2%,
                    transparent 75%,
                    rgba(0, 78, 138, 0.15) 75.1%,
                    transparent 75.2%,
                    transparent 100%
            ),
            linear-gradient(
                    165deg,
                    rgba(255, 255, 255, 1) 74%,
                    #e2725b 100%
            );

    background-size:
            100% 100%,
            100% 100%;

    background-position:
            1px 0,
            1px 0;

    background-repeat:
            no-repeat,
            no-repeat;
}

/* ===== CONTENT ===== */

.vector-bg-content {
    position: relative;
    z-index: 2;
}