/* Global responsive safeguards and floating contact adjustments. */
.whatsapp-float {
            overflow: visible;
            transform-origin: center;
        }

        .whatsapp-float::before {
            right: calc(100% + 16px);
            top: 50%;
            transform: translateY(-50%) translateX(8px);
            white-space: normal;
            z-index: 1000;
        }

        .whatsapp-float::after {
            right: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
            z-index: 999;
        }

        .whatsapp-float:hover::before,
        .whatsapp-float:focus-visible::before {
            transform: translateY(-50%) translateX(0);
        }

        .whatsapp-float:hover::after,
        .whatsapp-float:focus-visible::after {
            transform: translateY(-50%) rotate(45deg);
        }

/* Mobile overflow guard: preserve the design while keeping every section inside the viewport. */
        html,
        body {
            max-width: 100%;
            overflow-x: hidden;
        }

        @supports (overflow: clip) {
            html,
            body {
                overflow-x: clip;
            }
        }

        @media screen and (max-width: 768px) {
            .container,
            .navbar,
            .home__page,
            .about__me,
            .freelancer,
            .portfolio,
            footer#contact {
                box-sizing: border-box;
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }

            .home__page,
            .freelancer {
                overflow-x: clip;
            }

            .home__page > *,
            .aboutMe__content > *,
            footer#contact > * {
                min-width: 0;
            }

            .right__content {
                overflow: hidden;
                border-radius: 50%;
            }

            .right__content picture {
                overflow: hidden;
            }

            .right__content img {
                transform: scale(1.12);
                transform-origin: center;
            }

            .portfolio__real-projects {
                grid-template-columns: minmax(0, min(100%, 20.625rem));
                width: 100%;
                max-width: 100%;
            }

            .project__card--real,
            .project__modal-content {
                box-sizing: border-box;
                min-width: 0;
                max-width: 100%;
            }

            .project__modal {
                box-sizing: border-box;
                width: 100%;
                max-width: 100%;
            }

            .project__modal-content {
                width: calc(100vw - 1.5rem);
            }

            .phone__number,
            .email,
            .phone__number a,
            .email a,
            .copyright__footer p {
                max-width: 100%;
                overflow-wrap: anywhere;
                word-break: break-word;
            }
        }