.container2 {
     height: auto;
     width: 100%;
     border-radius: 20px;
     padding: 20px;

     margin: auto;
     display: block;
     background-image: linear-gradient(to top left, #fff, #dce7ef, #dce7ef);
 }

 .sub-container {
     display: flex;
     width: 100%;
     gap: 50px;
     height: max-content;
 }

 .header2 {
     width: 100%;
     height: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 30px;
 }

 .header2 button {
     height: max-content;
     width: max-content;
     padding: 10px;
     border: none;
     background-color: transparent;
     font-size: 35px;
     color: #1075BE;
 }

 .header2 button:hover {
     cursor: pointer;
 }

 .view,
 .breakup {
     width: 50%;
 }

 .details input {
     width: 100%;
 }

 .detail {
     display: flex;
     justify-content: space-between;
 }

 .footer {
     display: flex;
     justify-content: space-between;
 }

 /*----- Styling the sliders ----*/
 input[type="range"] {
     -webkit-appearance: none;
     margin: 10px 0;
     width: 100%;
 }

 input[type="range"]:focus {
     outline: none;
 }

 input[type="range"]::-webkit-slider-runnable-track {
     width: 100%;
     height: 6px;
     cursor: pointer;
     background: #1075BE;
     border-radius: 10px;
 }

 input[type="range"]::-webkit-slider-thumb {
     box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
     border: 5px solid #ffffff;
     height: 20px;
     width: 20px;
     border-radius: 50%;
     background: #1075BE;
     cursor: pointer;
     margin-top: -6px;
     -webkit-appearance: none;
 }

 input[type="range"]:focus::-webkit-slider-runnable-track {
     background: #b3b3b3;
 }

 input[type="range"]::-moz-range-track {
     width: 100%;
     height: 6px;
     cursor: pointer;
     background: #1075BE;
     border-color: transparent;
     border-width: 16px 0;
     color: transparent;
     border-radius: 10px;
 }

 input[type="range"]::-moz-range-thumb {
     box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
     border: 5px solid #ffffff;
     height: 20px;
     width: 20px;
     border-radius: 50%;
     background: #1075BE;
     cursor: pointer;
     margin-top: -6px;
 }

 input[type="range"]::-ms-track {
     width: 100%;
     height: 6px;
     cursor: pointer;
     background: #1075BE;
     border-color: transparent;
     border-width: 16px 0;
     color: transparent;
     border-radius: 10px;
 }

 input[type="range"]::-ms-fill-lower {
     background: #1075BE;
     border-radius: 5px;
 }

 input[type="range"]::-ms-fill-upper {
     background: #1075BE;
     border-radius: 5px;
 }

 input[type="range"]::-ms-thumb {
     box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
     border: 5px solid #ffffff;
     height: 20px;
     width: 20px;
     border-radius: 50%;
     background: #1075BE;
     cursor: pointer;
     margin-top: -6px;
 }

 input[type="range"]:focus::-ms-fill-lower {
     background: #1075BE;
 }

 input[type="range"]:focus::-ms-fill-upper {
     background: #1075BE;
 }

 /*-------------------------------------*/
 #price {
     color: #130f31;
     font-size: 25px;
 }

 .loan-details {
     width: 90%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 30px;
 }

 #price-container {
     color: #1075BE;
     margin-top: 50px;
 }

 #price-container::before {
     content: "Monthly Payable:";
     font-size: 12px;
     display: block;
 }