/* Pak OZ Sports Co — brand overrides. Loaded after styles.css, theme files untouched. */
:root {
  --primary: #A02832; /* maroon — buttons, links, accents */
  --main: #0A1C40;    /* navy — headings */
}

/* Header/footer logo image (replaces the old text-based wordmark).
   .logo-header img already gets a fixed width from styles.css
   (110px / 136px at >=768px) — max-width/height:auto just lets it
   shrink gracefully if its flex column gets squeezed narrower than
   that on small screens, instead of overflowing. */
.logo-header img {
  max-width: 100%;
  height: auto;
}

.footer-logo-img {
  width: 160px;
  max-width: 100%;
  height: auto;
  display: block;
}

.office-card {
  padding: 20px;
  border: 1px solid var(--line, #ebebeb);
  border-radius: 10px;
}

.office-card strong {
  color: var(--main);
}

.tf-product-sku {
  margin-bottom: 16px;
}

#product-description {
  margin-bottom: 20px;
  line-height: 1.6;
}

.tf-product-desc-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tf-product-desc-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tf-product-desc-bullets .icon-check {
  color: var(--primary);
  margin-top: 4px;
  flex-shrink: 0;
}

.tf-qty-note {
  margin-top: 10px;
  font-size: 13px;
}

.tf-contact-alt {
  margin-top: 14px;
  font-size: 14px;
}

/*
 * Product-grid card labels (category.html / "You May Also Like") show
 * "Title — SKU", longer than the theme's short category-tile text.
 * .tf-btn is `display: inline-flex` (shrink-to-fit), so the theme's own
 * overflow/ellipsis rules on .collection-title never actually clip it —
 * with short text that never mattered, but our longer text overflows the
 * inline-flex box sideways, bleeding into the previous card since
 * .collection-content itself doesn't clip. Force it to size to its own
 * card and wrap instead.
 */
