.volunteer-modal {
        display: none;
        position: fixed;
        z-index: 2000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7);
        animation: fadeIn 0.3s;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .volunteer-modal-content {
        background-color: #fefefe;
        margin: 5% auto;
        padding: 0;
        border-radius: 8px;
        width: 90%;
        max-width: 600px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        animation: slideIn 0.3s;
      }

      @keyframes slideIn {
        from {
          transform: translateY(-50px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      .volunteer-modal-header {
        padding: 20px 30px;
        background: linear-gradient(135deg, #f96d00 0%, #ff8c42 100%);
        color: white;
        border-radius: 8px 8px 0 0;
        position: relative;
      }

      .volunteer-modal-header h3 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
      }

      .volunteer-modal-close {
        color: white;
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 32px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
        line-height: 1;
      }

      .volunteer-modal-close:hover,
      .volunteer-modal-close:focus {
        color: #ffddcc;
        transform: rotate(90deg);
      }

     .volunteer-modal-close-partner {
  color: white;
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  line-height: 1;
}

.volunteer-modal-close-partner:hover,
.volunteer-modal-close-partner:focus {
  color: #ffddcc;
  transform: rotate(90deg);
}

      .volunteer-modal-body {
        padding: 30px;
      }

      .volunteer-modal-body .form-group {
        margin-bottom: 20px;
      }

      .volunteer-modal-body .form-control {
        border: 2px solid #e0e0e0;
        border-radius: 5px;
        padding: 12px 15px;
        transition: border-color 0.3s;
        font-size: 15px;
        color: #333;
      }

      .volunteer-modal-body .form-control::placeholder {
        color: #999;
        opacity: 1;
        font-size: 14px;
      }

      .volunteer-modal-body .form-control:focus {
        border-color: #f96d00;
        outline: none;
        box-shadow: 0 0 0 3px rgba(249, 109, 0, 0.1);
      }

      .volunteer-modal-body .btn-primary {
        background: linear-gradient(135deg, #f96d00 0%, #ff8c42 100%);
        border: none;
        padding: 12px 30px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 5px;
        transition: transform 0.3s, box-shadow 0.3s;
      }

      .volunteer-modal-body .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(249, 109, 0, 0.3);
      }

      .form-status {
        margin-top: 15px;
        font-weight: 500;
      }