/* =========================================
FILE: global.css
========================================= */

body{
    background:var(--primary-black);
}

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

.container{
    width:90%;
    max-width:var(--container-width);
    margin:auto;
}

/* =========================================
SECTIONS
========================================= */

section{
    position:relative;
    padding:100px 0;
}

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

.section-top{
    text-align:center;
    max-width:760px;
    margin:0 auto 70px;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:42px;
    padding:0 24px;

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

    background:rgba(255,45,45,0.08);
    border:1px solid rgba(255,45,45,0.15);

    color:var(--primary-red);

    font-size:var(--fs-14);
    font-weight:var(--fw-600);

    margin-bottom:20px;
}

.section-title{
    color:var(--primary-white);
    margin-bottom:20px;
}

.section-desc{
    color:var(--text-gray);
}

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

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

/* =========================================
COMMON CARD
========================================= */

.common-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-24);
    transition:var(--transition);
}

.common-card:hover{
    transform:translateY(-8px);
}

/* =========================================
COMMON BUTTON
========================================= */

.primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:56px;
    padding:0 34px;

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

    background:var(--primary-gradient);

    color:var(--primary-white);

    font-size:var(--fs-14);
    font-weight:var(--fw-600);

    transition:var(--transition);
}

.primary-btn:hover{
    transform:translateY(-3px);
}

.secondary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:56px;
    padding:0 34px;

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

    border:1px solid rgba(255,255,255,0.1);

    color:var(--primary-white);

    font-size:var(--fs-14);
    font-weight:var(--fw-600);

    transition:var(--transition);
}

.secondary-btn:hover{
    background:var(--primary-white);
    color:var(--primary-black);
}