.hero-slider h2,
.hero-slider h1,
.hero-slider h3,
.hero-slider h4,
.hero-slider p {
  margin: 0
}
.hero-slider .uk-light {
  color: #fff
}
.hero-panel {
  z-index: 2;
}

/*
  Navigation: Suzuki's horizontal rail rather than round dots.

  Their values, from suzuki.com.au's .slick-scroll-bar--flex-dots — 38x3px
  bars, 13px apart, centred, inactive in #b8b8b8 and the current one in the
  deep green-black #0e2c29 they use for it.

  These rules cannot be scoped: UIkit's `uk-slider-nav` builds its own
  <li><a> markup at runtime, and those nodes never receive a scoped
  component's data attribute.
*/
.hero-slider .uk-slider-nav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 13px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 5;
}
.hero-slider .uk-slider-nav > * {
  padding-left: 0;
}

/*
  Written against `.uk-dotnav > * > *` as well as the element, because that is
  the selector UIkit uses to make these round — 10px, 50% radius, 1px border.
  Matching its shape and beating its specificity is what keeps the bars square.
*/
.hero-slider .uk-slider-nav li a,
.hero-slider .uk-slider-nav.uk-dotnav > * > * {
  display: block;
  width: 38px;
  height: 5px;
  border: none;
  border-radius: 0;
  background-color: #b8b8b8;
  transition: background-color 0.2s ease-in-out;
}
.hero-slider .uk-slider-nav li a:hover,
.hero-slider .uk-slider-nav li a:focus {
  background-color: #8f8f8f;
}
.hero-slider .uk-slider-nav li.uk-active a,
.hero-slider .uk-slider-nav.uk-dotnav > .uk-active > * {
  background-color: #0e2c29;
  transform: none;
}


/* Slider item styling */
.uk-slider-items[data-v-788f743a] {
  margin-left: 0;
}

/* Full-bleed: one slide spans the whole viewport, edge to edge, the way the
   OEM runs its own campaign banners. The card treatment this replaced — 4/5
   width, 10px gutter, rounded corners, drop shadow, hover lift — only made
   sense while neighbouring slides were peeking in beside the active one. */
.uk-slider-items > div[data-v-788f743a] {
  padding: 0;
}
.uk-panel[data-v-788f743a] {
  overflow: hidden;
  /* The copy block below positions against this. */
  position: relative;
}

/* Slide content styling */
/*
  Full width at the artwork's own 2280x1600 (1.425:1) would make the hero
  ~1350px tall on a 1920 screen — taller than the viewport, which would put
  the CTA we just moved to the bottom below the fold on load. So desktop
  crops to a 2:1 letterbox (media query below).

  How 2:1 was chosen rather than guessed: Suzuki burns campaign copy into
  several of these banners, and on those the artwork is only used between
  19.8% and 81.2% of frame height — roughly a fifth of clear margin top and
  bottom. That tolerates a symmetric crop down to about 2.3:1 before the
  copy starts getting clipped. 2:1 keeps ~5% in hand, which leaves room for
  next month's campaign to be composed a little tighter without breaking.
  The photography-only slides carry no text and crop freely.

  Go past ~2.2:1 and you start cutting into Suzuki's own headlines —
  re-measure the artwork first.
*/
.slide-image[data-v-788f743a] {
  display: block;
  width: 100%;
  height: auto;
}

/* Keyed off vw, not vh, so the hero keeps one predictable shape instead of
   changing ratio with window height. Mobile is left uncropped: that artwork
   is a separate near-square asset (1280x1380) meant to be seen whole. */
@media (min-width: 960px) {
.slide-image[data-v-788f743a] {
    max-height: 50vw; /* 2:1 — read the note above before changing */
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
}

/* Copy, sub-copy and CTA sit at the FOOT of the slide. On the banners that
   carry burned-in copy this also stops the overlaid button landing on top of
   the OEM's own headline, which is what the previous top placement did. */
.slide-copy[data-v-788f743a] {
  padding: 2rem;
  width: 100%;
  z-index: 5;
  /*
    Legibility scrim. The overlay is white text on a white button, and the
    artwork underneath is not reliably dark: the Hybrid banner fades to a pale
    beige band exactly where this block sits, and next month's campaign is
    somebody else's photograph. A gentle bottom-up gradient keeps the copy
    readable over anything without flattening the image.
    Per-slide escape hatch: the `contrast` override (uk-dark over light art).
  */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    rgba(0, 0, 0, 0) 100%
  );
}
.ford-btn[data-v-788f743a] {
  background-color: #066fef;
  color: white;
  transition: background-color 0.3s;
}
.ford-btn[data-v-788f743a]:hover {
  background-color: #0142BE;
  color: white;
}
.white-btn[data-v-788f743a] {
  background-color: white;
  color: #333;
  border: 2px solid transparent;
  padding: 8px 30px;
  font-family: 'SuzukiSlider', sans-serif !important;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  border-radius: 0;
  transition: all 0.3s ease;
  box-shadow: none;
}
.white-btn[data-v-788f743a]:hover {
  background-color: #333;
  color: white;
  border: 2px solid #333;
  transform: none;
  box-shadow: none;
}

