.ck-editor__editable,
textarea {
  min-height: 150px;
}

.datatable {
  width: 100% !important;
}

.dataTables_length,
.dataTables_filter,
.dt-buttons {
  margin-bottom: 0.333em;
  margin-top: 0.2rem;
}

.dataTables_filter {
  margin-right: 0.2rem;
}

.dt-buttons .btn {
  margin-left: 0.333em;
  border-radius: 0;
}

.table.datatable {
  box-sizing: border-box;
  border-collapse: collapse;
}

table.dataTable thead th {
  border-bottom: 2px solid #c8ced3;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 1px solid #c8ced3;
}

.select2 {
  max-width: 100%;
  width: 100% !important;
}

.select2-selection__rendered {
  padding-bottom: 5px !important;
}

.has-error .invalid-feedback {
  display: block !important;
}

.btn-info,
.badge-info {
  color: white;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-image: none;
}

.sidebar .nav-item {
  cursor: pointer;
}

.btn-default {
  color: #23282c;
  background-color: #f0f3f5;
  border-color: #f0f3f5;
}

.btn-default.focus,
.btn-default:focus {
  box-shadow: 0 0 0 0.2rem rgba(209, 213, 215, 0.5);
}

.btn-default:hover {
  color: #23282c;
  background-color: #d9e1e6;
  border-color: #d1dbe1;
}

.btn-group-xs > .btn,
.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

/* *************************************************************************************************************************** */
/**************************************************** Custom Code From Here ****************************************************/
/* *************************************************************************************************************************** */

::-webkit-scrollbar {
  background-color: transparent;
  width: 5px;
  height: 4px;
}

/* background of the scrollbar except button or resizer */
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* scrollbar itself */
::-webkit-scrollbar-thumb {
  background-color: #babac0;
  border-radius: 16px;
  border: none;
}

/* set button(top and bottom of the scrollbar) */
body::-webkit-scrollbar-button {
  display: none;
}

.icon {
  display: block;
  height: 24px;
  width: 24px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.icon-rocket {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23FFFFFF'%3E%3Cpath d='m226-559 78 33q14-28 29-54t33-52l-56-11-84 84Zm142 83 114 113q42-16 90-49t90-75q70-70 109.5-155.5T806-800q-72-5-158 34.5T492-656q-42 42-75 90t-49 90Zm178-65q-23-23-23-56.5t23-56.5q23-23 57-23t57 23q23 23 23 56.5T660-541q-23 23-57 23t-57-23Zm19 321 84-84-11-56q-26 18-52 32.5T532-299l33 79Zm313-653q19 121-23.5 235.5T708-419l20 99q4 20-2 39t-20 33L538-80l-84-197-171-171-197-84 167-168q14-14 33.5-20t39.5-2l99 20q104-104 218-147t235-24ZM157-321q35-35 85.5-35.5T328-322q35 35 34.5 85.5T327-151q-25 25-83.5 43T82-76q14-103 32-161.5t43-83.5Zm57 56q-10 10-20 36.5T180-175q27-4 53.5-13.5T270-208q12-12 13-29t-11-29q-12-12-29-11.5T214-265Z'/%3E%3C/svg%3E");
}

.icon-fire {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23FFFFFF'%3E%3Cpath d='M240-400q0 52 21 98.5t60 81.5q-1-5-1-9v-9q0-32 12-60t35-51l113-111 113 111q23 23 35 51t12 60v9q0 4-1 9 39-35 60-81.5t21-98.5q0-50-18.5-94.5T648-574q-20 13-42 19.5t-45 6.5q-62 0-107.5-41T401-690q-39 33-69 68.5t-50.5 72Q261-513 250.5-475T240-400Zm240 52-57 56q-11 11-17 25t-6 29q0 32 23.5 55t56.5 23q33 0 56.5-23t23.5-55q0-16-6-29.5T537-292l-57-56Zm0-492v132q0 34 23.5 57t57.5 23q18 0 33.5-7.5T622-658l18-22q74 42 117 117t43 163q0 134-93 227T480-80q-134 0-227-93t-93-227q0-129 86.5-245T480-840Z'/%3E%3C/svg%3E");
}

.icon-support {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='M440-120v-80h320v-284q0-117-81.5-198.5T480-764q-117 0-198.5 81.5T200-484v244h-40q-33 0-56.5-23.5T80-320v-80q0-21 10.5-39.5T120-469l3-53q8-68 39.5-126t79-101q47.5-43 109-67T480-840q68 0 129 24t109 66.5Q766-707 797-649t40 126l3 52q19 9 29.5 27t10.5 38v92q0 20-10.5 38T840-249v49q0 33-23.5 56.5T760-120H440Zm-80-280q-17 0-28.5-11.5T320-440q0-17 11.5-28.5T360-480q17 0 28.5 11.5T400-440q0 17-11.5 28.5T360-400Zm240 0q-17 0-28.5-11.5T560-440q0-17 11.5-28.5T600-480q17 0 28.5 11.5T640-440q0 17-11.5 28.5T600-400Zm-359-62q-7-106 64-182t177-76q89 0 156.5 56.5T720-519q-91-1-167.5-49T435-698q-16 80-67.5 142.5T241-462Z'/%3E%3C/svg%3E");
}

.icon-best {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='M240-40v-329L110-580l185-300h370l185 300-130 211v329l-240-80-240 80Zm80-111 160-53 160 53v-129H320v129Zm20-649L204-580l136 220h280l136-220-136-220H340Zm98 383L296-558l57-57 85 85 169-170 57 56-226 227ZM320-280h320-320Z'/%3E%3C/svg%3E");
}

.icon-review {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='m363-390 117-71 117 71-31-133 104-90-137-11-53-126-53 126-137 11 104 90-31 133ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z'/%3E%3C/svg%3E");
}

.icon-safe-pay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='M420-360h120l-23-129q20-10 31.5-29t11.5-42q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 23 11.5 42t31.5 29l-23 129Zm60 280q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z'/%3E%3C/svg%3E");
}

:root {
  --white: #fff;
  --black: #000;
  --black-2: #101010;

  --primary-color: #ff6969;
  --primary-color-light: #ff69694d;

  /* --secondary-color: #00bcd4; */
  --secondary-color: #001122;

  --min-font-size: 1rem;
  /* Minimum base size */
  --max-font-size: 1.5rem;
  /* Maximum base size */
}

/* ############# new css */

/* START : Font css */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
/* END : Font css */

/* START : Base css */

body {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  overflow-x: hidden;
}

body.is-open-menu {
  overflow: hidden;
}

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: clamp(0.9rem, 2.5vw, 1.4rem);
}

h3 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin-bottom: clamp(0.8rem, 2vw, 1.3rem);
}

h4 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: clamp(0.7rem, 1.8vw, 1.2rem);
}

h5 {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: clamp(0.6rem, 1.5vw, 1rem);
}

h6 {
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  margin-bottom: clamp(0.5rem, 1.2vw, 0.9rem);
}

a,
button:focus,
a,
button {
  outline: none;
}

.bg-black {
  background-color: var(--black);
}

.container-custom {
  max-width: 1280px;
  padding: 0 20px;
}

