@media only screen and (max-width: 768px) {
      .bg-course {
          min-height: 200px;
      }

      .preview-image {
          min-height: 200px;
      }

      .user-type {
          margin-top: 20px;
      }

      .form-card {
          padding: 20px 15px;
          /* smaller padding for mobile */
          margin-top: 75px !important;
          /* reduced top margin */
      }

      .side-nav {
          background: var(--white-color) !important;
          border: 0px !important;
          border-radius: 0px;
          padding: 5px 10px;
          position: fixed;
          left: -10px;
          width: 100%;
          height: 100%;
          overflow-x: scroll;
          z-index: 100;
          margin-top: 59px;
      }

      .nav-brand {
          width: 100%;
      }

      .brand-left {
          width: 100%;
      }

      .mat-badge.mat-badge {
          overflow: visible;
          margin-top: 3px;
      }

      .profile-img-head {
          display: none;
      }

      .search-field {
          padding: 5px 10px;
          border: solid 1px var(--progress-smoke);
          margin-top: 15px;
          margin-bottom: 10px;
      }

      .login-with-social {
          width: 100%;
      }

      .login-with-social img {
          width: 36%;
          margin-top: 2px;
      }

      .main-content {
          background: white;
          padding-top: 20px;
          margin-top: 10px;
      }

      .menu-icon {
          margin-top: -63px;
          float: right;
          background: var(--primary-color);
          color: var(--white);
          padding: 0px 10px;
          right: 15px;
          position: fixed;
          z-index: 100000000;
      }

      .bottom-nav {
          display: block !important;
      }


      .signout-icon {
          padding-top: 20px;
          cursor: pointer;
          font-size: 25px;
      }

      .signout-icon i {
          cursor: pointer;
      }

      .nav-brand {
          margin-top: 10px;
      }

      .brand-left {
          margin-top: 10px;
          position: relative;
          top: 8px;
      }
  }