@font-face {
    font-family: "Poppins Light";
    src: url("./fonts/Poppins-Light.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins Regular";
    src: url("./fonts/Poppins-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins Medium";
    src: url("./fonts/Poppins-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins Semibold";
    src: url("./fonts/Poppins-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins Black";
    src: url("./fonts/Poppins-Black.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins Bold";
    src: url("./fonts/Poppins-Bold.ttf") format("truetype");
}

*,
::after,
::before {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    padding-top: 80px; /* for fixed header */
    font-family: 'Poppins Regular';
}

ul,
li {
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.hidden {
    display: none;
}

#newsletter-form.hidden {
    display: none;
}

.form-control:focus,
.form-control:invalid:focus {
    outline: none !important;
    box-shadow: none !important;
}

.flex-2 {
    flex: 2;
}

.cursor-pointer {
    cursor: pointer;
}

.pointer-events-none {
    pointer-events: none !important;
}

textarea:focus-visible {
    outline: none;
}

.mb_20 {
    margin-bottom: 20px !important;
}

.mb_10 {
    margin-bottom: 10px !important;
}

.mt_10 {
    margin-top: 10px !important;
}

.mt-20 {
    margin-top: 20px;
}

.mb_22 {
    margin-bottom: 22px;
}

.bg-none {
    background: none;
}

.ml-5 {
    margin-left: 5px !important;
}

.form-control:focus {
    box-shadow: none;
}

.container-fluid {
    padding-left: 50px;
    padding-right: 50px;
}

/* Fixed state - applied after scrolling 300px */
.header {
    padding: 11px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transition: top 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.header.header-hidden {
    /* transform: translateY(-100%); */
    top: -100%;
}

.header.header-shadow {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header .header_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .header_wrapper .header-list-menu ul {
    display: flex;
    align-items: center;
    gap: 25px;
    overflow: visible;
    margin: 0 !important;
}

.header .header_wrapper .header-list-menu ul li {
    position: relative;
}

.header .header_wrapper .header-list-menu ul li a {
    position: relative;
    font-family: "Poppins Regular";
    font-size: 14px;
    color: #333;
    display: inline-block;
    text-transform: capitalize;
}

.header .header_wrapper .header-list-menu ul li a::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: -8px;
    width: calc(100% + 16px); /* border to be bigger than text */
    height: 3px;
    background: linear-gradient(
        90deg,
        #15537e 25.67%,
        #00b4e5 55.05%,
        #ffbb00 84.43%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.header .header_wrapper .header-list-menu ul li a.active::after,
.header .header_wrapper .header-list-menu ul li a:hover::after {
    opacity: 1;
}

.header .header_wrapper .login-btn {
    position: relative;
    background: linear-gradient(
        90deg,
        #15537e 0%,
        #00b4e5 110.57%,
        #ffbb00 221.15%
    );
    border-radius: 5px;
    padding: 6px 16px;
    font-family: "Poppins Regular";
    font-size: 14px;
    color: #fff;
    border: none;
    overflow: hidden;
    z-index: 1;
}

.header .header_wrapper .login-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        #15537e 25.67%,
        #00b4e5 55.05%,
        #ffbb00 84.43%
    );
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: -1;
    border-radius: 5px;
}

.header .header_wrapper .login-btn:hover::before {
    opacity: 1;
}

.header .header_wrapper .header-right-part {
    display: flex;
    align-items: center;
    gap: 26px;
}

.mobile-nav-toggle {
    color: #379ec1;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
    border: none;
    background-color: transparent;
    padding: 0;
}

.header-mobile-navbar {
    background: #fff;
    position: fixed;
    top: 0;
    right: -300px;
    max-width: 300px;
    width: 100%;
    height: 100%;
    padding: 30px 25px;
    z-index: 99;
    visibility: hidden;
    transition: 0.25s cubic-bezier(0.51, 0.03, 0.64, 0.28);
}

.header-mobile-navbar.active {
    visibility: visible;
    transform: translateX(-300px);
    transition: 0.5s cubic-bezier(0.33, 0.85, 0.56, 1.02);
    height: 100vh;
    overflow-y: auto;
}

.header-overlay.active {
    opacity: 0.7;
    pointer-events: all;
}

.header-overlay {
    position: fixed;
    inset: 0;
    background: hsl(0, 0%, 0%);
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease;
    z-index: 2;
}

.header .header-mobile-navbar .close-mobile-nav {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 22px;
}

.header .mobile-navbar-list {
    margin-top: 25px;
}

.header .mobile-navbar-list li {
    padding-bottom: 5px;
}

.header .mobile-navbar-list li:not(:last-child) {
    border-bottom: 1px solid hsl(0, 0%, 96%);
    margin-bottom: 14px;
}

.header .mobile-navbar-list li.active {
    border-bottom: 2px solid;
    border-image-source: linear-gradient(
        90deg,
        #15537e 25.67%,
        #00b4e5 55.05%,
        #ffbb00 84.43%
    );
    border-image-slice: 1;
}

.header .mobile-navbar-list li a {
    font-family: "Poppins Regular";
    font-size: 14px;
    color: #333;
    text-transform: capitalize;
}

/* HOME - SECTION ONE */
.home-page .section-one {
    margin-top: 60px;
}

.home-page .section-one .smartbox-span {
    border: 1px solid #aaaaaa;
    border-radius: 100px;
    padding: 12px 24px;
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #aaa;
    display: block;
    margin: 0 auto;
    width: fit-content;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-page .section-one h1.title {
    font-family: "Poppins Bold";
    font-size: 75px;
    line-height: 80px;
    color: #333;
    text-align: center;
    margin-top: 11px;
}

.home-page .product-laptop {
    display: none;
}

.home-page .section-one h1 span.gradient {
    background: linear-gradient(90deg, #15537e 0%, #00b4e5 50%, #ffbb00 190%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.home-page .section-one p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #333;
    text-align: center;
    margin-top: 11px;
    max-width: 885px;
    margin: 0 auto;
}

.home-page .section-one p span {
    font-family: "Poppins Bold";
    font-style: italic;
}

/* HOME - SECTION ONE */

/* HOME -SECTION TWO */
.home-page .section-two .scrolling-text-p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #333;
    margin-bottom: 40px;
    text-align: center;
}

/* distributors-infinit-slider */
.distributors-infinit-slider .slider {
    height: 60px;
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.distributors-infinit-slider .slider::before,
.distributors-infinit-slider .slider::after {
    position: absolute;
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    content: "";
    height: 100%;
    width: 25%;
    z-index: 2;
    pointer-events: none;
}

.distributors-infinit-slider .slider::before {
    left: 0;
    top: 0;
}

.distributors-infinit-slider .slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.distributors-infinit-slider .slide-track {
    display: flex;
    animation: distributorsScroll 40s linear infinite;
    gap: 68px;
    padding-right: 68px;
}

/* Pause animation on hover */
.distributors-infinit-slider .slide-track:hover {
    animation-play-state: paused;
}

.distributors-infinit-slider .slide {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    min-width: 120px; /* Fixed minimum width to prevent jumping */
}

.distributors-infinit-slider .slide img {
    max-height: 60px;
    max-width: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Image switching logic */
.distributors-infinit-slider .slide img.passive {
    opacity: 1;
    transition: opacity 0.3s ease;
    position: absolute;
}

.distributors-infinit-slider .slide img.active {
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
}

.distributors-infinit-slider .slide:hover img.passive {
    opacity: 0;
}

.distributors-infinit-slider .slide:hover img.active {
    opacity: 1;
}

@keyframes distributorsScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 768px) {
    .distributors-infinit-slider .slide-track {
        gap: 40px;
        padding-right: 40px;
    }

    .distributors-infinit-slider .slide {
        height: 40px;
        min-width: 100px;
    }

    .distributors-infinit-slider .slide img {
        max-height: 40px;
        max-width: 100px;
    }
}

/* HOME -SECTION TWO */

/* Home - SECTION THREE */
.home-page .section-three {
    margin-top: 80px;
}

.home-page .section-three .row > * {
    padding-right: 10px;
    padding-left: 10px;
}

.home-page .section-three h3.title {
    font-family: "Poppins Bold";
    font-size: 45px;
    line-height: 60px;
    color: #333;
    margin-bottom: 30px;
}

.home-page .section-three h3 span {
    color: #00b4e5;
}

.home-page .section-three .drives-box {
    border-radius: 20px;
    padding: 37px;
    background-color: #f5f5f5;
    transition: all 0.3s ease-out;
    cursor: pointer;
    height: 100%;
}

.home-page .section-three .drives-box:not(:last-child) {
    margin-bottom: 20px;
}

.home-page .section-three .drives-box.active {
    background-image: url("./images/drives_component_active.svg");
    background-repeat: no-repeat;
    background-size: cover;
}

.home-page .section-three .drives-box.active h4,
.home-page .section-three .drives-box.active p {
    color: #fff;
}

.home-page .section-three .drives-box h4 {
    font-family: "Poppins Bold";
    font-size: 28px;
    color: #aaa;
    margin: 20px 0 5px 0;
}
.home-page .section-three .drives-box p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #aaa;
    margin-bottom: 0;
    max-width: 700px;
}

.home-page .section-three .drives-main-image {
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.home-page .section-three .row {
    align-items: stretch; /* ensures equal height columns */
}

.home-page .section-three .col-lg-7,
.home-page .section-three .col-lg-5 {
    display: flex;
    flex-direction: column;
}

.home-page .section-three .drives_smartbox_height,
.home-page .section-three .drives-main-image {
    height: 721px;
}

.home-page .section-three .drives-main-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
    height: 721px;
}

/* Home - SECTION THREE */

/* Home - SECTION FOUR */
.home-page .border_space_wrapper .border__bottom {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 55px;
}
.home-page .border_space_wrapper.pb_80 .border__bottom {
    padding-bottom: 80px;
}

.home-page .border_space_wrapper .border__bottom.infinit-scroll {
    padding-bottom: 50px;
}

.home-page .section-four .title,
.home-page .section-five .title,
.home-page .section-six .title,
.home-page .section-seven .title-wrapper .title,
.contact-page .section-two h4.title {
    font-family: "Poppins Bold";
    font-size: 45px;
    line-height: 60px;
    color: #333;
    padding-top: 150px;
}

.contact-page .section-two h4.title {
    padding-top: 0;
    font-family: "Poppins Semibold";
}

.home-page .section-four .title span,
.home-page .section-five .title span,
.home-page .section-six .title span,
.home-page .section-seven .title-wrapper .title span,
.contact-page .section-two h4.title span {
    color: #00b4e5;
}

.home-page .video-section {
    overflow: hidden;
    margin-top: 180px;
}

.home-page .video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.sound-toggle {
    border: none;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
    z-index: 999;
    transform: translate(-50%, -50%);
}

.video-container:hover .sound-toggle {
    opacity: 1;
}

.home-page .scaling-video {
    width: 50%;
    border-radius: 20px;
    display: block;
    transition: all 0.6s ease;
}

.home-page .scaling-video.medium {
    width: 70%;
}

.home-page .scaling-video.large {
    width: 100%;
    border-radius: 0;
}

/* Home - SECTION FOUR */

/* HOME - SECTION FIVE */
.home-page .section-five .title {
    margin-bottom: 50px;
}

.home-page .section-five .product-info-box {
    background: #f5f5f5;
    border-radius: 20px;
    padding: 40px;
    border: 2px solid #f5f5f5;
    height: 100%;
    transition: all 0.3s ease-out;
}

.home-page .section-five .product-info-box:hover {
    background-color: #fff;
}

.home-page .section-five .product-info-box h5 {
    font-family: "Poppins Bold";
    font-size: 28px;
    color: #333;
    padding: 20px 0 5px 0;
}

.home-page .section-five .product-info-box p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #aaa;
    margin: 0;
}

/* HOME - SECTION FIVE */

/* HOME - SECTION SIX */
.home-page .section-six .title {
    padding-top: 80px;
    margin-bottom: 30px;
}

.home-page .section-six p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    margin: 0;
}

.home-page .home_tab__item {
    min-height: 350px;
    align-items: center;
}

.home-page .home_tab__item .padding_div_tab {
    padding-left: 50px;
}

.home-page .home_tab__item h3 {
    font-family: "Poppins Bold";
    font-size: 45px;
    line-height: 60px;
    color: #333;
    margin-bottom: 14px;
}

.home-page .home_tab__item h5,
.home-page .home_tab__item h6 {
    font-family: "Poppins Semibold";
    font-size: 24px;
    color: #00b4e5;
    margin-bottom: 14px;
}

.home-page .home_tab__item p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    margin: 0;
    max-width: 549px;
}

.home-page .home_tab__item h6 {
    margin-top: 26px;
    margin-bottom: 16px;
    color: #ffbb00;
}

.home-page .home_tab__item ul li {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
}

.home-page .home_tab__item ul li:not(:last-child) {
    margin-bottom: 12px;
}

.home-page .home_nav_options {
    margin-bottom: 95px;
}

.two-column-text {
    column-count: 2;
    column-gap: 50px;
    color: #555;
    text-align: left;
    margin: 0;
}
.two-column-text .column-break {
    display: block;
    break-before: column;
}

.home-page .home_nav_options .nav-tabs {
    justify-content: space-between;
    border-bottom: unset;
    gap: 20px;
    margin-top: 56px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.home-page .home_nav_options .nav-tabs::-webkit-scrollbar {
    display: none;
}

.home-page .home_nav_options .nav-tabs .nav-link {
    flex: 0 0 auto;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    padding: 10px;
    font-family: "Poppins Light";
    font-size: 16px;
    color: #aaa;
    min-width: 174px;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 0;
}

.home-page .home_nav_options .nav-tabs .nav-link.active {
    border-bottom: none;
    color: #fff;
    font-weight: 600;
}

.home-page .home_nav_options .nav-tabs .dashboard-nav-link.active {
    background: linear-gradient(
        90deg,
        #15537e 0%,
        #00b4e5 383.15%,
        #ffbb00 766.3%
    );
}

.home-page .home_nav_options .nav-tabs .programming-nav-link.active {
    background: linear-gradient(
        90deg,
        #15537e -109.68%,
        #00b4e5 272.76%,
        #ffbb00 655.2%
    );
}

.home-page .home_nav_options .nav-tabs .chip-functions-nav-link.active {
    background: linear-gradient(
        90deg,
        #15537e -222.19%,
        #00b4e5 162.52%,
        #ffbb00 547.24%
    );
}

.home-page .home_nav_options .nav-tabs .frequency-nav-link.active {
    background: linear-gradient(
        90deg,
        #15537e -333.58%,
        #00b4e5 50%,
        #ffbb00 433.58%
    );
}

.home-page .home_nav_options .nav-tabs .usage-logs-nav-link.active {
    background: linear-gradient(
        90deg,
        #15537e -446.1%,
        #00b4e5 -61.38%,
        #ffbb00 323.33%
    );
}

.home-page .home_nav_options .nav-tabs .unlocking-nav-link.active {
    background: linear-gradient(
        90deg,
        #15537e -556.34%,
        #00b4e5 -173.33%,
        #ffbb00 209.67%
    );
}

.home-page .home_nav_options .nav-tabs .additional-nav-link.active {
    background: linear-gradient(
        90deg,
        #15537e -666.58%,
        #00b4e5 -283.29%,
        #ffbb00 100%
    );
}

/* HOME - SECTION SIX */

/* HOME - SECTION SEVEN */
.home-page .section-seven .title-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 19px;
    margin-top: 75px;
    margin-bottom: 85px;
}

.home-page .section-seven .testimonials .item .wrapper {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    padding: 50px 35px;
}

.home-page .carousel-cell.is-selected .wrapper {
    background-color: #00b4e5;
    border-radius: 20px;
}

.home-page .testimonials .carousel-cell {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: transparent;
    transition: background-color 0.3s ease, height 0.3s ease;
}

.home-page .section-seven .testimonials .item .user-info,
.home-page .carousel-cell .user-info {
    margin-top: 23px;
    text-align: center;
}

.home-page .carousel-cell.is-selected .user-info {
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.home-page .section-seven .testimonials .item .user-info h3 {
    font-family: "Poppins Medium";
    font-size: 18px;
    line-height: normal;
    color: #333;
    margin: 3px 0 0 0;
}

.home-page .section-seven .testimonials .item .user-info img {
    width: 50px;
    border-radius: 100%;
}

.home-page .section-seven .testimonials .item .user-info span {
    font-family: "Poppins Regular";
    font-size: 16px;
    line-height: normal;
    color: #aaa;
}

.home-page .section-seven .testimonials .testimonial-left-gradient {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    background: linear-gradient(90deg, #ffffff, transparent);
    z-index: 1;
    pointer-events: none;
}

.home-page .section-seven .testimonials .testimonial-right-gradient {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    background: linear-gradient(270deg, #ffffff, transparent);
    z-index: 1;
    pointer-events: none;
}

.home-page .testimonials .carousel-cell {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: transparent;
    transition: background-color 0.3s ease, height 0.3s ease;
}

.home-page .section-seven .testimonials {
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    /* padding-bottom: 104px; */
}

.home-page .testimonials .carousel {
    background-color: #fff;
}

.home-page .testimonials .flickity-prev-next-button.previous {
    background-image: url(./images/left-arrow-slider.svg) !important;
    background-repeat: no-repeat;
    z-index: 2;
    top: 34%;
}

.home-page .testimonials .flickity-prev-next-button.next {
    background-image: url(./images/right-arrow-slider.svg) !important;
    background-repeat: no-repeat;
    z-index: 2;
    top: 34%;
    right: -3px;
}

.home-page .testimonials .flickity-page-dots {
    display: none !important;
}

.home-page .testimonials .flickity-prev-next-button .flickity-button-icon {
    display: none;
}

.home-page .testimonials .flickity-button {
    background: transparent;
    border-radius: 0 !important;
}

.home-page .testimonials .mobile_testimonial {
    display: none;
}

.home-page .carousel-cell {
    background-color: white;
    max-width: 660px;
}

.home-page .section-seven .testimonials .item p,
.home-page .carousel-cell p {
    font-family: "Poppins Regular";
    font-size: 24px;
    line-height: normal;
    color: rgba(112, 112, 112, 1);
    margin-bottom: 0;
}

.home-page .carousel-cell.is-selected p {
    color: #fff !important;
}

.home-page .carousel-cell:not(.is-selected) .user-info {
    display: none;
}

.home-page .testimonials .flickity-viewport {
    height: 500px !important;
}

/* mobile slider */
.home-page .section-seven .testimonials .item.active .wrapper {
    background-color: #00b4e5;
    border-radius: 20px;
}

.home-page .section-seven .testimonials .item.active p {
    color: #fff !important;
}

.home-page .section-seven .swiper-button-prev,
.home-page .section-seven .swiper-button-next {
    display: block;
    width: 15px;
    top: 32%;
}

.home-page .section-seven .swiper-button-next:after,
.home-page .section-seven .swiper-button-prev:after {
    display: none;
}

/* mobile slider */

/* HOME - SECTION SEVEN */

/* HOME - SECTION EIGHT */
.home-page .section-eight .title {
    font-family: "Poppins Bold";
    font-size: 45px;
    line-height: 60px;
    color: #333;
    margin-bottom: 30px;
    padding-top: 80px;
}

.home-page .section-eight .title span {
    color: #00b4e5;
}

.home-page .section-eight p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
}

.home-page .section-eight .images_wrapper {
    margin-top: 58px;
}

.home-page .section-eight figure {
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}

.home-page .section-eight figure img {
    height: 447px;
    object-fit: cover;
    object-position: top;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.home-page .section-eight figure .content {
    position: absolute;
    bottom: 7px;
    left: 40px;
    right: 40px;
}

.home-page .section-eight figure h4 {
    font-family: "Poppins Bold";
    font-size: 35px;
    color: #fff;
    margin-top: 15px;
}

.home-page .section-eight figure h4 span {
    font-family: "Poppins Light";
    font-size: 18px;
}

.home-page .section-eight figure p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #e5e5e5;
}

.home-page .section-eight figure:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/* HOME - SECTION EIGHT */

.subscribe-section {
    background-color: #e5e5e5;
    padding: 48px 0;
}

.subscribe-section .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-slider-container {
    display: flex;
    align-items: center;
    text-align: center;
    font-family: "Poppins Bold";
    font-size: 40px;
    position: relative;
    height: 80px;
    overflow: hidden;
}

.static-text {
    display: inline-block;
    color: #333;
    margin-right: 5px;
}

.connected-text {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #15537e 0%,
        #00b4e5 136.27%,
        #ffbb00 272.54%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease-out, filter 0.3s ease-out;
}

@media (max-width: 600px) {
    .connected-text {
        min-width: 200px;
        text-align: left;
    }
}

.connected-text.gray {
    background: none;
    -webkit-text-fill-color: #333;
    color: #333;
}

.connected-text.updated {
    background: linear-gradient(
        90deg,
        #15537e -127.81%,
        #00b4e5 42.13%,
        #ffbb00 212.08%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.connected-text.control {
    background: linear-gradient(
        90deg,
        #15537e -206.35%,
        #00b4e5 -53.17%,
        #ffbb00 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.slider-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    /* min-width: 200px; */
}

.sliding-text {
    display: inline-block;
    /* margin-left: 10px; */
    opacity: 0;
    transform: translateY(100%);
    position: relative;
    transition: filter 0.3s ease-out;
}

.sliding-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.sliding-text.gray {
    background: none;
    color: #333;
    filter: brightness(1);
}

.sliding-text.updated {
    background: linear-gradient(
        90deg,
        #15537e -127.81%,
        #00b4e5 42.13%,
        #ffbb00 212.08%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sliding-text.control {
    background: linear-gradient(
        90deg,
        #15537e -206.35%,
        #00b4e5 -53.17%,
        #ffbb00 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subscribe-section {
    margin-top: 80px;
}

.subscribe-section form {
    margin-top: 0;
    min-width: 320px;
    border-radius: 10px;
}

.subscribe-section form {
    background: #fff;
    padding: 6px 10px;
    position: relative;
    border-radius: 10px;
}

.subscribe-section form input[type="email"] {
    border: 0;
    padding: 8px;
    width: calc(100% - 140px);
}

.subscribe-section form input[type="email"]::placeholder {
    font-family: "Poppins Regular";
    color: #e5e5e5;
}

.subscribe-section form input[type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    background: 0;
    font-size: 16px;
    padding: 0 30px;
    margin: 3px;
    background: #4154f1;
    color: #fff;
    transition: 0.3s;
    border-radius: 4px;
    font-family: "Poppins Regular";
}

.subscribe-section form input[type="submit"] {
    background-color: #00b4e5;
    border-radius: 8px;
    margin: 5.5px;
    transition: background 0.5s ease-in-out;
}

.subscribe-section form input[type="submit"]:disabled {
    background-color: #aaa;
}

.subscribe-section form input[type="email"]:focus {
    box-shadow: none !important;
    outline: none !important;
}

.bars-footer {
    background-color: #e5e5e5;
}

.bars-footer .wrapper {
    border-top: 1px solid #d1d1d1;
    padding-top: 37px;
}

.bars-footer .row {
    padding-bottom: 66px;
}

.bars-footer .flex_wrapper_footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 45px;
    margin-bottom: 66px;
}

.bars-footer .flex_wrapper_footer .footer-info {
    flex: 2;
}

.bars-footer .flex_wrapper_footer .footer-links.first {
    flex: 1;
}

.bars-footer .flex_wrapper_footer .footer-links.first ul li:first-child a {
    pointer-events: none;
}

.bars-footer .footer-info h2 {
    font-family: "Poppins Semibold";
    font-size: 39px;
    font-style: normal;
    color: #333;
    margin-top: 10px;
    max-width: 570px;
}

.bars-footer .footer-info p {
    font-family: "Poppins Regular";
    font-size: 14px;
    line-height: normal;
    color: #707070;
    max-width: 567px;
}

.bars-footer .social-links {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: 32px;
}

.bars-footer .social-links a {
    width: 51px;
    height: 51px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    transition: all 0.3s ease-out;
}

.bars-footer .social-links a i {
    color: #333;
    font-size: 26px;
}

.bars-footer .social-links a.facebook i {
    font-size: 22px;
}

.bars-footer .social-links a.linkedin i {
    font-size: 23px;
}

.bars-footer .social-links a svg {
    width: 22px;
}

.bars-footer .social-links a.facebook:hover {
    background-color: #0866ff;
    border-color: #0866ff;
}

.bars-footer .social-links a.linkedin:hover {
    background-color: #0a66c2;
    border-color: #0a66c2;
}

.bars-footer .social-links a.instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.bars-footer .social-links a.instagram:hover {
    background: linear-gradient(
        45deg,
        #fee411 11.93%,
        #fedb16 15.61%,
        #fec125 21.74%,
        #fe983d 29.56%,
        #fe5f5e 38.66%,
        #fe2181 47.46%,
        #9000dc 82.98%
    );
    border: 0;
}

.bars-footer .social-links a.instagram .icon-hover {
    display: none;
}

.bars-footer .social-links a.instagram:hover {
    background: linear-gradient(
        45deg,
        #fee411 11.93%,
        #fedb16 15.61%,
        #fec125 21.74%,
        #fe983d 29.56%,
        #fe5f5e 38.66%,
        #fe2181 47.46%,
        #9000dc 82.98%
    );
}

.bars-footer .social-links a.instagram:hover .icon-default {
    display: none;
}

.bars-footer .social-links a.instagram:hover .icon-hover {
    display: block;
}

.bars-footer .social-links a.youtube:hover {
    background-color: #ff0033;
    border-color: #ff0033;
}

.bars-footer .social-links a:hover i,
.bars-footer .social-links a:hover svg {
    color: #fff;
    fill: #fff;
}

.bars-footer h4 {
    font-family: "Poppins Bold";
    font-size: 20px;
    line-height: normal;
    color: #333;
}

.bars-footer .footer-links ul li a,
.bars-footer .footer-contact p,
.bars-footer .footer-links ul li p {
    font-family: "Poppins Regular";
    font-size: 14px;
    line-height: 30px;
    color: #333;
}

.bars-footer .footer-links ul li:not(:last-child) {
    margin-bottom: 10px;
}

.bars-footer .copyright {
    border-top: 1px solid #d1d1d1;
    padding-top: 26px;
}

.bars-footer .copyright .copyright_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 52px;
}

.bars-footer .copyright h5,
.bars-footer .copyright button {
    font-family: "Poppins Regular";
    font-size: 14px;
    line-height: normal;
    color: #333;
    margin: 0;
}

.bars-footer .copyright h5 a {
    color: #333;
    text-decoration: underline;
}

/* HERO BACKGROUND - HOME */
.home-page .hero-section.slide {
    background-image: url("./images/box-shadow-hero-home.svg");
    background-size: cover;
    border-radius: 27px;
    position: relative;
    width: 100%;
    height: 500px;
    /* background: linear-gradient(to right, #30516e 0%, #37a2c6 50%, #333333 100%); */
    margin-top: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 27px;
    overflow: visible;
    background-color: #333;
}

.hero-section .left-box-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(2deg, #37a2c6, #333333, #333333, #37a2c6);
    background-size: 800% 800%;

    -webkit-animation: LeftBoxShadow 15s ease infinite;
    -moz-animation: LeftBoxShadow 15s ease infinite;
    animation: LeftBoxShadow 15s ease infinite;
    opacity: 0.5;
    border-radius: 25px;
}

@-webkit-keyframes LeftBoxShadow {
    0% {
        background-position: 0% 7%;
    }
    50% {
        background-position: 100% 94%;
    }
    100% {
        background-position: 0% 7%;
    }
}
@-moz-keyframes LeftBoxShadow {
    0% {
        background-position: 0% 7%;
    }
    50% {
        background-position: 100% 94%;
    }
    100% {
        background-position: 0% 7%;
    }
}
@keyframes LeftBoxShadow {
    0% {
        background-position: 0% 7%;
    }
    50% {
        background-position: 100% 94%;
    }
    100% {
        background-position: 0% 7%;
    }
}

.hero-section .right-box-shadow {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(59deg, #37a2c6, #333333, #37a2c6);
    background-size: 600% 600%;

    -webkit-animation: RightBoxShadow 15s ease infinite;
    -moz-animation: RightBoxShadow 15s ease infinite;
    animation: RightBoxShadow 15s ease infinite;
    opacity: 0.5;
    border-radius: 25px;
}

@-webkit-keyframes RightBoxShadow {
    0% {
        background-position: 0% 84%;
    }
    50% {
        background-position: 100% 17%;
    }
    100% {
        background-position: 0% 84%;
    }
}
@-moz-keyframes RightBoxShadow {
    0% {
        background-position: 0% 84%;
    }
    50% {
        background-position: 100% 17%;
    }
    100% {
        background-position: 0% 84%;
    }
}
@keyframes RightBoxShadow {
    0% {
        background-position: 0% 84%;
    }
    50% {
        background-position: 100% 17%;
    }
    100% {
        background-position: 0% 84%;
    }
}

/* Content wrapper */
.hero-content {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.18, 1);
}

.hero-section.animated-in .hero-content {
    opacity: 1;
}
/* ANIMATION HERO SECTION */

.hero-section .smartbox-img {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    transition: transform 0.4s ease;
}

.bottom-white-div {
    background-color: #fff;
    width: 100%;
    height: 50px;
    position: relative;
    z-index: 2;
}

.hero-section .smartbox-img:hover {
    transform: translateY(-20px);
}

.hero-section .smartbox-img img {
    height: 578px;
    width: auto;

    max-width: 100%;
    margin: 0 auto;
}

.hero-section .users-box {
    box-shadow: -10px 10px 30px 0px #00000040;
    background-color: #fff;
}

.hero-section .users-box {
    position: absolute;
    top: -37px;
    left: 70px;
}

.hero-section .coverage-box {
    position: absolute;
    left: 90px;
    z-index: 2;
}

.hero-section .coverage-box div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
}

.hero-section .coverage-box div span:first-child {
    color: #333;
}

.hero-section .coverage-box div span:last-child {
    opacity: 0;
    max-height: 0;
    transition: opacity 0.4s ease, max-height 0.4s ease;
    margin-top: 0;
}

.hero-section .coverage-box:hover div span:last-child {
    opacity: 1;
    max-height: 16px;
    margin-top: 2px;
}

.hero-section .dashboard-control {
    position: absolute;
    right: 42px;
    top: 155px;
    z-index: 2;
}

.hero-section .dashboard-control:hover {
    /* transform: translate(2%, -2%) scale(1.04); */
    /* padding: 33px 12px 35px 12px; */
    padding: 10px;
}

.hero-section .dashboard-control div span:last-child {
    opacity: 0;
    max-height: 0;
    transition: opacity 0.4s ease, max-height 0.4s ease;
    margin-top: 0;
}

.hero-section .dashboard-control:hover div span:last-child {
    opacity: 1;
    max-height: 20px;
}

.hero-section .slider-counter {
    position: absolute;
    bottom: 22px;
    left: 27px;
    z-index: 2;
}

.hero-section .slider-counter span {
    font-family: "Poppins Semibold";
    font-size: 32px;
    color: #fff;
}

.hero-section .slider-counter span.small-counter {
    font-family: "Poppins Regular";
    font-size: 14px;
    color: #e5e5e5;
}

.hero-section .slider-arrows {
    position: absolute;
    bottom: 22px;
    right: 31px;
    z-index: 2;
}

.hero-section .slider-arrows button i {
    color: #fff;
}

.hero-section .slider-arrows button span {
    font-family: "Poppins Regular";
    font-size: 16px;
    background: linear-gradient(
        90deg,
        #15537e 0%,
        #00b4e5 139.15%,
        #ffbb00 278.3%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.hero-section .slider-arrows {
    display: flex;
    gap: 10px;
}

.hero-section .slider-arrows button {
    width: 41px;
    height: 41px;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    gap: 0;
}

.hero-section .slider-arrows button:hover {
    width: 145px;
    gap: 10px;
    background-color: #fff;
}

.hero-section .slider-arrows button img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.hero-section .slider-arrows button span {
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.3s ease 0.1s,
        max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    color: #fff;
}

.hero-section .slider-arrows button:hover span {
    opacity: 1;
    max-width: 150px;
}

.hero-section .slider-arrows button.prev:hover img {
    content: url("./images/home-hover-left-icon.svg");
    width: 23px;
}

.hero-section .slider-arrows button.next:hover img {
    content: url("./images/home-hover-right-icon.svg");
    width: 23px;
}

.hero-section .product-mobile {
    display: none;
}

/* HERO BACKGROUND - HOME */

/* BOX PAGE */
.general-page.home-page .hero-section.slide {
    /* height: 350px; */
    margin-top: 42px;

    height: auto;
    min-height: 0;
    margin-top: 60px;
    padding: 50px 0;
    align-items: flex-start;
}

.box-page.home-page .hero-section.slide {
    padding: 95px 50px;
}

.general-page .hero-section .hero_content {
    position: absolute;
    /* padding: 0 25px; */
    position: relative;
    width: 100%;
    top: auto;
    left: auto;
    transform: none;
}

.general-page .hero-section .hero_content .title {
    font-family: "Poppins Semibold";
    font-size: 55px;
    line-height: 75px;
    margin-bottom: 13px;
    color: #fff;
    text-align: center;
}

.general-page .hero-section .hero_content .title span {
    color: #00b4e5;
}

.general-page .hero-section .hero_content p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #f5f5f5;
    margin: 0 auto;
    max-width: 885px;
    text-align: center;
}

.general-page .section-two {
    margin-top: 34px;
}

.general-page.home-page .section-two .infit-scroll-wrapper p {
    margin-top: 0;
    position: initial;
}

.box-page .section-three .top-part {
    margin-bottom: 135px;
}

.box-page .section-three .top-part p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    margin: 0;
}

/* product section */
.product-section {
    /* overflow: hidden auto; */
    overflow: hidden;
    position: relative;
}

.product-section-mobile {
    display: none;
}

.product-wrapper {
    position: relative;
    /* display: flex;
  gap: 20px; */
}

.product-flex-wrapper {
    display: flex;
    gap: 20px;
}

.product-hover-part {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.product-hover-part.show {
    opacity: 1;
    visibility: visible;
}

.product-wrapper {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.product-wrapper.hide {
    opacity: 0;
    visibility: hidden;
}

.product-image-center {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.product-flex-wrapper > div {
    flex: 1;
}
/* .product-wrapper > div {
  flex: 1;
} */

.product-list-left {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: end;
}

.product-list-right {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

/* Animated Text Top Left */
.text-top-left {
    position: absolute;
    top: 50px;
    left: -100px;
    font-size: 150px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.05);
    /* animation: moveRight 3s ease-in-out infinite; */
    white-space: nowrap;
    transition: all 0.5s ease;
}

@keyframes moveRight {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
}

/* Animated Text Bottom Right */
.text-bottom-right {
    position: absolute;
    bottom: 50px;
    right: -100px;
    font-size: 150px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.05);
    animation: moveLeft 3s ease-in-out infinite;
    white-space: nowrap;
    transition: all 0.5s ease;
}

@keyframes moveLeft {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-50px);
    }
}

/* Product Image Center */
.product-image-center {
    position: relative;
    z-index: 10;
}

/* .product-image-center img.main-product-img {
  max-width: 500px;
  height: auto;
  transition: all 0.5s ease;
} */

.product-image-center .hover-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.9);
    z-index: 20;
}

.product-image-center .hover-content .hover-image {
    max-width: 300px;
    height: auto;
}

.product-image-center .hover-content .hover-text {
    text-align: center;
    color: #000;
}

.product-image-center .hover-content .hover-text-top {
    font-size: 24px;
    color: #00aeef;
    margin: 0;
}

.product-image-center .hover-content .hover-text-bottom {
    font-size: 16px;
    margin: 0;
}

/* Product Lists */

.product-list-left ul,
.product-list-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-list-left li,
.product-list-right li {
    padding: 12px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    padding: 0;
    color: #e5e5e5;
}

.product-list-left li.active,
.product-list-right li.active {
    color: #333;
}

.product-list-left li.active .bullet,
.product-list-right li.active .bullet {
    color: #ffa500;
}

.product-list-left li .text,
.product-list-right li .text {
    font-family: "Poppins Regular";
    font-size: 20px;
    color: #e5e5e5;
    /* white-space: nowrap; */
}

.product-list-left li .text:hover,
.product-list-right li .text:hover {
    color: #333;
    font-weight: 600;
}

.product-list-left li.active .text,
.product-list-right li.active .text {
    font-family: "Poppins Semibold";
    color: #333;
}

.product-list-left li .count,
.product-list-right li .count {
    font-family: "Poppins Regular";
    color: #ffa500;
}

.product-list-left li:hover,
.product-list-right li:hover {
    color: #666;
}

/* PRODUCT HOVER */
.box-page .product_wrapper {
    width: 100vw;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0 20px; */
}

.box-page .center-content {
    display: flex;
    justify-content: center;
    gap: 20px;
    z-index: 2;
}

.box-page .center-image {
    /* width: 450px; */
    max-width: 90%;
    height: auto;
    z-index: 2;
}

.box-page .side-text {
    width: 30%;
}

.box-page .left-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 200px;
}

.box-page .left-text h5 {
    font-family: "Poppins Semibold";
    font-size: 24px;
    color: #333;
}

.box-page .left-text h6 {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #333;
    margin-bottom: 25px;
}

.box-page .left-text h6 span {
    color: #00b4e5;
}

.box-page .left-text p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #333;
    margin: 0;
}

.box-page .left-text p span {
    color: #00b4e5;
}

.box-page .right-text {
    text-align: left;
}

.box-page .scrolling-text-wrapper {
    position: absolute;
    overflow: hidden;
    z-index: 1;
}

.box-page #textWrapperLeft {
    /* top: 10%; */
    top: 15% !important;
    left: 0;
    width: 50%;
    height: 100px;
}

.box-page .product-wrapper.obd-cable #textWrapperLeft {
    width: 46%;
}

