/* ==========================================================================
LIMRA HARDWARE TRADING LLC - UNIFIED MASTER STYLESHEET

Structure:

Root Variables & Reset / Base

Top Header & Main Navbar (Glassmorphic & Mobile Menu)

Site Footer & Floating Actions (WhatsApp & Back to Top)

Common Shared Components (Buttons, Badges, Modals, Breadcrumbs, Inner Hero)

Index Page Styles (Hero Carousel, Metrics Strip, About, Process, Benefits, RFQ)

About Us Page (MD Desk & Vision/Mission)

Categories Page (Category Cards Grid)

Products & Catalog Page (Filter Pills, Modern Product Cards)

Product Details Page (Gallery, Technical Specifications Table, RFQ Box)

Workflow Page (Step Badges, QA Inspection Strip)

Why Us Page (Pillars Grid & Comparison Table)

Contact Us Page (Contact Cards & Map Wrap)
========================================================================== */

/* ==========================================================================

ROOT VARIABLES & RESET / BASE
========================================================================== */
:root {
--primary-blue: #106EBE;
--primary-blue-dark: #094d87;
--mint-accent: #0FFCBE;
--mint-hover: #0ad39e;
--dark-navy: #081a2e;
--dark-navy-surface: #0e243d;
--card-bg: #f8fafc;
--text-main: #1e293b;
--text-muted: #64748b;
--border-subtle: rgba(226, 232, 240, 0.9);
}

body {
font-family: 'Inter', sans-serif;
color: var(--text-main);
background-color: #ffffff;
overflow-x: hidden;
scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, .brand-font {
font-family: 'Outfit', sans-serif;
}

/* ==========================================================================
2. TOP HEADER & MAIN NAVBAR (From index.html)
========================================================================== /
/ Top Header Strip */
.top-header {
background-color: var(--dark-navy);
color: #cbd5e1;
font-size: 0.84rem;
padding: 9px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
z-index: 1030;
}

.top-header a {
color: #e2e8f0;
text-decoration: none;
transition: all 0.25s ease;
}

.top-header a:hover {
color: var(--mint-accent);
}

.social-top-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.75rem;
transition: all 0.3s ease;
text-decoration: none;
}

.social-top-icon:hover {
background: var(--mint-accent);
color: var(--dark-navy);
transform: translateY(-2px);
}

/* Main Navbar */
.main-navbar {
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 0.75rem 0;
box-shadow: 0 4px 25px rgba(8, 26, 46, 0.06);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: sticky;
top: 0;
z-index: 1020;
}

.main-navbar.scrolled {
padding: 0.5rem 0;
box-shadow: 0 6px 30px rgba(8, 26, 46, 0.12);
background: rgba(255, 255, 255, 0.98);
}

.logo-container {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.limra-logo{
  max-width: 100%;
}

.nav-link-custom {
font-weight: 600;
font-size: 0.92rem;
color: var(--dark-navy) !important;
padding: 0.5rem 0.9rem !important;
transition: all 0.25s ease;
position: relative;
text-decoration: none !important;
}

.nav-link-custom::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0%;
height: 2px;
background: var(--mint-accent);
transition: all 0.3s ease;
transform: translateX(-50%);
border-radius: 2px;
}

.nav-link-custom:hover::after,
.nav-link-custom.active::after {
width: 60%;
}

.nav-link-custom:hover,
.nav-link-custom.active {
color: var(--primary-blue) !important;
}

/* Offcanvas Mobile Navigation */
.offcanvas-start {
width: 320px;
background: var(--dark-navy);
color: #fff;
}

.offcanvas-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas-body .nav-link-custom {
color: #e2e8f0 !important;
padding: 0.85rem 0 !important;
font-size: 1.05rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.offcanvas-body .nav-link-custom:hover {
color: var(--mint-accent) !important;
padding-left: 8px !important;
}

/* ==========================================================================
3. SITE FOOTER & FLOATING ACTIONS (From index.html)
========================================================================== */
.site-footer {
background: var(--dark-navy);
color: #94a3b8;
padding: 4.8rem 0 2rem 0;
font-size: 0.9rem;
}

.footer-title {
color: #ffffff;
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 1.35rem;
position: relative;
}

.footer-title::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 32px;
height: 2px;
background: var(--mint-accent);
}

