:root {
    --body-text-color: #0e1922;
    --body-dark-bg-color: #0e1922;
    --grey-color: #666;

    --light-green-color: #d8edeb;
    --main-green-color: #00AC95; 
    --dark-green-color: #006b5d;

    --light-purple-color: #ebe6f5;
    --main-purple-color: #6E40C9; 
    --dark-purple-color: #4b2c8a;

    --light-orange-color: #fcf0de;
    --main-orange-color: #f3a21d; 
    --dark-orange-color: #b37615;

    --light-blue-color:  #e3e9ff;
    --main-blue-color: #2f60fd; 
    --dark-blue-color: #2448bd;

    --light-pink-color:  #fce8f3;
    --main-pink-color: #f85cad; 
    --dark-pink-color: #b84480;

    --dashboard-block-width-sm: 32%;
    --dashboard-block-width-md: 24%;
    --dashboard-block-width-lg: 16.05%;
}

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

.bg-body-tertiary {
    background: rgb(250, 250, 250) !important;
}

.h1, .h2, .h3, .h1, h2, h3 {
    font-weight: 600;
}

a, button, input, li, select, textarea, tr {
    transition: background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease,transform .3s ease;
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button;
    appearance: button;
}

/*** HEADER, NAV AND FOOTER ***/
.main-header {
    background-color: #0c101a;
    height: 115px;
    z-index: 100;
}

.top-menu-container > nav > ul > li > ul {
    display: none
}

.top-menu-container nav ul {
    list-style-type: none;
    margin: 0;
}

.top-menu-container nav h4,
.top-menu-container nav h5,
.top-menu-container nav h6,
.top-menu-container nav p,
.top-menu-container nav a {
    padding: 10px 5px;
    margin: 0;
    display: block;
    word-wrap: break-word;
    line-height: 20px
}

.top-menu-container nav h6 {
    color: #fff;
}

.top-menu-container nav.top-menu h4 > a,
.top-menu-container nav.top-menu h5 > a,
.top-menu-container nav.top-menu h6 > a,
.top-menu-container nav.top-menu p > a {
    padding: 0;
    line-height: 1;
}

.top-menu-container > nav > ul {
    margin: 0;
    padding: 0;
    height: 60px;
}

nav.top-menu,
nav.account-menu-container {
    float: right;
}

.top-menu-container > nav > ul > li {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: relative;
}

.top-menu-container > nav > ul > li > a {
    display: block;
    margin: 0;
    line-height: 40px;
    position: relative;
    text-decoration: none;
    color: #677C98;
    color: #86888d;
}

.top-menu-container nav a > i {
    margin-right: .4rem;
    width: 20px;
}

.kk-dd-menu {
    outline: none
}

.kk-dd-menu li {
    display: block;
    margin: 0;
    padding: 0;
    position: relative
}

.kk-dd-menu a {
    display: block;
    text-decoration: none;
    color: #86888d;
}

.d-menu .kk-dd-menu a:hover {
    color: #fff;
    background-color: rgba(255,255,255,.07);
}

.d-menu .kk-dd-menu h3 a:hover,
.d-menu .kk-dd-menu h4 a:hover,
.d-menu .kk-dd-menu h5 a:hover,
.d-menu .kk-dd-menu h6 a:hover,
.d-menu .kk-dd-menu p a:hover {
    background-color: transparent;
}

li.kk-has-dd {
    transition: opacity 0.3s ease;
}

li.kk-has-dd > a {
    padding-right: 35px;
}

.kk-dd-trig {
    position: relative;
}

.kk-dd-trig::after {
    content: '\f107';
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    position: absolute;
    display: block;
    line-height: 20px;
    width: 20px;
    height: 20px;
    right: 8px;
    top: 50%;
    margin-top: -10px;
    text-align: center
}

.kk-dd-menu {
    display: none;
}

.d-menu .top-menu .kk-dd-menu {
    padding: 10px;
    display: none;
    outline: none;
    z-index: 4;
    list-style-type: none;
    width: 280px;
    position: absolute;
    right: 0;
    top: 60px;
    padding: 10px;
    margin: 0;
    background: var(--body-dark-bg-color);
    box-shadow: 0 15px 40px 0 rgba(0,0,0,.2);
    border: 1px solid #d9d9d9;
    opacity: 0;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}

.d-menu .top-menu .kk-has-dd > a.hover + .kk-dd-menu,
.d-menu .top-menu .kk-has-dd:hover > .kk-dd-menu,
.d-menu .top-menu .kk-has-dd:focus > .kk-dd-menu,
.d-menu .top-menu .kk-has-dd:active > .kk-dd-menu {
    display: block !important;
    animation: fadeIn 0.6s;
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.d-menu .top-menu .kk-has-dd > .kk-dd-trig.hover::after,
.d-menu .top-menu .kk-has-dd:hover > .kk-dd-trig::after,
.d-menu .top-menu .kk-has-dd:focus > .kk-dd-trig::after,
.d-menu .top-menu .kk-has-dd:active > .kk-dd-trig::after {
    content: '\f106';
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px)
    }

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

.d-menu .top-menu .kk-dd-menu .kk-dd-menu {
    right: auto;
    left: -280px;
    top: 0
}

.top-menu-mobile-trigger {
    display: none
}

li.kk-megamenu {
    position: relative
}

.d-menu .top-menu li.kk-megamenu > ul {
    position: fixed;
    width: 1140px;
    max-width: 1140px;
    left: 50%;
    margin-left: -570px;
    display: none;
    padding: 0;
    height: auto;
    background-color: var(--body-dark-bg-color);
    box-shadow: 0 15px 40px 0 rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,0.15);
    border-top: none;
}

.kk-mm-trig {
    word-wrap: break-word;
    display: block;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease
}

.d-menu .kk-mm-trig, .kk-megamenu li.kk-mm-tab > a {
    line-height: 1.4rem;
    padding: 10px 15px
}

li.kk-megamenu > ul::after {
    content: '';
    clear: both;
    display: block
}

.d-menu li.kk-mm-tab {
    width: calc(24% - 40px);
    margin: 0 20px;
    position: static
}

.d-menu li.kk-mm-tab:first-child {
    margin-top: 20px
}

.d-menu li.kk-mm-tab:last-child {
    margin-bottom: 20px
}

.d-menu nav.kk-mm-panel {
    position: absolute;
    width: 76%;
    height: 100%;
    overflow: hidden;
    right: 0;
    top: 0;
    padding: 20px;
    border-left: 1px solid #d9d9d9;
}

.d-menu nav.kk-mm-panel ul {
    margin: 0;
    padding: 0;
    display: block;
    position: static;
    width: 100%;
    box-shadow: none
}

li.kk-mm-tab i {
    margin-right: 7px
}

.d-menu li.kk-mm-tab > span:hover {
    color: #fff;
    background-color: rgba(255,255,255,.07)
}

.d-menu li.kk-mm-tab > span:focus,
.d-menu li.kk-mm-tab > span:active {
    background-color: transparent
}

.d-menu li.kk-mm-tab.active span {
    color: #fff;
    background-color: rgba(255,255,255,.07)
}

.d-menu nav.kk-mm-panel {
    display: none;
    position: absolute;
    width: 76%;
    height: 100%;
    overflow: hidden;
    right: 0;
    top: 0;
    padding: 20px;
    border-left: 1px solid #d9d9d9;
}

.d-menu li.kk-mm-tab.active > nav.kk-mm-panel {
    display: block
}

nav.kk-mm-panel h3 a,
nav.kk-mm-panel h4 a,
nav.kk-mm-panel h5 a,
nav.kk-mm-panel h6 a {
    color: var(--main-green-color);
}

nav.kk-mm-panel h3 a:hover,
nav.kk-mm-panel h4 a:hover,
nav.kk-mm-panel h5 a:hover,
nav.kk-mm-panel h6 a:hover {
    text-decoration: underline;
    background-color: transparent
}

nav.kk-mm-panel ul,
nav.kk-mm-panel li {
    margin: 0;
    padding: 0
}

/*  Global search bar */
.pb-search-trigger,
.pb-close-search-modal {
    display: none;
}

#pb-global-search {
    display: block;
    position: relative;
}

#pb-global-search input {
    background-color: #474A5A;
    border-color: #474A5A;
    color: #ffffff;
}

#pb-global-search input:hover,
#pb-global-search input:focus {
    border-color: var(--main-green-color);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(0,172,149,.15);
}

#pb-global-search input::-webkit-input-placeholder {
    color: #bfc2d0;
}

#pb-global-search input::-moz-placeholder {
    color: #bfc2d0;
}

#pb-global-search input:-ms-input-placeholder {
    color: #bfc2d0;
}

#pb-global-search input[type="text"]:-webkit-autofill,
#pb-global-search input[type="text"]:-webkit-autofill:hover,
#pb-global-search input[type="text"]:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
}

#pb-global-search button {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    padding: 0;
    height: 42px;
    background-color: var(--main-green-color);
    border: 1px solid var(--main-green-color);
    border-radius: 4px;
}

#pb-global-search button:hover {
    background-color: #008F7C;
    border: 1px solid #008F7C;
}

#pb-global-search button::after {
    display: block;
    content: '\f002';
    font-size: 1.2rem;
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    color: #ffffff;
    text-align: center;
    line-height: 42px;
}

li.pb-basket-link i {
    position: relative;
}

li.pb-basket-link i span {
    overflow: hidden;
    display: block;
    height: 20px;
    width: 20px;
    line-height: 20px;
    border-radius: 50%;
    font-size: 0.8rem;
    position: absolute;
    text-align: center;
    background-color: #dc3545;
    color: #ffffff;
    top: -10px;
    left: -12px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/*  Account menu */
.pb-account-menu .d-menu nav > ul {
    float: right;
}

.pb-account-menu .d-menu nav::after {
    content: '';
    clear: both;
    display: block;
}

/*  Main menu */
.pb-main-menu {
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* Top level */
.pb-main-menu .d-menu > nav > ul > li > a {
    line-height: 34px;
}

.pb-main-menu .top-menu-container > nav > ul {
    height: 54px;
}

.pb-main-menu .d-menu nav.top-menu {
    float: none;
}

.d-menu li.pb-menu-buy,
.d-menu li.pb-menu-sell {
    float: right;
}

.pb-main-menu .d-menu .top-menu .kk-dd-menu {
    top: 54px;
}

/* Megamenu */
.pb-main-menu .d-menu .top-menu li.kk-megamenu > ul {
    max-width: 1360px;
    width: 1360px;
    margin-left: -680px;
    top: 115px;
}

.d-menu li.kk-mm-tab:last-child {
    margin-bottom: 80px;
}

.top-menu-container nav .pb-mm-brands a {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}

.top-menu-container nav .pb-mm-brands a:hover {
    background-color: transparent;
}

.top-menu-container nav .pb-mm-brands a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.07);
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
}

.top-menu-container nav .pb-mm-brands a:hover::after {
    opacity: 1;
}

.pb-mm-brands img {
    max-width: 100%;
    width: auto;
    height: 60px;
}

/* No tabs megamenu */
.d-menu .top-menu li.kk-megamenu.pb-notabs-megamenu > ul {
    padding: 20px;
}

.pb-notabs-megamenu ul ul {
    margin: 0;
    padding: 0;
}

/* Arrow on products menu drop down */
li.kk-mm-tab .kk-mm-trig {
    position: relative;
    color: rgba(255, 255, 255, 0.55);
}

li.kk-mm-tab .kk-mm-trig:after {
    content: '\f105';
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    position: absolute;
    line-height: 20px;
    width: 20px;
    height: 20px;
    right: 0;
    top: 12px;
    display: none
}

.space-10 {
    display: inline-block;
    width: 10px;
}

#sticky-nav a,
nav a button {
    text-decoration: none;
}

li.kk-mm-tab:hover .kk-mm-trig:after,
li.kk-mm-tab.active .kk-mm-trig:after {
    display: block;
}

