/* ==========================================================
   Responsive compatibility layer - 2026-08
   Keeps the approved visual design while preventing layout
   overflow and unstable rendering across viewport sizes.
   ========================================================== */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 320px;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
picture,
svg,
video,
canvas {
    max-width: 100%;
}

picture {
    display: block;
}

img {
    height: auto;
}

.container,
.container-fluid,
.container-xxl {
    min-width: 0;
}

.container-xxl {
    width: 100%;
}

.row > * {
    min-width: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
label,
th,
td {
    overflow-wrap: break-word;
}

/* Navbar stability */
.site-navbar {
    flex-wrap: wrap;
}

.site-navbar .navbar-brand,
.site-navbar .navbar-toggler,
.site-social-nav {
    flex-shrink: 0;
}

.site-navbar .navbar-collapse,
.site-navbar .navbar-nav {
    min-width: 0;
}

.site-social-nav {
    margin: 0;
}

.site-social-nav .nav {
    align-items: center;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
}

.site-social-nav .nav li {
    flex: 0 0 auto;
}

.site-social-nav .nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    text-decoration: none;
}

.site-mobile-logo img {
    width: auto;
    max-height: 45px;
}

/* Slider and media stability */
.carousel,
.carousel-inner,
.carousel-item,
.carousel-item picture {
    width: 100%;
    max-width: 100%;
}

.carousel-item picture img,
.carousel-item > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.carousel-control-next-icon-text,
.carousel-control-prev-icon-text {
    max-width: calc(100vw - 24px);
    white-space: nowrap;
}

/* Cards and product/media blocks */
.maincard,
.thecard,
.thefront,
.theback,
.service-item,
.card,
.card-body {
    max-width: 100%;
}

.service-item img,
.thefront img,
.theback img {
    object-fit: contain;
}

/* Forms */
.form-control,
.form-select,
select,
textarea,
input,
button {
    max-width: 100%;
}

input,
select,
textarea {
    min-width: 0;
}

/* Tables stay inside the viewport */
.site-table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.site-table-responsive table {
    min-width: 760px;
}

.site-table-responsive th,
.site-table-responsive td {
    vertical-align: middle;
}

/* Verification hero keeps the original 50% desktop treatment. */
.vc-hero-image {
    width: 50%;
    height: auto;
}

/* Floating WhatsApp control must not force page overflow. */
.floating-wpp {
    max-width: calc(100vw - 20px) !important;
}

.floating-wpp .floating-wpp-popup {
    max-width: calc(100vw - 24px);
}

/* Long review images should not scale beyond the viewport on touch layouts. */
@media (hover: none), (max-width: 767.98px) {
    .CR:hover {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
    }
}

/* Tablet and mobile */
@media (max-width: 991.98px) {
    .site-navbar {
        padding: .65rem .85rem !important;
        gap: .35rem .6rem;
    }

    .site-navbar .navbar-toggler {
        margin-inline-start: auto;
    }

    .site-navbar .navbar-collapse {
        order: 10;
        flex-basis: 100%;
        width: 100%;
        margin-top: .5rem;
    }

    .site-navbar .navbar-collapse > .navbar-nav {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-navbar .navbar-nav .nav-link,
    .sticky-top.site-navbar .navbar-nav .nav-link {
        margin: 0;
        padding: .65rem .25rem;
        white-space: normal;
    }

    .site-social-nav .nav li {
        margin-inline-start: .35rem !important;
    }

    .carousel {
        margin-bottom: 2.5rem;
    }

    .section-title::before,
    .section-title::after {
        width: 32px;
    }

    .section-title::before {
        left: -42px;
    }

    .section-title::after {
        right: -42px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    body {
        min-width: 0;
    }

    .container,
    .container-fluid,
    .container-xxl {
        padding-left: 12px;
        padding-right: 12px;
    }

    .site-navbar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .site-mobile-logo img {
        max-height: 42px;
    }

    .site-social-nav .nav a {
        min-width: 28px;
        min-height: 28px;
        font-size: .9rem;
    }

    .card-body {
        padding: 1rem;
    }

    .row.mb-3 > .col-form-label {
        margin-bottom: .3rem;
    }

    .btn,
    .form-control,
    .form-select,
    select {
        min-height: 40px;
    }

    .vc-hero-image {
        width: min(100%, 520px);
    }

    .site-footer {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: .75rem 12px !important;
        gap: .65rem;
        justify-content: center;
    }

    .site-footer > .col-10,
    .site-footer > .col-1 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .site-footer > .col-10 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: .35rem .55rem;
    }

    .site-footer > .col-10 img {
        width: auto !important;
        max-width: 84px;
        max-height: 46px;
    }

    .site-footer > .col-1 .nav {
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    .maincard {
        height: 280px;
        padding-left: .25rem !important;
        padding-right: .25rem !important;
    }

    .thefront,
    .theback {
        overflow: hidden;
    }

    .thefront h3,
    .theback h3 {
        font-size: clamp(1.05rem, 5vw, 1.35rem);
    }
}

/* Small phones */
@media (max-width: 575.98px) {
    .site-navbar {
        gap: .3rem .45rem;
    }

    .site-social-nav .nav li {
        margin-inline-start: .2rem !important;
    }

    .site-social-nav .nav a {
        min-width: 24px;
        min-height: 24px;
        font-size: .82rem;
    }

    .carousel {
        margin-bottom: 2rem;
    }

    .carousel-control-next-icon-text,
    .carousel-control-prev-icon-text {
        width: auto;
        min-width: 3.75rem;
        height: 1.8rem;
        padding-inline: .35rem;
        font-size: .72rem;
    }

    .section-title {
        max-width: calc(100vw - 72px);
    }

    .section-title::before,
    .section-title::after {
        width: 22px;
    }

    .section-title::before {
        left: -30px;
    }

    .section-title::after {
        right: -30px;
    }

    .maincard {
        height: 260px;
    }

    .thefront img,
    .theback img {
        max-height: 84px;
        width: auto !important;
    }

    .floating-wpp .floating-wpp-popup {
        width: min(300px, calc(100vw - 24px)) !important;
    }
}

/* Very narrow devices */
@media (max-width: 359.98px) {
    .site-mobile-logo img {
        max-height: 36px;
    }

    .site-navbar .navbar-toggler {
        padding: .2rem .45rem;
        font-size: 1rem;
    }

    .site-social-nav .nav a {
        min-width: 22px;
        min-height: 22px;
        font-size: .75rem;
    }

    .section-title::before,
    .section-title::after {
        display: none;
    }

    .section-title {
        max-width: 100%;
    }
}

/* Large and ultra-wide displays: retain the original Bootstrap max width. */
@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1320px;
    }
}

/* Respect operating-system accessibility settings without altering layout. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================
   XXL / large-desktop correction
   The bundled Bootstrap file previously used max-content at
   >= 1400px, which collapses percentage-based grid columns.
   Keep this defensive override even after correcting Bootstrap.
   ========================================================== */
@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        width: 100%;
        max-width: 1320px !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* Prevent headings/links in grid cards from being split letter-by-letter. */
    .maincard h1,
    .maincard h2,
    .maincard h3,
    .maincard h4,
    .maincard h5,
    .maincard h6,
    .maincard a,
    .section-title,
    .site-navbar .nav-link {
        overflow-wrap: normal;
        word-break: normal;
    }
}