/*
 * Spictra site overrides, layered after the theme's style.css / responsive.css.
 * Keep selectors scoped to header-one (the only header this site uses) so other
 * header variants shipped with the template are unaffected.
 */

/* ============================================================
   Brand theme — blue to red. The vendor theme's two core color
   variables drive buttons, links, hover states, the hero banner
   tint, the footer background, icons, etc. Override both here
   with the red now used in the Spictra logo (#D02E26, re-sampled
   after recoloring the logo itself to a deeper, "classier" red —
   see images/logo-spictra.png) and a deeper maroon for "dark"
   surfaces/text, so the whole site follows without needing a
   per-component override.
   ============================================================ */

:root {
    --cleanin-base: #d02e26;
    --cleanin-base-rgb: 208, 46, 38;
    --cleanin-black: #6b1116;
    --cleanin-black-rgb: 107, 17, 22;

    /* The vendor theme's font fallback was literally "serif" even
       though Heebo/Exo are both sans-serif typefaces — if the Google
       Fonts request ever failed, body copy and headings/menu text
       would silently swap to a serif font, reading as two different
       font styles on the same page. */
    --cleanin-font: "Heebo", sans-serif;
    --cleanin-font-two: "Exo", sans-serif;

    /* Used for headings and the menu's hover/current highlight.
       Previously a separate client-specified hex (#e30613); now the
       client wants headings to match the logo red exactly, which is
       --cleanin-base itself (#D02E26) — kept as its own variable
       rather than replacing every `var(--cleanin-heading)` reference
       with `var(--cleanin-base)`, so the two can still be told apart
       in the CSS and diverged again later if asked. */
    --cleanin-heading: var(--cleanin-base);
}

/* ============================================================
   Headings — same red as the logo (--cleanin-base) everywhere a
   heading sits on a light background. Deliberately a plain h1–h6
   selector (not !important): it matches the vendor theme's own base
   rule (style.css "h1,h2,h3,h4,h5,h6{color:var(--cleanin-black)}")
   in specificity, so cascade order lets it win there, while every
   more-specific component rule that intentionally sets a heading
   to white for contrast on a dark/colored background (the footer
   titles, the Enquiry section title, the dark "Contact Info"
   panel) is left alone.
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--cleanin-heading);
}

/* --- Header-one: keep the logo + nav menu on a single line ---
 * The stock theme has no width limit on the logo image and generous item
 * spacing/font-size, tuned for a shorter demo menu. Spictra's longer labels
 * ("Contract Manufacturing", "Our Partners") pushed the combined width past
 * the available row width, so the flex-wrap on .main-menu__wrapper-inner
 * dropped the whole menu to a second line (this also affects the sticky
 * header, which clones the same markup on scroll).
 */

.main-header-one__bottom-left .logo-one a img {
    width: auto;
    height: auto;
    max-width: 170px;
}

/* The logo column's white background is drawn by a ::before sized to
   the column's own box (see below) — with the row's default
   align-items:center, that box was only as tall as the logo image
   itself, so the white panel stopped short of the row's full height
   and left a sliver of the red bar showing above and below it.
   Stretching the row makes the column (and its white background)
   fill the full header height instead. */
.main-menu__wrapper-inner {
    align-items: stretch;
}

.main-menu .main-menu__list>li+li,
.stricky-header .main-menu__list>li+li {
    margin-left: 26px;
}

.main-menu .main-menu__list>li>a,
.stricky-header .main-menu__list>li>a {
    font-size: 15px;
    white-space: nowrap;
}

/* Client asked for a shorter header bar (roughly 3cm down to 2cm) —
   the stock theme's 35px/33px top/bottom li padding (style.css) is
   what drives the bar's full height, since the row around it just
   stretches to match. Cut that padding down (~2/3 of the original)
   to shrink the whole bar; applied to the sticky header too (via
   the higher-specificity override below) so it stays the same
   height when it slides in on scroll. */
.main-menu .main-menu__list>li,
.stricky-header .main-menu__list>li {
    padding-top: 20px;
    padding-bottom: 18px;
}

/* The menu list itself is display:none below 1200px (replaced by
   the hamburger toggle), so the one-line nowrap fix only matters
   once it's actually rendered side by side with the logo. */
