/*=====================
    Variables start
==========================*/

@import "ride-booking";
/* icon font family */
$remixicon: remixicon !important;

/* variables */
:root {
  --black: 0, 0, 0;
  --white: 255, 255, 255;
  --primary-color: 3, 7, 18; //#030712
  --primary-color2: 255, 202, 32; //#FFCA20
  --secondary-color: 17, 84, 68;
  --title-color: 33, 33, 33;
  --content-color: 136, 136, 136;
  --warning-color: 236, 178, 56;
  --danger-color: 255, 131, 103;
  --info-color: 71, 161, 229;
  --border-color: 238, 238, 238;
  --light-gray: 250, 250, 250;
  // --primary-color: 3, 7, 18; //#030712
  --sidebar-background-color: linear-gradient(178.98deg,
      #222222 -453.29%,
      #070606 91.53%);
  --font-family: "Lexend", serif;
  --primary: #030712;
  --primary-dark: #2667cc;
  --success: #4caf50;
  --warning: #ff9800;
  --danger: #f44336;
  --info: #2196f3;
  --dark: #212529;
  --light: #f8f9fa;
  --gray: #6c757d;
  --gray-light: #e9ecef;
  --border-radius: 12px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
  /* font family */
  --font-family: "Lexend", sans-serif;
}

$color_1: var(--dark);
$color_2: var(--primary);
$color_3: white;
$color_4: var(--warning);
$color_5: var(--gray);
$color_6: var(--success);

.dark {
  background-color: rgba(var(--primary-color), 1);
}

// .dark {
//   --black: 255, 255, 255;
//   --white: 31, 31, 31;
//   --title-color: 255, 255, 255;
//   --content-color: 166, 166, 166;
//   --border-color: 52, 52, 52;
//   --light-gray: 34, 34, 34;
// }

/* Mixin scss */
@mixin icon {
  font-family: $remixicon;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

button,
input,
optgroup,
select,
textarea {
  font-family: "Lexend", sans-serif !important;
}

/*=====================
    Reset CSS start
==========================*/
section,
.section-t-space {
  padding-top: calc(20px + (100 - 20) * ((100vw - 320px) / (1920 - 320)));
}

.section-b-space {
  padding-bottom: calc(20px + (100 - 20) * ((100vw - 320px) / (1920 - 320)));
}

.container {
  @media (min-width: 1440px) {
    max-width: 1410px;
  }
}

.custom-container {
  max-width: calc(100% - calc(40px + (390 - 40) * ((100vw - 320px) / (1920 - 320))));
  margin: auto;
}

.faq-container {
  max-width: calc(100% - calc(40px + (390 - 40) * ((100vw - 320px) / (1920 - 320))));
  margin: auto;
}

.h-30 {
  height: 30px;
}

.flag-img {
  width: calc(23px + (30 - 23) * ((100vw - 320px) / (1920 - 320)));
}

.table> :not(caption)>*>* {
  background-color: transparent;
}

#toast-container {
  &.toast-top-center {
    top: 12px;
  }

  .toast {
    border: 1px solid transparent;
    border-left: 5px solid;
    border-radius: 5px;
    font-size: 16px;
    width: max-content !important;
    background-color: rgba(var(--white), 1) !important;
    max-width: 500px !important;

    body.rtl & {
      border-left: unset;
      border-right: 5px solid;
    }

    &.toast-success {
      border-left-color: #0d462c;
      color: #0d462c;
      background-image: url("@/svg/success.svg") !important;

      body.dark & {
        border-left-color: #237651;
        color: #49a77c;
        background-image: url("@/svg/dark-success.svg") !important;
      }

      .toast-progress {
        background-color: transparent;
      }
    }

    &.toast-warning {
      border-left-color: rgba(var(--warning-color), 1);
      color: rgba(var(--warning-color), 1);
      background-image: url("@/svg/warning.svg") !important;

      .toast-progress {
        background-color: transparent;
      }
    }

    &.toast-error {
      border-left-color: rgba(var(--danger-color), 1);
      color: rgba(var(--danger-color), 1);
      background-image: url("@/svg/danger.svg") !important;

      .toast-progress {
        background-color: transparent;
      }
    }
  }

  >div {
    opacity: 1;
    box-shadow: 0px 0px 15px 0px rgba(var(--title-color), 0.2);

    body.rtl & {
      padding-left: 15px;
      padding-right: 50px;
      background-position: right 15px center;
    }

    body.dark & {
      box-shadow: 0px 0px 15px 0px rgba(119, 119, 119, 0.122);
    }

    &:hover {
      box-shadow: 0px 0px 15px 0px rgba(var(--title-color), 0.2);
    }
  }
}

.spinner-border {
  &.ms-2 {
    body.rtl & {
      margin-left: unset !important;
      margin-right: 0.5rem !important;
    }
  }
}

/*=====================
    Typography CSS start
==========================*/
html {
  scroll-behavior: smooth;
}

body {
  font-size: 14px;
  font-weight: 400;
  background-color: rgba(var(--white), 1);
  color: rgba(var(--title-color), 1);
  position: relative;
  font-family: var(--font-family);

  &:not(:has(.home-section)) {
    header {
      background-color: rgba(var(--primary-color), 1) !important;
      position: relative;
      inset: unset;

      &.fixed {
        position: fixed;
        z-index: 9;
        box-shadow: 5px 5px 9px 1px rgba(119, 119, 119, 0.05);
        border: none;
      }

      &.nav-down {
        transform: translateY(-90px);
      }

      &.nav-up {
        transform: translateY(0);
      }
    }
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
}

h6 {
  font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.3;
  font-weight: 400;
}

p {
  font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
  color: rgba(var(--content-color), 1);
  margin-bottom: 0;
}

a {
  color: rgba(var(--primary-color), 1);
  text-decoration: none;
}

ul {
  padding-inline: 0;
  margin-bottom: 0;
}

li {
  list-style: none;
  display: inline-block;
}

.form-select {
  body.dark & {
    --bs-form-select-bg-img: url("../../public/front/images/dropdown-dark.svg");
  }
}

.bg-primary {
  background-color: rgba(var(--primary-color), 1) !important;
}

.swiper {
  z-index: 0;
}

.text-primary-color {
  color: rgba(var(--primary-color), 1);
}

.badge {
  padding: 8px calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 500;
  font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
  border-radius: calc(4px + (6 - 4) * ((100vw - 320px) / (1920 - 320)));

  &-primary {
    background-color: rgba(var(--primary-color), 0.1);
    color: rgba(var(--primary-color), 1);
  }

  &-pending {
    background-color: rgba(var(--warning-color), 0.1);
    color: rgba(var(--warning-color), 1);
  }

  &-debit {
    color: #f33737;
    background-color: rgba(243, 55, 55, 0.102);
  }

  &-credit {
    color: #4caf50;
    background: #4caf501a;
  }

  &-otp {
    color: #c084fc;
    background-color: rgba(192, 132, 252, 0.102);
  }

  &-warning {
    background-color: #ffb900;
    color: rgba(var(--white), 1) !important;
  }

  &-accepted {
    background-color: #199675;
    color: rgba(var(--white), 1) !important;
  }

  &-scheduled {
    background-color: #f39159;
    color: rgba(var(--white), 1) !important;
  }

  &-arrived {
    background-color: #47a1e5;
    color: rgba(var(--white), 1) !important;
  }

  &-completed {
    background-color: #27a644;
    color: rgba(var(--white), 1) !important;
  }

  &-pending {
    background-color: #ffb900;
    color: rgba(var(--white), 1) !important;
  }

  &-cancelled {
    background-color: #f33737;
    color: rgba(var(--white), 1) !important;
  }
}

/*=====================
    animation start
==========================*/

@keyframes circle {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

@keyframes move-img {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/*=====================
    Title start
==========================*/
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: calc(20px + (50 - 20) * ((100vw - 320px) / (1920 - 320)));

  @media (max-width: 991px) {
    flex-wrap: wrap;
  }

  h2 {
    font-size: calc(20px + (42 - 20) * ((100vw - 320px) / (1920 - 320)));
    // width: 40%;
    font-weight: 600;
    text-align: center;

    body.dark & {
      color: rgba(var(--white), 1);
    }

    @media (max-width: 1199px) {
      width: 50%;
    }

    @media (max-width: 991px) {
      width: 100%;
    }
  }

  >div {
    width: 80%;

    @media (max-width: 1199px) {
      width: 50%;
    }

    @media (max-width: 991px) {
      width: 100%;
    }
  }

  p {
    margin-bottom: 0;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    text-align: center;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;

    body.dark & {
      color: rgba(var(--white), 0.6);
    }
  }

  a {
    display: inline-block;
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    margin-top: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320)));

    &:hover {
      i {
        transform: translateX(3px);
      }
    }

    i {
      font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
      transform: translateX(0);
      transition: 0.4s ease;
      display: inline-block;
    }
  }
}

/*=====================
    Button Scss start
==========================*/
.btn {
  padding: calc(11px + (13 - 11) * ((100vw - 320px) / (1920 - 320))) calc(24px + (36 - 24) * ((100vw - 320px) / (1920 - 320)));
  font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
  border: 0;
  line-height: 1.3;
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.1s ease-in-out;
  width: max-content;
  text-transform: unset;
}

.btn-outline {
  border: 1px solid rgba(var(--white), 1);
  color: rgba(var(--white), 1);
  background: transparent;
  transition: all .4s ease-in-out;

  &:hover,
  &:active,
  &:focus {
    border: 1px solid rgba(var(--white), 1);
    color: rgba(var(--primary-color), 1);
    background: rgba(var(--white), 1);
    transition: all .4s ease-in-out;
  }
}

.btn-primary {
  background-color: rgba(var(--primary-color), 1);

  &:hover,
  &:active,
  &:focus {
    background-color: rgba(var(--primary-color), 1) !important;

    body.dark & {
      background-color: rgba(var(--white), 0.1) !important;
      color: rgba(var(--white), 1) !important;
    }
  }

  &:disabled {
    background-color: rgba(var(--primary-color), 0.7);
  }

  body.dark & {
    background-color: #1d202a !important;
    color: rgba(var(--white), 1) !important;
  }
}

.btn-secondary {
  background-color: rgba(var(--primary-color2), 1);
  color: #222222;
}

.btn-light {
  background-color: #f4f4f4;
  border: none;
  color: #777777;

  body.dark & {
    background-color: #1d202a !important;
    color: rgba(var(--white), 1) !important;
  }
}

.gradient-bg-color {
  background-image: linear-gradient(90deg,
      rgba(var(--primary-color), 1) 0%,
      rgba(var(--secondary-color), 1) 100%);
  color: rgba(var(--white), 1);
  cursor: pointer;
  text-transform: unset;
  transition: 0.5s;
  background-size: 200% auto;
  position: relative;

  // &::before {
  //   transition: all 0.1s ease-in-out;
  //   content: "";
  //   position: absolute;
  //   inset: 0;
  //   border-radius: 100px;
  //   padding: 2px;
  //   // background: linear-gradient(
  //   //   90deg,
  //   //   rgba(var(--primary-color), 1) 0%,
  //   //   rgba(var(--secondary-color), 1) 100%
  //   // );
  //   // -webkit-mask: linear-gradient(#fff 0 0) content-box,
  //   //   linear-gradient(#fff 0 0);
  //   // -webkit-mask-composite: xor;
  //   mask-composite: exclude;
  //   background-color: rgba(var(--primary-color), 1);
  // }

  &:hover {
    background-position: right center;
    color: rgba(var(--white), 1);
    text-decoration: none;
  }
}

.gradient-border-color {
  position: relative;
  color: rgba(var(--white), 1);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 2px;
    background: linear-gradient(90deg,
        rgba(var(--primary-color), 1) 0%,
        rgba(var(--secondary-color), 1) 100%);
    -webkit-mask: linear-gradient(rgba(var(--white), 1) 0 0) content-box,
      linear-gradient(rgba(var(--white), 1) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  &:hover {
    background: linear-gradient(90deg,
        rgba(var(--primary-color), 1) 0%,
        rgba(var(--secondary-color), 1) 100%);
    color: rgba(var(--white), 1);
  }
}

/*=====================
    Form start
==========================*/
.select2-container--default .select2-selection--single .select2-selection__rendered {
  body.dark & {
    color: rgba(var(--white), 1) !important;
  }
}

.form-box {
  +.form-box {
    margin-top: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
  }

  &:has(label.error) {
    i {
      transform: unset;
      top: 5px;
    }
  }

  &.form-icon {
    .form-control {
      padding-left: calc(42px + (60 - 42) * ((100vw - 320px) / (1920 - 320)));

      body.rtl & {
        padding-left: unset;
        padding-right: calc(42px + (60 - 42) * ((100vw - 320px) / (1920 - 320)));
      }
    }

    .dropdown {
      .dropdown-toggle {
        padding-left: calc(42px + (50 - 42) * ((100vw - 320px) / (1920 - 320)));

        body.rtl & {
          padding-left: calc(11px + (15 - 11) * ((100vw - 320px) / (1920 - 320)));
          padding-right: calc(42px + (50 - 42) * ((100vw - 320px) / (1920 - 320)));
        }
      }
    }
  }

  &:has(i.right-icon) {
    .form-control {
      padding-right: calc(32px + (60 - 32) * ((100vw - 320px) / (1920 - 320)));

      body.rtl & {
        padding-right: calc(42px + (60 - 42) * ((100vw - 320px) / (1920 - 320)));
        padding-left: calc(42px + (50 - 42) * ((100vw - 320px) / (1920 - 320)));
      }
    }
  }

  .dropdown {
    .dropdown-toggle {
      padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))) calc(11px + (15 - 11) * ((100vw - 320px) / (1920 - 320)));
      border-radius: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
      font-weight: 400;
      color: rgba(var(--title-color), 1);
      font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
      box-shadow: none;
      border: 1px solid transparent;
      width: 100%;
      text-align: unset;
      color: rgba(var(--content-color), 1);
      background-color: rgba(var(--light-gray), 1);
      transition: all 0.2s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &:focus {
        background-color: #f5f5f5;
        border-color: rgba(var(--border-color), 1);
      }

      &::after {
        content: "\ea4e";
        font-family: remixicon;
        font-style: normal;
        margin-left: auto;
        vertical-align: middle;
        border: none;
        display: block;
      }
    }

    .dropdown-menu {
      min-width: auto;
      width: 100%;
      border-color: rgba(var(--border-color), 1);
      box-shadow: 0px 4px 40px 0px rgba(172, 171, 182, 0.102);
      background-color: #f9f9f9;
      padding: 0;

      li {
        display: block;
        width: 100%;

        +li {
          border-top: 1px solid rgba(var(--border-color), 1);
        }

        a {
          padding: 9px 16px;
          color: rgba(var(--title-color), 0.8);
          transition: all 0.2s ease-in-out;

          &:hover {
            color: rgba(var(--title-color), 1);
            background-color: #f5f5f5;
          }

          &.active,
          &:active {
            background-color: rgba(var(--primary-color), 1);
            color: rgba(var(--white), 1);
          }
        }
      }
    }
  }

  input {

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      appearance: none;
      margin: 0;
    }
  }

  i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    padding-inline: calc(9px + (15 - 9) * ((100vw - 320px) / (1920 - 320))) calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
    border-right: 1px solid rgba(var(--border-color), 1);
    font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
    color: #888888;

    body.rtl & {
      left: unset;
      right: 0;
      border-right: unset;
      border-left: 1px solid rgba(var(--border-color), 1);
    }

    &.right-icon {
      left: unset;
      right: 0;
      border: none;

      body.rtl & {
        right: unset;
        left: 0;
      }
    }
  }

  .form-select {
    padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))) calc(11px + (15 - 11) * ((100vw - 320px) / (1920 - 320)));
    border-radius: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    color: rgba(var(--title-color), 1);
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    box-shadow: none;
    border: 1px solid rgba(var(--border-color), 1);
    background-color: rgba(var(--light-gray), 1);
    transition: all 0.2s ease-in-out;

    body.dark & {
      background-color: #1d202a !important;
      border-color: rgba(var(--white), 0.05);
      color: rgba(var(--white), 1) !important;
    }
  }

  .form-control {
    padding: calc(10px + (8 - 10) * ((100vw - 320px) / (1920 - 320))) calc(11px + (15 - 11) * ((100vw - 320px) / (1920 - 320)));
    border-radius: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    color: rgba(var(--title-color), 1);
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    box-shadow: none;
    border: 1px solid rgba(var(--border-color), 1);
    background-color: rgba(var(--light-gray), 1);
    transition: all 0.2s ease-in-out;

    body.dark & {
      background-color: #1d202a !important;
      border-color: rgba(var(--white), 0.1);
      color: rgba(var(--white), 1);
    }

    &-white {
      background-color: rgba(var(--white), 1);
      border-color: rgba(var(--border-color), 1);
    }

    &:focus {
      background-color: #f5f5f5;
      border-color: rgba(var(--border-color), 1);

      body.dark & {
        background-color: #1f1f1f;
      }
    }

    &::placeholder {
      color: rgba(var(--content-color), 0.8);
      font-weight: 400;
    }

    &.white-from-control {
      background-color: rgba(var(--white), 1);

      &:focus {
        background-color: rgba(var(--white), 1);
      }
    }
  }

  .form-label {
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    margin-bottom: calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320)));
    color: rgba(var(--title-color), 1);

    body.dark & {
      color: rgba(var(--white), 1);
    }
  }

  label {
    &.error {
      color: #d7191c;
      font-size: 13px;
      font-weight: 400;
      margin: 4px 0 0px;
      letter-spacing: 0.7px;
      line-height: 1.5;
    }
  }

  .number-mail-box {
    position: relative;

    &:has(.country-code-section[style="display: none;"]) {
      .col-sm-12-full {
        width: 100%;
      }
    }

    &:has(.country-code-section[style="display: block;"],
      .country-code-section[style=""]) {
      .form-control {
        padding-left: calc(82px + (110 - 82) * ((100vw - 320px) / (1920 - 320)));

        body.rtl & {
          padding-right: calc(82px + (110 - 82) * ((100vw - 320px) / (1920 - 320)));
          padding-left: calc(11px + (15 - 11) * ((100vw - 320px) / (1920 - 320)));
        }
      }
    }

    .country-code-section {
      position: absolute;
      top: calc(8px + (12 - 8) * ((100vw - 320px) / (1920 - 320)));

      .select2 {
        width: calc(75px + (100 - 75) * ((100vw - 320px) / (1920 - 320))) !important;
        border-right: 1px solid rgba(var(--border-color), 1);

        body.rtl & {
          border-right: unset;
          border-left: 1px solid rgba(var(--border-color), 1);
        }

        .select2-selection__rendered {
          line-height: 1.3;
          padding-inline: calc(9px + (15 - 9) * ((100vw - 320px) / (1920 - 320)));
          color: rgba(var(--title-color), 1);

          span {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
            font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));

            body.rtl & {
              justify-content: flex-end;
            }
          }
        }

        .select2-selection {
          background-color: transparent;
          height: auto;
          border: none;

          .select2-selection__arrow {
            display: none;
          }
        }
      }

      ~.col-sm-12-full {
        .form-control {
          padding-left: calc(82px + (110 - 82) * ((100vw - 320px) / (1920 - 320)));

          body.rtl & {
            padding-right: calc(82px + (110 - 82) * ((100vw - 320px) / (1920 - 320)));
            padding-left: calc(11px + (15 - 11) * ((100vw - 320px) / (1920 - 320)));
          }
        }
      }
    }
  }

  .select-item {
    .select2 {
      .select2-selection {
        padding: calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320))) calc(11px + (15 - 11) * ((100vw - 320px) / (1920 - 320)));
        border-radius: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 500;
        color: rgba(var(--title-color), 1);
        font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
        box-shadow: none;
        border: 1px solid rgba(var(--border-color), 1);
        background-color: rgba(var(--white), 1);
        transition: none;
        height: auto;
        body.dark & {
          color: white;
          background-color: rgb(55 55 55);
          border-color: rgba(255, 255, 255, 0.153);
        }
        &:has(span .selected-item) {
          padding-block: 10px;
        }

        .select2-selection__rendered {
          padding-left: 0;
        }

        .select2-selection__arrow {
          top: 50%;
          transform: translateY(-50%);
          right: 14px;
          height: auto;
          line-height: 1;

          b {
            border: none;
            margin: 0;
            inset: unset;
            height: auto;
            width: auto;
            position: relative;

            &::before {
              font-weight: 100;
              content: "\ea4e";
              @include icon;
            }
          }
        }

        .selected-item {
          display: flex;
          align-items: center;
          gap: 10px;

          img {
            width: 40px;
            border-radius: 100%;
            height: 40px;
            object-fit: contain;
            background-color: #fafafa;
          }

          .detail {
            width: calc(100% - 40px - 10px);

            h6 {
              font-size: 16px;
              font-weight: 500;
              color: rgba(var(--title-color), 1);
              body.dark & {
                color: white;
              }
            }

            p {
              font-size: 14px;
              letter-spacing: 0.3px;
              line-height: 1.3;
              color: rgba(var(--content-color), 1);
            }
          }
        }
      }
    }
  }
}

.select2-container {
  .select2-dropdown {
    border-color: rgba(var(--border-color), 1);
    background-color: rgba(var(--white), 1);
    body.dark & {
      background-color: rgb(55, 55, 55);
      border-color: rgba(255, 255, 255, 0.137);
    }

    .select2-search {
      .select2-search__field {
        border-color: rgba(var(--border-color), 1);
        outline: 0;
        background-color: rgba(var(--light-gray), 1);
          body.dark & {
      background-color: rgba(var(--primary-color), 1);
      border-color: rgba(255, 255, 255, 0.137);
    }
      }
    }

    .select2-results {
      .select2-results__options {
        &::-webkit-scrollbar {
          width: 5px;
          height: 0;
        }

        &::-webkit-scrollbar-track {
          background: rgba(var(--light-gray), 1);
          border-radius: 100px;
        }

        &::-webkit-scrollbar-thumb {
          background: rgba(var(--primary-color), 1);
          border-radius: 100px;
        }

        .select2-results__option {
          width: 100%;

          body.rtl & {
            text-align: right;
          }

          .selected-item {
            display: flex;
            align-items: center;
            gap: 10px;

            img {
              border-radius: 100%;
              width: 40px;
              height: 40px;
              object-fit: contain;
              background-color: #fafafa;
            }

            .detail {
              width: calc(100% - 40px - 10px);

              h6{
                body.dark & {
                  color: white;
                }
              }
              p {
                font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
                color: rgba(var(--content-color), 1);
              }
            }
          }

          &[aria-selected="true"] {
            background-color: rgba(var(--light-gray), 1);
            body.dark & {
              background-color: rgba(var(--primary-color), 1);
              color: white;
            }
          }

          &.select2-results__option--highlighted {
            background-color: rgba(var(--primary-color), 1);

            .selected-item {
              .detail {
                p {
                  color: rgba(var(--white), 0.8);
                }
              }
            }
          }
        }
      }
    }
  }
}

/*=====================
    Form end
==========================*/

