#bannerHome,
#reachPeople,
#projectSteps,
#projectBenefits,
#creatorAffiliates,
#levelUp,
#ourCommunity {
    display: flex;
    justify-content: center;
    min-height: 500px;
}

#bannerHome {
    background: linear-gradient(90deg, rgba(71, 42, 131, 1) 0%, rgba(251, 114, 208, 1) 100%);
}

#projectBenefitsCard {
    background: linear-gradient(90deg, rgba(8, 82, 156, 1) 0%, rgba(52, 148, 244, 1) 100%);
}

.affiliate-card {
    background: linear-gradient(90deg, rgba(242, 242, 250, 1) 0%, rgba(250, 251, 252, 1) 100%);
}

.left-custom {
    left: -1.75rem;
}

.creator-container {
    height: 18.75rem;
    transition: height 0.3s;
}

#howToParticipateButton:hover .creator-container,
#registerButton:hover .creator-container {
    height: 18.25rem;
    transition: height 0.3s;
}

.svg-to-white:hover svg path {
    stroke: #FFF;
    transition: all 0.3s;
}

.svg-to-\[\#A70EDA\]:hover svg path {
    stroke: #A70EDA;
    transition: all 0.3s;
}

.svg-to-\[\#0073E6\]:hover svg path {
    stroke: #0073E6;
    transition: all 0.3s;
}

.svg-to-\[\#FF7F29\]:hover svg path {
    stroke: #FF7F29;
    transition: all 0.3s;
}

#reachPeople {
    background-color: var(--white-color);
}

#projectSteps,
#projectBenefits,
#ourCommunity,
#levelUp {
    background-color: #f2f2fa;
}

.custom-button-container {
    height: 22.75rem;
}

.h-\[22\.25\] {
    height: 22.25rem;
}

.creator-community {
    height: 44.875rem;
}

.creator-1 {
    left: 13rem;
    top: -2rem;
}

.creator-2 {
    left: 0;
    bottom: 3rem;
}

.creator-3 {
    left: 14rem;
    bottom: -4.25rem;
}

.creator-4 {
    right: 16.25rem;
    top: 4rem;
}

.creator-5 {
    right: 0;
    top: -4.25rem;
}

.creator-6 {
    right: 3rem;
    bottom: -2rem;
}

/* MOTION */

.affiliate-card.to-hide,
.benefits-item.to-hide {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.affiliate-card.show,
.benefits-item.show {
    opacity: 1;
    transform: translateY(0);
}

.level-1.to-hide,
.level-2.to-hide,
.level-3.to-hide,
.level-4.to-hide {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.level-1.show,
.level-2.show,
.level-3.show,
.level-4.show {
    opacity: 1;
    transform: translateX(0);
}

.progress-bar.to-hide {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.progress-bar.show {
    opacity: 1;
    transform: translateX(0);
}

.pattern-image {
    position: absolute;
    width: 110%;
    height: 110%;
    bottom: -5%;
    left: -5%;
    animation: patternMove 10s infinite alternate ease-in-out;
}

@keyframes patternMove {
    0% {
        transform: translate(0, 0) scale(1.1);
    }

    50% {
        transform: translate(-20px, 20px) scale(1.1);
    }

    100% {
        transform: translate(20px, -20px) scale(1.1);
    }
}

.creator-1.to-hide,
.creator-2.to-hide,
.creator-3.to-hide,
.creator-4.to-hide,
.creator-5.to-hide,
.creator-6.to-hide {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.creator-1.show,
.creator-2.show,
.creator-3.show,
.creator-4.show,
.creator-5.show,
.creator-6.show {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 1118px) {
    .custom-button-container {
        min-height: 51.5rem;
    }

    .creator-1,
    .creator-2,
    .creator-3,
    .creator-4,
    .creator-5,
    .creator-6 {
        position: static;
    }

    .sm\:h-\[40\] {
        height: 40rem;
    }

    .sm\:w-0\.5 {
        width: 0.125rem;
    }

    .sm\:h-10 {
        height: 2.5rem;
    }

    .sm\:gap-0 {
        gap: 0;
    }

    .sm\:gap-6 {
        gap: 1.5rem;
    }

    .sm\:gap-8 {
        gap: 2rem;
    }

    .sm\:gap-10 {
        gap: 2.5rem;
    }

    .sm\:gap-12 {
        gap: 3rem;
    }

    .sm\:gap-24 {
        gap: 6rem;
    }

    .py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .sm\:hidden {
        display: none;
    }

    .sm\:bottom-custom {
        bottom: -1rem;
    }

    .sm\:left-1\/2 {
        left: 50%;
    }

    .sm\:-translate-x-1\/2 {
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) scale(var(--tw-scale-x), var(--tw-scale-y));
    }

    .sm\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .sm\:pr-0 {
        padding-right: 0;
    }

    .sm\:pl-0 {
        padding-left: 0;
    }

    .sm\:px-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .sm\:px-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .sm\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:pb-1 {
        padding-bottom: 0.25rem;
    }

    .sm\:pb-18 {
        padding-bottom: 4.5rem;
    }

    .sm\:pt-1 {
        padding-top: 0.25rem;
    }

    .sm\:pt-4 {
        padding-top: 1rem;
    }

    .sm\:pt-6 {
        padding-top: 1.5rem;
    }

    .sm\:pt-8 {
        padding-top: 2rem;
    }

    .sm\:pt-14 {
        padding-top: 3.5rem;
    }

    .sm\:pt-18 {
        padding-top: 4.5rem;
    }

    .sm\:pt-24 {
        padding-top: 6rem;
    }

    .sm\:ml-0 {
        margin-left: 0;
    }

    .sm\:mt-10 {
        margin-top: 2.5rem;
    }

    .sm\:text-1xl {
        font-size: 1.25rem;
    }

    .sm\:w-full {
        width: 100%;
    }

    .sm\:h-full {
        height: 100%;
    }

    .md\:max-h-4xl {
        max-height: 56rem;
    }

    .sm\:static {
        position: static;
    }

    .sm\:flex {
        display: flex;
    }

    .sm\:flex-col {
        flex-direction: column;
    }

    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:justify-end {
        justify-content: flex-end;
    }

    .sm\:justify-between {
        justify-content: space-between;
    }

    .sm\:justify-start {
        justify-content: flex-start;
    }

    .sm\:justify-center {
        justify-content: center;
    }

    .sm\:items-center {
        align-items: center;
    }

    .sm\:items-start {
        align-items: flex-start;
    }

    .sm\:items-end {
        align-items: end;
    }

    .sm\:text-center {
        text-align: center;
    }

    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .sm\:text-1xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .sm\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }

    .sm\:text-start {
        text-align: start;
    }

    .sm\:max-w-full {
        max-width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .sm\:max-h-1xl {
        max-height: 30rem;
    }

    .sm\:w-64 {
        width: 16rem;
    }

    .sm\:h-26 {
        height: 6.5rem;
    }
}