/* All rights reserved to the code developer Yehuda Betito */

@media screen and (max-width: 767px) {

  header.nav { padding: 0; }

  header.nav .menu { display: none; }

  header.nav .row ul {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    padding-top: 20px;
    border-top: 1px solid #cacaca2e;
  }

  .page section header h2 { font-size: 40px; }

  header.nav .row ul li {
    width: 100%;
    height: auto;
    flex: 1;
    padding: 0;
    border: none!important;
  }

  .services-list { display: none!important; }
  .mobile-services-list { display: block; }

  .mobile-services-list {
    list-style-type: none;
    padding: 0;
    text-align: center;
    margin-top: 10px;
  }

  .mobile-services-list li {
    display: inline-block;
    color: #cecfd0;
    font-size: 15px;
    margin: 0 3px;
  }

  .mobile-services-list li.active {
    color: #00b5ff;
  }

  .mobile-menu-btn {
    display: inline-block;
    float: left;
    margin-top: 22px;
    font-size: 20px;
    width: 33%;
    color: #742a82;
  }

  .dropdown-menu.columns-4 {
    min-width: 0;
    left: 0;
    overflow-y: scroll;
    height: 200px;
  }

  header.nav .row { margin: 0; }

  header.nav .row .logo {
    display: inline-block;
    padding-top: 5px;
    width: 33%;
  }

  .mobile-search-btn {
    display: inline-block;
    margin-top: 20px;
    font-size: 20px;
    float: right;
    color: #742a82;
  }

  header.nav .row .logo img { max-width: 100px; }

  /* .top-img {
    background-size: 220% auto;
    background-position: 60% bottom;
    background-color: #f5f5f5;
  } */

  .top-img {
    background: url('../images/mobile-top-img.png') no-repeat;
    background-size: contain;
    background-position: bottom center;
    background-color: #f5f5f5;
  }

  .top-img .scroll-down { bottom: 5vh; }

  .page .services .content .service-container .right-side .box {
    position: static;
    width: 100%;
    padding: 20px;
    height: auto;
  }

  .page .services .content .service-container .right-side .box header svg:first-child,
  .page .services .content .service-container .right-side .box header svg { margin: 0; }

  .page .services .content .service-container .right-side .box .read-more { position: static; }

  .page .services .content ul.services-list {
    display: block;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }

  footer .top-footer .column-container {
    display: block;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }

  .page .services .content .service-container { margin: 20px auto; }

}