/*=====================
    Modal start
==========================*/
.theme-modal {
  .modal-dialog {
    &.custom-width {
      @media (min-width: 576px) {
        max-width: 550px;
      }
    }

    .modal-content {
      border: none;
      border-radius: 10px;
      box-shadow: 0px 4px 40px 0px rgba(172, 171, 182, 0.102);
      background-color: rgba(var(--white), 1);
      padding: 0;

      body.dark & {
        box-shadow: 0px 4px 12px 0px rgba(172, 171, 182, 0.102);
        background-color: #1d202a !important;
      }

      .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
        border-bottom: 4px solid #f4f4f4;

        body.dark & {
          border-color: rgba(var(--white), 0.1);
        }

        .modal-title {
          font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
          line-height: 1.3;
          font-weight: 600;
          color: rgba(var(--title-color), 1);

          body.dark & {
            color: rgba(var(--white), 1);
          }
        }

        .btn-close {
          width: calc(26px + (30 - 26) * ((100vw - 320px) / (1920 - 320)));
          height: calc(26px + (30 - 26) * ((100vw - 320px) / (1920 - 320)));
          box-shadow: none;
          border-radius: 100%;
          background-color: rgba(var(--border-color), 1);
          background-image: none;
          display: flex;
          align-items: center;
          color: #777777;
          opacity: 1;
          margin: 0;
          justify-content: center;
          padding: 0;

          i {
            line-height: 1;
            font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
          }
        }
      }

      .modal-body {
        padding: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));

        .number-mail-box {
          position: relative;

          .form-control {
            padding-left: calc(82px + (110 - 82) * ((100vw - 320px) / (1920 - 320)));

            body.rtl & {
              padding-right: calc(82px + (110 - 82) * ((100vw - 320px) / (1920 - 320)));
              padding-left: calc(11px + (15 - 11) * ((100vw - 320px) / (1920 - 320)));
            }
          }
        }
      }

      .modal-footer {
        padding: 0 calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320))) calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
        border: none;
        border-radius: 0;
        display: flex;
        flex-wrap: nowrap;
        gap: calc(10px + (30 - 10) * ((100vw - 320px) / (1920 - 320)));

        >* {
          margin: 0;
        }

        .btn {
          width: 100%;

          &.cancel-btn {
            background-color: #f4f4f4;
            color: #777777;
            border: none;

            body.dark & {
              color: #ddd;
              background-color: rgba(var(--primary-color), 1) !important;
            }
          }

          &.btn-primary {
            body.dark & {
              color: #ddd;
              background-color: rgba(var(--primary-color), 1) !important;
            }
          }
        }
      }
    }
  }

  &.vehicle-detail-modal {
    .vehicles-image {
      background-color: rgba(var(--light-gray), 1);
      border: 1px solid rgba(var(--border-color), 1);
      border-radius: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
      padding: calc(12px + (18 - 12) * ((100vw - 320px) / (1920 - 320)));

      body.dark & {
        background-color: rgba(var(--primary-color), 1);
        border-color: rgba(255, 255, 255, 0.233);

      }

      img {
        object-fit: contain;
        aspect-ratio: 11/4;
      }
    }

    .vehicles-name {
      margin-top: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      body.dark & {
        color: white;
      }
      .price {
        font-weight: 600;
        margin-left: auto;
        color: rgba(var(--primary-color), 1);
      }
    }

    .vehicles-list {
      display: grid;
      gap: 3px;
      border-top: 1px solid rgba(var(--border-color), 1);
      padding-top: 8px;
      margin-top: 8px;
  body.dark & {
        border-color: rgba(255, 255, 255, 0.192);
      }
      li {
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
        display: flex;
        gap: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
        flex-wrap: nowrap;
        color: rgba(var(--content-color), 1);

        >span {
          color: rgba(var(--title-color), 0.8);
          margin-left: auto;
          white-space: nowrap;
          font-weight: 500;
            body.dark & {
            color:rgba(255, 255, 255, 0.719);
            }
        }

        .danger {
          color: rgba(var(--danger-color), 1);
        }

        &.total-box {
          border-top: 1px dashed rgba(var(--border-color), 1);
          padding-top: 3px;
          margin-top: 3px;
          font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 500;
          color: rgba(var(--title-color), 1);
          body.dark & {
            border-color: rgba(255, 255, 255, 0.308);
            color:white;
          }

          >span {
            font-weight: 600;
            color: rgba(var(--primary-color), 1);
            body.dark & {
            color:white;
            }
          }
        }
      }
    }

    .waiting-text {
      border-top: 1px solid rgba(var(--border-color), 1);
      padding-top: 8px;
      margin-top: 8px;
      font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
      color: rgba(var(--title-color), 1);
      body.dark & {
            border-color: rgba(255, 255, 255, 0.308);
            color:white;
          }

      span {
        color: rgba(var(--danger-color), 1);
        font-weight: 700;
      }
    }

    .cancel-text {
      color: rgba(var(--danger-color), 1);
      font-weight: 500;
      margin-top: calc(5px + (9 - 5) * ((100vw - 320px) / (1920 - 320)));
      font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    }
  }

  .modal-footer {
    margin-top: 22px !important;
  }
}

.confirmation-modal {
  .modal-dialog {
    .modal-content {
      .modal-body {
        &.confirmation-data {
          .main-img {
            width: calc(56px + (80 - 56) * ((100vw - 320px) / (1920 - 320)));
            height: calc(56px + (80 - 56) * ((100vw - 320px) / (1920 - 320)));
            background-color: rgba(var(--primary-color), 0.1);
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-inline: auto;

            .delete-icon {
              width: calc(40px + (60 - 40) * ((100vw - 320px) / (1920 - 320)));
              height: calc(40px + (60 - 40) * ((100vw - 320px) / (1920 - 320)));
              background-color: rgba(var(--primary-color), 0.1);
              border-radius: 100%;
              display: flex;
              align-items: center;
              justify-content: center;

              body.dark & {
                background-color: rgba(var(--white), 0.1);
              }

              i {
                color: rgba(var(--primary-color), 1);
                font-size: calc(20px + (25 - 20) * ((100vw - 320px) / (1920 - 320)));
                font-weight: 600;

                body.dark & {
                  color: rgba(var(--white), 1);
                }
              }
            }
          }

          h4 {
            text-align: center;
            margin-top: calc(11px + (20 - 11) * ((100vw - 320px) / (1920 - 320)));

            body.dark & {
              color: rgba(var(--white), 1);
            }
          }

          p {
            text-align: center;
            margin-block: calc(2px + (5 - 2) * ((100vw - 320px) / (1920 - 320))) 0;
          }
        }

        .modal-title {
          line-height: 1.3;
          margin-bottom: 0;
        }

        p {
          font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
        }

        .alert {
          border: none;
          margin: 0;
          box-shadow: none;
          font-size: 16px;
          width: 100%;
          border-radius: 8px;
          line-height: 1.4;
          padding: 15px;
        }
      }

      .modal-footer {
        margin-top: calc(14px + (26 - 14) * ((100vw - 320px) / (1920 - 320)));

        >* {
          width: 100%;
        }

        form {
          padding: 0;
          border: none;
          border-radius: 0;
          display: flex;
          flex-wrap: nowrap;
          gap: calc(10px + (30 - 10) * ((100vw - 320px) / (1920 - 320)));
        }

        .btn {
          width: 100%;
        }
      }
    }
  }
}

.book-ride-modal {
  .modal-content {
    .modal-body {
      .ride-success-box {
        text-align: center;

        img {
          width: 220px;
          height: 220px;
        }

        p {
          margin-top: 15px;
          font-size: 18px;
          font-weight: 400;
          color: rgba(var(--content-color), 1);
        }
      }
    }
  }
}

.find-driver-modal {
  .cancel-ride-box {
    .set-timer {
      width: 200px;
      height: 200px;
      border-radius: 100%;
      font-size: 40px;
      font-weight: 600;
      color: rgba(var(--primary-color), 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-inline: auto;

      span {
        letter-spacing: 3.4px;
      }
    }
  }
}

/*=====================
    Modal end
==========================*/

/*=====================
    Header start
==========================*/
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  padding: 0;
  z-index: 1;
  transition: all 0.25s ease-in-out;

  .custom-container {
    padding: 0 calc(50px + (100 - 50) * ((100vw - 1200px) / (1920 - 1200)));
    margin: unset !important;
    max-width: unset !important;

    @media (max-width: "1199px") {
      padding: 0 calc(20px + (100 - 20) * ((100vw - 320px) / (1200 - 320)));
      margin: unset !important;
      max-width: unset !important;
    }
  }

  &.fixed {
    position: fixed;
    z-index: 9;
    background-color: rgba(var(--primary-color), 1);
  }

  &.nav-down {
    transform: translateY(-90px);

    ~.create-ride-section {
      .left-map-box {
        position: sticky;
        top: 20px;
      }
    }
  }

  &.nav-up {
    transform: translateY(0);

    ~.create-ride-section {
      .left-map-box {
        position: sticky;
        top: 110px;
      }
    }
  }

  .top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: calc(10px + (19 - 10) * ((100vw - 320px) / (1920 - 320)));

    .header-wrapper {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: calc(0px + (50 - 0) * ((100vw - 1199.98px) / (1920 - 1199.98)));

      .header-left {
        display: flex;
        align-items: center;
        gap: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320)));

        &:has(.logo-box:empty) {
          @media (min-width: 1199px) {
            display: none;
          }
        }

        .logo-box {
          img {
            display: block;
            width: calc(95px + (142 - 95) * ((100vw - 320px) / (1920 - 320)));
            height: auto;
            object-fit: contain;

            &.light-logo {
              display: block;
            }

            &.dark-logo {
              display: none;
            }

            body.dark & {
              &.light-logo {
                display: none;
              }

              &.dark-logo {
                display: block;
              }
            }
          }
        }

        .navbar-toggler {
          padding: 0;
          color: rgba(var(--white), 1);
          transition: all 0.3s ease-in-out;
          width: calc(28px + (30 - 28) * ((100vw - 320px) / (1920 - 320)));
          height: calc(28px + (30 - 28) * ((100vw - 320px) / (1920 - 320)));
          border: 1px solid rgba(238, 238, 238, 0.1);
          border-radius: 5px;
          display: none;
          align-items: center;
          justify-content: center;

          &:focus {
            box-shadow: none;
          }

          @media (max-width: 1199px) {
            display: flex;
          }

          i {
            font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
            color: rgba(var(--white), 1);
            line-height: 1;
          }
        }
      }

      .header-middle {
        &.show {
          transform: translateX(0);
        }

        .menu-title {
          display: none;
        }

        @media (max-width: 1199px) {
          position: fixed;
          top: 0;
          left: 0;
          width: 300px;
          height: 100vh;
          background-color: rgba(var(--white), 1);
          padding: 15px;
          z-index: 1;
          flex-basis: unset;
          flex-grow: unset;
          transform: translateX(-100%);
          transition: all 0.3s ease-in-out;

          .menu-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 11px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(var(--border-color), 1);

            h3 {
              font-size: 20px;
              color: rgba(var(--title-color), 1);
              font-weight: 500;
            }

            i {
              font-size: 22px;
              color: rgba(var(--title-color), 1);
            }


          }

          .navbar-nav {
            gap: 12px;
            flex-direction: column;
            padding: 0;

            a {
              color: rgba(var(--title-color), 0.7);

              &:hover {
                color: rgba(var(--primary-color), 1);
              }
            }
          }
        }
      }
    }

    .navbar-nav {
      gap: calc(10px + (30 - 10) * ((100vw - 320px) / (1920 - 320)));
      flex-direction: row;

      @media (max-width: 1399px) and (min-width: 1199px) {
        gap: 15px;
      }

      .nav-item {
        .nav-link {
          font-size: 18px;
          font-weight: 400;
          padding: 0;
          color: rgba(var(--white), 0.6);
          transition: all .4s ease-in-out;


          body.dark & {
            color: rgba(var(--white), 0.6);
          }

          &.active,
          &:hover {
            color: rgba(var(--white), 1);
            font-weight: 500;
            transition: all .4s ease-in-out;

            body.dark & {
              color: rgba(var(--white), 1);
            }
          }
        }
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: calc(7px + (20 - 7) * ((100vw - 320px) / (1920 - 320)));

      .language-dropdown {
        .language-btn {
          padding: 0;
          display: flex;
          align-items: center;
          gap: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
          border: 0;
          color: rgba(var(--white), 1);

          body.dark & {
            color: rgba(var(--white), 1);
          }

          &::after {
            content: "\ea4e";
            font-family: remixicon;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            position: relative;
          }

          img {
            width: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320)));
            height: auto;
            object-fit: contain;
          }

          span {
            font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));

            @media (max-width: 575px) {
              display: none;
            }
          }
        }

        .dropdown-menu {
          min-width: 90px;
          border: 1px solid rgba(var(--border-color), 1);
          margin-top: 10px !important;
          padding: 12px 16px;

          @media (max-width: 575px) {
            margin: 30px auto 0 !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
          }

          body.dark & {
            background-color: #1f1f1f;
            border: 1px solid rgb(238 238 238 / 10%);
          }

          li {
            width: 100%;

            .dropdown-item {
              padding: 4px 0;
              font-size: 16px;
              font-weight: 500;
              display: flex;
              background-color: transparent;
              color: rgba(var(--title-color), 1);
              align-items: center;
              gap: 7px;
              body.dark & {
                color: rgba(var(--white), 1);
              }
              img {
                width: 25px;
              }

              span {
                line-height: 1;
              }
            }
          }
        }
      }

      .dark-mode-aligns {
        background-color: rgba(var(--white), 0.1);
        border-radius: 10px;
        padding: calc(4px + (10 - 4) * ((100vw - 320px) / (1920 - 320))) calc(6px + (15 - 6) * ((100vw - 320px) / (1920 - 320)));
        display: flex;
        justify-content: center;
        align-items: center;

        .dark-light-mode {
          padding: 0;
          border-radius: 0;
          color: rgba(var(--white), 1);

          i {
            font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
          }

          .dark-mode {
            display: none;
          }

          body.dark & {
            .dark-mode {
              display: block;
            }

            .light-mode {
              display: none;
            }
          }
        }
      }

      .ticket-btn {
        padding: calc(8px + (11 - 8) * ((100vw - 320px) / (1920 - 320))) calc(15px + (25 - 15) * ((100vw - 320px) / (1920 - 320)));
        text-transform: uppercase;
        border-radius: 10px;
        color: rgba(var(--primary-color), 1);

        body.dark & {
          background-color: rgba(var(--white), 1);
          color: rgba(var(--primary-color), 1);

          &:hover {
            background-color: rgba(var(--white), 1) !important;
            color: rgba(var(--primary-color), 1) !important;
          }
        }

        @media (max-width: 575.98px) {
          width: calc(32px + 15 * (100vw - 320px) / 1600);
          height: calc(32px + 15 * (100vw - 320px) / 1600);
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          background-color: rgba(var(--white), 0.1);
          color: rgba(var(--white), 1);
        }
      }
    }
  }
}

@media (max-width: 1199px) {
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
    opacity: 0;
    visibility: hidden;

    &.show {
      opacity: 1;
      visibility: visible;
    }
  }
}

/*=====================
    Home section start
==========================*/
.home-section {
  background-image: url("../../public/front/images/home-bg.jpg");
  text-align: center;
  color: #fff;
  padding-top: calc(80px + (190 - 80) * ((100vw - 320px) / (1920 - 320)));
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-bottom: 0;
  background-attachment: fixed;
  overflow: hidden;
  height: calc(100vh + calc(10px + (200 - 10) * ((100vw - 575px) / (1920 - 575))));
  position: relative;
  background-color: rgba(var(--primary-color), 1);

  @media (max-width:991.98px) {
    height: unset;
  }

  .gradient-bg {
    position: relative;
    height: 100%;

    &::before {
      content: '';
      content: "";
      position: absolute;
      // bottom: -50%;
      right: 25%;
      height: 80%;
      width: 50%;
      border-radius: 100%;
      background-color: #9CA3AF;
      filter: blur(calc(100px + 200 * (100vw - 320px) / 1600));
    }
  }

  @media (max-width: 575px) {
    height: auto;
  }

  .home-contain {

    @keyframes glowPulseafter {
      0% {
        opacity: 0.2;
        transform: translateX(-10%);
      }

      25% {
        opacity: 0.4;
        transform: translateX(-50%);
      }

      50% {
        opacity: 0.2;
        transform: translateY(50%);
      }

      75% {
        opacity: 0.4;
        transform: translateY(150%);
      }

      100% {
        opacity: 0.2;
        transform: translateX(150%);
      }
    }

    @keyframes glowPulsebefore {
      0% {
        opacity: 0.2;
        transform: translateX(10%);
      }

      25% {
        opacity: 0.4;
        transform: translateX(50%);
      }

      50% {
        opacity: 0.2;
        transform: translateY(-50%);
      }

      75% {
        opacity: 0.4;
        transform: translateY(-150%);
      }

      100% {
        opacity: 0.2;
        transform: translateX(-150%);
      }
    }

    .content-card {
      background-color: #222;
      position: relative;
      overflow: visible;
      padding: calc(20px + (70 - 20) * ((100vw - 320px) / (1920 - 320))) calc(20px + (50 - 20) * ((100vw - 320px) / (1920 - 320)));
      border-radius: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));

      &::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        top: -170px;
        right: 165px;
        background-color: rgba(var(--primary-color2), 0.4);
        border-radius: 100%;
        filter: blur(100px);
        animation: glowPulseafter 5.5s ease-in-out infinite;
      }

      &::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        bottom: -226px;
        right: -210px;
        background-color: rgb(33 150 243 / 50%);
        border-radius: 100%;
        filter: blur(100px);
        animation: glowPulsebefore 5.5s ease-in-out infinite;
      }

      body.dark & {
        background-color: rgba(var(--primary-color), 1);
      }

      .card-body {
        padding: 0;
        text-align: start;

        >.content-wrapper {
          display: flex;
          gap: 6px;
          flex-direction: column;
          justify-content: start;
          align-items: start;

          >a {
            background: linear-gradient(90deg,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0) 100%);
            padding: 6px 40px 6px 20px;
            border-radius: 30px;
            color: rgba(var(--white), 1);
            margin-bottom: 6px !important;
          }

          >h1 {
            font-size: calc(24px + (48 - 24) * ((100vw - 320px) / (1920 - 320)));
            color: rgba(var(--white), 1);
            margin-block: calc(4px + (16 - 4) * ((100vw - 320px) / (1920 - 320))) !important;

            body.dark & {
              color: rgba(var(--white), 1);
            }
          }

          >.button-group {
            display: flex;
            flex-direction: row;
            gap: calc(6px + (30 - 6) * ((100vw - 320px) / (1920 - 320)));
            margin-top: calc(10px + (40 - 10) * ((100vw - 320px) / (1920 - 320)));

            .btn-primary {
              border: 1px solid #ffffff25;
            }
          }
        }

        .social-content {
          margin-top: calc(20px + (100 - 20) * ((100vw - 320px) / (1920 - 320)));

          .content-wrapper {
            display: flex;
            justify-content: start;
            align-items: center;
            gap: calc(6px + (20 - 6) * ((100vw - 320px) / (1920 - 320)));
            margin-bottom: 10px;

            @media (max-width: "576px") {
              flex-direction: column;
            }

            >ul {
              display: flex;
              justify-content: start;
              align-items: center;
              gap: 0;

              li {
                a {
                  height: 36px;
                  width: 142px;
                  display: flex;

                  body.dark & {
                    color: rgba(var(--white), 1);
                  }

                  img {
                    height: 100%;
                    object-fit: cover;
                    width: 100%;
                    border-radius: 6px;
                  }
                }

                +li {
                  margin-left: -16px;
                }
              }
            }

            h3 {
              font-size: 30px;
              color: rgba(var(--white), 1);
              font-weight: 400;

              body.dark & {
                color: rgba(var(--white), 1);
              }
            }
          }

          p {
            color: rgba(var(--white), 0.6);
            max-width: 460px;

            body.dark & {
              color: rgba(var(--white), 1);
            }
          }

          .store-group {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: calc(10px + (30 - 10) * ((100vw - 320px) / (1920 - 320)));
            margin-top: calc(10px + (40 - 10) * ((100vw - 320px) / (1920 - 320)));

            @media (max-width: "576px") {
              flex-direction: column;
            }
          }
        }
      }
    }

    .image-card {
      // background-image: url(/public/front/images/home/bg.png);
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
      border-radius: 20px;
      background-size: cover;
      border: none;

      .card-body {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding: 0;
      }

      .image-wrapper {
        text-align: center;

        img {
          height: calc(400px + (685 - 400) * ((100vw - 992px) / (1920 - 992)));
        }
      }
    }
  }

  .home-contain {
    padding: 0 calc(12px + (427 - 12) * ((100vw - 320px) / (1920 - 320)));
    margin-inline: auto;
    position: fixed;
    top: calc(130px + (190 - 130) * ((100vw - 992px) / (1920 - 992)));
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 85%;

    @media (max-width: 1399px) {
      width: 100%;
    }

    @media (max-width: 991px) {
      position: relative;
      inset: unset;
      padding: 0;
      transform: none;
    }

    @media (max-width: 575.98px) {
      opacity: 1 !important;
    }

    h1 {
      font-weight: 600;
      font-size: calc(30px + (50 - 30) * ((100vw - 992px) / (1920 - 992)));
      line-height: 1.4;
      margin-block: 0;
      margin-inline: auto;
    }

    p {
      margin-inline: auto;
      font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
      font-weight: 400;
      line-height: 1.5;
      color: rgba(var(--white), 0.7);
      margin-bottom: calc(20px + (40 - 20) * ((100vw - 320px) / (1920 - 320)));
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
    }

    .home-group {
      margin-bottom: calc(30px + (50 - 30) * ((100vw - 320px) / (1920 - 320)));
      gap: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
      display: flex;
      align-items: center;
      justify-content: center;

      .btn-light {
        color: rgba(var(--primary-color), 1);
      }
    }
  }

  .phone-image {
    margin-inline: auto;
    position: relative;
    margin: calc(20px + (337 - 20) * ((100vw - 320px) / (1920 - 320))) calc(16px + (57 - 16) * ((100vw - 320px) / (1920 - 320)));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 0px;

    @media (max-width:1199.98px) {
      display: flex !important;
    }

    .position-placeholder {
      @media (max-width:1199.98px) {
        display: none;
      }
    }

    body.rtl & {
      direction: ltr;
    }

    // @media (max-width: 1920px) and (min-width: 1400px) {
    //   margin-top: calc(355px + (377 - 355) * ((100vw - 1399px) / (1920 - 1399)));
    // }

    // @media (max-width: 1400px) and (min-width: 992px) {
    //   margin-top: calc(260px + (355 - 260) * ((100vw - 991px) / (1401 - 991)));
    // }

    // @media (max-width: 1133px) {
    //   margin-top: 290px;
    // }

    // @media (max-width: 991px) {
    //   margin-top: calc(55px + (78 - 55) * ((100vw - 320px) / (992 - 320)));
    // }

    // @media (max-width: 991px) {
    //   width: 72%;

    // img {
    //   animation: move-img 6s ease infinite;
    // }

    .phone-2 {
      img {
        animation-delay: inherit;
      }
    }

    .phone-1,
    .phone-2,
    .phone-3 {
      margin-top: -50px;

      @media (max-width: 575px) {
        margin-top: -80px;
      }
    }
  }

  @media (max-width: 575px) {
    width: 100%;
  }

  .phone-1 {
    z-index: -1;

    img {
      width: calc(156px + (400 - 156) * ((100vw - 320px) / (1920 - 320))) !important;
      transform: translate(30px, 80px);

      @media (max-width:1199.98px) {
        transform: translate(30px, 250px) !important;
      }

      @media (max-width:991.98px) {
        transform: translate(30px, 100px) !important;
      }
    }
  }

  .phone-3 {

    z-index: -1;

    img {
      width: calc(151px + (400 - 151) * ((100vw - 320px) / (1920 - 320))) !important;
      transform: translate(-30px, 80px);

      @media (max-width:1199.98px) {
        transform: translate(-30px, 250px) !important;
      }

      @media (max-width:991.98px) {
        transform: translate(-30px, 100px) !important;
      }
    }
  }
}

