html[dir="rtl"] {
  input[type="tel"] {
    text-align: right;
  }
  body {
    font-family: "Tajawal", Arial !important;
  }

  .card .price.text-md {
    direction: rtl;
  }

  .navbar {
    .profile {
      .dropdown {
        .dropdown-menu {
          left: 0 !important;
          right: auto !important;
          .dropdown-menu-container {
            .arrow-circle {
              transform: scale(-1);
            }
            .external-links-container {
              a {
                .arrow {
                  img {
                    transform: rotate(90deg) !important;
                  }
                }
              }
              .another-account a:hover {
                .arrow {
                  img {
                    transform: rotate(180deg) !important;
                  }
                }
              }
            }
          }
        }
      }
    }
    .me-2 {
      margin-right: 0 !important;
      margin-inline-end: 0.5rem !important;
    }

    .navbar-top {
      .top-actions {
        padding-left: 0;
      }

      .top-nav-item {
        &:nth-last-child(1) {
          font-family: "Suisse Int'l" !important;
        }
      }
    }

    .nav-wrapper {
      .navbar-brand {
        margin-right: 0 !important;
        margin-inline-start: 5rem !important;
        margin-inline-end: 2.25rem !important;
      }

      .nav-item {
        i {
          padding-top: 0 !important;
        }
      }

      .navbar-nav {
        padding-inline-start: 0;
      }
    }
  }

  .wheel .wheel-icon .nav-link p {
    //font-size: 10px !important;
    white-space: nowrap;
  }

  .modal {
    .close-modal {
      left: 20px;
      right: unset;
    }
    .form-col {
      .extre-links-container {
        a {
          .arrow {
            img {
              transform: scale(-1) !important;
            }
          }
        }
      }
      .service-container {
        .title-container {
          p {
            left: 0;
          }
        }
      }
    }
  }

  .dropdown-menu {
    text-align: right;

    .backdrop-close {
      left: 7.5%;
      right: auto;
    }
  }

  .sectors-section {
    .nav-pills {
      .nav-link::after {
        right: 7px;
      }
    }

    .tab-content {
      .inset-background {
        clip-path: inset(0 2% 0 0 round 10px 10px 10px 10px) !important;
      }
    }

    .pulse {
      right: 0;
    }

    .pulse-mid {
      right: -7.5px;
      left: unset;
    }

    .pulse-outer {
      right: -12.5px;
      left: unset;
    }
  }

  .business-services-section {
    h1.text-xl {
      font-size: 3rem;
    }

    .et-container {
      &::before {
        transform: none;
      }
    }
  }

  .resources-section {
    .arrow-button {
      transform: rotateY(180deg);
      padding-inline-end: 4px;
    }

    .text-light.d-flex img {
      padding-inline-start: 0;
    }

    .bi::before {
      transform: rotateY(180deg);
    }
  }

  .main-service-card {
    .know-more-icon {
      transform: rotateY(180deg);
    }
  }

  .success-stories-section {
    .video-icon {
      transform: rotateY(180deg);
    }

    .bg-logo img {
      right: unset;
      left: 0;
    }
  }

  .news-card {
    .arrow-btn {
      transform: rotateY(180deg);
      justify-content: flex-start;
    }
  }

  .need-help-banner {
    .content-wrapper,
    .content,
    .secondaryButtonIcon {
      transform: rotateY(180deg);
    }
  }

  .solution-plans-section {
    swiper-slide .carousel-item-container .content-section .know-more img {
      transform: rotate(180deg);
      // padding-inline-start: 0.5rem;
      // margin: 0 !important;
    }

    swiper-slide {
      .bg-container {
        transform: rotateY(180deg);
      }

      &::after {
        transform: rotateY(180deg);
      }
    }
  }

  .floating-button {
    bottom: 2rem;
    left: 1rem;
    right: auto;

    &:has(.show-buttons) {
      .btn-wrapper {
        &:nth-child(2),
        &:nth-child(3) {
          right: unset !important;
          left: 0.25rem !important;
        }
      }
    }
  }

  app-footer {
    .copyrights {
      margin-right: 0;
    }

    .social-media {
      margin-right: 0;
      margin-left: 20px;
    }
  }

  .youtube-player-placeholder,
  youtube-player iframe {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .how-it-works-section {
    .playIcon {
      transform: rotateY(180deg);
    }
  }

  .solution-card-section,
  .phase-banner-section {
    i {
      transform: rotateY(180deg);
    }
  }

  .internal-plans-section {
    .bundles-section::after {
      clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 47%,
        97% 50%,
        100% 53%,
        100% 100%,
        0% 100%
      );
    }

    .arrow-icon {
      transform: rotateY(180deg);
    }
  }

  .phase-card-section,
  .phase-importance-section,
  .phase-banner-section {
    .bi::before {
      transform: rotateY(180deg);
    }
  }

  .knowledge-banner-section {
    .bi::before,
    img {
      transform: rotateY(180deg);
    }
  }

  .tooltip-section {
    .arrow-icon {
      transform: rotateY(180deg);
    }
  }

  .bundles-popup-section {
    .slider-container {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 12px;
      border-bottom-right-radius: 12px;
    }

    .custom-swiper-button-next {
      left: 1.25rem;
      right: unset;
      transform: rotateY(180deg);
    }

    .custom-swiper-button-prev {
      right: 1.25rem;
      left: unset;
      transform: rotateX(180deg);
    }

    .custom-addon-button-next {
      right: -2.25rem;
    }

    .custom-addon-button-prev {
      left: 2.25rem;
    }
  }

  .bundle-details-popup-section {
    .row,
    .flex-row {
      flex-direction: row-reverse !important;
    }

    .close-modal {
      right: unset;
      left: 2rem;
    }

    .details-wrapper {
      i {
        padding-inline-start: 1rem;
        padding-inline-end: unset;
      }
    }

    .card {
      &:is(.show-details) {
        .bundle-extra-details {
          flex-direction: row-reverse;

          .quantity {
            margin-inline-start: unset;
            margin-inline-end: auto;
          }
        }
      }
    }
  }

  app-all-events {
    .arrow-button {
      transform: rotate(180deg);
    }
  }

  app-breadcrumb {
    .nav.et-container .bread-crumb img.bread-crumb-arrow {
      transform: rotate(-90deg);
    }
  }

  .ngx-pagination .pagination-next.disabled,
  .ngx-pagination .pagination-next,
  .ngx-pagination .pagination-previous,
  .ngx-pagination .pagination-previous.disabled {
    transform: rotateY(180deg);
  }

  app-case-studies-cards {
    .arrow-button {
      transform: rotate(180deg);
    }
  }

  app-case-details-page {
    .image-overlay {
      left: 24px;
      right: auto;
    }

    #scrollspy.card-list {
      padding: 12px;
      margin: 0;
    }

    .initial-active::before {
      right: -8px;
    }

    .card-list a.active::before {
      right: -8px;
    }
  }

  app-blogs {
    .tab.active::before {
      right: -16px;
      left: auto;
    }
  }

  app-blogs-cards {
    .arrow-button {
      transform: rotate(180deg);
    }
  }

  app-blog-details-page {
    .image-overlay {
      left: 24px;
      right: auto;
    }

    #scrollspy.card-list {
      padding: 12px;
      margin: 0;
    }

    .initial-active::before {
      right: -8px;
    }

    .card-list a.active::before {
      right: -8px;
    }
  }

  app-blogs-cards-banner {
    .arrow-button {
      transform: rotate(180deg);
    }
  }

  .main-search {
    .close-modal {
      left: 5rem;
      right: unset;
    }

    .modal-content {
      .main-search-input {
        .search-center {
          transform: translate(-1.5rem, -50%) !important;
          font-family: "GE SS Two", sans-serif !important;
        }

        .autocomplete {
          left: unset !important;
          right: 2.9rem !important;
          transform: translateY(-50%), sans-serif !important;
        }

        .user-input {
          &:before {
            left: -1px !important;
            right: unset !important;
          }
        }

        input {
          font-family: "GE SS Two", sans-serif !important;
        }
      }
    }

    // search results
    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
      .tab {
        &::before {
          left: 100% !important;
          right: unset !important;
        }
      }
    }

    .arrow-button {
      transform: rotateY(180deg);
    }
  }

  .recommender-popup {
    .close-modal {
      padding: 0;
      top: 3rem;
      left: 4.9375rem;
      right: unset;
    }

    .arrow-button {
      right: unset;
      left: 0.75rem;
      transform: rotateY(180deg);
    }
  }

  #consultationForm {
    .close-modal {
      top: 3rem;
      left: 3rem;
      right: unset;
    }

    .submit {
      margin-inline-start: auto;
      margin-inline-end: unset !important;
    }

    mat-label {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }
  }

  #primaryCarousel {
    .bg-container {
      // transform: scaleX(-1);
    }

    .template-2 .title {
      font-size: 3.5rem;
    }

    swiper-container {
      &::part(pagination) {
        right: 5rem;
        left: unset;
      }
    }
  }

  app-help-stepper-form {
    .counter {
      left: auto;
      right: 5rem;
    }

    .buttons-wrapper {
      left: auto !important;
    }

    .search-container {
      input {
        padding-inline-start: unset;
        padding-inline-end: 2.75rem;
      }

      .search-icon {
        right: 1rem;
        left: unset;
      }
    }

    swiper-container {
      &::part(button-next) {
        left: -7.5%;
        right: unset;
        transform: rotate(90deg);
      }

      &::part(button-prev) {
        right: -7.5%;
        left: unset;
        transform: rotate(-90deg);
      }
    }
  }

  app-highlighted-events {
    .background-image {
      transform: scaleX(-1);
    }
  }

  app-solution-card {
    .arrow-icon {
      transform: rotate(180deg);
    }
  }

  app-consultation-banner {
    .content-wrapper,
    .content {
      transform: rotateY(180deg);
    }
  }

  app-event-photos {
    .text-end {
      text-align: left !important;
    }

    ul {
      padding-left: 0;
    }

    .dropdown-toggle::after {
      left: 1.5rem;
      right: auto;
    }
  }

  //Carousels Controls
  app-screenshots-carousel {
    .mySwiper[_ngcontent-ng-c770867844] {
      padding: 1rem 1rem 1rem 0rem;
    }

    .screenshot-container {
      border-radius: 0px 12px 12px 0px;
      margin: 1rem 1rem 1rem 0rem;
    }

    #screenshot-prev {
      left: 1.5rem;
    }

    #screenshot-next {
      right: -7.5rem;
    }

    swiper-container::part(pagination) {
      right: 1rem;
      left: unset;
    }
  }

  //Artworks
  app-how-it-works {
    .background-image::before {
      transform: scaleX(-1);
    }

    .carousel-inner {
      overflow: visible;
    }
  }

  app-work-steps {
    .background-image::before {
      transform: scaleX(-1);
    }

    .text-col {
      &::before {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        border-bottom-right-radius: 12px;
        border-top-right-radius: 12px;
      }
    }

    .swiper-button-prev {
      left: 1.5rem;
    }

    .swiper-button-next {
      right: -3.5rem;
    }
  }

  app-detailed-services {
    .et-container::before {
      transform: none;
    }
  }

  app-sectors-section {
    .background-image::before {
      transform: scaleX(-1);
    }
  }

  app-events-page {
    .artwork {
      &::before {
        left: 0;
        right: auto;
        background-position: bottom left;
        transform: scaleX(1);
      }
    }
  }

  #sectorBenefits::before {
    left: unset;
    right: 42%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
  }

  body:has(.helpCloseConfirmation.show) {
    #TopNavDrop-0 {
      &:after {
        right: 6px;
        left: unset;
      }
    }
  }

  .splash-logo {
    right: 5rem;
    left: unset;
  }

  body:has(app-title-card + .artwork) {
    app-how-it-works {
      .background-image::before {
        display: none;
      }
    }

    .artwork {
      &::before {
        right: 0;
        left: auto;
        transform: rotateY(180deg);
      }
    }
  }

  app-interactive-consultation {
    .title::after {
      left: auto;
      right: 0;
    }

    .mat-mdc-input-element,
    mat-select {
      direction: rtl;
    }
  }

  app-terms-and-conditions {
    img {
      height: 17.375rem;
      width: 29.4375rem;
      position: absolute;
      transform: translate3d(-48%, -105%, 0);
    }
  }

  app-about-us {
    .team-section {
      .et-container {
        &::before {
          left: -20px !important;
          right: unset !important;
          background-position: top left !important;
        }
      }
    }

    .vision-mission-title {
      padding-right: 0;
      padding-left: 0.625rem;
    }

    .vision-mission-text {
      padding-right: 0;
      padding-left: 0.625rem;
    }
  }

  app-about-us-card {
    .card-image {
      margin-left: 0.5rem;
      margin-right: 0;
    }
  }

  .about-us-dialog {
    .card-header {
      flex-direction: row-reverse;

      .card-image {
        margin-left: 0.5rem;
        margin-right: 0;
      }

      .close-button {
        margin-left: unset;
        margin-right: auto;
      }

      app-privacy-policy {
        .policy-header {
          flex-direction: row-reverse;
        }

        .close-button {
          margin-left: unset;
          margin-right: auto;
        }

        .row-title {
          flex-direction: row-reverse;
        }

        .tick-icon {
          padding-right: 0;
          padding-left: 0.125rem;
          padding-top: 0.5rem;
        }
      }
    }
  }

  app-bundle-card {
    .d-flex {
      .quantity {
        text-align: left !important;
      }
    }
  }
}

