/* custom style */
@font-face {
  font-family: 'Involve';
  src: url('../fonts/involve/Bold/Involve-Bold.woff2') format('woff2'),
    url('../fonts/involve/Bold/Involve-Bold.woff') format('woff'),
    url('../fonts/involve/Bold/Involve-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer/Regular/Switzer-Regular.woff2') format('woff2'),
    url('../fonts/switzer/Regular/Switzer-Regular.woff') format('woff'),
    url('../fonts/switzer/Regular/Switzer-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer/Medium/Switzer-Medium.woff2') format('woff2'),
    url('../fonts/switzer/Medium/Switzer-Medium.woff') format('woff'),
    url('../fonts/switzer/Medium/Switzer-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer/Semibold/Switzer-Semibold.woff2') format('woff2'),
    url('../fonts/switzer/Semibold/Switzer-Semibold.woff') format('woff'),
    url('../fonts/switzer/Semibold/Switzer-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

:root {
  --primary-font-family: "Switzer";
  --secondry-font-family: "Involve";
  --primary-color: #4F4CFF;
  --secondry-color: #FECF39;
}


.primary-font {
  font-family: var(--primary-font-family);
}

.secondry-font {
  font-family: var(--secondry-font-family);
}

.primary-cta {
  max-width: max-content;
  padding: 16px 30px;
  border-radius: 56px;
  background-color: #FECF39;
  text-align: center;
  font-size: 14px;
  line-height: 14px;
  color: #000;
  transition: all .3s;
  border: none;
  outline: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-family: 'Switzer';

  i {
    color: #000;
    font-size: 12px;
    line-height: 11px;
    transition: all .3s;
  }

  &:hover {
    background-color: #dbb028;
    color: #000;
  }

  &:disabled {
    pointer-events: none;
    opacity: .6;
  }

  &.bg-blue {
    background-color: #4F4CFF;
    color: #fff;

    i {
      color: #fff;
    }

    &:hover {
      background-color: #FECF39;
      color: #000;

      i {
        color: #000;
      }
    }
  }

  &.outline-cta {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    color: #000;

    &:hover {
      background-color: #FECF39;
      color: #000;
      border-color: #FECF39;
    }

    &.transparent-cta {
      background-color: transparent;

      &:hover {
        background-color: #FECF39;
      }
    }
  }

  &.back-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: 10px;

    i {
      margin: 0 !important;
      transform: scale(-1);
    }
  }
}

.btn-outline-white {
  padding: 16px 30px;
  border-radius: 56px;
  background-color: transparent;
  border: 1px solid #fff;
  text-align: center;
  font-size: 14px;
  line-height: 14px;
  color: #fff;
  transition: all .3s;
  outline: none;
  box-shadow: none;
  display: inline-block;
  vertical-align: middle;
  font-weight: 600;
  font-family: 'Switzer';

  &:hover {
    background-color: #FECF39;
    border-color: #FECF39;
    color: #000;
  }
}

.text-normal {
  text-transform: none !important;
}

.filter-cta {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  height: 100%;
}

.table-responsive .vue3-easy-data-table .vue3-easy-data-table__main {
  min-height: 300px;
}

.image-uploader {
  margin: 0 !important;

  .preview-item {
    width: unset;
    height: unset;
  }
}

.vue3-easy-data-table__body td.direction-left {
  font-size: 14px;
}

.vue3-easy-data-table__header th {
  font-size: 14px;
}

.vue3-easy-data-table__body tr {
  height: 48px !important;
}

.navbar {
  height: 80px;
  padding: 0px 24px;

  .primary-cta {
    @media(max-width: 767px) {
      padding: 12px 20px;
    }
  }

  @media(max-width: 767px) {
    padding: 0px 15px;
    height: 70px;
  }
}

.navbar-nav-menu {
  background-color: #F3F5F7;
  border-radius: 60px;
  padding: 4px 5px;

  .nav-item {
    .nav-link {
      border-radius: 38px;
      font-size: 14px;
      font-family: 'Switzer';
      font-weight: 600;
      color: rgba(0, 0, 0, 0.70) !important;
      padding: 8.5px 16.5px;

      &:hover,
      &.router-link-current-active {
        @media(min-width: 992px) {
          background-color: #fff;
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
          color: #000 !important;
        }
      }

      @media(max-width: 991px) {
        padding: 8.5px 0px;
      }
    }
  }

  @media(max-width: 991px) {
    background-color: #ffffff;
    border-radius: 0px;
    padding: 0px 15px;
    margin: 0px !important;
  }
}

.mobile-logo {
  border-bottom: 1px solid #ddd;
  padding: 10px 15px;

  @media(min-width: 992px) {
    display: none;
  }
}

.navbar-collapse {
  @media(max-width: 991px) {
    position: fixed;
    top: 0px;
    left: -100%;
    width: 80%;
    min-height: 100vh;
    background-color: #fff;
    transition: all 0.3s;

    &.show {
      left: 0%;
    }
  }

  .navbar-toggler {
    @media(max-width: 991px) {
      position: absolute;
      top: 20px;
      right: 10px;
      width: 30px;
      height: 30px;
      background-color: #f5f5f5;
      border-radius: 100%;
      text-align: center;

      i {
        font-size: 14px;
        color: #333;
        display: block;
        width: 100%;
        height: 100%;
        line-height: 30px;
      }
    }
  }
}

.navbar-nav-right {
  margin-left: auto;

  .dropdown-menu {
    position: absolute;
  }
}

.notification-block {
  background-color: #F3F5F7;
  border-radius: 100%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 0px !important;

  i {
    color: #000;
    font-size: 20px !important;
  }

  &:hover {
    i {
      color: #4F4CFF;
    }
  }

  @media(max-width: 991px) {
    margin-right: 5px;
  }
}

.profile-block {
  .p-name {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Switzer';
    color: #000;
    transition: all 0.3s;
    text-transform: capitalize;

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

  &:hover {
    .p-name {
      color: #4F4CFF;
    }
  }
}

.login-navbar {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.04);
}

body {
  background-color: #F3F5F7;
}

.page-header-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;

  h2 {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--secondry-font-family);
    margin: 0px;
    padding: 0px;
    color: #000;

    @media(max-width: 767px) {
      font-size: 24px;
    }
  }

  p {
    font-size: 16px;
    line-height: 24px;
    margin: 10px 0px 0px;
    color: rgba(0, 0, 0, 0.70);
    font-family: var(--primary-font-family);
  }

  .right-block {
    .primary-cta {
      display: inline-block;
      vertical-align: middle;
      margin: 5px 5px;
    }

    @media(max-width: 767px) {
      margin-top: 20px;
      gap: 10px;
      display: flex;
      flex-direction: column;

      .primary-cta {
        margin: 0;
        max-width: 100%;
        width: 100%;
      }

    }

    .form-group {
      select {
        padding: 10px 40px 10px 10px;
      }
    }

    &.v2 {
      display: flex;

      .form-group {
        margin: 5px !important;

      }

      @media (max-width:767px) {
        .form-group {
          max-width: 100%;
          width: 100%;
          margin: 0 !important;
        }

        &>div {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
      }

      .back-btn {
        max-width: 100%;
        width: 100%;
        display: block;
      }
    }
  }

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

.white-block {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
}

.filter-block {
  padding: 20px 20px;

  .nav.nav-pills {
    flex-wrap: nowrap;
    overflow: auto;
  }

  @media (max-width:991px) {
    .row {
      gap: 12px !important;
      margin-top: 0;

      [class^="col-"],
      [class*=" col-"] {
        margin: 0;
      }
    }

    .form-label {
      margin: 0;
    }
  }

  .form-control,
  .form-select {
    height: 44px;
    padding: 0px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.70);
    font-family: var(--primary-font-family);

    &::placeholder {
      transform: unset;
    }

    &:focus {
      box-shadow: none;
      border-color: #4F4CFF;
    }
  }

  .form-select {
    cursor: pointer;
  }

  .primary-cta {
    padding: 15px 25px;
  }
}

