/*header section*/
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #fafafa;
            -webkit-font-smoothing: antialiased;
        }

        /* COMPACT HEADER - Single Row Only */
        .header-wrapper {
            position: sticky;
            top: 30px;
            z-index: 1000;
            padding: 0 1.5rem;
            /* margin-bottom: 5rem; */
        }

        .header-bar {
            position: relative;
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(24px) saturate(180%);
            border-radius: 16px;
            height: 56px;
            /* COMPACT HEIGHT */
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5rem 0 0;
            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);
        }

        .header-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);
        }

        /* Logo - Breaks out of header bounds (unique concept) */
        .logo-zone {
            position: absolute;
            left: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }

        .logo-float {
            position: relative;
            width: 160px;
            height: 160px;
            /* BIG logo */
            /* background: white; */
            border-radius: 20px;
            padding: 14px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            animation: logoHover 6s ease-in-out infinite;
        }

        @keyframes logoHover {

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

            50% {
                transform: translateY(-4px);
            }
        }

        .logo-float::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 20px;
            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.3s;
        }

        /* .logo-float:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 
                0 8px 20px rgba(194,38,32,0.15),
                0 20px 40px rgba(0,0,0,0.08);
        } */

        /* .logo-float:hover::before {
            opacity: 1;
        } */

        .logo-float img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        /* Tagline beside logo */
        .brand-tag {
            position: absolute;
            left: 120px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.625rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #1a1a1a;
            opacity: 0.6;
            font-family: 'JetBrains Mono', monospace;
            white-space: nowrap;
        }

        /* Navigation - Compact & Minimal */
        .nav-main {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            margin: 0;
            padding: 0;
            padding-left: 240px;
            /* Space for logo + tagline */
        }

        .nav-link {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: #1a1a1a;
            text-decoration: none;
            border-radius: 10px;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            inset: 0;
            background: #c22620;
            border-radius: 10px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .nav-link span {
            position: relative;
            z-index: 1;
        }

        .nav-link:hover {
            color: white;
        }

        .nav-link:hover::before {
            opacity: 1;
        }

        /* CTA Group - Compact */
        .cta-zone {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
            margin-left: auto;
        }

        .search-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.04);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .search-icon:hover {
            background: #c22620;
        }

        .search-icon svg {
            width: 16px;
            height: 16px;
            stroke: #1a1a1a;
            transition: stroke 0.2s;
        }

        .search-icon:hover svg {
            stroke: white;
        }

        .cta-btn {
            padding: 0.625rem 1.5rem;
            background: linear-gradient(135deg, #c22620, #a51d18);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow:
                0 2px 8px rgba(194, 38, 32, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .cta-btn::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:hover {
            transform: translateY(-2px);
            box-shadow:
                0 4px 16px rgba(194, 38, 32, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }

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

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

        /* Mobile Toggle */
        .mobile-toggle {
            display: none;
            width: 36px;
            height: 36px;
            background: rgba(0, 0, 0, 0.04);
            border: none;
            border-radius: 10px;
            cursor: pointer;
            position: relative;
            transition: all 0.3s;
        }

        .mobile-toggle span {
            position: absolute;
            width: 18px;
            height: 2px;
            background: #1a1a1a;
            left: 50%;
            transform: translateX(-50%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .mobile-toggle span:nth-child(1) {
            top: 11px;
        }

        .mobile-toggle span:nth-child(2) {
            top: 17px;
        }

        .mobile-toggle span:nth-child(3) {
            top: 23px;
        }

        .mobile-toggle:hover {
            background: #c22620;
        }

        .mobile-toggle:hover span {
            background: white;
        }

        .mobile-toggle.active span:nth-child(1) {
            top: 17px;
            transform: translateX(-50%) rotate(45deg);
            background: white;
        }

        .mobile-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .mobile-toggle.active span:nth-child(3) {
            top: 17px;
            transform: translateX(-50%) rotate(-45deg);
            background: white;
        }

        .mobile-toggle.active {
            background: #c22620;
        }

        /* Mobile Menu Close Button */
        .mobile-close {
            display: none;
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            width: 44px;
            height: 44px;
            background: rgba(0, 0, 0, 0.05);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            z-index: 10;
            transition: all 0.2s;
        }

        .mobile-close::before,
        .mobile-close::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 2px;
            background: #1a1a1a;
            top: 50%;
            left: 50%;
            transition: background 0.2s;
        }

        .mobile-close::before {
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .mobile-close::after {
            transform: translate(-50%, -50%) rotate(-45deg);
        }

        .mobile-close:hover {
            background: #c22620;
        }

        .mobile-close:hover::before,
        .mobile-close:hover::after {
            background: white;
        }

        /* Demo Content */
        .content-area {
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 2rem;
            text-align: center;
        }

        .content-area h1 {
            font-size: 4rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 1.5rem;
            letter-spacing: -0.02em;
        }

        .content-area p {
            font-size: 1.25rem;
            color: #7c7b7b;
            max-width: 650px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* Responsive */
        @media (max-width: 991px) {
            .header-wrapper {
                top: 12px;
                padding: 0 1rem;
            }

            .header-bar {
                height: 64px;
                padding: 0 1rem 0 0;
            }

            .logo-zone {
                left: 1rem;
            }

            .logo-float {
                width: 70px;
                height: 70px;
                padding: 10px;
            }

            .brand-tag {
                display: none;
            }

            .nav-main {
                position: fixed;
                top: 0;
                right: -100%;
                width: 320px;
                height: 100vh;
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(40px) saturate(180%);
                padding: 5rem 2rem 2rem;
                flex-direction: column;
                gap: 0.5rem;
                box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
                transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 1000;
                margin: 0;
            }

            .nav-main.active {
                right: 0;
            }

            .nav-link {
                width: 100%;
                text-align: left;
                padding: 1rem 1.5rem;
                font-size: 1rem;
                border-radius: 12px;
            }

            .mobile-toggle {
                display: block;
            }

            .mobile-close {
                display: block;
            }

            .search-icon {
                display: none;
            }

            /* Mobile overlay */
            .mobile-overlay {
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(4px);
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.4s;
                z-index: 999;
            }

            .mobile-overlay.active {
                opacity: 1;
                pointer-events: all;
            }

            .content-area h1 {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 767px) {
            .header-bar {
                height: 60px;
                padding: 0 0.75rem 0 0;
            }

            .logo-zone {
                left: 0.75rem;
            }

            .logo-float {
                width: 60px;
                height: 60px;
                padding: 8px;
                border-radius: 14px;
            }

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

        @media (max-width: 575px) {
            .header-wrapper {
                top: 8px;
                padding: 0 0.75rem;
            }

            .header-bar {
                height: 56px;
                padding: 0 0.5rem 0 0;
            }

            .logo-zone {
                left: 0.5rem;
            }

            .logo-float {
                width: 52px;
                height: 52px;
                padding: 7px;
                border-radius: 12px;
            }

            .cta-zone {
                gap: 0.5rem;
            }

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

            .nav-main {
                /* width: 100%; */
                right: -100%;
                padding: 4rem 1.5rem 2rem;
            }

            .content-area {
                padding: 2rem 1rem;
            }

            .content-area h1 {
                font-size: 2rem;
            }

            .content-area p {
                font-size: 1rem;
            }
        }

        @media (max-width: 400px) {
            .header-bar {
                height: 52px;
                padding: 0 0.5rem 0 0;
            }

            .logo-zone {
                left: 0.5rem;
                top: 2rem;
            }

            .logo-float {
                width: 100px;
                height: 100px;
                padding: 6px;
                border-radius: 10px;
            }

            .cta-btn {
                padding: 0.4rem 0.75rem;
                font-size: 0.7rem;
            }

            .mobile-toggle {
                width: 32px;
                height: 32px;
            }

            .mobile-toggle span {
                width: 16px;
            }

            .mobile-toggle span:nth-child(1) {
                top: 9px;
            }

            .mobile-toggle span:nth-child(2) {
                top: 15px;
            }

            .mobile-toggle span:nth-child(3) {
                top: 21px;
            }

            .mobile-toggle.active span:nth-child(1),
            .mobile-toggle.active span:nth-child(3) {
                top: 15px;
            }
        }
        /*footer section*/
     /* Footer Container */
     .footer-wrapper {
         position: relative;
         padding: 6rem 1.5rem 0;
         background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
         overflow: hidden;
     }

     /* Decorative Background Elements */
     .footer-wrapper::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 1px;
         background: linear-gradient(90deg,
                 transparent 0%,
                 rgba(194, 38, 32, 0.3) 50%,
                 transparent 100%);
     }

     .footer-bg-pattern {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         opacity: 0.03;
         background-image:
             radial-gradient(circle at 25% 25%, #c22620 1px, transparent 1px),
             radial-gradient(circle at 75% 75%, #7c7b7b 1px, transparent 1px);
         background-size: 50px 50px;
         background-position: 0 0, 25px 25px;
         pointer-events: none;
     }

     /* Main Footer Content */
     .footer-main {
         position: relative;
         max-width: 1400px;
         margin: 0 auto;
         /* padding: 0 0 4rem; */
     }

     /* Footer Grid */
     .footer-grid {
         display: grid;
         grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr;
         gap: 3rem;
         margin-bottom: 3rem;
     }

     /* Brand Column */
     .footer-brand {
         padding-right: 2rem;
     }

     .footer-logo {
         width: 120px;
         height: 120px;
         background: white;
         border-radius: 20px;
         padding: 16px;
         margin-bottom: 1.5rem;
         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);
         position: relative;
         overflow: hidden;
     }

     .footer-logo::before {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(135deg, #c22620, #7c7b7b);
         opacity: 0;
         transition: opacity 0.4s;
     }

     .footer-logo:hover {
         transform: translateY(-4px);
         box-shadow:
             0 4px 16px rgba(194, 38, 32, 0.15),
             0 12px 32px rgba(0, 0, 0, 0.08),
             inset 0 0 0 1px rgba(194, 38, 32, 0.2);
     }

     .footer-logo:hover::before {
         opacity: 0.05;
     }

     .footer-logo img {
         width: 100%;
         height: 100%;
         object-fit: contain;
         position: relative;
         z-index: 1;
     }

     .footer-tagline {
         font-size: 0.938rem;
         line-height: 1.6;
         color: #7c7b7b;
         margin-bottom: 1rem;
         font-weight: 400;
     }

     .footer-tagline strong {
         color: #1a1a1a;
         font-weight: 600;
     }

     /* Contact Details */
     .footer-contact h4 {
         font-size: 0.75rem;
         font-weight: 700;
         letter-spacing: 0.1em;
         text-transform: uppercase;
         color: #1a1a1a;
         margin-bottom: 1.5rem;
         position: relative;
         padding-bottom: 0.75rem;
     }

     .footer-contact h4::after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 0;
         width: 32px;
         height: 2px;
         background: linear-gradient(90deg, #c22620, transparent);
         transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .footer-contact:hover h4::after {
         width: 48px;
     }

     .contact-info {
         list-style: none;
         padding: 0;
         margin: 0;
     }

     .contact-info li {
         margin-bottom: 1rem;
         display: flex;
         align-items: start;
         gap: 0.75rem;
     }

     .contact-icon {
         width: 20px;
         height: 20px;
         flex-shrink: 0;
         margin-top: 2px;
     }

     .contact-icon svg {
         width: 100%;
         height: 100%;
         stroke: #c22620;
         fill: none;
     }

     .contact-text {
         font-size: 0.938rem;
         color: #7c7b7b;
         line-height: 1.5;
     }

     .contact-text strong {
         display: block;
         color: #1a1a1a;
         font-weight: 600;
         margin-bottom: 0.25rem;
     }

     /* Footer Column */
     .footer-column h4 {
         font-size: 0.75rem;
         font-weight: 700;
         letter-spacing: 0.1em;
         text-transform: uppercase;
         color: #1a1a1a;
         margin-bottom: 1.5rem;
         position: relative;
         padding-bottom: 0.75rem;
     }

     .footer-column h4::after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 0;
         width: 32px;
         height: 2px;
         background: linear-gradient(90deg, #c22620, transparent);
         transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .footer-column:hover h4::after {
         width: 48px;
     }

     .footer-links {
         list-style: none;
         padding: 0;
         margin: 0;
     }

     .footer-links li {
         margin-bottom: 0.75rem;
     }

     .footer-links a {
         font-size: 0.938rem;
         color: #7c7b7b;
         text-decoration: none;
         transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         position: relative;
         padding-left: 0;
     }

     .footer-links a::before {
         content: '';
         position: absolute;
         left: 0;
         width: 0;
         height: 1px;
         background: #c22620;
         transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .footer-links a:hover {
         color: #c22620;
         padding-left: 1rem;
     }

     .footer-links a:hover::before {
         width: 12px;
     }

     /* Payment Methods Section */
     .footer-payment-wrapper {
         max-width: 1400px;
         margin: 0 auto 3rem;
         /* padding: 3rem 0; */
         border-top: 1px solid rgba(0, 0, 0, 0.08);
         border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     }

     .footer-payment h4 {
         font-size: 0.875rem;
         font-weight: 700;
         letter-spacing: 0.08em;
         text-transform: uppercase;
         color: #1a1a1a;
         margin-bottom: 1.5rem;
         text-align: center;
     }

     .payment-methods {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 1.25rem;
         flex-wrap: wrap;
     }

     .payment-item {
         /* background: rgba(255,255,255,0.7); */
         backdrop-filter: blur(8px);
         /* border: 1px solid rgba(0,0,0,0.06); */
         border-radius: 10px;
         padding: 0.75rem 1.25rem;
         display: flex;
         align-items: center;
         justify-content: center;
         min-height: 48px;
         min-width: 80px;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
     }

     .payment-item::before {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(135deg, rgba(194, 38, 32, 0.05), rgba(124, 123, 123, 0.05));
         opacity: 0;
         transition: opacity 0.3s;
     }

     .payment-item:hover {
         transform: translateY(-4px);
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
         border-color: rgba(194, 38, 32, 0.2);
         background: white;
     }

     .payment-item:hover::before {
         opacity: 1;
     }

     .payment-item img {
         max-width: 100%;
         max-height: 98px;
         object-fit: contain;
         filter: grayscale(0.2);
         transition: filter 0.3s;
         position: relative;
         z-index: 1;
     }

     .payment-item:hover img {
         filter: grayscale(0);
     }

     /* Payment Icons as SVG fallback */
     .payment-icon {
         font-size: 0.875rem;
         font-weight: 600;
         color: #1a1a1a;
         position: relative;
         z-index: 1;
         white-space: nowrap;
     }

     .payment-icon.visa {
         color: #1434CB;
     }

     .payment-icon.mastercard {
         color: #EB001B;
     }

     .payment-icon.paypal {
         color: #003087;
     }

     .payment-icon.discover {
         color: #FF6000;
     }

     .payment-icon.venmo {
         color: #008CFF;
     }

     .payment-icon.zelle {
         color: #6D1ED4;
     }

     .payment-icon.cashapp {
         color: #00D632;
     }

     .payment-icon.gpay {
         color: #5F6368;
     }

     /* Bottom Bar */
     .footer-bottom {
         position: relative;
         /* padding: 2rem 0; */
     }

     .footer-bottom-content {
         max-width: 1400px;
         margin: 0 auto;
         display: flex;
         justify-content: space-between;
         align-items: center;
         flex-wrap: wrap;
         gap: 1.5rem;
     }

     .footer-copyright {
         font-size: 0.875rem;
         color: #7c7b7b;
     }

     .footer-copyright strong {
         color: #1a1a1a;
         font-weight: 600;
     }

     .footer-powered {
         font-size: 0.875rem;
         color: #7c7b7b;
     }

     .footer-powered a {
         color: #c22620;
         text-decoration: none;
         font-weight: 600;
         transition: all 0.2s;
         position: relative;
     }

     .footer-powered a::after {
         content: '';
         position: absolute;
         bottom: -2px;
         left: 0;
         width: 0;
         height: 1px;
         background: #c22620;
         transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .footer-powered a:hover::after {
         width: 100%;
     }

     /* Back to Top Button */
     .back-to-top {
         position: fixed;
         bottom: 5rem;
         right: 2rem;
         width: 56px;
         height: 56px;
         background: linear-gradient(135deg, #c22620, #a51d18);
         border: none;
         border-radius: 16px;
         cursor: pointer;
         opacity: 0;
         visibility: hidden;
         transform: translateY(20px);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         box-shadow:
             0 4px 16px rgba(194, 38, 32, 0.3),
             0 12px 32px rgba(0, 0, 0, 0.15);
         z-index: 999;
     }

     .back-to-top.visible {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
     }

     .back-to-top::before {
         content: '';
         position: absolute;
         inset: 0;
         border-radius: 16px;
         background: white;
         opacity: 0;
         transition: opacity 0.3s;
     }

     .back-to-top svg {
         width: 24px;
         height: 24px;
         stroke: white;
         position: relative;
         z-index: 1;
         transition: all 0.3s;
     }

     .back-to-top:hover {
         transform: translateY(-4px);
         box-shadow:
             0 8px 24px rgba(194, 38, 32, 0.4),
             0 16px 48px rgba(0, 0, 0, 0.2);
     }

     .back-to-top:hover::before {
         opacity: 0.15;
     }

     .back-to-top:active {
         transform: translateY(-2px);
     }

     /* Responsive Design */
     @media (max-width: 1200px) {
         .footer-grid {
             grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
             gap: 2.5rem;
         }

         .footer-column:nth-child(3) {
             display: none;
         }

         .payment-methods {
             gap: 1rem;
         }

         .payment-item {
             min-width: 70px;
             padding: 0.625rem 1rem;
         }
     }

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

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

         .footer-brand {
             grid-column: 1 / -1;
             padding-right: 0;
             margin-bottom: 1rem;
         }

         .footer-contact {
             grid-column: 1 / -1;
             margin-top: 1rem;
         }

         .footer-payment-wrapper {
             padding: 2.5rem 0;
         }

         .payment-methods {
             gap: 0.875rem;
         }

         .payment-item {
             min-width: 65px;
             padding: 0.625rem 0.875rem;
         }
     }

     @media (max-width: 767px) {
         .footer-grid {
             grid-template-columns: 1fr;
             gap: 2.5rem;
         }

         .footer-brand {
             text-align: center;
         }

         .footer-logo {
             margin-left: auto;
             margin-right: auto;
         }

         .footer-payment-wrapper {
             padding: 2rem 0;
         }

         .payment-methods {
             gap: 0.75rem;
         }

         .payment-item {
             min-width: 60px;
             padding: 0.5rem 0.75rem;
             min-height: 44px;
         }

         .payment-icon {
             font-size: 0.813rem;
         }

         .footer-bottom-content {
             flex-direction: column;
             text-align: center;
             gap: 1rem;
         }

         .back-to-top {
             bottom: 1.5rem;
             right: 1.5rem;
             width: 48px;
             height: 48px;
         }

         .back-to-top svg {
             width: 20px;
             height: 20px;
         }
     }

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

         .footer-logo {
             width: 100px;
             height: 100px;
         }

         .footer-payment-wrapper {
             padding: 1.5rem 0;
         }

         .payment-methods {
             gap: 0.5rem;
         }

         .payment-item {
             min-width: 55px;
             padding: 0.5rem 0.625rem;
             min-height: 40px;
         }

         .payment-icon {
             font-size: 0.75rem;
         }

         .footer-copyright,
         .footer-powered {
             font-size: 0.813rem;
         }

         .back-to-top {
             bottom: 1rem;
             right: 1rem;
             width: 44px;
             height: 44px;
         }
     }