/* ==========================================================================
   Qatar ERP brand overrides
   Loaded after style.css so the template's own rules stay untouched.
   ========================================================================== */

/* --- Logo sizing -----------------------------------------------------------
   The stock template logo was an SVG with a built-in 148x45 intrinsic size.
   The Qatar ERP wordmark is wider (≈3.3:1), so it needs a slightly larger box
   to read at the same optical weight, and the raster needs explicit widths
   wherever the template relied on the SVG's intrinsic size. */

header.style-1 .header-logo,
header.style-2 .header-logo {
    width: 176px;
    line-height: 0;
}

header.style-1 .header-logo img,
header.style-2 .header-logo img {
    width: 100%;
    height: auto;
}

@media (max-width: 1399px) {

    header.style-1 .header-logo,
    header.style-2 .header-logo {
        width: 140px;
    }
}

header.style-1 .mobile-logo-area .mobile-logo-wrap img,
header.style-2 .mobile-logo-area .mobile-logo-wrap img {
    width: 140px;
    height: auto;
}

/* Footer logo: the template gave this one no width at all. */
.footer-section.style-2 .contact-area-and-logo-wrapper>a {
    line-height: 0;
    flex: 0 0 auto;
}

.footer-section.style-2 .contact-area-and-logo-wrapper>a img {
    width: 190px;
    height: auto;
}

@media (max-width: 991px) {
    .footer-section.style-2 .contact-area-and-logo-wrapper>a img {
        width: 160px;
    }
}

/* --- Floating WhatsApp button ------------------------------------------- */
.wa-float {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wa-float:hover,
.wa-float:focus-visible {
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 8px 26px rgba(37, 211, 102, 0.5);
}

/* expanding wave rings */
.wa-float::before,
.wa-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    opacity: 0.55;
    z-index: -1;
    animation: wa-wave 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.wa-float::after {
    animation-delay: 1.2s;
}

@keyframes wa-wave {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }

    100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

@media (max-width: 767px) {
    .wa-float {
        left: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .wa-float::before,
    .wa-float::after {
        animation: none;
    }
}

/* --- "Backed by Shyphan" badge ------------------------------------------
   Sits in the eyebrow slot of .section-title, so it inherits the section's
   own rhythm and type scale instead of introducing a new block. */
.section-title .backed-badge {
    display: flex;
    width: -webkit-fit-content;
    width: fit-content;
    margin-left: auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 9px 20px 9px 16px;
    border: 1px solid var(--borders-color);
    border-radius: 40px;
    background-color: var(--white-color);
    line-height: 1;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.section-title .backed-badge:hover,
.section-title .backed-badge:focus-visible {
    border-color: var(--primary-color1);
    box-shadow: 0 4px 16px rgba(1, 14, 208, 0.08);
}

.section-title .backed-badge span {
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-color);
    white-space: nowrap;
}

.section-title .backed-badge img {
    display: block;
    width: auto;
    height: 32px;
}

@media (max-width: 575px) {
    .section-title .backed-badge {
        gap: 9px;
        padding: 7px 14px 7px 12px;
    }

    .section-title .backed-badge img {
        height: 26px;
    }
}

/* Desktop: sit the badge at the top-right of the section, opposite the heading.
   .section-title is capped at 759px, so anchor to the container instead. */
@media (min-width: 992px) {
    .home6-about-section .container {
        position: relative;
    }

    .home6-about-section .section-title .backed-badge {
        position: absolute;
        top: 4px;
        right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        margin: 0;
        z-index: 2;
    }
}

/* --- Accent colour: green -> brand magenta ------------------------------
   The template's "AI startup" theme keys every accent off --primary-color4
   (originally lime #9CD338). Re-pointing it at the Qatar ERP magenta (the
   colour of the ERP sphere in the logo) recolours buttons, hovers, icons and
   the scroll bar in one place. #C4136B keeps 5.7:1 against white text. */
:root {
    --primary-color4: #C4136B;
    --primary-color4-opc: 196, 19, 107;
    --primary-color4-deep: #8F1345;
    --progress-fill: #C4136B;
    /* The template's other accent families (deep blue #010ED0, purple #5841D8)
       drive links, top bars, form focus and inner-page buttons. Pointing them
       at the same magenta keeps every page on the homepage palette. */
    --primary-color1: #C4136B;
    --primary-color1-opc: 196, 19, 107;
    --primary-color2: #C4136B;
    --primary-color2-opc: 196, 19, 107;
    --primary-color3: #8F1345;
    --primary-color3-opc: 143, 19, 69;
}

/* every section-title highlight span (template used a red->blue gradient) */
.section-title h2 span,
.section-title h1 span,
.section-title h3 span {
    background: linear-gradient(270deg, #E0448A 0%, #8F1345 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* The lime fill carried black label text; magenta needs white to stay legible
   (5.7:1). The .transparent variant is excluded - it paints text, not fill. */
.primary-btn1.ai-primary-color:not(.transparent) {
    color: var(--white-color);
}

.primary-btn1.ai-primary-color:not(.transparent)>span {
    background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
    color: var(--white-color);
}

.primary-btn1.ai-primary-color:not(.transparent)>span::after {
    color: var(--white-color);
}

.primary-btn1.ai-primary-color:not(.transparent)>span svg {
    stroke: var(--white-color);
}

/* remaining hard-coded lime in the template */
.home5-integration-section .integration-wrapper .logo-area {
    background-color: #FBE0EE;
}

/* feature-tab underline sweep */
.home6-feature-section .feature-tab-wrapper .project-management-nav-and-content .feature-tab .feature-nav-tabs .single-tab {
    background: linear-gradient(to bottom, #C4136B 0%, #C4136B 98%);
    background-size: 0px 3px;
    background-repeat: no-repeat;
    background-position: right 100%;
}

/* --- Client logo grid --------------------------------------------------- */
.client-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
}

.client-logo {
    background-color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 24px;
    min-height: 118px;
    /* outline instead of a grid-gap background, so a partly filled last row
       leaves no empty boxes behind */
    outline: 1px solid var(--borders-color);
    outline-offset: -1px;
    transition: background-color 0.3s ease;
}

.client-logo img {
    max-width: 100%;
    width: auto;
    /* one optical height for every mark, whatever its own proportions */
    max-height: 52px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.client-logo:hover img,
.client-logo:focus-within img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

@media (max-width: 991px) {
    .client-logo-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .client-logo {
        padding: 20px 18px;
        min-height: 100px;
    }

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

@media (max-width: 575px) {
    .client-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-logo img {
        transition: none;
    }
}

/* orbiting dot on the about-section stat ring (hard-coded lime in the template) */
.home6-about-section .circle-stats .ball {
    background: #C4136B;
}

/* --- Integration diagram centre badge -----------------------------------
   The stock SVG carried an intrinsic 143px width; the raster logo has none,
   so without this it stretches to the full 257px badge and the ERP sphere
   spills past the circular mask. Mirrors the template's own breakpoints. */
.home5-integration-section .integration-wrapper .logo-area img {
    width: 140px;
    height: auto;
}

@media (max-width: 991px) {
    .home5-integration-section .integration-wrapper .logo-area img {
        width: 120px;
    }
}

@media (max-width: 576px) {
    .home5-integration-section .integration-wrapper .logo-area img {
        width: 100px;
    }
}

/* --- Product mega-menu promo card ---------------------------------------
   Fills the right column that was left empty when the stock "Integration
   Platform" logo strip was removed. */
.mega-menu2 .menu-row .industry-wrap .product-promo {
    display: block;
    border: 1px solid var(--borders-color);
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--white-color);
    height: 100%;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.mega-menu2 .menu-row .industry-wrap .product-promo:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 10px 30px rgba(var(--primary-color4-opc), 0.14);
}

.mega-menu2 .menu-row .industry-wrap .product-promo img {
    display: block;
    width: 100%;
    height: 158px;
    object-fit: cover;
}

.mega-menu2 .menu-row .industry-wrap .product-promo-content {
    padding: 18px 20px 20px;
}

.mega-menu2 .menu-row .industry-wrap .product-promo-content span {
    display: inline-block;
    font-family: var(--font-poppins);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color4);
    margin-bottom: 8px;
    line-height: 1;
}

.mega-menu2 .menu-row .industry-wrap .product-promo-content h4 {
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    color: var(--title-color);
    margin: 0 0 8px;
}

.mega-menu2 .menu-row .industry-wrap .product-promo-content p {
    font-size: 14px;
    line-height: 24px;
    color: var(--text-color);
    margin: 0 0 12px;
}

.mega-menu2 .menu-row .industry-wrap .product-promo-content em {
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color4);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

/* --- "Why us" band (index) ------------------------------------------------
   Dark brand gradient with a magenta glow instead of a stock photo, so the
   band reads as Qatar ERP without depending on regional imagery. */
.home6-ai-feature-section {
    background-image:
        radial-gradient(900px 420px at 88% -10%, rgba(196, 19, 107, 0.42) 0%, rgba(196, 19, 107, 0) 62%),
        radial-gradient(700px 360px at 8% 110%, rgba(196, 19, 107, 0.22) 0%, rgba(196, 19, 107, 0) 60%),
        linear-gradient(180deg, #0e0b12 0%, #16101a 100%);
    background-size: cover;
    background-position: center;
}

/* --- Inner-page header banner ------------------------------------------- */
.breadcrumb-section {
    position: relative;
    /* matched to the homepage hero treatment: same black gradient strength so
       the inner-page banners sit at the same weight as the video header */
    background-image: linear-gradient(180deg,
            rgba(0, 0, 0, 0.86) 0%,
            rgba(0, 0, 0, 0.82) 45%,
            rgba(0, 0, 0, 0.92) 100%),
        url(../img/header-image.jpg) !important;
    background-size: cover !important;
    /* the band is far wider than it is tall, so `cover` was showing only a thin
       middle slice - a taller band plus a higher focal point reveals the screen
       and the map instead of cropping straight through them */
    background-position: center 32% !important;
    min-height: 460px;
    display: flex;
    align-items: center;
}

@media (max-width: 991px) {
    .breadcrumb-section {
        min-height: 360px;
    }
}

@media (max-width: 575px) {
    .breadcrumb-section {
        min-height: 300px;
    }
}

/* Platform pages carry the vendor lockup above the page title. */
.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    margin-bottom: 22px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 46px;
    background: rgba(8, 18, 34, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.platform-badge img {
    height: 34px;
    width: auto;
    display: block;
}

.platform-badge span {
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    white-space: nowrap;
}

@media (max-width: 575px) {
    .platform-badge {
        padding: 10px 16px;
        gap: 10px;
    }

    .platform-badge img {
        height: 26px;
    }

    .platform-badge span {
        font-size: 11px;
        padding-left: 10px;
    }
}

/* --- Contact detail cards ----------------------------------------------- */
.contact-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px 26px 28px;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    background-color: var(--white-color);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover,
.contact-card:focus-visible {
    transform: translateY(-6px);
    border-color: var(--primary-color4);
    box-shadow: 0 16px 40px rgba(var(--primary-color4-opc), 0.14);
}

.contact-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-bottom: 20px;
    background-color: rgba(var(--primary-color4-opc), 0.1);
    color: var(--primary-color4);
    flex: 0 0 auto;
}

.contact-card-icon svg {
    fill: currentColor;
}

.contact-card:hover .contact-card-icon {
    background-color: var(--primary-color4);
    color: var(--white-color);
}

.contact-card-label {
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-color);
    margin-bottom: 8px;
    line-height: 1;
}

.contact-card-value {
    font-size: 17px;
    font-weight: 600;
    line-height: 27px;
    color: var(--title-color);
    margin-bottom: 10px;
    word-break: break-word;
}

.contact-card-meta {
    margin-top: auto;
    font-size: 14px;
    line-height: 22px;
    color: var(--text-color);
}

.contact-card:hover .contact-card-value {
    color: var(--primary-color4);
}

@media (max-width: 991px) {
    .contact-card {
        padding: 24px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-card {
        transition: none;
    }

    .contact-card:hover {
        transform: none;
    }
}

/* The template sets the product mega-menu grid to `79% 21%` with an 81px gap,
   which is 81px wider than the content box. Harmless while the right column was
   empty; it pushed the promo card past the panel edge once filled. */
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu2 .menu-row {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 50px;
}

.mega-menu2 .menu-row .industry-wrap .indutry-menu-area,
.mega-menu2 .menu-row .industry-wrap .product-promo {
    width: 100%;
}

/* --- Contact: engagement process ---------------------------------------- */
.contact-process-section .section-title {
    max-width: 720px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-50 {
    margin-bottom: 50px;
}

.process-step {
    height: 100%;
    padding: 32px 28px 30px;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    background-color: var(--white-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 16px 40px rgba(var(--primary-color4-opc), 0.12);
}

.process-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(var(--primary-color4-opc), 0.1);
    color: var(--primary-color4);
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
}

.process-step h3 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    margin: 0 0 10px;
}

.process-step p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0;
}

/* --- Contact: Doha CTA band ------------------------------------------- */
.doha-cta-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 80px 60px;
    background-image: linear-gradient(90deg, rgba(6, 14, 30, 0.94) 0%, rgba(6, 14, 30, 0.72) 60%,
            rgba(6, 14, 30, 0.45) 100%), url(../img/qatar-technology.jpg);
    background-size: cover;
    /* pull the crop up so the Kingdom Centre crown is inside the frame */
    background-position: center 22%;
    min-height: 420px;
    display: flex;
    align-items: center;
}

.doha-cta-content {
    max-width: 620px;
}

.doha-cta-content span {
    display: inline-block;
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
    line-height: 1;
}

.doha-cta-content h2 {
    color: var(--white-color);
    font-size: 42px;
    line-height: 54px;
    margin: 0 0 16px;
}

.doha-cta-content p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 30px;
}

.doha-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* This button sits directly on the photograph. Fully transparent, its white
   label washed out wherever the skyline behind it is bright, so it carries its
   own translucent dark plate and keeps contrast whatever is underneath. */
.primary-btn1.doha-cta-alt {
    background-color: rgba(6, 14, 30, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--white-color);
}

.primary-btn1.doha-cta-alt>span {
    color: var(--white-color);
    background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
}

.primary-btn1.doha-cta-alt>span svg {
    stroke: var(--white-color);
}

.primary-btn1.doha-cta-alt:hover {
    border-color: var(--white-color);
}

@media (max-width: 991px) {
    .doha-cta-wrap {
        padding: 56px 30px;
        background-image: linear-gradient(rgba(6, 14, 30, 0.9), rgba(6, 14, 30, 0.9)),
            url(../img/qatar-technology.jpg);
    }

    .doha-cta-content h2 {
        font-size: 32px;
        line-height: 44px;
    }
}

/* --- Contact FAQ -------------------------------------------------------- */
.contact-faq-section .accordion-header {
    margin: 0;
}

/* The template caps .faq-wrap at 729px for its two-column layout. The contact
   FAQ is a centred single column, so let it fill and stay centred. */
.contact-faq-section .faq-wrap {
    max-width: 100%;
    margin-inline: auto;
}

/* --- Vision 2030 lockup -------------------------------------------------- */
.vision2030-bar {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 30px 36px;
    margin-bottom: 40px;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    background-color: var(--white-color);
}

.home6-partner-section .vision2030-bar {
    margin-bottom: 50px;
}

.vision2030-bar>img {
    width: 132px;
    height: auto;
    flex: 0 0 auto;
}

.vision2030-text h3 {
    font-size: 21px;
    line-height: 31px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--title-color);
}

.vision2030-text p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0;
    max-width: 760px;
}

