/**
 * Hosted Communications
 * Global Custom Styles
 *
 * Theme: Hosted Communications / Hello Elementor Child
 * Purpose: Reusable website-wide visual components and utility styles.
 */


/* ==========================================================
   01. GLOBAL UTILITIES
   ========================================================== */

/* ==========================================================
   HOSTED COMMUNICATIONS - REUSABLE BORDER ORB

   Elementor class:
   hc-border-orb

   Purpose:
   - small red/white glowing orb
   - continuously travels around element border
   - automatically follows element width and height
   - suitable for cards, image frames and CTA panels

   IMPORTANT:
   This effect uses the ::before pseudo-element.
   Do not apply it to an element whose existing styling
   already requires ::before for another effect.
   ========================================================== */


/* ==========================================================
   BASE
   ========================================================== */

.hc-border-orb {
  position: relative;
  overflow: visible !important;
  isolation: isolate;

  /*
   * Default matches the Hosted site's normal
   * 12-16px card radius range.
   *
   * Can be overridden on a specific component later:
   * --hc-orb-radius: 24px;
   */
  --hc-orb-radius: 16px;

  /*
   * Animation speed.
   * Can also be overridden per element if required.
   */
  --hc-orb-speed: 18s;
}


/* ==========================================================
   MOVING ORB
   ========================================================== */

.hc-border-orb::before {
  content: "";

  position: absolute;

  /*
   * Required starting point for CSS motion-path positioning.
   */
  top: 0;
  left: 0;

  width: 10px;
  height: 10px;

  z-index: 20;

  pointer-events: none;

  border-radius: 999px;

  /*
   * White centre -> Hosted red -> transparent outer glow
   */
  background:
    radial-gradient(
      circle,
      #FFFFFF 0%,
      #FFFFFF 18%,
      #E95A5F 32%,
      #BC2025 52%,
      rgba(188, 32, 37, 0.50) 72%,
      transparent 100%
    );

  box-shadow:
    0 0 7px rgba(255, 255, 255, 0.72),
    0 0 12px rgba(188, 32, 37, 0.92),
    0 0 22px rgba(188, 32, 37, 0.52),
    0 0 32px rgba(188, 32, 37, 0.20);

  /*
   * The path automatically follows the current
   * width and height of whatever element has the class.
   */
  offset-path:
    inset(
      0px
      round var(--hc-orb-radius)
    );

  offset-rotate: 0deg;
  offset-distance: 0%;

  animation:
    hcBorderOrbPath
    var(--hc-orb-speed)
    linear
    infinite;
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes hcBorderOrbPath {

  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }

}


/* ==========================================================
   OPTIONAL HOVER BEHAVIOUR

   Slightly strengthens the orb when the component
   itself is hovered.
   ========================================================== */

.hc-border-orb:hover::before {
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.90),
    0 0 14px rgba(188, 32, 37, 1),
    0 0 26px rgba(188, 32, 37, 0.64),
    0 0 38px rgba(188, 32, 37, 0.28);
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

  .hc-border-orb::before {
    animation: none;

    /*
     * Keep a small static brand accent rather than
     * removing the decoration completely.
     */
    offset-distance: 12%;

    opacity: 0.65;
  }

}



/* ==========================================================
   02. BUTTONS
   ========================================================== */

/* ==========================================================
   HOSTED COMMUNICATIONS - GLOBAL BUTTON SYSTEM

   Elementor Button widget classes:

   hc-btn-primary
   hc-btn-secondary
   hc-btn-light
   hc-btn-outline-light

   Elementor remains responsible for:
   - button placement
   - alignment
   - button-row gap
   - responsive layout

   CSS handles:
   - colour
   - border
   - radius
   - premium shine
   - hover lift
   - glow
   - focus visibility
   ========================================================== */


/* ==========================================================
   SHARED BUTTON BASE
   ========================================================== */

.hc-btn-primary .elementor-button,
.hc-btn-secondary .elementor-button,
.hc-btn-light .elementor-button,
.hc-btn-outline-light .elementor-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  min-height: 50px;

  border-radius: 8px !important;

  font-weight: 600 !important;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


