* {
  box-sizing: border-box;
}

.flex {
  display: flex;
  /* flex-wrap: wrap; */
}

.grid {
  display: grid;
}


@media (width <=25rem) {

  .hero-container {
    grid-template-columns: 1fr;
    height: 74rem;
    align-items: center;
    justify-content: center;
  }

  .about-hero-container {
    height: 60rem;
  }

  .product-hero-container h1 {
    top: 62%;
    padding-top: 5rem;
    margin-left: 3rem;
  }

  .product-hero-container h2 {
    top: 56%;
    padding-top: 5rem;
    margin-left: 3rem;
  }

}

@media (25rem < width < 30rem) {

  .product-hero-container h1 {
    top: 35%;
    color: black;
    margin-left: 2rem;
  }

  .product-hero-container h2 {
    top: 50%;
    color: white;
    padding-top: 1rem;
    margin-left: 2rem;
  }

}

@media (30rem < width < 40rem) {

  .product-hero-container h1 {
    top: 46%;
    color: black;
    margin-left: 3rem;
  }

  .product-hero-container h2 {
    top: 60%;
    color: white;
    margin-left: 3rem;
  }

}

@media (40rem < width < 50rem) {

  .product-hero-container h1 {
    top: 58%;
    color: black;
    margin-left: 3rem;
  }

  .product-hero-container h2 {
    top: 68%;
    color: white;
    margin-left: 3rem;
  }

}

@media (width <=30.31rem) {

  .footer-block {
    grid-template-columns: 1fr;
  }

  .shop-locations {
    margin: 1rem;
  }

  .nav-bar {
    grid-template-columns: 1fr;
  }

  .nav-buttons {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

}

@media (width <=20rem) {

  .total-price-container {
    margin-top: 63rem;
    align-items: center;
  }

  #shopping_cart {
    margin-left: 1rem;
    margin-right: 1rem;
    /* width: 90%; */
    text-align: center;
  }

  .input-buttons {
    justify-self: left;
    text-align: left;
  }

  .payments {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  #payment_form {
    justify-self: center;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr;
    column-gap: 1rem;
  }

  .payment-longer input {
    width: 90%;
    margin-right: 2rem;
  }

  .payment-shorter input {
    max-width: 22rem;
    margin-left: 0.1rem;
  }

  .payment-shorter label {
    padding-left: 0.1rem;
  }

  .contact_us {
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-content: center;
  }

  .contact_us h1 {
    font-size: 3rem;
    margin-left: 0.5rem;
  }

  .contact_us_form input,
  .contact_us_form textarea {
    width: 100%;
  }

  .contact-form-email,
  .contact-form-message {
    margin: 0;
  }

  .contact_us_form label {
    margin-left: 0;
  }

  .form_two_column {
    grid-template-columns: 1fr;
    max-width: 100%;
    margin: 0;

  }

  .form_two_column label,
  .form_two_column input {
    margin-left: 0;
  }

  #citation h1 {
    font-size: 2rem;
  }

}

@media (20rem < width < 30.31rem) {
  .total-price-container {
    margin-top: 64rem;
  }

  #shopping_cart {
    margin-left: 2rem;
    margin-right: 1rem;
    /* width: 90%; */
    text-align: center;
  }

  .input-buttons {
    justify-self: left;
    text-align: left;
  }

  .payments {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  #payment_form {
    justify-self: center;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr;
    column-gap: 1rem;
  }

  .payment-longer input {
    width: 90%;
    margin-right: 2rem;
  }

  .payment-shorter input {
    max-width: 22rem;
    margin-left: 0.1rem;
  }

  .payment-shorter label {
    padding-left: 0.1rem;
  }

  .contact_us {
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-content: center;
  }

  .contact_us h1 {
    font-size: 3rem;
    margin-left: 0.5rem;
  }

  .contact_us_form h2 {
    margin-left: 0;
  }

  .contact_us_form input,
  .contact_us_form textarea {
    width: 100%;
  }

  .contact-form-email,
  .contact-form-message {
    margin: 0;
  }

  .contact_us_form label {
    margin-left: 0;
  }

  .form_two_column {
    grid-template-columns: 1fr;
    max-width: 100%;
    margin: 0;
    gap: 0;
  }

  .form_two_column label,
  .form_two_column input {
    margin-left: 0;
  }

  #citation h1 {
    font-size: 2rem;
  }

}

