.hero-section{
    display: flex;
    flex-direction: column;
    background-image: url('../../media/images/backgroundhero.webp');
    background-position: center;
    background-size:cover;
    width: 100%;
    height: 100vh;
    padding-top: 92px;
    justify-content: center;
    align-items: center;
}

.hero-content-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(255,255,255,0.95);
    border-radius: 32px;
    padding: 64px;
    max-width: 1072px;
    text-align: center;
    gap: 48px;
}

.hero-title{
    font-size: 48px;
    font-weight: bold;
}

.hero-text{
    font-size: 24px;
    max-width: 800px;
}

.hero-button-area{
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.hero-button{
    font-size: 24px;
    border: unset;
    padding:16px 64px;
    text-decoration: none;
    color: var(--background-color);
}
.hero-button-about{
    background-color: var(--primary-color);

}
.hero-button-about:hover{
    background-color: var(--secondary-color);
   
    
}
.hero-button-products{
    background-color: var(--primary-color);
}

.hero-button-products:hover{
    background-color: var(--secondary-color);
}

@media only screen and (max-width : 425px ) {

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

    

    .hero-text{
        font-size: 20px;
    }
    
    .hero-button{
        font-size: 20px;
        padding: 8px;
    }
    }


    @media only screen and (max-width : 768px ) {

        .hero-title{
            font-size: 32px;
        }
        .hero-content-box{
            padding: 0;
            padding-left: 16px;
            padding-right: 16px;
    
            padding-top: 32px;
            padding-bottom: 32px;
    
            gap: 48px;
            margin-right: 8px;
            margin-left: 8px;
            margin-top: -128px;
        }
        
        }
    
        @media only screen and (max-width : 350px ) {

            .hero-content-box{
                padding-right: 4px;
                padding-left: 4px;
            }
            
            }