/* Subtle premium shine */
.hc-btn-primary .elementor-button::before,
.hc-btn-secondary .elementor-button::before,
.hc-btn-light .elementor-button::before,
.hc-btn-outline-light .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;

  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.06) 25%,
      rgba(255, 255, 255, 0.34) 48%,
      rgba(255, 255, 255, 0.06) 70%,
      transparent 100%
    );

  transform: translateX(-120%);
  transition:
    transform 0.55s ease,
    opacity 0.25s ease;

  opacity: 0.55;
}


/* Keep Elementor content above shine */
.hc-btn-primary .elementor-button-content-wrapper,
.hc-btn-primary .elementor-button-text,
.hc-btn-primary .elementor-button-icon,
.hc-btn-secondary .elementor-button-content-wrapper,
.hc-btn-secondary .elementor-button-text,
.hc-btn-secondary .elementor-button-icon,
.hc-btn-light .elementor-button-content-wrapper,
.hc-btn-light .elementor-button-text,
.hc-btn-light .elementor-button-icon,
.hc-btn-outline-light .elementor-button-content-wrapper,
.hc-btn-outline-light .elementor-button-text,
.hc-btn-outline-light .elementor-button-icon {
  position: relative;
  z-index: 2;
}


/* Run shine across button on hover */
.hc-btn-primary .elementor-button:hover::before,
.hc-btn-secondary .elementor-button:hover::before,
.hc-btn-light .elementor-button:hover::before,
.hc-btn-outline-light .elementor-button:hover::before {
  transform: translateX(120%);
}


/* ==========================================================
   1. PRIMARY BUTTON
   Red filled button

   Best on:
   - white
   - soft grey
   - charcoal
   ========================================================== */

.hc-btn-primary .elementor-button {
  background: #BC2025 !important;
  color: #FFFFFF !important;

  border: 1px solid #BC2025 !important;

  box-shadow:
    0 8px 20px rgba(188, 32, 37, 0.16);
}


.hc-btn-primary .elementor-button:hover {
  transform: translateY(-3px);

  background: #940C11 !important;
  color: #FFFFFF !important;

  border-color: #D52B31 !important;

  box-shadow:
    0 14px 28px rgba(16, 17, 20, 0.18),
    0 0 14px rgba(188, 32, 37, 0.42),
    0 0 28px rgba(188, 32, 37, 0.18);
}


/* ==========================================================
   2. SECONDARY BUTTON
   Light button with red border

   Best on:
   - white
   - soft grey
   ========================================================== */

.hc-btn-secondary .elementor-button {
  background: #FFFFFF !important;
  color: #BC2025 !important;

  border: 1px solid #BC2025 !important;

  box-shadow:
    0 7px 18px rgba(16, 17, 20, 0.06);
}


.hc-btn-secondary .elementor-button::before {
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(188, 32, 37, 0.02) 25%,
      rgba(188, 32, 37, 0.12) 48%,
      rgba(188, 32, 37, 0.02) 70%,
      transparent 100%
    );
}


.hc-btn-secondary .elementor-button:hover {
  transform: translateY(-3px);

  background: #FBEAEC !important;
  color: #940C11 !important;

  border-color: #BC2025 !important;

  box-shadow:
    0 12px 26px rgba(16, 17, 20, 0.10),
    0 0 14px rgba(188, 32, 37, 0.24),
    0 0 26px rgba(188, 32, 37, 0.10);
}


/* ==========================================================
   3. LIGHT BUTTON
   White filled button

   Best on:
   - Hosted red
   - charcoal
   - near-black
   ========================================================== */

.hc-btn-light .elementor-button {
  background: #FFFFFF !important;
  color: #1C1E22 !important;

  border: 1px solid rgba(255, 255, 255, 0.92) !important;

  box-shadow:
    0 9px 22px rgba(16, 17, 20, 0.18),
    0 0 16px rgba(255, 255, 255, 0.08);
}


.hc-btn-light .elementor-button:hover {
  transform: translateY(-3px);

  background: #FFFFFF !important;
  color: #BC2025 !important;

  border-color: #FFFFFF !important;

  box-shadow:
    0 15px 30px rgba(16, 17, 20, 0.24),
    0 0 14px rgba(255, 255, 255, 0.34),
    0 0 30px rgba(188, 32, 37, 0.18);
}


