/* ==========================================================================
   SV Steels Chennai — home page (index.html) styles
   Loaded AFTER assets/css/style.css and assets/css/sv-chennai.css so it can
   override both. Page-specific rules only — anything used sitewide belongs in
   sv-chennai.css.
   Do not edit style.css — that file is compiled from SCSS (style.css.map).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. About section — keep the CTA and profile on a single row, sitting together.

   style.css sets justify-content:space-between on this row. That read correctly
   while a third item (the "Trusted Steel" tagline) filled the middle, but with
   only the button and the profile left it pushed them to opposite ends of the
   column and opened a wide gap. Packed to the start instead, so the spacing is
   the gap value rather than whatever is left over.

   flex-wrap:nowrap is kept at xl and up — the template otherwise wraps the row
   and drops "MORE ABOUT US" onto a line of its own. Below xl the wrapping is
   left intact, since there is no room for both side by side.
   -------------------------------------------------------------------------- */
.aboutone__blocktwo {
  justify-content: flex-start;
}

@media (min-width: 1200px) {
  .aboutone__blocktwo {
    flex-wrap: nowrap;
    gap: 48px;
  }

  .aboutone__blocktwo>.custom-btn,
  .aboutone__blocktwo .aboutone__profile {
    flex: 0 0 auto;
  }

  .aboutone__blocktwo .aboutone__profile-name,
  .aboutone__blocktwo .aboutone__profile-content p {
    white-space: nowrap;
  }
}

@media (min-width: 1400px) {
  .aboutone__blocktwo {
    gap: 56px;
  }
}

/* --------------------------------------------------------------------------
   2. "Get Today's Rate" CTA band — shorter than the sitewide section-padding
   rhythm (120/100/80px), stepped down at the template's own breakpoints.

   Note: the band's height is driven by the right-hand image, not the text
   column. cta-thumb1_1.png is 918x741 and .ctaone__thumb widens it past the
   column with negative margins (-150px left, -80px right), so it renders
   ~720px tall and the text column never reaches it. Trimming the padding
   alone therefore changes nothing visible — the image has to be capped too.
   -------------------------------------------------------------------------- */
.ctaone .ctaone-content.section-padding {
  padding-top: 72px;
  padding-bottom: 72px;
}

