/*! Defined Color variables starts !*/
:root {
    --white: #fff;
    --black: #000;
    --link-color: #2F80ED;
    --gray-txt: #333;
    --gray-txt2: #191B21;
    --gray-txt3: #828282;
    --gray-bg1: #D0E7FF;
    --gray-bg2: #F7F5F9;
    --gray-bg3: #E9E9E9;
    --gray-brdr1: #BDBDBD;
    --gray-line: #E0E0E0;
    --btn-green: #219653;
    --btn-green-50: #90CBA9;
    --btn-darkgreen: #16703d;
    --violet-bg: #1D1534
}
/*! Defined Color variables ends !*/
/*! Common styles starts !*/
a, body, html {
    font-family: Inter,sans-serif;
    font-weight: 400;
    color: var(--gray-txt2)
}

a {
    text-decoration: none
}
.decorate {
    text-decoration: underline !important;
    color: dodgerblue;
}

.container {
    padding-right: calc(var(--bs-gutter-x) * 1);
    padding-left: calc(var(--bs-gutter-x) * 1)
}

.greybg-gradient {
    background: linear-gradient(to right,rgba(247,247,247,1),rgba(247,247,247,0))
}

.card {
    display: flex;
    width: 100%;
    border-radius: .5rem;
    background: var(--white);
    box-shadow: 0 .25rem .5rem 0 rgba(0,0,0,.15);
    padding: 1rem;
    border: 0
}

    .card > hr {
        border-top: var(--bs-border-width) solid var(--gray-line);
        opacity: 1
    }

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

.tooltip-box {
    display: inline-flex;
    align-items: center;
    width: 1.2rem;
    height: 1.2rem;
    justify-content: center;
    margin: 0 .4rem
}

    .tooltip-box img {
        width: auto;
        max-width: 100%
    }
/*! Works on Firefox !*/
* {
    scrollbar-width: thin;
    scrollbar-color: var(--btn-green) var(--gray-bg1)
}
/*! Works on Chrome, Edge, and Safari !*/
::-webkit-scrollbar {
    width: 12px
}

::-webkit-scrollbar-track {
    background: var(--gray-bg1)
}

::-webkit-scrollbar-thumb {
    background-color: var(--btn-green);
    border-radius: 20px;
    border: 3px solid var(--gray-bg1)
}
/*! Form UI Styles !*/
.form-label {
    margin-bottom: .2rem
}

.form-control {
    height: 2.8rem;
    border: .0625rem solid var(--gray-brdr1);
    padding: 0 .4rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--btn-green-50);
    border-radius: 0
}

.btn-primary {
    background-color: var(--btn-green);
    border-color: var(--btn-green)
}

    .btn-primary:hover {
        background-color: var(--btn-darkgreen);
        border-color: var(--btn-darkgreen)
    }
/*! Breadcrumbs UI Starts !*/
.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    content: var(--bs-breadcrumb-divider, ">") !important
}

.breadcrumb-item.active {
    color: var(--black) !important;
    opacity: 1;
    font-weight: 500
}
/*! Popup UI style Starts !*/
.custom-modal .modal-header {
    padding: 1.8rem 1.8rem 0 1.8rem;
    border: none
}

.custom-modal .modal-body {
    padding: 1.2rem 1.8rem 1rem 1.8rem
}

.custom-modal .modal-footer {
    padding: 0 1.8rem 1.8rem 1.8rem;
    border: none
}

.custom-modal .modal-title.section-tool-head {
    font-size: 1.6rem;
    font-weight: 700;
    margin: .5rem 0 0 0
}

    .custom-modal .modal-title.section-tool-head span {
        font-size: .8rem;
        font-weight: 500;
        display: flex;
        margin-top: .3rem
    }

.custom-modal .cust-head {
    font-size: 1rem;
    font-weight: 500
}

.custom-modal {
    width: 100%
}

    .custom-modal .cust-form .form-check {
        display: flex;
        gap: .625rem;
        align-items: center;
        margin-bottom: 1.2rem
    }

    .custom-modal .cust-form .form-check-label {
        font-size: 1rem;
        font-weight: 700
    }

        .custom-modal .cust-form .form-check-label span {
            display: flex;
            font-size: .8rem;
            font-weight: 500
        }

    .custom-modal .cust-form .form-check-input:checked[type=radio] {
        --bs-form-check-bg-image: none
    }

    .custom-modal .cust-form .form-check-input:checked {
        background-color: var(--btn-green);
        border-color: var(--btn-green)
    }

    .custom-modal .btn, .custom-modal .btn-primary {
        height: 2.8rem
    }