/* ==========================================================
   4. OUTLINE LIGHT BUTTON
   Transparent / glass-like white outline

   Best on:
   - Hosted red
   - charcoal
   - near-black
   ========================================================== */

.hc-btn-outline-light .elementor-button {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #FFFFFF !important;

  border: 1px solid rgba(255, 255, 255, 0.72) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


.hc-btn-outline-light .elementor-button:hover {
  transform: translateY(-3px);

  background: rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;

  border-color: #FFFFFF !important;

  box-shadow:
    0 14px 28px rgba(16, 17, 20, 0.20),
    0 0 14px rgba(255, 255, 255, 0.24),
    0 0 28px rgba(188, 32, 37, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}


/* ==========================================================
   ENSURE TEXT / ICON COLOURS FOLLOW BUTTON STATE
   ========================================================== */

.hc-btn-primary .elementor-button,
.hc-btn-primary .elementor-button:hover,
.hc-btn-primary .elementor-button-text,
.hc-btn-primary .elementor-button-icon {
  color: #FFFFFF !important;
}


.hc-btn-secondary .elementor-button-text,
.hc-btn-secondary .elementor-button-icon {
  color: inherit !important;
}


.hc-btn-light .elementor-button-text,
.hc-btn-light .elementor-button-icon {
  color: inherit !important;
}


.hc-btn-outline-light .elementor-button-text,
.hc-btn-outline-light .elementor-button-icon {
  color: inherit !important;
}


/* ==========================================================
   KEYBOARD FOCUS

   Clear accessible focus ring.
   ========================================================== */

.hc-btn-primary .elementor-button:focus-visible,
.hc-btn-secondary .elementor-button:focus-visible,
.hc-btn-light .elementor-button:focus-visible,
.hc-btn-outline-light .elementor-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 3px;

  box-shadow:
    0 0 0 5px rgba(188, 32, 37, 0.34),
    0 12px 28px rgba(16, 17, 20, 0.18);
}


/* On light backgrounds, give the secondary button a dark/red focus ring */
.hc-btn-secondary .elementor-button:focus-visible {
  outline-color: #BC2025;

  box-shadow:
    0 0 0 5px rgba(188, 32, 37, 0.16),
    0 12px 28px rgba(16, 17, 20, 0.12);
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

  .hc-btn-primary .elementor-button,
  .hc-btn-secondary .elementor-button,
  .hc-btn-light .elementor-button,
  .hc-btn-outline-light .elementor-button {
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .hc-btn-primary .elementor-button:hover,
  .hc-btn-secondary .elementor-button:hover,
  .hc-btn-light .elementor-button:hover,
  .hc-btn-outline-light .elementor-button:hover {
    transform: none;
  }

  .hc-btn-primary .elementor-button::before,
  .hc-btn-secondary .elementor-button::before,
  .hc-btn-light .elementor-button::before,
  .hc-btn-outline-light .elementor-button::before {
    display: none;
  }

}

/* ==========================================================
   HOSTED COMMUNICATIONS - BUTTON TEXT CENTRING FIX
   ========================================================== */

.hc-btn-primary .elementor-button,
.hc-btn-secondary .elementor-button,
.hc-btn-light .elementor-button,
.hc-btn-outline-light .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Elementor internal button content */
.hc-btn-primary .elementor-button-content-wrapper,
.hc-btn-secondary .elementor-button-content-wrapper,
.hc-btn-light .elementor-button-content-wrapper,
.hc-btn-outline-light .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
}

/* Text itself */
.hc-btn-primary .elementor-button-text,
.hc-btn-secondary .elementor-button-text,
.hc-btn-light .elementor-button-text,
.hc-btn-outline-light .elementor-button-text {
  display: inline-flex;
  align-items: center;

  line-height: 1.2 !important;
}



/* ==========================================================
   03. CARDS
   ========================================================== */

/* ==========================================================
   HOSTED COMMUNICATIONS - PREMIUM PROCESS NUMBER BADGE
   ========================================================== */

.hc-process-number {
  position: absolute !important;

  top: 0;
  left: 0;

  transform: translate(-50%, -50%);

  z-index: 10;

  width: 56px !important;
  height: 56px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 34% 26%,
      #E45257 0%,
      #BC2025 38%,
      #A41318 72%,
      #7F0D11 100%
    );

  border: 1px solid rgba(255, 255, 255, 0.34);

  box-shadow:
    0 10px 22px rgba(16, 17, 20, 0.18),
    0 0 18px rgba(188, 32, 37, 0.20),
    inset 0 1px 1px rgba(255, 255, 255, 0.38),
    inset 0 -4px 8px rgba(90, 0, 5, 0.28);
}

