@media only screen and (max-width:1550px) {

      #detail{
          max-width: 70%;
          margin: 0 auto
      }

      section.car-feature .container , section.car-engine , section.segment-features , section.advanced-feature , section.car-color-pick , section.car-show .container , section.exterior-segment .container , section.interior-car-show .container , section.interior-slider .container  {
          max-width: 70%;
          margin: 0 auto;
      }

      section.car-feature .nav-link{
          font-size: 0.9rem;
      }
      section.details-bar .main-box h6{
          font-size: 1rem;
      }
      section.details-bar .main-box{
          height: 50px;
      }
      .header-scrolled-2{
        top: 50px;
      }
      .offcanvas-top{
        min-height: 32vh;
      }

      nav .main-box img{
          width: 155px;
      }

}


@media only screen and (max-width:1400px) {
    section.search-deal .box{
     width: 900px;

      }
      section.page-banner .box{
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      padding: 170px 0;
      }
      section.page-banner .box h4{
      
      font-size: 2.5rem;
      }
      
}







@media only screen and (max-width:1199px) {
    section.search-deal .box{
     width: 800px;

      }

    nav .resize{
        width: 75%;
    }

    nav .navbar-brand{
        width: 20%;
    }

    nav li a{
       font-size: 0.9rem;
    }

    .offcanvas-top{
        min-height: 35vh;
      }

      nav .main-box img{
          width:120px;
      }
      section.page-banner .box{
        padding: 120px 0;
      }
      
}



@media only screen and (max-width:990px) {
    section.search-deal .box{
     width: 600px;
     }
      nav li a{
        font-size: 1rem;
     }

     .topbar span{
         font-size: 0.8rem;
     }
     .topbar h4{
         font-size: .8rem;
     }
     section.blog h6{
         font-size: 1rem;
     }
     footer h6{
         font-size: 1.1rem;
     }
     section.page-navigation .navigation a{
         font-size: 0.9rem;
     }

     #detail{
         max-width: 95%;
     }

     section.request-form .container{
         max-width: 95%;
     }

     section.car-feature .container , section.car-engine , section.segment-features , section.advanced-feature , section.car-color-pick , section.car-show .container , section.exterior-segment .container ,  section.interior-car-show .container , section.interior-slider .container  {
        max-width: 95%;
        margin: 0 auto;
    }
    nav .main-box{
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3,auto);
      }


   
             nav .navbar-brand{
                width: 60%;
            }

            section.page-banner .box{
                padding: 100px 0;
              }  
}



@media only screen and (max-width:767px) {
    
    .header-scrolled-2{
        top: 60px;
    }
    
    section.search-deal .box{
     width: 400px;
      }
      .topbar .social{
          display: none;
      }
      .topbar .border-right{
        border-right: 0px solid #042750;
        padding-right: 0rem;
        display: flex;

        }
        .topbar span{
            font-size: 0.8rem;
        }
        .topbar h4{
            font-size: .7rem;
        }

        section.feedback .box{
            flex-direction: column;
        }
        section.feedback .box{
            flex-direction: column;
        }
   
        section.feedback .m-size{
            width: 100px;
            margin-bottom: 1rem;
        }

        section.page-navigation{
            overflow-x: scroll;
            /* padding: 1rem 2rem; */
        }

        section.page-navigation .navigation {
            display: flex;
            justify-content: space-between;

          }

          section.page-navigation .navigation a {
            margin-right: 0.8rem;
          }

          section.car-engine td, th{
              font-size: 0.7rem;
          }

          section.details-bar .main-box h6{
              font-size: 0.8rem;
          }

          section.details-bar .main-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
          }
          section.details-bar .main-box > div a {
            flex-direction: column;
            justify-content: center;
            text-align: center;
            
          }

          section.details-bar .main-box > div a span{
           
            margin-bottom: 0.5rem;

          }

          section.details-bar .main-box span{
              margin: 0;
          }
          
          section.car-engine .link-btn{
             flex-wrap: wrap;
          }
   
          section.car-engine .link-btn div:last-child{
             margin-top: 1rem;
          }

          .breadcrumb{
              justify-content: center;
          }


          nav .main-box{
            display: grid;
            width: 100%;
            grid-template-columns: repeat(3,auto );
          }
          section.page-banner .box{
            padding: 70px 0;
          }
          section.page-banner .box h4{
            font-size: 1.7rem;
            }
          
}


@media only screen and (max-width:575px) {


      .topbar .right{
          display: none;
      }
      footer h6{
        font-size: 0.9rem;
    }

    section.car-color-pick .size{
        width: 40px;
        height: 40px;
      }
    section.car-color-pick .tab-content p{
       font-size: 1rem !important; 
      }

    
      
      
}



@media only screen and (max-width:480px) {

    section.search-deal .box{
        width: 350px;
        margin: 1rem auto 0 auto;
        }

       nav .navbar-brand{
           margin-right: 0;
        }

        section.featured h5, section.showroom-service h5, section.feedback h5, section.blog h5{
            font-size: 1.5rem;
        }
        section.showroom-service p{
            font-size: 0.9rem;
            color: #fff;
          }
        section.showroom-service .width{
           width: 100%;
          }

          section.featured , section.about , section.feedback,section.blog{
            margin: 3rem 0;
          }
          .link a{
              font-size: 1.2rem;
          }

          nav .nav-pills .nav-link{
              margin-right: 0.5rem;
          }

          nav .resize{
              width: 70%;
          }

          section.about-us-page .d-flex a{
            font-size: 1.1rem;
             }

             section.page-banner .box{
                padding: 45px 0;
              }

              section.page-banner .box h4{
                font-size: 1.4rem;
                }
}

@media only screen and (max-width:480px) {

    section.search-deal .box{
        width: 350px;
        margin: 1rem auto 0 auto;
        }

       nav .navbar-brand{
           margin-right: 0;
        }

        section.featured h5, section.showroom-service h5, section.feedback h5, section.blog h5{
            font-size: 1.5rem;
        }
        section.showroom-service p{
            font-size: 0.9rem;
            color: #fff;
          }
        section.showroom-service .width{
           width: 100%;
          }

          section.featured , section.about , section.feedback,section.blog{
            margin: 3rem 0;
          }

         
          #detail{
            max-width: 100%;
        }

        section.details-bar .main-box h6{
            font-size: 0.7rem;
        }

        
nav .main-box{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2,auto );
  }
nav .main-box img{
   width: 150px;
  }

  .offcanvas-top{
    min-height: 40vh;
  }

}


@media only screen and (max-width:420px) {

    section.car-engine .table{
overflow-x: scroll;
    }
    
    footer .container{
        padding: 2.5rem 0.5rem 0rem 0.5rem;
    }
 
}

@media only screen and (max-width:394px) {

    section.car-engine .link-btn div:first-child{
        margin-bottom: 1rem;
     }
     section.car-color-pick .size{
        width: 30px;
        height: 30px;
      }

      section.about-us-page .d-flex a{
        font-size: 1rem;
         }
 
}
