.elementor-5160 .elementor-element.elementor-element-f074439{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--padding-top:100px;--padding-bottom:100px;--padding-left:20px;--padding-right:20px;}.elementor-5160 .elementor-element.elementor-element-f074439:not(.elementor-motion-effects-element-type-background), .elementor-5160 .elementor-element.elementor-element-f074439 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://rf.digibrink.com/wp-content/uploads/2026/04/Page-Banner.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-5160 .elementor-element.elementor-element-f074439::before, .elementor-5160 .elementor-element.elementor-element-f074439 > .elementor-background-video-container::before, .elementor-5160 .elementor-element.elementor-element-f074439 > .e-con-inner > .elementor-background-video-container::before, .elementor-5160 .elementor-element.elementor-element-f074439 > .elementor-background-slideshow::before, .elementor-5160 .elementor-element.elementor-element-f074439 > .e-con-inner > .elementor-background-slideshow::before, .elementor-5160 .elementor-element.elementor-element-f074439 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-5160 .elementor-element.elementor-element-d2b5d75{text-align:center;}.elementor-5160 .elementor-element.elementor-element-d2b5d75 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-astglobalcolor5 );}.elementor-5160 .elementor-element.elementor-element-2533f3d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:70px;--padding-bottom:70px;--padding-left:20px;--padding-right:20px;}.elementor-5160 .elementor-element.elementor-element-ebede21 > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-5160 .elementor-element.elementor-element-ebede21{text-align:start;}.elementor-5160 .elementor-element.elementor-element-a3c1a6c > .elementor-widget-container{padding:30px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-5160 .elementor-element.elementor-element-f074439{--padding-top:70px;--padding-bottom:70px;--padding-left:20px;--padding-right:20px;}}@media(max-width:767px){.elementor-5160 .elementor-element.elementor-element-f074439{--padding-top:70px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-5160 .elementor-element.elementor-element-2533f3d{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for html, class: .elementor-element-a3c1a6c */<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
.child-education-planner {
    --bg-color: #ffffff;
    --text-primary: #334155;
    --text-secondary: #64748b;
    --primary-color: #1F4596;
    --primary-light: #eef2fa;
    --brand-blue: #DE3F33;
    --brand-light: #1F4596;
    --btn-primary: #1F4596;
    --btn-primary-hover: #142e66;
    --border-color: #f1f5f9;
    --slider-track: #e2e8f0;
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    font-family: 'Inter', sans-serif;
    background: #f8fafc;
    padding: 20px;
}

.child-education-planner,
.child-education-planner * {
    box-sizing: border-box;
}

.child-education-planner .calculator-container {
    background: var(--bg-color);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 1000px;
    margin: auto;
    padding: 40px;
    border: 1px solid var(--border-color);
}

.child-education-planner .calculator-header {
    text-align: center;
    margin-bottom: 30px;
}

.child-education-planner .calculator-header h1 {
    color: var(--primary-color);
    font-size: 30px;
    margin-bottom: 10px;
}

.child-education-planner .calculator-header p {
    color: var(--text-secondary);
}

.child-education-planner .calculator-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
}

