/* Keeps the original legacy portfolio design intact while preventing layout overflow. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.art-app,
.art-app .art-app-wrapper,
.art-app .art-app-wrapper .art-app-container {
    max-width: 100%;
}

.art-app .art-app-wrapper .art-app-container {
    min-width: 0;
}

.art-app .art-app-wrapper .art-app-container .art-content {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.art-app .art-app-wrapper .art-app-container .art-content .art-scroll-frame {
    min-width: 0;
}

.art-app img,
.art-app video,
.art-app iframe {
    max-width: 100%;
}

.art-grid {
    width: 100%;
}

.art-grid .art-grid-item {
    max-width: 100%;
}

.art-price,
.art-card,
.art-service-icon-box,
.art-testimonial,
.art-item-description {
    overflow-wrap: anywhere;
}

.art-banner .art-banner-overlay .art-banner-title {
    min-width: 0;
    position: relative;
    z-index: 2;
}

.art-banner .art-banner-overlay .art-banner-title h1,
.art-lg-text,
.art-section-title h4 {
    overflow-wrap: anywhere;
}

.art-banner .art-banner-overlay .art-banner-photo {
    z-index: 1;
    max-height: 100%;
    object-fit: cover;
    min-height: 425px;
}

body.public-rtl .art-app {
    direction: ltr;
    font-family: "Tajawal", "Cairo", "Tahoma", sans-serif;
}

body.public-rtl .art-info-bar,
body.public-rtl .art-content {
    direction: rtl;
}

body.public-rtl .art-menu-bar {
    direction: ltr;
}

body.public-rtl .art-banner .art-banner-overlay,
body.public-rtl .art-counter-frame,
body.public-rtl .art-service-ib-content,
body.public-rtl .art-price-body,
body.public-rtl .art-testimonial,
body.public-rtl .art-timeline-content,
body.public-rtl .art-item-description,
body.public-rtl .art-card,
body.public-rtl footer {
    text-align: right;
}

body.public-rtl .art-banner .art-banner-overlay .art-banner-photo {
    right: auto;
    left: 30px;
}

body.public-rtl .art-banner .art-banner-overlay .art-banner-title {
    margin-right: auto;
    margin-left: 0;
}

body.public-rtl .art-banner .art-banner-overlay .art-buttons-frame,
body.public-rtl .art-counter-frame,
body.public-rtl .art-slider-navigation {
    direction: rtl;
}

body.public-rtl .art-info-bar .art-table ul li,
body.public-rtl .art-info-bar .art-links-frame {
    direction: rtl;
}

body.public-rtl .art-menu-bar nav .main-menu,
body.public-rtl .art-menu-bar .art-language-change {
    direction: ltr;
    padding-right: 0;
}

body.public-rtl .art-menu-bar nav .main-menu .menu-item a {
    direction: rtl;
    text-align: right;
}

body.public-rtl .art-menu-bar .art-language-change {
    left: 0;
    right: auto;
    z-index: 20;
}

body.public-rtl .art-menu-bar .art-language-change li a {
    display: flex;
    visibility: visible;
    opacity: 1;
}

body.public-rtl .art-menu-bar.art-active nav .menu-item a {
    display: inline-block;
    visibility: visible;
    opacity: 1;
}

body.public-rtl .art-menu-bar .art-current-page {
    direction: rtl;
}

body.public-rtl .art-knowledge-list {
    padding-right: 0;
}

body.public-rtl .art-knowledge-list li {
    padding-right: 25px;
    padding-left: 0;
}

body.public-rtl .art-knowledge-list li:before {
    right: 0;
    left: auto;
}

body.public-rtl .art-timeline .art-timeline-item {
    padding-right: 30px;
    padding-left: 0;
}

body.public-rtl .art-timeline .art-timeline-item .art-timeline-mark,
body.public-rtl .art-timeline .art-timeline-item .art-timeline-mark-light {
    right: -4px;
    left: auto;
}

@media (min-width: 921px) {
    .art-app .art-app-wrapper .art-app-container .art-info-bar {
        flex: 0 0 290px;
    }

    .art-app .art-app-wrapper .art-app-container .art-menu-bar {
        flex: 0 0 230px;
    }

    .art-banner .art-banner-overlay .art-banner-title {
        max-width: calc(100% - 390px);
    }

    body.public-rtl .art-banner .art-banner-overlay .art-banner-title {
        max-width: calc(100% - 390px);
        padding-left: 20px;
    }
}

@media (min-width: 1201px) and (max-width: 1600px) {
    .art-banner .art-banner-overlay .art-banner-title {
        max-width: calc(100% - 360px);
    }

    body.public-rtl .art-banner .art-banner-overlay .art-banner-title {
        max-width: calc(100% - 360px);
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .art-banner .art-banner-overlay .art-banner-title {
        max-width: calc(100% - 320px);
    }

    body.public-rtl .art-banner .art-banner-overlay .art-banner-title {
        max-width: calc(100% - 320px);
    }
}

@media (max-width: 920px) {
    .art-app,
    .art-app .art-app-wrapper {
        width: 100%;
        max-width: 100vw;
    }

    .art-app .art-app-wrapper .art-app-container .art-content {
        width: 100%;
        max-width: 100vw;
    }

    .art-app
        .art-app-wrapper
        .art-app-container
        .art-content
        .art-scroll-frame {
        width: 100%;
    }

    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .art-banner .art-banner-overlay {
        min-height: auto;
    }

    .art-banner .art-banner-overlay .art-banner-title h1 {
        font-size: 34px;
        line-height: 1.18;
    }

    .art-lg-text {
        font-size: 15px;
        line-height: 1.7;
    }

    .art-app .art-app-wrapper .art-app-container .art-menu-bar {
        max-width: min(230px, 100vw);
    }

    .art-app .art-app-wrapper .art-app-container .art-info-bar {
        max-width: min(290px, 100vw);
    }
}

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .art-banner .art-banner-overlay {
        padding-left: 20px;
        padding-right: 20px;
    }

    .art-banner .art-banner-overlay .art-banner-title h1 {
        font-size: 28px;
    }

    .art-buttons-frame {
        gap: 12px;
    }

    .art-buttons-frame .art-btn,
    .art-buttons-frame .art-link {
        max-width: 100%;
    }
}