.gradient-wrap{
	padding:20px 0px;
	text-align:center;
}
.gradient-box{
  display: flex;
  align-items: center;
  text-align:center;
  justify-content: center;
  width: 180px;
  height: 180px;
  position: relative;
  font-size:1.8rem;
  color:#1098ad;
  margin:10px auto;
}
.sb {
	width: 35px;
	height:35px;
	position:absolute;
	z-index:10;
	top:125px;
	left:118px;
	border-radius: 50%;
	border: 2px solid #1098ad;
}
.gradient-border {
  --borderWidth: 3px;border-width:3px;
  background: #fff;
  border-radius:50%;
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #ffffff, #1098ad, #ffffff, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius:50%;
  z-index: -1;
  -webkit-animation: animatedgradient 3s ease alternate infinite;
 animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 100%;
}
@-webkit-keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
