.hero {
    width: 100%;
    height: calc(100vh - 74px);
    object-fit: contain;
}

.hero-inside {
    /* background-color: rgba(255, 255, 0, 0.8); */
    position: absolute;
    width: 100%;
    height: 36%;
    bottom: calc(50vh - 18%);

    /* flexbox for centering */
    display: flex;
    flex-direction: column;   /* stack items vertically */
    align-items: center;      /* center horizontally */
    justify-content: center;  /* center vertically */
}

.logo {
    width: 20%;
    margin: 10px 0; /* spacing so they don’t overlap */
    position: static; /* remove absolute positioning */
}

h1 {
    margin: 0;
    max-width: 400px;
    text-align: center;
    font-weight: 700;
}

h2 {
    margin: 20;
    max-width: 650px;
    text-align: center;
    font-weight: 400;
}

.play-now-button {
    margin-top: 15px;
    font-size: large;
    font-weight: bold;
    color: white;
    background-color: red;
    padding: 15px 30px;
    border-radius: 100px;
    transition: 0.25s;
    text-decoration: none;
    border: 2px solid red;

    display: inline-flex;
    align-items: center;
    gap: 8px; /* spacing between icon and text */

    outline: none;
    border-color: red;
    box-shadow: 0 0 10px red;
}

.play-now-button:hover {
    background-color: white;
    color: red;
    cursor: pointer;

    scale: 1.05;
}

.play-now-button:active {
    scale: 0.95;
}

.play-icon {
    height: 25px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1); /* force white */
}

.play-now-button:hover .play-icon {
    filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(7496%) hue-rotate(358deg) brightness(95%) contrast(112%);
}