:root {
    --primary-color: 144, 77, 255;
    --primary-color-light: #F2E6FB;
    --primary-color-dark: #1F2937;
    --primary-color-dark-2: #875AA6;
    --primary-color-gradient: linear-gradient(145deg, #f2e6fb 45.13%, #f1d6f4 85%);
    --secondary-color: 232, 0, 108;
    --secondary-color-light: #FDE6F0;
    --secondary-color-gradient: linear-gradient(104.95deg, #FFE5F9 45.13%, #FFD4F5 85%);
    --text-color: #111827;
    --link-color: #0065FF;
    --white: 255, 255, 255;
    --black: 0, 0, 0;
    --grey: 177, 177, 177;
    --heading-font: "DM Serif Display", serif;
    --content-font: "Inter", sans-serif;;
    --number-font: "DM Serif Display", serif;
    --bg-light-blue: #E6FCFF;
    --blue-color-gradient: linear-gradient(145deg, #e6fcff 45.13%, #d0e6ff 85%);
    --yellow-dark: #FF8A00;
    --yellow-light: #FFF3C9;
    --orange-light: #FFEBED;
    --shadow-secondary-color: rgba(128, 6, 214, 0.15) 0 35px 100px;
    --bg-grey-light: #F3F4F6;
    --blur: 6px;
    --contrast: 105%;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F4F0EB;
    border-radius: 10px
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #F4F0EB;
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.4)
}

@-webkit-keyframes moveCodeSamplesLeft {
    to {
        -webkit-transform: translateX(-3950px);
        transform: translateX(-3950px)
    }
}

@keyframes moveCodeSamplesLeft {
    to {
        -webkit-transform: translateX(-3950px);
        transform: translateX(-3950px)
    }
}

@-webkit-keyframes moveCodeSamplesRight {
    to {
        -webkit-transform: translateX(2250px);
        transform: translateX(2250px)
    }
}

@keyframes moveCodeSamplesRight {
    to {
        -webkit-transform: translateX(2250px);
        transform: translateX(2250px)
    }
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden
}

*,
:before,
:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

::-moz-selection {
    color: var(--text-color);
    background: #FDDE74
}

::selection {
    color: var(--text-color);
    background: #FDDE74
}

@keyframes shadow-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6)
    }

    100% {
        box-shadow: 0 0 0 12px rgba(0, 0, 0, 0)
    }
}

@keyframes shadow-pulse-white {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6)
    }

    100% {
        box-shadow: 0 0 0 12px rgba(255, 255, 255, 0)
    }
}
@keyframes shadow-pulse-primary {
    0% {
        box-shadow: 0 0 0 0 rgb(232 0 108 / 55%);
    }

    100% {
       box-shadow: 0 0 0 12px rgb(190 24 145 / 8%);
    }
}
@keyframes arrowSlide {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(5px, 0)
    }
}

@keyframes MoveUpDown {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(0, 50px)
    }
}

