body {
  background-image: url(/assets/bg-pattern-brown-light-4d8baa0b630cf51c4e453d0e7df7d56f28c357020840a3c2d6639ce4e089e1be.svg);
}

#hero {
  background-image: url(/assets/course-detail/bg-hero-593cc99bb9413dc6db53121876ffa8309004f80eb85cb531534555f92593f3a9.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#hero .hero-img {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  max-height: 400px;
  justify-content: center;
  align-items: center;
  position: relative;
}
#hero .hero-img img {
  width: 100%;
}
#hero .hero-img .flying-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
}

#hero .hero-potrait {
  width: 70%;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  max-height: 400px;
  justify-content: center;
  align-items: center;
  position: relative;
  float: right;
}
#hero .hero-potrait img {
  width: 100%;
}
#hero .hero-potrait .flying-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
}