/* =========================================================
YD COMMERCIAL CLEANING
WHY CHOOSE US COMPONENT
========================================================= */

.yd-why-choose-section {
position: relative;
width: 100%;
padding: 80px 0;
background: #ffffff;
}

.yd-why-choose-section .container {
width: min(1120px, calc(100% - 32px));
margin: 0 auto;
}

/* =========================================================
SECTION HEADING
========================================================= */

.yd-why-choose-section .section-title {
width: 100%;
max-width: 780px;
margin: 0 auto 50px;
text-align: center;
}

.yd-why-choose-eyebrow {
display: inline-block;
margin-bottom: 10px;


font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
line-height: 1.4;
text-transform: uppercase;

color: #2563eb;


}

.yd-why-choose-section .section-title h2 {
margin: 0 0 14px;


font-size: clamp(28px, 4vw, 42px);
line-height: 1.15;
font-weight: 800;

color: #0f172a;


}

.yd-why-choose-section .section-title p {
margin: 0;


font-size: 16px;
line-height: 1.75;

color: #64748b;


}

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

.yd-why-choose-grid {
width: 100%;


display: grid;

grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));

gap: 24px;


}

/* =========================================================
CARD
========================================================= */

.yd-why-choose-card {
position: relative;


padding: 30px;

border: 1px solid rgba(15, 23, 42, .08);
border-radius: 16px;

background: #ffffff;

box-shadow:
    0 8px 30px rgba(15, 23, 42, .05);

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


}

.yd-why-choose-card:hover {
transform: translateY(-4px);


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

box-shadow:
    0 18px 45px rgba(15, 23, 42, .10);


}

/* =========================================================
ICON
========================================================= */

.yd-why-choose-icon {
width: 48px;
height: 48px;


display: flex;
align-items: center;
justify-content: center;

margin-bottom: 18px;

border-radius: 12px;

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

font-size: 23px;
line-height: 1;


}

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

.yd-why-choose-card h3,
.yd-why-choose-card h4 {
margin: 0 0 10px;


font-size: 18px;
line-height: 1.4;
font-weight: 800;

color: #0f172a;


}

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

.yd-why-choose-card p {
margin: 0;


font-size: 14px;
line-height: 1.75;

color: #64748b;


}

/* =========================================================
FEATURED CARD
========================================================= */

.yd-why-choose-card.featured {
border-color: rgba(37, 99, 235, .22);
}

/* =========================================================
FOCUS ACCESSIBILITY
========================================================= */

.yd-why-choose-card:focus-within {
outline: 3px solid rgba(37, 99, 235, .16);
outline-offset: 3px;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {


.yd-why-choose-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 640px) {


.yd-why-choose-section {
    padding: 54px 0;
}

.yd-why-choose-section .container {
    width: min(calc(100% - 24px), 1120px);
}

.yd-why-choose-section .section-title {
    margin-bottom: 30px;
}

.yd-why-choose-eyebrow {
    font-size: 11px;
}

.yd-why-choose-section .section-title h2 {
    font-size: 29px;
}

.yd-why-choose-section .section-title p {
    font-size: 14px;
    line-height: 1.65;
}

.yd-why-choose-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

.yd-why-choose-card {
    padding: 24px;
}

.yd-why-choose-card h3,
.yd-why-choose-card h4 {
    font-size: 17px;
}

.yd-why-choose-card p {
    font-size: 14px;
    line-height: 1.7;
}


}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


.yd-why-choose-card {
    transition: none;
}


}