/* Page header blurred background */
        .page-header {
            position: relative;
            overflow: hidden;
            z-index: 0;
        }
        .page-header::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url('img/header.png'); /* put your image at img/header-bg.jpg */
            background-size: cover;
            background-position: center;
            transform: scale(1.06);
            filter: blur(3px) brightness(0.9);
            z-index: 0;
            will-change: transform, filter;
        }
        /* subtle dark overlay for readable text */
        .page-header::after {
            content: "";
            position: absolute;
            inset: 0;
             background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
            z-index: 1;
        }
        .page-header .container {
            position: relative;
            z-index: 2; /* bring text above the blurred bg */
        }

        /* smaller screens: reduce blur/scale for performance */
        @media (max-width: 576px) {
            .page-header::before { transform: scale(1.02); filter: blur(4px) brightness(0.65); }
        }