/* Font Faces */
@font-face {
    font-family: "Poppins Regular";
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
}
@font-face {
    font-family: "Poppins Bold";
    src: url(../fonts/Poppins/Poppins-Bold.ttf);
}
@font-face {
    font-family: "Poppins Light";
    src: url(../fonts/Poppins/Poppins-Light.ttf);
}
@font-face {
    font-family: "Trebuc";
    src: url(../fonts/TrebucMS/trebuc.ttf);
}


/* Variaveis */
:root{
    --main-color: #E30000;
    --secondary-color: #0E2F66;
    --tertiary-color: #f5f5f5;
    --text-color: #282828;
    --black-color: #000000;
    --white-color: #FFFFFF;
    --font-text: "Poppins Regular";
    --font-title: "Trebuc";
}

html {
    /* 1PX === 1REM */
    font-size: 62.5%;
    scroll-behavior: smooth;
    font-family: sans-serif;
}

body{
    overflow-x: hidden;
    background-color: #fafafa;
}

h1, h2, h3, h4, h4, h5, h6{
    font-family: var(--font-title);
}

h1{
    font-size: 4.6rem;
}
h2{
    font-size: 4rem;
}
h3{
    font-size: 3.2rem;
}
h4{
    font-size: 2.2rem;
}
h5{
    font-size: 1.8rem;
}
h6{
    font-size: 1.6rem;
}

p, input, textarea, label, span, li {
    font-family: var(--font-text);
    font-size: 1.6rem;
}


a{
    text-decoration: none;
    font-size: 1.6rem;
    font-family: var(--font-text);
    font-weight: 500;
}

button{
    font-size: 1.6rem;
    font-family: var(--font-text);
    font-weight: 500;
}

/* Classes */

.container{
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
}

.flex{
    display: flex;
}

.btn-1{
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    color: var(--white-color);
    padding: 1.2rem 5rem;
    border-radius: 0.5rem;
    width: fit-content;
    display: block;

    transition: all 0.3s ease-in-out;
}

.btn-1:hover{
    background-color: var(--white-color);
    color: var(--main-color);
}

.btn-2{
    background-color: var(--white-color);
    border: 1px solid var(--main-color);
    color: var(--main-color);
    padding: 1rem 4.2rem;
    border-radius: 0.5rem;
    width: fit-content;
    display: block;

    transition: all 0.3s ease-in-out;
}

.btn-2:hover{
    background-color: var(--main-color);
    color: var(--white-color);
}

.btn-3{
    color: var(--main-color);
    width: fit-content;
    display: block;

    transition: all 0.3s ease-in-out;
}

.btn-3:hover{
    text-decoration: underline;
    text-decoration-color: var(--main-color);
}