@media screen and (max-width: 1920px) {
  p {
    max-width: 65%;
  }
  .section-default p {
    max-width: 100%;
  }
  .col.padding-right p {
    max-width: 100%;
  }
  .section-feature-1 .feature h4::after {
    width: 52%;
    height: 35%;
    left: 27%;
    top: 40%;
    background-image: url(../images/road_line_1.png);
  }

  .section-feature-2 .feature h4::after {
    width: 34%;
    height: 30%;
    left: 52%;
    top: 42%;
    background-image: url(../images/road_line_2.png);
  }

  .section-feature-3 .feature h4::after {
    width: 54%;
    height: 36%;
    left: 22%;
    top: 44%;
    background-image: url(../images/road_line_3.png);
  }

  .section-feature-4 .feature h4::after {
    width: 27%;
    height: 30%;
    left: 51%;
    top: 47%;
    background-image: url(../images/road_line_4.png);
  }

  .section-feature-5 .feature h4::after {
    width: 56%;
    height: 30%;
    left: 15%;
    top: 30%;
    background-image: url(../images/road_line_5.png);
  }

  html[lang="en"] .section-feature-1 .feature h4::after {
    width: 38%;
    left: 28%;
    top: 38%;
  }

  html[lang="en"] .section-feature-2 .feature h4::after {
    width: 42%;
    left: 44%;
    top: 42%;
  }

  html[lang="en"] .section-feature-3 .feature h4::after {
    width: 42%;
    left: 23%;
    top: 41%;
  }

  html[lang="en"] .section-feature-4 .feature h4::after {
    width: 30%;
    left: 48%;
    top: 49%;
  }
  html[lang="en"] .section-feature-5 .feature h4::after {
    width: 50%;
    left: 15%;
    top: 33%;
  }
}

@media screen and (max-width: 1440px) {
  .section-feature-1 .feature h4::after {
    width: 47%;
    left: 27%;
    top: 41%;
  }
  .section-feature-2 .feature h4::after {
    width: 34%;
    left: 52%;
    top: 41%;
  }
  .section-feature-3 .feature h4::after {
    width: 45%;
    left: 23%;
    top: 41%;
  }
  .section-feature-4 .feature h4::after {
    width: 27%;
    left: 51%;
    top: 46%;
  }
  .section-feature-5 .feature h4::after {
    width: 46%;
    left: 16%;
    top: 32%;
  }
}

@media screen and (max-width: 1366px) {
  .section-feature-1 .feature h4::after {
    width: 43%;
    height: 35%;
    right: 30%;
    top: 41%;
    background-image: url(../images/road_line_1.png);
  }

  .section-feature-2 .feature h4::after {
    width: 34%;
    height: 30%;
    left: 52%;
    top: 42%;
    background-image: url(../images/road_line_2.png);
  }

  .section-feature-3 .feature h4::after {
    width: 42%;
    height: 36%;
    right: 35%;
    top: 40%;
    background-image: url(../images/road_line_3.png);
  }

  .section-feature-4 .feature h4::after {
    width: 27%;
    height: 30%;
    left: 51%;
    top: 47%;
    background-image: url(../images/road_line_4.png);
  }

  .section-feature-5 .feature h4::after {
    width: 44%;
    height: 30%;
    left: 16%;
    top: 32%;
    background-image: url(../images/road_line_5.png);
  }
}

@media screen and (device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  p {
    font-size: 1.3rem;
  }
  .section-download .image-container img {
    margin-top: 70%;
  }
  .section-aboutus {
    background-size: 55%;
  }
  .section-feature {
    background-size: 42%;
  }
  section .container {
    height: 70%;
  }
  .section-download .image-container img {
    margin-top: 43%;
  }
  html[lang="en"] .section-feature-1 .feature h4::after {
    width: 38%;
    right: 34%;
    top: 35%;
  }
  html[lang="en"] .section-feature-2 .feature h4::after {
    width: 54%;
    left: 33%;
    top: 30%;
    height: 45%;
  }
  html[lang="en"] .section-feature-3 .feature h4::after {
    top: 37%;
  }
  html[lang="en"] .section-feature-5 .feature h4::after {
    top: 26%;
  }
  html[lang="en"] .section-feature-2 .feature > *,
  html[lang="en"] .section-feature-4 .feature > * {
    float: left;
    width: 66%;
  }
  html[lang="en"] .section-feature-4 .feature h4::after {
    width: 60%;
    left: 21%;
    top: 27%;
    height: 65%;
  }
  html[lang="en"] .section-feature-4 .feature {
    margin-top: -20%;
  }
}

