/*-- Calculator  --*/
      /* Add CSS for EMI Calculator here */
      .cal_container {
       background-color: #ffffff;
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       max-width: 800px;
       width: 100%;
       display: flex;
       flex-direction: column;
       height: 420px;
       align-items: center;
       margin: 90px auto;
   }

   h1 {
       font-size: 28px;
       font-weight: bold;
       margin: 0 0 20px 0;
       text-align: left;
   }

   .cal_columns {
       display: flex;
       justify-content: space-between;
       width: 100%;
       margin-top: 20px;
       flex-wrap: wrap;
   }

   .cal_calculator {
       width: 40%;
       min-width: 250px;
   }

   .cal_slider {
       width: 100%;
       margin-bottom: 35px;
       position: relative;
   }

   .cal_slider label {
       display: block;
       margin-bottom: 5px;
   }

   .cal_slider input[type="range"] {
       width: 100%;
       margin-top: 5px;
   }

   .cal_slider input[type="number"] {
       position: absolute;
       right: 0;
       width: 80px;
       height: 20px;
       -webkit-appearance: none;
       margin: 0;
       -moz-appearance: textfield;
       -ms-appearance: textfield;
       appearance: textfield;
   }

   /* Hide number input spinners in WebKit browsers */
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
       -webkit-appearance: none;
       margin: 0;
   }

   .cal_range-labels {
       display: flex;
       justify-content: space-between;
       font-size: 14px;
   }

   .cal_result-section {
       width: 50%;
       display: flex;
       justify-content: space-around;
       min-width: 250px;
       margin-top: 0px;
   }

   .cal_result {
       text-align: left;
       width: 45%;
   }

   .cal_result h2 {
       margin: 0;
       font-size: 14px;
       font-weight: bold;
       color: #566573;
   }

   .cal_result p {
       font-size: 25px;
       margin: 0;
       font-weight: bold;
       color: black;
   }

   .cal_details {
       margin-top: 30px;
       text-align: left;
   }

   .cal_details div {
       margin-bottom: 23px;
       text-align: left;
   }

   .cal_details div p {
       margin: 0;
       font-size: 14px;
       color: #566573;
   }

   .cal_details div span {
       display: block;
       font-size: 20px;
       font-weight: 600;
       margin-top: 5px;
       color: black;
   }

   .cal_pie-chart {
       width: 200px;
       height: 200px;
       background: conic-gradient(#1a73e8 0% 0%, #34a853 0% 0%, #ea4335 0%);
       border-radius: 50%;
       align-self: center;
   }

   @media (max-width: 768px) {
       .cal_container {
           padding: 15px;
           height: auto;
       }

       .cal_columns {
           flex-direction: column;
           align-items: center;
       }

       .cal_calculator {
           width: 100%;
           max-width: 400px;
           margin-bottom: 20px;
       }

       .cal_result-section {
           width: 100%;
           flex-direction: column;
           align-items: center;
       }

       .cal_result {
           width: 100%;
           max-width: 400px;
           text-align: center;
       }

       .cal_pie-chart {
           width: 150px;
           height: 150px;
       }
   }
   @media (max-width: 576px) {
       .cal_result {
           width: 100%;
           max-width: 400px;
           text-align: center;
       }
   }

   @media (max-width: 480px) {
       .cal_slider input[type="number"] {
           width: 60px;
           height: 18px;
       }

       .cal_result h2 {
           font-size: 12px;
       }

       .cal_result p {
           font-size: 20px;
       }

       .cal_details div p {
           font-size: 12px;
       }

       .cal_details div span {
           font-size: 18px;
       }
   }
       /* Content Section */
.content-section {
 flex: 1;
 padding: 20px;
 background-color: #fff;
 margin: 20px auto;
 max-width: 1000px;
 width: 100%;
 border-radius: 12px;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.content-section h2 {
 color:black;
 margin-bottom: 15px;
}

.content-section p {
 line-height: 1.6;
 margin-bottom: 20px;
}

.content-section ul {
 list-style-type: disc;
 margin-left: 20px;
}

.content-section li {
 margin-bottom: 10px;
}
@media (max-width: 768px){
 .content-section{
   max-width:450px;
   margin-left:20px;
 }
}