/* ===== Root / Reset ===== */
:root{
  --primary:#0A192F;
  --accent:#E14D25;
  --ink:#111;
  --muted:#6b7280;
  --bg:#f6f7f9;
  --white:#fff;
  --maxw:1200px;
  --padX:clamp(16px,4vw,32px);
  --speed:.25s;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}

/* Utilities */
.section{ padding:clamp(48px,6vw,80px) 0; }
.container{ max-width:var(--maxw); padding:0 var(--padX); margin:0 auto; width:100%; }
.grid{ display:grid; gap:clamp(16px,2vw,24px); }
.center{ text-align:center; }
img{ display:block; max-width:100%; height:auto; }

/* Buttons (no rounded corners) */
.btn{
  display:inline-block;
  background:var(--accent);
  color:var(--white);
  padding:14px 22px;
  text-decoration:none;
  border:0;
  font-weight:600;
  letter-spacing:.2px;
  transition:transform var(--speed), background var(--speed);
}
.btn:hover{ background:#c94425; transform:translateY(-1px); }

/* ===== HERO SLIDER ===== */
.hero{ position:relative; }
.hero-slider{ position:relative; overflow:hidden; }

.slide{
  position:relative;
  min-height:clamp(360px,48vw,640px);
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.slide .overlay{
  position:absolute; inset:0; z-index:0;
  /* reliable dark overlay */
  background:linear-gradient(rgba(10,25,47,.70), rgba(10,25,47,.70));
  pointer-events:none;
}
.slide .hero-content{
  position:relative; z-index:1;
  text-align:center; color:#fff;
  padding:0 var(--padX);
}
.slide h2{
  margin:0 0 14px; font-weight:600;
  font-size:clamp(24px,4.8vw,44px);
  text-transform:none; letter-spacing:.4px;
}
.slide .highlight{ color:#ffeadf; }
.hero-btn{ padding:14px 26px; }

.dots{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; gap:10px; z-index:2;
}
.dots span{
  width:12px; height:12px; border:2px solid #fff; background:transparent; display:inline-block;
  cursor:pointer; transition:background var(--speed), transform var(--speed);
}
.dots span.active{ background:#fff; transform:scale(1.05); }

.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.35); color:#fff; border:0; padding:10px 14px; cursor:pointer;
  z-index:2; font-size:20px; transition:background var(--speed);
}
.arrow:hover{ background:rgba(0,0,0,.55); }
.arrow.left{ left:12px; }
.arrow.right{ right:12px; }

/* ===== CATEGORY ICONS ===== */
.home-categories{ background:#fff; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; }
.icons-grid{
  grid-template-columns:repeat(5,1fr);
}
.icon-item{
  text-align:center; padding:22px 10px; border-left:1px solid #eee;
}
.icon-item:first-child{ border-left:0; }
.icon-item i{ font-size:28px; color:var(--accent); display:block; margin-bottom:10px; }
.icon-item h3{ margin:0 0 6px; font-size:16px; font-weight:600; color:#1f2937; }
.icon-item p{ margin:0; color:#374151; font-size:14px; }
@media (max-width:900px){
  .icons-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .icons-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ===== PROPERTIES OVERVIEW ===== */
.properties-overview{ background:#fff; }
.overview-grid{
  display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:clamp(20px,3.5vw,40px);
}
.overview-content h2{
  margin:0 0 10px; font-size:clamp(22px,3.2vw,34px); color:var(--primary); font-weight:600;
}
.overview-description{ margin:0 0 16px; color:#2b2f36; }
.checklist{
  list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px;
}
.checklist li{ display:flex; align-items:flex-start; gap:10px; color:#24272c; }
.checklist i{ color:var(--accent); margin-top:2px; }
@media (max-width:900px){
  .overview-grid{ grid-template-columns:1fr; }
  .overview-image{ order:-1; }
}

/* ===== MACHINERY CARDS ===== */
.machinery-categories{ background:#f2f4f7; }
.section-head{ text-align:center; margin-bottom:clamp(20px,3vw,32px); }
.section-head h2{ margin:0 0 6px; font-size:clamp(22px,3.2vw,34px); color:var(--primary); font-weight:600; }
.section-head p{ margin:0; color:var(--muted); font-size:clamp(14px,2vw,16px); }

.cards-grid{
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.card{
  background:#fff; border:1px solid #e5e7eb;
  transition:box-shadow var(--speed), transform var(--speed);
}
.card:hover{ box-shadow:0 10px 28px rgba(16,24,40,.06); transform:translateY(-2px); }
.card .thumb{
  width:100%; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid #e5e7eb; overflow:hidden;
}
.card .thumb img{ width:86%; height:86%; object-fit:contain; }
.card .card-body{ padding:16px 16px 18px; }
.card h3{ margin:0 0 6px; font-size:16px; font-weight:600; color:#1f2937; }
.card p{ margin:0; color:#374151; font-size:14.5px; }
.cards-grid + .center{ margin-top:18px; }

/* ===== FOODS PROMO ===== */
.foods-promo{
  position:relative; background:#000;
}
.promo-image{ position:relative; }
.promo-image img{ width:100%; height:clamp(260px,40vw,420px); object-fit:cover; }
.promo-overlay{
  position:absolute; inset:0; background:linear-gradient(rgba(10,25,47,.72), rgba(10,25,47,.72));
}
.promo-content{
  position:absolute; inset:auto 0 0 0; /* bottom overlay content */
  color:#fff; padding:clamp(18px,3vw,28px);
  display:flex; flex-direction:column; gap:10px;
}
.promo-content h2{ margin:0; font-size:clamp(20px,3vw,30px); font-weight:600; }
.promo-content p{ margin:0; max-width:840px; }

/* ===== GALLERY (continuous rail) ===== */
.image-gallery{ background:#fff; border-top:1px solid #e5e7eb; }
.gallery-rail{
  overflow:hidden; position:relative; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;
  background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg, rgba(0,0,0,.06), transparent 20%, transparent 80%, rgba(0,0,0,.06)) border-box;
}
.rail-track{
  display:flex; gap:14px; padding:16px; width:max-content;
  animation:rail 30s linear infinite;
}
.rail-track img{ height:180px; width:auto; object-fit:cover; }
@keyframes rail{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:560px){
  .rail-track img{ height:140px; }
}

/* ===== VIDEO ===== */
.video-section{ background:#f2f4f7; }
.video-wrap{
  position:relative; width:100%; max-width:100%;
  aspect-ratio:16/9; border:1px solid #e5e7eb; background:#000;
}
.video-wrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* ===== TESTIMONIALS ===== */
.testimonials{ background:#fff; }
.testimonial-grid{ grid-template-columns:repeat(2,1fr); }
.quote{
  border:1px solid #e5e7eb; background:#fff; padding:18px;
}
.quote p{ margin:0 0 8px; color:#1f2937; }
.quote i{ color:var(--accent); margin-right:6px; }
.quote cite{ color:#6b7280; font-style:normal; }
@media (max-width:900px){
  .testimonial-grid{ grid-template-columns:1fr; }
}

/* ===== BLOG PREVIEW ===== */
.blog-preview{ background:#f2f4f7; }
.blog-grid{ grid-template-columns:repeat(2,1fr); }
.post{
  background:#fff; border:1px solid #e5e7eb; padding:18px;
}
.post h3{ margin:0 0 8px; font-size:18px; font-weight:600; color:#1f2937; }
.post p{ margin:0 0 10px; color:#374151; }
.post-link{ color:var(--accent); text-decoration:none; font-weight:600; }
.post-link:hover{ text-decoration:underline; }
@media (max-width:900px){
  .blog-grid{ grid-template-columns:1fr; }
}

/* ===== HERO (Slider) ===== */
.hero { position: relative; }
.hero-slider{
  position: relative;
  min-height: clamp(380px, 52vw, 720px); /* parent height so absolute slides show */
  isolation: isolate;                     /* keeps overlay effects tidy */
  overflow: hidden;
}

/* Slides stack and cross-fade */
.slide{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background-size: cover; background-position: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(1.03);                 /* gentle zoom-out to active */
  transition:
    opacity 900ms ease,
    visibility 0s linear 900ms,           /* hide clicks after fade */
    transform 6s ease;                    /* slow parallax zoom */
}
.slide.active{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: scale(1.0);
  transition:
    opacity 900ms ease,
    visibility 0s,
    transform 6s ease;
}

/* Reliable dark overlay for readability */
.slide .overlay{
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(to bottom, rgba(10,25,47,.55), rgba(10,25,47,.55));
  pointer-events: none;
}

/* Text content */
.hero-content{
  position: relative; z-index: 1;
  text-align: center; color: #fff;
  padding: 0 clamp(16px, 4vw, 48px);
  opacity: 0; transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.slide.active .hero-content{
  opacity: 1; transform: translateY(0);
  transition-delay: 120ms;
}
.hero-content h2{
  margin: 0 0 14px;
  font-weight: 600;
  font-size: clamp(24px, 4.8vw, 44px);
  letter-spacing: .2px;
}
.hero-content .highlight{ color: #ffeadf; }
.btn.hero-btn{ padding: 14px 26px; }

/* Dots */
.dots{
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 2;
}
.dots span{
  width: 12px; height: 12px; border: 2px solid #fff; background: transparent;
  display: inline-block; cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.dots span.active{ background: #fff; transform: scale(1.05); }

/* Arrows */
.arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.35); color: #fff; border: 0; padding: 10px 14px;
  cursor: pointer; z-index: 2; font-size: 20px; line-height: 1;
  transition: background .25s ease;
}
.arrow:hover{ background: rgba(0,0,0,.55); }
.arrow.left{ left: 12px; }
.arrow.right{ right: 12px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .slide, .slide.active{ transform: none !important; transition: opacity 300ms ease; }
}

/* ===== RESPONSIVENESS ===== */

/* Large Desktops (1200px and above) */
@media (min-width: 1200px) {
  .hero-slider {
    min-height: 720px;
  }
  .hero-content h2 {
    font-size: 44px;
  }
  .btn.hero-btn {
    font-size: 1.1rem;
  }
}

/* Tablets and Small Laptops (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
  .hero-slider {
    min-height: 550px;
  }
  .hero-content h2 {
    font-size: 36px;
  }
  .btn.hero-btn {
    padding: 12px 22px;
    font-size: 1rem;
  }
}

/* Tablets & Large Phones (768px - 991px) */
@media (max-width: 991px) and (min-width: 576px) {
  .hero-slider {
    min-height: 450px;
  }
  .hero-content h2 {
    font-size: 30px;
  }
  .hero-content p {
    font-size: 1rem;
  }
  .arrow {
    padding: 8px 12px;
    font-size: 18px;
  }
}

/* Small Phones (up to 575px) */
@media (max-width: 575px) {
  .hero-slider {
    min-height: 380px;
  }
  .hero-content {
    padding: 0 16px;
  }
  .hero-content h2 {
    font-size: 22px;
    line-height: 1.3;
  }
  .hero-content p {
    font-size: 0.9rem;
  }
  .btn.hero-btn {
    padding: 10px 18px;
    font-size: 0.85rem;
  }
  .dots {
    bottom: 12px;
  }
  .dots span {
    width: 10px;
    height: 10px;
  }
  .arrow {
    padding: 6px 10px;
    font-size: 16px;
  }
}
/* ===== GALLERY SHOWCASE ===== */
.gallery-showcase {
  --gs-height: clamp(240px, 42vw, 520px);
  --gs-nav-bg: rgba(0,0,0,.45);
  --gs-nav-bg-hover: rgba(0,0,0,.65);
  --gs-dot: rgba(255,255,255,.55);
  --gs-dot-active: #ffffff;
  --gs-title-color: #0A192F;
  padding: 32px 0 12px;
  background: #fff; /* keep page section clean */
}

.gs-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

.gs-title {
  text-align: center;
  color: var(--gs-title-color);
  font-weight: 600;
  letter-spacing: .2px;
  margin: 0 0 16px;
  font-size: clamp(20px, 3.6vw, 28px);
}

.gs-slider {
  position: relative;
  isolation: isolate;
}

.gs-viewport {
  position: relative;
  height: var(--gs-height);
  overflow: hidden;
  background: #0A192F; /* shows during image load */
}

/* Stack slides and cross-fade them */
.gs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02); /* gentle zoom-out on active */
  transition:
    opacity 800ms ease,
    visibility 0s linear 800ms,
    transform 7s ease; /* slow Ken Burns */
}

/* ensure a visible first slide if JS is off */
.gs-slide:first-child { opacity: 1; visibility: visible; }

.gs-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition:
    opacity 800ms ease,
    visibility 0s,
    transform 7s ease;
}

.gs-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;        /* no rounded edges */
  user-select: none;
  -webkit-user-drag: none;
}

/* Subtle dark overlay for punchy contrast */
.gs-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35));
  pointer-events: none;
}

/* Nav arrows (square, no rounding) */
.gs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: var(--gs-nav-bg);
  color: #fff;
  padding: 12px 14px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background .2s ease, opacity .2s ease;
  opacity: .95;
}

.gs-nav:hover { background: var(--gs-nav-bg-hover); }
.gs-prev { left: 12px; }
.gs-next { right: 12px; }

/* Dots */
.gs-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.gs-dots button {
  width: 12px; height: 12px;
  background: transparent;
  border: 2px solid var(--gs-dot);
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.gs-dots button[aria-selected="true"] {
  background: var(--gs-dot-active);
  border-color: var(--gs-dot-active);
  transform: scale(1.05);
}

/* Hover to pause hint (optional: cursor) */
.gs-viewport:hover { cursor: default; }

/* RESPONSIVE TWEAKS */
@media (max-width: 1024px) {
  .gs-prev { left: 8px; }
  .gs-next { right: 8px; }
  .gs-nav { padding: 10px 12px; font-size: 16px; }
}

@media (max-width: 640px) {
  .gallery-showcase { padding-top: 24px; }
  .gs-title { margin-bottom: 12px; }
  .gs-dots { bottom: 10px; gap: 8px; }
  .gs-dots button { width: 10px; height: 10px; }
  .gs-nav { padding: 8px 10px; font-size: 15px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gs-slide, .gs-slide.is-active { transform: none !important; }
  .gs-slide { transition: opacity 250ms ease !important; }
}