.custom-modal .modal-content {
     border-radius: 20px;
     overflow: hidden;
 }

 .custom-modal-header {
     background: linear-gradient(to right, #b173f1, #d9a7f5);
     color: white;
     padding: 1rem;
     text-align: center;
     position: relative;
 }

 .custom-modal-header h5 {
     font-weight: bold;
     margin: 0;
 }

 .close-btn {
     position: absolute;
     right: 10px;
     top: 10px;
     font-size: 1.2rem;
     color: white;
     background: transparent;
     border: none;
 }

 .arrow-btn {
     background-color: #b173f1;
     color: white;
     border: none;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     font-size: 1.2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     margin: 0 10px;
 }

 .markread {
     background-color: #c896e6ff;
     color: white;
     border: none;
     padding: 0.5rem 1rem;
     border-radius: 5px;
     cursor: pointer;
     font-size: 14px;
 }

 .custom-modal-body {
     padding: 1rem 1.5rem;
     font-size: 14px;
     color: #333;
 }

 .modal-footer-custom {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1rem;
     padding-bottom: 1rem;
 }