.circle-main {
    width: 250px !important;
    height: 250px !important;
    background-color: #2C17B6;
    mix-blend-mode: multiply;
    filter: blur(15px);
    flex-shrink: 0 !important;
    border-radius: 100% !important;
}

.circle-main:after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: #6B56F6;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
    filter: blur(36px);
    flex-shrink: 0;
    border-radius: 100%;
}
.circle-violet {
    width: 250px !important;
    height: 250px !important;
    background-color: #6818C5;
    mix-blend-mode: multiply;
    filter: blur(15px);
    flex-shrink: 0 !important;
    border-radius: 100% !important;
}

.circle-violet:after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: #9F56F5;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
    filter: blur(36px);
    flex-shrink: 0;
    border-radius: 100%;
}

.circle-blue {
    width: 250px !important;
    height: 250px !important;
    background-color: #6818C5;
    mix-blend-mode: multiply;
    filter: blur(15px);
    flex-shrink: 0 !important;
    border-radius: 100% !important;
    background-color: #146BF4;
}

.circle-blue:after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background-color: #488FFF;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
    filter: blur(36px);
        flex-shrink: 0;
}
.bg-down.bg-main {
	 background-color: 	var(--e-global-color-58498a7);
}
.bg-down.bg-main:after {
	 background-color: var(--e-global-color-a876eaa);
}

.bg-down.bg-blue {
	 background-color: 	var(--e-global-color-03ba9af);
}
.bg-down.bg-blue:after {
	 background-color: var(--e-global-color-8ecad3d);
}
.bg-down.bg-violet{
	 background-color: 	var(--e-global-color-1f33eeb);
}
.bg-down.bg-violet:after {
	 background-color: var(--e-global-color-13bc82a);
}
.bg-down.bg-primary {
	background-color: var(--e-global-color-a876eaa) !important;
    bottom: -420px !important;
    animation: none;
}
.bg-down.bg-primary:after {
	 background-color: var(--e-global-color-4266bd3);
	 filter: blur(100px);
}

.bg-down.bg-main {
    bottom: -120% !important;
}
.bg-down {
	height: 400px !important;
	bottom: -80% !important;
    mix-blend-mode: multiply;
    filter: blur(30px);
    flex-shrink: 0 !important;
    border-radius: 100% !important;
 	animation: subtleBoing 6s ease-in-out infinite;
}
.bg-down:after {
	content: "";
    position: absolute;
    width: 100%;
    height: 470px !important;
    bottom: 0;
    mix-blend-mode: multiply;
    filter: blur(60px);
    flex-shrink: 0;
    border-radius: 100%;
	animation: subtleBoing 6s ease-in-out infinite;
}

body .circle-small {
	width: 120px !important;
	height: 120px !important;
}
body .circle-small:after {
	width: 200px !important;
	height: 200px !important;
}
@media (max-width: 768px) {
	.circle-blue,
	.circle-violet {
		width: 150px !important;
		height: 150px !important;
	}
	.circle-blue:after,
	.circle-violet:after {
		width: 300px;
		height: 300px;
	}
	.bg-down {
		height: 200px !important;
		bottom: -20% !important;
	}
	.bg-down:after {
		height: 260px !important;
	}
	.bg-down.bg-primary {
		bottom: -30% !important;
	}
    .bg-down.bg-main {
        bottom: -30% !important;
    }
}

@keyframes subtleBoing {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.2);
  }
}