:root {
    /* Primary Colors */
    --why-color-primary-dark: #0b2f80;
    /* Dark blue for hero card background and titles */
    --why-color-primary-cyan: #00c9b3;
    /* Cyan for badges and accents */
    --why-color-primary-light-cyan: #e0f7f4;
    /* Light cyan for icon backgrounds */

    /* Text Colors */
    --why-color-text-dark: #0f2d52;
    /* Dark text for body content */
    --why-color-text-medium: #666666;
    /* Medium gray for descriptions */
    --why-color-text-light: #999999;
    /* Light gray for subtle text */

    /* Background Colors */
    --why-color-bg-white: #ffffff;
    /* White for card backgrounds */
    --why-color-bg-light: #ffffff;
    /* Light gray for section background */

    /* Spacing Variables */
    --why-spacing-section-desktop: 80px;
    /* Section padding top/bottom on desktop */
    --why-spacing-section-mobile: 60px;
    /* Section padding top/bottom on mobile */
    --why-spacing-card-gap: 20px;
    /* Gap between cards */
    --why-spacing-card-padding-desktop: 24px;
    /* Card padding on desktop */
    --why-spacing-card-padding-mobile: 20px;
    /* Card padding on mobile */
    --why-spacing-icon-margin: 14px;
    /* Icon bottom margin */

    /* Size Variables */
    --why-size-icon: 44px;
    /* Icon circle diameter */
    --why-size-border-radius-card: 12px;
    /* Card border radius */
    --why-size-border-radius-button: 6px;
    /* Button border radius */

    /* Effect Variables */
    --why-transition-duration: 0.3s;
    /* Standard transition duration */
    --why-shadow-default: 0 4px 20px rgba(0, 0, 0, 0.08);
    /* Default card shadow */
    --why-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    /* Hover card shadow */
}

/* ============================================
   Section Wrapper Styles
   ============================================ */

.why-choose-us-section {

    padding: var(--why-spacing-section-desktop) 0;
    position: relative;
    overflow: hidden;
}

/* ============================================
   Container and Spacing Styles
   ============================================ */

.why-choose-us-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header Area */
.why-choose-us-header {
    text-align: center;
    margin-bottom: 48px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   Section Header Styles
   ============================================ */

/* Eyebrow Badge */
.why-eyebrow-badge {
    display: inline-block;
    background-color: var(--why-color-primary-cyan);
    color: var(--why-color-bg-white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
}

/* Main Title */
.why-main-title {
    color: var(--why-color-primary-dark);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px 0;
    padding: 0;
}

/* Subtitle Paragraph */
.why-subtitle {
    color: var(--why-color-text-medium);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

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

.why-choose-us-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--why-spacing-card-gap);
    margin: 0;
    padding: 0;
}

/* ============================================
   Base Card Styles
   ============================================ */

.why-feature-card {
    background-color: var(--why-color-bg-white);
    border-radius: var(--why-size-border-radius-card);
    padding: var(--why-spacing-card-padding-desktop);
    box-shadow: var(--why-shadow-default);
    transition: transform var(--why-transition-duration) ease,
        box-shadow var(--why-transition-duration) ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ============================================
   Hero Card Grid Spanning
   ============================================ */

/* Hero card spans 2 columns on desktop (4-column grid)
   First row: Hero (2 cols) + 2 standard cards (1 col each) = 4 cols
   Second row: 4 standard cards (1 col each) = 4 cols */
.why-feature-card--hero {
    grid-column: span 2;
}

/* ============================================
   Hero Card Styles
   ============================================ */

/* Hero Card Background - Dark blue gradient */
.why-feature-card--hero {
    background: url('../assets/img/why-choose-us.webp') center/cover no-repeat;
    color: var(--why-color-bg-white);
    position: relative;
    overflow: hidden;
    min-height: auto;
}


.why-feature-card--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--theme-secondary);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.why-feature-card--hero>* {
    position: relative;
    z-index: 1;
}


/* Hover Line Animation for Hero Card - Top edge line that animates from left to right */
.why-feature-card--hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background-color: var(--why-color-primary-cyan);
    border-radius: var(--why-size-border-radius-card) var(--why-size-border-radius-card) 0 0;
    transition: width 0.6s ease;
    z-index: 2;
}