/*! Common styles ends !*/
/*! Main Background Images top right background Starts !*/
.fpe-mainbg, .mainbannerbg {
    background: var(--gray-bg2) url(../images/bg/banner-bg.svg) no-repeat right top;
    background-size: 205%;
    position: relative;
    /*z-index: 0;*/
    padding-bottom: 3rem
}

    .about-mainbg::before, .fpe-mainbg::before, .mainbannerbg::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 18rem;
        /*z-index: 0;*/
        background-image: linear-gradient(var(--white),rgba(217,217,217,0))
    }

    .about-mainbg section, .fpe-mainbg section, .mainbannerbg section {
        /*position: unset;*/ 
    }

.about-mainbg {
    background: var(--gray-bg2) url(../images/bg/about-bg.svg)
}
/*! Main Banner top right background Ends !*/
/*! Main Navigation Starts !*/
.navbar-brand {
    font-size: 1rem;
    line-height: 1.4rem;
    font-weight: 800;
    white-space: normal;
    display: flex;
    align-items: center
}

    .navbar-brand img {
        width: 100%;
        max-width: 4.5rem
    }

.sectionmainnav .offcanvas-header {
    width: 100%
}

.sectionmainnav .offcanvas-body {
    width: 85%
}

.sectionmainnav .btn-close {
    background-image: url(../images/close-fill-btn.svg);
    background-size: cover;
    opacity: 1;
    padding: 0;
    width: 1.8rem;
    height: 1.8rem
}

.cust-toggler.navbar-toggler {
    border-color: var(--white);
    border-radius: 4rem;
    background: #4f4f4f;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0rem
}

.cust-toggler .navbar-toggler-icon {
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")
}

.navbar-expand-lg .navbar-nav {
    color: var(--gray-txt);
    text-transform: capitalize
}

.navbar-nav .nav-link {
    color: var(--gray-txt)
}

    .navbar-nav .nav-link:hover {
        color: var(--link-color)
    }

    .navbar-nav .nav-link.active {
        color: var(--link-color);
        font-weight: 700
    }

.btn-c-main {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--white);
    background: var(--btn-green);
    border: none;
    border-radius: 2rem;
    padding: .6rem 2.2rem;
    text-transform: none
}

    .btn-c-main:hover {
        background: var(--btn-darkgreen)
    }

.user-login {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

    .user-login .user-loginlink {
        display: inline-flex;
        width: 2rem;
        height: 2rem;
        border: .0675rem solid #fff;
        color: #fff;
        border-radius: 2rem;
        padding: .2rem
    }

.user-loginlink img {
    width: 100%
}
/*! Main Navigation Ends !*/
/*! Banner Section Starts !*/
.banner-box {
    background-color: transparent
}

.caption-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1.5rem;
    position: relative
}

    .caption-box .heading {
        font-size: 2rem;
        font-weight: 800;
        line-height: 2.6rem;
        color: var(--gray-txt2);
        margin-bottom: 1rem
    }

    .caption-box p {
        color: var(--black);
        font-size: .8rem;
        font-weight: 400;
        line-height: 1.6rem
    }

.cap-btn {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    background: var(--btn-green);
    border: none;
    border-radius: 2rem;
    padding: .7rem 2.4rem;
    text-transform: uppercase
}

    .cap-btn:hover {
        background: var(--btn-darkgreen);
        color: var(--white)
    }

    .cap-btn:disabled {
        background: var(--gray-bg2);
        color: var(--gray-txt3)
    }

.main-banner-img {
    width: 100%;
    margin-top: 2rem
}
/*! Banner Section Ends !*/
.section2pi {
    background-color: transparent;
    padding: 2rem 0
}

.section-head {
    color: var(--gray-txt2);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.6rem;
    text-align: center;
    margin-bottom: 1.2rem
}

.section-caption {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 2rem
}

.card-3col-fcol, .card-3col-frow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.98);
    border-radius: 1.5rem;
    box-shadow: 0 .25rem .875rem -.125rem rgba(0,0,0,.15);
    width: 100%;
    min-height: 25rem;
    padding: 2rem 1.6rem;
    margin-bottom: 2rem
}

.card-3col-fcol {
    flex-direction: column
}

.card-3col-fcol-img {
    margin-bottom: 2rem;
    max-width: 100%;
    height:275px;
}

.card-3col-frow {
    gap: 1rem;
    min-height: 15rem
}

