:root {
--primary-color: #1795D3;
--text-box-background:#F5F7FA;
/*--text-box-background: #e3f1f7;
    background: #fafafa;
    border: 1px solid #e4e4e4;*/
--text-box-border:#E4EDF1;
--text-font:'SFUIText', sans-serif;/*text*/
--text-color:#80878A;/*grey*/
--grey-color:#80878A;/*grey*/
--heading-font:'SFUIDisplayRegular', sans-serif;/*headings*/
--heading-color:#00ADCC;/*sky blue*/
--blue-text:#00ADCC;
--green-text:#08879B;/*green-black*/
--black-text:#333;
  --accent-color: #00ADCC;
    --border-color: #E4EDF1;
    --overlay-bg: rgba(0, 0, 0, 0.6);
}
@font-face {
font-family: 'SFUIDisplayRegular';
src: url('../fonts/sf-ui-display/SF-UI-Display-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

@font-face {
    font-family: "SFUIText";
    src: url("../fonts/sf-ui-text/SFUIText-Regular.woff") format("woff"),
         url("../fonts/sf-ui-text/SFUIText-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
font-family: 'AlibabaPuHuiTi';
src: url('../fonts/alibaba-puhuiti/Alibaba-PuHuiTi-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

/* common styles for all tags */
* {
margin: 0;
padding: 0;
}
html, body, div, button, input { box-sizing: border-box; }
@media (max-width: 768px) {
  html {
    font-size: 90%; /* or any smaller percentage */
  }
}

html, body {

margin: 0;
padding: 0;

}
body {
overflow-x: hidden;
font-family: var(--text-font);
background: #FCFDFD;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
position: relative;
min-height: 100vh;
display: flex;
font-weight:400;
flex-direction: column;
justify-content:center;
font-size:1rem;

}
main {
    flex: 1; /* This allows the main content to expand and take the available space */
}
/*custom scrollbar*/
::-webkit-scrollbar {
width: 6px;
}

::-webkit-scrollbar-track {
 background-color: rgba(0,0,0,0.05);
}

::-webkit-scrollbar-thumb {
 background-color: rgba(0,0,0,0.2);
}

/*::-webkit-scrollbar-thumb:hover {
 background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}*/

/* Apply custom scrollbar to all elements */
* {
scrollbar-width: thin;

}
.btn {
    font-family: var(--heading-font);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    justify-content: center;
    border-radius: 1.75rem;

    /*display: inline-flex;  Changed from inline-block to inline-flex for proper flex behavior */
    align-items: center;
    color: #FFFFFF;
    font-size: 1rem;
    letter-spacing:0.06em;
     border: none;
    padding: 8px 16px;
    transition: background-color 0.2s


}
.btn-remove{  border-radius:0;color:red;}
.btn-normal {
      padding: 0.8125rem 1.875rem;
}

.btn-background {
    background: linear-gradient(124.68deg, #26D9CA 16.58%, #1795D3 63.53%);
    box-shadow: 0px 4px 16px 0px #008AA652;
}

.btn-background:hover {
    opacity: 1;
    color:var(--black-text);
    font-weight: 500;
}

/* Media query for responsiveness
@media (max-width: 992px) {
    .btn-normal {
        padding: 8px 10px;
    }
}
*/

.btn-background:active {
transform: translateY(2px);
box-shadow: 0px 4px 1rem rgba(0, 0, 0, 0.1);
}

.btn-none {
color:#066774;
border: 1px solid #CEDEE4;
background:#FAFEFF;
}
.btn-google-login{padding:1rem 72px 1rem 72px;font-size:14px;}
.btn-link{ font-weight:500;text-decoration:none;width:214px;}
.btn-login{padding:1rem 112px 1rem 112px;}
.btn-none:hover {
background: rgba(23, 149, 211, 0.1);
box-shadow: 0px 4px 1rem rgba(0, 0, 0, 0.1);
}

.btn-none:active {
transform: translateY(2px);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.btn-icon {
margin-right: 8px;
}
.btn-small{font-size:0.825rem;
padding: 8px 15px;
}
.btn-previous,.btn-next{cursor:pointer;}
.btnouter{width:100%; text-align: center; padding-bottom: 25px;padding-top:20px;}
.btndisplay{display: inline-block; position: relative; padding: 5px;}
.btn-blue-text{font-size:14px;}
/* Center the button within its container */
.center {
text-align: center;
}

.bg-blue{background-color: #f0f2f5;}
.bg-pink{background:rgba(255, 240, 242, 1);}
/* input and modal box */
/* text box alignment */
::-webkit-input-placeholder {
color:#407277 !important;
font-size: 14px;
}
:-moz-placeholder {
/* Firefox 18- */
color:#407277 ;
font-size: 14px;

}
::-moz-placeholder {
/* Firefox 19+ */
color:#407277;
font-size: 14px;

}
:-ms-input-placeholder {
color:#407277 ;
font-size: 14px;

 }
 /*for disapearing placeholder on form floating*/
.form-floating input::placeholder {
    color: transparent; /* Makes the placeholder text invisible */
    opacity: 0; /* Ensures it doesn't occupy space */
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select ,.input-group > .form-floating > .form-control{
height: 48px;
padding-top: 1.5rem;
}

/* Adjust the label position */
.form-floating > label {
padding-left: 0.75rem;
color: #407277 !important; /* Force the label color */;
font-family:var(--text-font);
font-size: 14px;
font-weight: 400;
text-align: left;
}
/*.form-floating > .form-select ~ label{opacity:0;}*/
.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
{
    top: -1.5rem;
    left:2rem;
    font-size: 0.5rem;
    opacity: 1;
    background:none;
    line-height: 1rem;
    padding: 1em 0.75rem;
}

.input-group-text {
 /*height: 48px; Ensure the height of the text elements matches*/
 /*line-height: 36px; Vertically center the text */
color:#407277;
font-family:var(--text-font);
font-size:14px;
}
/* Adjust the label position */
.form-floating > label {
    padding-left: 0.75rem;
    color: #407277 !important;
    font-family: var(--text-font);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}


/* Ensure floating label doesn't overlap the input-group */
.form-floating .input-group > .form-control {
    padding-left: 2.5rem; /* Adjust to account for the dollar symbol */
}
.form-floating .input-group-text {

    z-index: 3;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;

}
/* Ensure select and input fields fill the container */
.form-select, .form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    height: auto; /* Allow the element to resize based on content */
}



/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .form-floating > label {
        font-size: 12px; /* Reduce label font size for mobile */
          padding-left: 0.75rem;

     white-space: normal; /* Allow the label to wrap */
    word-wrap: break-word; /* Ensure long words break onto the next line */
    overflow-wrap: break-word; /* More control for word breaking */
    max-width: 100%; /* Prevent label from exceeding input width */
    }

    .form-floating .form-control {
        font-size: 12px; /* Reduce input font size for mobile */
    }

    .input-group-text {
        font-size: 12px; /* Adjust font size of the dollar sign and "monthly" */
        padding: 0.4rem 0.5rem; /* Reduce padding for smaller screens */
    }

    .form-floating {
        min-height: 50px; /* Reduce height of form-floating container */
    }
}

/* General styling for select elements */
.select {
outline: transparent;
background: var(--text-box-background);
border: 1px solid var(--text-box-border);
border-radius: 4px;
color: var(--black-text);
font-size: 14px;
font-weight:400;
height: 48px;
font-family:var(--text-font);
appearance: none; /* Ensure the default arrow appears */
-webkit-appearance: none; /* Safari and Chrome */
-moz-appearance: none; /* Firefox */
padding-right: 30px; /* Space for the arrow */
/* Reapply the custom arrow after setting the background */
background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 24 24%22%3E%3Cpath fill%3D%22currentColor%22 d%3D%22M12 15.41l-7.41-7.41 1.41-1.41 6 6 6-6 1.41 1.41z%22%2F%3E%3C%2Fsvg%3E');
background-position: right 10px center;
background-repeat: no-repeat;
}

.select:focus {
background-color: transparent;
}
/* Placeholder styling
.select option:first-child {
color:var(--text-color);
}*/

/* Selected first child */
.select option:first-child:selected {
color:var(--text-color); /* Change to your desired color */
}

/* Label styling */
label {
font-family:var(--text-font);
color: var(--green-text);
font-size: 1rem;
font-weight:400;
padding:10px 0px;
}
.form-floating .small-label {
font-size: 1rem;  /* Adjust the size as needed */
}

input[type=text], input[type=password],input[type=email],input[type=file],.input-class,
.address,input[type=number],.textarea,input[type=url]{
outline: transparent;
background:var(--text-box-background);
border: 1px solid var(--text-box-border);
border-radius: 4px;
color:#000000;
font-size: 0.875rem;
height: 48px;
width:100%;
font-family:var(--text-font);
/*max-width:342px;*/
box-sizing: border-box;

}
 input[type=text]::first-letter {
        text-transform: uppercase;
    }
input:focus {
    border: 2px solid #00ADCC;
    outline: none;
}
/*to hide the arrows in the number field*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;

}

.form-group{margin:22px 0px;}
.textarea{height:100px;}
.search-bar {
width: 100%;
}
.hidden {
display: none;
}
/* code input container for creating 6 input boxes for getting phone number verification codes*/
.code-input-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}
.code-input {
    width: 20px;
    height: 30px;
    text-align: center;
    font-size: 24px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}
.code-input:focus {
    border: 2px solid #00ADCC;
    outline: none;
}

/* code input container for creating 6 input boxes for getting phone number verification codes end*/
/*.border-left{border-left: 1px solid var(--text-box-border); height:100%;}*/

.forgot-password{ font-family: 'AlibabaPuHuiTi';
font-size: 12px;
font-weight: 400;
line-height: 12px;
}
/*radio button css*/
.radio-option {
height: 48px;
align-items: center;
border-radius: 4px;
display: flex; /* Add this line */
background:var(--text-box-background);
padding: 0 10px;
}

.radio-option:focus-within {
background-color: transparent;
border: 1px solid var(--text-box-border);
}

.radio-option input[type="radio"] {
margin-right: 10px;
}

.is-invalid {
border-color: #dc3545;
}

.is-invalid + .invalid-feedback {
display: block;
}
#add-income-btn,#spouse-add-income-btn {

cursor:pointer;
color:var(--green-text);
}
#income-details-table th,#spouse-income-details-table th{
font-family:var(--text-font);
font-size: 0.875rem;
font-weight: 400;
line-height: 0.875rem;

color:var(--green-text);
}

/* textbox alignment end */
.modal {
display: none; /* Hidden by default */
z-index: 10001;/* Sit on top */
transition: 200ms;
justify-content: center;
overflow:auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
cursor: pointer;
border-radius:0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: 0.5s;
border:1px solid #E4EDF1;
}
.modal-header {
justify-content: space-between;
width: 100%;
border-bottom: 1px solid #F1F3F4;
}

/*.modal-header .brand-name {color: var(--yellow);} */

.modal-content {
color:var(--text-color);
overflow:auto;
background:white;
margin: 3% auto 13% auto; /* 3% from the top, 13% from the bottom and
centered */
/*align-items: center;*/
border-radius:0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: 0.5s;
border:1px solid #E4EDF1;
justify-content: center;
width: 50%;  /*Could be more or less, depending on screen size */
}
.modal-title{color:var(--blue-text);}
.modal-box{
position: fixed; /* Stay in place  for alert*/
z-index: 10001!important;/* Sit on top */
left: 0;
top:0;
justify-content: center;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow:auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* The Modal (background) login overlay*/
/* .modal-body{background-color:#f0f0f0;
color:white;} */
/* .modal-header{background-color: var(--heading-blue);
color: var(--white);} */

@media only screen and (max-width: 600px) {
.modal-content {
width: 90%;
margin: 13% auto;
}
}

/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
color:red;
font-size: 35px;
font-weight: bold;
}


.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
.custom-close:hover {
    background-color: darkred;
}

.custom-close:hover::before {
    color: yellow;
}


/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.password {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}

/* input and modal box  end*/

/*password eye icon*/
@media only screen and (min-width: 926px) {
.password-container {
position: relative;
/*margin:0 auto;
max-width: 300px;*/
width: 100%;

}
}
.password-container {
position: relative;
width: 100%;

}

.eye-icon {
position: absolute;
top: 50%;
right: 0px;
padding-right:10px;
font-size:10px;
transform: translateY(-50%);
cursor:pointer;
}
/* Styling for the password requirements */
#password-requirements {
font-size: 0.875rem;
color: #dc3545;
}
.alert-text{
margin:20px;
font-weight:500;
font-size:1rem;
font-family: var(--text-font);}
.alert-error {
    color: #d9534f; /* Red */
}
.alert-info {
    color: #0D47A1; /* Blue */
}

.alert-success {
    color:#1B5E20; /* Green */
}
.alert-waring{ color: #F57F17;}
.alert-error{color: #B71C1C;}
#password-requirements .valid {
color: #28a745;
}

#password-requirements .invalid {
color: #dc3545;
}

.light-text-color{
color:#b6c7d6;
}

.small-text{
font-family:var(--text-font);
font-size: clamp(0.625rem, 1vw, 0.75rem);
/*line-height:12px;*/
font-weight: 400;
color:#666;
letter-spacing:0.06em;
/*margin-bottom: 24px;
margin: 1.6rem 0 0; */
}
.add-account-text{
font-family:var(--text-font);
color:#666;
font-size: 12px;
font-weight: 400;
/*line-height: 28px;*/
text-align: left;
}
a{
text-decoration: none;
background-color: transparent;
color:var(--blue-text);
}
.heading{
color:var(--green-text);
font-weight:600;
/*font-size: 25px;*/
font-size: 1.5625rem;

font-family:var(--heading-font);
/*line-height: 32px;*/
/*text-align: left;*/
}
.small-heading{color:#2c3e50;
font-weight:400;
font-size:1.25rem;
font-family:var(--heading-font);
line-height: 32px;
margin-bottom: 1rem;

}
.blue-heading{
color:var(--heading-color);
font-weight:300;
font-size:28px;
/*line-height: 28px;*/
margin:28px 0px;
/*padding:0px 0px 0px 0px;*/
font-family:var(--heading-font);
}

.font-14{font-size:0.875rem;}
.font-18{font-size:18px;}
.font-12{font-size:12px;}
.blue-text{
color:var(--blue-text);
text-decoration: none;
}
.light-text-color{
color:#b6c7d6;
}

.black-text{color:var(--black-text);}
p {
color: var(--text-color);
letter-spacing: 0.06em;
font-size: 1rem; /* Equivalent to 16px */
line-height: 1.6; /* Ensures good readability with appropriate spacing */
/*margin: 1em 0;  Adds spacing above and below the paragraph */
font-family:var(--text-font);
/*margin-bottom: 24px;
margin: 1.6rem 0 0; */

}
.terms{color: var(--text-color);
font-size: 1rem;
font-weight: 400;
font-family:var(--text-font);}
h1,
h2,
h3,h4,h5,h6
{
font-family:var(--heading-font);
line-height: 1.3;
color:var(--green-text);
font-weight:500;
letter-spacing: 0.04em;
/*margin: 1rem 0 2rem;
padding:1rem 0px 1rem 0px;*/
/*margin-bottom: 1rem;*/

transition: color 0.3s ease;
}
.add-account ul{
font-family:var(--text-font);
color:var(--green-text);
font-size: 0.875rem;
font-weight: 500;
text-align: left;
padding:20px;
}

.justify-text {
    text-align: justify;
}
/*** Spinner ***/

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/* *************************** */
/* custom nav-bar designs*/

.navbar {
background: #FCFDFD;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: 0.5s;
}
/*** Navbar ***/
.navbar-light.sticky-top {
    top: 0px;
    transition: .5s;
}

/* Navbar branding container */
.navbar-brand-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between logo and brand name */
    text-decoration: none;
}

/* Logo image styling */
.logo-img {
    height: 40px;
     margin-right: 10px;
}

/* Brand name styling */
.navbar-brand {
    color: #0d636b!important; /* Match color from image */
    font-weight: 500;
  font-size: clamp(1.25rem, 1.25vw + 1.5rem, 2rem);
 /* Adjust middle value for desired scaling */
    font-family: var(--heading-font), serif;
    display: flex;
  align-items: center;

}
.sidebar-brand-name{color: #0d636b; /* Match color from image */
    font-weight: 500;
     font-size: clamp(1rem, 1.2vw + 1rem, 1.339rem); /* Adjust middle value for desired scaling */
    font-family: var(--heading-font);


    }
/* Mobile view adjustments */
@media (max-width: 768px) {
    .logo-img {
        height: 25px; /* Reduce logo size on mobile */
    }

}
/* Nav links container */
.navbar-nav {
  display: flex; /* Flexbox for horizontal alignment */
  justify-content: center; /* Center the list items horizontally */
  align-items: center; /* Center the list items vertically */
  flex-grow: 1; /* This ensures it takes up available space for perfect centering */
}
 .nav-item {
  margin: 0 1rem;
}

.navbar-light .navbar-nav .nav-link,.login{
cursor:pointer;
font-size: 18px;

display: block;
border-radius: 4px;
line-height: 1.5;
/*color: var(--text-color);*/
 color: #0d636b;
font-family: var(--text-font);
font-weight: 400;
-webkit-text-decoration: none;
text-decoration: none;
white-space: nowrap;
/*border:1px solid  #f2d123;*/

}


.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active{
    color: var(--blue-text);
    background:transparent;
}
.navbar .nav-item .dropdown-menu{
background:white;
border-radius: 0 0 6px 6px;
}
.navbar .nav-item .dropdown-menu .dropdown-item{
cursor:pointer;

display: block;
border-radius: 4px;
font-family: var(--text-font);
padding: 10px 12px;
-webkit-text-decoration: none;
text-decoration: none;
white-space: nowrap;
font-size:1rem;
color:#0d636b;
align-items: center;
}
.navbar .nav-item .dropdown-menu .dropdown-item:hover,.navbar .nav-item .dropdown-menu .dropdown-item.active{
color: var(--blue-text);
background:transparent;
}
/* Reduce the size of the toggle button */
.navbar-toggler {
    width: 30px;  /* Adjust width */
    height: 30px; /* Adjust height */
    padding: 4px; /* Adjust padding to match smaller size */
}

/* Reduce the size of the toggle icon */
.navbar-toggler-icon {
    width: 1rem;  /* Adjust icon width */
    height: 1rem; /* Adjust icon height */
    background-size: 1rem 1rem; /* Adjust background size to fit the icon */
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        right: 0;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

/* Media query for responsiveness */
@media screen and (max-width: 992px){
.navbar-sidebar.open {
width: 250px;
}
/* Custom CSS for sidebar */
.navbar-sidebar {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
z-index:1000;
background-color: #fff;
overflow-x: hidden;
transition: width 0.5s;
box-shadow: -5px 0 5px -5px #333;
}
}


@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-left: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        margin-top: 25px;
        border-top: 1px solid #EEEEEE;
    }
}

/*profile name first letter styles */
.circle {
  width: 35px;
  height: 35px;
  border-radius: 50%; /* Make it a circle by setting border-radius to 50% */
  display: flex;
  justify-content: center;
  align-items: center;
     color:white;
     background:var(--blue-text);
  font-size: 1rem;
  text-transform:uppercase;
  font-weight:900;
  cursor: pointer;
}
.circle:hover{
    background-color:white;
    color:var(--blue-text);
    border:1px solid var(--text-box-border);
  }
/* navbar design ends */

.page-banner {
position: relative;
padding: 40px 0px 120px 0px;
/*background:#050d21; digital transfermation image*/
}

.home-banner{
border-radius: 1vh;
}
 .banner-heading {
    display: flex;
    justify-content: center; /* Centers the heading div */

  }
.home-banner .chart-card{
padding: 1rem;
border-radius:0.5rem;
box-shadow:none;
}



.banner-heading h1{
font-size: clamp(1rem, 5vw, 1.5625rem); /* 25px */
font-family:var(--heading-font);
 font-weight: 500;
    color: #0d636b; /* Dark teal for subheadings */
    margin-bottom: 28px;
    line-height: 1.3; /* Tighter line-height for headings */

}
section img{border-radius:8px;}

.banner-content{padding:5vh;}
.home-banner .banner-text {
   font-size: clamp(1rem, 2vw + 1rem, 1rem);
  line-height: 1.6;
  color: #333; /* Dark gray for readability */
  font-family: var(--text-font);
  margin-bottom: 28px;
  text-align: justify; /* Justify the text */
}

@media (min-width: 992px) {
  .banner-text {
    font-size: clamp(1rem, 2vw + 1rem, 1rem);
  }
}
  /* On mobile (screens less than 576px), center the banner heading div */
 @media (max-width: 767px) { /* Target screens smaller than 768px */

    .home-banner .col-lg-7 {
        margin: 0 auto; /* Center the column in mobile view */
    }

}
/* Our retirement planning platform provides a step-by-step guide to help you customize a financial plan at a fraction of the traditional planning cost. */
.blue-background{background: #C8F1F4;}
.blue-border{border: 2px solid #4AE1FF;}
.grey-border{box-shadow: 0px 4px 4px 0px #00000040;
border: 1px solid var(--green-text);
}
section {
/*display: flex;
justify-content: center;*/
margin: 50px 0px;

}

/* For larger screens */
.custom-image-container {
  min-height: 400px;
}

/* For smaller screens (mobile view) */
@media (max-width: 767.98px) {
  .custom-image-container {
    min-height: 500px; /* Increase the height on smaller screens */
  }
  .custom-image {
    object-fit: cover; /* Cover the container with the image */
    height: auto; /* Allow height to adjust based on image aspect ratio */
  }
}
/*budgeting image */
/* Base styles for spend alert */
.spend-alert {
    background-color: #e6f7ff;
    padding: 10px;
    border-radius: 0.4rem;
    position: absolute;
    top: 200px;
    left: 3%;
    max-width: 250px;
    word-wrap: break-word;
}

/* Table styling inside spend alert */
.spend-alert table {
    font-size: 10px;
    word-wrap: break-word;
    white-space: normal;
    table-layout: fixed;
}

.spend-alert table th,
.spend-alert table td {
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
}

.spend-alert table th {
    color: var(--green-text);
    font-weight: 500;
    width: 33%;
}

.spend-alert table td {
    color: var(--text-color);
}

/* Balance alert styling */
.balance-alert {
    position: absolute;
    top: 20px;
    right: 3%;
    background-color: #E5FFF3;
    padding: 10px;
   border-radius: 0.4rem;
    font-size: 10px;
    max-width: 250px;
}

.overspend {
    color: red;
}

/* General font styling inside balance alert and savings info */
.balance-alert p,
.savings-info p {
    font-size: 10px;
    margin: 0;
}

/* Savings info styling */
.savings-info {
    background-color: #FFF6B9;
    width: 250px;
    font-size: 10px;
    position: absolute;
    bottom: 3%;
    right: 3%;
    padding: 10px;
    border-radius: 0.4rem;
}

.savings-info .list-group {
    background: transparent;
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
    /* Reduce font size and container width for mobile */
    .spend-alert,
    .balance-alert,
    .savings-info {
        font-size: 0.4rem;
        padding: 8px;
    }

    .spend-alert {
        top: 40%;
    }

    /* Adjust table font size and padding for better readability */
    .spend-alert table {
        font-size: 0.5rem;
    }
    .spend-alert table th,
    .spend-alert table td {
        padding: 4px;
    }

    /* Adjust position of alerts on smaller screens */
    .balance-alert {
        top: 3%;
        right: 3%;
    }

    .savings-info {
        bottom: 3%;
        right:3%;
    }
}

@media (max-width: 576px) {
    /* Further reduce font size for very small screens */
    .spend-alert,
    .balance-alert,
    .savings-info {
        font-size: 0.5rem;
        /*max-width: 160px;*/
        padding: 6px;
    }

    .spend-alert {
        top: 40%;
    }

    .balance-alert {
        top: 3%;
        right:3%;
    }

    .savings-info {

        bottom:3%;
        right: 3%;
    }
}

/* budgeting image end*/
/* home page insights */
/* Common styles for all boxes */
.insights {
box-shadow: 0px 4px 1rem 0px #008AA652;
  height: 100px; /* Set a fixed height to ensure all boxes are the same size */
  display: flex;
  align-items: center; /* Vertically center the text */
  justify-content: center; /* Horizontally center the text */
  padding: 10px;
     border-radius: 0.5rem;

}
.insights .banner-text{color:#fff;font-size:1rem;margin:0px;font-weight:500;}
.background-2{background: #26D9DA;}
.background-1{background: #21C0CD;}
.background-3{background: #1795D3;}

.img-bottom-text{
            background-color: #FFF6B9;
            padding: 10px;
              border-radius: 0.4rem;
            position: absolute;
  top:70%;
  left:3%;
    width:50%;
        }
 .img-top-text p,.img-bottom-text p{font-size:10px;margin:0px;}
.img-top-text{
            background-color: #e6f7ff;
            padding: 10px;
               border-radius: 0.4rem;
            position: absolute;
  top:3%;
  left:3%;
  width:50%;
        }
/* end home page insights */
/*home-about_us*/

/*home-about_us end*/
/*faq menu*/
/*menu bar css in profile-slider css*/
/* Question & Answer Styling */

.question {
    margin-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;

}
.question .small-heading {
    font-size: 20px;
    font-weight: 500;
    color: #0d636b; /* Dark teal for subheadings */
    margin-bottom: 1rem;

}
/* List Styling */
ul,ol {
   line-height: 1.5; /* Maintains readability in lists */
    padding-left: 1.5em; /* Adds left padding for indentation */
    margin-bottom: 1em; /* Spacing after lists */
}

ul li,ol li {

     margin-bottom: 0.5em; /* Spacing between list items */
    color: #333;
}
/* Paragraph Text Styling */
.question .banner-text {
     font-size: 1rem;
    line-height: 1.8;
    color: #333; /* Dark gray for readability */
    font-family: var(--text-font);
    margin-bottom: 1rem;
    text-align:justify;
}
        .content-section {
            display: none;

        }
        .content-section.active {
            display: inline-block;
        }
/*faq menu*/
/*pricing*/
/* General table layout for desktop view */
.pricing-table {
    width: 100%;
    margin:50px 0px;
    border-collapse: collapse; /* Remove gaps between cells */
}

.pricing-row {
    display: flex;

    justify-content: space-between;
    border-bottom: 1px solid #ccc; /* Add border to rows */
}

.pricing-row.header {
    color:var(--green-text);
    font-weight:500;
    font-size:1rem;
    font-family: var(--heading-font);
    border-bottom: 2px solid var(--text-box-border); /* Add border under the header */
}
.pricing-row.border-bottom {
    border-bottom: 2px solid #222;
}

.feature-column.header
{
    width: 34%;
    text-align: center;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--heading-font);
    color: var(--green-text);
    box-shadow: none; /* No shadow for header */ background-color: transparent; /* No background for header */

}
.feature-column {
    width: 34%;
    display: flex;
    align-items: center;
    text-align: left;
    padding:1rem;

    font-weight: 500;
      font-size: 0.875rem;

    background-color: transparent; /* No background for feature column */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.pricing-column {
    width: 33%;
    text-align: center;
    padding: 10px 0;
    border-left: none; /* Remove borders between columns */
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 0;
}

.pricing-column:nth-child(2) { /* Basic Column */
    background-color: #f5f5f5; /* Grey background */
}

.premier-column {
    background-color: #fff; /* White background for Premier */
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.best-value-label {
    position: absolute;
    top: -40px; /* Adjust as needed */
    left: 0;
    width: 100%;
    height: 40px; /* Match the height of Premier box */
    background-color: #00c0c7; /* Best Value background */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 0.5rem 0.5rem 0 0; /* Rounded top corners */
}

.checkmark {
    color: green;
    font-size: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.feature-column,.pricing-row.header  {font-size:0.8rem;}
.best-value-label {
        font-size: 0.875rem; /* Slightly smaller font size */
        top: -30px; /* Adjust position to fit mobile screens */
    }
}
.ssb-form-label{font-size:0.825rem; padding:0;}
.card{
padding: 0.5rem;
border-radius:8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: 0.5s;
border: 1px solid #CEDEE4;
height:100%;
}
.card:hover{transform: scale(1);
  box-shadow: 0 0 10px rgba(0,0,0,0.5);}
.card-header{background:transparent;border:none;}
.card-footer{background:transparent;border:none;}

.form-box {
/*background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/
padding:20px;
}
/* Media query for responsiveness */
@media screen and (max-width: 992px){
.form-box,.box {
margin:0px;

}
}
/* For screens smaller than 768px (tablets and smaller) */
@media screen and (max-width: 768px) {
   .form-box,.box {
        padding: 1rem; /* Slightly reduced padding for tablets */
    }
}

/* For screens smaller than 576px (mobile devices) */
@media screen and (max-width: 576px) {
    .form-box,.box {
        padding: 10px; /* Further reduced padding for mobile */
    }
}

.box{
padding: 1rem;
border-radius:0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.pointer{cursor:pointer;}
/* Base Button Styles */
.btn-remove, .btn-edit {
    background-color: transparent;
    cursor: pointer;
    border: none;
       border-radius: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
     padding: 0rem 0.5rem;
    /*margin-bottom: 1rem;*/
    transition: background-color 0.3s ease, color 0.3s ease;
}

@media (max-width: 576px) {
    .btn-remove, .btn-edit {
        padding: 0rem 0.25rem; /* Reduced padding for small devices */
    }
}
/* Icon Size and Initial Color */
.btn-remove i, .btn-edit i {
    font-size:0.875rem;
    transition: color 0.3s ease;
   }

/* Remove Button Styles */
.btn-remove i,.bi-trash{
    color: rgba(220, 53, 69, 0.7); /* Light red icon color */
}


.btn-remove:hover i {
    color: #dc3545; /* Solid red icon color on hover */
}

/* Edit Button Styles (Green) */
.btn-edit i,.bi-pencil-square {
    color: #007B82; /* Light green icon color */
}


.btn-edit:hover i {
    color: #28a745; /* Solid green icon color on hover */
}

/* Optional: Tooltip styling */
[data-bs-toggle="tooltip"] {
    cursor: pointer;
}

/*.............................................................

/* life expectancy slider */
.slider-label {
text-align: center;
margin: 20px 0;
font-family:var(--heading-font);
color:var(--green-text);
}
.slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-family:var(--heading-font);
color:var(--green-text);
}

.slider-label-left {
    text-align: left;
    flex: 1;
}

.slider-label-center {
    text-align: center;
    flex: 1;
    padding-bottom:2.5rem;
}

.slider-label-right {
    text-align: right;
    flex: 1;
}
.slider-container {
margin: 20px 0 40px 0;
}
.slider-bar {
margin: 20px 0;
}

.noUi-connect {
background: var(--blue-text) !important;
}
.noUi-tooltip {
    position: absolute; /* Allows positioning adjustments */
    font-size: 0.625rem !important;
    color: var(--text-color) !important;
    font-family: var(--text-font) !important;
    background: none !important;
    border:none !important;
    transform: translateX(-50%); /* Center the tooltip */
    white-space: wrap; /* Prevents tooltip text from wrapping */
    max-width: 150px; /* Limit tooltip width */
    overflow-wrap: break-word; /* Enable wrapping for long words */
    text-align: center; /* Center-align text */
    padding: 5px 10px; /* Ensure padding for readability */
}

/* Customize the tooltip arrow (if needed) */
.noUi-tooltip:after {
    content: '';
    /* Add any additional styling for the tooltip arrow here */
}
/* Responsive styles for smaller screens */
@media (max-width: 768px) {
    .noUi-tooltip {
        font-size: 0.5rem !important; /* Smaller font size for tooltips on mobile */
         white-space: normal; /* Allow wrapping on smaller screens */
    }

    .slider-container {
        margin: 1rem 0 30px 0;
    }

    .slider-bar {
        margin: 1rem 0; /* Reduce the slider's vertical margin */
    }

    .slider-labels {
        font-size: 0.9rem; /* Reduce the size of labels */
    }

    .year-display {
        font-size: 0.85rem; /* Slightly smaller font for the year display */
    }
}

/*retirement incomes dropdown menu*/

    .edit-reset-icon {
        cursor: pointer;
        color: #6c757d;
        margin-left: 10px;
        transition: color 0.3s ease;
    }
    .edit-reset-icon:hover {
        color: #495057;
    }
    .reset-btn {
        display: none;
        margin-left: 10px;
    }
    .input-group-text {
        background-color: transparent;
    }
/* Styling for the dropdown menu */
.dropdown-menu {
       border-radius: 0.5rem;
    box-shadow: 0px 8px 1rem rgba(0, 0, 0, 0.15);
    border: none;
    /*margin: 10px 0 20px 20px;*/
    list-style:none;
}

/* Styling for dropdown items */
.dropdown-item {
    /*padding: 10px 1rem;*/
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    list-style:none;
    cursor:pointer;
}

.dropdown-item:hover {
    background-color: #f0f0f5; /* Light hover effect */
    color: var(--black-text);
       border-radius: 0.5rem;
}

/* Icon styling inside the dropdown */

/*retirement incomes dropdown menu*/

.account-type-padding{
padding-left: 200px;
}
@media (max-width: 768px) { /* Adjust the breakpoint as needed */
.account-type-padding{
padding-left: 0;
}
}
@media (max-width: 768px) {
    .responsive-padding {
        padding-left: 20px; /* Adjust padding for smaller screens */
    }
}
/* Additional styles for other account types as needed */
 /* Basic table styling */
        .table-responsive {
            overflow-x: auto;
        }

        .modern-table {
            width: 100%;
            border-collapse: collapse;
            padding: 40px;
        }

        /* Header styling */
        .modern-table thead {
            text-align: left;
        }

        .modern-table thead th {
            padding: 12px 8px;
            border-bottom: 2px solid #dee2e6;
            font-weight: 400;
            font-family: var(--text-font);
            color: var(--green-text);
            font-size: 1rem;
        }

        .modern-table tbody td {
            padding: 12px 8px;
            vertical-align: middle;
            word-wrap: break-word;
            white-space: normal;
            font-family: var(--text-font);
            font-size: 0.875rem;
            font-weight: 400;
            color: var(--black-text);
        }

        .responsive-padding {
            padding-left: 12.5rem;
        }

        @media (max-width: 768px) {
            .responsive-padding {
                padding-left: 0rem;
            }
        }

        /* Action Icons Styling */
        .modern-table tbody td .account-action a {
            color: var(--green-text);
            text-decoration: none;
            margin-right: 10px;
        }

        .modern-table tbody td .account-action a:hover {
            color: #0056b3;
        }

        /* Responsive Adjustments */
        /* Mobile Table Layout */
        @media (max-width: 576px) {
            .modern-table {
                font-size: 0.8rem;
            }

            .modern-table thead th:first-child {
                width: 50%;
            }

            .modern-table thead th:nth-child(2) {
                width: 25%;
            }

            .modern-table thead th:last-child {
                width: 25%;
            }

            .account-number {
                display: block;
                margin-top: 0.25rem;
                font-size: 0.6rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 150px;
            }

            .account-value div {
                font-size: 0.85rem;
            }

            .account-action {
                white-space: nowrap;
            }
        }
        /* Account type styling */
        .account-type {
            background: var(--green-text);
            color: white;
            /*padding: 8px 16px;
            border-radius: 20px;*/
            font-weight: 500;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-block;
            padding: 5px 5px 5px 6px;

font-weight:500;
border-radius: 2px;
text-align: center;
font-size:11px;
        }

        /* Account name styling */
        .account-name {
            font-weight: 600;
            color: var(--blue-text);
            font-size: 1rem;
            margin-bottom: 0.25rem;
            display: block;
        }


        /* Account number styling */
        .account-number {
            color: #6c757d;
            font-size: 0.8rem;
            font-family: 'Courier New', monospace;
        }

        /* Account value styling */
        .account-value {
            font-weight: 600;
            color: var(--black-text);
            /*text-align: right;*/
            font-size: 1.1rem;
        }

        .accounts-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            margin-bottom: 2rem;
            padding: 1rem;
        }

        .add-account-section {
            text-align: left;
            padding: 2rem 0;
        }
         /* Extra Small Mobile Devices */
        @media (max-width: 480px) {
            .dashboard-title {
                font-size: 1.5rem;
            }

            .total-balance .amount {
                font-size: 1.8rem;
            }

            .modern-table thead th {
                font-size: 0.8rem;
                padding: 6px 2px;
            }

            .modern-table tbody td {
                font-size: 0.75rem;
                padding: 6px 2px;
            }

            .responsive-padding {
                padding-left: 0.5rem !important;
            }

            .account-name {
                font-size: 0.85rem;
            }

            .account-number {
                font-size: 0.65rem;
            }

            .account-value {
                font-size: 0.9rem;
            }

            .account-type {
                font-size: 0.7rem;
                padding: 4px 8px;
            }

            .btn-edit, .btn-remove {
                width: 24px;
                height: 24px;
                font-size: 0.7rem;
                margin: 0 0.1rem;
            }
        }

/*survey -questions*/
.question {
    margin: 20px 0;
}
/* Ensure the checkboxes and labels stay on the same line in mobile view */
input[type="checkbox"] {
    margin-right: 10px; /* Add space between checkbox and label */
}

.checkbox-label {
    display: flex;
    align-items: center; /* Align checkbox and label vertically */
    flex-wrap: wrap; /* Allow the label to wrap if it's too long */
}

.checkbox-label label {
    flex: 1; /* Allow the label to take up the remaining space */
}

@media (max-width: 768px) {
    .checkbox-label {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .checkbox-label label {
        margin: 0;
    }
}

    .blurred {
        filter: blur(5px);
        pointer-events: none; /* Prevent interaction with blurred content */
    }

/*.............................................................*/
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
/* Footer Base Styles */
#footer {
    padding: 50px 0;  /* Increased top padding */
    font-size: 1rem;
    background-color: #C8F1F4;
}
.footer-links{  padding: 25px 0;}
/* Brand Section */
#footer .brand-name {
    margin-bottom: 1rem;
    font-weight: 500;
}

/* Section Titles */
#footer .footer-title {
    color: var(--black-text);
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 1rem;  /* Consistent spacing */
}

/* Links Styling */
#footer .links {
    color: var(--green-text);
    font-weight: 400;
    font-size: 1rem;
    display: block;
    margin-bottom: 1rem;  /* Consistent spacing between links */
    transition: color 0.3s, font-weight 0.3s;
}

#footer .links:hover {
    font-weight: 500;
    color: var(--blue-text);
}

/* Social Icons */
.social-icons {
    margin-top: 1.5rem;
}

.social-icons a {
    color: #00ADCC;
    font-size: 1.2em;
    transition: color 0.3s;
    margin-right: 1.5rem;
}

.social-icons a:last-child {
    margin-right: 0;
}

.social-icons a:hover {
    color: #007bff;
}

/* Copyright Section */
#footer .copyright {
    padding: 25px 0;
    border-top: 1px solid #CEDEE4;
}

#footer .copyright p,
#footer .credits p {
    color: #333;
    font-size: 1rem;
    margin-bottom: 0;  /* Remove bottom margin */
}



#footer .footer-link a {
    color: var(--green-text);
    font-weight: 400;
    font-size: 1rem;
    position: relative;
    transition: color 0.3s, font-weight 0.3s;
}

#footer .footer-link a::after {
    color: var(--blue-text);
    content: "|";
    display: inline-block;
    font-size: 0.75em;
    margin: 0 1.5em;
}

#footer .footer-link a:last-child::after {
    content: none;
}

#footer .footer-link a:hover {
    font-weight: 500;
    color: var(--blue-text);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    #footer {
        padding: 50px 0 0 0;
    }

    #footer .copyright {
        margin-top: 40px;
    }

    .footer-link {
        margin-top: 1rem;
    }
}
/****************/

/******Disclaimer text*********/
.disclaimer-container {
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
               border-radius: 0.5rem;
            margin-bottom:2em;
        }

        .disclaimer-title {
            color: var(--black-text);
        }

        .disclaimer-text {
            font-size: 1rem;
            line-height: 1.8;
            color: #333;
        }



        .disclaimer-text em{
            font-style: normal;
            color: #999;
        }

        @media (max-width: 768px) {
            .disclaimer-container {
                padding: 1rem;
            }

            .disclaimer-title {
                font-size: 20px;
            }

            .disclaimer-text {
                font-size: 0.875rem;
            }
        }