/* Mobile responsive navigation */
  @media (max-width: 575px) {
    
      .hero h1 {
          width: 100%;
          font-size: 55px;
          line-height: 50px;
      }

      .content-tools,
      .btn-lg,
      .image-container img,
      .grid-avantage,
      .hero p {
          width: 100%;
      }

      h2 {
          font-size: 2.5rem;
          line-height: 36px;
          margin-bottom: 20px;
      }

      .hero-image div img:not(:first-child) {
          display: none;
          height: unset !important;
          width: 100% !important;
      }

      #about .container .row div div {
          margin: 10px !important;
      }

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

      .container {
          max-width: 100% !important;
      }

      .hero-image {
          display: flex;
          justify-content: center;
          margin: 20px 0;
      }
  }

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

      .container {
          max-width: 100% !important;
      }

      .hero h1 {
          width: 100%;
          font-size: 55px;
          line-height: 50px;
      }

      .content-tools,
      .btn-lg,
      .image-container img,
      .grid-avantage,
      .hero p {
          width: 100%;
      }

      .hero-image div {
          display: flex;
          justify-content: center;
      }

      .hero-image div img {
          width: 33%;
      }

      #about .container .row div div {
          margin: 10px;
      }
  }

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


      .container {
          max-width: 100% !important;
      }

      .hero h1 {
          width: 100%;
          font-size: 55px;
          line-height: 50px;
      }

      .content-tools,
      .btn-lg,
      .image-container img,
      .grid-avantage,
      .hero p {
          width: 100%;
      }

      #about .container .row div {
          width: 100%;
          margin: 0px;
      }

      #about .container .row {
          flex-direction: column;
      }

      .hero-image div {
          display: flex;
          justify-content: center;
      }

      .hero-image {
          justify-content: center;
      }

      .hero-image div img {
          width: calc(100% / 3)
      }

      #about .container .row div div {
          margin: 10px 0;
      }
  }

  @media (min-width: 992px) and (max-width: 1200px) {
      .container {
          max-width: 85% !important;
      }

      .hero h1 {
          width: 100%;
          font-size: 55px;
          line-height: 50px;
      }

      .content-tools,
      .btn-lg,
      .image-container img,
      .grid-avantage,
      .hero p {
          width: 100%;
      }

      #about .container .row div {
          width: 100%;
          margin: 0px;
      }

      #about .container .row {
          flex-direction: column;
      }

      .hero-image div {
          display: flex;
          justify-content: center;
      }

      .hero-image {
          justify-content: center;
      }

      .hero-image div img {
          width: calc(100% / 3)
      }

      #about .container .row div div {
          margin: 10px 0;
      }
  }

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

      .h-100 .card-body {
          margin: 0 !important;
          padding: 0 !important;
      }

      .h-100 {
          height: 200px !important;
      }
  }