*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Media query for tablets and wider screens */
@media only screen and (max-width: 768px) {
  /* Hide the second column on devices smaller than tablets */
  .column:nth-child(1) {
    width: 100%;
  }
  
  .column:nth-child(2) {
    display: none;
  }
}
.container {
  display: flex;
  align-items: center;
  text-align: center;
  height: 100vh;
}
.logo {
  width: 50%;
}
.text {
  font-family: 'Inter', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
  'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue';
}
.background{
  background: url('./images/background.svg') no-repeat;
  background-size: contain;
  background-position: bottom;
  background-color: rgba(230,247,255,0.7);
  background-blend-mode: overlay;
  height: 100vh;
  overflow: hidden;
}
.wrap{
  position: absolute;
  height: 180px;
  bottom: 0px;
  left: 0;
  width: 100%;
}
.image{
  width: 150px;
  position: absolute;
}
.truck-img{
  bottom: 0;
  left: 45%;
  z-index: 999;
  animation: truck 10s linear infinite;
}
@keyframes truck{
  40%, 70%{
    left: 80%;
  }
  100%{
    left: 80%;
  }
}
.box-img{
  width: 50px;
  z-index: 1;
  top: 50%;
  left: 80%;
  opacity: 0;
  animation: box 10s linear infinite;
}
.box-img2{
  animation-delay: 1s;
}
@keyframes box{
  0%, 40%{
    opacity: 0;
    left: 80%;
  }
  50%{
    opacity: 1;
    left: 75%;
  }
  60%, 100%{
    opacity: 0;
    left: 75%;
  }
}