/* Animate line from left to right on hover for hero card */
.why-feature-card--hero:hover::before {
    width: 100%;
}

/* Hero Card Hover Effect - Lift and shadow increase */
.why-feature-card--hero:hover {
    transform: translateY(-8px);
    box-shadow: var(--why-shadow-hover);
}

/* Cyan Badge */
.why-hero-badge {
    background-color: var(--why-color-primary-cyan);
    color: var(--why-color-bg-white);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--why-color-primary-cyan);
    color: var(--why-color-bg-white);
    border-radius: var(--why-size-border-radius-button);
    transition: all var(--why-transition-duration) ease;
    align-self: flex-start;
}

/* Hero Icon */
.why-hero-icon {
    font-size: 2.5rem;
    color: var(--why-color-primary-cyan);
    margin-bottom: 16px;
    line-height: 1;
}

.why-hero-icon i {
    display: block;
}

/* Hero Title - White text */
.why-hero-title {
    color: var(--why-color-bg-white);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px 0;
    padding: 0;
}

/* Hero Description - White text */
.why-hero-description {
    color: var(--why-color-bg-white);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 16px 0;
    padding: 0;
    opacity: 0.95;
}

/* Hero Button */
.why-hero-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--why-color-primary-cyan);
    color: var(--why-color-bg-white);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 5px 15px;
border-radius:var(--why-size-border-radius-button);
    transition: all var(--why-transition-duration) ease;
    margin-top: auto;
    align-self: flex-start;
        border-radius: 20px;

}

/* Hero Button Hover Effect */
.why-hero-button:hover {
    background-color: #00b5a0;
    color: var(--why-color-bg-white);
    text-decoration: none;
    transform: translateX(2px);
    box-shadow: 0 4px 12px rgba(0, 201, 179, 0.3);
}

/* Hero Button Focus State - Keyboard Navigation */
.why-hero-button:focus {
    outline: 3px solid var(--why-color-primary-cyan);
    outline-offset: 3px;
    background-color: #00b5a0;
    color: var(--why-color-bg-white);
}

/* Hero Button Focus Visible (Modern browsers) */
.why-hero-button:focus-visible {
    outline: 3px solid var(--why-color-primary-cyan);
    outline-offset: 3px;
    background-color: #00b5a0;
}

/* Hero Button Arrow */
.why-hero-button-arrow {
    font-size: 0.85rem;
    transition: transform var(--why-transition-duration) ease;
}

/* Hero Button Arrow Slide on Hover and Focus */
.why-hero-button:hover .why-hero-button-arrow,
.why-hero-button:focus .why-hero-button-arrow {
    transform: translateX(4px);
}

/* ============================================
   Standard Card Styles
   ============================================ */

/* Standard Card - White background with shadow */
.why-feature-card--standard {
    background-color: var(--why-color-bg-white);
    box-shadow: var(--why-shadow-default);
    transition: transform var(--why-transition-duration) ease,
        box-shadow var(--why-transition-duration) ease;
    overflow: hidden;
}

/* Hover Line Animation - Top edge line that animates from left to right */
.why-feature-card--standard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background-color: var(--why-color-primary-cyan);
    border-radius: var(--why-size-border-radius-card) var(--why-size-border-radius-card) 0 0;
    transition: width 0.6s ease;
    z-index: 1;
}

/* Standard Card Hover Effect - Lift, shadow increase, and line animation */
.why-feature-card--standard:hover {
    transform: translateY(-8px);
    box-shadow: var(--why-shadow-hover);
}

/* Animate line from left to right on hover */
.why-feature-card--standard:hover::before {
    width: 100%;
}

/* Standard Card Focus State - For keyboard navigation */
.why-feature-card--standard:focus-within {
    transform: translateY(-8px);
    box-shadow: var(--why-shadow-hover);
    outline: 2px solid var(--why-color-primary-cyan);
    outline-offset: 2px;
}

/* Standard Icon Container - Light cyan background circle */
.why-standard-icon-container {
    width: var(--why-size-icon);
    height: var(--why-size-icon);
    background-color: var(--why-color-primary-light-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--why-spacing-icon-margin);
}

/* Standard Icon - Cyan color */
.why-standard-icon-container i {
    font-size: 1.35rem;
    color: var(--why-color-primary-cyan);
    line-height: 1;
}

