/*
  style.css — SpringForce Industries
  ====================================
  This file controls how everything LOOKS: colours, fonts,
  spacing, layout, and how the page changes at different
  screen sizes (responsive design).

  HOW CSS WORKS:
    selector { property: value; }

    The "selector" targets HTML elements (e.g. .navbar, h1, button).
    The "property" is what you want to change (e.g. color, font-size).
    The "value" is what you want to set it to (e.g. #ffffff, 16px).

  TABLE OF CONTENTS
  ──────────────────────────────────────────────────────────
    1.  CSS Variables (design tokens — colours, fonts, etc.)
    2.  Reset & Base styles
    3.  Navbar
    4.  Navbar — logo
    5.  Navbar — desktop links & dropdown
    6.  Navbar — hamburger button (mobile)
    7.  Navbar — mobile slide-down menu
    8.  Hero banner
    9.  Hero — product card
   10.  Ticker strip
   11.  Shared section styles (headings, containers)
   12.  Products section & cards
   13.  About Us / Why section
   14.  Industries section
   15.  Contact section & form
   16.  Footer
   17.  Responsive breakpoints (media queries)
   18.  Accessibility — reduced motion
  ──────────────────────────────────────────────────────────
*/


/* ============================================================
   1. CSS VARIABLES (Design Tokens)
   ============================================================
   Variables let us define a colour or value ONCE and reuse it
   everywhere. If the client wants a different shade of blue,
   we only change it here, not in 50 different places.

   Usage: color: var(--royal);
   ":root" means these variables are available everywhere on the page.
*/
:root {

  /* Colour palette */
  --navy:       #0A1628;   /* very dark blue — main background */
  --royal:      #1B4FD8;   /* royal blue — primary brand colour */
  --sky:        #3B82F6;   /* medium blue — hover states, accents */
  --sky-light:  #93c5fd;   /* light blue — subtle text on dark bg */
  --white:      #FFFFFF;   /* pure white */
  --off-white:  #F0F4FF;   /* very slightly blue-tinted white — section backgrounds */
  --gray:       #64748B;   /* medium grey — body text on light backgrounds */
  --light-gray: #E2E8F0;   /* very light grey — borders, dividers */
  --card-bg:    #0F1E3A;   /* dark card background (slightly lighter than --navy) */

  /* Typography */
  --font-display: 'Barlow Condensed', sans-serif;  /* bold headlines */
  --font-body:    'Inter', sans-serif;              /* body text, labels */

  /* Layout */
  --nav-h: 72px;  /* navbar height — used to offset content so it isn't hidden behind the navbar */

  /* Animation timing — used in all transition properties.
     cubic-bezier gives a "material design" easing (fast start, smooth end) */
  --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);

}


/* ============================================================
   2. RESET & BASE
   ============================================================
   Browsers have their own default styles that differ between
   Chrome, Firefox, Safari etc. This reset makes everything
   start from the same baseline.
*/

/* Apply box-sizing: border-box to EVERY element.
   This makes width/height calculations much more predictable:
   padding and border are included in the element's size,
   not added on top of it. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Smooth scrolling when anchor links are clicked (e.g. #contact) */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--navy);
  overflow-x: hidden;  /* prevent horizontal scroll on mobile */
}


/* ============================================================
   3. NAVBAR — the sticky bar at the very top
   ============================================================
   position: fixed keeps it in view even when the page scrolls.
   z-index: 1000 puts it on top of all other content.
   backdrop-filter: blur creates the "frosted glass" effect.
*/
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;           /* sit above everything else on the page */
  height: var(--nav-h);    /* 72px tall */
  background: rgba(10, 22, 40, 0.85);           /* semi-transparent navy */
  backdrop-filter: blur(16px);                   /* frosted glass blur */
  -webkit-backdrop-filter: blur(16px);           /* same for Safari */
  border-bottom: 1px solid rgba(59, 130, 246, 0.12);  /* very subtle blue line */
  transition: background var(--transition), box-shadow var(--transition);
}

/* When JavaScript adds the "scrolled" class (after 50px scroll),
   make the navbar more opaque and add a shadow */
.navbar.scrolled {
  background: rgba(10, 22, 40, 0.97);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Inner wrapper — constrains width and sets up the
   logo-left / links-right layout using Flexbox */
.nav-container {
  max-width: 1280px;       /* don't stretch too wide on large monitors */
  margin: 0 auto;          /* centre the container horizontally */
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* logo pushed left, links pushed right */
  gap: 16px;
}


/* ============================================================
   4. NAVBAR — Logo
   ============================================================
   The logo is a flex container with an SVG icon on the left
   and stacked text (brand name + sub-name) on the right.
*/
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;  /* remove underline from the <a> tag */
}

/* The SVG icon wrapper */
.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The text block next to the icon */
.logo-text {
  display: flex;
  flex-direction: column;  /* stack "SPRINGFORCE" on top of "INDUSTRIES" */
  line-height: 1;
}

/* Big bold brand name */
.logo-main {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--white);
}

/* Smaller sub-name below the brand name */
.logo-sub {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--sky-light);
}


/* ============================================================
   5. NAVBAR — Desktop links & dropdown
   ============================================================
*/

/* Flex container holding all the nav links on the right */
.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Each plain text link in the navbar */
.nav-link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;     /* don't let the text wrap to two lines */
  letter-spacing: 0.02em;
}

/* Hover state AND the "active" class (used on Home link) */
.nav-link:hover,
.nav-link.active {
  color: var(--white);
  background: rgba(59, 130, 246, 0.15);  /* subtle blue highlight */
}


/* ── Products dropdown ────────────────────────────────── */

/* The wrapper div that contains both the trigger link and the menu */
.nav-dropdown {
  position: relative;  /* so the dropdown menu positions relative to this */
}

/* The "Products ▼" trigger link */
.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* The small ▼ arrow next to "Products" */
.dropdown-trigger .arrow {
  font-size: 0.6rem;
  transition: transform var(--transition);
}

/* When hovering the dropdown wrapper, rotate the arrow to ▲ */
.nav-dropdown:hover .arrow {
  transform: rotate(180deg);
}

/* The hidden dropdown panel (the box that appears below "Products") */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);    /* 10px gap below the trigger link */
  right: 0;
  background: var(--navy);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  padding: 8px;
  min-width: 210px;

  /* Hidden by default — made visible on hover below */
  opacity: 0;
  visibility: hidden;        /* visibility:hidden also removes it from tab order */
  transform: translateY(-8px);  /* starts 8px up, slides down when visible */
  transition: all var(--transition);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* When hovering .nav-dropdown, show the menu inside it */
.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);  /* slides down into place */
}

/* Each link inside the dropdown panel */
.dropdown-item {
  display: block;
  padding: 10px 16px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 7px;
  transition: all var(--transition);
}

/* Hover effect — slight indent + blue highlight */
.dropdown-item:hover {
  color: var(--white);
  background: rgba(59, 130, 246, 0.2);
  padding-left: 20px;   /* indent slightly on hover */
}


/* ── "Get Quote" CTA button in the navbar ──────────────── */
/* This is styled differently from plain links — it has a blue background */
.nav-cta-btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--royal);
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 8px;
  transition: all var(--transition);
  white-space: nowrap;
}

.nav-cta-btn:hover {
  background: var(--sky);
  transform: translateY(-1px);              /* tiny lift effect */
  box-shadow: 0 6px 20px rgba(27, 79, 216, 0.5);
}


/* ============================================================
   6. NAVBAR — Hamburger button (mobile only)
   ============================================================
   Three horizontal lines that animate into an X when active.
   "display: none" hides this on desktop.
   The media query at the bottom shows it on small screens.
*/
.hamburger {
  display: none;           /* hidden on desktop — shown in media query */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 4px;
}

/* Each of the three lines in the hamburger icon */
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition);
  transform-origin: center;
}