.ctaone__thumb img {
  display: block;
  max-height: 500px;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1499.98px) {
  .ctaone .ctaone-content.section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (max-width: 1199.98px) {
  .ctaone .ctaone-content.section-padding {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .ctaone__thumb img {
    max-height: 380px;
  }
}

/* --------------------------------------------------------------------------
   3. Page headings — black instead of the template's gold
   (.typo-secondary-color resolves to --secondary-color, #AE8333).

   Covers the banner H1 and all three slide headings, plus every section H2:
   A Strategic Steel Supply Partner in Chennai / Steel Products Available in
   Chennai / Steel Supply Services in Chennai / SV Steels Chennai at a Glance /
   Why Chennai Builders Buy Steel from SV Steels / Client Reviews &
   Testimonials / Steel Price & Buying Guides for Chennai.

   The :not(.text-white) guard deliberately spares the two headings that sit on
   dark bands — "Steel Prices Move Daily" and "Builders, Fabricators &
   Contractors Across Chennai" — where black would be unreadable.
   -------------------------------------------------------------------------- */
h1.typo-secondary-color,
h2.typo-secondary-color:not(.text-white) {
  color: var(--black-color);
}

/* --------------------------------------------------------------------------
   4. Primary buttons — deep red at rest, gold on hover.

   The template ships both states as #AE8333 (--primary-color at rest via
   .custom-btn--primary, --secondary-color on hover via .custom-btn:hover), so
   hovering currently produces no visible change. Both are set explicitly here
   so the swap survives any later change to those variables. Label and arrow
   stay white in both states, which the template already handles.
   -------------------------------------------------------------------------- */
.custom-btn--primary {
  background: #670D0F;
  border-color: #670D0F;
}

.custom-btn--primary:hover,
.custom-btn--primary:focus-visible {
  background: #AE8333;
  border-color: #AE8333;
}

/* --------------------------------------------------------------------------
   5. "What We Offer / Steel Supply Services in Chennai" section — same red-to-
   gold treatment on its own buttons, which use different classes to the
   .custom-btn CTAs above and so were unaffected by section 4.
   -------------------------------------------------------------------------- */

/* Top spacing is handled by the .sv-pt-0 utility on the section itself
   (defined in sv-chennai.css) — the section sits flush under the CTA band. */

/* Card icons — maroon tile with a white glyph at rest, gold tile on hover.

   Each icon is an inline 87x56 SVG made of three parts:
     <rect>                     the 56x56 background tile
     <path class="icon">        the glyph itself (one or two paths)
     <path d="M56 28H87...">    the triangular tail off the right edge
   The markup ships inconsistent fill attributes (two cards are grey-on-maroon,
   one is maroon-on-grey), so colour is driven entirely from here instead:
   rect + any path WITHOUT .icon is background, .icon is the glyph. Presentation
   attributes like fill="#F5F5F5" lose to any CSS rule, so no !important needed —
   home.css already loads after both style.css and sv-chennai.css. */
.servicetwo__card-icon svg rect,
.servicetwo__card-icon svg path:not(.icon) {
  fill: #670D0F;
}

.servicetwo__card-icon svg .icon {
  fill: var(--white-color);
}

.servicetwo__card:hover .servicetwo__card-icon svg rect,
.servicetwo__card:hover .servicetwo__card-icon svg path:not(.icon) {
  fill: #AE8333;
}

/* glyph stays white through the swap */
.servicetwo__card:hover .servicetwo__card-icon svg .icon {
  fill: var(--white-color);
}

/* style.css transitions <path> but not <rect>, so the tile would snap to gold
   while the tail faded. Match them. */
.servicetwo__card-icon svg rect {
  transition: var(--transition);
}

/* READ MORE bar across the foot of each service card. */
.servicetwo__card-link {
  background: #670D0F;
}

.servicetwo__card-link:hover,
.servicetwo__card-link:focus-visible {
  background: #AE8333;
  color: var(--white-color);
}

/* Trailing rule that runs out of the READ MORE bar; follows the hover state. */
.servicetwo__card:hover .servicetwo__card-link:before {
  background: #AE8333;
}

/* "VIEW ALL PRODUCTS" pill. The template ships it white with a grey border; it
   is now filled to match the other buttons. The label needs its colour forced
   in both states because the anchor carries .typo-secondary-color (gold) and
   .hover-color (gold on hover) in the markup. */
.servicetwo__button a {
  background: #670D0F;
  border-color: #670D0F;
  color: var(--white-color);
}

.servicetwo__button a:hover,
.servicetwo__button a:focus-visible {
  background: #AE8333;
  border-color: #AE8333;
  color: var(--white-color);
}

/* --------------------------------------------------------------------------
   6. "Get Today's Rate" CTA band — accent colours.

   The band is the template's CTA layout with its two colours remapped:
   the #0E121D panel becomes brand gold and the #FF5E14 accents become deep
   red. Gold already arrives from .bg-text-secondary-color (--secondary-color)
   but is pinned here so the band survives any later change to that variable.

   The accents that live in markup — both diagonal chevrons and the eyebrow's
   rule-and-circle — are set to #670D0F on the SVGs themselves; only the
   eyebrow label needs overriding here, because .typo-primary-color resolved it
   to gold and it disappeared into the panel.
   -------------------------------------------------------------------------- */
.ctaone {
  background-color: #AE8333;
}

.ctaone .section-top__subtitle {
  color: #670D0F;
}

/* The chevrons and the photo are positioned with z-index 0; the copy column is
   static, so both painted over it and clipped the paragraph mid-word. Lift the
   whole column above them. */
.ctaone .ctaone-content {
  position: relative;
  z-index: 6;
}

/* Full-strength white — the template's 70% white was pitched at a near-black
   panel and goes muddy on gold. Capped short of the diagonal so every line
   ends on flat gold rather than running onto the red band. */
.ctaone .testimonialone__desc {
  color: var(--white-color);
}

@media (min-width: 1200px) {
  .ctaone .testimonialone__desc {
    max-width: 520px;
  }
}

/* Section 4 hovers primary buttons to gold, which is this band's own
   background — the button would vanish. Darken the red instead. */
.ctaone .custom-btn--primary:hover,
.ctaone .custom-btn--primary:focus-visible {
  background: #4A090B;
  border-color: #4A090B;
}

/* --------------------------------------------------------------------------
   7. "Builders, Fabricators & Contractors Across Chennai" — six logos per row.

   The template's fixed 72px side padding makes each tile ~261px, so six would
   not fit either container width (1108px at xl, 1320px at xxl) and the sixth
   wrapped to a line of its own. The tiles share the row equally instead, which
   holds six across at both widths and keeps the dividing rules even.

   Below xl the row is left to wrap on its own — three-up on tablet, two-up on
   phones — which is what the template already does.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {

  .clientone__logowrap,
  .clientone__logowrap-two {
    flex-wrap: nowrap;
  }

  .clientone__logowrap .clientone__logo,
  .clientone__logowrap-two .clientone__logo {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* The template gives every tile a right-hand rule, so the last column in each
   row ends with a divider against nothing. Drop it — the rules should only sit
   between logos. */
.clientone__logowrap .clientone__logo:last-child,
.clientone__logowrap-two .clientone__logo:last-child {
  border-right: none;
}

/* --------------------------------------------------------------------------
   8. "Get Today's Rate" CTA band — one composition at every desktop width.

   The template sizes the band's three artwork layers in fixed pixels: the
   masked wedge is as wide as its 890px jpg, the chevrons are a 404x757 svg at
   a percentage offset, and the photo is a 918x741 png centred in its grid
   column. The panel width, however, follows the viewport. So the further the
   viewport gets from ~1920px — zooming the browser out is the same thing —
   the more the three layers slide out of register with each other and with
   the copy, until the wedge sits under the headline and the band reads as a
   thin strip.

   Everything below sizes those layers as a percentage of the band instead,
   and gives the band a height that tracks its width, so the proportions hold
   at any width or zoom level. Text keeps its own size, as it should — only
   the artwork scales.

   The height is a floor rather than a fixed value: at narrower widths the
   proportional height would be shorter than the copy itself, and the copy
   must never be clipped. That floor is why the artwork looks slightly larger
   below ~1700px — the one place the proportions can't be held, because text
   does not shrink with the viewport.

   Held down to 768px. Below that there is no room for two columns and the
   template's stacked layout takes over.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ctaone {
    display: flex;
    align-items: center;
    min-height: clamp(440px, 26vw, 660px);
  }

  .ctaone>.container {
    width: 100%;
  }

  /* The photo is positioned against the band below, so its column no longer
     sets the band height and the copy can centre in it. */
  .ctaone .ctaone-content.section-padding {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* Two columns down to 768px — the col-xl-6 pair would otherwise stack at
     1199px and the composition would break in half. */
  .ctaone>.container>.row>.col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  /* White wedge: same 46% of the band at every width. The mask is a fixed
     viewBox, so it has to be stretched to the box rather than left at its
     intrinsic size. The image overhangs top and bottom to absorb the
     data-speed parallax without opening a gap at either edge. */
  .ctaone__shapeone {
    top: 0;
    bottom: 0;
    right: 0;
    width: 34%;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* Scaled to the wedge's width with its aspect intact, top-aligned, so the
     band always crops the same part of the illustration. min-height only bites
     on the narrow widths where the band's floor makes it taller than the
     illustration, which would otherwise leave the wedge short of the foot. */
  .ctaone__shapeone img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  /* Red chevrons: scaled by viewport width, not left at their intrinsic 404px,
     so the diagonal keeps both its angle and its place in the panel. The band
     crops the tall svg exactly as it does today. */
  .ctaone__shapetwo svg {
    display: block;
    width: 21vw;
    height: auto;
  }

  /* Photo: pulled out of the grid column and pinned to the foot of the band.
     Sized as a share of the band's width, not its height — the height has a
     floor, so height-based sizing would swell the photo across the copy at
     narrow widths. */
  .ctaone__thumb {
    position: absolute;
    right: 8%;
    bottom: 0;
    width: 32%;
    z-index: 5;
    margin: 0;
  }

  .ctaone__thumb img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    max-width: none;
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   9. Product and service cards — equal heights across each row.

   Both grids let each card size to its own content, so a two-line title or a
   longer description made one card in a row taller than its neighbours and
   left the row ragged. Bootstrap already stretches the columns; what was
   missing is the card filling that column and one flexible band inside the
   card to absorb the difference.

   In .service-cardone the source order is top / content / thumb, so growing
   the content band pins every thumbnail to a common baseline. In
   .servicetwo__card it is thumb / content / link, so the same trick lines up
   the READ MORE bars.
   -------------------------------------------------------------------------- */
.serviceone .row>[class*="col-"],
.servicetwo .row>[class*="col-"] {
  display: flex;
}

.serviceone .service-cardone,
.servicetwo .servicetwo__card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.serviceone .service-cardone__content,
.servicetwo .servicetwo__card-content {
  flex: 1 1 auto;
}

/* Shorter cards: the 419x256 thumbnails render near full height at desktop
   column width and were the bulk of each card. Cropping them and easing the
   content padding takes roughly 90px off without touching the type. */
.serviceone .service-cardone__thumb img {
  height: 300px;
  object-fit: cover;
}

.serviceone .service-cardone__content {
  padding: 20px 24px 24px 32px;
}

@media (max-width: 1199.98px) {
  .serviceone .service-cardone__thumb img {
    height: 170px;
  }
}

/* --------------------------------------------------------------------------
   10. "What We Offer" cards — matching thumbnails, unstretched READ MORE.

   The three photos are very different shapes: services-structural.webp is
   680x447 (3:2) while services-rounds.jpg and services-flats-new.jpg are
   271x267 (square). The template's .servicetwo__card-thumb has no height, so
   `height: 100%` on the image resolved to auto and each rendered at its own
   ratio — the two square ones stood far taller than the first card. A fixed
   height plus object-fit crops all three to the first card's proportions.
   248px is what card one already occupied at desktop (its natural ~280px less
   the template's -17/-15 bleed margins), so the row keeps its original height.

   Section 9 turned the card into a column flex container, which stretched the
   READ MORE bar to full width — it is inline-flex in the template and sized to
   its label. flex-start restores that.
   -------------------------------------------------------------------------- */
.servicetwo .servicetwo__card-thumb img {
  height: 248px;
  object-fit: cover;
  margin-top: 0;
  margin-bottom: 0;
}

.servicetwo .servicetwo__card-link {
  align-self: flex-start;
}

@media (max-width: 1199.98px) {
  .servicetwo .servicetwo__card-thumb img {
    height: 220px;
  }
}

/* --------------------------------------------------------------------------
   11. "Why Chennai Builders Buy Steel from SV Steels" — maroon feature icons.

   The right-hand list draws its icons from CSS, not from the inline fills in
   the markup: .wcuone__featureitem svg path is pinned to --secondary-color.
   The active row is also covered, where the template fills the icon with
   --primary-color on a --secondary-color background — both #AE8333, so the
   icon vanished into its own highlight. Maroon reads against the gold.
   -------------------------------------------------------------------------- */
.wcuone__featureitem svg path,
.wcuone__featureitem.active svg path {
  fill: #670D0F;
}

/* --------------------------------------------------------------------------
   12. Client logo strip — even, slightly larger marks.

   The template sizes each logo 117x56 with object-fit: cover, which CROPS to
   fill the box. On photographs that is fine; on transparent brand marks of
   differing proportions it clipped the wide ones and blew up the tall ones, so
   no two read at the same weight. `contain` fits each mark whole inside a
   shared box, which is what makes them look even.

   Box grown to 150x72. Cell padding comes down to keep six across one row:
   6 x (150 + 68) = 1308px inside the 1352px container.
   -------------------------------------------------------------------------- */
.clientone__logo img {
  width: 150px;
  height: 72px;
  object-fit: contain;
}

.clientone__logo {
  padding: 24px 34px;
}

/* 1140px container — scale down rather than let the sixth logo wrap. */
@media (max-width: 1399.98px) {
  .clientone__logo img {
    width: 124px;
    height: 62px;
  }

  .clientone__logo {
    padding: 20px 24px;
  }
}

@media (max-width: 991.98px) {
  .clientone__logo img {
    width: 110px;
    height: 56px;
  }

  .clientone__logo {
    padding: 16px 20px;
  }
}

/* --------------------------------------------------------------------------
   13. About section imagery — square-cornered photo pair with a stock badge.

   The template's two mask-cut wedges are gone. In their place: a primary photo
   filling the column, a smaller secondary photo inset over its bottom-right
   corner, and a maroon badge on the bottom-left. No rounding on either photo.

   At xl the copy and the photos sit side by side, and the photo block is
   matched to the copy: the Bootstrap row is already align-items-stretch, so
   the column is a full-height flex item and the primary photo just fills it —
   the two columns end level whatever the copy grows to.

   Below xl the columns stack, each sizing to its own content, so the photo
   falls back to an aspect-ratio. Everything else is a percentage of
   .sv-about-media, so the composition scales as one block down to phone.
   -------------------------------------------------------------------------- */
.sv-about-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sv-about-media {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.sv-about-media__main {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 9;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(7, 7, 7, 0.18);
}

/* Inset over the primary photo's bottom-right corner. The white border reads
   as a frame against the photo behind it. */
.sv-about-media__sub {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 46%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 8px solid var(--white-color);
  box-shadow: 0 18px 40px rgba(7, 7, 7, 0.18);
}

/* The photo block runs the full height of the copy column beside it. */
@media (min-width: 1200px) {
  .sv-about-col {
    align-items: stretch;
  }

  .sv-about-media {
    max-width: none;
    height: 100%;
  }

  .sv-about-media__main {
    height: 100%;
    aspect-ratio: auto;
  }
}

.sv-about-media__main img,
.sv-about-media__sub img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom-left of the primary photo. The secondary photo owns the right 46%,
   so capping the badge at 44% keeps a gap between the two at every width. */
.sv-about-media__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 14px);
  max-width: 44%;
  padding: clamp(10px, 1.8vw, 18px) clamp(12px, 2vw, 22px);
  background: #670D0F;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 16px 34px rgba(103, 13, 15, 0.3);
}

.sv-about-media__badge-num {
  font-family: var(--title-font);
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--primary-color);
}

.sv-about-media__badge-label {
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--white-color);
}

/* Below xl the columns stack, so the block centres in the full-width column
   and comes down in size rather than filling the row. */
@media (max-width: 1199.98px) {
  .sv-about-media {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767.98px) {
  .sv-about-media {
    max-width: 440px;
  }

  .sv-about-media__sub {
    border-width: 6px;
  }
}

/* Narrow phones: the badge needs a slightly larger share of the width to stay
   legible, so the secondary photo gives some back and the two still clear. */
@media (max-width: 575.98px) {
  .sv-about-media__sub {
    width: 48%;
  }

  .sv-about-media__badge {
    max-width: 46%;
  }
}

/* Feature list arrow background color */
.aboutone__featurelist .item__feature-list li i {
  background-color: #670D0F !important;
}

/* Right-hand thumbnail beside the feature list — adjusted to cleanly fit square and variable aspect ratios without cropping. */
.aboutone__video-thumb img {
  display: block;
  width: auto;
  max-width: 280px;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
}

@media (max-width: 767.98px) {
  .aboutone__video-thumb img {
    width: 100%;
    max-width: 250px;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   14. Testimonials section — reduced top and bottom padding on desktop.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .testimonialtwo.section-padding {
    padding-top: 120px;
    padding-bottom: 40px;
  }
}

@media (min-width: 1200px) and (max-width: 1499.98px) {
  .testimonialtwo.section-padding {
    padding-top: 1px;
    padding-bottom: 40px;
  }
}

/* --------------------------------------------------------------------------
   15. "What SV Steels Chennai Stocks" tabs — segmented pill bar.

   The template ships three separate hard-edged blocks, each with its own white
   background, so the inactive two read as buttons floating on the section's
   grey rather than as one control. Rebuilt as a single rounded track (the <ul>)
   holding three pills (the <a>s), with the active one filled maroon. Nothing in
   the markup changes — only the boxes the existing elements draw.

   The whole thing is scoped to .serviceone: .tab-menu is a template class and
   other pages use it for layouts this shape would not suit.
   -------------------------------------------------------------------------- */

/* Every other .tab-menu on the site keeps the template's block styling and just
   needs the accent recoloured from gold to maroon — the MISSION GOALS tabs on
   the About page are the only other user. Deliberately NOT !important: the
   .serviceone rules below are more specific and have to be able to win. */
.tab-menu ul li a:hover,
.tab-menu ul li a.active {
  background: #670D0F;
  color: var(--white-color);
}

/* The nav is just the alignment wrapper — the track sizes to its content, so
   it has to be positioned rather than stretched. It sits against the right
   edge of its column, squared off with the section heading beside it.

   Deliberately not inside a breakpoint: the alignment is stated on the nav
   (justify-content, for the track as a flex item) and again on the track
   itself (margin-left, for it as a block), so it holds whatever `display` the
   nav ends up with and at every width. Under 768px section 16 stretches the
   track to the full column, where both are no-ops. */
.serviceone .tab-menu {
  display: flex;
  justify-content: flex-end;
}

.serviceone .tab-menu ul {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  height: auto;
  padding: 5px;
  border-radius: 999px;
  background: var(--white-color);
  border: 1px solid rgba(103, 13, 15, 0.1);
  box-shadow: 0 8px 24px rgba(7, 7, 7, 0.06);
}

.serviceone .tab-menu ul li {
  padding: 0;
}

.serviceone .tab-menu ul li a {
  display: block;
  padding: 11px 26px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: var(--transition);
}

.serviceone .tab-menu ul li a:hover {
  background: rgba(103, 13, 15, 0.07);
  color: #670D0F;
}

.serviceone .tab-menu ul li a.active {
  background: #670D0F;
  color: var(--white-color);
  box-shadow: 0 6px 16px rgba(103, 13, 15, 0.26);
}

@media (max-width: 1499.98px) {
  .serviceone .tab-menu ul li a {
    padding: 10px 22px;
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   15b. Service card icon backgrounds
   -------------------------------------------------------------------------- */
.service-cardone__icon,
.service-cardone:hover .service-cardone__icon,
.service-cardone.active .service-cardone__icon {
  background: #670D0F !important;
}

/* --------------------------------------------------------------------------
   13. Hero banner — full-bleed auto-playing carousel.

   Replaces the template's two-column intro (copy on the left, mask-cut photo
   bleeding off the right). Each slide is now a photograph filling the whole
   band with a gradient over it and the copy on top inside the normal
   container, so the banner is a single column at every width — nothing to
   re-stack on tablet, and no wedge SVGs to keep in register with the height.

   VERTICAL RHYTHM. The band's spacing is driven by one value per breakpoint,
   --sv-hero-gap, so the space above the copy and the space below the arrows
   are equal by construction on every device rather than by two hand-tuned
   padding numbers that drift apart:

     padding-top    = header height + gap   (the header is position:absolute
                                             and overlays the band, so it has
                                             to be paid for before the gap)
     padding-bottom = gap + arrow height + the gap between buttons and arrows
     arrows         = anchored at bottom: gap

   So the visible top gap (header underside to the eyebrow) and the visible
   bottom gap (under the arrows to the band's edge) are both exactly the gap.
   --sv-hero-header steps to 96px at 1199px, where style.css hides .header-top.

   The slide is align-items:flex-start, not centre, so the copy always starts
   at exactly padding-top. Centred, a slide shorter than the tallest one got
   half the slack added above it, which pushed its top gap out while the
   arrows — anchored to the band, not the copy — kept theirs. Any slack now
   lands in the middle, between the buttons and the arrows, where it costs
   nothing. There is no min-height for the same reason: it would have inflated
   that slack for no benefit.
   -------------------------------------------------------------------------- */
.sv-hero {
  position: relative;
  overflow: hidden;
  background: #0b0b0c;

  --sv-hero-header: 145px;
  --sv-hero-gap: 40px;
  --sv-hero-arrows-h: 44px;
  --sv-hero-arrows-gap: 36px;
  /* Raises the arrows off the band's bottom edge. It only moves the arrows —
     the band's padding-bottom is unchanged, so the copy above stays put and
     the lift comes out of the slack between the CTA row and the arrows. */
  --sv-hero-arrows-lift: 22px;
}

.sv-hero__slider {
  width: 100%;
}

/* The band settles on the tallest slide (slide 2 has the longest copy), but
   Swiper ships .swiper-slide with height:100%, which against the auto-height
   wrapper leaves the shorter slides at their own height — the photograph then
   stopped short of the band's bottom edge and the section background showed
   through as a dark strip. height:auto lets the flex stretch take over so
   every slide, and so every photograph, fills the full band. */
.sv-hero__slider .swiper-wrapper {
  align-items: stretch;
}

.sv-hero__slide {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: auto;
  overflow: hidden;
  padding-top: calc(var(--sv-hero-header) + var(--sv-hero-gap));
  padding-bottom: calc(var(--sv-hero-gap) + var(--sv-hero-arrows-h) + var(--sv-hero-arrows-gap));
}

.sv-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Slow push-in on whichever slide is showing, reset while it waits its turn. */
.sv-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  /* Runs a little past the 4.5s turn so the push-in never visibly stops. */
  transition: transform 6s ease-out;
}

.sv-hero__slider .swiper-slide-active .sv-hero__media img {
  transform: scale(1);
}

/* The horizontal ramp keeps the copy side dark enough for white text while the
   right of the photograph stays readable; the vertical one darkens the top so
   the header has something to sit against. */
.sv-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 7, 7, 0.92) 0%, rgba(7, 7, 7, 0.8) 40%, rgba(7, 7, 7, 0.4) 72%, rgba(7, 7, 7, 0.18) 100%),
    linear-gradient(180deg, rgba(7, 7, 7, 0.6) 0%, rgba(7, 7, 7, 0) 32%);
}

.sv-hero__slide > .container {
  position: relative;
  z-index: 2;
}

.sv-hero__content {
  max-width: 720px;
}

/* Typography, colour and the pair of ornament rules all come from the template
   classes on the element itself — .section-top__subtitle .typo-l-m
   .typo-primary-color, exactly as the "About SV Steels" subtitle carries them —
   so this sets only the spacing beneath it and the animation's start offset.
   .typo-l-m brings its own steps down at 992/768/576px. */
.sv-hero__eyebrow {
  margin-bottom: 14px;
}

.sv-hero__eyebrow svg {
  flex: 0 0 auto;
}

.sv-hero__title {
  margin-bottom: 18px;
  color: var(--white-color);
  font-family: var(--title-font);
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 700;
  line-height: 1.1;
}

.sv-hero__desc {
  max-width: 620px;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
}

.sv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Matches .custom-btn's box (10px/20px padding, 15px/22px title font) so the
   two buttons line up on the same baseline and share a height. */
.sv-hero__btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white-color);
  font-family: var(--title-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: var(--transition);
}