@media screen and (max-width: 960px) {
  h1 {
    font-size: 1.8rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.4rem;
  }
  p {
    font-size: 0.8rem;
    margin-top: 10px;
    max-width: 100%;
  }
  /* header */
  .header.mobile {
    display: block;
  }
  .header.mobile.bg {
    padding: 0;
    background-color: #fb5a3e;
    box-shadow: 0px 0px 11px 1px #86868657;
  }
  .header.mobile {
    /* position: fixed; */
    width: 100%;
    top: 0;
    z-index: 3;
    padding: 5% 0;
    margin: 0;
  }
  header.mobile a.logo img {
    width: 60%;
    float: left;
  }
  .header.mobile ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
  }
  .header.mobile ul li a {
    width: 100%;
    display: block;
    line-height: 20px;
    padding: 20px 0;
    font-size: 1rem;
    text-align: center;
  }
  .header.mobile li a:hover,
  .header.mobile .menu-btn:hover {
    background-color: #f4f4f4;
  }
  .header.mobile .logo {
    width: 40%;
    display: block;
    float: left;
    font-size: 2em;
    padding: 10px 0px 10px 20px;
    text-decoration: none;
  }
  /* menu */
  .header.mobile .menu {
    clear: both;
    max-height: 0;
    margin: 0px auto;
    transition: max-height 0.2s ease-out;
  }
  /* menu icon */
  .header.mobile .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    position: relative;
    user-select: none;
    width: 40px;
    height: 40px;
    margin: 3% 8% 0 0;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/menu_icon.png);
  }
  .header.mobile .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background 0.2s ease-out;
    width: 18px;
  }
  .header.mobile .menu-icon .navicon:before,
  .header.mobile .menu-icon .navicon:after {
    background: #333;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    transition: all 0.2s ease-out;
    width: 100%;
  }

  .header.mobile .menu-icon .navicon:before {
    top: 5px;
  }

  .header.mobile .menu-icon .navicon:after {
    top: -5px;
  }

  /* menu btn */

  .header.mobile .menu-btn {
    display: none;
  }

  .header.mobile .menu-btn:checked ~ .menu {
    max-height: 240px;
    box-shadow: 0px 0px 11px 1px #86868657;
  }

  .header.mobile .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }

  .header.mobile .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }

  .header.mobile .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }

  .header.mobile .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .header.mobile .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }

  header {
    display: none;
  }
  /*  end header */

  .section-default .container {
    display: flex;
    flex-direction: column-reverse;
  }

  .section-default .container .col:first-child {
    margin-top: 100%;
  }

  .section-default .container .col:last-child {
    margin-top: 30%;
    margin-bottom: 0;
  }

  .section-default .image-1 {
    left: -25%;
  }

  .section-default .image-2 {
    right: -3%;
    top: 28%;
    width: 100%;
  }

  .mobile.download-btn {
    background-color: #fb5c3f;
    color: #fff;
    width: 50%;
    display: block;
    padding: 0 15px;
    border-radius: 5px;
    margin: 0 0 5% 0;
    text-align: center;
    font-size: 15px;
    line-height: 40px;
    box-shadow: 0px 0px 11px 1px #86868657;
  }

  section .container,
  footer .container {
    width: 90%;
    height: auto;
    display: block;
  }

  .container.flip {
    display: flex;
    flex-direction: column-reverse;
  }

  .image-container {
    height: auto;
  }

  section .col {
    width: 100%;
    margin-bottom: 10%;
  }

  .section-aboutus {
    background-repeat: no-repeat;
    background-size: 115%;
    background-position: center 10px;
    margin-top: 10%;
  }

  .stats .list {
    max-width: 100%;
  }

  .stats .list .item {
    padding: 7% 3%;
  }

  .stats .list .item .value {
    font-size: 0.8rem;
  }

  .col.padding-right {
    padding: 0;
    margin-top: 10%;
  }

  .feature {
    margin-top: 0;
  }

  div.bg-1 {
    background-size: 330%;
  }

  div.bg-2,
  div.bg-3,
  div.bg-4 {
    background-size: cover;
  }

  div.bg-4 {
    height: 67%;
  }

  .section-download img {
    margin: 0px auto;
  }

  .features-lable {
    display: none;
  }

  .section-feature {
    background-size: 80%;
  }

  .section-download {
    text-align: center;
  }

  .store-download-list {
    width: 100%;
    float: right;
    display: grid;
  }
  .store-download-list a {
    display: grid;
  }
  .store-download-list a img {
    max-width: 60%;
  }
  .section-feature-1 img,
  .section-feature-4 img,
  .section-feature-5 img {
    margin-top: 12%;
  }

  .section-feature-1 {
    background-position: top left;
  }

  .section-feature-3 {
    background-size: 100%;
    background-position: top left;
  }

  .section-feature-4 {
    background-position: right 30px;
  }

  .section-feature-5 {
    background-position: top left;
  }

  .section-feature-5 img {
    margin-top: 0;
    margin-left: 0;
  }

  div.bg-2 {
    background-position: top left;
  }

  .section-feature-2 {
    background-position: right 0;
  }

  footer ul li {
    width: 100%;
    margin: 0px auto;
    text-align: center;
  }

  footer ul.social-network {
    min-width: 100%;
    text-align: center;
    margin: 2% 0;
  }

  footer .logo {
    min-width: 100%;
    margin: 5% 0;
    background-position: center center;
  }

  .feature h4::after {
    display: none;
  }

  div.bg-4 {
    height: 55%;
  }

  .section-cms {
    background-size: contain;
  }

  .cms-content {
    max-width: 90%;
    padding: 5%;
    margin-top: 30%;
    margin-bottom: 10%;
  }
  .cms-content ol,
  .cms-content ul {
    font-size: 0.8rem;
  }
  html[lang="en"] .section-feature-1 .feature > *,
  html[lang="en"] .section-feature-3 .feature > *,
  html[lang="en"] .section-feature-5 .feature > *,
  html[lang="en"] .section-feature-2 .feature > *,
  html[lang="en"] .section-feature-4 .feature > * {
    float: left;
    width: 100%;
  }
  html[lang="en"] .section-download h5:lang(en) {
    text-align: center;
  }
  html[lang="en"] .feature {
    float: left;
  }
  .lang-btn,
  header .lang-btn:lang(en) {
    line-height: 60px;
    float: left;
  }
  header.mobile .lang-btn {
    margin-right: 25px;
    color: #fff;
  }
}

