/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 30 2026 | 07:03:20 */
.stpSouceFundBox, .stpDestinationFundBox{border: 1px solid #ddd;
    border-radius: 8px;
    padding: 25px;}

    .stpSouceFundBoxHeading span, .stpDestinationFundBoxHeading span{position: relative;
    top: -38px;
    background: #fff;
    
    padding: 0px 10px;
    font-size: 20px;
    font-weight: 700}

.page-template-template_calculator{width: 100%;}
.main-calculator-container{display: flex;flex-direction:column;width: 100%;}
.top-banner{background-image:url('/wp-content/uploads/2025/12/hero-b-2.webp');
background-size:cover; background-position: bottom;background-repeat:no-repeat;width: 100%; height: 260px;
background-attachment: fixed;position: relative;}
.top-banner:before{content:'';position: absolute;top:0px;left:0px;background-color:#18345c59;width:100%;
height:100%;}
.top-banner-heading{font-family: "Bricolage Grotesque", Sans-serif;font-size: 60px;font-weight: 600;
line-height: 70px; position: relative;top: 38%;left: 90px;color:#fff;}


#sipPie{width: 270px!important;height:270px!important;margin:0 auto;}

#sipBar{width: 400px!important;height:auto!important;margin:100px auto 0px;}

/* .investment-calculation-inner-box-rightSide-topBox{border: 1px solid #18345c;
    border-radius: 6px;
    padding: 50px;} */

    .investment-calculation-inner-box-rightSide-bottomBox{
/* border: 1px solid #18345c; */
    margin-top: 25px;
/*     border-radius: 6px; */


}

.cal-common-year-percentage{display: flex;justify-content: space-between;font-family: roboto;font-size: 14px;}
input, select, option{font-family: roboto;font-size: 15px;}
input[type="range"] {
 -webkit-appearance: none;
  appearance: none;
  box-shadow: none; /* Removes shadow from the main input element */
  background: #fafafa; /* Ensures no default background affects the shadow */
  border: 1px solid #e2e2e2!important;
  border-radius: 100px;

}

/* For the thumb (the draggable part) in WebKit browsers (Chrome, Safari, Edge, Opera) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Resets default thumb appearance */
  appearance: none;
  box-shadow: none; /* Removes shadow from the thumb */
width:7px;height:7px;

position:relative;top:2px;

}

/* For the thumb in Mozilla Firefox */
input[type="range"]::-moz-range-thumb {
  box-shadow: none; /* Removes shadow from the thumb */

}

/* For the track (the bar) in WebKit browsers */
input[type="range"]::-webkit-slider-runnable-track {
box-shadow: none!important; /* Removes shadow from the track */
height:6px;
}

/* For the track in Mozilla Firefox */
input[type="range"]::-moz-range-track {
box-shadow: none; /* Removes shadow from the track */
}

/* To remove the "glow" effect when the slider is focused (clicked/tabbed into) */
input[type="range"]:focus {
  outline: none; /* Removes the default focus outline */
  box-shadow: none; /* Ensures no shadow appears on focus */
}


/* form sip calculation style */

.financial-calculator-heading{font-family: "Bricolage Grotesque", Sans-serif;font-weight:400;font-size:36px;line-height:46px;}
.financial-calculator-list-container{display:flex;padding:0px;margin: 20px 0px 30px 0px;}