/*=====================
    Experience section start
==========================*/
// .experience-section {
//   .experience-box {
//     text-align: center;
//     padding: calc(15px + (50 - 15) * ((100vw - 320px) / (1920 - 320)))
//       calc(10px + (19 - 10) * ((100vw - 320px) / (1920 - 320)));
//     -webkit-font-smoothing: antialiased;
//     background-color: rgba(250, 250, 250, 0.77);
//     border: 1px solid rgba(var(--border-color), 0.8);
//     border-radius: calc(8px + (12 - 8) * ((100vw - 320px) / (1920 - 320)));

//     body.dark & {
//       background-color: #222222;
//     }

//     .experience-img {
//       width: calc(50px + (80 - 50) * ((100vw - 320px) / (1920 - 320)));
//       height: calc(50px + (80 - 50) * ((100vw - 320px) / (1920 - 320)));
//       border-radius: 100%;
//       padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
//       margin-inline: auto;
//       display: flex;
//       align-items: center;
//       justify-content: center;

//       svg {
//         stroke-width: 1.6;
//         width: 100%;
//         height: 100%;
//       }
//     }

//     .experience-content {
//       margin-top: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));

//       h4 {
//         font-weight: 500;
//         font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
//         margin: 0;
//       }

//       p {
//         margin-block: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320))) 0;
//         font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
//       }

//       h3 {
//         margin-top: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
//         font-weight: 500;
//         font-size: calc(22px + (30 - 22) * ((100vw - 320px) / (1920 - 320)));
//       }
//     }

//     &.ride-box {
//       .experience-img {
//         background-color: rgba(var(--primary-color), 0.1);

//         svg {
//           stroke: rgba(var(--primary-color), 1);
//         }
//       }

//       .experience-content {
//         h3 {
//           color: rgba(var(--primary-color), 1);
//         }
//       }
//     }

//     &.user-box {
//       .experience-img {
//         background-color: rgba(var(--warning-color), 0.1);

//         svg {
//           stroke: rgba(var(--warning-color), 1);
//         }
//       }

//       .experience-content {
//         h3 {
//           color: rgba(var(--warning-color), 1);
//         }
//       }
//     }

//     &.driver-box {
//       .experience-img {
//         background-color: rgba(var(--danger-color), 0.1);

//         svg {
//           stroke: rgba(var(--danger-color), 1);
//         }
//       }

//       .experience-content {
//         h3 {
//           color: rgba(var(--danger-color), 1);
//         }
//       }
//     }

//     &.rating-box {
//       .experience-img {
//         background-color: rgba(var(--info-color), 0.1);

//         svg {
//           stroke: rgba(var(--info-color), 1);
//         }
//       }

//       .experience-content {
//         h3 {
//           color: rgba(var(--info-color), 1);
//         }
//       }
//     }
//   }
// }
.counter-section {
  padding-top: 30px;

  .marquee-wrapper {
    overflow: hidden;
  }

  ul {
    &.marquee-line {
      display: flex;
      justify-content: start;
      align-items: center;
      animation: slide 30s infinite linear;
      flex-wrap: nowrap;
      width: max-content;

      li {
        color: #F4F5F6;
        font-size: calc(50px + (150 - 50) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 800;
        text-transform: uppercase;
        text-wrap: nowrap;
        padding-right: 50px;

        body.dark & {
          color: #1d202a;
        }

        &.outline-line {
          color: white !important;
          -webkit-text-stroke: calc(2px + (3 - 2) * ((100vw - 320px) / (1920 - 320))) #F4F5F6 !important;

          body.dark & {
            -webkit-text-stroke: calc(2px + (3 - 2) * ((100vw - 320px) / (1920 - 320))) #1d202a !important;
            color: transparent !important;
          }
        }
      }
    }
  }

  .counters {
    padding: calc(0px + (30 - 0) * ((100vw - 320px) / (1920 - 320))) 0;

    .gradient {
      position: relative;
      height: 100%;
      overflow: visible;

      &::before {
        content: "";
        background: radial-gradient(50% 50% at 50% 50%, rgba(var(--primary-color), 0.522) 0%, rgba(var(--primary-color), 0) 100%);
        height: 650px;
        width: 100%;
        position: absolute;
        border-radius: 100%;
        -webkit-filter: blur(120px);
        top: 0;
        left: 0;
        filter: blur(120px);
        z-index: 0;
        // background: radial-gradient(50% 50% at 50% 50%, #9CA3AF 0%, rgba(156, 163, 175, 0) 100%);

      }

      .phone-2-target {
        position: relative;
        width: 100%;
        height: 100%;
        padding-top: 80px;
        align-items: flex-start;
        justify-content: center;
        display: flex;
        z-index: 0;

        @media (max-width:1200.98px) {
          padding-top: calc(30px + (0 - 30) * ((100vw - 991.98px) / (1199.98 - 991.98)));
        }

        @media (max-width:991.98px) {
          margin-bottom: -65%;
        }

        .target-phone-img {
          max-height: 70vh;
          width: auto;
          object-fit: contain;
        }
      }
    }



    .counter-wrapper {
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: center;
      background-color: #fff !important;
      border-radius: calc(12px + (35 - 12) * ((100vw - 320px) / (1920 - 320)));
      padding: calc(20px + (40 - 20) * ((100vw - 320px) / (1920 - 320)));
      margin-top: calc(20px + (100 - 20) * ((100vw - 320px) / (1920 - 320)));
      z-index: 1;
      position: relative;
      box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
      animation: move-img 6s ease infinite;

      body.dark & {
        background-color: #1d202a !important;
      }

      &:first-child {
        @media (min-width:1399.98px) {
          margin-top: 0;
        }
      }

      @media (max-width: 575.98px) {
        box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
        justify-content: center;
        align-items: center;
      }

      .svg-wrapper {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: calc(10px + (30 - 10) * ((100vw - 320px) / (1920 - 320)));
        margin-bottom: calc(10px + (30 - 10) * ((100vw - 320px) / (1920 - 320)));

        @media (max-width: 575.98px) {
          flex-direction: column;
        }

        i {
          height: calc(45px + (60 - 45) * ((100vw - 320px) / (1920 - 320)));
          width: calc(45px + (60 - 45) * ((100vw - 320px) / (1920 - 320)));
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #0b0f19;
          color: rgba(var(--white), 1);
          border-radius: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
          font-size: 28px;

          body.dark & {
            background-color: rgba(var(--primary-color), 1) !important;
          }

        }

        svg {
          height: calc(40px + (60 - 40) * ((100vw - 320px) / (1920 - 320)));
          width: calc(40px + (60 - 40) * ((100vw - 320px) / (1920 - 320)));
          padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
          background-color: #0b0f19;
          fill: rgba(var(--white), 1);
          border-radius: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
        }
      }

      h3 {
        font-size: calc(16px + (26 - 16) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 700;

        body.dark & {
          color: rgba(var(--white), 1);
        }
      }

      h4 {
        font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 800;
        margin-bottom: calc(6px + (12 - 6) * ((100vw - 320px) / (1920 - 320)));
        color: #0b0f19;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;

        body.dark & {
          color: rgba(var(--white), 1);
        }
      }

      p {
        font-size: calc(13px + (15 - 13) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 500;
        line-height: 1.6;
        color: #9CA3AF;
        margin: 0;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;

        @media (max-width: 575.98px) {
          text-align: center;
        }
      }
    }
  }
}

/*=====================
    Choice section start
==========================*/

.sass-team-section {
  background: #F4F5F6;
body.dark & {
  background-color: rgba(var(--primary-color), 1);
}
}

// Phone Image
.phone-image {
  img {
    // max-height: 75vh !important;
    width: auto !important;
    object-fit: contain;
    margin: 0 auto;
    display: block;
  }
}

// Feature Accordion
.feature-accordion {
  display: flex;
  flex-direction: column;
  gap: calc(10px + (25 - 10) * ((100vw - 320px) / (1920 - 320)));

  .accordion-item-feature {
    background: #ffffff;
    border-radius: calc(10px + (16 - 10) * ((100vw - 320px) / (1920 - 320)));
    padding: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 10px 10px 70px -15px #0307121A;

    body.dark & {
      background: #1d202a;
    }

    &.active {
      .accordion-icon {
        background: #000000;

        body.dark & {
          background: rgba(var(--primary-color), 1);
        }


        i {
          color: #ffffff;
        }
      }

      .accordion-header-feature {
        h4 {
          color: #000000;

          body.dark & {
            color: rgba(var(--white), 1);
          }

        }
      }

      .accordion-body-feature {
        max-height: 200px;
        padding-top: calc(0px + (12 - 0) * ((100vw - 320px) / (1920 - 320)));
      }
    }

    .accordion-header-feature {
      display: flex;
      align-items: center;
      gap: 16px;

      h4 {
        font-size: 16px;
        font-weight: 600;
        color: #6c757d;
        margin: 0;
        transition: color 0.3s ease;
      }
    }

    .accordion-icon {
      width: 48px;
      height: 48px;
      background: #00000012;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      body.dark & {
        background: rgba(var(--primary-color), 1);
      }


      i {
        font-size: 24px;
        color: #000000;

        body.dark & {
          color: rgba(var(--white), 1);
        }

      }
    }

    .accordion-body-feature {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      padding-left: 64px;

      p {
        font-size: 14px;
        color: #6c757d;
        line-height: 1.6;
        margin: 0;
      }
    }
  }
}

// Feature Image
.feature-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  @media (max-width:1399.98px) {
    margin-bottom: calc(20px + (40 - 20) * ((100vw - 320px) / (1399.98 - 320)));
  }

  &::before {
    position: absolute;
    content: "";
    background-image: url("../../public/front/images/home-bg.jpg");
    top: -26%;
    right: -39%;
    height: 775px;
    width: 775px;
    background-color: rgba(var(--primary-color), 1);
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 70px 0 0 70px;

    body.rtl & {
      right: unset;
      left: -39%;
      border-radius: 0 70px 70px 0;
    }

    @media (max-width:1399.98px) {
      display: none;
    }
  }

  &:after {
    content: "";
    content: "";
    position: absolute;
    right: -39%;
    height: 100%;
    width: 55%;
    border-radius: 100%;
    background-color: #9CA3AF;
    filter: blur(200px);
    bottom: -34%;

    @media (max-width:1399.98px) {
      display: none;
    }

    body.rtl & {
      right: unset;
      left: -39%;
    }

  }
}

.feature-image-container {
  background: #F4F5F6;
  border-radius: calc(20px + (70 - 20) * ((100vw - 320px) / (1920 - 320)));
  padding: calc(20px + (40 - 20) * ((100vw - 320px) / (1920 - 320)));
  max-width: 550px;
  width: 100%;

  body.dark & {
    background-color: #1d202a;
  }

  img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    transition: opacity 0.3s ease;
  }
}

// Responsive
@media (max-width: 991px) {


  .feature-accordion {
    .accordion-item-feature {
      .accordion-body-feature {
        padding-left: 0;
        padding-top: 0;
      }

      &.active {
        .accordion-body-feature {
          padding-left: 64px;
        }
      }
    }
  }
}

@media (max-width: 767px) {
  .feature-accordion {
    .accordion-item-feature {
      .accordion-icon {
        width: 40px;
        height: 40px;

        i {
          font-size: 20px;
        }
      }

      .accordion-header-feature {
        h4 {
          font-size: 14px;
        }
      }

      &.active {
        .accordion-body-feature {
          padding-left: 56px;
        }
      }
    }
  }
}

// .card-content {
//   height: 100vh;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   transform-origin: top center;
// }
/*=====================
    Ride screen section start
==========================*/
// .ride-screen-section2 {
//   background-image: url("../../public/front/images/home-bg.jpg");
//   background-repeat: no-repeat;
//   background-size: cover;
//   background-position: center;

//   .mobile-screen-image {
//     width: 378px;
//     margin-inline: auto;
//     height: 731px;
//     position: relative;

//     @media (max-width: 1399px) {
//       width: 368px;
//       height: 701px;
//     }

//     @media (max-width: 991px) {
//       width: 338px;
//       height: 591px;
//       margin-inline: auto;
//     }

//     @media (max-width: 575px) {
//       width: 265px;
//       height: 520px;
//     }

//     img {
//       width: 100%;
//       height: 100%;
//     }
//   }

//   .screen-image-slider {
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     object-fit: cover;
//     width: calc(
//       100% - calc(26px + (30 - 26) * ((100vw - 320px) / (1920 - 320)))
//     );
//     height: calc(
//       100% - calc(24px + (30 - 24) * ((100vw - 320px) / (1920 - 320)))
//     );
//     transform: translate(-50%, -50%);
//     border-radius: calc(34px + (50 - 34) * ((100vw - 320px) / (1920 - 320)));
//   }

//   .screen-content-list {
//     position: relative;
//     height: 717px;
//     overflow: visible;

//     @media (max-width: 991px) {
//       height: auto;
//     }

//     .screen-content-slider {
//       height: 100%;
//       padding-left: 61px;

//       @media (max-width: 991px) {
//         padding-left: 0;
//         padding-top: 52px;
//       }

//       .swiper-slide {
//         opacity: 0.2;
//         transition: 0.4s ease;
//         height: auto !important;

//         &.swiper-slide-active,
//         &.swiper-slide-center {
//           opacity: 1 !important;
//         }

//         &.swiper-slide-thumb-active {
//           opacity: 1;
//         }
//       }
//     }

//     &::before {
//       content: "";
//       position: absolute;
//       top: 0;
//       left: 13px;
//       width: 6px;
//       height: 100%;
//       background: linear-gradient(
//         180deg,
//         rgba(var(--primary-color), 0) 0%,
//         rgba(var(--primary-color), 0.6) 50%,
//         rgba(var(--primary-color), 0) 100%
//       );

//       @media (max-width: 991px) {
//         top: 13px;
//         left: 0;
//         width: 100%;
//         height: 6px;
//         background: linear-gradient(
//           270deg,
//           rgba(var(--primary-color), 0) 0%,
//           rgba(var(--primary-color), 0.6) 50%,
//           rgba(var(--primary-color), 0) 100%
//         );
//       }
//     }
//   }

//   .screen-content-box {
//     position: relative;

//     @media (max-width: 991px) {
//       text-align: center;
//     }

//     &:before {
//       width: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320)));
//       height: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320)));
//       content: "";
//       position: absolute;
//       top: 18px;
//       left: -59px;
//       background-color: rgba(var(--primary-color), 1);
//       border: 7px solid rgba(var(--white), 1);
//       border-radius: 100%;

//       @media (max-width: 991px) {
//         top: -52px;
//         left: 50%;
//         transform: translateX(-50%);
//       }
//     }

//     h4 {
//       width: calc(55px + (60 - 55) * ((100vw - 320px) / (1920 - 320)));
//       height: calc(55px + (60 - 55) * ((100vw - 320px) / (1920 - 320)));
//       background-color: rgba(var(--primary-color), 0.1);
//       color: rgba(var(--white), 1);
//       display: flex;
//       align-items: center;
//       justify-content: center;
//       border-radius: 100%;
//       font-size: calc(24px + (26 - 24) * ((100vw - 320px) / (1920 - 320)));
//       font-weight: 500;

//       @media (max-width: 991px) {
//         margin-inline: auto;
//       }
//     }

//     h3 {
//       font-size: calc(22px + (30 - 22) * ((100vw - 320px) / (1920 - 320)));
//       margin-top: 15px;
//       font-weight: 500;
//       color: rgba(var(--white), 1);
//     }

//     p {
//       margin-top: 6px;
//       font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
//       color: rgba(var(--white), 0.6);
//     }
//   }
// }
.steps-wrapper {
  justify-content: center;
}

.bar {
  position: absolute;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 6px;
  background-color: rgba(var(--primary-color2), 0.116);
  z-index: -1;
  overflow: visible;

  @media (max-width: "767px") {
    display: none;
  }

  .bar__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: rgba(var(--primary-color2), 0.5);
    z-index: 1;
    border-radius: 50%;

    // &::after {
    //   position: absolute;
    //   content: "";
    //   top: 12px;
    //   left: calc(4px + (2 - 4) * ((100vw - 320px) / (1920 - 320)));
    //   height: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
    //   width: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
    //   border: 5px solid rgba(var(--primary-color2), 1);
    //   border-radius: 100%;
    //   background-color: rgba(var(--primary-color2), 1);
    //   z-index: 0;
    // }
    @media (max-width: "767px") {
      display: none;
    }
  }
}

.team-main-box {
  .steps-wrapper {
    .steps-content-wrapper {
      #step-1 {
        .bg-color {
          background-color: #f0f7fe;

          &::before {
            background-color: #f0f7fe;
          }
        }
      }

      #step-2 {
        .bg-color {
          background-color: #f6f3ff;

          &::before {
            background-color: #f6f3ff;
          }
        }
      }

      #step-3 {
        .bg-color {
          background-color: #f3faf3;

          &::before {
            background-color: #f3faf3;
          }
        }
      }

      #step-4 {
        .bg-color {
          background-color: #fef3f2;

          &::before {
            background-color: #fef3f2;
          }
        }
      }

      #step-5 {
        .bg-color {
          background-color: #f8f8f8;

          &::before {
            background-color: #f8f8f8;
          }
        }
      }

      >.row {
        &:nth-child(odd) {
          .feature-text {
            &::after {
              left: unset;
              right: -15px;
            }
          }
        }
      }
    }
  }
}

.steps-content-wrapper,
.steps-contents {
  padding-top: calc(10px + (60 - 10) * ((100vw - 320px) / (1920 - 320)));
  overflow: visible;
  position: relative;
}

.feature-text {
  height: calc(450px + (700 - 450) * ((100vw - 766px) / (1920 - 766)));
  opacity: 0.2;
  transition: opacity 0.4s ease;
  color: rgba(var(--white), 1);
  padding-left: calc(28px + (56 - 28) * ((100vw - 320px) / (1920 - 320)));
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  @media (max-width: 768px) {
    height: 300px;
  }

  &.texts {
    text-align: end;
    background-color: unset !important;

    &::before {
      content: "";
      height: calc(300px + (450 - 300) * ((100vw - 768px) / (1920 - 768)));
      width: calc(300px + (450 - 300) * ((100vw - 768px) / (1920 - 768)));
      border-radius: 100%;
      position: absolute;
      z-index: -1;
      bottom: 10%;
      right: calc(6% + (15 - 6) * ((100vh - 768px) / (1920 - 768)));

      @media (max-width: 768px) {
        right: calc(6% + (15 - 6) * ((100vh - 320px) / (1920 - 320)));
      }
    }

    &::after {
      display: none;
      content: "";
    }
  }

  img {
    position: relative;
    z-index: 0;
    // width: calc(400px + (540 - 400) * ((100vw - 320px) / (1920 - 320)));
    // height: calc(400px + (640 - 400) * ((100vw - 320px) / (1920 - 320)));
    width: 100%;
    height: 100%;
    object-fit: contain;

    @media (max-width: 768px) {
      width: auto !important;
    }
  }

  .title-left {
    text-align: end;
    display: flex;
    flex-direction: column;
    align-items: end;
    padding-right: 50px;

    @media (max-width: 768px) {
      text-align: start;
      align-items: start;
    }
  }

  // &:last-child {
  //   height: calc(450px + (700 - 450) * ((100vh - 768px) / (1920 - 768)));
  //   @media (max-width:'768px') {
  //     height: 400px;
  //   }
  // }

  &::after {
    position: absolute;
    content: "";
    top: 32%;
    left: -15px;
    height: calc(24px + 6*(100vw - 320px) / 1600);
    width: calc(24px + 6*(100vw - 320px) / 1600);
    border: 7px solid rgba(var(--white), 1);
    border-radius: 100%;
    background-color: rgba(var(--primary-color2), 1);
    z-index: 0;

    @media (max-width: "767px") {
      display: none;
    }
  }

  h2 {
    font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    color: rgba(var(--title-color), 1);
    line-height: 100%;
    margin-bottom: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));

    body.dark & {
      color: rgba(var(--white), 1);
    }

    @media (max-width: 1199.98px) {
      line-height: 1.4;
    }
  }

  span {
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f7fe;
    border-radius: 100%;
    color: #222222;
    font-size: 26px;
    font-weight: 500;
    margin-bottom: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
  }

  p {
    color: #777;
    font-weight: 300;
    line-height: calc(20px + (26 - 20) * ((100vw - 320px) / (1920 - 320)));
    width: 85%;
    font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));

    body.dark & {
      color: rgba(var(--white), 0.6);
    }

    @media (max-width: 1199.98px) {
      width: 100%;
    }
  }

  &.active {
    opacity: 1;
  }
}

#step-6 {
  button {
    margin-top: 150px;
    position: relative;
    overflow: visible;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -68px;
      width: 0%;
      height: 2px;
      background-color: #75adeeb9;
      transform: translateY(-50%);
      animation: fillLine 0.4s ease 5s forwards;
    }

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: -68px;
      width: 67px;
      height: 2px;
      background-color: rgba(223, 223, 223, 0.116);
      transform: translateY(-50%);
      z-index: 0;
    }
  }
}

/*=====================
    FAQs section start
==========================*/
.faq-section {
  .row {
    &:has(.no-data-found) {
      >[class*="col-"] {
        width: 100%;
      }
    }
  }
}

.faq-accordion {
  gap: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
  display: grid;

  .accordion-item {
    border: 1px solid rgba(var(--border-color), 1);
    border-radius: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
    overflow: visible;
    padding: 0;
    margin-bottom: calc(10px + (30 - 10) * ((100vw - 320px) / (1920 - 320)));

    body.dark & {
      background-color: #1d202a;
      border-color: rgba(var(--white), 0.08);
    }

    .accordion-header {
      .accordion-button {
        padding: calc(15px + (25 - 15) * ((100vw - 320px) / (1920 - 320)));
        background-color: transparent;
        box-shadow: unset;
        font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 500;
        border-radius: 0;
        transition: all 0.15s ease-in-out;
        color: rgba(var(--title-color), 0.7);

        body.dark & {
          color: rgba(var(--white), 1);
        }

        &::after {
          @include icon;
          background: unset;
          font-weight: 100;
          line-height: 1;
          content: "\ea13";
          width: auto;
          height: auto;
        }

        &:not(.collapsed) {
          color: rgba(var(--title-color), 1);
          font-weight: 600;

          body.dark & {
            color: rgba(var(--white), 1);
          }

          &::after {
            content: "\f1af";
          }
        }
      }
    }

    .accordion-collapse {
      .accordion-body {
        padding: 0 calc(15px + (25 - 15) * ((100vw - 320px) / (1920 - 320))) calc(15px + (25 - 15) * ((100vw - 320px) / (1920 - 320)));
        margin-top: -6px;

        p {
          font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
          color: rgba(var(--content-color), 1);
          margin: 0;
        }
      }
    }
  }
}

