/* ==========================================
   WHY GAMEVIA
========================================== */

.why{

    padding:100px 0;

}

.why__header{

    max-width:700px;

    margin:0 auto 60px;

    text-align:center;

}

.why__badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    background:var(--secondary);

    color:#fff;

    border:var(--border);

    border-radius:999px;

    box-shadow:var(--shadow);

    font-weight:700;

    margin-bottom:22px;

}

.why__title{

    font-size:48px;

    font-weight:800;

    margin-bottom:18px;

}

.why__description{

    color:var(--gray);

    line-height:1.8;

    font-size:18px;

}

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

.why__grid{

    display:grid;

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

    gap:30px;

}

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

.why-card{

    background:#fff;

    border:var(--border);

    border-radius:32px;

    box-shadow:var(--shadow);

    padding:35px;

    transition:.3s ease;

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 16px 0 var(--dark);

}

/* ==========================================
   ICON
========================================== */

.why-card__icon{

    width:80px;

    height:80px;

    border-radius:24px;

    background:#f8f8ff;

    border:var(--border);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:24px;

}

.why-card__icon img{

    width:42px;

    height:42px;

    object-fit:contain;

    transition:.3s;

}

.why-card:hover .why-card__icon img{

    transform:scale(1.1);

}

/* ==========================================
   TEXT
========================================== */

.why-card h3{

    font-size:24px;

    margin-bottom:12px;

}

.why-card p{

    color:var(--gray);

    line-height:1.7;

}