@media (width <= 1024px) {
  /* Section Video */
  .sec-video {
    bottom: -270px;
    .up-video {
      .block-video {
        width: 100%;
        height: 300px;
      }
      .info-video {
        padding: 15px 0;
        h1 {
          font-size: 35px;
        }
        p {
          font-size: 18px;
        }
      }
    }
  }
}
@media (width <= 1200px) {
  .col-md-7,
  .col-md-5 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* What Offer */
  .what-offer {
    .container {
      .win-offers {
        .block-item-offer {
          margin-top: 20px;
          &:nth-child(1),
          &:nth-child(3) {
            .row {
              flex-direction: column-reverse;
            }
          }
          .block-info-video {
            margin: auto;
            width: 100%;
            height: auto;
          }
          .info-detail-offer {
            padding: 25px 0;
            h5 {
              font-size: 17px;
              line-height: 30px;
            }
          }
        }
      }
    }
  }
}

@media (width <= 991px) {
  /* New Banner Saudi National */
  .saudi-national-day {
    overflow: hidden;
    .info-saudi-national {
      padding: 20px !important;
      .h-right,
      .h-left {
        flex-direction: column !important;
        gap: 5px !important;
        img {
          max-width: 170px;
        }
      }
      .h-right {
        flex-direction: column-reverse !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        picture {
          top: 0 !important;
        }
      }
      .h-left {
        h4,
        h6 {
          /*                    font-size: 14px !important*/
        }
        span {
        }
      }
    }
  }
  .col-md-4,
  .col-md-8 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .bg-mob,
  .v-mobile {
    display: block;
  }
  .bg-desk,
  .v-desktop {
    display: none;
  }
  .click-nav {
    display: inline-block !important;
  }
  .in-header {
    .click-nav {
      .handle {
        background-color: #090326 !important;
      }
    }
  }
  .body-landing {
    padding-top: 200px;
  }
  header {
    display: none;
  }
  .body-landing {
    .what-offer {
      h2 {
        margin-bottom: 55px;
        font-size: 35px;
      }
    }
  }
  .nav-bar {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid #fff;
  }
  .block-head {
    & .nav-bar {
      position: relative;
    }
  }
  .side-nav {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 460px;
    background-color: #fff;
    z-index: 9999;
    padding: 30px 20px;
    flex-direction: column;
    border-radius: 0 0 10px 10px;
    transform: translateY(10px);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    overflow-x: hidden;
    overflow-y: auto;
    .items-calls {
      display: flex !important;
      gap: 15px !important;
      margin: 0 !important;
      margin-top: 20px !important;
      li {
        a {
          gap: 5px;
          img {
            width: 14px;
            filter: brightness(0) saturate(100%) sepia(100%) hue-rotate(245deg)
              saturate(600%) brightness(90%);
          }
          span {
            color: #090326 !important;
            font-size: 11px;
          }
        }
      }
    }
    .list-links {
      flex-direction: column;
      width: 100%;
      > ul {
        flex-direction: column;
        width: 100%;
        gap: 40px !important;
        margin: 0 !important;
        li {
          position: relative;
          width: 100%;
          a,
          .m-span {
            color: #090326 !important;
            font-size: 15px;
            &:hover {
              color: #7d178d !important;
            }
            &::before {
              display: none !important;
            }
          }
        }
        .up-links .sub-links {
          position: relative;
          display: none;
          top: 10px;
          width: 100%;
          padding: 10px 0;
          height: 195px;
          overflow-y: auto;
          z-index: 9;
          &::-webkit-scrollbar {
            width: 7px;
            height: 1px;
            border-radius: 10px;
          }
          li {
            padding: 0 10px;
          }
        }
      }
    }
    .dropdown {
      .dropdown-toggle {
        border: 1px solid #090326;
        color: #fff;
        background-color: #090326;
      }
    }
    .btn-option {
      margin-top: 40px;
    }
  }
  .side-nav .dropdown {
    margin-top: 30px;
    width: 100%;
    .dropdown-toggle {
      width: 100%;
    }
  }
  /* BG Layout */
  .bg-layout {
    /*        background-image: url("../images/bg-mobile.png");*/
    background-size: 100%;
    /* height: 1200px; */
  }
  /* Section Head */
  .section-head {
    height: auto;
    width: 100%;
    position: absolute;
    top: auto;
    bottom: 19%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .info-head {
      h1 {
        font-size: 40px;
      }
      p {
        font-size: 21px;
        margin-top: 20px;
      }
      a {
        width: 100%;
        &.sup-now {
          margin: 30px 0px 30px 0px;
        }
      }
    }
  }
  /* Section Video */
  .sec-video {
    bottom: -150px;
    .up-video {
      border-radius: 10px;
      padding: 20px;
      width: 100%;
      .block-video {
        width: 100%;
        height: 300px;
      }
      .info-video {
        padding: 15px 0;
        padding-bottom: 0;
        h1 {
          font-size: 27px;
          text-align: center;
        }
        p {
          margin-top: 20px;
          font-size: 18px;
        }
      }
    }
  }
  /* Footer */
  .up-section-footer {
    flex-direction: column;
    ul {
      overflow: initial !important;
      max-height: initial !important;
    }
    .in-one {
      a {
        margin: auto;
        display: table;
      }
      h6 {
        text-align: center;
      }
      .social {
        justify-content: center;
      }
      .commercial-register {
        justify-content: center;
      }
    }
    .form-sent {
      form {
        input {
          width: 100% !important;
          height: 45px !important;
        }
        button {
          width: 140px !important;
          height: 40px !important;
        }
      }
    }
  }
  /* Devices */
  .devices {
    .row {
      .col-md-4 {
        &:nth-child(1),
        &:nth-child(3) {
          .item-device {
            flex-direction: row-reverse;
          }
        }
      }
    }
    .item-device {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      .img-device {
        flex: 1;
        padding: 10px;
        img {
          width: 120px;
          height: 160px;
          object-fit: contain;
        }
      }
      .body-item-device {
        padding: 15px;
        flex: 1;
        .title-device {
          gap: 10px;
          margin-bottom: 10px;
          span {
            color: #090326;
            font-size: 18px;
          }
          img {
            width: 20px;
            height: 20px;
          }
        }
        p {
          font-size: 13px;
          margin: 0;
        }
      }
    }
    .dowload-app {
      .d-flex {
        a {
          img {
            max-width: 100%;
          }
        }
      }
    }
  }
  /* Features */
  .features {
    padding: 70px 0;
    h4 {
      font-size: 30px;
    }
    .up-features {
      flex-wrap: initial !important;
      .item-feature {
        .icon-feature {
          border-radius: 15px;
          width: 80px;
          height: 80px;
          img {
            max-width: 20px;
          }
        }
        h5 {
          margin-top: 20px;
          font-size: 12px;
          width: auto;
        }
      }
    }
  }
  .pop-video {
    .in-video {
      height: 45vh;
    }
  }
}

