/* Site-wide layout rules, loaded last on EVERY page (see pr_global_css in includes/page-lib.php) */

/* Expanded layout, the same on every page as on the home page: the page content uses the full width of the screen with a small
   side margin and padding (0.75% each, the values of the home page), not a narrow centred column. The header's top bar and
   logo/search row keep the theme's centred container; the menu bar runs edge to edge. */
@media (min-width: 768px) {
    #wrapper > .container,
    #content .container {
        width: auto !important;
        min-width: 98.5%;
        max-width: none !important;
        margin-left: 0.75%;
        margin-right: 0.75%;
        padding-left: 0.75%;
        padding-right: 0.75%;
    }
    #content .container .container {
        width: 100% !important;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* Header search box: the same size on every page */
.header-center #cse-search-box {
    display: block !important;
    width: 90% !important;
}
.header-center #sosearchpro {
    width: 53% !important;
}

footer.footer-container > .row,
footer.footer-container > div > .row {
    margin-left: 0;
    margin-right: 0;
}

/* The page H1 has ONE style on every page, English and Arabic: Open Sans, 30px, bold, dark grey, capitals, same spacing (24px on phones) */
#content h1,
h1.pr-h1,
h1.lh-title {
    font-family: 'Open Sans', 'Open Sans Fallback', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #252525 !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
    text-align: start !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}
#content h1 + *,
h1.pr-h1 + * {
    margin-top: 0 !important;
}
#content h1.pr-h1-light {
    color: #fff !important;
}
@media (max-width: 767px) {
    #content h1,
    h1.pr-h1,
    h1.lh-title {
        font-size: 24px !important;
    }
}

/* Product lists: 5 products per row on wide screens (the grid view; the list view keeps one per row) */
@media (min-width: 1200px) {
    .item.col-lg-3.col-md-3.col-sm-6:not(.list-group-item) {
        width: 20%;
    }
}

/* Home page maps (English and Arabic): on phones the two map boxes sit closer together */
@media (max-width: 600px) {
    .mapsclass {
        padding-top: 1% !important;
        padding-right: 0 !important;
    }
}

/* Bulleted contact numbers ("Contact Our Consultants"): the text sits next to its bullet, not centred in the column */
.simple-ul li {
    text-align: start !important;
}

/* Footer link columns: four equal columns, the same row spacing, so the blue band stays aligned on every page (English and Arabic) */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 20px 4% 14px;
}
.footer-links-col {
    padding-top: 0;
    padding-bottom: 12px;
}
.footer-links-col h3 {
    margin: 0 0 8px;
    padding-bottom: 10px;
    color: #fff;
    border-bottom: 2px solid #fff;
    font-family: 'Open Sans', 'Open Sans Fallback', sans-serif;
    font-size: 20px;
    font-weight: bold;
}
.footer-links-col a {
    display: block;
}
.footer-links-col h5 {
    margin: 0;
    padding: 8px 0;
    color: #fff;
    font-family: 'Open Sans', 'Open Sans Fallback', sans-serif;
    font-size: 18px;
    line-height: 1.4;
}
.footer-links-col a:hover h5 {
    color: #f8ed37;
}

/* Landing-page cards: white text on the coloured cards (the theme colours links grey) */

/* Footer top row: the heading and its content sit on one centre line, left ("Get a Free Quote") and right ("Follow Us") */
footer.footer-container > .col-lg-12:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
footer.footer-container > .col-lg-12:first-child > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
footer.footer-container > .col-lg-12:first-child > div > div {
    float: none;
}
footer.footer-container > .col-lg-12:first-child h3.block-title {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25;
}
footer.footer-container > .col-lg-12:first-child ul {
    margin: 0;
    padding: 0;
}
footer.footer-container > .col-lg-12:first-child .footer-quote-title {
    color: #252525 !important;
    text-align: end;
    white-space: nowrap;
}

/* "Request a Quote" button: gradient pill, a light sweep across it and an arrow that slides on hover */
.footer-quote-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    padding: 6px 6px 6px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e0313f 0%, #a81220 100%);
    color: #fff !important;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(168, 18, 32, .35);
    animation: footer-quote-ring 2.6s infinite;
    transition: transform .25s, box-shadow .25s;
}
html[dir="rtl"] .footer-quote-btn {
    padding: 6px 26px 6px 6px;
}
.footer-quote-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: footer-quote-shine 3.4s infinite;
}
.footer-quote-btn:hover,
.footer-quote-btn:focus {
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(168, 18, 32, .45);
}
.footer-quote-arrow {
    display: inline-block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: #a81220;
    font-size: 16px;
    line-height: 38px;
    text-align: center;
    transition: transform .25s;
}
.footer-quote-btn:hover .footer-quote-arrow {
    transform: translateX(4px);
}
html[dir="rtl"] .footer-quote-btn:hover .footer-quote-arrow {
    transform: translateX(-4px);
}
@keyframes footer-quote-shine {
    0%, 55% { left: -60%; }
    100% { left: 130%; }
}
@keyframes footer-quote-ring {
    0% { box-shadow: 0 6px 16px rgba(168, 18, 32, .35), 0 0 0 0 rgba(224, 49, 63, .55); }
    70% { box-shadow: 0 6px 16px rgba(168, 18, 32, .35), 0 0 0 14px rgba(224, 49, 63, 0); }
    100% { box-shadow: 0 6px 16px rgba(168, 18, 32, .35), 0 0 0 0 rgba(224, 49, 63, 0); }
}
@media (max-width: 600px) {
    .footer-quote-cell {
        text-align: center;
        padding-top: 10px;
    }
}

.footer-quote-btn .footer-quote-label {
    color: #fff !important;
}
.footer-quote-btn .footer-quote-arrow {
    color: #a81220 !important;
}

/* Top bar on medium screens (and zoomed-in browsers): phones, emails and the language link stay on one line */
@media (min-width: 768px) and (max-width: 1199px) {
    .header-top .top-link {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    .header-top .top-link > li {
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 12px !important;
    }
    .header-top .top-link > li img {
        width: auto !important;
        height: 17px !important;
    }
}

/* "Our Services" in the menu bar: regular weight on every page (some pages' stylesheets made it bold) */
.title-nav,
.title-navbar,
.megamenuToogle-pattern .title-nav {
    font-weight: 400 !important;
}

/* One left edge for the breadcrumb, the page title and the first text of every page (older pages had 0, 7 or 8px of their own) */
ul.breadcrumb {
    margin-inline: 0 !important;
}
#content .about-text,
#content .about-text > p,
#content .about-text > div > p {
    padding-inline: 0 !important;
}
#content p[style*="padding-left: 7px"],
#content p[style*="padding-right: 7px"] {
    padding-inline: 0 !important;
}
#content .row > .about-text {
    padding-inline: 15px !important;
}

/* Same distance from the menu bar to the breadcrumb on every page (some pages' stylesheets added 11px below the bar) */
.header-bottom {
    margin-bottom: 0 !important;
}

/* ONE button for product and category tiles: "Explore More" (blue) leads to another page, "Request A Quote" (red) to the quote page */
.pr-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 176px;
    overflow: hidden;
    padding: 5px 5px 5px 20px;
    border-radius: 999px;
    font-family: 'Open Sans', 'Open Sans Fallback', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(13, 79, 139, .28);
    transition: transform .25s, box-shadow .25s;
}
html[dir="rtl"] .pr-btn {
    padding: 5px 20px 5px 5px;
}
.pr-btn--more {
    background: linear-gradient(135deg, #0d4f8b 0%, #3dade2 100%);
}
.pr-btn--quote {
    background: linear-gradient(135deg, #e0313f 0%, #a81220 100%);
    box-shadow: 0 4px 12px rgba(168, 18, 32, .28);
}
.pr-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
}
.pr-btn:hover,
.pr-btn:focus {
    color: #fff !important;
    transform: translateY(-2px);
}
.pr-btn--more:hover { box-shadow: 0 8px 18px rgba(13, 79, 139, .4); }
.pr-btn--quote:hover { box-shadow: 0 8px 18px rgba(168, 18, 32, .4); }
.pr-btn:hover::after {
    left: 130%;
    transition: left .6s ease;
}
.pr-btn-label {
    color: #fff !important;
    white-space: nowrap;
}
.pr-btn-icon {
    display: inline-block;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    transition: transform .25s;
}
.pr-btn--more .pr-btn-icon { color: #0d4f8b; }
.pr-btn--quote .pr-btn-icon { color: #a81220; }
.pr-btn:hover .pr-btn-icon { transform: translateX(4px); }
html[dir="rtl"] .pr-btn:hover .pr-btn-icon { transform: translateX(-4px); }

/* Tiles in grid view: the picture on top, the title in the middle, the button at the bottom of every card, so the buttons line up whatever the title length */
#products .item:not(.list-group-item) > .thumbnail {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: auto;
}
#products .item:not(.list-group-item) > .thumbnail > .caption {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
#products .item:not(.list-group-item) > .thumbnail > .caption > .caption {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}
#products .item:not(.list-group-item) > .thumbnail > .caption > .caption > center {
    display: block;
    width: 100%;
}
#products .item:not(.list-group-item) > .thumbnail > .caption > .row {
    margin-top: auto;
    margin-bottom: 14px;
    text-align: center;
}

/* Buttons on detail pages and forms use the same brand look: the order button is the red "Request A Quote", other primary buttons the blue "Explore More" */
#content .btn.btn-primary,
#content button.btn-primary {
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0d4f8b 0%, #3dade2 100%) !important;
    color: #fff !important;
    font-family: 'Open Sans', 'Open Sans Fallback', sans-serif;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(13, 79, 139, .28);
    transition: transform .25s, box-shadow .25s;
}
#content button#order,
#content button#order.btn-primary {
    background: linear-gradient(135deg, #e0313f 0%, #a81220 100%) !important;
    box-shadow: 0 4px 12px rgba(168, 18, 32, .28);
}
#content .btn.btn-primary:hover,
#content button.btn-primary:hover,
#content .btn.btn-primary:focus {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(13, 79, 139, .4);
}
#content button#order:hover {
    box-shadow: 0 8px 18px rgba(168, 18, 32, .4);
}

/* ======================= TYPOGRAPHY: one set of text styles for the whole website ======================= */

/* Arabic letters: Noto Sans Arabic (self-hosted), whichever family a page names for its Latin text */
@font-face { font-family: 'Noto Sans Arabic'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/noto-sans-arabic/noto-sans-arabic-variable.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Sans Arabic'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/noto-sans-arabic/noto-sans-arabic-basic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200F; }
@font-face { font-family: 'Open Sans'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/noto-sans-arabic/noto-sans-arabic-variable.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Open Sans'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/noto-sans-arabic/noto-sans-arabic-basic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200F; }
@font-face { font-family: 'Roboto'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/noto-sans-arabic/noto-sans-arabic-variable.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Roboto'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/noto-sans-arabic/noto-sans-arabic-basic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200F; }
@font-face { font-family: 'Lato'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/noto-sans-arabic/noto-sans-arabic-variable.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Lato'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/noto-sans-arabic/noto-sans-arabic-basic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200F; }
@font-face { font-family: 'Calibri'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/open-sans/open-sans-latin-ext-normal-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Calibri'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/open-sans/open-sans-latin-normal-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Calibri'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/noto-sans-arabic/noto-sans-arabic-variable.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Calibri'; font-weight: 300 800; font-display: swap; src: url(../../fonts/site/noto-sans-arabic/noto-sans-arabic-basic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200F; }
/* THE typeface: Open Sans, declared here so that EVERY page has it (home page included). The names Roboto and Lato are kept for old rules and draw the same font. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(../../fonts/site/open-sans/open-sans-latin-ext-normal-400.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(../../fonts/site/open-sans/open-sans-latin-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300 800;font-display:swap;src:url(../../fonts/site/open-sans/open-sans-latin-ext-normal-400.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300 800;font-display:swap;src:url(../../fonts/site/open-sans/open-sans-latin-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lato';font-style:normal;font-weight:300 800;font-display:swap;src:url(../../fonts/site/open-sans/open-sans-latin-ext-normal-400.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lato';font-style:normal;font-weight:300 800;font-display:swap;src:url(../../fonts/site/open-sans/open-sans-latin-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
html[dir="rtl"] body {
    font-family: 'Open Sans', 'Noto Sans Arabic', 'Open Sans Fallback', sans-serif;
}
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Body text: 15px (Arabic 16px), generous line height, left-aligned (justified text left uneven gaps), dark grey; a text colour a page sets itself (white on a coloured box) is kept */
#content p,
#content .about-text li,
#content .simple-ul li,
#content .about-text > div {
    font-size: 15px !important;
    line-height: 1.75 !important;
    font-weight: 400;
}
#content p {
    color: #444;
}
#content p[style*="justify"],
#content .about-text p:not([style*="center"]),
#content .about-text li {
    text-align: start !important;
}
html[dir="rtl"] #content p,
html[dir="rtl"] #content .about-text li,
html[dir="rtl"] #content .simple-ul li,
html[dir="rtl"] #content .about-text > div {
    font-size: 16px !important;
    line-height: 2 !important;
}
#content .about-text li,
#content .simple-ul li {
    margin-bottom: 6px;
}
#content strong,
#content b {
    font-weight: 700;
}


/* Headings below the page title: one scale */
#content h2:not(.pr-h1) {
    font-size: 24px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #252525;
}
#content h3.subtitle,
#content .about-text h3,
#content #product h3 {
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}
#content h4 {
    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}
html[dir="rtl"] #content h2:not(.pr-h1),
html[dir="rtl"] #content h3,
html[dir="rtl"] #content h4,
html[dir="rtl"] #content h1,
html[dir="rtl"] h1.pr-h1 {
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
}

/* Titles of product and category cards */
#products .item h3,
#content .product-item-container h3 {
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

/* Forms */
#content label {
    font-size: 14px;
    font-weight: 600;
}
#content input,
#content select,
#content textarea {
    font-family: inherit;
    font-size: 14px;
}

/* Lists in page text: a small brand-blue dot with a soft ring instead of the old arrow / disc, and a tighter row rhythm */
#content .simple-ul,
#content .about-text ul:not(.nav):not(.list-inline):not(.breadcrumb):not(.pagination) {
    margin: 4px 0 16px;
    padding: 0;
    list-style: none;
}
#content .simple-ul li,
#content .about-text ul:not(.nav):not(.list-inline):not(.breadcrumb):not(.pagination) > li {
    position: relative;
    margin-bottom: 4px;
    padding-inline-start: 28px;
    padding-left: 28px;
    line-height: 1.65 !important;
}
html[dir="rtl"] #content .simple-ul li,
html[dir="rtl"] #content .about-text ul:not(.nav):not(.list-inline):not(.breadcrumb):not(.pagination) > li {
    padding-left: 0;
    padding-right: 28px;
}
#content .simple-ul li::after,
#content .about-text ul:not(.nav):not(.list-inline):not(.breadcrumb):not(.pagination) > li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 6px;
    right: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3dade2;
    box-shadow: 0 0 0 4px rgba(61, 173, 226, .18);
    font-size: 0;
}
html[dir="rtl"] #content .simple-ul li::after,
html[dir="rtl"] #content .about-text ul:not(.nav):not(.list-inline):not(.breadcrumb):not(.pagination) > li::before {
    left: auto;
    right: 6px;
}
#content .simple-ul li::before {
    content: none;
}
/* Paragraphs are justified on screens 768px and wider (with hyphenation, so word gaps stay even); phones keep left-aligned text. Delete this block to go back to left-aligned text. */
@media (min-width: 768px) {
    #content .about-text p:not([style*="center"]),
    #content p[style*="justify"] {
        text-align: justify !important;
        text-justify: inter-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* ======================= GRID / LIST SWITCH AND LIST VIEW ======================= */

/* the two buttons: a clear segmented switch, the active one is blue */
#content .well .btn-group {
    display: inline-flex;
    gap: 6px;
}
#content .well .btn-group > a.btn {
    border: 1px solid #cfd8e3 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #0d4f8b !important;
    padding: 6px 18px;
    font-weight: 700;
    box-shadow: none !important;
    outline: none !important;
    transition: background .2s, color .2s;
}
#content .well .btn-group > a.btn .glyphicon,
#content .well .btn-group > a.btn span {
    color: inherit !important;
}
#content .well .btn-group > a.btn.is-active {
    background: #3dade2 !important;
    border-color: #3dade2 !important;
    color: #fff !important;
}
#content .well .btn-group > a.btn:hover {
    border-color: #3dade2 !important;
}