.card-3col-frow-img {
    width: 100%;
    max-width: 7rem
}

.card-3col-fcol h4, .card-3col-frow h4 {
    color: var(--black);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.8rem;
    text-align: center;
    margin-bottom: 1.1rem
}

.card-3col-fcol p, .card-3col-frow p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8rem;
    text-align: center
}

.sectioneaseuse {
    padding: 2rem 0;
    padding-bottom: 7rem
}

    .sectioneaseuse::before {
        content: '';
        background: url(../images/bg/wave-white-top1.svg) no-repeat center top;
        background-size: cover;
        display: block;
        width: 100%;
        height: 4rem;
        transform: translate(0rem,-3rem);
        margin-top: -3rem
    }

    .sectioneaseuse .section-head {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.4rem;
        text-align: center;
        padding: 0 1rem;
        width: 100%;
        margin: 0
    }

.sectionplanningretirement {
    background-color: var(--gray-bg1);
    padding: 2rem 0
}

    .sectionplanningretirement::before {
        content: '';
        background: url(../images/bg/wave-grey-top1.svg) no-repeat 45% top;
        background-size: 225%;
        display: block;
        width: 100%;
        height: 5rem;
        transform: translate(0rem,-4rem);
        margin-top: -3rem
    }

    .sectionplanningretirement .container {
        margin-top: -4rem;
        margin-bottom: -4rem
    }

    .sectionplanningretirement .retirementcaption {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-align: center
    }

        .sectionplanningretirement .retirementcaption h3 {
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.6rem;
            color: var(--gray-txt2);
            margin-bottom: 2.2rem
        }

        .sectionplanningretirement .retirementcaption span {
            color: var(--btn-green);
            font-size: 1.4rem
        }

    .sectionplanningretirement .retirementblock {
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: flex-start
    }

.retirementblock .blockimg {
    width: 8rem
}

    .retirementblock .blockimg img {
        width: 100%;
        max-width: 100%
    }

.retirementblock .blocktxt {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3rem;
    color: var(--black)
}

.sectionmakeiteasy {
    background-color: var(--gray-bg2);
    padding: 0 0 4rem 0
}

    .sectionmakeiteasy::before {
        content: '';
        background: url(../images/bg/wave-grey-btm1.svg) no-repeat 40% top;
        background-size: 195%;
        display: block;
        width: 100%;
        height: 8rem
    }
/*! Home - Column Section Custom card Starts !*/
.col-sec {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 9rem
}

    .col-sec h4, .col-sec p {
        text-align: left
    }

    .col-sec h4 {
        color: var(--black);
        font-size: 1.3rem;
        font-weight: 800;
        line-height: 1.8rem;
        margin-bottom: .4rem
    }

    .col-sec p {
        font-size: .85rem;
        line-height: 1.4rem;
        margin-bottom: 0rem
    }
/*! Home - Column Section Custom card Ends !*/
/*! Home - Lets get started section starts !*/
.sectionletsgetstarted {
    display: none;
    padding-bottom: 3rem
}

    .sectionletsgetstarted::before {
        content: '';
        background: url(../images/bg/wave-white-top1.svg) no-repeat center top;
        background-size: cover;
        display: block;
        width: 100%;
        height: 4rem;
        transform: translate(0rem,-2rem);
        margin-top: -1rem
    }

    .sectionletsgetstarted .mainimg {
        width: 100%
    }

    .sectionletsgetstarted .section-head {
        text-align: left
    }

    .sectionletsgetstarted .cap-btn {
        width: 100%;
        text-align: center
    }
/*! Home - Lets get started section Ends !*/
/*! Home - Custom Card starts !*/
.custom-card {
    display: flex;
    flex-direction: column;
    gap: 1.2rem
}

    .custom-card .col-left, .custom-card .col-right {
        display: flex;
        align-items: center;
        width: 100%
    }

.col-right .cap-btn {
    text-transform: capitalize
}
/*! Home - Custom Card Ends !*/
/*! Home - Join the community section Starts !*/
.sectionjoin-community {
    background-color: var(--gray-bg3);
    padding: 2rem 0
}

    .sectionjoin-community::before {
        content: '';
        background: url(../images/bg/wave-grey-btm2.svg) no-repeat left top;
        background-size: 190%;
        display: block;
        width: 100%;
        height: 5.8rem;
        transform: translate(0rem,-1.5rem);
        margin-top: -6rem
    }

