/* ==========================================
   Mobile Firefox + cross-browser Bootstrap fix
   ========================================== */

/* Target Firefox only */
@-moz-document url-prefix() {
    /* Apply only on mobile widths */
    @media (max-width: 768px) {
        /* Ensure viewport and containers don’t overflow */
        html,
        body {
            overflow-x: hidden; /* prevent horizontal scroll */
            width: 100%;
        }

        .container,
        .container-fluid {
            width: 100% !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
            box-sizing: border-box; /* ensures padding doesn't break width */
        }

        /* Reset row margins to prevent extra spacing */
        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Reset column padding */
        [class*="col-"] {
            padding-left: 0 !important;
            padding-right: 0 !important;
            box-sizing: border-box;
        }

        /* Fix flex gap quirks on mobile Firefox */
        .d-flex {
            gap: 10px; /* adjust if needed */
            flex-wrap: wrap; /* prevents overflow on small screens */
        }
    }
}

/* General cross-browser safety for mobile */
@media (max-width: 768px) {
    * {
        box-sizing: border-box; /* prevent padding/margin issues */
    }
}

body,
footer {
    font-family: "Lato", sans-serif;
    font-weight: 300; /* Light weight */
}

body {
    font-size: larger;
}

@media (max-width: 991px) {
    body p,
    footer {
        font-size: 0.9em;
    }

    body a,
    footer a {
        font-size: 0.9em;
    }
}

header {
    background-color: #7692aa;
    text-align: center;
    padding-top: 10vh;
}

header img {
    width: 80vw;
}

@media (min-width: 767.98px) {
    header img {
        width: 40vw;
    }
}

body {
    background-color: #7692aa;
}

/* If you want justified text in Bootstrap 5 */
.text-justify {
    text-align: justify;
    text-justify: inter-word; /* more stable */
}

@media (max-width: 991px) {
    /* Bootstrap collapse breakpoint */
    .text-justify {
        text-align: center;
    }
}

.privacy {
    position: relative; /* required so the dotted line positions correctly */
}

@media (max-width: 767.98px) {
    .privacy {
        justify-content: center; /* center columns on small screens */
        text-align: center; /* center text on small screens */
    }
}

.dotted-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background-image: repeating-linear-gradient(to right, #ffffff 0 6px, transparent 6px 9px);
}