.filter-search {
  position: relative;

  i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(0px, -50%);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.70);
  }

  .form-control {
    padding-left: 35px;
  }
}

.customize-table {
  border: none !important;

  .vue3-easy-data-table__main {
    max-height: 600px;
  }

  table {
    border-collapse: collapse !important;
  }

  .vue3-easy-data-table__header {
    background-color: #F3F5F7;
    /* border-style: solid;
    border-color: rgba(0, 0, 0, 0.07);
    border-width: 1px 0px; */
    border: none;

    tr {
      border: none;
    }

    th {
      background-color: #F3F5F7 !important;
      border: none !important;
      padding: 12.5px 20px !important;
      font-size: 16px;
      font-weight: 700;
      font-family: var(--secondry-font-family);
      color: #000 !important;
      border-style: solid;
      border-color: rgba(0, 0, 0, 0.07);
      border-width: 1px 0px;

      @media(max-width: 767px) {
        font-size: 14px;
      }
    }
  }

  tbody {
    tr {
      &:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      }

      td {
        background-color: #fff !important;
        padding: 0px 20px !important;
        border: none !important;
        font-size: 15px !important;
        color: rgba(0, 0, 0, 0.70);
        font-family: var(--primary-font-family);
        font-weight: 500;

        img {
          object-fit: cover;
        }

        .dropdown-toggle {
          width: 26px;
          height: 26px;
          box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.20);

          i {
            color: #000;
          }
        }

        .dropdown-menu {
          .dropdown-item {
            color: #000;
            font-family: var(--primary-font-family);
          }
        }

        @media(max-width: 767px) {
          font-size: 14px;
        }
      }
    }
  }
}

