@font-face {
    font-family: 'Outfit-Variable';
    src: url('../fonts/Outfit/Outfit-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
    font-style: normal;
}

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

@font-face {
    font-family: 'Outfit-Bold';
    src: url('../fonts/Outfit/Outfit-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit-Medium';
    src: url('../fonts/Outfit/Outfit-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit-ExtraLight';
    src: url('../fonts/Outfit/Outfit-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit-ExtraBold';
    src: url('../fonts/Outfit/Outfit-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
    font-style: normal;
}

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

/* Text Alignments */
.center{ text-align: center!important; }
.right{ text-align: right!important; }
.left{ text-align: left!important; }
.align-centered{ text-align: left!important;}

/* Color texts */
.primaryColor{ color: var(--primaryColor) !important; }
.textDarkRed { color: var(--darkRed) !important;}
.textGray { color: var(--grayText) !important;}
.textGrayLight { color: var(--grayNeutral) !important;}

/*Headlines and Bold*/
.text-bd-3XL {
    font-family: "Outfit-Bold" !important;
    font-size: 2.5rem !important;
    font-size: clamp(2.5rem, 2.2142857142857144rem + 1.4285714285714286vw, 3.5rem) !important;
    font-weight: 700 !important;
    line-height: 70px !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

.text-bd-2XL {
    font-family: "Outfit-Bold" !important;
    font-size: 2rem !important;
    font-size: clamp(2rem, 1.8571428571428572rem + 0.7142857142857143vw, 2.5rem) !important;
    font-weight: 700 !important;
    line-height: 51px !important;
}

.text-bd-xl {
    font-family: "Outfit-Bold" !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 38.4px !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

.text-bd-lg {
    font-family: "Outfit-Bold" !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 28.8px !important;
}

.text-bd-md {
    font-family: "Outfit-Bold" !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

.text-ft-body {
    font-family: "Outfit-Regular" !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

.text-bd-body {
    font-family: "Outfit-Regular" !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

.text-bd-sm {
    font-family: "Outfit-Regular" !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

.subtitle1 {
    font-family: "Outfit-Regular" !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

.subtitle2 {
    font-family: "Outfit-Regular" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

.caption {
    font-family: "Outfit-Regular" !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

.text-lg {
    font-family: "Outfit-Regular" !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
}

.text-md {
    font-family: "Outfit-Regular" !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 21.6px !important;
    text-align: left !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

.text-body {
    font-family: "Outfit-Regular" !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

.text-sm {
    font-family: "Outfit-Regular" !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    hyphens: auto !important;
    text-wrap: balance !important;
}

@media screen and (max-width: 767px){
    .subTitle{
        text-wrap: balance;
        padding:0 5px;
    }

    .text-bd-2XL { margin-top: 10px!important; line-height: 35px !important; }
    .text-bd-3XL { line-height: 55px !important; }
    .align-centered{ text-align: center!important; }
}