.banner {
  position: relative;
  overflow: hidden;
  max-width: 730px;
  margin: 48px auto 0 auto;
  .banner-link {
    padding: 32px 40px 32px 32px;
    background: radial-gradient(
        57.45% 120% at 48.35% -30%,
        #23ffe9 0%,
        rgba(100, 217, 205, 0) 100%
      ),
      radial-gradient(
        46.67% 46.67% at 29.12% 53.33%,
        #1390ff 0%,
        rgba(70, 135, 182, 0) 100%
      ),
      linear-gradient(4.36deg, #2d5888 -4.98%, #2266a2 104.49%);
    color: #ffffff;
    display: block;
    &:hover {
      color: #ffffff;
    }
    .banner-content {
      display: flex;
      align-items: center;
      @include breakpoint(small) {
        flex-wrap: wrap;
      }
      .banner-icon {
        display: flex;
        z-index: 2;
        @include breakpoint(min-small) {
          margin-right: 30px;
        }
        @include breakpoint(small) {
          margin-bottom: 30px;
          width: 100%;
          justify-content: center;
        }
      }
      .banner-description {
        font-family: "Baloo Bhai 2", cursive;
        font-size: 41px;
        font-weight: 600;
        line-height: 1.2;
        margin: 0;
        z-index: 2;
        @include breakpoint(min-small) {
          .separator {
            display: block;
          }
        }
        @include breakpoint(small) {
          font-size: 22px;
          svg {
            width: 22px;
            height: auto;
          }
        }
        .fw-800 {
          font-weight: 800;
        }
      }
    }
  }
  .circle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    .background {
      width: 100%;
      height: 100%;
    }
    .dot {
      position: absolute;
      background-color: #ffffff;
      border-radius: 50%;
    }

    &.circle-1,
    &.circle-4,
    &.circle-5 {
      .background {
        background: radial-gradient(
          50% 50% at 50% 50%,
          rgba(3, 227, 255, 0.9) 0%,
          rgba(12, 140, 156, 0) 100%
        );
      }
    }
    &.circle-1,
    &.circle-4 {
      .dot {
        width: 3px;
        height: 3px;
      }
      .background {
        opacity: 0.7;
      }
    }
    &.circle-1 {
      width: 100px;
      height: 100px;
      left: 100px;
      top: 15px;
      .background {
        background: radial-gradient(
          50% 50% at 50% 50%,
          rgba(3, 227, 255, 0.9) 0%,
          rgba(12, 140, 156, 0) 100%
        );
      }
    }
    &.circle-2 {
      width: 90px;
      height: 90px;
      left: 295px;
      bottom: 35px;
      .dot {
        width: 2px;
        height: 2px;
      }
      .background {
        background: radial-gradient(
          50% 50% at 50% 50%,
          rgba(3, 227, 255, 0.36) 0%,
          rgba(12, 140, 156, 0) 100%
        );
      }
    }
    &.circle-3 {
      width: 224px;
      height: 224px;
      left: 325px;
      top: -10px;
      .dot {
        width: 5.6px;
        height: 5.6px;
      }
      .background {
        background: radial-gradient(
          50% 50% at 50% 50%,
          rgba(63, 234, 255, 0.9) 0%,
          rgba(52, 135, 176, 0) 100%
        );
      }
    }
    &.circle-4 {
      width: 100px;
      height: 100px;
      right: 125px;
      bottom: -15px;
    }
    &.circle-5 {
      width: 86px;
      height: 86px;
      right: 4px;
      top: -4px;
      .dot {
        width: 4px;
        height: 4px;
      }
      .background {
        opacity: 0.6;
      }
    }
  }
}
