h1 {
  margin: 25px 15px;
  font-size: 24px;
}
  .calculatorCard{
    background:white;
  
    border-radius:24px;
  
    padding:30px;
  
    border:1px solid #e7ebf0;
  
    box-shadow:
      0 10px 35px rgba(0,0,0,0.05);
  
    display:grid;
  
    grid-template-columns:
      1.1fr 0.9fr;
  
    gap:50px;
  }
  
  .leftSection h1{
    font-size:36px;
    margin-bottom:10px;
  }
  
  .leftSection p{
    color:#667085;
    margin-bottom:36px;
  }
  
  .sliderGroup{
    margin-bottom:42px;
  }
  
  .labelRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:18px;
  }
  
  label{
    font-size: 16px;
    color: #1f2940e6;
    font-family: system-ui;
  }
  
  .valueBox{
    min-width:120px;
  
    height:46px;
  
    background:#e8f5ef;
  
    border-radius:12px;
  
    display:flex;
    align-items:center;
    justify-content:center;
  
    gap:4px;
  
    padding:0 14px;
  
    color:#00b386;
  
    font-weight:700;
  }
  
  .valueBox input{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    text-align:right;
    font-size: 20px;
    color: #00b386;
    font-weight: 600;
    font-family: 'Roboto';
  }
  
  input[type="range"]{
    width:100%;
  
    appearance:none;
  
    height:6px;
  
    border-radius:20px;
  
    background:#e5e7eb;
  }
  
  input[type="range"]::-webkit-slider-thumb{
  
    appearance:none;
  
    width:26px;
    height:26px;
  
    border-radius:50%;
  
    background:white;
  
    border:5px solid #00b386;
  
    cursor:pointer;
  
    margin-top:-10px;
  
    box-shadow:
      0 4px 12px rgba(0,0,0,0.1);
  }
  
  input[type="range"]::-webkit-slider-runnable-track{
    height:6px;
    border-radius:20px;
  }
  
  .legend{
    display:flex;
    justify-content:center;
    gap:22px;
    flex-wrap:wrap;
  }
  
  .legendItem{
    display:flex;
    align-items:center;
    gap:8px;
    color:#667085;
    font-size:14px;
  }
  
  .dot{
    width:18px;
    height:10px;
    border-radius:20px;
  }
  
  .invested{
    background:#4f5dff;
  }
  
  .balance{
    background:#dfe3f5;
  }
  
  .chartWrapper{
    height:320px;
    margin-top:18px;
  }
  
  .results{
    margin-top:34px;
  
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  
  .resultRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
  }
  
  .resultRow span{
    color:#667085;
    font-size:16px;
  }
  
  .resultRow strong{
    font-size: 20px;
    color: #1f2940;
    font-family: system-ui;
  }
  
  @media(max-width:1100px){
  
    .calculatorCard{
      grid-template-columns:1fr;
    }
  }
  
  @media(max-width:768px){
  
    body{
      padding:0px;
    }
  
    .calculatorCard{
      padding:20px;
      gap:20px;
    }
  
    .leftSection h1{
      font-size:30px;
    }
  
    .labelRow{
      flex-direction:column;
      align-items:flex-start;
    }
  
    .valueBox{
      width:100%;
      max-width: 100% !important;
    }
  
    .valueBox input{
      font-size:24px;
      border: none !important;
    }
  
    .chartWrapper{
      height:260px;
    }
  
    .resultRow strong{
      font-size:22px;
    }
  }