.financial-calculator-list-container li.active-calculator {list-style: none;display: flex;gap: 10px;
background: #18345c;border-radius: 5px;margin-right: 15px;}

.financial-calculator-list-container li:last-child.active-calculator {margin-right: 0px;}

.financial-calculator-list-container li.active-calculator a:focus, .financial-calculator-list-container li.active-calculator a:focus-visible,
.financial-calculator-list-container li.active-calculator a:hover{outline:none;}
.financial-calculator-list-container li.active-calculator a{display: flex;justify-content: space-between;align-items: center;gap: 10px;
padding: 10px 20px 10px 20px;text-decoration: none;color: #fff;font-family: "Bricolage Grotesque", Sans-serif;
    letter-spacing: 0.5px;}
.financial-calculator-list-container li.active-calculator .fin-cal-img{display: flex;justify-content: center;align-items: center;}
.financial-calculator-list-container li.active-calculator .fin-cal-img img{width:30px;height:30px;filter:invert(1);}


.financial-calculator-list-container li{background:transparent;border:1px solid #18345c;border-radius:5px;list-style: none;
display: flex;gap: 10px;background: transparent;border-radius: 5px;margin-right: 15px;transition:0.3s ease-in-out;width:25%;}

.financial-calculator-list-container li:last-child{margin-right: 0px;}

.financial-calculator-list-container li:hover{background:#18345c;}


.financial-calculator-list-container li a{display: flex;justify-content: space-between;align-items: center;gap: 10px;
padding: 10px 20px 10px 20px;text-decoration: none;color: #000;font-family: "Bricolage Grotesque", Sans-serif;
    letter-spacing: 0.5px;}
.financial-calculator-list-container li .fin-cal-img{display: flex;justify-content: center;align-items: center;}
.financial-calculator-list-container li .fin-cal-img img{width:30px;height:30px;}
.financial-calculator-list-container li:hover a{color:#fff;}
.financial-calculator-list-container li:hover .fin-cal-img img{filter:invert(1);}

/* .financial-calculator-list-container li.active {
  background: #18345c;
}

.financial-calculator-list-container li.active a {
  color: #fff;
}

.financial-calculator-list-container li.active img {
  filter: brightness(0) invert(1);
} */


.animated {-webkit-animation-duration: 1s !important;animation-duration: 1s !important;-webkit-animation-fill-mode: both;
animation-fill-mode: both}

@-webkit-keyframes zoomIn {
    from {opacity: 0;
-webkit-transform: scale3d(.3,.3,.3);
transform: scale3d(.3,.3,.3)
    }

   50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {-webkit-animation-name: zoomIn;animation-name: zoomIn}

.calculation-box-subHeading{background:#18345c;border-radius:5px;padding:10px 10px 10px 15px;display: flex;gap:10px;
  align-items: center;margin-bottom:30px;font-family: "Bricolage Grotesque", Sans-serif;font-size: 26px;line-height: 36px;
  font-weight: 400 !important;}
.calculation-box-subHeading .fin-cal-img{display: flex;
    justify-content: center;
    align-items: center;}
.calculation-box-subHeading .fin-cal-img img{width:30px;height:30px;filter:invert(1);}
.calculation-box-subHeading .calculation-box-subHeading-textValue{color:#fff;}

.investment-calculation-inner-box{display:flex;gap:20px;}

.investment-calculation-inner-box .investment-calculation-inner-box-leftSide{width:60%;}

.investment-calculation-inner-box .investment-calculation-inner-box-rightSide{width:40%;}

.cal-inputBox{display:flex;flex-direction:column;justify-content: space-between;}
.cal-inputBox-firstBox{display:flex;gap:10px;align-items: center;padding-bottom: 15px;}
.cal-inputBox-firstBox label{width:75%;font-family: system-ui;}
.cal-inputBox-firstBox input{width:25%;border-radius: 6px;height: 46px;}
.cal-inputBox-firstBox select{width:25%;border-radius: 6px;height: 46px;}
.investment-formBox{border:1px solid #18345c;border-radius:6px;
display:flex;flex-direction:column;gap:20px;padding:70px 50px;}

.calculation-resultBox{display:flex;flex-direction:column;}


.calculation-resultBox .result-innerBox{display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;}


.calculation-resultBox .result-innerBox span{font-family: system-ui;}
.calculation-resultBox .result-innerBox span button{font-family: system-ui;
    font-weight: 400;letter-spacing: 0.5px;}
.calculation-resultBox .result-innerBox span button:hover, .calculation-resultBox .result-innerBox span button:focus{background:#E7A416;border:2px solid #E7A416;}

.calculator-body-container{padding:40px 100px;}


.investment-calculation-box {
  display: none;
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.4s ease;
}

.investment-calculation-box.active {
  display: block;
  opacity: 1;
  transform: scale(1);
}


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

}



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


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


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