@media(max-width:991px){.main-menu__cta{display:none;}}
@media(max-width:767px){
  :root{--section-py:56px;}
  .hero-banner{padding:calc(var(--nav-height) + 32px) 0 130px;}
  .why-us{padding:var(--section-py) 0;}
}
@media (max-width: 1600px) {

.pill-icon{
      width: 16px;
    height: 16px;
}
.pill-icon svg{
  width: 10px;
    height: 10px;
}
}
@media (max-width: 1200px) {
.step-connector{
    width: 16px;
}
.fleet-card{
    flex-direction:column;
     align-items: start;
}
  .why-us__left{
    padding-right: 0px;
  }  
  .why-us__cards{
     padding-left: 0px;
  }   
  .fleet-card__img{
            width: 100%;
  }
}
@media (max-width: 992px) {
  :root {
    --section-py: 60px;
  }
  .steps-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .step-connector {
        display: none;
    }
        .main-menu__middle-box {
        display: none;
    }
    .fleet-card__body{
        width:100%;
    }
    .load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    display: flex;
        align-items: center;
        gap: 8px;
        justify-content: center;
        border: 1px solid var(--yellow);
        width: 100%;
        border-radius: 12px;
        padding: 6px 10px;
        max-width: 300px;
        /* margin: 0 auto; */
        margin: 10px auto 0;
        font-size: 16px;
        font-weight: 500;
  }
   .route-card {
    display: none;
  }

  .route-card.visible {
    display: flex; 
    flex-direction: column;
  }
    .route-cities{
    padding: 9px 14px;
  }
    
}
@media (max-width: 768px) {
  .svc-card{
    padding: 16px;
  }
  .step-card{
        padding:16px;
    }
     .fleet__primary{
    grid-template-columns: repeat(1, 1fr);
  }
  .fleet-card__img img{
    object-fit: contain;
  }
  .hero-banner__form-fields .form-row{
        flex-direction: column;
  }
  .select-wrap, .hero-banner__form-btn-wrap{
    width:100%;
  }
  .faq-two-col {
    grid-template-columns: 1fr;
  }
  .main-menu__wrapper {
    padding: 0 20px;
  }
      .swiper-outer {
        padding: 0 17px;
    }
        .swiper-btn {
        width: 30px;
        height: 30px;
    }
        .swiper-btn svg {
        width: 16px;
        height: 16px;
    }
    .faq-two-col .faq-item:last-child:nth-child(odd){
        max-width:100%;
    }
}
/* Mobile */
@media (max-width: 576px) {
  :root {
    --section-py: 40px;
  }
  .steps-wrap{
    grid-template-columns: repeat(1, 1fr);
  }
  .faq-a-inner {
        padding: 10px 16px 16px;
    }
  .faq-q{
    padding: 16px;
  }
  .faq-icon {
    width: 24px;
    height: 24px;
  }
 /* .hero-pills{
    display:none;
 } */
  .hero_fills-notresponsive{
    display:none;
  }
 .responsive_button{
    display:none!important;
 }
 .Reponsive_hero_pills{
    display:flex;
 }
 html {
    overflow-x: hidden;
}
.main-menu__wrapper-inner{
    gap:20px;
}
.hero-form-card{
    padding:16px;
}
  .footer-two__col ul {
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 30px;
    flex-direction: row;
  }
  .final-cta a{
        width: 100%;
    justify-content: center;
  }
  .hero-promo ,.hero_banner__card-title{
    display:none;
  }
  .route-card{
    flex: 0 1 300px;
    min-width: 300px;
  }

  .get-fare-btn{
    padding: 5px 16px;
  }
}
/* @media (max-height: 900px) and (max-width: 1600px) {
  .hero-banner {
    height: 100vh;
    height: 100vh;
  }
} */

@media (max-height: 850px) and (max-width: 576px) {

  .hero-banner__inner {
    gap: 16px;
  }

  .hero-banner__title {
    font-size: 24px;
  }

  .hero-banner__promo-tag {
    font-size: 12px;
    padding: 5px 10px;
  }

  .hero-banner__desc {
    font-size: 14px;
  }

  .hero-banner__form-btn {
    height: 40px;
  }

    .hero-banner {
    height: auto;
    /* height: calc(100vh - var(--nav-height)); */
  }
}

@media (min-width: 1601px) {
  .hero-banner {
    height: auto;
    min-height: 900px;
  }
}

@media (max-width: 768px) {
  .hero-banner {
    padding-bottom: 120px;
  }

  .hero-banner__car {
    width: 140px;
    left: 5%;
    animation-duration: 12s;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .hero-banner {
    height: auto;
    min-height: 100vh;
    padding-top: calc(var(--nav-height) + 10px);
    padding-bottom: 80px;
  }
}