body {
    font-family: var(--content-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6em;
    color: var(--text-color);
    /* background: var(--primary-color-dark); */
}

footer {
    background: #070b10;
}
a {
    color: var(--text-color);
    outline: 0;
    text-decoration: none
}

a,
a:visited {
    text-decoration: none;
    outline: 0;
    color: var(--text-color);
}

a:focus {
    color: var(--text-color);
    text-decoration: underline;
    outline: 0
}

a:hover {
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

a:focus,
a:active,
a:visited {
    text-decoration: none;
    outline: 0
}
a.btn:hover svg {
    fill: #fff;
}

a.btn:focus svg {
    fill: #fff;
}

a.btn:active svg {
    fill: #fff;
}
svg {
    fill: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    color: var(--text-color);
    line-height: 1.3em;
    font-weight: 500;
    padding: 0 0 15px;
    margin: 0
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: var(--text-color)
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    color: rgba(var(--primary-color), 1)
}

h1 {
    font-size: 38px;
}

h1.h1_large {
    font-size: 40px
}

h1.h1_xxlarge {
    font-size: 46px;
    line-height: 1.2em
}

h2 {
    font-size: 32px;    
}

h2.h2_xlarge {
    font-size: 36px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 21px;    
    font-weight: 500;
}

h5 {
    font-size: 19px;    
    font-weight: 500;
}

h6 {
    font-size: 17px;    
    font-weight: 500;
}

p {
    padding: 0 0 20px;
    margin: 0
}

em {
    font-style: italic
}

strong,
b {
    font-weight: 700
}

.font-weight-500 {
    font-weight: 500
}

.text-xs p,
.text-xs {
    font-size: 14px !important;
    line-height: 1.3em !important
}

.text-sm p,
.text-sm {
    font-size: 12px !important;
    line-height: 1.2em !important
}

.text-medium p,
.text-medium {
    font-size: 15px !important;
    line-height: 1.5em !important
}

.text-large p,
.text-large {
    font-size: 16px !important;
    line-height: 1.5em !important
}

.text-xlarge p,
.text-xlarge {
    font-size: 18px !important;
    line-height: 1.6em !important
}

.text-xxlarge p,
.text-xxlarge {
    font-size: 20px !important;
    line-height: 1.6em !important
}

.line-spacing-sm {
    line-height: 1.2em !important
}

.line-spacing-xs {
    line-height: 1em !important
}

.text-primary,
a.text-primary:hover {
    color: rgba(var(--primary-color), 1) !important
}

.text-secondary,
a.text-secondary:hover {
    color: rgba(var(--secondary-color), 1) !important
}

.text-secondary svg,
svg.text-secondary  {
    fill: rgba(var(--secondary-color), 1);
}

.text-secondary-gradient {
    background: linear-gradient(
        to right,
        #8005D8 0%,
        #c92e66 50%,
        #8005D8 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 10s ease-in-out infinite alternate;   
}

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

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

.text-grey {
    color: #aaaaaa !important
}

.text-white {
    color: rgba(var(--white), 1) !important
}

.bg-grey {
    background: #F3F4F6 !important
}

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

.bg-none {
    background: none !important
}

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

.bg-primary {
    background: rgba(var(--primary-color), 1) !important
}

.bg-primary-gradient {
    background: var(--primary-color-gradient) !important
}

.bg-secondary {
    background: rgba(var(--secondary-color), 1) !important
}

.bg-secondary-gradient {
    background: var(--secondary-color-gradient) !important
}

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

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

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

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

.shadow-secondary-color {
    box-shadow: var(--shadow-secondary-color) !important;
}

.shadow-right-bottom {
    box-shadow: 5px 5px 10px rgba(var(--black), 0.2)
}

.pt-80 {
    padding-top: 90px
}

.pb-80 {
    padding-bottom: 90px
}

.py-80 {
    padding-top: 90px;
    padding-bottom: 90px
}

.my-80 {
    margin-top: 90px;
    margin-bottom: 90px
}

.mt-80 {
    margin-top: 90px
}

.mb-80 {
    margin-bottom: 90px
}
.icon-f img {
    max-height: 60px
}

.icon-f svg {
    max-height: 50px
}

.icon-w img {
    width: 70px
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    z-index: 10
}

.sticky-top.sticky-with-header {
    top: 87px;
}

ul,
li {
    list-style: none;
    padding: 0;
    margin: 0
}

ol li {
    width: calc(100% - 20px);
    list-style-type: decimal;
    list-style-position: outside;
    margin: 7px 0 7px 20px
}

ul,
ol {
    margin-bottom: 20px
}
.custom-ordered-list {
    list-style: none;
    counter-reset: my-awesome-counter
}

.custom-ordered-list li {
    counter-increment: my-awesome-counter;
    position: relative;
    padding-left: 30px;
    font-size: 20px;
    margin: 7px 0
}

.custom-ordered-list li::before {
    content: counter(my-awesome-counter) ".";
    font-weight: bold;
    font-size: 20px;
    line-height: 1;
    position: absolute;
    font-family: 'Crabmeal', sans-serif;
    top: 4px;
    left: 0
}

.check-list .custom-ordered-list {
    padding-left: 20px;
    margin-top: 10px;
}

.check-list .custom-ordered-list li {
    padding-left: 0;
    font-size: inherit;
    margin: 2px 0;
}

.check-list .custom-ordered-list li:before {
    display: none;
}

.check-list dt {
    position: relative;
    padding-left: 28px;
    margin: 7px 0;
    font-weight: 500;
}

.check-list dt:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cstyle%3Esvg%7Bfill:%23b36ae6%7D%3C/style%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
    width: 15px;
    height: 15px;
    position: absolute;
    top: 2px;
    left: 0;
}

.ordered-check-list {
	display: inline-block;
	width:100%;
}
	
.ordered-check-list li {
	width:100%;
    float: left;
    position: relative;
    margin: 7px 0;
}

@media (min-width: 1024px) and (max-width: 1199px) {
    h1 {
        font-size: 35px
    }

    h1.h1_large {
        font-size: 38px
    }

    h1.h1_xxlarge {
        font-size: 40px;
        line-height: 1.4em
    }

    h2 {
        font-size: 28px
    }

    h2.h2_xlarge {
        font-size: 32px
    }
}

@media (max-width: 767px) {
    body {
        letter-spacing: .01em
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.25em;
    }

    h1 {
        font-size: 32px
    }

    h1.h1_large {
        font-size: 34px
    }

    h1.h1_xxlarge {
        font-size: 36px;
        line-height: 1.3em
    }

    h2 {
        font-size: 28px
    }

    h2.h2_xlarge {
        font-size: 30px
    }

    h3 {
        font-size: 24px
    }

    .pt-80 {
        padding-top: 50px
    }

    .pb-80 {
        padding-bottom: 50px
    }

    .py-80 {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .my-80 {
        margin-top: 50px;
        margin-bottom: 50px
    }

    .mt-80 {
        margin-top: 50px
    }

    .mb-80 {
        margin-bottom: 60px
    }

    .container {
        padding-left: 30px;
        padding-right: 30px
    }
}

@media (min-width: 1200px) {
    h1 {
        font-size: 40px
    }

    h1.h1_large {
        font-size: 54px;
        line-height: 1.2em
    }

    h1.h1_xxlarge {
        font-size: 55px;
        line-height: 1.15em
    }

    h2 {
        font-size: 42px;
        line-height: 1.2em;
    }

    h2.h2_xlarge {
        font-size: 46px
    }

    h3 {
        font-size: 34px
    }

    h4 {
        font-size: 24px
    }
    

    body {
        font-size: 16px
    }

    .text-medium p,
    .text-medium {
        font-size: 18px !important
    }

    .text-large p,
    .text-large {
        font-size: 20px !important
    }

    .text-xlarge p,
    .text-xlarge {
        font-size: 25px !important
    }

    .text-xxlarge p,
    .text-xxlarge {
        font-size: 30px !important
    }

    .container {
        max-width: 1290px;
        padding-left: 20px;
        padding-right: 20px
    }

}

picture,
video {
    display: block
}

source,
img {
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
    line-height: .5em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 0
}

.border-radius {
    border-radius: 20px
}

.border-radius-sm {
    border-radius: 15px
}

.border-bottom-gradient {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(0.25turn, rgba(var(--white), 1), rgba(var(--grey), 0.8), rgba(var(--white), 1));
    border-image-slice: 1;
}

.content_main {
    width: 100%;
    float: left;
    background: rgba(var(--white), 1)
}

input {
    outline: 0 !important;
    outline-width: 0 !important
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

input[type=date]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=search-md]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
textarea.md-textarea:focus:not([readonly]) {
    border: 1px solid var(--text-color);
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-control:focus {
    color: var(--text-color);
    background: rgba(var(--white), 1) !important;
    border-color: rgba(var(--black)) !important;
    box-shadow: none;
    outline: 0
}

input[type=date]:focus:not([readonly])+label,
input[type=datetime-local]:focus:not([readonly])+label,
input[type=email]:focus:not([readonly])+label,
input[type=number]:focus:not([readonly])+label,
input[type=password]:focus:not([readonly])+label,
input[type=search-md]:focus:not([readonly])+label,
input[type=search]:focus:not([readonly])+label,
input[type=tel]:focus:not([readonly])+label,
input[type=text]:focus:not([readonly])+label,
input[type=time]:focus:not([readonly])+label,
input[type=url]:focus:not([readonly])+label,
textarea.md-textarea:focus:not([readonly])+label {
    color: var(--text-color);
    font-weight: 500
}

select.form-control {
    height: 45px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    padding: 2px 20px !important;
    outline-color: inherit
}

select::-ms-expand {
    display: none
}

select.form-control:focus {
    outline: 0;
    background: rgba(var(--white), 1) url(../images/icons/arrow_down.png) no-repeat right 20px center !important;
    background-size: 11px 11px !important;
    outline: none;
    box-shadow: none;
    outline-color: inherit
}

select.form-control option {
    font-weight: 500;
    padding: 6px 10px
}

select.form-control:not([size]):not([multiple]) {
    background: rgba(var(--white), 1) url(../images/icons/arrow_down.png) no-repeat right 18px center;
    background-size: 11px 11px
}

.form-group {
    margin-bottom: 1.5em
}

.form-control {
    width: 100%;
    height: 45px;
    background: rgba(var(--white), 1);
    border: 1px solid rgba(var(--grey), 0.8);
    font-weight: 400;
    font-size: 15px;
    border-radius: 12px;
    padding: 6px 18px;
    box-sizing: border-box;
    color: var(--text-color)
}

textarea.form-control {
    height: 90px
}

.input-group .btn:not(:disabled):not(.disabled):hover,
.input-group .btn:not(:disabled):not(.disabled):active,
.input-group .btn:not(:disabled):not(.disabled):focus {
    transform: translateY(0) !important
}

.input-group .form-control {
  border-radius: 12px;
}

.input-group .input-group-text {
    border-radius: 0 12px 12px 0;
    border-color: rgba(var(--grey), 0.8);
}

.input-group .btn {
     border-radius: 0px 12px 12px 0px!important;
    padding: 10px 25px;
}

.input-group .form-control:focus+.btn {
    box-shadow: 0 12px 5px -5px rgba(0, 0, 0, 0.1);
    background: rgba(var(--primary-color), 1)
}

.input-group .form-control.error+.btn,
.input-group .form-control.error+.btn:active,
.input-group .form-control.error+.btn:not(:disabled):active,
.input-group .form-control.error+.btn:not(:disabled):focus,
.input-group .form-control.error:focus+.btn {
    background: #F83483
}

.input-group .form-control.error,
.input-group .form-control.error:focus {
    border-color: #F83483 !important
}

label {
    position: relative
}

.col-form-label {
    padding-top: calc(.6rem + 1px)
}

@media (max-width: 991px) {
    .col-form-label {
        padding-top: 0
    }
}

@media (max-width: 767px) {
    .input-group.mob-fw {
        flex-direction: column
    }

    .input-group.mob-fw .form-control {
        border-bottom-right-radius: 12px!important;
        border-top-right-radius: 12px!important;
        margin-bottom: 6px;
		width:100%!important;
    }

    .input-group.mob-fw .btn {
        width: 100%;
        border-radius: 12px!important;
        padding: 6px 0;
        height: 38px
    }
}

@media (min-width: 1366px) {
    select {
        height: 45px !important
    }

    .form-control {
        height: 45px;
        font-size: 16px;
        padding: 10px 18px
    }
}

.getstarted_signup {
    position: relative
}

.wrong-entry {
    animation: wrong-log .5s
}

@-moz-keyframes wrong-log {

    0%,
    100% {
        left: 0
    }

    20%,
    60% {
        left: 8px
    }

    40%,
    80% {
        left: -8px
    }
}

@-webkit-keyframes wrong-log {

    0%,
    100% {
        left: 0
    }

    20%,
    60% {
        left: 8px
    }

    40%,
    80% {
        left: -8px
    }
}

@keyframes wrong-log {

    0%,
    100% {
        left: 0
    }

    20%,
    60% {
        left: 8px
    }

    40%,
    80% {
        left: -8px
    }
}

.check-cus,
.radio-cus {
    width: 100%;
    display: inline-block;
    position: relative
}

.check-cus input[type=checkbox],
.radio-cus input[type=radio] {
    display: none
}

.check-cus label,
.radio-cus label {
    width: auto;
    padding-left: 30px !important;
    font-weight: 500;
    position: relative;
    font-size: 16px;
    margin: 0;
    cursor: default !important
}

.check-cus label:before,
.radio-cus label:before {
    content: '';
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 1px solid #333333;
    position: absolute;
    top: 5px;
    border-radius: 100%;
    left: 0;
    z-index: 5
}

.check-cus label:after,
.radio-cus label:after {
    content: '';
    width: 7px;
    height: 7px;
    background: rgba(var(--white), 1);
    position: absolute;
    top: 10px;
    border-radius: 100%;
    left: 5px;
    display: none
}

.check-cus label:before {
    border-radius: 3px
}

.check-cus label:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z' fill='%23fff'/%3E%3C/svg%3E");
    width: 11px;
    height: 11px;
    background: none;
    position: absolute;
    line-height: 11px;
    top: 8px;
    border-radius: 100%;
    left: 3px;
    display: none;
    z-index: 6;
}

.check-cus input[type=checkbox]:checked+label:after,
.radio-cus input[type=radio]:checked+label:after {
    display: block;
    z-index: 5;
}

.check-cus input[type=checkbox]:checked+label:before,
.radio-cus input[type=radio]:checked+label:before {
    border-color: rgba(var(--primary-color), 1)
}

.check-cus input[type=checkbox]:checked+label:before,
.radio-cus input[type=radio]:checked+label:before {
    border-color: rgba(var(--primary-color), 1);
    background: rgba(var(--primary-color), 1);
    color: rgba(var(--white), 1);
}

.md-form .form-group {
    width: 100%;
    display: inline-block;
    position: relative;
    margin-bottom: 26px
}

.md-form .form-group label {
    width: 100%;
    display: inline-block;
    color: rgba(var(--grey), 1);
    font-size: 15px;
    z-index: 2;
    cursor: text;
    position: absolute;
    left: 0;
    top: 14px;
    line-height: 1.2em;
    margin-bottom: 0;
    padding: 0 0 0 16px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.md-form .form-group label span {
    background: #ffffff;
    padding: 0 4px;
    line-height: 1em
}

.md-form .form-group label span sup {
    margin-left: 2px
}

.md-form .form-control {
    border-color: rgba(var(--grey), 1)
}

.md-form .form-control:focus {
    background-color: transparent
}

.md-form .ProjectNamelabel label,
.md-form .form-control:focus~label,
.md-form .form-control.not-empty~label,
.md-form .form-control.valid~label,
.md-form select.form-control~label,
.md-form .country-select label {
    top: -6px;
    font-size: 13px;
    color: rgba(var(--black), 0.8);
    z-index: 6
}

.md-form #li-vatNumber .input-group .input-group-text {
    border-width: 2px;
    border-right: none;
    border-radius: 0 0 0 22px;
    padding: 0 20px;
    font-weight: 700
}

.md-form #li-vatNumber .form-group label {
    top: -6px;
    font-size: 13px;
    color: var(--text-color)
}


.md-form #li-vatNumber .input-group {
    flex-wrap: nowrap
}

.md-form .form-control:focus~label span,
.md-form .form-control.not-empty~label span {
    background: rgba(var(--white), 1);  
    color: rgba(var(--black), 0.8)  
}

.md-form span.error {
    width: 100%;
    float: left;
    position: static !important;
    margin-top: 3px !important;
    margin-bottom: -7px !important;
    z-index: 5;
    color: #F83483;
    font-size: 12px;
    line-height: 1.3em;
    letter-spacing: .01em;
    padding-right: 10px;
    padding-left: 10px;
    text-align: right
}

.md-form .form-control.error,
.md-form .form-control.is-empty {
    border-color: #F83483
}

.md-form .form-control.error:focus {
    border-color: #F83483 !important
}

.bg-paper-tear2 .md-form .form-control {
    background: none;
    border-color: #333333
}

.bg-primary-light .md-form .form-group label span {
    background: var(--primary-color-light);
}

.bg-primary-light .md-form .form-group .form-control,
.bg-primary-light .md-form .form-group .form-control:focus {
    background: var(--primary-color-light) !important;
}

.bg-grey-light .md-form .form-group label span {
    background: var(--bg-grey-light) !important;
}

.bg-grey-light .md-form .form-group .form-control,
.bg-grey-light .md-form .form-group .form-control:focus {
    background: var(--bg-grey-light) !important;
}

.bg-grey-light .md-form .form-group select.form-control,
.bg-grey-light .md-form .form-group select.form-control:focus {
    background: var(--bg-grey-light) url(../images/icons/arrow_down.png) no-repeat right 20px center !important;
    background-size: 11px 11px !important;
}

.bg-primary-light .md-form .form-group select.form-control,
.bg-primary-light .md-form .form-group select.form-control:focus {
    background: var(--primary-color-light) url(../images/icons/arrow_down.png) no-repeat right 20px center !important;
    background-size: 11px 11px !important;
}
.bg-box-gradient {
    position: relative
}

.bg-box-gradient:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #F3F8FE 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 24px;
    z-index: 1
}