.sv-hero__btn-ghost:hover,
.sv-hero__btn-ghost:focus-visible {
  background: var(--white-color);
  border-color: var(--white-color);
  color: #670D0F;
}

/* Copy reveal, re-run every time a slide becomes active. Each line gets its own
   move rather than one shared fade-up: the eyebrow comes in from the left, the
   headline wipes up from under a clip, and the paragraph and buttons follow.
   The staggered delays mean the block assembles itself instead of arriving in
   one piece.

   The transition is for the way out: Swiper drops .swiper-slide-active the
   moment a transition starts, which removes the animation, so without it the
   outgoing copy would snap away instead of leaving with its photograph. */
.sv-hero__content > * {
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.sv-hero__eyebrow {
  transform: translateX(-26px);
}

.sv-hero__title {
  transform: translateY(44px);
}

.sv-hero__desc {
  transform: translateY(30px);
}

.sv-hero__actions {
  transform: translateY(26px);
}

/* Before Swiper boots — or if its JS never runs at all — no slide carries the
   active class, so show the copy outright instead of leaving it invisible. */
.sv-hero__slider:not(.swiper-initialized) .sv-hero__content > * {
  opacity: 1;
  transform: none;
}

/* Tightened to land inside the 4.5s turn: the last line settles at ~1.1s, so
   the copy still holds still for over three seconds before the next slide. */
.sv-hero__slider .swiper-slide-active .sv-hero__eyebrow {
  animation: svHeroInLeft 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}

.sv-hero__slider .swiper-slide-active .sv-hero__title {
  animation: svHeroTitleIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s forwards;
}

.sv-hero__slider .swiper-slide-active .sv-hero__desc {
  animation: svHeroInUp 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) 0.36s forwards;
}

