/* RESET & BASE */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }
    body {
      font-family: 'Poppins', sans-serif;
      color: #333;
      line-height: 1.5;
      background: #f7f9fb;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    button {
      cursor: pointer;
    }

    /* HEADER / NAV */
    header {
      background: #fff;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .model-info .specs {
  display: flex;
  align-items: center;
  gap: 10px; /* space between battery and range */
  font-size: 14px;
   }
   .model-info .price {
  font-weight: bold;
  color: #333;
  margin: 10px 0;
  font-size: 20px;
}

   .finance-section {
      text-align: center;
      padding: 60px 20px;
    }

    .finance-section h2 {
      font-size: 28px;
      font-weight: 700;
      color: #2d1f47;
    }

    .finance-section p.subtitle {
      font-size: 15px;
      color: #555;
      margin-bottom: 30px;
    }

    .btn-emi {
      background: linear-gradient(90deg, #04d9ff, #00b4d8);
      color: #fff;
      font-weight: 600;
      border-radius: 25px;
      padding: 10px 30px;
      border: none;
      margin-bottom: 50px;
    }

    .feature-box {
      text-align: center;
      padding: 20px;
    }

    .feature-box img {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
    }

    .feature-box h6 {
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 600;
      color: #5a4a77;
      margin-bottom: 8px;
    }

    .feature-box p {
      font-size: 18px;
      font-weight: 600;
      color: #2d1f47;
    }

.model-info .specs .icon {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
    .nav-container {
      max-width: 1200px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
    }
    .logo {
      font-size: 1.5rem;
      font-weight: 600;
      color: #03466E; /* Chetak blue */
    }
    .nav-links {
      display: flex;
      gap: 20px;
    }
    .nav-links a {
      padding: 8px 12px;
      font-weight: 500;
      color: #555;
    }
    .nav-links a.cta {
      background: #3e7885;
      color: #000;
      border-radius: 6px;
      font-weight: 600;
    }

    /* HERO SECTION */
    .hero {
      margin-top: 70px; /* to offset fixed header */
      position: relative;
      background: url('../../images/3001-homepage-web.webp') center/cover no-repeat;
      height: 90vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-align: center;
    }
    .hero-overlay {
      position: absolute;
      top:0; left:0; right:0; bottom:0;
      background: rgba(0,0,0,0.4);
    }
    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 800px;
      padding: 0 20px;
    }
    .hero-content h1 {
      font-size: 3rem;
      margin-bottom: 20px;
    }
    .hero-content p {
      font-size: 1.2rem;
      margin-bottom: 30px;
    }
    .btn-hero {
      background: #FFD600;
      color: #000;
      padding: 14px 30px;
      font-size: 1.1rem;
      font-weight: 600;
      border: none;
      border-radius: 8px;
    }
    .btn-hero:hover {
      background: #FFC107;
    }

    /* MODEL CARDS SECTION */
    section.models {
      padding: 60px 20px;
      max-width: 1320px;
      margin: auto;
    }
    section.models h2 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 40px;
      color: #03466E;
    }
    .model-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
    }
    .model-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }
    .model-card:hover {
      transform: translateY(-5px);
    }
    .model-card img {
      width: 100%;
      height: auto;
      display: block;
    }
    .model-info {
      padding: 20px;
    }
    .model-info h3 {
      font-size: 1.3rem;
      color: #03466E;
      margin-bottom: 10px;
    }
    .model-info p {
      margin-bottom: 8px;
      font-size: 1rem;
      color: #555;
    }
    .model-info .btn-model {
      margin-top: 15px;
      background: #037c22;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-weight: 600;
    }
    .model-info .btn-model:hover {
      background: #025d1a;
    }

    /* FEATURES / SPECS / TEC PAC SECTION */
    section.features, section.specs {
      padding: 60px 20px;
      max-width: 1200px;
      margin: auto;
    }
    section.features h2, section.specs h2 {
      text-align: center;
      color: #03466E;
      margin-bottom: 40px;
      font-size: 2rem;
    }
    .features-grid, .specs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 25px;
    }
    .feature-card, .spec-card {
      background: white;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      text-align: center;
    }
    .feature-card img, .spec-card img {
      width: 50px;
      margin-bottom: 15px;
    }
    .feature-card h3, .spec-card h3 {
      margin-bottom: 10px;
      font-size: 1.2rem;
      color: #03466E;
    }
    .feature-card p, .spec-card p {
      font-size: 1rem;
      color: #555;
    }

    /* EMI / Savings Calculator */
    .calculator-section {
      background: #e9f5f0;
      padding: 60px 20px;
    }
    .calculator-container {
      max-width: 800px;
      margin: auto;
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .calculator-container h2 {
      text-align: center;
      color: #03466E;
      margin-bottom: 30px;
    }
    .calculator-container .calc-row {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 20px;
    }
    .calculator-container .calc-row input, .calculator-container .calc-row select {
      flex: 1;
      padding: 12px;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 6px;
    }
    .calculator-container button {
      background: #037c22;
      color: #fff;
      padding: 12px 25px;
      border: none;
      font-size: 1rem;
      border-radius: 6px;
      margin-top: 10px;
    }
    .calculator-container button:hover {
      background: #025d1a;
    }
    .calc-result {
      margin-top: 20px;
      padding: 15px;
      background: #f0fbf7;
      border: 1px solid #b2e4c7;
      border-radius: 6px;
      color: #03466E;
      font-weight: 600;
    }

    /* TESTIMONIALS */
    section.testimonials {
      padding: 60px 20px;
      max-width: 1000px;
      margin: auto;
    }
    section.testimonials h2 {
      text-align: center;
      color: #03466E;
      margin-bottom: 40px;
      font-size: 2rem;
    }
    .testimonial-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }
    .testimonial-card {
      background: white;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .testimonial-card p {
      font-style: italic;
      margin-bottom: 15px;
    }
    .testimonial-card strong {
      color: #037c22;
      font-weight: 600;
    }

    /* LEAD FORM / TEST RIDE */
    section.lead-form {
      padding: 60px 20px;
      max-width: 600px;
      margin: auto;
    }
    .lead-form form {
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .lead-form h2 {
      text-align: center;
      color: #03466E;
      margin-bottom: 30px;
    }
    .lead-form input, .lead-form select {
      width: 100%;
      padding: 12px;
      margin-bottom: 15px;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 6px;
    }
    .lead-form button {
      width: 100%;
      background: #FFD600;
      color: #000;
      padding: 14px;
      font-size: 1.1rem;
      font-weight: 600;
      border: none;
      border-radius: 8px;
    }
    .lead-form button:hover {
      background: #FFC107;
    }

    /* FOOTER */
    footer {
      background: #03466E;
      color: #fff;
      padding: 40px 20px;
      margin-top: 60px;
    }
    .footer-container {
      max-width: 1200px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .footer-about, .footer-links, .footer-contact {
      flex: 1;
      min-width: 200px;
      margin-bottom: 20px;
    }
    .footer-links h4, .footer-about h4, .footer-contact h4 {
      margin-bottom: 15px;
      color: #FFD600;
    }
    .footer-links ul {
      list-style: none;
    }
    .footer-links ul li {
      margin-bottom: 10px;
    }
    .footer-links ul li a {
      color: #fff;
      font-size: 0.95rem;
    }
    .footer-contact p {
      margin-bottom: 10px;
      font-size: 0.95rem;
    }
        .extra-services {
      background: #f1f8fa; /* light bluish background */
      padding: 40px 20px;
      border-radius: 12px;
      text-align: center;
    }

    .extra-services .service-box {
      text-align: center;
      padding: 20px 10px;
    }

    .extra-services .service-box img {
      width: 45px;
      height: 45px;
      margin-bottom: 12px;
    }

    .extra-services .service-box h6 {
      font-size: 16px;
      font-weight: 600;
      color: #2d1f47;
      margin-bottom: 8px;
    }

    .extra-services .service-box a {
      font-size: 14px;
      font-weight: 500;
      color: #007b83;
      text-decoration: none;
    }

    .extra-services .service-box a:hover {
      text-decoration: underline;
    }
        .savings-section {
      padding: 60px 20px;
    }

    .savings-box {
      background: linear-gradient(135deg, #f5f9ff, #dff7f9);
      border-radius: 20px;
      padding: 40px;
      height: 100%;
    }

    .savings-box small {
      font-size: 14px;
      color: #6c757d;
    }

    .savings-box h2 {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 30px;
      color: #2d1f47;
    }

    .savings-box h2 span {
      color: #00b4d8;
    }

    .form-control {
      border-radius: 25px;
      height: 50px;
      padding-left: 20px;
      margin-bottom: 15px;
      border: none;
      box-shadow: 0 0 5px rgba(0,0,0,0.05);
    }

    .slider-labels {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #555;
    }

    .form-range {
      accent-color: #00b4d8;
    }

    .btn-toggle {
      background: linear-gradient(90deg, #04d9ff, #00b4d8);
      border-radius: 25px;
      padding: 10px 20px;
      color: #fff;
      font-weight: 600;
      border: none;
      margin: 15px 5px;
    }

    .btn-toggle.secondary {
      background: transparent;
      color: #555;
      border: none;
      font-weight: 600;
    }

    .savings-amount {
      font-size: 22px;
      font-weight: 700;
      margin: 15px 0;
      color: #2d1f47;
    }

    .progress {
      height: 10px;
      border-radius: 10px;
    }

    .progress-bar {
      background: linear-gradient(90deg, #04d9ff, #00b4d8);
    }

    .progress-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      font-size: 14px;
      font-weight: 600;
      color: #2d1f47;
    }

    .scooter-img {
      border-radius: 20px;
      width: 100%;
      height: auto;
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .hero-content h1 {
        font-size: 2.2rem;
      }
      .nav-links {
        display: none; /* could add hamburger menu */
      }
    }
    .mobile-cta {
  display: none;
}

/* ========== Responsive for Mobile ========== */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* hide menu links */
  }

  .mobile-cta {
    display: inline-block; /* show button */
    margin-left: auto;
    font-size: 0.95rem;
    padding: 10px 20px;
  }

  .nav-container {
    flex-wrap: wrap;
  }

  .logo img {
    height: 45px;
  }
}