/* CSS Document */

.container1 {
    position: absolute;
    top: -22.5rem;
    left: 15.5rem;
    transform-origin: 0rem 0rem;
}

.container2 {
    position: absolute;
    top: -20.5rem;
    left: -5rem;
    transform-origin: 0rem 0rem;
}

.container1 svg,
.container2 svg {
    width: 1000px;
    height: 1000px;
}

#arrow1,
#arrow2 {
    position: absolute;
    transform: rotate(180deg);
}

#arrow1 img,
#arrow2 img {
    width: 66px;
    height: 70px;
}

.cls-1,
.cls-2 {
    fill: none;
    stroke: #ffea71;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width : 11px;
    stroke-dasharray: 1480px;    /* Add */
    transform: translateY(45px); /* Add */
}

.cls-2 {
    stroke-dasharray: 1580px;    /* Add */
}

.container3,
.container4 {
    display: flex;
    align-items: center;
    position: absolute;
    top: 32.8rem;
    left: 10rem;
}

.container3 svg,
.container4 svg {
    width: 67.3rem;
    height: 3.3rem;
}

#dots1 img,
#dots2 img {
    width: 15.8rem;
    height: 1rem;
}

#poly3,
#poly4 {
    transform: translateX(0px);
}

.cls-3 {
    fill: none;
    stroke: #006fbc;
    stroke-miterlimit: 10;
    stroke-width: 10px;
    stroke-dasharray: 673px;     /* Add */
}

.cls-4 {
    fill: #006fbc;
}

@media screen and (max-width: 840px) {
    .container1 {
        top: -10.8rem;
        left: 7.5rem;
    }

    .container2 {
        top: -13.3rem;
        left: -5.5rem;
    }

    .cls-1,
    .cls-2 {
        stroke-width: 17px;
    }

    .container3,
    .container4 {
        left: 3rem;
    }

    .container3 svg,
    .container4 svg {
        width: 60.3rem;
    }

    #dots1 img,
    #dots2 img {
        width: 13.3rem;
        height: 0.9rem;
        margin-bottom: 0.3rem;
    }
}