.scene {
    position: relative;
    width: 100%;
    max-width: 1500px;
    height: 700px;
    overflow: hidden;
}

/* =========================
   CENTER EARTH
========================= */

.center {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.earth {
    /* width: 620px;
    height: 620px;

    border-radius: 50%;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 30% 30%, #444, #111 75%);

    box-shadow:
        inset -20px -20px 60px rgba(255, 255, 255, 0.06),
        inset 20px 20px 60px rgba(0, 0, 0, 0.6); */


    width: 620px;
    height: 620px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;

}


.earth img,
.earth video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================
   EARTH DOT EFFECT
========================= */

/* .earth::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(#ffffff 1px, transparent 1px);

    background-size: 8px 8px;
    opacity: .25;

    animation: dotsMove 25s linear infinite;
} */

@keyframes dotsMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-80px);
    }
}

/* =========================
   ORBITS
========================= */

.orbit {
    position: absolute;

    top: 100%;
    left: 50%;

    border: 1px solid #C8BBBB;
    border-radius: 50%;

    transform-origin: center;
}

/* =========================
   ORBIT SIZES
========================= */

.orbit1 {
    width: 900px;
    height: 900px;

    margin-left: -450px;
    margin-top: -450px;

    animation: spin 20s linear infinite;
}

.orbit2 {
    width: 1100px;
    height: 1100px;

    margin-left: -550px;
    margin-top: -550px;

    animation: spinReverse 28s linear infinite;
}

.orbit3 {
    width: 1300px;
    height: 1300px;

    margin-left: -650px;
    margin-top: -650px;

    animation: spin 36s linear infinite;
}

/* =========================
   GLOW DOTS
========================= */

