.raw{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.raw .card{
    width: 250px;
    height: 240px;
    position: relative;
    margin: 30px;
    cursor: pointer;
}
.raw .card .imgbox{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.raw .card .imgbox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.2s ease-in-out;
}
.raw .card::before{
    content: '';
    position: absolute;
    width: 30%;
    height: 30%;
    background: none;
    top: 0;
    left: 0;
    transform: translate(-15px, -15px);
    border-top: 2px solid #2666B0;
    border-left: 2px solid #2666B0;
    z-index: -1;
    transition: all 0.2s ease-in-out;
    
}
.raw .card::after{
    content: '';
    position: absolute;
    width: 30%;
    height: 30%;
    background: none;
    bottom: 0;
    right: 0;
    transform: translate(15px, 15px);
    border-bottom: 2px solid #2666B0;
    border-right: 2px solid #2666B0;
    z-index: -1;
    transition: all 0.2s ease-in-out;

}
.raw .card:hover:before, .row .card:hover:after{
    width: calc(100% + 30px);
    height: calc(100% + 30px);
}
.raw .card:hover .imgbox img{
    transform: scale(1.1);
}
.product1{
    margin-top: 30px;
     margin-bottom: 30px;
 }
.productimg img{
    width: 100%;
  
}
.productimg h3{
    text-align: center; 
    font-size: 20px;
    margin-top: 20px;
}
.productimg {margin-top: 30px;}
.productimg h5{
    color: black; 
    text-align: center;
    margin-top: 30px;}

 @media only screen and (min-width: 320px) and (max-width: 479px){
     .productimg img{width: 100%;margin-top: 30px;} 

}