.footer-links {
list-style: none;
padding: 0;
margin: 0;
}

.footer-links li {
margin-bottom: 0.65rem;
}

.footer-links a {
color: #cbd5e1;
text-decoration: none;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}

.footer-links a:hover {
color: var(--mint-accent);
transform: translateX(4px);
}

.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 1.1rem;
}

.footer-contact-item i {
color: var(--mint-accent);
font-size: 1.15rem;
margin-top: 3px;
}

.footer-contact-item a {
color: #cbd5e1;
text-decoration: none;
transition: color 0.2s;
}

.footer-contact-item a:hover {
color: var(--mint-accent);
}

.copyright-bar {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 1.6rem 0;
margin-top: 3.5rem;
font-size: 0.83rem;
color: #64748b;
}

.spectrum-tag {
color: var(--mint-accent);
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}

.spectrum-tag:hover {
color: #ffffff;
text-decoration: underline;
}

/* Floating Actions */
.floating-wa-btn {
position: fixed;
bottom: 28px;
left: 28px;
width: 52px;
height: 52px;
background: #25D366;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.65rem;
text-decoration: none;
box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
z-index: 999;
transition: transform 0.3s ease;
animation: pulseWa 2.2s infinite;
}

.floating-wa-btn:hover {
transform: scale(1.1);
color: #ffffff;
}

@keyframes pulseWa {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
}
70% {
box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}

#backToTopBtn {
position: fixed;
bottom: 28px;
right: 28px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--primary-blue);
color: var(--mint-accent);
border: 2px solid var(--mint-accent);
box-shadow: 0 6px 18px rgba(8, 26, 46, 0.25);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.35s ease;
z-index: 999;
}

#backToTopBtn.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

#backToTopBtn:hover {
background: var(--mint-accent);
color: var(--dark-navy);
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(15, 252, 190, 0.5);
}

/* ==========================================================================
4. COMMON SHARED COMPONENTS
========================================================================== /
/ RFQ Buttons */
.btn-quote {
background: var(--primary-blue);
color: #ffffff;
font-weight: 600;
font-size: 0.88rem;
padding: 0.65rem 1.35rem;
border-radius: 50px;
transition: all 0.3s ease;
border: 1px solid var(--primary-blue);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
}

.btn-quote:hover {
background: var(--mint-accent);
color: var(--dark-navy);
border-color: var(--mint-accent);
box-shadow: 0 6px 18px rgba(15, 252, 190, 0.4);
transform: translateY(-2px);
}

/* Breadcrumb Component for Inner Pages */
.breadcrumb-custom {
background: transparent;
padding: 0;
margin-bottom: 0.75rem;
}

.breadcrumb-custom .breadcrumb-item,
.breadcrumb-custom .breadcrumb-item a {
color: rgba(255, 255, 255, 0.75);
font-size: 0.86rem;
text-decoration: none;
font-weight: 500;
}

.breadcrumb-custom .breadcrumb-item a:hover {
color: var(--mint-accent);
}

.breadcrumb-custom .breadcrumb-item.active {
color: var(--mint-accent);
font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, 0.4);
}

/* Inner Hero Banner (Shared by Inner Pages) */
.inner-hero-section {
position: relative;
background: linear-gradient(135deg, rgba(8, 26, 46, 0.93) 0%, rgba(16, 110, 190, 0.85) 100%),
url('https://images.unsplash.com/photo-1587293852726-70cdb56c2866?auto=format&fit=crop&w=1920&q=80') center center / cover no-repeat;
padding: 65px 0 50px;
color: #ffffff;
}

.page-hero-banner {
background: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-blue-dark) 100%);
color: #fff;
padding: 65px 0 50px;
text-align: center;
}

/* Form Controls & Styling */
.form-control-custom,
.form-select-custom {
border: 1px solid #cbd5e1;
padding: 0.75rem 1rem;
border-radius: 10px;
font-size: 0.92rem;
transition: all 0.25s ease;
}