.pagination-box {
  .swiper-pagination {
    position: relative;
    inset: unset;
    margin-top: calc(18px + (50 - 18) * ((100vw - 320px) / (1920 - 320)));
    gap: calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320)));
    transform: unset;
    width: 100% !important;
    padding-bottom: 1px;

    .swiper-pagination-bullet {
      width: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
      height: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
      opacity: 1;
      background-color: rgba(var(--white), 1);
      transition: all 0.2s ease-in-out;
      border: 2px solid rgba(var(--primary-color), 1);
      margin-inline: calc(2px + (6 - 2) * ((100vw - 320px) / (1920 - 320)));
      position: relative;
      z-index: 0;

      body.dark & {
        background-color: rgba(var(--white), 0.2);
        border-color: rgb(34 34 34);
      }

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.2s ease-in-out;
        border-radius: 100%;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: #eee;

        body.dark & {
          background-color: rgba(var(--white), 0.1);
        }
      }

      &-active {
        &::before {
          background-color: rgba(var(--primary-color), 1) !important;
          outline-color: rgba(var(--primary-color), 1) !important;
        }

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transition: all 0.2s ease-in-out;
          outline: 1px solid rgba(var(--primary-color), 1);
          border-radius: 100%;
          height: 100%;
          width: 100%;
          padding: 7px;
        }

        body.dark & {
          background-color: rgba(var(--primary-color), 1);
        }
      }
    }
  }
}

/*=====================
    Blog section start
==========================*/
.blog-section {

  .blog-swiper {

    .blog-box{
      flex-direction: row;
    }
    .swiper-wrapper {
      height: auto;

      &:has(.no-data-found) {
        display: block;
      }
    }

    ~a {
      &.btn-primary {
        margin-top: calc(10px + (40 - 10) * ((100vw - 320px) / (1920 - 320)));
      }
    }
  }

  .title {
    a {
      display: flex;
      justify-content: end;
      align-items: center;
      margin-bottom: -20px;
      width: 100%;

      body.dark & {
        color: rgba(var(--white), 1) !important;
      }
    }
  }
}

.blog-box {
  border-radius: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  // flex-wrap: wrap;
  @media (max-width: 1400.98px) {
    flex-direction: column;
  }

  &:hover {

    .blog-content {
      h5 {
        color: rgba(var(--primary-color), 1);
      }

      a {
        i {
          transform: translateX(4px);
        }
      }
    }
  }

  .blog-image {

    img {
      height: 100%;
      object-fit: cover;
      height: calc(170px + (360 - 170) * ((100vw - 320px) / (1920 - 320)));
      min-width: calc(260px + (360 - 260) * ((100vw - 320px) / (1920 - 320)));
      border-radius: calc(15px + (32 - 15) * ((100vw - 320px) / (1920 - 320)));
    }
  }

  .blog-content {
    border-top: 0;
    padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320))) calc(5px + (25 - 5) * ((100vw - 320px) / (1920 - 320))) calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 0 0 calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320))) calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));


    @media (max-width:767.98px) {
      text-align: center;
    }

    h5 {
      font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
      font-weight: 500;
      color: rgba(var(--title-color), 1);
      transition: 0.4s ease;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;

      body.dark & {
        color: rgba(var(--white), 1);
      }
    }

    p {
      font-weight: 300;
      font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
      color: rgba(var(--content-color), 1);
      margin-block: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;

      body.dark & {
        color: rgba(var(--white), 0.6);
      }
    }

    .blog-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));

      @media (max-width:767.98px) {
        justify-content: center;
      }

      h6 {
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 400;
        color: rgba(var(--content-color), 1);
        text-transform: uppercase;
        background: #F4F5F6;
        padding: calc(6px + (15 - 6) * ((100vw - 320px) / (1920 - 320))) calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
        border-radius: calc(6px + (12 - 6) * ((100vw - 320px) / (1920 - 320)));

        body.dark & {
          color: rgba(var(--white), 0.6);
          background-color: #1d202a;
        }
      }
    }
  }
}

/*=====================
    Comment section start
==========================*/
.comment-section {
  background-image: url("../../public/front/images/home-bg.jpg");
  text-align: center;
  color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
  background-color: rgba(var(--primary-color), 1);
  position: relative;

  &::before {
    content: '';
    content: "";
    position: absolute;
    // bottom: -50%;
    right: 25%;
    height: 80%;
    width: 50%;
    border-radius: 100%;
    background-color: #9CA3AF;
    filter: blur(calc(100px + 250 * (100vw - 320px) / 1600));
  }

  .quotes-icon {
    fill: rgba(var(--primary-color), 1);
    color: rgba(var(--primary-color), 1);

    body.dark & {
      fill: rgba(var(--white), 1);
      color: rgba(var(--white), 1);

    }
  }

  .comment-slider {
    .swiper-wrapper {
      height: auto;

      &:has(.no-data-found) {
        display: block;
      }
    }

    .swiper-slide {
      margin-top: 100px;

      @media (max-width:991.91px) {
        margin-top: 0;
      }
    }

    .swiper-slide-next {
      margin-top: 50px;

      @media (max-width:991.91px) {
        margin-top: 0;
      }
    }
  }

  .comment-box {
    background-color: #fafafa;
    border: 1px solid transparent;
    border-radius: calc(25px + (50 - 25) * ((100vw - 320px) / (1920 - 320)));
    padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
    transition: 0.4s ease;
    cursor: pointer;

    body.dark & {
      background-color: rgba(var(--primary-color), 1);
    }

    &:hover {
      border-color: rgba(var(--border-color), 1);
      background-color: rgba(var(--white), 1);

      body.dark & {
        border-color: rgba(var(--white), 0.1);
        background-color: rgba(var(--primary-color), 1);
      }
    }

    .top-comment {
      display: flex;
      align-items: center;
      gap: calc(7px + (14 - 7) * ((100vw - 320px) / (1920 - 320)));
      margin-top: calc(12px + (30 - 12) * ((100vw - 320px) / (1920 - 320)));
      padding-top: calc(12px + (30 - 12) * ((100vw - 320px) / (1920 - 320)));
      border-top: 1px solid #EDEDED;

      body.dark & {
        border-color: rgba(var(--white), 0.2);
      }

      .content {
        text-align: left;
      }

      img {
        width: calc(30px + (50 - 30) * ((100vw - 320px) / (1920 - 320)));
        height: calc(30px + (50 - 30) * ((100vw - 320px) / (1920 - 320)));
        border-radius: 100%;
      }

      h5 {
        font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 600;
        color: rgba(var(--title-color), 1);

        body.dark & {
          color: rgba(var(--white), 1);
        }
      }
    }

    .comment-contain {
      margin-top: calc(10px + (30 - 10) * ((100vw - 320px) / (1920 - 320)));
      font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
      font-weight: 400;
      text-align: start;
      line-height: 1.6;
    }

    .rating-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: row-reverse;

      svg {
        width: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
        height: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
        fill: #ffb400;
      }

      h6 {
        color: #9CA3AF;
      }
    }
  }
}

/*=====================
    Footer start
==========================*/
.footer-section {
  background-image: url("../../public/front/images/home-bg.jpg");
  color: rgba(var(--white), 1);
  overflow: visible;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(var(--primary-color), 1);
  overflow: hidden;


  &::before {
    content: "";
    position: absolute;
    right: 25%;
    height: 200px;
    width: 50%;
    border-radius: 100%;
    background-color: #9CA3AF;
    filter: blur(calc(100px + 200 * (100vw - 320px) / 1600));

    @media (max-width:575.98px) {
      display: none;
    }

  }

  .top-footer {
    padding-block: calc(0px + (80 - 0) * ((100vw - 320px) / (1920 - 320))) 0;

    @media (max-width:575.98px) {
      display: none;
    }

    .logo-box {
      .footer-logo {
        display: block;
        width: calc(160px + (215 - 160) * ((100vw - 320px) / (1920 - 320)));
        text-align: left;
        height: auto;

        img {
          width: 100% !important;
          height: max-content !important;
          object-fit: contain;
        }
      }

      p {
        margin-top: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .footer-form {
      // margin-top: calc(17px + (35 - 17) * ((100vw - 320px) / (1920 - 320)));

      .form-label {
        font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 500;
        margin-bottom: 0;
      }

      .form-group {
        position: relative;
        margin-top: calc(8px + (14 - 8) * ((100vw - 320px) / (1920 - 320)));

        .form-control {
          padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))) calc(110px + (173 - 110) * ((100vw - 320px) / (1920 - 320))) calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))) calc(12px + (30 - 12) * ((100vw - 320px) / (1920 - 320)));
          background-color: #1f1f1f;
          border: 1px solid rgba(var(--white), 0.1);
          border-radius: 100px;
          color: rgba(var(--white), 0.8);
          box-shadow: none;

          body.dark & {
            border-color: rgba(var(--white), 0.1);
            background-color: rgba(31, 31, 31, 1);
            color: #fff;
          }

          &::placeholder {
            color: #888888;
          }
        }

        .btn {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 3px;
        }
      }
    }

    .social-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: calc(20px + (40 - 20) * ((100vw - 320px) / (1920 - 320)));

      h4 {
        font-size: 20px;
        font-weight: 500;
      }

      ul {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 20px;

        li {
          a {
            height: 24px;
            width: 24px;
            display: flex;

            img {
              height: 100%;
              width: 100%;
            }
          }
        }
      }
    }

    .store-list {
      margin-top: calc(20px + 20 * (100vw - 320px) / 1600);
      display: flex;
      gap: 10px;
      padding: 20px;
      background: rgba(var(--white), 0.05);
      flex-direction: column;
      border-radius: 10px;

      ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;

        li {
          a {
            width: 188px;
            display: flex;
            height: 100%;

            img {
              border-radius: 10px;
              height: 100% !important;
              width: 100% !important;
            }
          }
        }
      }

      p {
        color: rgba(var(--white), 1);
        font-size: 16px;
        font-weight: 300;
      }
    }

    .footer-content {
      +.footer-content {
        margin-top: calc(10px + (50 - 10) * ((100vw - 320px) / (1920 - 320)));
      }

      .footer-title {
        margin-bottom: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));

        h4 {
          font-weight: 500;
          font-size: calc(20px + (22 - 20) * ((100vw - 320px) / (1920 - 320)));
          color: rgba(var(--white), 1);

          body.dark & {
            color: rgba(var(--white), 1);
          }
        }
      }

      .content-list {
        display: grid;
        gap: calc(8px + (15 - 8) * ((100vw - 320px) / (1920 - 320)));
        padding: 0;

        li {
          a {
            color: rgba(var(--white), 0.6);
            font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
            position: relative;
            transition: all 0.2s ease-in-out;

            body.dark & {
              color: rgba(var(--white), 0.5);
            }

            &::before {
              content: "";
              position: absolute;
              bottom: -2px;
              left: 0;
              transition: all 0.2s ease-in-out;
              width: 0;
              height: 2px;
              background-color: rgba(var(--primary-color), 1);
            }

            &:hover {
              color: rgba(var(--white), 1);
              font-weight: 500;

              &::before {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }

  .sub-footer {
    padding: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320))) 0;
    background-color: #222222;
    z-index: 1;
    position: relative;
    border-top: 1px solid rgba(var(--white), 0.05);

    h6 {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: rgba(var(--primary-color), 1);
        font-weight: 600;
        padding-inline: 2px;
      }
    }

    .social-list {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));

      @media (max-width: 767px) {
        justify-content: start;
      }

      li {
        a {
          width: calc(28px + (34 - 28) * ((100vw - 320px) / (1920 - 320)));
          height: calc(28px + (34 - 28) * ((100vw - 320px) / (1920 - 320)));
          border-radius: 100%;
          background-color: rgba(var(--primary-color), 0.1);
          color: rgba(var(--white), 1);
          transition: all 0.2s ease-in-out;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            background-color: rgba(var(--primary-color), 0.2);
            color: rgba(var(--primary-color), 1);
          }

          i {
            font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
            line-height: 1;
            font-weight: 500;
          }
        }
      }
    }
  }

  .footer-newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

/* @start: Cursor */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 98;

  &__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;

    &--small {
      width: 8px;
      height: 8px;
      background-color: rgba(var(--primary-color), 1);
      z-index: 1;
    }

    &--large {
      width: 40px;
      height: 40px;
      border: 1px solid rgba(var(--primary-color), 1);
      background-color: rgba(var(--primary-color), 0.1);
      backdrop-filter: blur(1px);
    }
  }
}

.cursor-hide {
  display: none;
}

/*=====================
    Slider scss
==========================*/
.description {
  .panel {
    font-weight: 300;

    pre {
      &.prettyprint {
        font-size: 20px;
        text-align: left;
        width: auto;
        font-weight: normal;
        margin: 10px;
        border: none;
      }
    }
  }

  .prettyprint {
    .linenums {
      padding: 0;
      list-style: none;
    }

    ol {
      li {
        background-color: black;
      }
    }
  }

  .panel.red .prettyprint .linenums>li:nth-child(n + 7):nth-child(-n + 9),
  .panel.gray .prettyprint .linenums>li:nth-child(10),
  .panel.purple .prettyprint .linenums>li:nth-child(4),
  .panel.green .prettyprint .linenums>li:nth-child(n + 6):nth-child(-n + 10) {
    background-color: #222;
  }

  .box {
    width: 100px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    background-color: rgba(var(--white), 1);
    border-radius: 8px;
    color: #222;
    font-weight: 700;
    margin-left: 20px;
    will-change: transform;

    &.active {
      background-color: orange;
      border: 2px solid rgba(var(--white), 1);
    }
  }

  .description,
  .final {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    min-height: 80vh;
  }

  .best-choice-container {
    width: fit-content;
    display: flex;
    padding-inline: calc(12px + (195 - 12) * ((100vw - 320px) / (1920 - 320))) 0 !important;
    flex-wrap: nowrap;
    gap: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
  }

  code {
    padding: 0.1rem;
    background: rgba(var(--white), 1);
    color: #222;
    font-size: 1.5rem;
  }

  h1 {
    code {
      font-size: 1.7rem;
    }
  }
}

.loader-box {
  position: fixed;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--white), 1);

  img {
    width: 200px;
    height: auto;
  }

  .loader {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    animation: rotate 3s linear infinite;

    &::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 40px;
      border: 1px solid rgba(var(--primary-color), 1);
      border-width: 12px 2px 7px;
      border-radius: 2px 2px 1px 1px;
      box-sizing: border-box;
      transform: rotate(45deg) translate(24px, -10px);
      background-image: linear-gradient(rgba(var(--primary-color), 1) 20px,
          transparent 0),
        linear-gradient(rgba(var(--primary-color), 1) 30px, transparent 0),
        linear-gradient(rgba(var(--primary-color), 1) 30px, transparent 0);
      background-size: 10px 12px, 1px 30px, 1px 30px;
      background-repeat: no-repeat;
      background-position: center, 12px 0px, 3px 0px;
    }

    &::after {
      content: "";
      position: absolute;
      height: 4px;
      width: 4px;
      left: 20px;
      top: 47px;
      border-radius: 50%;
      color: rgba(var(--white), 1);
      box-shadow: -4px 7px 2px, -7px 16px 3px 1px, -11px 24px 4px 1px,
        -6px 24px 4px 1px, -14px 35px 6px 2px, -5px 36px 8px 2px,
        -5px 45px 8px 2px, -14px 49px 8px 2px, 6px 60px 11px 1px,
        -11px 66px 11px 1px, 11px 75px 13px, -1px 82px 15px;
    }
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.blog-details-section {
  .blog-box {
    background-color: transparent;
    padding: 0;
    overflow: unset;
    position: sticky;
    top: 110px;

    .blog-title {
      padding-bottom: 20px;
      padding-top: calc(20px + (45 - 20) * ((100vw - 320px) / (1920 - 320)));
      border-bottom: 1px dashed rgba(var(--border-color), 1);

      body.dark & {
        border-color: rgba(153, 153, 153, 0.2588235294);
      }

      .badge {
        background-color: rgba(var(--primary-color), 0.06);
        color: rgba(var(--primary-color), 1);
        padding: 6px 10px;
        font-weight: 500;
        border-radius: 100px;
        border: 1px solid rgba(var(--primary-color), 0.43);
        letter-spacing: 0.8px;
        font-size: 13px;
        margin: 2px;
      }

      .top-title {
        padding: 0;

        li {
          font-size: 16px;
          color: #777;

          body.dark & {
            color: #ddd;
          }

          +li {
            border-left: 1px solid rgba(var(--border-color), 1);
            padding-left: 8px;
            margin-left: 8px;

            body.dark & {
              border-color: rgba(153, 153, 153, 0.2588235294) !important;
            }
          }
        }
      }

      h1 {
        font-size: 34px;
        font-weight: 600;
        line-height: 1.3;
        margin-top: 8px;
           body.dark & {
        color: rgba(var(--white), 1);
      }

      }

      p {
        font-size: 17px;
        line-height: 1.5;
        color: rgba(var(--content-color), 1);
        margin-top: 10px;
      }
    }

    .blog-image {
      height: calc(200px + (650 - 200) * ((100vw - 320px) / (1920 - 320)));
      border-radius: 14px;
      overflow: visible;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .blog-contain {
      margin-top: 30px;

      >* {
        margin-top: 15px;

        &:first-child {
          margin-top: 0;
        }
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        line-height: 1.3;
        display: block;
      }

      h1,
      h2,
      h3,
      h4 {
        font-weight: 600;
      }

      h1 {
        font-size: 26px;
      }

      h2 {
        font-size: 22px;
      }

      p {
        font-size: 16px;
        color: rgba(var(--content-color), 1);
        margin-top: 3px;
      }

      ol,
      ul {
        padding-left: 24px;
        margin-top: 13px;
        display: flex;
        flex-direction: column;
        gap: 4px;

        li {
          display: list-item;
          list-style-type: disc;
          font-size: 17px;
          color: rgba(var(--title-color), 0.7);

          &::marker {
            font-size: 16px;
            line-height: 1;
            color: rgba(var(--title-color), 1);
          }

          strong {
            font-weight: 500;
            color: rgba(var(--title-color), 1);
          }
        }
      }

      blockquote {
        background-color: rgba(var(--box-bg), 1);
        padding: 14px 20px;
        border-radius: 6px;
        margin-block: 15px;
        position: relative;
        overflow: visible;

        &::before {
          content: "\ec52";
          font-family: remixicon;
          font-style: normal;
          position: absolute;
          top: -23px;
          right: -20px;
          font-size: 126px;
          transform: rotate(21deg);
          line-height: 1;
          color: rgba(var(--content-color), 0.15);
        }

        p {
          color: rgba(var(--title-color), 1);
          margin: 0;

          em {
            font-style: normal;
            color: rgba(var(--title-color), 1);
            font-weight: normal;
          }
        }
      }

      em {
        font-style: normal;
        color: rgba(var(--primary-color), 1);
        font-weight: 500;
      }
    }
  }
}

.blog-sidebar-box {
  position: sticky;
  top: 108px;
  left: 0;

  >div {
    +div {
      margin-top: 38px;
    }
  }

  .blog-title {
    margin-block: 19px;

    h3 {
      letter-spacing: 0.5px;
      font-size: 19px;
      line-height: 1.3;
      border-bottom: 1px solid #99999942;
      padding-bottom: 9px;
      body.dark & {
        color:rgba(var(--white), 1) ;
      }
    }
  }

  .tags-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(7px + (11 - 7) * ((100vw - 320px) / (1920 - 320)));
    padding: 0;

    li {
      a {
        padding: calc(5px + (7 - 5) * ((100vw - 320px) / (1920 - 320))) calc(8px + (13 - 8) * ((100vw - 320px) / (1920 - 320)));
        background-color: #f8f8f8;
        border: 1px solid rgba(var(--border-color), 1);
        color: rgba(var(--title-color), 0.7);
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 400;
        border-radius: 4px;
        letter-spacing: 0.4px;
        display: block;
        transition: all 0.15s ease-in-out;
        word-break: break-all;

        body.dark & {
          background-color: #222222;
          border-color: rgba(153, 153, 153, 0.2588235294);
          color: rgba(var(--white), 0.7);
        }

        &:hover {
          background-color: rgba(var(--primary-color), 1);
          color: rgba(var(--white), 1);
          border-color: transparent;
          font-weight: 500;

          body.dark & {
            background-color: rgba(var(--primary-color), 1);
          }
        }
      }
    }
  }

  .recent-blog-list {
    display: grid;
    gap: 24px;
    padding: 0;

    .recent-box {
      display: flex;
      align-items: center;
      gap: 15px;

      @media (max-width: 991px) {
        flex-wrap: wrap;
      }

      &:hover {
        .recent-image {
          img {
            transform: scale(1.03);
          }
        }

        .post-content {
          h5 {
            a {
              color: rgba(var(--primary-color), 1);
              body.dark & {
                color: rgba(var(--white), 1);
              }
            }
          }
        }
      }

      .recent-image {
        width: calc(100px + (112 - 100) * ((100vw - 320px) / (1920 - 320)));
        object-fit: cover;
        border-radius: 6px;
        overflow: visible;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.2s ease-in-out;
        }
      }

      .post-content {
        width: calc(100% - 112px - 15px);

        h5 {
          font-size: 18px;
          font-weight: 500;
          line-height: 1.2;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          display: -webkit-box;
          overflow: hidden;

          a {
            color: rgba(var(--title-color), 1);
            transition: all 0.2s ease-in-out;
               body.dark & {
                color: rgba(var(--white), 1);
              }
          }
        }

        h6 {
          font-size: 15px;
          margin-top: 10px;
          color: rgba(var(--content-color), 1);
          font-weight: 400;
          position: relative;
          padding-left: 13px;

          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 7px;
            height: 1px;
            background-color: rgba(var(--content-color), 1);
          }
        }
      }
    }
  }

  .category-list {
    display: grid;
    gap: 10px;
    max-height: 140px;
    overflow: auto;
    padding-inline: 0;

    &::-webkit-scrollbar-track {
      background-color: #f9f9f9;
      border-radius: 100px;

      body.dark & {
        background-color: #222222;
      }
    }

    &::-webkit-scrollbar {
      width: 4px;
      height: 0;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #626262;
      border-radius: 100px;
    }

    li {
      a {
        color: rgba(var(--title-color), 0.7);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        transition: all 0.2s ease-in-out;
        gap: 12px;

        body.dark & {
          color: rgba(var(--white), 0.7);
        }

        &:hover {
          color: rgba(var(--primary-color), 1);
          font-weight: 500;

          .badge {
            color: rgba(var(--white), 1);
            background-color: rgba(var(--primary-color), 1);
          }
        }

        .name {
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          display: -webkit-box;
          overflow: visible;
        }

        .badge {
          transition: all 0.2s ease-in-out;
          color: rgba(var(--primary-color), 1);
          background-color: rgba(var(--primary-color), 0.15);
          font-weight: 500;
          border-radius: 4px;
          font-size: 14px;
          padding: 4px 8px;
        }
      }
    }
  }

  .search-input {
    position: relative;
    margin-bottom: 50px;

    .form-control {
      padding: 0 0 calc(8px + 2 * (100vw - 320px) / 1600);
      border-width: 0 0 1px;
      border-radius: 0;
      font-size: 18px;
    }

    i {
      position: absolute;
      top: 6px;
      right: 8px;
      color: #777;
      font-size: 18px;
      line-height: 1;
    }
  }
}

