.map-box {
    width: 100%;
    position: relative;   
}

.location {
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
  height:100%;
}
  
.location .location-dot {
    position:absolute;
    display: block;
    height: 20px;
    width: 20px;
    background-color:var(--white);
	border:4px solid var(--primary-color);
    border-radius:50%;
    z-index: 2;
    cursor: pointer;
 
}
.location .location-dot:after {
	position: absolute;
    left:-19px;
    top:-19px;
    content: "";
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    border-radius: 50%;
    -webkit-animation: ripple 2s infinite linear;
    animation: ripple 2s infinite linear;
}
.location:nth-child(2) .location-dot:after {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}
.location:nth-child(3) .location-dot:after {
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}
.location:nth-child(4) .location-dot:after {
  -webkit-animation-delay: 1500ms;
          animation-delay: 1500ms;
}
.location:nth-child(5) .location-dot:after {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}
.location:nth-child(6) .location-dot:after {
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
} 


/************locatoin points*******/

 .ksa {
    top: 70%;
    left:50%;
} 

.bahrain {
    top: 55%;
    left:58%;
} 

.qatar {
    top: 58.5%;
    left:60.5%;
}
.uae {
    top: 63.5%;
    left:64.9%;
}  

.uae {
    top: 63.5%;
    left:64.9%;
}  


.oman {
    top: 68.5%;
    left:69.9%;
}  

 
/************locatoin points end*******/


@keyframes ripple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}