/* When the hamburger has the "active" class (menu is open),
   animate the three lines into an X shape:
   - Line 1: move down 7px then rotate 45°
   - Line 2: fade out and collapse
   - Line 3: move up 7px then rotate -45° */
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   7. NAVBAR — Mobile slide-down menu
   ============================================================
   Hidden by default. JavaScript adds the "open" class when
   the hamburger is clicked, which triggers "display: flex".
*/
.mobile-menu {
  display: none;           /* hidden until "open" class is added */
  flex-direction: column;
  background: var(--navy);
  border-top: 1px solid rgba(59, 130, 246, 0.15);
  padding: 12px 24px 20px;
  gap: 4px;
}

/* Show the menu when JavaScript adds the "open" class */
.mobile-menu.open {
  display: flex;
}

/* Plain link rows inside the mobile menu */
.mobile-link,
.mobile-dropdown-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: all var(--transition);
  /* Reset button-specific styles (mobile-dropdown-btn is a <button>) */
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.mobile-link:hover,
.mobile-dropdown-btn:hover {
  background: rgba(59, 130, 246, 0.12);
  color: var(--white);
}

/* Arrow inside the Products button */
.mobile-dropdown-btn .arrow {
  transition: transform var(--transition);
  font-size: 0.7rem;
}

/* Rotate the arrow when the sub-menu is open */
.mobile-dropdown-btn.open .arrow {
  transform: rotate(180deg);
}

/* Container for the Products sub-links — hidden by default */
.mobile-dropdown-items {
  display: none;
  flex-direction: column;
  padding: 4px 0 4px 16px;  /* indent to the right to show nesting */
}

/* Show when JavaScript adds the "open" class */
.mobile-dropdown-items.open {
  display: flex;
}

/* Individual sub-links (Compression, Tension, etc.) */
.mobile-sub-link {
  display: block;
  padding: 9px 14px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 6px;
  transition: all var(--transition);
  border-left: 2px solid rgba(59, 130, 246, 0.3);  /* blue left accent line */
  margin-bottom: 2px;
}

.mobile-sub-link:hover {
  background: rgba(59, 130, 246, 0.12);
  color: var(--white);
  border-color: var(--sky);  /* brighten the accent line on hover */
}

/* "Get Quote" button at the bottom of the mobile menu */
.mobile-cta {
  display: block;
  margin-top: 8px;
  padding: 12px 20px;
  background: var(--royal);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--transition);
}

.mobile-cta:hover {
  background: var(--sky);
}


/* ============================================================
   8. HERO BANNER
   ============================================================
   Full-viewport-height section with a diagonal blue shape on
   the left and dark navy on the right.

   The layout structure:
     .hero                  — full height container, dark navy bg
     ├── .hero-bg           — holds the decorative background shapes
     │   └── .hero-slash    — the diagonal blue shape (clip-path)
     └── .hero-container    — the actual content grid (text + card)
         ├── .hero-text     — left column
         └── .hero-product  — right column
*/
.hero {
  min-height: 100vh;         /* at least full screen height */
  padding-top: var(--nav-h); /* push content below the fixed navbar */
  position: relative;        /* needed so .hero-bg can use position:absolute */
  overflow: hidden;
  background: var(--navy);
  display: flex;
  align-items: center;       /* vertically centre the content */
}

/* Background layer — sits behind all content */
.hero-bg {
  position: absolute;
  inset: 0;    /* shorthand for top:0; right:0; bottom:0; left:0 — fills the parent */
  overflow: hidden;
}

/* The diagonal blue shape on the left side.
   clip-path: polygon() defines a custom shape using four points:
   (0,0) top-left, (48%,0) top-right, (34%,100%) bottom-right, (0,100%) bottom-left
   This creates the angled right edge. */
.hero-slash {
  position: absolute;
  inset: 0;
  background: var(--royal);
  clip-path: polygon(0 0, 48% 0, 34% 100%, 0 100%);
}

/* Dot grid overlay on the blue shape — very subtle texture.
   radial-gradient creates a tiny dot at each grid intersection. */
.hero-slash::after {
  content: '';             /* ::after requires content to render */
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;  /* dot every 28px */
}

/* Soft blue glow on the dark right side of the hero */
.hero-bg::after {
  content: '';
  position: absolute;
  right: -10%;
  top: 10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
  pointer-events: none;  /* clicks pass through this decorative element */
}

/* Content grid — two columns (text | product card) */
.hero-container {
  position: relative;
  z-index: 2;              /* sit above the background decorations */
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 24px 60px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;  /* text col slightly narrower than card col */
  gap: 60px;
  align-items: center;
  width: 100%;
}

/* Left column — all text is white on the dark/blue background */
.hero-text {
  color: var(--white);
  margin-left: -36px;
}

/* Small label above the main heading ("Precision Engineered") */
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sky-light);
  margin-bottom: 16px;
}

/* Main heading — clamp() makes it fluid:
   minimum 2.4rem, scales with viewport, max 4rem */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

/* The word "SPRINGS" in a lighter blue colour */
.hero-accent {
  color: var(--sky-light);
}

/* Paragraph of description text below the heading */
.hero-desc {
  font-size: 0.975rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 420px;
  margin-bottom: 32px;
}

/* Wrapper for the CTA button(s) */
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;       /* if buttons don't fit on one line, wrap to the next */
  margin-bottom: 40px;
}

/* Reusable primary button style (white background, dark text) */
.btn-primary {
  display: inline-block;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 6px;
  transition: all var(--transition);
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--sky-light);
  transform: translateY(-2px);    /* tiny lift */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

/* Outline button (transparent background, white border) */
.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: all var(--transition);
}

.btn-outline:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

/* Row of three stats (25+ Years, 10K+ Parts, 40+ Countries) */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Each stat is a two-line block (number above, label below) */
.stat {
  display: flex;
  flex-direction: column;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}

.stat-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
  /* text-transform: uppercase; */
  margin-top: 2px;
}

/* The thin vertical line between stats */
.stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
}


/* ============================================================
   9. HERO — Product card (right column)
   ============================================================
*/

/* Outer wrapper — centres the card in the right column */
.hero-product {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The card itself — dark background with a border */
.product-card-hero {
  background: var(--card-bg);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  overflow: hidden;          /* clip children to the rounded corners */
  max-width: 520px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* The area containing the spring SVG */
.product-img-wrap {
  background: linear-gradient(135deg, #0d1a32 0%, #0a1628 100%);
  padding: 40px 32px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(59, 130, 246, 0.12);
}

/* The SVG spring illustration — scales to fit its container */
.spring-svg {
  width: 100%;
  max-width: 480px;
  filter: drop-shadow(0 8px 24px rgba(27, 79, 216, 0.4));  /* blue glow around the spring */
}

/* Text content below the spring image */
.product-card-body {
  padding: 24px 28px;
}

.product-card-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 10px;
}

.product-card-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  margin-bottom: 16px;
}

/* "Know More →" text link */
.know-more {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky);
  text-decoration: none;
  transition: color var(--transition);
}

.know-more:hover {
  color: var(--sky-light);
}


/* ============================================================
   10. TICKER STRIP
   ============================================================
   The thin blue banner between the hero and products sections.
*/
.about-strip {
  background: var(--royal);
  padding: 14px 24px;
  overflow: hidden;
}

.strip-container {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.strip-container p {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}


/* ============================================================
   11. SHARED SECTION STYLES
   ============================================================
   These classes are reused across multiple sections to keep
   headings and containers consistent throughout the page.
*/

/* Centred max-width wrapper used inside every main section */
.section-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Centred header block (eyebrow + title + description) at the top of a section */
.section-header {
  text-align: center;
  margin-bottom: 56px;
}

/* Small uppercase label above the section title */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 12px;
}

/* Main section heading — fluid size with clamp() */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--navy);
  line-height: 1.1;
}

/* White version of section-title — used on dark background sections */
.section-title.white {
  color: var(--white);
}

/* Subtitle paragraph below the section title */
.section-desc {
  margin-top: 14px;
  font-size: 0.975rem;
  color: var(--gray);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}


