/* Hero Banner */
        /* Mobile first, default for phones */
        .hero {
            /* Replace with your best high-res interior or view image */
            background-color: #9db5d1;
            height: 25vh;
            min-height: 200;
            display: flex;
            align-items: center;
            text-align: center;
            color: var(--text-light);
        }
        /* Desktop over-ride, for screens 768px and wider */
        @media (min-width: 768px)
        {
            .hero {
            /* Replace with your best high-res interior or view image */
            background-color: #9db5d1;
            height: 20vh;
            min-height: 50px;
            display: flex;
            align-items: center;
            text-align: centre;
            color: var(--text-light);
            }
        }
        .hero-content h1 {
            font-size: 3.5rem;
            margin-bottom: 15px;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
        }
        .hero-content h3 {
            font-size: 1.5rem;
            margin-bottom: 30px;
            font-weight: 400;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
        }