/* fonts */
@font-face {
    font-family: 'Aleo Regular';
    src: url('../fonts/Aleo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aleo Light';
    src: url('../fonts/Aleo-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aleo Semi Bold';
    src: url('../fonts/Aleo-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Articulat CF Normal';
    src: url('../fonts/fonnts.com-Articulat_CF_Normal.otf') format('opentype');
    font-weight: lighter;
    /* ou 'bold' */
    font-style: normal;
}

@font-face {
    font-family: 'Articulat CF Medium';
    src: url('../fonts/fonnts.com-Articulat_CF_Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Articulat CF Demi Bold';
    src: url('../fonts/fonnts.com-Articulat_CF_Demi_Bold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Articulat CF Extra Bold';
    src: url('../fonts/fonnts.com-Articulat_CF_Extra_Bold.otf') format('opentype');
    font-weight: 800;
    font-style: bold;
}

@font-face {
    font-family: 'Poppins Regular';
    src: url('../fonts/Poppins-Regular.ttf') format('opentype');
    font-weight: 400;
    font-style: normal;
}



.f-aleo-regular-18 {
    font-family: 'Aleo Regular', serif !important;
    font-weight: 400;
    font-size: 18px !important;
}

.f-aleo-semi-bold-24 {
    font-family: 'Aleo Semi Bold', serif !important;
    font-weight: 600;
    font-size: 24px !important;
}

.f-aleo-semi-bold-30 {
    font-family: 'Aleo Regular', serif !important;
    font-weight: 600;
    font-size: 30px !important;
}

.f-articulat-normal-18 {
    font-family: 'Articulat CF Normal', sans-serif !important;
    font-size: 18px !important;
}

.f-articulat-normal-29 {
    font-family: 'Articulat CF Normal', sans-serif !important;
    font-size: 29px !important;
}

.f-articulat-bold-18 {
    font-family: 'Articulat CF Extra Bold', sans-serif !important;
    font-weight: bold !important;
    font-size: 18px !important;
}

.f-articulat-demi-bold-18 {
    font-family: 'Articulat CF Demi Bold', sans-serif !important;
    font-weight: bold !important;
    font-size: 18px !important;
}

/* colors */
.c-white {
    color: var(--white);
}

.c-dark-gray {
    color: var(--dark-gray);
}

.c-midnight-blue {
    color: var(--midnight-blue) !important;
}

/* background colors */
.bg-orange {
    background-color: var(--orange);
}

.bg-purple {
    background-color: var(--purple);
}

.bg-deep-purple {
    background-color: var(--deep-purple);
}

.bg-light-blue {
    background-color: var(--light-blue);
}

.bg-royal-blue {
    background-color: var(--royal-blue);
}

.bg-dark-gray {
    background-color: var(--dark-gray);
}

.bg-midnight-blue {
    background-color: var(--midnight-blue);
}

.bg-white {
    background-color: var(--white);
}

.bg-light-gray-3 {
    background-color: var(--light-gray-3);
}



/* bars */
.horizontal-bar {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.horizontal-bar::before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 2px;
    margin-right: 0.75rem;
    margin-top: 6px;
    /* nova linha: define a cor do fundo */
    background-color: currentColor;
}

.horizontal-bar-dark-gray {
    color: var(--dark-gray);
}

.horizontal-bar-white {
    color: var(--white);
}

.horizontal-midnight-blue {
    color: var(--midnight-blue) !important;
}

.divider {
    width: 100% !important;
    max-width: 440px !important;
    height: 3px;
    background-color: var(--light-gray-3);
    margin: 0.5rem 0;
}


/*  */

.bg-orange-gradient {
    background: linear-gradient(to right, var(--orange) 50%, transparent 50%) !important;
}

.bg-purple-gradient {
    background: linear-gradient(to right, var(--purple) 50%, transparent 50%) !important;
}

.bg-deep-purple-gradient {
    background: linear-gradient(to right, var(--deep-purple) 50%, transparent 50%) !important;
}

.bg-light-blue-gradient {
    background: linear-gradient(to right, var(--light-blue) 50%, transparent 50%) !important;
}

.bg-royal-blue-gradient {
    background: linear-gradient(to right, var(--royal-blue) 50%, transparent 50%) !important;
}

.bg-dark-gray-gradient {
    background: linear-gradient(to right, var(--dark-gray) 50%, transparent 50%) !important;
}

.bg-midnight-blue-gradient {
    background: linear-gradient(to right, var(--midnight-blue) 50%, transparent 50%) !important;
}

.bg-white-gradient {
    background: linear-gradient(to right, var(--white) 50%, transparent 50%) !important;
}

.bg-light-gray-3-gradient {
    background: linear-gradient(to right, var(--light-gray-3) 50%, transparent 50%) !important;
}