/* Scoped styles adapted from liandadz Service6 visuals (kept local and minimal) */
.service6 {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.service6 .p-main {
  width: 100%;
  display: block;
}
.service6 .p-img { position: absolute; display:block; z-index: 10; }

/* Temporary fix: hide overlay parts to avoid unwanted stacking/overlap.
  If you want the layered look restored later, remove or adjust this rule. */
/* Reveal animation overrides: distinct animations for main image, overlay imgs, connector lines and pulse dots */
/* Base hidden state already added via .reveal-hidden on pages; these rules make the visual differences */
.service6 .p-main.reveal-hidden,
.service-row .main-image.reveal-hidden {
  opacity: 0;
  transform: scale(0.985) translateY(24px);
  transition: opacity 700ms cubic-bezier(.2,.9,.2,1), transform 700ms cubic-bezier(.2,.9,.2,1);
}
.service6 .p-main.reveal-hidden.reveal-active,
.service-row .main-image.reveal-hidden.reveal-active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.service6 .p-img.reveal-hidden,
.service-row .p-img.reveal-hidden {
  opacity: 0;
  transform: translateY(36px) scale(.96);
  transition: opacity 620ms cubic-bezier(.2,.9,.2,1) 80ms, transform 620ms cubic-bezier(.2,.9,.2,1) 80ms;
}
.service6 .p-img.reveal-hidden.reveal-active,
.service-row .p-img.reveal-hidden.reveal-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Animate connector lines from zero to full length using scaleX (origin depends on flow) */
.service-row .info-item .connect-line.reveal-hidden {
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 560ms cubic-bezier(.2,.9,.2,1), opacity 360ms ease-in;
}
.service-row .info-item .connect-line.reveal-hidden.reveal-active {
  transform: scaleX(1);
  opacity: 1;
}

/* Pulse dot scales in and then starts its pulsing animation when active */
.service-row .info-item .pulse-dot.reveal-hidden {
  transform: scale(0);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 300ms ease-in;
}
.service-row .info-item .pulse-dot.reveal-hidden.reveal-active {
  transform: scale(1);
  opacity: 1;
  animation: pulse-dot 1.6s infinite ease-in-out;
}

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(216,26,41,0.45); }
  70% { box-shadow: 0 0 0 16px rgba(216,26,41,0.08); }
  100% { box-shadow: 0 0 0 0 rgba(216,26,41,0); }
}

/* Slight stagger helpers when multiple overlays exist */
.service6 .img1.reveal-hidden.reveal-active, .service-row .img1.reveal-hidden.reveal-active { transition-delay: 0.24s; }
.service6 .img2.reveal-hidden.reveal-active, .service-row .img2.reveal-hidden.reveal-active { transition-delay: 0.16s; }
.service6 .img3.reveal-hidden.reveal-active, .service-row .img3.reveal-hidden.reveal-active { transition-delay: 0.08s; }

/* Orchestration: main image first, then back-to-front overlays, then lines, then dots, then device-cards */
.service6 .p-main.reveal-hidden.reveal-active { transition-delay: 0s; }

.service-row .info-item .connect-line.reveal-hidden.reveal-active { transition-delay: 0.36s; }
.service-row .info-item .pulse-dot.reveal-hidden.reveal-active { transition-delay: 0.46s; }

/* Device-card reveal: slight stagger per item to add depth */
.service-row .info-item .device-card.reveal-hidden {
  opacity: 0;
  transform: translateY(18px) scale(.99);
  transition: opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1);
}
.service-row .info-item.item1 .device-card.reveal-hidden.reveal-active { transition-delay: 0.62s; }
.service-row .info-item.item2 .device-card.reveal-hidden.reveal-active { transition-delay: 0.68s; }
.service-row .info-item.item3 .device-card.reveal-hidden.reveal-active { transition-delay: 0.74s; }
.service-row .info-item.item4 .device-card.reveal-hidden.reveal-active { transition-delay: 0.80s; }
.service-row .info-item .device-card.reveal-hidden.reveal-active { opacity: 1; transform: translateY(0) scale(1); }

/* Fallback: ensure desktop/mobile rules still hide/display as previously defined */
.service6 .p-img[style*="display: none"] { opacity: 0 !important; }

.service6 .p-img { display: none !important; }
.service6 .p-img img { display:block; width:100%; height:auto; }

.service6 .img1 { top: 6%; left: 4%; width: 220px; transform-origin: center; z-index: 14; animation: svc-float-in 700ms cubic-bezier(.2,.9,.2,1) 0.12s both; }
.service6 .img2 { top: 8%; right: 6%; width: 200px; transform-origin: center; z-index: 13; animation: svc-float-in 700ms cubic-bezier(.2,.9,.2,1) 0.28s both; }
.service6 .img3 { bottom: 10%; left: 36%; width: 240px; transform-origin: center; z-index: 12; animation: svc-float-in 700ms cubic-bezier(.2,.9,.2,1) 0.44s both; }
.service6 .img-mobile { display:none; }

/* Simple connector lines (thin red bars) */
.service6 .p-line-x, .service6 .p-line-y {
  position: absolute;
  background: #d81a29;
  opacity: 0.95;
}
.service6 .p-line-x { height: 0.5px; animation: svc-line-grow 600ms ease 0.5s both; }
.service6 .p-line-y { width: 0.5px; animation: svc-line-grow-vert 600ms ease 0.5s both; }