.form-control-custom:focus,
.form-select-custom:focus {
border-color: var(--primary-blue);
box-shadow: 0 0 0 3px rgba(16, 110, 190, 0.15);
outline: none;
}
/* ==================== RFQ MODERN SECTION STYLING ==================== */
.rfq-modern-section {
  background-color: #f1f5f9;
}

.rfq-container-card {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(8, 26, 46, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #ffffff;
}

/* Left Dark Panel */
.rfq-left-panel {
  background: linear-gradient(145deg, #081a2e 0%, #0d2847 100%);
  color: #ffffff;
  position: relative;
}

.rfq-chip-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 252, 190, 0.12);
  border: 1px solid rgba(15, 252, 190, 0.3);
  color: #0FFCBE;
  padding: 0.35rem 0.9rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0FFCBE;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(15, 252, 190, 0.7);
  animation: rfqPulse 1.8s infinite;
}

@keyframes rfqPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(15, 252, 190, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(15, 252, 190, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(15, 252, 190, 0); }
}

.rfq-panel-heading {
  font-size: clamp(1.5rem, 2.3vw, 1.95rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}

.rfq-panel-desc {
  color: #cbd5e1;
  font-size: 0.92rem;
  line-height: 1.65;
}

.rfq-features-group {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.rfq-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.rfq-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(16, 110, 190, 0.25);
  color: #0FFCBE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.border-white-10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.btn-rfq-wa {
  background: #25D366;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.btn-rfq-wa:hover {
  background: #1eb956;
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-rfq-call {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border-radius: 50px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.btn-rfq-call:hover {
  background: #ffffff;
  color: #081a2e;
}

/* Right Form Panel */
.rfq-right-panel {
  background: #ffffff;
}

.rfq-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.rfq-field-icon {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  font-size: 1.05rem;
  pointer-events: none;
  z-index: 5;
}

.rfq-form-control {
  border: 1.5px solid #e2e8f0;
  background-color: #f8fafc;
  padding: 0.72rem 1rem 0.72rem 42px;
  border-radius: 10px;
  font-size: 0.92rem;
  transition: all 0.25s ease;
  width: 100%;
}

.rfq-textarea {
  padding-left: 1rem !important;
}

.rfq-form-control:focus {
  border-color: #106EBE;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(16, 110, 190, 0.12);
  outline: none;
}

/* Submit Button */
.btn-rfq-submit {
  background: #106EBE;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.96rem;
  padding: 0.85rem 1.8rem;
  border-radius: 50px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(16, 110, 190, 0.25);
  cursor: pointer;
}

.btn-rfq-submit:hover {
  background: #081a2e;
  color: #0FFCBE;
  box-shadow: 0 10px 25px rgba(8, 26, 46, 0.3);
  transform: translateY(-2px);
}
/* RFQ Modal */
.modal-content {
border-radius: 18px;
border: none;
overflow: hidden;
}

.modal-header {
background: var(--dark-navy);
color: #fff;
padding: 1.3rem 1.6rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Section Tags */
.section-tag {
color: var(--primary-blue);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 0.5rem;
display: inline-block;
}

.section-heading {
font-size: clamp(1.9rem, 3vw, 2.5rem);
font-weight: 800;
color: var(--dark-navy);
line-height: 1.22;
margin-bottom: 1.25rem;
}

/* ==========================================================================
5. INDEX PAGE SPECIFIC STYLES
========================================================================== /
/ Hero Slider */
.carousel-item {
height: 620px;
min-height: 540px;
background-color: var(--dark-navy);
position: relative;
}

.slide-bg {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-position: center right;
background-size: cover;
transition: transform 8s ease;
}

.carousel-item.active .slide-bg {
transform: scale(1.06);
}

.slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(8, 26, 46, 0.96) 0%, rgba(8, 26, 46, 0.84) 50%, rgba(8, 26, 46, 0.35) 100%);
display: flex;
align-items: center;
z-index: 2;
}

.hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(15, 252, 190, 0.15);
border: 1px solid rgba(15, 252, 190, 0.4);
color: var(--mint-accent);
padding: 0.4rem 1rem;
border-radius: 50px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 1.25rem;
}

.hero-title {
font-size: clamp(2.1rem, 4vw, 3.25rem);
font-weight: 800;
line-height: 1.15;
color: #ffffff;
margin-bottom: 1.25rem;
}

.hero-title span {
color: var(--mint-accent);
}

.hero-desc {
font-size: 1.05rem;
color: #cbd5e1;
line-height: 1.65;
margin-bottom: 2rem;
max-width: 600px;
}

.btn-hero-wa {
background: #25D366;
color: #ffffff;
font-weight: 700;
padding: 0.78rem 1.6rem;
border-radius: 50px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
}

.btn-hero-wa:hover {
background: #1eb956;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(37, 211, 102, 0.5);
}

.btn-hero-outline {
border: 2px solid var(--mint-accent);
color: var(--mint-accent);
font-weight: 600;
padding: 0.75rem 1.6rem;
border-radius: 50px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
transition: all 0.3s ease;
cursor: pointer;
}

.btn-hero-outline:hover {
background: var(--mint-accent);
color: var(--dark-navy);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15, 252, 190, 0.4);
}