@media (min-width: 1200px) {
    .main-header-one__bottom-left .logo-one a img {
        max-width: 220px;
    }

    .main-menu__wrapper-inner {
        flex-wrap: nowrap;
    }

    /* Let the middle zone grow to fill all the space next to the logo,
       so the nav list below has the full row width to lay itself out
       in (left-anchored items, "Enquiry Form" pushed to the far right
       — see .main-menu__list below). */
    .main-header-one__bottom-middle {
        flex: 1 1 auto;
        display: flex;
    }

    .main-menu__main-menu-box {
        width: 100%;
        display: flex;
    }

    /* Nav items left-aligned right after the logo (client request) with
       the list filling the full row width, instead of the previous
       centered block — "Enquiry Form" (.main-menu__enquiry-item below)
       then pushes itself to the right edge via margin-left:auto. */
    .main-menu .main-menu__list,
    .stricky-header .main-menu__list {
        flex-wrap: nowrap;
        width: 100%;
        justify-content: flex-start;
        margin-left: 20px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .main-header-one__bottom-left .logo-one a img {
        max-width: 178px;
    }

    .main-menu .main-menu__list>li+li,
    .stricky-header .main-menu__list>li+li {
        margin-left: 16px;
    }

    .main-menu .main-menu__list>li>a,
    .stricky-header .main-menu__list>li>a {
        font-size: 14px;
    }
}

/* ============================================================
   Header — solid red, white logo panel flush to the left edge,
   white menu text with a white "pill" + red text on hover/current
   (plain red-on-red text would be unreadable, so the highlight
   inverts to a light chip instead). Applied identically to the
   sticky header (the fixed bar that slides in on scroll, a clone
   of the same nav markup) so scrolling doesn't switch back to the
   stock theme's white-bar-with-black-text look.
   ============================================================ */

.main-header-one__bottom,
.stricky-header {
    background: var(--cleanin-base);
}

/* The theme's own "widen the container" rule (style.css) is scoped to
   `.main-header-one__bottom .container` — the sticky bar's container
   shares the same markup/class but a different ancestor
   (`.stricky-header`), so that rule skipped it and it fell back to
   plain Bootstrap's own (much narrower, ~1320px) responsive max-width.
   That's what made the sticky menu look squeezed into the left/center
   of the bar with a block of empty red space on the right, instead of
   using the full width like the main header. */
.stricky-header .container {
    max-width: 1590px;
    width: 100%;
}

/* The theme also gives the sticky bar's own li padding (40px/38px)
   instead of the main header's — a small, intentional vendor
   difference, but it made the bar itself a few pixels taller than
   the main header once everything else matched. Match the shortened
   main-header padding above exactly so nothing visibly shifts height
   when the page scrolls and the sticky bar slides in. */
.stricky-header.stricky-header__one .main-menu__list>li {
    padding-top: 20px;
    padding-bottom: 18px;
}

.main-header-one__bottom-left {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 40px 0 24px;
}

/* The logo column sits inside a centered, max-width container, so
   its white panel would normally stop at the container's left
   inset instead of the true viewport edge. A pseudo-element anchored
   to this column's own right edge and stretched far past the left
   edge of the viewport (well beyond any realistic gutter) fills in
   behind it — the browser simply clips whatever falls to the left
   of x:0, so this reaches exactly to the edge on any screen size
   without affecting the flex layout the way a real negative margin
   on the column itself would. */
.main-header-one__bottom-left::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: -100vw;
    background: var(--cleanin-white);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
    z-index: -1;
}

.main-header-one__bottom .main-menu__list>li>a,
.stricky-header .main-menu__list>li>a {
    color: var(--cleanin-white);
}

.main-header-one__bottom .main-menu__list>li.current>a,
.main-header-one__bottom .main-menu__list>li:hover>a,
.stricky-header .main-menu__list>li.current>a,
.stricky-header .main-menu__list>li:hover>a {
    background: var(--cleanin-white);
    color: var(--cleanin-heading);
    border-radius: 999px;
}

.main-header-one__bottom .main-menu__list>li.dropdown>a:after,
.stricky-header .main-menu__list>li.dropdown>a:after {
    color: var(--cleanin-white);
}

.main-header-one__bottom .main-menu__list>li.current>a::after,
.main-header-one__bottom .main-menu__list>li:hover>a::after,
.stricky-header .main-menu__list>li.current>a::after,
.stricky-header .main-menu__list>li:hover>a::after {
    color: var(--cleanin-heading);
}

/* The pill's horizontal padding is reserved on the link at all times
   (not just on hover) — only background/text color toggle on :hover,
   so hovering never changes any box's size and nudges its neighbors.
   The item-to-item gap is reduced to compensate, since the link's
   own padding now provides the visual separation between adjacent
   items instead. */
.main-header-one__bottom .main-menu__list>li>a,
.stricky-header .main-menu__list>li>a {
    padding: 8px 14px;
    transition: background-color .25s ease, color .25s ease;
}

.main-header-one__bottom .main-menu__list>li+li,
.stricky-header .main-menu__list>li+li {
    margin-left: 4px;
}

.main-header-one__bottom .main-menu__list>li.dropdown>a:after,
.stricky-header .main-menu__list>li.dropdown>a:after {
    right: 14px;
}

/* The vendor's dropdown-only padding-right (16px) was tuned to clear
   its own default 0 side padding — stacked on top of this header's
   extra 14px link padding, the "+" arrow still landed close enough
   to overlap the last letter ("CREDENTIAL+"). Give it more room. */
.main-header-one__bottom .main-menu__list>li.dropdown>a,
.stricky-header .main-menu__list>li.dropdown>a {
    padding-right: 32px;
}

/* "Credential" — client asked for the dropdown without the visible
   "+" indicator (still a working hover dropdown, just no arrow glyph),
   so it doesn't need the extra padding reserved for that arrow either. */
.main-menu__list>li.dropdown.no-arrow>a:after {
    display: none;
}

.main-header-one__bottom .main-menu__list>li.dropdown.no-arrow>a,
.stricky-header .main-menu__list>li.dropdown.no-arrow>a {
    padding-right: 14px;
}

/* "Enquiry Form" nav CTA (after Contact Us) — pushed to the far right
   of the (now left-aligned) nav row via auto margin, separating it
   from the regular nav items instead of just trailing after them. */
