.circle {
    height: 50px;
    width: 50px;
    border: 2px solid rgb(var(--bs-primary-rgb));
    border-radius: 50%;
    position: absolute;
}

.circle_white {
    border: 2px solid white;
}

.circle_primary {
    border: 2px solid rgb(var(--bs-primary-rgb));
}

.circle_secondary {
    border: 2px solid rgb(var(--bs-secondary-rgb));
}

.triangle {
    position: absolute;
    height: 50px;
    width: 50px;
    z-index: -1;
    rotate: 30deg;

}

.triangle:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(var(--bs-secondary-rgb));
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.triangle_primary:before {
    background: rgb(var(--bs-primary-rgb));
}

.triangle_white:before {
    background: white;
}

.triangle_secondary:before {
    background: rgb(var(--bs-secondary-rgb));
}

.triangle:after {
    content: '';
    position: absolute;
    display: block;
    top: 7%;
    left: 5%;
    width: 90%;
    height: 90%;
    background: white;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rectangle {
    height: 35px;
    width: 70px;
    border: 2px solid rgb(var(--bs-secondary-rgb));
    position: absolute;
    rotate: -45deg;
}

.rectangle_white {
    border: 2px solid white;
}

.rectangle_primary {
    border: 2px solid rgb(var(--bs-primary-rgb));
}

.rectangle_secondary {
    border: 2px solid rgb(var(--bs-secondary-rgb));
}

.rhombus {
    width: 50px;
    height: 50px;
    position: absolute;
    rotate: -45deg;
}

.rhombus:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgb(var(--bs-primary-rgb));
    transform: skewX(45deg) scaleY(cos(45deg));
}

.rhombus_white:before {
    border: 2px solid white;
}

.rhombus_primary:before {
    border: 2px solid rgb(var(--bs-primary-rgb));
}

.rhombus_secondary:before {
    border: 2px solid rgb(var(--bs-secondary-rgb));
}

.white_shapes {
    .circle {
        border: 2px solid white;
    }

    .rhombus:before {
        border: 2px solid white;
    }

    .rectangle {
        border: 2px solid white;
    }
}

.horizontal_shapes {
    display: flex;
    margin-top: -6rem;
    margin-bottom: 6rem;
    position: relative;
    z-index: -1;
    height: 0.001px;

    @media screen and (max-width: 768px) {
        transform-origin: 0% 50%;
        scale: 0.78;
        opacity: 0.5;
    }

    .circle {
        left: 50px;
        top: -2rem;
    }

    .rectangle {
        left: 140px;
        top: -6rem;
        opacity: 0.7;
    }

    .rhombus {
        left: 220px;
        top: -0rem;
        opacity: 0.5;
    }

    .triangle {
        left: 320px;
        top: -6rem;
        opacity: 0.4;
    }
}

.vertical_shapes_left {
    display: flex;
    display: flex;
    margin-top: -6rem;
    margin-bottom: 6rem;
    position: relative;
    height: 0.001px;

    @media screen and (max-width: 768px) {
        transform-origin: 0% 100%;
        scale: 0.78;
    }

    .triangle {
        left: 30px;
        top: 2rem;
        opacity: 1;
    }

    .circle {
        left: 70px;
        top: 8rem;
        opacity: 1;
    }

    .rhombus {
        left: 40px;
        top: 14rem;
        opacity: 0.6;
    }

    .rectangle {
        left: 70px;
        top: 20rem;
        opacity: 0.2;
    }
}

.vertical_shapes_right {
    display: flex;
    margin-top: -6rem;
    margin-bottom: 6rem;
    position: relative;
    height: 0.001px;

    @media screen and (max-width: 768px) {
        transform-origin: 100% 100%;
        scale: 0.78;
    }

    .triangle {
        right: 30px;
        top: 2rem;
        opacity: 1;
    }

    .circle {
        right: 70px;
        top: 8rem;
        opacity: 1;
    }

    .rhombus {
        right: 40px;
        top: 14rem;
        opacity: 0.6;
    }

    .rectangle {
        right: 70px;
        top: 20rem;
        opacity: 0.2;
    }
}