.pagination-box {
  .pagination {
    justify-content: center;
    border-top: 1px solid rgba(153, 153, 153, 0.2588235294);
    margin-top: 42px;
    padding-top: 16px;

    .page-item {
      &:first-child {
        .page-link {
          border-radius: 100%;
          height: 38px;
          width: 38px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0;
          font-size: 0;
          border-color: rgba(var(--border-color), 1);
          margin-right: 15px;

          &::before {
            content: "\ea64";
            font-family: remixicon;
            font-style: normal;
            font-size: 20px;
          }
        }
      }

      &:last-child {
        .page-link {
          border-radius: 100%;
          height: 38px;
          width: 38px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0;
          font-size: 0;
          border-color: rgba(var(--border-color), 1);
          margin-left: 15px;
          color: rgba(var(--title-color), 1);
          position: relative;

          &::before {
            content: "\ea6e";
            font-family: remixicon;
            font-style: normal;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }

      &:nth-child(2) {
        .page-link {
          border-radius: 50px 0 0 50px;
        }
      }

      &:nth-last-child(2) {
        .page-link {
          border-radius: 0 50px 50px 0;
        }
      }

      &.active {
        .page-link {
          background-color: rgba(var(--primary-color), 1);
          color: rgba(var(--white), 1);
          border-color: rgba(var(--primary-color), 1);
          font-weight: 600;

          body.dark & {
            background-color: rgba(var(--primary-color), 1);
            color: rgba(var(--white), 1);
          }
        }
      }

      .page-link {
        height: 38px;
        width: 38px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(var(--title-color), 0.7);
        background-color: #f8f8f8;
        border: 1px solid rgba(var(--border-color), 1);
        z-index: 0;

        body.dark & {
          background-color: #222222;
          border-color: rgba(153, 153, 153, 0.2588235294);
        }
      }
    }
  }
}

.blog-list-section {
  .blog-box {
    border-radius: 8px;
    border: 1px solid rgba(var(--line-color), 0.7);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: calc(18px + (25 - 18) * ((100vw - 575px) / (1920 - 575)));
    background-color: #f8f8f8;
    border: 1px solid rgba(var(--border-color), 1);
    flex-direction: row;

    body.dark & {
      background-color: #222222;
      border-color: rgba(153, 153, 153, 0.2588235294);
    }

    @media (max-width: 575.98px) {
      flex-direction: column;
    }

    &:hover {
      .blog-img {

        img {
          transform: scale(1.03);
        }
      }

      .blog-details {
        h4 {
          color: rgba(var(--primary-color), 1);
        }
      }
    }

    .blog-img {
      background-color: rgba(var(--box-bg), 1);
      width: calc(242px + (400 - 242) * ((100vw - 991px) / (1920 - 991)));
      height: calc(188px + (258 - 188) * ((100vw - 991px) / (1920 - 991)));
      display: block;
      border-radius: 6px;
      position: relative;
      overflow: visible;

      @media (max-width: 575.98px) {
        width: 100%;
        height: 250px;
      }

      img {
        width: 100%;
        height: 100%;
        transition: all 0.25s ease-in-out;
        object-fit: cover;
      }
    }

    .blog-details {
      position: relative;
      width: calc(100% - calc(242px + (400 - 242) * ((100vw - 991px) / (1920 - 991))) - calc(18px + (25 - 18) * ((100vw - 575px) / (1920 - 575))));

      @media (max-width: 575.98px) {
        width: 100%;
      }

      h4 {
        width: calc(100% - 60px);
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: visible;
        transition: all 0.25s ease-in-out;
        font-size: calc(16px + (19 - 16) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 500;
        line-height: 1.3;

        a {
          color: rgba(var(--title-color), 1);
          body.dark & {
            color: rgba(var(--white), 1);
          }
        }
      }

      p {
        color: rgba(var(--content-color), 1);
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
        margin-top: 8px;
        line-height: 1.4;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: visible;
      }

      .link-btn {
        background-color: rgba(var(--primary-color), 1);
        color: rgba(var(--white), 1);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));
        padding: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320))) calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
        line-height: 1.3;
        margin-top: calc(16px + (22 - 16) * ((100vw - 320px) / (1920 - 320)));
        border: 1px solid transparent;
        border-radius: 6px;
        border-radius: 100px;

        body.rtl & {
          flex-direction: row-reverse;
        }

        &:hover {
          border-color: rgba(var(--primary-color), 1);
          color: rgba(var(--primary-color), 1);
          background-color: transparent;

          i {
            margin-left: 5px;
            color: rgba(var(--primary-color), 1);
          }
        }

        i {
          color: rgba(var(--white), 1);
          font-size: 22px;
          transition: all 0.15s ease-in-out;

          svg {
            height: auto;
          }
        }
      }
    }
  }
}

/*=====================
    RTL start
==========================*/
body {
  &.rtl {
    direction: rtl;

    .form-select {
      background-position: left 0.75rem center;
    }

    .swiper {
      direction: ltr;

      .swiper-wrapper {
        .swiper-slide {
          >* {
            direction: rtl;
          }
        }
      }
    }

    .faq-accordion {
      .accordion-item {
        .accordion-header {
          .accordion-button {
            &::after {
              margin-left: unset;
              margin-right: auto;
            }
          }
        }
      }
    }

    header {
      .top-header {
        .header-middle {
          @media (max-width: 1199px) {
            left: unset;
            right: 0;
            transform: translateX(100%);

            &.show {
              transform: translateX(0);
            }
          }
        }
      }
    }

    .best-choice-section {
      .best-choice-box {
        .best-choice-content {
          text-align: right;
        }
      }
    }

    .ride-screen-section2 {
      .screen-content-box {
        &:before {
          left: unset;
          right: -59px;
        }
      }

      .screen-content-list {
        &::before {
          left: unset;
          right: 13px;
        }

        .screen-content-slider {
          padding-left: unset;
          padding-right: 61px;
        }
      }
    }

    .footer-section {
      .top-footer {
        .footer-content {
          .content-list {
            li {
              a {
                &::before {
                  left: unset;
                  right: 0;
                }
              }
            }
          }
        }

        .footer-form {
          .form-group {
            .form-control {
              padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))) calc(12px + (30 - 12) * ((100vw - 320px) / (1920 - 320))) calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))) calc(110px + (173 - 110) * ((100vw - 320px) / (1920 - 320)));
            }

            .btn {
              right: unset;
              left: 3px;
            }
          }
        }
      }
    }

    .blog-sidebar-box {
      .recent-blog-list {
        .post-content {
          h6 {
            padding-right: 13px;
            padding-left: unset;

            &::before {
              left: unset;
              right: 0;
            }
          }
        }
      }
    }

    .blog-details-section {
      .blog-box {
        background-color: transparent;

        .blog-title {
          .top-title {
            li {
              +li {
                border-right: 1px solid rgba(var(--border-color), 1);
                padding-right: 8px;
                margin-right: 8px;
                border-left: unset;
                padding-left: unset;
                margin-left: unset;
              }
            }
          }
        }
      }
    }

    .blog-list-section {
      .blog-box {
        .blog-details {
          .link-btn {
            &:hover {
              i {
                margin-left: unset;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }

    .pagination-box {
      .pagination {
        .page-item {
          &:nth-last-child(2) {
            .page-link {
              border-radius: 50px 0 0 50px;
            }
          }

          &:nth-child(2) {
            .page-link {
              border-radius: 0 50px 50px 0;
            }
          }

          &:first-child {
            .page-link {
              margin-right: unset;
              margin-left: 15px;
              transform: rotate(-180deg);
            }
          }

          &:last-child {
            .page-link {
              margin-left: unset;
              margin-right: 15px;
              transform: rotate(-180deg);
            }
          }
        }
      }
    }
  }
}

/*=====================
    RTL end
==========================*/

.ticket-create-section {
  background-image: url("../../public/front/images/ticket1.png");
  background-position: bottom left;
  background-size: contain;
  background-repeat: repeat-x;

  body.dark & {
    background-image: url("../../public/front/images/ticket2.png");
  }

  .contentbox {
    position: relative;
    letter-spacing: 0.5px;
    border-radius: 12px;
    padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320))) calc(16px + (27 - 16) * ((100vw - 320px) / (1920 - 320)));
    border: 1px solid rgba(var(--border-color), 0.4);
    background-color: #fbfbfb;
    box-shadow: 5px 5px 9px 1px rgba(238, 238, 238, 0.749);

    body.dark & {
      background-color: #222222;
      box-shadow: 5px 5px 9px 1px rgba(119, 119, 119, 0.11);
    }

    .form-box {
      position: relative;
      align-items: center;

      label {
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
        color: rgba(var(--content-color), 1);
        font-weight: 600;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
        gap: 2px;

        span {
          color: #d7191c;
          font-size: 16px;
          font-weight: 500;
        }

        &.error {
          color: #d7191c;
          font-size: 13px;
          font-weight: 400;
          margin: 4px 0 0px;
          letter-spacing: 0.7px;
          line-height: 1.5;
        }
      }

      .form-control {
        border: 1px solid rgba(var(--border-color), 1);
        border-radius: 4px;
        padding: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320))) 10px;
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 400;
        color: rgba(var(--title-color), 1);
        line-height: 1.5;
        background-color: rgba(var(--white), 1) !important;

        &::placeholder {
          color: rgba(var(--content-color), 1);
        }

        &::file-selector-button {
          background-color: rgba(var(--border-color), 1);
          color: rgba(var(--title-color), 1);
        }

        &:focus,
        &:active {
          background-color: rgba(23, 28, 38, 0.04);
          border: 1px solid rgba(var(--border-color), 1);
          box-shadow: none;
          color: rgba(var(--title-color), 1);
        }
      }
    }

    .contentbox-title {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 15px;
      border-bottom: 1px solid rgba(var(--border-color), 1);
      padding-bottom: 12px;

      h3 {
        font-size: calc(17px + (19 - 17) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 600;
        color: rgba(var(--title-color), 1);
      }

      .header-action {
        display: flex;
        align-items: center;

        i {
          font-size: 22px;
          line-height: 1;
          color: #171c26;
          cursor: pointer;
        }
      }

      .action-btn {
        gap: 6px;

        .btn {
          border: none;
          padding: 0;
          border-radius: 0;
          background-color: unset;

          i {
            font-size: 20px;
          }

          &.gray {
            i {
              color: rgba(23, 28, 38, 0.7);
            }
          }

          &.secondary {
            i {
              color: #ff5443;
            }
          }
        }
      }

      .contentbox-subtitle {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        width: 100%;

        @media (max-width: 767.98px) {
          flex-direction: column;
          align-items: unset;
        }

        .subtitle-button-group {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
        }

        a {
          line-height: 1;

          &.btn {
            width: max-content;
          }

          i {
            font-weight: 900;
          }
        }
      }
    }

    .submit-btn {
      border-top: 1px solid rgba(var(--border-color), 1);
      padding-top: 13px;

      .btn {
        background-color: rgba(var(--primary-color), 1);
        color: rgba(var(--white), 1);
      }
    }
  }
}

.no-data-found {
  text-align: center;

  img {
    width: 480px;
  }
}

.dashboard-no-data {
  text-align: center;
  // height: calc(200px + (580 - 200) * ((100vw - 320px) / (1920 - 320)));
  display: flex;
  gap: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
  align-items: center;
  justify-content: center;
  flex-direction: column;

  svg {
    body.dark & {
      filter: invert(1);
    }
  }

  // svg {
  //   height: calc(195px + (280 - 195) * ((100vw - 320px) / (1920 - 320)));
  // }

  h6 {
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;

    body.dark & {
      color: rgba(var(--white), 1);
    }
  }
}

.wow {
  @media screen and (max-width: 800px) {
    animation: none !important;
    visibility: visible !important;
  }
}

/*=====================
    Privacy Policy SCSS Start
==========================*/
.privacy-policy-details-section {
  .page-title {
    text-align: center;
    margin-bottom: 35px;

    h2 {
      font-size: 52px;
      font-weight: 600;
      line-height: 1.3;
    }

    h6 {
      color: rgba(var(--content-color), 1);
      font-weight: 500;
      margin-top: 4px;
    }
  }

  .page-content {

    ol,
    ul {
      margin-block: 11px 18px;
      display: inline-block;
      padding-left: 2rem;

      li {
        list-style: disc;
        display: list-item;
        color: rgba(var(--title-color), 0.8);
        font-weight: 500;
        font-size: 17px;

        +li {
          margin-top: 4px;
        }
      }
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: 500;
    }

    p {
      font-size: 17px;
      font-weight: 400;
      margin-block: 6px 16px;
    }
  }
}

/*=====================
    Privacy Policy SCSS End
==========================*/