.collection-item .tf-product-card-title {
  display: block;
  width: 100%;
  height: auto;
  min-height: 40px;
  line-height: 1.3;
  padding: 10px 14px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/*
 * The theme's .collection-content is built for a background-image banner
 * tile: it's absolutely positioned over the bottom of .collection-inner
 * so the title floats on top of the image. Our product grid uses a real
 * inline <img> instead of a background image, so that overlay lands the
 * title on top of (or, once the taller "Title — SKU" text above pushes
 * .collection-inner's height around, off of) the product photo instead of
 * below it. Put it back in normal flow under the image.
 */
.collection-item .collection-content {
  position: static;
  z-index: auto;
  bottom: auto;
  left: auto;
  right: auto;
  margin-top: 10px;
}

/* Category-grid card for a product with more than one photo: fade to the
   second photo on hover (front -> back), same idea as the homepage's
   card-product img-product/img-hover swap, but scoped so it doesn't touch
   single-photo product cards, which have no second image to swap to. */
.collection-image.tf-hover-swap {
  position: relative;
}
.collection-image.tf-hover-swap .tf-hover-swap-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.collection-image.tf-hover-swap:hover .tf-hover-swap-img {
  opacity: 1;
}

/* Cross-sell banner (Sports Wear <-> Team Kit Bags) — a deliberately quiet,
   secondary band so it never competes with the main product grid/CTA. */
.tf-cross-sell {
  background-color: #fafafa;
  border-top: 1px solid var(--line, #ebebeb);
  border-bottom: 1px solid var(--line, #ebebeb);
  padding: 28px 0;
}

.tf-cross-sell-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.tf-cross-sell-copy {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tf-cross-sell-copy .icon {
  font-size: 26px;
  color: var(--primary);
  flex-shrink: 0;
}

.tf-cross-sell-title {
  color: var(--main);
  margin-bottom: 2px;
}

.tf-cross-sell-text {
  margin: 0;
  font-size: 14px;
}

.tf-cross-sell-note {
  font-size: 14px;
  margin-top: 10px;
}

/* ---------------------------------------------------------
   Request a Custom Quote form (quote-form.html)
   Built from existing theme primitives (.tf-select, .tf-check-color,
   .tf-cart-checkbox/.tf-checkbox-wrapp, .flat-title spacing) — the rules
   below only add layout/spacing for the parts the theme doesn't ship
   pre-built (numbered sections, dropzone, file list, swatch/size grids).
--------------------------------------------------------- */
.tf-required {
  color: var(--primary);
}

.tf-quote-section {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

.tf-quote-section:first-of-type {
  padding-top: 0;
}

.tf-quote-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.tf-quote-section-num {
  font-family: var(--font-heading, inherit);
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tf-quote-section-heading h6 {
  color: var(--main);
  margin-bottom: 2px;
}

.tf-quote-field label,
.tf-quote-group-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--main);
  margin-bottom: 8px;
}

.tf-quote-field input,
.tf-quote-field textarea,
.tf-quote-field .tf-select {
  width: 100%;
}

.tf-field-hint {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 8px;
  margin-bottom: 0;
}

.tf-field-error {
  font-size: 13px;
  color: var(--red_1, #db1215);
  margin-top: 6px;
  margin-bottom: 0;
  min-height: 0;
}

.tf-field-error:empty {
  display: none;
}

.tf-field-error-general {
  text-align: center;
  margin-bottom: 14px;
  font-size: 14px;
}

.has-error {
  border-color: var(--red_1, #db1215) !important;
}

/* checkbox groups (Printing & Decoration, Labels & Branding) */
.tf-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.quote-form .tf-cart-checkbox {
  gap: 10px;
}

.quote-form .tf-cart-checkbox label {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}

/* color swatch grid */
.tf-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tf-swatch-item {
  display: inline-flex;
  cursor: pointer;
}

.tf-swatch-item .tf-check-color {
  box-shadow: 0 0 0 1px var(--line);
}

.tf-swatch-item .tf-check-color:checked {
  box-shadow: 0 0 0 2px var(--primary);
}

/* size grid */
.tf-size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.tf-size-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.tf-size-item .tf-cart-checkbox {
  gap: 8px;
}

.tf-size-item .tf-cart-checkbox label {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--main);
}

.tf-size-qty {
  width: 60px !important;
  height: 34px;
  padding: 4px 8px !important;
  text-align: center;
  font-size: 13px;
}

.tf-size-qty:disabled {
  background-color: var(--bg-2);
  color: var(--text-2);
}

/* upload dropzone */
.tf-dropzone {
  position: relative;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background-color: var(--bg-2);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.tf-dropzone:hover,
.tf-dropzone.is-dragover {
  border-color: var(--primary);
  background-color: var(--white);
}

.tf-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.tf-dropzone-inner .icon {
  font-size: 30px;
  color: var(--primary);
  margin-bottom: 10px;
  display: inline-block;
}

.tf-dropzone-inner p {
  margin-bottom: 4px;
}

.tf-file-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.tf-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.tf-file-thumb {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-2);
  color: var(--primary);
  font-size: 18px;
}

.tf-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tf-file-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.tf-file-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tf-file-size {
  font-size: 12px;
}

.tf-file-remove {
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}

.tf-file-remove:hover {
  color: var(--primary);
}

/* submit + success panel */
.tf-quote-submit {
  padding-top: 30px;
  text-align: center;
}

.tf-quote-submit .tf-btn {
  min-width: 260px;
}

.tf-quote-success {
  text-align: center;
  padding: 60px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--bg-2);
  margin-bottom: 30px;
}

.tf-quote-success .icon-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--success);
  color: var(--white);
  font-size: 20px;
  margin-bottom: 16px;
}

.tf-quote-success h5 {
  color: var(--main);
}

@media (max-width: 575px) {
  .tf-size-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .tf-quote-submit .tf-btn {
    width: 100%;
    min-width: 0;
  }
}

/* ---------------------------------------------------------
   Mobile header (<768px) — fixes logo/search overlap.

   Root cause: the header row uses Bootstrap's un-suffixed (xs)
   column widths below 768px — hamburger 25% / logo 50% / icons
   25% — sized for the theme's original short image logo and an
   icon-only nav-icon list. This site swapped in a two-line text
   logo and a full-text "Request a Quote" button, and nothing in
   the chain (.nav-icon ul, its <li>, the .tf-btn itself) shrinks
   or wraps that button to fit a ~25%-width column, so its real
   content width (search icon + gap + button) is far wider than
   the column. Since the column itself doesn't clip, that content
   overflows past the column's left edge and paints on top of the
   logo (later DOM elements paint over earlier ones by default).

   Fix: give the row an explicit shrink-safe flex layout instead
   of relying on the raw percentage columns, and drop the header's
   full-text quote button on mobile — the same action already has
   a persistent "Quote" tab in the fixed bottom toolbar below 1150px
   (see .tf-toolbar-bottom.type-1150 in styles.css), so nothing is
   lost by not duplicating it in the cramped header row.
--------------------------------------------------------- */
@media (max-width: 767.98px) {
  .header-default .wrapper-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }

  /* hamburger: fixed to its own content size, never stretched/shrunk */
  .header-default .wrapper-header .tf-lg-hidden {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  /* logo: the only column allowed to shrink, so it truncates instead
     of overflowing into its neighbors */
  .header-default .wrapper-header .col-xl-3.col-md-4.col-6 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  /* icons: fixed to its own content size (just the search icon once
     the quote button is hidden below) */
  .header-default .wrapper-header .col-xl-3.col-md-4.col-3 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .header-default .logo-header {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
  }

  .header-default .wrapper-header .nav-icon.gap-20 {
    gap: 16px;
  }

  .header-default .wrapper-header .nav-icon .nav-search .nav-icon-item {
    margin-right: 2px;
  }

  .header-default .wrapper-header .nav-icon .tf-btn.btn-fill.animate-hover-btn.radius-3 {
    display: none;
  }

  /* Hamburger + search: icon glyphs are 16-18px, well under a comfortable
     tap target. Grow the clickable box via flex centering instead of the
     icon itself, so nothing looks different, it's just easier to hit. */
  .header-default .wrapper-header .tf-lg-hidden a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .header-default .wrapper-header .nav-icon .nav-icon-item {
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------
   Mobile grid overflow fix (<768px).

   .tf-grid-layout's column tracks are plain `1fr` (see styles.css),
   which CSS Grid still sizes to at least each item's min-content —
   it won't shrink a track below that even though the fr unit
   implies flexible sizing. On category tiles/product cards this
   pushes the two mobile columns (.tf-col-2) wider than the
   viewport, forcing the whole grid (and the page) to overflow
   horizontally instead of reflowing to fit. Resetting each grid
   item's own min-width to 0 lets the fr tracks actually shrink to
   the container width, matching every other page that doesn't hit
   this (their grids never needed to shrink past min-content on
   desktop, so this has no visible effect there).
--------------------------------------------------------- */
/* ---------------------------------------------------------
   Homepage hero slider (.tf-slideshow.slider-effect-fade)

   Root cause: the theme's own .wrap-slider rules (styles.css)
   give the slide <img> `height: 100%` with no explicit height on
   .wrap-slider itself, so the percentage resolves to `auto` — the
   image just renders at its natural aspect ratio and object-fit
   never actually crops anything. That was harmless for the theme's
   original wide, pre-cropped demo banners, but our real photos are
   arbitrary (often portrait) aspect ratios, so without a fixed hero
   height + object-fit:cover: (a) each slide would render a wildly
   different height, (b) portrait photos would blow the hero up to
   several screen-heights tall. There's also no overlay and no text
   color override, so the default heading color (navy, from the
   global h1 rule) sits directly on the photo with nothing behind
   it for contrast — the overlapping/unreadable text bug.

   Fix: give the slide a fixed, breakpoint-scaled height, stack
   image -> gradient overlay -> text with explicit z-index, and
   force light text over the overlay. object-position per slide
   (via the hero-slide--* modifier) keeps each photo's subject
   framed at every width instead of just cropping from center.
--------------------------------------------------------- */
.slider-effect-fade .wrap-slider {
  height: 460px;
  overflow: hidden;
}

.slider-effect-fade .wrap-slider img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-effect-fade .wrap-slider.hero-slide--huddle img {
  object-position: 50% 55%;
}

.slider-effect-fade .wrap-slider.hero-slide--rugby img {
  object-position: 50% 42%;
}

.slider-effect-fade .wrap-slider.hero-slide--field img {
  object-position: 50% 68%;
}

.slider-effect-fade .wrap-slider .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to right, rgba(10, 28, 64, 0.75), rgba(10, 28, 64, 0.3));
  pointer-events: none;
}

.slider-effect-fade .wrap-slider .box-content {
  z-index: 3;
  width: 100%;
  padding: 0 24px;
}

.slider-effect-fade .wrap-slider .box-content .container {
  max-width: 640px;
}

.slider-effect-fade .wrap-slider .box-content h1,
.slider-effect-fade .wrap-slider .box-content p {
  color: var(--white);
}

@media (min-width: 576px) {
  .slider-effect-fade .wrap-slider {
    height: 500px;
  }
}

@media (min-width: 768px) {
  .slider-effect-fade .wrap-slider {
    height: 560px;
  }

  .slider-effect-fade .wrap-slider .box-content {
    padding: 0 40px;
  }
}

@media (min-width: 1024px) {
  .slider-effect-fade .wrap-slider {
    height: 620px;
  }
}

@media (min-width: 1440px) {
  .slider-effect-fade .wrap-slider {
    height: 660px;
  }
}

/* ---------------------------------------------------------
   "Made in Sialkot, Pakistan" banner-collection image
   (.tf-img-with-text.style-5 on the homepage).

   .tf-image-wrap has no fixed height of its own — in the 2-col
   grid its row height is whatever CSS Grid's implicit auto-sizing
   picks (the taller of the image's natural height vs. the text
   column's natural height at that column width), so the crop ratio
   this photo gets isn't constant: it's close to the source image's
   own aspect at both mobile (stacked, 1 col) and wide desktop
   (text column is short relative to the image), and noticeably
   taller/cropped only in the ~700-1023px 2-col range where the text
   column is taller than the image. Across all of those, the box is
   always relatively wider than this portrait product photo, so
   object-fit:cover always crops top/bottom, never the sides — a
   single vertical object-position keeps the jerseys in frame
   everywhere without needing per-breakpoint tuning.
--------------------------------------------------------- */
.hero-product-shot img {
  object-position: 50% 55%;
}

@media (max-width: 767.98px) {
  .tf-grid-layout > * {
    min-width: 0;
  }

  /* Same overflow pattern as .tf-product-card-title above (.tf-btn is
     shrink-to-fit and ignores its absolutely-positioned parent's width),
     but for the theme's own static category tiles on
     shop-collection-list.html, which use the un-customized
     .collection-title class directly. */
  .collection-item .collection-title {
    display: block;
    width: 100%;
    height: auto;
    min-height: 40px;
    line-height: 1.3;
    padding: 10px 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Contact page map: the 894px height attribute is sized for the desktop
     2-column layout (map matches the office-details column's height). On
     mobile the columns stack, so that height just pushes all the real
     contact info far down the page before it's ever seen. */
  #contact-map {
    height: 320px;
  }

  /* "Popular Categories" tab row (.widget-tab-3.style-3): the row is
     `d-flex justify-content-center` (Bootstrap utility, in the HTML)
     with `overflow-x: auto` (styles.css) and no horizontal padding.
     Centering a flex line that's wider than its container makes the
     line overflow equally on both sides — so at the default
     scrollLeft: 0, the *start* of the first tab is already behind the
     left edge instead of sitting at the scroll origin, clipping
     "Sports Wear" down to "...ear". flex-start makes scrollLeft: 0
     line up with the true start of the content, and the added
     padding keeps the first/last tab off the screen edge. .nav-tab-item
     already has white-space:nowrap (styles.css), so labels size to
     their own text instead of wrapping or clipping mid-word.
     Bootstrap's .justify-content-center utility sets `!important`,
     so the override needs it too. */
  .widget-tab-3.style-3.justify-content-center {
    justify-content: flex-start !important;
    padding: 0 20px;
    scroll-padding-left: 20px;
  }

  .widget-tab-3.style-3 .nav-tab-item {
    flex: 0 0 auto;
  }

  .widget-tab-3.style-3 .nav-tab-item:last-child {
    margin-right: 20px;
  }
}

/* WhatsApp floating action button — fixed bottom-right on every page.
   #goTop (styles.css) already sits at bottom:90px/right:40px, clearing
   the 67px-tall .tf-toolbar-bottom mobile nav (shown below 1150px) with
   room to spare, so this button stacks directly above #goTop (its top
   edge at 90+38=128px) with a clear gap, rather than sitting beside it —
   that keeps a single position correct at every breakpoint instead of
   needing separate mobile/desktop offsets. */
.tf-whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 140px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 1001;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tf-whatsapp-float i {
  font-size: 30px;
  color: #fff;
}

.tf-whatsapp-float:hover,
.tf-whatsapp-float:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

.tf-whatsapp-float:active {
  transform: scale(0.95);
}

@media (max-width: 575.98px) {
  .tf-whatsapp-float {
    right: 16px;
    bottom: 130px;
    width: 50px;
    height: 50px;
  }

  .tf-whatsapp-float i {
    font-size: 26px;
  }
}

/* ---------------------------------------------------------
   Homepage "How It Works" — zigzag of numbered process steps.
   Desktop: 10-col grid, odd steps on the top row, even steps on
   the bottom row, each circle spanning 2 cols so neighbours
   overlap by half and the arrows run diagonally between them.
   Below 992px it collapses to a plain 3-col grid, arrows hidden.
--------------------------------------------------------- */
.how-it-works {
  background: #f7f7f7;
}

.hiw-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary);
}

.how-it-works .flat-title .title {
  font-size: 34px;
  line-height: 1.2;
  color: var(--main);
}

.how-it-works .flat-title .title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 14px auto 0;
  background: var(--primary);
}

