@media screen and (max-width: 198px) {
  /*smaller then Iphone 5 */

  #PortfolioDetailsSectionContent .container .row .col-lg-8 .single-item {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
  }

  #PortfolioDetailsSectionContent .container .row .col-lg-4 .card {
    max-width: 90%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }

  #PortfolioDetailsSectionContent .container .row .col-lg-4 .sectionBody {
    max-width: 88%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .navbar .navbar-nav .nav-item .active {
    color: #0078ff;
  }

  .navbar .navbar-nav .nav-item .active::after {
    width: 0;
    height: 0;

  }

  .nav-item::after {
    width: 0;
    height: 0;
  }
}

@media(min-width: 199px) and (max-width: 352px) {

  /* Iphone 5 */
  #PortfolioDetailsSectionContent .container .row .col-lg-8 .single-item {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
  }

  #PortfolioDetailsSectionContent .container .row .col-lg-4 .card {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 7px;
    margin-bottom: 30px;
  }

  #PortfolioDetailsSectionContent .container .row .col-lg-4 .sectionBody {
    max-width: 88%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .navbar .navbar-nav .nav-item .active {
    color: #0078ff;
  }

  .navbar .navbar-nav .nav-item .active::after {
    width: 0;
    height: 0;

  }

  .nav-item::after {
    width: 0;
    height: 0;
  }

}

@media(min-width: 353px) and (max-width: 391px) {

  /*Galaxy s10  &&  iPhone 12 */
  #PortfolioDetailsSectionContent .container .row .col-lg-8 .single-item {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
  }

  #PortfolioDetailsSectionContent .container .row .col-lg-4 .card {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }

  #PortfolioDetailsSectionContent .container .row .col-lg-4 .sectionBody {
    max-width: 88%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .navbar .navbar-nav .nav-item .active {
    color: #0078ff;
  }

  .navbar .navbar-nav .nav-item .active::after {
    width: 0;
    height: 0;

  }

  .nav-item::after {
    width: 0;
    height: 0;
  }
}

@media (min-width: 395px) and (max-width: 575px) {
  /*iphone 11 */

  #PortfolioDetailsSectionContent .container .row .col-lg-8 .single-item {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
  }

  #PortfolioDetailsSectionContent .container .row .col-lg-4 .card {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }

  #PortfolioDetailsSectionContent .container .row .col-lg-4 .sectionBody {
    max-width: 88%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .navbar .navbar-nav .nav-item .active {
    color: #0078ff;
  }

  .navbar .navbar-nav .nav-item .active::after {
    width: 0;
    height: 0;

  }

  .nav-item::after {
    width: 0;
    height: 0;
  }
}

@media (min-width: 576px) and (max-width:769px) {

  /*Redmi mote 9 pro */
  .navbar .navbar-nav .nav-item .active {
    color: #0078ff;
  }

  .navbar .navbar-nav .nav-item .active::after {
    width: 0;
    height: 0;

  }

  .nav-item::after {
    width: 0;
    height: 0;
  }

}

@media (min-width: 770px) and (max-width:992px) {
  /*Galaxy tap S7 */

  .navbar .navbar-nav .nav-item .active {
    color: #0078ff;
  }

  .navbar .navbar-nav .nav-item .active::after {
    width: 0;
    height: 0;

  }

  .nav-item::after {
    width: 0;
    height: 0;
  }


}

@media (min-width: 993px) and (max-width:1199px) {
  /*Ipad air */

  #PortfolioDetailsSectionContent .container .row .col-lg-4 .card {
    padding: 25px;


  }

}

@media (min-width: 1200px) and (max-width:1399px) {}

@media (min-width: 1400px) and (max-width:1500px) {}