*{padding: 0; margin: 0; box-sizing: border-box; list-style: none; text-decoration: none; font-family: "Poppins", sans-serif;}

/* ---------------------  CSS Variables  ---------------------------- */
:root{
    --theam-color-1: #fff8e8;
    --green: #0b8901;
    --blue: #014189;
    --orange: #fe6b0b;
    --black: #333333;
    --light-gray: #f4f5f8;
    --fade-light-orange: #faf6f4;
    --white: #ffffff;
    --gray:#6a6b6d;
}
/* ---------------------  CSS Common Style  ---------------------------- */
html{font-size: 10px;}
body{font-size: 1.6rem;}
.comm-sec-padd{margin-top: 10rem;}
.container{max-width: 1200px; margin: 0 auto;}
p{color: var(--black);}
.list li{list-style: disc;}
ul.list { padding-left: 2rem;}

/* ----------------------------------- */
.green{color: var(--green);}
.text-gray{color: #79797c;}
.orange{ color: var(--orange);}

/* -------------------  Header  -------------------------- */
.header-wrap{display: flex; justify-content: space-between; align-items: center;}
.contect img {vertical-align: middle;}
.header { background: var(--white); padding: 2rem 0; border-bottom: 0.2rem solid #eeeeee; }
.nav-wrap { text-align: center; }
.contect p { font-size: 1.8rem; font-weight: 500; }
.date p{font-weight: 500; margin-top: 0.5rem;}
span.pipe { border-right: 0.1rem solid #d7d7d7; margin: 0 0.5rem; }
.stickyNav .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 3; transition: 0.5s ease; animation: headerAnimation 1s forwards; box-shadow: 0 0 20px #00000042;}

@keyframes headerAnimation{
    0%   {transform: translateY(-100%);}
    100% {transform: translateY(0%);}
}

/* ------------------------  Hero Session  ----------------------------- */
.hero-secsion{position: relative; text-align: center; width: 100%;} 
.hero-secsion img{max-width: 100%;}
.hero-secsion::after { content: ''; background: var(--theam-color-1); display: block; width: 100%; position: absolute; top: 0; z-index: -1; bottom: 0; height: 100%;}
.hero-secsion .mobile-banner{display: none;}

/* ----------------------  Home Form  -------------------------------- */
.sec-2{background: var(--light-gray);}
.form { background: #014189; padding: 4rem; border-radius: 1rem; text-align: center;}
.form input { width: 100%; height: 5rem; border-radius: 0.8rem ; margin-bottom: 0.8rem; padding: 0 2rem; border: none; }
.form textarea { width: 100%; height: 17rem; border-radius: 0.8rem ; padding: 1rem 2rem; }
::placeholder{font-weight: 500; color: #79797c; font-size: 1.5rem;}
.form-btn{margin-top: 1rem; text-align: left;}
.form-btn input { width: 40%; border-radius: 2.5rem; font-weight: 500; font-size: 1.4rem; background: var(--orange); color: var(--white); cursor: pointer;}
.form h3 {color: var(--white); margin-bottom: 1rem; font-size: 2.8rem; font-weight: 600;} 
.home-form-wrap { display: flex; justify-content: space-between; width: 100%; padding: 8rem 0; align-items: center;}
.left-data { width: 60%; }
.right-data { width: 35%; }

.card{background: var(--white); padding: 3rem; border-radius: 1rem; border: 0.1rem solid var(--orange);}
.left-data .card { margin-top: 2rem; }
/* .card h3 { font-weight: 600; } */
.left-data p { margin-bottom: 3rem; font-weight: 400; font-size: 1.7rem;}
.left-data h1 { margin-bottom: 1rem; font-weight: 600; font-size: 3rem; }
.card ul li {list-style: disc;font-weight: 600; list-style-position: inside;}
.card p br {display: none;}


/* --------------------------  Image Card --------------------------- */
.image-card-container{display: flex; flex-wrap: wrap; gap: 2rem;}
.image-card{width: calc(25.4% - 2rem);}
.image-card img{ width: 100%;}
.image-card-container .image-card img {box-shadow: 0px 0px 15px #bcbfc7c9; border-radius: 0.7rem;}


/* ---------------- Just Think ------------------------- */
.just-think .heading h2{font-size: 4rem; color: var(--black); font-weight: 600;}
.just-think .heading p{font-size: 1.6rem; color: var(--black); font-weight: 500;}
.just-think .heading{margin-bottom: 3rem;}
.A-box { padding: 1rem 2rem 1rem; display: none; transition: 0.5s ease;}
.toggleicon span { display: block; width: 0; height: 0; border-top: 1rem solid var(--gray); border-left: 0.7rem solid transparent; border-right: 0.7rem solid transparent;}
.toggleicon span:nth-child(2) { transform: rotate(90deg); width: 1.6rem; margin-top: -0.1rem;}
.show-ans .A-box { display: block; transition: 0.5s ease}
.show-ans .toggleicon span { transform: rotate(180deg); border-top: 1rem solid var(--orange);}
.show-ans .Q-box p { color: var(--orange);}
.Q-box p { color: var(--black); font-size: 2.2rem; font-weight: 500; padding-top: 1.5rem;}
.faqbox { border-top: 0.2rem solid var(--orange); margin-bottom: 1rem;}
.Q-box { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; cursor: pointer;}
.just-think .image-card-container{margin: 3rem 0;}
.just-think .image-card-container img { border-radius: 0.7rem; }
.A-box ul li a{color: #333333;}

/* ---------------  Footer  --------------------------- */
.footer-sec{margin-bottom: 8rem;}
.footer{display: flex; background: var(--fade-light-orange); padding: 6rem 4rem; border-radius: 1.5rem; align-items: center;}
.footer-left-data img{border: 0.2rem solid #014189; border-radius: 2rem; margin-right: 6rem; }
.footer-right-data p a{font-size: 2rem; font-weight: 600; color: var(--black);}
.footer-right-data p img{vertical-align: middle; margin-right: 0.5rem;}
.footer-right-data p{margin-bottom: 0.8rem;}
.cta-btn a { background: #014189; color: #fff; padding: 1rem 2rem; border-radius: 2.5rem; }
.cta-btn{margin-top: 3rem;}



/* --------------  Calculator ---------------------------- */

.sip-calculator-container { padding: 20px;}
.sip-content { display: flex; justify-content: space-between;}
.goal-wrap-main.sip { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px;}
.total-value { display: flex; flex-direction: column; align-items: flex-end;}
@media (max-width: 991px) {
.sip-content {
    flex-direction: column;
}
.total-value {
    align-items: center;
}
}
.goal-title { font-weight: bold; margin-bottom: 10px; font-size: 1.6rem;}
.input-wrap, .slider-wrap, .value-wrap { margin-bottom: 20px;}
.rupee-input { width: 100%; padding: 5px; margin-left: 5px;}
.rupee { font-weight: bold; }
.amount {font-weight: bold;}
.totalamt { font-size: 1.5em; color: #ff5722;}
.chart-box { position: relative; height: 200px; width: 100%;}
.investment-cal { display: flex; justify-content: space-between; margin-top: 20px;}
.investment-cal .title { font-weight: bold; }
.investment-cal .amt { font-size: 1.6rem;}
.monthly-sip-amt { text-align: center;}
.mb-0 {  margin-bottom: 0 !important;}
.text-orange {color: #ff5722;}
.sip-calculator-container { padding: 20px;}
.sip-content { display: flex; justify-content: space-between;}
.goal-wrap-main.sip { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px;}
  
.total-value { display: flex; flex-direction: column; align-items: flex-end; }
  
  @media (max-width: 991px) {
    .sip-content {
      flex-direction: column;
    }
    .total-value {
      align-items: center;
    }
  }
.goal-title { font-weight: bold; margin-bottom: 10px;}
.input-wrap, .slider-wrap, .value-wrap { margin-bottom: 20px; }
.rupee-input { width: 100%; padding: 5px; margin-left: 5px;}
.rupee { font-weight: bold;}
.amount { font-weight: bold;}
.totalamt { font-size: 1.5rem; color: #ff5722;}
.chart-box { position: relative; height: 200px; width: 100%; }
.investment-cal { display: flex; justify-content: space-between; margin-top: 20px;}
.investment-cal .title { font-weight: bold;}
.investment-cal .amt { font-size: 1.2rem;}
.monthly-sip-amt { text-align: center;}
.mb-0 { margin-bottom: 0 !important; }
.text-orange { color: #ff5722;}