@media (min-width: 600px)  and (max-width: 1080px) {
        #navbar {
         padding: 10px 10px !important; 
        }
        #navbar a {
        float: none;
        display: block;
        text-align: left;
        }
        #navbar-right {
        float: none;
        }
        .bodycon{
        margin-top: -3000px;
        }
        .card{
        width: 18rem !important;
        margin-left: auto;
        margin-right: auto;
        overflow: auto;
        }
        .card-img-top{
        width: 18rem !important;
        }
 }


/* mobile and medium screen  view */
@media (min-width: 300px) and (max-width:  580px){
        #mobile-image{
        width: 50%;
        height: 500px;
        }

        .card{
        width: 18rem !important;
        display: block;
        /* margin-left: auto;
        margin-right: auto; */
        overflow: auto;
        }
        .card-img-top{
        width: 18em !important;
        }
        #line2{
        margin-top: -60px;
        }

}

 /* small screen view */
@media (min-width: 50px) and (max-width:  299px){
      #mobile-image{
      width: 50%;
      height: 500px;
      }
      .card{
      width: 18rem !important;
      overflow: auto;
      }
      .card-img-top{
      width: 18rem;
      }
      .jsimg{
      width: 400px;
      }
      .footImg{
      display: none;
      }

}