* { margin:0; padding:0; box-sizing:border-box; }
        html, body { height:100%; margin:0; padding:0; }

        body {
            font-family: Arial, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: #0066ff;
        }

        /* ────────────────────────────────
           EASY SETTINGS – change only here!
           ──────────────────────────────── */
        :root {
            /* Text position inside the footer image */
            --text-offset-x: 50px;   /* positive = move right, negative = move left */
            --text-offset-y: 6px;    /* positive = move down, negative = move up */

            /* Desktop text sizes & spacing */
            --company-size:      2rem;
            --company-margin:    10px;
            --line-size:         1.1rem;
            --line-margin:       5px;
            --line-height:       1.25;

            /* Portrait mobile – tighter values (automatically used) */
            --mobile-company:    1.1rem;
            --mobile-line:       0.65rem;
            --mobile-margin:     2px;
        }
        /* ──────────────────────────────── */

        .top-banner {
            width: 100%; max-width: 980px; height: 85px;
            margin: 0 auto; display: block; object-fit: cover;
        }

        main {
            flex: 1;
            padding: 60px 20px;
            text-align: center;
            color: white;
        }

        footer { width:100%; height:250px; flex-shrink:0; overflow:hidden; }

        .footer-wrapper {
            position: relative;
            width: 980px; max-width: 100%; height: 250px;
            margin: 0 auto;
        }

        .footer-bg {
            position: absolute;
            inset: 0;
            background: url('/images/footer.jpg') center center no-repeat;
            background-size: contain;
        }

        .footer-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* these two lines do the exact alignment you asked for */
            margin-left: var(--text-offset-x);
            margin-top:  var(--text-offset-y);

            text-align: center;
            color: white;
            text-shadow: 2px 2px 6px rgba(0,0,0,0.9);
            width: 90%;
            padding: 0 20px;
            z-index: 2;
        }

        .footer-content h2 {
            font-size: var(--company-size);
            margin-bottom: var(--company-margin);
        }

        .footer-content p {
            font-size: var(--line-size);
            margin: var(--line-margin) 0;
            line-height: var(--line-height);
        }

        /* Mobile & tablet */
        @media (max-width: 980px) {
            .top-banner { max-width:none; width:100vw; height:auto; }
            footer { height: calc(250 / 980 * 100vw); }
            .footer-wrapper { width:100vw; height:100%; margin:0; }
            .footer-bg { background-size:100% 100%; }
        }

        /* Portrait phones – automatically use tighter values */
        @media (orientation: portrait) and (max-width: 600px) {
            .footer-content h2 {
                font-size: var(--mobile-company);
                margin-bottom: var(--mobile-margin);
            }
            .footer-content p {
                font-size: var(--mobile-line);
                margin: var(--mobile-margin) 0;
                line-height: 1.2;
            }
        }