.main-header-one__bottom .main-menu__list>li.main-menu__enquiry-item,
.stricky-header .main-menu__list>li.main-menu__enquiry-item {
    margin-left: auto;
}

/* "Enquiry Form" nav CTA (after Contact Us) — a filled button
   instead of a plain text link, since it needs to stand out as an
   action rather than another nav destination. */
.main-header-one__bottom .main-menu__list>li>a.main-menu__enquiry-btn,
.stricky-header .main-menu__list>li>a.main-menu__enquiry-btn {
    background: var(--cleanin-white);
    color: var(--cleanin-heading) !important;
    padding: 10px 22px !important;
    border-radius: 999px;
    font-weight: 700;
}

.main-header-one__bottom .main-menu__list>li:hover>a.main-menu__enquiry-btn,
.main-header-one__bottom .main-menu__list>li.current>a.main-menu__enquiry-btn,
.stricky-header .main-menu__list>li:hover>a.main-menu__enquiry-btn,
.stricky-header .main-menu__list>li.current>a.main-menu__enquiry-btn {
    background: var(--cleanin-black);
    color: var(--cleanin-white) !important;
}

/* ============================================================
   Mobile header (<1200px, where the nav list is replaced by the
   hamburger toggle) — two bugs from the red re-theme:

   1. The hamburger glyph's color is the vendor's own
      `.main-menu .mobile-nav__toggler` rule (var(--cleanin-base)),
      which used to be a visible coral on the stock white-ish bar.
      Now that --cleanin-base IS the bar's background (red-on-red),
      the icon was still technically there, just invisible. Force it
      white to match the rest of the mobile bar's white content.

   2. The vendor's own responsive.css adds 25px top/bottom padding
      to `.main-header-one__bottom` below 1200px. That padding sits
      outside the white logo panel (whose ::before only stretches to
      the row it's actually in — see the align-items:stretch fix
      above), so it showed as a red strip above and below the white
      box instead of the panel reaching the bar's full height. Move
      that breathing room inside the row instead (as padding on the
      logo column and the toggler) so the white panel's own box is
      the bar's full height, edge to edge.
   ============================================================ */
@media (max-width: 1199px) {
    .main-menu .mobile-nav__toggler {
        color: var(--cleanin-white);
    }

    .main-header-one__bottom {
        padding: 0;
    }

    .main-header-one__bottom-left {
        padding: 14px 20px;
    }

    .main-menu__main-menu-box {
        display: flex;
        align-items: center;
        padding: 14px 20px;
    }
}

/* ============================================================
   About Spictra image — the uploaded photo is a wide banner-style
   crop (1886×755, ~2.5:1), so at width:100% in its half-width
   column it rendered only ~250px tall next to a text column that's
   naturally much taller (title + paragraph + button), reading as a
   small, squat image with a lot of empty space around it. Give it
   a fixed, taller display height and crop to fill it (object-fit:
   cover) instead of just letting the native ratio dictate the size.
   ============================================================ */

.about-one__img-right-img {
    height: 580px;
    border-radius: 6px;
}

.about-one__img-right-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .about-one__img-right-img {
        height: 320px;
    }
}

/* ============================================================
   Stats bar ("About Spictra" counter row) — this markup was
   already in the page (ported from an earlier/different template:
   .counter-box, .flaticon-*, .text-custom-white, .fs-16 — none of
   which exist in this theme's CSS), so it was rendering with no
   layout, no icons, and transparent/default text color. Client
   reference: a dark bar with icon + big number + label, repeated
   4x, and a faint dotted world-map watermark on each side. Styled
   the existing classes in place rather than introducing a parallel
   set, and swapped the dead flaticon-* icon classes for real
   Font Awesome ones (already loaded site-wide). Background reuses
   the theme's existing dotted-world-map shape (shipped as
   testimonial-v1-shape1.png) recolored white via filter, instead of
   a new asset.
   ============================================================ */

.about-counter {
    position: relative;
    overflow: hidden;
    background: var(--cleanin-base);
    padding: 55px 0;
}

.about-counter::before,
.about-counter::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 460px;
    max-width: 45%;
    background-image: url(../images/shapes/testimonial-v1-shape1.png);
    background-repeat: no-repeat;
    background-size: 700px auto;
    filter: invert(1);
    opacity: 0.15;
    pointer-events: none;
}

.about-counter::before {
    left: 0;
    background-position: -40px center;
}

.about-counter::after {
    right: 0;
    background-position: right -40px center;
}

.about-counter .row {
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    row-gap: 28px;
}

.counter-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.counter-icon i {
    font-size: 42px;
    line-height: 1;
    color: var(--cleanin-white);
}

.counter {
    display: flex;
    flex-direction: column;
}

.counter .count {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
}

.counter .fs-16 {
    font-size: 15px;
    white-space: nowrap;
}

.text-custom-white {
    color: var(--cleanin-white);
}

@media (max-width: 991px) {
    .counter-icon i {
        font-size: 32px;
    }

    .counter .count {
        font-size: 32px;
    }
}

/* ============================================================
   Homepage section rhythm — give adjacent sections distinct
   backgrounds so each reads as its own block instead of
   blending into the one before/after it (About + Products were
   both plain white; Clients + Testimonials were both plain
   white too).
   ============================================================ */

