html,
body{
  overflow-x:hidden;
  max-width:100%;
  position:relative;
}
img,
svg,
video,
canvas,
iframe{
  max-width:100%;
  height:auto;
  display:block;
}
.img-container{
  position:relative;
  height:0;
  overflow:hidden;
}
.ratio-16-9{
  padding-bottom:56.25%;
}

.ratio-4-3{
  padding-bottom:75%;
}

.ratio-1-1{
  padding-bottom:100%;
}

.img-container img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media screen and (max-width: 768px){
  .container{
    width:100%;
    padding-left:15px;
    padding-right:15px;
    box-sizing:border-box;
  }
  .hero{
    height:auto;
    padding:40px 15px;
    min-height:350px;
  }

  .language-selector{
    top:10px;
    right:10px;
  }

  .logo-container{
    width:100%;
  }

  .company-name{
    font-size:28px;
  }

  .tagline{
    font-size:16px;
  }

  .hero-buttons{
    flex-direction:column;
    width:100%;
    gap:10px;
  }

  .hero-buttons .primary-btn,
  .hero-buttons .secondary-btn{
    width:100%;
    text-align:center;
  }
  
  /* Make buying-cta buttons stack vertically on mobile */
  .buying-cta {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .buying-cta .primary-btn,
  .buying-cta .secondary-btn,
  .buying-cta .sell-car-btn {
    width: 100%;
    min-width: unset;
  }
  .about-content{
    flex-direction:column;
    gap:20px;
  }

  .about-image,
  .about-text{
    width:100%;
  }

  .about-image img{
    width:100%;
    height:auto;
    max-height:400px;
    object-fit:cover;
    object-position:center;
  }

  .about-text h3{
    margin-top:15px;
  }
  .about-us-page .about-content{
    padding:15px 0;
  }

  .about-list li{
    margin-bottom:15px;
    align-items:flex-start;
  }

  .list-icon{
    margin-right:10px;
    flex-shrink:0;
  }
  .search-sort-container{
    flex-direction:column;
    gap:10px;
  }

  .search-container,
  .sort-container{
    width:100%;
  }

  .car-grid{
    grid-template-columns:1fr;
  }

  .car-card{
    display:flex;
    flex-direction:column;
    height:auto;
  }

  .car-info{
    padding:15px;
  }

  .car-stats{
    flex-wrap:wrap;
    gap:10px;
  }

  .car-stats .stat{
    min-width:45%;
    margin-bottom:5px;
  }

  .car-actions{
    flex-direction:column;
    gap:10px;
  }

  .car-actions button{
    width:100%;
  }
  .stats-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .testimonials-grid{
    grid-template-columns:1fr;
  }
  .faq-question h3{
    font-size:16px;
    padding-right:30px;
  }
  .buying-steps-container{
    padding:20px 0;
  }

  .buying-step{
    flex-direction:column;
    text-align:center;
    margin-bottom:30px;
  }

  .buying-step.reverse{
    flex-direction:column-reverse;
    text-align:center;
  }

  .step-content{
    width:100%;
    padding:0;
  }

  .step-icon{
    margin:15px auto;
    width:80px;
    height:80px;
  }
  .contact-container{
    flex-direction:column;
  }

  .contact-info,
  .contact-form-container{
    width:100%;
  }

  .contact-form{
    padding:15px;
  }
  .footer-content{
    flex-direction:column;
    text-align:center;
  }

  .footer-section{
    width:100%;
    margin-bottom:20px;
  }

  .social-info{
    justify-content:center;
  }
  .modal-container{
    width:95%;
    max-width:100%;
    margin:5% auto;
    overflow-y:auto;
    max-height:90vh;
  }

  .car-details-content{
    flex-direction:column;
  }

  .car-gallery{
    width:100%;
    margin-right:0;
    margin-bottom:15px;
  }

  .car-details{
    width:100%;
  }

  .car-specs-table table{
    display:block;
    overflow-x:auto;
  }

  .car-price-area{
    flex-direction:column;
    align-items:flex-start;
  }

  .car-price-area .primary-btn{
    width:100%;
    margin-top:10px;
  }
}
@media screen and (max-width: 480px){
  .section-title{
    font-size:24px;
    margin-bottom:15px;
  }

  .hero-content{
    padding:15px 0;
  }

  .car-card{
    min-height:auto;
  }

  .car-image-container{
    height:200px;
  }

  .car-title{
    font-size:18px;
  }

  .car-price{
    font-size:20px;
  }

  .car-features-list li{
    font-size:14px;
  }
  button,
  .primary-btn,
  .secondary-btn{
    padding:12px 15px;
    min-height:44px;
  }
  input,
  textarea,
  select{
    font-size:16px;
    padding:12px;
  }
  .hamburger-menu{
    top:10px;
    left:10px;
  }

  .menu-items{
    width:85%;
    padding:60px 20px 20px;
  }
}
@media (hover: none){
  .nav-link,
  .language-option,
  .car-card-btn,
  .faq-question,
  .accordion-toggle{
    min-height:44px;
    padding:12px;
  }
  .car-details-content,
  .thumbnail-gallery{
    -webkit-overflow-scrolling:touch;
  }
}