/* Suzuki slider text styling */
.uk-heading-medium[data-v-788f743a] {
  font-family: 'SuzukiSlider', sans-serif !important;
  font-weight: 700 !important;
  font-size: 4rem !important;
  letter-spacing: 0.1rem !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
.uk-heading-small[data-v-788f743a] {
  font-family: 'SuzukiSlider', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.85rem !important;
  letter-spacing: 0.05rem !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

/* Override for heading weight */
.uk-text-normal[data-v-788f743a] {
  font-weight: 700 !important;
  font-family: 'SuzukiSlider', sans-serif !important;
}
@media (max-width: 960px) {
.slide-copy[data-v-788f743a] {
    padding: 1rem;
    width: 100%;
}
  
  /*
    No forced height on mobile. The mobile artwork is near-square (1280x1380)
    and designed to be seen whole; the old 600px floor plus object-fit:cover
    cropped the sides off it, which on the banners with burned-in copy meant
    cropping the words. At full width it stands up at its own ratio.
  */
  
  /* Better mobile button styling */
.white-btn[data-v-788f743a] {
    padding: 12px 24px;
    font-size: 0.85rem;
    min-height: 44px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    max-width: 90%;
    margin: 0 auto;
}
  
  /* Responsive Suzuki text styling */
.uk-heading-medium[data-v-788f743a] {
    font-size: 2.5rem !important;
    letter-spacing: 0.05rem !important;
}
.uk-heading-small[data-v-788f743a] {
    font-size: 1.3rem !important;
    letter-spacing: 0.03rem !important;
}
}

/* The circular prev/next buttons these styled are gone — the OEM hero is
   navigated by the bar rail alone. */


/* Overlay styles for non-active slides */
.slide-overlay[data-v-788f743a] {
  opacity: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 10; /* Ensure it's above other elements */
  text-decoration: none;
  display: block;
}

/*
  The dimming and click-to-advance treatment for neighbouring slides is gone
  with the card layout: at full width exactly one slide is on screen, so there
  is no inactive slide to darken, lift or click. The overlay anchor itself is
  left in the markup — it is inert on the active slide (pointer-events: none
  below) and would come back to life if the deck were ever shown multi-up.
*/

/* Hide overlay on active slides */
.uk-slider-items > div.uk-active .slide-overlay[data-v-788f743a] {
  opacity: 0;
  pointer-events: none;
}
.slide-link[data-v-788f743a] {
  z-index: 1;
}


.swift-hybrid-plus-drive-away-from{
  display: none!important;
}
.filter-nav .uk-active a::before,
.filter-nav a:hover::before {
  right: 0;
  border-bottom: 4px solid #f61e2a;
}
.filter-nav .uk-navbar-nav>li>a {
  font-size: 18px;
  font-weight: 300;
}
.offer-panel-header {
  border: 1px solid #e6e6e6;
}

/* The dealer's logo set mixes white artwork (Swift, Jimny, Ignis, S-Cross)
   with black (Fronx, Vitara). These cards sit on white, so the white ones
   would be invisible — every asset is a transparent PNG or SVG, so
   flattening to black normalises the set, the way Suzuki's own cards run
   them. */
.offer-logo {
  margin-bottom: 18px;
}

/* Small label above the figure — Suzuki sets this in its body bold face at
   13px, uppercased in CSS because the feed's own casing is inconsistent
   ("DRIVE AWAY FROM" / "Drive Away from" on different records). */
.offer-label {
  font-family: "TT Commons Pro Bold", "TTCommons_Bold", Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #121212;
  margin: 0;
}

/* Suzuki's own .offer__price__value — TT Commons Pro DemiBold at 2.5rem,
   which the site registers under the family name TTCommons_DemiBold. */
.offer-price {
  font-family: "TT Commons Pro DemiBold", "TTCommons_DemiBold", Arial, sans-serif;
  font-size: 2.5rem;
  line-height: 1;
  color: #121212;
  margin: 3px 0;
}
.offer-price sup {
  line-height: 0;
  font-size: 20px;
}
.offer-label--after {
  text-transform: none;
  margin-bottom: 20px;
}
.offer-ends {
  font-family: "TT Commons Pro Regular", "TTCommons_Regular", Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin: 0;
}
.offer-cta {
  margin-top: 25px;
}
.offer-disclaimer {
  margin-top: 18px;
  max-width: 34rem;
}

/* Suzuki sets theirs underlined at 11px in grey — quiet enough not to
   compete with the CTA, plain enough to read as a control. */
.offer-disclaimer__toggle {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "TT Commons Pro Regular", "TTCommons_Regular", Helvetica, Arial, sans-serif;
  font-size: 0.6875rem;
  color: #6d6d6d;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.offer-disclaimer__toggle:hover {
  color: #121212;
}
.offer-disclaimer__content {
  margin-top: 0.375rem;
  font-family: "TT Commons Pro Regular", "TTCommons_Regular", Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #6d6d6d;
}
.offer-disclaimer__content p {
  margin: 0 0 0.5rem;
  color: #6d6d6d;
}
@media (min-width: 1025px) {
.offer-label,
  .offer-ends {
    font-size: 0.875rem;
}
}
.offer-logo img {
  max-width: 170px;
  max-height: 44px;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: brightness(0);
}
.iua-container--bg300{
  background: #e4e4e4;
}
.uk-sticky-fixed .uk-margin-auto{
  width: 100%;
}
.icon-tick, .text-red{
  color: red;
}
.uk-navbar-offers{
  z-index:2!important
}
.offer__finance__content {
width: 17.5rem;
padding: .5625rem;
background: #00A499;
display: flex;
align-items: center;
}