.spictra-products-section {
    background: var(--cleanin-gray-bg);
}

.testimonials-section {
    background: var(--cleanin-gray-bg);
}

/* ============================================================
   Enquiry Us — the stock template's "background image" here is
   an unreplaced placeholder stub (literally a gray box reading
   "1920X750"), not a real photo. Swap it for a brand-colour
   gradient instead of another borrowed stock image.
   ============================================================ */

.enquiry-section .contact-one__bg {
    background-image: none !important;
    background: var(--cleanin-heading);
}

/* The section's icon was already white here for contrast against
   this dark backdrop, but the small "Enquiry Now" tagline label next
   to it was still --cleanin-base (coral) — too close in hue/lightness
   to the new flat #e30613 background to read clearly. !important
   because the generic `.sec-title__tagline .text h4` rule (forced to
   black elsewhere on the site) is itself !important, so a plain
   override here would lose to it even with higher specificity. */
.enquiry-section.contact-one .sec-title__tagline .text h4 {
    color: var(--cleanin-white) !important;
}

/* ============================================================
   Our Products — this is product photography (often shot on a
   plain studio backdrop), not full-bleed scenery, so the
   "Project One" gallery style (dark overlay, edge-to-edge crop)
   let each photo's own backdrop colour show through inconsistently
   (e.g. blue vs white). Use a flat product-tile card instead,
   where every image sits in the same neutral white frame.
   ============================================================ */

.spictra-product-card {
    position: relative;
    display: block;
    background: var(--cleanin-white);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 10px 30px;
    box-shadow: 0 10px 40px rgba(5, 41, 68, 0.08);
}

.spictra-product-card__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--cleanin-white);
    padding: 28px;
}

.spictra-product-card__image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .4s ease;
}

.spictra-product-card:hover .spictra-product-card__image img {
    transform: scale(1.05);
}

.spictra-product-card__body {
    padding: 18px 24px 24px;
    border-top: 1px solid rgba(var(--cleanin-bdr-color-rgb), 0.6);
}

.spictra-product-card__category {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #000000;
    margin-bottom: 6px;
}

.spictra-product-card__body h2 {
    font-size: 19px;
    line-height: 26px;
    margin: 0;
}

.spictra-product-card__body h2 a {
    color: var(--cleanin-heading);
}

.spictra-product-card__body h2 a:hover {
    color: var(--cleanin-base);
}

/* ============================================================
   Our Valuable Clients — the stock markup stacked two copies of
   the same logo image for a hover crossfade (a dim/blurred one
   swapping for a sharp one), which only makes sense with two
   genuinely different images. With a single real logo duplicated,
   the vendor's base rule still dimmed it to 50% opacity by default
   (only reaching full brightness on hover), which read as a
   permanently blurry/faded logo. The markup's now a single plain
   image per client; make sure it just renders bright and sharp.
   ============================================================ */

.brand-one__single-inner a img,
.brand-one__single-inner a img:first-child,
.brand-one__single:hover .brand-one__single-inner a img:first-child {
    position: relative;
    inset: auto;
    opacity: 1;
    filter: none;
    transform: none;
}

/* ============================================================
   Our Customer's Feedback — these quotes are academic/clinical
   citations, not casual reviewer comments, so the stock avatar
   photo next to each one was misleading. Drop it and reclaim
   the top padding the card was reserving for it.
   ============================================================ */

.testimonials-section .testimonial-one__single {
    padding-top: 32px;
}

.testimonials-section .testimonial-one__single-inner {
    padding-top: 36px;
}

/* ============================================================
   News & Events — static photo gallery (client-supplied event
   photos, no title/description/date given per item yet, so a
   plain image carousel instead of the old article-style card).
   Photos come in mixed aspect ratios (portrait exhibition shots
   next to wide booth photos), so each slide is cropped to a
   fixed ratio via object-fit:cover for a uniform row, same
   pattern as the About-section image. Prev/next arrows (not
   dots) since the client specifically asked for a "moving
   slider" they can step through.
   ============================================================ */

.news-events-gallery__item {
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 10px 40px rgba(5, 41, 68, 0.08);
}

.news-events-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-events-gallery__carousel .owl-nav {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.news-events-gallery__carousel .owl-nav button.owl-prev,
.news-events-gallery__carousel .owl-nav button.owl-next {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--cleanin-base) !important;
    color: var(--cleanin-white) !important;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s ease;
}

.news-events-gallery__carousel .owl-nav button.owl-prev:hover,
.news-events-gallery__carousel .owl-nav button.owl-next:hover {
    background: var(--cleanin-heading) !important;
}

/* ============================================================
   Hero — a single looping "heartbeat" video, self-hosted (not a
   YouTube embed): a plain <video> element, click-to-play behind a
   play button, filling the band via object-fit:cover.

   The band's own aspect-ratio is locked to the source clip's native
   16:9, so "cover" never actually has anything to crop — the band's
   box is just the clip at whatever width the page gives it. Capped
   by max-height so an ultra-wide viewport (where 16:9 at full width
   would make for a very tall band) doesn't balloon the hero; on
   those screens the band falls back to being wider than 16:9 and
   cover crops top/bottom as it would without this fix.
   ============================================================ */

.main-slider-one--video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--cleanin-black);
}

