:root {
    --primary_col : #330187;
    --pink_col : #ED236F;
    --orange_col : #F7985F;
    --yellow_col : #FBDD7E;
    --text_col1 : #263238;
    --text_col2 : #546E7A;
    --text_col3 : #B0BEC5;
    --white : white; 
    --bd-violet-rgb: 112.520718,44.062154,249.437846;
    --bd-pink-rgb: 214,51,132;
    --bd-accent-rgb: 255,228,132;
    --bs-primary-rgb: 13,110,253;
    --bs-body-bg-rgb: 245,247,249;
}

body, html {height: 100%;}
body {background-color: #F5F7F9; padding-top: 67px; color: var(--text_col1);}
a {text-decoration: none !important}
ul, li {list-style-type: none}
:focus {outline: none}
header {background-color: white; padding: 10px 0; position: fixed; left: 0; top: 0; width: 100%; z-index: 99;}
.logo {display: block;}
.logo img {width: 200px;}

.primary_col {color: #330187;}
.pink_col {color: var(--pink_col);}
.orange_col {color: var(--orange_col);}
.yellow_col {color: var(--yellow_col);}
.text_col1 {color: var(--text_col1);}
.text_col2 {color: var(--text_col2);}
.text_col3 {color: var(--text_col3);}
.font-b {font-weight: 700 !important;}
.font-r {font-weight: 400;}
.font-l {font-weight: 300;}
.text-primary {color: var(--primary_col) !important;}
.small, small {font-size: 80%; font-weight: 400;}


.butn {border-radius: 50rem; padding: 7px 20px; font-size: 14px; font-weight: 500; display: inline-block; text-decoration: none; position: relative; transition: 0.3s all ease-in-out; overflow: hidden;}
.butn span {position: relative; z-index: 2;}
.butn:before {position: absolute; top: 0; left: 0; width: 100%; background-color: #fff; width: 0px; height: 100%; content: ""; z-index: 1; border-radius: 50rem; opacity: 0; transition: 0.3s all ease-in-out;}
.butn:hover:before {width: 100%; height: 100%; opacity: 1; transition: 0.3s all ease-in-out;}
.butn:hover {color: black !important; transition: 0.3s all ease-in-out}
.butn_secondary_outline {background-color: transparent; color: var(--text_col2); border : 1px solid var(--text_col3)}
.butn_pink {background-color: var(--pink_col); color: var(--white) !important; border : 1px solid var(--pink_col)}
.butn_primary {background-color: var(--primary_col); color: var(--white) !important; border : 1px solid var(--primary_col)}
.butn_lg {font-size: 18px;}
.butn_outline_white {color: var(--white);}
.butn_white {background: var(--white);}

.hm_sec_bg {background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 65%),radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.5), transparent 30%),radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), 0.5), transparent 30%),radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), 0.5), transparent 30%),radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), 0.5), transparent 30%);}
.hm_banner {padding: 50px 0; text-align: center; position: relative;}
.hm_banner:before, .pattern_body:before {position: absolute; content: ""; left: 3.5%; top: 15%; background: url(../images/hm_left_info.svg); width: 39px; height: 305px;}
.hm_banner:after, .pattern_body:after {position: absolute; content: ""; right: 0; top: 15%; background: url(../images/hm_right_info.svg); width: 175px; height: 382px;}
.hm_banner h1 {font-size: 60px; font-weight: bold; color: var(--primary_col);}
.hm_banner h2 {font-size: 32px; font-weight: bold; color: var(--pink_col); margin-bottom: 20px;}
.hm_banner p {font-size: 16px; color: var(--text_col2); margin-bottom: 24px;}

.grad_bg {background: rgb(51,1,135); background: linear-gradient(150deg, rgba(51,1,135,1) 0%, rgba(247,152,95,1) 100%);}

