* {
  box-sizing: border-box;
  margin: 0;
}
img {
  max-width: 100%;
  vertical-align: middle;
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.trucks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px;
}
.truck {
  width: 32%;
  border: 4px solid #000957;
  display: flex;
  border-radius: 12px;
  overflow: hidden;
}
.yellowbox {
  background-color: #FFEB00;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.greenbox {
  background-color: #577BC1;
  padding: 15px;
  color: white;
  flex-grow: 1;
}
.circle {
  background-color: #000957;
  color: white;
  font-size: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 100%;
}
.title {
  font-size: 25px;
  margin-bottom: 10px;
}
.title1 {
  display: none;
  margin-bottom: 0;
}
.text {
  font-size: 17px;
  line-height: 1.5;
}
@media screen and (max-width:1400px) {
  .trucks {
    gap: 20px;
  }
  .truck {
    width: calc((100% - 20px) / 2);
  }
}
@media screen and (max-width:1000px) {
  .yellowbox, .greenbox {
    width: 100%;
    text-align: center;
  }
  .truck {
    flex-wrap: wrap;
  }
  .title1 {
    display: block;
  }
  .title2 {
    display: none;
  }
  .trucks {
    padding: 12px;
    justify-content: center;
  }
  .text {
    font-size: 18px;
  }
  .circle {
    width: 75px;
    height: 75px;
    font-size: 31px;
  }
}
@media screen and (max-width:850px) {
  .truck {
    border-width: 3px;
    border-radius: 7px;
  }
  .yellowbox, .greenbox {
    padding: 10px;
  }
}
@media screen and (max-width:720px) {
  .trucks {
    gap: 15px;
  }
  .truck {
    width: 100%;
  }
  .yellowbox {
    flex-direction: row-reverse;
  }
  .circle {
    width: 65px;
    height: 65px;
    font-size: 27px;
  }
}