/* ===== NAVBAR ===== */
    .navbar-nav .nav-link {
      font-weight: 600;
      color: #1a237e !important; /* dark blue */
      margin-left: 25px;
     
    }

    .navbar {
      border-bottom: 3px solid #0033cc; /* blue underline */
  
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .navbar-brand span {
      display: block;
      line-height: 1;
    }

    .logo-text-main {
      font-weight: 700;
      color: #d32f2f; /* red */
    }

    .logo-subtext {
      font-size: 12px;
      color: #1a237e;
      font-weight: 600;
      letter-spacing: 2px;
    }

    @media (max-width: 991.98px) {
      .navbar-collapse {
        background-color: rgb(153, 150, 150);
        padding: 1rem;
      }
    }

    /* ===== HERO SECTION ===== */
    .hero-section {
      background: linear-gradient(to right, #f9f9f9, #f9f9f9); /* Deep blue gradient */
      color: rgb(10, 10, 10);
      padding: 60px 0;
    }

    .hero-title {
      font-size: 2.5rem;
      font-weight: 800;
    }

    .hero-title .orange {
      color: #247ce0dc;
    }

    .hero-subtext {
      font-size: 1rem;
      color: #0a0a0a;
      margin-top: 15px;
    }

    .feature-box {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      color: rgb(0, 0, 0);
    }

    .feature-box img {
      width: 24px;
      margin-right: 10px;
    }

    .quote-form {
      background: white;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }

    .quote-form h5 {
      font-weight: 700;
    }

    .form-select {
      font-size: 0.9rem;
    }

    .tab-indicator {
      height: 4px;
      background: #2563eb;
      width: 50%;
      margin-bottom: 20px;
    }

    .form-note {
      font-size: 0.75rem;
      color: gray;
      margin-top: 10px;
    }

    .form-note i {
      color: #f59e0b;
      margin-right: 5px;
    }

    @media (max-width: 768px) {
      .hero-title {
        font-size: 2rem;
        text-align: center;
      }

      .hero-subtext {
        text-align: center;
      }

      .quote-form {
        margin-top: 30px;
      }
    }
     
    /* addng max conatiner for footer */

    @media (min-width: 1200px) {
    .containerfull {
        max-width: 100%;
    }
}

    .form-label{
      color: black;
    }
    
    .rounded{
      border-radius: 20px  !important;
    }
  .footer{
    background:#efeff0; color:#000000; padding:50px 20px; font-family:Arial, sans-serif;
  }

  .footer-main{
    display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1200px; margin:auto; gap:40px;
  }

  .footer-h4{
    flex:1; min-width:160px;
  }
  .footer-h4 ul{
    list-style:none; padding:0; margin:0; line-height:1.9; font-size:16px;
  }
  .footer-h4 ul li a{
    color:#313030; text-decoration:none;

  }
  .footer-h4 p{
    margin:6px 0; font-size:16px;
  }

  /* Layout */
.engine-search {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  background: #f9f9f9;
  padding: 40px;
  flex-wrap: wrap;
}

/* Left Form */
.engine-form {
  background: #969899;
  color: #fff;
  padding: 25px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  width: 35%;
  flex-shrink: 0;
}

.engine-form h2 {
  margin-bottom: 20px;
  font-size: 25px;
  font-weight: bold;
}

.engine-form label {
  display: block;
  margin: 10px 0 5px;
  font-size: 14px;
}

.engine-form select {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 4px;
  margin-bottom: 10px;
}

.engine-form button {
  width: 100%;
  background: #000;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.engine-form button:hover {
  background: #333;
}

/* Right Info */
.engine-info {
  flex: 1;
  min-width: 250px;
  padding: 6%;
}

.engine-info h3 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #333;
}

.engine-info ul {
  list-style: none;
  padding: 0px 15px;
  margin-bottom: 20px;
  
}

.engine-info ul li {
  margin-bottom: 10px;
  font-size: 20px;
}

.contact-text {
  font-size: 28px;
  font-weight: bold;
  color: #555;
  margin-bottom: 10px;
}

.phone {
  font-size: 32px;
  font-weight: bold;
  color: #0ea5e9;
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .engine-search {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .engine-form {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
  }

  .engine-info {
    text-align: center;
    margin: 15%;
  }

  .engine-info ul li {
    font-size: 15px;
  }

  .phone {
    font-size: 20px;
  }
}
/* transmission-brands */
.transmission-brands {
  padding: 40px 20px;
  background: #fff;
}

.transmission-brands h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 2px solid #c5600d; /* Orange underline */
  display: inline-block;
  padding-bottom: 5px;
  color: #2370c9;
}

/* Brand List Grid */
.brand-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 20px;
}

.brand-list a {
  display: block;
  font-size: 15px;
  color: #111;
  text-decoration: none;
  position: relative;
  padding-left: 20px;
  transition: 0.3s;
}

.brand-list a::before {
  content: "»";
  position: absolute;
  left: 0;
  color: #0e0d0d;
  font-weight: bold;
}

.brand-list a:hover {
  color: #ff6600;
}

/* Responsive Adjustments */
@media (max-width: 379px) {
  .brand-list {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  }
}

@media (max-width: 480px) {
  .brand-list {
    grid-template-columns: 1fr;
  }
}

/* container for steps: keep on one line on large screens */
.how-it-works .steps-row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap: 18px;
  flex-wrap: nowrap; /* <-- ensures single line on large screens */
  margin-top: 10px;
}

/* each step card */
.how-it-works .step{
  width: 260px;            /* adjust width to fit your layout */
  text-align: center;
  flex-shrink: 0;
}

/* number circle */
.how-it-works .step-circle{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0d6efd;     /* Bootstrap primary */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 18px;
}

/* arrow between steps (hidden on small screens via bootstrap class d-none d-md-flex) */
.how-it-works .arrow{
  font-size: 28px;
  color: #6c757d;
  align-self: center;
  margin: 0 6px;
  user-select: none;
}

/* tidy up paragraph spacing */
.how-it-works .step p {
  margin-bottom: 0;
}

/* RESPONSIVE: allow wrapping and hide arrows on small widths, show two columns on smaller screens */
@media (max-width: 991.98px) {
  .how-it-works .steps-row{
    flex-wrap: wrap;
    gap: 20px;
  }
  .how-it-works .arrow{ display:none !important; } /* arrows hidden on smaller screens */
  .how-it-works .step{
    width: calc(50% - 16px); /* two columns per row on tablet / mobile */
  }
}

/* EXTRA small phones - stack single column (optional) */
@media (max-width: 420px) {
  .how-it-works .step{
    width: 100%;
  }
}