.calculator {
     display: flex;
     max-width: 900px;
     margin: auto;
     background: #fff;
     padding: 30px;
     border: 1px solid #ccc;
     border-radius: 12px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }

 .left,
 .right {
     flex: 1;
 }

 .left {
     padding-right: 30px;
 }

 .calculator h2 {
     margin-bottom: 30px;
     font-size: 22px;
     color: #333;
     font-weight: 700;
 }

 .input-group {
     margin-bottom: 30px;
 }

 .input-group input {
     border-radius: 100px !important;
     padding: 10px 0 10px 0;
 }

 .input-group .value {
     margin-left: 5px !important;
     margin-top: 5px;
 }

 .input-group label {
     margin-top: 5px;
     font-size: 15px;
     color: #555;
     display: block;
     margin-bottom: 10px;
 }

 .input-group .value {
     text-align: right;
     color: var(--main-color);
     font-weight: bold;
 }

 .loan_right img {
     width: 100%;
     height: 100%;
     border-radius: 10px;
     border: 1px solid #ccc;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
 }

 .loan_right {
     position: sticky;
     top: 12rem;
 }

 input[type="range"] {
     -webkit-appearance: none;
     width: 100%;
     height: 6px;
     background: #eee;
     border-radius: 3px;
     outline: none;
 }

 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 20px;
     height: 20px;
     border-radius: 100px;
     background: var(--main-color);
     cursor: pointer;
 }

 input[type="range"]::-moz-range-thumb {
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: var(--main-color);
     cursor: pointer;
 }

 .btn {
     background: var(--main-color);
     color: white;
     padding: 12px 25px;
     font-size: 16px;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     margin-top: 10px;
 }

 .right {
     display: flex;
     flex-direction: column;
     gap: 20px;
     justify-content: center;
 }

 .result-box {
     background: whitesmoke;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
     border: 2px solid var(--main-color);
     border-radius: 10px;
     padding: 20px;
     text-align: center;
 }

 .result-box h3 {
     margin: 0;
     font-weight: 700;
     color: var(--main-color);
     font-size: 24px;
 }

 .result-box p {
     margin-top: 5px;
     font-size: 18px;
     color: #555;
 }

 /* loan_table */
 .loan_table {
     margin-top: 1rem;
     width: 100%;
     overflow-x: auto;
 }

 .loan_table table {
     border-collapse: collapse;
     min-width: 900px;
     overflow-x: scroll;
 }

 .monthly_wrapper {
     background-color: whitesmoke;
     padding: 50px 0;
 }

 .loan_table table {
     background-color: white;
 }


 /* faq_box */
 .faq_box {
     border-bottom: 1px solid #ccc;
 }

 .faq_box.active .question {
     background-color: var(--main-color);
 }

 .faq_box.active .question h3 {
     color: var(--white-color);
 }

 .faq_box.active .answer {
     height: auto;
     padding: 1rem;
     transition: .3s ease all;
 }

 .question h3 {
     font-size: 18px;
     font-weight: 600;
     cursor: pointer;
 }

 .answer p {
     font-size: 17px;
     margin-bottom: 5px !important;
 }

 .answer {
     height: 0;
     overflow: hidden;
     transition: .3s ease all;
     padding: 0 16px;
 }

 .question {
     padding: 1rem;
 }

 /* repay_left */
 .repay_left h3,
 .repay_right h3 {
     font-size: 24px;
     font-weight: 600;
 }

 .qrcode_img {
     margin-top: 1rem;
 }
 .qrcode_img{
    height: 400px;
    width: 100%;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: whitesmoke;
 }
 .qrcode_img span{
    font-weight: 600;
    text-align: center;
    font-size: 35px;
 }

 .qrcode_img img {
     width: 100%;
     background-color: whitesmoke;
     border: 1px solid #ccc;
 }

 .table-responsive {
     margin-top: 1rem;
     border: 1px solid #ccc;
     padding: 1rem;
     background-color: whitesmoke;
 }

 .table-responsive .table td {
     color: var(--black-color);
 }

 @media(max-width:992px) {
     .repay_right {
         margin-top: 1rem;
     }

     .loan_right {
         margin-top: 1rem;
     }
 }

 @media(max-width:768px) {
    .qrcode_img{
        height: 300px;
    }
    .qrcode_img span{
        font-size: 22px;
    }
     .monthly_wrapper {
         padding: 30px 0;
     }

     .repay_left h3,
     .repay_right h3 {
         font-size: 20px;
     }

     .table-responsive .table td,
     .answer p {
         line-height: 25px;
         font-size: 15px;
     }

     .answer {
         padding: 0 10px;
     }

     .faq_box.active .answer {
         padding: 10px;
     }

     .question h3 {
         font-size: 16px;
     }

     .question {
         padding: 10px;
     }

 }

 @media(max-width:576px) {
     .calculator {
         flex-direction: column;
         gap: 1rem;
         padding: 20px;
     }

     .calculator h2 {
         font-size: 18px;
     }

     .input-group {
         margin-bottom: 1rem;
     }

     .result-box {
         padding: 1rem;
     }

     .right {
         gap: 1rem;
     }

     .result-box h3 {
         font-size: 18px;
     }

     .result-box p {
         font-size: 16px;
     }
 }