/*Media queries para trabajar en Pantallas FULLHD y superior*/
@media  screen and (min-width: 1921px){
    .withInterface {
        background-image: url('/media/backgrounds/bg-interface-bigger.svg')
    }
    .whitelist {
        position: absolute;
        top: clamp(3.5rem,4.9vw,5.3rem) !important;
        right: 4.5% !important;
        transform: translateX(-6%);
    }
    /* Particles */
.particle-1 {
    position: absolute;
    top: -6%;
    left: -6%;
    transform: translate(6%, 6%);
    width: clamp(23.5625rem,34vw,38.375rem);
    height: clamp(23.5625rem,34vw,38.375rem);
    border-radius: 34.375rem;
    background: rgba(7, 206, 2, 0.11);
    filter: blur(75px);
}
.particle-4 {
    position: absolute;
    top: -6%;
    left: -6%;
    transform: translate(6%, 6%);
    width: clamp(23.5625rem,40vw,44.375rem);
    height: clamp(23.5625rem,40vw,44.375rem);
    border-radius: 34.375rem;
    background: rgba(7, 206, 2, 0.11);
    filter: blur(75px);
    z-index: 10;
    opacity: 0;
}
.particle-2 {
    position: absolute;
    bottom: -6%;
    right: -6%;
    transform: translate(6%, 6%);
    width: clamp(25.6875rem,36vw,43.5rem);
    height: clamp(25.6875rem,36vw,43.5rem);
    border-radius: 39.5rem;
    background: rgba(7, 206, 2, 0.11);
    filter: blur(75px);
}
.particle-5 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 120.99894rem;
    background: rgba(7, 206, 2, 0.07);
    filter: blur(75px);
}
/* Particles */

/* Hero Section */