.carousel-control-prev,
.carousel-control-next {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.12);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 0.75;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}

.carousel-control-prev { left: 24px; }
.carousel-control-next { right: 24px; }

.carousel-control-prev:hover,
.carousel-control-next:hover {
opacity: 1;
background: var(--mint-accent);
color: var(--dark-navy);
}

.carousel-indicators {
bottom: 25px;
gap: 6px;
}

.carousel-indicators [data-bs-target] {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--mint-accent);
opacity: 0.4;
border: 0;
transition: all 0.35s ease;
}

.carousel-indicators .active {
width: 32px;
border-radius: 12px;
opacity: 1;
}

/* Stats Counter Strip */
.stats-strip {
background: var(--dark-navy-surface);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
z-index: 5;
}

.stat-card {
padding: 2.2rem 1rem;
border-right: 1px solid rgba(255, 255, 255, 0.08);
text-align: center;
transition: all 0.3s ease;
}

.stat-card:last-child {
border-right: none;
}

.stat-num {
font-size: 2.6rem;
font-weight: 800;
color: var(--mint-accent);
line-height: 1;
margin-bottom: 0.4rem;
font-family: 'Outfit', sans-serif;
}

.stat-label {
color: #cbd5e1;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin: 0;
}

/* About Feature Elements on Index */
.about-img-box {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 16px 36px rgba(8, 26, 46, 0.09);
}

.about-img-box img {
width: 100%;
height: 460px;
object-fit: cover;
transition: transform 0.6s ease;
}

.about-img-box:hover img {
transform: scale(1.03);
}

.experience-badge {
position: absolute;
bottom: 25px;
left: 25px;
background: linear-gradient(135deg, var(--dark-navy), var(--primary-blue));
color: #fff;
padding: 1.25rem 1.6rem;
border-radius: 16px;
border-left: 5px solid var(--mint-accent);
box-shadow: 0 10px 25px rgba(8, 26, 46, 0.35);
}

.experience-badge h3 {
font-size: 2.2rem;
font-weight: 800;
margin: 0;
color: var(--mint-accent);
line-height: 1;
}

.about-feature-item {
display: flex;
gap: 12px;
font-weight: 600;
color: var(--dark-navy);
margin-bottom: 0.85rem;
padding: 0.5rem;
border-radius: 8px;
background: #f8fafc;
}

.about-feature-item i {
color: var(--mint-accent);
font-size: 1rem;
background: var(--dark-navy);
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}

/* Product Cards on Index */
.product-card {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 18px;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 4px 18px rgba(8, 26, 46, 0.04);
}

.product-img-box {
width: 100%;
height: 210px;
overflow: hidden;
position: relative;
background: #f1f5f9;
}

.product-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.product-card:hover .product-img-box img {
transform: scale(1.08);
}

.product-badge-vol {
position: absolute;
top: 14px;
right: 14px;
background: rgba(8, 26, 46, 0.88);
color: var(--mint-accent);
font-size: 0.72rem;
font-weight: 700;
padding: 0.35rem 0.75rem;
border-radius: 50px;
backdrop-filter: blur(4px);
}

.product-card-body {
padding: 1.5rem 1.4rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}