.box-page .product-wrapper.usb-wall-charger #textWrapperLeft {
    width: 47%;
}

.box-page .product-wrapper.mini-usb-cable #textWrapperLeft {
    width: 36%;
}

.box-page .product-wrapper.smartchip-adapter #textWrapperLeft {
    width: 44%;
}

.box-page .product-wrapper.unlocking-cable #textWrapperBottomRight {
    width: 40%;
}

.box-page .product-wrapper.obd-adapters #textWrapperLeft,
.box-page .product-wrapper.type-c-emulator #textWrapperBottomRight {
    width: 46%;
}

.box-page .product-wrapper.obd-adapters #textWrapperBottomRight {
    width: 43%;
}

.box-page .product-wrapper.smartchip-adapter #textWrapperLeft {
    top: 18% !important;
}

.box-page #textWrapperBottomRight {
    /* bottom: 28%; */
    bottom: 21%;
    direction: ltr;
    right: 0;
    width: 50%;
    height: 100px;
}

.box-page .product-hover-part #textWrapperBottomRight {
    bottom: 17% !important;
}

.box-page .product-wrapper #textWrapperBottomRight {
    bottom: 16%;
}

.box-page .animated__text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    font-family: "Poppins Bold";
    color: #f5f5f5;
    white-space: nowrap;
    font-size: 120px;
    align-items: center;
}

