@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url("_vars.css");
@import url("_xxl-media-query.css");
@import url("_navbar.css");
@import url("_business-page.css");
@import url("_modal.css");
@import url("_about.css");
@import url("_expand-nav.css");
@import url("wink.css");

@font-face {
    font-family: FontAwesome;
    src: url('../fonts/fa-solid-900.ttf');
}

html, body {
    height: 100%;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    color: var(--primary);
    font-size: var(--text-regular);
    scroll-behavior: smooth;
}

#main {
    min-height: 100%;
    /*height: 1px;*/
}

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

.color-prim {
    color: var(--primary);
}

.color-prim-light {
    color: var(--primary-light);
}

.color-sec {
    color: var(--secondary);
}

.body-content{
    margin-top: 66px;
}


.btn {
    border-radius: 25px;
    padding: 10px 15px;
    min-width: 180px;
}

    .btn.btn-icon {
        min-width: 50px;
        max-width: 50px;
    }



.btn:focus {
    box-shadow: none;
}

    .btn.btn-outline-primary.focus, .btn.btn-outline-primary:focus {
        box-shadow: 0 0 0 1px var(--prim-hover);
    }

.btn-group > .btn:not(:last-child), .btn-group > .btn:not(:first-child) {
    border-right: none;
    border-left: none;
}

.btn-group > .btn:last-child {
    border-left: none;
    border-right: 1px solid var(--main);
}

.btn-group > .btn:first-child {
    border-right: none;
    border-left: 1px solid var(--main);
}

.btn.btn-main {
    color: var(--neutral) !important;
    background-color: var(--main);
    border-color: var(--main);
    font-weight: 300;
}

    .btn.btn-main:hover, .btn.btn-main:active {
        color: var(--neutral) !important;
        background-color: var(--main);
        border-color: var(--main);
        font-weight: 300;
    }

.btn-main:not(:disabled):not(.disabled).active, .btn-main:not(:disabled):not(.disabled):active, .show > .btn-main.dropdown-toggle {
    color: #fff;
    background-color: var(--main-hover);
    border-color: var(--main-hover);
}

.btn-outline-main:not(:disabled):not(.disabled).active, .btn-outline-main:not(:disabled):not(.disabled):active, .show > .btn-outline-main.dropdown-toggle {
    color: #fff;
    background-color: var(--main);
    border-color: var(--main);
}

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


.btn.btn-outline-main {
    color: var(--main);
    border-color: var(--main);
    font-weight: 300;
}

    .btn.btn-outline-main:hover, .btn.btn-outline-main:active {
        color: var(--neutral);
        background-color: var(--main-hover);
        border-color: var(--main-hover);
        font-weight: 300;
    }

.btn.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 300;
}

    .btn.btn-outline-primary:hover, .btn.btn-primary-main:active {
        color: var(--neutral);
        background-color: var(--prim-hover);
        border-color: var(--prim-hover);
        font-weight: 300;
    }

.btn.btn-outline-light {
    color: var(--neutral);
    border-color: var(--neutral);
    font-weight: 300;
}

    .btn.btn-outline-light:hover, .btn.btn-outline-light:active {
        color: var(--neutral);
        background-color: var(--prim-hover);
        border-color: var(--neutral);
        font-weight: 300;
    }

.btn.btn-primary {
    color: var(--neutral);
    background-color: var(--primary);
    border-color: var(--primary);
    font-weight: 300;
}

    .btn.btn-primary:hover {
        color: var(--neutral);
        background-color: var(--prim-hover);
        border-color: var(--prim-hover);
        font-weight: 300;
    }


.btn.btn-bright {
    color: var(--neutral);
    background-color: #7676D2;
    border-color: #7676D2;
    font-weight: 300;
}

    .btn.btn-bright:hover {
        color: var(--neutral);
        background-color: #5757bf;
        border-color: #5757bf;
        font-weight: 300;
    }


.btn-link {
    font-weight: 500;
}

.btn-link-light, .btn-link-light:hover, .btn-link-light:active {
    color: var(--neutral);
}