/*=====================
    User Dashboard SCSS Start
==========================*/
.user-dashboard-section {
  padding-top: 44px;
  background: #F3F4F6;

  body.dark & {
    background: #1d202a;
  }

  .left-profile-box {
    background-color: #ffffff;
    border-radius: 20px;
    position: sticky;
    top: 110px;
    border: none;
    padding: 15px;
    border: 1px solid #eee;
    box-shadow: 0px 2px 20px 0px rgb(13 31 61 / 9%);

    body.dark & {
      background: rgba(var(--primary-color), 1);
      border-color: rgba(var(--white), 0.3);
    }


    @media (max-width: 991.98px) {
      position: fixed;
      top: 0;
      left: calc(-340px + (-380 - -340) * ((100vw - 320px) / (992 - 320)));
      height: 100vh;
      background-color: rgba(var(--white), 1);
      width: calc(300px + (350 - 300) * ((100vw - 320px) / (992 - 320)));
      z-index: 3;
      border-radius: 0;
      border: none;
      overflow: hidden auto;
      transition: all 0.25s ease-in-out;

      body.rtl & {
        left: unset;
        right: calc(-340px + (-380 - -340) * ((100vw - 320px) / (992 - 320)));
      }

      &.show {
        left: 0;

        body.rtl & {
          left: unset;
          right: 0;
        }
      }

      .close-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background-color: rgba(var(--light-gray), 1);
        border-bottom: 1px solid rgba(var(--border-color), 1);
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1;
        border-radius: 0;
        font-size: 18px;
        font-weight: 500;
        padding-block: 16px;
        color: rgba(var(--title-color), 1);

        i {
          font-size: inherit;
          color: rgba(var(--title-color), 1);
        }

        .sidebar-close-btn {
          padding: 0;
          width: 32px;
          height: 32px;
          background-color: rgba(var(--white), 1);
          border: 1px solid rgba(var(--border-color), 1);
          border-radius: 4px;
          font-size: 20px;
        }
      }
    }

    .profile-box {
      padding: 0;
      text-align: center;
      border-bottom: none;

      .profile-bg {
        border-left: 2px solid rgba(var(--primary-color), 1);
        // border-right: 2px solid rgba(var(--primary-color), 0.5);
        border-radius: 20px;
        overflow: visible;
        height: 100px;
        width: 100%;
        display: block;
        position: relative;
        display: flex;
        justify-content: start;
        align-items: center;
        background: rgba(var(--primary-color), 0.06);
        padding: 20px;

        body.dark & {
          border-color: rgba(var(--white), 1);
          background: rgba(var(--white), 0.1);
        }

        img {
          position: absolute;
          top: 0;
          left: 0;
          height: 100px;
          width: 100%;
          object-fit: cover;
          opacity: 0.3;
        }

        .profile-content-wrapper {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 15px;

          .profile-name {
            margin-top: 0;
            color: rgba(var(--primary-color), 1);
            text-align: start;

            body.dark & {
              color: rgba(var(--white), 1);

              h5 {
                color: rgba(var(--white), 0.8);
              }
            }
          }
        }

        @media (max-width: 991.98px) {
          display: none;
        }

        svg {
          width: 100%;
        }
      }

      .profile-img {
        position: relative;
        width: calc(60px + 14 * (100vw - 320px) / 1600);
        height: calc(60px + 14 * (100vw - 320px) / 1600);
        background-color: rgba(var(--primary-color), 0.2);
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(var(--primary-color), 1);

        body.dark & {
          border-color: rgba(var(--white), 0.2);
          background-color: rgba(var(--primary-color), 1);
        }

        @media (max-width: 991.98px) {
          margin-top: 0;
        }

        .user-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 100%;
        }

        .initial-letter {
          span {
            font-size: calc(28px + (44 - 28) * ((100vw - 320px) / (1920 - 320)));
            font-weight: 600;
            color: rgba(var(--primary-color), 1);

            body.dark & {
              color: rgba(var(--white), 1);
            }
          }
        }

        .icon {
          width: 26px;
          height: 26px;
          border-radius: 100%;
          position: absolute;
          bottom: 0;
          right: 0;
          box-shadow: 0px 0px 15px 0px rgba(var(--title-color), 0.06);
          padding: 7px;
          background-color: rgba(var(--white), 1);
          display: flex;
          align-items: center;
          justify-content: center;

          @media (max-width: 991.98px) {
            bottom: -6px;
            right: -5px;
            padding: 9px;
          }

          body.rtl & {
            right: unset;
            left: 0;
          }

          svg {
            width: 100%;
            height: 100%;
            fill: rgba(var(--primary-color), 1);
          }
        }
      }

      .profile-image {
        position: relative;
        width: 100px;
        height: 100px;

        img {
          border-radius: 100%;
        }

        .icon {
          width: 32px;
          height: 32px;
          border-radius: 100%;
          position: absolute;
          bottom: 0;
          right: 0;
          box-shadow: 0px 0px 15px 0px rgba(34, 34, 34, 0.06);
          padding: 7px;
          background-color: rgba(var(--white), 1);
          display: flex;
          align-items: center;
          justify-content: center;

          svg {
            width: 100%;
            height: 100%;
            fill: rgba(var(--primary-color), 1);
          }
        }
      }

      .profile-name {
        margin-top: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));

        h4 {
          font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 600;
        }

        h5 {
          font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
          // margin-top: 5px;
          font-weight: 400;
          color: rgba(var(--primary-color), 0.6);
        }
      }
    }

    .dashboard-option {
      padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
      border-bottom: 1px solid rgba(var(--border-color), 1);
      display: flex;
      flex-direction: column;
      gap: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320)));
      background-color: rgba(var(--primary-color), 0.06);
      margin-top: 10px;
      border-radius: 20px;
      // border-left: 2px solid rgba(var(--primary-color), 0.5);
      // border-right: 2px solid rgba(var(--primary-color), 0.5);

      body.dark & {
        background-color: rgba(var(--white), 0.1);
        border-color: rgba(var(--white), 0.2);
      }

      li {
        width: 100%;

        >a {
          width: 100%;
          text-align: unset;
          padding: 0;
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 500;
          color: #777;
          background-color: transparent;

          body.dark & {
            color: rgba(var(--white), 0.6);
          }

          &.active {
            color: rgba(var(--primary-color), 1);

            body.dark & {
              color: rgba(var(--white), 1) !important;
            }

            i {
              background-color: rgba(var(--primary-color), 1);
              color: rgba(var(--white), 1);

              body.dark & {
                color: rgba(var(--white), 1);
                border-color: rgba(var(--white), 0.2);
                background-color: rgba(var(--primary-color), 1);
              }
            }
          }

          i {
            width: calc(32px + (40 - 32) * ((100vw - 320px) / (1920 - 320)));
            height: calc(32px + (40 - 32) * ((100vw - 320px) / (1920 - 320)));
            transition: all 0.15s ease-in-out;
            border-radius: 100%;
            background-color: rgba(var(--white), 1);
            border: 1px solid rgba(var(--border-color), 1);
            color: rgba(var(--title-color), 1);
            padding: 0;
            font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
            display: flex;
            align-items: center;
            justify-content: center;

            body.dark & {
              color: rgba(var(--white), 1);
              border-color: rgba(var(--white), 0.2);
              background-color: rgba(var(--white), 0.1);
            }
          }
        }
      }
    }

    .logout-box {
      padding: 15px;
      margin-top: 10px;
      background-color: rgba(var(--primary-color), 0.06);
      border-radius: 20px;
      // border-left: 2px solid rgba(var(--primary-color), 0.5);
      // border-right: 2px solid rgba(var(--primary-color), 0.5);

      body.dark & {
        background-color: rgba(var(--white), 0.1);
      }

      .btn {
        width: 100%;
        text-align: unset;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: 18px;
        font-weight: 500;
        color: rgba(var(--title-color), 1);
        background-color: transparent;

        &.active {
          color: rgba(var(--primary-color), 1);

          i {
            color: rgba(var(--primary-color), 1);


          }
        }

        i {
          width: 40px;
          height: 40px;
          transition: all 0.15s ease-in-out;
          border-radius: 100%;
          background-color: rgba(var(--white), 1);
          font-size: 20px;
          border: 1px solid rgba(var(--border-color), 1);
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;

          body.dark & {
            background-color: rgba(var(--primary-color), 1);
            border: rgba(var(--white), 0.2);
          }
        }
      }
    }
  }

  .profile-bg-overlay {
    opacity: 0;
    visibility: hidden;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    transition: all 0.25s ease-in-out;
    left: 0;
    z-index: 2;
    background-color: rgba(34, 34, 34, 1);

    &.show {
      opacity: 0.5;
      visibility: visible;
    }
  }

  .right-details-box {
    height: 100%;

    @media (max-width: 991px) {
      height: auto !important;
    }

    .dashboard-details-box {
      padding: 0 !important;

      .dashboard-title {
        padding: 20px;
        margin-bottom: 0 !important;
        border-bottom: 4px solid #f4f4f4;

        body.dark & {
          border-color: rgba(var(--white), 0.2);
          color: rgba(var(--white), 1);

          a {
            color: rgba(var(--white), 1) !important;
          }
        }

        h3 {
          font-size: 22px !important;
          font-weight: 500 !important;

          body.dark & {
            color: rgba(var(--white), 1);
          }
        }
      }

      .wallet-main-box {
        padding: 20px;
        margin-bottom: 0 !important;
        border: none !important;
      }

      .cards-wrapper {
        padding: 0 20px 20px;
      }
    }

    .btn-show-menu {
      background-color: rgba(var(--primary-color), 1);
      color: rgba(var(--white), 1);
      margin-bottom: 15px;
      border: 1px solid rgba(var(--primary-color), 1);

      &:hover {
        color: rgba(var(--primary-color), 1);
        background-color: transparent;
      }
    }

    .pagination-main {
      .pagination-box {
        .pagination {
          border: none;
          margin-top: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
          padding-block: calc(5px + (16 - 5) * ((100vw - 320px) / (1920 - 320)));

          .page-item {
            &.active {
              .page-link {
                background-color: rgba(var(--primary-color), 1);
              }
            }

            .page-link {
              background-color: rgba(var(--white), 1);
            }
          }
        }
      }
    }

    .dashboard-details-box {
      padding: calc(15px + 5 * (100vw - 320px) / 1600);
      background-color: rgba(var(--white), 1);
      border: 1px solid rgba(var(--border-color), 1);
      height: 100%;
      border-radius: 20px;
      box-shadow: 0px 0px 20px 0px rgb(75 76 76 / 13%);

      body.dark & {
        background-color: rgba(var(--primary-color), 1) !important;
        border-color: rgba(var(--white), 0.2);
      }

      @media (max-width: 991.98px) {
        height: auto;
      }


      .dashboard-title {
        margin-bottom: calc(18px + (30 - 18) * ((100vw - 320px) / (1920 - 320)));

        &:has(a) {
          flex-wrap: wrap;
          gap: 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        &.b-bottom {
          border-bottom: 1px solid rgba(var(--border-color), 1);
          padding-bottom: 30px;
          margin-bottom: 30px;
        }

        h3 {
          font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 600;
          color: rgba(var(--title-color), 1);
        }

        a {
          color: rgba(var(--primary-color), 1);
          font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 500;
          text-decoration: underline;
        }
      }

      .dashboard-sub-title {
        margin-bottom: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));

        ~.dashboard-sub-title {
          margin-top: calc(25px + (50 - 25) * ((100vw - 320px) / (1920 - 320)));
        }

        h3 {
          font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 600;
          color: rgba(var(--title-color), 1);
        }
      }

      .wallet-main-box {
        margin-bottom: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
        padding-bottom: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
        border-bottom: 1px solid rgba(var(--border-color), 1);


      }

      .wallet-box {
        border: none;
        padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
        background-color: rgba(var(--primary-color), 0.06);
        border-left: 2px solid rgba(var(--primary-color), 1);
        border-radius: 20px;
        position: relative;
        overflow: visible;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320)));

        body.dark & {
          background-color: rgba(var(--white), 0.1) !important;
          border-color: rgba(var(--white), 1);
        }

        // &:before,
        // &:after {
        //   z-index: -1;
        //   content: "";
        //   position: absolute;
        //   top: 50%;
        //   transform: translateY(-50%);
        //   width: 112px;
        //   height: calc(100% + 60px);
        //   border-radius: 100% 0 0 100%;
        // }

        // &:before {
        //   right: -22px;
        // }

        // &:after {
        //   right: -47px;
        // }

        .wallet-number {
          width: calc(100% - calc(56px + (70 - 56) * ((100vw - 320px) / (1920 - 320))) - calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320))));

          body.dark & {

            h2 {
              color: rgba(var(--white), 1);
            }

            h5 {
              color: rgba(var(--white), 0.8);
            }
          }
        }

        // &.wallet-color-1 {
        //   background-color: #f0f7fe;

        //   .icon-box {
        //     background-color: rgba(var(--white), 1);

        //     svg {
        //       color: #6aaef0;
        //       fill: #6aaef0;
        //     }
        //   }
        // }

        // &.wallet-color-3 {
        //   background-color: #fffaeb;

        //   .icon-box {
        //     background-color: rgba(var(--white), 1);

        //     svg {
        //       fill: #fcca4d;
        //     }
        //   }
        // }

        // &.wallet-color-2 {
        //   background-color: #f6f3ff;

        //   .icon-box {
        //     background-color: rgba(var(--white), 1);

        //     svg {
        //       fill: #b08bfa;
        //     }
        //   }
        // }

        h2 {
          font-size: calc(22px + (30 - 22) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 600;
          color: rgba(var(--primary-color), 1);
        }

        h5 {
          margin-top: calc(2px + (5 - 2) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 400;
          font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
          color: #777777;
        }

        .icon-box {
          border-radius: 16px;
          width: calc(56px + (72 - 56) * ((100vw - 320px) / (1920 - 320)));
          height: calc(56px + (72 - 56) * ((100vw - 320px) / (1920 - 320)));
          padding: calc(13px + (17 - 13) * ((100vw - 320px) / (1920 - 320)));
          background-color: rgba(var(--primary-color), 0.09);

          body.dark & {
            background-color: rgba(var(--white), 0.1) !important;
            border-color: rgba(var(--white), 1);
          }

          svg {
            width: 100%;
            height: 100%;
            stroke: rgba(var(--primary-color), 1);

            body.dark & {
              stroke: transparent;
              fill: rgba(var(--white), 1);
            }
          }
        }
      }

      .card-content {
        padding: 0;
        border: 1px solid #fff;
        border-radius: 20px;
        box-shadow: 0px 2px 20px 0px rgba(13, 31, 61, 0.0509803922);
        // height: 100%;
        background: #f2f2f2;

        body.dark & {
          background-color: rgba(var(--white), 0.1);
          border-color: rgba(var(--white), 0.2);
        }

        .dashboard-sub-title {
          padding: 20px;
          border-bottom: 4px solid #ffffff;

          body.dark & {
            border-color: rgba(var(--white), 0.2);

            h3 {
              color: rgba(var(--white), 1);
            }
          }

          h3 {
            font-size: 22px;
            font-weight: 500;
          }
        }

        .profile-info-list {
          padding: 0 20px 20px;
        }
      }

      .profile-info-list {
        display: flex;
        flex-direction: column;
        gap: 8px;

        li {
          font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 400;
          color: #777;
          display: flex;
          align-items: center;
          gap: 15px;

          body.dark & {
            color: rgba(var(--white), 0.6);
          }

          span {
            min-width: calc(70px + (90 - 70) * ((100vw - 320px) / (1920 - 320)));
            display: block;
            font-weight: 500;
            color: #222;

            body.dark & {
              color: rgba(var(--white), 1);
            }

          }

          a {
            font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
            font-weight: 500;
            text-decoration: underline;

            body.dark & {
              color: rgba(var(--white), 1);
            }

            &:hover {
              text-decoration: unset;
            }
          }
        }
      }

      .notification-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
        height: 100%;

        li {
          padding: calc(8px + (14 - 8) * ((100vw - 320px) / (1920 - 320)));
          border-radius: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
          background-color: rgba(var(--white), 1);
          border: 1px solid rgba(var(--border-color), 1);
          display: flex;
          align-items: center;
          gap: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));

          @media (max-width: 575.98px) {
            flex-direction: column;
            align-items: unset;
            position: relative;
          }

          i {
            width: calc(42px + (60 - 42) * ((100vw - 320px) / (1920 - 320)));
            height: calc(42px + (60 - 42) * ((100vw - 320px) / (1920 - 320)));
            border: 1px solid rgba(var(--border-color), 1);
            background-color: rgba(var(--white), 1);
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(var(--primary-color), 1);
            font-size: calc(24px + (32 - 24) * ((100vw - 320px) / (1920 - 320)));
          }

          .notification-content {
            width: calc(100% - calc(42px + (60 - 42) * ((100vw - 320px) / (1920 - 320))) - calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))));
            position: relative;

            @media (max-width: 575.98px) {
              width: 100%;
              position: unset;
            }

            h4 {
              font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
              font-weight: 500;
              color: rgba(var(--title-color), 1);
            }

            p {
              color: rgba(var(--content-color), 1);
              line-height: 1.3;
              font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
              font-weight: 400;
            }

            span {
              color: rgba(var(--content-color), 1);
              font-size: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)));
              font-weight: 400;
              position: absolute;
              top: 0;
              right: 0;

              body.rtl & {
                right: unset;
                left: 0;
              }

              @media (max-width: 575.98px) {
                top: calc(10px + (15 - 10) * ((100vw - 320px) / (575 - 320)));
                right: calc(10px + (15 - 10) * ((100vw - 320px) / (575 - 320)));

                body.rtl & {
                  right: unset;
                  left: calc(10px + (15 - 10) * ((100vw - 320px) / (575 - 320)));
                }
              }
            }
          }

          &.unread {
            background-color: rgba(var(--primary-color), 0.15);
            border-color: rgba(var(--primary-color), 0.7);

            .notification-content {
              h4 {
                color: rgba(var(--primary-color), 1);
                font-weight: 600;
              }

              p,
              span {
                color: rgba(var(--title-color), 0.8);
              }
            }
          }
        }
      }

      .dashboard-svg {
        width: calc(200px + (388 - 200) * ((100vw - 320px) / (1920 - 320)));
        height: calc(225px + (388 - 225) * ((100vw - 320px) / (1920 - 320)));
      }

      .history-table {
        margin-bottom: 0;

        thead {
          tr {
            th {
              padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))) calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
              background-color: rgba(var(--white), 1);
              font-weight: 500;
              font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
              border: none;
              color: rgba(var(--title-color), 1);

              body.dark & {
                background-color: rgba(var(--white), 0.1);
                color: rgba(var(--white), 1);
              }
            }
          }
        }

        tbody {
          tr {
            &:nth-child(even) {
              background-color: rgba(var(--white), 1);

              body.dark & {
                background-color: rgba(var(--white), 0.1);
                color: rgba(var(--white), 1);
              }
            }

            td {
              padding: calc(8px + (12 - 8) * ((100vw - 320px) / (1920 - 320))) calc(16px + (23 - 16) * ((100vw - 320px) / (1920 - 320)));
              font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
              font-weight: 500;
              vertical-align: middle;
              color: rgba(var(--title-color), 1);
              border: none;

              body.dark & {
                color: rgba(var(--white), 1);
              }

              &:nth-child(6) {
                min-width: calc(134px + (186 - 134) * ((100vw - 320px) / (1920 - 320)));
              }

              &:last-child {
                text-align: center;
              }

              .profile-box {
                display: flex;
                align-items: center;
                gap: 10px;

                img {
                  width: 40px;
                  height: 40px;
                  border-radius: 100%;
                }

                .profile-name {
                  width: calc(100% - 40px - 10px);

                  h5 {
                    font-size: 16px;
                    font-weight: 500;
                    color: rgba(var(--title-color), 1);

                    body.dark & {
                      color: rgba(var(--white), 1);
                    }
                  }

                  h6,
                  span {
                    font-size: 15px;
                    margin-top: 2px;
                    font-weight: 400;
                    word-wrap: break-word;
                    color: rgba(var(--content-color), 1);

                    body.dark & {
                      color: rgba(var(--white), 0.6);
                    }
                  }
                }
              }

              .action-icon {
                color: rgba(var(--title-color), 1);

                body.dark & {
                  color: rgba(var(--white), 1);
                }

                i {
                  font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
                }
              }
            }
          }
        }
      }

      .wallet-table {
        margin-bottom: 0;

        thead {
          tr {
            background-color: #f4f4f4 !important;

            body.dark & {
              background-color: rgba(var(--white), 0.1) !important;
            }

            th {
              color: #777777;
              padding: calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320))) calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
              font-weight: 500;
              font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
              text-align: center;
              border: none;

              body.dark & {
                color: rgba(var(--white), 1);
              }

              &:first-child {
                text-align: start;
              }
            }
          }
        }

        tbody {
          tr {
            border-bottom: 4px solid #f4f4f4;

            body.dark & {
              border-color: rgba(var(--white), 0.1);
            }

            &:nth-child(even) {
              background-color: rgba(var(--white), 1);

              body.dark & {
                background-color: rgba(var(--white), 0.1);
              }
            }

            &:last-child {
              border: none;
            }

            td {
              padding: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320))) calc(16px + (23 - 16) * ((100vw - 320px) / (1920 - 320)));
              font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
              font-weight: 400;
              vertical-align: middle;
              color: rgba(var(--content-color), 1);
              border: none;
              text-align: center;

              body.dark & {
                color: rgba(var(--white), 1);
              }

              &:first-child {
                min-width: 180px;
                text-align: start;
              }

              &:nth-child(3) {
                min-width: calc(212px + (350 - 212) * ((100vw - 320px) / (1920 - 320)));
              }

              &:last-child {
                display: flex;
                justify-content: center;
              }

              .badge-debit {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                width: max-content;

                i {
                  &.ri-arrow-left-down-long-line {
                    display: block;
                  }

                  &.ri-arrow-left-up-long-line {
                    display: none;
                  }
                }
              }

              .badge-credit {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                width: max-content;

                i {
                  &.ri-arrow-left-down-long-line {
                    display: none;
                  }

                  &.ri-arrow-left-up-long-line {
                    display: block;
                  }
                }
              }
            }
          }
        }

        ~.pagination-main {
          .pagination-box {
            .pagination {
              border: none;
              margin-top: 19px;
              padding-block: 16px;
            }
          }
        }
      }

      .address-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 20px;
        gap: calc(18px + (30 - 18) * ((100vw - 320px) / (1920 - 320)));

        @media (max-width: 1399.98px) {
          grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 1199.98px) {
          grid-template-columns: 1fr;
        }

        @media (max-width: 991.98px) {
          grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 575.98px) {
          grid-template-columns: 1fr;
        }

        &:has(.dashboard-no-data) {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
        }

        .address-box {
          padding: 0;
          border-radius: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
          background-color: #f4f4f4;
          border: 1px solid rgba(var(--border-color), 1);

          body.dark & {
            background-color: rgba(var(--white), 0.1);
            border-color: rgba(var(--white), 0.1);
          }

          .address-top {
            display: flex;
            align-items: center;
            border-bottom: 4px solid #ffffff;
            margin-bottom: 10px;
            padding: calc(8px + (15 - 8) * ((100vw - 320px) / (1920 - 320)));

            body.dark & {
              border-color: rgba(var(--white), 0.1);
            }

            .badge-primary {
              border-radius: 30px;
              background-color: #2222221a !important;
              color: #222222;

              body.dark & {
                color: rgba(var(--white), 1);
                background-color: rgba(var(--primary-color), 1) !important;
              }
            }

            .edit-delete {
              margin-left: auto;

              body.rtl & {
                margin-left: unset;
                margin-right: auto;
              }

              .btn {
                padding: 0;
                border-radius: 0;
                line-height: 1;

                i {
                  line-height: 1;
                  font-size: calc(17px + (20 - 17) * ((100vw - 320px) / (1920 - 320)));
                }

                +.btn {
                  border-left: 1px solid #22222220;
                  margin-left: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
                  padding-left: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));

                  body.rtl & {
                    border-left: unset;
                    margin-left: unset;
                    padding-left: unset;
                    border-right: 1px solid rgba(var(--border-color), 1);
                    margin-right: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
                    padding-right: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
                  }
                }

                &.edit {
                  color: #60a5fa;
                }

                &.delete {
                  color: #f33737;
                }
              }
            }
          }

          .address-bottom {
            padding: calc(8px + (15 - 8) * ((100vw - 320px) / (1920 - 320)));

            i {
              background-color: #ffffff;
              height: 40px;
              width: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 10px;
              border-radius: 100%;
              color: #777777;
              font-size: 20px;

              body.dark & {
                background-color: rgba(var(--primary-color), 1);
                color: rgba(var(--white), 1);
              }
            }

            p {
              display: flex;
              gap: 10px;
              align-items: flex-start;
              font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
              font-weight: 500;
              color: #222222;

              body.dark & {
                color: rgba(var(--white), 1);
              }

              span {
                word-break: break-word;
              }
            }
          }
        }
      }

      .save-address-map-box {
        position: relative;

        iframe {
          width: 100%;
          height: 686px;
          border-radius: 10px;
        }

        .map-input-search {
          position: absolute;
          top: 0;
          left: 0;
          width: calc(100% - 40px);
          margin: 20px 20px 0;

          .form-control {
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0px 4px 20px 0px #171c2617;
            background-color: rgba(var(--white), 1);
            width: 100%;
            padding-left: 60px;
            border: none;
          }

          i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            padding-inline: 15px 10px;
            border-right: 1px solid rgba(var(--border-color), 1);
            font-size: 24px;
            font-weight: 500;
            color: rgba(var(--title-color), 1);
          }
        }

        .btn {
          position: absolute;
          bottom: 20px;
          right: 20px;

          &:hover {
            background-color: rgba(var(--white), 1);
          }
        }
      }

      .location-details-box {
        padding: 20px;

        .radio-group-list {
          display: flex;
          align-items: center;
          gap: calc(11px + (20 - 11) * ((100vw - 320px) / (1920 - 320)));
          overflow: auto;
          padding: 0;

          &:has(li label.error) {
            padding-bottom: 24px;
          }

          &:has(li label.error[style="display: none;"]) {
            padding-bottom: 0;
          }

          li {
            position: relative;

            .form-check-input {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              margin: 0;
              opacity: 0;

              &:checked {
                ~.form-check-label {
                  background-color: rgba(var(--primary-color), 1);
                  color: rgba(var(--white), 1);

                  .circle {
                    background-color: rgba(255, 255, 255, 0.25);
                    border-color: transparent;

                    &::before {
                      transform: translate(-50%, -50%) scale(1);
                    }
                  }
                }
              }
            }

            .form-check-label {
              font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
              font-weight: 500;
              display: flex;
              align-items: center;
              gap: 10px;
              color: rgba(var(--title-color), 1);
              background-color: #f4f4f4;
              padding: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320))) calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
              transition: all 0.2s ease-in-out;
              border: 1px solid rgba(var(--border-color), 1);
              border-radius: calc(18px + (30 - 18) * ((100vw - 320px) / (1920 - 320)));
              cursor: pointer;
              position: relative;

              body.dark & {
                background-color: #1d202a;
                color: rgba(var(--white), 1);
                border-color: rgba(var(--white), 0.1);
              }

              .circle {
                width: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
                height: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
                border-radius: 100%;
                border: 1px solid rgba(var(--border-color), 1);
                position: relative;
                z-index: 0;
                margin: 0;
                transition: all 0.2s ease-in-out;
                background-color: rgba(var(--white), 1);

                &::before {
                  content: "";
                  position: absolute;
                  top: 50%;
                  width: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
                  height: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
                  left: 50%;
                  transform: translate(-50%, -50%) scale(0);
                  background-color: rgba(var(--white), 1);
                  border-radius: 100%;
                  transition: all 0.2s ease-in-out;
                }
              }
            }

            label.error {
              position: absolute;
              bottom: -24px;
              width: 100%;
              white-space: nowrap;
            }
          }
        }

        .modal-footer {
          padding: 0;
          border: none;
          margin-top: calc(26px + (50 - 26) * ((100vw - 320px) / (1920 - 320)));
          border-radius: 0;
          display: flex;
          flex-wrap: nowrap;
          gap: calc(10px + (30 - 10) * ((100vw - 320px) / (1920 - 320)));

          .btn {
            padding: calc(11px + (13 - 11) * ((100vw - 320px) / (1920 - 320))) calc(18px + (36 - 18) * ((100vw - 320px) / (1920 - 320)));
            font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));

            &.cancel-btn {
              background-color: rgba(var(--white), 1);
              color: #888888;
              border: 1px solid rgba(var(--border-color), 1);
            }
          }
        }
      }
    }

    .table-details-box {
      padding: 0;
      background-color: unset !important;

      .table-responsive {
        border-radius: 30px;
        height: calc(100vh - 300px);

        tr {
          transition: all 0.4s ease-in-out;

          &:hover {
            box-shadow: 0 0 20px #d6d6d6;
            transition: all 0.4s ease-in-out;

            body.dark & {
              box-shadow: none;
            }
          }
        }
      }

      thead tr th {
        background-color: #fff;

        body.dark & {
          background-color: rgba(var(--white), 0.1 !important);
        }
      }
    }
  }
}

/*=====================
    User Dashboard SCSS End
==========================*/

