html {
    scroll-behavior: smooth;
}

ul {
    margin-bottom: 0 !important;
}

table {
    margin-bottom: 0 !important;
}

.typing-demo {
    width: 100%;
    animation: typing 2s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2em;
}

.border-right-small {
    border-right: 1px solid;
}

.header-account-balance {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2em;
    text-decoration: none;
    color: black;
}

.header-account-balance-disabled {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2em;
    text-decoration: none;
    color: black;
}

.header-account-balance:hover {
    color: #0a58ca !important;
}

.hide-element {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

@keyframes typing {
    from {
        width: 0
    }
}

@keyframes blink {
    50% {
        border-color: transparent
    }
}

@media screen and (min-width: 1200px) {
    .header-container:hover {
        background-color: #d0e9ff;
        border-radius: 5px;
        box-shadow: 1px 1px 4px 0 #0030b788
    }
}

.language-container:hover {
    background-color: #d0e9ff;
    border-radius: 5px;
}



.header-style {
    background-color: #06c;
    box-shadow: 0 1px 2px #598bc1;
    top: 0;
    z-index: 45;
    transition: height 0.3s;
}



@media screen and (max-width: 991px) {
    .footer-style {
        background-color: #ffffff;
        box-shadow: 0 -1px 2px #888888;
        bottom: 0;
        z-index: 40;
        transition: height .3s;
    }
}

.services-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.5em !important;
}

.circular-menu .floating-btn {
    height: 3em;
}

.circular-menu.active .floating-btn {
    box-shadow: inset 0 0 3px hsla(0, 0%, 0%, 0.3);
}

.circular-menu .floating-btn:active {
    box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, 0.4);
}

.circular-menu .floating-btn i {
    font-size: 1.3em;
    transition: transform 0.2s;
}

.circular-menu.active .floating-btn i {
    transform: rotate(-45deg);
}

.circular-menu:after {
    display: block;
    content: " ";
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -2;
    background-color: transparent;
    transition: all 0.3s ease;
}

.circular-menu.active:after {
    transform: scale3d(7.5, 7.5, 1);
    transition-timing-function: cubic-bezier(0.68, 1.55, 0.265, 1);
}

.circular-menu .items-wrapper {
    padding: 0;
    margin: 0;
}

.circular-menu .menu-item {
    position: absolute;
    top: 0.2em;
    right: 0.2em;
    left: 0.5px;
    z-index: -1;
    display: block;
    text-decoration: none;
    color: hsl(0, 0%, 100%);
    font-size: 1em;
    border-radius: 5px;
    text-align: center;
    line-height: 3;
    background-color: white;
    transition: transform 0.3s ease, all 0.2s ease;
    border: 1px solid #00518f4a;
    opacity: 0;
    height: 48px;
}

.circular-menu.active .menu-item {
    opacity: 1;
}

.circular-menu .menu-item:hover {
    background-color: #f0f0f0;
}

