@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;
        }
      }
    }
  }
  .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;
    order:4;
    margin-top: 5px;

  }
  .click-nav {
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s ease;
  }
  
  .click-nav svg {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  .icon-close {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    left: 8%;
    &:lang(en){
      right: 8%;
      left: auto !important;
    }
  }
  
  .click-nav.active .icon-menu {
    opacity: 0;
    pointer-events: none;
    transform: rotate(90deg);
  }
  
  .click-nav.active .icon-close {
    opacity: 1;
    pointer-events: auto;
    transform: rotate(90deg);
  } */
  .click-nav svg {
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
  }

  /* Default: show menu icon, hide close icon */
  .click-nav .menu-icon {
    display: block;
  }

  .click-nav .close-icon {
    display: none;
  }

  /* When active: show close icon, hide menu icon */
  .click-nav.active .menu-icon {
    display: none;
  }

  .click-nav.active .close-icon {
    display: block;
  }

  .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;
      padding-top: 30px;
    }
  }
  .side-nav {
    position: absolute;
    top: 99%;
    right: 0;
    width: 100%;
    height: 100vh;
    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%;
      height: 100%;
      > ul {
        flex-direction: column;
        width: 100%;
        gap: 0 !important;
        margin: 0 !important;
      }
      li {
        position: relative;
        width: 100%;
        border-bottom: 1px solid;
        padding-block: 20px;
        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 {
  .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 {
  @media screen and (max-width: 991.89px) {
    flex-direction: column;
  }
  ul {
    overflow: initial !important;
    max-height: initial !important;
  }
  .in-one {
    a {
      /* margin: auto; */
      /* display: table; */
      &.company-logo {
        svg {
          @media screen and (max-width: 991.89px) {
            width: 190px;
          }
        }
      }
    }
    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) {
  .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%;
          padding: 32px 0;
          .logo {
            img {
              max-width: 100px;
            }
          }
        }
      }
    }
  }

  .contactInForm {
    .dropdown-toggle {
      background-color: transparent !important;
    }
    .select-form {
      label {
        font-family: "IBM Plex Sans Arabic" !important;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
  .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;
          }
        }
      }
    }
  }
}