.main-slider-one__video-wrap,
.main-slider-one__video-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.main-slider-one__video-player {
    container-type: size;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

.main-slider-one__video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.main-slider-one__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--cleanin-heading);
    color: var(--cleanin-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    padding-left: 4px;
    border: 4px solid rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: transform .25s ease, background-color .25s ease;
}

.main-slider-one__video-player:hover .main-slider-one__video-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--cleanin-base);
}

.main-slider-one__video-player.is-playing .main-slider-one__video-play {
    display: none;
}

/* ============================================================
   Footer — the about column had a large, mostly-invisible
   rgba(white, 0.05) panel stretched behind it (::before), which
   on the dark footer background reads as a grey blur smudge
   behind the logo/"Spictra" name rather than a clean background.
   Drop it.
   ============================================================ */

.footer-widget__about::before {
    display: none;
}

/* The copyright strip below the footer was hardcoded to the stock
   theme's navy (#041d31) instead of referencing --cleanin-black,
   so it didn't follow the rest of the footer into the red theme. */
.site-footer__bottom {
    background: var(--cleanin-black);
}

/* The vendor rule was `width: 100%`, uncapped — it stretched to
   fill the whole footer column (~450-500px), reading as oversized.
   Cap it to a normal footer-logo size instead. */
.site-footer__logo a img {
    width: auto;
    height: auto;
    max-width: 200px;
}

/* ============================================================
   Footer top — split into a white "logo" half and a red "menu +
   official info" half (client-supplied sketch), instead of one
   solid-color bar across all three columns. Each half keeps its
   own .container so its content still lines up with the rest of
   the page instead of being edge-to-edge.
   ============================================================ */

.spictra-footer-split {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.spictra-footer-split__logo,
.spictra-footer-split__info {
    width: 50%;
    padding: 70px 0;
}

.spictra-footer-split__logo {
    background: var(--cleanin-white);
}

.spictra-footer-split__info {
    background: var(--cleanin-base);
}

@media (max-width: 991px) {

    .spictra-footer-split__logo,
    .spictra-footer-split__info {
        width: 100%;
    }

    .spictra-footer-split__info {
        padding-top: 10px;
    }
}

/* The about text/social icons were styled white-on-dark for the old
   solid-color footer; the logo half is white now, so they need dark
   text and a filled (not white-on-white) social icon chip. The logo
   itself already renders in full color — no change needed there, it
   only turned invisible back when the whole footer was red/maroon. */
.spictra-footer-split__logo .footer-widget__about-text p {
    color: var(--cleanin-black);
}

.spictra-footer-split__logo .footer-widget__about-social-links ul li a {
    background: var(--cleanin-base);
    color: var(--cleanin-white);
}

/* The vendor hover effect is a layered ::before circle that scales in
   on hover (its own background, --cleanin-base) on top of the link's
   own background — since the link's base is now --cleanin-base too,
   that ::before needs to be the "hover" color instead for the swap
   to still read as a color change rather than a no-op. */
.spictra-footer-split__logo .footer-widget__about-social-links ul li a::before {
    background-color: var(--cleanin-black);
}

/* Footer phone/email rows — the icon chip had a `top: 6px` nudge
   and the row used align-items:flex-start, tuned for the (optional,
   multi-line) address entry above them. For a single line of text
   that offset just pushes the icon down below the text's baseline
   instead of centering it on the line. */
.footer-widget__contact-list li {
    align-items: center;
}

.footer-widget__contact-list li .icon-box {
    top: 0;
}

/* ============================================================
   Mobile nav — the slide-out panel still used the stock theme's
   near-black navy (--cleanin-black, #052944), not Spictra's
   actual brand blue. Bring it in line with the rest of the site.
   ============================================================ */

.mobile-nav__content {
    background-color: var(--cleanin-base);
}

/* The real Spictra logo (swapped in for the leftover stock logo) has no
   width cap here the way the header's does, so it renders at full
   natural size inside the 300px-wide panel. */
.mobile-nav__content .logo-box img {
    max-width: 140px;
    width: 100%;
    height: auto;
}

/* ============================================================
   Mobile nav open/close — the stock transition staggers the
   overlay and panel with a 500ms transition-delay in each
   direction, so the panel visibly lags ~1s behind the tap that
   opened it. That reads as "nothing happened" and invites a
   second tap, which then closes the half-opened panel before it
   ever finished appearing. Make both move together immediately.
   ============================================================ */

.mobile-nav__wrapper,
.mobile-nav__wrapper.expanded {
    transition-delay: 0ms;
}

.mobile-nav__content,
.mobile-nav__wrapper.expanded .mobile-nav__content {
    transition-delay: 0ms;
    transition-duration: 300ms;
}

/* ============================================================
   Body copy — the stock mid-gray (--cleanin-gray, #606060) on
   white reads as faded for the volume of text on this site.
   Darken the default text color site-wide for stronger contrast.
   ============================================================ */

body {
    color: #3f3f3f;
}

.sec-title__tagline .text h4 {
    color: #000000 !important;
    font-weight: 700;
}

/* ============================================================
   Back-to-top — the stock button is bare rotated text with a
   transparent background, so once it's pinned over the Our
   Products photos on scroll it looks like stray text stamped on
   the image rather than a UI control. Give it a proper button
   surface so it always reads as its own element, and keep clear
   of the product carousel's own controls.
   ============================================================ */

.scroll-to-top {
    right: 20px;
    bottom: 90px;
    height: auto;
    padding: 10px 14px;
    background: var(--cleanin-white);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(5, 41, 68, 0.18);
    transform: none;
}

.scroll-to-top.show {
    bottom: 100px;
}

.scroll-to-top__text {
    margin-left: 8px;
    color: var(--cleanin-base);
}

@media (max-width: 767px) {
    .scroll-to-top {
        right: 14px;
        bottom: 80px;
        padding: 8px 10px;
    }

    .scroll-to-top.show {
        bottom: 90px;
    }

    .scroll-to-top__text {
        display: none;
    }
}

/* ============================================================
   Mobile nav hamburger — shows the browser's default arrow
   pointer on hover instead of the hand cursor every other
   clickable control on the site uses. Force it explicitly on
   both the toggle link and its icon glyph.
   ============================================================ */

.main-menu .mobile-nav__toggler,
.main-menu .mobile-nav__toggler i {
    cursor: pointer;
}

/* ============================================================
   About Us page — reuses the stock "about-one" section/content-
   list/sec-title components (already proven on the homepage), plus
   a few small additions these didn't need to cover: alternating
   section backgrounds for rhythm, and the self-hosted "About Spictra"
   video. That clip runs ~5 minutes, unlike the homepage's short
   looping hero video, so it's a plain native <video controls poster>
   (no autoplay/loop, native play button on the poster) rather than
   the hero's custom click-to-unmute overlay.
   ============================================================ */

/* Same unreplaced-placeholder issue already fixed once for the Enquiry
   section (see .enquiry-section .contact-one__bg above): the stock
   theme's page-header background is literally a gray stub reading
   "1920X450", not a real photo. Every inner page uses this banner
   (via <x-page-header>), so swap it for a brand-colour gradient here
   globally rather than per page. */
.page-header__bg {
    background-image: none !important;
    background: linear-gradient(135deg, var(--cleanin-heading), var(--cleanin-base));
}

/* About Us hero banner — client-supplied reference photo (gloved
   hands + scalpel, grid overlay) recolored from its original blue
   duotone to the site's red/maroon brand ramp, with the reference's
   own baked-in title/breadcrumb text cropped out of the image file
   itself (kept only the text-free right two-thirds) so this real,
   accessible HTML heading/breadcrumb below doesn't double up with it. */
.spictra-page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 700px;
    overflow: hidden;
    z-index: 1;
}