@media (30.31rem < width < 37.44rem) {

  .footer-block {
    grid-template-columns: 6fr 5fr;
  }

}

@media (30.31rem < width < 35.63rem) {


  .contact_us {
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-content: center;
  }

  .contact_us h1 {
    font-size: 4rem;
    margin-left: 0.5rem;
  }

  .contact_us_form input,
  .contact_us_form textarea {
    width: 100%;
  }

  .contact-form-email,
  .contact-form-message {
    margin: 0;
  }

  .contact_us_form label {
    margin-left: 0;
  }

  .form_two_column {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    margin: 0;

  }

  .form_two_column label,
  .form_two_column input {
    margin-left: 0;
  }

}



@media (35.63rem < width < 45.31rem) {

  .contact_us {
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-content: center;
  }

  .contact_us h1 {
    font-size: 4rem;
    margin-left: 0.5rem;
  }

  .contact_us_form input,
  .contact_us_form textarea {
    width: 100%;
  }

  .contact-form-email,
  .contact-form-message {
    margin: 0;
  }

  .contact_us_form label {
    margin-left: 0;
  }

  .form_two_column {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    margin: 0;

  }

  .form_two_column label,
  .form_two_column input {
    margin-left: 0;
  }
}

@media (30.31rem < width <= 37.13rem) {

  .total-price-container {
    margin-top: 65rem;
  }

}

@media (37.13rem < width < 45.31rem) {
  .total-price-container {
    margin-top: 48rem;
  }

  /* .third-column-button {
    grid-column: 1 / 8;
  } */

  .payments {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .payment-longer input {
    width: 90%;
    margin-right: 2rem;
  }

  .payment-shorter input {
    max-width: 16rem;
    margin-left: 0.1rem;
  }

  .payment-shorter label {
    padding-left: 0.1rem;
  }


  #citation h1 {
    font-size: 3rem;
  }

}

@media (width <=45.31rem) {

  .product-listing {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
    padding-top: 0;
  }

  .hero-container,
  .about-us {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-container h1,
  .about-hero-container h1 {
    font-size: 2rem;
    padding: 1rem;
  }

  .hero-container p,
  .about-hero-container p {
    padding: 1rem;
  }

  .hero-container .default-button-two {
    margin: 1rem;
  }

  .about-us h2,
  .about-us p {
    padding-left: 0;
  }

  .about-us p {
    padding: 0;
  }

  .about-us .default-button-three {
    margin-left: 1rem;
  }

  .about-hero-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .about-section, .about-team-section, .contact_us, .product-detail-section, #new_products, #recommendations, .order-details, #citation  {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .product-list-container {
    margin-top: 1rem;
  }

  .new-products-heading h2 {
    margin: 0;
    margin-top: 1rem;
  }

  .new-products-heading {
    grid-template-columns: 1fr;
  }

  .new-products-heading h2,
  .new-products-heading .default-button-one {
    justify-self: center;
  }

  .product-detail {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .product-detail h2 {
    font-size: 1.5rem;
  }

  .product-detail h3 {
    font-size: 1.25rem;
  }

  #order_confirm {
    margin-left: 1rem;
    margin-right: 1rem;
  }

}

@media (min-width: 45.31rem) {

  .product-listing {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 2.5rem;
  }

  .new-products-heading {
    grid-template-columns: 1fr 1fr;
  }

}

@media (width <= 37.13rem) {

  .order-items1,
  .order-items2 {
    grid-template-columns: 1fr;
  }

  .input-buttons {
    justify-self: left;
    text-align: left;
  }

}

@media (37.13rem < width < 47.5rem) {

  .order-items1,
  .order-items2 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .input-buttons {
    justify-self: left;
    text-align: left;
  }

}

@media (width >= 47.5rem) {

  .order-items1,
  .order-items2 {
    grid-template-columns: 2fr 3fr 3fr;
    gap: 2rem;
  }

}

