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

      .content {
          padding: 10px 0 !important;
          margin: 0 !important;
      }

      .img-container {
          height: 380px;
          width: 100%;
          padding: 40px 0;
      }

      .container {
          padding-left: 10px;
          padding-right: 10px;
          min-width: 100%;
      }

      .tool-card {
          margin: 20px !important;
      }

      .img-container img {
          width: 65%;
      }

      #faqAccordion,
      .faq-title,
      h2 {
          width: 100%;
      }

      .mobile-column-reverse {
          flex-direction: column-reverse;
      }

      .nav-item .btn-primary,
      .tool-card .btn-primary {
          width: 100%;
          margin: 35px 0;
          text-align: center;
      }

      #navbarNav ul {
          margin: 20px;
      }

      #navbarNav ul li {
          margin: 10px 0;
      }

      .mobile-only{
            display: inline-block;
      }
  }

  @media (min-width: 576px) and (max-width: 767px) {

      .container {
          padding: 10px 15px !important;
          margin: 0 !important;
          min-width: 100% !important;
      }

      .hero {
          height: auto;
          padding: 40px 0;
      }

      .mobile-column-reverse {
          flex-direction: column-reverse;
      }

      .content .btn-primary {
          width: 100%;
          margin: 35px 0;
          text-align: center;
      }
  }

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

      .container {
          padding-left: 10px;
          padding-right: 10px;
          min-width: 100% !important;
      }

      .img-fluid {
          display: none;
      }

      .col-md-6,
      .hero .col-12 {
          width: 100%;
      }

      .grid-card {
          grid-template-columns: repeat(2, 1fr);
      }

      .carte-body {
          min-height: auto;
      }

      #faqAccordion,
      .faq-title,
      h2 {
          width: 100%;
      }

      .img-container {
          padding: 20px 10px;
      }

      .img-container img {
          width: 50%;
      }

      .tool-card {
          margin: 20px 10px !important;
      }

      .row {
          flex-direction: column;
      }

      .mobile-column-reverse {
          flex-direction: column-reverse;
      }

  }

  @media (min-width: 992px) and (max-width: 1299px) {
      .container {
          padding-left: 10px;
          padding-right: 10px;
          min-width: 95% !important;
      }
  }