.vision2030-section .vision2030-bar {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .vision2030-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 26px 22px;
    }

    .vision2030-bar>img {
        width: 108px;
    }

    .vision2030-text h3 {
        font-size: 19px;
        line-height: 29px;
    }
}

/* --- Contact form status message ---------------------------------------- */
.form-status {
    display: none;
    margin-top: 20px;
    font-size: 15px;
    line-height: 24px;
    padding: 16px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.form-status strong {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.form-status span {
    display: block;
    font-size: 14px;
    line-height: 23px;
    opacity: 0.9;
}

.form-status a {
    color: inherit;
    text-decoration: underline;
}

.form-status.is-success,
.form-status.is-error {
    display: block;
}

.form-status.is-success {
    color: #0f6b3d;
    background-color: #e7f6ee;
    border-color: #bfe6d1;
}

.form-status.is-error {
    color: #8a1c1c;
    background-color: #fdeaea;
    border-color: #f3c6c6;
}

.contact-form-wrap form button[type="submit"][disabled] {
    opacity: 0.65;
    pointer-events: none;
}

/* --- Client logo marquee (single row, right-to-left, infinite) -----------
   The track carries the logo list twice, so animating to -50% lands on a frame
   identical to the start and the loop is seamless. Pure CSS - no JS. */
.client-marquee-section {
    padding-top: 10px;
}

.client-marquee {
    position: relative;
    overflow: hidden;
    /* a little breathing room under the logo row */
    padding: 6px 0 22px;
    /* fade the logos out at both ends instead of cutting them off */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px,
            #000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 90px,
            #000 calc(100% - 90px), transparent 100%);
}

.client-marquee-track {
    display: flex;
    align-items: center;
    gap: 64px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    animation: client-marquee 60s linear infinite;
}

.client-marquee:hover .client-marquee-track {
    animation-play-state: paused;
}

.client-marquee-track li {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-marquee-track img {
    height: 44px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.client-marquee-track li:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes client-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 991px) {
    .client-marquee-track {
        gap: 46px;
        animation-duration: 45s;
    }

    .client-marquee-track img {
        height: 36px;
        max-width: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-marquee-track {
        animation: none;
        overflow-x: auto;
    }
}

/* --- Hero + client strip share the first screen --------------------------
   The template gives the banner a fixed pixel height per breakpoint, which
   pushed the logo strip below the fold. Tie it to the viewport instead and
   reserve just enough room for the strip underneath. */
@media (min-width: 992px) {
    .home6-banner-section.mb-120 {
        height: calc(100vh - 116px);
        min-height: 470px;
        max-height: 897px;
        margin-bottom: 0;
    }

    /* the video carries its own fixed pixel height per breakpoint, so it has to
       follow the section or it leaves a gap under the shortened banner */
    .home6-banner-section.mb-120 video {
        height: 100%;
    }

    .client-marquee-section {
        padding-top: 22px;
    }

}

/* Lift the hero headline, intro and CTA a little off the bottom edge.
   Desktop only - the mobile stacking already sits well. */
@media (min-width: 992px) {
    .home6-banner-section .banner-content {
        padding-bottom: 170px;
    }
}

/* --- Generated inner pages ---------------------------------------------- */
.mb-90 {
    margin-bottom: 90px;
}

.page-intro-section .section-title {
    max-width: 860px;
}

.outcome-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
}

.outcome-list li span {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--borders-color);
    border-radius: 40px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--title-color);
    background-color: var(--white-color);
}

.feature-card,
.link-card {
    display: block;
    height: 100%;
    padding: 30px 28px;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    background-color: var(--white-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.feature-card:hover,
.link-card:hover,
.link-card:focus-visible {
    border-color: var(--primary-color4);
    box-shadow: 0 16px 40px rgba(var(--primary-color4-opc), 0.12);
}

.link-card:hover {
    transform: translateY(-5px);
}

.feature-card h3,
.link-card h3 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--title-color);
}

.feature-card p,
.link-card p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0;
}

.link-card em {
    display: inline-block;
    margin-top: 14px;
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color4);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.legal-copy {
    max-width: 860px;
}

.legal-copy h2 {
    font-size: 34px;
    line-height: 46px;
    margin: 0 0 22px;
}

.legal-copy h3 {
    font-size: 21px;
    line-height: 31px;
    font-weight: 600;
    margin: 34px 0 10px;
}

.legal-copy p {
    color: var(--paragraph-color);
    margin: 0 0 14px;
}

.legal-copy a {
    color: var(--primary-color4);
    text-decoration: underline;
}

@media (max-width: 991px) {

    .feature-card,
    .link-card {
        padding: 24px 22px;
    }

    .legal-copy h2 {
        font-size: 28px;
        line-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-card:hover {
        transform: none;
    }
}

/* --- Platform application suites (Zoho / Odoo) ---------------------------
   Cards are sized to carry a one-line brief under each app, so the grid reads
   as a catalogue rather than a wall of icons. */
.suite-group {
    margin-bottom: 46px;
}

.suite-group:last-of-type {
    margin-bottom: 0;
}

.suite-group h3 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-color4);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--borders-color);
}

.suite-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.suite-grid li {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 20px;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.suite-grid li:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 12px 30px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-3px);
}

.suite-grid p {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    color: var(--text-color);
}

/* Odoo: square icon beside the app name, brief underneath */
.suite-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.suite-head img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex: 0 0 auto;
}

.suite-head span {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--title-color);
    min-width: 0;
    overflow-wrap: break-word;
}

/* Zoho: the lockup already contains the product name, so it stands alone.
   In a column flex container the image box stretches to the card width, and
   because the lockups vary in aspect ratio each one centred at a different
   offset. align-self shrinks the box to the artwork so every logo starts on
   the same left edge as the text below it, matching the Odoo cards. */
.suite-grid.is-lockup img {
    height: auto;
    width: auto;
    max-width: 190px;
    max-height: 32px;
    margin-bottom: 14px;
    align-self: flex-start;
    object-fit: contain;
    object-position: left center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.suite-note {
    margin: 44px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--borders-color);
    font-size: 13px;
    line-height: 22px;
    color: var(--text-color);
    max-width: 900px;
}

@media (max-width: 575px) {
    .suite-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .suite-grid li {
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .suite-grid li:hover {
        transform: none;
    }
}

/* Product pages give each capability two columns and a second, practical line. */
.feature-card.is-wide {
    padding: 34px 32px;
}

.feature-card.is-wide h3 {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 12px;
}

.feature-card.is-wide p {
    font-size: 16px;
    line-height: 28px;
}

.feature-card .feature-brief {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--borders-color);
    font-size: 14px;
    line-height: 25px;
    color: var(--text-color);
}

@media (max-width: 991px) {
    .feature-card.is-wide {
        padding: 26px 24px;
    }

    .feature-card.is-wide h3 {
        font-size: 20px;
        line-height: 30px;
    }

    .feature-card.is-wide p {
        font-size: 15px;
        line-height: 26px;
    }
}

/* --- Intro media (platform pages) --------------------------------------- */
.intro-media {
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 24px 60px rgba(6, 18, 40, 0.14);
}

.intro-media img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .intro-media {
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(6, 18, 40, 0.12);
    }
}

/* ERPNext ships one product rather than separately branded apps, so its module
   cards use the bundled icon font in a tinted disc instead of vendor artwork. */
.suite-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
    background-color: rgba(var(--primary-color4-opc), 0.1);
    color: var(--primary-color4);
    font-size: 18px;
    line-height: 1;
}

.suite-grid li:hover .suite-icon {
    background-color: var(--primary-color4);
    color: var(--white-color);
}

/* Salesforce and ERPNext lead with a mark, so the badge carries the name too */
.platform-badge strong {
    font-family: var(--font-poppins);
    font-size: 17px;
    font-weight: 600;
    color: var(--white-color);
    line-height: 1;
}

/* SLDS ships its standard icons as white glyphs on transparent - Salesforce
   supplies the coloured tile in CSS, so we do the same or they disappear. */
.suite-icon.is-brand {
    background-color: #0176D3;
    border-radius: 10px;
}

.suite-icon.is-brand img {
    width: 24px;
    height: 24px;
    display: block;
}

.suite-grid li:hover .suite-icon.is-brand {
    background-color: #032D60;
}

/* --- Industry pages ------------------------------------------------------ */
/* sector badge sitting on the intro photo */
.intro-media.has-tag {
    position: relative;
}

.intro-tag {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 28px;
    line-height: 1;
    color: var(--white-color);
    background: var(--primary-color4);
    box-shadow: 0 10px 26px rgba(6, 18, 40, 0.35);
}

/* the "what we hear" cards read as quoted problems, not features */
.pain-card {
    height: 100%;
    padding: 30px 30px 28px;
    border-radius: 12px;
    background-color: #f6f9ff;
    border: 1px solid var(--borders-color);
    border-left: 3px solid var(--primary-color4);
}

.pain-card h3 {
    font-size: 19px;
    line-height: 29px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--title-color);
}

.pain-card p {
    font-size: 15px;
    line-height: 26px;
    color: var(--paragraph-color);
    margin: 0;
}

/* compact variant of the link card for the "where rollouts start" row */
.link-card h3:last-of-type {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .pain-card {
        padding: 24px 22px;
    }

    .intro-tag {
        width: 52px;
        height: 52px;
        font-size: 23px;
        left: 14px;
        bottom: 14px;
    }
}

/* --- Hero video: dial the footage back -----------------------------------
   The video sat at full strength and competed with the headline. It now runs
   at reduced opacity over a dark base, with a tint layer above it. The layer
   is z-indexed below .banner-content so the headline, copy and CTA are
   untouched - only the footage is dimmed. */
.home6-banner-section {
    background-color: #000;
}

.home6-banner-section video {
    opacity: 0.3;
}

.home6-banner-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.66) 45%,
            rgba(0, 0, 0, 0.82) 100%);
}

.home6-banner-section .banner-content {
    z-index: 2;
}

/* --- Blog: listing ------------------------------------------------------- */
.mb-100 {
    margin-bottom: 100px;
}

.post-featured {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--white-color);
}

.post-featured-media {
    display: block;
    position: relative;
    min-height: 340px;
    overflow: hidden;
}

.post-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.post-featured:hover .post-featured-media img {
    transform: scale(1.04);
}

.post-featured-body {
    padding: 44px 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-featured-body h3 {
    font-size: 30px;
    line-height: 42px;
    font-weight: 600;
    margin: 16px 0 14px;
}

.post-featured-body h3 a {
    color: var(--title-color);
}

.post-featured-body h3 a:hover {
    color: var(--primary-color4);
}

.post-featured-body p {
    color: var(--text-color);
    margin: 0 0 14px;
}

.post-featured-body .primary-btn1 {
    align-self: flex-start;
    margin-top: 10px;
}

.post-cat {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-poppins);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--white-color);
    background-color: var(--primary-color4);
    padding: 7px 14px;
    border-radius: 40px;
    line-height: 1;
}

.post-cat.is-static {
    position: static;
    align-self: flex-start;
}

.post-meta {
    font-family: var(--font-poppins);
    font-size: 13px;
    color: var(--text-color);
    margin: 0 0 6px;
}

.post-meta span {
    padding: 0 6px;
    opacity: 0.6;
}

/* card */
.post-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--white-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.post-card:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 18px 44px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-5px);
}

.post-thumb {
    display: block;
    position: relative;
    height: 210px;
    overflow: hidden;
}

.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.post-card:hover .post-thumb img {
    transform: scale(1.05);
}

.post-thumb .post-cat {
    position: absolute;
    left: 16px;
    bottom: 16px;
}

.post-body {
    padding: 24px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.post-body h3 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    margin: 4px 0 10px;
}

.post-body h3 a {
    color: var(--title-color);
}

.post-body h3 a:hover {
    color: var(--primary-color4);
}

.post-body p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0 0 14px;
}

.post-more {
    margin-top: auto;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color4);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

@media (max-width: 991px) {
    .post-featured {
        grid-template-columns: 1fr;
    }

    .post-featured-media {
        min-height: 260px;
    }

    .post-featured-body {
        padding: 30px 26px 32px;
    }

    .post-featured-body h3 {
        font-size: 24px;
        line-height: 35px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .post-card:hover,
    .post-card:hover .post-thumb img,
    .post-featured:hover .post-featured-media img {
        transform: none;
    }
}

/* --- Blog: article ------------------------------------------------------- */
.article-head {
    margin-bottom: 26px;
}

.article-head .post-meta {
    margin-top: 14px;
}

.article-hero {
    margin: 0 0 40px;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
}

.article-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* measured line length and generous leading - this is the readable part */
.article-body {
    font-size: 17px;
    line-height: 32px;
    color: var(--paragraph-color);
}

.article-body p {
    margin: 0 0 22px;
}

.article-lead {
    font-size: 20px;
    line-height: 36px;
    color: var(--title-color);
    font-weight: 500;
    margin-bottom: 28px !important;
}

.article-body h2 {
    font-size: 28px;
    line-height: 40px;
    font-weight: 600;
    color: var(--title-color);
    margin: 44px 0 16px;
}

.article-body h3 {
    font-size: 21px;
    line-height: 31px;
    font-weight: 600;
    color: var(--title-color);
    margin: 0 0 10px;
}

.article-body ul,
.article-body ol {
    margin: 0 0 24px;
    padding-left: 22px;
}

.article-body li {
    margin-bottom: 10px;
    padding-left: 4px;
}

.article-body ul li::marker {
    color: var(--primary-color4);
}

.article-body ol li::marker {
    color: var(--primary-color4);
    font-weight: 600;
}

.article-body blockquote {
    margin: 32px 0;
    padding: 24px 28px;
    border-left: 3px solid var(--primary-color4);
    background-color: #f6f9ff;
    border-radius: 0 12px 12px 0;
    font-size: 19px;
    line-height: 33px;
    font-weight: 500;
    color: var(--title-color);
}

.article-callout {
    margin: 34px 0;
    padding: 28px 30px;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    background-color: #f6f9ff;
}

.article-callout p {
    margin: 0;
    font-size: 16px;
    line-height: 28px;
}

.article-share {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 44px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--borders-color);
}

