.path-box {
    height: 90vh;
    width: 110vh;
    margin: auto;
    position: relative;
    top: 0vh;
}

.moving-box {
    position: relative;
    overflow: hidden;
}


/* SVG */

.create-path {
    height: 90vh;
    width: 110vh;
    display: flex;
    margin: auto;
    justify-content: center;
    position: relative;
}

.the-line {
    stroke: #6767f9b3;
    stroke-width: 10px;
    fill: none;
    margin: auto;
}

.the-line2 {
    stroke: lightgrey;
    stroke-width: 10px;
    fill: none;
}

.v-word {
    position: absolute;
    top: 6vh;
    left: 21px;
}

@media (max-width: 964px) {
    .path-box {
		position:relative;
        transform: scale(0.9);
        top: 20vh;
    }
}

@media (max-width: 764px) {
    .path-box {
        transform: scale(0.8);
        top: 12vh;
        right: 3vh;
    }
}

@media (max-width: 680px) {
    .path-box {
        transform: scale(0.6);
        top: 12vh;
        right: 3vw;
		
		/* margin: 0 auto; */
    }
}

@media (max-width: 600px) {
    .path-box {
        transform: scale(0.6) translateX(-70px);
        top: 12vh;
        right: 3vw;
    }
}

@media (max-width: 500px) {
    .path-box {
        transform: scale(0.45);
        top: 12vh;
        right: 300px;
		
    }
	
	.image-containing .just-bubble{
		display:none;
	}
}

@media (max-width: 450px) {
    .path-box {
        transform: scale(0.38) translateX(-220px);
        top: 12vh;
		
        right: 15.5vh;
    }
}

@media (max-width: 400px) {
    .path-box {
        transform: scale(0.3) translateX(-460px);
        top: 0vh;
        right: 15.5vh;
    }
}


/* icons/image */

.static-icons {
    height: 15vh;
    width: 15vh;
    object-fit: cover;
    border-radius: 2vh;
    position: absolute;
}

.icon21 {
    top: 1vh;
    left: -13vh;
}

.icon22 {
    top: 17vh;
    left: -10vh;
}

.icon23 {
    top: 33vh;
    left: -13vh;
}

.icon24 {
    top: 49vh;
    left: -10vh;
    ;
}

.icon25 {
    top: 65vh;
    left: -13vh;
}

.icon26 {
    top: 1vh;
    left: 105.5vh;
}

.icon27 {
    top: 17vh;
    left: 105.5vh;
}

.icon28 {
    top: 33vh;
    left: 105.5vh;
}

.icon29 {
    top: 49vh;
    left: 105.5vh;
}

.icon30 {
    top: 65vh;
    left: 105.5vh;
}

.moving-words {
    width: 15vh;
    height: 4vh;
    border-radius: 1vh;
    text-align: center;
    font-size: 3vh;
    position: absolute;
}

.move-word1 {
    bottom: 36.5vh;
    left: -25vh;
}

.move-word2 {
    bottom: 65.5vh;
    left: -25vh;
    display: none;
}

.move-word3 {
    bottom: 65.5vh;
    left: -25vh;
}

.move-word4 {
    bottom: 36.5vh;
    left: -25vh;
}

.move-word1.trigger {
    animation: movement 5s linear infinite;
}

.move-word2.trigger {
    animation: movement2 5s linear infinite;
}

.move-word3.trigger {
    animation: movement3 5s linear infinite;
}

.move-word4.trigger {
    animation: movement4 5s linear infinite;
}

@keyframes movement {
    0% {}
    20% {
        transform: translate(45.5vh, 0vh);
    }
    40% {
        transform: translate(55.5vh, -16vh);
    }
    60% {
        transform: translate(102vh, -16vh);
    }
    80% {
        transform: translate(113.5vh, -33vh);
    }
    100% {
        transform: translate(145vh, -33vh);
    }
}

@keyframes movement2 {
    0% {}
    20% {
        transform: translate(46vh, 0vh);
    }
    40% {
        transform: translate(55.5vh, 16vh);
    }
    60% {
        transform: translate(102vh, 16vh);
    }
    80% {
        transform: translate(113vh, 32.5vh);
    }
    100% {
        transform: translate(145vh, 32.5vh);
    }
}

@keyframes movement3 {
    0% {}
    25% {
        transform: translate(46vh, 0vh);
    }
    50% {
        transform: translate(55.5vh, 16vh);
    }
    75% {
        transform: translate(102vh, 16vh);
    }
    100% {
        transform: translate(145vh, 16vh);
    }
}

@keyframes movement4 {
    0% {}
    20% {
        transform: translate(45.5vh, 0vh);
    }
    40% {
        transform: translate(55.5vh, -16vh);
    }
    60% {
        transform: translate(102vh, -16vh);
    }
    100% {
        transform: translate(145vh, -16vh);
    }
}


/* pulse rings */

.pulse-circles {
    position: absolute;
    top: 28vh;
    left: 42vh;
    height: 25vh;
    width: 25vh;
    background: #5959ff;
    border-radius: 50%;
}

.pulse1 {
    z-index: 100;
}

.pulse2 {
    animation: zoom 4s linear infinite;
}

.pulse3 {
    animation: zoom 4s linear infinite 1s;
}

.pulse4 {
    animation: zoom 4s linear infinite 2s;
}

.pulse5 {
    animation: zoom 4s linear infinite 3s;
}

@keyframes zoom {
    from {
        opacity: 0.2;
    }
    to {
        opacity: 0;
        transform: scale(2);
    }
}

@media (max-width: 949px) {
    .move-word1 {
        left: -25vh;
    }
    .move-word2 {
        left: -25vh;
    }
}