.child-education-planner .inputs-section {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.child-education-planner .input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.child-education-planner .input-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.child-education-planner .input-field {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.child-education-planner .input-field input {
    border: none;
    background: transparent;
    width: 90px;
    text-align: right;
    outline: none;
    color: inherit;
    font-weight: inherit;
}

.child-education-planner .styled-slider {
    width: 100%;
}

.child-education-planner .results-summary {
    background: var(--primary-light);
    padding: 20px;
    border-radius: 16px;
}

.child-education-planner .result-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.child-education-planner .result-value {
    color: var(--primary-color);
    font-weight: 700;
}

.child-education-planner .visual-section {
    text-align: center;
}

.child-education-planner .chart-container {
    width: 280px;
    height: 280px;
    margin: auto;
}

.child-education-planner .invest-btn {
    margin-top: 25px;
    background: var(--btn-primary);
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

@media(max-width:768px){
    .child-education-planner .calculator-grid{
        grid-template-columns:1fr;
    }

    .child-education-planner .calculator-container{
        padding:20px;
    }
}
</style>

<div class="child-education-planner">
    <div class="calculator-container">
        <div class="calculator-header">
            <h1>Child Education Planner</h1>
            <p>Calculate the corpus needed for your child's future education.</p>
        </div>

        <div class="calculator-grid">
            <div class="inputs-section">

                <div class="input-group">
                    <div class="input-header">
                        <label>Child Age</label>
                        <div class="input-field">
                            <input type="number" id="childAge" value="3"> Yr
                        </div>
                    </div>
                    <input type="range" id="childAgeRange" class="styled-slider" min="0" max="18" value="3">
                </div>

                <div class="input-group">
                    <div class="input-header">
                        <label>Fund Needed At Age</label>
                        <div class="input-field">
                            <input type="number" id="fundAge" value="18"> Yr
                        </div>
                    </div>
                    <input type="range" id="fundAgeRange" class="styled-slider" min="15" max="25" value="18">
                </div>

                <div class="input-group">
                    <div class="input-header">
                        <label>Current Savings</label>
                        <div class="input-field">
                            ₹ <input type="number" id="savings" value="100000">
                        </div>
                    </div>
                    <input type="range" id="savingsRange" class="styled-slider" min="0" max="10000000" step="5000" value="100000">
                </div>

                <div class="input-group">
                    <div class="input-header">
                        <label>Monthly Investment</label>
                        <div class="input-field">
                            ₹ <input type="number" id="monthly" value="5000">
                        </div>
                    </div>
                    <input type="range" id="monthlyRange" class="styled-slider" min="0" max="500000" step="500" value="5000">
                </div>

                <div class="input-group">
                    <div class="input-header">
                        <label>Expected Return</label>
                        <div class="input-field">
                            <input type="number" id="rate" value="12"> %
                        </div>
                    </div>
                    <input type="range" id="rateRange" class="styled-slider" min="1" max="30" step="0.5" value="12">
                </div>

                <div class="results-summary">
                    <div class="result-row">
                        <span>Total Invested</span>
                        <span id="invested" class="result-value">₹0</span>
                    </div>
                    <div class="result-row">
                        <span>Returns</span>
                        <span id="returns" class="result-value">₹0</span>
                    </div>
                    <div class="result-row">
                        <span>Corpus</span>
                        <span id="corpus" class="result-value">₹0</span>
                    </div>
                </div>

            </div>

            <div class="visual-section">
                <div class="chart-container">
                    <canvas id="chart"></canvas>
                </div>
                <button class="invest-btn">START PLANNING</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function(){

    const ids = ["childAge","fundAge","savings","monthly","rate"];

    ids.forEach(id=>{
        const input = document.getElementById(id);
        const range = document.getElementById(id+"Range");

        input.addEventListener("input", ()=>{
            range.value = input.value;
            calculate();
        });

        range.addEventListener("input", ()=>{
            input.value = range.value;
            calculate();
        });
    });

    let chart;

    function formatMoney(val){
        return new Intl.NumberFormat('en-IN',{
            style:'currency',
            currency:'INR',
            maximumFractionDigits:0
        }).format(val);
    }

    function calculate(){
        const childAge = +childAge.value;
        const fundAge = +fundAge.value;
        const savings = +document.getElementById("savings").value;
        const monthly = +document.getElementById("monthly").value;
        const rate = +document.getElementById("rate").value;

        const years = fundAge - childAge;
        const months = years * 12;
        const monthlyRate = rate / 12 / 100;

        const invested = savings + (monthly * months);
        const futureSavings = savings * Math.pow(1 + rate/100, years);
        const futureMonthly = monthlyRate > 0
            ? monthly * (((Math.pow(1+monthlyRate, months)-1)/monthlyRate)*(1+monthlyRate))
            : monthly * months;

        const corpus = futureSavings + futureMonthly;
        const returns = corpus - invested;

        document.getElementById("invested").textContent = formatMoney(invested);
        document.getElementById("returns").textContent = formatMoney(returns);
        document.getElementById("corpus").textContent = formatMoney(corpus);

        updateChart(invested, returns);
    }

    function updateChart(invested, returns){
        const ctx = document.getElementById("chart");

        if(chart){
            chart.data.datasets[0].data = [invested, returns];
            chart.update();
            return;
        }

        chart = new Chart(ctx,{
            type:"doughnut",
            data:{
                labels:["Invested","Returns"],
                datasets:[{
                    data:[invested, returns],
                    backgroundColor:["#1F4596","#DE3F33"]
                }]
            },
            options:{
                plugins:{legend:{display:false}},
                cutout:"70%"
            }
        });
    }

    calculate();
});
</script>/* End custom CSS */