.article-share span {
    font-family: var(--font-poppins);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-color);
    margin-right: 4px;
}

.article-share a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--borders-color);
    color: var(--title-color);
    font-size: 17px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.article-share a:hover {
    background-color: var(--primary-color4);
    border-color: var(--primary-color4);
    color: var(--white-color);
}

.article-author {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    margin-top: 36px;
    padding: 28px 30px;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
}

.article-author img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    flex: 0 0 auto;
}

.article-author h3 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--title-color);
}

.article-author p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0 0 10px;
}

.article-author a {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color4);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

@media (max-width: 767px) {
    .article-body {
        font-size: 16px;
        line-height: 30px;
    }

    .article-lead {
        font-size: 18px;
        line-height: 32px;
    }

    .article-body h2 {
        font-size: 24px;
        line-height: 34px;
        margin-top: 36px;
    }

    .article-author {
        flex-direction: column;
        gap: 16px;
        padding: 24px 22px;
    }
}

/* --- Article landing page ------------------------------------------------ */
.landing-hero {
    position: relative;
    overflow: hidden;
    /* the topbar + header block is position:absolute and 159px tall on desktop,
       so the hero has to clear it or the form card sits underneath */
    padding: 205px 0 100px;
    background-color: #050e1f;
    background-image:
        radial-gradient(900px 380px at 82% -15%, rgba(196, 19, 107, 0.42) 0%, rgba(196, 19, 107, 0) 62%),
        linear-gradient(158deg, #07142c 0%, #0a1c38 55%, #050e20 100%);
}

.landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 66px 66px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 40% 40%, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 80% at 40% 40%, #000 20%, transparent 80%);
}

.landing-hero .container {
    position: relative;
    z-index: 2;
}

.landing-hero-copy h1 {
    color: var(--white-color);
    font-size: 46px;
    line-height: 60px;
    margin: 18px 0 18px;
}

.landing-hero-copy>p {
    color: rgba(255, 255, 255, 0.76);
    font-size: 18px;
    line-height: 31px;
    margin: 0 0 22px;
}

.landing-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.landing-hero-meta li {
    font-family: var(--font-poppins);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.landing-hero-meta i {
    color: var(--primary-color4);
    margin-right: 6px;
}

.landing-hero-points {
    list-style: none;
    margin: 0;
    padding: 0;
}

.landing-hero-points li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
    line-height: 28px;
}

.landing-hero-points li::before {
    content: "\f26e";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color4);
    font-size: 17px;
}

/* capture form */
.landing-form {
    background-color: var(--white-color);
    border-radius: 16px;
    padding: 34px 34px 30px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.landing-form h2 {
    font-size: 25px;
    line-height: 35px;
    margin: 0 0 8px;
}

.landing-form>p {
    font-size: 15px;
    line-height: 25px;
    color: var(--text-color);
    margin: 0 0 22px;
}

.landing-form .form-inner {
    margin-bottom: 14px;
}

.landing-form .form-check {
    margin: 4px 0 18px;
}

.landing-form button {
    width: 100%;
    text-align: center;
}

.landing-form-note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 21px;
    color: var(--text-color);
}

.landing-form-note i {
    color: var(--primary-color4);
    margin-right: 5px;
}

/* --- Article tables ------------------------------------------------------ */
.table-wrap {
    overflow-x: auto;
    margin: 0 0 30px;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
}

.data-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 25px;
}

.data-table th {
    background-color: #f2f6ff;
    color: var(--title-color);
    font-family: var(--font-poppins);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    padding: 15px 18px;
    border-bottom: 1px solid var(--borders-color);
    white-space: nowrap;
}

.data-table td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--borders-color);
    color: var(--paragraph-color);
    vertical-align: top;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:nth-child(even) {
    background-color: #fafbfe;
}

.data-table tbody tr:hover {
    background-color: #f2f6ff;
}

.data-table td strong {
    color: var(--title-color);
    font-weight: 600;
}

/* stack the table into labelled rows on small screens */
@media (max-width: 767px) {
    .table-wrap {
        border: 0;
        overflow: visible;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .data-table thead {
        display: none;
    }

    .data-table tr {
        border: 1px solid var(--borders-color);
        border-radius: 12px;
        margin-bottom: 14px;
        overflow: hidden;
    }

    .data-table tbody tr:nth-child(even) {
        background-color: var(--white-color);
    }

    .data-table td {
        padding: 12px 16px;
    }

    .data-table td::before {
        content: attr(data-label);
        display: block;
        font-family: var(--font-poppins);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--primary-color4);
        margin-bottom: 4px;
    }
}

/* --- Article sidebar ----------------------------------------------------- */
.article-aside {
    position: sticky;
    top: 110px;
}

.aside-card {
    padding: 26px 26px 24px;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    margin-bottom: 20px;
    background-color: var(--white-color);
}

.aside-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--title-color);
}

.aside-toc,
.aside-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aside-toc li,
.aside-links li {
    border-top: 1px solid var(--borders-color);
}

.aside-toc li:first-child,
.aside-links li:first-child {
    border-top: 0;
}

.aside-toc a,
.aside-links a {
    display: block;
    padding: 11px 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--paragraph-color);
}

.aside-toc a:hover,
.aside-links a:hover {
    color: var(--primary-color4);
}

.aside-card.is-dark {
    background: linear-gradient(158deg, #0a1c38 0%, #050e20 100%);
    border-color: transparent;
}

.aside-card.is-dark h3 {
    color: var(--white-color);
}

.aside-card.is-dark p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 26px;
    margin: 0 0 20px;
}

.aside-call {
    display: block;
    margin-top: 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white-color);
}

.aside-call i {
    color: var(--primary-color4);
    margin-right: 6px;
}

@media (max-width: 1199px) {
    .landing-hero-copy h1 {
        font-size: 38px;
        line-height: 50px;
    }
}

@media (max-width: 991px) {
    .article-aside {
        position: static;
    }

    .landing-hero {
        /* no topbar below lg, so only the header needs clearing */
        padding: 130px 0 76px;
    }

    .landing-hero-copy h1 {
        font-size: 32px;
        line-height: 44px;
    }

    .landing-form {
        padding: 28px 24px 26px;
    }
}

/* Landing form: two fields per row, collapsing to one on narrow screens. */
.landing-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}

@media (max-width: 575px) {
    .landing-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Bootstrap's float-based .form-check made the wrapped consent label indent
   under the box; flex keeps the second line aligned with the first. */
.landing-form .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
}

.landing-form .form-check-input {
    float: none;
    flex: 0 0 auto;
    margin: 4px 0 0;
}

.landing-form .form-check-label {
    margin: 0;
    font-size: 14px;
    line-height: 23px;
}

/* --- Custom software page ------------------------------------------------ */
.build-card {
    height: 100%;
    padding: 34px 30px 30px;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    background-color: var(--white-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.build-card:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 18px 44px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-4px);
}

.build-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    margin-bottom: 20px;
    background-color: rgba(var(--primary-color4-opc), 0.1);
    color: var(--primary-color4);
    font-size: 24px;
    line-height: 1;
}

.build-card:hover .build-icon {
    background-color: var(--primary-color4);
    color: var(--white-color);
}

.build-card h3 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
    margin: 0 0 10px;
}

.build-card>p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--borders-color);
}

.build-card ul,
.engage-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.build-card li,
.engage-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 25px;
    color: var(--paragraph-color);
}

.build-card li:last-child,
.engage-list li:last-child {
    margin-bottom: 0;
}

.build-card li::before,
.engage-list li::before {
    content: "\f26e";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color4);
    font-size: 15px;
}

.engage-list {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--borders-color);
}

/* technology grid - denser than the app suite grids */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tech-grid li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--borders-color);
    border-radius: 10px;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.tech-grid li:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 10px 24px rgba(var(--primary-color4-opc), 0.1);
    transform: translateY(-3px);
}

.tech-grid img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex: 0 0 auto;
}

.tech-grid span {
    font-size: 14px;
    font-weight: 500;
    color: var(--title-color);
    min-width: 0;
    overflow-wrap: break-word;
}

@media (max-width: 575px) {
    .tech-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .build-card {
        padding: 26px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .build-card:hover,
    .tech-grid li:hover {
        transform: none;
    }
}

/* --- Product mega-menu: second row now carries three groups (Sales & CRM) ----
   The template's .two-grid makes that row 2 columns with 2-up lists inside, so a
   third group wrapped onto a line of its own. Match the first row instead.
   Desktop only: below 992px the template already stacks both rows to one column,
   and brand.css loads last, so an unscoped rule would beat that. */
@media (min-width: 992px) {

    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu2 .menu-row .product-wrapper .product-wrap.two-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu2 .menu-row .product-wrapper .product-wrap.two-grid .single-menu .product-list {
        grid-template-columns: minmax(0, 1fr);
    }

    /* the .two-grid 2-up rule zeroed the gap on items 3 and 4; in a single column
       only the last item should lose it */
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu2 .menu-row .product-wrapper .product-wrap.two-grid .single-menu .product-list .single-product:nth-child(3),
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu2 .menu-row .product-wrapper .product-wrap.two-grid .single-menu .product-list .single-product:nth-child(4) {
        margin-bottom: 20px;
    }

    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu2 .menu-row .product-wrapper .product-wrap.two-grid .single-menu .product-list .single-product:last-child {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Zoho ads landing page (zoho-erp-qatar.html)
   A paid-traffic page, so it deliberately drops the site nav: every extra link
   is a way out that is not the form. Standalone header/footer, one CTA.
   ========================================================================== */
.lp-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--white-color);
    border-bottom: 1px solid var(--borders-color);
}

.lp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 0;
}

.lp-header-inner .lp-logo {
    /* without this, flex shrank the wordmark to 32px at 320px wide */
    flex: 0 0 auto;
}

.lp-header-inner .lp-logo img {
    width: 175px;
    height: auto;
    display: block;
}

.lp-cta-short {
    display: none;
}

.lp-cta-long,
.lp-cta-short {
    font-weight: inherit;
}

.lp-header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.lp-callnow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 600;
    color: var(--title-color);
    white-space: nowrap;
}

.lp-callnow i {
    color: var(--primary-color4);
}

.lp-callnow:hover {
    color: var(--primary-color4);
}

/* --- hero ---------------------------------------------------------------- */
.lp-hero {
    position: relative;
    overflow: hidden;
    /* Sized so the header, the whole pitch and the complete form land inside a
       900px viewport - the form is the conversion, and it should never need a
       scroll to be seen. */
    padding: 32px 0 40px;
    background-color: #050e1f;
    /* Riyadh at golden hour, dimmed hard enough that white text holds up over
       the bright sky on the left and the lit tower on the right */
    background-image:
        linear-gradient(100deg, rgba(4, 11, 24, 0.90) 0%, rgba(5, 14, 32, 0.76) 46%, rgba(5, 14, 32, 0.42) 100%),
        radial-gradient(760px 340px at 86% -20%, rgba(196, 19, 107, 0.26) 0%, rgba(196, 19, 107, 0) 62%),
        url(../img/qatar-technology.jpg);
    background-size: auto, auto, cover;
    /* pulled up so the Kingdom Centre crown and the warm sky are in frame
       rather than the dark streetscape underneath */
    background-position: center, center, center 30%;
    background-repeat: no-repeat;
}

.lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 35% 40%, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 80% at 35% 40%, #000 20%, transparent 80%);
}

.lp-hero .container {
    position: relative;
    z-index: 2;
}

/* Zoho supplies this badge as finished artwork on its own light plate, so it
   is placed as-is rather than wrapped in a chip of our own. */
.lp-partner-badge {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 22px;
    line-height: 0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.lp-partner-badge img {
    height: 52px;
    width: auto;
    display: block;
}

@media (max-width: 575px) {
    .lp-partner-badge img {
        height: 42px;
    }
}

.lp-hero h1 {
    color: var(--white-color);
    font-size: 42px;
    line-height: 55px;
    margin: 0 0 16px;
}

.lp-hero h1 em {
    font-style: normal;
    color: var(--primary-color4);
}

.lp-hero-lead {
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px;
    line-height: 29px;
    margin: 0 0 22px;
    max-width: 540px;
}

.lp-points {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.lp-points li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 9px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15.5px;
    line-height: 26px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.lp-points li::before {
    content: "\f26e";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color4);
    font-size: 17px;
}

.lp-hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.lp-hero-trust i {
    color: var(--primary-color4);
    margin-right: 6px;
}

@media (max-width: 1199px) {
    .lp-hero h1 {
        font-size: 38px;
        line-height: 51px;
    }
}

@media (max-width: 991px) {
    .lp-hero {
        padding: 40px 0 54px;
        background-position: center, center, center 55%;
    }

    .lp-hero h1 {
        font-size: 31px;
        line-height: 43px;
    }

    /* Most paid traffic is mobile, and stacking the full pitch above the form
       buried it ~1000px down. display:contents lifts the copy column's two
       halves into the row itself so the form can sit between them: headline
       (message match for the ad), then form, then the supporting detail. */
    .lp-hero-copy {
        display: contents;
    }

    .lp-hero-head,
    .lp-hero-detail {
        width: 100%;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        /* display:contents promotes these to children of .row, and Bootstrap's
           gy-* gutter offsets the row by -gutter-y expecting every column to
           add it back as padding-top. Without this they sit a full gutter high
           and slide under the sticky header. */
        padding-top: var(--bs-gutter-y);
    }

    .lp-hero-head {
        order: 1;
    }

    .lp-hero-form-col {
        order: 2;
    }

    .lp-hero-detail {
        order: 3;
    }

    .lp-hero-trust {
        padding-left: 0;
        margin-left: 0;
    }
}

/* --- form card ----------------------------------------------------------- */
.lp-form {
    scroll-margin-top: 76px;
    background-color: var(--white-color);
    border-radius: 16px;
    padding: 26px 28px 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34);
}