.button {
  color: var(--white);
  padding: 10px 25px;
  justify-content: center;
  border-radius: 30px;
  background: var(--primary-color);
  display: inline-flex;
  position: relative;
  gap: 10px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--primary-color);
  transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  -webkit-clip-path: inset(0 round 10px);
  clip-path: inset(0 round 10px);
}

.button span {
  position: relative;
  z-index: 1;
}

.button:hover {
  color: var(--black);
  border-color: transparent;
}

.button:hover span {
  color: var(--black);
}

.button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ffffff;
  top: 0;
  left: 0;
  border-radius: 30px;
  pointer-events: none;
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s;
}

.button:hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}

.ptb-80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media screen and (max-width: 991px) {
  .ptb-80 {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media screen and (max-width: 767px) {
  .ptb-80 {
    padding-top: 35px;
    padding-bottom: 35px;
  }
}

/* END : Base css */

/* START : Header css */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: var(--white);
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
  /* background: linear-gradient(#FEC104, #FF9A00); */
}

@media screen and (max-width: 991px) {
  .header {
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .header.is-active {
    border-color: #4f4f4f;
  }
}

.header.is-scroll {
  /* background-color: var(--black); */
  border-color: #4f4f4f;
}

.header .header-logo {
  font-weight: 600;
  color: var(--black);
  font-size: 22px;
}

.header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.header .header-inner a.navbar-brand i {
  font-size: 24px;
  margin-right: 10px;
  color: var(--black);
}

.header .header-menu-list {
  display: flex;
  align-items: center;
  margin: 0;
}

@media screen and (max-width: 991px) {
  .header .header-menu {
    position: fixed;
    top: 64px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 64px);
    background-color: var(--white);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .header .header-menu.is-active {
    opacity: 1;
    pointer-events: all;
  }

  .header .header-menu-list {
    flex-direction: column;
    padding: 20px;
    align-items: flex-start;
  }
}

.header .header-menu-list li > a,
.header .header-menu-list li > button {
  background-color: transparent;
  border: none;
  color: inherit;
  font-size: initial;
  font-weight: initial;
  font-family: inherit;
  display: block;
  padding: 10px;
  position: relative;
}

@media screen and (max-width: 991px) {
  .header .header-menu-list li > button {
    justify-content: space-between;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .header .header-menu {
    top: 64px !important;
  }
}

.header .header-menu-list li > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  transition: all 0.3s ease;
  top: calc(100% - 10px);
  left: 10px;
  background-color: var(--white);
}

.header .header-menu-list li > a:hover::after {
  width: calc(100% - 20px);
}

.header .header-menu-list li > button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header .header-dropdown-menu {
  position: absolute;
  background-color: var(--white);
  top: 60px;
  right: 0;
  width: 700px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  padding: 16px;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
}

@media screen and (max-width: 991px) {
  .header .header-dropdown-menu {
    display: none;
    position: static;
    width: 100%;
  }

  .header .has-dropdown.active .header-dropdown-menu {
    display: grid;
  }
}

@media screen and (max-width: 767px) {
  .header .header-dropdown-menu {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 410px) {
  .header .header-dropdown-menu {
    grid-template-columns: repeat(1, 1fr);
  }
}

.header .header-dropdown-menu img {
  max-width: 50px;
  height: auto;
  max-height: 30px;
  object-fit: contain;
}

.header .header-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  color: var(--black);
  padding: 4px;
  border: 1px solid var(--black);
  border-radius: 4px;
}

@media screen and (max-width: 767px) {
  .header .header-dropdown-menu a {
    border-radius: 0;
  }
}

.header .has-dropdown {
  position: relative;
}

@media screen and (max-width: 991px) {
  .header .has-dropdown {
    width: 100%;
  }
}

.header .has-dropdown.active .header-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 991px) {
  .header .has-dropdown.active .header-dropdown-menu {
    display: grid;
  }
}

.hamburger {
  position: relative;
  font: inherit;
  display: none;
  padding: 0;
  height: 22px;
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: 0.15s;
  transition-property: opacity, filter;
  text-transform: none;
  color: inherit;
  border: 0;
  background-color: transparent;
}

@media screen and (max-width: 991px) {
  .hamburger {
    display: block;
  }
}

.hamburger-box {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 24px;
}

.hamburger-inner {
  position: absolute;
  top: 50%;
  margin-top: -2px;
  display: block;
  width: 30px;
  height: 2px;
  transition-property: transform;
  border-radius: 4px;
  background-color: var(--black);
  transition-duration: 75ms;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger-inner:after,
.hamburger-inner:before {
  display: block;
  content: "";
}

.hamburger-inner:after,
.hamburger-inner:before {
  position: absolute;
  width: 30px;
  height: 2px;
  transition-timing-function: ease;
  transition-duration: 0.15s;
  transition-property: transform;
  border-radius: 4px;
  background-color: var(--black);
}

.hamburger-inner:before {
  top: -10px;
}

.hamburger .hamburger-inner:before {
  transition: top 75ms ease 0.12s, opacity 75ms ease;
}

.hamburger-inner:after {
  bottom: -10px;
}

.hamburger .hamburger-inner:after {
  transition: bottom 75ms ease 0.12s,
    transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger.is-active .hamburger-inner {
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: rotate(45deg);
}

.hamburger.is-active .hamburger-inner:before {
  top: 0;
  transition: top 75ms ease, opacity 75ms ease 0.12s;
  opacity: 0;
}

.hamburger.is-active .hamburger-inner:after {
  bottom: 0;
  transition: bottom 75ms ease,
    transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
  transform: rotate(-90deg);
}

/* END : Header css */

/* START : Hero css */

.hero {
  position: relative;
  overflow: hidden;
  margin-top: 32px;
  color: var(--white);
  background: linear-gradient(to right, #112233, #001122);
}

.hero .hero-form {
  display: flex;
  gap: 16px;
  background-color: var(--white);
  padding: 16px;
  border-radius: 16px;
  max-width: 500px;
  flex-wrap: wrap;
}

@media screen and (max-width: 991px) {
  .hero .hero-footer,
  .hero .hero-form {
    margin: 0 auto;
  }
}

@media screen and (max-width: 767px) {
  .hero .hero-form {
    margin: 0;
    width: 100%;
    max-width: 100%;
    text-align: left;
    padding: 0;
    background-color: transparent;
  }

  .hero .hero-footer {
    flex-wrap: wrap;
  }
}

.hero .hero-form .serialGroup {
  width: 100%;
}

.hero .hero-form .serialGroup .text-warning {
  color: var(--primary-color) !important;
  text-transform: uppercase;
}

@media screen and (max-width: 767px) {
  .hero .hero-form .serialGroup {
    background-color: var(--white);
    border-radius: 8px;
    padding: 8px 20px;
  }

  .hero .hero-form .serialGroup label a {
    display: none !important;
  }
}

.hero .hero-form #formSubmit.button {
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  height: auto;
  min-width: 102px;
  /* background: linear-gradient(#001122, #112233); */
  transition: all 0.3s ease;
  font-weight: 900;
}

.hero .hero-form #formSubmit.button::before {
  /* border-radius: 0 !important; */
  /* background-color: var(--secondary-color) !important; */
}

@media screen and (max-width: 1199px) {
  .hero .hero-form #formSubmit.button {
    width: 100%;
  }
}

/* @media screen and (max-width: 767px) {
  .hero .hero-form #formSubmit.button {
    width: 100%;
    background: #000;
    color: #fff;
    border-color: #000;
  }

  .hero .hero-form #formSubmit.button::before {
    border-radius: 0 !important;
    background-color: #000 !important;
  }
} */

.hero .hero-form .hero-form-input-wrapper {
  border-radius: 12px;
  border: 2px solid var(--secondary-color);
  display: flex;
  gap: 12px;
  padding: 2px;
  flex-wrap: wrap;
  align-items: center;
}

@media screen and (max-width: 1199px) {
  .hero .hero-form .hero-form-input-wrapper {
    display: grid;
    gap: 8px;
  }
}

@media screen and (max-width: 767px) {
  .hero .hero-form .hero-form-input-wrapper {
    border: 0;
  }

  .hero .hero-form .serialGroup label {
    margin: 0 !important;
  }

  .hero .hero-form .hero-form-input-wrapper #serial {
    padding: 0;
    background-color: #fff;
    opacity: 1;
  }

  .hero .hero-form .hero-form-input-wrapper #formSubmit.button {
    background: #ffffff;
  }
}