.hiw-steps {
  list-style: none;
  margin: 50px 0 0;
  padding: 0;
  counter-reset: hiw;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  row-gap: 70px;
}

.hiw-step {
  position: relative;
  grid-column: span 2;
  counter-increment: hiw;
}

.hiw-step:nth-child(odd)  { grid-row: 1; }
.hiw-step:nth-child(even) { grid-row: 2; }
.hiw-step:nth-child(1) { grid-column: 1 / 3; }
.hiw-step:nth-child(2) { grid-column: 2 / 4; }
.hiw-step:nth-child(3) { grid-column: 3 / 5; }
.hiw-step:nth-child(4) { grid-column: 4 / 6; }
.hiw-step:nth-child(5) { grid-column: 5 / 7; }
.hiw-step:nth-child(6) { grid-column: 6 / 8; }
.hiw-step:nth-child(7) { grid-column: 7 / 9; }
.hiw-step:nth-child(8) { grid-column: 8 / 10; }
.hiw-step:nth-child(9) { grid-column: 9 / 11; }

.hiw-circle {
  position: relative;
  width: 72%;
  max-width: 170px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--main);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(10, 28, 64, 0.18);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.hiw-step:hover .hiw-circle {
  transform: translateY(-6px);
  background: var(--primary);
}

/* step number badge */
.hiw-circle::before {
  content: counter(hiw, decimal-leading-zero);
  position: absolute;
  top: 4%;
  right: 4%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #f7f7f7;
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
  transition: background-color 0.3s ease;
}