@media only screen and (max-width: 1350px) {
  html[dir="rtl"] {
    app-mega-menu {
      .nav-item {
        .nav-link {
          margin-inline-end: 0 !important;

          span {
            font-size: 0.875rem;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 1140px) {
  html[dir="rtl"] {
    app-mega-menu {
      .nav-item {
        .nav-link {
          span {
            font-size: 0.75rem;
          }
        }
      }
    }
  }
}

// TABLET MARGIN BREAKPOINT
@media only screen and (max-width: 1024px) {
  html[dir="rtl"] {
    .navbar {
      .nav-wrapper {
        .navbar-brand {
          margin-inline-start: 2.5rem !important;
        }
      }
    }

    app-mega-menu {
      .nav-item {
        .nav-link {
          span {
            font-size: 1rem;
          }
        }
      }
    }

    .main-search {
      .close-modal {
        left: 2.5rem;
        right: unset;
      }
    }

    .splash-logo {
      right: 2.5rem;
      top: 52px;
    }

    app-terms-and-conditions {
      img {
        transform: translate3d(0, -105%, 0);
      }
    }

    app-sectors-section {
      .sectors-section .nav-pills .nav-link p {
        font-size: 1rem !important;
      }
    }
  }
}

// BS5 TABLET BREAKPOINT
@media only screen and (max-width: 991px) {
  html[dir="rtl"] {
    .navbar {
      .nav-wrapper {
        .navbar-brand {
          margin-inline-start: 0rem !important;
        }
      }
    }

    .wheel .wheel-icon .nav-link p {
      //font-size: 12px !important;
    }

    .dropdown-menu {
      .backdrop-close {
        left: 2.5rem;
      }
    }

    .business-services-section {
      h1.text-xl {
        font-size: 60px;
      }
    }

    #primaryCarousel {
      swiper-container {
        &::part(pagination) {
          right: 2.5rem;
          left: unset;
        }
      }

      .template-2 .title {
        font-size: 2.5rem;
      }
    }

    #consultationForm {
      .close-modal {
        top: 2.5rem;
        left: 2.5rem;
        right: unset;
      }
    }
  }
}

// Footer Tablet Breakpoint
@media only screen and (max-width: 992px) {
  html[dir="rtl"] {
    app-footer {
      .arrow-icon {
        left: 10px;
        right: auto !important;
      }
    }

    app-help-stepper-form {
      .counter {
        left: auto;
        right: 2.5rem;
      }

      .buttons-wrapper {
        left: 0px !important;
      }
    }

    .splash-logo {
      right: 5rem;
      top: 54px;
    }

    #sectorBenefits::before {
      left: unset;
      right: 0;
      border-radius: 0;
    }
  }
}

// MOBILE
@media only screen and (max-width: 767px) {
  html[dir="rtl"] {
    .dropdown-menu {
      .backdrop-close {
        left: 1rem;
      }
    }

    .wheel .wheel-icon .nav-link p {
      //font-size: 8px !important;
    }

    .sectors-section {
      .nav {
        flex-direction: row-reverse !important;
      }

      .pulse {
        right: 50%;
        transform: scale(1) translateX(50%) !important;
      }
    }

    .business-services-section {
      h1.text-xl {
        font-size: 35px;
      }
    }

    .success-stories-section {
      .bg-logo img {
        left: 55%;
      }
    }

    .youtube-player-placeholder,
    youtube-player iframe {
      border-top-right-radius: 12px;
      border-bottom-right-radius: 12px;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }

    .how-it-works-section {
      .row {
        &::before {
          border-bottom-right-radius: 12px;
          border-top-right-radius: 12px;
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }
      }

      .how-it-works-col {
        .how-it-works {
          float: left;
        }
      }
    }

    .bundle-details-popup-section {
      .close-modal {
        right: unset;
        left: 0.75rem;
      }
    }

    .recommender-popup {
      .close-modal {
        padding: 0;
        top: 2rem;
        left: 2rem;
      }

      .arrow-button {
        right: unset;
        left: 7px;
      }
    }

    app-event-card {
      .icon-wrapper .bi::before,
      .arrow-button {
        transform: rotate(180deg);
      }
    }

    app-blogs {
      .tab.active::before {
        right: auto;
        left: auto;
      }
    }

    app-footer {
      .arrow-icon {
        left: 10px;
        right: auto;
      }
    }

    .main-search {
      .close-modal {
        left: 1rem;
        right: unset;
      }

      .modal-content {
        .main-search-input {
          .search-center {
            transform: translate(-0.5rem, -50%) scale(0.6) !important;
          }

          .autocomplete {
            left: unset !important;
            right: 2.775rem !important;
            transform: translate(0rem, -50%) !important;
          }

          .user-input {
            transform: translate(0rem, -50%) !important;
          }
        }
      }
    }

    #primaryCarousel {
      .template-2 .title {
        font-size: 2rem;
      }

      swiper-container {
        &::part(pagination) {
          right: 1rem;
          left: unset;
        }
      }
    }

    app-work-steps {
      .carousel {
        transform: translate(2%, 5%);
      }
    }

    app-breadcrumb {
      .nav.et-container .bread-crumb img.bread-crumb-arrow {
        transform: rotate(-90deg);
      }
    }

    app-event-photos {
      .dropdown-toggle::after {
        left: 10px;
        right: auto;
      }
    }

    app-help-stepper-form {
      .counter {
        left: auto;
        right: 1rem;
      }
    }

    .splash-logo {
      right: 3.5rem;
      top: 54px;
    }

    #consultationForm {
      .close-modal {
        top: 1rem;
        left: 1rem;
        right: unset;
      }

      .btn {
        right: unset;
        left: 0;
      }
    }

    app-terms-and-conditions {
      img {
        position: relative;
        top: 100%;
        width: 100%;
        height: 100%;
      }
    }
  }
}