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

.datatable {
    width: 100% !important;
}

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

.dataTables_filter {
    margin-right: .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 .2rem rgba(209, 213, 215, .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;
    /* --secondary-color: #00bcd4; */
    --secondary-color: #ff9a00;

    --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: #fff;
    padding: 10px 25px;
    justify-content: center;
    border-radius: 30px;
    background: var(--secondary-color);
    display: inline-flex;
    position: relative;
    gap: 10px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--secondary-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%;
    }
}

.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(2, 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 {
    background: linear-gradient(#fec104, #ff9a00);
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #f8f8f8;
    transition: all 0.3s ease;
    color: var(--black);
    padding: 4px;
    border-radius: 4px;
}

.header .header-dropdown-menu a:hover {
    background-color: #eeeeee;
}

.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-color: var(--secondary-color); */
    background: linear-gradient(#fec104, #ff9a00);
}

.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%;
}

@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(#fec104, #ff9a00);
    transition: all .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 .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(--white);
    background-color: var(--white);
    color: var(--black-2);
    border-radius: 10px;
    width: 100%;
    max-width: 450px;
    height: 57px;
}

@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-color: var(--secondary-color);
    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 var(--secondary-color);
    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 {
    border: 1px solid black;
}

.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(--black-2);
    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(--black-2);
    background-color: var(--secondary-color);
}

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

.key-points-list .key-points-card {
    border: 1px solid var(--secondary-color);
    padding: 24px;
    border-radius: 24px;
    box-shadow: 0 7px 3px 0 #ff9a004d;
    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(--secondary-color);
    border-radius: 16px;
    background-color: var(--white);
    box-shadow:
        4px 4px 0px 4px #ff9a004d,
        inset 0px 0px 0px 0px #ff9a004d;
    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 #ff9a004d,
        inset 0px 0px 0px 3px #ff9a004d;
}

.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: #000;
    background: linear-gradient(#fec104, #ff9a00);
    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 #ff9a00;
    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;
    background: linear-gradient(to right, #ff9a00, #ff9a00);
    text-transform: uppercase;
}

.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 #adadad4f;
    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: #ffbb56;
    color: #000;
    border-radius: 10px;
    margin-bottom: 10px;
    display: inline-block;
}

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

/* @media screen and (max-width: 350px) {
    .skiptranslate {
        max-width: 320px !important;
    }
} */