.hero-slider {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}



.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: translateX(100%);
  transition: transform 1s ease-in-out;
  z-index: 1;
}

.hero-slide.active {
  transform: translateX(0);
  z-index: 2;
}

.hero-slide.exit-left {
  transform: translateX(-100%);
  z-index: 1;
}

.hero-slide::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,0.6); }

.z-2 { position: relative; z-index: 2; }

.hero-dots { position:absolute; bottom:30px; width:100%; text-align:center; z-index:3; }
.hero-dots .dot { display:inline-block; width:12px; height:12px; margin:0 6px; background:rgba(255,255,255,0.4); border-radius:50%; cursor:pointer; transition:0.3s;}
.hero-dots .dot.active { background:#ffc107; transform:scale(1.2); }

.hero-slider h1 { font-size: clamp(2.2rem,4vw,3.5rem); text-shadow:1px 1px 6px rgba(0,0,0,0.7);}
.hero-slider p { font-size: clamp(1rem,1.5vw,1.25rem); text-shadow:1px 1px 6px rgba(0,0,0,0.7);}

@media (max-width: 576px) {
  .hero-slider {
    min-height: 100svh;
    padding: 2rem 1rem;
  }
}

/* =========================
   SCROLLBAR HIDE (OPTIONAL)
   ========================= */
/* html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
} */

/* ABOUT SECTION */
.about-section {
  background: #f5f6f8;
}

/* IMAGE GRID WRAPPER */
.about-image-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* IMAGE BOX */
.about-image-grid .img-box {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  padding: 6px; /* white frame like image */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease;
}

/* IMAGE */
.about-image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* ANGLED EFFECT (like your image) */
/* .img-1 {
  transform: rotate(-3deg);
}
.img-2 {
  transform: rotate(2deg);
}
.img-3 {
  transform: rotate(1deg);
}
.img-4 {
  transform: rotate(-2deg);
} */

/* HOVER EFFECT */
/* .about-image-grid .img-box:hover {
  transform: rotate(0deg) scale(1.04);
  z-index: 2;
} */

/* RESPONSIVE */
@media (max-width: 991px) {
  .about-image-grid {
    grid-template-columns: 1fr;
  }

  .about-image-grid .img-box {
    transform: none !important;
  }
}

/* .about-image-grid::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  width: 4px;
  height: 120%;
  background: #ffffff;
  transform: rotate(10deg);
  z-index: 1;
} */

/* =====================================================
   CONVEYOR CHAINS – BACKGROUND IMAGE SLIDER CARD
   ===================================================== */

/* Main card */
.conveyor-chains {
  position: relative;
  background-color: transparent !important; /* override Bootstrap white */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  overflow: hidden;
  transition: background-image 1s ease-in-out;
}

/* Dark overlay for readability */
.conveyor-chains::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

/* Card content above overlay */
.conveyor-chains .card-body {
  position: relative;
  z-index: 1;
}

/* Icon styling */
.conveyor-chains i {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* Heading */
.conveyor-chains h5 {
  color: #ffffff;
  font-weight: 600;
  margin-top: 1rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* Paragraph text */
.conveyor-chains p {
  color: #f1f1f1;
  margin-bottom: 0.35rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Optional: subtle zoom animation for premium look */
/* .conveyor-chains {
  animation: chainZoom 18s infinite alternate;
} */

@keyframes chainZoom {
  from {
    background-size: 100%;
  }
  to {
    background-size: 110%;
  }
}

/* Optional hover effect */
/* .conveyor-chains:hover::before {
  background: rgba(0, 0, 0, 0.5);
} */

/* =====================================================
   BULK MATERIAL HANDLING – BACKGROUND IMAGE SLIDER CARD
   ===================================================== */

/* Main card */
.bulk-handling {
  position: relative;
  background-color: transparent !important; /* override Bootstrap white */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  overflow: hidden;
  transition: background-image 1s ease-in-out;
}

/* Dark overlay for readability */
.bulk-handling::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

/* Card content above overlay */
.bulk-handling .card-body {
  position: relative;
  z-index: 1;
}

/* Icon styling */
.bulk-handling i {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* Heading */
.bulk-handling h5 {
  color: #ffffff;
  font-weight: 600;
  margin-top: 1rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* Paragraph text */
.bulk-handling p {
  color: #f1f1f1;
  margin-bottom: 0.35rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Optional: subtle zoom animation for premium look */
/* .bulk-handling {
  animation: bulkZoom 18s infinite alternate;
} */

@keyframes bulkZoom {
  from {
    background-size: 100%;
  }
  to {
    background-size: 110%;
  }
}

/* Optional hover effect */
/* .bulk-handling:hover::before {
  background: rgba(0, 0, 0, 0.5);
} */


/* =====================================================
   UNIT MATERIAL HANDLING – BACKGROUND IMAGE SLIDER CARD
   ===================================================== */

/* Main card */
.unit-handling {
  position: relative;
  background-color: transparent !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  overflow: hidden;
  transition: background-image 1s ease-in-out;
}

/* Dark overlay */
.unit-handling::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

/* Content above overlay */
.unit-handling .card-body {
  position: relative;
  z-index: 1;
}

/* Icon */
.unit-handling i {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* Heading */
.unit-handling h5 {
  color: #ffffff;
  font-weight: 600;
  margin-top: 1rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* Text */
.unit-handling p {
  color: #f1f1f1;
  margin-bottom: 0.35rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Optional zoom animation */
/*
.unit-handling {
  animation: unitZoom 18s infinite alternate;
}

@keyframes unitZoom {
  from { background-size: 100%; }
  to   { background-size: 110%; }
}
*/



.cement-img {
  width: 100%;
  max-width: 220px;
  height: 160px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}




.cement-bg {
  padding: 20px;
}

.cement-bg i {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

@media (max-width: 576px) {
  .cement-img {
    max-width: 160px;
    height: 120px;
  }
}


.feature-box {
  background: #f8f9fa;
  border-left: 5px solid #0d6efd;
  border-radius: 10px;
}

.feature-list {
  list-style: none;
  padding-left: 0;
}

.feature-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-weight: 500;
}

/* custom tick icon */
.feature-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #0d6efd;
  font-weight: bold;
}


.spec-table th {
  width: 40%;
  font-weight: 600;
  color: #0d6efd;
  background: #f8f9fa;
}

.spec-table td {
  font-weight: 500;
}

.spec-table tr {
  transition: 0.3s;
}

.spec-table tr:hover {
  background: #eef4ff;
}