@media (max-width: 1100px) {
  .pro { width: 30%; }
}

@media (max-width: 900px) {
  #img-slider .slide .info h1 { font-size: 60px; }
  #img-slider .slide .info h2 { font-size: 40px; }
  .pro { width: 45%; }
  #sm-banner { padding: 0 20px; }
  .bannner-box { width: 100%; margin-bottom: 10px; }
  #banner3 { padding: 0 20px; }
  .banner-box { width: 100%; }
  footer { padding: 40px 20px; }
  footer .col:nth-child(1), footer .col:nth-child(2),
  footer .col:nth-child(3), footer .col:nth-child(4) { flex-basis: 50%; }
}

@media (max-width: 768px) {
  #Header { padding: 15px 20px; }
  #navbar {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: flex-start; position: fixed; top: 0; right: -300px;
    width: 300px; height: 100vh; background: #E3E6F3;
    box-shadow: 0 0 40px rgba(0,0,0,0.2); padding: 80px 0 0 10px;
    transition: 0.5s ease;
    z-index: 99;
  }
  #navbar.active { right: 0; }
  #navbar li { padding: 20px 0; }
  #mobile { display: flex; }
  #mobile i { font-size: 24px; cursor: pointer; margin-left: 15px; color: #222; }
  #Close { display: flex; position: absolute; top: 30px; right: 25px; font-size: 24px; cursor: pointer; }
  .section-p1 { padding: 40px 20px; }
  #img-slider .slide .info { padding: 20px; }
  #img-slider .slide .info h1 { font-size: 40px; }
  #img-slider .slide .info h2 { font-size: 28px; }
  .pro { width: 100%; }
  .form input { width: 200px; }
  #newsletter { flex-direction: column; gap: 20px; }
  footer .col:nth-child(1), footer .col:nth-child(2),
  footer .col:nth-child(3), footer .col:nth-child(4) { flex-basis: 100%; }
}

@media (max-width: 400px) {
  #img-slider .slide .info h1 { font-size: 28px; line-height: 1.2; }
  #img-slider .slide .info h2 { font-size: 20px; }
}