.header-bar {
    flex-direction: column;
    width: 100%;
}
.site-header {
    height: auto;
}

nav ul {
    flex-direction: column;
    gap: 0.5rem;
}

.header-content {
    margin-top: 60%;
}
.items {
    display: flex;
    flex-direction: column;
    width: auto;
}
.info-gar {
    margin-bottom: 5%;
}
body {
background-size: 250%;
}
#mainlogo img{
width: 60%;
height: 70%;
}
.main-content {
    flex-direction: column;
  }
  .text-container,
  .image-container {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .info-right {
    float: none; 
    width: 100%;
    text-align: center;
  }

  .info-right img {
    width: 80%; 
  }
  .timeline::after {
    left: 31px;
    }
    
    /* Full-width containers */
    .containers {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
    }
    
    /* Make sure that all arrows are pointing leftwards */
    .containers::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
    }
  
    /* Make sure all circles are at the same spot */
    .left::after, .right::after {
    left: 15px;
    }
    
    /* Make all right containers behave like the left ones */
    .right {
    left: 0%;
    }
    .footer-container {
        flex-direction: column;
        text-align: center;
      }
      
      .footer-logo {
        margin-bottom: 20px;
      }
      
      .footer-contact,
      .footer-address,
      .footer-privacy {
        margin-bottom: 10px;
      }