.nav > li > a:hover{
    color: red!important;
}
.wrapper{
display: flex;
flex-direction: column;
min-height: 100vh;
}
main{
flex:1;
}
.main-nav{
    background-color: #F5F5F5;
}
.menu button{
    position: absolute;
    top:80px;
    left: 100px;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-size: 5rem;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    background: transparent;  
}
.card img{
    height: 250px!important;
    object-fit:contain;
}
.product_div:hover img{
  opacity: 0.5;
  background-color:#2a2a2a;
}
.product_div{
    position: relative;
    overflow: hidden;
}
.overlay{
    position: absolute;
    top: 5%;
    right: -100%;
}
.overlay .far{
    font-size:1.2rem;
}
.product_div:hover .overlay{
    right: 5%;
    transition: 0.3s;
}
@media only screen and (max-width:576px){
.email, .contact_number{
font-weight: 400;
font-size: 8px;
}
header .fab{
font-size: 0.4rem;
}
}

@media only screen and (max-width:400px){
#logo_image{
max-width: 80px;
max-height: 80px;
object-fit: cover;
}  
.section{
min-height: 200px;
}
}

@media only screen and (max-width:280px){
.email, .contact_number{
font-weight: 400;
font-size: 6px;
}
header .fab{
font-size: 0.4rem;
}
h1{
font-size: 1.8rem;
}
}