.sv-hero__slider .swiper-slide-active .sv-hero__actions {
  animation: svHeroInUp 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) 0.48s forwards;
}

@keyframes svHeroInLeft {
  from {
    opacity: 0;
    transform: translateX(-26px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes svHeroInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* The clip opens past 0 on both edges so ascenders and descenders are never
   shaved once the wipe finishes. */
@keyframes svHeroTitleIn {
  from {
    opacity: 0;
    transform: translateY(44px);
    clip-path: inset(0 0 105% 0);
  }

  to {
    opacity: 1;
    transform: none;
    clip-path: inset(-15% 0 -15% 0);
  }
}

/* Controls sit inside the container so the arrows line up with the copy above
   them. The bar itself ignores the pointer so it never blocks a swipe on the
   slide behind it; the arrows take it back. */
.sv-hero__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--sv-hero-gap) + var(--sv-hero-arrows-lift));
  z-index: 5;
  pointer-events: none;
}

/* Arrows sit at the bottom centre of the banner, independent of the copy — the
   same place on every slide, so nothing shifts when the slide changes or when
   the webfont lands and the button labels remeasure.

   Absolute, so the bar keeps the arrows' own height for them. */
.sv-hero__ui-inner {
  position: relative;
  min-height: var(--sv-hero-arrows-h);
}

