.arrow-container {
    position: absolute;
    z-index: 5;
}

.arrow {
    display: block;
    position: relative;
    margin: 0 auto;
}

.arrow .line {
    display: block;
	border: 4px solid var(--bs-warning);
}

.arrow .point {
    display: block;
	position: absolute;
}

.arrow .point:before, .arrow .point:after {
    display: block;
	content: "";
	position: absolute;
}
/* ARROW CLASSROOM 1 */
#arrow-classroom-1 {
    top: 80px;
    left: 45px;
}
#arrow-classroom-1 > .arrow {
    width: 15vw;
    height: 10vh;
    transform: rotate(45deg);
}

#arrow-classroom-1 .line {
    width: 100%;
    border-color: var(--bs-secondary) transparent transparent transparent;
    border-radius: 300px 24px 0 0;
    height: 100%;
}
#arrow-classroom-1 .point {
    right: 0;
    top: 3px;
}
#arrow-classroom-1 .point:before {
    right: 0;
    top: 0;
    border: 2px solid var(--bs-secondary);
    height: 2vh;
    transform: rotate(45deg);
    transform-origin: top right;

}
#arrow-classroom-1 .point:after {
    right: 0;
    top: 0;
    border: 2px solid var(--bs-secondary);
    height: 2vh;
    transform: rotate(-245deg);
    transform-origin: top right;
}
/* ARROW CLASSROOM 2 */
#arrow-classroom-2 { 
    top: 51px;
    left: 118px;
}
#arrow-classroom-2 > .arrow {
    width: 18vw;
    height: 12vh;
    transform: rotate(-15deg);
}

#arrow-classroom-2 .line {
    width: 100%;
    border-color: var(--bs-secondary) transparent transparent  transparent;
    border-radius: 300px 0 0 0;
    height: 100%;
}
#arrow-classroom-2 .point {
    left: 17px;
    top: 5px;
}
#arrow-classroom-2 .point:before {
    left: 1px;
    top: 14px;
    border: 2px solid var(--bs-secondary);
    height: 2vh;
    transform: rotate(-85deg);
    transform-origin: top left;
}
#arrow-classroom-2 .point:after {
    left: 4px;
    top:2px;
    border: 2px solid var(--bs-secondary);
    height: 2vh;
    transform: rotate(25deg);
    transform-origin: top left;
}
/* ARROW CLASSROOM 3 */
#arrow-classroom-3 { 
    top: 80px;
    left: 140px;
}
#arrow-classroom-3 > .arrow {
    width: 20vw;
    height: 10vh;
    transform: rotate(-25deg);
}

#arrow-classroom-3 .line {
    width: 100%;
    border-color: var(--bs-secondary) transparent transparent  transparent;
    border-radius: 300px 0 0 0;
    height: 100%;
}
#arrow-classroom-3 .point {
    left: 15px;
    top: 2px;
}
#arrow-classroom-3 .point:before {
    left: 2px;
    top: 15px;
    border: 2px solid var(--bs-secondary);
    height: 2vh;
    transform: rotate(-86deg);
    transform-origin: top left;
}
#arrow-classroom-3 .point:after {
    left: 4px;
    top: 2px;
    border: 2px solid var(--bs-secondary);
    height: 2vh;
    transform: rotate(25deg);
    transform-origin: top left;
}
/* ARROW CLASSROOM 4 */
#arrow-classroom-4 { 
    top: 120px;
    left: 200px;
}
#arrow-classroom-4 > .arrow {
    width: 10vw;
    height: 5vh;
    transform: rotate(0deg);
}

#arrow-classroom-4 .line {
    width: 100%;
    border-color: transparent transparent var(--bs-secondary) transparent;
    border-radius: 0 0 300px 0;
    height: 100%;
}
#arrow-classroom-4 .point {
    left: 0px;
    bottom: 0px;
}
#arrow-classroom-4 .point:before {
    left: 2px;
    bottom: 5px;
    border: 2px solid var(--bs-secondary);
    height: 2vh;
    transform: rotate(145deg);
    transform-origin: bottom left;
}
#arrow-classroom-4 .point:after {
    left: 0px;
    bottom: 4px;
    border: 2px solid var(--bs-secondary);
    height: 1.8vh;
    transform: rotate(50deg);
    transform-origin: bottom left;
}
/* ARROW CLASSROOM 5 */
#arrow-classroom-5 {
    top: 120px;
    left: 52px;
}
#arrow-classroom-5 > .arrow {
    width: 14vw;
    height: 5vh;
    transform: rotate(12deg);
}
#arrow-classroom-5 .line {
    width: 100%;
    border-color: transparent transparent var(--bs-secondary) transparent;
    border-radius: 0 20px 300px 20px;
    height: 100%;
}
#arrow-classroom-5 .point {
    right: 0px;
    bottom: 0px;
}
#arrow-classroom-5 .point:before {
    right: 7px;
    bottom: 11px;
    border: 2px solid var(--bs-secondary);
    height: 2.4vh;
    transform: rotate(-86deg);
    transform-origin: bottom right;
}
#arrow-classroom-5 .point:after {
    right: 10px;
    bottom: -1px;
    border: 2px solid var(--bs-secondary);
    height: 2.5vh;
    transform: rotate(30deg);
    transform-origin: bottom right;
}