@media (min-width: 767px) and (max-width: 1024px) {
      html {
          overflow-x: hidden
      }

      .order-xs-last {
          order: 2;
      }

      .order-xs-1 {
          order: 1;
      }

      .order-xs-2 {
          order: 2;
      }

      .order-xs-3 {
          order: 3;
      }

      .order-xs-4 {
          order: 4;
      }

      .hdr-sec .swiper-slide .construction {
          left: 10%;
      }

      .navbar-sec.bg-white,
      .navbar-collapse {
          background-color: #212529 !important;
          z-index: 3;
          padding: 10px 35px 30px;
          width: 100%
      }

      .main-nav.scrolled {
          position: fixed;
          left: 0;
          right: 0;
          transition: 2s ease-in-out;
          -webkit-animation: fadein 0.3s;
          /* Safari, Chrome and Opera > 12.1 */
          -moz-animation: fadein 0.3s;
          /* Firefox < 16 */
          -ms-animation: fadein 0.3s;
          /* Internet Explorer */
          -o-animation: fadein 0.3s;
          /* Opera < 12.1 */
          animation: fadein 0.3s;
      }

      /* Footer */
      .footer-sec .footer-sub {
          display: inline-block;
      }

      .footer-sec .social-lnks {
          text-align: center
      }

      .footer-sec .footer-sub .sub-title {
          display: block
      }


      .ordersm-2 {
          order: 2 !important;
      }

      /* Arabic style */
      html:lang(ar) .cont-control {
          float: none;
      }

      html:lang(ar) .cont-txt {
          width: 100%;
      }

      html:lang(ar) .pgtab-cont .qstn-txt {
          width: 100%;
          padding-right: 0;
          padding-top: 20px
      }

      .promo-sec .squaredThree {
          clear: both;
      }

      .artcls-lst .star-artcl .cont-img {
          height: 100%;
      }

      .artcl-sec .testim-cont {
          width: 100%;
      }

      .project-sup .contact-form {
          width: 75%;
      }


      .vid-chat {
          display: block
      }

      .vid-screen {
          width: 100%;
      }

      .chat-screen {
          width: 100%;
      }

      .vid-cont {
          display: block;
      }

      .vid-cont .vid-prev:first-of-type {
          position: absolute;
          width: 50%;
          height: auto;
          z-index: 2;
          right: 15px;
          top: 15px
      }

      .vid-cont .vid-prev:last-of-type {
          height: 70vh;
          display: flex
      }

      .vid-cont .vid-prev {
          width: 100%
      }

      .vid-controls > div {
          display: block;
          text-align: center
      }

      .vid-controls button {
          margin: 5px
      }

      .testimonial {
          padding: 75px 275px 60px 0;
      }

      .navbar-light .navbar-nav .nav-link {
          font-size: 16px;
      }

      .navbar-light .navbar-nav .nav-link.req-btn {
          line-height: 24px;
          width: auto;
          display: inline-block;
          padding: 5px 50px !important;
          margin-top: 30px;
      }

      .who-sec p {
          width: 95% !important;
          margin: auto !important;
      }

      .prod-swiper {
          margin: 0 30px
      }

      .prod-swiper .swiper-slide img {
          width: 100%;
          height: auto;
      }

      .prod-swiper .swiper-slide h4 {
          font-size: 18px;
          margin-top: 24px;
      }

      .sec-title {
          margin-bottom: 15px !important
      }


      .srvcs-nav .srvcs-btns button > span {
          width: auto;
          font-size: 16px;
          margin: 0 15px;
      }

      .srvcs-nav .srvcs-btns {
          display: inline-block;
          width: auto;
          height: 50%;
          left: -100vw;
          position: absolute;
      }

      .srvcs-nav .srvcs-btns button {
          width: 100%;
          padding: 20px 10px;
      }

      .srvcs-nav .srvcs-btns button {
          justify-content: flex-start;
      }

      .srvcs-nav .srvcs-btns .close-btn {
          width: 25px;
          height: 25px;
          line-height: 25px;
          font-size: 20px;
      }

      .main-box {
          width: 100%;
      }

      .box {
          height: auto;
          padding: 0;
          border-right: 1px solid white;
          webkit-transition: 0.8s;
          -o-transition: 0.8s;
          transition: 0.8s;
          position: relative;
          overflow: hidden;
          list-style: none;
          transform: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
      }

      .box span {
          writing-mode: vertical-rl;
          font-size: 20px;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #072b83 !important;
          text-transform: uppercase;
          letter-spacing: 4px;
          width: 100%;
          transform: rotate(180deg);
          font-weight: 400;
          cursor: pointer;
          position: relative;
          /* left: 0; */
          /* right: 0; */
          margin: 0 auto;
          padding: 20px;
          text-align: center
      }

      .box.active span {
          left: auto;
          right: auto;
          margin: 0;
          font-weight: 600;
          transform: none;
          flex-direction: column;
          writing-mode: horizontal-tb;
      }

      .detail {
          width: 100%;
          height: auto;
          position: absolute;
          right: auto;
          top: auto;
          background: #000b41;
          color: #fff;
          opacity: 0;
          padding: 30px;
          box-sizing: border-box;
          webkit-transition: 0.8s;
          -o-transition: 0.8s;
          transition: 0.8s;
          -webkit-transform: translateY(100%);
          transform: translateY(100%);
          margin: 0;
      }

      .box.active .detail {
          opacity: 1;
          -webkit-transition-delay: 0.6s;
          -moz-transition-delay: 0.6s;
          -o-transition-delay: 0.6s;
          transition-delay: 0.6s;
          transform: none;
          position: relative
      }

      .offer-card {
          width: 100%;
      }

      .grid.bnfts-sec {
          display: block
      }

      .ftr-card {
          margin: 15px 0;
      }

      .about-sldr {
          padding: 0 15px
      }

      .slick-next {
          right: 5px;
          z-index: 1
      }

      .slick-prev {
          left: 5px;
          z-index: 1
      }

      .about-sec p {
          margin: 15px 0 !important;
      }

      .stndrd-sec.agri {
          width: 95%;
      }

      .food-sec img {
          -moz-column-count: 2;
          -moz-column-gap: 20px;
          -webkit-column-count: 2;
          -webkit-column-gap: 20px;
          column-count: 2;
          height: auto;
          width: 25%;
      }

      .crrs-req {
          display: block
      }

      .crrs-req .req-cont {
          width: 100%;
          display: inline-block;
          padding: 0 30px;
      }

      .crrs-req .req-cont ul {
          padding-bottom: 0 !important
      }

      .crrs-req .btn-cont:before {
          background: #fff
      }

      .crrs-table .table-gradi {
          position: relative;
      }

      .crrs-table .table-gradi:after {
          content: '';
          position: absolute;
          right: 0;
          left: auto;
          top: 0;
          height: 100%;
          width: 30px;
          background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(51, 51, 51, 0.12) 65%);
      }
  }