@media (45.31rem < width < 53.94rem) {

  .payments {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .payment-longer input {
    width: 110%;
    margin-right: 2rem;
  }

  .payment-shorter input {
    max-width: 15rem;
    margin-left: 5rem;
  }

  .payment-shorter label {
    padding-left: 5rem;
  }
}

@media (53.94rem < width < 56.25rem) {

  .payments {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .payment-longer input {
    width: 114%;
    margin-right: 2rem;
  }

  .payment-shorter input {
    max-width: 15rem;
    margin-left: 5.75rem;
  }

  .payment-shorter label {
    padding-left: 5.75rem;
  }
}

@media (45.31rem < width < 47.5rem) {
  .total-price-container {
    margin-top: 50rem;
  }
}

@media (47.5rem <= width < 55.5rem) {
  .total-price-container {
    margin-top: 12rem;
  }
}


@media (width=55.5rem) {
  .total-price-container {
    margin-top: 20rem;
  }
}

@media (55.5rem < width < 56.25rem) {
  .total-price-container {
    margin-top: 18rem;
  }
}

@media (width = 56.25rem) {
  .total-price-container {
    margin-top: 15rem;
  }
}


@media (45.31rem < width < 56.25rem) {

  .product-detail {
    grid-template-columns: 3fr 3fr;
    gap: 1rem;
  }

  .contact_us {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  #citation h1 {
    font-size: 4rem;
  }

}

@media (width <=50.5rem) {

  .nav-bar {
    grid-template-columns: 1fr 1fr;
  }

  .nav-buttons {
    display: none;
  }

  /* Show .nav-buttons when 'active' class is added */
  .nav-buttons.active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: top;
    background-color: black;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    padding-top: 6rem;
    z-index: 1;
  }

  .button-nav {
    /* height: 100%; */
    max-height: 8rem;
    margin-bottom: auto;
  }

  .nav-buttons .default-button-one {
    justify-self: flex-start;
    align-self: top;
    margin-top: 0;
  }

  .nav-bar .logo-image,
  .nav-bar .logo-link {
    justify-self: left;
    margin-left: 0.25rem;
    padding: 0;
  }

  .menu-toggle-button {
    display: block;
    position: fixed;
    justify-self: right;
    margin: 1rem;
    z-index: 2;
  }

}

@media (50.5rem < width < 66.5rem) {

  .nav-bar {
    grid-template-columns: 3fr 10fr;
  }

  .nav-buttons {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

}

@media (width >=66.5rem) {

  .nav-bar {
    grid-template-columns: 3fr 10fr;
  }

  .nav-buttons {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

}

@media (width <=42.88rem) {

  .product-list-container {
    grid-template-columns: 1fr;
    margin-top: 1rem;
  }

  .sticky-filter-elements,
  .sticky-filter-toggle {
    position: static;
  }

  .all-product-list {
    grid-template-columns: 1fr;
    row-gap: 1rem;
    margin-top: 2rem;
  }

}



@media (42.88rem < width < 56.25rem) {

  .product-list-container {
    grid-template-columns: 1fr;
    margin-top: 1rem;
  }

  .sticky-filter-elements,
  .sticky-filter-toggle {
    position: static;
  }

  .all-product-list {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    row-gap: 2rem;
    margin-top: 2rem;
  }

}

@media (width <=56.25rem) {

  #contact_us_form_container {
    justify-self: center;
  }

  .subtotal-bar,
  .total-bar {
    grid-template-columns: 3fr 2fr;
  }

  .shipping-bar {
    grid-template-columns: 1fr 1fr;
  }

}

@media (width >=56.25rem) {

  .product-list-container {
    grid-template-columns: 1fr 4fr;
    gap: 2rem;
  }

  .all-product-list {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    row-gap: 2rem;
  }

}

@media (width < 58.06rem) {

  .about-section {
    grid-template-columns: 1fr;
  }

  #about_content,
  #about_img_1,
  #team_container,
  #about_img_2 {
    justify-self: center;
  }

  .about-team-section {
    grid-template-columns: 1fr;
  }

}

@media (37.44rem < width < 58.06rem) {

  .footer-block {
    grid-template-columns: 6fr 5fr 6fr;
  }

}

@media (width >=58.06rem) {

  .about-section,
  .about-us {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .about-team-section {
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
  }

  #about_us_image {
    width: 32rem;
  }

  .about-us h2 {
    font-size: 1.5rem;
  }

  .about-us p {
    max-width: 50rem;
  }

  .footer-block {
    grid-template-columns: 6fr 5fr 6fr 10fr;
  }

  .footer-block h3 {
    font-size: 1.25rem;
  }

}

@media (45.31rem < width < 54.63rem) {

  .hero-container h1 {
    font-size: 3rem;
  }

  .about-hero-container h1 {
    font-size: 2rem;
  }

}

@media (25rem < width < 35rem) {

  .hero-container {
    grid-template-columns: 1fr;
    height: 57rem;
    align-items: center;
    justify-content: center;
  }

  .about-hero-container {
    grid-template-columns: 1fr;
    height: 42rem;
    align-items: center;
  }

  .about-hero-container h1,
  .about-hero-container p {
    padding: 0;
    padding-top: 2rem;
  }

}

@media (35rem <=width < 54.63rem) {

  .hero-container {
    grid-template-columns: 1fr;
    height: 62rem;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #hero_content {
    justify-self: center;
    text-align: left;
  }

  .hero-container img {
    justify-self: center;
    margin-top: 0;
  }

  .about-hero-container {
    grid-template-columns: 1fr;
    height: 50rem;
    align-items: center;
  }

  .about-hero-container h1,
  .about-hero-container p {
    padding: 0;
    padding-top: 2rem;
  }

}

@media (width < 54.63rem) {

  .about-us {
    grid-template-columns: 1fr;
  }

  #about_us_image {
    width: 32rem;
  }

  .about-us h2 {
    font-size: 1.5rem;
  }

  .about-us p {
    max-width: 50rem;
  }

  #about_hero_img {
    justify-self: center;
  }

  .footer-block h3 {
    font-size: 1.25rem;
  }

  .order-details {
    grid-template-columns: 1fr;
  }

}