/* animations */
.box-page #textLeft {
    animation: scrollRight 100s linear infinite;
}

.box-page #textBottomRight {
    left: 0;
    right: auto;
    animation: scrollLeftFromRight 100s linear infinite;
}

.box-page .product_wrapper .right-text h4 {
    font-family: "Poppins Semibold";
    font-size: 50px;
    line-height: 70px;
    color: #333;
}

.box-page .product_wrapper .right-text h4 span {
    color: #00b4e5;
}

/* infinite scroll keyframes */
@keyframes scrollLeftFromRight {
    from {
        transform: translateX(0) translateY(-50%);
    }

    to {
        transform: translateX(-50%) translateY(-50%);
    }
}

@keyframes scrollRight {
    from {
        transform: translateX(0) translateY(-50%);
    }

    to {
        transform: translateX(-50%) translateY(-50%);
    }
}

@keyframes scrollLeftBottom {
    from {
        transform: translateX(0) translateY(-50%);
    }

    to {
        transform: translateX(50%) translateY(-50%);
    }
}

/* mobile product section */
.product-tab-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    margin-bottom: 40px;
}

.product-tab-pills::-webkit-scrollbar {
    display: none;
}

.product-tab-pills .nav-item {
    flex: 0 0 auto;
}

.home-page .section-six .tab-content {
    overflow: visible;
    position: relative;
    padding-bottom: 40px;
}