.vue3-easy-data-table__footer {
  border: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 0px 0px 16px 16px;
  height: auto !important;
  padding: 10px 20px !important;

  .pagination__rows-per-page,
  .pagination__items-index {
    display: none !important;
  }

  .buttons-pagination {
    .item.button {
      margin: 0px 4px;
      border: 1px solid rgba(0, 0, 0, 0.20) !important;
      width: 38px;
      height: 38px;
      border-radius: 6px !important;
      line-height: 37px !important;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.70);
      font-weight: 600;
      font-family: var(--primary-font-family);

      &.active {
        background-color: #4F4CFF;
        color: #fff;
        border-color: #4F4CFF !important;
      }
    }
  }
}

.layout-menu {
  .menu-inner {
    .menu-item {
      display: block;
      width: 100%;

      &:before {
        content: none !important;
      }

      .menu-link {
        font-size: 16px;
        font-weight: 500;
        font-family: var(--primary-font-family);
        color: #616161;
        border-radius: 8px;
      }

      &.active {
        .menu-link {
          color: #000 !important;
          background-color: #F6F7F9 !important;

          i {
            color: #4F4CFF;
          }
        }
      }
    }
  }
}

.dropdown-menu {
  li {
    .dropdown-item {
      color: #000;
      font-family: var(--primary-font-family);
    }
  }
}

.user-profile-info {
  font-family: var(--primary-font-family);

  h4 {
    font-weight: 600;
    color: #000 !important;
  }

  ul {
    li {
      color: #666 !important;
      font-weight: 400 !important;
      font-size: 14px !important;
    }
  }
}

.profile-subtitle {
  font-family: var(--secondry-font-family);
  font-weight: 700;
  color: #000;
}

.p-services-badge {
  background-color: #4F4CFF;
  border-radius: 30px;
  color: #fff;
  font-weight: 400;
  font-family: var(--primary-font-family);
  font-size: 14px;
  padding: 10px 15px;
  text-transform: none;
  margin: 0px 5px 5px 0px;
}

.profile-detail-listing {
  font-family: var(--primary-font-family);

  li {
    color: #000;
  }
}

.profile-top-details {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;

  .profile-pic {
    flex-shrink: 0;

    @media(max-width: 991px) {
      order: 1;
    }
  }

  .user-profile-info {
    ul {
      @media(max-width: 991px) {
        flex-wrap: wrap;
      }
    }

    @media(max-width: 991px) {
      order: 3;
      flex: 0 0 100%;
      max-width: 100%;
      margin-left: 0px !important;
      margin-top: 10px;
    }
  }

  .profile-edit-btn {
    @media(max-width: 991px) {
      order: 2;
    }
  }

  @media(max-width: 991px) {
    align-items: flex-start;
  }
}

.profile-card-block {
  height: 100%;

  @media(max-width: 991px) {
    height: auto;
    margin-bottom: 20px;
  }
}

.preview-area {
  .upload-preview {
    width: 100%;
    height: 100%;
  }
}

.review-table {
  .review-card {
    .rounded-circle {
      object-fit: cover;
    }
  }
}


.popup-price-text {
  font-size: 16px;
  font-weight: 700;
  color: #28a745;
}

.step-2-delivery-text {
  margin-left: 32px;
}

.popup-desc-box {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
}

.fc-view-harness.fc-view-harness-active {
  border-radius: 12px;
  overflow: hidden;

  @media (max-width:500px) {
    height: 460px !important;
  }
}