.lp-form h2 {
    font-size: 24px;
    line-height: 33px;
    margin: 0 0 5px;
}

.lp-form>p {
    font-size: 15px;
    line-height: 25px;
    color: var(--text-color);
    margin: 0 0 18px;
}

.lp-form .form-inner {
    margin-bottom: 12px;
}

/* Two fields per row. The card is ~526px wide on desktop, so each field gets
   ~223px - enough for the "+966 5X XXX XXXX" placeholder to show in full. */
.lp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}

/* From 992px the form sits in a col-lg-5, and Bootstrap's container is only
   1140px until it jumps to 1320px at 1400px. Below that jump the field lands
   near 190px and clips the "+966 5X XXX XXXX" placeholder, so this band runs
   one field per row. Measured, not guessed: 1400px gives 223px and fits. */
@media (min-width: 992px) and (max-width: 1399px) {
    .lp-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .lp-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lp-form .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
    margin: 2px 0 14px;
}

.lp-form .form-check-input {
    float: none;
    flex: 0 0 auto;
    margin: 4px 0 0;
}

.lp-form .form-check-label {
    margin: 0;
    font-size: 14px;
    line-height: 23px;
}

/* the template's textarea placeholder inherits a tight leading and the two
   wrapped lines run into each other */
.lp-form textarea,
.lp-form textarea::placeholder {
    line-height: 26px;
}

.lp-form button[type="submit"] {
    width: 100%;
    text-align: center;
}

.lp-form-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 21px;
    color: var(--text-color);
}

.lp-form-note i {
    color: var(--primary-color4);
    margin-right: 5px;
}

@media (max-width: 991px) {
    .lp-form {
        padding: 26px 22px 24px;
    }
}

/* --- Zoho application cards ----------------------------------------------
   Each app carries a one-line brief, so these are cards rather than the icon
   tiles they started as - a name alone does not tell a buyer what it is for. */
.lp-app-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 22px;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.lp-app-card:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 14px 34px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-4px);
}

/* These are 2.3:1 to 3.8:1 lockups, not square icons - constraining height and
   letting width follow keeps every one legible, and align-self shrinks the box
   to the artwork so they all start on the same left edge as the text below. */
.lp-app-lockup {
    display: block;
    height: auto;
    width: auto;
    max-height: 30px;
    max-width: 200px;
    margin-bottom: 14px;
    align-self: flex-start;
    object-fit: contain;
    object-position: left center;
}

.lp-app-card p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0;
}

@media (max-width: 575px) {
    .lp-app-card {
        padding: 20px 18px;
    }
}

/* --- numbered steps ------------------------------------------------------ */
.lp-step {
    height: 100%;
    padding: 30px 26px 28px;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    background-color: var(--white-color);
}

.lp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(var(--primary-color4-opc), 0.1);
    color: var(--primary-color4);
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 18px;
}

.lp-step h3 {
    font-size: 19px;
    line-height: 29px;
    font-weight: 600;
    margin: 0 0 8px;
}

.lp-step p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0;
}

.lp-step em {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-color4);
}

/* --- closing CTA band ---------------------------------------------------- */
.lp-cta {
    padding: 84px 0;
    background-color: #050e1f;
    background-image: linear-gradient(158deg, #07142c 0%, #0a1c38 55%, #050e20 100%);
}

.lp-cta h2 {
    color: var(--white-color);
    font-size: 40px;
    line-height: 52px;
    margin: 0 0 16px;
}

.lp-cta p {
    color: rgba(255, 255, 255, 0.76);
    font-size: 17px;
    line-height: 29px;
    margin: 0 0 30px;
}

.lp-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

@media (max-width: 991px) {
    .lp-cta {
        padding: 60px 0;
    }

    .lp-cta h2 {
        font-size: 29px;
        line-height: 41px;
    }
}

/* --- minimal footer ------------------------------------------------------ */
.lp-footer {
    background-color: #100c12;
    background-image: radial-gradient(700px 300px at 95% 0%, rgba(196, 19, 107, 0.28) 0%, rgba(196, 19, 107, 0) 62%);
    padding: 40px 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    line-height: 24px;
}

.lp-footer img {
    width: 160px;
    height: auto;
    margin-bottom: 14px;
}

.lp-footer a {
    color: rgba(255, 255, 255, 0.72);
}

.lp-footer a:hover {
    color: var(--white-color);
}

.lp-footer .lp-footer-legal {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.42);
}

@media (prefers-reduced-motion: reduce) {
    .lp-app-card:hover {
        transform: none;
    }
}

/* --- LP credentials band -------------------------------------------------
   Sits directly under the hero: the four things a buyer wants confirmed
   before they read anything else. */
.lp-creds {
    background-color: #f5f8ff;
    border-bottom: 1px solid var(--borders-color);
    padding: 34px 0;
}

.lp-cred {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
}

/* the template sets a font-size on bare <i>, so the glyph has to be sized on
   the element itself rather than inherited from the tile */
.lp-cred-icon i,
.lp-ind-icon i {
    font-size: inherit;
    line-height: 1;
    display: block;
}

.lp-cred-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 14px;
    background-color: var(--white-color);
    border: 1px solid var(--borders-color);
    color: var(--primary-color4);
    font-size: 23px;
    line-height: 1;
}

.lp-cred>div strong {
    display: block;
    font-family: var(--font-poppins);
    font-size: 21px;
    line-height: 30px;
    font-weight: 700;
    color: var(--title-color);
}

.lp-cred>div span {
    display: block;
    font-size: 14px;
    line-height: 23px;
    color: var(--text-color);
}

@media (max-width: 991px) {
    .lp-creds {
        padding: 28px 0;
    }

    .lp-cred-icon {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }

    .lp-cred>div strong {
        font-size: 18px;
        line-height: 27px;
    }
}

/* --- LP industries -------------------------------------------------------
   Icon cards rather than photographs: there is no per-sector photography in
   this project, and repeating the same three stock shots twelve times reads
   worse than a consistent icon set. */
.lp-ind {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    padding: 22px 22px 20px;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.lp-ind:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 14px 34px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-4px);
}

.lp-ind-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 12px;
    background-color: rgba(var(--primary-color4-opc), 0.1);
    color: var(--primary-color4);
    font-size: 20px;
    line-height: 1;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.lp-ind:hover .lp-ind-icon {
    background-color: var(--primary-color4);
    color: var(--white-color);
}

.lp-ind h3 {
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--title-color);
}

.lp-ind p {
    font-size: 14px;
    line-height: 24px;
    color: var(--text-color);
    margin: 0;
}

/* --- LP certificate marquee ---------------------------------------------
   Same seamless pattern as the client strip: the track holds the list twice,
   so animating to -50% lands on a frame identical to the start. */
.lp-certs {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
}

.lp-certs-track {
    display: flex;
    align-items: stretch;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    width: max-content;
    animation: lp-certs-scroll 70s linear infinite;
}

.lp-certs:hover .lp-certs-track {
    animation-play-state: paused;
}

.lp-certs-track li {
    flex: 0 0 auto;
    width: 216px;
}

.lp-cert-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.lp-certs-track li:hover .lp-cert-card {
    border-color: var(--primary-color4);
    box-shadow: 0 14px 34px rgba(var(--primary-color4-opc), 0.16);
}

.lp-cert-card img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--borders-color);
}

.lp-cert-meta {
    padding: 12px 14px 13px;
}

.lp-cert-meta strong {
    display: block;
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    color: var(--title-color);
}

.lp-cert-meta span {
    display: block;
    font-size: 12.5px;
    line-height: 19px;
    color: var(--primary-color4);
}

@keyframes lp-certs-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 767px) {
    .lp-certs-track {
        gap: 16px;
        animation-duration: 55s;
    }

    .lp-certs-track li {
        width: 172px;
    }

    .lp-certs {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-certs-track {
        animation: none;
    }

    .lp-certs {
        overflow-x: auto;
    }

    .lp-ind:hover {
        transform: none;
    }
}

/* --- LP Zoho services ---------------------------------------------------- */
.lp-svc {
    height: 100%;
    padding: 26px 24px 24px;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.lp-svc:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 14px 34px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-4px);
}

.lp-svc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    margin-bottom: 16px;
    background-color: rgba(var(--primary-color4-opc), 0.1);
    color: var(--primary-color4);
    font-size: 21px;
    line-height: 1;
}

.lp-svc-icon i {
    font-size: inherit;
    line-height: 1;
    display: block;
}

.lp-svc:hover .lp-svc-icon {
    background-color: var(--primary-color4);
    color: var(--white-color);
}

.lp-svc h3 {
    font-size: 19px;
    line-height: 28px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--title-color);
}

.lp-svc p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0;
}

/* --- LP industries: photo cards ------------------------------------------ */
.lp-ind-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.lp-ind-card:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 16px 38px rgba(var(--primary-color4-opc), 0.14);
    transform: translateY(-4px);
}

.lp-ind-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #eef2f9;
}

.lp-ind-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.lp-ind-card:hover .lp-ind-media img {
    transform: scale(1.05);
}

/* four across on xl, so the card and its type step down a little */
.lp-ind-body {
    padding: 16px 18px 18px;
}

.lp-ind-body h3 {
    font-size: 16.5px;
    line-height: 25px;
    font-weight: 600;
    margin: 0 0 5px;
    color: var(--title-color);
}

.lp-ind-body p {
    font-size: 13.5px;
    line-height: 23px;
    color: var(--text-color);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {

    .lp-svc:hover,
    .lp-ind-card:hover,
    .lp-ind-card:hover .lp-ind-media img {
        transform: none;
    }
}


/* --- Landing page: mobile and tablet -------------------------------------
   Measured at 320/360/390/414/768px. No horizontal overflow at any width;
   these are the touch-target and breathing-room fixes. */
@media (max-width: 991px) {

    /* 44px minimum touch targets (WCAG 2.5.8). The header trio were 30-36px. */
    .lp-header-inner {
        padding: 8px 0;
    }

    .lp-header-inner .lp-logo {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .lp-callnow {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
    }

    .lp-header-actions .primary-btn1 {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 10px 16px;
        font-size: 14px;
    }

    .lp-footer a {
        display: inline-block;
        padding: 8px 0;
    }

    /* the box itself stays 16px, but the row becomes a 44px target because the
       label is bound to it with for= */
    .lp-form .form-check {
        align-items: center;
        min-height: 44px;
        margin: 4px 0 12px;
    }

    .lp-form .form-check-input {
        width: 20px;
        height: 20px;
        margin: 0;
    }

    /* clear the sticky header, which the badge was tucking under */
    .lp-hero {
        padding-top: 34px;
    }

    .lp-form {
        scroll-margin-top: 68px;
    }

    /* section rhythm: 120px between every block is a lot of scrolling on a phone */
    .lp-hero,
    .page-feature-section.mb-120,
    .contact-faq-section.mb-120,
    .client-marquee-section.mb-120 {
        margin-bottom: 72px;
    }

    .lp-creds {
        padding: 24px 0;
    }

    .lp-cta {
        padding: 52px 0;
    }

    .lp-cta-btns .primary-btn1 {
        width: 100%;
        justify-content: center;
    }

    .lp-app-card,
    .lp-svc {
        padding: 20px 18px;
    }

    .lp-ind-body {
        padding: 16px 16px 18px;
    }
}


/* --- LP client logo grid -------------------------------------------------
   Same treatment as the homepage grid, but with a fixed column count per
   breakpoint so "three rows" means the same thing at every width. */
.lp-clients {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1199px) {
    .lp-clients {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .lp-clients {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .lp-clients {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lp-clients-more {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

.lp-clients-more .primary-btn1 i {
    margin-left: 8px;
    font-size: 13px;
}

.lp-clients-section {
    position: relative;
    /* the credentials band sits directly above with no margin of its own, so
       the heading was flush against it. Deliberately short of the 120px used
       between full sections - this reads as one block, not two. */
    padding-top: 70px;
}

@media (max-width: 991px) {
    .lp-clients-section {
        padding-top: 44px;
    }
}

@media (max-width: 991px) {
    .lp-clients-more {
        margin-top: 26px;
    }
}


/* --- Landing page header: small screens ----------------------------------
   Measured, not guessed. Logo + phone + button need 406px of the row at their
   smallest comfortable size, so the pieces drop out in that order:
     <=767px  phone shows the icon only (the full row measures 673px)
     <=429px  button takes a short label and the logo steps down again
   Below that everything still fits inside 320px with a 12px gutter. */
@media (max-width: 767px) {
    .lp-callnow span {
        display: none;
    }

    .lp-header-inner .lp-logo img {
        width: 128px;
    }

    .lp-header-actions {
        gap: 8px;
    }

    .lp-header-actions .primary-btn1 {
        padding: 10px 16px;
    }
}

@media (max-width: 429px) {
    .lp-header-inner .lp-logo img {
        width: 108px;
    }

    .lp-header-actions .primary-btn1 {
        padding: 10px 13px;
        font-size: 13px;
    }

    .lp-cta-long {
        display: none;
    }

    .lp-cta-short {
        display: inline;
    }
}


/* The homepage greys these out until hover. On a paid landing page the logos
   are the proof, so they stay in full colour and only lift on hover. */
.lp-clients .client-logo img {
    filter: none;
    opacity: 1;
}

.lp-clients .client-logo:hover img,
.lp-clients .client-logo:focus-within img {
    filter: none;
    opacity: 1;
    transform: scale(1.05);
}


/* --- Landing page: mobile polish ----------------------------------------- */

/* The template capitalises every word in an accordion header, which turns a
   written question into "How Long Does A Zoho Implementation Take?". These are
   sentences, so they should be sentence case. */
.contact-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
    text-transform: none;
}

/* Certificates: the strip was 172px per card on phones, which left the names
   clipped and the certificate itself unreadable. */
@media (max-width: 767px) {
    .lp-certs-track li {
        width: 210px;
    }

    .lp-certs {
        /* a narrower fade so the first card is not half-erased on a small screen */
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px,
                #000 calc(100% - 20px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 20px,
                #000 calc(100% - 20px), transparent 100%);
    }
}


/* ==========================================================================
   Scroll-triggered lead modal (Zoho landing page)
   Fires once per session at a scroll depth set by data-scroll-percent on the
   dialog. Two panels on desktop, one column on phones.
   ========================================================================== */
.lp-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 11, 24, 0.66);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.lp-modal.is-open {
    display: flex;
    opacity: 1;
}

.lp-modal-dialog {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    width: 100%;
    max-width: 1040px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
    transform: translateY(18px) scale(0.985);
    transition: transform 0.28s ease;
}

.lp-modal.is-open .lp-modal-dialog {
    transform: none;
}

.lp-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borders-color);
    border-radius: 50%;
    background: var(--white-color);
    color: var(--title-color);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lp-modal-close:hover,
.lp-modal-close:focus-visible {
    background: var(--title-color);
    color: var(--white-color);
}

/* --- left panel --------------------------------------------------------- */
.lp-modal-aside {
    padding: 38px 34px;
    background: linear-gradient(168deg, #eef3ff 0%, #f7f9ff 60%, #eef3ff 100%);
    overflow-y: auto;
}

.lp-modal-eyebrow {
    display: inline-block;
    padding: 8px 16px;
    margin-bottom: 18px;
    border-radius: 40px;
    background: var(--white-color);
    font-family: var(--font-poppins);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-color);
}

.lp-modal-aside h2 {
    font-size: 27px;
    line-height: 37px;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--title-color);
}

.lp-modal-facts {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.lp-modal-facts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    line-height: 23px;
    color: var(--paragraph-color);
}

.lp-modal-facts i {
    color: var(--primary-color4);
    font-size: 15px;
    line-height: 23px;
    flex: 0 0 auto;
}

.lp-modal-sub {
    font-family: var(--font-poppins);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-color);
    margin: 0 0 14px;
    padding-top: 18px;
    border-top: 1px solid var(--borders-color);
}

.lp-modal-logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.lp-modal-logos div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 8px;
    border-radius: 10px;
    background: var(--white-color);
    border: 1px solid var(--borders-color);
}

.lp-modal-logos img {
    max-width: 100%;
    max-height: 30px;
    width: auto;
    object-fit: contain;
}

/* --- right panel -------------------------------------------------------- */
.lp-modal-main {
    padding: 38px 34px;
    overflow-y: auto;
}

.lp-modal-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-right: 52px;
}