@keyframes svc-float-in {
  from { transform: translateY(18px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes svc-line-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes svc-line-grow-vert {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* Responsive adjustments: show mobile image and stack cards */
@media (max-width: 992px) {
  .service6 .img1, .service6 .img2, .service6 .img3 { display: none; }
  .service6 .img-mobile { display: block; width: 100%; }
  /* Hide the desktop p-main when mobile image is used to avoid duplicate images */
  .service6 .p-main { display: none !important; }
}

/* Force mobile layout to match Equipment.html behavior (use !important to override inline rules) */
@media (max-width: 992px) {
  .service6 .p-main { display: block !important; width: 100% !important; }
  .service6 .p-img { display: none !important; }

  .service-row .info-item { 
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    margin-top: 30px !important; text-align: center !important;
  }

  .service-row .info-item .device-card {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 15px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    border-top: none !important;
  }

  .service-row .info-item .device-card h4 {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
    color: #111 !important;
    text-align: center !important;
  }

  .service-row .info-item .device-card img {
    margin: 0 auto !important;
    max-width: 180px !important;
    width: 100% !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .service-row .info-item .connect-line, .service-row .info-item .pulse-dot, .service6 .p-line-x, .service6 .p-line-y { display: none !important; }
}

/* device-thumb: hidden on desktop, shown on mobile inside the card */
.device-thumb { display: none; max-width: 100%; height: auto; }
@media (max-width: 992px) {
  .device-thumb { display: block !important; margin: 0 auto 8px auto !important; max-width: 180px !important; width: 100% !important; }
}

/* rounded corners for small images */
/* Stronger rounded corners for small images; ensure clipping and proper fit */
.device-thumb {
  border-radius: 8px !important;
  display: block !important;
  overflow: hidden !important;
  -webkit-mask-image: none !important;
  object-fit: cover !important;
}

/* Also apply to image selector inside device-card to avoid being overridden */
.service-row .info-item .device-card img.device-thumb {
  border-radius: 8px !important;
}

/* IP Phone overlay icon styling (white icon placed above the small image) */
.info-item.item4 .device-card { position: relative; overflow: visible; }
.info-item.item4 .ip-icon {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 18px;
  z-index: 20;
}
@media (max-width: 992px) {
  .info-item.item4 .ip-icon { top: -26px; width:44px; height:44px; font-size:16px; }
}

/* Ensure IP Phone has no shadow even in desktop boxed variant */
.info-item.item4 .device-card img, .info-item.item4 .device-card { box-shadow: none !important; }

/* Keep existing .service-row .main-image rules from Telecommunication intact if used elsewhere */
/* Ensure main-image is visible by default; some pages rely on .main-image rather than .p-main */
.service-row .main-image { display: block; width: 100%; height: auto; }

/* Allow connector lines and pulse dots; style them for service6 overlay usage */
.p-line-x, .p-line-y { display: block !important; }

/* Re-enable and style connect lines and pulse dots used by .service-row info-items */
.service-row .info-item .connect-line {
  display: block;
  position: absolute;
  height: 2px;
  background: #d81a29;
  z-index: 18;
}
.service-row .info-item .pulse-dot {
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d81a29;
  z-index: 19;
  animation: pulse-dot 1.5s infinite ease-in-out;
}
.service-row .info-item .pulse-dot::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%;
  background: rgba(216,26,41,0.45);
  animation: scaleout 1.5s infinite ease-out;
}

/* Text color: white on wide screens, black on narrow screens */
@media (min-width: 993px) {
  .service-row .info-item .device-card h4 { color: #000 !important; text-shadow: none !important; }
  .service-row .info-item .device-card { background: transparent !important; border-top: none !important; box-shadow: none !important; }
  /* Ensure item4 title is white on wide screens */
  .service-row .info-item.item4 .device-card h4 { color: #000 !important; text-align: center !important; text-shadow: none !important; }
  /* Special for telecom page */
  .telecom-page .service-row .info-item .device-card h4 { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important; }
  /* Special for industrial page */
  .industrial-page .service-row .info-item .device-card h4 { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important; }
}
@media (max-width: 992px) {
  .service-row .info-item .device-card h4 { color: #000 !important; }
  .service-row .info-item .device-card { background: #fff !important; border-top: none !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; }
  /* Ensure item4 title is black on narrow screens */
  .service-row .info-item.item4 .device-card h4 { color: #000 !important; text-align: center !important; text-shadow: none !important; }
}


/* Center device-card text under corresponding small images */
.service-row .info-item .device-card {
  text-align: center !important;
}

/* Remove shadow specifically for IP Phone (item4) */
.service-row .info-item.item4 .device-card,
.service-row .info-item.item4 .device-card img {
  box-shadow: none !important;
}

/* Mobile: boxed layout matching Equipment.html behavior (text+image inside a box) */
@media (max-width: 992px) {
  .service-row .info-item .device-card {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 15px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    border-top: none !important;
  }
  .service-row .info-item .device-card img {
    margin: 0 auto !important;
    max-width: 180px !important;
    width: 100% !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  /* Ensure mobile boxes have red top bar and IP Phone (item4) keeps no shadow */
  .service-row .info-item .device-card { border-top: 3px solid #d81a29 !important; }
  .service-row .info-item.item4 .device-card { box-shadow: none !important; border-top: 3px solid #d81a29 !important; }
}