/* custom style */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.status {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 30px;
  font-size: 14px;
  font-family: var(--primary-font-family);
  font-weight: 600;
  padding: 9px 14px 9px 14px;
  position: relative;
  background-color: #e0e0e045;
  color: #a1a1a1;
  line-height: 0.75;
  text-transform: uppercase;

  /* &::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 9px;
    width: 13px;
    height: 13px;
    border-radius: 100%;
    background-color: #a1a1a1;
  } */

  &.completed {
    background-color: #10B9811A;
    color: #0C885FCC;

    &::before {
      background-color: #0C885FCC;
    }
  }

  &.open {
    background-color: #2563EB1A;
    color: #124CC9CC;

    &::before {
      background-color: #124CC9CC;
    }
  }

  &.inprogress {
    background-color: rgba(255, 171, 0, 0.10);
    color: rgba(255, 171, 0, 1);

    &::before {
      background-color: rgba(255, 171, 0, 1);
    }
  }

  &.pending {
    background-color: #e0e0e045;
    color: #a1a1a1;

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

  &.delete {
    background: #ff3e1d30;
    color: #ff3f1ddd;

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

  &.resolved {
    background: #00bcd424 !important;
    color: #00bcd4d6 !important;

    &::before {
      background-color: #00bcd4d6;
    }
  }
}


.custom-badge {
  border-radius: 30px;
  font-size: 14px;
  font-family: var(--primary-font-family);
  font-weight: 600;
  padding: 9px 14px 9px 30px;
  position: relative;

  &.bg-secondary {
    background-color: rgba(255, 166, 0, 0.1) !important;
    color: rgba(204, 133, 0, 0.8) !important;

    &:before {
      content: "";
      position: absolute;
      top: 8px;
      left: 9px;
      width: 13px;
      height: 13px;
      border-radius: 100%;
      background-color: rgba(255, 166, 0, 1);
    }

    /* 
            &:after {
              content: "";
              position: absolute;
              top: 12px;
              left: 12px;
              border-style: solid;
              border-color: #fff;
              border-width: 0px 0px 1px 1px;
              padding: 1px 3px;
              transform: rotate(-45deg);
            } */
  }

  &.bg-success {
    background-color: rgba(16, 185, 129, 0.10) !important;
    color: rgba(12, 136, 95, 0.80) !important;

    &:before {
      content: "";
      position: absolute;
      top: 8px;
      left: 9px;
      width: 13px;
      height: 13px;
      border-radius: 100%;
      background-color: #389F7C;
    }

    &:after {
      content: "";
      position: absolute;
      top: 12px;
      left: 12px;
      border-style: solid;
      border-color: #fff;
      border-width: 0px 0px 1px 1px;
      padding: 1px 3px;
      transform: rotate(-45deg);
    }
  }

  &.bg-warning {
    /* background-color: rgb(91 59 252 / 10%) !important;
    color: rgb(100 47 251); */
    background-color: rgba(255, 193, 7, 0.1) !important;
    color: #ffc107;

    &:before {
      content: "";
      position: absolute;
      top: 8px;
      left: 9px;
      width: 13px;
      height: 13px;
      border-radius: 100%;
      background-color: #ffc107;
    }

    &:after {
      content: "\f253";
      font-family: "Font Awesome 7 Free";
      position: absolute;
      top: 11.5px;
      left: 12px;
      color: #fff;
      font-size: 8px;
    }
  }

  &.bg-primary {
    /* background-color: rgb(91 59 252 / 10%) !important;
    color: rgb(100 47 251); */
    background-color: rgba(79, 76, 255, 0.1) !important;
    color: #4f4cff;

    &:before {
      content: "";
      position: absolute;
      top: 8px;
      left: 9px;
      width: 13px;
      height: 13px;
      border-radius: 100%;
      background-color: #4f4cff;
    }

    &:after {
      content: "";
      position: absolute;
      top: 12px;
      left: 12px;
      border-style: solid;
      border-color: #fff;
      border-width: 0px 0px 1px 1px;
      padding: 1px 3px;
      transform: rotate(-45deg);
    }
  }

  &.bg-danger {
    background-color: rgba(255, 63, 29, 0.1) !important;
    color: #ff3e1d;

    &:before {
      content: "";
      position: absolute;
      top: 8px;
      left: 9px;
      width: 13px;
      height: 13px;
      border-radius: 100%;
      background-color: #ff3e1d;
    }

    &:after {
      content: "\f00d";
      font-family: "Font Awesome 7 Free";
      position: absolute;
      top: 11.5px;
      left: 12px;
      color: #fff;
      font-size: 8px;
    }
  }

  &.bg-info {
    background-color: rgba(56, 179, 245, 0.1) !important;
    color: #0dcaf0;

    &:before {
      content: "";
      position: absolute;
      top: 8px;
      left: 9px;
      width: 13px;
      height: 13px;
      border-radius: 100%;
      background-color: #0dcaf0;
    }

    &:after {
      content: "\f00d";
      font-family: "Font Awesome 7 Free";
      position: absolute;
      top: 11.5px;
      left: 12px;
      color: #fff;
      font-size: 8px;
    }
  }

  @media(max-width: 767px) {
    font-size: 12px;
  }
}

.progress-bar-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  .form-check {
    @media (max-width:767px) {
      max-width: calc(50% - 16px);
      width: 100%;
    }
  }
}

.responsive-table {
  max-width: 100%;
  overflow: auto;

  td,
  th {
    @media (max-width:767px) {
      white-space: nowrap;
    }
  }
}

@media (max-width:767px) {

  .vendor-ctas {
    .btn {
      width: 100%;
      max-width: 100%;
    }
  }

  .vendor-card-body {
    padding: 0;
  }

  .image-preview-body {
    padding: 16px !important;
  }

  .image-preview-list {
    flex-wrap: nowrap !important;
    overflow: auto;
  }
}

.modal-dialog {
  .package-popup-content {
    .package-services {
      .radio-check-list.radio-listing {
        li {
          .item {
            label {
              flex-direction: row;
            }
          }
        }
      }
    }
  }
}


.package-addons {
  .radio-check-list.check-listing {
    li {
      .item {
        width: 100%;
      }
    }
  }
}


.package-section {
  .accordion {
    .accordion-item {
      border-radius: 12px;
      overflow: hidden;
      background: #f9fafb;
      margin-bottom: 12px;
      border: none;

      .accordion-header {
        .accordion-button {
          background-color: transparent;
          box-shadow: unset;
          color: #000;

          a {
            color: var(--primary-color);
            transition: all .3s;

            &:hover {
              color: #302eb1;
            }
          }

          &::after {
            transform: rotate(90deg);
          }

          &:not(.collapsed)::after {
            transform: rotate(270deg);
          }
        }
      }
    }
  }
}

.order-right-box {
  .package-summary {
    a {
      color: var(--primary-color);
      transition: all .3s;

      &:hover {
        color: #302eb1;
      }
    }
  }
}


/* sd */

.package-wrapper {
  background: #ffffff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  max-width: 100%;

  .package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .icon {
    width: 42px;
    height: 42px;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
  }

  .title {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
  }

  .subtitle {
    margin: 0;
    font-size: 13px;
    color: #64748b;
  }

  .package-body {
    display: grid;
    grid-template-columns: 1fr 40%;
    gap: 24px;
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .info-item {
    background: #f8fafc;
    padding: 14px;
    border-radius: 10px;
  }

  .label {
    display: block;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 4px;
  }

  .value {
    font-weight: 600;
    font-size: 16px;
  }

  .value.price {
    color: #4f46e5;
  }

  .description {
    margin-top: 18px;
  }

  .description p {
    margin: 6px 0 0;
    font-size: 16px;
    color: #475569;
  }

  .package-media img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
  }

  @media (max-width: 768px) {
    .package-body {
      grid-template-columns: 1fr;
    }
  }
}



/*New  Comp*/

.listing-check {
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      margin: 0;
      padding: 0;
      font-size: 14px;
      line-height: 24px;
      font-weight: 500;
      font-family: var(--primary-font-family);
      color: rgba(0, 0, 0, .7);
      position: relative;
      padding: 0 0 0 26px;

      &:not(:last-of-type) {
        margin-bottom: 10px;
      }

      &::before,
      &::after {
        content: "";
        position: absolute;
        transition: all 0.3s;
      }

      &::before {
        left: 0;
        top: 4px;
        left: 0px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: var(--primary-color);
      }

      &::after {
        top: 9px;
        left: 4.5px;
        border-style: solid;
        border-color: #fff;
        border-width: 0px 0px 1px 1px;
        padding: 1.5px 3.5px;
        transform: rotate(-45deg);
      }
    }
  }
}

