/* ======================================================
   WHY BIZICARD
====================================================== */

.why-bizicard{

    padding-block:var(--space-2xl);
    position:relative;
    text-align:center;

}


/* ======================================================
   LAYOUT
====================================================== */

/* ======================================================
   WHY CONTENT
====================================================== */

.why-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.why-content .section-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:var(--space-s);

    margin-bottom:var(--space-xl);

    position:relative;

}

.why-content .hero-badge{

    margin-bottom:var(--space-xs);

}


/* ======================================================
   TITLE
====================================================== */

.why-content .section-title{

    max-width:22ch;

    font-size:clamp(2rem,3vw,3rem);

    font-weight:500;

    line-height:1.2;

    letter-spacing:-0.02em;

}


/* ======================================================
   DESCRIPTION
====================================================== */

.why-content .section-description{

    max-width:42rem;

    font-size:1.1rem;

    line-height:1.6;

    margin:0;

}


/* ======================================================
   VIDEO
====================================================== */
/* 
.why-video{

    width:min(100%, 900px);

    margin-inline:auto;

    margin-bottom: 1rem;

} */

/* .why-video video{

    display:block;

    width:100%;

    aspect-ratio:21/9;

    object-fit:cover;

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

} */


/* ======================================================
   VIDEO CAPTION
====================================================== */
/* 
.why-video-caption{

    margin-top:var(--space-s);

    text-align:center;

    font-weight:600;

    color:var(--brand-primary);

} */


/* ======================================================
   METRICS
====================================================== */

.why-stats{

    display:grid;

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

    gap:var(--space-l);


}

.why-stats .card{

    min-width:0;

}

.metric{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:.25rem;

}

.metric h3{

    margin:0;

    color:var(--brand-primary);

    font-size:clamp(2rem,3vw,2.75rem);

    font-weight:700;

    line-height:1;

}

.metric h4{

    margin:0;

    font-size:1.25rem;

    font-weight:600;

    color:var(--brand-primary);

}

.metric p{

    margin:0;

    color:#667085;

    line-height:1.5;

    text-align:center;

}

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

.why-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 420px), 1fr)
        );

    gap: var(--space-2xl);

    padding-top: 3rem;
    align-items:center;
}

/* ======================================================
   WHY VIDEO
====================================================== */

.why-video{

    width:min(100%,900px);

    margin-inline:auto;

    margin-bottom:var(--space-xl);

}

.why-video .card{

    padding:0;

    overflow:hidden;

}

.why-video-player{

    display:block;

    width:100%;

    height:auto;

    background:#000;

}

.why-video-footer{

    padding:var(--space-l);

    text-align:center;

}

.why-video-footer h3{

    margin:0 0 var(--space-s);

    color:var(--brand-primary);

    font-size:1.5rem;

    font-weight:600;

}

.why-video-footer p{

    margin:0;

    max-width:60ch;

    margin-inline:auto;

    line-height:1.6;

    color:var(--color-text-muted);

}