.inf_adj_val {position: relative; padding: 50px 0;}
.inf_adj_val:before {position: absolute; top: 50px; left: 0; content: ""; background: url(../images/dot_ptrn.svg); width: 111px; height: 115px; opacity: 0.4;}
.inf_adj_val:after {position: absolute; bottom: 50px; right: 0; content: ""; background: url(../images/dot_ptrn.svg); width: 111px; height: 115px; opacity: 0.4;}
.inf_adj_val h2 {color: white; font-size: 44px; font-weight: bold; margin-bottom: 0;}
.inf_adj_val h3 {color: white; font-weight: 300; margin-bottom: 30px;}
.inf_adj_val h3 b {font-weight: bold;}

.list_item {margin: 0; padding: 0;}
.list_item li {position: relative; list-style-type: none; padding-left: 20px; margin-bottom: 15px;}
.list_item li:before {position: absolute; content: ""; top: 10px; left: 0; width: 8px; height: 8px; border-radius: 50rem; background-color: var(--orange_col);}
.white_list_item li {color: white;}

.where_to_invt {position: relative; padding: 50px 0;}
.where_to_invt:before {position: absolute; top: 50px; left: 0; content: ""; background: url(../images/dot_ptrn.svg); width: 111px; height: 115px;}
.where_to_invt:after {position: absolute; bottom: 50px; right: 0; content: ""; background: url(../images/dot_ptrn.svg); width: 111px; height: 115px;}
.where_to_invt h2 {color: var(--primary_col); font-size: 44px; font-weight: bold; margin-bottom: 0px;}
.where_to_invt h3 {color: var(--pink_col); font-size: 30px; font-weight: normal;}