.sv-hero__ui .slider__buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* Autoplay progress. --sv-hero-progress is written on .sv-hero by the
   autoplayTimeLeft handler in main.js and runs 0 -> 1 across each slide's turn;
   the short linear transition just smooths between Swiper's ticks. It freezes
   when autoplay pauses on hover, which is the point — it shows the carousel is
   moving on its own and when the next slide is due. */
.sv-hero__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.sv-hero__progress span {
  display: block;
  height: 100%;
  width: calc(var(--sv-hero-progress, 0) * 100%);
  background: linear-gradient(90deg, #670D0F 0%, var(--primary-color) 100%);
  transition: width 0.12s linear;
}

/* Arrows keep the template's look — .slider__buttons + .wh-56 from style.css:
   maroon prev with a white arrow, light grey next with a gold one. Only three
   things are restated here: the size, which is run off --sv-hero-arrows-h so
   the band's padding-bottom (section 13) and the buttons can never disagree
   and so the smaller hero arrows don't touch the testimonial slider's .wh-56;
   the glyph, scaled with them; and the hover/active fill, which used to be an
   inline <style> block in index.html. */
.sv-hero__ui .slider__buttons .wh-56 {
  width: var(--sv-hero-arrows-h);
  height: var(--sv-hero-arrows-h);
}

.sv-hero__ui .slider__buttons .wh-56 svg {
  width: 11px;
  height: 11px;
}

.sv-hero__ui .slider__buttons .slider-prev:hover,
.sv-hero__ui .slider__buttons .slider-prev.active,
.sv-hero__ui .slider__buttons .slider-next:hover,
.sv-hero__ui .slider__buttons .slider-next.active {
  background-color: #670D0F;
}

/* --------------------------------------------------------------------------
   14. Hero banner — responsive steps.

   The vertical rhythm steps by retuning --sv-hero-gap and its two companions;
   the padding and the arrows' offset are derived from them in section 13, so
   the top and bottom gaps stay equal to each other at every width. The copy
   itself is set in clamp() above and scales continuously in between.
   -------------------------------------------------------------------------- */
/* Desktop only (1200px and up, split at 1400 for the container step). The band
   is tallest here — the header alone costs 145px before any copy — so the two
   spacing values are pulled in to bring it down. Tablet and phone are set from
   1199px down and are deliberately left where they were. */
@media (max-width: 1399.98px) {
  .sv-hero {
    --sv-hero-gap: 36px;
    --sv-hero-arrows-gap: 32px;
  }
}

/* style.css hides .header-top at max-width:1199px (not .98) — matched exactly
   so the header height and the padding that pays for it step together. */
@media (max-width: 1199px) {
  .sv-hero {
    --sv-hero-header: 96px;
    --sv-hero-gap: 48px;
    --sv-hero-arrows-gap: 44px;
  }
}

@media (max-width: 1199.98px) {
  .sv-hero__content {
    max-width: 100%;
  }
}

@media (max-width: 991.98px) {
  .sv-hero {
    --sv-hero-gap: 44px;
    --sv-hero-arrows-gap: 40px;
  }
}

/* Tablet and below the copy runs the full width of the container, so a
   left-to-right ramp would leave the end of each line over bare photograph.
   Switched to a top-to-bottom wash that covers the whole column. */
@media (max-width: 991.98px) {
  .sv-hero__overlay {
    background: linear-gradient(180deg, rgba(7, 7, 7, 0.78) 0%, rgba(7, 7, 7, 0.6) 45%, rgba(7, 7, 7, 0.85) 100%);
  }
}

@media (max-width: 767.98px) {
  .sv-hero {
    --sv-hero-gap: 40px;
    --sv-hero-arrows-gap: 36px;
  }

  .sv-hero__desc {
    margin-bottom: 26px;
  }

  /* tracks .custom-btn's 767 step so the pair still matches */
  .sv-hero__btn-ghost {
    padding: 8px 16px;
    font-size: 13px;
    line-height: 18px;
  }
}

@media (max-width: 575.98px) {
  .sv-hero {
    --sv-hero-gap: 32px;
    --sv-hero-arrows-gap: 28px;
    /* the band is shortest here, so the arrows come down with it and the lift
       eases off to keep them clear of the CTA row */
    --sv-hero-arrows-h: 35px;
    --sv-hero-arrows-lift: 14px;
  }

  /* .typo-l-m already steps the label to 11px here; only the ornaments need
     bringing in, and the About subtitle's own gap-2 (8px) is kept. */
  .sv-hero__eyebrow svg {
    width: 28px;
  }

  .sv-hero__actions {
    gap: 10px;
  }
}

/* Autoplay is switched off in JS for these visitors; this stops the push-in
   and the per-slide reveal so nothing moves on its own. */
@media (prefers-reduced-motion: reduce) {
  .sv-hero__media img {
    transform: none;
    transition: none;
  }

  /* Autoplay is off for these visitors, so the bar would sit empty forever. */
  .sv-hero__progress {
    display: none;
  }

  .sv-hero__content > *,
  .sv-hero__slider .swiper-slide-active .sv-hero__eyebrow,
  .sv-hero__slider .swiper-slide-active .sv-hero__title,
  .sv-hero__slider .swiper-slide-active .sv-hero__desc,
  .sv-hero__slider .swiper-slide-active .sv-hero__actions {
    opacity: 1;
    transform: none;
    animation: none;
    clip-path: none;
  }
}

/* --------------------------------------------------------------------------
   15. "Who Buys From Us" Section Mobile Spacing (index.html)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .clientone.section-padding {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  .clientone .section-top {
    margin-bottom: 36px !important;
  }

  .clientone .row {
    --bs-gutter-x: 16px !important;
    --bs-gutter-y: 16px !important;
  }

  .sv-client-card {
    height: 86px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
  }

  .sv-client-card img {
    max-height: 48px !important;
  }
}

@media (max-width: 575.98px) {
  .clientone.section-padding {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  .clientone .section-top {
    margin-bottom: 28px !important;
  }

  .clientone .row {
    --bs-gutter-x: 14px !important;
    --bs-gutter-y: 14px !important;
  }

  .sv-client-card {
    height: 80px !important;
    padding: 10px 14px !important;
  }

  .sv-client-card img {
    max-height: 42px !important;
  }
}

/* --------------------------------------------------------------------------
   16. Segmented tabs on mobile — the track spans the column and the three
   pills share it equally, so the control still reads as one piece instead of
   scrolling sideways. The labels are short enough to fit at 13px down to
   360px, so nothing is clipped.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .serviceone .tab-menu {
    width: 100%;
    margin-top: 12px;
  }

  .serviceone .tab-menu ul {
    display: flex;
    width: 100%;
    gap: 3px;
    padding: 4px;
  }

  .serviceone .tab-menu ul li {
    flex: 1 1 0px;
    min-width: 0;
  }

  .serviceone .tab-menu ul li a {
    padding: 10px 6px;
    font-size: 13px;
    text-align: center;
  }
}

@media (max-width: 400px) {
  .serviceone .tab-menu ul li a {
    padding: 9px 4px;
    font-size: 12px;
    letter-spacing: -0.1px;
  }
}

/* --------------------------------------------------------------------------
   17. "Our Blogs" Section Card Date Mobile Font Size Reduction (index.html)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .blog-cardone__date {
    width: 50px !important;
    height: 50px !important;
    font-size: 13px !important;
    line-height: 14px !important;
    border-radius: 6px !important;
    top: -12% !important;
  }

  .blog-cardone__date span {
    margin-left: 8px !important;
  }

  .blog-cardone__date span:first-child {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 14px !important;
  }

  .blog-cardone__date span:last-child {
    font-size: 11px !important;
    line-height: 12px !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 575.98px) {
  .blog-cardone__date {
    width: 46px !important;
    height: 46px !important;
  }

  .blog-cardone__date span {
    margin-left: 6px !important;
  }

  .blog-cardone__date span:first-child {
    font-size: 13px !important;
  }

  .blog-cardone__date span:last-child {
    font-size: 10px !important;
  }
}

/* --------------------------------------------------------------------------
   18. "What We Offer" Section Desktop Bottom Padding Reduction (index.html)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .servicetwo.section-padding {
    padding-bottom: 20px !important;
  }

  .servicetwo .servicetwo__button {
    margin-top: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   19. "Proven Strength & Scale" Section Mobile Top Padding Reduction (index.html)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .counterone.section-padding {
    padding-top: 35px !important;
  }
}

@media (max-width: 575.98px) {
  .counterone.section-padding {
    padding-top: 25px !important;
  }
}



/* --------------------------------------------------------------------------
   20. "Why Choose Us" Section — Equal Height & Increased Icon/Number Sizes (index.html)
   -------------------------------------------------------------------------- */

/* "WHY CHOOSE US" eyebrow — white, not the template gold.

   style.css gives it color:#AE8333 and the card behind it background:#ae8333,
   so the label was gold on the same gold and effectively invisible. The two
   ornaments beside it carry inline fill/stroke="#AE8333" for the same reason;
   those are presentation attributes, so a plain CSS rule outranks them and no
   !important is needed. */
.sv-wcu-left-card__subtitle {
  color: var(--white-color);
}

.sv-wcu-left-card__subtitle svg rect {
  fill: var(--white-color);
}

.sv-wcu-left-card__subtitle svg circle {
  stroke: var(--white-color);
}

@media (min-width: 992px) {
  .sv-wcu-section .row.align-items-stretch > div {
    display: flex !important;
  }

  .sv-wcu-left-card {
    width: 100% !important;
  }

  .sv-wcu-features-list {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    width: 100% !important;
    gap: 14px !important;
  }

  .sv-wcu-feature-card {
    flex: 1 1 0px !important;
  }
}

.sv-wcu-feature-num {
  font-size: 26px !important;
  font-weight: 800 !important;
  min-width: 34px !important;
  line-height: 1.1 !important;
  color: #670D0F !important;
}

.sv-wcu-feature-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 12px !important;
  background-color: #faf4eb !important;
  color: #670D0F !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sv-wcu-feature-card {
  border-left: 4px solid #670D0F !important;
  border-radius: 12px !important;
  padding: 22px 24px !important;
}

