.material-symbols-outlined {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

:root {
    /* Cores */
    --cor-darkblue: #0c233c;
    --cor-kpmgblue: #00338d;
    --cor-cobalt: #1e49e2;
    --cor-lightblue: #aceaff;
    --cor-pacificblue: #00b8f5;
    --cor-mediumblue: #005eb8;
    --cor-green: #00a3a1;
    --cor-purple: #7213ea;
    --cor-pink: #fd349c;
    --cor-red: #dc3545;
    --cor-fonte: #333333;
    --cor-white: #ffffff;
    --cor-grey-bg: #f5f6fa;

    /* Fontes */
    --font-sans-condensed: "Open Sans Condensed", sans-serif;
    --font-sans: "Open Sans", sans-serif;

    /* Tamanhos de fonte KPMG 
    --font-size-h1: 4.2rem;
    --font-size-h2: 3.8rem;
    --font-size-h3: 3.2rem;
    --font-size-h4: 2.2rem;
    --font-size-p: 1.6rem; */

    /* Tamanhos de fonte */
    --font-size-h1: 2.2rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.8rem;
    --font-size-h4: 1.25rem;
    --font-size-p: 1rem;

    /* Altura da linha */
    --line-1-3: 1.3;
    --line-1-4: 1.4;
    --line-1-5: 1.5;

    /* Peso da fonte */
    --font-weight-bolder: bolder;
    --font-weight-600: 600;
    --font-weight-400: 400;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.estrutura_100 {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative; 
}

.estrutura_100 h1,
.estrutura_100 h2,
.estrutura_100 h3,
.estrutura_100 h4,
.estrutura_100 p {
    margin: 0;
    padding: 0;
}

.estrutura_100 h1,
.estrutura_100 h2,
.estrutura_100 h3 {
    font-family: var(--font-sans-condensed);
    line-height: var(--line-1-3);
    font-weight: var(--font-weight-bolder);
}

.estrutura_100 h1 {
    font-size: var(--font-size-h1);
}

.estrutura_100 h2 {
    font-size: var(--font-size-h2);
}

.estrutura_100 h3 {
    font-size: var(--font-size-h3);
}

.estrutura_100 h4,
.estrutura_100 p {
    font-family: var(--font-sans);
}

.estrutura_100 h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-1-4);
    font-weight: var(--font-weight-600);
}

.estrutura_100 p {
    font-size: var(--font-size-p);
    line-height: var(--line-1-5);
    font-weight: var(--font-weight-400);
}

/* estrutura 1100 */

.estrutura_1100 {
    max-width: 1100px;
    margin: auto;
}

.estrutura_1100 a {
    color: inherit; 
}


.estrutura_padding {
    padding: 6rem 0;
}

.estrutura_flex {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* background */

.bg_darkblue {
    background-color: var(--cor-darkblue); 
}

.bg_kpmgblue {
    background-color: var(--cor-kpmgblue); 
}

.bg_cobalt {
    background-color: var(--cor-cobalt); 
}

.bg_purple {
    background-color: var(--cor-purple); 
} 

.bg_lightblue {
    background-color: var(--cor-lightblue); 
}

.bg_white {
    background-color: var(--cor-white); 
}

.bg_grey    {
    background-color: var(--cor-grey-bg); 
}

.bg_linear_cobalt_purple {
    background: linear-gradient(90deg, rgba(30, 73, 226, 1) 0%, rgba(114, 19, 234, 1) 70%, rgba(114, 19, 234, 1) 100%);
}  

/* text color */

.text_darkblue {
    color: var(--cor-darkblue); 
}

.text_kpmgblue {
    color: var(--cor-kpmgblue); 
}

.text_cobalt {
    color: var(--cor-cobalt); 
}

.text_white {
    color: var(--cor-white); 
}

.text_center_with_background {
    width: fit-content;
    display: inline-block;  
    margin: auto;
    padding: 5px 10px;
    text-align: center;
}

.text_center {  
    margin: auto; 
    text-align: center;
}

/* tablet */
@media only screen and (min-width: 641px) and (max-width: 1099px) {

    .estrutura_1100 {
        max-width: 100%;
        margin: 0 1rem;
    }

    .estrutura_padding {
        padding: 3rem 0;
    }

    .estrutura_flex {
        gap: 2rem;
    }

}


/* mobile */
@media only screen and (max-width: 640px) {

    .estrutura_1100 {
        max-width: 100%;
        margin: 0 2rem;
    }

    .estrutura_padding {
        padding: 2.5rem 0;
    }

    .estrutura_flex {
        gap: 2rem;
    }

}