/* ============================================================
   12. PRODUCTS SECTION & CARDS
   ============================================================
   Cards now have an image area at the top instead of an icon.
   Each card structure:
     .prod-card
       ├── .prod-img-placeholder  (replace this with your <img> tag)
       └── .prod-card-body        (title, description, features, link)
*/
.products-section {
  padding: 100px 0;
  background: var(--off-white);
}

/* 3-column grid on desktop.
   Responsive breakpoints below change this to 2 cols, then 1 col. */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Individual product card.
   overflow:hidden clips the image to the card's rounded corners.
   No padding here — padding goes inside .prod-card-body instead,
   so the image can bleed edge-to-edge at the top. */
.prod-card {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--light-gray);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* clips the image to the rounded card corners */
}

/* Card hover — lift up and add a blue border glow */
.prod-card:hover {
  transform: translateY(-5px);
  border-color: var(--sky);
  box-shadow: 0 12px 40px rgba(27, 79, 216, 0.12);
}

/* ── IMAGE AREA ─────────────────────────────────────────────
   This is the placeholder box at the top of each card.
   When you replace it with a real <img>, the image fills this
   space automatically because of the .prod-img styles below.

   HOW TO SWAP IN A REAL IMAGE:
     1. Delete the entire <div class="prod-img-placeholder"> block
     2. Paste this in its place:
          <img src="images/your-photo.jpg"
               alt="Product Name"
               class="prod-img" />
     3. Save — done!
*/
.prod-img-placeholder {
  width: 100%;
  height: 200px;             /* fixed height — keeps all cards the same */
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid var(--light-gray);
  /* The dashed border helps you see the image zone while building */
  border: 2px dashed #93c5fd;
  border-radius: 14px 14px 0 0;  /* round only the top corners */
}

/* Product name shown inside the placeholder zone */
.placeholder-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--royal);
  text-align: center;
  padding: 0 16px;
}

/* Small hint text below the label */
.placeholder-hint {
  font-size: 0.78rem;
  color: var(--sky);
  font-weight: 500;
}

/* Styles for a REAL product image once you swap it in.
   object-fit: cover makes the image fill the box without stretching.
   object-position: center keeps the most important part visible. */
.prod-img {
  width: 100%;
  height: 200px;
  object-fit: cover;        /* fill the area, crop if needed */
  object-position: center;  /* crop from the centre */
  display: block;
}

/* Hover zoom effect on the real image (optional but nice) */
.prod-card:hover .prod-img {
  transform: scale(1.03);
  transition: transform 0.4s ease;
}

/* ── CARD TEXT BODY ─────────────────────────────────────────
   All text content below the image lives here. */
.prod-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;   /* makes all cards stretch to equal height in the grid row */
}

/* Card title */
.prod-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
}

/* Card description paragraph */
.prod-desc {
  font-size: 0.85rem;
  color: var(--gray);
  line-height: 1.65;
  flex: 1;  /* pushes the features list and link down to the bottom */
}

/* Feature bullet list — no default browser bullets */
.prod-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.prod-features li {
  font-size: 0.8rem;
  color: var(--navy);
  font-weight: 500;
  padding-left: 14px;
  position: relative;  /* needed so the ::before pseudo-element can be placed */
}

/* Custom blue dash "–" used as a bullet point */
.prod-features li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--royal);
}

/* "Know More →" text link at the bottom of each card */
.prod-link {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--royal);
  text-decoration: none;
  border-top: 1px solid var(--light-gray);
  padding-top: 12px;
  margin-top: 4px;
  transition: color var(--transition);
  display: block;
}

.prod-link:hover {
  color: var(--sky);
}


/* ============================================================
   13. ABOUT US / WHY SECTION
   ============================================================
   Dark navy background, two-column layout:
   left = text, right = stat cards grid.
*/
.why-section {
  background: var(--navy);
  padding: 100px 0;
}

/* Two equal columns */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Paragraph text in the left column */
.why-desc {
  font-size: 0.975rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 28px;
  max-width: 480px;
}

/* Vertical list of bullet items */
.why-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

/* Each bullet row (icon + text) */
.why-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Small blue circle with a ✓ checkmark */
.why-icon {
  width: 22px;
  height: 22px;
  background: var(--royal);
  border-radius: 50%;      /* makes it a circle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--white);
  flex-shrink: 0;          /* don't shrink this icon when text wraps */
  margin-top: 1px;
}

/* 2×2 grid of stat cards in the right column */
.why-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Individual stat card */
.why-stat-card {
  background: var(--card-bg);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all var(--transition);
}

/* Blue accent variant — applied with class="why-stat-card accent" */
.why-stat-card.accent {
  background: var(--royal);
  border-color: transparent;
}

.why-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.4);
}

.why-stat-card.accent:hover {
  box-shadow: 0 8px 28px rgba(27, 79, 216, 0.4);
}

/* Large stat number (e.g. "25+") */
.big-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}

/* The superscript "+" or "%" next to the number */
.big-num sup {
  font-size: 1.2rem;
  vertical-align: super;
}

/* Small label below the number */
.big-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* On the blue accent cards, the label is slightly brighter */
.why-stat-card.accent .big-label {
  color: rgba(255, 255, 255, 0.85);
}


/* ============================================================
   14. INDUSTRIES SECTION
   ============================================================
   Six cards in a row showing which industries we serve.
*/
.industries-section {
  padding: 100px 0;
  background: var(--white);
}

/* 6-column grid on desktop — reduced in media queries */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

/* Individual industry card */
.ind-card {
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  border-radius: 12px;
  padding: 28px 16px;
  text-align: center;
  transition: all var(--transition);
  cursor: default;  /* show normal cursor (not hand pointer) since it's not a link */
}

/* On hover, fill the card blue and lift it */
.ind-card:hover {
  background: var(--royal);
  border-color: var(--royal);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(27, 79, 216, 0.25);
}

/* Also make the text white when the card turns blue */
.ind-card:hover h4 {
  color: var(--white);
}

/* Large emoji icon */
.ind-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  display: block;
}

/* Industry label text */
.ind-card h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  transition: color var(--transition);
}


/* ============================================================
   15. CONTACT SECTION & FORM
   ============================================================
   Two columns: contact info on the left, form on the right.
*/
.contact-section {
  padding: 100px 0;
  background: var(--off-white);
}

/* Two columns: narrower info | wider form */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: flex-start;
}

/* Description paragraph in the left column */
.contact-desc {
  font-size: 0.975rem;
  line-height: 1.7;
  color: var(--gray);
  margin: 16px 0 32px;
  max-width: 400px;
}

/* Stack of three contact detail rows */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Each row (icon + text) */
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--navy);
  line-height: 1.5;
}

.contact-icon {
  font-size: 1.1rem;
  flex-shrink: 0;  /* don't let the emoji shrink */
}

/* White card wrapping the form */
.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* The <form> itself — vertical stack of fields */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Two form fields on one row */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Each label + input pair */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Style all three input types the same way */
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 11px 14px;
  border: 1.5px solid var(--light-gray);
  border-radius: 8px;
  color: var(--navy);
  background: var(--off-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;    /* remove the default browser focus ring (we add our own below) */
  resize: vertical; /* only allow vertical resizing of the textarea */
}

/* Custom focus ring — shows which field is active */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--royal);
  box-shadow: 0 0 0 3px rgba(27, 79, 216, 0.1);
  background: var(--white);
}

/* Full-width submit button inside the form.
   This extends the .btn-primary base style. */
.btn-primary.full-width {
  width: 100%;
  text-align: center;
  padding: 14px;
  background: var(--royal);
  color: var(--white);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  border-radius: 8px;
  transition: all var(--transition);
}

.btn-primary.full-width:hover {
  background: var(--sky);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(27, 79, 216, 0.35);
}