.lp-modal-badges img {
    height: 46px;
    width: auto;
    display: block;
    border: 1px solid var(--borders-color);
    border-radius: 10px;
}

.lp-modal-main h2 {
    font-size: 26px;
    line-height: 36px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--title-color);
}

.lp-modal-main>p {
    font-size: 15px;
    line-height: 25px;
    color: var(--text-color);
    margin: 0 0 20px;
}

.lp-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
}

.lp-modal .form-inner {
    margin-bottom: 12px;
}

.lp-modal .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
    margin: 2px 0 14px;
}

.lp-modal .form-check-input {
    float: none;
    flex: 0 0 auto;
    margin: 4px 0 0;
}

.lp-modal .form-check-label {
    margin: 0;
    font-size: 14px;
    line-height: 23px;
}

.lp-modal button[type="submit"] {
    width: 100%;
    text-align: center;
}

.lp-modal-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 21px;
    color: var(--text-color);
}

.lp-modal-note i {
    color: var(--primary-color4);
    margin-right: 5px;
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 991px) {
    .lp-modal {
        padding: 16px;
    }

    .lp-modal-dialog {
        grid-template-columns: minmax(0, 1fr);
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }

    /* the form is the point of the modal, so it leads on small screens */
    .lp-modal-main {
        order: 1;
        padding: 30px 22px 24px;
        overflow: visible;
    }

    .lp-modal-aside {
        order: 2;
        padding: 26px 22px 30px;
        overflow: visible;
    }

    .lp-modal-aside h2 {
        font-size: 22px;
        line-height: 31px;
    }

    .lp-modal-main h2 {
        font-size: 22px;
        line-height: 31px;
    }
}

@media (max-width: 575px) {
    .lp-modal {
        padding: 10px;
    }

    .lp-modal-dialog {
        border-radius: 16px;
        max-height: calc(100vh - 20px);
    }

    .lp-modal-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-modal-badges img {
        height: 38px;
    }

    .lp-modal-logos {
        gap: 6px;
    }

    .lp-modal-logos div {
        height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lp-modal,
    .lp-modal-dialog {
        transition: none;
    }
}

/* stops the page behind from scrolling while the modal is up */
body.lp-modal-open {
    overflow: hidden;
}

/* The template styles .form-inner input and textarea but never a <select>, so
   the modal's dropdown fell back to the browser default next to styled fields.
   Matched to the same box, with a drawn chevron since appearance is reset. */
.lp-modal .form-inner select,
.lp-form .form-inner select {
    width: 100%;
    height: 50px;
    padding: 10px 44px 10px 20px;
    background-color: var(--white-color);
    color: var(--title-color);
    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    transition: all 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 13px 8px;
}

.lp-modal .form-inner select:focus,
.lp-form .form-inner select:focus {
    border-color: var(--primary-color4);
    outline: none;
}

.lp-modal .form-inner select:invalid,
.lp-modal .form-inner select option[value=""] {
    color: var(--text-color);
}

/* Products with no Zoho lockup on disk (Zoho One) show the Zoho mark beside a
   visible heading instead, so the card still reads as a product. */
.lp-app-fallback {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.lp-app-fallback img {
    height: 22px;
    width: auto;
    flex: 0 0 auto;
}

.lp-app-fallback h3 {
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    margin: 0;
    color: var(--title-color);
}

/* --- Landing page: deliverables checklist -------------------------------- */
.lp-deliver {
    height: 100%;
    padding: 26px 24px 24px;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    background-color: #f7f9ff;
}

.lp-deliver h3 {
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--borders-color);
    color: var(--title-color);
}

.lp-deliver ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-deliver li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    font-size: 14.5px;
    line-height: 24px;
    color: var(--paragraph-color);
}

.lp-deliver li:last-child {
    margin-bottom: 0;
}

.lp-deliver li::before {
    content: "\f26e";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color4);
    font-size: 14px;
}

@media (max-width: 575px) {
    .lp-deliver {
        padding: 20px 18px;
    }
}

/* --- Landing page: industry feature blocks -------------------------------
   Richer than the plain photo card: image, sector, the problem it solves and
   the modules that actually get configured for it. */
.lp-indf {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.lp-indf:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 18px 44px rgba(var(--primary-color4-opc), 0.14);
    transform: translateY(-4px);
}

.lp-indf-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #eef2f9;
}

.lp-indf-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.lp-indf:hover .lp-indf-media img {
    transform: scale(1.05);
}

.lp-indf-tag {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 40px;
    background: rgba(6, 14, 30, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--font-poppins);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white-color);
    line-height: 1;
}

.lp-indf-tag i {
    font-size: 13px;
    line-height: 1;
    color: var(--primary-color4);
}

.lp-indf-body {
    padding: 24px 24px 22px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.lp-indf-body h3 {
    font-size: 20px;
    line-height: 29px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--title-color);
}

.lp-indf-body>p {
    font-size: 14.5px;
    line-height: 25px;
    color: var(--text-color);
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--borders-color);
}

.lp-indf-feats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-indf-feats li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 9px;
    font-size: 14px;
    line-height: 23px;
    color: var(--paragraph-color);
}

.lp-indf-feats li:last-child {
    margin-bottom: 0;
}

.lp-indf-feats li::before {
    content: "\f26e";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color4);
    font-size: 13px;
}

.lp-indf-feats strong {
    color: var(--title-color);
    font-weight: 600;
}

@media (max-width: 575px) {
    .lp-indf-body {
        padding: 20px 18px 20px;
    }

    .lp-indf-body h3 {
        font-size: 18px;
        line-height: 27px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lp-indf:hover,
    .lp-indf:hover .lp-indf-media img {
        transform: none;
    }
}

/* --- Landing page: single-sector feature block ---------------------------
   Used on the industry campaign pages, where one sector gets the full width
   instead of a grid of eight. */
.lp-sector {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--white-color);
}

.lp-sector-media {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    background-color: #eef2f9;
}

.lp-sector-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-sector-tag {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 40px;
    background: rgba(6, 14, 30, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--font-poppins);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white-color);
    line-height: 1;
}

.lp-sector-tag i {
    font-size: 14px;
    color: var(--primary-color4);
}

.lp-sector-body {
    padding: 34px 34px 32px;
}

.lp-sector-body>p {
    font-size: 16px;
    line-height: 28px;
    color: var(--paragraph-color);
    margin: 0 0 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borders-color);
}

.lp-sector-feats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-sector-feats li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    font-size: 14.5px;
    line-height: 24px;
    color: var(--paragraph-color);
}

.lp-sector-feats li::before {
    content: "\f26e";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color4);
    font-size: 14px;
}

.lp-sector-feats strong {
    color: var(--title-color);
    font-weight: 600;
}

@media (max-width: 991px) {
    .lp-sector {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-sector-media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .lp-sector-body {
        padding: 26px 22px 24px;
    }
}

@media (max-width: 575px) {
    .lp-sector-feats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Landing page: Zoho suite logo grid ----------------------------------
   Zoho ships wide lockups that already carry the product name, so these tiles
   size on height and let width follow. Used where the point is breadth. */
.lp-suite {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-suite li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.lp-suite li:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 12px 28px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-3px);
}

.lp-suite img {
    height: auto;
    width: auto;
    max-height: 30px;
    max-width: 100%;
    object-fit: contain;
}

.lp-suite-note {
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--borders-color);
    font-size: 14px;
    line-height: 25px;
    color: var(--text-color);
    max-width: 860px;
}

/* the product this page is about, shown at full size above the fold */
.lp-product-mark {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 18px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--white-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
    line-height: 0;
}

.lp-product-mark img {
    height: 34px;
    width: auto;
    display: block;
}

/* platform marks on the ERP page - four vendors, no Zoho lockups */
.lp-platforms {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-platforms li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 132px;
    padding: 22px 18px;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    background-color: var(--white-color);
    text-align: center;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.lp-platforms li:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 14px 32px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-3px);
}

.lp-platforms img {
    height: auto;
    width: auto;
    max-height: 34px;
    max-width: 150px;
    object-fit: contain;
}

.lp-platforms span {
    font-size: 13.5px;
    line-height: 22px;
    color: var(--text-color);
}

@media (max-width: 767px) {
    .lp-platforms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-suite {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    .lp-suite li {
        min-height: 64px;
        padding: 12px;
    }

    .lp-suite img {
        max-height: 24px;
    }

    .lp-product-mark img {
        height: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lp-suite li:hover,
    .lp-platforms li:hover {
        transform: none;
    }
}


/* Four industry blocks across (Zoho One): the card is ~306px, so the body and
   its feature list step down to stay readable rather than cramped. */
@media (min-width: 1200px) {
    .col-xl-3 .lp-indf-body {
        padding: 20px 20px 20px;
    }

    .col-xl-3 .lp-indf-body h3 {
        font-size: 18px;
        line-height: 27px;
    }

    .col-xl-3 .lp-indf-body>p {
        font-size: 13.5px;
        line-height: 23px;
        margin-bottom: 14px;
        padding-bottom: 14px;
    }

    .col-xl-3 .lp-indf-feats li {
        font-size: 13px;
        line-height: 21px;
        padding-left: 21px;
        margin-bottom: 8px;
    }

    .col-xl-3 .lp-indf-feats li::before {
        font-size: 12px;
    }
}

/* --- Site footer: mobile touch targets -----------------------------------
   The template's footer links sit at 23-30px tall, which is under the 44px
   touch minimum (WCAG 2.5.8) and awkward to hit on a phone. Padding on the
   anchor grows the target without moving the text or changing the layout. */
@media (max-width: 991px) {

    .footer-section .widget-list li a,
    .footer-section .menu-container .widget-list li a {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
    }

    /* padding alone left these at 26px, so the target is set explicitly.
       36px rather than 44px: these are secondary links and a full 44px box on
       each one visibly loosens the footer. Primary nav and CTAs are already 44. */
    .footer-section .footer-bottom a,
    .footer-section .footer-bottom li a,
    .footer-section .copyright-area a,
    .footer-section .contact-area-and-logo-wrapper .content a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }

    /* breadcrumb trail links sit at 15px */
    .breadcrumb-section .breadcrumb-list li a {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
    }

    .footer-section .social-area a,
    .footer-section .social-area li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }
}

/* Remaining small targets found in the mobile audit: the article author link,
   the sidebar phone number, and the footer logo link. */
@media (max-width: 991px) {

    .article-author a,
    .aside-card .aside-call,
    .footer-section .contact-area-and-logo-wrapper>a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }
}

/* --- Blog: solutions hub -------------------------------------------------
   Sits under the article grid so a reader who has finished a post has an
   obvious next step into the service pages rather than leaving. */
.blog-hub {
    background-color: #f5f8ff;
    border-top: 1px solid var(--borders-color);
    padding: 90px 0;
}

.blog-hub-group {
    margin-bottom: 44px;
}

.blog-hub-group:last-child {
    margin-bottom: 0;
}

.blog-hub-group h3 {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-poppins);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--primary-color4);
    margin: 0 0 20px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--borders-color);
}

.blog-hub-group h3 i {
    font-size: 16px;
    line-height: 1;
}

.hub-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px 22px 20px;
    border: 1px solid var(--borders-color);
    border-radius: 13px;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.hub-card:hover,
.hub-card:focus-visible {
    border-color: var(--primary-color4);
    box-shadow: 0 14px 34px rgba(var(--primary-color4-opc), 0.13);
    transform: translateY(-4px);
}

.hub-card h4 {
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    margin: 0 0 7px;
    color: var(--title-color);
}

.hub-card p {
    font-size: 14px;
    line-height: 24px;
    color: var(--text-color);
    margin: 0 0 14px;
}

.hub-card em {
    margin-top: auto;
    font-style: normal;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-color4);
}

.hub-card em::after {
    content: "\f138";
    font-family: "bootstrap-icons";
    font-size: 12px;
    margin-left: 6px;
    vertical-align: -1px;
}

@media (max-width: 991px) {
    .blog-hub {
        padding: 60px 0;
    }

    .blog-hub-group {
        margin-bottom: 34px;
    }
}

