@media (max-width: 520px) {
    .container {
        padding: 16px 12px;
    }
    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 0;
        border-bottom: none;
    }
    .brand h1 {
        font-size: 18px;
    }
    .brand p {
        font-size: 13px;
    }
    /* Hero*/
    @media (max-width: 520px) {
        .hero {
            display: flex;
            flex-direction: column;
            gap: 28px;
            padding: 24px 0;
            align-items: center;
            /* center all hero children horizontally */
            text-align: center;
            /* center text inside */
        }
        .hero-card {
            width: 100% !important;
            max-width: 420px;
            margin: 0 auto;
            text-align: center;
            padding-left: 0 !important;
            padding-right: 0 !important;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* center all content inside hero-card */
        }
        .hero-card h2,
        .hero-card p {
            margin-left: auto !important;
            margin-right: auto !important;
            text-align: center !important;
        }
        .cta-row {
            display: flex;
            flex-direction: column;
            gap: 14px;
            width: 100%;
            align-items: center;
            /* center buttons horizontally */
        }
        .btn {
            width: 100%;
            max-width: 300px;
            font-size: 16px;
            padding: 14px 0;
        }
    }
    /*Services*/
    .services {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 420px;
        /* limit width for better centering */
        margin: 0 auto;
        /* center container */
    }
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin: 28px auto;
        /* center container with vertical margin */
        max-width: 420px;
        /* limit width for better centering */
    }
    .gallery .g {
        height: 140px;
        font-size: 16px;
    }
    .contact-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px;
        text-align: center;
        max-width: 420px;
        /* optional, keep it consistent */
        margin: 0 auto;
    }
    footer {
        font-size: 14px;
        padding: 28px 12px;
        text-align: center;
    }
}