/* ============================================================
   16. FOOTER
   ============================================================
   Dark navy background.
   Top row: logo/tagline + two link columns.
   Bottom row: copyright + legal.
*/
.footer {
  background: var(--navy);
  padding: 60px 0 0;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Top row */
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;   /* wrap to multiple rows on small screens */
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  margin-bottom: 16px;
}

/* Small tagline below the logo */
.footer-tagline {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
}

/* Container holding the two link columns */
.footer-links {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}

/* Each link column (Products / Company) */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Column heading */
.footer-col h5 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky-light);
  margin-bottom: 4px;
}

/* Footer links */
.footer-col a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--white);
}
.logo-footer {
    width: 443px;
    margin-left: -67px;
}

/* Bottom row */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  flex-wrap: wrap;
  gap: 8px;
}


/* ============================================================
   17. RESPONSIVE BREAKPOINTS (Media Queries)
   ============================================================
   Media queries change the layout at specific screen widths.
   We use a "desktop-first" approach: the CSS above is fo
   large screens, and these queries OVERRIDE it for smaller screens.

   Breakpoints used:
     1100px → tablet landscape (2-column grids)
      900px → tablet portrait (stacked hero, hidden desktop nav)
      640px → large phone (1-column grids, stacked forms)
      400px → small phone (stacked stats)
*/