.bg-box-grey {
    position: relative
}

.bg-box-grey:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(var(--grey), 0.1);
    border-radius: 24px;
    z-index: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    -ms-filter-backdrop-filter: blur(10px);
    -o-filter-backdrop-filter: blur(10px);
}

@media (min-width: 1367px) {
    .bg-box-gradient:before,
    .bg-box-grey:before {
        width: calc(100% - 4%);        
        left: 2%;
    }
}
.exception_message,
.exception_message1,
.exception_message2,
.exception_message3 {
    position: fixed;
    top: 20px;
    right: -245px;
    min-width: 240px;
    max-width: 380px;
    background: rgba(var(--secondary-color), 1);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    padding: 10px 35px 10px 15px;
    transition: all .35s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.18) 0 0 8px;
    color: rgba(var(--white), 1);
    border-radius: 5px;
    z-index: 1015
}

.exception_message .alert_close,
.exception_message1 .alert_close,
.exception_message2 .alert_close,
.exception_message3 .alert_close {
    font-weight: bold;
    font-size: 20px;
    top: 7px;
    right: 10px;
    position: absolute;
    cursor: pointer
}

.exception_message #exception_message_content ul,
.exception_message1 #exception_message_content1 ul,
.exception_message2 #exception_message_content2 ul,
.exception_message3 #exception_message_content3 ul {
    margin-bottom: 0
}

button,
button:focus {
    outline: 0
}

.btn,
.cta {
    padding: 10px 25px;
    line-height: 1.3;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    border-radius: 30px;
    color: rgba(var(--white), 1) !important;
    border: none
}

.btn svg,
.cta svg {
    width: 13px;
    height: 13px;
    margin-top: -3px;
    margin-left: 0.25em;
}

.cta:not(:disabled):not(.disabled):hover,
.cta:not(:disabled):not(.disabled):focus,
.cta:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled):hover,
.btn:not(:disabled):not(.disabled):focus,
.btn:not(:disabled):not(.disabled):active {
    box-shadow: 0 12px 5px -5px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
    text-decoration: none
}

.btn:disabled {
    cursor: not-allowed !important;
    opacity: 0.6;
    background-color: rgba(var(--grey), 0.8) !important;
}

.cta,
.btn.btn-primary {
    background-color: #904DFF;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

.cta:not(:disabled):not(.disabled):focus,
.cta:not(:disabled):not(.disabled):active,
.cta:not(:disabled):not(.disabled):active,
.cta:not(:disabled):not(.disabled):hover,
.btn.btn-primary:not(:disabled):not(.disabled):focus,
.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled):hover {
    background-color: rgba(var(--primary-color), 1);
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    color: rgba(var(--white), 1);
    outline: 0
}