.product-section-mobile .tab-content .tab-pane {
    text-align: center;
}

.product-section-mobile .nav-pills .nav-link.active,
.product-section-mobile .nav-pills .show > .nav-link,
.product-section-mobile .product-tab-pills .nav-link {
    background-color: transparent;
    border: 1px solid #e5e5e5;
}

.product-section-mobile .nav-pills .nav-link.active {
    background-color: #00b4e5;
    color: #fff;
    font-weight: 600;
}

.product-tab-pills .nav-link {
    white-space: nowrap;
    border-radius: 10px;
    font-family: "Poppins Light";
    font-size: 16px;
    color: #aaaaaa;
    padding: 10px 44px;
}

.home-page .section-six .default-img {
    display: block;
}

.home-page .section-six .large-img {
    display: none;
}

/* mobile product section */

/* product section */

/* BOX PAGE */

/* Supportted Vehicles */
.supported-vehicles-page.home-page .hero-section.slide {
    padding: 67px 50px;
    min-height: 350px;
}

.hero_section_form {
    display: flex;
    gap: 10px;
    margin-top: 27px;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 50px;
}

.hero_select {
    background-color: #f5f5f5;
    border-radius: 5px;
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #aaa;
    position: relative;
    cursor: pointer;
    height: 50px;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

.hero_select.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.hero_select .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px;
    min-width: max-content;

    width: 100%;
    height: 100%;
}

.hero_select.open .wrapper {
    border-bottom: 1px solid #e5e5e5;
}

.hero_select .arrow {
    transition: transform 0.3s ease;
}

.hero_select.open .arrow {
    transform: rotate(180deg);
}

.hero_select .hero_select_menu {
    padding: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    list-style: none;
    margin: 0;
    display: none;
    z-index: 10;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hero_select.open .hero_select_menu {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}

.hero_select.open .hero_select_menu::-webkit-scrollbar {
    width: 6px;
}

.hero_select.open .hero_select_menu::-webkit-scrollbar-track {
    background: transparent;
}

.hero_select.open .hero_select_menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.hero_select.open .hero_select_menu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

.hero_select .hero_select_menu li {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    line-height: 100%;
    margin-bottom: 11px;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.hero_select .hero_select_menu li:hover {
    color: #00b4e5;
    font-weight: 500;
}

.hero_select .hero_select_menu li.sub_title {
    font-family: "Poppins Semibold";
    font-size: 14px;
    color: #333;
    cursor: default;
}

.hero_section_form .check-now-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background-color: #aaa;
    border-radius: 10px;
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #fff;
    border: none;
    padding: 13px 20px;
    transition: all 0.3s ease-out;
}

.hero_section_form .check-now-btn:hover:not(:disabled),
.hero_section_form .check-now-btn.active {
    background-color: #00b4e5;
}

.hero_section_form > div,
.hero_section_form .check-now-btn {
    min-width: 167px;
}

.hero_section_form .hero_select .wrapper span.selected-value {
    font-weight: 600;
    color: #333;
}

.supported-car-modal .modal-dialog {
    max-width: 660px;
}

.supported-car-modal .modal-content {
    border-radius: 20px;
}

.supported-car-modal .modal-body {
    text-align: center;
    padding: 50px;
}

.supported-car-modal h4.title {
    font-family: "Poppins Semibold";
    font-size: 22px;
    color: #333;
    margin: 20px 0;
}

.supported-car-modal button {
    border-radius: 10px;
    background-color: #00b4e5;
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #fff;
    border: none;
    width: 100%;
    height: 50px;
}

.hero_select.disabled {
    pointer-events: none;
    color: #e5e5e5;
}

.hero_section_form .check-now:disabled {
    cursor: none;
    pointer-events: none;
}

.supported-vehicles-page .section-three {
    margin-top: 140px;
}

.supported-vehicles-page .left h4 {
    font-family: "Poppins Bold";
    font-size: 45px;
    line-height: 60px;
    color: #333;
    margin-bottom: 26px;
    margin-top: 13px;
}

.supported-vehicles-page .left h4 span {
    color: #00b4e5;
}

.supported-vehicles-page .left p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    margin-bottom: 5px;
    max-width: 673px;
}

.supported-vehicles-page .left p a {
    color: #00b4e5;
}

.supported-vehicles-page .left h5 {
    font-family: "Poppins Bold";
    font-size: 24px;
    color: #333;
    margin-bottom: 5px;
    margin-top: 10px;
    line-height: 60px;
}

.supported-vehicles-page .left ul {
    margin-top: 12px;
}

.supported-vehicles-page .left ul li {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #333;
    margin-bottom: 1.3rem;
}

.supported-vehicles-page .left .images {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.supported-vehicles-page .left span.login_text {
    font-family: "Poppins Light";
    font-size: 14px;
    line-height: 40px;
    color: #aaa;
}

.supported-vehicles-page .section-three .right-image {
    padding-left: 60px;
}

.supported-vehicles-page .top-sorted-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 60px;
}

.supported-vehicles-page .top-sorted-wrapper .search-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f5f5;
    width: 100%;
    border-radius: 10px;
    padding: 10px 20px;
    max-height: 41px;
}

.supported-vehicles-page .top-sorted-wrapper .search-wrapper input {
    border: none;
    background-color: #f5f5f5;
    padding: 0;
}

.supported-vehicles-page
    .top-sorted-wrapper
    .search-wrapper
    input::placeholder {
    font-family: "Poppins Regular";
    color: #aaa;
}

.supported-vehicles-page
    .top-sorted-wrapper
    .search-wrapper
    input::placeholder {
    font-family: "Poppins Regular";
    color: #aaa;
}

.supported-vehicles-page .top-sorted-wrapper .search-wrapper input:focus {
    box-shadow: none;
}

.supported-vehicles-page .top-sorted-wrapper .hero_select {
    font-size: 14px;
    height: 41px;
}

.supported-vehicles-page .top-sorted-wrapper .hero_select.entries_select {
    min-width: 162px;
}

.supported-vehicles-page .top-sorted-wrapper .hero_select .wrapper {
    padding: 10px 20px;
    gap: 4px;
}

.supported-vehicles-page
    .top-sorted-wrapper
    .hero_select
    .wrapper
    span:nth-child(2) {
    font-weight: 600;
}

.supported-vehicles-page .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.supported-vehicles-page .custom-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 16px;
    margin-top: 20px;
}

.supported-vehicles-page .custom-table th {
    font-family: "Poppins Regular";
    font-weight: 400;
    font-size: 13px;
    line-height: normal;
    color: #707070;
    padding-bottom: 10px;
}

.supported-vehicles-page .custom-table td {
    font-family: "Poppins Regular";
    font-size: 16px;
    font-weight: 400;
    color: #333;
    padding: 10px 0;
}

.supported-vehicles-page .info-btn {
    padding: 0;
}

.supported-vehicles-page .custom-table th:nth-child(1),
.supported-vehicles-page .custom-table td:nth-child(1) {
    width: 24%;
}

.supported-vehicles-page .custom-table th,
.supported-vehicles-page .custom-table td {
    width: 15%;
}

.supported-vehicles-page .table-custom-wrapper-flex {
    font-weight: 600;
    align-items: center;
}

.supported-vehicles-page .custom-table tr {
    border-bottom: 1px solid #e5e5e5;
}

.supported-vehicles-page .pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
}

.supported-vehicles-page .pagination-wrapper span {
    font-family: "Poppins Regular";
    font-size: 13px;
    color: #707070;
    white-space: nowrap;
}

.supported-vehicles-page .pagination-wrapper .right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.supported-vehicles-page .pagination-wrapper button {
    font-family: "Poppins Regular";
    font-size: 14px;
    color: #aaa;
    border: none;
    background-color: transparent;
}

.supported-vehicles-page .pagination-wrapper .previous-btn,
.supported-vehicles-page .pagination-wrapper .next-btn {
    background-color: #f5f5f5;
    padding: 10px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 140px;
}

.supported-vehicles-page .pagination-wrapper button.active {
    background-color: #f5f5f5;
    padding: 10px 20px;
    border-radius: 10px;
}

/* Supportted Vehicles */

/* Distributors Page */
.general-page.distributors-page .hero-section.slide {
    padding: 107px 50px;
}

.distributors-page .section-three {
    margin-top: 130px;
}

.distributors-page .section-three .right h3 {
    font-family: "Poppins Regular";
    color: #e5e5e5;
}

.distributors-page .section-three p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    margin: 0;
}

.distributors-page .mobile-section {
    display: none;
}

.distributors-page .section-three form {
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 50px;
    margin-top: 50px;
}

.distributors-page .section-three form .form-group {
    margin-bottom: 25px;
}

.distributors-page .section-three form h4 {
    font-family: "Poppins Semibold";
    font-size: 32px;
    margin-bottom: 10px;
    color: #333;
}

.distributors-page .section-three form p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    margin-bottom: 25px;
}

.distributors-page .section-three form input,
.distributors-page .section-three form textarea,
.contact-page .section-two form input,
.contact-page .section-two form textarea {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #e5e5e5;
    padding-left: 0;
    border-radius: 0;
    padding-bottom: 15px;
}

.distributors-page .section-three form input[type="tel"] {
    padding-left: 50px;
}

.distributors-page .section-three form input::placeholder,
.distributors-page .section-three form textarea::placeholder,
.contact-page .section-two form input::placeholder,
.contact-page .section-two form textarea::placeholder {
    font-family: "Poppins Regular";
    color: #aaa;
}

.distributors-page .section-three form textarea {
    margin-top: 5px;
    min-height: 139px;
}

.distributors-page .section-three form label {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #aaa;
    margin-bottom: 15px;
}

.distributors-page .section-three .key_programming_wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.distributors-page .section-three .key_programming_wrapper button,
.contact-page .section-two form button,
.distributors-page .annual_revenue_wrapper button {
    background-color: #e5e5e5;
    border-radius: 5px;
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #aaa;
    border: none;
    width: 100%;
    min-height: 38px;
    transition: all 0.3s ease-out;
}

.distributors-page .section-three .key_programming_wrapper button.active,
.distributors-page .annual_revenue_wrapper button.active {
    background-color: #333;
    color: #fff;
}

.distributors-page .section-three .hero_select {
    background-color: #e5e5e5;
    max-height: 38px;
}

.distributors-page .section-three .hero_select .wrapper {
    padding: 7px 20px;
}

.distributors-page .section-three .send-message-btn {
    background-color: #e5e5e5;
    margin-top: 25px;
    border-radius: 5px;
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #aaa;
    border: none;
    width: 100%;
    padding: 10px;
    transition: all 0.3s ease-out;
}

.distributors-page .section-three .send-message-btn:hover,
.distributors-page .section-three .send-message-btn.active {
    background-color: #00b4e5;
    color: #fff;
}

.distributors-tabs.nav-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.distributors-tabs.nav-pills .nav-link.active,
.distributors-tabs.nav-pills .show > .nav-link {
    background-color: transparent;
}

.distributors-tabs.nav-pills .nav-link {
    padding: 0;
}

.distributors-tabs.nav-pills .nav-link h3 {
    font-family: "Poppins Regular";
    color: #e5e5e5;
    font-size: 45px;
    line-height: 60px;
    text-align: left;
    margin-bottom: 20px;
}

.distributors-tabs.nav-pills .nav-link h3 span {
    color: #e5e5e5;
    text-transform: capitalize;
}