@media (min-width: 992px) {
    .pb-h-780 {
        height: 750px;
    }

    .pb-h-270 {
        height: 240px;
    }

    .pb-h-480 {
        height: 480px;
    }

    .pb-h-190 {
        height: 190px;
    }

    .pb-h-410 {
        height: 410px;
    }

    /* Menu */
    .top-menu-container > nav > ul > li > a {
        color: #ffffff;
    }

    .top-menu-container > nav > ul > li > a:hover {
        color: var(--main-green-color);
    }

    /* Account menu */
    .pb-account-menu .top-menu-container nav li:last-child a {
        padding-right: 0;
    }

    .pb-account-menu .top-menu-container nav li:last-child a.kk-dd-trig {
        padding-right: 24px;
    }

    .pb-account-menu .top-menu-container nav li:last-child a.kk-dd-trig::after {
        right: -3px;
    }

    /* Main menu */
    .pb-main-menu .top-menu-container > nav > ul > li:first-child > a {
        padding-left: 0;
    }

    .pb-main-menu .top-menu-container > nav > ul > li.pb-menu-offers > a {
        padding-right: 0;
    }

    .pb-main-menu .top-menu-container > nav > ul > li:not(.pb-menu-offers) + .pb-menu-buy > a {
        padding-right: 24px;
    }

    .pb-main-menu .top-menu-container > nav > ul > li:not(.pb-menu-offers) + .pb-menu-buy > a::after {
        right: -3px;
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
	.top-menu-container > nav > ul > li > a {
		font-size: 0.847em;
	}
}

@media (max-width: 1500px) {
    /* Menu */
    .pb-main-menu .d-menu .top-menu li.kk-megamenu > ul {
        max-width: 1110px;
        width: 1110px;
        margin-left: -555px;
    }
}

@media (max-width: 1200px) {
    /* Menu */
    .pb-main-menu .d-menu .top-menu li.kk-megamenu > ul {
        max-width: 930px;
        width: 930px;
        margin-left: -465px;
    }

    .col-wrapper {
        margin-right: 0px;
        margin-left: 0px;
    }
}

@media (max-width: 992px) {
    /* Making the menu bar non sticky */
    .main-header.sticky {
        position: relative;
    }

    .pb-proxy-bar {
        margin-top: 0;
    }

    .main-header.sticky + .page-wrap {
        margin-top: 0;
    }

    .pb-footer-wrapper, .wrapper {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    /* Giving more space to menu and search icons*/
    header .logo-container ~ .col-2 {
        padding-left: 0;
    }

    a.pb-category-link {
        margin-bottom: 2rem;
    }

    /*Menu triggers */
    .pb-account-menu .top-menu-mobile-trigger {
        margin-left: 0;
    }

    .top-menu-mobile-trigger span {
        background-color: #ffffff;
    }

    .pb-main-menu .top-menu-mobile-trigger {
        margin: 7px 0 7px 0;
    }

    .pb-main-menu .top-menu-mobile-trigger span {
        width: 20px;
        border-radius: 0;
        right: 10px;
        height: 2px;
    }

    .pb-main-menu .top-menu-mobile-trigger span.middle,
    .pb-main-menu .top-menu-mobile-trigger span.middle-mobile {
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
    }

    .pb-main-menu .top-menu-mobile-trigger.active span.middle-mobile {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
    }

    .pb-main-menu .top-menu-mobile-trigger.active span.middle {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
    }

    /* Global search */
    #pb-global-search {
        margin: 0;
    }

    .pb-search-container {
        display: none;
        background-color: #222538;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 5;
        overflow: auto;
        padding: 50px 40px 40px 40px;
        transition: opacity 0.3s ease;
    }

    .pb-search-trigger {
        display: block;
        height: 60px;
        width: 100%;
        margin: 0;
    }

    .pb-close-search-modal {
        display: block;
        height: 42px;
        width: 42px;
    }

    .pb-close-search-modal {
        position: absolute;
        top: 5px;
        right: 5px;
    }

    .pb-search-trigger::after, .pb-close-search-modal::after {
        display: block;
        font-size: 1.2rem;
        font-family: "Font Awesome 5 Pro";
        font-weight: 300;
        color: #ffffff;
        text-align: center;
    }

    .pb-search-trigger::after {
        content: '\f002';
        line-height: 60px;
    }

    .pb-close-search-modal::after {
        content: '\f00d';
        line-height: 42px;
    }

    .pb-search-suggestions {
        width: 94%;
        left: 3%;
        top: 92px;
        max-height: calc(100vh - 92px);
        margin-left: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    a.pb-search-product {
        padding: 10px;
    }
}

.pb-search-container input {
    padding: 8px 10px;
    line-height: 24px;
    font-size: 1rem;
    display: block;
    border: 1px solid #cfd4d9;
    width: 100%;
    outline: 0;
    border-radius: 4px;
    height: 42px;
    appearance: none;
    margin: 0;
    font-family: inherit;
}

/* nav */
nav {
    z-index: 999;
}

nav.navbar {
    background-color: transparent !important;
}

nav.navbar.marketing-navbar {
    background-color: #0c101a !important;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

nav .navbar-brand {
    width: 180px;
    height: 27px;
    background-size: contain;
    background-repeat: no-repeat;
    text-indent: -9999px;
    color: transparent;
    white-space: nowrap;
    margin-right: 20px;
}

nav .navbar-brand {
    background-image: url('/cds/image$probrandLogoWhite$20180427131825$en-GB');
}

@media (min-width: 1201px) {
    nav #global-search {
        min-width: 400px;
    }
}

nav .text-link {
    font-size: 1em;
}

nav .nav-link {
    font-size: 1em;
    position: relative;
    color: #86888d;
}

.nav-link {
    color: #86888d;
}

footer .nav-link:hover,
footer .nav-link:active {
    color: #fff !important;
}

footer .text-body-secondary {
    color: #86888d !important;
}

/* tabs */
.nav.nav-tabs {
    display: inline-block;
}

.nav.nav-tabs .nav-item {
    margin-left: 0.75em;
    margin-right: 0.75em;
    display: inline-block;
}

.nav.nav-tabs .nav-link {
    position: relative;
    border: none;
    font-weight: 500;
	font-size: 1.125em;
}

.nav.nav-tabs .nav-item:first-child {
    margin-left: 0;
}

.nav.nav-tabs .nav-link.active {
    border: none;
}

/*#
.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active
{
    background: transparent;
}
*/

.nav.nav-tabs .nav-link:hover,
.nav.nav-tabs .nav-link:active,
.nav.nav-tabs .nav-link:focus
{
    color: #000;
    border: none;
}

nav .nav-link:before,
.nav.nav-tabs .nav-link::before
 {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--main-green-color);
    transform: scaleX(0);
    transition: transform .25s ease-in-out;
}

.nav.nav-tabs .nav-link::before {
    height: 3px;
}

.nav.nav-tabs.tabs-blue .nav-link::before,
#sticky-nav .nav-item:nth-child(2) .nav-link:before {
    background-color: var(--main-blue-color);
}

.nav.nav-tabs.tabs-pink .nav-link::before,
#sticky-nav .nav-item:nth-child(3) .nav-link:before {
    background-color: var(--main-pink-color);
}

.nav.nav-tabs.tabs-purple .nav-link::before,
#sticky-nav .nav-item:nth-child(4) .nav-link:before {
    background-color: var(--main-purple-color);
}

.nav.nav-tabs.tabs-orange .nav-link::before,
#sticky-nav .nav-item:nth-child(5) .nav-link:before {
    background-color: var(--main-orange-color);
}

nav .nav-link:hover:before,
nav .nav-link.active:before,
nav .nav-link.active:hover:before,
.nav.nav-tabs .nav-link:hover:before,
.nav.nav-tabs .nav-link.active:before,
.nav.nav-tabs .nav-link.active:hover:before
 {
    transform: scaleX(1);
}

nav .nav-link:hover,
nav .nav-link.active,
nav .nav-link.active:hover {
    color: #fff !important;
}

.navbar-expand-md .navbar-nav .nav-link {
    padding: 8px 12px;
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.75);
}

ul.dropdown-menu {
    background: var(--body-dark-bg-color);
    border: 1px solid rgba(255,255,255,0.15);
    margin-top: -1px !important;
    border-radius: 0;
    /*min-width: 600px;*/
}

ul.dropdown-menu .dropdown-item {
    color: #fff;
}

.dropdown-item.active, .dropdown-item:active {
    background: rgba(56,191,172,0.25);
}

ul.dropdown-menu .dropdown-menu {
    background: none;
    border: none;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus {
    background: rgba(255,255,255,.07);
}

.pagination .page-link {
    border: none;
    margin: 0 15px;
    color: var(--body-text-color);
    font-weight: 500;
}

.pagination .page-link.active,
.pagination .page-link:hover,
.pagination .page-link:focus,
.pagination .page-link:active 
{
    background: transparent;
    color: var(--body-text-color);
    box-shadow: none;
}

.pagination .page-link:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--body-dark-bg-color);
    transform: scaleX(0);
    transition: transform .25s ease-in-out;
}

.pagination .page-link.active:before,
.pagination .page-link:hover:before,
.pagination .page-link:focus:before,
.pagination .page-link:active:before 
 {
    transform: scaleX(1);
}

nav .btn-primary {
    font-size: 1em;
}

/* mobile nav */
@media (max-width:992px) {
    .top-menu-mobile-trigger {
        display: block;
        float: right;
        line-height: 40px;
        padding: 0;
        margin: 10px 0 10px 5px;
        height: 40px;
        width: 40px;
        cursor: pointer;
        position: relative;
        color: #677c98;
        text-decoration: none;
        border-radius: 50%
    }

    .top-menu-mobile-trigger:hover {
        color: #677c98;
        text-decoration: none;
        background-color: rgba(0,0,0,.07)
    }

    .top-menu-mobile-trigger span {
        display: block;
        position: absolute;
        opacity: 1;
        height: 3px;
        width: 3px;
        right: 18px;
        border-radius: 50%;
        background: #fff;
        transition: all .3s ease;
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0)
    }

    .top-menu-mobile-trigger span.top {
        top: 12px
    }

    .top-menu-mobile-trigger span.middle {
        top: 19px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg)
    }

    .top-menu-mobile-trigger span.middle-mobile {
        top: 19px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg)
    }

    .top-menu-mobile-trigger span.bottom {
        top: 26px
    }

    .top-menu-mobile-trigger.active span.middle,
    .top-menu-mobile-trigger.active span.middle-mobile {
        height: 2px;
        width: 20px;
        right: 10px;
        border-radius: 0
    }

    .top-menu-mobile-trigger.active span.top {
        opacity: 0;
        transform: translateY(7px);
        -webkit-transform: translateY(7px);
        -ms-transform: translateY(7px)
    }

    .top-menu-mobile-trigger.active span.bottom {
        opacity: 0;
        transform: translateY(-7px);
        -webkit-transform: translateY(-7px);
        -ms-transform: translateY(-7px)
    }

    nav.top-menu {
        display: none
    }

    .m-menu nav.top-menu {
        position: fixed;
        float: none;
        display: block;
        z-index: 4;
        width: 280px;
        padding-top: 20px;
        height: 100%;
        background-color: #fff;
        left: -350px;
        top: 0;
        transition: transform .4s ease;
        overflow-Y: auto;
        box-shadow: 5px 0 40px 0 rgba(0,0,0,.2)
    }

    .top-menu-container > nav > ul {
        height: auto
    }

    .top-menu-container > nav > ul > li {
        display: block
    }

    .top-menu-container > nav.account-menu-container > ul > li > a {
        padding: 10px 15px
    }

    .top-menu-container > nav.account-menu-container.unauthorised > ul > li > a {
        padding-right: 0
    }

    .top-menu-container nav.top-menu a,
    .top-menu-container nav.top-menu h4,
    .top-menu-container nav.top-menu h5,
    .top-menu-container nav.top-menu h6,
    .top-menu-container nav.top-menu p,
    .top-menu-container > nav.top-menu > ul > li > a {
        display: block;
        padding: 15px 20px;
        line-height: 20px
    }

    .m-menu nav.top-menu.open {
        transform: translateX(350px);
        -webkit-transform: translateX(350px);
        -ms-transform: translateX(350px)
    }

    .topbar-nav-container {
        padding-left: 0
    }

    .m-menu .top-menu ul.kk-dd-menu {
        position: relative;
        background-color: rgba(0,0,0,.045);
        box-shadow: none;
        border: none;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0
    }

    .m-menu .top-menu ul.kk-dd-menu ul.kk-dd-menu {
        left: 0
    }

    .top-menu .kk-dd-trig::after {
        right: 15px
    }

    .kk-dd-trig.active::after {
        content: '\f106'
    }

    .m-menu .kk-mm-trig {
        position: relative;
        padding: 15px 20px;
        line-height: 20px
    }

    .m-menu .kk-mm-trig::after {
        content: '\f107';
        font-family: "Font Awesome 5 Pro";
        font-weight: 300;
        position: absolute;
        display: block;
        line-height: 20px;
        width: 20px;
        height: 20px;
        right: 15px;
        top: 50%;
        margin-top: -10px;
        text-align: center
    }

    .m-menu .kk-mm-trig.active::after {
        content: '\f106'
    }

    .m-menu nav.kk-mm-panel {
        display: none
    }

    nav li.kk-megamenu > nav {
        position: static;
        width: 100%;
        max-width: 100%;
        border: none;
        box-shadow: none !important;
        margin: 0
    }

    li.kk-megamenu > nav > ul {
        background-color: rgba(0,0,0,.045);
        width: 100%;
        padding: 0
    }

    li.kk-mm-tab {
        float: none;
        width: 100%
    }

    nav.kk-mm-panel {
        background-color: rgba(0,0,0,.045);
        position: static;
        width: 100%;
        height: auto;
        padding: 0;
        border-left: none
    }

    nav.kk-mm-panel li {
        float: none;
        width: 100%;
        height: auto
    }
}

.m-menu .top-menu.open {
    color: rgb(255, 255, 255);
    background: rgb(12, 16, 26);
}

/* sidebar-styles */
:root {
    --sidebar-styles-width: 280px;
    --sidebar-styles-width-collapsed: 80px;
}

.sidebar-styles {
    width: 80px;
    background: var(--body-dark-bg-color);
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.15);
    margin: 5px;
    height: calc(100vh - 125px);
    position: fixed;
    transition: all 0.3s ease;
}

.sidebar-styles.collapsed {
    height: 62px;
    transition: all 0.3s ease;
}

.sidebar-styles-link {
    color: rgba(255, 255, 255, 0.55);
    transition: all 0.2s ease;
    margin: 4px 12px;
    white-space: nowrap;
    position: relative;
}

.sidebar-styles-link:hover,
.sidebar-styles-link.active,
.sidebar-styles-link:active, 
.sidebar-styles-link.focus 
{
    color: #ffffff;
    background: rgba(0,172,149,0.2);
    transition: all 0.3s ease;
}

.toggle-btn {
    background: #38bfac;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 100;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
}

.toggle-btn:hover {
    background: #00917e;
    transition: all 0.3s ease;
}

.collapsed .toggle-btn {
    transform: rotate(180deg);
    transition: all 0.3s ease;
}

.hide-on-collapse {
    display: none;
    transition: all 0.3s ease;
}

a:hover .hide-on-collapse {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 70px;
    background: #38bfac;
    color: var(--body-text-color);
    font-weight: 500;
    transition: all 0.3s ease;
}