.btn.btn-outline-primary {
    border: 2px solid #904DFF;
    color: #904DFF !important;
    background-color: transparent !important;
    padding-top: 9px;
    padding-bottom: 9px;
}

.btn.btn-outline-primary:not(:disabled):not(.disabled):focus,
.btn.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn.btn-outline-primary:not(:disabled):not(.disabled):hover {
    background-color: #904DFF !important;
    border: 2px solid #904DFF;
    color: rgba(var(--white), 1) !important
}

.btn.btn-secondary {
    color: rgba(var(--white), 1) !important;
    background-color: rgba(var(--secondary-color), 1);
}

.btn.btn-secondary:not(:disabled):not(.disabled):focus,
.btn.btn-secondary:not(:disabled):not(.disabled):active,
.btn.btn-secondary:not(:disabled):not(.disabled):active,
.btn.btn-secondary:not(:disabled):not(.disabled):hover {
    color: rgba(var(--white), 1) !important;
    background-color: rgba(var(--secondary-color), 1);
}

.btn.btn-grey {
    background-color: rgba(var(--black), 0.8);
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.btn.btn-grey:not(:disabled):not(.disabled):focus,
.btn.btn-grey:not(:disabled):not(.disabled):active,
.btn.btn-grey:not(:disabled):not(.disabled):active,
.btn.btn-grey:not(:disabled):not(.disabled):hover {
    background-color: #979797;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    color: rgba(var(--white), 1);
    outline: 0;
    box-shadow: none
}

.btn.btn-dark {
    background-color: #1F2937;
}

.btn.btn-dark:not(:disabled):not(.disabled):focus,
.btn.btn-dark:not(:disabled):not(.disabled):active,
.btn.btn-dark:not(:disabled):not(.disabled):active,
.btn.btn-dark:not(:disabled):not(.disabled):hover {
    background-color: rgba(var(--primary-color), 1) !important;
    color: rgba(var(--white), 1) !important
}

.btn.btn-outline-dark {
    border: 2px solid var(--primary-color-dark);
    color: var(--primary-color-dark) !important;
    background-color: transparent !important;
    padding-top: 9px;
    padding-bottom: 9px;
}

.btn.btn-outline-dark svg {
    width: 17px;
    height: 17px;
    top: 2px;
    position: relative;
}

.btn.btn-outline-dark:not(:disabled):not(.disabled):focus,
.btn.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn.btn-outline-dark:not(:disabled):not(.disabled):hover {
    background-color: var(--primary-color-light) !important;
    border: 2px solid rgba(var(--primary-color), 1);
    color: rgba(var(--primary-color), 1) !important
}

.btn.btn-outline-dark:not(:disabled):not(.disabled):focus svg,
.btn.btn-outline-dark:not(:disabled):not(.disabled):active svg,
.btn.btn-outline-dark:not(:disabled):not(.disabled):active svg,
.btn.btn-outline-dark:not(:disabled):not(.disabled):hover svg {
    fill: rgba(var(--primary-color), 1) !important
}

.btn.btn-sm {
    padding: 9px 15px 7px;
    font-size: 13px
}

.btn.btn-outline-primary.btn-sm {
    padding: 7px 15px 5px
}

.btn.btn-with-arrow {
    position: relative;
    padding-right: 65px;
}

.btn.btn-with-arrow:after {
    content: '';
    width: 18px;
    height: 20px;
    background: url("../images/icons/arrow-right-long.svg") no-repeat right center;
    background-size: 100% auto;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);    
}

.btn.btn-sm svg {
    width: 15px;
    height: 15px;
    top: 0px;
    position: relative
}

.btn.btn-lg {
    padding: 20px 35px;
    font-size: 20px;
    border-radius: 17px;
}

.btn.btn-outline-primary.btn-lg {
    padding: 13px 28px 11px
}

.btn.btn-lg i {
    font-size: 19px;
    top: 2px;
    position: relative
}

.check-list {
    width: 100%;
    display: inline-block;
}

.check-list li {
    width: 100%;
    float: left;
    position: relative;
    padding-left: 28px!important;
    margin: 7px 0
}

.check-list li:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cstyle%3Esvg%7Bfill:%23b36ae6%7D%3C/style%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
    width: 15px;
    height: 15px;
    position: absolute;
    top: 2px;
    left: 0;
}

.check-list.column-2 li {
    width: 50%;
    float: left;
    padding-right: 20px;
    margin: 7px 0
}

.z-index-10 {
    z-index: 10 !important;
}
.z-index-master {
    z-index: 1090 !important;
}
.play-button-new {
    position: relative;
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}
.play-button-new::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 255 255 / 57%) 0%, rgb(255 255 255 / 25%) 65% 65%);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.play-button-new .play-icon {
 width: 22px;
    height: 20px;
    fill: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    transition: transform 0.3s ease;
}
.play-button-new::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.5);
            opacity: 0;
            transform: scale(0.9);
        }
.play-button-new:hover::after {
            animation: ripple 1s ease-out;
        }
 .play-button-new:hover::before {
            opacity: 1;
        }
.play-button-new:hover .play-icon {
    transform: scale(1.1);
}
@keyframes ripple {
            from {
                transform: scale(0.9);
                opacity: 1;
            }
            to {
                transform: scale(1.5);
                opacity: 0;
            }
        }

