header {
   background-color: transparent;
}
header .menuIcon .line {
    background-color: var(--gray);
}

.h1h4 {
    background-color: var(--black);
    background-image: url(../assets/hero.jpg);
    background-blend-mode: overlay;
    background-position: center;
    background-size: cover;
}
.h1h4 h4 {
    color: var(--yellow);
}
.h1h4 h1 {
    color: var(--gray);
}


.content {
    background-color: var(--gray);
    display: flex;
    flex-direction: column;
    row-gap: 25px;
}
.content h4 {
    padding-bottom: 12.5px;
}


@media screen and (max-width: 768px) {
    header {
        padding-bottom: 25px;
    }

    .h1h4 {
        padding: 100px 25px 25px 25px;
    }
    .content {
        padding: 25px 25px 50px 25px;
    }
}
@media screen and (min-width: 768px) {
    header {
        padding-bottom: 50px;
    }

    .h1h4 {
        padding: 150px 100px 50px 100px;
    }
    .content {
        padding: 50px 100px;
    }

}

@media screen and (min-width: 1728px) {
    .h1h4 {
        padding: 150px calc((100% - 1728px) / 2) 50px calc((100% - 1728px) / 2);
    }

    .content {
        padding: 50px calc((100% - 1728px) / 2);
    }

}