@media (max-width: 768px) {
      .index .character {
          width: 80px
      }

      .container {
          padding: 16px
      }

      .search_form>div {
          width: auto
      }

      header nav {
          position: absolute;
          background-color: #fff;
          left: 0;
          right: 0;
          top: 55px;
          padding: 16px;
          display: none;
          box-shadow: 0px 10px 10px #00000013;
      }

      header .logo {
          height: 40px
      }

      header nav a {
          display: block;
          text-align: left;
          padding: 10px;
      }

      header nav .active {
          background-color: #6ac443;
          color: white !important
      }

      .recruiter-header nav .active {
          background-color: #5c3a90;
      }

      header nav .active::after {
          display: none;
      }

      header .f_cont {
          width: auto !important
      }

      .banner {
          height: 300px
      }

      .banner .img1,
      .banner .img2 {
          width: 80px;
      }

      .banner h1 {
          font-size: 2rem;
          padding: 0px 32px;
      }


      .banner p {
          padding: 0px 32px
      }

      .banner .img2 {
          bottom: -10px
      }

      .video-container {
          padding: 16px 0px !important
      }

      .video-container .container::before,
      .video-container .container::after {
          width: 100px;
          height: 50px
      }

      .video-container .play {
          padding: 0.5rem;
      }

      .features-container .item .left,
      .features-container .item .right {
          float: none;
          width: 100%;
          margin: 0px 0px 16px 0px
      }

      .features-container .item {
          padding: 0 !important;
      }
  }