.block-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #fff;
}

.ba-overlay {
  position: relative;
  z-index: 1;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: -400px;
    left: -300px;
    width: 913px;
    height: 587px;
    border-radius: 30%;
    overflow: hidden;
    background-color: #8302F3;
    filter: blur(100px);
    transform: translateZ(0) rotate(45deg);
    will-change: transform;
    z-index: -1;
    opacity: 0.05;
  }

  &::after {
    background-color: #4F4CFF;
    bottom: -150px;
    right: -200px;
    left: unset;
    top: unset;
  }
}

.wcu-sec {
  background-color: #fff;
  padding: 95px 0 46px;
  position: relative;
  /* overflow: hidden; */
  z-index: 1;

  @media (max-width:767px) {
    padding: 50px 0 20px;
  }

  .row {
    margin: 0 -25px;

    [class^="col-"],
    [class*=" col-"] {
      padding: 0 25px;
    }
  }

  .section-title-block {
    text-align: start;

    @media (min-width:768px) {
      margin: 0;
    }

    img {
      width: 100%;
      height: 315px;
      border-radius: 16px;
      overflow: hidden;
      object-fit: cover;
      object-position: center;
      margin-top: 30px;

      @media (max-width:767px) {
        height: 220px;
      }
    }
  }

  .wcu-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style-type: none;
    margin: 0;
    padding: 0;

    .wcu-card {
      padding: 14px;
      background-color: #fff;
      border-radius: 83px;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 3px rgba(0, 0, 0, .09), inset 0 0 5px 1px rgba(0, 0, 0, 0.06);

      @media (max-width:767px) {
        padding: 12px;
      }

      .wcu-icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to bottom, #4F4CFF 0, #8302F3 100%);
        margin-right: 16px;

        img {
          width: 23px;
          height: 23px;
          object-fit: contain;
          object-position: center;
        }

        @media (max-width:767px) {
          width: 38px;
          height: 38px;

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

      p {
        font-size: 22px;
        line-height: 22px;
        color: #000;
        font-family: var(--primary-font-family);
        margin: 0;
        font-weight: 500;

        @media (max-width:767px) {
          font-size: 18px;
        }
      }
    }
  }
}

