.pricing-card {
 
    font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     background: linear-gradient(311deg, #311ABD, #6600AD);
     color: white;
     padding: 30px;
     border-radius: 15px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     width: 100%;
     text-align: center;
   }
  
   .pricing-card h1 {
      font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700; 
     font-size:40px !important;  
     margin: 0;
     font-size: 28px;
     color:#fff
   }
  
   .pricing-card p {
      font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:500; 
     font-size:16px !important;  
     margin: 10px 0; 
     color:#D7D7D7;
   }
  
   .range-container {
     margin: 20px 0;
     display: flex; 
     justify-content: space-between;
   }
  
   .range-container label {
     font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700; 
     font-size:16px !important;   
     display:flex; 
     width:150px;
   }
   .range-container .slider-content{
     width:70%;
   }
  
  
   .price-col {
     margin: 20px 0;
     font-size: 24px;
   }
  
   button {
     background-color: transparent;
     border: 2px solid white;
     color: white;
     padding: 10px 20px;
     font-size: 16px;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s;
   }
  
   button:hover {
     background-color: white;
     color: #3c0e70;
   }
   
   .final-row{
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   .final-row .price-col  {
     font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700; 
     font-size:30px !important;  
   }
   .smal  .pricing-card {
  
    font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     background: linear-gradient(311deg, #311ABD, #6600AD);
     color: white;
     padding: 30px;
     border-radius: 15px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     width: 100%;
     text-align: center;
   }
  
   .pricing-card h1 {
      font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700; 
     font-size:40px !important;  
     margin: 0;
     font-size: 28px;
     color:#fff
   }
  
   .pricing-card p {
      font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:500; 
     font-size:16px !important;  
     margin: 10px 0; 
     color:#D7D7D7;
   }
  
   .range-container {
     margin: 20px 0;
     display: flex; 
     justify-content: space-between;
   }
  
   .range-container label {
     font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700; 
     font-size:16px !important;   
     display:flex; 
     width:150px;
   }
   .range-container .slider-content{
     width:70%;
   }
  
  
   .price {
     margin: 20px 0;
     font-size: 24px;
   }
  
   button {
     background-color: transparent;
     border: 2px solid white;
     color: white;
     padding: 10px 20px;
     font-size: 16px;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s;
   }
  
   button:hover {
     background-color: white;
     color: #3c0e70;
   }
   
   .final-row{
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   .final-row .price .approx_price{
     font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700; 
     font-size:40px !important;  
   }
   .small-text{
     font-size: 12px;
       font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:500; 
     justify-items: center;
     align-items: center;
   } 
   .ss {
    background-color: #bb6df2;
    border-radius: 50px; 
    height: fit-content;
     display:flex;
     padding:3px;
  }
  .ss-outer:hover .dim-item {
    opacity: 1;
  }
  
   input{
     display: inline-block;
     vertical-align: middle;
     font-size: 1em;
     font-family: Arial, sans-serif;
   }
  
    
  
   input[type="number"] {
     width: 40px;
     padding: 4px 5px;
     border: 1px solid #bbb;
     border-radius: 3px;
   }
  
  
   input[type="range"] {
    
     -webkit-appearance: none;  
     height: 17px;
     background: #bb6df2;
     border-radius: 50px;
     background-image: linear-gradient(#fff, #fff) !important;
     background-size: 0% 100% ;
     background-repeat: no-repeat;
   }
  
   /* Input Thumb */
   input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     height: 20px;
     width: 20px;
     border-radius: 50%;
     border: 1px solid #bb6df2;
     background: #fff;
     cursor: pointer;
     box-shadow: 0 0 2px 0 #555;
     transition: background 0.3s ease-in-out;
   }
  
   input[type="range"]::-moz-range-thumb {
     -webkit-appearance: none;
     height: 20px;
     width: 20px;
     border-radius: 50%;
     border: 1px solid #bb6df2;
     background: #fff;
     cursor: pointer;
     box-shadow: 0 0 2px 0 #555;
     transition: background 0.3s ease-in-out;
   }
  
   input[type="range"]::-ms-thumb {
     -webkit-appearance: none;
     height: 20px;
     width: 20px;
     border-radius: 50%;
     border: 1px solid #bb6df2;
     background: #fff;
     cursor: pointer;
     box-shadow: 0 0 2px 0 #555;
     transition: background 0.3s ease-in-out;
   }
  
   /* Input Track */
   input[type="range"]::-webkit-slider-runnable-track {
     -webkit-appearance: none;
     box-shadow: none;
     border: none;
     background: transparent;
   }
  
   input[type="range"]::-moz-range-track {
     -webkit-appearance: none;
     box-shadow: none;
     border: none;
     background: transparent;
   }
  
   input[type="range"]::-ms-track {
     -webkit-appearance: none;
     box-shadow: none;
     border: none;
     background: transparent;
   }
   .ss-outer {
     margin-bottom: 20px;
   }
   .ss-outer:hover .dim-item {
     opacity: 1;
   }
  
   .dim-item {
     opacity: 0.5; /* Adjust this to your dimming effect */
   }l-text{
     font-size: 12px;
       font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:500; 
     justify-items: center;
     align-items: center;
   } 
  
   
   .ss {
     background-color: #bb6df2;
     border-radius: 50px; 
     height: fit-content;
   }
   input,
   output {
     display: inline-block;
     vertical-align: middle;
     font-size: 1em;
     font-family: Arial, sans-serif;
   }
  
    
   input[type="number"] {
     width: 40px;
     padding: 4px 5px;
     border: 1px solid #bbb;
     border-radius: 3px;
   }
  
   input[type="range"] {
     -webkit-appearance: none;
     width: 98.5%;
     height: 17px;
     background: #bb6df2;
     border-radius: 50px;
     background-image: linear-gradient(#fff, #fff);
     background-size: 0% 100%;
     background-repeat: no-repeat;
   }
  
   /* Input Thumb */
   input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     height: 20px;
     width: 20px;
     border-radius: 50%;
     border: 1px solid #bb6df2;
     background: #fff;
     cursor: pointer;
     box-shadow: 0 0 2px 0 #555;
     transition: background 0.3s ease-in-out;
   }
  
   input[type="range"]::-moz-range-thumb {
     -webkit-appearance: none;
     height: 20px;
     width: 20px;
     border-radius: 50%;
     border: 1px solid #bb6df2;
     background: #fff;
     cursor: pointer;
     box-shadow: 0 0 2px 0 #555;
     transition: background 0.3s ease-in-out;
   }
  
   input[type="range"]::-ms-thumb {
     -webkit-appearance: none;
     height: 20px;
     width: 20px;
     border-radius: 50%;
     border: 1px solid #bb6df2;
     background: #fff;
     cursor: pointer;
     box-shadow: 0 0 2px 0 #555;
     transition: background 0.3s ease-in-out;
   }
  
   /* Input Track */
   input[type="range"]::-webkit-slider-runnable-track {
     -webkit-appearance: none;
     box-shadow: none;
     border: none;
     background: transparent;
   }
  
   input[type="range"]::-moz-range-track {
     -webkit-appearance: none;
     box-shadow: none;
     border: none;
     background: transparent;
   }
  
   input[type="range"]::-ms-track {
     -webkit-appearance: none;
     box-shadow: none;
     border: none;
     background: transparent;
   }
  
  
   .dim-item {
     opacity: 0.5; /* Adjust this to your dimming effect */
   }