@media screen and (max-width: 960px) and (orientation: landscape) {
  .header.mobile {
    padding: 1% 0;
  }
  header.mobile a.logo img {
    width: 40%;
  }
  .header.mobile .menu-icon {
    margin: 1% 8% 0 0;
  }
  .section-aboutus {
    background-size: contain;
  }
  div.bg-1,
  div.bg-2,
  div.bg-3,
  div.bg-4 {
    background-size: cover;
  }
  div.bg-4 {
    height: 240%;
  }
  .header.mobile .menu-btn:checked ~ .menu,
  .header.mobile .menu-btn:checked ~ .menu li {
    width: 100%;
  }
  .stats .list {
    max-width: 45%;
  }
  .section-aboutus .col {
    margin-bottom: 0;
  }
  .col.padding-right {
    margin-top: 0;
    margin-bottom: 10%;
  }
  footer ul {
    min-width: 100%;
  }
}

/*ipad pro*/
@media screen and (device-width: 1024px) {
  header,
  section .container {
    width: 80%;
  }
  .section-default .container {
    height: 50%;
  }
  .section-aboutus .container {
    height: 45%;
  }
  .stats .list {
    max-width: 100%;
  }
  .stats .list .item:nth-child(even) {
    margin: 20px 20px 0 0;
  }
  .col.padding-right {
    padding-right: 10%;
  }
  .section-feature img {
    width: auto;
  }
  .section-feature .feature h4::after {
    display: none;
  }
  .section-feature {
    background-size: 50%;
  }
  section .container {
    height: 60%;
  }
  .section-aboutus {
    background-size: 55%;
  }
  .section-download .image-container img {
    width: 100%;
    margin-top: 65%;
  }
  footer .container {
    width: 95%;
  }
}