.spictra-page-hero__bg {
    position: absolute;
    inset: 0;
    background: var(--cleanin-black) url(../../images/about/about-hero-bg.jpg) no-repeat center center;
    background-size: cover;
    z-index: -2;
}

.spictra-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 4, 5, 0.85) 0%, rgba(20, 4, 5, 0.55) 45%, rgba(20, 4, 5, 0.2) 100%);
    z-index: -1;
}

/* Image-only hero: the background image already carries its own title
   artwork, so skip the dark readability gradient used for the HTML
   heading overlay on other pages. */
.spictra-page-hero--image-only::before {
    display: none;
}

.spictra-page-hero__inner {
    position: relative;
    padding: 64px 0;
}

.spictra-page-hero__inner h1 {
    color: var(--cleanin-white);
    font-size: 46px;
    font-weight: 700;
    margin-bottom: 14px;
}

.spictra-page-hero__breadcrumb {
    font-size: 16px;
    font-weight: 600;
}

.spictra-page-hero__breadcrumb a {
    color: var(--cleanin-white);
}

.spictra-page-hero__breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.75);
}

.spictra-page-hero__breadcrumb span {
    color: rgba(255, 255, 255, 0.55);
    margin: 0 8px;
}

.spictra-page-hero__breadcrumb .current {
    color: #ffd9d6;
}

@media (max-width: 767px) {
    .spictra-page-hero {
        min-height: 240px;
    }

    .spictra-page-hero__inner {
        padding: 44px 0;
    }

    .spictra-page-hero__inner h1 {
        font-size: 30px;
    }
}

.spictra-about-alt-bg {
    background: var(--cleanin-gray-bg);
}

/* Get In Touch CTA — relocated to the bottom of the About Us page (was
   previously in the intro section); this section has no title of its
   own, so give the button some breathing room instead of it sitting
   flush against the counter bar above. */
.spictra-about-cta {
    padding: 70px 0;
}

/* Visually hidden but still available to screen readers / SEO. */
.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;
}

.spictra-about-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(5, 41, 68, 0.15);
    background: var(--cleanin-black);
}

.spictra-about-closing {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(var(--cleanin-bdr-color-rgb), 0.8);
    font-size: 17px;
    font-weight: 500;
    color: var(--cleanin-black);
}

/* ============================================================
   Contact Us page — the map sits stacked above the "Contact Info"
   panel in the same column (not beside the form, which is how the
   stock template's own .contact-page__google-map gutter-margin
   assumed it'd be used), so give it its own bottom margin to
   separate it from the info panel instead of reusing that class.
   ============================================================ */
.spictra-contact-map {
    margin-bottom: 30px;
}

.spictra-contact-info {
    border-radius: 6px;
}

