/* Shared layout corrections for Arabic and English profile pages. */
*, *::before, *::after {
    box-sizing: border-box;
}

.contained {
    width: min(1300px, calc(100% - 32px));
}

[class*="col-"], .home-contact-grid > *, .home-contact-field,
.service-dialog-shell > *, .service-dialog-field {
    min-width: 0;
}

h1, h2, h3, h4, h5, p, a, label, strong {
    overflow-wrap: anywhere;
}

nav > .contained {
    align-items: center;
    gap: 16px;
}

.logo {
    flex-shrink: 0;
    text-decoration: none;
}

.navigation-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
}

.navigation-container > a {
    margin: 0;
    white-space: nowrap;
}

.hero-title {
    padding-inline: 24px;
}

.hero-socials {
    height: auto;
    max-height: calc(100% - 32px);
    overflow-y: auto;
}

.section-title {
    max-width: calc(100% - 24px);
    padding-inline: clamp(16px, 4vw, 50px);
}

.card-blog > img {
    display: block;
    height: 220px;
}

.card-blog > .info {
    width: 100%;
}

.our-works-container, .our-works-container-data {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
}

.home-contact-heading, .home-contact-grid,
.home-contact-form, .service-dialog-form {
    min-width: 0;
}

.home-contact-form, .service-dialog-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.human-verification {
    margin-top: 0;
}

.human-verification-header > div {
    min-width: 0;
}

/* Keep the honeypot out of the visual layout without widening RTL dialogs. */
.robot-honeypot {
    position: absolute;
    inset: 0 auto auto 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.message-form input:not([type="hidden"]):not(.robot-honeypot),
.message-form textarea {
    max-width: 100%;
}

@media (max-width: 1200px) {
    .logo {
        min-width: 0;
        flex-shrink: 1;
    }

    .logo .fs-h2 {
        font-size: clamp(1.15rem, 3vw, 1.9rem);
    }

    .tab-mob-menu {
        appearance: none;
        visibility: visible;
        display: block;
        position: relative;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin: 0;
        margin-inline-start: auto;
        border: 1px solid #c7d9d3;
        border-radius: 10px;
        background: white;
        color: var(--primaryColor);
        font-family: 'bootstrap-icons';
        font-size: 1.5rem;
        cursor: pointer;
    }

    .tab-mob-menu::after {
        content: "\F479";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        transform: none;
        visibility: visible;
    }

    .tab-mob-menu:checked::after { content: "\F659"; }
    .tab-mob-menu:focus-visible { outline: 3px solid #13866e; outline-offset: 3px; }

    .navigation-container {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        width: 100%;
        height: auto;
        max-height: calc(100vh - var(--navHeight));
        max-height: calc(100dvh - var(--navHeight));
        margin: 0;
        padding: 16px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: white;
        box-shadow: 0 8px 27px -10px var(--shadowColor);
        transition: none;
    }

    .tab-mob-menu:checked ~ .navigation-container {
        display: flex;
        height: auto;
    }

    .navigation-container > a {
        margin: 0;
        min-height: 44px;
        text-align: center;
    }

    .profile-language-switcher {
        align-self: center;
        flex-shrink: 0;
    }
}

@media (max-width: 760px) {
    .hero-banner, .sub-hero-banner {
        height: auto;
        min-height: 320px;
        background-attachment: scroll;
    }

    .hero-banner { min-height: calc(100svh - var(--navHeight)); }
    .hero-title { width: 100%; padding-inline: 20px 72px; }
    .hero-title h1 { font-size: clamp(1.75rem, 7vw, 2.66rem); }
    .hero-socials { right: 12px; }

    .service-dialog-form { grid-template-columns: minmax(0, 1fr); }
    .service-dialog-benefits { display: grid; }

    .sticky-img, .sticky-img-dual { position: relative; top: auto; }
    .card-team { width: 100%; }
    .profile-info-grid { gap: 0; }
}

@media (max-width: 620px) {
    .home-contact-form { grid-template-columns: minmax(0, 1fr); }
    .home-contact-submit { min-width: 0; }
    .home-contact-form-heading { gap: 12px; }
    .home-contact-form-heading > div { min-width: 0; }
    .message-form > input:not([type="hidden"]):not(.robot-honeypot) { width: 100%; }
    .home-contact-status { border-radius: 16px; }
}

@media (hover: none) {
    .card-team { height: auto; }
    .card-team > img { height: 280px; }
    .card-team > .title, .card-team > .info {
        position: static;
        transform: none;
        height: auto;
    }
    .card-team:hover > img, .card-team:hover > .title { transform: none; }
}