.heading-container {
    position: relative;
    text-align: center; /* Center the text */
    margin: 40px 0; /* Add space above and below */
}

.crossed-heading {
    font-size: 3rem; /* Adjust the size as needed */
    text-decoration: line-through; /* Create the crossed-out effect */
    color: #ccc; /* Light grey for the crossed-out text */
    margin-bottom: -30px; /* Move it up to overlap the next heading */
}

.highlighted-heading {
   
    color: #ffffff; /* Change this to your desired accent colour */
    background-color: #007bff; /* Background colour for emphasis */
    padding: 10px 20px; /* Add padding around the text */
    border-radius: 5px; /* Rounded corners for the background */
    display: inline-block; /* To ensure the background only covers the text */
}




.crossed-heading {
    position: relative; /* Position relative for the pseudo-element */
    
    color: #000; /* Text color */
    margin: 20px 0; /* Margin for spacing */
}

.crossed-heading:after {
    content: ""; /* Empty content for the line */
    position: absolute; /* Position it absolutely */
    left: 0; /* Start from the left */
    top: 50%; /* Center vertically */
    width: 100%; /* Full width */
    height: 4px; /* Thickness of the line */
    transform: translateY(-50%); /* Adjust to perfectly align with text */
    z-index: -1; /* Place it behind the text */
}