@media (width >=54.63rem) {

  .hero-container {
    grid-template-columns: 1fr 1fr;
  }

  .about-hero-container {
    grid-template-columns: 5fr 6fr;
    gap: 2rem;
  }

  .order-details {
    grid-template-columns: 3fr 2fr;
    gap: 5rem;
  }

}

@media (56.25rem < width < 57.38rem) {

  .all-product-list {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    row-gap: 1rem;
  }

  .contact_us {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  #contact_us_form_container {
    justify-self: center;
  }

  .total-price-container {
    margin-top: 14rem;
  }

  .shopping-cart-wrap {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .order-detail h3 {
    font-size: 1.25rem;
  }

  .subtotal-bar,
  .total-bar {
    grid-template-columns: 3fr 2fr;
  }

  .shipping-bar {
    grid-template-columns: 1fr 1fr;
  }

  .payments {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .payment-longer input {
    width: 120%;
    margin-right: 2rem;
  }

  .payment-shorter input {
    max-width: 15rem;
    margin-left: 6.5rem;
  }

  .payment-shorter label {
    padding-left: 6.5rem;
  }

  .product-detail {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  #citation h1 {
    font-size: 5rem;
  }

}

@media (width <=57.38rem) {

  .product-hero-container h1 {
    font-size: 2rem;
  }

  .product-hero-container h2 {
    font-size: 1.3rem;
  }

}

@media (width < 42.44rem) {

  .locations {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

}

@media (42.44rem < width < 60.88rem) {

  .locations {
    grid-template-columns: 1fr 1fr;
    row-gap: 1rem;
  }

}

@media (width >=60.88rem) {

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

}

@media (57.38rem < width < 62.06rem) {

  .all-product-list {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    row-gap: 2rem;
  }

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

  #contact_us_form_container {
    justify-self: center;
  }

  .total-price-container {
    margin-top: 16rem;
  }

  .shopping-cart-wrap {
    grid-template-columns: 1fr;
  }

  .order-detail h3 {
    font-size: 1.5rem;
  }

  .subtotal-bar,
  .total-bar {
    grid-template-columns: 3fr 2fr;
  }

  .shipping-bar {
    grid-template-columns: 1fr 1fr;
  }

  .payments {
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .payment-longer input {
    width: 90%;
    margin-right: 2rem;
  }

  .payment-shorter input {
    max-width: 16rem;
    margin-left: 0.1rem;
  }

  .payment-shorter label {
    padding-left: 0.1rem;
  }

  .product-detail {
    grid-template-columns: 3fr 3fr;
    gap: 1rem;
  }

  .product-hero-container h1 {
    font-size: 2.5rem;
  }

  .product-hero-container h2 {
    font-size: 1.5rem;
  }

  #citation h1 {
    font-size: 5rem;
  }
}

@media (54.63rem < width < 62.44rem) {

  .hero-container h1 {
    font-size: 3.5rem;
  }

  .hero-container {
    height: 42rem;
  }

  .hero-container h1,
  .hero-container p {
    padding-left: 0;
  }

  .hero-container .default-button-two {
    margin-left: 0;
  }

  .about-hero-container {
    height: 40rem;
  }

  .about-us {
    grid-template-columns: 5fr 5fr;
    gap: 2rem;
  }

  #about_us_image {
    width: 32rem;
  }

  .about-us h2 {
    font-size: 1.75rem;
  }

  .about-us p {
    max-width: 50rem;
  }

  .about-hero-container h1 {
    font-size: 2rem;
  }

}

@media (62.44rem < width < 67.13rem) {

  .hero-container h1 {
    font-size: 3.5rem;
  }

  .hero-container,
  .about-hero-container {
    height: 38rem;
  }

  .hero-container h1,
  .hero-container p {
    padding-left: 0;
  }

  .hero-container .default-button-two {
    margin-left: 0;
  }

  .about-us {
    grid-template-columns: 5fr 5fr;
    gap: 2rem;
  }

  #about_us_image {
    width: 32rem;
  }

  .about-us h2 {
    font-size: 1.75rem;
  }

  .about-us p {
    max-width: 50rem;
  }

  .about-hero-container h1 {
    font-size: 2.2rem;
  }

}