.hero .hero-form .hero-form-input-wrapper input.hero-input {
  font-size: inherit;
  font-family: inherit;
  width: 100%;
  color: inherit;
  text-transform: uppercase;
  padding: 10px;
  outline: none;
  border: 0;
  border-radius: 10px;
}

@media screen and (max-width: 1199px) {
  .hero .hero-form .hero-form-input-wrapper input.hero-input {
    width: 100%;
  }
}

.hero .hero-form .hero-form-input-wrapper input.hero-input:focus {
  outline: none;
}

.hero .hero-form .hero-form-input-wrapper input.hero-input::placeholder {
  font-family: inherit;
  color: inherit;
  font-size: 20px;
  font-weight: 700;
  opacity: 0.5;
}

.hero .hero-form .hero-form-input-wrapper .button {
  cursor: pointer;
}

.hero .hero-form .hero-input-wrapper {
  display: none;
}

.hero .hero-form .hero-input-wrapper.show {
  display: block;
  width: 100%;
}

.hero .hero-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  /* color: var(--black); */
  gap: 25px;
  max-width: 500px;
}

.hero .hero-footer svg path {
  fill: rgb(0, 255, 238);
  color: rgb(0, 255, 238);
}

.hero .hero-footer .d-flex {
  align-items: center;
}

.hero .hero-form .hero-form-input-wrapper .button::before {
  display: none;
}

.hero .hero-product-content h1.h2 {
  font-size: 49px;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .hero .hero-product-content {
    text-align: left;
  }
}

.hero .hero-inner {
  min-height: 80vh;
  padding: 120px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 100%;
  margin: 0 30px;
  /* color: var(--black); */
}

@media screen and (max-width: 991px) {
  .hero .hero-inner {
    grid-template-columns: 1fr;
    min-height: 650px;
    /* text-align: center; */
  }
}

@media screen and (max-width: 767px) {
  .hero .hero-inner {
    margin: 0;
  }
}

.hero .hero-inner form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero .hero-inner > div {
  display: flex;
  flex-direction: column;
  /* align-items: start; */
  font-weight: 700;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .hero .hero-inner h1 {
    font-size: 34px;
  }

  .hero .hero-inner h1 br {
    display: none;
  }

  .hero .hero-inner p {
    font-size: 22px;
  }
}

.hero .hero-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

.hero .hero-bg-video::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.hero .hero-bg-video video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

.hero .hero-bottom {
  position: absolute;
  bottom: -200px;
  left: 0;
  width: 100%;
}

@media screen and (max-width: 1199px) {
  .hero .hero-bottom {
    bottom: -150px;
  }
}

@media screen and (max-width: 991px) {
  .hero .hero-bottom {
    bottom: -100px;
  }
}

.hero .hero-car {
  position: absolute;
  top: calc(50% - 200px);
  right: 100px;
  height: 350px;
  width: 350px;
  object-fit: contain;
  z-index: 9;
  animation: inCar 2s ease forwards;
}

@media screen and (max-width: 1365px) {
  .hero .hero-car {
    animation: inCar1365 2s ease forwards;
  }

  @keyframes inCar1365 {
    0% {
      transform: translate(100px, 20px) rotate(-40deg);
    }

    100% {
      transform: translate(-72px, 20px) rotate(-40deg);
    }
  }
}

@media screen and (max-width: 1199px) {
  .hero .hero-car {
    animation: inCar1199 2s ease forwards;
  }

  @keyframes inCar1199 {
    0% {
      transform: translate(200px, 20px) rotate(-40deg);
    }

    100% {
      transform: translate(-20px, 20px) rotate(-40deg);
    }
  }
}

@media screen and (max-width: 991px) {
  .hero .hero-car {
    position: static;
    margin: 0 auto;
    animation: inCar991 2s ease forwards;
  }

  @keyframes inCar991 {
    0% {
      transform: translate(0, 490px) rotate(52deg);
    }

    100% {
      transform: translate(0, 60px) rotate(52deg);
    }
  }
}

@media screen and (max-width: 767px) {
  .hero .hero-car {
    display: none;
    /* height: 200px;
    width: 200px;
    animation: inCar767 2s ease forwards; */
  }

  @keyframes inCar767 {
    0% {
      transform: translate(0, 490px) rotate(52deg);
    }

    100% {
      transform: translate(0, 60px) rotate(52deg);
    }
  }
}

.hero .hero-inner .button {
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 10px;
  width: 100%;
  max-width: 450px;
  height: 57px;
}

.hero .hero-inner .button::before {
  display: none;
}

.hero .hero-inner .button:focus span,
.hero .hero-inner .button:hover span {
  color: var(--white) !important;
}

@media screen and (max-width: 1199px) {
  .hero .hero-inner .button {
    max-width: 100%;
    width: 100%;
  }
}

@media screen and (max-width: 991px) {
  .hero .hero-inner .button {
    margin: 0 auto;
  }
}

.hero .hero-inner .h1 {
  font-size: 49px;
  font-weight: 900;
}

@media screen and (max-width: 991px) {
  .hero .hero-inner .h1 {
    font-size: 36px;
  }
}

@keyframes inCar {
  0% {
    transform: translate(100px, 0) rotate(-40deg);
  }

  100% {
    transform: translate(-180px, 0) rotate(-40deg);
  }
}

/* END : Hero css */

/* START : brands css */
.brands {
  background-color: var(--white);
  color: var(--black);
}

.brands-top h2 {
  font-size: 49px;
  font-weight: 900 !important;
}

@media screen and (max-width: 991px) {
  .brands-top h2 {
    font-size: 36px;
  }
}

@media screen and (max-width: 767px) {
  .brands-top h2 {
    font-size: 28px;
  }
}

.brands .brands-card img {
  margin: 0 auto;
  width: 80px;
  display: block;
  transition: all 0.6s ease;
  padding: 10px 0;
  min-height: 100px;
  object-fit: contain;
}