@media (width <= 550px) {
  .store {
    p {
      max-width: 100%;
      font-size: 17px;
      top: -65px;
      margin-bottom: 20px;
    }
  }
  /* Section Head */
  .section-head {
    .info-head {
      h1 {
        font-size: 30px;
        text-align: center;
      }
      p {
        font-size: 17px;
        margin-top: 20px;
        text-align: center;
      }
    }
  }
  /* Body Landing */
  .body-landing {
    padding-top: 200px;
    .what-offer {
      h2 {
        margin-bottom: 80px;
        font-size: 33px;
      }
      .block-item-offer {
        margin-top: 50px;
        .block-info-video {
          height: 300px;
          width: 350px;
        }
        .info-detail-offer {
          .sub-head-info {
            gap: 15px;
            .icon-head {
              background-color: transparent;
              border-radius: 50%;
              width: auto;
              height: auto;
              img {
                max-width: 60px;
                display: none;
                &.mobile {
                  display: block !important;
                }
              }
            }
            .title-info {
              display: flex;
              align-items: center;
              gap: 10px;
              h3 {
                font-size: 17px;
                margin: 0;
              }
              span {
                color: #090326;
                font-size: 16px;
              }
            }
          }
          .list-offer {
            li {
              gap: 5px;
              margin-top: 5px;
              align-items: flex-start !important;
              img {
                max-width: 14px;
                margin-top: 6px;
              }
              span {
                color: #090326;
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
  /* Modal App */
  .info-text-app {
    img {
      max-width: 200px;
    }
    h3 {
      font-size: 26px;
    }
    p {
      font-size: 17px;
    }
    h5 {
      font-size: 16px;
    }
  }
}

@media (width <= 500px) {
  .bg-layout {
    /* height: 920px; */
  }
  .sec-video {
    bottom: -350px;
  }
  /* Section Head */
  .section-head {
    bottom: 45px;
  }
  .body-landing {
    padding-top: 270px;
  }
  .features {
    h4 {
      font-size: 27px;
    }
  }
  .section-form-contact {
    & .head-info-form {
      h1 {
        font-size: 30px;
        width: 100%;
      }
      p {
        font-size: 14px;
      }
    }
  }
  .nav-bar {
    .container {
      padding: 0;
    }
  }
}

@media (width <= 670px) {
  .sec-banner {
    .pe-section-panner {
      padding: 15px 10px;
      .left-sec-pan {
        padding: 0 !important;
      }
    }
  }

  .block-head {
    .nav-bar {
      padding: 0 15px;
      height: 8.5vh;
      .container {
        height: 100%;
        .nav-body {
          height: 100%;
          .logo {
            img {
              max-width: 100px;
            }
          }
        }
      }
    }
  }

  .bg-layout {
    /* &:after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 90%;
      background: linear-gradient(
        to top,
        #0a0333 0%,
        rgba(10, 3, 51, 0.4) 70%,
        transparent 100%
      );
    } */
  }

  .section-form-contact {
    &.index-view {
      padding: 25px 0;
      height: initial !important;
      align-items: initial !important;
      .head-info-form {
        img {
          max-width: 180px;
          margin-bottom: 15px !important;
        }
      }
    }
  }
}

@media (width <= 575px) {
  .sec-banner {
    .pe-section-panner {
      .right-sec-pan {
        gap: 10px;
        .img-pan {
          width: 65px;
          height: 65px;
          img {
            max-width: 30px;
          }

          span {
            font-size: 10px;
          }
        }

        .info-pan {
          h1 {
            font-size: 22px;
          }

          h5 {
            font-size: 12px;
          }
        }
      }

      .left-sec-pan {
        h4 {
          font-size: 14px;
        }

        div {
          gap: 5px;
          img {
            max-width: 15px;
          }

          h5 {
            font-size: 13px;
          }
        }
      }
    }
  }
}

@media (width <= 470px) {
  .sec-banner {
    .pe-section-panner {
      .right-sec-pan {
        .img-pan {
          width: 55px;
          height: 55px;
          img {
            max-width: 25px;
          }

          span {
            font-size: 8px;
          }
        }

        .info-pan {
          h1 {
            font-size: 16px;
          }

          h5 {
            font-size: 8px;
          }
        }
      }

      .left-sec-pan {
        h4 {
          font-size: 11px;
        }

        div {
          gap: 5px;
          img {
            max-width: 12px;
          }

          h5 {
            font-size: 10px;
          }
        }
      }
    }
  }
}