/*==========================================================
    WHY CHOOSE KSHARASUTRA — CARDS SECTION
    All classes prefixed ksw- to stay unique from any other
    "why" section already on the site (no shared class names).
    Theme: white background, green accents, black headings,
    grey supporting text.
==========================================================*/

.ksw-section,
.ksw-section *{

    box-sizing:border-box;

}

.ksw-section{

    background:#ffffff;

    padding:90px 24px;

    font-family:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif;

}

.ksw-inner{

    max-width:1180px;

    margin:0 auto;

}

/*==========================================================
    HEADER ROW
==========================================================*/

.ksw-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:44px;

}

.ksw-icon{

    flex-shrink:0;

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    color:#ffffff;

    background:linear-gradient(135deg,#1A8E4B,#46BE69);

    box-shadow:0 12px 28px rgba(26,142,75,.25);

}

.ksw-title{

    margin:0 0 4px;

    font-size:26px;

    font-weight:800;

    color:#000000;

    line-height:1.2;

}

.ksw-subtitle{

    font-size:15px;

    color:#667085;

}

/*==========================================================
    CARD GRID
    Base state = largest screens (no media query needed):
    6 cards per row
==========================================================*/

.ksw-grid{

    display:grid;

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

    gap:16px;

    margin-bottom:36px;

}

.ksw-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    text-align:center;

    background:#ffffff;

    border:1px solid rgba(26,142,75,.14);

    border-radius:18px;

    padding:24px 14px;

    box-shadow:0 10px 26px rgba(16,24,40,.05);

    transition:.3s ease;

}

.ksw-card:hover{

    transform:translateY(-6px);

    border-color:rgba(26,142,75,.35);

    box-shadow:0 18px 36px rgba(26,142,75,.14);

}

.ksw-card i{

    font-size:24px;

    color:#1A8E4B;

}

.ksw-card span{

    font-size:14px;

    font-weight:600;

    color:#1F2937;

    line-height:1.4;

}

/*==========================================================
    LINK
==========================================================*/

.ksw-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:16px;

    font-weight:700;

    color:#1A8E4B;

    text-decoration:none;

}

.ksw-link i{

    transition:.3s ease;

}

.ksw-link:hover i{

    transform:translateX(5px);

}

/*==========================================================
    RESPONSIVE LADDER
    Column count steps: 6 → 5 → 4 → 2
    Text/icon sizes shrink alongside, same ladder used
    across the rest of the site (1200 → 900/768 → 600 → 360)
==========================================================*/

/* 1200px and below — large laptops / small desktops:
   drop from 6 to 5 cards per row */

@media (max-width:1200px){

    .ksw-grid{

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

    }

}

/* 900px and below — tablets landscape:
   drop from 5 to 4 cards per row */

@media (max-width:900px){

    .ksw-grid{

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

    }

}

/* 768px and below — tablets portrait:
   grid stays at 4, just tighten section padding and
   scale down the header text/icon a touch */

@media (max-width:768px){

    .ksw-section{

        padding:64px 20px;

    }

    .ksw-title{

        font-size:22px;

    }

    .ksw-icon{

        width:56px;

        height:56px;

        font-size:22px;

    }

}

/* 600px and below — phones:
   final column drop to 2 per row, everything scales
   down together (header gap, title, subtitle, card
   padding, icon size, card text) */

@media (max-width:600px){

    .ksw-grid{

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

        gap:12px;

    }

    .ksw-header{

        gap:14px;

        margin-bottom:32px;

    }

    .ksw-title{

        font-size:19px;

    }

    .ksw-subtitle{

        font-size:13px;

    }

    .ksw-card{

        padding:18px 10px;

    }

    .ksw-card i{

        font-size:20px;

    }

    .ksw-card span{

        font-size:13px;

    }
}

/* 360px and below — smallest phones:
   shrink the icon circle and heading further so
   nothing feels oversized on a narrow screen */

@media (max-width:360px){

    .ksw-icon{

        width:48px;

        height:48px;

        font-size:18px;

        border-radius:14px;

    }

    .ksw-title{

        font-size:17px;

    }

}