/* Mobile responsive navigation */
  @media (max-width: 575px) {

    .card-body>p,
    .h-content,
    .container {
      max-width: 100%;
      width: 98%;
    }

    .content,
    .hero-img-container {
      width: 100%;
      height: auto;
    }

    .price-body {
      margin: 10px 0;
    }

    #top3 {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
    }

    footer {
      margin-top: 20px;
    }

    h1 {
      font-size: 50px;
      line-height: 50px !important;
    }

    .card-deck>* {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }

    .navbar-brand-mobile {
      display: block;
      font-size: 30px;
      color: var(--text-color);
      text-decoration: none;
      font-weight: bolder;
      margin-top: 20px;
    }

    .navbar-brand-desktop {
      display: none;
    }
  }

  @media (min-width: 576px) and (max-width: 767px) {
    .row>* {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }

    #top3 {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
    }

    footer {
      margin-top: 20px;
    }

    .card-body>p,
    .h-content,
    .container {
      max-width: 100%;
      width: 98%;
    }

    .content,
    .hero-img-container {
      width: 100%;
      height: auto;
    }

    .price-body {
      margin: 10px 0;
    }

    .navbar-brand-mobile {
      display: block;
      font-size: 30px;
      color: var(--text-color);
      text-decoration: none;
      font-weight: bolder;
      margin-top: 20px;
    }

    .navbar-brand-desktop {
      display: none;
    }

  }

  @media (min-width: 768px) and (max-width: 991px) {


    .navbar-brand-mobile {
      display: block;
      font-size: 30px;
      color: var(--text-color);
      text-decoration: none;
      font-weight: bolder;
      margin-top: 20px;
    }

    .navbar-brand-desktop {
      display: none;
    }


    #top3 {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
    }

    footer {
      margin-top: 20px;
    }

    .card-body>p,
    .h-content,
    .container {
      max-width: 100%;
      width: 98%;
    }

    .content,
    .hero-img-container {
      width: 100%;
      height: auto;
    }

    .price-body {
      margin: 10px 0;
    }

    .card-body .row .row {
      flex-direction: column;
    }

    .card-body .row .row .col-12 {
      width: 100%;
      height: auto;
    }

    .card-body .row .row .col-12 .price-body {
      height: auto;
    }

    .card-body .row .row .col-12 .price-body div {
      margin-top: 30px;
    }

    .card-body {
      margin: 10px 0;
    }
  }


  @media (min-width: 992px) and (max-width: 1200px) {}

  @media (min-width: 1201px) and (max-width: 1920px) {}