/* utilties and helper classes */

.text-white {
    color: var(--color-white);
}

/* margin and padding helpers */

.my-4 {
    margin: 4rem 0;
}
.mt-0 {
    margin-top: 0;
}

.mx-2 {
    margin: 0 2rem;
}
.mt-2 {
    margin-top: 2rem;
}

.mt-4 {
    margin-top: 4rem;
}

.mt-5 {
    margin-top: 5rem;
}

.mt-6 {
    margin-top: 6rem;
}

.mt-8 {
    margin-top: 8rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-4 {
    margin-bottom: 4rem;
}

.mb-5 {
    margin-bottom: 5rem;
}

.mb-6 {
    margin-bottom: 6rem;
}

.mb-8 {
    margin-bottom: 8rem;
}

.align-items-left {
    align-items: self-start;
}

/* padding x helpers */
.px-40 {
    padding: 0 40px;
}
.px-20 {
    padding: 0 20px;
}
.px-10 {
    padding: 0 10px;
}

.how-works-top-padding {
    padding-top: 84px;
}

/* responsive padding x */ 
@media (max-width: 1024px) {
    .px-40 {
        padding: 0 20px;
    }
    .how-works-top-padding {
    padding-top: 4px;
    }
.text-align-center-on-mobile {
    text-align: center;
}
}

@media (max-width: 768px) {
    .my-4 {
        margin: 2rem 0;
    }
    .mx-2 {
        margin: 0 1rem;
    }
    .mt-2 {
        margin-top: 1rem;
    }

    .mt-4 {
        margin-top: 2rem;
    }

    .mt-5 {
        margin-top: 3rem;
    }

    .mt-6 {
        margin-top: 4rem;
    }

    .mt-8 {
        margin-top: 6rem;
    }

    .mb-2 {
        margin-bottom: 1rem;
    }

    .mb-4 {
        margin-bottom: 2rem;
    }

    .mb-5 {
        margin-bottom: 3rem;
    }

    .mb-6 {
        margin-bottom: 4rem;
    }

    .mb-8 {
        margin-bottom: 6rem;
    }

    .mobile-top-padding {
        padding-top: 84px;
    }
}

/* width helpers */
.w-100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.w-33 {
    width: 33.33%;
}

.w-25 {
    width: 25%;
}

.w-20 {
    width: 20%;
}

/* responsive */
@media (max-width: 768px) {
    .w-50,
    .w-33,
    .w-25,
    .w-20 {
        width: 100%;
    }
}

.hide-on-desktop {
    display: none;
}


@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
    .hide-on-desktop {
        display: block;
    }
}