/* ============================================================
   Desmok — custom overrides (loaded LAST).
   Fixes only, no redesign. Keeps the dark theme, blue accent,
   pill buttons with arrow circles, and the outline marquee.
   ============================================================ */

/* ------------------------------------------------------------
   1 & 2. Header left column
   Root cause: the base template has no `.main-header__left` flex
   rule (only the --two/--three/--five variants do), so the logo
   and the sidebar toggler stacked vertically — pushing the logo
   to the top and dropping the blue toggler underneath it.
   ------------------------------------------------------------ */
.main-header__left {
  display: flex;
  align-items: center;
}

/* ------------------------------------------------------------
   1. Logo — navy mark inside a compact white circle, sized to
   sit inline and vertically centered with the nav / CTA.
   (The circle is baked into assets/images/desmok-logo.png.)
   ------------------------------------------------------------ */
.main-header__logo img,
.sticky-header__logo img,
.logo-box img,
.sidebar-three__logo img,
.footer-widget__logo img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
/* footer logo a touch larger for visual balance */
.footer-widget__logo img {
  width: 80px;
  height: 80px;
}

/* ------------------------------------------------------------
   2. Offcanvas/sidebar toggle (blue circle).
   The desktop header already exposes the full nav + CTA, so the
   toggle is redundant there and only looked broken stacked under
   the logo. Hide it from 992px up; it still works on tablet/mobile.
   ------------------------------------------------------------ */
@media (min-width: 992px) {
  .main-header .sidebar-btn__toggler {
    display: none;
  }
}

/* ------------------------------------------------------------
   3 & 5. Hero stacking order — make it explicit and consistent:
     - hero image  = background layer (behind)
     - marquee     = mid layer (outline text reads over the image)
     - content     = top layer (paragraph, buttons, floating card
                     always readable, never covered)
   This fixes the marquee appearing "hidden" and keeps the copy in
   front of the artwork at every breakpoint.
   ------------------------------------------------------------ */
.hero-two__image {
  z-index: 1;
}
.hero-two .marquee {
  z-index: 2;
}
.hero-two .container {
  z-index: 3;
}

/* ------------------------------------------------------------
   6. Contact form heading ("Our Contact Now" + title).
   The template fills these near-black on the white card, which
   read as washed-out grey. Use a brand blue gradient instead;
   background-size 100% keeps it fully coloured regardless of the
   split-text scroll animation's background-position.
   ------------------------------------------------------------ */
.contact-one .sec-title__tagline.bw-split-text > div {
  background-image: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
  background-size: 100% 100%;
  font-weight: 600;
}
.contact-one .sec-title__title.bw-split-text > div {
  background-image: linear-gradient(90deg, #0a2a6b 0%, #007bff 55%, #00b4ff 100%);
  background-size: 100% 100%;
}

/* ------------------------------------------------------------
   7. Preloader logo size (the flash seen on refresh / tab switch).
   The theme sets `background-size: 60px auto` on .preloader__image,
   a value tuned to the template's original wide wordmark. The Desmok
   mark is a near-square logo, and its PNG used to carry ~88% empty
   canvas, so 60px rendered the visible mark at only 32x25px — it
   looked like a speck in the middle of the screen.

   assets/images/loader*.png are now cropped to the mark itself
   (549x423, no padding), so background-size maps 1:1 to what you see.
   ------------------------------------------------------------ */
.preloader__image {
  background-size: 120px auto;
}
@media (max-width: 575px) {
  .preloader__image {
    background-size: 88px auto;
  }
}

/* ------------------------------------------------------------
   8. Service detail pages — one 3D object per service, centered
   in the main image block (.service-details__image), over the
   dark placeholder photo, on the six services/*.html pages.
   The template's `.service-details__image img` rule stretches
   every img to fill the block (100% + object-fit: cover); the
   two-class selector below outranks it. Each object sits in a
   square 34% of the block's width (object-fit keeps wide/tall art
   in proportion), so all six carry the same weight and scale down
   with the block on mobile. Sources are only 150-265px, so at
   desktop width the smallest is upscaled ~1.75x — soft-shaded 3D
   holds up at that; for anything larger, supply higher-res art.
   ------------------------------------------------------------ */
.service-details__image {
  position: relative;
}
.service-details__image .service-details__image__shape {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 34%;
  height: auto;
  aspect-ratio: 1;
  max-height: 60%;
  object-fit: contain;
  /* Glow centered (no y-offset): it rotates with the object, and an
     offset glow would swing around it. */
  filter: drop-shadow(0 0 40px rgba(var(--amoxi-base-rgb), 0.5));
  animation: service-shape-spin 14s linear infinite;
  pointer-events: none;
}
/* Spins in place around its own center — the object never leaves the
   middle of the block. */
@keyframes service-shape-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-details__image .service-details__image__shape {
    animation: none;
  }
}