.hew-sec {
  padding: 20px 0 100px;
  position: relative;
  overflow: hidden;
  z-index: 1;

  &::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(356deg);
    width: 637px;
    height: 350px;
    border-radius: 30%;
    background-color: #8302F3;
    opacity: .02;
    filter: blur(120px);
    will-change: transform;
    z-index: -1;
    bottom: 100px;
  }

  .section-title-block {
    margin-bottom: 60px;
  }

  @media (max-width:767px) {
    padding: 20px 0 60px;

    .section-title-block {
      margin-bottom: 30px;
    }
  }

  .row {
    margin: 0 -10px;

    [class^="col-"],
    [class*=" col-"] {
      padding: 0 10px 0;

      @media (min-width:992px) {
        margin-top: 60px;

        &:not(:first-of-type) {
          .hew-card-wrap {
            position: relative;

            .hew-line {
              left: -20px;

              &::before,
              &::after {
                left: calc(50% + 10px);
              }
            }

          }
        }

        &:nth-child(even) {
          margin-top: 0;

          .hew-card-wrap {
            .hew-line {

              &::before {
                height: 108px;
              }

              &::after {
                bottom: 103px;
              }
            }
          }
        }
      }


      &:nth-child(even) {
        .hew-card {
          background: linear-gradient(to bottom, #FFFBF0 0, #fff 100%);
        }
      }

      @media (max-width:991px) {
        &:last-of-type {
          .hew-card-wrap {
            padding-bottom: 0;

            .hew-line {
              display: none;
            }
          }
        }
      }
    }
  }

  .hew-card-wrap {
    padding-bottom: 93px;
    position: relative;
    height: 100%;

    @media (max-width:991px) {
      padding-bottom: 50px;
    }

    .hew-line {
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(100% + 20px);
      height: 1.5px;
      background-color: #D7D6FF;

      &::before,
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: calc(50% - 10px);
        transform: translateX(-50%);
        width: 2px;
        height: 45px;
        background-color: #D7D6FF;
      }

      &::after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        bottom: 40px;
      }

      @media (max-width:991px) {
        width: 100%;
        background-color: transparent;

        &::before,
        &::after {
          left: 50%;
        }

        &::before {
          height: 22px;
        }

        &::after {
          bottom: 20px;
        }
      }
    }

  }

  .hew-card {
    padding: 30px 20px 60px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: linear-gradient(to bottom, #F6F4FF 0, #fff 100%);
    position: relative;
    min-height: 198px;

    h3 {
      font-size: 20px;
      line-height: 26px;
      font-family: var(--primary-font-family);
      font-weight: 600;
      margin: 0;
      color: #000;
    }

    p {
      font-size: 14px;
      line-height: 22px;
      font-family: var(--primary-font-family);
      font-weight: 500;
      color: rgba(0, 0, 0, .5);
      margin: 16px 0 0;
    }

    .hew-step {
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      color: #fff;
      font-size: 24px;
      line-height: 31px;
      font-weight: 500;
      background: linear-gradient(to bottom, #4F4CFF 0, #8302F3 100%);
      display: flex;
      align-items: center;
      justify-content: center;

      @media (max-width:991px) {
        width: 40px;
        height: 40px;
        font-size: 18px;
        line-height: 25px;
        bottom: -20px;
      }
    }
  }
}

.basic-hero {
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
  }

  @media (min-width:768px) {
    min-height: 420px;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: -1;
  }

  .bh-desc {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;

    h1 {
      color: #fff;
      font-family: var(--secondry-font-family);
      font-weight: bold;
      text-transform: capitalize;

      @media (min-width:768px) {
        font-size: 60px;
        line-height: 68px;
      }
    }

    p {
      margin: 16px 0 0;
      color: #fff;
      font-family: var(--primary-font-family);
      font-weight: 400;

      @media (min-width:768px) {
        font-size: 16px;
        line-height: 26px;
        margin-top: 20px;
      }
    }
  }
}

