@media only screen and (max-width: 500px) {

/* ----- Jumbotron ------ */
.banner{
  width: 100%;
  height: 400px;
  background: url("../../image/banner-service.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.banner-align {
  width: 80%;
  text-align: end;
  margin: auto;
}

.banner-head {
  font-size: 2.6em;
  color:#001f63;
  text-shadow: 2px 2px 6px white;
  
}

.banner-tagline {
  font-size: 1em;
  color:#001f63;
  font-weight: bold;
  text-shadow: 2px 2px 6px white;

}

/* ----- Brief Service ----- */
.container-brief {
  width: 100%;
  background-color: f1f1f1;
  padding-bottom: 3em;

  display: flex;
  flex-direction: column;
}

.brief-head {
  width: 80%;
  text-align: left;
  /* border: 1px solid grey; */
  margin: auto;
  padding: 50 0 50 0;
}

.brief-iconset {
  width: 80%;
  margin: auto;

  display: flex;
  flex-direction: column;
  align-items: center;

}

.brief-icon {
  width: 8em;
  height: auto;
  text-align: center;
  margin-bottom: 2em;
  display: flex;
  flex-direction: column;
}

.brief-icon img{
  width: 100%;
  object-fit: cover;
  margin-bottom: 1em;
}

/* ----- Production Timeline ----- */
.container-timeline {
  color: white;
  padding-bottom: 2em;
}

.timeline-head {
  width: 80%;
  text-align: left;
  /* border: 1px solid grey; */
  margin: auto;
  padding: 30 0 30 0;
}

.timeline-pic {
  width: 100%;
  margin: auto;  
}

.timeline-pic img{
  width: 100%;
  object-fit: cover;
}



}