.glow-dot {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: linear-gradient(155.75deg, #29D5E0 -8.55%, #1B9AF7 36.55%, #1F4EF0 93.09%);

}

/* =========================
   SAFE DOT POSITIONS
========================= */

.orbit1 .glow-dot:nth-child(1) {
    top: 95px;
    left: 165px;
}

.orbit1 .glow-dot:nth-child(2) {
    bottom: 125px;
    right: 130px;
}

.orbit2 .glow-dot:nth-child(1) {
    top: 165px;
    left: 150px;
}

.orbit2 .glow-dot:nth-child(2) {
    bottom: 185px;
    right: 130px;
}

.orbit3 .glow-dot:nth-child(1) {
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
}

.orbit3 .glow-dot:nth-child(2) {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}

/* =========================
   AVATARS
========================= */

.avatar {
    position: absolute;

    width: 80px;
    height: 80px;

    border-radius: 50%;
    overflow: hidden;

    border: 8px solid #F8F8F8;
    background: #fff;

    /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); */
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================
   KEEP IMAGES STRAIGHT
========================= */

.orbit1 .avatar {
    animation: keepStraight 20s linear infinite;
}

.orbit2 .avatar {
    animation: keepStraightReverse 28s linear infinite;
}

.orbit3 .avatar {
    animation: keepStraight 36s linear infinite;
}

/* =========================
   ORBIT 1 AVATARS
========================= */

.orbit1 .avatar:nth-of-type(3) {
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
}

.orbit1 .avatar:nth-of-type(4) {
    right: -45px;
    top: 50%;
    transform: translateY(-50%);
}

.orbit1 .avatar:nth-of-type(5) {
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
}

/* =========================
   ORBIT 2 AVATARS
========================= */

.orbit2 .avatar:nth-of-type(3) {
    left: -45px;
    top: 50%;
    transform: translateY(-50%);
}

.orbit2 .avatar:nth-of-type(4) {
    top: 70px;
    right: 165px;
}

.orbit2 .avatar:nth-of-type(5) {
    bottom: 70px;
    left: 175px;
}

/* =========================
   ORBIT 3 AVATARS
========================= */

.orbit3 .avatar:nth-of-type(3) {
    top: 140px;
    left: 175px;
}

.orbit3 .avatar:nth-of-type(4) {
    top: 140px;
    right: 150px;
}

.orbit3 .avatar:nth-of-type(5) {
    bottom: 140px;
    right: 150px;
}

/* =========================
   MAIN ROTATION
========================= */

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

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

@keyframes spinReverse {
    from {
        transform: rotate(360deg);
    }

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

/* =========================
   KEEP IMAGE STRAIGHT
========================= */

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

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

@keyframes keepStraightReverse {
    from {
        transform: rotate(-360deg);
    }

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

@media screen and (max-width: 1280px) {

    /* Career Banner Section Start */
    .scene {
        height: 620px;
    }

    .earth {
        width: 500px;
        height: 500px;
    }

    .orbit1 {
        width: 760px;
        height: 760px;

        margin-left: -380px;
        margin-top: -380px;
    }

    .orbit2 {
        width: 940px;
        height: 940px;

        margin-left: -470px;
        margin-top: -470px;
    }

    .orbit3 {
        width: 1120px;
        height: 1120px;

        margin-left: -560px;
        margin-top: -560px;
    }

    .orbit1 .glow-dot:nth-child(1){
        left: 118px;
    }
    .orbit1 .glow-dot:nth-child(2){
        right: 90px;
    }
    .orbit2 .glow-dot:nth-child(1){
        left: 103px;
    }

    .orbit2 .glow-dot:nth-child(2){
        right: 89px;
    }

    .orbit3 .avatar:nth-of-type(5),
    .orbit3 .avatar:nth-of-type(4){
        right: 107px;
    }

    .orbit3 .avatar:nth-of-type(3){
        left: 102px;
    }

    .orbit2 .avatar:nth-of-type(5){
        left: 140px;
    }

    .orbit2 .avatar:nth-of-type(4){
        right: 123px;
    }

    /* Career Banner Section End */
}


@media screen and (max-width: 991px) {
    .scene {
        height: 520px;
    }

    .center,
    .orbit {
        top: 95%;
    }

    .earth {
        width: 360px;
        height: 360px;
    }

    .orbit1 {
        width: 560px;
        height: 560px;

        margin-left: -280px;
        margin-top: -280px;
    }

    .orbit2 {
        width: 720px;
        height: 720px;

        margin-left: -360px;
        margin-top: -360px;
    }

    .orbit3 {
        width: 880px;
        height: 880px;

        margin-left: -440px;
        margin-top: -440px;
    }

    .avatar {
        width: 65px;
        height: 65px;
        border-width: 5px;
    }

    /* ORBIT 1 */

    .orbit1 .avatar:nth-of-type(3) {
        top: -35px;
    }

    .orbit1 .avatar:nth-of-type(4) {
        right: -35px;
    }

    .orbit1 .avatar:nth-of-type(5) {
        bottom: -35px;
    }

    /* ORBIT 2 */

    .orbit2 .avatar:nth-of-type(4) {
        top: 60px;
        right: 120px;
    }

    .orbit2 .avatar:nth-of-type(5) {
        bottom: 60px;
        left: 120px;
    }

    /* ORBIT 3 */

    .orbit3 .avatar:nth-of-type(3) {
        top: 110px;
        left: 110px;
    }

    .orbit3 .avatar:nth-of-type(4) {
        top: 110px;
        right: 110px;
    }

    .orbit3 .avatar:nth-of-type(5) {
        bottom: 110px;
        right: 110px;
    }
}

@media screen and (max-width: 767px) {
    .scene {
        height: 400px;
    }

    .center,
    .orbit {
        top: 90%;
    }

    .earth {
        width: 220px;
        height: 220px;
    }

    .orbit1 {
        width: 360px;
        height: 360px;

        margin-left: -180px;
        margin-top: -180px;
    }

    .orbit2 {
        width: 500px;
        height: 500px;

        margin-left: -250px;
        margin-top: -250px;
    }

    .orbit3 {
        width: 640px;
        height: 640px;

        margin-left: -320px;
        margin-top: -320px;
    }

    .avatar {
        width: 50px;
        height: 50px;

        border-width: 4px;
    }

    .glow-dot {
        width: 6px;
        height: 6px;
    }

    /* ORBIT 1 */

    .orbit1 .avatar:nth-of-type(3) {
        top: -28px;
    }

    .orbit1 .avatar:nth-of-type(4) {
        right: -28px;
    }

    .orbit1 .avatar:nth-of-type(5) {
        bottom: -28px;
    }

    /* ORBIT 2 */

    .orbit2 .avatar:nth-of-type(4) {
        top: 40px;
        right: 70px;
    }

    .orbit2 .avatar:nth-of-type(5) {
        bottom: 40px;
        left: 70px;
    }

    /* ORBIT 3 */

    .orbit3 .avatar:nth-of-type(3) {
        top: 70px;
        left: 70px;
    }

    .orbit3 .avatar:nth-of-type(4) {
        top: 70px;
        right: 70px;
    }

    .orbit3 .avatar:nth-of-type(5) {
        bottom: 70px;
        right: 70px;
    }

}


@media screen and (max-width: 640px) {
    .scene {
        height: 300px;
    }

    .center,
    .orbit {
        top: 86%;
    }

    /* EARTH */

    .earth {
        width: 150px;
        height: 150px;
    }

    /* ORBITS */

    .orbit1 {
        width: 250px;
        height: 250px;

        margin-left: -125px;
        margin-top: -125px;
    }

    .orbit2 {
        width: 350px;
        height: 350px;

        margin-left: -175px;
        margin-top: -175px;
    }

    .orbit3 {
        width: 460px;
        height: 460px;

        margin-left: -230px;
        margin-top: -230px;
    }

    /* AVATARS */

    .avatar {
        width: 36px;
        height: 36px;

        border-width: 2px;
    }

    /* DOTS */

    .glow-dot {
        width: 4px;
        height: 4px;
    }

    /* =========================
     ORBIT 1 AVATARS
  ========================= */

    .orbit1 .avatar:nth-of-type(3) {
        top: -18px;
    }

    .orbit1 .avatar:nth-of-type(4) {
        right: -18px;
    }

    .orbit1 .avatar:nth-of-type(5) {
        bottom: -18px;
    }

    /* =========================
     ORBIT 2 AVATARS
  ========================= */

    .orbit2 .avatar:nth-of-type(3) {
        left: -18px;
    }

    .orbit2 .avatar:nth-of-type(4) {
        top: 28px;
        right: 52px;
    }

    .orbit2 .avatar:nth-of-type(5) {
        bottom: 28px;
        left: 52px;
    }

    /* =========================
     ORBIT 3 AVATARS
  ========================= */

    .orbit3 .avatar:nth-of-type(3) {
        top: 48px;
        left: 48px;
    }

    .orbit3 .avatar:nth-of-type(4) {
        top: 48px;
        right: 48px;
    }

    .orbit3 .avatar:nth-of-type(5) {
        bottom: 48px;
        right: 48px;
    }

    /* =========================
     DOT POSITIONS
  ========================= */

    .orbit1 .glow-dot:nth-child(1) {
        top: 24px;
        left: 45px;
    }

    .orbit1 .glow-dot:nth-child(2) {
        bottom: 30px;
        right: 40px;
    }

    .orbit2 .glow-dot:nth-child(1) {
        top: 45px;
        left: 48px;
    }

    .orbit2 .glow-dot:nth-child(2) {
        bottom: 52px;
        right: 45px;
    }

    .orbit3 .glow-dot:nth-child(1) {
        top: 50%;
        left: -2px;
        transform: translateY(-50%);
    }

    .orbit3 .glow-dot:nth-child(2) {
        top: -2px;
        left: 50%;
        transform: translateX(-50%);
    }

}


@media screen and (max-width: 480px) {
    .scene {
        height: 240px;
    }

    .center,
    .orbit {
        top: 84%;
    }

    /* EARTH */

    .earth {
        width: 120px;
        height: 120px;
    }

    /* ORBITS */

    .orbit1 {
        width: 200px;
        height: 200px;

        margin-left: -100px;
        margin-top: -100px;
    }

    .orbit2 {
        width: 280px;
        height: 280px;

        margin-left: -140px;
        margin-top: -140px;
    }

    .orbit3 {
        width: 360px;
        height: 360px;

        margin-left: -180px;
        margin-top: -180px;
    }

    /* AVATARS */

    .avatar {
        width: 30px;
        height: 30px;

        border-width: 2px;
    }

    /* DOTS */

    .glow-dot {
        width: 4px;
        height: 4px;
    }

    /* =========================
     ORBIT 1 AVATARS
  ========================= */

    .orbit1 .avatar:nth-of-type(3) {
        top: -15px;
    }

    .orbit1 .avatar:nth-of-type(4) {
        right: -15px;
    }

    .orbit1 .avatar:nth-of-type(5) {
        bottom: -15px;
    }

    /* =========================
     ORBIT 2 AVATARS
  ========================= */

    .orbit2 .avatar:nth-of-type(3) {
        left: -15px;
    }

    .orbit2 .avatar:nth-of-type(4) {
        top: 20px;
        right: 38px;
    }

    .orbit2 .avatar:nth-of-type(5) {
        bottom: 20px;
        left: 38px;
    }

    /* =========================
     ORBIT 3 AVATARS
  ========================= */

    .orbit3 .avatar:nth-of-type(3) {
        top: 38px;
        left: 38px;
    }

    .orbit3 .avatar:nth-of-type(4) {
        top: 38px;
        right: 38px;
    }

    .orbit3 .avatar:nth-of-type(5) {
        bottom: 38px;
        right: 38px;
    }

    /* =========================
     DOT POSITIONS
  ========================= */

    .orbit1 .glow-dot:nth-child(1) {
        top: 18px;
        left: 35px;
    }

    .orbit1 .glow-dot:nth-child(2) {
        bottom: 24px;
        right: 32px;
    }

    .orbit2 .glow-dot:nth-child(1) {
        top: 35px;
        left: 38px;
    }

    .orbit2 .glow-dot:nth-child(2) {
        bottom: 40px;
        right: 36px;
    }

    .orbit3 .glow-dot:nth-child(1) {
        top: 50%;
        left: -2px;
        transform: translateY(-50%);
    }

    .orbit3 .glow-dot:nth-child(2) {
        top: -2px;
        left: 50%;
        transform: translateX(-50%);
    }
}