/* ════════════════════════════════════════════════════════════════════════════
   Scanteya.Module.Landing — single global module stylesheet (loaded via <link>
   in Index.razor at _content/Scanteya.Module.Landing.Client.Oqtane/css/).

   NOTE ON SCOPED CSS: this was first split into scoped *.razor.css (CSS isolation),
   but this Oqtane WASM host does not load the aggregated scoped-CSS bundle
   ({App}.styles.css), so component styles never applied (header/hero/footer etc.
   rendered unstyled). All styling therefore lives here in one <link>ed sheet.
   The selectors are component-unique, so a single global sheet is functionally
   equivalent. Sections: theme/WPBakery overrides + shared utilities first, then
   the per-component blocks (home chrome, projects, single-project, contact, about).
   ════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════ MODULE ROOT RESETS ══════════════════ */
/* Kill the phantom horizontal scroll on mobile (sideways pan + white gutter on
   the right). The7's main.min.css relies on `body{overflow-x:hidden}` to hide the
   overflow its full-width / decorative layout creates, but in this Oqtane host the
   scroll container isn't, so that rule never clips. We clip it here instead.
   Use overflow-x:CLIP (not hidden): with `hidden` the other axis computes to `auto`,
   creating a scroll container that would break our sticky header; with `clip` +
   `overflow-y:visible` neither value is recomputed, so the sticky header still works
   and no scrollbar/scroll container is created. */
html { overflow-x: clip; }
.sc-module-root {
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
}

.sc-module-root {
    font-family: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
    line-height: 26px;
    color: #8b8d94;
    width: 100%;
}
.sc-module-root *, .sc-module-root *::before, .sc-module-root *::after {
    box-sizing: border-box;
}
.sc-module-root a { text-decoration: none; }

/* ═══════════════════════════════════════ WPBakery LAYOUT FIX ════════════════ */

/* Clearfix for float-based rows */
.sc-module-root .vc_row-fluid::after,
.sc-module-root .vc_inner::after { content: ""; display: table; clear: both; }

/* Flex rows (WPBakery adds vc_row-flex via JS; we replicate it in CSS) */
.sc-module-root .vc_row-flex { display: flex !important; flex-wrap: wrap; align-items: stretch; }
/* Vertically centre columns in rows flagged "content-middle" (e.g. text beside an image) */
.sc-module-root .vc_row-o-content-middle { align-items: center; }

/* ── Mobile-first grid: default = stacked ── */
.sc-module-root .wpb_column {
    width: 100%;
    float: none;
    min-height: 1px;
    margin-left: 0;
}

/* ── Small (≥ 768px): activate the sm- column widths ── */
@media (min-width: 768px) {
    .sc-module-root .wpb_column         { float: left; }
    .sc-module-root .vc_col-sm-12       { width: 100%; }
    .sc-module-root .vc_col-sm-10       { width: 83.3333%; }
    .sc-module-root .vc_col-sm-8        { width: 66.6667%; }
    .sc-module-root .vc_col-sm-6        { width: 50%; }
    .sc-module-root .vc_col-sm-4        { width: 33.3333%; }
    .sc-module-root .vc_col-sm-offset-1 { margin-left: 8.3333%; }
}

/* ── Medium (768–991px): md- overrides ── */
@media (min-width: 768px) and (max-width: 991px) {
    .sc-module-root .vc_col-md-10       { width: 83.3333%; }
    .sc-module-root .vc_col-md-offset-1 { margin-left: 8.3333%; }
}

/* ── Large (≥ 992px): lg- overrides ── */
@media (min-width: 992px) {
    .sc-module-root .vc_col-lg-8        { width: 66.6667%; }
    .sc-module-root .vc_col-lg-10       { width: 83.3333%; }
    .sc-module-root .vc_col-lg-6        { width: 50%; }
    .sc-module-root .vc_col-lg-offset-1 { margin-left: 8.3333%; }
    .sc-module-root .vc_col-lg-offset-2 { margin-left: 16.6667%; }
    .sc-module-root .vc_col-lg-offset-3 { margin-left: 25%; }
}

.sc-module-root .vc_column-inner,
.sc-module-root .wpb_wrapper { width: 100%; }