/* list view: one clean horizontal card per product (picture on the start side, title and button beside it) */

/* ======================= "OUR SERVICES" MENU (2026 redesign): a rail of sections + one clear panel per section ======================= */
@media (min-width: 992px) {
    /* ---- the rail: sections with a picture, a name and a chevron ---- */
    .vertical-wrapper {
        width: 300px !important;
        border: 0 !important;
        border-radius: 0 0 14px 14px;
        background: #fff !important;
        box-shadow: 0 18px 48px rgba(15, 23, 42, .20);
    }
    .vertical-wrapper .megamenu-pattern,
    .vertical-wrapper .megamenu,
    .vertical-wrapper .oe_wrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .vertical-wrapper .megamenu {
        padding: 6px 0 8px !important;
    }
    .vertical-wrapper .megamenu > li.home { display: none !important; }
    .vertical-wrapper .megamenu > li.item-vertical {
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    .vertical-wrapper .megamenu > li.item-vertical > a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        min-height: 46px;
        margin: 0 !important;
        padding: 5px 18px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #1f2937 !important;
        transition: background .15s, color .15s, box-shadow .15s;
    }
    .vertical-wrapper .megamenu > li.item-vertical > a > span,
    .vertical-wrapper .megamenu > li.item-vertical > a > span > strong {
        display: flex !important;
        align-items: center;
        gap: 12px;
        flex: 1 1 auto;
        min-width: 0;
        float: none !important;
        font-family: 'Open Sans', 'Noto Sans Arabic', 'Open Sans Fallback', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        color: inherit !important;
    }
    .vertical-wrapper .megamenu > li.item-vertical > a img {
        flex: 0 0 auto;
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 4px;
        border-radius: 8px;
        background: #eef6fb;
        object-fit: contain;
    }
    .vertical-wrapper .megamenu > li.item-vertical > a > b.icon-right {
        flex: 0 0 auto;
        position: static !important;
        width: 8px !important;
        height: 8px !important;
        margin: 0 4px !important;
        border: solid #9aa7b5 !important;
        border-width: 2px 2px 0 0 !important;
        background: none !important;
        transform: rotate(45deg);
        opacity: 1 !important;
    }
    html[dir="rtl"] .vertical-wrapper .megamenu > li.item-vertical > a > b.icon-right {
        transform: rotate(-135deg);
    }
    .vertical-wrapper .megamenu > li.item-vertical > a > b.icon-right::before,
    .vertical-wrapper .megamenu > li.item-vertical > a > b.icon-right::after {
        display: none !important;
    }
    .vertical-wrapper .megamenu > li.item-vertical:hover > a,
    .vertical-wrapper .megamenu > li.item-vertical.active > a,
    .vertical-wrapper .megamenu > li.item-vertical > a:focus {
        background: #eaf6fd !important;
        color: #0b5ea8 !important;
        box-shadow: inset 3px 0 0 #1b9ad6;
    }
    html[dir="rtl"] .vertical-wrapper .megamenu > li.item-vertical:hover > a,
    html[dir="rtl"] .vertical-wrapper .megamenu > li.item-vertical.active > a,
    html[dir="rtl"] .vertical-wrapper .megamenu > li.item-vertical > a:focus {
        box-shadow: inset -3px 0 0 #1b9ad6;
    }
    .vertical-wrapper .megamenu > li.item-vertical:hover > a > b.icon-right,
    .vertical-wrapper .megamenu > li.item-vertical.active > a > b.icon-right {
        border-color: #1b9ad6 !important;
    }

    /* ---- the panel: sits against the rail, top level with it, as tall as its content up to the screen ---- */
    .vertical-wrapper .megamenu > li.with-sub-menu > .sub-menu {
        left: 100% !important;
        right: auto !important;
        width: min(1040px, calc(100vw - var(--pr-menu-left, 340px) - 24px)) !important;
        max-width: none !important;
        height: auto !important;
        max-height: var(--pr-panel-h, 80vh) !important;
        margin-top: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #e3eaf2 !important;
        border-inline-start: 0 !important;
        border-radius: 14px !important;
        border-start-start-radius: 0 !important;
        background: #fff !important;
        box-shadow: 0 22px 60px rgba(15, 23, 42, .20);
        z-index: 5 !important;
    }
    html[dir="rtl"] .vertical-wrapper .megamenu > li.with-sub-menu > .sub-menu {
        left: auto !important;
        right: 100% !important;
    }
    .vertical-wrapper .megamenu > li.with-sub-menu > .sub-menu:has(.menu-groups--few) {
        width: min(760px, calc(100vw - var(--pr-menu-left, 340px) - 24px)) !important;
    }
    .megamenu .sub-menu .content,
    .megamenu .sub-menu .content > .row,
    .megamenu .sub-menu .content > .row > .col-sm-12,
    .megamenu .sub-menu .categories,
    .megamenu .sub-menu .categories > .row {
        display: block;
        float: none;
        width: 100% !important;
        max-width: none;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
    .megamenu .sub-menu .html { display: none; }

    .menu-groups {
        display: flex;
        flex-direction: column;
        max-height: var(--pr-panel-h, 80vh);
        font-family: 'Open Sans', 'Noto Sans Arabic', 'Open Sans Fallback', sans-serif;
    }

    /* head: name + count, search, "view all" */
    .menu-head {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px 14px;
        padding: 20px 26px 16px;
        border-bottom: 1px solid #eef2f6;
    }
    .menu-head-text { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .menu-head-title { color: #0f172a; font-size: 21px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
    .menu-head-count { padding: 3px 11px; border-radius: 999px; background: #eaf6fd; color: #0b5ea8; font-size: 12px; font-weight: 700; line-height: 18px; white-space: nowrap; }
    .menu-head-search {
        flex: 1 1 200px;
        width: auto;
        max-width: 300px;
        min-width: 160px;
        height: 40px;
        margin-inline-start: auto;
        padding: 0 16px 0 40px !important;
        border: 1px solid #d5dde8;
        border-radius: 999px;
        background: #f7fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-5-5'/%3E%3C/svg%3E") no-repeat 14px center;
        color: #0f172a;
        font-size: 14px;
        outline: none;
        box-shadow: none;
        transition: border-color .2s, box-shadow .2s, background-color .2s;
    }
    html[dir="rtl"] .menu-head-search { padding: 0 40px 0 16px !important; background-position: right 14px center; }
    .menu-head-search:focus { border-color: #1b9ad6; background-color: #fff; box-shadow: 0 0 0 3px rgba(27, 154, 214, .2); }
    .menu-head-all {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 18px;
        border: 1px solid #cfe3f3;
        border-radius: 999px;
        color: #0b5ea8 !important;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none !important;
        white-space: nowrap;
        transition: background .15s, color .15s, border-color .15s;
    }
    .menu-head-all:hover { background: #0b5ea8; border-color: #0b5ea8; color: #fff !important; }
    .menu-head-all .fa { transition: transform .2s; }
    .menu-head-all:hover .fa-arrow-right { transform: translateX(3px); }
    .menu-head-all:hover .fa-arrow-left { transform: translateX(-3px); }

    /* body: the names in balanced columns under quiet headings; scrolls inside the panel when the screen is short */
    .menu-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        gap: 0 32px;
        padding: 20px 26px 6px;
        scrollbar-width: thin;
        scrollbar-color: #c4d0dc transparent;
    }
    .menu-groups--few .menu-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .menu-col { min-width: 0; }
    .menu-nomatch { grid-column: 1 / -1; }
    .menu-group { margin: 0 0 20px; }
    /* group headings: darker and bolder, with room above (owner, 2026-10-19) and a thin line under them */
    .menu-group-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 6px;
        padding: 14px 0 6px;
        border: 0;
        border-bottom: 1px solid #e3edf6;
        color: #1e2a3b !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
        letter-spacing: .06em;
        line-height: 1.3 !important;
        text-transform: uppercase;
    }
    .menu-body > .menu-col > .menu-group:first-child .menu-group-title,
    .menu-groups--struct .menu-body > .menu-group:nth-child(-n+3) .menu-group-title { padding-top: 4px; }
    .menu-group-title::before { content: none; }
    html[dir="rtl"] .menu-group-title { letter-spacing: 0; font-size: 13px !important; }
    .menu-group ul { margin: 0; padding: 0; list-style: none; }
    .menu-group li { margin: 0; padding: 0; }
    .menu-group li a {
        display: block;
        margin: 0 -10px;
        padding: 6px 10px;
        border-radius: 8px;
        color: #334155 !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;
        text-decoration: none;
        transition: background .12s, color .12s, padding .12s;
    }
    html[dir="rtl"] .menu-group li a { font-size: 14px; line-height: 1.5; }
    .menu-group li a:hover,
    .menu-group li a:focus { padding-inline-start: 14px; background: #eaf6fd; color: #0b5ea8 !important; outline: none; }
    .menu-nomatch { margin: 10px 0 16px; color: #64748b; font-size: 14px; }
    .menu-nomatch[hidden] { display: none; }

    /* foot (redesigned 2026-10-19): a help line on one side, two equal action buttons on the other. Both buttons are 46px pills with
       a 34px round icon at the end (the site's .pr-btn look): red "Request a Quote", green "WhatsApp". */
    .menu-foot {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px 24px;
        padding: 14px 26px;
        border-top: 1px solid #e3edf6;
        background: linear-gradient(180deg, #f7fbfe 0%, #eef6fc 100%);
    }
    .menu-foot-help { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .menu-foot-help-icon {
        display: grid;
        flex: 0 0 40px;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 4px 12px rgba(11, 94, 168, .12);
        color: #0b5ea8;
    }
    .menu-foot-help-icon svg { display: block; width: 22px; height: 22px; }
    .menu-foot-help-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .menu-foot-title { color: #1f2937; font-size: 14px; font-weight: 700; line-height: 1.35; }
    .menu-foot-text { color: #64748b; font-size: 13px; font-weight: 400; line-height: 1.4; }
    .menu-foot-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .menu-foot a.menu-foot-wa,
    .menu-foot a.pr-btn.menu-foot-quote {
        display: inline-flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: auto !important;
        min-width: 0;
        height: 46px;
        margin: 0 !important;
        padding: 0 6px 0 20px !important;
        border: 0;
        border-radius: 999px;
        color: #fff !important;
        font-size: 14px;
        font-weight: 700;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap;
        transition: transform .2s, box-shadow .2s, filter .2s;
    }
    html[dir="rtl"] .menu-foot a.menu-foot-wa,
    html[dir="rtl"] .menu-foot a.pr-btn.menu-foot-quote { padding: 0 20px 0 6px !important; }
    .menu-foot a.menu-foot-wa {
        background: linear-gradient(135deg, #1fb25a 0%, #0e8a47 100%);
        box-shadow: 0 6px 14px rgba(14, 138, 71, .30);
    }
    .menu-foot a.menu-foot-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(14, 138, 71, .42); }
    .menu-foot a.pr-btn.menu-foot-quote:hover { transform: translateY(-2px); }
    .menu-foot-label, .menu-foot a.pr-btn .pr-btn-label { display: inline-block !important; margin: 0 !important; color: #fff !important; font-size: 14px; font-weight: 700; white-space: nowrap; }
    .menu-foot-ic,
    .menu-foot a.pr-btn .pr-btn-icon {
        display: inline-grid !important;
        flex: 0 0 34px;
        place-items: center;
        width: 34px;
        height: 34px;
        margin: 0 !important;
        border-radius: 50%;
        background: #fff;
        font-size: 14px;
        line-height: 1;
    }
    .menu-foot-ic { color: #0e8a47; font-size: 19px; }
    .menu-foot-ic .fa { display: block; margin: 0 !important; line-height: 1; }
    .menu-foot a.pr-btn.menu-foot-quote .pr-btn-icon { color: #a81220; }
}
@media (min-width: 992px) {
    /* the active / hovered section: the theme's strong blue is replaced by a soft tint with an accent bar (higher specificity than the theme rules) */
    html .vertical-wrapper .megamenu.oe_menu > li.item-vertical.vertical-style3 > a { background: transparent !important; color: #1f2937 !important; }
    html .vertical-wrapper .megamenu.oe_menu > li.item-vertical.vertical-style3:hover > a,
    html .vertical-wrapper .megamenu.oe_menu > li.item-vertical.vertical-style3.active > a,
    html .vertical-wrapper .megamenu.oe_menu > li.item-vertical.vertical-style3 > a:focus {
        background: #eaf6fd !important;
        color: #0b5ea8 !important;
    }
    html .vertical-wrapper .megamenu.oe_menu > li.item-vertical.vertical-style3 > a:hover span,
    html .vertical-wrapper .megamenu.oe_menu > li.item-vertical.vertical-style3:hover > a span,
    html .vertical-wrapper .megamenu.oe_menu > li.item-vertical.vertical-style3.active > a span,
    html .vertical-wrapper .megamenu.oe_menu > li.item-vertical.vertical-style3.active > a strong { color: #0b5ea8 !important; }
    /* pills: text centred on the pill whatever the theme does to links */
    .menu-head-all, .menu-foot-wa { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; width: auto !important; line-height: 1 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
    .menu-head-all .fa, .menu-foot-wa .fa { line-height: 1; display: inline-block; margin: 0 !important; }
    .vertical-wrapper .megamenu > li.item-vertical > a::after,
    .vertical-wrapper .megamenu > li.item-vertical > a::before { display: none !important; }
    /* a soft fade tells the visitor that the list continues below */
    .menu-body { padding-bottom: 30px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); }
}
@media (max-height: 640px) and (min-width: 992px) {
    .menu-foot-help { display: none; }
    .menu-foot { justify-content: flex-end; }
    .menu-head { padding-top: 14px; padding-bottom: 12px; }
}


@media (min-width: 992px) {
    /* the floating WhatsApp button, the live chat (Tawk.to bubble and its greeting) and the back-to-top button step aside while the services menu is open */
    body:has(.container-megamenu.vertical:hover) [id^="gb-widget"],
    body:has(.container-megamenu.vertical:hover) .back-to-top,
    body:has(.container-megamenu.vertical:hover) [id^="tawk-"],
    body:has(.container-megamenu.vertical:hover) iframe[src*="tawk.to"],
    body:has(.container-megamenu.vertical:hover) iframe[title*="chat" i] {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* arrow circles of the buttons: the arrow is centred both ways whatever the theme does to icons */
.pr-btn-icon,
.footer-quote-arrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    padding: 0 !important;
}
.pr-btn-icon .fa,
.footer-quote-arrow .fa {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
    height: auto;
    font-size: 13px;
    line-height: 1 !important;
    text-align: center;
    position: static !important;
    top: auto !important;
}

/* ======================= PRODUCT DETAIL PAGES: gallery card on one side, information card on the other ======================= */
@media (min-width: 768px) {
    #content .product-info {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
        gap: 28px;
        align-items: start;
        margin: 6px 0 24px;
    }
    #content .product-info > div,
    #content .product-info > center {
        float: none;
        width: auto;
        max-width: none;
        padding: 0;
        margin: 0;
    }
    #content .product-info > center {
        grid-column: 2;
    }
}
/* gallery */
#content .product-info .image {
    padding: 14px;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}
#content .product-info .image img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    max-height: 560px;
    margin: 0 auto;
    border-radius: 8px;
    object-fit: contain;
}
#content .product-info .image-additional,
#content .product-info .image + .row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: auto;
    margin: 12px 0 0;
    padding: 0;
}
#content .product-info .image-additional > a,
#content .product-info .image + .row > div {
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: 2px solid #e3e8ee;
    border-radius: 10px;
    background: #fff;
    transition: border-color .2s, transform .2s;
}
#content .product-info .image-additional > a:hover,
#content .product-info .image + .row > div:hover {
    border-color: #3dade2;
    transform: translateY(-2px);
}
#content .product-info .image-additional img,
#content .product-info .image + .row img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    margin: 0;
    object-fit: cover;
}
#content .product-info .image + .row > div > a {
    display: block;
    width: 100%;
    height: 100%;
}
/* information card */
#content .product-info > div:nth-of-type(2) {
    padding: 22px 26px 18px;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
#content .product-info h2.title {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 3px solid #3dade2;
    color: #0d4f8b !important;
    font-size: 18px !important;
    letter-spacing: .04em;
    text-align: start !important;
    text-transform: uppercase;
}
#content .product-info ul.description {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
#content .product-info ul.description li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px dashed #e3e8ee;
    font-size: 14px;
    line-height: 1.5;
}
#content .product-info ul.description li:last-child {
    border-bottom: 0;
}
#content .product-info ul.description li b {
    flex: 0 0 168px;
    color: #252525;
}
#content .product-info ul.description li span {
    flex: 1 1 140px;
    color: #555;
}
#content .product-info form#order-form {
    margin: 4px 0 14px;
}
#content .product-info form#order-form br {
    display: none;
}
#content .product-info form#order-form .qty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
#content .product-info #order {
    display: flex;
    width: 100%;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 16px;
}
#content .product-info #product {
    margin-top: 12px;
}
#content .product-info #product h3 {
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-bottom: 2px solid #3dade2;
    color: #252525;
    font-size: 17px !important;
}
#content .product-info #product p {
    max-width: none;
}
@media (max-width: 767px) {
    #content .product-info {
        display: block;
    }
    #content .product-info > div:nth-of-type(2) {
        margin-top: 16px;
    }
    #content .product-info ul.description li b {
        flex-basis: 100%;
    }
}
#content .product-info::before,
#content .product-info::after {
    display: none;
}
#content .product-info ul.description li b {
    flex-basis: 196px;
}
#content .product-info #product + #product,
#content .product-info #product ~ #product {
    margin-top: 22px;
}
#content .product-info #product h3 {
    font-size: 18px !important;
}