.brands .brands-card div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.brands .brands-card h6 {
  background: linear-gradient(to right, #112233, #001122);
  margin: 0;
  padding: 10px;
  color: var(--white);
  font-size: 16px;
  width: 100%;
}

.brands .brands-card {
  color: inherit;
  display: flex;
  justify-content: center;
  border-radius: 16px 16px 16px 0;
  overflow: hidden;
  text-align: center;
  border: 2px solid #001122;
  transition: all 0.3s ease;
  min-height: 151px;
  max-height: 151px;
}

.brands .brands-card:hover {
  border-radius: 16px;
}

.brands .brands-card:hover img {
  transform: scale(1.2);
}

/* END : brands css */

/* START : get-code css */

.get-code {
  position: relative;
  color: var(--white);
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.get-code .get-code-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

@media screen and (max-width: 991px) {
  .get-code .get-code-text h2 {
    font-size: 26px;
  }
}

.get-code .get-code-grid {
  display: grid;
  grid-template-columns: 70% 1fr;
  grid-gap: 40px;
}

@media screen and (max-width: 1199px) {
  .get-code .get-code-grid {
    display: flex;
    align-items: center;
  }
}

@media screen and (max-width: 767px) {
  .get-code .get-code-grid {
    flex-direction: column;
  }
}

.get-code .get-code-grid img {
  max-height: 300px;
}

@media screen and (max-width: 767px) {
  .get-code h2 {
    font-size: 24px;
  }

  .get-code h2 {
    br {
      display: none;
    }
  }
}

.get-code::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #23282c67;
  backdrop-filter: blur(10px);
}

/* END : get-code css */

/* START : feature css */

.features {
  background-color: var(--white);
  color: var(--black);
}

@media screen and (max-width: 991px) {
  .features h2 {
    font-size: 24px;
  }
}

@media screen and (max-width: 767px) {
  .features h2 {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 20px !important;
  }
}

.features .features-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px;
}

