#rate-body{ font-family: Arial; 
       padding: 40px; 
       background-color: purple; 
       
        background-image: url("\\img/rate-page-background.png");
            background-repeat: no-repeat; /* Prevents the image from repeating */
            background-size: cover;      /* Ensures the image covers the entire viewport */
            background-position: center; /* Centers the image */
            background-attachment: fixed;/* Makes the background fixed during scroll */
        }
       

.main-rate-body {
      background-color: #ffffff;
      margin: 30px auto;
      border-radius: 5px;
      /* Fallback for older browsers */
  background-color: rgb(255, 255, 255); 
  
  /* Modern browsers: White background with 50% opacity */
  background-color: rgba(255, 255, 255, 0.5); 
  
  /* Text color (change to dark for visibility on white) */
  color: #000; 
  
  padding: 20px;

}   


.box { max-width: 60%; 
background: #fff; 
padding: 20px; 
margin: 30px auto; 
 border-radius: 5px;
   border: 1px solid #ececec;
   text-align: center;

    
}
   
 .box form{
     margin: auto 20px;
 }       
input, button { width: 100%; padding: 10px; margin-top: 10px; }
        
.result { background: #f1f1f1; 
padding: 10px; 
margin-top: 15px; 
    
}
  

.rate-sheet {
  max-width: 60%;
  margin: 30px auto;
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  border: 1px solid #ececec;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.rate-sheet table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.rate-sheet th,
.rate-sheet td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.rate-sheet th {
  background-color: #f4f4f4;
}

.rate-sheet .note {
  font-size: 0.9em;
  margin-top: 10px;
  color: #555;
}

   
        .calculator {
            max-width: 400px;
            background: #fff;
            padding: 20px;
            margin: auto;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        input, button {
            width: 50%;
            padding: 10px;
            margin-top: 10px;
        }
        .result {
            margin-top: 15px;
            background: #f1f1f1;
            padding: 10px;
            border-radius: 5px;
        }