/* Hero */
.hero-container {
    background-color: #191d88;
    background-size: cover;
    background-position: center;
    color: #ffc436;
    padding: 5rem;
    min-height: 50vw;
    text-align: center;
  }
  .hero {
    text-align: center;
    display: flex;
    flex-direction: row;
  }
  .hero-content {
    flex-grow: 6;
  }
  .hero-image {
    padding: 0 1rem;
    flex-grow: 4;
  }
  .hero-image img {
    height: 300px;
    max-width: 450px;
  }
  .hero-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .hero-role {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    background-color: #ffc436;
    color: #191d88;
    border-right: 0.15rem solid white;
    transition: background-color 0.3s;
    animation: mengetik 2s steps(40) infinite;
  }
  
  @keyframes mengetik {
    from,
    to {
      width: 0;
    }
    50% {
      border-color: #191d88;
    }
  }
  
  .hire-button {
    padding: 1rem;
    font-size: 2rem;
    font-weight: 800;
    background-color: #ff9900;
    color: #191d88;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    cursor: pointer;
  }
  
  .hire-button:hover {
    background-color: #e68100;
  }