/**
 * --------------------------------------------------------
 * Module: Why Choose Us
 * File: tk-whychoose.css
 * --------------------------------------------------------
 */

/* ======================================================
   Section
====================================================== */

.tkwhychoose{
    padding:70px 0;
    background:#fff;
}

/* ======================================================
   Header
====================================================== */

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

.tkwhychoose-heading{
    margin:0;
    font-size:34px;
    font-weight:700;
    line-height:1.3;
    color:#111827;
}

.tkwhychoose-subheading{
    margin:18px 0 0;
    font-size:17px;
    line-height:1.8;
    color:#6B7280;
}

/* ======================================================
   Grid
====================================================== */

.tkwhychoose-grid{

    display:grid;

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

    gap:28px;

}

/* ======================================================
   Card
====================================================== */

.tkwhychoose-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    height:180px;

    padding:36px 24px;

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:18px;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

/* Hover */

.tkwhychoose-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary-color);

    box-shadow:
        0 16px 40px rgba(0,0,0,.08);

}

/* ======================================================
   Icon
====================================================== */

.tkwhychoose-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    background:#F0FDF4;

    border-radius:50%;

    margin-bottom:22px;

    transition:
        transform .3s ease,
        background .3s ease;

}

.tkwhychoose-card:hover .tkwhychoose-icon{

    transform:scale(1.08);

    background:#DCFCE7;

}

/* ======================================================
   Title
====================================================== */

.tkwhychoose-title{

    margin:0;

    font-size:20px;

    font-weight:600;

    line-height:1.5;

    color:#111827;

}

/* ======================================================
   Tablet
====================================================== */

@media (max-width:991px){

    .tkwhychoose{

        padding:60px 0;

    }

    .tkwhychoose-grid{

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

    }

}

/* ======================================================
   Mobile
====================================================== */

@media (max-width:767px){

    .tkwhychoose{

        padding:50px 0;

    }

    .tkwhychoose-heading{

        font-size:28px;

    }

    .tkwhychoose-subheading{

        font-size:16px;

    }

    .tkwhychoose-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .tkwhychoose-card{

        min-height:150px;

        padding:28px 20px;

    }

    .tkwhychoose-icon{

        width:64px;

        height:64px;

        font-size:30px;

        margin-bottom:18px;
        box-shadow:0 10px 24px rgba(22,163,74,.18);

    }

    .tkwhychoose-title{

        font-size:18px;

    }

}