.distributors-tabs.nav-pills .nav-link.active h3 {
    font-family: "Poppins Bold";
    color: #333;
}

.distributors-tabs.nav-pills .nav-link.active h3 span {
    color: #00b4e5;
}

.distributors-page .annual_revenue_wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.distributors-page .annual_revenue_wrapper button {
    max-width: 131px;
}

/* Distributors Page */

/* FAQ PAGE */
.general-page.faq-page .hero-section.slide {
    padding: 79px 50px;
}

.general-page.faq-page .hero-section.slide.search-padding-active {
    padding: 50px !important;
    max-height: 100%;
}

.faq-page .hero-section .hero_content.search-active .title,
.faq-page .hero-section .hero_content.search-active p.desc {
    display: none;
}

.faq-page .hero-section form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.faq-page .hero-section .hero_content.search-active form {
    max-width: 100%;
}

.faq-page .hero-section form input {
    background-color: #f5f5f5;
    border-radius: 10px;
    min-height: 50px;
    padding: 13px 20px;
}

.faq-page .hero-section form input:focus {
    border-color: #fff;
}

.faq-page .hero-section form input::placeholder {
    font-family: "Poppins Regular";
    color: #aaa;
}

.faq-page .hero-section form button {
    background: transparent;
    border-radius: 10px;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #fff;
    border: none;
    min-width: 186px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Add gradient as a pseudo-element */
.faq-page .hero-section form button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        #15537e 0%,
        #00b4e5 133.97%,
        #ffbb00 267.93%
    );
    opacity: 0;
    transition: opacity 0.5s ease-out;
    border-radius: 10px;
    z-index: -1;
    border: 0;
}

.faq-page .hero-section form button:disabled {
    background: #aaa;
    cursor: not-allowed;
}

.faq-page .hero-section form button:not(:disabled)::before {
    opacity: 1;
}

.faq-page .hero-section form button * {
    position: relative;
    z-index: 1;
}

.faq-page .hero-section form button:disabled {
    cursor: not-allowed;
}

.faq-page .hero-section .search_content .top__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.faq-page .hero-section .search_content .top__head .close-icon {
    width: 18px;
}

.faq-page .hero-section .search_content .top__head button {
    background: transparent;
    border: none;
}

.faq-page .hero-section .search_content .box__wrapp {
    background: #ffffff33;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 30px;
    max-width: 1035px;
    margin-left: auto;
}

.faq-page .hero-section .search_content .box__wrapp p {
    width: 100%;
    max-width: 100%;
}

.faq-page .hero-section .search_content p {
    font-family: "Poppins Regular";
    font-size: 16px;
    margin: 0;
    color: #fff;
    max-width: 1005px;
}

.faq-page .hero-section .search_content .icons {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0 116px 0;
    margin: 20px 0 clamp(20px, 6vh, 116px) 0;
}

.faq-page .hero-section .search_content .icons button {
    background-color: transparent;
    border: none;
}

.hero_content .search_content {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease, max-height 0.4s ease;
    max-height: 0;
    overflow: hidden;
}

.hero_content.search-active .search_content {
    display: block;
    opacity: 1;
    max-height: 1000px; /* enough to fit content */
}

/* Hide questions block smoothly */
.hero_content.search-active .questions-block {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.faq-page .faq_section .wrapper {
    margin-top: 50px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 80px;
}

.faq-page .faq_section .wrapper .title {
    font-family: "Poppins Bold";
    font-size: 45px;
    line-height: 60px;
    color: #333;
    margin: 99px 0 46px 0;
}

.faq-page .faq_section .wrapper .item {
    border-radius: 5px;
    background: rgba(229, 229, 229, 0.5);
    padding: 20px 40px;
}

.faq-page .faq_section .wrapper .item:not(:last-child) {
    margin-bottom: 15px;
}

.faq-page .faq_section .item .faq-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 3px;
}

.faq-page .faq_section .wrapper .item h4 {
    font-family: "Poppins Medium";
    font-size: 20px;
    line-height: normal;
    color: #333;
    margin: 0;
}

.faq-page .faq_section .wrapper .item .item_content {
    display: none;
    overflow: hidden;
    margin-top: 10px;
}

.faq-page .faq_section .wrapper .item.active .item_content {
    height: auto;
}

.faq-page .faq_section .wrapper .item .arrow {
    transition: transform 0.3s ease;
    width: 24px;
}

.faq-page .faq_section .wrapper .item.active .arrow {
    transform: rotate(180deg);
}

.info-msg-credit {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Poppins Regular";
    font-size: 14px;
    color: #aaa;
    cursor: default;
}

.faq-page .faq_section .wrapper .item .item_content h6,
.faq-page .faq_section .wrapper .item .item_content p,
.faq-page .faq_section .wrapper .item .item_content ul li,
.faq-page .faq_section .wrapper .item .item_content a {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    margin-bottom: 0;
}

.faq-page .faq_section .wrapper .item .item_content h6 {
    font-family: "Poppins Semibold";
    color: #333;
}

.faq-page .faq_section .wrapper .item .item_content a {
    color: #00b4e5;
    text-decoration: underline;
}

.faq-page .faq_section .wrapper .item .item_content ul {
    padding-left: 1.5rem;
}

.faq-page .faq_section .wrapper .item .item_content ul li {
    list-style-type: disc;
}

.faq-page .faq_section .wrapper .item .item_content ul.decimal-number li {
    list-style-type: decimal;
}

/* FAQ PAGE */

/* CONTACT PAGE */
.general-page.contact-page .hero-section.slide {
    padding: 107px 50px;
}

.contact-page .section-two {
    margin-top: 42px;
}

.contact-page .section-two ul {
    margin: 20px 0;
}

.contact-page .section-two ul li {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    max-width: 90%;
}

.contact-page .section-two ul li:not(:last-child) {
    margin-bottom: 20px;
}

.contact-page .section-two ul li a {
    color: #00b4e5;
}

.contact-page .section-two .bottom {
    display: flex;
    align-items: center;
    gap: 30px;
}

