responsive.css

/* ============ Media Query ============ */
@media (max-width: 929px) {
  #hero img {
    display: none;
  }

  #hero {
    align-items: flex-start;
  }
}
@media (max-width: 799px) {
  .section-p1 {
    padding: 40px 40px;
  }

  #navbar {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    right: -300px;
    height: 100vh;
    width: 300px;
    background-color: #e3e6f3;
    box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
    padding: 80px 0 0 10px;
    gap: 25px;
  }

  #mobile {
    display: flex;
  }

  #close {
    display: initial;
  }

  #lg-bag {
    display: none;
  }

  #hero {
    height: 70vh;

    background-position: top 30% right 40%;
  }

  #hero img {
    display: none;
  }

  #feature {
    justify-content: center;
    gap: 15px;
  }

  #product1 .pro-container {
    justify-content: center;
  }

  #product1 .pro {
    margin: 15px;
  }

  #banner {
    height: 20vh;
  }

  #sm-banner .banner-box {
    min-width: 100%;
    height: 30vh;
  }

  #banner3 {
    padding: 0 40px;
  }

  #banner3 .banner-box {
    width: 28%;
  }

  #newsletter .form {
    width: 70%;
  }

  #read-more {
    display: inline;
  }
  #read-more-text {
    display: none;
  }

  /* ======= Contact Form ====== */
  #form-details {
    padding: 40px;
  }

  #form-details form {
    width: 50%;
  }
}

@media (max-width: 477px) {
  #header {
    padding: 10px 30px;
  }

  #hero {
    padding: 0 20px;
    background-position: 85%;
  }

  h2 {
    font-size: 32px;
    color: var(--primary-color);
  }

  h1 {
    font-size: 38px;
  }

  .section-p1 {
    padding: 20px;
  }

  #feature .fe-box {
    width: 155px;
    margin: 0 0 15px 0;
  }

  #product1 .pro {
    width: 100%;
  }

  #banner {
    height: 40vh;
  }

  #sm-banner .banner-box {
    height: 40vh;
  }

  #banner3 {
    padding: 0 20px;
  }

  #banner3 .banner-box {
    width: 100%;
  }

  #newsletter .form {
    width: 100%;
  }

  #newsletter {
    padding: 40px 20px;
  }

  footer .copyright {
    text-align: start;
  }

  /* Product Detail */
  #prodetails {
    flex-direction: column;
  }

  #prodetails .single-pro-image {
    width: 100%;
    margin-right: 0;
  }

  #prodetails .single-pro-details {
    width: 100%;
  }

  /* About us  */
  #about-head {
    flex-direction: column;
    gap: 20px;
  }

  #about-head img {
    width: 100%;
  }

  #about-app .video {
    width: 100%;
  }

  /* ======= Contact page ========= */
  #contact-details {
    flex-direction: column;
  }

  #contact-details .details {
    width: 100%;
    margin-bottom: 30px;
  }

  #contact-details .map {
    width: 100%;
  }

  #form-details {
    margin: 10px;
    padding: 30px 10px;
    flex-wrap: wrap;
  }

  #form-details form {
    width: 100%;
    margin-bottom: 30px;
  }

  /* === Add to Cart === */
  #cart-add {
    flex-direction: column;
  }
  #coupon {
    width: 100%;
  }
  #subtotal {
    width: 100%;
    padding: 20px;
  }
}