*{margin:0;padding:0;box-sizing:border-box}
:root{--primary-blue:#1e3a8a;--dark-blue:#1e293b;--orange-accent:#f97316;--light-gray:#f8fafc;--text-dark:#0f172a;--text-gray:#64748b;--white:#ffffff;--border-light:#e2e8f0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#2c3e50;line-height:1.6;background:#ffffff}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Hero */
.hero-section{padding:100px 0;background:#fff;position:relative}
.hero-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.section-label{color:#ff0000;font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase;display:block;margin-bottom:20px}
.hero-left h1{color:#1a2332;font-size:clamp(28px,4.2vw,48px);font-weight:700;line-height:1.2;margin-bottom:15px;letter-spacing:-1px}
.subtitle{color:#3b5da7;font-size:clamp(18px,2.8vw,24px);font-weight:500;margin-bottom:20px}
.hero-description{color:#6c757d;font-size:18px;line-height:1.8;margin-bottom:20px}
.hero-additional{color:#6c757d;font-size:16px;line-height:1.8;margin-bottom:40px}
.hero-additional strong{color:#1a2332;font-weight:600}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.stat-card{text-align:center;padding:20px;background:#f8f9fa;border-radius:10px;transition:.3s}
.stat-card:hover{background:#3b5da7;transform:translateY(-5px);box-shadow:0 10px 30px rgba(59,93,167,.2)}
.stat-card:hover .stat-number{color:#fff}
.stat-card:hover .stat-label{color:rgba(255,255,255,.9)}
.stat-number{font-size:36px;font-weight:700;color:#3b5da7;margin-bottom:5px;transition:.3s}
.stat-label{font-size:14px;color:#6c757d;font-weight:500;transition:.3s}
.hero-right{position:relative}
.hero-image{background:#f8f9fa;border-radius:20px;overflow:hidden;height:min(600px,65vh);display:flex;align-items:center;justify-content:center;box-shadow:0 20px 60px rgba(0,0,0,.08)}

/* Why choose */
.why-choose{padding:100px 0;background:#f8f9fa;position:relative}
.why-header{text-align:center;margin-bottom:80px}
.why-label{color:#ff0000;font-size:16px;font-weight:600;letter-spacing:1px;position:relative;display:inline-block;padding:0 40px}
.why-label::before,.why-label::after{content:"";position:absolute;top:50%;width:30px;height:2px;background:#ff0000}
.why-label::before{left:0}.why-label::after{right:0}
.why-title{color:#1a2332;font-size:clamp(24px,4vw,48px);font-weight:700;margin-top:20px;line-height:1.2;letter-spacing:-1px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:60px;position:relative}
.process-step{text-align:center;position:relative}
.step-icon-wrapper{position:relative;display:inline-block;margin-bottom:30px}
.step-icon{width:100px;height:100px;background:#3b5da7;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;transition:.3s;border:3px solid #e3e9f3;box-shadow:0 10px 30px rgba(59,93,167,.2)}
.process-step:hover .step-icon{background:#ff0000;transform:scale(1.1);box-shadow:0 15px 40px rgba(255,0,0,.3)}
.step-connector{position:absolute;top:50px;left:100%;width:calc(100% - 100px);height:2px;background:linear-gradient(90deg,#3b5da7 0%,#3b5da7 50%,#e3e9f3 50%,#e3e9f3 100%);background-size:20px 2px;z-index:1}
.process-step:last-child .step-connector{display:none}
.process-step h3{color:#1a2332;font-size:20px;font-weight:600;margin-bottom:15px;transition:.3s}
.process-step:hover h3{color:#ff0000}
.process-step p{color:#6c757d;font-size:15px;line-height:1.6;max-width:250px;margin:0 auto}
.additional-features{display:flex;justify-content:center;gap:40px;padding-top:40px;border-top:1px solid #dee2e6}
.feature-badge{display:flex;align-items:center;gap:15px;padding:15px 30px;background:#fff;border-radius:50px;box-shadow:0 5px 20px rgba(0,0,0,.08);transition:.3s}
.feature-badge:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.feature-badge span{color:#1a2332;font-size:16px;font-weight:600}

/* Mobile service */
.mobile-service{padding:100px 0;background:var(--light-gray);position:relative}
.service-header{text-align:center;margin-bottom:60px}
.service-badge{background:linear-gradient(90deg,#ff0000,#dc0000);color:#fff;padding:8px 20px;border-radius:30px;font-size:12px;font-weight:600;letter-spacing:2px;display:inline-block;margin-bottom:20px}
.service-main-title{color:#1a2332;font-size:clamp(22px,3.6vw,42px);font-weight:700;line-height:1.2;letter-spacing:-1px}
.service-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.service-image-side{position:sticky;top:100px}
.service-image-container{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,.08);position:relative;overflow:hidden}
.image-overlay{position:absolute;top:-50px;right:-50px;width:150px;height:150px;background:radial-gradient(circle,#ff0000 0%,transparent 70%);opacity:.05}
.van-illustration{width:100%;height:auto;position:relative;z-index:1}
.service-content-side{padding-top:20px}
.service-intro{margin-bottom:50px}
.service-lead{font-size:clamp(16px,2.5vw,20px);line-height:1.7;color:#2c3e50;margin-bottom:16px}
.service-lead strong{color:#ff0000;font-weight:600}
.service-secondary{font-size:clamp(14px,2.3vw,17px);line-height:1.7;color:#6c757d}
.service-secondary strong{color:#3b5da7;font-weight:600}
.service-highlights{display:grid;gap:25px;margin-bottom:50px}
.highlight-card{display:flex;gap:20px;padding:25px;background:#fff;border-radius:15px;border:1px solid #e9ecef;transition:.3s}
.highlight-card:hover{border-color:#ff0000;box-shadow:0 10px 30px rgba(255,0,0,.1);transform:translateX(10px)}
.highlight-icon{width:60px;height:60px;background:rgba(255,0,0,.05);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.highlight-content h4{color:#1a2332;font-size:18px;font-weight:600;margin-bottom:5px}
.highlight-content p{color:#6c757d;font-size:15px;line-height:1.5}
.service-action{background:#1a2332;border-radius:15px;padding:35px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 15px 40px rgba(26,35,50,.2)}
.action-text{display:flex;flex-direction:column;gap:5px}
.action-label{color:#fff;font-size:20px;font-weight:600}
.action-subtitle{color:rgba(255,255,255,.7);font-size:15px}
.action-button{background:#ff0000;color:#fff;padding:15px 35px;border-radius:50px;font-size:18px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:10px;transition:.3s}
.action-button:hover{background:#dc0000;transform:scale(1.05);box-shadow:0 10px 30px rgba(255,0,0,.3)}

/* What we do */
.what-we-do{padding:80px 0}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:40px}
.service-card{background:#fff;padding:40px;border-radius:10px;box-shadow:0 3px 15px rgba(0,0,0,.08);transition:.3s;border-top:4px solid #3b5da7;display:block;text-decoration:none;color:inherit}
.service-card:hover{transform:translateY(-5px);box-shadow:0 5px 25px rgba(0,0,0,.12);border-top-color:#ff0000}
.service-card h3{color:#3b5da7;font-size:24px;margin-bottom:20px;font-weight:600}
.service-card p{color:#546e7a;line-height:1.7;font-size:16px}
/* Accessible focus for clickable cards */
.service-card:focus-visible{outline:3px solid #ff0000;outline-offset:3px}

/* Brands */
.brands-section{padding:64px 0;background:var(--light-gray);overflow:hidden}
.brands-section .section-header{text-align:center;margin-bottom:40px}
.brands-section .section-header .main-heading{font-size:32px;font-weight:700;color:var(--dark-blue)}
.brands-slider .swiper-slide{display:flex;justify-content:center;align-items:center}
.brands-slider .swiper-slide img{height:40px;max-width:150px;object-fit:contain;filter:grayscale(40%);opacity:.7;transition:.3s}
.brands-slider .swiper-slide:hover img{filter:grayscale(0%);opacity:1;transform:scale(1.1)}
.brands-slider-2{margin-top:80px}

/* Floating Call Button */
.floating-call-button{position:fixed;right:20px;bottom:20px;display:inline-flex;align-items:center;gap:10px;background:var(--orange-accent);color:#fff;padding:12px 16px;border-radius:999px;text-decoration:none;box-shadow:0 10px 25px rgba(0,0,0,.15);font-weight:700;z-index:1100;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.floating-call-button{background:#d91c1c}
.floating-call-button:hover{background:#A69FECFF;color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}
.floating-call-button .fcb-icon{display:inline-flex;width:28px;height:28px;background:rgba(255,255,255,.15);border-radius:50%;align-items:center;justify-content:center}
.floating-call-button .fcb-text{font-size:16px;letter-spacing:.3px}
@media (max-width:768px){.floating-call-button{right:16px;bottom:16px;padding:12px 14px}.floating-call-button .fcb-text{font-size:15px}}

/* Ensure brand slider spans container width */
.brands-slider{width:100%}

/* Fallback: if Swiper doesn't initialize, still show multiple logos */
.brands-slider:not(.swiper-initialized) .swiper-wrapper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.brands-slider:not(.swiper-initialized) .swiper-slide{width:100%}
@media (min-width:768px){.brands-slider:not(.swiper-initialized) .swiper-wrapper{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}}
@media (min-width:1024px){.brands-slider:not(.swiper-initialized) .swiper-wrapper{grid-template-columns:repeat(8,minmax(0,1fr));gap:28px}}
@media (min-width:1280px){.brands-slider:not(.swiper-initialized) .swiper-wrapper{grid-template-columns:repeat(10,minmax(0,1fr));gap:32px}}

/* Contact */
.contact-us-banner{padding:5rem 0;text-align:center}
.contact-us-container{max-width:800px;margin:0 auto;padding:0 2rem}
.contact-us-banner .eyebrow{color:var(--orange-accent);font-weight:600;margin-bottom:1rem;font-size:1rem;text-transform:uppercase;letter-spacing:.5px}
.contact-us-banner h2{font-size:clamp(24px,4.5vw,40px);font-weight:700;margin-bottom:1.25rem;color:var(--text-dark)}
.contact-us-banner p{color:var(--text-gray);font-size:clamp(14px,2.6vw,18px);margin-bottom:2rem;max-width:650px;margin-left:auto;margin-right:auto}
.contact-us-banner .btn-call{background:var(--dark-blue);color:#fff;padding:1rem 2.5rem;border-radius:50px;text-decoration:none;font-weight:600;transition:.3s;display:inline-flex;align-items:center;gap:.75rem}
.contact-us-banner .btn-call:hover{background:#000;transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.1)}

/* Responsive */
@media (max-width:1200px){
  .container{padding:0 16px}
}
@media (max-width:968px){
  .hero-wrapper{grid-template-columns:1fr;gap:28px}
  .hero-left h1{font-size:36px}
  .subtitle{font-size:20px}
  .hero-image{height:360px}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .step-connector{display:none}
  .additional-features{flex-wrap:wrap}
}
@media (max-width:768px){
  .hero-section,.why-choose{padding:48px 0}
  .hero-left h1{font-size:32px}
  .hero-stats{grid-template-columns:1fr;gap:12px}
  .services-grid{grid-template-columns:1fr}
  .service-layout{grid-template-columns:1fr;gap:28px}
  .service-image-side{position:relative;top:0}
  .service-main-title{font-size:26px}
  .service-lead{font-size:17px}
  .service-action{flex-direction:column;gap:20px;text-align:center}
  .action-button{width:100%;justify-content:center}
  .process-grid{grid-template-columns:1fr}
  .why-title{font-size:28px}
  .service-header{margin-bottom:40px}
  .hero-image{height:300px}
  .additional-features{flex-direction:column;gap:16px;align-items:stretch}
  .feature-badge{justify-content:flex-start}
  .contact-us-banner{padding:3.5rem 0}
  .contact-us-banner h2{font-size:1.8rem}
  .contact-us-banner p{font-size:.95rem}
  .contact-us-banner .btn-call{display:flex;width:100%;justify-content:center}
  /* Brands: show pagination on mobile and slightly smaller logos */
  .brands-section .swiper-pagination{display:block;margin-top:12px}
  .brands-section .swiper-pagination-bullet{width:8px;height:8px;background:#cbd5e1;opacity:1}
  .brands-section .swiper-pagination-bullet-active{background:#1a2332}
  .brands-slider .swiper-slide img{height:28px;max-width:110px}
}

/* Hide brands pagination by default on larger screens */
.brands-section .swiper-pagination{display:none}
