.main {
    margin: 0px auto;
    width: 680px;
    height: 680px;
    position: relative;
    background: #ffffff;
    border-radius: 50%;
    padding: 80px;
    box-shadow: 0 0px 40px rgb(0 0 0 / 4%);
}
.main:before {
    content: '';
    position: absolute;
    left: 50%;
    right: 0;
    top: 50%;
    bottom: 0;
    width: 130%;
    height: 130%;
    background: #fbfdff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0px 40px rgb(0 0 0 / 3%);
    z-index: -1;
}
.big-circle {
    height: 100%;
    width: 100%;
    position: relative;
    border: 2px solid #437baf;
    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;
    box-shadow: 0 0px 40px rgb(0 0 0 / 9%);
    background: #fff;
}
.icon-block {
    width: 130px;
    height: 130px;
    position: absolute;
    border-radius: 50%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    -webkit-background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    box-shadow: 0 0px 40px rgb(0 0 0 / 9%);
    background: #fff;
}
.icon-block img {
    margin: 0px auto;
    width: 75%;
    animation: Rotate-reverse 20s linear infinite;
    -webkit-animation: Rotate-reverse 20s linear infinite;
    border-radius:50%;
}
.icon-block:first-child {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.icon-block:nth-child(2) {
    top: 50%;
    right: 0;
    transform: translate(30%, 50%);
    -webkit-transform: translate(30%, 50%);
}
.icon-block:nth-child(3) {
    bottom: 0;
    left: 0%;
    transform: translate(-30%, -60%);
    -webkit-transform: translate(-30%, -60%);
}
/* circle content */
.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);
    width: 55%;
    height: 55%;
    border: 2px solid #d6e2f1;
    border-radius: 50%;
    box-shadow: 0 0px 40px rgb(0 0 0 / 6%);
    background: #fff;
}
.circle .icon-block img {
    animation: img-rotate 20s linear infinite;
    -webkit-animation: img-rotate 20s linear infinite;
}
/* center logo */
.center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.center-logo img {
    max-width: 200px;
}

/* 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);
    }
}



@media (max-width:767px){
    .main {
        width: 500px;
        height: 500px;
        padding: 60px;
        margin-top: 80px;
    }
    .icon-block {
        width: 90px;
        height: 90px;
    }
    .circle {
        width: 40%;
        height: 40%;
    }
    .center-logo img {
        max-width: 180px !important;
    }
}