.hero-render {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-35%);
    width: clamp(27.99681rem,95vw,120rem);
    height: clamp(27.99681rem,95vw,120rem);
    background-image: url('/media/img/backRender.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 60% 60%;
    z-index: 6;
}
.hero-render img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}
.hero-text {
    position: absolute;
    top: 50%;
    left: clamp(5rem,9.5vw,10rem);
    transform: translateY(-40%);
    z-index: 11;
}
.hero-title .text-off {
    color: rgba(0, 0, 0, 0.13);
    text-shadow: -1px -1px 3px #00000021;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(4.25rem,10.5vw,12.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 90%;
}
.hero-title .text-on {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(4.25rem,10.5vw,12.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 90%;
}
.hero-title span.margin-left {
    height: fit-content;
    margin-left: clamp(-1.5rem,5vw,-6rem);
}
.hero-img {
    width: clamp(2.5rem,3vw,5rem);
    height: clamp(0.154rem,0.25vw,0.375rem);
    position: absolute;
    top: clamp(.25rem,.4vw,0.5rem);
    left: clamp(1.25rem,2.3vw,2.5rem);
}
.hero-btns {
    position: absolute;
    bottom: clamp(-4.5rem,-8vw,-9.5rem);
    left: clamp(.3rem,.5vw,.7rem);
    transform: translateX(0%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-btns a img {
    width: clamp(1.5rem,2.8vw,3.03844rem);
    height: clamp(1.5rem,2.8vw,3.03844rem);
    object-fit: contain;
}
.left-btn {
    width: clamp(13.5rem,23vw,25.65625rem);
    height: clamp(2.25rem,4.8vw,5.14019rem);
    background-image: url(/media/icons/hero-btn-1.svg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(.25rem,.35vw,.5rem);
    cursor: pointer;
    margin-right: clamp(-1.5rem,-3.1vw,-3.6rem);
    padding-right: clamp(.5rem,.75vw,1rem);
    color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(.6rem,1.1vw,1.2rem);
    z-index: 12;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-wrap: nowrap;
}
.right-btn {
    width: clamp(8.5rem,18vw,20.53125rem);
    height: clamp(2.25rem,4.6vw,5.14019rem);
    background-image: url(/media/icons/hero-btn-2.svg);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(.25rem,.35vw,.5rem);
    cursor: pointer;
    margin-left: clamp(-1.5rem,-3.1vw,-3.6rem);
    margin-bottom: clamp(.25rem,.3vw,.5rem);
    padding-left: clamp(1.5rem,2vw,3rem);
    color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(.6rem,1.1vw,1.2rem);
    z-index: 12;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-wrap: nowrap;
}
/* Hero Section */
/* Community Section */
.community-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.textbox {
    width: clamp(3.6875rem,10.5vw,11.125rem);
    height: clamp(3.125rem,7.5vw,8rem);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100%,-200%);
}
.whitelist {
    position: fixed;
    top: clamp(2.5rem,4vw,5rem);
    right: 5%;
    transform: translateX(-5%);
    width: clamp(12rem,21vw,22.71481rem);
    height: clamp(2.2rem,5.5vw,5.9375rem);
    background-image: url(/media/icons/whitelist-btn.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(.25rem,.35vw,.5rem);
    color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(.6rem,.9vw,1rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    text-wrap: nowrap;
    z-index: 11;
}
.whitelist img {
    width: clamp(1rem,1.5vw,1.7rem);
    height: clamp(1rem,1.5vw,1.7rem);
    object-fit: contain;
}
.community-text {
    position: absolute;
    top: 26%;
    right: 8%;
    transform: translateX(-8%);
    transform: translateY(-26%);
    width: clamp(23rem,44vw,56rem);
    height: clamp(10rem,25vw,30rem);
    background-image: url(/media/img/text-interface.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: clamp(1.5rem,2vw,3rem);
    display: flex;
    flex-direction: column;
    gap: clamp(.4rem,.6vw,.8rem);
    z-index: 11;
}
.community-text h2 {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(1rem,1.6vw,1.8rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-left: .3rem;
    padding-top: .5rem;
}
.community-text p {
    color: rgba(7, 206, 2, 0.47);
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.8);
    font-family: "SpaceMono-Regular";
    font-size: clamp(.6rem,1.2vw,1.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding-left: .3rem;
}
.community-phrase {
    position: absolute;
    bottom: 17%;
    right: 20%;
    transform: translateX(-20%);
    transform: translateY(-17%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(.4rem,.6vw,.8rem);
    text-wrap: nowrap;
    z-index: 10;
}
.community-phrase .text-on {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.8);
    font-family: "SpaceGames";
    font-size: clamp(1.8rem,2.6vw,3.2rem);
    font-style: normal;
    font-weight: 400;
    line-height: 90%;
}
.community-phrase .text-off {
    color: rgba(0, 0, 0, 0.13);
    text-shadow: 0px 0px 3px #00000021;
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(1.4rem,1.9vw,2.2rem);
    font-style: normal;
    font-weight: 400;
    line-height: 85%;
    padding-left: 30%;
}
/* Community Section */
/* Take Over Section */
.reveal-text {
    width: 60vw;
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.00);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(1.95rem,5vw,6.625rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}
/* Take Over Section */
/* Collection Section */
.collection-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(4rem,7vw,8rem);
}
.collection-text {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-left: clamp(1.5rem,2vw,3rem);
}
.collection-text h2 {
    width: 50%;
    color: #000;
    font-family: "SpaceGames";
    font-size: clamp(1.5rem,2.5vw,3rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.nft-text {
    width: 40%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
.nft-li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(.3rem,.45vw,.6rem);
}
.nft-li h3 {
    color: #000;
    font-family: "SpaceGames";
    font-size: clamp(.65rem,1vw,1.2rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.nft-p {
    color: #000;
    font-family: "SpaceMono-Regular";
    font-size: clamp(.8rem,1vw,1.2rem);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding-top: clamp(.5rem,1vw,1.5rem);
}
.nft-p b {
    color: #000;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceMono-Bold";
    font-size: clamp(.8rem,1vw,1.2rem);
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-decoration-line: underline;
}
.gallery-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(8.25rem,29vw,30.5625rem);
    position: relative;
}
.gallery-item-left {
    width: clamp(4.54256rem,20vw,20.01819rem);
    height: clamp(4.80694rem,20.2vw,20.72881rem);
    position: absolute;
    left: 77%;
    transition: all 1s ease-in-out;
    z-index: 0;
    opacity: 0;
}
.gallery-item-left-1 {
    left: 7%;
    opacity: 0;
    transform: translateX(-50%);
    z-index: 1;
}
.gallery-item-left-2 {
    width: clamp(5.58913rem,22.5vw,23.01744rem);
    height: clamp(5.92481rem,23vw,23.92156rem);
    left: 25%;
    opacity: 1;
    transform: translateX(-50%);
    z-index: 2;
}
.gallery-item-left-3 {
    width: clamp(6.79156rem,25.5vw,26.46344rem);
    height: clamp(7.22156rem,26vw,26.62519rem);
    left: 50%;
    opacity: 1;
    transform: translateX(-50%);
    z-index: 3;
}
.gallery-item-left-4 {
    width: clamp(7.68225rem,28vw,29.016rem);
    height: clamp(8.25rem,29vw,30.5625rem);
    left: 77%;
    opacity: 1;
    transform: translateX(-50%);
    z-index: 5;
}
.gallery-item-right {
    width: clamp(4.54256rem,20vw,20.01819rem);
    height: clamp(4.80694rem,20.2vw,20.72881rem);
    position: absolute;
    right: 77%;
    transition: all 1s ease-in-out;
    z-index: 0;
    opacity: 0;
}
.gallery-item-right-1 {
    right: 7%;
    opacity: 0;
    transform: translateX(50%);
    z-index: 1;
}
.gallery-item-right-2 {
    width: clamp(5.58913rem,22.5vw,23.01744rem);
    height: clamp(5.92481rem,23vw,23.92156rem);
    right: 30%;
    opacity: 1;
    transform: translateX(50%);
    z-index: 2;
}
.gallery-item-right-3 {
    width: clamp(6.79156rem,25.5vw,26.46344rem);
    height: clamp(7.22156rem,26vw,26.62519rem);
    right: 50%;
    opacity: 1;
    transform: translateX(50%);
    z-index: 3;
}
.gallery-item-right-4 {
    width: clamp(7.68225rem,28vw,29.016rem);
    height: clamp(8.25rem,29vw,30.5625rem);
    right: 77%;
    opacity: 1;
    transform: translateX(50%);
    z-index: 4;
}
.pre-green-cube {
    opacity: 0;
    position: absolute;
    left: 48%;
    top: 49%;
    width: 6.375rem;
    height: 6.375rem;
    background-color: #07CE02;
    z-index: -2;
}
.green-cube {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) !important;
    width: 6.375rem;
    height: 6.375rem;
    background-color: #07CE02;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}
/* Group Section */
.particle-3 {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(17.77381rem,54vw,55.79656rem);
    height: clamp(17.77381rem,54vw,55.79656rem);
    border-radius: 50%;
    background: rgba(7, 206, 2, 0.15);
    filter: blur(85px);
    z-index: 1;
}
.blackbox-inside h3 {
    color: rgba(7, 206, 2, 0.00);
    text-align: center;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.00);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(1.5rem,2.2vw,2.4rem);
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
}
.blackbox-inside h2 {
    color: #07CE02;
    text-align: center;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.00);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(2rem,4vw,4.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    margin-top: clamp(.9rem,1.4vw,1.7rem);
    margin-bottom: clamp(1rem,1.5vw,2rem);
}
.group-spots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(.3rem,.6vw,.7rem);
    z-index: 7;
}
.group-name h4 {
    color: #07CE02;
    text-align: center;
    font-family: "SpaceGames";
    font-size: clamp(.7rem,1vw,1.1rem);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.group-container {
    width: clamp(12.73713rem,21vw,26.26538rem);
    height: clamp(12.73713rem,21vw,26.26538rem);
}
/* Group Section */
/* Legendaries Section */
.duo {
    width: clamp(10.24025rem,26vw,27.76856rem);
    height: clamp(9.6275rem,25vw,26.40613rem);
    position: absolute;
    bottom: 0;
    opacity: .35;
}
.legendary-left {
    position: relative;
    width: 55%;
    height: 100%;
    overflow-y: hidden;
    z-index: 5 !important;
}
.legendary-left img:first-child {
    width: clamp(25.52106rem,60vw,76.34431rem);
    height: clamp(25.54169rem,60.5vw,76.39863rem);
    mask-image: linear-gradient(black 65%, transparent);
}
.legendary-left img:last-child {
    width: clamp(25.25238rem,55vw,65.65113rem);
    height: clamp(25.27306rem,55.2vw,65.70638rem);
    position: absolute;
    left: -11%;
    bottom: 10%;
    mask-image: linear-gradient(black 90%, transparent);
}
.legendary-right {
    width: 30%;
    height: 80%;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem,3.7vw,4rem);
    margin-top: clamp(5.5rem,9.5vw,10rem);
}
.ball img:first-child {
    width: clamp(10.3125rem,18.5vw,20.1875rem);
    height: clamp(10.4375rem,18.5vw,20.3125rem);
    margin-right: clamp(7rem,11.6vw,12rem);
}
.crystal-text h4 {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(.7rem,.9vw,1rem);
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
}
.absolute-crystal {
    width: clamp(12.375rem,16.5vw,17.0625rem);
    height: 1.6875rem;
    margin-left: clamp(1rem,1.25vw,1.5rem);
    /* position: absolute;
    right: 0; */
}
.absolute-crystal-2 {
    width: clamp(5.5625rem,9.3vw,9.8125rem);
    height: clamp(4.3125rem,8.1vw,8.3125rem);
    position: absolute;
    right: clamp(1.5rem,2.8vw,3rem);
}
.text-right p {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(.8rem,1.2vw,1.3rem);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
/* Legendaries Section */
/* Roulette Section */
.roullete-img {
    width: clamp(22.125rem,31vw,36.75rem);
    height: clamp(22.125rem,31vw,36.75rem);
}
.spinner {
    width: clamp(6rem,10.3vw,11.89013rem);
    height: clamp(6.1875rem,10.4vw,12.15531rem);
    position: absolute;
    display: flex;
    align-self: center;
    z-index: 6;
    transition: all .2s ease-in;
}
.powerby {
    width: 16.5rem;
}
.unnamed {
    width: clamp(7.5625rem,11.5vw,12.0625rem);
    height: clamp(5.0625rem,8.5vw,9.1875rem);
}
.parts {
    position: absolute;
    width: clamp(9.125rem,14vw,15.4375rem);
    height: clamp(9.125rem,14vw,15.4375rem);
    opacity: .2;
    z-index: 5;
    transition: all .3s ease;
}
.parts-position-1 {
    top: 8.5%;
    right: 8.5%;
}
.parts-position-2 {
    bottom: 8.5%;
    right: 8.5%;
}
.parts-position-3 {
    bottom: 8.5%;
    left: 8.5%;
}
.parts-position-4 {
    top: 8.5%;
    left: 8.5%;
}
.parts:hover {
    opacity: 1;
}
.parts-text-general {
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}
.diamond-1,
.diamond-2,
.diamond-3,
.diamond-4 {
    width: clamp(2rem,4vw,4.25rem);
    height: clamp(2rem,4vw,4.25rem);
    position: absolute;
    transition: all 30s ease-out;
    z-index: 7;
}
.part-text-1,
.part-text-2,
.part-text-3,
.part-text-4 {
    color: #07CE02;
    font-family: "SpaceGames";
    font-size: clamp(1.1875rem,1.3vw,1.5625rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: absolute;
    z-index: 7;
}
/* Roulette Section */
/* Roadmap Section */
.roadmap-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background-image: url('/media/backgrounds/bg-gridsOnly.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.roadmap-section h2 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 20%);
    color: #07CE02;
    text-align: center;
    text-shadow: 0px 0px 50px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(2.3rem,3.2vw,3.5625rem);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.roadmap {
    position: relative;
    width: 100%;
    height: 20rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
    z-index: 11;
}
/* .line-fill {
    width: clamp(11rem,19vw,21.5rem);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
} */
.roadmap-text h3 {
    color: #07CE02;
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceGames";
    font-size: clamp(.8rem,1.2vw,1.3rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: .3rem;
}
.roadmap-text p {
    color: rgba(7, 206, 2, 0.47);
    text-shadow: 0px 0px 20px rgba(7, 206, 2, 0.50);
    font-family: "SpaceMono-Regular";
    font-size: clamp(.85rem,1.1vw,1.2625rem);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.roadmap-1 img {
    margin-bottom: clamp(1rem,1.6vw,1.7rem);
}
.roadmap-2 img {
    margin-top: clamp(1rem,1.6vw,1.7rem);
}
.roadmap-3 img {
    margin-bottom: clamp(1rem,1.6vw,1.7rem);
}
.roadmap-4 img {
    margin-top: clamp(1rem,1.6vw,1.7rem);
}
.roadmap-5 img {
    margin-bottom: clamp(1rem,1.6vw,1.7rem);
}
.roadmap-6 img {
    margin-top: clamp(1rem,1.6vw,1.7rem);
}
.roadmap-1 {
    top: 82%;
    left: 9.2%;
    /* transform: translate(-9%,-78%); */
    transform: translateY(-78%);
    opacity: 1;
    z-index: 13;
}
.roadmap-2 {
    top: 27.5%;
    left: 23.7%;
    /* transform: translate(-25%,-31%); */
    transform: translateY(-31%);
    opacity: 1;
    z-index: 13;
}
.roadmap-3 {
    top: 75%;
    left: 38.1%;
    /* transform: translate(-41%,-72%); */
    transform: translateY(-72%);
    opacity: 1;
    z-index: 13;
}
.roadmap-4 {
    top: 27.5%;
    left: 52.15%;
    /* transform: translate(-57%,-31%); */
    transform: translateY(-31%);
    opacity: 1;
    z-index: 13;
}
.roadmap-5 {
    top: 75.5%;
    left: 65.2%;
    /* transform: translate(-75%,-72.5%); */
    transform: translateY(-72.5%);
    opacity: 1;
    z-index: 13;
}
.roadmap-6 {
    top: 27.5%;
    left: 82.7%;
    /* transform: translate(-89%,-31%); */
    transform: translateY(-31%);
    opacity: 1;
    z-index: 13;
}
/* Roadmap Section */
/* Footer Section */
.topLoop {
    width: 100%;
    height: clamp(11.75rem,21.5vw,25.5rem);
    overflow: hidden;
    margin-top: clamp(2rem,8vw,9rem);
}
.track-1 {
    display: flex;
    animation: scroll 50s linear infinite alternate;
    width: calc(clamp(11.92706rem,21.5vw,25.5rem) * 24);
    opacity: 0.15;
    mix-blend-mode: luminosity;
}
.top-slide {
    width: clamp(11.92706rem,21.5vw,25.5rem);
    height: clamp(11.75rem,21.5vw,25.5rem);
}
.top-slide img {
    width: 100%;
    height: 100%;
}
.botLoop {
    width: 100%;
    height: clamp(13.75rem,23.5vw,27.5rem);
    overflow: hidden;
}
.track-2 {
    display: flex;
    animation: scroll-2 50s linear infinite alternate-reverse;
    width: calc(clamp(13.92706rem,23.5vw,27.5rem) * 24);
    opacity: 0.15;
    mix-blend-mode: luminosity;
}
.bot-slide {
    width: clamp(13.92706rem,23.5vw,27.5rem);
    height: clamp(13.75rem,23.5vw,27.5rem);
}
.bot-slide img {
    width: 100%;
    height: 100%;
}
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(clamp(-13.92706rem,-17vw,-18.5rem) * 12));
    }
}
@keyframes scroll-2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(clamp(-15.92706rem,-15vw,-20.5rem) * 12));
    }
}
.footer {
    display: flex;
    justify-content: space-between;
    width: 95%;
    position: absolute;
    bottom: clamp(1rem,1.5vw,2rem);
    z-index: 21 !important;
}
.internals {
    display: flex;
    gap: clamp(1.5rem,3rem,3.5rem);
}
.internals-a a {
    color: #07CE02;
    font-family: "SpaceGames";
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-decoration-line: underline !important;
    text-wrap: nowrap;
    cursor: pointer;
    transition: color .5s ease;
}
/* Footer Section */

}

/* IPads Interfaces */

/* Landscape*/
/* @media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (orientation: landscape)  {
    .withInterface {
        background-image: url('/media/backgrounds/bg-interface-tablets-landscape.svg')
    }
}
@media only screen and (min-device-width: 1365px) and (max-device-height: 768px) and (orientation: landscape)  {
    .withInterface {
        background-image: url('/media/backgrounds/bg-interface-tablets-landscape.svg')
    }
} */
/* @media only screen and (min-device-width: 720px) and (max-device-width: 1368px) and (min-device-height: 700px) and (orientation: landscape)  {
    .withInterface {
        background-image: url('/media/backgrounds/bg-interface-tablets-landscape.svg')
    }
} */
@media only screen and (min-device-width: 720px) and (max-device-width: 740px) and (min-device-height: 540px) and (max-device-height: 600px) and (orientation: landscape)  {
    .withInterface {
        background-image: url('/media/backgrounds/bg-interface-tablets-landscape.svg')
    }
}

/* Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-height: 1370px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {
    .withInterface {
        background-image: url('/media/backgrounds/bg-interface-tablets.svg')
    }
    /* Hero Section */
    .hero-text {
        top: 15%;
        left: 50%;
        transform: translateY(-15%);
        transform: translateX(-50%);
    }
    .hero-title .text-on {
        font-size: clamp(6.5rem,10vw,13rem);
    }
    .hero-title .text-off {
        font-size: clamp(6.5rem,10vw,13rem);
    }
    .hero-btns {
        bottom: clamp(-3rem,-5vw,-6.5rem);
        transform: translateX(3%) !important;
    }
    .left-btn {
        width: clamp(16.5rem,18vw,20.65625rem);
        height: clamp(3.25rem,3.8vw,4.14019rem);
        /* margin-right: clamp(-1.5rem,-3.1vw,-3.6rem);
        padding-right: clamp(0.5rem,0.75vw,1rem); */
    }
    .right-btn {
        width: clamp(12.5rem,13vw,15.53125rem);
        height: clamp(2.9rem,3.6vw,4.14019rem);
        margin-left: clamp(-1rem,-3.1vw,-3.6rem) !important;
    }
    .hero-btns p {
        font-size: clamp(.75rem,.9vw,1rem);
    }
    .hero-render {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-size: contain;
    }
    /* Hero Section */
    /* Community Section */
    .whitelist {
        position: absolute;
        top: 7% !important;
        right: 7% !important;
        transform: translateX(-8%) !important;
        width: 16.71481rem !important;
        height: 2.9375rem !important;
        font-size: clamp(.7rem,.8vw,.8rem) !important;
    }
    .community-text {
        width: 46rem !important;
        height: 22rem !important;
        position: absolute;
        top: 30% !important;
        right: 20% !important;
        transform: translateY(-20%) !important;
    }
    .community-phrase {
        position: absolute;
        bottom: 10% !important;
        right: 40% !important;
        transform: translateX(-30%) !important;
        transform: translateY(-10%) !important;
    }
    .whitelist img {
        width: 1.375rem !important;
        height: 1.375rem !important;
        object-fit: contain;
    }
    .community-text h2 {
        font-size: 1.375rem;
        margin-top: 1rem;
    }
    .community-text p {
        font-size: 1.05rem;
    }
    /* Community Section */
    /* Collection Section */
    .collection-section {
        gap: clamp(12rem,15vw,16rem) !important;
    }
    .collection-text {
        width: 90% !important;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(4rem,7.5vw,8rem);
    }
    .collection-text h2 {
        width: 80%;
        font-size: clamp(2.25rem,4vw,4.5rem);
    }
    .nft-text {
        width: 70% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(0.4rem,0.45vw,0.5rem);
        align-items: center;
    }
    .nft-li img {
        width: 1.5rem;
        height: 1.5rem;
    }
    .nft-li h3 {
        font-size: clamp(1.2rem,1.35vw,1.4rem) !important;
    }
    .nft-p b {
        font-size: clamp(1.2rem,1.35vw,1.4rem) !important;
    }
    .nft-p {
        width: 100% !important;
        font-size: clamp(1.2rem,1.35vw,1.4rem) !important;
    }
    /* Collection Section */
    /* Group Section */
    .group-spots {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1rem,1.5vw,2rem) !important;
    }
    .blackbox-inside h3 {
        font-size: clamp(2rem,2.4vw,2.6rem);
    }
    .blackbox-inside h2 {
        font-size: clamp(3.5rem,3.8vw,4rem);
        margin-top: clamp(1.3rem,1.78vw,2rem);
        margin-bottom: clamp(1.5rem,1.75vw,2.5rem);
    }
    .group-container {
        width: clamp(17.73713rem,20vw,21.26538rem);
        height: clamp(17.73713rem,20vw,21.26538rem);
    }
    /* Group Section */
    /* Legendary Section */
    .legendaries-section {
        flex-direction: column-reverse;
    }
    .legendary-right {
        width: 85%;
        justify-content: center;
        align-items: center;
    }
    .legendary-left {
        width: 85%;
    }
    .ball img:first-child {
        width: clamp(10.3125rem, 19.5vw, 20.1875rem);
        height: clamp(10.4375rem, 19.5vw, 20.3125rem);
        margin-right: clamp(7rem, 11.6vw, 12rem);
    }
    .text-right p {
        font-size: clamp(1rem, 1.8vw, 2rem);
    }
    .legendary-left img:first-child {
        position: absolute;
        bottom: 0;
        width: clamp(25.52106rem, 65vw, 66.34431rem);
        height: clamp(25.54169rem, 65.5vw, 66.39863rem);
    }
    .legendary-left img:last-child {
        width: clamp(25.52106rem, 65vw, 66.34431rem);
        height: clamp(25.54169rem, 65.5vw, 66.39863rem);
    }
    /* Legendary Section */
    /* Roulette Section */
    .roulette-section {
        gap: clamp(2rem,2vw,3rem);
    }
    .part-text-1 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-2 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-3 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-4 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .roullete-img {
        width: clamp(30.125rem, 30vw, 32.75rem) !important;
        height: clamp(30.125rem, 30vw, 32.75rem) !important;
    }
    .parts {
        position: absolute;
        width: clamp(12.125rem, 14vw, 14.4375rem) !important;
        height: clamp(12.125rem, 14vw, 14.4375rem) !important;
    }
    .spinner {
        width: clamp(9rem, 12vw, 12.89013rem) !important;
        height: clamp(9rem, 12vw, 12.15531rem) !important;
    }
    .part-text-1, .part-text-2, .part-text-3, .part-text-4 {
        font-size: clamp(1.5rem,1.8vw,2rem) !important;
    }
    .powerby {
        width: 20rem !important;
        margin-top: 13rem;
    }
    .unnamed {
        width: 17rem !important;
        height: 12rem !important;
    }
    /* Roulette Section */
    /* Roadmap Section */
    .roadmap-section h2 {
        top: 25%;
        left: 50%;
        transform: translate(-50%, 25%);
        font-size: clamp(3rem,3.2vw,3.5625rem);
    }
    /* Roadmap Section */
    /* Thanks Section */
    .thanks-section {
        gap: clamp(1.5rem, 3vw, 3rem) !important;
    }
    .thanks-section h2 {
        width: 80%;
    }
    .thanks-section h2 br {
        display: none;
    }
    .thanks-imgs {
        height: clamp(25rem, 29vw, 29.875rem) !important;
    }
    .thanks-imgs .snake-1 {
        width: clamp(18.8125rem, 20vw, 21.875rem) !important;
        height: clamp(18.625rem, 20vw, 21.875rem) !important;
        top: 25%;
        left: 15%;
    }
    .thanks-imgs .snake-2 {
        width: clamp(26.3125rem, 20vw, 29.875rem) !important;
        height: clamp(26.25rem, 20vw, 29.875rem) !important;
        top: 10%;
        left: 40%;
    }
    /* Thanks Section */
    /* Footer Section */
    .topLoop {
        margin-top: clamp(19rem,24vw,25rem) !important;
    }
    /* Footer Section */
    .textbox {
        width: clamp(3.6875rem,6.5vw,7.125rem);
        height: clamp(3.125rem,5.5vw,6rem);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,600%);
    }
}
@media only screen and (min-device-width: 768px) and (max-device-height: 1370px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {
    .withInterface {
        background-image: url('/media/backgrounds/bg-interface-tablets.svg')
    }
}
@media only screen and (min-device-width: 480px) and (max-device-height: 720px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {
    .withInterface {
        background-image: url('/media/backgrounds/bg-interface-tablets.svg')
    }
}
/* IPads Interfaces */

/* Mobile Interfaces */

/* Landscape*/
@media only screen and (max-device-width: 950px) and (min-device-height: 280px) and (max-device-height: 479px) and (orientation: landscape) {
    .withInterface {
        background-image: url('/media/backgrounds/bg-interface-mobile-landscape.svg')
    }
}
/* Portrait*/
@media only screen and (min-device-width: 280px) and (max-device-width: 450px) and (max-device-height: 950px) and (orientation: portrait) {
    .withInterface {
        background-image: url('/media/backgrounds/bg-interface-mobile.svg')
    }
}
/* Mobile Interfaces */

/*Media queries para trabajar en Pantallas FULLHD y superior*/
@media  screen and (min-width: 1880px){}

/*Media queries para trabajar en pantallas pre-FULLHD*/
@media  screen and (min-width: 1580px) and (max-width: 1879px){
    /* Hero Section */
    .hero-btns {
        bottom: clamp(-3.5rem,-5vw,-6.5rem);
        left: clamp(.3rem,.5vw,.7rem);
    }
    .line-hero {
        width: 2.525rem;
        height: 5.1875rem;
        margin-top: clamp(-1.1rem,-1.7vw,-2.4rem);
    }
    /* Hero Section */
    /* Community Section */
    .whitelist {
        position: absolute;
        top: clamp(2.5rem,4vw,5rem);
        right: 7%;
        transform: translateX(-7%);
    }
    .community-text {
        position: absolute;
        top: 26%;
        right: 11%;
        transform: translateX(-11%);
        transform: translateY(-26%);
    }
    .community-phrase {
        position: absolute;
        bottom: 17%;
        right: 23%;
        transform: translateX(-23%);
        transform: translateY(-17%);
    }
    /* Community Section */
    /* Collection Section */
    .collection-text {
        width: 90%;
    }
    /* Collection Section */
    /* Roadmap Section */
    .roadmap-1 {
        top: 76%;
        left: 8.7%;
        /* transform: translate(-9%,-78%); */
        transform: translateY(-78%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-2 {
        top: 32%;
        left: 23%;
        /* transform: translate(-25%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-3 {
        top: 70%;
        left: 37.5%;
        /* transform: translate(-41%,-72%); */
        transform: translateY(-72%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-4 {
        top: 32%;
        left: 51.5%;
        /* transform: translate(-57%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-5 {
        top: 70.2%;
        left: 64.5%;
        /* transform: translate(-75%,-72.5%); */
        transform: translateY(-72.5%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-6 {
        top: 32%;
        left: 82.4%;
        /* transform: translate(-89%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    /* Roadmap Section */
}

/*Media queries para trabajar en Pantallas de su mayoria laptops*/
@media  screen and (min-width: 1400px) and (max-width: 1579px){
    /* Hero Section */
    .hero-btns {
        bottom: clamp(-3.5rem,-5vw,-6.5rem);
        left: clamp(.3rem,.5vw,.7rem);
    }
    .line-hero {
        width: 2.425rem;
        height: 4.8rem;
        margin-top: clamp(-1.1rem,-1.7vw,-2.4rem);
    }
    /* Hero Section */
    /* Community Section */
    .whitelist {
        position: absolute;
        top: clamp(2.5rem,4.5vw,5rem) !important;
        right: 4%;
        transform: translateX(-6%);
    }
    .community-text {
        position: absolute;
        top: 28%;
        right: 10%;
        transform: translateX(-10%);
        transform: translateY(-28%);
    }
    .community-phrase {
        position: absolute;
        bottom: 17%;
        right: 24%;
        transform: translateX(-24%);
        transform: translateY(-17%);
    }
    /* Community Section */
    /* Collection Section */
    .collection-text {
        width: 95%;
    }
    /* Collection Section */
    /* Roadmap Section */
    .roadmap-1 {
        top: 74%;
        left: 8.65%;
        /* transform: translate(-9%,-78%); */
        transform: translateY(-78%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-2 {
        top: 33.5%;
        left: 23%;
        /* transform: translate(-25%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-3 {
        top: 68.8%;
        left: 37.6%;
        /* transform: translate(-41%,-72%); */
        transform: translateY(-72%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-4 {
        top: 33.5%;
        left: 51.5%;
        /* transform: translate(-57%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-5 {
        top: 69%;
        left: 64.5%;
        /* transform: translate(-75%,-72.5%); */
        transform: translateY(-72.5%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-6 {
        top: 33.5%;
        left: 82.4%;
        /* transform: translate(-89%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    /* Roadmap Section */
}

/*Media queries para trabajar Pantallas de escritorio tablet con la resolucion promedio de HD*/
@media  screen and (min-width: 1250px) and (max-width: 1399px) and (max-device-height: 699px){
    /* Interface */
    .withInterface {
        background-image: url('/media/backgrounds/bg-interface-laptop.svg')
    }
    /* Interface */
    /* Hero Section */
    .hero-btns {
        bottom: clamp(-3.5rem,-5vw,-6.5rem);
        transform: translateX(-1.8%);
    }
    .line-hero {
        width: 2.325rem;
        height: 4.7rem;
        margin-top: clamp(-1.1rem,-1.7vw,-2.4rem);
    }
    .left-btn {
        margin-right: clamp(-1.1rem,-3.1vw,-3.6rem);
        padding-right: clamp(.5rem,.75vw,1rem);
    }
    .right-btn {
        margin-left: clamp(-1.1rem,-3.1vw,-3.6rem);
        margin-bottom: clamp(.25rem,.3vw,.5rem);
        padding-left: clamp(1.5rem,2vw,3rem);
    }
    /* Hero Section */
    /* Community Section */
    .whitelist {
        position: absolute;
        top: clamp(3.5rem,6vw,7rem) !important;
        right: 6% !important;
        transform: translateX(-6%);
    }
    .community-text {
        position: absolute;
        top: 28%;
        right: 10%;
        transform: translateX(-10%);
        transform: translateY(-28%);
    }
    .community-phrase {
        position: absolute;
        bottom: 20%;
        right: 20%;
        transform: translateX(-20%);
        transform: translateY(-20%);
    }
    /* Community Section */
    /* Roulette Section */
    .part-text-1 {
        top: 11%;
        right: -45%;
        text-align: start;
    }
    .part-text-2 {
        bottom: 13%;
        right: -66%;
        text-align: start;
    }
    .part-text-3 {
        bottom: 16%;
        left: -65%;
        text-align: end;
    }
    .part-text-4 {
        top: 11%;
        left: -83%;
        text-align: end;
    }
    /* Roulette Section */
    /* Roadmap Section */
    .roadmap-1 {
        top: 70%;
        left: 9%;
        transform: translate(-9%,-70%);
        opacity: 1;
    }
    .roadmap-2 {
        top: 36%;
        left: 25%;
        transform: translate(-25%,-36%);
        opacity: 1;
    }
    .roadmap-3 {
        top: 66%;
        left: 41%;
        transform: translate(-41%,-66%);
        opacity: 1;
    }
    .roadmap-4 {
        top: 36%;
        left: 57%;
        transform: translate(-57%,-36%);
        opacity: 1;
    }
    .roadmap-5 {
        top: 66%;
        left: 75%;
        transform: translate(-75%,-66%);
        opacity: 1;
    }
    .roadmap-6 {
        top: 36%;
        left: 89%;
        transform: translate(-89%,-36%);
        opacity: 1;
    }
    /* Roadmap Section */
}

@media  screen and (min-width: 1350px) and (max-width: 1399px) {
    .hero-text {
        position: absolute;
        top: 50%;
        left: clamp(7rem, 11vw, 12rem);
        transform: translateY(-40%);
        z-index: 11;
    }
    .whitelist {
        position: absolute;
        top: clamp(3rem,3vw,5rem);
        right: 9%;
        transform: translateX(-6%);
    }
    .community-text {
        position: absolute;
        top: 24%;
        right: 14%;
        transform: translateX(-8%);
        transform: translateY(-26%);
    }
    .legendaries-section {
        gap: 0;
    }
    /* Roulette Section */
    .part-text-1 {
        top: 11%;
        right: -48%;
        text-align: start;
    }
    .part-text-2 {
        bottom: 13%;
        right: -66%;
        text-align: start;
    }
    .part-text-3 {
        bottom: 16%;
        left: -65%;
        text-align: end;
    }
    .part-text-4 {
        top: 11%;
        left: -83%;
        text-align: end;
    }
    /* Roulette Section */
    /* Roadmap Section */
    .roadmap-1 {
        top: 73.5%;
        left: 8.65%;
        /* transform: translate(-9%,-78%); */
        transform: translateY(-78%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-2 {
        top: 34%;
        left: 23%;
        /* transform: translate(-25%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-3 {
        top: 68%;
        left: 37%;
        /* transform: translate(-41%,-72%); */
        transform: translateY(-72%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-4 {
        top: 34%;
        left: 51.5%;
        /* transform: translate(-57%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-5 {
        top: 68%;
        left: 64%;
        /* transform: translate(-75%,-72.5%); */
        transform: translateY(-72.5%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-6 {
        top: 34%;
        left: 82.4%;
        /* transform: translate(-89%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    /* Roadmap Section */
}

/*Media queries para trabajar en pantallas con viejas resoluciones*/
@media only screen and (min-width: 1000px) and (max-width: 1249px){
    /* Hero Section */
    .hero-btns {
        bottom: clamp(-3rem,-5vw,-6.5rem);
        transform: translateX(-8.5%);
    }
    .line-hero {
        width: 1.925rem;
        height: 4.3rem;
        margin-top: clamp(-.5rem,-1.5vw,-2.4rem);
    }
    .left-btn {
        margin-right: clamp(-1rem,-3.1vw,-3.6rem);
        padding-right: clamp(.5rem,.75vw,1rem);
    }
    .right-btn {
        margin-left: clamp(-1.2rem,-3.1vw,-3.6rem);
        margin-bottom: clamp(.25rem,.3vw,.5rem);
        padding-left: clamp(1.5rem,2vw,3rem);
    }
    /* Hero Section */
    /* Community Section */
    .whitelist {
        position: absolute;
        top: 15%;
        right: 6%;
        transform: translateX(-6%);
    }
    .community-text {
        height: 13rem;
        position: absolute;
        top: 40%;
        right: 10%;
        transform: translateX(-10%);
        transform: translateY(-35%);
    }
    .community-phrase {
        position: absolute;
        bottom: 15%;
        right: 20%;
        transform: translateX(-20%);
        transform: translateY(-15%);
    }
    /* Community Section */
    /* Collection Section */
    .nft-p br {
        display: none;
    }
    .nft-li h3 {
        color: #000;
        font-family: "SpaceGames";
        font-size: clamp(.45rem,.55vw,.65rem);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    .nft-text {
        width: 45%;
        display: flex;
        justify-content: center;
        gap: clamp(.4rem,.45vw,.5rem);
        align-items: flex-start;
    }
    .nft-p {
        color: #000;
        font-family: "SpaceMono-Regular";
        font-size: clamp(.7rem,.75vw,.8rem);
    }
    .collection-text {
        width: 95%;
        margin-left: 0;
    }
    /* Collection Section */
    /* Roulette Section */
    .part-text-1 {
        top: 11%;
        right: -48%;
        text-align: start;
    }
    .part-text-2 {
        bottom: 13%;
        right: -66%;
        text-align: start;
    }
    .part-text-3 {
        bottom: 16%;
        left: -65%;
        text-align: end;
    }
    .part-text-4 {
        top: 11%;
        left: -83%;
        text-align: end;
    }
    .roullete-img {
        width: clamp(18.125rem, 26vw, 32.75rem);
        height: clamp(18.125rem, 26vw, 32.75rem);
    }
    .parts {
        position: absolute;
        width: clamp(6.125rem, 12vw, 14.4375rem);
        height: clamp(6.125rem, 12vw, 14.4375rem);
    }
    .spinner {
        width: clamp(4rem, 8.3vw, 9.89013rem);
        height: clamp(4.1875rem, 8.4vw, 10.15531rem);
    }
    .part-text-1, .part-text-2, .part-text-3, .part-text-4 {
        color: #07CE02;
        font-family: "SpaceGames";
        font-size: clamp(.95rem, 1.3vw, 1.5625rem);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        position: absolute;
        z-index: 7;
    }
    .powerby {
        width: 13rem;
    }
    /* Roulette Section */
    /* Roadmap Section */
    .roadmap-1 {
        top: 72.5%;
        left: 7%;
        /* transform: translate(-9%,-78%); */
        transform: translateY(-78%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-2 {
        top: 34.7%;
        left: 21%;
        /* transform: translate(-25%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-3 {
        top: 67.5%;
        left: 35.7%;
        /* transform: translate(-41%,-72%); */
        transform: translateY(-72%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-4 {
        top: 34.7%;
        left: 49.2%;
        /* transform: translate(-57%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-5 {
        top: 67.5%;
        left: 62%;
        /* transform: translate(-75%,-72.5%); */
        transform: translateY(-72.5%);
        opacity: 1;
        z-index: 13;
    }
    .roadmap-6 {
        top: 34.7%;
        left: 81%;
        /* transform: translate(-89%,-31%); */
        transform: translateY(-31%);
        opacity: 1;
        z-index: 13;
    }
    /* Roadmap Section */
}

/*Media queries para trabajar en tablets com Ipads*/
@media only screen and (min-width: 768px) and (max-width: 999px){
    /* Hero Section */
    .hero-text {
        top: 15%;
        left: 50%;
        transform: translateY(-15%);
        transform: translateX(-50%);
    }
    .hero-title .text-on {
        font-size: clamp(5rem,8vw,10rem);
    }
    .hero-title .text-off {
        font-size: clamp(5rem,8vw,10rem);
    }
    .hero-btns {
        bottom: -30%;
        left: 50%;
        transform: translateX(-50%) !important;
    }
    .left-btn {
        width: clamp(16.5rem,18vw,20.65625rem);
        height: clamp(3.25rem,3.8vw,4.14019rem);
        margin-right: 0;
    }
    .right-btn {
        width: clamp(12.5rem,13vw,15.53125rem);
        height: clamp(2.9rem,3.6vw,4.14019rem);
        margin-left: 0;
    }
    .hero-btns p {
        font-size: clamp(.75rem,.9vw,1rem);
    }
    .line-hero {
        display: none;
    }
    .hero-render {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-size: contain;
    }
    /* Hero Section */
    /* Community Section */
    .whitelist {
        position: absolute;
        top: 9% !important;
        right: 6% !important;
        transform: translateX(-6%) !important;
        width: 14.71481rem !important;
        height: 2.5375rem !important;
        font-size: clamp(.7rem,.8vw,.8rem) !important;
    }
    .community-text {
        width: 39rem !important;
        height: 18rem !important;
        position: absolute;
        top: 30% !important;
        right: 7% !important;
        transform: translateY(-23%) !important;
    }
    .community-phrase {
        position: absolute;
        bottom: 10% !important;
        right: 25% !important;
        transform: translateX(-25%) !important;
        transform: translateY(-10%) !important;
    }
    .whitelist img {
        width: 1.375rem !important;
        height: 1.375rem !important;
        object-fit: contain;
    }
    .community-text h2 {
        font-size: 1.2rem;
        margin-top: 1rem;
    }
    .community-text p {
        font-size: .9rem;
    }
    /* Community Section */
    /* Collection Section */
    .collection-section {
        gap: clamp(9rem,11.5vw,12rem) !important;
    }
    .collection-text {
        width: 90% !important;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(4rem,7.5vw,8rem);
    }
    .collection-text h2 {
        width: 80%;
        font-size: clamp(2.25rem,4vw,4.5rem);
    }
    .nft-text {
        width: 70% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(0.4rem,0.45vw,0.5rem);
        align-items: flex-start;
    }
    .nft-li img {
        width: 1.5rem;
        height: 1.5rem;
    }
    .nft-li h3 {
        font-size: clamp(1.2rem,1.35vw,1.4rem) !important;
    }
    .nft-p b {
        font-size: clamp(1.2rem,1.35vw,1.4rem) !important;
    }
    .nft-p {
        width: 100% !important;
        font-size: clamp(1.2rem,1.35vw,1.4rem) !important;
    }
    /* Collection Section */
    /* Group Section */
    .group-spots {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1rem,1.5vw,2rem) !important;
    }
    .group-container {
        width: clamp(14.73713rem,18vw,21.26538rem);
        height: clamp(14.73713rem,18vw,21.26538rem);
    }
    /* Group Section */
    /* Legendary Section */
    .legendaries-section {
        flex-direction: column-reverse;
        gap: 0;
    }
    .legendary-right {
        width: 85%;
        justify-content: center;
        align-items: center;
        margin-top: clamp(7.5rem, 14vw, 15rem);
    }
    .legendary-left {
        width: 85%;
    }
    .ball img:first-child {
        width: clamp(10.3125rem, 19.5vw, 20.1875rem);
        height: clamp(10.4375rem, 19.5vw, 20.3125rem);
        margin-right: clamp(7rem, 11.6vw, 12rem);
    }
    /* .text-right p {
        font-size: clamp(1rem, 1.8vw, 2rem);
    } */
    .legendary-left img:first-child {
        position: absolute;
        bottom: 0;
        width: clamp(25.52106rem, 65vw, 66.34431rem);
        height: clamp(25.54169rem, 65.5vw, 66.39863rem);
    }
    .legendary-left img:last-child {
        width: clamp(25.52106rem, 65vw, 66.34431rem);
        height: clamp(25.54169rem, 65.5vw, 66.39863rem);
    }
    /* Legendary Section */
    /* Roulette Section */
    .roulette-section {
        gap: clamp(1rem,1.3vw,1.5rem);
    }
    .part-text-1 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-2 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-3 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-4 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .parts {
        position: absolute;
        width: clamp(9.125rem, 14vw, 14.4375rem) !important;
        height: clamp(9.125rem, 14vw, 14.4375rem) !important;
    }
    .part-text-1, .part-text-2, .part-text-3, .part-text-4 {
        font-size: clamp(1.2rem,1.5vw,1.8rem) !important;
    }
    .powerby {
        margin-top: 10rem;
    }
    /* Roulette Section */
    /* Roadmap Section */
    .roadmap {
        position: relative;
        width: 90.5625rem;
        height: 20rem;
    }
    .line-path {
        width: 90.5625rem;
    }
    .roadmap-1 {
        top: 9.35rem;
        left: 5rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-2 {
        top: 5.2rem;
        left: 18rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-3 {
        top: 9.25rem;
        left: 31rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-4 {
        width: 18%;
        top: 4rem;
        left: 45rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-5 {
        width: 22%;
        top: 9.3rem;
        left: 58rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-6 {
        width: 22%;
        top: 5.2rem;
        left: 72rem;
        transform: none;
        opacity: 1;
    }
    /* Roadmap Section */
    /* Thanks Section */
    .thanks-section {
        gap: clamp(1.5rem, 3vw, 3rem) !important;
    }
    .thanks-section h2 {
        width: 80%;
    }
    .thanks-section h2 br {
        display: none;
    }
    .thanks-imgs {
        height: clamp(25rem, 29vw, 29.875rem) !important;
    }
    .thanks-imgs .snake-1 {
        width: clamp(15.8125rem, 20vw, 21.875rem) !important;
        height: clamp(15.625rem, 20vw, 21.875rem) !important;
        top: 25%;
        left: 5%;
    }
    .thanks-imgs .snake-2 {
        width: clamp(23.3125rem, 20vw, 29.875rem) !important;
        height: clamp(23.25rem, 20vw, 29.875rem) !important;
        top: 10%;
        left: 35%;
    }
    /* Thanks Section */
    /* Footer Section */
    .topLoop {
        margin-top: clamp(13rem,16vw,20rem);
    }
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 90%;
        position: absolute;
        bottom: clamp(2rem, 2.5vw, 3rem) !important;
    }
    .internals {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: clamp(1rem, 1rem, 3rem);
    }
    /* Footer Section */
    .textbox {
        width: clamp(3.6875rem,6.5vw,7.125rem);
        height: clamp(3.125rem,5.5vw,6rem);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,500%);
    }
}

/*Media queries para trabajar Tablets como las Surfaces*/
@media  screen and (min-width: 480px) and (max-width: 767px){
    /* Hero Section */
    .hero-text {
        top: 15%;
        left: 50%;
        transform: translateY(-15%);
        transform: translateX(-50%);
    }
    .hero-title .text-on {
        font-size: clamp(3.5rem,5vw,7rem);
    }
    .hero-title .text-off {
        font-size: clamp(3.5rem,5vw,7rem);
    }
    .hero-btns {
        bottom: -30%;
        left: 55%;
        transform: translateX(-50%) !important;
    }
    .left-btn {
        width: clamp(15rem,18vw,20.65625rem);
        height: clamp(2.5rem,3.8vw,4.14019rem);
        margin-right: 0;
    }
    .right-btn {
        width: clamp(13rem,13vw,15.53125rem);
        height: clamp(2.5rem,3.6vw,4.14019rem);
        margin-left: 0;
    }
    .hero-btns p {
        font-size: clamp(.65rem,.85vw,1rem);
    }
    .line-hero {
        display: none;
    }
    .hero-render {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-size: contain;
        width: clamp(21.99681rem,70vw,90rem);
        height: clamp(21.99681rem,70vw,90rem);
    }
    /* Hero Section */
    /* Community Section */
    .whitelist {
        position: absolute;
        top: 8.5% !important;
        left: 50% !important;
        right: initial;
        transform: translateX(-50%) !important;
        width: 13.71481rem !important;
        height: 2.2375rem !important;
        font-size: clamp(.6rem,.6.5vw,.7rem) !important;
    }
    .community-text {
        height: 13.5rem;
        position: absolute;
        top: 32% !important;
        right: 13% !important;
        transform: translateY(-25%) !important;
    }
    .community-phrase {
        position: absolute;
        bottom: 0% !important;
        right: 35% !important;
        transform: translateX(-50%) !important;
        transform: translateY(-10%) !important;
    }
    .community-phrase .text-on {
        font-size: clamp(1.6rem,2.2vw,2.5rem);
    }
    .community-phrase .text-off {
        font-size: clamp(1.6rem,2.2vw,2.5rem);
        padding-left: 0;
    }
    .textbox {
        width: clamp(3.6875rem,6.5vw,7.125rem);
        height: clamp(3.125rem,5.5vw,6rem);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-20%,350%);
    }
    /* Community Section */
    /* Collection Section */
    .collection-text {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(4rem,7.5vw,8rem);
        margin-left: 0;
    }
    .collection-text h2 {
        width: 80%;
        font-size: clamp(2.25rem,4vw,4.5rem);
    }
    .nft-gallery {
        width: 90%;
    }
    .nft-text {
        width: 70% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(0.4rem,0.45vw,0.5rem);
        align-items: flex-start;
    }
    /* Collection Section */
    /* Group Section */
    .group-spots {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .blackbox-inside h3 {
        font-size: clamp(1.1rem,1.4vw,1.6rem);
    }
    .blackbox-inside h2 {
        font-size: clamp(1.4rem,1.6vw,2rem);
    }
    .group-name img {
        width: 1rem;
        height: 1rem;
    }
    .group-name h4 {
        font-size: clamp(.6rem,.7vw,.8rem);
    }
    .group-container {
        width: clamp(10.73713rem,14vw,21.26538rem);
        height: clamp(10.73713rem,14vw,21.26538rem);
    }
    /* Group Section */
    /* Legendary Section */
    .legendaries-section {
        flex-direction: column-reverse;
        gap: 0;
    }
    .legendary-right {
        width: 85%;
        justify-content: center;
        align-items: center;
        margin-top: clamp(7.5rem, 14vw, 15rem);
    }
    .legendary-left {
        width: 100%;
    }
    .legendary-left img:first-child {
        position: absolute;
        bottom: 0;
        left: -5%;
        width: clamp(21.52106rem, 50vw, 66.34431rem);
        height: clamp(21.54169rem, 50.5vw, 66.39863rem);
    }
    .legendary-left img:last-child {
        width: clamp(21.52106rem, 50vw, 66.34431rem);
        height: clamp(21.54169rem, 50.5vw, 66.39863rem);
    }
    .ball img:first-child {
        width: clamp(7.3125rem, 10.5vw, 15.1875rem);
        height: clamp(7.4375rem, 10.5vw, 15.3125rem);
        margin-right: clamp(7rem, 11.6vw, 12rem);
    }
    .text-right p {
        font-size: clamp(.7rem, .8vw, .9rem);
    }
    .text-right p br {
        display: none;
    }
    /* Legendary Section */
    /* Roulette Section */
    .roulette-section {
        gap: clamp(1rem,1.3vw,1.5rem);
    }
    .part-text-1 {
        width: 100%;
        top: 125% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-2 {
        width: 100%;
        top: 125% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-3 {
        width: 100%;
        top: 125% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-4 {
        width: 100%;
        top: 125% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .roullete-img {
        width: clamp(16.125rem, 27vw, 32.75rem);
        height: clamp(16.125rem, 27vw, 32.75rem);
    }
    .parts {
        position: absolute;
        width: clamp(6.5rem, 14vw, 14.4375rem) !important;
        height: clamp(6.5rem, 14vw, 14.4375rem) !important;
    }
    .part-text-1, .part-text-2, .part-text-3, .part-text-4 {
        font-size: clamp(1rem,1.2vw,1.4rem) !important;
    }
    .powerby {
        margin-top: 8rem;
    }
    /* Roulette Section */
    /* Roadmap Section */
    .roadmap {
        position: relative;
        width: 90.5625rem;
        height: 20rem;
    }
    .line-path {
        width: 90.5625rem;
    }
    .roadmap-1 {
        width: 40%;
        top: 9.25rem;
        left: 4.4rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-2 {
        width: 40%;
        top: 5.2rem;
        left: 18rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-3 {
        width: 40%;
        top: 9.25rem;
        left: 31rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-4 {
        width: 40%;
        top: 5.1rem;
        left: 45rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-5 {
        width: 40%;
        top: 9.3rem;
        left: 58rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-6 {
        width: 40%;
        top: 5.2rem;
        left: 72rem;
        transform: none;
        opacity: 1;
    }
    /* Roadmap Section */
    /* Thanks Section */
    .thanks-section h2 {
        width: 80%;
    }
    .thanks-section h2 br {
        display: none;
    }
    .thanks-imgs {
        height: clamp(17.25rem, 20vw, 29.875rem) !important;
    }
    .thanks-imgs .snake-1 {
        width: clamp(10.8125rem, 20vw, 21.875rem) !important;
        height: clamp(10.625rem, 20vw, 21.875rem) !important;
        top: 25%;
        left: 5%;
    }
    .thanks-imgs .snake-2 {
        width: clamp(17.3125rem, 20vw, 29.875rem) !important;
        height: clamp(17.25rem, 20vw, 29.875rem) !important;
        top: 10%;
        left: 35%;
    }
    /* Thanks Section */
    /* Footer Section */
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 90%;
        position: absolute;
        bottom: clamp(2rem, 2.5vw, 3rem) !important;
    }
    .internals {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: clamp(1rem, 1rem, 3rem);
    }
    /* Footer Section */
}

/*Media queries para trabajar Mobile*/
@media  screen and (min-width: 411px) and (max-width: 479px){
    /* Hero Section */
    .hero-text {
        top: 25%;
        left: 50%;
        transform: translateY(-25%);
        transform: translateX(-50%);
    }
    .hero-title .text-on {
        font-size: clamp(2.5rem,4.5vw,5.5rem);
    }
    .hero-title .text-off {
        font-size: clamp(2.5rem,4.5vw,5.5rem);
    }
    .hero-img {
        left: 2%;
    }
    .hero-btns {
        width: 100%;
        bottom: -90%;
        left: 50%;
        transform: translateX(-50%) !important;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(.4rem,.6vw,.8rem);
    }
    .hero-title span.margin-left {
        margin-left: 0;
    }
    .margin-left-mobile {
        margin-left: -.5rem;
    }
    .left-btn {
        width: clamp(15rem,18vw,20.65625rem);
        height: clamp(2.5rem,3.8vw,4.14019rem);
        margin-right: 0;
        gap: clamp(0.5rem,.5vw,.8rem);
    }
    .right-btn {
        width: clamp(13rem,13vw,15.53125rem);
        height: clamp(2.5rem,3.6vw,4.14019rem);
        margin-left: 0;
        margin-right: -30%;
        gap: clamp(0.5rem,.5vw,.8rem);
        align-self: flex-end;
    }
    .hero-btns p {
        font-size: clamp(.6rem,.8vw,.9rem);
    }
    .line-hero {
        display: none;
    }
    .hero-render {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-size: contain;
        width: 100%;
    }
    .pre-green-cube {
        left: 42%;
    }
    .non-animated {
        animation: none !important;
    }
    /* Hero Section */
    /* Community Section */
    .whitelist {
        position: absolute;
        top: 11% !important;
        left: 50% !important;
        right: initial;
        transform: translateX(-50%) !important;
        width: 16.71481rem !important;
        height: 2.9375rem !important;
        font-size: clamp(.7rem,.65vw,.7rem) !important;
    }
    .community-text {
        background-image: url('/media/img/text-interface-mobile.png') !important;
        width: 19rem;
        height: 23.79713rem;
        position: absolute;
        top: 32% !important;
        right: 10% !important;
        transform: translateY(-25%) !important;
        z-index: 12;
    }
    .community-text h2 {
        font-size: 1.375rem;
        margin-right: 1.4rem;
        margin-left: 1.4rem;
        margin-top: 1.4rem;
    }
    .community-text p {
        overflow-y: scroll !important;
        font-size: 1rem;
        margin-right: 1.4rem;
        margin-left: 1.4rem;
        margin-bottom: 1.4rem;
    }
    .community-text p::-webkit-scrollbar {
        display: initial;
        width: 0.5rem;
        height: 0.25rem;
        border-radius: 1.5625rem;
    }
    .community-text p::-webkit-scrollbar-thumb {
        background-color: #05ce02;
        border-radius: 1.5625rem;
    }
    .community-text p::-webkit-scrollbar-thumb:hover {
        background-color: #05ce02d0;
    }
    .community-text p::-webkit-scrollbar-track {
        background-color: rgba(7, 206, 2, 0.39);
        margin-block: 0.25rem;
        border-radius: 1.5625rem;
    }
    .community-phrase {
        position: absolute;
        bottom: 0% !important;
        right: 15% !important;
        transform: translateX(-50%) !important;
        transform: translateY(-10%) !important;
    }
    .community-phrase .text-on {
        font-size: clamp(1.6rem,2.2vw,2.5rem);
    }
    .community-phrase .text-off {
        font-size: clamp(1.6rem,2.2vw,2.5rem);
        padding-left: 0;
    }
    /* Community Section */
    /* Collection Section */
    .collection-text {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(4rem,7.5vw,8rem);
        padding-top: clamp(1.25rem,1.5vw,2rem) !important;
    }
    .collection-text h2 {
        width: 80%;
        font-size: clamp(1.5rem,2.7vw,3rem);
        margin: 0 auto;
    }
    .nft-gallery {
        width: 105%;
    }
    .nft-text {
        width: 65% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(0.4rem,0.45vw,0.5rem);
        align-items: flex-start;
    }
    .nft-p {
        font-size: clamp(.9rem,.95vw,1rem);
    }
    .nft-p br {
        display: none;
    }
    /* Collection Section */
    /* Group Section */
    .group-spots {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: clamp(.9rem,1.4vw,1.6rem);
        row-gap: clamp(1rem,1.5vw,2rem);
    }
    .blackbox-inside h3 br {
        display: none;
    }
    .blackbox-inside h3 {
        width: 80%;
        font-size: clamp(1.1rem,1.4vw,1.6rem);
        margin-top: clamp(4rem,4.5vw,5rem);
    }
    .blackbox-inside h2 {
        font-size: clamp(1.4rem,1.6vw,2rem);
        margin-bottom: clamp(1.5rem,2vw,2.5rem);
    }
    .group-name img {
        width: .9rem;
        height: .9rem;
    }
    .group-name h4 {
        font-size: clamp(.5rem,.6vw,.7rem);
    }
    /* Group Section */
    /* Legendary Section */
    .legendaries-section {
        flex-direction: column-reverse;
        gap: 0;
    }
    .legendary-right {
        width: 85%;
        justify-content: center;
        align-items: center;
        margin-top: clamp(12rem, 16vw, 18rem);
    }
    .legendary-left {
        width: 100%;
    }
    .legendary-left img:first-child {
        position: absolute;
        bottom: 0;
        left: -25%;
    }
    .legendary-left img:last-child {
        left: -35%;
    }
    .duo {
        right: -10%;
        bottom: 0;
    }
    .ball img:first-child {
        margin-right: clamp(7rem, 11.6vw, 12rem);
    }
    .ball {
        justify-content: center;
    }
    .absolute-crystal-2 {
        width: clamp(5.5625rem, 6.3vw, 6.8125rem);
        height: clamp(4.3125rem, 5.1vw, 5.3125rem);
        position: absolute;
        right: clamp(3rem, 3.5vw, 6rem);
    }
    .text-right {
        width: 75%;
    }
    .text-right p {
        font-size: clamp(.7rem, .8vw, .9rem);
    }
    .text-right p br {
        display: none;
    }
    /* Legendary Section */
    /* Twenty Section */
    .twenty-section h2 {
        top: 30%;
        transform: translate(-50%, 30%);
    }
    /* Twenty Section */
    /* Roulette Section */
    .roulette-section {
        gap: clamp(1rem,1.3vw,1.5rem);
    }
    .roulette {
        margin-top: 5rem;
    }
    .part-text-1 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-2 {
        width: 100%;
        top: 110% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-3 {
        width: 100%;
        top: 115% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-4 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    /* .roullete-img {
        width: clamp(16.125rem, 27vw, 32.75rem);
        height: clamp(16.125rem, 27vw, 32.75rem);
    } */
    .parts {
        position: absolute;
        width: clamp(9.2rem, 14vw, 14.4375rem) !important;
        height: clamp(9.2rem, 14vw, 14.4375rem) !important;
    }
    .part-text-1, .part-text-2, .part-text-3, .part-text-4 {
        font-size: clamp(1rem,1.2vw,1.4rem) !important;
    }
    .powerby {
        margin-top: 8rem;
    }
    /* Roulette Section */
    /* Roadmap Section */
    .roadmap-section h2 {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, 25%);
    }
    .roadmap {
        position: relative;
        width: 90.5625rem;
        height: 20rem;
    }
    .line-path {
        width: 90.5625rem;
    }
    .line-fill {
        width: 12.825rem;
    }
    .roadmap-1 {
        width: 60%;
        top: 9.25rem;
        left: 4.4rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-2 {
        width: 60%;
        top: 5.2rem;
        left: 18rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-3 {
        width: 60%;
        top: 9.25rem;
        left: 31rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-4 {
        width: 60%;
        top: 5.1rem;
        left: 45rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-5 {
        width: 60%;
        top: 9.3rem;
        left: 58rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-6 {
        width: 60%;
        top: 5.2rem;
        left: 72rem;
        transform: none;
        opacity: 1;
    }
    /* Roadmap Section */
    /* Thanks Section */
    .thanks-section h2 {
        width: 80%;
    }
    .thanks-section h2 br {
        display: none;
    }
    .thanks-imgs .snake-1 {
        top: 25%;
        left: 15%;
    }
    .thanks-imgs .snake-2 {
        top: 10%;
        left: 40%;
    }
    /* Thanks Section */
    /* Footer Section */
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 83%;
        position: absolute;
        bottom: clamp(2rem, 2.5vw, 3rem) !important;
    }
    .internals {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: clamp(1rem, 1rem, 3rem);
    }
    .topLoop {
        width: 100%;
        height: clamp(17.75rem,17vw,18.5rem);
        overflow-x: hidden;
        overflow-y: hidden;
        margin-top: clamp(3rem,6vw,7rem);
    }
    .track-1 {
        display: flex;
        animation: scroll 50s linear infinite alternate;
        width: calc(clamp(17.92706rem,17vw,18.5rem) * 24);
        opacity: 0.15;
        mix-blend-mode: luminosity;
    }
    .top-slide {
        width: clamp(17.92706rem,17vw,18.5rem);
        height: clamp(17.75rem,17vw,18.5rem);
    }
    .top-slide img {
        width: 100%;
        height: 100%;
    }
    .botLoop {
        width: 100%;
        height: clamp(19.75rem,19vw,20.5rem);
        overflow-x: hidden;
        overflow-y: hidden;
    }
    .track-2 {
        display: flex;
        animation: scroll-2 50s linear infinite alternate-reverse;
        width: calc(clamp(19.75rem,19vw,20.5rem) * 24);
        opacity: 0.15;
        mix-blend-mode: luminosity;
    }
    .bot-slide {
        width: clamp(19.92706rem,19vw,20.5rem);
        height: clamp(19.75rem,19vw,20.5rem);
    }
    .bot-slide img {
        width: 100%;
        height: 100%;
    }
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(clamp(-17.92706rem,-17vw,-18.5rem) * 12));
        }
    }
    @keyframes scroll-2 {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(clamp(-19.92706rem,-19vw,-20.5rem) * 12));
        }
    }
    /* Footer Section */
    .textbox {
        width: clamp(3.6875rem,6.5vw,7.125rem);
        height: clamp(3.125rem,5.5vw,6rem);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(10%,450%);
    }
    /* Legals Internals */
    .legal {
        width: 65%;
    }
    /* Legals Internals */
}

/*Media queries para trabajar Mobile*/
@media  screen and (min-width: 281px) and (max-width: 410px){
    /* Hero Section */
    .hero-text {
        top: 25%;
        left: 50%;
        transform: translateY(-25%);
        transform: translateX(-50%);
    }
    .hero-title .text-on {
        font-size: clamp(2.3rem,4.5vw,5.5rem);
    }
    .hero-title .text-off {
        font-size: clamp(2.3rem,4.5vw,5.5rem);
    }
    .hero-img {
        left: 2%;
    }
    .hero-btns {
        width: 100%;
        bottom: -90%;
        left: 50%;
        transform: translateX(-50%) !important;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(.4rem,.6vw,.8rem);
    }
    .hero-title span.margin-left {
        margin-left: 0;
    }
    .margin-left-mobile {
        margin-left: -.5rem;
    }
    .left-btn {
        width: clamp(15rem,18vw,20.65625rem);
        height: clamp(2.5rem,3.8vw,4.14019rem);
        margin-right: 0;
        gap: clamp(0.5rem,.5vw,.8rem);
    }
    .right-btn {
        width: clamp(13rem,13vw,15.53125rem);
        height: clamp(2.5rem,3.6vw,4.14019rem);
        margin-left: 0;
        margin-right: -30%;
        gap: clamp(0.5rem,.5vw,.8rem);
        align-self: flex-end;
    }
    .hero-btns p {
        font-size: clamp(.6rem,.8vw,.9rem);
    }
    .line-hero {
        display: none;
    }
    .hero-render {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-size: contain;
        width: 100%;
    }
    .pre-green-cube {
        left: 40%;
        top: 56%;
    }
    /* Hero Section */
    /* Legals Internals */
    .legal {
        width: 60%;
    }
    /* Legals Internals */
    /* Community Section */
    .whitelist {
        position: absolute;
        top: 10.5% !important;
        left: 50% !important;
        right: initial;
        transform: translateX(-50%) !important;
        width: 12.71481rem !important;
        height: 2.9375rem !important;
        font-size: clamp(.7rem,.65vw,.7rem) !important;
    }
    .community-text {
        background-image: url('/media/img/text-interface-mobile.png') !important;
        width: 12rem;
        height: 15.79713rem;
        position: absolute;
        top: 30% !important;
        right: 21.5% !important;
        transform: translateY(-25%) !important;
        z-index: 12;
    } 
    .community-text h2 {
        font-size: 1rem;
        margin-right: .8rem;
        margin-left: .8rem;
        margin-top: .8rem;
    }
    .community-text p {
        overflow-y: scroll !important;
        font-size: .9rem;
        margin-right: .8rem;
        margin-left: .8rem;
        margin-bottom: .8rem;
    }
    .community-text p::-webkit-scrollbar {
        display: initial;
        width: 0.5rem;
        height: 0.25rem;
        border-radius: 1.5625rem;
    }
    .community-text p::-webkit-scrollbar-thumb {
        background-color: #05ce02;
        border-radius: 1.5625rem;
    }
    .community-text p::-webkit-scrollbar-thumb:hover {
        background-color: #05ce02d0;
    }
    .community-text p::-webkit-scrollbar-track {
        background-color: rgba(7, 206, 2, 0.39);
        margin-block: 0.25rem;
        border-radius: 1.5625rem;
    }
    .community-phrase {
        position: absolute;
        bottom: 0% !important;
        right: 15% !important;
        transform: translateX(-50%) !important;
        transform: translateY(-10%) !important;
    }
    .community-phrase .text-on {
        font-size: clamp(1.2rem,1.8vw,2rem);
    }
    .community-phrase .text-off {
        font-size: clamp(1.2rem,1.8vw,2rem);
        padding-left: 0;
    }
    .textbox {
        width: clamp(3.6875rem,6.5vw,7.125rem);
        height: clamp(3.125rem,5.5vw,6rem);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(10%,400%);
    }
    .non-animated {
        animation: none !important;
    }
    /* Community Section */
    /* Collection Section */
    .collection-section {
        gap: clamp(2rem,3.5vw,4rem);
    }
    .collection-text {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(1.5rem,2.7vw,3rem);
        padding-top: clamp(1.2rem,1.5vw,1.8rem) !important;
    }
    .collection-text h2 {
        width: 80%;
        font-size: clamp(1.3rem,2.3vw,2.5rem);
        margin: 0 auto;
    }
    .nft-gallery {
        width: 105%;
    }
    .nft-text {
        width: 65% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(0.4rem,0.45vw,0.5rem);
        align-items: flex-start;
    }
    .gallery-item-left-4 {
        right: 75%;
    }
    .gallery-item-right-4 {
        right: 75%;
    }
    .nft-p {
        font-size: clamp(.7rem,.75vw,.8rem);
    }
    .nft-p br {
        display: none;
    }
    /* Collection Section */
    /* Group Section */
    .group-spots {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: clamp(.9rem,1.4vw,1.6rem);
        row-gap: clamp(1rem,1.5vw,2rem);
    }
    .blackbox-inside h3 br {
        display: none;
    }
    .blackbox-inside h3 {
        font-size: clamp(1.1rem,1.15vw,1.3rem);
        margin-top: clamp(4rem,4.5vw,5rem);
    }
    .blackbox-inside h2 {
        font-size: clamp(1.1rem,1.4vw,1.6rem);
        margin-bottom: clamp(1.1rem,1.6vw,1.8rem);
    }
    .group-name img {
        width: .85rem;
        height: .85rem;
    }
    .group-name h4 {
        font-size: clamp(.4rem,.5vw,.6rem);
    }
    .group-container {
        width: clamp(9.73713rem,12vw,21.26538rem);
        height: clamp(9.73713rem,12vw,21.26538rem);
    }
    /* Group Section */
    /* Legendary Section */
    .legendaries-section {
        flex-direction: column-reverse;
        gap: 0;
    }
    .legendary-right {
        width: 75%;
        justify-content: center;
        align-items: center;
        margin-top: clamp(10rem, 12vw, 14rem);
        gap: clamp(1rem, 3.7vw, 4rem);
    }
    .legendary-left {
        width: 100%;
    }
    .legendary-left img:first-child {
        width: clamp(21.52106rem, 50vw, 66.34431rem);
        height: clamp(21.54169rem, 50.5vw, 66.39863rem);
        position: absolute;
        bottom: 0;
        left: -25%;
    }
    .legendary-left img:last-child {
        width: clamp(21.52106rem, 50vw, 66.34431rem);
        height: clamp(21.54169rem, 50.5vw, 66.39863rem);
        left: -35%;
    }
    .duo {
        right: -10%;
        bottom: 0;
    }
    .ball img:first-child {
        width: clamp(8.3125rem, 8.5vw, 9.1875rem);
        height: clamp(8.4375rem, 8.5vw, 9.3125rem);
        margin-right: clamp(7rem, 11.6vw, 12rem);
    }
    .ball {
        justify-content: center;
    }
    .absolute-crystal-2 {
        width: clamp(5.5625rem, 6.3vw, 6.8125rem);
        height: clamp(4.3125rem, 5.1vw, 5.3125rem);
        position: absolute;
        right: clamp(3rem, 3.5vw, 6rem);
    }
    .text-right {
        width: 95%;
    }
    .text-right p {
        font-size: clamp(.6rem, .7vw, .8rem);
    }
    .text-right p br {
        display: none;
    }
    /* Legendary Section */
    /* Twenty Section */
    .twenty-section h2 {
        top: 30%;
        transform: translate(-50%, 30%);
    }
    /* Twenty Section */
    /* Roulette Section */
    .roulette-section {
        gap: clamp(1rem,1.3vw,1.5rem);
    }
    .roulette {
        margin-top: 5rem;
    }
    .part-text-1 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-2 {
        width: 100%;
        top: 110% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-3 {
        width: 100%;
        top: 115% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-4 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .roullete-img {
        width: clamp(18.125rem, 27vw, 32.75rem);
        height: clamp(18.125rem, 27vw, 32.75rem);
    }
    .parts {
        position: absolute;
        width: clamp(7.5rem, 14vw, 14.4375rem) !important;
        height: clamp(7.5rem, 14vw, 14.4375rem) !important;
    }
    .part-text-1, .part-text-2, .part-text-3, .part-text-4 {
        font-size: clamp(1rem,1.2vw,1.4rem) !important;
    }
    .powerby {
        width: 10rem !important;
        margin-top: 7rem;
    }
    /* Roulette Section */
    /* Roadmap Section */
    .roadmap-section h2 {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, 25%);
    }
    .roadmap {
        position: relative;
        width: 90.5625rem;
        height: 20rem;
    }
    .line-path {
        width: 90.5625rem;
    }
    .line-fill {
        width: 12.125rem;
    }
    .roadmap-1 {
        width: 60%;
        top: 9.25rem;
        left: 4.4rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-2 {
        width: 60%;
        top: 5.2rem;
        left: 18rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-3 {
        width: 60%;
        top: 9.25rem;
        left: 31rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-4 {
        width: 60%;
        top: 5.1rem;
        left: 45rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-5 {
        width: 60%;
        top: 9.3rem;
        left: 58rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-6 {
        width: 60%;
        top: 5.2rem;
        left: 72rem;
        transform: none;
        opacity: 1;
    }
    /* Roadmap Section */
    /* Thanks Section */
    .thanks-section h2 {
        font-size: clamp(2.2rem, 3.2vw, 3.9375rem) !important;
        width: 80%;
    }
    .thanks-section h2 br {
        display: none;
    }
    .thanks-imgs .snake-1 {
        top: 25%;
        left: 10%;
    }
    .thanks-imgs .snake-2 {
        top: 10%;
        left: 40%;
    }
    /* Thanks Section */
    /* Footer Section */
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 90%;
        position: absolute;
        bottom: clamp(1.2rem, 2.5vw, 3rem) !important;
    }
    .internals {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: clamp(1rem, 1rem, 3rem);
    }
    .topLoop {
        width: 100%;
        height: clamp(14.75rem,14vw,18.5rem);
        overflow-x: hidden;
        overflow-y: hidden;
        margin-top: clamp(2rem,6vw,7rem);
    }
    .track-1 {
        display: flex;
        animation: scroll 50s linear infinite alternate;
        width: calc(clamp(14.92706rem,14vw,18.5rem) * 24);
        opacity: 0.15;
        mix-blend-mode: luminosity;
    }
    .top-slide {
        width: clamp(14.92706rem,14vw,18.5rem);
        height: clamp(14.75rem,14vw,18.5rem);
    }
    .top-slide img {
        width: 100%;
        height: 100%;
    }
    .botLoop {
        width: 100%;
        height: clamp(16.75rem,16vw,20.5rem);
        overflow-x: hidden;
        overflow-y: hidden;
    }
    .track-2 {
        display: flex;
        animation: scroll-2 50s linear infinite alternate-reverse;
        width: calc(clamp(16.75rem,16vw,20.5rem) * 24);
        opacity: 0.15;
        mix-blend-mode: luminosity;
    }
    .bot-slide {
        width: clamp(16.92706rem,16vw,20.5rem);
        height: clamp(16.75rem,16vw,20.5rem);
    }
    .bot-slide img {
        width: 100%;
        height: 100%;
    }
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(clamp(-14.92706rem,-14vw,-18.5rem) * 12));
        }
    }
    @keyframes scroll-2 {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(clamp(-16.92706rem,-16vw,-20.5rem) * 12));
        }
    }
    /* Footer Section */
}

/*Media queries para trabajar Mobile*/
@media  screen and (max-width: 280px){
    /* Hero Section */
    .hero-text {
        top: 25%;
        left: 50%;
        transform: translateY(-25%);
        transform: translateX(-50%);
    }
    .hero-title .text-on {
        font-size: clamp(2.5rem,4.5vw,5.5rem);
    }
    .hero-title .text-off {
        font-size: clamp(2.5rem,4.5vw,5.5rem);
    }
    .hero-img {
        left: 2%;
    }
    .hero-btns {
        width: 100%;
        bottom: -90%;
        left: 50%;
        transform: translateX(-50%) !important;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(.4rem,.6vw,.8rem);
    }
    .hero-title span.margin-left {
        margin-left: 0;
    }
    .margin-left-mobile {
        margin-left: -.5rem;
    }
    .left-btn {
        width: clamp(15rem,18vw,20.65625rem);
        height: clamp(2.5rem,3.8vw,4.14019rem);
        margin-right: 0;
        gap: clamp(0.5rem,.5vw,.8rem);
    }
    .right-btn {
        width: clamp(13rem,13vw,15.53125rem);
        height: clamp(2.5rem,3.6vw,4.14019rem);
        margin-left: 0;
        margin-right: -30%;
        gap: clamp(0.5rem,.5vw,.8rem);
        align-self: flex-end;
    }
    .hero-btns p {
        font-size: clamp(.6rem,.8vw,.9rem);
    }
    .line-hero {
        display: none;
    }
    .hero-render {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-size: contain;
        width: 100%;
    }
    /* Hero Section */
    /* Community Section */
    .whitelist {
        position: absolute;
        top: 12% !important;
        left: 50% !important;
        right: initial;
        transform: translateX(-50%) !important;
        width: 12.71481rem !important;
        height: 2.9375rem !important;
        font-size: clamp(.6rem,.6.5vw,.7rem) !important;
    }
    .community-text {
        background-image: url('/media/img/text-interface-mobile.png') !important;
        width: 12rem;
        height: 15.79713rem;
        position: absolute;
        top: 30% !important;
        right: 17% !important;
        transform: translateY(-25%) !important;
        z-index: 12;
    } 
    .community-text h2 {
        font-size: 1rem;
        margin-right: .8rem;
        margin-left: .8rem;
        margin-top: .8rem;
    }
    .community-text p {
        overflow-y: scroll !important;
        font-size: .9rem;
        margin-right: .8rem;
        margin-left: .8rem;
        margin-bottom: .8rem;
    }
    .community-text p::-webkit-scrollbar {
        display: initial;
        width: 0.5rem;
        height: 0.25rem;
        border-radius: 1.5625rem;
    }
    .community-text p::-webkit-scrollbar-thumb {
        background-color: #05ce02;
        border-radius: 1.5625rem;
    }
    .community-text p::-webkit-scrollbar-thumb:hover {
        background-color: #05ce02d0;
    }
    .community-text p::-webkit-scrollbar-track {
        background-color: rgba(7, 206, 2, 0.39);
        margin-block: 0.25rem;
        border-radius: 1.5625rem;
    }
    .community-phrase {
        position: absolute;
        bottom: 15% !important;
        right: 15% !important;
        transform: translateX(-50%) !important;
        transform: translateY(-10%) !important;
    }
    .community-phrase .text-on {
        font-size: clamp(1.2rem,1.8vw,2rem);
    }
    .community-phrase .text-off {
        font-size: clamp(1.2rem,1.8vw,2rem);
        padding-left: 0;
    }
    /* Community Section */
    /* Collection Section */
    .collection-section {
        gap: clamp(2rem,3.5vw,4rem);
    }
    .collection-text {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(1.5rem,2.7vw,3rem);
        padding-top: clamp(1.2rem,1.5vw,1.8rem) !important;
    }
    .collection-text h2 {
        width: 80%;
        font-size: clamp(1.3rem,2.3vw,2.5rem);
        margin: 0 auto;
    }
    .nft-gallery {
        width: 105%;
    }
    .nft-text {
        width: 65% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(0.4rem,0.45vw,0.5rem);
        align-items: flex-start;
    }
    .nft-p {
        font-size: clamp(.7rem,.75vw,.8rem);
    }
    .nft-p br {
        display: none;
    }
    /* Collection Section */
    /* Group Section */
    .group-spots {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: clamp(.9rem,1.4vw,1.6rem);
        row-gap: clamp(1rem,1.5vw,2rem);
    }
    .blackbox-inside h3 br {
        display: none;
    }
    .blackbox-inside h3 {
        font-size: clamp(1.1rem,1.15vw,1.3rem);
        margin-top: clamp(4rem,4.5vw,5rem);
    }
    .blackbox-inside h2 {
        font-size: clamp(1.1rem,1.4vw,1.6rem);
        margin-bottom: clamp(1.1rem,1.6vw,1.8rem);
    }
    .group-name img {
        width: .85rem;
        height: .85rem;
    }
    .group-name h4 {
        font-size: clamp(.4rem,.5vw,.6rem);
    }
    .group-container {
        width: clamp(9.73713rem,12vw,21.26538rem);
        height: clamp(9.73713rem,12vw,21.26538rem);
    }
    /* Group Section */
    /* Legendary Section */
    .legendaries-section {
        flex-direction: column-reverse;
        gap: 0;
    }
    .legendary-right {
        width: 75%;
        justify-content: center;
        align-items: center;
        margin-top: clamp(10rem, 12vw, 14rem);
        gap: clamp(1rem, 3.7vw, 4rem);
    }
    .legendary-left {
        width: 100%;
    }
    .legendary-left img:first-child {
        width: clamp(21.52106rem, 50vw, 66.34431rem);
        height: clamp(21.54169rem, 50.5vw, 66.39863rem);
        position: absolute;
        bottom: 0;
        left: -25%;
    }
    .legendary-left img:last-child {
        width: clamp(21.52106rem, 50vw, 66.34431rem);
        height: clamp(21.54169rem, 50.5vw, 66.39863rem);
        left: -35%;
    }
    .duo {
        right: -10%;
        bottom: 0;
    }
    .ball img:first-child {
        width: clamp(8.3125rem, 8.5vw, 9.1875rem);
        height: clamp(8.4375rem, 8.5vw, 9.3125rem);
        margin-right: clamp(7rem, 11.6vw, 12rem);
    }
    .ball {
        justify-content: center;
    }
    .absolute-crystal-2 {
        width: clamp(5.5625rem, 6.3vw, 6.8125rem);
        height: clamp(4.3125rem, 5.1vw, 5.3125rem);
        position: absolute;
        right: clamp(3rem, 3.5vw, 6rem);
    }
    .text-right {
        width: 95%;
    }
    .text-right p {
        font-size: clamp(.6rem, .7vw, .8rem);
    }
    .text-right p br {
        display: none;
    }
    /* Legendary Section */
    /* Twenty Section */
    .twenty-section h2 {
        top: 30%;
        transform: translate(-50%, 30%);
    }
    /* Twenty Section */
    /* Roulette Section */
    .roulette-section {
        gap: clamp(1rem,1.3vw,1.5rem);
    }
    .roulette {
        margin-top: 5rem;
    }
    .part-text-1 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-2 {
        width: 100%;
        top: 110% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-3 {
        width: 100%;
        top: 115% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .part-text-4 {
        width: 100%;
        top: 120% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        text-align: center !important;
    }
    .roullete-img {
        width: clamp(18.125rem, 27vw, 32.75rem);
        height: clamp(18.125rem, 27vw, 32.75rem);
    }
    .parts {
        position: absolute;
        width: clamp(7.5rem, 14vw, 14.4375rem) !important;
        height: clamp(7.5rem, 14vw, 14.4375rem) !important;
    }
    .part-text-1, .part-text-2, .part-text-3, .part-text-4 {
        font-size: clamp(1rem,1.2vw,1.4rem) !important;
    }
    .powerby {
        width: 10rem !important;
        margin-top: 7rem;
    }
    /* Roulette Section */
    /* Roadmap Section */
    .roadmap-section h2 {
        font-size: 1.4rem;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, 30%);
    }
    .roadmap {
        position: relative;
        width: 90.5625rem;
        height: 20rem;
    }
    .line-path {
        width: 90.5625rem;
    }
    .line-fill {
        width: 11.5rem;
    }
    .roadmap-1 {
        width: 80%;
        top: 9.25rem;
        left: 4.4rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-2 {
        width: 80%;
        top: 5.2rem;
        left: 18rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-3 {
        width: 80%;
        top: 9.25rem;
        left: 31rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-4 {
        width: 80%;
        top: 5.1rem;
        left: 45rem;
        transform: none;
        opacity: 1;
    }
    .non-animated {
        animation: none !important;
    }
    .roadmap-5 {
        width: 80%;
        top: 9.3rem;
        left: 58rem;
        transform: none;
        opacity: 1;
    }
    .roadmap-6 {
        width: 80%;
        top: 5.2rem;
        left: 72rem;
        transform: none;
        opacity: 1;
    }
    /* Roadmap Section */
    /* Thanks Section */
    .thanks-section h2 {
        font-size: clamp(2.2rem, 3.2vw, 3.9375rem) !important;
        width: 80%;
    }
    .thanks-section h2 br {
        display: none;
    }
    .thanks-imgs .snake-1 {
        top: 25%;
        left: 10%;
    }
    .thanks-imgs .snake-2 {
        top: 10%;
        left: 40%;
    }
    /* Thanks Section */
    /* Footer Section */
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 90%;
        position: absolute;
        bottom: clamp(1.2rem, 2.5vw, 3rem) !important;
    }
    .internals {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: clamp(1rem, 1rem, 3rem);
    }
    .topLoop {
        width: 100%;
        height: clamp(14.75rem,14vw,18.5rem);
        overflow-x: hidden;
        overflow-y: hidden;
        margin-top: clamp(2rem,6vw,7rem);
    }
    .track-1 {
        display: flex;
        animation: scroll 50s linear infinite alternate;
        width: calc(clamp(14.92706rem,14vw,18.5rem) * 24);
        opacity: 0.15;
        mix-blend-mode: luminosity;
    }
    .top-slide {
        width: clamp(14.92706rem,14vw,18.5rem);
        height: clamp(14.75rem,14vw,18.5rem);
    }
    .top-slide img {
        width: 100%;
        height: 100%;
    }
    .botLoop {
        width: 100%;
        height: clamp(16.75rem,16vw,20.5rem);
        overflow-x: hidden;
        overflow-y: hidden;
    }
    .track-2 {
        display: flex;
        animation: scroll-2 50s linear infinite alternate-reverse;
        width: calc(clamp(16.75rem,16vw,20.5rem) * 24);
        opacity: 0.15;
        mix-blend-mode: luminosity;
    }
    .bot-slide {
        width: clamp(16.92706rem,16vw,20.5rem);
        height: clamp(16.75rem,16vw,20.5rem);
    }
    .bot-slide img {
        width: 100%;
        height: 100%;
    }
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(clamp(-14.92706rem,-14vw,-18.5rem) * 12));
        }
    }
    @keyframes scroll-2 {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(clamp(-16.92706rem,-16vw,-20.5rem) * 12));
        }
    }
    /* Footer Section */
    .textbox {
        width: clamp(3.6875rem,6.5vw,7.125rem);
        height: clamp(3.125rem,5.5vw,6rem);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(10%,400%);
    }
}