/* the share bar of templates that print it outside the information card: one tidy row under the gallery and card */
@media (min-width: 768px) {
    #content .product-info > center {
        grid-column: 1 / -1;
        text-align: start;
    }
}
#content .product-info > center br {
    display: none;
}
#content .product-info #product hr {
    margin: 10px 0;
    border-color: #e3e8ee;
}

/* gallery: the big picture fills its card; four larger thumbnails share the row */
#content .product-info .image {
    padding: 0;
    overflow: hidden;
    line-height: 0;
}
#content .product-info .image img {
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
}
#content .product-info .image-additional,
#content .product-info .image + .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
#content .product-info .image-additional > a,
#content .product-info .image + .row > div {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
}
@media (max-width: 480px) {
    #content .product-info .image-additional,
    #content .product-info .image + .row {
        gap: 8px;
    }
}

/* "You May Also Like" / "Related Products": one heading style, an even card grid, titles centred, the same card look as the lists */
#content h3.subtitle {
    margin: 30px 0 16px;
    padding-bottom: 8px;
    border-bottom: 3px solid #3dade2;
    color: #252525;
    font-size: 20px !important;
}
#content .product_carousel .item,
#content .product_carousel .owl-item > div {
    padding: 0 8px;
}
#content .product_carousel .thumbnail,
#content .product_carousel .product-thumb,
#content .product_carousel .item > div {
    overflow: hidden;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    transition: box-shadow .25s, transform .25s;
}
#content .product_carousel img {
    display: block;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
#content .product_carousel h3,
#content .product_carousel .caption a,
#content .product_carousel .item a:not(.pr-btn) {
    font-size: 14px !important;
    line-height: 1.4;
    text-align: center;
}

/* thumbnails: the grid's clearfix pseudo-elements must not take a cell, and the old column padding is removed */
#content .product-info .image + .row::before,
#content .product-info .image + .row::after,
#content .product-info .image-additional::before,
#content .product-info .image-additional::after {
    display: none !important;
    content: none !important;
}
#content .product-info .image + .row > div {
    float: none;
    padding: 0 !important;
}
#content .product-info .image + .row > div > a {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
}
#content .product-info .image + .row > div img {
    position: static;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* quantity: a joined  [ - | 1 | + ]  stepper */
#content .product-info form#order-form .qty {
    display: flex;
    align-items: center;
    gap: 14px;
}
#content .product-info form#order-form .qty > label {
    margin: 0;
    min-height: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
#content .product-info form#order-form .qty .qtyBtn,
#content .product-info form#order-form .qty #input-quantity {
    float: none !important;
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0;
    border: 1px solid #cfd8e3;
    background: #fff;
    color: #0d4f8b;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    transition: background .2s, color .2s;
}
#content .product-info form#order-form .qty #input-quantity {
    width: 56px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    color: #252525;
    font-size: 16px;
    text-align: center;
    order: 2;
}
#content .product-info form#order-form .qty .qtyBtn.mines {
    order: 1;
    border-radius: 10px 0 0 10px;
}
#content .product-info form#order-form .qty .qtyBtn.plus {
    order: 3;
    border-radius: 0 10px 10px 0;
}
html[dir="rtl"] #content .product-info form#order-form .qty .qtyBtn.mines { border-radius: 0 10px 10px 0; }
html[dir="rtl"] #content .product-info form#order-form .qty .qtyBtn.plus { border-radius: 10px 0 0 10px; }
#content .product-info form#order-form .qty .qtyBtn:hover {
    background: #3dade2;
    border-color: #3dade2;
    color: #fff;
}
#content .product-info form#order-form .qty .qtyBtn.plus::before { content: "+"; }
#content .product-info form#order-form .qty .qtyBtn.mines::before { content: "\2212"; }
#content .product-info form#order-form .qty .qtyBtn {
    text-indent: 0 !important;
    overflow: visible !important;
    background-image: none !important;
}
#content .product-info form#order-form .qty .qtyBtn::before {
    content: none !important;
}
#content .product-info .image + .row,
#content .product-info .image-additional {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 12px 0 0 !important;
}

/* related products (carousel on the detail pages): equal cards, square pictures, centred titles, buttons at the bottom */
#content .product_carousel .owl-item {
    padding: 4px 8px 10px;
}
#content .product_carousel .product-thumb {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    transition: box-shadow .25s, transform .25s;
}
#content .product_carousel .product-thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(13, 79, 139, .15);
}
#content .product_carousel .product-thumb::before,
#content .product_carousel .product-thumb::after {
    display: none;
}
#content .product_carousel .product-thumb .image,
#content .product_carousel .product-thumb .image a {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
}
#content .product_carousel .product-thumb .image img {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
#content .product_carousel .product-thumb .caption {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 10px 12px 4px;
    text-align: center;
}
#content .product_carousel .product-thumb .caption h4,
#content .product_carousel .product-thumb .caption h3 {
    margin: 0;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: center;
}
#content .product_carousel .product-thumb .caption a {
    color: #252525;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}
#content .product_carousel .product-thumb > br {
    display: none;
}
#content .product_carousel .product-thumb > div:last-child:not(.caption):not(.image) {
    padding: 4px 12px 14px;
    text-align: center;
}
#content .product_carousel .pr-btn {
    min-width: 0;
    max-width: calc(100% - 4px);
    width: auto;
    margin: 6px auto 0;
    padding-left: 14px;
    gap: 8px;
    font-size: 12px;
}
html[dir="rtl"] #content .product_carousel .pr-btn {
    padding-left: 5px;
    padding-right: 14px;
}
#content .product_carousel .pr-btn .pr-btn-label {
    font-size: 12px;
}

/* quantity row: label in the same column as the labels above, the stepper in the value column; one rounded control */
#content .product-info form#order-form .qty {
    gap: 0;
    padding: 6px 0;
}
#content .product-info form#order-form .qty > label {
    flex: 0 0 196px;
    margin-right: 8px;
    color: #252525;
    font-size: 14px;
    font-weight: 700;
}
html[dir="rtl"] #content .product-info form#order-form .qty > label {
    margin-right: 0;
    margin-left: 8px;
}
#content .product-info form#order-form .qty .qtyBtn,
#content .product-info form#order-form .qty #input-quantity {
    height: 44px;
    border: 1px solid #cfd8e3;
    background: #f4f8fb;
    box-sizing: border-box;
}
#content .product-info form#order-form .qty .qtyBtn {
    width: 46px;
    color: #0d4f8b;
    font-size: 22px;
    cursor: pointer;
    user-select: none;
}
#content .product-info form#order-form .qty #input-quantity {
    width: 64px;
    border-left: 0 !important;
    border-right: 0 !important;
    background: #fff;
    color: #252525;
    font-size: 16px;
    font-weight: 700;
    border-radius: 0 !important;
    outline: none;
    -moz-appearance: textfield;
}
#content .product-info form#order-form .qty #input-quantity::-webkit-outer-spin-button,
#content .product-info form#order-form .qty #input-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#content .product-info form#order-form .qty #input-quantity:focus {
    border-color: #3dade2;
    box-shadow: inset 0 0 0 1px #3dade2;
}
#content .product-info form#order-form .qty .qtyBtn:hover {
    background: #3dade2;
    border-color: #3dade2;
    color: #fff;
}
#content .product-info form#order-form .qty .qtyBtn:active {
    background: #0d4f8b;
    border-color: #0d4f8b;
}
@media (max-width: 767px) {
    #content .product-info form#order-form .qty > label {
        flex-basis: auto;
        margin-right: 14px;
    }
}

/* quantity label starts at the same left edge as the labels above; the two cards start on the same line */
#content .product-info form#order-form .qty > label {
    text-align: start !important;
    padding: 0 !important;
}
#content .product-info .image {
    margin: 0 !important;
}
#content .product-info > div:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
#content .product-info > div:nth-of-type(2) {
    margin-top: 0 !important;
}
#content .row.product-info > div[style*="padding-top"],
#content .product-info > div:first-child[style] {
    padding-top: 0 !important;
}

/* equal card heights: the information card stretches to the height of the gallery column; both start on the same line */
@media (min-width: 768px) {
    #content .product-info {
        align-items: stretch;
    }
    #content .product-info > div:nth-of-type(2) {
        height: auto;
    }
}
#content .product-info > div[style*="padding-top"] .image {
    margin-top: -10px !important;
}
#content .product-info p {
    text-align: start !important;
    hyphens: manual;
    -webkit-hyphens: manual;
}

/* titles under the related-product pictures: readable size, always two lines of room so every card is the same height */
#content .product_carousel .product-thumb .caption {
    min-height: 68px;
}
#content .product_carousel .product-thumb .caption h4,
#content .product_carousel .product-thumb .caption h3,
#content .product_carousel .product-thumb .caption a {
    font-size: 16px !important;
    line-height: 1.4 !important;
}

/* proportional heights: the gallery column stretches with the information card - the big picture takes the extra height (cropped to fill), the thumbnails stay at the bottom, so both columns end on the same line */
@media (min-width: 768px) {
    #content .product-info > div:first-child {
        display: flex;
        flex-direction: column;
    }
    #content .product-info > div:first-child > .image {
        flex: 1 1 auto;
        display: flex;
        min-height: 360px;
    }
    #content .product-info > div:first-child > .image > a,
    #content .product-info > div:first-child > .image > img {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
    }
    #content .product-info > div:first-child > .image img {
        height: 100%;
        aspect-ratio: auto;
        min-height: 360px;
        max-height: none;
    }
    #content .product-info > div:first-child > .center-block,
    #content .product-info > div:first-child > .image-additional,
    #content .product-info > div:first-child > .image + .row {
        flex: 0 0 auto;
    }
}

/* Home page section headings: same typeface as the rest of the site (Open Sans, bold, dark grey, capitals), English and Arabic */
.home-section-title,
.home-blog .block-title {
    float: none !important;
    margin: 0 !important;
    font-family: 'Open Sans', 'Noto Sans Arabic', 'Open Sans Fallback', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    color: #252525 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}
.row > .home-section-title {
    padding: 10px 0 14px !important;
}
.home-blog .block-title {
    padding-bottom: 10px !important;
}
/* "Top selling" band: heading centred, "View All" button on the end side, both on the same centre line */
.home-section-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    background-color: #fff !important;
}
.home-section-head .home-view-all {
    position: absolute;
    top: 50%;
    inset-inline-end: 16px;
    min-width: 0;
    float: none;
    margin: 0 !important;
    transform: translateY(-50%);
}
.home-section-head .home-view-all:hover,
.home-section-head .home-view-all:focus {
    transform: translateY(calc(-50% - 2px));
}

/* Home page tiles: titles use the site typeface; the "Top selling" tiles carry the standard Explore More button */
.mtitle, .mtitle1, .mtitle2, .mtitle22, .mtitle3, h3.hometitle {
    font-family: 'Open Sans', 'Noto Sans Arabic', 'Open Sans Fallback', sans-serif !important;
}
.gp_products_item_caption h3.hometitle {
    margin: 14px 0 12px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #252525 !important;
    text-align: center !important;
}
.gp_products_item_caption > center > a:first-child {
    text-decoration: none !important;
}
.gp_products_item_caption .pr-btn {
    margin: 0 0 16px;
}

/* "Follow Us" row: the heading sits right next to the social icons (no wide empty column between them) */
footer.footer-container > .col-lg-12:first-child > .footer-follow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
}
footer.footer-container > .col-lg-12:first-child > .footer-follow > div {
    float: none;
    width: auto;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
}
footer.footer-container > .col-lg-12:first-child > .footer-follow h3.block-title {
    text-align: start;
    white-space: nowrap;
}
footer.footer-container > .col-lg-12:first-child > .footer-follow ul {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}
footer.footer-container > .col-lg-12:first-child > .footer-follow li {
    padding: 0 !important;
}

/* Home page: every section (tiles, banners, Top selling band, strip) starts and ends on the same vertical lines as the
   product tiles (container content edge minus 10px on each side), so nothing looks narrower or shifted */
.row > a > img.homeimg2,
.row > img.homeimg2 {
    display: block;
    width: calc(100% - 10px) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}
.mcontainerbanner > a > img.homeimg2,
.mcontainerbanner > img.homeimg2 {
    display: block;
    width: calc(100% + 20px) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
}
.container > .panel.panel-default {
    margin-left: -10px;
    margin-right: -10px;
}

/* ======================= LIST PAGES REFRESH (grid view cards, sticky toolbar, search and sort) ======================= */