@media screen and (max-width: 991px) {
  .features .features-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 767px) {
  .features .features-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

.features .features-list .features-icon {
  margin-bottom: 10px;
  height: 48px;
  width: 48px;
  border-radius: 100%;
  background: var(--secondary-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.features .features-list .features-card {
  padding: 24px;
  background-color: #f6f6f6;
  border-radius: 16px;
}

/* END : feature css */

/* START : product css */

.product .product-card {
  background-color: var(--black-2);
  display: flex;
  flex-direction: row-reverse;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 767px) {
  .product .product-card {
    flex-direction: column;
  }
}

.product h2 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-weight: 700 !important;
}

@media screen and (max-width: 991px) {
  .product h2.h3.text-center.mb-5 {
    font-size: 28px !important;
  }
}

.product-slider-button {
  background-color: var(--white);
  color: var(--black);
  height: 42px;
  width: 42px;
  border-radius: 20px;
  font-size: 16px;
  justify-content: center;
  padding: 10px;
  align-content: center;
}

@media screen and (max-width: 767px) {
  .product h2 {
    font-size: 24px;
    margin-bottom: 20px !important;
  }
}

.product {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--black-2);
}

.product .product-card .product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: #23282c1f;
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.product .product-card .product-overlay span {
  background-color: var(--secondary-color);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 100px;
}

.product .product-card:hover .product-overlay {
  opacity: 1;
}

.product .product-card h2 {
  color: var(--black);
}

/* .product-slider {
  overflow: visible;
} */

.product .product-card h3 {
  padding: 12px 16px;
  width: 150px;
  flex: 0 0 150px;
  background-color: var(--white);
  display: flex;
  align-items: center;
  font-weight: 700;
  justify-content: center;
  font-size: 20px;
  color: var(--black);
}

@media screen and (max-width: 767px) {
  .product .product-card h3 {
    width: 100%;
    flex: 0 0 100%;
  }
}

.product .swiper-slide:nth-child(odd) .product-card h3 {
  background-color: var(--white);
  color: var(--black);
}

/* END : product css */

/* START : image text css */

.sec-image-text {
  overflow: hidden;
  transition: all 0.3s ease;
}

.sec-image-text:nth-child(odd) {
  background-color: var(--white);
}

.sec-image-text:nth-child(even) .image-text .text {
  color: var(--white);
}

.image-text {
  display: flex;
  align-items: center;
  gap: 80px;
}

@media screen and (max-width: 767px) {
  .image-text {
    gap: 40px;
    flex-direction: column;
  }
}

.image-text .image {
  position: relative;
  width: 40%;
}

@media screen and (max-width: 767px) {
  .image-text .image {
    width: 100%;
  }
}

.image-text .text {
  width: 60%;
}

@media screen and (max-width: 767px) {
  .image-text .text {
    width: 100%;
  }
}

.sec-image-text-wrapper .sec-image-text:nth-child(even) .image-text {
  flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {
  .sec-image-text-wrapper .sec-image-text:nth-child(even) .image-text {
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .image-text .image .image-wrapper {
    all: unset;
  }
}

.sec-image-text-wrapper
  .sec-image-text:nth-child(even)
  .image-text
  .image
  .image-wrapper {
  right: 0;
  left: initial;
}

.sec-image-text-wrapper
  .sec-image-text:nth-child(even)
  .image-text
  .image
  .image-wrapper {
  transform: scaleX(-1);
}

.image-text .image .image-wrapper img {
  transition: all 0.3s ease;
  clip-path: polygon(
    71.687% 4.94%,
    71.687% 4.941%,
    71.687% 4.941%,
    71.688% 4.941%,
    71.688% 4.941%,
    72.218% 5.518%,
    72.717% 6.097%,
    73.186% 6.684%,
    73.627% 7.284%,
    74.042% 7.899%,
    74.433% 8.534%,
    74.801% 9.195%,
    75.148% 9.884%,
    75.476% 10.606%,
    75.787% 11.366%,
    75.787% 11.366%,
    76.083% 12.169%,
    76.366% 13.018%,
    76.636% 13.918%,
    76.897% 14.873%,
    77.149% 15.887%,
    77.395% 16.965%,
    77.636% 18.112%,
    77.875% 19.33%,
    78.112% 20.626%,
    78.35% 22.002%,
    78.35% 22.005%,
    78.35% 22.007%,
    78.35% 22.007%,
    78.423% 22.361%,
    78.498% 22.699%,
    78.577% 23.023%,
    78.66% 23.332%,
    78.748% 23.63%,
    78.843% 23.916%,
    78.946% 24.192%,
    79.057% 24.459%,
    79.178% 24.719%,
    79.309% 24.972%,
    79.309% 24.972%,
    79.451% 25.22%,
    79.606% 25.463%,
    79.774% 25.703%,
    79.957% 25.942%,
    80.154% 26.179%,
    80.368% 26.418%,
    80.599% 26.658%,
    80.848% 26.902%,
    81.116% 27.15%,
    81.404% 27.405%,
    81.418% 27.416%,
    81.434% 27.42%,
    81.434% 27.42%,
    82.415% 27.603%,
    83.32% 27.701%,
    84.156% 27.724%,
    84.929% 27.678%,
    85.645% 27.574%,
    86.311% 27.418%,
    86.934% 27.221%,
    87.52% 26.99%,
    88.076% 26.734%,
    88.607% 26.461%,
    88.607% 26.461%,
    88.684% 26.42%,
    88.76% 26.379%,
    88.835% 26.338%,
    88.911% 26.297%,
    88.985% 26.255%,
    89.06% 26.214%,
    89.134% 26.173%,
    89.208% 26.132%,
    89.282% 26.091%,
    89.355% 26.05%,
    89.355% 26.05%,
    89.781% 25.814%,
    90.203% 25.586%,
    90.628% 25.373%,
    91.059% 25.178%,
    91.5% 25.008%,
    91.955% 24.867%,
    92.429% 24.76%,
    92.926% 24.693%,
    93.449% 24.67%,
    94.003% 24.697%,
    94.003% 24.697%,
    94.024% 24.699%,
    94.045% 24.701%,
    94.067% 24.703%,
    94.088% 24.705%,
    94.11% 24.707%,
    94.132% 24.709%,
    94.155% 24.711%,
    94.177% 24.713%,
    94.2% 24.715%,
    94.222% 24.716%,
    94.222% 24.716%,
    94.646% 24.756%,
    95.112% 24.819%,
    95.606% 24.924%,
    96.117% 25.091%,
    96.633% 25.338%,
    97.141% 25.684%,
    97.629% 26.148%,
    98.084% 26.749%,
    98.495% 27.506%,
    98.85% 28.438%,
    98.85% 28.438%,
    99.508% 31.58%,
    99.852% 35.004%,
    99.879% 38.669%,
    99.582% 42.534%,
    98.957% 46.558%,
    97.998% 50.7%,
    96.702% 54.919%,
    95.062% 59.173%,
    93.075% 63.422%,
    90.734% 67.626%,
    90.734% 67.626%,
    88.036% 71.739%,
    84.976% 75.724%,
    81.549% 79.538%,
    77.751% 83.14%,
    73.576% 86.49%,
    69.02% 89.545%,
    64.078% 92.265%,
    58.746% 94.609%,
    53.018% 96.536%,
    46.89% 98.004%,
    46.889% 98.004%,
    46.889% 98.004%,
    46.889% 98.004%,
    43.762% 98.624%,
    40.65% 99.109%,
    37.563% 99.461%,
    34.515% 99.683%,
    31.516% 99.778%,
    28.578% 99.746%,
    25.714% 99.592%,
    22.935% 99.318%,
    20.252% 98.926%,
    17.679% 98.418%,
    17.679% 98.418%,
    16.437% 98.122%,
    15.227% 97.798%,
    14.05% 97.446%,
    12.907% 97.067%,
    11.801% 96.661%,
    10.733% 96.229%,
    9.704% 95.77%,
    8.715% 95.286%,
    7.768% 94.776%,
    6.865% 94.24%,
    6.865% 94.24%,
    6.008% 93.681%,
    5.199% 93.097%,
    4.437% 92.489%,
    3.725% 91.858%,
    3.064% 91.204%,
    2.455% 90.527%,
    1.9% 89.827%,
    1.4% 89.106%,
    0.956% 88.362%,
    0.571% 87.598%,
    0.571% 87.598%,
    0.403% 86.769%,
    0.274% 85.966%,
    0.185% 85.183%,
    0.14% 84.415%,
    0.138% 83.659%,
    0.182% 82.91%,
    0.273% 82.163%,
    0.413% 81.414%,
    0.603% 80.658%,
    0.845% 79.892%,
    0.845% 79.892%,
    1.143% 79.104%,
    1.496% 78.296%,
    1.907% 77.462%,
    2.378% 76.6%,
    2.909% 75.703%,
    3.503% 74.767%,
    4.162% 73.789%,
    4.887% 72.763%,
    5.68% 71.685%,
    6.542% 70.551%,
    6.545% 70.547%,
    6.548% 70.542%,
    6.548% 70.542%,
    7.083% 69.685%,
    7.58% 68.865%,
    8.041% 68.077%,
    8.468% 67.318%,
    8.861% 66.584%,
    9.222% 65.872%,
    9.552% 65.178%,
    9.853% 64.498%,
    10.125% 63.829%,
    10.371% 63.167%,
    10.371% 63.167%,
    10.592% 62.507%,
    10.788% 61.847%,
    10.962% 61.184%,
    11.114% 60.513%,
    11.246% 59.83%,
    11.359% 59.133%,
    11.455% 58.418%,
    11.535% 57.68%,
    11.6% 56.917%,
    11.653% 56.124%,
    11.654% 56.108%,
    11.651% 56.091%,
    11.651% 56.091%,
    11.586% 55.697%,
    11.491% 55.308%,
    11.37% 54.924%,
    11.224% 54.544%,
    11.054% 54.168%,
    10.862% 53.793%,
    10.65% 53.42%,
    10.418% 53.046%,
    10.169% 52.672%,
    9.904% 52.296%,
    9.904% 52.296%,
    9.765% 52.107%,
    9.623% 51.916%,
    9.477% 51.724%,
    9.328% 51.531%,
    9.176% 51.337%,
    9.021% 51.14%,
    8.864% 50.943%,
    8.703% 50.743%,
    8.541% 50.542%,
    8.376% 50.338%,
    8.376% 50.338%,
    8.358% 50.316%,
    8.339% 50.293%,
    8.321% 50.27%,
    8.303% 50.248%,
    8.284% 50.225%,
    8.266% 50.203%,
    8.247% 50.18%,
    8.229% 50.157%,
    8.211% 50.134%,
    8.192% 50.112%,
    8.192% 50.112%,
    8.042% 49.926%,
    7.89% 49.739%,
    7.737% 49.55%,
    7.583% 49.359%,
    7.428% 49.165%,
    7.272% 48.97%,
    7.115% 48.771%,
    6.957% 48.571%,
    6.799% 48.368%,
    6.641% 48.162%,
    6.641% 48.162%,
    5.927% 47.202%,
    5.218% 46.18%,
    4.525% 45.086%,
    3.859% 43.914%,
    3.23% 42.656%,
    2.65% 41.302%,
    2.129% 39.847%,
    1.679% 38.281%,
    1.309% 36.596%,
    1.032% 34.785%,
    1.032% 34.785%,
    0.886% 31.968%,
    1.095% 28.774%,
    1.684% 25.302%,
    2.677% 21.653%,
    4.099% 17.929%,
    5.974% 14.229%,
    8.327% 10.654%,
    11.183% 7.305%,
    14.565% 4.283%,
    18.499% 1.688%,
    18.499% 1.688%,
    21.115% 0.676%,
    23.638% 0.254%,
    26.07% 0.351%,
    28.416% 0.894%,
    30.68% 1.813%,
    32.866% 3.035%,
    34.977% 4.49%,
    37.017% 6.106%,
    38.991% 7.811%,
    40.903% 9.535%,
    40.903% 9.535%,
    40.951% 9.578%,
    40.999% 9.622%,
    41.047% 9.666%,
    41.095% 9.709%,
    41.143% 9.753%,
    41.191% 9.796%,
    41.239% 9.84%,
    41.287% 9.883%,
    41.334% 9.926%,
    41.382% 9.97%,
    41.382% 9.97%,
    42.33% 10.825%,
    43.263% 11.652%,
    44.183% 12.441%,
    45.089% 13.182%,
    45.982% 13.864%,
    46.863% 14.479%,
    47.731% 15.016%,
    48.588% 15.466%,
    49.433% 15.818%,
    50.268% 16.062%,
    50.268% 16.062%,
    50.682% 16.142%,
    51.094% 16.19%,
    51.503% 16.206%,
    51.911% 16.19%,
    52.315% 16.138%,
    52.718% 16.052%,
    53.118% 15.928%,
    53.517% 15.766%,
    53.913% 15.565%,
    54.307% 15.323%,
    54.307% 15.323%,
    54.698% 15.039%,
    55.087% 14.713%,
    55.473% 14.343%,
    55.858% 13.928%,
    56.24% 13.467%,
    56.62% 12.958%,
    56.999% 12.401%,
    57.375% 11.794%,
    57.75% 11.136%,
    58.123% 10.427%,
    58.123% 10.427%,
    59.19% 8.731%,
    60.242% 7.302%,
    61.275% 6.119%,
    62.284% 5.164%,
    63.264% 4.416%,
    64.211% 3.856%,
    65.122% 3.465%,
    65.991% 3.223%,
    66.815% 3.111%,
    67.589% 3.11%,
    67.589% 3.11%,
    67.957% 3.144%,
    68.311% 3.199%,
    68.651% 3.273%,
    68.975% 3.361%,
    69.284% 3.463%,
    69.577% 3.576%,
    69.853% 3.697%,
    70.113% 3.824%,
    70.354% 3.955%,
    70.578% 4.087%,
    70.578% 4.087%,
    70.682% 4.153%,
    70.782% 4.218%,
    70.877% 4.282%,
    70.967% 4.345%,
    71.052% 4.406%,
    71.133% 4.466%,
    71.208% 4.523%,
    71.278% 4.578%,
    71.342% 4.631%,
    71.401% 4.68%,
    71.401% 4.68%,
    71.429% 4.704%,
    71.455% 4.726%,
    71.48% 4.748%,
    71.504% 4.769%,
    71.526% 4.788%,
    71.547% 4.807%,
    71.566% 4.825%,
    71.584% 4.841%,
    71.601% 4.857%,
    71.616% 4.871%,
    71.616% 4.871%,
    71.623% 4.878%,
    71.63% 4.884%,
    71.636% 4.89%,
    71.642% 4.896%,
    71.648% 4.901%,
    71.653% 4.907%,
    71.658% 4.911%,
    71.662% 4.916%,
    71.666% 4.92%,
    71.67% 4.924%,
    71.67% 4.924%,
    71.672% 4.925%,
    71.674% 4.927%,
    71.675% 4.929%,
    71.677% 4.93%,
    71.678% 4.932%,
    71.679% 4.933%,
    71.681% 4.934%,
    71.682% 4.935%,
    71.683% 4.936%,
    71.684% 4.937%,
    71.687% 4.94%
  );
}

@media screen and (max-width: 1199px) {
  .image-text .image .image-wrapper img {
    height: 520px;
    object-fit: cover;
  }
}

/* @media screen and (max-width: 991px) {
  .image-text .image .image-wrapper img {
   clip-path: none;
  }
} */

@media screen and (max-width: 767px) {
  .image-text .image .image-wrapper img {
    height: auto;
  }
}

.image-text:hover .image .image-wrapper img {
  transform: scale(1.04);
}

/* END : image text css */

/* START : footer css */

.footer {
  background-color: var(--black);
  color: var(--white);
}

.footer .footer-logo {
  font-weight: 600;
  color: var(--white);
  font-size: 22px;
}

.footer .footer-inner {
  border-bottom: 1px solid var(--white);
  margin-bottom: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .footer .footer-inner {
    flex-direction: column;
    gap: 20px;
  }

  .footer .navbar-brand {
    justify-content: center;
  }
}

.footer .footer-inner .navbar-brand i {
  font-size: 24px;
}

.footer .footer-inner ul {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer .footer-inner ul li a {
  transition: all 0.3s ease;
  position: relative;
}

.footer .footer-inner ul li a::before {
  content: "";
  position: absolute;
  height: 1px;
  top: 100%;
  left: 0;
  width: 0;
  transition: all 0.3s ease;
  background-color: var(--primary-color);
}

.footer .footer-inner ul li a:hover {
  color: var(--primary-color) !important;
}

.footer .footer-inner ul li a:hover::before {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .footer .footer-inner ul {
    white-space: nowrap;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 10px;
  }
}

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

@media screen and (max-width: 767px) {
  .footer .footer-bottom {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
  }
}

.footer .footer-bottom ul {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer .footer-bottom a {
  color: var(--white);
  height: 40px;
  width: 40px;
  border-radius: 100%;
  background: var(--secondary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.footer .footer-bottom a:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

/* END : footer css */

/* START : contact form */
.contact-form {
  padding-top: 80px !important;
  background: #d1dbe1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media screen and (max-width: 767px) {
  .contact-form {
    padding: 0 !important;
    padding-top: 60px !important;
  }
}

.contact-form .button span {
  display: flex;
  gap: 16px;
  align-items: center;
}

.contact-form textarea,
.contact-form input {
  background-color: transparent;
  border: 1px solid #23282c;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 16px;
}

.contact-form textarea::placeholder,
.contact-form input::placeholder {
  color: var(--black-2);
  font-size: 16px;
  font-family: inherit;
  opacity: 0.5;
}

/* END : contact form */

/* START : product hero css */

.product-hero {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--white);
  margin-top: 64px;
}

.product-hero .product-hero-overlay {
  background-color: #23282c67;
  backdrop-filter: blur(1px);
}

.product-hero .product-hero-inner {
  min-height: 500px;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
}

.product-hero .product-hero-inner form {
  padding: 24px;
  border-radius: 20px;
  background: var(--black);
  color: var(--white);
}

.product-hero .product-hero-inner form label {
  font-size: 20px;
  margin-bottom: 20px;
}

.product-hero .product-hero-inner form input {
  width: 100%;
  background-color: var(--white);
  padding: 10px 20px;
  border-radius: 10px 10px 0 0;
  border: none;
  opacity: 1 !important;
  font-family: inherit !important;
  letter-spacing: 3px;
  color: #000;
  font-size: 20px !important;
  font-weight: 500 !important;
  outline: none !important;
}

.product-hero .product-hero-inner form input:focus {
  outline: none !important;
}

.product-hero .product-hero-inner .serialGroup.position-relative {
  display: flex;
  flex-direction: column;
}

.product-hero .product-hero-inner form .button {
  width: 100%;
  text-transform: capitalize;
  height: 50px;
  border-radius: 0 0 10px 10px;
  clip-path: none;
}

.product-hero .product-hero-inner form .button::before {
  border-radius: 8px;
}

.product-hero .product-hero-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

.product-hero .product-hero-content h1 {
  font-weight: 700;
}

.product-hero .product-hero-content p {
  font-size: 20px;
  max-width: 620px;
}

/* END : product hero css */

.get-radio-code div:has(> img) {
  text-align: center;
}

.get-radio-code img {
  display: inline-block;
  max-height: 250px;
  margin: 0 auto;
  max-width: 250px;
}

@media screen and (max-width: 767px) {
  .get-radio-code img {
    height: auto;
  }
}

.sec-get-radio-code {
  padding: 40px 0;
}

.sec-get-radio-code .text {
  font-size: 18px;
}

.get-radio-code .get-radio-code-btn {
  padding: 12px 20px;
  background-color: var(--primary-color);
  border-radius: 100px;
  display: inline-block;
  color: var(--white);
  font-weight: 600;
  transition: all 0.3s ease;
}

.get-radio-code .get-radio-code-btn:hover {
  color: var(--white);
  background-color: var(--secondary-color);
}

.key-points-list {
  display: grid;
  grid-gap: 20px;
}

.key-points-list .key-points-card {
  border: 1px solid var(--primary-color);
  padding: 24px;
  border-radius: 24px;
  box-shadow: 0 7px 3px 0 var(--primary-color-light);
  background-color: var(--white);
  transition: all 0.3s ease;
}

@media screen and (max-width: 767px) {
  .key-points-list .key-points-card {
    padding: 16px;
    border-radius: 16px;
  }
}

.key-points-list .key-points-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 3px 0 #ff9a004d;
}

.key-points-list .key-points-card img {
  transition: all 0.3s ease;
}

.key-points-list .key-points-card:hover img {
  transform: scale(1.1);
}

.key-points {
  background-color: #adadad17;
  margin-bottom: 60px;
}

.sec-how-it-works {
  font-size: 16px;
  margin-bottom: 60px;
}

.sec-how-it-works .how-it-works__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-gap: 20px;
}

.sec-how-it-works .how-it-works__grid .how-it-works__item {
  text-align: center;
  width: calc(100% / 3 - 14px);
  flex: 0 0 calc(100% / 3 - 14px);
  padding: 16px;
  border: 1px solid var(--primary-color);
  border-radius: 16px;
  background-color: var(--white);
  box-shadow: 4px 4px 0px 4px var(--primary-color-light),
    inset 0px 0px 0px 0px var(--primary-color-light);
  transition: all 0.3s ease;
}

@media screen and (max-width: 991px) {
  .sec-how-it-works .how-it-works__grid .how-it-works__item {
    width: calc(100% / 2 - 20px);
    flex: 0 0 calc(100% / 2 - 20px);
  }
}

@media screen and (max-width: 767px) {
  .sec-how-it-works .how-it-works__grid .how-it-works__item {
    width: 100%;
    flex: 0 0 100%;
  }
}

.sec-how-it-works .how-it-works__grid .how-it-works__item:hover {
  box-shadow: 0 0 0 0 var(--primary-color-light),
    inset 0px 0px 0px 3px var(--primary-color-light);
}

.sec-how-it-works .how-it-works__grid .how-it-works__item-icon {
  background-color: var(--secondary-color);
  color: var(--white);
  border-radius: 100%;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 16px;
  font-size: 24px;
}

.info-card-list {
  padding: 40px 0;
  background-color: var(--white);
}

.info-card-list p a {
  color: var(--secondary-color);
}

.info-card-list .card .text {
  padding: 24px;
  border-radius: 14px;
  /* background-color: #fff5e9; */
  display: flex;
  flex-direction: column;
  align-items: start;
}

@media screen and (max-width: 991px) {
  .info-card-list .card .text {
    margin-top: 20px;
  }
}

@media screen and (max-width: 767px) {
  .info-card-list .card .text {
    margin-top: 16px;
    padding: 16px;
  }
}

.info-card-list .card .text a:not(.button) {
  color: var(--secondary-color);
}

.info-card-list .card .text a:not(.button):hover {
  text-decoration: underline;
}

.info-card-list .card .text ul {
  padding: 0;
  list-style: inside;
}

.info-card-list .card {
  border-radius: 24px;
}

@media screen and (max-width: 767px) {
  .info-card-list .card {
    border-radius: 16px;
  }
}

.info-card-list .card-bottom img {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  object-fit: contain;
}

.card-bottom-container {
  max-width: 1100px;
}

.info-card-list .text-bg-warning {
  background-color: transparent !important;
  border: 1px solid var(--secondary-color);
  display: inline-block;
  margin-right: 3px;
  padding: 6px 10px;
  font-weight: 400;
  border-radius: 100px;
}

.info-card-list-inner .card:nth-child(odd) {
  background-color: #f8f9fa !important;
}

.search-radio-code {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-radio-code .responsive-text {
  width: 500px;
}

@media screen and (max-width: 767px) {
  .search-radio-code .responsive-text {
    width: 100%;
  }
}

.radio-code-found {
  display: none;
  min-height: 100vh;
  padding: 120px 0 80px;
  justify-content: center;
  align-items: center;
  background: #d1dbe1;
  /* background: var(--secondary-color); */
}

.radio-code-found .custom-alert {
  display: flex;
  gap: 20px;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 3px 0 #ff9a004d;
  margin-bottom: 20px;
}

.radio-code-found .radio-code-found-inner {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.radio-code-found .radio-code-found-inner .list {
  border-radius: 10px;
}

.radio-code-found .radio-code-found-inner .main-text {
  margin-top: 10px;
  border: 1px solid var(--secondary-color);
  padding: 14px 20px;
  border-radius: 8px;
  background-color: #fff5e963;
  backdrop-filter: blur(10px);
  font-size: 20px !important;
  box-shadow: 0 0 3px 0 #ff9a004d;
  margin-bottom: 20px;
}

.comic-button {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: var(--white);
  background: var(--primary-color);
  border: none;
  text-transform: uppercase;
  border-radius: 10px;
  box-shadow: 0 0 0px 1px var(--white);
  transition: all 0.3s ease;
  cursor: pointer;
}

.comic-button.bg-white {
  background: #fff;
}

.comic-button.bg-black {
  background: #000;
  color: #fff;
  font-weight: 900;
}

.comic-button:active {
  box-shadow: none;
  transform: translateY(4px);
}

.comic-button svg {
  fill: #000;
}

.comic-button.bg-black svg {
  fill: #fff;
}

.payment {
  display: flex;
  min-height: 100vh;
  align-items: center;
  background: #d1dbe1;
  /* background: var(--secondary-color); */
}

@media screen and (max-width: 991px) {
  .payment {
    padding: 100px 0 80px;
  }
}

.payment .payment-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--white);
  margin-bottom: 20px;
  border-radius: 10px;
}

@media screen and (max-width: 991px) {
  .payment .payment-inner {
    grid-template-columns: 1fr;
    margin: 0;
    grid-gap: 16px;
  }
}

.payment .payment-left {
  border: 10px;
  background-color: #ffffff;
  padding: 0 32px;
  backdrop-filter: blur(10px);
  border-right: 1px dashed #198754;
  margin: 30px 0;
}

@media screen and (max-width: 991px) {
  .payment .payment-left {
    margin: 0;
  }
}

@media screen and (max-width: 767px) {
  .payment .payment-left {
    padding: 12px;
  }
}

.payment .payment-left .badge {
  white-space: break-spaces;
  line-height: 1.5;
}

.payment .payment-right-top {
  border: 10px;
  background-color: #fff;
  padding: 32px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 3px 0 #ff9900c8;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .payment .payment-right-top {
    padding: 12px;
  }
}

.payment .payment-right-bottom {
  border: 10px;
  background-color: #fff;
  padding: 0 32px;
  margin: 30px 0;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

@media screen and (max-width: 767px) {
  .payment .payment-right-bottom {
    padding: 12px;
  }
}

.payment .payment-right-bottom label {
  position: relative;
  padding-left: 40px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.payment .payment-right-bottom label::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 30px;
  height: 30px;
  border: 2px solid var(--primary-color-light);
  border-radius: 100px;
  pointer-events: none;
  transition: all 0.3s ease;
}

.payment .payment-right-bottom label::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 7px;
  width: 17px;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.6111L8.92308 17.5L20 6.5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center center;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s ease;
}

.payment .payment-right-bottom input {
  display: none;
}

.payment .payment-right-bottom input:checked + label::after {
  opacity: 1;
}

.payment .payment-right-bottom input:checked + label::before {
  background-color: #d1e7de;
  border-color: #1a8754;
}

.payment .payment-right-bottom #control-2,
.payment .payment-right-bottom #control-1 {
  padding: 6px 0;
  border-radius: 10px;
  /* margin-bottom: 4px; */
  /* background-color: #f9f9f9; */
}

.paymentBtn {
  padding: 10px;
  border: 0;
  font-weight: bold;
}

.line-dashed {
  border-top: 1px dashed #1a8754;
  opacity: 1;
}

.payment #paymentBtn {
  width: 100%;
  display: block;
  transition: all 0.3s ease;
  border-radius: 10px;
  text-transform: uppercase;
  background-color: var(--primary-color);
  color: var(--white);
}

.payment #paymentBtn:hover {
  color: #000;
  background-color: #f4f4f4;
}

