@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;700&display=swap');

:root {
    --principal00: #337DAF;
    --principal01: #005C9B;
    --principal02: #00406D;
    --secundaria00: #ED9245;
    --secundaria01: #E87717;
    --secundaria02: #D16B15;
    --preto00: #454849;
    --preto01: #2E3031;
    --preto02: #171818;
    --cinza00: #F0F5F9;
    --cinza01: #E6EFF5;
    --cinza02: #CFD7DD;
    --cinza03: #5C6062;
}

/* Types */
.heading1 {
    font-size: 50px;
    line-height: 56px;
    font-weight: 700;
}

.heading2 {
    font-size: 32px;
    line-height: 42px;
    font-weight: 500;
}

.heading3 {
    font-size: 20px;
    line-height: 20px;
    font-weight: 500;
}

.text1 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.text1-bold {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.text2 {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}

.text3 {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
}

.text1-medium {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.text2-medium {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
}

.text3-medium {
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
}

/* Colors */
.principal00 {
    color: #337DAF;
}
.principal01 {
    color: #005C9B;
}
.principal02 {
    color: #00406D;
}
.secundaria00 {
    color: #ED9245;
} 
.secundaria01 {
    color: #E87717;
} 
.secundaria02 {
    color: #D16B15;
} 
.preto00{
    color: #454849;
} 
.preto01{
    color: #2E3031;
} 
.preto02{
    color: #171818;
} 
.cinza00{
    color: #F0F5F9;
} 
.cinza01{
    color: #E6EFF5;
} 
.cinza02{
    color: #CFD7DD;
} 
.cinza03{
    color: #5C6062;
}

/* Backgrounds */
.bg-cinza00 {
    background-color: var(--cinza00);
}

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

.bg-principal01 {
    background-color: var(--principal01);
    padding: 72px 0;
}

/* Container */
.container-fluid {
    width: 100%;
    position: relative;
}

.container {
    width: 1100px;
    margin: 0 auto;
    position: relative;
}

/* Grids */

.grid1 {
    display: grid;
    grid-gap: 42px;
    grid-template-columns: 1fr;
    padding: 120px 0;
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 120px;
    padding: 120px 0;
}

.grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 120px;
    align-items: flex-start;
    justify-content: flex-end;
}

/* Text Columns */

.title-text-column {
    display: flex;
    flex-flow: column;
    gap: 32px;
}

.title-button-wrapper {
    display: grid;
    grid-template-columns: 40% 20%;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 72px;
}

.text-column {
    display: flex;
    flex-flow: column;
    gap: 4px;
}

/* Buttons */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--secundaria01);
    height: 56px;
    font-weight: 500 !important;
    min-width: 150px;
    max-width: 100%;
    border-radius: 4px;
    transition: all 0.3s;
    letter-spacing: 0.01em;
}
.btn:hover {
    background: var(--secundaria00);
}
.btn-border {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--cinza00);
    height: 56px;
    font-weight: 500 !important;
    min-width: 150px;
    max-width: 100%;
    border-radius: 4px;
    transition: all 0.3s;
    letter-spacing: 0.01em;
}
.btn-border:hover {
    background: var(--cinza00);
    color: var(--preto02);
}

/* Width`s */
.w-10 {
    width: 10%;
}
.w-20 {
    width: 20%;
}
.w-30 {
    width: 30%;
}
.w-40 {
    width: 40%;
}
.w-50 {
    width: 50%;
}
.w-60 {
    width: 60%;
}
.w-70 {
    width: 70%;
}
.w-80 {
    width: 80%;
}
.w-90 {
    width: 90%;
}

.center {
    margin: 0 auto;
}

/* Margins */

.mb-32 {
    margin-bottom: 32px;
}