/* Explicit red, independent of the generic h1-h6 heading rule above
   (which already resolves to the same red) so this heading stays red
   even if that shared rule is ever retargeted for other headings. */
.spictra-text-base {
    color: var(--cleanin-base) !important;
}

/* BHN Surgicals mention in the About Us intro copy — client asked for
   this company name in blue, distinct from the Spictra-brand red used
   right next to it in the same paragraph. */
.spictra-text-blue {
    color: #1e6fd9;
}

/* ============================================================
   Product category page — pill tabs to switch between solution
   categories without going back to the nav, plus the homepage's
   product-card look reused in a plain Bootstrap row/col grid
   instead of a carousel (its carousel-tuned side margins are
   reset here so a static grid doesn't double up on gutters).
   ============================================================ */

.spictra-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.spictra-category-tabs__item {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 30px;
    border: 1px solid rgba(var(--cleanin-bdr-color-rgb), 1);
    color: var(--cleanin-black);
    font-size: 14px;
    font-weight: 600;
    transition: all .3s ease;
}

.spictra-category-tabs__item:hover {
    border-color: var(--cleanin-base);
    color: var(--cleanin-base);
}

.spictra-category-tabs__item.is-active {
    background: var(--cleanin-base);
    border-color: var(--cleanin-base);
    color: var(--cleanin-white);
}

.spictra-product-grid {
    row-gap: 10px;
}

.spictra-product-grid .spictra-product-card {
    margin: 0 0 30px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
}

.spictra-product-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--cleanin-base);
}

.spictra-product-card__link i {
    font-size: 12px;
    transition: transform .3s ease;
}

.spictra-product-card:hover .spictra-product-card__link i {
    transform: translateX(4px);
}

.spictra-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--cleanin-white);
    border-radius: 10px;
}

.spictra-empty-state p {
    margin-bottom: 20px;
    color: var(--cleanin-gray);
}

/* ============================================================
   Product details page — image left (framed like the product
   card's own white image tile), copy/features/actions right,
   then full-width diagram/video and specification table below.
   ============================================================ */

.spictra-product-detail {
    padding: 100px 0 110px;
}

.spictra-product-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 30px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cleanin-gray);
}

.spictra-product-detail__back:hover {
    color: var(--cleanin-base);
}

.spictra-product-detail__back i {
    font-size: 11px;
}

.spictra-product-detail__image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cleanin-white);
    border: 1px solid rgba(var(--cleanin-bdr-color-rgb), 1);
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(5, 41, 68, 0.08);
    margin-bottom: 30px;
}

.spictra-product-detail__image img {
    max-width: 100%;
    height: auto;
}

.spictra-product-detail__category {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cleanin-base);
    margin-bottom: 10px;
}

.spictra-product-detail__content h2 {
    font-size: 32px;
    margin-bottom: 18px;
}

.spictra-product-detail__desc {
    color: var(--cleanin-gray);
    line-height: 28px;
    margin-bottom: 22px;
}

.spictra-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.spictra-feature-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    color: var(--cleanin-black);
    line-height: 24px;
}

.spictra-feature-list li i {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--cleanin-base);
    font-size: 15px;
}

.spictra-product-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

.spictra-product-detail__media-row {
    margin-top: 50px;
}

.spictra-product-detail__diagram,
.spictra-product-detail__video {
    margin-bottom: 30px;
}

.spictra-product-detail__diagram h3,
.spictra-product-detail__video h3,
.spictra-spec-section h3,
.spictra-related-products h3 {
    font-size: 22px;
    margin-bottom: 18px;
}

.spictra-product-detail__diagram img {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(var(--cleanin-bdr-color-rgb), 1);
}

.spictra-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.spictra-video-embed iframe,
.spictra-video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.spictra-spec-section {
    margin-top: 60px;
}

.spictra-spec-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid rgba(var(--cleanin-bdr-color-rgb), 1);
}

.spictra-spec-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 14px;
}

.spictra-spec-table th,
.spictra-spec-table td {
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(var(--cleanin-bdr-color-rgb), 1);
}

.spictra-spec-table thead th {
    background: var(--cleanin-heading);
    color: var(--cleanin-white);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .4px;
}

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

.spictra-spec-table tbody tr:nth-child(even) {
    background: var(--cleanin-gray-bg);
}

.spictra-related-products {
    margin-top: 70px;
}

@media (max-width: 767px) {
    .spictra-product-detail {
        padding: 60px 0 70px;
    }

    .spictra-product-detail__content h2 {
        font-size: 26px;
    }
}

/* ============================================================
   OEM Enquiry page — a long multi-section form (reuses the
   Contact page's .input-box/.nice-select look) plus a sidebar
   of static "why us" / product-category info. Labels are needed
   here (unlike the 4-field contact form) since there are ~30
   fields across 6 sections, so every field gets its own small
   component (see resources/views/components/form/*.blade.php).
   ============================================================ */

.spictra-oem-enquiry {
    padding: 100px 0 110px;
}

.spictra-oem-enquiry .sec-title__desc {
    color: var(--cleanin-gray);
    margin-top: -10px;
    margin-bottom: 10px;
}

.spictra-oem-enquiry .required-note {
    font-size: 13px;
    color: var(--cleanin-gray);
    margin-bottom: 30px;
    display: block;
}