.payment .code {
  font-family: monospace;
  color: #23282c;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 16px;
  resize: vertical;
  background-color: #d1dbe2;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

.ratingSection-left {
  padding: 24px;
  box-shadow: 0 0 40px 0 #adadad4f;
  border-radius: 14px;
}

.review-item {
  padding: 24px;
  box-shadow: inset 0 0 0 2px var(--primary-color-light);
  border-radius: 14px;
  margin-bottom: 20px;
}

.review-item .review-item-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.review-item .review-item-user img {
  height: 70px;
  width: 70px;
  border-radius: 100px;
}

.btn-grp {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-grp .button {
  border-radius: 10px;
  clip-path: none;
}

.btn-grp .button::before {
  border-radius: 10px;
}

.btn-grp .button:first-child {
  background-color: #101010;
  color: #fff;
  border-color: #000;
}

.rw-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.rw-navigation .rw-button {
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d5d5d5;
  border-radius: 8px;
}

.review {
  background-color: #f7f7f7;
}

.border-tb {
  border-top: 1px dashed #1a8754;
  padding: 10px 0;
  border-bottom: 1px dashed #1a8754;
  margin: 0 0 10px !important;
}

/* animation css */

/* on the svg element set up a default value for the --stroke-dash and --stroke-dash-negative attributes
  46 roughly being the length of the longest path.air
  */
body > svg {
  width: 600px;
  height: auto;
  --stroke-dash: 46;
  --stroke-dash-negative: -46;
}

/* animate the car to move slightly forwards and backwards */
g#car {
  transform: translateX(-3px);
  animation: translate 2s ease-in-out infinite;
}

/* animate the shadow to skew  toward the left */
path#shadow {
  animation: skew 2s ease-in-out infinite;
}

