@media only screen and (max-width: 800px) {
  nav {
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    background-color: white;
    height: 0;
    transition: all 0.5s ease-in-out;
  }
  header ul {
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
    font-size: 2em;
    padding-left: 20px;
  }
  .lines {
    display: flex;
    z-index: 5;
  }
  .line {
    border: 1.5px solid black;
  }
  .lines .line {
    transition: all 0.5s linear;
  }
  .change-nav{
    height: 100vh;
  }
  .change-line1 {
    transform: rotate(45deg) translate(2.5px, 2.5px);
  }
  .change-line2 {
    opacity: 0;
  }
  .change-line3 {
    transform: rotate(-45deg) translate(10.5px, -10px);
  }
  .breadcrumbs {
    flex-direction: column;
    align-items: start;
    margin-top: 15px;
  }
  .cols-3,
  .cols-2 {
    flex-direction: column;
  }
  .cols-3 .form-floating,
  .cols-2 .form-floating {
    width: 100%;
    margin-bottom: 10px;
  }
  .outline-button {
    width: 100%;
    margin-bottom: 10px;
  }
  h3 .image {
    width: 11%;
  }
  .breadcrumbs > div {
    margin-bottom: 5px;
  }
  #home h1 {
    font-size: 27px;
  }
  .inner-services,
  .inner-contact {
    flex-direction: column;
  }
  .service {
    width: unset;
  }
}