/* Hero stars */
.stars {
    width: 100%;
    height: 508px;
    top: 78px;
    z-index: 4;
    position: absolute;
    overflow: hidden;
}
#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 1137px 821px #FFF , 1181px 824px #FFF , 647px 783px #FFF , 1633px 284px #FFF , 420px 1426px #FFF , 231px 1167px #FFF , 1907px 1764px #FFF , 372px 1353px #FFF , 1131px 140px #FFF , 1988px 1667px #FFF , 278px 113px #FFF , 1570px 377px #FFF , 355px 448px #FFF , 736px 1739px #FFF , 535px 1776px #FFF , 177px 1658px #FFF , 253px 1855px #FFF , 1398px 1921px #FFF , 19px 1852px #FFF , 1711px 767px #FFF , 1692px 330px #FFF , 1524px 444px #FFF , 480px 1605px #FFF , 1872px 1597px #FFF , 562px 1879px #FFF , 411px 393px #FFF , 47px 166px #FFF , 876px 143px #FFF , 40px 1272px #FFF , 120px 509px #FFF , 1791px 502px #FFF , 1180px 201px #FFF , 1970px 1150px #FFF , 1916px 410px #FFF , 1317px 747px #FFF , 1142px 863px #FFF , 1117px 1347px #FFF , 1287px 1319px #FFF , 1565px 1363px #FFF , 981px 350px #FFF , 35px 247px #FFF , 1001px 1777px #FFF , 917px 319px #FFF , 79px 864px #FFF , 1097px 1750px #FFF , 1583px 976px #FFF , 1434px 545px #FFF , 268px 356px #FFF , 1793px 274px #FFF , 1488px 615px #FFF , 1173px 1638px #FFF , 718px 1700px #FFF , 1919px 443px #FFF , 1869px 1330px #FFF , 355px 320px #FFF , 58px 304px #FFF , 1350px 6px #FFF , 12px 863px #FFF , 1296px 1851px #FFF , 1146px 154px #FFF , 1887px 131px #FFF , 1404px 1081px #FFF , 1895px 1961px #FFF , 1326px 164px #FFF , 1621px 1438px #FFF , 349px 1181px #FFF , 1076px 338px #FFF , 598px 1482px #FFF , 767px 747px #FFF , 608px 231px #FFF , 1298px 695px #FFF , 47px 253px #FFF , 1525px 982px #FFF , 1021px 1932px #FFF , 248px 458px #FFF , 1558px 592px #FFF , 485px 786px #FFF , 1205px 1766px #FFF , 1955px 398px #FFF , 561px 760px #FFF , 828px 1127px #FFF , 317px 1825px #FFF , 1896px 1379px #FFF , 718px 1333px #FFF , 405px 913px #FFF , 824px 1772px #FFF , 253px 1961px #FFF , 481px 1519px #FFF , 622px 1269px #FFF , 66px 1987px #FFF , 1890px 1948px #FFF , 1563px 331px #FFF , 1450px 717px #FFF , 1247px 695px #FFF , 230px 329px #FFF , 1343px 793px #FFF , 779px 442px #FFF , 607px 1755px #FFF , 215px 751px #FFF , 1505px 1814px #FFF , 814px 375px #FFF , 511px 1332px #FFF , 295px 1129px #FFF , 344px 549px #FFF , 819px 1445px #FFF , 1567px 1606px #FFF , 1364px 1413px #FFF , 1268px 379px #FFF , 1099px 1720px #FFF , 1713px 917px #FFF , 962px 1625px #FFF , 1941px 310px #FFF , 1250px 1172px #FFF , 954px 1037px #FFF , 1085px 965px #FFF , 191px 145px #FFF , 415px 363px #FFF , 467px 987px #FFF , 636px 1397px #FFF , 1587px 1712px #FFF , 179px 194px #FFF , 838px 1926px #FFF , 849px 879px #FFF , 529px 1821px #FFF , 293px 1377px #FFF , 1385px 1037px #FFF , 1717px 292px #FFF , 744px 686px #FFF , 80px 337px #FFF , 1055px 135px #FFF , 69px 1294px #FFF , 1916px 1330px #FFF , 3px 830px #FFF , 1991px 1733px #FFF , 1640px 1608px #FFF , 471px 1204px #FFF , 66px 1432px #FFF , 1974px 225px #FFF , 1827px 1683px #FFF , 1127px 1835px #FFF , 1038px 1105px #FFF , 759px 475px #FFF , 195px 11px #FFF , 715px 122px #FFF , 435px 788px #FFF , 334px 1709px #FFF , 564px 1091px #FFF , 94px 1590px #FFF , 353px 1265px #FFF , 844px 976px #FFF , 1931px 1233px #FFF , 1742px 1331px #FFF , 1132px 635px #FFF , 1372px 482px #FFF , 1674px 1996px #FFF , 1453px 1193px #FFF , 1997px 622px #FFF , 1149px 1742px #FFF , 830px 1941px #FFF , 251px 1027px #FFF , 272px 1909px #FFF , 192px 557px #FFF , 1223px 1753px #FFF , 448px 1495px #FFF , 596px 245px #FFF , 903px 143px #FFF , 1281px 164px #FFF , 168px 480px #FFF , 1637px 994px #FFF , 452px 28px #FFF , 1877px 1298px #FFF , 1473px 914px #FFF , 920px 1392px #FFF , 1749px 1020px #FFF , 1208px 1698px #FFF , 843px 401px #FFF , 1044px 1444px #FFF , 574px 513px #FFF , 1301px 427px #FFF , 1755px 1234px #FFF , 1922px 1091px #FFF , 449px 1963px #FFF , 1943px 912px #FFF , 33px 172px #FFF , 1029px 1597px #FFF , 1021px 1145px #FFF , 580px 1862px #FFF , 1965px 1706px #FFF , 61px 1749px #FFF , 1214px 898px #FFF , 286px 1173px #FFF , 28px 1686px #FFF , 1404px 741px #FFF , 1324px 1043px #FFF , 1244px 647px #FFF , 1808px 1227px #FFF , 1000px 290px #FFF , 1425px 148px #FFF , 277px 1478px #FFF , 170px 1509px #FFF;
  animation: animStar 150s linear infinite;
}
#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 1137px 821px #FFF , 1181px 824px #FFF , 647px 783px #FFF , 1633px 284px #FFF , 420px 1426px #FFF , 231px 1167px #FFF , 1907px 1764px #FFF , 372px 1353px #FFF , 1131px 140px #FFF , 1988px 1667px #FFF , 278px 113px #FFF , 1570px 377px #FFF , 355px 448px #FFF , 736px 1739px #FFF , 535px 1776px #FFF , 177px 1658px #FFF , 253px 1855px #FFF , 1398px 1921px #FFF , 19px 1852px #FFF , 1711px 767px #FFF , 1692px 330px #FFF , 1524px 444px #FFF , 480px 1605px #FFF , 1872px 1597px #FFF , 562px 1879px #FFF , 411px 393px #FFF , 47px 166px #FFF , 876px 143px #FFF , 40px 1272px #FFF , 120px 509px #FFF , 1791px 502px #FFF , 1180px 201px #FFF , 1970px 1150px #FFF , 1916px 410px #FFF , 1317px 747px #FFF , 1142px 863px #FFF , 1117px 1347px #FFF , 1287px 1319px #FFF , 1565px 1363px #FFF , 981px 350px #FFF , 35px 247px #FFF , 1001px 1777px #FFF , 917px 319px #FFF , 79px 864px #FFF , 1097px 1750px #FFF , 1583px 976px #FFF , 1434px 545px #FFF , 268px 356px #FFF , 1793px 274px #FFF , 1488px 615px #FFF , 1173px 1638px #FFF , 718px 1700px #FFF , 1919px 443px #FFF , 1869px 1330px #FFF , 355px 320px #FFF , 58px 304px #FFF , 1350px 6px #FFF , 12px 863px #FFF , 1296px 1851px #FFF , 1146px 154px #FFF , 1887px 131px #FFF , 1404px 1081px #FFF , 1895px 1961px #FFF , 1326px 164px #FFF , 1621px 1438px #FFF , 349px 1181px #FFF , 1076px 338px #FFF , 598px 1482px #FFF , 767px 747px #FFF , 608px 231px #FFF , 1298px 695px #FFF , 47px 253px #FFF , 1525px 982px #FFF , 1021px 1932px #FFF , 248px 458px #FFF , 1558px 592px #FFF , 485px 786px #FFF , 1205px 1766px #FFF , 1955px 398px #FFF , 561px 760px #FFF , 828px 1127px #FFF , 317px 1825px #FFF , 1896px 1379px #FFF , 718px 1333px #FFF , 405px 913px #FFF , 824px 1772px #FFF , 253px 1961px #FFF , 481px 1519px #FFF , 622px 1269px #FFF , 66px 1987px #FFF , 1890px 1948px #FFF , 1563px 331px #FFF , 1450px 717px #FFF , 1247px 695px #FFF , 230px 329px #FFF , 1343px 793px #FFF , 779px 442px #FFF , 607px 1755px #FFF , 215px 751px #FFF , 1505px 1814px #FFF , 814px 375px #FFF , 511px 1332px #FFF , 295px 1129px #FFF , 344px 549px #FFF , 819px 1445px #FFF , 1567px 1606px #FFF , 1364px 1413px #FFF , 1268px 379px #FFF , 1099px 1720px #FFF , 1713px 917px #FFF , 962px 1625px #FFF , 1941px 310px #FFF , 1250px 1172px #FFF , 954px 1037px #FFF , 1085px 965px #FFF , 191px 145px #FFF , 415px 363px #FFF , 467px 987px #FFF , 636px 1397px #FFF , 1587px 1712px #FFF , 179px 194px #FFF , 838px 1926px #FFF , 849px 879px #FFF , 529px 1821px #FFF , 293px 1377px #FFF , 1385px 1037px #FFF , 1717px 292px #FFF , 744px 686px #FFF , 80px 337px #FFF , 1055px 135px #FFF , 69px 1294px #FFF , 1916px 1330px #FFF , 3px 830px #FFF , 1991px 1733px #FFF , 1640px 1608px #FFF , 471px 1204px #FFF , 66px 1432px #FFF , 1974px 225px #FFF , 1827px 1683px #FFF , 1127px 1835px #FFF , 1038px 1105px #FFF , 759px 475px #FFF , 195px 11px #FFF , 715px 122px #FFF , 435px 788px #FFF , 334px 1709px #FFF , 564px 1091px #FFF , 94px 1590px #FFF , 353px 1265px #FFF , 844px 976px #FFF , 1931px 1233px #FFF , 1742px 1331px #FFF , 1132px 635px #FFF , 1372px 482px #FFF , 1674px 1996px #FFF , 1453px 1193px #FFF , 1997px 622px #FFF , 1149px 1742px #FFF , 830px 1941px #FFF , 251px 1027px #FFF , 272px 1909px #FFF , 192px 557px #FFF , 1223px 1753px #FFF , 448px 1495px #FFF , 596px 245px #FFF , 903px 143px #FFF , 1281px 164px #FFF , 168px 480px #FFF , 1637px 994px #FFF , 452px 28px #FFF , 1877px 1298px #FFF , 1473px 914px #FFF , 920px 1392px #FFF , 1749px 1020px #FFF , 1208px 1698px #FFF , 843px 401px #FFF , 1044px 1444px #FFF , 574px 513px #FFF , 1301px 427px #FFF , 1755px 1234px #FFF , 1922px 1091px #FFF , 449px 1963px #FFF , 1943px 912px #FFF , 33px 172px #FFF , 1029px 1597px #FFF , 1021px 1145px #FFF , 580px 1862px #FFF , 1965px 1706px #FFF , 61px 1749px #FFF , 1214px 898px #FFF , 286px 1173px #FFF , 28px 1686px #FFF , 1404px 741px #FFF , 1324px 1043px #FFF , 1244px 647px #FFF , 1808px 1227px #FFF , 1000px 290px #FFF , 1425px 148px #FFF , 277px 1478px #FFF , 170px 1509px #FFF;
}