.hiw-step:hover .hiw-circle::before {
  background: var(--main);
}

.hiw-circle svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hiw-circle span {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* diagonal arrow to the next step: down-right from the top row,
   up-right from the bottom row */
.hiw-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(75% - 22px);
  width: 44px;
  height: 80px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 80' fill='none' stroke='%23A02832' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4c6 26 18 48 34 70'/%3E%3Cpath d='M26 70l12 4 1-13'/%3E%3C/svg%3E");
}

.hiw-step:nth-child(odd):not(:last-child)::after {
  top: calc(100% - 20px);
}

.hiw-step:nth-child(even)::after {
  bottom: calc(100% - 20px);
  transform: scaleY(-1);
}

.hiw-cta {
  margin-top: 50px;
}

@media (max-width: 1199px) {
  .hiw-circle span {
    font-size: 12px;
  }
  .hiw-circle svg {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 991px) {
  .hiw-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 16px;
  }
  .hiw-step:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
  .hiw-step::after {
    display: none;
  }
  .hiw-circle {
    width: 100%;
    max-width: 150px;
  }
  .how-it-works .flat-title .title {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .hiw-circle {
    gap: 6px;
    padding: 10px;
  }
  .hiw-circle svg {
    width: 24px;
    height: 24px;
  }
  .hiw-circle span {
    font-size: 10px;
    letter-spacing: 0;
  }
  .hiw-circle::before {
    width: 26px;
    height: 26px;
    font-size: 10px;
    line-height: 20px;
    top: 0;
    right: 0;
  }
}