/* Layout */
.services-section {
  padding: 60px 20px;
  background:#f5f7fa;
}
.services-section .section-header {
  text-align:center;
  margin-bottom:50px;
}
.services-section .section-header h2 {
  font-size:2.4rem;
  color:#ffffff;
  margin-bottom:10px;
  font-weight:700;
}
.services-section .section-header p {
  color:#56606b;
  font-size:1rem;
}

/* Service Item Flex Row */
.service-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
  margin-bottom:70px;
  flex-wrap:wrap;
}
.service-item:last-of-type {
  margin-bottom:0;
}
.service-item.reverse {
  flex-direction:row-reverse;
}

/* Image block */
.service-image {
  flex:1 1 48%;
  max-width:520px;
  overflow:hidden;
  border-radius:14px;
  position:relative;
  box-shadow:0 8px 28px rgba(0,0,0,0.12);
}
.service-image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1);
  filter:grayscale(70%) contrast(1.05);
  transition:transform .7s ease, filter .7s ease;
}
.service-image::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,0.15),rgba(0,0,0,0));
  opacity:0;
  transition:opacity .5s ease;
}
.service-item:hover .service-image img {
  transform:scale(1.07);
  filter:grayscale(0%) contrast(1.05);
}
.service-item:hover .service-image::after {
  opacity:1;
}

/* Content block (card style) */
.service-content {
  flex:1 1 48%;
  background:#ffffff;
  padding:35px 38px;
  border-radius:18px;
  position:relative;
  box-shadow:0 8px 26px -6px rgba(0,0,0,0.15);
  overflow:hidden;
  backdrop-filter:saturate(140%) blur(4px);
  transition:transform .55s ease, box-shadow .55s ease;
}
.service-content::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 85% 20%,rgba(255,255,255,0.25),rgba(255,255,255,0));
  pointer-events:none;
  opacity:.7;
  mix-blend-mode:overlay;
}
.service-item:hover .service-content {
  transform:translateY(-6px);
  box-shadow:0 16px 38px -10px rgba(0,0,0,0.25);
}

.service-content h3 {
  margin:0 0 14px;
  font-size:1.65rem;
  font-weight:600;
  letter-spacing:.5px;
  color:#0d6efd;
  position:relative;
}
.service-content h3::after {
  content:"";
  display:block;
  width:54px;
  height:3px;
  background:linear-gradient(90deg,#0d6efd,#17b66d);
  margin-top:10px;
  border-radius:3px;
}
.service-content p {
  margin:0;
  line-height:1.6;
  color:#2f3a44;
  font-size:0.98rem;
}

/* --- Theming Variants (applied to .service-content via parent service-* class) --- */

/* Base override to allow gradient cards */
.service-item[class*="service-"] .service-content {
  color:#fff;
}

/* Electricity (white + dark text) */
.service-electricity .service-content {
  background:#ffffff;
  color:#222;
}
.service-electricity .service-content h3 {
  color:#0d6efd;
}
.service-electricity .service-content h3::after {
  background:linear-gradient(90deg,#0d6efd,#17b66d);
}
.service-electricity .service-content p {
  color:#333;
}

/* Telecommunication gradient */
.service-telecom .service-content {
  background:linear-gradient(135deg,#0d6efd 0%,#17b66d 100%);
}
.service-telecom .service-content h3,
.service-telecom .service-content p { color:#fff; }

/* IT gradient (cool blue spectrum) */
.service-it .service-content {
  background:linear-gradient(135deg,#232b5d 0%,#0d6efd 50%,#35a7ff 100%);
}

/* CCTV gradient (deep dark focus) */
.service-cctv .service-content {
  background:linear-gradient(135deg,#0b0f17,#1e293b 45%,#0d6efd 100%);
}

/* HVAC gradient (fresh / cool) */
.service-hvac .service-content {
  background:linear-gradient(135deg,#0d6efd 0%,#02b3b1 50%,#17b66d 100%);
}

/* Supply gradient (industrial metallic) */
.service-supply .service-content {
  background:linear-gradient(135deg,#222,#3a3a3a 40%,#7d7d7d 75%,#ffffff 100%);
  color:#fff;
}
.service-supply .service-content p { color:#f5f5f5; }

/* Ensure heading bar contrast on dark cards */
.service-item:not(.service-electricity) .service-content h3::after {
  background:rgba(255,255,255,0.55);
}

/* Accessibility: ensure p text is readable */
.service-item:not(.service-electricity) .service-content p {
  color:#f0f6fa;
}

/* Responsive */
@media (max-width: 960px) {
  .service-item {
    flex-direction:column;
    gap:30px;
  }
  .service-item.reverse {
    flex-direction:column;
  }
  .service-image, .service-content {
    flex:1 1 100%;
    max-width:100%;
  }
  .service-content {
    padding:28px 26px;
  }
  .service-content h3 {
    font-size:1.45rem;
  }
  .service-content p {
    font-size:0.95rem;
  }
}

@media (max-width:480px) {
  .services-section {
    padding:50px 16px;
  }
  .service-content {
    padding:24px 22px;
  }
  .service-content h3 {
    font-size:1.35rem;
  }
}