/* ============================================================
   GLOBAL VARIABLES & THEMING (#393185)
============================================================ */
:root {
  --primary-color: #007fd4;
  --primary-dark: #272061;
  --primary-light: #5247b8;
  --primary-glow: rgba(57, 49, 133, 0.25);
  --primary-subtle: rgba(57, 49, 133, 0.08);

  --text-main: #1f2430;
  --text-muted: #64748b;
  --border-color: rgba(57, 49, 133, 0.12);
  --bg-capsule: rgba(57, 49, 133, 0.04);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-main);
  background-color: #fcfcfd;
  margin: 0;
  padding: 0;
}
html, body {
  overflow-x: clip !important; /* 'clip' prevents horizontal scroll without breaking sticky */
}
a{
  text-decoration: none;
  
}
/* ============================================================
   DESKTOP HEADER & TOP BAR
============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.top-bar {
  background: var(--primary-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 0;
  font-size: 0.85rem;
}

.top-contacts a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.top-contacts a i {
  color: #fcfbfb;
}

.top-contacts a:hover {
  color: #d6d3d3;
}

.social-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f3f9;
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.social-icon:hover {
  background: var(--primary-color);
  color: #ffffff;
  transform: translateY(-2px);
}

.social-icon.whatsapp:hover {
  background: #25d366;
  color: #fff;
}

/* Main Navbar */
.main-navbar {
  padding: 10px 0;
}

/* ============================================================
   BRAND LOGO IMAGE STYLES
============================================================ */
.brand-logo {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  text-decoration: none;
  height:60px !important;
}

/* Desktop navbar logo sizing */
.site-logo-img {
  height: 61px !important;    /* Increase to 60px - 75px as needed */
  width: auto !important;     /* Preserves the natural aspect ratio */
  max-width: 320px !important;/* Increased from 170px so it's not restricted */
  object-fit: contain;
  display: block;
}

/* Optional: Make the navbar look balanced with the bigger logo */
.main-navbar {
  padding: 12px 0;
}
.main-navbar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Optional: adds subtle drop shadow while scrolling */
}
.site-logo-img:hover {
  transform: scale(1.02);
}

/* Mobile drawer header logo sizing */
.mobile-drawer-logo-img {
  height: 38px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
  /* If your logo has dark text and needs to show on a dark background, 
     uncomment the next line to invert it cleanly: */
  /* filter: brightness(0) invert(1); */
}

/* Responsive adjustment for small phones */
@media (max-width: 575.98px) {
  .site-logo-img {
    height: 40px;
    max-width: 170px;
  }
}

/* Floating Navigation Capsule (Image 1 Style) */
.nav-capsule-wrapper {
  padding: 0 20px;
}

.nav-capsule {
  background: var(--bg-capsule);
  border: 1px solid var(--border-color);
  /* border-radius: 50px; */
  padding: 5px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 0;
}

.nav-capsule .nav-link {
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 14px !important;
  position: relative;
  transition: color 0.25s ease;
}

.nav-capsule .nav-link:hover,
.nav-capsule .nav-link.active {
  color: var(--primary-color);
}

.nav-capsule .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 2.5px;
  background: var(--primary-color);
  border-radius: 4px;
}