.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 35px rgba(16, 110, 190, 0.12);
border-color: var(--mint-accent);
}

.product-card-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.5rem;
}

.product-card-text {
color: var(--text-muted);
font-size: 0.88rem;
line-height: 1.6;
margin-bottom: 1.35rem;
flex-grow: 1;
}

.btn-view-details {
background: #f0f7ff;
color: var(--primary-blue);
font-weight: 600;
font-size: 0.88rem;
padding: 0.65rem 1.2rem;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.25s ease;
border: 1px solid rgba(16, 110, 190, 0.2);
cursor: pointer;
}

.product-card:hover .btn-view-details {
background: var(--primary-blue);
color: #ffffff;
border-color: var(--primary-blue);
box-shadow: 0 4px 14px rgba(16, 110, 190, 0.25);
}

/* Process Section on Index */
.process-section {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
position: relative;
}

.process-card {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 2.2rem 1.6rem;
position: relative;
transition: all 0.35s ease;
height: 100%;
display: flex;
flex-direction: column;
}

.process-card:hover {
transform: translateY(-6px);
border-color: var(--mint-accent);
box-shadow: 0 16px 32px rgba(8, 26, 46, 0.08);
}

.process-num-badge {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--dark-navy);
color: var(--mint-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 800;
margin-bottom: 1.25rem;
box-shadow: 0 6px 14px rgba(8, 26, 46, 0.2);
}

.process-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.6rem;
}

.process-desc {
color: var(--text-muted);
font-size: 0.88rem;
line-height: 1.6;
margin: 0;
}

/* Parallax CTA Banner on Index */
.cta-banner-section {
padding: 100px 0;
background: linear-gradient(135deg, rgba(8, 26, 46, 0.94) 0%, rgba(16, 110, 190, 0.9) 100%),
url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?auto=format&fit=crop&q=80') center center / cover no-repeat;
background-attachment: fixed;
position: relative;
overflow: hidden;
}

.cta-banner-section::after {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(15, 252, 190, 0.18) 0%, transparent 70%);
border-radius: 50%;
}

.btn-cta-phone {
border: 2px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
font-weight: 600;
padding: 0.8rem 1.8rem;
border-radius: 50px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}

.btn-cta-phone:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #ffffff;
color: #ffffff;
transform: translateY(-2px);
}

/* Benefits / Why Choose Cards on Index */
.benefit-card {
background: #ffffff;
border-radius: 18px;
padding: 2.25rem 1.5rem;
border: 1px solid var(--border-subtle);
text-align: center;
transition: all 0.35s ease;
height: 100%;
}

.benefit-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 34px rgba(8, 26, 46, 0.08);
border-color: rgba(16, 110, 190, 0.3);
}

.benefit-icon-circle {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(16, 110, 190, 0.1), rgba(15, 252, 190, 0.2));
color: var(--primary-blue);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.85rem;
margin-bottom: 1.4rem;
transition: all 0.4s ease;
}

.benefit-card:hover .benefit-icon-circle {
background: var(--dark-navy);
color: var(--mint-accent);
transform: rotateY(180deg);
}

.benefit-title {
font-size: 1.18rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.6rem;
}

.benefit-text {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}

/* Inline RFQ Box */
.rfq-box {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 12px 35px rgba(8, 26, 46, 0.05);
}

/* ==========================================================================
6. ABOUT US PAGE (MD Desk, Vision & Mission)
========================================================================== */
.md-section {
background: #f8fafc;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
position: relative;
}

.md-card-wrapper {
background: #ffffff;
border-radius: 24px;
border: 1px solid var(--border-subtle);
box-shadow: 0 15px 40px rgba(8, 26, 46, 0.05);
overflow: hidden;
}

.md-img-container {
position: relative;
height: 100%;
min-height: 420px;
background: var(--dark-navy);
}

.md-img-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}

.md-badge-overlay {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
background: rgba(8, 26, 46, 0.88);
backdrop-filter: blur(8px);
padding: 1rem 1.25rem;
border-radius: 14px;
border-left: 4px solid var(--mint-accent);
}

.quote-icon-watermark {
font-size: 4rem;
color: rgba(16, 110, 190, 0.12);
line-height: 1;
margin-bottom: -15px;
}

