:root {--xred-primary: #e60000;--xred-secondary: #ff4444;--xred-accent: #ff6666;--xred-black: #000000;--xred-dark: #111111;--xred-white: #ffffff;--xred-gray: #666666;--xred-light-gray: #f8f9fa;--xred-dark-gray: #333333;--xred-border: #444444;--xred-success: #28a745;--xred-warning: #ffc107;--xred-danger: #dc3545;--transition: all 0.3s ease} * {box-sizing: border-box} html {scroll-behavior: smooth;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%} body {font-family: 'Exo 2', 'Orbitron', sans-serif;background: linear-gradient(135deg, var(--xred-black) 0%, var(--xred-dark) 100%);color: var(--xred-white);overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;min-height: 100vh} [lang="ar"] body, [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] h5, [lang="ar"] h6, [lang="ar"] p, [lang="ar"] span, [lang="ar"] li, [lang="ar"] a, [lang="ar"] .btn {font-family: 'Cairo', 'Arial', sans-serif} .navbar {background: rgba(0, 0, 0, 0.95) !important;backdrop-filter: blur(10px);transition: var(--transition);border-bottom: 1px solid var(--xred-border);position: relative;z-index: 1000} .navbar-brand {font-weight: 700;font-size: 1.5rem} .btn {border-radius: 0.5rem;font-weight: 500;transition: var(--transition);border: none;position: relative;overflow: hidden} .btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);transition: left 0.5s} .btn:hover::before {left: 100%} .btn-primary {background: linear-gradient(135deg, var(--xred-primary), var(--xred-secondary));border: none;color: var(--xred-white);box-shadow: 0 4px 15px rgba(230, 0, 0, 0.2)} .btn-primary:hover {background: linear-gradient(135deg, var(--xred-secondary), var(--xred-accent));transform: translateY(-2px);box-shadow: 0 6px 20px rgba(230, 0, 0, 0.4);color: var(--xred-white)} .btn-outline-light {border: 2px solid var(--xred-white);color: var(--xred-white);background: transparent} .btn-outline-light:hover {background: var(--xred-white);color: var(--xred-black);transform: translateY(-2px);box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2)} .btn-group .btn {margin-bottom: 0 !important} .dropdown-menu {font-size: 0.9rem !important;border-radius: 0.5rem !important;background-color: var(--xred-dark-gray);border: 1px solid var(--xred-border);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)} .dropdown-toggle {min-height: 44px !important} .modal-dialog {margin: 0.5rem !important;max-width: calc(100% - 1rem) !important} .modal-content {border-radius: 0.5rem !important;background-color: var(--xred-white);border: 1px solid #ddd;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);color: var(--xred-black)} .modal-header {background: var(--xred-white);color: var(--xred-black);border-bottom: 1px solid #ddd} .modal-body {padding: 1rem !important;background: var(--xred-white);color: var(--xred-black)} .modal-footer {background: var(--xred-white);color: var(--xred-black);border-top: 1px solid #ddd} .table-responsive {font-size: 0.8rem !important} .img-fluid {max-width: 100% !important;height: auto !important} .card {background: linear-gradient(145deg, var(--xred-dark-gray), var(--xred-dark));border: 1px solid var(--xred-border);border-radius: 0.5rem;transition: var(--transition);overflow: hidden} .card:hover {transform: translateY(-5px);box-shadow: 0 8px 25px rgba(230, 0, 0, 0.3);border-color: var(--xred-primary)} .form-control {background-color: var(--xred-white);border: 1px solid #ddd;color: var(--xred-black);border-radius: 0.5rem;transition: var(--transition)} .form-control:focus {background-color: var(--xred-white);border-color: var(--xred-primary);color: var(--xred-black);box-shadow: 0 0 0 0.2rem rgba(230, 0, 0, 0.25);transform: translateY(-1px)} .form-control::placeholder {color: #666} .hero-section {background: linear-gradient(135deg, var(--xred-black) 0%, var(--xred-dark) 50%, var(--xred-black) 100%);min-height: 100vh;display: flex;align-items: center;position: relative;overflow: hidden;padding-top: 0} .hero-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 20% 30%, rgba(230, 0, 0, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 68, 68, 0.1) 0%, transparent 50%);pointer-events: none} .hero-section::after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(230,0,0,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');pointer-events: none} .hero-content {position: relative;z-index: 2} .hero-badge .badge {background: linear-gradient(135deg, var(--xred-primary), var(--xred-secondary)) !important;border: none;font-family: 'Orbitron', sans-serif;font-weight: 700;font-size: 0.8rem;letter-spacing: 1px;text-transform: uppercase;animation: pulse 2s infinite} .hero-title {font-family: 'Orbitron', sans-serif;font-weight: 900;font-size: 4rem;line-height: 1.1;margin-bottom: 1rem;text-transform: uppercase;letter-spacing: 2px;background: linear-gradient(135deg, var(--xred-primary), var(--xred-white));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-shadow: 0 0 30px rgba(230, 0, 0, 0.3)} .hero-subtitle {font-family: 'Exo 2', sans-serif;font-weight: 600;font-size: 1.5rem;color: var(--xred-accent);text-transform: uppercase;letter-spacing: 3px;margin-bottom: 1.5rem;position: relative} .hero-subtitle::after {content: '';position: absolute;bottom: -10px;left: 0;width: 60px;height: 3px;background: linear-gradient(90deg, var(--xred-primary), var(--xred-secondary));border-radius: 2px} .hero-description {font-family: 'Exo 2', sans-serif;font-size: 1.1rem;line-height: 1.6;color: var(--xred-light-gray);max-width: 500px} .hero-stats {margin: 2rem 0} .stat-item {padding: 1rem;border-radius: 0.5rem;background: rgba(255, 255, 255, 0.05);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);transition: var(--transition)} .stat-item:hover {transform: translateY(-5px);background: rgba(230, 0, 0, 0.1);border-color: var(--xred-primary)} .stat-number {font-family: 'Orbitron', sans-serif;font-weight: 900;font-size: 2rem;margin-bottom: 0.5rem;text-shadow: 0 0 20px rgba(230, 0, 0, 0.5)} .stat-label {font-family: 'Exo 2', sans-serif;font-weight: 500;font-size: 0.9rem;color: var(--xred-gray);text-transform: uppercase;letter-spacing: 1px;margin: 0} .hero-btn {font-family: 'Orbitron', sans-serif;font-weight: 700;text-transform: uppercase;letter-spacing: 1px;padding: 1rem 2rem;border-radius: 0.5rem;position: relative;overflow: hidden;transition: var(--transition)} .hero-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left 0.6s} .hero-btn:hover::before {left: 100%} .hero-btn:hover {transform: translateY(-3px);box-shadow: 0 10px 30px rgba(230, 0, 0, 0.4)} .hero-slider-container {position: relative;height: 500px;border-radius: 1rem;overflow: hidden;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);background: #000} .hero-slider {position: relative;width: 100%;height: 100%} .slider-track {position: relative;width: 100%;height: 100%} .slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 0.2s ease-in-out;z-index: 1} .slide.active {opacity: 1;z-index: 2} .slide-image {width: 100%;height: 100%;object-fit: cover;border-radius: 1rem;display: block} .slide-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));padding: 2rem;color: var(--xred-white)} .slide-overlay h3 {font-family: 'Orbitron', sans-serif;font-weight: 700;font-size: 1.5rem;text-transform: uppercase;letter-spacing: 2px;margin: 0;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5)} .slider-nav {position: absolute;top: 50%;transform: translateY(-50%);width: 100%;display: flex;justify-content: space-between;padding: 0 1rem;pointer-events: none} .nav-btn {background: rgba(0, 0, 0, 0.7);border: 2px solid var(--xred-primary);color: var(--xred-white);width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: var(--transition);pointer-events: all;backdrop-filter: blur(10px)} .nav-btn:hover {background: var(--xred-primary);transform: scale(1.1);box-shadow: 0 5px 15px rgba(230, 0, 0, 0.4)} .slider-indicators {position: absolute;bottom: 1rem;left: 50%;transform: translateX(-50%);display: flex;gap: 0.5rem} .indicator {width: 12px;height: 12px;border-radius: 50%;background: rgba(255, 255, 255, 0.3);cursor: pointer;transition: var(--transition)} .indicator.active {background: var(--xred-primary);transform: scale(1.2);box-shadow: 0 0 10px rgba(230, 0, 0, 0.5)} @keyframes glow {from {text-shadow: 0 0 20px rgba(230, 0, 0, 0.5)} to {text-shadow: 0 0 30px rgba(230, 0, 0, 0.8), 0 0 40px rgba(230, 0, 0, 0.3)} } @keyframes pulse {0%, 100% {transform: scale(1)} 50% {transform: scale(1.05)} } section {position: relative;z-index: 1} .bg-dark {background: linear-gradient(135deg, var(--xred-dark) 0%, var(--xred-black) 100%) !important} .shop-section {background: var(--xred-black);position: relative} .shop-header {position: relative;z-index: 2} .shop-badge .badge {background: linear-gradient(135deg, var(--xred-primary), var(--xred-secondary)) !important;border: none;font-family: 'Orbitron', sans-serif;font-weight: 700;font-size: 0.9rem;letter-spacing: 1px;text-transform: uppercase;animation: pulse 2s infinite} .shop-title {font-family: 'Orbitron', sans-serif;font-weight: 900;font-size: 3rem;text-transform: uppercase;letter-spacing: 3px;background: linear-gradient(135deg, var(--xred-primary), var(--xred-white));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-shadow: 0 0 30px rgba(230, 0, 0, 0.3)} .shop-subtitle {font-family: 'Exo 2', sans-serif;font-size: 1.2rem;color: var(--xred-light-gray);max-width: 600px;margin: 0 auto} .shop-filters {position: relative;z-index: 2;background: var(--xred-dark-gray);border: 1px solid var(--xred-border);border-radius: 0.75rem;padding: 1.5rem} .filter-label {font-family: 'Orbitron', sans-serif;font-weight: 600;font-size: 0.9rem;color: var(--xred-white);text-transform: uppercase;letter-spacing: 1px;margin-bottom: 0.5rem;display: block} .filter-group .dropdown .btn {background: var(--xred-dark);border: 1px solid var(--xred-border);color: var(--xred-white);font-family: 'Exo 2', sans-serif;font-weight: 500;transition: all 0.3s ease} .filter-group .dropdown .btn:hover {background: var(--xred-primary);border-color: var(--xred-primary)} .filter-group .dropdown-menu {background: var(--xred-dark-gray);border: 1px solid var(--xred-border);border-radius: 0.5rem;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5)} .filter-group .dropdown-item {color: var(--xred-white);font-family: 'Exo 2', sans-serif;transition: var(--transition)} .filter-group .dropdown-item:hover {background: var(--xred-primary);color: var(--xred-white)} .search-group .form-control {background: var(--xred-white);border: 1px solid #ddd;color: var(--xred-black);font-family: 'Exo 2', sans-serif} .search-group .form-control:focus {background: var(--xred-white);border-color: var(--xred-primary);box-shadow: 0 0 0 0.2rem rgba(230, 0, 0, 0.25)} .search-group .form-control::placeholder {color: #666} .product-card {background: linear-gradient(145deg, var(--xred-dark-gray), var(--xred-dark));border: 1px solid var(--xred-border);border-radius: 1rem;transition: transform 0.2s ease, box-shadow 0.2s ease;overflow: hidden;position: relative;height: 100%;display: flex;flex-direction: column;will-change: transform;contain: layout style paint} .product-card:hover {transform: translateY(-3px);box-shadow: 0 6px 15px rgba(230, 0, 0, 0.15);border-color: var(--xred-primary)} .product-image-container {position: relative;overflow: hidden;height: 200px;width: 100%;border-radius: 1rem 1rem 0 0} .product-card .card-img-top {height: 100%;width: 100%;object-fit: cover;transition: transform 0.3s ease;border-radius: 1rem 1rem 0 0} .product-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(230, 0, 0, 0.8);display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity 0.3s ease;border-radius: 1rem 1rem 0 0;z-index: 10;pointer-events: none} .product-card:hover .product-overlay {opacity: 1} .product-overlay button {pointer-events: all;z-index: 11} .product-card:hover .card-img-top {transform: scale(1.05)} .product-card .card-body {padding: 1.5rem;display: flex;flex-direction: column;flex-grow: 1;justify-content: space-between;min-height: 200px} .product-card .card-title {font-family: 'Orbitron', sans-serif;font-weight: 700;font-size: 1.1rem;color: var(--xred-white);margin-bottom: 0.75rem;line-height: 1.3} .product-card .card-text {font-family: 'Exo 2', sans-serif;color: var(--xred-light-gray);font-size: 0.85rem;line-height: 1.4;margin-bottom: 1rem;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height: 2.8em} .product-card .product-price {font-family: 'Orbitron', sans-serif;font-weight: 900;font-size: 1.3rem;color: var(--xred-primary);margin-bottom: 1rem} .product-card .product-rating {display: flex;align-items: center;gap: 0.5rem;margin-bottom: 1rem} .product-card .rating-stars {color: #ffc107;font-size: 0.9rem} .product-card .rating-text {font-family: 'Exo 2', sans-serif;font-size: 0.8rem;color: var(--xred-gray)} .product-card .btn {font-family: 'Orbitron', sans-serif;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;padding: 0.7rem 1.2rem;border-radius: 0.5rem;transition: all 0.3s ease;font-size: 0.85rem;background: var(--xred-primary);border: none;box-shadow: 0 2px 8px rgba(230, 0, 0, 0.2);position: relative;z-index: 5;cursor: pointer} .product-card .btn:hover {transform: translateY(-2px);box-shadow: 0 4px 15px rgba(230, 0, 0, 0.3);background: var(--xred-secondary)} #loadingState .spinner-border {width: 3rem;height: 3rem;border-width: 0.3em} #emptyState i {opacity: 0.5} #productsGrid {display: flex !important;flex-wrap: wrap !important;margin-left: -15px !important;margin-right: -15px !important} #productsGrid > div {padding-left: 15px !important;padding-right: 15px !important;margin-bottom: 30px !important} @media (min-width: 992px) {#productsGrid > div {flex: 0 0 25% !important;max-width: 25% !important} } @media (min-width: 768px) and (max-width: 991.98px) {#productsGrid > div {flex: 0 0 50% !important;max-width: 50% !important} } @media (min-width: 576px) and (max-width: 767.98px) {#productsGrid > div {flex: 0 0 50% !important;max-width: 50% !important} } @media (max-width: 575.98px) {#productsGrid > div {flex: 0 0 50% !important;max-width: 50% !important} } .product-card {background: var(--xred-dark-gray);border: 1px solid var(--xred-border);border-radius: 1rem;transition: transform 0.3s ease, box-shadow 0.3s ease;overflow: hidden;position: relative;height: 100%;display: flex;flex-direction: column;width: 100%;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)} .marquee-style-card {position: relative;width: 100%;height: 300px;border-radius: 20px;overflow: hidden;background: linear-gradient(145deg, #1a1a1a, #2a2a2a);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);border: 2px solid rgba(230, 0, 0, 0.2);transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);cursor: pointer} .marquee-style-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(230, 0, 0, 0.1), rgba(255, 68, 68, 0.1));opacity: 0;transition: opacity 0.3s ease;z-index: 1} .marquee-style-card:hover::before {opacity: 1} .marquee-style-card:hover {transform: translateY(-10px) scale(1.02);box-shadow: 0 25px 50px rgba(230, 0, 0, 0.4);border-color: var(--xred-primary)} .marquee-style-card img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s ease} .marquee-style-card:hover img {transform: scale(1.1)} .marquee-style-card .product-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));padding: 2rem 1.5rem 5rem;color: var(--xred-white);z-index: 2;transform: translateY(100%);transition: transform 0.3s ease;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;min-height: 60%} .marquee-style-card:hover .product-overlay {transform: translateY(0)} .marquee-style-card .product-overlay h4 {font-size: 1.3rem;font-weight: 700;margin-bottom: 0.5rem;color: var(--xred-white);text-transform: uppercase;letter-spacing: 1px} .marquee-style-card .product-overlay p {font-size: 0.9rem;color: var(--xred-light-gray);margin-bottom: 1rem;font-weight: 300} .marquee-style-card .product-price-overlay {font-family: 'Orbitron', sans-serif;font-size: 1.2rem;font-weight: 700;color: var(--xred-primary) !important;margin-bottom: 1rem;text-shadow: 0 0 10px rgba(230, 0, 0, 0.5);display: block !important;visibility: visible !important;opacity: 1 !important;position: relative;z-index: 10;background: rgba(0, 0, 0, 0.3);padding: 0.5rem;border-radius: 0.5rem} .marquee-style-card .product-overlay .btn {background: linear-gradient(135deg, var(--xred-primary), var(--xred-secondary));border: none;padding: 0.8rem 1.5rem;font-size: 0.9rem;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;border-radius: 25px;transition: all 0.3s ease;box-shadow: 0 5px 15px rgba(230, 0, 0, 0.3);position: absolute;bottom: 1.5rem;left: 50%;transform: translateX(-50%)} .marquee-style-card .product-overlay .btn:hover {transform: translateX(-50%) translateY(-2px);box-shadow: 0 8px 25px rgba(230, 0, 0, 0.4);background: linear-gradient(135deg, var(--xred-secondary), var(--xred-primary))} .pagination-container {position: relative;z-index: 2} footer {background: linear-gradient(135deg, var(--xred-black) 0%, var(--xred-dark) 100%) !important;border-top: 1px solid var(--xred-border)} marquee {font-size: 6vw !important;letter-spacing: 1px !important;color: var(--xred-primary)} .text-primary {color: var(--xred-primary) !important} .text-secondary {color: var(--xred-secondary) !important} .text-accent {color: var(--xred-accent) !important} .text-white {color: var(--xred-white) !important} .text-gray {color: var(--xred-gray) !important} .text-muted {color: var(--xred-gray) !important} a {color: var(--xred-primary);text-decoration: none;transition: var(--transition)} a:hover {color: var(--xred-secondary);text-decoration: underline} .mb-4 {margin-bottom: 1rem !important} .mb-5 {margin-bottom: 1.5rem !important} .mt-4 {margin-top: 1rem !important} .mt-5 {margin-top: 1.5rem !important} .p-4 {padding: 1rem !important} .p-5 {padding: 1.5rem !important} .text-center {text-align: center !important} .d-flex {flex-wrap: wrap !important} .justify-content-between {justify-content: center !important} @media (max-width: 576px) {.container {padding-left: 0.75rem !important;padding-right: 0.75rem !important} .hero-title {font-size: 2.5rem !important;line-height: 1.2 !important} .hero-subtitle {font-size: 1rem !important;letter-spacing: 2px !important} .hero-description {font-size: 1rem !important} .hero-stats {margin: 1.5rem 0 !important} .stat-number {font-size: 1.5rem !important} .hero-btn {padding: 0.8rem 1.5rem !important;font-size: 0.9rem !important} .hero-slider-container {height: 300px !important;margin-top: 2rem !important} .slide-overlay h3 {font-size: 1.2rem !important} .nav-btn {width: 40px !important;height: 40px !important} .shop-title {font-size: 2rem !important;letter-spacing: 2px !important} .shop-subtitle {font-size: 1rem !important} .shop-filters {padding: 1rem !important} .filter-group .row {gap: 1rem !important} .filter-group .col-md-4 {flex: 0 0 100% !important;max-width: 100% !important} .product-image-container {height: 200px !important} .product-card .card-body {padding: 1rem !important} .product-card .card-title {font-size: 1rem !important} .product-card .product-price {font-size: 1.2rem !important} .product-card .btn {padding: 0.6rem 1rem !important;font-size: 0.8rem !important} #productsGrid {} .product-image-container {height: 150px !important} .product-card .card-body {padding: 1rem !important;min-height: 180px !important} .section-padding {padding: 1rem 0 !important} .py-5 {padding-top: 1rem !important;padding-bottom: 1rem !important} .btn {font-size: 0.8rem !important;padding: 0.6rem 1rem !important;width: 100% !important;margin-bottom: 0.5rem !important} .btn-group .btn {width: auto !important} .btn-group {width: 100% !important} .card {margin-bottom: 0.75rem !important} .card-body {padding: 0.75rem !important} .card-img-top {height: 180px !important} .form-control {font-size: 0.9rem !important;padding: 0.6rem !important} .form-label {font-size: 0.8rem !important} .col-lg-3, .col-md-6, .col-md-4, .col-md-3, .col-md-2 {flex: 0 0 100% !important;max-width: 100% !important} .modal-dialog {margin: 0.25rem !important;max-width: calc(100% - 0.5rem) !important} .modal-body {padding: 0.75rem !important} .swiper-slide {padding: 0.25rem !important} .form-step {padding: 0.75rem !important} .step-indicator {flex-direction: column !important;align-items: center !important} .step-number {margin-bottom: 0.5rem !important} .product-card {margin-bottom: 0.75rem !important} .product-card .card-img-top {height: 160px !important} .product-card .btn {font-size: 0.7rem !important;padding: 0.4rem 0.8rem !important} .marquee-style-card {height: 350px !important} .marquee-style-card .product-overlay {padding: 1.5rem 1rem 4rem !important;min-height: 70% !important} .marquee-style-card .product-overlay h4 {font-size: 1.1rem !important;margin-bottom: 0.5rem !important} .marquee-style-card .product-overlay p {font-size: 0.8rem !important;margin-bottom: 1rem !important;flex-grow: 1} .marquee-style-card .product-price-overlay {font-size: 1rem !important;margin-bottom: 0.8rem !important;display: block !important;visibility: visible !important;opacity: 1 !important;color: var(--xred-primary) !important;background: rgba(0, 0, 0, 0.5) !important;padding: 0.4rem !important;border-radius: 0.4rem !important;z-index: 10 !important} .marquee-style-card .product-overlay .btn {padding: 0.6rem 1rem !important;font-size: 0.8rem !important;bottom: 1rem !important} .mb-4 {margin-bottom: 0.75rem !important} .mb-5 {margin-bottom: 1rem !important} .mt-4 {margin-top: 0.75rem !important} .mt-5 {margin-top: 1rem !important} .d-flex.flex-wrap {flex-direction: column !important} .d-flex.gap-3 {gap: 0.5rem !important} .text-lg-start {text-align: center !important} } @media (min-width: 577px) and (max-width: 768px) {#productsGrid {} .product-image-container {height: 180px !important} .product-card .card-body {min-height: 200px !important} .marquee-style-card {height: 320px !important} .marquee-style-card .product-overlay {padding: 1.8rem 1.2rem 4.5rem !important;min-height: 65% !important} .marquee-style-card .product-overlay h4 {font-size: 1.2rem !important;margin-bottom: 0.5rem !important} .marquee-style-card .product-overlay p {font-size: 0.85rem !important;margin-bottom: 1rem !important;flex-grow: 1} .marquee-style-card .product-price-overlay {font-size: 1.1rem !important;margin-bottom: 0.9rem !important;display: block !important;visibility: visible !important;opacity: 1 !important;color: var(--xred-primary) !important;background: rgba(0, 0, 0, 0.4) !important;padding: 0.4rem !important;border-radius: 0.4rem !important;z-index: 10 !important} .marquee-style-card .product-overlay .btn {padding: 0.7rem 1.2rem !important;font-size: 0.85rem !important;bottom: 1.2rem !important} } @media (max-width: 768px) {.product-details-section .row {flex-direction: column-reverse} .product-gallery .main-image-container img {height: 400px !important;object-fit: cover !important;border-radius: 1rem !important} .thumbnail-gallery {justify-content: center} .thumbnail-image {width: 70px !important;height: 70px !important;object-fit: cover !important;border-radius: 0.5rem !important} .product-info .product-title {font-size: 1.5rem !important} .checkout-progress .step-label {font-size: 0.7rem !important} .checkout-progress .step-number {width: 30px !important;height: 30px !important;font-size: 0.8rem !important} .checkout-step {min-height: 300px !important} } @media (max-width: 576px) {.product-details-section {padding: 1rem 0 !important} .product-gallery .main-image-container img {height: 350px !important;object-fit: cover !important;border-radius: 1rem !important} .product-info .product-title {font-size: 1.3rem !important} .product-gallery .main-image-container {margin-bottom: 1rem !important} .thumbnail-gallery {gap: 0.5rem !important;padding: 0.5rem 0 !important} .checkout-progress {margin-bottom: 1rem !important} .checkout-progress .step-line {margin: 0 0.5rem !important;margin-top: 15px !important} } @media (min-width: 769px) {#productsGrid {} .product-image-container {height: 200px !important} .product-card .card-body {min-height: 220px !important} } .product-details-section {background: var(--xred-dark);min-height: 100vh;padding: 2rem 0} .product-gallery .main-image-container {border-radius: 1rem;overflow: hidden;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);position: relative;background: #f8f9fa} .product-gallery .main-image-container img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease} .thumbnail-gallery {padding: 0.5rem 0} .thumbnail-image {border: 2px solid transparent;transition: var(--transition)} .thumbnail-image:hover, .thumbnail-image.active {border-color: var(--xred-primary);transform: scale(1.05)} .product-info .product-title {font-family: 'Orbitron', sans-serif;font-weight: 700;color: var(--xred-white)} .product-info .product-description {color: var(--xred-light-gray);line-height: 1.6} .product-specs ul li {color: var(--xred-light-gray);font-size: 0.9rem} .checkout-step {background: var(--xred-white);color: var(--xred-black);padding: 2rem;border-radius: 1rem;margin-bottom: 1rem} .checkout-step .form-control {background: var(--xred-white);border: 1px solid #ddd;color: var(--xred-black)} .checkout-step .form-control:focus {background: var(--xred-white);border-color: var(--xred-primary);color: var(--xred-black)} .checkout-step .form-label {color: var(--xred-black);font-weight: 600} .checkout-step .btn-primary {background: var(--xred-primary);border-color: var(--xred-primary);color: var(--xred-white)} .checkout-step .btn-primary:hover {background: var(--xred-secondary);border-color: var(--xred-secondary);transform: translateY(-2px)} .checkout-step .btn-outline-secondary {color: var(--xred-black);border-color: #ddd} .checkout-step .btn-outline-secondary:hover {background: #f8f9fa;border-color: var(--xred-primary);color: var(--xred-black)} .checkout-progress {margin-bottom: 2rem} .checkout-progress .step {display: flex;flex-direction: column;align-items: center;text-align: center;flex: 1} .checkout-progress .step-number {width: 40px;height: 40px;border-radius: 50%;background: var(--xred-border);color: var(--xred-white);display: flex;align-items: center;justify-content: center;font-weight: 600;margin-bottom: 0.5rem;transition: var(--transition)} .checkout-progress .step.active .step-number {background: var(--xred-primary);color: var(--xred-white)} .checkout-progress .step.completed .step-number {background: var(--xred-success);color: var(--xred-white)} .checkout-progress .step-label {font-size: 0.8rem;color: var(--xred-gray);font-weight: 500} .checkout-progress .step.active .step-label {color: var(--xred-white)} .checkout-progress .step-line {height: 2px;background: var(--xred-border);flex: 1;margin: 0 1rem;margin-top: 20px} .checkout-step {min-height: 400px} .order-summary {background: var(--xred-white) !important;color: var(--xred-black) !important;border: 1px solid #ddd} .order-summary h5 {color: var(--xred-black) !important;font-weight: 600} .pagination .page-link {background-color: var(--xred-dark-gray);border: 1px solid var(--xred-border);color: var(--xred-white);transition: var(--transition)} .pagination .page-link:hover {background-color: var(--xred-primary);border-color: var(--xred-primary);color: var(--xred-white);transform: translateY(-1px)} .pagination .page-item.active .page-link {background-color: var(--xred-primary);border-color: var(--xred-primary);color: var(--xred-white)} .alert {border: none;border-radius: 0.5rem;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2)} .alert-success {background: linear-gradient(135deg, var(--xred-success), #20c997);color: var(--xred-white)} .alert-danger {background: linear-gradient(135deg, var(--xred-danger), #e74c3c);color: var(--xred-white)} .alert-warning {background: linear-gradient(135deg, var(--xred-warning), #f39c12);color: var(--xred-black)} .marquee-section {position: relative;width: 100vw;height: 100vh;overflow: hidden;background: linear-gradient(135deg, var(--xred-black) 0%, var(--xred-dark) 100%);margin-left: calc(-50vw + 50%)} .marquee-toggle {position: absolute;top: 20px;left: 20px;z-index: 10;background: var(--xred-primary);color: var(--xred-white);border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;font-weight: 600;transition: var(--transition)} .marquee-toggle:hover {background: var(--xred-secondary);transform: translateY(-2px)} .marquee-toggle[aria-pressed="true"] {filter: invert(1)} .marquees {align-content: center;height: 100%;display: grid;gap: 5vw;overflow: hidden;width: 100%;padding: 0 2rem} .marquee {--marquee--colour: var(--xred-primary);--marquee--repeat-count: 6;--marquee--base-duration: 1s;--marquee--repeat-size: calc(100% / var(--marquee--repeat-count));--marquee--double-size: calc(var(--marquee--repeat-size) * 2);--marquee--duration: calc( var(--marquee--base-duration) * var(--char-count, 20) );overflow: hidden;width: 110%;margin-left: -5%;mix-blend-mode: screen;transform: rotate(-5deg);background: var(--marquee--colour);color: #000} .marquee:nth-child(even) {--marquee--direction: -1;transform: rotate(5deg);background: #000;color: var(--marquee--colour)} .marquee p {transform: translateY(0.07em);font-weight: bold;margin: 0;display: flex;gap: 0.5em;line-height: 1.1;font-size: clamp(2.5rem, 12vw, 6.2rem);font-family: 'Orbitron', sans-serif} .marquee p::after {content: "★";transform: translateY(0.175em)} .marquee p::before {content: ""} .marquee--inner {width: max-content;display: flex;text-transform: uppercase;animation: marquee var(--marquee--duration) infinite linear} .marquee--inner:hover {animation-play-state: paused} [aria-pressed="true"] ~ .marquees .marquee--inner {animation-play-state: paused !important} @keyframes marquee {from {transform: translateX(calc( (-1 * var(--marquee--double-size)) - (var(--marquee--double-size) * var(--marquee--direction, 1)) ))} to {transform: translateX(calc(var(--marquee--double-size) * -1))} } .marquee-3d-section {padding: 4rem 0;background: linear-gradient(135deg, var(--xred-black) 0%, var(--xred-dark) 100%);overflow: hidden;width: 100vw;margin-left: calc(-50vw + 50%)} .box {display: flex;justify-content: space-between;align-items: center;width: 100%;padding: 0 2rem;max-width: 100%} .box .inner {width: 400px;height: 200px;line-height: 200px;font-size: 2.5em;font-family: 'Orbitron', sans-serif;font-weight: bold;white-space: nowrap;overflow: hidden;position: relative;margin: 0 1rem;border-radius: 1rem;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)} .box .inner:first-child {background: linear-gradient(135deg, var(--xred-primary), var(--xred-secondary));color: var(--xred-white);transform-origin: right;transform: perspective(100px) rotateY(-15deg)} .box .inner:last-child {background: linear-gradient(135deg, var(--xred-dark), var(--xred-dark-gray));color: var(--xred-white);transform-origin: left;transform: perspective(100px) rotateY(15deg);border: 2px solid var(--xred-primary)} .box .inner span {position: absolute;animation: marquee3d 8s linear infinite;text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);letter-spacing: 2px} .box .inner:first-child span {animation-delay: 4s;left: -100%} .box .inner:last-child span {left: -100%} @keyframes marquee3d {from {left: 100%} to {left: -100%} } @media (max-width: 768px) {.box {flex-direction: column;gap: 2rem} .box .inner {width: 90%;height: 150px;line-height: 150px;font-size: 1.8em;margin: 0} .box .inner:first-child, .box .inner:last-child {transform: none} } .premium-products-showcase {background: linear-gradient(135deg, var(--xred-black) 0%, var(--xred-dark) 50%, var(--xred-black) 100%);position: relative;overflow: hidden;padding: 6rem 0} .premium-products-showcase::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 30% 20%, rgba(230, 0, 0, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(255, 68, 68, 0.1) 0%, transparent 50%);pointer-events: none} .showcase-header {position: relative;z-index: 2;margin-bottom: 4rem} .showcase-badge {margin-bottom: 2rem} .showcase-badge .badge {background: linear-gradient(135deg, var(--xred-primary), var(--xred-secondary));color: var(--xred-white);padding: 1rem 2rem;font-size: 1rem;font-weight: 600;text-transform: uppercase;letter-spacing: 2px;border-radius: 50px;box-shadow: 0 8px 25px rgba(230, 0, 0, 0.3);border: 2px solid rgba(255, 255, 255, 0.1)} .showcase-badge .badge i {margin-right: 0.5rem;font-size: 1.2rem} .showcase-title {font-family: 'Orbitron', sans-serif;font-size: 3.5rem;font-weight: 900;text-transform: uppercase;letter-spacing: 4px;background: linear-gradient(135deg, var(--xred-white), var(--xred-primary), var(--xred-white));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: 1.5rem;text-shadow: 0 0 30px rgba(230, 0, 0, 0.3)} .showcase-subtitle {font-size: 1.4rem;color: var(--xred-light-gray);font-weight: 300;letter-spacing: 2px;text-transform: uppercase} .products-carousel {position: relative;width: 100%;height: 500px;overflow: hidden;margin: 3rem 0} .carousel-track {display: flex;align-items: center;height: 100%;animation: scrollProducts 40s linear infinite;will-change: transform} .product-slide {flex: 0 0 350px;height: 400px;margin: 0 1.5rem;position: relative} .product-card {position: relative;width: 100%;height: 100%;border-radius: 20px;overflow: hidden;background: linear-gradient(145deg, #1a1a1a, #2a2a2a);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);border: 2px solid rgba(230, 0, 0, 0.2);transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);cursor: pointer} .product-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(230, 0, 0, 0.1), rgba(255, 68, 68, 0.1));opacity: 0;transition: opacity 0.3s ease;z-index: 1} .product-card:hover::before {opacity: 1} .product-card:hover {transform: translateY(-5px);box-shadow: 0 12px 25px rgba(230, 0, 0, 0.25);border-color: var(--xred-primary)} .product-card img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s ease} .product-card:hover img {transform: scale(1.05)} .product-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));padding: 2rem 1.5rem 1.5rem;color: var(--xred-white);z-index: 2;transform: translateY(100%);transition: transform 0.3s ease} .product-card:hover .product-overlay {transform: translateY(0)} .product-overlay h4 {font-size: 1.3rem;font-weight: 700;margin-bottom: 0.5rem;color: var(--xred-white);text-transform: uppercase;letter-spacing: 1px} .product-overlay p {font-size: 0.9rem;color: var(--xred-light-gray);margin: 0;font-weight: 300} @keyframes scrollProducts {0% {transform: translateX(0)} 100% {transform: translateX(-50%)} } .showcase-footer {position: relative;z-index: 2;margin-top: 4rem} .showcase-cta {background: linear-gradient(135deg, var(--xred-primary), var(--xred-secondary));border: none;padding: 1.2rem 3rem;font-size: 1.1rem;font-weight: 600;text-transform: uppercase;letter-spacing: 2px;border-radius: 50px;box-shadow: 0 10px 30px rgba(230, 0, 0, 0.3);transition: all 0.3s ease;position: relative;overflow: hidden} .showcase-cta::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left 0.5s} .showcase-cta:hover::before {left: 100%} .showcase-cta:hover {transform: translateY(-3px);box-shadow: 0 15px 40px rgba(230, 0, 0, 0.5)} @media (max-width: 768px) {.premium-products-showcase {padding: 4rem 0} .showcase-title {font-size: 2.5rem;letter-spacing: 2px} .showcase-subtitle {font-size: 1.1rem} .products-carousel {height: 400px} .product-slide {flex: 0 0 280px;height: 320px;margin: 0 1rem} .product-overlay {padding: 1.5rem 1rem 1rem} .product-overlay h4 {font-size: 1.1rem} .product-overlay p {font-size: 0.8rem} .showcase-cta {padding: 1rem 2rem;font-size: 1rem} } @media (max-width: 480px) {.showcase-title {font-size: 2rem} .product-slide {flex: 0 0 250px;height: 280px} } .iphone-showcase-section {background: #ffffff;padding: 8rem 0;position: relative;overflow: hidden} .iphone-content {display: flex;flex-direction: column;align-items: center;text-align: center;max-width: 1200px;margin: 0 auto} .iphone-text {margin-bottom: 4rem} .iphone-title {font-family: 'Orbitron', sans-serif;font-size: 4rem;font-weight: 900;color: #1d1d1f;margin-bottom: 1rem;letter-spacing: -0.02em} .iphone-subtitle {font-size: 1.5rem;color: #1d1d1f;font-weight: 400;margin-bottom: 2.5rem;letter-spacing: -0.01em} .iphone-buttons {display: flex;gap: 1rem;justify-content: center;margin-bottom: 2rem;flex-wrap: wrap} .iphone-btn-primary {background: #e60000;color: #ffffff;border: none;padding: 0.8rem 2rem;border-radius: 25px;font-size: 1.1rem;font-weight: 600;transition: all 0.3s ease;min-width: 140px} .iphone-btn-primary:hover {background: #ff4444;transform: translateY(-2px);box-shadow: 0 8px 25px rgba(230, 0, 0, 0.3)} .iphone-btn-secondary {background: transparent;color: #e60000;border: 2px solid #e60000;padding: 0.8rem 2rem;border-radius: 25px;font-size: 1.1rem;font-weight: 600;transition: all 0.3s ease;min-width: 140px} .iphone-btn-secondary:hover {background: #e60000;color: #ffffff;transform: translateY(-2px);box-shadow: 0 8px 25px rgba(230, 0, 0, 0.3)} .btn-outline-primary:hover {background: #e60000 !important;border-color: #e60000 !important;color: #ffffff !important} .btn-outline-primary {color: #e60000 !important;border-color: #e60000 !important} .btn-primary:hover {background: #ff4444 !important;border-color: #ff4444 !important;color: #ffffff !important} .btn-primary {background: #e60000 !important;border-color: #e60000 !important;color: #ffffff !important} .iphone-tagline {font-size: 1.2rem;font-weight: 400;margin: 0} .tagline-blue {color: #e60000} .tagline-red {color: #e60000} .product-slider {display: flex;justify-content: flex-start;align-items: center;margin: 3rem 0;width: 100%;overflow-x: auto;padding: 2rem 0;min-height: 600px;scrollbar-width: none;-ms-overflow-style: none} .product-slider::-webkit-scrollbar {display: none} .slider-container {position: relative;width: 100%;height: 500px;overflow: visible;background: transparent;border: none;box-shadow: none;min-height: 500px} .slider-track {display: flex;height: 100%;transition: transform 0.5s ease;gap: 1.5rem;padding: 2rem;align-items: center;width: max-content;min-width: 100%} .slider-item {flex: 0 0 200px;height: 300px;border-radius: 20px;overflow: hidden;cursor: pointer;transition: transform 0.2s ease, box-shadow 0.2s ease;border: 3px solid transparent;position: relative;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);background: #ffffff;will-change: transform;contain: layout style paint} .slider-item:hover {transform: translateY(-4px);box-shadow: 0 8px 20px rgba(230, 0, 0, 0.2)} .slider-item.active {border-color: #e60000;transform: translateY(-4px);box-shadow: 0 12px 25px rgba(230, 0, 0, 0.3);flex: 0 0 240px;height: 360px} .slider-item img {width: 100%;height: 100%;object-fit: cover;transition: all 0.3s ease} .slider-item:hover img {transform: scale(1.05)} @media (max-width: 768px) {.iphone-showcase-section {padding: 6rem 0} .iphone-title {font-size: 3rem} .iphone-subtitle {font-size: 1.3rem} .iphone-buttons {flex-direction: column;align-items: center} .iphone-btn-primary, .iphone-btn-secondary {width: 200px} .slider-container {height: 400px;min-height: 400px} .slider-track {gap: 1rem;padding: 1.5rem} .slider-item {flex: 0 0 150px;height: 200px} .slider-item.active {flex: 0 0 195px;height: 260px} } @media (max-width: 480px) {.iphone-title {font-size: 2.5rem} .product-slider {padding: 1rem 0;min-height: 400px;overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none} .product-slider::-webkit-scrollbar {display: none} .slider-container {height: 300px;min-height: 300px;overflow: visible} .slider-track {gap: 0.8rem;padding: 1rem;width: max-content;min-width: 100%} .slider-item {flex: 0 0 120px;height: 150px;border-radius: 15px} .slider-item.active {flex: 0 0 156px;height: 195px} .slider-item img {border-radius: 15px} } .apple-video-section {background: linear-gradient(135deg, var(--xred-black) 0%, var(--xred-dark) 100%);position: relative;overflow: hidden} .apple-video-title {font-family: 'Orbitron', sans-serif;font-size: 3rem;font-weight: 900;text-transform: uppercase;letter-spacing: 4px;background: linear-gradient(135deg, var(--xred-primary), var(--xred-white));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: 1rem} .apple-video-subtitle {font-size: 1.3rem;color: var(--xred-light-gray);font-weight: 300;letter-spacing: 1px} .video-container {position: relative;width: 100%;max-width: 1200px;margin: 0 auto;border-radius: 2rem;overflow: hidden;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);border: 3px solid var(--xred-primary)} .apple-video {width: 100%;height: 60vh;object-fit: cover;display: block;background: #000;min-height: 400px} .video-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(230, 0, 0, 0.3) 100%);display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity 0.3s ease;z-index: 2;pointer-events: none} .video-container:hover .video-overlay {opacity: 1} .video-overlay:hover {opacity: 1} .video-content {text-align: center;color: var(--xred-white);padding: 2rem} .video-title {font-family: 'Exo 2', sans-serif;font-size: 2.5rem;font-weight: 700;margin-bottom: 1rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8)} .video-description {font-size: 1.2rem;margin-bottom: 2rem;opacity: 0.9;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8)} .video-cta {background: linear-gradient(135deg, var(--xred-primary), var(--xred-secondary));border: none;padding: 1rem 2rem;font-size: 1.1rem;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;border-radius: 50px;transition: var(--transition);box-shadow: 0 10px 30px rgba(230, 0, 0, 0.3)} .video-cta:hover {transform: translateY(-3px);box-shadow: 0 15px 40px rgba(230, 0, 0, 0.4);background: linear-gradient(135deg, var(--xred-secondary), var(--xred-primary))} @media (max-width: 768px) {.apple-video-title {font-size: 2.2rem;letter-spacing: 2px} .apple-video-subtitle {font-size: 1.1rem} .apple-video {height: 40vh} .video-title {font-size: 2rem} .video-description {font-size: 1rem} .video-cta {padding: 0.8rem 1.5rem;font-size: 1rem} } .about-section {background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);position: relative;overflow: hidden;color: #1d1d1f} .about-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(230,0,0,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');opacity: 0.3;z-index: 1} .about-section .container {position: relative;z-index: 2} .about-title {font-family: 'Orbitron', sans-serif;font-size: 3rem;font-weight: 700;text-transform: uppercase;letter-spacing: 2px;color: #1d1d1f;margin-bottom: 1rem} .about-subtitle {font-size: 1.2rem;color: #6e6e73;font-weight: 400;letter-spacing: 0.5px;margin-bottom: 2rem} .title-divider {width: 100px;height: 4px;background: linear-gradient(135deg, var(--xred-primary), var(--xred-secondary));margin: 0 auto;border-radius: 2px;position: relative} .title-divider::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 20px;height: 20px;background: var(--xred-primary);border-radius: 50%;box-shadow: 0 0 20px rgba(230, 0, 0, 0.5)} .about-content {padding: 2rem 0} .about-heading {font-family: 'Exo 2', sans-serif;font-size: 2rem;font-weight: 600;color: #1d1d1f;margin-bottom: 1.5rem;position: relative} .about-heading::after {content: '';position: absolute;bottom: -10px;left: 0;width: 60px;height: 3px;background: linear-gradient(135deg, var(--xred-primary), var(--xred-secondary));border-radius: 2px} .about-description {font-size: 1rem;line-height: 1.6;color: #6e6e73;margin-bottom: 1.5rem;text-align: left} .about-image-container {position: relative;border-radius: 2rem;overflow: hidden;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);border: 3px solid var(--xred-primary)} .about-image {width: 100%;height: 400px;object-fit: cover;transition: transform 0.5s ease} .image-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(230, 0, 0, 0.3) 100%);display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity 0.5s ease} .about-image-container:hover .image-overlay {opacity: 1} .about-image-container:hover .about-image {transform: scale(1.05)} .overlay-content {text-align: center;color: var(--xred-white)} .overlay-content i {font-size: 4rem;margin-bottom: 1rem;color: var(--xred-primary);text-shadow: 0 0 20px rgba(230, 0, 0, 0.5)} .overlay-content span {font-size: 1.2rem;font-weight: 600;text-transform: uppercase;letter-spacing: 1px} .stats-section {margin: 4rem 0;padding: 3rem 0;background: rgba(0, 0, 0, 0.3);border-radius: 2rem;border: 1px solid rgba(230, 0, 0, 0.2);backdrop-filter: blur(10px)} .stat-item {padding: 1.5rem;transition: transform 0.3s ease;text-align: center} .stat-item:hover {transform: translateY(-5px)} .stat-number {font-family: 'Orbitron', sans-serif;font-size: 2.5rem;font-weight: 700;color: #e60000;margin-bottom: 0.5rem} .stat-label {font-size: 1rem;color: #6e6e73;font-weight: 500;text-transform: uppercase;letter-spacing: 0.5px} .features-grid {margin-top: 4rem} .feature-card {background: #ffffff;border: 1px solid #e5e5e7;border-radius: 1rem;padding: 2rem 1.5rem;text-align: center;transition: all 0.3s ease;height: 100%;position: relative;overflow: hidden;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05)} .feature-card:hover {transform: translateY(-5px);border-color: #e60000;box-shadow: 0 8px 25px rgba(230, 0, 0, 0.15)} .feature-icon {width: 60px;height: 60px;margin: 0 auto 1.5rem;background: #f5f5f7;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease} .feature-card:hover .feature-icon {transform: scale(1.05);background: #e60000} .feature-icon i {font-size: 1.5rem;color: #1d1d1f;transition: color 0.3s ease} .feature-card:hover .feature-icon i {color: #ffffff} .feature-title {font-family: 'Exo 2', sans-serif;font-size: 1.3rem;font-weight: 600;color: #1d1d1f;margin-bottom: 1rem} .feature-description {font-size: 0.95rem;line-height: 1.5;color: #6e6e73;margin: 0} @media (max-width: 768px) {.about-title {font-size: 2.5rem;letter-spacing: 2px} .about-subtitle {font-size: 1.2rem} .about-heading {font-size: 1.8rem} .about-description {font-size: 1rem} .about-image {height: 300px} .stat-number {font-size: 2.5rem} .stat-label {font-size: 1rem} .feature-card {padding: 2rem 1.5rem} .feature-icon {width: 70px;height: 70px} .feature-icon i {font-size: 1.8rem} .feature-title {font-size: 1.2rem} } .lazy-load {opacity: 0;transition: opacity 0.2s} .lazy-load.loaded {opacity: 1} .btn, .card, .product-card, .slide, .product-overlay {will-change: transform;backface-visibility: hidden;transform: translateZ(0);-webkit-transform: translateZ(0)} * {-webkit-overflow-scrolling: touch} html {scroll-behavior: smooth} body {overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} @media print {.navbar, .btn, .modal, .swiper-pagination, .swiper-button-next, .swiper-button-prev {display: none !important} body {background: white !important;color: black !important} .card {border: 1px solid #ccc !important;background: white !important} } img[src*="logo.png"] {width: 100px !important;height: 100px !important;max-width: 100px !important;max-height: 100px !important;min-width: 100px !important;min-height: 100px !important;object-fit: contain} @media (max-width: 768px) {img[src*="logo.png"] {width: 100px !important;height: 100px !important} } @media (max-width: 576px) {img[src*="logo.png"] {width: 100px !important;height: 100px !important} } .hero-section {background: linear-gradient(135deg, #000 0%, #111 50%, #000 100%);min-height: 100vh;display: flex;align-items: center} .hero-title {font-family: 'Orbitron', sans-serif;font-weight: 900;font-size: 4rem;line-height: 1.1;text-transform: uppercase;letter-spacing: 2px;background: linear-gradient(135deg, #e60000, #fff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .hero-subtitle {font-family: 'Exo 2', sans-serif;font-weight: 600;font-size: 1.5rem;color: #ff6666;text-transform: uppercase;letter-spacing: 3px} .btn-primary {background: linear-gradient(135deg, #e60000, #ff4444);border: none;color: #fff;transition: all 0.3s ease} .btn-primary:hover {background: linear-gradient(135deg, #ff4444, #ff6666);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(230, 0, 0, 0.4)} #productsGrid {display: none} #loadingState {display: block;text-align: center;padding: 2rem;color: #fff} .loading-spinner {width: 40px;height: 40px;border: 4px solid #333;border-top: 4px solid #e60000;border-radius: 50%;animation: spin 1s linear infinite;margin: 0 auto} @keyframes spin {0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } html {background: #000} body {overflow-x: hidden;-webkit-font-smoothing: antialiased;background: #000;color: #fff;margin: 0;padding: 0} .preloader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #000;display: flex;justify-content: center;align-items: center;z-index: 9999;transition: opacity .5s ease-out} .preloader img {width: 100px;height: auto;animation: pulse 1s infinite} @keyframes pulse {0%, 100% {transform: scale(1)} 50% {transform: scale(1.1)} } .preloader.fade-out {opacity: 0;pointer-events: none} #productDetails {contain: layout style paint;transform: translateZ(0)} .thumbnail-image {will-change: border-color;transform: translateZ(0)} .main-image-container img {will-change: src;transform: translateZ(0)} .premium-products-showcase {background: linear-gradient(135deg, #000 0%, #111 50%, #000 100%)} .navbar {background: rgba(0, 0, 0, .95) !important;backdrop-filter: blur(10px)} .hero-section {background: linear-gradient(135deg, #000 0%, #111 50%, #000 100%);min-height: 100vh} .shop-section {background: #000} .about-section {background: #ffffff} .bg-dark {background: linear-gradient(135deg, #111 0%, #000 100%) !important} .marquee-section, .marquee-3d-section, .products-marquee-section {background: linear-gradient(135deg, #000 0%, #111 100%)} .apple-video-section {background: linear-gradient(135deg, #000 0%, #111 100%)} footer {background: linear-gradient(135deg, #000 0%, #111 100%) !important} .modal-content {background: #fff;color: #000} .form-control {background: #fff;border: 1px solid #ddd;color: #000} .card {background: linear-gradient(145deg, #333, #111);border: 1px solid #444} .btn-primary {background: linear-gradient(135deg, #e60000, #ff4444);border: none;color: #fff} .text-primary {color: #e60000 !important} .text-white {color: #fff !important} .text-muted {color: #666 !important} section {background: #000;color: #fff} .container {background: transparent} .row {background: transparent} .col-lg-6, .col-lg-4, .col-lg-8, .col-md-6, .col-md-4, .col-md-3, .col-12 {background: transparent} .hero-content, .shop-header, .about-content {background: transparent} .product-details-section {background: #111;color: #fff} .checkout-step {background: #fff;color: #000} .order-summary {background: #fff !important;color: #000 !important} .product-card img, .product-overlay, .btn {will-change: transform} img {max-width: 100%;height: auto;display: block} .slide-image {object-fit: cover;transition: opacity 0.3s ease} .slide-image[loading] {opacity: 0} .slide-image:not([loading]) {opacity: 1}