/*================================================================================================*/
/*=================[                                                            ]=================*/
/*=================[    !!!!!!!!   CSS CREATED BY WORKDO  !!!!!!!!   ]=================*/
/*=================[                                                            ]=================*/
/*================================================================================================*/
/* ============================================= */
/* !!!!         VARIABLES STYLE CSS         !!!! */
/* ============================================= */

:root {
    --first-font: 'Manrope', sans-serif;
    --second-font: 'General Sans', sans-serif;
    --third-font: 'Caveat', cursive;
    --theme-color: #0D6B8E;
    --primary-dark: #0A5774;
    --primary-light: rgba(13, 107, 142, 0.11);
    --accent-color: #F7760F;
    --accent-light: rgba(247, 118, 15, 0.11);
    --accent-dark: #D85E08;
    --dark-color: #0B3447;
    --brand-navy: #134860;
    --brand-teal: #0F898D;
    --border-color: #D6E4EA;
    --text-color: #607580;
    --light-color: #F1F7FA;
    --light-gray: #F1F7FA;
    --red-color: #EF4444;
    --black: #17384A;
    --white: #ffffff;
    --h1: normal 800 72px/1.2 var(--first-font);
    --h2: normal 700 42px/1.2 var(--first-font);
    --h3: normal 700 34px/1.2 var(--first-font);
    --h4: normal 700 28px/1.2 var(--first-font);
    --h5: normal 700 24px/1.2 var(--first-font);
    --h6: normal 700 20px/1.2 var(--first-font);
    --highlight-color: rgba(13, 107, 142, 0.3);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 3px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --common-text: normal 400 15px/1.4 var(--second-font);
}

/* ========================================================================== */
/* APXUTE PUBLIC COMPATIBILITY LAYER                                           */
/* Appended to the supplied WorkDo stylesheet; source rules above stay intact. */
/* ========================================================================== */
@font-face {
    font-family: 'Manrope';
    src: url('/apxute-workdo/fonts/manrope.ttf') format('truetype');
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: 'Caveat';
    src: url('/apxute-workdo/fonts/caveat.ttf') format('truetype');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --theme-color: #0D6B8E;
    --primary-dark: #0A5774;
    --primary-light: rgba(13, 107, 142, 0.11);
    --accent-color: #F7760F;
    --accent-light: rgba(247, 118, 15, 0.11);
    --accent-dark: #D85E08;
    --dark-color: #0B3447;
    --brand-navy: #134860;
    --brand-teal: #0F898D;
    --border-color: #D6E4EA;
    --text-color: #607580;
    --light-color: #F1F7FA;
    --light-gray: #F1F7FA;
    --black: #17384A;
    --second-font: 'Manrope', sans-serif;
}

body.apxute-public-page {
    margin: 0;
    overflow-x: hidden;
    color: var(--text-color);
    background: var(--white);
}

.apxute-public-page button,
.apxute-public-page input {
    font: inherit;
}

.apxute-public-page [hidden] {
    display: none !important;
}

.apx-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 9999;
    padding: 10px 14px;
    color: #fff;
    background: #111;
    transform: translateY(-160%);
}

.apx-skip-link:focus { transform: translateY(0); }
.apx-sr-only,
.apxute-public-page .apx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.dash-saas-bundle-announcebar {
    width: 100%;
    display: block;
    padding: 9px 15px;
    color: #fff;
    text-align: center;
    font-weight: 600;
    background: linear-gradient(90deg, #134860, #0D6B8E, #0F898D);
    background-size: 200% auto;
    animation: apxAnnounce 6s linear infinite;
}

.dash-saas-bundle-announcebar .middle i { margin-right: 4px; }
.dash-saas-bundle-announcebar .claim-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 3px 10px;
    color: #17384A;
    background: #fff;
    border-radius: 99px;
    font-size: 13px;
}

@keyframes apxAnnounce { to { background-position: 200% center; } }

.wdo-header .header-logo img,
.wdo-mobile-drawer .drawer-header img,
.wdo-footer .footer-logo img {
    object-fit: contain;
    object-position: left center;
}

.wdo-header .nav-link-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--black);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 28px 0;
    cursor: pointer;
    font-weight: 600;
}

.wdo-header .nav-link-button i { font-size: 11px; transition: transform .25s ease; }
.wdo-header [data-menu].is-open .nav-link-button i { transform: rotate(180deg); }
.wdo-header .header-nav > ul > li { position: static; }
.wdo-header .header-nav > ul > li.has-dropdown { position: relative; }
.wdo-header .header-nav > ul > li.is-open > .mega-menu,
.wdo-header .header-nav > ul > li.is-open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.wdo-header .mega-menu { max-height: min(70vh, 620px); overflow-y: auto; }
.wdo-header .mega-menu-container { max-width: 1320px; }
.wdo-header .apx-mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 30px; }
.wdo-header .mega-nav-list { margin: 0; padding: 0; list-style: none; }
.wdo-header .mega-nav-list li a { min-height: 43px; }
.wdo-header .mega-nav-list .menu-icon,
.wdo-header .mega-nav-list .menu-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wdo-header .header-actions { gap: 15px; }
.wdo-header .header-login-link { color: var(--black); font-weight: 650; }
.wdo-header .header-start-btn { padding: 11px 18px; }
.wdo-header .mobile-menu-toggle i { font-size: 20px; }
.wdo-header .nav-dropdown a { display: flex !important; gap: 10px; align-items: center; }

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    border: 0;
    background: rgba(11, 52, 71, .58);
}

.wdo-mobile-drawer .drawer-parent {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 0;
    border: 0;
    background: transparent;
    color: var(--black);
    cursor: pointer;
    font-weight: 600;
    text-align: left;
}

.wdo-mobile-drawer .drawer-parent .chevron-icon { margin-left: auto; transition: transform .25s ease; }
.wdo-mobile-drawer li.open > .drawer-parent .chevron-icon { transform: rotate(180deg); }
.wdo-mobile-drawer li.open > .drawer-sub-menu { display: block; }
.wdo-mobile-drawer .drawer-icon { width: 20px; color: var(--theme-color); text-align: center; }
.wdo-mobile-drawer .drawer-close i { font-size: 19px; }
.wdo-mobile-drawer .drawer-actions { display: grid; }
.mobile-menu-open { overflow: hidden; }

.wdo-hero-sec { padding-top: 92px; }
.wdo-hero-sec .wdo-hero-content { position: relative; z-index: 3; }
.wdo-hero-sec .hero-word-rotator { min-width: 5.8em; }
.wdo-hero-sec .hero-search-icon i { font-size: 20px; }
.wdo-hero-sec .workdo-banner-search-suggestions {
    left: 50%;
    width: min(660px, 100%);
    max-height: 330px;
    overflow-y: auto;
    transform: translateX(-50%);
    text-align: left;
}

.workdo-banner-search-suggestions a {
    display: grid;
    grid-template-columns: 38px 1fr 18px;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: var(--black);
    border-bottom: 1px solid var(--border-color);
}

.workdo-banner-search-suggestions a:hover { background: var(--primary-light); }
.workdo-banner-search-suggestions a span:nth-child(2) { display: grid; }
.workdo-banner-search-suggestions a small { color: var(--text-color); }
.workdo-banner-search-suggestions .suggestion-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--theme-color);
    background: var(--primary-light);
    border-radius: 8px;
}

.workdo-banner-search-suggestions > p { margin: 0; padding: 14px; }
.wdo-hero-sec .btn-wrapper .heighlight-btn { display: flex; align-items: center; }
.apx-hand-arrow { margin-right: 10px; color: var(--accent-color); font-size: 38px; transform: rotate(55deg); }
.wdo-hero-sec .product-icon i { font-size: 17px; }
.wdo-hero-sec .promo-badge i { font-size: 22px; }
.wdo-hero-sec .product-info p { text-wrap: balance; }

.why-choose-sec .icon-box i { font-size: 25px; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.marketplace-sec .tabs-row .tabs {
    list-style: none;
    padding: 0;
    overflow-x: auto;
}

.marketplace-sec .tabs-row .tabs button {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    border: 0;
    border-right: 1px solid var(--border-color);
    color: var(--black);
    background: #fff;
    white-space: nowrap;
    cursor: pointer;
    font-weight: 700;
}

.marketplace-sec .tabs-row .tabs button:first-child { border-radius: 10px 0 0 10px; }
.marketplace-sec .tabs-row .tabs button:last-child { border-radius: 0 10px 10px 0; border-right: 0; }
.marketplace-sec .tabs-row .tabs button.active { color: #fff; background: var(--dark-color); }
.marketplace-sec .tab-content-inner.apx-catalog-panel { align-items: stretch; gap: 36px; }
.marketplace-sec .apx-catalog-panel .tab-content-info { width: 35%; padding-right: 0; }
.marketplace-points { margin-left: 0; padding-left: 0; list-style: none; }
.marketplace-points li { display: flex; align-items: center; gap: 8px; }
.marketplace-points i { color: var(--theme-color); }
.apx-catalog-products {
    width: 65%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.apx-catalog-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 14px;
    padding: 12px;
    color: var(--black);
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.apx-catalog-card:hover { transform: translateY(-3px); border-color: var(--theme-color); box-shadow: var(--shadow-md); }
.apx-catalog-card img { width: 74px; aspect-ratio: 1; object-fit: cover; border-radius: 7px; }
.apx-catalog-card > span { min-width: 0; display: grid; gap: 2px; }
.apx-catalog-card small { color: var(--theme-color); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.apx-catalog-card strong { overflow-wrap: anywhere; font-size: 16px; }
.apx-catalog-card em { color: var(--text-color); font-size: 12px; font-style: normal; line-height: 1.35; }

.industries-marquee { overflow: hidden; padding: 8px 0; }
.industries-track { width: max-content; display: flex; gap: 16px; animation: apxMarquee 42s linear infinite; }
.industries-track .industry-pill { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.industries-track .industry-pill i { color: var(--theme-color); }
@keyframes apxMarquee { to { transform: translateX(-50%); } }

.addon-sec .all-addon-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.addon-sec .all-addon-grid .addon-grid-item { min-width: 0; }
.addon-sec .addon-icon i { font-size: 23px; }
.addon-sec .addon-name { overflow-wrap: anywhere; }

.grow-sec .grow-top .script-subtitle { color: var(--accent-color); }
.apx-grow-arrow { position: absolute; right: 20%; top: 48px; color: var(--accent-color); font-size: 46px; transform: rotate(50deg); }
.grow-sec .grow-card { min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; }
.grow-sec .grow-card h3 { margin-top: 14px; font-size: 32px; overflow-wrap: anywhere; }
.grow-sec .plan-kicker { display: inline-flex; padding: 5px 9px; border-radius: 6px; color: var(--dark-color); background: rgba(255,255,255,.65); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.grow-sec .apx-plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 22px; }
.grow-sec .apx-plan-price strong { color: var(--black); font-size: 27px; }
.grow-sec .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow-sec .card-footer a { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: var(--dark-color); border-radius: 50%; }
.grow-sec .apx-grow-action { padding: 30px 0 60px; text-align: center; }

.services-sec .apx-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.services-sec .service-card-img { aspect-ratio: 16 / 10; }
.services-sec .service-card-img img { height: 100%; object-fit: cover; object-position: top; }

.achievement-sec .stat-icon { display: grid; place-items: center; }
.achievement-sec .stat-icon i { font-size: 24px; }
.achievement-sec .author-card .author-badge { width: 88px; height: 88px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 50%; background: rgba(255,255,255,.14); }
.achievement-sec .author-card .author-badge i { font-size: 40px; }
.achievement-sec .top-author .author-badge { color: var(--theme-color); background: var(--primary-light); }

.faq-sec .faq-icon i { width: 16px; text-align: center; }
.faq-sec .faq-item:not(.active) .minus-icon,
.faq-sec .faq-item.active .plus-icon { display: none; }
.faq-sec .faq-answer { display: block; }
.faq-sec .faq-item.active .accordion-button { color: var(--theme-color); }

.contact-sec .action-icon i { font-size: 28px; }
.apx-contact-cta .promo-badge { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 18px; color: #fff; background: var(--theme-color); border-radius: 12px; }
.apx-contact-cta .promo-badge i { font-size: 25px; }
.apx-contact-cta h3 { margin-bottom: 10px; font-size: 30px; }
.apx-contact-cta ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; padding: 0; list-style: none; }
.apx-contact-cta li { display: flex; align-items: center; gap: 8px; color: var(--black); font-weight: 650; }
.apx-contact-cta li i { color: var(--theme-color); }
.apx-contact-cta .apx-contact-link { display: block; margin-top: 14px; color: var(--dark-color); text-align: center; font-weight: 700; }

.wdo-footer .footer-trust { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: #fff; }
.wdo-footer .footer-trust > i { font-size: 27px; color: var(--theme-color); }
.wdo-footer .footer-trust small { color: rgba(255,255,255,.64); }
.wdo-footer .footer-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.wdo-footer .footer-outline-btn { color: #fff; border-color: rgba(255,255,255,.38); background: transparent; }
.wdo-footer .badge-grid { flex-wrap: wrap; }
.wdo-footer .badge-item { color: #fff; }
.wdo-footer .badge-item i { font-size: 18px; }
.wdo-footer .footer-location { margin-top: 22px; color: #fff; line-height: 1.6; }
.wdo-footer .footer-location i { margin-right: 7px; color: var(--theme-color); }
.wdo-footer .footer-location span { color: rgba(255,255,255,.65); font-size: 13px; }
.wdo-footer .footer-social a { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }

@media (max-width: 1199px) {
    .wdo-header .apx-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .addon-sec .all-addon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .apx-catalog-card { grid-template-columns: 60px minmax(0, 1fr) 16px; }
    .apx-catalog-card img { width: 60px; }
}

@media (max-width: 991px) {
    .wdo-header .header-login-link,
    .wdo-header .header-start-btn { display: none; }
    .wdo-mobile-drawer { display: flex; }
    .marketplace-sec .tab-content-inner.apx-catalog-panel { display: grid; }
    .marketplace-sec .apx-catalog-panel .tab-content-info,
    .apx-catalog-products { width: 100%; }
    .addon-sec .all-addon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .services-sec .apx-services-grid { grid-template-columns: repeat(3, minmax(260px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
    .services-sec .swiper-slide { scroll-snap-align: start; }
}

@media (max-width: 767px) {
    .dash-saas-bundle-announcebar { font-size: 12px; }
    .dash-saas-bundle-announcebar .claim-btn { color: #fff; background: transparent; padding: 0; text-decoration: underline; }
    .wdo-hero-sec { padding-top: 60px; }
    .wdo-hero-sec .hero-word-rotator { min-width: 0; width: 100%; display: block; min-height: 1.2em; }
    .wdo-hero-sec .hero-search-bar { grid-template-columns: 34px minmax(0, 1fr); display: grid; }
    .wdo-hero-sec .hero-search-bar .btn { grid-column: 1 / -1; width: 100%; }
    .wdo-hero-sec .btn-wrapper { flex-direction: column; align-items: stretch; }
    .wdo-hero-sec .btn-wrapper .heighlight-btn { display: block; }
    .wdo-hero-sec .btn-wrapper .btn { width: 100%; justify-content: center; }
    .apx-hand-arrow { display: none; }
    .apx-catalog-products { grid-template-columns: 1fr; }
    .addon-sec .all-addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grow-sec .grow-inner { align-items: stretch; }
    .grow-sec .grow-card { min-height: 0; }
    .apx-grow-arrow { display: none; }
    .achievement-sec .stats-grid { display: grid; grid-template-columns: 1fr; }
    .apx-contact-cta ul { grid-template-columns: 1fr; }
    .wdo-footer-bottom .footer-inner { align-items: flex-start; }
}

@media (max-width: 479px) {
    .wdo-header .header-logo img { max-width: 128px; }
    .wdo-hero-sec .hero-search-tags { justify-content: flex-start; overflow-x: auto; }
    .apx-catalog-card { grid-template-columns: 54px minmax(0, 1fr) 14px; }
    .apx-catalog-card img { width: 54px; }
    .contact-sec .contact-quick-actions { grid-template-columns: 1fr; }
    .contact-form-wrapper { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================= */
/* !!!!        SITE GLOBAL STYLE CSS        !!!! */
/* ============================================= */
*,
:after,
:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    text-decoration: inherit;
    vertical-align: inherit;
}

html {
    outline: none;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* global selection styling */
::-moz-selection {
    background-color: var(--highlight-color);
    color: inherit;
    text-shadow: none;
}

::selection {
    background-color: var(--highlight-color);
    color: inherit;
    text-shadow: none;
}

svg {
    max-width: 100%;
    display: block;
}

img {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

label {
    display: inline-block;
}

a,
.btn,
button {
    text-decoration: none;
    outline: none;
    color: inherit;
    display: inline-block;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

a,
a:hover,
a:focus,
a:active,
button,
button:hover,
button:focus,
input,
input:hover,
input:focus,
select,
select:hover,
select:focus,
textarea,
textarea:hover,
textarea:focus,
.btn,
.btn:hover,
.btn:focus,
.btn:active:focus,
.btn:active.focus,
.btn.active:focus,
.btn.active.focus {
    font-family: var(--second-font);
    text-decoration: none;
    -webkit-text-decoration-skip: objects;
    outline: none;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

.form-control:focus,
[type="text"]:focus,
[type="email"]:focus,
[type="checkbox"]:focus,
[type="password"]:focus,
[type="file"]:focus,
[type="radio"]:focus,
[type="submit"]:focus,
[type="date"]:focus,
[type="time"]:focus,
[type="tel"]:focus,
[type="search"]:focus,
[type="button"]:focus,
[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

::-webkit-input-placeholder {
    color: #80808a;
    font-weight: 400;
}

:-ms-input-placeholder {
    color: #80808a;
    font-weight: 400;
}

::-moz-placeholder {
    color: #80808a;
    font-weight: 400;
}

::-ms-input-placeholder {
    color: #80808a;
    font-weight: 400;
}

::placeholder {
    color: #80808a;
    font-weight: 400;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    font-size: 100%;
    list-style: none;
    vertical-align: baseline;
}

body {
    font: var(--common-text);
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    background: var(--white);
    color: var(--text-color);
}

/* ============================================= */
/* !!!!         SITE TYPOGRAPHY CSS         !!!! */
/* ============================================= */
p,
li,
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
    font: var(--common-text);
}

h1,
.h1 {
    font: var(--h1);
}

h2,
.h2 {
    font: var(--h2);
}

h3,
.h3 {
    font: var(--h3);
}

h4,
.h4 {
    font: var(--h4);
}

h5,
.h5 {
    font: var(--h5);
}

h6,
.h6 {
    font: var(--h6);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    text-transform: capitalize;
    color: var(--black);
}

h1 span,
h2 span,
h3 span,
h4 span {
    color: var(--theme-color);
}

.uppercase {
    text-transform: uppercase !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

b {
    font-weight: 600;
    display: inline-block;
}

p:not(:last-of-type) {
    margin-bottom: 15px;
}

.d-block {
    display: block !important;
}

.d-none {
    display: none !important;
}

/* ============================================= */
/* !!!!             GRID CSS                !!!! */
/* ============================================= */
.container {
    position: relative;
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 15px;
}

.offset-left {
    margin-left: calc((100% - 1230px) / 2);
    padding-left: 15px;
    overflow-x: hidden;
}

.offset-right {
    margin-right: calc((100% - 1230px) / 2);
    margin-left: 0;
    padding-right: 15px;
    overflow-x: hidden;
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.no-gutters {
    margin: 0 !important;
}

.row [class*="col-"] {
    padding: 0 15px;
}

.no-gutters [class*="col-"] {
    padding: 0;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.inline-flex {
    display: inline-flex;
}

.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.align-items-start {
    -ms-flex-align: start;
    -webkit-box-align: start;
    align-items: flex-start;
}

.align-items-center {
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
}

.align-items-end {
    -ms-flex-align: end;
    -webkit-box-align: end;
    align-items: flex-end;
}

.justify-content-around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.justify-content-between {
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.justify-content-start {
    -ms-flex-pack: start;
    -webkit-box-pack: start;
    justify-content: flex-start;
}

.justify-content-center {
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.justify-content-end {
    -ms-flex-pack: end;
    -webkit-box-pack: end;
    justify-content: flex-end;
}

.no-wrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.desk-only {
    display: none !important;
}

.mobile-only {
    display: block !important;
}

/*****  Columns  *****/
.col-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
}

.col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 66.66666667%;
}

.col-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 83.33333333%;
}

.col-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 91.66666667%;
}

.col-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
}

.grid {
    display: grid;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.gap-5 {
    gap: 20px;
}

.gap-6 {
    gap: 30px;
}

.text-base {
    font-size: 16px;
}

.relative {
    position: relative;
}

.overflow-hidden {
    overflow: hidden;
}

.rounded-full {
    border-radius: 9999px;
}

.border {
    border: 1px solid var(--border-color);
}

.border-primary {
    border: 1px solid var(--theme-color);
}

.line-through {
    text-decoration: line-through;
}

.grid-cols-1 {
    grid-template-columns: 1fr;
}

.grid-cols-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-cols-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media (min-width: 576px) {
    .col-sm {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    }

    .col-sm-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    .col-sm-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-sm-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-sm-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }

    .col-sm-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-sm-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-sm-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-sm-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-sm-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%;
    }

    .col-sm-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-sm-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-sm-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }

    .sm-grid-cols-1 {
        grid-template-columns: 1fr;
    }

    .sm-grid-cols-2 {
        grid-template-columns: 1fr 1fr;
    }

    .sm-grid-cols-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .sm-grid-cols-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .col-md {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    }

    .col-md-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    .col-md-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-md-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-md-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }

    .col-md-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-md-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }

    .col-md-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-md-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-md-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%;
    }

    .col-md-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-md-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-md-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }

    .md-grid-cols-1 {
        grid-template-columns: 1fr;
    }

    .md-grid-cols-2 {
        grid-template-columns: 1fr 1fr;
    }

    .md-grid-cols-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .md-grid-cols-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .col-lg {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    }

    .col-lg-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    .col-lg-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-lg-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-lg-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }

    .col-lg-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-lg-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-lg-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }

    .col-lg-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-lg-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-lg-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%;
    }

    .col-lg-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-lg-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-lg-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }

    .lg-grid-cols-1 {
        grid-template-columns: 1fr;
    }

    .lg-grid-cols-2 {
        grid-template-columns: 1fr 1fr;
    }

    .lg-grid-cols-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .lg-grid-cols-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .col-xl {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    }

    .col-xl-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    .col-xl-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xl-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xl-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xl-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xl-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xl-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xl-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xl-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xl-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xl-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xl-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }

    .xl-grid-cols-1 {
        grid-template-columns: 1fr;
    }

    .xl-grid-cols-2 {
        grid-template-columns: 1fr 1fr;
    }

    .xl-grid-cols-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .xl-grid-cols-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (min-width: 1400px) {
    .col-xxl {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    }

    .col-xxl-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    .col-xxl-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xxl-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xxl-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xxl-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xxl-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xxl-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xxl-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xxl-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xxl-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xxl-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xxl-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xxl-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ============================================= */
/* !!!!          NICE SELECT CSS           !!!! */
/* ============================================= */
.nice-select {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
    border: 1px solid var(--theme-color);
    color: var(--black);
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 10px 35px 10px 15px;
    outline: none;
    width: 100%;
    text-align: left !important;
    user-select: none;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.nice-select:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    height: 14px;
    width: 14px;
    pointer-events: none;
    background: url('../../assets/images/common-img/select-arrow.svg');
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    transition: transform .3s linear;
    -moz-transition: transform .3s linear;
    -ms-transition: transform .3s linear;
    -o-transition: transform .3s linear;
    -webkit-transition: transform .3s linear;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform-origin: center;
    -ms-transform-origin: center;
    -webkit-transform-origin: center;
}

.nice-select.open:after {
    transform: translateY(-50%) rotate(180deg);
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -moz-transform: scale(1) translateY(0);
    -o-transform: scale(1) translateY(0);
}

.nice-select.disabled {
    border-color: var(--border-color);
    color: var(--border-color);
    pointer-events: none;
}

.nice-select.disabled:after {
    border-color: #cccccc;
}

.nice-select .list {
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 0;
    background-color: var(--white);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    width: 100%;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    -webkit-box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    transform: scale(0.75) translateY(-21px);
    -moz-transform: scale(0.75) translateY(-21px);
    -o-transform: scale(0.75) translateY(-21px);
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    -o-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    -moz-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    -ms-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
}

.nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important;
}

.nice-select .option {
    cursor: pointer;
    list-style: none;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 10px 15px;
    color: var(--black);
    transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: #788b8f33;
}

.nice-select .option.selected {
    font-weight: 600;
}

.nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default;
}

.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}

/* ============================================= */
/* !!!!          COMMON BUTTON              !!!! */
/* ============================================= */
button {
    border: 0;
    outline: 0;
    background: none;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.widget a.button:hover {
    background-color: inherit;
    border-color: transparent;
}

.btn,
.button {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 11px 25px;
    text-align: center;
    text-transform: capitalize;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
    background-color: var(--theme-color);
    color: var(--white);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.btn i {
    fill: var(--black);
}

.btn svg {
    height: 16px;
    width: 16px;
}

.btn svg path {
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.5s ease;
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -ms-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
}

.btn:focus,
.btn:hover,
.button:focus,
.button:hover {
    background-color: var(--primary-dark);
}

.btn:hover::before {
    left: 100%;
}

@keyframes shimmer-infinite {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}

.secondary-btn {
    background: var(--accent-color);
}

.secondary-btn:not(.no-animation)::before {
    animation: shimmer-infinite 4s ease-in-out infinite;
}

.secondary-btn:focus,
.secondary-btn:hover {
    background: var(--accent-dark);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

.btn-transparent {
    background: transparent;
    color: var(--black);
    border-color: var(--theme-color);
}

.btn-transparent:hover,
.btn-transparent:focus {
    color: var(--white);
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn.btn-outline {
    border: 2px solid var(--border-color);
    background: var(--white);
    color: var(--black);
    box-shadow: none !important;
}

.btn.btn-outline::before {
    background: linear-gradient(90deg,
            transparent,
            rgba(16, 183, 127, 0.3),
            transparent);
}

.btn.btn-outline:hover,
.btn.btn-outline:focus {
    border-color: var(--theme-color);
    color: var(--theme-color);
}

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

.btn.btn-white::before {
    background: linear-gradient(90deg,
            transparent,
            rgba(16, 183, 127, 0.2),
            transparent);
}

.btn.btn-white i {
    color: var(--black);
}

.dropdown-btn .btn.btn-outline:hover {
    background: transparent;
    border-color: inherit;
    color: inherit;
}

.btn.transparent-white {
    background-color: transparent;
    border: 1px dashed var(--white);
    color: var(--white);
}

.btn.transparent-white:hover,
.btn.transparent-white:focus {
    box-shadow: none;
    background-color: var(--white);
    color: var(--black);
}

.btn-danger {
    background-color: var(--red-color);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--red-color);
}

.badge {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 10px 15px;
    gap: 5px;
    background: var(--theme-color);
    color: var(--black);
    letter-spacing: 1px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
}

button.submit-btn,
input.submit-btn {
    padding: 12px 15px;
    font-weight: 600;
    text-align: center;
}

.btn-wrapper {
    gap: 15px;
}

.fa-circle-play {
    font-size: 18px;
}

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

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

.max-w-70 {
    max-width: 700px;
    width: 100%;
    margin: 0 auto 30px;
}

.max-w-80 {
    max-width: 800px;
    width: 100%;
    margin: 0 auto 30px;
}

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

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

    to {
        transform: rotate(360deg);
    }
}

/* ============================================= */
/* !!!!             FORM  CSS               !!!! */
/* ============================================= */
.form-control,
input:not([type="submit"]),
input:not([type="checkbox"]),
input:not([type="radio"]),
select,
textarea {
    position: relative;
    border: 1px solid var(--border-color);
    display: block;
    width: 100%;
    background: transparent;
    color: var(--black);
    background: var(--white);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 11px 16px;
    outline: none;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

.form-control:focus {
    border-color: var(--theme-color);
}

input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
textarea:focus,
.input-text:focus {
    background-color: var(--white);
}

textarea {
    resize: none;
}

form .row {
    margin: 0 -10px;
}

form .row [class*="col-"] {
    padding: 0 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: inline-block;
    margin: 0 0 10px;
    font-weight: 500;
    line-height: 1;
    color: #000000;
}

sup {
    top: -0.5em;
}

sub,
sup {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    margin-left: 5px;
}

.form-group label sup {
    color: var(--red-color);
    font-size: 14px;
    top: 0;
    margin-left: 2px;
    line-height: 0;
    margin-right: 3px;
}

.required {
    color: var(--red-color);
}

form .submit-btn[type="submit"] {
    background: var(--theme-color);
    color: var(--white);
    border: 0;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    padding: 15px 30px;
    line-height: 1;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

form input.secondary-btn:hover,
form .submit-btn[type="submit"]:hover,
form input.secondary-btn:hover {
    background-color: var(--accent-color);
}

/* ============================================= */
/* !!!!             COMMON  CSS              !!!! */
/* ============================================= */
body.active-menu,
body.no-scroll,
body.menu-no-scroll {
    overflow: hidden;
    position: relative;
}

.pt {
    padding-top: 70px;
}

.pb {
    padding-bottom: 70px;
}

.pt-0 {
    padding-top: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.mb {
    margin-bottom: 70px !important;
}

.mt {
    margin-top: 70px !important;
}

.text-white {
    color: var(--white) !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.m-0 {
    margin: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mb-3 {
    margin-bottom: 30px !important;
}

.mt-3 {
    margin-top: 30px !important;
}

img.icon {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    -o-object-fit: contain;
}

.width-sm {
    max-width: 450px;
    width: 100%;
}

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

.section-title p {
    margin-top: 15px;
}

.section-title .btn {
    margin-top: 20px;
}

.section-title.d-flex {
    gap: 15px;
}

.subtitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    padding: 8px 15px;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    color: var(--theme-color);
    background-color: var(--primary-light);
    border: 1px solid var(--theme-color);
    margin: 0 0 20px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.script-subtitle {
    font-family: var(--third-font);
    font-size: 28px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--theme-color);
    display: block;
    margin-bottom: 10px;
    line-height: 1;
}

.bg-dark {
    background: var(--dark-color) !important;
}

.bg-light {
    background: var(--light-color) !important;
}

.bg-theme {
    background: var(--theme-color) !important;
}

.bg-white {
    background: var(--white) !important;
}

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

.text-theme {
    color: var(--theme-color) !important;
}

.text-black {
    color: var(--black) !important;
}

.text-yellow {
    color: var(--accent-color) !important;
}

.price {
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
    font-family: var(--first-font);
}

.text-color {
    color: var(--text-color);
}

.underline-border {
    border-bottom: 2px solid var(--accent-color);
}

.underline {
    text-decoration: underline !important;
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark .section-title p,
.gradient-dark .section-title p,
.gradient-dark .section-title h1,
.gradient-dark .section-title h2,
.gradient-dark .section-title h3,
.gradient-dark .section-title h4,
.bg-dark-green .section-title p,
.bg-dark-green .section-title h1,
.bg-dark-green .section-title h2,
.bg-dark-green .section-title h3,
.bg-dark-green .section-title h4,
.bg-dark-green .section-title h5 {
    color: var(--white) !important;
}

.flex-slider {
    margin: 0 -15px;
}

.flex-slider .slide {
    padding: 0 15px;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.flex-slider .slide .slide-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}

/******************** overlay css  ********************/
.overlay {
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.overlay.active::after,
.overlay.menu-active::after {
    content: "";
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* swiper css start */
.swiper-free-mode>.swiper-wrapper,
.theme-lang-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}

.swiper-slide {
    height: auto;
}

.swiper-button-prev,
.swiper-button-next {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-color);
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background: var(--theme-color);
}

.swiper.swiper-initialized .swiper-button-prev,
.swiper.swiper-initialized .swiper-button-next {
    display: flex;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: var(--white);
    color: var(--theme-color);
    border-color: var(--theme-color);
}

.swiper-button-next {
    right: 0;
    left: auto;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
}

.swiper-button-prev {
    left: 0;
    right: auto;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    display: none;
}

.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}

.swiper-button-disabled {
    pointer-events: unset !important;
    opacity: .35 !important;
}

.swiper-button-lock {
    display: none !important;
}

.swiper-pagination {
    position: static;
}

.swiper-pagination-bullet {
    height: 9px;
    width: 9px;
}

.swiper-pagination-bullet-active {
    background: var(--theme-color);
}

/******* swiper lightbox css ********/
.swiper-lightbox-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.swiper-lightbox-slider {
    width: 100%;
    height: 100%;
}

.swiper-lightbox-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
}

.swiper-lightbox-image-wrapper {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    border-radius: 4px;
}

.swiper-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10001;
    background: transparent !important;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.swiper-lightbox-close svg {
    width: 25px;
    height: 25px;
    fill: var(--white);
    transition: transform 0.2s ease;
}

.swiper-lightbox-prev {
    left: 15px;
}

.swiper-lightbox-next {
    right: 15px;
}

.swiper-lightbox-prev,
.swiper-lightbox-next {
    color: var(--white) !important;
    z-index: 10001;
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
}

.swiper-lightbox-prev::after,
.swiper-lightbox-next::after {
    display: block;
    font-size: 18px !important;
    font-weight: 500;
}

.swiper-lightbox-prev:hover,
.swiper-lightbox-next:hover {
    color: var(--black) !important;
}

/* swiper css end */

/* HEADER CSS START */
.wdo-header {
    position: sticky;
    top: 0;
    z-index: 99;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.wdo-header.scrolled {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    animation: headerScroll .3s linear;
    -webkit-animation: headerScroll .3s linear;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

@keyframes headerScroll {
    0% {
        transform: translateY(-20rem);
        -webkit-transform: translateY(-20rem);
    }

    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

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

/* Logo */
.wdo-header .header-logo {
    flex-shrink: 0;
    max-width: 200px;
}

.wdo-header .header-logo a {
    display: flex;
    align-items: center;
}

.wdo-header .header-logo img {
    height: auto;
    width: 100%;
}

/* Navigation */
.wdo-header .header-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wdo-header .header-nav>ul {
    display: flex;
    align-items: center;
    gap: 20px;
}

.wdo-header .header-nav>ul>li {
    position: relative;
}

.wdo-header .header-nav>ul>li>a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 26px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--black);
    transition: color 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
}

.wdo-header .header-nav>ul>li>a svg.chevron-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.wdo-header .header-nav>ul>li:hover>a,
.wdo-header .header-nav>ul>li.active>a {
    color: var(--theme-color);
}

.wdo-header .header-nav>ul>li:hover>a svg.chevron-icon {
    transform: rotate(180deg);
}

.wdo-header .header-nav>ul>li>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    width: 0;
    background: var(--theme-color);
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease-in-out;
}

.wdo-header .header-nav>ul>li:hover>a::after {
    width: 100%;
}

/* Regular Dropdown */
.wdo-header .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    list-style: none;
    margin: 0;
    z-index: 100;
}

.wdo-header .header-nav>ul>li:hover>.nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mega Menu - Products */
.wdo-header .mega-menu {
    position: fixed;
    top: auto;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 95%;
    max-width: 850px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    -webkit-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.wdo-header .header-nav>ul>li:hover>.mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.wdo-header .mega-menu .mega-menu-col {
    padding: 20px;
}

.wdo-header .mega-menu .mega-menu-col:not(:last-of-type) {
    border-right: 1px solid var(--border-color);
}

.wdo-header .mega-cat-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-color);
    margin-bottom: 15px;
    display: block;
    text-transform: none;
}

.wdo-header .header-nav li .mega-menu a,
.wdo-header .header-nav li .nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
    transition: all 0.3s ease;
    text-decoration: none;
}

.wdo-header .header-nav li .mega-menu a:hover,
.wdo-header .header-nav li .nav-dropdown a:hover {
    color: var(--theme-color);
}

/* mega-menu discount badge css start */
.mega-menu-discount-badge {
    position: relative;
    background: linear-gradient(135deg, #f5a523 0%, #f88445 100%);
    color: var(--white) !important;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    animation: badgeBlink 1.8s infinite ease-in-out;
}

.mega-menu-discount-badge:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.5s ease;
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -ms-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
    animation: shimmer-infinite 4s ease-in-out infinite;
    -webkit-animation: shimmer-infinite 4s ease-in-out infinite;
}

.wdo-header .header-nav li a:hover .mega-menu-discount-badge {
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--primary-dark) 100%);
}

@keyframes badgeBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* highlight bundle promo item css start */

.wdo-header .header-nav li a.menu-item-bundle-promo .bundle-highlight,
.wdo-mobile-drawer .drawer-nav .drawer-sub-menu li a.menu-item-bundle-promo .bundle-highlight {
    background: linear-gradient(270deg, var(--accent-dark) 0%, var(--accent-color) 50%, var(--accent-dark) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    animation: textGradientShift 3s linear infinite;
}

.wdo-header .header-nav li a.menu-item-bundle-promo:hover .bundle-highlight,
.wdo-mobile-drawer .drawer-nav .drawer-sub-menu li a.menu-item-bundle-promo:hover .bundle-highlight {
    background: linear-gradient(270deg, var(--theme-color) 0%, var(--primary-dark) 50%, var(--theme-color) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wdo-header .header-nav li a.menu-item-bundle-promo .menu-icon {
    background: var(--accent-light);
    color: var(--accent-color);
    border-color: rgba(245, 158, 11, 0.35);
}

.wdo-header .header-nav li a.menu-item-bundle-promo:hover .menu-icon {
    background: var(--primary-light);
    color: var(--theme-color);
    border-color: rgba(16, 183, 127, 0.35);
}

@keyframes textGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* highlight bundle promo item css end */
/* mega-menu discount badge css end */

.wdo-header .header-nav ul li a .menu-icon {
    width: 32px;
    height: 32px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: var(--black);
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.wdo-header .header-nav li a .menu-icon svg {
    height: 100%;
    width: 100%;
    transition: all 0.3s ease-in-out;
}

.wdo-header .header-nav li a:hover .menu-icon {
    color: var(--theme-color);
}

.wdo-header .header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.wdo-header .header-cart {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--black) !important;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.wdo-header .header-cart:hover {
    color: var(--theme-color);
}

.wdo-header .header-cart svg {
    width: 24px;
    height: 24px;
}

.wdo-header .header-cart .woocommerce-Price-amount.amount {
    display: none;
}

.wdo-header .cart-count {
    position: absolute;
    top: 6px;
    right: -3px;
    min-width: 17px;
    min-height: 17px;
    background: var(--red-color);
    color: var(--white);
    font-size: 11px !important;
    font-weight: 500 !important;
    border-radius: 9999px;
    padding: 3px;
    text-align: center;
    line-height: 1;
    opacity: 1 !important;
}

.wdo-header .header-account {
    position: relative;
}

.wdo-header .header-account-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    background: var(--white);
    cursor: pointer;
    transition: all 0.3s ease;
}

.wdo-header .header-account-btn:hover {
    border-color: var(--theme-color);
    box-shadow: 0 2px 8px rgba(16, 183, 127, 0.12);
}

.wdo-header .header-account-btn .account-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
}

.wdo-header .header-account-btn .account-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
}

.wdo-header .header-account-btn svg.chevron-icon {
    width: 14px;
    height: 14px;
    color: var(--text-color);
    display: inline-block;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.wdo-header .header-account:hover .header-account-btn svg.chevron-icon {
    transform: rotate(180deg);
}

.wdo-header .account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    list-style: none;
    margin: 0;
    z-index: 100;
}

.wdo-header .header-account:hover .account-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wdo-header .account-dropdown li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
    border-radius: 10px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.wdo-header .account-dropdown li a:hover {
    background: var(--primary-light);
    color: var(--theme-color);
}

.wdo-header .account-dropdown li a svg {
    width: 18px;
    height: 18px;
    color: var(--text-color);
}

.wdo-header .account-dropdown li a:hover svg {
    color: var(--theme-color);
}

.wdo-header .account-dropdown .dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 0;
}

.wdo-header .account-dropdown .dropdown-logout a {
    color: var(--red-color);
}

.wdo-header .account-dropdown .dropdown-logout a:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--red-color);
}

.wdo-header .account-dropdown .dropdown-logout a svg {
    color: var(--red-color) !important;
}

.wdo-header .mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--black);
    background: var(--white);
    cursor: pointer;
    color: var(--black);
    transition: all 0.3s ease-in-out;
    padding: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.wdo-header .mobile-menu-toggle:hover {
    border-color: var(--theme-color);
    color: var(--theme-color);
}

.wdo-header .mobile-menu-toggle svg {
    width: 20px;
    height: 20px;
}

.wdo-mobile-drawer {
    display: block;
}

.wdo-mobile-drawer {
    display: none;
}

/* header css end */

/*************************** FOOTER COMPONENT CSS START ***************************/
.wdo-footer {
    background: #fafafa;
    color: var(--text-color);
    overflow: hidden;
    border-top: 1px solid var(--border-color);
}

.wdo-footer-main {
    padding: 70px 0 40px;
}

.wdo-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr 0.9fr 1.03fr;
    gap: 40px;
}

.wdo-footer .footer-brand-col .footer-logo {
    max-width: 200px;
    margin: 0 0 20px;
}

.wdo-footer .footer-brand-col .footer-logo img {
    width: 100%;
    height: auto;
}

.wdo-footer .footer-brand-col .footer-desc {
    margin: 0 0 15px;
}

.wdo-footer .ai-icon-wrp p {
    color: var(--black);
    font-weight: 600;
    margin: 0 0 15px;
}

.wdo-footer .ai-icon-wrp .ai-icons {
    margin: 0 0 30px;
}

.wdo-footer .ai-icon-wrp .ai-icons a {
    height: 42px;
    width: 42px;
}

.wdo-footer .footer-social li a:hover {
    transform: translateY(-2px);
}

.wdo-footer .footer-cta-btns {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wdo-footer .footer-links-col .footer-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 24px;
    position: relative;
    padding: 0 0 12px;
}

.wdo-footer .footer-links-col .footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--theme-color);
    border-radius: 2px;
}

.wdo-footer .footer-links-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wdo-footer .footer-links-col ul li {
    display: flex;
    margin: 0 0 8px;
}

.wdo-footer .footer-links-col ul li:last-child {
    margin: 0;
}

.wdo-footer .footer-links-col ul li a {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.wdo-footer .footer-links-col ul li a:hover {
    gap: 5px;
    color: var(--theme-color);
}

.wdo-footer .footer-links-col ul li a::before {
    content: '';
    width: 0;
    height: 1px;
    background: var(--theme-color);
    transition: width 0.3s ease-in-out;
}

.wdo-footer .footer-links-col ul li a:hover::before {
    width: 8px;
}

.wdo-footer .footer-badges-col .footer-heading {
    font-size: 16px;
    color: var(--black);
    margin: 0 0 24px;
    position: relative;
    padding: 0 0 12px;
}

.wdo-footer .footer-badges-col .footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--theme-color);
    border-radius: 2px;
}

.wdo-footer .envato-exclusive-text {
    font-weight: 600;
    color: var(--black);
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wdo-footer .envato-exclusive-text svg {
    width: 18px;
    height: 18px;
    color: var(--theme-color);
    flex-shrink: 0;
}

.wdo-footer .badge-item {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    transition: all 0.3s ease;
    cursor: default;
}

.wdo-footer .badge-item:hover {
    border-color: var(--theme-color);
    box-shadow: 0 4px 12px rgba(16, 183, 127, 0.12);
    transform: translateY(-2px);
}

.wdo-footer .badge-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wdo-footer-bottom {
    padding: 15px 0;
    border-top: 1px solid var(--border-color);
}

.wdo-footer-bottom .copyright-text {
    text-align: center;
}

.wdo-footer-bottom .copyright-text a {
    color: var(--theme-color) !important;
    font-weight: 600;
}

.wdo-footer .payment-support .payment-wrp img {
    height: 15px;
    width: auto;
}

.wdo-footer .payment-support p {
    font-size: 14px;
    color: var(--black);
    font-weight: 500;
}

/*************************** FOOTER COMPONENT CSS END ***************************/

/* HERO SECTION CSS START */
.light-bg {
    background-color: var(--light-color);
}

.wdo-hero-sec {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg,
            var(--primary-light) 0%,
            #E8F2F6 15%,
            #F1F7FA 35%,
            #F8FBFC 55%,
            #f9f9f9 80%);
}

.wdo-hero-sec .hero-txt {
    position: absolute;
    right: 80px;
    top: 23%;
    z-index: -1;
}

.wdo-hero-sec .hero-vertical-lines {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    gap: 20px;
    height: auto;
    width: 1230px;
}

.wdo-hero-sec .hero-vertical-lines .hero-vline {
    width: 70px;
    background: linear-gradient(to bottom,
            rgba(13, 107, 142, 0.08),
            transparent);
}

.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-child(1),
.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-last-child(1) {
    height: 500px;
}

.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-child(2),
.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-last-child(2) {
    height: 480px;
}

.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-child(3),
.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-last-child(3) {
    height: 460px;
}

.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-child(4),
.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-last-child(4) {
    height: 440px;
}

.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-child(5),
.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-last-child(5) {
    height: 420px;
}

.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-child(6),
.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-last-child(6) {
    height: 400px;
}

.wdo-hero-sec .hero-vertical-lines .hero-vline:nth-child(7) {
    height: 380px;
}

.wdo-hero-sec .hero-word-rotator {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 1.15em;
    vertical-align: bottom;
    text-align: left;
}

.wdo-hero-sec .hero-word {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--theme-color), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.6s ease, opacity 0.4s ease;
}

.wdo-hero-sec .hero-word.active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
}

.wdo-hero-sec .hero-word.out {
    opacity: 0;
    transform: translateY(-110%);
}

.hero-search-wrapper {
    margin: 0 0 30px;
}

.wdo-hero-sec .hero-search-bar {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 60px;
    padding: 6px 6px 6px 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.wdo-hero-sec .hero-search-bar:hover {
    border-color: rgba(100, 100, 100, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.wdo-hero-sec .hero-search-bar:focus-within {
    border-color: var(--theme-color);
}

.wdo-hero-sec .hero-search-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color 0.3s ease-in-out;
}

.wdo-hero-sec .hero-search-icon svg {
    height: 20px;
    width: 20px;
}

.wdo-hero-sec .hero-search-bar:focus-within .hero-search-icon {
    color: var(--theme-color);
}

.wdo-hero-sec .hero-search-bar .form-control {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 0;
}

.wdo-hero-sec .search-tag-label {
    font-size: 13px;
    font-weight: 500;
}

.wdo-hero-sec .hero-search-tag {
    line-height: 1;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-weight: 500;
}

.wdo-hero-sec .hero-search-tag:hover {
    background: var(--primary-light);
    color: var(--theme-color);
    border-color: var(--theme-color);
}

.wdo-hero-sec .wdo-hero-content {
    margin: 0 0 60px;
}

.bundle-announce-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    padding: 6px 10px 6px 6px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border-radius: 9999px;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    -ms-border-radius: 9999px;
    -o-border-radius: 9999px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-announce-badge:hover {
    border-color: var(--theme-color);
    box-shadow: 0 10px 25px rgba(16, 183, 127, 0.08);
    transform: translateY(-2px);
}

.bundle-announce-badge .announce-badge-tag {
    position: relative;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
    border-radius: 9999px;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    -ms-border-radius: 9999px;
    -o-border-radius: 9999px;
}

.bundle-announce-badge .announce-badge-tag::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: shimmer-badge 3s infinite;
    -webkit-animation: shimmer-badge 3s infinite;
}

.bundle-announce-badge .announce-badge-text {
    flex: 1;
    font-weight: 500;
    color: var(--black);
}

.bundle-announce-badge .announce-badge-arrow {
    height: 16px;
    width: 16px;
    margin-left: -5px;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-announce-badge:hover .announce-badge-arrow {
    color: var(--theme-color);
    transform: translateX(3px);
}

.marketplace-sec .bundle-announce-badge {
    padding: 8px 15px;
}

.woocommerce-shop .bundle-announce-badge {
    margin: 0 auto 30px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.woocommerce-shop .bundle-announce-badge .announce-badge-tag {
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.woocommerce-shop .bundle-announce-badge del {
    margin: 0 4px;
}

.wdo-hero-sec .wdo-hero-content .section-title {
    max-width: 920px;
}

.wdo-hero-sec .wdo-hero-bottom {
    background-color: var(--white);
    border-radius: 20px;
    padding: 15px 30px 15px 15px;
    display: flex;
    gap: 40px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.wdo-hero-sec .wdo-hero-promo {
    max-width: 400px;
    width: 100%;
    padding: 40px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    text-align: center;
    background: linear-gradient(145deg, var(--theme-color) 0%, var(--primary-dark) 60%, var(--dark-color) 100%);
}

.wdo-hero-sec .wdo-hero-promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: -1;
}

.wdo-hero-sec .promo-badge {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--white);
    backdrop-filter: blur(10px);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 107, 142, 0.2);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(13, 107, 142, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(13, 107, 142, 0);
    }
}

.wdo-hero-sec .promo-sparkle {
    position: absolute;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    animation: sparkleFloat 3s ease-in-out infinite;
    z-index: 2;
}

.wdo-hero-sec .promo-sparkle-1 {
    top: 25px;
    right: 30px;
    animation-delay: 0s;
}

.wdo-hero-sec .promo-sparkle-2 {
    bottom: 40%;
    right: 20px;
    font-size: 10px;
    animation-delay: 1s;
}

.wdo-hero-sec .promo-sparkle-3 {
    top: 50%;
    left: 15px;
    font-size: 18px;
    animation-delay: 2s;
}

@keyframes sparkleFloat {

    0%,
    100% {
        opacity: 0.3;
        transform: translateY(0) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateY(-8px) scale(1.2);
    }
}

.wdo-hero-sec .promo-title {
    color: var(--white);
    margin: 0 0 12px;
}

.wdo-hero-sec .promo-desc {
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 25px;
}

.wdo-hero-sec .products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 0 0 20px;
    padding: 10px 0 20px;
    border-bottom: 1px dashed var(--border-color);
}

.wdo-hero-sec .products-label,
.wdo-hero-sec .products-all-link {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.wdo-hero-sec .products-all-link {
    gap: 4px;
    color: var(--theme-color);
    transition: all 0.3s ease-in-out;
}

.wdo-hero-sec .products-all-link:hover {
    color: var(--primary-dark);
}

.wdo-hero-sec .products-all-link svg {
    height: 18px;
    width: 18px;
    margin: 0 0 1px;
    transition: transform 0.3s ease-in-out;
}

.wdo-hero-sec .products-all-link:hover svg {
    transform: translateX(3px);
}

.wdo-hero-sec .products-grid {
    gap: 0 30px;
}

.wdo-hero-sec .products-grid .product-item {
    max-width: calc(33.333% - 20px);
}

.wdo-hero-sec .product-item .product-info h3 {
    display: inline-block;
    margin: 0 0 10px;
    border-bottom: 1px dashed transparent;
    transition: all 0.3s ease-in-out;
}

.wdo-hero-sec .product-item:hover .product-info h3 {
    color: var(--theme-color);
    border-color: var(--theme-color);
}

.wdo-hero-sec .product-item .product-info p {
    line-height: 1.3;
    font-size: 14px;
}

.wdo-hero-sec .product-item:nth-child(odd) .product-icon {
    color: var(--theme-color);
}

.wdo-hero-sec .product-item:nth-child(even) .product-icon {
    color: var(--accent-color);
}

.wdo-hero-sec .product-item .product-icon {
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.wdo-hero-sec .product-icon svg {
    height: 26px;
    width: 26px;
    margin: 2px 0 0;
}

.wdo-hero-sec .product-item:hover .product-icon {
    transform: scale(1.08);
}

.wdo-hero-sec .products-header {
    padding: 0 0 15px;
}

.wdo-hero-sec .products-bottom {
    display: none;
    margin: 20px 0 0;
    padding: 15px 0 0;
    border-top: 1px dashed var(--border-color);
}

.wdo-hero-sec form {
    position: relative;
}

.wdo-hero-sec .workdo-banner-search-suggestions {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    top: 58px;
    max-height: 175px;
}

/* HERO SECTION CSS END */
/* SERVICES SECTION START */
.service-slider {
    padding: 20px 10px;
    margin: -20px -10px;
}

.services-sec .service-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    height: 100%;
}

.services-sec .service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
    border-color: var(--theme-color);
}

.services-sec .service-card-img {
    position: relative;
    padding-top: 60%;
    width: 100%;
    overflow: hidden;
    background: var(--light-color);
}

.services-sec .service-card-img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}

.services-sec .service-card:hover .service-card-img img {
    transform: scale(1.1);
}

.services-sec .service-card-content {
    padding: 30px;
}

.services-sec .service-card-content h3 {
    margin: 0 0 12px;
}

.services-sec .service-card-content p {
    margin: 0 0 20px;
}

.services-sec .service-card-content .btn {
    padding: 11px 16px;
}

/* SERVICES SECTION END */
/* addon-sec css start */
.addon-sec .section-title {
    z-index: 1;
}

.addon-sec .all-addon-grid {
    position: relative;
    display: grid;
    grid-template-rows: repeat(9, 1fr);
    grid-template-columns: repeat(10, 1fr);
    justify-content: center;
    max-inline-size: 1381px;
    margin: -70px auto auto;
    margin-block-end: -60px;
    mask-image: linear-gradient(90deg, transparent 2%, rgb(217, 217, 217) 10%, rgb(217, 217, 217) 90%, transparent 98%), linear-gradient(180deg, transparent 5%, rgb(217, 217, 217) 15%, rgb(217, 217, 217) 85%, transparent 95%);
    -webkit-mask-composite: source-in, xor;
}

.addon-sec .all-addon-grid .addon-grid-item.empty-item {
    pointer-events: none;
}

.addon-sec .all-addon-grid .addon-grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 109px;
    width: 120px;
    padding: 10px;
    border-radius: 0;
    background: var(--white);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    -webkit-border-start: 1px solid rgba(0, 0, 0, 0);
    border-inline-start: 1px solid rgba(0, 0, 0, 0);
    -webkit-border-before: 1px solid rgba(0, 0, 0, 0);
    border-block-start: 1px solid rgba(0, 0, 0, 0);
    -webkit-border-end: 1px solid var(--border-color);
    border-inline-end: 1px solid var(--border-color);
    -webkit-border-after: 1px solid var(--border-color);
    border-block-end: 1px solid var(--border-color);
}

.addon-sec .all-addon-grid .addon-grid-item:hover {
    z-index: 1;
    border: 1px solid var(--black);
    color: var(--black);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.06);
}

.addon-sec .all-addon-grid .addon-grid-item .addon-name {
    font-size: 14px;
    margin: 10px 0 0;
    font-weight: 500;
    line-height: 1.1;
}

.addon-sec .all-addon-grid .addon-category-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 15px;
    color: var(--black);
    transition: all 0.3s ease-in-out;
    border-inline-end: 1px solid var(--border-color);
    border-block-end: 1px solid var(--border-color);
}

.addon-sec .all-addon-grid .addon-category-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.addon-sec .all-addon-grid .addon-category-card.first:before {
    background: radial-gradient(circle at top center, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
}

.addon-sec .all-addon-grid .addon-category-card.second:before {
    background: radial-gradient(circle at top center, rgba(16, 183, 127, 0.1) 0%, transparent 70%);
}

.addon-sec .all-addon-grid .addon-category-card.third:before {
    background: radial-gradient(circle at top center, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
}

.addon-sec .all-addon-grid .addon-category-card.fourth:before {
    background: radial-gradient(circle at top center, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
}

.addon-sec .all-addon-grid .addon-category-card.fifth:before {
    background: radial-gradient(circle at top center, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
}

.addon-sec .all-addon-grid .addon-category-card img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
}

.addon-sec .all-addon-grid .addon-category-card:hover {
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.06);
}

.addon-sec .all-addon-grid .addon-category-card .view-all-link {
    font-size: 12px;
    padding: 8px 12px;
}

.addon-sec .all-addon-grid .addon-category-card .card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.addon-sec .all-addon-grid .addon-category-card .category-icon {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-shrink: 0;
    color: var(--white);
    border-radius: 6px;
}

.addon-sec .all-addon-grid .addon-category-card.first .category-icon {
    background-color: #0ea5e9;
}

.addon-sec .all-addon-grid .addon-category-card.second .category-icon {
    background-color: #10b981;
}

.addon-sec .all-addon-grid .addon-category-card.third .category-icon {
    background-color: #f59e0b;
}

.addon-sec .all-addon-grid .addon-category-card.fourth .category-icon {
    background-color: #8b5cf6;
}

.addon-sec .all-addon-grid .addon-category-card.fifth .category-icon {
    background-color: #ec4899;
}

.addon-sec .all-addon-grid .addon-category-card .category-icon svg {
    height: 16px;
    width: 16px;
}

.addon-sec .all-addon-grid .addon-category-card .category-name {
    width: fit-content;
    font-size: 16px;
}

.addon-sec .all-addon-grid .addon-category-card.first {
    grid-row: span 1;
    grid-column: span 4;
    z-index: 3;
}

.addon-sec .all-addon-grid .addon-item.dash .addon-icon {
    color: #38bdf8;
}

.addon-sec .all-addon-grid .addon-item.ecommercego .addon-icon {
    color: #34d399;
}

.addon-sec .all-addon-grid .addon-item.bookinggo .addon-icon {
    color: #fbbf24;
}

.addon-sec .all-addon-grid .addon-item.vcard .addon-icon {
    color: #a78bfa;
}

.addon-sec .all-addon-grid .addon-item.ticketgo .addon-icon {
    color: #f472b6;
}

.addon-sec .all-addon-grid .addon-category-card.second {
    grid-row: span 2;
    grid-column: span 2;
    z-index: 2;
}

.addon-sec .all-addon-grid .addon-category-card.third {
    grid-row: span 2;
    grid-column: span 2;
    z-index: 2;
}

.addon-sec .all-addon-grid .addon-category-card.fourth {
    grid-row: span 2;
    grid-column: span 2;
    z-index: 1;
}

.addon-sec .all-addon-grid .addon-category-card.fifth {
    grid-row: span 2;
    grid-column: span 2;
    z-index: 1;
}

/* ADD-ON MARKETPLACE SECTION START */
.marketplace-sec .script-subtitle {
    margin: 0 0 15px;
}

.marketplace-sec .tabs-row,
.dash-addon-sec .tabs-row {
    margin: 0 auto 50px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    max-width: fit-content;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.marketplace-sec ul.tabs,
.dash-addon-sec .tabs-row ul.tabs {
    background: var(--white);
    overflow-x: auto;
    padding: 8px;
    gap: 8px;
}

.marketplace-sec ul.tabs li,
.dash-addon-sec .tabs-row ul.tabs li {
    flex-shrink: 0;
}

.marketplace-sec ul.tabs li a,
.dash-addon-sec .tabs-row ul.tabs li a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 15px;
    color: var(--black);
    line-height: 1;
    white-space: nowrap;
    border-bottom: none;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.marketplace-sec ul.tabs li a svg,
.dash-addon-sec .tabs-row ul.tabs li a svg {
    height: 18px;
    width: 18px;
}

.marketplace-sec ul.tabs li a:hover,
.dash-addon-sec .tabs-row ul.tabs li a:hover {
    color: var(--theme-color);
}

.marketplace-sec ul.tabs li.active a,
.dash-addon-sec .tabs-row ul.tabs li.active a {
    color: var(--white);
    background: var(--theme-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.dash-addon-sec .tabs-row ul.tabs li.more-link-tab a {
    color: var(--theme-color) !important;
    text-decoration: underline !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dash-addon-sec .tabs-row ul.tabs li.more-link-tab a:hover {
    color: var(--black) !important;
    text-decoration: none !important;
    background: transparent !important;
}

.marketplace-sec .tab-content-inner {
    gap: 30px;
}

.marketplace-sec .tab-content-info {
    max-width: 47%;
    width: 100%;
}

.marketplace-sec .tab-content-info .section-title h3 {
    max-width: 450px;
    width: 100%;
}

.marketplace-sec .addon-slider-wrp {
    flex: 1;
    min-width: 0;
}

.marketplace-sec .marketplace-points li {
    color: var(--black);
    font-weight: 500;
}

/* product card css */
.swiper .product-card-col {
    width: 100% !important;
    height: 100%;
}

.product-card {
    padding: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
    height: 100%;
}

.product-card:hover {
    border-color: var(--accent-color);
}

.product-card .product-card-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.product-card .product-card-img {
    position: relative;
    overflow: hidden;
    padding-top: 70%;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.product-card .product-card-img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.product-card .product-card-img .addon-sale-tag {
    position: absolute;
    top: 10px;
    right: 0;
    background: var(--red-color);
    color: var(--white);
    padding: 5px 10px;
    border-radius: 4px 0 0 4px;
    font-size: 12px;
    font-weight: 600;
}

.product-card .product-card-content {
    padding: 10px 0 0;
}

.product-card .addon-category {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-color);
    letter-spacing: 0.4px;
    margin: 0 0 10px;
}

.product-card .addon-name {
    color: var(--black);
    margin: 0 0 15px;
}

.product-card .addon-name>a {
    font-family: var(--first-font);
}

.product-card .addon-rating {
    font-size: 16px;
    color: var(--black);
    font-weight: 500;
}

.workdo-star-rating {
    gap: 2px;
}

.product-card .rating-wrp .review-count {
    font-size: 15px;
}

.product-card .addon-rating .stars svg {
    height: 14px;
    width: 14px;
}

.product-card .product-card-footer {
    padding: 15px 0 0;
    margin: 20px 0 0;
    border-top: 1px dashed var(--border-color);
}

.product-card .product-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.product-card .product-card-price .addon-price-old {
    font-size: 14px;
    color: var(--text-color);
    text-decoration: line-through;
    font-weight: 500;
}

.product-card .product-card-price .addon-price-new {
    font-size: 24px;
    font-weight: 600;
    color: var(--black);
}

.product-card .product-card-footer .btn {
    padding: 10px 16px;
}

.product-card .addon-price-new del {
    font-size: 20px;
    font-weight: 500;
    opacity: 1;
}

.product-card .addon-price-new ins {
    margin-left: 3px;
}

.product-card .product-card-image .hoverable-btn {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
}

.product-card .product-card-image .hoverable-btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(21, 97, 72, 0.87);
}

.product-card .product-card-image:hover .hoverable-btn {
    opacity: 1;
    visibility: visible;
}

.product-card .product-card-image .hoverable-btn a {
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    font-size: 13px;
    padding: 10px;
    width: 70px;
    height: 70px;
    font-weight: 500;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.product-card .product-card-image .hoverable-btn a svg {
    width: 25px;
    height: 25px;
    display: block;
    margin: 0 auto 5px;
}

.filter-right-column .hoverable-btn a:hover {
    background: rgba(16, 183, 127, 0.3);
}

.product-card .product-card-image .hoverable-btn a:not(:last-of-type) {
    margin-right: 15px;
}

/* ADD-ON MARKETPLACE SECTION END */

/* JOIN WORKDO SECTION START */
.achievement-sec .stats-grid {
    margin-bottom: 40px;
}

.achievement-sec .stat-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    border-radius: 15px;
    background: var(--white);
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
}

.achievement-sec .stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color);
}

.achievement-sec .stat-card .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    flex-shrink: 0;
}

.achievement-sec .stat-card .stat-icon svg {
    width: 32px;
    height: 32px;
}

.achievement-sec .stat-card .stat-info span {
    margin: 0 0 5px;
}

.achievement-sec .stat-card .stat-info p {
    font-weight: 500;
    font-size: 16px;
}

.achievement-sec .stat-card.green-color {
    background: rgba(13, 107, 142, 0.06);
}

.achievement-sec .stat-card.green-color .stat-icon {
    background: rgba(13, 107, 142, 0.12);
    color: var(--theme-color);
}

.achievement-sec .stat-card.blue-color {
    background: rgba(14, 165, 233, 0.06);
}

.achievement-sec .stat-card.blue-color .stat-icon {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}

.achievement-sec .stat-card.orange-color {
    background: rgba(245, 158, 11, 0.06);
}

.achievement-sec .stat-card.orange-color .stat-icon {
    background: rgba(245, 158, 11, 0.12);
    color: var(--accent-color);
}

.achievement-sec .author-stats-grid {
    margin: 40px 0 30px;
}

.achievement-sec .author-card {
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: 100%;
}

.achievement-sec .author-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}

.achievement-sec .author-card .achievement-layer {
    position: absolute;
    top: 0;
    z-index: -1;
}

.achievement-sec .author-card .achievement-layer.layer-1 {
    left: 0;
}

.achievement-sec .author-card .achievement-layer.layer-2 {
    right: 0;
}

.achievement-sec .elite-author .proud-txt {
    margin: -15px 0 10px;
}

.achievement-sec .elite-author .proud-txt p {
    font-family: var(--third-font);
    font-size: 24px;
}

.achievement-sec .elite-author .proud-txt svg {
    margin: 8px 0 0;
    transform: rotate(15deg);
}

.achievement-sec .author-card .author-badge {
    margin-bottom: 20px;
}

.achievement-sec .author-card .author-badge img {
    object-fit: contain;
    max-width: 160px;
    width: 100%;
}

.achievement-sec .author-card .author-info h3 {
    margin-bottom: 15px;
}

.achievement-sec .author-card .author-info p {
    font-weight: 500;
}

.achievement-sec .elite-author {
    background: linear-gradient(135deg, var(--dark-color) 0%, var(--theme-color) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.achievement-sec .top-author {
    background: var(--white);
    border: 2px solid #eac891;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.08);
}

/* JOIN WORKDO SECTION END */

/* GROW WITH WORKDO SECTION START */
.grow-sec {
    background: var(--accent-light);
}

.grow-sec .grow-cards-container {
    max-width: 900px;
}

.grow-sec .grow-top {
    max-width: 250px;
    position: absolute;
    left: 0;
    top: 0;
}

.grow-sec .grow-top img {
    max-width: 130px;
    margin: 20px 0 0 auto;
}

.grow-sec .grow-top h2 {
    color: #343434;
}

.grow-sec .grow-card {
    flex: 1;
    width: 100%;
    padding: 75px 20px 0;
    text-align: center;
    border-top-left-radius: 160px;
    border-top-right-radius: 160px;
    position: relative;
}

.grow-sec .grow-card:first-child {
    z-index: 3;
    background-color: #a9daf0;
}

.grow-sec .grow-card:nth-child(2) {
    z-index: 1;
    margin-left: -20px;
    background-color: #E8F2F6;
}

.grow-sec .grow-card:nth-child(3) {
    margin-left: -20px;
    background-color: #ffdca2;
}

.grow-sec .grow-card h3 {
    margin: 0 0 5px;
}

.grow-sec .grow-card h4 {
    margin: 0 0 10px;
}

.grow-sec .grow-card p {
    color: var(--black);
    font-weight: 500;
}

.grow-sec .grow-card .card-footer svg {
    width: 150px;
    height: 150px;
    margin: 0 auto -50px;
}

.grow-sec .grow-card:first-child .card-footer svg {
    color: #3194c1;
}

.grow-sec .grow-card:nth-child(2) .card-footer svg {
    color: #22a378;
}

.grow-sec .grow-card:nth-child(2) .card-footer svg {
    margin: 60px auto 30px;
}

.grow-sec .grow-card:nth-child(3) .card-footer img {
    margin: 20px auto 0;
    padding: 0 10px;
}

/* GROW WITH WORKDO SECTION END */

/* erpgo-saas hero banner */
.product-hero-sec {
    z-index: 1;
    background-color: #f5f5f5;
    background-image: radial-gradient(rgba(0, 0, 0, 0.04) 2px, transparent 1px);
    background-size: 15px 15px;
    box-shadow: 0 0 0 6px #fff, 0 22px 30px #8c96a91a, 0 7px 6px #8c96a91f;
    border-radius: 0 0 50px 50px;
}

.product-hero-sec.no-radius {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.product-hero-sec .hero-txt {
    position: absolute;
    right: 15px;
    top: 28%;
}

.product-hero-sec:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 90%;
    height: 40%;
    background: radial-gradient(ellipse closest-side,
            #f5f5f5 0%,
            #f5f5f5 15%,
            rgba(245, 245, 245, 0.98) 25%,
            rgba(245, 245, 245, 0.92) 35%,
            rgba(245, 245, 245, 0.82) 45%,
            rgba(245, 245, 245, 0.68) 55%,
            rgba(245, 245, 245, 0.48) 65%,
            rgba(245, 245, 245, 0.28) 75%,
            rgba(245, 245, 245, 0.12) 85%,
            transparent 100%);
    pointer-events: none;
}

.product-hero-sec::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 25%;
    width: 100%;
    z-index: -1;
    background: linear-gradient(to top, rgba(244, 180, 26, 0.25) 0%, transparent 100%);
}

.product-hero-sec .hero-subtitle {
    padding: 6px 16px 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    font-weight: 500;
    margin-bottom: 30px;
    transition: all 0.3s ease-in-out;
}

.product-hero-sec .hero-subtitle .hero-subtitle-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--primary-light);
    color: var(--theme-color);
    animation: pulse 2s infinite;
}

.product-hero-sec .hero-subtitle .hero-subtitle-link {
    text-decoration: underline;
}

.product-hero-sec .hero-subtitle .hero-subtitle-link svg {
    margin: 2px 0 0;
}

.heighlight-btn>svg {
    position: absolute;
    top: -24px;
    left: -24px;
    width: 40px;
    height: 40px;
    color: var(--accent-color);
}

.product-hero-sec .product-hero-content {
    margin: 0 0 60px;
}

.product-hero-sec .section-title {
    margin: 0 auto 40px;
}

.product-hero-sec .section-title h1 span:not(.no-style) {
    position: relative;
    display: inline-block;
    color: var(--black);
    z-index: 1;
    padding: 0 8px;
}

.product-hero-sec .section-title h1 span:not(.no-style)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 40%;
    background: linear-gradient(to right,
            var(--theme-color) 0%,
            rgba(18, 212, 166, 0.6) 50%,
            var(--theme-color) 100%);
    background-size: 200% auto;
    z-index: -1;
    transform: rotate(-1deg);
    border-radius: 6px 12px 4px 10px;
    transition: all 0.3s ease;
    animation: highlightShift 3s ease-in-out infinite alternate;
}

.product-hero-sec .section-title h1:hover span:not(.no-style)::after {
    height: 45%;
    transform: rotate(-0.5deg);
}

@keyframes highlightShift {
    0% {
        background-position: 0% center;
        opacity: 0.8;
    }

    100% {
        background-position: 100% center;
        opacity: 1;
    }
}

.product-hero-sec .right-side-wrapper img {
    height: 100%;
    width: 100%;
}

.section-title h1 span:not(.no-style),
.section-title h2 span:not(.no-style),
.section-title h3 span:not(.no-style) {
    position: relative;
    display: inline-block;
    color: var(--black);
    z-index: 1;
    padding: 0 4px;
}

.section-title h1 span:not(.no-style)::after,
.section-title h2 span:not(.no-style)::after,
.section-title h3 span:not(.no-style)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    height: 38%;
    background-color: var(--highlight-color);
    z-index: -1;
    transform: rotate(-1.2deg);
    border-radius: 4px 8px 3px 12px;
    transition: all 0.3s ease;
}

.section-title h1:hover span::after,
.section-title h2:hover span::after,
.section-title h3:hover span::after {
    height: 45%;
    transform: rotate(-0.5deg);
}

.wdo-hero-sec .section-title p,
.product-hero-sec .section-title p {
    font-weight: 500;
}

.product-hero-sec .product-hero-image img {
    height: auto;
    width: auto;
}

.product-hero-sec .product-hero-image img:not(.no-shadow) {
    border: 2px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
}

/* why-choose-sec css start */
.why-choose-sec .why-card {
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border-color);
    box-shadow: none;
    transition: all 0.3s ease-in-out;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.why-choose-sec .why-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--theme-color);
    transform: translateY(-5px);
}

.why-choose-sec .why-card .icon-box {
    height: 54px;
    width: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 5px;
}

.why-choose-sec .why-card:nth-child(odd) .icon-box {
    background-color: var(--accent-light);
    color: var(--accent-color);
}

.why-choose-sec .why-card:nth-child(even) .icon-box {
    background-color: var(--primary-light);
    color: var(--theme-color);
}

.why-choose-sec .why-card .icon-box svg {
    width: 24px;
    height: 24px;
}

.why-choose-sec .why-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
    margin: 0;
}

.why-choose-sec .why-card p {
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

/* why-choose-sec css end */

/* Problem and Solution Section CSS start */
.problem-solution-sec .subtitle-red {
    color: var(--red-color);
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--red-color);
}

.problem-solution-sec .problem-side {
    padding: 30px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.problem-solution-sec .problem-item {
    padding: 16px 20px;
    background: #FAFAFA;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
}

.problem-solution-sec .problem-item:hover {
    background: #F5F5F5;
    border-color: var(--red-color);
    transform: translateX(-4px);
}

.problem-solution-sec .problem-item .close-icon {
    flex-shrink: 0;
}

.problem-solution-sec .problem-item .problem-name,
.problem-solution-sec .problem-total .total-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
}

.problem-solution-sec .problem-item .problem-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--red-color);
}

.problem-solution-sec .problem-total {
    margin-top: 10px;
    padding: 20px;
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    border: 2px dashed var(--red-color);
    border-radius: 12px;
}

.problem-solution-sec .problem-total .total-price {
    font: var(--h6);
    font-weight: 800;
    color: var(--red-color);
}

.problem-solution-sec .solution-card {
    padding: 40px;
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--primary-dark) 100%);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(16, 183, 127, 0.2);
}

.problem-solution-sec .solution-check {
    margin: 0 auto 20px;
    width: 48px;
    height: 48px;
    position: relative;
    z-index: 1;
}

.problem-solution-sec .solution-title {
    font: var(--h3);
    font-weight: 800;
    color: var(--white);
    margin: 0 0 20px;
}

.problem-solution-sec .solution-card>p {
    font-size: 18px;
}

.problem-solution-sec .solution-price-wrapper {
    margin: 20px 0;
}

.problem-solution-sec .solution-price {
    font: var(--h1);
    color: var(--white);
    margin: 0 0 10px;
}

.problem-solution-sec .solution-price-label {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
}

.golden-badge {
    padding: 10px 20px;
    background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
    border: 1px solid #FCD34D;
    color: #451A03;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.problem-solution-sec .solution-savings {
    margin: 0 0 30px;
}

.problem-solution-sec .solution-btn:hover,
.pricing-sec .pricing-card-featured .btn:hover {
    transform: translateY(-2px);
}

.problem-solution-sec .solution-btn svg {
    transition: all 0.3s ease-in-out;
}

.problem-solution-sec .solution-btn:hover svg {
    transform: translateX(4px);
}

/* Problem and Solution Section CSS end */

/* Industries Section CSS Start */
.industries-sec .industry-inner {
    padding: 40px;
    border-radius: 20px;
    background-color: #f9f8f8;
}

.industries-sec.main-industries .industry-inner {
    padding: 0;
    background-color: transparent;
}

.industries-sec .industries-slider-wrapper {
    position: relative;
    margin-top: 10px;
}

.industries-sec .industries-slider-wrapper .industries-slider-ltr,
.industries-sec .industries-slider-wrapper .industries-slider-rtl {
    padding: 8px 0;
}

.industries-sec .industries-slider-wrapper .industries-slider-rtl {
    margin-top: 10px;
}

.industries-sec .industries-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    z-index: 10;
    pointer-events: none;
}

.industries-sec .industries-shadow-left {
    left: 0;
    background: linear-gradient(to right, #f9f8f8 0%, rgba(249, 248, 248, 0.8) 40%, transparent 100%);
}

.industries-sec .industries-shadow-right {
    right: 0;
    background: linear-gradient(to left, #f9f8f8 0%, rgba(249, 248, 248, 0.8) 40%, transparent 100%);
}

.industries-sec.main-industries .industries-shadow-left {
    background: linear-gradient(to right, var(--white) 0%, rgba(255, 255, 255, 0.8) 40%, transparent 100%);
}

.industries-sec.main-industries .industries-shadow-right {
    background: linear-gradient(to left, var(--white) 0%, rgba(255, 255, 255, 0.8) 40%, transparent 100%);
}

.industries-sec .industry-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 500;
    color: var(--black);
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: default;
    user-select: none;
}

.industries-sec.main-industries .industry-pill {
    background-color: #fafafa;
}

.industries-sec .industry-pill svg {
    flex-shrink: 0;
    color: var(--accent-color);
    transition: all 0.3s ease-in-out;
}

.industries-sec .industry-pill:hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.industries-sec .industry-pill:hover svg {
    color: var(--theme-color);
    transform: scale(1.15);
}

.industries-sec .industries-slider-ltr .swiper-slide,
.industries-sec .industries-slider-rtl .swiper-slide {
    width: auto;
}

/* Industries Section CSS End */

/* business model sec css start */
.business-model-sec .module-card .addon-icon svg {
    height: 26px;
    width: 26px;
}

.business-model-sec .module-card p {
    font-size: 14px;
    margin: 5px 0 0;
}

/* business model sec css end */

/* INTEGRATIONS SECTION CSS START */
.integrations-sec .integrations-slider {
    padding: 20px 0;
    margin: -20px 0;
}

.integrations-sec .integrations-slider:before,
.integrations-sec .integrations-slider:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.integrations-sec .integrations-slider:before {
    left: 0;
    background: linear-gradient(to right, var(--white) 0%, rgba(255, 255, 255, 0.8) 30%, transparent 100%);
}

.integrations-sec .integrations-slider:after {
    right: 0;
    background: linear-gradient(to left, var(--white) 0%, rgba(255, 255, 255, 0.8) 30%, transparent 100%);
}

.integrations-sec.light-bg .integrations-slider:before {
    background: linear-gradient(to right, var(--light-color) 0%, rgba(248, 250, 252, 0.8) 30%, transparent 100%);
}

.integrations-sec.light-bg .integrations-slider:after {
    background: linear-gradient(to left, var(--light-color) 0%, rgba(248, 250, 252, 0.8) 30%, transparent 100%);
}

.integrations-sec .integrations-slider .swiper-slide {
    width: auto;
}

.integrations-sec .integration-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    margin: 0 auto;
    transition: all 0.3s ease-in-out;
}

.integrations-sec .integration-card img {
    max-width: 50px;
    width: 100%;
    height: auto;
    object-fit: scale-down;
}

.integrations-sec .integration-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* INTEGRATIONS SECTION CSS END */

/* White Label Section CSS start */
.white-label-sec .white-label-visual {
    display: block;
    position: relative;
    padding-top: 70%;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    overflow: hidden;
}

.white-label-sec .white-label-visual video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    object-fit: cover;
}

.white-label-sec .white-label-features {
    gap: 15px;
    margin: 0 0 30px;
}

.white-label-sec .feature-item {
    padding: 0;
}

.white-label-sec .feature-icon {
    flex-shrink: 0;
    padding: 3px;
    width: 20px;
    height: 20px;
    background: var(--primary-light);
    border: 1px solid var(--theme-color);
    color: var(--theme-color);
    border-radius: 50%;
}

.white-label-sec .feature-icon svg {
    height: 100%;
    width: 100%;
}

.white-label-sec .feature-title {
    font-size: 16px;
}

/* White Label Section CSS End */

/* payment language section css start */
.payment-language-sec .payment-language-card {
    padding: 0 9.5%;
    border-radius: 15px;
    overflow: hidden;
}

.payment-language-sec .payment-card {
    background-color: #f6f6f7;
}

.payment-language-sec .language-card {
    padding-top: 20px !important;
    background-color: var(--black);
}

.payment-language-sec .payment-card .payment-sliders-wrapper {
    height: 380px;
    overflow: hidden;
    position: relative;
    margin: 0 -8px;
}

.payment-language-sec .payment-card .payment-sliders-wrapper::before,
.payment-language-sec .payment-card .payment-sliders-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 10;
    pointer-events: none;
}

.payment-language-sec .payment-card .payment-sliders-wrapper::before {
    top: 0;
    background: linear-gradient(to bottom, #f6f6f7 0%, rgba(246, 246, 247, 0.8) 40%, transparent 100%);
}

.payment-language-sec .payment-card .payment-sliders-wrapper::after {
    bottom: 0;
    background: linear-gradient(to top, #f6f6f7 0%, rgba(246, 246, 247, 0.8) 40%, transparent 100%);
}

.payment-language-sec .payment-card .payment-slider-ltr,
.payment-language-sec .payment-card .payment-slider-rtl {
    height: 100%;
    margin: 0;
    padding: 0 8px;
    flex: 1;
}

.payment-language-sec .payment-card .payment-slider-ltr .swiper-slide,
.payment-language-sec .payment-card .payment-slider-rtl .swiper-slide {
    height: max-content !important;
}

.payment-language-sec .payment-card .payment-slider-ltr .swiper-wrapper,
.payment-language-sec .payment-card .payment-slider-rtl .swiper-wrapper,
.payment-language-sec .payment-card .payment-slider-rtl .marquee-track {
    flex-direction: column;
}

.payment-language-sec .payment-card .payment-icon-card {
    height: 100px;
    width: 100%;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.payment-language-sec .payment-card .payment-icon-card:hover {
    border-color: var(--theme-color);
}

.payment-language-sec .payment-card .payment-icon-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.payment-language-sec .payment-card .payment-icon-card:hover img {
    transform: scale(1.15);
}

.payment-language-sec .payment-language-content {
    padding: 40px 0;
}

.payment-language-sec .payment-language-content h3 {
    margin: 0 0 15px;
}

.payment-language-sec .payment-language-content p {
    margin: 0 0 20px;
}

/* payment language section css end */

/* Comparison Section CSS Start */
.comparison-sec .comparison-txt {
    position: absolute;
    right: -17%;
    top: -20%;
}

.comparison-sec .comparison-wrapper {
    max-width: 880px;
    margin: 0 auto;
    gap: 30px;
}

.comparison-sec .comparison-vs-badge {
    position: absolute;
    top: 10px;
    left: 48.6%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--white);
    font-weight: 800;
    z-index: 5;
    box-shadow: 0 0 0 6px var(--white), 0 0 0 8px rgba(244, 180, 26, 0.2);
    letter-spacing: 1px;
}

.comparison-sec .comparison-card {
    flex: 1;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--white);
    overflow: hidden;
    transition: all 0.3s ease;
}

.comparison-sec .comparison-card-header {
    padding: 20px 24px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    background: var(--light-color);
}

.comparison-sec .comparison-card-header h3 {
    margin: 0;
}

.comparison-sec .comparison-card-right .comparison-card-header {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.comparison-sec .comparison-card-right .comparison-card-header h3 {
    color: var(--white);
}

.comparison-sec .comparison-card-right {
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--primary-dark) 100%);
    border: 2px solid var(--theme-color);
    box-shadow: 0 20px 60px rgba(16, 183, 127, 0.35),
        0 0 0 1px rgba(16, 183, 127, 0.1);
    transform: scale(1.05);
    margin: 10px;
}

.comparison-sec .comparison-card-right .comparison-item {
    color: var(--white);
}

.comparison-sec .comparison-card-right .comparison-item-positive svg {
    stroke: var(--theme-color);
    background: var(--white);
}

.comparison-sec .comparison-list {
    padding: 24px;
}

.comparison-sec .comparison-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--black);
}

.comparison-sec .comparison-item:not(:last-of-type) {
    border-bottom: 1px dashed var(--border-color);
    padding: 0 0 15px;
}

.comparison-sec .comparison-item svg {
    flex-shrink: 0;
}

.comparison-sec .comparison-item-negative svg {
    stroke: var(--red-color);
    opacity: 0.7;
}

.comparison-sec .comparison-item-positive svg {
    border-radius: 50%;
    padding: 3px;
    width: 22px;
    height: 22px;
}

/* Comparison Section CSS End */

/* Pricing Section CSS Start */
.pricing-sec .pricing-txt {
    position: absolute;
    top: 8%;
    right: 4%;
}

.pricing-sec .pricing-wrapper {
    gap: 30px;
    justify-content: center;
}

.pricing-sec .pricing-card {
    flex: 1;
    max-width: 420px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--white);
    position: relative;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
}

.pricing-sec .pricing-card:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.pricing-sec .pricing-card-header {
    padding: 30px 20px 25px;
}

.pricing-sec .pricing-card-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
}

.pricing-sec .pricing-subtitle {
    font-size: 15px;
    color: var(--text-color);
    margin: 6px 0 0;
}

.pricing-sec .pricing-amount {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 20px 0 0;
}

.pricing-sec .pricing-value {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: var(--black);
}

.pricing-sec .pricing-period {
    font-size: 16px;
    color: var(--text-color);
    font-weight: 500;
}

.pricing-sec .pricing-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pricing-sec .pricing-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--black);
}

.pricing-sec .pricing-feature svg {
    flex-shrink: 0;
    color: var(--theme-color);
    width: 20px;
    height: 20px;
}

.pricing-sec .pricing-feature-negative svg {
    stroke: var(--red-color);
}

.pricing-sec .pricing-card-footer {
    padding: 20px 0 0;
}

.pricing-sec .pricing-card-featured {
    border: 2px solid var(--theme-color);
    box-shadow: 0 10px 30px rgba(16, 183, 127, 0.12);
}

.pricing-sec .pricing-card-featured .pricing-value {
    color: var(--theme-color);
}

.pricing-sec .pricing-card-featured .pricing-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: var(--white);
    padding: 6px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
    z-index: 2;
}

.pricing-sec .pricing-card-featured .pricing-feature svg {
    color: var(--theme-color);
}

/* Pricing Section CSS End */

/* power elite section css start */
.power-elite-sec .power-elite-card {
    position: relative;
    padding: 40px;
    color: var(--white);
    border-radius: 20px;
    background: linear-gradient(135deg, #0e5f39 0%, #359346 100%);
    max-width: 1020px;
    margin: auto;
}

.power-elite-sec .power-elite-card h3 {
    margin: 0 0 15px;
}

.power-elite-sec .power-elite-card p {
    font-size: 18px;
    margin: 0 0 30px;
}

.power-elite-sec .power-elite-card .power-elite-image {
    max-width: 180px;
    margin: 0 40px 0 20px;
}

/* power elite section css end */

/* Testimonial Section CSS Start */
.testimonial-sec {
    background-color: var(--light-gray);
}

.testimonial-sec .testimonial-columns {
    position: relative;
    display: flex;
    justify-content: center;
    height: 450px;
    overflow: hidden;
    gap: 20px;
    padding: 0 10px;
    margin: 0 -10px;
}

.testimonial-sec .testimonial-col {
    flex: 1;
    height: 100%;
}

.testimonial-sec .testimonial-col .swiper-slide {
    height: auto !important;
}

/* Custom CSS Marquee styles for Testimonials */
.testimonial-sec .marquee-track {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: max-content;
    will-change: transform;
}

@keyframes scrollDown {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

.testimonial-slider-down .marquee-track {
    animation: scrollDown 25s linear infinite;
}

.testimonial-slider-up .marquee-track {
    animation: scrollUp 25s linear infinite;
}

/* Pause animations on hover */
.testimonial-sec .testimonial-col:hover .marquee-track {
    animation-play-state: paused;
}

/* CSS Marquee styles for Industries RTL slider (horizontal, left-to-right) */
.industries-slider-rtl {
    overflow: hidden;
}

.industries-slider-rtl .marquee-track {
    display: flex;
    flex-direction: row;
    gap: 15px;
    width: max-content;
    will-change: transform;
    animation: industriesScrollRTL 40s linear infinite;
}

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

    100% {
        transform: translateX(0);
    }
}

/* CSS Marquee styles for Payment RTL slider (vertical, top-to-bottom) */
.payment-slider-rtl {
    overflow: hidden;
}

.payment-slider-rtl .marquee-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: max-content;
    will-change: transform;
    animation: paymentScrollRTL 25s linear infinite;
}

@keyframes paymentScrollRTL {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0);
    }
}

/* CSS Marquee styles for Bio-Link RTL slider (vertical, top-to-bottom) */
.bio-link-slider-rtl {
    overflow: hidden;
}

.bio-link-slider-rtl .marquee-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: max-content;
    will-change: transform;
    animation: bioLinkScrollRTL 40s linear infinite;
}

@keyframes bioLinkScrollRTL {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0);
    }
}

.testimonial-sec .testimonial-card {
    position: relative;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease-in-out;
}

.testimonial-sec .testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.testimonial-sec .testimonial-card .testimonial-content p {
    color: var(--black);
    margin: 0 0 8px;
}

.testimonial-sec .testimonial-card .testimonial-card-top {
    padding: 0 35px 20px 0;
    border-bottom: 1px dashed var(--border-color);
}

.testimonial-sec .testimonial-card .quote-icon {
    position: absolute;
    top: 20px;
    right: 20px;
}

.testimonial-sec .testimonial-card .quote-icon svg {
    width: 40px;
    height: 40px;
}

.testimonial-sec .testimonial-avatar {
    width: 48px;
    height: 48px;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 50%;
}

.testimonial-sec .testimonial-card p {
    margin-top: 20px;
}

/* Testimonial Section CSS End */

/* FAQ Section CSS Start */
.faq-sec .accordion-item {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.faq-sec .accordion-item:not(:last-of-type) {
    margin-bottom: 20px;
}

.faq-sec .accordion-button {
    line-height: 1.3;
    background: transparent;
    padding: 15px 20px;
    font-weight: 700;
    text-align: left;
    font-size: 16px;
    width: 100%;
    font-family: var(--first-font);
}

.faq-sec .accordion-button span {
    color: var(--black);
}

.faq-sec .faq-icon {
    flex-shrink: 0;
}

.faq-sec .faq-icon svg {
    height: 14px;
    width: 14px;
}

.faq-sec .faq-icon svg path,
.faq-sec .faq-icon svg rect {
    fill: var(--theme-color);
}

.faq-sec .accordion-button:not(.collapsed) .plus-icon {
    display: none;
}

.faq-sec .accordion-button:not(.collapsed) .minus-icon {
    display: block;
}

.faq-sec .accordion-button.collapsed .plus-icon {
    display: block;
}

.faq-sec .accordion-button.collapsed .minus-icon {
    display: none;
}

.faq-sec .accordion-body {
    padding: 0 20px 20px 20px;
}

/* FAQ Section CSS End */
/* CTA Section CSS Start */
.cta-sec .cta-wrapper {
    background: linear-gradient(145deg, var(--primary-dark) 0%, var(--theme-color) 100%);
    border-radius: 20px;
    padding: 70px 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.cta-sec .cta-bg-shapes .shape-1 {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    top: -100px;
    left: -100px;
    position: absolute;
}

.cta-sec .cta-bg-shapes .shape-2 {
    width: 450px;
    height: 450px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    bottom: -150px;
    right: -100px;
    position: absolute;
}

.cta-sec h2,
.cta-sec p {
    color: var(--white);
}

.cta-sec p {
    font-size: 16px;
}

.cta-sec .btn-outline {
    color: var(--white) !important;
    border-color: var(--white) !important;
    background: transparent !important;
}

.cta-sec .btn-outline::before {
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
}

.btn-glass {
    border: 1px solid var(--white);
    color: var(--white);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: none !important;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* CTA Section CSS End */

/* MODULES SECTION CSS START */
.modules-sec .modules-main-slider {
    padding: 30px 15px;
    margin: -30px -15px;
}

.modules-sec .modules-main-slider .swiper-slide {
    height: auto !important;
}

.modules-sec .modules-thumb-slider {
    margin: 0 0 20px;
}

.modules-sec .modules-thumb-slider:before,
.modules-sec .modules-thumb-slider:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.modules-sec .modules-thumb-slider:before {
    left: 0;
    background: linear-gradient(to right, var(--white) 0%, rgba(255, 255, 255, 0.8) 30%, transparent 100%);
}

.modules-sec .modules-thumb-slider:after {
    right: 0;
    background: linear-gradient(to left, var(--white) 0%, rgba(255, 255, 255, 0.8) 30%, transparent 100%);
}

.modules-sec .modules-thumb-slider .swiper-slide {
    width: auto;
}

.modules-sec .module-thumb-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: 130px;
    padding: 15px;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid var(--theme-color);
    color: var(--theme-color);
}

.modules-sec .module-thumb-card .module-icon {
    margin: 0 0 15px;
}

.modules-sec .module-thumb-card .module-icon svg {
    width: 28px;
    height: 28px;
}

.modules-sec .module-thumb-card .module-name {
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

.modules-sec .swiper-slide-thumb-active .module-thumb-card {
    background: var(--theme-color);
    color: var(--white);
}

.modules-sec .module-content-card {
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 40px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 20px;
    background-color: var(--light-color);
}

.modules-sec .module-content-card .module-text {
    max-width: 45%;
    width: 100%;
    padding: 0 0 70px;
}

.modules-sec .module-content-card .module-text h3 {
    margin-bottom: 20px;
}

.modules-sec .module-content-card .module-text p {
    font-size: 16px;
    margin-bottom: 20px;
}

.modules-sec .module-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modules-sec .module-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--black);
}

.modules-sec .module-feature-item .feature-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid var(--accent-color);
    border-radius: 50%;
    color: var(--accent-dark);
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
}

.modules-sec .module-feature-item .feature-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.modules-sec .module-content-card .module-image {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.modules-sec .arrow-wrp {
    position: absolute;
    z-index: 1;
    bottom: 70px;
    left: 55px;
}

.modules-sec .module-arrow {
    position: static;
    transform: translate(0);
    margin: 0;
    background-color: var(--white);
    color: var(--black);
    border-color: var(--black);
}

.modules-sec .module-arrow:hover {
    background-color: var(--theme-color);
    color: var(--white);
    border-color: var(--theme-color);
}

/* MODULES SECTION CSS END */

/* CONTACT SECTION CSS START */
.contact-sec {
    background-color: var(--dark-color);
}

.contact-sec .section-title {
    color: var(--white);
}

.contact-sec .section-title h2 {
    color: var(--white);
}

.contact-sec .script-subtitle {
    color: var(--accent-color);
}

.contact-sec .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
}

.contact-sec .contact-action-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 14px;
    padding: 25px;
    background: var(--white);
    border-radius: 16px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.contact-sec .contact-action-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.contact-sec .contact-action-card .action-icon {
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    transition: all 0.3s ease-in-out;
}

.contact-sec .contact-action-card .action-icon svg {
    width: 28px;
    height: 28px;
}

.contact-form-wrapper {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow-md);
}

.contact-form-wrapper .form-header {
    margin: 0 0 25px;
    padding: 0 0 20px;
    border-bottom: 1px dashed var(--border-color);
}

.contact-form-wrapper .form-header h4 {
    font-size: 22px;
}

.contact-form-wrapper .form-control {
    font-weight: 500;
}

.contact-form-wrapper .form-control::placeholder {
    font-weight: 400;
}

.contact-form-wrapper .submit-btn {
    position: relative;
}

.contact-form-wrapper .contact-form-submit br,
.wpcf7-spinner,
.wpcf7-form.submitting .msg-svg,
.contact-form-wrapper .spin-loader {
    display: none;
}

.wpcf7-form.submitting .spin-loader {
    display: block;
}

/* CONTACT SECTION CSS END */

/*************************** vcard page css start ***************************/
/* vcard hero sec css start */
.vcard-hero-sec:before {
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, var(--white) 0%, var(--primary-light) 40%, var(--primary-light) 60%, var(--white) 100%);
}

.vcard-hero-sec:after {
    display: none;
}

.vcard-hero-sec .product-hero-image img {
    width: 100%;
}

/* vcard hero sec css end */

/* vcard-themes-sec css start */
.vcard-themes-slider {
    overflow: hidden;
    padding: 25px 0 0;
}

.vcard-themes-slider::before,
.vcard-themes-slider::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.vcard-themes-slider:before {
    left: 0;
    background: linear-gradient(to right, var(--light-color) 0%, rgba(248, 250, 252, 0.8) 30%, transparent 100%);
}

.vcard-themes-slider:after {
    right: 0;
    background: linear-gradient(to left, var(--light-color) 0%, rgba(248, 250, 252, 0.8) 30%, transparent 100%);
}

.vcard-themes-slider-wrp {
    max-width: 1420px;
    width: 100%;
    margin: 0 auto;
}

.vcard-themes-slider .swiper-wrapper {
    padding: 0 0 40px;
}

.vcard-themes-slider .swiper-slide {
    width: 280px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.vcard-themes-sec .theme-preview-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.vcard-themes-sec .theme-preview-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top;
}

.vcard-themes-sec .vcard-themes-slider .swiper-slide-active .theme-preview-card {
    transform: scale(1.05);
}

.vcard-themes-sec .theme-preview-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 15px 20px;
    background: linear-gradient(to top, var(--black) 0%, var(--black) 10%, transparent 100%);
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    text-align: center;
    letter-spacing: 0.5px;
    margin: 0 4px 4px 4px;
    border-radius: 0 0 50px 50px;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s ease-in-out;
}

.vcard-themes-slider .swiper-slide-active .theme-preview-label {
    opacity: 1;
    transform: translateY(0);
}

.vcard-themes-slider .vcard-themes-pagination {
    position: relative;
    bottom: 0 !important;
    transition: all 0.3s ease-in-out;
}

.vcard-themes-slider .vcard-themes-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--text-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

.vcard-themes-slider .vcard-themes-pagination .swiper-pagination-bullet-active {
    background: var(--theme-color);
}

/* vcard-themes-sec css end */

/* VCARD SHARE SECTION START */
.vcard-share-slider {
    padding: 20px 10px;
    margin: -20px -10px;
}

.vcard-share-sec .share-card {
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--border-color);
    background-color: var(--white);
    box-shadow: var(--shadow-md);
}

.vcard-share-sec .share-card-img {
    position: relative;
    padding-top: 105%;
    display: block;
    background: var(--light-color);
}

.vcard-share-sec .share-card-img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: top;
}

.vcard-share-sec .share-card-content {
    padding: 20px;
    flex: 1;
}

.vcard-share-sec .share-card-content h3 {
    margin-bottom: 15px;
}

.vcard-share-sec .share-card-content p {
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vcard-share-sec .share-card-link {
    color: var(--theme-color);
    font-weight: 500;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease-in-out;
}

.vcard-share-sec .share-card-link:hover {
    gap: 12px;
}

/* VCARD SHARE SECTION END */
/* bio-link-sec css start */
.bio-link-sec .bio-link-wrp {
    padding: 0 60px;
    border-radius: 30px;
    background: var(--black);
    overflow: hidden;
}

.bio-link-sec .bio-link-slider-wrp {
    height: 500px;
    max-width: 480px;
    width: 100%;
    margin: 0 0 0 auto;
    overflow: hidden;
    position: relative;
}

.bio-link-sec .bio-link-content {
    padding: 30px 0;
}

.bio-link-content .section-title h2 {
    margin-bottom: 20px;
}

.subtitle.subtitle-white {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

/* bio-link-sec css end */

/* vcard-feature-sec css start */
.vcard-feature-sec {
    background-color: #fafafa;
}

.vcard-feature-slider {
    padding: 20px 10px;
    margin: -20px -10px;
}

.vcard-feature-sec .feature-card {
    background: linear-gradient(to bottom, #fafafa 0%, #e4e4e4 100%);
    border: 1px solid #d5d5d5;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    position: relative;
    padding: 0 0 165px;
}

.vcard-feature-sec .feature-card:hover {
    border-color: var(--theme-color);
    box-shadow: var(--shadow-lg);
}

.vcard-feature-sec .feature-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: var(--white);
    transition: all 0.5s ease-in-out;
    z-index: 2;
    border-top: 1px solid #d5d5d5;
    border-radius: 20px 20px 0 0;
}

.vcard-feature-sec .feature-card:hover .feature-card-body {
    border-color: var(--theme-color);
}

.vcard-feature-sec .feature-card:hover .feature-card-body {
    bottom: 0;
    overflow-y: auto;
}

.vcard-feature-sec .feature-card-header {
    gap: 12px;
    margin: 0 0 15px;
}

.vcard-feature-sec .feature-card-header h3 {
    flex: 1;
}

.vcard-feature-sec .feature-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vcard-feature-sec .feature-card-icon.green-icon {
    background: var(--primary-light);
    color: var(--theme-color);
}

.vcard-feature-sec .feature-card-icon.orange-icon {
    background: var(--accent-light);
    color: var(--accent-color);
}

.vcard-feature-sec .feature-card-icon.blue-icon {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}


.vcard-feature-sec .feature-card-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
}

.vcard-feature-sec .feature-card:hover .feature-card-arrow {
    transform: rotate(180deg);
    border-color: var(--theme-color);
    color: var(--theme-color);
    background: var(--primary-light);
}

.vcard-feature-sec .feature-card-expand {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.vcard-feature-sec .feature-card:hover .feature-card-expand {
    max-height: 400px;
    opacity: 1;
    margin-top: 20px;
}

.vcard-feature-sec .feature-card-expand>span {
    color: var(--black);
    display: block;
    font-size: 16px;
    margin: 0 0 15px;
}

.vcard-feature-sec .feature-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vcard-feature-sec .feature-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.vcard-feature-sec .feature-checklist li svg {
    flex-shrink: 0;
    color: var(--theme-color);
}

/* vcard-feature-sec css end */
/* vcard process sec css start */
.vcard-process-sec .process-connector-line {
    position: absolute;
    top: 75px;
    left: 16%;
    right: 16%;
    height: 1.5px;
    background: repeating-linear-gradient(to right, var(--theme-color) 0, var(--theme-color) 5px, transparent 5px, transparent 10px);
    z-index: 1;
}

.vcard-process-sec .process-step {
    position: relative;
    padding: 30px 0 0;
}

.vcard-process-sec .process-step::before {
    content: attr(data-step);
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 140px;
    font-weight: 800;
    color: rgba(16, 185, 129, 0.05);
    z-index: 0;
    line-height: 1;
    pointer-events: none;
    transition: all 0.5s ease-in-out;
}

.vcard-process-sec .process-step:hover::before {
    color: rgba(16, 185, 129, 0.1);
    transform: translateX(-50%) translateY(-10px);
}

.vcard-process-sec .process-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--theme-color), var(--primary-dark));
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.1);
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.vcard-process-sec .process-icon svg {
    height: 32px;
    width: 32px;
}

.vcard-process-sec .process-content {
    margin: 25px 0 0;
}

.vcard-process-sec .process-content h3 {
    margin-bottom: 12px;
    transition: color 0.3s ease-in-out;
}

.vcard-process-sec .process-step:hover .process-content h3 {
    color: var(--theme-color);
}

.vcard-process-sec .process-image {
    margin: 30px 0 0;
    border: 1px solid var(--border-color);
    background-color: var(--light-color);
    box-shadow: var(--shadow-md);
    border-radius: 20px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vcard-process-sec .process-step:hover .process-image {
    transform: scale(1.02);
}

.vcard-process-sec .bottom-btn p {
    margin: 15px 0 0;
}

/* vcard process sec css end */

/* vcard theme showcase sec css start */
.vcard-theme-showcase-slider,
.biolink-theme-showcase-slider {
    padding: 20px 10px;
    margin: -20px -10px;
}

.vcard-theme-showcase-sec .tabs-row {
    margin: 0 0 30px;
}

.vcard-theme-showcase-sec ul.tabs {
    background: var(--white);
    padding: 8px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}


.vcard-theme-showcase-sec ul.tabs li a {
    border-radius: 40px;
    padding: 10px 15px;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vcard-theme-showcase-sec ul.tabs li:hover a {
    color: var(--theme-color);
}

.vcard-theme-showcase-sec ul.tabs li.active a {
    background: var(--theme-color);
    color: var(--white);
}

.vcard-theme-showcase-sec .theme-showcase-card {
    background: var(--white);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
}

.vcard-theme-showcase-sec .theme-showcase-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--theme-color);
}

.vcard-theme-showcase-sec .theme-img-wrp {
    background: #f2f2f2;
    border-bottom: 1px solid var(--border-color);
    padding: 15px 15px 0;
    overflow: hidden;
}

.vcard-theme-showcase-sec .theme-img-wrp .theme-img {
    overflow: hidden;
    padding-top: 150%;
    position: relative;
}

.vcard-theme-showcase-sec .theme-img-wrp img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.vcard-theme-showcase-sec .theme-info {
    padding: 15px;
}

.vcard-theme-showcase-sec .theme-info h3 {
    margin-bottom: 10px;
}

.vcard-theme-showcase-sec .theme-info p {
    font-size: 14px;
    margin-bottom: 15px;
    flex: 1;
}

.vcard-theme-showcase-sec .theme-showcase-card .btn {
    padding: 11px 20px;
}

/* vcard theme showcase sec css end */
/* vcard-addon-sec css start */
.vcard-addon-sec {
    background: var(--accent-light);
}

.vcard-addon-sec .addon-grid {
    gap: 20px;
}

.vcard-addon-sec .module-card {
    max-width: calc(20% - 16px);
    width: 100%;
    padding: 15px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    box-shadow: 0 3px 4px -3px hsla(0, 0%, 4%, .05), 0 4px 8px -3px hsla(0, 0%, 4%, .05);
    transition: all 0.3s ease-in-out;
}

.vcard-addon-sec .module-card:hover {
    box-shadow: 0 8px 18px -6px hsla(0, 0%, 4%, .05), 0 24px 42px -4px hsla(0, 0%, 4%, .1);
}

.vcard-addon-sec .module-card .addon-icon {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--white);
    background: linear-gradient(145deg, var(--theme-color) 0%, #0a7d58 60%, #064e38 100%);
    border-radius: 10px;
}

.vcard-addon-sec .module-card span {
    display: block;
    line-height: 1.2;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--black);
}

/* vcard-addon-sec css end */
/*************************** vcard page css end ***************************/

/*************************** dash page css start ***************************/
/* dash hero sec css start */

.dash-hero-sec {
    background-image: linear-gradient(to right, rgba(16, 183, 127, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 183, 127, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
}

.dash-hero-sec::after {
    display: none;
}

.dash-hero-sec .dash-module-showcase {
    max-width: 1600px;
    width: 100%;
    min-height: 370px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.dash-hero-sec .module-image {
    opacity: 0;
    visibility: hidden;
    height: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s;
}

.dash-hero-sec .module-image img {
    width: auto;
    height: auto;
    min-height: 400px;
    object-fit: cover;
    object-position: 35%;
}

.dash-hero-sec .module-image.active {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.dash-hero-sec .module-card {
    position: absolute;
    right: 16%;
    top: -10px;
    padding: 25px 15px;
    border-radius: 16px;
    background: linear-gradient(145deg, var(--theme-color) 0%, #0a7d58 60%, #064e38 100%);
    max-width: 350px;
    width: 100%;
    box-shadow: -8px 2px 40px 0 rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease-in-out;
}

.dash-hero-sec .module-card h4 {
    color: var(--white);
    font-size: 16px;
    margin: 0 0 20px;
}

.dash-hero-sec .module-card .module-box {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: var(--white);
    padding: 8px 8px 12px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.dash-hero-sec .module-card .module-box:hover,
.dash-hero-sec .module-card .module-box.active {
    border-color: var(--theme-color);
    box-shadow: var(--shadow-lg);
}

.custom-checkbox {
    margin: 0 auto 2px 0;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: var(--white);
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-checkbox::after {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(-45deg) scale(0);
    transition: transform 0.2s ease;
    margin-top: -1px;
}

.dash-hero-sec .module-card .module-box.active .custom-checkbox {
    background: var(--theme-color);
    border-color: var(--theme-color);
}

.dash-hero-sec .module-card .module-box.active .custom-checkbox::after {
    transform: rotate(-45deg) scale(1);
}

.dash-hero-sec .module-card .module-box .module-icon {
    margin: 0 0 10px;
}

.dash-hero-sec .module-card .module-box .module-icon svg {
    height: 18px;
    width: 18px;
    transition: all 0.3s ease-in-out;
}

.dash-hero-sec .module-card .module-box:hover .module-icon svg,
.dash-hero-sec .module-card .module-box.active .module-icon svg {
    color: var(--theme-color);
}

.dash-hero-sec .module-card .module-box .module-label {
    color: var(--black);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}


/* dash hero sec css end */
/* industrial solutions sec start */
.industrial-solutions-sec .industry-card {
    max-width: calc(16.66% - 16.66px);
    width: 100%;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 15px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.industrial-solutions-sec .industry-card:hover {
    transform: translateY(-6px);
    border-color: var(--theme-color);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.industrial-solutions-sec .industry-icon {
    height: 55px;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 10px;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease-in-out;
}

.industrial-solutions-sec .industry-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.5;
    color: var(--black);
    transition: all 0.3s ease-in-out;
}

.industrial-solutions-sec .industry-title {
    color: var(--black);
    font-weight: 500;
    line-height: 1.2;
    transition: all 0.3s ease-in-out;
}

.industrial-solutions-sec .industry-card:hover .industry-title {
    color: var(--theme-color);
}

.industrial-solutions-sec .industry-card:hover .industry-icon {
    background: var(--theme-color);
    border-color: var(--theme-color);
}

.industrial-solutions-sec .industry-card:hover .industry-icon svg {
    color: var(--white);
}

/* industrial solutions sec end */
/* dash features sec css start */
.dash-features-sec .feature-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-features-sec .feature-card:hover {
    transform: translateY(-6px);
    border-color: var(--theme-color);
    box-shadow: 0 20px 40px rgba(16, 183, 127, 0.06);
}

.dash-features-sec .feature-card .feature-content {
    padding: 20px 20px 0;
}

.dash-features-sec .feature-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dash-features-sec .feature-card-header h3 {
    font-size: 18px;
}

.dash-features-sec .feature-card-arrow {
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-features-sec .feature-card-arrow svg {
    width: 18px;
    height: 18px;
}

.dash-features-sec .feature-card:hover .feature-card-arrow {
    color: var(--theme-color);
    transform: translateX(4px);
}

.dash-features-sec .feature-card-desc {
    flex: 1;
    font-size: 14px;
}

.dash-features-sec .feature-card-image {
    position: relative;
    padding-top: 94%;
    display: block;
}

.dash-features-sec .feature-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* dash features sec css end */

/* DASH ADDON SECTION START (IMAGE REFERENCE STYLE) */
/* .dash-addon-sec .tabs-row ul.tabs {
    border-bottom: 1px solid var(--border-color);
    margin: 0 0 50px;
    width: 100%;
    overflow-x: auto;
}


.dash-addon-sec .tabs-row ul.tabs li a {
    font-weight: 500;
    transition: all 0.3s;
    position: relative;
    padding: 0 15px 10px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease-in-out;
}

.dash-addon-sec .tabs-row ul.tabs li.active a {
    color: var(--black);
    border-color: var(--black);
    font-weight: 600;
} */

.dash-addon-sec .addon-showcase-wrapper {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 30px;
}

.dash-addon-sec .addon-content-box {
    background: var(--white);
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.dash-addon-sec .addon-content-box h3 {
    margin-bottom: 20px;
}

.dash-addon-sec .addon-content-box p {
    margin: 0 0 25px;
    font-size: 16px;
}

.dash-addon-sec .addon-features {
    margin: 0 0 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.dash-addon-sec .addon-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: var(--light-color);
    border: 1px solid var(--theme-color);
    border-radius: 12px;
    width: 100%;
    transition: all 0.3s ease-in-out;
}

.dash-addon-sec .addon-features li:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.dash-addon-sec .addon-features li .feature-icon {
    color: var(--theme-color);
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
}

.dash-addon-sec .addon-features li .feature-icon svg {
    width: 18px;
    height: 18px;
}

.dash-addon-sec .addon-features li span {
    font-weight: 500;
    color: var(--black);
}

.dash-addon-sec .addon-slider-box-wrapper {
    border-radius: 25px;
    padding: 30px;
    overflow: hidden;
    position: relative;
    background: var(--light-color);
}

.dash-addon-sec .swiper {
    padding: 10px;
    margin: -10px;
}

.dash-addon-sec .product-card {
    box-shadow: var(--shadow-md);
}

/* DASH ADDON SECTION END */

/* dash workflow sec css start */
.dash-workflow-sec .workflow-img-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    background-image:
        linear-gradient(to right, rgba(16, 183, 127, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 183, 127, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-workflow-sec .workflow-img-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: var(--light-color);
    z-index: -1;
    pointer-events: none;
    border-radius: 30px;
}

.dash-workflow-sec .workflow-img-wrapper:hover {
    box-shadow: 0 10px 40px rgba(16, 183, 127, 0.15);
    border-color: var(--theme-color);
}

.dash-workflow-sec .workflow-img-wrapper img {
    width: auto;
    height: auto;
}


/* dash workflow sec css end */

/* bundle-promo-sec css start */
.bundle-promo-sec {
    background: linear-gradient(to bottom, var(--accent-light), var(--white));
}

.bundle-promo-sec .bundle-promo-layout {
    display: flex;
    align-items: center;
    gap: 60px;
}

.bundle-promo-sec .bundle-promo-left {
    flex: 1.2;
}

.bundle-promo-sec .promo-module-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-promo-sec .card-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
}

.bundle-promo-sec .card-text p {
    font: var(--h6);
    font-size: 16px;
    color: var(--black);
    margin-bottom: 4px;
}

.bundle-promo-sec .card-text span {
    font-size: 13px;
}

.bundle-promo-sec .promo-tag-accounting .card-icon-box {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
}

.bundle-promo-sec .promo-tag-accounting:hover {
    border-color: #3b82f6;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
    transform: translateY(-4px);
}

.bundle-promo-sec .promo-tag-accounting:hover .card-icon-box {
    background: #3b82f6;
    color: var(--white);
}

.bundle-promo-sec .promo-tag-hrm .card-icon-box {
    background: var(--primary-light);
    color: var(--theme-color);
}

.bundle-promo-sec .promo-tag-hrm:hover {
    border-color: var(--theme-color);
    box-shadow: 0 10px 25px rgba(16, 183, 127, 0.1);
    transform: translateY(-4px);
}

.bundle-promo-sec .promo-tag-hrm:hover .card-icon-box {
    background: var(--theme-color);
    color: var(--white);
}

.bundle-promo-sec .promo-tag-crm .card-icon-box {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

.bundle-promo-sec .promo-tag-crm:hover {
    border-color: #ef4444;
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.1);
    transform: translateY(-4px);
}

.bundle-promo-sec .promo-tag-crm:hover .card-icon-box {
    background: #ef4444;
    color: var(--white);
}

.bundle-promo-sec .promo-tag-pos .card-icon-box {
    background: var(--accent-light);
    color: var(--accent-color);
}

.bundle-promo-sec .promo-tag-pos:hover {
    border-color: #f59e0b;
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.1);
    transform: translateY(-4px);
}

.bundle-promo-sec .promo-tag-pos:hover .card-icon-box {
    background: var(--accent-color);
    color: var(--white);
}

.bundle-promo-sec .promo-tag-project .card-icon-box {
    background: rgba(139, 92, 246, 0.08);
    color: #8b5cf6;
}

.bundle-promo-sec .promo-tag-project:hover {
    border-color: #8b5cf6;
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.1);
    transform: translateY(-4px);
}

.bundle-promo-sec .promo-tag-project:hover .card-icon-box {
    background: #8b5cf6;
    color: var(--white);
}

.bundle-promo-sec .promo-tag-more .card-icon-box {
    background: var(--primary-light);
    color: var(--theme-color);
}

.bundle-promo-sec .promo-tag-more:hover {
    border-color: var(--theme-color);
    box-shadow: 0 10px 25px rgba(16, 183, 127, 0.1);
    transform: translateY(-4px);
}

.bundle-promo-sec .promo-tag-more:hover .card-icon-box {
    background: var(--theme-color);
    color: var(--white);
}

.bundle-promo-sec .bundle-promo-right {
    flex: 0.8;
}

.bundle-promo-sec .bundle-value-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    padding: 30px;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-promo-sec .bundle-value-card:hover {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
    border-color: var(--theme-color);
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}

.bundle-promo-sec .bundle-value-card .value-card-header {
    text-align: center;
    margin-bottom: 20px;
}

.bundle-promo-sec .bundle-value-card .value-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 15px;
    border-radius: 9999px;
    margin-bottom: 15px;
}

.bundle-promo-sec .bundle-value-card .value-price-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.bundle-promo-sec .bundle-value-card .value-original {
    font-size: 30px;
    color: var(--red-color);
    font-weight: 500;
    align-self: center;
    margin-right: 10px;
}

.bundle-promo-sec .bundle-value-card .value-current-price {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.bundle-promo-sec .bundle-value-card .value-current-price .currency {
    font-size: 20px;
    font-weight: 700;
    color: var(--black);
    margin-top: 6px;
}

.bundle-promo-sec .bundle-value-card .value-current-price .price-num {
    font-size: 48px;
    font-weight: 800;
    color: var(--black);
}

.bundle-promo-sec .bundle-value-card .value-current-price .value-sub {
    font-size: 14px;
}

.bundle-promo-sec .bundle-value-card .value-features-list {
    padding: 20px 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-bottom: 1px dashed var(--border-color);
    border-top: 1px dashed var(--border-color);
}

.bundle-promo-sec .bundle-value-card .value-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--black);
    font-weight: 500;
}

.bundle-promo-sec .bundle-value-card .value-features-list .check-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--primary-light);
    color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* bundle-promo-sec css end */

/* ROI CALCULATOR SECTION START */
.roi-calculator-sec .roi-wrapper {
    background: var(--light-color);
    padding: 30px;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    gap: 30px;
    border: 1px solid var(--border-color);
}

.roi-calculator-sec .roi-panel-title {
    margin: 0 0 8px;
}

.roi-calculator-sec .roi-tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--white);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    min-width: 100px;
}

.roi-calculator-sec .roi-tool-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.roi-calculator-sec .roi-tool-card:before {
    content: "";
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.roi-calculator-sec .roi-tool-card.active:before {
    background-color: var(--theme-color);
    box-shadow: 0 4px 12px rgba(16, 183, 127, 0.3);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='10'%20viewBox='0%200%209%208'%20fill='none'%3E%3Cpath%20d='M0.5%204.5L3%207L8.5%201'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center;
}

.roi-calculator-sec .roi-tool-card.active:before {
    transform: scale(1);
}

.roi-calculator-sec .roi-tool-card:hover,
.roi-calculator-sec .roi-tool-card.active {
    border-color: var(--theme-color);
    background-color: var(--primary-light);
    box-shadow: 0 4px 20px rgba(16, 183, 127, 0.08);
}

.roi-calculator-sec .roi-tool-icon {
    margin: 0 0 15px;
}

.roi-calculator-sec .roi-tool-icon img {
    width: auto;
    height: 35px;
}

.roi-calculator-sec .roi-tool-icon.odoo img {
    height: 25px;
}

.roi-calculator-sec .roi-tool-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
    line-height: 1.2;
}

.roi-calculator-sec .roi-tools-total {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed var(--border-color);
}

.roi-calculator-sec .roi-tools-total span {
    font-size: 16px;
    font-weight: 500;
}

.roi-calculator-sec .roi-tools-total strong {
    font-size: 20px;
    color: var(--black);
}

.roi-calculator-sec .roi-summary-panel {
    max-width: 420px;
    width: 100%;
    background: var(--white);
    border-radius: 20px;
    padding: 35px 30px;
    border: 2px solid var(--theme-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
}

.roi-calculator-sec .roi-summary-panel::before {
    content: "YOUR SAVINGS ENGINE";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-color);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 0 0 8px 8px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.roi-calculator-sec .roi-summary-header {
    padding: 15px;
    background-color: #002333;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin: 10px 0 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.roi-calculator-sec .roi-replace-count {
    font-size: 16px;
    margin-bottom: 6px;
    color: var(--text-color);
}

.roi-calculator-sec .roi-replace-count strong {
    color: var(--black);
    font-size: 18px;
}

.roi-calculator-sec .roi-savings-amount {
    color: var(--black);
    font-weight: 600;
    padding: 0 0 20px;
    margin: 0 0 25px;
    border-bottom: 1px dashed var(--border-color);
}

.roi-calculator-sec .roi-savings-amount span {
    font-weight: 900;
    color: var(--theme-color);
}

.roi-calculator-sec .roi-price-compare {
    margin: 0 0 25px;
}

.roi-calculator-sec .roi-price-box {
    flex: 1;
    padding: 15px 10px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.roi-calculator-sec .roi-price-current {
    background: var(--light-color);
    border: 1px solid var(--border-color);
}

.roi-calculator-sec .roi-price-current .roi-price-value {
    color: var(--red-color);
    text-decoration: line-through;
}

.roi-calculator-sec .roi-price-dash {
    background: linear-gradient(145deg, var(--primary-dark) 0%, var(--theme-color) 100%);
    color: var(--white);
    border-color: var(--theme-color);
}

.roi-calculator-sec .roi-price-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.roi-calculator-sec .roi-price-value {
    font-size: 30px;
}

.roi-calculator-sec .roi-price-value small {
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin: 0 0 0 4px;
}

.roi-calculator-sec .roi-price-calc {
    font-size: 13px;
}

.roi-calculator-sec .roi-cta-wrapper {
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

.roi-calculator-sec .roi-cta-wrapper .bottom-arrow {
    margin: 0 0 0 -10px;
}

.roi-calculator-sec .roi-cta-wrapper .bottom-arrow svg {
    transform: rotate(-30deg);
}

.roi-calculator-sec .roi-cta-wrapper p {
    font-family: var(--third-font);
    color: var(--black);
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 -5px;
    line-height: 1;
}

/* ROI CALCULATOR SECTION END */
/*************************** dash page css end ***************************/

/*************************** hrm saas page css start ***************************/
/* hrm-hero-sec css start */
.hrm-hero-sec::before {
    height: 100%;
    width: 100%;
    background-image: radial-gradient(rgba(0, 0, 0, 0.04) 2px, transparent 1px);
    background-size: 15px 15px;
}

.hrm-hero-sec::after {
    display: none;
}

.hrm-hero-sec {
    background: radial-gradient(circle at 50% 90%, rgba(245, 158, 11, 0.15) 45%, #f5f5f5 60%);
}

/* hrm-hero-sec css end */
/* hrm modules sec css start */
.hrm-modules-sec .function-tab {
    margin: 0 0 30px;
    overflow-x: auto;
    padding: 0 0 5px;
}

.hrm-modules-sec .function-tab a {
    position: relative;
    padding: 0 15px 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-color);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.hrm-modules-sec .function-tab a:hover {
    color: var(--black);
}

.hrm-modules-sec .function-tab a.active {
    color: var(--theme-color);
}

.hrm-modules-sec .function-tab a::before {
    content: '';
    position: absolute;
    height: 3px;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--border-color);
    border-radius: 3px;
}

.hrm-modules-sec .function-tab a.active::before {
    background-color: var(--theme-color);
}

.hrm-modules-sec .feature-tab-content {
    background-color: var(--white);
    border: 2px solid var(--theme-color);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.hrm-modules-sec .feature-tab ul {
    gap: 10px;
}

.hrm-modules-sec .feature-tab a {
    position: relative;
    background-color: var(--primary-light);
    color: var(--black);
    width: 250px;
    text-align: center;
    padding: 12px 10px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid var(--theme-color);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.hrm-modules-sec .feature-tab a.active {
    background-color: var(--white);
    color: var(--black);
}

.hrm-modules-sec .feature-tab a::after {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background-color: var(--white);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.hrm-modules-sec .feature-tab a.active::after,
.hrm-modules-sec .function-tab a.active::after {
    opacity: 1;
    visibility: visible;
}

.hrm-modules-sec .feature-content h3,
.hrm-modules-sec .feature-content p {
    margin: 0 0 15px;
}

.hrm-modules-sec .feature-content ul {
    margin: 0 0 30px;
}

.hrm-modules-sec .feature-content ul li {
    gap: 10px;
    font-weight: 500;
    color: var(--black);
}

.hrm-modules-sec .feature-content ul li svg {
    height: 20px;
    width: 20px;
    color: var(--accent-color);
}

.hrm-modules-sec .feature-content ul li:not(:last-of-type) {
    margin: 0 0 12px;
}

.hrm-modules-sec .feature-content-wrp .row {
    row-gap: 20px;
}

.hrm-modules-sec .feature-image-wrp {
    height: 420px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.hrm-modules-sec .feature-image-wrp:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.hrm-modules-sec .feature-img {
    position: relative;
    padding-top: 80%;
}

.hrm-modules-sec .feature-img img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: left top;
}

/* hrm modules sec css end */

/* hrm-workflow-sec sec css start */
.hrm-workflow-sec .workflow-grid {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 24px;
}

.hrm-workflow-sec .workflow-card {
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03),
        0 3px 6px rgba(16, 24, 40, 0.04),
        0 6px 12px rgba(16, 24, 40, 0.05),
        0 12px 24px rgba(16, 24, 40, 0.06);
    border: 1px solid var(--border-color);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hrm-workflow-sec .workflow-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 2px 4px rgba(16, 24, 40, 0.04),
        0 6px 12px rgba(16, 24, 40, 0.05),
        0 12px 20px rgba(16, 24, 40, 0.06),
        0 20px 40px rgba(16, 24, 40, 0.08);
}

.hrm-workflow-sec .workflow-card-tall {
    grid-row: span 2;
    background-color: var(--black);
    color: var(--white);
}

.hrm-workflow-sec .workflow-card-light {
    background: #f5f5f5;
    color: var(--black);
}

.hrm-workflow-sec .workflow-card-light h3 {
    color: var(--black);
}

.hrm-workflow-sec .workflow-card-content {
    padding: 30px 30px 0;
    flex-grow: 1;
}

.hrm-workflow-sec .script-subtitle {
    font-size: 20px;
    margin-bottom: 15px;
}

.hrm-workflow-sec .workflow-card-img {
    overflow: hidden;
}

.hrm-workflow-sec .workflow-card-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top;
}

/* hrm-workflow-sec sec css end */

/* hrm better choice sec css start */
.hrm-better-choice-sec {
    background: linear-gradient(to top, var(--accent-light) 0%, var(--white) 100%);
}

.hrm-better-choice-sec .choice-card {
    background-color: var(--white);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease-in-out;
}

.hrm-better-choice-sec .choice-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.hrm-better-choice-sec .choice-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--primary-light);
    color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
}

.hrm-better-choice-sec .choice-card:hover .choice-icon {
    background-color: var(--theme-color);
    color: var(--white);
}

.hrm-better-choice-sec .choice-icon svg {
    width: 24px;
    height: 24px;
}

.hrm-better-choice-sec .choice-content h3 {
    margin-bottom: 8px;
}

.hrm-better-choice-sec .better-choice-img {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}

/* hrm better choice sec css end */

/* hrm-biometric-integration-sec css start */
.hrm-biometric-integration-sec .biometric-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.hrm-biometric-integration-sec .biometric-card {
    background-color: var(--white);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    height: 100%;
}

.hrm-biometric-integration-sec .biometric-card:hover {
    transform: translateY(-5px);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.hrm-biometric-integration-sec .biometric-content {
    padding: 30px;
}

.hrm-biometric-integration-sec .biometric-content h3 {
    margin: 0 0 15px;
}

.hrm-biometric-integration-sec .biometric-content p {
    margin: 0 0 20px;
}

.hrm-biometric-integration-sec .biometric-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hrm-biometric-integration-sec .biometric-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    color: var(--black);
}

.hrm-biometric-integration-sec .biometric-list .list-icon {
    color: var(--theme-color);
}

.hrm-biometric-integration-sec .biometric-img {
    background-color: var(--light-color);
}

.hrm-biometric-integration-sec .biometric-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hrm-biometric-integration-sec .top-card .biometric-img img {
    object-position: right;
}

/* hrm-biometric-integration-sec css end */
/*************************** hrm saas page css end ***************************/

/*************************** ticketgo page css start ***************************/
/* ticketgo-hero-sec css start */
.ticketgo-hero-sec .product-hero-content {
    margin: 0 0 30px;
}

/* ticketgo-hero-sec css end */

/* ticket-workflow-sec css start */
.ticket-workflow-sec .workflow-showcase {
    display: flex;
    align-items: center;
    gap: 50px;
}

.ticket-workflow-sec .workflow-tabs {
    position: relative;
    max-width: 45%;
    width: 100%;
    flex-shrink: 0;
}

.ticket-workflow-sec .workflow-tabs::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
    border-radius: 3px;
    z-index: 1;
}

.ticket-workflow-sec .workflow-tab {
    position: relative;
    padding: 22px 24px 22px 28px;
    cursor: pointer;
    overflow: hidden;
}

.ticket-workflow-sec .workflow-tab+.workflow-tab {
    border-top: 1px solid var(--border-color);
}

.ticket-workflow-sec .workflow-tab:hover {
    background-color: #f4f4f4;
}

.ticket-workflow-sec .workflow-tab.active {
    background: var(--white);
    box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.06);
    border-radius: 0 14px 14px 0;
}

.ticket-workflow-sec .workflow-tab-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 0;
    background: var(--theme-color);
    box-shadow: 0 0 8px rgba(16, 183, 127, 0.45);
    z-index: 3;
    transition: none;
}

.ticket-workflow-sec .workflow-tab.active .workflow-tab-progress {
    animation: wfProgressFill 6s linear forwards;
}

@keyframes wfProgressFill {
    from {
        height: 0;
    }

    to {
        height: 100%;
    }
}

.ticket-workflow-sec .workflow-tab-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ticket-workflow-sec .workflow-tab-number {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--first-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
    line-height: 1;
}

.ticket-workflow-sec .workflow-tab.active .workflow-tab-number {
    background: var(--theme-color);
    color: var(--white);
    border-color: var(--theme-color);
    box-shadow: 0 4px 12px rgba(16, 183, 127, 0.3);
}

.ticket-workflow-sec .workflow-tab-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ticket-workflow-sec .workflow-tab-info h3 {
    font-size: 18px;
    transition: color 0.3s ease-in-out;
}

.ticket-workflow-sec .workflow-tab.active .workflow-tab-info h3 {
    color: var(--theme-color);
}

.ticket-workflow-sec .workflow-tab-arrow {
    transition: all 0.3s ease-in-out;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
}

.ticket-workflow-sec .workflow-tab.active .workflow-tab-arrow {
    background: var(--primary-light);
    color: var(--theme-color);
}

.ticket-workflow-sec .workflow-tab-arrow svg {
    transition: all 0.3s ease-in-out;
}

.ticket-workflow-sec .workflow-tab.active .workflow-tab-arrow svg {
    transform: rotate(180deg);
}

.ticket-workflow-sec .workflow-tab-body {
    display: none;
    overflow: hidden;
    margin-top: 0;
}

.ticket-workflow-sec .workflow-tab.active .workflow-tab-body {
    display: block;
    margin-top: 16px;
}

.ticket-workflow-sec .workflow-tab-body p {
    padding-left: 54px;
}

.ticket-workflow-sec .workflow-preview {
    flex: 1;
}

.ticket-workflow-sec .workflow-preview-inner {
    position: relative;
    padding-top: 73%;
}

.ticket-workflow-sec .workflow-preview-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    border-radius: 10px;
}

.ticket-workflow-sec .workflow-preview-img:not(:first-of-type) {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.ticket-workflow-sec .workflow-preview-img.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ticket-workflow-sec css end */

/* ticket-discover-sec css start */
.ticket-discover-sec .tabs-row {
    margin-bottom: 20px;
}

.ticket-discover-sec ul.tabs,
.bookinggo-addon-sec ul.tabs {
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    overflow-x: auto;
}

.ticket-discover-sec ul.tabs::-webkit-scrollbar,
.bookinggo-addon-sec ul.tabs::-webkit-scrollbar {
    display: none;
}

.ticket-discover-sec ul.tabs li a,
.bookinggo-addon-sec ul.tabs li a {
    color: var(--black);
    padding: 0 20px 12px;
    text-transform: capitalize;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.ticket-discover-sec ul.tabs li a svg,
.bookinggo-addon-sec ul.tabs li a svg {
    flex-shrink: 0;
}

.ticket-discover-sec ul.tabs li.active a,
.bookinggo-addon-sec ul.tabs li.active a {
    color: var(--theme-color);
    border-color: var(--theme-color);
}

.ticket-discover-sec .discover-image img {
    height: auto;
    width: auto;
}

/* ticket-discover-sec css end */
/* ticketgo-features-sec start css */
.ticketgo-features-sec .ticketgo-feature-card {
    position: relative;
    background: linear-gradient(to bottom, var(--light-color) var(--white));
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.ticketgo-features-sec .ticketgo-feature-card:hover {
    border-color: var(--theme-color);
    transform: translateY(-2px);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}

.ticketgo-features-sec .ticketgo-feature-card .feature-img-wrp {
    padding: 15px 15px 0;
    background-color: var(--light-color);
    border-bottom: 1px dashed var(--border-color);
}

.ticketgo-features-sec .ticketgo-feature-card .feature-card-image {
    position: relative;
    padding-top: 78%;
    overflow: hidden;
}

.ticketgo-features-sec .ticketgo-feature-card .feature-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ticketgo-features-sec .ticketgo-feature-card .feature-card-content {
    padding: 20px;
}

.ticketgo-features-sec .ticketgo-feature-card h3 {
    margin-bottom: 12px;
}

.ticketgo-features-sec .ticketgo-feature-card .feature-question {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-color);
    margin-bottom: 12px;
}

/* ticketgo-features-sec end css */
/* ticketgo addon section css start */
.ticketgo-addon-sec {
    background: var(--accent-light);
}

.ticketgo-addon-sec .addon-grid {
    display: flex;
    gap: 10px;
}

.ticketgo-addon-sec .addon-grid-row {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

.ticketgo-addon-sec .addon-box {
    flex: 1;
    padding: 15px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 1px solid var(--border-color);
    background: var(--white);
    box-shadow: 0 3px 4px -3px hsla(0, 0%, 4%, .05), 0 4px 8px -3px hsla(0, 0%, 4%, .05);
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

.ticketgo-addon-sec .addon-box:hover {
    border-color: var(--theme-color);
    box-shadow: 0 8px 18px -6px hsla(0, 0%, 4%, .05), 0 24px 42px -4px hsla(0, 0%, 4%, .1);
}

.ticketgo-addon-sec .addon-box .addon-icon {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--white);
    background: linear-gradient(145deg, var(--theme-color) 0%, #0a7d58 60%, #064e38 100%);
    border-radius: 10px;
}

.ticketgo-addon-sec .addon-box .addon-icon svg {
    height: 22px;
    width: 22px;
}

.ticketgo-addon-sec .addon-box span {
    color: var(--black);
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1;
}

/* ticketgo addon section css end */

/* ticketgo integration section css start */
.ticketgo-integration-sec .integration-grid {
    gap: 50px;
}

.ticketgo-integration-sec .integration-content h2 {
    margin: 15px 0 20px;
}

.ticketgo-integration-sec .integration-content p {
    margin: 0 0 30px;
}

.ticketgo-integration-sec .integration-image {
    display: block;
    position: relative;
    padding-top: 94%;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    overflow: hidden;
}

.ticketgo-integration-sec .integration-image video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    object-fit: cover;
}

/* ticketgo integration section css end */
/************************** ticketgo page css end **************************/

/************************** bookinggo page css start **************************/
/* bookinggo-hero-sec css start */
.bookinggo-hero-sec .product-hero-content {
    margin: 0 0 30px;
}

.bookinggo-hero-sec .product-hero-image {
    padding: 0 10px;
}

.product-hero-sec.bookinggo-hero-sec .hero-txt {
    top: 80%;
}

/* bookinggo-hero-sec css end */
/* bookinggo-themes-sec css start */

.bookinggo-themes-sec .tabs-row {
    margin: 0 0 40px;
}

.bookinggo-themes-sec ul.tabs {
    background: var(--white);
    padding: 8px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    width: fit-content;
    overflow-x: auto;
}

.bookinggo-themes-sec ul.tabs::-webkit-scrollbar {
    display: none;
}

.bookinggo-themes-sec ul.tabs li a {
    border-radius: 40px;
    padding: 10px 15px;
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    white-space: nowrap;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bookinggo-themes-sec ul.tabs li .tab-badge {
    position: relative;
    background-color: var(--red-color);
    color: var(--white);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    margin-left: 2px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.bookinggo-themes-sec ul.tabs li .tab-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.5),
            transparent);
    animation: shimmer-infinite 4s ease-in-out infinite;
    transition: left 0.5s ease;
}

.bookinggo-themes-sec ul.tabs li a svg {
    flex-shrink: 0;
    height: 18px;
    width: 18px;
}

.bookinggo-themes-sec ul.tabs li a:hover {
    color: var(--theme-color);
}

.bookinggo-themes-sec ul.tabs li.active a {
    background: var(--theme-color);
    color: var(--white);
}

.bookinggo-themes-sec .themes-grid {
    gap: 30px;
}

.bookinggo-themes-sec .theme-showcase-card {
    position: relative;
    z-index: 1;
    width: 100%;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.bookinggo-themes-sec .theme-showcase-card::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 25%;
    background: linear-gradient(to top, var(--black) 0%, var(--black) 10%, transparent 100%);
    z-index: 1;
}

.bookinggo-themes-sec .theme-img-wrp {
    position: relative;
    padding-top: 140%;
}

.bookinggo-themes-sec .theme-img-wrp img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    object-fit: cover;
    object-position: top;
    transition: all 3s ease-in-out;
}

.bookinggo-themes-sec .theme-showcase-card:hover .theme-img-wrp img {
    transform: translateY(-71%);
}

.bookinggo-themes-sec .theme-info {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    padding: 20px;
}

.bookinggo-themes-sec .theme-info h3 {
    font-size: 24px;
    font-family: var(--third-font);
    transition: color 0.3s ease-in-out;
    color: var(--white);
}

.bookinggo-themes-sec .theme-showcase-card:hover .theme-info h3 {
    color: var(--theme-color);
}

.bookinggo-themes-sec .free-themes .themes-grid {
    max-width: 790px;
    margin: 0 auto;
}

/* bookinggo-themes-sec css end */
/* booking-feature-sec css start */
.booking-feature-sec .feature-card {
    padding: 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), var(--white));
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: rgba(149, 157, 165, 0.15) 0px 8px 20px;
    transition: all 0.35s ease-in-out;
}

.booking-feature-sec .feature-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--theme-color);
}

.booking-feature-sec .feature-content {
    margin: 0 0 20px;
}

.booking-feature-sec .feature-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    background-color: var(--primary-light);
    color: var(--theme-color);
    border: 1px solid rgba(16, 183, 127, 0.3);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 16px;
}

.booking-feature-sec .feature-content h3 {
    margin: 0 0 8px;
}

.booking-feature-sec .feature-visual {
    margin-top: auto;
}

/* Card 1: Calendar orbit visual */
.booking-feature-sec .feature-visual-calendar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0 10px;
}

.booking-feature-sec .feature-cal-orbit {
    position: relative;
    width: 140px;
    height: 140px;
}

.booking-feature-sec .feature-cal-orbit::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
}

.booking-feature-sec .feature-cal-orbit::after {
    content: '';
    position: absolute;
    inset: -20px;
    border: 1px dashed rgba(0, 0, 0, 0.06);
    border-radius: 50%;
}

.booking-feature-sec .feature-cal-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 2;
}

.booking-feature-sec .feature-orbit-icon {
    --angle: calc(var(--i) * 90deg - 45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-70px) rotate(calc(var(--angle) * -1));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    z-index: 2;
}

/* Card 2: Schedule visual */
.booking-feature-sec .feature-visual-schedule {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.booking-feature-sec .feature-sched-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--black);
}

.booking-feature-sec .bgo-toggle {
    width: 32px;
    height: 18px;
    border-radius: 10px;
    background: var(--border-color);
    position: relative;
    flex-shrink: 0;
}

.booking-feature-sec .bgo-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--white);
    transition: transform 0.3s ease;
}

.booking-feature-sec .bgo-toggle.on {
    background: var(--theme-color);
}

.booking-feature-sec .bgo-toggle.on::after {
    transform: translateX(14px);
}

.booking-feature-sec .bgo-day {
    font-weight: 600;
    min-width: 30px;
}

.booking-feature-sec .bgo-time {
    font-size: 12px;
    background: var(--white);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    line-height: 1.2;
}

.booking-feature-sec .bgo-time.muted {
    opacity: 0.5;
}

.booking-feature-sec .bgo-dash {
    font-size: 12px;
}

.booking-feature-sec .bgo-sched-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    font-size: 12px;
    opacity: 0.5;
    letter-spacing: 4px;
}

.booking-feature-sec .bgo-sched-actions svg {
    height: 12px;
    width: 12px;
}

/* Card 3: Payment visual */
.booking-feature-sec .bgo-visual-payment {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.booking-feature-sec .bgo-pay-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
}

.booking-feature-sec .bgo-pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.booking-feature-sec .bgo-pay-chip {
    width: 30px;
    height: 22px;
    border-radius: 4px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.booking-feature-sec .bgo-pay-number {
    font-size: 15px;
    font-weight: 600;
    color: var(--black);
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.booking-feature-sec .bgo-pay-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.booking-feature-sec .bgo-pay-gateways {
    display: flex;
    gap: 8px;
}

.booking-feature-sec .bgo-gateway {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--light-color);
    border: 1px solid var(--border-color);
}

.booking-feature-sec .bgo-gateway.active {
    background: var(--theme-color);
    color: var(--white);
    border-color: var(--theme-color);
}

/* Card 4: Notification visual */
.booking-feature-sec .bgo-visual-notif {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.booking-feature-sec .bgo-notif-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 14px;
}

.booking-feature-sec .bgo-notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.booking-feature-sec .bgo-notif-icon.green {
    background: var(--primary-light);
    color: var(--theme-color);
    border: 1px solid var(--primary-light);
}

.booking-feature-sec .bgo-notif-icon.blue {
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #cee0f7;
}

.booking-feature-sec .bgo-notif-icon.orange {
    background: var(--accent-light);
    color: var(--accent-color);
    border: 1px solid var(--accent-light);
}

.booking-feature-sec .bgo-notif-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.booking-feature-sec .bgo-notif-text strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
}

.booking-feature-sec .bgo-notif-text span {
    font-size: 11px;
}

/* Card 5: Chart visual */
.booking-feature-sec .bgo-visual-chart {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px 18px 14px;
}

.booking-feature-sec .bgo-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    margin-bottom: 10px;
}

.booking-feature-sec .bgo-chart-bars .bgo-bar {
    flex: 1;
    height: var(--h, 50%);
    background: var(--border-color);
    border-radius: 6px 6px 2px 2px;
}

.booking-feature-sec .bgo-chart-bars .bgo-bar.accent {
    background: var(--theme-color);
    opacity: 0.7;
    transition: all 0.3s ease-in-out;
}

.booking-feature-sec .feature-card:hover .bgo-chart-bars .bgo-bar.accent {
    opacity: 1;
}

.booking-feature-sec .bgo-chart-labels {
    display: flex;
    gap: 8px;
}

.booking-feature-sec .bgo-chart-labels span {
    flex: 1;
    text-align: center;
    font-size: 10px;
}

/* Card 6: Form visual */
.booking-feature-sec .bgo-visual-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.booking-feature-sec .bgo-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-feature-sec .bgo-field-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.booking-feature-sec .bgo-field-input,
.booking-feature-sec .bgo-field-select,
.booking-feature-sec .bgo-field-textarea {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    line-height: 1;
    font-size: 13px;
    color: var(--black);
}

.booking-feature-sec .bgo-field-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* booking-feature-sec animations */
@keyframes bgoSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes bgoSpinReverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes bgoCenterSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes bgoShimmer {
    to {
        background-position: 200% 0;
    }
}

.booking-feature-sec .feature-cal-orbit {
    animation: bgoSpin 20s linear infinite;
}

.booking-feature-sec .feature-cal-center {
    animation: bgoCenterSpin 20s linear infinite;
}

.booking-feature-sec .feature-orbit-icon svg {
    animation: bgoSpinReverse 20s linear infinite;
}

.booking-feature-sec .bgo-pay-card {
    position: relative;
    overflow: hidden;
}

.booking-feature-sec .bgo-pay-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    background-size: 200% 100%;
    background-position: -200% 0;
    animation: bgoShimmer 4s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}

/* booking-feature-sec css end */
/* bookinggo-addon-sec css start */
.bookinggo-addon-sec .tabs-row {
    margin: 0 0 30px;
}

.bookinggo-addon-sec .module-card .addon-icon img {
    max-width: 40px;
    width: 100%;
    height: auto;
}

.bookinggo-addon-sec .payment-tab .module-card .addon-icon {
    background: var(--white);
}

/* bookinggo-addon-sec css end */
/* bookinggo-form-sec css start */
.bookinggo-forms-slider {
    padding: 30px 0;
    margin: -30px 0;
    mask-image: linear-gradient(to right, rgba(16, 183, 127, 0) 0%, rgb(16, 183, 127) 12.5%, rgb(16, 183, 127) 87.5%, rgba(16, 183, 127, 0) 100%);
}

.bookinggo-forms-slider .swiper-slide {
    width: auto;
}

.bookinggo-forms-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}

.bookinggo-forms-sec .form-image {
    padding: 10px;
    background-color: var(--white);
    border-radius: 15px;
    overflow: hidden;
    max-width: 500px;
    width: 100%;
    border: 1px solid var(--border-color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.bookinggo-forms-sec .form-image img {
    height: 100%;
    width: 100%;
    border-radius: 15px;
}

/* bookinggo-form-sec css end */
/************************** bookinggo page css end **************************/

/************************** development page start css **************************/
/* features-card-section start css */
.features-card {
    position: relative;
    z-index: 1;
    padding: 20px 15px;
    color: var(--black);
}

.feature-card-row {
    gap: 30px 0;
}

.features-card svg {
    width: 28px;
    height: 28px;
    color: inherit;
}

.features-card h4,
.features-card p {
    margin-bottom: 15px;
}

.features-card p {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.icon-div {
    position: relative;
    width: 65px;
    height: 65px;
    background: var(--theme-color);
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    box-shadow: 0px 0px 0px 6px rgba(111, 217, 67, 0.50);
    -webkit-box-shadow: 0px 0px 0px 6px rgba(111, 217, 67, 0.50);
}

.icon-div.bg-dark {
    background: var(--black) !important;
    box-shadow: 0px 0px 0px 6px rgba(0, 35, 50, 0.5);
    -webkit-box-shadow: 0px 0px 0px 6px rgba(0, 35, 50, 0.5);
}

.icon-div.bg-dark svg path {
    fill: var(--theme-color) !important;
}

.feature-card-row .features-card .icon-div,
.tech-card .icon-div,
.pro-feature-card .icon-div {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, .2);
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: 0 0 20px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.feature-card-row .features-card .icon-div svg,
.tech-card .icon-div svg,
.pro-feature-card .icon-div svg {
    width: 38px;
    height: 38px;
}

.feature-card-row .card:nth-child(even) .features-card,
.technology-section .tech-card:nth-child(even) .tech-card-inner {
    background: var(--accent-color);
}

.feature-card-row .card:nth-child(odd) .features-card,
.technology-section .tech-card:nth-child(odd) .tech-card-inner {
    background: var(--theme-color);
}

.feature-card-row .card:nth-child(odd) .icon-div,
.technology-section .tech-card:nth-child(odd) .icon-div,
.pro-feature-section .pro-feature-row .pro-feature-card:nth-child(odd) .icon-div {
    background: rgba(255, 255, 255, .2)
}

.feature-card-row .card:nth-child(odd) .features-card h4,
.feature-card-row .card:nth-child(odd) .features-card p,
.technology-section .tech-card:nth-child(odd) .tech-card-inner h3 {
    color: var(--white);
}

/* features-card-section end css */

/* service-card-section start css */
.service-card-section.bg-gradient::before {
    height: 43%;
}

.icon-div.bg-white {
    background: #ECECEC !important;
    box-shadow: 0px 0px 0px 6px rgba(236, 236, 236, 0.5);
    -webkit-box-shadow: 0px 0px 0px 6px rgba(236, 236, 236, 0.5);
}

.icon-div.bg-gray {
    background: #B1B1B1;
    box-shadow: 0px 0px 0px 6px rgba(177, 177, 177, 0.5);
    -webkit-box-shadow: 0px 0px 0px 6px rgba(177, 177, 177, 0.5);
}

.icon-div.bg-orange {
    background: var(--accent-color) !important;
    box-shadow: 0px 0px 0px 6px rgba(244, 180, 26, 0.3);
    -webkit-box-shadow: 0px 0px 0px 6px rgba(244, 180, 26, 0.3);
}

.icon-div.number-div {
    font-size: 28px;
    color: var(--white);
}

.service-card-section .row {
    row-gap: 20px;
}

/* service-card-section end css */
/* process-works-section start css */
.development-faq-sec .section-title p,
.blog-section .section-title p,
.service-section .section-title p,
.process-works-section .section-title p {
    max-width: 40%;
    width: 100%;
    margin: 15px auto 0;
}

.process-works {
    row-gap: 20px;
}

.process-works-section .slide {
    max-width: 20%;
    width: 100%;
}

.process-works-section .process-card {
    position: relative;
    z-index: 1;
    height: 100%;

}

.process-works-section .process-card .process-content {
    padding: 0 10px;
}

.process-works-section .process-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 35px;
    width: 100%;
    border: 1px dashed var(--theme-color);
}

.service-section .service-card .service-icon,
.process-works-section .process-card .process-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 6px auto;
    outline-offset: 5px;
    outline: 1px dashed var(--theme-color);
    background-color: var(--primary-dark);
    color: var(--white);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.process-works-section .process-card .process-icon::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -17px;
    left: 50%;
    height: 12px;
    border: 1px dashed var(--theme-color);
}

.service-section .service-card .service-icon svg,
.process-works-section .process-card .process-icon svg {
    width: 30px;
    height: 30px;
}

.process-works-section .process-card .process-content span {
    display: block;
    color: var(--theme-color);
    opacity: 0.5;
    margin: 15px 0 10px;
    line-height: 1;
}

.service-section .service-card h3,
.process-works-section .process-card .process-content h3 {
    margin-bottom: 10px;
}

.free-installation-section .row {
    row-gap: 25px;
}

/* process-works-section end css */
/* service-section start css */
.service-section .service-card {
    position: relative;
    width: 100%;
    padding: 20px;
    margin-bottom: 3px;
    border: 1px solid var(--border-color);
    -webkit-box-shadow: 0px 3px 0px 0px var(--accent-color);
    box-shadow: 0px 3px 0px 0px var(--accent-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.service-section .service-card .service-layer {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-section .service-card .service-icon {
    margin: 5px 5px 20px;
}

.service-section .row {
    row-gap: 20px;
}

/* service-section end css */
/* ai automation css start */
.ai-automation-sec .ai-automation-wrp {
    padding: 40px;
    background-color: var(--light-color);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.ai-automation-sec .tabs-wrp {
    gap: 40px;
    background-color: var(--white);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
}

.ai-automation-sec .tabs-row {
    max-width: 32%;
    min-width: 220px;
    width: 100%;
    padding: 0 30px 0 0;
    border-right: 1px solid var(--border-color);
}

.ai-automation-sec .tabs {
    gap: 8px;
}

.ai-automation-sec .tabs li a {
    position: relative;
    text-transform: capitalize;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 500;
    gap: 12px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.ai-automation-sec .tabs li a:hover {
    background-color: var(--light-gray);
}

.ai-automation-sec .tabs li.active a {
    background-color: var(--accent-color);
    color: var(--white);
}

.ai-automation-sec .tabs li a::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #93979c;
    transition: all 0.3s ease;
}

.ai-automation-sec .tabs li.active a::before {
    background: var(--white);
    height: 11px;
    width: 11px;
}

.ai-automation-sec .tabs-container {
    flex: 1;
}

.ai-automation-sec .tab-content .title-wrp {
    gap: 15px;
    padding: 0 0 20px;
    margin: 0 0 30px;
    border-bottom: 1px solid var(--border-color);
}

.ai-automation-sec .tab-content .title-wrp h3 {
    flex: 1;
}

.ai-automation-sec .tab-content .title-wrp span {
    font: var(--h1);
    color: rgba(0, 0, 0, .1);
    font-weight: 900;
}

.ai-automation-sec .tab-content ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0 0;
}

.ai-automation-sec .tab-content ul li {
    background: var(--light-color);
    color: var(--black);
    font-weight: 500;
    padding: 15px 20px;
    border-radius: 12px;
    gap: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease-in-out;
}

.ai-automation-sec .tab-content ul li:hover {
    border-color: var(--primary-dark);
}

.ai-automation-sec .tab-content ul li::before {
    content: '✓';
    color: var(--white);
    background: var(--primary-dark);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

/* ai automation css end */
/* free-installation-section start css */
.technologies-sec,
.free-installation-section {
    position: relative;
    background-color: var(--light-color);
}

.free-installation-section .img-wrapper {
    max-width: 500px;
}

.free-installation-section .installation-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

/* free-installation-section end css */
/* bookingo-integration-sec start css */
.bookingo-integration-sec {
    position: relative;
    padding: 55px 0;
}

.bookingo-integration-sec .integration-tab {
    max-width: 50%;
    gap: 20px 80px;
}

.bookingo-integration-sec .section-title {
    max-width: 430px;
    width: 100%;
    margin: unset;
}

.bookingo-integration-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.bookingo-integration-sec .section-title h2,
.bookingo-integration-sec .section-title {
    color: var(--white);
}

.bookingo-integration-sec .integration-btn {
    gap: 15px;
}

.bookingo-integration-sec .integration-btn img {
    width: 75px;
    height: 75px;
    background-color: var(--white);
    border: 2px solid rgba(244, 180, 26, 0.3);
    padding: 5px;
    object-fit: scale-down;
    -o-object-fit: scale-down;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.bookingo-integration-sec .integration-btn span {
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
}

.bookingo-integration-sec .section-title .btn {
    line-height: 1;
}

.bookingo-integration-sec .section-title p {
    margin-top: 20px;
}

/* bookingo-integration-sec end css */
/* blog-sec start css */
.blog-slider {
    margin: -15px -10px;
    padding: 15px 10px;
}

.blog-card {
    height: 100%;
}

.blog-card .blog-card-inner {
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.blog-section .blog-image {
    position: relative;
    padding-top: 50%;
}

.blog-section .blog-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.blog-card .blog-card-inner .blog-content {
    padding: 15px;
}

.blog-card .blog-card-inner .blog-content p,
.blog-card .blog-card-inner .blog-content h3 {
    margin-bottom: 12px;
}

.blog-card .blog-card-inner .blog-content .blog-tag {
    gap: 10px;
}

.blog-card .blog-card-inner .blog-content .blog-tag span {
    line-height: 1;
    padding: 6px 10px;
    color: var(--white);
    background: var(--theme-color);
    font-size: 14px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.blog-card .blog-card-inner .blog-content .blog-content-top {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.more-blog:disabled svg:not(.spin-loader) {
    display: none;
}

/* blog-sec end css */
/* attendance-machine-section start css */
.attendance-machine-section .attendance-inner .attendance-machine-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.attendance-machine-section .attendance-inner {
    position: relative;
    z-index: 1;
    padding: 15px 30px;
    background-color: var(--black);
    color: var(--white);
    overflow: hidden;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.attendance-machine-section .attendance-inner .img-wrapper {
    max-width: 390px;
    padding: 0 0 0 14%;
}

/* attendance-machine-section end css */
/* custom-keyword-sec and suggestion box start css */
.custom-keyword-slider {
    padding: 10px 0;
    margin: -10px 0;
}

.custom-keyword-sec .service-card .service-content h3,
.custom-keyword-sec .service-card .service-content p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.custom-keyword-sec .service-card .service-content h3 {
    -webkit-line-clamp: 2;
}

.vcard-search-sec .search-box {
    position: relative;
}

.vcard-search-sec .vcard-suggest-box {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    z-index: 9;
    display: none;
}

.vcard-search-sec .vcard-suggest-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
}

.vcard-search-sec .vcard-suggest-item:hover,
.vcard-search-sec .vcard-suggest-item.active {
    background: #f3f4f6;
}

.vcard-search-sec .vcard-suggest-empty {
    padding: 10px 12px;
    color: #6b7280;
    font-size: 13px;
}

/* custom-keyword-sec end css */
/* installation-banner start css */
.installation-banner.product-hero-sec {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.installation-banner.product-hero-sec::after {
    background: linear-gradient(to top, rgba(244, 180, 26, 0.1) 0%, transparent 100%);
}

.installation-banner .user-image {
    gap: 20px;
}

.installation-banner .user-image img+img {
    margin-left: -4px;
}

.installation-banner .user-image img {
    width: 35px;
    height: 35px;
    -o-object-fit: cover;
    object-fit: cover;
    border: 2px solid var(--white);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.installation-banner .user-image p {
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 500;
}

/* installation-banner end css */
/************************** development page end css **************************/
/******************** terms-details-section start css ********************/
.page-template-about-us .about-wrapper .terms-details-section h5 {
    margin-bottom: 15px;
}

.privacy-wrapper .terms-details-section h5,
.privacy-wrapper .terms-details-section li {
    margin-bottom: 10px;
}

.privacy-wrapper .terms-details-section li {
    font-size: 16px;
}

.privacy-wrapper .terms-details-section h5 a,
.privacy-wrapper .terms-details-section p a {
    color: #bd0505;
    text-decoration: underline;
}

.privacy-wrapper .terms-details-section p,
.privacy-wrapper .terms-details-section ul {
    font-size: 16px;
    margin-bottom: 25px;
}

.privacy-wrapper .terms-details-section p:last-of-type {
    margin-bottom: 0;
}

.terms-details-section strong,
.terms-details-section b {
    color: var(--black);
}

/******************** terms-details-section end css ********************/
/************************** contact page css start **************************/
/* contact-home-section start css */
.contact-home-section {
    padding: 90px 0;
    background: var(--dark-color);
}

.contact-home-section .section-title,
.contact-home-section .section-title h1 {
    color: var(--white);
}

.contact-page-wrapper .home-section .section-title {
    margin-bottom: 40px;
}

.wpcf7 form .wpcf7-response-output {
    font-size: 15px;
    color: var(--white);
    border: none;
    font-weight: 500;
    text-align: center;
    color: var(--white);
    padding: 5px 15px;
    width: fit-content;
    margin: 15px auto 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.wpcf7 .wpcf7-form.invalid .wpcf7-response-output {
    background: var(--red-color);
}

.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
    background: var(--theme-color);
}

.contact-card {
    position: relative;
    border: 1px solid var(--white);
    padding: 40px 15px 40px 60px;
    color: var(--white);
    max-width: 400px;
    width: 100%;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    margin-left: auto;
}

.contact-card:not(:last-of-type) {
    margin-bottom: 45px;
}

.contact-card:nth-child(3) {
    border-color: var(--accent-color);
}

.contact-card:nth-child(3) .icon-div {
    background: var(--accent-color);
}

.contact-card:nth-child(3) label {
    color: var(--white);
}

.contact-card label {
    font-weight: 500;
    line-height: 1;
    color: var(--white);
    display: block;
}

.contact-card .icon-div {
    position: absolute;
    left: -30px;
    top: 50%;
    margin: 0;
    box-shadow: var(--shadow-md);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.cards-wrapper .contact-card:first-of-type .icon-div {
    background-color: var(--white);
    color: var(--black);
}

.contact-card .icon-div svg {
    width: 30px;
    height: 30px;
}

.cards-wrapper .contact-card:first-of-type {
    max-width: 450px;
    background: var(--theme-color);
    border-color: var(--theme-color);
}

.cards-wrapper .contact-card:first-of-type p {
    display: block;
    font-size: 28px;
    font-weight: 600;
}

.cards-wrapper .contact-card:first-of-type label {
    margin-bottom: 5px;
    color: var(--black);
}

.cards-wrapper .contact-card .btn {
    margin-top: 15px;
}

.custom-req-form button.submit-btn,
.custom-req-form input.submit-btn {
    padding: 14px 20px;
    font-weight: 600;
}

.support-wrapper .contact-card .btn svg {
    width: 18px;
    height: 18px;
}

.support-wrapper .contact-card label {
    font-size: 15px;
}

.support-wrapper .contact-card {
    padding: 30px 15px 30px 60px;
}

.support-wrapper .cards-wrapper .contact-card:first-of-type {
    max-width: 500px;
}

.support-wrapper .left-side.section-title p {
    margin-top: 30px;
}

/* contact-home-section end css */

.wpcf7-not-valid-tip {
    font-size: 14px;
    padding-top: 5px;
    font-weight: 500;
    line-height: 1;
}

.wpcf7 .row>div:last-child .form-group {
    margin-bottom: 0;
}

/************************** contact page css end **************************/

/******************** cart page css start ********************/
.content-area,
.widget-area,
.site-main {
    margin-bottom: 0 !important;
}

.woocommerce-cart-form thead th {
    color: var(--white);
    padding: 12px 20px;
}

.woocommerce-cart-form table.cart .product-thumbnail a,
.woocommerce-cart-form table.cart .product-thumbnail .instalation-cart {
    max-width: 100px;
    width: 100%;
    display: block;
    border: 1px solid var(--theme-color);
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.woocommerce-cart-form table.cart .product-thumbnail .instalation-cart img {
    height: 100%;
    max-width: 100%;
}

.woocommerce-cart-form table.cart .product-thumbnail a img {
    max-width: 100%;
}

.cart-collaterals {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 23%;
    flex: 0 0 23%;
}

.woocommerce table.cart .option-description {
    position: absolute;
    z-index: 1;
    left: -50%;
    top: 18px;
    width: 430px;
    padding: 20px;
    font-size: 13px;
    background-color: var(--black);
    color: var(--white);
    display: none;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.woocommerce table.cart .option-description li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    gap: 0 8px;
    flex-wrap: nowrap;
}

.woocommerce table.cart .option-description li svg {
    height: 18px;
    width: 18px;
    flex-shrink: 0;
}

.woocommerce table.cart .option-description li:not(:last-of-type) {
    margin-bottom: 6px;
}

.woocommerce table.cart .info-wrapper:hover .option-description {
    display: block;
}

.woocommerce table.cart .cart-product-name-title {
    color: var(--black);
    font-weight: 500;
}

.woocommerce table.cart .cart-product-name-title .detail-list li .check-icon a {
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
}

.woocommerce-cart .site-content {
    padding: 70px 0;
    min-height: 650px;
}

.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-account .site-content {
    background: var(--dark-color);
}

.woocommerce-form-coupon-toggle .woocommerce-info {
    background-color: var(--accent-color);
}

.woocommerce-cart .hentry {
    margin-bottom: 0;
}

.woocommerce-cart .wc-proceed-to-checkout .button.checkout-button {
    padding: 11px 20px;
}

.woocommerce table.cart {
    position: relative;
    background: var(--white);
    -webkit-box-shadow: 0px 27px 29px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 27px 29px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    margin-bottom: 0;
}

table.cart td.actions {
    background-color: rgba(0, 0, 0, 0);
    padding: 15px 10px;
    border-top: 1px solid #dddddd;
    border-radius: 0 0 7px 7px;
    -webkit-border-radius: 0 0 7px 7px;
    -moz-border-radius: 0 0 7px 7px;
    -ms-border-radius: 0 0 7px 7px;
    -o-border-radius: 0 0 7px 7px;
}

.woocommerce-cart .woocommerce {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    gap: 0 20px;
}

.woocommerce-cart-form {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    z-index: 1 !important;
}

table.cart td.actions .coupon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    row-gap: 10px;
    border: none;
    padding: 0;
    margin: 0;
}

table.cart td.actions .input-text {
    background: var(--white);
    color: var(--black);
    margin: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 7px 0 0 7px;
    -webkit-border-radius: 7px 0 0 7px;
    -moz-border-radius: 7px 0 0 7px;
    -ms-border-radius: 7px 0 0 7px;
    -o-border-radius: 7px 0 0 7px;
}

.woocommerce-cart table.cart td.product-name::before {
    margin-right: 5px;
}

table.shop_table_responsive tr td[data-title]::before {
    color: var(--black);
}

.woocommerce-cart table.cart td.actions .coupon .coupon-error-notice {
    padding-left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    font-size: 16px;
    font-weight: 500;
}

.actions .input-text:focus {
    background: transparent;
}

.actions .input-text::-webkit-input-placeholder {
    color: var(--black);
    opacity: 0.7;
}

.actions .input-text::-moz-placeholder {
    color: var(--black);
    opacity: 0.7;
}

.actions .input-text:-ms-input-placeholder {
    color: var(--black);
    opacity: 0.7;
}

.actions .input-text::-ms-input-placeholder {
    color: var(--black);
    opacity: 0.7;
}

.actions .input-text::placeholder {
    color: var(--black);
    opacity: 0.7;
}

.actions .coupon .button {
    background: var(--accent-color);
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 7px 7px 0;
    -webkit-border-radius: 0 7px 7px 0;
    -moz-border-radius: 0 7px 7px 0;
    -ms-border-radius: 0 7px 7px 0;
    -o-border-radius: 0 7px 7px 0;
}

.woocommerce table.cart .info-icon {
    font-size: 16px;
    margin-right: 8px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.woocommerce table.cart .info-wrapper {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    cursor: pointer;
}

.actions button {
    background: var(--primary-dark);
    color: var(--white);
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}

.actions button:hover {
    background: var(--primary-dark);
    color: var(--white);
    -webkit-box-shadow: 0px 3px 7px 0px rgba(1, 61, 41, 0.5) !important;
    box-shadow: 0px 3px 7px 0px rgba(1, 61, 41, 0.5) !important;
}

.cart-collaterals .cart_totals {
    position: sticky;
    top: 140px;
    max-width: 330px;
    width: 100%;
    margin-left: auto;
    background: var(--white);
    color: var(--black);
    padding: 15px 15px;
    -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.woocommerce-cart .site {
    overflow: unset;
}

.cart-collaterals .cart_totals table tr th,
.cart-collaterals .cart_totals table tr td {
    background: #f0f0f0 !important;
}

.cart-collaterals .cart_totals table tr:not(:last-of-type) th,
.cart-collaterals .cart_totals table tr:not(:last-of-type) td {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.cart-collaterals .cart_totals table tr.order-total th,
.cart-collaterals .cart_totals table tr.order-total td {
    background-color: #ebdfc6 !important;
}

.cart-collaterals .cart_totals table tr.order-total th {
    font-size: 17px;
}

.cart-collaterals .cart_totals h2 {
    margin-bottom: 20px;
}

.hentry.type-page .entry-header {
    display: none;
}

.wc-proceed-to-checkout .button.checkout-button {
    display: flex;
    background: var(--accent-color);
    border-color: transparent;
    margin-bottom: 0;
    font-size: 14px;
    padding: 8px 20px;
}

.wc-proceed-to-checkout .button.checkout-button:after {
    content: '';
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0;
}

.wc-proceed-to-checkout .button.checkout-button:hover {
    background: var(--accent-dark);
}

.wc-proceed-to-checkout {
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 0 0 7px 7px;
    -webkit-border-radius: 0 0 7px 7px;
    -moz-border-radius: 0 0 7px 7px;
    -ms-border-radius: 0 0 7px 7px;
    -o-border-radius: 0 0 7px 7px;
}

.cart_totals .shop_table {
    overflow: hidden;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    margin-bottom: 15px;
}

td.product-remove {
    vertical-align: middle;
}

.woocommerce-cart button[name='update_cart'] {
    display: none !important;
}

.entry-content a.remove::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    line-height: 1;
}

.hentry .entry-content a {
    text-decoration: none;
}

.woocommerce-message {
    background-color: var(--red-color);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    margin-bottom: 15px;
    font-weight: 500;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-noreviews a,
p.no-comments a {
    text-decoration: underline !important;
}

.woocommerce-message span {
    color: var(--accent-color);
    font-weight: 900;
}

.order-again {
    margin-top: 20px;
}

p.order-again .button::after {
    margin-left: 0;
}

.woocommerce-customer-details {
    margin-top: 40px;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
p.no-comments::before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

}

.woocommerce-cart .wc-empty-cart-message {
    width: 100%;
}

.woocommerce-cart .wc-block-components-notice-banner>svg {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

.cart-product-name-title a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    line-height: 1;
    font-weight: 500;
}

.woocommerce-cart .storefront-breadcrumb {
    position: relative;
}

.woocommerce-cart .edit-link .post-edit-link {
    color: var(--white);
}

.woocommerce-cart-form .shop_table.cart thead tr th {
    background-color: var(--theme-color);
    border-bottom: 1px solid var(--border-color);
}

.woocommerce-cart-form .shop_table.cart thead tr th:first-of-type {
    border-radius: 7px 0 0;
    -webkit-border-radius: 7px 0 0;
    -moz-border-radius: 7px 0 0;
    -ms-border-radius: 7px 0 0;
    -o-border-radius: 7px 0 0;
}

.woocommerce-cart-form .shop_table.cart thead tr th:last-of-type {
    border-radius: 0 7px 0 0;
    -webkit-border-radius: 0 7px 0 0;
    -moz-border-radius: 0 7px 0 0;
    -ms-border-radius: 0 7px 0 0;
    -o-border-radius: 0 7px 0 0;
}

.woocommerce-cart-form .shop_table.cart tbody tr:last-of-type td {
    border-top: 1px solid var(--border-color);
    background-color: var(--white);
}

/* mini cart start css */
ul.woocommerce-mini-cart.cart_list.product_list_widget .quantity del,
.woocommerce-cart-form .woocommerce-cart-form__cart-item .product-price del,
.checkout-right-inner .woocommerce-checkout-review-order-table .cart_item del {
    margin-right: 3px;
}

.woocommerce-cart-form .woocommerce-cart-form__cart-item .woocommerce-Price-amount {
    font-size: 18px;
    font-weight: 600;
}

.woocommerce-cart-form .woocommerce-cart-form__cart-item del .woocommerce-Price-amount {
    font-weight: 500;
}

.cart_totals .cart-subtotal .woocommerce-Price-amount,
.cart_totals tr th,
.cart_totals tr td {
    font-size: 16px;
    font-weight: 600;
}

.cart_totals tr td .woocommerce-remove-coupon {
    color: var(--red-color);
    font-size: 15px;
}

.cart_totals .order-total .woocommerce-Price-amount {
    font-size: 17px;
    font-weight: 600;
}

.woocommerce-cart-form .woocommerce-cart-form__cart-item .product-price del {
    font-size: 16px;
}

.woocommerce-cart-form .woocommerce-cart-form__cart-item .product-price {
    color: var(--black);
}

.checkout-right-inner .shop_table .cart_item .product-total {
    font-size: 16px;
    font-weight: 600;
    min-width: 100px;
}

.checkout-right-inner .shop_table .cart_item .product-total del {
    font-weight: 500;
}

/* mini cart end css */
.woocommerce-checkout-review-order .blockOverlay {
    z-index: 10 !important;
}

/******************** cart page css end ********************/

/******************** checkout page css start ********************/
#order_review_heading,
#order_review {
    width: 100%;
    float: none;
    margin-right: 0;
    clear: none;
}

.checkout-right-inner {
    color: var(--black);
}

.checkout-right-inner,
.checkout-form-inner {
    background: var(--white);
    padding: 20px;
    -webkit-box-shadow: 0px 0px 61px rgba(88, 88, 88, 0.2);
    box-shadow: 0px 0px 61px rgba(88, 88, 88, 0.2);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.checkout-right-inner h3,
.checkout-form-inner h3 {
    margin-bottom: 20px;
    padding: 0;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments,
.woocommerce-error {
    background-color: var(--red-color);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    font-weight: 500;
    margin-bottom: 15px;
    outline: none !important;
}

.woocommerce-error li {
    font-weight: 500;
}

.woocommerce-info a {
    text-decoration: underline !important;
    font-weight: 600;
}

.woocommerce-info a.showlogin:hover,
.woocommerce-info a.showcoupon:hover {
    opacity: 1;
}


.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container .select2-selection--single {
    height: 43px;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-dropdown {
    border-color: var(--border-color);
}

.select2-container--default .select2-selection--single {
    border-radius: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 43px;
    padding-left: 16px;
    padding-right: 30px;
    color: var(--black);
    font-weight: 500;
}

.select2-search--dropdown .select2-search__field {
    color: var(--black);
    padding: 11px 16px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: flex;
    align-items: center;
    margin: 0 13px 0 0;
    width: auto;
}

.select2-container--default .select2-selection--single .select2-selection__arrow:before {
    content: '';
    height: 16px;
    width: 16px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: var(--border-color);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:before {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
}

.notes textarea {
    border: 1px solid #999999;
}

table thead th,
table tr th,
table tr td,
.checkout-right-inner table:not(.has-background) thead th,
.woocommerce-order-pay .shop_table thead th {
    vertical-align: middle;
    padding: 12px 20px;
}

.checkout-right-inner table:not(.has-background) thead th,
.woocommerce-order-pay .shop_table thead th {
    background-color: var(--theme-color);
    color: var(--white);
}

.woocommerce-order-pay .shop_table {
    color: var(--black);
}

.woocommerce-order-pay .shop_table .order_item .product-name {
    font-weight: 500;
}

.woocommerce-order-pay .shop_table .order_item .product-subtotal {
    font-size: 16px;
    font-weight: 600;
}

.woocommerce-order-pay .shop_table .order_item .product-subtotal del {
    font-weight: 500;
    margin-right: 3px;
}

.woocommerce-order-pay .shop_table .order_item:not(:first-of-type) td {
    border-top: 1px solid var(--border-color);
}

.woocommerce-order-pay #order_review {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.woocommerce-order-pay #order_review #payment .form-row {
    padding: 15px;
}

.woocommerce-order-pay #order_review .shop_table {
    margin: 0 0 30px;
}

.checkout-right-inner .shop_table tfoot tr th,
.checkout-right-inner .shop_table tfoot tr td,
.woocommerce-table--order-details tfoot tr th,
.woocommerce-table--order-details tfoot tr td,
.woocommerce-order-pay .shop_table tfoot tr th,
.woocommerce-order-pay .shop_table tfoot tr td {
    font-size: 16px;
    font-weight: 600;
    background-color: #ebdfc6 !important;
}

.checkout-right-inner .shop_table tfoot tr.order-total th,
.checkout-right-inner .shop_table tfoot tr.order-total td {
    font-size: 17px;
}

.woocommerce-table--order-details tfoot:not(:first-of-type) tr th,
.woocommerce-table--order-details tfoot:not(:first-of-type) tr td,
.checkout-right-inner .shop_table tfoot tr:not(:last-of-type) th,
.checkout-right-inner .shop_table tfoot tr:not(:last-of-type) td,
.woocommerce-order-pay .shop_table tfoot tr:not(:last-of-type) th,
.woocommerce-order-pay .shop_table tfoot tr:not(:last-of-type) td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.checkout-right-inner .shop_table tfoot tr td .woocommerce-remove-coupon {
    color: var(--red-color);
    font-size: 15px;
}

.checkout-right-inner .shop_table .cart_item>td {
    border-top: 1px solid var(--border-color);
    font-size: 14px;
    line-height: 1.5;
}

#payment .place-order .button,
.woocommerce-order-pay .form-row #place_order {
    font-size: 14px !important;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--theme-color);
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: transparent;
}

.woocommerce-order-pay .form-row .woocommerce-privacy-policy-text {
    color: var(--black);
}

#eh-stripe-payment-request-button,
.woocommerce-order-pay .ppc-button-wrapper {
    padding: 15px 0 0;
}

#payment .payment_methods>li .payment_box,
#payment .place-order {
    background-color: #f5f5f5b0;
}

.woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce-billing-fields__field-wrapper .form-row-first {
    width: 49%;
    margin-right: 0;
}

.woocommerce-checkout .woocommerce {
    padding: 70px 0 40px !important;
}

form.checkout_coupon.woocommerce-form-coupon {
    margin-top: 15px;
    background: rgb(255, 255, 255);
    padding: 20px 15px;
    -webkit-box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.woocommerce-checkout .checkout_coupon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
}

.woocommerce-checkout .checkout_coupon>p:first-child {
    width: 100%;
}

.woocommerce-checkout .checkout_coupon .form-row-first {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    margin: 0;
    width: 50%;
}

.woocommerce-checkout .checkout_coupon .form-row-first input {
    color: var(--black);
}

.checkout_coupon .coupon-error-notice {
    font-size: 16px;
    margin: 10px 0 0;
    display: block;
    font-weight: 500;
}

.woocommerce-checkout .checkout_coupon .form-row-first input::placeholder {
    color: var(--black);
}

.woocommerce-checkout .checkout_coupon .form-row-last {
    width: auto;
}

.woocommerce-checkout .checkout_coupon .form-row-last button {
    padding: 12px 25px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.woocommerce-checkout .checkout-inline-error-message {
    color: var(--red-color);
    margin: 6px 0 0;
    font-weight: 500;
}

ul.order_details li {
    font-size: 14px;
    text-transform: capitalize;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.cart-empty {
    width: 100%;
    outline: none !important;
}

.checkout-form-inner .woocommerce-account-fields {
    margin-top: 15px;
}

.star-rating span:before,
.quantity .plus,
.quantity .minus,
p.stars a:hover:after,
p.stars a:after,
.star-rating span:before,
#payment .payment_methods li input[type=radio]:first-child:checked+label:before {
    color: #013d29;
}

#payment .payment_methods>.wc_payment_method>label {
    padding: 15px 10px;
    display: flow-root;
    color: var(--black);
    font-weight: 500;
}

#payment .payment_methods li img {
    width: 30px;
}

#payment .payment_methods>li:not(.woocommerce-notice):hover {
    background-color: #f5f5f5;
}

#payment .payment_methods>li:not(.woocommerce-notice):has(input[type=radio]:first-child:checked) {
    background-color: #e7e7e7;
}

table.woocommerce-checkout-review-order-table .product-name {
    width: auto;
}

.checkout-right-inner .shop_table .cart_item .product-name {
    font-size: 15px;
    font-weight: 500;
}

.cart-subtotal td,
.order-total td,
.cart-discount td,
table.woocommerce-checkout-review-order-table .product-total {
    text-align: right;
}

.woocommerce-address-fields__field-wrapper .input-text {
    color: var(--black);
}

/******************** checkout page css end ********************/

/******************** woocommerce-account start css ********************/
body.woocommerce-account .container>.woocommerce {
    padding-top: 70px;
}

body.woocommerce-account .container>.woocommerce:has(.woocommerce-error) {
    padding-top: 55px;
}

body.woocommerce-account article.page {
    margin-bottom: 70px;
}

body.woocommerce-lost-password .woocommerce-error {
    max-width: 600px;
    margin: 15px auto;
}

body.woocommerce-account .edit-link {
    color: var(--white);
}

body.woocommerce-account .storefront-breadcrumb {
    position: static;
    padding-left: 0;
}

.woocommerce-breadcrumb .breadcrumb-separator::after {
    opacity: 1;
    color: #b9b3b3;
}

.woocommerce-MyAccount-navigation {
    position: sticky;
    top: 100px;
    left: 0;
    max-width: 245px;
    width: 100%;
    overflow-y: auto;
    background: var(--white);
    padding: 10px;
    margin-right: 20px;
    box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    -webkit-box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.woocommerce-account .woocommerce:not(header .woocommerce) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul,
.hentry .entry-content .woocommerce-MyAccount-navigation ul li {
    border: 0;
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li {
    color: var(--black);
    margin-bottom: 5px;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    font-size: 16px;
    font-weight: 500;
    padding: 12px !important;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
}

.woocommerce-MyAccount-content {
    width: auto;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    float: none;
    background: var(--white);
    padding: 25px 20px;
    -webkit-box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.woocommerce-MyAccount-content .woocommerce-notices-wrapper .woocommerce-message {
    background-color: var(--theme-color);
}

.woocommerce-MyAccount-content .woocommerce-tabs {
    padding: 20px 0 0;
}

.woocommerce-MyAccount-navigation ul li a::before {
    opacity: 1;
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li:hover,
.hentry .entry-content .woocommerce-MyAccount-navigation ul li.is-active {
    background: var(--theme-color);
    color: var(--white);
}

.woocommerce-MyAccount-content>p:first-of-type {
    margin-bottom: 15px;
}

.woocommerce-MyAccount-content .account-info {
    padding: 15px;
    background-color: #f2f2f2;
    margin: 0 0 30px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.woocommerce-MyAccount-content .account-info p.wd-dashboard-vp {
    color: var(--black);
}

.woocommerce-MyAccount-content .account-info p.wd-dashboard-vp:first-of-type {
    margin-bottom: 20px;
}

.woocommerce-MyAccount-content .account-info p.wd-dashboard-vp a.text-theme {
    font-size: 16px;
    font-weight: 500;
}

.woocommerce-account .woocommerce-info .woocommerce-Button {
    background-color: var(--accent-color) !important;
    font-weight: 500;
    line-height: 1;
    padding: 11px 25px;
    margin: 0;
    text-decoration: none !important;
    border-radius: 30px;
}

.woocommerce-account .sorting-product-form {
    color: var(--black);
}

.woocommerce-account .woocommerce-info .woocommerce-Button::after {
    display: none;
}

.woocommerce-account .woocommerce-info:has(.woocommerce-Button) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.woocommerce-account .woocommerce-Message.woocommerce-Message--info.woocommerce-info:has(.woocommerce-Button) {
    flex-direction: row-reverse;
}

.woocommerce-account .woocommerce-info:has(.woocommerce-Button):before {
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.woocommerce-account .woocommerce-info:has(.woocommerce-Button):after {
    display: none;
}

.woocommerce-account .woocommerce-tabs ul.tabs li a::before {
    display: none;
}

.woocommerce-account #account_display_name_description {
    color: var(--red-color);
    font-weight: 500;
}

.woocommerce-account #account_display_name_description em {
    font-style: normal;
}

.woocommerce-account fieldset,
.woocommerce-account legend {
    background-color: transparent;
}

.woocommerce-notices-wrapper {
    width: 100%;
}

.custom-cart-top {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.custom-cart-top table.cart td.actions .coupon .input-text {
    border-right: 0;
    min-width: 100px;
}

.custom-cart-buttons {
    background-color: var(--white);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    margin-bottom: 15px;
    padding: 8px;
}

.edit-account fieldset {
    margin-bottom: 20px;
}

.wd-dashboard-vp a {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.woocommerce-MyAccount-navigation ul li a::before {
    content: '' !important;
    height: 18px;
    width: 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: var(--black);
    flex-shrink: 0;
    filter: invert(0);
    -webkit-filter: invert(0);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.woocommerce-MyAccount-navigation ul li:hover a::before,
.woocommerce-MyAccount-navigation ul li.is-active a::before {
    filter: invert(1);
    -webkit-filter: invert(1);
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--new-release-add-ons a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='M16 17h6'/%3E%3Cpath d='M19 14v6'/%3E%3Cpath d='M21 10.535V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.675-.955'/%3E%3Cpath d='M3.29 7 12 12l8.71-5'/%3E%3Cpath d='m7.5 4.27 8.997 5.148'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--download a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22a1 1 0 0 1-1-1v-4a1 1 0 0 1 .445-.832l3-2a1 1 0 0 1 1.11 0l3 2A1 1 0 0 1 22 17v4a1 1 0 0 1-1 1z'/%3E%3Cpath d='M18 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 .601.2'/%3E%3Cpath d='M18 22v-3'/%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E");
}

.woocommerce-account .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
}

/* Sleek modern scrollbar style for horizontal tabs scroll */
.woocommerce-account .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    height: 5px;
}

.woocommerce-account .woocommerce-tabs ul.tabs::-webkit-scrollbar-track {
    background: transparent;
}

.woocommerce-account .woocommerce-tabs ul.tabs::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.woocommerce-account .woocommerce-tabs ul.tabs::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/******************** order start css ********************/
table:not(.has-background) tbody td,
table:not(.has-background) tbody th {
    background-color: #fbfbfb;
}

table:not(.has-background) tbody tr:nth-child(2n) td,
table:not(.has-background) tbody tr:nth-child(2n) th {
    background-color: #f0f0f0;
}

.woocommerce-customer-details>h2,
.woocommerce-order-details h2 {
    margin-bottom: 20px;
}

.hentry {
    margin: 0 0 30px;
}

.order_details {
    -webkit-box-shadow: 0px 0px 30px rgba(88, 88, 88, 0.2);
    box-shadow: 0px 0px 30px rgba(88, 88, 88, 0.2);
    overflow: hidden;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

table.order_details {
    color: var(--black);
}

table.order_details thead tr:first-child th {
    padding: 12px 20px;
    background: var(--theme-color) !important;
    color: var(--white);
}

.order_details tfoot tr th {
    word-break: break-all;
}

.woocommerce-MyAccount-content .woocommerce-Pagination {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
}

.woocommerce-Button--next::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.woocommerce-Button--previous::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.woocommerce-customer-details address {
    background: var(--white);
    color: var(--black);
    -webkit-box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    padding: 15px 20px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.woocommerce-order-details .order_item .woocommerce-Price-amount {
    font-size: 16px;
    font-weight: 500;
}

.woocommerce-order .order_details .order_item td.product-total {
    font-size: 16px;
    font-weight: 600;
}

.woocommerce-account .woocommerce-orders-table thead th {
    background: var(--primary-dark);
    color: var(--white);
}

.woocommerce-account .woocommerce-orders-table tr th,
.woocommerce-account .woocommerce-orders-table tr td {
    vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table tr td.woocommerce-orders-table__cell-order-total del,
.woocommerce-account .woocommerce-orders-table tr td.woocommerce-orders-table__cell-order-total .amount {
    font-size: 16px;
    font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-orders tbody th {
    color: var(--black);
}

.woocommerce-account .woocommerce-Button--previous,
.woocommerce-account .woocommerce-Button--next {
    padding: 10px 15px !important;
}

.woocommerce-account .woocommerce-Button--next {
    background-color: var(--accent-color);
}

.woocommerce-account .woocommerce-Button--next:hover,
.woocommerce-account .woocommerce-Button--next:focus {
    background-color: var(--accent-dark);
}

.woocommerce-account .woocommerce-Button--previous:focus,
.woocommerce-account .woocommerce-Button--next:focus {
    color: var(--white);
}

.woocommerce-account .woocommerce-Button--next::after {
    margin-left: 0;
}

.woocommerce-account .woocommerce-Button--previous::before {
    margin-right: 0;
}

.woocommerce-MyAccount-content .filter-right-column .star-rating {
    display: none;
}

.woocommerce-orders-table td,
.woocommerce-orders-table th {
    padding: 10px;
}

.woocommerce-button.button.invoice,
.payment-method-actions a.delete,
.woocommerce-orders-table__cell-order-actions a.view,
a.woocommerce-button.button.pay,
a.woocommerce-button.button.cancel {
    background: var(--theme-color);
    padding: 7px 15px;
    font-size: 14px;
    margin-right: 5px !important;
    gap: 0;
}

a.woocommerce-button.button.cancel {
    background: var(--red-color);
}

.woocommerce-button.button.invoice {
    background-color: var(--accent-color);
}

.woocommerce-form-login {
    background: var(--white);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    margin-bottom: 30px;
}

.woocommerce-account .woocommerce-form-login {
    margin-bottom: 0;
}

.woocommerce-account .woocommerce-form-register .envato-btn-wrapper {
    margin-bottom: 0;
}

.woocommerce-account .woocommerce-form-register .set-new-pass-txt {
    font-weight: 500;
    margin: 0 0 15px;
}

.woocommerce-form-login:not(.u-column1 .woocommerce-form-login) {
    -webkit-box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    padding: 20px;
}

.woocommerce-form-login:not(.u-column1 .woocommerce-form-login) .form-row .woocommerce-form__label-for-checkbox {
    display: block;
    margin-bottom: 0;
}

.woocommerce-form-login input {
    color: var(--black);
}

.woocommerce-form-login button[type="submit"] {
    margin-top: 15px;
}

.woocommerce-form-login .show-password-input.display-password::after {
    color: unset;
}

.woocommerce-button.button.order-actions-button {
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 10px 20px;
}

a.woocommerce-button.button.pay,
a.woocommerce-button.button.cancel {
    color: var(--white);
}

table.shop_table_responsive tr td {
    color: var(--black);
}

ul.order_details li strong {
    color: var(--black);
}

.woocommerce-order-received .woocommerce-order-details h2,
.woocommerce-order-received .woocommerce-customer-details h2 {
    color: var(--white);
    font: var(--h3);
}

ul.order_details {
    margin: 0 0 40px;
}

table.my_account_orders {
    font-size: inherit;
}

.my_account_orders .button.view::after {
    content: '';
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.woocommerce-orders .woocommerce-info,
.woocommerce-downloads .woocommerce-info {
    margin: 0;
}

.woocommerce-downloads .searching-product-form {
    max-width: 320px;
    width: 100%;
}

.woocommerce-account .woocommerce-error {
    margin-top: 15px;
}

.woocommerce-account .woocommerce-error li br:first-of-type {
    display: none;
}

/* turnstile captcha css */
.cf-turnstile iframe {
    max-width: 300px !important;
    width: 100% !important;
    height: auto !important;
    max-height: 75px !important;
}

/******************** order end css ********************/
/******************** downloads start css ********************/
.searching-product-form .banner-search-form .form-input .banner-search-btn {
    padding: 0;
    background-color: transparent;
}

.searching-product-form .banner-search-form .form-input {
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.searching-product-form .banner-search-form .form-input input {
    min-width: 180px;
    padding: 0;
}

.sorting-product-form {
    gap: 8px;
}

.sorting-product-form .nice-select {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.material-kit-box-inner .left-side {
    max-width: 245px;
    width: 100%;
}

.material-kit-box-inner .img-wrapper {
    position: relative;
    padding-top: 70%;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border: 1px solid #d7d7d7;
}

.material-kit-box-inner .img-wrapper>img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
}

.material-kit-box-inner .inner-content ul {
    position: relative;
    max-width: 450px;
    width: 100%;
    row-gap: 10px;
}

.material-kit-box-inner .inner-content ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 48%;
    width: 3px;
    height: 100%;
    background: -o-radial-gradient(var(--accent-color) 0%, rgba(255, 255, 255, 0) 100%, var(--accent-color) 0%);
    background: radial-gradient(var(--accent-color) 0%, rgba(255, 255, 255, 0) 100%, var(--accent-color) 0%);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.material-kit-box-inner .inner-content ul li {
    max-width: calc(50% - 10px);
    width: 100%;
    gap: 6px;
    color: var(--black);
}

.material-kit-box-inner .inner-content ul li a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.material-kit-box-inner .inner-content ul li p {
    line-height: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.material-kit-box-inner .inner-content h4 {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    font-family: var(--second-font);
    color: var(--theme-color);
}

.material-kit-box-inner .inner-content h4 a {
    font-weight: 600;
}

.material-kit-box-inner .inner-content svg {
    width: 16px;
    height: 16px;
}

.material-kit-box-inner .inner-content .rating {
    gap: 1px;
}

.material-kit-box-inner .inner-content .rating svg {
    cursor: pointer;
    height: 13px;
    width: 13px;
}

.material-kit-box-inner .right-side {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 20px;
    height: 100%;
}

.material-kit-box-inner .right-side .btn-wrapper {
    gap: 10px;
    margin: 15px 0 0;
}

.material-kit-box-inner .right-side .btn-wrapper .btn {
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.material-kit-box-inner {
    background: var(--white);
    border: 1px solid #DDDDDD;
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.07);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.07);
    padding: 15px;
    height: 100%;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.material-kit-box.premium-addons-bundle {
    max-width: 100%;
}

.material-wrapper {
    row-gap: 20px;
}

.no-data-box .img-wrapper {
    border: 0;
}

.no-data-box .right-side p {
    margin: 0 0 15px;
}

.sort-download-items {
    gap: 10px;
    margin-bottom: 20px;
}

a.review-rating-workdo {
    gap: 10px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: 15px 0 0;
}

.review-rating-workdo {
    cursor: unset;
}

.review-rating-workdo .rating-value {
    color: var(--black);
    background-color: rgba(245, 158, 11, 0.05);
    border: 1px solid var(--accent-color);
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    gap: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.cr-average-rating-stars .crstar-rating-svg {
    display: flex;
    gap: 1px;
}

.material-kit-box-inner .inner-content .rating span {
    font-size: 12px;
    line-height: 1;
}

.material-kit-box-inner .right-side .btn-wrapper .btn .fa-circle-play {
    font-size: 14px;
}

.material-kit-box-inner .right-side .btn-wrapper .btn svg {
    width: 16px;
    height: 16px;
}

.woocommerce-MyAccount-navigation-link--download a::before {
    content: "\f019" !important;
}

.dash-bundle-title-download {
    padding: 20px 0px;
}

.searching-product-form .banner-search-form .form-input input::-webkit-input-placeholder {
    color: var(--black);
}

.searching-product-form .banner-search-form .form-input input::-moz-placeholder {
    color: var(--black);
}

.searching-product-form .banner-search-form .form-input input:-ms-input-placeholder {
    color: var(--black);
}

.searching-product-form .banner-search-form .form-input input::-ms-input-placeholder {
    color: var(--black);
}

.searching-product-form .banner-search-form .form-input input::placeholder {
    color: var(--black);
}

.sorting-product-form .nice-select .list {
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.package-btn {
    position: relative;
}

.pkg-dd-menu {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 100%;
    width: 100%;
    background-color: var(--white);
    padding: 5px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    display: none;
    -webkit-box-shadow: 1px 2px 6px 1px rgba(0, 0, 0, 0.13);
    box-shadow: 1px 2px 6px 1px rgba(0, 0, 0, 0.13);
}

.package-btn:hover .pkg-dd-menu {
    display: block;
}

.pkg-dd-menu li {
    padding: 5px 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    cursor: pointer;
}

.pkg-dd-menu li a {
    font-size: 12px;
}

.pkg-dd-menu li:hover {
    background-color: var(--accent-color);
}

.woocommerce-info a.button:focus,
.woocommerce-info a.button:hover {
    box-shadow: none;
    background: none;
}

.material-kit-box-inner .star-icon {
    cursor: pointer;
    stroke: #ffc107;
    fill: transparent;
    transition: fill 0.2s ease;
}

.material-kit-box-inner .star-icon.active,
.material-kit-box-inner .star-icon.selected {
    fill: #ffc107;
}

/******************** review_rating_workdo popup start css ********************/
.review_rating_workdo {
    position: fixed;
    z-index: 100;
    top: 50%;
    left: 50%;
    background-color: var(--white);
    text-align: left;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    max-width: 450px;
    width: 100%;
    height: 0;
    max-height: 95vh;
    overflow-y: auto;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.review_rating_workdo.active {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.review_rating_workdo select {
    color: var(--black);
    padding: 10px;
    cursor: pointer;
    appearance: none;
}

.review_rating_workdo .select-wrp {
    position: relative;
}

.review_rating_workdo .select-wrp:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 1;
    height: 16px;
    width: 16px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    color: var(--black);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.review_rating_workdo .product-name {
    margin: 15px 0;
    background: var(--primary-dark);
    color: var(--white);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.review_rating_workdo .top-content button.close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0px;
    background-color: var(--red-color);
    color: var(--white);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.review_rating_workdo .req {
    color: red;
}

.comment-form-rating {
    padding-top: 10px;
    margin-bottom: 15px;
}

.woocommerce-product-review-form .footer-content {
    color: var(--black);
}

.info-messages {
    font-weight: 500;
    background-color: rgba(244, 181, 27, 0.50);
    color: var(--black);
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.review_rating_workdo .response div {
    background-color: rgba(244, 181, 27, 0.50);
    color: var(--black);
    padding: 10px;
    margin-bottom: 15px;
    margin-top: 10px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.review_rating_workdo .form-submit {
    gap: 10px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 15px;
}

.review_rating_workdo label {
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--black);
}

.review_rating_workdo::-webkit-scrollbar {
    width: 4px;
}

.review_rating_workdo::-webkit-scrollbar-track {
    background: #E1E1E1;
}

.review_rating_workdo::-webkit-scrollbar-thumb {
    background: var(--primary-dark);
}

.review_rating_workdo .your-rating .workd-star {
    line-height: 1;
    font-size: 14px;
    color: var(--accent-color);
}

.rating,
.workd-star {
    font-size: 24px;
}

.star {
    cursor: pointer;
    color: var(--accent-color);
    transition: color 0.2s ease;
    -webkit-transition: color 0.2s ease;
    -moz-transition: color 0.2s ease;
    -ms-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    font-weight: 400;

}

.workd-star {
    font-weight: 400;
}

.rating:hover>span,
span.workd-star.checked,
.rating span.star.selected {
    font-weight: 900;
}

.rating:hover>span:hover {
    color: var(--accent-color);
}

.rating>span:hover~span {
    color: var(--accent-color);
    font-weight: 400;
}

/******************** review_rating_workdo popup end css ********************/
/******************** downloads end css ********************/
/******************** address start css ********************/
.woocommerce-MyAccount-content h2,
.woocommerce-Address-title h3 {
    margin-bottom: 15px;
    font: var(--h5) !important;
}

.woocommerce-address-fields__field-wrapper {
    margin-bottom: 15px;
}

.form-row label {
    display: inline-block;
    line-height: 1;
    margin-bottom: 10px;
    font-weight: 500;
    color: #000000;
}

.edit-account input {
    color: var(--black);
}

#account_display_name_description {
    margin-top: 5px;
    display: block;
}

fieldset legend {
    color: var(--black);
    padding: 0;
    margin-left: 0;
    margin-bottom: 10px;
    font-size: 18px;
}

.show-password-input {
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.woocommerce-Address-title {
    margin-bottom: 15px;
}

.woocommerce-Address-title .btn {
    padding: 8px 20px;
}

.woocommerce-Address address {
    padding: 15px;
    font-weight: 500;
    background: var(--white);
    color: var(--black);
    -webkit-box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.woocommerce-MyAccount-content .billing-address-info {
    font-size: 16px;
}

/******************** address end css ********************/
/******************** login start css ********************/
.woocommerce-account .col2-set .u-column2:not(.woocommerce-Address),
.woocommerce-account .col2-set .u-column1:not(.woocommerce-Address) {
    margin-right: 0 !important;
    float: none;
    padding: 20px;
    background: var(--white);
    -webkit-box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.u-columns h2 {
    margin-bottom: 20px;
    font: var(--h3);
}

.woocommerce-form__label .check-span:before {
    content: '';
    position: relative;
    background-color: transparent;
    border: 1px solid var(--black);
    padding: 8px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    -webkit-appearance: none;
}

.woocommerce-account .woocommerce-form__label-for-checkbox {
    cursor: pointer;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    margin-bottom: 15px;
}

.envato-btn-wrapper button,
.envato-btn-wrapper .regiter-envato-btn,
.envato-btn-wrapper a.btn {
    margin: 0 !important;
}

.lost_password a {
    color: var(--black);
    font-weight: 500;
    text-decoration: underline !important;
}

.lost_password a:hover {
    color: var(--theme-color);
}

.envato-btn-wrapper {
    gap: 10px;
    margin: 20px 0;
}

.woocommerce-form__input-checkbox {
    margin-bottom: 0;
    display: none !important;
    cursor: pointer;
}

.woocommerce-form__label .check-span {
    position: relative;
    cursor: pointer;
}

.woocommerce-form__label .woocommerce-form__input-checkbox:checked+.check-span:after {
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 11px;
    border: solid var(--black);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.col2-set#customer_login.row,
.col2-set.addresses.row {
    row-gap: 20px;
    width: -webkit-fill-available;
}

.col2-set#customer_login.row {
    margin: 0 -15px;
}

.woocommerce-privacy-policy-text {
    margin-bottom: 20px;
}

.woocommerce-privacy-policy-text a {
    font-weight: 600;
    text-decoration: underline !important;
}

.g-recaptcha {
    margin: 10px 0;
}

.password-input input#password {
    padding: 11px 35px 11px 16px;
}

.show-password-input:after {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.show-password-input.display-password:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

/******************** login end css ********************/
/******************** reset password page end css ********************/
.lost_reset_password .woocommerce-form-row input:focus,
.lost_reset_password .woocommerce-form-row input {
    background: var(--white);
    color: var(--black);
}

.lost_reset_password .woocommerce-form-row input {
    padding: 12px 40px 12px 20px;
}

form.woocommerce-ResetPassword.lost_reset_password {
    padding: 20px;
    background: var(--white);
    color: var(--black);
    margin: 0 auto;
    -webkit-box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    box-shadow: rgba(88, 88, 88, 0.2) 0px 0px 61px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    max-width: 600px;
    width: 100%;
}

form.woocommerce-ResetPassword.lost_reset_password .form-row {
    width: 100%;
    float: none;
    margin: 0 auto 20px;
}

.woocommerce-lost-password .lost_reset_password p {
    color: var(--black);
}

form.woocommerce-ResetPassword.lost_reset_password .form-row:last-of-type {
    margin-bottom: 0;
}

.woocommerce-password-strength {
    display: flex;
    align-items: center;
    justify-content: end;
    font-weight: 500;
    font-size: 14px;
}

.woocommerce-password-hint {
    font-size: 14px;
    font-weight: 500;
}

.woocommerce-password-strength::after {
    content: '' !important;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 16s-1.5-2-4-2-4 2-4 2'/%3E%3Cline x1='9' x2='9.01' y1='9' y2='9'/%3E%3Cline x1='15' x2='15.01' y1='9' y2='9'/%3E%3C/svg%3E");
}

.woocommerce-password-strength.short {
    color: var(--red-color);
}

.woocommerce-password-strength.good::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d9cd2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='8' x2='16' y1='15' y2='15'/%3E%3Cline x1='9' x2='9.01' y1='9' y2='9'/%3E%3Cline x1='15' x2='15.01' y1='9' y2='9'/%3E%3C/svg%3E");
}

.woocommerce-password-strength.strong::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f834d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' x2='9.01' y1='9' y2='9'/%3E%3Cline x1='15' x2='15.01' y1='9' y2='9'/%3E%3C/svg%3E");
}

/******************** reset password page end css ********************/
/******************** no-results start css ********************/
.vp-results .page-title {
    margin-bottom: 10px;
}

.vp-results .search-box {
    margin: 0;
}

.vp-results .search-box .select-box {
    color: var(--black);
}

/******************** no-results end css ********************/

/******************** tooltip start css ********************/
.custom-tooltip {
    position: relative;
}

.custom-tooltip:hover:after {
    content: attr(data-tooltip);
    background: var(--primary-dark);
    padding: 5px 10px;
    border-radius: 3px;
    display: inline-block;
    position: absolute;
    top: -5px;
    left: 50%;
    font-size: 12px;
    margin: 0 auto;
    color: var(--white);
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    text-align: center;
    transform: translate(-50%, -100%);
    -webkit-transform: translate(-50%, -100%);
    -moz-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    -o-transform: translate(-50%, -100%);
}

.custom-tooltip:hover:before {
    content: " ";
    position: absolute;
    top: -6px;
    left: 50%;
    height: 0;
    width: 0;
    border: solid transparent;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: var(--primary-dark);
    border-width: 5px;
    margin-left: -5px;
    transform: translate(0, 0px);
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
}

/******************** tooltip end css ********************/
/******************** error page start css ********************/
.error404 .inner-content {
    text-align: center;
}

.error404 .inner-content .page-title {
    margin-bottom: 20px;
}

.error404 .not-found {
    padding: 137px 0 60px;
}

.error404 .search-box {
    padding: 0 7px 0 15px !important;
    margin-top: 30px;
}

body.error404 .storefront-breadcrumb,
body.single-product .storefront-breadcrumb {
    color: var(--black);
}

.error404 .not-found .search-form {
    max-width: 850px;
    margin: 0 auto;
}

.error404 .search-box .search-btn {
    background-color: var(--theme-color);
}

.error404 .search-box .search-btn:hover,
.error404 .search-box .search-btn:focus {
    background-color: var(--primary-dark);
    box-shadow: none;
}

/******************** error page end css ********************/

/******************** shop page css start ********************/
.woocommerce-shop .search-box .search-btn-bg {
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

/******************** shop page css end ********************/

/*************************************************** shopify single page css start ****************************************************/
/* main-background start css */
.ecom-single-slider.flex-slider {
    margin: 0;
}

.theme-details-section .main-background {
    padding: 70px 0 40px;
    background-color: #f5f5f5;
}

.single-product .theme-details-section .theme-details-inner .details-list {
    color: var(--black);
}

.theme-details-section .theme-details-left .ecom-single-slide {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
}

.theme-details-section .theme-details-left {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.theme-details-section .theme-details-left .theme-details-imgs img {
    object-fit: scale-down;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.theme-details-section .theme-details-left .bookinggo-theme-img img {
    border: 1px solid var(--border-color);
}

.theme-details-inner .theme-details-top .product_title {
    color: var(--black);
    margin-bottom: 15px;
}

.theme-details-inner .theme-details-top .product_title .addon-seo-h1 {
    font-size: 15px;
    color: #464646;
    font-weight: 600;
    margin-top: 10px;
    letter-spacing: normal;
}

.theme-details-inner .theme-details-top .product_title:has(.category-discount-badge-title) .product-text {
    margin: 0 10px 0 0;
}

.theme-details-inner .theme-details-top .details-list .underline {
    font-size: 16px;
    text-underline-offset: 4px;
}

.theme-details-inner ins.wp-sale-price {
    font-size: 25px !important;
}

.theme-details-inner .theme-details-top .p-details {
    margin-bottom: 15px;
    gap: 5px;
    color: var(--black);
    font-size: 17px;
    font-weight: 600;
}

.theme-details-top .details-list li {
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    font-weight: 500;
}

.theme-details-section .theme-details-inner li:not(:last-of-type) {
    margin-bottom: 10px;
}

.theme-details-section .theme-details-inner li p {
    margin-left: 10px;
    font-weight: 600;
}

.theme-details-section .theme-details-inner li span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    line-height: 1;
    color: var(--black);
}

.theme-details-section .theme-details-inner .details-list li::before {
    content: "\f00c";
    margin-right: 10px;
    background: var(--primary-dark);
    color: var(--white);
    width: 16px;
    height: 16px;
    font-family: "Font Awesome 5 Free";
    font-size: 8px;
    font-weight: 900;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
}

.single .price {
    margin: 15px 0;
    gap: 10px;
}

.single .theme-details-inner .woocommerce-Price-amount,
.theme-details-top .vp-sale-price {
    font-size: 34px;
    font-weight: 800;
}

.single-product div.product p.price {
    margin: 20px 0;
}

.single .theme-details-inner .price,
.theme-details-top .vp-sale-price {
    color: var(--black);
}

.theme-details-section .theme-details-inner .btn-wrapper {
    margin: 20px 0 0;
}

.theme-details-section .theme-details-inner .btn {
    padding: 10px 25px;
}

/* main-background end css */
/******************** theme-details-section start css ********************/
.single-shopify-themes .storefront-breadcrumb {
    color: var(--black);
}

.single-shopify-themes .theme-details-section .main-background {
    background-color: var(--white);
    padding-bottom: 0;
}

.single-shopify-themes .theme-details-section .details-list {
    gap: 15px;
}

.single-shopify-themes .theme-details-section .details-list li {
    max-width: calc(50% - 10px);
    width: 100%;
    margin-bottom: 0;
}

.single-shopify-themes .theme-details-section .theme-details-inner .Specifications ul li p {
    margin-left: 0;
    line-height: 1.2;
}

.single-shopify-themes .theme-details-section .theme-details-inner .Specifications ul li {
    gap: 10px;
    font-size: 14px;
    line-height: 1.2;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-width: calc(50% - 10px);
    width: 100%;
    margin-bottom: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.single-shopify-themes .theme-details-section .theme-details-inner .Specifications ul li strong {
    margin-bottom: 7px;
    display: block;
    color: var(--black);
}

.single-shopify-themes .theme-details-section .theme-details-inner .Specifications .specification-list {
    margin-top: 20px;
    gap: 15px;
}

.single-shopify-themes .theme-details-section .theme-details-inner .Specifications .specification-list .WorkDO-product-Tags p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.single-shopify-themes .theme-details-section .theme-details-inner .Specifications .specification-list li:nth-child(2) strong,
.single-shopify-themes .theme-details-section .theme-details-inner .Specifications .specification-list li:nth-child(1) strong {
    margin-bottom: 0;
    margin-right: 5px;
}

.single-shopify-themes .theme-details-section .theme-details-left {
    -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.single-shopify-themes .theme-details-section .theme-details-left .theme-details-img {
    position: relative;
    padding-top: 88%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.single-shopify-themes .theme-details-section .theme-details-left .theme-details-img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-position: top;
    object-position: top;
    -o-object-fit: cover;
    object-fit: cover;
}

.single-shopify-themes .theme-details-section .theme-details-left .theme-details-img .view-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--accent-color);
    color: var(--white);
    width: 40px;
    height: 40px;
    font-size: 20px;
    padding: 5px;
    cursor: pointer;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.single-shopify-themes .theme-details-section .theme-details-inner .Specifications h4 {
    margin-top: 15px;
}

/******************** theme-details-section end css ********************/
.single-shopify-themes .customizable-sec .tab-head-row {
    background: var(--light-color);
    overflow: hidden;
    border-radius: 10px;
    padding: 0 !important;
}

.single-shopify-themes .customizable-sec .tab-head-row ul {
    padding: 0 15px 15px;
    max-height: 355px;
}

.single-shopify-themes .customizable-sec .tab-head-row li:not(:last-of-type) {
    margin-bottom: 15px;
}

.single-shopify-themes .customizable-sec .tab-head-row h3 {
    padding: 15px 10px;
    text-align: center;
    background: var(--theme-color);
    color: var(--white);
    margin-bottom: 15px;
}

.single-shopify-themes .customizable-sec .tab-head-row li a {
    border: 1px solid transparent;
    background-color: transparent;
}

.single-shopify-themes .customizable-sec .tab-head-row li a:hover,
.single-shopify-themes .customizable-sec .tab-head-row li a.active {
    background-color: var(--accent-color);
    color: var(--white);
}

.single-shopify-themes .customizable-sec .tab-head-row li a span {
    display: block;
}

.single-shopify-themes .customizable-sec .tabs-container .tab-image {
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
    padding-top: 45%;
    border: 1px solid var(--border-color);

}

.single-shopify-themes .customizable-sec .tab-wrp .item::before {
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.single-shopify-themes .customizable-sec .tabs-container .tab-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #dddddd73;
}

.single-shopify-themes .customizable-sec .tab-wrp {
    padding: 0 !important;
}

.single-shopify-themes .customizable-sec .tab-wrp .item::before {
    content: attr(data-title);
}

/******************** price-bar-sec start css ********************/
.single-shopify-themes .price-bar-sec {
    position: relative;
    z-index: 1;
}

.single-shopify-themes .price-bar-sec-title p {
    margin: 12px auto auto;
    max-width: 350px;
    width: 100%;
}

.single-shopify-themes .price-bar-main {
    background-color: var(--light-color);
    border: 1px solid var(--border-color);
    padding: 15px;
    box-shadow: var(--shadow-lg);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.single-shopify-themes .price-bar-sec table.table-responsive tfoot tr td p {
    font-weight: 600;
}

.single-shopify-themes .price-bar-sec table.table-responsive tfoot tr td:first-of-type p {
    font-size: 18px;
}

.single-shopify-themes .price-bar-sec table.table-responsive tfoot tr td {
    padding: 15px 10px;
    border: none;
}

.single-shopify-themes .price-bar-sec .price-bar-total p {
    font-size: 16px;
    letter-spacing: 1px;
    text-align: center;
}

.single-shopify-themes .price-bar-sec table tr td {
    vertical-align: middle;
    min-width: 200px;
}

.single-shopify-themes .sp-price-bar table tr th {
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
    color: var(--black);
    border-right: none;
    padding: 0 10px 10px;
}

.single-shopify-themes .sp-price-bar table tr td {
    color: var(--black);
    background-color: var(--light-color) !important;
    border-bottom: 1px solid var(--border-color);
    letter-spacing: 0;
    border-right: none;
}

.single-shopify-themes table tr th {
    padding: 10px;
    background-color: var(--light-color);
    font-weight: 600;
    letter-spacing: 0 !important;
}

.single-shopify-themes .price-bar-inner {
    overflow-x: auto;
    width: 100%;
}

.single-shopify-themes .price-bar-sec table.table-responsive {
    position: relative;
}

.single-shopify-themes .price-bar-sec .price-bar-inner::-webkit-scrollbar {
    height: 5px;
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.single-shopify-themes .price-bar-sec .price-bar-inner::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.single-shopify-themes .price-bar-sec .price-bar-inner::-webkit-scrollbar-thumb {
    height: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.single-shopify-themes table {
    border: 0;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: auto;
}

.single-shopify-themes table tr {
    display: table-row;
}

.single-shopify-themes table tr th,
.single-shopify-themes table tr td {
    font-size: 16px;
    text-align: center;
    border-right: 1px solid var(--border-color);
}

.single-shopify-themes table tr td {
    padding: 10px;
    display: table-cell;
    color: #7A7A7A;
    letter-spacing: 2px;
}

.single-shopify-themes table tr th:last-child,
.single-shopify-themes table tr td:last-child {
    border-right: 0;
}

.single-shopify-themes table tfoot .price-bar-total p span,
.single-shopify-themes table tbody tr td:nth-child(2) span {
    padding: 5px 10px;
    line-height: 1;
    background-color: #ff000033;
    border-radius: 50px;
    display: inline-block;
    color: red;
    min-width: 80px;
}

.single-shopify-themes .sp-price-bar table tr td .rate-our {
    color: var(--theme-color);
    font-weight: 500;
}

.single-shopify-themes table tr:last-of-type {
    border-bottom: 0;
}

/******************** outstanding-features-sec start css ********************/
.single-shopify-themes .outstanding-features-row {
    padding: 15px 0;
    margin: -15px -10px;
}

.single-shopify-themes .outstanding-features-sec .outstanding-card {
    padding: 0 10px;
}

.single-shopify-themes .outstanding-features-row .swiper-wrapper {
    row-gap: 20px;
}

.outstanding-features-sec {
    background-color: var(--accent-light);
}

.single-shopify-themes .outstanding-features-sec .outstanding-card-inner {
    overflow: hidden;
    background-color: var(--white);
    padding: 15px;
    height: 100%;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.single-shopify-themes .outstanding-card-inner .outstanding-card-image {
    background-color: var(--primary-dark);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 8px;
    margin: 0 auto 10px;
}

.single-shopify-themes .outstanding-card-inner .outstanding-card-image svg {
    width: 26px;
    height: 26px;
}

.single-shopify-themes .outstanding-features-sec .outstanding-card-content {
    background-color: var(--white);
    text-align: center;
}

.single-shopify-themes .outstanding-features-sec .outstanding-card-content h3 {
    margin-bottom: 12px;
    font-size: 18px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.single-shopify-themes .outstanding-features-sec .outstanding-card-content p {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/******************** outstanding-features-sec end css ********************/
/******************** features-card-section start css ********************/
.features-card-section .tab-wrp .item.active .item-content {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.features-card-section .tab-wrp .item .item-content {
    opacity: 0;
    visibility: hidden;
    height: 0;
}

.features-card-section .section-title .section-title-left {
    max-width: 650px;
    width: 100%;
}

.features-card-section .tab-wrp {
    padding: 40px 20px 40px 0;
    gap: 20px;
    background-color: var(--white);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.features-card-section .tab-head-row li a {
    position: relative;
    text-transform: capitalize;
    background-color: var(--white);
    color: var(--black);
    font-size: 16px;
    font-weight: 500;
    padding: 10px 10px 10px 20px;
    gap: 10px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.features-card-section .tab-head-row li a span {
    display: block;
    line-height: 1;
}

.features-card-section .tab-wrp .item.active::before {
    background-color: var(--theme-color);
    color: var(--white);
    border-color: var(--theme-color);
}

.features-card-section .tab-wrp .item::before {
    content: attr(data-title);
    background-color: var(--light-color);
    border: 1px solid var(--border-color);
    color: var(--black);
    font-family: var(--second-font);
    font: var(--h6);
    font-weight: 600;
    padding: 10px 30px 10px 20px;
    text-transform: capitalize;
    display: block;
    cursor: pointer;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: all ease-in-out .5s;
    -moz-transition: all ease-in-out .5s;
    -ms-transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
}

.features-card-section .tab-wrp .item {
    position: relative;
}

.features-card-section .tab-wrp .item.active::after {
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    filter: invert(1);
    -webkit-filter: invert(1);
}

.features-card-section .tab-head-row li a svg {
    width: 22px;
    height: 22px;
}

.features-card-section .tab-head-row li:not(:last-of-type) {
    margin-bottom: 18px;
}

.features-card-section .tab-head-row li a.active {
    background-color: var(--theme-color);
}

.features-card-section .tab-head-row {
    background-color: #FBFAEC;
    max-width: 270px;
    width: 100%;
    padding: 20px;
    border-radius: 0 10px 10px 0;
    -webkit-border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    -ms-border-radius: 0 10px 10px 0;
    -o-border-radius: 0 10px 10px 0;
}

.features-card-section .tab-head-row ul {
    height: 470px;
    overflow: auto;
    padding-right: 15px;
}

.features-card-section .tab-head-row ul::-webkit-scrollbar {
    width: 10px;
    height: 5px;
    overflow: hidden;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.features-card-section .tab-head-row ul::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.features-card-section .tab-head-row ul::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.features-card-section .tabs-container {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.features-card-section .tabs-container .tab-image {
    background-color: var(--white);
    overflow: hidden;
    padding: 10px;
    box-shadow: 0px 18px 54px 0px rgba(2, 35, 50, 0.3);
    -webkit-box-shadow: 0px 18px 54px 0px rgba(2, 35, 50, 0.3);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.features-card-section .tabs-container p {
    font: var(--h5);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 20px;
}

/******************** features-card-section start end ********************/
/******************** theme-multi-lang start css ********************/
.single-shopify-themes .theme-multi-lang .theme-lang-opc .theme-lang-inner {
    border: 1px solid var(--border-color);
    background-color: var(--white);
    color: var(--black);
    padding: 10px;
    border-radius: 8px;
}

.single-shopify-themes .theme-multi-lang .theme-lang-opc .theme-lang-inner h3 {
    margin-top: 10px;
    font-size: 14px;
    color: var(--black) !important;
}

.single-shopify-themes .theme-multi-lang .theme-lang-opc .theme-lang-inner span {
    font: var(--h3);
    font-weight: 600;
    line-height: 1;
}

.single-shopify-themes .theme-multi-lang .theme-lang-slider .theme-lang-inner svg {
    width: 30px;
    height: 25px;
    border-radius: 6px;
}

.single-shopify-themes .theme-lang-slider .theme-lang-inner h3 {
    font-size: 16px;
    color: var(--black) !important;
}

.single-shopify-themes .theme-lang-slider .theme-lang-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 15px;
    border-radius: 5px;
    background: var(--white);
    color: var(--black);
    width: 100%;
}

.single-shopify-themes .theme-multi-lang .theme-lang-wrp {
    gap: 15px;
    overflow: hidden;
}

.single-shopify-themes .theme-multi-lang .theme-lang-opc {
    width: 100%;
}

.single-shopify-themes .theme-multi-lang .theme-lang-right {
    max-width: calc(100% - 210px);
    width: 100%;
}

.single-shopify-themes .theme-multi-lang .theme-lang-right .theme-lang-slider {
    margin: 0 -10px;
}

.single-shopify-themes .theme-lang-slider .theme-lang {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.single-shopify-themes .theme-lang-slider .swiper-slide {
    width: auto;
}

/******************** theme-multi-lang end css ********************/
/******************** multi-lang start css ********************/
.single-shopify-themes .multi-lang {
    background-color: #F4F1F1;
}

.single-shopify-themes .multi-lang .multi-lang-opc {
    gap: 20px;
}

.single-shopify-themes .multi-lang-opc .multi-lang-info .multi-lang-inner svg {
    margin: 0 auto 15px;
}

.single-shopify-themes .multi-lang-opc .multi-lang-info {
    max-width: 150px;
    width: 100%;
    padding: 20px 35px;
    background-color: var(--white);
    text-align: center;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.single-shopify-themes .multi-lang-opc .multi-lang-info .multi-lang-inner h6 {
    text-transform: uppercase;
}

/******************** multi-lang end css ********************/
/******************** key-benefits-section css start *********************/
.single-shopify-themes .key-benefits-section .service-card .service-icon {
    margin: 0 auto 15px;
    outline: 0;
    border-radius: 10px;
}

.single-shopify-themes .key-benefits-section .service-card {
    padding: 15px;
    border-bottom: 3px solid var(--accent-color);
    -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/********************* key-benefits-section css end *********************/
/********************* setup-process-section css start *********************/
.single-shopify-themes .setup-process-section .section-title p,
.single-shopify-themes .new-feature-sec .section-title p,
.single-shopify-themes .theme-page-sec .section-title p,
.single-shopify-themes .shopify-theme-details .section-title p,
.single-shopify-themes .other-business-sec .section-title p {
    max-width: 40%;
    width: 100%;
    margin: 15px auto 0;
}

.single-shopify-themes .setup-process-section .setup-process-wrp {
    max-width: 850px;
    margin: 0 auto;
}

.single-shopify-themes .setup-process-section .setup-icon-wrp {
    position: relative;
}

.single-shopify-themes .setup-process-section .setup-icon {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-color: var(--theme-color);
    color: var(--white);
}

.single-shopify-themes .setup-process-section .setup-process-wrp ul li:not(:last-of-type) .setup-icon-wrp:before {
    content: '';
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: calc(100% - 75px);
    border: 1px solid var(--border-color);
    bottom: 0;
}

.single-shopify-themes .setup-process-section .setup-icon svg {
    height: 30px;
    width: 30px;
}

.single-shopify-themes .setup-process-section .setup-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.single-shopify-themes .setup-process-section .setup-process-wrp ul li {
    gap: 20px;
}

.single-shopify-themes .setup-process-section .setup-process-wrp ul li:not(:last-of-type) {
    margin: 0 0 25px;
}

.single-shopify-themes .setup-process-section .setup-content .setup-step {
    display: inline-block;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 14px;
    padding: 2px 10px;
    color: var(--white);
    background-color: var(--accent-color);
    border-radius: 4px;
    margin: 0 0 10px;
}

.single-shopify-themes .setup-process-section .setup-content h3 {
    margin: 0 0 10px;
}

/********************* setup-process-section css end *********************/
/********************* new-feature-sec css start *********************/
.single-shopify-themes .new-feature-slider {
    padding: 15px 10px;
    margin: -15px -10px;
}

.single-shopify-themes .new-feature-sec .new-feature-inner {
    border-radius: 10px;
}

.single-shopify-themes .new-feature-sec .new-feature-img {
    position: relative;
    padding-top: 102%;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.1);
}

.single-shopify-themes .new-feature-sec .new-feature-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.single-shopify-themes .new-feature-sec .row,
.single-shopify-themes .theme-performance-sec .row,
.single-shopify-themes .key-benefits-section .row {
    row-gap: 20px;
    margin: 0 -10px;
}

.single-shopify-themes .new-feature-sec .row [class*="col-"],
.single-shopify-themes .theme-performance-sec .row [class*="col-"],
.single-shopify-themes .key-benefits-section .row [class*="col-"] {
    padding: 0 10px;
}

/********************* new-feature-sec css end *********************/
/********************* theme-page-sec css start *********************/
.single-shopify-themes .theme-page-sec .section-title h2 span,
.single-shopify-themes .setup-process-section .section-title h2 span,
.single-shopify-themes .outstanding-features-sec .section-title h2 span,
.single-shopify-themes .price-bar-sec .section-title h2 span,
.single-shopify-themes .other-business-sec .section-title h2 span,
.single-shopify-themes .new-feature-sec .section-title h2 span,
.single-shopify-themes .key-benefits-section .section-title h2 span {
    border: none !important;
}

.single-shopify-themes .theme-page-slider,
.single-shopify-themes .details-slider {
    padding: 15px 10px;
    margin: -15px -10px;
}

.single-shopify-themes .theme-page-sec .page-card-inner {
    border: 1px solid var(--border-color);
    overflow: hidden;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.single-shopify-themes .theme-page-sec .page-card-image {
    position: relative;
    padding-top: 120%;
    width: 100%;
    display: block;
    border-bottom: 1px solid var(--border-color);
}

.single-shopify-themes .theme-page-sec .page-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

/********************* theme-page-sec css end *********************/
/******************** shopify-theme-details start css ********************/
.single-shopify-themes .shopify-theme-details .details-card {
    height: 100%;
}

.single-shopify-themes .shopify-theme-details .details-card-inner {
    height: 100%;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    padding: 20px;
    text-align: left;
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.single-shopify-themes .shopify-theme-details .details-card-inner .details-card-img {
    position: relative;
    width: 60px;
    height: 60px;
    outline-offset: 5px;
    outline: 1px dashed var(--theme-color);
    background-color: var(--primary-dark);
    color: var(--white);
    margin: 0 0 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.single-shopify-themes .shopify-theme-details .details-card-inner .details-card-img svg {
    width: 30px;
    height: 30px;
}

.single-shopify-themes .shopify-theme-details .details-card-inner h3 {
    margin-bottom: 15px;
}

.single-shopify-themes .shopify-theme-details .details-card-inner p {
    margin-bottom: 15px;
    flex: 1;
}

.single-shopify-themes .shopify-theme-details .details-card-inner a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 10px 15px;
}

/******************** shopify-theme-details end css ********************/
/******************** other-business-sec start css ********************/
.single-shopify-themes .other-business-sec .business-card-inner {
    padding: 20px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-dark);
    border-radius: 10px;
    -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.single-shopify-themes .other-business-sec .business-icon {
    height: 50px;
    width: 50px;
    border-radius: 10px;
    background-color: var(--primary-dark);
    color: var(--white);
}

.single-shopify-themes .other-business-sec .business-icon-wrp {
    gap: 15px;
    margin: 0 0 15px;
}

.single-shopify-themes .other-business-sec .business-icon svg {
    height: 26px;
    width: 26px;
}

.single-shopify-themes .other-business-sec .business-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.single-shopify-themes .other-business-sec .business-content h3 {
    margin: 0 0 8px;
}

.single-shopify-themes .other-business-sec .business-tags {
    gap: 10px;
}

.single-shopify-themes .other-business-sec .business-tag {
    line-height: 1;
    display: inline-block;
    font-size: 12px;
    text-transform: capitalize;
    padding: 5px 10px;
    background-color: #f2f2f2;
}

.single-shopify-themes .other-business-sec .other-business-card {
    max-width: calc(33.33% - 13.33px);
}

/******************** other-business-sec end css ********************/
/******************** theme-performance-sec start css ********************/
.single-shopify-themes .theme-performance-sec .business-card-inner {
    border-left: 1px solid var(--border-color);
}

.single-shopify-themes .theme-performance-sec .business-card-top {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.single-shopify-themes .theme-performance-sec .business-card-inner .business-tag {
    background-color: transparent;
    border: 1px solid var(--theme-color);
    color: var(--theme-color);
    font-weight: 600;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.single-shopify-themes .theme-performance-sec .business-content h3 {
    margin: 10px 0 0;
}

.single-shopify-themes .theme-performance-sec .progress-wrp {
    margin: 15px 0 0;
}

.single-shopify-themes .theme-performance-sec .progress-wrp .progress-info span {
    font-weight: 600;
    color: var(--black);
}

.single-shopify-themes .theme-performance-sec .progress-wrp .progress-info {
    margin: 0 0 15px;
}

.single-shopify-themes .theme-performance-sec .progress-wrp .progress-info h4 {
    color: var(--black);
}

.single-shopify-themes .theme-performance-sec .progress-wrp .progress {
    width: 100%;
    height: 8px;
    border-radius: 30px;
    background-color: #f2f2f2;
    overflow: hidden;
}

.single-shopify-themes .theme-performance-sec .progress-wrp .progress .progress-bar {
    height: 100%;
    background-color: var(--accent-color);
}

/******************** theme-performance-sec end css ********************/

/******************** shopify-tabs css ********************/
.single-shopify-themes .tabs-wrapper-main {
    overflow: hidden;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.single-shopify-themes .shopify-tabs ul.pages-tabs {
    background: var(--light-color);
    padding: 8px;
    margin: 0 auto;
    border: 1px solid var(--border-color);
    gap: 8px;
    width: auto !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: start;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.single-shopify-themes .shopify-tabs .tabs-wrapper-main {
    margin: 0 auto 40px;
}

.single-shopify-themes ul.pages-tabs li a {
    position: relative;
    padding: 10px 15px;
    color: var(--black);
    font-size: 16px;
    font-weight: 500;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 1;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    transition: all 0.3s ease-in-out;
}

.single-shopify-themes ul.pages-tabs li a:hover {
    color: var(--theme-color);
}

.single-shopify-themes ul.pages-tabs li.active a {
    background: var(--theme-color);
    color: var(--white);
}

.single-shopify-themes ul.pages-tabs li a svg {
    height: 18px;
    width: 18px;
    flex-shrink: 0;
}

.tab-contents {
    display: none;
}

.tab-contents.active {
    display: block;
}

.shopify-content .shopify-content-wrp h2 {
    font: var(--h4);
    margin-bottom: 15px;
}

.shopify-content .shopify-content-wrp h3 {
    font: var(--h5);
    margin-bottom: 15px;
}

.shopify-content .shopify-content-wrp p {
    margin-bottom: 15px;
}

.shopify-content-wrp:not(:last-of-type) {
    margin-bottom: 15px;
}

.shopify-content .shopify-content-wrp ul li {
    list-style: disc;
}

.shopify-content .shopify-content-wrp ul li:not(:last-of-type) {
    margin-bottom: 10px;
}

.shopify-content .shopify-content-wrp ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

.shopify-content .shopify-content-wrp a.text-theme {
    font-weight: 500;
}

.single-shopify-themes .sec-box-shadow {
    margin-bottom: 0;
}

.single-shopify-themes #category-tabs-2,
.single-shopify-themes #category-tabs-3 {
    padding-bottom: 70px;
}

/*************************************************** shopify single page css end ****************************************************/

/******************** cart-header start css  ********************/
.woocommerce-active .wdo-header .site-header-cart {
    padding: 12px 0;
}

.site-header-cart .widget_shopping_cart {
    width: 280px;
    top: 73px;
    left: -50%;
    display: none;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.wdo-header .site-header-cart .cart-contents::after {
    display: none;
}

.site-header-cart .widget_shopping_cart .product_list_widget li a.remove {
    position: absolute;
    left: auto;
    right: 5px;
    bottom: 15px;
    width: 20px;
    height: 20px;
}

ul.woocommerce-mini-cart.cart_list.product_list_widget {
    max-height: 50vh !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}

ul.woocommerce-mini-cart.cart_list.product_list_widget::-webkit-scrollbar {
    width: 3px;
}

ul.woocommerce-mini-cart.cart_list.product_list_widget::-webkit-scrollbar-thumb {
    background: var(--accent-color);
}

ul.woocommerce-mini-cart.cart_list.product_list_widget::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px #ddd;
    box-shadow: inset 0 0 5px #ddd;
}

.widget_shopping_cart .product_list_widget li {
    position: relative;
    padding: 15px !important;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.widget_shopping_cart .product_list_widget li:not(:last-of-type) {
    border-bottom: 1px solid #818181;
}

.site-header-cart .widget_shopping_cart .total {
    border-top: 1px solid #818181;
}

.widget_shopping_cart .mini_cart_item a,
.widget_shopping_cart .mini_cart_item .instalation-cart {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    width: 100%;
    padding: 0 20px 0 0 !important;
    gap: 10px;
    color: var(--white);
    margin: 0 0 5px;
}

.widget_shopping_cart .woocommerce-Price-amount {
    font-size: 16px;
    font-weight: 500;
}

.widget_shopping_cart p.buttons .button:first-child {
    background: var(--theme-color);
}

.product_list_widget li img {
    max-width: 50px;
    float: none;
    margin-left: 0 !important;
    border: 1px solid #ccc;
}

.widget_shopping_cart p.total {
    padding: 15px !important;
}

.widget_shopping_cart p.buttons .button {
    position: relative;
    font-size: 14px;
    padding: 12px;
}

.widget_shopping_cart p.buttons .button::after {
    display: none;
}

.widget_shopping_cart p.buttons {
    padding: 0 15px 20px 15px !important;
}

.widget_shopping_cart p.buttons .button:last-child {
    background: var(--accent-color);
}

.widget_shopping_cart p.buttons .button:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.5s ease;
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -ms-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
}

.widget_shopping_cart p.buttons .button:hover:before {
    left: 100%;
}

.widget_shopping_cart p.buttons .button:last-child:before {
    animation: shimmer-infinite 4s ease-in-out infinite;
}

.widget_shopping_cart p.buttons .button:first-child:hover {
    background: var(--primary-dark);
}

.widget_shopping_cart p.buttons .button:last-child:hover {
    background: var(--accent-dark);
}

.site-header-cart .widget_shopping_cart {
    background-color: #17252d;
}

.site-header-cart .widget_shopping_cart .buttons,
.site-header-cart .widget_shopping_cart .total {
    background-color: transparent;
}

.site-header-cart .widget_shopping_cart a.remove::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    background-color: var(--red-color);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

/**************************************** home page start *******************************************/

/******************************** category-content-sec css start ********************************/
.blog-wrapper .main-category {
    padding: 0;
}

.blog-wrapper .category-option .option-title {
    padding: 20px 20px 0;
}

.blog-wrapper .category-list {
    padding: 0 20px 20px;
    max-height: 400px;
    overflow-y: auto;
}

/******************************** category-content-sec css end ********************************/
/*************************************************** support page start css ******************************************************/
/******************** contact-home-section start css ********************/
.home-section {
    position: relative;
    padding: 70px 0 80px;
    background: var(--dark-color);
    color: var(--white);
    overflow: hidden;
}

.home-section .container {
    position: relative;
    z-index: 1;
}

.home-section:before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 32vw;
    height: 32vw;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.home-section:after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -15%;
    width: 27vw;
    height: 27vw;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.home-section .section-title h1 {
    color: var(--white);
}

.contact-inner-col .wpcf7-response-output {
    border: 0 !important;
    text-align: center;
    margin: 15px 0 !important;
}

/******************** contact-home-section end css ********************/
/******************************************* add-ons page start **************************************************/
/******************** breadcrumb start css ********************/
.col-full {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

/******************** breadcrumb end css ********************/
/******************** dash-saas start css ********************/
.workdo-dash-saas-banner .container .img-wrapper img {
    max-height: 370px;
    -o-object-fit: scale-down;
    object-fit: scale-down;
    -o-object-position: right;
    object-position: right;
}

.workdo-dash-saas-banner .btn-wrapper {
    gap: 10px;
}

.search-box .select-box {
    min-width: 250px;
    width: auto;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    margin-right: 10px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
}

.search-with-cate .nice-select .list {
    height: 0;
}

.search-with-cate .nice-select.open .list {
    max-height: 400px;
    min-height: 300px;
    overflow: auto;
    z-index: 10;
}

.search-box .select-box .list::-webkit-scrollbar {
    width: 5px;
}

.search-box .select-box .list::-webkit-scrollbar-thumb {
    background: var(--theme-color);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.search-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: var(--white);
    border: 1px solid var(--theme-color);
    padding: 0 10px 0 20px;
    margin-bottom: 30px;
    margin-top: -30px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    position: relative;
}

.archive .search-box {
    padding: 0 10px 0 0;
}

.blog-search-box.search-box,
.workdo-document-autocomplete-form {
    padding-inline-start: 10px !important;
}

.category-shopify .search-box {
    padding: 0 10px 0 20px;
}

.search-box .search-icon {
    align-self: center;
    -ms-grid-row-align: center;
    -ms-flex-item-align: center;
}

.search-box input {
    border: 0;
    background: transparent !important;
    color: var(--black);
    padding: 10px 15px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.search-box input::-webkit-input-placeholder {
    color: var(--black);
}

.search-box input::-moz-placeholder {
    color: var(--black);
}

.search-box .search-btn-bg {
    padding: 12px 16px;
}

.search-box input:-ms-input-placeholder {
    color: var(--black);
}

.search-box input::-ms-input-placeholder {
    color: var(--black);
}

.search-box input::placeholder {
    color: var(--black);
}

.search-box .btn {
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: 7px 0;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.search-with-cate.has-mobile-search .mobile-search-btn {
    display: none;
    position: absolute;
    top: 50%;
    right: 4px;
    padding: 0;
    height: 32px;
    width: 32px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.search-with-cate.has-mobile-search .mobile-search-btn svg {
    height: 16px;
    width: 16px;
}

.filter-right-column {
    gap: 20px 0;
}

.filter-right-column .products.row {
    row-gap: 25px;
    margin-left: -15px;
}

.category-option {
    border: 1px solid var(--border-color);
    padding: 20px 15px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.category-option li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 8px;
    color: var(--black);
    font-size: 16px;
    font-weight: 500;
}

.category-list li a {
    display: block;
}

.category-list li a.active {
    color: var(--theme-color);
    text-decoration: underline;
}

.category-option li .child-category-list {
    margin-top: 5px;
    margin-left: 0;
}

.category-option li a:hover {
    color: var(--theme-color);
}

.category-option li:last-child {
    margin-bottom: 0;
}

.category-option li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -4px;
    height: 15px;
    width: 15px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e9e6e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.category-option .option-title {
    margin-bottom: 15px;
}

.category-option .option-title h4 {
    font: var(--h5);
}

.price_slider_amount button {
    background: var(--primary-dark);
    color: var(--white);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.price_slider_amount button:hover {
    background: var(--primary-dark);
    box-shadow: 0px 3px 7px 0px rgb(1 61 41 / 50%);
    -webkit-box-shadow: 0px 3px 7px 0px rgb(1 61 41 / 50%);
}

.widget {
    margin-bottom: 0 !important;
}

.single-documents .main-category {
    padding: 20px 15px;
}

/******************** dash-saas add-ons end css ********************/
/****************************** support page start css *************************************/
/******************** document-listing-section start css ********************/
.support-wrapper .search-box .btn {
    margin: 7px 0;
}

/* Document Search Autocomplete Wrapper */
.workdo-document-search-wrapper {
    position: relative;
    flex: 1;
    display: flex;
}

.workdo-document-search-wrapper input {
    width: 100%;
}

.workdo-document-autocomplete-form .workdo-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9;
}

.document-card-wrapper .document-card {
    width: 100%;
    position: relative;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.document-card-wrapper.row {
    row-gap: 20px;
}

.doc-box-innner .modified-date,
.document-card .modified-date {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--black);
}

.document-card .top-content p {
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.document-card-wrapper .document-card .title {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--black);
}

.document-card-wrapper .document-card .title:hover {
    color: var(--theme-color);
}

.document-card .btn {
    padding: 10px 20px;
}

.document-card-wrapper .document-card .top-content {
    margin-bottom: 15px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.doc-box-innner .modified-date i,
.document-card .modified-date i {
    margin-right: 5px;
}

/******************** document-listing-section end css ********************/

/******************** blog card css start ********************/
.document-card.blog-card {
    padding: 0;
    overflow: hidden;
}

.document-card.blog-card .blog-card-img {
    width: 100%;
    overflow: hidden;
}

.document-card.blog-card .blog-card-img a {
    display: block;
}

.document-card.blog-card .blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
}

.document-card.blog-card .blog-card-img:hover img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}

.document-card.blog-card .blog-card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
    border-top: 1px solid var(--border-color);
}

.document-card.blog-card .blog-category-tag {
    display: inline-block;
    padding: 6px 8px;
    line-height: 1;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 10px;
    width: fit-content;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.document-card.blog-card .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.document-card.blog-card .blog-card-meta {
    padding-top: 10px;
    margin-top: auto;
    border-top: 1px dashed var(--border-color);
}

.document-card.blog-card .blog-card-meta .blog-read-time,
.document-card.blog-card .blog-card-meta .blog-publish-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
}

.document-card.blog-card .blog-card-meta svg {
    flex-shrink: 0;
}

/******************** blog card css end ********************/

/******************** blog single page css start ********************/
.blog-author-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.blog-author-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    object-fit: cover;
}

.blog-author-name {
    font-size: 16px;
    font-weight: 600;
}

.blog-meta-divider {
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2);
}

.blog-author-info .blog-publish-date,
.blog-author-info .blog-read-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}

.blog-author-info svg {
    flex-shrink: 0;
}

/* Share Section */
.blog-share-section {
    gap: 10px;
    margin-top: 40px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    -webkit-border-radius: 12px;
}

.blog-share-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
}

.blog-share-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 1px solid transparent;
    color: var(--white);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.blog-share-icon svg {
    flex-shrink: 0;
}

/* Social Media Brand Colors */
.blog-share-icon.facebook {
    background-color: #1877F2;
    border-color: #1877F2;
}

.blog-share-icon.twitter {
    background-color: #000000;
    border-color: #000000;
}

.blog-share-icon.linkedin {
    background-color: #0A66C2;
    border-color: #0A66C2;
}

.blog-share-icon.whatsapp {
    background-color: #25D366;
    border-color: #25D366;
}

.blog-share-icon:hover {
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/******************** blog single page css end ********************/

/****  TABLE CSS ****/
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
}

.single-product table {
    border: 0;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: auto;
}

.single-product table tr {
    display: table-row;
}

.single-product table tr th,
.single-product table tr td {
    font-size: 16px;
    text-align: center;
    border-right: 1px solid var(--border-color);
}

.single-product table tr th {
    padding: 10px;
    background-color: var(--primary-dark);
    color: var(--white);
    font-weight: 600;
    letter-spacing: 0 !important;
}

.single-product table tr td {
    padding: 10px;
    display: table-cell;
    color: #7A7A7A;
    letter-spacing: 2px;
}

.single-product table tr th:last-child,
.single-product table tr td:last-child {
    border-right: 0;
}

.single-product table thead tr {
    background-color: #f9f9f9;
}

.single-product table tbody tr:nth-child(odd) {
    background-color: var(--white);
}

.single-product table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.single-product table tr:last-of-type {
    border-bottom: 0;
}

.single-product table tr td .rate-our {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.single-product img.responsive-image {
    width: 100%;
}

#reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list {
    padding: 0;
}

.single-product #tab-comments,
.single-product #tab-reviews,
.single-product #tab-supports {
    margin-bottom: 70px;
}

/* table end css */
/******************** add-cart-popup start css ********************/
.add-cart-popup .cart-popup-inner {
    padding: 15px;
    max-height: 90vh;
    overflow-y: auto;
}

.add-cart-popup {
    position: fixed;
    z-index: 100;
    top: 50%;
    left: 50%;
    background-color: var(--white);
    max-width: 628px;
    width: 100%;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.add-cart-popup.active {
    opacity: 1;
    visibility: visible;
    display: block;
}

.add-cart-popup .close {
    color: #111;
    float: right;
    font-size: 28px;
    position: absolute;
    right: 10px;
    top: 5px;
    left: auto;
    bottom: auto;
    background: none;
    border: none;
    transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -moz-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    -ms-transition: all ease-in-out .5s;
    outline: none;
}

.add-cart-popup .close {
    top: -10px;
    right: -10px;
    background-color: #ff3c3c;
    padding: 6px;
    color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.popup-notice {
    gap: 12px;
}

.add-cart-popup .close i {
    font-size: 18px;
}

.add-cart-popup .popup-modal-header {
    padding: 15px;
    background: rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    margin-bottom: 10px;
    color: var(--black);
}

.add-cart-popup .popup-modal-header .popup-notice p {
    font-weight: 600;
    line-height: 1.5;
}

.add-cart-popup .popup-modal-header .icon {
    width: 20px;
    height: 20px;
    padding: 5px;
    font-size: 14px;
    background: green;
    color: var(--white);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.add-cart-popup .popup-modal-main {
    background: #e7e7e796;
    padding: 15px 15px;
    gap: 15px;
    border-radius: 8px;
}

.add-cart-popup .img-wrapper {
    max-width: 250px;
    width: 100%;
}

.add-cart-popup .img-contnent img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.add-cart-popup .inner-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: var(--white);
    padding: 15px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.add-cart-popup .inner-content .title {
    font: var(--h6);
    text-align: left;
    margin-bottom: 10px;
    text-transform: none;
    font-family: var(--second-font);
}

.add-cart-popup .inner-content .installation-popup-desc {
    text-align: start;
    font-weight: 500;
    font-size: 15px;
    color: black;
    background: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
}

.add-cart-popup .inner-content ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
    color: var(--black);
}

.add-cart-popup .inner-content ul li:not(:last-of-type) {
    margin-bottom: 8px;
}

.add-cart-popup .inner-content ul li svg {
    width: 18px;
    height: 18px;
}

.add-cart-popup .popup-modal-footer {
    padding: 15px 0 0;
    gap: 10px;
}

.add-cart-popup .popup-modal-footer .btn {
    padding: 10px 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 16px;
}

.add-cart-popup .popup-modal-footer .btn:first-child {
    background: var(--theme-color);
}

.add-cart-popup .popup-modal-footer .btn:last-child {
    background: var(--accent-color);
}

.add-cart-popup .popup-modal-footer .btn:first-child:hover {
    background: var(--primary-dark);
}

.add-cart-popup .popup-modal-footer .btn:last-child:hover {
    background: var(--accent-dark);
}

.popup-overlay {
    position: relative;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.popup-overlay.active::after,
.popup-overlay.mobile-active::after {
    content: " ";
    position: fixed;
    z-index: 99;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

/******************** add-cart-popup end css ********************/
/******************** blog-details-wrapper start css ********************/
.back-to-page {
    margin-bottom: 10px;
}

.blog-details-wrapper .innner-content h2 {
    margin-bottom: 15px;
}

.blog-details-wrapper .document-description-section .row {
    row-gap: 20px;
}

.blog-details-home {
    padding-top: 80px;
}

.doc-blog-header-button {
    margin-top: 20px;
    gap: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.doc-blog-header-button .btn {
    margin: 0;
}

.post-type-archive-documents .workdo-document-search-wrapper #workdo-document-search-suggestions {
    left: auto;
    width: calc(100% + 29px);
}

/******************** blog-details-wrapper end css ********************/
/******************** blog-home-section start css ********************/
.docs-home-section .innner-content p,
.blog-home-section .innner-content p,
.blog-details-wrapper .innner-content p {
    max-width: 700px;
    width: 100%;
}

/******************** blog-home-section end css ********************/
/******************** document-listing-section start css ********************/
.docs-home-section .section-title .script-subtitle,
.blog-home-section .section-title .script-subtitle {
    text-transform: unset;
    color: var(--accent-color);
}

.main-category {
    padding: 20px;
}

.main-category li {
    padding-left: 0 !important;
}

.main-category li a {
    width: 90%;
}

.main-category li::before {
    left: auto;
    right: -2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e9e6e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}

/******************** document-listing-section end css ********************/

/******************** accountgo page css start ********************/
/* powerful-features-sec css start */
.powerful-features-sec .section-title p {
    max-width: 100%;
}

.powerful-features-sec .service-card {
    z-index: 1;
    background-color: var(--white);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px, 0px 3px 0px 0px var(--accent-color);
}

.powerful-features-sec .service-card h3 {
    margin: 0;
}

.powerful-features-sec .service-card p {
    margin: 15px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* powerful-features-sec css end */
/******************** accountgo page css end ********************/

/* ecommercego page css start */
.ecommercego-themes-sec .theme-showcase-card:hover .theme-img-wrp img {
    transform: translateY(-57%);
}

/* ecommercego page css end */

/* storego page css start */
.storego-themes-sec .theme-showcase-card:hover .theme-img-wrp img,
.whatsstore-themes-sec .theme-showcase-card:hover .theme-img-wrp img {
    transform: translateY(-55%);
}

/* storego page css end */

/* advocate page css start */
.case-management-hero .img-wrapper img {
    box-shadow: var(--shadow-lg);
    border: 1ps solid var(--border-color);
    border-radius: 15px;
}

/**************************************************** DOCUMENTATION CSS START ****************************************************/
/******************** documentation start css ********************/
.document-details-wrapper .section-title p {
    max-width: 700px;
    width: 100%;
    margin-top: 20px;
}

.single-documents .documents-details-inner h2,
.single-post .documents-details-inner h2 {
    font: var(--h4);
}

.single-documents .documents-details-inner h3,
.single-post .documents-details-inner h3 {
    font: var(--h5);
    padding-top: 0;
    border-top: 0;
}

.single-documents .documents-details-inner ul,
.single-documents .documents-details-inner ol,
.single-post .documents-details-inner ul,
.single-post .documents-details-inner ol {
    margin-bottom: 15px;
    padding-left: 30px;
}

.single-documents .documents-details-inner ul li,
.single-documents .documents-details-inner ol li,
.single-post .documents-details-inner ul li,
.single-post .documents-details-inner ol li {
    list-style: disc;
}

.single-documents .documents-details-inner ol li {
    list-style: decimal;
    margin-bottom: 10px;
}

.single-documents .documents-details-inner ol li.documentation-img.list-none {
    list-style: none;
}

.single-documents .documents-details-inner ul.module-link li a {
    font: var(--second-font);
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.single-documents .documents-details-inner ul.module-link li a:hover {
    color: var(--theme-color);
}

.single-documents .documents-details-inner h3 a,
.single-post .documents-details-inner h3 a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.single-documents .documents-details-inner h3 a:hover,
.single-post .documents-details-inner h3 a:hover {
    color: var(--theme-color);
}

.single-documents .documents-details-inner .product-features ul ol.inner-ol li {
    list-style: lower-alpha !important;
}

.documentation-content-wrp .documentation-content h2,
.documentation-content-wrp .documentation-content h3,
.documentation-content-wrp .documentation-content h4,
.single-documents .documentation-content h2,
.single-documents .documentation-content h3,
.single-documents .documentation-content h4 {
    margin-top: 0px;
}

.documentation-leftbar .account-list li a:hover {
    color: var(--theme-color);
}

.documentation-leftbar .account-list li.accordion-item a:hover::after,
.documentation-leftbar .account-list li.accordion-item a:hover::before {
    background-color: var(--theme-color);
}

.documentation-content:not(:last-child) {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.documentation-img {
    margin-bottom: 15px;
}

.documentation-img img,
.documentation-img video {
    -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.documentation-content h4 {
    font: var(--h5);
}

.documentation-content .dash-product tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.documentation-content .dash-product tr td {
    max-width: 33.33%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    width: 100%;
    text-align: center;
}

.documentation-wrp table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 15px;
}

.documentation-wrp table td,
.documentation-wrp table th {
    padding: 8px;
}

.documentation-content .dash-product tr td:not(:last-child) {
    border-right: 1px solid #dddddd;
}

.documentation-content .dash-product tr:nth-child(even) td {
    background-color: #F9F9F9;
}

.documentation-leftbar.documentation-column {
    overflow: auto;
    max-height: 600px;
    padding: 10px;
}

.documentation-rightbar .documentation-content a:not(.btn):hover,
.documentation-content.faq-section .set a.active {
    color: var(--theme-color);
}

.border-bottom-none {
    border-bottom: none !important;
}

.documentation-content ul li h5 {
    font: var(--h6);
}

.documentation-wrp br {
    display: none !important;
}

p:empty {
    display: none;
    margin: 0 !important;
}

.documentation-content .default-login-details {
    margin-bottom: 15px;
}

.documentation-content .default-login-details .nice-select {
    max-width: 450px;
}

.documents-details-inner table {
    margin-bottom: 15px;
}

.documents-details-inner li table a {
    color: var(--black);
}

.documentation-wrp table.setup-login-details {
    margin-bottom: 10px;
}

.documentation-leftbar .Document-title {
    background-color: var(--border-color);
    padding: 30px 15px;
}

.documentation-leftbar .account-list li a {
    padding: 10px 15px 10px 0;
    width: 100%;
    position: relative;
    color: var(--black);
    font-weight: 500;
    text-transform: capitalize;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.documentation-leftbar .account-list li.accordion-item a {
    padding: 10px 25px 10px 0;
}

.documentation-leftbar .account-list li a.active::before {
    display: none;
}

.documentation-leftbar .account-list li a::after,
.documentation-leftbar .account-list li a::before {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    width: 12px;
    height: 2px;
    background-color: var(--black);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}

.documentation-leftbar .account-list li a::before {
    right: 10px;
    width: 2px;
    height: 12px;
}

.documentation-leftbar .account-list li .accordion-content li a::before,
.documentation-leftbar .account-list li .accordion-content li a::after {
    display: none;
}

.documentation-leftbar .gray-color {
    background-color: var(--border-color);
}

.documentation-leftbar .acnav-list {
    display: none;
}

.documentation-leftbar h2 {
    font-size: 23px;
}

.documentation-rightbar h2 {
    font: var(--h4);
}

.documentation-leftbar h3,
.documentation-rightbar h3 {
    font: var(--h5);
}

.documentation-rightbar ul {
    padding-left: 30px;
}

.documentation-rightbar .list-none>li,
.aticle-content .list-none>li {
    list-style: none !important;
}

.documentation-rightbar ul li {
    list-style: disc;
    margin-bottom: 15px;
}

.documentation-rightbar .documentation-img,
.single-documents .documents-details-inner ol .documentation-img,
.single-documents .documents-details-inner ul .documentation-img,
.single-documents .documents-details-inner ul li.table-responsive {
    list-style: none;
}

.documentation-content-wrp .documentation-content h2,
.documentation-content-wrp .documentation-content h3,
.documentation-content-wrp .documentation-content h4,
.documentation-content-wrp .documentation-content h5,
.documentation-content-wrp .documentation-content h6,
.documentation-content p {
    margin-bottom: 15px;
}

.documents-details-inner .inner-div {
    margin-bottom: 25px;
}

.documents-details-inner h1,
.documents-details-inner h2,
.documents-details-inner h3,
.documents-details-inner h4,
.documents-details-inner h5,
.documents-details-inner h6 {
    margin-bottom: 15px;
}

.documents-details-inner .img-wrapper {
    margin: 10px 0 25px !important;
}

.documents-details-inner .my-4 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.documents-details-inner img.mini-img {
    width: 30px;
    height: 30px;
    margin: 10px 0;
}

.documents-details-inner .list-group-numbered {
    padding-left: 30px !important;
}

.documents-details-inner .list-group-numbered li {
    list-style: decimal;
}

.documents-details-inner .list-group-numbered li:not(:last-of-type) {
    margin-bottom: 8px;
}

.documents-details-inner .list-group-numbered li a {
    color: rgba(110, 0, 255, 1);
    text-decoration: underline;
}

.documents-details-inner h6 {
    font-size: 18px;
    font-weight: 600;
}

.documents-details-inner p {
    font-size: 15px;
}

.documents-details-inner p a {
    color: #4a6ee0;
}

.documents-details-inner .inner-div-box {
    padding: 45px;
    border: 1px solid #000;
}

.documents-details-inner li a,
.documents-details-inner .resources a,
.documents-details-inner p a {
    font-weight: 500;
    word-break: break-word;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
}

.documents-details-inner ul.list {
    padding-left: 30px;
    margin-bottom: 20px;
}

.my-2 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.documents-details-inner ul.list li {
    list-style: disc;
}

.documents-details-inner ul li {
    margin-bottom: 15px;
}

.documents-details-inner ul {
    margin: auto;
    padding: revert;
}

.documentation-rightbar .documentation-content a {
    font-weight: 500;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.single-documents .site.hfeed,
.single-post .site.hfeed,
.single-blogs .site.hfeed {
    overflow-x: unset !important;
}

.documentation-wrp #scroll {
    overflow: hidden;
    top: 140px;
    padding: 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
    max-height: 600px;
}

.documentation-leftbar .account-list li a::before,
.documentation-leftbar .account-list li a::after {
    display: none;
}

.documentation-leftbar .account-list li.accordion-item a::after,
.documentation-leftbar .account-list li.accordion-item a::before {
    display: block;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.documentation-leftbar .account-list li.accordion-item a.active::before {
    display: none;
}

#scroll {
    position: sticky;
    top: 0px;
    left: 0;
    z-index: 2;
    height: auto;
    overflow: auto;
    border: 1px solid #CACACA;
    padding: 10px 20px 10px;
    max-height: 80vh;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.documentation-leftbar .accordion-content li a {
    padding: 10px 10px 10px 0px;
    font-weight: normal;
}

.my-acc-column::-webkit-scrollbar {
    width: 2px;
}

.my-acc-column::-webkit-scrollbar-track {
    background: var(--border);
}

.my-acc-column::-webkit-scrollbar-thumb {
    background-color: var(--primary-dark);
}

#button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--theme-color);
    width: 40px;
    height: 40px;
    text-align: center;
    position: fixed;
    z-index: 2;
    bottom: 40px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    -webkit-transition: background-color .3s, opacity .5s, visibility .5s;
    -o-transition: background-color .3s, opacity .5s, visibility .5s;
    -moz-transition: background-color .3s, opacity .5s, visibility .5s;
    -ms-transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#button.show {
    opacity: 1;
    visibility: visible;
}

#button svg {
    height: 24px;
    width: 24px;
}

#button svg path {
    fill: var(--black);
}

.documentation-leftbar ul>li:not(:last-of-type) {
    border-bottom: 1px dashed var(--border-color);
}

.documentation-leftbar .accordion-content li a:not(:last-child) {
    border-bottom: 1px dashed var(--border-color);
}

.documentation-leftbar .submenu-inner li a {
    padding: 20px 20px 20px 70px;
}

.documentation-leftbar .submenu-inner li a::before {
    left: 40px;
}

.documentation-rightbar br {
    display: block !important;
}

.accordion-content {
    display: none;
}

.documentation-content,
.Documentat.documentation-contention-content>div,
.documentation-content div ul.list-none li {
    scroll-margin-top: 135px !important;
}

.company-settings-list li:hover:not(:has(a)) {
    background: var(--white);
}

.company-settings-list li {
    margin-bottom: 0 !important;
}

ul.company-settings-list {
    margin-bottom: 15px !important;
}

.faq-section .accordion-container .set:not(:last-of-type) {
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.faq-section .accordion-container .set>a {
    position: relative;
    width: 100%;
    display: block;
    font-size: 15px;
    color: var(--black);
    font-weight: 500;
    padding-right: 25px;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.faq-section .accordion-container .set>a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    width: 2px;
    height: 12px;
    background-color: var(--black);
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.faq-section .accordion-container .set>a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0px;
    height: 2px;
    width: 12px;
    background-color: var(--black);
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.faq-section .accordion-container .set>a.active::before {
    transform: translateY(-50%) rotate(-90deg);
    -webkit-transform: translateY(-50%) rotate(-90deg);
    -moz-transform: translateY(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) rotate(-90deg);
    -o-transform: translateY(-50%) rotate(-90deg);
}

.faq-section .accordion-container .set>a:hover::before,
.faq-section .accordion-container .set>a:hover::after,
.faq-section .accordion-container .set>a.active::before,
.faq-section .accordion-container .set>a.active::after {
    background-color: var(--theme-color);
}

.documentation-content.faq-section .accordion-container h2 {
    padding: 0 15px;
    margin: 0;
}

.documentation-content strong,
.single-documents .documents-details-inner strong {
    color: var(--black);
}

/******************** documentation end css ********************/
/******************** activity log start css ********************/
.h3-link a {
    color: var(--theme-color);
    text-underline-offset: 2px !important;
    font-family: var(--first-font);
}

.add-ons-row .row {
    row-gap: 10px;
    margin-bottom: 15px;
}

.add-on-card .add-on-image {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.add-on-card .add-on-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.add-on-card h6 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 16px;
    margin-bottom: 0;
}

.add-on-card {
    gap: 10px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -moz-transition: all ease-in-out .5s;
    -ms-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
}

.add-on-card:hover {
    background-color: rgba(111, 217, 67, .5);
}

/******************** activity log end css ********************/
.masonry {
    column-count: 3;
}

.masonry .item {
    background: white;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    break-inside: avoid;
}

.masonry .item ul,
.masonry .item li:last-child {
    margin-bottom: 0;
}

.h3-link span {
    color: var(--black);
    flex: 1;
}

.h3-link h3 {
    font-size: 20px !important;
}

@media (min-width: 576px) {
    .single-post .documentation-content h4 {
        font-size: 17px;
    }
}

@media (max-width: 768px) {
    .masonry {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .masonry {
        column-count: 1;
    }
}

/**** whatsapp sotre blog css  ****/


.blog-pillar {
    gap: 15px;
    background-color: var(--white);
    border: 1px solid var(--theme-color);
    border-radius: 10px;
    -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.blog-pillar .section-title {
    flex: 1;
    padding: 12px 0 12px 12px;
}

.blog-pillar .section-title p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-pillar .documentation-img {
    max-width: 260px;
    width: 100%;
}

.blog-pillar .documentation-img img {
    height: 100%;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.blog-pillar-wrp .blog-pillar:hover {
    color: var(--black) !important;
    text-decoration: none !important;
}

/**************************************************** DOCUMENTATION CSS END ****************************************************/
/******************************************************************************************************** COMMON STYLE CSS START ********************************************************************************************************/

.add-on-dash-css span.notification-badge {
    background-color: #f55b4a;
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    padding: 1px 6px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    margin-right: 5px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

/******************** faq-section start css ********************/
.accordion-container {
    position: relative;
}

.accordion-container .set {
    position: relative;
}

.accordion-container .content {
    display: none;
    padding: 10px 0 0;
}

/******************** faq-section end css ********************/
/****************************************** home page end *************************************************/
/****************************************** products page start *******************************************/
/******************** product-banner-section start css ********************/
.product-banner-section {
    padding: 70px 0;
}

.product-banner-section .section-title h1 {
    letter-spacing: 0.02em;
}

.dash-landing-wrapper .section-title span a {
    font-weight: 600;
}

.product-banner-section .section-title p {
    font-size: 20px;
    opacity: 0.8;
}

.page-template-dash-envato-landing-page .dash-landing-wrapper .section-title span a {
    display: inline;
}

.product-banner-section .btn-wrapper a {
    font-weight: 600;
}

.product-banner-section .right-side-wrapper img {
    height: 100%;
    width: 100%;
}

.single-laravel-product .storefront-breadcrumb,
.tax-laravel-product-cat .storefront-breadcrumb {
    display: none;
}

/******************** product-banner-section end css ********************/
/******************** video-banner-sec start css ********************/
.workdo_doc_videoele {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-documentation {
    position: relative;
    padding-bottom: 58.25%;
    width: 100%;
    height: 0;
    margin-bottom: 20px;
}

/******************** video-banner-sec end css ********************/
/******************** customer-detail-section start css ********************/
.customer-detail-section .customer-detail {
    position: relative;
    z-index: 1;
    padding: 30px 30px 0;
    row-gap: 20px;
    margin-bottom: 100px;
    border: 1px solid var(--border-color);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-shadow: 0px 4px 55px 0px rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0px 4px 55px 0px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.customer-detail-section .customer-detail .customer-layer {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    -o-object-fit: scale-down;
    object-position: top;
    -o-object-position: top;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.customer-detail-section .section-title {
    max-width: 80%;
    width: 100%;
    margin: 0 auto 30px;
}

.customer-detail-section .customer-detail .customer-content {
    max-width: 70%;
    width: 100%;
    margin: 0 auto;
}

.customer-detail-section .customer-detail .customer-content p,
.customer-detail-section .customer-detail .customer-content h3 {
    margin-bottom: 20px;
    letter-spacing: 0.2px;
}

.customer-detail-section .customer-detail .customer-content h3 span {
    color: var(--accent-color);
}

.customer-detail-section .customer-detail .customer-content p .star {
    display: inline-flex;
    gap: 2px;
    border: 1px solid var(--border-color);
    font-size: 10px;
    line-height: 1;
    padding: 4px 10px;
    cursor: default;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.customer-detail-section .customer-detail .customer-content p span {
    color: var(--theme-color);
    font-size: 18px;
}

.customer-detail-section .customer-detail .customer-image {
    margin-bottom: -100px;
}

.customer-detail-section .btn-wrapper .price {
    margin: 0;
}

.customer-detail-section .users-rating p {
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    text-transform: capitalize;
}

.users-rating {
    position: relative;
    z-index: 2;
}

.users-rating svg {
    height: 12px;
    width: 12px;
    color: var(--accent-color);
    fill: var(--accent-color);
}

.customer-detail-section .btn-wrapper {
    gap: 20px;
}

.customer-detail-section .price span {
    font: var(--h4);
    color: var(--black);
}

.customer-detail-section .price span del {
    opacity: 1;
    font-size: 20px;
    margin-left: 5px;
}

/******************** customer-detail-section end css ********************/
/******************** erpgo-banner-sec start css ********************/
.erpgo-banner-sec {
    background-color: #F8F8F8;
    margin-bottom: 80px;
    padding-bottom: 40px;
}

.erpgo-banner-sec .section-title {
    max-width: 80%;
    width: 100%;
    margin: 0 auto 30px;
}

.erpgo-banner-wrp {
    position: relative;
    z-index: 1;
    background: var(--white);
    box-shadow: 0px 8px 34px 0px rgba(87, 87, 87, 0.12);
    -webkit-box-shadow: 0px 8px 34px 0px rgba(87, 87, 87, 0.12);
    overflow: hidden;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.erpgo-banner-wrp .img-wrapper {
    position: relative;
    padding-top: 45%;
    display: block;
    margin: 20px 0;
}

.erpgo-banner-wrp .img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    -o-object-fit: scale-down;
    object-position: center;
    -o-object-position: center;
}

.erpgo-banner-wrp p {
    text-align: center;
    background-color: var(--black);
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    padding: 10px;
    letter-spacing: .3px;
}

.erpgo-banner-wrp .layer {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.erpgo-banner-wrp p span {
    color: var(--theme-color);
}

.erpgo-banner-sec .erpgo-btn-wrapper {
    margin: 15px 0 -60px;
    gap: 15px;
}

/******************** erpgo-banner-sec end css ********************/
/******************** support-card-section start css ********************/
.support-grid-slider {
    padding: 15px 10px;
    margin: -15px -10px;
}

.support-card-section .support-card h3 {
    margin: 0 0 15px;
    font-size: 18px;
}

.support-card-section .support-card .support-card-inner .icon {
    height: 54px;
    width: 54px;
    margin: 0 auto 20px;
    border-radius: 12px;
    background-color: var(--accent-light);
    color: var(--accent-color);
}

.support-card-section .support-card .support-card-inner .icon svg {
    width: 24px;
    height: 24px;
}

.support-card-section .support-card {
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
}

.support-card-section .support-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--theme-color);
    transform: translateY(-5px);
}

/******************** support-card-section end css ********************/
/******************** listing-sec start css ********************/
.listing-sec .listing-slider {
    margin: 0;
    background-color: var(--light-color);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.listing-sec .listing-slider .listing-content {
    position: relative;
    z-index: 1;
    padding: 0 20px 20px;
    height: 100%;
}

.listing-sec .listing-slider .listing-content span {
    font-family: var(--first-font);
    background: var(--primary-dark);
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    padding: 10px 30px;
    max-width: 350px;
    min-height: 58px;
    margin: 0 auto 30px;
    text-transform: capitalize;
    border-radius: 0 0 20px 20px;
    -webkit-border-radius: 0 0 20px 20px;
    -moz-border-radius: 0 0 20px 20px;
    -ms-border-radius: 0 0 20px 20px;
    -o-border-radius: 0 0 20px 20px;
}

.listing-sec .listing-slider .listing-content ul li {
    position: relative;
    padding-left: 24px;
    color: #555555;
    text-transform: capitalize;
}

.listing-sec .listing-slider .listing-content ul li:not(:last-of-type) {
    margin-bottom: 15px;
}

.listing-sec .listing-slider .swiper-slide-active:not(:last-of-type) .listing-content:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 100%;
    height: 80%;
    width: 2px;
    background: radial-gradient(rgba(16, 183, 127, 0) 0%,
            rgba(16, 183, 127, 1) 52.39130258560181%,
            rgba(16, 183, 127, 0) 100%);
    background: -o-radial-gradient(rgba(16, 183, 127, 0) 0%,
            rgba(16, 183, 127, 1) 52.39130258560181%,
            rgba(16, 183, 127, 0) 100%);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.customer-help-wrp .customer-help-text ul li::before,
.listing-sec .listing-slider .listing-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    background-color: var(--accent-color);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

/******************** listing-sec end css ********************/
/******************** information-sec start css ********************/
.information-wrapper .information-content:not(:last-of-type) {
    margin-bottom: 20px;
}

.information-wrapper .information-content {
    border: 1px solid var(--border-color);
    padding: 15px 20px;
    row-gap: 10px;
    box-shadow: 0 2px 30px rgba(17, 17, 17, 0.1);
    -webkit-box-shadow: 0 2px 30px rgba(17, 17, 17, 0.1);
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}

.information-content .information-col {
    padding: 0 15px;
}

.information-content .information-col-left {
    position: relative;
    max-width: 35%;
    gap: 20px;
}

.information-content .information-col-left::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 3px;
    height: 100%;
    background: radial-gradient(#F59E0B 100%, #F59E0B 100%);
    background: -o-radial-gradient(#F59E0B 100%, #F59E0B 100%);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.information-content .information-col-left h3 {
    font-size: 18px;
    line-height: 1.4;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.information-col-left .information-icon {
    width: 80px;
    height: 80px;
    border: 1px solid var(--accent-color);
    background-color: var(--accent-light);
    color: var(--accent-color);
    box-shadow: 0px 3.34px 37.8px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 3.34px 37.8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.information-col-left .information-icon svg {
    width: 32px;
    height: 32px;
}

.information-col-right {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.information-col-right p {
    padding-left: 30px;
}

/******************** information-sec end css ********************/
.workdo-rating-custom {
    position: relative;
    overflow: hidden;
    width: 5.6em;
    height: 17px;
    line-height: 16px;
    font-family: "FontAwesome";
    color: var(--accent-color);
    margin-right: 4px;
}

.product-rating {
    font-size: 14px;
    line-height: 1;
}

.workdo-rating-custom span::before {
    content: "\f005\f005\f005\f005\f005";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--accent-color);
    float: left;
}

.workdo-rating-custom::before {
    content: "\f006\f006\f006\f006\f006";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--accent-color);
    float: left;
}

.cr-all-reviews-shortcode .crstar-rating::before,
.cr-reviews-grid .cr-summaryBox-wrap .crstar-rating::before,
#reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list .comment-text .crstar-rating::before,
#reviews #comments .cr-summaryBox-wrap .crstar-rating::before,
.cr-reviews-rating .crstar-rating::before {
    content: "\f006\f006\f006\f006\f006";
    color: var(--accent-color);
}

.cr-all-reviews-shortcode .crstar-rating span::before,
.cr-reviews-grid .cr-summaryBox-wrap .crstar-rating span::before,
#reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list .comment-text .crstar-rating span::before,
#reviews #comments .cr-summaryBox-wrap .crstar-rating span::before,
.cr-reviews-rating .crstar-rating span::before {
    content: "\f005\f005\f005\f005\f005";
}

.cr-all-reviews-shortcode .crstar-rating,
#reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list .comment-text .crstar-rating,
#reviews #comments .cr-summaryBox-wrap .crstar-rating {
    width: 5.6em;
    font-family: 'FontAwesome';
}

.workdo-rating-custom span {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    float: left;
    padding-top: 1.3em;
}

.theme-details-inner .theme-details-top .bought-label,
.addon-name span.bought-label {
    display: inline-block;
    background-color: var(--red-color);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    margin-left: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.theme-details-inner .theme-details-top .bought-label {
    margin-bottom: 10px;
    margin-left: 0;
    padding: 6px 10px;
}

span.onsale {
    display: none;
}

strong.product-quantity {
    display: none;
}

del,
.price del,
ins.wp-sale-price {
    text-decoration: line-through;
    color: var(--red-color);
}

/******************** product-card end css ********************/
/******************** business-sec start css ********************/
.business-card .business-card-inner {
    padding-bottom: 40px;
}

.business-card .business-image {
    position: relative;
    padding-top: 83%;
    border: 1px solid var(--border-color);
    border-bottom: 0;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.business-card .business-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    object-position: top;
    -o-object-position: top;
    padding: 15px 15px 0 15px;
}

.business-card .business-content {
    position: relative;
    min-width: 200px;
    margin: -30px auto;
    text-align: center;
    padding: 10px;
    background: var(--white);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 25px 0px;
    -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 25px 0px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.business-card .business-content h3 {
    font: var(--h5);
    margin-bottom: 8px;
}

.business-content .colorinput-color {
    gap: 10px;
}

.business-content .colorinput-color span {
    display: inline-block;
    width: 25px;
    height: 25px;
    color: var(--white);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

/******************** business-sec end css ********************/
/******************************************* products page end ***************************************************/
/******************** single page get-app-section start css ********************/
.list-wrapper ul li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid var(--primary-dark);
    color: var(--black);
    padding: 10px 10px 10px 40px;
    line-height: 1.2;
    margin-top: 10px;
    border-radius: 44px;
    -webkit-border-radius: 44px;
    -moz-border-radius: 44px;
    -ms-border-radius: 44px;
    -o-border-radius: 44px;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.list-wrapper ul li::before {
    content: "\f058";
    position: absolute;
    left: 10px;
    top: 45%;
    display: block;
    width: 20px;
    height: 20px;
    font-family: "Font Awesome 5 Free";
    font-size: 20px;
    font-weight: 900;
    color: var(--primary-dark);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.list-wrapper ul li:hover {
    background: var(--primary-dark);
    color: var(--white);
}

.list-wrapper ul li:hover::before {
    color: var(--white);
}

/******************** single page get-app-section end css ********************/
/******************** woocommerce-order start css ********************/
.woocommerce-order-received .material-kit-box.w-100 {
    margin-bottom: 20px;
}

.woocommerce-order-received p.woocommerce-thankyou-order-received {
    background-color: var(--theme-color);
    margin: 0 0 15px;
    color: var(--white);
    padding: 15px;
    font-weight: 500;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.woocommerce-order-received .site-content {
    min-height: 450px;
}

/******************** woocommerce-order end css ********************/
/******************** installation-btn-wrapper start css ********************/
.installation-btn-wrapper {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 100;
    cursor: pointer;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.installation-btn {
    height: 55px;
    width: 55px;
    background-color: var(--accent-color);
    color: var(--white);
    border-radius: 6px 0 0 6px;
    -webkit-border-radius: 6px 0 0 6px;
    -moz-border-radius: 6px 0 0 6px;
    -ms-border-radius: 6px 0 0 6px;
    -o-border-radius: 6px 0 0 6px;
}

.installation-btn svg {
    height: 30px;
    width: 30px;
}

.installation-btn-wrapper .tooltip-text {
    position: absolute;
    right: 65px;
    top: 50%;
    visibility: hidden;
    opacity: 0;
    width: 180px;
    background-color: var(--black);
    color: var(--white);
    text-align: center;
    text-transform: capitalize;
    padding: 8px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.installation-btn-wrapper .tooltip-text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent var(--black);
}

.installation-btn-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.page-template-development-request section#contact_us {
    scroll-margin-top: 250px;
}

/******************** installation-btn-wrapper end css ********************/
/******************** content-sec start css ********************/
.content-box .account-list::-webkit-scrollbar {
    width: 2px;
}

.content-box ul.account-list>li:not(:last-of-type) {
    border-bottom: 1px dashed var(--border-color);
}

.content-box .account-list::-webkit-scrollbar-thumb {
    background-color: var(--primary-dark);
}

.content-box {
    row-gap: 20px;
}

.content-box .account-list {
    padding: 10px 20px 10px;
    position: sticky;
    overflow: auto;
    top: 150px;
    max-height: 500px;
    height: auto;
}

.content-box .scroll {
    overflow: hidden;
    border: 1px solid #CACACA;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.content-box .account-list li a {
    padding: 10px 25px 10px 0;
    width: 100%;
    position: relative;
    font-size: 15px;
    color: var(--black);
    font-weight: 500;
    text-transform: capitalize;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.content-wrp .doc-content ul {
    padding-left: 40px;
}

.content-wrp .doc-content ul li:not(:last-of-type) {
    margin-bottom: 10px;
}

.content-wrp .doc-content ul li {
    list-style: disc;
}

.content-sec .content-wrp .doc-content h2 {
    font: var(--h4);
    margin-bottom: 15px;
}

.content-sec .content-wrp .doc-content h3 {
    font: var(--h5);
    margin-bottom: 15px;
}

.content-sec .content-wrp .doc-content p {
    padding-left: 15px;
}

.content-sec .content-wrp .doc-content p:not(:last-of-type) {
    margin-bottom: 15px;
}

.content-sec .content-wrp {
    max-height: 500px;
    overflow: auto;
    padding: 15px;
    background: var(--white);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
}

.content-sec .content-wrp .doc-content:not(:last-of-type) {
    margin-bottom: 15px;
}

.doc-content:has(.doc-content)>p:last-of-type {
    margin-bottom: 15px;
}

.doc-content:has(ul) ul+p {
    margin-top: 15px;
}

/******************** content-sec end css ********************/
.grecaptcha-badge {
    opacity: 0;
    visibility: hidden;
}

/* theme details inner discount price start css */
.theme-details-inner .theme-details-top .price del {
    font-size: 28px;
    opacity: 1;
}

.theme-details-inner .theme-details-top .price del .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: 700;
}

.theme-details-inner .theme-details-top .price ins {
    margin-left: 4px;
}

/* theme details inner discount price end css */

/******************************************************************************************************** COMMON STYLE CSS END ********************************************************************************************************/


/****************************************************************************************************** OLD MAIN STYLE CSS START ******************************************************************************************************/
/*================================================================================================*/
/*=================[                                                            ]=================*/
/*=================[    !!!!!!!!   CSS CREATED BY WorkDo  !!!!!!!!   ]=================*/
/*=================[                                                            ]=================*/
/*================================================================================================*/
/******************** home-banner-sec start css { home page } ********************/
.banner-search-form .form-input {
    padding: 8px;
    gap: 10px;
    background-color: var(--white);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    position: relative;
    /* For autocomplete positioning */
}

.banner-search-form .form-input input {
    background: transparent;
    color: var(--black);
    padding: 0 0 0 10px;
    border: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.banner-search-form .form-input input::placeholder {
    color: var(--black);
}

.banner-search-form .form-input .banner-search-btn {
    padding: 12px;
    font-size: 16px;
    color: var(--black);
}

.banner-search-form .form-input .banner-search-btn:focus {
    color: var(--white);
}

.banner-search-form .form-input .banner-search-btn svg {
    width: 16px;
    height: 16px;
}

.banner-search-form .form-input .banner-search-btn svg path {
    fill: var(--black) !important;
}

/******************** home-banner-sec end css ********************/

/*************************************************** products page start css **********************************************************/
/******************** lightbox css ********************/
.tab-image .lightbox {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.img-popup {
    position: fixed;
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(38, 40, 52, 0.9);
    text-align: center;
    display: none;
    -webkit-animation: pop-in;
    animation: pop-in;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
}

.img-popup img {
    position: absolute;
    top: 50%;
    max-width: 80%;
    max-height: 80vh;
    display: inline-block;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.close-lightbox {
    position: absolute;
    z-index: 1;
    top: 20px;
    right: 20px;
    width: 35px;
    height: 35px;
    color: var(--white);
    font-size: 25px;
    border: 2px solid var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.lightboxfadeout {
    animation: fadeout;
    -webkit-animation: fadeout;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    -webkit-animation: fadeout 0.5s;
    -moz-animation: fadeout 0.5s;
    -ms-animation: fadeout 0.5s;
}

@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.1);
        -webkit-transform: scale(0.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes pop-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes fadeout {
    100% {
        opacity: 0;
        transform: scale(0.1);
        -webkit-transform: scale(0.1);
    }

    0% {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes fadeout {
    100% {
        opacity: 0;
        -webkit-transform: scale(0.1);
    }

    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

/******************** features-card-section end css ********************/
/******************** vcard landing page css ********************/
/******************** builder-functionality-sec start css ********************/
.builder-functionality-sec {
    position: relative;
    z-index: 1;
}

.builder-functionality-sec .listing-content {
    padding: 0 15px 15px 15px;
    background-color: var(--white);
    box-shadow: 0 0 2px rgba(0, 0, 0, .5);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.builder-functionality-sec .listing-content span {
    font-family: var(--first-font);
    background: var(--primary-dark);
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    padding: 15px 30px;
    max-width: 350px;
    margin: 0 auto 30px;
    text-transform: capitalize;
    border-radius: 0 0 20px 20px;
    -webkit-border-radius: 0 0 20px 20px;
    -moz-border-radius: 0 0 20px 20px;
    -ms-border-radius: 0 0 20px 20px;
    -o-border-radius: 0 0 20px 20px;
}

.builder-functionality-sec .listing-content li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
}

.builder-functionality-sec .listing-content li:not(:last-of-type) {
    margin-bottom: 25px;
}

.builder-functionality-sec .listing-content li .icon svg {
    width: 25px;
    height: 25px;
}

.builder-functionality-sec .listing-content li .icon {
    width: 50px;
    height: 50px;
    background: var(--primary-dark);
    color: var(--white);
    margin: 8px;
    outline: 1px dashed var(--theme-color);
    outline-offset: 8px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.builder-functionality-sec .listing-content li .content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.builder-functionality-sec .listing-content li .content h3 {
    font: var(--h6);
    margin-bottom: 10px;
}

.builder-functionality-sec .listing-content li .content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.builder-functionality-sec .row {
    row-gap: 20px;
}

/******************** builder-functionality-sec end css ********************/
/*************************************************** products page end css **********************************************************/
/*************************************************** add-ons page start css **********************************************************/
/******************** module-suggestions-section start css ********************/
.module-suggestions-section {
    background-color: #f5f5f5;
    position: relative;
    z-index: 1;
}

.module-sg-img img {
    max-width: 100%;
}

.send-us-opc {
    gap: 10px;
}

.send-us-opc a:nth-child(2) {
    margin-top: -10px;
    font-weight: bold;
}

.sg-bg-img img {
    position: absolute;
    z-index: -1;
}

.sg-bg-2 {
    top: 0;
    right: 0;
}

.sg-bg-3 {
    bottom: 0;
    left: 0;
}

.sg-bg-4 {
    top: 80%;
    left: 30%;
}

.archive .star-rating {
    display: none;
}

.archive .client-review-section {
    background-color: var(--white);
    padding-top: 0;
}

/******************** module-suggestions-section end css ********************/
/*************************************************** add-ons page end css **********************************************************/
/*************************************************** development page start css ****************************************************/
/******************** apk-ios-card-section start css ********************/
.apk-ios-card-section .innner-card {
    background: #F5F5F5;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.apk-ios-card-section .innner-card h4 {
    background: #002232;
    color: var(--theme-color);
    padding: 10px 10px;
    text-align: center;
    margin: 0;
    border-radius: 7px 7px 0 0;
    -webkit-border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    -ms-border-radius: 7px 7px 0 0;
    -o-border-radius: 7px 7px 0 0;
}

.apk-ios-card-section .innner-card.ios-card h4 {
    background: var(--theme-color);
    color: #002232;
}

.apk-ios-card-section .innner-card ul {
    padding: 20px 20px;
}

.apk-ios-card-section .innner-card ul p {
    text-align: center;
}

.apk-ios-card-section .innner-card .icon {
    background: var(--theme-color);
    width: 30px;
    height: 30px;
    padding: 2px;
    margin: 20px auto 10px;
    border: 2px solid rgba(111, 217, 67, 0.5);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.apk-ios-card-section .innner-card li:first-of-type .icon {
    margin-top: 0;
}

.apk-ios-card-section .innner-card .icon i {
    font-size: 16px;
    color: var(--white);
}

.decr-card {
    position: relative;
    background: #F5F5F5;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    padding: 30px 30px 30px 80px;
    margin-top: 30px;
}

.decr-card .icon-div {
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    border: 5px solid var(--white);
}

.apk-ios-card-section .decr-card .icon-div {
    box-shadow: none;
    -webkit-box-shadow: none;
    width: 65px;
    height: 65px;
}

/******************** apk-ios-card-section end css ********************/
/******************** web-solution-section start css ********************/
.web-solution-section {
    position: relative;
    z-index: 1;
    overflow-x: hidden;
    padding: 200px 0 80px;
}

.web-solution-section::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 900px;
    background: url('../../assets/images/common-img/web-sol-circle.webp') no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

/******************** web-solution-section end css ********************/
/*************************************************** development page end css ****************************************************/

/*************************************************** add-ons single page start css ****************************************************/
/******************** woocommerce-tabs start css ********************/
.single-product .woocommerce-tabs {
    padding-bottom: 0;
}

.woocommerce-tabs .tabs-wrapper-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 40px;
}

.woocommerce-tabs .tabs.wc-tabs {
    gap: 10px;
}

.storefront-full-width-content .woocommerce-tabs ul.tabs {
    background: #EDEDED;
    padding: 8px 10px;
    width: auto !important;
    margin: auto;
    border: 0px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.woocommerce-tabs ul.tabs li {
    border: 0 !important;
}

#tab-title-dash a,
#tab-title-ticketgo a,
#tab-title-bookinggo a,
#tab-title-vcard a {
    padding: 10px 15px;
}

.woocommerce-tabs ul.tabs li a {
    position: relative;
    padding: 10px 15px 10px 35px;
    color: var(--black);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.woocommerce-tabs ul.tabs li a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 16px;
    height: 16px;
    display: block;
    margin-right: 5px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.woocommerce-tabs ul.tabs li#tab-title-item_details a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.woocommerce-tabs ul.tabs li#tab-title-reviews a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.woocommerce-tabs ul.tabs li#tab-title-comments a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3Cpath d='M7 11h10'/%3E%3Cpath d='M7 15h6'/%3E%3Cpath d='M7 7h8'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.woocommerce-tabs ul.tabs li#tab-title-supports a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z'/%3E%3Cpath d='M21 16v2a4 4 0 0 1-4 4h-5'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.woocommerce-tabs ul.tabs li.active a {
    background: var(--theme-color);
    color: var(--white);
}

.woocommerce-tabs ul.tabs li.active a::before {
    filter: invert(1);
    -webkit-filter: invert(1);
}

.storefront-full-width-content .woocommerce-tabs .panel {
    margin-bottom: 0px;
}

ul.tabs.wc-tabs,
.storefront-full-width-content .woocommerce-tabs .panel {
    width: 100% !important;
}

.woocommerce-tabs ul.tabs li.active::after,
.tabs.wc-tabs a:after {
    display: none !important;
}

.woocommerce-tabs ul.tabs li a::after {
    display: none !important;
}

.woocommerce-tabs ul.tabs li::after {
    display: none;
}

/******************** sales-saas-addon start css ********************/
.sales-video-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    padding: 30px;
}

.sales-video-wrapper .video-documentation {
    overflow: hidden;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    margin-bottom: 30px;
}

.sales-video-wrapper .apps-video img {
    margin-bottom: 30px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.sales-video-wrapper p {
    font-size: 16px;
    color: var(--black);
    font-weight: 500;
}

.sales-video-wrapper p:not(:last-of-type) {
    margin-bottom: 10px;
}

.sales-video-wrapper .btn-wrapper {
    margin-top: 30px;
}

/******************** sales-saas-addon end css ********************/
/******************** get-app-section start css ********************/
.single-product .sales-app-wrapper .subtitle {
    margin-bottom: 15px;
    font-size: 12px;
}

.sales-app-wrapper {
    position: relative;
    padding: 40px 0;
}

.sales-app-wrapper:not(:last-of-type) {
    margin-bottom: 60px;
}

.get-app-section .sales-app-wrapper::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-color: var(--light-color);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.get-app-section .sales-wrapper-reverse.sales-app-wrapper::after {
    right: auto;
    left: 0;
}

.get-app-section .sales-app-wrapper .get-app-inner-text {
    padding-right: 30px;
}

.get-app-section .sales-wrapper-reverse.sales-app-wrapper .get-app-inner-text {
    padding-left: 30px;
    padding-right: 0;
}

.get-app-section .sales-app-wrapper .img-div {
    box-shadow: 0px 8px 34px 0px rgba(0, 0, 0, 0.09);
    -webkit-box-shadow: 0px 8px 34px 0px rgba(0, 0, 0, 0.09);
    border: 1px solid var(--border-color);
    overflow: hidden;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.get-app-section .sales-app-wrapper .img-div img {
    height: 100%;
    width: 100%;
}

.get-app-section .get-app-info {
    padding: 10px 20px !important;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

/******************** get-app-section end css ********************/
/******************** dash-payment-gateway start css ********************/
.single-product .payment-gateway-content table tr th {
    width: 50%;
    text-transform: capitalize;
    border: none;
}

.payment-gateway-content table {
    position: relative;
}

.payment-gateway-content table tr th:first-of-type {
    border-radius: 10px 0 0 0px;
    -webkit-border-radius: 10px 0 0 0px;
    -moz-border-radius: 10px 0 0 0px;
    -ms-border-radius: 10px 0 0 0px;
    -o-border-radius: 10px 0 0 0px;
    min-width: 280px;
}

.payment-gateway-content table tr th:last-of-type {
    border-radius: 0px 10px 0 0px;
    -webkit-border-radius: 0px 10px 0 0px;
    -moz-border-radius: 0px 10px 0 0px;
    -ms-border-radius: 0px 10px 0 0px;
    -o-border-radius: 0px 10px 0 0px;
    min-width: 280px;
}

.payment-gateway-content table tr td {
    letter-spacing: 0;
    color: var(--black);
    text-transform: capitalize;
    font-size: 14px;
    border: none;
}

.payment-gateway-content table tbody tr:not(:last-of-type) {
    border-bottom: 1px dashed var(--border-color);
}

.payment-gateway-content table tr td:first-of-type,
.payment-gateway-content table tbody tr:nth-child(2n) td:first-of-type {
    border-right: 1px solid var(--border-color) !important;
}

.payment-gateway-content table tr:last-of-type td:first-of-type {
    border-radius: 0 0 0 10px;
    -webkit-border-radius: 0 0 0 10px;
    -moz-border-radius: 0 0 0 10px;
    -ms-border-radius: 0 0 0 10px;
    -o-border-radius: 0 0 0 10px;
}

.payment-gateway-content {
    position: relative;
}

.payment-gateway-content table tr:last-of-type td:last-of-type {
    border-radius: 0 0 10px 0px;
    -webkit-border-radius: 0 0 10px 0px;
    -moz-border-radius: 0 0 10px 0px;
    -ms-border-radius: 0 0 10px 0px;
    -o-border-radius: 0 0 10px 0px;
}

.dash-payment-gateway .payment-gateway-content {
    overflow-x: auto;
}

.dash-payment-gateway .payment-gateway-content::-webkit-scrollbar-thumb {
    height: 5px;
    background-color: var(--primary-dark);
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.dash-payment-gateway .payment-gateway-content::-webkit-scrollbar-track {
    background-color: #F1F1F1;
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.dash-payment-gateway .payment-gateway-content::-webkit-scrollbar {
    height: 5px;
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.payment-gateway-content .payment-btn-wrapper {
    margin-top: 15px;
    text-align: center;
}

/******************** dash-payment-gateway end css ********************/
/******************** screenshot-section start css ********************/
.screenshots-gallery-slider {
    padding: 30px 25% 90px !important;
}

.screenshot-section .screenshots-gallery-slider {
    margin: 0 -10px;
}

.screenshots-gallery-slider .screenshot-inner {
    position: relative;
    padding-top: 57.2%;
    display: block;
    opacity: .4;
    transform: scale(.9);
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    border: 2px solid var(--primary-dark);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.screenshots-gallery-slider .screenshot-inner img {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 1px solid var(--border-color);
    background-color: var(--white);
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    object-fit: scale-down;
    -o-object-fit: scale-down;
}

.screenshots-gallery-slider .swiper-slide-active .screenshot-inner {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    opacity: 1;
}

.screenshots-gallery-slider .swiper-arrow {
    width: 40px;
    height: 40px;
    padding: 0;
    top: auto;
    bottom: 0;
    background: transparent;
    transform: translate(0) !important;
    -webkit-transform: translate(0) !important;
    -moz-transform: translate(0) !important;
    -ms-transform: translate(0) !important;
    -o-transform: translate(0) !important;
    border: 1px solid var(--black);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.screenshots-gallery-slider .swiper-arrow svg path {
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.screenshots-gallery-slider .swiper-arrow:hover {
    border-color: var(--theme-color);
}

.screenshots-gallery-slider .swiper-arrow:hover svg path {
    fill: var(--theme-color);
}

.screenshots-gallery-slider .swiper-button-prev {
    left: calc(50% - 65px);
}

.screenshots-gallery-slider .swiper-button-next {
    right: calc(50% - 65px);
}

.screenshots-gallery-slider .swiper-arrow svg {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    max-width: none;
    width: 35px;
    height: 35px;
}

.screenshots-gallery-slider .swiper-arrow.swiper-button-next svg {
    left: -15px;
    right: auto;
}

.screenshots-gallery-slider .swiper-arrow.swiper-button-prev svg {
    right: -15px;
    transform: translate(0, -50%) scaleX(-1);
    -webkit-transform: translate(0, -50%) scaleX(-1);
    -moz-transform: translate(0, -50%) scaleX(-1);
    -ms-transform: translate(0, -50%) scaleX(-1);
    -o-transform: translate(0, -50%) scaleX(-1);
}

.screenshots-gallery-slider:not(.swiper-initialized) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/******************** screenshot-section end css ********************/
/******************** app-features-section start css ********************/
.app-features-section .app-features-icon {
    width: 55px;
    height: 55px;
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.app-features-section .app-features-icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: scale-down;
    object-fit: scale-down;
}

.app-features-section .app-features-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.app-features-section .app-features-content h4,
.app-features-section .app-features-content p {
    margin-bottom: 15px;
}

.app-features-section h4 a {
    font: var(--h6);
}

.app-features-section .app-features-inner {
    flex-direction: column;
    gap: 15px;
    position: relative;
    background: var(--white);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.app-features-section .app-features-inner .app-feature-content {
    flex: 1;
}

.app-features-section .app-features-inner .product-excerpt {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/******************** app-features-section end css ********************/
/******************** woocommerce-Reviews start css ********************/
#reviews .cr-summaryBox-wrap {
    background: var(--white);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.top-title {
    padding: 10px 10px;
    border-bottom: 1px solid #ddd;
    background: var(--dark-color);
    color: var(--white);
    gap: 10px;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    -ms-border-radius: 10px 10px 0 0;
    -o-border-radius: 10px 10px 0 0;
}

.workdo-comment-box {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.workdo-comment-box .review-header {
    gap: 12px;
}

.top-title time {
    color: var(--white) !important;
}

#reviews .commentlist li time {
    opacity: 1;
    font-weight: 600;
}

.woocommerce-tabs .panel h2:first-of-type {
    margin-bottom: 15px;
}

.single-product .faq-sec .section-title h2 {
    font: var(--h2);
}

.workdo-comment-box .description p {
    padding: 20px 10px;
    margin: 0 !important;
    font-size: 16px;
    color: var(--black);
}

.workdo-comment-box .crstar-rating {
    margin: 0 !important;
}

.ivole-histogramRow {
    position: relative;
    display: block;
}

#reviews.cr-reviews-ajax-reviews .cr-count-row .cr-count-row-count {
    font-size: 16px;
    font-weight: 500;
}

.ivole-histogramRow::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin: 5px 5px 0 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511.987 511' fill='%23FFC107'%3E%3Cpath d='M510.652 185.902a27.158 27.158 0 0 0-23.425-18.71l-147.774-13.419-58.433-136.77C276.71 6.98 266.898.494 255.996.494s-20.715 6.487-25.023 16.534l-58.434 136.746-147.797 13.418A27.208 27.208 0 0 0 1.34 185.902c-3.371 10.368-.258 21.739 7.957 28.907l111.7 97.96-32.938 145.09c-2.41 10.668 1.73 21.696 10.582 28.094 4.757 3.438 10.324 5.188 15.937 5.188 4.84 0 9.64-1.305 13.95-3.883l127.468-76.184 127.422 76.184c9.324 5.61 21.078 5.097 29.91-1.305a27.223 27.223 0 0 0 10.582-28.094l-32.937-145.09 111.699-97.94a27.224 27.224 0 0 0 7.98-28.927zm0 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list,
#reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list li:last-of-type {
    margin-bottom: 0 !important;
}

.woocommerce-review__author {
    color: var(--accent-color);
    font-weight: 600;
    text-transform: capitalize;
}

#reviews .ivole-meter {
    height: 5px;
    border: 0px !important;
    box-shadow: unset;
    -webkit-box-shadow: unset;
    background: -webkit-linear-gradient(top, #eee, #EAEAEA);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

#reviews .ivole-meter .ivole-meter-bar {
    box-shadow: unset;
    -webkit-box-shadow: unset;
}

.cr-ajax-search {
    display: none !important;
}

.woocommerce-Tabs-panel #reviews {
    max-width: 900px;
    width: 100%;
    margin: auto;
    padding: 0 15px 0;
}

#reviews .commentlist li {
    box-shadow: 0px 0px 10px 0px rgba(185, 185, 185, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.19);
    overflow: hidden;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

#reviews #comments .comment-text {
    border-bottom: unset !important;
    padding-bottom: 0 !important;
}

.cr-overall-rating-wrap {
    width: 100px !important;
    height: 180px;
    border: 5px solid var(--accent-color) !important;
    -ms-flex-preferred-size: 180px !important;
    flex-basis: 180px !important;
    margin: 20px auto !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -ms-border-radius: 50% !important;
    -o-border-radius: 50% !important;
}

.workdo-rating-category {
    text-transform: capitalize;
}

.app-features-section .section-title h2,
.screenshot-section .section-title h2,
.mobile-app-core-sec .section-title h2,
.bookinggo-theme-wrapper .section-title h2 {
    font: var(--h2) !important;
}

.cr-reviews-ajax-comments table tr,
.cr-reviews-ajax-comments table tr td {
    background-color: transparent !important;
}

.cr-histogramTable tr.ivole-histogramRow .ivole-histogram-a,
.cr-histogramTable tr.ivole-histogramRow .cr-histogram-a,
#reviews .cr-summaryBox-wrap .cr-total-rating-count,
.cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-total-rating-count,
.cr-reviews-grid .cr-summaryBox-wrap .cr-total-rating-count {
    color: var(--black);
}

.cr-reviews-ajax-comments .woocommerce-Reviews-title {
    text-align: center;
}

/******************** Reviews old css ********************/
.shop_table tbody .actions .wp-element-button[name="update_cart"] {
    display: none;
}

p#wc-stripe-payment-request-button-separator {
    margin-top: 0px !important;
}

.ElementsApp .LinkButton,
.ElementsApp .GooglePayButton--dark {
    border-radius: 40px !important;
    -webkit-border-radius: 40px !important;
    -moz-border-radius: 40px !important;
    -ms-border-radius: 40px !important;
    -o-border-radius: 40px !important;
}

.single-product #reviews .cr-button-search,
.single-product #reviews .cr-ajax-reviews-add-review {
    background: var(--theme-color) !important;
    color: var(--black);
    border: 0px solid !important;
    padding: 13px 25px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: capitalize;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

#cr-ajax-reviews-review-form p.form-submit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 10px;
}

a#cr-ajax-reviews-cancel,
.cr-single-product-rev-submit,
.cr-reviews-ajax-reviews .cr-show-more-reviews-prd,
.cr-all-reviews-shortcode .cr-show-more-button,
.cr-reviews-grid .cr-show-more-button {
    background: var(--primary-dark) !important;
    color: var(--white) !important;
    border: 0 !important;
    border-radius: 40px !important;
    -webkit-border-radius: 40px !important;
    -moz-border-radius: 40px !important;
    -ms-border-radius: 40px !important;
    -o-border-radius: 40px !important;
    padding: 15px 30px !important;
    line-height: 1;
    width: auto !important;
    height: auto;
}

.comment-form-comment textarea#comment,
.comment-form-comment textarea#comment:focus {
    background-color: var(--white) !important;
    color: var(--black) !important;
}

.cr-ajax-reviews-sort-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 130px;
    width: 100%;
}

.cr-ajax-reviews-sort-div .nice-select {
    width: 100% !important;
    font-size: 14px !important;
    padding: 0 0 4px !important;
}

.cr-ajax-reviews-sort-div .nice-select:after {
    right: 0;
}

.cr-ajax-reviews-sort-div .list {
    border-radius: 8px;
    overflow: hidden;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.cr-all-reviews-shortcode .cr-count-row,
#reviews.cr-reviews-ajax-reviews .cr-count-row {
    background-color: var(--white);
    color: var(--black);
    font-size: 14px;
    padding: 15px 10px 15px 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 20px auto;
    border: 1px solid var(--theme-color);
    -webkit-box-shadow: 0 0 5px 0px rgb(0 0 0 / 10%);
    box-shadow: 0 0 5px 0px rgb(0 0 0 / 10%);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.children {
    background: whitesmoke;
    padding-top: 0 !important;
}

.children li.comment,
.children .workdo-comment-box,
.children .description {
    border: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

#reviews .commentlist li ul.children li {
    margin-bottom: 0px !important;
    border-bottom: 1px solid !important;
}

.single-product .woocommerce-noreviews:last-of-type {
    margin-bottom: 0;
}

/******************** woocommerce-Reviews end css ********************/
/******************** workdo-product-comment start css ********************/
#custom-form-workdo,
.workdo-review-leave {
    padding: 15px;
    background: var(--white);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

#custom-form-workdo textarea,
#custom-form-workdo input {
    background-color: var(--white);
    color: var(--black);
}

#custom-form-workdo textarea:focus,
#custom-form-workdo input:focus {
    background-color: var(--white);
    color: var(--black);
}

#custom-form-workdo #form-result {
    padding: 10px 0 0 0;
}

#custom-form-workdo .form-group label {
    font-weight: 600;
    color: var(--black);
}

.sub-btn .btn {
    width: auto;
}

.workdo-product-comment #custom-form-workdo .custom-form.btn {
    background-color: var(--theme-color);
    color: var(--white);
    font-weight: 500;
    border: transparent;
}

.workdo-product-comment #custom-form-workdo .custom-form.btn:hover {
    background-color: var(--primary-dark);
}

/******************** workdo-product-comment end css ********************/
/******************** support start css ********************/
.sec-box-shadow {
    background: var(--white);
    padding: 15px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.sec-box-shadow .pt-2 {
    padding: 0 0 10px;
}

.sec-box-shadow .border-1px {
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.color-blue {
    color: #0085FF;
    font-size: 16px;
    font-weight: 600;
    text-underline-offset: 2px;
    text-decoration-line: underline;
    -webkit-text-decoration-line: underline;
}

.sec-box-shadow .pt-2 ul li {
    gap: 10px;
    margin: 15px 10px 0;
    line-height: 1.2;
}

.sec-box-shadow .pt-2 ul li::before {
    content: "\f00c";
    background: var(--primary-dark);
    color: var(--white);
    width: 18px;
    height: 18px;
    font-family: "Font Awesome 5 Free";
    font-size: 10px;
    font-weight: 900;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
}

.sec-box-shadow .div-3 ul li::before {
    content: "\f00d";
    background: red;
}

.sec-box-shadow svg {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.storefront-full-width-content .woocommerce-tabs .panel p .color-blue {
    font-size: 14px;
}

/******************** support end css ********************/
/******************** sels-info-sec start css ********************/
.sels-info-sec {
    position: relative;
    padding: 40px 0;
}

.sels-info-row {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 15px;
}

.sels-info-sec .sels-item-inner {
    padding: 10px 25px;
    background-color: var(--white);
    color: var(--black);
    gap: 10px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.sels-info-sec .sels-item-inner svg {
    width: 26px;
    height: 26px;
}

.sels-info-sec .sels-item-inner svg path {
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.sels-info-sec .sels-item-inner p {
    font-size: 16px;
    font-weight: 500;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.sels-info-sec .sels-info-item .sels-item-inner:hover {
    background-color: var(--theme-color);
    color: var(--white);
}

/******************** sels-info-sec end css ********************/
/******************** dash saas addons end css ********************/
/******************** bookinggo saas addons start css ********************/
/******************** bookinggo-feature-sec start css ********************/
.bookinggo-feature-sec {
    position: relative;
    z-index: 1;
}

.bookinggo-feature-wrapper .layer {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bookinggo-feature-wrapper {
    position: relative;
    z-index: 1;
    padding: 20px;
    border: 1px solid transparent;
    box-shadow: 0px 8px 53px 0px rgba(0, 0, 0, 0.11);
    width: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.bookinggo-feature-inner .section-title {
    max-width: 60%;
    width: 100%;
    margin: 0 auto 30px;
}

.bookinggo-feature-img {
    position: relative;
    padding-top: 85%;
}

.bookinggo-feature-img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.bookinggo-feature-wrapper h3 {
    margin-bottom: 20px;
}

.bookinggo-feature-list {
    gap: 15px;
}

.bookinggo-feature-list .bookinggo-feature-item span {
    background-color: var(--primary-dark);
    color: var(--white);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bookinggo-feature-list .bookinggo-feature-item span svg {
    width: 18px;
    height: 18px;
}

.bookinggo-feature-list .bookinggo-feature-item .btn {
    padding: 8px 14px;
    font-size: 16px;
    border: 1px solid var(--theme-color);
    background-color: var(--white);
    color: var(--black);
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.12);
}

.bookinggo-feature-list .bookinggo-feature-item .btn:hover,
.bookinggo-feature-list .bookinggo-feature-item .btn:focus {
    border-color: var(--theme-color);
    background-color: var(--theme-color);
    color: var(--white);
}

.bookinggo-feature-list .bookinggo-feature-item .btn:hover span,
.bookinggo-feature-list .bookinggo-feature-item .btn:focus span {
    background-color: var(--white);
    color: var(--black);
}


/******************** bookinggo-feature-sec end css ********************/
/******************** theme-layout-sec start css ********************/
.theme-layout-sec,
.drag-drop-sec,
.customiza-flexibility-sec,
.new-feature-sec,
.amazing-device-sec {
    position: relative;
    background-color: var(--light-color);
}

.customiza-flexibility-sec::before {
    display: none;
}

.woocommerce-tabs .panel .theme-layout-sec .section-title,
.woocommerce-tabs .panel .theme-multi-lang .section-title,
.woocommerce-tabs .panel .theme-performance-sec .section-title,
.woocommerce-tabs .panel .theme-value-sec .section-title,
.woocommerce-tabs .panel .amazing-device-sec .section-title {
    max-width: 70%;
    margin: 0 auto 35px;
}

.theme-layout-sec .layout-card-inner,
.wd-layout-sec .wd-layout-inner {
    background: -o-linear-gradient(#F5F5F5 0 0) padding-box, -o-linear-gradient(top, var(--primary-dark) 0%, var(--white) 100%) border-box;
    background: linear-gradient(#F5F5F5 0 0) padding-box, linear-gradient(180deg, var(--primary-dark) 0%, var(--white) 100%) border-box;
    padding: 10px;
    border: 3px solid transparent;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.theme-layout-sec .layout-card {
    position: relative;
}

.theme-layout-sec .layout-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0%;
    width: 100%;
    height: 55%;
    background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, var(--light-color) 85.00000238418579%);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.theme-layout-sec .layout-card-image,
.wd-layout-sec .wd-layout-image {
    position: relative;
    padding-top: 120%;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.theme-layout-sec .layout-card-image img,
.wd-layout-sec .wd-layout-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.theme-layout-sec .layout-card-inner .layout-inner-content {
    position: absolute;
    z-index: 1;
    left: 0%;
    bottom: 30px;
    width: 100%;
}

.theme-layout-sec .layout-card-inner .layout-inner-content h3 a {
    font: var(--h6);
}

/******************** theme-layout-sec end css ********************/
/******************** bookinggo saas addons end css ********************/
/******************** manage-info-sec start css ********************/
.manage-info-sec {
    background-color: #F6F6F6;
    position: relative;
}

.manage-info-sec .row {
    row-gap: 20px;
}

.manage-info-sec .manage-card-inner {
    position: relative;
    z-index: 1;
    background: var(--white);
    padding: 30px;
    border-radius: 16.625em 16.625em 0 0;
    -webkit-border-radius: 16.625em 16.625em 0 0;
    -moz-border-radius: 16.625em 16.625em 0 0;
    -ms-border-radius: 16.625em 16.625em 0 0;
    -o-border-radius: 16.625em 16.625em 0 0;
}

.manage-info-sec .manage-card-inner .icon-div {
    background-color: #013D29;
    box-shadow: 0px 0px 0px 6px rgba(1, 61, 41, 0.3);
    -webkit-box-shadow: 0px 0px 0px 6px rgba(1, 61, 41, 0.3);
}

.manage-info-sec .manage-card-inner .icon-div svg {
    width: 35px;
    height: 35px;
}

.manage-info-sec .manage-card-inner .icon-div svg path {
    fill: var(--white);
}

.manage-info-sec .manage-card-inner h4 {
    margin-bottom: 15px;
    font-size: 18px;
}

.manage-info-sec .manage-card-inner p {
    letter-spacing: .5px;
}

/******************** manage-info-sec end css ********************/
/******************** control-place-sec start css ********************/
.manage-card {
    position: relative;
    width: 100%;
    height: 100%;
}

.control-place-sec.manage-info-sec .manage-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    background-image: -o-linear-gradient(264.35deg, #013D29 -30.39%, rgba(1, 61, 41, 0) 95.5%);
    background-image: linear-gradient(185.65deg, #013D29 -30.39%, rgba(1, 61, 41, 0) 95.5%);
    border-radius: 16.625em 16.625em 0 0;
    -webkit-border-radius: 16.625em 16.625em 0 0;
    -moz-border-radius: 16.625em 16.625em 0 0;
    -ms-border-radius: 16.625em 16.625em 0 0;
    -o-border-radius: 16.625em 16.625em 0 0;
}

/******************** control-place-sec end css ********************/
/******************** dynamic-code-sec start css ********************/
.dynamic-code-sec .left-inner,
.dynamic-code-sec .right-inner {
    width: 100%;
    height: 100%;
}

.dynamic-code-sec .left-inner img,
.dynamic-code-sec .right-inner img {
    height: 100%;
    width: 100%;
    object-fit: scale-down;
    -o-object-fit: scale-down;
}

.dynamic-code-sec .row {
    row-gap: 20px;
}

/******************** dynamic-code-sec end css ********************/
/******************** code-mastery-sec start css ********************/
.code-mastery-sec .manage-card-inner p {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.code-mastery-sec .manage-card {
    padding-top: 40px;
}

.code-mastery-sec .manage-card-inner {
    border: 1px solid #dfdfdf;
}

.code-mastery-sec .manage-card-inner .icon-div {
    margin-top: -60px;
    width: 80px;
    height: 80px;
    background-color: var(--white);
    box-shadow: 0px 3px 11px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 3px 11px 3px rgba(0, 0, 0, 0.1);
}

.code-mastery-sec .manage-card-inner .icon-div svg {
    width: 40px;
    height: 40px;
}

.code-mastery-sec .manage-card-inner .icon-div svg path {
    fill: #013D29;
}

.code-mastery-sec .manage-card-inner h4 {
    max-width: 90%;
    width: 100%;
    margin: 0 auto 15px;
}

/******************** code-mastery-sec end css ********************/
/******************** dash-saas-addons start css ********************/
/******************** custom-field start css ********************/
.custom-field {
    background: #fbfbfb;
}

.row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.custom-field .custom-field-content .subtitle {
    font-size: 12px;
}

.custom-field .label {
    gap: 10px;
}

.custom-field .custom-field-content {
    background-color: var(--white);
    border: 1px solid var(--theme-color);
    margin-right: -15px;
    padding: 20px 30px 20px 15px;
    border-radius: 15px 0 0 15px;
    -webkit-border-radius: 15px 0 0 15px;
    -moz-border-radius: 15px 0 0 15px;
    -ms-border-radius: 15px 0 0 15px;
    -o-border-radius: 15px 0 0 15px;
}

.custom-field .label li {
    font-size: 14px;
    background: var(--accent-color);
    color: var(--white);
    border: 1px solid var(--accent-color);
    padding: 3px 15px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.custom-field .label li a {
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
}

.custom-field .label li:hover {
    background: var(--accent-dark);
    color: var(--white);
}

.custom-field .label li:hover:not(:has(a)) {
    background: var(--white);
    color: var(--black);
}

.custom-field .label li:not(:has(a)) {
    background: var(--white);
    color: var(--black);
}

.custom-field-img img {
    width: 100%;
}

.custom-field-img {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.custom-field .row-reverse .custom-field-content {
    margin-right: 0;
    margin-left: -15px;
    padding: 20px 15px 20px 30px;
    border-radius: 0 30px 30px 0;
    -webkit-border-radius: 0 30px 30px 0;
    -moz-border-radius: 0 30px 30px 0;
    -ms-border-radius: 0 30px 30px 0;
    -o-border-radius: 0 30px 30px 0;
}

/******************** custom-field end css ********************/
/******************** sales-app-wrapper start css ********************/
.list-wrapper .get-app-info ul li {
    padding: 12px 10px;
    border: none;
    border-bottom: 1px dashed var(--border-color);
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    list-style-type: decimal;
    display: list-item;
    margin-top: 0;
}

.list-wrapper .get-app-info ul li:last-of-type {
    border-bottom: 0;
}

.list-wrapper .get-app-info ul {
    padding-left: 15px;
}

.list-wrapper .get-app-info ul li::before {
    display: none;
}

.list-wrapper .get-app-info ul li:focus,
.list-wrapper .get-app-info ul li:hover {
    background-color: transparent;
    color: var(--black);
}

.list-wrapper .get-app-info ul li::marker {
    font-size: 14px;
    background-color: var(--theme-color);
}

.list-wrapper .get-app-info .company-settings-list li:not(:has(a)),
.company-settings-list li:not(:has(a)) {
    background: var(--white);
    color: var(--black);
}

.list-wrapper .get-app-info .company-settings-list li:hover:not(:has(a)),
.company-settings-list li:hover:not(:has(a)) {
    background: var(--white);
    color: var(--black);
}

.list-wrapper .get-app-info .company-settings-list li,
.company-settings-list li {
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    background: var(--accent-color);
    color: var(--white);
    border: 1px solid var(--accent-color) !important;
    padding: 3px 15px;
    margin: 0;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    list-style: none !important;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}

.list-wrapper .get-app-info .company-settings-list li:hover,
.company-settings-list li:hover {
    background: var(--accent-dark);
}

.list-wrapper .get-app-info .company-settings-list li:hover,
.company-settings-list li:hover,
.list-wrapper .get-app-info .company-settings-list li:hover a,
.company-settings-list li:hover a {
    color: var(--white);
}

.list-wrapper .get-app-info .company-settings-list,
ul.company-settings-list {
    gap: 10px;
    padding-left: 0px !important;
    margin-bottom: 0px !important;
}

ul.company-settings-list li {
    margin-bottom: 0;
}

/******************** sales-app-wrapper end css ********************/
/******************** dash-saas-addons start css ********************/
/*************************************************** add-ons single page end css ****************************************************/
/******************** key-feature-sec start css ********************/
.key-feature-sec .key-feature-img {
    background-color: #F6F6F6;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.key-feature-sec img {
    width: 100%;
    height: 100%;
}

.key-feature-content .subtitle {
    background-color: transparent;
    color: var(--theme-color);
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border: none;
    padding: 0;
    font-size: 20px;
    font-weight: 500;
}

.key-feature-content .key-feature-list li {
    position: relative;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--black);
    font-size: 16px;
    padding-left: 28px;
}

.key-feature-content .key-feature-list li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 7 17l-5-5'/%3E%3Cpath d='m22 10-7.5 7.5L13 16'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
}

.key-feature-content .key-feature-list li:not(:last-of-type) {
    margin-bottom: 12px;
}

.key-feature-content .key-feature-list li svg {
    width: 23px;
    height: 23px;
}

/******************** key-feature-sec end css ********************/
/******************** feature-tab-sec start css ********************/
.tab-content,
.feature-tab-content {
    display: none;
}

.tab-content.active,
.feature-tab-content.active {
    display: block;
}

/******************** feature-tab-sec end css ********************/
/******************** comments start css ********************/
.woocommerce-tabs .user-comments {
    box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.05);
    background: var(--white);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e1e8ed;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.woocommerce-tabs .media__author {
    margin-left: 15px;
}

.comment__body--response {
    margin-top: 15px;
}

.commnet-media {
    gap: 5px;
}

.comment__item-response {
    background: #F2FFED;
    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.04);
    -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.04);
    margin-left: 50px;
    margin-top: 15px;
    padding: 15px;
    border: 1px solid var(--theme-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.comment__item {
    background: #fafafa;
    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.04);
    -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.04);
    padding: 20px;
    margin-top: 15px;
    border: 1px solid #e1e8ed;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.workdo-product-comment {
    max-width: 900px;
    width: 100%;
    margin: auto;
}

.commnet-found {
    margin-bottom: 10px;
}

div#custom-comments {
    margin-bottom: 20px;
}

.workdo-product-comment .media__item img {
    border-radius: 100%;
}

#reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list ul.children {
    width: 100%;
    margin: 0px !important;
}

/******************** comments start css ********************/
/******************** bookinggo-appointment-section start css ********************/
.bookinggo-appointment-section .bookinggo-appointment-wrp {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, var(--black) 0%, #167253 100%);
    color: var(--white);
    padding: 30px 40px;
    overflow: hidden;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.bookinggo-appointment-section .appointment-right-col {
    position: relative;
    padding-top: 97%;
}

.bookinggo-appointment-section .appointment-right-col img,
.bookinggo-appointment-section .bookinggo-appointment-wrp .appointment-bg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.bookinggo-appointment-section .appointment-right-col img {
    object-position: top;
    -o-object-position: top;
    object-fit: scale-down;
    -o-object-fit: scale-down;
}

.bookinggo-appointment-section .appointment-left-col .payment-lang-btn .btn {
    padding: 10px 20px 10px 35px;
}

.bookinggo-appointment-section .appointment-left-col .payment-lang-btn span {
    background-color: var(--white);
    width: 50px;
    height: 50px;
}

.bookinggo-appointment-section .appointment-left-col h2 {
    color: var(--white);
    margin-bottom: 20px;
}

.bookinggo-appointment-section .appointment-left-col .payment-lang-btn {
    margin-left: 15px;
    margin-bottom: 0;
    display: inline-block;
}

.bookinggo-appointment-section .appointment-left-col .payment-lang-btn svg {
    width: 18px;
    height: 18px;
}

/******************** bookinggo-appointment-section end css ********************/
/******************** technologies-sec start css ********************/
.technologies-sec .section-title {
    max-width: 450px;
}

.technologies-sec .technologies-icon {
    width: 75px;
    height: 75px;
    overflow: hidden;
    background-color: var(--white);
    box-shadow: var(--shadow-md);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.technologies-sec.bookingo-integration-sec .technologies-icon img {
    padding: 15px;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 0;
    border: none;
}

.technologies-sec .integration-tab {
    gap: 20px 45px;
}

/******************** technologies-sec end css ********************/
/******************** digital-business-card-template start css ********************/
/******************** digital-business-sec start css ********************/
.digital-business-sec .search-box {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 0;
    border: 1px solid var(--border-color);
    gap: 10px;
    padding: 5px 20px;
}

.digital-business-sec .search-box input {
    background-color: #d3cbcb4a !important;
    padding: 11px 20px;
}

.digital-business-sec .search-box span {
    font-weight: 600;
}

.digital-business-sec .vcard-load-more-btn {
    margin-top: 30px;
}

.steps-sec .row,
.customize-sec .row,
.digital-business-sec .row {
    row-gap: 20px;
}

.digital-business-sec .theme-card a {
    display: block;
    position: relative;
    padding-top: 180%;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    border: 3px solid var(--white);
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.vcard-features-sec .features-image img,
.digital-business-sec .theme-card a img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
}

.bio-link-analytics-sec .analytics-image {
    padding: 0;
}

/******************** digital-business-sec end css ********************/
/******************** steps-sec start css ********************/
.steps-sec .section-title p {
    max-width: 950px;
    width: 100%;
    margin: 15px auto 0;
}

.steps-sec ul {
    padding-left: 20px;
}

.steps-sec ul li {
    list-style: disc;
}

.steps-sec ul li:not(:last-of-type) {
    margin-bottom: 15px;
}

.steps-sec .row .btn {
    margin: 15px 0 0;
}

.steps-sec .steps-image {
    position: relative;
    padding-top: 60%;
}

.steps-sec .steps-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: scale-down;
    object-fit: scale-down;
}

/******************** steps-sec end css ********************/
/******************** maker-sec start css ********************/
.maker-sec .content-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.maker-sec .features-wrp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 30px;
}

.maker-sec .feature-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px;
    padding: 20px;
    background: var(--white);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.maker-sec .feature-icon {
    width: 48px;
    height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--white);
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.maker-sec .feature-icon svg {
    width: 26px;
    height: 26px;
}

.maker-sec .phone-mockup {
    max-width: 300px;
    width: 100%;
}

.phone-mockup img {
    width: 100%;
    height: 100%;
}

.maker-sec .content-wrapper .feature-item .feature-icon {
    background: var(--primary-dark);
}

.maker-sec .feature-content h3 {
    font: var(--h5);
    margin-bottom: 8px;
}

.maker-sec .feature-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/******************** maker-sec end css ********************/
.analytics-image {
    padding: 10px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

/******************** vcard-features-sec start css ********************/
.vcard-features-sec .features-image {
    position: relative;
    padding-top: 90%;
    background-color: #b7b0b03b;
}

.vcard-features-sec .features-content h3 {
    font: var(--h5);
    margin-bottom: 10px
}

.vcard-features-sec .features-content {
    padding: 15px;
}

.vcard-features-sec .features-content .features-top {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 10px;
}

.vcard-features-sec .features-content .features-top p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vcard-features-sec .features-card-inner .features-bottom a {
    box-shadow: none;
    padding: 10px 15px;
}

.vcard-features-sec .features-card-inner {
    overflow: hidden;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.vcard-features-sec .row {
    row-gap: 20px;
}

.vcard-digital-sec .section-title h2 {
    margin-top: 15px;
}

.vcard-features-sec .features-image img {
    -o-object-fit: scale-down;
    object-fit: scale-down;
    padding-top: 10px;
}

/******************** vcard-features-sec end css ********************/
/******************** digital-business-card-template end css ********************/
/******************** bio-link-builder start css ********************/
.analytics-content h3 {
    margin-bottom: 15px;
}

.analytics-content ul li:not(:last-of-type) {
    margin-bottom: 15px;
}

.analytics-content ul li {
    gap: 10px;
}

.analytics-content ul {
    margin-top: 20px;
}

.analytics-content ul li h4 {
    font: var(--h6);
    margin-bottom: 10px;
}

.analytics-content ul li .icon {
    width: 40px;
    height: 40px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background-color: var(--primary-dark);
    color: var(--white);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.analytics-content ul li .icon svg {
    width: 24px;
    height: 24px;
}

.bio-link-steps-sec .step-card {
    background: var(--white);
    padding: 15px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.bio-link-steps-sec .step-content {
    margin: 0 0 15px 0;
    position: relative;
    gap: 5px;
}

.bio-link-steps-sec .step-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-color: var(--primary-dark);
    color: var(--white);
    font-size: 24px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

/******************** bio-link-builder end css ********************/
/******************** vcard-generator start css ********************/
.generator-steps-sec .section-title,
.generator-features-sec .section-title,
.generator-benefits-sec .section-title,
.vcard-business-sec .section-title {
    max-width: 80%;
    width: 100%;
    margin: 0 auto 30px;
}

.generator-benefits-sec ul li {
    margin-bottom: 15px;
}

.generator-benefits-sec ul li {
    list-style: disc;
}

.generator-benefits-sec ul {
    padding-left: 20px;
}

.generator-benefits-sec .row {
    row-gap: 20px;
}

.generator-features-sec .bookinggo-features-content h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.generator-features-sec .bookinggo-features-content p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.generator-steps-sec .row {
    row-gap: 20px;
}

.generator-steps-sec .step-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-color);
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -moz-transition: all ease-in-out .5s;
    -ms-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
}

.generator-steps-sec .step-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-dark);
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}

.generator-steps-sec .step-number {
    width: 50px;
    height: 50px;
    background: var(--primary-dark);
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.generator-steps-sec .step-title {
    margin-bottom: 15px;
}

.generator-steps-sec .step-card p {
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.generator-steps-sec .step-card li {
    position: relative;
    list-style: disc;
}

.generator-steps-sec .step-card li:not(:last-of-type) {
    margin-bottom: 10px;
}

.generator-steps-sec .step-card ul {
    padding-left: 20px;
}

/******************** vcard-generator end css ********************/
/******************** nfc-business-card start css ********************/
.industry-card-sec .row,
.networkings-sec .row {
    row-gap: 20px;
}

.industry-card-sec .industry-card,
.networkings-sec .networking-card {
    background-color: var(--white);
    padding: 15px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.industry-card-sec .industry-card .industry-card-content h3,
.networkings-sec .networking-card .networking-card-content h3 {
    margin-bottom: 10px;
}

.networkings-sec .networking-card .icon,
.industry-card-sec .industry-card .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    background-color: var(--primary-dark);
    color: var(--white);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.networkings-sec .networking-card .icon svg,
.industry-card-sec .industry-card .icon svg {
    width: 25px;
    height: 25px;
}

.nfc-card-sec .row {
    row-gap: 20px;
}

.nfc-image {
    border: 5px solid var(--white);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.industry-tags {
    gap: 7px;
    margin-top: 10px;
}

.industry-tags span {
    font-size: 14px;
    padding: 5px 10px;
    color: var(--black);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.industry-card-sec .industry-card .industry-btn {
    margin-top: 15px;
}

.industry-card-sec .industry-card .industry-btn .btn {
    padding: 10px 15px;
}

.industry-card-sec .industry-card .industry-card-content-top {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.industry-card-sec .industry-card .icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.vcard-faq-section ul {
    padding-left: 20px;
    margin-top: 5px;
}

.vcard-faq-section ul li {
    list-style: disc;
}

.vcard-faq-section ul li:not(:last-of-type) {
    margin-bottom: 5px;
}

.nfc-business-content h3,
.nfc-business-content ul li:not(:last-of-type) {
    margin-bottom: 15px;
}

.nfc-business-content:not(:last-of-type) {
    margin-bottom: 25px;
}

.nfc-business-content ul {
    padding-left: 20px;
    margin-top: 15px;
}

.nfc-business-content ul li {
    list-style: disc;
}

.nfc-business-wrp .nfc-business-content {
    background-color: var(--white);
    padding: 15px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

/******************** nfc-business-card end css ********************/
/******************** NFC-business-card start css ********************/
.virtual-wrp li {
    gap: 15px;
}

.virtual-wrp .row {
    row-gap: 20px;
}

.virtual-wrp li:not(:last-of-type) {
    margin-bottom: 20px;
}

.virtual-wrp .icon {
    width: 50px;
    height: 50px;
    background: var(--primary-dark);
    color: var(--white);
    margin: 8px;
    outline: 1px dashed var(--theme-color);
    outline-offset: 8px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    flex-shrink: 0;
}

.virtual-wrp .icon svg {
    width: 25px;
    height: 25px;
}

.virtual-wrp .virtual-features-content h3 {
    margin-bottom: 10px;
}

.virtual-benifit-sec .card {
    padding: 15px;
    background-color: var(--white);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .09);
    box-shadow: 0 0 10px rgba(0, 0, 0, .09);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.virtual-benifit-sec .card .virtual-benifit-content h3 {
    margin-bottom: 15px;
}

.virtual-benifit-sec .card .virtual-benifit-content p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.virtual-benifit-sec .row {
    row-gap: 20px;
}

.virtual-features-sec .virtual-card {
    background-color: var(--white);
    padding: 20px;
    color: var(--black);
    box-shadow: 0 0 2px rgba(0, 0, 0, .5);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.virtual-benifit-sec .card .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    background-color: var(--primary-dark);
    color: var(--white);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.virtual-benifit-sec .card .icon svg {
    width: 25px;
    height: 25px;
}

.virtual-benifit-sec .section-title,
.virtual-features-sec .section-title,
.virtual-business-sec .section-title {
    max-width: 80%;
    width: 100%;
    margin: 0 auto 30px;
}

.virtual-features-sec .virtual-card p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/******************** NFC-business-card end css ********************/
/*************** vcard-add-ons-card sec start css ***************/
.vcard-add-ons-card .section-title h2 {
    font: var(--h2) !important;
}

.vcard-add-ons-card .section-title p {
    max-width: 900px;
}

.vcard-add-ons-card .service-card .service-icon {
    width: 50px;
    height: 50px;
    outline: none;
    color: var(--white);
    font-size: 23px;
    font-weight: 600;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.vcard-add-ons-card .service-card .service-content p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/******************** advocatego page css start css ********************/
/************* advocatego-features-sec start css  *************/
.advocatego-features-sec .listing-content {
    padding: 15px;
}

.advocatego-features-sec .listing-content li .icon {
    width: 55px;
    height: 55px;
    outline: none;
    margin: 0;
}

.advocatego-features-sec .listing-content li .icon svg {
    width: 30px;
    height: 30px;
}

.advocatego-core-sec .tab-head-row,
.mobile-app-core-sec .tab-head-row {
    padding: 0;
    background: var(--white);
    max-width: 330px;
}

.advocatego-core-sec .core-grid,
.mobile-app-core-sec .core-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.advocatego-core-sec .core-accordion {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 35%;
    flex: 0 0 35%;
}

.mobile-app-core-sec .core-accordion {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}

.advocatego-core-sec .core-visual,
.mobile-app-core-sec .core-visual {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.advocatego-core-sec .core-visual.is-hidden,
.mobile-app-core-sec .core-visual.is-hidden {
    display: none;
}

.advocatego-core-sec .core-visual img,
.mobile-app-core-sec .core-visual img {
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.advocatego-core-sec.core-accordion-title,
.mobile-app-core-sec.core-accordion-title {
    font-size: 18px;
    margin: 0 0 8px;
}

.advocatego-core-sec .core-accordion-list,
.mobile-app-core-sec .core-accordion-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.advocatego-core-sec .core-accordion-item,
.mobile-app-core-sec .core-accordion-item {
    border-top: 1px dashed var(--border-color);
}

.advocatego-core-sec .core-accordion-item:first-child,
.mobile-app-core-sec .core-accordion-item:first-child {
    border-top: 0;
}

.advocatego-core-sec .core-accordion-item:last-child .core-accordion-button,
.advocatego-core-sec .core-accordion-item:last-child .core-accordion-panel,
.mobile-app-core-sec .core-accordion-item:last-child .core-accordion-button,
.mobile-app-core-sec .core-accordion-item:last-child .core-accordion-panel {
    padding-bottom: 0;
}

.advocatego-core-sec .core-accordion-item:first-child .core-accordion-button,
.mobile-app-core-sec .core-accordion-item:first-child .core-accordion-button {
    padding-top: 0;
}

.advocatego-core-sec .core-accordion-item:last-child .core-accordion-panel,
.mobile-app-core-sec .core-accordion-item:last-child .core-accordion-panel {
    padding-top: 14px;
}

.advocatego-core-sec .core-accordion-button,
.mobile-app-core-sec .core-accordion-button {
    width: 100%;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 0;
    font-size: 17px;
    color: var(--black);
    background-color: var(--white);
}

.advocatego-core-sec .core-accordion-panel,
.mobile-app-core-sec .core-accordion-panel {
    padding: 0 0 14px;
    display: none;
}

.advocatego-core-sec .core-accordion-item.active .core-accordion-panel,
.mobile-app-core-sec .core-accordion-item.active .core-accordion-panel {
    display: block;
}

.advocatego-core-sec .chevron,
.mobile-app-core-sec .chevron {
    position: relative;
    width: 16px;
    height: 16px;
}

.advocatego-core-sec .chevron::before,
.chevron::after,
.mobile-app-core-sec .chevron::before,
.chevron::after {
    content: "";
    position: absolute;
    background: var(--black);
    border-radius: 2px;
    -webkit-transition: -webkit-transform .25s ease;
    transition: -webkit-transform .25s ease;
    -o-transition: transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease, -webkit-transform .25s ease;
}

.advocatego-core-sec .chevron::before,
.mobile-app-core-sec .chevron::before {
    width: 12px;
    height: 2px;
    top: 7px;
    right: 2px;
}

.advocatego-core-sec .chevron::after,
.mobile-app-core-sec .chevron::after {
    width: 2px;
    height: 12px;
    top: 2px;
    right: 7px;
}

.advocatego-core-sec .core-accordion-item.active .chevron::after,
.mobile-app-core-sec .core-accordion-item.active .chevron::after {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
}

/************* advocatego-features-sec end css  *************/
.single-product .get-app-section.mobile-app-sec {
    padding-top: 0 !important;
}

/************* case-features-sec start css  *************/
.case-features-sec .networking-card .icon {
    border-radius: 8px;
}

.case-legal-sec .networking-card .networking-card-content p,
.case-features-sec .networking-card .networking-card-content p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.case-legal-sec .networking-card {
    border: 1px solid var(--border-color);
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
}

.case-legal-sec .networking-card:hover {
    border-color: var(--theme-color);
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
}

.core-modules-sec .row {
    row-gap: 20px;
}

.core-modules-sec .core-modules-wrp ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.core-modules-sec .core-modules-wrp ul li {
    position: relative;
    padding-left: 25px;
    margin-left: 5px;
}

.core-modules-sec .core-modules-wrp ul li strong {
    color: var(--black);
}

.core-modules-sec .core-modules-wrp ul li:not(:last-of-type) {
    margin-bottom: 10px;
}

.core-modules-sec .core-modules-wrp ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    background-color: var(--black);
    outline: 5px solid rgba(0, 0, 0, .2);
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.core-modules-wrp p {
    margin-top: 15px;
}

.core-modules-wrp h3 {
    margin-bottom: 20px;
}

.case-management-card .case-management-content h3 {
    margin-bottom: 10px;
}

.case-management-card .case-management-content p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.case-management-card .case-management-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: var(--primary-dark);
    color: var(--white);
}

.case-management-card .case-management-icon svg {
    width: 25px;
    height: 25px;
}

.case-management-sec .row {
    row-gap: 20px;
}

.case-management-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px;
    gap: 15px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.case-management-card:hover {
    border-left-color: var(--primary-dark);
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}

.core-modules-image {
    background-color: var(--white);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

/* hr-software page css start */
/* hrm-header header css start */
.hrm-header .main-navigation {
    flex: 1;
}

.hrm-header .hrm-logo-col img {
    width: 80px;
}

.hrm-header .hrm-logo-col a,
.hrm-mobile-navigation .mobile-logo a {
    display: block;
}

.hrm-header a:not(.btn) {
    color: var(--black) !important;
    font-weight: 500 !important;
}

.hrm-header .main-navigation ul.menu ul.sub-menu.mega-menu {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    border-radius: 10px;
    border: 1px solid #D0D5DDDD;
}

.hrm-header {
    position: absolute;
    z-index: 2;
    width: 100%;
}

.hrm-header .navigation-row {
    position: relative;
    background: var(--white);
    border: 1px solid #D0D5DDDD;
    border-radius: 10px;
    padding: 10px;
    margin: 15px 0 0;
    box-shadow: none;
}

.hrm-header .main-navigation ul.menu ul.sub-menu.mega-menu>li {
    max-width: unset;
    margin: 0;
}

.hrm-header .main-navigation ul.menu>li>a {
    display: flex;
    align-items: center;
    padding: 10px;
}

.hrm-header .sub-menu .menu-icon {
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.hrm-header .sub-menu li {
    display: flex;
    align-items: start;
    max-width: unset;
    margin: 0;
    gap: 10px;
}

.hrm-header .sub-menu li a {
    width: auto;
    padding: 0 !important;
}

.hrm-header .sub-menu span {
    display: block;
    margin: 0 0 3px;
    font-size: 16px;
}

.hrm-header .sub-menu .menu-icon svg {
    height: 28px;
    width: 28px;
}

button.hrm-mobile-menu-button {
    padding: 0 0 0 14px;
    font-size: 25px;
    display: none;
}

button.hrm-mobile-menu-button i {
    color: var(--primary-dark);
    font-size: 22px;
}

.hrm-mobile-navigation .menu-close-icon svg {
    cursor: pointer;
}

.hrm-header .main-navigation ul.menu {
    text-align: center;
}

.hrm-header .main-navigation ul.menu li,
.hrm-header .main-navigation ul.sub-menu ul {
    position: unset;
}

.hrm-header .main-navigation ul.menu ul.sub-menu {
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background-color: var(--white);
    box-shadow: 6px 6px 24px 0px #0000001A;
    -webkit-box-shadow: 6px 6px 24px 0px #0000001A;
    transform-origin: top;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    border-radius: 0 0px 10px 10px;
    -webkit-border-radius: 0 0px 10px 10px;
    -moz-border-radius: 0 0px 10px 10px;
    -ms-border-radius: 0 0px 10px 10px;
    -o-border-radius: 0 0px 10px 10px;
}

.hrm-header .main-navigation ul.menu ul.sub-menu.mega-menu {
    left: 50% !important;
    width: 100%;
    transform: translateX(-50%) scaleY(0);
    -webkit-transform: translateX(-50%) scaleY(0);
    -moz-transform: translateX(-50%) scaleY(0);
    -ms-transform: translateX(-50%) scaleY(0);
    -o-transform: translateX(-50%) scaleY(0);
}

.hrm-header .main-navigation ul.menu>li:hover a,
.hrm-header .main-navigation ul.menu>li:hover .sub-menu {
    background: var(--white) !important;
}

.hrm-header .main-navigation ul.menu>li:hover .sub-menu.mega-menu {
    left: 50% !important;
    transform: translateX(-50%) scaleY(1);
    -webkit-transform: translateX(-50%) scaleY(1);
    -moz-transform: translateX(-50%) scaleY(1);
    -ms-transform: translateX(-50%) scaleY(1);
    -o-transform: translateX(-50%) scaleY(1);
}

.hrm-header .main-navigation ul.menu ul.sub-menu,
.main-navigation ul.menu>li:hover a,
.hrm-header .main-navigation ul.menu>li:hover .sub-menu {
    left: unset !important;
    right: unset !important;
}

.hrm-header .main-navigation ul.menu>li>a::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

#menu-mobile-menu>li {
    margin-bottom: 10px;
}

#menu-mobile-menu .sub-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    height: 0;
    padding: 0;
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform-origin: top;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
}

#menu-mobile-menu .sub-menu.active {
    opacity: 1;
    visibility: visible;
    height: auto;
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
}

#menu-mobile-menu>li>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    border: 1px solid var(--theme-color);
    font-size: 15px;
    font-weight: 500;
    padding: 10px 30px 10px 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
}

#menu-mobile-menu>li>a:after {
    display: block;
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#menu-mobile-menu>li>a.open-menu {
    background: var(--theme-color);
}

#menu-mobile-menu>li>a.open-menu:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

#menu-mobile-menu .menu-item li {
    border: 0;
}

#menu-mobile-menu .menu-item li.list-title {
    border-bottom: 1px solid var(--border-color);
}

.mobile-menu-overlay .popup-overlay::after {
    content: '';
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.37);
}

/* hrm-header header css end */

/* hero-banner-sec start */
.hrm-hero-banner {
    position: relative;
    padding-top: 120px;
}

.hrm-hero-banner .btn-wrapper {
    margin-bottom: 30px;
}

.hrm-hero-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 65%;
    background: #f8f8f8;
    clip-path: ellipse(70% 100% at 50% 0%);
    z-index: -1;
}

.hrm-hero-banner .hrm-banner-img {
    overflow: hidden;
    border: 6px solid var(--black);
    border-radius: 30px;
    max-width: 1050px;
    margin: 0 auto;
}

.hrm-hero-banner .hrm-video-wrp {
    position: relative;
    padding-bottom: 58.25%;
}

.hrm-hero-banner .hrm-video-wrp iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* hero-banner-sec end */
/* hrm-about-section css start */
.hrm-about-section .about-content-wrapper {
    background-color: var(--white);
    border-radius: 20px;
    padding: 60px 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.hrm-about-section .about-content-wrapper {
    border-left: 2px solid var(--primary-dark);
    border-right: 2px solid var(--primary-dark);
}

.hrm-about-section .section-title {
    margin-bottom: 0;
}

.hrm-about-section .section-title p strong {
    border-bottom: 1px solid rgba(1, 61, 41, 0.2);
}

/* hrm-about-section css end */
/* codecanyon-promo-sec css start */
.codecanyon-promo-sec .row {
    row-gap: 20px;
}

.codecanyon-promo-sec .section-title {
    max-width: 542px;
}

.codecanyon-promo-sec .content-box-wrp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-top: 30px;
}

.codecanyon-promo-sec .content-box-wrp .content-box {
    gap: 15px;
    padding: 20px;
    background-color: var(--white);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0 0 40px 5px rgba(200, 203, 208, 0.27);
}

.codecanyon-promo-sec .content-box-icon {
    background: var(--primary-light);
    padding: 10px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.codecanyon-promo-sec .content-box-wrp .content-box svg {
    height: 30px;
    width: 30px;
}

.codecanyon-promo-sec .content-box-wrp .content-box-text h3 {
    margin: 0 0 10px;
}

.codecanyon-promo-sec .content-box-wrp .content-box-text p {
    font-size: 18px;
    font-weight: 600;
}

/* codecanyon-promo-sec css end */

/* hr management sec css start */
.hr-management-sec .management-card h3 {
    margin: 0 0 15px;
}

.hr-management-sec .management-icon {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-dark);
    color: var(--white);
    margin: 0 auto 15px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.hr-management-sec .management-icon svg {
    height: 26px;
    width: 26px;
}

.hr-management-sec .row {
    row-gap: 20px;
}

/* hr management sec css end */

/* hrm-mobile-sec css start */
.hrm-mobile-sec .mobile-functions,
.hrm-mobile-sec .mobile-functions .function-item:not(:last-of-type) {
    margin: 0 0 20px;
}

.hrm-mobile-sec .mobile-functions .function-item .check-icon-wrp {
    margin: 0 0 15px;
    gap: 10px;
}

.hrm-mobile-sec .mobile-functions .function-item .check-icon-wrp svg path {
    fill: var(--theme-color);
}

.hrm-mobile-sec .row {
    row-gap: 20px;
}

/* hrm-mobile-sec css end */

/* hrm-blog-sec css start */
.hrm-blog-sec .blog-card .modified-date {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--black);
}

.hrm-blog-sec .blog-card .modified-date i {
    margin-right: 5px;
}

/* hrm-blog-sec css end */

/* hrm-cta-sec css start */
.hrm-cta-sec .section-title h2 {
    max-width: 720px;
    margin: 0 auto;
}

.hrm-cta-sec .cta-benefits {
    color: var(--black);
    gap: 10px 20px;
    margin: 0 0 30px;
}

.hrm-cta-sec .cta-benefit {
    gap: 8px;
    font-weight: 600;
}

.arrow-btn svg {
    height: 16px;
    width: 16px;
}

/* hrm-cta-sec css end */
/* payroll hero sec css start */
.payroll-hero-sec .section-title,
.payroll-features-sec .section-title h2 {
    max-width: 820px;
    margin: 0 auto;
}

.payroll-hero-sec .section-title p {
    max-width: 580px;
}

/* payroll hero sec css end */
/* payroll-features-sec css start */
.payroll-features-sec .feature-content ul li:not(:last-of-type) {
    margin-bottom: 15px;
}

.payroll-features-sec .feature-content ul li,
.attendance-features-sec .feature-card ul li,
.biometric-attendance-sec .biometric-content ul li,
.performance-tabs-sec .tab-content ul li,
.common-hrm-features .feature-tab-content ul li {
    position: relative;
    padding: 0px 0px 0px 25px;
}

.payroll-features-sec .feature-content ul li::before,
.attendance-features-sec .feature-card ul li::before,
.biometric-attendance-sec .biometric-content ul li:before,
.performance-tabs-sec .tab-content ul li:before,
.common-hrm-features .feature-tab-content ul li::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
}

.payroll-features-sec .feature-image img {
    border-radius: 15px;
}

.payroll-features-sec .row,
.payroll-mobile-sec .row,
.biometric-attendance-sec .row,
.leave-tracking-sec .leave-tracking-wrp .row,
.leave-features-sec .row,
.performance-served-sec .row,
.document-process-sec .row,
.recruitment-process-sec .row,
.lms-vs-tms-sec .row,
.hrms-hris-hcm-sec .row,
.hr-business-need-sec .row {
    row-gap: 20px;
}

/* payroll-features-sec css end */

/* global-payroll-sec css start */
.global-payroll-sec {
    background-color: var(--black);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.global-payroll-sec .currency-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.global-payroll-sec .currency-country-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.global-payroll-sec .currency-country-item:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--theme-color);
    transform: translateY(-2px);
}

.global-payroll-sec .currency-country-item.currency-hidden {
    display: none;
}

.global-payroll-sec .currency-country-item.currency-visible {
    display: flex;
}

.global-payroll-sec .currency-flag {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.global-payroll-sec .currency-flag svg {
    width: 100%;
    height: 100%;
}

.global-payroll-sec .currency-info {
    gap: 2px;
}

.global-payroll-sec .currency-code {
    font-weight: 700;
}

.global-payroll-sec .currency-name {
    font-size: 13px;
}

.global-payroll-sec .currency-note {
    display: none;
}

/* global-payroll-sec css end */

/* payroll-manage-sec css start */
.payroll-manage-slider,
.attendance-features-slider {
    padding: 10px;
    margin: -10px;
}

.payroll-manage-sec .section-title p {
    max-width: 100%;
}

/* payroll-manage-sec css end */

/* payroll-mobile-sec css start */
.payroll-mobile-sec .payroll-mobile-img {
    max-width: 480px;
    margin: 0 auto;
}

/* payroll-mobile-sec css end */

/* payroll-content-sec css start */
.payroll-content-sec .payroll-content-wrapper .content-block {
    background-color: var(--white);
    padding: 35px;
    margin-bottom: 30px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    -webkit-transition: transform 0.3s ease, box-shadow 0.3s ease;
    -moz-transition: transform 0.3s ease, box-shadow 0.3s ease;
    -ms-transition: transform 0.3s ease, box-shadow 0.3s ease;
    -o-transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.payroll-content-sec .payroll-content-wrapper .content-block:hover {
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
}

.payroll-content-sec .payroll-content-wrapper .content-block:last-child {
    margin-bottom: 0;
}

.payroll-content-sec .payroll-content-wrapper .content-block h3 {
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
}

.payroll-content-sec .payroll-content-wrapper .content-block h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-color) 0%, transparent 100%);
}

.payroll-content-sec .payroll-content-wrapper .content-block ul,
.payroll-content-sec .payroll-content-wrapper .content-block ol {
    margin: 20px 0 20px 0;
    padding: 0 0 0 20px;
}

.payroll-content-sec .payroll-content-wrapper .content-block ul li,
.payroll-content-sec .payroll-content-wrapper .content-block ol li {
    margin-bottom: 12px;
    position: relative;
    list-style: disc;
}

.payroll-content-sec .payroll-content-wrapper .content-block ul li:last-child,
.payroll-content-sec .payroll-content-wrapper .content-block ol li:last-child {
    margin-bottom: 0;
}

.payroll-content-sec .payroll-content-wrapper .scenario-item,
.payroll-content-sec .payroll-content-wrapper .capability-item,
.payroll-content-sec .payroll-content-wrapper .struggle-item {
    background: #fafafa;
    padding: 25px;
    margin-bottom: 20px;
    border-left: 3px solid var(--theme-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.payroll-content-sec .payroll-content-wrapper .scenario-item:last-child,
.payroll-content-sec .payroll-content-wrapper .capability-item:last-child,
.payroll-content-sec .payroll-content-wrapper .struggle-item:last-child {
    margin-bottom: 0;
}

.payroll-content-sec .payroll-content-wrapper .scenario-item h4,
.payroll-content-sec .payroll-content-wrapper .capability-item h4,
.payroll-content-sec .payroll-content-wrapper .struggle-item h4 {
    margin-bottom: 12px;
}

.payroll-content-sec .payroll-content-wrapper .scenario-item p,
.payroll-content-sec .payroll-content-wrapper .capability-item p,
.payroll-content-sec .payroll-content-wrapper .struggle-item p {
    margin-bottom: 12px;
}

.payroll-content-sec .payroll-content-wrapper .scenario-item p:last-child,
.payroll-content-sec .payroll-content-wrapper .capability-item p:last-child,
.payroll-content-sec .payroll-content-wrapper .struggle-item p:last-child {
    margin-bottom: 0;
}

.payroll-content-sec .payroll-content-wrapper .scenario-item ul,
.payroll-content-sec .payroll-content-wrapper .capability-item ul,
.payroll-content-sec .payroll-content-wrapper .struggle-item ul {
    margin: 15px 0 0 0;
    padding: 0 0 0 20px;
}

.payroll-content-sec .payroll-content-wrapper .cta-link {
    text-align: center;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px dashed var(--theme-color);
}

/* payroll-content-sec css end */

/* attendance-info-sec css start */
.attendance-info-sec .item-inner {
    color: var(--black);
    margin: 0 0 15px;
}

.attendance-info-sec .item-inner {
    gap: 10px;
}

.attendance-info-sec .item-inner h3 {
    font: var(--h6);
}

.attendance-info-sec .item ul {
    padding-left: 20px;
}

.attendance-info-sec .item ul li {
    list-style: disc;
}

.attendance-info-sec .item ul li:not(:last-of-type) {
    margin: 0 0 10px;
}

.attendance-info-sec .masonry {
    column-count: 3;
}

.attendance-info-sec .masonry .item {
    background: var(--white);
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    break-inside: avoid;
}

/* attendance-info-sec css end */
/* attendance-features-sec css start */
.attendance-features-sec .feature-card {
    position: relative;
    width: 100%;
    padding: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.attendance-features-sec .feature-card .feature-icon {
    height: 50px;
    width: 50px;
    flex-shrink: 0;
    background-color: var(--primary-dark);
    color: var(--white);
    border-radius: 10px;
}

.attendance-features-sec .feature-card .feature-icon-wrp,
.attendance-features-sec .feature-card p:not(:last-of-type),
.attendance-features-sec .feature-card ul {
    margin: 0 0 15px;
}

.attendance-features-sec .feature-card .feature-icon-wrp {
    gap: 10px;
}

.attendance-features-sec .feature-card ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M97.085 7.68C71.823 29.305 50.886 60.22 35.334 93.696c-.416.915-1.705.894-2.12 0-9.378-20.833-19.17-36.136-30.232-44.14-.977-.707-.353-2.246.832-2.1 12.018 1.517 25.158 9.314 30.46 17.32C48.807 39.45 69.1 20.633 95.754 5.787c1.227-.686 2.391.978 1.33 1.893z' fill='%23013D29'/%3E%3C/svg%3E");
}

.attendance-features-sec .feature-card ul li:not(:last-of-type) {
    margin: 0 0 8px;
}

/* attendance-features-sec css end */
/* biometric-attendance-sec css start */
.biometric-attendance-sec .biometric-content ul li {
    font-weight: 600;
    font-size: 16px;
}

.biometric-attendance-sec .biometric-content ul li:not(:last-of-type) {
    padding-bottom: 10px;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--border-color);
}

.biometric-attendance-sec .biometric-image img {
    border-radius: 15px;
}

/* biometric-attendance-sec css end */

/* attendance-why-choose-sec css start */
.attendance-why-choose-sec .row {
    row-gap: 20px;
    margin: 0 -10px;
}

.attendance-why-choose-sec .row [class*="col-"] {
    padding: 0 10px;
}

.attendance-why-choose-sec .why-choose-card {
    padding: 15px;
    background: var(--white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    border-left: 2px solid var(--accent-color);
}

.attendance-why-choose-sec .why-choose-card h3 {
    margin: 0 0 15px;
}

.attendance-why-choose-sec .bottom-line {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-top: 30px;
}

/* attendance-why-choose-sec css end */

/* leave system css start */
.leave-system-sec .tabs-row {
    max-width: 25%;
    min-width: 205px;
    width: 100%;
    border-right: 1px solid var(--border-color);
}

.leave-system-sec .tabs li a {
    position: relative;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    color: var(--black);
    padding: 15px;
    border-left: 3px solid transparent;
}

.leave-system-sec .tabs li:not(.active) a:hover {
    background-color: #f8f8f8;
}

.leave-system-sec .tabs li.active a {
    border-color: var(--theme-color);
    color: var(--theme-color);
}

.leave-system-sec .tabs-container {
    flex: 1;
    padding-left: 50px;
}

.leave-system-sec .tab-content ul,
.leave-system-sec .tab-content p {
    margin: 20px 0 0;
}

.common-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.common-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(160, 160, 160, 0.5);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.common-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* leave system css end */
/* leave-manage-sec css start */
.leave-manage-sec .feature-card .feature-icon,
.leave-manage-sec .feature-card h3,
.performance-served-sec .feature-card .feature-icon,
.performance-served-sec .feature-card h3 {
    margin: 0 0 15px;
}

/* leave-manage-sec css end */
.leave-tracking-sec .leave-tracking-wrp {
    padding: 30px;
    border-radius: 20px;
}

/* leave-partner-sec css start */
.leave-partner-sec .management-card p {
    margin: 0 0 15px;
}

.leave-partner-sec .management-card .btn {
    padding: 10px 15px;
}

/* leave-partner-sec css end */
/* leave-features-sec css start */
.leave-features-sec .row {
    scroll-margin-top: 140px;
}

.leave-features-sec .row:not(:last-of-type) {
    padding-bottom: 40px;
}

.leave-features-sec .feature-content h2,
.leave-features-sec .feature-content h3 {
    margin: 0 0 15px;
}

.leave-features-sec .feature-content ul {
    padding: 0 0 0 25px;
    margin: 0 0 15px;
}

.leave-features-sec .feature-content ul li {
    list-style-type: disc;
}

.leave-features-sec .feature-content ul li:not(:last-of-type) {
    margin: 0 0 10px;
}


/* leave-features-sec css end */

/* performance-tabs-sec css start */
.performance-tabs-sec .tab-content ul li:not(:last-of-type) {
    margin: 0 0 10px;
}

/* performance-tabs-sec css end */

/* performance-work-sec css start */
.performance-work-sec .performance-work-wrp {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.performance-work-sec .work-card {
    position: relative;
    z-index: 1;
    padding: 0 0 0 40px;
}

.performance-work-sec .work-card:not(:last-of-type) {
    margin-bottom: 25px;
}

.performance-work-sec .performance-work-wrp:before,
.performance-work-sec .work-card::before,
.performance-work-sec .work-card::after {
    content: '';
    position: absolute;
}

.performance-work-sec .performance-work-wrp:before {
    left: 5px;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: var(--border-color);
}

.performance-work-sec .work-card::before {
    left: 0;
    top: 33px;
    height: 1px;
    width: 40px;
    background-color: var(--border-color);
    z-index: -1;
}

.performance-work-sec .work-card::after {
    top: 28px;
    left: 0;
    height: 12px;
    width: 12px;
    outline: 4px solid rgba(16, 183, 127, 0.2);
    background-color: var(--primary-dark);
    border-radius: 50%;
}

.performance-work-sec .work-card .work-card-inner {
    padding: 20px;
    border-radius: 10px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.performance-work-sec .work-card h3 {
    margin: 0 0 15px;
}

/* performance-work-sec css end */

/* performance-served-sec css start */
.performance-served-sec .served-card {
    padding: 2px;
    background: linear-gradient(180deg, rgba(1, 61, 41, 1) 0%, rgba(253, 253, 253, 1) 100%);
    border-radius: 12px;
}

.performance-served-sec .served-card .feature-card {
    border: 0;
}

.performance-served-sec .row,
.recruitment-process-sec .row,
.hrms-hris-hcm-sec .row {
    margin: 0 -10px;
}

.performance-served-sec .row [class*="col-"],
.recruitment-process-sec .row [class*="col-"],
.hrms-hris-hcm-sec .row [class*="col-"] {
    padding: 0 10px;
}

/* performance-served-sec css end */

/* document-process-sec css start */
.document-process-sec .doc-process-icon-wrp {
    position: relative;
}

.document-process-sec .doc-process-icon {
    position: relative;
    width: 55px;
    height: 55px;
    border-radius: 10px;
    background-color: var(--theme-color);
    flex-shrink: 0;
}

.document-process-sec .doc-process-icon svg {
    height: 28px;
    width: 28px;
}

.document-process-sec .doc-process-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.document-process-sec ul li {
    gap: 20px;
}

.document-process-sec ul li:not(:last-of-type) {
    margin: 0 0 25px;
}

.document-process-sec .doc-process-content .doc-process-step {
    display: inline-block;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 14px;
    padding: 2px 10px;
    color: var(--white);
    background-color: var(--accent-color);
    border-radius: 4px;
    margin: 0 0 10px;
}

.document-process-sec .doc-process-content h3 {
    margin: 0 0 10px;
}

/* document-process-sec css end */

/* common-document-features-sec css start */
.common-document-features-sec .feature-card ul {
    margin: 15px 0 0;
}

/* common-document-features-sec css end */

/* common-hrm-features css start */
.common-hrm-features .tabs-row .feature-tabs {
    padding: 15px;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}

.common-hrm-features .tabs-wrp {
    border: 1px solid var(--border-color);
    background-color: var(--white);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 20px;
    overflow: hidden;
}

.common-hrm-features .feature-tabs {
    gap: 8px;
}

.common-hrm-features .feature-tabs li a {
    position: relative;
    text-transform: capitalize;
    font-weight: 600;
    padding: 8px 15px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.common-hrm-features .feature-tabs li.active a {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}

.common-hrm-features .feature-tabs-container {
    padding: 25px;
}

.common-hrm-features .feature-tab-content p,
.common-hrm-features .feature-tab-content ul {
    margin: 15px 0 0;
}

.common-hrm-features .feature-tab-content ul {
    padding: 0 0 0 10px;
}

.common-hrm-features .feature-tab-content ul ul {
    margin: 0 0 18px;
}

.common-hrm-features .feature-tab-content ul li:not(:last-of-type) {
    margin: 0 0 10px;
}

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

/* common-hrm-features css end */

/* recruitment-process-sec css start */
.recruitment-process-sec .recruit-process-card {
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--white);
    -webkit-box-shadow: rgba(124, 42, 42, 0.2) 0px 2px 8px 0px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.recruitment-process-sec .recruit-process-card:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px 0px;
}

.recruitment-process-sec .process-step-num {
    position: absolute;
    top: 0;
    right: 15px;
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    color: var(--theme-color);
    opacity: 0.1;
    z-index: -1;
}

.recruitment-process-sec .recruit-process-card h3 {
    margin: 0 0 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.recruitment-process-sec .recruit-process-card ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

.recruitment-process-sec .recruit-process-card ul li:last-child {
    margin-bottom: 0;
}

.recruitment-process-sec .recruit-process-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2310B77F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="20 6 9 17 4 12"%3E%3C/polyline%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* recruitment-process-sec css end */

/* detailed-recruitment-process css start */
.detailed-recruitment-process .process-wrp {
    background-color: var(--white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
    max-width: 800px;
    margin: 0 auto;
}

.detailed-recruitment-process .process-wrp .set>a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--black);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.detailed-recruitment-process .process-wrp .set a .accordion-icon {
    height: 18px;
    width: 18px;
    transition: transform 0.3s ease-in-out;
}

.detailed-recruitment-process .process-wrp .set a.active .accordion-icon {
    transform: rotate(180deg);
}

.detailed-recruitment-process .process-wrp .set:not(:last-of-type) {
    border-bottom: 1px dashed var(--border-color);
}

.detailed-recruitment-process .process-wrp .set .content {
    padding: 0 20px 20px;
}

/* detailed-recruitment-process css end */

/* recruitment-empower-sec css start */
.recruitment-empower-sec .feature-card .icon-wrp {
    gap: 10px;
}

.recruitment-empower-sec .feature-card ul {
    margin: 15px 0 0;
}

.bg-gray {
    background-color: #f8f8f8;
}

.max-w-60 {
    max-width: 600px;
    width: 100%;
    margin: 0 auto 30px;
}

/* recruitment-empower-sec css end */

/* lms-vs-tms-sec css start */
.lms-vs-tms-sec .vs-wrap {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 30px;
    overflow: hidden;
}

.lms-vs-tms-sec .vs-badge {
    position: absolute;
    top: 17px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-dark);
    color: var(--white);
    font-weight: 800;
    letter-spacing: .06em;
    border: 4px solid var(--white);
    box-shadow: 0 8px 20px rgba(1, 35, 51, .18);
    z-index: 2;
}

.lms-vs-tms-sec .vs-card {
    height: 100%;
    background: var(--white);
    border-radius: 15px;
    padding: 20px;
    border-top: 3px solid var(--primary-dark);
}

.lms-vs-tms-sec .vs-card h3 {
    margin: 0 0 15px;
}

.lms-vs-tms-sec .vs-points {
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}

.lms-vs-tms-sec .vs-points li {
    position: relative;
    padding-left: 22px;
}

.lms-vs-tms-sec .vs-points li:not(:last-of-type) {
    margin-bottom: 10px;
}

.lms-vs-tms-sec .vs-points li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-color);
}

.lms-vs-tms-sec .vs-footer {
    border-top: 1px dashed var(--border-color);
    margin-top: 20px;
    padding-top: 15px;
}

/* lms-vs-tms-sec css end */

/* ess-comparison-sec css start */
.ess-comparison-sec table {
    border-collapse: collapse;
    min-width: 600px;
    color: var(--black);
}

.ess-comparison-sec table th {
    color: var(--white);
}

.ess-comparison-sec table td,
.ess-comparison-sec table th {
    padding: 10px;
}

/* ess-comparison-sec css end */
/* hr software content section css start */
.hr-business-need-sec .guide-panel {
    background-color: var(--white);
    border-radius: 20px;
    padding: 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-left: 2px solid var(--primary-dark);
    border-right: 2px solid var(--primary-dark);
}

.hrms-hris-hcm-sec .guide-type-card {
    background: var(--white);
    border-radius: 15px;
    padding: 20px;
    height: 100%;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

.hrms-hris-hcm-sec .guide-type-card .h5 {
    margin: 0 0 12px;
}

.hr-software-built-sec .service-card .service-icon i {
    font-size: 20px;
}

.cloud-vs-onpremise-sec .row {
    row-gap: 20px;
}

.cloud-vs-onpremise-sec ul {
    margin: 15px 0 0;
}

.cloud-vs-onpremise-sec ul li {
    gap: 10px;
}

.cloud-vs-onpremise-sec ul li:not(:last-child) {
    margin: 0 0 10px;
}

/* hr software content section css end */
/* hr-software page css end */

/******************** WorkDo Search Autocomplete Styles start css ********************/
.tax-product_cat .search-input-wrapper,
.post-type-archive .search-input-wrapper {
    padding-left: 10px;
}

.search-input-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
}

.workdo-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    background-color: var(--white);
    border: 1px solid #ddd;
    max-height: 350px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.workdo-search-suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: block;
    color: #000000;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    font-size: 15px;
    font-weight: 500;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.workdo-search-suggestion-item:hover,
.workdo-search-suggestion-item.selected {
    background: #f8f8f8;
    color: var(--theme-color);
}

.workdo-search-suggestion-item:last-child {
    border-bottom: none;
}

.workdo-search-no-results,
.workdo-search-loading {
    padding: 15px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

.workdo-search-loading {
    color: #666;
}

/* Scrollbar styling */
.workdo-search-suggestions::-webkit-scrollbar {
    width: 6px;
}

.workdo-search-suggestions::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.workdo-search-suggestions::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.workdo-search-suggestions::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/******************** WorkDo Search Autocomplete Styles end css ********************/


/******************** WorkDo Banner Search Autocomplete Styles start css ********************/
/* Banner search form positioning */
.banner-search-form {
    position: relative;
}

/* Banner search input wrapper for positioning */
.banner-search-input-wrapper {
    position: static;
    /* Changed from relative */
    flex: 1;
    display: flex;
}

/* Banner search suggestions dropdown - positioned relative to .form-input parent */
.workdo-banner-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    /* Position below the .form-input */
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-align: left;
}

/* Individual suggestion item */

/* Hover and selected states */
.workdo-banner-search-suggestions .workdo-search-suggestion-item:hover,
.workdo-banner-search-suggestions .workdo-search-suggestion-item.selected {
    background: var(--light-color);
    color: var(--theme-color);
}

/* Last item no border */
.workdo-banner-search-suggestions .workdo-search-suggestion-item:last-child {
    border-bottom: none;
}

/* Loading and no results states */
.workdo-banner-search-suggestions .workdo-search-loading,
.workdo-banner-search-suggestions .workdo-search-no-results {
    padding: 12px 15px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* Scrollbar styling */
.workdo-banner-search-suggestions::-webkit-scrollbar {
    width: 6px;
}

.workdo-banner-search-suggestions::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.workdo-banner-search-suggestions::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.workdo-banner-search-suggestions::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/******************** WorkDo Banner Search Autocomplete Styles end css ********************/


/******************** WorkDo Blog Search Autocomplete Styles start css ********************/
/* Blog search form positioning */
.workdo-blog-autocomplete-form {
    position: relative;
}

/* Blog search input wrapper */
.blog-search-input-wrapper {
    position: static;
    flex: 1;
    display: flex;
}

/* Blog search suggestions dropdown */
.workdo-blog-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Individual suggestion item */
.workdo-blog-search-suggestions .workdo-search-suggestion-item {
    display: block;
    padding: 12px 15px;
    cursor: pointer;
    color: var(--black);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

/* Hover and selected states */
.workdo-blog-search-suggestions .workdo-search-suggestion-item:hover,
.workdo-blog-search-suggestions .workdo-search-suggestion-item.selected {
    background: var(--light-color);
    color: var(--theme-color);
}

/* Last item no border */
.workdo-blog-search-suggestions .workdo-search-suggestion-item:last-child {
    border-bottom: none;
}

/* Loading and no results states */
.workdo-blog-search-suggestions .workdo-search-loading,
.workdo-blog-search-suggestions .workdo-search-no-results {
    padding: 12px 15px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* Scrollbar styling */
.workdo-blog-search-suggestions::-webkit-scrollbar {
    width: 6px;
}

.workdo-blog-search-suggestions::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.workdo-blog-search-suggestions::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.workdo-blog-search-suggestions::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/******************************************************************************************************* OLD MAIN STYLE CSS END *******************************************************************************************************/


/*********************************** ai chatbot page css start ***********************************/
.ai-chatbot-sec {
    position: relative;
    z-index: 1;
    background: #f9f9f9;
    overflow: hidden;
}

.ai-chatbot-sec .ai-assistant-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
}

.ai-chatbot-sec:before {
    content: '';
    position: absolute;
    top: -120px;
    left: 8%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 199, 128, 0.14), transparent 65%);
    animation: 14s ease-in-out 0s infinite normal none running zoomIn;
    -webkit-animation: 14s ease-in-out 0s infinite normal none running zoomIn;
}

.ai-chatbot-sec:after {
    content: '';
    position: absolute;
    top: 40px;
    right: 4%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 199, 128, 0.1), transparent 65%);
    animation: 14s ease-in-out 0s infinite normal none running zoomIn;
    -webkit-animation: 14s ease-in-out 0s infinite normal none running zoomIn;
}

.ai-chatbot-sec .section-title {
    max-width: 580px;
    width: 100%;
    margin: 0 auto 30px;
}

.ai-chatbot-sec .section-title h1 {
    font-size: 68px;
}

.ai-chatbot-sec .section-title p {
    font-size: 18px;
}

.ai-chatbot-sec .section-title h1 span {
    background: linear-gradient(90deg, rgb(10, 156, 98), rgb(18, 212, 137), rgb(10, 156, 98)) 0% 0% / 200% text;
    color: transparent;
    animation: 5s linear 0s infinite normal none running textShimmer;
    -webkit-animation: 5s linear 0s infinite normal none running textShimmer;
}

.ai-chatbot-sec .container {
    position: relative;
    z-index: 2;
}

/* chatbot hero icon styles */
.ai-chatbot-sec .hero-bot-icon {
    position: relative;
    z-index: 1;
    width: 90px;
    height: 90px;
    background: linear-gradient(140deg, rgb(18, 212, 137), rgb(8, 154, 96));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    box-shadow: 0 8px 30px rgba(16, 183, 127, 0.3), 0 2px 8px rgba(16, 183, 127, 0.15);
    margin: 0 auto 30px;
    animation: 5s ease-in-out 0s infinite normal none running iconFloat;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-animation: 5s ease-in-out 0s infinite normal none running iconFloat;
}

.ai-chatbot-sec .hero-bot-icon:before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(16, 199, 128, 0.25);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    animation: 2.4s ease-out 0s infinite normal none running iconPlus;
    -webkit-animation: 2.4s ease-out 0s infinite normal none running iconPlus;
}

.ai-chatbot-sec .hero-bot-icon svg {
    width: 44px;
    height: 44px;
}

/* keyframe animations */
@keyframes heroDotPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.4);
        opacity: 1;
    }
}

@keyframes heroBubbleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-14px);
    }
}

@keyframes iconPlus {
    0% {
        transform: scale(1);
        opacity: .5;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

@keyframes textShimmer {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

@keyframes zoomIn {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        -webkit-transform: translate(0, 0) scale(1);
        -moz-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
        -o-transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(40px, -30px) scale(1.08);
        -webkit-transform: translate(40px, -30px) scale(1.08);
        -moz-transform: translate(40px, -30px) scale(1.08);
        -ms-transform: translate(40px, -30px) scale(1.08);
        -o-transform: translate(40px, -30px) scale(1.08);
    }

    66% {
        transform: translate(-30px, 20px) scale(.95);
        -webkit-transform: translate(-30px, 20px) scale(.95);
        -moz-transform: translate(-30px, 20px) scale(.95);
        -ms-transform: translate(-30px, 20px) scale(.95);
        -o-transform: translate(-30px, 20px) scale(.95);
    }
}

/* chatbot input container styles */
.ai-chatbot-sec .chatbot-input-container {
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
}

.ai-chatbot-sec .chat-input-animate {
    position: relative;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(120deg, rgb(16, 199, 128), rgb(191, 238, 218) 40%, rgb(16, 199, 128) 80%) 0% 0% / 250%;
    box-shadow: rgba(10, 156, 98, 0.3) 0px 24px 60px -18px;
    animation: 6s linear 0s infinite normal none running textShimmer;
    -webkit-animation: 6s linear 0s infinite normal none running textShimmer;
}

.ai-chatbot-sec .warning-txt {
    margin-top: 20px;
}

.ai-chatbot-sec .warning-txt p {
    font-size: 14px;
}

.ai-chatbot-sec .chatbot-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--white);
    border: 1px solid rgba(16, 183, 127, 0.25);
    padding: 10px 10px 10px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    gap: 12px;
    transition: all 0.3s ease;
    border-radius: 18.5px;
    -webkit-border-radius: 18.5px;
    -moz-border-radius: 18.5px;
    -ms-border-radius: 18.5px;
    -o-border-radius: 18.5px;
}

.ai-chatbot-sec .chatbot-wand-icon {
    flex-shrink: 0;
}

.ai-chatbot-sec .chatbot-wand-icon svg {
    width: 20px;
    height: 20px;
}

.ai-chatbot-sec .chatbot-input-field {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    color: var(--black);
    display: block;
    font-size: 16px;
}

.ai-chatbot-sec .chatbot-dropdown-wrapper {
    position: relative;
    flex-shrink: 0;
}

.ai-chatbot-sec .chatbot-select-field {
    background: rgb(244, 247, 245);
    border-color: rgb(231, 236, 233);
    padding: 11px 35px 11px 15px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.ai-chatbot-sec .chatbot-select-field.nice-select .list {
    min-width: 220px;
    max-height: 350px;
    left: auto;
    right: 0;
    top: auto;
    margin: 0;
    bottom: calc(100% + 5px);
    overflow: hidden auto;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.ai-chatbot-sec .chatbot-submit-btn {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgb(18, 212, 137), rgb(8, 154, 96));
    color: var(--white);
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.ai-chatbot-sec .chatbot-submit-btn:hover {
    transform: scale(1.06);
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
}

.ai-chatbot-sec .chatbot-submit-btn svg {
    width: 20px;
    height: 20px;
}

/* chatbot suggestion boxes styles */
.ai-chatbot-sec .chatbot-suggestions {
    margin: 30px auto 0;
}

.ai-chatbot-sec .chatbot-suggestions-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 24px;
}

.ai-chatbot-sec .chatbot-suggestions-header .suggestion-line {
    width: 40px;
    height: 2px;
    margin: 4px 0 0;
    background: linear-gradient(90deg, transparent, var(--theme-color));
    border-radius: 2px;
}

.ai-chatbot-sec .chatbot-suggestions-header .suggestion-line.right {
    background: linear-gradient(to left, transparent, var(--theme-color));
}

.ai-chatbot-sec .chatbot-suggestions-header .suggestion-label {
    font-weight: 500;
    color: var(--black);
    letter-spacing: 0.01em;
}

.ai-chatbot-sec .chatbot-suggestions-grid {
    gap: 12px;
}

.ai-chatbot-sec .chatbot-suggestion-card {
    display: flex;
    align-items: center;
    text-align: start;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.ai-chatbot-sec .chatbot-suggestion-card:hover {
    border-color: rgba(16, 183, 127, 0.35);
    box-shadow: 0 4px 20px rgba(16, 183, 127, 0.1);
    transform: translateY(-2px);
}

.ai-chatbot-sec .chatbot-suggestion-card:hover::before {
    opacity: 1;
}

.ai-chatbot-sec .suggestion-card-icon {
    color: var(--theme-color);
}

.ai-chatbot-sec .chatbot-suggestion-card:hover .suggestion-card-icon {
    flex-shrink: 0;
}

.ai-chatbot-sec .suggestion-card-icon svg {
    width: 16px;
    height: 16px;
}

.ai-chatbot-sec .suggestion-card-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
    line-height: 1.2;
}

/* chatbot conversation interface styles */
.ai-chatbot-sec .chatbot-conversation-container {
    display: none;
    flex-direction: column;
    max-width: 900px;
    width: 100%;
    margin: 0 auto 25px;
    background: var(--white);
    overflow: hidden;
    border: 1px solid rgba(16, 183, 127, 0.08);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01);
}

/* Show conversation state */
.ai-chatbot-sec .ai-chatbot-wrp.conversation-started .chatbot-conversation-container {
    display: flex;
}

.ai-chatbot-sec .ai-chatbot-wrp.conversation-started .hero-bot-icon,
.ai-chatbot-sec .ai-chatbot-wrp.conversation-started .section-title,
.ai-chatbot-sec .ai-chatbot-wrp.conversation-started .chatbot-suggestions {
    display: none;
}

/* Header style */
.ai-chatbot-sec .chatbot-conversation-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.ai-chatbot-sec .conversation-bot-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-chatbot-sec .conversation-bot-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--theme-color), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.ai-chatbot-sec .conversation-bot-avatar svg {
    width: 22px;
    height: 22px;
}

.ai-chatbot-sec .conversation-bot-name {
    font-size: 18px;
}

.ai-chatbot-sec .conversation-bot-info .new-chat-btn {
    padding: 10px 15px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.ai-chatbot-sec .conversation-bot-status {
    font-size: 14px;
    display: block;
    margin-top: 4px;
}

/* Conversation Body */
.ai-chatbot-sec .chatbot-conversation-body {
    padding: 20px;
    height: 390px;
    overflow-y: auto;
}

.ai-chatbot-sec .chatbot-messages-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Messages base */
.ai-chatbot-sec .chatbot-message {
    display: flex;
    max-width: 80%;
    width: 100%;
}

/* User Message bubble */
.ai-chatbot-sec .chatbot-message.user-message {
    justify-content: flex-end;
    margin-left: auto;
}

.ai-chatbot-sec .chatbot-message.user-message .message-bubble {
    background-color: rgba(16, 183, 127, 0.08);
    border-radius: 15px 15px 4px 15px;
    padding: 12px 15px;
}

.ai-chatbot-sec .chatbot-message.user-message .message-text {
    color: var(--black);
    font-weight: 500;
}

.ai-chatbot-sec .chatbot-message.user-message .message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
}

.ai-chatbot-sec .chatbot-message.user-message .message-time {
    font-size: 12px;
    color: #71717a;
}

/* Bot Message bubble */
.ai-chatbot-sec .chatbot-message.bot-message {
    gap: 12px;
    flex-direction: column;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--theme-color), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    flex-shrink: 0;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-avatar svg {
    width: 18px;
    height: 18px;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-bubble {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 4px 18px 18px 18px;
    padding: 12px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text {
    color: var(--black);
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text br {
    display: block;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text p {
    margin-bottom: 12px;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text p:last-child {
    margin-bottom: 0;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text ol,
.ai-chatbot-sec .chatbot-message.bot-message .message-text ul {
    margin: 8px 0 12px 20px;
    padding: 0;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text li {
    margin-bottom: 6px;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text ul li {
    list-style-type: disc;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text ol li {
    list-style: decimal;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text a {
    color: var(--theme-color);
    font-weight: 500;
    text-decoration: underline;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text a:hover {
    color: var(--primary-dark);
}

/* Green Checkmark List styling */
.ai-chatbot-sec .checkmark-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px !important;
}

.ai-chatbot-sec .checkmark-list .check-icon {
    color: var(--theme-color);
    background-color: var(--primary-light);
    border-radius: 50%;
    padding: 2px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Metadata & Actions */
.ai-chatbot-sec .message-meta-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.ai-chatbot-sec .bot-message .message-time {
    font-size: 12px;
    color: #71717a;
}

.ai-chatbot-sec .message-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-chatbot-sec .message-action-btn {
    background: transparent;
    padding: 5px;
    border-radius: 6px;
    color: #71717a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.ai-chatbot-sec .message-action-btn svg {
    width: 14px;
    height: 14px;
}

.ai-chatbot-sec .message-action-btn:hover {
    color: var(--theme-color);
    background-color: var(--primary-light);
}

/* How It Works Section css start */
.ai-how-works-sec .how-works-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
}

.ai-how-works-sec .how-works-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: var(--theme-color);
}

.ai-how-works-sec .how-works-card .card-step-num {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: var(--first-font);
    font-size: 36px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.04);
    line-height: 1;
    transition: all 0.3s ease;
}

.ai-how-works-sec .how-works-card:hover .card-step-num {
    color: rgba(16, 183, 127, 0.18);
    transform: scale(1.08);
}

.ai-how-works-sec .how-works-card .card-icon-wrap {
    width: 50px;
    height: 50px;
    background-color: var(--primary-light);
    color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
    border-radius: 10px;
}

.ai-how-works-sec .how-works-card:hover .card-icon-wrap {
    background-color: var(--theme-color);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(16, 183, 127, 0.2);
}

.ai-how-works-sec .how-works-card .card-icon-wrap svg {
    width: 24px;
    height: 24px;
}

.ai-how-works-sec .how-works-card h3 {
    margin-bottom: 12px;
}

.ai-how-works-sec .how-works-card .step-connector {
    position: absolute;
    top: 50px;
    right: -18px;
    color: rgba(0, 0, 0, 0.25);
    pointer-events: none;
    transition: all 0.3s ease-in-out;
}

.ai-how-works-sec .how-works-card .step-connector svg {
    width: 16px;
    height: 16px;
}

.ai-how-works-sec .how-works-card:hover .step-connector {
    transform: translateX(4px);
    color: var(--theme-color);
}

/* How It Works Section css end */

/* Quick Action Links under response text */
.ai-chatbot-sec .message-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
    margin-bottom: 20px;
}

.ai-chatbot-sec .quick-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--second-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--theme-color);
    background-color: var(--primary-light);
    border: 1px solid rgba(16, 183, 127, 0.15);
    border-radius: 100px;
    padding: 6px 14px;
    transition: all 0.2s ease;
}

.ai-chatbot-sec .quick-link-btn svg {
    width: 13px;
    height: 13px;
}

.ai-chatbot-sec .quick-link-btn:hover {
    color: var(--white);
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    box-shadow: 0 4px 10px rgba(16, 183, 127, 0.15);
    transform: translateY(-1px);
}

/* Specific selector to override generic bot-message text links for quick-action pills */
.ai-chatbot-sec .chatbot-message.bot-message .message-text .quick-link-btn {
    text-decoration: none;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text .quick-link-btn:hover {
    color: var(--white);
}

/* Suggested Add-ons Section css start */
.ai-chatbot-sec .message-addons-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--border-color);
}

.ai-chatbot-sec .addons-section-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    color: var(--black);
}

.ai-chatbot-sec .addons-grid {
    gap: 15px;
    width: 100%;
}

.ai-chatbot-sec .addon-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.ai-chatbot-sec .addon-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 183, 127, 0.08);
    border-color: rgba(16, 183, 127, 0.4);
}

.ai-chatbot-sec .addon-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fafbfc;
    border-bottom: 1px solid var(--border-color);
}

.ai-chatbot-sec .addon-card-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.ai-chatbot-sec .addon-card-icon-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: #f0f0f0;
}

.ai-chatbot-sec .addon-card-info {
    flex: 1;
    overflow: hidden;
}

.ai-chatbot-sec .addon-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.ai-chatbot-sec .addon-card-price {
    font-size: 11px;
    color: var(--theme-color);
    font-weight: 600;
    margin-top: 2px;
}

/* Swiper inside card */
.ai-chatbot-sec .addon-screenshot-swiper {
    width: 100%;
}

.ai-chatbot-sec .addon-screenshot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Swiper navigation buttons inside card */
.ai-chatbot-sec .addon-screenshot-swiper .swiper-button-prev,
.ai-chatbot-sec .addon-screenshot-swiper .swiper-button-next {
    width: 30px;
    height: 30px;
    background: var(--white);
    color: var(--black);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
}

.ai-chatbot-sec .addon-screenshot-swiper .swiper-button-prev svg,
.ai-chatbot-sec .addon-screenshot-swiper .swiper-button-next svg {
    height: 14px;
    width: 14px;
}

.ai-chatbot-sec .addon-screenshot-swiper .swiper-button-prev:hover,
.ai-chatbot-sec .addon-screenshot-swiper .swiper-button-next:hover {
    color: var(--theme-color);
}

/* Footer buttons */
.ai-chatbot-sec .addon-card-actions {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    background: #fafafa;
}

/* Use highly specific selectors to override general chatbot response text links */
.ai-chatbot-sec .chatbot-message.bot-message .message-text .addon-card-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 6px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text .addon-card-btn.buy-btn {
    background: var(--accent-color);
    color: var(--white);
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text .addon-card-btn.buy-btn:hover {
    background: var(--accent-dark);
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text .addon-card-btn.doc-btn {
    background: var(--theme-color);
    color: var(--white);
    border-left: 1px solid var(--white);
}

.ai-chatbot-sec .chatbot-message.bot-message .message-text .addon-card-btn.doc-btn:hover {
    background: var(--primary-dark);
}

.ai-chatbot-sec .addon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.01);
    text-decoration: none !important;
    transition: all 0.3s ease-in-out !important;
    -webkit-transition: all 0.3s ease-in-out !important;
    -moz-transition: all 0.3s ease-in-out !important;
    -ms-transition: all 0.3s ease-in-out !important;
    -o-transition: all 0.3s ease-in-out !important;
}

.ai-chatbot-sec .addon-badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.ai-chatbot-sec .addons-grid .addon-img {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    object-fit: contain;
    flex-shrink: 0;
}

.ai-chatbot-sec .addon-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.ai-chatbot-sec .addon-badge:hover .addon-name {
    color: var(--theme-color);
}

.ai-chatbot-sec .message-suggested-wrp .suggesion-txt {
    color: var(--black);
    font-size: 14px;
    font-weight: 500;
    gap: 6px;
    margin: 0 0 15px;
}

.ai-chatbot-sec .message-suggested-wrp .suggesion-txt svg {
    color: var(--theme-color);
    height: 16px;
    width: 16px;
}

.ai-chatbot-sec .message-suggested-wrp {
    display: none;
}

.ai-chatbot-sec .ai-chatbot-wrp.conversation-started .message-suggested-wrp {
    display: block;
}

.ai-chatbot-sec .message-suggested-questions {
    gap: 10px;
    margin-bottom: 15px;
}

.ai-chatbot-sec .suggested-question-pill {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    padding: 10px;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.005);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.ai-chatbot-sec .suggested-question-pill:hover {
    color: var(--black);
    box-shadow: 0 4px 12px rgba(16, 183, 127, 0.15);
    transform: translateY(-1px);
}

/* Suggested Add-ons Section css end */
/********************************** ai chatbot page css end **********************************/

/******************************************* dash saas bundle page css start *******************************************/
.bundle-hero-sec {
    background-color: var(--white);
    box-shadow: none;
    background: linear-gradient(180deg, var(--primary-light) 0%, #f5f5f5 40%, #f5f5f5 100%);
}

.bundle-hero-sec:before {
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(rgba(226, 232, 240, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(226, 232, 240, 0.3) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
}

.bundle-hero-sec:after {
    display: none;
}

.bundle-hero-sec .bundle-slider-wrp {
    max-width: 900px;
    margin: 0 auto;
}

.bundle-hero-sec .bundle-pill-slider-ltr::before,
.bundle-hero-sec .bundle-pill-slider-ltr::after {
    content: '';
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.bundle-hero-sec .bundle-pill-slider-ltr::before {
    left: 0;
    background: linear-gradient(to right, #f5f5f5 0%, rgba(245, 245, 245, 0.8) 30%, transparent 100%);
}

.bundle-hero-sec .bundle-pill-slider-ltr::after {
    right: 0;
    background: linear-gradient(to left, #f5f5f5 0%, rgba(245, 245, 245, 0.8) 30%, transparent 100%);
}

.bundle-hero-sec .bundle-pill-slider-ltr {
    padding: 8px 0;
    margin: -8px 0;
}

.bundle-hero-sec .bundle-pill-slider-ltr .swiper-slide {
    width: auto;
}

.bundle-hero-sec .industry-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    font-weight: 500;
    color: var(--black);
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: default;
    user-select: none;
}

.bundle-hero-sec .industry-pill svg {
    height: 18px;
    width: 18px;
    flex-shrink: 0;
    color: var(--theme-color);
    transition: all 0.3s ease-in-out;
}

.bundle-hero-sec .industry-pill:hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.bundle-hero-sec .industry-pill:hover svg {
    color: var(--accent-color);
    transform: scale(1.15);
}

.bundle-hero-sec .bundle-pricing-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 45px 0 0;
}

.bundle-hero-sec .bundle-pricing-bar .pricing-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bundle-hero-sec .bundle-pricing-bar .pricing-label {
    font-size: 13px;
    font-weight: 600;
    color: #8c98a4;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}

.bundle-hero-sec .bundle-pricing-bar .pricing-value {
    font: var(--h3);
}

.bundle-hero-sec .bundle-pricing-bar .pricing-original {
    color: var(--red-color);
    opacity: 0.8;
}

.bundle-hero-sec .bundle-pricing-bar .pricing-current {
    color: var(--theme-color);
    font: var(--h2);
    font-weight: 800;
}

.bundle-hero-sec .bundle-pricing-bar .pricing-savings {
    color: var(--accent-color);
}

.bundle-hero-sec .bundle-pricing-bar .pricing-divider {
    height: 55px;
    border-right: 2px solid var(--border-color);
}

.bundle-hero-sec .info-txt p {
    color: var(--black);
    font-weight: 500;
}

.bundle-hero-sec .btn-wrapper {
    margin: 50px 0;
}

/* bundle-addon-sec css start */
.bundle-addon-slider .swiper-slide {
    width: auto;
}

.bundle-addon-sec .bundle-addon-slider-wrp {
    max-width: calc(100% - 220px);
}

.bundle-addon-slider::before,
.bundle-addon-slider::after {
    content: '';
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.bundle-addon-slider::before {
    left: 0;
    background: linear-gradient(to right, var(--white) 0%, rgba(275, 275, 275, 0.8) 30%, transparent 100%);
}

.bundle-addon-slider::after {
    right: 0;
    background: linear-gradient(to left, var(--white) 0%, rgba(275, 275, 275, 0.8) 30%, transparent 100%);
}

.bundle-addon-slider {
    padding: 15px 0;
    margin: -15px 0;
}

.bundle-addon-sec .bundle-addon-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    padding: 20px;
    width: 200px;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.bundle-addon-sec .bundle-addon-card:hover {
    border-color: var(--theme-color);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.bundle-addon-sec .bundle-addon-card.more-card {
    height: auto;
    background: linear-gradient(145deg, var(--theme-color) 0%, #0a7d58 60%, #064e38 100%);
}

.bundle-addon-sec .bundle-addon-card svg {
    height: 28px;
    width: 28px;
    color: var(--theme-color);
}

.bundle-addon-sec .bundle-addon-card.more-card svg {
    color: var(--white);
}

.bundle-addon-sec .bundle-addon-card span {
    color: var(--black);
    text-transform: capitalize;
    font-weight: 500;
    font-size: 16px;
}

/* bundle-addon-sec css end */

/* bundle-modules-sec start css */
.bundle-modules-sec .module-category-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    padding: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-modules-sec .module-category-card:hover {
    border-color: transparent;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
}

.bundle-modules-sec .module-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background-color: var(--accent-light);
    color: var(--accent-color);
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-modules-sec .module-category-card:hover .module-card-icon {
    background-color: var(--accent-color);
    color: var(--white);
}

.bundle-modules-sec .module-card-icon svg {
    width: 24px;
    height: 24px;
}

.bundle-modules-sec .module-category-card h3 {
    margin-bottom: 15px;
}

.bundle-modules-sec .module-card-pills {
    gap: 6px;
    margin-bottom: 15px;
}

.bundle-modules-sec .module-pill {
    display: inline-block;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    background-color: var(--light-gray);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.bundle-modules-sec .module-pill:hover {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--white);
}

.bundle-modules-sec .module-card-desc {
    flex: 1;
    margin-bottom: 15px;
}

.bundle-modules-sec .module-card-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-color);
    margin-top: auto;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-modules-sec .module-card-link svg {
    flex-shrink: 0;
}

.bundle-modules-sec .module-card-link:hover {
    color: var(--primary-dark);
    gap: 8px;
}

/* bundle-modules-sec end css */

/* bundle-features-sec start css */
.bundle-features-sec .feature-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 20px;
}

.bundle-features-sec .bento-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.bundle-features-sec .bento-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: transparent;
}

.bundle-features-sec .bento-card-header {
    margin-bottom: 20px;
}

.bundle-features-sec .bento-card.bento-card-highlight .addon-image {
    margin: 0 -20px -20px;
}

.bundle-features-sec .bento-card.bento-card-highlight .addon-image img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.bundle-features-sec .bento-card .bento-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--primary-light);
    color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-features-sec .bento-card:hover .bento-icon {
    background-color: var(--theme-color);
    color: var(--white);
    transform: scale(1.05);
}

.bundle-features-sec .bento-card .bento-icon svg {
    width: 22px;
    height: 22px;
}

.bundle-features-sec .bento-card .bento-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-color);
}

.bundle-features-sec .bento-card .bento-content h3 {
    margin-bottom: 12px;
}

/* Span Classes for Bento Layout */
.bundle-features-sec .bento-span-2-2 {
    grid-column: span 2;
    grid-row: span 2;
}

.bundle-features-sec .bento-span-2-1 {
    grid-column: span 2;
    grid-row: span 1;
}

/* bundle-features-sec end css */

/* bundle-demo-sec start css */
.bundle-demo-sec .demo-split-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
    align-items: center;
}

.bundle-demo-sec .demo-step-item {
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-demo-sec .demo-step-item .step-num {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-dark), var(--dark-color));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(14, 158, 110, 0.4);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.bundle-demo-sec .demo-step-item .step-content h3 {
    margin-bottom: 10px;
}

.bundle-demo-sec .mock-browser {
    background: var(--black);
    border: 1px solid rgba(16, 183, 127, 0.15);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
}

.bundle-demo-sec .mock-browser .browser-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    gap: 20px;
}

.bundle-demo-sec .mock-browser .browser-header .browser-dots {
    display: flex;
    gap: 6px;
}

.bundle-demo-sec .mock-browser .browser-header .browser-title {
    font-weight: 500;
    font-size: 16px;
}

.bundle-demo-sec .mock-browser .browser-header .browser-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}

.bundle-demo-sec .mock-browser .browser-header .dot-red {
    background-color: #ff5f56;
}

.bundle-demo-sec .mock-browser .browser-header .dot-yellow {
    background-color: #ffbd2e;
}

.bundle-demo-sec .mock-browser .browser-header .dot-green {
    background-color: #27c93f;
}

.bundle-demo-sec .demo-tabs-list.pages-tabs {
    gap: 8px;
}

.bundle-demo-sec .demo-tabs-list.pages-tabs li {
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 14px;
    font-weight: 500;
    color: #a8bab1;
    line-height: 1;
    cursor: pointer;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-demo-sec .demo-tabs-list.pages-tabs li:hover {
    border-color: var(--theme-color);
    color: var(--white);
    background: rgba(16, 183, 127, 0.05);
}

.bundle-demo-sec .demo-tabs-list.pages-tabs li.active {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--white);
    box-shadow: 0 4px 10px rgba(16, 183, 127, 0.25);
}

.bundle-demo-sec .mock-browser .browser-body {
    padding: 20px;
}

.bundle-demo-sec .mock-browser .browser-address {
    background: rgba(0, 0, 0, 1);
    border-radius: 8px;
    padding: 10px 15px;
    font-family: monospace;
    font-size: 12px;
    color: #bed2c8;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
}

.bundle-demo-sec .mock-browser .browser-address span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all;
}

.bundle-demo-sec .mock-browser .browser-address svg.lock-icon {
    color: var(--theme-color);
    flex-shrink: 0;
}

.bundle-demo-sec .addon-preview-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.bundle-demo-sec .addon-preview-box .preview-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(16, 183, 127, 0.2);
    border: 1px solid rgba(16, 183, 127, 0.3);
    color: var(--theme-color);
    flex-shrink: 0;
}

.bundle-demo-sec .preview-icon svg {
    width: 22px;
    height: 22px;
}

.bundle-demo-sec .preview-text span {
    display: block;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--first-font);
    color: var(--white);
}

.bundle-demo-sec .demo-cta-btn {
    border-radius: 10px;
}

/* bundle-demo-sec end css */

/* bundle-compare-sec start css */
.bundle-compare-sec .compare-card-inner {
    height: 100%;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 35px 28px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-compare-sec .compare-card-inner:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.bundle-compare-sec .compare-card .compare-title {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--first-font);
    color: var(--black);
    margin-bottom: 15px;
}

.bundle-compare-sec .compare-card .compare-price {
    font: var(--h3);
    font-weight: 800;
    color: var(--black);
    margin-bottom: 10px;
}

.bundle-compare-sec .compare-card .compare-desc {
    margin-bottom: 25px;
}

.bundle-compare-sec .compare-card .compare-features {
    gap: 15px;
    border-top: 1px dashed var(--border-color);
    padding-top: 25px;
}

.bundle-compare-sec .compare-card .compare-features li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bundle-compare-sec .compare-card .compare-features li.positive {
    color: var(--black);
    font-weight: 500;
}

.bundle-compare-sec .compare-card .compare-features li svg {
    padding: 2px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.bundle-compare-sec .compare-card .compare-features li.negative svg.icon-cross {
    color: var(--red-color);
    background: rgba(239, 68, 68, 0.1);

}

.bundle-compare-sec .compare-card .compare-features li.positive svg.icon-check {
    color: var(--theme-color);
    background: rgba(16, 183, 127, 0.1);
}

.bundle-compare-sec .compare-card.featured .compare-card-inner {
    border: 2px solid var(--theme-color);
    background: rgba(16, 183, 127, 0.05);
    box-shadow: 0 20px 40px rgba(16, 183, 127, 0.15);
}

.bundle-compare-sec .compare-card.accordion-button .compare-price {
    color: var(--theme-color);
}

.bundle-compare-sec .compare-card.featured .best-value-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--primary-dark) 100%);
    ;
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* bundle-compare-sec end css */

/* bundle-top-selling-sec css start */
.bundle-top-selling-sec {
    background-color: var(--accent-light);
}

.bundle-top-selling-sec .top-selling-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 3px 4px -3px hsla(0, 0%, 4%, .05), 0 4px 8px -3px hsla(0, 0%, 4%, .05);
    transition: all 0.3s ease-in-out;
}

.bundle-top-selling-sec .top-selling-card .card-badge-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%);
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1em;
    padding: 6px 10px;
    width: 100%;
    overflow: hidden;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.bundle-top-selling-sec .top-selling-card .card-badge-banner.badge-popular {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.bundle-top-selling-sec .top-selling-card .card-badge-banner.badge-trending {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.bundle-top-selling-sec .top-selling-card .card-badge-banner.badge-essential {
    background: linear-gradient(135deg, var(--theme-color) 0%, #059669 100%);
}

.bundle-top-selling-sec .top-selling-card .card-badge-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: shimmer-badge 3s infinite;
}

@keyframes shimmer-badge {
    0% {
        left: -150%;
    }

    50% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.bundle-top-selling-sec .top-selling-card .addon-content {
    padding: 20px 20px 0;
}

.bundle-top-selling-sec .top-selling-card .addon-name-arrow {
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    -moz-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    -ms-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    -o-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bundle-top-selling-sec .top-selling-card .addon-name-arrow svg {
    width: 18px;
    height: 18px;
}

.bundle-top-selling-sec .top-selling-card:hover .addon-name-arrow {
    color: var(--theme-color);
    transform: translateX(4px);
}

.bundle-top-selling-sec .top-selling-card .addon-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.bundle-top-selling-sec .top-selling-card:hover {
    box-shadow: 0 8px 18px -6px hsla(0, 0%, 4%, .05), 0 24px 42px -4px hsla(0, 0%, 4%, .1);
}

.bundle-top-selling-sec .top-selling-card .icon-wrp {
    margin: 0 0 15px;
}

.bundle-top-selling-sec .top-selling-card .top-selling-icon {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--white);
    background: linear-gradient(145deg, var(--theme-color) 0%, #0a7d58 60%, #064e38 100%);
    border-radius: 8px;
}

.bundle-top-selling-sec .top-selling-card .top-selling-icon svg {
    height: 20px;
    width: 20px;
}

.bundle-top-selling-sec .top-selling-card h3 {
    font-size: 18px;
}

.bundle-top-selling-sec .top-selling-card p {
    font-size: 14px;
}

/* bundle-top-selling-sec css end */

/* bundle-industry-sec css start */
.bundle-industry-sec .industry-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease-in-out;
}

.bundle-industry-sec .industry-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: transparent;
}

.bundle-industry-sec .industry-card .industry-icon {
    width: 44px;
    height: 44px;
    background-color: var(--primary-light);
    color: var(--theme-color);
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    border-radius: 12px;
}

.bundle-industry-sec .industry-card:hover .industry-icon {
    background-color: var(--theme-color);
    color: var(--white);
    transform: scale(1.05);
}

.bundle-industry-sec .industry-card .industry-icon svg {
    width: 22px;
    height: 22px;
}

.bundle-industry-sec .industry-card h3 {
    margin-bottom: 12px;
}

.bundle-industry-sec .industry-card p {
    font-size: 14px;
    margin: 0 0 15px;
}

.bundle-industry-sec .industry-card .demo-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-dark);
}

.bundle-industry-sec .industry-card .demo-link svg {
    height: 16px;
    width: 16px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-industry-sec .industry-card .demo-link:hover svg {
    transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
}

/* bundle-industry-sec css end */

/* bundle-steps-sec start css */

.bundle-steps-sec .steps-flow {
    gap: 6px;
}

.bundle-steps-sec .bundle-step-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-steps-sec .bundle-step-card:hover {
    border-color: var(--theme-color);
    box-shadow: 0 15px 30px rgba(16, 183, 127, 0.08);
    transform: translateY(-4px);
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    -o-transform: translateY(-4px);
}

.bundle-steps-sec .bundle-step-card .card-icon-wrapper {
    width: 54px;
    height: 54px;
    background: var(--theme-color);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: var(--white);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-steps-sec .bundle-step-card .card-icon-wrapper svg {
    width: 24px;
    height: 24px;
}

.bundle-steps-sec .bundle-step-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

.bundle-steps-sec .bundle-step-card .card-step-status {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    display: inline-block;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-steps-sec .bundle-step-card:hover .card-step-status {
    background: var(--primary-light);
    color: var(--theme-color);
}

.bundle-steps-sec .flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--border-color);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.bundle-steps-sec .steps-flow:hover .flow-arrow {
    color: var(--theme-color);
}

/* bundle-steps-sec end css */

/* bundle-cta-sec start css */

.bundle-cta-sec .pricing-summary-card {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    padding: 40px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.bundle-cta-sec .pricing-col {
    text-align: center;
    flex: 1;
}

.bundle-cta-sec .pricing-divider {
    width: 1px;
    height: 60px;
    background-color: var(--border-color);
}

.bundle-cta-sec .pricing-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    color: #8c98a4;
}

.bundle-cta-sec .pricing-col .price-amount {
    font: var(--h3);
    color: var(--red-color);
    opacity: 0.8;
}

.bundle-cta-sec .pricing-col .price-amount.pricing-current {
    font: var(--h2);
    font-weight: 800;
    color: var(--theme-color);
}

.bundle-cta-sec .pricing-col .price-amount.pricing-savings {
    color: var(--accent-color);
}

.bundle-cta-sec .cta-btn-wrapper {
    gap: 35px;
    margin-top: 40px;
}

.bundle-cta-sec .cta-btn-wrapper .btn {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.bundle-cta-sec .cta-badge-list {
    margin-top: 30px;
}

.bundle-cta-sec .cta-badge-item {
    font-size: 14px;
    line-height: 1.6;
}

.bundle-cta-sec .cta-badge-item svg {
    display: inline-block;
    margin: 2px 2px -2px 0;
    height: 16px;
    width: 16px;
    color: var(--theme-color);
    flex-shrink: 0;
}

/* bundle-cta-sec end css */

.page-template-dash-saas-complete-bundle .faq-sec .section-title h2 {
    max-width: 800px;
    margin: 0 auto;
}

/* bundle-sticky-bar css start */
.bundle-sticky-bar {
    position: fixed;
    bottom: 25px;
    left: 15px;
    right: 15px;
    z-index: 3;
    background: linear-gradient(135deg, var(--dark-color) 0%, var(--dark-color) 20%, var(--black)100%);
    color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    padding: 15px 15px 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0px 8px 32px 0px #1f232e26;
    max-width: 630px;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 24px, 0);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    -moz-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    -ms-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    -o-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bundle-sticky-bar.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

.bundle-sticky-bar .sticky-bar-title {
    display: block;
    font-family: var(--first-font);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 5px;
    line-height: 1.2;
}

.bundle-sticky-bar .sticky-bar-meta {
    font-size: 13px;
}

.bundle-sticky-bar .sticky-bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.bundle-sticky-bar .sticky-bar-price {
    font-family: var(--first-font);
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
}

/* bundle-sticky-bar css end */

/* bundle-popup css start */
#bundle-popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 15px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

#bundle-popup #bundle-popup-inner {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

#bundle-popup .popup-container {
    position: relative;
    background: var(--white);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    text-align: center;
}

#bundle-popup .popup-close {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
    background: var(--red-color);
    border: none;
    padding: 5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--white);
}

#bundle-popup .popup-close svg {
    height: 100%;
    width: 100%;
}

#bundle-popup .confetti-header {
    position: relative;
    height: 70px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#bundle-popup .success-ring {
    width: 60px;
    height: 60px;
    background: var(--theme-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(16, 183, 127, 0.3);
    color: var(--white);
}

#bundle-popup .confetti-bit {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

#bundle-popup .popup-title {
    color: var(--black);
    font: var(--h5);
}

#bundle-popup .popup-title span {
    color: var(--theme-color);
}

#bundle-popup .popup-subtitle {
    margin: 15px 0 24px 0;
}

#bundle-popup .bundle-card {
    background: rgba(16, 183, 127, 0.06);
    border: 1px solid rgba(16, 183, 127, 0.3);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 24px;
    text-align: left;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

#bundle-popup .card-info {
    color: var(--black);
    flex-grow: 1;
}

#bundle-popup .card-title {
    font: var(--h6);
    font-size: 18px;
    margin: 0 0 15px;
}

#bundle-popup .card-features {
    gap: 8px 15px;
}

#bundle-popup .feature-item {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

#bundle-popup .feature-item svg {
    color: var(--theme-color);
    flex-shrink: 0;
}

#bundle-popup .card-pricing {
    text-align: right;
    flex-shrink: 0;
    border-left: 1px dashed rgba(0, 0, 0, 0.15);
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#bundle-popup .original-price {
    color: var(--red-color);
    font-weight: 500;
}

#bundle-popup .current-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--theme-color);
    margin: 4px 0 8px 0;
}

#bundle-popup .save-badge {
    background: var(--accent-light);
    color: var(--accent-color);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

#bundle-popup .btn-wrapper {
    margin-bottom: 15px;
}

#bundle-popup .btn-checkout,
#bundle-popup .btn-cart {
    flex: 1;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

#bundle-popup .popup-or {
    text-align: center;
    font-size: 14px;
    margin: 20px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bundle-popup .popup-or::before,
#bundle-popup .popup-or::after {
    content: "";
    flex: 1;
    height: 1px;
    border-top: 1px dashed var(--border-color);
}

#bundle-popup .popup-or span {
    padding: 0 10px;
}

#bundle-popup .btn-continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    color: var(--theme-color);
    font-weight: 500;
    margin: 0 auto;
}

#bundle-popup .btn-continue svg {
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

#bundle-popup .btn-continue:hover svg {
    transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
}

/* bundle-popup css end */

/********************************** dash saas bundle page css end **********************************/

/* APXUTE CASCADE LOCKS: intentionally last after the mechanically copied source. */
.apxute-public-page {
    --theme-color: #0D6B8E;
    --primary-dark: #0A5774;
    --primary-light: rgba(13, 107, 142, 0.11);
    --accent-color: #F7760F;
    --accent-light: rgba(247, 118, 15, 0.11);
    --accent-dark: #D85E08;
    --dark-color: #0B3447;
    --brand-navy: #134860;
    --brand-teal: #0F898D;
    --border-color: #D6E4EA;
    --text-color: #607580;
    --light-color: #F1F7FA;
    --light-gray: #F1F7FA;
    --black: #17384A;
}

.apxute-public-page .apx-public-logo-viewport {
    display: block;
    width: 100%;
    aspect-ratio: 1474 / 378;
    overflow: hidden;
}

.apxute-public-page .apx-public-logo-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain;
    object-position: left center;
}

.apxute-public-page .wdo-mobile-drawer .drawer-header .apx-public-logo-viewport {
    width: 170px;
    max-width: 58vw;
}

.apxute-public-page .wdo-header .header-inner,
.apxute-public-page .wdo-header .header-logo,
.apxute-public-page .wdo-header .header-logo a,
.apxute-public-page .wdo-header .header-nav,
.apxute-public-page .wdo-header .header-nav > ul,
.apxute-public-page .wdo-header .header-nav > ul > li,
.apxute-public-page .wdo-header .header-actions {
    align-items: center;
}

.apxute-public-page .wdo-header .header-logo,
.apxute-public-page .wdo-header .header-logo a,
.apxute-public-page .wdo-header .header-nav > ul > li {
    display: flex;
}

.apxute-public-page .wdo-header .header-nav > ul {
    margin-block: 0;
}

.apxute-public-page .wdo-header .header-nav > ul > li > a,
.apxute-public-page .wdo-header .nav-link-button {
    align-items: center;
    min-height: 70px;
    padding-block: 0;
    line-height: 1.2;
}

.apxute-public-page .wdo-footer {
    color: rgba(255, 255, 255, 0.76);
    background: var(--dark-color);
    border-top-color: rgba(255, 255, 255, 0.14);
}

.apxute-public-page .wdo-footer .footer-brand-col .footer-logo {
    width: 220px;
    max-width: 220px;
    box-sizing: border-box;
    padding: 7px 9px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--light-color);
    box-shadow: 0 8px 22px rgba(4, 28, 39, 0.16);
}

.apxute-public-page .wdo-footer .footer-desc,
.apxute-public-page .wdo-footer .footer-links-col ul li a,
.apxute-public-page .wdo-footer-bottom .copyright-text,
.apxute-public-page .wdo-footer .payment-support p {
    color: rgba(255, 255, 255, 0.72);
}

.apxute-public-page .wdo-footer .footer-links-col .footer-heading,
.apxute-public-page .wdo-footer .footer-badges-col .footer-heading,
.apxute-public-page .wdo-footer .envato-exclusive-text,
.apxute-public-page .wdo-footer .footer-trust,
.apxute-public-page .wdo-footer .footer-location {
    color: var(--white);
}

.apxute-public-page .wdo-footer .footer-links-col .footer-heading::after,
.apxute-public-page .wdo-footer .footer-badges-col .footer-heading::after {
    background: var(--accent-color);
}

.apxute-public-page .wdo-footer .footer-links-col ul li a::before {
    background: var(--accent-color);
}

.apxute-public-page .wdo-footer .footer-links-col ul li a:hover,
.apxute-public-page .wdo-footer-bottom .copyright-text a {
    color: var(--accent-color) !important;
}

.apxute-public-page .wdo-footer .footer-trust > i,
.apxute-public-page .wdo-footer .envato-exclusive-text i,
.apxute-public-page .wdo-footer .footer-location i {
    color: var(--brand-teal);
}

.apxute-public-page .wdo-footer .footer-trust small,
.apxute-public-page .wdo-footer .footer-location span {
    color: rgba(255, 255, 255, 0.66);
}

.apxute-public-page .wdo-footer .footer-outline-btn {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.42);
    background: transparent;
}

.apxute-public-page .wdo-footer .footer-outline-btn:hover,
.apxute-public-page .wdo-footer .footer-outline-btn:focus {
    color: var(--dark-color);
    border-color: var(--accent-color);
    background: var(--accent-color);
}

.apxute-public-page .wdo-footer .badge-item {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
}

.apxute-public-page .wdo-footer .badge-item i {
    color: inherit;
}

.apxute-public-page .wdo-footer .badge-item:hover {
    color: var(--dark-color);
    border-color: var(--accent-color);
    background: var(--accent-color);
    box-shadow: 0 7px 18px rgba(247, 118, 15, 0.18);
}

.apxute-public-page .wdo-footer-bottom {
    background: #082A3A;
    border-top-color: rgba(255, 255, 255, 0.14);
}

.apxute-public-page .wdo-footer .footer-social a {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
}

.apxute-public-page .wdo-footer .footer-social a:hover,
.apxute-public-page .wdo-footer .footer-social a:focus {
    color: var(--dark-color);
    border-color: var(--accent-color);
    background: var(--accent-color);
}

.apxute-public-page .secondary-btn {
    color: var(--dark-color);
}

.apxute-public-page .secondary-btn:hover,
.apxute-public-page .secondary-btn:focus {
    color: var(--dark-color);
}

.apxute-public-page [hidden] { display: none !important; }
.apxute-public-page .wdo-header .nav-link-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--black);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 28px 0;
    cursor: pointer;
    font-weight: 600;
}
.apxute-public-page .wdo-header .header-nav > ul > li { position: static; }
.apxute-public-page .wdo-header .header-nav > ul > li.has-dropdown { position: relative; }
.apxute-public-page .wdo-header .header-nav > ul > li.is-open > .mega-menu,
.apxute-public-page .wdo-header .header-nav > ul > li.is-open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.apxute-public-page .wdo-header .header-nav > ul > li.has-mega-menu.is-open > .mega-menu {
    transform: translateX(-50%) translateY(0);
}
.apxute-public-page .wdo-header .mega-menu { max-height: min(70vh, 620px); overflow-y: auto; }
.apxute-public-page .wdo-header .header-actions { gap: 15px; }
.apxute-public-page .wdo-header .header-login-link { color: var(--black); font-weight: 650; }
.apxute-public-page .wdo-hero-sec { padding-top: 92px; }
.apxute-public-page .wdo-hero-sec .workdo-banner-search-suggestions {
    left: 50%;
    width: min(660px, 100%);
    max-height: 330px;
    overflow-y: auto;
    transform: translateX(-50%);
}
.apxute-public-page .marketplace-sec .tabs-row .tabs button.active { color: #fff; background: var(--dark-color); }
.apxute-public-page .marketplace-sec .tab-content-inner.apx-catalog-panel { align-items: stretch; flex-wrap: nowrap; gap: 36px; }
.apxute-public-page .marketplace-sec .apx-catalog-panel .tab-content-info { width: 35%; padding-right: 0; }
.apxute-public-page .marketplace-sec .apx-catalog-products { width: auto; flex: 1; }
.apxute-public-page .addon-sec .all-addon-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.apxute-public-page .services-sec .apx-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.apxute-public-page .faq-sec .faq-answer { display: block; }
.apxute-public-page .wdo-footer .footer-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.apxute-public-page section[id] { scroll-margin-top: 132px; }

@media (max-width: 991px) {
    .apxute-public-page .marketplace-sec .tab-content-inner.apx-catalog-panel { display: grid; }
    .apxute-public-page .marketplace-sec .apx-catalog-panel .tab-content-info,
    .apxute-public-page .marketplace-sec .apx-catalog-products { width: 100%; }
}

/* WorkDo-aligned inner public pages. */
.apxute-public-page .apx265-container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.apxute-public-page .apx265-inner-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 82px;
    background: #F1F7FA;
}

.apxute-public-page .apx265-inner-hero-grid,
.apxute-public-page .apx265-outcomes-grid,
.apxute-public-page .apx265-register-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    align-items: center;
    gap: clamp(42px, 7vw, 90px);
}

.apxute-public-page .apx265-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    color: var(--text-color);
    font-size: 13px;
}

.apxute-public-page .apx265-breadcrumbs a { color: var(--theme-color); }
.apxute-public-page .apx265-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 18px;
    padding: 7px 14px;
    border: 1px solid rgba(13,107,142,.42);
    border-radius: 999px;
    color: var(--dark-color);
    background: rgba(255,255,255,.66);
    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
}

.apxute-public-page .apx265-eyebrow-light { color: #fff; border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.08); }
.apxute-public-page .apx265-inner-copy h1 {
    max-width: 760px;
    margin: 0 0 22px;
    color: var(--black);
    font-size: clamp(46px, 5.2vw, 68px);
    font-weight: 500;
    line-height: 1.08;
}

.apxute-public-page .apx265-inner-copy > p { max-width: 690px; margin: 0 0 28px; font-size: 18px; line-height: 1.65; }
.apxute-public-page .apx265-inner-media { position: relative; margin: 0; }
.apxute-public-page .apx265-inner-media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 10px solid #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-xl);
}

.apxute-public-page .apx265-inner-media figcaption {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 8px;
    color: #fff;
    background: rgba(11,52,71,.92);
}

.apxute-public-page .apx265-inner-media figcaption span { color: rgba(255,255,255,.74); font-size: 13px; }
.apxute-public-page .apx265-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.apxute-public-page .apx265-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #fff;
    background: var(--theme-color);
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.apxute-public-page .apx265-button:hover { color: #fff; background: var(--primary-dark); transform: translateY(-2px); }
.apxute-public-page .apx265-button-primary { background: var(--theme-color); }
.apxute-public-page .apx265-button-secondary { color: var(--dark-color); border-color: rgba(18,60,52,.24); background: #fff; }
.apxute-public-page .apx265-button-secondary:hover { color: #fff; border-color: var(--dark-color); background: var(--dark-color); }
.apxute-public-page .apx265-button-large { min-height: 52px; padding-inline: 28px; }
.apxute-public-page .apx265-button-light { color: var(--dark-color); background: #fff; }
.apxute-public-page .apx265-button-light:hover { color: #fff; background: var(--accent-color); }
.apxute-public-page .apx265-button-dark-outline { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.apxute-public-page .apx265-text-link { color: var(--dark-color); font-weight: 750; }
.apxute-public-page .apx265-inline-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 28px 0 0;
    padding: 0;
    color: var(--dark-color);
    list-style: none;
    font-size: 14px;
    font-weight: 650;
}

.apxute-public-page .apx265-inline-proof li::before,
.apxute-public-page .apx265-check-list li::before { content: '\f058'; margin-right: 8px; color: var(--theme-color); font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.apxute-public-page .apx265-section { padding: 92px 0; }
.apxute-public-page .apx265-section:nth-of-type(odd) { background: #fbfcfc; }
.apxute-public-page .apx265-section-heading { margin-bottom: 46px; }
.apxute-public-page .apx265-heading-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
    align-items: end;
    gap: 50px;
}

.apxute-public-page .apx265-section-heading h2,
.apxute-public-page .apx265-outcomes-grid h2,
.apxute-public-page .apx265-final-cta h2 {
    margin: 0;
    color: var(--black);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.14;
}

.apxute-public-page .apx265-section-heading p { margin: 0; font-size: 17px; line-height: 1.65; }
.apxute-public-page .apx265-role-list,
.apxute-public-page .apx265-principle-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.apxute-public-page .apx265-role-list article,
.apxute-public-page .apx265-principle-list article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 20px;
    padding: 26px 0;
    border-top: 1px solid var(--border-color);
}

.apxute-public-page .apx265-role-list article > span,
.apxute-public-page .apx265-principle-list article > span { color: var(--theme-color); font-family: var(--third-font); font-size: 30px; }
.apxute-public-page .apx265-role-list h3,
.apxute-public-page .apx265-principle-list h3 { margin: 0 0 8px; font-size: 21px; }
.apxute-public-page .apx265-role-list p,
.apxute-public-page .apx265-principle-list p { margin: 0; line-height: 1.6; }
.apxute-public-page .apx265-product-flow { color: rgba(255,255,255,.76); background: var(--dark-color) !important; }
.apxute-public-page .apx265-product-flow h2 { color: #fff; }
.apxute-public-page .apx265-product-flow .apx265-section-heading p { color: rgba(255,255,255,.7); }
.apxute-public-page .apx265-step-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    background: rgba(255,255,255,.13);
    list-style: none;
}

.apxute-public-page .apx265-step-list li { min-height: 260px; padding: 28px; background: var(--dark-color); }
.apxute-public-page .apx265-step-list li > span { color: var(--accent-color); font-family: var(--third-font); font-size: 32px; }
.apxute-public-page .apx265-step-list h3 { margin: 34px 0 12px; color: #fff; font-size: 21px; }
.apxute-public-page .apx265-step-list p { margin: 0; color: rgba(255,255,255,.7); }
.apxute-public-page .apx265-dashboard-frame img { display: block; width: 100%; border: 10px solid #fff; border-radius: 8px; box-shadow: var(--shadow-xl); }
.apxute-public-page .apx265-check-list { display: grid; gap: 12px; margin: 24px 0; padding: 0; list-style: none; }
.apxute-public-page .apx265-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.apxute-public-page .apx265-related-grid > a {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 16px;
    padding: 14px;
    color: var(--black);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
}

.apxute-public-page .apx265-related-grid img { width: 82px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.apxute-public-page .apx265-related-grid span { display: grid; gap: 5px; }
.apxute-public-page .apx265-related-grid small { color: var(--theme-color); font-weight: 750; text-transform: uppercase; }
.apxute-public-page .apx265-final-cta { padding: 76px 0; color: #fff; background: var(--dark-color); }
.apxute-public-page .apx265-final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 44px; }
.apxute-public-page .apx265-final-cta h2 { max-width: 760px; color: #fff; }
.apxute-public-page .apx265-final-cta p { max-width: 720px; color: rgba(255,255,255,.7); }
.apxute-public-page .apx265-final-cta-inner > div:last-child { display: flex; flex-wrap: wrap; gap: 10px; }

.apxute-public-page .apx265-pricing-section { background: #F1F7FA !important; }
.apxute-public-page .apx265-pricing-tools { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.apxute-public-page .apx265-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.apxute-public-page .apx265-filter-row button,
.apxute-public-page .apx265-billing-toggle button {
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--black);
    background: #fff;
    cursor: pointer;
    font-weight: 650;
}

.apxute-public-page .apx265-filter-row button.is-active,
.apxute-public-page .apx265-billing-toggle button.is-active { color: #fff; border-color: var(--dark-color); background: var(--dark-color); }
.apxute-public-page .apx265-billing-toggle { display: inline-flex; flex: none; gap: 4px; padding: 4px; border-radius: 999px; background: #E8F2F6; }
.apxute-public-page .apx265-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.apxute-public-page .apx265-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 28px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.apxute-public-page .apx265-price-card.is-featured { border-color: var(--theme-color); box-shadow: 0 18px 45px rgba(13,107,142,.14); }
.apxute-public-page .apx265-price-card header > span { color: var(--theme-color); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.apxute-public-page .apx265-price-card header > b { float: right; padding: 4px 8px; color: var(--dark-color); border-radius: 4px; background: var(--accent-light); font-size: 11px; }
.apxute-public-page .apx265-price-card h3 { margin: 14px 0 10px; font-size: 25px; }
.apxute-public-page .apx265-price-card header p { min-height: 64px; }
.apxute-public-page .apx265-price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0; }
.apxute-public-page .apx265-price strong { color: var(--black); font-size: 29px; }
.apxute-public-page .apx265-price-card .apx265-button { width: 100%; margin-top: auto; }
.apxute-public-page .apx265-price-card .apx265-text-link { margin-top: 14px; text-align: center; }
.apxute-public-page .apx265-price-empty { padding: 30px; text-align: center; }
.apxute-public-page .apx265-pricing-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 38px; color: var(--dark-color); font-weight: 650; }
.apxute-public-page .apx265-pricing-proof span::before { content: '\f00c'; margin-right: 7px; color: var(--theme-color); font-family: 'Font Awesome 6 Free'; font-weight: 900; }

.apxute-public-page .apx265-register-section { padding: 74px 0; background: #F1F7FA; }
.apxute-public-page .apx265-register-layout { align-items: stretch; gap: 0; }
.apxute-public-page .apx265-register-aside { padding: 52px; color: #fff; border-radius: 8px 0 0 8px; background: var(--dark-color); }
.apxute-public-page .apx265-register-aside h1 { margin: 0 0 18px; color: #fff; font-size: 48px; line-height: 1.12; }
.apxute-public-page .apx265-register-aside > p { color: rgba(255,255,255,.72); font-size: 17px; }
.apxute-public-page .apx265-register-aside ol { display: grid; gap: 18px; margin: 30px 0; padding: 0; list-style: none; }
.apxute-public-page .apx265-register-aside li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; }
.apxute-public-page .apx265-register-aside li > span { color: var(--accent-color); font-family: var(--third-font); font-size: 25px; }
.apxute-public-page .apx265-register-aside li div { display: grid; gap: 3px; }
.apxute-public-page .apx265-register-aside li small { color: rgba(255,255,255,.62); }
.apxute-public-page .apx265-register-aside > img { display: block; width: 100%; margin-top: 34px; border-radius: 7px; }
.apxute-public-page .apx265-breadcrumbs-light,
.apxute-public-page .apx265-breadcrumbs-light a { color: rgba(255,255,255,.72); }
.apxute-public-page .apx265-form { padding: 52px; border: 1px solid var(--border-color); border-left: 0; border-radius: 0 8px 8px 0; background: #fff; }
.apxute-public-page .apx265-form header h2 { margin: 0 0 10px; font-size: 34px; }
.apxute-public-page .apx265-form fieldset { margin: 30px 0 0; padding: 0; border: 0; }
.apxute-public-page .apx265-form legend { width: 100%; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); color: var(--black); font-size: 17px; font-weight: 750; }
.apxute-public-page .apx265-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.apxute-public-page .apx265-field { display: grid; gap: 8px; color: var(--black); font-size: 13px; font-weight: 700; }
.apxute-public-page .apx265-field-full { grid-column: 1 / -1; }
.apxute-public-page .apx265-field input,
.apxute-public-page .apx265-field select {
    width: 100%;
    min-height: 48px;
    padding: 10px 13px;
    border: 1px solid #D6E4EA;
    border-radius: 6px;
    color: var(--black);
    background: #fff;
}

.apxute-public-page .apx265-field input:focus,
.apxute-public-page .apx265-field select:focus { border-color: var(--theme-color); outline: 3px solid var(--primary-light); }
.apxute-public-page .apx265-alert { margin: 24px 0; padding: 14px 16px; border: 1px solid #c6e9dc; border-radius: 6px; background: #edf9f5; }
.apxute-public-page .apx265-alert-error { color: #8f1d1d; border-color: #f2c0c0; background: #fff0f0; }

@media (max-width: 991px) {
    .apxute-public-page .apx265-inner-hero-grid,
    .apxute-public-page .apx265-outcomes-grid,
    .apxute-public-page .apx265-register-layout,
    .apxute-public-page .apx265-heading-split { grid-template-columns: 1fr; }
    .apxute-public-page .apx265-inner-hero { padding: 64px 0; }
    .apxute-public-page .apx265-inner-media { max-width: 680px; }
    .apxute-public-page .apx265-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .apxute-public-page .apx265-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .apxute-public-page .apx265-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .apxute-public-page .apx265-register-aside { border-radius: 8px 8px 0 0; }
    .apxute-public-page .apx265-form { border-top: 0; border-left: 1px solid var(--border-color); border-radius: 0 0 8px 8px; }
}

@media (max-width: 767px) {
    .apxute-public-page .apx265-container { width: min(100% - 28px, 1180px); }
    .apxute-public-page .apx265-inner-hero { padding: 52px 0; }
    .apxute-public-page .apx265-inner-copy h1 { font-size: 40px; }
    .apxute-public-page .apx265-inner-copy > p { font-size: 16px; }
    .apxute-public-page .apx265-section { padding: 66px 0; }
    .apxute-public-page .apx265-role-list,
    .apxute-public-page .apx265-principle-list,
    .apxute-public-page .apx265-step-list,
    .apxute-public-page .apx265-price-grid,
    .apxute-public-page .apx265-related-grid,
    .apxute-public-page .apx265-form-grid { grid-template-columns: 1fr; }
    .apxute-public-page .apx265-field-full { grid-column: auto; }
    .apxute-public-page .apx265-pricing-tools { align-items: stretch; flex-direction: column; }
    .apxute-public-page .apx265-billing-toggle { align-self: flex-start; }
    .apxute-public-page .apx265-final-cta-inner { align-items: flex-start; flex-direction: column; }
    .apxute-public-page .apx265-register-aside,
    .apxute-public-page .apx265-form { padding: 30px 22px; }
}

/* Attempt 2 fidelity pass: richer WorkDo homepage structure. */
.apxute-public-page [data-reveal] {
    opacity: 1;
    transform: none;
}

.apxute-public-page .wdo-hero-sec > .container { position: relative; }
.apxute-public-page .apx-hero-side-note {
    position: absolute;
    top: 58px;
    left: 14px;
    z-index: 4;
    width: 158px;
    color: var(--dark-color);
    font-family: var(--third-font);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.02;
    text-align: center;
    transform: rotate(-7deg);
}

.apxute-public-page .apx-hero-side-note i {
    display: block;
    margin: 4px 10px 0 auto;
    color: var(--accent-color);
    font-size: 38px;
    transform: rotate(48deg);
}

.apxute-public-page .wdo-hero-sec .hero-word-rotator {
    position: relative;
    margin-left: .08em;
    padding: 0 .12em .05em;
    color: var(--dark-color);
    isolation: isolate;
}

.apxute-public-page .wdo-hero-sec .hero-word-rotator::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: .02em;
    left: 0;
    z-index: -1;
    height: .18em;
    background: var(--accent-color);
    border-radius: 2px;
    opacity: .72;
    transform: rotate(-1deg);
}

.apxute-public-page .apx-hero-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 28px auto 0;
    color: var(--dark-color);
    font-size: 13px;
    font-weight: 700;
}

.apxute-public-page .apx-hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.apxute-public-page .apx-hero-proof i { color: var(--theme-color); font-size: 15px; }
.apxute-public-page .wdo-hero-sec .wdo-hero-bottom { align-items: stretch; }
.apxute-public-page .wdo-hero-sec .wdo-hero-promo { overflow: hidden; }
.apxute-public-page .wdo-hero-sec .wdo-hero-promo .promo-inner { min-height: 100%; padding-bottom: 0; }
.apxute-public-page .apx-promo-preview {
    overflow: hidden;
    width: calc(100% + 34px);
    height: 108px;
    margin: 24px -17px 0;
    border-top: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
}

.apxute-public-page .apx-promo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: .93;
}

.apxute-public-page .wdo-hero-sec .products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.apxute-public-page .wdo-hero-sec .products-grid .apx-featured-product {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 112px;
    padding: 13px;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.apxute-public-page .wdo-hero-sec .products-grid .apx-featured-product:nth-child(3n) { border-right: 0; }
.apxute-public-page .wdo-hero-sec .products-grid .apx-featured-product:nth-last-child(-n + 3) { border-bottom: 0; }
.apxute-public-page .apx-feature-thumb { position: relative; width: 54px; height: 58px; }
.apxute-public-page .apx-feature-thumb img { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; }
.apxute-public-page .apx-feature-thumb span {
    position: absolute;
    right: -4px;
    bottom: 0;
    padding: 2px 4px;
    color: #fff;
    background: var(--dark-color);
    border-radius: 3px;
    font-size: 8px;
    font-weight: 800;
}

.apxute-public-page .wdo-hero-sec .apx-featured-product .product-info { min-width: 0; }
.apxute-public-page .wdo-hero-sec .apx-featured-product .product-info small {
    display: block;
    margin-bottom: 3px;
    color: var(--theme-color);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.apxute-public-page .wdo-hero-sec .apx-featured-product .product-info h3 { margin: 0 0 4px; font-size: 14px; }
.apxute-public-page .wdo-hero-sec .apx-featured-product .product-info p { margin: 0; font-size: 10px; line-height: 1.35; }
.apxute-public-page .apx-feature-arrow { color: var(--theme-color); font-size: 11px; transition: transform .25s ease; }
.apxute-public-page .apx-featured-product:hover .apx-feature-arrow { transform: translateX(3px); }

.apxute-public-page .why-choose-sec .why-card { display: flex; flex-direction: column; min-height: 280px; }
.apxute-public-page .why-choose-sec .why-card header { display: flex; align-items: flex-start; justify-content: space-between; }
.apxute-public-page .why-choose-sec .why-card .apx-why-number {
    color: #D6E4EA;
    font-family: var(--third-font);
    font-size: 27px;
    font-weight: 700;
}

.apxute-public-page .why-choose-sec .why-card footer {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px dashed var(--border-color);
    color: var(--dark-color);
    font-size: 12px;
    font-weight: 750;
}

.apxute-public-page .why-choose-sec .why-card footer i { color: var(--theme-color); }
.apxute-public-page .apx-catalog-media { position: relative; width: 74px; }
.apxute-public-page .apx-catalog-media > b {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 5px;
    color: #fff;
    background: rgba(11,52,71,.9);
    border-radius: 3px;
    font-size: 8px;
}

.apxute-public-page .apx-catalog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.apxute-public-page .apx-catalog-meta b {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    color: var(--dark-color);
    background: #E8F2F6;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 750;
}

.apxute-public-page .apx-catalog-meta b:last-child { color: #895700; background: #fff7e5; }
.apxute-public-page .industries-sec .industry-inner { padding-bottom: 0; }
.apxute-public-page .industries-slider-wrapper { display: grid; gap: 16px; }
.apxute-public-page .industries-marquee { overflow: hidden; padding: 2px 0; }
.apxute-public-page .industries-track {
    width: max-content;
    display: flex;
    gap: 14px;
    animation: apxMarquee 46s linear infinite;
}

.apxute-public-page .industries-marquee.is-reverse .industries-track { animation-direction: reverse; animation-duration: 52s; }
.apxute-public-page .industries-track .industry-pill { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.apxute-public-page .industries-track .industry-pill i { color: var(--theme-color); }
.apxute-public-page .apx-industry-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 34px;
    border: 1px solid var(--border-color);
    background: #fff;
}

.apxute-public-page .apx-industry-summary article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 22px;
    border-right: 1px solid var(--border-color);
}

.apxute-public-page .apx-industry-summary article:last-child { border-right: 0; }
.apxute-public-page .apx-industry-summary article > i { color: var(--accent-color); font-size: 24px; }
.apxute-public-page .apx-industry-summary article span { display: grid; gap: 4px; }
.apxute-public-page .apx-industry-summary strong { color: var(--black); font-size: 15px; }
.apxute-public-page .apx-industry-summary small { color: var(--text-color); line-height: 1.45; }

.apxute-public-page .addon-sec { padding-top: 76px; background: #fff; }
.apxute-public-page .apx-work-streams {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 28px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
}

.apxute-public-page .apx-work-streams article { position: relative; min-height: 245px; padding: 26px; background: var(--dark-color); }
.apxute-public-page .apx-work-streams article:nth-child(even) { background: #134860; }
.apxute-public-page .apx-stream-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--dark-color);
    background: var(--accent-color);
    border-radius: 7px;
}

.apxute-public-page .apx-stream-number { position: absolute; top: 24px; right: 24px; color: rgba(255,255,255,.25); font-family: var(--third-font); font-size: 28px; }
.apxute-public-page .apx-work-streams h3 { margin: 34px 0 10px; color: #fff; font-size: 20px; }
.apxute-public-page .apx-work-streams p { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.6; }
.apxute-public-page .addon-sec .all-addon-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 124px;
    gap: 1px;
    max-inline-size: none;
    margin: 0;
    background: var(--border-color);
    border: 1px solid var(--border-color);
    mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.apxute-public-page .addon-sec .all-addon-grid .addon-grid-item {
    width: 100%;
    max-width: none;
    min-height: 124px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
}

.apxute-public-page .addon-sec .apx-addon-status { display: inline-flex; align-items: center; gap: 4px; color: #81918b; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.apxute-public-page .addon-sec .apx-addon-status i { color: var(--theme-color); }
.apxute-public-page .apx-capability-note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 12px; }
.apxute-public-page .apx-capability-note i { margin-top: 3px; color: var(--theme-color); }

.apxute-public-page .grow-sec .grow-inner { width: 100%; gap: 0; }
.apxute-public-page .grow-sec .grow-card { flex: 1 1 0; max-width: none; min-width: 0; min-height: 390px; }
.apxute-public-page .grow-sec .grow-card.is-platform { color: #fff; background: var(--dark-color); }
.apxute-public-page .grow-sec .grow-card.is-platform h3,
.apxute-public-page .grow-sec .grow-card.is-platform h4 { color: #fff; }
.apxute-public-page .grow-sec .grow-card.is-platform p { color: rgba(255,255,255,.68); }
.apxute-public-page .grow-sec .grow-card.is-platform .plan-kicker { color: var(--dark-color); background: var(--accent-color); }
.apxute-public-page .grow-sec .grow-card.is-platform .card-footer { border-color: rgba(255,255,255,.18); }
.apxute-public-page .grow-sec .grow-card.is-plan h4 { margin: 0 0 12px; color: var(--dark-color); font-size: 15px; }
.apxute-public-page .grow-sec .grow-card.is-plan h3 { margin-bottom: 7px; }

.apxute-public-page .services-sec .service-card-img { position: relative; }
.apxute-public-page .apx-service-step {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--dark-color);
    border: 3px solid #fff;
    border-radius: 50%;
    font-family: var(--third-font);
    font-size: 18px;
    font-weight: 700;
}

.apxute-public-page .apx-service-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--dark-color); font-size: 12px; font-weight: 750; }
.apxute-public-page .apx-service-meta i { color: var(--theme-color); }

.apxute-public-page .apx-contact-cta .form-header { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 14px; }
.apxute-public-page .apx-contact-cta .form-header > p { grid-column: 1 / -1; margin: 0; }
.apxute-public-page .apx-contact-cta .form-header h3 { margin: 2px 0 0; }
.apxute-public-page .apx-form-kicker { color: var(--theme-color); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.apxute-public-page .apx-setup-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.apxute-public-page .apx-setup-form-grid .form-group { display: grid; gap: 7px; margin: 0; color: var(--black); font-size: 12px; font-weight: 750; }
.apxute-public-page .apx-setup-form-grid .form-control { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #D6E4EA; border-radius: 6px; color: var(--black); background: #fff; }
.apxute-public-page .apx-setup-form-grid textarea.form-control { resize: vertical; min-height: 104px; }
.apxute-public-page .apx-setup-form-grid .form-control:focus { border-color: var(--theme-color); outline: 3px solid var(--primary-light); }
.apxute-public-page .apx-setup-full { grid-column: 1 / -1; }
.apxute-public-page .apx-form-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0; color: var(--dark-color); font-size: 12px; font-weight: 700; }
.apxute-public-page .apx-form-trust span { display: inline-flex; align-items: center; gap: 6px; }
.apxute-public-page .apx-form-trust i { color: var(--theme-color); }

/* ========================================================================== */
/* APXUTE WEB HOSTING SERVICE PAGE                                             */
/* ========================================================================== */
.apxute-public-page .apx-hosting-page {
    --hosting-navy: #0F3448;
    --hosting-navy-light: #123F55;
    --hosting-blue: #087EA4;
    --hosting-teal: #079A9A;
    --hosting-orange: #FF7A00;
    --hosting-ink: #123747;
    --hosting-muted: #607580;
    --hosting-line: #D6E4EA;
    width: 87%;
    max-width: 1520px;
    margin: 0 auto 80px;
    color: var(--hosting-muted);
}

.apxute-public-page .apx-hosting-page *,
.apxute-public-page .apx-hosting-page *::before,
.apxute-public-page .apx-hosting-page *::after { box-sizing: border-box; }
.apxute-public-page .apx-hosting-page h1,
.apxute-public-page .apx-hosting-page h2,
.apxute-public-page .apx-hosting-page h3 { color: var(--hosting-ink); letter-spacing: 0; }
.apxute-public-page .apx-hosting-page h2 { margin: 7px 0 0; font-size: 34px; line-height: 1.2; }
.apxute-public-page .apx-hosting-page h3 { font-size: 19px; line-height: 1.3; }
.apxute-public-page .apx-hosting-page p { line-height: 1.7; }
.apxute-public-page .apx-hosting-page a:focus-visible,
.apxute-public-page .apx-hosting-page summary:focus-visible { outline: 3px solid rgba(255, 122, 0, .42); outline-offset: 4px; }

.apxute-public-page .apx-hosting-kicker,
.apxute-public-page .apx-hosting-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hosting-blue);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
}

.apxute-public-page .apx-hosting-hero {
    position: relative;
    min-height: 570px;
    height: clamp(570px, calc(100vh - 210px), 650px);
    overflow: hidden;
    color: #fff;
    background: var(--hosting-navy);
}

.apxute-public-page .apx-hosting-hero-image,
.apxute-public-page .apx-hosting-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.apxute-public-page .apx-hosting-hero-image { object-fit: cover; object-position: center; }
.apxute-public-page .apx-hosting-hero-shade { background: rgba(4, 28, 40, .55); }
.apxute-public-page .apx-hosting-hero-inner {
    position: relative;
    z-index: 1;
    width: 88%;
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(310px, .65fr);
    align-items: center;
    gap: 70px;
    padding: 55px 0;
}

.apxute-public-page .apx-hosting-hero-copy { max-width: 660px; }
.apxute-public-page .apx-hosting-hero .apx-hosting-eyebrow { color: #8EE2DD; }
.apxute-public-page .apx-hosting-hero .apx-hosting-eyebrow i { color: var(--hosting-teal); font-size: 8px; }
.apxute-public-page .apx-hosting-hero h1 { max-width: 650px; margin: 18px 0 20px; color: #fff; font-size: 48px; font-weight: 800; line-height: 1.12; }
.apxute-public-page .apx-hosting-hero-copy > p:not(.apx-hosting-separate-note) { max-width: 625px; margin: 0; color: rgba(255,255,255,.78); font-size: 17px; }
.apxute-public-page .apx-hosting-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.apxute-public-page .apx-hosting-actions .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 6px; font-size: 14px; font-weight: 750; }
.apxute-public-page .apx-hosting-primary-btn { color: #fff; border-color: var(--hosting-blue); background: var(--hosting-blue); }
.apxute-public-page .apx-hosting-primary-btn:hover { color: #fff; border-color: #0A6D8E; background: #0A6D8E; }
.apxute-public-page .apx-hosting-ghost-btn { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(9, 41, 56, .45); }
.apxute-public-page .apx-hosting-ghost-btn:hover { color: var(--hosting-navy); border-color: #fff; background: #fff; }
.apxute-public-page .apx-hosting-separate-note { display: flex; align-items: flex-start; gap: 8px; margin: 22px 0 0; color: rgba(255,255,255,.66); font-size: 12px; }
.apxute-public-page .apx-hosting-separate-note i { margin-top: 4px; color: #8EE2DD; }

.apxute-public-page .apx-hosting-status-rail {
    width: 100%;
    align-self: end;
    margin-bottom: 5px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 6px;
    background: rgba(7, 36, 50, .84);
    box-shadow: 0 24px 55px rgba(0,0,0,.24);
    backdrop-filter: blur(8px);
}

.apxute-public-page .apx-hosting-status-head,
.apxute-public-page .apx-hosting-status-rail li { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.apxute-public-page .apx-hosting-status-head { padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.apxute-public-page .apx-hosting-status-head b { display: inline-flex; align-items: center; gap: 6px; color: #8EE2DD; font-size: 10px; }
.apxute-public-page .apx-hosting-status-head b i { font-size: 7px; }
.apxute-public-page .apx-hosting-status-rail ul { margin: 0; padding: 5px 18px; list-style: none; }
.apxute-public-page .apx-hosting-status-rail li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.11); font-size: 12px; }
.apxute-public-page .apx-hosting-status-rail li:last-child { border-bottom: 0; }
.apxute-public-page .apx-hosting-status-rail li span { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.74); }
.apxute-public-page .apx-hosting-status-rail li span i { width: 16px; color: #73D7D2; text-align: center; }
.apxute-public-page .apx-hosting-status-rail li strong { color: #fff; font-size: 11px; }

.apxute-public-page .apx-hosting-trust {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid var(--hosting-line);
    border-top: 0;
    background: #fff;
}

.apxute-public-page .apx-hosting-trust-item { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 21px 19px; border-right: 1px solid var(--hosting-line); }
.apxute-public-page .apx-hosting-trust-item:last-child { border-right: 0; }
.apxute-public-page .apx-hosting-trust-item > i { width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center; color: var(--hosting-blue); background: #EAF5F8; border-radius: 6px; }
.apxute-public-page .apx-hosting-trust-item span { min-width: 0; display: grid; }
.apxute-public-page .apx-hosting-trust-item strong { color: var(--hosting-ink); font-size: 12px; line-height: 1.3; }
.apxute-public-page .apx-hosting-trust-item small { margin-top: 2px; color: #7A8F99; font-size: 10px; }

.apxute-public-page .apx-hosting-section { padding: 92px 6%; }
.apxute-public-page .apx-hosting-section-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .65fr); align-items: end; gap: 55px; margin-bottom: 38px; }
.apxute-public-page .apx-hosting-section-heading > p { margin: 0; font-size: 14px; }
.apxute-public-page .apx-hosting-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--hosting-line); background: var(--hosting-line); gap: 1px; }
.apxute-public-page .apx-hosting-plan { position: relative; min-width: 0; min-height: 410px; display: flex; flex-direction: column; padding: 30px 25px 26px; background: #fff; }
.apxute-public-page .apx-hosting-plan.is-featured { background: #F2F9FA; }
.apxute-public-page .apx-hosting-plan-label { position: absolute; top: 0; right: 0; padding: 6px 9px; color: #fff; background: var(--hosting-orange); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.apxute-public-page .apx-hosting-plan-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 25px; color: var(--hosting-blue); background: #EAF5F8; border-radius: 6px; font-size: 19px; }
.apxute-public-page .apx-hosting-plan.is-featured .apx-hosting-plan-icon { color: #fff; background: var(--hosting-navy); }
.apxute-public-page .apx-hosting-plan h3 { margin: 0 0 11px; }
.apxute-public-page .apx-hosting-plan > p { min-height: 80px; margin: 0; font-size: 13px; }
.apxute-public-page .apx-hosting-plan ul { display: grid; gap: 11px; margin: 25px 0; padding: 22px 0 0; border-top: 1px solid var(--hosting-line); list-style: none; }
.apxute-public-page .apx-hosting-plan li { display: flex; align-items: flex-start; gap: 8px; color: var(--hosting-ink); font-size: 12px; line-height: 1.45; }
.apxute-public-page .apx-hosting-plan li i { margin-top: 3px; color: var(--hosting-teal); }
.apxute-public-page .apx-hosting-plan > a { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--hosting-blue); font-size: 12px; font-weight: 800; }
.apxute-public-page .apx-hosting-plan > a i { transition: transform .2s ease; }
.apxute-public-page .apx-hosting-plan > a:hover i { transform: translateX(4px); }

.apxute-public-page .apx-hosting-workflow { display: grid; grid-template-columns: minmax(290px, .75fr) minmax(0, 1.45fr); gap: 70px; padding: 72px 6%; color: #fff; background: var(--hosting-navy); }
.apxute-public-page .apx-hosting-workflow .apx-hosting-kicker { color: #73D7D2; }
.apxute-public-page .apx-hosting-workflow h2 { color: #fff; }
.apxute-public-page .apx-hosting-workflow-intro > p { margin: 18px 0 0; color: rgba(255,255,255,.65); font-size: 13px; }
.apxute-public-page .apx-hosting-workflow-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-left: 1px solid rgba(255,255,255,.17); border-top: 1px solid rgba(255,255,255,.17); }
.apxute-public-page .apx-hosting-workflow-list li { position: relative; min-height: 160px; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 15px; padding: 29px 25px; border-right: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); }
.apxute-public-page .apx-hosting-workflow-list > li > i { width: 38px; height: 38px; display: grid; place-items: center; color: #73D7D2; border: 1px solid rgba(115,215,210,.42); border-radius: 6px; }
.apxute-public-page .apx-hosting-step-number { position: absolute; top: 12px; right: 14px; color: rgba(255,255,255,.25); font-size: 10px; font-weight: 800; }
.apxute-public-page .apx-hosting-workflow-list h3 { margin: 0 0 7px; color: #fff; font-size: 15px; }
.apxute-public-page .apx-hosting-workflow-list p { margin: 0; color: rgba(255,255,255,.61); font-size: 11px; line-height: 1.55; }

.apxute-public-page .apx-hosting-capabilities { display: grid; grid-template-columns: minmax(290px, .75fr) minmax(0, 1.35fr); align-items: start; gap: 80px; background: #F6F9FA; }
.apxute-public-page .apx-hosting-feature-intro { position: sticky; top: 30px; }
.apxute-public-page .apx-hosting-feature-intro > p { margin: 18px 0; font-size: 14px; }
.apxute-public-page .apx-hosting-text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--hosting-blue); font-size: 12px; font-weight: 800; }
.apxute-public-page .apx-hosting-feature-list { border-top: 1px solid var(--hosting-line); }
.apxute-public-page .apx-hosting-feature-list article { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: start; gap: 18px; padding: 25px 0; border-bottom: 1px solid var(--hosting-line); }
.apxute-public-page .apx-hosting-feature-list article > span { width: 52px; height: 52px; display: grid; place-items: center; color: var(--hosting-blue); background: #fff; border: 1px solid var(--hosting-line); border-radius: 6px; font-size: 18px; }
.apxute-public-page .apx-hosting-feature-list h3 { margin: 2px 0 6px; font-size: 16px; }
.apxute-public-page .apx-hosting-feature-list p { margin: 0; font-size: 12px; }

.apxute-public-page .apx-hosting-portal-band { display: grid; grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr); align-items: center; gap: 65px; padding: 82px 6%; color: #fff; background: var(--hosting-navy-light); }
.apxute-public-page .apx-hosting-portal-copy .apx-hosting-kicker { color: #73D7D2; }
.apxute-public-page .apx-hosting-portal-copy h2 { color: #fff; }
.apxute-public-page .apx-hosting-portal-copy > p { margin: 18px 0 20px; color: rgba(255,255,255,.68); font-size: 13px; }
.apxute-public-page .apx-hosting-portal-copy ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.apxute-public-page .apx-hosting-portal-copy li { display: flex; gap: 8px; color: rgba(255,255,255,.82); font-size: 12px; }
.apxute-public-page .apx-hosting-portal-copy li i { margin-top: 3px; color: #73D7D2; }
.apxute-public-page .apx-hosting-portal-copy .btn { margin-top: 25px; border-radius: 6px; }

.apxute-public-page .apx-hosting-portal-preview { overflow: hidden; color: var(--hosting-muted); border: 1px solid rgba(255,255,255,.28); border-radius: 7px; background: #F6F9FA; box-shadow: 0 32px 70px rgba(0,0,0,.3); }
.apxute-public-page .apx-hosting-preview-bar { height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; color: #78909A; background: #fff; border-bottom: 1px solid var(--hosting-line); font-size: 10px; }
.apxute-public-page .apx-hosting-preview-bar > span { display: flex; gap: 4px; }
.apxute-public-page .apx-hosting-preview-bar > span i { color: #C8D5DA; font-size: 6px; }
.apxute-public-page .apx-hosting-preview-bar > span i:first-child { color: var(--hosting-orange); }
.apxute-public-page .apx-hosting-preview-bar > b { color: var(--hosting-ink); font-size: 10px; }
.apxute-public-page .apx-hosting-preview-bar > i { justify-self: end; }
.apxute-public-page .apx-hosting-preview-body { min-height: 370px; display: grid; grid-template-columns: 125px minmax(0,1fr); }
.apxute-public-page .apx-hosting-preview-body nav { display: flex; flex-direction: column; gap: 6px; padding: 24px 13px; color: #7D919A; background: #EAF1F3; border-right: 1px solid var(--hosting-line); font-size: 9px; }
.apxute-public-page .apx-hosting-preview-body nav span,
.apxute-public-page .apx-hosting-preview-body nav strong { padding: 8px 9px; border-radius: 4px; }
.apxute-public-page .apx-hosting-preview-body nav strong { color: #fff; background: var(--hosting-blue); }
.apxute-public-page .apx-hosting-preview-main { min-width: 0; padding: 25px; }
.apxute-public-page .apx-hosting-preview-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.apxute-public-page .apx-hosting-preview-title span { display: grid; }
.apxute-public-page .apx-hosting-preview-title small { color: #7B9099; font-size: 8px; text-transform: uppercase; }
.apxute-public-page .apx-hosting-preview-title b { color: var(--hosting-ink); font-size: 15px; }
.apxute-public-page .apx-hosting-preview-title > i { color: var(--hosting-teal); }
.apxute-public-page .apx-hosting-preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 22px 0; }
.apxute-public-page .apx-hosting-preview-metrics > span { min-width: 0; display: grid; gap: 4px; padding: 16px 12px; background: #fff; border: 1px solid var(--hosting-line); border-radius: 5px; }
.apxute-public-page .apx-hosting-preview-metrics i { color: var(--hosting-blue); }
.apxute-public-page .apx-hosting-preview-metrics small { color: #8598A0; font-size: 8px; }
.apxute-public-page .apx-hosting-preview-metrics b { overflow-wrap: anywhere; color: var(--hosting-ink); font-size: 9px; }
.apxute-public-page .apx-hosting-preview-service { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 15px; background: #fff; border: 1px solid var(--hosting-line); border-radius: 5px; }
.apxute-public-page .apx-hosting-preview-server { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--hosting-navy); border-radius: 5px; }
.apxute-public-page .apx-hosting-preview-service > span:nth-child(2) { min-width: 0; display: grid; }
.apxute-public-page .apx-hosting-preview-service small { color: #8598A0; font-size: 8px; }
.apxute-public-page .apx-hosting-preview-service b { color: var(--hosting-ink); font-size: 10px; }
.apxute-public-page .apx-hosting-preview-service em { margin-top: 5px; color: var(--hosting-teal); font-size: 8px; font-style: normal; }
.apxute-public-page .apx-hosting-preview-service em i { font-size: 5px; }
.apxute-public-page .apx-hosting-preview-service button { padding: 8px 10px; color: #fff; border: 0; border-radius: 4px; background: var(--hosting-blue); font-size: 8px; }

.apxute-public-page .apx-hosting-faqs { display: grid; grid-template-columns: minmax(290px, .68fr) minmax(0, 1.32fr); align-items: start; gap: 85px; }
.apxute-public-page .apx-hosting-faq-intro > p { margin: 18px 0; font-size: 13px; }
.apxute-public-page .apx-hosting-faq-intro > a { display: inline-flex; align-items: center; gap: 8px; color: var(--hosting-blue); font-size: 12px; font-weight: 800; }
.apxute-public-page .apx-hosting-faq-list { border-top: 1px solid var(--hosting-line); }
.apxute-public-page .apx-hosting-faq-list details { border-bottom: 1px solid var(--hosting-line); }
.apxute-public-page .apx-hosting-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; color: var(--hosting-ink); cursor: pointer; font-size: 14px; font-weight: 750; list-style: none; }
.apxute-public-page .apx-hosting-faq-list summary::-webkit-details-marker { display: none; }
.apxute-public-page .apx-hosting-faq-list summary i { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; color: var(--hosting-blue); border: 1px solid var(--hosting-line); border-radius: 50%; font-size: 10px; transition: transform .2s ease; }
.apxute-public-page .apx-hosting-faq-list details[open] summary i { transform: rotate(45deg); }
.apxute-public-page .apx-hosting-faq-list details p { margin: -6px 50px 20px 0; font-size: 12px; }

.apxute-public-page .apx-hosting-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 58px 6%; color: #fff; background: var(--hosting-navy); border-left: 5px solid var(--hosting-orange); }
.apxute-public-page .apx-hosting-final-cta > div:first-child { max-width: 670px; }
.apxute-public-page .apx-hosting-final-cta .apx-hosting-kicker { color: #73D7D2; }
.apxute-public-page .apx-hosting-final-cta h2 { color: #fff; }
.apxute-public-page .apx-hosting-final-cta p { margin: 12px 0 0; color: rgba(255,255,255,.65); font-size: 13px; }
.apxute-public-page .apx-hosting-final-cta .apx-hosting-actions { flex: 0 0 auto; margin: 0; }
.apxute-public-page .apx-hosting-orange-btn { color: #fff; border-color: var(--hosting-orange); background: var(--hosting-orange); }
.apxute-public-page .apx-hosting-orange-btn:hover { color: #fff; border-color: #E86F00; background: #E86F00; }