/* Pill CTA Button */
.btn-primary-pill {
  background: linear-gradient(135deg, var(--primary-color) 0%, #4784b8 100%);
  color: #ffffff !important;
  border: none;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 22px;
  /* border-radius: 50px; */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 4px 14px var(--primary-glow);
  transition: all 0.3s ease;
}

.btn-primary-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-primary-pill i {
  transition: transform 0.25s ease;
}

.btn-primary-pill:hover i {
  transform: translateX(4px);
}

.menu-toggler {
  border: none;
  background: var(--primary-subtle);
  color: var(--primary-color);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

/* ============================================================
   MOBILE DRAWER (EXACT SCREENSHOT STYLE)
============================================================ */
.custom-mobile-drawer {
  background-color: var(--primary-color) !important;
  width: 82% !important;
  max-width: 330px !important;
  border-right: none;
}

/* Header inside drawer with dark square close button */
.drawer-header {
  background: #fff; /* slightly darker tint for logo bar */
  padding: 0;
  min-height: 58px;
}

/* .drawer-logo-box {
  padding-left: 16px;
} */

.drawer-logo-text {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.drawer-close-btn {
  background-color: #fff; /* Black box close button like screenshot */
  color: #000;
  border: none;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.drawer-close-btn:hover {
  background-color: #000000;
}

/* Nav rows */
.mobile-menu-list {
  display: flex;
  flex-direction: column;
}

.mobile-row-link {
  display: block;
  padding: 13px 20px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease;
}

.mobile-row-link:hover,
.mobile-row-link.active {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* Chevron arrow on expandable row */
.chevron-icon {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.mobile-row-link[aria-expanded="true"] .chevron-icon {
  transform: rotate(90deg);
}

/* Submenu dropdown inside mobile drawer */
.mobile-submenu {
  background: rgba(0, 0, 0, 0.15);
}

.mobile-sub-link {
  display: block;
  padding: 10px 20px 10px 32px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-sub-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

/* Bottom 3 Action Buttons (Call Now | WhatsApp | Enquiry) */
.mobile-action-bar {
  display: flex;
  width: 100%;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #ffffff !important;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 14px 4px;
  text-transform: capitalize;
  transition: filter 0.2s ease;
}

.action-btn:hover {
  filter: brightness(1.1);
}

.action-btn.call-now {
  background-color: #f26522; /* Vibrant Orange */
}

.action-btn.whatsapp-btn {
  background-color: #25d366; /* Official WhatsApp Green */
}

.action-btn.enquiry-btn {
  background-color: #6f42c1; /* Complementary Purple */
}




/* Button styling for arrow trigger */
.mobile-accordion-toggle {
  background: transparent;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Arrow smooth rotation on toggle */
.mobile-accordion-toggle .chevron-icon {
  transition: transform 0.3s ease;
}

/* Rotate down when expanded */
.mobile-accordion-toggle[aria-expanded="true"] .chevron-icon {
  transform: rotate(90deg);
}



/* ============================================================
   HERO SLIDER SECTION WITH TOP-TO-BOTTOM IMAGE ENTRANCE
============================================================ */
.hero-slider-section {
  position: relative;
  min-height: 90vh;
  background-color: #0d0a27;
  color: #ffffff;
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
  overflow: hidden;
}

.hero-slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

/* Background image overlay */
.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  filter: brightness(0.9);
}

/* Badge Tagline */
.tagline-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  letter-spacing: 2px;
  color: #f7f7f9;
  font-weight: 700;
}

.badge-line {
  width: 32px;
  height: 3px;
  background: #7364f3;
  border-radius: 4px;
}

/* Typography */
.hero-title {
  font-size: clamp(2.3rem, 4.8vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.5px;
}

/* Glowing primary-to-bright accent text gradient */
.gradient-text {
  background: linear-gradient(135deg, #a8a2e6 0%, #ffffff 50%, #7bf1a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: #fff;
  max-width: 520px;
}

/* ============================================================
   NEW MODERN BUTTON STYLES
============================================================ */
/* Primary Glowing Action Button */
.btn-hero-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  color: var(--primary-color) !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 10px 8px 24px;
  /* border-radius: 50px; */
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 0 20px rgba(168, 162, 230, 0.3);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  border-radius: 50px;
}

.btn-arrow-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-hero-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3), 0 0 25px rgba(115, 100, 243, 0.5);
}

.btn-hero-primary:hover .btn-arrow-circle {
  transform: translateX(4px);
  background-color: #0088b5;
}

/* Frosted Glass Video Button */
.btn-hero-glass {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 8px 22px 8px 10px;
  /* border-radius: 50px; */
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.play-pulse {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7bf1a8;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.btn-hero-glass:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.btn-hero-glass:hover .play-pulse {
  background: #7bf1a8;
  color: #141038;
}

/* ============================================================
   GLASSMORPHISM STAT CARDS
============================================================ */
.stat-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.stat-number {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.stat-label {
  display: block;
  font-size: 0.72rem;
  color: #fff;
  margin-top: 2px;
  font-weight: 500;
}

/* ============================================================
   IMAGE DROP-DOWN ANIMATION (TOP TO BOTTOM)
============================================================ */
.hero-image-col {
  perspective: 1000px;
}

.image-wrapper {
  position: relative;
  display: inline-block;
  padding: 20px;
}

.hero-machinery-img {
  max-width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.6));
}

/* Keyframe for Drop-Down Entry */
@keyframes dropDownBounce {
  0% {
    opacity: 0;
    transform: translateY(-160px) scale(0.92);
  }
  65% {
    opacity: 1;
    transform: translateY(12px) scale(1.02);
  }
  85% {
    transform: translateY(-6px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Trigger animation only when slide becomes active */
.hero-slide.active .drop-down-anim {
  animation: dropDownBounce 1.1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Text Fade In Up */
.hero-slide.active .hero-content {
  animation: fadeInUpContent 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUpContent {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   SLIDER CONTROLS (Dots & Arrows)
============================================================ */
.slider-controls-wrapper {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  z-index: 10;
}

.dot-btn {
  background: rgba(255, 255, 255, 0.25);
  border: none;
  width: 40px;
  height: 5px;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.dot-btn .dot-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #ffffff;
}

.dot-btn.active {
  background: rgba(255, 255, 255, 0.4);
}

.dot-btn.active .dot-fill {
  width: 100%;
  transition: width 5s linear;
}

.arrow-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  backdrop-filter: blur(10px);
  transition: all 0.25s ease;
  cursor: pointer;
}

.arrow-btn:hover {
  background: #ffffff;
  color: var(--primary-color);
  transform: scale(1.08);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .hero-slide {
    position: relative;
    height: auto;
  }
  .slider-controls-wrapper {
    position: static;
    padding: 20px 15px;
    background: #0d0a27;
  }
  .hero-machinery-img {
    max-height: 340px;
    margin-top: 25px;
  }
}



/* ============================================================
   PERFECT 80VH HERO SLIDER (NO BLACK GAPS)
============================================================ */
.hero-slider-section {
  position: relative;
  height: 80vh !important;       /* Exact 80% viewport height */
  min-height: 520px;             /* Prevents squishing on small screens */
  overflow: hidden;
  background-color: #0d0a27;
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100%;                  /* Fills full 80vh */
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;                  /* Fills full 80vh */
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.hero-slide.active {
  display: block;
  opacity: 1;
}

/* Background image now covers the ENTIRE 80vh edge-to-edge */
.slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Ensure the row inside centers vertically within 80vh */
.hero-slide .row {
  height: 100% !important;
  min-height: unset;
  align-items: center;
}

/* Position dots and arrows properly right above the bottom edge */
.slider-controls-wrapper {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  z-index: 10;
}


.site-header {
  position: static !important; /* regular position */
}

/* .main-navbar {
  position: -webkit-sticky !important;
  position: fixed !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
} */


.main-navbar {
  background-color: #ffffff !important;
  z-index: 1020 !important;
}


/* ============================================================
   FIT ALL HERO CONTENT (TITLE, BUTTONS & STATS) IN 80VH
============================================================ */
.hero-slider-section {
  height: 80vh !important;
  min-height: 560px !important;
  position: relative;
  overflow: hidden;
}

/* Scaled down title so it doesn't push stats down */
.hero-title {
  font-size: clamp(2rem, 3.2vw, 2.7rem) !important;
  line-height: 1.18 !important;
  margin-bottom: 10px !important;
}

/* Compact description */
.hero-desc {
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
  max-width: 520px;
}

/* Compact button group */
.hero-btn-group {
  margin-top: 10px !important;
  margin-bottom: 15px !important;
}

/* ============================================================
   STAT CARDS - ENSURE VISIBILITY & POSITION
============================================================ */
.hero-stats {
  position: relative;
  z-index: 5;
  padding-top: 6px !important;
}

.stat-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stat-number {
  display: block;
  font-size: 1.15rem !important;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}

.stat-label {
  display: block;
  font-size: 0.7rem !important;
  color: #fff;
  margin-top: 2px;
  white-space: nowrap;
}

/* Ensure Machinery Image scales appropriately so it doesn't stretch the row */
.hero-machinery-img {
  max-height: 380px !important;
  width: auto;
  object-fit: contain;
}





/* ============================================================
   CLEAN & MODERN ABOUT SECTION
============================================================ */
.about-section {
  background-color: #ffffff;
  padding: 80px 0;
}

/* Left Image Box */
.about-image-wrapper {
  position: relative;
  border-radius: 20px;
}

.main-about-img {
  height: 480px;
  object-fit: cover;
  /* border-radius: 18px; */
}

/* Bottom Floating Badge */
.about-exp-badge {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: var(--primary-color, #393185);
  color: #ffffff;
  padding: 14px 22px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(57, 49, 133, 0.35);
  /* border: 4px solid #ffffff; */
}

.about-exp-badge .exp-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.about-exp-badge .exp-text {
  font-size: 0.85rem;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}

/* Right Content */
.sub-badge {
  display: inline-block;
  color: var(--primary-color);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  background: rgba(57, 49, 133, 0.08);
  padding: 5px 12px;
  border-radius: 50px;
}

.about-heading {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #1a1d29;
  line-height: 1.25;
}

.about-heading span {
  color: var(--primary-color);
}

.about-paragraph {
  color: #5d6778;
  font-size: 1rem;
  line-height: 1.7;
}

/* 2x2 Feature Grid Cards */
.feature-card {
  display: flex;
  gap: 12px;
  background: #f8f9fc;
  padding: 14px 16px;
  border-radius: 12px;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(57, 49, 133, 0.25);
  background: #ffffff;
}

.feature-card i {
  color: var(--primary-color);
  font-size: 1.25rem;
  margin-top: 3px;
}

.feature-card h6 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1d29;
  margin-bottom: 4px;
}

.feature-card p {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* Primary Button */
.btn-primary-about {
  background: var(--primary-color);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 12px 26px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 16px rgba(57, 49, 133, 0.25);
  transition: all 0.3s ease;
}

.btn-primary-about:hover {
  background: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(57, 49, 133, 0.35);
}

/* Phone Consultation Info */
.consultation-info small {
  display: block;
  font-size: 0.72rem;
  color: #8c98a4;
  font-weight: 700;
}

.consultation-info a {
  color: #1a1d29;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}

.consultation-info a:hover {
  color: var(--primary-color);
}

.call-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(57, 49, 133, 0.1);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Mobile Adjustments */
@media (max-width: 767.98px) {
  .main-about-img {
    height: 320px;
  }
  .about-exp-badge {
    bottom: 15px;
    right: 15px;
    padding: 10px 16px;
  }

  .site-logo-img{
    height: 55px;
  }
}




/* ================= Section Base & Background ================= */
.products-category-section {
  position: relative;
  background-image: url('../frontend/images/product-bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 1;
}

.products-category-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 14, 14, 0.40); /* Soft dark-tint glass backdrop */
  backdrop-filter: blur(4px);
  z-index: -1;
}

.products-category-section .container {
  position: relative;
  z-index: 2;
}

/* Header Text */
.sub-badge {
  display: inline-block;
  padding: 6px 18px;
  background-color: rgba(2, 123, 227, 0.15);
  border: 1px solid rgba(2, 123, 227, 0.4);
  color: #027be3;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  border-radius: 50px;
  backdrop-filter: blur(5px);
}

.category-main-title {
  font-size: 2rem;
  font-weight: 800;
  color: #333333;
}

.text-primary-color {
  color: #027be3 !important;
}

.section-desc {
  max-width: 620px;
  color: #e2e8f0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ================= Modern Transparent Glass Cards ================= */
.product-glass-card {
  position: relative;
  display: block;
  text-decoration: none;
  height: 310px;
  border-radius: 20px;
  overflow: hidden;
  /* Premium Frosted Glass Effect */
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-glass-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.95);
  border-color: #027be3;
  box-shadow: 0 20px 40px rgba(2, 123, 227, 0.25);
}

/* Image Presentation */
.product-img-wrapper {
  width: 100%;
  height: 100%;
  padding: 24px 24px 80px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-img-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}

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

/* Product Name Overlay Bar (Bottom Frosted Floating Pill) */
.product-overlay-info {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  z-index: 2;
}

.product-glass-card:hover .product-overlay-info {
  background: #027be3;
  border-color: #027be3;
  box-shadow: 0 6px 20px rgba(2, 123, 227, 0.4);
}

/* Product Title */
.product-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
  transition: color 0.3s ease;
}

.product-glass-card:hover .product-card-title {
  color: #ffffff;
}

/* Circular Arrow Icon */
.view-btn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #027be3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.product-glass-card:hover .view-btn-icon {
  background: #ffffff;
  color: #027be3;
  transform: translateX(4px);
}

/* Global View All Button */
.btn-all-products {
  display: inline-flex;
  align-items: center;
  background-color: #027be3;
  color: #ffffff;
  padding: 12px 34px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(2, 123, 227, 0.35);
  transition: all 0.3s ease;
}

.btn-all-products:hover {
  background-color: #0263b8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(2, 123, 227, 0.5);
}







/* ================= Professional Light Blue Image Card ================= */
.pro-card {
  position: relative;
  display: block;
  text-decoration: none;
  height: 330px;                      /* Big, prominent height */
  border-radius: 26px 6px 26px 6px;
  overflow: hidden;
  background-color: #e8f3fc;         /* Elegant Light Blue base */
  border: 1px solid rgba(2, 123, 227, 0.18); 
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pro-card:hover {
  transform: translateY(-8px);
  border-color: #027be3;
  box-shadow: 0 18px 40px rgba(2, 123, 227, 0.25);
}

/* Big Image Holder */
.pro-card-img {
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}

.pro-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;               /* Keeps machinery looking sharp */
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pro-card:hover .pro-card-img img {
  transform: scale(1.08);            /* Smooth zoom effect */
}

/* Name Overlay Placed Directly On Bottom of Image */
.pro-card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 20px 18px 20px;
  /* Smooth dark-to-transparent fade so text is 100% legible on any image */
  background: linear-gradient(
    to top,
    rgba(10, 25, 47, 0.88) 0%,
    rgba(10, 25, 47, 0.65) 60%,
    transparent 100%
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 2;
  transition: all 0.35s ease;
}

/* Light Blue Bar Highlight on Hover */
.pro-card:hover .pro-card-caption {
  background: linear-gradient(
    to top,
    rgba(2, 122, 227, 0.699) 0%,
    rgba(2, 122, 227, 0.608) 70%,
    transparent 100%
  );
}

/* Product Name Text */
.pro-title {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Circular Arrow Icon */
.pro-arrow {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.35s ease;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.pro-card:hover .pro-arrow {
  background: #ffffff;
  color: #027be3;
  transform: translateX(4px);
  border-color: #ffffff;
}








.nav-item.dropdown .dropdown-menu{
  background-color: var(--primary-color);
}
.nav-item.dropdown .dropdown-menu .dropdown-item{
  color: #fff;
}





/* ============================================================
   OPEN DROPDOWN ON HOVER (DESKTOP ONLY)
============================================================ */
@media (min-width: 992px) {
  /* Show dropdown menu when hovering over the parent li */
  .nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Smooth fade-in transition */
  .nav-item.dropdown .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 0; /* Prevents cursor gap so menu doesn't close accidentally */
  }
}





/* ============================================================
   FOOTER STYLING (Primary Brand Theme #393185)
============================================================ */
.site-footer {
  background: linear-gradient(180deg, var(--primary-color) 0%, #184b6f 100%);
  color: #ffffff;
  position: relative;
  /* border-top: 3px solid #6ea0eb; */
}

.footer-logo {
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff !important;
  letter-spacing: -0.5px;
}

.footer-logo .logo-icon {
  color: #7bf1a8;
  font-size: 1.5rem;
}

.footer-desc {
  font-size: 0.88rem;
  line-height: 1.65;
}

/* Footer Widget Titles */
.footer-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2.5px;
  background-color: #7bf1a8;
  border-radius: 2px;
}

/* Footer Navigation Links */
.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
}

.footer-links a i {
  font-size: 0.72rem;
  color: #a8a2e6;
  transition: transform 0.2s ease;
}

.footer-links a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.footer-links a:hover i {
  color: #7bf1a8;
}

/* Footer Contact Items */
.contact-icon-box {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #7bf1a8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.contact-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.contact-link:hover {
  color: #f2f0f0;
}

/* Social Buttons */
.footer-social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-social-btn:hover {
  background: #0088b5;
  color: #ffffff;
  transform: translateY(-3px);
  /* border-color: #393185; */
}

.footer-social-btn.whatsapp:hover {
  background: #25d366;
  border-color: #25d366;
}

/* Bottom Bar */
.footer-bottom {
  background-color: #3588c9;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

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






/* ============================================================
   INDUSTRIES WE SERVE (Background Image & Frosted Glass Cards)
============================================================ */
.industries-section {
  position: relative;
  /* Deep Primary Gradient Overlay + Background Image */
  background: linear-gradient(135deg, rgba(29, 32, 32, 0.665) 0%, rgba(27, 32, 32, 0.796) 100%), url('images/bg-img.webp');
  background-size:contain;
  background-position: center;
  /* background-attachment: fixed;  */
  padding: 95px 0;
  overflow: hidden;
}

/* Header Text Contrast Over Dark Background */
.industries-section .category-main-title {
  color: #ffffff !important;
}

.industries-section .category-main-title .text-primary-color {
  color: #4aa4e1 !important; /* Neon mint green highlight on dark background */
  text-shadow: 0 0 20px rgba(123, 241, 168, 0.35);
}

.industries-section .sub-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #0ec2df;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
}

.industries-section p.text-muted {
  color: #d1cefa !important;
}

/* ============================================================
   FROSTED GLASS INDUSTRY CARDS
============================================================ */
.industry-card {
  background: rgb(10 7 7 / 27%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px;
  padding: 30px 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);


  border-radius: 26px 6px 26px 6px;
  
  /* Normal border & soft shadow */
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
  
  /* Smooth animation speed */
  transition: all 0.3s ease;
  overflow: hidden;

}

/* Glowing Top Line on Hover */
.industry-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), #00f0ff);
  transition: width 0.35s ease;
}

/* Icon Box */
.industry-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #4aa4e1; /* Neon Mint Icon */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

/* Card Number Watermark */
.industry-step {
  font-size: 1.6rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.3s ease;
}

/* Text Content */
.industry-title {
  color: #ffffff !important;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 12px;
}

.industry-desc {
  color: #fff !important;
  font-size: 0.88rem;
  line-height: 1.65;
  margin-bottom: 18px;
  flex-grow: 1;
}

/* Feature Checkmarks */
.industry-list li {
  color: #fff !important;
  font-size: 0.84rem;
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.industry-list li i {
  color: #4aa4e1 !important; /* Mint Green Checkmarks */
  font-size: 0.85rem;
}

/* Bottom Action Link */
.industry-card-footer {
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.industry-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #4aa4e1 !important; /* Mint Link */
  text-decoration: none;
  transition: gap 0.25s ease;
}

.industry-link i {
  transition: transform 0.25s ease;
}

/* ============================================================
   HOVER EFFECTS
============================================================ */
.industry-card:hover {
  transform: translateY(-8px);
  background: rgba(31, 28, 28, 0.13) !important;
  border-color: rgba(123, 241, 168, 0.4) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.industry-card:hover::before {
  width: 100%;
}

.industry-card:hover .industry-icon-box {
  background: var(--primary-color);
  color: #17133f;
  transform: scale(1.05);
}

.industry-card:hover .industry-step {
  color: var(--primary-color);
}

.industry-card:hover .industry-link {
  gap: 14px;
}

.industry-card:hover .industry-link i {
  transform: translateX(4px);
}

/* Bottom Callout Banner */
.industry-bottom-banner {
  background: rgb(0 136 181);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}





/* ============================================================
   TESTIMONIAL SECTION (Theme #393185 with subtle dot-pattern)
============================================================ */
.testimonial-section {
  background-color: #e6f0ff;
  /* Subtle modern dotted background pattern like reference */
  background-image: radial-gradient(rgba(57, 49, 133, 0.12) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  padding: 85px 0;
}

.testimonial-main-title {
  font-size: 2rem;
  font-weight: 800;
  color: #1a1d29;
  letter-spacing: -0.5px;
}

.title-accent-line {
  width: 45px;
  height: 3px;
  background-color: var(--primary-color, #393185);
  border-radius: 4px;
}

.testimonial-subtitle {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--primary-color, #393185);
  text-transform: uppercase;
}

/* Slider Track & Cards */
.testimonial-slider-container {
  padding: 10px 40px;
}

.testimonial-track {
  position: relative;
  min-height: 220px;
}

.testimonial-item {
  display: none;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.testimonial-item.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.quote-icon {
  font-size: 1.8rem;
  color: rgba(57, 49, 133, 0.25);
}

.testimonial-quote {
  font-size: 1.15rem;
  line-height: 1.85;
  color: #3b4252;
  font-weight: 500;
  font-style: italic;
  max-width: 740px;
  margin: 0 auto 24px auto;
}

.client-name {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--primary-color, #393185);
}

.client-company {
  font-size: 0.82rem;
  font-weight: 500;
  display: block;
  margin-top: 4px;
}

/* Next / Prev Arrows */
.testi-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #1a1d29;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 10px;
  transition: color 0.25s ease, transform 0.25s ease;
  z-index: 5;
}

.testi-arrow:hover {
  color: var(--primary-color, #393185);
  transform: translateY(-50%) scale(1.15);
}

.testi-prev {
  left: -20px;
}

.testi-next {
  right: -20px;
}

/* Dots */
.testi-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: rgba(57, 49, 133, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.testi-dot.active {
  background-color: var(--primary-color, #393185);
  width: 26px;
  border-radius: 8px;
}

@media (max-width: 767.98px) {
  .testimonial-slider-container {
    padding: 0 10px;
  }
  .testi-prev {
    left: -15px;
  }
  .testi-next {
    right: -15px;
  }
  .testimonial-quote {
    font-size: 1rem;
    line-height: 1.65;
  }
}




/* ============================================================
   WHY CHOOSE US SECTION (Dark Slate Theme from Screenshot)
============================================================ */
.why-choose-section {
  background-color: #2b343b; /* Exact dark slate background from screenshot */
  padding: 85px 0;
}

/* Header Dashes & Title */
.title-dash {
  width: 26px;
  height: 3px;
  background-color: var(--primary-color); /* Cyan accent color */
  border-radius: 2px;
}

.why-title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.why-subtitle {
  font-size: 0.95rem;
  line-height: 1.7;
}

/* 4 Feature Cards */
.why-card {
  background-color: #38424a; /* Lighter slate tone for card */
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  padding: 34px 26px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;


  border-radius: 26px 6px 26px 6px;
  
  /* Normal border & soft shadow */
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
  
  /* Smooth animation speed */
  transition: all 0.3s ease;
  overflow: hidden;

}

.why-card:hover {
  transform: translateY(-6px);
  background-color: #3f4b54;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
  border-color: rgba(0, 188, 212, 0.3);

   border-color: #0084d6; /* Turns blue on hover */
  box-shadow: 0 20px 45px rgba(0, 132, 214, 0.18); /* Blue glowing shadow */
  transform: translateY(-8px); /* Lifts up */

}

/* Icon Box with Cyan Stroke */
.why-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--primary-color); /* Cyan border */
  color: var(--primary-color);                            /* Cyan icon */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: rgba(0, 188, 212, 0.05);
  transition: all 0.3s ease;
}

.why-card:hover .why-icon-box {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
  box-shadow: 0 0 15px rgba(0, 188, 212, 0.4);
}

.why-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}

.why-card-desc {
  font-size: 0.88rem;
  line-height: 1.65;
}







/* ============================================================
   CONTACT US SECTION (Theme #393185)
============================================================ */
.contact-section {
  background-color: #f8f9fc;
  padding: 85px 0;
}

/* Left Form Box */
.contact-form-wrapper {
  background: #e3e7ed;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.04);

  border-radius: 26px 6px 26px 6px;
  
  /* Normal border & soft shadow */
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
  
  /* Smooth animation speed */
  transition: all 0.3s ease;
  overflow: hidden;
}

.form-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1a1d29;
}

/* Custom Input Groups */
.input-group-custom label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4b5563;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.input-box {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8f9fc;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 0 14px;
  transition: all 0.25s ease;
}

.input-box i {
  color: var(--primary-color, #393185);
  font-size: 0.95rem;
  min-width: 20px;
}

.form-control-custom {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 10px;
  font-size: 0.9rem;
  color: #1a1d29;
  outline: none;
}

.form-control-custom::placeholder {
  color: #9ca3af;
  font-size: 0.85rem;
}

/* Focus State */
.input-box:focus-within {
  border-color: var(--primary-color, #393185);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(57, 49, 133, 0.1);
}

.select-custom {
  cursor: pointer;
}

/* Submit Button */
.btn-submit-inquiry {
  background: linear-gradient(135deg, var(--primary-color, #316585) 0%, #272061 100%);
  color: #ffffff;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(57, 49, 133, 0.3);
  transition: all 0.3s ease;
}

.btn-submit-inquiry:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(57, 49, 133, 0.45);
  color: #ffffff;
}

/* ============================================================
   RIGHT SIDE VISUAL & CONTACT CARDS
============================================================ */
.contact-visual-wrapper {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(57, 49, 133, 0.2);

  border-radius: 26px 6px 26px 6px;
  
  /* Normal border & soft shadow */
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
  
  /* Smooth animation speed */
  transition: all 0.3s ease;
  overflow: hidden;
}

.contact-bg-overlay {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.badge-quick-contact {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  color: #7bf1a8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 4px 12px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
}

/* Direct Contact Cards */
.direct-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 12px 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

.direct-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(5px);
  border-color: rgba(255, 255, 255, 0.3);
}

.direct-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.direct-icon.whatsapp-accent {
  background: #25d366;
}




/* ============================================================
   VIBRANT PROCESS SECTION (Full Primary Deep Gradient & Neon)
============================================================ */
.process-section {
  background: radial-gradient(circle at 80% 20%, #0088b5 0%, #20708a 45%, #2d5c95 100%);
  padding: 95px 0;
  position: relative;
}

/* Ambient Neon Glow Blobs */
.process-ambient-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
}

.glow-1 {
  top: -80px;
  left: -80px;
  background: #00f0ff;
}

.glow-2 {
  bottom: -60px;
  right: -60px;
  background: #7bf1a8;
}

/* Header Tags */
.process-tag-line {
  width: 28px;
  height: 2px;
  background: #7bf1a8;
}

.process-tag-badge {
  color: #7bf1a8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 2px;
}

.process-main-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.text-neon-mint {
  color: #7bf1a8 !important;
  text-shadow: 0 0 20px rgba(123, 241, 168, 0.4);
}

.process-main-subtitle {
  font-size: 0.95rem;
  color: #c9c5f0;
  line-height: 1.7;
}

/* ============================================================
   LEFT SIDE VISUAL CONTAINER
============================================================ */
.process-visual-container {
  padding: 20px 10px;
}

.process-image-box {
  border-radius: 36px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(123, 241, 168, 0.15);
  position: relative;

  border-radius: 26px 6px 26px 6px;
  
  /* Normal border & soft shadow */
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
  
  /* Smooth animation speed */
  transition: all 0.3s ease;
  overflow: hidden;

}

.process-main-img {
  height: 520px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.process-image-box:hover .process-main-img {
  transform: scale(1.04);
}

.process-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(24, 20, 66, 0.8) 100%);
}

/* Floating Glass Cards */
.process-floating-card {
  position: absolute;
  background: rgba(24, 20, 66, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.top-badge {
  top: 40px;
  right: -20px;
}

.bottom-badge {
  bottom: 40px;
  left: -20px;
}

.badge-glow-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.bg-neon-mint {
  background-color: #7bf1a8;
  box-shadow: 0 0 14px rgba(123, 241, 168, 0.6);
}

/* ============================================================
   RIGHT SIDE CONNECTED PIPELINE (5 STEPS)
============================================================ */
.process-timeline-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Vertical neon connecting line behind markers */
.process-timeline-wrap::before {
  content: '';
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 27px;
  width: 2px;
  background: linear-gradient(180deg, #ff7b00, #7bf1a8, #00f0ff, #c084fc, #f59e0b);
  z-index: 1;
}

.process-step-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  z-index: 2;
  transition: transform 0.3s ease;
}

.process-step-item:hover {
  transform: translateX(8px);
}

/* Step Number Marker Bubble */
.step-marker {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

/* Marker Colors */
.marker-orange { background: linear-gradient(135deg, #ff7b00, #e65100); }
.marker-mint   { background: linear-gradient(135deg, #10b981, #059669); }
.marker-cyan   { background: linear-gradient(135deg, #00bcd4, #00838f); }
.marker-purple { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.marker-amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }

.process-step-item:hover .step-marker {
  transform: scale(1.1) rotate(5deg);
}

/* Step Content Card */
.step-body {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px 20px;
  flex-grow: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.process-step-item:hover .step-body {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}

.step-desc {
  font-size: 0.85rem;
  color: #d1cefa;
  line-height: 1.6;
}

/* Icon Accents */
.text-orange { color: #ff9800 !important; }
.text-mint   { color: #7bf1a8 !important; }
.text-cyan   { color: #00f0ff !important; }
.text-purple { color: #d8b4fe !important; }
.text-amber  { color: #fbbf24 !important; }

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .process-main-img {
    height: 380px;
  }
  .top-badge {
    top: 15px;
    right: 0px;
  }
  .bottom-badge {
    bottom: 15px;
    left: 0px;
  }
  .process-timeline-wrap::before {
    left: 24px;
  }
  .step-marker {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 1rem;
  }
}


@media (max-width: 1025px) {
  .nav-capsule{
    padding: 5px 10px;
   
  }
  
  .site-logo-img{
    height: 55px !important;
  }
  .nav-capsule .nav-link{
    padding: 8px 7px !important;
    font-size: 12px;
  }
  .nav-capsule-wrapper{
    padding: 0 10px;
  }
}



/* ============================================================
   COMPANY PROFILE PAGE STYLES
============================================================ */

/* Page Banner / Breadcrumbs */
.page-banner {
  background:  #0b0b0b;
  padding: 10px 0;
  position: relative;
}

.banner-bg-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  opacity: 0.6;
}

.banner-tag {
  display: inline-block;
  color: #7bf1a8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.banner-title {
  font-size: 1rem;
  font-weight: 800;
}

.banner-desc {
  font-size: 0.95rem;
  max-width: 600px;
  line-height: 1.6;
}

/* Breadcrumbs */
.breadcrumb-item a {
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}

.breadcrumb-item a:hover {
  color: #ffffff;
}

.breadcrumb-item.active {
  font-size: 0.88rem;
  font-weight: 600;
}

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

/* ============================================================
   PROFILE ABOUT SECTION (Left Image / Right Content)
============================================================ */
.profile-about-section {
  background-color: #ffffff;
}

.profile-image-container {
  padding: 10px 10px 30px 10px;
}

.main-profile-img {
  height: 480px;
  object-fit: cover;
  border-radius: 20px;
}

/* Floating Experience Badge */
.profile-badge-exp {
  position: absolute;
  bottom: 10px;
  right: -10px;
  background: var(--primary-color, #393185);
  color: #ffffff;
  padding: 14px 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 30px rgba(57, 49, 133, 0.35);
  border: 4px solid #ffffff;
}

.exp-counter {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.exp-details strong {
  display: block;
  font-size: 0.85rem;
  line-height: 1.2;
}

.exp-details small {
  font-size: 0.72rem;
  color: #c9c5f0;
}

/* Floating ISO Badge */
.profile-badge-iso {
  position: absolute;
  top: 25px;
  left: -10px;
  background: #ffffff;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Section Tag Pill */
.section-badge-small {
  display: inline-block;
  color: var(--primary-color, #393185);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  background: rgba(57, 49, 133, 0.08);
  padding: 4px 14px;
  border-radius: 50px;
}

.profile-heading {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  color: #1a1d29;
  line-height: 1.25;
}

.profile-paragraph {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4b5563;
}

/* Mission & Vision Cards */
.mission-card {
  background: #f8f9fc;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  padding: 16px;
  transition: all 0.25s ease;
}

.mission-card:hover {
  background: #ffffff;
  border-color: rgba(57, 49, 133, 0.25);
  box-shadow: 0 8px 20px rgba(57, 49, 133, 0.08);
  transform: translateY(-2px);
}

.mission-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(57, 49, 133, 0.1);
  color: var(--primary-color, #393185);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: 10px;
}

.check-item {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1f2937;
}

/* Mobile Adjustments */
@media (max-width: 767.98px) {
  .main-profile-img {
    height: 320px;
  }
  .profile-badge-exp {
    right: 15px;
    bottom: 0px;
  }
}


/* .dropdown-item:hover{
  background-color: #000;
} */





/* ============================================================
   ABOUT PAGE ADDITIONAL SECTIONS
============================================================ */

/* 1. Infrastructure Cards */
.infra-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.infra-card:hover {
  transform: translateY(-5px);
  border-color: rgba(57, 49, 133, 0.3) !important;
  box-shadow: 0 12px 30px rgba(57, 49, 133, 0.1) !important;
}

.infra-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(57, 49, 133, 0.08);
  color: var(--primary-color, #393185);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

/* 2. Timeline Milestones */
.milestone-card {
  background: #ffffff;
  border: 1px dashed rgba(57, 49, 133, 0.25);
  position: relative;
  transition: all 0.3s ease;
}

.milestone-card:hover {
  background: #fdfdff;
  border-color: var(--primary-color, #393185);
  border-style: solid;
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(57, 49, 133, 0.08);
}

.milestone-year {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-color, #393185);
  display: inline-block;
  line-height: 1;
}

/* 3. Core Values */
.value-item {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s ease, background 0.3s ease;
}

.value-item:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.14) !important;
}


/* ============================================================
   PAGE HERO BANNER WITH BACKGROUND IMAGE
============================================================ */
/* .page-banner {
  position: relative;
  padding: 45px 0;
  
  background: linear-gradient(135deg, rgba(24, 24, 24, 0.533) 0%, rgba(25, 25, 26, 0.47) 100%), 
              url('images/hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
} */

.page-banner-2 {
  position: relative;
  padding: 80px 0;
  /* Dark gradient overlay + your machinery background image */
  background: linear-gradient(135deg, rgba(24, 24, 24, 0.533) 0%, rgba(25, 25, 26, 0.47) 100%), 
              url('images/hero-banner-2.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}






/* ============================================================
   VIBRANT ABOUT SECTION (Colorful & Modern)
============================================================ */
.vibrant-about-section {
  background-color: #ffffff;
  padding: 85px 0;
}

/* Background Atmospheric Ambient Blobs */
.vibrant-bg-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

.glow-top-left {
  top: -40px;
  left: -40px;
  background: #393185;
}

.glow-bottom-right {
  bottom: -40px;
  right: -40px;
  background: #00d2ff;
}

/* ============================================================
   LEFT SIDE IMAGES & FLOATING BADGES
============================================================ */
.vibrant-img-stack {
  padding: 20px 20px 40px 10px;
}

.main-arch-img-box {
  border-radius: 36px 36px 36px 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(57, 49, 133, 0.12);
}

.main-arch-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

/* Floating Accent Inset Image */
.accent-float-img-box {
  position: absolute;
  bottom: 0px;
  right: -10px;
  width: 210px;
  height: 190px;
  border-radius: 24px;
  overflow: hidden;
  border: 6px solid #ffffff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
  z-index: 3;
}

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

/* Floating Experience Badge with Glow */
.floating-vibrant-badge {
  position: absolute;
  z-index: 4;
}

.exp-glow-badge {
  top: 30px;
  left: -20px;
  background: linear-gradient(135deg, #393185 0%, #5d4ec7 100%);
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 28px rgba(57, 49, 133, 0.35);
  border: 3px solid #ffffff;
}

.vibrant-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  color: #7bf1a8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.badge-num {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

.badge-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: #d1cefa;
  display: block;
}

/* Floating ISO Badge */
.cert-badge {
  bottom: 30px;
  left: 30px;
  background: #ffffff;
  padding: 10px 16px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.cert-icon-circle {
  color: #00bcd4;
  font-size: 1.4rem;
}

/* ============================================================
   RIGHT CONTENT STYLING
============================================================ */
.vibrant-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(57, 49, 133, 0.07);
  border: 1px solid rgba(57, 49, 133, 0.14);
  color: var(--primary-color, #393185);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  border-radius: 50px;
}

.vibrant-heading {
  font-size: 1.8rem !important;
  font-weight: 800;
  color: #1a1d29;
  line-height: 1.22; 
  width: 100%;
}

.gradient-title-text {
  background: linear-gradient(135deg, #393185 0%, #7b68ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.vibrant-lead-text {
  font-size: 0.96rem;
  line-height: 1.7;
  color: #555e6d;
}

/* ============================================================
   COLORFUL MISSION & VISION DUO CARDS
============================================================ */
.color-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.color-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

/* Gradient 1: Royal Violet */
.mission-gradient {
  background: linear-gradient(135deg, #393185 0%, #5d4ec7 100%);
}

/* Gradient 2: Emerald Green/Teal */
.vision-gradient {
  background: linear-gradient(135deg, #0d7a5f 0%, #16a34a 100%);
}

.color-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* ============================================================
   VALUE CHIPS (4 PILLS)
============================================================ */
.value-chips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.chip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8f9fd;
  border: 1px solid rgba(0, 0, 0, 0.04);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2b3445;
  transition: all 0.25s ease;
}

.chip-item:hover {
  background: #ffffff;
  border-color: rgba(57, 49, 133, 0.2);
  box-shadow: 0 4px 12px rgba(57, 49, 133, 0.06);
  transform: translateX(3px);
}

/* Chip Icon Accent Colors */
.text-purple { color: #8b5cf6 !important; }
.text-teal   { color: #06b6d4 !important; }
.text-orange { color: #f97316 !important; }
.text-pink   { color: #ec4899 !important; }

/* ============================================================
   BOTTOM BUTTONS
============================================================ */
.btn-colorful-primary {
  background: linear-gradient(135deg, var(--primary-color, #393185) 0%, #272061 100%);
  color: #ffffff !important;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 8px 10px 8px 22px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 20px rgba(57, 49, 133, 0.3);
  transition: all 0.3s ease;
}

.btn-icon-bubble {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #7bf1a8;
  transition: transform 0.25s ease;
}

.btn-colorful-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(57, 49, 133, 0.45);
}

.btn-colorful-primary:hover .btn-icon-bubble {
  transform: scale(1.1);
}

/* Direct Consultation Call Pill */
.quick-call-card {
  background: #f8f9fc;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 6px 16px 6px 8px;
  border-radius: 50px;
  transition: all 0.25s ease;
}

.quick-call-card:hover {
  background: #ffffff;
  border-color: rgba(57, 49, 133, 0.2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.call-pulse-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(57, 49, 133, 0.1);
  color: var(--primary-color, #393185);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

/* Mobile Adjustments */
@media (max-width: 991.98px) {
  .main-arch-img {
    height: 340px;
  }
  .exp-glow-badge {
    left: 0px;
    top: 15px;
  }
  .value-chips-grid {
    grid-template-columns: 1fr;
  }
}






/* ============================================================
   PRODUCT LISTING CARDS (Reference Image Style)
============================================================ */
.products-catalog-section {
  background-color: #fbfbfd;
}

.product-item-card {
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Asymmetric Rounded Shape from Screenshot */
.prod-img-box {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  /* Top-left: 24px, Top-right: 80px, Bottom-right: 24px, Bottom-left: 24px */
  background-color: #eaedf2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  border-radius: 26px 6px 26px 6px;
  
  /* Normal border & soft shadow */
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
  
  /* Smooth animation speed */
  transition: all 0.3s ease;
  overflow: hidden;
}

.prod-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

/* Overlapping Circular Icon Badge at Bottom-Left */
.prod-circle-icon {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 58px;
  height: 58px;
  background-color: var(--primary-color, #393185);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 12px rgba(57, 49, 133, 0.35);
  z-index: 3;
  transition: all 0.35s ease;
}

/* Product Title Area */
.prod-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 6px 6px 70px; /* Padding-left clears room for the badge */
}

.prod-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1d29;
  margin: 0;
  transition: color 0.3s ease;
}

.prod-explore-arrow {
  color: var(--primary-color, #393185);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.3s ease;
}

/* ============================================================
   HOVER EFFECTS
============================================================ */
.product-item-card:hover .prod-img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

.product-item-card:hover .prod-circle-icon {
  background-color: #272061;
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 6px 18px rgba(57, 49, 133, 0.5);
}

.product-item-card:hover .prod-name {
  color: var(--primary-color, #393185);
}

.product-item-card:hover .prod-explore-arrow {
  opacity: 1;
  transform: translateX(0);
}




/* Initially hide the extra products */
.product-hidden {
  display: none !important;
}

/* Fade-in animation when revealed */
.product-show {
  display: block !important;
  animation: fadeInProduct 0.5s ease forwards;
}

@keyframes fadeInProduct {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



  /* ============================================================
       PRODUCT DETAILS & STICKY ENQUIRY FORM STYLES
    ============================================================ */
    .product-detail-section {
      background-color: #fbfbfd;
      padding: 60px 0;
    }

    /* Left Image that text wraps around */
    .product-main-float-img {
      float: left;
      width: 48%;
      max-width: 460px;
      margin-right: 30px;
      margin-bottom: 24px;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
      background: #ffffff;
      padding: 10px;
    }

    .product-main-float-img img {
      width: 100%;
      height: 380px;
      object-fit: cover;
      border-radius: 14px;
      transition: transform 0.4s ease;
    }

    .product-main-float-img:hover img {
      transform: scale(1.03);
    }

    .prod-badge-tag {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 1px;
      color: #393185;
      background: rgba(57, 49, 133, 0.08);
      padding: 4px 12px;
      border-radius: 50px;
      margin-bottom: 10px;
    }

    .prod-main-title {
      font-size: clamp(1.8rem, 2.8vw, 2.4rem);
      font-weight: 800;
      color: #1a1d29;
      line-height: 1.25;
      margin-bottom: 15px;
    }

    .wrapped-content p {
      color: #4b5563;
      font-size: 0.96rem;
      line-height: 1.8;
      margin-bottom: 18px;
    }

    /* Specs Table */
    .spec-table-box {
      clear: both;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
      margin-top: 35px;
    }

    .spec-table th {
      color: #393185;
      font-size: 0.88rem;
      font-weight: 700;
      background-color: #f8f9fc;
      width: 35%;
    }

    .spec-table td {
      font-size: 0.88rem;
      color: #374151;
    }

    /* ============================================================
       STICKY ENQUIRY FORM (Exact Match to Reference Screenshot)
    ============================================================ */
    .sticky-enquiry-sidebar {
      position: -webkit-sticky;
      position: sticky;
      top: 110px; /* Adjust based on navbar height */
      z-index: 100;
    }

    .enquire-card {
      background: #ffffff;
      border-radius: 18px;
      box-shadow: 0 14px 35px rgba(0, 0, 0, 0.09);
      border: 1px solid rgba(0, 0, 0, 0.06);
      overflow: hidden;
    }

    /* Dark Header Box */
    .enquire-header {
      background-color: #0b2341; /* Dark navy blue from reference screenshot */
      padding: 16px 20px;
      text-align: center;
    }

    .enquire-header h4 {
      color: #ffffff;
      font-size: 1.25rem;
      font-weight: 700;
      margin: 0;
      letter-spacing: 0.3px;
    }

    .enquire-body {
      padding: 24px 20px;
    }

    /* Form Inputs with Icons */
    .form-input-group {
      position: relative;
      display: flex;
      align-items: center;
      background: #f8f9fd;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 0 14px;
      margin-bottom: 14px;
      transition: all 0.25s ease;
    }

    .form-input-group i {
      color: #8c9ba5;
      font-size: 0.95rem;
      min-width: 22px;
    }

    .form-input-group .form-control {
      border: none;
      background: transparent;
      box-shadow: none;
      font-size: 0.88rem;
      padding: 11px 8px;
      color: #1a1d29;
    }

    .form-input-group .form-control::placeholder {
      color: #8c9ba5;
      font-size: 0.88rem;
    }

    .form-input-group:focus-within {
      border-color: #0099cc;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.15);
    }

    .form-input-group textarea.form-control {
      padding-top: 10px;
      resize: none;
    }

    /* Cyan Blue Submit Button */
    .btn-submit-enquiry {
      background-color: #0099cc; /* Bright cyan-blue matching reference */
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 12px;
      width: 100%;
      font-size: 0.95rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .btn-submit-enquiry:hover {
      background-color: #0077a3;
      box-shadow: 0 6px 18px rgba(0, 153, 204, 0.35);
      color: #ffffff;
    }

    /* Responsive for small screens */
    @media (max-width: 991.98px) {
      .product-main-float-img {
        float: none;
        width: 100%;
        max-width: 100%;
        margin-right: 0;
      }
      .product-main-float-img img {
        height: 300px;
      }
      .sticky-enquiry-sidebar {
        position: static;
        margin-top: 40px;
      }
    }



    /* ============================================================
   1. DESKTOP FLOATING SIDE BUTTONS (Image 1)
============================================================ */
.floating-contact-desktop {
  position: fixed;
  bottom: 70px;  
  left: 20px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.float-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-size: 1.3rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.float-btn:hover {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

/* Colors matching Screenshot 1 */
.float-call {
  background-color: #0088b5; /* Cyan Blue */
}

.float-wa {
  background-color: #25d366; /* WhatsApp Green */
  position: relative;
}

/* Subtle WhatsApp Pulse animation */
.float-wa::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.4);
  z-index: -1;
  animation: waPulse 2s infinite;
}

@keyframes waPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

.float-mail {
  background-color: #121927; /* Dark Navy Black */
}

/* ============================================================
   2. MOBILE FIXED BOTTOM ACTION BAR (Image 3)
============================================================ */
.fixed-bottom-bar-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px;
  z-index: 1050;
  display: flex;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
}

.mobile-action-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.mobile-action-link:hover {
  filter: brightness(1.1);
}

/* Exact colors from Screenshot 3 */
.mobile-action-link.call-bg {
  background-color: #f26522; /* Vibrant Orange */
}

.mobile-action-link.wa-bg {
  background-color: #25d366; /* WhatsApp Green */
}

.mobile-action-link.enquiry-bg {
  background-color: #5c2d91; /* Deep Purple */
}

/* Add padding to body on mobile so bottom bar doesn't overlap footer content */
@media (max-width: 767.98px) {
  body {
    padding-bottom: 52px;
  }
}

/* ============================================================
   3. GET A QUOTE POPUP MODAL (Image 2)
============================================================ */
.quote-modal-box {
  border-radius: 12px;
}

/* Cyan Header */
.quote-modal-header {
  background-color: #0088b5 !important;
  padding: 14px 20px;
}

/* Light Blue Urgent Hint Box */
.urgent-call-box {
  background: #f0f8fc;
  border-left: 3.5px solid #0088b5;
  padding: 10px 14px;
  border-radius: 6px;
}

.urgent-phone-num {
  color: #0088b5;
  font-size: 15px;
}

/* Inputs from Screenshot 2 */
.popup-input {
  background-color: #f1f3f5 !important;
  border: 1px solid #e9ecef !important;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 0.88rem;
  color: #333333;
}

.popup-input:focus {
  background-color: #ffffff !important;
  border-color: #0088b5 !important;
  box-shadow: 0 0 0 3px rgba(0, 136, 181, 0.15) !important;
}

.popup-input::placeholder {
  color: #757575;
}

/* Cyan Submit Button */
.btn-popup-submit {
  background-color: #0088b5;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 11px;
  text-transform: capitalize;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-popup-submit:hover {
  background-color: #006e93;
  box-shadow: 0 4px 14px rgba(0, 136, 181, 0.35);
  color: #ffffff;
}

.modal-dialog{
  margin: 0 auto;
}




/* ============================================================
   CLEAN PRODUCT CARD DESIGN (Matching Screenshot)
============================================================ */
.product-modern-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.product-modern-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(57, 49, 133, 0.14);
}

/* Image Holder with Grey/Neutral Studio Backdrop */
.product-img-holder {
  width: 100%;
  height: 250px;
  background-color: #f1f2f4;
  overflow: hidden;
  position: relative;
}

.product-img-holder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Content Area */
.product-content-holder {
  padding: 24px 20px 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

.product-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-color, #393185);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
  transition: color 0.25s ease;
}

.product-card-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 22px;
  max-width: 290px;
  flex-grow: 1;
}

/* View Details Pill Button (Matches Screenshot Shape) */
.btn-view-details {
  background: var(--primary-color, #393185);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 14px rgba(57, 49, 133, 0.25);
  transition: all 0.3s ease;
}

.btn-view-details:hover {
  background: #272061;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(57, 49, 133, 0.4);
}

.btn-view-details i {
  transition: transform 0.25s ease;
}

.btn-view-details:hover i {
  transform: translateX(4px);
}



/* ============================================================
   CLEAN PRODUCT CARD DESIGN (Matching Screenshot)
============================================================ */
.product-modern-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.product-modern-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(57, 49, 133, 0.14);
}

/* Image Holder with Grey/Neutral Studio Backdrop */
.product-img-holder {
  width: 100%;
  height: 250px;
  background-color: #f1f2f4;
  overflow: hidden;
  position: relative;
}

.product-img-holder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Content Area */
.product-content-holder {
  padding: 24px 20px 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

.product-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-color, #393185);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
  transition: color 0.25s ease;
}

.product-card-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 22px;
  max-width: 290px;
  flex-grow: 1;
}

/* View Details Pill Button (Matches Screenshot Shape) */
.btn-view-details {
  background: var(--primary-color, #393185);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 14px rgba(57, 49, 133, 0.25);
  transition: all 0.3s ease;
}

.btn-view-details:hover {
  background: #272061;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(57, 49, 133, 0.4);
}

.btn-view-details i {
  transition: transform 0.25s ease;
}

.btn-view-details:hover i {
  transform: translateX(4px);
}



/* ============================================================
   PRODUCT CATEGORIES SHOWCASE (Matches Screenshot Layout)
============================================================ */
.category-showcase-section {
  background-color: #ffffff;
}

/* Two-Tone Title */
.category-banner-title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.text-primary-dark {
  color: #172b4d; /* Deep rich navy/dark tone */
}

.text-accent-green {
  color: #5bb356; /* Subtle vibrant green from reference */
}

/* Horizontal Dash Under Heading */
.header-divider-dash {
  width: 55px;
  height: 3px;
  background: linear-gradient(90deg, #172b4d 0%, #5bb356 100%);
  border-radius: 4px;
  margin-top: 10px;
}

/* Image Card Container */
.category-showcase-card {
  display: block;
  text-decoration: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;


  

}

.category-img-box {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  background-color: #e9ecef;


  border-radius: 26px 6px 26px 6px;
  
  /* Normal border & soft shadow */
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
  
  /* Smooth animation speed */
  transition: all 0.3s ease;
  overflow: hidden;
}

.showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Glassmorphism Floating Badge (Matches Reference "Inter cultivation") */
.category-glass-badge {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 22, 28, 0.78); /* Semi-transparent dark pill */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 22px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  transition: all 0.3s ease;
  padding: 6px 6px;
}

.category-glass-badge span {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.category-glass-badge{
  display: none;
}

/* ============================================================
   HOVER EFFECTS
============================================================ */
.category-showcase-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);

   border-color: #0084d6; /* Turns blue on hover */
  box-shadow: 0 20px 45px rgba(0, 132, 214, 0.18); /* Blue glowing shadow */
  transform: translateY(-8px); /* Lifts up */

}

.category-showcase-card:hover .showcase-img {
  transform: scale(1.08);
}


.category-showcase-card:hover .category-glass-badge {
  background:  #067bb9d4; 
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%) scale(1.04);
  display: block;
}




/* ============================================================
   SCROLL TO REVEAL ANIMATION STYLES
============================================================ */

/* 1. Base Hidden State */
.reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Slide Up (Most Popular) */
.reveal-up {
  transform: translateY(45px);
}

/* Slide Left */
.reveal-left {
  transform: translateX(-50px);
}

/* Slide Right */
.reveal-right {
  transform: translateX(50px);
}

/* Zoom / Pop-in */
.reveal-zoom {
  transform: scale(0.9);
}

/* 2. Revealed State (Triggered by JS when scrolled into view) */
.reveal.active {
  opacity: 1 !important;
  transform: translate(0) scale(1) !important;
}

/* 3. Staggered Delays (Optional: For rows of cards) */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.6s; }





/* ============================================================
   FREQUENTLY ASKED QUESTIONS (Matches Reference Layout & Colors)
============================================================ */
.faq-section {
  background-color: #ffffff;
}

/* Two-Tone Header from Screenshot */
.faq-main-title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.faq-dark-text {
  color: #172b4d; /* Deep Navy text */
}

.faq-green-text {
  color: var(--primary-color); /* Soft Green text from reference */
}

.faq-divider-line {
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #172b4d 0%, #72b260 100%);
  border-radius: 4px;
}

/* ============================================================
   FAQ ACCORDION ITEM (Soft Cream Pills)
============================================================ */
.faq-item {
  background-color: #fdfdf5 !important; /* Soft warm cream background */
  border: 1px solid #f1f2dc !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease;
}

.faq-item:hover {
  border-color: #dbe2bd !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Active / Open Question (Soft Green Tint like Question 2 in Screenshot) */
.faq-item:has(.accordion-button:not(.collapsed)),
.faq-item.active-faq {
  background-color: #ebf5e9 !important; /* Soft green tint */
  border-color: #c9e4c5 !important;
}

/* Accordion Button */
.faq-item .accordion-button {
  background: transparent !important;
  color: #2c3e50;
  font-size: 0.94rem;
  font-weight: 600;
  padding: 16px 20px;
  box-shadow: none !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

/* Remove default Bootstrap arrow icon */
.faq-item .accordion-button::after {
  display: none !important;
}

/* Custom Green Plus / Minus Icon from Screenshot */
.faq-icon-indicator {
  position: relative;
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #27ae60; /* Crisp Green */
  font-weight: 800;
  font-size: 1.25rem;
}

/* Plus sign by default */
.faq-icon-indicator::before {
  content: '+';
  line-height: 1;
}

/* Minus sign when open */
.faq-item .accordion-button:not(.collapsed) .faq-icon-indicator::before {
  content: '-';
}

/* Accordion Body Content */
.faq-item .accordion-body {
  padding: 0 20px 18px 20px;
  font-size: 0.88rem;
  color: #556270;
  line-height: 1.65;
}



/* ============================================================
   CONTACT US SECTION (Matches Screenshot Layout & Styling)
============================================================ */
.contact-page-section {
  background-color: #fcfcfd;
}

/* Form Card */
.connect-form-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Two-Tone Title & Line */
.connect-title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.text-dark-teal {
  color: #1a4d46; /* Deep dark teal from screenshot */
}

.text-light-green {
  color: var(--primary-blue); /* Soft leafy green from screenshot */
}

.connect-dash {
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #1a4d46 0%, #82b467 100%);
  border-radius: 4px;
}

/* ============================================================
   OUTLINE FLOATING LABEL INPUTS (Screenshot Style)
============================================================ */
.floating-field-group {
  position: relative;
  margin-top: 12px;
}

.floating-label {
  position: absolute;
  top: -9px;
  left: 14px;
  background: #ffffff;
  padding: 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #00000f; /* Soft muted green */
  z-index: 2;
  margin: 0;
}

.field-input {
  border: 1.5px solid #dbe2d5 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 0.9rem;
  color: #1a1d29;
  background: #ffffff !important;
  box-shadow: none !important;
  transition: border-color 0.25s ease;
}

.field-input:focus {
  border-color: #558742 !important;
  box-shadow: 0 0 0 3px rgba(85, 135, 66, 0.12) !important;
}

/* Light Green Pill Button */
.btn-send-message {
  background-color: var(--primary-blue); /* Pastel green from screenshot */
  color: #fff;
  border: none;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 12px 20px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(183, 227, 154, 0.5);
  transition: all 0.3s ease;
}

.btn-send-message:hover {
  background-color: #a4d982;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(183, 227, 154, 0.7);
}

/* ============================================================
   MAP & GREEN INFO CARDS
============================================================ */
.map-embed-wrapper iframe {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Soft Green Info Cards */
.info-green-card {
  background-color: #7a858773; /* Match pastel green tone from screenshot */
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.text-dark-green {
  color: #fff;
}

.info-label {
  font-size: 0.85rem;
}

.info-value {
  font-size: 0.85rem;
}

/* Circular Green Social Buttons */
.contact-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #e7ecef; /* Darker vibrant green circle */    
  color: #0088b5 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.25s ease;
}

.contact-social-btn:hover {
  background-color: #00b4d8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.contact-social-btn:hover i{
  color: #fff;
  
}
.connect-form-card .field-input::placeholder {
  color: #94a3b8 !important; /* Change this to whatever color you want (e.g. #718096, #a0aec0) */
  opacity: 1;                /* Firefox requires opacity: 1 to show full color */
  font-size: 0.85rem;
}



/* ============================================================
   SITEMAP PAGE STYLING (Matches Screenshot)
============================================================ */
.sitemap-section {
  background-color: #fcfcfd;
}

/* Category Header Bar */
.sitemap-header-bar {
  background-color: #eaf1f8; /* Soft blue-grey tint from screenshot */
  border-left: 4.5px solid #0077b6; /* Crisp blue accent bar on left */
  border-radius: 8px;
  padding: 12px 18px;
}

.sitemap-header-icon {
  color: #0077b6;
  font-size: 1.1rem;
}

.sitemap-header-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #1a2530;
}

/* Middle Divider Dash */
.sitemap-title-dash {
  width: 50px;
  height: 3px;
  background-color: #1a2530;
  border-radius: 4px;
}

/* Sitemap Link Cards */
.sitemap-card {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  color: #2c3e50;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease;
}

.sitemap-card i {
  font-size: 0.75rem;
  color: #0077b6;
  transition: transform 0.2s ease;
}

/* Hover State */
.sitemap-card:hover {
  background-color: #f8fafc;
  border-color: #0077b6;
  color: #0077b6;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 119, 182, 0.12);
}

.sitemap-card:hover i {
  transform: translateX(3px);
}

/* Active Highlight (Navy Dark Card like Cisco Nexus Switches in Screenshot) */
.sitemap-card.active {
  background-color: #0a1f33 !important;
  color: #ffffff !important;
  border-color: #0a1f33 !important;
  box-shadow: 0 4px 14px rgba(10, 31, 51, 0.35);
}

.sitemap-card.active i {
  color: #ffffff !important;
}



/* ============================================================
   OUR PRESENCE (Static Headers & Open Grids in Primary Color)
============================================================ */
.presence-section {
  background-color: #fcfcfd;
}

/* State Header Bar: Solid Brand Color #393185, non-clickable */
.presence-state-header {
  background-color: var(--primary-color) !important;
  padding: 16px 22px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(57, 49, 133, 0.18);
  display: flex;
  align-items: center;
}

.presence-state-header h4 {
  font-size: 1.1rem;
  letter-spacing: 0.3px;
}

/* City Cards Grid */
.city-hub-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 13px 18px;
  color: #1e293b;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.25s ease;
}

.city-hub-card i {
  color: #393185;
  font-size: 0.75rem;
  transition: transform 0.25s ease;
}

.city-hub-card:hover {
  background-color: #f8fafc;
  border-color: #393185;
  color: #393185;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(57, 49, 133, 0.12);
}

.city-hub-card:hover i {
  transform: translateX(4px);
}

.presence-state-header a{
  color: #fff !important;
}



/* ============================================================
   OUR LOCATIONS (Continuous Infinite Autoplay Marquee)
============================================================ */
.locations-marquee-section {
  background-color: #fbfbfd;
  padding: 85px 0;
}

/* Marquee Outer Container */
.marquee-slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 0;
  display: flex;
}

/* Gradient Fade Edges on Left and Right */
.marquee-slider-container::before,
.marquee-slider-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.marquee-slider-container::before {
  left: 0;
  background: linear-gradient(to right, #fbfbfd, transparent);
}

.marquee-slider-container::after {
  right: 0;
  background: linear-gradient(to left, #fbfbfd, transparent);
}

/* Make sure the outer wrapper hides overflow and sets the 1-screen width */
.marquee-wrapper {
  overflow: hidden;
  width: 100%;
}

.marquee-track {
  display: flex;
  gap: 24px;
  padding-right: 24px; /* Ensures exact gap alignment at -50% loop */
  width: max-content;
  animation: scrollMarquee 36s ease-in-out infinite;
  will-change: transform;
}

.marquee-track:hover {
  animation-play-state: paused;
}
/* Each card takes 1/4 of the visible wrapper minus the 3 gaps (24px * 3 = 72px) */
@keyframes scrollMarquee {
  0%, 5%      { transform: translate3d(0%, 0, 0); }
  8.3%, 13.3% { transform: translate3d(-4.166%, 0, 0); }
  16.6%, 21.6%{ transform: translate3d(-8.333%, 0, 0); }
  25%, 30%    { transform: translate3d(-12.5%, 0, 0); }
  33.3%, 38.3%{ transform: translate3d(-16.666%, 0, 0); }
  41.6%, 46.6%{ transform: translate3d(-20.833%, 0, 0); }
  50%, 55%    { transform: translate3d(-25%, 0, 0); }
  58.3%, 63.3%{ transform: translate3d(-29.166%, 0, 0); }
  66.6%, 71.6%{ transform: translate3d(-33.333%, 0, 0); }
  75%, 80%    { transform: translate3d(-37.5%, 0, 0); }
  83.3%, 88.3%{ transform: translate3d(-41.666%, 0, 0); }
  91.6%, 96.6%{ transform: translate3d(-45.833%, 0, 0); }
  100%        { transform: translate3d(-50%, 0, 0); }
}
/* Individual Location Card */
.location-marquee-card {
  width: 270px;
  min-width: 270px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  background: #ffffff;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.loc-img-holder {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

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

/* Dark Gradient Vignette at Bottom of Image */
.loc-img-holder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.8) 100%);
}

/* Floating Glassmorphism City Badge */
.loc-floating-badge {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: linear-gradient(135deg, var(--primary-color, #393185) 0%, #272061 100%); /* Primary #393185 Tint */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* border: 1px solid rgba(255, 255, 255, 0.25); */
  border-radius: 50px;
  padding: 6px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.loc-floating-badge i {
  color: #7bf1a8; /* Neon Mint Icon */
  font-size: 0.85rem;
}

.loc-floating-badge span {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ============================================================
   HOVER INTERACTIONS
============================================================ */
.location-marquee-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(57, 49, 133, 0.2);
}

.location-marquee-card:hover .loc-img-holder img {
  transform: scale(1.1);
}

.location-marquee-card:hover .loc-floating-badge {
  background: #272061;
  transform: translateX(-50%) scale(1.06);
}




/* ============================================================
   ELEVATED BLOG CARDS & HOVER EFFECTS (Primary #393185 Theme)
============================================================ */
.blog-listing-section {
  background-color: #fbfbfd;
}

/* Base Card Container */
.blog-card {
  background: #00b8ff14;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(57, 49, 133, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Image Thumbnail Box */
.blog-thumb-wrap {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  background-color: #f1f3f7;
}

.blog-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

/* Floating Category Pill on Bottom-Right */
.blog-cat-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgb(29 115 189 / 88%); /* Primary #393185 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Calendar Date Ribbon on Top-Left */
.blog-date-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #ffffff;
  border-radius: 10px;
  padding: 6px 12px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.blog-date-badge .day {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary-color, #393185);
}

.blog-date-badge .month {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 2px;
}

/* Content Body */
.blog-body {
  padding: 24px 22px 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 12px;
}

.blog-title a {
  color: #1a1d29;
  text-decoration: none;
  transition: color 0.25s ease;
}

.blog-title a:hover {
  color: var(--primary-color, #393185);
}

.blog-excerpt {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Read More Link */
.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-color, #393185);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  transition: all 0.25s ease;
}

.blog-read-more i {
  font-size: 0.8rem;
  transition: transform 0.25s ease;
}

/* ============================================================
   UNIQUE CARD HOVER INTERACTIONS
============================================================ */
.blog-card:hover {
  transform: translateY(-8px);
  border-color: rgba(57, 49, 133, 0.25);
  box-shadow: 0 20px 45px rgba(57, 49, 133, 0.16);
}

.blog-card:hover .blog-thumb-img {
  transform: scale(1.08) rotate(-1deg);
  filter: brightness(1.04);
}

.blog-card:hover .blog-title a {
  color: var(--primary-color, #393185);
}

.blog-card:hover .blog-read-more {
  gap: 12px;
  color: #272061;
}

.blog-card:hover .blog-read-more i {
  transform: translateX(4px);
}

/* ============================================================
   LOAD MORE FUNCTIONALITY STYLES
============================================================ */
.blog-hidden-card {
  display: none !important;
}

.blog-revealed-card {
  display: block !important;
  animation: revealBlogFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealBlogFade {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Load More Button */
.btn-load-more-blogs {
  background: #ffffff;
  color: var(--primary-color, #393185);
  border: 1.5px solid var(--primary-color, #393185);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(57, 49, 133, 0.1);
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}

.btn-load-more-blogs:hover {
  background: var(--primary-color, #393185);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(57, 49, 133, 0.25);
}

.btn-load-more-blogs:hover i {
  transform: rotate(180deg);
  transition: transform 0.4s ease;
}



/* ============================================================
   BLOG DETAIL PAGE STYLES (Theme #393185)
============================================================ */
.blog-detail-section {
  background-color: #fbfbfd;
}

/* Article Title & Typography */
.article-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1a1d29;
  line-height: 1.25;
}

.article-lead {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #334155;
  font-weight: 500;
}

.article-heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1a1d29;
}

.article-body-content p {
  font-size: 0.96rem;
  line-height: 1.8;
  color: #4b5563;
  margin-bottom: 18px;
}

/* Author Avatar & Share Bar */
.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(57, 49, 133, 0.1);
  color: var(--primary-color, #393185);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.share-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.share-icon-btn:hover {
  background: var(--primary-color, #393185);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Pull-Quote */
.article-pull-quote {
  background: rgba(57, 49, 133, 0.04);
  border-left: 4px solid var(--primary-color, #393185);
  font-size: 1.05rem;
  font-style: italic;
  color: #1e293b;
  line-height: 1.7;
}

.article-pull-quote .quote-icon {
  color: var(--primary-color, #393185);
  font-size: 1.25rem;
}

/* Checklist Points */
.article-checklist li {
  font-size: 0.92rem;
  color: #334155;
  margin-bottom: 10px;
  line-height: 1.6;
}

/* Tag Pills */
.tag-pill {
  background: #f1f5f9;
  color: #475569;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 50px;
  transition: all 0.2s ease;
}

.tag-pill:hover {
  background: var(--primary-color, #393185);
  color: #ffffff;
}

/* ============================================================
   SIDEBAR STYLES
============================================================ */
.blog-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
}

.widget-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a1d29;
  position: relative;
  padding-bottom: 8px;
}

.widget-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2.5px;
  background: var(--primary-color, #393185);
  border-radius: 4px;
}

/* Recent Posts */
.recent-post-thumb {
  width: 65px;
  height: 65px;
  min-width: 65px;
  border-radius: 10px;
  object-fit: cover;
}

.recent-post-date {
  font-size: 0.72rem;
  color: #94a3b8;
  display: block;
  margin-bottom: 2px;
}

.recent-post-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.recent-post-item:hover .recent-post-title {
  color: var(--primary-color, #393185);
}

/* Categories List */
.widget-categories a {
  color: #475569;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 6px 0;
  transition: color 0.2s ease;
}

.widget-categories a:hover {
  color: var(--primary-color, #393185);
}

/* Sticky Sidebar CTA Banner */
.sidebar-cta-card {
  background: linear-gradient(135deg, #272061 0%, #393185 100%);
  box-shadow: 0 10px 30px rgba(57, 49, 133, 0.25);
}





/* ============================================================
   FAQ PAGE ENHANCED STYLING
============================================================ */
.faq-page-main {
  background-color: #fcfcfd;
}

/* Live Search Box */
.faq-search-wrapper {
  background: #ffffff;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1.5px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 4px 18px;
  transition: all 0.3s ease;
}

.faq-search-wrapper:focus-within {
  border-color: var(--primary-color, #393185);
  box-shadow: 0 6px 24px rgba(57, 49, 133, 0.14);
}

.faq-search-icon {
  color: var(--primary-color, #393185);
  font-size: 1.1rem;
  margin-right: 12px;
}

.faq-search-field {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 0.95rem;
  padding: 10px 0;
  color: #1a1d29;
}

/* Category Filter Tabs */
.faq-tab-btn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.25s ease;
}

.faq-tab-btn:hover,
.faq-tab-btn.active {
  background-color: var(--primary-color, #393185);
  color: #ffffff;
  border-color: var(--primary-color, #393185);
  box-shadow: 0 4px 14px rgba(57, 49, 133, 0.25);
}

/* Individual FAQ Card */
.faq-item {
  background-color: #fdfdf5; /* Soft warm cream */
  border: 1px solid #f1f2dc;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease;
}

.faq-item:hover {
  border-color: #dbe2bd;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

/* Active State (Soft Green Tint) */
.faq-item:has(.faq-question-btn:not(.collapsed)) {
  background-color: #ebf5e9;
  border-color: #c9e4c5;
}

/* Question Header Button */
.faq-question-btn {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: #1e293b;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

/* Custom + / − Icon */
.faq-icon-indicator {
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #27ae60;
  font-size: 1.3rem;
  font-weight: 800;
}

.faq-icon-indicator::before {
  content: '+';
  line-height: 1;
}

.faq-question-btn:not(.collapsed) .faq-icon-indicator::before {
  content: '−';
}

/* Answer Body */
.faq-answer-body {
  padding: 0 20px 18px 20px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #4b5563;
}

/* Bottom Support Banner */
.faq-bottom-support-card {
  background: linear-gradient(135deg, #272061 0%, #393185 100%);
  box-shadow: 0 14px 35px rgba(57, 49, 133, 0.25);
}




/* ============================================================
   LATEST BLOGS HOMEPAGE SECTION (Theme #393185)
============================================================ */
.latest-blogs-section {
  background-color: #fbfbfd;
}

/* Base Clickable Card */
.home-blog-card {
  background: #a4d9e566;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(57, 49, 133, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;


  border-radius: 26px 6px 26px 6px;
  
  /* Normal border & soft shadow */
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
  
  /* Smooth animation speed */
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Image Thumbnail Container */
.home-blog-thumb {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  background-color: #f1f3f7;
}

.home-blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

/* Category Badge (Floating Pill) */
.home-blog-category {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(57, 49, 133, 0.88); /* Primary #393185 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 5px 14px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Calendar Date Badge */
.home-blog-date {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #ffffff;
  border-radius: 10px;
  padding: 6px 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.home-blog-date .day {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary-color, #393185);
}

.home-blog-date .month {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 2px;
}

/* Content Body */
.home-blog-body {
  padding: 24px 22px 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* background-color: #a4d9e566; */
}

.home-blog-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1a1d29;
  line-height: 1.4;
  margin-bottom: 12px;
  transition: color 0.25s ease;
}

.home-blog-excerpt {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Interactive Text Link Hint */
.home-blog-read-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary-color, #393185);
  transition: gap 0.25s ease;
}

.home-blog-read-hint i {
  font-size: 0.8rem;
  transition: transform 0.25s ease;
}

/* ============================================================
   CARD HOVER EFFECTS
============================================================ */
.home-blog-card:hover {
  transform: translateY(-8px);
  border-color: rgba(57, 49, 133, 0.25);
  box-shadow: 0 18px 40px rgba(57, 49, 133, 0.14);
}

.home-blog-card:hover .home-blog-img {
  transform: scale(1.08);
  filter: brightness(1.04);
}

.home-blog-card:hover .home-blog-title {
  color: var(--primary-color, #393185);
}

.home-blog-card:hover .home-blog-read-hint {
  gap: 12px;
}

.home-blog-card:hover .home-blog-read-hint i {
  transform: translateX(4px);
}

/* ============================================================
   SINGLE BOTTOM PILL BUTTON (Primary Theme #393185)
============================================================ */
.btn-read-all-blogs {
  background: linear-gradient(135deg, var(--primary-color, #393185) 0%, #272061 100%);
  color: #ffffff !important;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 8px 10px 8px 24px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 6px 20px rgba(57, 49, 133, 0.28);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-arrow-bubble {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7bf1a8; /* Neon Mint Arrow */
  font-size: 0.9rem;
  transition: transform 0.3s ease, background 0.3s ease;
}

.btn-read-all-blogs:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(57, 49, 133, 0.42);
}

.btn-read-all-blogs:hover .btn-arrow-bubble {
  transform: translateX(4px);
  background: #7bf1a8;
  color: #17133f;
}


@media (max-width: 992px) {
  .btn-hero-glass{
    display: none;
  }
  .hero-stats{
    display: none;
  }
}









/* ==========================================
   DESIGN VARIABLES
   ========================================== */
:root {
  --primary-blue: #0077cc;
  --dark-navy: #0b1e38;
  --dark-navy-2: #142a4a;
  --accent-cyan: #00b4d8;
  --accent-orange: #ff7a00;
  --text-white: #ffffff;
  --transition: all 0.3s cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* ==========================================
   1. TOP BLUE BAR
   ========================================== */
.site-header {
  position: relative;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.top-bar {
  background: linear-gradient(90deg, var(--primary-blue) 0%, #0096e6 100%);
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--text-white);
}

.top-link {
  color: var(--text-white);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.top-link:hover {
  color: #d8f3dc;
  transform: translateY(-1px);
}

.social-circle {
  width: 28px;
  height: 28px;
  background-color: #ffffff;
  color: var(--primary-blue);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-decoration: none;
  transition: var(--transition);
}

.social-circle:hover {
  background-color: var(--dark-navy);
  color: #ffffff;
  transform: translateY(-2px);
}

/* ==========================================
   2. MAIN NAVBAR & LOGO
   ========================================== */
.main-navbar {
  padding: 0 !important; /* Kept tight to align with background ribbon */
  background: #ffffff;
}

/* Logo sits clean on the left with plenty of breathing room */
.brand-logo-area {
  /* padding: 8px 0; */
  flex-shrink: 0;
}

.site-logo-img {
  height: 48px;
  width: auto;
  display: block;
}

/* ==========================================
   3. THE CREATIVE BACKGROUND DOCK (BEHIND MENU ONLY)
   ========================================== */
.nav-creative-dock {
  /* Dynamic slanted cut on the left + Deep Industrial Gradient */
  background: linear-gradient(135deg, #2d86c2 0%, #0c1a24 100%);
  clip-path: polygon(36px 0, 100% 0, 100% 100%, 0% 100%);
  padding: 10px 24px 10px 54px; /* Extra left padding compensates for slant */
  position: relative;
  box-shadow: -4px 8px 24px rgba(11, 30, 56, 0.2);
}

/* Top Accent Line on the dock */
.nav-creative-dock::before {
  content: "";
  position: absolute;
  top: 0;
  left: 36px;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--primary-blue));
}

.nav-menu-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 6px;
}

.nav-menu-list .nav-link {
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 9px 16px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  position: relative;
  border:none;
}

.nav-arrow {
  font-size: 10px;
  transition: transform 0.25s ease;
}

.dropdown:hover .nav-arrow {
  transform: rotate(180deg);
}

/* Hover State */
.nav-menu-list .nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* Active State: Clean Underglow & Cyan highlight */
.nav-menu-list .nav-link.active {
  color: #ffffff;
  background: rgba(0, 180, 216, 0.15);
}

.nav-menu-list .nav-link.active::after {
  /* content: ""; */
  position: absolute;
  bottom: -3px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--accent-cyan);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-cyan);
  display: none;;
}

/* ==========================================
   4. CTA BUTTON (Get a Quote)
   ========================================== */
.nav-cta-wrap {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.btn-quote {
  background: #fff;
  color: #000;
  border: none;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 119, 204, 0.4);
  transition: var(--transition);
  text-decoration: none;
}

.btn-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 119, 204, 0.6);
  color: #000;
}

.btn-quote i {
  transition: transform 0.2s ease;
}

.btn-quote:hover i {
  transform: translateX(4px);
}

/* ==========================================
   5. DROPDOWN STYLING
   ========================================== */
.custom-dropdown {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
  min-width: 260px;
  margin-top: 14px !important;
}

.custom-dropdown .dropdown-item {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dark-navy);
  padding: 8px 14px;
  border-radius: 6px;
  transition: var(--transition);
}

.custom-dropdown .dropdown-item:hover {
  background: rgba(0, 119, 204, 0.08);
  color: var(--primary-blue);
  padding-left: 18px;
}

/* ==========================================
   6. MOBILE VIEW
   ========================================== */
.mobile-toggle-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--dark-navy);
  padding: 8px;
}

.custom-mobile-drawer {
  width: 300px;
}

.drawer-header {
  padding: 2px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.drawer-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #64748b;
}

.mobile-link {
  display: block;
  padding: 14px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 1px solid #f8fafc;
}

.mobile-link.active,
.mobile-link:hover {
  color: var(--primary-blue);
  background: #f0f7ff;
}

.mobile-sub-panel a {
  display: block;
  padding: 8px 20px 8px 34px;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

.mobile-sub-panel a:hover {
  color: #f5f5f5f5;
}

.chevron-icon {
  font-size: 11px;
  transition: transform 0.25s ease;
}

.mobile-accordion a[aria-expanded="true"] .chevron-icon {
  transform: rotate(90deg);
}






/* ==========================================
   HERO SECTION WRAPPER
   ========================================== */
.hero-slider-section {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background-color: #0b1727;
  color: #ffffff;
}

.slider-container {
  position: relative;
  width: 100%;
  min-height: 88vh;
  display: flex;
}

/* Base Slide State */
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
  overflow: hidden;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* ==========================================
   CONTINUOUS KEN BURNS ZOOM ANIMATION
   (Always expands / scales up smoothly)
   ========================================== */
.slide-bg-zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center center;
  transform: scale(1);
  transition: transform 0.5s ease-out;
}

/* Runs infinite zoom-in while slide is active */
.hero-slide.active .slide-bg-zoom {
  animation: continuousKenBurns 10s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}

@keyframes continuousKenBurns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.18); /* Smoothly zooms 18% larger */
  }
}

/* ==========================================
   ENTRANCE ZOOM-IN / EXPANSION ANIMATIONS
   ========================================== */
@keyframes expandPopIn {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(35px);
  }
  60% {
    transform: scale(1.02) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.hero-slide.active .anim-zoom-in {
  animation: expandPopIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered Delay for smooth sequence */
.anim-zoom-in {
  opacity: 0;
}
.delay-1 { animation-delay: 0.15s !important; }
.delay-2 { animation-delay: 0.3s !important; }
.delay-3 { animation-delay: 0.45s !important; }
.delay-4 { animation-delay: 0.6s !important; }
.delay-5 { animation-delay: 0.75s !important; }

/* ==========================================
   TYPOGRAPHY & CONTENT
   ========================================== */
/* Glowing Tagline Badge */
.hero-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(43, 127, 255, 0.15);
  border: 1px solid rgba(43, 127, 255, 0.4);
  padding: 6px 16px;
  border-radius: 30px;
  backdrop-filter: blur(8px);
  margin-bottom: 20px;
}

.pulsing-radar {
  width: 8px;
  height: 8px;
  background-color: #00d2ff;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.7);
  animation: radarPulse 1.8s infinite;
}

@keyframes radarPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 210, 255, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); }
}

.badge-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #7dd3fc;
}

/* Hero Title with Gradient Expansion */
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}

.gradient-accent-text {
  display: block;
  font-size: 0.55em;
  font-weight: 700;
  margin-top: 8px;
  background: linear-gradient(90deg, #38bdf8 0%, #2b7fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
}

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

/* ==========================================
   BUTTONS
   ========================================== */
.hero-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}

.btn-hero-glow {
  background: linear-gradient(135deg, #00b4d8 0%, #2b7fff 100%);
  color: #ffffff;
  padding: 13px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px -4px rgba(43, 127, 255, 0.5);
  transition: all 0.3s ease;
}

.btn-hero-glow:hover {
  color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(43, 127, 255, 0.7);
}

.btn-hero-glow i {
  transition: transform 0.25s ease;
}

.btn-hero-glow:hover i {
  transform: translateX(5px);
}

.btn-hero-glass {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 13px 26px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-hero-glass:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-3px);
}

/* ==========================================
   GLASS STAT CARDS
   ========================================== */
.stat-pill-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  padding: 14px 16px;
  border-radius: 12px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.stat-pill-card:hover {
  transform: translateY(-4px);
  border-color: #38bdf8;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

.stat-number small {
  font-size: 16px;
  color: #38bdf8;
  margin-left: 2px;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
  font-weight: 500;
}

/* ==========================================
   CONTROLS (BOTTOM PILLS & ARROWS)
   ========================================== */
.hero-bottom-controls {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-progress-pills {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pill-dot {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.pill-dot.active {
  opacity: 1;
}

.pill-number {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.pill-bar {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.pill-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #38bdf8;
  transition: width 0.3s ease;
}

/* Auto-fills progress bar on active slide */
.pill-dot.active .pill-fill {
  width: 100%;
  transition: width 6s linear; /* Match slide duration */
}

.slider-arrow-controls {
  display: flex;
  gap: 8px;
}

.ctrl-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(9 151 237 / 29%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.ctrl-arrow-btn:hover {
  background: #2b7fff;
  border-color: #2b7fff;
  transform: scale(1.08);
}





/* ==========================================
   HERITAGE / ABOUT SECTION STYLING
   ========================================== */
:root {
  --heritage-green: #005a36;      /* Industrial forest green from screenshot */
  --heritage-green-dark: #004227;
  --heritage-text: #4b5563;       /* Balanced slate-grey body text */
}

.about-heritage-section {
  background-color: #ffffff;
  overflow: hidden;
}

/* 1. LEFT MAIN IMAGE CARD */
.main-machine-card {
  width: 100%;
  height: 100%;
  border-radius: 28px; /* Large smooth corner curve */
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

.main-machine-img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  max-height: 640px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.main-machine-card:hover .main-machine-img {
  transform: scale(1.03);
}

/* 2. TAGLINE & HEADLINE */
.heritage-tagline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--primary-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.tagline-dash {
  display: inline-block;
  width: 32px;
  height: 2px;
  background-color: var(--primary-blue);
}

.heritage-heading {
  color: var(--primary-blue);
  font-size: clamp(1.8rem, 3.2vw, 2rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* 3. 25 YEARS ANNIVERSARY BADGE */
.anniversary-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.badge-num {
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: var(--primary-blue);
  letter-spacing: -2px;
}

.badge-sub-info {
  display: flex;
  flex-direction: column;
}

/* Curved tricolor/accent wave under the badge */
.badge-wave-line {
  width: 44px;
  height: 3px;
  background: linear-gradient(90deg, #005a36 0%, #ffffff 50%, #d90429 100%);
  border-radius: 2px;
  margin-bottom: 4px;
}

.badge-year-text {
  font-size: 14px;
  font-weight: 900;
  color: #1f2937;
  letter-spacing: 1.5px;
}

/* 4. SPLIT STORY ROW (Vintage Image + Text) */
.heritage-story-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.story-img-col {
  flex: 0 0 45%; /* Keeps exact proportion matching the screenshot */
  max-width: 45%;
}

.vintage-history-img {
  width: 100%;
  border-radius: 14px; /* Rounded corners on vintage photo */
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  filter: grayscale(85%) contrast(1.1); /* Historical vintage print feel */
}

.story-text-col {
  flex: 1;
}

.story-text-col p {
  color: var(--heritage-text);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.story-text-col p:last-child {
  margin-bottom: 0;
}

/* 5. PILL BUTTON "OUR HISTORY" */
.btn-heritage-pill {
  display: inline-block;
  background-color: var(--primary-blue);
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 34px;
  border-radius: 50px; /* Full capsule/pill shape */
  box-shadow: 0 4px 14px rgba(0, 90, 54, 0.25);
  transition: all 0.25s ease;
}

.btn-heritage-pill:hover {
  background-color: var(--heritage-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 90, 54, 0.35);
}

/* ==========================================
   RESPONSIVE DESIGN (Tablets & Mobile)
   ========================================== */
@media (max-width: 991px) {
  .main-machine-img {
    min-height: 380px;
    max-height: 440px;
  }
}

@media (max-width: 767px) {
  .heritage-story-layout {
    flex-direction: column;
  }
  
  .story-img-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .main-machine-img {
    min-height: 300px;
  }
}





 /* Top full-width banner image */
.top-promo-banner {
  width: 100%;
  height: 50px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  line-height: 0;
}

.top-promo-banner img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}






/* Centers the content and buttons */
.hero-content {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero-desc {
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-btn-group {
  justify-content: center !important;
}





/* 1. Add 'isolation: isolate' so the blue background stays visible */
.nav-creative-dock {
  position: relative;
  z-index: 100;
  isolation: isolate; /* <-- THIS SINGLE LINE FIXES THE COLOR */
}

/* 2. Your exact slanted background */
.nav-creative-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #2b7fff; /* Your blue color/gradient */
  clip-path: polygon(36px 0, 100% 0, 100% 100%, 0% 100%);
  z-index: -1;
}

/* 3. Dropdown opens on hover */
@media (min-width: 992px) {
  .nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }




}






/* 1. Make sure no parent container cuts off the dropdown */
.site-header, 
.main-navbar, 
.nav-creative-dock {
  overflow: visible !important;
}

/* 2. Position the parent item */
.nav-item.dropdown {
  position: relative !important;
}

/* 3. Force the dropdown to show and stay on top of the hero section */
.nav-item.dropdown:hover > .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
}




/* 1. Stop the bar from cutting off the dropdown */
/* .nav-creative-dock {
  clip-path: none !important;
  overflow: visible !important;
} */

/* 2. Force the dropdown to sit in front of the slider */
.nav-item.dropdown:hover .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 100% !important;
  z-index: 999999 !important;
  background-color: #ffffff !important;
}



/* Keep the slant, but extend the bottom so it doesn't clip the dropdown */
.nav-creative-dock {
  clip-path: polygon(36px 0, 100% 0, 100% 2000px, 0 2000px, 0 100%) !important;
}

/* Make sure dropdown opens on hover and stays on top */
.nav-item.dropdown:hover > .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 999999 !important;
}





/* 1. Force the dropdown list items to be visible */
.dropdown-menu li {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 2. Make the text dark so it shows on the white card */
.dropdown-menu .dropdown-item {
  display: block !important;
  color: #1e293b !important;       /* Dark visible text */
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 20px !important;
}

/* 3. Hover state for dropdown links */
.dropdown-menu .dropdown-item:hover {
  background-color: #f0f7ff !important;
  color: #0077cc !important;
}









/* ==========================================
   TEXT WRAP AROUND IMAGE
   ========================================== */
.heritage-story-wrap {
  display: block; /* Normal block flow to allow float wrapping */
  margin-top: 10px;
}

/* The Floated Image */
.story-float-img {
  float: left;
  width: 250px;             /* Exact proportionate width */
  max-width: 44%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 14px;
  margin: 4px 24px 14px 0;  /* Spacing: right & bottom pushes text away */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  filter: grayscale(80%) contrast(1.1);
}

/* Paragraphs Flowing Around */
.heritage-story-wrap p {
  color: #4b5563;
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Clearfix for the container */
.heritage-story-wrap::after {
  content: "";
  display: table;
  clear: both;
}

/* Mobile responsive: stack on small screens */
@media (max-width: 575px) {
  .story-float-img {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px 0;
  }
}










@media (max-width: 991px) {
  /* 1. Set a clean mobile height so the image does NOT zoom in huge */
  .hero-slider-section,
  .slider-container,
  .hero-slide {
    height: 420px !important;      /* Stops the giant zoom */
    min-height: 420px !important;
  }

  /* 2. Scale the banner to fit nicely on mobile */
  .slide-bg-zoom {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    animation: none !important;
    transform: none !important;
  }

  /* 3. Center the text so it does not get hidden under the bottom buttons */
  .hero-slide .row {
    align-items: center !important;
    padding-top: 10px !important;
    padding-bottom: 40px !important;
    margin-bottom: 0 !important;
    height: 100% !important;
  }

  /* 4. Scale text & buttons to fit mobile screens cleanly */
  .hero-badge-wrap {
    padding: 4px 12px !important;
    margin-bottom: 8px !important;
  }
  
  .badge-text {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
  }

  .hero-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  .gradient-accent-text {
    font-size: 13px !important;
    margin-top: 4px !important;
  }

  .hero-btn-group {
    gap: 8px !important;
  }

  .btn-hero-glow,
  .btn-hero-glass {
    padding: 8px 16px !important;
    font-size: 12.5px !important;
  }

  /* 5. Keep slider dots above the bottom call buttons */
  .hero-bottom-controls {
    bottom: 12px !important;
  }

  
}






@media (max-width: 767px) {
  /* 1. Set the exact mobile proportion (stops the huge zoom) */
  .hero-slider-section,
  .slider-container,
  .hero-slide {
    height: 60vw !important;      /* Automatically scales perfectly on all phones (approx 220px-240px) */
    min-height: 220px !important;
    max-height: 280px !important;
  }

  /* 2. Show 100% of the banner image with ZERO cutting/cropping */
  .slide-bg-zoom {
    background-size: 100% 100% !important; /* Fits the entire banner edge-to-edge */
    background-repeat: no-repeat !important;
    background-position: center center !important;
    animation: none !important;
    transform: none !important;
  }

  /* 3. Hide overlaid HTML text on mobile so it doesn't cover your banner graphics */
  .hero-content {
    display: none !important;
  }

  /* 4. Keep navigation arrows small and clean on mobile */
  .hero-bottom-controls {
    bottom: 8px !important;
    padding: 0 15px !important;
  }

  .ctrl-arrow-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }
}







/* 1. Remove Bootstrap's default navbar top & bottom padding */
.main-navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. Remove the 8px top/bottom padding from your logo (from line 5111) */
.brand-logo-area {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. Make the blue dock stretch 100% flush from top to bottom */
.main-navbar .container-fluid {
  align-items: stretch !important; /* Stretches the blue bar to touch top and bottom */
}

.nav-creative-dock {
  height: 100% !important;
  align-self: stretch !important;
}





/* 1. Force the blue dock to stretch to the exact bottom edge */
.nav-creative-dock {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
}

/* 2. Force the container to stretch full height */
.main-navbar .container-fluid {
  align-items: stretch !important;
}

/* 3. Remove Bootstrap's hidden padding on the logo link */
.brand-logo-area,
.brand-logo-area .navbar-brand {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 10px !important;
}




/* ==========================================
   FIXED BACK TO TOP BUTTON
   ========================================== */
.back-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 25px;
  width: 45px;
  height: 45px;
  background-color: #2b7fff; /* Your brand blue */
  color: #ffffff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  
  /* Hidden by default until scrolled down */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

/* Shown when scrolled */
.back-to-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover effect */
.back-to-top-btn:hover {
  background-color: #00b4d8; /* Cyan hover color */
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(43, 127, 255, 0.4);
}

/* Mobile: position above the bottom "Call / WhatsApp" bar */
@media (max-width: 767px) {
  .back-to-top-btn {
    bottom: 70px; /* Sits above the fixed mobile bottom bar */
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}









/* Force it to show when the class is added */
.back-to-top-btn.show {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  transform: translateY(0) !important;
  z-index: 999999 !important; /* Above all footers and popups */
}


/* 1. Native Smooth Scroll across the website */
html {
  scroll-behavior: smooth !important;
}

/* 2. Pure CSS animation that tracks scroll position */
@keyframes showOnScroll {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none;
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* 3. The Button (Driven 100% by CSS Scroll, ZERO JavaScript) */
.back-to-top-btn {
  position: fixed !important;
  bottom: 30px !important;
  right: 25px !important;
  width: 46px !important;
  height: 46px !important;
  background-color: #0088b5 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
  z-index: 999999 !important;
  cursor: pointer !important;

  /* THIS HIDES AT TOP & REVEALS ON SCROLL WITHOUT JAVASCRIPT */
  animation: showOnScroll linear both !important;
  animation-timeline: scroll(root) !important;
  animation-range: 0 250px !important;
}

.back-to-top-btn:hover {
  background-color: #00b4d8 !important;
  color: #ffffff !important;
}

/* Mobile positioning */
@media (max-width: 767px) {
  .back-to-top-btn {
    bottom: 75px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
  }


  .nav-creative-dock{
    display: none !important;  /* Hides the slanted dock on mobile */
  } 

  .top-promo-banner{
    display: none !important;  /* Hides the top promo banner on mobile */
  }
}








/* ===================================================
   FULL-WIDTH SLANTED AGRO FOOTER (EXACTLY LIKE THE CARD)
   =================================================== */

footer,
.site-footer,
.main-footer,
.footer-section,
.footer-area,
#footer {
  position: relative !important;
  color: #e2e8f0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  
  /* Space above so the slant doesn't cut into the section above */
  /* margin-top: 50px !important; */
  padding-top: 30px !important;

  border-radius: 0 !important;

  /* 1. THE SLANTED CUT (Full diagonal slant across the entire top, like the card) */
  clip-path: polygon(0 55px, 100% 0, 100% 100%, 0 100%) !important;

  /* 2. Natural Forest Green + Leaf Pattern */
  /* background: linear-gradient(180deg, #0c6bab 0%, #184b6f 100%) !important; */
  background-image: 
    linear-gradient(180deg, #0c6bab 0%, #184b6f 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M35 15 C22 28 22 45 35 58 C48 45 48 28 35 15 Z' fill='none' stroke='%232ecc71' stroke-width='1' stroke-opacity='0.05'/%3E%3Cline x1='35' y1='15' x2='35' y2='58' stroke='%232ecc71' stroke-width='0.8' stroke-opacity='0.05'/%3E%3C/svg%3E") !important; 
  background-repeat: repeat !important;
}

/* ===================================================
   3. GLOWING EMERALD LINE FOLLOWING THE SLANT
   =================================================== */
footer::before,
.site-footer::before,
.main-footer::before,
.footer-section::before,
.footer-area::before,
#footer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important;
  
  /* Straight emerald gradient line running along the diagonal slant */
  background: linear-gradient(90deg, #1e824c 0%, #2ecc71 50%, #1e824c 100%) !important;
  clip-path: polygon(0 55px, 100% 0, 100% 4px, 0 59px) !important;
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.9) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: none !important;
}

/* 4. Elegant Botanical Leaf Watermark */
footer::after,
.site-footer::after,
.main-footer::after,
.footer-section::after,
.footer-area::after,
#footer::after {
  content: "" !important;
  position: absolute !important;
  bottom: 30px !important;
  right: -20px !important;
  width: 220px !important;
  height: 220px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ecc71' stroke-width='1'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity: 0.05 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 5. Flush Bottom Copyright Bar */
footer [class*="copyright"],
footer .copyright-bar,
footer .footer-bottom,
.copyright-wrapper {
  background: rgba(4, 15, 10, 0.85) !important;
  border-top: 1px solid rgba(46, 204, 113, 0.15) !important;
  color: #a3b899 !important;
  padding: 14px 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ===================================================
   6. MOBILE VIEW
   =================================================== */
@media (max-width: 767px) {
  footer,
  .site-footer,
  .main-footer,
  .footer-section,
  .footer-area,
  #footer {
    padding-top: 55px !important;
    margin-top: 30px !important;
    clip-path: polygon(0 35px, 100% 0, 100% 100%, 0 100%) !important;
  }

  footer::before,
  .site-footer::before,
  .main-footer::before,
  .footer-section::before,
  .footer-area::before,
  #footer::before {
    height: 40px !important;
    clip-path: polygon(0 35px, 100% 0, 100% 3px, 0 38px) !important;
  }
}


/* ==========================================
   3-SLIDE INTERACTIVE TRACKERS
   ========================================== */
.slider-trackers {
  background: rgb(16 16 16 / 38%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 30px;
}

/* Individual Tracker Button */
.tracker-item {
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0.45;
  transition: all 0.3s ease;
}

.tracker-item:hover {
  opacity: 0.85;
}

/* Number (01, 02, 03) */
.tracker-num {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  font-family: inherit;
  transition: color 0.3s ease;
}

/* Horizontal Track Line */
.tracker-line {
  width: 25px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  transition: width 0.3s ease;
}

.tracker-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00b4d8, #2b7fff);
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* ACTIVE STATE: Expands width and glows cyan/blue */
.tracker-item.active {
  opacity: 1 !important;
}

.tracker-item.active .tracker-num {
  color: #38bdf8;
}

.tracker-item.active .tracker-line {
  width: 50px; /* Expands wider when active */
}

.tracker-item.active .tracker-fill {
  width: 100%;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .slider-trackers {
    padding: 4px 10px;
  }
  .tracker-item.active .tracker-line {
    width: 35px;
  }
}








/* ==========================================
   MINIMALIST EDITORIAL STACKING CARDS
   ========================================== */
.stacking-section {
  background-color: #f1f5f9;
  position: relative;
}

.pro-tagline {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #0284c7;
  display: block;
  margin-bottom: 8px;
}

.pro-main-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.5px;
}

/* Container */
.cards-stack-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 60px;
}

/* Base Card Style (No cluttered borders) */
.stack-card {
  position: sticky;
  /* border-radius: 20px; */
  padding: 44px 50px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.18),
              0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Cohesive Industrial Shades & Sticky Offsets */
.card-dark-1 { top: 110px; background-color: #0f172a; }
.card-dark-2 { top: 135px; background-color: #172554; }
.card-dark-3 { top: 160px; background-color: #0b2545; }
.card-dark-4 { top: 185px; background-color: #030712; }

/* Left Column Styling */
.border-end-subtle {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.pro-card-num {
  font-size: 32px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  font-family: monospace;
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}

.pro-card-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #38bdf8;
  display: block;
  margin-bottom: 12px;
}

.pro-card-metric {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}

/* Right Column Content */
.pro-card-title {
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 14px;
  color: #ffffff;
}

.pro-card-text {
  font-size: 15px;
  line-height: 1.7;
  color: #cbd5e1;
  margin: 0;
  font-weight: 400;
}

/* ==========================================
   MOBILE VIEW
   ========================================== */
@media (max-width: 991px) {
  .stack-card {
    padding: 30px 24px;
  }

  .border-end-subtle {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 16px;
    margin-bottom: 16px;
  }

  .card-dark-1 { top: 80px; }
  .card-dark-2 { top: 95px; }
  .card-dark-3 { top: 110px; }
  .card-dark-4 { top: 125px; }
}






/* ===================================================
   50/50 SPLIT SHOWCASE CARDS (IMAGE + RICH CONTENT)
   =================================================== */

/* Base Card Shell */
.split-card {
  position: sticky;
  /* border-radius: 20px; */
  padding: 36px 44px;
  
  /* Subtle light-blue tint gradient (Not plain white paper) */
  background: linear-gradient(135deg, #ffffff 0%, #f4f8fe 100%) !important;
  border: 1px solid #dbeafe !important;
  
  /* Soft blue ambient drop shadow */
  box-shadow: 0 -8px 25px rgba(2, 132, 199, 0.05),
              0 20px 45px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden;
}

/* Stacking Offsets */
.pro-card-1 { top: 105px; border-top: 1px solid #0284c7 !important; }
.pro-card-2 { top: 130px; border-top: 1px solid #0ea5e9 !important; }
.pro-card-3 { top: 155px; border-top: 1px solid #2563eb !important; }
.pro-card-4 { top: 180px; border-top: 1px solid #1d4ed8 !important; }

/* 1. Category Badge Row */
.card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.badge-accent {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 20px;
  display: inline-block;
}

.badge-sub-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #94a3b8;
}

/* 2. Headline & Paragraph */
.split-card-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.28;
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}

.split-card-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: #475569;
  margin-bottom: 24px;
}

/* 3. Structured Data Highlights (No plain text feel) */
.split-highlights {
  display: flex;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dot-accent {
  width: 8px;
  height: 8px;
  background-color: #0284c7;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.6);
}

.highlight-item strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.highlight-item small {
  display: block;
  font-size: 12px;
  color: #64748b;
}

/* 4. Right Side Image Card */
.split-img-wrapper {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  aspect-ratio: 16 / 11;
}

.split-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.split-card:hover .split-card-img {
  transform: scale(1.04);
}

.img-floating-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

/* ===================================================
   MOBILE VIEW
   =================================================== */
@media (max-width: 991px) {
  .split-card {
    padding: 24px 20px;
  }

  .split-highlights {
    flex-direction: column;
    gap: 12px;
  }

  .split-img-wrapper {
    aspect-ratio: 16 / 9;
    margin-top: 10px;
  }

  .pro-card-1 { top: 75px; }
  .pro-card-2 { top: 90px; }
  .pro-card-3 { top: 105px; }
  .pro-card-4 { top: 120px; }
}










/* ===================================================
   SHARPEX-STYLE ABOUT SECTION
   =================================================== */
.sharpex-about-section {
  background-color: #ffffff;
  padding: 60px 0;
}

/* ==========================================
   1. LEFT ORGANIC BLOB COMPOSITION
   ========================================== */
.organic-visual-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* The Main Photo Inside an Organic Liquid Blob */
.main-blob-img-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Organic Natural Blob Shape */
  border-radius: 46% 54% 63% 37% / 40% 48% 52% 60%;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  z-index: 3;
}

.blob-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.main-blob-img-card:hover .blob-photo {
  transform: scale(1.05);
}

/* Secondary Soft Green Background Blob */
.back-soft-blob {
  position: absolute;
  top: 15%;
  right: -25px;
  width: 75%;
  height: 75%;
  background: #1b85f1b5; /* Soft natural sage green */
  border-radius: 58% 42% 48% 52% / 51% 57% 43% 49%;
  z-index: 1;
  opacity: 0.75;
}

/* Diagonal Striped Decorative Circle */
.striped-circle-decor {
  position: absolute;
  top: 12%;
  right: 15px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: repeating-linear-gradient(
    45deg,
    #ffffff,
    #ffffff 4px,
    #e2ece6 4px,
    #e2ece6 12px
  );
  z-index: 2;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

/* Floating Gradient Pill Badge */
.working-since-badge {
  position: absolute;
  bottom: 25px;
  left: -15px;
  z-index: 5;
  background: var(--primary-color, #2ecc71);
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(27, 104, 64, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.badge-glow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff;
}

.badge-text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

/* ==========================================
   2. RIGHT CONTENT & ORBITAL RINGS
   ========================================== */

/* Orbital Tracking Ring with Green Dots */
.orbital-ring-wrap {
  position: absolute;
  top: 50%;
  right: -120px;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  pointer-events: none;
  z-index: 0;
}

.orbital-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgb(5 131 239 / 26%);
  position: relative;
}

/* Tracking Milestone Dots */
.orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #2e7ccc;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.8);
}

.dot-top {
  top: 15%;
  left: 20%;
}

.dot-bottom {
  bottom: 20%;
  right: 10%;
}

/* Line-art Icon at the Top */
.machinery-line-icon {
  font-size: 32px;
  color: var(--primary-color, #2ecc71); /* Sharpex Green */
}

/* Subtitle & Brand Headline */
.welcome-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #94a3b8;
  margin-bottom: 4px;
}

.sharpex-brand-title {
  font-size: 1.7rem;
  font-weight: 900;
  color: #0f172a; /* Bold dark slate */
  letter-spacing: -0.5px;
  line-height: 1.15;
}

.accent-word {
  color: var(--primary-color, #2ecc71); /* Dynamic accent color */
}

/* Story Blocks */
.story-block {
  position: relative;
  z-index: 2;
}

.story-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
  line-height: 1.4;
}

.story-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 16px;
  text-align: justify;
}

/* ==========================================
   MOBILE RESPONSIVENESS
   ========================================== */
@media (max-width: 991px) {
  .orbital-ring-wrap {
    display: none; /* Hide decorative background circle on small tablets/phones */
  }

  .organic-visual-wrap {
    max-width: 380px;
    margin-bottom: 30px;
  }

  .working-since-badge {
    left: 10px;
    bottom: 10px;
    padding: 8px 18px;
  }
}










/* ==========================================
   BEAUTIFUL SLIM SCROLLBAR FOR ABOUT CONTENT
   ========================================== */
.about-scrollable-content {
  max-height: 330px;              /* Keeps height balanced with the left image */
  overflow-y: auto;               /* Enables vertical scroll */
  padding-right: 16px;            /* Prevents text from touching scrollbar */
  
  /* Firefox Support */
  scrollbar-width: thin;
  scrollbar-color: #2ecc71 #f1f5f9;
}

/* Chrome, Edge, Safari Scrollbar */
.about-scrollable-content::-webkit-scrollbar {
  width: 5px;                     /* Slim & elegant */
}

/* Scrollbar Track (Background line) */
.about-scrollable-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}

/* Scrollbar Thumb (Green Gradient pill) */
.about-scrollable-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1b6840 0%, #2ecc71 100%);
  border-radius: 10px;
}

.about-scrollable-content::-webkit-scrollbar-thumb:hover {
  background: #1b6840;
}



/* Scrollable content with HIDDEN scrollbar */
.about-scrollable-content {
  max-height: 330px;              /* Sets the scroll height */
  overflow-y: auto;               /* Allows scrolling */
  
  /* Hides scrollbar on Firefox & IE/Edge */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hides scrollbar on Chrome, Safari, and Edge */
.about-scrollable-content::-webkit-scrollbar {
  display: none;
}





/* ===================================================
   CREATIVE SHOWROOM STAGE PRODUCT CARDS (CSS ONLY)
   =================================================== */

/* 1. Asymmetric Industrial Shield Card */
.product-modern-card {
  background: #ffffff;
  position: relative;
  display: flex;
  flex-direction: column;
  
  /* Asymmetric Curves (Top-Left & Bottom-Right are curved, others sharp) */
  border-radius: 26px 6px 26px 6px;
  
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

/* Hover: Lifts Up + Glowing Accent Border */
.product-modern-card:hover {
  transform: translateY(-8px);
  border-color: #0084d6;
  box-shadow: 0 20px 45px rgba(0, 132, 214, 0.16);
}

/* 2. Machine Showcase Stage (Spotlight + Slanted Diagonal Bottom) */
.product-img-holder {
  /* Radial spotlight makes the machine pop like in a showroom */
  background: radial-gradient(circle at center, #ffffff 40%, #eef5fc 100%);
  height: 235px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 36px 20px;
  position: relative;
  
  /* DYNAMIC ANGLED SLICE separating image from text */
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  transition: all 0.35s ease;
}

.product-img-holder img {
  max-height: 100%;
  max-width: 100%;
  object-fit: fill;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.08));
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Machine floats up on hover */
.product-modern-card:hover .product-img-holder img {
  transform: translateY(-6px) scale(1.08);
}

/* 3. Text & Content Area */
.product-content-holder {
  padding: 18px 24px 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

/* Title */
.product-card-title {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.product-modern-card:hover .product-card-title {
  color: #0084d6;
}

/* Description */
.product-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #64748b;
  margin-bottom: 24px;
  flex-grow: 1;
}

/* 4. Action Button with Dynamic Arrow Shift */
.btn-view-details {
  background: linear-gradient(135deg, #0084d6 0%, #006eb3 100%);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 26px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  box-shadow: 0 4px 14px rgba(0, 132, 214, 0.32);
  transition: all 0.3s ease;
}

.btn-view-details:hover {
  background: linear-gradient(135deg, #0096e6 0%, #0084d6 100%);
  box-shadow: 0 6px 20px rgba(0, 132, 214, 0.45);
  transform: scale(1.03);
}

.btn-view-details i {
  transition: transform 0.25s ease;
}

.btn-view-details:hover i {
  transform: translateX(4px);
}






/* ===================================================
   DUAL SLANTED PROCESS SECTION (TOP & BOTTOM CUTS)
   =================================================== */

.process-section {
  position: relative !important;
  /* margin-top: 45px !important; */
  /* margin-bottom: 45px !important; 
  padding-top: 85px !important; */
  padding-bottom: 85px !important; /* Space so content doesn't get cut at the bottom */
  border-radius: 0 !important;

  /* 1. DUAL PARALLEL DIAGONAL SLANTS (TOP & BOTTOM) */
  clip-path: polygon(
    0 55px,                     /* Top-Left */
    100% 0,                     /* Top-Right */
    100% calc(100% - 55px),     /* Bottom-Right slant */
    0 100%                      /* Bottom-Left slant */
  ) !important;
}

/* ===================================================
   2. TOP GLOWING LASER LINE
   =================================================== */
.process-section::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important;
  
  /* Top Neon-Mint line */
  /* background: linear-gradient(90deg, #00b4d8 0%, #00e5a3 50%, #00b4d8 100%) !important; */
  clip-path: polygon(0 55px, 100% 0, 100% 4px, 0 59px) !important;
  box-shadow: 0 0 25px rgba(0, 229, 163, 0.9) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  
}

/* ===================================================
   3. BOTTOM GLOWING LASER LINE
   =================================================== */
.process-section::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important;
  
  /* Bottom Neon-Mint line */
  /* background: linear-gradient(90deg, #00b4d8 0%, #00e5a3 50%, #00b4d8 100%) !important; */
  clip-path: polygon(0 56px, 100% 1px, 100% 5px, 0 60px) !important;
  box-shadow: 0 0 25px rgba(0, 229, 163, 0.9) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* ===================================================
   4. MOBILE VIEW
   =================================================== */
@media (max-width: 767px) {
  .process-section {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
    /* margin-top: 30px !important; */
    margin-bottom: 30px !important;
    clip-path: polygon(
      0 35px, 
      100% 0, 
      100% calc(100% - 35px), 
      0 100%
    ) !important;
  }

  .process-section::before {
    height: 40px !important;
    clip-path: polygon(0 35px, 100% 0, 100% 3px, 0 38px) !important;
  }

  .process-section::after {
    height: 40px !important;
    clip-path: polygon(0 37px, 100% 2px, 100% 5px, 0 40px) !important;
  }
}










/* ===================================================
   PRODUCT CARD (PERMANENT SOLID BUTTON AT ALL TIMES)
   =================================================== */

/* 1. Asymmetric Card */
.product-item-card {
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border-radius: 26px 6px 26px 6px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: all 0.35s ease !important;
}

.product-item-card:hover {
  transform: translateY(-8px) !important;
  border-color: #0084d6 !important;
  box-shadow: 0 18px 40px rgba(0, 132, 214, 0.18) !important;
}

/* 2. Slanted Image Box */
.product-item-card .prod-img-box {
  background: radial-gradient(circle at center, #ffffff 40%, #eef5fc 100%) !important;
  height: 230px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 20px 36px 20px !important;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%) !important;
}

.product-item-card .prod-img-box img {
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: fill !important;
  transition: transform 0.4s ease !important;
}

.product-item-card:hover .prod-img-box img {
  transform: scale(1.08) translateY(-4px) !important;
}

/* 3. Details Container (Separates title and button) */
.product-item-card .prod-details {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 20px 20px 26px 20px !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
  gap: 0px !important;
  background: #69acf136 !important;
  border: none !important;
}

/* 4. Product Name */
.product-item-card .prod-name {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  transition: color 0.3s ease !important;
}

.product-item-card:hover .prod-name {
  color: #0084d6 !important;
}

/* ===================================================
   5. PERMANENT SOLID BLUE BUTTON (ALWAYS VISIBLE)
   =================================================== */
.btn-view-details {
  background: #0084d6 !important;
  color: #ffffff !important;
  padding: 11px 30px !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 132, 214, 0.35) !important;
  transition: all 0.3s ease !important;
  margin-top: auto !important;     /* Locks to its own bottom row */
  opacity: 1 !important;          /* Always visible */
  visibility: visible !important;
}

/* On hover, just a small smooth lift (button doesn't appear/disappear) */
.product-item-card:hover .btn-view-details {
  background: #006eb3 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 132, 214, 0.5) !important;
}

.btn-view-details i {
  transition: transform 0.25s ease !important;
}

.product-item-card:hover .btn-view-details i {
  transform: translateX(4px) !important;
}

/* Kills any old CSS generated text */
.prod-explore-arrow::before,
.btn-view-details::before {
  content: none !important;
}










/* ===================================================
   LIVE MACHINERY SIMULATION STYLING & ANIMATIONS
   =================================================== */
/* Blue Live Radar Badge */
.live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.25);
  padding: 5px 14px;
  border-radius: 30px;
}

.live-radar-dot {
  width: 8px;
  height: 8px;
  background-color: #0284c7;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7);
  animation: liveRadarGlow 1.6s infinite;
}

@keyframes liveRadarGlow {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7); }
  70%  { transform: scale(1); box-shadow: 0 0 0 8px rgba(2, 132, 199, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); }
}

.live-status-text {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #0284c7;
}

/* Blueprint Card Container */
.blueprint-canvas-card {
  background: #ffffffc7;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 14px;
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.06);
}
.machine-live-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ===================================================
   4. REAL-TIME CSS MECHANICAL KEYFRAMES
   =================================================== */

/* A. Main Flywheel: Spins Clockwise Continuously */

/* ===================================================
   COMPLETE WORKING MECHANICAL ANIMATIONS (SLOW & SMOOTH)
   =================================================== */

/* 1. Main Large Flywheel (Slow 10s rotation) */
.anim-spin-slow {
  animation: spinMechanicalClockwise 10s linear infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}

/* 2. Small Motor Gear (Sync 3.5s rotation) */
.anim-spin-fast {
  animation: spinMechanicalClockwise 3.5s linear infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}

/* ROTATION ENGINE (Must be included!) */
@keyframes spinMechanicalClockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 3. Drive Belt Motion */
.anim-belt-track {
  animation: beltLoop 1.5s linear infinite !important;
}

@keyframes beltLoop {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 28;
  }
}

/* 4. Screw Conveyor / Auger (Smooth Material Feed) */
.anim-screw-feed {
  animation: augerShift 2.5s linear infinite !important;
}

@keyframes augerShift {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 60;
  }
}

/* 5. Extruded Briquette Bar (Slow industrial push) */
.anim-extrude-feed {
  animation: extrudeSlide 6s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

@keyframes extrudeSlide {
  0% {
    transform: translateX(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(18px);
    opacity: 1;
  }
  90% {
    transform: translateX(36px);
    opacity: 1;
  }
  100% {
    transform: translateX(45px);
    opacity: 0;
  }
}




/* 1. Add background image and overlay to the live machine section */
.live-machine-section {
  position: relative;
  /* Replace with your image path */
  background-image: url('images/machinery-bg.webp') !important; 
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: 1;
}

/* 2. Soft overlay so the SVG machinery drawing & text stay clear */
.live-machine-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Light overlay (change 0.90 to 0.80 if you want the image darker/more visible) */
  background-color: rgb(26 25 25 / 35%); 
  z-index: 0;
  pointer-events: none;
}

/* 3. Make sure the container content sits above the overlay */
.live-machine-section .container {
  position: relative;
  z-index: 2;
}








/* ===================================================
   OVERLAPPING CIRCULAR TIMELINE (WEBSITE BLUE THEME)
   =================================================== */

.about-timeline-section {
  background-color: #fafcff; /* Subtle cool ice-blue backdrop */
  padding: 60px 0;
}

/* Header */
.timeline-sub-badge {
  display: inline-block;
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 5px 16px;
  border-radius: 30px;
  margin-bottom: 12px;
}

.timeline-main-title {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.5px;
}

.text-brand-blue {
  color: #0284c7 !important;
}

/* ==========================================
   THE OVERLAPPING CIRCLES CHAIN (DESKTOP)
   ========================================== */
.timeline-circles-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 30px 10px;
}

/* Individual Circle Item */
.circle-card-item {
  flex: 0 0 285px;
  max-width: 285px;
  position: relative;
  transition: transform 0.35s ease, z-index 0.35s ease;
}

/* Negative margin creates the overlapping chain effect */
.circle-card-item:not(:first-child) {
  margin-left: -35px; /* Overlaps with previous circle */
}

/* Stacking order */
.circle-card-item:nth-child(1) { z-index: 1; }
.circle-card-item:nth-child(2) { z-index: 2; }
.circle-card-item:nth-child(3) { z-index: 3; }
.circle-card-item:nth-child(4) { z-index: 4; }

/* The Circle Shape */
.circle-inner-card {
  width: 285px;
  height: 285px;
  border-radius: 50%; /* Perfect Circle */
  background: #ffffff;
  
  /* Subtle blue border & ambient shadow */
  border: 1.5px solid rgba(2, 132, 199, 0.22);
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.08);
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 28px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover: Lifts up and illuminates in your brand blue */
.circle-card-item:hover {
  z-index: 10 !important;
  transform: translateY(-8px);
}

.circle-card-item:hover .circle-inner-card {
  border-color: #0284c7;
  box-shadow: 0 16px 40px rgba(2, 132, 199, 0.22);
}

.about-heading{
  font-size:2rem;
  color:#fff;
}

/* Top Dark Pill (Step / Year Badge) */
.step-pill {
  background: var(--primary-color, #0284c7); /* Dark sleek pill */
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 5px 16px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 12px;
  transition: background-color 0.3s ease;
}

.circle-card-item:hover .step-pill {
  background: #0284c7; /* Turns blue on hover */
}

/* Title */
.step-title {
  font-size: 18px;
  font-weight: 800;
  color: #000;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Description */
.step-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
  max-width: 215px;
}

/* ==========================================
   MOBILE & TABLET RESPONSIVENESS
   ========================================== */
@media (max-width: 1199px) and (min-width: 992px) {
  .circle-card-item {
    flex: 0 0 240px;
    max-width: 240px;
  }
  .circle-inner-card {
    width: 240px;
    height: 240px;
    padding: 18px 20px;
  }
  .step-title { font-size: 16px; }
  .step-desc { font-size: 11.5px; max-width: 180px; }
  .circle-card-item:not(:first-child) { margin-left: -25px; }
}

@media (max-width: 991px) {
  .timeline-circles-wrapper {
    flex-wrap: wrap;
    gap: 20px;
  }
  .circle-card-item {
    flex: 0 0 270px;
    max-width: 270px;
    margin-left: 0 !important; /* No overlap on mobile/tablets */
  }
  .circle-inner-card {
    width: 270px;
    height: 270px;
  }

  .blueprint-canvas-card{
    margin-bottom:10px;
  }
}






.proocess-section-1 .step-title{
  color:#fff;
}

.proocess-section-1 .step-desc{
  color:#fff;
  max-width: 100% !important;
  text-align: start;
}








/* Fixed height and scrollbar for the dropdown */
.nav-item.dropdown .dropdown-menu {
  max-height: 50vh !important;       /* Exactly half the screen height */
  overflow-y: auto !important;       /* Enables vertical scrolling */
  overflow-x: hidden !important;     /* Prevents horizontal overflow */
  overscroll-behavior: contain;      /* Prevents body scroll when reaching the end */
}

/* --- Sleek Custom Scrollbar Design --- */
/* Scrollbar width */
.nav-item.dropdown .dropdown-menu::-webkit-scrollbar {
  width: 5px;
}

/* Scrollbar Track (Background) */
.nav-item.dropdown .dropdown-menu::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}

/* Scrollbar Thumb (Scroller) */
.nav-item.dropdown .dropdown-menu::-webkit-scrollbar-thumb {
  background: #027be3;               /* Brand Primary Blue */
  border-radius: 10px;
}

/* Scrollbar Thumb on Hover */
.nav-item.dropdown .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #025cb0;
}

/* Firefox Support */
.nav-item.dropdown .dropdown-menu {
  scrollbar-width: thin;
  scrollbar-color: #027be3 #f1f5f9;
}









/* When sticky is active */
.main-navbar.is-stuck {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  animation: slideDownNav 0.3s ease forwards;
}

@keyframes slideDownNav {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}







/* 1. When NOT hovered: completely hide and disable mouse interaction */
.nav-item.dropdown .dropdown-menu {
  display: none !important;            
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;    
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateY(10px);
}


.nav-item.dropdown:hover > .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;    
  transform: translateY(0);
}


.nav-item.dropdown {
  position: relative !important;
  height: auto !important;
}



.nav-item.dropdown .dropdown-menu {
  margin-top: 0 !important;      
  top: 100% !important;         
}


.nav-item.dropdown .dropdown-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -15px !important;         
  left: 0 !important;
  width: 100% !important;
  height: 15px !important;
  background: transparent !important; 
  display: block !important;
}


.nav-item.dropdown:hover > .dropdown-menu {
  transition-delay: 0s;
}

.nav-item.dropdown .dropdown-menu {
  transition: opacity 0.2s ease, visibility 0.2s ease;
  transition-delay: 0.15s;      
}








/* ================= Technical Specs Section ================= */
.product-tech-specs-section {
  background-color: #f8fafc;
  position: relative;
}

.spec-badge {
  display: inline-block;
  padding: 6px 18px;
  background-color: #e3f2fd;
  color: #027be3;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  border-radius: 50px;
}

.spec-main-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: #0f172a;
}

.text-primary-color {
  color: #027be3 !important;
}

.spec-subtitle {
  max-width: 600px;
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Outer Card Container */
.spec-showcase-wrapper {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  padding: 40px;
  transition: all 0.3s ease;
}

/* Image Box */
.spec-img-box {
  position: relative;
  background: #f1f5f9;
  border-radius: 20px;
  padding: 30px;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  min-height: 380px;
}

.spec-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  z-index: 2;
}

.spec-img-inner img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.spec-showcase-wrapper:hover .spec-img-inner img {
  transform: scale(1.04);
}

/* Content Area */
.product-sku-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #027be3;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.spec-product-name {
  font-size: 1.7rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 12px;
}

.spec-short-desc {
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.6;
}

/* ================= Modern Spec Matrix Grid ================= */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.spec-item {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  padding: 12px 18px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.spec-item:hover {
  background: #ffffff;
  border-color: #027be3;
  box-shadow: 0 6px 15px rgba(2, 123, 227, 0.08);
  transform: translateY(-2px);
}

.spec-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.spec-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
}

.highlight-val {
  color: #027be3;
}

/* ================= Action Buttons ================= */
.spec-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.btn-spec-quote {
  background-color: #027be3;
  color: #ffffff;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(2, 123, 227, 0.3);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.btn-spec-quote:hover {
  background-color: #0263b8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(2, 123, 227, 0.4);
}

.btn-spec-download {
  background-color: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.btn-spec-download:hover {
  background-color: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
  .spec-grid {
    grid-template-columns: 1fr;
  }
  .spec-showcase-wrapper {
    padding: 24px;
  }
}








/* ================= Modern Dark Page Banner ================= */
.page-banner {
  position: relative;
  /* Replace 'images/banner-bg.webp' with your actual image path */
  background: 
    linear-gradient(135deg, rgb(45 134 194 / 21%) 0%, rgb(12 26 36 / 72%) 100%), url(../frontend/images/breadcumb.webp) center center / cover no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  object-position: top;
  overflow: hidden;
  z-index: 1;
  
}

/* Ensure content stays clearly above all background layers */
.page-banner .container {
  position: relative;
  z-index: 2;
}

/* Subtle Dotted Matrix Texture Overlay */
.banner-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
  pointer-events: none;
}

/* Top Badge with Glowing Dot */
.banner-tag-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(2, 123, 227, 0.12);
  border: 1px solid rgba(2, 123, 227, 0.35);
  padding: 5px 14px;
  border-radius: 30px;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  background-color: #00d26a; /* High-tech vivid green */
  border-radius: 50%;
  box-shadow: 0 0 10px #00d26a;
}

.banner-tag {
  color: #38bdf8; /* Cyan blue accent */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}

/* Title Styling with Vibrant Gradient Accent */
.banner-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.banner-title-highlight {
  background: linear-gradient(135deg, #027be3 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Description Text */
.banner-desc {
  max-width: 620px;
  color: #94a3b8; /* Soft readable slate gray */
  font-size: 1rem;
  line-height: 1.65;
}

/* ================= Breadcrumb Pill Design ================= */
.breadcrumb-container {
  display: inline-block;
}

.custom-breadcrumb {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.custom-breadcrumb .breadcrumb-item {
  font-size: 0.88rem;
  font-weight: 600;
}

.custom-breadcrumb .breadcrumb-item a {
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.25s ease;
}

.custom-breadcrumb .breadcrumb-item a:hover {
  color: #38bdf8;
}

.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: rgba(255, 255, 255, 0.25);
  padding: 0 10px;
}

.custom-breadcrumb .breadcrumb-item.active {
  color: #38bdf8;
  font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .banner-title {
    font-size: 2.1rem;
  }
  .page-banner {
    padding: 35px 0;
  }
}







/* ================= Universal Clean Dynamic Table ================= */
.wrapped-content table {
  width: 100% !important;
  margin: 25px 0 !important;
  border-collapse: collapse !important;
  background-color: #c9c9dc !important;
  border: 1px solid #c9c9dc !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Ensure clean, crisp borders on all cells */
.wrapped-content table td,
.wrapped-content table th {
  padding: 12px 18px !important;
  vertical-align: middle !important;
  border: 1px solid #e9ecef !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

/* First Column: Clean bold title look (works with any content) */
.wrapped-content table tr td:first-child {
  font-weight: 600 !important;
  color: #1e293b !important;
  background-color: #f8fafc !important; /* Soft neutral gray background */
}

/* Overwrite any annoying inline colored spans coming from rich-text */
.wrapped-content table tr td:first-child * {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* Other Columns: Clean neutral readable text */
.wrapped-content table tr td:not(:first-child) {
  color: #475569 !important;
  background-color: #ffffff !important;
}

/* Subtle interactive hover on rows */
.wrapped-content table tr:hover td {
  background-color: #f1f7fc !important;
}







/* ================= Clean Modern Table inside Product Description ================= */
.product-description table {
  width: 100% !important;
  margin: 20px 0 !important;
  border-collapse: collapse !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

/* Ensure clean grid lines between cells */
.product-description table td,
.product-description table th {
  padding: 10px 16px !important;
  vertical-align: middle !important;
  border: 1px solid #edf2f7 !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  /* Fix text alignment */
  text-align: left !important; 
}

/* First Column: Specification Key / Parameter */
.product-description table tr td:first-child {
  font-weight: 600 !important;
  color: #1e293b !important;
  background-color: #f8fafc !important; /* Soft light grey background */
  width: 40% !important;                 /* Gives clean 40/60 balance */
}

/* First Column Child Elements (Overrides any rich-text spans) */
.product-description table tr td:first-child * {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* Second Column: Specification Value */
.product-description table tr td:last-child {
  color: #475569 !important;
  font-weight: 500 !important;
  background-color: #ffffff !important;
}

/* Row Hover Effect */
.product-description table tr:hover td {
  background-color: #f1f7fc !important;
}

/* Ensures table scrolls horizontally on small screens without breaking layout */
.product-description {
  overflow-x: auto;
}







/* Modern Elevated Showcase Box */
.related-product-image {
  position: sticky !important;
  top: 100px !important;
  background: radial-gradient(circle, #ffffff 30%, #f0f7fd 100%) !important;
  border: 1.5px solid #dbeafe !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(2, 123, 227, 0.08) !important;
  padding: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease;
}

.related-product-image:hover {
  box-shadow: 0 15px 35px rgba(2, 123, 227, 0.15) !important;
  border-color: #027be3 !important;
}

.related-product-image img {
  max-height: 340px !important;
  object-fit: contain !important;
  transition: transform 0.4s ease;
}

.related-product-image:hover img {
  transform: scale(1.05); /* Smooth micro-zoom */
}




.contact-visual-wrapper {
  background-image: 
  linear-gradient(180deg, rgb(28 25 55 / 66%) 0%, rgb(19 19 20 / 45%) 100%), url(../images/contact-bg-2.webp) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Make sure the inner overlay doesn't block it with a solid color */
.contact-visual-wrapper .contact-bg-overlay {
  display: none !important;
}








/* ================= Modern Glass Split Blog Cards (Matching Reference) ================= */
.latest-blogs-section {
  background-color: #f8fafc;
}

.modern-split-blog-card {
  position: relative;
  display: block;
  height: 250px;                      /* Uniform height matching the reference screenshot */
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none !important;
  background-color: #0f172a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modern-split-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(2, 123, 227, 0.2);
  border-color: #027be3;
}

/* Background Image Container */
.blog-card-bg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modern-split-blog-card:hover .blog-card-img {
  transform: scale(1.08);
}

/* Glass Floating Content Box (Overlaid Right Half) */
.blog-glass-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;                         /* Covers the right side of the card */
  /* Elegant dark translucent frosted glass */
  background: linear-gradient(
    135deg, 
    rgba(15, 23, 42, 0.88) 0%, 
    rgba(15, 23, 42, 0.75) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  transition: background 0.35s ease;
}

/* On hover, tint with subtle brand blue */
.modern-split-blog-card:hover .blog-glass-panel {
  background: linear-gradient(
    135deg, 
    rgba(2, 123, 227, 0.90) 0%, 
    rgba(15, 23, 42, 0.85) 100%
  );
}

/* Blog Title Inside Glass Panel */
.blog-panel-title {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 14px;
  /* Truncates at 3 lines cleanly for dynamic titles */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Action Read More Button */
.blog-panel-btn {
  display: inline-flex;
  align-items: center;
  color: #38bdf8;                     /* Cyan light blue accent */
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
}

.blog-panel-btn i {
  transition: transform 0.3s ease;
}

.modern-split-blog-card:hover .blog-panel-btn {
  color: #ffffff;
}

.modern-split-blog-card:hover .blog-panel-btn i {
  transform: translateX(6px);
}

/* Bottom "Read All Blogs" Button */
.btn-read-all-blogs {
  display: inline-flex;
  align-items: center;
  background-color: #027be3;
  color: #ffffff !important;
  font-weight: 700;
  padding: 12px 30px;
  border-radius: 50px;
  box-shadow: 0 4px 18px rgba(2, 123, 227, 0.3);
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.btn-read-all-blogs:hover {
  background-color: #0263b8;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(2, 123, 227, 0.4);
}

.btn-arrow-bubble {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  font-size: 0.75rem;
}







/* ================= Professional Machinery Blog Card ================= */
.agro-blog-card {
  display: flex;
  flex-direction: column;
  height: 330px;                       /* Fixed clean height */
  background: #ffffff;
  border-radius: 18px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  text-decoration: none !important;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

.agro-blog-card:hover {
  transform: translateY(-8px);
  border-color: #027be3;
  box-shadow: 0 16px 35px rgba(2, 123, 227, 0.15);
}

/* Image Container - Machine is 100% visible, not cut off */
.agro-blog-img-box {
  width: 100%;
  height: 190px;
  background-color: #6fb1f31a;           /* Soft clean background */
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid #f1f5f9;
}

.agro-blog-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: fill;                 /* NEVER cuts off the machinery */
  transition: transform 0.45s ease;
}

.agro-blog-card:hover .agro-blog-img-box img {
  transform: scale(1.08);              /* Smooth zoom on hover */
}

/* Bottom Information Area */
.agro-blog-info {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #69b0ed40;
  transition: background-color 0.3s ease;
}

.agro-blog-card:hover .agro-blog-info {
  background-color: #f0f7fe;           /* Soft light blue tint on hover */
}

/* Blog Title */
.agro-blog-title {
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  /* Clamps to 2 lines cleanly */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.agro-blog-card:hover .agro-blog-title {
  color: #027be3;
}

/* Bottom Action Link */
.agro-blog-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  color: #2d7be8;
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 0.3s ease;
}

.agro-blog-card:hover .agro-blog-action {
  color: #027be3;
}

/* Circular Arrow Icon */
.action-circle {
  width: 28px;
  height: 28px;
  background-color: #f1f5f9;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0.75rem;
  transition: all 0.3s ease;
}

.agro-blog-card:hover .action-circle {
  background-color: #027be3;
  color: #ffffff;
  transform: translateX(4px);
}






/* ================= Blog Listing Light Blue Card ================= */
.blog-listing-section {
  background-color: #f8fafc;
}

.agro-listing-blog-card {
  display: flex;
  flex-direction: column;
  height: 340px;
  /* Soft Light Blue Background Theme */
  background: #f0f7fe;
  border-radius: 20px;
  border: 1.5px solid #dbeafe;
  box-shadow: 0 6px 20px rgba(2, 123, 227, 0.05);
  text-decoration: none !important;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

.agro-listing-blog-card:hover {
  transform: translateY(-8px);
  background: #e3f2fd;
  border-color: #027be3;
  box-shadow: 0 16px 35px rgba(2, 123, 227, 0.16);
}

/* Image Frame: White backing so machinery looks clean */
.blog-img-frame {
  width: 100%;
  height: 200px;
  background-color: #ffffff;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid #e2e8f0;
}

.blog-img-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;          /* 100% visible, never cut off */
  transition: transform 0.45s ease;
}

.agro-listing-blog-card:hover .blog-img-frame img {
  transform: scale(1.08);
}

/* Bottom Content Panel */
.blog-details-panel {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-card-heading {
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.agro-listing-blog-card:hover .blog-card-heading {
  color: #027be3;
}

/* Action Link */
.blog-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  color: #027be3;
  font-size: 0.9rem;
  font-weight: 700;
}

.circle-arrow {
  width: 30px;
  height: 30px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #027be3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.agro-listing-blog-card:hover .circle-arrow {
  background-color: #027be3;
  color: #ffffff;
  transform: translateX(4px);
}

/* Load More Button */
.btn-load-more-blogs {
  display: inline-flex;
  align-items: center;
  background-color: #027be3;
  color: #ffffff;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 34px;
  border-radius: 50px;
  box-shadow: 0 4px 18px rgba(2, 123, 227, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-load-more-blogs:hover {
  background-color: #0263b8;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(2, 123, 227, 0.4);
}







/* ================= Clean Float Image for Blog Article ================= */
.article-featured-img {
  float: left !important;
  width: 320px !important;              /* Fixes the oversized image problem */
  max-width: 45% !important;
  margin-right: 25px !important;        /* Space between image and text on right */
  margin-bottom: 20px !important;       /* Space between image and text below */
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.article-featured-img img {
  width: 100% !important;
  height: 240px !important;
  object-fit: contain !important;       /* Keeps whole machine visible without stretching */
  display: block;
}

/* Ensure clean typography flow */
.article-body-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #334155;
}

.article-body-content h2{
  text-align: start !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
}
/* Responsive: stack naturally on mobile phones */
@media (max-width: 768px) {
  .article-featured-img {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
  }
  
  .article-featured-img img {
    height: 200px !important;
  }
}

.speak-engineers{
  color: #025cb0 !important;
  transition: all ease 1s;
  border: none !important;
}
.speak-engineers:hover{
  color: #fff !important;
  background-color: #0088b5;
  border: none !important;
}





@media (max-width: 992px) {

  .about-heading{
    font-size: 1.5rem;
  }

  .timeline-main-title{
    font-size: 1.5rem;
  }

  .category-main-title{
    font-size: 1.7rem;
  }

  .vibrant-heading{
    font-size: 1.5rem !important;
  }
}




/* ================= Top Contact & Social Bar ================= */
.top-info-bar {
  background-color: #ffffff;
  border-bottom: 1px solid #edf2f7;
  font-size: 0.85rem;
  position: relative;
  z-index: 1025;
}

/* Contact Links */
.top-contact-link {
  color: #000;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: color 0.25s ease;
}

.top-contact-link:hover {
  color: #027be3;
}

.top-contact-link i {
  font-size: 0.9rem;
}

/* Brand Primary Color */
.text-primary-color {
  color: #027be3 !important;
}

/* Social Icons */
.social-label {
  color: #000;
  font-weight: 600;
  font-size: 0.8rem;
}

.social-icon {
  width: 34px;
  height: 34px;
  background-color: #027be3;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.social-icon:hover {
  background-color: #027be6;
  border-color: #027be3;
  color: #ffffff;
  transform: translateY(-2px);
}