/* toolbar: one clean white bar that stays at the top while the products scroll under it */
#content .well.well-sm {
    position: sticky;
    top: 8px;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 18px;
    padding: 10px 14px;
    border: 1px solid #e3e9f0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 6px 20px -12px rgba(13, 79, 139, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#content .well.well-sm > a:not(.btn) {
    float: none !important;
    margin-inline-start: auto;
    padding: 6px 14px !important;
    border-radius: 999px;
    background: #eef4fb;
    color: #0d4f8b !important;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.pr-listtools {
    display: flex;
    flex: 1 1 280px;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pr-listtools input[type="search"],
.pr-listtools select {
    height: 38px;
    border: 1px solid #cfd8e3;
    border-radius: 999px;
    background: #fff;
    color: #252525;
    font-size: 14px;
    outline: none;
    box-shadow: none;
}
.pr-listtools input[type="search"] {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 360px;
    padding: 0 16px 0 38px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23728198' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center;
}
html[dir="rtl"] .pr-listtools input[type="search"] {
    padding: 0 38px 0 16px;
    background-position: calc(100% - 14px) center;
}
.pr-listtools select {
    flex: 0 0 auto;
    padding: 0 14px;
    cursor: pointer;
}
.pr-listtools input[type="search"]:focus,
.pr-listtools select:focus {
    border-color: #3dade2;
    box-shadow: 0 0 0 3px rgba(61, 173, 226, .25);
}
.pr-noresults {
    display: none;
    margin: 30px 0;
    padding: 28px;
    border: 1px dashed #cfd8e3;
    border-radius: 14px;
    background: #fff;
    color: #566074;
    text-align: center;
    font-size: 15px;
}

/* cards (grid view): soft corners, light shadow, the picture zooms a little and the card lifts on hover; every picture box has the same shape */
#products .item:not(.list-group-item) > .thumbnail {
    overflow: hidden;
    border: 1px solid #e3e9f0 !important;
    border-radius: 14px;
    background-image: linear-gradient(#fff, #fff) !important;
    box-shadow: 0 2px 10px -4px rgba(16, 24, 40, .18);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#products .item:not(.list-group-item) > .thumbnail:hover {
    transform: translateY(-4px);
    border-color: #b9d6ee !important;
    box-shadow: 0 16px 30px -14px rgba(13, 79, 139, .45);
}
#products .item:not(.list-group-item) > .thumbnail > a:first-child {
    display: block;
    overflow: hidden;
    background: #f3f6f9;
}
#products .item:not(.list-group-item) > .thumbnail > a:first-child img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transition: transform .5s ease;
}
#products .item:not(.list-group-item) > .thumbnail:hover > a:first-child img {
    transform: scale(1.05);
}
#products .item:not(.list-group-item) > .thumbnail > .caption {
    padding: 14px 14px 4px;
}
/* the button is lighter inside the cards: an outlined pill that fills with colour on hover */
#products .item:not(.list-group-item) .pr-btn--more {
    padding: 4px 4px 4px 18px;
    background: #fff;
    border: 1.5px solid #0d4f8b;
    box-shadow: none;
}
html[dir="rtl"] #products .item:not(.list-group-item) .pr-btn--more {
    padding: 4px 18px 4px 4px;
}
#products .item:not(.list-group-item) .pr-btn--more .pr-btn-label {
    color: #0d4f8b !important;
}
#products .item:not(.list-group-item) .pr-btn--more .pr-btn-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    background: #0d4f8b;
    color: #fff;
    line-height: 26px;
}
#products .item:not(.list-group-item) .pr-btn--more:hover,
#products .item:not(.list-group-item) .pr-btn--more:focus {
    background: linear-gradient(135deg, #0d4f8b 0%, #3dade2 100%);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(13, 79, 139, .35);
}
#products .item:not(.list-group-item) .pr-btn--more:hover .pr-btn-label {
    color: #fff !important;
}
#products .item:not(.list-group-item) .pr-btn--more:hover .pr-btn-icon {
    background: #fff;
    color: #0d4f8b;
}

/* phones: two compact cards per row, a smaller title and button */
@media (max-width: 575px) {
    #products .item.col-xs-12:not(.list-group-item) {
        width: 50%;
        padding-left: 6px;
        padding-right: 6px;
    }
    #products .item:not(.list-group-item) > .thumbnail > .caption {
        padding: 10px 8px 2px;
    }
    #products .item:not(.list-group-item) h3 {
        font-size: 14px !important;
    }
    #products .item:not(.list-group-item) .pr-btn {
        height: 34px;
    }
    #products .item:not(.list-group-item) .pr-btn-label {
        font-size: 12px;
    }
    #content .well.well-sm {
        top: 4px;
        padding: 8px 10px;
    }
}

/* Tile and card headings: the first letter of every word is a capital, whatever the stored text looks like (home tiles, Top selling, product and category cards) */
.mtitle22,
.mtitle,
.mtitle1,
.hometitle,
#products .item h3,
#content .product-item-container h3 {
    text-transform: capitalize !important;
}

/* ---- category pages (cards with the hover collage): same toolbar and the same card look as the product lists ---- */
.pr-listbar {
    position: sticky;
    top: 8px;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid #e3e9f0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 6px 20px -12px rgba(13, 79, 139, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.pr-listbar .pr-count {
    margin-inline-start: auto;
    padding: 6px 14px;
    border-radius: 999px;
    background: #eef4fb;
    color: #0d4f8b;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.products-list .product-layout > .product-item-container {
    overflow: hidden;
    border: 1px solid #e3e9f0 !important;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px -4px rgba(16, 24, 40, .18);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.products-list .product-layout > .product-item-container:hover {
    transform: translateY(-4px);
    border-color: #b9d6ee !important;
    box-shadow: 0 16px 30px -14px rgba(13, 79, 139, .45);
}
.products-list .product-item-container .product-image-container img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.products-list .product-item-container .right-block {
    padding: 14px 12px 16px;
}
.product-item-container .pr-btn--more {
    padding: 4px 4px 4px 18px;
    background: #fff;
    border: 1.5px solid #0d4f8b;
    box-shadow: none;
}
html[dir="rtl"] .product-item-container .pr-btn--more {
    padding: 4px 18px 4px 4px;
}
.product-item-container .pr-btn--more .pr-btn-label {
    color: #0d4f8b !important;
}
.product-item-container .pr-btn--more .pr-btn-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    background: #0d4f8b;
    color: #fff;
    line-height: 26px;
}
.product-item-container .pr-btn--more:hover,
.product-item-container .pr-btn--more:focus {
    background: linear-gradient(135deg, #0d4f8b 0%, #3dade2 100%);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(13, 79, 139, .35);
}
.product-item-container .pr-btn--more:hover .pr-btn-label {
    color: #fff !important;
}
.product-item-container .pr-btn--more:hover .pr-btn-icon {
    background: #fff;
    color: #0d4f8b;
}
@media (max-width: 575px) {
    .products-list .product-layout.col-xs-12 {
        width: 50%;
        padding-left: 6px;
        padding-right: 6px;
    }
    .products-list .product-item-container h3 {
        font-size: 14px !important;
    }
    .product-item-container .pr-btn {
        height: 34px;
    }
    .product-item-container .pr-btn-label {
        font-size: 12px;
    }
    .pr-listbar {
        top: 4px;
        padding: 8px 10px;
    }
}

/* ---- intro texts: no big white gaps between paragraphs or below the text ---- */
.about-text p br + br {
    display: block;
    content: "";
    height: 0;
    margin-top: .5em;
    line-height: 0;
}
.about-text p {
    margin-bottom: 10px;
}
.about-text ul.simple-ul {
    margin: 4px 0 10px;
}
.about-us.about-demo-1 > .row > [class*="col-lg"],
.about-us.about-demo-1 > .row > [class*="col-md"] {
    margin-bottom: 12px !important;
}
.about-us.about-demo-1 > .row {
    margin-bottom: 0;
}

/* phones: the button always fits inside its (half-width) card */
@media (max-width: 575px) {
    #products .item:not(.list-group-item) .pr-btn--more,
    .product-item-container .pr-btn--more {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        justify-content: space-between;
        padding-left: 12px;
        box-sizing: border-box;
    }
    html[dir="rtl"] #products .item:not(.list-group-item) .pr-btn--more,
    html[dir="rtl"] .product-item-container .pr-btn--more {
        padding-left: 4px;
        padding-right: 12px;
    }
}

/* ======================= HOME PAGE REFRESH (cards, headings, tracking strip, scroll reveal) ======================= */
html { scroll-behavior: smooth; }

/* every picture tile (3-column tiles, Featured Services, the four lower tiles): rounded, a soft shadow, lifts and zooms on hover */
.mtitle22,
.mtitle2 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* section headings get a short colour bar */
.home-section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #0d4f8b, #3dade2);
}
.home-section-head .home-section-title::after {
    margin-top: 6px;
}

/* main slider and the wide banners */
.sohomeslider-inner-1 {
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 30px -16px rgba(16, 24, 40, .45);
}
.mcontainerbanner img.homeimg2 {
    border-radius: 16px !important;
    box-shadow: 0 6px 20px -10px rgba(16, 24, 40, .4);
    transition: transform .35s ease, box-shadow .35s ease;
}
.mcontainerbanner img.homeimg2:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -14px rgba(13, 79, 139, .5);
}
.gp_products_item_image img {
    border-radius: 12px 12px 0 0;
}

/* "Track your order": a rounded bar, a pill search field with a round button */
div[style*="track-your-order"] {
    border-radius: 16px !important;
    box-shadow: 0 10px 26px -14px rgba(13, 79, 139, .6);
}
form[action="tracking-results"] .input-group .form-control {
    height: 44px;
    border: 0;
    border-radius: 999px 0 0 999px;
    padding: 0 20px;
    box-shadow: none;
}
form[action="tracking-results"] .input-group-btn .btn {
    height: 44px;
    border: 0;
    border-radius: 0 999px 999px 0;
    padding: 0 22px;
    background: #3dade2;
    color: #fff;
    box-shadow: none;
    transition: background .2s;
}
form[action="tracking-results"] .input-group-btn .btn:hover {
    background: #0d4f8b;
}
html[dir="rtl"] form[action="tracking-results"] .input-group .form-control {
    border-radius: 0 999px 999px 0;
}
html[dir="rtl"] form[action="tracking-results"] .input-group-btn .btn {
    border-radius: 999px 0 0 999px;
}

/* scroll reveal (added by home-polish.js, only to things that start below the screen; nothing is hidden without the script) */
.pr-rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}
.pr-rv.is-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .pr-rv { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    .mobileviewcard1 > center > a, .mobileviewcard2 > center > a, a:has(> h3.mtitle22), .mcontainerbanner img.homeimg2 { transition: none; }
}

/* the zoomed picture never covers the title: titles and caption bars sit above it */
.mtitle22,
.mtitle2,
.mobileviewcard1 > center > a > div,
.mobileviewcard2 > center > a > div {
    position: relative;
    z-index: 2;
}

/* ---- home page: the same 16px between every section (slider, tracking bar, tiles, banners, maps) ---- */
.container[style*="min-width: 98.5%"] {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}
.row_qprh.row-style {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}
.page-bottom {
    margin: 0;
    padding: 0;
}
.page-bottom + .container {
    margin-top: 16px;
}
/* the tracking bar: title and search field are centred, the same space above and below */
div[style*="track-your-order"] {
    display: flex !important;
    align-items: center;
    min-height: 66px;
}
div[style*="track-your-order"] h3 {
    margin: 0 !important;
    padding: 0 !important;
}
div[style*="track-your-order"] form[action="tracking-results"] {
    margin: 0;
    padding: 11px 0 !important;
}

/* ======================= BRANDING / GIFT SHOWCASE PAGES (tabs + picture tiles) ======================= */
/* tabs: round chips, the active one in the brand gradient */
.block-title-w > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 26px 0 20px;
    padding: 0;
    list-style: none;
}
.block-title-w > ul > li {
    float: none;
    margin: 0;
}
.block-title-w > ul > li > a {
    display: block;
    padding: 9px 22px;
    border: 1px solid #cfd8e3;
    border-radius: 999px;
    background: #fff;
    color: #0d4f8b;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.block-title-w > ul > li > a:hover {
    border-color: #3dade2;
    box-shadow: 0 6px 14px -8px rgba(13, 79, 139, .6);
}
.block-title-w > ul > li.active > a,
.block-title-w > ul > li > a[aria-expanded="true"] {
    border-color: transparent;
    background: linear-gradient(135deg, #0d4f8b 0%, #3dade2 100%);
    color: #fff;
}
.tab-content {
    margin-top: 0 !important;
}

/* big picture tiles: rounded, lift and zoom on hover; the title sits on a soft dark gradient over the picture */
.section-box-ten {
    border-radius: 16px;
    background: #eef2f6 !important;
    box-shadow: 0 3px 14px -6px rgba(16, 24, 40, .3);
    transition: transform .3s ease, box-shadow .3s ease;
}
.section-box-ten:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px -14px rgba(13, 79, 139, .5);
}
.section-box-ten > img {
    display: block;
    width: 100%;
    transition: transform .6s ease;
}
.section-box-ten:hover > img {
    transform: scale(1.05);
}
.section-box-ten figure {
    top: auto;
    bottom: 0;
    z-index: 2;
    height: auto;
    padding: 46px 14px 16px;
    background: linear-gradient(to top, rgba(8, 20, 38, .85) 0%, rgba(8, 20, 38, 0) 100%) !important;
    text-align: center;
}
.section-box-ten figure h3 {
    padding: 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.section-box-ten figure p,
.section-box-ten figure .btn-read {
    display: none;
}
/* the small pictures under each tile */
.tab-pane .col-xs-6 > img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 10px -4px rgba(16, 24, 40, .25);
    transition: transform .3s ease, box-shadow .3s ease;
}
.tab-pane .col-xs-6 > img:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 22px -10px rgba(13, 79, 139, .45);
}
.block-title-w > ul > li {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* tab chips: the text keeps its colour on hover, focus and click (the theme turned it white on a white chip) */
.block-title-w > ul > li > a,
.block-title-w > ul > li > a:visited {
    color: #0d4f8b !important;
    background-color: #fff !important;
}
.block-title-w > ul > li > a:hover,
.block-title-w > ul > li > a:focus,
.block-title-w > ul > li > a:active {
    color: #0d4f8b !important;
    background-color: #eef6fd !important;
    border-color: #3dade2 !important;
    outline: none;
}
.block-title-w > ul > li.active > a,
.block-title-w > ul > li.active > a:hover,
.block-title-w > ul > li.active > a:focus {
    color: #fff !important;
    background: linear-gradient(135deg, #0d4f8b 0%, #3dade2 100%) !important;
    border-color: transparent !important;
}

/* exact gaps: the panel's own bottom margin and the tile rows' margins must not add to the 16px between sections */
.container[style*="min-width: 98.5%"] > .panel {
    margin-bottom: 0;
}
.container[style*="min-width: 98.5%"] > .row {
    margin-top: 0;
    margin-bottom: 0;
}
/* rows of cards touch (the cards' own 5px column padding makes the 10px gap, the same as sideways) */
.container[style*="min-width: 98.5%"] > .row + .row,
.container[style*="min-width: 98.5%"] > .row.specialrowtop {
    margin-top: 0 !important;
}
/* the wide banner under the tiles */
.container[style*="min-width: 98.5%"] > .row:has(> a > img.homeimg2) {
    margin-top: 11px !important;
}
.row > a > img.homeimg2 {
    margin-top: 0 !important;
}

/* picture sections start 5px lower inside (column padding), so their outer margin is 5px smaller: the VISIBLE gap is 16px everywhere */
.container[style*="min-width: 98.5%"]:has(> .row > [class*="mobileviewcard"]),
.container[style*="min-width: 98.5%"]:has(> .row > .col-lg-4),
.container[style*="min-width: 98.5%"]:has(> .panel) {
    margin-top: 11px !important;
}
.container[style*="min-width: 98.5%"]:has(> .row > .home-section-title) {
    margin-top: 6px !important;
}
.page-bottom + .container {
    margin-top: 11px;
}

/* tab chips: smaller, lighter */
.block-title-w > ul {
    gap: 8px;
    margin: 18px 0 16px;
}
.block-title-w > ul > li > a {
    padding: 6px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

/* tab chips: clear space above (from the text) and below (to the toolbar), also when a page gives the wrapper its own margin */
.block-title-w {
    margin: 0 !important;
    padding: 0 !important;
}
.block-title-w > ul {
    margin: 22px 0 20px !important;
}

/* tab content never slides up under the tabs, and maps get room below the tabs */
.tab-content {
    margin-top: 0 !important;
}
.block-title-w + .tab-content {
    padding-top: 6px;
}

/* ======================= NEWS / ALBUM CARDS (news-events and picture albums) ======================= */
.products-category.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}
.products-category.row::before,
.products-category.row::after {
    display: none;
}
.products-category > .product-layout.product-grid {
    display: flex;
    float: none;
    padding: 8px;
}
.products-category .product-thumb {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    border: 1px solid #e3e9f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 10px -4px rgba(16, 24, 40, .18);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.products-category .product-thumb:hover {
    transform: translateY(-4px);
    border-color: #b9d6ee;
    box-shadow: 0 16px 30px -14px rgba(13, 79, 139, .45);
}
.products-category .product-thumb .image {
    overflow: hidden;
    background: #f3f6f9;
}
.products-category .product-thumb .image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    transition: transform .5s ease;
}
.products-category .product-thumb:hover .image img {
    transform: scale(1.05);
}
.products-category .product-thumb > div:not(.image) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 4px 6px 16px;
}
.products-category .product-thumb .caption {
    flex: 1 1 auto;
    padding: 8px 8px 0;
}
.products-category .product-thumb .caption h4:empty {
    display: none;
}
.products-category .product-thumb .caption p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 !important;
    margin: 6px 0 0;
    text-align: start !important;
    font-size: 14.5px !important;
    line-height: 1.65;
    color: #444;
}
.products-category .product-thumb center {
    margin-top: 14px;
}
.products-category .product-thumb center .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto !important;
    min-width: 160px;
    height: 38px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d4f8b 0%, #3dade2 100%) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(13, 79, 139, .28);
    transition: transform .25s, box-shadow .25s;
}
.products-category .product-thumb center .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(13, 79, 139, .4);
}
@media (max-width: 575px) {
    .products-category > .product-layout.product-grid {
        width: 100%;
    }
}
/* the intro line above the cards sits on the same left edge as the heading */
.about-us.about-demo-1 > .row > .col-sm-12 > p {
    padding-left: 0 !important;
    text-align: start !important;
}
#content .products-category .product-thumb .caption p {
    text-align: start !important;
    -webkit-hyphens: manual;
    hyphens: manual;
}
.products-category .product-thumb .image img {
    object-position: center top !important;
}

