/* Global Styling for All <hr> Elements */
hr {
    border: 0; /* Remove default border */
    height: 3px; /* Maximum thickness */
    background: transparent; /* Ensure the gradient effect is visible */
    margin: 1em 0; /* Space around the divider */
    position: relative; /* Required for positioning the pseudo-element */
    overflow: hidden; /* Hide any overflow from the pseudo-element */
}

/* Pseudo-element for Gradient Effect */
hr::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px; /* Maximum thickness in the center */
    background: linear-gradient(to right, 
        rgba(42, 112, 157, 0.20) 0%, /* Lightest at the edges */
        rgba(42, 112, 157, 0.70) 50%, /* Darker in the center */
        rgba(42, 112, 157, 0.20) 100% /* Lightest at the edges */
    );
    background-size: 100% 100%; /* Ensures the gradient covers the full height */
    background-repeat: no-repeat; /* Prevents the gradient from repeating */
    z-index: 1; /* Places the gradient above the base <hr> element */
    transform: scaleY(0.5); /* Scale the height to create tapering effect */
}
