@media only screen   
and (min-device-width : 320px)   
and (max-device-width : 640px)  
{ 
    


.hero-section{
    background-image: url('/img/bg-patterns-4.jpg');
    background-size: cover;
    background-position: center;
}
.hero-img{
    margin-top: 5rem;
    margin-bottom: 1rem;
    border-radius: 15px;    
}
.hero-content{
    margin-top: 2rem;
}
}


.card-div{
    width: 20rem;
}










@media only screen   
and (min-width: 1030px)   
and (max-width: 1605px)  
{ 
    


.hero-section{
    background-image: url('/img/bg-patterns-4.jpg');
    background-size: cover;
    background-position: center;
}
.hero-img{
    margin-top: 5rem;
    margin-bottom: 1rem;
    border-radius: 15px;    
}
.hero-content{
    margin-top: 2rem;
    margin-left: 2rem;
}
}