.hero-section-content h4{
font-family: 'Articulat-Regular';
font-size: 27px;
margin-bottom: 3rem;
}
.hero-section-content h3{
    font-size: 27px;
}
.hero-section-headline h1{
font-size:45px;
margin-top: 0;
}
.menu-container a, .menu-container button{
    z-index: 998; 
}

.hero-section-content {
width: 30%;
} 
.hero-section-headline img{
width: 100%;
}
.hero-section-headline{
    padding-right: 2rem;
    width: 70%;
}  

.container-hero-section{
    padding-top: 3rem;
}

@media screen  and (min-width:768px) and  (max-width:1000px){
    .hero-section-headline h1{
        font-size: 29px;
    }
    .hero-section-content h4{
        font-size: 20px;
    }
    .hero-section-content h3{
        font-size: 20px;
    }
    
}
@media screen and  (min-width:480px)  and (max-width:768px) {
    .hero-section-headline h1{
        font-size:30px;
    }
    .hero-section-headline h1 br{
        display: none;
    }
    .hero-section-content h3{
        font-size: 18px;
    }
    .hero-section-content h4{
        font-size: 18px;
    }
}
@media screen and (max-width:768px) {
    .container-hero-section{
        flex-direction: column;
    }
    .hero-section-content{
        width: 100%;
    }
    .hero-section-headline{
        width: 100%;
        padding: 0;
    }
}
@media screen and (min-width:320px) and (max-width:480px){
    .hero-section-headline h1{
        font-size: 21px;
        text-align: center;
    }
    
    .hero-section-headline h1 br{
        display: none;
    }

    .hero-section-content{
        margin-top: 2rem;
        text-align: center;
    }
    .hero-section-content h4{
        font-size: 22px;
    }
    .hero-section-content h3{
        font-size: 22px;
        
    }
}