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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 32px;

    border:none;

    border-radius:var(--radius);

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

.btn-primary{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-outline{

    background:transparent;

    border:1px solid var(--border);

    color:var(--text);

}

.btn-outline:hover{

    border-color:var(--primary);

    transform:translateY(-3px);

}

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

.card{

    background:rgba(255,255,255,.04);

    border:1px solid var(--border);

    border-radius:var(--radius);

    backdrop-filter:blur(var(--blur));

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:var(--shadow-lg);

}

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

.section-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-tag{

    display:inline-block;

    padding:10px 18px;

    margin-bottom:20px;

    border-radius:999px;

    background:rgba(108,60,255,.12);

    border:1px solid rgba(108,60,255,.25);

    color:var(--secondary);

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.section-heading h2{

    margin-bottom:20px;

}

.section-heading p{

    max-width:680px;

    margin:0 auto;

}

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

.grid{

    display:grid;

    gap:30px;

}

.grid-2{

    grid-template-columns:repeat(2,1fr);

}

.grid-3{

    grid-template-columns:repeat(3,1fr);

}

.grid-4{

    grid-template-columns:repeat(4,1fr);

}

@media(max-width:992px){

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

}

/*==================================================
GLASS
==================================================*/

.glass{

    background:rgba(255,255,255,.04);

    border:1px solid var(--border);

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

}