/* Variaveis globais */
:root {
    --space-none: 0;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-xsmall: 0.8rem;
    --space-small: 0.9rem;
    --space-medium: 1rem;
    --space-large: 24px;
    --space-xlarge: 2rem;
    --space-2xlarge: 3rem;
    --space-3xlarge: 4rem;
    --space-4xlarge: 7rem;
    --space-5xlarge: 8rem;

    --font-family-global: 'Open Sans', sans-serif;
    --font-family-brand: 'Oxanium', sans-serif;

    --font-size-xsmall: 0.7rem;
    --font-size-small: 0.8rem;
    --font-size-regular: 0.9rem;
    --font-size-regular2: 1rem;
    --font-size-medium: 1.1rem;
    --font-size-large: 2rem;
    --font-size-2xlarge: 3rem;
    --font-size-3xlarge: 4rem;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-small: 100%;
    --line-height-regular: 120%;
    --line-height-medium: 140%;
    --line-height-large: 150%;

    --letter-spacing-small: 0.01rem;
    --letter-spacing-regular: 0.03rem;
    --letter-spacing-medium: 0.06rem;
    --letter-spacing-large: 0.15rem;

    --border-radius-pill: 500px;
    --border-radius-xsmall: 8px;
    --border-radius-small: 12px;
    --border-radius-medium: 16px;
    --border-radius-large: 20px;
    --border-radius-xlarge: 60px;

    --color-white: rgba(255, 255, 255);
    --color-white-1: rgba(255, 255, 255, .1);
    --color-white-2: rgba(255, 255, 255, .15);
    --color-white-3: rgba(255, 255, 255, .3);
    --color-white-5: rgba(255, 255, 255, .5);
    --color-white-7: rgba(255, 255, 255, .7);
    --color-white-8: rgba(255, 255, 255, .8);
    --color-white-9: rgba(255, 255, 255, .9);

    --color-brand-green: #05C5F2;
    --color-brand-green-1: #048AA9;
    --color-brand-green-2: #049EC2;
    --color-brand-green-3: #04A7CE;
    --color-brand-green-4: #05B1DA;
    --color-brand-green-5: #05C5F2;
    --color-brand-green-6: #2BCEF4;
    --color-brand-green-7: #44D3F5;
    --color-brand-green-8: #69DCF7;
    --color-brand-green-9: #9BE8FA;

    --color-brand-blue: #0583F2;
    --color-brand-blue-1: #014F91;
    --color-brand-blue-2: #015CA9;
    --color-brand-blue-3: #0269C2;
    --color-brand-blue-4: #0276DA;
    --color-brand-blue-5: #0583F2;
    --color-brand-blue-6: #1B8FF3;
    --color-brand-blue-7: #359CF5;
    --color-brand-blue-8: #4EA8F6;
    --color-brand-blue-9: #9ACDFA;

    --color-brand-1-dark: #023461;
    --color-brand-1-light: #69B5F7;
    --color-brand-1-lighter: #CDE6FC;

    --color-brand-2-darker: #024F61;
    --color-brand-2-dark: #047691;
    --color-brand-2-light: #9BE8FB;

    --color-dark-1: rgb(0, 6, 24);
    --color-dark-2: #000822;
    --color-dark-3: #000929;
    --color-dark-4: #000B30;
    --color-dark-5: rgb(13, 23, 58);
    --color-dark-6: #1A2345;
    --color-dark-7: #26304F;

    --color-dark-5-no-opacity: rgba(13, 23, 58, .0);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-style: none;
    font-family: var(--font-family-global), sans-serif;
}

/* PADRÃO */
.btn {
    padding: var(--space-small) var(--space-large);
    border-radius: var(--border-radius-small);
    text-decoration: none;
    display: inline-block;
    transition: .3s;
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    line-height: var(--line-height-regular);
    text-align: center;
}

.btn.btn-primary {
    background-color: var(--color-brand-green);
    color: var(--color-dark-1);
}

.btn.btn-primary:hover {
    background-color: var(--color-brand-2-light);
}

.btn.small {
    padding: var(--space-12) var(--space-large);
}

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

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

.padding-bottom-small {
    padding-bottom: var(--space-small);
}

.padding-bottom-medium {
    padding-bottom: var(--space-medium);
}

.padding-bottom-large {
    padding-bottom: var(--space-large);
}

.padding-bottom-xlarge {
    padding-bottom: var(--space-2xlarge);
}

.margin-right {
    margin-right: var(--space-small);
}

h1 {
    font-family: var(--font-family-brand), sans-serif;
    font-size: var(--font-size-3xlarge);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-small);
    letter-spacing: var(--letter-spacing-large);
}

h2 {
    font-family: var(--font-family-brand), sans-serif;
    font-size: var(--font-size-2xlarge);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-small);
    letter-spacing: var(--letter-spacing-medium);
}

h3 {
    font-family: var(--font-family-brand), sans-serif;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-small);
    letter-spacing: var(--letter-spacing-medium);
}

h4 {
    font-family: var(--font-family-global), sans-serif;
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-regular);
    letter-spacing: var(--letter-spacing-medium);
}

p {
    font-family: var(--font-family-global), sans-serif;
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-regular);
    color: var(--color-white-7);
    letter-spacing: 0.2px;
}

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

a {
    text-decoration: none;
}



/* RESPONSIVO */
@media (max-width: 768px) {

    h2 {
        font-size: var(--font-size-large);
    }


    h4 {
        font-size: var(--font-size-regular);
        line-height: var(--line-height-medium);
    }
}