/* ── Overflow containment ──
   Flex/grid children default to min-width:auto, which refuses to shrink below
   their content's intrinsic width. On a narrow (single-column) mobile layout a
   wide image then keeps the whole row wider than the screen (it now gets clipped
   by overflow-x:clip, showing as content cut off on the right). Letting these
   boxes shrink — plus capping every image at its column width — keeps the
   sections inside the viewport. */
.sc-module-root .vc_row-flex,
.sc-module-root .wpb_column,
.sc-module-root .vc_column-inner,
.sc-module-root .wpb_wrapper { min-width: 0; }
.sc-module-root img { max-width: 100%; }

/* Utility */
.sc-module-root .text-centered { text-align: center; }

/* Container.
   NB: The7's main.min.css restyles bare `.wf-wrap` as a flex column
   (display:flex; flex-flow:column wrap; align-items:center). Left in place that
   makes .wf-container-main a flex item with min-width:auto, so it refuses to
   shrink below its widest descendant and the section overflows the viewport on
   mobile. Force it back to a plain block and let the inner wrappers shrink. */
/* The7 applies width:var(--the7-box-width) (1280px) and ~50px side padding to
   .wf-wrap through a higher-specificity selector (#main .wf-wrap), which beats a
   plain `.sc-module-root .wf-wrap` rule. That fixed 1280px width is what made the
   section render 1280px wide and overflow/clip on mobile. !important is required
   to win against The7's selector and restore responsive width. */
.sc-module-root .wf-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
}
.sc-module-root .wf-container-main,
.sc-module-root #content,
.sc-module-root .wpb-content-wrapper { width: 100%; min-width: 0; max-width: 100%; }

/* The7's main.min.css sets `#main { padding: 50px 0 }`, which adds ~50px of white
   space above the first home section. The original home meets the hero directly,
   so drop the top padding on the home page (inner pages keep it for breathing room
   under their page-title banner). */
.sc-module-root #main.sc-home-main { padding-top: 0; }

/* ── WPBakery per-page inline styles (normally injected by WP as inline CSS) ── */
.vc_custom_1529515723794 { padding-top: 70px !important; padding-bottom: 55px !important; }
.vc_custom_1529525768333 { padding-top: 70px !important; padding-bottom: 75px !important; }
.vc_custom_1529568771974 { padding-top: 100px !important; padding-bottom: 105px !important; }
.vc_custom_1529527073081 { margin-right: 10px !important; margin-bottom: 10px !important; margin-left: 10px !important; }

/* ── Faint grey full-width row band — replicates the original Ultimate upb_row_bg
   (rgba(170,170,170,0.1), ex-full) used on alternating sections. Negative side
   margins + matching padding break the band out of wf-wrap's 30px padding so it
   spans the full container width like the original. Applied to: the home "What are
   you looking for?" row, About's Partnership/Vision rows and the service pages'
   "Technologies used" rows. ── */
.sc-module-root .sc-row-tint {
    background: rgba(170, 170, 170, 0.1);
    margin-left: -30px;
    margin-right: -30px;
    padding-left: 30px;
    padding-right: 30px;
}

