:root {
      --primary-color: #A10000;
      --accent-color: #DAA520;
      --primary-button-hover-bg-color: #996F00;
      --dark-background-color: #1a1a1a;
      --dark-text-color: #1f2937;
      --gray-text-color: #6b7280;
      --light-background-color: #f9fafb;
      --light-border-color: #e5e7eb;
      --font-family-heading: 'Poppins', sans-serif;
      --font-family-body: 'IBM Plex Sans', sans-serif;
      --button-rounded-radius: 12px;
    }
    
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-family-body); line-height: 1.6; color: var(--dark-text-color); }
    img { max-width: 100%; height: auto; }
    a { text-decoration: none; color: inherit; }
    
    .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
    @media (min-width: 640px) { .container { padding: 0 1.5rem; } }
    @media (min-width: 1024px) { .container { padding: 0 2rem; } }
    
    .header { background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; }
    .header-inner { display: flex; justify-content: space-between; align-items: center; padding: 1rem; max-width: 1280px; margin: 0 auto; }
    .logo img { height: 70px; }
    .nav { display: none; }
    @media (min-width: 768px) { .nav { display: flex; gap: 2rem; } }
    .nav a { font-weight: 500; color: var(--dark-text-color); transition: color 0.2s; }
    .nav a:hover { color: var(--primary-color); }
    .header-cta { display: none; }
    @media (min-width: 768px) { .header-cta { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--primary-color); color: white; padding: 0.75rem 1.5rem; border-radius: var(--button-rounded-radius); font-weight: 600; transition: all 0.2s; } .header-cta:hover { background: var(--primary-button-hover-bg-color); transform: translateY(-2px); } }
    .mobile-menu-btn { display: block; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--dark-text-color); }
    @media (min-width: 768px) { .mobile-menu-btn { display: none; } }
    .mobile-nav { display: none; background: white; padding: 1rem; border-top: 1px solid var(--light-border-color); }
    .mobile-nav.active { display: block; }
    .mobile-nav a { display: block; padding: 0.75rem; font-weight: 500; color: var(--dark-text-color); }
    
    .hero { background: linear-gradient(135deg, var(--dark-background-color) 0%, #2d2d2d 100%); position: relative; overflow: hidden; padding: 4rem 0; }
    @media (min-width: 1024px) { .hero { padding: 6rem 0; } }
    .hero-inner { display: grid; gap: 3rem; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
    @media (min-width: 1024px) { .hero-inner { grid-template-columns: 1fr 1fr; padding: 0 2rem; } }
    .hero-content h1 { font-family: var(--font-family-heading); font-size: 2.5rem; font-weight: 700; color: white; margin-bottom: 1.5rem; line-height: 1.2; }
    @media (min-width: 768px) { .hero-content h1 { font-size: 3rem; } }
    @media (min-width: 1024px) { .hero-content h1 { font-size: 3.5rem; } }
    .hero-content p { font-size: 1.125rem; color: rgba(255,255,255,0.8); margin-bottom: 2rem; }
    .hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
    
    .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--primary-color); color: white; padding: 1rem 2rem; border-radius: var(--button-rounded-radius); font-weight: 700; font-size: 1.125rem; transition: all 0.2s; border: none; cursor: pointer; }
    .btn-primary:hover { background: var(--primary-button-hover-bg-color); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: white; padding: 1rem 2rem; border-radius: var(--button-rounded-radius); font-weight: 600; border: 2px solid rgba(255,255,255,0.3); transition: all 0.2s; }
    .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
    .btn-white { display: inline-flex; align-items: center; gap: 0.5rem; background: white; color: var(--primary-color); padding: 1rem 2rem; border-radius: var(--button-rounded-radius); font-weight: 700; font-size: 1.125rem; transition: all 0.2s; }
    .btn-white:hover { background: var(--light-background-color); transform: scale(1.05); }
    
    .hero-badges { display: flex; gap: 1.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; }
    .badge { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.7); font-size: 0.875rem; }
    .badge i { color: var(--primary-color); }
    .hero-image { position: relative; }
    .hero-image img { border-radius: 1.5rem; box-shadow: 0 25px 50px rgba(0,0,0,0.3); }
    .hero-floating-badge { position: absolute; bottom: -1rem; left: -1rem; background: var(--primary-color); color: white; padding: 1rem; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    .hero-floating-badge .number { font-size: 1.75rem; font-weight: 700; }
    .hero-floating-badge .text { font-size: 0.875rem; }
    
    .services { padding: 4rem 0; background: linear-gradient(180deg, var(--light-background-color) 0%, white 100%); }
    @media (min-width: 1024px) { .services { padding: 6rem 0; } }
    .section-header { text-align: center; max-width: 48rem; margin: 0 auto 3rem; }
    .section-header h2 { font-family: var(--font-family-heading); font-size: 2rem; font-weight: 700; color: var(--dark-text-color); margin-bottom: 1rem; }
    @media (min-width: 768px) { .section-header h2 { font-size: 2.5rem; } }
    @media (min-width: 1024px) { .section-header h2 { font-size: 3rem; } }
    .section-header p { font-size: 1.125rem; color: var(--gray-text-color); }
    
    .services-grid { display: grid; gap: 2rem; }
    @media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
    .service-card { background: linear-gradient(135deg, var(--light-background-color) 0%, white 100%); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 1px solid var(--light-border-color); transition: all 0.3s; }
    @media (min-width: 640px) { .service-card { padding: 2rem; } }
    .service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
    .service-icon { width: 4rem; height: 4rem; background: var(--primary-color); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; transition: transform 0.3s; }
    .service-card:hover .service-icon { transform: scale(1.1); }
    .service-icon i { font-size: 1.5rem; color: white; }
    .service-card h3 { font-family: var(--font-family-heading); font-size: 1.25rem; font-weight: 700; color: var(--dark-text-color); margin-bottom: 0.75rem; }
    .service-card p { color: var(--gray-text-color); margin-bottom: 1rem; }
    .service-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--primary-color); font-weight: 600; transition: color 0.2s; }
    .service-link:hover { color: var(--primary-button-hover-bg-color); }
    
    .cta-banner { background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); border-radius: 1rem; padding: 2rem; text-align: center; margin-top: 3rem; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
    @media (min-width: 640px) { .cta-banner { padding: 3rem; } }
    .cta-banner h3 { font-family: var(--font-family-heading); font-size: 1.5rem; font-weight: 700; color: white; margin-bottom: 1rem; }
    @media (min-width: 768px) { .cta-banner h3 { font-size: 2rem; } }
    .cta-banner p { color: rgba(255,255,255,0.9); font-size: 1.125rem; margin-bottom: 1.5rem; max-width: 40rem; margin-left: auto; margin-right: auto; }
    
    .why-us { background: linear-gradient(135deg, var(--dark-background-color) 0%, var(--dark-text-color) 100%); padding: 4rem 0; position: relative; overflow: hidden; }
    @media (min-width: 1024px) { .why-us { padding: 6rem 0; } }
    .why-us-inner { display: grid; gap: 3rem; align-items: center; }
    @media (min-width: 1024px) { .why-us-inner { grid-template-columns: 1fr 1fr; } }
    .why-us-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; position: relative; }
    .why-us-images .main-image { grid-column: span 2; border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.3); transition: transform 0.5s; }
    .why-us-images .main-image:hover { transform: scale(1.02); }
    .why-us-images .main-image img { width: 100%; height: 16rem; object-fit: cover; }
    @media (min-width: 640px) { .why-us-images .main-image img { height: 20rem; } }
    .why-us-images .small-image { border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: transform 0.5s; }
    .why-us-images .small-image:hover { transform: scale(1.05); }
    .why-us-images .small-image img { width: 100%; height: 12rem; object-fit: cover; }
    .satisfaction-badge { position: absolute; bottom: -1.5rem; right: -1.5rem; background: var(--primary-color); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 20px 40px rgba(0,0,0,0.3); border: 4px solid white; }
    .satisfaction-badge .number { font-size: 2rem; font-weight: 700; color: white; }
    .satisfaction-badge .text { font-size: 0.875rem; color: rgba(255,255,255,0.9); }
    .why-us-content h2 { font-family: var(--font-family-heading); font-size: 2rem; font-weight: 700; color: white; margin-bottom: 1rem; }
    @media (min-width: 768px) { .why-us-content h2 { font-size: 2.5rem; } }
    @media (min-width: 1024px) { .why-us-content h2 { font-size: 3rem; } }
    .why-us-content > p { font-size: 1.125rem; color: rgba(255,255,255,0.8); margin-bottom: 2rem; }
    .features-list { display: flex; flex-direction: column; gap: 1.25rem; }
    .feature-item { display: flex; align-items: flex-start; gap: 1rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 0.75rem; padding: 1.25rem; transition: background 0.3s; }
    .feature-item:hover { background: rgba(255,255,255,0.2); }
    .feature-icon { flex-shrink: 0; width: 3rem; height: 3rem; background: var(--primary-color); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
    .feature-icon i { font-size: 1.25rem; color: white; }
    .feature-item h3 { font-family: var(--font-family-heading); font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 0.5rem; }
    .feature-item p { color: rgba(255,255,255,0.7); }
    
    .how-it-works { background: white; padding: 4rem 0; }
    @media (min-width: 1024px) { .how-it-works { padding: 6rem 0; } }
    .steps-grid { display: grid; gap: 2rem; position: relative; }
    @media (min-width: 640px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } }
    .step { text-align: center; }
    .step-icon-wrapper { position: relative; display: inline-block; margin-bottom: 1.5rem; }
    .step-icon { width: 6rem; height: 6rem; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: transform 0.3s; position: relative; z-index: 1; }
    .step:hover .step-icon { transform: scale(1.1); }
    .step-icon i { font-size: 2rem; color: white; }
    .step-number { position: absolute; top: -0.5rem; right: -0.5rem; width: 2rem; height: 2rem; background: white; border: 4px solid var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; color: var(--primary-color); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    .step h3 { font-family: var(--font-family-heading); font-size: 1.25rem; font-weight: 700; color: var(--dark-text-color); margin-bottom: 0.75rem; }
    .step p { color: var(--gray-text-color); }
    
    .contact { background: linear-gradient(135deg, var(--light-background-color) 0%, white 100%); padding: 4rem 0; }
    @media (min-width: 1024px) { .contact { padding: 6rem 0; } }
    .contact-grid { display: grid; gap: 3rem; }
    @media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
    .contact-info { display: flex; flex-direction: column; gap: 2rem; }
    .contact-card { background: white; border-radius: 1rem; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid var(--light-border-color); transition: box-shadow 0.3s; }
    .contact-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
    .contact-card-inner { display: flex; align-items: flex-start; gap: 1rem; }
    .contact-icon { flex-shrink: 0; width: 3.5rem; height: 3.5rem; background: var(--primary-color); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; }
    .contact-icon i { font-size: 1.5rem; color: white; }
    .contact-card h3 { font-family: var(--font-family-heading); font-size: 1.25rem; font-weight: 700; color: var(--dark-text-color); margin-bottom: 0.5rem; }
    .contact-card p { color: var(--gray-text-color); }
    .contact-card a { color: var(--gray-text-color); transition: color 0.2s; }
    .contact-card a:hover { color: var(--primary-color); }
    .delivery-banner { background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    .delivery-banner-inner { display: flex; align-items: flex-start; gap: 0.75rem; }
    .delivery-banner i { font-size: 1.5rem; color: white; margin-top: 0.25rem; }
    .delivery-banner h4 { font-family: var(--font-family-heading); font-size: 1.125rem; font-weight: 700; color: white; margin-bottom: 0.5rem; }
    .delivery-banner p { color: rgba(255,255,255,0.9); font-size: 0.875rem; }
    
    .contact-form-wrapper { background: white; border-radius: 1rem; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid var(--light-border-color); }
    .contact-form-wrapper h3 { font-family: var(--font-family-heading); font-size: 1.5rem; font-weight: 700; color: var(--dark-text-color); margin-bottom: 1.5rem; }
    .contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
    .form-group label { display: block; font-weight: 600; color: var(--dark-text-color); margin-bottom: 0.5rem; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--light-border-color); border-radius: var(--button-rounded-radius); font-family: var(--font-family-body); font-size: 1rem; transition: border-color 0.2s; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); }
    .form-group textarea { resize: none; }
    .privacy-note { text-align: center; font-size: 0.875rem; color: var(--gray-text-color); }
    .privacy-note i { color: var(--primary-color); margin-right: 0.25rem; }
    
    .footer { background: var(--dark-background-color); color: white; padding: 4rem 0 2rem; }
    .footer-grid { display: grid; gap: 2rem; margin-bottom: 3rem; }
    @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
    .footer-about img { height: 7rem; margin-bottom: 1rem; }
    .footer-about p { color: rgba(255,255,255,0.7); font-size: 0.875rem; margin-bottom: 1rem; }
    .social-links { display: flex; gap: 1rem; }
    .social-links a { width: 2.5rem; height: 2.5rem; background: rgba(255,255,255,0.1); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
    .social-links a:hover { background: var(--primary-color); }
    .footer h3 { font-family: var(--font-family-heading); font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; }
    .footer-links { display: flex; flex-direction: column; gap: 0.75rem; }
    .footer-links a { color: rgba(255,255,255,0.7); transition: color 0.2s; }
    .footer-links a:hover { color: var(--primary-color); }
    .footer-contact { list-style: none; }
    .footer-contact li { display: flex; align-items: flex-start; gap: 0.5rem; color: rgba(255,255,255,0.7); font-size: 0.875rem; margin-bottom: 0.75rem; }
    .footer-contact i { color: var(--primary-color); margin-top: 0.25rem; }
    .footer-contact a { color: rgba(255,255,255,0.7); transition: color 0.2s; }
    .footer-contact a:hover { color: var(--primary-color); }
    .footer-badge { background: var(--primary-color); border-radius: 0.5rem; padding: 1rem; margin-top: 1.5rem; }
    .footer-badge p { color: white; font-weight: 600; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; text-align: center; }
    @media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
    .footer-bottom p { color: rgba(255,255,255,0.6); font-size: 0.875rem; }
    
    
    .pixellohost{color:#0096FF !important;text-decoration: none;}