.md-quote-text {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1.25rem;
color: var(--primary-blue-dark);
line-height: 1.6;
margin-bottom: 1.25rem;
}

.md-body-text {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.75;
margin-bottom: 1.2rem;
}

.signature-area {
border-top: 1px dashed var(--border-subtle);
padding-top: 1.25rem;
margin-top: 1.5rem;
}

/* Vision & Mission Cards */
.vm-card {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 2.2rem;
height: 100%;
transition: all 0.3s ease;
}

.vm-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(8, 26, 46, 0.07);
border-color: var(--primary-blue);
}

.vm-icon {
width: 58px;
height: 58px;
border-radius: 12px;
background: #eef6fc;
color: var(--primary-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
margin-bottom: 1.2rem;
}

/* ==========================================================================
7. CATEGORIES PAGE (Category Grid)
========================================================================== */
.cat-card {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 18px;
overflow: hidden;
transition: all 0.35s ease;
height: 100%;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}

.cat-img-box {
width: 100%;
height: 230px;
overflow: hidden;
position: relative;
background: #f1f5f9;
}

.cat-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.cat-card:hover .cat-img-box img {
transform: scale(1.08);
}

.cat-badge {
position: absolute;
top: 14px;
right: 14px;
background: rgba(8, 26, 46, 0.88);
color: var(--mint-accent);
font-size: 0.75rem;
font-weight: 700;
padding: 0.4rem 0.85rem;
border-radius: 50px;
}

.cat-card-body {
padding: 1.6rem 1.4rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}

.cat-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 35px rgba(16, 110, 190, 0.12);
border-color: var(--mint-accent);
}

.btn-cat-view {
background: #f0f7ff;
color: var(--primary-blue);
font-weight: 600;
font-size: 0.88rem;
padding: 0.65rem 1.2rem;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid rgba(16, 110, 190, 0.2);
}

.cat-card:hover .btn-cat-view {
background: var(--primary-blue);
color: #fff;
}

/* ==========================================================================
8. PRODUCTS & CATALOG PAGE (Filter Pills & Cards)
========================================================================== */
.category-filter-bar {
margin-top: -30px;
position: relative;
z-index: 10;
}

.cat-filter-wrapper {
background: #ffffff;
padding: 0.8rem 1rem;
border-radius: 60px;
box-shadow: 0 10px 30px rgba(8, 26, 46, 0.08);
border: 1px solid var(--border-subtle);
}

.cat-pill-btn {
border: none;
background: transparent;
color: var(--dark-navy);
font-weight: 600;
font-size: 0.88rem;
padding: 0.6rem 1.25rem;
border-radius: 50px;
transition: all 0.25s ease;
white-space: nowrap;
}

.cat-pill-btn:hover {
color: var(--primary-blue);
background: #f1f5f9;
}

.cat-pill-btn.active {
background: var(--dark-navy) !important;
color: var(--mint-accent) !important;
box-shadow: 0 4px 14px rgba(8, 26, 46, 0.25);
}

/* Modern Product Card */
.product-modern-card {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
}

.product-modern-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 35px rgba(8, 26, 46, 0.09);
border-color: rgba(16, 110, 190, 0.3);
}

.card-thumb-area {
position: relative;
height: 210px;
background: #f8fafc;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #f1f5f9;
}

.card-thumb-area img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.product-modern-card:hover .card-thumb-area img {
transform: scale(1.06);
}

.grade-chip {
position: absolute;
top: 12px;
left: 12px;
background: rgba(8, 26, 46, 0.85);
color: var(--mint-accent);
font-size: 0.72rem;
font-weight: 700;
padding: 0.3rem 0.7rem;
border-radius: 50px;
backdrop-filter: blur(4px);
}

.fcl-chip {
position: absolute;
top: 12px;
right: 12px;
background: rgba(16, 110, 190, 0.15);
color: var(--primary-blue);
border: 1px solid rgba(16, 110, 190, 0.3);
font-size: 0.72rem;
font-weight: 600;
padding: 0.25rem 0.65rem;
border-radius: 50px;
background-color: #ffffff;
}

.card-body-content {
padding: 1.4rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}