/* ======================= FORMS (quote, request a quote, careers, job interest, event art, photo contest) ======================= */
/* the quote forms become one soft card */
#content form#quote-form {
    max-width: 1100px;
    margin: 16px auto 24px;
    padding: 26px 28px 30px;
    border: 1px solid #e3e9f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px -20px rgba(16, 24, 40, .3);
}
#content form#quote-form::after {
    content: "";
    display: block;
    clear: both;
}
#content form#quote-form .form-group {
    margin-bottom: 16px;
    padding-left: 10px;
    padding-right: 10px;
}
/* labels */
#content form#quote-form label,
#content form:has(input[name="url"]) label.control-label,
#content form:has(input[name="url"]) .form-group > label {
    display: block;
    margin: 0 0 6px;
    color: #344054;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
#content form#quote-form label + br,
#content form:has(input[name="url"]) .control-label + br {
    display: none;
}
/* fields */
#content form#quote-form :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
#content form:has(input[name="url"]) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
    display: block;
    float: none !important;
    width: 100% !important;
    height: 46px;
    padding: 10px 14px;
    border: 1px solid #cfd8e3 !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: #252525;
    font-size: 15px;
    font-weight: 400 !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
#content form#quote-form textarea,
#content form:has(input[name="url"]) textarea {
    height: auto;
    min-height: 130px;
    line-height: 1.6;
    resize: vertical;
}
#content form#quote-form :is(input, select, textarea)::placeholder,
#content form:has(input[name="url"]) :is(input, textarea)::placeholder {
    color: #98a2b3;
}
#content form#quote-form :is(input, select, textarea):focus,
#content form:has(input[name="url"]) :is(input, select, textarea):focus {
    border-color: #3dade2 !important;
    box-shadow: 0 0 0 3px rgba(61, 173, 226, .22) !important;
    outline: none;
}
#content form :is(input, textarea)[readonly] {
    background-color: #f3f6f9 !important;
    color: #566074 !important;
}
/* file upload: a dashed box */
#content form#quote-form input[type="file"],
#content form:has(input[name="url"]) input[type="file"] {
    display: block;
    width: 100%;
    padding: 12px;
    border: 2px dashed #cfd8e3;
    border-radius: 10px;
    background: #f8fafc;
    color: #566074;
    font-size: 14px;
    cursor: pointer;
}
/* tick boxes */
#content form input[type="checkbox"],
#content form input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-inline-end: 8px;
    accent-color: #0d4f8b;
    vertical-align: middle;
}
/* captcha and submit */
#content form .g-recaptcha {
    margin: 14px 0 6px;
}
#content form#quote-form button[type="submit"],
#content form#quote-form input[type="submit"],
#content form:has(input[name="url"]) button[type="submit"],
#content form:has(input[name="url"]) input[type="submit"],
form[action*="photography"] button[type="submit"],
form[action*="photography"] input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 46px;
    margin-top: 12px;
    padding: 0 28px;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0d4f8b 0%, #3dade2 100%) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(13, 79, 139, .3);
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
}
#content form#quote-form button[type="submit"]:hover,
#content form:has(input[name="url"]) button[type="submit"]:hover,
form[action*="photography"] button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(13, 79, 139, .4);
}
#content form#quote-form + p,
#content form#quote-form center {
    text-align: center;
}
/* careers / job panels */
#content form .panel {
    overflow: hidden;
    border: 1px solid #e3e9f0;
    border-radius: 16px;
    box-shadow: 0 8px 26px -18px rgba(16, 24, 40, .3);
}
#content form .panel-heading {
    padding: 14px 20px;
    border: 0;
    background: linear-gradient(135deg, #0d4f8b 0%, #3dade2 100%) !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
}
#content form .panel-body {
    padding: 22px;
}
/* photo contest card on its picture */
@media (max-width: 767px) {
    #content form#quote-form { padding: 18px 14px 22px; border-radius: 14px; }
    #content form#quote-form button[type="submit"],
    #content form:has(input[name="url"]) button[type="submit"] { width: 100%; }
}

/* quote form: a real two-column grid, every field on the same line as its neighbour, one equal gap (the old inline margins are ignored) */
#content form#quote-form {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
#content form#quote-form::before,
#content form#quote-form::after {
    display: none;
}
#content form#quote-form .form-group {
    float: none;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}
#content form#quote-form .form-group.col-md-6 { width: 50%; }
#content form#quote-form .form-group.col-md-12 { width: 100%; }
#content form#quote-form > center,
#content form#quote-form > div:not(.form-group) {
    width: 100%;
    padding: 0 10px;
}
@media (max-width: 991px) {
    #content form#quote-form .form-group.col-md-6 { width: 100%; }
}

#content form#quote-form input[type="file"],
#content form:has(input[name="url"]) input[type="file"] {
    height: auto !important;
    min-height: 46px;
    line-height: 1.4;
}
#content form .row::after { content: ""; display: table; clear: both; }
#content form#quote-form .form-group {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#content form#quote-form .form-group > br { display: none; }

/* Page banners with the white swoosh (request a quote, event art): the heading sits inside the swoosh, on the banner, instead of drifting below it */
#content .about-us > img[src*="request-a-quote-banner"] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}
#content .about-us > img[src*="request-a-quote-banner"] + .title {
    position: relative;
    margin: -66px 0 26px !important;
    padding: 0 0 0 84px !important;
    text-align: left !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
}
@media (max-width: 991px) {
    #content .about-us > img[src*="request-a-quote-banner"] + .title { margin-top: -44px !important; padding-left: 40px !important; font-size: 26px !important; }
}
@media (max-width: 575px) {
    #content .about-us > img[src*="request-a-quote-banner"] { border-radius: 12px; }
    #content .about-us > img[src*="request-a-quote-banner"] + .title { margin: 14px 0 16px !important; padding-left: 4px !important; font-size: 22px !important; }
}
#content form#quote-form .form-group > :is(input, select, textarea) {
    margin-bottom: 0 !important;
    height: 46px;
}
#content form#quote-form .form-group > textarea { height: auto; }
#content form#quote-form .form-group > label { padding-bottom: 0 !important; }

/* quote pages without a banner: the heading is centred above the centred form card */
#content .about-us:not(:has(> img[src*="request-a-quote-banner"])):has(form#quote-form) > .title {
    text-align: center !important;
    margin-bottom: 8px !important;
}

/* ======================= CONTACT US (hero, info cards, form + map) ======================= */
.ct { padding-bottom: 20px; }
.ct-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: stretch;
    overflow: hidden;
    margin: 6px 0 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0b3a66 0%, #0d4f8b 55%, #3dade2 130%);
    color: #fff;
    box-shadow: 0 24px 50px -28px rgba(13, 79, 139, .7);
}
.ct-hero::after {
    content: "";
    position: absolute;
    inset-inline-end: -80px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}
