/* ==========================================================
   WHY ALPHA
========================================================== */

.why{

    position:relative;

}

.why-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.why-card{

    position:relative;

    padding:2.5rem;

    border-radius:24px;

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

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

    backdrop-filter:blur(20px);

    transition:.35s;

    overflow:hidden;

}

.why-card:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,235,.35);

    box-shadow:

        0 25px 60px rgba(0,0,0,.25);

}

.why-icon{

    width:72px;

    height:72px;

    margin-bottom:1.5rem;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(37,99,235,.10);

}

.why-icon img{

    width:40px;

    height:40px;

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}

.why-number{

    position:absolute;

    top:28px;

    left:28px;

    font-size:3rem;

    font-weight:800;

    color:rgba(255,255,255,.06);

    pointer-events:none;

}

.why-card h3{

    margin-bottom:1rem;

    font-size:1.5rem;

    font-weight:700;

}

.why-card p{

    color:var(--text-secondary);

    line-height:2;

}

.why-footer{

    margin-top:5rem;

}

.why-quote{

    padding:2.5rem;

    border-radius:24px;

    text-align:center;

    background:linear-gradient(

        135deg,

        rgba(37,99,235,.12),

        rgba(6,182,212,.08)

    );

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

    font-size:1.25rem;

    line-height:2;

}

.why-quote strong{

    color:var(--color-primary);

}

@media(max-width:992px){

    .why-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .why-card{

        padding:2rem;

    }

    .why-number{

        font-size:2.2rem;

    }

}