.img-responsive {
  display: block;
  margin: auto;
  width: 50%;
  padding-top: 5%;
}

/* Animation-2 */

.animations {
    position: absolute;
    padding: 10vh 0;
    width: 100%;
    text-align: center;
    z-index: 99999;
}

@media screen and (max-width: 900px) {
    .img-responsive {
      height: 10vh;
      padding-top: 30%;
    }
    .animations{
        padding: 2vh 0;
    }
}

.animations .animations-container {
position: absolute;
width: 100%;
height: 100%;
top: 10%;
left: 50%;
transform: translateX(-50%);
}

.animations .container {
display: table-cell;
vertical-align: middle;
}

.animations .container .small-container {
max-width: 480px;
}

.ani {
position: absolute;
}

.ani.ani-6 {
height: 67vh;
width: 24vw;
top: 0;
position: fixed;
top: 48%;
left: 16%;
transform: translate(-50%, -50%);
}

.ani.ani-5 {
left: 21%;
top: 11%;
transform: translateY(-50%);
}

.ani-6-pos {
position: fixed;
top: 28%;
left: 85% !important;
transform: translate(-50%, -50%);
}

.copy-pos {
left: 30px !important;
top: 33% !important;
}

.pos {
right: 21% !important;
top: 20% !important;
}

.pos-2 {
top: 11%;
}

.copy-pos-2 {
left: 0;
top: 0;
}

.moving-square-frame {
position: absolute;
height: 20px;
width: 20px;
top: 10px;
left: 10px;
opacity: 0.1;
border: 1px solid #fff;
}

.ani-moving-square {
background: #ffffff;
height: 20px;
width: 20px;
animation: ani-moving-square 6s cubic-bezier(0.7, 0, 0.7, 1) infinite;
}

/* svg {
height: 100%;
width: 100%;
} */

svg #followPath {
fill: none;
stroke: #fff;
stroke-width: 8;
stroke-dasharray: 2870px;
stroke-dashoffset: 2870px;
animation: drawPath 6s linear infinite;
}

svg #followNewPath {
fill: none;
stroke: #fff;
stroke-width: 8;
stroke-dasharray: 2870px;
stroke-dashoffset: 2870px;
animation: drawNewPath 6s linear infinite;
}

svg #dashedPath {
fill: none;
stroke: #242B2E;
stroke-width: 14;
stroke-dasharray: 50px;
}

svg #airplain {
fill: #fff;
transform: translate(-10px, -45px);
}

svg #newAirplain {
fill: #fff;
transform: translate(-10px, -45px);
}

@keyframes ani-moving-square {

0%,
2.5% {
    transform: translate(0, 0);
}

10%,
15% {
    transform: translate(20px, 0);
}

22.5%,
27.5% {
    transform: translate(20px, 20px);
}

35%,
40% {
    transform: translate(0, 20px);
}

47.5%,
52.5% {
    transform: translate(0, 0);
}

60%,
65% {
    transform: translate(0, 20px);
}

72.5%,
77.5% {
    transform: translate(20px, 20px);
}

85%,
90% {
    transform: translate(20px, 0);
}

97.5%,
100% {
    transform: translate(0, 0);
}
}

@keyframes drawPath {
0% {
    opacity: 1;
    stroke-dashoffset: 2870px;
}

53% {
    opacity: 1;
    stroke-dashoffset: 0;
}

78% {
    opacity: 0;
}

100% {
    opacity: 0;
    stroke-dashoffset: 0;
}
}

@keyframes drawNewPath {
0% {
    opacity: 1;
    stroke-dashoffset: 2870px;
}

53% {
    opacity: 1;
    stroke-dashoffset: 0;
}

78% {
    opacity: 0;
}

100% {
    opacity: 0;
    stroke-dashoffset: 0;
}
}

@media (max-width: 1023px) {
.ani.ani-1 {
    transform: scale(0.5);
}

.ani.ani-2 {
    top: 120px;
    transform: scale(0.3);
}

.ani.ani-5 {
    top: 80%;
}

.ani.ani-6 {
    max-height: 30vw;
    max-width: 30vw;
    max-height: 140px;
    max-width: 140px;
}
}
/* animation-2 end */