.join-community-formbox {
    display: flex;
    flex-direction: column;
    max-width: 28rem
}

    .join-community-formbox .section-head {
        text-align: left;
        margin-bottom: 1.2rem
    }

    .join-community-formbox .form-label {
        font-weight: 700;
        margin-bottom: .5rem
    }

    .join-community-formbox input {
        background: var(--white);
        border: none;
        border-radius: 3.125rem;
        box-shadow: 0 .25rem .875rem -.125rem rgba(0,0,0,.15);
        height: 3rem;
        padding: .375rem 1.4rem
    }

    .join-community-formbox .cap-btn {
        text-transform: capitalize;
        float: right
    }
/*! Home - Join the community section Ends !*/
/*! Main Footer Style Starts !*/
.sectionfooter {
    background-color: var(--violet-bg);
    color: var(--white);
    padding: 2rem 0 5rem 0;
    /*position: relative*/
}

    .sectionfooter::before {
        content: '';
        background: url(../images/bg/wave-grey-btm3.svg) no-repeat left top;
        background-size: 190%;
        display: block;
        width: 100%;
        height: 5.8rem;
        transform: translate(0rem,-1.5rem);
        margin-top: -1rem
    }

.footer-links, .footer-sm-list {
    display: inline-flex;
    list-style: none;
    margin: 0;
    flex-wrap: wrap
}

.footer-links {
    padding: 1.8rem 0 .8rem 0;
    margin-bottom: 0
}

    .footer-links li {
        padding: .5rem 1rem;
        position: relative
    }

        .footer-links li::after {
            content: '/';
            color: var(--white);
            opacity: .2;
            display: inline-flex;
            position: absolute;
            right: 0
        }

        .footer-links li:last-child:after {
            display: none
        }

        .footer-links li a {
            color: var(--white);
            text-transform: uppercase
        }

.footer-sm-list {
    gap: 1rem;
    padding: .8rem 0 .8rem 0
}

    .footer-sm-list li a {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2rem;
        border: .0625rem solid rgba(255,255,255,.2);
        width: 2.5rem;
        height: 2.5rem
    }

        .footer-sm-list li a:hover {
            border: .0625rem solid rgba(255,255,255,1)
        }

.cust-foot-box {
    position: relative;
    text-align: center
}

.copyright-txt {
    display: inline-flex;
    font-size: .8rem;
    margin: 0;
    width: 100%;
    text-align: center;
    justify-content: center
}
/*! Main Footer Style Ends !*/
/*! Financial Planner Starts !*/
.no-before-bg::before {
    display: none
}

.leftfpbox {
    padding: 2rem .8rem 0rem;
    /*z-index: 1;*/
    position: relative
}

    .leftfpbox .card {
        border-radius: 1rem;
        background: var(--white);
        box-shadow: 0 .25rem .5rem 0 rgba(0,0,0,.15);
        padding: 2.2rem;
        margin: 1rem 0;
        border: 0
    }

    .leftfpbox h2 {
        color: var(--gray-txt2);
        font-size: 2rem;
        font-weight: 800;
        line-height: 2rem;
        margin-bottom: 1.6rem
    }

    .leftfpbox p {
        font-size: .8rem
    }

    .leftbox .progress, .leftfpbox .progress {
        border-radius: 1.875rem;
        background: #ebebeb;
        --bs-progress-bar-bg: var(--btn-green)
    }

.rightfpbox {
    display: flex;
    padding: 0rem 0rem 2rem 0rem;
    position: relative
}

    .rightfpbox:after {
        display: none
    }

    .rightfpbox h3 {
        color: var(--gray-txt2);
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1.2rem;
        margin-bottom: .3rem
    }

    .rightfpbox p {
        font-size: .8rem
    }

    .rightfpbox .fp-slider {
        width: 100%
    }

.fp-slider .fp-item {
    display: flex;
    width: 100%;
    padding: 0 .8rem;
    margin: 1rem 0
}

.fp-slider .card {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 30rem;
    border-radius: .5rem;
    background: var(--white);
    box-shadow: 0 .25rem .5rem 0 rgba(0,0,0,.15);
    padding: 2.2rem;
    border: 0
}

.fp-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: .8rem;
    margin-bottom: .6rem
}

.leftbox {
    width: 100%
}

    .leftbox p {
        margin-bottom: .2rem
    }

.rgtbox {
    display: flex;
    align-items: center
}

.imgbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /*max-height: 19.2rem;*/
    margin-bottom: .5rem;
    overflow: hidden
}

    .imgbox img {
        height: 14rem;
        /*max-height: 100%*/
    }