.sv-wcu-feature-title {
  font-family: var(--title-font) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #070707 !important;
  line-height: 1.25 !important;
}

.sv-wcu-feature-icon svg {
  width: 26px !important;
  height: 26px !important;
}

/* --------------------------------------------------------------------------
   21. "Our Blogs" Section Mobile Top Padding Reduction (index.html)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .blog.section-padding {
    padding-top: 35px !important;
  }
}

@media (max-width: 575.98px) {
  .blog.section-padding {
    padding-top: 25px !important;
  }
}

/* --------------------------------------------------------------------------
   22. "About SV Steels" Section — Tablet & Mobile Spacing.

   The image-layout rules that used to sit here are gone: the composition is
   now .sv-about-media, and everything it needs at these widths lives with the
   rest of it in section 13.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .aboutone.section-padding {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .aboutone .row {
    --bs-gutter-y: 20px !important;
  }

  .sv-about-media {
    margin-bottom: 12px !important;
  }

  .aboutone__video-thumb img {
    max-width: 240px !important;
    max-height: 160px !important;
  }
}

@media (max-width: 991.98px) {
  .aboutone.section-padding {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }

  .sv-about-media__main {
    position: relative;
    width: 100%;
    height: 300px;
    aspect-ratio: 10 / 9;
    overflow: hidden;
    box-shadow: 0 24px 56px rgba(7, 7, 7, 0.18);
}
}

/* --------------------------------------------------------------------------
   23. "Get Today's Rate" CTA band — no maroon chevrons on tablet.

   The chevron svg is sized at 21vw and pinned at a percentage offset, so on
   tablet it lands across the middle of the band, between the copy and the
   photo, and reads as a stray red wedge rather than as a backdrop. Hidden for
   tablet widths only; phone and desktop keep it.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ctaone__shapetwo {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   24. "Our Blogs" cards — equal height, capped title, excerpt.

   The three cards sized to their own content, so a two-line title left one
   card short and the READ MORE links sat at three different heights. The
   columns are now flex parents and the card fills its column, the content
   block grows to take up the slack, and READ MORE is pushed to the bottom with
   margin-top:auto — so the links line up whatever the copy does.

   The title is clamped to two lines as a backstop. The copy is short enough to
   fit now, but a longer headline added later would otherwise reopen the gap.
   -------------------------------------------------------------------------- */