.card-category-label {
font-size: 0.75rem;
font-weight: 700;
color: var(--primary-blue);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.3rem;
}

.card-item-title {
font-size: 1.12rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.5rem;
line-height: 1.35;
}

.card-item-desc {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.55;
margin-bottom: 1.1rem;
}

.specs-grid {
background: #f8fafc;
border-radius: 10px;
padding: 0.75rem 0.9rem;
margin-bottom: 1.25rem;
border: 1px solid #f1f5f9;
}

.spec-row {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
padding: 3px 0;
}

.spec-name {
color: var(--text-muted);
}

.spec-val {
font-weight: 600;
color: var(--dark-navy);
}

.action-btn-group {
display: flex;
gap: 8px;
margin-top: auto;
}

.btn-card-rfq {
flex-grow: 1;
background: var(--primary-blue);
color: #ffffff;
font-weight: 600;
font-size: 0.85rem;
padding: 0.6rem 0.8rem;
border-radius: 8px;
border: 1px solid var(--primary-blue);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.25s ease;
}

.btn-card-rfq:hover {
background: var(--dark-navy);
border-color: var(--dark-navy);
color: var(--mint-accent);
}

.btn-card-wa {
background: #eafaf1;
color: #25D366;
border: 1px solid rgba(37, 211, 102, 0.3);
border-radius: 8px;
padding: 0.6rem 0.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 1rem;
transition: all 0.25s ease;
}

.btn-card-wa:hover {
background: #25D366;
color: #ffffff;
}

/* ==========================================================================
9. PRODUCT DETAILS PAGE (Gallery, Specs Table, RFQ Box)
========================================================================== */
.product-gallery-box {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 1.5rem;
}

.main-product-img {
width: 100%;
height: 380px;
object-fit: cover;
border-radius: 12px;
border: 1px solid #f1f5f9;
}

.thumb-img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s;
}

.thumb-img:hover,
.thumb-img.active {
border-color: var(--primary-blue);
}

.details-card {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 2rem;
}

.spec-table th {
color: var(--text-muted);
font-weight: 500;
width: 35%;
border-bottom: 1px solid #f1f5f9;
}

.spec-table td {
font-weight: 600;
color: var(--dark-navy);
border-bottom: 1px solid #f1f5f9;
}

.inquiry-card {
background: #ffffff;
border: 2px solid rgba(16, 110, 190, 0.2);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(8, 26, 46, 0.05);
}

.btn-send-rfq {
background: var(--primary-blue);
color: #fff;
font-weight: 600;
padding: 0.8rem;
border-radius: 8px;
border: none;
width: 100%;
transition: all 0.25s ease;
}

.btn-send-rfq:hover {
background: var(--dark-navy);
color: var(--mint-accent);
}

/* ==========================================================================
10. WORKFLOW PAGE (Lifecycle Cards & QA Protocol)
========================================================================== */
.workflow-step-card {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 20px;
padding: 2.2rem 1.8rem;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
transition: all 0.35s ease;
}

.workflow-step-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 36px rgba(8, 26, 46, 0.08);
border-color: var(--mint-accent);
}

.step-badge {
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--dark-navy);
color: var(--mint-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
font-weight: 800;
margin-bottom: 1.4rem;
box-shadow: 0 6px 16px rgba(8, 26, 46, 0.2);
}

.step-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.75rem;
}

.step-desc {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.65;
margin-bottom: 1.25rem;
}

.step-features-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.85rem;
color: #334155;
}

.step-features-list li {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 8px;
}

.step-features-list li i {
color: var(--primary-blue);
font-size: 0.95rem;
}

/* QA Deep Dive Box */
.qa-box {
background: #f8fafc;
border: 1px solid var(--border-subtle);
border-radius: 20px;
padding: 3rem 2.5rem;
}

.qa-item {
display: flex;
align-items: flex-start;
gap: 14px;
}

.qa-icon-wrap {
width: 44px;
height: 44px;
border-radius: 10px;
background: #eef6fc;
color: var(--primary-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
}

.workflow-cta,
.why-cta-box {
background: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-blue) 100%);
border-radius: 20px;
padding: 3.5rem 2.5rem;
color: #ffffff;
box-shadow: 0 16px 36px rgba(8, 26, 46, 0.15);
}

