/* BACKGROUNDS */
.bg-orange{background-color: var(--orange-color);}
.bg-secondary{background-color: var(--secondary-bg-color);}
.bg-purple{background-color: var(--purple-bg-color);}
.bg-dark{background-color: var(--dark-bg-color);}
.bg-black{background-color: var(--black-bg-color);}

/* TEXT COLORS */
.fc-black{color: var(--secondary-text-color);}
.fc-purple{color: var(--purple-text-color);}
.fc-orange{color: var(--orange-color);}
.fc-muted{color: var(--light-gray-text-color);}

/* TEXT FORMATTING */
.text-center{text-align: center;}
.text-left{text-align: left !important;}
.text-right{text-align: right;}
.text-align-responsive-left{text-align: left !important;}
.fw-bold{font-weight: bold;}
.fw-100{font-weight: 100 !important;}
.italic{font-style: italic;}
.upper{text-transform: uppercase;}
.small-text{font-size: var(--small-text-size) !important;}
.span-text{font-size: var(--font-size-span) !important;}
.span-text-small{font-size: var(--font-size-span-small) !important;}

/* MARGINS AND PADDINGS */
.mt-1{margin-top: 1rem;}.mt-2{margin-top: 2rem;}.mt-3{margin-top: 3rem;}.mt-4{margin-top: 4rem;} 
.mb-1{margin-bottom: 1rem;}.mb-2{margin-bottom: 2rem;}.mb-3{margin-bottom: 3rem;}.mb-4{margin-bottom: 4rem;}.mb-5{margin-bottom: 5rem;}
.ml-1{margin-left: 1rem;}.ml-2{margin-left: 2rem;}.ml-3{margin-left: 3rem;}.ml-4{margin-left: 4rem;}
.mr-1{margin-right: 1rem;}.mr-2{margin-right: 2rem;}.mr-3{margin-right: 3rem;}.mr-4{margin-right: 4rem;}
.margin-auto{margin: auto;}
.mb-custom-text{margin-bottom: .5rem !important;}
.mr-custom-text{margin-right: .5rem !important;}
.mt-3-responsive{margin-top: 3rem;}

.p-0{padding: 0rem !important;}.p-1{padding: 1rem !important;}.p-2{padding: 2rem;}.p-3{padding: 3rem;}.p-4{padding: 4rem;} 
.pt-0{padding-top: 0rem !important;}.pt-1{padding-top: 1rem !important;}.pt-2{padding-top: 2rem;}.pt-3{padding-top: 3rem;}.pt-4{padding-top: 4rem;} 
.pb-0{padding-bottom: 0rem !important;}.pb-1{padding-bottom: 1rem;}.pb-2{padding-bottom: 2rem;}.pb-3{padding-bottom: 3rem;}.pb-4{padding-bottom: 4rem;}.pb-5{padding-bottom: 5rem !important;}
.pl-1{padding-left: 1rem;}.pl-2{padding-left: 2rem;}.pl-3{padding-left: 3rem;}.pl-4{padding-left: 4rem;}
.pr-1{padding-right: 1rem;}.pr-2{padding-right: 2rem;}.pr-3{padding-right: 3rem;}.pr-4{padding-right: 4rem;}
.p-inline-5{padding-inline: 5rem;}
.gap-1{gap: 1rem;}.gap-2{gap: 2rem;}.gap-3{gap: 3rem;}.gap-4{gap: 4rem;}
.p-custom-1{padding: .5rem !important;}

/* BORDERS RADIOUS */
.border-radius-10{border-radius: 10px;}
.border-radius-20{border-radius: 20px;}

/* FLEX PROPERTIES */
.d-flex{display: flex;}
.d-flex-to-grid{display: flex;}
.d-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));justify-content: center;align-items: center;}

.d-flex-responsive{display: flex;}
.flex-1{flex: 1;}
.flex-2{flex: 2;}
.flex-wrap{flex-wrap: wrap;}
.flex-direction-responsive{flex-direction: row;}
.d-flex-column{display: flex;flex-direction: column;}
.align-items-center{align-items: center;}
.align-items-start{align-items: flex-start;}
.align-items-end{align-items: flex-end;}
.justify-content-center{justify-content: center;}
.justify-align-items-center{display: flex;justify-content: center;align-items: center;}
.justify-space-between{justify-content: space-between;}

/* WIDTHS AND HEIGHTS */
.w-100{width: 100%;}.w-50{width: 50%;}.w-25{width: 25%;}
.h-100{height: 100%;}.h-50{height: 50%;}.h-25{height: 25%;}
.custom-max-width{max-width: clamp(320px, 80vw, 1050px);}

/* CONTAINER STYLES */
.container{padding-top: 4rem;padding-bottom: 4rem;}

/* BOX STYLES */
.box-shadow{box-shadow: 12px 6px 12px rgba(0, 0, 0, 0.2);}

/* POSITIONS */
.position-relative{position: relative;}
.position-absolute{position: absolute;}
.t-0{top: 0;}
.l-0{left: 0;}

/* COMPONENTS */
.small{
    font-weight: 100;
    color: var(--light-gray-text-color);
    font-size: .6vw;
}


@media (max-width: 850px) {
    .d-flex-responsive{display: block;}
    .d-flex-to-grid{display: grid;grid-template-columns: repeat(2, 1fr);}
    .hide-mobile{display: none;}
    .flex-direction-responsive{flex-direction: column;}
    .container{padding-top: 1rem;padding-bottom: 1rem;}
    .small-text{font-size: var(--small-text-size-mobile) !important;}
    .span-text{font-size: var(--font-size-span-mobile) !important;}
    .span-text-small{font-size: var(--font-size-span-small-mobile) !important;margin-bottom: .5rem;}
    .small{font-size: 1.5vw;}
    .mt-3-responsive{margin-top: 2rem;}
    .text-align-responsive-left{text-align: center !important;}
    .center-on-mobile{justify-content: center;}
}