.blog .row > [class*="col-"] {
  display: flex;
}

.blog .blog-cardone {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.blog .blog-cardone__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* Both the title and the excerpt occupy exactly two lines — clamped so they
   can never run longer, min-height so a short one still reserves the space.
   Without the min-height the cards only equalise within a row, and at md the
   third card sits alone on the second row where there is nothing to match it
   against: it came out 24px shorter than the pair above. Fixing the content
   height instead makes every card identical in every layout. */
.blog .blog-cardone__title h5 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  min-height: 2.8em;
}

.blog .blog-cardone__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 20px;
  min-height: 3.2em;
  color: var(--text-color);
  font-size: 15px;
  line-height: 1.6;
}

/* pushed to the foot of the card so all three links sit on one line */
.blog .blog-cardone__link {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 767.98px) {
  .blog .blog-cardone__desc {
    margin-bottom: 16px;
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   Tighter vertical rhythm on phones.

   .section-padding steps down to 60px top and bottom at 767.98px, which is
   right for most bands but leaves "What SV Steels Chennai Stocks" (.serviceone)
   and "Why Choose Us" (.sv-wcu-section) floating — both already carry a lot of
   internal spacing from their tab strip and stacked cards, so the band gaps
   read as dead air on a narrow screen. This opt-in class pulls just those two
   in; every other section keeps the default.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .sv-section-tight-mobile.section-padding {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

@media (max-width: 575.98px) {
  .sv-section-tight-mobile.section-padding {
    padding-top: 30px;
    padding-bottom: 60px;
  }
}
@media (max-width: 768px) {
  .sv-section-tight-mobile.section-padding {
    padding-top: 50px;
    padding-bottom: 70px;
  }
}
@media (max-width: 767px) {
    .sv-section-tight-mobile.section-padding {
        padding-top: 50px;
        padding-bottom: 0px;
    }
}
@media (max-width: 768px) {
    .section-padding {
        padding: 80px 0 ;
    }
}
@media (max-width: 767px) {
    .sv-section-tight-mobile.section-padding {
        padding-top: 40px;
        padding-bottom: 0px;
    }
}
@media (max-width: 768px) {
    .sv-faq-section.section-padding {
        padding-top: 40px !important;
        padding-bottom: 0px !important;
    }
}

@media (max-width: 767.98px) {
  .sv-section-tight-mobile1.section-padding {
    padding-top: 0px;
    padding-bottom: 36px;
  }
}

@media (max-width: 575.98px) {
  .sv-section-tight-mobile1.section-padding {
    padding-top: 0px;
    padding-bottom: 60px;
  }
}

@media (max-width: 768px) {
  .sv-section-tight-mobile1.section-padding {
    padding-top: 0px;
    padding-bottom: 60px;
  }
}