#stars3 {
  width: 3px;
  height: 3px;    border-radius: 50px;
  background: transparent;
  box-shadow: 1763px 1452px #FFF , 501px 716px #FFF , 15px 95px #FFF , 1287px 751px #FFF , 101px 1441px #FFF , 1763px 1386px #FFF , 220px 1628px #FFF , 1992px 384px #FFF , 1533px 1482px #FFF , 1102px 12px #FFF , 670px 276px #FFF , 1339px 1488px #FFF , 375px 1066px #FFF , 688px 117px #FFF , 1671px 1635px #FFF , 834px 1787px #FFF , 1960px 1499px #FFF , 1054px 598px #FFF , 813px 1875px #FFF , 1340px 228px #FFF , 573px 69px #FFF , 135px 769px #FFF , 1629px 699px #FFF , 1811px 1904px #FFF , 189px 518px #FFF , 1749px 348px #FFF , 775px 190px #FFF , 104px 1544px #FFF , 229px 171px #FFF , 364px 868px #FFF , 122px 572px #FFF , 1360px 844px #FFF , 1325px 1724px #FFF , 893px 1762px #FFF , 651px 563px #FFF , 367px 689px #FFF , 1631px 1921px #FFF , 1342px 524px #FFF , 938px 1882px #FFF , 941px 174px #FFF , 1787px 451px #FFF , 1043px 951px #FFF , 853px 1144px #FFF , 175px 358px #FFF , 1572px 570px #FFF , 946px 1484px #FFF , 1253px 824px #FFF , 425px 76px #FFF , 837px 1797px #FFF , 546px 779px #FFF , 1886px 95px #FFF , 904px 926px #FFF , 1442px 1891px #FFF , 1742px 339px #FFF , 1945px 1134px #FFF , 881px 315px #FFF , 1235px 703px #FFF , 422px 354px #FFF , 249px 1249px #FFF , 1825px 1179px #FFF , 345px 611px #FFF , 1343px 1012px #FFF , 1725px 374px #FFF , 437px 1120px #FFF , 881px 1px #FFF , 824px 762px #FFF , 167px 1027px #FFF , 633px 1545px #FFF , 803px 282px #FFF , 1227px 836px #FFF , 854px 1237px #FFF , 1716px 1295px #FFF , 1403px 818px #FFF , 723px 1941px #FFF , 1089px 1893px #FFF , 510px 1556px #FFF , 829px 692px #FFF , 973px 927px #FFF , 210px 975px #FFF , 327px 1786px #FFF , 59px 1537px #FFF , 443px 466px #FFF , 1873px 342px #FFF , 636px 1649px #FFF , 959px 1553px #FFF , 1782px 413px #FFF , 1429px 1314px #FFF , 1468px 1765px #FFF , 1726px 1435px #FFF , 855px 1471px #FFF , 1287px 557px #FFF , 1526px 1240px #FFF , 1873px 1497px #FFF , 966px 826px #FFF , 1874px 961px #FFF , 1109px 1049px #FFF , 489px 391px #FFF , 1216px 1416px #FFF , 190px 472px #FFF , 1083px 1736px #FFF;
  animation: animStar 200s linear infinite;
}
#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1763px 1452px #FFF , 501px 716px #FFF , 15px 95px #FFF , 1287px 751px #FFF , 101px 1441px #FFF , 1763px 1386px #FFF , 220px 1628px #FFF , 1992px 384px #FFF , 1533px 1482px #FFF , 1102px 12px #FFF , 670px 276px #FFF , 1339px 1488px #FFF , 375px 1066px #FFF , 688px 117px #FFF , 1671px 1635px #FFF , 834px 1787px #FFF , 1960px 1499px #FFF , 1054px 598px #FFF , 813px 1875px #FFF , 1340px 228px #FFF , 573px 69px #FFF , 135px 769px #FFF , 1629px 699px #FFF , 1811px 1904px #FFF , 189px 518px #FFF , 1749px 348px #FFF , 775px 190px #FFF , 104px 1544px #FFF , 229px 171px #FFF , 364px 868px #FFF , 122px 572px #FFF , 1360px 844px #FFF , 1325px 1724px #FFF , 893px 1762px #FFF , 651px 563px #FFF , 367px 689px #FFF , 1631px 1921px #FFF , 1342px 524px #FFF , 938px 1882px #FFF , 941px 174px #FFF , 1787px 451px #FFF , 1043px 951px #FFF , 853px 1144px #FFF , 175px 358px #FFF , 1572px 570px #FFF , 946px 1484px #FFF , 1253px 824px #FFF , 425px 76px #FFF , 837px 1797px #FFF , 546px 779px #FFF , 1886px 95px #FFF , 904px 926px #FFF , 1442px 1891px #FFF , 1742px 339px #FFF , 1945px 1134px #FFF , 881px 315px #FFF , 1235px 703px #FFF , 422px 354px #FFF , 249px 1249px #FFF , 1825px 1179px #FFF , 345px 611px #FFF , 1343px 1012px #FFF , 1725px 374px #FFF , 437px 1120px #FFF , 881px 1px #FFF , 824px 762px #FFF , 167px 1027px #FFF , 633px 1545px #FFF , 803px 282px #FFF , 1227px 836px #FFF , 854px 1237px #FFF , 1716px 1295px #FFF , 1403px 818px #FFF , 723px 1941px #FFF , 1089px 1893px #FFF , 510px 1556px #FFF , 829px 692px #FFF , 973px 927px #FFF , 210px 975px #FFF , 327px 1786px #FFF , 59px 1537px #FFF , 443px 466px #FFF , 1873px 342px #FFF , 636px 1649px #FFF , 959px 1553px #FFF , 1782px 413px #FFF , 1429px 1314px #FFF , 1468px 1765px #FFF , 1726px 1435px #FFF , 855px 1471px #FFF , 1287px 557px #FFF , 1526px 1240px #FFF , 1873px 1497px #FFF , 966px 826px #FFF , 1874px 961px #FFF , 1109px 1049px #FFF , 489px 391px #FFF , 1216px 1416px #FFF , 190px 472px #FFF , 1083px 1736px #FFF;
}



@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

.btn-play {
    width: 50px;
    height: 50px;
    position: relative;
    padding-left: 72px 
}

.btn-play:after {
    content: '';
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 100%;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
    animation: shadow-pulse 2s infinite;
    position: absolute;
    top: 0;
    left: 0
}

