@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Poppins:wght@200;300;400;600;700&display=swap');

  /* =========================
   GLOBAL TYPOGRAPHY RESET
   ========================= */

  html {
      font-size: 16px;
  }

  body {
      font-family: 'Poppins', sans-serif;
      font-weight: 400;
      line-height: 1.7;
      color: #ffffff;
  }

  /* Remove font overrides */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  label,
  button {
      font-family: 'Poppins', sans-serif !important;
  }


  /* =========================
   HEADING HIERARCHY
   ========================= */

  h1 {
      font-size: 3rem;
      /* ~48px */
      font-weight: 700;
      line-height: 1.2;
      text-align: left;
  }

  h2 {
      font-size: 2.2rem;
      /* ~35px */
      font-weight: 600;
      line-height: 1.3;
      margin-bottom: 0.8em;
  }

  h3 {
      font-size: 1.5rem;
      /* ~24px */
      font-weight: 500;
      line-height: 1.5;
      margin-bottom: 1em;
  }

  h4 {
      font-size: 1.3rem;
      /* ~20px */
      font-weight: 600;
      margin-bottom: 0.75em;
  }

  h5 {
      font-size: 1.05rem;
      /* ~17px */
      font-weight: 600;
      margin-bottom: 0.5em;
  }

  body {
      color: white;
      overflow-x: hidden;
      width: 95% !important;
      max-width: 1920px !important;
  }

  .header-home-wrapper {
      height: 97vh;
      display: flex;
      flex-direction: column;
      position: relative;
      gap: 1em;
  }

  i#closeVideo {
      position: absolute;
      color: black;
      z-index: 122;
      right: -20px;
      top: -20px;
      cursor: pointer;
      font-size: 2.5em;
      background-color: white;
      padding: 15px;
      padding-right: 30px;
      padding-top: 30px;
      border-radius: 21px;
      transition: all .3s;
  }

  #outright .form-check {
      font-size: 16px;
      margin: 1.5em 0em;
  }

  i#closeVideo:hover {
      transform: scale(1.2);
  }

  #top,
  #whatsApp {
      position: fixed;
      color: #111111;
      bottom: 1em;
      right: 1em;
      font-size: 2.5em;
      background: white;
      border-radius: 50%;
      cursor: pointer;
      display: none;
      z-index: 11;
      justify-content: center;
  }

  img {
      max-width: 100%;
  }

  #activeVid {
      opacity: 1 !important;
      transform: scale(1) !important;
      transition-delay: .2s !important;
      z-index: 1;
  }


  /* Primary Pricing Tabs */
  .pricing-tabs .nav-link {
      color: #fff;
      background: #000;
      border: 1px solid #fff;
      border-radius: 0;
      font-weight: 600;
      border-radius: 30px;
      padding: 14px;
      font-size: 15px;
  }

  .pricing-tabs .nav-link.active {
      background: #fff;
      color: #000;
      border-radius: 30px;
  }


  .plans_container h4 {
      color: #ffe16a;
      border-bottom: 1px solid #fff;
      padding-bottom: .5em;
      margin-top: 1em;
  }

  .plans_container ul {
      list-style: none;
      padding-left: 0;
  }

  ul#paygoOptions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      flex-direction: row;
      margin-bottom: 2em;
      flex-wrap: nowrap;
      gap: 15px;
  }

  .plans_container li {
      display: flex;
      align-items: center;
      padding-left: 0;
      margin: 1em 0;
  }

  /* Inner Tabs */
  .inner-tabs .nav-link {
      color: #fff;
      background: #000;
      border: 1px solid #fff;
      font-weight: 600;
      border-radius: 3em;
  }


  ul#paygoOptions strong {
      display: block;
      font-size: 16px;
      /* text-wrap-mode: wrap; */
      word-break: unset;
  }

  #paygoOptions li {
      flex: 1 !important;
      width: 100%;
  }

  .inner-tabs .nav-link.active {
      background: #fff;
      color: #000;
      border-color: #fff;
      font-size: 15px;
  }

  .price-text {
      color: #fff;
      font-weight: 600;
  }

  /* Outright Purchase container */
  #outrightContainer {
      background: #000;
      border: 1px solid #fff;
      border-radius: 12px;
      padding: 2em;
  }

  /* Button */
  .booking_init.btn {
      font-weight: 600;
      border-radius: 8px;
      transition: all 0.3s ease;
  }

  .booking_init.btn:hover {
      background: #ffd700;
      color: #000;
  }


  .accent-text {
      color: #dc3545 !important;
  }

  .accordion-item {
      background: #131313;
      border: 1px solid #ffffff80;
  }

  .accordion-button {
      background: #171717;
      color: #fff;
      font-weight: 700;
  }

  .accordion-button:not(.collapsed) {
      background: #1b1b1b;
  }

  .invoice-table {
      width: 100%;
      border-collapse: collapse;
      background: transparent;
      margin-top: 1rem;
  }

  .invoice-table th,
  .invoice-table td {
      border: 1px solid #ffffff80;
      color: #fff;
      padding: .75rem 1rem;
      text-align: left;
  }

  .invoice-table th {
      font-weight: 600;
  }

  .qty-input input.form-control {
      background: transparent;
      border: 1px solid #ffffff80;
      color: #fff;
  }

  .price-badge {
      width: auto;
      color: #ffe16a;
      font-weight: 600;
      font-size: 16px;
      margin-top: 1em;
      text-align: left;
  }


  .letter:last-child,
  .letter:nth-last-child(2),
  .letter:nth-last-child(4),
  .letter:nth-last-child(5) {
      color: #dc3545;
  }


  .map {
      display: block;
      margin: auto;
      margin-top: 6em;
      max-width: 100%;
  }

  .address_list_item {
      padding: 10px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
      flex: 1;
      overflow: hidden;
  }

  .address_list_item h4 {
      color: #ffde59;
      text-decoration: underline;
  }

  #contact>div.address_list {
      gap: 1em;
      margin-bottom: 3em;
      justify-content: space-between;
      margin-top: 1em;
      overflow: hidden;
  }

  .hero-video-container.fade-out {
      opacity: 0;
  }

  .widget img,
  .widget video {
      height: 180px;
      transition: all .3s;
      overflow: hidden;
      border-radius: 10px;
      width: 350px;
      pointer-events: none;
      /* height: 100%; */
      object-fit: cover;
  }

  .slick-current::after {
      opacity: 0;

  }

  .slick-current:hover:after {
      opacity: 1;
  }

  .widget:hover:after {
      transform: scale(1.3);
  }



  .slick-current::after,
  .has_player::after {
      transition: all .2s;
      content: '';
      background-image: url("assets/play.png");
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      height: 3em;
      top: 0;
      z-index: 3;
      bottom: 0;
      background-size: contain;
      background-repeat: no-repeat;
      width: 3em;
      border: solid;
      border-radius: 50%;
      background-color: white;
      pointer-events: none;
  }

  li.widget.widget_vid img {
      object-fit: cover;
  }

  .widget:hover img {
      filter: brightness(1);
  }

  html.sr .load-hidden {
      visibility: hidden;
  }

  html.sr .widget {
      visibility: hidden;
  }

  .swiper {
      box-shadow: none !important;
      max-width: 700px;
      width: 45%;
      border-radius: 2em;
      padding: 1em !important;
  }

  li.nav-item {
      position: relative;
  }

  li.nav-item .active {
      font-weight: bolder;
  }

  #heroVideoTabs .active::after {
      display: none;
  }


  .hamburger-menu {
      display: inline-block;
      cursor: pointer;
  }

  .hamburger-menu span {
      display: block;
      height: 1px;
      width: 25px;
      margin-bottom: 7px;
      position: relative;
      background: white;
      border-radius: 3px;
  }

  #typewriter {
      font-weight: bold;
      line-height: 1.8;
      max-width: 25em;
      text-align: center;
      transition: all 1s;
  }


  .letter {
      display: inline-block;
  }

  .bg {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      align-items: center;
      justify-content: center;
      background-size: 300% 300%;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1310%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%23SvgjsRadialGradient1311)'%3e%3c/rect%3e%3cpath d='M1440 0L1292.41 0L1440 63.42z' fill='rgba(255%2c 255%2c 255%2c .1)'%3e%3c/path%3e%3cpath d='M1292.41 0L1440 63.42L1440 315.64L760.9800000000001 0z' fill='rgba(255%2c 255%2c 255%2c .075)'%3e%3c/path%3e%3cpath d='M760.98 0L1440 315.64L1440 335.5L396.78000000000003 0z' fill='rgba(255%2c 255%2c 255%2c .05)'%3e%3c/path%3e%3cpath d='M396.78 0L1440 335.5L1440 440.55L266.34 0z' fill='rgba(255%2c 255%2c 255%2c .025)'%3e%3c/path%3e%3cpath d='M0 560L698.68 560L0 459.76z' fill='rgba(0%2c 0%2c 0%2c .1)'%3e%3c/path%3e%3cpath d='M0 459.76L698.68 560L881.68 560L0 296.53999999999996z' fill='rgba(0%2c 0%2c 0%2c .075)'%3e%3c/path%3e%3cpath d='M0 296.54L881.68 560L1207.81 560L0 225.46000000000004z' fill='rgba(0%2c 0%2c 0%2c .05)'%3e%3c/path%3e%3cpath d='M0 225.46000000000004L1207.81 560L1308.11 560L0 95.85000000000002z' fill='rgba(0%2c 0%2c 0%2c .025)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1310'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='0%25' cy='50%25' r='1466.97' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1311'%3e%3cstop stop-color='%230e2a47' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0.29'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e");
      animation: AnimateBG 8s ease infinite alternate;
  }

  .widget-list {
      list-style: none;
      padding: 0;
      display: flex;
      gap: 3em;
      flex-direction: row;
      padding-bottom: 15px;
      justify-content: flex-start;
      justify-content: start;
  }

  .feature-parent {
      display: flex;
      flex-direction: row;
      gap: 2em;
      /* space between items */
      overflow-x: auto;
      /* enable horizontal scroll */
      overflow-y: hidden;
      /* hide vertical scrollbar */
      scroll-behavior: smooth;
      /* optional: smooth scroll */
      flex-wrap: nowrap;
      /* keep items in one row */
      padding: 1rem;
      /* optional padding */
      position: relative;
  }

  .widget {
      height: auto;
      display: flex;
      border-radius: 1em;
      cursor: pointer;
      transition: all .3s;
      background: #111;
      gap: 15px;
      max-width: 90%;
  }

  #working img {
      width: auto;
      max-width: none;
      height: auto;
      margin: auto;
      display: block;
      object-fit: cover;
  }

  div#working {
      display: block;
  }

  div#scroll_process {
      overflow-x: auto;
  }

  /* Modal background */
  .video-modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
  }

  /* Modal content sliding up */
  .video-modal-content {
      position: absolute;
      left: 50%;
      bottom: -500px;
      /* hidden initially */
      transform: translateX(-50%);
      background: #000;
      border-radius: 12px;
      padding: 0;
      width: 80%;
      max-width: 800px;
      transition: bottom 0.4s ease-out;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  }

  /* Show with slide-up */
  .video-modal.show .video-modal-content {
      bottom: 10%;
  }

  /* Close button */
  .close {
      position: absolute;
      top: -30px;
      right: 0;
      color: #fff;
      font-size: 28px;
      cursor: pointer;
  }

  #heroVideoPlayer {
      box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      object-fit: contain;
      /* background: #000; */
      border-radius: 1em;
      /* padding: 10px; */
      border: solid 2px #7b7b7b;
      max-width: 100%;
      position: relative;
  }

  /* --- layout --- */
  .carousel {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 16px;
      /* optional: nice rounded corners like the ref */
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 1em;
  }

  .carousel-track {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      width: 100%;
  }

  /* hide native scrollbar */
  .carousel-track::-webkit-scrollbar {
      display: none;
  }

  .carousel-track {
      scrollbar-width: none;
  }

  /* each slide is 100% of container */
  .slide {
      flex: 0 0 100%;
      scroll-snap-align: start;
      height: 360px;
      /* adjust for your content */
      display: grid;
      place-items: center;
      font: 600 48px/1.2 system-ui, sans-serif;
      color: #fff;
      background: #111;
      /* demo only; replace with your images/content */
  }

  /* --- bottom controls --- */
  .controls {
      left: 16px;
      right: 16px;
      bottom: 16px;
      display: flex;
      justify-content: space-between;
      /* indicator left/center, arrows bottom-right */
      align-items: center;
      pointer-events: none;
      /* let children opt-in to clicks */
      flex: 0;
  }

  /* indicator pill (matches your first image) */
  .indicator {
      pointer-events: auto;
      background: #1f2023;
      border-radius: 9999px;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  .indicator .dot {
      height: 8px;
      width: 8px;
      /* dots */
      background: #cfd1d4;
      border-radius: 9999px;
      opacity: .8;
      transition: width .35s ease, opacity .2s ease;
  }

  .indicator .dot.active {
      width: 44px;
      /* active = elongated */
      opacity: 1;
  }

  /* arrows: white circular buttons with black chevrons */
  .arrows {
      display: flex;
      gap: 10px;
      pointer-events: auto;
      /* clickable */
  }

  .arrow {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: #fff;
      /* white circle */
      color: #000;
      /* black arrow */
      font-size: 26px;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
      transition: transform .15s ease, background .2s ease, color .2s ease;
  }

  .arrow:hover {
      transform: translateY(-1px);
  }

  .arrow:active {
      transform: translateY(0);
  }



  .hero-video-container {
      flex: 0 0 auto;
      min-height: 0;
      opacity: 1;
      transition: opacity 0.5s ease;
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  .video-overlay {
      position: absolute;
      z-index: 2;
      display: flex;
      flex-direction: column;
      bottom: 2em;
      padding: 1em;
      align-items: flex-start;
      gap: 10px;
      max-width: 700px;
  }


  .hero-video-container img {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      object-fit: cover;
      animation: zoomEffect 10s ease forwards;
      /* runs once */
  }

  @keyframes zoomEffect {
      from {
          /* transform: scale(1.5); */
          /* normal size */
      }

      to {
          /* transform: scale(1); */
          /* zoomed in */
      }
  }

  .hero-video-container::after {
      content: '';
      background: linear-gradient(rgb(0 0 0 / 22%), rgba(0, 0, 0, 0.9));
      position: absolute;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 1;
      top: 0;
  }

  .hero-video-container h2 {
      font-size: 3em;
      text-align: left;
      padding: 0;
      margin: 0;
  }

  .hero-video-container h3 {
      font-size: 1.25rem;
      line-height: 1.7;
      font-weight: 400;
      max-width: 42ch;
      text-align: left;
  }

  .subhead {
      position: relative;
      width: auto;
      display: block;
      font-size: 2.2rem;
      font-weight: 600;
      margin-bottom: 2rem;
      text-align: center;
  }

  .side-img {
      height: 480px;
      border-radius: 2em;
      object-fit: cover;
      max-width: 640px;
  }

  .subhead::after {
      content: '';
      border-bottom: solid 2px white;
      position: absolute;
      left: 50%;
      width: 4em;
      bottom: -12px;
      margin: auto;
      transform: translateX(-2em);
  }

  .side-label {
      font-size: 28px;
      font-weight: 600;
      text-align: left;
      margin-bottom: 1.5em;
  }

  .breather {
      display: flex;
      padding-top: 5em;
      padding-bottom: 5em;
      justify-content: space-evenly;
      margin: auto;
  }

  #features>.breather:nth-child(odd) {
      flex-direction: row-reverse !important;
  }

  .breather>div>span,
  .feature_number {
      color: #ffe16a;
      font-size: 150px;
      font-family: serif !important;
      z-index: -1;
      opacity: 0.9;
      display: inline;
      float: left;
      padding: 15px;
      height: fit-content;
      margin: 0;
      font-weight: bold;
      line-height: .6;
      margin-top: -2%;
  }

  .hardware_img {
      margin: 2em 0;
      width: 100%;
      max-width: 1920px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      min-width: 1024px;
      margin-bottom: 8em;
  }

  #features>div:nth-child(odd) .breather {
      flex-direction: row-reverse !important;
  }

  .side_heading {
      font-size: 36px;
      font-weight: 600;
      color: #ffe16a;
      display: block;
  }


  .breather-image-wrapper img {
      width: 100%;
      height: auto;
      object-fit: cover;
  }

  .subheading_2 {
      text-align: left;
      margin: .5em 0;
      color: #ffde59;
  }

  .device_content {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 1em;
      flex: 0 0 auto;
      /* don’t shrink, keep width */
      width: 400px;
      /* or whatever fixed width you want */
      background: #111;
      overflow: hidden;
      gap: 20px;
      border: solid #393939 1px;
      padding: 1em;
      padding-bottom: 1em;
      height: auto;
  }

  #manufacturing .device_content {
      padding: 0;
      width: 500px;
  }

  #manufacturing .device_content img {
      height: 400px;
      object-fit: cover;
  }

  .device_content h5 {
      margin-top: 0.75rem;
      margin-bottom: 0.5rem;
  }

  /* minimal additions to your existing .feature-parent */
  .feature-parent {
      /* your original properties kept */
      scroll-snap-type: x mandatory;
      /* add for snapping */
  }

  .device_content {
      /* width is already 300px in your CSS */
      scroll-snap-align: start;
      /* add for snapping */
  }

  /* optional: visual disabled state */
  .feature-arrow[disabled] {
      opacity: .4;
      cursor: not-allowed;
  }

  /* arrows row: bottom-right (thanks to margin-left:auto) */
  .feature-arrows {
      display: flex;
      gap: 10px;
      margin-left: auto;
      /* top/right spacing; right = 1rem to line up with parent padding */
      align-self: flex-end;
      width: 6em;
  }

  .feature-arrow {
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 50%;
      background: #fff;
      color: #000;
      font-size: 22px;
      line-height: 1;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  }

  /* optional: hide scrollbar (kept from before) */
  .feature-parent::-webkit-scrollbar {
      display: none;
  }

  .feature-parent {
      scrollbar-width: none;
  }


  .divider {
      padding-top: 5em;
  }

  #app img {
      max-width: 100%;
      border-radius: 2em;
      margin-bottom: 2em;
  }


  .feature_box {
      display: flex;
      gap: 4em;
      justify-content: space-evenly;
      flex-direction: column;
  }


  ul.feature_list li {
      width: 100%;
      text-align: left;
      margin: auto;
      padding: 0;
      font-size: 1.05rem;
      line-height: 1.9;
      margin-bottom: 0.6em;
  }


  .divider {
      padding-top: 5rem;
      padding-bottom: 5rem;
  }

  div#entrance {
      position: fixed;
      left: 0;
      height: 100vh;
      width: 100vw;
      margin: 0;
      display: flex;
      justify-content: center;
      padding-top: 10%;
      z-index: 99;
      background: black;
      top: 0;
  }

  #playerVideo {
      transition: opacity 0.6s linear;
  }

  @keyframes AnimateBG {
      0% {
          background-position: top right
      }

      100% {
          background-position: bottom right
      }

  }

  #mobile_carousel {
      display: none !important;
  }

  div#mobile_carousel>div {
      display: inline-block;
      opacity: .6;
      overflow: hidden;
      transform: scale(.8);
      width: 95%;
      transition: all .3s;
  }

  div#mobile_carousel {
      white-space: nowrap;
      overflow: hidden;
      padding: 3em 1em;
      display: block;
      padding-bottom: 0;
  }

  #mobile_carousel div img {
      height: 25em;
      width: 100%;
      border-radius: 1em;
      box-shadow: 0 1px 2px rgb(38 57 77 / 7%), 0 2px 4px rgb(38 57 77 / 7%), 0 4px 8px rgb(38 57 77 / 7%), 0 8px 16px rgb(38 57 77 / 7%), 0 16px 32px rgb(38 57 77 / 7%), 0 32px 64px rgb(38 57 79 / 7%);
      object-fit: cover;
  }

  #mobile_carousel .selected {
      transform: scale(1);
      opacity: 1;
      width: 80%;
  }

  #process ul li {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2em;
      text-align: center;
      width: 20em;
  }

  .security_list {
      display: flex;
      gap: 3em;
      overflow-x: auto;
      max-width: 95%;
  }

  .security_list img {
      width: 7em;
      object-fit: contain;
      height: 7em;
      align-items: center;
  }

  #security {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5em;
      flex-direction: column;
  }

  #process ul li img {
      width: 15em;
      padding: 1em 2em;
      margin-bottom: 1em;
  }

  .processCircle {
      width: 5em !important;
  }

  #process ul {
      display: flex;
      justify-content: space-around;
      padding: 0;
      align-items: center;
  }

  #process ul li label {
      position: relative;
  }

  .etr {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5em;
      align-content: center;
      margin: 2em 0;
  }

  .etr section {
      max-width: 20em;
      height: auto;
      font-size: 1.3em;
      line-height: 1.8;
      margin: 1em;
  }

  .etr img {
      width: 23em;
  }

  .swiper-pagination {
      position: block !important;
      text-align: center;
      transition: .3s opacity;
      transform: translate3d(0, 0, 0);
      z-index: 10;
      border: solid;
      width: 11em !important;
      border-radius: 2em;
      margin: auto;
      left: 0;
      right: 0;
      bottom: 0em !important;
      color: white;
  }

  .swiper-pagination-bullet {
      background-color: white !important;
      opacity: 1 !important;
  }

  ul#pricingTabs {
      display: flex;
      gap: 15px;
      flex-direction: row !important;
      max-width: 840px;
      margin: 3em auto;
  }

  ul#pricingTabs li {
      flex: 1;
  }

  .plans_container {
      background: black;
      padding: 2em;
      border-radius: 1em;
      /* box-shadow: 0px -1px 12px 6px rgb(223 223 223 / 15%); */
      text-align: left;
      width: 95%;
      margin: auto;
      max-width: 840px;
      border: solid #7b7b7b;
  }

  .plans_box {
      display: flex;
      flex-direction: row;
      justify-content: center;
  }

  .plans_container.selected {
      background: white;
      color: black;
      transform: scale(1);
      margin: 2em;
  }

  .plans_container>li {
      margin-bottom: 10px;
      list-style: none;
      padding: 0;
      display: flex;
      align-items: center;
  }


  .plans_container li i {
      margin-right: 11px;
      font-size: 2em;
  }

  .plans_container .booking_init {
      font-weight: 700;
      text-align: center;
      margin-top: 10px;
      max-width: 400px;
      margin: auto;
  }

  #paygoOptions button:hover {
      transform: scale(1.1);
      z-index: 99
  }


  .plans_container>button {
      background: white;
      border: none;
      border-radius: 10px;
      position: absolute;
      right: 0;
      bottom: -20px;
      padding: 10px 1.5em;
      z-index: 1;
      left: 0;
      width: 13em;
      margin: auto;
  }

  .device_content img {
      width: calc(100%);
      object-position: center;
      object-fit: cover;
      height: 300px;
      background: #252525;
      border-radius: 10px;
  }

  #software .device_content img {
      object-fit: contain;
  }


  .plans_container.selected button {
      background: #111111;
      color: white;
      border: solid 1px;
  }

  .isHorizontalScroll {
      overflow-x: auto;
      overflow-y: hidden;
  }

  .plans_container small {
      text-align: center;
      margin-bottom: 10px;
      display: block;
  }

  .plans_container h5 label {
      font-weight: 700;
      margin-bottom: 24px;
      text-align: center;
      display: block;
  }

  .plans_container li h5 {
      font-size: 1em;
      margin-bottom: 0;
  }

  div#accordion .card {
      background: transparent;
      width: 100%;
      padding: 0;
      text-align: left;
  }

  div#accordion .card-header {
      padding: 0;
      padding: 1em 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
      border-bottom: solid 1px;
  }

  div#accordion .card-header button.btn.btn-link {
      color: white;
      text-decoration: none;
      width: 100%;
      text-align: left;
  }

  button,
  .btn {
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.3px;
  }

  div#contact>div {
      display: flex;
      flex-direction: row;
      gap: 6em;
      margin-bottom: 2em;
      font-size: 1.3em;
      align-items: center;
      white-space: normal;
      width: 100%;
      overflow: scroll;
  }

  #contact>div label {
      min-width: 30%;
      font-size: 15px;
      line-height: 1.6;
  }

  .social i {
      border: solid 1px;
      padding: 1em;
      border-radius: 1em;
      margin-right: 1em;
  }

  footer {
      text-align: center;
      display: flex;
      border-top: 1px solid;
      justify-content: space-between;
      padding-top: 1em;
      margin-top: -1em;
      align-items: center;
      border-bottom: solid 1px;
      padding-bottom: 1em;
      margin-bottom: 1em;
  }

  .social a {
      color: white;
      text-decoration: none;
      display: inline-block;
  }

  .social i:hover {
      background: white;
      color: black;
      transition: all .3s;
  }

  label#status_basic,
  #status_address,
  #status_book,
  #verifyOTPError {
      color: red;
      text-align: center;
      font-weight: 800;
      margin: 1em;
  }

  #contact strong {
      font-weight: 700;
      min-width: 15em;
  }

  .swiper_heading {
      text-align: center;
      margin-top: 1em;
      text-decoration: none;
      font-size: 1.5rem;
      font-weight: 800;
  }

  .feature_list strong {
      color: #ffe16a;
      font-weight: 400;
  }

  .carousel_text {
      width: 200px;
      text-align: center;
      padding-top: 1em;
      padding-right: 1em;
  }

  .carousel_text h4 {
      font-size: 16px;
      text-align: left;
      line-height: 1.4;
      color: #ffe16a;
      font-weight: 600;
  }

  .selected .carousel_text {
      opacity: 1 !important;
  }

  .selected .carousel_text>* {
      opacity: 1;
      transform: translateY(0px);
      transition: all .4s;
      transition-delay: .4s;
  }

  .selected .carousel_text p {
      transition-delay: .6s;
  }

  .carousel_text h5 {
      font-weight: 900;
      font-size: 1.5em;
  }

  .carousel_text p {
      margin: auto;
      line-height: 1.8;
      transition: all .4s;
      color: white;
      font-size: 12px;
      text-align: left;
      font-weight: 400;
  }

  .widget h5 {
      font-weight: 600;
      font-size: 19px;
      margin: 0;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
      font-size: 14px;
      color: #000;
  }

  .swiper-slide {
      display: flex !important;
      justify-content: center !important;
  }

  #brochure a {
      background: #0d6efd;
      border-radius: 10px;
      color: white;
      padding: 10px 2em;
      font-weight: 600;
      text-decoration: none;
      font-size: 20px;
  }

  #carousel {
      position: relative;
      height: 100%;
      overflow-y: visible;
      overflow-x: hidden;
      display: flex;
      align-items: center;
      transform-origin: center;
      transform: scale(1.1);
      max-height: 700px;
      margin-top: -3em;
  }

  #entrance .scroller {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: 1em;
      bottom: 2em;
      font-size: 2em;
      display: flex;
      flex-direction: column;
      align-content: center;
      justify-content: center;
      align-items: center;
      gap: 15px;
      transition: all 1s !important;
  }

  .scroller small {
      white-space: nowrap;
      font-size: 14px;
  }


  div#home {
      position: relative;
      align-items: center;
      min-height: 0;


      /* enable horizontal scroll */
      flex: 1;
  }


  ul#heroVideoTabs {
      border: solid 1px #7b7b7b;
      justify-content: space-between !important;
      width: calc(100% - 3em);
      overflow-x: auto;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      flex: 0 0 auto;
      border-radius: 4px;
      background: #111;
      margin-left: 1.5em;
      margin-top: 10px;
  }

  ul#heroVideoTabs .nav-item {
      flex: 1;
      border-right: solid 1px;
      display: flex;
      overflow: hidden;
      flex-direction: row;
      flex-wrap: nowrap;
      min-width: 15em;
      margin: 0;
  }

  #heroVideoTabs .nav-link {
      width: 100%;
      color: white;
      padding: 12px;
      font-weight: bold;
      font-size: 14px;
  }

  #heroVideoTabs .nav-link.active {
      color: black;
  }

  #carousel img:hover {
      cursor: pointer
  }

  #carousel>div {
      position: absolute;
      transition: all 400ms;
      overflow: hidden;
      border-radius: 1em;
      width: 10%;
      opacity: .6;
      border: solid 1px #efefef
  }

  #carousel div img,
  #carousel div video {
      width: 100%;
      transition: all 400ms;
      height: 100%;
      background-color: black;
  }

  #carousel div.hideLeft {
      left: 0%;
      opacity: 0;
      transform: translateY(50%) translateX(-50%);
  }

  #carousel div.prevLeftSecond {
      z-index: 4;
      height: 140px;
      left: 85%;
      transform: translateY(50%) translateX(-50%);
      opacity:
          0.2;
  }

  #carousel div.prev {
      z-index: 5;
      left: 20%;
      height: 350px;
      transform: translateY(50px) translateX(-50%);
  }

  #carousel div.selected {
      z-index: 10;
      left: 50%;
      transform: scale(1) translateY(10%) translateX(-50%);
      opacity: 1;
      transform-origin: center;
      width: 60% !important;
      height: 500px;
      box-shadow: 0px -1px 20px 7px rgb(223 223 223 / 15%);
      border: none;
  }

  #carousel div.next {
      z-index: 5;
      left: 80%;
      height: 350px;
      transform: translateY(50px) translateX(-50%);
  }

  #carousel div.nextRightSecond {
      z-index: 4;
      height: 140px;
      left: 15%;
      transform: translateY(50%) translateX(-50%);
      opacity: 0.2;
  }

  #carousel div.hideRight {
      left: 100%;
      opacity: 0;
      transform: translateY(50%) translateX(-50%);
  }

  /*previous or next buttons css*/
  main>button {
      position: absolute;
      border: none;
      background: transparent;
      padding: 0;
      cursor: pointer;
      top: 0em;
      bottom: 0;
      margin: auto;
      z-index: 11;
      color: white;
  }

  main>button:hover {
      filter: brightness(110%);
      -webkit-filter: brightness(110%);
  }

  main>button:hover .button-82-front {
      transform: translateY(-6px);
      transition:
          transform 250ms cubic-bezier(.3, .7, .4, 1.5);
  }

  main>button:active .button-82-front {
      transform: translateY(-2px);
      transition: transform 34ms;
  }

  main>button:hover .button-82-shadow {
      transform: translateY(4px);
      transition:
          transform 250ms cubic-bezier(.3, .7, .4, 1.5);
  }

  main>button:active .button-82-shadow {
      transform: translateY(1px);
      transition: transform 34ms;
  }

  main>button:focus:not(:focus-visible) {
      outline: none;
  }

  .main .carousel_text>* {
      opacity: 0;
      transition: all .4s;
      transform: translateY(10px)
  }

  .desktopList>div {
      display: flex;
      height: 100%;
      align-content: center;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
  }

  .desktopList .videos li {
      margin-top: -1em;
      height: calc(100% - 2em);
      display: flex;
      align-items: center;
      opacity: 0;
      transition: all .3s;
      border: solid 2px;
      padding: .5em;
      border-radius: 1em;
      flex-direction: column;
      max-height: 900px;
      transition-delay: 0s;
      transform: scale(.7);
  }

  .videos li video,
  .videos li img {
      height: 100%;
      object-fit: contain;
      border-radius: 14px;
      max-width: 90%;
  }

  .videos li video.active,
  .videos li img.active {
      z-index: 1;
  }

  .desktopList ul {
      list-style: none;
      display: flex;
      align-items: center;
      height: 100%;
      width: calc(100% - 5em);
      justify-content: center;
      padding: 0;
  }

  .desktopList ul li {
      font-size: 3em;
      text-align: center;
      line-height: 2.4;
      font-weight: 900;
      opacity: 1;
      position: absolute;
      margin: auto;
      transition: all .3s;
      display: inline-flex;
      cursor: pointer;
  }

  li#activeText {
      opacity: 1 !important;
      transform: none !important;
  }

  div#videoModal {
      position: fixed;
      width: 100%;
      height: 100vh;
      left: 0;
      top: 0;
      z-index: 11;
      transition: all .3s;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  video#modalVideoPlayer {
      height: 90%;
      z-index: 1;
      border: solid 2px;
      border-radius: 2em;
      max-width: 90%;
  }

  div#videoModal::before {
      content: '';
      position: absolute;
      background: #000000;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
  }

  .slider {
      width: 100%;
  }

  .slick-slide {
      margin: 0px 20px;
  }

  .slick-prev:before,
  .slick-next:before {
      color: black;
  }

  .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
      transform: scale(.4);
  }

  .slick-next {
      right: 0;
  }

  .slick-prev {
      left: 0;
  }

  /* Base table structure */
  .terms-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1.5em;
      color: #fff;
      table-layout: fixed;
      /* Ensures consistent column width alignment */
  }

  /* Table cells */
  .terms-table td {
      padding: 0.6em 0.8em;
      vertical-align: top;
      line-height: 1.6;
      word-wrap: break-word;
  }

  /* Label column (first column) */
  .terms-table td:first-child {
      width: 38%;
      font-weight: 600;
      text-align: left;
      white-space: nowrap;
      padding-right: 0.5em;
      color: #ffffff;
  }

  /* Description column (second column) */
  .terms-table td:last-child {
      width: 60%;
      text-align: left;
      color: #e6e6e6;
  }

  /* Optional subtle row separator for readability */
  .terms-table tr+tr td {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .slider .min {
      transform: scale(.4) !important;
      opacity: 0.2 !important;
  }

  .slick-active {
      opacity: .6 !important;
      transform: scale(.8) !important;
  }

  .slick-current {
      opacity: 1 !important;
      transform: scale(1) !important;
  }

  .slick-track {
      display: flex !important;
      align-items: center;
      justify-content: center;
  }


  .slider video {
      position: absolute !important;
      z-index: 1;
      background-color: #000;
      cursor: pointer;
      left: 0;
      top: 0;
  }

  #activeVid video {
      position: absolute !important;
      z-index: 1;
      background-color: #000;
      cursor: pointer;
      left: 10px;
      right: 10px;
      top: 10px;
      bottom: 10px;
      margin: auto;
  }

  .slider video,
  .slider img {
      width: 100%;
      border: solid 2px;
      padding: 15px;
      border-radius: 2em;
      position: relative;
      height: calc(100% - 3em);
  }


  .slick-slide span {
      display: flex !important;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
  }


  .slider h5 {
      text-align: center;
      font-weight: 700;
      margin-top: 1em;
      height: 1em;
  }

  .minPrev {
      margin-right: -4em;
  }

  .minNext {
      margin-left: -4em;
  }


  @keyframes zoomOut {
      0% {
          transform: scale(1.2);
      }

      100% {
          transform: scale(0.8);
      }
  }

  .plans_container form {
      display: flex;
      justify-content: center;
      margin: auto;
      margin-top: 3em;
      transform: scale(1.5);
      transform-origin: top;
      margin-bottom: -3em;
      width: 10em;
      align-items: center;
  }

  .booking_init {
      background: black;
      color: white;
      border: solid 1px;
      padding: 1em;
      border-radius: 2em;
  }

  .booking_init a {
      text-decoration: none;
      color: white;
      width: 100%;
      display: block;
  }

  .hero-video {
      height: 27em;
      max-width: 700px;
      margin: auto;
      display: flex;
      border-radius: 1em;
  }

  /* Chrome, Edge, Safari */
  ::-webkit-scrollbar {
      height: 10px;
      /* horizontal scrollbar height */
      background: transparent;
      /* removes track background */
  }

  ::-webkit-scrollbar-track {
      background: #111;
      /* dark track */
      border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
      background-color: #444;
      /* dark grey thumb */
      border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
      background-color: #666;
      /* lighter on hover */
  }

  ::-webkit-scrollbar-button {
      display: none;
      /* hide arrows */
  }

  /* Firefox */
  * {
      scrollbar-width: thin;
      /* thin scrollbar */
      scrollbar-color: #444 #111;
      /* thumb | track */
  }

  ul.feature_list {
      padding-top: 1em;
      margin-bottom: 0;
      padding-bottom: 2em;
      list-style: none;
      padding: .5em 1em;
  }

  div#mainContent {
      overflow-x: hidden;
  }

  #header-home-wrapper {
      transition: all 1s ease;
      opacity: 0;
  }

  iframe#modalVideoPlayer {

      border: 0;
      background: white;
      z-index: 1;
      width: 100%;
      height: 100%;
  }

  .accordion {
      background: transparent;
  }

  .accordion .accordion-item {
      background: transparent;
      border: 0;
      border-radius: 0;
  }

  .accordion .accordion-header {
      width: 100%;
  }

  .accordion .accordion-button {
      width: 100%;
      background: transparent;
      color: #fff;
      box-shadow: none;
      border: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 0;
      padding-left: 0;
      padding-right: 0;
      font-weight: 600;
  }

  .accordion .accordion-button:not(.collapsed) {
      background: transparent;
      color: #fff;
      box-shadow: none;
  }

  .accordion .accordion-button:focus {
      box-shadow: none;
  }

  .accordion .accordion-body {
      background: transparent;
      color: #fff;
  }

  .accordion .accordion-button::after {
      filter: invert(1);
  }

  .input-group {
      max-width: 200px;
  }

  #falconAccordion strong {
      display: none;
  }

  .qty-input input.form-control {
      background: #fff;
      color: #000;
      border: 1px solid #fff;
      max-width: 50%;
      text-align: center !important;
  }

  .qty-input .btn {
      border-color: #fff;
      color: #fff;
      width: 25%;
      padding: 1px;
  }


  @media only screen and (max-width: 1024px) {
      #features>.breather:nth-child(odd) {
          flex-direction: column !important;
      }
  }


  /* mobile & tablet */
  @media only screen and (max-width: 1400px) {

      header {
          display: none;
      }

      ul#paygoOptions {
          flex-direction: column;
      }

      .carousel {
          margin-top: 1.5em;
      }

      .hero-video-container {
          flex-direction: column;
          gap: 0em;
          width: 100%;
          align-items: center;
          height: 100%;
      }

      .widget-list {
          gap: 1.5em;
      }

      .container-fluid * {
          margin-top: 0 !important;
      }

      .header-home-wrapper {
          gap: 0em !important;
          height: 90vh;
      }

      .hero-video-container {
          flex-direction: column;
          gap: 1em;
      }

      #home {
          gap: 1em !important;
      }

      #heroVideoPlayer {
          flex: auto;
      }

      .hero-video-container h3 {
          flex: auto;
          line-height: 2;
          font-size: 16px;
      }

      #heroVideoTabs {
          margin-left: 0 !important;
          width: 100% !important;
      }

      .top {
          display: none !important;
      }

      #carousel div.selected {
          width: 80% !important;
      }

      .plans_container {
          padding: 2em 1em;
      }

      .etr img {
          display: none;
      }

      .etr div {
          text-align: left;
          margin: 1em 0;
          word-break: break-word;
      }

      div#contact>div {
          gap: 1em
      }

      #carousel div.prev {
          left: 10% !important;
      }

      #carousel div.next {
          left: 90% !important;
      }

      .divider {
          text-align: center;
      }

      .plans_box {
          flex-direction: column;
      }

      .etr .anim_left {
          display: none !important;
      }

      .etr p {
          width: 100% !important;
      }

      div#contact>div {
          flex-direction: column;
          gap: 0em !important;
      }

      footer {
          flex-direction: column-reverse;
          gap: 1em;
      }

      div#carousel {
          transform: none;
      }

      .logoIcon {
          transform: scale(.8);
          top: 0px !important;
          right: 5px !important;
      }

      .navbar-collapse {
          border-top: 1px solid white;
          padding-top: 1em;
          margin-top: 2em !important;
          border-bottom: 1px solid white;
      }

      .feature_box {
          flex-direction: column;
          align-items: center;
      }

      #process ul li {
          width: 90%;
          text-align: center;
      }

      #process ul {
          flex-direction: column;
      }

      .processCircle {
          position: absolute;
          left: 1.5em;
          z-index: -1;
      }

      .eventNames {
          display: none;
      }

      .desktopList .videos .vidPrev,
      .desktopList .videos .vidAfter,
      .desktopList .videos .vidPrev1,
      .desktopList .videos .vidAfter1 {
          left: -65%;
          top: 0;
          opacity: 1;
          display: block !important;
      }

      .desktopList .videos .vidPrev1 {
          left: -100% !important;
      }

      .desktopList .videos .vidAfter {
          right: -150%;
          left: 0 !important;
      }

      .desktopList .videos .vidAfter1 {
          right: -200% !important;
          left: 0 !important;
      }

      .desktopList ul {
          align-items: start;
          margin-top: 5em;
      }

      #activeVid h5 {
          position: absolute;
          bottom: -3em;
          color: white;
          width: 100%;
          font-weight: 900;
          text-align: center;
      }


      .desktopList .videos li {
          width: 80%;
          margin: auto;
          border-radius: 20px;
          position: absolute;
          display: none;
          padding: 10px;
      }

      #activeVid {
          right: 0;
          left: 0;
          width: 80%;
          transition-delay: 0s !important;
          display: block !important;
      }

      .widget {
          margin-right: 0;
          margin-bottom: 0;
          flex-grow: 0;
          flex-shrink: 0;
      }

      .carousel_text {
          font-size: 10px;
      }

      .swiper {
          width: 100%;
      }

      body {
          width: 100% !important;
      }

      .plans_container.selected {
          margin: 1em;
      }

      .swiper-slide {
          padding: 1em;

      }

      .swiper {
          padding: 0 !important;
      }

      .terms-table,
      .terms-table tr,
      .terms-table td {
          /* display: block; */
          width: 100%;
      }

      .terms-table td:first-child {
          font-weight: 700;
          margin-top: 1em;
          padding-bottom: 0.2em;
      }

      .terms-table td:last-child {
          padding-left: 0;
          font-size: 14px;
      }

      .terms-table tr+tr td {
          border-top: none;
      }

      .terms-table td strong {
          font-size: 12px;
          text-wrap: auto;
      }

      .subhead {
          font-size: 1.8em;
      }

      .side-label {
          font-size: 22px;
          line-height: 1.6;
      }


      .side_heading {
          font-size: 28px;
      }

      .breather>div>span {
          font-size: 100px;
      }

      ul#pricingTabs {
          margin-bottom: 0;
      }

      .plans_container li {
          margin: 10px;
      }

      .inner-tabs .nav-link {
          padding: 1em;
      }

      ul#paygoOptions strong {
          display: inline;
      }

      #outright .form-check {
          margin: 0.5em 0;
      }

      #security {
          gap: 3em;
      }

      .booking_init {
          margin-bottom: 1em !important;
          font-size: 20px;
      }
  }