.com_card {background-color: white; border-radius: 10px; padding: 15px; border : 1px solid #eaeaea; box-shadow: 0px 10px 20px 0 rgb(0 0 0 / 15%);}

footer {background-color: #263238; padding: 50px 0 10px; background-color: #263238;}
.foot_hd {font-size: 18px; font-weight: bold; margin-bottom: 15px; color: white;}
.foot_para {color: rgba(255, 255, 255, 0.5); font-size: 14px;}
.foot_nav {margin: 0; padding: 0;}
.foot_nav li {list-style-type: none; margin-bottom: 2px;}
.foot_nav li a {font-size: 14px; text-decoration: none; display: block; color: rgba(255, 255, 255, 0.5);}
.foot_nav li a:hover {color: rgba(255, 255, 255, 0.75);}

.foot_social_nav {margin: 0; padding: 0;}
.foot_social_nav li {list-style-type: none; margin-right: 10px; display: inline-block;}
.foot_social_nav li a {font-size: 18px; text-decoration: none; display: block; color: rgba(255, 255, 255, 0.5);}
.foot_social_nav li a:hover {color: rgba(255, 255, 255, 0.75);}

.login {padding: 180px 0; position: relative;}
.login:before {position: absolute; content: ""; left: 5%; top: 15%; background: url(../images/hm_left_info.svg); width: 39px; height: 305px;}
.login:after {position: absolute; content: ""; right: 0; top: 15%; background: url(../images/hm_right_info.svg); width: 175px; height: 382px;}
.login_block {position: relative;}
.login_block .com_card {padding: 50px 55px; position: relative; z-index: 1;}
.pattern {position: absolute; top: -40px; left: -40px; z-index: 0; opacity: 0.5; background: url(../images/dot_ptrn.svg); width: 111px; height: 115px;}
.login_block input::placeholder {font-weight: 300;}
.login_block .login_head {position: relative; font-size: 24px; color: var(--pink_col); font-weight: bold; transition: 0.3s all ease}
.login_block .login_logo img {height: 65px}

#login_slider .login_slider_hd {font-size: 36px; font-weight: bold; color: white}
#login_slider .login_slider_caption {font-size: 16px; color: rgba(255,255,255,0.7); width: 350px; line-height: 24px}
#login_slider .owl-dots {text-align: left;}
#login_slider .owl-dots .owl-dot span {margin: 0 !important; background-color: transparent; border : 1px solid #fff;}
#login_slider .owl-dots .owl-dot {margin-right: 10px !important}
#login_slider .owl-dots .owl-dot.active span {background-color: #fff; border : 1px solid #fff;}
#Register_body {display: none}

.plan_quotes {font-weight: bold; font-style: italic; color: #263238;}
.main_hd {font-size: 36px; color: var(--primary_col); font-weight: 600;}

.aa_progress {display: table !important; width: 100%; border-radius: 50rem; overflow: hidden;}
.aa_progress .aa_progress-bar {display: table-cell !important; padding: 15px 10px; text-align: center; color: var(--text_col1); font-size: 12px;}
.aa_progress-hd {margin-bottom: -3px;}
.debt_aa {background-color: #FFEFE9;}
.equity_aa {background-color: #FFE4EC;}
.hybrid_aa {background-color: #ECE1FF;}

.question_status_bar {display: table; width: 100%;} 
.question_status_bar > div {display: table-cell; padding: 5px 10px}
.question_status_bar > div > span {display: block; background-color: #EFEFEF; border-radius: 10px; height: 3px;}
.question_status_bar > div.active_status > span {background-color: var(--orange_col);}

.question_figure_count {text-align: left;}
.question_figure_count div {display: inline-block;}
.question_current_status {font-size: 30px; color: var(--text_col1); font-weight: 700;}
.question_overall_count {color: var(--text_col2);}

.rp_question {font-size: 24px; color: var(--pink_col); font-weight: 600; margin-bottom: 20px; text-align: left;}
.question_list label {display: flex; align-items: baseline; cursor: pointer; border-radius: 5px; padding: 10px; border : 1px solid #eaeaea; margin-bottom: 10px; transition: 0.3s all ease;}
.question_list label:hover {background-color: #eaeaea; transition: 0.3s all ease;}

.goal_planning_vect_banner {position: relative; background: url(../images/goal_banner_bg.jpg) no-repeat top center; background-size: cover; height: 180px;}
.goal_planning_ban_content {background-color: white; padding: 20px 0; position: relative; z-index: 9; margin-bottom: 35px;}
.goal_icons_box {background-color: white; padding: 20px; border-radius: 50rem; margin-top: -100px;}
.xirr_hd {font-weight: 400; font-size: 14px; color: var(--text_col2);}
.xirr_val {font-weight: bold; font-size: 18px; margin-top: -3px;}
.goal_main_heading {margin-top: -90px; font-size: 36px; color: white; margin-bottom: 30px; font-weight: 600;}
.goal_label {font-size: 14px; color: var(--text_col2); line-height: normal;}
.goal_val {font-size: 24px; font-weight: bold; color: var(--text_col1); line-height: normal;}
.goal_small_val {font-size: 16px; font-weight: bold; color: var(--text_col1); line-height: normal;}
.retrake_ques {color: var(--pink_col) !important;}
.goal_planning_filter {background-color: white; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 15px;}

.result_option2 {text-align: center}
.result_option2 .shortfall_value {padding: 10px 5px; background-color: #eaeaea; display: block; border-radius: 10px 10px 0 0; font-size: 16px; font-weight: 500}  
.result_option2 .border-bottom {border-bottom: 1px dashed #dedede !important}
.result_option2 .sap_line {background-color: #ccc; margin: 8px auto}

.insufficent_amt_bg_2 .shortfall_value {background-color: rgba(255,27,0, 0.1); color: #9F291B;}
.insufficent_amt_bg_2 .shortfall_info {background-color: rgba(255,27,0, 0.04);}
.insufficent_amt_bg_2 .shortfall_info .goal_result_amt {color: #9F291B;}

.sufficent_amt_bg_2 .shortfall_value {background-color: rgba(76,175,80, 0.3); color: #218c25;}
.sufficent_amt_bg_2 .shortfall_info {background-color: rgba(76,175,80, 0.15);}
.sufficent_amt_bg_2 .shortfall_info .goal_result_amt {color: #218c25;}
.medium {font-size: 12px} 
.sap_line {margin: 10px auto; width: 25px; height: 4px; border-radius: 10px; background-color: #F27315; display: block;}
.goal_item_block {position: relative; margin-bottom: 20px; opacity: 0.85; transition: 0.3s all ease; transform: scale(0.99);}
.goal_item_block {background-color: rgba(255,255,255,0.5); border-radius: 10px; border : 1px solid rgba(0,0,0,0.05); transition: 0.3s all ease}
.goal_item_body {display: flex; align-items: center; width: 100%; padding: 0 60px 0 0; position: relative;}
.goal_items {padding: 10px 15px}
.goal_toggle_btn {text-align: center; cursor: pointer; border-left: 1px dashed #ccc; position: absolute; height: 100%; top: 0; width: 50px; right: 0}
.goal_toggle_btn i {font-size: 18px; right: 16px; color: #78909C; position: absolute; transition: 0.3s all ease; top: 50%; transform: translateY(-50%);}
.goal_item_block.active {box-shadow: 0px 5px 10px 0 rgba(0,0,0,0.10); background-color: white; transition: 0.3s all ease; border : 1px solid rgba(0,0,0,0.1); opacity: 1; transform: scale(1);}
.goal_item_block.active .goal_name {color: #003c82} 
.goal_item_block.active .goal_toggle_btn i {color: #1F49B6; transform: rotate(180deg); top: 40%; transition: 0.3s all ease}
.goal_item_body .goal_items:first-child {border-right: 1px dashed #ccc;}
.status_chart_body {position: relative; border-radius: 10px; overflow: hidden;}
.status_chart_body .status_chart {height: 90px; width: 120px}
.chart_status_hd {font-size: 11px; margin-bottom: -3px}
.chart_status_val {font-size: 16px}
.invest_target_btn {background-color: #003C82; color: white; border : 1px solid #003C82; border-radius: 5px; padding: 5px 10px; display: inline-block; transition: 0.3s all ease}
.invest_target_btn img {filter: brightness(0) invert(1); transition: 0.3s all ease}
.invest_target_btn:hover {box-shadow: 0px 5px 10px 0 rgb(0 0 0 / 15%); background-color: white; color: #003C82; border : 1px solid #eaeaea; transition: 0.3s all ease}
.invest_target_btn:hover img {filter: brightness(1) invert(0); transition: 0.3s all ease}
.goal_detail_block {padding: 20px; display: none;}
.low_high_freq {width: 100%; height: 5px; border-radius: 15px; background-image: linear-gradient(90deg,#DE2121 10%,#00E235 100%)}
.shortfall_value {display: inline-block; padding: 5px 15px; font-size: 12px; border-radius: 5rem}
.insufficent_amt_bg {background-color: rgba(255,27,0, 0.1)}
.insufficent_amt_bg .sap_line {background-color: #ccc}
.insufficent_amt_bg .goal_result_amt {color: #9F291B;}
.insufficent_amt_bg .shortfall_value {background-color: rgba(255,27,0, 0.1); color: #9F291B;}

.sufficent_amt_bg {background-color: rgba(76,175,80, 0.2)}
.sufficent_amt_bg .sap_line {background-color: #ccc}
.sufficent_amt_bg .goal_result_amt {color: #218c25;}
.sufficent_amt_bg .shortfall_value {background-color: rgba(76,175,80, 0.3); color: #218c25;}

.tips_block {background-color: lightgray; padding: 4px 7px; border-radius: 5px; display: block; color: var(--text_col1) !important; transition: 0.3s all ease;}
.tips_block b {margin-top: -5px;}
.tips_block i.tips_add {color: rgba(0,0,0,0.3);}
.tips_lumpsum {background-color: #E8F2DD;}
.tips_monthly {background-color: #FFE4EC;}
.tips_sip {background-color: #ECE1FF;}
.tips_block:hover {background-color: white; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); transition: 0.3s all ease;}
.add_value_btn {border: 1px solid #78909C; padding: 2px 6px; color: #78909C; font-size: 12px; border-radius: 50rem; text-align: center; display: block;}
.add_value_btn:hover {background: #78909C; color: white;}
.tenure_val {max-width: 50px;}
.tenure_small_val {max-width: 35px;}

.investment_overview_block {background: rgb(251 221 126 / 25%); padding: 15px; border-radius: 10px;}
.investment_table th {padding: 10px; font-size: 14px;}
.investment_table td {padding: 15px 10px; font-size: 14px;}