:root {
            --card-1: #f59e0b;
            --card-1-dark: #d97706;
            --card-1-light: #fef3c7;
            --card-1-glow: rgba(245, 158, 11, 0.45);
            --card-2: #3b82f6;
            --card-2-dark: #2563eb;
            --card-2-light: #dbeafe;
            --card-2-glow: rgba(59, 130, 246, 0.45);
            --card-3: #10b981;
            --card-3-dark: #059669;
            --card-3-light: #d1fae5;
            --card-3-glow: rgba(16, 185, 129, 0.45);
            --card-4: #8b5cf6;
            --card-4-dark: #7c3aed;
            --card-4-light: #ede9fe;
            --card-4-glow: rgba(139, 92, 246, 0.45);
            --card-5: #06b6d4;
            --card-5-dark: #0891b2;
            --card-5-light: #cffafe;
            --card-5-glow: rgba(6, 182, 212, 0.45);
            --card-6: #ef4444;
            --card-6-dark: #dc2626;
            --card-6-light: #fee2e2;
            --card-6-glow: rgba(239, 68, 68, 0.45);
            --bg-gradient-start: #f8fafc;
            --bg-gradient-end: #eef2ff;
            --card-bg: #ffffff;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
            --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.12), 0 8px 16px -8px rgba(0, 0, 0, 0.08);
            --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.18);
            --radius-card: 20px;
            --radius-icon: 50%;
            --transition-smooth: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
            --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            --transition-ease: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }


        /* ============ SECTION: why-choose ============ */
        .why-choose {
            width: 100%;
            max-width: 1320px;
            margin: 0 auto;
            padding: 20px 20px;
            position: relative;
            z-index: 1;
        }

        /* Subtle decorative background orbs */
        .why-choose::before {
            content: '';
            position: absolute;
            top: -80px;
            left: -120px;
            width: 450px;
            height: 450px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
            border-radius: 50%;
            z-index: 0;
            pointer-events: none;
            animation: orbFloat1 18s ease-in-out infinite;
        }

        .why-choose::after {
            content: '';
            position: absolute;
            bottom: -100px;
            right: -100px;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
            border-radius: 50%;
            z-index: 0;
            pointer-events: none;
            animation: orbFloat2 20s ease-in-out infinite;
        }

        @keyframes orbFloat1 {
            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }
            25% {
                transform: translate(40px, -30px) scale(1.08);
            }
            50% {
                transform: translate(-20px, 25px) scale(0.94);
            }
            75% {
                transform: translate(30px, 15px) scale(1.05);
            }
        }

        @keyframes orbFloat2 {
            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }
            33% {
                transform: translate(-35px, -20px) scale(1.1);
            }
            66% {
                transform: translate(25px, 30px) scale(0.92);
            }
        }

        /* Section heading (optional subtle label) */
        .why-choose-section-label {
            text-align: center;
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
            margin-top: -50px;
        }

        .why-choose-section-label span {
            display: inline-block;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #6366f1;
            background: rgba(99, 102, 241, 0.08);
            padding: 8px 22px;
            border-radius: 50px;
            position: relative;
        }

        .why-choose-section-label span::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50px;
            padding: 2px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0.5;
        }

        /* ============ ROW / GRID ============ */
        .why-choose-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            position: relative;
            z-index: 1;
        }

        /* ============ CARD ============ */
        .why-choose-card {
            background: var(--card-bg);
            border-radius: var(--radius-card);
            padding: 20px 20px 20px;
            text-align: center;
            position: relative;
            /* cursor: pointer; */
            box-shadow: var(--shadow-md);
            transition:
                transform var(--transition-bounce),
                box-shadow var(--transition-ease),
                border-color var(--transition-ease);
            border: 1.5px solid transparent;
            overflow: hidden;
            z-index: 1;
            /* Entrance animation */
            opacity: 0;
            transform: translateY(50px) scale(0.92);
            animation: cardEntrance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            will-change: transform, opacity, box-shadow;
        }

        /* Staggered animation delays */
        .why-choose-card:nth-child(1) {
            animation-delay: 0.08s;
        }
        .why-choose-card:nth-child(2) {
            animation-delay: 0.18s;
        }
        .why-choose-card:nth-child(3) {
            animation-delay: 0.28s;
        }
        .why-choose-card:nth-child(4) {
            animation-delay: 0.38s;
        }
        .why-choose-card:nth-child(5) {
            animation-delay: 0.48s;
        }
        .why-choose-card:nth-child(6) {
            animation-delay: 0.58s;
        }

        @keyframes cardEntrance {
            0% {
                opacity: 0;
                transform: translateY(50px) scale(0.92);
            }
            60% {
                opacity: 1;
                transform: translateY(-6px) scale(1.02);
            }
            80% {
                transform: translateY(3px) scale(0.99);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Card accent top line */
        .why-choose-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 60%;
            height: 4px;
            border-radius: 0 0 8px 8px;
            transition: transform var(--transition-bounce);
            z-index: 2;
        }

        .why-choose-card:hover::before {
            transform: translateX(-50%) scaleX(1);
        }

        /* Card accent colors */
        .why-choose-card.card-accent-1 {
            border-color: rgba(0, 0, 0, 0.58);
    border-bottom-color: rgba(0, 0, 0, 0.58);
  border-bottom: 4px solid rgba(0, 0, 0, 0.58);
        }
        .why-choose-card.card-accent-1::before {
            background: rgba(244, 0, 0, 0.5);
        }
        .why-choose-card.card-accent-1:hover {
            border-color: rgba(244, 0, 0, 0.5);
            box-shadow: linear-gradient(90deg, #000, #000), 0 0 35px linear-gradient(90deg, #000, #000);
        }

        .why-choose-card.card-accent-2 {
            border-color: rgba(0, 0, 0, 0.58);
    border-bottom-color: rgba(0, 0, 0, 0.58);
  border-bottom: 4px solid rgba(0, 0, 0, 0.58);
        }
        .why-choose-card.card-accent-2::before {
            background: rgba(244, 0, 0, 0.5);
        }
        .why-choose-card.card-accent-2:hover {
            border-color: rgba(244, 0, 0, 0.5);
            box-shadow: linear-gradient(90deg, #000, #000), 0 0 35px linear-gradient(90deg, #000, #000);
        }

        .why-choose-card.card-accent-3 {
            border-color: rgba(0, 0, 0, 0.58);
    border-bottom-color: rgba(0, 0, 0, 0.58);
  border-bottom: 4px solid rgba(0, 0, 0, 0.58);
        }
        .why-choose-card.card-accent-3::before {
            background: rgba(244, 0, 0, 0.5);
        }
        .why-choose-card.card-accent-3:hover {
            border-color: rgba(244, 0, 0, 0.5);
            box-shadow: linear-gradient(90deg, #000, #000), 0 0 35px linear-gradient(90deg, #000, #000);
        }

        .why-choose-card.card-accent-4 {
            border-color: rgba(0, 0, 0, 0.58);
    border-bottom-color: rgba(0, 0, 0, 0.58);
  border-bottom: 4px solid rgba(0, 0, 0, 0.58);
        }
        .why-choose-card.card-accent-4::before {
            background: rgba(244, 0, 0, 0.5);
        }
        .why-choose-card.card-accent-4:hover {
            border-color: rgba(244, 0, 0, 0.5);
            box-shadow: linear-gradient(90deg, #000, #000), 0 0 35px linear-gradient(90deg, #000, #000);
        }

        .why-choose-card.card-accent-5 {
            border-color: rgba(0, 0, 0, 0.58);
    border-bottom-color: rgba(0, 0, 0, 0.58);
  border-bottom: 4px solid rgba(0, 0, 0, 0.58);
        }
        .why-choose-card.card-accent-5::before {
            background: rgba(244, 0, 0, 0.5);
        }
        .why-choose-card.card-accent-5:hover {
            border-color: rgba(244, 0, 0, 0.5);
            box-shadow: linear-gradient(90deg, #000, #000), 0 0 35px linear-gradient(90deg, #000, #000);
        }

        .why-choose-card.card-accent-6 {
            border-color: rgba(0, 0, 0, 0.58);
    border-bottom-color: rgba(0, 0, 0, 0.58);
  border-bottom: 4px solid rgba(0, 0, 0, 0.58);
        }
        .why-choose-card.card-accent-6::before {
            background: rgba(244, 0, 0, 0.5);
        }
        .why-choose-card.card-accent-6:hover {
            border-color: rgba(244, 0, 0, 0.5);
            box-shadow: linear-gradient(90deg, #000, #000), 0 0 35px linear-gradient(90deg, #000, #000);
        }

        /* Card hover lift */
        .why-choose-card:hover {
            transform: translateY(-12px);
        }

        /* Subtle shimmer overlay on hover */
        .why-choose-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at center,
                    rgba(255, 255, 255, 0.5) 0%,
                    transparent 60%);
            opacity: 0;
            transition: opacity var(--transition-ease);
            z-index: 0;
            pointer-events: none;
            transform: translate(var(--mouse-x, 50%), var(--mouse-y, 50%));
        }

        .why-choose-card:hover::after {
            opacity: 0.6;
        }

        /* ============ ICON CONTAINER ============ */
        .why-choose-icon-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            border-radius: var(--radius-icon);
            margin-bottom: 22px;
            position: relative;
            z-index: 2;
            transition: transform var(--transition-bounce), box-shadow var(--transition-ease);
        }

        /* Icon float animation - each card different timing */
        .why-choose-card:nth-child(1) .why-choose-icon-wrap {
            animation: iconFloat 4.5s ease-in-out infinite;
            animation-delay: 0s;
        }
        .why-choose-card:nth-child(2) .why-choose-icon-wrap {
            animation: iconFloat 5s ease-in-out infinite;
            animation-delay: 0.6s;
        }
        .why-choose-card:nth-child(3) .why-choose-icon-wrap {
            animation: iconFloat 4.2s ease-in-out infinite;
            animation-delay: 1.2s;
        }
        .why-choose-card:nth-child(4) .why-choose-icon-wrap {
            animation: iconFloat 5.3s ease-in-out infinite;
            animation-delay: 1.8s;
        }
        .why-choose-card:nth-child(5) .why-choose-icon-wrap {
            animation: iconFloat 3.9s ease-in-out infinite;
            animation-delay: 2.4s;
        }
        .why-choose-card:nth-child(6) .why-choose-icon-wrap {
            animation: iconFloat 4.7s ease-in-out infinite;
            animation-delay: 3s;
        }

        @keyframes iconFloat {
            0%,
            100% {
                transform: translateY(0);
            }
            20% {
                transform: translateY(-10px);
            }
            40% {
                transform: translateY(3px);
            }
            60% {
                transform: translateY(-7px);
            }
            80% {
                transform: translateY(2px);
            }
        }

        .why-choose-card:hover .why-choose-icon-wrap {
            transform: translateY(-6px) scale(1.1);
            animation-play-state: paused;
        }

        /* Icon container backgrounds */
        .icon-bg-1 {
            background: #d90202;
            box-shadow: 0 8px 28px rgba(239, 68, 68, 0.3), 0 2px 6px rgba(239, 68, 68, 0.2);
        }
        .why-choose-card.card-accent-1:hover .icon-bg-1 {
            box-shadow: 0 14px 38px rgba(239, 68, 68, 0.5), 0 4px 12px rgba(239, 68, 68, 0.35);
        }

        .icon-bg-2 {
            background: #d90202;
            box-shadow: 0 8px 28px rgba(239, 68, 68, 0.3), 0 2px 6px rgba(239, 68, 68, 0.2);
        }
        .why-choose-card.card-accent-2:hover .icon-bg-2 {
            box-shadow: 0 14px 38px rgba(239, 68, 68, 0.5), 0 4px 12px rgba(239, 68, 68, 0.35);
        }

        .icon-bg-3 {
            background: #d90202;
            box-shadow: 0 8px 28px rgba(239, 68, 68, 0.3), 0 2px 6px rgba(239, 68, 68, 0.2);
        }
        .why-choose-card.card-accent-3:hover .icon-bg-3 {
            box-shadow: 0 14px 38px rgba(239, 68, 68, 0.5), 0 4px 12px rgba(239, 68, 68, 0.35);
        }

        .icon-bg-4 {
            background: #d90202;
            box-shadow: 0 8px 28px rgba(239, 68, 68, 0.3), 0 2px 6px rgba(239, 68, 68, 0.2);
        }
        .why-choose-card.card-accent-4:hover .icon-bg-4 {
            box-shadow: 0 14px 38px rgba(239, 68, 68, 0.5), 0 4px 12px rgba(239, 68, 68, 0.35);
        }

        .icon-bg-5 {
            background: #d90202;
            box-shadow: 0 8px 28px rgba(239, 68, 68, 0.3), 0 2px 6px rgba(239, 68, 68, 0.2);
        }
        .why-choose-card.card-accent-5:hover .icon-bg-5 {
            box-shadow: 0 14px 38px rgba(239, 68, 68, 0.5), 0 4px 12px rgba(239, 68, 68, 0.35);
        }

        .icon-bg-6 {
            background: #d90202;
            box-shadow: 0 8px 28px rgba(239, 68, 68, 0.3), 0 2px 6px rgba(239, 68, 68, 0.2);
        }
        .why-choose-card.card-accent-6:hover .icon-bg-6 {
            box-shadow: 0 14px 38px rgba(239, 68, 68, 0.5), 0 4px 12px rgba(239, 68, 68, 0.35);
        }

        /* ============ ICON ============ */
        .why-choose-icon-wrap i {
            font-size: 2rem;
            color: #ffffff;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: transform var(--transition-bounce);
            position: relative;
            z-index: 2;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
        }

        .why-choose-card:hover .why-choose-icon-wrap i {
            transform: scale(1.15);
        }

        /* ============ CARD TITLE ============ */
        .why-choose-card-title {
            font-size: 16px;
            font-weight: 500;
            color: #000;
            line-height: 1.35;
            letter-spacing: -0.01em;
            position: relative;
            z-index: 2;
            transition: color var(--transition-ease);
        }

        .why-choose-card:hover .why-choose-card-title {
            color: #0f172a;
        }

        /* Subtle divider dot */
        .why-choose-card-divider {
            width: 32px;
            height: 3px;
            border-radius: 10px;
            margin: 14px auto 0;
            position: relative;
            z-index: 2;
            transition: width var(--transition-bounce);
        }

        .divider-1 {
            background: #d90202;
        }
        .divider-2 {
            background: #d90202;
        }
        .divider-3 {
            background: #d90202;
        }
        .divider-4 {
            background: #d90202;
        }
        .divider-5 {
            background: #d90202;
        }
        .divider-6 {
            background: #d90202;
        }

        .why-choose-card:hover .why-choose-card-divider {
            width: 50px;
        }

        /* ============ RESPONSIVE: Tablet (max 991px) ============ */
        @media (max-width: 991px) {
            .why-choose-row {
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }
            .why-choose-card {
                padding: 28px 18px 24px;
            }
            .why-choose-icon-wrap {
                width: 64px;
                height: 64px;
                margin-bottom: 16px;
            }
            .why-choose-icon-wrap i {
                font-size: 1.6rem;
            }
            .why-choose-card-title {
                font-size: 0.95rem;
            }
        }

        /* ============ RESPONSIVE: Mobile 2 Columns (max 767px) ============ */
        @media (max-width: 767px) {
            .why-choose {
                padding: 40px 12px;
            }
            .why-choose-row {
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }
            .why-choose-card {
                padding: 24px 14px 20px;
                border-radius: 16px;
            }
            .why-choose-card::before {
                width: 50%;
                height: 3px;
            }
            .why-choose-icon-wrap {
                width: 54px;
                height: 54px;
                margin-bottom: 14px;
            }
            .why-choose-icon-wrap i {
                font-size: 1.35rem;
            }
            .why-choose-card-title {
                font-size: 0.85rem;
                line-height: 1.3;
            }
            .why-choose-card-divider {
                width: 24px;
                height: 2px;
                margin: 10px auto 0;
            }
            .why-choose-card:hover .why-choose-card-divider {
                width: 38px;
            }
            .why-choose-card:hover {
                transform: translateY(-8px);
            }
            /* Adjust animation for mobile */
            @keyframes cardEntrance {
                0% {
                    opacity: 0;
                    transform: translateY(35px) scale(0.94);
                }
                60% {
                    opacity: 1;
                    transform: translateY(-3px) scale(1.01);
                }
                80% {
                    transform: translateY(2px) scale(0.995);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }
            /* Reduce float distance on mobile */
            @keyframes iconFloat {
                0%,
                100% {
                    transform: translateY(0);
                }
                20% {
                    transform: translateY(-6px);
                }
                40% {
                    transform: translateY(2px);
                }
                60% {
                    transform: translateY(-4px);
                }
                80% {
                    transform: translateY(1px);
                }
            }
        }

        /* ============ RESPONSIVE: Very Small Screens (max 419px) - Single Column ============ */
        @media (max-width: 419px) {
            .why-choose-row {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            .why-choose-card {
                padding: 18px 10px 16px;
                border-radius: 14px;
            }
            .why-choose-icon-wrap {
                width: 44px;
                height: 44px;
                margin-bottom: 10px;
            }
            .why-choose-icon-wrap i {
                font-size: 1.1rem;
            }
            .why-choose-card-title {
                font-size: 0.75rem;
                letter-spacing: 0;
            }
            .why-choose-card-divider {
                width: 20px;
                height: 2px;
                margin: 8px auto 0;
            }
            .why-choose-card:hover .why-choose-card-divider {
                width: 30px;
            }
            .why-choose-card:hover {
                transform: translateY(-5px);
            }
        }

        /* ============ RESPONSIVE: Ultra Small (max 340px) - Still 2 columns but tighter ============ */
        @media (max-width: 340px) {
            .why-choose-row {
                gap: 8px;
            }
            .why-choose-card {
                padding: 14px 6px 12px;
                border-radius: 12px;
            }
            .why-choose-icon-wrap {
                width: 36px;
                height: 36px;
                margin-bottom: 8px;
            }
            .why-choose-icon-wrap i {
                font-size: 0.9rem;
            }
            .why-choose-card-title {
                font-size: 0.7rem;
            }
            .why-choose-card-divider {
                width: 16px;
                height: 1.5px;
                margin: 6px auto 0;
            }
            .why-choose-card:hover .why-choose-card-divider {
                width: 24px;
            }
        }

        /* ============ Reduced motion preference ============ */
        @media (prefers-reduced-motion: reduce) {
            .why-choose-card {
                animation: none;
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            .why-choose-icon-wrap {
                animation: none !important;
            }
            .why-choose-card:hover .why-choose-icon-wrap {
                animation: none !important;
            }
            .why-choose-card {
                transition: transform 0.15s ease, box-shadow 0.15s ease;
            }
        }