/* animate the wheels to spin  clockwise*/
g.wheels use {
  animation: rotate 2s linear infinite;
}

/* animate the dashes of air to briefly show them and then hide them from view */
path.air {
  /* starting from the values described by the --stroke-dash property
    ! the property is updated for each path in the script
    */
  stroke-dasharray: var(--stroke-dash);
  stroke-dashoffset: var(--stroke-dash);
  /* ! the delay of the animation is also set up in the script  */
  animation: offset 2s linear infinite;
  /* opacity to hide the obnoxious dots otherwise shown on firefox and edge */
  opacity: 0;
}

/* keyframe animations
  ! be sure to have the animations overlap as to show a realistic behavior
  - as the car moves right the wheels spin faster, the shadow skews left, the dashes of air appear in sequence
  - as the car moves left the wheels spin slower while the shadow returns to its resting place
  */
@keyframes translate {
  50% {
    transform: translateX(3px);
  }

  100% {
    transform: translateX(-3px);
  }
}

@keyframes skew {
  50% {
    transform: skewX(-20deg);
  }
}

@keyframes rotate {
  50% {
    transform: rotate(4turn);
  }

  100% {
    transform: rotate(6turn);
  }
}

/* beside animating the stroke-dashoffset property rapidly change the opacity to show the dashes and hide them when they are removed by changing the offset property
  otherwise the dashes would still be partially visible on firefox and edge (at least)
  */