.sidebar-styles-link {
    display: block;
    text-align: center;
    padding: 1rem !important;
    margin: 4px 8px;
    transition: all 0.3s ease;
    position: relative;
}

.sidebar-styles-link:after,
.collapsed .sidebar-styles-link:after {
    content: "";
    height: 12px;
    width: 12px;
    background:  #38bfac;
    position: absolute;
    transform: translateY(-50%) rotate(45deg);
    top: 50%;
    right: -14px;
    z-index: -1;
    display: none;
    transition: all 0.3s ease;
}

.sidebar-styles-link:hover:after {
    display: block;
    transition: all 0.3s ease;
}

.collapsed .hide-on-collapse,
.collapsed a:hover .hide-on-collapse,
.collapsed .sidebar-styles-link 
{
    opacity: 0;
    visibility: hidden;
    display: none;
    transition: all 0.3s ease;
}



/*footer */
footer {
    background: #0c101a !important;
}

.footer-bottom {
    background: #1a2f39;
}

footer .ruler-fp {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.footer-social ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
}

.footer-social ul li a i {
    margin: 0 14px 12px 0;
    font-size: 1.5em;
    color: #fff;
}

.footer-logos {
    margin-top: 10px;
}

.footer-logos img {
    height: 90px;
    width: auto;
    margin: 5px 5px;
}

/* brand */
.navbar-brand {
    width: 10rem;
    height: 2rem;
    background-size: contain;
    background-repeat: no-repeat;
    font-size: 0;
    background-position: 100%;
}

.navbar-brand {
    background-image: url('/cds/image$probrandLogoWhite$20180427131825$en-GB');
}




/****** Default Styles *******/
.text-larger {
    font-size: 1.125rem;
}

h1, .h1 {
    font-weight: 600;
}

h4, .h4, .h5, h5, .h6, h6 {
    line-height: 1.25;
}

a, a:hover {
    color: var(--main-green-color);
}

a:hover {
    text-decoration: none;
}

.text-success {
    color: var(--main-green-color) !important;
}


img {
    max-width: 100%;
    height: auto;
}

::selection,
mark,
.mark 
    {    
    background: var(--main-green-color);
    color: #fff;
}

@media (max-width: 768px) {
    section.wrapper {
        padding: 50px 0 !important;
    }
}

section.wrapper {
    padding: 100px 0 !important;
}

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

.text-primary,
.text-green,
.text-info
{    color: var(--main-green-color) !important;
}

.bg-green, .bg-info, .bg-primary,
.background-green, .background-info, .background-primary {
    background-color: var(--main-green-color) !important;
}

.border-color-primary, .border-color-info, .border-color-green {
    border-color: var(--main-green-color) !important;
}

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

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

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

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

.text-secondary,
.text-purple
{
    color: var(--main-purple-color) !important;
}

.border-color-secondary, .border-color-purple {
    border-color: var(--main-purple-color) !important;
}

.bg-secondary, .bg-purple {
    background-color: var(--main-purple-color) !important;
}

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

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

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

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

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

.border-color-blue {
    border-color: var(--main-blue-color) !important;
}

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

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

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

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

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

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

.border-color-pink {
    border-color: var(--main-pink-color) !important;
}

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

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

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

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

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

.text-orange,
.text-warning
{
    color: var(--main-orange-color) !important;
}

.bg-warning, .bg-orange {
    background-color: var(--main-orange-color) !important;
}

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

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


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

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

.text-error, .text-red, .text-danger {
    color: rgb(220,53,69) !important;
}

.bg-light-red {
    background:rgba(220,53,69,0.2) !important;
}

.bg-error, .bg-danger {
 	background:rgb(220,53,69) !important;
 }

.bg-info.text-info,
.bg-success.text-success
{
    color: var(--dark-green-color) !important;
}

.bg-warning.text-warning
{
    color: var(--dark-orange-color) !important;
}

.bg-transparent, .background-transparent {
    background: transparent !important;
}

.bg-light-transparent, .background-light-transparent {
    background: rgba(255,255,255,.1);
}

.border-color-warning, .border-color-orange {
    border-color: var(--main-orange-color) !important;
}

.tag {
    margin-bottom: 10px;
}

.tag span {
    background: var(--main-green-color);
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 600;
    color: #fff;
}

.tag-green span {
    background: var(--main-green-color);
}

.tag-purple  span {
    background:  var(--main-purple-color);
}

.tag-blue span {
    background:  var(--main-blue-color);
}

.tag-pink span {
    background: var(--main-pink-color);
}

.tag-orange span {
    background:  var(--main-orange-color);
}

.badge:empty {
    display: inherit;
}

.badge {
    background: rgba(0,172,149,0.2);
    color: var(--main-green-color);
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: 600;
    margin-bottom: 10px;
}

.badge  i {
    font-weight: 600;
}

.badge-green  { 
    background: rgba(0,172,149,0.2);
    color: var(--main-green-color);
}

.badge-blue {
    background: rgba(47,96,253,0.2);
    color: var(--main-blue-color);
}

.badge-purple {
    background:   rgba(110,64,201,0.2);
    color:  var(--main-purple-color);
}

.badge-pink {
    background: rgba(248,92,173,0.2);
    color: var(--main-pink-color);
}

.badge-orange {
    background: rgba(243,162,29,0.2);
    color:   var(--main-orange-color);
}

.badge-circle {
    border-radius: 50%;
    padding: 10px;
}

.text-thin {
    font-weight: 300;
}

.text-normal {
    font-weight: 400;
}

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

.border-color-grey {
    border-color:  var(--grey-color) !important;
}

/* buttons */
.btn {
    text-align: left;
}

.btn-lg {
    font-size: 1.5em !important;
}

.btn-gradient {
    background: var(--main-purple-color);
    border: none;
    font-weight: 600;
    box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    padding: 3px;
}

.btn-gradient span {
    background: none;
    padding: 16px 24px;
    border-radius: 6px;
    height: 100%;
    width: 100%;
    transition: 300ms;
}

.btn-gradient:hover {
    background-image: linear-gradient(to right, var(--main-green-color) 10%, var(--main-purple-color) 100%);
}

.btn-gradient:hover span {
    background-color: var(--body-dark-bg-color);
}

.btn-primary .fa-chevron-right {
    font-weight: bold;
}

.btn,
.standardSiteForm input[type='submit'] {
    background: var(--main-green-color);
    border: 1px solid var(--main-green-color);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
    transition: all 0.25s ease-in;
    height: auto;
}

.standardSiteForm input[type='submit'] {
    transition: all 0.25s ease-in;
    padding: 0.75rem 0.375rem;
    border-radius: 0.375rem;
    width: 100%;
    text-align: center;
}

.form-dark.standardSiteForm input[type='submit'] {
    background: #fff;
    color: #0c101a;
    border-color: #fff;
}

.form-dark.standardSiteForm input[type='submit']:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.btn-link,
.btn-link:hover,
.btn-link:active,
.btn-link:focus,
.btn.btn-link,
.btn.btn-link:hover,  
.btn.btn-link:active,  
.btn.btn-link:focus,
.btn-link.text-body:hover,
.btn-link.text-body:focus,
.btn-link.text-body:active 
{
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: var(--main-green-color) !important;
    font-weight: 400 !important;
    text-decoration: underline;
}

.btn-link:hover,
.btn-link:active,
.btn-link:focus,
.btn.btn-link:hover,  
.btn.btn-link:active,  
.btn.btn-link:focus
{
    text-decoration: none;
}

.btn-link.no-underline {
    text-decoration: none;
}

.btn-link.no-underline:hover,
.btn-link.no-underline:focus,
.btn-link.no-underline:active
{
    text-decoration: underline;
}

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


.btn-primary,
.btn-green
 {
    background: var(--main-green-color);
    border: 1px solid var(--main-green-color);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
    transition: all 0.25s ease-in;
    height: auto;
    color: #fff;
}

.standardSiteForm input[type='submit']:hover,
.standardSiteForm input[type='submit']:active,
.standardSiteForm input[type='submit']:focus,
.btn-check:checked+.btn, 
.btn.active, 
.btn.show,
.btn:first-child:active, 
:not(.btn-check)+.btn:active,
.btn:hover,
.btn:active,
.btn:focus,
.btn:focus-visible,
.btn-primary:focus-visible
.btn-primary:hover, 
.btn-primary:active, 
.btn-primary:focus,
.btn-purple:hover,
.btn-purple:active,
.btn-purple:focus,
.btn-primary.btn-lg:hover,
.btn-primary.btn-lg:active,
.btn-primary.btn-lg:focus
{
    background: #007868;
    border-color:  #007868;
    color: #fff;
}

.btn-purple,
.btn-secondary {
    background: var(--main-purple-color);
    border: 1px solid var(--main-purple-color);
}

.btn-purple:hover,
.btn-purple:active,
.btn-purple:focus,
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus
{
    background: #523096 !important; 
    border: 1px solid #523096;
}


.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    background: var(--main-green-color);
    border: 1px solid var(--main-green-color);
    opacity: 0.5;
}