/* Fine inner ring for extra depth */
.hc-process-number::after {
  content: "";
  position: absolute;
  inset: 4px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.16);

  pointer-events: none;
}

/* Elementor inner wrapper */
.hc-process-number .elementor-widget-container {
  width: 100%;
  height: 100%;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  position: relative;
  z-index: 2;
}

/* Number text */
.hc-process-number .elementor-heading-title {
  margin: 0 !important;
  padding: 0 !important;

  color: #FFFFFF !important;

  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  letter-spacing: 0.02em;

  text-align: center !important;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 0 8px rgba(255, 255, 255, 0.12);
}


/* Tablet */
@media (max-width: 1024px) {

  .hc-process-number {
    width: 50px !important;
    height: 50px !important;
  }

  .hc-process-number .elementor-heading-title {
    font-size: 16px !important;
  }

}


/* Mobile */
@media (max-width: 767px) {

  .hc-process-number {
    width: 44px !important;
    height: 44px !important;

    transform: translate(-35%, -35%);
  }

  .hc-process-number .elementor-heading-title {
    font-size: 15px !important;
  }

}


/* ==========================================================
   HOSTED COMMUNICATIONS - PROCESS CARD SEQUENCE

   Card class:
   hc-process-card

   Behaviour:
   - cards remain static by default
   - one card lifts and gains a subtle Hosted-red glow
   - active state progresses 1 -> 2 -> 3 -> 4
   - 12 second continuous cycle
   ========================================================== */


/* Base card behaviour */
.hc-process-card {
  position: relative;
  overflow: visible !important;

  transform: translateY(0);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

  animation: hcProcessCardActive 12s ease-in-out infinite;
}


/* ==========================================================
   SEQUENTIAL TIMING
   ========================================================== */

.hc-process-card:nth-child(1) {
  animation-delay: 0s;
}

.hc-process-card:nth-child(2) {
  animation-delay: 3s;
}

.hc-process-card:nth-child(3) {
  animation-delay: 6s;
}

.hc-process-card:nth-child(4) {
  animation-delay: 9s;
}


/* ==========================================================
   ACTIVE CARD ANIMATION

   Each card is active during roughly the first quarter
   of its own 12-second cycle.
   ========================================================== */

@keyframes hcProcessCardActive {

  /* Normal */
  0% {
    transform: translateY(0);

    box-shadow:
      0 0 0 rgba(188, 32, 37, 0);
  }

  /* Lift quickly */
  3% {
    transform: translateY(-10px);

    box-shadow:
      0 16px 30px rgba(16, 17, 20, 0.14),
      0 0 18px rgba(188, 32, 37, 0.24),
      0 0 34px rgba(188, 32, 37, 0.12);
  }

  /* Hold active state */
  20% {
    transform: translateY(-10px);

    box-shadow:
      0 16px 30px rgba(16, 17, 20, 0.14),
      0 0 18px rgba(188, 32, 37, 0.24),
      0 0 34px rgba(188, 32, 37, 0.12);
  }

  /* Settle back down */
  25% {
    transform: translateY(0);

    box-shadow:
      0 0 0 rgba(188, 32, 37, 0);
  }

  /* Remain inactive while other cards take their turn */
  100% {
    transform: translateY(0);

    box-shadow:
      0 0 0 rgba(188, 32, 37, 0);
  }
}


/* ==========================================================
   DESKTOP HOVER

   Hovering a card gives immediate feedback without
   interfering with the automatic sequence.
   ========================================================== */

