.h530w530{
height:580px;
  width:580px;
}
.circle-main {
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 26px;
  overflow: hidden;
  position:absolute;
}

.big-circle {
  height: 100%;
  width: 100%;
  border: 1px solid #C6D3E7;
  position: relative;
  /* border: 3px solid #6495f2; */
  border-radius: 50%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  animation: Rotate 20s linear infinite;
  -webkit-animation: Rotate 20s linear infinite;
}



.icon-block {
  width: 52px;
  height: 52px;
  position: absolute;
  border-radius: 50%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  overflow: hidden;
  background-color: #F3F5FF;
}
.icon-block.w82h82{
  width: 82px;
  height: 82px;
}
.icon-block.w45h45{
  width: 45px;
  height: 45px;
}
.icon-block.w78h78{
  width: 78px;
  height: 78px;
}
.icon-block.w68h68{
  width: 68px;
  height: 68px;
}
.big-circle .icon-block img {
  animation: Rotate-reverse 20s linear infinite;
  -webkit-animation: Rotate-reverse 20s linear infinite;
}

.icon-block img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* circle content */
.mide-circle {
  animation: mide-circle-Rotate-reverse 20s linear infinite;
  -webkit-animation: mide-circle-Rotate-reverse 20s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  height: 75%;
  width: 75%;
  border: 1px solid #C6D3E7;
  border-radius: 50%;
}

.mide-circle .icon-block img {
  animation: Rotate 20s linear infinite;
  -webkit-animation: Rotate 20s linear infinite;
}

/* circle content */
.small-circle {
  animation: circle-rotate 20s linear infinite;
  -webkit-animation: circle-rotate 20s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  height: 50%;
  width: 50%;
  border: 1px solid #C6D3E7;
  border-radius: 50%;
}

.small-circle .icon-block img {
  animation: img-rotate 20s linear infinite;
  -webkit-animation: img-rotate 20s linear infinite;
}
.innerCircle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  height: 25%;
  width: 25%;
  border: 1px solid #C6D3E7;
  border-radius: 50%;
}
/* center logo */
.center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.center-logo  {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.max-w230 {
  max-width: 230px;
}

.w200px{
  width: 200px;
}

.w300px{
  width: 300px;
}


/* .big-circle .icon-block:first-child {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.big-circle .icon-block:nth-child(2) {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
}

.big-circle .icon-block:nth-child(3) {
  bottom: 50%;
  left: 0%;
  transform: translate(-50%, 50%);
  -webkit-transform: translate(-50%, 50%);
} */



/* .mide-circle .icon-block:first-child {
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.mide-circle .icon-block:nth-child(2) {
  top: 90%;
  right: 20%;
  transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
}
 */


/* .small-circle .icon-block:first-child {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.small-circle .icon-block:nth-child(2) {
  bottom: -24%;
  right: 50%;
  transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
} */
.small-circle .small-small-dote {
  position: absolute;
  top: 45%;
  transform: translate(-50%, 50%);
  right: -5%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #FECDCA;
}

.small-circle .small-big-dote {
  position: absolute;
  bottom: 50%;
  transform: translate(-50%, 50%);
  left: 0%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #D5DDFF;
}


.mide-circle .mide-small-dot {
  position: absolute;
  top: 82%;
  transform: translate(-50%, 50%);
  right: 82%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ABEFC6;
}

.mide-circle .mide-mide-dot {
  position: absolute;
  bottom: 35%;
  transform: translate(-50%, 50%);
  right: -2%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #FEDF89;
}

.mide-circle .mide-big-dot {
  position: absolute;
  top: -2%;
  transform: translate(-50%, 50%);
  right: 32%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ABEFC6;
}


.big-circle .big-small-dot {
  position: absolute;
  top: 26%;
  transform: translate(-50%, 50%);
  left: 5%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #D5DDFF;
}

.big-circle .big-mide-dot {
  position: absolute;
  top: 19%;
  transform: translate(-50%, 50%);
  right: 6%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #FECDCA;
}

.big-circle .big-big-dot {
  position: absolute;
  bottom: 16%;
  transform: translate(-50%, 50%);
  right: 10%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ABEFC6;
}

.big-circle .big-big-dot2 {
  position: absolute;
  bottom: 20%;
  transform: translate(-50%, 50%);
  left: 10%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #FEDF89;
}





/* keyframe animation */

@keyframes Rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes Rotate {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes Rotate-reverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes Rotate-reverse {
  from {
    -webkit-transform: rotate(360deg);
  }

  to {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes circle-rotate {
  from {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(405deg);
  }
}

@-webkit-keyframes circle-rotate {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
  }

  to {
    -webkit-transform: translate(-50%, -50%) rotate(405deg);
  }
}

@keyframes img-rotate {
  from {
    transform: rotate(-45deg);
  }

  to {
    transform: rotate(-405deg);
  }
}

@-webkit-keyframes img-rotate {
  from {
    -webkit-transform: rotate(-45deg);
  }

  to {
    -webkit-transform: rotate(-405deg);
  }
}

@keyframes mide-circle-Rotate-reverse {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@-webkit-keyframes mide-circle-Rotate-reverse {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
  }

  to {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
  }
}

@media screen and (max-width: 768px){
  .resscale06{
    transform: scale(0.6);
  }
  .circle-main{
    left: 15%;
    top: 10%;
  }
}