.contact-page .section-two .bottom h5 {
    font-family: "Poppins Semibold";
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

.contact-page .section-two .bottom a {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    transition: all 0.3s ease-out;
}

.contact-page .section-two .bottom a:hover {
    color: #00b4e5;
}

.contact-page .section-two form {
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 50px;
    margin-left: 60px;
    min-height: 500px;
    position: relative;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    transition: all 0.3s ease;
}

.contact-page .section-two .form-fields-wrapper {
    width: 100%;
    transition: opacity 0.5s ease, height 0.5s ease;
}

.contact-page .section-two .form-fields-wrapper.hidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.contact-page .section-two .success-message-centered {
    font-family: "Poppins Medium";
    text-align: center;
    font-size: 18px;
    max-width: 80%;
    background: linear-gradient(90deg, #15537e 0%, #00b4e5 50%, #ffbb00 190%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    transition: opacity 0.6s ease;
}

.contact-page .section-two .alert.alert-success {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.contact-page .section-two .success-contact-alert {
    transition: opacity 0.6s ease;
}

.contact-page .section-two form h5 {
    font-family: "Poppins Semibold";
    font-size: 32px;
    color: #333;
    margin-bottom: 10px;
}

.contact-page .section-two form p {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    margin-bottom: 15px;
}

.floating-label {
    position: relative;
    margin-bottom: 20px;
}

.floating-label-login {
    position: relative;
    margin-bottom: 0;
    width: 100%;
}

.floating-label input,
.floating-label-login input {
    padding: 16px 12px 8px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.floating-label textarea {
    padding: 24px 12px 12px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    resize: vertical;
}

.floating-label label,
.floating-label-login label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    padding: 0;
    color: #aaa;
    font-family: "Poppins Regular";
    font-weight: 400;
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* When input is focused or has content */
.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:focus + label,
.floating-label textarea:not(:placeholder-shown) + label,
.floating-label-login input:focus + label,
.floating-label-login input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 12px;
}

.floating-label-login input:focus + label,
.floating-label-login input:not(:placeholder-shown) + label {
    top: -8px;
}

.floating-label textarea + label {
    top: 20px;
    transform: none;
}

.floating-label input:focus {
    outline: none;
    border-color: #007bff;
}

.contact-page .section-two form textarea {
    min-height: 139px;
}

.contact-page .section-two form button {
    margin-top: 25px;
}

.contact-page .section-two form button.active {
    background-color: #00b4e5;
    color: #fff;
}

.contact-page .section-two form .form-group {
    margin-bottom: 20px;
}

.contact-page .section-two .contact-image {
    margin: 60px 0;
}

.contact-page .section-three .left {
    padding-right: 75px;
}

.contact-page .section-three p,
.contact-page .section-three ul li {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
    margin-bottom: 18px;
}

.contact-page .section-three ul li:not(:last-child) {
    margin-bottom: 15px;
}

.contact-page .section-three ul {
    padding-left: 2rem;
}

.contact-page .section-three ul li {
    list-style-type: disc;
}

.contact-page .section-three h6 {
    font-family: "Poppins Semibold";
    font-size: 40px;
    color: #333;
}

.contact-page .section-three h6 span {
    transition: color 0.2s ease;
}

.contact-page .section-three h6 .black-span {
    color: #000;
}

.contact-page .section-three h6 .light-span {
    color: #e5e5e5;
}

.contact-page .section-three h6 .span_a {
    color: #aaa;
}

.contact-page .section-three.active .black-span {
    color: #333;
}

.contact-page .section-three.active .span_a {
    color: #333;
}

.contact-page .section-three.active .light-span {
    color: #333;
}

.contact-image-wrapper {
    border-radius: 20px;
}

.contact-image {
    width: 100%;
    height: auto;
    transform-origin: center center;
    animation: zoomInOut 8s ease-in-out infinite;
    border-radius: 20px;
}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* CONTACT PAGE */

/* Login Modal */
.login-modal .modal-dialog {
    max-width: 1105px;
}

.login-modal .left-image {
    position: relative;
    background-image: url("./images/box-shadow-hero-home.svg");
    background-size: cover;
    flex: 1;
    max-width: 100%;
    max-height: 100%;
    padding: 0 22px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    /* background: linear-gradient(90deg, #30516e 0%, #37a2c6 50%, #333333 100%); */
}

.login-modal .left-image .right-box-shadow {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(59deg, #37a2c6, #333333, #37a2c6);
    background-size: 600% 600%;

    -webkit-animation: RightBoxShadow 15s ease infinite;
    -moz-animation: RightBoxShadow 15s ease infinite;
    animation: RightBoxShadow 15s ease infinite;
    opacity: 0.5;
    border-radius: 25px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.login-modal .left-image img {
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.login-modal form {
    padding: 67px 105px;
    padding: clamp(30px, 6vh, 67px) clamp(30px, 8vw, 105px);
    border-radius: 0 30px 30px 0;
    box-shadow: 0px 40px 87px 0px #0000001a;
    display: flex;
    width: 60%;
    flex-direction: column;
    text-align: center;
}

.login-modal form h5 {
    font-family: "Poppins Semibold";
    font-size: 24px;
    line-height: 30px;
    color: #0c2640;
    margin-bottom: 10px;
}

.login-modal form h5 span {
    color: #00b4e5;
}

.login-modal form p {
    font-family: "Poppins Regular";
    font-size: 14px;
    color: #aaa;
    max-width: 422px;
    margin: 0 auto 20px auto;
}

.login-modal form .input-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid #e5e5e5;
    padding: 10px;
}

.login-modal form .input-wrapper img {
    margin-right: 5px;
    cursor: pointer;
}

.login-modal form .input-wrapper input {
    border: 0;
    padding: 0;
}

.login-modal form .input-wrapper input::placeholder {
    font-family: "Poppins Regular";
    color: #aaa;
}

.login-modal .forgot-password {
    margin-top: 25px;
    font-family: "Poppins Regular";
    font-size: 13px;
    color: #0c2640;
    text-align: right;
    width: max-content;
    margin-left: auto;
}

.login-modal .login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 5px;
    background-color: #00b4e5;
    font-family: "Poppins Medium";
    font-size: 16px;
    color: #fff;
    border: 0;
    height: 50px;
    margin-top: 8px;
}

.or-mox {
    text-transform: uppercase;
    color: #a1a1a1;
    position: relative;
    isolation: isolate;
    z-index: 2;
    margin-top: 25px;
}

.or-mox::before {
    content: "";
    position: absolute;
    bottom: 50%;
    z-index: -1;
    border-bottom: 1px solid #e3e3e3;
    display: block;
    left: 0;
    right: 0;
}

.or-mox::after {
    content: "OR";
    background: white;
    z-index: 2;
    padding-left: 20px;
    padding-right: 20px;
}

.register-btn-mox {
    color: #707070;
    font-family: "Poppins Medium";
    font-size: 14px;
    text-align: center;
    margin-top: 19px;
}

.register-btn-mox .active {
    font-family: "Poppins Semibold";
    color: #00b4e5;
    text-decoration: none;
    margin-left: 0.2rem;
    font-weight: 500;
}

.login-modal .subscribe-section {
    margin-top: 47px;
    padding: 20px 0;
    margin-top: clamp(8px, 4vh, 47px);
    padding: clamp(0px, 3vh, 10px) 0;
    padding-top: 0;
    padding-bottom: 0;
}

.login-modal .subscribe-section .wrapper .title {
    text-align: left;
    font-family: "Poppins Bold";
    font-size: 24px;
}

.login-modal .text-slider-container {
    font-size: 24px;
}

.login-modal .modal-content {
    border: 0;
    border-radius: 29px;
}

.login-modal .close-button {
    position: absolute;
    right: 39px;
    top: 35px;
    background: transparent;
    border: none;
    width: auto;
}

.login-modal .close-button img {
    width: 18px;
}

.login-modal .image-platform-mox small {
    font-family: "Poppins Medium";
    font-size: 14px;
    color: #707070 !important;
    margin-bottom: 3px;
}

/* Login Modal */

/* Car Modal */
.car-modal .modal-dialog {
    max-width: 660px;
}

.car-modal .modal-content {
    border-radius: 15px;
}

/* Car Modal */

/* PRICING  */

.pricing-page.home-page .hero-section.slide {
    padding: 107px 50px;
}

.pricing-page .top-sorted-wrapper .search-wrapper {
    min-height: 41px;
}

.pricing-page .hero_select {
    height: 41px;
}

.pricing-page .field-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #e63946;
    font-family: "Poppins Regular";
}

.pricing-page .floating-label label,
.pricing-page .floating-label-login label,
.distributors-page .floating-label label {
    top: 30%;
}

.pricing-page .form-item-wrapper .field-error + input,
.pricing-page .form-item-wrapper .field-error + select {
    border-color: #e63946;
}

.pricing-page .iti {
    width: 100%;
}

.pricing-page .iti input {
    padding-left: 50px !important;
}

.order-section-two {
    margin-top: 43px;
}

.order-wrapper table th {
    font-family: "Poppins Light";
    font-size: 13px;
    padding: 13px 20px 13px 0;
    font-weight: 400;
    white-space: nowrap;
    color: #707070;
    cursor: pointer;
}

.order-wrapper table tr {
    border-bottom: 1px solid #f0f0f0;
    transition: opacity 0.3s ease;
}

.order-wrapper table tr:hover {
    opacity: 1 !important;
}

.order-wrapper table td {
    padding: 4px 20px 4px 0;
}

.order-wrapper table td > img {
    margin-right: 10px;
    width: 11px;
}
.order-wrapper table td > div > img {
    width: 11px;
}

.order-wrapper > h5 {
    font-size: 24px;
    font-family: "Poppins SemiBold";
    color: #707070;
    margin-bottom: 13px;
}

.order-summary,
.discount-code {
    border-radius: 15px;
    background: #e5e5e5;
    padding: 31px 41px;
}

.discount-code {
    padding: 30px 36px;
}

.discount-code input {
    width: 100%;
    height: 59px;
    border-radius: 10px;
    padding: 16px 190px 16px 19px;
    background-color: #fff;
    border: 0px;
}

.discount-code input::placeholder {
    font-family: "Poppins Regular";
    color: #e5e5e5;
}

.discount-code input:focus-visible {
    outline: none;
}

.discount-code p {
    color: #aaa;
    font-family: "Poppins Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 25px 0 0 0;
}

.discount-code button {
    position: absolute;
    right: 7px;
    height: 47px;
    color: #fff;
    font-family: "Poppins Regular";
    border: 0px;
    background-color: #00b4e5;
    border-radius: 8px;
    margin: auto;
    top: 0;
    bottom: 0;
    cursor: pointer;
    padding: 0 40px;
    transition: all 0.3s ease-out;
}

.discount-code button:disabled {
    background-color: #aaa;
}

.discount-code input::placeholder {
    color: #aaa;
    font-family: "Poppins Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.64px;
}

.add-clover-img,
.remove-clover-quantity-img {
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.remove-clover-quantity-img:hover path {
    fill: #de1f2d;
}

.order-summary {
    margin-bottom: 24px;
}

.order-wrapper table td,
.order-wrapper table td button {
    font-family: "Poppins SemiBold";
    font-size: 16px;
    color: #333;
}

.order-wrapper .add-clover-quantity,
.order-wrapper .remove-clover-quantity {
    display: none;
}

.order-right-side .total {
    padding-bottom: 20px;
    border-top: 1px solid #aaa;
}

.order-summary > h4,
.discount-code h4 {
    color: #333;
    font-family: "Poppins SemiBold";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
}

.order-summary #products-list {
    margin-bottom: 23px;
}

.order-summary > h6 {
    color: #333;
    font-family: "Poppins SemiBold";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 11px;
}

.order-summary .total-amount > h6,
.order-summary .total-amount > span {
    color: #00b4e5;
    font-family: "Poppins SemiBold";
    font-size: 24px;
    font-style: normal;
    line-height: normal;
    margin: 0;
    letter-spacing: -0.96px;
}

.order-summary > ul > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-summary > ul > li:not(:last-child) {
    margin-bottom: 11px;
}

.order-summary > ul > li > span {
    color: #aaa;
    text-align: right;
    font-family: "Poppins Semibold";
    font-size: 16px;
    font-style: normal;
    line-height: normal;
}

.order-summary > ul > li > p {
    color: #333;
    font-family: "Poppins Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.order-right-side .total {
    padding: 16px 0 0 0;
}

.order-right-side .total > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-right-side .total > div:not(:last-child) {
    margin-bottom: 11px;
}

.order-right-side .total > div:not(.total-amount) > h6,
.order-right-side .total > div:not(.total-amount) > span {
    color: #aaa;
    font-family: "Poppins SemiBold";
    font-size: 16px;
    font-style: normal;
    line-height: normal;
    margin: 0;
}

.order-stepper-btns {
    margin-top: 24px;
}

.order-stepper-btns > button:first-child {
    position: relative;
    background: linear-gradient(
        90deg,
        #15537e 0%,
        #00b4e5 102.19%,
        #ffbb00 204.39%
    );
    border-radius: 15px;
    padding: 18px;
    height: 60px;
    color: #fff;
    text-align: center;
    font-family: "Poppins Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 12px;
    width: 100%;
    border: 0;
    overflow: hidden;
    z-index: 1;
}

.order-stepper-btns > button:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #15537e 0%, #00b4e5 50%, #ffbb00 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: -1;
    border-radius: 5px;
}

.order-stepper-btns > button:first-child:hover::before {
    opacity: 1;
}

.order-stepper-btns > button:last-child {
    background: #e5e5e5;
    border-radius: 15px;
    padding: 18px;
    height: 60px;
    color: #333;
    text-align: center;
    font-family: "Poppins Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    border: 0;
    margin-bottom: 12px;
    transition: all 0.3s ease-out;
}

.order-stepper-btns > button:last-child:hover {
    background-color: #aaa;
}

.clover-shadow::after {
    content: "";
    position: absolute;
    right: 0;
    background: linear-gradient(
        265deg,
        #ffffffe6 4.19%,
        rgb(255 255 255 / 0%) 96.39%
    );
    height: 250px;
    width: 225px;
    bottom: 0;
    top: 0;
    margin: auto;
    z-index: 1;
}

.clover-swiper .swiper-button-prev,
.clover-swiper .swiper-button-next {
    width: 34px;
    text-align: center;
    top: 47% !important;
}

.clover-swiper .swiper-button-prev > svg,
.clover-swiper .swiper-button-next > svg {
    width: 100%;
}

.clover-swiper-wrapper {
    transition: padding-right 0.3s ease;
}

.clover-swiper .swiper-button-next,
.clover-swiper .swiper-button-prev {
    top: 47%;
}

/* .clover-no-shadow {
    padding-right: 70px;
} */
.clover-no-shadow > .swiper-wrapper {
    position: unset !important;
}

.clover-no-shadow .clover-no-shadow {
    right: -10px;
}

.step-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.step-wrapper > div {
    width: 55px;
    height: 55px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e5e5e5;
    position: relative;
    margin-right: 100px;
    padding: 3px;
}

.step-wrapper > div > span {
    display: none;
}

.step-wrapper > div:last-child {
    margin-right: 0;
}

.step-wrapper > div:last-child::after {
    display: none;
}

.step-wrapper > div::after {
    content: "";
    height: 6px;
    width: 74px;
    background: #e5e5e5;
    position: absolute;
    right: -88px;
    border-radius: 20px;
}

.step-wrapper > div[data-target="#step_1"].active::after {
    background: linear-gradient(to left, #e5e5e5 50%, #15537e 50%);
}

.step-wrapper > div[data-target="#step_2"].active::after {
    background: linear-gradient(
        to left,
        #e5e5e5 50%,
        #059ecd 50%,
        #0795c4 100%
    );
}

.step-wrapper > div[data-target="#step_3"].active::after {
    background: linear-gradient(
        to left,
        #e5e5e5 50%,
        #40b6ac 50%,
        #27b5c2 100%
    );
}

.step-wrapper > div[data-target="#step_1"].active {
    border: 2px solid #15537e;
    background-color: #fff;
    background: #fff;
    border-radius: 50%;
    background: linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #15537e 0%, #00b4e5 616.67%, #ffbb00 1233.33%)
            border-box;
    border: 2px solid transparent;
}

.step-wrapper > div[data-target="#step_2"].active {
    border: 2px solid #00b4e5;
    background: #fff;
    border-radius: 50%;
    background: linear-gradient(white, white) padding-box,
        linear-gradient(
                90deg,
                #15537e -287.78%,
                #00b4e5 317.22%,
                #ffbb00 922.22%
            )
            border-box;
    border: 2px solid transparent;
}

.step-wrapper > div[data-target="#step_3"].active {
    background: #fff;
    border-radius: 50%;
    background: linear-gradient(white, white) padding-box,
        linear-gradient(
                90deg,
                #15537e -548.89%,
                #00b4e5 51.67%,
                #ffbb00 652.22%
            )
            border-box;
    border: 2px solid transparent;
}

.step-wrapper > div[data-target="#step_4"].active {
    background: #fff;
    border-radius: 50%;
    background: linear-gradient(white, white) padding-box,
        linear-gradient(
                90deg,
                #15537e -833.33%,
                #00b4e5 -232.78%,
                #ffbb00 367.78%
            )
            border-box;
    border: 2px solid transparent;
}

.step-wrapper > div[data-target="#step_5"].active {
    background: #fff;
    border-radius: 50%;
    background: linear-gradient(white, white) padding-box,
        linear-gradient(
                90deg,
                #15537e -1104.44%,
                #00b4e5 -502.22%,
                #ffbb00 100%
            )
            border-box;
    border: 2px solid transparent;
}

.step-wrapper > div[data-target="#step_1"].active > span {
    background: linear-gradient(
        90deg,
        #15537e 0%,
        #00b4e5 616.67%,
        #ffbb00 1233.33%
    );
}

.step-wrapper > div[data-target="#step_2"].active > span {
    background: linear-gradient(
        90deg,
        #15537e -287.78%,
        #00b4e5 317.22%,
        #ffbb00 922.22%
    );
}

.step-wrapper > div[data-target="#step_3"].active > span {
    background: linear-gradient(
        90deg,
        #15537e -548.89%,
        #00b4e5 51.67%,
        #ffbb00 652.22%
    );
}

.step-wrapper > div[data-target="#step_4"].active > span {
    background: linear-gradient(
        90deg,
        #15537e -833.33%,
        #00b4e5 -232.78%,
        #ffbb00 367.78%
    );
}

.step-wrapper > div[data-target="#step_5"].active > span {
    background: linear-gradient(
        90deg,
        #15537e -1104.44%,
        #00b4e5 -502.22%,
        #ffbb00 100%
    );
}

.arrow-acc-wrapper {
    width: 20px;
    transition: transform 0.3s ease-in-out;
}

.arrow-acc-wrapper.rotated-90 {
    transform: rotate(90deg);
}

.trigger-collapse > h6 {
    color: #333;
    font-family: "Poppins Bold";
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0;
}

.trigger-collapse > h6 span {
    color: #00b4e5;
}

.step-wrapper > div[data-target="#step_1"].completed::after {
    background: linear-gradient(
        90deg,
        #15537e -225.09%,
        #00b4e5 847.46%,
        #ffbb00 1920%
    );
}

.step-wrapper > div[data-target="#step_2"].completed::after {
    background: linear-gradient(
        90deg,
        #15537e -736%,
        #00b4e5 355%,
        #ffbb00 1446%
    );
}

.step-wrapper > div[data-target="#step_3"].completed::after {
    background: linear-gradient(
        90deg,
        #15537e -1270%,
        #00b4e5 -170%,
        #ffbb00 930%
    );
}

.step-wrapper > div[data-target="#step_4"].completed::after {
    background: linear-gradient(
        90deg,
        #15537e -1760%,
        #00b4e5 -681%,
        #ffbb00 398%
    );
}

.step-wrapper > div[data-target="#step_1"].completed {
    border: 0;
    background-color: #fff;
}

.step-wrapper > div[data-target="#step_2"].completed {
    border: 0;
    background-color: #fff;
}

.step-wrapper > div[data-target="#step_3"].completed {
    border: 0;
    background-color: #fff;
}

.step-wrapper > div[data-target="#step_4"].completed {
    border: 0;
    background: #fff;
}

.step-wrapper > div[data-target="#step_1"].completed > span {
    background: linear-gradient(
        90deg,
        #15537e 0%,
        #00b4e5 616.67%,
        #ffbb00 1233.33%
    );
}

.step-wrapper > div[data-target="#step_2"].completed > span {
    background: linear-gradient(
        90deg,
        #15537e -287.78%,
        #00b4e5 317.22%,
        #ffbb00 922.22%
    );
}

.step-wrapper > div[data-target="#step_3"].completed > span {
    background: linear-gradient(
        90deg,
        #15537e -548.89%,
        #00b4e5 51.67%,
        #ffbb00 652.22%
    );
}

.step-wrapper > div[data-target="#step_4"].completed > span {
    background: linear-gradient(
        90deg,
        #15537e -833.33%,
        #00b4e5 -232.78%,
        #ffbb00 367.78%
    );
}

.step-wrapper > div.completed > span {
    content: url("./images/check_white.svg");
    padding: 11px;
}

.step-wrapper > div.active > span,
.step-wrapper > div.completed > span {
    display: flex;
}

.step-title-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.step-title h4 {
    color: #333;
    font-family: "Poppins SemiBold";
    font-size: 45px;
    font-style: normal;
    line-height: 60px;
    margin: 0;
}

.step-wrapper > div > span {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    font-family: "Poppins SemiBold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 100%;
}
.step-content {
    margin-bottom: 20px;
}
.step-content {
    display: none;
}
.step-content.active {
    display: block;
}
.step-content .information .inp-label {
    display: block;
    width: 100%;
    color: #aaa;
    font-family: "Poppins Medium";
    font-size: 14px;
    font-style: normal;
}

.step-content .information > form .form-item-wrapper {
    margin-bottom: 25px;
}

.form-item-wrapper .bootstrap-select > button {
    background-color: transparent;
    border-bottom: 1px solid #e5e5e5;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    height: 45px;
    border-radius: 0;
    align-items: baseline;
    padding: 0;
    line-height: 48px;
    color: #333;
    font-family: "Poppins Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}
.form-item-wrapper .bootstrap-select > button:focus {
    outline: none !important;
    box-shadow: none;
}
.form-item-wrapper .bootstrap-select .dropdown-menu {
    max-height: 200px;
}
.form-item-wrapper .bootstrap-select > button:active {
    box-shadow: none;
}
.form-item-wrapper .bootstrap-select .selected.active,
.form-item-wrapper .bootstrap-select .active {
    background-color: #00b2e3;
}

.step-content .information .form-item-wrapper input[type="text"],
.step-content .information .form-item-wrapper input[type="email"] {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    color: #333;
    font-family: "Poppins Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    padding: 10px 0;
    border-radius: 0;
}

.step-content .information .form-item-wrapper input[type="text"]:focus,
.step-content .information .form-item-wrapper input[type="email"]:focus {
    outline: none;
}

.form-item-wrapper > input::placeholder {
    font-family: "Poppins Regular";
    font-size: 14px;
    color: #333;
}
.info-title form div label {
    color: "#AAA";
    font-family: "Poppins Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    display: block;
}
.hooray-section > span {
    background: #0dcaf0;
    border-radius: 100%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hooray-section > h5 {
    color: #333;
    font-family: "Poppins Medium";
    font-size: 20px;
    font-style: normal;
    margin: 20px 0;
}

.hooray-section a {
    background: linear-gradient(
        90deg,
        #15537e 0%,
        #00b4e5 102.19%,
        #ffbb00 204.39%
    );
    border-radius: 15px;
    padding: 18px;
    height: 60px;
    color: #fff;
    text-align: center;
    font-family: "Poppins Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    display: block;
    line-height: normal;
    margin-bottom: 12px;
    width: 100%;
    border: 0;
}
.form-item-check-wrapper {
    display: flex;
    align-items: center;
}
.form-item-check-wrapper > p {
    margin-bottom: 0;
    color: #707070;
    font-family: "Poppins Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}
.form-item-check-wrapper > input:checked + label {
    background-color: #00b4e5;
    background-image: url("../../assets/images/restaurants-images/check_white.svg");
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
}
.form-item-check-wrapper label {
    width: 20px;
    height: 20px;
    display: block;
    background-color: #e5e5e5;
    margin-right: 5px;
    border-radius: 7px;
    cursor: pointer;
}

.form-item-check-wrapper input {
    display: none;
}

.pricing-page .our_products_wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.pricing-page .our_products_wrapper > div {
    margin-top: -6px;
}

.pricing-page .our_products_wrapper h5 {
    font-family: "Poppins Semibold";
    font-size: 20px;
    color: #707070;
    margin-bottom: 5px;
}

.pricing-page .our_products_wrapper h6,
.pricing-page .our_products_wrapper h6 a {
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #aaa;
    margin-bottom: 0;
}

.pricing-page .our_products_wrapper h6 a {
    text-decoration: underline;
    cursor: default;
    pointer-events: none;
}

.pricing-page .order-wrapper .top-sorted-wrapper {
    padding-top: 10px;
    width: auto;
    min-width: fit-content;
    white-space: nowrap;
}

/* .pricing-page .top-sorted-wrapper .hero_select {
  min-width: 200px;
  max-width: 200px;
} */

/* .pricing-page .top-sorted-wrapper .hero_select .wrapper {
  white-space: nowrap;
  min-width: 200px;
  max-width: 200px;
} */

.order-summary .products_wrapper {
    margin-bottom: 23px;
}

.order-summary .products_wrapper li p {
    margin-bottom: 0;
}

.order-right-side .total-amount {
    margin-bottom: 9px !important;
}

.step-title-item span {
    color: #00b4e5;
}

.smartbox_popup .modal-dialog {
    max-width: 1100px;
}

#smartboxKeyPopUp .modal-content {
    border-radius: 12px;
    overflow: hidden;
    border: none;
}
.smartbox_popup .left-modal {
    padding: 129px 21px 129px 53px;
    background-color: #fff;
}

#productModalTitle {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: #333;
    margin-bottom: 10px;
}

.modal-tagline {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #00b4e5;
    margin-bottom: 4px;
    display: block;
}

#productModalDescription {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #333;
    margin-top: 0;
    line-height: 1.6;
}

.smartbox_popup .right-modal {
    background: linear-gradient(160.69deg, #efefef 12.97%, #a5a5a5 116.13%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 600px;
}

#smartboxKeyPopUp .col-md-6 {
    display: flex;
    flex-direction: column;
}
.smartbox_popup .right-modal img {
    max-height: 550px;
    width: auto;
    object-fit: contain;
}

.smartbox_popup .close-icon {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1060; /* Higher than everything else */
    background: none;
    border: none;
}

.show-more-products {
    font-family: "Poppins Semibold";
    font-size: 16px;
    color: #aaa;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 10px;
    width: 100%;
}

.pricing-page .section-six .custom-table th {
    text-align: center;
}

.pricing-page .section-six .custom-table th.first_th {
    text-align: start;
}
.pricing-page .section-six .custom-table th.last_th {
    text-align: end;
}

.pricing-page .section-six .custom-table td {
    text-align: center;
}

.pricing-page .section-six .custom-table td:first-child {
    text-align: start;
}

.pricing-page .section-six .custom-table td:last-child {
    text-align: end;
}

.pricing-page .section-six .custom-table td.second > div {
    justify-content: center;
}

.pricing-page .section-six .pricing-boxes {
    margin: 30px 0;
    border-top: 1px solid #e5e5e5;
    padding-top: 30px;
}

.pricing-page .section-six .pricing-boxes .box_item.first_box {
    padding: 44px 32px 26px 32px;
}

.pricing-page .section-six .pricing-boxes .box_item {
    background-color: #e5e5e5;
    border-radius: 20px;
    padding: 27px 24px 17px 24px;
    min-height: 238px;
    margin-bottom: 21px;
}

.pricing-page .section-six .pricing-boxes .box_item p {
    font-family: "Poppins Regular";
    font-size: 28px;
    line-height: normal;
    color: #aaa;
    margin: 0;
    padding: 0;
}

.pricing-page .section-six .pricing-boxes .box_item h4 {
    font-family: "Poppins Semibold";
    font-size: 24px;
    line-height: normal;
    color: #333;
    margin: 0;
    padding: 0;
}

.pricing-page .section-six .pricing-boxes .box_item h6 {
    font-family: "Poppins Regular";
    font-size: 14px;
    line-height: normal;
    color: #707070;
    margin: 0 0 34px 0;
    padding: 0;
}

.pricing-page .section-six .pricing-boxes .box_item .price_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pricing-page .section-six .pricing-boxes .box_item h5.price {
    font-family: "Poppins Semibold";
    font-size: 32px;
    line-height: normal;
    color: #333;
    margin: 0;
    padding: 0;
}

.pricing-page .pricing-boxes .box_item .price_wrapper span {
    font-family: "Poppins Regular";
    font-size: 15px;
    line-height: normal;
    color: #707070;
}

.pricing-page .section-six .pricing-boxes .box_item .btn {
    background-color: #333;
    border-radius: 5px;
    font-family: "Poppins Regular";
    font-size: 16px;
    line-height: normal;
    color: #fff;
    width: 100%;
    margin-top: 13px;
    transition: background 0.5s ease-in-out;
}

.pricing-page .section-six .pricing-boxes .box_item .btn:hover {
    background: linear-gradient(90deg, #15537e 0%, #00b4e5 50%, #fb0 100%);
    border: 1px solid #e5e5e5;
}

.pricing-page.home-page .border_space_wrapper .border__bottom {
    padding-bottom: 110px;
}

.trigger-collapse .arrow-acc-wrapper {
    transform: rotate(180deg);
}

.pricing-page .pricing-table {
    width: 100%;
    border-collapse: collapse;
}

.pricing-page .pricing-table th {
    font-family: "Poppins Regular";
    padding: 10px 10px 8px 10px;
    text-align: left;
    font-weight: 500;
    color: #707070;
    font-size: 13px;
    border-bottom: 1px solid #e9ecef;
}

.pricing-page .pricing-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s;
}

.pricing-page .pricing-table td {
    padding: 10px 12px;
    vertical-align: middle;
}

.pricing-page .product-cell {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pricing-page .product-image {
    width: 50px;
    height: 50px;
    background: #e9ecef;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pricing-page .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pricing-page .product-name {
    font-family: "Poppins Semibold";
    color: #aaa;
    font-size: 16px;
    line-height: 1.4;
    text-wrap: nowrap;
}

.pricing-page .price-badge {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    background: #333;
    color: white;
    padding: 3px 5px;
    gap: 8px;
    width: 100%;
    border-radius: 5px;
}

.pricing-page .price-badge .price_span {
    font-family: "Poppins Semibold";
    font-size: 14px;
    font-weight: 600;
}

.pricing-page .price-badge span {
    font-size: 9px;
    font-family: "Poppins Regular";
    font-weight: 400;
}

.price-badge input[type="checkbox"] {
    width: 31px;
    height: 21px;
    cursor: pointer;
    margin: 0;
    background: white;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #dee2e6;
    pointer-events: none;
    cursor: default;
}

.price-badge input[type="checkbox"] {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pricing-page .status-text {
    color: #aaa;
    font-style: italic;
    font-size: 14px;
    font-family: "Poppins Regular";
}

.pricing-page .plan-cards {
    margin-top: 13px;
}

.pricing-page .plan-cards .pricing-card {
    border-radius: 20px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    position: relative;
}

.pricing-page .plan-cards .pricing-card:hover {
    transform: translateY(-5px);
}

.pricing-page .plan-cards .pricing-card.selected,
.pricing-page .step-selected-products .family-plan.selected {
    background: linear-gradient(90deg, #15537e 0%, #00b4e5 50%, #ffbb00 100%);
    color: white;
}

.pricing-page .plan-cards .pricing-card.selected .features-list li,
.pricing-page .step-selected-products .family-plan.selected .wrapper h4,
.pricing-page .step-selected-products .family-plan.selected p,
.pricing-page .step-selected-products .family-plan.selected .wrapper h3 {
    color: #e5e5e5;
}

.pricing-page .plan-cards .pricing-card.selected .price {
    color: #fff;
}

.pricing-page .plan-cards .monthly-card,
.pricing-page .plan-cards .pricing-card {
    background: #e5e5e5;
    color: #333;
}

.pricing-page .plan-cards .yearly-card {
    background: #e5e5e5;
    color: #333;
}

.pricing-page .plan-cards .card-title {
    font-family: "Poppins Semibold";
    font-size: 20px;
    margin-bottom: 8px;
}

.pricing-page .plan-cards .card-subtitle {
    font-family: "Poppins Regular";
    font-size: 14px;
    margin-bottom: 20px;
    color: #e5e5e5;
}

.pricing-page .plan-cards .monthly-card .card-subtitle,
.pricing-page .plan-cards .yearly-card .card-subtitle,
.pricing-page .plan-cards .pricing-card .card-subtitle {
    color: #707070;
}

.pricing-page .plan-cards .pricing-card.selected .card-subtitle {
    color: #e5e5e5;
}

.pricing-page .plan-cards .includes-title {
    font-family: "Poppins Semibold";
    font-size: 14px;
    margin-bottom: 5px;
}

.pricing-page .plan-cards .features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1;
}

.pricing-page .plan-cards .features-list li {
    font-family: "Poppins Regular";
    font-size: 14px;
    padding-left: 20px;
    position: relative;
    color: #e5e5e5;
}

.pricing-page .plan-cards .features-list li:not(:last-child) {
    margin-bottom: 5px;
}

.pricing-page .plan-cards .features-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 18px;
}

.pricing-page .plan-cards .monthly-card .features-list li,
.pricing-page .plan-cards .yearly-card .features-list li,
.pricing-page .plan-cards .pricing-card .features-list li {
    color: #707070;
}

.pricing-page .plan-cards .price {
    font-family: "Poppins Semibold";
    font-size: 24px;
    margin-top: auto;
}

.pricing-page .plan-cards .pay-per-use-card .price {
    color: white;
}

.pricing-page .plan-cards .monthly-card .price,
.pricing-page .plan-cards .yearly-card .price,
.pricing-page .plan-cards .pricing-card .price {
    color: #333;
}

.pricing-page .step-selected-products .family-plan {
    background-color: #e5e5e5;
    border-radius: 20px;
    padding: 20px;
    margin-top: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pricing-page .step-selected-products .family-plan .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
}

.pricing-page .step-selected-products .family-plan .wrapper h4 {
    font-family: "Poppins Semibold";
    font-size: 20px;
    color: #333;
    margin: 0;
}

.pricing-page .step-selected-products .family-plan .wrapper h4 span {
    font-family: "Poppins Light";
    font-size: 14px;
}

.pricing-page .step-selected-products .family-plan .wrapper h3 {
    font-family: "Poppins Semibold";
    font-size: 24px;
    color: #333;
    margin: 0;
}

.pricing-page .step-selected-products .family-plan p {
    font-family: "Poppins Regular";
    font-size: 14px;
    color: #707070;
    margin: 0;
}

.pricing-page .section-eight .title {
    border-top: 1px solid #e5e5e5;
}

.pricing-page .kore_packages_section {
    padding-bottom: 30px;
}

.pricing-page .section-eight {
    margin-top: 20px;
}

.pricing-page .order-section-two form {
    margin-bottom: 80px;
}

.pricing-page .information h3.info-title {
    font-family: "Poppins Semibold";
    font-size: 20px;
    line-height: 60px;
    color: #707070;
    margin-bottom: 10px;
}

.pricing-page .checkbox-wrapper-4 * {
    box-sizing: border-box;
}

.pricing-page .checkbox-wrapper-4 {
    margin-top: 25px;
}

.pricing-page .checkbox-wrapper-4 .cbx {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px 8px;
    padding-left: 0;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: inline-block;
}

.pricing-page .checkbox-wrapper-4 .cbx:not(:last-child) {
    margin-right: 6px;
}

.pricing-page .checkbox-wrapper-4 .cbx span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
    font-family: "Poppins Regular";
    font-size: 16px;
    color: #707070;
}

.pricing-page .checkbox-wrapper-4 .cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    transform: scale(1);
    border: 1px solid #cccfdb;
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
}

.pricing-page .checkbox-wrapper-4 .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}

.pricing-page .checkbox-wrapper-4 .cbx span:last-child {
    padding-left: 8px;
    line-height: 18px;
}

.pricing-page .checkbox-wrapper-4 .cbx:hover span:first-child {
    border-color: #00b4e5;
}

.pricing-page .checkbox-wrapper-4 .inp-cbx {
    position: absolute;
    visibility: hidden;
}

.pricing-page .checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child {
    background: #00b4e5;
    border-color: #00b4e5;
    animation: wave-4 0.4s ease;
}

.pricing-page .checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}