.btn-white {
    background: #fff !important;
    border-color: #fff !important;
    color:  var(--body-text-color) !important;
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active
{
    border-color: #fff !important;
    background: transparent !important;
    color: #fff !important;
}

.btn-black {
    background:  var(--body-text-color) !important;
    color: #fff !important;
    border-color: var(--body-text-color) !important;
}

.btn-black:hover,
.btn-black:active,
.btn-black:focus
 {
    color:  var(--body-text-color) !important;
    background: #fff !important;
    border-color: var(--body-text-color) !important;
}

.btn-danger {
    border-color: #dc3545;
    background: #dc3545;
}

.btn-danger:focus,
.btn-danger:active,
.btn-danger:hover
{
    border-color: #bb2d3b !important;
    background: #bb2d3b !important;
}

.btn-green, .btn-success, .btn-info {
    background: var(--main-green-color);
    border-color: var(--main-green-color);
    color: #fff;
}

.btn-green:hover, 
.btn-success:hover, 
.btn-info:hover,
.btn-green:focus, 
.btn-success:focus, 
.btn-info:focus,
.btn-green:active, 
.btn-success:active, 
.btn-info:active  
{
    background: #007868 !important;
    border-color:  #007868 !important;
    color: #fff !important;
}

.btn-blue {
    background: var(--main-blue-color);
    border-color: var(--main-blue-color);
    color: #fff;
}

.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active 
{
    background: #264cc9 !important;
    border-color: #264cc9 !important;
    color: #fff !important;
}

.btn-pink {
    background: var(--main-pink-color);
    border-color: var(--main-pink-color);
    color: #fff;
}

.btn-pink:hover,
.btn-pink:focus,
.btn-pink:active  
{
    background: #c44989 !important;
    border-color: #c44989 !important;
    color: #fff !important;
}

.btn-orange, .btn-warning {
    background: var(--main-orange-color);
    border-color: var(--main-orange-color);
    color: #fff;
}

.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active, 
.btn-warning:focus, 
.btn-warning:active, 
.btn-warning:hover  
{
    background: #c48218 !important;
    border-color: #c48218 !important;
    color: #fff !important;
}

.btn-primary.btn-lg,
.btn-secondary.btn-lg 
{
    height: auto;
    padding: 8px 24px;
}


@media (min-width: 769px) {
    .home-hero-btns a:first-child {
        border-right: 1px solid #848d97;
    }
}

.btn {
    transition: all 0.25s ease-in;
}

.btn-outline-white {
    border-color: #fff;
    color: #fff;
    font-weight: 600;
    box-shadow: none;
    transition: all 0.25s ease-in;
    height: auto;
    background: transparent;
}

.btn-outline-white:hover,
.btn-outline-white:active,
.btn-outline-white:focus 
{
    background: #fff !important;
    color: var(--body-text-color);
    border-color: #fff !important;
}

.btn-outline-black {
    border-color: var(--body-text-color) !important;
    color:  var(--body-text-color) !important;
    font-weight: 600;
    box-shadow: none;
    transition: all 0.25s ease-in;
    height: auto;
    background: transparent;
}

.btn-outline-black:hover,
.btn-outline-black:active,
.btn-outline-black:focus
 {
    background:  var(--body-text-color) !important;
    color: #fff !important;
    border-color: var(--body-text-color) !important;
}

.btn-outline-secondary {
    border-color: var(--main-purple-color);
    color: var(--main-purple-color);
    font-weight: 600;
    box-shadow: none;
    transition: all 0.25s ease-in;
    height: auto;
    background: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active
{
    background: var(--main-purple-color) !important;
    border-color: var(--main-purple-color) !important;
    color: #fff;
}

.btn-outline-primary, .btn-outline {
    border-color: var(--main-green-color);
    color: var(--main-green-color);
    font-weight: 600;
    box-shadow: none;
    transition: all 0.25s ease-in;
    height: auto;
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active
{
    background: var(--main-green-color) !important;
    border-color: var(--main-green-color) !important;
    color: #fff;
}

.btn-dark {
    color: var(--body-text-color);
}

.btn-text {
    border: none;
    background-color: transparent;
}

.btn i {
    margin-left: 3px;
}

.btn .fa-chevron-right {
    font-weight: bold;
}

.btn-wide {
    width: 100%;
}

.text-link {
    background: none;
    box-shadow: 0;
    color:  var(--body-text-color);
    font-size: 1.4em;
    text-decoration: none;
    position: relative;
    transition: all 0.5s ease-in-out;
    padding: 0;
    font-weight: 600;
    border: none;
}

.text-link:hover,
.text-link:active,
.text-link:focus 
{
    background: none !important;
    color:  var(--body-text-color) !important;
    transition: all 0.5s ease-in-out;
    border: none !important;
}

.text-link i {
    font-weight: 700;
    transition: all .25s ease;
    color: rgba(56,191,172,1);
    margin-left: 2px;
}

.text-link:hover i,
.button-card .card:hover .text-link i,
.button-card .card:active .text-link i,
.button-card .card:focus .text-link i
{
    translate: 6px;
    transition: all .25s ease;
    color: #007868;
}

.button-card .card,
.button-card .card:hover,
.button-card .card:focus,
.button-card .card:active  {
    transition: all 0.3s ease;
}

.text-link.text-purple,
.text-link.text-orange,
.text-link.text-blue,
.text-link.text-pink {
    color:  var(--body-text-color) !important;
}

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

.text-link.text-blue:hover i,
.button-card .card:hover .text-link.text-blue i
 {
    color: #264cc9 !important;
}

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

.text-link.text-pink:hover i,
.button-card .card:hover .text-link.text-pink i
{
    color: #c44989 !important;
}

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

.text-link.text-purple:hover i,
.button-card .card:hover .text-link.text-purple i
 {
    color:  #523096 !important;
}

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

.text-link.text-orange:hover i,
.button-card .card:hover .text-link.text-orange i 
{
    color: #c48218 !important;
}

.horizontal-button-card .card-body {
    padding-right: 45px !important;
}

.horizontal-button-card img {
    height: 100%;
}

@media (max-width: 768px) {
    .horizontal-button-card img {
        width: 100%;
    }
}

.horizontal-button-card .fa-chevron-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}

.link-underline {
    text-decoration-color: inherit !important;
}

.highlighter {
    display: inline-block;
    background: linear-gradient(       
        100deg,       
        #ffffaf00 1%,       
        #ffffaf 2.5%,        
        #ffffaf80 5.7%,              
        #ffffaf  95%,       
        #ffffaf00 98%        
        ),       
        linear-gradient(182deg, #ffffaf00, #ffffaf4d 8%, #ffffaf00 15%)
}

.highlighter-orange {
    display: inline-block;
    background: linear-gradient(
        100deg,        
        #ffffaf00 1%,        
        #fed693 2.5%,      
        #ffe4b9 5.7%,   
        #ffe4b9 93%,        
        #fed693 95%,       
        #ffffaf00 98%       
        ),        
        linear-gradient(182deg, #ffffaf00, #ffffaf4d 8%, #ffffaf00 15%);
}

.highlighter-blue {
    display: inline-block;
    background: linear-gradient(
        100deg,
        #afd7ff00 1%,
        #afd7ff 2.5%,
        #afd7ff80 5.7%,
        #afd7ffb4 95%,
        #afd7ff00 98%
      ),
      linear-gradient(182deg, #afd7ff00, #afd7ff4d 8%, #afd7ff00 15%);
}

.highlighter-pink {
    display: inline-block;
    background: linear-gradient(
        100deg,
        #ffafd400 1%,
        #ffafd4 2.5%,
        #ffafd480 5.7%,
        #ffafd4b4 95%,
        #ffafd400 98%
      ),
      linear-gradient(182deg, #ffafd400, #ffafd44d 8%, #ffafd400 15%);
}

.highlighter-green {
    display: inline-block;
    background: linear-gradient(     
         100deg,     
        #b8ffaf00 1%,  
        #86e2d5 2.5%,   
        #c4e8e3 5.7%,    
        #86e2d5 93%,       
        #b8ffaf00 98%    
        ),   
        linear-gradient(182deg, #b8ffaf00, #b8ffaf4d 8%, #b8ffaf00 15%);
}

.highlighter-purple {
    display: inline-block;
    background: linear-gradient(       
         100deg,       
        #ffafd400 1%,     
        #9179c2 2.5%,      
        #bcb0d2 5.7%,       
        #8f67d6 95%,      
        #ffafd400 98%     
        ),     
        linear-gradient(182deg, #ffafd400, #ffafd44d 8%, #ffafd400 15%);
}

.highlighter-gradient {
    display: inline-block;
    background: linear-gradient(           
            100deg,            
        #ffafd400 1%,      
        #86e2d5 2.5%,           
        #86e2d5 5.7%,         
        #8f67d6 95%,             
        #ffafd400 98%          
        ),            
        linear-gradient(182deg, #ffafd400, #ffafd44d 8%, #ffafd400 15%);
}

.highlighter-gradient-orange-blue {
    display: inline-block;
    background: linear-gradient(
        100deg,        
        #ffffaf00 1%,        
        #fed693 2.5%,      
        #ffe4b9 5.7%,          
        #afd7ffb4 95%,
        #afd7ff00 98%     
        ),        
        linear-gradient(182deg, #ffffaf00, #ffffaf4d 8%, #ffffaf00 15%);
}

.cutout-text-green {
    background:  #38bfac;
    color: #fff; 
    padding: 0 5px;
}

.cutout-text-blue {
    background:  var(--main-blue-color);
    color: #fff; 
    padding: 0 5px;
}

.cutout-text-purple {
    background: var(--main-purple-color);
    color: #fff; 
    padding: 0 5px;
}

.cutout-text-pink {
    background:  var(--main-pink-color);
    color: #fff; 
    padding: 0 5px;
}

.cutout-text-orange {
    background: var(--main-orange-color);
    color: #fff; 
    padding: 0 5px;
}

.bg-dark .cutout-text-orange,
.bg-dark .cutout-text-pink,
.bg-dark .cutout-text-blue,
.bg-dark .cutout-text-green,
.bg-dark .cutout-text-purple
 {
    color:  #0c101a
}

/* cards */
.card-tile {
    padding: 1rem 1.5rem;
    background: #fff;
   /* box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.05); */
    border-radius: 6px;
    border: 1px solid #ccc; 
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .flex-three-boxes > div,
    .flex-four-boxes > div,
    .flex-five-boxes > div,
    .flex-six-boxes > div 
    {
        max-width: 48%;
    }
}

@media (min-width: 992px) {
    .flex-two-boxes > div {
        max-width: 48%;
    }

    .flex-three-boxes > div {
        max-width: 32%;
    }

    .flex-five-boxes > div {
        max-width: 31%;
    }

    .flex-six-boxes > div {
        max-width: 31%;
    }
}

@media (min-width: 1200px) {
    .flex-four-boxes > div {
        max-width: 23%;
    }

    .flex-five-boxes > div {
        max-width: 18%;
    }

    .flex-six-boxes > div {
        max-width: 15.6%;
    }
}


.card-img-overlay {
    background: rgba(0,0,0,0.3);
}

.box-shadow-dark {
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.25);
}

.box-shadow-light {
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.05);
}

.card-header {
    width: 100%;
}

.card-lg .text-link {
    font-size: 1.75rem;
}

.button-card .card:hover,
.button-card .card:active,
.button-card .card:focus
{
    border: 2px solid #38bfac !important;
}

.button-card .card.card-blue:hover, 
.button-card .card.card-blue:active, 
.button-card .card.card-blue:focus
{
    border-color: var(--main-blue-color) !important; 
}

.button-card .card.card-purple:hover, 
.button-card .card.card-purple:active, 
.button-card .card.card-purple:focus
{
    border-color:  var(--main-purple-color)  !important;
}

.button-card .card.card-pink:hover, 
.button-card .card.card-pink:active, 
.button-card .card.card-pink:focus
{
    border-color:  var(--main-pink-color) !important;
}

.button-card .card.card-orange:hover, 
.button-card .card.card-orange:active, 
.button-card .card.card-orange:focus
{
    border-color:  var(--main-orange-color)  !important;
}

.position-relative {
    position: relative;
}

.icon-overlap {
    position: absolute;
    text-align: center;
    bottom: -30px;
    left: 0;
    right: 0;
}

.icon-overlap i {
    position: relative;
    z-index: 5;
}

.icon-overlap i,
.icon-overlap i.bg-gradient-light {
    background: transparent !important;
}

.icon-overlap i:before {
    position: relative;
    z-index: 1;
}

.icon-overlap i:after {
    background: var(--main-green-color);
    border-radius: 50%;
    padding: 5px;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.icon-overlap i.bg-purple:after {
    background: var(--main-purple-color)  !important;
}

.icon-overlap i.bg-pink:after {
    background: var(--main-pink-color) !important;
}

.icon-overlap i.bg-orange:after {
    background: var(--main-orange-color)  !important;
}

.icon-overlap i.bg-blue:after {
    background-color: var(--main-blue-color) !important;
}

.bg-gradient-light,
.icon-overlap i.bg-gradient-light:after 
{
    background: linear-gradient(78deg, #6b43c5, #4cbdac) !important;
}

.card-deck {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.pricing-highlight {
    position: relative;
    box-shadow: inset 0px 0px 0px 2px #6b43c5;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.pricing-highlight:before {
    content: "Most Popular";
    position: absolute;
    width: 100%;
    padding: 2px;
    top: -28px;
    left: 0;
    display: block;
    background: var(--main-purple-color);
    color: #fff;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem
}

.pricing-highlight.pricing-purple {
    box-shadow: inset 0px 0px 0px 2px var(--main-purple-color);
}

.pricing-highlight.pricing-purple:before {
    background: var(--main-purple-color);
}

.pricing-highlight.pricing-blue {
    box-shadow: inset 0px 0px 0px 2px var(--main-blue-color);
}

.pricing-highlight.pricing-blue:before {
    background: var(--main-blue-color);
}

.pricing-highlight.pricing-orange {
    box-shadow: inset 0px 0px 0px 2px var(--main-orange-color);
}

.pricing-highlight.pricing-orange:before {
    background: var(--main-orange-color);
}

.pricing-highlight.pricing-pink {
    box-shadow: inset 0px 0px 0px 2px var(--main-pink-color);
}

.pricing-highlight.pricing-pink:before {
    background: var(--main-pink-color);
}

.pricing-highlight.pricing-green {
    box-shadow: inset 0px 0px 0px 2px var(--main-green-color);
}

.pricing-highlight.pricing-green:before {
    background: var(--main-green-color);
}

.pricing-highlight.pricing-highlight-white {
    box-shadow: inset 0px 0px 0px 2px #000;
}

.pricing-highlight.pricing-highlight-white:before {
    background: #000;
    color: #fff;
}

/* borders border offset card */
 .text-bg-dark {
    background-color: #0d1d29 !important;
}

.card.text-bg-dark,
.border-offset.text-bg-dark 
{
    background-color: #0e1922 !important;
}

.border {
    border: 1px solid rgb(222, 226, 230);
} 

.border-offset {
    position: relative;
    transition: all 0.25s ease-in-out;
}

.border-offset:before {
    border: 1px solid rgba(255,255,255,0.15);
    height: 100%;
    width: 100%;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0.5rem;
    transition: all 0.25s ease-in-out;
}

.border-offset.border-offset-left:before {
    transform: translate(-15px,-15px);
    transition: all 0.25s ease-in-out;
}

.border-offset.border-offset-right:before {
    transform: translate(15px,-15px);
    transition: all 0.25s ease-in-out;
}

.border-offset:hover:before {
    transform: translate(0,0);
    transition: all 0.25s ease-in-out;
}

.border-offset:before {
    border: 1px solid #ccc;
}

.border-offset.border-offset-green:before {
    border: 1px solid var(--main-green-color) !important;
    transition: all 0.25s ease-in-out;
}

.text-bg-dark.border-offset.border-offset-green:before {
    border-color: rgba(56,191,172,0.25) !important;
}

.border-offset.border-offset-blue:before {
    border: 1px solid var(--main-blue-color) !important;
    transition: all 0.25s ease-in-out;
}

.text-bg-dark.border-offset.border-offset-blue:before {
    border-color: rgba(70, 114, 254, 0.25) !important;
}

.border-offset.border-offset-pink:before {
    border: 1px solid var(--main-pink-color) !important;
    transition: all 0.25s ease-in-out;
}

.text-bg-dark.border-offset.border-offset-pink:before {
    border-color: rgba(247, 120, 186, 0.25) !important;
}

.border-offset.border-offset-purple:before {
    border: 1px solid var(--main-purple-color) !important;
    transition: all 0.25s ease-in-out;
}

.text-bg-dark.border-offset.border-offset-purple:before {
    border-color: rgba(110, 64, 201, 0.25) !important;
}

.border-offset.border-offset-orange:before {
    border: 1px solid var(--main-orange-color) !important;
    transition: all 0.25s ease-in-out;
}

.text-bg-dark.border-offset.border-offset-orange:before {
    border-color: rgba(188, 140, 64, 0.25) !important
}

@media (max-width: 992px) {
    .border-offset.border-offset-left,
    .border-offset.border-offset-right {
        margin-bottom: 40px;
    }

    .border-offset.border-offset-left:before,
    .border-offset.border-offset-right:before {
        transform: translate(0,0);
    }
}

.border-offset.border-offset-left .btn,
.border-offset.border-offset-right .btn,
.border-offset.border-offset-left h2,
.border-offset.border-offset-right h2,
.border-offset.border-offset-left h3,
.border-offset.border-offset-right h3,
.border-offset.border-offset-left h4,
.border-offset.border-offset-right h4,
.border-offset.border-offset-left h5,
.border-offset.border-offset-right h5,
.border-offset.border-offset-left p,
.border-offset.border-offset-right p,
.border-offset.border-offset-left a,
.border-offset.border-offset-right a {
    position: relative;
    z-index: 1;
}

.border-green {
    border-color: rgba(56,191,172,0.25) !important;
}

.border-blue {
    border-color: rgba(70, 114, 254, 0.25) !important;
}

.border-pink {
    border-color: rgba(247, 120, 186, 0.25) !important;
}

.border-purple {
    border-color: rgba(110, 64, 201, 0.25) !important;
}

.border-orange {
    border-color: rgba(188, 140, 64, 0.25) !important;
}

.float-right {
    float: right;
}

/* dashboard */
.dashboard-tile {
    background: #fff;
    box-shadow: var(--bs-box-shadow-sm);
    padding: 1.5rem;
    border-radius: 6px;
    /* border: 1px solid rgb(222, 226, 230); */
    margin-bottom: 1.5rem;
    width: 100%;
}

.dashboard-intro.dashboard-tile,
.dashboard-blocks-wrapper.dashboard-tile, 
.dashboard-sponsored-banners.dashboard-tile 
 {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: none;
}

.dashboard ul.slick-dots {
    display: none !important;
}

@media (max-width: 1200px) {
    .dashboard-flex {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .dashboard-flex {
        display: block;
    }
}

@media (min-width: 768px) {
    .dashboard-tile-thirds {
        max-width: 48%;
    }

    .dashboard-tile-two-thirds {
        max-width: 33%;
    }

    .dashboard-tile-fourths {
        max-width: 33%;
    }

    .dashboard-sponsored-banners {
        max-width: 40%;
    }
}

@media (min-width: 992px) {
    .dashboard-tile-thirds {
        max-width: 33%;
    }

    .dashboard-tile-two-thirds {
        max-width: 66%;
    }

    .dashboard-tile-fourths {
        max-width: 25%;
    }

    .dashboard-tile-half {
        max-width: 50%;
    }
}

.dashboard table th {
    font-weight: 500;
}

.dashboard-link {
    display: flex;
    align-items: center;
}

.dashboard-link i {
    color: var(--main-green-color);
    width: 20px;
    margin-right: .5rem;
    text-align: center;
}

.dashboard-link a {
    text-decoration: underline;
}

.dashboard-link a:hover,
.dashboard-link a:focus,
.dashboard-link a:active
{
    text-decoration: none;
}

.dashboard-quick-links .dashboard-link {
    margin-bottom: 0.65rem;
}

.dashboard-quick-links a.list-group-item-action {
    text-decoration: none;
    position: relative;
    padding-right: 35px;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    background: #fff;
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.025);
    border-radius: 6px;
}

.dashboard-quick-links  a.list-group-item-action:after {
    content: "\f054";
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    font-size: 20px;
    color: var(--main-green-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.dashboard-quick-links a.list-group-item-action:hover,
.dashboard-quick-links a.list-group-item-action:active,
.dashboard-quick-links a.list-group-item-action:focus 
{
    background: #e9ecef;
}

.dashboard-sponsored-bottom-banners,
.dashboard-sponsored-banners
{
    position: relative;
}

.dashboard-sponsored-bottom-banners p,
.dashboard-sponsored-banners p
{
    position: absolute;
    top: -25px;
    right: 0px;
}

.dashboard-blocks .card-tile {
    position: relative;
}

@media (min-width: 768px) {
    .dashboard-blocks {
        display: flex;
        flex-wrap: wrap;
    }
}

.dashboard-blocks .card-tile {
    width: 100%;
    margin-bottom: .5rem;
    font-size: 0.95em;
}

@media (min-width: 768px) {
    .dashboard-blocks > .card-tile {
        width: var(--dashboard-block-width-sm);
    }
}

@media (min-width: 992px) {
    .dashboard-blocks > .card-tile {
        width: var(--dashboard-block-width-md);
    }
}

@media (min-width: 1200px) {
    .dashboard-blocks > .card-tile {
        width: var(--dashboard-block-width-lg);
    }
}

.dashboard-blocks-inner.card-tile {
    max-height: 400px;
    max-width: 600px;
    width: 600px;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 102%;
    z-index: 3;
    box-shadow: 0px 0px 10px 8px rgba(0,0,0,0.1);
    opacity: 0;
    transition: all 0.3s ease;
}

.dashboard-blocks .dashboard-quotes:hover .dashboard-quotes-inner.card-tile {
    opacity: 1;
    transition: all 0.3s ease;
}

.dashboard-blocks .card-tile-link {
	padding: 0;
    transition: all 0.3s ease;
    border: 1px solid var(--main-green-color);
    cursor: pointer;
}

.dashboard-blocks .card-tile-link a {
	padding: 1em;
	height: 100%;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.dashboard-blocks .card-tile-link:hover {
    transition: all 0.3s ease;
	box-shadow: inset 0px 0px 0px 1px  var(--main-green-color);
}

.dashboard-blocks .card-tile-link h4 {
    transition: all 0.3s ease;
}

.dashboard-blocks .card-tile-link:hover h4 {
    color: var(--main-green-color);
    transition: all 0.3s ease;
}

/* backgrounds */
.background-white,
.bg-white {
    background-color: #fff !important;
}

.bg-slight-white, .background-slight-white {
    background: rgb(250, 250, 250) !important;
}

.bg-off-white, .background-off-white {
    background: rgb(240, 240, 240) !important;
}

.bg-grey, .background-grey {
    background: #ddd;
}

.background-bottom-curve {
    border-bottom-left-radius: 50% 10%;
    border-bottom-right-radius: 50% 10%;
}

.background-bottom-slant {
    transform: skewY(2deg);
    margin-top: -70px;
    z-index: -1;
    position: relative;
    height: 105px;
}

.background-bottom-wave {
    display: block;
    width: 100%;
    height: 130px;
    transform: rotateX(180deg);
    margin-top: -70px;
    z-index: -1;
    position: relative;
}

.background-cubes {
    background-image: url('/cds/image$cubes-gradient-bg-min$20241127102111');
    background-repeat: no-repeat;
    background-position: 100% 1%;
}

.background-cubes-green {
    background-image: url('/cds/image$cubes-gradient-bg-green-min$20241127102110');
    background-repeat: no-repeat;
    background-position: 100% 1%;
}

.background-cubes-purple {
    background-image: url('/cds/image$cubes-gradient-bg-purple-min$20241127102115');
    background-repeat: no-repeat;
    background-position: 100% 1%;
}

.background-cubes-blue {
    background-image: url('/cds/image$cubes-gradient-bg-blue-min$20241127102108');
    background-repeat: no-repeat;
    background-position: 100% 1%;
}

.background-cubes-pink {
    background-image: url('/cds/image$cubes-gradient-bg-pink-min$20241127102113');
    background-repeat: no-repeat;
    background-position: 100% 1%;
}

.background-cubes-orange {
    background-image: url('/cds/image$cubes-gradient-bg-orange-min$20241127102112');
    background-repeat: no-repeat;
    background-position: 100% 1%;
}

.background-blocks {
    background-image: url('/cds/image$blocks-gradient-bg-min$20241206155915');
    background-repeat: no-repeat;
    background-position: 105% 0%;
}

.background-blocks-green {
    background-image: url('/cds/image$blocks-gradient-bg-green-min$20241127102054');
    background-repeat: no-repeat;
    background-position: 105% 0%;
}

.background-blocks-purple {
    background-image: url('/cds/image$blocks-gradient-bg-purple-min$20241127102100');
    background-repeat: no-repeat;
    background-position: 105% 0%;
}

.background-blocks-orange {
    background-image: url('/cds/image$blocks-gradient-bg-orange-min$20241127102057');
    background-repeat: no-repeat;
    background-position: 105% 0%;
}

.background-blocks-blue {
    background-image: url('/cds/image$blocks-gradient-bg-blue-min$20241127102053');
    background-repeat: no-repeat;
    background-position: 105% 0%;
}

.background-blocks-pink {
    background-image: url('/cds/image$blocks-gradient-bg-pink-min$20241127102058');
    background-repeat: no-repeat;
    background-position: 105% 0%;
}

.background-circles {
    background-image: url('/cds/image$circles-gradient-bg-min$20241127102104');
    background-repeat: no-repeat;
    background-position: 102% 0%;
    background-size: 50%;
}

.background-circles-purple {
    background-image: url('/cds/image$circles-gradient-bg-purple-min$20241127102107');
    background-repeat: no-repeat;
    background-position: 102% 0%;
    background-size: 50%;
}

.background-circles-pink {
    background-image: url('/cds/image$circles-gradient-bg-pink-min$20241127102106');
    background-repeat: no-repeat;
    background-position: 102% 0%;
    background-size: 50%;
}

.background-circles-orange {
    background-image: url('/cds/image$circles-gradient-bg-orange-min$20241127102105');
    background-repeat: no-repeat;
    background-position: 102% 0%;
    background-size: 50%;
}

.background-circles-blue {
    background-image: url('/cds/image$circles-gradient-bg-blue-min$20241127102101');
    background-repeat: no-repeat;
    background-position: 102% 0%;
    background-size: 50%;
}

.background-circles-green {
    background-image: url('/cds/image$circles-gradient-bg-green-min$20241127102103');
    background-repeat: no-repeat;
    background-position: 102% 0%;
    background-size: 50%;
}

.background-lines {
    background-image: url('/cds/image$lines-gradient-bg-min$20250722091216');
    background-repeat: no-repeat;
    background-position: 100% 0%;
}

.background-lines-purple {
    background-image: url('/cds/image$lines-gradient-bg-purple-min$20241127102130');
    background-repeat: no-repeat;
    background-position: 100% 0%;
}

.background-lines-blue {
    background-image: url('/cds/image$lines-gradient-bg-blue-min$20241127102123');
    background-repeat: no-repeat;
    background-position: 100% 0%;
}

.background-lines-pink {
    background-image: url('/cds/image$lines-gradient-bg-pink-min$20250722091218');
    background-repeat: no-repeat;
    background-position: 100% 0%;
}

.background-lines-green {
    background-image: url('/cds/image$lines-gradient-bg-green-min$20241127102125');
    background-repeat: no-repeat;
    background-position: 100% 0%;
}

.background-lines-orange {
    background-image: url('/cds/image$lines-gradient-bg-orange-min$20250722091217');
    background-repeat: no-repeat;
    background-position: 100% 0%;
}

.background-curves {
    background-image: url('/cds/image$curves-gradient-bg-min$20241127102118');
    background-repeat: no-repeat;
    background-position: 120% 0%;
    background-size: 60%;
}

.background-curves-purple {
    background-image: url('/cds/image$curves-gradient-bg-purple-min$20241127102122');
    background-repeat: no-repeat;
    background-position: 120% 0%;
    background-size: 60%;
}

.background-curves-orange {
    background-image: url('/cds/image$curves-gradient-bg-orange-min$20241127102120');
    background-repeat: no-repeat;
    background-position: 120% 0%;
    background-size: 60%;
}

.background-curves-pink {
    background-image: url('/cds/image$curves-gradient-bg-pink-min$20241127102121');
    background-repeat: no-repeat;
    background-position: 120% 0%;
    background-size: 60%;
}

.background-curves-green {
    background-image: url('/cds/image$curves-gradient-bg-green-min$20241127102117');
    background-repeat: no-repeat;
    background-position: 120% 0%;
    background-size: 60%;
}

.background-curves-blue {
    background-image: url('/cds/image$curves-gradient-bg-blue-min$20241127102116');
    background-repeat: no-repeat;
    background-position: 120% 0%;
    background-size: 60%;
}


.background-blocks .container-fluid,
.background-blocks-purple .container-fluid,
.background-blocks-orange .container-fluid,
.background-blocks-pink .container-fluid,
.background-blocks-blue .container-fluid,
.background-blocks-green .container-fluid,
.background-circles .container-fluid,
.background-circles-purple .container-fluid,
.background-circles-orange .container-fluid,
.background-circles-pink .container-fluid,
.background-circles-blue .container-fluid,
.background-circles-green .container-fluid,
.background-cubes .container-fluid,
.background-cubes-purple .container-fluid,
.background-cubes-orange .container-fluid,
.background-cubes-pink .container-fluid,
.background-cubes-blue .container-fluid,
.background-cubes-green .container-fluid,
.background-curves .container-fluid,
.background-curves-purple .container-fluid,
.background-curves-orange .container-fluid,
.background-curves-pink .container-fluid,
.background-curves-blue .container-fluid,
.background-curves-green .container-fluid,
.background-lines .container-fluid,
.background-lines-purple .container-fluid, 
.background-lines-orange .container-fluid,
.background-lines-pink .container-fluid,
.background-lines-blue .container-fluid,
.background-lines-green .container-fluid  
{
    position: relative;
    z-index: 3;
}

@media (max-width: 768px) {
    .background-blocks,
    .background-blocks-purple,
    .background-blocks-orange,
    .background-blocks-pink,
    .background-blocks-blue,
    .background-blocks-green,
    .background-circles,
    .background-circles-purple,
    .background-circles-orange,
    .background-circles-pink,
    .background-circles-blue,
    .background-circles-green,
    .background-cubes,
    .background-cubes-purple,
    .background-cubes-orange,
    .background-cubes-pink,
    .background-cubes-blue,
    .background-cubes-green,
    .background-curves,
    .background-curves-purple,
    .background-curves-orange,
    .background-curves-pink,
    .background-curves-blue,
    .background-curves-green,
    .background-lines,
    .background-lines-purple,
    .background-lines-orange,
    .background-lines-pink,
    .background-lines-blue,
    .background-lines-green 
    {
        background: none;
    }
}


.background-center-cubes {
    background-image: url('/cds/image$background-center-cubes-min$20241127102031');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-center-cubes-purple {
    background-image: url('/cds/image$background-center-cubes-purple-min$20241127102035');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-center-cubes-orange {
    background-image: url('/cds/image$background-center-cubes-orange-min$20241127144032');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-center-cubes-pink {
    background-image: url('/cds/image$background-center-cubes-pink-min$20241127102034');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-center-cubes-blue {
    background-image: url('/cds/image$background-center-cubes-blue-min$20241127102131');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-center-cubes-green {
    background-image: url('/cds/image$background-center-cubes-geen-min$20241127102029');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-center-curves {
    background-image: url('/cds/image$background-center-curves-min$20241127102039');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-center-curves-blue {
    background-image: url('/cds/image$background-center-curves-blue-min$20241127102036');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-center-curves-orange {
    background-image: url('/cds/image$background-center-curves-orange-min$20241127102041');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-center-curves-pink {
    background-image: url('/cds/image$background-center-curves-pink-min$20241127102043');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-center-curves-green {
    background-image: url('/cds/image$background-center-curves-green-min$20241127102038');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-center-curves-purple {
    background-image: url('/cds/image$background-center-curves-purple-min$20241127102044');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-cloud {
    background-image: url('/cds/image$background-cloud-min$20241127102048');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-cloud-purple {
    background-image: url('/cds/image$background-cloud-purple-min$20241127102052');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-cloud-pink {
    background-image: url('/cds/image$background-cloud-pink-min$20241127102050');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-cloud-orange {
    background-image: url('/cds/image$background-cloud-orange-min$20241127102049');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-cloud-blue {
    background-image: url('/cds/image$background-cloud-blue-min$20250710100934');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-cloud-green {
    background-image: url('/cds/image$background-cloud-green-min$20250710100935');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.background-bottom-world {
    background-image: url('/cds/image$background-bottom-world$20250519140228');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

.gradient-circle-green,
.gradient-circle-blue,
.gradient-circle-pink,
.gradient-circle-orange,
.gradient-circle-purple
{
    position: relative;
}

.gradient-circle-green > div,
.gradient-circle-blue > div,
.gradient-circle-pink > div,
.gradient-circle-orange > div,
.gradient-circle-purple > div
{
    position: relative;
    z-index: 1;
}


.gradient-circle-green:before,
.gradient-circle-blue:before,
.gradient-circle-pink:before,
.gradient-circle-orange:before,
.gradient-circle-purple:before
{
    background-position: center center;
    background-size: 50%;
    background-repeat: no-repeat;
    content: "";
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-50%);
    z-index: 0;
}

@media (max-width: 1200px) {
    .gradient-circle-green:before,
    .gradient-circle-blue:before,
    .gradient-circle-pink:before,
    .gradient-circle-orange:before,
    .gradient-circle-purple:before
    {
        background-size: 80%;
    }
}

@media (max-width: 768px) {
    .gradient-circle-green:before,
    .gradient-circle-blue:before,
    .gradient-circle-pink:before,
    .gradient-circle-orange:before,
    .gradient-circle-purple:before
    {
        display: none;
    }
}

.gradient-circle-green:before{
    background-image: radial-gradient(circle, rgba(0,172,149,0.15) 0%, rgba(13,17,23,0) 70%, rgba(13, 17, 23, 0) 100%);
}

.gradient-circle-blue:before {
    background-image: radial-gradient(circle, rgba(70, 114, 254, 0.15) 0%, rgba(13,17,23,0) 70%, rgba(13, 17, 23, 0) 100%);
}

.gradient-circle-pink:before {
    background-image: radial-gradient(circle, rgba(247, 120, 186, 0.15) 0%, rgba(13,17,23,0) 70%, rgba(13, 17, 23, 0) 100%);
}

.gradient-circle-purple:before {
    background-image: radial-gradient(circle, rgba(110, 64, 201, 0.15) 0%, rgba(13,17,23,0) 70%, rgba(13, 17, 23, 0) 100%);
}

.gradient-circle-orange:before {
    background-image: radial-gradient(circle, rgba(188, 140, 64, 0.15) 0%, rgba(13,17,23,0) 70%, rgba(13, 17, 23, 0) 100%);
}

.background-blue-gradient {
    background: linear-gradient(0deg, #0c101a 1%, #0b1b4d 85%);
}

.background-green-gradient {
    background: linear-gradient(0deg, #0c101a 1%, rgba(0,107,93,1) 85%);
}

.background-purple-gradient {
    background: linear-gradient(0deg, #0c101a 1%, rgba(22,16,63,1) 85%);
}

.background-purple-gradient .gradient-box {
    position: relative;
    z-index: 1;
}

.background-purple-gradient .gradient-box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    padding: 2px;
    background: linear-gradient(45deg, #6b43c5, #4cbdac);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
    mask:  linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.background-gradient-blue-purple,
.bg-gradient-blue-purple
{
    background-image: linear-gradient(-90deg, var(--main-purple-color), var(--main-blue-color));
}

.background-gradient-purple,
.bg-gradient-purple 
{
    background-image: linear-gradient(-90deg, var(--main-purple-color), #936ae6);
}

.bg-gradient-dark-purple,
.background-gradient-dark-purple 
{
    background-image: linear-gradient(45deg, var(--dark-purple-color)  25%, var(--main-purple-color)  100%);
}

.background-gradient-green,
.bg-gradient-green
{
    background-image: linear-gradient(-90deg, var(--main-green-color), #58e4d1);
}

.bg-gradient-dark-green,
.background-gradient-dark-green
 {
    background-image: linear-gradient(45deg, rgba(0,107,93,1) 25%, rgba(0,172,149,1) 100%);
}

.background-gradient-blue,
.bg-gradient-blue
{
    background-image: linear-gradient(-90deg, var(--main-blue-color), #6b8df9);
}

.bg-gradient-dark-blue,
.background-gradient-dark-blue
{
    background-image: linear-gradient(45deg, var(--dark-blue-color) 25%, var(--main-blue-color) 100%);
}

.background-gradient-orange,
.bg-gradient-orange
{
    background-image: linear-gradient(-90deg, var(--main-orange-color), #feca74);
}

.bg-gradient-dark-orange,
.background-gradient-dark-orange 
{
    background-image: linear-gradient(45deg, var(--dark-orange-color) 25%, var(--main-orange-color) 100%);
}

.background-gradient-pink,
.bg-gradient-pink
{
    background-image: linear-gradient(-90deg, var(--main-pink-color), #ef88bd)
}

.bg-gradient-dark-pink,
.background-gradient-dark-pink 
{
    background-image: linear-gradient(45deg, var(--dark-pink-color) 25%, var(--main-pink-color) 100%);
}

.background-gradient-light-grey-white,
.bg-gradient-light-grey-white 
{
    background-image: linear-gradient(180deg, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 10%);
}

.background-gradient-white-light-grey,
.bg-gradient-white-light-grey
{
    background-image: linear-gradient(0deg, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 10%);
}

.background-picture,
.background-picture-form,
.background-picture-half,
.background-picture-bottom
{
    background-image: url('/cds/image$tape-vs-cloud-background$20240214161834');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.background-picture:before,
.background-picture-form:before,
.background-picture-half:before,
.background-picture-bottom:before
{
    background: rgba(12,16,26,0.75);
    height: 100%;
    width: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.background-picture.background-blue:before {
    background: rgba(38,76,201,0.9);
}

.background-picture.background-green:before {
    background: rgba(0,120,104,0.9);
}

.background-picture.background-purple:before {
    background: rgba(82,48,150,0.9); 
}

.background-picture.background-pink:before {
    background:  rgba(196,73,137,0.9);
}

.background-picture.background-orange:before {
    background:  rgba(191,127,23,0.9);
}

.background-picture .container {
    position: relative;
    z-index: 1;
}

.background-picture-form:before {
    background: rgba(12,16,26,0.92);
}

.background-picture-form .form-dark {
    background: transparent;
}

.background-picture-form .form-dark .border-dark {
    background: rgba(12,16,26,0.7);
}

.background-picture-form {
    background-image: url('/cds/image$image-lenovo-background2$20181010152424');
}

.background-picture-half {
    background-image: url('/cds/image$tape-vs-cloud-background$20240214161834');
    background-position: right center;
}

.background-picture-half:before {
    background: linear-gradient(90deg, rgba(12,16,26,1) 35%, rgba(255,255,255,0) 70%);
}

.background-picture-bottom {
    background-image: url('/cds/image$tape-vs-cloud-background$20240214161834');
}

.background-picture-bottom:before {
    background: linear-gradient(0deg, rgba(12,16,26,1) 0%, rgba(12,16,26,1) 30%, rgba(255,255,255,0) 100%);
}

.background-picture-bottom .picture-bottom-text {
    margin-top: 30%;
}

.background-picture-skew  {
    background-position: right;
    background-size: contain;
    background-image: url('/cds/image$background-template-center$20250519135652');
    background-repeat: no-repeat;
    position: relative;
}

.background-picture-skew .bg {
    height:100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;

}

@media (min-width: 1200px) {
    .background-picture-skew .bg {
        width: 75%;
    }
}

@media (min-width: 992px) {
    .background-picture-skew .bg {
        width: 65%;
        clip-path: polygon(0 0, 100% 0%, 90% 101%, 0% 100%);
    }
}


.card-gradient-bottom
{
    position: relative;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.card-gradient-bottom:before {
    background: linear-gradient(0deg, rgba(12,16,26,1) 0%, rgba(12,16,26,1) 30%, rgba(255,255,255,0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
}

.card-gradient-bottom .card-body
 {
    margin-top: 70%;
    position: relative;
}

.text-align-center {
    text-align: center
}

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

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

.gradient-underline,
.gradient-blue-underline,
.gradient-purple-underline,
.gradient-pink-underline,
.gradient-orange-underline,
.gradient-green-underline  
{
    position: relative;
}

.gradient-underline:before {
    content: "";
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--main-green-color) 10%, var(--main-purple-color) 100%);
}

.gradient-blue-underline:before {
    content: "";
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to left, var(--main-blue-color) 0%, #829fff 90%);
}

.gradient-orange-underline:before {
    content: "";
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to left,  var(--main-orange-color) 0%, #ffd38c 90%);
}

.gradient-pink-underline:before {
    content: "";
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to left,  var(--main-pink-color) 0%, #ff9ccf 90%);
}

.gradient-purple-underline:before {
    content: "";
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to left,  var(--main-purple-color) 0%, #a375ff 90%);
}

.gradient-green-underline:before {
    content: "";
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to left, var(--main-green-color) 0%, #62fce8 90%);
}

.blockquote, blockquote {
    margin: 3rem 6rem;
    position: relative;
}

.blockquote h2, blockquote h2,
.blockquote h3, blockquote h3,
.blockquote h4, blockquote h4 
{
    font-weight: 500;
    margin-bottom: 1rem !important;
}

.blockquote-footer {
    margin-top: 0;
    color: var(--body-text-color);
}

.notification, .alert  {
    padding: 18px;
    background: #eee;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.2);
    color: var(--body-text-color);
}

.notification a, 
.alert a 
{
    color: var(--body-text-color);
    font-weight: 500;
}


.notification.notification-success .btn,
.notification.notification-success .btn span,
.notification.notification-success .btn-primary,  
.notification.notification-success .btn-primary span,  
.alert.alert-success .btn,
.alert.alert-success .btn span,
.alert.alert-success .btn-primary,
.alert.alert-success .btn-primary span,
.notification.notification-info .btn,
.notification.notification-info .btn span,
.notification.notification-info .btn-primary,  
.notification.notification-info .btn-primary span,  
.alert.alert-info .btn,
.alert.alert-info .btn span,
.alert.alert-info .btn-primary,
.alert.alert-info .btn-primary span,
.notification-error .btn,
.notification-error .btn-primary,  
.alert-error .btn,
.alert-error .btn-primary,
.notification-warning .btn,
.notification-warning .btn-primary,   
.alert-warning .btn,
.alert-warning .btn-primary
{
    background:  transparent;
    border-color:  var(--body-text-color);
    color: var(--body-text-color);
}

.notification.notification-success .btn:hover,
.notification.notification-success .btn:hover span,
.notification.notification-success .btn-primary:hover,  
.notification.notification-success .btn-primary:hover span,  
.alert.alert-success .btn:hover,
.alert.alert-success .btn:hover span,
.alert.alert-success .btn-primary:hover,
.alert.alert-success .btn-primary:hover span,
.notification.notification-info .btn:hover,
.notification.notification-info .btn:hover span,
.notification.notification-info .btn-primary:hover,  
.notification.notification-info .btn-primary:hover span,  
.alert.alert-info .btn:hover,
.alert.alert-info .btn:hover span,
.alert.alert-info .btn-primary:hover,
.alert.alert-info .btn-primary:hover span,
.notification.notification-success .btn:focus,
.notification.notification-success .btn:focus span,
.notification.notification-success .btn-primary:focus,  
.notification.notification-success .btn-primary:focus span,  
.alert.alert-success .btn:focus,
.alert.alert-success .btn:focus span,
.alert.alert-success .btn-primary:focus,
.alert.alert-success .btn-primary:focus span,
.notification.notification-info .btn:focus,
.notification.notification-info .btn:focus span,
.notification.notification-info .btn-primary:focus,  
.notification.notification-info .btn-primary:focus span,  
.alert.alert-info .btn:focus,
.alert.alert-info .btn:focus span,
.alert.alert-info .btn-primary:focus,
.alert.alert-info .btn-primary:focus span,
.notification.notification-success .btn.btn:active,
.notification.notification-success .btn:active span,
.notification.notification-success .btn-primary:active,  
.notification.notification-success .btn-primary:active span,  
.alert.alert-success .btn:active,
.alert.alert-success .btn:active span,
.alert.alert-success .btn-primary:active,
.alert.alert-success .btn-primary:active span,
.notification.notification-info .btn:active,
.notification.notification-info .btn:active span,
.notification.notification-info .btn-primary:active,  
.notification.notification-info .btn-primary:active span,  
.alert.alert-info .btn:active,
.alert.alert-info .btn:active span,
.alert.alert-info .btn-primary:active,
.alert.alert-info .btn-primary:active span,
.notification-error .btn:hover,
.notification-error .btn-primary:hover,  
.alert-error .btn:hover,
.alert-error .btn-primary:hover,
.notification-warning .btn:hover,
.notification-warning .btn-primary:hover,  
.alert-warning .btn:hover,
.alert-warning .btn-primary:hover,
.notification-error .btn:focus,
.notification-error .btn-primary:focus,  
.alert-error .btn:focus,
.alert-error .btn-primary:focus,
.notification-warning .btn:focus,
.notification-warning .btn-primary:focus, 
.alert-warning .btn:focus,
.alert-warning .btn-primary:focus,
.notification-error .btn:active,
.notification-error .btn-primary:active,  
.alert-error .btn:active,
.alert-error .btn-primary:active,
.notification-warning .btn:active,
.notification-warning .btn-primary:active,  
.alert-warning .btn:active,
.alert-warning .btn-primary:active
{
    color: #fff;
    border-color: var(--body-text-color);
    background:  var(--body-text-color);
}

.notification-error .btn:hover span,
.notification-error .btn-primary:hover span, 
.alert-error .btn:hover span,
.alert-error .btn-primary:hover span,
.notification-warning .btn:hover span,
.notification-warning .btn-primary:hover span,  
.alert-warning .btn:hover span,
.alert-warning .btn-primary:hover span,
.notification-error .btn:focus span,
.notification-error .btn-primary:focus span,  
.alert-error .btn:focus span,
.alert-error .btn-primary:focus span,
.notification-warning .btn:focus span,
.notification-warning .btn-primary:focus span, 
.alert-warning .btn:focus span,
.alert-warning .btn-primary:focus span,
.notification-error .btn:active span,
.notification-error .btn-primary:active span,  
.alert-error .btn:active span,
.alert-error .btn-primary:active span,
.notification-warning .btn:active span,
.notification-warning .btn-primary:active span,  
.alert-warning .btn:active span,
.alert-warning .btn-primary:active span
{
    color: #fff;
}

.bg-dark .notification,
.bg-dark .alert {
    background: #161922;
    border-color: rgba(255,255,255,0.1);
}

.notification h2,
.notification h3,
.notification h4,
.notification h5,
.notification h6,
.notification p,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert h6,
.alert p
{
    margin-bottom: 0;
}

.notification.notification-green,
.notification.notification-info,
.notification.notification-success,
.alert.alert-green,
.alert.alert-info,
.alert.alert-success
 {
    background: #c8eae6;
    border-color: #a0ddd6;
    color: var(--dark-green-color);
    color: var(--body-text-color);
}

.notification.notification-green span,
.notification.notification-info span,
.notification.notification-success span,
.notification.notification-green p,
.notification.notification-info p,
.notification.notification-success p,
.alert.alert-green span,
.alert.alert-info span,
.alert.alert-success span,
.alert.alert-green p,
.alert.alert-info p,
.alert.alert-success p
{
    color: var(--dark-green-color);
    color: var(--body-text-color);
}

.notification.notification-blue,
.alert.alert-blue
 {
    background: #d1dbfb;
    border-color: #b0c2fc;
    color: var(--dark-blue-color);
    color: var(--body-text-color);
}

.notification.notification-blue span,
.notification.notification-blue p,
.alert.alert-blue span,
.alert.alert-blue p
{
    color: var(--dark-blue-color);
    color: var(--body-text-color);
}

.notification.notification-purple,
.alert.alert-purple
 {
    background:   #ded5f0;
    border-color: #c8b7e8;
    color: var(--dark-purple-color); 
    color: var(--body-text-color);
}

.notification.notification-purple span,
.notification.notification-purple p,
.alert.alert-purple span,
.alert.alert-purple p
{
    color: var(--dark-purple-color);
    color: var(--body-text-color);
}

.notification.notification-pink,
.alert.alert-pink 
{
    background: #fadaeb;
    border-color: #fac0df;
    color: var(--dark-pink-color); 
    color: var(--body-text-color);
}

.notification.notification-pink span,
.notification.notification-pink p,
.alert.alert-pink span,
.alert.alert-pink p
{
    color: var(--dark-pink-color); 
    color: var(--body-text-color);
}

.notification.notification-orange,
.notification.notification-warning,
.alert.alert-orange,
.alert.alert-warning 
{
    background: #f9e8ce;
    border-color:  #f8daab;
    color: var(--dark-orange-color); 
    color: var(--body-text-color);
}

.notification.notification-orange span,
.notification.notification-warning span,
.notification.notification-orange p,
.notification.notification-warning p,
.alert.alert-orange span,
.alert.alert-warning span,
.alert.alert-orange p,
.alert.alert-warning p
{
    color: var(--dark-orange-color);
    color: var(--body-text-color);
}

.notification.notification-error,
.alert.alert-error,
.notification.notification-danger,
.alert.alert-danger  
{
    background: #f4d3d6;
    border-color: #efb4b9;
    color: rgb(220,53,69);
    color: var(--body-text-color);
}

.notification.notification-error span,
.notification.notification-error p,
.alert.alert-error span,
.alert.alert-error p,
.notification.notification-danger span,
.notification.notification-danger p,
.alert.alert-danger span,
.alert.alert-danger p
{
    color: rgb(220,53,69);
    color: var(--body-text-color);
}



.info-box {
    background: #eee;
    padding: 15px 30px;
    border-left: 6px solid var(--main-green-color);
    margin-bottom: 20px;
}

.info-box p {
    margin-bottom: 0;
}

.info-box-dark {
    background: #161922;
}

.info-box-dark h2,
.info-box-dark h3,
.info-box-dark h4,
.info-box-dark h5,
.info-box-dark h6,
.info-box-dark p,
.info-box-dark span
{
    color: #fff;
}

.info-box-info,
.info-box-primary {
    border-color:  var(--main-green-color);
}

.info-box-blue {
    border-color:  var(--main-blue-color);
}

.info-box-pink {
    border-color: var(--main-pink-color);
}

.info-box-purple {
    border-color:  var(--main-purple-color);
}

.info-box-warning,
.info-box-orange
{
    border-color:   var(--main-orange-color);
}

.info-box-error
{
    border-color: rgb(220,53,69);
}

.form-signin {
    width: 100%;
    max-width: 400px;
    padding: 15px;
    margin: 5% auto;
}

/*animations */

/* counter */
@property --num {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
  }

  .counter .counter-contents {
    opacity: 0;
  }

  .counter.inview .counter-contents {
    opacity: 1;
    transition: all 0.3s ease;
  }
  
  .counter.inview div span {
    counter-reset: num var(--num);
    animation: var(--animation) 5s forwards ease-in-out;
  }
  
  .counter.inview   div span::after {
    content: counter(num);
  }

  .counter.inview   div span.c-call-time::after {
    content: counter(num) 's';
  }

  .counter.inview   div span.c-same-day::after {
    content: counter(num) '.7%';
  }

  .counter.inview  div span.c-service-desk::after {
    content: counter(num);
  }

  .counter.inview div span.c-sla::after {
    content: counter(num) '.8%';
  }   

  .counter.inview div span.c-retention::after {
    content: counter(num) '.94%';
  }

  .counter.inview div span.c-sats::after {
    content: counter(num) '%';
  }
  
  @keyframes counter-call-time{
    from {
      --num: 0;
    }
    to {
      --num: 10;
    }
  }
  
  @keyframes counter-same-day {
    from {
      --num: 0;
    }
    to {
      --num: 65;
    }
  }
  
  @keyframes counter-service-desk {
    from {
      --num: 0;
    }
    to {
      --num: 17358;
    }
  }

  @keyframes counter-sla {
    from {
      --num: 0;
    }
    to {
      --num: 99;
    }
  }

  @keyframes counter-retention {
    from {
        --num: 0;
    }
    to {
        --num: 91;
    }
  }

  @keyframes counter-sats {
    from {
        --num: 0;
    }
    to {
        --num: 98;
    }
  }

  /* end of counter */

  /* font awesome animations */
    .fa-shake {
        animation-duration: 5s;
    }

    @keyframes fa-shake {
        0% {
            transform:rotate(-10deg)
        }
            
        4% {
            transform:rotate(10deg)
        }
        
        8% {
            transform:rotate(-16deg)
        }
        
        12% {
            transform:rotate(16deg)
        }
        
        16% {
            transform:rotate(-10deg)
        }
        
        20% {
            transform:rotate(10deg)
        }
        
        24%, to {
            transform:rotate(0deg)
        }
    }

    .fa-flip {
        animation-duration: 9s;
    }

    @keyframes fa-flip {
        0% {
            transform:  rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,0deg));
        }

        20% {
            transform:  rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));
        }

        50% {
            transform:  rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));
        }

        70% {
            transform:  rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,0deg));
        }

        100% {
            transform:  rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,0deg));
        }
    }


.underline {
    background-image: linear-gradient(120deg, #84fab0 0%, #38bfac 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.2em;
    background-position: 0 88%;
    transition: background-size 0.25s ease-in;
}

.underline:hover {
    background-size: 100% 88%;
}

.gradient-text {
    background: linear-gradient(to right, var(--main-green-color) 10%, var(--main-purple-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.scroll-highlight {
    position: relative;
    margin: 0 5px;
    display: inline-block;
}

.scroll-highlight:before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 3px;
    left: -5px;
    right: -5px;
    bottom: -2px;
    background-color: var(--main-purple-color);
    transform-origin: 0;
}

.home-arrow-down {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    max-width: 64px;
    margin: auto;
}

@media (min-width: 769px) {
    hr.hr-half-width {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    
    hr.hr-third-width {
        width: 33%;
        margin-left: auto;
        margin-right: auto;
    }
    
    hr.hr-quarter-width {
        width: 25%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* form */
.floating-labels div,
.floating-label 
{
    position: relative;
}

.floating-label label,
.floating-labels div>label 
{
    position: absolute;
    top: -10px;
    background: #fff;
    padding: 0 2px;
    left: 12px;
    font-size: 0.9em;
    width: auto;
} 

.form-label {
    margin-bottom: .25rem; 
}

.standardSiteForm input[type='text'] {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 0.375rem;
    border-width: 1px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.standardSiteForm .gf__control {
    position: relative;
    margin-bottom: 12px;
}

.standardSiteForm .gf__control label {
    font-size: 0.95em;
    margin-bottom: 0;
}

.form-check-input:checked {
    background-color: rgba(56,191,172,1);
}

.valid-feedback {
    color: rgba(56,191,172,1);
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: rgba(56,191,172,1);
}

.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
    border-color: rgba(56,191,172,1);
    box-shadow: none;  
}

.form-floating > .form-control-plaintext ~ label::after, 
.form-floating > .form-control:focus ~ label::after, 
.form-floating > .form-control:not(:placeholder-shown) ~ label::after, 
.form-floating > .form-select ~ label::after 
{
    background-color: transparent;
}

.form-dark .form-floating > .form-control-plaintext ~ label, 
.form-dark .form-floating > .form-control:focus ~ label, 
.form-dark .form-floating > .form-control:not(:placeholder-shown) ~ label, 
.form-dark .form-floating > .form-select ~ label 
{
    color: #fff;
}

.standardSiteForm input[type='text']:focus-visible,
.standardSiteForm input[type='text']:focus,
.standardSiteForm input[type='password']:focus,
.standardSiteForm input[type='password']:focus-visible,
.form-dark.standardSiteForm input[type='text']:focus-visible,
.form-dark.standardSiteForm input[type='text']:focus,
.form-dark.standardSiteForm input[type='password']:focus,
.form-dark.standardSiteForm input[type='password']:focus-visible  
{
    box-shadow: none;
    border: 1px solid #38bfac;
    outline: none;
}

.form-control:focus,
.form-select:focus,
.form-dark .form-control:focus,
.form-dark .form-select:focus,
input[type="text"]:focus, 
input[type="search"]:focus, 
input[type="password"]:focus, 
select:focus, 
textarea:focus
 {
    box-shadow: 0 0 0 3px rgba(0,172,149, 0.2);
    border-color: #38bfac;
    outline: none;
    transition: all 0.2s ease-in-out;
}

.standardSiteForm input[type='text']:hover,
.standardSiteForm input[type='password']:hover,
.form-dark.standardSiteForm input[type='text']:hover,
.form-dark.standardSiteForm input[type='password']:hover,
.form-control:hover,
.form-select:hover,
input:hover, 
select:hover,
.form-dark .form-control:hover,
.form-dark .form-select:hover,
.form-dark input:hover, 
.form-dark select:hover,
.form-check-input:checked,
.form-dark .form-check-input:checked {
    border-color: #38bfac;
}

.form-check-input:hover,
.form-check-input:focus,
.form-check-input:active,
.form-check-input:checked:hover,
.form-check-input:checked:focus
{
    border-color: #38bfac;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(0,172,149, 0.2);
}



/* tables */
.table-bg-transparent,
.table-bg-transparent th,
.table-bg-transparent tr,
.table-bg-transparent td 
{
    background: transparent;
}

.table-info,
.table-green,
.table-success
 {
    --bs-table-bg: rgba(0,172,149, 0.2);
}

.table-hover>tbody>tr.table-info:hover>*,
.table-hover>tbody>tr.table-green:hover>*,
.table-hover>tbody>tr.table-success:hover>* 
 {
    --bs-table-bg-state: rgba(0,172,149, 0.3);
}

.table-primary,
.table-purple
 {
    --bs-table-bg: rgba(151, 65, 252, 0.2);
}

.table-hover>tbody>tr.table-primary:hover>*,
.table-hover>tbody>tr.table-purple:hover>* 
 {
    --bs-table-bg-state:rgba(151, 65, 252, 0.3);
}

.table-warning,
.table-orange
 {
    --bs-table-bg: rgba(188, 140, 64, 0.2);
}

.table-hover>tbody>tr.table-warning:hover>*,
.table-hover>tbody>tr.table-orange:hover>* 
 {
    --bs-table-bg-state:rgba(188, 140, 64, 0.3);
}

.table-pink
 {
    --bs-table-bg: rgba(247, 120, 186, 0.2);
}

.table-hover>tbody>tr.table-pink:hover>*
 {
    --bs-table-bg-state:rgba(247, 120, 186, 0.3);
}

.table-blue
 {
    --bs-table-bg: rgba(70, 114, 254, 0.2);
}

.table-hover>tbody>tr.table-blue:hover>*
 {
    --bs-table-bg-state:rgba(70, 114, 254, 0.3);
}

@media (max-width: 992px) {
    .mobile-column-reverse {
        order: 2;
    }
}

.row-highlight,
.row-highlight-info,
.row-highlight-success,
.row-highlight-green,
.row-highlight-primary {
    border-left: 4px solid var(--main-green-color);
    background: #eee;
}

.row-highlight-secondary,
.row-highlight-purple 
{
    border-left: 4px solid var(--main-purple-color);
    background: #eee;
}

.row-highlight-warning,
.row-highlight-orange {
    border-left: 4px solid var(--main-orange-color);
    background: #eee;
}

.row-highlight-error {
    border-left: 4px solid rgb(220,53,69);
    background: #eee;
}


/* accordian FAQs */
.accordian-container input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
    
.accordian-container .tabs {
    overflow: hidden;
}
    
.accordian-container .tab {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
    background: transparent;
    border-radius: 0;
    position: relative;
}

.accordian-container .tab-label {
    width: 100%;
    padding: 0.75em 2.25em  0.75em  0.75em;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--body-text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.accordian-container.accordian-blue .tab-label::after {
    color: var(--main-blue-color);
}

.accordian-container.accordian-green .tab-label::after {
    color: var(--main-green-color); 
}

.accordian-container.accordian-purple .tab-label::after {
    color: var(--main-purple-color);
}

.accordian-container.accordian-orange .tab-label::after {
    color: var(--main-orange-color);
}

.accordian-container.accordian-pink .tab-label::after {
    color: var(--main-pink-color);
}


.accordian-container .tab-label:hover {
    background: #eee;
    transition: all 0.3s ease;
}

.accordian-container .tab-label::after {
    content: "\f054";
    font-family: 'Font Awesome 5 Pro';
    font-size: 1.2em;
    text-align: center;
    transition: all 0.35s;
    right: 18px;
    display: inline-block;
    position: absolute;
    transform: rotate(90deg);
    transition: all 0.3s ease;
    top: 11px;
}

.accordian-container .tab-label:hover::after {
    color: var(--body-text-color) !important;
    transition: all 0.3s ease;
}

.accordian-container .tab-content {
    max-height: 0;
    padding: 0 0.75em;
    background:  transparent;
    transition: all 0.35s;
    font-size: 1.2em;
}

.accordian-container .tab-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    cursor: pointer;
}

.accordian-container input:checked + .tab-label {
    background: #eee;
}

.accordian-container input:checked + .tab-label::after {
    color:  var(--body-text-color) !important;
    transform: rotate(-90deg);
    transition: all 0.3s ease;
}

.accordian-container input:checked ~ .tab-content {
    max-height: 100vh;
    padding: 0.75em 0.75em 1.75em;
}

/* dark styles */
.bg-dark, .background-dark {
    background-color: #0c101a !important;
}

.bg-dark-gradient {
    background:  rgb(12,16,26);
    background:  linear-gradient(0deg, rgba(12,16,26,1) 0%, rgba(14,25,34,1) 25%, rgba(12,16,26,1) 50%, rgba(14,25,34,1) 75%, rgba(12,16,26,1) 100%);
}

.border-bg-drk {
    border-color: #0c101a !important;
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark p,
.bg-dark legend,
.bg-dark label,
.bg-dark .text-link,
.bg-dark .text-link:hover,
.bg-dark .text-link:active,
.bg-dark .text-link:focus
{
    color: #fff;
}

.border-dark {
    border-color: rgba(255,255,255,0.2) !important;
    border-width: 1px;
    border-style: solid;
}

.form-dark {
    background: #0c101a;
}


.form-dark .form-label,
.form-dark .form-text,
.form-dark h1,
.form-dark h2,
.form-dark h3,
.form-dark h4,
.form-dark h5,
.form-dark h6,
.form-dark p,
.form-dark legend,
.form-dark label
{
    color: #fff;
}

.form-dark .form-control,
.form-dark .form-select,
.form-dark.standardSiteForm input[type='text'],
.form-dark.standardSiteForm input[type='password']
{
    background-color: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,.7);
}

.form-dark .form-check-input {
    background-color: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,0.2);
}


.form-dark .form-control:focus, 
.form-dark .form-select:focus, 
.form-dark input[type="text"]:focus, 
.form-dark input[type="search"]:focus, 
.form-dark input[type="password"]:focus, 
.form-dark select:focus, 
.form-dark textarea:focus
{
    background: rgba(255,255,255,.2);
    transition: all 0.2s ease-in-out;
}


.form-dark .form-check-input:checked {
    border-color: #38bfac;
}


.table-dark {
    --bs-table-bg: #0c101a;
    background: #0c101a;
}

.card-dark {
    background: #161922;
}

.card-dark h2,
.card-dark h3,
.card-dark h4,
.card-dark h5,
.card-dark h6,
.card-dark p
{
    color: #fff;
}


.card-dark.border {
    border-color: rgba(255,255,255,0.1) !important;
}

.bg-dark .text-grey,
.bg-dark-gradient .text-grey 
{
	color: #858e99 !important;
}

/**** new nav styles white dropdown ****/
 .top-menu-container nav a > i,
li.kk-mm-tab i
{
    color: var(--main-green-color) !important;
    font-weight: 900;
}

.pb-account-menu .top-menu-container nav a > i {
    width: auto;
    margin-right: 8px;
}

.pb-account-menu .top-menu-container nav .kk-has-dd .kk-dd-menu a > i {
    width: 24px;
    margin-right: .4rem;
}

.pb-account-menu .top-menu-container nav i.fal.fa-shopping-basket,
li.kk-mm-tab .kk-mm-trig:after
{
    font-weight: 400;
}

.kk-dd-trig::after {
    right: 11px;
    font-weight: 400;
    color: var(--main-green-color);
}

.pb-account-menu .top-menu-container nav a {
    padding: 10px 12px 10px 8px;
}

@media (min-width: 993px) and (max-width: 1200px) {
	.pb-account-menu .top-menu-container nav a {
		padding: 10px 6px 10px 6px;
	}
}

.pb-account-menu .top-menu-container nav li.kk-has-dd > a,
nav li.kk-has-dd > a
{
    padding-right: 35px;
}

.top-menu-container nav h4,
.top-menu-container nav h5, 
.top-menu-container nav h6, 
.top-menu-container nav p, 
.top-menu-container nav a 
{
    padding: 10px 12px 10px 5px;
}

.d-menu .top-menu li.kk-megamenu > ul,
.d-menu .top-menu .kk-dd-menu 
{
    background: rgb(248, 249, 250);
    border-radius: 8px;
    border: 1px solid #d9d9d9;
    border-top: 1px solid #d9d9d9;
}

.m-menu .top-menu.open {
	color: inherit;	    
	background: rgb(248, 249, 250);
}

.m-menu.top-menu-container nav.top-menu h6 {
	color: #0e1922;
}

.top-menu .pb-menu-sell .kk-dd-menu, 
.top-menu .pb-menu-buy .kk-dd-menu 
{
    padding: 20px;
}

.kk-dd-menu a,
li.kk-mm-tab .kk-mm-trig
{
    color: #666;
}

@media (min-width: 993px) {
    .top-menu-container nav h6 {
        color: var(--body-text-color) !important;
    }
}

.kk-dd-menu a:hover,
.kk-dd-menu a:focus,
.kk-dd-menu a:active,
li.kk-mm-tab .kk-mm-trig:hover,
li.kk-mm-tab .kk-mm-trig:focus,
li.kk-mm-tab .kk-mm-trig:active,
.d-menu .kk-dd-menu a:hover,
.d-menu .kk-dd-menu a:focus,
.d-menu .kk-dd-menu a:active,
.top-menu-container nav a:hover h6,
.top-menu-container nav a:focus h6,
.top-menu-container nav a:active h6,
.d-menu li.kk-mm-tab.active span,
.d-menu li.kk-mm-tab > span:hover
{
    color: var(--main-green-color) !important;
    background-color: rgba(0,0,0,.07);
}

.top-menu-container nav a:hover > i,
.top-menu-container nav a:focus > i,
.top-menu-container nav a:active > i
{
    color: var(--main-green-color) !important;
}


.top-menu-container nav a:hover h6,
.top-menu-container nav a:focus h6,
.top-menu-container nav a:active h6
{
    background: transparent !important;
}

footer .nav-link
{
    color: #fff !important;
}

footer .nav-link:hover,
footer .nav-link:active,
footer .nav-link:focus
{
    color: var(--main-green-color) !important;
}

.kk-dd-menu .platform-box {
    padding: 20px 30px;
    border-radius: 8px;
    text-align: center;
}

#pb-global-search button::after {
    font-weight: 400;
}

#pb-global-search input {
    background-color: rgba(255,255,255,0.05);
}

.top-menu-container nav a.disabled,
.top-menu-container nav a.disabled > i,
.top-menu-container nav a.disabled:hover,
.top-menu-container nav a.disabled:hover > i,
.top-menu-container nav a.disabled:active,
.top-menu-container nav a.disabled:active > i,
.top-menu-container nav a.disabled:focus,
.top-menu-container nav a.disabled:focus > i
{
    background: transparent !important;
    color: var(--grey-color) !important;
    cursor: not-allowed;
}

.d-menu .kk-dd-menu a.btn:hover,
.d-menu .kk-dd-menu a.btn:focus,
.d-menu .kk-dd-menu a.btn:active
{
    color: #fff !important;
}

nav.navbar.sub-nav {
	z-index: 1;
}

.sub-nav .active a, .sub-nav a:active, .sub-nav a:hover, .sub-nav a:focus,
.pb-link-icon,
.footer-social ul li a:hover i
{
	 color: var(--main-green-color) !important;
}

input#pb-global-search-input::placeholder {
	font-style: normal;
}

/* basket new styles */
nav div#pb-basket-modal a.btn i {
	color: #fff !important;
}

#pb-basket-modal > div {
    z-index: 99;
    min-width: 20rem;
    padding: 1.5rem;
    box-shadow: 0 15px 40px 0 rgba(0,0,0,.2);
}
 
#pb-basket-modal p {
    color: var(--bs-body-color);
}
 
#pb-basket-modal .text-truncated {
    max-height: 4rem;
    overflow: hidden;
}
 
#pb-basket-modal .btn {
    background: RGB(0, 172, 149);
    border: 1px solid RGB(0, 172, 149);
    color: rgb(255, 255, 255);
    font-weight: 600;
    box-shadow: none;
    transition: all 0.25s ease-in;
    height: auto;
}

/* services styles */
.service-wrapper .btn-blue {
    background: #3191d8;
    border-color: #3191d8;
    color: #fff;
}

.service-wrapper .btn-outline-blue {
    background: transparent;
    color: #3191d8;
}

.service-wrapper  .text-light-blue {
    color: #3191d8 !important;
}

.service-wrapper .text-dark-blue {
    color: #16203b !important;
}

.service-wrapper .bg-light-blue {
    background-color:  #3191d8 !important;
}

.service-wrapper .bg-dark-blue {
    background-color: #16203b !important;
}

.service-wrapper .tile-blue {
    background: #004085;
}

ul.slick-dots li.slick-active button {
	background-color:  #fff !important; 
    box-shadow: 0px 0px 0px 1px #ccc;
}

.service-wrapper .accordian-container.accordian-light-blue .tab-label::after {
    color: #3191d8 !important;
}

.service-wrapper .button-card .card.card-blue:hover, 
.service-wrapper .button-card .card.card-blue:active, 
.service-wrapper .button-card .card.card-blue:focus 
{
    border-color:  #3191d8 !important;
}

.service-wrapper .horizontal-button-card .card-body {
    min-height: 240px;
}

.service-wrapper ::selection {
	background: var(--main-blue-color);
}

/* animated 24 hour clock */
.rotate-clock {
  animation: rotateClock 12s steps(1, end) infinite;
  transform-origin: center;
}

@keyframes rotateClock {
  0%    { transform: rotate(30deg); }   /* 1 PM */
  8.33% { transform: rotate(60deg); }   /* 2 PM */
  16.66% { transform: rotate(90deg); }  /* 3 PM */
  25%  { transform: rotate(120deg); }   /* 4 PM */
  33.33% { transform: rotate(150deg); } /* 5 PM */
  41.66% { transform: rotate(180deg); } /* 6 PM */
  50%  { transform: rotate(210deg); }   /* 7 PM */
  58.33% { transform: rotate(240deg); } /* 8 PM */
  66.66% { transform: rotate(270deg); } /* 9 PM */
  75%  { transform: rotate(300deg); }   /* 10 PM */
  83.33% { transform: rotate(330deg); } /* 11 PM */
  91.66% { transform: rotate(360deg); } /* 12 PM */
  100%  { transform: rotate(390deg); }  /* Back to 1 PM */
}