<style>
  .breaking-news-container {
    display: flex; /* Flexbox layout for horizontal alignment */
    align-items: center; /* Vertically center content */
    background-color:  #ffffff; /* White background */
    border: 1px solid #856404; /* Darker border */
    border-radius: 8px; /* Rounded corners */
    padding: 5px; /* Padding inside the box */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow for 3D effect */
    margin: 15px 0; /* Margin around the box */
    transform-style: preserve-3d; /* Preserve 3D transformation */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover */
  }

  .breaking-news-container:hover {
    transform: translateY(-5px); /* Lift the container on hover */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
  }

  .breaking-news-button {
    background-color: #b30000; /* Dark red background */
    color: white; /* White text */
    padding: 10px 20px; /* Padding inside the button */
    font-size: 1rem; /* Standard font size */
    font-weight: bold; /* Bold text */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    margin-right: 15px; /* Space between button and marquee */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Add shadow for 3D effect */
    transform-style: preserve-3d; /* Ensure the button preserves 3D transformations */
    display: flex; /* Flexbox for button content */
    align-items: center; /* Vertically align icon and text */
    gap: 8px; /* Space between icon and text */
  }

  .breaking-news-button:hover {
    background-color: #cc0000; /* Lighter red on hover */
    transform: translateY(-3px); /* Lift the button slightly */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
  }

  .marquee {
    overflow: hidden; /* Hide overflow */
    white-space: nowrap; /* Prevent line breaks */
    width: 100%;
    box-sizing: border-box;
  }

  .marquee p {
    display: inline-block;
    padding-left: 100%; /* Start from outside the box */
    animation: marquee 15s linear infinite; /* Animation properties */
    transition: transform 0.2s ease; /* Smooth transition when paused */
  }

  @keyframes marquee {
    0% {
      transform: translate(0);
    }
    100% {
      transform: translate(-100%);
    }
  }

  .breaking-news-container:hover p {
    animation-play-state: paused; /* Pause on hover */
    color: #000; /* Interaction feedback: change text color on hover */
  }

  /* Mobile responsiveness */
  @media (max-width: 768px) {
    .breaking-news-button {
      font-size: 0.875rem; /* Adjust font size for mobile */
      padding: 8px 16px; /* Adjust padding */
    }

    .marquee p {
      animation-duration: 20s; /* Slow down the animation on smaller screens */
    }
  }
</style>