.btn-link-primary, .btn-link-primary:hover, .btn-link-primary:active {
    color: var(--primary);
}

.btn-link-primary-light {
    color: var(--primary-light);
}

    .btn-link-primary-light:hover, .btn-link-primary-light:active {
        color: var(--primary);
    }

.btn-link-dark, .btn-link-dark:hover, .btn-link-dark:active {
    color: var(--secondary);
}

.btn-link-main, .btn-link-main:hover, .btn-link-main:active {
    color: var(--main);
}


.link-main {
    color: var(--main);
    font-weight: 500;
}

    .link-main:hover, .link-main:active {
        color: var(--main-hover);
        text-decoration: underline;
    }


.c-input-label {
    font-size: var(--text-label);
    font-weight: 300;
}


.c-input {
    border-radius: 0;
    border-color: transparent;
    padding-left: 0;
    background: transparent;
}

.c-input-dark {
    border-bottom: 1px solid var(--primary);
    color: var(--primary);
}

.c-input-light {
    border-bottom: 1px solid var(--neutral);
    color: var(--neutral);
}

.c-input-dark:focus, .c-input-dark:hover {
    border-radius: 0;
    border-color: transparent;
    border-bottom: 1px solid var(--prim-hover);
    color: var(--prim-hover);
    padding-left: 0;
    outline: 0;
    box-shadow: none;
}

.c-input-light:focus, .c-input-light:hover {
    border-radius: 0;
    border-color: transparent;
    border-bottom: 1px solid var(--neutral);
    color: var(--neutral);
    padding-left: 0;
    outline: 0;
    box-shadow: none;
    background-color: transparent;
}

.form-control:disabled, .form-control[readonly] {
    background-color: transparent !important;
    opacity: 1;
    border-bottom: 1px solid rgb(241 239 239 / 32%);
}

.h-100 {
    height: 100%;
}

.section {
    min-height: 100%;

}