/* ------------------------------------------------------------
   9. Reduced motion, site-wide. Visitors whose OS asks for less
   motion get no CSS animations or transitions (rotating shapes,
   marquees, hover and AOS fades). The JS-driven motion — Swiper /
   Owl / Slick autoplay and GSAP — is stopped in amoxi.js, because
   CSS can't pause script-driven animation.
   amoxi.js also turns off GSAP ScrollSmoother, whose fixed wrapper
   is what normally clips the wide marquees and the 1200px Milestones
   table; `overflow-x: clip` keeps the page from scrolling sideways
   without creating a scroll container (sticky header still works).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html,
  body {
    overflow-x: clip;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   10. Home "Representative builds" carousel — smaller on desktop.
   The theme runs this fan full-bleed (each side card = 1/4 of the
   screen, ~480px at 1920) around a 650-796px centre card, which
   dominated wide screens. Cap it at the site's 1320px content width
   and scale the centre card ~20% down (same 1.12:1 shape as the
   796x713 images); the header gap above shrinks to match the
   smaller fan. Phones (<992px) are unchanged.
   ------------------------------------------------------------ */
@media (min-width: 992px) {
  .portfolio-two__container {
    max-width: 1320px;
  }
  .portfolio-two__top {
    margin-bottom: 90px;
  }
  .portfolio-two__carousel .center .portfolio-two__card {
    width: 520px !important;
    height: 466px !important;
  }
}
@media (min-width: 1200px) {
  .portfolio-two__top {
    margin-bottom: 120px;
  }
  .portfolio-two__carousel .center .portfolio-two__card {
    width: 560px !important;
    height: 502px !important;
  }
}
@media (min-width: 1400px) {
  .portfolio-two__top {
    margin-bottom: 150px;
  }
  .portfolio-two__carousel .center .portfolio-two__card {
    width: 620px !important;
    height: 555px !important;
  }
}
/* The details panel keeps the theme's 80px year and 39/50px padding,
   which on the smaller centre card covered almost half the photo and
   squeezed the description; scale it with the card. */
@media (min-width: 992px) {
  .portfolio-two__carousel .portfolio-two__card__content {
    padding: 24px 34px;
    gap: 10px 26px;
  }
  .portfolio-two__carousel .portfolio-two__card__title {
    margin-bottom: 8px;
    font-size: 20px;
  }
  .portfolio-two__carousel .portfolio-two__card__year {
    font-size: 52px;
  }
  .portfolio-two__carousel .portfolio-two__card__content > p {
    flex: 1 1 220px;
    font-size: 14px;
    line-height: 1.55;
    margin-top: 0 !important;
  }
}
/* Narrower centre cards (560px at 1200, 520px at 992): tighten so the
   title, year and description still share one row. */
@media (min-width: 992px) and (max-width: 1399px) {
  .portfolio-two__carousel .portfolio-two__card__content {
    padding: 20px 24px;
    gap: 10px 18px;
  }
  .portfolio-two__carousel .portfolio-two__card__year {
    font-size: 42px;
  }
  .portfolio-two__carousel .portfolio-two__card__content > p {
    flex-basis: 180px;
    font-size: 13px;
  }
}