@keyframes offset {
  1% {
    opacity: 1;
  }

  15% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  24% {
    opacity: 1;
  }

  25% {
    opacity: 0;
    /* ! on chrome and firefox the calc() function allows to compute the negative value, but Edge seems to prefer having another variable instead */
    /* stroke-dashoffset: calc(var(--stroke-dash) * -1px); */
    stroke-dashoffset: var(--stroke-dash-negative);
  }

  100% {
    stroke-dashoffset: var(--stroke-dash-negative);
  }
}

.code {
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.spinner {
  background: conic-gradient(#0000 10%, var(--primary-color)) !important;
}

.custom-alert svg {
  fill: var(--primary-color);
}

.main-animation-block {
  display: flex;
  align-items: center;
  margin: 30px 0;
}

/* === Isolated submenu classes only === */
.brand-with-submenu {
  position: relative;
}

.submenu-items {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  top: 40px;
  left: 0;
  padding: 10px 0;
  transform: translateY(10px);
  background-color: #fff;
  box-shadow: 0 0 10px 0px rgb(255 255 255 / 63%);
  border: 1px solid #000;
  margin: 0;
  min-width: 180px;
  z-index: 9999;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 767px) {
  .submenu-items {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    display: none;
    transform: translate(0);
  }

  .submenu-items.active {
    display: block;
    border-top: 0;
    border-radius: 0;
  }
}

.brand-title {
  position: relative;
}

.brand-title > a {
  padding-right: 40px !important;
}

.brand-title i {
  position: absolute;
  right: -7px;
  top: 0;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .brand-title i {
    pointer-events: all;
  }
}

.brand-with-submenu:hover .submenu-items {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transform: translate(0);
}

.submenu-items li {
  list-style: none;
}

.submenu-link {
  display: block;
  padding: 8px 15px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}
.submenu-link:hover {
  background-color: #f8f9fa;
}
.header .header-menu-list li > a.submenu-link {
  padding: 8px 20px;
}

.header .header-menu-list li > a.submenu-link::after {
  display: none;
}

.header .header-menu-list li > a.submenu-link:hover {
  background-color: #ff6869;
  color: #fff;
}