.pricing-page .checkbox-wrapper-4 .inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}

@media screen and (max-width: 640px) {
    .pricing-page .checkbox-wrapper-4 .cbx {
        width: 100%;
        display: inline-block;
    }
}

@-moz-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}

@-webkit-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}

@-o-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}

@keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}

.user-informations-ul,
.user-payments-ul {
    margin-bottom: 23px;
}

/* PRICING  */
.privacy {
    font-family: "Poppins Regular";
}

.privacy h4 {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 18px;
}

.faqs-page ul {
    margin-bottom: 20px;
    list-style: disc;
    padding-left: 15px;
}

.faqs-page ul li {
    list-style-type: disc;
}

.new-users-box,
.new-coverage-box,
.new-dashboard-control {
    position: absolute;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    z-index: 3;
    cursor: pointer;
}

.new-users-box {
    width: 238px;
    height: 55px;
    padding: 10px;
    left: 100px;
    top: -30px;
}

.new-users-box:hover {
    width: 296px;
    height: 68px;
    padding: 16.5px 10px;
    /* When using absolute position, we need to adjust left position to maintain centering */
    left: calc(100px - (296px - 238px) / 2);
    top: calc(-30px - (68px - 55px) / 2);
}

.new-coverage-box {
    width: 183px;
    height: 56px;
    padding: 14px 10px;
    left: 90px;
    bottom: 120px;
}

