/* Hero 1 */

@media (min-width: 576px) {
  #hero-1 h1 {
    font-size: 72px;
  }
}

@media (max-width: 575px) {
  #hero-1 h1 {
    font-size: 35.4px;
  }
}

#hero-1 img {
  width: 70%;
  margin-top: 100px;
  animation: spinning;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  z-index: -1;
  object-fit: contain;
  object-position: center;
  min-height: 500px;
}

#hero-1 .col:last-child {
  background: #4f7234;
  border-bottom-left-radius: 30%;
  padding-top: 60px;
  padding-left: 100px;
  padding-bottom: 50px;
}

/* Animation */

@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Hero 2 */

#hero-2 {
  padding-bottom: 60px;
}

#hero-2 .card {
  background: #4f7234;
  border-radius: 16px;
  border-style: none;
}

#hero-2 .card img {
  width: 300px;
  filter: drop-shadow(-2px 4px 2px rgba(0,0,0,0.3));
}