/* Standard Title - Dark blue color */
.why-standard-title {
    color: var(--why-color-primary-dark);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px 0;
    padding: 0;
}

/* Standard Description - Medium gray color */
.why-standard-description {
    color: var(--why-color-text-medium);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* ============================================
   Responsive Styles
   ============================================ */

/* Mobile devices (< 768px) */
@media (max-width: 767px) {
    .why-choose-us-section {
        padding: var(--why-spacing-section-mobile) 0;
    }

    .why-choose-us-header {
        margin-bottom: 32px;
    }

    /* Header responsive styles */
    .why-eyebrow-badge {
        font-size: 0.7rem;
        padding: 5px 14px;
        margin-bottom: 12px;
    }

    .why-main-title {
        font-size: 1.75rem;
        margin-bottom: 12px;
    }

    .why-subtitle {
        font-size: 0.9rem;
    }

    /* Single column layout on mobile */
    .why-choose-us-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Hero card spans full width (1 column) on mobile */
    .why-feature-card--hero {
        grid-column: span 1;
        min-height: 240px;
    }

    .why-feature-card {
        padding: var(--why-spacing-card-padding-mobile);
    }


    .why-hero-icon {
        font-size: 2.5rem;
        margin-bottom: 16px;
    }

    .why-hero-title {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .why-hero-description {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }

    .why-hero-button {
        font-size: 0.85rem;
        padding: 10px 20px;
    }

    /* Standard card responsive styles */
    .why-standard-title {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .why-standard-description {
        font-size: 0.85rem;
    }

    .why-standard-icon-container {
        margin-bottom: 14px;
    }

    .why-standard-icon-container i {
        font-size: 1.35rem;
    }
}

/* Tablet devices (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .why-choose-us-section {
        padding: 70px 0;
    }

    /* Header responsive styles for tablet */
    .why-main-title {
        font-size: 2rem;
    }

    .why-subtitle {
        font-size: 0.95rem;
    }

    /* 2-column layout on tablet */
    .why-choose-us-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Hero card spans 1 column on tablet (same as standard cards) */
    .why-feature-card--hero {
        grid-column: span 1;
        min-height: 260px;
    }

    /* Hero card responsive styles for tablet */
    .why-hero-icon {
        font-size: 2.75rem;
    }

    .why-hero-title {
        font-size: 1.05rem;
    }

    .why-hero-description {
        font-size: 0.9rem;
    }

    /* Standard card responsive styles for tablet */
    .why-standard-title {
        font-size: 1.15rem;
    }

    .why-standard-description {
        font-size: 0.875rem;
    }
}

/* Desktop devices (≥ 992px) */
@media (min-width: 992px) {

    /* 4-column layout on desktop */
    .why-choose-us-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Hero card spans 2 columns on desktop
       Layout: Row 1 = Hero (2 cols) + 2 standard cards (1 col each) = 4 total
               Row 2 = 4 standard cards (1 col each) = 4 total */
    .why-feature-card--hero {
        grid-column: span 2;
    }
}

/* ============================================
   Accessibility Enhancements
   ============================================ */

/* Reduced Motion Support - Respect user preferences */
@media (prefers-reduced-motion: reduce) {

    .why-feature-card,
    .why-hero-button,
    .why-hero-button-arrow,
    .why-feature-card--standard::before,
    .why-feature-card--hero::before {
        transition: none;
    }

    .why-feature-card--standard:hover,
    .why-feature-card--standard:focus-within,
    .why-feature-card--hero:hover {
        transform: none;
    }

    .why-hero-button:hover {
        transform: none;
    }

    .why-hero-button:hover .why-hero-button-arrow,
    .why-hero-button:focus .why-hero-button-arrow {
        transform: none;
    }

    /* Show line immediately without animation for reduced motion */
    .why-feature-card--standard:hover::before,
    .why-feature-card--hero:hover::before {
        width: 100%;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .why-feature-card {
        border: 2px solid currentColor;
    }

    .why-hero-button {
        border: 2px solid var(--why-color-bg-white);
    }

    .why-hero-button:focus,
    .why-hero-button:focus-visible {
        outline-width: 4px;
    }
}

/* Screen Reader Only Content */
.why-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus Visible Polyfill Support */
.why-hero-button:focus:not(:focus-visible) {
    outline: none;
}