.btn-play svg {
    width: 20px;
    height: 20px;
    fill: rgba(var(--white));
    position: absolute;
    top: 50%;
    left: calc(50% - 19px);
    transform: translateX(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

.play-video:hover .btn-play {
    -webkit-animation: btn-play-anim 0.3s forwards;
	animation: btn-play-anim 0.45s forwards;
}

.play-video:hover b {
    color: rgba(var(--primary-color), 1);
}

@-webkit-keyframes btn-play-anim {
	60% {
		-webkit-transform: scale3d(0.8, 0.8, 1);
		transform: scale3d(0.8, 0.8, 1);
	}
	85% {
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@keyframes btn-play-anim {
	60% {
		-webkit-transform: scale3d(0.8, 0.8, 1);
		transform: scale3d(0.8, 0.8, 1);
	}
	85% {
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@media (max-width: 767px) {
	.search-submit { width:auto!important;}
	.btn.btn-outline-primary, .btn.btn-secondary, .btn.btn-outline-dark, .btn.btn-primary, .btn.btn-dark, .btn-white, .btn-outline-white {width:100%}
	
}
.search-form .btn svg {
    width: 18px;
    height: 18px;
    margin-top: -5px;
    margin-left: 0;
}

.link-video {
    position: relative;    
    color: var(--link-color);
}


.link-video svg {
    width: 20px;
    height: 20px;     
    fill: var(--link-color);
}

.link-video {
    position: relative;    
    color: var(--link-color);
}

.link-more {
    position: relative;    
    color: var(--link-color);
}

.link-video:visited,
.link-video:active,
.link-video:focus, 
.link-more:visited,
.link-more:active,
.link-more:focus {
    color: var(--link-color);
}

.link-more:after {
    content: '';
    background: url('../images/icons/arrow01.svg') no-repeat;
    width: 15px;
    height: 15px;
    top: 2px;
    position: relative;
    display: inline-block;
    margin-left: 5px;
    background-size: 15px 15px;
}

.link-more svg {    
    width: 13px;
    height: 13px;
    position: relative;
    top: 0px;
}

.link-more:hover {
    text-decoration: none
}

.link-more-long {
    position: relative;
    font-weight: 500;
    padding-right: 32px;
    color: var(--text-color);
}

.link-more-long svg {
    width: 16px;
    height: 17px;
    margin-left: 7px;
    fill: var(--text-color);
}

.link-more-long svg.icon-lg {
    width: 28px;
    height: 28px;
}

.link-more-long:hover {
    color: var(--text-color) !important;
}
/* Features */
.page-template-features .wrapper_main, .page-template-integrations .wrapper_main, .page-template-solutions .wrapper_main, .page-template-roles .wrapper_main {padding-top: 0;}
.head-shape img { position: absolute;}
.head-shape.head-shape-1 img {
    left: -22%;
    top: -42%;
    rotate: 357deg;
}
.head-shape.head-shape-2 img {
    right: -35%;
    top: -45%;
    transform: rotate(-75deg);
    rotate: 180deg;
}

.bg-gradient-center { background: url(../images/bg-gradient-center.svg);
    background-repeat: no-repeat;
    background-position: 0 0;}
.d360-icon-features .d360-card {    background: rgb(14 14 14 / 85%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    -moz-backdrop-filter: blur(30px);
    -ms-filter-backdrop-filter: blur(30px);
    -o-filter-backdrop-filter: blur(30px);}
.feature-tab-1 .feature-tab {
    margin-bottom: 20px;
    display: block;
    width: 100% !important;
}

.feature-tab-1 a {
    display: block;
    width: 100% !important;
    text-decoration: none;
    cursor: pointer;
    padding: 15px;

}

.feature-tab-1 .feature-tab p {
    display: none;
    padding: 0
}

.feature-tab-1 .slick-current p {
    display: block;
}

.feature-tab-1 .slick-list {
    width: 100% !important;
    padding: 0 !important
}

.feature-tab-1 .slick-track {
    width: 100% !important;
    min-height: 350px !important;
    position: relative;
    transform: translate3d(0, 0, 0) !important;
    display: flex;
    flex-direction: column;
}
.feature-tab {
    position: relative;
    padding-left: 20px;
    overflow: hidden;
}

/* Light track */
.feature-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #707070;
    border-radius: 2px;
    z-index: -2;
}

/* Progress bar */
.feature-tab .progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;                  
    background: #CCB7FF;
    border-radius: 2px;
    z-index: -1;
    transform: scaleY(0);          
    transform-origin: top;         
}
.d360-feature_hz h2,  .d360-feature_hz h3, .d360-feature_hz p {
    color: var(--text-color)!important;
}
.d360-feature_hz .d360-horizontal-block .col-lg-7 img {
    border: none; 
    border-radius: 18px;
    padding: 0px;
    background:none;
    box-shadow: none; 
}
.card-white .d360-card {
       background: rgb(13 13 13);
}
.d360-way_comparison .check-list li { font-size: 14px;}
.d360-way_comparison .d360-card-body { background: rgba(var(--black));}
.d360-way_comparison .old-way .check-list li:before {
    content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSctMC41IDAgMjUgMjUnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTEyIDIyQzE3LjI0NjcgMjIgMjEuNSAxNy43NDY3IDIxLjUgMTIuNUMyMS41IDcuMjUzMjkgMTcuMjQ2NyAzIDEyIDNDNi43NTMyOSAzIDIuNSA3LjI1MzI5IDIuNSAxMi41QzIuNSAxNy43NDY3IDYuNzUzMjkgMjIgMTIgMjJaJyBzdHJva2U9JyM3MDcwNzAnIHN0cm9rZS1taXRlcmxpbWl0PScxMCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJy8+PHBhdGggZD0nTTcuNDAwMDIgNy44OTk5OUwxNi41OSAxNy4xJyBzdHJva2U9JyM3MDcwNzAnIHN0cm9rZS1taXRlcmxpbWl0PScxMCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJy8+PHBhdGggZD0nTTEwLjU4IDEzLjkxTDcuNDAwMDIgMTcuMScgc3Ryb2tlPScjNzA3MDcwJyBzdHJva2UtbWl0ZXJsaW1pdD0nMTAnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcvPjxwYXRoIGQ9J00xNi42IDcuODk5OTlMMTMuNDEgMTEuMDknIHN0cm9rZT0nIzcwNzA3MCcgc3Ryb2tlLW1pdGVybGltaXQ9JzEwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L3N2Zz4=");
    width: 18px;
    height: 18px;
    top: 4px;
}
.d360-way_comparison .btn.btn-dark:not(:disabled):not(.disabled):hover {
    background-color: rgb(255 255 255) !important;
    color: rgb(0 0 0) !important;}


    /* --- NEW WRAPPER --- */
.feature-section-wrapper {
    position: relative;
        background-color: #E0CEFF; 
    transition: background-color 0.5s ease;
    color: var(--text-color)!important;
}
        
.feature-section-wrapper h2, .feature-section-wrapper h3 {color: var(--text-color)!important;}
.feature-section-wrapper h3 {
                font-family: "Inter", sans-serif; 
                font-weight: 600;
        }
#top-sticky-feature {
        position: sticky;
    z-index: 100;
    background-color: inherit; 
    transition: background-color 0.5s ease, opacity 0.3s ease;
}

.d360-feature-hz {
    height: 350vh;
    position: relative; 
}

.d360-feature-hz .feature-sticky-content {
    position: sticky;
    overflow: hidden;
}

.d360-feature-hz .d360-hz-feature {
    display: flex;
    height: 100%;
    column-gap: 50px;
}

.d360-hz-feature_block {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-right: 8vw;
}

.d360-feature-hz .d360-hz-feature #section-empty {
    padding-right: 0;
}
.d360-hz-feature_block .col-lg-7 img {
    border-radius: 18px;
    box-shadow: 0 32px 80px -40px rgba(0,0,0,0.2);
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 1650px) {
    .head-shape.head-shape-1 img {left: -35%;top: -42%;rotate: 357deg;}
    .head-shape.head-shape-2 img {right: -40%;top: -45%;transform: rotate(-75deg);rotate: 180deg;}
}

@media screen and (max-width: 1550px) {
    .head-shape.head-shape-1 img {left: -42%;top: -42%;rotate: 357deg;}
    .head-shape.head-shape-2 img {right: -48%;top: -45%;transform: rotate(-75deg);rotate: 180deg;}
}
@media (min-width: 992px) and (max-width: 1366px) {

.head-shape.head-shape-1 img {
    left: -47%;}
.head-shape.head-shape-2 img {
    right: -60%;}
.d360-feature-hz {
    height: 300vh;
}
}
@media (max-width: 1440px) {
   .d360-feature-hz {
    height: 300vh;
} 
}
@media screen and (max-width: 1060px) {
    .head-shape.head-shape-1 img {
        left: -60%;
    }
    .head-shape.head-shape-2 img {
        right: -65%;
    }
}
@media screen and (max-width: 991px) {
    .head-shape.head-shape-2 img {right: -70%;top: -50%;}
}
@media screen and (max-width: 900px) {
    .head-shape.head-shape-1 img {left: -70%;top: -42%;rotate: 360deg;}
    .head-shape.head-shape-2 img {right: -70%;top: -50%;transform: rotate(-75deg);rotate: 180deg;}
}
@media screen and (max-width: 767px) {
    .head-shape.head-shape-1 img {display:none;}
}
@media screen and (max-width: 700px) {
    .head-shape.head-shape-2 img {right: -70%;top: -40%;}
}
@media screen and (max-width: 600px) {
    .head-shape.head-shape-2 img {right: -70%;top: -30%;}
}
@media screen and (max-width: 991px) {
    #top-sticky-feature {
        position: static;
        opacity: 1 !important;
    }

    .feature-section-wrapper {
            background-color: #F3F4F6 !important; /* Static background for mobile */
            height: auto !important; /* Reset height on mobile */
    }

    .d360-feature-hz {
        height: auto !important; /* Reset height on mobile */
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .d360-feature-hz .feature-sticky-content {
        position: static;
        height: auto !important;
    }
    .d360-feature-hz .d360-hz-feature {
        flex-direction: column;
    }

    .d360-hz-feature_block {
        padding-right: 0;
        height: auto;
    }
 
}
/* Solutions */

.d360-shape_card .d360-card {
    clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%);
    background: rgb(20 19 19);
    border-radius:revert;
    --tw-duration: .6s;
    transition-duration: .6s;
    cursor: pointer;
    position: relative;
    transition: filter 0.4s ease-in-out;
} 
.d360-shape_card .d360-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(to bottom right, #3b82f6, #8b5cf6, #ec4899);
    opacity: 0; 
    transition: opacity 0.4s ease-in-out; 
    z-index: 0; 
}

.d360-shape_card .d360-card:hover::before {
    opacity: 1;
}
.d360-shape_card .d360-card-body {
    position: relative;
    z-index: 1;
}
.d360-shape_card .d360-card:hover p {
    color: #fff;
}
.d360-shape_card .circles {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    background: transparent;
    border: .063rem solid #C9C9C9;
    cursor: pointer;
    z-index: 1;
}
.d360-shape_card  .circle-rel {
    width: 3.125rem;
    height: 3.125rem;
    position: relative;
}
.circle-rel h4 {
    font-size: 20px;
    font-family: "Inter", sans-serif;
    position: absolute;
    left: 25%;
    top: 25%;
    margin-top: 0px;
    padding-bottom: 0;
}
.d360-shape_card .d360-card:hover .circles {
        box-shadow: none;
        background-color: white;
}
.d360-shape_card .d360-card:hover .circle-rel h4 {
    color: #3b82f6; 
}
.circles, .circles h4, .d360-card:hover p {
        transition: all 0.4s ease-in-out;
}
.d360-stacking-card .d360-card{
    position: sticky;
    top: 100px;
    display: grid;
    place-items: center;
    background: #000;
}
.d360-stacking-card .d360-card::before, .d360-stacking-card .d360-card::after {
    content: '';
    position: absolute;
    left: 0;
}
.d360-stacking-card .d360-card::before {
    top: 3px;
    bottom: 0;
    width: 15px;
    mask-image: linear-gradient(to bottom, black 5%, black 90%, transparent);
}
.d360-stacking-card .d360-card::after {
    top: 0;
    right: 0;
    height: 15px;
    border-top-left-radius: 3px;
    mask-image: linear-gradient(to right, black 0%, black 80%, transparent);
}
/* Feature Block 1: Orange -> Yellow -> Green -> Blue */
.feature-block-1::before {
    background-image: linear-gradient(to top, #0ea5e9, #22c55e, #eab308, #f97316);
}
.feature-block-1::after {
    background-image: linear-gradient(to right, #f97316, #eab308, #22c55e, #0ea5e9);
}

/* Feature Block 2: Green -> Teal -> Cyan */
.feature-block-2::before {
    background-image: linear-gradient(to top, #06b6d4, #14b8a6, #22c55e);
}
.feature-block-2::after {
    background-image: linear-gradient(to right, #22c55e, #14b8a6, #06b6d4);
}

/* Feature Block 3: Blue -> Indigo -> Purple */
.feature-block-3::before {
    background-image: linear-gradient(to top, #8b5cf6, #4f46e5, #3b82f6);
}
.feature-block-3::after {
    background-image: linear-gradient(to right, #3b82f6, #4f46e5, #8b5cf6);
}

/* Feature Block 4: Pink -> Fuchsia -> Purple */
.feature-block-4::before {
    background-image: linear-gradient(to top, #a855f7, #d946ef, #ec4899);
}
.feature-block-4::after {
    background-image: linear-gradient(to right, #ec4899, #d946ef, #a855f7);
}

/* Feature Block 5: Red -> Orange -> Amber */
.feature-block-5::before {
    background-image: linear-gradient(to top, #f59e0b, #f97316, #ef4444);
}
.feature-block-5::after {
    background-image: linear-gradient(to right, #ef4444, #f97316, #f59e0b);
}
.d360-cta-bg .d360-card {
    background: rgb(14 14 14 / 85%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    -moz-backdrop-filter: blur(30px);
    -ms-filter-backdrop-filter: blur(30px);
    -o-filter-backdrop-filter: blur(30px);
}
.d360-cta-bg .head-shape.head-shape-2 img {
    right: -34%;
    top: -67%;
    transform: rotate(330deg);
    rotate: 168deg;
    max-width: 1153px;
    max-height: 1500px;
    z-index: -1;
    opacity: 0.9;
}
.bg-gradient-2 { position: relative;    overflow: hidden;}
.bg-gradient-2 .head-shape.head-shape-2 img {
    left: -20%;
    top: -100%;
    max-width: 2000px;
    max-height: 2001px;
    width: 1434px;
    height: 1434px;
    opacity: 0.7;
        transform: none;
    rotate: none;
} 
.card-white .d360-card {position: relative; overflow: hidden;}

.card-white .d360-card::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    filter: blur(130px);
    z-index: 1;
    opacity: 0.35;
}
.card-white .col-lg-5 .d360-card::before {
    background: radial-gradient(circle, #a777e3 0%, #5a2a9c 100%);
    bottom: -200px;
    right: -250px;
    opacity: 0.45;
}
.card-white .col-lg-7 .d360-card::before {
    background: radial-gradient(circle, #d946ef 0%, #9f24d4 100%);
    bottom: -180px;
    right: -200px;
    opacity: 0.3;
}
.card-white .col-lg-12 .d360-card::before {
    background: radial-gradient(circle, #f06595 0%, #ff6b6b 100%);
    bottom: -250px;
    right: -100px;
    opacity: 0.4;
}
.card-white .d360-card picture { z-index:1; position: relative;}
.card-white .d360-card .d360-card-body { z-index:1; position: relative;}