@media (hover: hover) {

  .hc-process-card:hover {
    transform: translateY(-10px);

    box-shadow:
      0 16px 30px rgba(16, 17, 20, 0.14),
      0 0 18px rgba(188, 32, 37, 0.24),
      0 0 34px rgba(188, 32, 37, 0.12);
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

  .hc-process-card {
    animation: none;
    transform: none;
    box-shadow: none;
  }

}



/* ==========================================================
   HOSTED COMMUNICATIONS - FLOWING CARD ACCENT

   Elementor class:
   hc-flow-card

   Sequence:
   Card 1 -> Card 2 -> Card 3 -> Card 4 -> repeat

   Timing:
   - 18 second master cycle
   - each line travels for 5 seconds
   - next card starts every 4.5 seconds
   - 0.5 second overlap between cards
   ========================================================== */


/* ==========================================================
   CARD BASE
   ========================================================== */

.hc-flow-card {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
  border-radius: inherit;
}


/* Make Elementor inner container respect clipping */
.hc-flow-card > .e-con-inner {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
}


/* ==========================================================
   MOVING RED / WHITE SIGNAL
   ========================================================== */

.hc-flow-card::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: 0;

  width: 70%;
  height: 3px;

  z-index: 2;
  pointer-events: none;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(188, 32, 37, 0.12) 15%,
      #BC2025 42%,
      #FFFFFF 58%,
      #BC2025 72%,
      transparent 100%
    );

  box-shadow:
    0 0 10px rgba(188, 32, 37, 0.55),
    0 0 18px rgba(255, 255, 255, 0.18);

  opacity: 0;

  animation:
    hcFlowCardLine 18s linear infinite;
}


/* Keep Elementor content above the signal */
.hc-flow-card > * {
  position: relative;
  z-index: 3;
}


/* ==========================================================
   CARD SEQUENCE

   Each card begins 4.5 seconds after the previous card.

   Since each visible traversal lasts 5 seconds,
   there is a 0.5 second hand-off overlap.
   ========================================================== */

.hc-flow-card:nth-child(1)::after {
  animation-delay: 0s;
}

.hc-flow-card:nth-child(2)::after {
  animation-delay: 4.5s;
}

.hc-flow-card:nth-child(3)::after {
  animation-delay: 9s;
}

.hc-flow-card:nth-child(4)::after {
  animation-delay: 13.5s;
}


/* ==========================================================
   FLOW ANIMATION

   5 seconds of an 18 second cycle = 27.78%

   The line begins completely outside the left edge,
   crosses at one constant speed,
   and finishes completely outside the right edge.

   No artificial fade is used during the visible movement.
   The card itself clips the signal.
   ========================================================== */

@keyframes hcFlowCardLine {

  /* Completely outside left edge */
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }

  /* Completely outside right edge after 5 seconds */
  27.777% {
    transform: translateX(142.857%);
    opacity: 1;
  }

  /*
   * Once it has physically left the card,
   * hide it for the rest of its cycle.
   */
  27.778% {
    transform: translateX(142.857%);
    opacity: 0;
  }

  100% {
    transform: translateX(142.857%);
    opacity: 0;
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

  .hc-flow-card::after {
    animation: none;
    transform: translateX(21%);
    opacity: 0.45;
  }

}

/* ==========================================================
   04. SECTION DECORATIONS
   ========================================================== */


/* ==========================================================
   HOSTED COMMUNICATIONS - CLIENT LOGO MARQUEE

   Outer container:
   hc-logo-marquee

   Moving track:
   hc-logo-marquee-track

   Repeated logo sets:
   hc-logo-marquee-set

   Individual Image widgets:
   hc-logo-marquee-item

   Behaviour:
   - seamless infinite movement
   - full-width strip
   - 110px desktop height
   - no gaps between logo items
   - muted grayscale appearance by default
   - baked white backgrounds blend into strip
   - marquee pauses on hover
   - hovered logo shows full colour
   - JavaScript measures exact width of Logo Set 1
   ========================================================== */


/* ==========================================================
   OUTER LOGO STRIP
   ========================================================== */

.hc-logo-marquee {
  position: relative;

  width: 100%;
  height: 110px;

  overflow: hidden !important;
  isolation: isolate;

  background: #FFFFFF;

  margin-top: 50px !important;
  margin-bottom: 0 !important;

  padding: 0 !important;

  border-top: 1px solid #BC2025;
  border-bottom: 1px solid #BC2025;

  display: flex !important;
  align-items: center !important;
}