.btn-cta-mint {
background: var(--mint-accent);
color: var(--dark-navy);
font-weight: 700;
padding: 0.85rem 2rem;
border-radius: 50px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 18px rgba(15, 252, 190, 0.35);
border: none;
cursor: pointer;
}

.btn-cta-mint:hover {
background: #ffffff;
color: var(--primary-blue);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
11. WHY US PAGE (Pillars & Comparison Table)
========================================================================== */
.pillar-card {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 18px;
padding: 2.2rem 1.8rem;
height: 100%;
display: flex;
flex-direction: column;
transition: all 0.35s ease;
position: relative;
}

.pillar-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 36px rgba(8, 26, 46, 0.08);
border-color: rgba(16, 110, 190, 0.35);
}

.pillar-icon-box {
width: 64px;
height: 64px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(16, 110, 190, 0.12), rgba(15, 252, 190, 0.2));
color: var(--primary-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 1.4rem;
transition: all 0.3s ease;
}

.pillar-card:hover .pillar-icon-box {
background: var(--dark-navy);
color: var(--mint-accent);
}

.pillar-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.75rem;
}

.pillar-desc {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.65;
margin: 0;
}

.comparison-wrapper {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(8, 26, 46, 0.04);
}

.comparison-table {
margin-bottom: 0;
font-size: 0.92rem;
}

.comparison-table thead th {
background: var(--dark-navy);
color: #fff;
padding: 1.25rem 1.5rem;
font-weight: 700;
border: none;
}

.comparison-table thead th.highlight-col {
background: var(--primary-blue);
color: var(--mint-accent);
}

.comparison-table tbody td {
padding: 1.15rem 1.5rem;
vertical-align: middle;
border-bottom: 1px solid #f1f5f9;
}

.comparison-table tbody tr:hover {
background-color: #f8fafc;
}

.standards-strip {
background: #f8fafc;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
padding: 2.5rem 0;
}

.standard-badge-item {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0.8rem 1.5rem;
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 12px;
font-weight: 700;
color: var(--dark-navy);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.standard-badge-item i {
color: var(--primary-blue);
font-size: 1.2rem;
}

/* ==========================================================================
12. CONTACT US PAGE (Contact Cards & Map Frame)
========================================================================== */
.contact-info-card {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 1.8rem 1.5rem;
height: 100%;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}

.contact-info-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(8, 26, 46, 0.08);
border-color: var(--primary-blue);
}

.contact-icon-circle {
width: 54px;
height: 54px;
border-radius: 12px;
background: rgba(16, 110, 190, 0.1);
color: var(--primary-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.25rem;
}

.contact-info-card:hover .contact-icon-circle {
background: var(--dark-navy);
color: var(--mint-accent);
}

.contact-form-box {
background: #ffffff;
border: 1px solid var(--border-subtle);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 12px 35px rgba(8, 26, 46, 0.05);
}

.map-frame-wrapper {
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border-subtle);
box-shadow: 0 10px 30px rgba(8, 26, 46, 0.05);
height: 420px;
}

.map-frame-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
}

/* ==========================================================================
RESPONSIVE MEDIA QUERIES
========================================================================== */
@media (max-width: 991.98px) {
  .carousel-item {
  height: 540px;
  }
}

@media (max-width: 768px) {
  .carousel-item {
  height: 500px;
  }
  
  .stat-card {
  border-right: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.4rem 1rem;
  }
  .stat-card:last-child {
  border-bottom: none;
  }
  .stat-num {
  font-size: 2.1rem;
  }
  .floating-wa-btn {
  bottom: 20px;
  left: 20px;
  width: 46px;
  height: 46px;
  font-size: 1.4rem;
  }
  #backToTopBtn {
  bottom: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
  }
  .rfq-box,
  .contact-form-box,
  .qa-box,
  .why-cta-box,
  .workflow-cta {
  padding: 1.5rem;
  }
  .about-img-box img {
  height: 340px;
  }
}
@media (max-width:576px) {
  .carousel-control-prev,
  .carousel-control-next {
  display: none;
  }
}