html {
    scroll-snap-type: y proximity;
    overflow-x: hidden;
}

section.global-mobile {
    height: 100dvh;
    padding-bottom: 0px;
    background-color: #5D2F7D;
    justify-content: space-between;
    flex-direction: column;
}

section.global-mobile .global-footer {
    min-height: 30%;
    transform: translateY(100px);
    background-image: url(/assets/img/home/globe.webp);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
}

section.global-mobile .global-footer::before {
    content: '';
    position: absolute;
    transform: translateY(-45px);
    width: 200vw;
    aspect-ratio: 1;
    border: 1px solid #ffad5f;
    border-radius: 10000px;
}

section.global-mobile .global-footer div {
    transition: all 0.4s;
    transition-timing-function: ease-out;
    width: 30px;
    height: 30px;
    position: absolute;
    opacity: 1;
}

#mobilePlanet0.drop {
    opacity: 0;
    transform: translate(40vw, -25vh);
}

#mobilePlanet1.drop {
    opacity: 0;
    transform: translate(20vw, -25vh);
}

#mobilePlanet2.drop {
    opacity: 0;
    transform: translate(40px, -25vh);
}

#mobilePlanet3.drop {
    opacity: 0;
    transform: translate(-10vw, -25vh);
}

#mobilePlanet4.drop {
    opacity: 0;
    transform: translate(-20vw, -25vh);
}

#mobilePlanet5.drop {
    opacity: 0;
    transform: translate(-40vw, -25vh);
}

section.global-mobile .global-footer div::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    background: #ffad5f;
}

section.global-mobile .global-footer div::before {
    content: '';
    border: 1px solid #ffad5f;
    position: absolute;
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    left: -7px;
    top: -7px;
    border-radius: 50%;
}

section.global-mobile .mobilePlanet {
    transition: all 0.6s;
    background-color: #27213c !important;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    margin-top: 30px;
    border-radius: 360px;
    width: 270px;
    height: 270px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 100;
}

#mp0 {
    opacity: 0;
    transform: translate(-45vw, calc(50vh - 250px)) scale(0);
}

#mp1 {
    opacity: 0;
    transform: translate(-30vw, calc(50vh - 250px)) scale(0);
}

#mp2 {
    opacity: 0;
    transform: translate(-25px, calc(50vh - 250px)) scale(0);
}

#mp3 {
    opacity: 0;
    transform: translate(10vw, calc(50vh - 250px)) scale(0);
}

#mp4 {
    opacity: 0;
    transform: translate(30vw, calc(50vh - 250px)) scale(0);
}

#mp5 {
    opacity: 0;
    transform: translate(40vw, calc(50vh - 250px)) scale(0);
}

section.global-mobile .mobilePlanet.active {
    opacity: 1 !important;
    transform: translateY(-135px) scale(1) !important;
}

section.global-mobile .mobilePlanet .title {
    color: #FFAD5F;
    font-family: 'Greycliff CF Bold';
    font-size: 48px;
    font-weight: 400;
    line-height: 52.8px;
    text-align: center;
}

section.global-mobile .mobilePlanet .content {
    font-family: Mulish;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: center;
    color: #fff;
    margin-top: 5px;
}




.opacity-1 {
    transition: all 0.5s;
    opacity: 1 !important;
}

/* Medium Screens: 900px to 1199px */
@media (min-width: 900px) and (max-width: 1199px) {
    .dot--one {
        transform: rotate(328deg);
    }

    .dot--one:hover .container,
    .dot--1--hover--container {
        transform: rotate(32.5deg) !important;
    }

    .dot--two {
        transform: rotate(340.8deg);
    }

    .dot--two:hover .container,
    .dot--2--hover--container {
        transform: rotate(19.5deg) !important;
    }

    .dot--three {
        transform: rotate(353.6deg);
    }

    .dot--three:hover .container,
    .dot--3--hover--container {
        transform: rotate(6.5deg) !important;
    }

    .dot--four {
        transform: rotate(6.4deg);
    }

    .dot--four:hover .container,
    .dot--4--hover--container {
        transform: rotate(-6.4deg) !important;
    }

    .dot--five {
        transform: rotate(19.2deg);
    }

    .dot--five:hover .container,
    .dot--5--hover--container {
        transform: rotate(-19.2deg) !important;
    }

    .dot--six {
        transform: rotate(32deg);
    }

    .dot--six:hover .container,
    .dot--6--hover--container {
        transform: rotate(-32deg) !important;
    }
}

/* Small Screens: 700px to 899px */
@media (min-width: 700px) and (max-width: 899px) {
    .dot--one {
        transform: rotate(336deg);
    }

    .dot--one:hover {
        z-index: 1;
    }

    .dot--one:hover .container {
        transform: rotate(24deg) !important;
    }

    .dot--two {
        transform: rotate(345.6deg);
    }

    .dot--two:hover {
        z-index: 1;
    }

    .dot--two:hover .container {
        transform: rotate(14.4deg) !important;
    }

    .dot--three {
        transform: rotate(355.2deg);
    }

    .dot--three:hover {
        z-index: 1;
    }

    .dot--three:hover .container {
        transform: rotate(4.5deg) !important;
    }

    .dot--four {
        transform: rotate(4.8deg);
    }

    .dot--four:hover {
        z-index: 1;
    }

    .dot--four:hover .container {
        transform: rotate(-4.5deg) !important;
    }

    .dot--five {
        transform: rotate(14.4deg);
    }

    .dot--five:hover {
        z-index: 1;
    }

    .dot--five:hover .container {
        transform: rotate(-14.4deg) !important;
    }

    .dot--six {
        transform: rotate(24deg);
    }

    .dot--six:hover {
        z-index: 1;
    }

    .dot--six:hover .container {
        transform: rotate(-24deg) !important;
    }
}

/* Extra Small Screens: Below 700px */
@media (max-width: 699px) {
    .dot--one {
        transform: rotate(350deg);
    }

    .dot--one:hover {
        z-index: 1;
    }

    .dot--one:hover .container {
        transform: rotate(10deg) !important;
    }

    .dot--two {
        transform: rotate(354deg);
    }

    .dot--two:hover {
        z-index: 1;
    }

    .dot--two:hover .container {
        transform: rotate(6deg) !important;
    }

    .dot--three {
        transform: rotate(358deg);
    }

    .dot--three:hover {
        z-index: 1;
    }

    .dot--three:hover .container {
        transform: rotate(2deg) !important;
    }

    .dot--four {
        transform: rotate(2deg);
    }

    .dot--four:hover {
        z-index: 1;
    }

    .dot--four:hover .container {
        transform: rotate(-2deg) !important;
    }

    .dot--five {
        transform: rotate(6deg);
    }

    .dot--five:hover {
        z-index: 1;
    }

    .dot--five:hover .container {
        transform: rotate(-6deg) !important;
    }

    .dot--six {
        transform: rotate(10deg);
    }

    .dot--six:hover {
        z-index: 1;
    }

    .dot--six:hover .container {
        transform: rotate(-10deg) !important;
    }
}