.hero {
    background-color: darkgrey;
    color: white;
    text-align: center;
}
.hero.hero-has-content{
    padding: 170px 20px;
}

.hero:not(.hero-has-content) {
    width: 100vw;
    height: 80vh;
}

.hero-subtitle {
    font-family: "Cormorant", serif;
    font-size: 60px;
    font-weight: 700;
    font-style: italic;
    margin: 0;
    line-height: 120%;
    text-transform: capitalize;
}

.hero-title {
    font-size: 56px;
    line-height: 120%;
    font-weight: 700;
    margin: 10px 0;
    text-transform: capitalize;
}

.hero-desc {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 150%;
    text-transform: uppercase;
}

.hero .hero-overlay,
.hero-has-content .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 2;
}

@media (max-width: 768px) {

    .whatsApp-icon {
        width: 40px;
        height: 40px;
    }

    .hero:not(.hero-has-content) {
    height: 60vh;
}

    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 32px;
    }

    .hero-desc {
        font-size: 16px;
    }
}