.tv-sec {
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: #F6F5FF;

  @media (min-width:768px) {
    padding: 100px 0;
  }

  .section-title-block {
    margin: 0 0 30px;
    text-align: start;

    @media (min-width:992px) {
      max-width: 642px;
      margin: 0;
    }

    ul {
      margin-top: 20px;
    }
  }

  .tv-img {
    max-width: 100%;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;


    @media (min-width:768px) {
      height: 320px;
    }

    @media (min-width:992px) {
      margin-left: auto;
      height: 406px;
      max-width: 578px;
    }

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

.tov-sec {
  padding: 60px 0 20px;

  @media (min-width:768px) {
    padding: 100px 0 20px;
  }

  .primary-cta {
    display: block;
    /* max-width: fit-content; */
    margin: 30px auto 0;

    @media (min-width:768px) {
      margin-top: 50px;
    }
  }

  .row {
    margin: -10px;

    [class^="col-"],
    [class*=" col-"] {
      padding: 10px;
    }
  }

  .tov-card {
    padding: 20px 16px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
    font-family: var(--primary-font-family);
    display: flex;
    background-color: #fff;
    height: 100%;

    @media (min-width:768px) {
      padding: 30px 20px;
      display: block;
    }

    .tvo-icon {
      width: 40px;
      height: 40px;
      overflow: hidden;
      border-radius: 50%;
      background: linear-gradient(to bottom, #4F4CFF 0, #8302F3 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin: 0 10px 0 0;

      @media (min-width:768px) {
        margin: 0 0 20px;
      }

      img {
        width: 26px;
        height: 26px;
        object-fit: contain;
        object-position: center;
      }
    }

    h3 {
      font-size: 20px;
      line-height: 26px;
      font-weight: 600;
      color: #000;
      margin: 0;
    }

    p {
      font-size: 14px;
      line-height: 22px;
      font-weight: 500;
      color: rgba(0, 0, 0, .5);
      margin: 6px 0 0;

      @media (min-width:768px) {
        margin: 16px 0 0;
      }
    }
  }
}

.support-sec {
  padding: 100px 0 20px;

  .support-form-block {
    max-width: 100%;
    border: 1px solid #EDEDED;
    border-radius: 16px;
    overflow: hidden;
    padding: 30px 20px;
    background-color: #fff;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .03);
    font-family: var(--primary-font-family);

    @media (min-width:768px) {
      padding: 60px 40px;
    }

    .sb-submit {
      position: relative;
      display: inline-block;

      /* i {
        position: absolute;
        top: calc(50% + 5px);
        right: 24px;
        transform: translateY(-50%);
        pointer-events: none;

        &.fa-spinner {
          top: 28px;
        }
      } */


      .primary-cta {
        padding-right: 50px;
      }
    }

    .form-group {
      margin: 0 0 20px;

      label {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        color: #333333;
        margin-bottom: 8px;
      }

      input.form-control,
      select.form-control,
      textarea.form-control {
        padding: 11px 12px;
        border: 1px solid rgba(0, 0, 0, .1);
        border-radius: 8px;
        font-size: 16px;
        line-height: 21px;
        font-weight: 600;
        outline: none;
        box-shadow: none;
        color: rgba(0, 0, 0, .8);
        transition: all .3s;

        @media (min-width:768px) {
          font-size: 14px;
        }

        &::placeholder {
          color: rgba(0, 0, 0, .7);
          font-weight: 400;
        }

        &:active,
        &:focus {
          border-color: var(--primary-color);
          box-shadow: 0 0 9px rgba(79, 76, 255, 0.55);
        }
      }

      textarea {
        resize: none;
        height: 100px;
      }
    }

    .sb-submit {
      padding-top: 10px;
    }
  }

  .section-title-block {
    max-width: 440px;
    margin: 0 0 30px;
    text-align: start;

    @media (min-width:992px) {
      margin: 0;
    }

    .support-info {
      border: 1px solid rgba(0, 0, 0, .08);
      background: linear-gradient(to bottom, #F6F4FF 0, #fff 100%);
      padding: 20px;
      border-radius: 16px;
      overflow: hidden;
      margin-top: 30px;

      .si-card {
        display: flex;
        align-items: center;
        font-family: var(--primary-font-family);
        padding-top: 16px;

        &:not(:last-of-type) {
          border-bottom: 1px solid rgba(0, 0, 0, .08);
          padding-bottom: 16px;
          padding-top: 0;
        }

        .si-icon {
          width: 50px;
          height: 50px;
          overflow: hidden;
          background: linear-gradient(to bottom, #4F4CFF 0, #8302F3 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          border-radius: 50%;
          margin-right: 8px;

          img {
            width: 26px;
            height: 26px;
            object-fit: contain;
            object-position: center;
          }
        }

        span {
          font-size: 18px;
          font-weight: 500;
          line-height: 23px;
          color: #000;
          display: block;
        }

        a {
          font-size: 16px;
          line-height: 22px;
          font-weight: 500;
          color: rgba(0, 0, 0, .7);
          margin: 0;
          transition: all .3s;

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

  .fa-spinner {
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .success-icon {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 20px;
  }


  .form-control:disabled {
    background-color: #f8f9fa;
    cursor: not-allowed;
  }

  .primary-cta:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  @media (max-width: 768px) {
    .success-icon {
      font-size: 3rem;
    }
  }
}

.z-9 {
  z-index: 9 !important;
}

.addon-product-name {
  color: #6c6c6c;
  font-weight: 500;
}


.package-items.od-items {
  &::before {
    opacity: 0 !important;
  }
}

.table-header-with-total {
  .table-header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  h4 {
    padding: 0;
  }
}

.assignment-summary {
  background-color: #f3f5f7;
  margin: 16px auto;
  max-width: calc(100% - 32px);
  width: 100%;
  padding: 20px;
  border-radius: 8px;
  overflow: hidden;

  ul {
    li {
      margin-bottom: 8px;
    }
  }
}

@media (max-width:767px) {
  .table-header-with-total {
    .table-header-title {
      flex-direction: column;
      align-items: start;
    }
  }
}

/* New Comp */

/* spotlight-section */
.spotlight-section {
  padding: 50px 0;
  position: relative;
  overflow: auto;

  .gallery-grid-wrap {
    list-style-type: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    li {

      /* ROW 1 → [25%][50%][25%] */
      &:nth-child(9n+1) {
        grid-column: 1 / span 1;
      }

      &:nth-child(9n+2) {
        grid-column: 2 / span 2;
      }

      &:nth-child(9n+3) {
        grid-column: 4 / span 1;
      }

      /* ROW 2 → [50%][25%][25%] */
      &:nth-child(9n+4) {
        grid-column: 1 / span 2;
      }

      &:nth-child(9n+5) {
        grid-column: 3 / span 1;
      }

      &:nth-child(9n+6) {
        grid-column: 4 / span 1;
      }

      /* ROW 3 → [25%][25%][50%] */
      &:nth-child(9n+7) {
        grid-column: 1 / span 1;
      }

      &:nth-child(9n+8) {
        grid-column: 2 / span 1;
      }

      &:nth-child(9n+9) {
        grid-column: 3 / span 2;
      }


      .gg-item {
        width: 100%;
        height: 330px;
        border-radius: 16px;
        overflow: hidden;
        display: block;
        position: relative;

        .gg-desc {
          position: absolute;
          bottom: 16px;
          left: 16px;
          right: 16px;
          background-color: #00000078;
          backdrop-filter: blur(14px);
          border-radius: 0 12px 12px 0;
          border-left: 2px solid #FECF39;
          padding: 8px 16px;

          @media (min-width:992px) {
            max-width: 80%;
          }

          p {
            font-size: 14px;
            line-height: 20px;
            color: #fff;
            margin: 0;
          }
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          transition:all .3s;
          &:hover,&:focus {
              transform: scale(1.1);
          }
        }
      }
    }

    @media (max-width:991px) {
      grid-template-columns: repeat(2, 1fr);

      li {
        grid-column: span 1 !important
      }
    }

    @media (max-width:720px) {
      grid-template-columns: repeat(1, 1fr);
    }
  }
}

.lity-wrap img {
  object-fit: contain;
  max-width: 100%;
  height: auto;
  width: 100%;
}

.footer-bottom-text {
  display: flex;
  align-items: center;
  justify-content: space-between;

  @media (max-width:767px) {
    flex-direction: column;
    gap: 8px;
  }

  p {
    margin: 0;
    color: #fff;
    font-weight: 500;
  }
}

.events-img-box {
  padding-top: 40px;
  margin: -5px;

  [class^="col-"],
  [class*=" col-"] {
    margin: 0 !important;
    padding: 5px !important;
  }

  .hew-img-card {
    width: 100%;
    height: 335px;
    border-radius: 12px;
    overflow: hidden;

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

/* spotlight-section */