.ct-hero-text { position: relative; z-index: 1; padding: 44px 44px 40px; display: flex; flex-direction: column; justify-content: center; }
#content .ct-title,
.ct .ct-title {
    margin: 0 0 12px !important;
    color: #fff !important;
    font-size: 38px !important;
    line-height: 1.15 !important;
    text-transform: none !important;
}
.ct-lead { max-width: 520px; margin: 0 0 24px; color: rgba(255, 255, 255, .88) !important; font-size: 17px !important; line-height: 1.65 !important; text-align: start !important; }
.ct-quick { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform .25s, background .25s, box-shadow .25s;
}
.ct-btn:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.ct-btn--main { background: #fff; border-color: #fff; color: #0d4f8b !important; }
.ct-btn--main:hover { background: #fff; box-shadow: 0 10px 22px rgba(0, 0, 0, .25); }
.ct-hero-img { position: relative; min-height: 280px; }
.ct-hero-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%);
    mask-image: linear-gradient(to right, transparent 0, #000 38%);
}
html[dir="rtl"] .ct-hero-img img {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 38%);
    mask-image: linear-gradient(to left, transparent 0, #000 38%);
}

.ct-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.ct-card {
    padding: 26px 24px;
    border: 1px solid #e3e9f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 6px 22px -16px rgba(16, 24, 40, .35);
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.ct-card:hover { transform: translateY(-4px); border-color: #b9d6ee; box-shadow: 0 18px 32px -18px rgba(13, 79, 139, .5); }
.ct-ic {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0d4f8b, #3dade2);
    color: #fff;
    font-size: 24px;
}
.ct-card h2 { margin: 0 0 8px; font-size: 19px !important; font-weight: 700; color: #252525; text-transform: none; }
.ct-card address { margin: 0 0 12px; color: #566074; font-size: 15px; line-height: 1.7; }
.ct-link { color: #0d4f8b !important; font-weight: 700; font-size: 14px; text-decoration: none !important; }
.ct-link:hover { color: #3dade2 !important; }
.ct-link i { margin-inline-start: 4px; font-size: 12px; }
html[dir="rtl"] .ct-link i { transform: scaleX(-1); }
.ct-list { display: flex; flex-direction: column; gap: 6px; }
.ct-list a { color: #252525 !important; font-size: 16px; font-weight: 600; text-decoration: none !important; }
.ct-list a:hover { color: #0d4f8b !important; }
.ct-mails { gap: 12px; }
.ct-mails img { height: 22px; width: auto; max-width: 100%; display: block; }

.ct-main { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
.ct-form-card,
.ct-map-card {
    padding: 28px;
    border: 1px solid #e3e9f0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px -20px rgba(16, 24, 40, .35);
}
.ct-form-card h2,
.ct-map-card h2 { margin: 0 0 6px; font-size: 22px !important; font-weight: 700; color: #252525; text-transform: none; }
.ct-sub { margin: 0 0 18px; color: #566074 !important; font-size: 14.5px !important; text-align: start !important; }
.ct-form-card form { margin: 0; padding: 0; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-form-card .form-control { margin-bottom: 12px; }
.ct-form-card textarea.form-control { min-height: 140px; }
.ct-form-card input[type="submit"] { width: 100%; margin-top: 6px !important; }
.ct-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; padding: 0; list-style: none; }
.ct-tabs li a {
    display: block;
    padding: 7px 16px;
    border: 1px solid #cfd8e3;
    border-radius: 999px;
    background: #fff !important;
    color: #0d4f8b !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .2s, color .2s;
}
.ct-tabs li.active a { background: linear-gradient(135deg, #0d4f8b, #3dade2) !important; border-color: transparent; color: #fff !important; }
.ct-map { overflow: hidden; height: 420px; border-radius: 16px; background: #eef2f6; }
.ct-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.ct-maps { margin: 0 !important; padding: 0 !important; }

@media (max-width: 991px) {
    .ct-hero { grid-template-columns: 1fr; }
    .ct-hero-img { min-height: 200px; order: -1; }
    .ct-hero-img img,
    html[dir="rtl"] .ct-hero-img img { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 45%); mask-image: linear-gradient(to top, transparent 0, #000 45%); }
    .ct-hero-text { padding: 26px 24px 30px; }
    #content .ct-title, .ct .ct-title { font-size: 28px !important; }
    .ct-cards { grid-template-columns: 1fr; }
    .ct-main { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .ct-row { grid-template-columns: 1fr; gap: 0; }
    .ct-form-card, .ct-map-card { padding: 20px 16px; }
    .ct-map { height: 320px; }
}

html[dir="rtl"] .ct-list a { text-align: right; }

/* contact: form card and map card are the same height, the map takes the free space */
.ct-main { align-items: stretch; }
.ct-map-card { display: flex; flex-direction: column; }
.ct-map-card .ct-maps { flex: 1 1 auto; display: flex; flex-direction: column; }
.ct-map-card .ct-maps > .tab-pane { flex: 1 1 auto; }
.ct-map-card .ct-maps > .tab-pane.active { display: flex; }
.ct-map-card .ct-map { flex: 1 1 auto; height: auto; min-height: 420px; }

/* ---- home picture tiles: the caption lies on the picture (it no longer pulls itself up with a negative margin), so a blank caption can never make a tile collapse ---- */
/* the wide banner's caption sits over the lower edge of the banner without taking space */
.row > h3.mtitle2 {
    position: relative;
    top: -56px;
    height: 0;
    margin: 0 !important;
    overflow: visible;
}

html[dir="rtl"] body h3.panel-title.home-section-title,
html[dir="rtl"] #wrapper h3.home-section-title { text-align: center !important; }

/* home headings: centred even when the page promotes one of them to the H1; never wider than the screen */
.row > .home-section-title {
    padding: 10px 16px 14px !important;
    box-sizing: border-box;
    max-width: 100%;
}
/* picture-tile rows: flex, so tiles of different heights can never snag on each other */
.row:has(> [class*="mobileviewcard"]) {
    display: flex;
    flex-wrap: wrap;
}
.row:has(> [class*="mobileviewcard"])::before,
.row:has(> [class*="mobileviewcard"])::after {
    display: none;
}
.row:has(> [class*="mobileviewcard"]) > [class*="mobileviewcard"] {
    float: none;
}
.row:has(> [class*="mobileviewcard"]) > .home-section-title {
    flex: 0 0 100%;
    width: 100%;
}
@media (min-width: 1200px) {
    .row:has(> [class*="mobileviewcard"]) > .col-lg-3 { width: 25%; }
}
html body h1.pr-h1.home-section-title,
html body h3.home-section-title { text-align: center !important; }

/* ======================= QUOTE BASKET + MOBILE ACTION BAR ======================= */
/* "Add to quote basket" button (cards and product page) */
.pr-add-wrap { margin-top: 8px; text-align: center; padding-bottom: 12px; }
.pr-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 16px;
    border: 1.5px dashed #9cc3e3;
    border-radius: 999px;
    background: #f4f9fe;
    color: #0d4f8b;
    font: 700 13px/1 'Open Sans', 'Open Sans Fallback', sans-serif;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.pr-add:hover { background: #e6f2fc; border-color: #3dade2; transform: translateY(-1px); }
.pr-add--big { display: flex; width: 100%; margin-top: 10px; min-height: 46px; font-size: 15px; }

/* side tab with the number of products (desktop) */
.pr-btab {
    position: fixed;
    top: 50%;
    inset-inline-end: 0;
    z-index: 900;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 12px 14px;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(135deg, #0d4f8b, #3dade2);
    color: #fff !important;
    font: 700 13px/1 'Open Sans', 'Open Sans Fallback', sans-serif;
    text-decoration: none !important;
    box-shadow: 0 10px 26px -10px rgba(13, 79, 139, .7);
    transform: translateY(-50%);
    transition: padding .2s;
}
html[dir="rtl"] .pr-btab { border-radius: 0 14px 14px 0; padding: 12px 14px 12px 16px; }
.pr-btab:hover { padding-inline-start: 22px; }
.pr-btab-n { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: #fff; color: #0d4f8b; font-size: 12px; }
@media (max-width: 767px) { .pr-btab { display: none !important; } }

/* "added" message */

/* bottom action bar (phones) */
.pr-mbar { display: none; }
@media (max-width: 767px) {
    .pr-mbar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1000;
        display: grid;
        grid-template-columns: 1fr 1fr 1.3fr;
        gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid #e3e9f0;
        box-shadow: 0 -8px 24px -14px rgba(16, 24, 40, .35);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    .pr-mb {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 46px;
        border-radius: 12px;
        background: #eef4fb;
        color: #0d4f8b !important;
        font: 700 13.5px/1 'Open Sans', 'Open Sans Fallback', sans-serif;
        text-decoration: none !important;
    }
    .pr-mb--wa { background: #e7f8ef; color: #067647 !important; }
    .pr-mb--quote { background: linear-gradient(135deg, #e0313f, #a81220); color: #fff !important; }
    .pr-mb-n { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #fff; color: #a81220; font-size: 11px; }
    .pr-mb-n[hidden] { display: none; }
    body.has-mbar { padding-bottom: 72px; }
    /* the floating widgets give way to the bar: its WhatsApp button replaces the round one, the arrow and the chat move up */
    body.has-mbar .back-to-top { bottom: 84px !important; }
}

/* the basket page */
.pr-btab, .pr-btab span, .pr-btab:hover, .pr-btab:focus { color: #fff !important; }
.pr-btab .pr-btab-n { color: #0d4f8b !important; }
.pr-mb, .pr-mb span { text-transform: none; }

.pr-mb span { color: inherit !important; }
.pr-mb--quote, .pr-mb--quote span { color: #fff !important; }
.pr-mb--wa span { color: #067647 !important; }

/* ======================= PRODUCT PAGE: finishing touches ======================= */
@media (min-width: 992px) {
    .product-info > [class*="col-md-5"] {
        position: sticky;
        top: 14px;
        align-self: flex-start;
    }
}
.product-info .description li:last-child span {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 999px;
    background: #e7f8ef;
    color: #067647 !important;
    font-size: 13.5px;
    font-weight: 700;
}
.product-info .qty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.product-info .qty .qtyBtn { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }
.product-info .image { overflow: hidden; border-radius: 18px; box-shadow: 0 14px 34px -22px rgba(16, 24, 40, .5); }
.product-info .image img { transition: transform .6s ease; }
.product-info .image:hover img { transform: scale(1.03); }
.product-info [class*="col-md-3"] > a { display: block; overflow: hidden; border-radius: 12px; transition: transform .25s, box-shadow .25s; }
.product-info [class*="col-md-3"] > a:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(13, 79, 139, .5); }
@media (max-width: 767px) {
    .product-info .qty .qtyBtn { min-width: 44px; min-height: 44px; }
}

/* WhatsApp click-to-chat buttons (product page, basket page) */
.pr-wa-ask {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
    border: 1.5px solid #25d366;
    border-radius: 999px;
    background: #fff;
    color: #067647 !important;
    font: 700 14.5px/1 'Open Sans', 'Open Sans Fallback', sans-serif;
    text-decoration: none !important;
    transition: background .2s, transform .2s;
}
.pr-wa-ask svg { color: #25d366; }
.pr-wa-ask:hover { background: #e7f8ef; transform: translateY(-1px); }

/* gentle reminder for a basket left behind */
/* product page: "Add to quote basket" and "Ask on WhatsApp" on one line */
.pr-pair { display: flex; gap: 10px; margin-top: 10px; }
.pr-pair > .pr-add, .pr-pair > .pr-wa-ask { flex: 1 1 0; width: auto; min-width: 0; margin-top: 0; padding-inline: 10px; text-align: center; }
.pr-pair > .pr-add--big { display: flex; }
@media (max-width: 400px) { .pr-pair > .pr-add, .pr-pair > .pr-wa-ask { font-size: 13px; gap: 5px; padding-inline: 6px; } }

/* "Add to quote basket": a solid navy button on the product page, a soft filled one on the cards; green once the product is in the basket */
.pr-add {
    border: 0;
    border-radius: 999px;
    background: #e3f0fb;
    color: #0d4f8b;
    box-shadow: inset 0 0 0 1.5px #bcd9f0;
}
.pr-add:hover { background: #d3e8f8; box-shadow: inset 0 0 0 1.5px #3dade2; transform: translateY(-1px); }
.pr-add--big {
    background: linear-gradient(135deg, #0b3a66 0%, #0d4f8b 55%, #1d7fbf 100%);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(13, 79, 139, .75);
    font-size: 15px;
}
.pr-add--big:hover { background: linear-gradient(135deg, #0b3a66 0%, #0d4f8b 40%, #3dade2 120%); box-shadow: 0 12px 22px -8px rgba(13, 79, 139, .85); transform: translateY(-2px); }
.pr-add--big svg { flex: none; }
.pr-add--big, .pr-add--big span, .pr-add--big:hover { color: #fff !important; }
.pr-add--big svg { width: 20px; height: 20px; }

/* "Add to quote basket": neutral charcoal on the product page, soft grey on the cards (no blue), green when the product is in the basket */
.pr-add {
    background: #f2f4f7;
    color: #252525;
    box-shadow: inset 0 0 0 1.5px #d0d5dd;
}
.pr-add:hover { background: #e7eaf0; box-shadow: inset 0 0 0 1.5px #98a2b3; }
.pr-add--big {
    background: linear-gradient(135deg, #1d2939 0%, #344054 100%);
    box-shadow: 0 8px 18px -10px rgba(16, 24, 40, .8);
}
.pr-add--big:hover { background: linear-gradient(135deg, #101828 0%, #1d2939 100%); box-shadow: 0 12px 22px -10px rgba(16, 24, 40, .9); }
.pr-add--big, .pr-add--big span, .pr-add--big:hover, .pr-add--big.is-on { color: #fff !important; }

/* "Add to quote basket", light version: white with a grey outline and a dark icon; fills softly on hover; green when in the basket */
.pr-add--big {
    background: #fff;
    box-shadow: inset 0 0 0 1.5px #c5ccd6;
    color: #344054 !important;
}
.pr-add--big, .pr-add--big span, .pr-add--big:hover { color: #344054 !important; }
.pr-add--big:hover { background: #f4f6f9; box-shadow: inset 0 0 0 1.5px #667085; }
.pr-add--big svg { color: #0d4f8b; }

.pr-pair { margin-bottom: 18px; }

/* more room between the buttons and "Product Detail" */
.product-info form#order-form { margin-bottom: 34px; }
.product-info form#order-form + * { margin-top: 0; }
.product-info .pr-pair { margin-bottom: 36px !important; }

/* ======================= TYPE SYSTEM (2026-10-18): one typeface, one scale, on every page ======================= */
/* Family: Open Sans for Latin text, Noto Sans Arabic for Arabic text (both declared in this file, so every page has them).
   Old rules that name Roboto, Lato, Calibri, Helvetica or Arial are re-pointed here. Sizes: top bar 13-14px, main nav and menu rail 15px/500,
   body text 15px/1.75, H1 30px/700, H2 24px, H3 20px, card titles 16px/700, buttons 13-14px/700. */
html, body { font-family: 'Open Sans', 'Noto Sans Arabic', 'Open Sans Fallback', sans-serif; }
input, button, select, textarea, optgroup,
.btn, .form-control, .control-label, .panel-title, .panel-heading, .panel-body, .modal-title, .modal-body,
.nav > li > a, .dropdown-menu > li > a, .breadcrumb, .pagination > li > a, .label, .badge, .alert, .table,
.help-block, .tooltip, .popover, .footer-quote-label, .block-title, .top-link, .top-link li, .top-link a {
    font-family: 'Open Sans', 'Noto Sans Arabic', 'Open Sans Fallback', sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', 'Noto Sans Arabic', 'Open Sans Fallback', sans-serif; }
@media (min-width: 992px) {
    .top-link li, .top-link li a { font-size: 13.5px !important; font-weight: 500; }
    html body .megamenu-wrapper .megamenu > li > a,
    html body .megamenu-wrapper .megamenu > li > a span { font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0; }
    html body .vertical-wrapper .megamenu.oe_menu > li.item-vertical > a > span,
    html body .vertical-wrapper .megamenu.oe_menu > li.item-vertical > a > span > strong { font-size: 15px !important; font-weight: 500 !important; }
    html body .vertical-wrapper .megamenu.oe_menu > li.item-vertical:hover > a > span,
    html body .vertical-wrapper .megamenu.oe_menu > li.item-vertical.active > a > span,
    html body .vertical-wrapper .megamenu.oe_menu > li.item-vertical.active > a > span > strong { font-weight: 600 !important; }
    ul.breadcrumb li a, ul.breadcrumb li { font-size: 12px; }
}

/* ===== LAZY PICTURES (2026-10-18) =====
   The renderer gives pictures below the first screen loading="lazy" plus their real width/height (marked data-lz), so the browser keeps
   their place free while scrolling. Zero specificity: any rule of the page that sizes the picture still wins; this only stops the
   height attribute from stretching a picture whose width is set by the page. */
:where(img[data-lz]) { height: auto; }

/* ===== FIRST PAINT (2026-10-19) =====
   Everything after this marker always goes into the first-paint part of the split stylesheet (includes/css-split.php), even if the
   crawl did not see it used. Keep it for rules that must be right before any script has run.
   Home page slider before its script has started: only the first slide shows, in the place where the slider will show it. */
.so-homeslider:not(.owl2-loaded) { display: block; }
.so-homeslider:not(.owl2-loaded) > .item ~ .item { display: none; }
/* Text drawn before Open Sans has arrived uses Arial resized to Open Sans's measurements (size-adjust and the ascent/descent overrides were measured on the site's own English text,
   computed from the two font files), so the text does not move when Open Sans takes over. Latin only: Arabic keeps its own fallback. */
@font-face { font-family: 'Open Sans Fallback'; font-weight: 100 549; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'); size-adjust: 104.96%; ascent-override: 101.83%; descent-override: 27.91%; line-gap-override: 0%; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: 'Open Sans Fallback'; font-weight: 550 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); size-adjust: 104.18%; ascent-override: 102.60%; descent-override: 28.12%; line-gap-override: 0%; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
/* Parts that start below the first screen are laid out only when the visitor scrolls near them (content-visibility: auto; on the CARD
   inside a product tile, not the tile: it clips what lies outside its box, and the card lifts and casts a shadow on hover). The page is
   the same; the browser just skips the work for what is not on screen yet. contain-intrinsic-block-size keeps their place (the measured
   heights per screen size; "auto" = the size they had the last time they were drawn), so the scroll bar and the content below do not jump. */
#products > .item:nth-child(n+9) > * { content-visibility: auto; contain-intrinsic-block-size: auto 400px; }
footer.footer-container { content-visibility: auto; contain-intrinsic-block-size: auto 2275px; }
@media (min-width: 768px) { #products > .item:nth-child(n+9) > * { contain-intrinsic-block-size: auto 570px; } footer.footer-container { contain-intrinsic-block-size: auto 1412px; } }
@media (min-width: 992px) { #products > .item:nth-child(n+9) > * { contain-intrinsic-block-size: auto 470px; } footer.footer-container { contain-intrinsic-block-size: auto 770px; } }

/* ===== HOME PAGE, CONTRAST AND PHONES (2026-10-19, round 3) ===== */
/* Phones: the home page has two "Track your order" bars, the desktop bar (.hidden-xs) and the phone card (.visible-xs). The bar rule
   above (display: flex !important) must not bring the desktop bar back on phones, and the phone card keeps its normal block layout. */
@media (max-width: 767px) {
    div.hidden-xs[style*="track-your-order"] { display: none !important; }
}
.visible-xs > div[style*="track-your-order"] { display: block !important; min-height: 0; }
.visible-xs > div[style*="track-your-order"] h3 { padding: 14px 12px 10px !important; }
.visible-xs > div[style*="track-your-order"] form[action="tracking-results"] { display: block !important; width: 90% !important; margin: 0 auto !important; padding: 0 0 16px !important; }
/* Pinch-zoom is allowed now (viewport without maximum-scale); iPhones zoom into a form field whose text is smaller than 16px, so fields use 16px there */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]), select, textarea { font-size: max(16px, 1em) !important; }
}
/* Text contrast (WCAG AA, 4.5:1): white text on light-blue and teal boxes was too faint; darker shades of the same colours */
div.info[style*="#3eade2"] { background-color: #1a6fa3 !important; }
h3.locations[style*="#3dade2"] { background: #1a6fa3 !important; }
.infographic-box:not(.dark-blue):not(.red):not(.orange) .infographic-box-inner:not([style*="background-color"]) { background: #00807d; }
.infographic-box:not(.dark-blue):not(.red):not(.orange)::after { background: #00807d; }
.infographic-box:not(.dark-blue):not(.red):not(.orange)::before { border-color: #00807d; }
/* The home slider and the wide banners keep their own shape (on phones they were squeezed up to 35%): the height follows the width.
   The slides carry width/height attributes, so their place is kept while they load. */
html body .so-homeslider img.myimage,
html body img.homeimg2 { height: auto !important; min-height: 0 !important; max-height: none !important; }

/* ---- Home buttons: the light outlined pill of the product lists (navy outline, navy arrow), filled with colour on hover ---- */
.gp_products_item_caption .pr-btn--more,
.home-section-head .home-view-all {
    padding: 4px 4px 4px 18px;
    background: #fff;
    border: 1.5px solid #0d4f8b;
    box-shadow: none;
}
html[dir="rtl"] .gp_products_item_caption .pr-btn--more,
html[dir="rtl"] .home-section-head .home-view-all {
    padding: 4px 18px 4px 4px;
}
.gp_products_item_caption .pr-btn--more .pr-btn-label,
.home-section-head .home-view-all .pr-btn-label {
    color: #0d4f8b !important;
    transition: color .25s;
}
.gp_products_item_caption .pr-btn--more .pr-btn-icon,
.home-section-head .home-view-all .pr-btn-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    background: #0d4f8b;
    color: #fff;
    line-height: 26px;
}
.gp_products_item_caption .pr-btn--more:hover,
.gp_products_item_caption .pr-btn--more:focus-visible,
.gp_products_inner:hover .gp_products_item_caption .pr-btn--more,
.home-section-head .home-view-all:hover,
.home-section-head .home-view-all:focus-visible {
    background: linear-gradient(135deg, #0d4f8b 0%, #3dade2 100%);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(13, 79, 139, .35);
}
.gp_products_item_caption .pr-btn--more:hover .pr-btn-label,
.gp_products_item_caption .pr-btn--more:focus-visible .pr-btn-label,
.gp_products_inner:hover .gp_products_item_caption .pr-btn-label,
.home-section-head .home-view-all:hover .pr-btn-label,
.home-section-head .home-view-all:focus-visible .pr-btn-label {
    color: #fff !important;
}
.gp_products_item_caption .pr-btn--more:hover .pr-btn-icon,
.gp_products_item_caption .pr-btn--more:focus-visible .pr-btn-icon,
.gp_products_inner:hover .gp_products_item_caption .pr-btn-icon,
.home-section-head .home-view-all:hover .pr-btn-icon,
.home-section-head .home-view-all:focus-visible .pr-btn-icon {
    background: #fff;
    color: #0d4f8b;
}
.gp_products_inner:hover .gp_products_item_caption .pr-btn-icon { transform: translateX(4px); }
html[dir="rtl"] .gp_products_inner:hover .gp_products_item_caption .pr-btn-icon { transform: translateX(-4px); }

/* ---- Home "Top selling" tiles: rounded cards that lift on hover; the picture zooms inside its frame, the title turns blue, the button fills ---- */
.gp_products_item { padding-bottom: 14px; }            /* room for the lifted card's shadow inside the carousel's clipped box */
.gp_products_inner {
    position: relative;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
    transition: transform .3s ease, box-shadow .3s ease;
}
.gp_products_item_image { border-radius: 12px 12px 0 0; }
.gp_products_item_image img { transition: transform .5s ease; }
.gp_products_inner:hover,
.gp_products_inner:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -12px rgba(16, 24, 40, .4), 0 0 0 1px rgba(13, 79, 139, .08);
}
.gp_products_inner:hover .gp_products_item_image { background: transparent; }
.gp_products_inner:hover .gp_products_item_image img,
.gp_products_inner:focus-within .gp_products_item_image img { transform: scale(1.06); }
.gp_products_item_caption h3.hometitle { transition: color .25s; }
.gp_products_inner:hover .gp_products_item_caption h3.hometitle { color: #0d4f8b !important; }

/* ---- Home "Latest Blogs": white heading on a darkened photo, four equal cards (picture, date, title, start of the post, "Read More"
   at the bottom of every card), the same space above and below; 2 cards per row on tablets, 1 on phones ---- */
section.home-blog.hb {
    position: relative;
    min-height: 0;
    margin: 16px 0 0;
    padding: 44px 0 52px;
}
section.home-blog.hb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 26, 46, .84) 0%, rgba(6, 26, 46, .66) 100%);
    pointer-events: none;
}
section.home-blog.hb > .hb-wrap {
    position: relative;
    z-index: 1;
    margin: 0 0.75%;
    padding: 0 0.75%;
}
section.hb .hb-head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0 0 30px;
}
section.hb .hb-head h2.block-title.hb-title,
#content section.hb .hb-head h2.block-title.hb-title {
    padding: 0 !important;
    color: #fff !important;
    font-size: 26px !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
section.hb .hb-head h2.hb-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #3dade2, #9bdcf6);
}
/* "View all articles": a white outlined pill on the dark band, on the end side of the heading (under it on small screens) */
section.hb .hb-all {
    min-width: 0;
    padding: 4px 4px 4px 18px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .85);
    box-shadow: none;
}
html[dir="rtl"] section.hb .hb-all { padding: 4px 18px 4px 4px; }
section.hb .hb-all .pr-btn-label { color: #fff !important; }
section.hb .hb-all .pr-btn-icon { flex: 0 0 26px; width: 26px; height: 26px; line-height: 26px; background: #fff; color: #0d4f8b; }
section.hb .hb-all:hover,
section.hb .hb-all:focus-visible { background: #fff; border-color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
section.hb .hb-all:hover .pr-btn-label,
section.hb .hb-all:focus-visible .pr-btn-label { color: #0d4f8b !important; }
section.hb .hb-all:hover .pr-btn-icon,
section.hb .hb-all:focus-visible .pr-btn-icon { background: #0d4f8b; color: #fff; }
@media (min-width: 992px) {
    section.hb .hb-head { min-height: 52px; justify-content: center; }
    section.hb .hb-all { position: absolute; top: 50%; inset-inline-end: 0; transform: translateY(-50%); }
    section.hb .hb-all:hover, section.hb .hb-all:focus-visible { transform: translateY(calc(-50% - 2px)); }
}
section.hb .hb-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 1199px) { section.hb .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
    section.home-blog.hb { padding: 32px 0 36px; }
    section.hb .hb-head { margin-bottom: 22px; }
    section.hb .hb-head h2.block-title.hb-title, #content section.hb .hb-head h2.block-title.hb-title { font-size: 22px !important; }
    section.hb .hb-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    section.home-blog.hb > .hb-wrap { margin: 0 12px; padding: 0; }
}
section.hb .hb-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .7);
    transition: transform .3s ease, box-shadow .3s ease;
}
section.hb .hb-card:hover,
section.hb .hb-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .8);
}
section.hb .hb-img {
    display: block;
    overflow: hidden;
    aspect-ratio: 768 / 316;
    background: #e9edf2;
}
section.hb .hb-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
section.hb .hb-card:hover .hb-img img { transform: scale(1.05); }
/* calm editorial card (2026-10-19, owner: "less rushed"): a two-line semi-bold title, a three-line excerpt in a lighter grey, and a footer
   row under a hairline with the date and a quiet "Read more" link */
section.hb .hb-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px 20px 16px;
    text-align: start;
}
section.hb .hb-card h3.hb-card-title {
    margin: 0 0 8px !important;
    font-size: 16.5px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: start !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
section.hb .hb-card h3.hb-card-title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: 600 !important;
    color: #1d2939 !important;
    text-decoration: none !important;
    transition: color .25s;
}
section.hb .hb-card:hover h3.hb-card-title a,
section.hb .hb-card h3.hb-card-title a:focus-visible { color: #0d4f8b !important; }
section.hb .hb-card p.hb-text,
#content section.hb .hb-card p.hb-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 0 0 18px;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #667085 !important;
    text-align: start !important;
    -webkit-hyphens: manual;
    hyphens: manual;
}
html[dir="rtl"] section.hb .hb-card p.hb-text { font-size: 14.5px !important; line-height: 1.85 !important; }
section.hb .hb-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #eef0f4;
}
section.hb .hb-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #667085;
}
section.hb .hb-date .fa { color: #98a2b3; font-size: 13px; }
section.hb a.hb-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #1a6fa3 !important;
    text-decoration: none !important;
    white-space: nowrap;
}
section.hb a.hb-more .fa { font-size: 12px; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
section.hb .hb-card:hover a.hb-more,
section.hb a.hb-more:focus-visible { color: #0d4f8b !important; }
section.hb .hb-card:hover a.hb-more .fa { transform: translateX(4px); }
html[dir="rtl"] section.hb .hb-card:hover a.hb-more .fa { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) {
    .gp_products_inner, .gp_products_item_image img, section.hb .hb-card, section.hb .hb-img img { transition: none; }
}

/* ---- Header search suggestions (assets/js/site/search-suggest.js): a white card under the search box (the input group is already position: relative) ---- */
.pr-sugg {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    z-index: 1060;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px -12px rgba(16, 24, 40, .35), 0 0 0 1px rgba(16, 24, 40, .06);
    text-align: start;
    font-family: 'Open Sans', 'Noto Sans Arabic', 'Open Sans Fallback', sans-serif;
}
.pr-sugg[hidden] { display: none; }
.pr-sugg-head { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: #667085; }
html[dir="rtl"] .pr-sugg-head { letter-spacing: 0; font-size: 12.5px; }
.pr-sugg a.pr-sugg-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: 10px;
    color: #1d2939 !important;
    text-decoration: none !important;
}
.pr-sugg a.pr-sugg-item.is-active,
.pr-sugg a.pr-sugg-item:hover { background: #eef5fb; }
.pr-sugg-pic { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 8px; background: #f2f4f7; color: #98a2b3; }
.pr-sugg-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pr-sugg-txt { display: flex; flex-direction: column; min-width: 0; }
.pr-sugg-name { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.pr-sugg-name mark { padding: 0; background: none; color: #0d4f8b; font-weight: 800; }
.pr-sugg-sub { font-size: 12px; line-height: 1.35; color: #667085; }
.pr-sugg-none { padding: 12px; font-size: 13.5px; line-height: 1.5; color: #475467; }
.pr-sugg a.pr-sugg-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    padding: 10px 12px;
    border-top: 1px solid #eaecf0;
    border-radius: 0 0 10px 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #0d4f8b !important;
    text-decoration: none !important;
}
.pr-sugg a.pr-sugg-all.is-active,
.pr-sugg a.pr-sugg-all:hover { background: #eef5fb; }
.pr-sugg-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- "Recently viewed" row above the footer (basket.js): the products this visitor opened last, as small cards ---- */
.pr-recent {
    margin: 24px 0.75% 0;
    padding: 18px 0.75% 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
}
.pr-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 6px 10px; }
.pr-recent h2.pr-recent-title { margin: 0 !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #1d2939 !important; text-transform: none !important; }
.pr-recent-clear { padding: 4px 10px; border: 0; border-radius: 8px; background: none; font-size: 13px; font-weight: 600; color: #0d4f8b; cursor: pointer; }
.pr-recent-clear:hover,
.pr-recent-clear:focus-visible { background: #eef5fb; }
.pr-recent-row { display: flex; gap: 12px; margin: 0; padding: 4px 4px 10px; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; scrollbar-width: thin; }
.pr-recent-row > li { flex: 0 0 158px; margin: 0; padding: 0; scroll-snap-align: start; }
.pr-recent-row > li::before,
.pr-recent-row > li::after { content: none !important; }
.pr-recent a.pr-recent-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 8px;
    border-radius: 12px;
    color: #1d2939 !important;
    text-decoration: none !important;
    transition: background .2s, box-shadow .2s, transform .2s;
}
.pr-recent a.pr-recent-card:hover,
.pr-recent a.pr-recent-card:focus-visible { background: #f5f8fb; box-shadow: 0 8px 18px -12px rgba(16, 24, 40, .45); transform: translateY(-2px); }
.pr-recent-pic { display: block; overflow: hidden; aspect-ratio: 1; border-radius: 10px; background: #f2f4f7; }
.pr-recent-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pr-recent-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
@media (max-width: 575px) {
    .pr-recent { margin: 16px 12px 0; padding: 14px 8px 12px; }
    .pr-recent-row > li { flex-basis: 130px; }
}

/* ---- Quote basket: artwork / reference files (optional) ---- */
/* Home page on phones: the "Top selling" carousel (its cloned cards are ~400 elements) and the blog section are laid out only when the
   visitor scrolls near them (content-visibility; both already clip their own contents, so nothing is cut off; the sizes are the measured
   phone heights). Without this a slow phone laid out the whole long page in one ~0.4 s task right after the first paint. */
@media (max-width: 767px) {
    #adv_gp_products_6_columns_carousel { content-visibility: auto; contain-intrinsic-block-size: auto 510px; }
    section.home-blog.hb { content-visibility: auto; contain-intrinsic-block-size: auto 2040px; }
}

/* Links inside page text: the brand's light blue was too faint on the page background (2.4:1, WCAG asks 4.5:1); a darker blue of the
   same family, with a soft underline so a link is not told apart from the text by colour alone */
#content .about-text p a:not(.btn):not(.pr-btn),
#content .about-text li a:not(.btn):not(.pr-btn) {
    color: #1a6fa3;
    text-decoration: underline;
    text-decoration-color: rgba(26, 111, 163, .4);
    text-underline-offset: 2px;
}
#content .about-text p a:not(.btn):not(.pr-btn):hover,
#content .about-text li a:not(.btn):not(.pr-btn):hover { color: #0d4f8b; text-decoration-color: currentColor; }

/* Header language link, the original site's look (owner request 2026-10-19): "العربية" in a classic Naskh face (Times New Roman's
   Arabic letters), "ENGLISH" in heavy condensed capitals (Impact: what the original font-family "fantasy" showed on Windows); white,
   centred on the search bar, a clear gap before the social icons. The only two places that name a family other than Open Sans /
   Noto Sans Arabic, on purpose. */
/* the word and the social icons sit on the search bar's centre line (a flex row as tall as the bar; the strip is hidden on phones) */
@media (min-width: 768px) {
    .shopping_cart:has(> a.pr-lang-link) {
        display: flex !important;
        align-items: center;
        height: 44px;
        padding-top: 5px !important;
        padding-bottom: 5px;
    }
}
.shopping_cart a.pr-lang-link {
    display: inline-block;
    margin-inline: 0 34px;
    color: #fff !important;
    font-weight: 400;
    line-height: 1;
    text-decoration: none !important;
    transition: opacity .2s ease;
}
.shopping_cart a.pr-lang-link:hover,
.shopping_cart a.pr-lang-link:focus-visible { opacity: .82; }
.shopping_cart a.pr-lang-link:lang(ar) { font-family: 'Times New Roman', Times, 'Traditional Arabic', serif !important; font-size: 30px; }
.shopping_cart a.pr-lang-link:lang(en) {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Oswald', sans-serif !important;
    font-size: 27px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ======================= HOME TILES (2026-10-19 redesign; markup: includes/home-tiles.php, English and Arabic) =======================
   .ht-show   the six service banners under the slider: the picture fills a rounded card, the title lies on a frosted-glass bar with
              a round arrow that turns on hover;
   .ht-svc    Featured Services: white cards, the picture inset with a number badge (01-08), an "Explore" line, a brand-gradient
              outline and a soft light that follows the pointer on hover;
   .ht-poster the four promotion posters: the picture fills the card, title + accent line over a dark fade, "View service" slides in.
   With a mouse the picture cards lean slightly towards the pointer with a moving light (home-polish.js sets --rx / --ry / --gx / --gy;
   --mx / --my for the service cards). Touch screens show everything without motion; reduced motion turns the movement off. */
.row > .ht-col { padding: 6px !important; }
.ht-show,
.ht-poster,
.ht-svc {
    position: relative;
    display: block;
    isolation: isolate;
    color: inherit;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}
.ht-show:focus-visible,
.ht-poster:focus-visible,
.ht-svc:focus-visible { outline: 3px solid #3dade2; outline-offset: 3px; }
.ht-show,
.ht-poster {
    overflow: hidden;
    border-radius: 18px;
    background: #0f2b46;
    box-shadow: 0 10px 28px -18px rgba(16, 24, 40, .6);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
}
/* the 3D lean is applied only while the pointer is on the card (at rest the cards stay flat, crisp and on the page's own layer) */
.ht-show:hover,
.ht-poster:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px);
    box-shadow: 0 28px 48px -26px rgba(13, 79, 139, .65);
}
.ht-show .ht-img,
.ht-poster .ht-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}
.ht-show .ht-img { aspect-ratio: 470 / 252; }
.ht-poster .ht-img { aspect-ratio: 476 / 506; }
.ht-show:hover .ht-img,
.ht-poster:hover .ht-img,
.ht-show:focus-visible .ht-img,
.ht-poster:focus-visible .ht-img { transform: scale(1.08); filter: saturate(1.12); }
.ht-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(6, 26, 46, 0) 38%, rgba(6, 26, 46, .3) 62%, rgba(6, 26, 46, .82) 100%);
    pointer-events: none;
}
.ht-poster .ht-shade { background: linear-gradient(180deg, rgba(6, 26, 46, 0) 45%, rgba(6, 26, 46, .38) 70%, rgba(6, 26, 46, .86) 100%); }
.ht-glare {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 46%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.ht-show:hover .ht-glare,
.ht-poster:hover .ht-glare { opacity: 1; }
/* the frosted title bar of the service banners */
.ht-bar {
    position: absolute;
    z-index: 3;
    inset-inline: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 8px;
    padding-inline: 18px 8px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 24px -14px rgba(0, 0, 0, .55);
    transition: background .4s ease, border-color .4s ease;
}
.ht-show:hover .ht-bar { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .45); }
.ht-show h3.ht-title,
.ht-poster h3.ht-title {
    margin: 0 !important;
    font-family: 'Open Sans', 'Noto Sans Arabic', 'Open Sans Fallback', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: .01em;
    color: #fff !important;
    text-align: start !important;
    text-transform: capitalize;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.ht-show h3.ht-title { font-size: 18px !important; }
.ht-go {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: #0d4f8b;
    font-size: 15px;
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), background .35s ease, color .35s ease;
}
.ht-show:hover .ht-go,
.ht-show:focus-visible .ht-go { background: linear-gradient(135deg, #0d4f8b, #3dade2); color: #fff; transform: rotate(-45deg); }
html[dir="rtl"] .ht-show:hover .ht-go,
html[dir="rtl"] .ht-show:focus-visible .ht-go { transform: rotate(45deg); }
/* the promotion posters: title, accent line, "View service" */
.ht-poster-cap { position: absolute; z-index: 3; inset-inline: 0; bottom: 0; padding: 18px 20px 20px; text-align: start; }
.ht-poster h3.ht-title { margin: 0 0 10px !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.2 !important; }
.ht-line { display: block; width: 38px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #3dade2, #9bdcf6); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.ht-cta {                            /* takes no room until it shows, so the title sits low on the picture */
    display: flex;
    align-items: center;
    gap: 7px;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 20px;
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    transition: max-height .45s ease, margin-top .45s ease, opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.ht-poster:hover .ht-line,
.ht-poster:focus-visible .ht-line { width: 110px; }
.ht-poster:hover .ht-cta,
.ht-poster:focus-visible .ht-cta { max-height: 24px; margin-top: 12px; opacity: 1; transform: none; }
/* a dark caption band printed into the bottom of a poster picture (the old design) is hidden: pr_ht_strip() measures it as a percent of
   the picture width, the negative margin of that size pulls it below the card's clipped edge */
.ht-img.ht-strip-6 { margin-bottom: -6%; }
.ht-img.ht-strip-7 { margin-bottom: -7%; }
.ht-img.ht-strip-8 { margin-bottom: -8%; }
.ht-img.ht-strip-9 { margin-bottom: -9%; }
.ht-img.ht-strip-10 { margin-bottom: -10%; }
.ht-img.ht-strip-11 { margin-bottom: -11%; }
.ht-img.ht-strip-12 { margin-bottom: -12%; }
.ht-img.ht-strip-13 { margin-bottom: -13%; }
.ht-img.ht-strip-14 { margin-bottom: -14%; }
.ht-img.ht-strip-15 { margin-bottom: -15%; }
.ht-img.ht-strip-16 { margin-bottom: -16%; }
.ht-img.ht-strip-17 { margin-bottom: -17%; }
.ht-img.ht-strip-18 { margin-bottom: -18%; }
.ht-img.ht-strip-19 { margin-bottom: -19%; }
.ht-img.ht-strip-20 { margin-bottom: -20%; }
.ht-img.ht-strip-21 { margin-bottom: -21%; }
.ht-img.ht-strip-22 { margin-bottom: -22%; }
.ht-img.ht-strip-23 { margin-bottom: -23%; }
.ht-img.ht-strip-24 { margin-bottom: -24%; }
.ht-img.ht-strip-25 { margin-bottom: -25%; }
.ht-img.ht-strip-26 { margin-bottom: -26%; }
.ht-img.ht-strip-27 { margin-bottom: -27%; }
.ht-img.ht-strip-28 { margin-bottom: -28%; }
.ht-img.ht-strip-29 { margin-bottom: -29%; }
.ht-img.ht-strip-30 { margin-bottom: -30%; }
/* Featured Services: white cards with an inset picture */
.ht-svc-wrap { counter-reset: ht-svc; }
.ht-svc {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 26px -18px rgba(16, 24, 40, .4);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
.ht-svc::before {                    /* brand-gradient outline, shown on hover */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(135deg, #0d4f8b, #3dade2 55%, #9bdcf6);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.ht-svc::after {                     /* soft light that follows the pointer */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(61, 173, 226, .16), rgba(61, 173, 226, 0) 65%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.ht-svc:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -24px rgba(13, 79, 139, .5); }
.ht-svc:hover::before,
.ht-svc:focus-visible::before,
.ht-svc:hover::after { opacity: 1; }
.ht-svc-media { position: relative; z-index: 1; overflow: hidden; border-radius: 14px; background: #eef2f6; aspect-ratio: 930 / 724; }
.ht-svc-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.ht-svc:hover .ht-svc-media img,
.ht-svc:focus-visible .ht-svc-media img { transform: scale(1.08); }
.ht-num {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 14px -8px rgba(16, 24, 40, .5);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .06em;
    color: #0d4f8b;
}
.ht-svc-body { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 8px 6px; text-align: start; }
.ht-svc h4.ht-svc-title {
    margin: 0 !important;
    font-family: 'Open Sans', 'Noto Sans Arabic', 'Open Sans Fallback', sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1d2939 !important;
    text-align: start !important;
    transition: color .3s ease;
}
.ht-svc-more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; font-size: 13px; font-weight: 700; color: #1a6fa3; }
.ht-svc-more .fa { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.ht-svc:hover h4.ht-svc-title { color: #0d4f8b !important; }
.ht-svc:hover .ht-svc-more .fa { transform: translateX(5px); }
html[dir="rtl"] .ht-svc:hover .ht-svc-more .fa { transform: translateX(-5px); }
/* touch screens: the captions are shown in full, nothing waits for a hover */
@media (hover: none) {
    .ht-cta { max-height: 24px; margin-top: 10px; opacity: 1; transform: none; }
    .ht-line { width: 64px; }
}
@media (max-width: 767px) {
    /* the rows' Bootstrap -15px margins pushed the outer cards past the screen edges: a small even gutter instead */
    .row:has(> .ht-col) { margin-inline: 4px !important; }
    .row > .ht-col { padding: 5px !important; }
    .ht-show, .ht-poster { border-radius: 16px; }
    .ht-show h3.ht-title { font-size: 16px !important; }
    .ht-bar { inset-inline: 10px; bottom: 10px; padding-inline: 14px 6px; }
    .ht-go { flex-basis: 34px; width: 34px; height: 34px; font-size: 14px; }
    .ht-poster-cap { padding: 12px 12px 14px; }
    .ht-poster h3.ht-title { margin-bottom: 8px !important; font-size: 16px !important; }
    .ht-cta { font-size: 12px; }
    .ht-svc { padding: 7px; border-radius: 16px; }
    .ht-svc-media { border-radius: 11px; }
    .ht-num { top: 7px; inset-inline-start: 7px; padding: 3px 8px; font-size: 11px; }
    .ht-svc-body { gap: 6px; padding: 10px 4px 4px; }
    .ht-svc h4.ht-svc-title { font-size: 14px !important; }
    .ht-svc-more { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ht-show, .ht-poster, .ht-svc, .ht-img, .ht-svc-media img, .ht-go, .ht-line, .ht-cta, .ht-glare { transition: none !important; }
    .ht-show, .ht-poster { transform: none !important; }
}

/* the field itself is the site's dashed drop zone for file inputs (FORMS block above) */
.bk-form-card .bk-file { display: block; margin: 0 0 12px; }
.bk-form-card .bk-file-title { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #344054; }
.bk-form-card .bk-file input[type="file"] { display: block; width: 100%; max-width: 100%; font-size: 13.5px; }
.bk-form-card .bk-file-help { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: #667085; }
.bk-form-card .bk-file-msg { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #b42318; }
.bk-form-card .bk-file-msg:empty { display: none; }

/* Top menu (About Us ... Al-Rai Showroom; 8 items since the FAQs link, 2026-10-19): always ONE line on desktop screens.
   The items sit in a row that never wraps; the space between them (the theme's 17px) shrinks on narrower screens, and the
   text is 14px below 1200px (the Arabic links keep their own inline 16px; their labels are shorter). */
@media (min-width: 992px) {
    html .typeheader-12 .container-megamenu.horizontal ul.megamenu { display: flex; flex-wrap: nowrap; }
    html .typeheader-12 .container-megamenu.horizontal ul.megamenu > li { float: none; flex: 0 0 auto; }
}
@media (min-width: 992px) and (max-width: 1399px) {
    html .typeheader-12 .container-megamenu.horizontal ul.megamenu > li > a { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    html .typeheader-12 .container-megamenu.horizontal ul.megamenu > li > a { padding-left: 7px; padding-right: 7px; }
    html body .megamenu-wrapper .megamenu > li > a,
    html body .megamenu-wrapper .megamenu > li > a span { font-size: 14px !important; }
}

/* Copy Center / Digital Printing panels: the groups are grid items in rows of three, so the titles and the first names line up across each row */
@media (min-width: 992px) {
    .menu-groups--struct .menu-body { align-items: start; row-gap: 0; padding-top: 18px; }
    .menu-groups--struct .menu-group { margin-bottom: 4px; }
    .menu-groups--struct .menu-group-title { padding-top: 10px; }
    .menu-groups--struct .menu-body > .menu-group:nth-child(-n+3) .menu-group-title { padding-top: 4px; }
    .menu-groups--struct .menu-group li a { padding-top: 4px; padding-bottom: 4px; }
}

/* WhatsApp button in the panel footer: the theme gives every .fa a wider box and left-aligned glyph; here the glyph is centred in its circle */
.menu-foot-ic .fa { width: 1em !important; height: 1em; padding: 0 !important; text-align: center !important; text-indent: 0 !important; }

/* Landing-page tile detail pages (class pi-equal on .product-info): the information card is as tall as the gallery column, so both cards end on the same line;
   the contact block sits at the bottom of the card (the sticky behaviour of the other product pages is not used here). */
@media (min-width: 768px) {
    #content .product-info.pi-equal > [class*="col-md-5"] { position: static; align-self: stretch; display: flex; flex-direction: column; }
    #content .product-info.pi-equal > [class*="col-md-5"] > #product:last-of-type { margin-top: auto; }
}
#content .pr-pair .pr-wa-ask .fa { color: #25d366; font-size: 18px; }
#content .pr-pair .pr-add .fa { margin-inline-end: 6px; }
@media (min-width: 768px) {
    #content .product-info.pi-equal > div:first-child > .image { min-height: 0; }
    #content .product-info.pi-equal > div:first-child > .image img { min-height: 0; max-height: 640px; object-fit: contain; }
}

/* "Request A Quote" in a card (tiles that lead to the quote page): the same outlined pill as "Explore More", in the quote red; the label never touches the arrow */
.product-item-container .pr-btn--quote,
#products .item:not(.list-group-item) .pr-btn--quote {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 4px 18px;
    background: #fff;
    border: 1.5px solid #a81220;
    box-shadow: none;
}
html[dir="rtl"] .product-item-container .pr-btn--quote,
html[dir="rtl"] #products .item:not(.list-group-item) .pr-btn--quote {
    padding: 4px 18px 4px 4px;
}
.product-item-container .pr-btn--quote .pr-btn-label,
#products .item:not(.list-group-item) .pr-btn--quote .pr-btn-label {
    flex: 1 1 auto;
    color: #a81220 !important;
    text-align: start;
    white-space: nowrap;
}
.product-item-container .pr-btn--quote .pr-btn-icon,
#products .item:not(.list-group-item) .pr-btn--quote .pr-btn-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    background: #a81220;
    color: #fff;
    line-height: 26px;
}
.product-item-container .pr-btn--quote:hover,
.product-item-container .pr-btn--quote:focus,
#products .item:not(.list-group-item) .pr-btn--quote:hover,
#products .item:not(.list-group-item) .pr-btn--quote:focus {
    background: linear-gradient(135deg, #e0313f 0%, #a81220 100%);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(168, 18, 32, .35);
}
.product-item-container .pr-btn--quote:hover .pr-btn-label,
#products .item:not(.list-group-item) .pr-btn--quote:hover .pr-btn-label { color: #fff !important; }
.product-item-container .pr-btn--quote:hover .pr-btn-icon,
#products .item:not(.list-group-item) .pr-btn--quote:hover .pr-btn-icon { background: #fff; color: #a81220; }

/* "More ..." link under the order buttons of the landing-tile detail pages */
.pr-more-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 10px; border: 1.5px solid #cfd8e3; border-radius: 999px; background: #fff; color: #0d4f8b !important; font: 700 14.5px/1 'Open Sans', 'Open Sans Fallback', sans-serif; text-decoration: none !important; transition: background .2s, border-color .2s, transform .2s; }
.pr-more-link:hover { border-color: #3dade2; background: #f2f9fe; transform: translateY(-1px); }

/* Digital Printing hero: the text and the picture slide into place but are never invisible while they do. An invisible start (opacity 0) made the page's largest paint
   wait for the whole animation, and a slow phone then counted every file that arrived meanwhile. */
@keyframes dphIn { from { transform: translate3d(0, 18px, 0); } to { transform: none; } }
@keyframes dphInMedia { from { transform: translate3d(0, 24px, 0) scale(.97); } to { transform: none; } }

/* Category pages with many tiles (Signage Center, Gift Items ...): the cards from the ninth tile on are laid out when the visitor scrolls near them,
   as already done for the product lists (the sizes are the measured heights of a tile at phone / tablet / desktop width). */
body:not(:has(.dph-hero)) .products-list .product-layout:nth-child(n+9) > * { content-visibility: auto; contain-intrinsic-block-size: auto 319px; }
@media (min-width: 768px) { body:not(:has(.dph-hero)) .products-list .product-layout:nth-child(n+9) > * { contain-intrinsic-block-size: auto 445px; } }
@media (min-width: 1200px) { body:not(:has(.dph-hero)) .products-list .product-layout:nth-child(n+9) > * { contain-intrinsic-block-size: auto 376px; } }