/* The Modal (background) */
 .modal {
     display: none;
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 100;
     /* Sit on top */
     left: 0;
     top: 0;
     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: auto;
     /* Enable scroll if needed */
     background-color: rgba(0, 0, 0, 0.5);
     /* Black w/ opacity */
     justify-content: center;
     align-items: center;
 }

 /* Modal Content/Box */
 .modal-content {
     background-color: #fff;
     padding: 2.5rem;
     border-radius: 1rem;
     width: 90%;
     max-width: 500px;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     animation: slideIn 0.3s ease-out;
 }

 /* Animation for the modal content */
 @keyframes slideIn {
     from {
         transform: translateY(-50px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 /* Button styling */
 .btn-primary {
     color: white;
     padding: 0.75rem 1.5rem;
     border-radius: 0.5rem;
     font-weight: 600;
     transition: background-color 0.2s;
     cursor: pointer;
 }
 .btn-secondary {
     background-color: #e5e7eb;
     color: #4b5563;
     padding: 0.75rem 1.5rem;
     border-radius: 0.5rem;
     font-weight: 600;
     transition: background-color 0.2s;
     cursor: pointer;
 }

 .btn-secondary:hover {
     background-color: #d1d5db;
 }