@media screen and (max-width:760px) {
   body,html{
      height: min-content;
   }

   .menu{
      display: none;
      flex-direction: column;
      z-index: 9999;
   }
   .topBar{
      min-height: 40px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
      top: 0;
      position: sticky;
      z-index: 9999;
      background-color: white;
   }

   .topBarContainer{
      justify-content: space-between;
      padding: 0 0.5em;
   }

   .topBarContainer .logo{
      display: flex;
   }

   .ham{
      display: flex;
      justify-content: right;
   }

   .landing{
      flex-direction: column;
   }

   .landing-mobile img{
      height:200px;
   }

   .features .boxes{
      flex-direction: column;
   }

   .few-words p{
      text-align: left;
      padding: 0.5em;
      line-height: 1.4em;
   }

   .steps{
      flex-direction: column;
   }

   .telephone{
      flex-direction: column !important;
      align-items: start !important;
   }
   .telephone button{
      margin-top:1em;
      width:300px;
   }

   .contact p{
      padding: 1em;
   }

   .footer p{
      text-align: center;
   }

   /* how it works */
   .widget-container{
      grid-template-columns: repeat(1, 1fr) !important;
   }
}