* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
    --brand-color: linear-gradient(0deg, #b61a09 -86.4%, #ff4500);
    /* select gradient in app linear-gradient(131.81deg, rgba(78, 67, 63) 3.92%, rgba(255, 110, 69) 111.82%) */
}

:root {
    --background: #0C111D;
    --cream-color: #FCDFD8;
    --primary-darkblue: #414A9C;
    --backround-darkblue: #222B40;
    --yellow: #F8B940;
    --primary-text-black: #222b40;
    --secondary-text-black: #2D364A;
    --text-white: #FFFFFF;
    --text-light-white: #94969C;
}

.brand-color-text {
    background-image: var(--brand-color);
    color: transparent;
    background-clip: text;
}

.primary-darkblue-text {
    color: var(--primary-darkblue)
}

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

.primary-text-black {
    color: var(--primary-text-black);
}

.secondary-text-black {
    color: var(--secondary-text-black);
}

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

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--background);
    color: #fff;
}

.container-120 {
    padding-left: 12rem;
    padding-right: 12rem;
}

.container-120-64 {
    padding: 6.4rem 12rem;
}

.container-120-96 {
    padding: 9.6rem 12rem;
}

.container-48-96{
    padding: 9.6rem 4.8rem;
}

h1 {
    font-size: 5.2rem;
    line-height: 110%;
}

h2 {
    font-size: 4.2rem;
    line-height: 120%;
    font-weight: 600;
}

h3 {
    font-size: 3.6rem;
    line-height: 120%;
    font-weight: 600;
}

h4 {
    font-size: 2.4rem;
    line-height: 130%;
    font-weight: 600;
}

h5 {
    font-size: 2rem;
    line-height: 130%;
    font-weight: 500;
}

h6 {
    font-size: 1.8rem;
    line-height: 130%;
    font-weight: 500;
}

p {
    font-family: "manrope";
    font-weight: 500;
    font-size: 1.6rem;
}

a {
    font-family: "manrope";
    font-weight: 500;
    font-size: 1.6rem;
    color: #fff;
    text-decoration: none;
}

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

button {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 2.4rem;
    border-radius: 10rem;
    font-family: "manrope";
    font-weight: 500;
    font-size: 1.6rem;
    border: 0;
    cursor: pointer;
    height: fit-content;
}

.btn{
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 2.4rem;
    border-radius: 10rem;
    font-family: "manrope";
    font-weight: 500;
    font-size: 1.6rem;
    border: 0;
    cursor: pointer;
    height: fit-content;
    width: fit-content 
}

.primary-btn {
    background: linear-gradient(0deg, #b61a09 -86.4%, #ff4500);
    color: #fff;
}

.primary-btn-xl {
    padding: 2rem 6.4rem;
    background: var(--brand-color);
    color: #fff;
    font-size: 1.8rem;
}

.secondary-btn {
    background-color: var(--primary-darkblue);
    color: #fff;
}

.outline-btn{
    border: 1px solid var(--text-light-white);
    background: transparent;
    color: var(--text-white);
}

.cream-btn{
    background-color: var(--cream-color);
}

.w-90 {
    width: 90%;
}

.w-80 {
    width: 80%;
}

.w-70 {
    width: 70%;
}

.w-60 {
    width: 60%;
}

.w-50 {
    width: 50%;
}

.w-40 {
    width: 40%;
}

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

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

.mb-12{
    margin-bottom: 1.2rem;
}

.mb-16 {
    margin-bottom: 1.6rem;
}

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

.mb-24 {
    margin-bottom: 2.4rem;
}

.mb-32{
    margin-bottom: 3.2rem
}

.mb-36 {
    margin-bottom: 3.6rem;
}

.mb-48{
    margin-bottom: 4.8rem;
}

.mb-64 {
    margin-bottom: 6.4rem;
}

.mb-84{
    margin-bottom: 8.4rem;
}

.ft-12{
    font-size: 1.2rem;
}

.ft-18 {
    font-size: 1.8rem;
}

.ft-20 {
    font-size: 2rem;
}

.ft-28{
    font-size: 2.8rem;
}

.ft-36{
    font-size: 3.6rem;
}

.fw-400{
    font-weight: 400;
}

.fw-500{
    font-weight: 500;
}

.o-8{
    opacity: 0.8;
}