@media screen and (device-width: 1024px) and (orientation: landscape) {
  .section-default .container,
  section .container {
    height: 100%;
  }
  .section-download .container {
    height: 65%;
  }
  footer .container {
    width: 95%;
  }
  .section-download .image-container img {
    width: 100%;
    margin-top: 30%;
  }
  .section-feature-1 img {
    width: 80%;
  }
  .section-feature-2 img,
  .section-feature-3 img {
    width: 45%;
  }
  .section-feature-4 img {
    width: 65%;
  }
  .section-feature-5 img {
    width: 90%;
  }
}

@media screen and (max-width: 812px) and (orientation: landscape) {
  section .container {
    display: flex;
    flex-direction: row !important;
  }
  .stats .list {
    max-width: 100%;
  }
  .section-aboutus {
    background-position: right;
  }
  .col.padding-right {
    padding-right: 5%;
  }
  .section-feature {
    background-size: 40%;
  }
  div.bg-4 {
    height: auto;
  }
  .section-default .container .col:first-child {
    margin-top: 28%;
  }
}

@media screen and (device-width: 823px) and (orientation: landscape) {
  .header.mobile .menu-btn:checked ~ .menu,
  .header li {
    width: 100%;
  }
  header.mobile a.logo img {
    width: 30%;
  }
  .header.mobile .menu-icon {
    margin: 1% 8% 0 0;
  }
  section .container {
    display: flex;
    flex-direction: row !important;
  }
  section .col {
    width: 50%;
    align-self: flex-start;
  }
  .section-default {
    background-size: 75%;
  }
  .section-feature {
    background-size: 40%;
  }
  div.bg-1,
  div.bg-2,
  div.bg-3,
  div.bg-4 {
    background-size: 40%;
  }
  .section-default .container .col:first-child {
    margin-top: 25%;
  }
  .section-default .container .col:last-child {
    margin-top: 12%;
  }
  .stats .list {
    max-width: 100%;
  }
  .section-aboutus {
    background-size: 53%;
    margin-top: 0;
    background-position: right;
  }
  div.bg-4 {
    height: 100%;
  }
  .stats {
    width: 100%;
    float: left;
    display: flex;
  }
  .feature {
    margin-top: 50%;
  }
  .col.padding-right {
    padding-right: 8%;
  }
  section .container {
    height: 100%;
  }
  .section-feature-3 img {
    width: 35%;
  }
  .section-feature-5 img {
    width: 68%;
  }
  footer ul {
    width: 100%;
    text-align: center;
  }
  footer ul li {
    width: auto;
    display: inline-block;
    margin: 0 3% 0 3%;
  }
}

/*ipad*/
@media screen and (device-width: 768px) {
  .header.mobile .menu-btn:checked ~ .menu,
  .header li {
    width: 100%;
  }
  header.mobile a.logo img {
    width: 30%;
  }
  .header.mobile .menu-icon {
    margin: 1% 8% 0 0;
  }
  section .container {
    display: flex;
    flex-direction: row !important;
  }
  section .col {
    width: 50%;
    align-self: flex-start;
  }
  .section-feature {
    background-size: 40%;
  }
  div.bg-1,
  div.bg-2,
  div.bg-3,
  div.bg-4 {
    background-size: 40%;
  }
  .section-default .container .col:first-child {
    margin-top: 25%;
  }
  .section-default .container .col:last-child {
    margin-top: 23%;
  }
  .stats .list {
    margin-top: 23%;
  }
  .section-aboutus {
    background-size: 53%;
    margin-top: 0;
    background-position: right;
  }
  div.bg-4 {
    height: 40%;
  }
  .stats {
    width: 100%;
    float: left;
    display: flex;
  }
  .feature {
    margin-top: 50%;
  }
  .col.padding-right {
    padding-right: 8%;
  }
  section .container {
    height: 45%;
  }
  footer ul {
    width: 100%;
    text-align: center;
  }
  footer ul li {
    width: auto;
    display: inline-block;
    margin: 0 3% 0 3%;
  }
}

@media screen and (max-width: 414px) {
  div.bg-4 {
    height: 70%;
  }
}

@media screen and (max-width: 375px) {
  div.bg-4 {
    height: 68%;
  }
}

@media screen and (max-width: 320px) {
  .header.mobile .menu-icon {
    margin: 3% 4% 0 0;
  }
}

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}