/*----------------------------------------------------------------
Hero
-------------------------------------------------------------------*/
#hero {
    position: relative;
    display: block;
    align-items: center;
    min-height: 100%;
}
#hero .top img{
    height: 320px;
    width: 100%;
    object-fit: cover;
}
#hero .bottom{
    background: var(--light-grey);
    color: var(--primary-color);
    padding: 50px 0;
}
#hero p, #hero h1{
     color: var(--primary-color) !important;
}
#hero .bottom p:nth-child(2) {
    font-size: 21px;
    font-weight: 300;
    line-height: 31px;
    margin: 0.7em 0;
}
#hero .text{
    color: #404040;
}
@media(max-width: 556px){
    #hero .top img{
        height: 200px;
    }
}

/*----------------------------------------------------------------
Category Top
-------------------------------------------------------------------*/
#categoryTop h2{
    font-size: 30px;
}
#categoryTop p{
    font-size: 21px;
    line-height: 31px;
}