.custom-banner2 {
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    margin: 10px 0;
    font-weight: bold;
    animation: fadeIn 1.5s ease-in;
}
  .custom-banner2 i {
    margin-right: 10px;
  }
  
  .custom-banner2.important .important-icon,
  .custom-banner2.warning .warning-icon,
  .custom-banner2.normal .normal-icon {
    display: inline-block;
  }
  
  .custom-banner2.important .info-icon,
  .custom-banner2.warning .info-icon,
  .custom-banner2.normal .important-icon {
    display: none;
  }
  
  .custom-banner2.important {
    background-color: #f8d7da;
    color: #721c24;
    animation-name: colorChange;
    animation-duration: 1s; /* Slower transition for a smoother effect */
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; /* Smooth start and end */
}

@keyframes colorChange {
    0%, 100% {
        background-color: #f8d7da; /* Light pink */
        color: #721c24; /* Dark red */
    }
    50% {
        background-color: #fee2e6; /* Softer, lighter pink */
        color: #892b34; /* Slightly lighter red */
    }
}

  .custom-banner2.important .important-icon {
    color: #721c24;
  }
  
  .custom-banner2.warning {
    background-color: #fff3cd;
    color: #856404;
  }
  
  .custom-banner2.warning .warning-icon {
    color: #856404;
  }
  
  .custom-banner2.normal {
    background-color: #d4edda;
    color: #155724;
  }
  
  .custom-banner2.normal .normal-icon {
    color: #155724;
  }
  
  .important-icon {
    color: #dc3545; /* default red color for important icon */
  }
  
  .info-icon {
    color: #17a2b8; /* default blue color for info icon */
  }