.distribution-map .map-point h2 {
    font-size: 18px;
    padding-top: 22px;
    color: #fff;
    margin-left: -12px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centered-y {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-47%);
}

.distribution-map {
  position: relative;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto;
}
.distribution-map > img {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}
.distribution-map .map-point {
    cursor: pointer;
    outline: none;
    z-index: 0;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    opacity: 0.1;
    transform: translate(-50%, -50%);
    -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
    -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
    -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
    transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
    background: #ff0000;
    border: none;

  animation: pulse 2.5s infinite;
}

@keyframes pulse{
  0%{
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
  }
  50%{
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100%{
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
  }
}

.distribution-map .map-point .content {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  width: 100%;
  height: 100%;
  left: 50%;
  /*transform: translateX(-20%);*/
  overflow: overlay;
}
/*.distribution-map .map-point:active, .distribution-map .map-point:focus {*/
/*  margin: 0;*/
/*  padding: 0;*/
/*  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);*/
/*  opacity: 1;*/
/*  width: 120px;*/
/*  height: 80px;*/
/*  color: #e5e5e5;*/
/*  z-index: 1;*/
/*  transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;*/
/*}*/
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -webkit-transition-delay: 0.25s, 0s, 0s;
  transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  overflow: hidden;
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
  color: #afe1fa;
}.distribution-map .map-point{
  width: 100px;
  height: 40px;
  opacity: 1;
  z-index: 1;

}
.distribution-map .map-point::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;          /* box-এর নিচে */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #ff0000;  /* box/dot color */
}
/* content সবসময় visible */
.distribution-map .map-point .content{
  opacity: 1;
  overflow: hidden;
}

/* (optional) ছোট circle আর expand state দুইটা clash না করার জন্য */
/*.distribution-map .map-point:active,*/
/*.distribution-map .map-point:focus{*/
/*  width: 120px;*/
/*  height: 80px;*/
/*}*/