:root {
    --blue: rgb(50,53,148);
    --blueDark: rgb(43, 46, 129);
    --grayLight: rgb(204,204,204);
    --grayRegular: rgb(68,68,68);
    --grayDark: rgb(51,51,51);
    --white: rgb(255,255,255);
    --black: rgb(0,0,0);
}

*{
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 300;
    color: var(--black);
}

h1{
    font-size: 2.25rem;
    line-height: 1.25;
    font-weight: 600;
    margin-bottom: 2rem;
}

h2{
    font-size: 2.500rem;
    line-height: 1.3;
    font-weight: 300;
    margin-bottom: 1.000rem;
    color: var(--blue);
}

h3,
h3 span{
    font-size: 1.500rem;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 1.000rem;
    color: var(--blue);
}

h4,
h4 span{
    font-size: 1.125rem;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 1.000rem;
}

p{
    font-size: 1.125rem;
    line-height: 1.5;
}

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

.bgBlue *{
    color: var(--white) !important;
}

button,
button:hover{
    padding: 15px 50px;
    margin-top: 30px;
    border-radius: 5px;
    font-size: 1.250rem !important;
    line-height: 1.500rem !important;
    font-weight: 500 !important;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 0px 12px rgb(0 0 0 / 35%);
    display: inline-block;
    background-color: var(--blue) !important;
    border: var(--blue) !important;
    color: var(--white) !important;
}

.btnRegular{
    padding: 5px 20px !important;
}

.btnWhite,
.btnWhite:hover{
    padding: 10px 50px;
    margin-top: 20px;
    border-radius: 5px;
    font-size: 1.250rem !important;
    line-height: 1.500rem !important;
    font-weight: 500 !important;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 0px 12px rgb(0 0 0 / 35%);
    display: block;
    width: 100%;
    background-color: var(--white) !important;
    border: var(--white) !important;
    color: var(--blue) !important;
}