/* Hero background slider for the Velotrax banner.
   The theme paints the hero photo on .home-outer-wrapper; we put a slider layer
   behind the header + banner content instead, so the design is unchanged. */

.home-outer-wrapper {
    background-image: none;
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 30px;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 1.1s ease;
}

.hero-slide.is-active {
    opacity: 1;
}

/* Keep the header and banner copy above the slider layer.
   The header wrapper must outrank the banner: they are siblings, and at equal
   z-index the banner (later in the DOM) would paint over the sticky header. */
.home-outer-wrapper > .banner-con,
.home-outer-wrapper > section {
    position: relative;
    z-index: 2;
}

.home-outer-wrapper > .wrapper1533 {
    position: relative;
    z-index: 20;
}

/* text cross-fade between slides */
.banner-inner-con .hero-fade {
    transition: opacity .4s ease;
}

.banner-inner-con.is-changing .hero-fade {
    opacity: 0;
}

/* --- controls: prev / dots / next sit together as one strip ---------------
   Left-aligned with the hero copy: the theme parks a decorative logo badge at
   the bottom centre of the banner, which a centred strip would collide with.
   Mirrors .wrapper1533 so the strip lines up with the headline and buttons. */
.hero-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 38px;
    z-index: 3;
    max-width: 1533px;
    margin-inline: auto;
    padding-inline: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
}

.hero-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-dot {
    width: 34px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgb(255 255 255 / 45%);
    cursor: pointer;
    transition: background .3s ease, width .3s ease;
}

.hero-dot.is-active {
    background: var(--primary--color, #fccf3a);
    width: 52px;
}

.hero-nav-btn {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 45%);
    background: rgb(255 255 255 / 12%);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.hero-nav-btn:hover,
.hero-nav-btn:focus-visible {
    background: var(--primary--color, #fccf3a);
    border-color: var(--primary--color, #fccf3a);
    color: var(--accent--color, #07295c);
    outline: none;
}

@media (max-width: 991px) {
    .hero-controls { bottom: 22px; gap: 12px; }
    .hero-nav-btn { width: 38px; height: 38px; flex: 0 0 38px; font-size: 15px; }
    .hero-dot { width: 24px; }
    .hero-dot.is-active { width: 38px; }
}

/* --- hero text legibility -------------------------------------------------
   The client's photos are brighter/busier than the theme's original hero
   image, so white copy needs a scrim. Gradient uses the theme navy and is
   strongest on the left, where the headline sits. */
.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(7, 41, 92, .92) 0%,
        rgba(7, 41, 92, .80) 30%,
        rgba(7, 41, 92, .50) 56%,
        rgba(7, 41, 92, .22) 100%);
}

/* The theme fixes this pill at 220px, which wraps our longer eyebrow copy
   onto two lines — size it to its content instead. */
.banner-con .banner-top-span {
    width: auto;
    max-width: 100%;
    padding: 7px 20px;
    white-space: nowrap;
    background-color: rgb(255 255 255 / 16%);
}

@media (max-width: 575px) {
    .banner-con .banner-top-span {
        white-space: normal;
        padding: 6px 14px;
    }
}

/* --- slide 1: the Haniel signboard photo -----------------------------------
   This slide is a composed frame, not a plain crop, and it differs from the
   other two in two ways.

   The photo puts the signboard at 39% of its own width, which lands straight
   under the hero headline, and puts it high enough that the floating header
   pill covers the logo. Neither is fixable by cropping: the sign is 39% of the
   frame wide with only 22% of the frame to its right, so no crop moves it
   clear of the text, and nothing exists above it to crop into. So the image
   itself carries a mirrored, darkened extension on the left and on top, which
   pushes the sign to 58% across and 19% down. Both extensions sit under the
   heaviest part of the scrim or behind the header, so they are not visible.

   1. Anchored to the top, never re-centred, or the header eats the logo again.
      The horizontal 90% only bites on tall/narrow viewports, where `cover`
      crops sideways instead -- it keeps the crop on the sign.

   2. The scrim releases earlier on the right. The shared scrim holds ~0.5
      opacity out to 56% and would grey out the logo. This one stays heavy
      across the headline (which never passes 56%) and then drops away. */
.hero-slide--sign {
    background-position: 90% top;
}

.hero-slide--sign::after {
    background: linear-gradient(100deg,
        rgba(7, 41, 92, .94) 0%,
        rgba(7, 41, 92, .91) 36%,
        rgba(7, 41, 92, .87) 52%,
        rgba(7, 41, 92, .78) 56%,
        rgba(7, 41, 92, .34) 61%,
        rgba(7, 41, 92, .18) 67%,
        rgba(7, 41, 92, .12) 80%,
        rgba(7, 41, 92, .10) 100%);
}