/* ── Section headings: --the7-title-color = #333333 (dark charcoal, not pure black) ── */
/* The h2 inline style has no color; the theme's CSS variable path doesn't resolve here */
.sc-module-root .uvc-main-heading h2 { color: #333333; }

/* ═══════════════════════════════════════ SERVICE ICONS ══════════════════════ */
/* Gradient circle background */
.sc-module-root.accent-gradient .accent-icon-bg .aio-icon {
    background: linear-gradient(135deg, #8426b0 3%, #bd0283 47%, #ec4b3c 98%) !important;
}

.sc-module-root .aio-icon-component { margin-bottom: 35px; text-align: center; }
.sc-module-root .aio-icon-box-link  { text-decoration: none; border: none; display: block; }

.sc-module-root .top-icon .aio-icon,
.sc-module-root .top-icon .aio-icon-header,
.sc-module-root .top-icon .aio-icon-description { display: block; text-align: center; margin: 0 auto; }
.sc-module-root .top-icon .aio-icon-header h3.aio-icon-title { margin: 25px 0 15px; }

/* The circle itself — inline styles on the element set width/height/border-radius;
   we just ensure the FA icon renders centered inside it */
.sc-module-root .aio-icon.advanced {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.sc-module-root .aio-icon.advanced i {
    line-height: 1;
    font-size: inherit;
}

.sc-module-root .aio-icon-title {
    font-family: "Raleway", "Open Sans", sans-serif;
    color: #333333;
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .sc-module-root .aio-icon-title { font-size: 18px; line-height: 26px; }
    .sc-module-root .aio-icon-component { margin-bottom: 20px; }
}

/* ═══════════════════════════════════════ CTA SECTION ════════════════════════ */
/* Shared by the home page (Index) and the reusable CtaBand component. */
/* Row spans the full width of .sc-module-root — placed outside wf-wrap in HTML */
.sc-cta-row {
    position: relative;
    width: 100%;
    background-image: url('../img/trade10.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    overflow: hidden;
}

/* Dark overlay matching data-upb-overlay-color="rgba(0,0,0,0.6)" */
.sc-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    z-index: 0;
}

/* Centred content container — same max-width / padding as wf-wrap */
.sc-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 100px 30px 105px;
    text-align: center;
}

.sc-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.sc-cta-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 200px;
    min-height: 56px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 5px;
    border: none;
    background: linear-gradient(135deg, #8426b0 3%, #bd0283 47%, #ec4b3c 98%) !important;
    text-decoration: none;
    transition: background .3s ease;
}
.sc-cta-btn:hover {
    background: linear-gradient(45deg, #e74c42 1%, #c81772 47%, #8424ac 97%) !important;
}

@media (max-width: 767px) {
    .sc-cta-inner { padding: 60px 20px; }
    .sc-cta-btn   { width: 90%; max-width: 320px; }
}

.sc-cta-btn {
    display: inline-block !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    margin-left: 10px !important;
    width: 200px !important;
    text-align: center;
}

/* dt-btn gradient override — WordPress CSS uses var() which may not resolve fully */
.sc-module-root .dt-btn:not(.btn-light):not(.outline-btn) {
    color: #ffffff !important;
    background: #8426b0 !important;
    background: linear-gradient(135deg, #8426b0 3%, #bd0283 47%, #ec4b3c 98%) !important;
}
.sc-module-root .dt-btn:not(.btn-light):not(.outline-btn):hover {
    background: linear-gradient(45deg, #e74c42 1%, #c81772 47%, #8424ac 97%) !important;
}

/* Section padding tweaks shared with the home sections on small screens */
@media (max-width: 767px) {
    .vc_custom_1529515723794 { padding-top: 40px !important; padding-bottom: 30px !important; }
    .vc_custom_1529525768333 { padding-top: 40px !important; padding-bottom: 40px !important; }
    .vc_custom_1529568771974 { padding-top: 60px !important; padding-bottom: 60px !important; }
    .sc-module-root .uvc-main-heading h2 { font-size: 28px !important; line-height: 38px !important; }
    .sc-module-root .uvc-sub-heading     { font-size: 16px !important; line-height: 26px !important; margin-bottom: 30px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .sc-module-root .uvc-main-heading h2 { font-size: 32px !important; line-height: 42px !important; }
}

/* ═══════════════════════════════════════ INNER PAGES ════════════════════════ */
/* ── Page-title banner (The7 .page-title solid-bg) — rendered by PageBanner ── */
.sc-page-title {
    background: rgba(114, 119, 125, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.sc-page-title-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 38px 0;
}
.sc-page-title-h {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    color: #333333;
    margin: 0;
}
.sc-breadcrumbs { font-size: 13px; color: #adafb3; }
.sc-breadcrumbs a { color: #adafb3; }
.sc-breadcrumbs a:hover { color: #8426b0; }
.sc-breadcrumbs .sc-bc-sep { margin: 0 8px; opacity: .6; }
.sc-breadcrumbs .sc-bc-current { color: #333333; }

/* ── Readable article column (rendered by InnerPage) + shared text utilities ── */
.sc-article {
    max-width: 980px;
    margin: 0 auto;
    padding: 70px 0 30px;
}
.sc-article p {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #5a5c63;
    margin: 0 0 22px;
}
.sc-article .sc-lead {
    font-size: 20px;
    line-height: 32px;
    color: #333333;
    font-weight: 400;
}
.sc-article-h {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: #333333;
    margin: 42px 0 20px;
}
.sc-article-h3 {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 23px;
    line-height: 32px;
    font-weight: 700;
    color: #333333;
    margin: 34px 0 16px;
}
.sc-list {
    list-style: disc;
    margin: 0 0 24px;
    padding-left: 22px;
}
.sc-list li {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #5a5c63;
    margin-bottom: 12px;
}
.sc-list li strong { color: #333333; }

.sc-inline-cta { text-align: center; margin: 34px 0 10px; }
.sc-inline-cta-left { text-align: left; }
@media (max-width: 767px) { .sc-inline-cta-left { text-align: center; } }

/* ── "Technologies used" list ── */
.sc-tech-list { list-style: none; margin: 0 0 10px; padding: 0; }
.sc-tech-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sc-tech-list li strong {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #333333;
}
.sc-tech-list li a { color: #bd0283; font-weight: 600; }
.sc-tech-list li a:hover { color: #8426b0; text-decoration: underline; }

/* ── Service-page rich text + image sections ── */
.sc-rich > :first-child { margin-top: 0; }
.sc-rich p {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #5a5c63;
    margin: 0 0 18px;
}
.sc-rich .sc-lead {
    font-size: 20px;
    line-height: 32px;
    color: #333333;
}
/* Centred (narrow) full-width text block — left-aligned body copy */
.sc-svc-narrow {
    max-width: 980px;
    margin: 0 auto;
    padding: 55px 0 10px;
}
.sc-svc-section { padding: 20px 0 30px; }
/* Wide banner image (e.g. D365 page) */
.sc-svc-banner { padding: 50px 0 10px; }
.sc-svc-banner img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* Shared inner-page responsive tweaks (article column + page title) */
@media (max-width: 860px) {
    .sc-article { padding-top: 45px; }
    .sc-article-h { font-size: 26px; line-height: 34px; }
    .sc-page-title-h { font-size: 24px; line-height: 32px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   Index.razor — scoped styles (CSS isolation).
   Covers the chrome + home-page sections rendered directly by Index:
   site header / nav / mobile menu, hero slider, projects grid and footer.
   Theme overrides, the WPBakery grid and shared utilities live in the global
   wwwroot/css/landing-module.css (they must reach child components too).
   ════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════ SITE HEADER ═════════════════════════ */
/* Values sourced from css-vars.css and custom.css:
   --the7-header-height: 120px, left/right padding: 50px,
   --the7-menu-font: Raleway 700 18px, --the7-menu-color: #333333        */

.sc-site-header {
    background: #ffffff;
    width: 100%;
    height: 120px;
    position: sticky;
    top: 0;
    z-index: 200;
    /* The7 uses no shadow by default; add a very subtle one for legibility */
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.sc-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    /* --the7-header-left-padding / right-padding: 50px */
    padding: 0 50px;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    position: relative;
}

/* ── Logo ── */
.sc-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.sc-logo-link   { display: flex; align-items: center; line-height: 0; border: none; }
.sc-logo-desktop { height: 38px; width: auto; display: block; }
.sc-logo-mobile  { display: none; }

/* ── Desktop nav ── */
/* Matches: .main-nav bg-outline-decoration hover-bg-decoration
            active-bg-decoration gradient-hover outside-item-remove-margin */
.sc-nav {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.sc-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    height: 100%;
}

.sc-nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Base link — .main-nav > li > a
   font: normal 700 18px/22px "Raleway"; text-transform: none; color: #333333 */
.sc-nav-item > a {
    display: flex;
    align-items: center;
    /* padding: 0px 15px 0px 15px  (.main-nav > li > a) */
    padding: 0 15px;
    font-family: "Raleway", Helvetica, Arial, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    text-transform: none;
    letter-spacing: normal;
    color: #333333;
    white-space: nowrap;
    text-decoration: none;
    /* border-radius: 0px  (.active-bg-decoration > li > a) */
    border-radius: 0;
    transition: background .2s;
}

/* Hover — gradient text, very light background (gradient-hover behaviour) */
.sc-nav-item:not(.sc-nav-active) > a:hover {
    background: linear-gradient(360deg, #ffffff 0%, #f2f2f2 100%);
}
.sc-nav-item:not(.sc-nav-active) > a:hover .sc-nav-text {
    background: linear-gradient(to right, #8426b0 3%, #bd0283 47%, #ec4b3c 98%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Active — purple→magenta→red gradient fill, white text */
.sc-nav-item.sc-nav-active > a {
    background: linear-gradient(135deg, #8426b0 3%, #bd0283 47%, #ec4b3c 98%);
    color: #ffffff;
}
.sc-nav-item.sc-nav-active > a .sc-nav-text { color: #ffffff; }

/* ── Dropdown sub-nav ── */
.sc-nav-has-children { position: relative; }

.sc-sub-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    /* .sub-nav { padding: 10px 10px 10px 10px; background: #ffffff } */
    padding: 10px;
    background: #ffffff;
    /* li:not(.dt-mega-menu) .sub-nav { width: 300px } */
    width: 300px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    z-index: 300;
}

.sc-nav-has-children:hover .sc-sub-nav { display: block; }

.sc-sub-nav li a {
    display: block;
    padding: 8px 15px;
    font-family: "Raleway", Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    text-decoration: none;
    border-radius: 0;
    transition: color .15s, background .15s;
}
.sc-sub-nav li a:hover {
    color: #8426b0;
    background: rgba(132,38,176,.05);
}

/* ── Mobile hamburger ── */
.sc-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    align-self: center;
}
.sc-mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #333333;
    border-radius: 1px;
    transition: background .2s;
}

/* ── Mobile menu panel ── */
.sc-mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    z-index: 250;
    padding: 0;
}
.sc-mobile-menu.sc-mobile-open { display: block; }
.sc-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.sc-mobile-menu > ul > li > a {
    display: block;
    padding: 14px 30px;
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    text-transform: none;
    border-bottom: 1px solid rgba(0,0,0,.06);
    text-decoration: none;
}
.sc-mobile-menu ul ul a {
    display: block;
    padding: 10px 30px 10px 50px;
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    border-bottom: 1px solid rgba(0,0,0,.04);
    text-decoration: none;
}
.sc-mobile-menu li a:hover { color: #8426b0; }

/* ── Responsive switch at The7's first-switch point (1130px) ── */
@media (max-width: 1130px) {
    .sc-site-header   { height: 70px; }
    .sc-nav           { display: none; }
    .sc-mobile-toggle { display: flex; }
    .sc-logo-desktop  { display: none; }
    .sc-logo-mobile   { display: block; height: 31px; }
    .sc-header-inner  { padding: 0 20px; }
}

/* ═══════════════════════════════════════ HERO SLIDER ═════════════════════════ */
#sc-main-slideshow { width: 100%; }

.sc-rev-wrap {
    position: relative;
    width: 100%;
    height: 680px;
    overflow: hidden;
    background: #111111;
}

.sc-rslide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    animation: sc-slide 24s linear infinite;
}
.sc-rslide-1 {
    background-image: url('../img/trade091.jpg');
    animation-delay: 0s;
}
.sc-rslide-2 {
    background-image: url('../img/trade191.jpg');
    animation-delay: 6s;
}
.sc-rslide-3 {
    background-image: url('../img/trade061.jpg');
    animation-delay: 12s;
}
.sc-rslide-4 {
    background-image: url('../img/trade221.jpg');
    animation-delay: 18s;
}
@keyframes sc-slide {
    0%    { opacity: 0; }
    4.2%  { opacity: 1; }
    21%   { opacity: 1; }
    25%   { opacity: 0; }
    100%  { opacity: 0; }
}

/* Art circles — all art layers sit below the overlay (z-index 1) */
.sc-art {
    position: absolute;
    display: none; /* hidden by default (mobile-first) */
    z-index: 1;
    pointer-events: none;
    user-select: none;
}
@media (min-width: 778px) {
    .sc-art { display: block; }
    /* Left side */
    .sc-art-tl { left: -80px;  top: -80px;  width: 250px; height: 251px; }
    .sc-art-bl { left: -100px; bottom: -100px; width: 350px; height: 351px; }
    .sc-art-ml { left: -80px;  top: calc(50% - 105px); width: 160px; height: 161px; }
    /* Right side */
    .sc-art-tr { right: -100px; top: -100px;  width: 350px; height: 351px; }
    .sc-art-br { right: -80px;  bottom: -80px; width: 250px; height: 251px; }
    .sc-art-mr { right: -80px;  top: calc(50% - 55px); width: 160px; height: 161px; }
}

/* Decorative art circles slowly rock back and forth (RevSlider loop: rZ ±10° over
   16s each way, yoyo). Direction + phase are varied per circle so they don't move
   in lockstep. */
@keyframes sc-art-wobble {
    from { transform: rotate(-10deg); }
    to   { transform: rotate(10deg); }
}
.sc-art {
    transform-origin: 50% 50%;
    animation: sc-art-wobble 16s ease-in-out infinite alternate;
}
.sc-art-bl { animation-direction: alternate-reverse; animation-delay: -4s; }
.sc-art-ml { animation-delay: -8s; }
.sc-art-tr { animation-direction: alternate-reverse; animation-delay: -2s; }
.sc-art-br { animation-direction: alternate-reverse; animation-delay: -6s; }
.sc-art-mr { animation-delay: -10s; }

.sc-rslide-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    z-index: 2;
}

.sc-rslide-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.sc-slide-logo {
    width: 109px;
    height: auto;
    margin-bottom: 18px;
}

.sc-slide-title {
    font-family: "Raleway", sans-serif;
    font-size: clamp(24px, 4vw, 70px);
    line-height: 1.14;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 8px;
}

.sc-slide-done {
    font-family: "Raleway", sans-serif;
    font-size: clamp(44px, 9vw, 124px);
    line-height: 1.08;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 36px;
}

.sc-slide-btn {
    display: inline-block;
    font-family: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
    font-size: clamp(14px, 1.8vw, 24px);
    font-weight: 700;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0;
    padding: 16px 40px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(130,35,172,1) 0%, rgba(187,5,129,1) 53%, rgba(233,77,66,1) 100%);
    transition: background 0.3s ease;
}
.sc-slide-btn:hover {
    background: linear-gradient(225deg, rgba(130,35,172,1) 0%, rgba(187,5,129,1) 53%, rgba(233,77,66,1) 100%);
}

/* ── Hero entrance animation (replicates the RevSlider layer reveal) ──
   Logo drops in from above, title + "DONE RIGHT" fade & scale up from 0.9, and
   the button rises from below — all fading in over ~1.4s, lightly staggered.
   `both` fill-mode holds the start (hidden) state until each layer's delay. */
@keyframes sc-hero-drop {
    from { opacity: 0; transform: translateY(-50px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes sc-hero-scale {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes sc-hero-rise {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* After the entrance, the logo keeps a gentle vertical bob (RevSlider loop: y 7px, 2s each way, yoyo) */
@keyframes sc-logo-float {
    from { transform: translateY(0); }
    to   { transform: translateY(10px); }
}
/* Logo: entrance drop, then hand off to the continuous float once the drop finishes (~1.55s). */
.sc-slide-logo  { animation: sc-hero-drop 1.4s cubic-bezier(.16,.7,.3,1) .15s both,
                             sc-logo-float 2s ease-in-out 1.6s infinite alternate; }
.sc-slide-title { animation: sc-hero-scale 1.4s cubic-bezier(.16,.7,.3,1) both; animation-delay: .35s; }
.sc-slide-done  { animation: sc-hero-scale 1.4s cubic-bezier(.16,.7,.3,1) both; animation-delay: .55s; }
.sc-slide-btn   { animation: sc-hero-rise  1.4s cubic-bezier(.16,.7,.3,1) both; animation-delay: .75s; }

/* ═══════════════════════════════════════ PROJECTS GRID ══════════════════════ */
.sc-projects-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.sc-proj-card {
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    transition: box-shadow .3s ease, transform .3s ease;
}
/* Card lift on hover */
.sc-proj-card:hover {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
    transform: translateY(-4px);
}

.sc-proj-thumb-wrap { padding: 20px 20px 0 20px; }

/* Image frame — clips the slow zoom and hosts the overlay + zoom icon (The7 rollover) */
.sc-proj-thumb { position: relative; overflow: hidden; }
.sc-proj-thumb a { display: block; line-height: 0; }
.sc-proj-thumb img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
    /* The7's signature slow "ken-burns" zoom: scale to 1.2 over 4s ease-out */
    transition: transform 4s ease-out;
}
.sc-proj-card:hover .sc-proj-thumb img { transform: scale(1.2); }

/* Translucent accent-gradient overlay fades in (matches --the7-accent-bg-filter-switch) */
.sc-proj-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s linear;
    background: linear-gradient(135deg, rgba(132,38,176,.45) 3%, rgba(189,2,131,.45) 47%, rgba(236,75,60,.45) 98%);
}
.sc-proj-card:hover .sc-proj-thumb::after { opacity: 1; }

/* Centred zoom (magnifier) icon scales + fades in */
.sc-proj-thumb::before {
    content: "\f002"; /* FontAwesome fa-search */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #8426b0;
    font-size: 22px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
    transition: opacity .35s ease, transform .35s ease;
}
.sc-proj-card:hover .sc-proj-thumb::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.sc-proj-body { padding: 20px 30px 30px 30px; flex: 1; }

.sc-proj-title {
    font-family: "Raleway", sans-serif;
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    margin-bottom: 5px;
}
.sc-proj-title a { color: #333333; transition: color .2s; }
.sc-proj-title a:hover { color: #8426b0; }

.sc-proj-cat { font-size: 13px; color: #8b8d94; }
.sc-proj-cat a { color: #8b8d94; }
.sc-proj-cat a:hover { color: #8426b0; }

@media (max-width: 767px) {
    .sc-projects-row { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .sc-projects-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════ FOOTER BAR ═════════════════════════ */
#sc-footer { background: #111111; color: #ffffff; }

#sc-bottom-bar {
    background: #111111;
    min-height: 60px;
    padding: 10px 0;
}

.sc-bottom-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 40px;
}

.sc-copy {
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    color: #ffffff;
}

.sc-footer-nav { display: flex; flex-wrap: wrap; align-items: center; }
.sc-footer-nav a {
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    padding: 4px 12px;
    border-left: 1px solid rgba(255,255,255,0.2);
    line-height: 1;
    transition: color .2s;
}
.sc-footer-nav a:first-child { border-left: none; }
.sc-footer-nav a:hover { color: #ffffff; }

/* ── Responsive tweaks (hero + footer) ── */
@media (max-width: 767px) {
    .sc-rev-wrap   { height: 480px; }
    .sc-slide-done { font-size: clamp(36px, 12vw, 80px); }

    .sc-bottom-flex { flex-direction: column; align-items: flex-start; }
    .sc-footer-nav  { flex-direction: column; margin-top: 8px; }
    .sc-footer-nav a {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.2);
        padding: 6px 0;
    }
    .sc-footer-nav a:first-child { border-top: none; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .sc-rev-wrap { height: 560px; }
}

/* Accessibility: reduced motion — skip the larger one-time entrance moves and the
   background cross-fade, but keep the gentle continuous ambient loops (logo bob +
   art rock) since they're subtle and explicitly part of the design. */
@media (prefers-reduced-motion: reduce) {
    .sc-rslide { animation: none !important; }
    .sc-rslide-1 { opacity: 1 !important; }
    .sc-slide-title,
    .sc-slide-done,
    .sc-slide-btn { animation: none !important; opacity: 1 !important; transform: none !important; }
    /* Logo: drop the entrance but keep floating. */
    .sc-slide-logo { animation: sc-logo-float 2s ease-in-out infinite alternate !important; opacity: 1 !important; }
}

/* ProjectBody.razor — scoped styles (single-project / portfolio page).
   The 8/4 column grid comes from the global WPBakery grid; everything below is
   specific to this component's markup. */

.sc-project-post { padding: 55px 0 20px; }
.sc-project-row { align-items: center; }
.sc-proj-feature img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}
.sc-proj-details { padding-left: 10px; }
@media (max-width: 767px) {
    .sc-project-post { padding: 35px 0 20px; }
    .sc-proj-details { padding-left: 0; margin-top: 30px; }
}
.sc-proj-details p {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #5a5c63;
    margin: 0 0 22px;
}
.sc-proj-details strong {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: #333333;
}

/* Share bar */
.sc-share-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin: 30px 0 10px;
    padding: 24px 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.sc-share-desc {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #333333;
}
.sc-share-desc i { color: #bd0283; margin-right: 6px; }
.sc-share-buttons { display: flex; gap: 10px; }
.sc-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f1f3;
    color: #5a5c63;
    font-size: 16px;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.sc-share:hover {
    background: linear-gradient(135deg, #8426b0 3%, #bd0283 47%, #ec4b3c 98%);
    color: #fff;
    transform: translateY(-2px);
}

/* Prev / next project navigation */
.sc-project-nav {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.sc-pn { display: flex; flex-direction: column; gap: 6px; max-width: 48%; }
.sc-pn-next { margin-left: auto; text-align: right; }
.sc-pn-dir {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9a9ca3;
}
.sc-pn-title {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #333333;
    transition: color .25s ease;
}
.sc-pn:hover .sc-pn-title { color: #bd0283; }

/* ContactBody.razor — scoped styles (contact form + company details).
   The page title, article column and the CTA/dt-btn submit button styling come
   from the global stylesheet; everything below is specific to this component. */

.sc-contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    margin-top: 10px;
}
.sc-contact-form .sc-field { margin-bottom: 16px; }
.sc-contact-form input[type="text"],
.sc-contact-form input[type="email"],
.sc-contact-form textarea {
    width: 100%;
    padding: 13px 16px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: #333333;
    background: #fcfcfc;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    outline: none;
    transition: border-color .15s;
}
.sc-contact-form input:focus,
.sc-contact-form textarea:focus { border-color: #bd0283; }
.sc-contact-form textarea { resize: vertical; }
.sc-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 20px;
    font-size: 13px;
    line-height: 20px;
    color: #8b8d94;
}
.sc-terms input { margin-top: 3px; }
.sc-form-error { color: #d1453b; font-size: 14px; margin-bottom: 16px; }
.sc-form-success {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 26px;
    background: rgba(40, 167, 69, 0.08);
    border: 1px solid rgba(40, 167, 69, 0.35);
    border-radius: 6px;
    color: #2b7a3e;
    font-size: 16px;
    line-height: 26px;
}
.sc-form-success i { font-size: 24px; }

.sc-info-title {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 20px;
}
.sc-info-list { list-style: none; margin: 0; padding: 0; }
.sc-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 15px;
    line-height: 24px;
    color: #5a5c63;
}
.sc-info-list li i {
    color: #bd0283;
    font-size: 18px;
    width: 22px;
    text-align: center;
    margin-top: 2px;
    flex-shrink: 0;
}
.sc-info-list li strong { color: #333333; }
.sc-info-list li a { color: #bd0283; }
.sc-info-list li a:hover { color: #8426b0; }

@media (max-width: 860px) {
    .sc-contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* AboutBody.razor — scoped styles (intro + alternating image/text rows).
   The page title, CTA band and the WPBakery column grid come from the global
   stylesheet; the rules below are specific to this component's markup. */

.sc-about-intro {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 0 10px;
    text-align: center;
}
.sc-about-intro .sc-about-intro-h {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 36px;
    line-height: 46px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 24px;
}
.sc-about-intro .sc-about-intro-sub {
    font-style: italic;
    font-size: 22px;
    line-height: 32px;
    color: #333333;
    margin: 0 0 26px;
}
.sc-about-intro p {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 30px;
    color: #5a5c63;
    margin: 0 0 18px;
}
.sc-about-row { padding: 35px 0; }
.sc-about-row .vc_column-inner { padding: 0 20px; }
.sc-about-h {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 20px;
}
.sc-about-text p {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #5a5c63;
    margin: 0 0 18px;
}
.sc-about-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}
@media (max-width: 767px) {
    .sc-about-row { padding: 20px 0; }
    .sc-about-row .vc_column-inner { padding: 0; }
    .sc-about-media { margin-top: 18px; }
    .sc-about-h { font-size: 26px; line-height: 34px; }
    .sc-about-intro { padding-top: 40px; }
    .sc-about-intro p { font-size: 17px; line-height: 28px; }
}