@media (max-width: 575px) {
    .hub-card {
        padding: 18px 18px 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-card:hover {
        transform: none;
    }
}

/* --- Jubail landing page ------------------------------------------------
   The Doha skyline is wrong on a Mesaieed industrial page, so this
   hero carries a coastal petrochemical scene instead. Same gradient strength,
   so the measured text contrast is unchanged. */
.lp-hero.is-jubail {
    background-image:
        linear-gradient(100deg, rgba(4, 11, 24, 0.90) 0%, rgba(5, 14, 32, 0.76) 46%, rgba(5, 14, 32, 0.42) 100%),
        radial-gradient(760px 340px at 86% -20%, rgba(196, 19, 107, 0.26) 0%, rgba(196, 19, 107, 0) 62%),
        url(../img/jubail-industrial.webp);
    background-position: center, center, center 55%;
}

/* --- coverage strip ------------------------------------------------------ */
.lp-coverage {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-coverage li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--borders-color);
    border-radius: 40px;
    background-color: var(--white-color);
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--title-color);
}

.lp-coverage i {
    color: var(--primary-color4);
    font-size: 14px;
    line-height: 1;
}

/* ==========================================================================
   Building materials trading ERP product page
   Uses the site's existing type, colour and card language. Only the pieces
   that did not already exist are added here.
   ========================================================================== */

/* --- headline numbers band ----------------------------------------------- */
.bmt-stats {
    background-color: #f5f8ff;
    border-block: 1px solid var(--borders-color);
    padding: 40px 0;
}

.bmt-stat {
    text-align: center;
    padding: 6px 4px;
}

.bmt-stat b {
    display: block;
    font-family: var(--font-poppins);
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    color: var(--primary-color4);
    letter-spacing: -0.02em;
}

.bmt-stat span {
    display: block;
    font-size: 13.5px;
    line-height: 21px;
    color: var(--text-color);
}

@media (max-width: 575px) {
    .bmt-stats {
        padding: 30px 0;
    }

    .bmt-stat b {
        font-size: 24px;
        line-height: 33px;
    }
}

/* --- the flow, requisition to payment ------------------------------------ */
.bmt-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: bmtflow;
}

.bmt-flow li {
    position: relative;
    padding: 20px 18px 18px;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.bmt-flow li:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 12px 28px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-3px);
}

.bmt-flow li::before {
    counter-increment: bmtflow;
    content: counter(bmtflow, decimal-leading-zero);
    display: block;
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--primary-color4);
    margin-bottom: 6px;
}

.bmt-flow strong {
    display: block;
    font-size: 16px;
    line-height: 25px;
    font-weight: 600;
    color: var(--title-color);
}

.bmt-flow em {
    display: block;
    font-style: normal;
    font-size: 13.5px;
    line-height: 22px;
    color: var(--text-color);
    margin-top: 3px;
}

@media (max-width: 1199px) {
    .bmt-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .bmt-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 419px) {
    .bmt-flow {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- interface preview, drawn rather than screenshotted ------------------ */
.bmt-ui {
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--white-color);
    box-shadow: 0 24px 60px rgba(6, 18, 40, 0.14);
}

.bmt-ui-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background-color: #f1f5f9;
    border-bottom: 1px solid var(--borders-color);
}

.bmt-ui-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cbd5e1;
    flex: 0 0 auto;
}

.bmt-ui-bar span {
    flex: 1;
    margin-left: 8px;
    height: 24px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border: 1px solid var(--borders-color);
    border-radius: 6px;
    background-color: var(--white-color);
    font-family: var(--font-poppins);
    font-size: 11.5px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
}

.bmt-ui-body {
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bmt-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.bmt-kpi {
    padding: 11px 12px;
    border: 1px solid var(--borders-color);
    border-radius: 10px;
    background-color: #f8fafc;
}

.bmt-kpi b {
    display: block;
    font-family: var(--font-poppins);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--title-color);
}

.bmt-kpi span {
    display: block;
    font-size: 11px;
    line-height: 17px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-color);
}

.bmt-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 104px;
    padding: 12px;
    border: 1px solid var(--borders-color);
    border-radius: 10px;
    background-color: #f8fafc;
}

.bmt-chart i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background-color: var(--primary-color4);
    opacity: 0.85;
}

.bmt-chart i:nth-child(even) {
    background-color: #9dbcfb;
}

.bmt-mini {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 13px;
}

.bmt-mini th {
    text-align: left;
    font-family: var(--font-poppins);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-color);
    padding: 8px 9px;
    border-bottom: 1px solid var(--borders-color);
    white-space: nowrap;
}

.bmt-mini td {
    padding: 8px 9px;
    border-bottom: 1px solid var(--borders-color);
    color: var(--title-color);
    white-space: nowrap;
}

.bmt-mini tr:last-child td {
    border-bottom: 0;
}

.bmt-mini .n {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bmt-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-family: var(--font-poppins);
    font-size: 11px;
    font-weight: 600;
}

.bmt-tag.ok {
    background-color: #dcfce7;
    color: #047857;
}

.bmt-tag.wait {
    background-color: #fef3c7;
    color: #a16207;
}

.bmt-tag.bad {
    background-color: #fee2e2;
    color: #b91c1c;
}

.bmt-tag.info {
    background-color: rgba(var(--primary-color4-opc), 0.12);
    color: var(--primary-color4);
}

.bmt-bins {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 5px;
    min-width: 380px;
}

.bmt-bins i {
    aspect-ratio: 1;
    border-radius: 3px;
    background-color: #dbeafe;
}

.bmt-bins i.f {
    background-color: var(--primary-color4);
}

.bmt-bins i.h {
    background-color: #9dbcfb;
}

.bmt-bins i.q {
    background-color: #fecaca;
}

.bmt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--text-color);
}

.bmt-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bmt-legend i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

@media (max-width: 575px) {
    .bmt-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- module accordion ---------------------------------------------------- */
.bmt-modules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.bmt-module {
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    background-color: var(--white-color);
    overflow: hidden;
}

.bmt-module[open] {
    border-color: var(--primary-color4);
    box-shadow: 0 12px 30px rgba(var(--primary-color4-opc), 0.1);
}

.bmt-module summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    min-height: 60px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-poppins);
    font-size: 17px;
    font-weight: 600;
    color: var(--title-color);
}

.bmt-module summary::-webkit-details-marker {
    display: none;
}

.bmt-module summary em {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--primary-color4);
    white-space: nowrap;
}

.bmt-module summary::after {
    content: "\f4fe";
    font-family: "bootstrap-icons";
    font-size: 15px;
    color: var(--primary-color4);
    flex: 0 0 auto;
    transition: transform 0.25s ease;
}

.bmt-module[open] summary::after {
    transform: rotate(180deg);
}

.bmt-module-body {
    padding: 0 20px 20px;
}

.bmt-module-body p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0;
}

.bmt-module-body ul {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.bmt-module-body li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    font-size: 14.5px;
    line-height: 24px;
    color: var(--paragraph-color);
}

.bmt-module-body li::before {
    content: "\f26e";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color4);
    font-size: 13px;
}

@media (max-width: 991px) {
    .bmt-modules {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- role tabs ----------------------------------------------------------- */
.bmt-roles-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.bmt-roles-nav button {
    min-height: 46px;
    padding: 11px 22px;
    border: 1px solid var(--borders-color);
    border-radius: 40px;
    background-color: var(--white-color);
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 500;
    color: var(--title-color);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bmt-roles-nav button:hover {
    border-color: var(--primary-color4);
    color: var(--primary-color4);
}

.bmt-roles-nav button[aria-selected="true"] {
    background-color: var(--primary-color4);
    border-color: var(--primary-color4);
    color: var(--white-color);
}

.bmt-role[hidden] {
    display: none;
}

.bmt-role .feature-card {
    height: auto;
}

@media (prefers-reduced-motion: reduce) {

    .bmt-flow li:hover,
    .bmt-module summary::after {
        transform: none;
        transition: none;
    }
}

/* feature rows and bullet lists on the trading ERP page */
.bmt-feature + .bmt-feature {
    margin-top: 70px;
    padding-top: 70px;
    border-top: 1px solid var(--borders-color);
}

.bmt-feature h3 {
    font-size: 27px;
    line-height: 38px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--title-color);
}

.bmt-feature .lead-copy {
    font-size: 17px;
    line-height: 30px;
    color: var(--title-color);
    font-weight: 500;
}

.bmt-points {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.bmt-points li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 25px;
    color: var(--paragraph-color);
}

.bmt-points li::before {
    content: "\f26e";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color4);
    font-size: 14px;
}

.bmt-points strong {
    color: var(--title-color);
    font-weight: 600;
}

.mb-30 {
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .bmt-feature + .bmt-feature {
        margin-top: 50px;
        padding-top: 50px;
    }

    .bmt-feature h3 {
        font-size: 23px;
        line-height: 33px;
    }
}

/* hero call-to-action pair on the trading ERP page */
.bmt-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.bmt-demo-note {
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 22px;
    color: var(--text-color);
}

@media (max-width: 575px) {
    .bmt-cta-row .primary-btn1 {
        width: 100%;
        justify-content: center;
    }
}

/* --- Everything included: grouped, detail visible -----------------------
   Eighteen identical collapsed rows hid the scope rather than showing it.
   Grouped by what the buyer is doing, with the screen list on the card. */
.bmt-mod-group + .bmt-mod-group {
    margin-top: 54px;
    padding-top: 46px;
    border-top: 1px solid var(--borders-color);
}

.bmt-mod-group-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 26px;
}

.bmt-mod-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 14px;
    background-color: rgba(var(--primary-color4-opc), 0.1);
    color: var(--primary-color4);
    font-size: 23px;
    line-height: 1;
}

.bmt-mod-group-icon i {
    font-size: inherit;
    line-height: 1;
    display: block;
}

.bmt-mod-group-head h3 {
    font-size: 23px;
    line-height: 33px;
    font-weight: 600;
    margin: 0 0 3px;
    color: var(--title-color);
}

.bmt-mod-group-head p {
    font-size: 15px;
    line-height: 25px;
    color: var(--text-color);
    margin: 0;
}

.bmt-mod {
    height: 100%;
    padding: 24px 24px 22px;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    background-color: var(--white-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.bmt-mod:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 14px 34px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-4px);
}

.bmt-mod-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--borders-color);
}

.bmt-mod-head h4 {
    font-family: var(--font-poppins);
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
    margin: 0;
    color: var(--title-color);
}

.bmt-mod-head span {
    flex: 0 0 auto;
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--primary-color4);
    background-color: rgba(var(--primary-color4-opc), 0.1);
    padding: 4px 11px;
    border-radius: 20px;
    white-space: nowrap;
}

.bmt-mod p {
    font-size: 14.5px;
    line-height: 25px;
    color: var(--text-color);
    margin: 0;
}

.bmt-mod-screens {
    list-style: none;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px dashed var(--borders-color);
}

.bmt-mod-screens li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 23px;
    color: var(--paragraph-color);
}

.bmt-mod-screens li:last-child {
    margin-bottom: 0;
}

.bmt-mod-screens li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-color4);
}

@media (max-width: 575px) {
    .bmt-mod {
        padding: 20px 18px;
    }

    .bmt-mod-group-head {
        gap: 12px;
    }

    .bmt-mod-group-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .bmt-mod-group-head h3 {
        font-size: 20px;
        line-height: 29px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bmt-mod:hover {
        transform: none;
    }
}

/* --- product screenshots -------------------------------------------------
   Real captures from the live demo. Framed lightly so they read as product
   rather than as decoration. */
.bmt-shot {
    margin: 0;
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--white-color);
    box-shadow: 0 24px 60px rgba(6, 18, 40, 0.14);
    line-height: 0;
}

.bmt-shot img {
    display: block;
    width: 100%;
    height: auto;
}


/* --- feature rows: image aligned to the copy ----------------------------
   The screenshot is 16:9 and short while the copy runs tall, so the columns
   are equal width and top aligned. The small offset drops the image to the
   heading's baseline rather than its box top, which reads as deliberate. */
@media (min-width: 992px) {
    .bmt-feature .bmt-shot {
        margin-top: 8px;
    }
}

@media (max-width: 991px) {
    .bmt-feature .bmt-shot {
        margin-top: 6px;
    }
}

/* --- Zoho suite grid with per-app descriptions ---------------------------
   Opt-in via .has-desc so the logo-only grid on the other Zoho landing pages
   is unaffected. Cards become a stacked logo + name + one-line summary, and
   the columns widen so the text has somewhere to go. */
.lp-suite.has-desc {
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 14px;
}

.lp-suite.has-desc li {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    min-height: 0;
    padding: 18px 18px 20px;
    gap: 4px;
}

.lp-suite.has-desc li img {
    height: 30px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 10px;
}

.lp-suite.has-desc .lp-app-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-color);
}

@media (max-width: 575px) {
    .lp-suite.has-desc {
        grid-template-columns: 1fr;
    }
}

/* --- Gallery marquee (single row, right-to-left, infinite) ---------------
   Same mechanism as the client logo strip: the track holds the photo set
   twice, so animating to -50% lands on a frame identical to the start and the
   loop never visibly restarts. Pure CSS, no slider library on the page. */
.lp-gallery {
    position: relative;
    overflow: hidden;
    padding: 4px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px,
            #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 80px,
            #000 calc(100% - 80px), transparent 100%);
}

/* The spacing is a margin on each item rather than `gap` on the flex row.
   With `gap`, the track is (n x width) + (n-1 x gap), so translateX(-50%)
   lands half a gap short of where the duplicated half begins and the loop
   jumps ~10px every cycle. Margin on every item makes the repeating unit
   uniform, so -50% is exactly one set and the loop is seamless. */
.lp-gallery-track {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    animation: lp-gallery-scroll 55s linear infinite;
}

.lp-gallery:hover .lp-gallery-track,
.lp-gallery:focus-within .lp-gallery-track {
    animation-play-state: paused;
}

.lp-gallery-track li {
    flex: 0 0 auto;
    width: 340px;
    margin-inline-end: 20px;
}

.lp-gallery-track picture {
    display: block;
    height: 100%;
}

/* The set mixes landscape and portrait originals, so a fixed box with
   object-fit keeps the row even instead of stair-stepping. */
.lp-gallery-track img {
    display: block;
    width: 340px;
    height: 240px;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    border: 1px solid var(--borders-color);
    background-color: var(--white-color);
}

