.ris-wrapper {
    position: relative;
    height: 700px;
    color: #fff;
}

/* ================= SPHERE ================= */
.round-path {
    position: absolute;
    top: -8%;
    left: 0;
    width: 603px;
    height: 603px;
    animation: rotateCircle 12s linear infinite;
}

.oval-path {
    position: absolute;
    top: -8%;
    left: 28%;
    width: 268px;
    height: 603px;
    border-radius: 50%;
    animation: rotateOval 12s linear infinite;
}

.round-path .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
}

/* ---------- Circular motion (i1, i2, i3) ---------- */
.round-path .i1 {
    transform: rotate(25deg) translateX(285px);
}

.round-path .i2 {
    transform: rotate(120deg) translateX(285px);
}

.round-path .i3 {
    transform: rotate(240deg) translateX(285px);
}

/* ---------- Oval motion (i4, i5, i6) ---------- */
.oval-path .i4 {
    transform: rotate(0deg) translateX(115px);
}

.oval-path .i5 {
    transform: rotate(180deg) translateX(120px);
}

.oval-path .i6 {
    transform: rotate(189deg) translateX(160px);
}

@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.boxes {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
}

/* @keyframes rotateOval {
    from {
        transform: scaleY(2.25) rotate(0deg);
    }

    to {
        transform: scaleY(2.25) rotate(360deg);
    }
} */

@media (min-width: 1441px) {
    .round-path {
        left: 6%;
    }

    .oval-path {
        left:30%;
    }

    .boxes {
        left: 48%;
    }
}

@media (min-width: 1651px) {
    .round-path {
        left: 22%;
    }

    .oval-path {
        left:43%;
    }

    .boxes {
        left: 60%;
    }
}

@media (max-width: 1152px) {
    .round-path {
        width: 452px;
        height: 452px;
        top: 3%;
    }

    .round-path .i1 {
        transform: rotate(25deg) translateX(210px);
    }

    .round-path .i2 {
        transform: rotate(120deg) translateX(210px);
    }

    .round-path .i3 {
        transform: rotate(240deg) translateX(210px);
    }

    .oval-path {
        width: 203px;
        height: 448px;
        top: 3%;
    }

    .oval-path .i4 {
        transform: rotate(0deg) translateX(85px);
    }

    .oval-path .i5 {
        transform: rotate(180deg) translateX(100px);
    }

    .oval-path .i6 {
        transform: rotate(189deg) translateX(120px);
    }

    .elipse-584 {
        left: -29% !important;
        top: 33% !important;
    }

    .elipse-585 {
        left: 100% !important;
        top: 20% !important;
    }

    .box-a-subchild {
        font-size: 12px !important;
    }

    .box-a-child {
        font-size: 11px !important;
        line-height: 16.81px !important;
    }

    .box-b-subchild {
        font-size: 12px !important;
    }

    .box-b-child {
        font-size: 11px !important;
        line-height: 16.81px !important;
    }

    .boxes {
        width: 400px;
    }

    .box-a {
        left: -38% !important;
        top: -120% !important;
        width: 240px !important;
    }

    .box-b {
        left: 88% !important;
        width: 250px !important;
    }

    .hero-buttons {
        --display: flex !important;
        --flex-direction: column !important;
        --gap: 10px !important;
    }
}

.round-path .icon img {
    animation: counterRotate 12s linear infinite;
}

@keyframes counterRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}



.oval-path .icon.i4 {
    position: absolute;
    top: 87%;
    left: 28%;
}

.oval-path .icon.i5 {
    position: absolute;
    top: -4%;
    left: 84%;
}

.oval-path .icon.i6 {
    position: absolute;
    top: 26%;
    left: 57%;
}

/* .oval-path .icon img {
    transform: scaleY(0.5) scaleX(0.5);
    transform-origin: center;
} */

.box.show {
    opacity: 1;
    transform: translateY(0);
}

.box {
    width: 260px;
    background: #fff;
    color: #000;
    border-radius: 12px;
    font-family: 'Inter';
    transition: transform 1.5s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%), opacity 1.5s ease;
}

.box-a {
    position: absolute;
    left: -15%;
    top: -116%;
    width: 330px;
}

.box-b {
    position: relative;
    left: 66%;
    top: 0%;
    width: 350px;
    z-index: -1;
}

/* Swap animation */
.swap .box-a {
    transform: translateX(300px);
}

.swap .box-b {
    transform: translateX(-300px);
}