@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap";@import"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Poller+One&display=swap";@font-face {
    font-family: Inter;
    src: url(custom/fonts/inter/Inter-Thin.woff2) format("woff2");
    font-weight: 100;
    font-style: normal
}

@font-face {
    font-family: Inter;
    src: url(custom/fonts/inter/Inter-Light.woff2) format("woff2");
    font-weight: 300
}

@font-face {
    font-family: Inter;
    src: url(custom/fonts/inter/Inter-Regular.woff2) format("woff2");
    font-weight: 400
}

@font-face {
    font-family: Inter;
    src: url(custom/fonts/inter/Inter-Medium.woff2) format("woff2");
    font-weight: 500
}

@font-face {
    font-family: Inter;
    src: url(custom/fonts/inter/Inter-SemiBold.woff2) format("woff2");
    font-weight: 600
}

@font-face {
    font-family: Inter;
    src: url(custom/fonts/inter/Inter-Bold.woff2) format("woff2");
    font-weight: 700
}

@font-face {
    font-family: Inter;
    src: url(custom/fonts/inter/Inter-ExtraBold.woff2) format("woff2");
    font-weight: 800
}

@font-face {
    font-family: Inter;
    src: url(custom/fonts/inter/Inter-Black.woff2) format("woff2");
    font-weight: 900
}

@font-face {
    font-family: Inter;
    src: url(custom/fonts/inter/Inter-Italic.woff2) format("woff2");
    font-style: italic;
    font-weight: 400
}

@font-face {
    font-family: Inter;
    src: url(custom/fonts/inter/Inter-BoldItalic.woff2) format("woff2");
    font-style: italic;
    font-weight: 700
}

@font-face {
    font-family: Sora;
    src: url(custom/fonts/sora/Sora-Thin.ttf) format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Sora;
    src: url(custom/fonts/sora/Sora-ExtraLight.ttf) format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Sora;
    src: url(custom/fonts/sora/Sora-Light.ttf) format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Sora;
    src: url(custom/fonts/sora/Sora-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Sora;
    src: url(custom/fonts/sora/Sora-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Sora;
    src: url(custom/fonts/sora/Sora-SemiBold.ttf) format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Sora;
    src: url(custom/fonts/sora/Sora-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Sora;
    src: url(custom/fonts/sora/Sora-ExtraBold.ttf) format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

.bg-orange-subtle {
    background-color: var(--dx-orange-bg-subtle)!important
}

.border-orange-subtle {
    border-color: var(--dx-orange-border-subtle)!important
}

.text-orange-emphasis {
    color: var(--dx-orange-text-emphasis)!important
}

.bg-indigo-subtle {
    background-color: var(--dx-indigo-bg-subtle)!important
}

.border-indigo-subtle {
    border-color: var(--dx-indigo-border-subtle)!important
}

.text-indigo-emphasis {
    color: var(--dx-indigo-text-emphasis)!important
}

.bg-pink-subtle {
    background-color: var(--dx-pink-bg-subtle)!important
}

.border-pink-subtle {
    border-color: var(--dx-pink-border-subtle)!important
}

.text-pink-emphasis {
    color: var(--dx-pink-text-emphasis)!important
}

:root {
    --dx-font-family-base: Rubik, sans-serif;
    --dx-font-family-heading: Funnel Sans, sans-serif;
    --dx-font-weight-semibold: 600;
    --dx-custom-bg: #fff;
    --dx-custom-color: #737373;
    --dx-indigo-text-emphasis: rgb(94.05, 96.9, 228.95);
    --dx-pink-text-emphasis: rgb(208.05, 37.05, 113.05);
    --dx-orange-text-emphasis: rgb(229.9, 84.55, 17.1);
    --dx-indigo-bg-subtle: rgba(var(--dx-indigo-rgb), .15);
    --dx-pink-bg-subtle: rgba(var(--dx-pink-rgb), .15);
    --dx-orange-bg-subtle: rgba(var(--dx-orange-rgb), .15);
    --dx-indigo-border-subtle: rgba(var(--dx-indigo-rgb), .3);
    --dx-pink-border-subtle: rgba(var(--dx-pink-rgb), .3);
    --dx-orange-border-subtle: rgba(var(--dx-orange-rgb), .3);
    --dx-link-color: var(--dx-primary)
}

:root[data-colors=blue] {
    --dx-primary: #5582fb;
    --dx-primary-rgb: 85, 130, 251
}

:root[data-colors=violet] {
    --dx-primary: #8338ec;
    --dx-primary-rgb: 131, 56, 236
}

:root[data-colors=red] {
    --dx-primary: #E65F5C;
    --dx-primary-rgb: 230, 95, 92
}

:root[data-colors=teal] {
    --dx-primary: #00bba7;
    --dx-primary-rgb: 0, 187, 167
}

:root[data-colors=fuchsia] {
    --dx-primary: #e12afb;
    --dx-primary-rgb: 225, 42, 251
}

:root[data-colors=lime] {
    --dx-primary: #a7c957;
    --dx-primary-rgb: 167, 201, 87
}

:root[data-colors=orange] {
    --dx-primary: #FF9F1C;
    --dx-primary-rgb: 255, 159, 28
}

:root {
    --dx-primary-text-emphasis: color-mix(in srgb, var(--dx-primary) 75%, black 25%);
    --dx-primary-bg-subtle: color-mix(in srgb, var(--dx-primary) 10%, transparent);
    --dx-primary-border-subtle: color-mix(in srgb, var(--dx-primary) 30%, transparent);
    --dx-spacer: 1.25rem
}

:root[data-bs-theme=dark] {
    --dx-indigo-text-emphasis: rgb(94.05, 96.9, 228.95);
    --dx-pink-text-emphasis: rgb(208.05, 37.05, 113.05);
    --dx-orange-text-emphasis: rgb(229.9, 84.55, 17.1);
    --dx-indigo-bg-subtle: rgba(var(--dx-indigo-rgb), .15);
    --dx-pink-bg-subtle: rgba(var(--dx-pink-rgb), .15);
    --dx-orange-bg-subtle: rgba(var(--dx-orange-rgb), .15);
    --dx-indigo-border-subtle: rgba(var(--dx-indigo-rgb), .3);
    --dx-pink-border-subtle: rgba(var(--dx-pink-rgb), .3);
    --dx-orange-border-subtle: rgba(var(--dx-orange-rgb), .3);
    --dx-light: #161c30;
    --dx-light-rgb: 22, 28, 48;
    --dx-box-shadow: 0 10px 15px -3px rgb(15, 23, 42), 0 4px 6px -4px rgb(15, 23, 42)
}

:root[data-bs-theme=dark] .modal {
    --dx-modal-box-shadow: 0 10px 15px -3px rgb(21, 31, 53), 0 4px 6px -4px rgb(21, 31, 53);
    --dx-modal-border-color: var(--dx-border-color)
}

:root[data-bs-theme=dark] .offcanvas {
    --dx-offcanvas-box-shadow: 0 10px 15px -3px rgb(21, 31, 53), 0 4px 6px -4px rgb(21, 31, 53);
    --dx-offcanvas-border-color: var(--dx-border-color)
}

:root[data-bs-theme=dark] .dropdown-menu {
    --dx-dropdown-border-width: 1px;
    --dx-dropdown-box-shadow: 0 10px 15px -3px rgb(21, 31, 53), 0 4px 6px -4px rgb(21, 31, 53)
}

:root[data-bs-theme=black] {
    --dx-body-color: #f1f5f9;
    --dx-body-color-rgb: 241, 245, 249;
    --dx-emphasis-color: #fff;
    --dx-emphasis-color-rgb: 255, 255, 255;
    --dx-secondary-color: #94a3b8;
    --dx-secondary-color-rgb: 148, 163, 184;
    --dx-tertiary-color: #a5b1bd;
    --dx-tertiary-color-rgb: 165, 177, 189;
    --dx-primary-text-emphasis: rgb(87.4, 58.9, 140.6);
    --dx-secondary-text-emphasis: rgb(229.9, 84.55, 17.1);
    --dx-success-text-emphasis: rgb(20.9, 154.85, 70.3);
    --dx-info-text-emphasis: rgb(5.7, 172.9, 201.4);
    --dx-warning-text-emphasis: rgb(232.75, 193.8, 19);
    --dx-danger-text-emphasis: rgb(227.05, 64.6, 64.6);
    --dx-light-text-emphasis: #fafafa;
    --dx-dark-text-emphasis: #f5f5f5;
    --dx-primary-bg-subtle: rgba(var(--dx-primary-rgb), .15);
    --dx-secondary-bg-subtle: rgba(var(--dx-secondary-rgb), .15);
    --dx-success-bg-subtle: rgba(var(--dx-success-rgb), .15);
    --dx-info-bg-subtle: rgba(var(--dx-info-rgb), .15);
    --dx-warning-bg-subtle: rgba(var(--dx-warning-rgb), .15);
    --dx-danger-bg-subtle: rgba(var(--dx-danger-rgb), .15);
    --dx-light-bg-subtle: #262626;
    --dx-dark-bg-subtle: #131313;
    --dx-primary-border-subtle: rgba(var(--dx-primary-rgb), .3);
    --dx-secondary-border-subtle: rgba(var(--dx-secondary-rgb), .3);
    --dx-success-border-subtle: rgba(var(--dx-success-rgb), .3);
    --dx-info-border-subtle: rgba(var(--dx-info-rgb), .3);
    --dx-warning-border-subtle: rgba(var(--dx-warning-rgb), .3);
    --dx-danger-border-subtle: rgba(var(--dx-danger-rgb), .3);
    --dx-light-border-subtle: #171717;
    --dx-dark-border-subtle: #262626;
    --dx-heading-color: #d9e0e3;
    --dx-link-color: rgb(157.2, 139.2, 190.8);
    --dx-link-hover-color: rgb(166.98, 150.78, 197.22);
    --dx-link-color-rgb: 157, 139, 191;
    --dx-link-hover-color-rgb: 167, 151, 197;
    --dx-code-color: rgb(233.4, 125.4, 173.4);
    --dx-highlight-color: #f1f5f9;
    --dx-highlight-bg: rgb(102, 77.2, 2.8);
    --dx-border-color: #262f36;
    --dx-border-color-translucent: #262f36;
    --dx-form-valid-color: rgb(117, 183, 152.4);
    --dx-form-valid-border-color: rgb(117, 183, 152.4);
    --dx-form-invalid-color: rgb(234, 133.8, 143.4);
    --dx-form-invalid-border-color: rgb(234, 133.8, 143.4);
    --dx-box-shadow: none
}

.font-base {
    font-family: var(--dx-font-sans-serif)
}

.bg-body-custom {
    background-color: var(--dx-custom-bg)
}

.text-body-custom {
    color: var(--dx-custom-text)
}

.cursor-pointer {
    cursor: pointer
}

.logos .logo-light {
    display: none
}

.logos .logo-dark,[data-bs-theme=dark] .logos .logo-light {
    display: inline-block
}

[data-bs-theme=dark] .logos .logo-dark {
    display: none
}

.custom-container {
    max-width: 1350px
}

.opacity-10 {
    opacity: .1
}

.profile-active {
    position: relative;
    display: inline-block
}

.profile-active .dot {
    position: absolute;
    border: 2px solid var(--dx-secondary-bg);
    border-radius: 50rem;
    right: 5px;
    bottom: 5px
}

.modal-backdrop,.offcanvas-backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.jvm-tooltip {
    display: none
}

:is(.text-truncate-2,.text-truncate-3) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.text-truncate-2 {
    line-clamp: 2
}

.text-truncate-3 {
    line-clamp: 3
}

.text-white-10 {
    color: #ffffff1a!important
}

.text-white-20 {
    color: #fff3!important
}

.text-white-30 {
    color: #ffffff4d!important
}

.text-white-40 {
    color: #fff6!important
}

.text-white-50 {
    color: #ffffff80!important
}

.text-white-60 {
    color: #fff9!important
}

.text-white-70 {
    color: #ffffffb3!important
}

.text-white-80 {
    color: #fffc!important
}

.text-white-90 {
    color: #ffffffe6!important
}

.spacer {
    padding: 130px 0
}

@media(max-width: 767px) {
    .spacer {
        padding:50px 0
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .spacer {
        padding:100px 0
    }
}

.font-Playfair {
    font-family: Playfair Display,serif
}

.text-muted {
    color: gray!important
}

.bg-black {
    background-color: #000!important
}

.marquee-scroll-up {
    will-change: transform;
    animation: marquee-scroll-up 20s linear infinite
}

.marquee-scroll-down {
    will-change: transform;
    animation: marquee-scroll-up 25s linear infinite reverse
}

.marquee-scroll-left {
    will-change: transform;
    animation: marquee-scroll-left 20s linear infinite
}

.marquee-scroll-right {
    will-change: transform;
    animation: marquee-scroll-left 25s linear infinite reverse
}

.sparkle {
    position: fixed;
    width: 8px;
    height: 8px;
    pointer-events: none;
    z-index: 99999;
    clip-path: polygon(50% 0%,60% 35%,100% 50%,60% 65%,50% 100%,40% 65%,0% 50%,40% 35%);
    animation: sparkleMove .9s ease-out forwards
}

@keyframes sparkleMove {
    to {
        transform: translate(var(--x),var(--y)) scale(0) rotate(180deg);
        opacity: 0
    }
}

.direction-hover-card {
    perspective: 500px;
    overflow: hidden;
    position: relative;
    will-change: transform;
    transform: translateZ(0)
}

.direction-hover-card:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    background-color: #000;
    transform: rotateX(90deg);
    z-index: 0;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform,opacity
}

.direction-hover-card>* {
    position: relative;
    z-index: 2;
    transition: color .3s ease
}

.direction-hover-card.in-top:before {
    transform-origin: 50% 0%;
    animation: in-top .35s cubic-bezier(.25,.8,.25,1) forwards
}

.direction-hover-card.in-right:before {
    transform-origin: 100% 0%;
    animation: in-right .3s ease 0ms 1 forwards
}

.direction-hover-card.in-bottom:before {
    transform-origin: 50% 100%;
    animation: in-bottom .3s ease 0ms 1 forwards
}

.direction-hover-card.in-left:before {
    transform-origin: 0% 0%;
    animation: in-left .3s ease 0ms 1 forwards
}

.direction-hover-card.out-top:before {
    transform-origin: 50% 0%;
    animation: out-top .3s ease 0ms 1 forwards
}

.direction-hover-card.out-right:before {
    transform-origin: 100% 50%;
    animation: out-right .3s ease 0ms 1 forwards
}

.direction-hover-card.out-bottom:before {
    transform-origin: 50% 100%;
    animation: out-bottom .3s ease 0ms 1 forwards
}

.direction-hover-card.out-left:before {
    transform-origin: 0% 0%;
    animation: out-left .3s ease 0ms 1 forwards
}

@media(min-width: 1200px) {
    .direction-hover-card .digital-about-stats .digital-about-stats-circle:not(:first-child) {
        margin-left:-45px
    }
}

@keyframes in-top {
    0% {
        transform: rotate3d(-1,0,0,90deg);
        opacity: 0
    }

    to {
        transform: rotate3d(0,0,0,0);
        opacity: 1
    }
}

@keyframes in-right {
    0% {
        transform: rotate3d(0,-1,0,90deg);
        opacity: 0
    }

    to {
        transform: rotate3d(0,0,0,0);
        opacity: 1
    }
}

@keyframes in-bottom {
    0% {
        transform: rotateX(90deg);
        opacity: 0
    }

    to {
        transform: rotate3d(0,0,0,0);
        opacity: 1
    }
}

@keyframes in-left {
    0% {
        transform: rotateY(90deg);
        opacity: 0
    }

    to {
        transform: rotate3d(0,0,0,0);
        opacity: 1
    }
}

@keyframes out-top {
    0% {
        transform: rotate3d(0,0,0,0);
        opacity: 1
    }

    99% {
        transform: rotate3d(-1,0,0,90deg);
        opacity: 1
    }

    to {
        transform: rotate3d(-1,0,0,90deg);
        opacity: 0
    }
}

@keyframes out-right {
    0% {
        transform: rotate3d(0,0,0,0);
        opacity: 1
    }

    99% {
        transform: rotate3d(0,-1,0,90deg);
        opacity: 1
    }

    to {
        transform: rotate3d(0,-1,0,90deg);
        opacity: 0
    }
}

@keyframes out-bottom {
    0% {
        transform: rotate3d(0,0,0,0);
        opacity: 1
    }

    99% {
        transform: rotateX(90deg);
        opacity: 1
    }

    to {
        transform: rotateX(90deg);
        opacity: 0
    }
}

@keyframes out-left {
    0% {
        transform: rotate3d(0,0,0,0);
        opacity: 1
    }

    99% {
        transform: rotateY(90deg);
        opacity: 1
    }

    to {
        transform: rotateY(90deg);
        opacity: 0
    }
}

.invert {
    filter: invert(1)
}

.accordion-primary,.accordion-primary.accordion-boxed {
    --dx-accordion-active-color: var(--dx-primary);
    --dx-accordion-active-bg: var(--dx-primary-bg-subtle)
}

.accordion-primary.accordion-boxed [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-primary-border-subtle)
}

.accordion-solid-primary {
    --dx-accordion-active-bg: var(--dx-primary);
    --dx-accordion-active-color: #fff
}

.accordion-solid-primary [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-primary)
}

.accordion-secondary,.accordion-secondary.accordion-boxed {
    --dx-accordion-active-color: var(--dx-secondary);
    --dx-accordion-active-bg: var(--dx-secondary-bg-subtle)
}

.accordion-secondary.accordion-boxed [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-secondary-border-subtle)
}

.accordion-solid-secondary {
    --dx-accordion-active-bg: var(--dx-secondary);
    --dx-accordion-active-color: #fff
}

.accordion-solid-secondary [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-secondary)
}

.accordion-success,.accordion-success.accordion-boxed {
    --dx-accordion-active-color: var(--dx-success);
    --dx-accordion-active-bg: var(--dx-success-bg-subtle)
}

.accordion-success.accordion-boxed [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-success-border-subtle)
}

.accordion-solid-success {
    --dx-accordion-active-bg: var(--dx-success);
    --dx-accordion-active-color: #fff
}

.accordion-solid-success [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-success)
}

.accordion-info,.accordion-info.accordion-boxed {
    --dx-accordion-active-color: var(--dx-info);
    --dx-accordion-active-bg: var(--dx-info-bg-subtle)
}

.accordion-info.accordion-boxed [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-info-border-subtle)
}

.accordion-solid-info {
    --dx-accordion-active-bg: var(--dx-info);
    --dx-accordion-active-color: #fff
}

.accordion-solid-info [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-info)
}

.accordion-warning,.accordion-warning.accordion-boxed {
    --dx-accordion-active-color: var(--dx-warning);
    --dx-accordion-active-bg: var(--dx-warning-bg-subtle)
}

.accordion-warning.accordion-boxed [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-warning-border-subtle)
}

.accordion-solid-warning {
    --dx-accordion-active-bg: var(--dx-warning);
    --dx-accordion-active-color: #000
}

.accordion-solid-warning [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-warning)
}

.accordion-danger,.accordion-danger.accordion-boxed {
    --dx-accordion-active-color: var(--dx-danger);
    --dx-accordion-active-bg: var(--dx-danger-bg-subtle)
}

.accordion-danger.accordion-boxed [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-danger-border-subtle)
}

.accordion-solid-danger {
    --dx-accordion-active-bg: var(--dx-danger);
    --dx-accordion-active-color: #fff
}

.accordion-solid-danger [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-danger)
}

.accordion-light,.accordion-light.accordion-boxed {
    --dx-accordion-active-color: var(--dx-secondary-color);
    --dx-accordion-active-bg: var(--dx-light)
}

.accordion-light.accordion-boxed [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-border-color)
}

.accordion-solid-light {
    --dx-accordion-active-bg: var(--dx-light);
    --dx-accordion-active-color: #000
}

.accordion-solid-light [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-light)
}

.accordion-dark,.accordion-dark.accordion-boxed {
    --dx-accordion-active-color: var(--dx-dark);
    --dx-accordion-active-bg: var(--dx-dark-bg-subtle)
}

.accordion-dark.accordion-boxed [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-dark-border-subtle)
}

.accordion-solid-dark {
    --dx-accordion-active-bg: var(--dx-dark);
    --dx-accordion-active-color: #fff
}

.accordion-solid-dark [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-dark)
}

.accordion-pink,.accordion-pink.accordion-boxed {
    --dx-accordion-active-color: var(--dx-pink);
    --dx-accordion-active-bg: var(--dx-pink-bg-subtle)
}

.accordion-pink.accordion-boxed [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-pink-border-subtle)
}

.accordion-solid-pink {
    --dx-accordion-active-bg: var(--dx-pink);
    --dx-accordion-active-color: #fff
}

.accordion-solid-pink [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-pink)
}

.accordion-orange,.accordion-orange.accordion-boxed {
    --dx-accordion-active-color: var(--dx-orange);
    --dx-accordion-active-bg: var(--dx-orange-bg-subtle)
}

.accordion-orange.accordion-boxed [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-orange-border-subtle)
}

.accordion-solid-orange {
    --dx-accordion-active-bg: var(--dx-orange);
    --dx-accordion-active-color: #fff
}

.accordion-solid-orange [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-orange)
}

.accordion-indigo,.accordion-indigo.accordion-boxed {
    --dx-accordion-active-color: var(--dx-indigo);
    --dx-accordion-active-bg: var(--dx-indigo-bg-subtle)
}

.accordion-indigo.accordion-boxed [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-indigo-border-subtle)
}

.accordion-solid-indigo {
    --dx-accordion-active-bg: var(--dx-indigo);
    --dx-accordion-active-color: #fff
}

.accordion-solid-indigo [aria-expanded=true] {
    --dx-accordion-border-color: var(--dx-indigo)
}

.btn-primary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-primary);
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-primary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-primary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-primary-text-emphasis)
}

[data-theme=material] .btn-primary {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-primary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-primary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-primary-text-emphasis)
}

.btn-outline-primary .btn-primary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-primary);
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-primary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-primary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-primary-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-primary-border-subtle)
}

[data-theme=material] .btn-outline-primary {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: var(--dx-primary-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-primary);
    --dx-btn-hover-bg: var(--dx-primary-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-primary);
    --dx-btn-active-bg: var(--dx-primary-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-primary);
    --dx-btn-disabled-bg: var(--dx-primary-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-primary);
    --dx-btn-hover-bg: var(--dx-primary-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-primary);
    --dx-btn-active-color: var(--dx-primary);
    --dx-btn-active-bg: var(--dx-primary-bg-subtle);
    --dx-btn-active-border-color: var(--dx-primary);
    --dx-btn-disabled-color: var(--dx-primary);
    --dx-btn-disabled-bg: var(--dx-primary-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-primary)
}

.btn-active-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-primary);
    --dx-btn-hover-bg: var(--dx-primary-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-primary);
    --dx-btn-active-bg: var(--dx-primary-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-primary);
    --dx-btn-disabled-bg: var(--dx-primary-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-primary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-primary);
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-primary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-primary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-shadow-color: var(--dx-primary-text-emphasis)
}

.navigation-primary a:is(:hover,.active) {
    color: var(--dx-primary)
}

.navigation-primary.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-primary)
}

.navigation-primary.navigation-border-animation a:before {
    background-color: var(--dx-primary)
}

.btn-secondary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-secondary);
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-secondary-text-emphasis)
}

[data-theme=material] .btn-secondary {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-secondary-text-emphasis)
}

.btn-outline-secondary .btn-secondary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-secondary);
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-secondary-border-subtle)
}

[data-theme=material] .btn-outline-secondary {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-secondary);
    --dx-btn-hover-bg: var(--dx-secondary-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-secondary);
    --dx-btn-active-bg: var(--dx-secondary-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-secondary);
    --dx-btn-disabled-bg: var(--dx-secondary-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-secondary);
    --dx-btn-hover-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-secondary);
    --dx-btn-active-color: var(--dx-secondary);
    --dx-btn-active-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-active-border-color: var(--dx-secondary);
    --dx-btn-disabled-color: var(--dx-secondary);
    --dx-btn-disabled-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-secondary)
}

.btn-active-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-secondary);
    --dx-btn-hover-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-secondary);
    --dx-btn-active-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-secondary);
    --dx-btn-disabled-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-secondary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-secondary);
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-shadow-color: var(--dx-secondary-text-emphasis)
}

.navigation-secondary a:is(:hover,.active) {
    color: var(--dx-secondary)
}

.navigation-secondary.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-secondary)
}

.navigation-secondary.navigation-border-animation a:before {
    background-color: var(--dx-secondary)
}

.btn-success {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-success);
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-success-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-success-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-success-text-emphasis);
    --dx-btn-active-border-color: var(--dx-success-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-success-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-success-text-emphasis)
}

[data-theme=material] .btn-success {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-success-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-success-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-success-text-emphasis);
    --dx-btn-active-border-color: var(--dx-success-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-success-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-success-text-emphasis)
}

.btn-outline-success .btn-success {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-success);
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-success-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-success-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-success-text-emphasis);
    --dx-btn-active-border-color: var(--dx-success-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-success-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-success-border-subtle)
}

[data-theme=material] .btn-outline-success {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: var(--dx-success-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-success);
    --dx-btn-hover-bg: var(--dx-success-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-success);
    --dx-btn-active-bg: var(--dx-success-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-success);
    --dx-btn-disabled-bg: var(--dx-success-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-success);
    --dx-btn-hover-bg: var(--dx-success-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-success);
    --dx-btn-active-color: var(--dx-success);
    --dx-btn-active-bg: var(--dx-success-bg-subtle);
    --dx-btn-active-border-color: var(--dx-success);
    --dx-btn-disabled-color: var(--dx-success);
    --dx-btn-disabled-bg: var(--dx-success-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-success)
}

.btn-active-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-success);
    --dx-btn-hover-bg: var(--dx-success-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-success);
    --dx-btn-active-bg: var(--dx-success-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-success);
    --dx-btn-disabled-bg: var(--dx-success-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-success {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-success);
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-success-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-success-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-success-text-emphasis);
    --dx-btn-active-border-color: var(--dx-success-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-success-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-success-text-emphasis);
    --dx-btn-shadow-color: var(--dx-success-text-emphasis)
}

.navigation-success a:is(:hover,.active) {
    color: var(--dx-success)
}

.navigation-success.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-success)
}

.navigation-success.navigation-border-animation a:before {
    background-color: var(--dx-success)
}

.btn-info {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-info);
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-info-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-info-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-info-text-emphasis);
    --dx-btn-active-border-color: var(--dx-info-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-info-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-info-text-emphasis)
}

[data-theme=material] .btn-info {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-info-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-info-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-info-text-emphasis);
    --dx-btn-active-border-color: var(--dx-info-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-info-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-info-text-emphasis)
}

.btn-outline-info .btn-info {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-info);
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-info-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-info-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-info-text-emphasis);
    --dx-btn-active-border-color: var(--dx-info-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-info-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-info-border-subtle)
}

[data-theme=material] .btn-outline-info {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: var(--dx-info-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-info);
    --dx-btn-hover-bg: var(--dx-info-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-info);
    --dx-btn-active-bg: var(--dx-info-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-info);
    --dx-btn-disabled-bg: var(--dx-info-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-info);
    --dx-btn-hover-bg: var(--dx-info-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-info);
    --dx-btn-active-color: var(--dx-info);
    --dx-btn-active-bg: var(--dx-info-bg-subtle);
    --dx-btn-active-border-color: var(--dx-info);
    --dx-btn-disabled-color: var(--dx-info);
    --dx-btn-disabled-bg: var(--dx-info-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-info)
}

.btn-active-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-info);
    --dx-btn-hover-bg: var(--dx-info-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-info);
    --dx-btn-active-bg: var(--dx-info-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-info);
    --dx-btn-disabled-bg: var(--dx-info-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-info {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-info);
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-info-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-info-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-info-text-emphasis);
    --dx-btn-active-border-color: var(--dx-info-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-info-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-info-text-emphasis);
    --dx-btn-shadow-color: var(--dx-info-text-emphasis)
}

.navigation-info a:is(:hover,.active) {
    color: var(--dx-info)
}

.navigation-info.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-info)
}

.navigation-info.navigation-border-animation a:before {
    background-color: var(--dx-info)
}

.btn-warning {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-warning);
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-warning-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-warning-text-emphasis);
    --dx-btn-active-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-warning-text-emphasis)
}

[data-theme=material] .btn-warning {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-warning-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-warning-text-emphasis);
    --dx-btn-active-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-warning-text-emphasis)
}

.btn-outline-warning .btn-warning {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-warning);
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-warning-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-warning-text-emphasis);
    --dx-btn-active-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-warning-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-warning-border-subtle)
}

[data-theme=material] .btn-outline-warning {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: var(--dx-warning-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-warning);
    --dx-btn-hover-bg: var(--dx-warning-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-warning);
    --dx-btn-active-bg: var(--dx-warning-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-warning);
    --dx-btn-disabled-bg: var(--dx-warning-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-warning);
    --dx-btn-hover-bg: var(--dx-warning-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-warning);
    --dx-btn-active-color: var(--dx-warning);
    --dx-btn-active-bg: var(--dx-warning-bg-subtle);
    --dx-btn-active-border-color: var(--dx-warning);
    --dx-btn-disabled-color: var(--dx-warning);
    --dx-btn-disabled-bg: var(--dx-warning-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-warning)
}

.btn-active-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-warning);
    --dx-btn-hover-bg: var(--dx-warning-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-warning);
    --dx-btn-active-bg: var(--dx-warning-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-warning);
    --dx-btn-disabled-bg: var(--dx-warning-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-warning {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-warning);
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-warning-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-warning-text-emphasis);
    --dx-btn-active-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-shadow-color: var(--dx-warning-text-emphasis)
}

.navigation-warning a:is(:hover,.active) {
    color: var(--dx-warning)
}

.navigation-warning.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-warning)
}

.navigation-warning.navigation-border-animation a:before {
    background-color: var(--dx-warning)
}

.btn-danger {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-danger);
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-danger-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-danger-text-emphasis);
    --dx-btn-active-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-danger-text-emphasis)
}

[data-theme=material] .btn-danger {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-danger-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-danger-text-emphasis);
    --dx-btn-active-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-danger-text-emphasis)
}

.btn-outline-danger .btn-danger {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-danger);
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-danger-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-danger-text-emphasis);
    --dx-btn-active-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-danger-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-danger-border-subtle)
}

[data-theme=material] .btn-outline-danger {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: var(--dx-danger-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-danger);
    --dx-btn-hover-bg: var(--dx-danger-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-danger);
    --dx-btn-active-bg: var(--dx-danger-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-danger);
    --dx-btn-disabled-bg: var(--dx-danger-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-danger);
    --dx-btn-hover-bg: var(--dx-danger-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-danger);
    --dx-btn-active-color: var(--dx-danger);
    --dx-btn-active-bg: var(--dx-danger-bg-subtle);
    --dx-btn-active-border-color: var(--dx-danger);
    --dx-btn-disabled-color: var(--dx-danger);
    --dx-btn-disabled-bg: var(--dx-danger-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-danger)
}

.btn-active-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-danger);
    --dx-btn-hover-bg: var(--dx-danger-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-danger);
    --dx-btn-active-bg: var(--dx-danger-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-danger);
    --dx-btn-disabled-bg: var(--dx-danger-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-danger {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-danger);
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-danger-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-danger-text-emphasis);
    --dx-btn-active-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-shadow-color: var(--dx-danger-text-emphasis)
}

.navigation-danger a:is(:hover,.active) {
    color: var(--dx-danger)
}

.navigation-danger.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-danger)
}

.navigation-danger.navigation-border-animation a:before {
    background-color: var(--dx-danger)
}

.btn-light {
    --dx-btn-color: var(--dx-secondary-color);
    --dx-btn-bg: var(--dx-light);
    --dx-btn-border-color: var(--dx-light);
    --dx-btn-hover-color: var(--dx-body-color);
    --dx-btn-hover-bg: var(--dx-tertiary-bg);
    --dx-btn-hover-border-color: var(--dx-tertiary-bg);
    --dx-btn-active-color: var(--dx-body-color);
    --dx-btn-active-bg: var(--dx-tertiary-bg);
    --dx-btn-active-border-color: var(--dx-tertiary-bg);
    --dx-btn-disabled-color: var(--dx-secondary-color);
    --dx-btn-disabled-bg: var(--dx-light);
    --dx-btn-disabled-border-color: var(--dx-light)
}

[data-theme=material] .btn-light {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-light {
    --dx-btn-color: var(--dx-secondary-color);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-light);
    --dx-btn-hover-color: var(--dx-body-color);
    --dx-btn-hover-bg: var(--dx-tertiary-bg);
    --dx-btn-hover-border-color: var(--dx-tertiary-bg);
    --dx-btn-active-color: var(--dx-body-color);
    --dx-btn-active-bg: var(--dx-tertiary-bg);
    --dx-btn-active-border-color: var(--dx-tertiary-bg);
    --dx-btn-disabled-color: var(--dx-secondary-color);
    --dx-btn-disabled-bg: var(--dx-light);
    --dx-btn-disabled-border-color: var(--dx-light)
}

.btn-outline-light .btn-light {
    --dx-btn-color: var(--dx-secondary-color);
    --dx-btn-bg: var(--dx-light);
    --dx-btn-border-color: var(--dx-light);
    --dx-btn-hover-color: var(--dx-body-color);
    --dx-btn-hover-bg: var(--dx-tertiary-bg);
    --dx-btn-hover-border-color: var(--dx-tertiary-bg);
    --dx-btn-active-color: var(--dx-body-color);
    --dx-btn-active-bg: var(--dx-tertiary-bg);
    --dx-btn-active-border-color: var(--dx-tertiary-bg);
    --dx-btn-disabled-color: var(--dx-secondary-color);
    --dx-btn-disabled-bg: var(--dx-light);
    --dx-btn-disabled-border-color: var(--dx-light)
}

[data-theme=material] .btn-outline-light {
    box-shadow: var(--dx-box-shadow)
}

.navigation-light a:is(:hover,.active) {
    color: var(--dx-light)
}

.navigation-light.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-light)
}

.navigation-light.navigation-border-animation a:before {
    background-color: var(--dx-light)
}

.btn-dark {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-dark);
    --dx-btn-border-color: var(--dx-dark);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-dark-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-dark-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-dark-text-emphasis);
    --dx-btn-active-border-color: var(--dx-dark-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-dark-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-dark-text-emphasis)
}

[data-theme=material] .btn-dark {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-dark {
    --dx-btn-color: var(--dx-dark);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-dark);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-dark);
    --dx-btn-hover-border-color: var(--dx-dark);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-dark);
    --dx-btn-active-border-color: var(--dx-dark);
    --dx-btn-disabled-color: var(--dx-secondary-color);
    --dx-btn-disabled-bg: var(--dx-dark);
    --dx-btn-disabled-border-color: var(--dx-dark)
}

.btn-outline-dark .btn-dark {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-dark);
    --dx-btn-border-color: var(--dx-dark);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-dark-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-dark-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-dark-text-emphasis);
    --dx-btn-active-border-color: var(--dx-dark-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-dark-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-dark-border-subtle)
}

[data-theme=material] .btn-outline-dark {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-dark {
    --dx-btn-color: var(--dx-dark);
    --dx-btn-bg: var(--dx-light);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-dark);
    --dx-btn-hover-bg: var(--dx-dark-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-dark);
    --dx-btn-active-bg: var(--dx-dark-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-dark);
    --dx-btn-disabled-bg: var(--dx-dark-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-dark {
    --dx-btn-color: var(--dx-dark);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-border-color);
    --dx-btn-hover-color: var(--dx-dark);
    --dx-btn-hover-bg: var(--dx-tertiary-bg);
    --dx-btn-hover-border-color: var(--dx-border-color);
    --dx-btn-active-color: var(--dx-dark);
    --dx-btn-active-bg: var(--dx-tertiary-bg);
    --dx-btn-active-border-color: var(--dx-border-color);
    --dx-btn-disabled-color: var(--dx-dark);
    --dx-btn-disabled-bg: var(--dx-tertiary-bg);
    --dx-btn-disabled-border-color: var(--dx-border-color)
}

.btn-active-dark {
    --dx-btn-color: var(--dx-dark);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-dark);
    --dx-btn-hover-bg: var(--dx-tertiary-bg);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-dark);
    --dx-btn-active-bg: var(--dx-tertiary-bg);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-dark);
    --dx-btn-disabled-bg: var(--dx-tertiary-bg);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-dark {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-dark);
    --dx-btn-border-color: var(--dx-dark);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-dark);
    --dx-btn-hover-border-color: var(--dx-dark);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-dark);
    --dx-btn-active-border-color: var(--dx-dark);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-dark);
    --dx-btn-disabled-border-color: var(--dx-dark)
}

.navigation-dark a:is(:hover,.active) {
    color: var(--dx-dark)
}

.navigation-dark.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-dark)
}

.navigation-dark.navigation-border-animation a:before {
    background-color: var(--dx-dark)
}

.btn-pink {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-pink);
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-pink-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-pink-text-emphasis);
    --dx-btn-active-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-pink-text-emphasis)
}

[data-theme=material] .btn-pink {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-pink-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-pink-text-emphasis);
    --dx-btn-active-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-pink-text-emphasis)
}

.btn-outline-pink .btn-pink {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-pink);
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-pink-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-pink-text-emphasis);
    --dx-btn-active-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-pink-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-pink-border-subtle)
}

[data-theme=material] .btn-outline-pink {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: var(--dx-pink-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-pink);
    --dx-btn-hover-bg: var(--dx-pink-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-pink);
    --dx-btn-active-bg: var(--dx-pink-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-pink);
    --dx-btn-disabled-bg: var(--dx-pink-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-pink);
    --dx-btn-hover-bg: var(--dx-pink-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-pink);
    --dx-btn-active-color: var(--dx-pink);
    --dx-btn-active-bg: var(--dx-pink-bg-subtle);
    --dx-btn-active-border-color: var(--dx-pink);
    --dx-btn-disabled-color: var(--dx-pink);
    --dx-btn-disabled-bg: var(--dx-pink-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-pink)
}

.btn-active-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-pink);
    --dx-btn-hover-bg: var(--dx-pink-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-pink);
    --dx-btn-active-bg: var(--dx-pink-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-pink);
    --dx-btn-disabled-bg: var(--dx-pink-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-pink {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-pink);
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-pink-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-pink-text-emphasis);
    --dx-btn-active-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-shadow-color: var(--dx-pink-text-emphasis)
}

.navigation-pink a:is(:hover,.active) {
    color: var(--dx-pink)
}

.navigation-pink.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-pink)
}

.navigation-pink.navigation-border-animation a:before {
    background-color: var(--dx-pink)
}

.btn-orange {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-orange);
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-orange-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-orange-text-emphasis);
    --dx-btn-active-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-orange-text-emphasis)
}

[data-theme=material] .btn-orange {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-orange-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-orange-text-emphasis);
    --dx-btn-active-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-orange-text-emphasis)
}

.btn-outline-orange .btn-orange {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-orange);
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-orange-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-orange-text-emphasis);
    --dx-btn-active-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-orange-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-orange-border-subtle)
}

[data-theme=material] .btn-outline-orange {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: var(--dx-orange-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-orange);
    --dx-btn-hover-bg: var(--dx-orange-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-orange);
    --dx-btn-active-bg: var(--dx-orange-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-orange);
    --dx-btn-disabled-bg: var(--dx-orange-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-orange);
    --dx-btn-hover-bg: var(--dx-orange-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-orange);
    --dx-btn-active-color: var(--dx-orange);
    --dx-btn-active-bg: var(--dx-orange-bg-subtle);
    --dx-btn-active-border-color: var(--dx-orange);
    --dx-btn-disabled-color: var(--dx-orange);
    --dx-btn-disabled-bg: var(--dx-orange-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-orange)
}

.btn-active-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-orange);
    --dx-btn-hover-bg: var(--dx-orange-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-orange);
    --dx-btn-active-bg: var(--dx-orange-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-orange);
    --dx-btn-disabled-bg: var(--dx-orange-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-orange {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-orange);
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-orange-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-orange-text-emphasis);
    --dx-btn-active-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-shadow-color: var(--dx-orange-text-emphasis)
}

.navigation-orange a:is(:hover,.active) {
    color: var(--dx-orange)
}

.navigation-orange.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-orange)
}

.navigation-orange.navigation-border-animation a:before {
    background-color: var(--dx-orange)
}

.btn-indigo {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-indigo);
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-active-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-indigo-text-emphasis)
}

[data-theme=material] .btn-indigo {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-active-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-indigo-text-emphasis)
}

.btn-outline-indigo .btn-indigo {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-indigo);
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-active-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-indigo-border-subtle)
}

[data-theme=material] .btn-outline-indigo {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-indigo);
    --dx-btn-hover-bg: var(--dx-indigo-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-indigo);
    --dx-btn-active-bg: var(--dx-indigo-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-indigo);
    --dx-btn-disabled-bg: var(--dx-indigo-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-indigo);
    --dx-btn-hover-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-indigo);
    --dx-btn-active-color: var(--dx-indigo);
    --dx-btn-active-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-active-border-color: var(--dx-indigo);
    --dx-btn-disabled-color: var(--dx-indigo);
    --dx-btn-disabled-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-indigo)
}

.btn-active-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-indigo);
    --dx-btn-hover-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-indigo);
    --dx-btn-active-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-indigo);
    --dx-btn-disabled-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-indigo {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-indigo);
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-active-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-shadow-color: var(--dx-indigo-text-emphasis)
}

.navigation-indigo a:is(:hover,.active) {
    color: var(--dx-indigo)
}

.navigation-indigo.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-indigo)
}

.navigation-indigo.navigation-border-animation a:before {
    background-color: var(--dx-indigo)
}

.alert-outline-primary {
    --dx-alert-color: var(--dx-primary);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-primary);
    --dx-alert-link-color: var(--dx-primary)
}

.alert-sub-primary {
    --dx-alert-color: var(--dx-primary-text-emphasis);
    --dx-alert-bg: var(--dx-primary-bg-subtle);
    --dx-alert-link-color: var(--dx-primary)
}

.alert-solid-primary {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-primary);
    --dx-alert-border-color: var(--dx-primary);
    --dx-alert-link-color: var(--dx-primary-bg-subtle)
}

.icon-alert-primary {
    border-top: 4px solid var(--dx-primary)!important
}

.icon-alert-primary .icon {
    border: 1px solid var(--dx-primary-bg-subtle)
}

.alert-outline-secondary {
    --dx-alert-color: var(--dx-secondary);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-secondary);
    --dx-alert-link-color: var(--dx-secondary)
}

.alert-sub-secondary {
    --dx-alert-color: var(--dx-secondary-text-emphasis);
    --dx-alert-bg: var(--dx-secondary-bg-subtle);
    --dx-alert-link-color: var(--dx-secondary)
}

.alert-solid-secondary {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-secondary);
    --dx-alert-border-color: var(--dx-secondary);
    --dx-alert-link-color: var(--dx-secondary-bg-subtle)
}

.icon-alert-secondary {
    border-top: 4px solid var(--dx-secondary)!important
}

.icon-alert-secondary .icon {
    border: 1px solid var(--dx-secondary-bg-subtle)
}

.alert-outline-success {
    --dx-alert-color: var(--dx-success);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-success);
    --dx-alert-link-color: var(--dx-success)
}

.alert-sub-success {
    --dx-alert-color: var(--dx-success-text-emphasis);
    --dx-alert-bg: var(--dx-success-bg-subtle);
    --dx-alert-link-color: var(--dx-success)
}

.alert-solid-success {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-success);
    --dx-alert-border-color: var(--dx-success);
    --dx-alert-link-color: var(--dx-success-bg-subtle)
}

.icon-alert-success {
    border-top: 4px solid var(--dx-success)!important
}

.icon-alert-success .icon {
    border: 1px solid var(--dx-success-bg-subtle)
}

.alert-outline-info {
    --dx-alert-color: var(--dx-info);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-info);
    --dx-alert-link-color: var(--dx-info)
}

.alert-sub-info {
    --dx-alert-color: var(--dx-info-text-emphasis);
    --dx-alert-bg: var(--dx-info-bg-subtle);
    --dx-alert-link-color: var(--dx-info)
}

.alert-solid-info {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-info);
    --dx-alert-border-color: var(--dx-info);
    --dx-alert-link-color: var(--dx-info-bg-subtle)
}

.icon-alert-info {
    border-top: 4px solid var(--dx-info)!important
}

.icon-alert-info .icon {
    border: 1px solid var(--dx-info-bg-subtle)
}

.alert-outline-warning {
    --dx-alert-color: var(--dx-warning);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-warning);
    --dx-alert-link-color: var(--dx-warning)
}

.alert-sub-warning {
    --dx-alert-color: var(--dx-warning-text-emphasis);
    --dx-alert-bg: var(--dx-warning-bg-subtle);
    --dx-alert-link-color: var(--dx-warning)
}

.alert-solid-warning {
    --dx-alert-color: #000;
    --dx-alert-bg: var(--dx-warning);
    --dx-alert-border-color: var(--dx-warning);
    --dx-alert-link-color: var(--dx-warning-bg-subtle)
}

.icon-alert-warning {
    border-top: 4px solid var(--dx-warning)!important
}

.icon-alert-warning .icon {
    border: 1px solid var(--dx-warning-bg-subtle)
}

.alert-outline-danger {
    --dx-alert-color: var(--dx-danger);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-danger);
    --dx-alert-link-color: var(--dx-danger)
}

.alert-sub-danger {
    --dx-alert-color: var(--dx-danger-text-emphasis);
    --dx-alert-bg: var(--dx-danger-bg-subtle);
    --dx-alert-link-color: var(--dx-danger)
}

.alert-solid-danger {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-danger);
    --dx-alert-border-color: var(--dx-danger);
    --dx-alert-link-color: var(--dx-danger-bg-subtle)
}

.icon-alert-danger {
    border-top: 4px solid var(--dx-danger)!important
}

.icon-alert-danger .icon {
    border: 1px solid var(--dx-danger-bg-subtle)
}

.icon-alert-light {
    border-top: 4px solid var(--dx-light)!important
}

.icon-alert-light .icon {
    border: 1px solid var(--dx-light-bg-subtle)
}

.alert-outline-dark {
    --dx-alert-color: var(--dx-dark);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-border-color);
    --dx-alert-link-color: var(--dx-dark)
}

.alert-sub-dark {
    --dx-alert-color: var(--dx-secondary-color);
    --dx-alert-bg: var(--dx-tertiary-bg);
    --dx-alert-link-color: var(--dx-dark)
}

.alert-solid-dark {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-dark);
    --dx-alert-border-color: var(--dx-dark);
    --dx-alert-link-color: var(--dx-dark-bg-subtle)
}

.icon-alert-dark {
    border-top: 4px solid var(--dx-dark)!important
}

.icon-alert-dark .icon {
    border: 1px solid var(--dx-dark-bg-subtle)
}

.alert-outline-pink {
    --dx-alert-color: var(--dx-pink);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-pink);
    --dx-alert-link-color: var(--dx-pink)
}

.alert-sub-pink {
    --dx-alert-color: var(--dx-pink-text-emphasis);
    --dx-alert-bg: var(--dx-pink-bg-subtle);
    --dx-alert-link-color: var(--dx-pink)
}

.alert-solid-pink {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-pink);
    --dx-alert-border-color: var(--dx-pink);
    --dx-alert-link-color: var(--dx-pink-bg-subtle)
}

.icon-alert-pink {
    border-top: 4px solid var(--dx-pink)!important
}

.icon-alert-pink .icon {
    border: 1px solid var(--dx-pink-bg-subtle)
}

.alert-outline-orange {
    --dx-alert-color: var(--dx-orange);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-orange);
    --dx-alert-link-color: var(--dx-orange)
}

.alert-sub-orange {
    --dx-alert-color: var(--dx-orange-text-emphasis);
    --dx-alert-bg: var(--dx-orange-bg-subtle);
    --dx-alert-link-color: var(--dx-orange)
}

.alert-solid-orange {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-orange);
    --dx-alert-border-color: var(--dx-orange);
    --dx-alert-link-color: var(--dx-orange-bg-subtle)
}

.icon-alert-orange {
    border-top: 4px solid var(--dx-orange)!important
}

.icon-alert-orange .icon {
    border: 1px solid var(--dx-orange-bg-subtle)
}

.alert-outline-indigo {
    --dx-alert-color: var(--dx-indigo);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-indigo);
    --dx-alert-link-color: var(--dx-indigo)
}

.alert-sub-indigo {
    --dx-alert-color: var(--dx-indigo-text-emphasis);
    --dx-alert-bg: var(--dx-indigo-bg-subtle);
    --dx-alert-link-color: var(--dx-indigo)
}

.alert-solid-indigo {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-indigo);
    --dx-alert-border-color: var(--dx-indigo);
    --dx-alert-link-color: var(--dx-indigo-bg-subtle)
}

.icon-alert-indigo {
    border-top: 4px solid var(--dx-indigo)!important
}

.icon-alert-indigo .icon {
    border: 1px solid var(--dx-indigo-bg-subtle)
}

.card-border-primary {
    --dx-card-border-color: var(--dx-primary-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-primary-bg-subtle),0 4px 6px -4px var(--dx-primary-bg-subtle);
    --dx-link-color-rgb: var(--dx-primary-rgb);
    --prefixlink-hover-color-rgb: var(--dx-primary-rgb)
}

.card-primary {
    --dx-link-color-rgb: var(--dx-primary-rgb)
}

.card-primary .icon-bg {
    background-color: var(--dx-primary);
    color: #fff
}

.card-primary:hover .icon-bg {
    background-color: #ffffff25
}

.card-primary:hover .icon-hover-bg {
    background-color: var(--dx-primary)
}

.card-primary:hover {
    --dx-card-border-color: var(--dx-primary-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

.card-sub-primary {
    --dx-link-color-rgb: var(--dx-primary-rgb)
}

.card-sub-primary .icon-bg {
    background-color: var(--dx-primary-bg-subtle);
    color: var(--dx-primary)
}

.card-sub-primary:hover .icon-hover-bg {
    background-color: rgba(var(--dx-primary-rgb),.08)
}

.card-sub-primary:hover {
    color: var(--dx-primary);
    --dx-card-border-color: var(--dx-primary-border-subtle)
}

.card-hover-primary {
    --dx-link-color-rgb: var(--dx-primary-rgb)
}

.card-hover-primary .icon-bg {
    background-color: var(--dx-primary-bg-subtle);
    color: var(--dx-primary)
}

.card-border-secondary {
    --dx-card-border-color: var(--dx-secondary-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-secondary-bg-subtle),0 4px 6px -4px var(--dx-secondary-bg-subtle);
    --dx-link-color-rgb: var(--dx-secondary-rgb);
    --prefixlink-hover-color-rgb: var(--dx-secondary-rgb)
}

.card-secondary {
    --dx-link-color-rgb: var(--dx-secondary-rgb)
}

.card-secondary .icon-bg {
    background-color: var(--dx-secondary);
    color: #fff
}

.card-secondary:hover .icon-bg {
    background-color: #ffffff25
}

.card-secondary:hover .icon-hover-bg {
    background-color: var(--dx-secondary)
}

.card-secondary:hover {
    --dx-card-border-color: var(--dx-secondary-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

.card-sub-secondary {
    --dx-link-color-rgb: var(--dx-secondary-rgb)
}

.card-sub-secondary .icon-bg {
    background-color: var(--dx-secondary-bg-subtle);
    color: var(--dx-secondary)
}

.card-sub-secondary:hover .icon-hover-bg {
    background-color: rgba(var(--dx-secondary-rgb),.08)
}

.card-sub-secondary:hover {
    color: var(--dx-secondary);
    --dx-card-border-color: var(--dx-secondary-border-subtle)
}

.card-hover-secondary {
    --dx-link-color-rgb: var(--dx-secondary-rgb)
}

.card-hover-secondary .icon-bg {
    background-color: var(--dx-secondary-bg-subtle);
    color: var(--dx-secondary)
}

.card-border-success {
    --dx-card-border-color: var(--dx-success-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-success-bg-subtle),0 4px 6px -4px var(--dx-success-bg-subtle);
    --dx-link-color-rgb: var(--dx-success-rgb);
    --prefixlink-hover-color-rgb: var(--dx-success-rgb)
}

.card-success {
    --dx-link-color-rgb: var(--dx-success-rgb)
}

.card-success .icon-bg {
    background-color: var(--dx-success);
    color: #fff
}

.card-success:hover .icon-bg {
    background-color: #ffffff25
}

.card-success:hover .icon-hover-bg {
    background-color: var(--dx-success)
}

.card-success:hover {
    --dx-card-border-color: var(--dx-success-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

.card-sub-success {
    --dx-link-color-rgb: var(--dx-success-rgb)
}

.card-sub-success .icon-bg {
    background-color: var(--dx-success-bg-subtle);
    color: var(--dx-success)
}

.card-sub-success:hover .icon-hover-bg {
    background-color: rgba(var(--dx-success-rgb),.08)
}

.card-sub-success:hover {
    color: var(--dx-success);
    --dx-card-border-color: var(--dx-success-border-subtle)
}

.card-hover-success {
    --dx-link-color-rgb: var(--dx-success-rgb)
}

.card-hover-success .icon-bg {
    background-color: var(--dx-success-bg-subtle);
    color: var(--dx-success)
}

.card-border-info {
    --dx-card-border-color: var(--dx-info-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-info-bg-subtle),0 4px 6px -4px var(--dx-info-bg-subtle);
    --dx-link-color-rgb: var(--dx-info-rgb);
    --prefixlink-hover-color-rgb: var(--dx-info-rgb)
}

.card-info {
    --dx-link-color-rgb: var(--dx-info-rgb)
}

.card-info .icon-bg {
    background-color: var(--dx-info);
    color: #fff
}

.card-info:hover .icon-bg {
    background-color: #ffffff25
}

.card-info:hover .icon-hover-bg {
    background-color: var(--dx-info)
}

.card-info:hover {
    --dx-card-border-color: var(--dx-info-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

.card-sub-info {
    --dx-link-color-rgb: var(--dx-info-rgb)
}

.card-sub-info .icon-bg {
    background-color: var(--dx-info-bg-subtle);
    color: var(--dx-info)
}

.card-sub-info:hover .icon-hover-bg {
    background-color: rgba(var(--dx-info-rgb),.08)
}

.card-sub-info:hover {
    color: var(--dx-info);
    --dx-card-border-color: var(--dx-info-border-subtle)
}

.card-hover-info {
    --dx-link-color-rgb: var(--dx-info-rgb)
}

.card-hover-info .icon-bg {
    background-color: var(--dx-info-bg-subtle);
    color: var(--dx-info)
}

.card-border-warning {
    --dx-card-border-color: var(--dx-warning-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-warning-bg-subtle),0 4px 6px -4px var(--dx-warning-bg-subtle);
    --dx-link-color-rgb: var(--dx-warning-rgb);
    --prefixlink-hover-color-rgb: var(--dx-warning-rgb)
}

.card-warning {
    --dx-link-color-rgb: var(--dx-warning-rgb)
}

.card-warning .icon-bg {
    background-color: var(--dx-warning);
    color: #000
}

.card-warning:hover .icon-bg {
    background-color: #ffffff25
}

.card-warning:hover .icon-hover-bg {
    background-color: var(--dx-warning)
}

.card-warning:hover {
    --dx-card-border-color: var(--dx-warning-border-subtle);
    color: #000;
    --dx-link-color-rgb: #000
}

.card-sub-warning {
    --dx-link-color-rgb: var(--dx-warning-rgb)
}

.card-sub-warning .icon-bg {
    background-color: var(--dx-warning-bg-subtle);
    color: var(--dx-warning)
}

.card-sub-warning:hover .icon-hover-bg {
    background-color: rgba(var(--dx-warning-rgb),.08)
}

.card-sub-warning:hover {
    color: var(--dx-warning);
    --dx-card-border-color: var(--dx-warning-border-subtle)
}

.card-hover-warning {
    --dx-link-color-rgb: var(--dx-warning-rgb)
}

.card-hover-warning .icon-bg {
    background-color: var(--dx-warning-bg-subtle);
    color: var(--dx-warning)
}

.card-border-danger {
    --dx-card-border-color: var(--dx-danger-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-danger-bg-subtle),0 4px 6px -4px var(--dx-danger-bg-subtle);
    --dx-link-color-rgb: var(--dx-danger-rgb);
    --prefixlink-hover-color-rgb: var(--dx-danger-rgb)
}

.card-danger {
    --dx-link-color-rgb: var(--dx-danger-rgb)
}

.card-danger .icon-bg {
    background-color: var(--dx-danger);
    color: #fff
}

.card-danger:hover .icon-bg {
    background-color: #ffffff25
}

.card-danger:hover .icon-hover-bg {
    background-color: var(--dx-danger)
}

.card-danger:hover {
    --dx-card-border-color: var(--dx-danger-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

.card-sub-danger {
    --dx-link-color-rgb: var(--dx-danger-rgb)
}

.card-sub-danger .icon-bg {
    background-color: var(--dx-danger-bg-subtle);
    color: var(--dx-danger)
}

.card-sub-danger:hover .icon-hover-bg {
    background-color: rgba(var(--dx-danger-rgb),.08)
}

.card-sub-danger:hover {
    color: var(--dx-danger);
    --dx-card-border-color: var(--dx-danger-border-subtle)
}

.card-hover-danger {
    --dx-link-color-rgb: var(--dx-danger-rgb)
}

.card-hover-danger .icon-bg {
    background-color: var(--dx-danger-bg-subtle);
    color: var(--dx-danger)
}

.card-border-light {
    --dx-card-border-color: var(--dx-light-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-light-bg-subtle),0 4px 6px -4px var(--dx-light-bg-subtle);
    --dx-link-color-rgb: var(--dx-light-rgb);
    --prefixlink-hover-color-rgb: var(--dx-light-rgb)
}

.card-light {
    --dx-link-color-rgb: var(--dx-light-rgb)
}

.card-light .icon-bg {
    background-color: var(--dx-light);
    color: #000
}

.card-light:hover .icon-bg {
    background-color: #ffffff25
}

.card-light:hover .icon-hover-bg {
    background-color: var(--dx-light)
}

.card-light:hover {
    --dx-card-border-color: var(--dx-light-border-subtle);
    color: #000;
    --dx-link-color-rgb: #000
}

.card-sub-light {
    --dx-link-color-rgb: var(--dx-light-rgb)
}

.card-sub-light .icon-bg {
    background-color: var(--dx-light-bg-subtle);
    color: var(--dx-light)
}

.card-sub-light:hover .icon-hover-bg {
    background-color: rgba(var(--dx-light-rgb),.08)
}

.card-sub-light:hover {
    color: var(--dx-light);
    --dx-card-border-color: var(--dx-light-border-subtle)
}

.card-hover-light {
    --dx-link-color-rgb: var(--dx-light-rgb)
}

.card-hover-light .icon-bg {
    background-color: var(--dx-light-bg-subtle);
    color: var(--dx-light)
}

.card-border-dark {
    --dx-card-border-color: var(--dx-dark-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-dark-bg-subtle),0 4px 6px -4px var(--dx-dark-bg-subtle);
    --dx-link-color-rgb: var(--dx-dark-rgb);
    --prefixlink-hover-color-rgb: var(--dx-dark-rgb)
}

.card-dark {
    --dx-link-color-rgb: var(--dx-dark-rgb)
}

.card-dark .icon-bg {
    background-color: var(--dx-dark);
    color: #fff
}

.card-dark:hover .icon-bg {
    background-color: #ffffff25
}

.card-dark:hover .icon-hover-bg {
    background-color: var(--dx-dark)
}

.card-dark:hover {
    --dx-card-border-color: var(--dx-dark-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

.card-sub-dark {
    --dx-link-color-rgb: var(--dx-dark-rgb)
}

.card-sub-dark .icon-bg {
    background-color: var(--dx-dark-bg-subtle);
    color: var(--dx-dark)
}

.card-sub-dark:hover .icon-hover-bg {
    background-color: rgba(var(--dx-dark-rgb),.08)
}

.card-sub-dark:hover {
    color: var(--dx-dark);
    --dx-card-border-color: var(--dx-dark-border-subtle)
}

.card-hover-dark {
    --dx-link-color-rgb: var(--dx-dark-rgb)
}

.card-hover-dark .icon-bg {
    background-color: var(--dx-dark-bg-subtle);
    color: var(--dx-dark)
}

.card-border-pink {
    --dx-card-border-color: var(--dx-pink-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-pink-bg-subtle),0 4px 6px -4px var(--dx-pink-bg-subtle);
    --dx-link-color-rgb: var(--dx-pink-rgb);
    --prefixlink-hover-color-rgb: var(--dx-pink-rgb)
}

.card-pink {
    --dx-link-color-rgb: var(--dx-pink-rgb)
}

.card-pink .icon-bg {
    background-color: var(--dx-pink);
    color: #fff
}

.card-pink:hover .icon-bg {
    background-color: #ffffff25
}

.card-pink:hover .icon-hover-bg {
    background-color: var(--dx-pink)
}

.card-pink:hover {
    --dx-card-border-color: var(--dx-pink-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

.card-sub-pink {
    --dx-link-color-rgb: var(--dx-pink-rgb)
}

.card-sub-pink .icon-bg {
    background-color: var(--dx-pink-bg-subtle);
    color: var(--dx-pink)
}

.card-sub-pink:hover .icon-hover-bg {
    background-color: rgba(var(--dx-pink-rgb),.08)
}

.card-sub-pink:hover {
    color: var(--dx-pink);
    --dx-card-border-color: var(--dx-pink-border-subtle)
}

.card-hover-pink {
    --dx-link-color-rgb: var(--dx-pink-rgb)
}

.card-hover-pink .icon-bg {
    background-color: var(--dx-pink-bg-subtle);
    color: var(--dx-pink)
}

.card-border-orange {
    --dx-card-border-color: var(--dx-orange-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-orange-bg-subtle),0 4px 6px -4px var(--dx-orange-bg-subtle);
    --dx-link-color-rgb: var(--dx-orange-rgb);
    --prefixlink-hover-color-rgb: var(--dx-orange-rgb)
}

.card-orange {
    --dx-link-color-rgb: var(--dx-orange-rgb)
}

.card-orange .icon-bg {
    background-color: var(--dx-orange);
    color: #fff
}

.card-orange:hover .icon-bg {
    background-color: #ffffff25
}

.card-orange:hover .icon-hover-bg {
    background-color: var(--dx-orange)
}

.card-orange:hover {
    --dx-card-border-color: var(--dx-orange-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

.card-sub-orange {
    --dx-link-color-rgb: var(--dx-orange-rgb)
}

.card-sub-orange .icon-bg {
    background-color: var(--dx-orange-bg-subtle);
    color: var(--dx-orange)
}

.card-sub-orange:hover .icon-hover-bg {
    background-color: rgba(var(--dx-orange-rgb),.08)
}

.card-sub-orange:hover {
    color: var(--dx-orange);
    --dx-card-border-color: var(--dx-orange-border-subtle)
}

.card-hover-orange {
    --dx-link-color-rgb: var(--dx-orange-rgb)
}

.card-hover-orange .icon-bg {
    background-color: var(--dx-orange-bg-subtle);
    color: var(--dx-orange)
}

.card-border-indigo {
    --dx-card-border-color: var(--dx-indigo-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-indigo-bg-subtle),0 4px 6px -4px var(--dx-indigo-bg-subtle);
    --dx-link-color-rgb: var(--dx-indigo-rgb);
    --prefixlink-hover-color-rgb: var(--dx-indigo-rgb)
}

.card-indigo {
    --dx-link-color-rgb: var(--dx-indigo-rgb)
}

.card-indigo .icon-bg {
    background-color: var(--dx-indigo);
    color: #fff
}

.card-indigo:hover .icon-bg {
    background-color: #ffffff25
}

.card-indigo:hover .icon-hover-bg {
    background-color: var(--dx-indigo)
}

.card-indigo:hover {
    --dx-card-border-color: var(--dx-indigo-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

.card-sub-indigo {
    --dx-link-color-rgb: var(--dx-indigo-rgb)
}

.card-sub-indigo .icon-bg {
    background-color: var(--dx-indigo-bg-subtle);
    color: var(--dx-indigo)
}

.card-sub-indigo:hover .icon-hover-bg {
    background-color: rgba(var(--dx-indigo-rgb),.08)
}

.card-sub-indigo:hover {
    color: var(--dx-indigo);
    --dx-card-border-color: var(--dx-indigo-border-subtle)
}

.card-hover-indigo {
    --dx-link-color-rgb: var(--dx-indigo-rgb)
}

.card-hover-indigo .icon-bg {
    background-color: var(--dx-indigo-bg-subtle);
    color: var(--dx-indigo)
}

.dropdown-primary .dropdown-item:hover {
    color: var(--dx-primary);
    background-color: rgba(var(--dx-primary-rgb),.1)
}

.dropdown-secondary .dropdown-item:hover {
    color: var(--dx-secondary);
    background-color: rgba(var(--dx-secondary-rgb),.1)
}

.dropdown-success .dropdown-item:hover {
    color: var(--dx-success);
    background-color: rgba(var(--dx-success-rgb),.1)
}

.dropdown-info .dropdown-item:hover {
    color: var(--dx-info);
    background-color: rgba(var(--dx-info-rgb),.1)
}

.dropdown-warning .dropdown-item:hover {
    color: var(--dx-warning);
    background-color: rgba(var(--dx-warning-rgb),.1)
}

.dropdown-danger .dropdown-item:hover {
    color: var(--dx-danger);
    background-color: rgba(var(--dx-danger-rgb),.1)
}

.dropdown-light .dropdown-item:hover {
    color: var(--dx-light);
    background-color: rgba(var(--dx-light-rgb),.1)
}

.dropdown-dark .dropdown-item:hover {
    color: var(--dx-dark);
    background-color: rgba(var(--dx-dark-rgb),.1)
}

.dropdown-pink .dropdown-item:hover {
    color: var(--dx-pink);
    background-color: rgba(var(--dx-pink-rgb),.1)
}

.dropdown-orange .dropdown-item:hover {
    color: var(--dx-orange);
    background-color: rgba(var(--dx-orange-rgb),.1)
}

.dropdown-indigo .dropdown-item:hover {
    color: var(--dx-indigo);
    background-color: rgba(var(--dx-indigo-rgb),.1)
}

.nav-primary {
    --dx-nav-pills-link-active-bg: var(--dx-primary);
    --dx-nav-link-hover-color: var(--dx-primary);
    --dx-nav-underline-link-active-color: var(--dx-primary);
    --dx-nav-pills-link-active-color: #fff
}

.nav-secondary {
    --dx-nav-pills-link-active-bg: var(--dx-secondary);
    --dx-nav-link-hover-color: var(--dx-secondary);
    --dx-nav-underline-link-active-color: var(--dx-secondary);
    --dx-nav-pills-link-active-color: #fff
}

.nav-success {
    --dx-nav-pills-link-active-bg: var(--dx-success);
    --dx-nav-link-hover-color: var(--dx-success);
    --dx-nav-underline-link-active-color: var(--dx-success);
    --dx-nav-pills-link-active-color: #fff
}

.nav-info {
    --dx-nav-pills-link-active-bg: var(--dx-info);
    --dx-nav-link-hover-color: var(--dx-info);
    --dx-nav-underline-link-active-color: var(--dx-info);
    --dx-nav-pills-link-active-color: #fff
}

.nav-warning {
    --dx-nav-pills-link-active-bg: var(--dx-warning);
    --dx-nav-link-hover-color: var(--dx-warning);
    --dx-nav-underline-link-active-color: var(--dx-warning);
    --dx-nav-pills-link-active-color: #fff
}

.nav-danger {
    --dx-nav-pills-link-active-bg: var(--dx-danger);
    --dx-nav-link-hover-color: var(--dx-danger);
    --dx-nav-underline-link-active-color: var(--dx-danger);
    --dx-nav-pills-link-active-color: #fff
}

.nav-light {
    --dx-nav-pills-link-active-bg: var(--dx-light);
    --dx-nav-link-hover-color: var(--dx-light);
    --dx-nav-underline-link-active-color: var(--dx-light);
    --dx-nav-pills-link-active-color: #fff;
    --dx-nav-pills-link-active-color: var(--dx-body-color);
    --dx-nav-link-hover-color: var(--dx-body-color)
}

.nav-dark {
    --dx-nav-pills-link-active-bg: var(--dx-dark);
    --dx-nav-link-hover-color: var(--dx-dark);
    --dx-nav-underline-link-active-color: var(--dx-dark);
    --dx-nav-pills-link-active-color: #fff
}

.nav-pink {
    --dx-nav-pills-link-active-bg: var(--dx-pink);
    --dx-nav-link-hover-color: var(--dx-pink);
    --dx-nav-underline-link-active-color: var(--dx-pink);
    --dx-nav-pills-link-active-color: #fff
}

.nav-orange {
    --dx-nav-pills-link-active-bg: var(--dx-orange);
    --dx-nav-link-hover-color: var(--dx-orange);
    --dx-nav-underline-link-active-color: var(--dx-orange);
    --dx-nav-pills-link-active-color: #fff
}

.nav-indigo {
    --dx-nav-pills-link-active-bg: var(--dx-indigo);
    --dx-nav-link-hover-color: var(--dx-indigo);
    --dx-nav-underline-link-active-color: var(--dx-indigo);
    --dx-nav-pills-link-active-color: #fff
}

.pagination-primary {
    --dx-pagination-hover-color: var(--dx-primary);
    --dx-pagination-active-bg: var(--dx-primary);
    --dx-pagination-active-border-color: var(--dx-primary);
    --dx-pagination-focus-color: var(--dx-primary)
}

.pagination-solid-primary .page-link {
    background-color: var(--dx-primary)
}

.pagination-secondary {
    --dx-pagination-hover-color: var(--dx-secondary);
    --dx-pagination-active-bg: var(--dx-secondary);
    --dx-pagination-active-border-color: var(--dx-secondary);
    --dx-pagination-focus-color: var(--dx-secondary)
}

.pagination-solid-secondary .page-link {
    background-color: var(--dx-secondary)
}

.pagination-success {
    --dx-pagination-hover-color: var(--dx-success);
    --dx-pagination-active-bg: var(--dx-success);
    --dx-pagination-active-border-color: var(--dx-success);
    --dx-pagination-focus-color: var(--dx-success)
}

.pagination-solid-success .page-link {
    background-color: var(--dx-success)
}

.pagination-info {
    --dx-pagination-hover-color: var(--dx-info);
    --dx-pagination-active-bg: var(--dx-info);
    --dx-pagination-active-border-color: var(--dx-info);
    --dx-pagination-focus-color: var(--dx-info)
}

.pagination-solid-info .page-link {
    background-color: var(--dx-info)
}

.pagination-warning {
    --dx-pagination-hover-color: var(--dx-warning);
    --dx-pagination-active-bg: var(--dx-warning);
    --dx-pagination-active-border-color: var(--dx-warning);
    --dx-pagination-focus-color: var(--dx-warning)
}

.pagination-solid-warning .page-link {
    background-color: var(--dx-warning)
}

.pagination-danger {
    --dx-pagination-hover-color: var(--dx-danger);
    --dx-pagination-active-bg: var(--dx-danger);
    --dx-pagination-active-border-color: var(--dx-danger);
    --dx-pagination-focus-color: var(--dx-danger)
}

.pagination-solid-danger .page-link {
    background-color: var(--dx-danger)
}

.pagination-light {
    --dx-pagination-hover-color: var(--dx-light);
    --dx-pagination-active-bg: var(--dx-light);
    --dx-pagination-active-border-color: var(--dx-light);
    --dx-pagination-focus-color: var(--dx-light)
}

.pagination-solid-light .page-link {
    background-color: var(--dx-light)
}

.pagination-dark {
    --dx-pagination-hover-color: var(--dx-dark);
    --dx-pagination-active-bg: var(--dx-dark);
    --dx-pagination-active-border-color: var(--dx-dark);
    --dx-pagination-focus-color: var(--dx-dark)
}

.pagination-solid-dark .page-link {
    background-color: var(--dx-dark)
}

.pagination-pink {
    --dx-pagination-hover-color: var(--dx-pink);
    --dx-pagination-active-bg: var(--dx-pink);
    --dx-pagination-active-border-color: var(--dx-pink);
    --dx-pagination-focus-color: var(--dx-pink)
}

.pagination-solid-pink .page-link {
    background-color: var(--dx-pink)
}

.pagination-orange {
    --dx-pagination-hover-color: var(--dx-orange);
    --dx-pagination-active-bg: var(--dx-orange);
    --dx-pagination-active-border-color: var(--dx-orange);
    --dx-pagination-focus-color: var(--dx-orange)
}

.pagination-solid-orange .page-link {
    background-color: var(--dx-orange)
}

.pagination-indigo {
    --dx-pagination-hover-color: var(--dx-indigo);
    --dx-pagination-active-bg: var(--dx-indigo);
    --dx-pagination-active-border-color: var(--dx-indigo);
    --dx-pagination-focus-color: var(--dx-indigo)
}

.pagination-solid-indigo .page-link {
    background-color: var(--dx-indigo)
}

.tooltip-primary {
    --dx-tooltip-bg: var(--dx-primary);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-secondary {
    --dx-tooltip-bg: var(--dx-secondary);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-success {
    --dx-tooltip-bg: var(--dx-success);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-info {
    --dx-tooltip-bg: var(--dx-info);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-warning {
    --dx-tooltip-bg: var(--dx-warning);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-danger {
    --dx-tooltip-bg: var(--dx-danger);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-light {
    --dx-tooltip-bg: var(--dx-light);
    --dx-tooltip-color: var(--dx-white);
    --dx-tooltip-color: #000
}

.tooltip-dark {
    --dx-tooltip-bg: var(--dx-dark);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-pink {
    --dx-tooltip-bg: var(--dx-pink);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-orange {
    --dx-tooltip-bg: var(--dx-orange);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-indigo {
    --dx-tooltip-bg: var(--dx-indigo);
    --dx-tooltip-color: var(--dx-white)
}

.link-primary {
    color: var(--dx-primary)!important
}

.link-primary:hover {
    color: var(--dx-primary-text-emphasis)!important
}

.link-custom-primary {
    color: var(--dx-secondary-color)!important
}

.link-custom-primary:hover {
    color: var(--dx-primary)!important
}

.link-secondary {
    color: var(--dx-secondary)!important
}

.link-secondary:hover {
    color: var(--dx-secondary-text-emphasis)!important
}

.link-custom-secondary {
    color: var(--dx-secondary-color)!important
}

.link-custom-secondary:hover {
    color: var(--dx-secondary)!important
}

.link-success {
    color: var(--dx-success)!important
}

.link-success:hover {
    color: var(--dx-success-text-emphasis)!important
}

.link-custom-success {
    color: var(--dx-secondary-color)!important
}

.link-custom-success:hover {
    color: var(--dx-success)!important
}

.link-info {
    color: var(--dx-info)!important
}

.link-info:hover {
    color: var(--dx-info-text-emphasis)!important
}

.link-custom-info {
    color: var(--dx-secondary-color)!important
}

.link-custom-info:hover {
    color: var(--dx-info)!important
}

.link-warning {
    color: var(--dx-warning)!important
}

.link-warning:hover {
    color: var(--dx-warning-text-emphasis)!important
}

.link-custom-warning {
    color: var(--dx-secondary-color)!important
}

.link-custom-warning:hover {
    color: var(--dx-warning)!important
}

.link-danger {
    color: var(--dx-danger)!important
}

.link-danger:hover {
    color: var(--dx-danger-text-emphasis)!important
}

.link-custom-danger {
    color: var(--dx-secondary-color)!important
}

.link-custom-danger:hover {
    color: var(--dx-danger)!important
}

.link-light {
    color: var(--dx-light)!important
}

.link-light:hover {
    color: var(--dx-light-text-emphasis)!important
}

.link-custom-light {
    color: var(--dx-secondary-color)!important
}

.link-custom-light:hover {
    color: var(--dx-light)!important
}

.link-dark {
    color: var(--dx-dark)!important
}

.link-dark:hover {
    color: var(--dx-dark-text-emphasis)!important
}

.link-custom-dark {
    color: var(--dx-secondary-color)!important
}

.link-custom-dark:hover {
    color: var(--dx-dark)!important
}

.link-pink {
    color: var(--dx-pink)!important
}

.link-pink:hover {
    color: var(--dx-pink-text-emphasis)!important
}

.link-custom-pink {
    color: var(--dx-secondary-color)!important
}

.link-custom-pink:hover {
    color: var(--dx-pink)!important
}

.link-orange {
    color: var(--dx-orange)!important
}

.link-orange:hover {
    color: var(--dx-orange-text-emphasis)!important
}

.link-custom-orange {
    color: var(--dx-secondary-color)!important
}

.link-custom-orange:hover {
    color: var(--dx-orange)!important
}

.link-indigo {
    color: var(--dx-indigo)!important
}

.link-indigo:hover {
    color: var(--dx-indigo-text-emphasis)!important
}

.link-custom-indigo {
    color: var(--dx-secondary-color)!important
}

.link-custom-indigo:hover {
    color: var(--dx-indigo)!important
}

.switch-outline-primary input:checked+label:after {
    background-color: var(--dx-primary)
}

.switch-soft-primary input:checked+label:after {
    background-color: var(--dx-primary)
}

.switch-light-primary input:checked+label {
    background: var(--dx-primary-bg-subtle);
    border: 1px solid var(--dx-primary-bg-subtle)
}

.switch-light-primary input:checked+label:after {
    background-color: var(--dx-primary)
}

.switch-solid-primary input:checked+label {
    background: var(--dx-primary);
    border: 1px solid var(--dx-primary)
}

.switch-effect-primary input:checked+label:after {
    background-color: var(--dx-primary)
}

.switch-outline-secondary input:checked+label:after {
    background-color: var(--dx-secondary)
}

.switch-soft-secondary input:checked+label:after {
    background-color: var(--dx-secondary)
}

.switch-light-secondary input:checked+label {
    background: var(--dx-secondary-bg-subtle);
    border: 1px solid var(--dx-secondary-bg-subtle)
}

.switch-light-secondary input:checked+label:after {
    background-color: var(--dx-secondary)
}

.switch-solid-secondary input:checked+label {
    background: var(--dx-secondary);
    border: 1px solid var(--dx-secondary)
}

.switch-effect-secondary input:checked+label:after {
    background-color: var(--dx-secondary)
}

.switch-outline-success input:checked+label:after {
    background-color: var(--dx-success)
}

.switch-soft-success input:checked+label:after {
    background-color: var(--dx-success)
}

.switch-light-success input:checked+label {
    background: var(--dx-success-bg-subtle);
    border: 1px solid var(--dx-success-bg-subtle)
}

.switch-light-success input:checked+label:after {
    background-color: var(--dx-success)
}

.switch-solid-success input:checked+label {
    background: var(--dx-success);
    border: 1px solid var(--dx-success)
}

.switch-effect-success input:checked+label:after {
    background-color: var(--dx-success)
}

.switch-outline-info input:checked+label:after {
    background-color: var(--dx-info)
}

.switch-soft-info input:checked+label:after {
    background-color: var(--dx-info)
}

.switch-light-info input:checked+label {
    background: var(--dx-info-bg-subtle);
    border: 1px solid var(--dx-info-bg-subtle)
}

.switch-light-info input:checked+label:after {
    background-color: var(--dx-info)
}

.switch-solid-info input:checked+label {
    background: var(--dx-info);
    border: 1px solid var(--dx-info)
}

.switch-effect-info input:checked+label:after {
    background-color: var(--dx-info)
}

.switch-outline-warning input:checked+label:after {
    background-color: var(--dx-warning)
}

.switch-soft-warning input:checked+label:after {
    background-color: var(--dx-warning)
}

.switch-light-warning input:checked+label {
    background: var(--dx-warning-bg-subtle);
    border: 1px solid var(--dx-warning-bg-subtle)
}

.switch-light-warning input:checked+label:after {
    background-color: var(--dx-warning)
}

.switch-solid-warning input:checked+label {
    background: var(--dx-warning);
    border: 1px solid var(--dx-warning)
}

.switch-effect-warning input:checked+label:after {
    background-color: var(--dx-warning)
}

.switch-outline-danger input:checked+label:after {
    background-color: var(--dx-danger)
}

.switch-soft-danger input:checked+label:after {
    background-color: var(--dx-danger)
}

.switch-light-danger input:checked+label {
    background: var(--dx-danger-bg-subtle);
    border: 1px solid var(--dx-danger-bg-subtle)
}

.switch-light-danger input:checked+label:after {
    background-color: var(--dx-danger)
}

.switch-solid-danger input:checked+label {
    background: var(--dx-danger);
    border: 1px solid var(--dx-danger)
}

.switch-effect-danger input:checked+label:after {
    background-color: var(--dx-danger)
}

.switch-outline-light input:checked+label:after {
    background-color: var(--dx-light)
}

.switch-soft-light input:checked+label:after {
    background-color: var(--dx-light)
}

.switch-light-light input:checked+label {
    background: var(--dx-light-bg-subtle);
    border: 1px solid var(--dx-light-bg-subtle)
}

.switch-light-light input:checked+label:after {
    background-color: var(--dx-light)
}

.switch-solid-light input:checked+label {
    background: var(--dx-light);
    border: 1px solid var(--dx-light)
}

.switch-effect-light input:checked+label:after {
    background-color: var(--dx-light)
}

.switch-outline-dark input:checked+label:after {
    background-color: var(--dx-dark)
}

.switch-soft-dark input:checked+label:after {
    background-color: var(--dx-dark)
}

.switch-light-dark input:checked+label {
    background: var(--dx-dark-bg-subtle);
    border: 1px solid var(--dx-dark-bg-subtle)
}

.switch-light-dark input:checked+label:after {
    background-color: var(--dx-dark)
}

.switch-solid-dark input:checked+label {
    background: var(--dx-dark);
    border: 1px solid var(--dx-dark)
}

.switch-effect-dark input:checked+label:after {
    background-color: var(--dx-dark)
}

.switch-outline-pink input:checked+label:after {
    background-color: var(--dx-pink)
}

.switch-soft-pink input:checked+label:after {
    background-color: var(--dx-pink)
}

.switch-light-pink input:checked+label {
    background: var(--dx-pink-bg-subtle);
    border: 1px solid var(--dx-pink-bg-subtle)
}

.switch-light-pink input:checked+label:after {
    background-color: var(--dx-pink)
}

.switch-solid-pink input:checked+label {
    background: var(--dx-pink);
    border: 1px solid var(--dx-pink)
}

.switch-effect-pink input:checked+label:after {
    background-color: var(--dx-pink)
}

.switch-outline-orange input:checked+label:after {
    background-color: var(--dx-orange)
}

.switch-soft-orange input:checked+label:after {
    background-color: var(--dx-orange)
}

.switch-light-orange input:checked+label {
    background: var(--dx-orange-bg-subtle);
    border: 1px solid var(--dx-orange-bg-subtle)
}

.switch-light-orange input:checked+label:after {
    background-color: var(--dx-orange)
}

.switch-solid-orange input:checked+label {
    background: var(--dx-orange);
    border: 1px solid var(--dx-orange)
}

.switch-effect-orange input:checked+label:after {
    background-color: var(--dx-orange)
}

.switch-outline-indigo input:checked+label:after {
    background-color: var(--dx-indigo)
}

.switch-soft-indigo input:checked+label:after {
    background-color: var(--dx-indigo)
}

.switch-light-indigo input:checked+label {
    background: var(--dx-indigo-bg-subtle);
    border: 1px solid var(--dx-indigo-bg-subtle)
}

.switch-light-indigo input:checked+label:after {
    background-color: var(--dx-indigo)
}

.switch-solid-indigo input:checked+label {
    background: var(--dx-indigo);
    border: 1px solid var(--dx-indigo)
}

.switch-effect-indigo input:checked+label:after {
    background-color: var(--dx-indigo)
}

.check-primary .form-check-input:checked {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary)
}

.check-soft-primary .form-check-input {
    --dx-border-color: rgba(var(--dx-primary-rgb), .2);
    --dx-form-check-bg: var(--dx-primary-bg-subtle)
}

.check-soft-primary .form-check-input:checked {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary)
}

.radio-primary .form-check-input:checked {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary)
}

.radio-soft-primary .form-check-input {
    --dx-border-color: rgba(var(--dx-primary-rgb), .2);
    --dx-form-check-bg: var(--dx-primary-bg-subtle)
}

.radio-soft-primary .form-check-input:focus {
    box-shadow: none
}

.radio-soft-primary .form-check-input:checked {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary)
}

.check-secondary .form-check-input:checked {
    background-color: var(--dx-secondary);
    border-color: var(--dx-secondary)
}

.check-soft-secondary .form-check-input {
    --dx-border-color: rgba(var(--dx-secondary-rgb), .2);
    --dx-form-check-bg: var(--dx-secondary-bg-subtle)
}

.check-soft-secondary .form-check-input:checked {
    background-color: var(--dx-secondary);
    border-color: var(--dx-secondary)
}

.radio-secondary .form-check-input:checked {
    background-color: var(--dx-secondary);
    border-color: var(--dx-secondary)
}

.radio-soft-secondary .form-check-input {
    --dx-border-color: rgba(var(--dx-secondary-rgb), .2);
    --dx-form-check-bg: var(--dx-secondary-bg-subtle)
}

.radio-soft-secondary .form-check-input:focus {
    box-shadow: none
}

.radio-soft-secondary .form-check-input:checked {
    background-color: var(--dx-secondary);
    border-color: var(--dx-secondary)
}

.check-success .form-check-input:checked {
    background-color: var(--dx-success);
    border-color: var(--dx-success)
}

.check-soft-success .form-check-input {
    --dx-border-color: rgba(var(--dx-success-rgb), .2);
    --dx-form-check-bg: var(--dx-success-bg-subtle)
}

.check-soft-success .form-check-input:checked {
    background-color: var(--dx-success);
    border-color: var(--dx-success)
}

.radio-success .form-check-input:checked {
    background-color: var(--dx-success);
    border-color: var(--dx-success)
}

.radio-soft-success .form-check-input {
    --dx-border-color: rgba(var(--dx-success-rgb), .2);
    --dx-form-check-bg: var(--dx-success-bg-subtle)
}

.radio-soft-success .form-check-input:focus {
    box-shadow: none
}

.radio-soft-success .form-check-input:checked {
    background-color: var(--dx-success);
    border-color: var(--dx-success)
}

.check-info .form-check-input:checked {
    background-color: var(--dx-info);
    border-color: var(--dx-info)
}

.check-soft-info .form-check-input {
    --dx-border-color: rgba(var(--dx-info-rgb), .2);
    --dx-form-check-bg: var(--dx-info-bg-subtle)
}

.check-soft-info .form-check-input:checked {
    background-color: var(--dx-info);
    border-color: var(--dx-info)
}

.radio-info .form-check-input:checked {
    background-color: var(--dx-info);
    border-color: var(--dx-info)
}

.radio-soft-info .form-check-input {
    --dx-border-color: rgba(var(--dx-info-rgb), .2);
    --dx-form-check-bg: var(--dx-info-bg-subtle)
}

.radio-soft-info .form-check-input:focus {
    box-shadow: none
}

.radio-soft-info .form-check-input:checked {
    background-color: var(--dx-info);
    border-color: var(--dx-info)
}

.check-warning .form-check-input:checked {
    background-color: var(--dx-warning);
    border-color: var(--dx-warning)
}

.check-soft-warning .form-check-input {
    --dx-border-color: rgba(var(--dx-warning-rgb), .2);
    --dx-form-check-bg: var(--dx-warning-bg-subtle)
}

.check-soft-warning .form-check-input:checked {
    background-color: var(--dx-warning);
    border-color: var(--dx-warning)
}

.radio-warning .form-check-input:checked {
    background-color: var(--dx-warning);
    border-color: var(--dx-warning)
}

.radio-soft-warning .form-check-input {
    --dx-border-color: rgba(var(--dx-warning-rgb), .2);
    --dx-form-check-bg: var(--dx-warning-bg-subtle)
}

.radio-soft-warning .form-check-input:focus {
    box-shadow: none
}

.radio-soft-warning .form-check-input:checked {
    background-color: var(--dx-warning);
    border-color: var(--dx-warning)
}

.check-danger .form-check-input:checked {
    background-color: var(--dx-danger);
    border-color: var(--dx-danger)
}

.check-soft-danger .form-check-input {
    --dx-border-color: rgba(var(--dx-danger-rgb), .2);
    --dx-form-check-bg: var(--dx-danger-bg-subtle)
}

.check-soft-danger .form-check-input:checked {
    background-color: var(--dx-danger);
    border-color: var(--dx-danger)
}

.radio-danger .form-check-input:checked {
    background-color: var(--dx-danger);
    border-color: var(--dx-danger)
}

.radio-soft-danger .form-check-input {
    --dx-border-color: rgba(var(--dx-danger-rgb), .2);
    --dx-form-check-bg: var(--dx-danger-bg-subtle)
}

.radio-soft-danger .form-check-input:focus {
    box-shadow: none
}

.radio-soft-danger .form-check-input:checked {
    background-color: var(--dx-danger);
    border-color: var(--dx-danger)
}

.check-light .form-check-input:checked {
    background-color: var(--dx-light);
    border-color: var(--dx-light)
}

.check-soft-light .form-check-input {
    --dx-border-color: rgba(var(--dx-light-rgb), .2);
    --dx-form-check-bg: var(--dx-light-bg-subtle)
}

.check-soft-light .form-check-input:checked {
    background-color: var(--dx-light);
    border-color: var(--dx-light)
}

.radio-light .form-check-input:checked {
    background-color: var(--dx-light);
    border-color: var(--dx-light)
}

.radio-soft-light .form-check-input {
    --dx-border-color: rgba(var(--dx-light-rgb), .2);
    --dx-form-check-bg: var(--dx-light-bg-subtle)
}

.radio-soft-light .form-check-input:focus {
    box-shadow: none
}

.radio-soft-light .form-check-input:checked {
    background-color: var(--dx-light);
    border-color: var(--dx-light)
}

.check-dark .form-check-input:checked {
    background-color: var(--dx-dark);
    border-color: var(--dx-dark)
}

.check-soft-dark .form-check-input {
    --dx-border-color: rgba(var(--dx-dark-rgb), .2);
    --dx-form-check-bg: var(--dx-dark-bg-subtle)
}

.check-soft-dark .form-check-input:checked {
    background-color: var(--dx-dark);
    border-color: var(--dx-dark)
}

.radio-dark .form-check-input:checked {
    background-color: var(--dx-dark);
    border-color: var(--dx-dark)
}

.radio-soft-dark .form-check-input {
    --dx-border-color: rgba(var(--dx-dark-rgb), .2);
    --dx-form-check-bg: var(--dx-dark-bg-subtle)
}

.radio-soft-dark .form-check-input:focus {
    box-shadow: none
}

.radio-soft-dark .form-check-input:checked {
    background-color: var(--dx-dark);
    border-color: var(--dx-dark)
}

.check-pink .form-check-input:checked {
    background-color: var(--dx-pink);
    border-color: var(--dx-pink)
}

.check-soft-pink .form-check-input {
    --dx-border-color: rgba(var(--dx-pink-rgb), .2);
    --dx-form-check-bg: var(--dx-pink-bg-subtle)
}

.check-soft-pink .form-check-input:checked {
    background-color: var(--dx-pink);
    border-color: var(--dx-pink)
}

.radio-pink .form-check-input:checked {
    background-color: var(--dx-pink);
    border-color: var(--dx-pink)
}

.radio-soft-pink .form-check-input {
    --dx-border-color: rgba(var(--dx-pink-rgb), .2);
    --dx-form-check-bg: var(--dx-pink-bg-subtle)
}

.radio-soft-pink .form-check-input:focus {
    box-shadow: none
}

.radio-soft-pink .form-check-input:checked {
    background-color: var(--dx-pink);
    border-color: var(--dx-pink)
}

.check-orange .form-check-input:checked {
    background-color: var(--dx-orange);
    border-color: var(--dx-orange)
}

.check-soft-orange .form-check-input {
    --dx-border-color: rgba(var(--dx-orange-rgb), .2);
    --dx-form-check-bg: var(--dx-orange-bg-subtle)
}

.check-soft-orange .form-check-input:checked {
    background-color: var(--dx-orange);
    border-color: var(--dx-orange)
}

.radio-orange .form-check-input:checked {
    background-color: var(--dx-orange);
    border-color: var(--dx-orange)
}

.radio-soft-orange .form-check-input {
    --dx-border-color: rgba(var(--dx-orange-rgb), .2);
    --dx-form-check-bg: var(--dx-orange-bg-subtle)
}

.radio-soft-orange .form-check-input:focus {
    box-shadow: none
}

.radio-soft-orange .form-check-input:checked {
    background-color: var(--dx-orange);
    border-color: var(--dx-orange)
}

.check-indigo .form-check-input:checked {
    background-color: var(--dx-indigo);
    border-color: var(--dx-indigo)
}

.check-soft-indigo .form-check-input {
    --dx-border-color: rgba(var(--dx-indigo-rgb), .2);
    --dx-form-check-bg: var(--dx-indigo-bg-subtle)
}

.check-soft-indigo .form-check-input:checked {
    background-color: var(--dx-indigo);
    border-color: var(--dx-indigo)
}

.radio-indigo .form-check-input:checked {
    background-color: var(--dx-indigo);
    border-color: var(--dx-indigo)
}

.radio-soft-indigo .form-check-input {
    --dx-border-color: rgba(var(--dx-indigo-rgb), .2);
    --dx-form-check-bg: var(--dx-indigo-bg-subtle)
}

.radio-soft-indigo .form-check-input:focus {
    box-shadow: none
}

.radio-soft-indigo .form-check-input:checked {
    background-color: var(--dx-indigo);
    border-color: var(--dx-indigo)
}

.input-spin-primary button:hover svg {
    color: var(--dx-primary)
}

.input-solid-primary .input-spin-plus,.input-solid-primary .input-spin-minus {
    background-color: var(--dx-primary)!important;
    color: #fff
}

.input-spin-secondary button:hover svg {
    color: var(--dx-secondary)
}

.input-solid-secondary .input-spin-plus,.input-solid-secondary .input-spin-minus {
    background-color: var(--dx-secondary)!important;
    color: #fff
}

.input-spin-success button:hover svg {
    color: var(--dx-success)
}

.input-solid-success .input-spin-plus,.input-solid-success .input-spin-minus {
    background-color: var(--dx-success)!important;
    color: #fff
}

.input-spin-info button:hover svg {
    color: var(--dx-info)
}

.input-solid-info .input-spin-plus,.input-solid-info .input-spin-minus {
    background-color: var(--dx-info)!important;
    color: #fff
}

.input-spin-warning button:hover svg {
    color: var(--dx-warning)
}

.input-solid-warning .input-spin-plus,.input-solid-warning .input-spin-minus {
    background-color: var(--dx-warning)!important;
    color: #fff
}

.input-spin-danger button:hover svg {
    color: var(--dx-danger)
}

.input-solid-danger .input-spin-plus,.input-solid-danger .input-spin-minus {
    background-color: var(--dx-danger)!important;
    color: #fff
}

.input-spin-light button:hover svg {
    color: var(--dx-light)
}

.input-solid-light .input-spin-plus,.input-solid-light .input-spin-minus {
    background-color: var(--dx-light)!important;
    color: #fff;
    color: var(--dx-secondary-color)
}

.input-spin-dark button:hover svg {
    color: var(--dx-dark)
}

.input-solid-dark .input-spin-plus,.input-solid-dark .input-spin-minus {
    background-color: var(--dx-dark)!important;
    color: #fff
}

.input-spin-pink button:hover svg {
    color: var(--dx-pink)
}

.input-solid-pink .input-spin-plus,.input-solid-pink .input-spin-minus {
    background-color: var(--dx-pink)!important;
    color: #fff
}

.input-spin-orange button:hover svg {
    color: var(--dx-orange)
}

.input-solid-orange .input-spin-plus,.input-solid-orange .input-spin-minus {
    background-color: var(--dx-orange)!important;
    color: #fff
}

.input-spin-indigo button:hover svg {
    color: var(--dx-indigo)
}

.input-solid-indigo .input-spin-plus,.input-solid-indigo .input-spin-minus {
    background-color: var(--dx-indigo)!important;
    color: #fff
}

.toast-primary {
    --dx-toast-bg: var(--dx-primary);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-primary);
    --dx-toast-border-color: var(--dx-primary);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), .75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), .15)
}

.toast-primary .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), .75)
}

.toast-secondary {
    --dx-toast-bg: var(--dx-secondary);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-secondary);
    --dx-toast-border-color: var(--dx-secondary);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), .75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), .15)
}

.toast-secondary .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), .75)
}

.toast-success {
    --dx-toast-bg: var(--dx-success);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-success);
    --dx-toast-border-color: var(--dx-success);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), .75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), .15)
}

.toast-success .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), .75)
}

.toast-info {
    --dx-toast-bg: var(--dx-info);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-info);
    --dx-toast-border-color: var(--dx-info);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), .75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), .15)
}

.toast-info .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), .75)
}

.toast-warning {
    --dx-toast-bg: var(--dx-warning);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-warning);
    --dx-toast-border-color: var(--dx-warning);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), .75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), .15)
}

.toast-warning .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), .75)
}

.toast-danger {
    --dx-toast-bg: var(--dx-danger);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-danger);
    --dx-toast-border-color: var(--dx-danger);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), .75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), .15)
}

.toast-danger .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), .75)
}

.toast-pink {
    --dx-toast-bg: var(--dx-pink);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-pink);
    --dx-toast-border-color: var(--dx-pink);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), .75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), .15)
}

.toast-pink .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), .75)
}

.toast-orange {
    --dx-toast-bg: var(--dx-orange);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-orange);
    --dx-toast-border-color: var(--dx-orange);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), .75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), .15)
}

.toast-orange .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), .75)
}

.toast-indigo {
    --dx-toast-bg: var(--dx-indigo);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-indigo);
    --dx-toast-border-color: var(--dx-indigo);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), .75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), .15)
}

.toast-indigo .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), .75)
}

.navbar-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 112;
    transition: all .4s ease
}

.navbar-custom .nav-item .nav-link {
    color: #171717;
    padding: 7px 15px;
    font-weight: 400;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    transition: color .3s ease
}

.navbar-custom .nav-item .nav-link:hover,.navbar-custom .nav-item .nav-link.active {
    color: var(--dx-primary)
}

.navbar-custom .nav-item .nav-link:after {
    transition: transform .3s ease
}

@media(max-width: 1199.98px) {
    .navbar-custom .nav-item .nav-link:after {
        margin-left:auto
    }
}

.navbar-custom .nav-item.dropdown .dropdown-menu:before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: var(--dx-body-custom-bg);
    position: absolute;
    top: 0;
    left: 22px;
    transform: rotate(45deg) translateY(-11px);
    z-index: 8
}

.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
    font-size: 17px;
    padding: 11px
}

.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-submenu {
    position: relative
}

.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-submenu>.dropdown-item .submenu-arrow {
    display: inline-block;
    transition: transform .3s ease;
    font-size: 1rem
}

.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-submenu .dropdown-sub-menu {
    position: absolute;
    top: 0;
    left: 112%;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
    background-color: var(--dx-body-bg);
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem #00000026;
    padding: .5rem;
    z-index: 1000
}

.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-submenu:hover .dropdown-sub-menu,.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-submenu:has(.dropdown-sub-menu:hover) .dropdown-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: slideInUp .4s ease forwards
}

.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-submenu:hover>.dropdown-item .submenu-arrow,.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-submenu:has(.dropdown-sub-menu:hover)>.dropdown-item .submenu-arrow {
    transform: rotate(90deg)
}

@media(min-width: 1200px) {
    .navbar-custom .nav-item.dropdown .dropdown-menu.dropdown-menu-hover {
        display:block;
        opacity: 0;
        visibility: hidden;
        transition: all .3s ease;
        position: absolute;
        border: 1px solid var(--dx-border-color);
        border-radius: .5rem;
        padding: var(--dx-spacer)
    }
}

@media(min-width: 1200px) {
    .navbar-custom .nav-item.dropdown .dropdown-menu-lg {
        width:700px
    }

    .navbar-custom .nav-item.dropdown .dropdown-mega-menu {
        min-width: 1200px;
        max-width: 1200px;
        left: 50%;
        transform: translate(-50%)!important
    }
}

.navbar-custom .nav-item.dropdown:hover .nav-link:after {
    transform: rotate(180deg)
}

@media(min-width: 1200px) {
    .navbar-custom .nav-item.dropdown:hover .dropdown-menu-hover.dropdown-menu {
        display:block;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
        animation: slideInUp .4s ease forwards
    }
}

.navbar-custom:is(.navbar-light,.navbar-dark) .sliding-nav-bar {
    position: absolute;
    border-radius: 50rem;
    background: #5c3e9426;
    border: 1px solid rgba(255,255,255,.1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: all .2s cubic-bezier(.17,.67,.83,.67);
    z-index: 0
}

.navbar-custom:is(.navbar-light,.navbar-dark) .extra-button-wrapper a:last-child {
    padding-left: 1rem
}

@media(min-width: 1200px) {
    .navbar-custom.navbar-light .sliding-nav-bar {
        background:#ffffff26
    }

    .navbar-custom.navbar-light .navbar-nav .nav-item .nav-link {
        color: #fff
    }

    .navbar-custom.navbar-light .extra-button-wrapper a {
        color: #fffc
    }

    .navbar-custom.navbar-light .extra-button-wrapper a:last-child {
        border-left: 1px solid rgba(255,255,255,.4)
    }
}

.navbar-custom.navbar-dark.navbar-scroll {
    background: #ffffff38
}

.navbar-custom.navbar-dark .nav-ambient-cubes span {
    border: 2px solid rgba(92,62,148,.6352941176)
}

.navbar-custom.navbar-dark .nav-ambient-cubes span:nth-child(2) {
    border-color: #5c3e94a2
}

@media(min-width: 1200px) {
    .navbar-custom.navbar-dark .navbar-nav .nav-item .nav-link {
        color:#5c3e94
    }

    .navbar-custom.navbar-dark .extra-button-wrapper a {
        color: #5c3e94cc
    }

    .navbar-custom.navbar-dark .extra-button-wrapper a:last-child {
        border-left: 1px solid rgba(92,62,148,.4)
    }
}

@media(max-width: 1199.98px) {
    .navbar-custom .navbar-collapse {
        background-color:var(--dx-body-bg);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 300px
    }

    .navbar-custom .navbar-collapse .navbar-brand {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .navbar-custom .navbar-collapse .navbar-nav {
        height: calc(100% - 135px);
        overflow-y: auto;
        overflow-x: hidden
    }

    .navbar-custom .navbar-collapse .nav-item .dropdown-menu {
        box-shadow: none;
        border: none;
        padding-left: 30px
    }

    .navbar-custom .navbar-collapse .nav-item .dropdown-menu .dropdown-item {
        position: relative
    }

    .navbar-custom .navbar-collapse .nav-item .dropdown-menu .dropdown-item:before {
        content: "";
        position: absolute;
        width: 9px;
        height: 2px;
        background-color: #a3a3a3;
        left: -12px;
        top: 50%;
        transform: translateY(-50%)
    }

    .navbar-custom .navbar-collapse .nav-item .dropdown-menu .dropdown-submenu .dropdown-sub-menu {
        position: static;
        display: none;
        min-width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        box-shadow: none;
        padding: 0 0 0 20px;
        margin: 0;
        background-color: transparent
    }

    .navbar-custom .navbar-collapse .nav-item .dropdown-menu .dropdown-submenu.open>.dropdown-item .submenu-arrow {
        transform: rotate(90deg)
    }

    .navbar-custom .navbar-collapse .nav-item .dropdown-menu .dropdown-submenu.open>.dropdown-sub-menu {
        display: block;
        animation: slideInUp .3s ease forwards
    }

    .navbar-custom .navbar-collapse .extra-button-wrapper {
        padding-top: 10px
    }

    .navbar-custom .navbar-collapse .extra-button-wrapper a {
        display: inline-block;
        color: #fff;
        background-color: var(--dx-primary);
        padding: .5625rem 1.5rem;
        font-size: 14px!important
    }
}

.navbar-custom.navbar-analytics {
    top: 2.5625rem
}

.navbar-custom.navbar-analytics.navbar-scroll {
    top: 0
}

.navbar-custom.navbar-scroll {
    background: #00000038;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px #00000014;
    animation: navbarSlideDown .7s ease
}

@media(max-width: 1199.98px) {
    .navbar-custom .navbar-collapse {
        position:fixed!important;
        top: 0;
        left: -100%;
        width: 300px;
        height: 100vh;
        background-color: var(--dx-body-bg);
        z-index: 99999;
        transition: all .4s ease;
        overflow-y: auto
    }

    .navbar-custom .navbar-collapse.show {
        left: 0!important
    }
}

@keyframes navbarSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-70px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fullscreen-search {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: #0000009c;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    pointer-events: none;
    transition: opacity .4s ease,visibility .4s ease,transform .5s ease
}

.fullscreen-search.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto
}

.fullscreen-search.active .search-content {
    transform: translateY(0);
    opacity: 1
}

.fullscreen-search.active .search-close {
    opacity: 1;
    transform: rotate(0)
}

.fullscreen-search .search-content {
    width: 100%;
    max-width: 800px;
    padding: 0 20px;
    transform: translateY(80px);
    opacity: 0;
    transition: all .5s ease .2s
}

.fullscreen-search .search-input {
    width: 100%;
    height: 80px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--dx-border-color);
    color: #fff;
    font-size: 40px;
    padding-right: 70px;
    outline: none
}

.fullscreen-search .search-input::placeholder {
    color: #fff9
}

.fullscreen-search .search-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 28px
}

.fullscreen-search .search-close {
    position: absolute;
    top: 40px;
    right: 40px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 35px;
    cursor: pointer;
    opacity: 0;
    transform: rotate(90deg);
    transition: all .4s ease .3s
}

@media(max-width: 767px) {
    .fullscreen-search .search-input {
        font-size:24px;
        height: 60px
    }

    .fullscreen-search .search-close {
        top: 20px;
        right: 20px;
        font-size: 28px
    }
}

.digital-navbar-menu .nav-ambient-cubes {
    display: flex;
    flex-wrap: wrap;
    width: 21px;
    gap: 1px
}

.digital-navbar-menu .nav-ambient-cubes span {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    border: 2px solid rgba(255,255,255,.5803921569)
}

.digital-navbar-menu .nav-ambient-cubes span:nth-child(2) {
    border-color: #ffffff93;
    transform: rotate(45deg);
    transition: all .3s ease-in-out
}

.digital-navbar-menu:hover .nav-ambient-cubes span:nth-child(2) {
    animation: bounceTwice .6s linear forwards
}

@keyframes bounceTwice {
    0% {
        transform: rotate(45deg) translateY(0)
    }

    25% {
        transform: rotate(0) translateY(-3px)
    }

    50% {
        transform: rotate(0) translateY(0)
    }

    75% {
        transform: rotate(0) translateY(-3px)
    }

    to {
        transform: rotate(0) translateY(0)
    }
}

@media(max-width: 1199.98px) {
    .automation-navbar-btn {
        background-color:var(--dx-primary)!important
    }

    .app-showcase-btn {
        background-color: var(--dx-primary)!important;
        color: #fff
    }

    .app-showcase-btn span {
        background-color: var(--dx-body-bg)!important;
        color: var(--dx-primary)!important
    }

    .analytics-btn {
        background-color: var(--dx-primary)!important;
        color: #fff!important
    }

    .analytics-btn img {
        filter: invert(1)
    }

    .search-btn,.menu-btn {
        color: #171717!important
    }
}

.automation-navbar-btn .automation-call-img {
    animation: 1.5s linear 0s infinite normal none running phoneRing
}

.social-icon-off {
    transition: .4s ease-in-out
}

.social-icon-off:hover {
    background-color: var(--dx-primary);
    color: #fff!important
}

.digital-footer-section {
    background-image: url(../images/digital-footer-bg.jpg);
    background-size: cover;
    position: relative;
    z-index: 1
}

.digital-footer-section:before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dx-dark);
    opacity: .3;
    z-index: -1
}

.digital-footer-section .digital-footer-subscribe {
    max-width: 30rem;
    width: 100%
}

.digital-footer-section .digital-footer-subscribe input::placeholder {
    color: #ffffffb3
}

.digital-footer-section .digital-footer-links li a {
    padding: 6px 0;
    transition: all .45s cubic-bezier(.23,1,.32,1);
    z-index: 1;
    color: #ffffffb3
}

.digital-footer-section .digital-footer-links li a:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%) scaleX(0);
    width: calc(100% + 20px);
    height: 100%;
    background: #ffffff2c;
    border-radius: 50px;
    transform-origin: left;
    transition: transform .45s cubic-bezier(.23,1,.32,1);
    z-index: -1
}

.digital-footer-section .digital-footer-links li a:hover {
    color: #fff;
    padding-left: 14px
}

.digital-footer-section .digital-footer-links li a:hover:before {
    transform: translateY(-50%) scaleX(1)
}

.digital-footer-section .digital-footer-shape {
    width: 34rem;
    height: 100%
}

.startup-footer .st-footer-social .st-social-icon {
    position: relative;
    overflow: hidden;
    background-color: var(--dx-light);
    transition: color .3s ease;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.startup-footer .st-footer-social .st-social-icon i {
    background: linear-gradient(to left,#2e0f53,var(--dx-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all .3s ease;
    z-index: 1;
    position: relative;
    font-size: 22px
}

.startup-footer .st-footer-social .st-social-icon:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left,#2e0f53,var(--dx-primary));
    border-radius: inherit;
    transform: scale(0);
    transition: transform .35s ease;
    z-index: 0
}

.startup-footer .st-footer-social .st-social-icon:hover i {
    -webkit-text-fill-color: #fff;
    color: #fff;
    transform: scale(1.2)
}

.startup-footer .st-footer-social .st-social-icon:hover:after {
    transform: scale(1)
}

.startup-footer .st-footer-link {
    position: relative;
    display: block;
    color: var(--dx-secondary-color)
}

.startup-footer .st-footer-link:before {
    content: "[";
    margin-right: 1px;
    transform: translate(20px);
    display: inline-block;
    opacity: 0;
    transition: transform .3s,opacity .2s;
    color: #5c3e94
}

.startup-footer .st-footer-link:after {
    content: "]";
    display: inline-block;
    opacity: 0;
    transition: transform .3s,opacity .2s;
    margin-left: 1px;
    transform: translate(-20px);
    color: #5c3e94
}

.startup-footer .st-footer-link:hover {
    color: #5c3e94
}

.startup-footer .st-footer-link:hover:before {
    opacity: 1;
    transform: translate(0)
}

.startup-footer .st-footer-link:hover:after {
    opacity: 1;
    transform: translate(0)
}

.startup-footer .st-footer-copyright .st-footer-copyright-link {
    transition: .5s ease-in-out
}

.startup-footer .st-footer-copyright .st-footer-copyright-link:hover {
    color: #fff!important
}

.automation-footer-section .border-end-md {
    border-color: var(--dx-gray-700)!important
}

.automation-footer-section .automation-footer-title {
    position: relative;
    display: inline-block;
    padding-bottom: 10px
}

.automation-footer-section .automation-footer-title:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#5C3E94,transparent);
    box-shadow: 0 0 14px #7e56da99
}

.automation-footer-section .automation-footer-big-text {
    font-size: 18rem;
    opacity: .2;
    line-height: .7
}

.automation-footer-links li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all .35s ease;
    color: #ffffffb3
}

.automation-footer-links li a:before {
    content: "";
    width: 0;
    height: 1px;
    background: var(--dx-primary);
    transition: width .35s ease
}

.automation-footer-links li a:hover {
    color: #fff;
    transform: translate(6px)
}

.automation-footer-links li a:hover:before {
    width: 18px
}

.app-footer-section .app-footer-big-text {
    opacity: .7;
    line-height: .7;
    font-size: 27rem;
    background: linear-gradient(180deg,#fffc,#fff3 49.52%,#fff0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: -23px
}

.app-footer-section .app-footer-link-heading {
    position: relative;
    display: inline-block
}

.app-footer-section .app-footer-link-heading:before {
    content: "";
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--dx-primary);
    width: 100%
}

.app-footer-section .app-footer-link-heading:after {
    content: "";
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 6px;
    background-color: var(--dx-body-bg);
    animation: slide-horizontal 15s linear infinite
}

@keyframes slide-horizontal {
    50% {
        left: calc(100% - 8px)
    }
}

.app-footer-section .app-footer-link span {
    color: var(--dx-secondary-color);
    transition: .4s ease-in-out;
    transition: transform .35s cubic-bezier(.5,.5,.3,1)
}

.app-footer-section .app-footer-link:before,.app-footer-section .app-footer-link:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none
}

.app-footer-section .app-footer-link:before {
    height: 1px;
    bottom: 2px;
    background: var(--dx-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s cubic-bezier(.5,.5,.3,1)
}

.app-footer-section .app-footer-link:after {
    content: attr(data-text);
    top: 0;
    transform: translate(120%);
    transition: transform .35s cubic-bezier(.5,.5,.3,1);
    white-space: nowrap;
    color: var(--dx-primary)
}

.app-footer-section .app-footer-link:hover span {
    transform: translate(-120%)
}

.app-footer-section .app-footer-link:hover:before {
    transform: scaleX(1);
    transform-origin: left
}

.app-footer-section .app-footer-link:hover:after {
    transform: translate(0)
}

.app-footer-section .app-footer-newsletter-input {
    outline: none
}

.app-footer-section .app-footer-submit-btn {
    transition: .3s
}

.app-footer-section .app-footer-submit-btn:hover {
    transform: translate(4px)
}

.app-footer-section .app-footer-social-link {
    padding: 0 14px;
    color: var(--dx-secondary-color);
    transition: all .3s ease
}

.app-footer-section .app-footer-social-link:after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: -4px;
    width: 0%;
    height: 1px;
    background: var(--dx-primary);
    transition: .3s ease
}

.app-footer-section .app-footer-social-link:hover {
    color: var(--dx-primary);
    transform: translateY(-2px)
}

.app-footer-section .app-footer-social-link:hover:after {
    width: calc(100% - 20px)
}

@media(max-width: 1199px) {
    .app-footer-section .app-footer-big-text {
        font-size:17rem
    }
}

@media(min-width: 1200px)and (max-width:1535px) {
    .app-footer-section .app-footer-big-text {
        font-size:21rem
    }
}

.analytics-footer .analytics-footer-card .analytics-footer-brand .analytics-footer-badge {
    letter-spacing: 2px
}

.analytics-footer .analytics-footer-card .analytics-footer-marquee .analytics-footer-links a span {
    display: inline-block;
    transition: transform .4s cubic-bezier(.68,-.55,.27,1.55),color .3s ease
}

.analytics-footer .analytics-footer-card .analytics-footer-marquee .analytics-footer-links a:hover {
    color: #f25912!important
}

.analytics-footer .analytics-footer-card .analytics-footer-marquee .analytics-footer-links a:hover span:nth-child(odd) {
    transform: translateY(-4px) rotate(-4deg)
}

.analytics-footer .analytics-footer-card .analytics-footer-marquee .analytics-footer-links a:hover span:nth-child(2n) {
    transform: translateY(4px) rotate(4deg)
}

.analytics-footer .analytics-footer-card .analytics-footer-socials a {
    background-color: rgba(var(--dx-light-rgb),.1);
    color: #fff;
    transition: all .35s ease
}

.analytics-footer .analytics-footer-card .analytics-footer-socials a:hover {
    background: #f25912;
    transform: scale(1.15) rotate(8deg)
}

.crm-footer-section .crm-footer-blur-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1
}

.crm-footer-section .crm-footer-blur-wrapper .crm-footer-blur-left {
    position: absolute;
    bottom: -100px;
    left: -150px;
    width: 400px;
    height: 400px;
    background: #5c3e94;
    filter: blur(200px);
    border-radius: 60% 40% 50% 50%;
    opacity: .35;
    transform: rotate(-20deg)
}

.crm-footer-section .crm-footer-blur-wrapper .crm-footer-blur-right {
    position: absolute;
    bottom: -80px;
    right: -120px;
    width: 350px;
    height: 350px;
    background: #16a34a;
    filter: blur(180px);
    border-radius: 40% 60% 60% 40%;
    opacity: .3;
    transform: rotate(15deg)
}

.crm-footer-section .crm-footer-blur-wrapper .crm-footer-blur-center {
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translate(-50%) rotate(10deg);
    width: 450px;
    height: 450px;
    background: #f25912;
    filter: blur(220px);
    border-radius: 50% 50% 60% 40%;
    opacity: .25
}

.crm-footer-section .crm-footer-link,.crm-footer-section .crm-footer-social {
    position: relative;
    color: var(--dx-secondary-color);
    transition: .3s ease-in-out
}

.crm-footer-section .crm-footer-link:before,.crm-footer-section .crm-footer-social:before {
    content: "";
    background: var(--dx-primary);
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 1px;
    top: 100%;
    left: 0;
    transform-origin: 100% 50%;
    transform: scale3d(0,1,1);
    transition: transform .3s cubic-bezier(.7,0,.2,1)
}

.crm-footer-section .crm-footer-link:after,.crm-footer-section .crm-footer-social:after {
    content: "";
    pointer-events: none;
    background: var(--dx-primary);
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: calc(100% + 4px);
    transform-origin: 0% 50%;
    transform: scale3d(0,1,1);
    transition: transform .3s cubic-bezier(.7,0,.2,1)
}

.crm-footer-section .crm-footer-link:hover,.crm-footer-section .crm-footer-social:hover {
    color: var(--dx-primary)!important
}

.crm-footer-section .crm-footer-link:hover:before,.crm-footer-section .crm-footer-social:hover:before {
    transform-origin: 0% 50%;
    transform: scaleZ(1)
}

.crm-footer-section .crm-footer-link:hover:after,.crm-footer-section .crm-footer-social:hover:after {
    transform-origin: 100% 50%;
    transform: scaleZ(1)
}

.product-footer-link {
    white-space: nowrap;
    color: var(--dx-secondary-color)
}

.product-footer-link:before {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--dx-primary);
    transform-origin: 100% 50%;
    transform: scaleX(0) translateY(-50%);
    transition: transform .3s cubic-bezier(.4,1,.8,1)
}

.product-footer-link span {
    display: inline-block;
    transition: transform .3s cubic-bezier(.4,1,.8,1)
}

.product-footer-link:hover:before {
    transform-origin: 0% 50%;
    transform: scaleX(1) translateY(-50%)
}

.product-footer-link:hover span {
    transform: scale(1.1);
    color: var(--dx-primary)
}

.saas-v1-footer-section .saas-v1-footer-logo {
    font-size: 18rem;
    line-height: .8
}

.saas-v1-footer-section .saas-v1-footer-newsletter .saas-v1-footer-corner {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(var(--dx-primary-rgb),.9);
    pointer-events: none
}

.saas-v1-footer-section .saas-v1-footer-newsletter .corner-1 {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none
}

.saas-v1-footer-section .saas-v1-footer-newsletter .corner-2 {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none
}

.saas-v1-footer-section .saas-v1-footer-newsletter .corner-3 {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none
}

.saas-v1-footer-section .saas-v1-footer-newsletter .corner-4 {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none
}

.saas-v1-footer-section .saas-v1-footer-link {
    color: #ffffffb3;
    transition: all .35s ease
}

.saas-v1-footer-section .saas-v1-footer-link:before {
    content: "";
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--dx-border-color);
    margin-right: 12px;
    transform: rotate(45deg) scale(.8);
    transition: all .35s ease;
    border-radius: 2px
}

.saas-v1-footer-section .saas-v1-footer-link:hover {
    color: #fff
}

.saas-v1-footer-section .saas-v1-footer-link:hover:before {
    background: #fff;
    border-color: #fff;
    transform: rotate(135deg) scale(1.1)
}

@media(min-width: 992px) {
    .saas-v1-footer-section .border-right {
        border-right:1px solid;
        border-image-slice: 1;
        border-image-source: linear-gradient(var(--dx-gray-600),var(--dx-gray-600),var(--dx-gray-900))
    }

    .saas-v1-footer-section .border-left {
        border-left: 1px solid;
        border-image-slice: 1;
        border-image-source: linear-gradient(var(--dx-gray-600),var(--dx-gray-600),var(--dx-gray-900))
    }
}

@media(max-width: 767px) {
    .saas-v1-footer-section .saas-v1-footer-logo {
        font-size:5rem
    }
}

@media(min-width: 768px)and (max-width:1198px) {
    .saas-v1-footer-section .saas-v1-footer-logo {
        font-size:12rem
    }
}

@media(min-width: 1200px)and (max-width:1535px) {
    .saas-v1-footer-section .saas-v1-footer-logo {
        font-size:15rem
    }
}

.saas-v2-footer-section .saas-v2-footer-link {
    color: #ffffffb3;
    transition: .5s ease-in-out
}

.saas-v2-footer-section .saas-v2-footer-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 120%;
    height: 100%;
    background: linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
    transition: .6s ease
}

.saas-v2-footer-section .saas-v2-footer-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: #ffffff4d;
    transition: .3s ease
}

.saas-v2-footer-section .saas-v2-footer-link:hover {
    color: #fff
}

.saas-v2-footer-section .saas-v2-footer-link:hover:before {
    left: 120%
}

.saas-v2-footer-section .saas-v2-footer-link:hover:after {
    background-color: #fff
}

.saas-v2-footer-section .saas-v2-footer-social {
    color: #ffffffb3;
    transition: .3s ease-in-out
}

.saas-v2-footer-section .saas-v2-footer-social:hover {
    color: #fff
}

.saas-v2-footer-section .saas-v2-footer-top-icon1 {
    bottom: -13px;
    left: 1px
}

.saas-v2-footer-section .saas-v2-footer-top-icon2 {
    bottom: -13px;
    right: 1px
}

.saas-v2-footer-section .saas-v2-footer-svg {
    bottom: -44px;
    right: -37px;
    animation: spin 15s linear infinite
}

.saas-v2-footer-section .saas-v2-footer-center-icon1 {
    bottom: -13px;
    left: -10px
}

.saas-v2-footer-section .saas-v2-footer-center-icon2 {
    bottom: -13px;
    right: -10px
}

.saas-v2-footer-section .saas-v2-footer-center-icon3 {
    top: -13px;
    left: -10px
}

.saas-v2-footer-section .saas-v2-footer-center-icon4 {
    top: -13px;
    right: -10px
}

.saas-v2-footer-section .saas-v2-footer-bottom-icon1 {
    top: -13px;
    left: 1px
}

.saas-v2-footer-section .saas-v2-footer-bottom-icon2 {
    top: -13px;
    right: 1px
}

.project-footer-section .project-social-icon {
    transition: .4s ease;
    isolation: isolate
}

.project-footer-section .project-social-icon i {
    position: relative;
    z-index: 2;
    transition: .4s ease
}

.project-footer-section .project-social-icon:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dx-primary);
    transform: translateY(100%);
    transition: .4s ease;
    border-radius: inherit;
    z-index: 1
}

.project-footer-section .project-social-icon:hover {
    border-color: var(--dx-primary)!important;
    box-shadow: 0 10px 25px rgba(var(--bs-primary-rgb),.25)
}

.project-footer-section .project-social-icon:hover:before {
    transform: translateY(0)
}

.project-footer-section .project-social-icon:hover i {
    color: #fff;
    transform: rotateY(360deg)
}

.project-footer-section .project-footer-link {
    transition: .35s ease;
    color: var(--dx-secondary-color)
}

.project-footer-section .project-footer-link:before {
    content: "";
    width: 6px;
    height: 6px;
    background: #5c3e94;
    border-radius: 50%;
    transform: scale(0);
    transition: .3s ease
}

.project-footer-section .project-footer-link:hover {
    color: #5c3e94;
    transform: translate(6px)
}

.project-footer-section .project-footer-link:hover:before {
    transform: scale(1)
}

.healthcare-footer-section .healthcare-footer-content {
    padding: 250px 0 100px
}

.healthcare-footer-section .healthcare-footer-content .healthcare-footer-link {
    color: #ffffffb3;
    transition: .3s ease-in-out;
    display: inline-block
}

.healthcare-footer-section .healthcare-footer-content .healthcare-footer-link:hover {
    transform: translate(6px);
    color: #fff
}

.healthcare-footer-section .healthcare-footer-content .healthcare-footer-social {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: .4s ease-in-out
}

.healthcare-footer-section .healthcare-footer-content .healthcare-footer-social:hover {
    background-color: #fff!important;
    color: #5c3e94!important;
    transform: scale(1.1)
}

.healthcare-footer-section .healthcare-footer-shape1 {
    left: 14.5%;
    transform: rotate(90deg);
    z-index: 11;
    top: 0%
}

.healthcare-footer-section .healthcare-footer-shape2 {
    right: 14.5%;
    transform: rotate(360deg);
    z-index: 11;
    top: 0%
}

@media(max-width: 767px) {
    .healthcare-footer-section .healthcare-footer-content {
        padding:50px 0
    }
}

@media(min-width: 768px)and (max-width:991px) {
    .healthcare-footer-section .healthcare-footer-content {
        padding:100px 0
    }
}

@media(min-width: 992px)and (max-width:1199px) {
    .healthcare-footer-section .healthcare-footer-shape1 {
        left:7.5%
    }

    .healthcare-footer-section .healthcare-footer-shape2 {
        right: 7.5%
    }
}

@media(min-width: 1200px)and (max-width:1535px) {
    .healthcare-footer-section .healthcare-footer-shape1 {
        left:12.5%
    }

    .healthcare-footer-section .healthcare-footer-shape2 {
        right: 12.5%
    }
}

.blog-footer-section .blog-footer-social-icon {
    transition: .4s ease-in-out
}

.blog-footer-section .blog-footer-social-icon:hover {
    background-color: var(--dx-primary)!important;
    color: #fff!important
}

.blog-footer-link a {
    position: relative;
    display: inline-block;
    color: var(--dx-secondary-color)
}

.blog-footer-link a:before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--dx-primary);
    width: 0%;
    overflow: hidden;
    white-space: nowrap;
    transition: .4s ease
}

.blog-footer-link a:hover:before {
    width: 100%
}

.about-v1-footer-section .about-v1-footer-title {
    position: relative
}

.about-v1-footer-section .about-v1-footer-title:before {
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    position: absolute;
    background: var(--dx-border-color)
}

.about-v1-footer-section .about-v1-footer-title:after {
    content: "";
    left: 0;
    bottom: 0;
    width: 28px;
    height: 1px;
    position: absolute;
    background-color: var(--dx-primary)
}

.custom-footer-section .custom-footer-text {
    font-size: 8rem;
    line-height: .8
}

.custom-footer-section form ::placeholder {
    color: #ffffffb3
}

@media(min-width: 1200px) {
    .custom-footer-section .custom-footer-info {
        border-left:1px solid rgba(var(--dx-white-rgb),var(--dx-border-opacity));
        border-right: 1px solid rgba(var(--dx-white-rgb),var(--dx-border-opacity))
    }
}

.custom-footer-section .custom-footer-link {
    color: #ffffffb3;
    transition: .5s ease-in-out;
    position: relative;
    padding: 4px 0;
    display: inline-block
}

.custom-footer-section .custom-footer-link:before,.custom-footer-section .custom-footer-link:after {
    content: "";
    position: absolute;
    left: 0;
    width: 0%;
    height: 1px;
    background: #fff;
    transition: .35s ease
}

.custom-footer-section .custom-footer-link:before {
    top: 0
}

.custom-footer-section .custom-footer-link:after {
    bottom: 0
}

.custom-footer-section .custom-footer-link:hover {
    color: #fff;
    letter-spacing: .5px
}

.custom-footer-section .custom-footer-link:hover:before,.custom-footer-section .custom-footer-link:hover:after {
    width: 100%
}

.custom-footer-section .custom-footer-social {
    color: #fff;
    transition: .4s ease-in-out
}

.custom-footer-section .custom-footer-bell {
    animation: 2s ease-in-out 0s infinite normal none running bell
}

@keyframes bell {
    0% {
        transform: rotate(0)
    }

    15% {
        transform: rotate(20deg)
    }

    30% {
        transform: rotate(-15deg)
    }

    45% {
        transform: rotate(10deg)
    }

    60% {
        transform: rotate(-6deg)
    }

    75% {
        transform: rotate(3deg)
    }

    to {
        transform: rotate(0)
    }
}

@media(max-width: 767px) {
    .custom-footer-section .custom-footer-text {
        font-size:3rem
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .custom-footer-section .custom-footer-text {
        font-size:6rem
    }
}

.conference-footer-link {
    display: inline-block;
    transition: .3s
}

.conference-footer-link:hover {
    transform: translateY(-3px) scale(1.03);
    color: #fff!important;
    text-shadow: 0 8px 20px rgba(59,130,246,.25),0 2px 6px rgba(0,0,0,.4)
}

.conference-social-icons .conference-social-btn {
    background: #ffffff14;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: all .4s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.conference-social-icons .conference-social-btn i {
    position: relative;
    z-index: 1;
    transition: .4s ease
}

.conference-social-icons .conference-social-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dx-primary);
    transform: scale(0);
    border-radius: 50%;
    transition: .4s ease;
    z-index: 0
}

.conference-social-icons .conference-social-btn:hover {
    transform: translateY(-6px) rotate(8deg)
}

.conference-social-icons .conference-social-btn:hover:before {
    transform: scale(1)
}

.btn-close:after {
    content: ""!important;
    font-size: 20px;
    line-height: 15px;
    color: var(--dx-btn-close-color);
    font-family: remixicon!important
}

.alert-live-backdrop {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.alert-dismissible .btn-close:after {
    color: var(--dx-alert-color)
}

.alert-icon {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 4rem
}

.alert-icon .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    border-right: 1px solid var(--dx-alert-border-color)
}

.icon-alert {
    border-color: var(--dx-border-color)
}

.icon-alert .icon {
    display: flex;
    align-items: center;
    justify-content: center
}

.primary-gradient {
    background: linear-gradient(to right,var(--dx-primary),var(--dx-primary-text-emphasis))
}

.secondary-gradient {
    background: linear-gradient(to right,#a855f7,#7e22ce)
}

.success-gradient {
    background: linear-gradient(to right,#358ffc,#22c55e)
}

.danger-gradient {
    background: linear-gradient(to right,#152956,#450a0a)
}

#liveAlert {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translate(-50%);
    z-index: 1030
}

.basic-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--dx-secondary-bg);
    position: absolute;
    top: -1.25rem;
    left: 50%;
    transform: translate(-50%)
}

.breadcrumb-item {
    font-weight: 500
}

.breadcrumb-item a {
    color: var(--dx-secondary-color)
}

:is(.double-arrow,.single-arrow,.dash-arrow) .breadcrumb-item+.breadcrumb-item:before {
    float: left;
    font-family: RemixIcon;
    color: var(--dx-breadcrumb-divider-color)
}

.double-arrow .breadcrumb-item+.breadcrumb-item:before {
    content: ""
}

.single-arrow .breadcrumb-item+.breadcrumb-item:before {
    content: ""
}

.dash-arrow .breadcrumb-item+.breadcrumb-item:before {
    content: ""
}

.btn-navigation {
    box-shadow: var(--dx-box-shadow);
    border: 1px solid var(--dx-border-color);
    background-color: var(--dx-secondary-bg);
    position: relative;
    display: flex;
    border-radius: .625rem
}

.btn-navigation a {
    color: var(--dx-secondary-color);
    padding: 1.5rem 1rem;
    position: relative;
    flex-grow: 1;
    text-align: center;
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .btn-navigation a {
        transition: none
    }
}

.navigation-bottom-animation a:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50rem;
    transform: translate(-50%);
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .navigation-bottom-animation a:before {
        transition: none
    }
}

.navigation-bottom-animation a:is(:hover,.active):before {
    bottom: 10px
}

.navigation-border-animation a:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: .125rem;
    transform: translate(-50%);
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .navigation-border-animation a:before {
        transition: none
    }
}

.navigation-border-animation a:is(:hover,.active):before {
    width: 100%
}

.navigation-border-animation.top-border a:before {
    position: absolute;
    top: 0;
    left: 50%
}

.notification {
    display: inline-flex;
    height: 22px;
    width: 22px;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    font-size: .6875rem;
    padding: 0;
    border: 2px solid var(--dx-secondary-bg)
}

.notification.top-end {
    position: absolute;
    top: -8px;
    right: -8px
}

.notification.top-start {
    position: absolute;
    top: -8px;
    left: -8px
}

.notification.bottom-start {
    position: absolute;
    bottom: -8px;
    left: -8px
}

.notification.bottom-end {
    position: absolute;
    right: -8px;
    bottom: -8px
}

.notification.inside {
    position: static
}

.badge-square {
    display: inline-flex;
    height: 22px;
    width: 22px;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    font-size: .6875rem;
    padding: 0
}

.spin {
    height: 2rem;
    width: 2rem;
    border-radius: 50rem
}

.modern-spinner {
    border: 2px solid;
    border-left-color: transparent!important;
    border-right-color: transparent!important
}

.gradient-loader .bg-gradient {
    border-color: var(--dx-primary) var(--dx-success) var(--dx-warning) var(--dx-danger)!important
}

.gradient-loader .bg-gradient2 {
    border-color: var(--dx-info) var(--dx-pink) var(--dx-secondary) var(--dx-primary)!important
}

.gradient-loader .bg-sub-gradient {
    border-color: var(--dx-primary-bg-subtle) var(--dx-success-bg-subtle) var(--dx-warning-bg-subtle) var(--dx-danger-bg-subtle)!important
}

.animation-button .circle {
    margin-top: -.25rem;
    margin-right: -.25rem
}

.animation-button .loader-button-animation {
    position: absolute;
    top: -.2188rem;
    right: -.2188rem
}

.animate-bounce {
    border: 2px solid var(--dx-border-color)
}

.accordion.accordion-boxed .accordion-item {
    border: none
}

.accordion.accordion-boxed .accordion-item:not(:last-child) {
    margin-bottom: calc(var(--dx-spacer) * .7)
}

.accordion.accordion-boxed .accordion-button {
    border: 1px solid var(--dx-accordion-border-color);
    border-radius: .625rem
}

.accordion .accordion-button {
    padding-right: 1.6rem
}

.accordion .accordion-button:after {
    content: "+";
    font-size: 1.5rem;
    color: #5c3e94;
    margin-left: auto;
    transition: transform .3s ease
}

.accordion .accordion-button[aria-expanded=true]:after {
    content: "−"
}

.modal {
    --dx-modal-box-shadow: 0 10px 15px -3px rgba(229, 231, 235, .3), 0 4px 6px -4px rgba(229, 231, 235, .3)
}

.modal-footer {
    padding: var(--dx-spacer)
}

.modal-dialog-start {
    margin-left: var(--dx-spacer)
}

.modal-dialog-end {
    margin-right: var(--dx-spacer)
}

.modal-dialog-bottom-end {
    position: absolute;
    right: var(--dx-spacer);
    bottom: 0
}

.modal-dialog-bottom-start {
    position: absolute;
    left: var(--dx-spacer);
    bottom: 0
}

.modal-xs {
    width: 20rem
}

.modal-2xl {
    max-width: 64rem
}

@media(max-width: 1024px) {
    .modal-2xl {
        max-width:61.5rem
    }
}

@media(max-width: 768px) {
    .modal-2xl {
        max-width:45.5rem
    }
}

@media(max-width: 575.98px) {
    .modal-xs,.modal-sm,.modal-lg,.modal-xl,.modal-2xl {
        max-width:24.0625rem;
        margin-inline:auto}
}

.progress-bar.progress-gradient {
    background: var(--dx-progress-bar-bg)
}

.progress-bar.progress-gradient-primary {
    --dx-progress-bar-bg: linear-gradient(90deg, var(--dx-primary), var(--dx-success))
}

.progress-bar.progress-gradient-info {
    --dx-progress-bar-bg: linear-gradient(90deg, var(--dx-primary), var(--dx-info-text-emphasis), var(--dx-info))
}

.progress-bar.progress-gradient-indigo {
    --dx-progress-bar-bg: linear-gradient(90deg, var(--dx-indigo), var(--dx-secondary))
}

.progress-1 {
    height: .5rem
}

.progress-2 {
    height: .625rem
}

.progress-3 {
    height: .75rem
}

.progress-4 {
    height: 1rem
}

.progress-5 {
    height: 1.25rem
}

.progress-6 {
    height: 1.5rem
}

.progress-7 {
    height: 2rem
}

.progress-circle {
    position: relative;
    display: inline-block
}

.progress-circle svg {
    transform: rotate(-90deg)
}

.progress-circle circle {
    fill: none;
    stroke-linecap: round
}

.progress-circle .progress-bg {
    stroke: var(--dx-tertiary-bg)
}

.progress-circle .progress-fill {
    transition: stroke-dashoffset 1s ease-in-out
}

.progress-circle .progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700
}

.progress-circle .progress-text-inner {
    text-align: center;
    line-height: 1.2
}

.progress-circle .animate-count {
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .progress-circle .animate-count {
        transition: none
    }
}

.offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--dx-offcanvas-border-color)
}

.offcanvas .offcanvas-footer {
    padding: var(--dx-spacer) var(--dx-spacer);
    border-top: 1px solid var(--dx-offcanvas-border-color)
}

.offcanvas.offcanvas-small {
    width: 7rem
}

.offcanvas.offcanvas-large {
    width: 24rem
}

@media(min-width: 576px) {
    .offcanvas.offcanvas-half {
        width:50%
    }
}

.toast-primary {
    --dx-toast-bg: rgba(var(--dx-primary-rgb))
}

.toast-secondary {
    --dx-toast-bg: rgba(var(--dx-secondary-rgb))
}

.toast-success {
    --dx-toast-bg: rgba(var(--dx-success-rgb))
}

.toast-info {
    --dx-toast-bg: rgba(var(--dx-info-rgb))
}

.toast-warning {
    --dx-toast-bg: rgba(var(--dx-warning-rgb))
}

.toast-danger {
    --dx-toast-bg: rgba(var(--dx-danger-rgb))
}

.toast-light {
    --dx-toast-bg: rgba(var(--dx-light-rgb))
}

.toast-dark {
    --dx-toast-bg: rgba(var(--dx-dark-rgb))
}

.toast-pink {
    --dx-toast-bg: rgba(var(--dx-pink-rgb))
}

.toast-orange {
    --dx-toast-bg: rgba(var(--dx-orange-rgb))
}

.toast-indigo {
    --dx-toast-bg: rgba(var(--dx-indigo-rgb))
}

.toast-content {
    --dx-toast-max-width: 24rem;
    --dx-toast-box-shadow: 0 10px 15px -3px #bdbdbd9f, 0 4px 6px -4px #bbbbbb41
}

.basic-gallery img {
    transition: transform 5s ease-in-out
}

.basic-gallery:hover>img {
    transform: scale(1.25)
}

@media(min-width: 992px) {
    .item-4 {
        margin-top:-9rem
    }

    .item-6 {
        margin-top: -7rem
    }

    .item-7 {
        margin-top: -17rem
    }
}

@media(min-width: 768px)and (max-width:992px) {
    .item-3 {
        margin-top:-9rem
    }

    .item-5,.item-7 {
        margin-top: -3rem
    }
}

.timeline {
    display: flex;
    flex-direction: column;
    position: relative;
    list-style: none
}

.timeline.timeline-square>*:after {
    border-radius: .125rem
}

.timeline-basic {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0
}

.timeline-basic .timeline-item {
    position: relative;
    padding-left: 1.25rem;
    padding-bottom: .75rem
}

.timeline-basic .timeline-item:not(:last-child):before {
    content: "";
    position: absolute;
    top: .5rem;
    bottom: -.5rem;
    left: .125rem;
    width: 2px;
    background-color: var(--dx-tertiary-bg)
}

.timeline-basic .timeline-item:after {
    content: "";
    position: absolute;
    top: .5rem;
    left: 0;
    width: .375rem;
    height: .375rem;
    border-radius: 999px;
    background-color: var(--dx-tertiary-bg)
}

.timeline-basic .timeline-item:last-child {
    padding-bottom: 0
}

.timeline-primary .timeline-item.active:after,.timeline-primary .timeline-item.active:before {
    background-color: var(--dx-primary)
}

.timeline-secondary .timeline-item.active:after,.timeline-secondary .timeline-item.active:before {
    background-color: var(--dx-secondary)
}

.timeline-success .timeline-item.active:after,.timeline-success .timeline-item.active:before {
    background-color: var(--dx-success)
}

.timeline-info .timeline-item.active:after,.timeline-info .timeline-item.active:before {
    background-color: var(--dx-info)
}

.timeline-warning .timeline-item.active:after,.timeline-warning .timeline-item.active:before {
    background-color: var(--dx-warning)
}

.timeline-danger .timeline-item.active:after,.timeline-danger .timeline-item.active:before {
    background-color: var(--dx-danger)
}

.timeline-light .timeline-item.active:after,.timeline-light .timeline-item.active:before {
    background-color: var(--dx-light)
}

.timeline-dark .timeline-item.active:after,.timeline-dark .timeline-item.active:before {
    background-color: var(--dx-dark)
}

.timeline-pink .timeline-item.active:after,.timeline-pink .timeline-item.active:before {
    background-color: var(--dx-pink)
}

.timeline-orange .timeline-item.active:after,.timeline-orange .timeline-item.active:before {
    background-color: var(--dx-orange)
}

.timeline-indigo .timeline-item.active:after,.timeline-indigo .timeline-item.active:before {
    background-color: var(--dx-indigo)
}

.changelog-timeline {
    position: relative;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0
}

.changelog-timeline .timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
    display: flex;
    justify-content: center
}

.changelog-timeline .timeline-item:before {
    content: "";
    position: absolute;
    top: .5rem;
    bottom: -.5rem;
    left: 1rem;
    width: .125rem;
    margin: 1.875rem 0 1rem;
    background-color: var(--dx-tertiary-bg)
}

.changelog-timeline .timeline-item:last-child {
    padding-bottom: 0
}

.changelog-timeline .timeline-item:last-child:before {
    display: none
}

.changelog-timeline .timeline-item .dot {
    position: absolute;
    height: 6px;
    width: 6px;
    top: 50%;
    transform: translateY(-50%)
}

.timeline-modern {
    list-style: none
}

.timeline-modern .timeline-item {
    position: relative
}

.timeline-modern .timeline-item:before {
    content: "";
    position: absolute;
    top: -1.3rem;
    bottom: -.5rem;
    left: 16px;
    width: .0625rem;
    background-color: var(--dx-tertiary-bg);
    z-index: -1
}

.timeline-modern .timeline-item:last-child:before {
    content: none
}

.order-timeline {
    position: relative
}

.order-timeline .timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-left: 2rem
}

.order-timeline .timeline-item:not(:last-child):before {
    content: "";
    position: absolute;
    top: .5rem;
    bottom: -.5rem;
    left: .75rem;
    width: 2px;
    background-color: var(--dx-tertiary-bg);
    z-index: 1
}

.order-timeline .timeline-item:not(:last-child) {
    padding-bottom: 1.5rem
}

.order-timeline .timeline-item.completed .timeline-marker {
    background-color: var(--dx-success)
}

.order-timeline .timeline-item.completed:before {
    background-color: var(--dx-success)
}

.order-timeline .timeline-item.active .timeline-marker {
    background-color: var(--dx-primary)
}

.order-timeline .timeline-item.active:before {
    background-color: var(--dx-primary)
}

.order-timeline .timeline-item.pending .timeline-marker {
    background-color: var(--dx-tertiary-bg);
    color: var(--dx-tertiary-color)
}

.order-timeline .timeline-marker {
    top: .25rem;
    left: 0;
    position: absolute;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    border: 2px solid var(--dx-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    flex-shrink: 0;
    font-size: .75rem;
    color: #fff
}

.order-timeline .timeline-content {
    flex: 1
}

.shipment-timeline {
    position: relative
}

.shipment-timeline .timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-left: 2rem;
    margin-bottom: 1.5rem
}

.shipment-timeline .timeline-item:not(:last-child):before {
    content: "";
    position: absolute;
    top: .5rem;
    bottom: -.5rem;
    left: .75rem;
    width: 2px;
    background-color: var(--dx-tertiary-bg);
    z-index: 1
}

.shipment-timeline .timeline-item:last-child {
    margin-bottom: 0
}

.shipment-timeline .timeline-item.completed .timeline-marker {
    background-color: var(--dx-success);
    border-color: var(--dx-success)
}

.shipment-timeline .timeline-item.completed:before {
    background-color: var(--dx-success)
}

.shipment-timeline .timeline-item.active .timeline-marker {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary)
}

.shipment-timeline .timeline-item.active:before {
    background-color: var(--dx-primary)
}

.shipment-timeline .timeline-item.pending .timeline-marker {
    background-color: var(--dx-light);
    border-color: var(--dx-tertiary-bg);
    color: var(--dx-tertiary-color)
}

.shipment-timeline .timeline-marker {
    top: .25rem;
    left: 0;
    position: absolute;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    border: 2px solid var(--dx-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    flex-shrink: 0;
    font-size: .75rem;
    color: #fff;
    transition: all .3s ease
}

.shipment-timeline .timeline-content {
    flex: 1;
    padding-left: .5rem
}

.shipment-timeline .timeline-content .timeline-title {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .25rem;
    color: var(--dx-body-color)
}

.shipment-timeline .timeline-content p {
    font-size: .8125rem;
    margin-bottom: .25rem
}

.shipment-timeline .timeline-content small {
    font-size: .75rem
}

.pagination {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap
}

.pagination .page-item:is(:first-child,:last-child) .page-link {
    display: flex;
    align-items: center;
    gap: .25rem;
    width: auto;
    padding: var(--dx-pagination-padding-y) var(--dx-pagination-padding-x)
}

.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--dx-border-radius);
    padding: 0
}

.pagination.pagination-rounded .page-link {
    border-radius: 50rem
}

.pagination.pagination-modern {
    gap: 0
}

.pagination.pagination-modern .page-item .page-link {
    width: auto;
    padding: var(--dx-pagination-padding-y) var(--dx-pagination-padding-x);
    border-radius: 0;
    gap: .25rem
}

.pagination.pagination-modern .page-item:is(:first-child,:last-child) .page-link {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

.pagination.pagination-modern .page-item:first-child .page-link {
    border-top-left-radius: var(--dx-pagination-border-radius);
    border-bottom-left-radius: var(--dx-pagination-border-radius)
}

.pagination.pagination-modern .page-item:last-child .page-link {
    border-top-right-radius: var(--dx-pagination-border-radius);
    border-bottom-right-radius: var(--dx-pagination-border-radius)
}

.pagination.pagination-modern.pagination-rounded .page-item:first-child .page-link {
    border-top-left-radius: 50rem;
    border-bottom-left-radius: 50rem
}

.pagination.pagination-modern.pagination-rounded .page-item:last-child .page-link {
    border-top-right-radius: 50rem;
    border-bottom-right-radius: 50rem
}

.pagination.pagination-flush .page-item .page-link {
    border: 0
}

.pagination.pagination-xs .page-item .page-link {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .75rem;
    line-height: 1rem
}

.pagination.pagination-xs .page-item:is(:first-child,:last-child) .page-link {
    width: auto;
    height: 1.5rem;
    padding: .125rem .5rem
}

.pagination.pagination-sm .page-item .page-link {
    width: 1.75rem;
    height: 1.75rem;
    font-size: .75rem;
    line-height: 1rem
}

.pagination.pagination-sm .page-item:is(:first-child,:last-child) .page-link {
    width: auto;
    height: 1.75rem
}

.pagination.pagination-md .page-item .page-link {
    width: 2rem;
    height: 2rem
}

.pagination.pagination-md .page-item:is(:first-child,:last-child) .page-link {
    width: auto;
    height: 2rem
}

.pagination.pagination-lg .page-item .page-link {
    width: 2.5rem;
    height: 2.5rem;
    font-size: .9375rem
}

.pagination.pagination-lg .page-item:is(:first-child,:last-child) .page-link {
    width: auto;
    height: 2.5rem
}

.link {
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .link {
        transition: none
    }
}

.link.link-custom {
    color: var(--dx-body-color)
}

.link.link-custom:hover {
    color: var(--dx-primary)
}

.list-borderless {
    --dx-list-group-border-width: none;
    --dx-list-group-item-padding-x: 0px;
    --dx-list-group-item-padding-y: 4px
}

.list-arrow {
    list-style-image: url(../images/others/arrow-right.png)
}

.list-boxed .list-group-item {
    border: var(--dx-list-group-border-width) solid var(--dx-list-group-border-color);
    border-radius: .625rem
}

.list-boxed .list-group-item:not(:last-child) {
    margin-bottom: .5rem
}

.list-group-primary li::marker,.list-group-primary li:before {
    color: var(--dx-primary)
}

.list-group-secondary li::marker,.list-group-secondary li:before {
    color: var(--dx-secondary)
}

.list-group-success li::marker,.list-group-success li:before {
    color: var(--dx-success)
}

.list-group-info li::marker,.list-group-info li:before {
    color: var(--dx-info)
}

.list-group-warning li::marker,.list-group-warning li:before {
    color: var(--dx-warning)
}

.list-group-danger li::marker,.list-group-danger li:before {
    color: var(--dx-danger)
}

.list-group-light li::marker,.list-group-light li:before {
    color: var(--dx-light)
}

.list-group-dark li::marker,.list-group-dark li:before {
    color: var(--dx-dark)
}

.list-group-pink li::marker,.list-group-pink li:before {
    color: var(--dx-pink)
}

.list-group-orange li::marker,.list-group-orange li:before {
    color: var(--dx-orange)
}

.list-group-indigo li::marker,.list-group-indigo li:before {
    color: var(--dx-indigo)
}

.nav-underline .nav-link {
    padding: .5rem 1rem;
    position: relative;
    border: 0
}

.nav-underline .nav-link:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    height: 1px;
    width: 0px;
    border-radius: 50rem;
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .nav-underline .nav-link:after {
        transition: none
    }
}

.nav-underline .nav-link:after {
    background-color: var(--dx-nav-underline-link-active-color)
}

.nav-underline .nav-link:is(:hover,.active):after {
    width: 100%
}

.nav-underline .nav-link.active {
    font-weight: 500
}

.tabs-animation .nav-link {
    position: relative;
    overflow: hidden;
    height: 2.75rem;
    text-align: center;
    width: 8rem
}

.tabs-animation .nav-link .icon {
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .tabs-animation .nav-link .icon {
        transition: none
    }
}

.tabs-animation .nav-link .icon {
    margin-inline:auto;display: inline-block;
    width: 1rem;
    height: 1rem
}

.tabs-animation .nav-link .content {
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .tabs-animation .nav-link .content {
        transition: none
    }
}

.tabs-animation .nav-link .content {
    display: block;
    transform: translateY(-3.5rem)
}

.tabs-animation .nav-link:hover .content {
    transform: translateY(-1.1rem)
}

.tabs-animation .nav-link:hover .icon {
    transform: translateY(2.5rem)
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shineMove {
    0% {
        left: -120%
    }

    to {
        left: 120%
    }
}

@keyframes waveMove {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@keyframes sparklePulse {
    0% {
        transform: scale(1);
        opacity: .8;
        filter: drop-shadow(0 0 0 rgba(126,86,218,0))
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
        filter: drop-shadow(0 0 12px rgba(126,86,218,.6))
    }

    to {
        transform: scale(1);
        opacity: .8;
        filter: drop-shadow(0 0 0 rgba(126,86,218,0))
    }
}

@keyframes codeLineAnimation {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes bgwaves {
    0% {
        transform: translate(-50%,-50%) scale(1);
        opacity: .7
    }

    to {
        transform: translate(-50%,-50%) scale(2.5);
        opacity: 0
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes moveGlow {
    0% {
        offset-distance: 0%
    }

    to {
        offset-distance: 100%
    }
}

@keyframes floatTop {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes floatBottom {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(20px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes floatLeft {
    0% {
        transform: translate(0)
    }

    50% {
        transform: translate(-20px)
    }

    to {
        transform: translate(0)
    }
}

@keyframes rotate {
    0% {
        transform: translate(0)
    }

    50% {
        transform: translate(20px)
    }

    to {
        transform: translate(0)
    }
}

:is(.animate-dot,.animate-bounce) {
    animation: bounce 1s infinite
}

:is(.animate-dot,.animate-bounce).delay-150 {
    animation-delay: -.3s
}

:is(.animate-dot,.animate-bounce).delay-300 {
    animation-delay: -.15s
}

@keyframes bounce {
    0%,to {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(.8,0,1,1)
    }

    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0,0,.2,1)
    }
}

@keyframes wobble {
    0% {
        transform: translateZ(0)
    }

    15% {
        transform: translate3d(-25%,0,0) rotate(-5deg)
    }

    30% {
        transform: translate3d(20%,0,0) rotate(3deg)
    }

    45% {
        transform: translate3d(-15%,0,0) rotate(-3deg)
    }

    60% {
        transform: translate3d(10%,0,0) rotate(2deg)
    }

    75% {
        transform: translate3d(-5%,0,0) rotate(-1deg)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes badgeFloat {
    0% {
        transform: rotate(-30deg) translateY(0) scale(1)
    }

    50% {
        transform: rotate(-30deg) translateY(-12px) scale(1.03)
    }

    to {
        transform: rotate(-30deg) translateY(0) scale(1)
    }
}

.modern-spinner {
    animation: spin 1s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0,0,.2,1) infinite
}

@keyframes ping {
    75%,to {
        content: var(--tw-content);
        transform: scale(2);
        opacity: 0
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes shimmer {
    to {
        transform: translate(0);
        opacity: 0
    }
}

@keyframes timerPulse {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.02)
    }
}

@keyframes timeUpdate {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }

    to {
        transform: scale(1)
    }
}

@keyframes slideInUp {
    to {
        margin-top: 6px
    }

    0% {
        margin-top: 14px
    }
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translate(-100%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translate(30px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes marquee-scroll-left {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@keyframes marquee-scroll-up {
    0% {
        transform: translateY(0)
    }

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

@keyframes phoneRing {
    0% {
        transform: rotate3d(0,0,1,0)
    }

    20%,32%,44%,56%,68% {
        transform: rotate3d(0,0,1,0)
    }

    23%,35%,47%,59%,71% {
        transform: rotate3d(0,0,1,15deg)
    }

    26%,38%,50%,62%,74% {
        transform: rotate3d(0,0,1,0)
    }

    29%,41%,53%,65%,77% {
        transform: rotate3d(0,0,1,-15deg)
    }

    80% {
        transform: rotate3d(0,0,1,0)
    }
}

@keyframes bellRing {
    0% {
        transform: rotate(0)
    }

    10% {
        transform: rotate(10deg)
    }

    20% {
        transform: rotate(-8deg)
    }

    30% {
        transform: rotate(6deg)
    }

    40% {
        transform: rotate(-4deg)
    }

    50% {
        transform: rotate(2deg)
    }

    60% {
        transform: rotate(0)
    }

    to {
        transform: rotate(0)
    }
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center
}

.avatar-group {
    display: flex;
    align-items: center
}

.avatar-group .avatar-group-item {
    position: relative;
    transition: transform .3s ease,z-index .3s ease
}

.avatar-group .avatar-group-item :is(img,div) {
    border: 2px solid var(--dx-secondary-bg);
    border-radius: 50rem
}

.avatar-group .avatar-group-item div {
    color: #fff;
    background-color: var(--dx-primary)
}

.avatar-group .avatar-group-item:not(:first-child) {
    margin-left: -10px
}

.avatar-group .avatar-group-item:hover {
    transform: translateY(-4px) scale(1.05);
    z-index: 10
}

.back-to-top-btn {
    position: fixed;
    bottom: 19px;
    right: 19px;
    z-index: 99999
}

.back-to-top-btn:before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    background: conic-gradient(#fff var(--progress, 0deg),transparent 0deg);
    -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
    mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0)
}

.back-to-top-btn {
    display: none
}

.back-to-top-btn.show {
    display: flex
}

.digital-btn {
    padding: 16px 35px;
    background: transparent;
    color: #fff;
    overflow: hidden;
    transition: .4s
}

.digital-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0,100% 0,100% 40%,95% 50%,100% 60%,100% 100%,0 100%,0 60%,5% 50%,0 40%);
    background-color: #5c3e94;
    transition: .4s;
    z-index: -1
}

.digital-btn:after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #5C3E94;
    opacity: 0;
    transform: scale(.9);
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    transition: .4s
}

.digital-btn span:before,.digital-btn span:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #5C3E94;
    opacity: 0;
    transition: .4s
}

.digital-btn span:before {
    bottom: 10px;
    left: 10px;
    border-top: none;
    border-right: none
}

.digital-btn span:after {
    top: 10px;
    right: 10px;
    border-bottom: none;
    border-left: none
}

.digital-btn i {
    transition: .3s
}

.digital-btn:hover:before {
    opacity: 0;
    transform: scale(1.1)
}

.digital-btn:hover:after {
    opacity: 1;
    transform: scale(1)
}

.digital-btn:hover span {
    color: #5c3e94
}

.digital-btn:hover span:before,.digital-btn:hover span:after {
    opacity: 1
}

.digital-btn:hover i {
    color: #5c3e94;
    transform: translate(6px)
}

.startup-btn i {
    display: inline-block;
    transition: transform .3s ease
}

.startup-btn:hover i {
    transform: rotate(45deg)
}

.automation-btn {
    outline: none;
    background: linear-gradient(135deg,#5c3e94,#8b5cf6);
    color: #fff;
    padding: 12px 34px;
    box-shadow: 0 0 25px #7e56da99,0 0 40px #7e56da66,inset 2px 2px 6px #ffffff26,inset -2px -2px 6px #0006;
    transition: transform .35s ease,box-shadow .35s ease,background .35s ease,border-radius .35s ease
}

.automation-btn:hover {
    transform: perspective(120px) rotateX(12deg) scale(1.08);
    border-radius: 8px;
    background: linear-gradient(135deg,#5c3e94,#8b5cf6d9);
    box-shadow: 0 0 45px #7e56dae6,0 0 65px #7e56dab3,inset 2px 2px 8px #ffffff40,inset -2px -2px 18px #7e56da99
}

.app-showcase-btn,.app-showcase-btn span,.app-showcase-btn i {
    transition: all .35s ease
}

.app-showcase-btn:hover {
    padding-right: 3.8rem!important
}

.app-showcase-btn:hover span {
    width: 100%!important
}

.analytics-btn {
    padding: 12px 16px;
    transition: .4s ease
}

.analytics-btn .analytics-btn-text-wrap {
    height: 24px
}

.analytics-btn .analytics-btn-text-wrap .analytics-btn-text {
    transition: .4s ease;
    line-height: 24px
}

.analytics-btn .analytics-btn-text-wrap.analytics-text-hover {
    position: absolute;
    top: 100%;
    left: 0
}

.analytics-btn:hover .analytics-text-default,.analytics-btn:hover .analytics-text-hover {
    transform: translateY(-100%)
}

.product-btn {
    transition: .4s ease
}

.product-btn:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all .6s ease;
    z-index: -1
}

.product-btn:hover {
    color: var(--dx-primary);
    border-color: #fff
}

.product-btn:hover:before {
    width: 300px;
    height: 300px
}

.product-hero-btn:before {
    background: var(--dx-primary)
}

.product-hero-btn:hover {
    color: #fff;
    border-color: var(--dx-primary)
}

.product-main-link:after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    background: #000;
    transition: opacity .3s
}

.product-main-link:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transform: scaleY(.05);
    transform-origin: 50% 100%
}

.product-main-link:hover:before {
    opacity: 1;
    animation: coverUp .3s ease forwards
}

.product-main-link:hover:after {
    opacity: 0
}

@keyframes coverUp {
    0% {
        transform: scaleY(.05)
    }

    50% {
        transform: scaleY(1)
    }

    51% {
        transform-origin: 50% 0%
    }

    to {
        transform: scaleY(.05);
        transform-origin: 50% 0%
    }
}

.crm-btn {
    position: relative;
    overflow: hidden;
    transition: color .3s ease
}

.crm-btn:before,.crm-btn:after {
    content: "";
    position: absolute;
    background: #f25912!important;
    transition: all .4s ease;
    z-index: 1
}

.crm-btn:before {
    width: 100%;
    height: 0%;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.crm-btn:after {
    width: 0%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

.crm-btn:hover {
    border-color: #f25912!important
}

.crm-btn:hover:before {
    height: 100%
}

.crm-btn:hover:after {
    width: 100%
}

.crm-btn-link {
    align-items: center;
    display: inline-flex
}

.crm-btn-link .crm-btn-link-icon {
    display: inline-block;
    margin-right: calc(9px + .3125vw);
    position: relative;
    transition: all .4s ease;
    z-index: 0
}

.crm-btn-link .crm-btn-link-icon i {
    align-items: center;
    background-color: #5c3e94;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    height: 30px;
    width: 30px;
    justify-content: center;
    padding: 6px;
    transition: all .4s ease
}

.crm-btn-link .crm-btn-link-icon:after {
    content: "";
    border: 1px solid #5C3E94;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    left: calc(-6.6px - .4375vw);
    position: absolute;
    top: 0;
    transition: all .4s ease;
    z-index: -1
}

.crm-btn-link:hover .crm-btn-link-icon {
    transform: translate(calc(4.8px + .375vw))
}

.crm-btn-link:hover .crm-btn-link-icon i {
    transform: rotate(50deg)
}

.crm-btn-link:hover .crm-btn-link-icon:after {
    transform: translate(calc(6.6px + .4375vw))
}

.saas-v1-btn {
    transition: .4s ease
}

.saas-v1-btn span,.saas-v1-btn i {
    position: relative;
    z-index: 2;
    transition: .4s ease
}

.saas-v1-btn i {
    font-size: 19px
}

.saas-v1-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: .5s ease;
    z-index: 1;
    clip-path: polygon(0 0,85% 0,100% 100%,15% 100%)
}

.saas-v1-btn:hover:before {
    left: 0
}

.saas-v1-btn:hover span,.saas-v1-btn:hover i {
    color: #000!important
}

.custom-btn {
    position: relative;
    z-index: 1
}

.custom-btn:after {
    content: "";
    width: 0px;
    height: 0px;
    background: #f25912;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    transition: all .3s linear 0ms;
    z-index: -1
}

.custom-btn:hover {
    border-color: #f25912!important;
    color: #fff!important
}

.custom-btn:hover:after {
    width: 100%;
    height: 100%;
    left: 0
}

.project-main-btn {
    transition: .4s ease-in-out
}

.project-main-btn .project-btn-icon {
    transition: .4s ease-in-out;
    background-color: #fff;
    color: #000
}

.project-main-btn:hover {
    background-color: #fff;
    color: #5c3e94
}

.project-main-btn:hover .project-btn-icon {
    background-color: #5c3e94;
    color: #fff
}

.card {
    margin-bottom: var(--dx-spacer)
}

.card .card-header {
    padding-bottom: 0;
    border: none
}

.card.card-h-100 {
    height: calc(100% - var(--dx-spacer))
}

.card-hover-animate {
    transition: transform .3s ease-in-out
}

.card-hover-animate:hover {
    transform: translateY(-.25rem)
}

.basic-card .card-img-top {
    height: 8rem;
    object-fit: cover;
    width: 100%
}

.basic-card .user {
    height: 120px;
    width: 120px;
    margin-top: -4rem
}

.card-hover-effect {
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .card-hover-effect {
        transition: none
    }
}

.card-hover-effect .icon-bg {
    height: 5rem;
    width: 5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.card-hover-effect .icon-hover-bg {
    position: absolute;
    top: 30px;
    left: 30px;
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .card-hover-effect .icon-hover-bg {
        transition: none
    }
}

.card-hover-effect .icon-hover-bg {
    height: 5rem;
    width: 5rem;
    border-radius: 50%
}

.card-hover-effect:hover {
    box-shadow: 0 25px 50px -12px #00000040;
    transform: translateY(-6px)
}

.card-hover-effect:hover .icon-hover-bg {
    transform: scale(10);
    border-radius: 100%
}

.bg-overlay {
    position: absolute;
    inset: 0;
    background-color: #171717;
    opacity: .2
}

.dropdown-menu {
    animation-name: slideDownIn;
    animation-duration: .3s;
    animation-fill-mode: both
}

.dropdown-menu .dropdown-item {
    border-radius: .625rem;
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .dropdown-menu .dropdown-item {
        transition: none
    }
}

@keyframes slideDownIn {
    to {
        margin-top: -1px
    }

    0% {
        margin-top: 5px
    }
}

:is(.dropdown .dropdown-toggle,.dropdown-toggle-split.dropdown-toggle):after {
    content: "";
    font-family: remixicon!important;
    border: none;
    font-size: 20px;
    line-height: .8;
    margin-top: 0;
    vertical-align: -.2rem
}

:is(.dropdown .dropdown-toggle,.dropdown-toggle-split.dropdown-toggle).show:after {
    transform: rotate(180deg)
}

.dropend .dropdown-toggle:after {
    content: "";
    font-family: remixicon!important;
    border: none!important;
    font-size: 20px;
    line-height: .8;
    margin-top: 3.2px;
    transform: rotate(-90deg)
}

.dropend .dropdown-toggle:hover:after {
    transform: rotate(-90deg)
}

.dropstart .dropdown-toggle:before {
    content: "";
    font-family: remixicon!important;
    border: none;
    font-size: 20px;
    line-height: .8;
    margin-top: 3.2px;
    transform: rotate(90deg)
}

.dropup .dropdown-toggle:after {
    content: "";
    font-family: remixicon!important;
    border: none;
    font-size: 20px;
    line-height: .8;
    margin-top: 3.2px;
    transform: rotate(180deg)
}

.square {
    height: 20rem;
    width: 20rem;
    background: linear-gradient(136deg,rgba(var(--dx-primary-rgb),.2),rgba(var(--dx-secondary-rgb),.2),rgba(var(--dx-info-rgb),.2));
    margin: 0 auto
}

@media(max-width: 575.98px) {
    .square {
        height:15rem;
        width: 15rem
    }
}

.simplebar-scrollbar:before {
    background: var(--dx-border-color)!important
}

.simplebar-primary .simplebar-scrollbar:before {
    background-color: var(--dx-primary)!important
}

.simplebar-secondary .simplebar-scrollbar:before {
    background-color: var(--dx-secondary)!important
}

.simplebar-success .simplebar-scrollbar:before {
    background-color: var(--dx-success)!important
}

.simplebar-info .simplebar-scrollbar:before {
    background-color: var(--dx-info)!important
}

.simplebar-warning .simplebar-scrollbar:before {
    background-color: var(--dx-warning)!important
}

.simplebar-danger .simplebar-scrollbar:before {
    background-color: var(--dx-danger)!important
}

.simplebar-light .simplebar-scrollbar:before {
    background-color: var(--dx-light)!important
}

.simplebar-dark .simplebar-scrollbar:before {
    background-color: var(--dx-dark)!important
}

.simplebar-pink .simplebar-scrollbar:before {
    background-color: var(--dx-pink)!important
}

.simplebar-orange .simplebar-scrollbar:before {
    background-color: var(--dx-orange)!important
}

.simplebar-indigo .simplebar-scrollbar:before {
    background-color: var(--dx-indigo)!important
}

::-webkit-scrollbar-track {
    background-color: var(--dx-secondary-bg)
}

::-webkit-scrollbar {
    width: 10px;
    background-color: var(--dx-secondary-bg)
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--dx-border-color)
}

.swiper-primary .swiper-pagination-bullet {
    background: var(--dx-primary);
    height: .75rem;
    width: .75rem
}

.swiper-primary .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-primary)
}

.swiper-secondary .swiper-pagination-bullet {
    background: var(--dx-secondary);
    height: .75rem;
    width: .75rem
}

.swiper-secondary .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-secondary)
}

.swiper-success .swiper-pagination-bullet {
    background: var(--dx-success);
    height: .75rem;
    width: .75rem
}

.swiper-success .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-success)
}

.swiper-info .swiper-pagination-bullet {
    background: var(--dx-info);
    height: .75rem;
    width: .75rem
}

.swiper-info .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-info)
}

.swiper-warning .swiper-pagination-bullet {
    background: var(--dx-warning);
    height: .75rem;
    width: .75rem
}

.swiper-warning .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-warning)
}

.swiper-danger .swiper-pagination-bullet {
    background: var(--dx-danger);
    height: .75rem;
    width: .75rem
}

.swiper-danger .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-danger)
}

.swiper-light .swiper-pagination-bullet {
    background: var(--dx-light);
    height: .75rem;
    width: .75rem
}

.swiper-light .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-light)
}

.swiper-dark .swiper-pagination-bullet {
    background: var(--dx-dark);
    height: .75rem;
    width: .75rem
}

.swiper-dark .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-dark)
}

.swiper-pink .swiper-pagination-bullet {
    background: var(--dx-pink);
    height: .75rem;
    width: .75rem
}

.swiper-pink .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-pink)
}

.swiper-orange .swiper-pagination-bullet {
    background: var(--dx-orange);
    height: .75rem;
    width: .75rem
}

.swiper-orange .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-orange)
}

.swiper-indigo .swiper-pagination-bullet {
    background: var(--dx-indigo);
    height: .75rem;
    width: .75rem
}

.swiper-indigo .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-indigo)
}

.swiper-button-prev:before {
    content: "";
    font-family: RemixIcon
}

.swiper-button-next:before {
    content: "";
    font-family: RemixIcon
}

:is(.swiper-button-prev,.swiper-button-next):after {
    display: none
}

.swiper-navigation-hover :is(.swiper-button-prev,.swiper-button-next) {
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .swiper-navigation-hover :is(.swiper-button-prev,.swiper-button-next) {
        transition: none
    }
}

.swiper-navigation-hover :is(.swiper-button-prev,.swiper-button-next):before {
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .swiper-navigation-hover :is(.swiper-button-prev,.swiper-button-next):before {
        transition: none
    }
}

.swiper-navigation-hover :is(.swiper-button-prev,.swiper-button-next):before {
    opacity: 0;
    visibility: hidden
}

.swiper-navigation-hover:hover :is(.swiper-button-prev,.swiper-button-next) {
    opacity: 1;
    visibility: visible
}

.swiper-navigation-hover:hover :is(.swiper-button-prev,.swiper-button-next):before {
    opacity: 1;
    visibility: visible
}

.basic-square {
    background: linear-gradient(136deg,var(--dx-primary),var(--dx-secondary),var(--dx-info))
}

.glare-square {
    background: linear-gradient(136deg,var(--dx-success),var(--dx-indigo),var(--dx-info))
}

.reverse-square {
    background: linear-gradient(136deg,var(--dx-info),var(--dx-info))
}

.floating-square {
    background: linear-gradient(136deg,var(--dx-primary),var(--dx-primary))
}

.annotation-dropdown {
    top: 40px;
    left: 50px
}

.annotation-dropdown .comment-content {
    max-height: 200px
}

.annotation-dropdown #comment-input {
    width: 100%;
    color: var(--dx-emphasis-color)
}

.annotation-dropdown #comment-input:focus {
    outline: none
}

.deckgo-highlight-code-carbon {
    --deckgo-highlight-code-carbon-background: #161c30;
    --deckgo-highlight-code-carbon-color: #ffffff;
    --deckgo-highlight-code-token-atrule: #ec4899;
    --deckgo-highlight-code-token-function: #eab308;
    --deckgo-highlight-code-carbon-header-button-red-background: #ef4444;
    --deckgo-highlight-code-token-selector: #4ade80;
    --deckgo-highlight-code-font-size: .9063rem;
    --deckgo-highlight-code-carbon-header-button-width: .68rem;
    --deckgo-highlight-code-carbon-header-button-height: .68rem
}

.chatbot-one {
    background: linear-gradient(to bottom right,rgba(var(--dx-primary-rgb),.2),rgba(var(--dx-success-rgb),.2),rgba(var(--dx-secondary-rgb),.2))
}

.chatbot-two {
    background: linear-gradient(to top right,var(--dx-success),var(--dx-info))
}

.chatbot-three {
    background: linear-gradient(to top right,var(--dx-primary),var(--dx-secondary))
}

.treeview-scrollable {
    max-height: 70vh
}

.treeview {
    -webkit-user-select: none;
    user-select: none
}

.treeview ul {
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .treeview ul {
        transition: none
    }
}

.treeview ul.list-unstyled {
    margin-bottom: 0
}

.treeview ul:not(.d-none) {
    animation: slideDown .5s ease-in-out
}

.treeview li {
    position: relative
}

.treeview li:before {
    content: "";
    position: absolute;
    left: -.75rem;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: var(--dx-border-color);
    z-index: 0
}

.treeview li:last-child:before {
    height: 1.5rem
}

.treeview li:last-child {
    margin-bottom: 0
}

.treeview li:before,.treeview li>a:before {
    display: none
}

.treeview a {
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .treeview a {
        transition: none
    }
}

.treeview a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 5px
}

.treeview a:hover,.treeview a:active,.treeview a:focus {
    color: var(--dx-primary)!important;
    background-color: var(--dx-primary-bg-subtle)
}

.treeview i {
    margin-right: .5rem;
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .treeview i {
        transition: none
    }
}

.treeview [aria-expanded=true] {
    font-weight: 500;
    color: var(--dx-primary);
    background-color: var(--dx-light)
}

.treeview [data-node] {
    cursor: pointer
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.icon-box {
    height: 2.5rem;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dx-border-color);
    border-radius: .625rem
}

.stroke-1 {
    stroke-width: 1
}

.stroke-2 {
    stroke-width: 2
}

.stroke-3 {
    stroke-width: 3
}

.stroke-4 {
    stroke-width: 4
}

.size-2-5 {
    width: .625rem;
    height: .625rem
}

.size-3-5 {
    width: .875rem;
    height: .875rem
}

.icon-primary {
    fill: rgba(var(--dx-primary-rgb),.1);
    color: var(--dx-primary)
}

.icon-hover-primary {
    color: var(--dx-primary)
}

.icon-hover-primary:hover {
    fill: var(--dx-primary-bg-subtle)
}

.icon-secondary {
    fill: rgba(var(--dx-secondary-rgb),.1);
    color: var(--dx-secondary)
}

.icon-hover-secondary {
    color: var(--dx-secondary)
}

.icon-hover-secondary:hover {
    fill: var(--dx-secondary-bg-subtle)
}

.icon-success {
    fill: rgba(var(--dx-success-rgb),.1);
    color: var(--dx-success)
}

.icon-hover-success {
    color: var(--dx-success)
}

.icon-hover-success:hover {
    fill: var(--dx-success-bg-subtle)
}

.icon-info {
    fill: rgba(var(--dx-info-rgb),.1);
    color: var(--dx-info)
}

.icon-hover-info {
    color: var(--dx-info)
}

.icon-hover-info:hover {
    fill: var(--dx-info-bg-subtle)
}

.icon-warning {
    fill: rgba(var(--dx-warning-rgb),.1);
    color: var(--dx-warning)
}

.icon-hover-warning {
    color: var(--dx-warning)
}

.icon-hover-warning:hover {
    fill: var(--dx-warning-bg-subtle)
}

.icon-danger {
    fill: rgba(var(--dx-danger-rgb),.1);
    color: var(--dx-danger)
}

.icon-hover-danger {
    color: var(--dx-danger)
}

.icon-hover-danger:hover {
    fill: var(--dx-danger-bg-subtle)
}

.icon-light {
    fill: rgba(var(--dx-light-rgb),.1);
    color: var(--dx-light)
}

.icon-hover-light {
    color: var(--dx-light)
}

.icon-hover-light:hover {
    fill: var(--dx-light-bg-subtle)
}

.icon-dark {
    fill: rgba(var(--dx-dark-rgb),.1);
    color: var(--dx-dark)
}

.icon-hover-dark {
    color: var(--dx-dark)
}

.icon-hover-dark:hover {
    fill: var(--dx-dark-bg-subtle)
}

.icon-pink {
    fill: rgba(var(--dx-pink-rgb),.1);
    color: var(--dx-pink)
}

.icon-hover-pink {
    color: var(--dx-pink)
}

.icon-hover-pink:hover {
    fill: var(--dx-pink-bg-subtle)
}

.icon-orange {
    fill: rgba(var(--dx-orange-rgb),.1);
    color: var(--dx-orange)
}

.icon-hover-orange {
    color: var(--dx-orange)
}

.icon-hover-orange:hover {
    fill: var(--dx-orange-bg-subtle)
}

.icon-indigo {
    fill: rgba(var(--dx-indigo-rgb),.1);
    color: var(--dx-indigo)
}

.icon-hover-indigo {
    color: var(--dx-indigo)
}

.icon-hover-indigo:hover {
    fill: var(--dx-indigo-bg-subtle)
}

.fill-primary {
    fill: var(--dx-primary)
}

.fill-secondary {
    fill: var(--dx-secondary)
}

.fill-success {
    fill: var(--dx-success)
}

.fill-info {
    fill: var(--dx-info)
}

.fill-warning {
    fill: var(--dx-warning)
}

.fill-danger {
    fill: var(--dx-danger)
}

.fill-light {
    fill: var(--dx-light)
}

.fill-dark {
    fill: var(--dx-dark)
}

.fill-pink {
    fill: var(--dx-pink)
}

.fill-orange {
    fill: var(--dx-orange)
}

.fill-indigo {
    fill: var(--dx-indigo)
}

.digital-main-subtitle {
    font-weight: 500;
    border: 1px solid var(--dx-dark);
    padding: 7px 20px;
    display: inline-block;
    position: relative;
    z-index: 1
}

.digital-main-subtitle:before,.digital-main-subtitle:after {
    content: "";
    background: var(--dx-body-bg);
    position: absolute;
    z-index: -1;
    transition: transform .2s ease-in-out;
    opacity: .9
}

.digital-main-subtitle:before {
    inset: -2px 8px
}

.digital-main-subtitle:after {
    inset: 8px -2px
}

.digital-main-heading {
    font-size: 54px
}

@media(max-width: 767px) {
    .digital-main-heading {
        font-size:24px
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .digital-main-heading {
        font-size:34px
    }
}

.st-main-heading {
    font-size: 3rem
}

@media(max-width: 767px) {
    .st-main-heading {
        font-size:2rem
    }
}

.startup-main-subtitle {
    font-weight: 500;
    letter-spacing: 2px;
    animation: titleGlow1 2s infinite
}

.startup-glow-white {
    animation: titleGlow2 2s infinite
}

@keyframes titleGlow1 {
    0% {
        box-shadow: 0 0 #7e56da99
    }

    70% {
        box-shadow: 0 0 0 14px #7e56da00
    }

    to {
        box-shadow: 0 0 #7e56da00
    }
}

@keyframes titleGlow2 {
    0% {
        box-shadow: 0 0 #ffffffb3
    }

    70% {
        box-shadow: 0 0 0 14px #fff0
    }

    to {
        box-shadow: 0 0 #fff0
    }
}

.automation-badge .automation-badge-line {
    width: 90px;
    height: 1px;
    background: linear-gradient(to right,transparent,var(--dx-primary))
}

.automation-badge .automation-badge-line.right {
    transform: rotate(180deg)
}

.automation-badge .automation-badge-line:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--dx-primary);
    border-radius: 50%
}

.automation-badge .automation-badge-border {
    padding-top: 1px;
    background-image: linear-gradient(90deg,#29292d 15%,#5c3e94,#29292d 85%)
}

.automation-badge .automation-badge-border .automation-badge-pill {
    border: 1px solid #29292d;
    border-radius: 100px;
    background-color: #111116;
    background-image: linear-gradient(180deg,#7e56da47,#7e56da1f);
    box-shadow: inset 0 0 0 1px #ffffff0a,0 0 25px #7e56da59;
    padding: 8px 18px
}

.automation-main-title {
    font-size: 4rem
}

.automation-main-title span {
    background: linear-gradient(179.14deg,#fff 7.77%,#171717 120.01%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text
}

@media(max-width: 767px) {
    .automation-main-title {
        font-size:2rem
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .automation-main-title {
        font-size:3rem
    }
}

.app-main-heading {
    font-size: 3.5rem
}

@media(max-width: 767px) {
    .app-main-heading {
        font-size:2rem
    }
}

.analytics-title {
    font-size: 2.5rem
}

.analytics-title span {
    transform: rotate(-2deg)
}

@media(max-width: 767px) {
    .analytics-title {
        font-size:1.5rem
    }
}

.crm-title {
    font-size: 3.5rem
}

.crm-animationtext {
    display: inline-block;
    perspective: 800px;
    letter-spacing: -7px
}

.crm-animationtext span {
    display: inline-block;
    transform-origin: center;
    backface-visibility: hidden;
    animation: rotateLetter 3.5s ease-in-out infinite
}

@keyframes rotateLetter {
    0%,70%,to {
        transform: rotateY(0)
    }

    80% {
        transform: rotateY(90deg)
    }

    90% {
        transform: rotateY(0)
    }
}

.crm-sub-title {
    letter-spacing: 3px
}

.crm-sub-title .crm-sub-title-bg {
    position: absolute;
    top: -50px;
    left: -207px;
    font-size: 87px;
    font-weight: 800;
    color: var(--dx-dark);
    opacity: .05;
    letter-spacing: 6px
}

@media(max-width: 767px) {
    .crm-title {
        font-size:2rem
    }

    .crm-animationtext {
        letter-spacing: -4px
    }
}

@media(min-width: 768px)and (max-width:991px) {
    .crm-title {
        font-size:3rem
    }
}

@media(min-width: 1199px)and (max-width:1535px) {
    .crm-heading {
        font-size:2.8rem
    }
}

.product-main-title {
    font-size: 2.5rem
}

@media(max-width: 767px) {
    .product-main-title {
        font-size:2rem
    }
}

.saas-v1-title h2 {
    font-size: 3.5rem;
    line-height: 1.1
}

.saas-v1-title span {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-23deg)
}

@media(max-width: 767px) {
    .saas-v1-title h2 {
        font-size:2rem
    }
}

@media(min-width: 768px)and (max-width:991px) {
    .saas-v1-title h2 {
        font-size:3rem
    }
}

.saas-v2-main-title {
    font-size: 3rem
}

.saas-v2-badge:before {
    content: "";
    position: absolute;
    left: -2px;
    top: 8px;
    width: 4px;
    height: 24px;
    background: #000;
    border-radius: 10px
}

.saas-v2-badge:after {
    content: "";
    position: absolute;
    right: -2px;
    top: 8px;
    width: 4px;
    height: 24px;
    background: #000;
    border-radius: 10px
}

.saas-v2-badge .saas-v2-badge-dot {
    width: 14px;
    height: 14px;
    background: var(--dx-secondary);
    display: inline-block;
    clip-path: polygon(25% 0%,75% 0%,100% 25%,100% 75%,75% 100%,25% 100%,0% 75%,0% 25%)
}

@media(max-width: 767px) {
    .saas-v2-main-title {
        font-size:2rem
    }
}

.project-main-subtitle {
    line-height: 12px;
    letter-spacing: 2px;
    font-weight: 500
}

.project-main-title {
    font-size: 3rem
}

@media(max-width: 767px) {
    .project-main-title {
        font-size:2rem
    }
}

.blog-main-heading .blog-main-title {
    font-size: 47px
}

.conference-main-heading .conference-title {
    font-size: 8rem
}

.conference-main-heading .conference-heading-line {
    width: 100%;
    height: 1px
}

@media(max-width: 767px) {
    .conference-main-heading .conference-title {
        font-size:2rem
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .conference-main-heading .conference-title {
        font-size:5rem
    }
}

.custom-title-style {
    position: relative;
    display: inline-block;
    padding-bottom: 12px
}

.custom-title-style:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--dx-border-color)
}

.custom-title-style:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 60px;
    height: 3px;
    background: var(--dx-primary);
    border-radius: 10px
}

.section-main-label .section-main-label-mask {
    max-width: 120px;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAAAUCAMAAABbPPhuAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAXRQTFRFcnJyb29vcnJycnJycnJycnJyc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3NzcnJycXFxcXFxcXFxdHR0bW1tcXFxfX19dHR0dHR0c3Nzc3Nzc3Nzc3Nzc3Nzc3NzcnJydnZ2e3t7enp6b29vd3d3d3d3c3Nzc3Nzc3Nzc3NzcXFxcXFxZmZmb29vc3Nzc3Nzc3Nzc3Nzc3NzbGxscXFxcnJyc3Nzc3Nzd3d3j4+PgYGBdnZ2c3NzcnJye3t7fn5+c3NzcnJyZWVlV1dXc3Nzc3NzcnJycHBwdnZ2dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0c3Nzf39/cHBwdHR0dHR0dHR0dHR0cXFxb29vdHR0dHR0cXFxjo6OeHh4cnJyeXl5bW1tcnJyeHh4c3NzcHBwa2trenp6b29vb29ve3t7Y2NjWFhYampqfn5+dnZ2f39/enp6cXFxj/ZTEgAAAHx0Uk5TBxYmNUVUY3ODkqKxwNDf7/3//vyCY0U1JhYHBxYmNURVwc/g7mQXBgYVJjZUZNF0NiUWBxY2cpGwBxY2RcIWBxYmNSUWBqFGFgYm8BYHFlRjc4KSorHA0ODvkwYmRYPf7hcmocFEByZTBiVEFiU2Bxc1FxcWBgcWNQgmVF2zRMMAAAMuSURBVHicbVVdS1RRFD3r4sMMNlNDojAOElI5gVY0Lw4ZipAvQUhFQfVQL0JP9uSf8A/YLxgIEukDIXyJEILAagIxS5gHHWqacHIq8gNO52vvc+61g3O9c+eevfbae619IJBcAlKoj7pCmDsh/FU/pT+73Etmk9B7BG2AjA6kWZ3tbCtngveaa91cu9WnCbtV+Jj0QIcDJ+CTcP9hsfzbEjjoaljAvpqCywJFBfErg3UDl6l1NyEoQxsdQnJIB+9/9UwJ0XNWX6KcRevs/VPL5YGvKGGl9A7FdPXcRw2oyDEdX68gok2baDIyo5h6UhrQxRysDn2w7Ap1lPGmjJZld+E90CGDAEFfCMhCUVcRopnWOcrCFCjKSdkYrKrenV5TwCNfMKpg9lrrViWaHKgesVjMTITQCaVYSoKLYIrZ1UNwYyp4XhZXTzl2Bg0hGpWLUg/U6WsWUwtnZovZJRvy4mvdv/ElOQEM9Bz5a9ldWka/kkokglTjYqdyEWFqKIlfJOGj4bWGZielYZdWRig9L+O4d90iuG+CJMFtk2EwC0J+CyvCt5GVyuTLtpFK/y7ubBUqt3eAzG8NlsICDks6KBw7P+772PKV1nC2dxouf76KATmyNGrgju0cbaf2FqOYEIX3gAvtH4E1LwI9QfocaKpom997qtlNPbu6MOHZaTgeEOLw4sihYJ3jg2cu44inSvb6PL4P7+LBVuFRWUnlFrMLpkjouVB2pH5+NRil7H3bO8KTJJVspbyZWb8Cxw48NfzUlcn2ECXfXlfl+KtOKsZ3U3NyPI1yCVjZzKSLvndJCbiWCUHwgRi9CxOmMPfad7JhfTc1N/azjmk8ufFW2dwWUxshLjKWPyeOYOr7dMIdLBeYYmo4M8QevsB0x2P0aZtfay67wfK/UyAYKyEMT28RF6fLyR9A5ry7C8xgdqZiDiA1VTRaRIYSPA3tMeblH0gnoeBwkNrj9UTbFNPAFS6jVL//Sp0I0Sc/Mx0Pr7yYMlzqfCQkGfvdUjhJDm1om/8Y2/6G/Mkznzccu+6mOe94jgiR5BJrFrXVdjvMjL44303On92+2VhN7e//A8VqcIb25hf1AAAAAElFTkSuQmCC);
    mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAAAUCAMAAABbPPhuAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAXRQTFRFcnJyb29vcnJycnJycnJycnJyc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3NzcnJycXFxcXFxcXFxdHR0bW1tcXFxfX19dHR0dHR0c3Nzc3Nzc3Nzc3Nzc3Nzc3NzcnJydnZ2e3t7enp6b29vd3d3d3d3c3Nzc3Nzc3Nzc3NzcXFxcXFxZmZmb29vc3Nzc3Nzc3Nzc3Nzc3NzbGxscXFxcnJyc3Nzc3Nzd3d3j4+PgYGBdnZ2c3NzcnJye3t7fn5+c3NzcnJyZWVlV1dXc3Nzc3NzcnJycHBwdnZ2dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0c3Nzf39/cHBwdHR0dHR0dHR0dHR0cXFxb29vdHR0dHR0cXFxjo6OeHh4cnJyeXl5bW1tcnJyeHh4c3NzcHBwa2trenp6b29vb29ve3t7Y2NjWFhYampqfn5+dnZ2f39/enp6cXFxj/ZTEgAAAHx0Uk5TBxYmNUVUY3ODkqKxwNDf7/3//vyCY0U1JhYHBxYmNURVwc/g7mQXBgYVJjZUZNF0NiUWBxY2cpGwBxY2RcIWBxYmNSUWBqFGFgYm8BYHFlRjc4KSorHA0ODvkwYmRYPf7hcmocFEByZTBiVEFiU2Bxc1FxcWBgcWNQgmVF2zRMMAAAMuSURBVHicbVVdS1RRFD3r4sMMNlNDojAOElI5gVY0Lw4ZipAvQUhFQfVQL0JP9uSf8A/YLxgIEukDIXyJEILAagIxS5gHHWqacHIq8gNO52vvc+61g3O9c+eevfbae619IJBcAlKoj7pCmDsh/FU/pT+73Etmk9B7BG2AjA6kWZ3tbCtngveaa91cu9WnCbtV+Jj0QIcDJ+CTcP9hsfzbEjjoaljAvpqCywJFBfErg3UDl6l1NyEoQxsdQnJIB+9/9UwJ0XNWX6KcRevs/VPL5YGvKGGl9A7FdPXcRw2oyDEdX68gok2baDIyo5h6UhrQxRysDn2w7Ap1lPGmjJZld+E90CGDAEFfCMhCUVcRopnWOcrCFCjKSdkYrKrenV5TwCNfMKpg9lrrViWaHKgesVjMTITQCaVYSoKLYIrZ1UNwYyp4XhZXTzl2Bg0hGpWLUg/U6WsWUwtnZovZJRvy4mvdv/ElOQEM9Bz5a9ldWka/kkokglTjYqdyEWFqKIlfJOGj4bWGZielYZdWRig9L+O4d90iuG+CJMFtk2EwC0J+CyvCt5GVyuTLtpFK/y7ubBUqt3eAzG8NlsICDks6KBw7P+772PKV1nC2dxouf76KATmyNGrgju0cbaf2FqOYEIX3gAvtH4E1LwI9QfocaKpom997qtlNPbu6MOHZaTgeEOLw4sihYJ3jg2cu44inSvb6PL4P7+LBVuFRWUnlFrMLpkjouVB2pH5+NRil7H3bO8KTJJVspbyZWb8Cxw48NfzUlcn2ECXfXlfl+KtOKsZ3U3NyPI1yCVjZzKSLvndJCbiWCUHwgRi9CxOmMPfad7JhfTc1N/azjmk8ufFW2dwWUxshLjKWPyeOYOr7dMIdLBeYYmo4M8QevsB0x2P0aZtfay67wfK/UyAYKyEMT28RF6fLyR9A5ry7C8xgdqZiDiA1VTRaRIYSPA3tMeblH0gnoeBwkNrj9UTbFNPAFS6jVL//Sp0I0Sc/Mx0Pr7yYMlzqfCQkGfvdUjhJDm1om/8Y2/6G/Mkznzccu+6mOe94jgiR5BJrFrXVdjvMjL44303On92+2VhN7e//A8VqcIb25hf1AAAAAElFTkSuQmCC);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.section-main-title {
    font-size: 3rem
}

@media(max-width: 767px) {
    .section-main-title {
        font-size:2rem
    }
}

.form-label {
    font-weight: 500
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--dx-primary)
}

.form-control-md {
    padding: .375rem .75rem;
    font-size: .875rem
}

.resize-none {
    resize: none
}

.form-control.fil-input:focus {
    border-color: var(--dx-gray-200)
}

#formFile::file-selector-button {
    background-color: var(--dx-light-bg-subtle);
    color: var(--dx-secondary-color)
}

#formFileDark::file-selector-button {
    background-color: var(--dx-gray-800);
    color: var(--dx-white)
}

#formFileSecondary::file-selector-button {
    background-color: var(--dx-secondary-bg-subtle);
    color: var(--dx-secondary);
    font-weight: 500;
    border-radius: 6px;
    border: none
}

.vscomp-ele {
    max-width: 100%!important
}

.vscomp-ele .vscomp-wrapper {
    color: var(--dx-body-color)
}

.vscomp-ele .vscomp-wrapper .vscomp-toggle-button {
    background-color: var(--dx-secondary-bg);
    border: 1px solid var(--dx-border-color)
}

.vscomp-ele .vscomp-wrapper:focus .vscomp-toggle-button,.vscomp-ele .vscomp-wrapper.focused .vscomp-toggle-button {
    border-color: var(--dx-primary);
    box-shadow: var(--dx-box-shadow)!important
}

.vscomp-ele .vscomp-wrapper:not(.has-value) .vscomp-value {
    opacity: 1;
    color: var(--dx-secondary-color)
}

.vscomp-ele .vscomp-wrapper .vscomp-arrow:after {
    margin-top: -3px;
    border-bottom-color: var(--dx-emphasis-color);
    border-right-color: var(--dx-emphasis-color);
    border-left-color: transparent
}

.vscomp-ele .vscomp-wrapper .checkbox-icon {
    margin-right: 10px;
    margin-left: 0
}

.vscomp-ele .vscomp-wrapper .checkbox-icon:after {
    border: 1px solid var(--dx-tertiary-bg)
}

.vscomp-ele .vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon:after {
    border: 1px solid var(--dx-primary);
    border-top-color: transparent!important;
    border-left-color: transparent!important
}

.vscomp-ele .vscomp-wrapper .vscomp-options,.vscomp-ele .vscomp-wrapper .vscomp-no-search-results {
    background-color: var(--dx-secondary-bg)
}

.vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option,.vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option {
    text-align: left
}

.vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option.selected,.vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option.focused,.vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option.selected,.vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option.focused {
    background-color: var(--dx-tertiary-bg)!important
}

.vscomp-ele .vscomp-wrapper .vscomp-search-container {
    background-color: var(--dx-secondary-bg);
    border-bottom: 1px solid var(--dx-tertiary-bg)
}

.vscomp-ele .vscomp-wrapper .pop-comp-wrapper {
    box-shadow: 0 10px 15px -3px var(--dx-tertiary-bg),0 4px 6px -4px var(--dx-tertiary-bg);
    color: var(--dx-emphasis-color)
}

.vscomp-ele .vscomp-wrapper .vscomp-search-wrapper {
    box-shadow: none!important
}

.vscomp-ele .vscomp-wrapper.has-clear-button .vscomp-toggle-button {
    padding-right: 3.375rem!important
}

.vscomp-ele .vscomp-wrapper .vscomp-dropbox-container {
    z-index: 9999!important
}

.vscomp-ele .vscomp-wrapper.show-value-as-tags .vscomp-arrow {
    height: 100%
}

.vscomp-ele .vscomp-wrapper.show-value-as-tags .vscomp-value {
    min-height: 100%
}

.vscomp-ele .vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
    padding: 2px 3px 2px 8px;
    border: 1px solid var(--dx-border-color)
}

.vscomp-ele .vscomp-wrapper.show-value-as-tags.has-value .vscomp-clear-button {
    right: 2px;
    left: auto
}

.vscomp-ele .vscomp-search-input::placeholder {
    color: var(--dx-secondary-color)
}

.vscomp-ele .vscomp-toggle-button {
    padding: .5938rem 1.875rem .5938rem .625rem!important;
    border-radius: .625rem!important
}

.vscomp-ele .vscomp-clear-button {
    right: 30px;
    left: auto
}

.vscomp-ele .vscomp-arrow {
    right: 0;
    left: auto
}

.form-range.range-primary::-webkit-slider-thumb {
    background: var(--dx-primary)
}

.form-range.range-secondary::-webkit-slider-thumb {
    background: var(--dx-secondary)
}

.form-range.range-success::-webkit-slider-thumb {
    background: var(--dx-success)
}

.form-range.range-info::-webkit-slider-thumb {
    background: var(--dx-info)
}

.form-range.range-warning::-webkit-slider-thumb {
    background: var(--dx-warning)
}

.form-range.range-danger::-webkit-slider-thumb {
    background: var(--dx-danger)
}

.form-range.range-light::-webkit-slider-thumb {
    background: var(--dx-light)
}

.form-range.range-dark::-webkit-slider-thumb {
    background: var(--dx-dark)
}

.form-range.range-pink::-webkit-slider-thumb {
    background: var(--dx-pink)
}

.form-range.range-orange::-webkit-slider-thumb {
    background: var(--dx-orange)
}

.form-range.range-indigo::-webkit-slider-thumb {
    background: var(--dx-indigo)
}

.form-switch input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden
}

.form-switch input:checked+label:after {
    left: 1.4375rem
}

.form-switch label {
    cursor: pointer;
    width: 3rem;
    height: 1.75rem;
    border-radius: 6.25rem;
    position: relative
}

.form-switch label:after {
    content: "";
    position: absolute;
    top: .1875rem;
    left: .1875rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 5.625rem;
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .form-switch label:after {
        transition: none
    }
}

[class*=switch-outline] label {
    border: 1px solid var(--dx-border-color)
}

[class*=switch-outline] label:after {
    background: var(--dx-border-color)
}

[class*=switch-outline] label .rounded {
    border-radius: 2px
}

[class*=switch-soft] label,[class*=switch-light] label {
    background-color: var(--dx-border-color);
    border: 1px solid var(--dx-border-color)
}

[class*=switch-soft] label:after,[class*=switch-light] label:after {
    background: var(--dx-secondary-bg)
}

[class*=switch-solid] input:checked+label:after {
    background-color: var(--dx-secondary-bg)
}

[class*=switch-solid] label {
    border: 1px solid var(--dx-border-color)
}

[class*=switch-solid] label:after {
    background: var(--dx-border-color)
}

[class*=switch-effect] label {
    box-shadow: inset 0 2px 4px 0 var(--dx-border-color);
    border: 1px solid var(--dx-border-color)
}

[class*=switch-effect] label:after {
    background: var(--dx-secondary-bg);
    box-shadow: 0 10px 15px -3px rgba(var(--dx-secondary-color-rgb),.5),0 4px 6px -4px rgba(var(--dx-secondary-color-rgb),.5)
}

.switch-square label {
    border-radius: .625rem
}

.switch-square label:after {
    border-radius: .625rem
}

.switch-text label:after {
    content: "N";
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center
}

.switch-text input:checked+label:after {
    color: #fff
}

.switch-icon label:after {
    content: "";
    font-family: RemixIcon
}

.switch-icon input:checked+label:after {
    content: ""
}

.form-check {
    min-height: 1.5rem;
    margin-bottom: 0
}

.form-check .form-check-input,.form-check .form-check-label {
    cursor: pointer
}

.form-check [type=checkbox]:checked {
    background-size: .65rem .65rem
}

.card-checkbox svg {
    width: 2.375rem
}

.card-checkbox .form-check-selected {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid transparent;
    cursor: pointer
}

.card-checkbox .form-check-selected:hover {
    background-color: var(--dx-tertiary-bg)
}

.card-checkbox .form-check-selected:has(:checked) {
    background-color: var(--dx-primary-bg-subtle);
    border-color: var(--dx-primary-bg-subtle);
    color: var(--dx-primary)
}

#taskList .completed {
    text-decoration: line-through;
    color: var(--dx-secondary-color)
}

.input-spin-group {
    width: 8rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.input-spin-group .input-spin {
    border-radius: 0;
    padding: 0;
    text-align: center
}

.input-spin-group .input-spin.form-control {
    display: block;
    height: 2.5rem;
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--dx-border-color)
}

.input-spin-group .input-spin-plus,.input-spin-group .input-spin-minus {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dx-border-color);
    background-color: transparent;
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .input-spin-group .input-spin-plus,.input-spin-group .input-spin-minus {
        transition: none
    }
}

.input-spin-group .input-spin-plus svg,.input-spin-group .input-spin-minus svg {
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .input-spin-group .input-spin-plus svg,.input-spin-group .input-spin-minus svg {
        transition: none
    }
}

.input-spin-group .input-spin-minus:where([dir=ltr],[dir=ltr] *) {
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
    border-right-width: 0px
}

.input-spin-group .input-spin-plus:where([dir=ltr],[dir=ltr] *) {
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
    border-left-width: 0px
}

.ql-snow .ql-editor h2 {
    line-height: 2
}

.ql-container {
    height: 13rem!important
}

:is(.ql-toolbar,.ql-container) .ql-snow {
    border-color: var(--dx-border-color)!important
}

.ql-snow .ql-picker {
    color: var(--dx-body-color)
}

.ql-snow .ql-stroke {
    stroke: var(--dx-body-color)
}

.ql-snow .ql-picker-options {
    background-color: var(--dx-secondary-bg)
}

:is(.ql-toolbar,.ql-container).ql-snow {
    border-color: var(--dx-border-color)
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded :is(.ql-picker-label,.ql-picker-options) {
    border-color: var(--dx-border-color)
}

.codex-editor .codex-editor__redactor {
    padding-bottom: 0!important
}

.codex-editor :is(.ce-toolbar__plus,.ce-toolbar__settings-btn) {
    color: var(--dx-body-color)
}

@media(hover: hover) {
    .codex-editor :is(.ce-toolbar__settings-btn,.ce-toolbar__plus):hover {
        background-color:var(--dx-tertiary-bg)
    }
}

.codex-editor .ce-block--selected .ce-block__content {
    background-color: var(--dx-primary-bg-subtle)
}

.codex-editor .ce-popover {
    --color-background: var(--dx-secondary-bg);
    --color-border: var(--dx-border-color);
    --color-text-primary: var(--dx-body-color);
    --color-text-secondary: var(--dx-secondary-color);
    --color-background-item-hover: var(--dx-tertiary-bg)
}

.codex-editor .cdx-marker {
    background-color: var(--dx-warning-bg-subtle)
}

.codex-editor .cdx-search-field {
    background-color: var(--dx-tertiary-bg);
    border-color: var(--dx-border-color)
}

.cdx-block .cdx-attaches {
    --color-line: var(--dx-border-color);
    --color-bg: var(--dx-secondary-bg);
    --color-bg-secondary: var(--dx-tertiary-bg);
    --color-bg-secondary--hover: var(--dx-tertiary-bg);
    --color-text-secondary: var(--dx-secondary-color)
}

@media(max-width: 650px) {
    :is(.ce-toolbar__settings-btn,.ce-toolbar__plus) {
        border-color:var(--dx-border-color);
        background-color: var(--dx-secondary-bg)
    }
}

th {
    font-weight: 500
}

.border-separate {
    border-collapse: separate
}

.border-separate tr :is(td,th) {
    border: 1px solid var(--dx-border-color)
}

.border-separate.border-spacing-2 {
    border-spacing: .25rem .25rem
}

.table-separate {
    border-collapse: separate!important;
    border-spacing: 0 8px!important
}

.table-separate td {
    border-top: 1px solid var(--dx-border-color);
    border-bottom: 1px solid var(--dx-border-color)
}

.table-separate td:first-child {
    border-top-left-radius: .625rem;
    border-bottom-left-radius: .625rem;
    border-left: 1px solid var(--dx-border-color)
}

.table-separate td:last-child {
    border-top-right-radius: .625rem;
    border-bottom-right-radius: .625rem;
    border-right: 1px solid var(--dx-border-color)
}

.table-striped-even>tbody>tr:nth-child(2n)>td {
    background-color: var(--dx-tertiary-bg)
}

.table-color-primary {
    --dx-table-striped-bg: var(--dx-primary-bg-subtle)
}

.table-primary {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-primary-rgb), .15);
    --dx-table-border-color: rgba(var(--dx-primary-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-primary-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-primary-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-primary-rgb), .1)
}

.table-color-secondary {
    --dx-table-striped-bg: var(--dx-secondary-bg-subtle)
}

.table-secondary {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-secondary-rgb), .15);
    --dx-table-border-color: rgba(var(--dx-secondary-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-secondary-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-secondary-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-secondary-rgb), .1)
}

.table-color-success {
    --dx-table-striped-bg: var(--dx-success-bg-subtle)
}

.table-success {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-success-rgb), .15);
    --dx-table-border-color: rgba(var(--dx-success-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-success-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-success-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-success-rgb), .1)
}

.table-color-info {
    --dx-table-striped-bg: var(--dx-info-bg-subtle)
}

.table-info {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-info-rgb), .15);
    --dx-table-border-color: rgba(var(--dx-info-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-info-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-info-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-info-rgb), .1)
}

.table-color-warning {
    --dx-table-striped-bg: var(--dx-warning-bg-subtle)
}

.table-warning {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-warning-rgb), .15);
    --dx-table-border-color: rgba(var(--dx-warning-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-warning-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-warning-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-warning-rgb), .1)
}

.table-color-danger {
    --dx-table-striped-bg: var(--dx-danger-bg-subtle)
}

.table-danger {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-danger-rgb), .15);
    --dx-table-border-color: rgba(var(--dx-danger-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-danger-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-danger-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-danger-rgb), .1)
}

.table-color-light {
    --dx-table-striped-bg: var(--dx-light-bg-subtle)
}

.table-light {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-light-rgb), .15);
    --dx-table-border-color: rgba(var(--dx-light-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-light-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-light-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-light-rgb), .1)
}

.table-color-dark {
    --dx-table-striped-bg: var(--dx-dark-bg-subtle)
}

.table-dark {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-dark-rgb), .15);
    --dx-table-border-color: rgba(var(--dx-dark-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-dark-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-dark-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-dark-rgb), .1)
}

.table-color-pink {
    --dx-table-striped-bg: var(--dx-pink-bg-subtle)
}

.table-pink {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-pink-rgb), .15);
    --dx-table-border-color: rgba(var(--dx-pink-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-pink-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-pink-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-pink-rgb), .1)
}

.table-color-orange {
    --dx-table-striped-bg: var(--dx-orange-bg-subtle)
}

.table-orange {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-orange-rgb), .15);
    --dx-table-border-color: rgba(var(--dx-orange-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-orange-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-orange-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-orange-rgb), .1)
}

.table-color-indigo {
    --dx-table-striped-bg: var(--dx-indigo-bg-subtle)
}

.table-indigo {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-indigo-rgb), .15);
    --dx-table-border-color: rgba(var(--dx-indigo-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-indigo-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-indigo-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-indigo-rgb), .1)
}

.table-card {
    margin-left: calc(var(--dx-spacer) * -1);
    margin-right: calc(var(--dx-spacer) * -1)
}

.table-card :is(th,td):first-child {
    padding-left: var(--dx-spacer)!important
}

.table-card :is(th,td):last-child {
    padding-right: var(--dx-spacer)!important
}

.form-wizard .step-indicators {
    display: flex;
    gap: 1rem
}

.form-wizard .step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    cursor: pointer
}

.form-wizard .step-dot .step-number {
    background: var(--dx-tertiary-bg);
    color: var(--dx-secondary-color);
    font-weight: var(--dx-font-weight-semibold);
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .form-wizard .step-dot .step-number {
        transition: none
    }
}

.form-wizard .step-dot .step-number {
    font-size: .875rem
}

.form-wizard .step-dot.active .step-number {
    background: linear-gradient(135deg,var(--dx-primary) 0%,var(--dx-secondary) 100%);
    color: #fff
}

.form-wizard .step-dot.completed .step-number {
    background: var(--dx-success-bg-subtle);
    color: var(--dx-success)
}

.form-wizard .requirement-item.valid {
    color: var(--dx-success)
}

.form-wizard .requirement-item.invalid {
    color: var(--dx-danger)
}

.form-wizard .success-animation {
    animation: bounceIn .8s ease-out
}

@keyframes bounceIn {
    0% {
        transform: scale(.3);
        opacity: 0
    }

    50% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(.9)
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3)
    }

    50% {
        opacity: 1;
        transform: scale(1.05)
    }

    70% {
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }

    to {
        transform: scale(1)
    }
}

.digital-hero-section {
    background-image: url(../images/digital-hero-bg.jpg);
    background-size: cover;
    background-position: center;
    padding: 160px 0 100px
}

.digital-hero-section .digital-hero-slider-item .digital-hero-slider-content .digital-hero-slider-heading {
    font-size: 4.3rem
}

.digital-hero-section .digital-hero-slider-item .digital-hero-slider-content .digital-hero-slider-desc {
    max-width: 600px
}

@media(max-width: 767px) {
    .digital-hero-section .digital-hero-slider-item .digital-hero-slider-content .digital-hero-slider-heading {
        font-size:2rem
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .digital-hero-section .digital-hero-slider-item .digital-hero-slider-content .digital-hero-slider-heading {
        font-size:3rem
    }
}

.digital-hero-section .digital-hero-slider-item .digital-hero-slider-box {
    width: 196px
}

.digital-hero-section .digital-hero-slider-item .digital-hero-slider-box span,.digital-hero-section .digital-hero-slider-item .digital-hero-slider-badge span {
    background: #ffffff14;
    border: 1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.digital-hero-section .digital-hero-swiper-navigation {
    bottom: -2rem;
    left: -11rem
}

.digital-hero-section .digital-hero-swiper-navigation .digital-hero-swiper-btn .digital-hero-nav-btn {
    background: #ffffff14;
    border: 1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    position: relative;
    transition: .5s ease-in-out
}

.digital-hero-section .digital-hero-swiper-navigation .digital-hero-swiper-btn .digital-hero-nav-btn:hover {
    background-color: #fff;
    color: #000
}

.digital-hero-section .digital-hero-swiper-navigation .digital-hero-swiper-svg {
    width: 52rem
}

@media(max-width: 767px) {
    .digital-hero-section {
        padding:100px 0 50px
    }
}

.startup-home-section {
    padding: 100px 0
}

.startup-home-section .st-home-content .st-home-bitmoji {
    top: -40px;
    right: -33px;
    z-index: 1;
    transform: rotate(7deg)
}

.startup-home-section .st-home-content .st-home-heading {
    font-size: 4.7rem
}

@media(max-width: 767px) {
    .startup-home-section .st-home-content .st-home-heading {
        font-size:2rem
    }
}

@media(min-width: 768px)and (max-width:1535px) {
    .startup-home-section .st-home-content .st-home-heading {
        font-size:3rem
    }
}

.startup-home-section .st-home-image {
    margin-bottom: -7rem;
    height: 50rem
}

.startup-home-section .st-home-image .st-home-image-border {
    top: 30px;
    right: 30px
}

@media(max-width: 1535px) {
    .startup-home-section .st-home-image {
        height:auto
    }
}

.automation-hero-section {
    background: url(../images/automation-hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover
}

.automation-hero-section .automation-hero-sparkle1 {
    top: -6%;
    right: 5%;
    animation: sparklePulse 2.5s ease-in-out infinite
}

.automation-hero-section .automation-hero-sparkle2 {
    bottom: 21%;
    left: 6%;
    animation: sparklePulse 2.5s ease-in-out infinite
}

.automation-hero-section .automation-hero-title {
    font-size: 5rem
}

.automation-hero-section .automation-hero-title span {
    background: linear-gradient(179.14deg,#fff 7.77%,#171717 120.01%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text
}

@media(max-width: 767px) {
    .automation-hero-section .automation-hero-title {
        font-size:2rem
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .automation-hero-section .automation-hero-title {
        font-size:4rem
    }
}

.automation-hero-section .automation-hero-desc {
    max-width: 51rem
}

.automation-hero-section .automation-hero-mockup {
    height: 380px
}

.automation-hero-section .automation-hero-mockup .automation-line-animate {
    stroke-dasharray: 8 14;
    animation: automationdashMove 6s linear infinite
}

.automation-hero-section .automation-hero-mockup .automation-line-animate.reverse {
    animation-direction: reverse
}

@keyframes automationdashMove {
    to {
        stroke-dashoffset: -300
    }
}

.automation-hero-section .automation-hero-mockup .automation-dotOuter {
    fill: none;
    stroke: #5c3e94;
    stroke-width: 2;
    opacity: .4;
    animation: automation-pulse 2s infinite
}

.automation-hero-section .automation-hero-mockup .automation-dotInner {
    fill: #5c3e94
}

@keyframes automation-pulse {
    0% {
        r: 8;
        opacity: .6
    }

    50% {
        r: 14;
        opacity: 0
    }

    to {
        r: 8;
        opacity: .6
    }
}

.automation-hero-section .automation-hero-mockup .automation-hero-mockup-icon1 {
    transform: translate(187px,-49px)
}

.automation-hero-section .automation-hero-mockup .automation-hero-mockup-icon2 {
    transform: translate(187px,29px)
}

.automation-hero-section .automation-hero-mockup .automation-hero-mockup-icon3 {
    transform: translate(-106px,-49px)
}

.automation-hero-section .automation-hero-mockup .automation-hero-mockup-icon4 {
    transform: translate(-106px,29px)
}

.automation-hero-section .automation-hero-mockup .automation-hero-card {
    padding: 1px;
    transform: translate(13px)
}

.automation-hero-section .automation-hero-mockup .automation-hero-card .automation-hero-glow {
    position: absolute;
    inset: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(#5C3E94,#5C3E94,transparent);
    transform: rotate(45deg);
    animation: moveGlow 5s linear infinite;
    offset-path: rect(0% auto 100% auto);
    pointer-events: none
}

.automation-hero-section .automation-hero-mockup .automation-hero-card .automation-hero-glow-card {
    background-image: radial-gradient(circle farthest-corner at 0% 0%,#281c42,#020202)
}

.automation-hero-section .automation-hero-mockup.right .automation-hero-card {
    transform: translate(13px)
}

@media(max-width: 1535px) {
    .automation-hero-section .automation-hero-mockup .automation-hero-mockup-icon1 {
        transform:translate(23px,-49px)
    }

    .automation-hero-section .automation-hero-mockup .automation-hero-mockup-icon2 {
        transform: translate(23px,29px)
    }

    .automation-hero-section .automation-hero-mockup .automation-hero-mockup-icon3 {
        transform: translate(30px,-49px)
    }

    .automation-hero-section .automation-hero-mockup .automation-hero-mockup-icon4 {
        transform: translate(30px,29px)
    }
}

.app-hero-section {
    padding: 200px 0 0
}

.app-hero-section:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background-image: url(../images/app-hero-bg.jpg);
    z-index: -1;
    opacity: .8
}

.app-hero-section .app-hero-content-wrapper .app-hero-content .app-hero-heading {
    font-size: 4rem
}

@media(max-width: 767px) {
    .app-hero-section .app-hero-content-wrapper .app-hero-content .app-hero-heading {
        font-size:2rem
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .app-hero-section .app-hero-content-wrapper .app-hero-content .app-hero-heading {
        font-size:3rem
    }
}

.app-hero-section .app-hero-content-wrapper .app-hero-vector {
    position: absolute;
    top: -80px;
    left: 0;
    z-index: -1
}

.app-hero-section .app-hero-content-wrapper .app-hero-vector svg {
    min-width: 661px
}

@media(min-width: 768px)and (max-width:991px) {
    .app-hero-section .app-hero-content-wrapper .app-hero-vector {
        top:-34px
    }
}

.app-hero-section .app-hero-content-wrapper .app-hero-social-list {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -15px
}

.app-hero-section .app-hero-content-wrapper .app-hero-social-list .app-hero-social-icon:before {
    content: "";
    position: absolute;
    inset: 0;
    background: #5c3e94!important;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all .4s ease-in-out;
    z-index: 0
}

.app-hero-section .app-hero-content-wrapper .app-hero-social-list .app-hero-social-icon:hover {
    color: #fff!important
}

.app-hero-section .app-hero-content-wrapper .app-hero-social-list .app-hero-social-icon:hover:before {
    transform: rotate(0) scale(1);
    z-index: -1
}

.app-hero-section .app-hero-content-wrapper .avatar-group .avatar-1 {
    transform: rotate(-5deg)
}

.app-hero-section .app-hero-content-wrapper .avatar-group .avatar-2 {
    transform: rotate(5deg)
}

.app-hero-section .app-hero-content-wrapper .avatar-group .avatar-3 {
    transform: rotate(-5deg)
}

.app-hero-section .app-hero-content-wrapper .avatar-group .avatar-4 {
    transform: rotate(5deg)
}

.app-hero-section .app-hero-img .app-hero-img-circle {
    top: -10%;
    left: 7%
}

@media(max-width: 767px) {
    .app-hero-section {
        padding:110px 0 0
    }
}

.analytics-hero-section {
    position: relative;
    padding: 180px 0 300px
}

.analytics-hero-section .analytics-hero-image img {
    position: relative;
    animation: moveSquare 10s linear infinite
}

@keyframes moveSquare {
    0% {
        transform: translate(0)
    }

    25% {
        transform: translateY(-5px)
    }

    50% {
        transform: translate(5px,-5px)
    }

    75% {
        transform: translate(5px,5px)
    }

    to {
        transform: translate(0)
    }
}

.analytics-hero-section .analytics-wave-svg {
    width: 200%;
    height: 120px;
    animation: waveMove 12s linear infinite
}

.analytics-hero-section .analytics-hero-content .analytics-hero-title {
    font-size: 63px
}

.analytics-hero-section .analytics-hero-content .analytics-hero-title .analytics-hero-highlight {
    background-color: #f25912;
    color: #fff;
    display: inline-block;
    font-size: calc(13.2px + 1.5vw);
    line-height: 1.2;
    outline: calc(1.6px + .125vw) solid #5C3E94;
    padding: 6px calc(9.6px + .125vw);
    position: relative;
    transform: rotate(-3deg);
    z-index: 0
}

.analytics-hero-section .analytics-hero-content .analytics-hero-title .analytics-hero-highlight:before {
    background: #f25912;
    border-bottom: calc(1.6px + .125vw) dashed #5C3E94;
    border-right: calc(1.6px + .125vw) dashed #5C3E94;
    content: "";
    height: 100%;
    left: calc(7px + .3125vw);
    position: absolute;
    top: calc(7px + .3125vw);
    width: 100%;
    z-index: -2
}

.analytics-hero-section .analytics-hero-content .analytics-hero-title .analytics-hero-highlight:after {
    animation: dash 5s linear infinite;
    background: linear-gradient(90deg,#fff 50%,transparent 50%),linear-gradient(90deg,#fff 50%,transparent 50%),linear-gradient(0deg,#fff 50%,transparent 50%),linear-gradient(0deg,#fff 50%,transparent 50%);
    background-position: 0 0,100% 100%,0 100%,100% 0;
    background-repeat: repeat-x,repeat-x,repeat-y,repeat-y;
    background-size: 10px 1px,10px 1px,1px 10px,1px 10px;
    content: "";
    height: calc(100% + 4.8px + .375vw);
    left: -6px;
    position: absolute;
    top: -7px;
    width: calc(100% + 4.8px + .375vw)
}

@keyframes dash {
    to {
        background-position: 100% 0,0 100%,0 0,100% 100%
    }
}

@media(max-width: 1199px) {
    .analytics-hero-section {
        padding:100px 0
    }

    .analytics-hero-section .analytics-hero-content .analytics-hero-title {
        font-size: 37px
    }
}

.crm-hero-section {
    padding: 150px 0 100px
}

.crm-hero-section:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 64rem;
    background-image: linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);
    background-size: 40px 40px;
    pointer-events: none
}

.crm-hero-section .crm-hero-blur-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1
}

.crm-hero-section .crm-hero-blur-wrapper .crm-hero-blur-left {
    position: absolute;
    top: -120px;
    left: -200px;
    width: 500px;
    height: 500px;
    background: #f25912;
    filter: blur(220px);
    border-radius: 60% 40% 50% 50%;
    opacity: .45
}

.crm-hero-section .crm-hero-blur-wrapper .crm-hero-blur-center {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translate(-50%);
    width: 800px;
    height: 420px;
    background: #5c3e94;
    filter: blur(240px);
    border-radius: 50%;
    opacity: .55
}

.crm-hero-section .crm-hero-blur-wrapper .crm-hero-blur-right {
    position: absolute;
    top: -150px;
    right: -220px;
    width: 450px;
    height: 450px;
    background: #16a34a;
    filter: blur(200px);
    border-radius: 40% 60% 60% 40%;
    opacity: .4
}

.crm-hero-section .crm-hero-heading {
    font-size: 5rem;
    line-height: 1.3
}

.crm-hero-section .crm-hero-desc {
    max-width: 47rem
}

@media(max-width: 767px) {
    .crm-hero-section .crm-hero-heading {
        font-size:2rem
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .crm-hero-section .crm-hero-heading {
        font-size:3rem
    }
}

.crm-hero-section .crm-hero-girl-vector {
    top: -17%;
    right: 3%
}

.crm-hero-section .crm-hero-card-1 {
    top: 56%;
    left: -12%;
    animation: floatBottom 5s ease-in-out infinite
}

.crm-hero-section .crm-hero-boy-vector {
    top: 25%;
    left: -10%;
    animation: floatTop 5s ease-in-out infinite
}

.crm-hero-section .crm-hero-card-2 {
    top: 17%;
    right: -14%;
    animation: floatTop 8s ease-in-out infinite
}

@media(max-width: 767px) {
    .crm-hero-section {
        padding:100px 0
    }
}

.product-hero-section {
    background-image: url(../images/product-hero-bg.jpg);
    background-size: cover
}

.product-hero-section .product-hero-marquee {
    top: 22%
}

.product-hero-section .product-hero-marquee .product-hero-big-text {
    font-size: 13rem;
    background: linear-gradient(to bottom,#ffffff 0%,rgba(255,255,255,.6) 40%,rgba(255,255,255,0) 70%,transparent 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

@media(max-width: 767px) {
    .product-hero-section .product-hero-marquee .product-hero-big-text {
        font-size:5rem
    }
}

.product-hero-section .product-hero-card {
    background-color: #ffffff80;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.saas-v1-hero-section {
    background: linear-gradient(to bottom,#000 0% 30%,#010002 35%,#06030f 40%,#1f1436 50%,#3b2766 65%,#5c3e94 78%,#7e56da66 89%,#efecf4 97%,#eeebf4)
}

.saas-v1-hero-section .saas-v1-hero-badge1 {
    left: 12%;
    top: 35%;
    animation: badgeFloat 4s ease-in-out infinite
}

.saas-v1-hero-section .saas-v1-hero-badge1 svg {
    top: -19%;
    right: -10%
}

.saas-v1-hero-section .saas-v1-hero-badge2 {
    top: 14%;
    right: 13%;
    animation: bounce 10s infinite
}

.saas-v1-hero-section .saas-v1-hero-badge2 svg {
    bottom: -15%;
    left: -11%;
    transform: scale(-1)
}

.saas-v1-hero-section .saas-v1-hero-title {
    font-size: 4rem
}

.saas-v1-hero-section .saas-v1-hero-desc {
    max-width: 650px
}

.saas-v1-hero-section .saas-v1-hero-dashboard {
    background-color: #ffffff1f;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.saas-v1-hero-section .saas-v1-hero-chatbox {
    width: 650px;
    background-color: #ffffff1f;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    margin-top: -6%
}

@media(max-width: 767px) {
    .saas-v1-hero-section .saas-v1-hero-title {
        font-size:2rem
    }

    .saas-v1-hero-section .saas-v1-hero-chatbox {
        width: 90%
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .saas-v1-hero-section .saas-v1-hero-title {
        font-size:3rem
    }
}

.saas-v2-hero-section {
    background-image: linear-gradient(#00000080,#00000080),linear-gradient(#5c3e9480,#5c3e9480),url(../images/saas-v2-hero-bg.jpg);
    background-position: center;
    background-size: auto,auto,cover
}

.saas-v2-hero-section .saas-v2-hero-card2 {
    top: 41%;
    right: -7%;
    animation: floatTop 10s ease-in-out infinite
}

.project-hero-section {
    background-image: url(../images/project-main-bg.png);
    background-size: cover
}

.project-hero-section .project-hero-content .project-hero-badge .avatar-group .avatar-group-item {
    animation: floatAvatar 1s ease-in-out infinite
}

.project-hero-section .project-hero-content .project-hero-badge .avatar-group .avatar-group-item:nth-child(1) {
    animation-delay: 0s
}

.project-hero-section .project-hero-content .project-hero-badge .avatar-group .avatar-group-item:nth-child(2) {
    animation-delay: .3s
}

.project-hero-section .project-hero-content .project-hero-badge .avatar-group .avatar-group-item:nth-child(3) {
    animation-delay: .6s
}

@keyframes floatAvatar {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-3px)
    }

    to {
        transform: translateY(0)
    }
}

.project-hero-section .project-hero-content .project-hero-desc {
    max-width: 45rem;
    margin: 0 auto
}

.project-hero-section .project-hero-card {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 .2rem .4rem rgba(var(--dx-primary-rgb),.2)
}

.project-hero-section .project-hero-card img,.project-hero-section .project-hero-card .project-hero-card-inner {
    box-shadow: 0 .2rem .4rem rgba(var(--dx-primary-rgb),.2)
}

.healthcare-hero-section {
    background: linear-gradient(90deg,#7049b8,#5c3e94);
    padding: 240px 0 0
}

.healthcare-hero-section .healthcare-hero-heading svg:not(:root) {
    overflow: visible!important
}

.healthcare-hero-section .healthcare-hero-heading svg text {
    margin: 0;
    font-family: Poller One,sans-serif;
    letter-spacing: 5px;
    font-weight: 500;
    font-size: 13rem;
    line-height: 1;
    stroke-width: 1;
    stroke: #fff;
    text-transform: uppercase;
    animation: svgTextAnimation 10s infinite alternate
}

@media(min-width: 992px)and (max-width:1199px) {
    .healthcare-hero-section .healthcare-hero-heading svg text {
        font-size:7rem!important
    }
}

@media(min-width: 1200px)and (max-width:1535px) {
    .healthcare-hero-section .healthcare-hero-heading svg text {
        font-size:9rem!important
    }
}

@keyframes svgTextAnimation {
    0% {
        fill: #fff0;
        stroke: #fff;
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        stroke-width: 1
    }

    70% {
        fill: #fff0;
        stroke: #fff
    }

    80% {
        fill: #fff0;
        stroke: #fff;
        stroke-width: 1
    }

    to {
        fill: #fff0;
        stroke: #fff;
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 1
    }
}

.healthcare-hero-section .healthcare-hero-doctor-img {
    margin-top: -60%
}

@media(max-width: 767px) {
    .healthcare-hero-section {
        padding:100px 0 0
    }

    .healthcare-hero-section .healthcare-hero-doctor-img {
        margin-top: 0%
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .healthcare-hero-section {
        padding:150px 0 0
    }

    .healthcare-hero-section .healthcare-hero-heading svg text {
        font-size: 5rem
    }
}

.conference-hero-section {
    background-image: url(../images/con-hero-bg.jpg);
    background-size: cover;
    background-position: center;
    padding: 350px 0 100px
}

.conference-hero-section .conference-hero-title {
    font-size: 7rem
}

@media(max-width: 991px) {
    .conference-hero-section {
        padding:100px 0
    }

    .conference-hero-section .conference-hero-title {
        font-size: 3rem
    }
}

@media(min-width: 992px)and (max-width:1199px) {
    .conference-hero-section {
        padding:150px 0
    }

    .conference-hero-section .conference-hero-title {
        font-size: 5rem
    }
}

.blog-hero-section .blog-main-hero-swiper {
    height: 45rem
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item {
    position: relative;
    overflow: hidden;
    height: 45rem
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-img {
    background-position: 50%!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: all 2s linear;
    transform: scale(.9)
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-img-one {
    background: linear-gradient(#00000080,#00000080),url(../images/blog-hero-bg1.jpg)
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-img-two {
    background: linear-gradient(#00000080,#00000080),url(../images/blog-hero-bg2.jpg)
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-img-three {
    background: linear-gradient(#00000080,#00000080),url(../images/blog-hero-bg3.jpg)
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner {
    position: absolute;
    inset: 100px;
    border: 1px solid var(--dx-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner .blog-hero-slider-layer {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner .blog-hero-slider-layer img {
    width: 100%
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner .blog-hero-slider-content {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner .blog-hero-slider-content .blog-hero-slider-heading .blog-hero-slider-title {
    font-size: 4.5rem;
    opacity: 0;
    transform-origin: top;
    transform: translate(-200px);
    transition: all 2.5s ease;
    letter-spacing: -1.06px;
    margin-top: 10px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner .blog-hero-slider-content .blog-hero-slider-heading .blog-hero-slider-title:before,.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner .blog-hero-slider-content .blog-hero-slider-heading .blog-hero-slider-title:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 135px;
    height: 1px;
    background-color: var(--dx-gray-600)
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner .blog-hero-slider-content .blog-hero-slider-heading .blog-hero-slider-title:before {
    left: 0
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner .blog-hero-slider-content .blog-hero-slider-heading .blog-hero-slider-title:after {
    left: auto;
    right: 0
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner .blog-hero-slider-content .blog-hero-slider-heading .blog-hero-meta {
    opacity: 0;
    transform-origin: top;
    transform: translate(200px);
    transition: all 1s ease;
    position: relative
}

.blog-hero-section .blog-main-hero-swiper .swiper-slide-active .blog-hero-slider-img {
    transform: scale(1.01)
}

.blog-hero-section .blog-main-hero-swiper .swiper-slide-active .blog-hero-slider-heading .blog-hero-slider-title,.blog-hero-section .blog-main-hero-swiper .swiper-slide-active .blog-hero-slider-heading .blog-hero-meta {
    opacity: 1!important;
    transform: translate(0)!important
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-pagination {
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: none
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-pagination .blog-hero-slider-pagination-dots {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    z-index: 1000;
    pointer-events: auto
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-pagination .blog-hero-slider-pagination-dots:before,.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-pagination .blog-hero-slider-pagination-dots:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 125px;
    height: 1px;
    background-color: var(--dx-gray-400)
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-pagination .blog-hero-slider-pagination-dots:before {
    right: calc(100% + 24px)
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-pagination .blog-hero-slider-pagination-dots:after {
    left: calc(100% + 24px)
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-pagination .blog-hero-slider-pagination-dots .swiper-pagination {
    display: flex;
    gap: 6px;
    position: relative;
    transform: none;
    top: 0;
    bottom: auto;
    margin-top: 0
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-pagination .blog-hero-slider-pagination-dots .swiper-pagination .swiper-pagination-bullet {
    width: 24px;
    height: 24px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
    transition: all .5s ease-in-out;
    position: relative;
    opacity: 1;
    font-size: 14px;
    font-weight: 600
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-pagination .blog-hero-slider-pagination-dots .swiper-pagination .swiper-pagination-bullet:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 100%;
    transition: all .5s ease-in-out
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-pagination .blog-hero-slider-pagination-dots .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    transform: scale(1.1);
    border-color: #fff;
    background-color: transparent
}

.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-navigation {
    position: absolute;
    left: 50%;
    right: 50px;
    bottom: auto;
    width: 43%;
    transform: translate(-50%);
    z-index: 100;
    pointer-events: auto
}

@media(max-width: 991px) {
    .blog-hero-section .blog-main-hero-swiper,.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item {
        height:25rem
    }

    .blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner {
        inset: 20px
    }

    .blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner .blog-hero-slider-content .blog-hero-slider-heading .blog-hero-slider-title {
        font-size: 2rem
    }
}

@media(min-width: 992px)and (max-width:1199px) {
    .blog-hero-section .blog-main-hero-swiper,.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item {
        height:35rem
    }

    .blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner {
        inset: 30px
    }
}

@media(min-width: 1200px)and (max-width:1535px) {
    .blog-hero-section .blog-main-hero-swiper,.blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item {
        height:40rem
    }

    .blog-hero-section .blog-main-hero-swiper .blog-hero-slider-item .blog-hero-slider-inner .blog-hero-slider-content .blog-hero-slider-heading .blog-hero-slider-title {
        font-size: 3.5rem
    }
}

.about-v1-hero-section {
    padding: 200px 0
}

.about-v1-hero-section:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 335px;
    background-color: #fff;
    bottom: 0;
    left: 0;
    z-index: -1
}

.about-v1-hero-section .about-v1-hero-title {
    font-size: 6.7rem
}

@media(min-width: 991px)and (max-width:1199px) {
    .about-v1-hero-section .about-v1-hero-title {
        font-size:4rem
    }
}

@media(min-width: 1200px)and (max-width:1535px) {
    .about-v1-hero-section .about-v1-hero-title {
        font-size:5rem
    }
}

.about-v1-hero-section .about-v1-hero-shape {
    margin-left: -30%;
    margin-top: -16%
}

.about-v1-hero-section .about-v1-hero-social .about-v1-hero-social-title {
    writing-mode: vertical-rl;
    letter-spacing: 2px
}

.about-v1-hero-section .about-v1-hero-img {
    background-image: url(../images/about-v1-hero-bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    height: 53rem
}

@media(max-width: 767px) {
    .about-v1-hero-section {
        padding:100px 0
    }

    .about-v1-hero-section:before {
        height: 150px
    }

    .about-v1-hero-section .about-v1-hero-title {
        font-size: 2rem
    }

    .about-v1-hero-section .about-v1-hero-img {
        height: 200px
    }
}

@media(min-width: 768px)and (max-width:991px) {
    .about-v1-hero-section {
        padding:150px 0
    }

    .about-v1-hero-section:before {
        height: 250px
    }

    .about-v1-hero-section .about-v1-hero-title {
        font-size: 4rem
    }

    .about-v1-hero-section .about-v1-hero-img {
        height: 300px
    }
}

.about-v2-hero-section .about-v2-hero-content .about-v2-hero-title .about-v2-hero-title-highlight .about-v2-hero-text-wrapper #textChanger {
    display: inline-block;
    transition: transform .4s ease,opacity .4s ease
}

.about-v2-hero-section .about-v2-hero-content .about-v2-hero-title .about-v2-hero-title-highlight .about-v2-hero-text-wrapper .slide-up-out {
    transform: translateY(-100%);
    opacity: 0
}

.about-v2-hero-section .about-v2-hero-content .about-v2-hero-title .about-v2-hero-title-highlight .about-v2-hero-text-wrapper .slide-up-in {
    transform: translateY(100%);
    opacity: 0
}

.about-v2-hero-section .about-v2-hero-content .about-v2-hero-title .about-v2-hero-title-highlight .about-v2-hero-title-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid var(--dx-border-color)
}

.about-v2-hero-section .about-v2-hero-content .about-v2-hero-title .about-v2-hero-title-highlight .about-v2-hero-title-corner.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none
}

.about-v2-hero-section .about-v2-hero-content .about-v2-hero-title .about-v2-hero-title-highlight .about-v2-hero-title-corner.top-right {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none
}

.about-v2-hero-section .about-v2-hero-content .about-v2-hero-title .about-v2-hero-title-highlight .about-v2-hero-title-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none
}

.about-v2-hero-section .about-v2-hero-content .about-v2-hero-title .about-v2-hero-title-highlight .about-v2-hero-title-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none
}

.service-single-hero-section .custom-btn img {
    filter: invert(1)
}

.service-single-hero-section .custom-btn:hover img {
    filter: invert(0)
}

.service-single-video-section .service-single-video {
    height: 570px
}

.service-v1-hero-section:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #fff;
    z-index: -1
}

.career-hero-section .career-hero-content .career-hero-title .career-hero-highlight-text {
    line-height: .9!important
}

.career-hero-section .career-hero-content .career-hero-title .career-hero-highlight-text .career-hero-corner {
    width: 9px;
    height: 9px;
    position: absolute
}

.career-hero-section .career-hero-content .career-hero-title .career-hero-highlight-text .career-hero-corner.tl {
    top: -4px;
    left: -4px
}

.career-hero-section .career-hero-content .career-hero-title .career-hero-highlight-text .career-hero-corner.tr {
    top: -4px;
    right: -4px
}

.career-hero-section .career-hero-content .career-hero-title .career-hero-highlight-text .career-hero-corner.br {
    bottom: -4px;
    right: -4px
}

.career-hero-section .career-hero-content .career-hero-title .career-hero-highlight-text .career-hero-corner.bl {
    bottom: -4px;
    left: -4px
}

.career-hero-section .career-hero-swiper:before {
    content: "";
    position: absolute;
    top: -70px;
    left: -10%;
    width: 120%;
    height: 100px;
    background: #fff;
    border-radius: 100%;
    z-index: 100
}

.career-hero-section .career-hero-swiper:after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -10%;
    width: 120%;
    height: 100px;
    background: #fff;
    border-radius: 100%;
    z-index: 1000
}

.career-hero-section .career-hero-swiper .career-hero-swiper-img {
    height: 524px
}

.terms-hero-section .terms-hero-content .terms-hero-curve {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 120px
}

.privacy-policy-section .privacy-policy-tab {
    position: sticky;
    top: 100px
}

.feature-single-hero-section {
    background-image: url(../images/feature-single-hero-bg.png);
    background-size: cover;
    background-position: center
}

.help-center-hero-section {
    padding: 150px 0 200px;
    clip-path: ellipse(54% 100% at 50% 0%)
}

.help-center-hero-section .help-center-hero-search input::placeholder {
    color: var(--dx-bg-color);
    opacity: .6
}

.custom-hero-section {
    background-image: url(../images/custom-hero-bg.jpg);
    background-size: cover;
    background-position: center;
    padding: 200px 0
}

.custom-hero-section:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0202025b;
    inset: 0;
    z-index: -1
}

@media(min-width: 1536px) {
    .custom-hero-section .custom-hero-title {
        font-size:4rem
    }
}

.custom-hero-section .custom-hero-badge {
    clip-path: polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);
    bottom: -4%;
    right: 10%
}

@media(max-width: 767px) {
    .custom-hero-section {
        padding:100px 0
    }
}

.bg-startup-gradient {
    background: linear-gradient(to left,#2e0f53,var(--dx-primary))
}

.text-startup-gradient {
    background: linear-gradient(to left,#2e0f53,var(--dx-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.automation-body {
    background-color: #050119;
    color: #fff
}

.automation-body .bg-automation-gradient {
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    background: linear-gradient(90deg,rgba(126,86,218,.15) 15%,var(--dx-primary) 50%,rgba(126,86,218,.15) 85%);
    background-origin: border-box;
    background-clip: padding-box,border-box
}

.automation-body .bg-automation-gradient:after {
    content: "";
    position: absolute;
    inset: 1px;
    background-image: radial-gradient(circle farthest-corner at 0% 0%,#281c42a4,#020202);
    border-radius: inherit;
    z-index: -1
}

.contact-v1-body {
    position: relative
}

.contact-v1-body:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/contact-v1-bg.gif);
    z-index: -1;
    opacity: .06
}

.blog-container {
    max-width: 1765px;
    margin: 0 auto
}

.blog-container .blog-meta .blog-meta-divider {
    width: 25px;
    height: 1px;
    background-color: #000;
    display: inline-block
}

.blog-container .ls-2 {
    letter-spacing: 1.5px
}

.blog-container .blog-book-mark {
    top: 14px;
    right: 20px;
    color: #000;
    transition: all .3s ease
}

.blog-container .book-mark.active {
    background-color: #0e0e0f;
    border-color: #0e0e0f
}

.digital-feature-section .digital-feature-item .digital-feature-card:hover {
    color: #fff!important
}

.digital-feature-section .digital-feature-item .digital-feature-card:hover .digital-feature-card-desc {
    color: #ffffffb3!important
}

.digital-feature-section .digital-feature-item .digital-feature-card:hover .digital-feature-btnicon {
    background-color: #5c3e94!important;
    color: #fff
}

.digital-feature-section .digital-feature-item .digital-feature-card:hover .digital-feature-icon {
    filter: invert(1) brightness(1)
}

.startup-features-section .st-features-card {
    padding: 20px 0 0 20px;
    border-top: 1px solid var(--dx-border-color);
    border-left: 1px solid var(--dx-border-color)
}

.startup-features-section .st-features-card .st-features-card-body {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    transition: color .4s ease;
    z-index: 1
}

.startup-features-section .st-features-card .st-features-card-body:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right,#2e0f53 50%,var(--dx-primary) 50%);
    transform: translateY(100%) rotate(-10deg);
    transition: transform .6s cubic-bezier(.22,1,.36,1);
    z-index: -1;
    opacity: .9
}

.startup-features-section .st-features-card .st-features-card-body .st-features-card-desc {
    color: var(--dx-secondary-color)
}

@media(min-width: 768px)and (max-width:991px) {
    .startup-features-section .st-features-card .st-features-card-body .st-features-card-desc {
        min-height:125px
    }
}

@media(min-width: 1199px)and (max-width:1535px) {
    .startup-features-section .st-features-card .st-features-card-body .st-features-card-desc {
        min-height:100px
    }
}

.startup-features-section .st-features-card .st-features-card-body .st-features-icon {
    background: linear-gradient(to left,#2e0f53,var(--dx-primary));
    color: #fff
}

.startup-features-section .st-features-card .st-features-card-body .st-features-number {
    background: linear-gradient(to left,#2e0f53,var(--dx-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 68px;
    position: relative;
    z-index: 1;
    transition: all .4s
}

.startup-features-section .st-features-card .st-features-card-body .st-features-number:after {
    position: absolute;
    z-index: 1;
    content: "";
    height: 2px;
    width: 60px;
    left: 0;
    top: 11px;
    transition: all .4s;
    background: linear-gradient(to left,#2e0f53,var(--dx-primary))
}

.startup-features-section .st-features-card .st-features-card-body:hover,.startup-features-section .st-features-card .st-features-card-body:hover .st-features-card-desc {
    color: #fff
}

.startup-features-section .st-features-card .st-features-card-body:hover .st-features-icon {
    background: #fff
}

.startup-features-section .st-features-card .st-features-card-body:hover .st-features-icon i {
    background: linear-gradient(to left,#2e0f53,var(--dx-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.startup-features-section .st-features-card .st-features-card-body:hover:before {
    transform: translateY(0) rotate(0)
}

.startup-features-section .st-features-card .st-features-card-body:hover .st-features-card-line {
    background: #fff
}

.startup-features-section .st-features-card .st-features-card-body:hover .st-features-number {
    background: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all .4s;
    padding-left: 0
}

.startup-features-section .st-features-card .st-features-card-body:hover .st-features-number:after {
    background: #fff;
    transition: all .4s;
    left: 26px
}

.automation-feature-section .automation-feature-card .automation-feature-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    background: rgba(var(--dx-primary-rgb),.4);
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(1);
    animation: bgwaves 2.5s infinite;
    z-index: 1
}

.automation-feature-section .automation-feature-card .automation-feature-wave:nth-child(2) {
    animation-delay: .5s
}

.automation-feature-section .automation-feature-card .automation-feature-wave:nth-child(3) {
    animation-delay: 1s
}

.automation-feature-section .automation-feature-card .automation-feature-dot {
    width: 54%;
    position: absolute;
    overflow: hidden;
    left: 50%;
    top: 50%;
    height: 1px;
    transform: translate(-50%,-50%)
}

.automation-feature-section .automation-feature-card .automation-feature-dot span {
    top: 50%;
    left: 0;
    width: 100%;
    position: absolute;
    border: 1px dotted #fff;
    transform: translateY(-50%)
}

.automation-feature-section .automation-feature-card .automation-lollipop-wrapper .automation-chart-legend span {
    width: 10px;
    height: 10px
}

.automation-feature-section .automation-feature-card .automation-lollipop-wrapper .automation-lollipop-chart {
    height: 180px;
    width: 100%
}

.automation-feature-section .automation-feature-card .automation-lollipop-wrapper .automation-lollipop-chart .automation-lollipop-chart-item {
    flex: 1;
    text-align: center
}

.automation-feature-section .automation-feature-card .automation-lollipop-wrapper .automation-lollipop-chart .automation-lollipop-chart-item .automation-lollipop-chart-line {
    position: relative;
    height: 160px;
    width: 2px;
    margin: auto;
    background: var(--dx-gray-700)
}

.automation-feature-section .automation-feature-card .automation-lollipop-wrapper .automation-lollipop-chart .automation-lollipop-chart-item .automation-lollipop-chart-line .automation-lollipop-chart-dot {
    position: absolute;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    bottom: calc(var(--val) * 1%);
    transform: translate(-50%);
    animation: lollipop-chart-dot 2.5s ease-in-out infinite;
    animation-delay: calc(var(--val) * .02s)
}

@keyframes lollipop-chart-dot {
    0% {
        transform: translate(-50%)
    }

    50% {
        transform: translate(-50%,-6px)
    }

    to {
        transform: translate(-50%)
    }
}

.automation-feature-section .automation-feature-card .automation-feature-circle {
    width: 270px;
    height: 270px;
    position: relative
}

.automation-feature-section .automation-feature-card .automation-feature-circle .automation-feature-circle-radius {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(var(--dx-primary-rgb),.9);
    border-radius: 50%;
    animation: spin 16s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center
}

.automation-feature-section .automation-feature-card .automation-feature-circle .automation-feature-circle-radius .automation-feature-circle-dot {
    position: absolute;
    min-width: 1rem;
    min-height: 1rem
}

.automation-feature-section .automation-feature-card .automation-feature-circle .automation-feature-circle-radius .automation-feature-circle-dot.automation-dot-outer,.automation-feature-section .automation-feature-card .automation-feature-circle .automation-feature-circle-radius .automation-feature-circle-dot.automation-dot-middle,.automation-feature-section .automation-feature-card .automation-feature-circle .automation-feature-circle-radius .automation-feature-circle-dot.automation-dot-inner {
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%)
}

.automation-feature-section .automation-feature-card .automation-feature-circle .automation-feature-circle-radius.automation-outer-circle {
    animation-duration: 18s
}

.automation-feature-section .automation-feature-card .automation-feature-circle .automation-feature-circle-radius.automation-middle-circle {
    width: 200px;
    height: 200px;
    inset: 35px;
    animation-duration: 14s
}

.automation-feature-section .automation-feature-card .automation-feature-circle .automation-feature-circle-radius.automation-inner-circle {
    width: 130px;
    height: 130px;
    inset: 70px;
    animation-duration: 10s
}

@media(max-width: 767px) {
    .automation-feature-section .automation-feature-card .automation-feature-circle {
        width:200px;
        height: 200px
    }

    .automation-feature-section .automation-feature-card .automation-feature-circle .automation-feature-circle-radius.automation-middle-circle {
        width: 130px;
        height: 130px
    }

    .automation-feature-section .automation-feature-card .automation-feature-circle .automation-feature-circle-radius.automation-inner-circle {
        width: 60px;
        height: 60px
    }
}

.automation-feature-section .automation-feature-card .automation-feature-lng {
    background-image: linear-gradient(91.06deg,#5c3e94 6.82%,#6766ff33 37.09% 67.36%,#5c3e94 96.43%)
}

@keyframes bounce {
    0%,to {
        translate: 0px 36px
    }

    50% {
        translate: 0px 46px
    }
}

@keyframes bounce2 {
    0%,to {
        translate: 0px 46px
    }

    50% {
        translate: 0px 56px
    }
}

@keyframes umbral {
    0% {
        stop-color: #d3a5102e
    }

    50% {
        stop-color: #d3a51084
    }

    to {
        stop-color: #d3a5102e
    }
}

@keyframes partciles {
    0%,to {
        translate: 0px 16px
    }

    50% {
        translate: 0px 6px
    }
}

.automation-feature-section .automation-feature-card #particles {
    animation: partciles 4s ease-in-out infinite
}

.automation-feature-section .automation-feature-card #animatedStop {
    animation: umbral 4s infinite
}

.automation-feature-section .automation-feature-card #bounce {
    animation: bounce 4s ease-in-out infinite;
    translate: 0px 36px
}

.automation-feature-section .automation-feature-card #bounce2 {
    animation: bounce2 4s ease-in-out infinite;
    translate: 0px 46px;
    animation-delay: .5s
}

.app-feature-section .app-feature-card .app-feature-notification-card .app-feature-notification-icon {
    top: -7%;
    left: -9%;
    transform-origin: top center;
    animation: bellRing 2s infinite ease-in-out
}

.app-feature-section .app-feature-card .app-feature-chat-card .chat {
    max-width: 80%;
    border-radius: 14px
}

.app-feature-section .app-feature-card .app-feature-chat-card .chat-1 {
    border-bottom-right-radius: 5px
}

.app-feature-section .app-feature-card .app-feature-chat-card .chat-3 {
    border-bottom-left-radius: 5px
}

.app-feature-section .app-feature-card .app-feature-chat-card .chat-placeholder {
    padding: 12px;
    border-radius: 16px
}

.app-feature-section .app-feature-card .app-feature-chat-card .chat-placeholder .typ-line {
    height: 8px;
    border-radius: 10px
}

.app-feature-section .app-feature-card .app-feature-chat-card .chat-placeholder .typ-line:nth-child(1) {
    width: 90%
}

.app-feature-section .app-feature-card .app-feature-chat-card .chat-placeholder .typ-line:nth-child(2) {
    width: 80%
}

.app-feature-section .app-feature-card .app-feature-chat-card .chat-placeholder .typ-line:nth-child(3) {
    width: 60%
}

.app-feature-section .app-feature-card .app-feature-chat-card .chat-input {
    padding: 12px 16px;
    border-radius: 20px
}

.app-feature-section .app-feature-card .app-feature-fingerprint-card {
    position: relative;
    width: 160px;
    height: 160px;
    cursor: pointer;
    animation: flicker 3s infinite ease-in-out;
    border-radius: 50%
}

.app-feature-section .app-feature-card .app-feature-fingerprint-card .app-feature-fingerprint-svg {
    width: 100%;
    height: 100%;
    color: var(--dx-gray-200);
    transition: transform .2s ease,filter .3s ease
}

.app-feature-section .app-feature-card .app-feature-fingerprint-card .app-fingerprint-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right,transparent,var(--dx-gray-200),transparent);
    opacity: 0
}

.app-feature-section .app-feature-card .app-feature-fingerprint-card .app-fingerprint-matrix-rain {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(to bottom,rgba(var(--dx-gray-200),.1),transparent);
    overflow: hidden;
    border-radius: 50%
}

.app-feature-section .app-feature-card .app-feature-fingerprint-card .app-fingerprint-matrix-rain:before {
    content: "101010 1100 0011 0101 1001 1110 0010 1101";
    position: absolute;
    color: var(--dx-gray-200);
    font-size: 14px;
    opacity: .2;
    animation: rain 1.5s infinite linear
}

.app-feature-section .app-feature-card .app-feature-fingerprint-card .app-fingerprint-status {
    letter-spacing: 2px;
    animation: glitch-text 2s infinite
}

.app-feature-section .app-feature-card .app-feature-fingerprint-card:hover .app-feature-fingerprint-svg {
    transform: scale(1.1)
}

.app-feature-section .app-feature-card .app-feature-fingerprint-card:hover .app-fingerprint-scan-line {
    animation: scan 1s infinite linear;
    opacity: .7
}

.app-feature-section .app-feature-card .app-feature-fingerprint-card:hover .app-fingerprint-matrix-rain {
    opacity: .5
}

@keyframes flicker {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .9
    }

    75% {
        opacity: .95
    }
}

@keyframes scan {
    0% {
        transform: translateY(0);
        opacity: .7
    }

    50% {
        opacity: 1
    }

    to {
        transform: translateY(200px);
        opacity: .7
    }
}

@keyframes rain {
    0% {
        transform: translateY(-100%)
    }

    to {
        transform: translateY(100%)
    }
}

@keyframes glitch-text {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-1px,1px)
    }

    40% {
        transform: translate(1px,-1px)
    }

    60% {
        transform: translate(-1px)
    }

    80% {
        transform: translate(1px)
    }

    to {
        transform: translate(0)
    }
}

.app-feature-section .app-feature-card .app-feature-icon {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.app-feature-section .app-feature-card .app-feature-icon:before {
    content: "";
    position: absolute;
    inset: 0;
    background: #5c3e94;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all .4s ease-in-out;
    z-index: 0
}

.app-feature-section .app-feature-card:hover .app-feature-icon i {
    color: #fff!important
}

.app-feature-section .app-feature-card:hover .app-feature-icon:before {
    transform: rotate(0) scale(1);
    z-index: -1
}

@media(max-width: 991px) {
    .app-feature-section .app-feature-card {
        border-radius:1rem!important
    }

    .app-feature-section .app-feature-card .app-feature-fingerprint-card .app-feature-fingerprint-svg {
        width: 75%;
        height: 75%
    }
}

.app-feature-section .app-feature-btn-wrapper .app-feature-line-1 {
    background: linear-gradient(90deg,#120101 0% 100%);
    width: 100%;
    height: 1px;
    position: relative;
    z-index: 1;
    opacity: 24%
}

.app-feature-section .app-feature-btn-wrapper .app-feature-line-1:after {
    content: "";
    width: 7px;
    height: 7px;
    background: #120101;
    position: absolute;
    right: 0;
    top: -3px;
    border-radius: 50%
}

.app-feature-section .app-feature-btn-wrapper .app-feature-line-2 {
    background: linear-gradient(-90deg,#120101 0% 100%);
    width: 100%;
    height: 1px;
    position: relative;
    z-index: 1;
    opacity: 24%
}

.app-feature-section .app-feature-btn-wrapper .app-feature-line-2:after {
    content: "";
    width: 7px;
    height: 7px;
    background: #120101;
    position: absolute;
    left: 0;
    top: -3px;
    border-radius: 50%
}

.app-feature-section .app-feature-btn-wrapper .app-feature-line-3 {
    position: absolute;
    width: 1px;
    height: 140px;
    background: linear-gradient(180deg,#fe0d3a00,#5c3e94);
    left: 50%;
    transform: translate(-50%);
    bottom: 100%
}

.app-benefit-section .app-benefit-line-one {
    top: 11%;
    left: 84%
}

.app-benefit-section .app-benefit-line-two {
    top: 71%;
    left: 84%
}

.app-benefit-section .app-benefit-line-three {
    top: 11%;
    right: 84%
}

.app-benefit-section .app-benefit-line-four {
    top: 71%;
    right: 84%
}

.analytics-feature-section .analytics-feature-tab .analytics-feature-shape {
    top: 4%
}

.crm-features-section .crm-features-shape-img {
    right: -12%;
    top: -2%;
    width: 22rem
}

.crm-features-section .crm-features-card .crm-features-card-icon {
    display: inline-block;
    transition: transform .4s ease
}

.crm-features-section .crm-features-card:hover .crm-features-card-icon {
    transform: rotateY(180deg)
}

@media(min-width: 768px)and (max-width:1535px) {
    .crm-features-section .crm-features-card .crm-features-card-head {
        min-height:71px
    }

    .crm-features-section .crm-features-card .crm-features-card-des {
        min-height: 125px
    }
}

.saas-v1-features-section .saas-v1-features-tabs .nav-link {
    transition: .4s ease-in-out;
    color: #000;
    font-weight: 500
}

.saas-v1-features-section .saas-v1-features-tabs .nav-link:hover,.saas-v1-features-section .saas-v1-features-tabs .nav-link.active {
    background-color: #5c3e94!important;
    color: #fff
}

.saas-v1-features-section .saas-v1-features-tabs .saas-v1-features-coming-soon {
    transform: rotate(30deg);
    top: 6%;
    left: 52%;
    white-space: nowrap
}

.saas-v1-features-section .saas-v1-features-automation-card .saas-v1-features-automation-imgs .saas-v1-features-automation-img3 {
    bottom: -27%;
    right: -36%
}

.saas-v1-features-section .saas-v1-features-automation-card .saas-v1-features-automation-imgs .saas-v1-features-automation-arrow {
    top: 35%;
    left: 46%;
    animation: bounce 10s infinite
}

.saas-v1-features-section .saas-v1-features-dashboard-card .saas-v1-features-dashboard-img2 {
    top: 9%;
    right: -7%;
    animation: floatTop 5s ease-in-out infinite
}

.saas-v1-use-case-section .saas-v1-use-case-content .saas-v1-use-case-progress-wrapper {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1/1;
    margin: auto;
    position: relative
}

.saas-v1-use-case-section .saas-v1-use-case-content .saas-v1-use-case-progress-wrapper .saas-v1-use-case-progress-bg-circle {
    fill: none;
    stroke: rgba(var(--dx-primary-rgb),.15);
    stroke-width: 3
}

.saas-v1-use-case-section .saas-v1-use-case-content .saas-v1-use-case-progress-wrapper .progress-bar {
    stroke-linecap: round;
    transition: stroke-dashoffset .5s ease
}

.saas-v1-use-case-section .saas-v1-use-case-content .saas-v1-use-case-progress-wrapper .saas-v1-use-case-progress-complete {
    transform: rotate(-90deg)
}

@media(max-width: 767px) {
    .saas-v1-use-case-section .saas-v1-use-case-content .saas-v1-use-case-progress-wrapper {
        max-width:245px
    }
}

.saas-v1-use-case-section .saas-v1-use-case-card .saas-v1-case-number {
    font-size: 95px;
    line-height: 35px;
    position: relative;
    top: 29px;
    transition: all .35s ease-in-out 0s
}

@media(min-width: 992px)and (max-width:1535px) {
    .saas-v2-solution-section .saas-v2-solution-card .saas-v2-solution-card-content .saas-v2-solution-card-title {
        min-height:63px
    }

    .saas-v2-solution-section .saas-v2-solution-card .saas-v2-solution-card-content .saas-v2-solution-card-desc {
        min-height: 125px
    }
}

.saas-v2-solution-section .saas-v2-solution-card .saas-v2-solution-card-line {
    height: 1px;
    background-color: #000;
    width: 100%
}

.saas-v2-solution-section .saas-v2-solution-card .saas-v2-solution-card-btn-link {
    height: 34px;
    padding: 0 13px;
    font-size: 0;
    line-height: 33px;
    transition: all .3s;
    position: relative;
    margin-left: auto
}

.saas-v2-solution-section .saas-v2-solution-card .saas-v2-solution-card-btn-link .saas-v2-solution-card-btn-icon {
    margin-left: 0;
    transition: all .3s
}

.saas-v2-solution-section .saas-v2-solution-card:hover .saas-v2-solution-card-btn-link {
    font-size: 15px;
    padding: 0 8px 0 18px;
    transition: all .3s
}

.saas-v2-solution-section .saas-v2-solution-card .saas-v2-solution-card-border {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 3px;
    overflow: hidden
}

.saas-v2-solution-section .saas-v2-solution-card .saas-v2-solution-card-border .saas-v2-solution-border-line {
    position: relative;
    height: 100%;
    width: 3px
}

.saas-v2-solution-section .saas-v2-solution-card .saas-v2-solution-card-border .saas-v2-solution-border-line:before {
    content: "";
    position: absolute;
    top: -65px;
    left: 0;
    width: 3px;
    height: 65px;
    border-radius: 2px;
    background: linear-gradient(180deg,transparent 0%,#5C3E94 100%);
    animation: borderDrop 3s linear infinite;
    z-index: 1
}

.saas-v2-solution-section .saas-v2-solution-card .saas-v2-solution-card-border .saas-v2-solution-border-line:after {
    content: "";
    width: 1px;
    height: 100%;
    left: 1px;
    top: 0;
    position: absolute;
    background-color: var(--dx-border-color)
}

@keyframes borderDrop {
    0% {
        top: -65px;
        opacity: 0
    }

    10% {
        opacity: 1
    }

    80% {
        opacity: 1
    }

    to {
        top: 100%;
        opacity: 0
    }
}

.saas-v2-feature-section .saas-v2-features-card .saas-v2-features-tag.tag-rotate {
    transform: rotate(-5deg)
}

@media(max-width: 767px) {
    .saas-v2-feature-section .saas-v2-features-card .saas-v2-features-tag.tag-rotate {
        transform:rotate(0)
    }
}

.saas-v2-feature-section .saas-v2-features-card.saas-v1-cloud-card {
    background-color: #00011d
}

.saas-v2-feature-section .saas-v2-features-card .saas-v2-analytics-card2 {
    transform: rotate(-12deg)
}

.project-feature-section .project-feature-circle1 {
    top: -1%
}

.project-feature-section .project-feature-circle2 {
    top: 48%
}

.project-feature-section .project-feature-circle3,.project-feature-section .project-feature-circle4 {
    top: 49%
}

.project-feature-section .project-feature-card .project-feature-team .project-feature-team-users li {
    animation: TeamFloat 4s ease-in-out infinite
}

.project-feature-section .project-feature-card .project-feature-team .project-feature-team-users li:nth-child(2) {
    animation-delay: 1s
}

.project-feature-section .project-feature-card .project-feature-team .project-feature-team-users li:nth-child(3) {
    animation-delay: 2s
}

.project-feature-section .project-feature-card .project-feature-team .project-feature-team-users .team-user-l-one,.project-feature-section .project-feature-card .project-feature-team .project-feature-team-users .team-user-l-three {
    margin-left: 8rem
}

.project-feature-section .project-feature-card .project-feature-team .project-feature-team-users .team-user-r-one,.project-feature-section .project-feature-card .project-feature-team .project-feature-team-users .team-user-r-three {
    margin-right: 8rem
}

@media(max-width: 1199px) {
    .project-feature-section .project-feature-card .project-feature-team .project-feature-team-svg {
        width:100%;
        height: auto
    }

    .project-feature-section .project-feature-card .project-feature-team .project-feature-team-users .team-user-l-one,.project-feature-section .project-feature-card .project-feature-team .project-feature-team-users .team-user-l-three {
        margin-left: 2rem
    }

    .project-feature-section .project-feature-card .project-feature-team .project-feature-team-users .team-user-r-one,.project-feature-section .project-feature-card .project-feature-team .project-feature-team-users .team-user-r-three {
        margin-right: 2rem
    }
}

.project-feature-section .project-feature-card .project-feature-task .project-task-badge-1 {
    left: 9%;
    top: 4%;
    animation: TeamFloat 4s ease-in-out infinite
}

.project-feature-section .project-feature-card .project-feature-task .project-task-badge-2 {
    bottom: 22%;
    right: 3%;
    animation: TeamFloat 4s ease-in-out infinite
}

@media(max-width: 1199px) {
    .project-feature-section .project-feature-card .project-feature-task .w-full {
        width:100%!important
    }
}

.project-feature-section .project-feature-card .project-feature-time {
    transition: all .48s cubic-bezier(.23,1,.32,1)
}

.project-feature-section .project-feature-card .project-feature-time .project-time-content {
    overflow: hidden;
    transition: all .48s cubic-bezier(.23,1,.32,1)
}

.project-feature-section .project-feature-card .project-feature-time .project-time-content:before {
    position: absolute;
    content: "";
    top: -4%;
    left: 50%;
    width: 90%;
    height: 90%;
    transform: translate(-50%);
    background: #d8cdf1;
    z-index: -1;
    transform-origin: bottom;
    border-radius: inherit;
    transition: all .48s cubic-bezier(.23,1,.32,1)
}

.project-feature-section .project-feature-card .project-feature-time .project-time-content:after {
    position: absolute;
    content: "";
    top: -8%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%);
    background: #f2eefb;
    z-index: -2;
    transform-origin: bottom;
    border-radius: inherit;
    transition: all .48s cubic-bezier(.23,1,.32,1)
}

.project-feature-section .project-feature-card .project-feature-time .project-time-content span {
    position: relative
}

.project-feature-section .project-feature-card .project-feature-time .project-time-content span:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    z-index: 2
}

.project-feature-section .project-feature-card .project-feature-time .project-time-content span:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: dotwavePulse 1.5s infinite;
    z-index: 1
}

.project-feature-section .project-feature-card .project-feature-time .project-time-content .btn {
    transition: .4s ease-in-out
}

.project-feature-section .project-feature-card .project-feature-time .project-time-content .btn:hover {
    background-color: transparent!important
}

.project-feature-section .project-feature-card .project-feature-time:hover {
    transform: translateY(-16px)
}

.project-feature-section .project-feature-card .project-feature-time:hover .project-time-content:before {
    rotate: -8deg;
    top: 0;
    width: 100%;
    height: 100%
}

.project-feature-section .project-feature-card .project-feature-time:hover .project-time-content:after {
    rotate: 8deg;
    top: 0;
    width: 100%;
    height: 100%
}

@keyframes dotwavePulse {
    0% {
        transform: translateY(-50%) scale(1);
        opacity: .8
    }

    70% {
        transform: translateY(-50%) scale(2.5);
        opacity: 0
    }

    to {
        opacity: 0
    }
}

.project-feature-section .project-feature-card .project-feature-report .project-report-chart-wrapper {
    height: 220px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

.project-feature-section .project-feature-card .project-feature-report .project-report-chart-wrapper .project-report-chart-bar {
    width: 45px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center
}

.project-feature-section .project-feature-card .project-feature-report .project-report-chart-wrapper .project-report-bar {
    width: 100%;
    height: 73%;
    background: #000;
    border-radius: 14px;
    transform-origin: bottom
}

.project-feature-section .project-feature-card .project-feature-report .project-report-chart-wrapper .project-bar-highlight {
    background: linear-gradient(to top,rgba(var(--dx-primary-rgb),.3),var(--dx-primary))
}

.project-feature-section .project-feature-card .project-feature-report .project-report-chart-wrapper .project-report-chart-bar:nth-child(odd) .project-report-bar {
    animation: chartdownUp 6s ease-in-out infinite
}

.project-feature-section .project-feature-card .project-feature-report .project-report-chart-wrapper .project-report-chart-bar:nth-child(2n) .project-report-bar {
    animation: chartupDown 6s ease-in-out infinite
}

@keyframes chartupDown {
    0% {
        transform: scaleY(.4)
    }

    50% {
        transform: scaleY(1)
    }

    to {
        transform: scaleY(.4)
    }
}

@keyframes chartdownUp {
    0% {
        transform: scaleY(1)
    }

    50% {
        transform: scaleY(.4)
    }

    to {
        transform: scaleY(1)
    }
}

.project-feature-section .project-feature-card .project-feature-file {
    width: 280px;
    height: 230px;
    perspective: 1000px;
    transition: transform .4s ease
}

.project-feature-section .project-feature-card .project-feature-file .project-file-wallet-back {
    position: absolute;
    bottom: 0;
    width: 280px;
    height: 200px;
    background: #000;
    border-radius: 22px 22px 60px 60px;
    z-index: 5;
    box-shadow: inset 0 25px 35px #7e56da59,inset 0 5px 15px #7e56da73
}

.project-feature-section .project-feature-card .project-feature-file .project-file-card {
    position: absolute;
    width: 260px;
    height: 140px;
    left: 10px;
    box-shadow: inset 0 1px 1px #ffffff4d,0 -4px 15px #0000001a;
    transition: transform .6s cubic-bezier(.34,1.56,.64,1),z-index 0s
}

.project-feature-section .project-feature-card .project-feature-file .project-file-card:hover {
    z-index: 100!important;
    transition-delay: 0s!important
}

.project-feature-section .project-feature-card .project-feature-file .project-file-1 {
    bottom: 90px;
    z-index: 10;
    animation-delay: .1s
}

.project-feature-section .project-feature-card .project-feature-file .project-file-1 img {
    filter: invert(1)
}

.project-feature-section .project-feature-card .project-feature-file .project-file-2 {
    bottom: 65px;
    z-index: 20;
    animation-delay: .2s
}

.project-feature-section .project-feature-card .project-feature-file .project-file-2 img {
    filter: invert(1)
}

.project-feature-section .project-feature-card .project-feature-file .project-file-3 {
    bottom: 40px;
    z-index: 30;
    animation-delay: .3s
}

.project-feature-section .project-feature-card .project-feature-file .project-file-pocket {
    position: absolute;
    bottom: 0;
    width: 280px;
    height: 160px;
    z-index: 70
}

.project-feature-section .project-feature-card .project-feature-file .project-file-pocket .project-file-pocket-content {
    position: absolute;
    top: 58px;
    width: 100%;
    text-align: center;
    z-index: 50
}

.project-feature-section .project-feature-card .project-feature-file:hover {
    transform: translateY(-5px)
}

.project-feature-section .project-feature-card .project-feature-file:hover .project-file-1 {
    transform: translateY(-75px) rotate(-3deg)
}

.project-feature-section .project-feature-card .project-feature-file:hover .project-file-1:hover {
    transform: translateY(-60px) scale(1.05) rotate(0)
}

.project-feature-section .project-feature-card .project-feature-file:hover .project-file-2 {
    transform: translateY(-45px) rotate(2deg)
}

.project-feature-section .project-feature-card .project-feature-file:hover .project-file-2:hover {
    transform: translateY(-70px) scale(1.05) rotate(0)
}

.project-feature-section .project-feature-card .project-feature-file:hover .project-file-3 {
    transform: translateY(-10px)
}

.project-feature-section .project-feature-card .project-feature-file:hover .project-file-3:hover {
    transform: translateY(-60px) scale(1.05) rotate(0)
}

@media(max-width: 350px) {
    .project-feature-section .project-feature-card .project-feature-file {
        width:100%;
        height: 180px
    }

    .project-feature-section .project-feature-card .project-feature-file .project-file-wallet-back {
        width: 100%;
        height: 150px
    }

    .project-feature-section .project-feature-card .project-feature-file .project-file-card {
        width: 94%;
        height: 69%;
        left: 10px
    }

    .project-feature-section .project-feature-card .project-feature-file .project-file-1 {
        bottom: 65px
    }

    .project-feature-section .project-feature-card .project-feature-file .project-file-2 {
        bottom: 48px
    }

    .project-feature-section .project-feature-card .project-feature-file .project-file-3 {
        bottom: 30px
    }

    .project-feature-section .project-feature-card .project-feature-file .project-file-pocket {
        width: 100%;
        height: 120px
    }
}

@keyframes TeamFloat {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }

    to {
        transform: translateY(0)
    }
}

.healthcare-features-section .healthcare-lab-card .healthcare-lab-img {
    max-width: 175px;
    width: 100%
}

@media(max-width: 767px) {
    .healthcare-features-section .healthcare-lab-card .healthcare-lab-img {
        max-width:100%
    }
}

.healthcare-features-section .healthcare-insight-card {
    background: url(../images/healthcare-feature-insight.jpg);
    background-size: cover;
    position: relative;
    z-index: 111
}

.healthcare-features-section .healthcare-insight-card:before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    z-index: -1
}

.blog-featured-section .blog-feature-accordion {
    height: 450px
}

.blog-featured-section .blog-feature-accordion .blog-feature-card {
    flex: 1;
    transition: all .5s ease
}

.blog-featured-section .blog-feature-accordion .blog-feature-card img {
    transition: transform .6s ease
}

.blog-featured-section .blog-feature-accordion .blog-feature-card .blog-feature-card-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #0000004b;
    pointer-events: none
}

.blog-featured-section .blog-feature-accordion .blog-feature-card .blog-feature-title {
    transition: .4s ease
}

.blog-featured-section .blog-feature-accordion .blog-feature-card .blog-feature-content {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: .4s ease
}

.blog-featured-section .blog-feature-accordion .blog-feature-card:hover {
    flex: 2
}

.blog-featured-section .blog-feature-accordion .blog-feature-card:hover img {
    transform: scale(1.1)
}

.blog-featured-section .blog-feature-accordion .blog-feature-card:hover .blog-feature-content {
    opacity: 1;
    transform: translateY(0)
}

.blog-featured-section .blog-feature-accordion .blog-feature-card:hover .blog-feature-title {
    opacity: 0
}

@media(max-width: 1199px) {
    .blog-featured-section .blog-feature-accordion .blog-feature-card:hover {
        flex:6
    }
}

.blog-featured-section .blog-category-section .blog-category-clip {
    width: 230px;
    height: 70px;
    clip-path: polygon(0% 0%,90% 0%,100% 50%,90% 100%,0% 100%)
}

@media(max-width: 991px) {
    .blog-featured-section .blog-category-section .blog-category-clip {
        width:169px
    }
}

.blog-news-swiper {
    position: relative
}

.blog-news-swiper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to right,#fff,#fff0)
}

.blog-news-swiper:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to left,#fff,#fff0)
}

.swiper-button-prev-blog,.swiper-button-next-blog {
    background-color: #00000045;
    color: #fff
}

.about-v1-features-section .about-v1-feature-card {
    transition: all .35s ease
}

.about-v1-features-section .about-v1-feature-card:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: var(--dx-primary-bg-subtle);
    transition: height .4s ease;
    z-index: -1
}

.about-v1-features-section .about-v1-feature-card:hover {
    transform: translateY(-6px)
}

.about-v1-features-section .about-v1-feature-card:hover:before {
    height: 100%
}

.about-v1-features-section .about-v1-feature-card .about-v1-feature-shape {
    top: -5%;
    right: -9%
}

.about-v1-features-section .about-v1-feature-card .about-v1-feature-link {
    color: #000;
    transition: color .3s ease
}

.about-v1-features-section .about-v1-feature-card .about-v1-feature-link:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform-origin: right;
    transform: scaleX(1);
    transition: transform .4s ease
}

.about-v1-features-section .about-v1-feature-card .about-v1-feature-link:after {
    content: "";
    position: absolute;
    right: -9px;
    bottom: -2.3px;
    width: 7px;
    height: 7px;
    background: currentColor;
    transition: all .4s ease;
    clip-path: polygon(0 0,100% 50%,0 100%)
}

.about-v1-features-section .about-v1-feature-card .about-v1-feature-link:hover {
    color: #5c3e94
}

.about-v1-features-section .about-v1-feature-card .about-v1-feature-link:hover:before {
    transform: scaleX(.2)
}

.about-v1-features-section .about-v1-feature-card .about-v1-feature-link:hover:after {
    right: -12px;
    transform: scale(1.2)
}

.service-single-benefit-section .service-single-benefit-card {
    position: relative;
    max-width: 540px;
    margin-left: -130px;
    transition: .3s ease-in-out
}

.service-single-benefit-section .service-single-benefit-card .service-single-benefit-icon {
    filter: brightness(1) invert(1);
    transition: .3s ease-in-out
}

.service-single-benefit-section .service-single-benefit-card:hover {
    background-color: #eeebf4!important;
    color: #000!important;
    z-index: 10000
}

.service-single-benefit-section .service-single-benefit-card:hover p {
    color: gray!important
}

.service-single-benefit-section .service-single-benefit-card:hover .service-single-benefit-icon {
    filter: none
}

@media(max-width: 991px) {
    .service-single-benefit-section .service-single-benefit-card {
        margin-left:0;
        margin-top: -100px
    }
}

.about-v2-feature-section .about-v2-feature-card {
    position: relative
}

@media(min-width: 768px) {
    .about-v2-feature-section .about-v2-feature-card:before {
        content:"";
        position: absolute;
        top: 80px;
        right: -1.5px;
        width: 2px;
        height: 43px;
        background-color: #5c3e94
    }
}

.about-v2-feature-section .about-v2-feature-card .about-v2-feature-icon {
    transform: rotate(41deg)
}

.about-v2-feature-section .about-v2-feature-card .about-v2-feature-icon i {
    transform: rotate(-41deg)
}

.about-v2-feature-section .col-lg-3:last-child .about-v2-feature-card:before {
    display: none
}

.feature-section .feature-card {
    border: 1px solid var(--dx-border-color);
    transition: .4s ease-in-out
}

.feature-section .feature-card .feature-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--dx-primary);
    transition: .4s ease-in-out
}

.feature-section .feature-card .feature-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--dx-border-color);
    color: var(--dx-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 32px;
    transition: .4s;
    position: relative
}

.feature-section .feature-card .feature-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #171717;
    transition: .3s
}

.feature-section .feature-card .feature-btn i {
    transition: .3s
}

.feature-section .feature-card:hover {
    background: #fff!important;
    border-color: var(--dx-primary)
}

.feature-section .feature-card:hover .feature-line {
    width: 100%
}

.feature-section .feature-card:hover .feature-icon {
    border-radius: 50%;
    background: var(--dx-primary);
    color: #fff
}

.feature-section .feature-card:hover .feature-btn {
    color: var(--dx-primary)
}

.feature-section .feature-card:hover .feature-btn i {
    transform: translate(5px)
}

.startup-brand-section .startup-brand-heading {
    top: -1rem;
    left: 16rem
}

@media(max-width: 1199px) {
    .startup-brand-section .startup-brand-heading {
        left:5rem
    }
}

.startup-brand-section .st-brand-img {
    transition: transform .6s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
    cursor: pointer
}

.startup-brand-section .st-brand-img:hover {
    transform: rotateY(180deg)
}

.automation-brand-wrap {
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    align-items: center
}

.automation-brand-wrap .automation-brand-left,.automation-brand-wrap .automation-brand-right {
    padding: 8px 0
}

.automation-brand-wrap .automation-brand-left .automation-brand-left-bg svg,.automation-brand-wrap .automation-brand-left .automation-brand-right-bg svg,.automation-brand-wrap .automation-brand-right .automation-brand-left-bg svg,.automation-brand-wrap .automation-brand-right .automation-brand-right-bg svg {
    position: absolute;
    top: -8px;
    z-index: 1
}

.automation-brand-wrap .automation-brand-left .automation-brand-left-bg:after,.automation-brand-wrap .automation-brand-left .automation-brand-right-bg:after,.automation-brand-wrap .automation-brand-right .automation-brand-left-bg:after,.automation-brand-wrap .automation-brand-right .automation-brand-right-bg:after {
    content: "";
    width: 100px;
    height: 100%;
    position: absolute;
    top: 0
}

.automation-brand-wrap .automation-brand-left .automation-brand-left-bg,.automation-brand-wrap .automation-brand-right .automation-brand-left-bg {
    background: linear-gradient(90deg,transparent 0%,rgba(var(--dx-primary-rgb),.4) 55.29%)
}

.automation-brand-wrap .automation-brand-left .automation-brand-left-bg svg,.automation-brand-wrap .automation-brand-right .automation-brand-left-bg svg {
    right: 0
}

.automation-brand-wrap .automation-brand-left .automation-brand-left-bg:after,.automation-brand-wrap .automation-brand-right .automation-brand-left-bg:after {
    left: 0;
    background: linear-gradient(90deg,#050119,transparent)
}

.automation-brand-wrap .automation-brand-left .automation-brand-right-bg,.automation-brand-wrap .automation-brand-right .automation-brand-right-bg {
    background: linear-gradient(-90deg,transparent 0%,rgba(var(--dx-primary-rgb),.4) 55.29%)
}

.automation-brand-wrap .automation-brand-left .automation-brand-right-bg svg,.automation-brand-wrap .automation-brand-right .automation-brand-right-bg svg {
    left: 0
}

.automation-brand-wrap .automation-brand-left .automation-brand-right-bg:after,.automation-brand-wrap .automation-brand-right .automation-brand-right-bg:after {
    right: 0;
    background: linear-gradient(-90deg,#050119,transparent)
}

.analytics-brand-section .analytics-brand-img {
    background-color: #ffffff18;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.app-brand-section {
    background: linear-gradient(120deg,#7c5ac2,#5c3e94 45%,#3d2768)
}

.app-brand-section .app-marquee .app-mega-text {
    font-size: 100px;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    padding-right: 64px;
    line-height: 1
}

.app-brand-section .app-marquee .app-mega-text:after {
    content: "";
    width: 32px;
    height: 32px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    right: 0
}

.app-brand-section .app-brand-img {
    opacity: .7;
    transition: .4s ese-in-out
}

.app-brand-section .app-brand-img:hover {
    opacity: 1
}

.crm-brand-section .crm-brand-imgs img {
    background-size: cover;
    transition: .5s
}

.crm-brand-section .crm-brand-imgs img:nth-child(1) {
    transform: translate(50%) scaleX(2);
    opacity: 0;
    filter: blur(10px)
}

.crm-brand-section .crm-brand-imgs img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 50%;
    object-fit: cover;
    transform: translate(-50%)
}

.crm-brand-section .crm-brand-imgs:hover img:nth-child(1) {
    transform: translate(0) scaleX(1);
    opacity: 1;
    filter: blur(0)
}

.crm-brand-section .crm-brand-imgs:hover img:nth-child(2) {
    transform: translate(-50%) scaleX(2);
    opacity: 0;
    filter: blur(10px)
}

.project-marquee-section .project-marquee-arrow {
    right: 20%;
    top: 50%
}

.project-marquee-section .project-marquee-wrapper .project-marquee-item {
    font-size: 249px
}

@media(max-width: 767px) {
    .project-marquee-section .project-marquee-wrapper .project-marquee-item {
        font-size:60px
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .project-marquee-section .project-marquee-wrapper .project-marquee-item {
        font-size:100px
    }
}

.about-v2-brand-section {
    background-color: #eeebf4
}

.partner-section .partner-card {
    overflow: hidden;
    transition: all .4s ease;
    background: #fff;
    position: relative
}

.partner-section .partner-card .patner-card-overlay {
    position: absolute;
    inset: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all .4s ease
}

.partner-section .partner-card:hover .patner-card-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.digital-about-section .digital-about-card {
    background-color: var(--dx-light)
}

.digital-about-section .digital-about-card .digital-about-arrow {
    transform: rotate(45deg)
}

.digital-about-section .digital-about-card:hover {
    color: #fff!important
}

.digital-about-section .digital-about-card:hover .digital-about-card-desc {
    color: #ffffffb3!important
}

.digital-about-section .digital-about-card:hover .digital-about-arrow img,.digital-about-section .digital-about-card:hover .digital-about-icon {
    filter: brightness(0) invert(1)
}

.digital-about-section .digital-about-desc:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 1px;
    height: 123px;
    background-color: var(--dx-border-color)
}

.digital-about-section .digital-about-stats .digital-about-stats-circle {
    width: 25rem;
    height: 25rem;
    position: relative;
    perspective: 1000px;
    margin-left: -50px
}

.digital-about-section .digital-about-stats .digital-about-stats-circle .digital-about-stats-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform .6s;
    transform-style: preserve-3d
}

.digital-about-section .digital-about-stats .digital-about-stats-circle .digital-about-stats-inner .digital-about-stats-count {
    font-size: 4rem
}

.digital-about-section .digital-about-stats .digital-about-stats-circle .digital-about-stats-inner .digital-about-stats-front,.digital-about-section .digital-about-stats .digital-about-stats-circle .digital-about-stats-inner .digital-about-stats-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden
}

.digital-about-section .digital-about-stats .digital-about-stats-circle .digital-about-stats-inner .digital-about-stats-back {
    transform: rotateY(180deg);
    background-color: var(--dx-light)
}

.digital-about-section .digital-about-stats .digital-about-stats-circle:hover .digital-about-stats-inner {
    transform: rotateY(180deg)
}

@media(max-width: 767px) {
    .digital-about-section .digital-about-stats .digital-about-stats-circle {
        margin-left:0
    }
}

@media(max-width: 1535px) {
    .digital-about-section .digital-about-stats .digital-about-stats-circle {
        width:20rem;
        height: 20rem
    }
}

.startup-about-section .st-about-content .nav-underline .nav-link:after {
    content: "";
    background-color: #fff
}

.startup-about-section .st-about-content .nav-underline .nav-link:hover,.startup-about-section .st-about-content .nav-underline .nav-link.active {
    color: #fff!important
}

.startup-about-section .st-about-img:after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
    transform: skew(-20deg)
}

.startup-about-section .st-about-img:hover:after {
    animation: shineMove .8s ease
}

.app-about-section .app-about-tab-content {
    background: linear-gradient(120deg,#7c5ac2,#5c3e94 45%,#3d2768);
    height: 814px
}

.app-about-section .app-about-tab-content .app-about-svg {
    top: -2%;
    right: -11%
}

.app-about-section .app-about-tab-content .app-about-img .app-about-card2 {
    top: 15%;
    left: -11%;
    animation: floatLeft 5s ease-in-out infinite
}

.app-about-section .app-about-tab-content .app-about-img .app-about-card3 {
    top: 76%;
    left: 57%
}

.app-about-section .app-about-tab-content .app-about-img .app-about-avtar1 {
    bottom: 10%;
    left: 9%;
    animation: pulse 3s ease-in-out infinite
}

.app-about-section .app-about-tab-content .app-about-img .app-about-avtar2 {
    bottom: 23%;
    left: -2%;
    animation: pulse 4s ease-in-out infinite
}

.app-about-section .app-about-tab-content .app-about-img .app-about-card4 {
    top: 56%;
    left: -13%
}

.app-about-section .app-about-tab-content .app-about-img .app-about-chat-img {
    top: 25%;
    left: 73%;
    animation: floatTop 5s ease-in-out infinite
}

.app-about-section .app-about-tab .nav-item .nav-link {
    border-left: 3px solid transparent
}

.app-about-section .app-about-tab .nav-item .nav-link.active,.app-about-section .app-about-tab .nav-item .nav-link:hover {
    border-left: 3px solid #5C3E94;
    background-color: var(--dx-light)!important
}

@media(max-width: 1535px) {
    .app-about-section .app-about-tab-content {
        height:100%
    }
}

.analytics-about-section .analytics-about-imgs .analytics-about-svg {
    top: -12%;
    left: -13%;
    animation: 4s ease-in-out 0s infinite normal none running wobble
}

.analytics-about-section .analytics-about-imgs .analytics-about-img1 {
    top: 54%;
    left: -19%;
    animation: floatTop 7s ease-in-out infinite
}

.analytics-about-section .analytics-about-imgs .analytics-about-img2 {
    top: 3%;
    right: -15%;
    transform: rotate(45deg)
}

.analytics-about-section .analytics-about-imgs .analytics-about-thumb {
    right: -5%;
    bottom: -9%;
    animation: bounce 10s infinite
}

.analytics-about-title {
    font-size: 3rem
}

@media(max-width: 767px) {
    .analytics-about-title {
        font-size:1.5rem
    }
}

.saas-v2-comparison-slider-section .saas-v2-comparison-slider {
    outline: none;
    display: block;
    line-height: 0;
    overflow: hidden
}

.saas-v2-comparison-slider-section .saas-v2-comparison-slider img {
    display: block;
    width: 100%;
    height: auto
}

.saas-v2-comparison-slider-section .saas-v2-comparison-slider .saas-v2-custom-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize
}

@media(max-width: 767px) {
    .saas-v2-comparison-slider-section .saas-v2-comparison-slider .saas-v2-custom-handle {
        width:2.3rem!important;
        height: 2.3rem!important
    }
}

.project-about-section .project-about-img {
    max-height: 700px;
    height: 100%
}

@media(max-width: 767px) {
    .project-about-section .project-about-img {
        max-height:400px
    }

    .project-about-section .project-about-img .project-about-box {
        width: 100%!important
    }
}

.project-about-section .project-about-content .project-about-content-call .project-about-content-call-wave {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(var(--dx-secondary-rgb),.3);
    top: 50%;
    left: 50%;
    animation: bgwaves 2.5s infinite
}

.project-about-section .project-about-content .project-about-content-call .project-about-content-call-wave.wave-2 {
    animation-delay: 1.2s
}

.project-preview-section {
    background-image: url(../images/project-main-bg.png);
    background-size: cover
}

.healthcare-about-section .healthcare-about-img .healthcare-about-video {
    width: 100%;
    height: 43rem
}

.healthcare-about-section .healthcare-about-img .healthcare-about-video video {
    -webkit-mask-image: url(../images/healthcare-about-mask.jpg);
    mask-image: url(../images/healthcare-about-mask.jpg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center
}

.healthcare-about-section .healthcare-about-img .healthcare-about-popover1 {
    top: 15%;
    left: 24%
}

.healthcare-about-section .healthcare-about-img .healthcare-about-popover2 {
    right: 20%;
    bottom: 18%
}

.healthcare-about-section .healthcare-about-img .healthcare-circlewave {
    position: relative
}

.healthcare-about-section .healthcare-about-img .healthcare-circlewave .healthcare-circlewave-bg {
    position: relative;
    z-index: 2;
    width: 50px;
    height: 50px
}

.healthcare-about-section .healthcare-about-img .healthcare-circlewave .healthcare-circlewave-bg:before,.healthcare-about-section .healthcare-about-img .healthcare-circlewave .healthcare-circlewave-bg:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    animation: bgwaves 2s infinite;
    z-index: -1
}

.healthcare-about-section .healthcare-about-img .healthcare-circlewave .healthcare-circlewave-bg:after {
    animation-delay: 2s
}

@media(max-width: 767px) {
    .healthcare-about-section .healthcare-about-img .healthcare-about-video {
        height:100%
    }
}

@media(min-width: 768px) {
    .healthcare-about-section .healthcare-about-content .healthcare-about-title {
        font-size:3rem
    }
}

.healthcare-about-section .healthcare-about-content .healthcare-about-shape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    border-radius: 100px;
    margin-left: 9px
}

.healthcare-about-section .healthcare-about-content .healthcare-about-shape .healthcare-about-shape-img {
    width: 200px;
    height: 145px;
    background-color: #f5f5f5;
    clip-path: polygon(45% -70%,96% 50%,50% 155%,0 50%);
    display: flex;
    margin-left: -12px
}

.healthcare-about-section .healthcare-about-content .healthcare-about-shape .healthcare-about-shape-img figure {
    width: 180px;
    height: 145px;
    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
    overflow: hidden
}

.healthcare-about-section .healthcare-about-content .healthcare-about-shape .healthcare-about-shape-content {
    width: calc(100% - 190px)
}

@media(max-width: 767px) {
    .healthcare-about-section .healthcare-about-content .healthcare-about-shape .healthcare-about-shape-img figure {
        width:100%
    }

    .healthcare-about-section .healthcare-about-content .healthcare-about-shape .healthcare-about-shape-content {
        width: 100%
    }
}

.healthcare-gallery-section .healthcare-gallery-swiper .healthcare-gallery-card {
    height: 600px;
    width: 100%
}

.healthcare-gallery-section .healthcare-gallery-swiper .healthcare-gallery-card .healthcare-gallery-overlay {
    background-color: #0000007a;
    opacity: 0;
    transform: translateY(20px);
    transition: .4s ease;
    pointer-events: none
}

.healthcare-gallery-section .healthcare-gallery-swiper .swiper-slide-active .healthcare-gallery-overlay {
    opacity: 1;
    transform: translateY(0)
}

.product-thumbs-section .product-swiper-main .product-thumbs-img .product-thumbs-img-overlay {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.conference-about-section .conference-about-girlimg {
    width: 18rem;
    left: -3%
}

.conference-schedule-section .conference-schedule-tab-content .conference-schedule-item {
    position: sticky;
    top: 10%
}

.conference-schedule-section .conference-schedule-tab-content .conference-schedule-item:nth-child(2) {
    top: 23%
}

.conference-schedule-section .conference-schedule-tab-content .conference-schedule-item:nth-child(3) {
    top: 35%
}

.conference-award-card .conference-award-card-overlay {
    pointer-events: none
}

.about-v1-about-section .about-v1-about-stats .about-v1-stats-card .about-v1-stats-number {
    font-size: 60px
}

.about-v1-about-section .about-v1-about-shape {
    left: 11%
}

.about-v1-about-section .about-v1-about-shape .about-v1-about-shape-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 305px;
    width: 100%;
    height: 348px;
    -webkit-mask-image: url(../images/about-v1-circle-mask.png);
    mask-image: url(../images/about-v1-circle-mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--dx-primary-bg-subtle);
    -webkit-mask-position: center;
    mask-position: center
}

.about-v1-about-section .about-v1-about-shape .about-v1-about-shape-1 video {
    width: 265px;
    height: 265px
}

.about-v2-about-section .about-v2-about-tabs .nav-link.active {
    color: #5c3e94;
    background: transparent;
    border-bottom: 2px solid #5C3E94!important
}

.career-benefit-section .career-benefit-card {
    transition: all .3s ease-in-out;
    background-color: #fff
}

.career-benefit-section .career-benefit-card img,.career-benefit-section .career-benefit-card p {
    transition: all .3s ease-in-out
}

.career-benefit-section .career-benefit-card:hover {
    background-color: var(--dx-primary);
    color: #fff
}

.career-benefit-section .career-benefit-card:hover img {
    filter: brightness(0) invert(1)
}

.career-benefit-section .career-benefit-card:hover p {
    color: #ffffffb3!important
}

.starup-faq-section .startup-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-left: 3px solid #5C3E94;
    transition: border-color .3s
}

.starup-faq-section .startup-accordion .accordion-button:after {
    content: ""!important
}

.analytics-use-cases-section .analytics-use-cases-img .analytics-use-cases-robot {
    animation: bounce 5s infinite
}

.analytics-use-cases-section .analytics-use-cases-img .analytics-use-cases-img1 {
    top: 26%;
    right: -16%;
    animation: floatTop 7s ease-in-out infinite
}

.analytics-use-cases-section .analytics-case-content .analytics-accordion .accordion-button:after {
    display: none!important
}

.crm-faq-section .crm-faq-card {
    position: relative;
    background: linear-gradient(180deg,#5c3e9421,#ffffffe6)
}

.help-center-section .help-center-left-sidebar .help-center-categorie-list .help-center-categorie-item {
    transition: all .3s ease-in-out;
    color: var(--dx-body-color)
}

.help-center-section .help-center-left-sidebar .help-center-categorie-list .help-center-categorie-item:hover {
    background-color: var(--dx-primary-bg-subtle);
    color: var(--dx-primary)
}

.faq-section .faq-img-vector {
    top: -79%;
    right: -57%
}

.digital-process-section .digital-process-box {
    display: flex;
    flex-wrap: nowrap
}

@media(max-width: 991px) {
    .digital-process-section .digital-process-box {
        flex-wrap:wrap
    }
}

.digital-process-section .digital-process-box .digital-process-col {
    flex: 1;
    transition: all .5s cubic-bezier(.4,0,.2,1);
    min-width: 0
}

@media(min-width: 992px) {
    .digital-process-section .digital-process-box .digital-process-col:hover {
        flex:1.3
    }
}

@media(max-width: 991px) {
    .digital-process-section .digital-process-box .digital-process-col {
        flex:0 0 50%
    }
}

@media(max-width: 767px) {
    .digital-process-section .digital-process-box .digital-process-col {
        flex:0 0 100%
    }
}

.digital-process-section .digital-process-box .digital-process-card {
    min-height: 470px
}

.digital-process-section .digital-process-box .digital-process-card .digital-process-number {
    background-color: var(--dx-body-bg);
    color: var(--dx-dark);
    transition: all .4s ease
}

.digital-process-section .digital-process-box .digital-process-card .digital-process-desc {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s ease,opacity .4s ease;
    opacity: 0
}

.digital-process-section .digital-process-box .digital-process-card .digital-process-desc .desc-inner {
    overflow: hidden
}

.digital-process-section .digital-process-box .digital-process-card:hover .digital-process-number {
    background-color: var(--dx-primary);
    color: #fff;
    border-color: var(--dx-primary)!important
}

.digital-process-section .digital-process-box .digital-process-card:hover .digital-process-desc {
    grid-template-rows: 1fr;
    opacity: 1
}

.startup-works-section .st-works-number {
    outline: 1px dashed #5C3E94;
    outline-offset: 7px
}

.startup-works-section .st-works-elements1 {
    left: -26%;
    top: -18%
}

.startup-works-section .st-works-elements2 {
    transform: scaley(-1);
    left: -26%;
    bottom: -18%
}

.startup-works-section .st-works-elements3 {
    transform: scalex(-1);
    right: -26%;
    top: -18%
}

.startup-works-section .st-works-elements4 {
    transform: scalex(-1) scaley(-1);
    right: -26%;
    bottom: -18%
}

.startup-works-section .st-works-circle {
    animation: spin 12s linear infinite
}

.automation-works-section {
    background-image: url(../images/automation-works-bg.png);
    background-size: cover;
    background-position-x: center;
    padding: 250px 0 130px
}

.automation-works-section .automation-process-card {
    border-color: var(--dx-gray-700)!important
}

.automation-works-section .automation-process-card .automation-process-img {
    animation: spin 12s linear infinite
}

@media(max-width: 1199px) {
    .automation-works-section {
        padding:50px 0;
        background-image: none
    }
}

@media(min-width: 1536px) {
    .app-process-section .app-process-card {
        height:425px
    }
}

.crm-process-section .spacer {
    padding: 150px 0
}

.crm-process-section .spacer .crm-process-elements2 {
    transform: translate(-50%) rotate(32deg)
}

@media(max-width: 991px) {
    .crm-process-section .spacer {
        padding:50px 0
    }
}

.crm-process-section .crm-first-process-img {
    background-color: #f9eabf
}

.crm-process-section .crm-second-process-img {
    background-color: #f8dde9
}

.crm-process-section .crm-third-process-img {
    background-color: #daefe2
}

.crm-process-section .crm-third-process-img .crm-third-process-icon1 {
    top: 6%;
    right: 25%
}

.crm-process-section .crm-third-process-img .crm-third-process-icon2 {
    top: 20%;
    right: 5%
}

.crm-process-section .crm-third-process-img .crm-third-process-icon3 {
    bottom: 21%;
    right: 3%;
    animation: floatBottom 9s ease infinite
}

.crm-process-section .crm-third-process-img .crm-third-process-img-1 {
    animation: floatBottom 6s ease infinite
}

@media(min-width: 767px) {
    .crm-process-section .crm-third-process-img .crm-third-process-img-2 {
        height:355px
    }
}

.crm-process-section .crm-third-process-img .crm-third-process-glass {
    width: 593px;
    top: 5%;
    left: 3%
}

@media(min-width: 992px)and (max-width:1535px) {
    .crm-process-section .crm-third-process-img .crm-third-process-glass {
        width:100%
    }
}

.saas-v1-works-section .saas-v1-work-card .saas-v1-work-card-number {
    background: linear-gradient(to bottom,rgba(var(--dx-primary-rgb),.35),#fff0 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-mask-image: linear-gradient(to bottom,#000,#0000 90%);
    mask-image: linear-gradient(to bottom,#000,#0000 90%);
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.saas-v2-process-section .saas-v2-process-shape {
    margin-top: -1%
}

.saas-v2-process-section .saas-v2-process-step {
    margin-top: -8%
}

.saas-v2-process-section .saas-v2-process-step .saas-v2-process-card .saas-v2-process-card-number {
    font-size: 86px;
    opacity: .05;
    right: -2%;
    bottom: -14%
}

@media(min-width: 992px)and (max-width:1199px) {
    .saas-v2-process-section .saas-v2-process-step .saas-v2-process-card .saas-v2-process-card-head {
        min-height:63px
    }

    .saas-v2-process-section .saas-v2-process-step .saas-v2-process-card .saas-v2-process-card-desc {
        min-height: 125px
    }
}

@media(max-width: 992px) {
    .saas-v2-process-section .saas-v2-process-step {
        margin-top:0%
    }
}

.project-process-section .project-process-tabs .project-process-list .project-process-item {
    position: relative
}

.project-process-section .project-process-tabs .project-process-list .project-process-item:not(:last-child) {
    padding-bottom: 80px
}

.project-process-section .project-process-tabs .project-process-list .project-process-item:before {
    position: absolute;
    content: "";
    top: 25px;
    left: 9px;
    width: 4px;
    height: 100%;
    background: rgba(var(--dx-primary-rgb),.1);
    z-index: -1
}

@media(max-width: 767px) {
    .project-process-section .project-process-tabs .project-process-list .project-process-item:not(:last-child) {
        padding-bottom:20px
    }
}

.project-process-section .project-process-tabs .project-process-list .project-process-btn {
    display: flex;
    align-items: center;
    position: relative;
    background: transparent
}

.project-process-section .project-process-tabs .project-process-list .project-process-btn.active:after {
    position: absolute;
    content: "";
    top: 42px;
    left: 9px;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,#5c3e94,#f2eefb);
    z-index: -1
}

.project-process-section .project-process-tabs .project-process-list .project-process-btn.active .project-process-dot:before {
    background: linear-gradient(180deg,#5c3e94,#2b1a5a)
}

.project-process-section .project-process-tabs .project-process-list .project-process-btn.active .project-process-dot .project-process-shape {
    opacity: 1
}

.project-process-section .project-process-tabs .project-process-list .project-process-dot {
    position: relative;
    z-index: 2
}

.project-process-section .project-process-tabs .project-process-list .project-process-dot:before {
    content: "";
    position: absolute;
    top: 4px;
    left: -16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #5c3e94;
    z-index: -1
}

.project-process-section .project-process-tabs .project-process-list .project-process-dot .project-process-shape {
    opacity: 0;
    transition: .3s
}

.project-process-section .project-process-tab-contnet .project-process-card {
    border: 1px solid transparent;
    transition: all .3s ease
}

.project-process-section .project-process-tab-contnet .project-process-card.active-card {
    border: 1px solid var(--dx-primary)!important
}

.healthcare-process-section .healthcare-process-accordian .healthcare-process-step {
    position: relative;
    display: block;
    width: 100%;
    height: 120px;
    overflow: hidden;
    transition: all .4s ease
}

.healthcare-process-section .healthcare-process-accordian .healthcare-process-step .healthcare-process-number {
    font-size: 9rem;
    opacity: .1;
    line-height: .8;
    transition: .4s ease-in-out
}

.healthcare-process-section .healthcare-process-accordian .healthcare-process-step.active {
    height: 260px;
    background-color: #fff!important
}

.healthcare-process-section .healthcare-process-accordian .healthcare-process-step.active .healthcare-process-number {
    color: #5c3e94;
    opacity: 1
}

@media(max-width: 767px) {
    .healthcare-process-section .healthcare-process-accordian .healthcare-process-step.active {
        height:510px
    }
}

@media(min-width: 768px)and (max-width:991px) {
    .healthcare-process-section .healthcare-process-accordian .healthcare-process-step.active {
        height:375px
    }
}

.service-v1-process-section .service-v1-process-top .service-v1-process-card .service-v1-process-step {
    bottom: -48%
}

.service-v1-process-section .service-v1-process-top .service-v1-process-card .service-v1-process-step:before {
    content: "";
    position: absolute;
    bottom: 85%;
    left: 50%;
    transform: translate(50%);
    width: 1px;
    height: 50px;
    background-color: #5c3e94;
    z-index: -1
}

.service-v1-process-section .service-v1-process-top .service-v1-process-card .service-v1-process-step .bg-primary-subtle {
    background-color: #eeebf4!important
}

.service-v1-process-section .service-v1-process-bottom .service-v1-process-card .service-v1-process-step {
    top: -48%
}

.service-v1-process-section .service-v1-process-bottom .service-v1-process-card .service-v1-process-step:before {
    content: "";
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(50%);
    width: 1px;
    height: 50px;
    background-color: #5c3e94;
    z-index: -1
}

.service-v1-process-section .service-v1-process-bottom .service-v1-process-card .service-v1-process-step .bg-primary-subtle {
    background-color: #eeebf4!important
}

@media(min-width: 1200px)and (max-width:1535px) {
    .service-v1-process-section .service-v1-process-top .service-v1-process-card .service-v1-process-step {
        bottom:-36%
    }

    .service-v1-process-section .service-v1-process-bottom .service-v1-process-card .service-v1-process-step {
        top: -33%
    }
}

.service-single-process-section .service-single-process-card {
    transition: .5s ease-in-out
}

.service-single-process-section .service-single-process-card .service-single-process-icon {
    transition: .4s ease-in-out
}

.service-single-process-section .service-single-process-card .service-single-process-number {
    bottom: -24px;
    transform: translate(-50%) rotate(46deg);
    transition: .4s ease-in-out
}

.service-single-process-section .service-single-process-card .service-single-process-number p {
    transform: rotate(-46deg)
}

.service-single-process-section .service-single-process-card:hover {
    background-color: rgba(var(--dx-primary-rgb),.15)!important
}

.service-single-process-section .service-single-process-card:hover .service-single-process-icon {
    transform: rotateY(180deg)
}

.service-single-process-section .service-single-process-card:hover .service-single-process-number {
    background-color: var(--dx-primary)!important;
    color: #fff!important
}

.about-v2-process-section .about-v2-process-card {
    transition: .3s ease;
    transform: scale(.98)
}

.about-v2-process-section .about-v2-process-card .about-v2-process-icon {
    outline: 1px solid #5C3E94;
    outline-offset: 3px
}

.about-v2-process-section .about-v2-process-card.active-card {
    transform: scale(1);
    border-color: #5c3e94!important;
    box-shadow: 0 10px 30px #00000014
}

@media(min-width: 1535px) {
    .digital-blog-section .digital-blog-img {
        max-height:656px;
        height: 100%
    }
}

.digital-blog-section .digital-blog-card .digital-blog-date {
    position: relative
}

.digital-blog-section .digital-blog-card .digital-blog-date:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: var(--dx-body-color);
    width: 60px;
    height: 1px
}

.digital-blog-section #blogPreviewImage {
    transition: opacity .4s ease,transform .6s ease
}

.digital-blog-section #blogPreviewImage.zoom {
    transform: scale(1.08);
    opacity: 0
}

.starup-blog-section .st-swiper-buttons .swiper-button-prev-custom,.starup-blog-section .st-swiper-buttons .swiper-button-next-custom {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to left,#2e0f53,var(--dx-primary));
    color: #fff;
    transition: color .4s ease;
    border-radius: 50px
}

.starup-blog-section .st-swiper-buttons .swiper-button-prev-custom:before,.starup-blog-section .st-swiper-buttons .swiper-button-next-custom:before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: translate(-100%);
    transition: transform .4s ease;
    z-index: 0
}

.starup-blog-section .st-swiper-buttons .swiper-button-prev-custom span,.starup-blog-section .st-swiper-buttons .swiper-button-prev-custom i,.starup-blog-section .st-swiper-buttons .swiper-button-next-custom span,.starup-blog-section .st-swiper-buttons .swiper-button-next-custom i {
    position: relative;
    z-index: 1
}

.starup-blog-section .st-swiper-buttons .swiper-button-prev-custom:hover,.starup-blog-section .st-swiper-buttons .swiper-button-next-custom:hover {
    color: #5c3e94
}

.starup-blog-section .st-swiper-buttons .swiper-button-prev-custom:hover:before,.starup-blog-section .st-swiper-buttons .swiper-button-next-custom:hover:before {
    transform: translate(0)
}

.starup-blog-section .st-blog-card .st-blog-card-img img {
    transition: all .4s ease
}

.starup-blog-section .st-blog-card .st-blog-card-img:hover img {
    transform: scale(1.1)
}

.starup-blog-section .st-blog-card .st-blog-card-body {
    position: relative;
    z-index: 1;
    margin-top: -17%;
    margin-left: 6%;
    max-width: 75%
}

.starup-blog-section .st-blog-card .st-blog-card-body:before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(to left,#2e0f53,#592da8);
    opacity: 0;
    z-index: -1;
    transition: opacity .4s ease
}

@media(max-width: 767px) {
    .starup-blog-section .st-blog-card .st-blog-card-body {
        max-width:100%
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .starup-blog-section .st-blog-card .st-blog-card-head {
        min-height:92px
    }
}

.starup-blog-section .st-blog-card:hover .st-blog-card-body p,.starup-blog-section .st-blog-card:hover .st-blog-card-body h5 {
    color: #fff
}

.starup-blog-section .st-blog-card:hover .st-blog-card-body:before {
    opacity: 1
}

.saas-v2-blog-section .saas-v2-blog-wrapper {
    height: 638px
}

.saas-v2-blog-section .saas-v2-blog-wrapper .marquee-scroll-up {
    animation: marquee-scroll-up 40s linear infinite!important
}

.saas-v2-blog-section .saas-v2-blog-card .saas-v2-blog-content .saas-v2-blog-card-link {
    color: #171717;
    transition: .3s ease
}

.saas-v2-blog-section .saas-v2-blog-card .saas-v2-blog-content .saas-v2-blog-card-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: var(--dx-primary);
    transition: .4s ease
}

.saas-v2-blog-section .saas-v2-blog-card .saas-v2-blog-content .saas-v2-blog-card-link:hover {
    color: var(--dx-primary)
}

.saas-v2-blog-section .saas-v2-blog-card .saas-v2-blog-content .saas-v2-blog-card-link:hover:after {
    width: 100%
}

.healthcare-blog-section .healthcare-blog-card {
    min-height: 420px;
    height: 100%;
    transition: .4s ease-in-out;
    position: relative
}

.healthcare-blog-section .healthcare-blog-card .healthcare-blog-img {
    opacity: 0;
    transform: scale(1.1);
    transition: .6s ease;
    z-index: 1
}

.healthcare-blog-section .healthcare-blog-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #0006;
    opacity: 0;
    transition: .4s ease;
    z-index: 1
}

.healthcare-blog-section .healthcare-blog-card .healthcare-blog-hover-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-40%);
    opacity: 0;
    transition: .4s ease;
    z-index: 2;
    text-align: center;
    width: 80%
}

.healthcare-blog-section .healthcare-blog-card:hover {
    color: #fff
}

.healthcare-blog-section .healthcare-blog-card:hover .healthcare-blog-img {
    opacity: 1;
    transform: scale(1)
}

.healthcare-blog-section .healthcare-blog-card:hover:after {
    opacity: 1
}

.healthcare-blog-section .healthcare-blog-card:hover .healthcare-blog-content {
    opacity: 0;
    transform: translateY(-10px);
    transition: .3s ease
}

.healthcare-blog-section .healthcare-blog-card:hover .healthcare-blog-hover-content {
    opacity: 1;
    transform: translate(-50%,-50%)
}

.healthcare-blog-section .healthcare-blog-card>*:not(img) {
    position: relative;
    z-index: 2
}

.blog-article-section .blog-article-card .blog-article-img-left {
    height: 55rem
}

@media(max-width: 1199px) {
    .blog-article-section .blog-article-card .blog-article-img-left {
        height:100%
    }
}

.blog-news-section .blog-news-card {
    min-height: 542px
}

.blog-news-section .blog-news-card .blog-news-img {
    height: 298px;
    width: 100%
}

.blog-editor-choice-section .blog-editor-choice-card .blog-editor-choice-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #171717;
    transition: .3s ease
}

.blog-editor-choice-section .blog-editor-choice-card .blog-editor-choice-link i {
    transition: .3s ease
}

.blog-editor-choice-section .blog-editor-choice-card .blog-editor-choice-link:hover {
    color: var(--dx-primary)
}

.blog-editor-choice-section .blog-editor-choice-card .blog-editor-choice-link:hover i {
    transform: translate(6px)
}

.blog-video-news-section .blog-video-img .blog-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: visible;
    z-index: 2;
    transition: .3s ease
}

.blog-video-news-section .blog-video-img .blog-video-play-icon:hover {
    transform: translate(-50%,-50%) scale(1.1)
}

.blog-video-news-section .blog-video-img .blog-video-play-icon .blog-video-play-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: bgwaves 2s infinite
}

.blog-video-news-section .blog-video-img .blog-video-play-icon .blog-video-play-waves:nth-child(1) {
    animation-delay: 0s
}

.blog-video-news-section .blog-video-img .blog-video-play-icon .blog-video-play-waves:nth-child(2) {
    animation-delay: .4s
}

.blog-video-news-section .blog-video-img .blog-video-play-icon .blog-video-play-waves:nth-child(3) {
    animation-delay: .8s
}

.blog-insta-section .blog-insta-img .blog-insta-icon {
    transform: translate(-50%,calc(-50% + 20px));
    opacity: 0;
    transition: all .4s ease
}

.blog-insta-section .blog-insta-img:hover .blog-insta-icon {
    opacity: 1;
    transform: translate(-50%,-50%)
}

.blog-popular-img,.blog-article-img,.blog-news-img,.blog-editor-choice-img {
    position: relative;
    overflow: hidden
}

.blog-popular-img img,.blog-article-img img,.blog-news-img img,.blog-editor-choice-img img {
    transition: .4s ease
}

.blog-popular-img:after,.blog-article-img:after,.blog-news-img:after,.blog-editor-choice-img:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #00000026;
    opacity: 0;
    transition: .3s ease;
    pointer-events: none
}

.blog-popular-img:hover img,.blog-article-img:hover img,.blog-news-img:hover img,.blog-editor-choice-img:hover img {
    transform: scale(1.08)
}

.blog-popular-img:hover:after,.blog-article-img:hover:after,.blog-news-img:hover:after,.blog-editor-choice-img:hover:after {
    opacity: 1
}

.bl-section .bl-main-content .bl-card .bl-card-img img {
    transition: .4s ease-in-out
}

.bl-section .bl-main-content .bl-card .bl-card-content .bl-card-link {
    transition: .3s ease;
    color: #171717
}

.bl-section .bl-main-content .bl-card .bl-card-content .bl-card-link i {
    transition: transform .3s ease
}

.bl-section .bl-main-content .bl-card .bl-card-content .bl-card-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: #5c3e94;
    transition: .3s ease
}

.bl-section .bl-main-content .bl-card .bl-card-content .bl-card-link:hover {
    color: #5c3e94
}

.bl-section .bl-main-content .bl-card .bl-card-content .bl-card-link:hover:after {
    width: 100%
}

.bl-section .bl-main-content .bl-card .bl-card-content .bl-card-link:hover i {
    transform: translate(5px)
}

.bl-section .bl-main-content .bl-card:hover .bl-card-img img {
    transform: rotate(3deg) scale(1.1)
}

.bl-section .bl-sidebar-tag .bl-sidebar-tag-badge {
    transition: .3s ease;
    color: #171717
}

.bl-section .bl-sidebar-tag .bl-sidebar-tag-badge:hover {
    background-color: #5c3e94;
    color: #fff
}

.startup-pricing-section .st-pricing-card {
    transition: transform .3s ease
}

.startup-pricing-section .st-pricing-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left,#2e0f53,var(--dx-primary));
    transform: translateY(100%);
    transition: transform .6s ease;
    z-index: -1
}

.startup-pricing-section .st-pricing-card .st-pricing-icon {
    background: linear-gradient(to left,#2e0f53,var(--dx-primary));
    color: #fff
}

.startup-pricing-section .st-pricing-card .st-pricing-subtitle {
    color: var(--dx-secondary-color)
}

.startup-pricing-section .st-pricing-card:hover,.startup-pricing-section .st-pricing-card:hover .st-pricing-subtitle {
    color: #fff
}

.startup-pricing-section .st-pricing-card:hover .st-pricing-icon {
    background: #fff
}

.startup-pricing-section .st-pricing-card:hover .st-pricing-icon i {
    background: linear-gradient(to left,#2e0f53,var(--dx-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.startup-pricing-section .st-pricing-card:hover:before {
    transform: translateY(0)
}

.startup-pricing-section .st-pricing-card .st-pricing-btn {
    background: linear-gradient(to left,#2e0f53,var(--dx-primary));
    color: #fff;
    transition: color .4s ease
}

.startup-pricing-section .st-pricing-card .st-pricing-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: translate(-100%);
    transition: transform .4s ease;
    z-index: -1
}

.startup-pricing-section .st-pricing-card .st-pricing-btn:hover {
    color: #5c3e94
}

.startup-pricing-section .st-pricing-card .st-pricing-btn:hover:before {
    transform: translate(0)
}

.automation-pricing-section .automation-pricing-svg {
    bottom: -16%;
    left: -2%
}

.automation-pricing-section .automation-pricing-img {
    top: 7%
}

.automation-pricing-section .automation-pricing-card .automation-pricing-divider {
    height: 1px;
    background: linear-gradient(90deg,transparent,#5C3E94,transparent)
}

.automation-pricing-section .automation-pricing-card.first {
    margin-right: -19px
}

.automation-pricing-section .automation-pricing-card.last {
    margin-left: -19px
}

.automation-pricing-section .automation-pricing-card .automation-pricing-btn {
    background: transparent!important
}

@media(max-width: 1199px) {
    .automation-pricing-section .automation-pricing-card.first {
        margin-right:0
    }

    .automation-pricing-section .automation-pricing-card.last {
        margin-left: 0
    }
}

.analytics-pricing-switch {
    -webkit-user-select: none;
    user-select: none
}

.analytics-pricing-switch .analytics-switch-label {
    transition: .3s ease;
    color: var(--dx-secondary-color)
}

.analytics-pricing-switch .analytics-switch-label.active {
    color: var(--dx-dark)
}

.analytics-pricing-switch .analytics-pricing-toggle {
    position: relative;
    width: 62px;
    height: 27px;
    display: inline-block
}

.analytics-pricing-switch .analytics-pricing-toggle input {
    opacity: 0;
    width: 0;
    height: 0
}

.analytics-pricing-switch .analytics-pricing-toggle input:checked+.analytics-pricing-slider:before {
    transform: translate(28px)
}

.analytics-pricing-switch .analytics-pricing-slider {
    position: absolute;
    inset: 0;
    transition: .4s ease
}

.analytics-pricing-switch .analytics-pricing-slider:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    top: 4px;
    background: var(--dx-primary);
    border-radius: 50%;
    transition: .4s ease
}

.crm-pricing-section .crm-shape-two {
    left: -5%;
    top: 4%;
    width: 14%
}

.crm-pricing-section .crm-plan-starter-card {
    border-top-left-radius: 1rem
}

.crm-pricing-section .crm-plan-enterprise-card {
    border-top-right-radius: 1rem
}

.crm-pricing-section .crm-feature-starter-card {
    border-bottom-left-radius: 1rem
}

.crm-pricing-section .crm-feature-enterprise-card {
    border-bottom-right-radius: 1rem
}

.crm-pricing-section .crm-pricing-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.crm-pricing-section .crm-pricing-table {
    min-width: 1430px
}

.crm-pricing-section .crm-pricing-btn-dark.crm-btn:before,.crm-pricing-section .crm-pricing-btn-dark.crm-btn:after {
    background: #000!important
}

.crm-pricing-section .crm-pricing-btn-dark:hover {
    border-color: #000!important
}

.crm-pricing-section .crm-pricing-btn-dark:hover span {
    color: #fff!important
}

.saas-v1-pricing-section .saas-v1-pro-card .saas-v1-btn:before {
    background-color: var(--dx-primary)
}

.saas-v1-pricing-section .saas-v1-pro-card .saas-v1-btn:hover span,.saas-v1-pricing-section .saas-v1-pro-card .saas-v1-btn:hover i {
    color: #fff!important
}

.project-pricing-section .project-pricing-card .project-pricing-card-icon {
    top: -5%
}

.project-pricing-section .project-pricing-card .project-pricing-price {
    font-size: 3rem
}

.project-pricing-section .project-pro-card {
    background-image: url(../images/project-main-bg.png);
    background-size: cover
}

@media(min-width: 1200px) {
    .project-pricing-section .project-starter-card {
        transform:perspective(800px) rotateY(-8deg) scale(.9)
    }

    .project-pricing-section .project-enterprise-card {
        transform: perspective(800px) rotateY(8deg) scale(.9)
    }
}

.pricing-section .pricing-bg {
    width: 96%
}

.pricing-section .pricing-wrapper {
    background-color: #eeebf4
}

.pricing-compare-section .pricing-compare-table {
    border-collapse: separate;
    border-spacing: 0
}

.pricing-compare-section .pricing-compare-table th,.pricing-compare-section .pricing-compare-table td {
    padding: 22px 20px;
    border-bottom: 1px solid var(--dx-border-color)
}

.app-stats-section .app-stats-card .app-stats-number {
    font-size: 100px
}

@media(max-width: 1199px) {
    .app-stats-section .app-stats-card .app-stats-number {
        font-size:80px
    }
}

.analytics-stats-section {
    margin-top: -10%
}

.analytics-stats-section .analytics-stats-card {
    position: relative;
    transition: .4s ease-in-out
}

.analytics-stats-section .analytics-stats-card:hover {
    background-color: #f25912;
    color: #fff;
    border-radius: 20px;
    transform: translateY(-18px)
}

.analytics-stats-section .analytics-stats-card:hover p {
    color: #fff!important
}

.analytics-stats-section .analytics-stats-link {
    color: #000;
    transition: .4s ease-in-out
}

.analytics-stats-section .analytics-stats-link:hover {
    color: #f25912
}

@media(max-width: 1199px) {
    .analytics-stats-section {
        margin-top:0%;
        padding: 50px 0 0
    }
}

.crm-stats-section .crm-marquee-text {
    font-size: 320px;
    letter-spacing: 6px;
    line-height: 1.6;
    color: transparent;
    background: linear-gradient(120deg,#9c7df081,#ff944d88);
    -webkit-background-clip: text;
    background-clip: text
}

.crm-stats-section .crm-stats-wrapper {
    background-image: linear-gradient(180deg,#0000,#fff 50%);
    top: 35%
}

.crm-stats-section .crm-stats-wrapper .crm-counter {
    font-size: 4rem
}

@media(max-width: 767px) {
    .crm-stats-section .crm-marquee-text {
        font-size:100px
    }

    .crm-stats-section .crm-stats-wrapper {
        top: 0
    }

    .crm-stats-section .crm-stats-wrapper .crm-counter {
        font-size: 2rem
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .crm-stats-section .crm-stats-wrapper {
        top:13%
    }
}

.crm-impact-section .crm-impact-Sales-card {
    background-image: url(../images/crm-sales-card-bg.jpg);
    background-size: cover;
    position: relative;
    z-index: 100
}

.crm-impact-section .crm-impact-Sales-card:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0000006b;
    top: 0;
    left: 0;
    z-index: -1
}

.crm-impact-section .crm-impact-testimonial-card .crm-reviewSwiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(var(--dx-danger-rgb),.3);
    opacity: 1;
    border-radius: 50%;
    transition: all .3s ease
}

.crm-impact-section .crm-impact-testimonial-card .crm-reviewSwiper-pagination .swiper-pagination-bullet-active {
    width: 40px;
    height: 8px;
    border-radius: 20px;
    background: #ef4444
}

.project-stats-section .project-stats-number {
    font-size: 3.4rem
}

.conference-countdown-section .conference-countdown-item .conference-countdown-number {
    font-size: 10rem;
    opacity: .04
}

.automation-cta-section {
    padding: 415px 0 120px
}

@media(max-width: 767px) {
    .automation-cta-section {
        padding:130px 0 50px
    }
}

@media(min-width: 768px)and (max-width:991px) {
    .automation-cta-section {
        padding:296px 0 130px
    }
}

.analytics-cta-section .analytics-cta-wrap {
    background-image: url(../images/analytics-cta-bg.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative
}

.analytics-cta-section .analytics-cta-wrap:before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #00000065;
    width: 100%;
    height: 100%
}

.crm-cta-section .crm-cta-img {
    position: relative
}

.crm-cta-section .crm-cta-img:before {
    content: "";
    position: absolute;
    bottom: -34%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg,rgba(0,0,0,0) 0%,var(--dx-white) 50%);
    z-index: 1
}

.crm-cta-section .crm-cta-img img {
    filter: grayscale(1);
    width: 70rem
}

.crm-cta-section .crm-cta-btn-outline.crm-btn:before,.crm-cta-section .crm-cta-btn-outline.crm-btn:after {
    background: #5c3e94!important
}

.crm-cta-section .crm-cta-btn-outline.crm-btn:hover:before,.crm-cta-section .crm-cta-btn-outline.crm-btn:hover:after {
    border-color: #5c3e94!important
}

.crm-cta-section .crm-cta-btn-outline:hover {
    border-color: #5c3e94!important
}

.crm-cta-section .crm-cta-btn-outline:hover span {
    color: #fff!important
}

.saas-v2-cta-section {
    background: url(../images/saas-v2-cta-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative
}

.saas-v2-cta-section:before {
    content: "";
    position: absolute;
    background: #00000075;
    inset: 0;
    width: 100%;
    height: 100%
}

.saas-v2-cta-section .saas-v2-badge:before,.saas-v2-cta-section .saas-v2-badge:after {
    background: #fff
}

.healthcare-cta-section {
    position: relative;
    z-index: 3;
    margin-bottom: -150px
}

.healthcare-cta-section .healthcare-cta-inner {
    padding: 0 20px 20px;
    border-radius: 0 0 20px 20px;
    position: relative
}

.healthcare-cta-section .healthcare-cta-inner .healthcare-cta-title {
    font-size: 4rem
}

@media(max-width: 991px) {
    .healthcare-cta-section {
        margin-bottom:0
    }

    .healthcare-cta-section .healthcare-cta-inner {
        padding: 0 0 50px
    }

    .healthcare-cta-section .healthcare-cta-inner .healthcare-cta-title {
        font-size: 2rem
    }
}

.product-cta-section .product-cta-img-wrapper .product-cta-img-text {
    background-image: url(../images/product-review-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 170px;
    line-height: .7;
    animation: textanimation 10s linear infinite
}

@media(min-width: 768px)and (max-width:1199px) {
    .product-cta-section .product-cta-img-wrapper .product-cta-img-text {
        font-size:106px
    }
}

@keyframes textanimation {
    0% {
        background-position: 50% 0
    }

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

.product-cta-section .product-cta-content {
    max-width: 700px
}

.about-v1-cta-section .about-v1-cta-mail-wrapper .about-v1-cta-wave-container {
    width: 150px;
    height: 150px
}

.about-v1-cta-section .about-v1-cta-mail-wrapper .about-v1-cta-wave-container .about-v1-cta-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(.5);
    width: 150px;
    height: 150px;
    border: 2px solid var(--dx-gray-300);
    border-radius: 50%;
    animation: bgwaves 2s infinite
}

.about-v1-cta-section .about-v1-cta-mail-wrapper .about-v1-cta-wave-container .about-v1-cta-wave:nth-child(2) {
    animation-delay: .6s
}

.about-v1-cta-section .about-v1-cta-mail-wrapper .about-v1-cta-wave-container .about-v1-cta-wave:nth-child(3) {
    animation-delay: 1.2s
}

.about-v1-cta-section .about-v1-cta-mail-wrapper .about-v1-cta-wave-container .about-v1-cta-wave:nth-child(4) {
    animation-delay: 2s
}

.about-v1-cta-section .about-v1-cta-mail-wrapper .about-v1-cta-mail-info {
    position: absolute;
    top: -60%
}

.about-v1-cta-section .about-v1-cta-mail-wrapper .about-v1-cta-mail-info a {
    display: inline-block;
    transition: all .4s
}

.about-v1-cta-section .about-v1-cta-mail-wrapper .about-v1-cta-mail-info svg {
    position: absolute;
    bottom: -33px;
    left: 50%;
    margin-left: -17px
}

.team-cta-section .team-cta-wrapper {
    width: 500px;
    height: 500px;
    position: relative;
    z-index: 1
}

.team-cta-section .team-cta-wrapper .team-cta-content {
    max-width: 375px;
    width: 100%
}

.team-cta-section .team-cta-wrapper .team-cta-outer-circle {
    width: 545px;
    height: 545px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: rotateCircle 14s linear infinite;
    transform-origin: center;
    will-change: transform
}

.team-cta-section .team-cta-wrapper .team-cta-outer-circle:before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translate(-50%);
    width: 9px;
    height: 9px;
    border-radius: 10%;
    background-color: #5c3e94
}

.team-cta-section .team-cta-wrapper .team-cta-outer-circle:after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translate(-50%);
    width: 9px;
    height: 9px;
    border-radius: 10%;
    background-color: #5c3e94
}

.team-cta-section .team-cta-wrapper .team-cta-inner-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: rotateCircle 16s linear infinite reverse;
    transform-origin: center;
    will-change: transform
}

.team-cta-section .team-cta-wrapper .team-cta-inner-circle:before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translate(-50%);
    width: 9px;
    height: 9px;
    border-radius: 10%;
    background-color: #5c3e94
}

.team-cta-section .team-cta-wrapper .team-cta-inner-circle:after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translate(-50%);
    width: 9px;
    height: 9px;
    border-radius: 10%;
    background-color: #5c3e94
}

@keyframes rotateCircle {
    0% {
        transform: translate(-50%,-50%) rotate(0)
    }

    to {
        transform: translate(-50%,-50%) rotate(360deg)
    }
}

.digital-testimonial-section {
    background-image: url(../images/digital-review-bg.jpg);
    background-size: cover;
    background-position: center
}

.digital-testimonial-section .digital-testimonial-title .digital-main-subtitle {
    border: 1px solid var(--dx-white)!important
}

.digital-testimonial-section .digital-testimonial-title .digital-main-subtitle:before,.digital-testimonial-section .digital-testimonial-title .digital-main-subtitle:after {
    background: var(--dx-dark)!important
}

.digital-testimonial-section .digital-testimonial-swiper .digital-review-card {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border-style: solid;
    border-width: 1px;
    border-color: #fff3;
    background: #ffffff0d;
    transition: all .5s ease;
    position: relative
}

.digital-testimonial-section .digital-testimonial-swiper .digital-review-card:before,.digital-testimonial-section .digital-testimonial-swiper .digital-review-card:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    transition: .4s
}

.digital-testimonial-section .digital-testimonial-swiper .digital-review-card:before {
    top: -2px;
    left: -2px;
    border-right: 0;
    border-bottom: 0
}

.digital-testimonial-section .digital-testimonial-swiper .digital-review-card:after {
    bottom: -2px;
    right: -2px;
    border-left: 0;
    border-top: 0
}

.digital-testimonial-section .digital-testimonial-swiper .digital-review-card:hover:before,.digital-testimonial-section .digital-testimonial-swiper .digital-review-card:hover:after {
    width: 100%;
    height: 100%
}

.digital-testimonial-section .digital-testimonial-swiper .swiper-slide:nth-child(odd) .digital-review-card {
    transform: rotate(-4deg)
}

.digital-testimonial-section .digital-testimonial-swiper .swiper-slide:nth-child(2n) .digital-review-card {
    transform: rotate(4deg)
}

.digital-testimonial-section .digital-testimonial-swiper .swiper-slide:nth-child(odd) .digital-review-card:hover {
    transform: rotate(4deg)
}

.digital-testimonial-section .digital-testimonial-swiper .swiper-slide:nth-child(2n) .digital-review-card:hover {
    transform: rotate(-4deg)
}

.digital-testimonial-section .digital-testimonial-swiper .digital-swiper-controls {
    max-width: 45rem;
    width: 100%;
    margin: 0 auto
}

.digital-testimonial-section .digital-testimonial-swiper .digital-swiper-controls .progress {
    height: 3px;
    background-color: #ffffff1a;
    border-radius: 2px
}

.digital-testimonial-section .digital-testimonial-swiper .digital-swiper-controls .progress-bar {
    background-color: #5c3e94;
    transition: width .4s ease
}

.digital-testimonial-section .digital-testimonial-swiper .digital-swiper-controls .digital-swiper-nav-buttons .swiper-button-prev-custom,.digital-testimonial-section .digital-testimonial-swiper .digital-swiper-controls .digital-swiper-nav-buttons .swiper-button-next-custom {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #fff3;
    background: #ffffff0d;
    transition: .4s ease-in-out
}

.digital-testimonial-section .digital-testimonial-swiper .digital-swiper-controls .digital-swiper-nav-buttons .swiper-button-prev-custom:hover,.digital-testimonial-section .digital-testimonial-swiper .digital-swiper-controls .digital-swiper-nav-buttons .swiper-button-next-custom:hover {
    background-color: #5c3e94;
    border-color: #5c3e94
}

.automation-testimonial-section .automation-testimonial-card .automation-testimonial-card-divider {
    height: 1px;
    background: linear-gradient(90deg,transparent,#5C3E94,transparent)
}

.automation-testimonial-section .automation-testimonial-wrapper {
    max-height: 900px
}

.automation-testimonial-section .automation-testimonial-wrapper .automation-testimonial-top-gradient,.automation-testimonial-section .automation-testimonial-wrapper .automation-testimonial-bottom-gradient {
    width: 100%;
    height: 240px;
    pointer-events: none;
    z-index: 2
}

.automation-testimonial-section .automation-testimonial-wrapper .automation-testimonial-top-gradient {
    background: linear-gradient(to bottom,#020617,#020617d9,#02061766 60%,#02061700)
}

.automation-testimonial-section .automation-testimonial-wrapper .automation-testimonial-bottom-gradient {
    background: linear-gradient(to top,#020617,#020617d9,#02061766 60%,#02061700)
}

.app-testimonial-section .app-testimonial-swiper-controls .swiper-button-prev-app,.app-testimonial-section .app-testimonial-swiper-controls .swiper-button-next-app {
    background-color: transparent;
    transition: .4s ese-in-out
}

.app-testimonial-section .app-testimonial-swiper-controls .swiper-button-prev-app:hover,.app-testimonial-section .app-testimonial-swiper-controls .swiper-button-next-app:hover {
    background-color: #5c3e94;
    border-color: #5c3e94!important
}

.app-testimonial-section .app-testimonial-card {
    min-height: 470px
}

.app-testimonial-section .app-testimonial-card .app-testimonial-hover {
    opacity: 0;
    visibility: hidden;
    transition: .5s ease
}

.app-testimonial-section .app-testimonial-card .app-testimonial-hover .app-testimonial-hover-content,.app-testimonial-section .app-testimonial-card .app-testimonial-hover .app-testimonial-hover-desc,.app-testimonial-section .app-testimonial-card .app-testimonial-hover img {
    opacity: 0;
    transform: translateY(30px);
    transition: all .5s ease
}

.app-testimonial-section .app-testimonial-card .app-testimonial-hover img {
    transition-delay: 0s;
    transform: scale(1.2)
}

.app-testimonial-section .app-testimonial-card:hover .app-testimonial-hover {
    opacity: 1;
    visibility: visible
}

.app-testimonial-section .app-testimonial-card:hover .app-testimonial-hover .app-testimonial-hover-content,.app-testimonial-section .app-testimonial-card:hover .app-testimonial-hover .app-testimonial-hover-desc,.app-testimonial-section .app-testimonial-card:hover .app-testimonial-hover img {
    opacity: 1;
    transform: translateY(0)
}

.app-testimonial-section .app-testimonial-card:hover .app-testimonial-hover img {
    transform: scale(1)
}

.analytics-testimonial-section .swiper-button-prev-custom,.analytics-testimonial-section .swiper-button-next-custom {
    position: relative
}

.analytics-testimonial-section .swiper-button-prev-custom:before,.analytics-testimonial-section .swiper-button-next-custom:before {
    content: "";
    position: absolute;
    width: 64px;
    height: 64px;
    border: 1px dashed var(--dx-gray-500);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%)
}

.analytics-testimonial-section .swiper-button-prev-custom:before {
    left: -34%
}

.analytics-testimonial-section .swiper-button-next-custom:before {
    right: -34%
}

.analytics-testimonial-section .analytics-testimonial-wrapper .analytics-testimonial-card {
    min-height: 239px;
    height: 100%
}

.analytics-testimonial-section .analytics-testimonial-wrapper .anylytics-testimonial-imgline {
    bottom: 11%;
    left: 16%
}

.saas-v1-testimonial-section:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    height: 100%;
    width: 97%;
    background-color: #fff;
    border-radius: 16px;
    z-index: -1
}

.saas-v1-testimonial-section .saas-v1-testimonial-card {
    transition: all .5s ease-in-out
}

.saas-v1-testimonial-section .saas-v1-testimonial-card .saas-v1-testimonial-image {
    opacity: 0;
    transition: all .5s ease-in-out
}

.saas-v1-testimonial-section .saas-v1-testimonial-card .saas-v1-testimonial-content {
    transition: all .5s ease-in-out
}

.saas-v1-testimonial-section .saas-v1-testimonial-card:hover .saas-v1-testimonial-content {
    transform: translateY(75px) rotate(-10deg);
    background-color: #5c3e94!important;
    color: #fff!important
}

.saas-v1-testimonial-section .saas-v1-testimonial-card:hover .saas-v1-testimonial-content .text-muted {
    color: #ffffffb3!important
}

.saas-v1-testimonial-section .saas-v1-testimonial-card:hover .saas-v1-testimonial-image {
    opacity: 100%;
    transform: translateY(-100px) rotate(0)
}

@media(max-width: 1535px) {
    .saas-v1-testimonial-section:before {
        width:98%
    }
}

.project-testimonial-section .project-testimonial-card-bg1,.project-testimonial-section .project-testimonial-card-bg2,.project-testimonial-section .project-testimonial-card-bg3 {
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    color: #fff;
    z-index: 1
}

.project-testimonial-section .project-testimonial-card-bg1:before,.project-testimonial-section .project-testimonial-card-bg2:before,.project-testimonial-section .project-testimonial-card-bg3:before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #0000007e;
    z-index: -1
}

.project-testimonial-section .project-testimonial-card-bg1 {
    background-image: url(../images/pr-review-bg1.jpg)
}

.project-testimonial-section .project-testimonial-card-bg2 {
    background-image: url(../images/pr-review-bg2.jpg)
}

.project-testimonial-section .project-testimonial-card-bg3 {
    background-image: url(../images/pr-review-bg3.jpg)
}

.healthcare-team-section .healthcare-team-tabs .nav-link.active {
    background-color: #5c3e94!important;
    color: #fff!important
}

.healthcare-testimonial-section .healthcare-review-card .healthcare-rating-number {
    font-size: 9rem
}

.product-testimonial-section {
    background-image: url(../images/product-testimonial-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed
}

.product-testimonial-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #00000083;
    z-index: -1;
    width: 100%;
    height: 100%
}

.product-testimonial-section .product-testimonial-item {
    max-width: 900px;
    margin: 0 auto
}

.product-testimonial-section .product-testimonial-item .product-testimonial-item-divider {
    width: 14px;
    height: 1px
}

.conference-speaker-section .conference-speaker-badge-link {
    bottom: -5%
}

.conference-speaker-section .conference-speaker-card .conference-speaker-overlay {
    background: #00000069;
    opacity: 0;
    transform: scale(.8);
    transition: all .4s ease
}

.conference-speaker-section .conference-speaker-card .conference-speaker-social .conference-speaker-social-icon {
    transform: translateY(20px);
    opacity: 0;
    transition: all .4s ease
}

.conference-speaker-section .conference-speaker-card .conference-speaker-social .conference-speaker-social-icon:nth-child(1) {
    transition-delay: .1s
}

.conference-speaker-section .conference-speaker-card .conference-speaker-social .conference-speaker-social-icon:nth-child(2) {
    transition-delay: .2s
}

.conference-speaker-section .conference-speaker-card .conference-speaker-social .conference-speaker-social-icon:nth-child(3) {
    transition-delay: .3s
}

.conference-speaker-section .conference-speaker-card:hover .conference-speaker-overlay {
    opacity: 1;
    transform: scale(1)
}

.conference-speaker-section .conference-speaker-card:hover .conference-speaker-social .conference-speaker-social-icon {
    transform: translateY(0);
    opacity: 1
}

.conference-testimonial-section .conference-testimonial-wrap {
    top: 10%
}

.blog-author-section .blog-author-card .blog-author-img .blog-author-social-overlay {
    position: absolute;
    right: 41px;
    bottom: -9px;
    z-index: 2
}

.blog-author-section .blog-author-card .blog-author-img .blog-author-social-overlay ul li {
    display: block;
    text-align: center
}

.blog-author-section .blog-author-card .blog-author-img .blog-author-social-overlay ul li a i {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px);
    transition: all .35s ease-in-out
}

.blog-author-section .blog-author-card .blog-author-img .blog-author-social-overlay .blog-author-social-plus {
    margin-top: 5px;
    text-align: center
}

.blog-author-section .blog-author-card .blog-author-img .blog-author-social-overlay .blog-author-social-plus i {
    display: inline-block;
    height: 45px;
    width: 45px;
    line-height: 45px;
    background: #5c3e94;
    color: #fff;
    border-radius: 50%
}

.blog-author-section .blog-author-card .blog-author-img .blog-author-social-overlay.bottom-11 {
    bottom: 11px
}

.blog-author-section .blog-author-card .blog-author-img:hover .blog-author-social-overlay ul li a i {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.blog-author-section .blog-author-card .blog-author-img .blog-author-social-overlay ul li:nth-child(1) a i {
    transition-delay: .3s
}

.blog-author-section .blog-author-card .blog-author-img .blog-author-social-overlay ul li:nth-child(2) a i {
    transition-delay: .2s
}

.blog-author-section .blog-author-card .blog-author-img .blog-author-social-overlay ul li:nth-child(3) a i {
    transition-delay: .1s
}

.about-v1-testimonial-section .about-v1-testimonial-pagination .about-v1-testimonial-nav .about-v1-testimonial-pagination-wrap .swiper-pagination {
    position: relative!important;
    bottom: auto!important;
    left: auto!important;
    width: auto!important;
    display: flex!important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0
}

.about-v1-testimonial-section .about-v1-testimonial-pagination .about-v1-testimonial-nav .about-v1-testimonial-line {
    width: 200px;
    height: 1px;
    background: #5c3e94;
    border: 1px solid;
    opacity: .2;
    flex-shrink: 0
}

.about-v1-testimonial-section .about-v1-testimonial-pagination .about-v1-testimonial-nav .about-v1-testimonial-line.left {
    border-image: linear-gradient(to right,#fff,#fff6,#ffffff1a) 1
}

.about-v1-testimonial-section .about-v1-testimonial-pagination .about-v1-testimonial-nav .about-v1-testimonial-line.right {
    border-image: linear-gradient(to left,#fff,#fff6,#ffffff1a) 1
}

.about-v1-testimonial-section .about-v1-testimonial-pagination .about-v1-testimonial-nav .about-v1-testimonial-nav-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: #5c3e94;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    flex-shrink: 0
}

.about-v1-testimonial-section .about-v1-testimonial-pagination .about-v1-testimonial-nav .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #5c3e94;
    border-radius: 50%;
    margin: 0!important
}

.about-v1-testimonial-section .about-v1-testimonial-pagination .about-v1-testimonial-nav .swiper-pagination-bullet-active {
    width: 18px;
    height: 18px;
    background: transparent;
    border: 2px solid #5C3E94;
    position: relative
}

.about-v1-testimonial-section .about-v1-testimonial-pagination .about-v1-testimonial-nav .swiper-pagination-bullet-active:after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background: #5c3e94;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.about-v1-team-section .about-v1-team-card .about-v1-team-card-img {
    width: 17rem;
    height: 17rem
}

.about-v1-team-section .about-v1-team-card .about-v1-team-card-img img {
    clip-path: polygon(0 0,100% 0,100% 85%,80% 100%,0 100%)
}

.about-v1-team-section .about-v1-team-card .about-v1-team-card-img .about-v1-team-emoji {
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    transform: scale(.4);
    opacity: 0;
    transition: .5s
}

.about-v1-team-section .about-v1-team-card .about-v1-team-card-img .about-v1-team-emoji .about-v1-team-emoji-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 40px;
    height: 40px
}

.about-v1-team-section .about-v1-team-card:hover .about-v1-team-emoji {
    transform: scale(1);
    opacity: 1
}

.leadership-section .leadership-search-box i {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    font-size: 18px
}

.about-v2-testimonial-section .about-v2-testimonial-content .about-v2-testimonial-title {
    font-size: 60px
}

@media(max-width: 767px) {
    .about-v2-testimonial-section .about-v2-testimonial-content .about-v2-testimonial-title {
        font-size:35px
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .about-v2-testimonial-section .about-v2-testimonial-content .about-v2-testimonial-title {
        font-size:45px
    }
}

.about-v2-testimonial-section .about-v2-testimonial-text {
    font-size: 8rem;
    bottom: -27px;
    right: 50px
}

.about-v2-testimonial-section :focus-visible {
    outline: none!important
}

.popover-header {
    background-color: transparent!important
}

.team-section .team-card .team-card-img {
    background-image: linear-gradient(to bottom,var(--dx-primary),rgba(var(--dx-primary-rgb),.4));
    overflow: hidden;
    transition: all .4s ease
}

.team-section .team-card .team-card-img img {
    transition: all .5s ease
}

.team-section .team-card .team-card-content .team-card-social .team-card-social-icon {
    position: relative;
    overflow: hidden;
    transition: all .4s ease;
    background-color: #000;
    color: #fff
}

.team-section .team-card .team-card-content .team-card-social .team-card-social-icon:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom,var(--dx-primary),rgba(var(--dx-primary-rgb),.6));
    transform: scale(0);
    border-radius: 50%;
    transition: all .4s ease;
    z-index: 0
}

.team-section .team-card .team-card-content .team-card-social .team-card-social-icon i {
    position: relative;
    z-index: 1;
    transition: all .4s ease
}

.team-section .team-card .team-card-content .team-card-social .team-card-social-icon:hover {
    transform: translateY(-6px) rotate(8deg)
}

.team-section .team-card .team-card-content .team-card-social .team-card-social-icon:hover:hover:before {
    transform: scale(1)
}

.team-section .team-card:hover .team-card-img img {
    transform: scale(1.12) rotate(4deg)
}

.team-leadership-section .team-leadership-card .team-leadership-social .team-leadership-social-icon {
    color: #171717;
    transition: .3s ease-in-out
}

.team-leadership-section .team-leadership-card .team-leadership-social .team-leadership-social-icon:hover {
    color: var(--dx-primary);
    transform: translateY(-3px)
}

.team-leadership-section .team-leadership-card .team-leadership-card-img img {
    transition: transform .7s ease,filter .7s ease
}

.team-leadership-section .team-leadership-card .team-leadership-card-img:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(to right,transparent 0%,rgba(255,255,255,.25) 50%,transparent 100%);
    transform: rotate(25deg);
    opacity: 0;
    transition: all .6s ease;
    z-index: 2;
    pointer-events: none
}

.team-leadership-section .team-leadership-card .team-leadership-card-img:after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid var(--dx-gray-300);
    border-radius: 12px;
    opacity: 0;
    transform: scale(1.05);
    transition: all .5s ease;
    z-index: 2;
    pointer-events: none
}

.team-leadership-section .team-leadership-card:hover .team-leadership-card-img img {
    transform: scale(1.15);
    filter: brightness(1.05) contrast(1.1)
}

.team-leadership-section .team-leadership-card:hover .team-leadership-card-img:before {
    left: 110%;
    opacity: 1
}

.team-leadership-section .team-leadership-card:hover .team-leadership-card-img:after {
    opacity: 1;
    transform: scale(1)
}

.testimonial-section .testimonial-rotate-card {
    transform: rotate(3deg)
}

.customer-stories-section .customer-stories-card .customer-stories-image {
    transition: all .4s ease-in-out
}

.customer-stories-section .customer-stories-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--dx-primary);
    transition: width .3s ease
}

.customer-stories-section .customer-stories-card:hover:before {
    width: 100%
}

.customer-stories-section .customer-stories-card:hover .customer-stories-image {
    background-color: rgba(var(--dx-primary-rgb),.15)
}

.digital-contact-section {
    background-color: var(--dx-light)
}

.digital-contact-section .digital-contact-content .digital-contact-title {
    font-size: 9rem
}

@media(max-width: 767px) {
    .digital-contact-section .digital-contact-content .digital-contact-title {
        font-size:2rem
    }
}

.digital-contact-section .digital-contact-content .digital-contact-dash {
    width: 100%;
    height: 1px;
    min-width: 50px;
    background-color: var(--dx-border-color);
    position: relative;
    transform: translateY(-5px)
}

.digital-contact-section .digital-contact-content .digital-contact-dash:after {
    content: "";
    height: 10px;
    width: 10px;
    background: var(--dx-border-color);
    clip-path: polygon(0% 0%,100% 50%,0% 100%,25% 50%);
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%)
}

.digital-contact-section .digital-contact-content .digital-contact-social {
    position: relative;
    border: 1px solid rgba(var(--dx-dark-rgb),.55);
    transition: .3s
}

.digital-contact-section .digital-contact-content .digital-contact-social:before {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px dashed rgba(var(--dx-dark-rgb),.55);
    border-radius: 50%;
    animation: spin 9s linear infinite
}

.digital-contact-section .digital-contact-btn {
    transition: all .45s ease
}

.digital-contact-section .digital-contact-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dx-primary);
    transform: scale(0);
    border-radius: 50%;
    transition: transform .5s ease;
    z-index: -1
}

.digital-contact-section .digital-contact-btn:hover {
    color: #fff!important;
    transform: translateY(-6px) rotate(-3deg)
}

.digital-contact-section .digital-contact-btn:hover:before {
    transform: scale(1.4)
}

.contact-v1-section .contact-v1-img {
    width: 35rem
}

.contact-v1-section .contact-v1-main-title {
    font-size: 4rem
}

@media(max-width: 767px) {
    .contact-v1-section .contact-v1-main-title {
        font-size:2rem
    }
}

.contact-v1-section .contact-v1-form {
    padding: 4.5rem 0
}

.form-floating-custom {
    position: relative;
    border-bottom: 1px solid var(--dx-border-color)
}

.form-floating-custom input,.form-floating-custom textarea {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 0;
    font-size: 16px
}

.form-floating-custom label {
    position: absolute;
    top: 12px;
    left: 0;
    color: #888;
    font-size: 15px;
    pointer-events: none;
    transition: .3s ease
}

.form-floating-custom input:focus+label,.form-floating-custom input:not(:placeholder-shown)+label,.form-floating-custom textarea:focus+label,.form-floating-custom textarea:not(:placeholder-shown)+label {
    top: -10px;
    font-size: 12px
}

.form-floating-custom input:focus+label,.form-floating-custom textarea:focus+label {
    color: var(--dx-primary)
}

.contact-v2-section .contact-v2-info .contact-v2-social-card .contact-v2-social-icon {
    color: #171717;
    transition: all .4s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.contact-v2-section .contact-v2-info .contact-v2-social-card .contact-v2-social-icon:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,var(--dx-primary),rgba(var(--dx-primary-rgb),.7));
    transform: scale(0);
    border-radius: inherit;
    transition: all .4s ease;
    z-index: 0
}

.contact-v2-section .contact-v2-info .contact-v2-social-card .contact-v2-social-icon i {
    position: relative;
    z-index: 2;
    transition: all .4s ease
}

.contact-v2-section .contact-v2-info .contact-v2-social-card .contact-v2-social-icon:hover {
    transform: translateY(-8px) rotate(-3deg);
    border-color: transparent!important
}

.contact-v2-section .contact-v2-info .contact-v2-social-card .contact-v2-social-icon:hover:before {
    transform: scale(1)
}

.contact-v2-section .contact-v2-info .contact-v2-social-card .contact-v2-social-icon:hover i {
    color: #fff;
    transform: scale(1.15)
}

.auth-section {
    background-image: url(../images/auth-main-bg.jpg);
    background-size: cover;
    min-height: 100vh
}

.auth-section .auth-wrapper:before {
    content: "";
    position: absolute;
    width: 58px;
    height: 30px;
    background: radial-gradient(circle at right bottom,transparent 20px,#fff 20px);
    top: 0;
    left: 48%
}

.auth-section .auth-wrapper:after {
    content: "";
    position: absolute;
    width: 58px;
    height: 30px;
    background: radial-gradient(circle at right top,transparent 20px,#fff 20px);
    bottom: 0;
    left: 48%
}

@media(max-width: 991px) {
    .auth-section .auth-wrapper:before {
        display:none
    }

    .auth-section .auth-wrapper:after {
        display: none
    }
}

@media(min-width: 992px)and (max-width:1199px) {
    .auth-section .auth-wrapper:before {
        left:47%
    }

    .auth-section .auth-wrapper:after {
        left: 47%
    }
}

@media(min-width: 1200px)and (max-width:1535px) {
    .auth-section .auth-wrapper:before {
        width:65px;
        left: 47%
    }

    .auth-section .auth-wrapper:after {
        width: 65px;
        left: 47%
    }
}

.auth-section .auth-wrapper .auth-form .auth-divider {
    position: relative;
    z-index: 1
}

.auth-section .auth-wrapper .auth-form .auth-divider:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    border: 1px dashed var(--dx-border-color);
    z-index: -1
}

.auth-section .auth-wrapper .auth-side {
    border: 15px solid var(--dx-white)
}

.speciality-section {
    background-image: url(../images/main-bg.jpg);
    background-size: cover;
    min-height: 100vh
}

.speciality-section .speciality-section-title {
    background-image: url(../images/main-bg.jpg);
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 10rem
}

@media(max-width: 767px) {
    .speciality-section .speciality-section-title {
        font-size:4rem
    }
}

@media(min-width: 768px)and (max-width:991px) {
    .speciality-section .speciality-section-title {
        font-size:6rem
    }
}

@media(min-width: 992px)and (max-width:1199px) {
    .speciality-section .speciality-section-title {
        font-size:8rem
    }
}

.coming-soon-section .coming-soon-count .coming-soon-countdown .coming-soon-count-number {
    font-size: 3rem
}

.automation-integration-section {
    padding-top: 420px
}

.automation-integration-section .automation-badge .automation-badge-line {
    background: linear-gradient(to right,transparent,#d8d8d8)
}

.automation-integration-section .automation-badge .automation-badge-line:after {
    background: #fff
}

.automation-integration-section .automation-integration-svg {
    top: 10%
}

.automation-integration-section .automation-integration-img {
    top: 7%;
    width: 780px
}

.automation-integration-section .automation-integration-wrapper .automation-integration-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle,#9b7bff,#5c3e94);
    border-radius: 50%;
    box-shadow: 0 0 25px #7e56dacc;
    animation: bgwaves 2.5s infinite;
    z-index: 1
}

.automation-integration-section .automation-integration-wrapper .automation-integration-line {
    position: absolute;
    background: linear-gradient(to right,transparent,rgba(126,86,218,.8),transparent);
    z-index: 0
}

.automation-integration-section .automation-integration-wrapper .automation-integration-line.horizontal {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px
}

.automation-integration-section .automation-integration-wrapper .automation-integration-line.vertical {
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom,transparent,rgba(126,86,218,.8),transparent)
}

.automation-integration-section .automation-integration-wrapper .automation-integration-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid rgba(var(--dx-primary-rgb),.3);
    z-index: 0
}

.automation-integration-section .automation-integration-wrapper .automation-integration-ring.ring-1 {
    width: 300px;
    height: 300px
}

.automation-integration-section .automation-integration-wrapper .automation-integration-ring.ring-2 {
    width: 500px;
    height: 500px;
    border-color: rgba(var(--dx-primary-rgb),.2)
}

@media(max-width: 767px) {
    .automation-integration-section {
        padding-top:185px
    }

    .automation-integration-section .automation-integration-img {
        top: 2%
    }
}

.app-integration-section .app-integration-icon-wrap .app-integration-icon-1 {
    top: -108%;
    left: 18%
}

.app-integration-section .app-integration-icon-wrap .app-integration-icon-2 {
    top: 19%;
    left: 33%
}

.app-integration-section .app-integration-icon-wrap .app-integration-icon-3 {
    bottom: -77%;
    left: 15%
}

.app-integration-section .app-integration-icon-wrap .app-integration-icon-4 {
    top: -4%;
    left: 7%
}

.app-integration-section .app-integration-icon-wrap .app-integration-icon-5 {
    top: -108%;
    right: 18%
}

.app-integration-section .app-integration-icon-wrap .app-integration-icon-6 {
    top: 19%;
    right: 33%
}

.app-integration-section .app-integration-icon-wrap .app-integration-icon-7 {
    bottom: -77%;
    right: 15%
}

.app-integration-section .app-integration-icon-wrap .app-integration-icon-8 {
    top: -4%;
    right: 7%
}

.app-integration-section .app-integration-icon-wrap .app-integration-lines-box {
    pointer-events: none
}

.app-integration-section .app-integration-icon-wrap .app-integration-lines-box .app-line-one {
    bottom: 5rem
}

.app-integration-section .app-integration-icon-wrap .app-integration-lines-box .app-line-two {
    bottom: 4.5rem
}

.app-integration-section .app-integration-icon-wrap .app-integration-lines-box .app-line-three {
    bottom: 4rem
}

.app-integration-section .app-integration-icon-wrap .app-integration-lines-box .app-line-four {
    bottom: 3.5rem
}

.app-integration-section .app-integration-icon-wrap .app-integration-lines-box .app-line-five {
    bottom: 3rem
}

.app-integration-section .app-integration-icon-wrap .app-integration-lines-box .app-line-six {
    top: 4.5rem
}

.app-integration-section .app-integration-icon-wrap .app-integration-lines-box .app-line-seven {
    top: 5rem
}

.app-integration-section .app-integration-icon-wrap .app-integration-lines-box .app-line-eight {
    top: 5.5rem
}

.app-integration-section .app-integration-stats {
    font-size: 9rem
}

@media(max-width: 767px) {
    .app-integration-section .app-integration-stats {
        font-size:5rem
    }
}

.analytics-integration-section .mt-2 {
    margin-top: 2rem!important
}

.analytics-integration-section .mt-5 {
    margin-top: 5rem!important
}

.analytics-integration-section .mt-8 {
    margin-top: 8rem!important
}

.analytics-integration-section .mt-12 {
    margin-top: 12rem!important
}

.analytics-integration-section .analytics-integration-icon-outline {
    outline: 1px solid rgba(var(--dx-primary-rgb),.3);
    outline-offset: 6px
}

@media(max-width: 1199px) {
    .analytics-integration-section .analytics-integration-icon {
        margin-top:0!important
    }
}

.saas-v2-integration-section .saas-v2-integration-card .stretched-link {
    color: #171717;
    transition: .3s ease-in-out
}

.saas-v2-integration-section .saas-v2-integration-card .stretched-link:hover {
    color: var(--dx-primary)
}

@media(min-width: 992px)and (max-width:1199px) {
    .about-v1-integration-section .about-v1-integration-svg {
        width:50rem;
        height: 5rem
    }
}

@media(min-width: 1200px)and (max-width:1535px) {
    .about-v1-integration-section .about-v1-integration-svg {
        width:58rem;
        height: 6rem
    }
}

.integration-grid-section .integration-filter .integration-filter-nav .nav-link.active {
    background-color: var(--dx-primary-bg-subtle)!important;
    color: #5c3e94!important
}

.digital-service-section {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.digital-service-section #digital-service-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff
}

.digital-service-section #digital-service-bg-img .digital-service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    visibility: hidden;
    opacity: 0;
    transition: all .9s ease;
    transform: scale(1.04);
    transform-origin: 50% 50%
}

.digital-service-section #digital-service-bg-img .digital-service-bg:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #20282d80
}

.digital-service-section .digital-service-card .digital-service-item {
    padding: 594px 50px 50px;
    border-right: 1px solid rgba(255,255,255,.2);
    transition: all .5s ease;
    overflow: hidden
}

.digital-service-section .digital-service-card .digital-service-item:hover {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #554e6133
}

.digital-service-section .digital-service-card .digital-service-item:hover .digital-service-content {
    transform: translateY(0)
}

@media(max-width: 767px) {
    .digital-service-section .digital-service-card .digital-service-item {
        padding:194px 20px 50px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.2)
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .digital-service-section .digital-service-card .digital-service-item {
        padding:194px 20px 50px;
        border-bottom: 1px solid rgba(255,255,255,.2)
    }
}

.digital-service-section .digital-service-card .digital-service-content {
    transform: translateY(180px);
    transition: all .4s ease
}

.digital-service-section .digital-service-card .digital-service-content .digital-service-content-inner {
    margin-bottom: 115px
}

.digital-service-section .digital-service-card .digital-service-button .digital-btn:after {
    border-color: #fff
}

.digital-service-section .digital-service-card .digital-service-button .digital-btn span:before,.digital-service-section .digital-service-card .digital-service-button .digital-btn span:after {
    border-color: #fff
}

.digital-service-section .digital-service-card .digital-service-button .digital-btn:hover span,.digital-service-section .digital-service-card .digital-service-button .digital-btn:hover i {
    color: #fff
}

.healthcare-service-section {
    margin-top: -126px;
    z-index: 1;
    position: relative
}

.healthcare-service-section:before {
    content: "";
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #fff;
    clip-path: polygon(0% 4.152%,0% 4.152%,.034% 3.479%,.132% 2.84%,.289% 2.244%,.499% 1.7%,.757% 1.216%,1.059% .801%,1.398% .463%,1.769% .212%,2.167% .054%,2.586% 0%,22.091% 0%,22.091% 0%,22.51% .054%,22.908% .212%,23.279% .463%,23.618% .801%,23.919% 1.216%,24.178% 1.7%,24.388% 2.244%,24.545% 2.84%,24.643% 3.479%,24.677% 4.152%,24.677% 9.343%,24.677% 9.343%,24.711% 10.016%,24.809% 10.655%,24.965% 11.251%,25.176% 11.795%,25.434% 12.279%,25.736% 12.694%,26.074% 13.031%,26.445% 13.283%,26.843% 13.44%,27.263% 13.495%,46.848% 13.495%,72.737% 13.495%,72.737% 13.495%,73.157% 13.44%,73.555% 13.283%,73.926% 13.031%,74.264% 12.694%,74.566% 12.279%,74.824% 11.795%,75.035% 11.251%,75.191% 10.655%,75.289% 10.016%,75.323% 9.343%,75.323% 4.152%,75.323% 4.152%,75.357% 3.479%,75.455% 2.84%,75.612% 2.244%,75.822% 1.7%,76.081% 1.216%,76.382% .801%,76.721% .463%,77.092% .212%,77.49% .054%,77.909% 0%,97.414% 0%,97.414% 0%,97.833% .054%,98.231% .212%,98.602% .463%,98.941% .801%,99.243% 1.216%,99.501% 1.7%,99.711% 2.244%,99.868% 2.84%,99.966% 3.479%,100% 4.152%,100% 95.848%,100% 95.848%,99.966% 96.521%,99.868% 97.16%,99.711% 97.756%,99.501% 98.3%,99.243% 98.784%,98.941% 99.199%,98.602% 99.537%,98.231% 99.788%,97.833% 99.946%,97.414% 100%,2.586% 100%,2.586% 100%,2.167% 99.946%,1.769% 99.788%,1.398% 99.537%,1.059% 99.199%,.757% 98.784%,.499% 98.3%,.289% 97.756%,.132% 97.16%,.034% 96.521%,0% 95.848%,0% 4.152%)
}

.healthcare-service-section .healthcare-service-spacer {
    padding: 130px 0
}

@media(max-width: 767px) {
    .healthcare-service-section .healthcare-service-spacer {
        padding:50px 0!important
    }
}

@media(min-width: 992px)and (max-width:1199px) {
    .healthcare-service-section .healthcare-service-spacer {
        padding:150px 0
    }
}

.healthcare-service-section .healthcare-service-card {
    position: relative;
    z-index: 1;
    border-top: 1px solid #cccccc;
    border-radius: 30px
}

.healthcare-service-section .healthcare-service-card .healthcare-service-card-item {
    padding: 50px 30px;
    position: relative;
    z-index: 1
}

.healthcare-service-section .healthcare-service-card .healthcare-service-link {
    color: #171717;
    transition: .3s ease-in-out
}

.healthcare-service-section .healthcare-service-card .healthcare-service-link:hover {
    color: #5c3e94
}

.healthcare-service-section .healthcare-service-card:first-child {
    border-left: 1px solid #cccccc;
    border-bottom-left-radius: 0
}

.healthcare-service-section .healthcare-service-card:nth-child(odd):before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 60px;
    top: 0;
    width: 50px;
    border-left: 1px solid #cccccc;
    border-top-left-radius: 30px
}

.healthcare-service-section .healthcare-service-card:nth-child(odd):after {
    position: absolute;
    right: 0;
    top: 0;
    height: 64px;
    width: 50px;
    content: "";
    border-right: 1px solid #cccccc;
    border-top-right-radius: 30px
}

.healthcare-service-section .healthcare-service-card:nth-child(2n) {
    border-top: none!important;
    border-bottom: 1px solid #cccccc
}

.healthcare-service-section .healthcare-service-card:nth-child(2n):before {
    position: absolute;
    right: -2px;
    bottom: 0;
    height: 64px;
    width: 50px;
    content: "";
    border-right: 1px solid #cccccc;
    border-bottom-right-radius: 30px
}

.healthcare-service-section .healthcare-service-card:nth-child(2n):after {
    position: absolute;
    left: -1px;
    top: 65px;
    bottom: 0;
    width: 50px;
    content: "";
    border-left: 1px solid #cccccc;
    border-bottom-left-radius: 30px
}

.healthcare-service-section .healthcare-service-card:first-child:before {
    display: none
}

.healthcare-service-section .healthcare-service-card:last-child {
    border-right: 1px solid #cccccc;
    border-top-right-radius: 0
}

.healthcare-service-section .healthcare-service-card:last-child:before {
    display: none
}

@media(max-width: 991px) {
    .healthcare-service-section:before {
        clip-path:none;
        border-radius: 2rem
    }

    .healthcare-service-section .healthcare-service-spacer {
        padding: 100px 0
    }

    .healthcare-service-card {
        border: none!important
    }

    .healthcare-service-card:after,.healthcare-service-card:before {
        border: none!important
    }
}

.service-v1-section .service-v1-service-card {
    transition: all .4s ease-in-out
}

.service-v1-section .service-v1-service-card .service-v1-service-line-1 {
    height: 30px;
    width: 12px;
    background-color: transparent;
    border-left: 1px solid #5C3E94;
    border-right: 1px solid #5C3E94;
    position: absolute;
    top: 0;
    left: 15%
}

.service-v1-section .service-v1-service-card .service-v1-service-line-1:after {
    position: absolute;
    content: "";
    left: -2px;
    bottom: -10px;
    height: 14px;
    width: 14px;
    background-color: #f4f4f4;
    border: 3px solid #5C3E94;
    outline: 2px solid rgb(244,244,244);
    border-radius: 50%
}

.service-v1-section .service-v1-service-card .service-v1-service-line-2 {
    height: 30px;
    width: 12px;
    background-color: transparent;
    border-left: 1px solid #5C3E94;
    border-right: 1px solid #5C3E94;
    position: absolute;
    top: 0;
    right: 15%
}

.service-v1-section .service-v1-service-card .service-v1-service-line-2:after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -10px;
    height: 14px;
    width: 14px;
    background-color: #f4f4f4;
    border: 3px solid #5C3E94;
    outline: 2px solid rgb(244,244,244);
    border-radius: 50%
}

.service-v1-section .service-v1-service-card .service-v1-service-box {
    border: 1px solid #5C3E94;
    box-shadow: 0 4px #5c3e94
}

.service-v1-section .service-v1-service-card .service-v1-service-icon {
    position: relative;
    z-index: 1
}

.service-v1-section .service-v1-service-card .service-v1-service-icon:after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px dashed #5C3E94;
    border-radius: 50%;
    animation: spin 10s linear infinite
}

.service-v1-section .service-v1-service-card .service-v1-service-content p {
    min-height: 75px
}

.service-v1-solution-section .service-v1-solution-card {
    background-color: #eeebf4
}

.service-accordion-wrapper {
    background: #071b12;
    padding: 60px;
    border-radius: 20px
}

.service-v2-service-section .accordion-button:after {
    display: none!important
}

.service-v2-service-section .accordion-item:has(.accordion-button:not(.collapsed)) {
    background-color: rgba(var(--dx-primary-rgb),.15)!important;
    border-radius: 20px!important
}

.service-single-overview-section .service-single-service-list {
    transition: all .3s ease
}

.service-single-overview-section .service-single-service-list:hover {
    background-color: #5c3e94;
    color: #fff!important;
    transform: translate(6px);
    border-color: #5c3e94!important;
    box-shadow: 0 8px 20px #0000000d
}

.career-single-section .career-single-right-sidebar .career-single-hiring .career-single-timeline:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #eeebf4
}

.career-single-section .career-single-right-sidebar .career-single-hiring .career-single-timeline .career-single-timeline-item {
    position: relative;
    margin-bottom: 25px;
    padding-left: 48px
}

.career-single-section .career-single-right-sidebar .career-single-hiring .career-single-timeline .career-single-timeline-item .career-single-timeline-number {
    position: absolute;
    left: -5px;
    top: 0
}

.career-single-section .career-single-info {
    margin-top: -73%;
    position: relative;
    z-index: 1;
    border: 20px solid #fff;
    background-color: #eeebf4
}

.career-single-section .career-single-info .career-single-info-social {
    color: #fff;
    transition: all .4s ease
}

.career-single-section .career-single-info .career-single-info-social i {
    position: relative;
    z-index: 2;
    transition: all .4s ease
}

.career-single-section .career-single-info .career-single-info-social:before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scale(0);
    border-radius: 50%;
    transition: all .4s ease
}

.career-single-section .career-single-info .career-single-info-social:hover {
    transform: translateY(-8px) rotate(8deg);
    box-shadow: 0 12px 25px #00000026
}

.career-single-section .career-single-info .career-single-info-social:hover:before {
    transform: scale(1)
}

.career-single-section .career-single-info .career-single-info-social:hover i {
    color: var(--dx-primary);
    transform: scale(1.2)
}

@media(max-width: 991px) {
    .career-single-section .career-single-info {
        margin-top:0%;
        border: 0px
    }
}

.digital-portfolio-section .digital-portfolio-slider .digital-portfolio-img img {
    transition: transform 10s cubic-bezier(.19,1,.22,1),clip-path 10s cubic-bezier(.19,1,.22,1);
    clip-path: ellipse(100% 100% at 50% 50%)
}

.digital-portfolio-section .digital-portfolio-slider .digital-portfolio-img:hover img {
    transform: scale(1.1);
    clip-path: polygon(0% 8%,12% 0%,32% 6%,52% 0%,72% 8%,100% 0%,100% 92%,84% 100%,64% 94%,44% 100%,20% 94%,0% 100%)
}

.digital-portfolio-section .portfolio-link {
    color: #171717;
    transition: .3s ease-in-out
}

.digital-portfolio-section .portfolio-link:hover {
    color: var(--dx-primary)
}

.portfolio-grid-section .portfolio-grid-card {
    position: relative
}

.portfolio-grid-section .portfolio-grid-card .portfolio-grid-card-img .portfolio-grid-card-btn {
    background-color: var(--dx-primary);
    color: #fff;
    bottom: -25px;
    right: 30px;
    transition: .35s
}

.portfolio-grid-section .portfolio-grid-card:hover .portfolio-grid-card-img .portfolio-grid-card-btn {
    background-color: var(--dx-secondary)
}

.portfolio-badge {
    color: var(--dx-secondary-color);
    border: 1px solid #d8d8d8;
    transition: .35s ease-in-out
}

.portfolio-badge:hover {
    background-color: var(--dx-primary);
    color: #fff
}

.portfolio-list-section .portfolio-list-card .portfolio-list-img {
    height: 27rem
}

.portfolio-list-section .portfolio-list-card .portfolio-list-img img {
    transition: .4s ease-in-out
}

.portfolio-list-section .portfolio-list-card:hover .portfolio-list-img img {
    transform: scale(1.1) rotate(3deg)
}

.portfolio-masonry-section .portfolio-masonry-card .portfolio-masonry-card-content {
    background: linear-gradient(180deg,#0000 16%,#000c 91.62%);
    opacity: 0;
    visibility: hidden;
    transition: .3s ease-in-out;
    transform: translateY(10px);
    pointer-events: none
}

.portfolio-masonry-section .portfolio-masonry-card:hover .portfolio-masonry-card-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.portfolio-showcase-section .portfolio-showcase-card {
    height: 500px
}

.portfolio-showcase-section .portfolio-showcase-card .portfolio-showcase-card-content {
    inset: 40px 30px;
    transform: scale(.3);
    transition: all .45s;
    opacity: 0
}

.portfolio-showcase-section .portfolio-showcase-card .portfolio-showcase-card-content .portfolio-showcase-link {
    color: #171717;
    transition: .3s ese-in-out
}

.portfolio-showcase-section .portfolio-showcase-card .portfolio-showcase-card-content .portfolio-showcase-link:hover {
    color: var(--dx-primary)
}

.portfolio-showcase-section .portfolio-showcase-card:hover .portfolio-showcase-card-content {
    transform: scale(1);
    opacity: 1
}

.portfolio-slider-section .portfolio-slider-inner {
    height: 100vh
}

.portfolio-slider-section .swiper-slide .portfolio-slider-inner .portfolio-slider-content {
    position: absolute;
    top: 17%;
    left: 50px;
    z-index: 1;
    max-width: 47rem
}

@media(min-width: 768px) {
    .portfolio-slider-section .swiper-slide .portfolio-slider-inner .portfolio-slider-content .portfolio-slider-content-title {
        font-size:4rem
    }
}

@media(max-width: 767px) {
    .portfolio-slider-section .swiper-slide .portfolio-slider-inner .portfolio-slider-content {
        left:15px
    }
}

.portfolio-slider-section .swiper-slide .portfolio-slider-inner:after {
    content: "";
    position: absolute;
    width: 101%;
    height: 100%;
    top: 0;
    left: -1px;
    background-image: radial-gradient(at center right,#fff0 50%,#00000096)
}

.portfolio-slider-section .portfolio-slider-h .portfolio-swiper-button-prev,.portfolio-slider-section .portfolio-slider-h .portfolio-swiper-button-next {
    bottom: 5%;
    background-color: #ffffff1f;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.portfolio-slider-section .portfolio-slider-h .portfolio-swiper-button-prev {
    left: 50px
}

.portfolio-slider-section .portfolio-slider-h .portfolio-swiper-button-next {
    right: 50px
}

.portfolio-slider-section .portfolio-slider-h .slider-pagination-area {
    bottom: 80px;
    left: 50%!important;
    transform: translate(-50%);
    width: 500px;
    z-index: 1
}

.portfolio-slider-section .portfolio-slider-h .slider-pagination-area .slide-range.one {
    left: -50px
}

.portfolio-slider-section .portfolio-slider-h .slider-pagination-area .slide-range.three {
    right: -50px
}

.portfolio-slider-section .portfolio-slider-h .slider-pagination-area .swiper-pagination {
    bottom: 0!important;
    width: 500px!important;
    background-color: #ffffff1f
}

.portfolio-slider-section .portfolio-slider-h .slider-pagination-area .swiper-pagination .swiper-pagination-progressbar-fill {
    transform: translateZ(0) scaleX(.666667) scaleY(1);
    transition-duration: 1.5s;
    background-color: #fff
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn {
    transition: margin-left .3s cubic-bezier(.49,0,.01,1)
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn .portfolio-slider-btn-label {
    margin-left: 4pt;
    transition: transform .5s cubic-bezier(.49,0,.01,1)
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn .portfolio-slider-btn-label .portfolio-slider-btn-border {
    position: absolute;
    left: 4pt;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform-origin: right;
    transition: transform .5s cubic-bezier(.49,0,.01,1)
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn .portfolio-slider-btn-circle .portfolio-slider-circle {
    right: calc(100% - 10px);
    transition: clip-path .5s cubic-bezier(.49,0,.01,1)
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn .portfolio-slider-btn-circle .portfolio-slider-circle .portfolio-slider-circle-fill {
    position: absolute;
    inset: 0;
    transform: scale(0);
    z-index: 1;
    transition: transform .5s cubic-bezier(.49,0,.01,1)
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn .portfolio-slider-btn-circle .portfolio-slider-circle .portfolio-slider-circle-icon {
    position: absolute;
    inset: 0;
    transform: translate(-100%);
    opacity: 0;
    z-index: 2;
    transition: all .5s cubic-bezier(.49,0,.01,1)
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn:hover {
    margin-left: 38px!important
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn:hover .portfolio-slider-btn-label {
    transform: translate(18px)
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn:hover .portfolio-slider-btn-label .portfolio-slider-btn-border {
    transform: scaleX(0)
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn:hover .portfolio-slider-circle {
    clip-path: circle(50% at 50% 50%)
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn:hover .portfolio-slider-circle .portfolio-slider-circle-fill {
    transform: scale(1)
}

.portfolio-slider-section .portfolio-slider-btn-wrap .portfolio-slider-btn:hover .portfolio-slider-circle .portfolio-slider-circle-icon {
    transform: translate(0);
    opacity: 1
}

.portfolio-details-section .portfolio-details-main-img {
    background-image: url(../images/portfolio-img-13.jpg);
    background-size: cover;
    height: 600px;
    background-attachment: fixed
}

.portfolio-details-section .portfolio-details-impact .portfolio-details-impact-item .portfolio-details-impact-number {
    font-size: 4rem
}

.portfolio-details-section .portfolio-details-iamges-grid .portfolio-details-img img {
    transition: transform .8s ease
}

.portfolio-details-section .portfolio-details-iamges-grid .portfolio-details-img .portfolio-details-img-content {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: -100px;
    transition: .5s ease;
    z-index: 2;
    opacity: 0
}

.portfolio-details-section .portfolio-details-iamges-grid .portfolio-details-img:hover img {
    transform: scale(1.15)
}

.portfolio-details-section .portfolio-details-iamges-grid .portfolio-details-img:hover .portfolio-details-img-content {
    bottom: 25px;
    opacity: 1
}

@media(max-width: 767px) {
    .portfolio-details-section {
        padding:110px 0
    }

    .portfolio-details-section .portfolio-details-main-img {
        height: 400px
    }
}

.product-category-section .product-category-swiper .swiper-pagination-horizontal {
    bottom: 0;
    top: auto
}

.product-category-section .product-category-swiper .swiper-pagination-horizontal .swiper-pagination-progressbar-fill {
    background-color: var(--dx-primary)
}

.product-category-section .product-category-swiper .product-category-card .product-category-card-img {
    height: 445px
}

.product-category-section .product-category-swiper .product-category-card .product-category-card-img img {
    scale: 1;
    transition: all 1.5s ease-in-out
}

.product-category-section .product-category-swiper .product-category-card:hover .product-category-card-img img {
    scale: 1.15
}

.product-banner-section .product-banner-card-two {
    background-color: #f0f8ff
}

.product-banner-section .product-banner-card-one,.product-banner-section .product-banner-card-two {
    height: 450px
}

.product-collection-section .product-collection-card .product-collection-card-product .product-collection-card-img {
    height: 250px
}

.product-collection-section .product-collection-card .product-collection-card-product .product-collection-colors .product-collection-color-dot {
    transition: all .2s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .product-collection-section .product-collection-card .product-collection-card-product .product-collection-colors .product-collection-color-dot {
        transition: none
    }
}

.product-collection-section .product-collection-card .product-collection-card-product .product-collection-colors .product-collection-color-dot {
    scale: .95
}

.product-collection-section .product-collection-card .product-collection-card-product .product-collection-colors .product-collection-color-dot a {
    transition: all .5s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .product-collection-section .product-collection-card .product-collection-card-product .product-collection-colors .product-collection-color-dot a {
        transition: none
    }
}

.product-collection-section .product-collection-card .product-collection-card-product .product-collection-colors .product-collection-color-dot a {
    scale: 1
}

.product-collection-section .product-collection-card .product-collection-card-product .product-collection-colors .product-collection-color-dot:hover a {
    border: none;
    scale: .6
}

.product-collection-section .product-collection-card .product-collection-card-product .product-collection-colors .product-collection-color-dot:hover {
    scale: 1;
    border: 1px solid rgba(var(--dx-body-color-rgb),.7)
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn {
    width: 103px;
    height: 41px
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn:before {
    position: absolute;
    content: attr(data-tooltip);
    width: 90px;
    height: 35px;
    background-color: var(--dx-primary-bg-subtle);
    font-size: .9rem;
    color: var(--dx-dark);
    border-radius: .25em;
    line-height: 35px;
    bottom: 63px;
    left: calc(50% - 45px)
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn:after {
    position: absolute;
    content: "";
    border: 10px solid transparent;
    border-top-color: var(--dx-primary-bg-subtle);
    left: calc(50% - 10px);
    bottom: calc(100% + 8px)
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn:before,.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn:after {
    opacity: 0;
    visibility: hidden;
    transition: all .5s
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn .product-collection-btn-wrapper,.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn .product-collection-btn-text,.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn .product-collection-btn-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    color: #fff;
    overflow: hidden
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn .product-collection-btn-wrapper {
    overflow: hidden
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn .product-collection-btn-text {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    transition: top .5s
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn .product-collection-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 100%;
    transition: top .5s
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn:hover .product-collection-btn-text {
    top: -100%
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn:hover .product-collection-btn-icon {
    top: 0
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn:hover:before,.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn:hover:after {
    opacity: 1;
    visibility: visible
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn:hover:before {
    bottom: 53px
}

.product-collection-section .product-collection-card .product-collection-card-content .product-collection-card-btn:hover:after {
    bottom: 33px
}

.product-instagram-section .product-instagram-slider .swiper-slide:nth-child(odd) .product-instagram-card {
    height: 440px;
    transform: rotate(-2deg)
}

.product-instagram-section .product-instagram-slider .swiper-slide:nth-child(2n) .product-instagram-card {
    height: 440px;
    transform: rotate(2deg);
    margin-top: 35px
}

.shop-section .shop-sidebar .shop-sidebar-filter #price-range {
    height: 5px;
    background: var(--dx-gray-100)
}

.shop-section .shop-sidebar .shop-sidebar-filter #price-range .noUi-connect {
    background-color: var(--dx-primary)
}

.shop-section .shop-sidebar .shop-sidebar-filter #price-range .noUi-handle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--dx-body-bg);
    border: 2px solid var(--dx-primary);
    box-shadow: none;
    cursor: pointer;
    top: -6px;
    right: -8px
}

.shop-section .shop-sidebar .shop-sidebar-filter #price-range .noUi-handle:before,.shop-section .shop-sidebar .shop-sidebar-filter #price-range .noUi-handle:after {
    display: none
}

.shop-section .shop-sidebar .shop-sidebar-tag .shop-sidebar-tag-badge {
    background-color: var(--dx-primary-bg-subtle);
    color: var(--dx-primary);
    transition: .2s ease-in-out
}

.shop-section .shop-sidebar .shop-sidebar-tag .shop-sidebar-tag-badge:hover {
    background-color: var(--dx-primary);
    color: var(--dx-white)
}

.shop-product-card .shop-product-card-img .shop-product-view-btn {
    opacity: 0;
    visibility: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%,20%) scale(.8);
    transition: all .35s ease
}

.shop-product-card .shop-product-card-content .shop-cart-btn {
    padding: 6px 20px;
    position: relative;
    background-color: var(--dx-dark);
    color: #fff;
    transition: all .3s ease-in-out;
    overflow: hidden
}

.shop-product-card .shop-product-card-content .shop-cart-btn .shop-cart-btn-icon {
    position: relative;
    z-index: 2;
    display: inline-block
}

.shop-product-card .shop-product-card-content .shop-cart-btn .shop-cart-btn-svg {
    position: absolute;
    width: 12px;
    left: 24px;
    bottom: 14px;
    opacity: 0;
    z-index: 1;
    fill: var(--dx-light)
}

.shop-product-card .shop-product-card-content .shop-cart-btn:hover .shop-cart-btn-svg {
    opacity: 1;
    animation: slide-in-top 1.2s cubic-bezier(.25,.46,.45,.94) both
}

.shop-product-card .shop-product-card-content .shop-cart-btn:hover .shop-cart-btn-icon {
    animation: slide-in-left 1s cubic-bezier(.25,.46,.45,.94) both
}

@keyframes slide-in-top {
    0% {
        transform: translateY(-30px) rotate(0);
        opacity: 0
    }

    to {
        transform: translateY(0) rotate(-90deg);
        opacity: 1
    }
}

@keyframes slide-in-left {
    0% {
        transform: translate(-10px);
        opacity: 0
    }

    to {
        transform: translate(0);
        opacity: 1
    }
}

.shop-product-card:hover .shop-product-view-btn {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,-50%) scale(1)
}

.pagination .page-item .page-link {
    background-color: var(--dx-primary-bg-subtle)
}

.pagination .page-item .page-link:hover {
    background-color: var(--dx-primary);
    color: var(--dx-white)
}

.product-fav-btn {
    transition: all .3s ease
}

.product-fav-btn:hover i {
    transform: scale(1.1)
}

.product-fav-btn:active i {
    color: var(--dx-danger)
}

@media(min-width: 1200px) {
    .pr-details-section .pr-details-gallery .pr-details-swiper .pr-details-img {
        height:650px
    }
}

.pr-details-section .pr-details-gallery .pr-details-swiper .pr-details-img {
    cursor: zoom-in
}

.pr-details-section .pr-details-gallery .pr-details-swiper .pr-details-img img {
    transition: transform .3s ease
}

.pr-details-section .pr-details-gallery .pr-details-swiper .pr-details-img.zoomed {
    cursor: zoom-out
}

.pr-details-section .pr-details-gallery .pr-details-swiper .pr-details-img.zoomed .pr-details-zoom-btn {
    display: none
}

.pr-details-section .pr-details-gallery .pr-details-swiper .pr-details-img .pr-details-zoom-overlay {
    transition: .3s
}

.pr-details-section .pr-details-gallery .pr-details-swiper .pr-details-img .pr-details-zoom-overlay .pr-details-zoom-btn {
    opacity: 0;
    transition: .3s ease-in-out
}

.pr-details-section .pr-details-gallery .pr-details-swiper .pr-details-img:hover img {
    transform: scale(1.05)
}

.pr-details-section .pr-details-gallery .pr-details-swiper .pr-details-img:hover .pr-details-zoom-overlay .pr-details-zoom-btn {
    opacity: 1
}

.pr-details-section .pr-details-gallery .pr-details-thumb-swiper .swiper-slide {
    opacity: .6
}

.pr-details-section .pr-details-gallery .pr-details-thumb-swiper .swiper-slide-thumb-active {
    opacity: 1
}

.pr-details-section .pr-details-main-content .pr-details-variant-wrapper .pr-details-variant-color .pr-details-color-option .pr-details-color-circle {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all .3s ease;
    border: 2px solid transparent;
    padding: 2px;
    background-clip: content-box
}

.pr-details-section .pr-details-main-content .pr-details-variant-wrapper .pr-details-variant-color .pr-details-color-option .pr-details-color-circle:hover {
    transform: scale(1.1)
}

.pr-details-section .pr-details-main-content .pr-details-variant-wrapper .pr-details-variant-color .pr-details-color-option .btn-check:checked+.pr-details-color-circle {
    border-color: var(--dx-border-color)
}

.cart-section .cart-timeline .cart-timeline-line {
    position: absolute;
    top: 30%;
    left: 0;
    width: calc(100% - 60px);
    height: 2px;
    background-color: var(--dx-border-color);
    z-index: -1
}

.cart-section .cart-shopping-card .cart-shopping-card-img img {
    transition: transform .3s ease
}

.cart-section .cart-shopping-card:hover .cart-shopping-card-img img {
    transform: scale(1.1)
}

.cart-section .cart-shopping-link {
    color: #171717;
    transition: .5s ease-in-out
}

.cart-section .cart-shopping-link:hover {
    color: var(--dx-primary)
}

.checkout-delivery .checkout-delivery-option .form-check-input {
    z-index: 2;
    width: 1.2em;
    height: 1.2em
}

.checkout-delivery .checkout-delivery-option .form-check-input:checked {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary)
}