.bg-img-1 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 55%, var(--secondary) 100%), url(../images/new/home-bg-1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

.bg-img-2 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, var(--secondary) 100%), url(../images/new/home-bg-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

.bg-img-3 {
    background: url(../images/new/home-bg-3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

.bg-img-4 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 55%, var(--secondary) 100%), url(../images/new/home-bg-4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}





.dark-section {
    color: var(--neutral);
}

.bg-white {
    background-color: var(--neutral);
}

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

.bg-c-dark {
    background-color: var(--primary);
    color: var(--neutral);
}

.bg-main {
    background-color: var(--main);
    color: var(--neutral);
}


.title-large, .title-large > h1 {
    font-size: var(--title-large);
    font-weight: 600;
    line-height:unset;
}

.title-medium, .title-medium > h1, .title-medium > h2 {
    font-size: var(--title-medium);
    font-weight: 600;
    line-height: unset;
}

.title-small, .title-small > h2, .title-small > h3 {
    font-size: var(--title-small);
    font-weight: 600;
}

.subtitle {
    font-size: var(--text-large);
    font-weight: 300;
    letter-spacing: var(--letter-spacing);
}

.quote {
    font-size: calc(var(--text-large)*1.5);
    font-weight: 300;
    font-style: italic;
}


.text-small {
    font-size: var(--text-small);
    font-weight: 500;
}

.text-bold {
    font-weight: 600;
}

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

.text-highlight {
    color: var(--main);
    font-weight: 600;
    font-size: 1.6rem;
}

.text-large {
    font-size: var(--text-large);
}

.text-xxl {
    font-weight: 600;
    font-size: 4rem;
}


.bolder {
    font-weight: 800;
}

h1.bolder{
    font-weight:800;
}
.ul-unstyle > li {
    list-style: none;
}

.box-shadow {
    -webkit-box-shadow: var(--box-shadow);
    -moz-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}


.chk-list {
    line-height: 1.8rem;
    list-style-type: none;
    list-style: none;
    display: table-row;
}

    .chk-list li:before {
        font-family: FontAwesome;
        content: "\f00c";
        display: inline;
        padding-right: 10px;
        font-size: 0.8rem;
    }

.p-f-logo {
    max-width: 100px;
}

.img-50 {
    max-width: 50px;
}

.img-20 {
    max-width: 20px;
}


.ico-50 {
    font-size: 50px;
}

.contact-section {
    background-color: var(--primary);
    color: var(--neutral);
}

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


@media (min-width: 992px) {
    .p-logo {
        max-width: 220px;
    }

    .p-main-logo {
        max-width: 220px;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
        left: -50% !important;
    }
}


@media only screen and (max-width: 992px) {

   
    .title-large, .title-large > h1 {
        font-size: var(--title-mobile-large);
        /*font-weight: 600;*/
    }

    .title-medium {
        font-size: var(--title-mobile-medium);
        font-weight: 600;
    }

    .subtitle {
        font-size: var(--text-mobile-large);
        font-weight: normal;
        letter-spacing: normal;
    }

    .btn {
        border-radius: 25px;
        padding: 10px 15px;
        min-width: 150px;
    }

    .mobile-flex-center {
        display: flex;
        justify-content: center;
    }

    .text-mobile-small {
        font-size: var(--text-small);
    }

    .text-highlight {
        color: var(--main);
        font-weight: 600;
        font-size: var(--title-mobile-medium);
    }
}

.no-liststyle {
    list-style: none;
}

.card-outline-prim {
    border: 1px solid var(--primary);
}

.alert {
    width: 100%;
    position: fixed;
    z-index: 1031;
    top: 46px;
}
/*not common styles-start*/
.bounce {
    animation: bounce 3s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-6px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.invisible {
    opacity: 0
}


.book-demo-alert{
    max-width:460px;
}

.alert.book-demo-alert{
    position:relative;
    top:0;
}

ul.ul-custom{
    list-style:none;
}

    ul.ul-custom li:before {
        content: "\3E";
        color: var(--main);
        font-size: 24px;
        font-weight: 600;
    }

.cookie-notice {
    z-index: 1040;
    position: fixed;
    bottom: 0;
    background-color: var(--light-prim);
    left: 0;
    width: 100%;
}

input[type=checkbox], input[type=radio] {
    background-color: var(--primary);
    color: var(--main);
}

.msg-spin-text{
    color: var(--neutral);
}


.sub-text {
    color: #cbcbcb;
    font-style: italic;
    font-size:1.1rem;
}

.solutions-col{
    max-width:360px;
}

/*not common styles-end*/


.c-video {
    width: 100%;
    height: auto;
    box-shadow: 0 5px 10px rgba(7, 75, 123, .3);
    margin-top:-2px;
}





/*LEARNING - START*/


.bg-bright {
    background-color: #7676D2;
}

.learning-section {
    min-height: 100vh;
}

.learning-container-left {
    min-height: 80%;
    background-color: #7676D2;
    -webkit-box-shadow: 50px 50px 0px -4px var(--primary);
    box-shadow: 50px 50px 0px -4px var(--primary);
}

.learning-container-right {
    min-height: 80%;
    background-color: #7676D2;
    -webkit-box-shadow: -50px 50px 0px -4px var(--primary);
    box-shadow: -50px 50px 0px -4px var(--primary);
}

.learning-container-left-orange {
    min-height: 80%;
    background-color: #FFCDAF;
    -webkit-box-shadow: 50px 50px 0px -4px var(--main);
    box-shadow: 50px 50px 0px -4px var(--main);
}

.learning-container-right-orange {
    min-height: 80%;
    background-color: #FFCDAF;
    -webkit-box-shadow: -50px 50px 0px -4px var(--main);
    box-shadow: -50px 50px 0px -4px var(--main);
}

.color-neutral {
    color: #ffffff;
}

.color-bright {
    color: #7676D2;
}

.title-medium{
    font-size:1.4rem;
}

.title-xl {
    font-size: 2.2em;
}


.title-lg{
    font-size:1.8em;
}

.title-md {
    font-size: 1.4em;
}

.font-xl {
    font-size: 1.4em;
}

.font-md{
    font-size:1.2rem;
}


.l-banner {
    background-color: var(--main);
    -webkit-box-shadow: 15px 15px 0px -4px var(--primary);
    box-shadow: 15px 15px 0px -4px var(--primary);
    transform: skew(-20deg);
}

.l-card {
    height: 80%;
    max-width: 400px;
    background-color: white;
    -webkit-box-shadow: 15px 15px 0px -4px var(--main);
    box-shadow: 15px 15px 0px -4px var(--main);
}

.card-img {
    max-height: 180px;
}

.skw-box-light {
    background-color: #ffffff;
    -webkit-box-shadow: 15px 15px 0px -4px #7676D2;
    box-shadow: 15px 15px 0px -4px #7676D2;
    transform: skew(-10deg);
    min-height:200px;
}

.box-light {
    background-color: #ffffff;
    -webkit-box-shadow: 15px 15px 0px -4px var(--primary);
    box-shadow: 15px 15px 0px -4px var(--primary);
    min-height: 200px;
}

.box-bright {
    background-color: #7676D2;
    -webkit-box-shadow: 15px 15px 0px -4px var(--main);
    box-shadow: 15px 15px 0px -4px var(--main);
    min-height: 200px;
}

.box-main {
    background-color: var(--main);
    -webkit-box-shadow: 15px 15px 0px -4px var(--primary);
    box-shadow: 15px 15px 0px -4px var(--primary);
    min-height: 200px;
}

.box-prim {
    background-color: var(--primary);
    -webkit-box-shadow: 15px 15px 0px -4px #7676D2;
    box-shadow: 15px 15px 0px -4px #7676D2;
    min-height: 200px;
}

.title-box-main {
    background-color: var(--main);
    margin-bottom: -40px;
    display: inline-block;
    margin-left: -20px;
}


.title-box-prim {
    background-color: var(--primary);
    margin-bottom: -40px;
    display: inline-block;
    margin-left: -20px;
    min-width: 126px;
}


.title-box-bright {
    background-color: #7676D2;
    margin-bottom: -40px;
    display: inline-block;
    margin-left: -20px;
    min-width: 126px;
}

.l-acc {
    min-width: 320px;
    width: 100%;
}

.card {
    border-radius: 0;
    border:none;
}

.card-header:hover{
    cursor:pointer;
}

.card-header {
    background-color: white;
    -webkit-box-shadow: 15px 15px 0px -3px var(--primary);
    box-shadow: 15px 15px 0px -3px var(--primary);
    border-bottom:none;
}


.card-header-s {
    background-color: white;
    -webkit-box-shadow: 15px 15px 0px -3px var(--main);
    box-shadow: 15px 15px 0px -3px var(--main);
    -webkit-box-shadow: 15px 15px 0px -3px var(--primary);
    box-shadow: 15px 15px 0px -3px var(--primary);
    border-bottom: none;
    padding: 1.5rem;
    background-color: var(--main);
    color:white;
}

.mh-200-px{
    max-height:120px;
}


.font-h-1 {
    font-size: 1.8em;
    line-height: 1em;
}

.font-h-5 {
    font-size: 5em;
    line-height: 1em;
}

ul li.check{
    list-style:none;
}


.w-80{
    width:80px;
}

.border-left {
    border-left: 1px solid white;
}

@media (min-width:320px)and (max-width:481px) {
    .learning-section {
        min-height: 100vh;
        height:auto;
    }

    .font-xl {
        font-size: 1.2rem;
    }

    .font-md {
        font-size: 0.8rem;
    }

    .font-sm {
        font-size: 0.6rem;
    }

    .title-lg{
        font-size:1.2em;
    }

    .title-xl {
        font-size: 1.4em;
    }


    .skw-box-light {
        min-height: 180px;
    }
}


.host {
    display: flex;
    box-shadow: var(--box-shadow);
    padding: 4px 8px;
   background-color:#ffffff;
}