/*mobile*/
@media (min-width: 250px) and (max-width: 554px) {
  nav ul {
    text-align: center;
  }
  #home .container {
    display: block;
    text-align: center;
  }
  #home .hero-image img {
    height: 200px;
    margin-top: 10%;
    margin-left: 2%;
  }
  #about .container{
    text-align: center;
  }
  #projects .container h2{
    text-align: center;
  }

  #projects .container .cards {
   align-items: center;
   gap: 20px;
   display: flex;
   flex-direction: column;
   margin-left: 11%;
 }

 #projects .container .cards .card {
    width: 18rem;
 }

 #projects .container .cards .card img {
    width: 15.5rem;
    height: 10rem;
 }

 #projects .container .cards .card .card-body {
    width: 21rem;
    margin-left: -43px;
    height: 15rem;
 }
 #contact .container{
  text-align: center;
 }
 #contact p{
  font-size: 13px;
 }
 #contact .row img {
    width: 1.5rem;
 }
 #contact .row span {
    font-size: 15px;
}
 footer p{
  font-size: 10px;
  margin-bottom: 0px;
 }
}