#container_circle {
        -webkit-transform: translate(-50%, -50%);
        -khtml-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-40%, -50%);
        -webkit-perspective: 600px;
        -khtml-perspective: 600px;
        -moz-perspective: 600px;
        -ms-perspective: 600px;
        -o-perspective: 600px;
        perspective: 600px;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        position: relative;
        left: 50%;
        top: 120px;
        width: 900px;
    }
    
    .container_circle1 {
        width: 180px;
        height: 180px;
        background-color: transparent;
        position: relative;
        top: -18px;
    }
    
    .container_circle2 {
        width: 220px;
        height: 220px;
        background: linear-gradient(81.74deg, #2845EA 8.62%, #0BCF7E 53.22%);
        color: white;
        position: relative;
        top: -50px;
    }
    
    .container_circle3 {
        width: 200px;
        background-color: transparent;
        height: 200px;
        position: relative;
        top: -36px;
    }
    
    .container_circle4 {
        width: 180px;
        background-color: transparent;
        height: 180px;
        position: relative;
        top: -18px;
    }
    
    .container_circle1::before {
        background: url(../img/OUR_n.svg);
        content: '';
        position: absolute;
        width: 230px;
        height: 180px;
        background-size: cover;
        background-repeat: no-repeat;
        right: -3px;
        top: -152px;
        transform: rotate(-6deg);
    }
    
    .container_circle2::after {
        background: url(../img/FUN_n.svg);
        content: '';
        position: absolute;
        width: 230px;
        height: 185px;
        background-size: cover;
        background-repeat: no-repeat;
        right: -26px;
        top: -165px;
        transform: rotate(8deg);
    }
    
    .container_circle4::after {
        background: url(../img/FACTS_n.svg);
        content: '';
        position: absolute;
        width: 340px;
        height: 138px;
        background-size: cover;
        background-repeat: no-repeat;
        right: -70px;
        top: -125px;
        transform: rotate(10deg);
    }
    
    .container_circle1>div,
    .container_circle2>div,
    .container_circle3>div,
    .container_circle4>div {
        position: relative;
        top: 30%;
        left: 0%;
        text-align: center;
    }
    
    .container_circle1>div>span,
    .container_circle3>div>span,
    .container_circle4>div>span {
        background: linear-gradient(81.74deg, #2845EA 8.62%, #0BCF7E 53.22%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 38px;
        font-weight: 600;
    }
    
    .container_circle2>div>span {
        font-size: 38px;
        font-weight: 600;
    }
    
    .container_circle1>div>p,
    .container_circle2>div>p,
    .container_circle3>div>p,
    .container_circle4>div>p {
        font-size: 16px;
        font-weight: 400;
    }
    
    #container_circle div.ball:nth-of-type(1) {
        -webkit-animation: bounce 0.95s ease-in infinite alternate;
        -khtml-animation: bounce 0.95s ease-in infinite alternate;
        -moz-animation: bounce 0.95s ease-in infinite alternate;
        -ms-animation: bounce 0.95s ease-in infinite alternate;
        -o-animation: bounce 0.95s ease-in infinite alternate;
        animation: bounce 0.95s ease-in infinite alternate;
        -webkit-animation-delay: 0s;
        -khtml-animation-delay: 0s;
        -moz-animation-delay: 0s;
        -ms-animation-delay: 0s;
        -o-animation-delay: 0s;
        animation-delay: 0s;
    }
    
    #container_circle div.ball:nth-of-type(2) {
        -webkit-animation: bounce 0.95s ease-in infinite alternate;
        -khtml-animation: bounce 0.95s ease-in infinite alternate;
        -moz-animation: bounce 0.95s ease-in infinite alternate;
        -ms-animation: bounce 0.95s ease-in infinite alternate;
        -o-animation: bounce 0.95s ease-in infinite alternate;
        animation: bounce 0.95s ease-in infinite alternate;
        -webkit-animation-delay: 0.2s;
        -khtml-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        -ms-animation-delay: 0.2s;
        -o-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }
    
    #container_circle div.ball:nth-of-type(3) {
        -webkit-animation: bounce 0.95s ease-in infinite alternate;
        -khtml-animation: bounce 0.95s ease-in infinite alternate;
        -moz-animation: bounce 0.95s ease-in infinite alternate;
        -ms-animation: bounce 0.95s ease-in infinite alternate;
        -o-animation: bounce 0.95s ease-in infinite alternate;
        animation: bounce 0.95s ease-in infinite alternate;
        -webkit-animation-delay: 0.4s;
        -khtml-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        -ms-animation-delay: 0.4s;
        -o-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }
    
    #container_circle div.ball:nth-of-type(4) {
        -webkit-animation: bounce 0.95s ease-in infinite alternate;
        -khtml-animation: bounce 0.95s ease-in infinite alternate;
        -moz-animation: bounce 0.95s ease-in infinite alternate;
        -ms-animation: bounce 0.95s ease-in infinite alternate;
        -o-animation: bounce 0.95s ease-in infinite alternate;
        animation: bounce 0.95s ease-in infinite alternate;
        -webkit-animation-delay: 0.6s;
        -khtml-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        -ms-animation-delay: 0.6s;
        -o-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }
    
    #container_circle div.ball {
        -webkit-border-radius: 50%;
        -khtml-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: translateY(-50px);
        -khtml-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
        -o-transform: translateY(-50px);
        transform: translateY(-50px);
        -webkit-transform-style: preserve-3d;
        -khtml-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        display: inline-block;
        border: 2px solid black;
    }
    
    @-webkit-keyframes bounce {
        0% {
            -webkit-transform: translateY(-50px);
            -khtml-transform: translateY(-50px);
            -moz-transform: translateY(-50px);
            -ms-transform: translateY(-50px);
            -o-transform: translateY(-50px);
            transform: translateY(-50px);
        }
        50% {}
        95% {
            border-radius: 50%;
        }
        100% {
            -webkit-transform: translateY(50px);
            -khtml-transform: translateY(50px);
            -moz-transform: translateY(50px);
            -ms-transform: translateY(50px);
            -o-transform: translateY(50px);
            transform: translateY(50px);
            /* border-radius: 50% 50% 10% 10%; */
        }
    }
    
    @media screen and (max-width: 1440px) {
        #container_circle {
            left: 50%;
            top: 110px;
            width: 635px;
        }
        .container_circle1 {
            width: 140px;
            height: 140px;
            background-color: white;
            position: relative;
            top: -18px;
        }
        .container_circle2 {
            width: 180px;
            height: 180px;
            background: linear-gradient(81.74deg, #2845EA 8.62%, #0BCF7E 53.22%);
            color: white;
            position: relative;
            top: -58px;
        }
        .container_circle3 {
            width: 160px;
            height: 160px;
            background-color: white;
            position: relative;
            top: -20px;
        }
        .container_circle4 {
            width: 140px;
            height: 140px;
            background-color: white;
            position: relative;
            top: -20px;
        }
        .container_circle1::before {
            width: 170px;
            height: 130px;
            right: 8px;
            top: -108px;
            transform: rotate(-6deg);
        }
        .container_circle2::after {
            width: 167px;
            height: 135px;
            right: -25px;
            top: -94px;
            transform: rotate(-9deg);
        }
        .container_circle4::after {
            width: 238px;
            height: 100px;
            right: -38px;
            top: -90px;
            transform: rotate(10deg);
        }
        .container_circle1>div,
        .container_circle2>div,
        .container_circle3>div,
        .container_circle4>div {
            position: relative;
            top: 30%;
            left: 0%;
            text-align: center;
        }
        .container_circle1>div>span,
        .container_circle3>div>span,
        .container_circle4>div>span {
            background: linear-gradient(81.74deg, #2845EA 8.62%, #0BCF7E 53.22%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 24px;
            font-weight: 600;
        }
        .container_circle2>div>span {
            font-size: 24px;
            font-weight: 600;
        }
        .container_circle1>div>p,
        .container_circle2>div>p,
        .container_circle3>div>p,
        .container_circle4>div>p {
            font-size: 13px;
            font-weight: 400;
        }
    }
    
    @media screen and (max-width: 1024px) {
        #container_circle {
            -webkit-transform: translate(-50%, -50%);
            -khtml-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-45%, -50%);
            -webkit-perspective: 600px;
            -khtml-perspective: 600px;
            -moz-perspective: 600px;
            -ms-perspective: 600px;
            -o-perspective: 600px;
            perspective: 600px;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            position: relative;
            left: 50%;
            top: 110px;
            width: 635px;
        }
        .container_circle1 {
            width: 140px;
            height: 140px;
            background-color: white;
            position: relative;
            top: -18px;
        }
        .container_circle2 {
            width: 180px;
            height: 180px;
            background: linear-gradient(81.74deg, #2845EA 8.62%, #0BCF7E 53.22%);
            color: white;
            position: relative;
            top: -58px;
        }
        .container_circle3 {
            width: 160px;
            height: 160px;
            background-color: white;
            position: relative;
            top: -20px;
        }
        .container_circle4 {
            width: 140px;
            height: 140px;
            background-color: white;
            position: relative;
            top: -20px;
        }
        .container_circle1::before {
            width: 170px;
            height: 130px;
            right: 8px;
            top: -108px;
            transform: rotate(-6deg);
        }
        .container_circle2::after {
            width: 167px;
            height: 135px;
            right: -25px;
            top: -94px;
            transform: rotate(-9deg);
        }
        .container_circle4::after {
            width: 238px;
            height: 100px;
            right: -38px;
            top: -90px;
            transform: rotate(10deg);
        }
        .container_circle1>div,
        .container_circle2>div,
        .container_circle3>div,
        .container_circle4>div {
            position: relative;
            top: 30%;
            left: 0%;
            text-align: center;
        }
        .container_circle1>div>span,
        .container_circle3>div>span,
        .container_circle4>div>span {
            background: linear-gradient(81.74deg, #2845EA 8.62%, #0BCF7E 53.22%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 24px;
            font-weight: 600;
        }
        .container_circle2>div>span {
            font-size: 24px;
            font-weight: 600;
        }
        .container_circle1>div>p,
        .container_circle2>div>p,
        .container_circle3>div>p,
        .container_circle4>div>p {
            font-size: 13px;
            font-weight: 400;
        }
    }
    
    @media screen and (max-width: 768px) {
        #container_circle {
            -webkit-transform: translate(-50%, -50%);
            -khtml-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-45%, -43%);
            -webkit-perspective: 600px;
            -khtml-perspective: 600px;
            -moz-perspective: 600px;
            -ms-perspective: 600px;
            -o-perspective: 600px;
            perspective: 600px;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            position: relative;
            left: 50%;
            top: 110px;
            width: 370px;
        }
        .container_circle1 {
            width: 140px;
            height: 140px;
            background-color: transparent;
            position: relative;
            top: -18px;
        }
        .container_circle2 {
            width: 180px;
            height: 180px;
            background: linear-gradient(81.74deg, #2845EA 8.62%, #0BCF7E 53.22%);
            color: white;
            position: relative;
            top: -58px;
        }
        .container_circle3 {
            width: 160px;
            height: 160px;
            background-color: transparent;
            position: relative;
            top: -20px;
        }
        .container_circle4 {
            width: 140px;
            height: 140px;
            background-color: transparent;
            position: relative;
            top: -20px;
        }
        .container_circle1::before {
            width: 170px;
            height: 130px;
            right: 8px;
            top: -108px;
            transform: rotate(-6deg);
        }
        .container_circle2::after {
            width: 167px;
            height: 135px;
            right: -25px;
            top: -94px;
            transform: rotate(-9deg);
        }
        .container_circle4::after {
            width: 238px;
            height: 100px;
            right: -38px;
            top: -90px;
            transform: rotate(10deg);
        }
        .container_circle1>div,
        .container_circle2>div,
        .container_circle3>div,
        .container_circle4>div {
            position: relative;
            top: 30%;
            left: 0%;
            text-align: center;
        }
        .container_circle1>div>span,
        .container_circle3>div>span,
        .container_circle4>div>span {
            background: linear-gradient(81.74deg, #2845EA 8.62%, #0BCF7E 53.22%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 24px;
            font-weight: 600;
        }
        .container_circle2>div>span {
            font-size: 24px;
            font-weight: 600;
        }
        .container_circle1>div>p,
        .container_circle2>div>p,
        .container_circle3>div>p,
        .container_circle4>div>p {
            font-size: 13px;
            font-weight: 400;
        }
    }
    
    @media screen and (max-width: 425px) {
        #container_circle {
            -webkit-transform: translate(-50%, -50%);
            -khtml-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-48%, -50%);
            -webkit-perspective: 600px;
            -khtml-perspective: 600px;
            -moz-perspective: 600px;
            -ms-perspective: 600px;
            -o-perspective: 600px;
            perspective: 600px;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            position: relative;
            left: 50%;
            top: 110px;
            width: 370px;
        }
        .container_circle1 {
            width: 140px;
            height: 140px;
            background-color: transparent;
            position: relative;
            top: -18px;
            left: 12%;
        }
        .container_circle2 {
            width: 180px;
            height: 180px;
            background: linear-gradient(81.74deg, #2845EA 8.62%, #0BCF7E 53.22%);
            color: white;
            position: relative;
            top: -78px;
            left: 12%;
        }
        .container_circle3 {
            width: 160px;
            height: 160px;
            background-color: transparent;
            position: relative;
            top: 10px;
            left: 12%;
        }
        .container_circle4 {
            width: 140px;
            height: 140px;
            background-color: transparent;
            position: relative;
            top: 10px;
            left: 12%;
        }
        .container_circle1::before {
            width: 125px;
            height: 99px;
            right: 33px;
            top: -64px;
            transform: rotate(-6deg);
        }
        .container_circle2::after {
            width: 120px;
            height: 95px;
            right: -27px;
            top: -63px;
            transform: rotate(-9deg);
        }
        .container_circle4::after {
            width: 182px;
            height: 75px;
            right: -38px;
            top: -68px;
            transform: rotate(10deg);
        }
        .container_circle1>div,
        .container_circle2>div,
        .container_circle3>div,
        .container_circle4>div {
            position: relative;
            top: 19%;
            left: 0%;
            text-align: center;
        }
        .container_circle1>div>span,
        .container_circle3>div>span,
        .container_circle4>div>span {
            background: linear-gradient(81.74deg, #2845EA 8.62%, #0BCF7E 53.22%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 24px;
            font-weight: 600;
        }
        .container_circle2>div>span {
            font-size: 24px;
            font-weight: 600;
        }
        .container_circle1>div>p,
        .container_circle2>div>p,
        .container_circle3>div>p,
        .container_circle4>div>p {
            font-size: 13px;
            font-weight: 400;
        }
        .below-tex {
            margin-bottom: 260px;
        }
    }
    /* dark_mmod */
    
    body.dark .container_circle1 {
        background: black;
    }
    
    body.dark .container_circle3 {
        background: black;
    }
    
    body.dark .container_circle4 {
        background: black;
    }
    
    body.dark .container_circle1::before {
        background: url(../img/OUR_n.svg);
        content: '';
        position: absolute;
        width: 230px;
        height: 180px;
        background-size: cover;
        background-repeat: no-repeat;
        right: -3px;
        top: -152px;
        transform: rotate(-6deg);
    }
    
    body.dark .container_circle2::after {
        background: url(../img/FUN_n.svg);
        content: '';
        position: absolute;
        width: 230px;
        height: 185px;
        background-size: cover;
        background-repeat: no-repeat;
        right: -26px;
        top: -165px;
        transform: rotate(8deg);
    }
    
    body.dark .container_circle4::after {
        background: url(../img/FACTS_n.svg);
        content: '';
        position: absolute;
        width: 340px;
        height: 138px;
        background-size: cover;
        background-repeat: no-repeat;
        right: -70px;
        top: -125px;
        transform: rotate(10deg);
    }
    
    body.dark #container_circle div.ball {
        border: 2px solid rgb(255, 255, 255);
    }
    
    body.dark .container_circle1>div>p,
    body.dark .container_circle2>div>p,
    body.dark .container_circle3>div>p,
    body.dark .container_circle4>div>p {
        color: rgb(255, 255, 255);
    }
    
    @media screen and (max-width: 1444px) {
        body.dark .container_circle1::before {
            width: 170px;
            height: 130px;
            right: 8px;
            top: -108px;
            transform: rotate(-6deg);
        }
        body.dark .container_circle2::after {
            width: 167px;
            height: 135px;
            right: -25px;
            top: -94px;
            transform: rotate(-9deg);
        }
        body.dark .container_circle4::after {
            width: 238px;
            height: 100px;
            right: -38px;
            top: -90px;
            transform: rotate(10deg);
        }
    }
    
    @media screen and (max-width: 1024px) {
        body.dark .container_circle1::before {
            width: 170px;
            height: 130px;
            right: 8px;
            top: -108px;
            transform: rotate(-6deg);
        }
        body.dark .container_circle2::after {
            width: 167px;
            height: 135px;
            right: -25px;
            top: -94px;
            transform: rotate(-9deg);
        }
        body.dark .container_circle4::after {
            width: 238px;
            height: 100px;
            right: -38px;
            top: -90px;
            transform: rotate(10deg);
        }
    }
    
    @media screen and (max-width: 768px) {
        body.dark .container_circle1::before {
            width: 170px;
            height: 130px;
            right: 8px;
            top: -108px;
            transform: rotate(-6deg);
        }
        body.dark .container_circle2::after {
            width: 167px;
            height: 135px;
            right: -25px;
            top: -94px;
            transform: rotate(-9deg);
        }
        body.dark .container_circle4::after {
            width: 238px;
            height: 100px;
            right: -38px;
            top: -90px;
            transform: rotate(10deg);
        }
    }
    
    @media screen and (max-width: 425px) {
        .container_circle1 {
            width: 110px;
            height: 110px;
            background-color: transparent;
            position: relative;
            top: -18px;
        }
        .container_circle2 {
            width: 150px;
            height: 150px;
            background: linear-gradient(81.74deg, #2845EA 8.62%, #0BCF7E 53.22%);
            color: white;
            position: relative;
            top: -58px;
        }
        .container_circle3 {
            width: 130px;
            height: 130px;
            background-color: transparent;
            position: relative;
            top: -20px;
        }
        .container_circle4 {
            width: 110px;
            height: 110px;
            background-color: transparent;
            position: relative;
            top: 1px;
        }
        body.dark .container_circle1::before {
            width: 125px;
            height: 99px;
            right: 33px;
            top: -64px;
            transform: rotate(-6deg);
        }
        body.dark .container_circle2::after {
            width: 120px;
            height: 95px;
            right: -27px;
            top: -63px;
            transform: rotate(-9deg);
        }
        body.dark .container_circle4::after {
            width: 182px;
            height: 75px;
            right: -38px;
            top: -68px;
            transform: rotate(10deg);
        }
    }