@media (67.13rem < width < 75.13rem) {

  .hero-container h1 {
    font-size: 3.5rem;
  }

  .hero-container,
  .about-hero-container {
    height: 39rem;
  }

  .hero-container h1,
  .hero-container p {
    padding-left: 0;
  }

  .hero-container .default-button-two {
    margin-left: 0;
  }

  .about-us {
    grid-template-columns: 5fr 6fr;
    gap: 2rem;
  }

  #about_us_image {
    width: 32rem;
  }

  .about-us p {
    max-width: 50rem;
  }

  .about-hero-container h1 {
    font-size: 2.5rem;
  }

}

@media (width > 66.31rem) {

  .product-listing {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 2.5rem;
  }

}

@media (width >=68.63rem) {

  .about-team-section {
    grid-template-columns: 4fr 5fr;
    gap: 4rem;
  }

}

@media (min-width: 75.13rem) {

  .hero-container h1 {
    font-size: 4rem;
  }

  .hero-container,
  .about-hero-container {
    height: 40rem;
  }

  .about-us {
    grid-template-columns: 5fr 6fr;
    gap: 2rem;
  }

  #about_us_image {
    width: 32rem;
  }

  .about-us p {
    max-width: 50rem;
  }

  .about-hero-container h1 {
    font-size: 3rem;
  }

}

@media (width=68.25rem) {
  .total-price-container {
    margin-top: 20rem;
  }
}

@media (62.06rem < width < 68.25rem) {

  .total-price-container {
    margin-top: 20rem;
  }

  .payments {
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .payment-longer input {
    width: 90%;
    margin-right: 2rem;
  }

  .payment-shorter input {
    max-width: 16rem;
    margin-left: 0.1rem;
  }

  .payment-shorter label {
    padding-left: 0.1rem;
  }

  .product-detail {
    grid-template-columns: 3fr 3fr;
    gap: 1rem;
  }

  .product-hero-container h1 {
    font-size: 3rem;
  }

  .product-hero-container h2 {
    font-size: 1.5rem;
  }

  .contact_us {
    grid-template-columns: 4fr 3fr;
    gap: 2rem;
  }


  #citation h1 {
    font-size: 5rem;
  }

}

@media (68.25.5rem < width < 86.56rem) {

  .product-detail {
    grid-template-columns: 4fr 3fr;
    gap: 1rem;
  }
}

@media (68.25rem < width < 78.44rem) {

  .all-product-list {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    row-gap: 2rem;
  }

  .contact_us {
    grid-template-columns: 4fr 3fr;
    gap: 2rem;
  }

  .total-price-container {
    margin-top: 26rem;
  }

  .shopping-cart-wrap {
    grid-template-columns: 1fr;
  }

  .order-detail h3 {
    font-size: 1.5rem;
  }

  .subtotal-bar,
  .total-bar {
    grid-template-columns: 3fr 2fr;
  }

  .shipping-bar {
    grid-template-columns: 1fr 1fr;
  }

  .payments {
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .payment-longer input {
    width: 105%;
    margin-right: 2rem;
  }

  .payment-shorter input {
    max-width: 14rem;
    margin-left: 3.25rem;
  }

  .payment-shorter label {
    padding-left: 3.25rem;
  }

  .product-hero-container h1 {
    font-size: 3.5rem;
  }

  .product-hero-container h2 {
    font-size: 1.5rem;
  }

  #citation h1 {
    font-size: 5rem;
  }

}