.create-ride-section {
  padding-block: 40px;

  body.dark & {
    background-color: #1d202a;
  }

  .left-map-box {
    transition: all 0.25s ease-in-out;
    position: relative;

    .map-view {
      height: 500px;
      border-radius: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
    }

    .save-address-map-box {
      position: relative;

      iframe {
        width: 100%;
        height: 686px;
        border-radius: 10px;
      }

      .duration-distance-box {
        display: flex;
        align-items: center;
        gap: calc(14px + (30 - 14) * ((100vw - 320px) / (1920 - 320)));
        margin-bottom: calc(14px + (30 - 14) * ((100vw - 320px) / (1920 - 320)));

        @media (max-width: 1199.98px) {
          flex-wrap: wrap;
        }

        @media (max-width: 991.98px) {
          flex-wrap: nowrap;
        }

        @media (max-width: 480.98px) {
          flex-wrap: wrap;
        }

        li {
          display: flex;
          align-items: center;
          gap: 15px;
          justify-content: space-between;
          padding: calc(12px + (18 - 12) * ((100vw - 320px) / (1920 - 320))) calc(12px + (15 - 12) * ((100vw - 320px) / (1920 - 320)));
          background-color: #f4f4f4;
          border: 1px solid rgba(var(--border-color), 1);
          border-radius: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
          width: 100%;
          font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 400;
          color: rgba(var(--content-color), 1);

          body.dark & {
            background-color: rgba(var(--primary-color), 1);
            border-color: rgba(var(--white), 0.05);
            color: rgba(var(--white), 1);
          }

          span {
            font-weight: 600;
            color: rgba(var(--title-color), 1);

            body.dark & {
              color: rgba(var(--white), 1);
            }
          }
        }
      }
    }

    .location-view-accordion {
      position: absolute;
      top: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
      right: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
      width: calc(245px + (330 - 245) * ((100vw - 320px) / (1920 - 320)));
      box-shadow: 0px 4px 40px 0px rgba(var(--title-color), 0.1);

      .accordion-item {
        padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
        background-color: rgba(var(--white), 1);
        border: 1px solid rgba(var(--border-color), 1);

        .accordion-header {
          .accordion-button {
            color: rgba(var(--title-color), 1);
            background-color: transparent;
            box-shadow: none;
            font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
            font-weight: 600;
            padding: 0;

            &::after {
              content: "\ea4e";
              @include icon;
              background: none;
              font-weight: 100;
              width: auto;
              height: auto;
              font-size: calc(20px + (22 - 20) * ((100vw - 320px) / (1920 - 320)));
              line-height: 1;

              body.rtl & {
                margin-left: unset;
                margin-right: auto;
              }
            }
          }
        }

        .accordion-collapse {
          border-top: 1px solid rgba(var(--border-color), 1);
          padding-top: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
          margin-top: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));

          .accordion-body {
            padding: 0;

            .tracking-path {
              li {
                display: flex;
                align-items: center;
                color: rgba(var(--title-color), 1);
                gap: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320)));
                font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
                position: relative;

                +li {
                  padding-top: calc(13px + (15 - 13) * ((100vw - 320px) / (1920 - 320)));

                  &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 10px;
                    width: 3px;
                    height: calc(100% - 22px);
                    border-left: 1px dashed rgba(var(--title-color), 1);

                    body.rtl & {
                      left: unset;
                      right: 10px;
                    }
                  }
                }

                i {
                  font-size: calc(20px + (22 - 20) * ((100vw - 320px) / (1920 - 320)));
                  line-height: 1;
                }

                span {
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  display: -webkit-box;
                  overflow: visible;
                }
              }
            }
          }
        }
      }
    }
  }

  .alert-message {
    background-color: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 0;
    padding: calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
      color: #664d03;

      i {
        font-size: inherit;
      }
    }

    button {
      background: transparent;
      border: unset;

      i {
        font-size: 20px;
      }
    }
  }

  .right-details-box {
    padding: 0;
    background-color: rgba(var(--primary-color), 0.06);
    border: 1px solid rgba(var(--border-color), 1);
    border-radius: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
    box-shadow: 0px 2px 20px 0px #0d1f3d0d;

    body.dark & {
      background-color: rgba(var(--primary-color), 1);
      border-color: rgba(var(--white), 0.1);
    }

    .mt-30 {
      margin-top: 30px;
    }

    .dashboard-title {
      // margin-bottom: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
      border-bottom: 4px solid rgba(var(--white), 1);
      padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px 10px;

      body.dark & {
        border-color: rgba(var(--white), 0.1) !important;
      }

      .ride-details-box {
        display: flex;
        align-items: center;
        gap: 8px 20px;
        flex-wrap: wrap;

        .date-time-list {
          display: flex;
          align-items: center;

          li {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            font-weight: 500;

            +li {
              margin-left: 10px;
              padding-left: 10px;
              border-left: 1px solid rgba(var(--border-color), 1);
            }

            i {
              line-height: 1;
              font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
              color: rgba(var(--content-color), 1);
              font-weight: 100;

              body.dark & {
                color: rgba(var(--white), 1);
              }
            }
          }
        }

        .badge-group-list {
          display: flex;
          align-items: center;
          gap: 15px;
        }
      }

      h3 {
        font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 600;
        color: rgba(var(--title-color), 1);

        body.dark & {
          color: rgba(var(--white), 1);
        }
      }

      a {
        color: rgba(var(--primary-color), 1);
        font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 500;
        text-decoration: underline;

        body.dark & {
          color: rgba(var(--white), 1);
        }
      }
    }

    .coupon-code-box {
      position: relative;
      margin-top: 30px;

      .form-control {
        padding: 15px 135px 15px 20px;
        border-radius: 100px;
        background-color: #fafafa;
        font-weight: 500;
        color: rgba(var(--title-color), 1);
        font-size: 18px;
        border: none;
        box-shadow: none;

        body.dark & {
          color: rgba(var(--white), 1);
        }

        &::placeholder {
          color: rgba(var(--content-color), 1);
          font-weight: 400;

          body.dark & {
            color: rgba(var(--white), 1);
          }
        }
      }

      .btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 5px;
        padding-block: 8px;
        height: calc(100% - 10px);
      }
    }

    .select-vehicles-box {
      .form-label {
        font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 500;
        color: rgba(var(--title-color), 1);
        margin-bottom: calc(8px + (15 - 8) * ((100vw - 320px) / (1920 - 320)));
        display: block;

        body.dark & {
          color: rgba(var(--white), 1);
        }
      }

      .vehicles-box {
        border: 1px solid rgba(var(--border-color), 1);
        border-radius: 12px;
        position: relative;
        padding: 8px;
        background-color: rgba(var(--white), 1);
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;

        body.dark & {
          background-color: #373737;
          border-color: rgba(255, 255, 255, 0.092);
        }

        &:hover {
          border-color: rgba(var(--primary-color), 0.3);
        }

        &:has(.form-check-input:checked) {
          border: 2px solid rgba(var(--primary-color), 1);
          padding: 7px; // Adjust for 2px border to maintain size if needed

          .vehicles-image {
            background-color: rgba(var(--primary-color), 0.05);
            body.dark & {
              background-color: rgba(var(--primary-color), 1);
            }
          }
        }

        .form-check-input {
          position: absolute;
          inset: 0;
          z-index: 1;
          margin: 0;
          opacity: 0;
          cursor: pointer;
        }

        .vehicles-image {
          padding: 15px;
          border-radius: 8px;
          background-color: #f7f7f7; // Match the light gray in image
          height: 90px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          margin-bottom: 10px;
          body.dark & {
            background-color: rgba(var(--primary-color), 1);
          }

          img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
          }
        }

        .vehicles-details {
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          text-align: left;

          .name-price {
            margin-bottom: 10px;

            &.price {
              font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
              margin-top: 2;
              font-weight: 600;
              color: rgba(var(--primary-color), 1);

              body.dark & {
                color: rgba(var(--white), 1);
              }
            }
          }

          .info-btn {
            margin-top: auto;
            width: 100%;
            background-color: #030712; // Standard black
            color: #fff;
            padding: 8px 10px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 6px;
            z-index: 2;
            position: relative;

            &:hover {
              background-color: #111827;
            }
          }
        }
      }

      .spinner-border {
        color: rgba(var(--primary-color), 1);

        body.dark & {
          color: rgba(var(--white), 1);
        }
      }

      .vehicle-slider-box {
        .swiper-wrapper {
          &:has(.data-not-found-box) {
            display: block;
          }
        }

        .vehicle-spinner-box {
          background-color: rgba(var(--white), 1);
          border: 1px solid rgba(var(--border-color), 1);
          border-radius: 10px;
          height: 145px;
          display: grid;
          place-items: center;
        }
      }

      .data-not-found-box {
        height: 110px;
        background-color: rgba(var(--white), 1);
        border: 1px solid rgba(var(--border-color), 1);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          font-size: 18px;
          font-weight: 500;
          color: rgba(var(--title-color), 1);

          body.dark & {
            color: rgba(var(--white), 1);
          }
        }
      }
    }

    .confirm-btn {
      width: 100%;
      margin-top: 15px;
      color: rgba(var(--white), 1);
    }

    .general-details-box {
      padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
      border-radius: 10px;
      background-color: rgba(var(--white), 1);
      border: 1px solid rgba(var(--border-color), 1);

      +.general-details-box {
        margin-top: calc(18px + (30 - 18) * ((100vw - 320px) / (1920 - 320)));
      }

      .general-title {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: space-between;
        margin-bottom: 15px;

        .btn {
          text-transform: capitalize;

          i {
            font-size: inherit;
            margin-right: 6px;
          }
        }

        h3 {
          font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 600;
        }

        .invoice-btn {
          padding: 9px 16px;
          font-size: 15px;
        }
      }

      .general-details-list {
        display: flex;
        flex-direction: column;

        li {
          font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 400;
          display: flex;
          justify-content: space-between;
          gap: 15px;
          align-items: center;
          color: rgba(var(--content-color), 1);

          .payment-img {
            height: calc(36px + (50 - 36) * ((100vw - 320px) / (1920 - 320)));
          }

          +li {
            margin-top: calc(8px + (15 - 8) * ((100vw - 320px) / (1920 - 320)));
          }

          span {
            color: rgba(var(--title-color), 1);
            font-weight: 500;
          }

          .t-success,
          &.t-success {
            color: #20b149;
          }

          .t-danger {
            color: #f33737;
          }

          &.total {
            margin-top: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
            padding-top: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
            border-top: 1px dashed rgba(var(--border-color), 1);
            color: rgba(var(--title-color), 1);
            font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
            font-weight: 500;

            span {
              font-weight: 700;
              color: #20b149;
            }
          }
        }
      }

      .personal {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;

        @media (max-width: 767.98px) {
          display: block;
        }

        .information {
          display: flex;
          align-items: center;
          gap: 30px;

          @media (max-width: 767.98px) {
            gap: calc(15px + (30 - 15) * ((100vw - 445px) / (768 - 445)));
          }

          .border-image {
            position: relative;
            z-index: 0;

            &::before {
              z-index: -1;
              content: "";
              position: absolute;
              inset: 0;
              border-radius: 100%;
              padding: 2px;
              background: linear-gradient(180deg,
                  rgba(var(--primary-color), 1) 0%,
                  rgba(var(--primary-color), 0.14) 100%);
              -webkit-mask: linear-gradient(rgba(var(--white), 1) 0 0) content-box,
                linear-gradient(rgba(var(--white), 1) 0 0);
              -webkit-mask-composite: xor;
              mask-composite: exclude;
            }

            .profile-img {
              border-radius: 50%;

              img {
                margin: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));
                object-fit: cover;
                width: calc(52px + (76 - 52) * ((100vw - 320px) / (1920 - 320)));
                height: calc(52px + (76 - 52) * ((100vw - 320px) / (1920 - 320)));
                border-radius: 100%;
              }
            }
          }

          .personal-rating {
            h5 {
              font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
              font-weight: 600;
              margin-bottom: 0;
              letter-spacing: unset;

              a {
                color: rgba(var(--title-color), 1);
              }
            }

            .rating {
              margin-top: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320)));
              font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
              color: rgba(var(--content-color), 1);
              font-weight: 500;
              display: flex;
              align-items: center;
              gap: 4px;
              line-height: 1;

              span {
                color: rgba(var(--content-color), 1);
                font-size: 16px;
                font-weight: 500;
                display: flex;
                align-items: center;

                i {
                  color: #ed8a19;
                  font-size: 18px;
                  margin-left: 10px;

                  body.rtl & {
                    margin-left: unset;
                    margin-right: 10px;
                  }
                }

                span {
                  font-size: 16px;
                  color: rgba(var(--content-color), 1);
                  font-weight: 500;
                  margin-left: 4px;

                  body.rtl & {
                    margin-left: unset;
                    margin-right: 4px;
                  }
                }
              }
            }
          }
        }

        .personal-details-list {
          padding-left: 41px;
          border-left: 1px solid rgba(var(--border-color), 1);
          display: grid;
          margin-left: -20px;
          gap: 15px;

          body.rtl & {
            padding-right: 41px;
            padding-left: unset;
            border-left: unset;
            border-right: 1px solid rgba(var(--border-color), 1);
            margin-left: unset;
            margin-right: -20px;
          }

          @media (max-width: 767.98px) {
            padding-left: calc(95px + (112 - 95) * ((100vw - 445px) / (768 - 445)));
            border: none;
            margin-top: 3px;
            margin-left: unset;

            body.rtl & {
              padding-left: unset;
              padding-right: calc(95px + (112 - 95) * ((100vw - 445px) / (768 - 445)));
            }
          }

          @media (max-width: 443.98px) {
            padding: 0;
            margin-top: 10px;
          }

          li {
            font-size: calc(14px + 2 * (100vw - 320px) / 1600);
            font-weight: 500;
            color: rgba(var(--content-color), 1);
            line-height: 1;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: calc(8px + 2 * (100vw - 320px) / 1600);

            span {
              color: rgba(var(--title-color), 1);
              width: 125px;

              ~span {
                width: auto;
              }
            }

            .vehicle-image {
              position: relative;
              width: 61px;
              height: 31px;
              z-index: 0;

              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }
          }
        }
      }
    }

    .cancel-ride-btn {
      color: rgba(var(--white), 1);
      margin-top: 50px;
      background-color: #f33737;
      padding: 14px 132px;
    }

    .hourly-packages-list-container {
      .select-item {
        .select2 {
          width: 100% !important;
        }
      }
    }

    .form-box {
      .select-item {
        .select2 {
          width: 100% !important;
        }
      }
    }
  }
}

body {
  &:has(.authentication-section) {

    header,
    footer {
      // display: none;
    }
  }
}

.authentication-section {
  // padding-block: 44px 100px;
  // height: 100vh;
  padding: 0;

  .auth-form-box {
    padding:
      /* calc(15px + (100 - 15) * ((100vw - 320px) / (1920 - 320))) */
      0;
    background-color: #f3f4f6;
    border: none;
    border-radius: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
    position: relative;
    padding: 80px 0;
    height: 100%;
    overflow: visible;

    body.dark & {
      background-color: #1d202a;
    }

    .auth-details {
      position: absolute;
      top: 0;
      width: 60%;

      .auth-image {
        object-fit: contain;
        border-radius: 20px;
        margin-inline: auto;
        z-index: 0;
        // height: 100vh;
        position: relative;
        width: 100%;

      }
    }


    .auth-right-box {
      padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
      border-radius: 20px;
      background-color: #f3f4f6;
      border: none;
      position: relative;
      z-index: 1;
      box-shadow: 0px 2px 20px 0px #0d1f3d0d;
      border: 1px solid #d6d6d6;
      box-shadow: 0px 2px 20px 0px rgb(180 180 180);

      body.dark & {
        background-color: rgba(var(--primary-color), 1);
        box-shadow: none;
        border-color: rgba(var(--white), 0.1);
        color: rgba(var(--white), 1) !important;
      }


      h3 {
        font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 600;
        text-align: center;
      }

      h6 {
        margin-top: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
        font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
        color: rgba(var(--content-color), 1);
        text-align: center;
      }

      form {
        margin-top: calc(18px + (40 - 18) * ((100vw - 320px) / (1920 - 320)));

        .form-white-box {
          +.form-white-box {
            margin-top: 20px;
          }

          &.form-icon {
            .form-control {
              padding-left: 60px;
            }
          }

          &.left-right-icon {
            .form-control {
              padding-inline: 60px;
            }
          }

          .form-control {
            padding: 15px;
            border-radius: 10px;
            font-weight: 500;
            color: rgba(var(--title-color), 1);
            font-size: 18px;
            box-shadow: none;
            border: 1px solid rgba(var(--border-color), 1);
            background-color: rgba(var(--white), 1);
            transition: all 0.2s ease-in-out;

            &::placeholder {
              color: rgba(var(--content-color), 1);
              font-weight: 400;
            }
          }

          i {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            font-size: 24px;
            color: rgba(var(--content-color), 1);
            padding-inline: 15px 10px;
            border-right: 1px solid rgba(var(--border-color), 1);

            &.right-icon {
              left: unset;
              right: 15px;
              border: none;
              padding: 0;
              cursor: pointer;
            }
          }
        }
      }

      .otp-btn {
        margin-top: calc(18px + (30 - 18) * ((100vw - 320px) / (1920 - 320)));
        width: 100%;
        text-transform: unset;
        color: rgba(var(--white), 1);

        body.dark & {
          background-color: rgba(var(--white), 0.1);

          &:hover {
            background-color: rgba(var(--white), 0.1) !important;
          }
        }
      }

      .or-box {
        position: relative;
        text-align: center;
        z-index: 0;
        margin-block: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320)));

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 100%;
          height: 2px;
          background-color: rgba(var(--border-color), 1);
          z-index: -1;

          body.dark & {
            background-color: rgba(var(--white), 0.2);
          }
        }

        span {
          padding-inline: calc(11px + (20 - 11) * ((100vw - 320px) / (1920 - 320)));
          font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
          text-transform: capitalize;
          color: rgba(var(--content-color), 1);
          background-color: #f3f4f6;
          font-weight: 500;

          body.dark & {
            background-color: rgba(var(--primary-color), 1);

          }
        }
      }

      .guest-btn {
        width: 100%;
        color: #777777;
        background-color: rgba(var(--primary-color), 0.1);
        border-radius: 10px;
        display: flex;
        align-items: normal;
        gap: 10px;
        justify-content: center;

        body.dark & {
          background-color: rgba(var(--white), 0.1) !important;
          color: rgba(var(--white), 1) !important;
          border-color: rgba(var(--white), 0.09);
        }

        &:hover {
          background-color: rgba(var(--primary-color), 1);
          color: rgba(var(--white), 1);

          span {
            background-color: rgba(var(--white), 1);
          }
        }

        span {
          width: 20px;
          height: 20px;
          background-color: rgba(var(--white), 1);
          border-radius: 100%;
          overflow: visible;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #777777;
          transition: all 0.1s ease-in-out;

          i {
            margin-bottom: -5px;
            color: #777777;
            line-height: 1;
            display: flex;
            align-items: end;
            justify-content: center;
            padding-left: 1px;
            font-size: 19px;
          }
        }
      }

      .new-account {
        margin-top: calc(24px + (40 - 24) * ((100vw - 320px) / (1920 - 320)));
        font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 400;
        color: #777777;
        text-align: center;
        gap: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));

        a {
          color: rgba(var(--primary-color), 1);
          font-weight: 500;
          text-decoration: underline;

          body.dark & {
            color: rgba(var(--white), 1) !important;
          }

          &:hover {
            text-decoration: none;
          }
        }
      }

      .otp-inputs {
        display: flex;
        align-items: center;
        gap: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
        position: relative;
        justify-content: center;

        .form-control {
          text-align: center;
          height: calc(40px + (46 - 40) * ((100vw - 320px) / (1920 - 320)));
          width: calc(40px + (46 - 40) * ((100vw - 320px) / (1920 - 320)));
          padding: 0;
          border-radius: 100%;
          border: 1px solid rgba(var(--border-color), 1);
          color: #222222;
          background-color: #22222222;

          body.dark & {
            color: rgba(var(--white), 1) !important;
            border-color: rgba(var(--white), 0.2) !important;
          }
        }
      }
    }
  }
}

.chatting-main-box {
  padding: 20px;

  .right-sidebar-chat {
    padding: 0;
    display: block;
    border-radius: 10px;

    .contentbox {
      .inside {
        .no-data-container {
          position: absolute;
          inset: 0;
          background-color: rgba(var(--white), 1);
          z-index: 1;
          display: none;
          padding: 15px 18px;
          border-radius: 12px;

          .d-flex {
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: rgb(247, 248, 246);
            border-radius: 10px;
          }

          img {
            max-width: 50%;
            max-height: 50%;
          }
        }

        .chat-item.active {
          background-color: rgba(var(--light-gray), 1);
        }

        .user-round {
          width: calc(39px + (45 - 39) * ((100vw - 320px) / (1920 - 320)));
          height: calc(39px + (45 - 39) * ((100vw - 320px) / (1920 - 320)));
          border-radius: 100%;
          background-color: rgba(var(--primary-color), 0.1);
          border: 1px solid rgba(var(--border-color), 1);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .msger-inputarea {
          position: relative;
        }

        .msger-input-error-icon {
          display: none;
          position: absolute;
          right: 60px;
          top: 50%;
          transform: translateY(-50%);
          color: #dc3545;
          font-size: 18px;
        }

        .msger-input.error~.msger-input-error-icon {
          display: block;
        }

        .right-sidebar-title {
          padding: 0;
          box-shadow: none;

          .common-space {
            .chat-time-chat {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .chat-top-box {
                display: flex;
                align-items: center;
                gap: 10px;
                width: 100%;

                .chat-profile {
                  position: relative;
                  width: calc(39px + (45 - 39) * ((100vw - 320px) / (1920 - 320)));
                  height: calc(39px + (45 - 39) * ((100vw - 320px) / (1920 - 320)));
                  border-radius: 100%;

                  >div {
                    height: 100%;
                  }

                  .user-round {
                    width: 100%;
                    min-width: 100%;
                    height: 100%;
                    border-radius: 100%;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    background-color: rgba(23, 28, 38, 0.08);
                    text-transform: uppercase;

                    h6 {
                      font-size: 20px;
                      color: rgba(23, 28, 38, 0.7);
                      line-height: 1.3;
                      padding: 0;
                      border: none;
                      margin: 0;
                    }
                  }

                  .status {
                    position: absolute;
                    width: 14px;
                    height: 14px;
                    border-radius: 100%;
                    bottom: 5%;
                    right: -2px;
                    border: 3px solid rgba(var(--white), 1);
                  }
                }
              }

              .chatting-option {
                display: flex;
                align-items: center;
                justify-content: center;
                width: calc(35px + (40 - 35) * ((100vw - 320px) / (1920 - 320)));
                height: calc(35px + (40 - 35) * ((100vw - 320px) / (1920 - 320)));
                background-color: rgba(var(--white), 1);
                border: 1px solid rgba(var(--border-color), 1);
                border-radius: 100%;
                font-size: 20px;
                margin-left: auto;

                body.rtl & {
                  margin-left: unset;
                  margin-right: auto;
                }

                a {
                  color: rgba(var(--title-color), 0.75);
                  line-height: 1;

                  i {
                    font-size: 20px;
                  }
                }
              }
            }

            h5 {
              font-size: 14px;
              margin: 0;
              line-height: 1.3;
              font-weight: 500;
              color: rgba(var(--title-color), 1);

              body.dark & {
                color: rgba(var(--white), 1);
              }
            }

            h6 {
              font-size: 14px;
              line-height: 1.3;
              font-weight: 400;
              color: #8d8d8d;
              margin: 3px 0 0;
              padding: 0;
              border: none;

              body.dark & {
                color: rgba(var(--white), 0.8);
              }
            }

            span {
              body.dark & {
                color: rgba(var(--white), 0.8);
              }
            }
          }
        }

        .right-sidebar-Chats {
          margin-top: 14px;
          padding: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
          border: none;
          // height: calc(
          //   100% - 45px - 14px -
          //     calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320))) -
          //     calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320))) -
          //     calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)))
          // );
          position: relative;
          z-index: 0;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("../../public/images/dashboard/front/chat.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-color: #f4f4f4;
            border-radius: 20px;
            // opacity: 0.4;
            z-index: -1;

            body.dark & {
              background-color: rgba(var(--white), 0.1);
            }
          }

          .message {
            .msger-inputarea {
              align-items: unset;
              padding-top: 10px;

              .msger-input {
                border: 1px solid rgba(var(--border-color), 1);
                border-radius: calc(18px + (30 - 18) * ((100vw - 320px) / (1920 - 320)));
                padding: calc(8px + (11 - 8) * ((100vw - 320px) / (1920 - 320))) 10px;
                padding-inline: calc(48px + (60 - 48) * ((100vw - 320px) / (1920 - 320)));
                font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
                font-weight: 400;
                outline: none;
                color: rgba(var(--title-color), 0.8);
                line-height: 1.5;
                background-color: rgba(var(--light-gray), 1);
                width: 100%;

                body.dark & {
                  background-color: rgba(var(--primary-color), 1);
                  border-color: rgba(var(--white), 0.2);
                  color: rgba(var(--white), 1);
                }

                body.rtl & {
                  padding-right: 10px;
                  padding-left: calc(48px + (60 - 48) * ((100vw - 320px) / (1920 - 320)));
                }
              }

              .msger-send-btn {
                font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
                font-weight: 100;
                padding: 0px;
                width: calc(38px + (42 - 38) * ((100vw - 320px) / (1920 - 320)));
                color: rgba(var(--white), 1);
                border-radius: 100%;
                border: none;
                background-color: rgba(var(--primary-color), 1);
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 4px;
                height: calc(38px + (42 - 38) * ((100vw - 320px) / (1920 - 320)));
                display: flex;
                justify-content: center;
                align-items: center;

                body.dark & {
                  background-color: #1d202a;
                  border-color: rgba(var(--white), 0.2);
                }

                body.rtl & {
                  right: unset;
                  left: 4px;
                }

                i {
                  line-height: 1;
                  font-size: 20px;
                }
              }
            }

            .gallery {
              margin-left: -3px !important;
              font-size: calc(20px + 4 * (100vw - 320px) / 1600);
              font-weight: 100;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #aaaaaa;
              border-radius: 8px 0 0 8px;
              border: none;
              background-color: transparent;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 20px;

              i {
                font-size: 26px;
              }
            }

            .msger-chat {
              display: flex;
              padding-top: 10px;
              padding-right: 10px;
              overflow-y: auto;
              flex-direction: column;
              gap: calc(15px + (25 - 15) * ((100vw - 320px) / (1920 - 320)));
              height: calc(100vh - 320px);

              &::-webkit-scrollbar {
                width: 5px;
              }

              &::-webkit-scrollbar-track {
                background: rgba(var(--light-gray), 1);
                border-radius: 100px;
              }

              &::-webkit-scrollbar-thumb {
                background: rgba(var(--primary-color), 1);
                border-radius: 100px;
              }

              @supports not selector(::-webkit-scrollbar) {
                & {
                  scrollbar-color: rgba(var(--primary-color), 1) rgba(var(--light-gray), 1);
                }
              }

              .admin-reply,
              .user-reply {
                display: flex;
                align-items: flex-end;
                gap: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320)));

                .message-profile {
                  width: calc(39px + (45 - 39) * ((100vw - 320px) / (1920 - 320)));
                  height: calc(39px + (45 - 39) * ((100vw - 320px) / (1920 - 320)));
                  border-radius: 100%;
                }

                .chatting-box {
                  max-width: 75%;
                  background-color: rgba(var(--light-gray), 1);
                  border: 1px solid rgba(var(--border-color), 1);
                  padding: calc(7px + (11 - 7) * ((100vw - 320px) / (1920 - 320))) calc(9px + (15 - 9) * ((100vw - 320px) / (1920 - 320)));
                  border-radius: calc(8px + (11 - 8) * ((100vw - 320px) / (1920 - 320))) calc(8px + (11 - 8) * ((100vw - 320px) / (1920 - 320))) calc(8px + (11 - 8) * ((100vw - 320px) / (1920 - 320))) 0;

                  @media (max-width: 575.98px) {
                    max-width: 65%;
                  }

                  p {
                    font-size: 16px;
                    text-align: left;
                    font-weight: 400;
                    color: rgba(var(--title-color), 1);
                    margin-bottom: 0;
                    width: fit-content;
                    word-wrap: break-word;
                    display: block;
                    word-break: break-word;
                  }

                  h6 {
                    font-size: 12px;
                    font-weight: 400;
                    color: rgba(var(--content-color), 1);
                    margin-block: 5px 0;
                    padding-bottom: 0;
                    border: none;
                  }
                }
              }

              .admin-reply {
                flex-direction: row-reverse;

                .chatting-box {
                  background-color: rgba(var(--primary-color), 1);
                  text-align: right;
                  border-radius: calc(8px + (11 - 8) * ((100vw - 320px) / (1920 - 320))) calc(8px + (11 - 8) * ((100vw - 320px) / (1920 - 320))) 0 calc(8px + (11 - 8) * ((100vw - 320px) / (1920 - 320)));

                  p {
                    color: rgba(var(--white), 1);
                    margin-left: auto;
                  }

                  h6 {
                    color: rgba(var(--white), 1);
                  }
                }
              }

              .no-chat-message {
                font-size: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
                height: 100%;
                display: grid;
                place-content: center;
                font-weight: 500;
                letter-spacing: 0.3px;
              }
            }
          }

          .msger-inputarea {
            background: transparent;
          }
        }
      }
    }
  }
}