.circular-menu.active .menu-item {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.circular-menu.active .menu-item:nth-child(1) {
    /*transform: translate3d(-11.8em, -2.4em, 0);
    */
    transform: translate3d(0, 3.5em, 0);
}

.circular-menu.active .menu-item:nth-child(2) {
    /*transform: translate3d(-11.5em, 2.7em, 0);
    */
    transform: translate3d(0, 7.5em, 0);
}

.circular-menu.active .menu-item:nth-child(3) {
    /*transform: translate3d(-9.3em, 7.2em, 0);
    */
    transform: translate3d(0, 11.5em, 0);
}

.circular-menu.active .menu-item:nth-child(4) {
    /*transform: translate3d(-5.4em, 10.4em, 0);
    */
    transform: translate3d(0, 15.5em, 0);
}

.circular-menu.active .menu-item:nth-child(5) {
    /*transform: translate3d(-0.5em, 11.9em, 0);
    */
    transform: translate3d(0, 19.5em, 0);
}

.circular-menu.active .menu-item:nth-child(6) {
    /*transform: translate3d(4.5em, 11.4em, 0);
    */
    transform: translate3d(0, 23.5em, 0);
}

/**
 * The other theme for this menu
 */

.circular-menu.circular-menu-left {
    right: auto;
    left: 1em;
}

.circular-menu.circular-menu-left .floating-btn {
    background-color: hsl(217, 89%, 61%);
}

.circular-menu.circular-menu-left:after {
    background-color: hsl(217, 89%, 61%);
}

.circular-menu.circular-menu-left.active .floating-btn i {
    transform: rotate(90deg);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(1) {
    transform: translate3d(-1em, -7em, 0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(2) {
    transform: translate3d(3.5em, -6.3em, 0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(3) {
    transform: translate3d(6.5em, -3.2em, 0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(4) {
    transform: translate3d(7em, 1em, 0);
}

/* end circle menu */


@media screen and (max-width: 992px) {
    .navbar-display {
        display: block !important;
    }
}

.header-image {
    height: 40px;
    width: 40px;
}

.active_solution {
    border: 2px solid blue !important;
}

.welcomeUser {
    height: 80px;
    display: block;
    margin-top: 10px;
    width: 80px;
    position: absolute;
    left: 30px;
}

.btn_fade_effect {
    cursor: pointer;
    height: 3.5em;
    position: relative;
    overflow: hidden;
    width: 9.5em;
    text-align: center;
}

.btn_fade_effect .fadedbox {
    background-color: lightgray;
    position: absolute;
    top: 0;
    left: 0;
    color: #212529;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    width: 9.5em;
    height: 3.5em;
}

.btn_fade_effect:hover .fadedbox {
    opacity: 0.8;
}

.btn_fade_effect .text {
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    transform: translateY(30px);
    -webkit-transform: translateY(30px);
}

.btn_fade_effect .title {
    font-size: 1.2em;
    opacity: 0;
    transition-delay: 0.2s;
    transition-duration: 0.3s;
}

.btn_fade_effect:hover .title,
.btn_fade_effect:focus .title {
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.solutions {
    background-color: rgb(243 242 239);
    color: black;
    cursor: pointer;
    text-align: center;
    height: 100%;
    width: 100%;
    border: 1px solid rgb(128, 128, 128);
    min-height: 30px;
}

/* Change background color of buttons on hover */
.solutions:hover {
    background-color: #e7f3ff;
    border-bottom: 2px solid blue;
}

/* Create an active/current "tab button" class */
.products button.active {
    background-color: #ccc;
}

.container_py-3 {
    width: 80%;
    max-width: 1260px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
}

.pricing-header {
    max-width: 700px;
}

.navbar-display {
    display: none;
    z-index: 99;
}

.justify {
    justify-content: space-between;
}

.font {
    font-size: 16px;
    color: #28282b;
    display: block;
    padding: 0.5rem 0.5rem;
    text-decoration: none !important;
}

.padding-nav {
    padding: 8px;
}

.project-style {
    margin-top: 10px !important;
    margin-left: 10px !important;
    margin-bottom: 20px !important;
    padding: 5px !important;
    border-color: rgb(128, 128, 128) !important;
}

.nav_icon:hover {
    color: #007bff !important;
}


.footer {
    width: 100%;
    padding-right: 50px;
    padding-left: 50px;
    margin-right: auto;
    margin-left: auto;
    background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
}

:root {
    --primary: #5092e3;
    --softGrey: #9a97a8;
    --bounce: 0.2s cubic-bezier(0.3, 0.3, 0.3, 1);
    --ease: 0.12s cubic-bezier(0.3, 0.3, 0.3, 1);
    --header-height: 60px;
    --header-height-mobile: 50px;
}


#label-nav-top-left {
    --weight: 10%;
    --size: 7em;
    position: relative;
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    cursor: pointer;
}

label .hamburger {
    position: fixed;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
}

label .hamburger::before, label .hamburger .center, label .hamburger::after {
    --tx: 0;
    --rt: 0deg;
    content: "";
    position: absolute;
    width: 100%;
    height: var(--weight);
    border-radius: 0.3em;
    background: white;
    transform-origin: right;
    transition: var(--bounce) 0.1s;
}

label .hamburger .center {
    right: 0;
    transition: var(--bounce), width var(--ease);
    transition-delay: 0.3s;
}

label .hamburger::before {
    top: 0;
    transform: translate(var(--tx), 100%) rotate(var(--rt));
}

label .hamburger::after {
    bottom: 0;
    transform: translate(var(--tx), -100%) rotate(var(--rt));
}


#toggle:checked ~ label circle {
    stroke-dashoffset: 0;
    transition-delay: 0.1s;
}

#toggle:checked ~ label .hamburger::before, #toggle:checked ~ label .hamburger::after {
    --tx: -15%;
    --rt: 45deg;
    transition: var(--bounce) 0.1s;
}

#toggle:checked ~ label .hamburger::before {
    --ty: 15%;
    --rt: -45deg;
}

#toggle:checked ~ label .hamburger .center {
    width: 0;
    right: calc(var(--size) * -0.16);
    transition: width var(--ease), right var(--bounce);
}

.position-top-left {
    left: 19px;
    top: 22px;
    z-index: 99;
}

/* ---------------------- TEXT EDITOR CSS -------------------------- */

.rdw-colorpicker-modal {
    width: 275px !important;
    box-shadow: 1px 2px 5px 1px #8888 !important;
}

.rdw-colorpicker-modal-options {
    overflow-x: hidden !important;
    box-shadow: 1px 2px 5px 1px #8888 !important;
}

.rdw-link-modal {
    box-shadow: 1px 2px 5px 1px #8888 !important;
    height: 270px !important;
    width: 270px !important;
    overflow-y: auto !important;
}

.rdw-embedded-modal {
    box-shadow: 1px 2px 5px 1px #8888 !important;
    height: 220px !important;
    overflow-y: auto !important;
}

.rdw-image-modal {
    box-shadow: 1px 2px 5px 1px #8888 !important;
}


:root {
    --color-text: #616161;
    --color-text-btn: #ffffff;
    --card1-gradient-color1: #ffe138;
    --card1-gradient-color2: #ffa300;

    --card2-gradient-color1: #ffffff;
    --card2-gradient-color2: #bfc0d7;

    --card3-gradient-color1: #ff9064;
    --card3-gradient-color2: #ff5454;

    --card4-gradient-color1: #12b100;
    --card4-gradient-color2: #6fe302;

    --card5-gradient-color1: #a0e4ff;
    --card5-gradient-color2: #0064ff;

    --card6-gradient-color1: #fff902;
    --card6-gradient-color2: #45ff8b;

    --card7-gradient-color1: #f7adff;
    --card7-gradient-color2: #de53ff;

    --card8-gradient-color1: #ccebff;
    --card8-gradient-color2: #2867b2;
}

.bg-whatsapp-2 {
    background: linear-gradient(to bottom left, #006915, #72dd00);
}

.bg-base {
    background-color: #f2f7fc;
}

.service-bg {
    background: linear-gradient(to top, #0d6efd, #82b3ff)
}

.service-card-wrap:hover .service-card-title {
    color: #0a58ca;
}

.service-card-wrap {
    width: 220px !important;
    height: 400px !important;
    background: #fff;
    border-radius: 20px;
    border: 5px solid #fff;
    overflow: hidden;
    color: var(--color-text);
    box-shadow: rgba(0, 0, 0, 0.19) 0 10px 20px, rgba(0, 0, 0, 0.23) 0 6px 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.service-card-wrap:hover {
    transform: scale(1.1);
}

.service-card-header {
    height: 200px;
    width: 100%;
    background: red;
    border-radius: 100% 0 100% 0 / 0 50% 50% 100%;
    display: grid;
    place-items: center;
}

.service-card-header i {
    color: #fff;
    font-size: 72px;
}

.service-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    margin: 0 auto;
}

.service-card-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.service-card-text {
    text-align: center;
    margin-bottom: 20px;
}

.service-card-btn {
    border: none;
    padding: 5px 30px;
    color: #fff;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.green-service-btn {
    background-color: #00bb00;
}

.blue-service-btn {
    background-color: #009fff;
}

.service-card-header.service-1 {
    background: linear-gradient(
            to bottom left,
            var(--card1-gradient-color1),
            var(--card1-gradient-color2)
    );
}

.service-card-header.service-2 {
    background: linear-gradient(
            to bottom left,
            var(--card2-gradient-color1),
            var(--card2-gradient-color2)
    );
}

.service-card-header.service-3 {
    background: linear-gradient(
            to bottom left,
            var(--card3-gradient-color1),
            var(--card3-gradient-color2)
    );
}

.service-card-header.service-4 {
    background: linear-gradient(
            to bottom left,
            var(--card4-gradient-color1),
            var(--card4-gradient-color2)
    );
}

.service-card-header.service-5 {
    background: linear-gradient(
            to bottom left,
            var(--card5-gradient-color1),
            var(--card5-gradient-color2)
    );
}

.service-card-header.service-6 {
    background: linear-gradient(
            to bottom left,
            var(--card6-gradient-color1),
            var(--card6-gradient-color2)
    );
}

.service-card-header.service-7 {
    background: linear-gradient(
            to bottom left,
            var(--card7-gradient-color1),
            var(--card7-gradient-color2)
    );
}

.service-card-header.service-8 {
    background: linear-gradient(
            to bottom left,
            var(--card8-gradient-color1),
            var(--card8-gradient-color2)
    );
}

.header-height {
    height: var(--header-height);
}

@media screen and (max-width: 991px) {
    .header-height {
        height: var(--header-height-mobile);
    }
}

.page-height {
    height: calc(100vh - var(--header-height));
}

@media screen and (max-width: 991px) {
    .page-height {
        height: calc(100vh - var(--header-height-mobile));
    }
}