.spictra-form-section {
    margin-bottom: 36px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(var(--cleanin-bdr-color-rgb), 1);
}

.spictra-form-section:last-of-type {
    border-bottom: 0;
}

.spictra-form-section__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.spictra-form-section__badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cleanin-base);
    color: var(--cleanin-white);
    font-size: 14px;
    font-weight: 700;
}

.spictra-form-section__title h3 {
    font-size: 19px;
    margin: 0;
}

.spictra-form-field {
    margin-bottom: 24px;
}

.spictra-form-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cleanin-black);
    margin-bottom: 8px;
}

.required {
    color: var(--cleanin-base);
}

.spictra-form-field input[type="text"],
.spictra-form-field input[type="email"],
.spictra-form-field input[type="tel"],
.spictra-form-field input[type="number"],
.spictra-form-field textarea {
    position: relative;
    display: block;
    height: 50px;
    width: 100%;
    background-color: var(--cleanin-white);
    border: 1px solid rgba(var(--cleanin-black-rgb), .12);
    padding: 0 16px;
    outline: none;
    font-size: 14px;
    color: var(--cleanin-gray);
    border-radius: 3px;
    font-family: var(--cleanin-font);
}

.spictra-form-field textarea {
    height: 90px;
    padding-top: 12px;
    resize: none;
}

.spictra-form-control {
    position: relative;
}

.spictra-form-control.has-prefix input {
    padding-left: 46px;
}

.spictra-form-prefix {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--cleanin-gray);
}

.spictra-form-field.has-error input,
.spictra-form-field.has-error textarea,
.spictra-form-field.has-error select + .nice-select {
    border-color: var(--cleanin-base);
}

.spictra-form-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--cleanin-base);
}

.spictra-form-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    min-height: 50px;
}

.spictra-form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--cleanin-black);
    cursor: pointer;
}

.spictra-form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--cleanin-base);
    cursor: pointer;
}

.spictra-form-checkbox-other-input {
    flex: 1 1 160px;
    height: 40px;
    border: 1px solid rgba(var(--cleanin-black-rgb), .12);
    border-radius: 3px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--cleanin-gray);
}

/* Document upload rows — a labelled dashed drop zone per document,
   not one combined widget, so it's always clear which file maps to
   which required document. */
.spictra-file-field {
    margin-bottom: 18px;
}

.spictra-file-field__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cleanin-black);
    margin-bottom: 8px;
}

.spictra-file-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px dashed rgba(var(--cleanin-base-rgb), .4);
    border-radius: 6px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all .25s ease;
    background: var(--cleanin-gray-bg);
}

.spictra-file-field.has-error .spictra-file-drop {
    border-color: var(--cleanin-base);
    border-style: solid;
}

.spictra-file-drop:hover {
    border-color: var(--cleanin-base);
    background: rgba(var(--cleanin-base-rgb), .05);
}

.spictra-file-drop i {
    font-size: 18px;
    color: var(--cleanin-base);
}

.spictra-file-drop__text {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: var(--cleanin-black);
}

.spictra-file-drop__text small {
    color: var(--cleanin-gray);
    font-size: 11px;
}

.spictra-file-drop__name {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--cleanin-base);
    text-align: right;
}

.spictra-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.spictra-declaration {
    margin: 10px 0 26px;
}

.spictra-alert {
    padding: 16px 20px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 30px;
}

.spictra-alert--success {
    background: rgba(40, 167, 69, .1);
    border: 1px solid rgba(40, 167, 69, .3);
    color: #1e7e34;
}

.spictra-alert--error {
    background: rgba(var(--cleanin-base-rgb), .08);
    border: 1px solid rgba(var(--cleanin-base-rgb), .3);
    color: var(--cleanin-base);
}

/* --- Sidebar: Why Choose Spictra / Product Categories --- */

.spictra-oem-sidebar-card {
    background: var(--cleanin-white);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(5, 41, 68, 0.08);
    padding: 28px;
    margin-bottom: 30px;
}

.spictra-oem-sidebar-card h3 {
    font-size: 18px;
    margin-bottom: 22px;
}

.spictra-oem-why-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.spictra-oem-why-item:last-child {
    margin-bottom: 0;
}

.spictra-oem-why-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--cleanin-white);
    font-size: 18px;
}

.spictra-oem-why-icon--red { background: #d02e26; }
.spictra-oem-why-icon--blue { background: #1e6fd9; }
.spictra-oem-why-icon--green { background: #1c9d6b; }
.spictra-oem-why-icon--purple { background: #7c3aed; }
.spictra-oem-why-icon--orange { background: #e8822c; }

.spictra-oem-why-item h4 {
    font-size: 15px;
    margin: 0 0 4px;
}

.spictra-oem-why-item p {
    font-size: 13px;
    color: var(--cleanin-gray);
    margin: 0;
    line-height: 20px;
}

.spictra-oem-categories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.spictra-oem-category-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 6px;
    background: var(--cleanin-gray-bg);
    font-size: 12px;
    font-weight: 600;
    color: var(--cleanin-black);
    line-height: 16px;
}

.spictra-oem-category-tile i {
    color: var(--cleanin-base);
    font-size: 16px;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .spictra-oem-enquiry {
        padding: 60px 0 70px;
    }

    .spictra-oem-categories-grid {
        grid-template-columns: 1fr;
    }
}