.pac-container {
  border-radius: 4px;
  box-shadow: 1px 4px 11px rgba(var(--border-color), 0.96);
  border: 1px solid rgba(var(--border-color), 1);
  background-color: rgba(var(--white), 1);
  font-family: var(--font-family);

  &::after {
    height: auto;
    background-position: center right 13px;
    background-size: 126px auto;
    padding: 15px;
    border-top: 1px solid rgba(var(--border-color), 1);
    background-color: rgba(var(--light-gray), 1);
  }

  .pac-item {
    cursor: pointer;
    line-height: 1.3;
    border: none;
    color: rgba(var(--title-color), 1);
    padding: 11px 18px;
    display: flex;
    align-items: center;
    gap: 7px;

    +.pac-item {
      border-top: 1px solid rgba(var(--border-color), 1);
    }

    &:hover {
      background-color: rgba(var(--light-gray), 1);
    }

    .pac-icon {
      background: none;
      width: unset;
      height: unset;
      margin: 0;
      line-height: 1;
      display: block;
      vertical-align: middle;
      font-size: 17px;
      color: rgba(var(--content-color), 1);

      &::before {
        content: "\ef14";
        @include icon;
      }
    }

    .pac-item-query {
      font-size: 15px;
      padding-right: 0;
      color: rgba(var(--title-color), 0.9);

      .pac-matched {
        color: rgba(var(--title-color), 1);
      }
    }

    span {
      &:last-child {
        font-size: 15px;
        color: rgba(var(--content-color), 1);
      }
    }
  }
}

.cargo-box {
  display: flex;
  justify-content: space-around;
  align-items: center;

  .left-box {
    height: 124px;
    width: 222px;

    img {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
  }
}

.success-text {
  color: var(--primary-color);

  span {
    color: var(--primary-color);
  }
}

.tracking-container {
  display: flex;
  min-height: 100vh;
  position: relative;

  .map-section {
    flex: 1;
    position: relative;
    height: 100vh;

    #tracking-map {
      width: 100%;
      height: 100%;
    }

    .map-controls {
      position: absolute;
      bottom: 20px;
      right: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 0;

      .map-control-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(var(--white), 1);
        border: none;
        box-shadow: var(--shadow);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition);
        color: var(--dark);
        font-size: 18px;

        &:hover {
          background: var(--primary);
          color: rgba(var(--white), 1);
        }
      }
    }
  }

  .details-sidebar {
    width: 420px;
    background: #F3F4F6;
    height: 100vh;
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease-in-out;
    z-index: 8;
    display: flex;
    flex-direction: column;

    .sidebar-header {
      padding: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
      border-bottom: 1px solid var(--gray-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(var(--white), 1);
      position: sticky;
      top: 0;
      z-index: 10;

      .sidebar-title {
        font-weight: 600;
        font-size: 18px;
        color: var(--dark);
      }

      .sidebar-toggle {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        transition: var(--transition);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(var(--primary-color), 0.1);
        color: var(--dark);

        &.open {
          i {
            transform: rotate(180deg);
          }
        }
      }
    }

    .ride-header {
      padding: calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
      color: rgba(var(--primary-color), 1);
      background: rgba(var(--white), 1);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: background 0.3s ease;
      text-align: center;
      margin: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
      border-radius: 10px;

      .ride-status-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 16px;

        .status-dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: rgba(var(--primary-color), 1);
          animation: pulse 2s infinite;
        }

        .badge {
          padding: 8px 16px;
          border-radius: 6px;
          font-size: 12px;
          font-weight: 600;
          background: linear-gradient(270deg, rgba(var(--primary-color), 1), rgba(var(--primary-color), 0.30));
          text-transform: uppercase;
        }
      }

      .ride-number {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 8px;
      }
    }

    .status-activities {
      padding: calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
      background: rgba(var(--white), 1);
      border-bottom: 1px solid var(--gray-light);
      margin: 0 calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320))) calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

      .activities-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        margin-bottom: 20px;
        color: var(--dark);
        font-weight: 600;

        i {
          color: var(--primary);
          font-size: 24px;
        }
      }

      .timeline {
        position: relative;
        max-height: 300px;
        overflow-y: auto;
        padding-right: 8px;

        &::before {
          content: "";
          position: absolute;
          left: 15px;
          top: 0;
          bottom: 0;
          width: 2px;
          // background: var(--gray-light);
          border-left: 1.5px solid #eee;
        }

        .timeline-item {
          position: relative;
          padding: 16px 0 16px 40px;
          border-bottom: 1px solid var(--gray-light);

          &:last-child {
            border-bottom: none;
          }

          .timeline-marker {
            position: absolute;
            left: 8px;
            top: 20px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            // background: var(--primary);
            border: 3px solid rgba(var(--white), 1);

            // box-shadow: 0 0 0 2px var(--primary);
            &::before {
              animation: rounded-2 1.3s ease-in-out infinite;
              content: "";
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: calc(100% + 8px + 2 * (100vw - 320px) / 1600);
              height: calc(100% + 8px + 2 * (100vw - 320px) / 1600);
              border-radius: 100%;
              background-color: rgba(var(--primary-color), 0.1) !important;
            }

            &.bg-success {
              background-color: #27af4d;

              &::before {
                background-color: #27af4d;
              }
            }

            &.bg-warning {
              background-color: #ffb900;

              &::before {
                background-color: #ffb900;
              }
            }

            &.bg-completed {
              background-color: #af2c27;

              &::before {
                background-color: #af2c27;
              }
            }
          }

          &.current {
            .timeline-marker {
              background: var(--success);
              // box-shadow: 0 0 0 2px var(--success);
              animation: pulse 2s infinite;
            }
          }

          .timeline-content {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .timeline-status {
              font-weight: 600;
              color: var(--dark);
              flex: 1;
              font-size: 16px;
            }

            .timeline-time {
              font-size: 14px;
              color: var(--gray);
              text-align: right;
            }
          }

          .timeline-description {
            font-size: 13px;
            color: var(--gray);
            margin-top: 4px;
            line-height: 1.4;
          }
        }
      }
    }

    .accordion-section {
      border-bottom: 1px solid var(--gray-light);
      margin: 0 calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320))) calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320))) calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

      &:has(:not(.accordion-collapse.collapsed)) {
        border-radius: 10px;
        background-color: #fff;
      }

      .accordion-header {
        .accordion-button {
          background: rgba(var(--white), 1) !important;
          border: none !important;
          box-shadow: none !important;
          padding: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320))) calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 600;
          color: var(--dark);
          font-size: 16px;
          border-radius: 10px;

          &:not(.collapsed) {
            color: var(--primary);
            background: rgba(var(--primary-color), 0.1) !important;
            border-radius: 10px 10px 0 0;
          }

          i.ri-arrow-down-s-line {
            margin-left: auto;
          }

          &::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233a86ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            display: none;
          }

          i {
            font-size: 22px;
          }
        }
      }
    }

    .accordion-body {
      padding: 0;
    }

    .tracking-path {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        position: relative;
        padding: 16px 20px 16px 0px;
        border-bottom: 1px solid var(--gray-light);
        transition: var(--transition);
        display: flex;
        justify-content: start;
        flex-direction: row-reverse;
        gap: 10px;
        color: #333;
        align-items: center;
        font-size: 16px;

        &:last-child {
          border-bottom: none;
        }

        span {
          color: rgba(var(--white), 1);
          font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 700;
          min-width: calc(30px + (50 - 30) * ((100vw - 320px) / (1920 - 320)));
          height: calc(30px + (50 - 30) * ((100vw - 320px) / (1920 - 320)));
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgba(var(--primary-color), 1);
          border-radius: 100%;
          color: rgba(var(--white), 1);
        }
      }

      li.stop-point {
        &::before {
          background: var(--warning);
        }
      }

      li.end-point {
        &::before {
          background: var(--success);
        }
      }
    }

    .info-section {
      padding: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320))) calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
      transition: var(--transition);

      h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        margin-bottom: 16px;
        color: $color_1;
        font-weight: 600;

        i {
          color: $color_2;
        }
      }
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .user-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: var(--shadow);
    }

    .user-initial {
      width: calc(30px + (50 - 30) * ((100vw - 320px) / (1920 - 320)));
      height: calc(30px + (50 - 30) * ((100vw - 320px) / (1920 - 320)));
      border-radius: 50%;
      background: var(--primary);
      color: $color_3;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1920 - 320)));
      font-weight: 700;
    }

    .user-details {
      h4 {
        font-size: 16px;
        margin-bottom: 4px;
        font-weight: 600;
      }
    }

    .user-rating {
      display: flex;
      align-items: center;
      gap: 4px;
      color: $color_4;
      font-size: 14px;

      i {
        font-size: 14px;
      }
    }

    .info-list {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid var(--gray-light);
        transition: var(--transition);

        &:hover {
          background: rgba(255, 255, 255, 0.5);
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }

    .info-label {
      color: $color_5;
      font-weight: 500;
      font-size: 16px;
    }

    .info-value {
      font-weight: 600;
      text-align: right;
      max-width: 60%;
      font-size: 16px;

    }

    .payment-image {
      height: 24px;
      width: auto;
    }

    .vehicle-image {
      height: 24px;
      width: auto;
      margin-right: 8px;
      vertical-align: middle;
    }

    .price-total {
      padding-top: 12px;
      margin-top: 8px;
      font-weight: 700;
      font-size: 16px;

      .info-label {
        color: var(--dark);
        font-weight: 600;
      }
    }

    .price-success {
      color: $color_6;
    }

    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--dark);
      color: $color_3;
      padding: 12px 20px;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      z-index: 10000;
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 90%;
      animation: fadeIn 0.3s ease;
    }

    .toast.success {
      background: var(--success);
    }

    .toast.error {
      background: var(--danger);
    }

    .toast.warning {
      background: var(--warning);
    }

    .driver-marker {
      background: transparent;
      border: none;
    }

    .driver-marker-icon {
      width: 40px;
      height: 40px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

    .tracking-path {
      li {
        width: 100%;
      }
    }
  }
}

.badge-primary {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(var(--white), 1);
}

.badge-info {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(var(--white), 1);
}

.badge-success {
  background: var(--success);
  color: rgba(var(--white), 1);
}

.badge-warning {
  background: var(--warning);
  color: rgba(var(--white), 1);
}

.badge-danger {
  background: var(--danger);
  color: rgba(var(--white), 1);
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.CodeMirror-vscrollbar {
  &:hover {
    &::-webkit-scrollbar {
      width: 10px;
    }
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(98, 98, 98, 0.322);
  }

  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #626262;
  }
}

@media (max-width: 768px) {
  .tracking-container {
    .details-sidebar {
      width: 100% !important;
      height: 15vh !important;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      border-radius: 20px 20px 0 0 !important;
      transition: transform 0.4s ease-in-out !important;

      &.open {
        transform: translateY(0);
        height: 60vh !important;
      }
    }
  }

  .map-section {
    height: 40vh;
  }

  .sidebar-header {
    justify-content: space-between;
    border-bottom: none;
    padding-bottom: 8px;
  }

  .sidebar-toggle {
    transform: rotate(0deg);
  }

  // .sidebar-toggle.open {
  //     transform: rotate(180deg);
  // }
  // .footer-section {
  //   display: none;
  // }

  // header {
  //   position: sticky !important;
  //   top: 0 !important;
  // }
}

@keyframes rounded-2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@each $badge-name, $badge-color in (primary, var(--primary-color)),
(secondary, var(--secondary-color)), (info, var(--info-color)),
(warning, var(--warning-color)), (danger, var(--danger-color)),
(success, var(--success-color)), (light, var(--light)), (dark, var(--dark)) {
  .badge-#{$badge-name} {
    background-color: rgba($badge-color, 1) !important;
    color: rgba(var(--white), 1);
    padding: 4px 10px;
    border-radius: 6px;
  }
}

.custom-scrollbar,
.select2-results__options {
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(98, 98, 98, 0.322);
  }

  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #626262;
  }
}

.bg-reguested {
  &::before {
    background-color: rgba(var(--secondary-color), 1);
  }
}

.bg-accepted {
  &::before {
    background-color: rgba(var(--info-color), 1);
  }
}

.bg-arrived {
  &::before {
    background-color: rgba(var(--warning-color), 1);
  }
}

.bg-started {
  &::before {
    background-color: rgba(var(--primary-color), 1);
  }
}

.bg-completed {
  &::before {
    background-color: rgba(var(--success-color), 1);
  }
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


/* ==============================
   Progress Tabs Styles
============================== */
.progress-tabs-wrapper {
  margin-bottom: 10px;
  position: relative;
}

.progress-line-container {
  position: relative;
  height: calc(4px + (5 - 4) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: calc(6px + (20 - 6) * ((100vw - 320px) / (1920 - 320)));

  .progress-line-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: #e9ecef;
    border-radius: 3px;

    body.dark & {
      background-color: #1d202a;
    }
  }

  .progress-line-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(var(--primary-color), 1);
    border-radius: 3px;
    transition: width 0.5s ease;
    width: 0%;

    body.dark & {
      background-color: #ffffff9d;
    }
  }
}

.progress-tabs {
  display: flex;
  justify-content: space-between;
  position: relative;

  .progress-tab {
    flex: 1;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;

    &.active .tab-label,
    &.completed .tab-label {
      color: rgba(var(--primary-color), 1);
      font-weight: 600;

      body.dark & {
        color: #ffffff;
      }
    }
  }
}

.tab-label {
  font-size: 26px;
  font-weight: 600;
  color: #9CA3AF;
  transition: all 0.3s ease;
}

/* ==============================
   Tab Content Styles
============================== */
.tab-content-wrapper {
  position: relative;
  min-height: 500px;

  .tab-content {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;

    &.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
      animation: fadeInUp 0.5s ease;
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;

  img {
    max-height: 450px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
  }
}

.tab-text-wrapper {
  padding: calc(10px + (40 - 10) * ((100vw - 320px) / (1920 - 320)));

  @media (max-width : 575.91px) {
    text-align: center;
  }

  h3 {
    font-size: 32px;
    font-weight: 700;
    color: rgba(var(--primary-color), 1);
    margin-bottom: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));

    @media (max-width : 575.91px) {
      text-align: center;
    }

    body.dark & {
      color: #ffffff;
    }
  }

  p {
    font-size: 16px;
    color: #9CA3AF;
    line-height: 1.7;
    max-width: 450px;

    @media (max-width : 575.91px) {
      text-align: center;
    }
  }
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(40px + (60 - 40) * ((100vw - 320px) / (1920 - 320)));
  height: calc(40px + (60 - 40) * ((100vw - 320px) / (1920 - 320)));
  background: rgba(var(--primary-color), 1);
  color: #ffffff;
  font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 700;
  border-radius: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: calc(10px + (24 - 10) * ((100vw - 320px) / (1920 - 320)));

  body.dark & {
    background-color: #1d202a !important;
  }
}

/* ==============================
   Footer Styles
============================== */
.footer-logo-section {
  margin-bottom: calc(0px + (40 - 0) * ((100vw - 320px) / (1920 - 320)));

  .footer-logo-img {
    max-width: 200px;
    margin-bottom: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
    filter: brightness(0) invert(1);
  }

  .footer-description {
    color: #9CA3AF;
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
  }
}

.footer-nav {
  padding: calc(10px + (30 - 10) * ((100vw - 320px) / (1920 - 320))) 0;

  .footer-nav-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      border-right: 1px solid #ffffff8c;
      margin-right: calc(15px + (30 - 15) * ((100vw - 768px) / (1920 - 768)));
      padding-right: calc(15px + (30 - 15) * ((100vw - 768px) / (1920 - 768)));

      &:last-child {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
      }

      a {
        color: #9CA3AF;
        font-size: 16px;
        text-decoration: none;
        transition: color 0.3s ease;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 0;
          width: 0;
          height: 2px;
          background: #fff;
          transition: width 0.3s ease;
        }

        &:hover {
          color: #fff;

          &::after {
            width: 100%;
          }
        }
      }
    }
  }
}

.footer-newsletter {
  margin: 0 auto calc(14px + (50 - 14) * ((100vw - 320px) / (1920 - 320)));
  padding: calc(12px + (50 - 12) * ((100vw - 575px) / (1920 - 575))) calc(20px + (70 - 20) * ((100vw - 575px) / (1920 - 575)));
  background: rgba(255, 255, 255, 0.05);
  border-radius: calc(20px + (40 - 20) * ((100vw - 575px) / (1920 - 575)));
  border: 1px solid #FFFFFF1A;

  @media (max-width: 575.91px) {
    display: none !important;
  }

  .newsletter-title {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
  }

  .newsletter-input-group {
    display: flex;
    gap: 10px;
    background: rgba(var(--primary-color), 1);
    border-radius: calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320)));
    padding: 5px;

    .newsletter-input {
      flex: 1;
      background: transparent;
      border: none;
      padding: 12px 25px;
      color: #fff;
      font-size: 16px;
      outline: none;

      &::placeholder {
        color: #6c757d;
      }
    }

    .newsletter-btn {
      background: #fff;
      color: #1a1d29;
      border: none;
      padding: 12px 35px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;

      &:hover {
        background: #f0f0f0;
        transform: translateY(-2px);
      }
    }
  }
}

.footer-social {
  margin-bottom: calc(20px + (60 - 20) * ((100vw - 320px) / (1920 - 320)));

  .footer-social-list {
    display: flex;
    justify-content: center;
    gap: calc(0px + (30 - 0) * ((100vw - 320px) / (1920 - 320)));
    list-style: none;
    padding: 0;
    margin: 0;

    .social-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: calc(0px + (12 - 0) * ((100vw - 320px) / (1920 - 320))) calc(0px + (24 - 0) * ((100vw - 320px) / (1920 - 320)));
      border-radius: 50px;
      color: #fff;
      text-decoration: none;
      transition: all 0.3s ease;
      border: 1px solid transparent;

      &:hover {
        background-color: rgba(var(--white), 0.1);
      }

      i {
        font-size: 20px;
        height: calc(35px + (50 - 35) * ((100vw - 320px) / (1920 - 320)));
        width: calc(35px + (50 - 35) * ((100vw - 320px) / (1920 - 320)));
        border: 1px solid #fff;
        border-radius: 100%;
        padding: calc(0px + (10 - 0) * ((100vw - 320px) / (1920 - 320)));
        display: flex;
        align-items: center;
        justify-content: center;
      }

      span {
        font-size: 15px;
        font-weight: 500;

        @media (max-width:768.98px) {
          display: none;
        }
      }
    }
  }
}

.bottom-footer {
  padding: calc(15px + (25 - 15) * ((100vw - 320px) / (1920 - 320))) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  .copyright-text {
    color: #9CA3AF;
    margin: 0;
    font-size: 14px;
  }

  .footer-bottom-links {
    display: flex;
    justify-content: flex-end;
    gap: calc(0px + (30 - 0) * ((100vw - 320px) / (1920 - 320)));
    list-style: none;
    padding: 0;
    margin: 0;

    @media (max-width:575.98px) {
      margin-top: 10px;
    }

    li a {
      color: #9CA3AF;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s ease;

      &:hover {
        color: #fff;
      }
    }
  }
}

/* ==============================
   Responsive Styles
============================== */
@media (max-width: 991px) {
  .tab-content-wrapper {
    min-height: auto;
  }

  .tab-text-wrapper {
    h3 {
      font-size: 24px;
    }

    p {
      max-width: 100%;
    }
  }


  .tab-image-wrapper img {
    max-height: 350px;
  }

  .footer-nav-list {
    gap: 20px;
  }

  .footer-newsletter {

    .newsletter-title {
      font-size: 20px;
    }
  }
}

@media (max-width: 767px) {

  .tab-label {
    font-size: 12px;
  }

  .tab-text-wrapper {
    h3 {
      font-size: 20px;
    }

    p {
      font-size: 14px;
    }
  }


  .footer-logo-img {
    max-width: 150px;
  }


  .newsletter-input-group {
    flex-direction: column;
    border-radius: 15px;

    .newsletter-btn {
      width: 100%;
      padding: 15px;
    }

    .newsletter-input {
      padding: 15px 20px;
    }
  }

  .footer-social-list {
    gap: 15px;

    .social-link {
      justify-content: center;
    }
  }

  .footer-bottom-links {
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    margin-top: 15px;
  }

  .copyright-text {
    text-align: center;
  }
}
.ride-overlay-wrapper {
  .form-card-wrapper {
    max-width: 500px !important;
    width: 100% !important;
  }
}

.vehicle-slider-box {
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
  padding-bottom: 20px; // Space for scrollbar

  .swiper-slide {
    width: 150px !important;
  }
}

.vehicles-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  height: 100%;
  display: flex;
  flex-direction: column;

  &:hover {
    border-color: #ddd;
    transform: translateY(-2px);
  }

  &:has(.form-check-input:checked) {
    border: 2px solid #030712 !important;
    background-color: #f9f9f9;
  }

  .form-check-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
  }

  .vehicles-image {
    background: #f7f7f7;
    border-radius: 8px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;

    body.dark & {
      background-color: rgba(var(--primary-color), 1) !important;
    }

    img {
      max-width: 80%;
      max-height: 80%;
      object-fit: contain;
    }
  }

  .name-price {
    h5 {
      font-size: 14px;
      font-weight: 600;
      margin: 0;
      color: #333;
    }

    .price {
      font-size: 15px;
      color: #030712;
      font-weight: 700;
      margin-top: 2px;
    }
  }

  .info-btn {
    width: 100%;
    margin-top: 10px;
    background: #030712;
    color: #fff;
    border: none;
    padding: 6px;
    border-radius: 6px;
    font-size: 12px;
    position: relative;
    z-index: 6;
  }
}