/*hero section*/
            .hero-banner {
                position: relative;
                min-height: 100vh;
                display: flex;
                align-items: center;
                overflow: hidden;
                padding-top: 0;
                margin-top: -6rem;
            }

            .hero-banner::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(26, 26, 26, 0.85) 0%, rgba(26, 26, 26, 0.6) 50%, rgba(194, 38, 32, 0.4) 100%);
                z-index: 1;
            }

            .hero-bg {
                position: absolute;
                inset: 0;
                z-index: 0;
            }

            .hero-bg img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .hero-content-wrap {
                position: relative;
                z-index: 2;
                max-width: 1400px;
                margin: 0 auto;
                padding: 10rem 2rem 4rem;
                width: 100%;
                display: grid;
                grid-template-columns: 1.3fr 1fr;
                gap: 4rem;
                align-items: center;
            }

            .hero-text h1 {
                font-size: 4rem;
                font-weight: 800;
                line-height: 1.1;
                letter-spacing: -0.02em;
                color: white;
                margin-bottom: 1.5rem;
            }

            .hero-text h1 .highlight {
                background: linear-gradient(135deg, #c22620, #ff4444);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .rotate-container {
                height: 3.5rem;
                overflow: hidden;
                margin-bottom: 2rem;
            }

            .rotate-text {
                animation: rotateUp 12s ease-in-out infinite;
            }

            .rotate-item {
                height: 3.5rem;
                display: flex;
                align-items: center;
                font-size: 1.5rem;
                font-weight: 600;
                color: rgba(255, 255, 255, 0.9);
            }

            .rotate-item::before {
                content: '→';
                margin-right: 0.75rem;
                color: #c22620;
                font-weight: 700;
            }

            @keyframes rotateUp {

                0%,
                25% {
                    transform: translateY(0);
                }

                33.33%,
                58.33% {
                    transform: translateY(-3.5rem);
                }

                66.66%,
                91.66% {
                    transform: translateY(-7rem);
                }

                100% {
                    transform: translateY(-10.5rem);
                }
            }

            .hero-badges {
                display: flex;
                gap: 2.5rem;
            }

            .badge-item {
                display: flex;
                flex-direction: column;
            }

            .badge-item strong {
                font-size: 2rem;
                font-weight: 700;
                color: #c22620;
                font-family: 'JetBrains Mono', monospace;
                text-shadow: 0 2px 8px rgba(194, 38, 32, 0.3);
            }

            .badge-item span {
                font-size: 0.75rem;
                color: rgba(255, 255, 255, 0.7);
                text-transform: uppercase;
                letter-spacing: 0.08em;
                margin-top: 0.25rem;
            }

            .hero-form-card {
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(20px);
                border-radius: 20px;
                padding: 2rem;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            .form-card-header {
                margin-bottom: 1.5rem;
                padding-bottom: 1rem;
                border-bottom: 2px solid rgba(194, 38, 32, 0.1);
            }

            .form-card-header h3 {
                font-size: 1.25rem;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 0.25rem;
            }

            .form-card-header p {
                font-size: 0.813rem;
                color: #7c7b7b;
                margin: 0;
            }

            .form-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0.875rem;
            }

            .form-grid input {
                padding: 0.875rem 1rem;
                font-size: 0.875rem;
                font-weight: 500;
                border: 2px solid rgba(0, 0, 0, 0.08);
                border-radius: 12px;
                outline: none;
                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                background: rgba(0, 0, 0, 0.02);
                color: #1a1a1a;
            }

            .form-grid input::placeholder {
                color: rgba(26, 26, 26, 0.4);
            }

            .form-grid input:focus {
                border-color: #c22620;
                background: white;
                box-shadow: 0 0 0 4px rgba(194, 38, 32, 0.08);
                transform: translateY(-1px);
            }

            .form-grid button {
                grid-column: 1/-1;
                padding: 1rem;
                background: linear-gradient(135deg, #c22620, #a51d18);
                color: white;
                border: none;
                border-radius: 12px;
                font-size: 1rem;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 4px 16px rgba(194, 38, 32, 0.3);
                margin-top: 0.5rem;
            }

            .form-grid button:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(194, 38, 32, 0.4);
            }

            .form-grid button:active {
                transform: translateY(0);
            }

            @media (max-width: 991px) {
                .hero-banner {
                    min-height: auto;
                    margin-top: -5rem;
                }

                .hero-content-wrap {
                    grid-template-columns: 1fr;
                    gap: 2.5rem;
                    padding: 8rem 2rem 4rem;
                }

                .hero-text {
                    text-align: center;
                }

                .hero-text h1 {
                    font-size: 2.75rem;
                }

                .rotate-item {
                    justify-content: center;
                }

                .hero-badges {
                    justify-content: center;
                }
            }

            @media (max-width: 767px) {
                .hero-banner {
                    margin-top: -4rem;
                }

                .hero-content-wrap {
                    padding: 7rem 1.5rem 3rem;
                }

                .hero-text h1 {
                    font-size: 2rem;
                }

                .rotate-container {
                    height: 2.5rem;
                }

                .rotate-item {
                    height: 2.5rem;
                    font-size: 1.125rem;
                }

                @keyframes rotateUp {

                    0%,
                    25% {
                        transform: translateY(0);
                    }

                    33.33%,
                    58.33% {
                        transform: translateY(-2.5rem);
                    }

                    66.66%,
                    91.66% {
                        transform: translateY(-5rem);
                    }

                    100% {
                        transform: translateY(-7.5rem);
                    }
                }

                .form-grid {
                    grid-template-columns: 1fr;
                }

                .hero-form-card {
                    padding: 1.5rem;
                }

                .hero-badges {
                    gap: 1.5rem;
                }

                .badge-item strong {
                    font-size: 1.5rem;
                }
            }

            @media (max-width: 575px) {
                .hero-content-wrap {
                    padding: 6rem 1rem 2.5rem;
                }
            }
                /* ===== COMPACT CTA CONNECTION BAR ===== */
                .connect-bar-wrapper {
                    padding: 0 1.5rem;
                    /* margin: 3rem 0; */
                }

                .connect-bar {
                    position: relative;
                    background: rgba(255, 255, 255, 0.88);
                    backdrop-filter: blur(24px) saturate(180%);
                    border-radius: 16px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 2rem;
                    box-shadow:
                        0 1px 2px rgba(0, 0, 0, 0.04),
                        0 4px 12px rgba(0, 0, 0, 0.03),
                        inset 0 0 0 1px rgba(0, 0, 0, 0.06);
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    max-width: 1400px;
                    margin: 0 auto;
                }

                .connect-bar:hover {
                    box-shadow:
                        0 2px 4px rgba(0, 0, 0, 0.05),
                        0 8px 20px rgba(0, 0, 0, 0.05),
                        inset 0 0 0 1px rgba(0, 0, 0, 0.08);
                }

                /* Left Section - Heading */
                .connect-heading {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                }

                .connect-heading h3 {
                    font-size: 1.125rem;
                    font-weight: 700;
                    color: #1a1a1a;
                    margin: 0;
                    letter-spacing: -0.01em;
                }

                .connect-heading p {
                    font-size: 0.813rem;
                    font-weight: 500;
                    color: #7c7b7b;
                    margin: 0;
                }

                /* Right Section - Actions Grid */
                .connect-actions {
                    display: flex;
                    gap: 1rem;
                    align-items: center;
                }

                /* Individual Connect Button */
                .connect-btn {
                    position: relative;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 1rem 1.5rem;
                    background: rgba(0, 0, 0, 0.02);
                    border: 1px solid rgba(0, 0, 0, 0.06);
                    border-radius: 12px;
                    cursor: pointer;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    text-decoration: none;
                    overflow: hidden;
                }

                .connect-btn::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(135deg, #c22620, #a51d18);
                    opacity: 0;
                    transition: opacity 0.3s;
                    border-radius: 12px;
                }

                .connect-btn:hover::before {
                    opacity: 1;
                }

                .connect-btn:hover {
                    transform: translateY(-2px);
                    border-color: transparent;
                    box-shadow:
                        0 4px 16px rgba(194, 38, 32, 0.25),
                        0 8px 24px rgba(0, 0, 0, 0.08);
                }

                /* Icon */
                .connect-btn-icon {
                    position: relative;
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 1;
                }

                .connect-btn-icon svg {
                    width: 100%;
                    height: 100%;
                    stroke: #1a1a1a;
                    transition: stroke 0.3s;
                }

                .connect-btn:hover .connect-btn-icon svg {
                    stroke: white;
                }

                /* Text */
                .connect-btn-text {
                    position: relative;
                    z-index: 1;
                }

                .connect-btn-title {
                    display: block;
                    font-size: 0.938rem;
                    font-weight: 600;
                    color: #1a1a1a;
                    transition: color 0.3s;
                    line-height: 1.2;
                    margin-bottom: 2px;
                }

                .connect-btn-subtitle {
                    display: block;
                    font-size: 0.688rem;
                    font-weight: 500;
                    color: #7c7b7b;
                    transition: color 0.3s;
                }

                .connect-btn:hover .connect-btn-title,
                .connect-btn:hover .connect-btn-subtitle {
                    color: white;
                }

                /* Primary Button (Chat) */
                .connect-btn.primary {
                    background: linear-gradient(135deg, #c22620, #a51d18);
                    border-color: transparent;
                    box-shadow:
                        0 2px 8px rgba(194, 38, 32, 0.25),
                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
                }

                .connect-btn.primary::before {
                    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
                }

                .connect-btn.primary .connect-btn-icon svg {
                    stroke: white;
                }

                .connect-btn.primary .connect-btn-title,
                .connect-btn.primary .connect-btn-subtitle {
                    color: white;
                }

                .connect-btn.primary:hover {
                    box-shadow:
                        0 4px 16px rgba(194, 38, 32, 0.35),
                        0 8px 32px rgba(194, 38, 32, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.3);
                }

                /* Status Indicator */
                .status-dot {
                    position: absolute;
                    top: 8px;
                    right: 8px;
                    width: 8px;
                    height: 8px;
                    background: #22c55e;
                    border-radius: 50%;
                    border: 2px solid white;
                    animation: statusPulse 2s ease-in-out infinite;
                }

                @keyframes statusPulse {

                    0%,
                    100% {
                        opacity: 1;
                        transform: scale(1);
                    }

                    50% {
                        opacity: 0.7;
                        transform: scale(1.2);
                    }
                }

                /* Responsive */
                @media (max-width: 991px) {
                    .connect-bar {
                        height: auto;
                        padding: 1.5rem;
                        flex-direction: column;
                        gap: 1.5rem;
                        align-items: flex-start;
                    }

                    .connect-heading {
                        width: 100%;
                    }

                    .connect-actions {
                        width: 100%;
                        flex-direction: column;
                        gap: 0.75rem;
                    }

                    .connect-btn {
                        width: 100%;
                        justify-content: flex-start;
                    }
                }

                @media (max-width: 767px) {
                    .connect-bar-wrapper {
                        padding: 0 1rem;
                    }

                    .connect-bar {
                        padding: 1.25rem;
                    }

                    .connect-heading h3 {
                        font-size: 1rem;
                    }

                    .connect-heading p {
                        font-size: 0.75rem;
                    }

                    .connect-btn {
                        padding: 0.875rem 1.25rem;
                    }

                    .connect-btn-title {
                        font-size: 0.875rem;
                    }
                }

                @media (max-width: 575px) {
                    .connect-bar-wrapper {
                        padding: 0 0.75rem;
                    }

                    .connect-bar {
                        padding: 1rem;
                    }

                    .connect-heading h3 {
                        font-size: 0.938rem;
                    }

                    .connect-btn {
                        padding: 0.75rem 1rem;
                        gap: 10px;
                    }

                    .connect-btn-subtitle {
                        display: none;
                    }
                }
         
                            /* COMPACT CTA BAR - Single Row, Image-Focused */
                            .cta-bar-wrapper {
                                padding: 0 1.5rem;
                                margin: 4rem 0;
                            }

                            .cta-bar-container {
                                max-width: 1400px;
                                margin: 0 auto;
                            }

                            .cta-bar {
                                position: relative;
                                background: rgba(255, 255, 255, 0.88);
                                backdrop-filter: blur(24px) saturate(180%);
                                border-radius: 20px;
                                padding: 2rem 2.5rem;
                                display: grid;
                                grid-template-columns: 1fr 2fr auto;
                                gap: 2.5rem;
                                align-items: center;
                                box-shadow:
                                    0 2px 8px rgba(0, 0, 0, 0.04),
                                    0 8px 24px rgba(0, 0, 0, 0.06),
                                    inset 0 0 0 1px rgba(0, 0, 0, 0.06);
                                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                            }

                            .cta-bar:hover {
                                box-shadow:
                                    0 4px 12px rgba(0, 0, 0, 0.06),
                                    0 12px 32px rgba(0, 0, 0, 0.08),
                                    inset 0 0 0 1px rgba(194, 38, 32, 0.15);
                            }

                            /* TEXT CONTENT - Compact */
                            .cta-text {
                                display: flex;
                                flex-direction: column;
                                gap: 0.75rem;
                            }

                            .cta-badge {
                                display: inline-flex;
                                align-items: center;
                                gap: 0.5rem;
                                padding: 0.375rem 0.875rem;
                                background: rgba(194, 38, 32, 0.08);
                                border-radius: 100px;
                                width: fit-content;
                                transition: all 0.3s;
                            }

                            .cta-badge:hover {
                                background: rgba(194, 38, 32, 0.12);
                            }

                            .badge-dot {
                                width: 6px;
                                height: 6px;
                                background: linear-gradient(135deg, #c22620, #a51d18);
                                border-radius: 50%;
                                animation: pulse 2s ease-in-out infinite;
                            }

                            @keyframes pulse {

                                0%,
                                100% {
                                    opacity: 1;
                                    transform: scale(1);
                                }

                                50% {
                                    opacity: 0.6;
                                    transform: scale(0.85);
                                }
                            }

                            .cta-badge span:last-child {
                                font-size: 0.688rem;
                                font-weight: 600;
                                letter-spacing: 0.08em;
                                text-transform: uppercase;
                                color: #c22620;
                            }

                            .cta-title {
                                font-size: 1.5rem;
                                font-weight: 700;
                                color: #1a1a1a;
                                line-height: 1.3;
                                letter-spacing: -0.01em;
                                margin: 0;
                            }

                            .highlight {
                                color: #c22620;
                                position: relative;
                            }

                            .highlight::after {
                                content: '';
                                position: absolute;
                                bottom: 0.1em;
                                left: 0;
                                right: 0;
                                height: 0.12em;
                                background: linear-gradient(90deg, #c22620, transparent);
                                opacity: 0.2;
                                border-radius: 2px;
                            }

                            /* IMAGE GALLERY - Horizontal Scroll */
                            .cta-gallery {
                                position: relative;
                                overflow: hidden;
                                border-radius: 14px;
                            }

                            .gallery-track {
                                display: flex;
                                gap: 1rem;
                                overflow-x: auto;
                                scroll-behavior: smooth;
                                scrollbar-width: none;
                                -ms-overflow-style: none;
                                padding: 0.25rem;
                            }

                            .gallery-track::-webkit-scrollbar {
                                display: none;
                            }

                            .gallery-item {
                                position: relative;
                                flex-shrink: 0;
                                width: 200px;
                                height: 140px;
                                border-radius: 12px;
                                overflow: hidden;
                                background: white;
                                box-shadow:
                                    0 2px 8px rgba(0, 0, 0, 0.06),
                                    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
                                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                                cursor: pointer;
                            }

                            .gallery-item:hover {
                                transform: translateY(-4px) scale(1.02);
                                box-shadow:
                                    0 8px 20px rgba(0, 0, 0, 0.12),
                                    inset 0 0 0 1px rgba(194, 38, 32, 0.3);
                            }

                            .gallery-item img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                            }

                            .gallery-item:hover img {
                                transform: scale(1.08);
                            }

                            .item-label {
                                position: absolute;
                                bottom: 0.75rem;
                                left: 0.75rem;
                                right: 0.75rem;
                                padding: 0.5rem 0.875rem;
                                background: rgba(255, 255, 255, 0.95);
                                backdrop-filter: blur(12px);
                                border-radius: 8px;
                                font-size: 0.75rem;
                                font-weight: 600;
                                color: #1a1a1a;
                                text-align: center;
                                opacity: 0;
                                transform: translateY(10px);
                                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                            }

                            .gallery-item:hover .item-label {
                                opacity: 1;
                                transform: translateY(0);
                            }

                            /* CTA BUTTON - Compact */
                            .cta-btn-main {
                                display: inline-flex;
                                align-items: center;
                                gap: 0.625rem;
                                padding: 0.875rem 1.75rem;
                                background: linear-gradient(135deg, #c22620, #a51d18);
                                color: white;
                                border: none;
                                border-radius: 12px;
                                font-size: 0.938rem;
                                font-weight: 600;
                                cursor: pointer;
                                white-space: nowrap;
                                box-shadow:
                                    0 4px 12px rgba(194, 38, 32, 0.3),
                                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
                                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                                position: relative;
                                overflow: hidden;
                            }

                            .cta-btn-main::before {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: -100%;
                                width: 100%;
                                height: 100%;
                                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                                transition: left 0.5s;
                            }

                            .cta-btn-main:hover {
                                transform: translateY(-3px);
                                box-shadow:
                                    0 8px 20px rgba(194, 38, 32, 0.4),
                                    inset 0 1px 0 rgba(255, 255, 255, 0.25);
                            }

                            .cta-btn-main:hover::before {
                                left: 100%;
                            }

                            .cta-btn-main:hover svg {
                                transform: translateX(4px);
                            }

                            .cta-btn-main svg {
                                transition: transform 0.3s;
                            }

                            .cta-btn-main:active {
                                transform: translateY(-1px);
                            }

                            /* RESPONSIVE */
                            @media (max-width: 1200px) {
                                .cta-bar {
                                    gap: 2rem;
                                    padding: 1.75rem 2rem;
                                }

                                .gallery-item {
                                    width: 180px;
                                    height: 120px;
                                }
                            }

                            @media (max-width: 991px) {
                                .cta-bar-wrapper {
                                    padding: 0 1rem;
                                }

                                .cta-bar {
                                    grid-template-columns: 1fr;
                                    gap: 1.5rem;
                                    padding: 1.5rem;
                                }

                                .cta-title {
                                    font-size: 1.25rem;
                                }

                                .gallery-item {
                                    width: 160px;
                                    height: 110px;
                                }

                                .cta-btn-main {
                                    width: 100%;
                                    justify-content: center;
                                }
                            }

                            @media (max-width: 767px) {
                                .cta-bar-wrapper {
                                    margin: 3rem 0;
                                }

                                .cta-bar {
                                    padding: 1.25rem;
                                    gap: 1.25rem;
                                }

                                .cta-title {
                                    font-size: 1.125rem;
                                }

                                .gallery-item {
                                    width: 140px;
                                    height: 100px;
                                }

                                .cta-btn-main {
                                    padding: 0.75rem 1.5rem;
                                    font-size: 0.875rem;
                                }
                            }

                            @media (max-width: 575px) {
                                .cta-bar-wrapper {
                                    padding: 0 0.75rem;
                                    margin: 2rem 0;
                                }

                                .cta-bar {
                                    padding: 1rem;
                                    gap: 1rem;
                                    border-radius: 16px;
                                }

                                .cta-title {
                                    font-size: 1rem;
                                }

                                .gallery-item {
                                    width: 130px;
                                    height: 90px;
                                }

                                .item-label {
                                    font-size: 0.688rem;
                                    padding: 0.375rem 0.625rem;
                                }
                            }
                    
                /* IMAGE-FOCUSED ABOUT SECTION */
                .about-visual-section {
                    background: #fafafa;
                    position: relative;
                    overflow: hidden;
                }

                /* Hero Parallax Section */
                .about-hero-visual {
                    position: relative;
                    height: 85vh;
                    min-height: 600px;
                    overflow: hidden;
                    margin-bottom: 8rem;
                }

                .hero-image-container {
                    position: relative;
                    width: 100%;
                    height: 100%;
                }

                .hero-image {
                    position: absolute;
                    inset: 0;
                    will-change: transform;
                }

                .hero-image img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                }

                .hero-overlay {
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(135deg,
                            rgba(26, 26, 26, 0.7) 0%,
                            rgba(194, 38, 32, 0.4) 100%);
                }

                .hero-content {
                    position: absolute;
                    inset: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    padding: 2rem;
                    z-index: 2;
                }

                .hero-badge {
                    display: inline-block;
                    font-size: 0.75rem;
                    font-weight: 600;
                    letter-spacing: 0.2em;
                    text-transform: uppercase;
                    color: white;
                    background: rgba(194, 38, 32, 0.9);
                    padding: 0.75rem 2rem;
                    border-radius: 100px;
                    margin-bottom: 2rem;
                    backdrop-filter: blur(10px);
                    animation: fadeSlideDown 1s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .hero-title {
                    font-size: 5rem;
                    font-weight: 700;
                    color: white;
                    line-height: 1.1;
                    letter-spacing: -0.02em;
                    margin-bottom: 1.5rem;
                    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
                    animation: fadeSlideUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
                }

                .hero-subtitle {
                    font-size: 1.5rem;
                    color: rgba(255, 255, 255, 0.95);
                    font-weight: 400;
                    max-width: 600px;
                    animation: fadeSlideUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
                }

                /* Container */
                .about-visual-container {
                    max-width: 1400px;
                    margin: 0 auto;
                    padding: 0 2rem;
                    margin-top: 60px;
                }



                .story-grid {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 6rem;
                    align-items: center;
                }

                .story-image-wrapper {
                    position: relative;
                    opacity: 0;
                    transform: translateX(-60px);
                }

                .story-image-wrapper.animate {
                    opacity: 1;
                    transform: translateX(0);
                    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .story-image {
                    position: relative;
                    border-radius: 24px;
                    overflow: hidden;
                    box-shadow:
                        0 20px 40px rgba(0, 0, 0, 0.15),
                        0 40px 80px rgba(0, 0, 0, 0.1);
                }

                .story-image img {
                    width: 100%;
                    height: 600px;
                    object-fit: cover;
                    display: block;
                    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .story-image:hover img {
                    transform: scale(1.05);
                }

                .image-frame {
                    position: absolute;
                    inset: 0;
                    border: 2px solid rgba(255, 255, 255, 0.3);
                    border-radius: 24px;
                    pointer-events: none;
                }

                .story-accent {
                    position: absolute;
                    top: -20px;
                    right: -20px;
                    width: 200px;
                    height: 200px;
                    background: linear-gradient(135deg, #c22620, #a51d18);
                    border-radius: 24px;
                    z-index: -1;
                    opacity: 0.15;
                }

                .story-content {
                    opacity: 0;
                    transform: translateX(60px);
                }

                .story-content.animate {
                    opacity: 1;
                    transform: translateX(0);
                    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
                }

                .section-label {
                    display: inline-block;
                    font-size: 0.75rem;
                    font-weight: 600;
                    letter-spacing: 0.15em;
                    text-transform: uppercase;
                    color: #c22620;
                    background: rgba(194, 38, 32, 0.08);
                    padding: 0.5rem 1.25rem;
                    border-radius: 100px;
                    margin-bottom: 1.5rem;
                }

                .section-title {
                    font-size: 3.5rem;
                    font-weight: 700;
                    color: #1a1a1a;
                    line-height: 1.15;
                    letter-spacing: -0.02em;
                    margin-bottom: 2rem;
                }

                .section-text {
                    font-size: 1.125rem;
                    color: #7c7b7b;
                    line-height: 1.8;
                    margin-bottom: 1.5rem;
                }

                .story-stats {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 2rem;
                    margin-top: 3rem;
                }

                .mini-stat {
                    text-align: center;
                    padding: 1.5rem;
                    background: white;
                    border-radius: 16px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .mini-stat:hover {
                    transform: translateY(-4px);
                    box-shadow: 0 8px 20px rgba(194, 38, 32, 0.15);
                }

                .mini-stat-number {
                    font-size: 2rem;
                    font-weight: 700;
                    color: #c22620;
                    font-family: 'JetBrains Mono', monospace;
                    margin-bottom: 0.5rem;
                }

                .mini-stat-label {
                    font-size: 0.875rem;
                    color: #7c7b7b;
                    font-weight: 500;
                }

                /* Visual Grid Section */
                .visual-grid-section {
                    margin-bottom: 8rem;
                    opacity: 0;
                    transform: translateY(40px);
                }

                .visual-grid-section.animate {
                    opacity: 1;
                    transform: translateY(0);
                    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .grid-header {
                    text-align: center;
                    max-width: 700px;
                    margin: 0 auto 4rem;
                }

                .image-grid {
                    display: grid;
                    grid-template-columns: repeat(12, 1fr);
                    gap: 1.5rem;
                    grid-auto-rows: 280px;
                }

                .grid-large {
                    grid-column: span 7;
                    grid-row: span 2;
                }

                .grid-tall {
                    grid-column: span 5;
                    grid-row: span 2;
                }

                .grid-wide {
                    grid-column: span 7;
                }

                .grid-medium {
                    grid-column: span 5;
                }

                .grid-item {
                    position: relative;
                    border-radius: 20px;
                    overflow: hidden;
                    opacity: 0;
                    transform: scale(0.9);
                }

                .grid-item.animate {
                    opacity: 1;
                    transform: scale(1);
                    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .grid-image {
                    width: 100%;
                    height: 100%;
                    position: relative;
                }

                .grid-image img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .grid-item:hover .grid-image img {
                    transform: scale(1.1);
                }

                .grid-overlay {
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(135deg,
                            rgba(194, 38, 32, 0.9) 0%,
                            rgba(26, 26, 26, 0.85) 100%);
                    display: flex;
                    align-items: flex-end;
                    padding: 2rem;
                    opacity: 0;
                    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .grid-item:hover .grid-overlay {
                    opacity: 1;
                }

                .grid-content {
                    transform: translateY(20px);
                    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .grid-item:hover .grid-content {
                    transform: translateY(0);
                }

                .grid-icon {
                    width: 48px;
                    height: 48px;
                    background: rgba(255, 255, 255, 0.15);
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 1rem;
                    backdrop-filter: blur(10px);
                }

                .grid-icon svg {
                    width: 24px;
                    height: 24px;
                    color: white;
                }

                .grid-title {
                    font-size: 1.5rem;
                    font-weight: 700;
                    color: white;
                    margin-bottom: 0.5rem;
                }

                .grid-description {
                    font-size: 1rem;
                    color: rgba(255, 255, 255, 0.9);
                }

                /* Banner Section with Stats */
                .banner-section {
                    position: relative;
                    height: 500px;
                    border-radius: 24px;
                    overflow: hidden;
                    margin-bottom: 8rem;
                    opacity: 0;
                    transform: scale(0.95);
                }

                .banner-section.animate {
                    opacity: 1;
                    transform: scale(1);
                    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .banner-image {
                    position: absolute;
                    inset: 0;
                }

                .banner-image img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .banner-overlay {
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(to right,
                            rgba(26, 26, 26, 0.95) 0%,
                            rgba(26, 26, 26, 0.7) 50%,
                            transparent 100%);
                }

                .banner-content {
                    position: relative;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    padding: 4rem;
                    z-index: 2;
                }

                .banner-stats {
                    max-width: 600px;
                    display: flex;
                    flex-direction: column;
                    gap: 3rem;
                }

                .banner-stat {
                    display: flex;
                    align-items: center;
                    gap: 2rem;
                }

                .stat-visual {
                    flex: 1;
                    height: 8px;
                    background: rgba(255, 255, 255, 0.15);
                    border-radius: 100px;
                    overflow: hidden;
                    backdrop-filter: blur(10px);
                }

                .stat-bar {
                    height: 100%;
                    width: var(--stat-width);
                    background: linear-gradient(90deg, #c22620, #ff4444);
                    border-radius: 100px;
                    box-shadow: 0 0 20px rgba(194, 38, 32, 0.6);
                    animation: growBar 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
                    transform-origin: left;
                    transform: scaleX(0);
                }

                @keyframes growBar {
                    to {
                        transform: scaleX(1);
                    }
                }

                .stat-info {
                    min-width: 180px;
                }

                .stat-number {
                    font-size: 3rem;
                    font-weight: 700;
                    color: white;
                    font-family: 'JetBrains Mono', monospace;
                    line-height: 1;
                    margin-bottom: 0.5rem;
                }

                .stat-label {
                    font-size: 0.95rem;
                    color: rgba(255, 255, 255, 0.8);
                    font-weight: 500;
                }

                /* Values Visual Cards */
                .values-visual-section {
                    margin-bottom: 8rem;
                }

                .values-header {
                    text-align: center;
                    max-width: 700px;
                    margin: 0 auto 4rem;
                    opacity: 0;
                    transform: translateY(30px);
                }

                .values-header.animate {
                    opacity: 1;
                    transform: translateY(0);
                    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .values-cards {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 2rem;
                }

                .value-visual-card {
                    background: white;
                    border-radius: 20px;
                    overflow: hidden;
                    box-shadow:
                        0 2px 8px rgba(0, 0, 0, 0.06),
                        0 8px 24px rgba(0, 0, 0, 0.04);
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                    opacity: 0;
                    transform: translateY(40px);
                }

                .value-visual-card.animate {
                    opacity: 1;
                    transform: translateY(0);
                    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .value-visual-card:hover {
                    transform: translateY(-12px);
                    box-shadow:
                        0 8px 16px rgba(0, 0, 0, 0.08),
                        0 20px 48px rgba(194, 38, 32, 0.15);
                }

                .value-card-image {
                    position: relative;
                    height: 240px;
                    overflow: hidden;
                }

                .value-card-image img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .value-visual-card:hover .value-card-image img {
                    transform: scale(1.1);
                }

                .value-card-overlay {
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(180deg,
                            transparent 0%,
                            rgba(26, 26, 26, 0.4) 100%);
                }

                .value-card-content {
                    padding: 2rem;
                    position: relative;
                }

                .value-card-icon {
                    width: 56px;
                    height: 56px;
                    background: linear-gradient(135deg, rgba(194, 38, 32, 0.1), rgba(194, 38, 32, 0.05));
                    border-radius: 14px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: -3.5rem;
                    margin-bottom: 1.5rem;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                    backdrop-filter: blur(10px);
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .value-visual-card:hover .value-card-icon {
                    background: #c22620;
                    transform: scale(1.1);
                }

                .value-card-icon svg {
                    width: 28px;
                    height: 28px;
                    color: #c22620;
                    transition: color 0.4s;
                }

                .value-visual-card:hover .value-card-icon svg {
                    color: white;
                }

                .value-card-title {
                    font-size: 1.5rem;
                    font-weight: 700;
                    color: #1a1a1a;
                    margin-bottom: 0.75rem;
                }

                .value-card-text {
                    font-size: 1rem;
                    color: #7c7b7b;
                    line-height: 1.7;
                }

                /* Responsive Design */
                @media (max-width: 1200px) {
                    .image-grid {
                        grid-template-columns: repeat(6, 1fr);
                    }

                    .grid-large {
                        grid-column: span 6;
                        grid-row: span 1;
                    }

                    .grid-tall {
                        grid-column: span 6;
                        grid-row: span 1;
                    }

                    .grid-wide {
                        grid-column: span 6;
                    }

                    .grid-medium {
                        grid-column: span 6;
                    }
                }

                @media (max-width: 991px) {
                    .about-hero-visual {
                        height: 70vh;
                        min-height: 500px;
                        margin-bottom: 6rem;
                    }

                    .hero-title {
                        font-size: 3.5rem;
                    }

                    .hero-subtitle {
                        font-size: 1.25rem;
                    }

                    .story-grid {
                        grid-template-columns: 1fr;
                        gap: 3rem;
                    }

                    .story-image img {
                        height: 400px;
                    }

                    .section-title {
                        font-size: 2.75rem;
                    }

                    .values-cards {
                        grid-template-columns: 1fr;
                    }

                    .banner-content {
                        padding: 3rem 2rem;
                    }
                }

                @media (max-width: 767px) {
                    .about-visual-container {
                        padding: 0 1.5rem;
                    }

                    .about-hero-visual {
                        height: 60vh;
                        min-height: 400px;
                        margin-bottom: 4rem;
                    }

                    .hero-title {
                        font-size: 2.5rem;
                    }

                    .hero-subtitle {
                        font-size: 1.125rem;
                    }

                    .story-section {
                        margin-bottom: 4rem;
                    }

                    .story-image img {
                        height: 300px;
                    }

                    .section-title {
                        font-size: 2rem;
                    }

                    .section-text {
                        font-size: 1rem;
                    }

                    .story-stats {
                        grid-template-columns: 1fr;
                        gap: 1rem;
                    }

                    .image-grid {
                        grid-auto-rows: 200px;
                    }

                    .banner-section {
                        height: auto;
                        margin-bottom: 4rem;
                    }

                    .banner-content {
                        padding: 3rem 2rem;
                    }

                    .banner-stats {
                        gap: 2rem;
                    }

                    .banner-stat {
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 1rem;
                    }

                    .stat-visual {
                        width: 100%;
                    }

                    .stat-number {
                        font-size: 2.5rem;
                    }

                    .value-card-image {
                        height: 200px;
                    }
                }

                @media (max-width: 575px) {
                    .hero-title {
                        font-size: 2rem;
                    }

                    .hero-subtitle {
                        font-size: 1rem;
                    }

                    .section-title {
                        font-size: 1.75rem;
                    }

                    .story-image img {
                        height: 250px;
                    }

                    .mini-stat-number {
                        font-size: 1.5rem;
                    }

                    .banner-overlay {
                        background: rgba(26, 26, 26, 0.85);
                    }

                    .stat-number {
                        font-size: 2rem;
                    }

                    .value-card-title {
                        font-size: 1.25rem;
                    }
                }
            
            /* WHAT WE COVER SECTION */
            .what-we-cover {
                /* padding: 5rem 0 6rem; */
                background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
                position: relative;
                overflow: hidden;
            }

            .what-we-cover::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 1400px;
                height: 600px;
                background: radial-gradient(circle, rgba(194, 38, 32, 0.03) 0%, transparent 70%);
                pointer-events: none;
            }

            /* Section Header */
            .section-header {
                text-align: center;
                margin-bottom: 4rem;
                position: relative;
                z-index: 1;
            }

            .section-label {
                display: inline-block;
                font-size: 0.75rem;
                font-weight: 600;
                letter-spacing: 0.15em;
                text-transform: uppercase;
                color: #c22620;
                margin-bottom: 1rem;
                font-family: 'JetBrains Mono', monospace;
                position: relative;
                padding: 0 1.5rem;
            }

            .section-label::before,
            .section-label::after {
                content: '';
                position: absolute;
                top: 50%;
                width: 24px;
                height: 1px;
                background: linear-gradient(90deg, transparent, #c22620);
            }

            .section-label::before {
                left: 0;
            }

            .section-label::after {
                right: 0;
                background: linear-gradient(90deg, #c22620, transparent);
            }

            .section-title {
                font-size: 3.5rem;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 1.25rem;
                letter-spacing: -0.02em;
                line-height: 1.1;
            }

            .section-subtitle {
                font-size: 1.125rem;
                color: #7c7b7b;
                max-width: 700px;
                margin: 0 auto;
                line-height: 1.6;
            }

            /* Categories Row - Horizontal Layout */
            .categories-row {
                display: flex;
                gap: 1.5rem;
                max-width: 1400px;
                margin: 0 auto;
                position: relative;
                z-index: 1;
                overflow-x: auto;
                overflow-y: visible;
                padding: 0.5rem;
                margin: -0.5rem;
                scrollbar-width: thin;
                scrollbar-color: rgba(194, 38, 32, 0.3) transparent;
            }

            .categories-row::-webkit-scrollbar {
                height: 6px;
            }

            .categories-row::-webkit-scrollbar-track {
                background: transparent;
            }

            .categories-row::-webkit-scrollbar-thumb {
                background: rgba(194, 38, 32, 0.3);
                border-radius: 3px;
            }

            .categories-row::-webkit-scrollbar-thumb:hover {
                background: rgba(194, 38, 32, 0.5);
            }

            /* Category Card */
            .category-card {
                position: relative;
                flex: 0 0 calc(25% - 1.125rem);
                min-width: 280px;
                height: 420px;
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(20px) saturate(180%);
                border-radius: 20px;
                overflow: hidden;
                box-shadow:
                    0 1px 2px rgba(0, 0, 0, 0.04),
                    0 4px 12px rgba(0, 0, 0, 0.03),
                    inset 0 0 0 1px rgba(0, 0, 0, 0.06);
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                cursor: pointer;
            }

            .category-card::before {
                content: '';
                position: absolute;
                inset: -2px;
                border-radius: 20px;
                padding: 2px;
                background: linear-gradient(135deg, #c22620, rgba(194, 38, 32, 0.3));
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask-composite: exclude;
                opacity: 0;
                transition: opacity 0.5s;
                z-index: 1;
            }

            .category-card:hover {
                transform: translateY(-12px);
                box-shadow:
                    0 12px 32px rgba(0, 0, 0, 0.1),
                    0 24px 64px rgba(194, 38, 32, 0.15),
                    inset 0 0 0 1px rgba(194, 38, 32, 0.1);
            }

            .category-card:hover::before {
                opacity: 1;
            }

            /* Card Image */
            .card-image {
                position: relative;
                width: 100%;
                height: 240px;
                overflow: hidden;
                border-radius: 20px 20px 0 0;
            }

            .card-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .category-card:hover .card-image img {
                transform: scale(1.08);
            }

            /* Image Overlay */
            .image-overlay {
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg,
                        transparent 0%,
                        rgba(0, 0, 0, 0.05) 50%,
                        rgba(0, 0, 0, 0.4) 100%);
                opacity: 1;
                transition: opacity 0.5s;
            }

            .category-card:hover .image-overlay {
                background: linear-gradient(180deg,
                        rgba(194, 38, 32, 0.1) 0%,
                        rgba(194, 38, 32, 0.2) 50%,
                        rgba(194, 38, 32, 0.6) 100%);
            }

            /* Card Content */
            .card-content {
                padding: 2rem 1.75rem;
                display: flex;
                flex-direction: column;
                height: 180px;
                position: relative;
                z-index: 2;
            }

            .card-title {
                font-size: 1.375rem;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 0.75rem;
                letter-spacing: -0.01em;
                transition: color 0.3s;
            }

            .category-card:hover .card-title {
                color: #c22620;
            }

            .card-desc {
                font-size: 0.9375rem;
                color: #7c7b7b;
                line-height: 1.5;
                margin-bottom: auto;
            }

            /* Card Footer */
            .card-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 1.25rem;
                border-top: 1px solid rgba(0, 0, 0, 0.06);
                margin-top: auto;
            }

            .parts-count {
                font-size: 0.8125rem;
                font-weight: 600;
                color: #1a1a1a;
                font-family: 'JetBrains Mono', monospace;
                letter-spacing: 0.02em;
                position: relative;
                padding-left: 1.25rem;
            }

            .parts-count::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 6px;
                height: 6px;
                background: #c22620;
                border-radius: 50%;
                box-shadow: 0 0 8px rgba(194, 38, 32, 0.4);
                animation: pulse 2s ease-in-out infinite;
            }

            @keyframes pulse {

                0%,
                100% {
                    opacity: 1;
                    transform: translateY(-50%) scale(1);
                }

                50% {
                    opacity: 0.6;
                    transform: translateY(-50%) scale(1.2);
                }
            }

            .card-arrow {
                font-size: 1.5rem;
                color: #c22620;
                font-weight: 300;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                opacity: 0.6;
            }

            .category-card:hover .card-arrow {
                transform: translateX(4px);
                opacity: 1;
            }

            /* Responsive Design */
            @media (max-width: 1400px) {
                .categories-row {
                    max-width: 100%;
                    padding-left: 1.5rem;
                    padding-right: 1.5rem;
                }
            }

            @media (max-width: 991px) {
                .what-we-cover {
                    padding: 4rem 0 5rem;
                }

                .section-header {
                    margin-bottom: 3rem;
                }

                .section-title {
                    font-size: 2.75rem;
                }

                .section-subtitle {
                    font-size: 1rem;
                }

                .category-card {
                    flex: 0 0 calc(33.333% - 1rem);
                    min-width: 260px;
                    height: 400px;
                }

                .card-image {
                    height: 220px;
                }

                .card-content {
                    height: 180px;
                    padding: 1.75rem 1.5rem;
                }
            }

            @media (max-width: 767px) {
                .what-we-cover {
                    padding: 3rem 0 4rem;
                }

                .section-header {
                    margin-bottom: 2.5rem;
                    padding: 0 1rem;
                }

                .section-title {
                    font-size: 2.25rem;
                }

                .section-subtitle {
                    font-size: 0.9375rem;
                }

                .categories-row {
                    gap: 1.25rem;
                    padding-left: 1rem;
                    padding-right: 1rem;
                }

                .category-card {
                    flex: 0 0 calc(50% - 0.625rem);
                    min-width: 240px;
                    height: 380px;
                }

                .card-image {
                    height: 200px;
                }

                .card-content {
                    padding: 1.5rem 1.25rem;
                }

                .card-title {
                    font-size: 1.25rem;
                }

                .card-desc {
                    font-size: 0.875rem;
                }
            }

            @media (max-width: 575px) {
                .what-we-cover {
                    padding: 2.5rem 0 3.5rem;
                }

                .section-title {
                    font-size: 2rem;
                }

                .categories-row {
                    gap: 1rem;
                    padding-left: 0.75rem;
                    padding-right: 0.75rem;
                }

                .category-card {
                    flex: 0 0 85%;
                    min-width: 220px;
                    height: 360px;
                }

                .card-image {
                    height: 190px;
                }

                .card-content {
                    padding: 1.25rem 1rem;
                    height: 170px;
                }
            }

            /* Animation - Stagger cards on scroll */
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .category-card {
                animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
            }

            .category-card:nth-child(1) {
                animation-delay: 0.1s;
            }

            .category-card:nth-child(2) {
                animation-delay: 0.2s;
            }

            .category-card:nth-child(3) {
                animation-delay: 0.3s;
            }

            .category-card:nth-child(4) {
                animation-delay: 0.4s;
            }
       
            /* ==================== AUTOPARTS SHOWCASE SECTION ==================== */
            .autoparts-showcase {
                padding: 6rem 1.5rem 0;
                background: #fafafa;
                /* 60% - Dominant background */
                position: relative;
                overflow: hidden;
            }

            .autoparts-showcase::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                max-width: 1600px;
                height: 500px;
                background: radial-gradient(circle at 50% 0%, rgba(194, 38, 32, 0.04), transparent 70%);
                pointer-events: none;
            }

            .showcase-container {
                max-width: 1400px;
                margin: 0 auto;
                position: relative;
            }

            /* ==================== SHOWCASE HEADER ==================== */
            .showcase-header {
                text-align: center;
                margin-bottom: 3rem;
                animation: headerFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            @keyframes headerFadeIn {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .header-badge-pill {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.5rem 1.25rem;
                background: rgba(255, 255, 255, 0.85);
                backdrop-filter: blur(20px) saturate(180%);
                border-radius: 50px;
                border: 1px solid rgba(0, 0, 0, 0.06);
                margin-bottom: 1.5rem;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .header-badge-pill:hover {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                transform: translateY(-2px);
            }

            .badge-pulse-dot {
                width: 6px;
                height: 6px;
                background: #c22620;
                /* 10% - Accent */
                border-radius: 50%;
                animation: dotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }

            @keyframes dotPulse {

                0%,
                100% {
                    opacity: 1;
                    transform: scale(1);
                }

                50% {
                    opacity: 0.5;
                    transform: scale(0.95);
                }
            }

            .badge-label-text {
                font-size: 0.75rem;
                font-weight: 600;
                letter-spacing: 0.1em;
                color: #1a1a1a;
                /* 30% - Secondary */
                font-family: 'JetBrains Mono', monospace;
            }

            .showcase-main-title {
                font-size: 3.5rem;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 1rem;
                letter-spacing: -0.02em;
                line-height: 1.1;
            }

            .showcase-description {
                font-size: 1.125rem;
                color: #7c7b7b;
                /* 30% - Secondary */
                max-width: 600px;
                margin: 0 auto;
                line-height: 1.6;
            }

            /* ==================== CATEGORY FILTER ==================== */
            .category-filter-bar {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.75rem;
                margin-bottom: 3rem;
                flex-wrap: wrap;
                animation: headerFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
            }

            .filter-btn-item {
                padding: 0.625rem 1.5rem;
                background: rgba(255, 255, 255, 0.8);
                border: 1px solid rgba(0, 0, 0, 0.08);
                border-radius: 12px;
                font-size: 0.875rem;
                font-weight: 600;
                color: #1a1a1a;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
            }

            .filter-btn-item::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, #c22620, #a51d18);
                opacity: 0;
                transition: opacity 0.3s;
            }

            .filter-btn-item span {
                position: relative;
                z-index: 1;
            }

            .filter-btn-item:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                border-color: rgba(194, 38, 32, 0.3);
            }

            .filter-btn-item.active {
                background: linear-gradient(135deg, #c22620, #a51d18);
                color: white;
                border-color: transparent;
                box-shadow: 0 4px 16px rgba(194, 38, 32, 0.3);
            }

            .filter-btn-item.active::before {
                opacity: 1;
            }

            /* ==================== PRODUCTS GRID ==================== */
            .products-display-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 2rem;
                margin-bottom: 3rem;
            }

            /* ==================== PRODUCT SHOWCASE ITEM ==================== */
            .product-showcase-item {
                position: relative;
                background: rgba(255, 255, 255, 0.92);
                /* 60% - Dominant */
                backdrop-filter: blur(24px) saturate(180%);
                border-radius: 18px;
                border: 1px solid rgba(0, 0, 0, 0.06);
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                cursor: pointer;
                box-shadow:
                    0 2px 8px rgba(0, 0, 0, 0.04),
                    0 8px 24px rgba(0, 0, 0, 0.03);
                animation: itemSlideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
            }

            @keyframes itemSlideUp {
                from {
                    opacity: 0;
                    transform: translateY(40px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .product-showcase-item:nth-child(1) {
                animation-delay: 0.1s;
            }

            .product-showcase-item:nth-child(2) {
                animation-delay: 0.15s;
            }

            .product-showcase-item:nth-child(3) {
                animation-delay: 0.2s;
            }

            .product-showcase-item:nth-child(4) {
                animation-delay: 0.25s;
            }

            .product-showcase-item:nth-child(5) {
                animation-delay: 0.3s;
            }

            .product-showcase-item:nth-child(6) {
                animation-delay: 0.35s;
            }

            .product-showcase-item:nth-child(7) {
                animation-delay: 0.4s;
            }

            .product-showcase-item:nth-child(8) {
                animation-delay: 0.45s;
            }

            .product-showcase-item:hover {
                transform: translateY(-8px);
                box-shadow:
                    0 4px 16px rgba(0, 0, 0, 0.08),
                    0 16px 48px rgba(194, 38, 32, 0.12),
                    inset 0 0 0 1px rgba(194, 38, 32, 0.1);
            }

            /* Product Glow Effect */
            .product-item-glow {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: radial-gradient(circle at 50% 0%, rgba(194, 38, 32, 0.06), transparent 60%);
                opacity: 0;
                transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                pointer-events: none;
            }

            .product-showcase-item:hover .product-item-glow {
                opacity: 1;
            }

            /* Product Badges */
            .product-badge-new,
            .product-badge-sale {
                position: absolute;
                top: 1rem;
                right: 1rem;
                padding: 0.375rem 0.875rem;
                border-radius: 8px;
                font-size: 0.688rem;
                font-weight: 700;
                letter-spacing: 0.05em;
                z-index: 10;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            }

            .product-badge-new {
                background: linear-gradient(135deg, #c22620, #a51d18);
                color: white;
            }

            .product-badge-sale {
                background: linear-gradient(135deg, #1a1a1a, #3a3a3a);
                color: white;
            }

            /* ==================== PRODUCT IMAGE ==================== */
            .product-image-wrapper {
                position: relative;
                width: 100%;
                height: 280px;
                background: linear-gradient(135deg, rgba(250, 250, 250, 0.8), rgba(255, 255, 255, 0.9));
                overflow: hidden;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            }

            .product-display-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .product-showcase-item:hover .product-display-image {
                transform: scale(1.05);
            }

            .product-quick-view {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0.8);
                width: 48px;
                height: 48px;
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(12px);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
            }

            .product-quick-view svg {
                width: 22px;
                height: 22px;
                color: #c22620;
                /* 10% - Accent */
            }

            .product-showcase-item:hover .product-quick-view {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            /* ==================== PRODUCT INFO ==================== */
            .product-info-content {
                padding: 1.5rem;
            }

            .product-rating-stars {
                display: flex;
                align-items: center;
                gap: 0.25rem;
                margin-bottom: 0.75rem;
            }

            .star-icon {
                font-size: 0.875rem;
                color: #d1d1d1;
                transition: color 0.2s;
            }

            .star-icon.filled {
                color: #FFB800;
            }

            .star-icon.half {
                background: linear-gradient(90deg, #FFB800 50%, #d1d1d1 50%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .rating-count-text {
                font-size: 0.75rem;
                color: #7c7b7b;
                /* 30% - Secondary */
                margin-left: 0.25rem;
            }

            .product-name-title {
                font-size: 1.125rem;
                font-weight: 700;
                color: #1a1a1a;
                /* 30% - Secondary */
                margin-bottom: 0.5rem;
                line-height: 1.3;
                min-height: 2.6em;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .product-sku-code {
                font-size: 0.75rem;
                color: #7c7b7b;
                font-family: 'JetBrains Mono', monospace;
                margin-bottom: 1rem;
            }

            .product-features-list {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
                margin-bottom: 1.25rem;
            }

            .feature-tag-item {
                padding: 0.375rem 0.75rem;
                background: rgba(194, 38, 32, 0.08);
                /* 10% - Accent tint */
                color: #c22620;
                border-radius: 6px;
                font-size: 0.688rem;
                font-weight: 600;
                letter-spacing: 0.02em;
                border: 1px solid rgba(194, 38, 32, 0.15);
            }

            .product-pricing-info {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                margin-bottom: 1rem;
            }

            .price-main-amount {
                font-size: 1.75rem;
                font-weight: 700;
                color: #c22620;
                /* 10% - Accent */
                font-family: 'JetBrains Mono', monospace;
            }

            .price-original-strike {
                font-size: 1rem;
                color: #7c7b7b;
                text-decoration: line-through;
                opacity: 0.6;
            }

            .product-stock-status {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.5rem 0.75rem;
                background: rgba(0, 0, 0, 0.03);
                border-radius: 8px;
                margin-bottom: 1.25rem;
                font-size: 0.813rem;
                font-weight: 500;
            }

            .stock-indicator-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                animation: dotPulse 2s ease-in-out infinite;
            }

            .product-stock-status.in-stock {
                color: #22c55e;
                background: rgba(34, 197, 94, 0.08);
            }

            .product-stock-status.in-stock .stock-indicator-dot {
                background: #22c55e;
            }

            .product-stock-status.low-stock {
                color: #f59e0b;
                background: rgba(245, 158, 11, 0.08);
            }

            .product-stock-status.low-stock .stock-indicator-dot {
                background: #f59e0b;
            }

            /* ==================== ADD TO CART BUTTON ==================== */
            .add-cart-button {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                padding: 0.875rem 1.5rem;
                background: transparent;
                border: 2px solid rgba(194, 38, 32, 0.2);
                border-radius: 12px;
                font-size: 0.938rem;
                font-weight: 600;
                color: #1a1a1a;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
            }

            .add-cart-button::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, #c22620, #a51d18);
                opacity: 0;
                transition: opacity 0.3s;
            }

            .add-cart-button span {
                position: relative;
                z-index: 1;
                transition: color 0.3s;
            }

            .cart-icon-svg {
                width: 18px;
                height: 18px;
                position: relative;
                z-index: 1;
                transition: all 0.3s;
            }

            .cart-icon-svg path {
                stroke: #c22620;
                transition: stroke 0.3s;
            }

            .add-cart-button:hover {
                border-color: #c22620;
                transform: translateY(-2px);
                box-shadow: 0 4px 16px rgba(194, 38, 32, 0.25);
            }

            .add-cart-button:hover::before {
                opacity: 1;
            }

            .add-cart-button:hover span {
                color: white;
            }

            .add-cart-button:hover .cart-icon-svg path {
                stroke: white;
            }

            .add-cart-button:active {
                transform: translateY(0);
            }

            /* ==================== LOAD MORE ==================== */
            .showcase-load-more {
                text-align: center;
                padding-top: 2rem;
            }

            .load-more-products-btn {
                position: relative;
                padding: 1rem 3rem;
                background: rgba(255, 255, 255, 0.9);
                border: 2px solid rgba(0, 0, 0, 0.08);
                border-radius: 14px;
                font-size: 1rem;
                font-weight: 600;
                color: #1a1a1a;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                overflow: hidden;
            }

            .load-more-products-btn:hover {
                background: linear-gradient(135deg, #c22620, #a51d18);
                color: white;
                border-color: transparent;
                transform: translateY(-4px);
                box-shadow: 0 8px 24px rgba(194, 38, 32, 0.3);
            }

            .btn-loading-spinner {
                display: inline-block;
                margin-left: 0.5rem;
            }

            .btn-loading-spinner svg {
                width: 20px;
                height: 20px;
                animation: spinRotate 1s linear infinite;
            }

            @keyframes spinRotate {
                from {
                    transform: rotate(0deg);
                }

                to {
                    transform: rotate(360deg);
                }
            }

            /* ==================== RESPONSIVE ==================== */
            @media (max-width: 1200px) {
                .products-display-grid {
                    grid-template-columns: repeat(3, 1fr);
                }
            }

            @media (max-width: 991px) {
                .autoparts-showcase {
                    padding: 4rem 1rem;
                }

                .showcase-main-title {
                    font-size: 2.5rem;
                }

                .products-display-grid {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1.5rem;
                }

                .category-filter-bar {
                    gap: 0.5rem;
                }

                .filter-btn-item {
                    padding: 0.5rem 1.25rem;
                    font-size: 0.813rem;
                }
            }

            @media (max-width: 767px) {
                .autoparts-showcase {
                    padding: 3rem 1rem;
                }

                .showcase-header {
                    margin-bottom: 2rem;
                }

                .showcase-main-title {
                    font-size: 2rem;
                }

                .showcase-description {
                    font-size: 1rem;
                }

                .category-filter-bar {
                    margin-bottom: 2rem;
                }

                .products-display-grid {
                    gap: 1.25rem;
                }

                .product-image-wrapper {
                    height: 240px;
                }

                .product-info-content {
                    padding: 1.25rem;
                }
            }

            @media (max-width: 575px) {
                .products-display-grid {
                    grid-template-columns: 1fr;
                }

                .showcase-main-title {
                    font-size: 1.75rem;
                }

                .category-filter-bar {
                    gap: 0.5rem;
                }

                .filter-btn-item {
                    padding: 0.5rem 1rem;
                    font-size: 0.75rem;
                }

                .product-image-wrapper {
                    height: 220px;
                }

                .price-main-amount {
                    font-size: 1.5rem;
                }

                .load-more-products-btn {
                    padding: 0.875rem 2rem;
                    font-size: 0.938rem;
                }
            }
      
            /* ========================================
   SERVICES SECTION STYLES
   60-30-10 Rule: 60% White/Light, 30% Gray, 10% Red
   ======================================== */

            .services-section {
                position: relative;
                padding: 8rem 0;
                background: linear-gradient(180deg, #fafafa 0%, #ffffff 50%, #fafafa 100%);
                overflow: hidden;
            }

            /* Floating Background Elements */
            .floating-element {
                position: absolute;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(194, 38, 32, 0.03) 0%, transparent 70%);
                pointer-events: none;
                animation: float 20s ease-in-out infinite;
            }

            .floating-element-1 {
                width: 600px;
                height: 600px;
                top: 10%;
                left: -200px;
                animation-delay: 0s;
            }

            .floating-element-2 {
                width: 500px;
                height: 500px;
                bottom: 10%;
                right: -150px;
                animation-delay: -10s;
            }

            @keyframes float {

                0%,
                100% {
                    transform: translate(0, 0) scale(1);
                }

                33% {
                    transform: translate(30px, -30px) scale(1.05);
                }

                66% {
                    transform: translate(-20px, 20px) scale(0.95);
                }
            }

            /* Section Header */
            .section-header {
                text-align: center;
                max-width: 800px;
                margin: 0 auto 5rem;
            }

            .header-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.625rem 1.25rem;
                background: rgba(255, 255, 255, 0.8);
                backdrop-filter: blur(20px) saturate(180%);
                border: 1px solid rgba(194, 38, 32, 0.12);
                border-radius: 100px;
                font-size: 0.813rem;
                font-weight: 600;
                color: #c22620;
                margin-bottom: 1.5rem;
                box-shadow:
                    0 2px 8px rgba(194, 38, 32, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.8);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .header-badge:hover {
                transform: translateY(-2px);
                box-shadow:
                    0 4px 16px rgba(194, 38, 32, 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.9);
            }

            .header-badge svg {
                stroke: currentColor;
            }

            .section-title-l {
                font-size: 3.5rem;
                font-weight: 700;
                color: whitesmoke;
                letter-spacing: -0.03em;
                line-height: 1.1;
                margin-bottom: 1.5rem;
            }

            .section-subtitle {
                font-size: 1.25rem;
                color: #7c7b7b;
                line-height: 1.6;
                margin: 0;
            }

            /* Services Grid */
            .services-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 2rem;
                margin-bottom: 4rem;
            }

            /* Service Card */
            .service-card {
                position: relative;
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(24px) saturate(180%);
                border-radius: 24px;
                padding: 2.5rem;
                border: 1px solid rgba(0, 0, 0, 0.06);
                box-shadow:
                    0 2px 8px rgba(0, 0, 0, 0.04),
                    0 8px 24px rgba(0, 0, 0, 0.03);
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                cursor: pointer;
                overflow: hidden;
            }

            .service-card::before {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 24px;
                padding: 1px;
                background: linear-gradient(135deg, rgba(194, 38, 32, 0.15), transparent);
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask-composite: exclude;
                opacity: 0;
                transition: opacity 0.5s;
            }

            .service-card:hover {
                transform: translateY(-12px) scale(1.02);
                box-shadow:
                    0 8px 20px rgba(0, 0, 0, 0.06),
                    0 20px 50px rgba(194, 38, 32, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.9);
                border-color: rgba(194, 38, 32, 0.1);
            }

            .service-card:hover::before {
                opacity: 1;
            }

            /* Icon Wrapper */
            .service-icon-wrapper {
                position: relative;
                width: 80px;
                height: 80px;
                margin-bottom: 2rem;
            }

            .service-icon {
                position: relative;
                width: 80px;
                height: 80px;
                background: linear-gradient(135deg, rgba(194, 38, 32, 0.08), rgba(194, 38, 32, 0.04));
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid rgba(194, 38, 32, 0.12);
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 2;
            }

            .service-icon svg {
                stroke: #c22620;
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .service-card:hover .service-icon {
                background: linear-gradient(135deg, #c22620, #a51d18);
                border-color: #c22620;
                transform: scale(1.1) rotate(-5deg);
                box-shadow:
                    0 8px 20px rgba(194, 38, 32, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
            }

            .service-card:hover .service-icon svg {
                stroke: white;
                transform: scale(1.1);
            }

            /* Icon Glow Effect */
            .icon-glow {
                position: absolute;
                inset: -10px;
                background: radial-gradient(circle, rgba(194, 38, 32, 0.2) 0%, transparent 70%);
                border-radius: 50%;
                opacity: 0;
                transition: opacity 0.5s;
                z-index: 1;
            }

            .service-card:hover .icon-glow {
                opacity: 1;
                animation: pulse 2s ease-in-out infinite;
            }

            @keyframes pulse {

                0%,
                100% {
                    transform: scale(1);
                    opacity: 0.3;
                }

                50% {
                    transform: scale(1.2);
                    opacity: 0.5;
                }
            }

            /* Service Content */
            .service-title {
                font-size: 1.5rem;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 1rem;
                letter-spacing: -0.02em;
                transition: color 0.3s;
            }

            .service-card:hover .service-title {
                color: #c22620;
            }

            .service-description {
                font-size: 0.938rem;
                color: #7c7b7b;
                line-height: 1.7;
                margin-bottom: 1.5rem;
            }

            /* Service Features */
            .service-features {
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
                margin-bottom: 1.5rem;
            }

            .feature-item {
                display: flex;
                align-items: center;
                gap: 0.625rem;
                font-size: 0.875rem;
                color: #1a1a1a;
                font-weight: 500;
            }

            .feature-item svg {
                stroke: #c22620;
                flex-shrink: 0;
            }

            /* Service Arrow */
            .service-arrow {
                position: absolute;
                bottom: 2rem;
                right: 2rem;
                width: 44px;
                height: 44px;
                background: rgba(194, 38, 32, 0.08);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transform: translateX(-10px);
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .service-arrow svg {
                stroke: #c22620;
                transition: all 0.3s;
            }

            .service-card:hover .service-arrow {
                opacity: 1;
                transform: translateX(0);
                background: #c22620;
            }

            .service-card:hover .service-arrow svg {
                stroke: white;
                animation: arrowSlide 1s ease-in-out infinite;
            }

            @keyframes arrowSlide {

                0%,
                100% {
                    transform: translateX(0);
                }

                50% {
                    transform: translateX(4px);
                }
            }

            /* Bottom CTA */
            .services-cta {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 2rem;
                padding: 3rem;
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(30px) saturate(180%);
                border-radius: 24px;
                border: 1px solid rgba(0, 0, 0, 0.06);
                box-shadow:
                    0 4px 16px rgba(0, 0, 0, 0.04),
                    0 12px 32px rgba(0, 0, 0, 0.03);
                position: relative;
                overflow: hidden;
            }

            .services-cta::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(194, 38, 32, 0.03), transparent);
                pointer-events: none;
            }

            .cta-content {
                flex: 1;
            }

            .cta-content h3 {
                font-size: 1.75rem;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 0.5rem;
                letter-spacing: -0.02em;
            }

            .cta-content p {
                font-size: 1rem;
                color: #7c7b7b;
                margin: 0;
            }

            .cta-button {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                padding: 1rem 2rem;
                background: linear-gradient(135deg, #c22620, #a51d18);
                color: white;
                border: none;
                border-radius: 14px;
                font-size: 1rem;
                font-weight: 600;
                cursor: pointer;
                box-shadow:
                    0 4px 16px rgba(194, 38, 32, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
                flex-shrink: 0;
            }

            .cta-button::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                transition: left 0.6s;
            }

            .cta-button:hover {
                transform: translateY(-4px) scale(1.05);
                box-shadow:
                    0 8px 24px rgba(194, 38, 32, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
            }

            .cta-button:hover::before {
                left: 100%;
            }

            .cta-button svg {
                stroke: currentColor;
                transition: transform 0.3s;
            }

            .cta-button:hover svg {
                transform: translateX(4px);
            }

            .cta-button:active {
                transform: translateY(-2px) scale(1.02);
            }

            /* Responsive Design */
            @media (max-width: 1199px) {
                .services-grid {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1.5rem;
                }

                .section-title {
                    font-size: 3rem;
                }
            }

            @media (max-width: 991px) {
                .services-section {
                    padding: 6rem 0;
                }

                .section-header {
                    margin-bottom: 4rem;
                }

                .section-title {
                    font-size: 2.5rem;
                }

                .section-subtitle {
                    font-size: 1.125rem;
                }

                .services-cta {
                    flex-direction: column;
                    text-align: center;
                    padding: 2.5rem;
                }

                .cta-button {
                    width: 100%;
                    justify-content: center;
                }
            }

            @media (max-width: 767px) {
                .services-section {
                    padding: 4rem 0;
                }

                .section-header {
                    margin-bottom: 3rem;
                }

                .section-title {
                    font-size: 2rem;
                }

                .section-subtitle {
                    font-size: 1rem;
                }

                .services-grid {
                    grid-template-columns: 1fr;
                    gap: 1.25rem;
                }

                .service-card {
                    padding: 2rem;
                }

                .service-icon-wrapper {
                    width: 70px;
                    height: 70px;
                    margin-bottom: 1.5rem;
                }

                .service-icon {
                    width: 70px;
                    height: 70px;
                    border-radius: 18px;
                }

                .service-icon svg {
                    width: 28px;
                    height: 28px;
                }

                .service-title {
                    font-size: 1.25rem;
                }

                .service-description {
                    font-size: 0.875rem;
                }

                .services-cta {
                    padding: 2rem;
                    gap: 1.5rem;
                }

                .cta-content h3 {
                    font-size: 1.5rem;
                }

                .cta-content p {
                    font-size: 0.938rem;
                }

                .cta-button {
                    padding: 0.875rem 1.75rem;
                    font-size: 0.938rem;
                }
            }

            @media (max-width: 575px) {
                .services-section {
                    padding: 3rem 0;
                }

                .section-title {
                    font-size: 1.75rem;
                }

                .header-badge {
                    font-size: 0.75rem;
                    padding: 0.5rem 1rem;
                }

                .service-card {
                    padding: 1.75rem;
                }

                .service-arrow {
                    width: 40px;
                    height: 40px;
                    bottom: 1.5rem;
                    right: 1.5rem;
                }

                .service-arrow svg {
                    width: 18px;
                    height: 18px;
                }

                .services-cta {
                    padding: 1.75rem;
                }

                .cta-content h3 {
                    font-size: 1.25rem;
                }

                .cta-content p {
                    font-size: 0.875rem;
                }
            }

            /* Reduced Motion for Accessibility */
            @media (prefers-reduced-motion: reduce) {
                * {
                    animation-duration: 0.01ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 0.01ms !important;
                }

                .floating-element {
                    animation: none;
                }
            }

            /* Dark Mode Support (Optional) */
            @media (prefers-color-scheme: dark) {
                .services-section {
                    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 50%, #1a1a1a 100%);
                }

                .service-card {
                    background: rgba(30, 30, 30, 0.7);
                    border-color: rgba(255, 255, 255, 0.08);
                }

                .section-title,
                .service-title,
                .feature-item {
                    color: #ffffff;
                }

                .section-subtitle,
                .service-description {
                    color: #a0a0a0;
                }

                .header-badge {
                    background: rgba(30, 30, 30, 0.8);
                    border-color: rgba(194, 38, 32, 0.3);
                }
            }
       
            /* POPULAR PARTS SECTION */
            .popular-parts-section {
                padding: 3rem 0 5rem;
                background: #fafafa;
                position: relative;
                overflow: hidden;
            }

            .popular-parts-section::before {
                content: '';
                position: absolute;
                top: -50%;
                right: -20%;
                width: 600px;
                height: 600px;
                background: radial-gradient(circle, rgba(194, 38, 32, 0.03) 0%, transparent 70%);
                pointer-events: none;
            }

            /* Section Header */
            .section-header {
                text-align: center;
                margin-bottom: 3rem;
                position: relative;
            }

            .section-tag {
                display: inline-block;
                font-size: 0.625rem;
                font-weight: 700;
                letter-spacing: 0.15em;
                text-transform: uppercase;
                color: #c22620;
                background: rgba(194, 38, 32, 0.08);
                padding: 0.5rem 1.25rem;
                border-radius: 100px;
                margin-bottom: 1rem;
                font-family: 'JetBrains Mono', monospace;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .section-tag:hover {
                background: rgba(194, 38, 32, 0.12);
                transform: translateY(-2px);
            }

            .section-title {
                font-size: 2.5rem;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 0.75rem;
                letter-spacing: -0.02em;
                line-height: 1.2;
            }

            .section-desc {
                font-size: 1rem;
                color: #7c7b7b;
                max-width: 500px;
                margin: 0 auto;
                line-height: 1.6;
            }

            /* Parts Grid */
            .parts-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                gap: 1.5rem;
                max-width: 1200px;
                margin: 0 auto;
            }

            /* Part Card */
            .part-card {
                position: relative;
                background: rgba(255, 255, 255, 0.9);
                /* backdrop-filter: blur(20px) saturate(180%); */
                border-radius: 20px;
                padding: 2rem 1.75rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow:
                    0 1px 3px rgba(0, 0, 0, 0.04),
                    0 4px 12px rgba(0, 0, 0, 0.02),
                    inset 0 0 0 1px rgba(0, 0, 0, 0.05);
                cursor: pointer;
                overflow: hidden;
            }

            .part-card::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(194, 38, 32, 0.05) 0%, transparent 60%);
                opacity: 0;
                transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                border-radius: 20px;
            }

            .part-card:hover {
                transform: translateY(-8px);
                box-shadow:
                    0 4px 8px rgba(0, 0, 0, 0.06),
                    0 12px 32px rgba(194, 38, 32, 0.15),
                    inset 0 0 0 1px rgba(194, 38, 32, 0.15);
            }

            .part-card:hover::before {
                opacity: 1;
            }

            /* Part Icon */
            .part-icon {
                width: 80px;
                height: 80px;
                background: linear-gradient(135deg, rgba(194, 38, 32, 0.08) 0%, rgba(194, 38, 32, 0.04) 100%);
                border-radius: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 1.5rem;
                position: relative;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 1;
            }

            .part-icon svg {
                width: 40px;
                height: 40px;
                color: #c22620;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .part-card:hover .part-icon {
                background: linear-gradient(135deg, #c22620 0%, #a51d18 100%);
                transform: scale(1.1) rotate(-5deg);
                box-shadow: 0 8px 20px rgba(194, 38, 32, 0.25);
            }

            .part-card:hover .part-icon svg {
                color: white;
                transform: scale(1.05);
            }

            /* Part Content */
            .part-content {
                flex: 1;
                margin-bottom: 1.5rem;
                position: relative;
                z-index: 1;
            }

            .part-name {
                font-size: 1.125rem;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 0.75rem;
                letter-spacing: -0.01em;
                transition: color 0.3s;
            }

            .part-card:hover .part-name {
                color: #c22620;
            }

            .part-meta {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.75rem;
                flex-wrap: wrap;
            }

            .part-stock {
                font-size: 0.75rem;
                font-weight: 600;
                color: #059669;
                display: flex;
                align-items: center;
                gap: 0.375rem;
            }

            .part-stock::before {
                content: '';
                width: 6px;
                height: 6px;
                background: #059669;
                border-radius: 50%;
                display: inline-block;
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }

            @keyframes pulse {

                0%,
                100% {
                    opacity: 1;
                    transform: scale(1);
                }

                50% {
                    opacity: 0.5;
                    transform: scale(1.2);
                }
            }

            .part-badge {
                font-size: 0.688rem;
                font-weight: 600;
                color: #7c7b7b;
                background: rgba(0, 0, 0, 0.04);
                padding: 0.25rem 0.75rem;
                border-radius: 6px;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                font-family: 'JetBrains Mono', monospace;
            }

            /* Part CTA */
            .part-cta {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                padding: 0.75rem 1.5rem;
                background: rgba(0, 0, 0, 0.04);
                border: none;
                border-radius: 12px;
                font-size: 0.875rem;
                font-weight: 600;
                color: #1a1a1a;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
                z-index: 1;
                width: 100%;
            }

            .part-cta::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, #c22620, #a51d18);
                opacity: 0;
                transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                border-radius: 12px;
            }

            .part-cta span,
            .part-cta svg {
                position: relative;
                z-index: 1;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .part-cta svg {
                stroke: #1a1a1a;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .part-card:hover .part-cta {
                background: linear-gradient(135deg, #c22620, #a51d18);
                box-shadow: 0 4px 16px rgba(194, 38, 32, 0.3);
                transform: translateY(-2px);
            }

            .part-card:hover .part-cta::before {
                opacity: 1;
            }

            .part-card:hover .part-cta span,
            .part-card:hover .part-cta svg {
                color: white;
                stroke: white;
            }

            .part-cta:active {
                transform: translateY(0);
            }

            /* Responsive */
            @media (max-width: 991px) {
                .popular-parts-section {
                    padding: 2.5rem 0 4rem;
                }

                .section-title {
                    font-size: 2rem;
                }

                .parts-grid {
                    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                    gap: 1.25rem;
                }
            }

            @media (max-width: 767px) {
                .popular-parts-section {
                    padding: 2rem 0 3rem;
                }

                .section-header {
                    margin-bottom: 2rem;
                }

                .section-title {
                    font-size: 1.75rem;
                }

                .section-desc {
                    font-size: 0.938rem;
                }

                .parts-grid {
                    grid-template-columns: 1fr;
                    gap: 1rem;
                    max-width: 400px;
                }

                .part-card {
                    padding: 1.75rem 1.5rem;
                }

                .part-icon {
                    width: 70px;
                    height: 70px;
                    margin-bottom: 1.25rem;
                }

                .part-icon svg {
                    width: 36px;
                    height: 36px;
                }
            }

            @media (max-width: 575px) {
                .section-title {
                    font-size: 1.5rem;
                }

                .part-card {
                    padding: 1.5rem 1.25rem;
                }

                .part-icon {
                    width: 64px;
                    height: 64px;
                }

                .part-name {
                    font-size: 1rem;
                }
            }
       
            /* BRANDS SECTION - Premium Logo Slider */
            .brands-section {
                position: relative;
                /* padding: 5rem 0; */
                background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
                overflow: hidden;
            }

            .brands-section::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                max-width: 1400px;
                height: 1px;
                background: linear-gradient(90deg, transparent, rgba(194, 38, 32, 0.1) 50%, transparent);
            }

            .brands-container {
                max-width: 1400px;
                margin: 0 auto;
                padding: 0 2rem;
            }

            /* Section Header */
            .brands-header {
                text-align: center;
                margin-bottom: 4rem;
                animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .section-label {
                display: inline-block;
                font-size: 0.688rem;
                font-weight: 600;
                letter-spacing: 0.15em;
                text-transform: uppercase;
                color: #c22620;
                background: rgba(194, 38, 32, 0.08);
                padding: 0.5rem 1.25rem;
                border-radius: 20px;
                margin-bottom: 1.5rem;
                font-family: 'JetBrains Mono', monospace;
                position: relative;
            }

            .section-label::before {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 20px;
                padding: 1px;
                background: linear-gradient(135deg, rgba(194, 38, 32, 0.3), rgba(194, 38, 32, 0.1));
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask-composite: exclude;
            }

            .section-title {
                font-size: 2.75rem;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 1rem;
                letter-spacing: -0.02em;
                line-height: 1.2;
            }

            .section-subtitle {
                font-size: 1.125rem;
                color: #7c7b7b;
                max-width: 600px;
                margin: 0 auto;
                line-height: 1.6;
            }

            /* Logo Slider Wrapper */
            .brands-slider-wrapper {
                position: relative;
                overflow: hidden;
                padding: 2rem 0;
            }

            /* Gradient Fade Edges */
            .brands-slider-wrapper::before,
            .brands-slider-wrapper::after {
                content: '';
                position: absolute;
                top: 0;
                width: 200px;
                height: 100%;
                z-index: 2;
                pointer-events: none;
            }

            .brands-slider-wrapper::before {
                left: 0;
                background: linear-gradient(90deg, #f5f5f5, transparent);
            }

            .brands-slider-wrapper::after {
                right: 0;
                background: linear-gradient(270deg, #f5f5f5, transparent);
            }

            /* Slider Container */
            .brands-slider {
                display: flex;
                gap: 4rem;
                animation: scroll 40s linear infinite;
                will-change: transform;
            }

            @keyframes scroll {
                0% {
                    transform: translateX(0);
                }

                100% {
                    transform: translateX(-50%);
                }
            }

            .brands-slider:hover {
                animation-play-state: paused;
            }

            /* Individual Logo Item */
            .brand-logo-item {
                flex-shrink: 0;
                width: 200px;
                height: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: white;
                border-radius: 16px;
                padding: 1.5rem;
                box-shadow:
                    0 2px 8px rgba(0, 0, 0, 0.04),
                    0 1px 2px rgba(0, 0, 0, 0.06),
                    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
            }

            .brand-logo-item::before {
                content: '';
                position: absolute;
                inset: -2px;
                border-radius: 16px;
                padding: 2px;
                background: linear-gradient(135deg, #c22620, #7c7b7b);
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask-composite: exclude;
                opacity: 0;
                transition: opacity 0.4s;
            }

            .brand-logo-item:hover {
                transform: translateY(-8px) scale(1.05);
                box-shadow:
                    0 12px 32px rgba(194, 38, 32, 0.15),
                    0 4px 12px rgba(0, 0, 0, 0.08),
                    inset 0 0 0 1px rgba(194, 38, 32, 0.1);
            }

            .brand-logo-item:hover::before {
                opacity: 1;
            }

            /* Logo Image */
            .brand-logo-item img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                /* filter: grayscale(100%) brightness(0.9); */
                /* opacity: 0.6; */
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .brand-logo-item:hover img {
                filter: grayscale(0%) brightness(1);
                opacity: 1;
            }

            /* Responsive Design */
            @media (max-width: 991px) {
                .brands-section {
                    padding: 4rem 0;
                }

                .brands-header {
                    margin-bottom: 3rem;
                }

                .section-title {
                    font-size: 2.25rem;
                }

                .section-subtitle {
                    font-size: 1rem;
                }

                .brands-slider {
                    gap: 3rem;
                }

                .brand-logo-item {
                    width: 180px;
                    height: 90px;
                }

                .brands-slider-wrapper::before,
                .brands-slider-wrapper::after {
                    width: 120px;
                }
            }

            @media (max-width: 767px) {
                .brands-section {
                    padding: 3rem 0;
                }

                .brands-container {
                    padding: 0 1rem;
                }

                .brands-header {
                    margin-bottom: 2.5rem;
                }

                .section-label {
                    font-size: 0.625rem;
                    padding: 0.4rem 1rem;
                }

                .section-title {
                    font-size: 1.875rem;
                }

                .section-subtitle {
                    font-size: 0.938rem;
                }

                .brands-slider {
                    gap: 2rem;
                }

                .brand-logo-item {
                    width: 160px;
                    height: 80px;
                    padding: 1.25rem;
                }

                .brands-slider-wrapper::before,
                .brands-slider-wrapper::after {
                    width: 80px;
                }
            }

            @media (max-width: 575px) {
                .brands-section {
                    padding: 2.5rem 0;
                }

                .section-title {
                    font-size: 1.625rem;
                }

                .section-subtitle {
                    font-size: 0.875rem;
                }

                .brands-slider {
                    gap: 1.5rem;
                    animation: scroll 30s linear infinite;
                }

                .brand-logo-item {
                    width: 140px;
                    height: 70px;
                    padding: 1rem;
                    border-radius: 12px;
                }

                .brands-slider-wrapper::before,
                .brands-slider-wrapper::after {
                    width: 60px;
                }
            }

            @media (max-width: 400px) {
                .section-label {
                    font-size: 0.563rem;
                    padding: 0.375rem 0.875rem;
                }

                .section-title {
                    font-size: 1.5rem;
                }

                .brands-slider {
                    gap: 1.25rem;
                }

                .brand-logo-item {
                    width: 120px;
                    height: 60px;
                    padding: 0.875rem;
                    border-radius: 10px;
                }
            }

            /* Reduced Motion */
            @media (prefers-reduced-motion: reduce) {
                .brands-slider {
                    animation: scroll 80s linear infinite;
                }

                .brands-header,
                .brand-logo-item {
                    animation: none;
                }

                .brand-logo-item:hover {
                    transform: none;
                }
            }