.rgtbox input {
    width: 7rem;
    height: 2.8rem;
    text-align: center;
    padding: 0 .4rem;
    font-weight: 600;
    color: var(--btn-green-50)
}

.fp-btn-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

    .fp-btn-group .cap-btn {
        padding: .5rem 1rem;
        font-size: .8rem;
        font-weight: 500;
        text-transform: capitalize
    }

.cust-progress-box {
    display: flex;
    gap: .4rem;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center
}

.cust-slider {
    -webkit-appearance: none;
    width: 100%;
    background: 0 0
}

.cust-slider-caption {
    font-size: .7rem;
    font-weight: 600
}

.cust-slider:focus {
    outline: 0
}

.cust-slider::-webkit-slider-runnable-track {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    margin: 0;
    width: 100%;
    cursor: pointer;
    background: var(--btn-green);
    background: linear-gradient(to bottom right,transparent 50%,var(--btn-green) 50%)
}

.cust-slider::-moz-range-track {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    margin: 0;
    width: 100%;
    cursor: pointer;
    background: var(--btn-green);
    background: linear-gradient(to bottom right,transparent 50%,var(--btn-green) 50%)
}

.cust-slider::-ms-track {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    margin: 0;
    width: 100%;
    cursor: pointer;
    color: transparent;
    background: var(--btn-green);
    border: 0;
    background: linear-gradient(to bottom right,transparent 50%,var(--btn-green) 50%)
}

.cust-slider::-ms-fill-lower {
    background: 0 0
}

.cust-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1rem;
    width: 1rem;
    background: var(--white);
    border: .0625rem solid var(--btn-green);
    border-radius: 1rem;
    cursor: pointer;
    margin-top: 1.4rem
}

.cust-slider::-moz-range-thumb {
    -webkit-appearance: none;
    height: 1rem;
    width: 1rem;
    background: var(--white);
    border: .0625rem solid var(--btn-green);
    border-radius: 1rem;
    cursor: pointer;
    margin-top: 1.4rem
}

.cust-slider::-ms-thumb {
    -webkit-appearance: none;
    height: 1rem;
    width: 1rem;
    background: var(--white);
    border: .0625rem solid var(--btn-green);
    border-radius: 1rem;
    cursor: pointer;
    margin-top: 1.4rem
}
/*! Financial Planner Ends !*/
/*! Financial Planner Detail page style Starts !*/
.fin-tool-box .cap-btn {
    text-transform: capitalize;
    width: 100%;
    position: relative
}

/*.top-video-box {
    display: none
}*/

.video-card {
    display: flex;
    /*align-items: center;
    justify-content: center;
    flex-direction: row;*/
    gap: 2rem;
    padding: 1.5rem
}

    .video-card img {
        max-width: 2rem
    }

    .video-card h3 {
        font-size: 1.75rem;
        font-weight: 500;
        line-height: 2.6rem;
        margin-bottom: 0rem
    }

.section-tool-head {
    color: var(--gray-txt2);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.4rem;
    margin: .5rem 0 1.2rem 0
}

.section-tool-subhead {
    display: flex;
    align-items: center;
    color: var(--gray-txt2);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1rem;
    margin: .5rem 0 1.2rem 0
}
/*! Price UI starts !*/
.cust-input-group {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%
}

.icon-shape {
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: var(--btn-green);
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50% !important;
    background: 0 0;
    border: .0825rem solid var(--btn-green);
    font-size: 1.4rem;
    line-height: 1rem
}

.cust-input-group .quantity-field {
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0 .2rem;
    width: 100%;
    max-width: 3.5rem;
    text-align: center
}
.cust-input-group .quantity-field-year {
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0 .2rem;
    width: 100%;
    max-width: 5rem;
    text-align: center
}

.cust-input-group .cust-label {
    font-weight: 500;
    padding: 0 .3rem
}
/*! Price UI ends !*/
.range-wrap {
    display: flex;
    position: relative;
    width: 100%;
    margin: 0
}

    .range-wrap .bubble {
        border: .0675rem solid var(--btn-green);
        color: var(--btn-green);
        min-width: 2.5rem;
        padding: .375rem .5rem;
        text-align: center;
        position: absolute;
        border-radius: .5rem;
        font-size: .7rem;
        line-height: .7rem;
        font-weight: 600;
        top: -2rem;
        left: 50%;
        transform: translateX(-50%)
    }

        .range-wrap .bubble::after {
            content: "";
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--btn-green);
            top: -1px;
            left: 50%
        }

