/* ===========================
   WHY FRANK
=========================== */

.why-section{
    background:#fff;
    padding:140px 0;
}

.why-header{
    max-width:1200px;
    margin:0 auto 80px;
    text-align:center;
}

.why-header h2{
    margin:0 0 24px;
    color:var(--blue-dark);
    font-size:clamp(44px,5vw,66px);
    line-height:1.1;
    white-space:nowrap;
}

.why-intro{
    max-width:1260px;
    margin:20px auto 90px;
    color:#475569;
    font-size:24px;
    line-height:1.6;
}

.why-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:90px;
    align-items:start;
}

.why-image{
    text-align:center;
}

.why-image img{
    width:100%;
    border-radius:22px;
    box-shadow:0 30px 80px rgba(3,20,47,.15);
}

.why-btn{
    display:inline-flex;
    justify-content:center;
    min-width:320px;
    margin-top:32px;
}

.why-content h2{
    margin:0 0 28px;
    color:var(--blue-dark);
    font-size:clamp(40px,4vw,60px);
    line-height:1.12;
    letter-spacing:-1.5px;
}

.why-lead{
    margin:0 0 38px;
    color:var(--text-soft);
    font-size:20px;
    line-height:1.8;
}

.why-lead strong{
    color:var(--blue-dark);
}

.why-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-columns:repeat(2,1fr);
    gap:22px 40px;
}

.why-list div{
    display:flex;
     align-items:flex-start;
    gap:14px;
    
    color:var(--blue-dark);
    font-size:17px;
    font-weight:600;
    line-height:1.5;
}

.why-list i{
    width:18px;
    height:18px;
    color:var(--blue);
    stroke-width:1.8;
    flex-shrink:0;
    margin-top:3px;
}

@media(max-width:1000px){
    .why-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .why-list{
        grid-template-columns:1fr;
    }
}

@media(max-width:760px){
    .why-header h2{
        white-space:normal;
    }
}