@media (width >=79.88rem) {

  .hero-container h1 {
    font-size: 5rem;
  }

  .hero-container,
  .about-hero-container {
    height: 43rem;
  }

  .about-us {
    grid-template-columns: 5fr 6fr;
    gap: 2rem;
  }

  #about_us_image {
    width: 32rem;
  }

  .about-us p {
    max-width: 50rem;
  }

  .about-hero-container h1 {
    font-size: 3.3rem;
  }

}

@media (width >=84.94rem) {

  .about-us {
    grid-template-columns: 5fr 6fr;
    gap: 2rem;
  }

  #about_us_image {
    width: 32rem;
  }

  .about-us p {
    max-width: 50rem;
  }

}

@media (78.44rem < width < 84.06rem) {

  .all-product-list {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    row-gap: 2rem;
  }

  .contact_us {
    grid-template-columns: 4fr 3fr;
    gap: 2rem;
  }


  .total-price-container {
    top: 8rem;
  }

  .shopping-cart-wrap {
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
  }

  .subtotal-bar,
  .total-bar {
    grid-template-columns: 3fr 2fr;
  }

  .shipping-bar {
    grid-template-columns: 1fr 1fr;
  }

  .payments {
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .payment-longer input {
    width: 110%;
    margin-right: 2rem;
  }

  .payment-shorter input {
    max-width: 14rem;
    margin-left: 4.5rem;
  }

  .payment-shorter label {
    padding-left: 4.5rem;
  }

  .product-hero-container h1 {
    font-size: 4rem;
  }

  .product-hero-container h2 {
    font-size: 2rem;
  }

  #citation h1 {
    font-size: 5rem;
  }

}

@media (width >=85rem) {

  .product-listing {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1.5rem;
  }

  .about-us {
    grid-template-columns: 5fr 6fr;
    gap: 2rem;
  }

  #about_us_image {
    width: 32rem;
  }

  .about-us p {
    max-width: 50rem;
  }

}

@media (84.06rem <=width < 86.56rem) {

  .all-product-list {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    row-gap: 2rem;
  }

  .contact_us {
    grid-template-columns: 4fr 3fr;
    gap: 2rem;
  }

  .shopping-cart-wrap {
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
  }

  .subtotal-bar,
  .total-bar {
    grid-template-columns: 3fr 3fr;
  }

  .shipping-bar {
    grid-template-columns: 1fr 1fr;
  }

  .payments {
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .payment-longer input {
    width: 116%;
    margin-right: 2rem;
  }

  .payment-shorter input {
    max-width: 14rem;
    margin-left: 5.75rem;
  }

  .payment-shorter label {
    padding-left: 5.75rem;
  }

  .product-hero-container h1 {
    font-size: 4.5rem;
  }

  .product-hero-container h2 {
    font-size: 2rem;
  }

  #citation h1 {
    font-size: 5rem;
  }

}

@media (width >=86.56rem) {

  .about-us {
    grid-template-columns: 5fr 7fr;
    gap: 2rem;
  }

  #about_us_image {
    width: 32rem;
  }

  .about-us p {
    max-width: 50rem;
  }

  .all-product-list {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    row-gap: 2rem;
  }

  .shopping-cart-wrap {
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
  }

  .subtotal-bar,
  .total-bar {
    grid-template-columns: 3fr 2fr;
  }

  .shipping-bar,
  .discount-bar {
    grid-template-columns: 1fr 1fr;
  }

  .payment_form_two_column {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .payments {
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
  }

  .contact_us {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .contact_us_form {
    width: 120%;
  }

  .product-detail {
    grid-template-columns: 4fr 3fr;
    gap: 1rem;
  }

  .product-hero-container h1 {
    font-size: 5rem;
  }

  .product-hero-container h2 {
    font-size: 2rem;
  }

  #citation h1 {
    font-size: 5rem;
  }

}

.product-description {
  grid-template-columns: 3fr 1fr;
}

.form_two_column {
  grid-template-columns: 1fr 1fr;
  max-width: 100%;
  gap: 2rem;
}

.product-detail {
  grid-template-columns: 4fr 3fr;
  gap: 1rem;
}

.order-details-columns {
  grid-template-columns: 1fr;
}

.order-detail-items {
  grid-template-columns: 4fr 2fr 1fr;
}

.order-detail-totals {
  grid-template-columns: 4fr 3fr;
}

.order-detail-tax {
  grid-template-columns: 4fr 3fr;
}

.description-section {
  grid-template-columns: 1fr 1fr;
}