@keyframes lp-gallery-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 767px) {
    .lp-gallery-track {
        animation-duration: 40s;
    }

    .lp-gallery-track li,
    .lp-gallery-track img {
        width: 260px;
    }

    .lp-gallery-track li {
        margin-inline-end: 14px;
    }

    .lp-gallery-track img {
        height: 185px;
    }
}

/* Respect a reduced-motion preference: stop the scroll and let the row be
   swiped instead, so the photos are still reachable. */
@media (prefers-reduced-motion: reduce) {
    .lp-gallery-track {
        animation: none;
        width: auto;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .lp-gallery-track li {
        scroll-snap-align: start;
    }
}

/* ==========================================================================
   Header: one more top-level item ("Platforms") was added in Sep 2026. Tighter
   link padding keeps the desktop menu on one line on inner pages.
   ========================================================================== */
@media (min-width: 992px) {
    header.style-1.ai-startup-header .main-menu ul.menu-list > li > a,
    header.style-1 .main-menu ul.menu-list > li > a,
    header.style-2.three .main-menu ul.menu-list > li > a,
    header.style-2 .main-menu ul.menu-list > li > a {
        padding-left: 13px;
        padding-right: 13px;
    }
    header.style-1 .main-menu .menu-list,
    header.style-2 .main-menu .menu-list {
        white-space: nowrap;
    }
}

/* --- enrichment blocks on legacy pages (tools/silo/enrich.py) --------------- */
.silo-enrich .section-title.two h2 { font-size: 36px; line-height: 46px; }
.silo-enrich-faq .section-title.two h2 { font-size: 36px; line-height: 46px; }
.enrich-prose p { font-size: 17px; line-height: 30px; color: var(--paragraph-color); margin: 0 0 16px; max-width: 70ch; }
.enrich-prose p:last-child { margin-bottom: 0; }
.enrich-prose a { color: var(--primary-color4); text-decoration: underline; text-underline-offset: 3px; }
.enrich-prose strong { color: var(--title-color); font-weight: 600; }
.enrich-aside { padding: 24px 22px 18px; background: #f5f8ff; border: 1px solid var(--borders-color); border-radius: 16px; }
.enrich-aside h3 { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-color4); margin: 0 0 14px; }
.enrich-aside ul { list-style: none; margin: 0; padding: 0; }
.enrich-aside li { margin: 0 0 10px; }
.enrich-aside a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: #fff; border: 1px solid var(--borders-color); border-radius: 12px; color: inherit; transition: border-color 0.2s, transform 0.2s; }
.enrich-aside a:hover { border-color: var(--primary-color4); transform: translateX(3px); }
.enrich-aside i { font-size: 18px; color: var(--primary-color4); line-height: 24px; flex: 0 0 auto; }
.enrich-aside strong { display: block; font-family: var(--font-poppins); font-size: 15px; font-weight: 600; color: var(--title-color); margin-bottom: 2px; }
.enrich-aside span { display: block; font-size: 14px; line-height: 22px; color: var(--paragraph-color); }
[dir="rtl"] .enrich-aside a:hover { transform: translateX(-3px); }
@media (max-width: 991px) { .silo-enrich .section-title.two h2, .silo-enrich-faq .section-title.two h2 { font-size: 30px; line-height: 40px; } }
@media (max-width: 575px) { .silo-enrich .section-title.two h2, .silo-enrich-faq .section-title.two h2 { font-size: 26px; line-height: 34px; } }

/* --- Services mega menu: columns sized to the panel, no image dependency ---
   The theme used `49% 42.5%` columns plus a 110px gap, which overflowed the
   panel at common widths, and the support card's background image is not
   shipped, leaving white text on light blue. */
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 41%);
    gap: 40px;
}
@media (max-width: 1399px) {
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
        gap: 28px;
    }
}
@media (max-width: 1199px) {
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
        gap: 20px;
    }
}
@media (max-width: 991px) {
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .service-wrap,
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .industry-wrap {
    min-width: 0;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .service-wrap .service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .service-wrap .service-list .single-service a {
    white-space: normal;
    min-width: 0;
    font-size: 16px;
    line-height: 22px;
    padding: 16px 16px;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .industry-wrap .support-area {
    background-color: #0b1b4d;
    background-image: linear-gradient(135deg, #0b1b4d 0%, #1d4ed8 100%);
    padding: 28px 28px 28px 32px;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .industry-wrap .support-area h4 {
    max-width: none;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .industry-wrap .support-area .support-team-area {
    flex-wrap: wrap;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .industry-wrap .support-area .support-team-area p {
    min-width: 0;
    flex: 1 1 200px;
}
[dir="rtl"] :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .industry-wrap {
    border-radius: 20px 0 0 20px;
}
@media (max-width: 991px) {
    [dir="rtl"] :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .industry-wrap {
        border-radius: 10px;
    }
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .industry-wrap .support-area h4,
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .industry-wrap .support-area h5,
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .industry-wrap .support-area .support-team-area p {
    white-space: normal !important;
    overflow-wrap: anywhere;
}
@media (min-width: 992px) and (max-width: 1199px) {
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu .menu-row .service-wrap .service-list .single-service a {
        flex-wrap: nowrap;
        font-size: 15px;
        line-height: 21px;
        padding: 14px 12px;
        gap: 10px;
    }
}

/* --- Industries mega menu (same shell as Services, three compact columns) --- */
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .service-wrap .service-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .service-wrap .service-list .single-service a {
    font-size: 14px;
    line-height: 20px;
    padding: 11px 12px;
    gap: 10px;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .service-wrap .service-list .single-service a i {
    font-size: 19px;
    line-height: 1;
    color: var(--primary-color4);
    min-width: 22px;
    text-align: center;
    transition: 0.3s;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .service-wrap .service-list .single-service a:hover i {
    color: var(--white-color);
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .industry-wrap .industry-list {
    margin-bottom: 30px;
}
@media (max-width: 1399px) {
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 36%);
    }
}
@media (max-width: 1199px) {
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .service-wrap .service-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 991px) {
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row {
        grid-template-columns: 1fr;
    }
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .service-wrap .service-list {
        grid-template-columns: 1fr;
    }
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .service-wrap .service-list .single-service a i {
        display: none;
    }
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .industry-wrap .mega-menu-title {
        display: block;
        font-size: 16px;
        margin: 10px 0 12px;
    }
}

/* --- Product mega menu promo card: let the copy wrap inside the card ------- */
.mega-menu2 .menu-row .industry-wrap .product-promo,
.mega-menu2 .menu-row .industry-wrap .product-promo-content {
    min-width: 0;
    max-width: 100%;
}
.mega-menu2 .menu-row .industry-wrap .product-promo-content h4,
.mega-menu2 .menu-row .industry-wrap .product-promo-content p,
.mega-menu2 .menu-row .industry-wrap .product-promo-content span {
    white-space: normal !important;
    overflow-wrap: anywhere;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 37%);
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .industry-wrap {
    padding: 40px 36px;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .industry-wrap .industry-list {
    gap: 10px;
    margin-bottom: 24px;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .industry-wrap .industry-list li a {
    padding: 8px 14px;
    font-size: 13px;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .industry-wrap .support-area {
    padding: 22px 24px;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .industry-wrap .support-area h4 {
    font-size: 19px;
    line-height: 26px;
    margin-bottom: 14px;
}
:is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega .menu-row .industry-wrap .support-area .support-team-area {
    margin-bottom: 18px;
}
@media (min-width: 1200px) {
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu.industries-mega,
    :is(header.style-1, header.style-2) .main-menu>ul>li .mega-menu {
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }
}


/* ==========================================================================
   Qatar ERP homepage additions
   ========================================================================== */

/* --- Qatar National Vision 2030 lockup ------------------------------------
   Replaces the Saudi Vision 2030 SVG in the partner-section bar with a
   typographic badge, so no third-party logo file is needed. */
.qnv-badge {
    flex: 0 0 auto;
    width: 132px;
    min-height: 96px;
    padding: 16px 18px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #121618 0%, #2b0f1f 100%);
    color: var(--white-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.qnv-badge::before {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ea5a9c 0%, #C4136B 42%, #5f0a2c 100%);
    box-shadow: 0 10px 30px rgba(196, 19, 107, 0.45);
}

.qnv-badge-text,
.qnv-badge-year {
    position: relative;
    z-index: 1;
    font-family: var(--font-poppins);
}

.qnv-badge-text {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.4;
    opacity: 0.82;
}

.qnv-badge-year {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

@media (max-width: 767px) {
    .qnv-badge {
        width: 120px;
        min-height: 88px;
    }

    .qnv-badge-year {
        font-size: 32px;
    }
}

/* --- Coverage grid (ERP across Qatar) -------------------------------------- */
.coverage-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.coverage-card {
    padding: 26px 24px;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    background-color: var(--white-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.coverage-card:hover {
    border-color: var(--primary-color4);
    box-shadow: 0 16px 40px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-5px);
}

.coverage-card i {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: rgba(var(--primary-color4-opc), 0.1);
    color: var(--primary-color4);
    font-size: 18px;
    line-height: 1;
    margin-bottom: 16px;
}

.coverage-card h3 {
    font-size: 19px;
    line-height: 28px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--title-color);
}

.coverage-card p {
    font-size: 14px;
    line-height: 24px;
    color: var(--text-color);
    margin: 0;
}

.coverage-cta {
    margin-top: 40px;
    padding: 30px 36px;
    border-radius: 14px;
    border: 1px solid rgba(var(--primary-color4-opc), 0.25);
    background:
        radial-gradient(520px 200px at 100% 0%, rgba(var(--primary-color4-opc), 0.16) 0%, rgba(var(--primary-color4-opc), 0) 70%),
        var(--white-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.coverage-cta-text h3 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--title-color);
}

.coverage-cta-text p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0;
    max-width: 640px;
}

.coverage-cta .primary-btn1 {
    flex: 0 0 auto;
}

@media (max-width: 1199px) {
    .coverage-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .coverage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .coverage-cta {
        padding: 26px 24px;
    }
}

@media (max-width: 575px) {
    .coverage-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Qatar ERP homepage layout v2
   ========================================================================== */

/* section heading accent: the template's red->blue gradient becomes magenta */
.section-title.two h2 span,
.section-title.four h2 span {
    background: linear-gradient(270deg, #E0448A 0%, #8F1345 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.qatar-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    flex-wrap: wrap;
}

.qatar-title-row .section-title {
    margin-bottom: 0;
    flex: 1 1 480px;
    width: auto;
    max-width: 760px;
}

.qatar-title-row>.primary-btn1 {
    flex: 0 0 auto;
    margin-bottom: 10px;
}

/* --- Hero ------------------------------------------------------------------ */
.home6-banner-section .banner-content.qatar-hero {
    align-items: flex-end;
    gap: 40px;
    /* content sits a little lower in the banner than the template default */
    padding-bottom: 96px;
}

@media (max-width: 1699px) {
    .home6-banner-section .banner-content.qatar-hero {
        padding-bottom: 104px;
    }
}

@media (max-width: 1399px) {
    .home6-banner-section .banner-content.qatar-hero {
        padding-bottom: 86px;
    }
}

@media (max-width: 991px) {
    .home6-banner-section .banner-content.qatar-hero {
        padding-bottom: 92px;
    }
}

@media (max-width: 576px) {
    .home6-banner-section .banner-content.qatar-hero {
        padding-bottom: 72px;
    }
}

.qatar-hero-main {
    max-width: 780px;
    width: 100%;
}

.qatar-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px 9px 13px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--white-color);
    font-family: var(--font-poppins);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: 24px;
}

.qatar-hero-eyebrow i {
    color: #FF5FA8;
    font-size: 15px;
}

.home6-banner-section .banner-content .qatar-hero-main h1 {
    max-width: 780px;
}

.qatar-hero-main p {
    color: rgba(255, 255, 255, 0.74);
    font-family: var(--font-poppins);
    font-size: 19px;
    line-height: 31px;
    max-width: 580px;
    margin: 22px 0 32px;
}

.qatar-hero-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
}

.primary-btn1.qatar-hero-ghost {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.primary-btn1.qatar-hero-ghost span {
    background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
    color: var(--white-color);
}

.primary-btn1.qatar-hero-ghost span::after {
    color: var(--white-color);
}

.primary-btn1.qatar-hero-ghost span svg {
    fill: none;
    stroke: var(--white-color);
}

.primary-btn1.qatar-hero-ghost:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.12);
}

.qatar-hero-aside {
    flex: 0 0 auto;
    width: 100%;
    max-width: 400px;
}

.qatar-hero-facts {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.qatar-hero-facts li {
    padding: 18px 20px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.qatar-hero-facts strong {
    display: block;
    color: var(--white-color);
    font-family: var(--font-montserrat);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 5px;
}

.qatar-hero-facts span {
    display: block;
    color: rgba(255, 255, 255, 0.66);
    font-family: var(--font-poppins);
    font-size: 13px;
    line-height: 20px;
}

.qatar-hero-platforms {
    list-style: none;
    margin: 0;
    padding: 0 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}

.qatar-hero-platforms li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-poppins);
    font-size: 13px;
    font-weight: 500;
}

.qatar-hero-platforms li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color4);
    box-shadow: 0 0 0 3px rgba(196, 19, 107, 0.25);
}

@media (max-width: 1399px) {
    .qatar-hero-aside {
        max-width: 340px;
    }

    .qatar-hero-facts strong {
        font-size: 22px;
    }

    .qatar-hero-main p {
        font-size: 17px;
        line-height: 28px;
        margin: 18px 0 26px;
    }
}

@media (max-width: 991px) {
    .home6-banner-section .banner-content.qatar-hero {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 26px;
    }

    .qatar-hero-aside {
        max-width: 100%;
    }

    .qatar-hero-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .qatar-hero-aside {
        display: none;
    }

    .qatar-hero-eyebrow {
        font-size: 12px;
        padding: 8px 13px 8px 11px;
        margin-bottom: 18px;
    }

    .qatar-hero-main p {
        font-size: 16px;
        line-height: 27px;
    }
}

/* --- Platform cards ---------------------------------------------------------- */
.platform-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.platform-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 28px 28px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background-color: var(--white-color);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.platform-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color4) 0%, #E0448A 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.platform-card:hover,
.platform-card:focus-visible {
    border-color: var(--primary-color4);
    box-shadow: 0 18px 44px rgba(var(--primary-color4-opc), 0.14);
    transform: translateY(-6px);
}

.platform-card:hover::before,
.platform-card:focus-visible::before {
    opacity: 1;
}

.platform-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--icon-bg, #F4F5F8);
    margin-bottom: 22px;
}

.platform-card-icon svg {
    width: 30px;
    height: 30px;
}

.platform-card-icon i {
    font-size: 26px;
    line-height: 1;
    color: var(--primary-color4);
}

.platform-card h3 {
    font-size: 21px;
    line-height: 30px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--title-color);
}

.platform-card p {
    font-size: 15px;
    line-height: 25px;
    color: var(--text-color);
    margin: 0 0 18px;
}

.platform-tags {
    list-style: none;
    margin: auto 0 20px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.platform-tags li {
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 100px;
    background-color: rgba(var(--primary-color4-opc), 0.08);
    color: var(--primary-color4-deep);
}

.platform-card em {
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color4);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.platform-card em i {
    transition: transform 0.3s ease;
}

.platform-card:hover em i {
    transform: translateX(4px);
}

.platform-services .link-card {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.platform-services .link-card h3 {
    font-size: 17px;
    line-height: 26px;
    margin: 0;
}

.platform-services .link-card em {
    margin: 0;
    flex: 0 0 auto;
}

@media (max-width: 1199px) {
    .platform-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .platform-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* --- About: value cards (replace the placeholder KPI circles) ------------- */
.home6-about-section .section-title {
    margin-bottom: 44px;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.value-card {
    padding: 34px 30px 32px;
    border-radius: 16px;
    background-color: #F6F7FA;
    border: 1px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.value-card:hover {
    background-color: var(--white-color);
    border-color: var(--primary-color4);
    box-shadow: 0 18px 44px rgba(var(--primary-color4-opc), 0.12);
    transform: translateY(-5px);
}

.value-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--primary-color4-opc), 0.1);
    color: var(--primary-color4);
    font-size: 23px;
    line-height: 1;
    margin-bottom: 22px;
}

.value-card h3 {
    font-size: 21px;
    line-height: 30px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--title-color);
}

.value-card p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0;
}

@media (max-width: 991px) {
    .value-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .value-card {
        padding: 28px 24px;
    }
}

/* --- Process steps ------------------------------------------------------------ */
.qatar-process-section {
    padding-top: 110px;
}

.qatar-process-intro {
    font-size: 17px;
    line-height: 29px;
    color: var(--text-color);
    margin: 0;
    max-width: 480px;
}

.process-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--white-color);
}

.process-steps li {
    padding: 36px 30px 34px;
    border-left: 1px solid var(--borders-color);
    transition: background-color 0.3s ease;
}

.process-steps li:first-child {
    border-left: 0;
}

.process-steps li:hover {
    background-color: rgba(var(--primary-color4-opc), 0.04);
}

.process-steps .step-no {
    display: inline-block;
    font-family: var(--font-montserrat);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--primary-color4);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color4);
    margin-bottom: 20px;
}

.process-steps h3 {
    font-size: 21px;
    line-height: 30px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--title-color);
}

.process-steps p {
    font-size: 15px;
    line-height: 26px;
    color: var(--text-color);
    margin: 0;
}

@media (max-width: 1199px) {
    .qatar-process-section {
        padding-top: 90px;
    }
}

@media (max-width: 991px) {
    .process-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-steps li {
        padding: 28px 24px;
    }

    .process-steps li:nth-child(odd) {
        border-left: 0;
    }

    .process-steps li:nth-child(n+3) {
        border-top: 1px solid var(--borders-color);
    }
}

@media (max-width: 575px) {
    .qatar-process-section {
        padding-top: 70px;
    }

    .process-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .process-steps li {
        border-left: 0;
    }

    .process-steps li:nth-child(n+2) {
        border-top: 1px solid var(--borders-color);
    }
}

/* --- Module showcase (home6-service-section): photo treatment + caption tag --- */
.home6-service-section .service-wrapper .service-img ul li .single-img {
    border-radius: 20px;
    overflow: hidden;
}

.home6-service-section .service-wrapper .service-img ul li .single-img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(10, 8, 12, 0) 45%, rgba(10, 8, 12, 0.45) 100%);
    pointer-events: none;
}

.home6-service-section .service-wrapper .service-img ul li .service-content {
    border-color: rgba(196, 19, 107, 0.16);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 18px 40px rgba(18, 22, 24, 0.14);
}

.home6-service-section .service-wrapper .service-img ul li .service-content .module-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 11px;
    border-radius: 100px;
    background-color: rgba(var(--primary-color4-opc), 0.1);
    color: var(--primary-color4);
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.home6-service-section .service-wrapper .service-img ul li .service-content p {
    text-align: left;
    font-size: 16px;
    line-height: 27px;
}


/* --- RTL corrections for the homepage v2 components ------------------------ */
[dir="rtl"] .process-steps li {
    border-left: 0;
    border-right: 1px solid var(--borders-color);
}

[dir="rtl"] .process-steps li:first-child {
    border-right: 0;
}

[dir="rtl"] .platform-card em i {
    transform: scaleX(-1);
}

[dir="rtl"] .platform-card:hover em i {
    transform: scaleX(-1) translateX(-4px);
}

[dir="rtl"] .home6-service-section .service-wrapper .service-img ul li .service-content p {
    text-align: right;
}

[dir="rtl"] .qatar-hero-eyebrow,
[dir="rtl"] .qatar-hero-platforms li {
    flex-direction: row-reverse;
}

@media (max-width: 991px) {
    [dir="rtl"] .process-steps li:nth-child(odd) {
        border-right: 0;
    }

    [dir="rtl"] .process-steps li:nth-child(even) {
        border-right: 1px solid var(--borders-color);
    }
}

@media (max-width: 575px) {
    [dir="rtl"] .process-steps li {
        border-right: 0;
    }
}

/* --- Hero: fluid height on tablet/phone -----------------------------------
   The template gives the banner a fixed height and bottom-aligns an
   absolutely positioned content block, so once the stacked mobile content is
   taller than the banner it climbs up under the header. Below 992px the
   banner grows with its content and the video becomes a background layer. */
@media (max-width: 991px) {
    .home6-banner-section {
        height: auto;
        min-height: 620px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .home6-banner-section video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .home6-banner-section .banner-content.qatar-hero {
        position: relative;
        top: auto;
        bottom: auto;
        height: auto;
        min-height: 620px;
        padding: 140px 20px 64px;
        z-index: 2;
    }

    .qatar-hero-eyebrow {
        white-space: normal;
        align-items: flex-start;
        line-height: 1.45;
        max-width: 100%;
    }

    .qatar-hero-eyebrow i {
        margin-top: 2px;
    }
}

@media (max-width: 767px) {
    .home6-banner-section,
    .home6-banner-section .banner-content.qatar-hero {
        min-height: 560px;
    }

    .home6-banner-section .banner-content.qatar-hero {
        padding: 124px 16px 56px;
    }
}

@media (max-width: 576px) {
    .home6-banner-section .banner-content.qatar-hero {
        padding: 112px 16px 48px;
    }

    .qatar-hero-btns {
        width: 100%;
    }

    .qatar-hero-btns .primary-btn1 {
        width: 100%;
        text-align: center;
    }
}

/* --- Mega menus on the brand palette ---------------------------------------
   The template's Services / Industries panels used a light-blue side column
   and cyan avatar rings; both now use the magenta family. */
header.style-1 .main-menu>ul>li .mega-menu .menu-row .industry-wrap {
    background-color: #FBE9F2;
}

header.style-1 .main-menu>ul>li .mega-menu .menu-row .industry-wrap .support-area .support-team-area .img-grp li img {
    border-color: var(--primary-color4);
}

header.style-1 .main-menu>ul>li .mega-menu .menu-row .service-wrap .maintenance-service-area {
    background-color: rgba(var(--primary-color4-opc), 0.06);
}

header.style-1 .main-menu>ul>li .mega-menu .menu-row .service-wrap .maintenance-service-area:hover {
    background-color: rgba(var(--primary-color4-opc), 0.12);
}

header.style-1 .main-menu>ul>li .mega-menu,
header.style-1 .main-menu>ul>li .mega-menu2 {
    border-color: rgba(var(--primary-color4-opc), 0.18);
}

header.style-1 .main-menu>ul>li .mega-menu2 .menu-row .product-wrapper .product-wrap .single-menu::after {
    background-color: rgba(var(--primary-color4-opc), 0.18);
}

header.style-1 .main-menu>ul>li .mega-menu .menu-row .mega-menu-title::after,
header.style-1 .main-menu>ul>li .mega-menu2 .menu-row .mega-menu-title::after {
    background-color: var(--primary-color4);
}

/* support card inside the Services / Industries mega menu: template navy -> brand dark */
header.style-1 .main-menu>ul>li .mega-menu .menu-row .industry-wrap .support-area {
    background:
        radial-gradient(260px 160px at 100% 0%, rgba(196, 19, 107, 0.55) 0%, rgba(196, 19, 107, 0) 70%),
        linear-gradient(135deg, #121618 0%, #2b0f1f 100%);
}

header.style-1 .main-menu>ul>li .mega-menu .menu-row .industry-wrap .support-area .primary-btn2 span {
    background-color: var(--primary-color4);
}

/* --- Footer: ERP across Qatar link row ------------------------------------ */
.footer-locations {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 26px 0 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 22px;
}

.footer-locations>span {
    font-family: var(--font-poppins);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.footer-locations ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.footer-locations li a {
    font-family: var(--font-poppins);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.3s ease;
}

.footer-locations li a:hover {
    color: #FF5FA8;
}

[dir="rtl"] .footer-locations {
    text-align: right;
}

/* --- "Built for Qatar" context block on service pages ---------------------- */
.qatar-context-section .section-title.two span.black {
    display: inline-block;
    margin-bottom: 14px;
}

.qatar-context-copy p {
    font-size: 16px;
    line-height: 28px;
    color: var(--text-color);
    margin: 0 0 16px;
}

.qatar-context-copy p:last-child {
    margin-bottom: 0;
}

.qatar-related-title {
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    color: var(--title-color);
    margin: 56px 0 24px;
    padding-top: 40px;
    border-top: 1px solid var(--borders-color);
}

.qatar-context-section .link-card h3 {
    font-size: 17px;
    line-height: 26px;
}

@media (max-width: 991px) {
    .qatar-related-title {
        margin-top: 40px;
        padding-top: 30px;
    }
}

/* ==========================================================================
   Footer on the brand palette
   The template footer was navy with an orange title underline; it now uses the
   logo's charcoal with a magenta glow, magenta accents and softer dividers.
   ========================================================================== */
.footer-section.style-2 {
    background-image:
        radial-gradient(900px 420px at 92% 0%, rgba(196, 19, 107, 0.34) 0%, rgba(196, 19, 107, 0) 62%),
        radial-gradient(620px 320px at 0% 100%, rgba(196, 19, 107, 0.16) 0%, rgba(196, 19, 107, 0) 60%),
        url(../img/home2/footer-bg-img.png),
        linear-gradient(180deg, #100c12 0%, #17101a 100%);
    background-size: auto, auto, cover, auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

.footer-section.style-2 .contact-area-and-logo-wrapper {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.footer-section.style-2 .contact-area-and-logo-wrapper .contact-area-and-logo li .single-contact .icon svg {
    fill: var(--primary-color4);
}

.footer-section.style-2 .contact-area-and-logo-wrapper .contact-area-and-logo li .single-contact .content span {
    color: #FF8AC2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 12px;
}

.footer-section.style-2 .contact-area-and-logo-wrapper .contact-area-and-logo li .single-contact .content a {
    color: rgba(255, 255, 255, 0.86);
}

.footer-section.style-2 .contact-area-and-logo-wrapper .contact-area-and-logo li .single-contact .content a:hover {
    color: #FF5FA8;
}

.footer-section.style-2 .footer-menu .footer-widget .widget-title h5::after {
    background: linear-gradient(90deg, #E0448A 0%, rgba(224, 68, 138, 0) 100%);
}

.footer-section.style-2 .footer-menu .footer-widget .menu-list li a:hover,
.footer-section.style-2 .footer-menu .footer-widget ul li a:hover {
    color: #FF5FA8;
}

.footer-section.style-2 .footer-menu .text-and-rating-area .rating-area-wrap>li::before {
    background-color: rgba(255, 255, 255, 0.12);
}

.footer-section.style-2 .footer-menu .text-and-rating-area .social-area .social-list li a {
    border-color: rgba(255, 255, 255, 0.14);
}

.footer-section.style-2 .footer-menu .text-and-rating-area .social-area .social-list li a:hover {
    background-color: var(--primary-color4);
    border-color: var(--primary-color4);
}

.footer-section.style-2 .footer-menu .text-and-rating-area .social-area .social-list li a:hover i {
    color: var(--white-color);
}

.footer-section.style-2 .footer-bottom-wrap {
    border-top-color: rgba(255, 255, 255, 0.08);
    background-color: rgba(0, 0, 0, 0.22);
}

.footer-section.style-2 .footer-bottom-wrap .footer-bottom .copyright-area p a:hover,
.footer-section.style-2 .footer-bottom-wrap .footer-bottom ul li a:hover {
    color: #FF5FA8;
}

.footer-locations {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.footer-locations>span {
    color: #FF8AC2;
}

/* --- Partner badge: transparent artwork, no card box ----------------------- */
.lp-partner-badge {
    box-shadow: none;
    border-radius: 0;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

/* --- Scroll progress ring on the brand magenta (was template blue) --------- */
#scroll-percentage {
    --progress-fill: #C4136B;
    --progress-bg: rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 24px rgba(196, 19, 107, 0.35);
}

#scroll-percentage::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #121016;
    z-index: 0;
}

#scroll-percentage #scroll-percentage-value,
#scroll-percentage .arrow {
    z-index: 1;
}

#scroll-percentage .arrow {
    fill: #FF5FA8;
}

#scroll-percentage:hover {
    transform: scale(1.06);
}


/* article sidebar CTA card on the brand charcoal (was template navy) */
.aside-card.is-dark {
    background-image:
        radial-gradient(360px 200px at 100% 0%, rgba(196, 19, 107, 0.45) 0%, rgba(196, 19, 107, 0) 70%),
        linear-gradient(135deg, #121016 0%, #2b0f1f 100%);
    background-color: #121016;
}