.simple-range {
    --c: var(--btn-green); /*! active color !*/
    --l: 0.375rem; /*! line thickness !*/
    --h: 1.25rem; /*! thumb height !*/
    --w: 1.25rem; /*! thumb width !*/
    width: 100%;
    height: var(--h);
    --_c: color-mix(in srgb, var(--c), #000 var(--p,0%));
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: 0 0;
    cursor: pointer;
    overflow: hidden
}

    .simple-range:focus-visible, .simple-range:hover {
        --p: 25%
    }
    /*! chromium !*/
    .simple-range[type=range i]::-webkit-slider-thumb {
        height: var(--h);
        width: var(--w);
        background: var(--_c);
        border-radius: 50%;
        border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 1/0 100vw/0 100vw;
        clip-path: polygon(0 calc(50% + var(--l)/ 2),-100vw calc(50% + var(--l)/ 2),-100vw calc(50% - var(--l)/ 2),0 calc(50% - var(--l)/ 2),0 0,100% 0,100% calc(50% - var(--l)/ 2),100vw calc(50% - var(--l)/ 2),100vw calc(50% + var(--l)/ 2),100% calc(50% + var(--l)/ 2),100% 100%,0 100%);
        -webkit-appearance: none;
        appearance: none;
        transition: .3s
    }
    /*! Firefox !*/
    .simple-range[type=range]::-moz-range-thumb {
        height: var(--h);
        width: var(--w);
        background: var(--_c);
        border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 1/0 100vw/0 100vw;
        clip-path: polygon(0 calc(50% + var(--l)/ 2),-100vw calc(50% + var(--l)/ 2),-100vw calc(50% - var(--l)/ 2),0 calc(50% - var(--l)/ 2),0 0,100% 0,100% calc(50% - var(--l)/ 2),100vw calc(50% - var(--l)/ 2),100vw calc(50% + var(--l)/ 2),100% calc(50% + var(--l)/ 2),100% 100%,0 100%);
        -webkit-appearance: none;
        appearance: none;
        transition: .3s
    }

@supports not (color:color-mix(in srgb,var(--btn-green),var(--btn-green))) {
    .simple-range {
        --_c: var(--c)
    }
}

.cust-sm-label {
    font-size: .8rem;
    font-weight: 500
}

.cust-value {
    font-size: 1.3rem;
    font-weight: 700;
    padding: .2rem 0;
    width: 100%
}
/*! General Caption section Starts !*/
.general-caption {
    position: relative;
    padding: 2rem 0;
    /*z-index: 9999 !important;*/
}

    .general-caption p {
        font-size: .7rem;
        text-align: center;
        margin-bottom: .7rem
    }
/*! Financial Planner Detail page style Ends !*/
/*! About Page Style Starts !*/
.about-brand-logo {
    width: 100%;
    max-width: 6.25rem;
    margin: 1.2rem auto
}

    .about-brand-logo img {
        width: 100%
    }

.about-card {
    height: 100%
}

    .about-card .section-head {
        text-align: left;
        margin-top: .4rem;
        margin-bottom: .8rem
    }

    .about-card .cap-btn {
        display: inline-flex;
        margin-top: .4rem;
        margin-bottom: .8rem
    }

.testimonial-btm {
    height: 100%;
    max-height: 13rem;
    overflow: auto
}

    .testimonial-btm p {
        font-size: .8rem;
        line-height: 1.2rem;
        font-weight: 500
    }
/*! About Page Style Ends !*/
/*! Blog Page Style Starts !*/
.blog-card .cust-head {
    color: var(--black);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.8rem;
    margin-bottom: .4rem
}

.blog-card .time_date {
    color: var(--btn-darkgreen);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2rem;
    margin-bottom: 1rem !important
}
.time_date a {
    text-decoration: underline !important;
    color: var(--btn-darkgreen);
}

.blog-card p {
    color: var(--gray-txt2);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2rem
}

.blog-card .more-link {
    color: var(--btn-darkgreen);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2rem;
    text-transform: uppercase
}

.blog_joinourcommunity .form-label {
    font-weight: 700;
    margin-bottom: .5rem
}

.blog_joinourcommunity input {
    background: var(--white);
    border: none;
    border-radius: 3.125rem;
    box-shadow: 0 .25rem .875rem -.125rem rgba(0,0,0,.15);
    height: 3rem;
    padding: .375rem 1.4rem
}

.blog_joinourcommunity .btn.cap-btn {
    height: 3rem;
    margin-top: 2rem
}

.cust-pagination a.page-link {
    color: var(--gray-txt2);
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2rem;
    border: none;
    background: 0 0
}

.cust-pagination ul.pagination.pagination-sm {
    display: flex;
    justify-content: center
}

.cust-pagination a.page-link.next {
    flex-wrap: nowrap
}
/*! Blog Page Style Ends !*/


/* The Modal (background) */
.twopimodal {
    display: none;
    position: fixed;
    z-index: 999999 !important;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

/* Modal Content */
.twopimodal-content {
    background-color: #fefefe;
    border-radius: .5rem;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
}

#KeepLogin {
    height: unset !important;
}

/*! Below CSS specially used for fold phones portrait size eg: samsung fold !*/
@media (max-width:300px) {
    .cust-toggler.navbar-toggler {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem
    }

    .cust-toggler .navbar-toggler-icon {
        width: 1rem;
        height: 1rem
    }

    .navbar-brand img {
        max-width: 2.5rem
    }

    .navbar-brand {
        font-size: .7rem;
        line-height: 1rem
    }

    .card-3col-frow {
        align-items: center;
        flex-direction: column;
        text-align: center
    }

    .col-sec h4 {
        width: 100%
    }

    .col-sec h4, .col-sec p {
        text-align: center
    }
    .twopimodal-content {
        width: 90%;
    }
}
/*! Below CSS specially used for screens above tab portrait size !*/
@media (min-width:992px) {
    .about-mainbg, .fpe-mainbg, .mainbannerbg {
        background: var(--gray-bg2) url(../images/bg/banner-bg.svg) no-repeat right top;
        background-size: contain;
        padding-bottom: 7rem
    }

        .about-mainbg::before, .mainbannerbg::before {
            display: none
        }

    .about-mainbg {
        background: var(--gray-bg2) url(../images/bg/about-bg.svg) no-repeat top
    }

    .fpe-mainbg {
        padding-bottom: 1rem
    }

        .fpe-mainbg::before {
            background: url(../images/bg/financial-planner-detail-btm-bg.svg) no-repeat right top;
            bottom: 0;
            height: 45rem
        }

    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        font-size: .8rem;
        font-weight: 500;
        box-shadow: 0 .25rem .5rem 0 rgba(0,0,0,.12);
        background: var(--white);
        border-radius: 1.375rem;
        padding: 0 .9rem
    }

        .navbar-expand-lg .navbar-nav + .navbar-nav {
            margin-left: 1.5rem
        }

    .navbar-brand {
        font-size: 1.4rem;
        font-weight: 800
    }

        .navbar-brand img {
            width: 100%;
            max-width: 6.25rem
        }

    .navbar-expand-lg .navbar-nav {
        text-transform: uppercase
    }

    .user-login {
        margin-left: 1rem
    }

    .sectionmainnav .offcanvas-body {
        width: 100%
    }

    .btn-c-main {
        font-size: .8rem;
        font-weight: 700;
        color: var(--link-color);
        background: 0 0;
        border: none;
        padding: .5rem .75rem
    }

        .btn-c-main:hover {
            background: 0 0
        }

    .banner-box {
        padding-top: 2rem
    }

    .main-banner-img {
        margin-top: 0rem
    }

    .caption-box {
        margin-right: 3rem;
        margin-top: auto
    }

        .caption-box .heading {
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 3rem;
            margin-bottom: 1.1rem
        }

        .caption-box p {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.8rem
        }

    .section-head {
        font-size: 1.75rem;
        line-height: 2.6rem;
        margin-bottom: 1.8rem
    }

    .sectioneaseuse {
        padding-bottom: 19rem
    }

        .sectioneaseuse::before {
            background: url(../images/bg/wave-white-top1.svg) no-repeat center top;
            background-size: cover;
            height: 8rem;
            transform: translate(0rem,-2rem);
            margin-top: -8rem
        }

        .sectioneaseuse .section-head {
            font-size: 1.4rem;
            line-height: 2.4rem;
            padding: 0 5rem;
            max-width: 58rem;
            margin: auto
        }

    .sectionplanningretirement .retirementcaption {
        justify-content: flex-start
    }

    .card-3col-fcol, .card-3col-frow {
        margin-bottom: 0rem
    }

    .card-3col-frow {
        min-height: 13.8rem;
        padding: 1.2rem 1.6rem
    }

    .retirementblock .blockimg {
        width: 11rem
    }

    .retirementblock .blocktxt {
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 2.4rem;
        color: var(--black)
    }

    .sectionplanningretirement::before {
        background: url(../images/bg/wave-grey-top1.svg) no-repeat center top;
        background-size: cover;
        height: 16rem;
        margin-top: -14rem;
        position: absolute
    }

    .sectionplanningretirement .container {
        margin-top: -8rem;
        margin-bottom: -5rem;
        /*z-index: 1;*/
        position: relative
    }

    .sectionplanningretirement .retirementcaption h3 {
        font-size: 2.5rem;
        line-height: 3.5rem;
        margin-bottom: 0rem
    }

    .sectionplanningretirement .retirementcaption span {
        font-size: 3rem
    }

    .sectionmakeiteasy {
        padding: 0 0 10rem 0
    }

        .sectionmakeiteasy::before {
            background: url(../images/bg/wave-grey-btm1.svg) no-repeat center top;
            background-size: contain;
            height: 14rem
        }

    .sectionletsgetstarted {
        display: flex;
        flex-direction: column;
        padding: 0 0 6rem 0
    }

        .sectionletsgetstarted::before {
            background: url(../images/bg/wave-white-top1.svg) no-repeat center top;
            background-size: cover;
            height: 8rem;
            margin-top: -8rem;
            transform: translate(0rem,0rem)
        }

        .sectionletsgetstarted .cap-btn {
            width: auto;
            text-align: center
        }

    .custom-card {
        flex-direction: row;
        gap: 2rem;
        max-width: 58rem;
        margin: auto
    }

        .custom-card .col-left {
            max-width: 24rem
        }

    .sectionjoin-community::before {
        background: url(../images/bg/wave-grey-btm2.svg) no-repeat center top;
        background-size: cover;
        height: 10rem;
        margin-top: -8rem;
        transform: translate(0rem,-4rem)
    }

    .sectionfooter {
        padding: 9rem 0 3rem 0
    }

        .sectionfooter::before {
            background: url(../images/bg/wave-grey-btm3.svg) no-repeat center top;
            background-size: cover;
            height: 9rem;
            margin-top: -8rem;
            transform: translate(0rem,-1rem)
        }

    .footer-links {
        padding: 4rem 0 1.5rem 0
    }

    .footer-sm-list {
        padding: 1.5rem 0 2.5rem 0
    }

    .footer-links li {
        padding: .5rem 2rem
    }

    .cust-foot-box {
        text-align: unset
    }

    .copyright-txt {
        width: auto;
        text-align: right;
        white-space: nowrap;
        justify-content: end;
        position: absolute;
        right: 5%
    }

    .leftfpbox {
        display: flex;
        align-items: center;
        height: 100%;
        background: rgba(247,247,247,1);
        padding: 2rem 0 2rem 2rem
    }

        .leftfpbox h2 {
            font-size: 3rem;
            line-height: 3rem
        }

    .fp-btn-group .cap-btn {
        padding: .5rem 2rem
    }

    .rightfpbox {
        margin-left: -1rem;
        padding: 2rem 0rem;
        margin-right: -.72rem
    }

        .rightfpbox:after {
            content: '';
            display: flex;
            width: 8rem;
            height: 100%;
            background: linear-gradient(to right,rgba(247,247,247,1),rgba(247,247,247,0));
            position: absolute;
            left: -.5rem;
            top: 0
        }

    .top-video-box {
        display: block
    }
    .video-card {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 2rem;
        padding: 1.5rem
    }
    .section-tool-subhead {
        margin: 1.8rem 0 1.8rem 0
    }
    .twopimodal-content {
        width: 45%;
    }
    .moneygoes {
        height: 280px;
    }
    .simulator-performance {
        height: 155px;
    }

}





@keyframes shine {
     to {
        background-position: 100% 0, /* move highlight to right */ 0 0;
    }
}

.skeleton-loader:empty {
    width: 100%;
    min-height: 15px;
    max-height:100%;
    display: block;
    background: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ), lightgray;
    background-repeat: repeat-y;
    background-size: 50px 500px;
    background-position: 0 0;
    animation: shine 1s infinite;
}


#chart2 {
    /*height: 350px !important;*/
}

#chart1 {
    height: 500px !important;
}
.explanations {
    padding-top: 2.5rem;
}
.explanations p {
    text-align: left !important;
}
.explanation-link {
    color: #2F80ED;
    font-size: 1.4rem !important;
}

.tooltip-inner {
    min-width: 300px;
}