/* =========================================================
|--------------------------------------------------------------------------
| ARQUIVO:
| /public/assets/css/global/base.css
|--------------------------------------------------------------------------
| BASE GLOBAL
|--------------------------------------------------------------------------
========================================================= */

body
{
    background: var(--color-dark);

    color: var(--color-light);

    font-family: var(--font-primary);

    font-size: var(--font-size-md);

    font-weight: var(--font-weight-regular);

    line-height: 1.6;

    overflow-x: hidden;
}


/* =========================================================
CONTAINER
========================================================= */

.container
{
    width: 100%;

    max-width: var(--container-width);

    margin: 0 auto;

    padding-left: var(--container-padding);

    padding-right: var(--container-padding);
}


/* =========================================================
SECTION
========================================================= */

section
{
    position: relative;

    padding-top: var(--spacing-3xl);

    padding-bottom: var(--spacing-3xl);
}


/* =========================================================
TITLES
========================================================= */

.section-title
{
    margin-bottom: var(--spacing-2xl);
}

.section-title small
{
    display: inline-block;

    margin-bottom: var(--spacing-sm);

    color: var(--color-accent);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    letter-spacing: 2px;

    text-transform: uppercase;
}

.section-title h2
{
    font-size: var(--font-size-3xl);

    font-weight: var(--font-weight-bold);

    color: var(--color-white);

    line-height: 1.2;
}


/* =========================================================
BUTTONS
========================================================= */

.btn
{
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 0 28px;

    border-radius: var(--radius-full);

    font-weight: var(--font-weight-medium);

    transition: var(--transition-normal);
}

.btn-primary
{
    background: var(--color-accent);

    color: var(--color-white);
}

.btn-primary:hover
{
    background: var(--color-accent-hover);

    transform: translateY(-2px);
}

.btn-outline
{
    border: 1px solid rgba(255,255,255,.12);

    color: var(--color-white);
}

.btn-outline:hover
{
    background: rgba(255,255,255,.05);
}


/* =========================================================
TEXTS
========================================================= */

p
{
    color: var(--color-gray-300);
}


/* =========================================================
GRID
========================================================= */

.grid
{
    display: grid;

    gap: 30px;
}


/* =========================================================
CARDS
========================================================= */

.card
{
    background: var(--color-secondary);

    border: 1px solid rgba(255,255,255,.05);

    border-radius: var(--radius-lg);

    padding: 30px;

    transition: var(--transition-normal);
}

.card:hover
{
    transform: translateY(-6px);

    border-color: rgba(255,255,255,.12);
}

.testimonials-section {
    padding: 80px 0;
}

.testimonials-image img {
    width: 100%;
    display: block;
    border-radius: 24px;
}