.card{
    border:1px solid aliceblue;
    background-color: aliceblue;
    border-radius: 10px;
    width: 28%;
    height: 30%;
    margin-top:60px;
    margin-left: 30px;
}

.project{
   display: flex;
   flex-direction:row;
   opacity: 0.7;
}
.pro{
    margin-left:320px;
    display: flex;
    flex-direction: row;
    opacity: 0.7;
}
.head{
    margin-left: 50%;
}


@media(max-width:576px){
    .card{
    border:1px solid aliceblue;
    background-color: aliceblue;
    border-radius: 10px;
    width:50%;
    height:50%;
    margin-top:60px;
    margin-left: 30px;
    margin-left: 140px;
}
  .project{
   display: flex;
   flex-direction:column;
   opacity: 0.7;
   font-size:12px;
}
   .pro{
    display: flex;
    flex-direction:column;
    opacity: 0.7;
    font-size: 12px;
    margin-left: 15px;
}
.head{
    margin-left:45%;
    
}
}

@media(min-width:576px ) and (max-width:768px){
    .card{
    border:1px solid aliceblue;
    background-color: aliceblue;
    border-radius: 10px;
    width:70%;
    height:75%;
    margin-top:60px;
    margin-left: 25px;
}
  .project{
   display: flex;
   flex-direction:column;
   opacity: 0.7;
   font-size:12px;
}
   .pro{
    display: flex;
    flex-direction:column;
    opacity: 0.7;
    font-size: 12px;
    margin-left:12px;
}
.head{
    margin-left:45%;
}
}


@media(min-width:768px ) and (max-width:992px){
    .card{
    border:1px solid aliceblue;
    background-color: aliceblue;
    border-radius: 10px;
    width:75%;
    height:75%;
    margin-top:60px;
    margin-left: 25px;
}
  .project{
   display: flex;
   flex-direction:column;
   opacity: 0.7;
   font-size:18px;
}
   .pro{
    display: flex;
    flex-direction:column;
    opacity: 0.7;
    font-size: 16px;
    margin-left:18px;
}
.head{
    margin-left:45%;
}
}