.new-coverage-box:hover {
    width: 203px;
    height: 68px;
    padding: 20px 10px;
    /* Adjust for equal growth in all directions */
    left: calc(90px - (203px - 183px) / 2);
    bottom: calc(120px - (68px - 56px) / 2);
}

.car-icon {
    width: 35px;
    height: auto;
}

.users-image-container,
.coverage-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-right: 11px;
    flex-shrink: 0;
    gap: 10px;
}

.clients {
    height: 35px;
    width: auto;
}

.users-image-container img:last-child {
    width: 24px;
    height: 20px;
    animation: heartbeat 1.5s ease-in-out infinite;
}

/* Text Animation */
.text-container {
    display: flex;
    flex-direction: column;
    color: #333;
    font-size: 16px;
    font-family: "Poppins Medium";
    /* overflow: hidden; */
    flex: 1;
}

.main-text {
    font-weight: 500;
    white-space: nowrap;
}

.additional-text {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    font-size: 16px;
    color: #333;
    white-space: nowrap;
}

.new-users-box:hover .additional-text,
.new-coverage-box:hover .additional-text,
.new-dashboard-control:hover .additional-text {
    opacity: 1;
    max-height: 30px;
    transition-delay: 0.1s;
}

.new-dashboard-control {
    width: 278px;
    height: 55px;
    padding: 10px;
    right: 30px;
    /*   right: 35px; --> this should match this 35 with right: calc(35px)  right: calc(35px - (291px - 278px) / 2); */
    top: 155px;
}

.new-dashboard-control:hover {
    width: 291px;
    height: 68px;
    padding: 16.5px 10px;
    /* Adjust for equal growth in all directions */
    right: calc(30px - (291px - 278px) / 2);
    top: calc(155px - (68px - 55px) / 2);
}

.dashboard-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Heartbeat animation */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    5% {
        transform: scale(1.1);
    }

    10% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.1);
    }

    20% {
        transform: scale(1);
    }

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

tbody tr {
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

tbody tr.hidden-product {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
}

tbody tr:not(.hidden-product) {
    /* opacity: 0.5; */
    max-height: 100px;
}

.show-more-products {
    transition: all 0.3s ease;
    cursor: pointer;
}

.loading-spinner.lds-roller {
    display: inline-block;
    position: relative;
    width: 6px;
    height: 20px;
    margin-left: 8px;
    vertical-align: middle;
}

.loading-spinner.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 10px 10px;
    position: absolute;
}

.loading-spinner.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #3498db;
    margin: -1px 0 0 -1px;
}

.loading-spinner.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}

.loading-spinner.lds-roller div:nth-child(1):after {
    top: 15.625px;
    left: 15.625px;
}

.loading-spinner.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}

.loading-spinner.lds-roller div:nth-child(2):after {
    top: 16.875px;
    left: 14.0625px;
}

.loading-spinner.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}

.loading-spinner.lds-roller div:nth-child(3):after {
    top: 17.8125px;
    left: 12.1875px;
}

.loading-spinner.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}

.loading-spinner.lds-roller div:nth-child(4):after {
    top: 18.125px;
    left: 10px;
}

.loading-spinner.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}

.loading-spinner.lds-roller div:nth-child(5):after {
    top: 17.8125px;
    left: 7.8125px;
}

.loading-spinner.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}

.loading-spinner.lds-roller div:nth-child(6):after {
    top: 16.875px;
    left: 5.9375px;
}

.loading-spinner.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}

.loading-spinner.lds-roller div:nth-child(7):after {
    top: 15.625px;
    left: 4.375px;
}

.loading-spinner.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}

.loading-spinner.lds-roller div:nth-child(8):after {
    top: 14.0625px;
    left: 3.125px;
}

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.hero_select.loading .wrapper {
    padding-right: 30px;
}

.hero_select.loading .arrow {
    display: none;
}

.hero_select.loading {
    pointer-events: none;
    opacity: 0.8;
}

/* Supported table loading dynamic  */
.spinner.supported-vehicles-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70vh;
    width: 100%;
}

/*******************\
    Loading Roller
\*******************/
@-webkit-keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.spinner.supported-vehicles-spinner .lds-roller {
    position: relative;
    display: inline-block;
    height: 64px;
    width: 64px;
}
.spinner.supported-vehicles-spinner .lds-roller div {
    -webkit-animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 32px 32px;
}
.spinner.supported-vehicles-spinner .lds-roller div:after {
    position: absolute;
    display: block;
    background: #00b4e5;
    border-radius: 50%;
    content: " ";
    margin: -3px 0 0 -3px;
    height: 6px;
    width: 6px;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(1) {
    -webkit-animation-delay: -0.036s;
    animation-delay: -0.036s;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(1):after {
    top: 50px;
    left: 50px;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(2) {
    -webkit-animation-delay: -0.072s;
    animation-delay: -0.072s;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(2):after {
    top: 54px;
    left: 45px;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(3) {
    -webkit-animation-delay: -0.108s;
    animation-delay: -0.108s;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(3):after {
    top: 57px;
    left: 39px;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(4) {
    -webkit-animation-delay: -0.144s;
    animation-delay: -0.144s;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(4):after {
    top: 58px;
    left: 32px;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(5) {
    -webkit-animation-delay: -0.18s;
    animation-delay: -0.18s;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(5):after {
    top: 57px;
    left: 25px;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(6) {
    -webkit-animation-delay: -0.216s;
    animation-delay: -0.216s;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(6):after {
    top: 54px;
    left: 19px;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(7) {
    -webkit-animation-delay: -0.252s;
    animation-delay: -0.252s;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(7):after {
    top: 50px;
    left: 14px;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(8) {
    -webkit-animation-delay: -0.288s;
    animation-delay: -0.288s;
}
.spinner.supported-vehicles-spinner .lds-roller div:nth-child(8):after {
    top: 45px;
    left: 10px;
}

.loading_error,
.custom-field-error {
    color: #ff3535 !important;
    font-size: 16px !important;
    font-family: "Poppins Regular" !important;
}

.border_space_table_supported {
    display: none;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Supported table loading dynamic  */

.success-looking-distributor-alert,
.join-network-success-alert {
    font-family: "Poppins Medium";
    text-align: center;
    font-size: 18px;
    max-width: 100%;
    background: linear-gradient(90deg, #15537e 0%, #00b4e5 50%, #ffbb00 190%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: opacity 0.6s ease;
}

.iti--separate-dial-code .iti__selected-flag,
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: transparent;
}

.iti {
    width: 100%;
}

/* Make the whole intl-tel-input container behave like a normal form-control */
.distributors-page .section-three .iti {
    width: 100%;
    position: relative;
}

.distributor-success-alert .swal2-title {
    font-size: 22px;
    color: #333;
}

.distributor-success-alert .swal2-html-container {
    font-family: "Poppins Regular";
    color: #333;
    font-size: 16px;
}

.distributor-success-alert .swal2-confirm:focus-visible {
    box-shadow: none;
}

/* Change spinner dots to white when inside the button */
/* Ensure button is blue during loading, regardless of input */
.send-message-btn.loading {
    background-color: #00b4e5; /* Your blue color */
    border-color: #00b4e5;
    opacity: 1;
}

/* Make dots white specifically when the button is loading */
.send-message-btn.loading .lds-roller div:after {
    background: #fff !important;
}

.invalid-feedback {
    font-family: "Poppins Regular";
    margin-top: 8px;
}

/* Standard margin */
.contact-page .section-two form .form-group {
    margin-bottom: 20px;
    transition: margin-bottom 0.2s ease;
}

/* Reduce margin when an error message follows the group */
.contact-page .section-two form .form-group:has(+ .invalid-feedback),
.contact-page
    .section-two
    form
    .form-group:has(~ .invalid-feedback:first-of-type) {
    margin-bottom: 10px;
}
.contact-page .invalid-feedback {
    margin-bottom: 10px;
}

.distributors-page .bs-searchbox .form-control {
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
}

.company_country_select .bootstrap-select,
.company_state_select .bootstrap-select {
    background: transparent;
    margin-top: 11px;
}