/* ==========================================================
   MOVING TRACK

   JavaScript sets:
   --hc-marquee-distance

   This track moves by the exact rendered pixel width
   of Logo Set 1.
   ========================================================== */

.hc-logo-marquee-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: stretch !important;

  width: max-content !important;
  min-width: max-content !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: 0 0 auto !important;
  flex-shrink: 0 !important;

  will-change: transform;

  animation: hcLogoMarqueeScroll 75s linear infinite;
}


/* Pause the complete moving track on hover */
.hc-logo-marquee:hover .hc-logo-marquee-track {
  animation-play-state: paused;
}


/* ==========================================================
   DUPLICATED LOGO SETS

   Logo Set 1 and Logo Set 2 must contain:
   - same logos
   - same number of logos
   - same order
   ========================================================== */

.hc-logo-marquee-set {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: stretch !important;

  width: max-content !important;
  min-width: max-content !important;

  height: 110px;

  flex: 0 0 auto !important;
  flex-shrink: 0 !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   INDIVIDUAL LOGO ITEM
   ========================================================== */

.hc-logo-marquee-item {
  position: relative;

  flex: 0 0 auto !important;

  width: auto !important;
  height: 110px !important;

  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent;

  display: block !important;

  overflow: hidden;

  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* Remove Elementor wrapper spacing completely */
.hc-logo-marquee-item .elementor-widget-container {
  width: auto !important;
  height: 110px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;
}


/* ==========================================================
   ACTUAL LOGO IMAGE

   Image fills the strip height.
   Width follows natural aspect ratio.
   ========================================================== */

.hc-logo-marquee-item img {
  display: block !important;

  width: auto !important;
  height: 110px !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain;

  filter: grayscale(100%);
  opacity: 0.58;

  mix-blend-mode: multiply;

  transition:
    filter 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}


/* ==========================================================
   HOVERED LOGO
   ========================================================== */

.hc-logo-marquee-item:hover {
  background: #FFFFFF;

  box-shadow:
    inset 0 0 0 1px rgba(225, 229, 234, 0.85);

  z-index: 3;
}

.hc-logo-marquee-item:hover img {
  filter: grayscale(0%);
  opacity: 1;

  mix-blend-mode: normal;

  transform: none;
}


/* ==========================================================
   SEAMLESS LOOP

   JavaScript measures Logo Set 1 and sets:
   --hc-marquee-distance: ####px;

   The complete track then travels exactly that distance.
   ========================================================== */

@keyframes hcLogoMarqueeScroll {

  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(
      calc(-1 * var(--hc-marquee-distance)),
      0,
      0
    );
  }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

  .hc-logo-marquee,
  .hc-logo-marquee-set {
    height: 95px;
  }

  .hc-logo-marquee-item {
    height: 95px !important;
  }

  .hc-logo-marquee-item .elementor-widget-container {
    height: 95px !important;
  }

  .hc-logo-marquee-item img {
    height: 95px !important;
  }

  .hc-logo-marquee-track {
    animation-duration: 70s;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

  .hc-logo-marquee {
    margin-top: 40px !important;
  }

  .hc-logo-marquee,
  .hc-logo-marquee-set {
    height: 85px;
  }

  .hc-logo-marquee-item {
    height: 85px !important;
  }

  .hc-logo-marquee-item .elementor-widget-container {
    height: 85px !important;
  }

  .hc-logo-marquee-item img {
    height: 85px !important;
  }

  .hc-logo-marquee-track {
    animation-duration: 65s;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

  .hc-logo-marquee {
    overflow-x: auto !important;
  }

  .hc-logo-marquee-track {
    animation: none !important;
    transform: none !important;
  }

  /* Duplicate set unnecessary without movement */
  .hc-logo-marquee-set:nth-child(2) {
    display: none !important;
  }

}



/* ==========================================================
   05. TYPOGRAPHY UTILITIES
   ========================================================== */



/* ==========================================================
   06. RESPONSIVE
   ========================================================== */



/* ==========================================================
   07. ACCESSIBILITY / REDUCED MOTION
   ========================================================== */

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

	/* Motion-based components can be disabled or simplified here. */

}