/* ── Tablet landscape (≤ 1100px) ─────────────────────── */
@media (max-width: 1100px) {
  /* Products grid: 3 columns → 2 columns */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Industries grid: 6 columns → 3 columns */
  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Tablet portrait (≤ 900px) ───────────────────────── */
@media (max-width: 900px) {

  /* Hero: side-by-side → stacked vertically */
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  /* Change the diagonal slash shape to horizontal (top portion blue) */
  .hero-slash {
    clip-path: polygon(0 0, 100% 0, 100% 42%, 0 52%);
  }

  /* Centre the description text and action buttons */
  .hero-desc    { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-stats   { justify-content: center; }

  /* Limit product card width and centre it when stacked */
  .hero-product {
    max-width: 480px;
    margin: 0 auto;
  }

  /* About Us: two columns → one column */
  .why-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .why-desc { max-width: none; }

  /* Contact: two columns → one column */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Hide the desktop nav links, show the hamburger button instead */
  .nav-right  { display: none; }
  .hamburger  { display: flex; }
}

/* ── Large phone (≤ 640px) ───────────────────────────── */
@media (max-width: 640px) {
  /* Products: 2 columns → 1 column */
  .products-grid { grid-template-columns: 1fr; }

  /* Industries: 3 columns → 2 columns */
  .industries-grid { grid-template-columns: repeat(2, 1fr); }

  /* About Us stat cards: 2 columns → 1 column */
  .why-card-grid { grid-template-columns: 1fr; }

  /* Form: side-by-side row → stacked */
  .form-row { grid-template-columns: 1fr; }

  /* Footer: side by side → stacked */
  .footer-top    { flex-direction: column; gap: 32px; }
  .footer-links  { gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Reduce headline size on small phones */
  .hero-title { font-size: 2.2rem; }

  /* Reduce form card padding */
  .contact-form-wrap { padding: 24px 18px; }
}

/* ── Small phone (≤ 400px) ───────────────────────────── */
@media (max-width: 400px) {
  /* Stats: horizontal row → vertical stack */
  .hero-stats   { flex-direction: column; gap: 14px; }
  /* Make the divider horizontal instead of vertical */
  .stat-divider { width: 60px; height: 1px; }
}


/* ============================================================
   18. ACCESSIBILITY — Reduced motion
   ============================================================
   Some users have "Reduce Motion" turned on in their OS settings
   (common for people with vestibular disorders or motion sensitivity).
   This media query respects that preference by removing ALL
   transitions and animations.

   !important is needed to override any inline transition values.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* HOME PAGE ENDS */


/* DIFFERNT PAGE CSS IN ONE CODES */
/* HELICAL SPRING sTARTS */
/* --- Base Industrial Styling --- */
:root {
    --primary-blue: #003366;
    --accent-blue: #0056b3;
    --charcoal: #1a202c;
    --muted-gray: #4a5568;
    --bg-light: #f8fafc;
    --border-color: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* --- Expanded Page Width Configuration (Uniform Wide Structure) --- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Top Element: Product Header Setup --- */
.product-layout h1 {
    font-size: 3.2rem;
    color: var(--charcoal);
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: left;
}

/* --- Structured Horizontal Image Boxes Layout --- */
.image-box-row {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-bottom: 50px;
}

.image-box {
    flex: 1; /* Distributes width evenly across all 3 boxes */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback adjustment for small screens */
@media (max-width: 768px) {
    .image-box-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- Company Intro Section --- */
.company-intro {
    margin-bottom: 30px;
    background: var(--bg-light);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--accent-blue);
}

.company-brand {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 8px;
}

.company-description {
    font-size: 1.1rem;
    color: var(--charcoal);
    line-height: 1.6;
}

/* --- Content Typography & Text Width Restrictions --- */
.product-brief-description {
    font-size: 1.15rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
}

h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    margin-top: 55px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 8px;
}

h3 {
    font-size: 1.3rem;
    color: var(--charcoal);
    margin-top: 35px;
    margin-bottom: 12px;
    font-weight: 700;
}

.two-line-description {
    font-size: 1.15rem;
    color: var(--charcoal);
    font-weight: 500;
    margin-bottom: 25px;
    max-width: 1200px;
}

p {
    color: var(--muted-gray);
    margin-bottom: 18px;
    font-size: 1.05rem;
    max-width: 1300px;
}

/* --- Data Lists --- */
ul {
    list-style-type: none;
    margin-bottom: 30px;
    padding-left: 5px;
}

li {
    font-size: 1.05rem;
    color: var(--muted-gray);
    margin-bottom: 14px;
    position: relative;
    padding-left: 24px;
}

li::before {
    content: "■";
    color: var(--accent-blue);
    font-size: 0.75rem;
    position: absolute;
    left: 0;
    top: 2px;
}

li strong {
    color: var(--charcoal);
}

/* Wide dynamic columns for pricing blocks on expansive screens */
.price-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 1024px) {
    .price-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.price-list li {
    background: var(--bg-light);
    padding: 24px;
    border-left: 0;
    border-top: 4px solid var(--primary-blue);
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.price-list li::before {
    display: none;
}

/* --- Call To Action Button Layout --- */
.button-container {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: left;
}

.quote-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 16px 45px;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.quote-btn:hover {
    background-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.3);
}

.quote-btn:active {
    transform: translateY(1px);
}
/* HELICAL SPRING ENDS */


/* LEAF SPRING STARTS */
/* --- Base Industrial Styling --- */
:root {
    --primary-blue: #003366;
    --accent-blue: #0056b3;
    --charcoal: #1a202c;
    --muted-gray: #4a5568;
    --bg-light: #f8fafc;
    --border-color: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* --- Expanded Page Width Configuration (Uniform Wide Structure) --- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Top Element: Product Header Setup --- */
.product-layout h1 {
    font-size: 3.2rem;
    color: var(--charcoal);
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: left;
}

/* --- Structured Horizontal Image Boxes Layout --- */
.image-box-row {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-bottom: 50px;
}

.image-box {
    flex: 1; /* Distributes width evenly across all 3 boxes */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback adjustment for small screens */
@media (max-width: 768px) {
    .image-box-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- Company Intro Section --- */
.company-intro {
    margin-bottom: 30px;
    background: var(--bg-light);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--accent-blue);
}

.company-brand {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 8px;
}

.company-description {
    font-size: 1.1rem;
    color: var(--charcoal);
    line-height: 1.6;
}

/* --- Content Typography & Text Width Restrictions --- */
.product-brief-description {
    font-size: 1.15rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
}

h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    margin-top: 55px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 8px;
}
/* LEAF SPRING ENDS */

/* RAILWAY BOGIE SPRING STARTS */
/* --- Base Industrial Styling --- */
:root {
    --primary-blue: #003366;
    --accent-blue: #0056b3;
    --charcoal: #1a202c;
    --muted-gray: #4a5568;
    --bg-light: #f8fafc;
    --border-color: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* --- Expanded Page Width Configuration (Uniform Wide Structure) --- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Top Element: Product Header Setup --- */
.product-layout h1 {
    font-size: 3.2rem;
    color: var(--charcoal);
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: left;
}

/* --- Structured Horizontal Image Boxes Layout --- */
.image-box-row {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-bottom: 50px;
}

.image-box {
    flex: 1; /* Distributes width evenly across all 3 boxes */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback adjustment for small screens */
@media (max-width: 768px) {
    .image-box-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- Company Intro Section --- */
.company-intro {
    margin-bottom: 30px;
    background: var(--bg-light);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--accent-blue);
}

.company-brand {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 8px;
}

.company-description {
    font-size: 1.1rem;
    color: var(--charcoal);
    line-height: 1.6;
}

/* --- Content Typography & Text Width Restrictions --- */
.product-brief-description {
    font-size: 1.15rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
}

h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    margin-top: 55px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 8px;
}

h3 {
    font-size: 1.3rem;
    color: var(--charcoal);
    margin-top: 35px;
    margin-bottom: 12px;
    font-weight: 700;
}

.two-line-description {
    font-size: 1.15rem;
    color: var(--charcoal);
    font-weight: 500;
    margin-bottom: 25px;
    max-width: 1200px;
}

p {
    color: var(--muted-gray);
    margin-bottom: 18px;
    font-size: 1.05rem;
    max-width: 1300px;
}

/* --- Data Lists --- */
ul {
    list-style-type: none;
    margin-bottom: 30px;
    padding-left: 5px;
}

li {
    font-size: 1.05rem;
    color: var(--muted-gray);
    margin-bottom: 14px;
    position: relative;
    padding-left: 24px;
}

li::before {
    content: "■";
    color: var(--accent-blue);
    font-size: 0.75rem;
    position: absolute;
    left: 0;
    top: 2px;
}

li strong {
    color: var(--charcoal);
}

/* Wide dynamic columns for pricing blocks on expansive screens */
.price-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 1024px) {
    .price-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.price-list li {
    background: var(--bg-light);
    padding: 24px;
    border-left: 0;
    border-top: 4px solid var(--primary-blue);
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.price-list li::before {
    display: none;
}

/* --- Call To Action Button Layout --- */
.button-container {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: left;
}

.quote-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 16px 45px;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.quote-btn:hover {
    background-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.3);
}

.quote-btn:active {
    transform: translateY(1px);
}
/* RAILWAY BOGIE SPRING ENDS */

/* LEAF SPRING STARTS */
/* --- Base Industrial Styling --- */
:root {
    --primary-blue: #003366;
    --accent-blue: #0056b3;
    --charcoal: #1a202c;
    --muted-gray: #4a5568;
    --bg-light: #f8fafc;
    --border-color: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* --- Expanded Page Width Configuration (Uniform Wide Structure) --- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Top Element: Product Header Setup --- */
.product-layout h1 {
    font-size: 3.2rem;
    color: var(--charcoal);
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: left;
}

/* --- Structured Horizontal Image Boxes Layout --- */
.image-box-row {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-bottom: 50px;
}

.image-box {
    flex: 1; /* Distributes width evenly across all 3 boxes */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback adjustment for small screens */
@media (max-width: 768px) {
    .image-box-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- Company Intro Section --- */
.company-intro {
    margin-bottom: 30px;
    background: var(--bg-light);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--accent-blue);
}

.company-brand {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 8px;
}

.company-description {
    font-size: 1.1rem;
    color: var(--charcoal);
    line-height: 1.6;
}

/* --- Content Typography & Text Width Restrictions --- */
.product-brief-description {
    font-size: 1.15rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
}

h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    margin-top: 55px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 8px;
}

h3 {
    font-size: 1.3rem;
    color: var(--charcoal);
    margin-top: 35px;
    margin-bottom: 12px;
    font-weight: 700;
}

.two-line-description {
    font-size: 1.15rem;
    color: var(--charcoal);
    font-weight: 500;
    margin-bottom: 25px;
    max-width: 1200px;
}

p {
    color: var(--muted-gray);
    margin-bottom: 18px;
    font-size: 1.05rem;
    max-width: 1300px;
}

/* --- Data Lists --- */
ul {
    list-style-type: none;
    margin-bottom: 30px;
    padding-left: 5px;
}

li {
    font-size: 1.05rem;
    color: var(--muted-gray);
    margin-bottom: 14px;
    position: relative;
    padding-left: 24px;
}

li::before {
    content: "■";
    color: var(--accent-blue);
    font-size: 0.75rem;
    position: absolute;
    left: 0;
    top: 2px;
}

li strong {
    color: var(--charcoal);
}

/* Wide dynamic columns for pricing blocks on expansive screens */
.price-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 1024px) {
    .price-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.price-list li {
    background: var(--bg-light);
    padding: 24px;
    border-left: 0;
    border-top: 4px solid var(--primary-blue);
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.price-list li::before {
    display: none;
}

/* --- Call To Action Button Layout --- */
.button-container {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: left;
}

.quote-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 16px 45px;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.quote-btn:hover {
    background-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.3);
}

.quote-btn:active {
    transform: translateY(1px);
}
/* LEAF SPRING ENDS */

/* Volute Spring STARTS */
/* --- Base Industrial Styling --- */
:root {
    --primary-blue: #003366;
    --accent-blue: #0056b3;
    --charcoal: #1a202c;
    --muted-gray: #4a5568;
    --bg-light: #f8fafc;
    --border-color: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* --- Expanded Page Width Configuration (Uniform Wide Structure) --- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Top Element: Product Header Setup --- */
.product-layout h1 {
    font-size: 3.2rem;
    color: var(--charcoal);
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: left;
}

/* --- Structured Horizontal Image Boxes Layout --- */
.image-box-row {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-bottom: 50px;
}

.image-box {
    flex: 1;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback adjustment for small screens */
@media (max-width: 768px) {
    .image-box-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- Company Intro Section --- */
.company-intro {
    margin-bottom: 30px;
    background: var(--bg-light);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--accent-blue);
}

.company-brand {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 8px;
}

.company-description {
    font-size: 1.1rem;
    color: var(--charcoal);
    line-height: 1.6;
}

/* --- Content Typography & Text Width Restrictions --- */
.product-brief-description {
    font-size: 1.15rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
}

h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    margin-top: 55px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 8px;
}

h3 {
    font-size: 1.3rem;
    color: var(--charcoal);
    margin-top: 35px;
    margin-bottom: 12px;
    font-weight: 700;
}

.two-line-description {
    font-size: 1.15rem;
    color: var(--charcoal);
    font-weight: 500;
    margin-bottom: 25px;
    max-width: 1200px;
}

p {
    color: var(--muted-gray);
    margin-bottom: 18px;
    font-size: 1.05rem;
    max-width: 1300px;
}

/* --- Data Lists --- */
ul {
    list-style-type: none;
    margin-bottom: 30px;
    padding-left: 5px;
}

li {
    font-size: 1.05rem;
    color: var(--muted-gray);
    margin-bottom: 14px;
    position: relative;
    padding-left: 24px;
}

li::before {
    content: "■";
    color: var(--accent-blue);
    font-size: 0.75rem;
    position: absolute;
    left: 0;
    top: 2px;
}

li strong {
    color: var(--charcoal);
}

/* Wide dynamic columns for pricing blocks on expansive screens */
.price-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 1024px) {
    .price-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.price-list li {
    background: var(--bg-light);
    padding: 24px;
    border-left: 0;
    border-top: 4px solid var(--primary-blue);
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.price-list li::before {
    display: none;
}

/* --- Call To Action Button Layout --- */
.button-container {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: left;
}

.quote-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 16px 45px;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.quote-btn:hover {
    background-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.3);
}

.quote-btn:active {
    transform: translateY(1px);
}
/* Volute Spring ENDS */


/* Conical springs STARTS */
/* --- Base Industrial Styling --- */
:root {
    --primary-blue: #003366;
    --accent-blue: #0056b3;
    --charcoal: #1a202c;
    --muted-gray: #4a5568;
    --bg-light: #f8fafc;
    --border-color: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* --- Expanded Page Width Configuration (Uniform Wide Structure) --- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Top Element: Product Header Setup --- */
.product-layout h1 {
    font-size: 3.2rem;
    color: var(--charcoal);
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: left;
}

/* --- Structured Horizontal Image Boxes Layout --- */
.image-box-row {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-bottom: 50px;
}

.image-box {
    flex: 1; /* Distributes width evenly across all 3 boxes */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback adjustment for small screens */
@media (max-width: 768px) {
    .image-box-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- Company Intro Section --- */
.company-intro {
    margin-bottom: 30px;
    background: var(--bg-light);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--accent-blue);
}

.company-brand {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 8px;
}

.company-description {
    font-size: 1.1rem;
    color: var(--charcoal);
    line-height: 1.6;
}

/* --- Content Typography & Text Width Restrictions --- */
.product-brief-description {
    font-size: 1.15rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
}

h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    margin-top: 55px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 8px;
}

h3 {
    font-size: 1.3rem;
    color: var(--charcoal);
    margin-top: 35px;
    margin-bottom: 12px;
    font-weight: 700;
}

.two-line-description {
    font-size: 1.15rem;
    color: var(--charcoal);
    font-weight: 500;
    margin-bottom: 25px;
    max-width: 1200px;
}

p {
    color: var(--muted-gray);
    margin-bottom: 18px;
    font-size: 1.05rem;
    max-width: 1300px;
}

/* --- Data Lists --- */
ul {
    list-style-type: none;
    margin-bottom: 30px;
    padding-left: 5px;
}

li {
    font-size: 1.05rem;
    color: var(--muted-gray);
    margin-bottom: 14px;
    position: relative;
    padding-left: 24px;
}

li::before {
    content: "■";
    color: var(--accent-blue);
    font-size: 0.75rem;
    position: absolute;
    left: 0;
    top: 2px;
}

li strong {
    color: var(--charcoal);
}

/* Wide dynamic columns for pricing blocks on expansive screens */
.price-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 1024px) {
    .price-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.price-list li {
    background: var(--bg-light);
    padding: 24px;
    border-left: 0;
    border-top: 4px solid var(--primary-blue);
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.price-list li::before {
    display: none;
}

/* --- Call To Action Button Layout --- */
.button-container {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: left;
}

.quote-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 16px 45px;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.quote-btn:hover {
    background-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.3);
}

.quote-btn:active {
    transform: translateY(1px);
}
/* Conical springs ENDS */

/* TENSION SPRING STARTS */
/* --- Base Industrial Styling --- */
:root {
    --primary-blue: #003366;
    --accent-blue: #0056b3;
    --charcoal: #1a202c;
    --muted-gray: #4a5568;
    --bg-light: #f8fafc;
    --border-color: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* --- Expanded Page Width Configuration (Uniform Wide Structure) --- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Top Element: Product Header Setup --- */
.product-layout h1 {
    font-size: 3.2rem;
    color: var(--charcoal);
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: left;
}

/* --- Structured Horizontal Image Boxes Layout --- */
.image-box-row {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-bottom: 50px;
}

.image-box {
    flex: 1; /* Distributes width evenly across all 3 boxes */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback adjustment for small screens */
@media (max-width: 768px) {
    .image-box-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- Company Intro Section --- */
.company-intro {
    margin-bottom: 30px;
    background: var(--bg-light);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--accent-blue);
}

.company-brand {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 8px;
}

.company-description {
    font-size: 1.1rem;
    color: var(--charcoal);
    line-height: 1.6;
}

/* --- Content Typography & Text Width Restrictions --- */
.product-brief-description {
    font-size: 1.15rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
}

h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    margin-top: 55px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 8px;
}

h3 {
    font-size: 1.3rem;
    color: var(--charcoal);
    margin-top: 35px;
    margin-bottom: 12px;
    font-weight: 700;
}

.two-line-description {
    font-size: 1.15rem;
    color: var(--charcoal);
    font-weight: 500;
    margin-bottom: 25px;
    max-width: 1200px;
}

p {
    color: var(--muted-gray);
    margin-bottom: 18px;
    font-size: 1.05rem;
    max-width: 1300px;
}

/* --- Data Lists --- */
ul {
    list-style-type: none;
    margin-bottom: 30px;
    padding-left: 5px;
}

li {
    font-size: 1.05rem;
    color: var(--muted-gray);
    margin-bottom: 14px;
    position: relative;
    padding-left: 24px;
}

li::before {
    content: "■";
    color: var(--accent-blue);
    font-size: 0.75rem;
    position: absolute;
    left: 0;
    top: 2px;
}

li strong {
    color: var(--charcoal);
}

/* Wide dynamic columns for pricing blocks on expansive screens */
.price-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 1024px) {
    .price-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.price-list li {
    background: var(--bg-light);
    padding: 24px;
    border-left: 0;
    border-top: 4px solid var(--primary-blue);
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.price-list li::before {
    display: none;
}

/* --- Call To Action Button Layout --- */
.button-container {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: left;
}

.quote-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 16px 45px;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.quote-btn:hover {
    background-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.3);
}

.quote-btn:active {
    transform: translateY(1px);
}
/* TENSION SPRING ENDS */


/* DISC SPRING STARTS */
/* --- Base Industrial Styling --- */
:root {
    --primary-blue: #003366;
    --accent-blue: #0056b3;
    --charcoal: #1a202c;
    --muted-gray: #4a5568;
    --bg-light: #f8fafc;
    --border-color: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* --- Expanded Page Width Configuration (Uniform Wide Structure) --- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Top Element: Product Header Setup --- */
.product-layout h1 {
    font-size: 3.2rem;
    color: var(--charcoal);
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: left;
}

/* --- Structured Horizontal Image Boxes Layout --- */
.image-box-row {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-bottom: 50px;
}

.image-box {
    flex: 1; /* Distributes width evenly across all 3 boxes */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback adjustment for small screens */
@media (max-width: 768px) {
    .image-box-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- Company Intro Section --- */
.company-intro {
    margin-bottom: 30px;
    background: var(--bg-light);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--accent-blue);
}

.company-brand {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 8px;
}

.company-description {
    font-size: 1.1rem;
    color: var(--charcoal);
    line-height: 1.6;
}

/* --- Content Typography & Text Width Restrictions --- */
.product-brief-description {
    font-size: 1.15rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
}

h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    margin-top: 55px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 8px;
}

h3 {
    font-size: 1.3rem;
    color: var(--charcoal);
    margin-top: 35px;
    margin-bottom: 12px;
    font-weight: 700;
}

.two-line-description {
    font-size: 1.15rem;
    color: var(--charcoal);
    font-weight: 500;
    margin-bottom: 25px;
    max-width: 1200px;
}

p {
    color: var(--muted-gray);
    margin-bottom: 18px;
    font-size: 1.05rem;
    max-width: 1300px;
}

/* --- Data Lists --- */
ul {
    list-style-type: none;
    margin-bottom: 30px;
    padding-left: 5px;
}

li {
    font-size: 1.05rem;
    color: var(--muted-gray);
    margin-bottom: 14px;
    position: relative;
    padding-left: 24px;
}

li::before {
    content: "■";
    color: var(--accent-blue);
    font-size: 0.75rem;
    position: absolute;
    left: 0;
    top: 2px;
}

li strong {
    color: var(--charcoal);
}

/* Wide dynamic columns for pricing blocks on expansive screens */
.price-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 1024px) {
    .price-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.price-list li {
    background: var(--bg-light);
    padding: 24px;
    border-left: 0;
    border-top: 4px solid var(--primary-blue);
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.price-list li::before {
    display: none;
}

/* --- Call To Action Button Layout --- */
.button-container {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: left;
}

.quote-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 16px 45px;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.quote-btn:hover {
    background-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.3);
}

.quote-btn:active {
    transform: translateY(1px);
}
/* DISC SPRING ENDS */

/* TORSION SPRING STARTS */
/* --- Base Industrial Styling --- */
:root {
    --primary-blue: #003366;
    --accent-blue: #0056b3;
    --charcoal: #1a202c;
    --muted-gray: #4a5568;
    --bg-light: #f8fafc;
    --border-color: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* --- Expanded Page Width Configuration (Uniform Wide Structure) --- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Top Element: Product Header Setup --- */
.product-layout h1 {
    font-size: 3.2rem;
    color: var(--charcoal);
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: left;
}

/* --- Structured Horizontal Image Boxes Layout --- */
.image-box-row {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-bottom: 50px;
}

.image-box {
    flex: 1; /* Distributes width evenly across all 3 boxes */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback adjustment for small screens */
@media (max-width: 768px) {
    .image-box-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- Company Intro Section --- */
.company-intro {
    margin-bottom: 30px;
    background: var(--bg-light);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--accent-blue);
}

.company-brand {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 8px;
}

.company-description {
    font-size: 1.1rem;
    color: var(--charcoal);
    line-height: 1.6;
}

/* --- Content Typography & Text Width Restrictions --- */
.product-brief-description {
    font-size: 1.15rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
}

h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    margin-top: 55px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 8px;
}

h3 {
    font-size: 1.3rem;
    color: var(--charcoal);
    margin-top: 35px;
    margin-bottom: 12px;
    font-weight: 700;
}

.two-line-description {
    font-size: 1.15rem;
    color: var(--charcoal);
    font-weight: 500;
    margin-bottom: 25px;
    max-width: 1200px;
}

p {
    color: var(--muted-gray);
    margin-bottom: 18px;
    font-size: 1.05rem;
    max-width: 1300px;
}

/* --- Data Lists --- */
ul {
    list-style-type: none;
    margin-bottom: 30px;
    padding-left: 5px;
}

li {
    font-size: 1.05rem;
    color: var(--muted-gray);
    margin-bottom: 14px;
    position: relative;
    padding-left: 24px;
}

li::before {
    content: "■";
    color: var(--accent-blue);
    font-size: 0.75rem;
    position: absolute;
    left: 0;
    top: 2px;
}

li strong {
    color: var(--charcoal);
}

/* Wide dynamic columns for pricing blocks on expansive screens */
.price-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 1024px) {
    .price-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.price-list li {
    background: var(--bg-light);
    padding: 24px;
    border-left: 0;
    border-top: 4px solid var(--primary-blue);
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.price-list li::before {
    display: none;
}

/* --- Call To Action Button Layout --- */
.button-container {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: left;
}

.quote-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 16px 45px;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.quote-btn:hover {
    background-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.3);
}

.quote-btn:active {
    transform: translateY(1px);
}
/* TORSION SPRING ENDS */


/* HEAVY DUTY spring StRATS */
/* --- Base Industrial Styling --- */
:root {
    --primary-blue: #003366;
    --accent-blue: #0056b3;
    --charcoal: #1a202c;
    --muted-gray: #4a5568;
    --bg-light: #f8fafc;
    --border-color: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
    padding-top: 40px;
    padding-bottom: 80px;
}

/* --- Expanded Page Width Configuration (Uniform Wide Structure) --- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Top Element: Product Header Setup --- */
.product-layout h1 {
    font-size: 3.2rem;
    color: var(--charcoal);
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: left;
}

/* --- Structured Horizontal Image Boxes Layout --- */
.image-box-row {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-bottom: 50px;
}

.image-box {
    flex: 1; /* Distributes width evenly across all 3 boxes */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback adjustment for small screens */
@media (max-width: 768px) {
    .image-box-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- Company Intro Section --- */
.company-intro {
    margin-bottom: 30px;
    background: var(--bg-light);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--accent-blue);
}

.company-brand {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 8px;
}

.company-description {
    font-size: 1.1rem;
    color: var(--charcoal);
    line-height: 1.6;
}

/* --- Content Typography & Text Width Restrictions --- */
.product-brief-description {
    font-size: 1.15rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
}

h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    margin-top: 55px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 8px;
}

h3 {
    font-size: 1.3rem;
    color: var(--charcoal);
    margin-top: 35px;
    margin-bottom: 12px;
    font-weight: 700;
}

.two-line-description {
    font-size: 1.15rem;
    color: var(--charcoal);
    font-weight: 500;
    margin-bottom: 25px;
    max-width: 1200px;
}

p {
    color: var(--muted-gray);
    margin-bottom: 18px;
    font-size: 1.05rem;
    max-width: 1300px;
}

/* --- Data Lists --- */
ul {
    list-style-type: none;
    margin-bottom: 30px;
    padding-left: 5px;
}

li {
    font-size: 1.05rem;
    color: var(--muted-gray);
    margin-bottom: 14px;
    position: relative;
    padding-left: 24px;
}

li::before {
    content: "■";
    color: var(--accent-blue);
    font-size: 0.75rem;
    position: absolute;
    left: 0;
    top: 2px;
}

li strong {
    color: var(--charcoal);
}

/* Wide dynamic columns for pricing blocks on expansive screens */
.price-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 1024px) {
    .price-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.price-list li {
    background: var(--bg-light);
    padding: 24px;
    border-left: 0;
    border-top: 4px solid var(--primary-blue);
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.price-list li::before {
    display: none;
}

/* --- Call To Action Button Layout --- */
.button-container {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: left;
}

.quote-btn {
    display: flex;
    background-color: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 16px 45px;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
    justify-content: center;
    width: 300px;
    margin: 0 auto;
}

.quote-btn:hover {
    background-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.3);
}

.quote-btn:active {
    transform: translateY(1px);
}
/* HEAVY DUTY spring ENDS */


/* SPRING SUPPORT starts */
/* ==========================================================================
   CSS Corporate Settings & Root Variables 
   ========================================================================== */
:root {
    --primary-blue: #002244;       /* Deep corporate brand color */
    --accent-blue: #0044aa;        /* Left bar highlight line color */
    --charcoal: #1a202c;          /* Title text color tone */
    --muted-gray: #4a5568;        /* Body paragraph layout colors */
    --bg-light: #f8fafc;          /* Interior box shading color */
    --border-color: #cbd5e1;       /* Image box framing color */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
}

/* --- Container Outer Constraints --- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px 80px 40px;
}

/* ==========================================================================
   1. Typography & Main Page Title
   ========================================================================== */
.product-layout h1 {
    font-size: 3.2rem;
    color: var(--charcoal);
    margin-top: 10px;
    margin-bottom: 35px;
    font-weight: 900;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

h2 {
    font-size: 1.75rem;
    color: var(--primary-blue);
    margin-top: 45px;
    margin-bottom: 20px;
    font-weight: 700;
}

h3 {
    font-size: 1.25rem;
    color: var(--charcoal);
    margin-top: 25px;
    margin-bottom: 12px;
    font-weight: 700;
}

p {
    color: var(--muted-gray);
    margin-bottom: 20px;
    font-size: 1.05rem;
}

/* ==========================================================================
   2. Auto-Going + Manual Hybrid Box Carousel Layout Frame
   ========================================================================== */
.carousel-wrapper-relative {
    position: relative;
    width: 100%;
    margin-bottom: 45px;
}

/* Active Viewport Window Track Area Mask */
.carousel-container {
    width: 100%;
    overflow-x: hidden; /* JavaScript manages progression paths smoothly */
    white-space: nowrap;
    padding: 10px 0;
}

/* Flexible Track Ribbon Wrapper Strip */
.carousel-track {
    display: flex;
    gap: 20px;
    width: max-content;
}

/* Precise Square Box Layout Units */
.carousel-card-square {
    width: 260px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    background: #ffffff;
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.carousel-card-square img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Retains absolute square format proportions */
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--bg-light);
}

/* Product names written inside standard <p> tags beneath the image */
.carousel-card-square p {
    font-size: 1rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin-top: 12px;
    margin-bottom: 0;
    white-space: normal; /* Permits text word wrapping safely inside the box card */
}

/* Navigation Arrow Overlays */
.nav-arrow {
    position: absolute;
    top: calc(50% - 34px); /* Perfectly aligns arrow buttons against image centers */
    width: 44px;
    height: 44px;
    background-color: var(--primary-blue);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.nav-arrow:hover {
    background-color: var(--accent-blue);
    transform: scale(1.05);
}

.prev-btn {
    left: -22px; /* Hangs out neatly on left boundary edges */
}

.next-btn {
    right: -22px; /* Hangs out safely over right boundary margins */
}

/* ==========================================================================
   3. Two-Line Brief Paragraph Block
   ========================================================================== */
.product-brief-description {
    font-size: 1.1rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1350px;
}

/* ==========================================================================
   4. Highlighted Corporate Box (Side-Highlight Structure)
   ========================================================================== */
.company-intro {
    margin-bottom: 45px;
    background: #ffffff;
    padding: 24px 30px;
    border-left: 5px solid var(--accent-blue);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.02);
}

.company-brand {
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 6px;
}

.company-description {
    font-size: 1.05rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 0;
}

/* ==========================================================================
   5. Vertical Layout Stack (Line-by-Line List Framework)
   ========================================================================== */
.vertical-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.content-block-vertical {
    width: 100%;
}

ul {
    list-style-type: none;
    margin-bottom: 10px;
}

li {
    font-size: 1.05rem;
    color: var(--muted-gray);
    margin-bottom: 14px;
    position: relative;
    padding-left: 22px;
}

li::before {
    content: "—";
    color: var(--accent-blue);
    font-weight: bold;
    position: absolute;
    left: 0;
}

li strong {
    color: var(--charcoal);
}

.section-divider {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 45px 0;
}

/* ==========================================================================
   6. Clean Right-Aligned Action Layout Button
   ========================================================================== */
.button-container-right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 50px;
}

.action-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 42px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 34, 68, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.action-btn:hover {
    background-color: var(--accent-blue);
    transform: translateY(-1px);
}

/* ==========================================================================
   7. Device Layout Breakpoints & Adaptability
   ========================================================================== */
@media (max-width: 680px) {
    .product-layout h1 {
        font-size: 2.4rem;
    }
    .button-container-right {
        justify-content: center;
    }
    .prev-btn { left: 5px; }
    .next-btn { right: 5px; }
}
/* SPRING SuPPORT ENDS */

/* PIPE SUPPORT starts */
/* ==========================================================================
   CSS Settings & Root Variables 
   ========================================================================== */
:root {
    --primary-blue: #002244;       
    --accent-blue: #0044aa;        
    --charcoal: #1a202c;          
    --muted-gray: #4a5568;        
    --bg-light: #f8fafc;          
    --border-color: #cbd5e1;       
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: var(--charcoal);
    line-height: 1.7;
    padding: 0%;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px 80px 40px;
}

/* ==========================================================================
   1. Typography & Layout Elements
   ========================================================================== */
.product-layout h1 {
    font-size: 3rem;
    color: var(--charcoal);
    margin-top: 30px;
    margin-bottom: 30px;
    font-weight: 900;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    justify-content: center;
    display: flex;
}

h2 {
    font-size: 1.75rem;
    color: var(--primary-blue);
    margin-top: 45px;
    margin-bottom: 20px;
    font-weight: 700;
}

h3 {
    font-size: 1.35rem;
    color: var(--charcoal);
    margin-top: 25px;
    margin-bottom: 6px;
    font-weight: 700;
}

.sub-heading {
    font-size: 1.05rem;
    color: var(--accent-blue);
    margin-top: 8px;
    margin-bottom: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

p {
    color: var(--muted-gray);
    margin-bottom: 20px;
    font-size: 1.05rem;
}

/* Clamps descriptive narrative blocks cleanly to exactly two lines */
.two-line-limit {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 12px;
}

/* ==========================================================================
   2. Adjusted Picture Box Layout (Fixed 300px Overall Height Matrix)
   ========================================================================== */
.carousel-wrapper-relative {
    width: 100%;
    margin-bottom: 55px;
}

.carousel-container {
    width: 100%;
    padding: 10px 0;
}

.three-picture-grid-large {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px; 
}

.carousel-card-square-large {
    border: 1px solid var(--border-color);
    background: #ffffff;
    border-radius: 8px;
    padding: 16px; 
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Constrained overall box layout to exactly 300px vertical profile */
.carousel-card-square-large.extended-height {
    height: 300px;
    min-height: 300px;
    max-height: 300px;
}

/* Reduced image height proportionally to fit within the 300px matrix */
.carousel-card-square-large.extended-height img {
    width: 100%;
    height: 210px; 
    object-fit: cover;
    border-radius: 6px;
    background-color: var(--bg-light);
}

.carousel-card-square-large p {
    font-size: 1.15rem; 
    color: var(--primary-blue);
    font-weight: 800;
    margin-top: auto; 
    padding-top: 8px;
    margin-bottom: 0;
}

/* ==========================================================================
   3. Product Brief Overview (Strict Two Lines)
   ========================================================================== */
.product-brief-description {
    font-size: 1.15rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1350px;
    /* display: -webkit-box; */
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   4. Highlighted Corporate Accent Shading Block
   ========================================================================== */
.company-intro {
    margin-bottom: 45px;
    background: #ffffff;
    padding: 24px 30px;
    border-left: 5px solid var(--accent-blue);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.02);
}

.company-brand {
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 6px;
}

.company-description {
    font-size: 1.05rem;
    color: var(--muted-gray);
    line-height: 1.6;
    margin-bottom: 0;
}

/* ==========================================================================
   5. Constant Support H2 Grid Configuration Layout
   ========================================================================== */
.config-matrix-heading {
    margin-top: 55px;
    margin-bottom: 15px;
}

.types-h2-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 25px;
    margin-bottom: 40px;
}

.type-h2-item {
    display: flex;
    flex-direction: column;
    padding-left: 24px;
    border-left: 3px solid var(--accent-blue);
}

/* Customized nested configurations for Types A-K when elevated to H2 */
.type-h2-item h2 {
    font-size: 1.4rem;
    color: var(--charcoal);
    margin-top: 0;
    margin-bottom: 6px;
    font-weight: 700;
}

.type-h2-item p.two-line-limit {
    font-size: 1.05rem;
    color: var(--muted-gray);
    margin-bottom: 0;
}

/* Vertical Stacking Blocks */
.vertical-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.content-block-vertical {
    width: 100%;
}

.section-divider {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 45px 0;
}

/* ==========================================================================
   6. Clean Right-Aligned Action Layout Button
   ========================================================================== */
.button-container-right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 50px;
}

.action-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 42px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 34, 68, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.action-btn:hover {
    background-color: var(--accent-blue);
    transform: translateY(-1px);
}

/* ==========================================================================
   7. Device Adaptability Media Queries
   ========================================================================== */
@media (max-width: 950px) {
    .three-picture-grid-large {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .carousel-card-square-large.extended-height {
        min-height: auto;
    }
    .carousel-card-square-large.extended-height img {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 680px) {
    .product-layout h1 { font-size: 2.2rem; }
    .button-container-right { justify-content: center; }
}
/* PIPE SUPPORT ends */
/* DIFFERNT PAGE CSS IN ONE CODES ENDS */


/* PHOTOS CSS STARTS */

.Helical-Coil-Spring-banner{
    width: 325px;
}
/* PHOTO CSS ENDS */

 /* SCROLL TO Top */
 

 /* SCROLL TO TOP ENDS */