/* Loader Container */
 .loader-main {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
     /* Semi-transparent background */
     display: flex;
     justify-content: center;
     /* Horizontally centers the spinner */
     align-items: center;
     /* Vertically centers the spinner */
     z-index: 9999;
     /* Ensure the loader is above other content */
 }

 /* Spinner style */
 .spinner-main {
     border: 4px solid rgba(255, 255, 255, 0.3);
     border-top: 4px solid #fff;
     border-radius: 50%;
     width: 50px;
     height: 50px;
     animation: spin 1s linear infinite;
 }

 .spinner {
     border: 4px solid #f3f3f3;
     border-top: 4px solid #333;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     animation: spin 0.8s linear infinite;
     margin: 0 auto;
 }

 /* Animation for the spinner */
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }