body {
  margin: 0;
  font-family: Verdana;
  background: #eee;
}

/* Prevent horizontal overflow and ensure consistent sizing */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }

/* Ensure media never exceed viewport width on small screens */
img, video { max-width: 100%; height: auto; display: block; }

.site-header {
  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
               url('Image/bulbs-wires-table.jpg') center/cover no-repeat;
  background-color: #4c3e6c;
  color: white;
  position: relative;
  padding: 40px 25px;
}

.site-header .logo {
  height: 56px;
  width: auto;
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
}

.site-header .brand {
  text-align: center;
}

@media (max-width: 600px) {
  .site-header {
    padding: 12px;
  }
  .site-header .logo {
    position: static;
    transform: none;
    display: block;
    margin: 0 auto 8px;
    height: 48px;
  }
  .site-header .brand { text-align: center; }
}

/* Improve header typography and hero spacing on small screens */
@media (max-width:600px) {
  .site-header { padding: 10px 12px; }
  .site-header .brand h1 { font-size:20px; margin:4px 0; }
  .site-header .brand p { font-size:13px; margin:0 0 6px; }
  .hero { height: 180px; padding-top: 44px; background-position: center; }
  .hero h2 { font-size:20px; margin:0 10px 12px; }
  .hero button { padding:10px 18px; font-size:16px; }
}

nav {
  background: #000000;
  text-align: center;
  padding: 10px;
}

nav a {
  color: white;
  margin: 15px;
  text-decoration: none;
  font-weight: bold;
}

/* Mobile nav adjustments */
@media (max-width:600px) {
  nav { padding:8px; }
  nav a { display:block; margin:6px 0; padding:8px 10px; font-size:15px; }
}

.hero {
  background: url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c") center/cover;
  height: 300px;
  color: rgb(255, 255, 255);
  text-align: center;
  padding-top: 100px;
}

.hero button {
  padding: 14px 28px;
  background: orange;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.services {
  width: 100%;
  background: #f2f2f2;
  padding: 60px 20px;
}

.services {
  max-width: 1600px;     /* WEBSITE WIDTH */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.services > div {
  background: #ffffff;
  padding: 30px 20px;
  text-align: center;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services > div:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.15);
}

.services h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.services p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

/* Tablet */
@media (max-width: 992px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 576px) {
  .services {
    grid-template-columns: 1fr;
  }
}


.cta {
  background: white;
  text-align: center;
  padding: 30px;
}

footer {
  background: black;
  color: white;
  text-align: center;
  padding: 12px;
}

/* Footer social links */
footer .social { margin-top:8px; display:flex; gap:12px; justify-content:center; align-items:center; }
footer .social a { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:6px; background:transparent; text-decoration:none; }
footer .social svg { width:20px; height:20px; fill: #fff; opacity:0.95; transition: transform .15s ease, opacity .15s ease; }
footer .social a:hover svg { transform: translateY(-3px); opacity:1; }


/* Work Page Style*/
/* Gallery styles */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 22px;
  max-width: 1200px;
  margin: 0 auto 40px;
}
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease, filter .22s ease;
}
.gallery img:hover { transform: scale(1.04) translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,0.22); filter: contrast(1.03) saturate(1.05); }

/* Gallery section card */
.gallery-section { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,250,250,0.95)); padding:18px; margin:26px auto; border-radius:12px; box-shadow:0 12px 36px rgba(0,0,0,0.06); max-width:1240px; }
.gallery-section h3 { font-size:22px; margin:0 0 12px; color:#222; text-align:center; position:relative; letter-spacing:0.6px; }
.gallery-section h3:after { content:''; display:block; width:64px; height:4px; background:linear-gradient(90deg,#ff8a00,#ff3d00); margin:10px auto 0; border-radius:4px; }

/* subtle caption area on hover (uses title attribute) */
.gallery img[title] { position: relative; }
.gallery img[title]:hover { filter: brightness(0.98); }

/* make video thumbnails match images */
.gallery video, .gallery .gallery-video { aspect-ratio: 4 / 3; border-radius:10px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);z-index:9999; }
.lightbox.hidden { display: none; }
.lb-image { max-width: 92%; max-height: 86%; border-radius:6px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.lb-close, .lb-prev, .lb-next { position: absolute; background: transparent; border: none; color: white; font-size: 36px; cursor: pointer; padding: 8px; }
.lb-close { top: 18px; right: 22px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }

@media (max-width:600px) {
  .gallery img { aspect-ratio: 1 / 1; }
  .lb-close, .lb-prev, .lb-next { font-size: 28px; }
}

/* Tighter gallery spacing on small screens */
@media (max-width:600px) {
  .gallery { gap:8px; padding:12px; }
  .gallery-section { padding:12px; margin:16px 10px; }
  .gallery img, .gallery video, .gallery .gallery-video { border-radius:8px; }
}

/* Video styles for gallery and lightbox */
.gallery video, .gallery .gallery-video { width:100%; aspect-ratio:1 / 1; object-fit:cover; cursor:pointer; border-radius:6px; box-shadow:0 4px 10px rgba(0,0,0,0.15); }
.gallery video:hover, .gallery .gallery-video:hover { transform: translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.25); }
.lb-video { max-width:92%; max-height:86%; border-radius:6px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); background:black; }

@media (max-width:600px) {
  .gallery video, .gallery .gallery-video { aspect-ratio:1 / 1; }
}

/* Services page styles */
.content { max-width:1000px; margin:30px auto; padding:0 20px; }
.page-title { text-align:center; font-size:32px; color:#222; margin:8px 0 18px; text-transform:uppercase; letter-spacing:1px; }
.service-section { background: #fff; padding:18px; margin:18px 0; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.service-section h3 { margin:0 0 8px; font-size:20px; color:#333; position:relative; }
.service-section h3:before { content:''; position:absolute; left:-18px; top:8px; width:6px; height:24px; background:orange; border-radius:3px; }
.service-section p { color:#444; line-height:1.6; }

/* Hover popup effect for service cards */
.service-section { transition: transform .18s ease, box-shadow .18s ease; }
.service-section:hover { transform: translateY(-8px); box-shadow: 0 14px 36px rgba(0,0,0,0.12); }

/* image + text layout for Services page */
.service-row { display:flex; gap:18px; align-items:flex-start; }
.service-image { width:220px; height:140px; object-fit:cover; border-radius:8px; flex:0 0 220px; box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.service-row .service-text { flex:1; }

@media (max-width:800px) {
  .service-row { flex-direction:column; }
  .service-image { width:100%; height:200px; flex:unset; }
}

/* Reusable button matching .hero button */
.btn-estimate { padding: 12px 26px; background: orange; border: none; color: white; font-size:16px; cursor: pointer; border-radius:6px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.btn-estimate:hover { filter:brightness(.95); transform: translateY(-2px); }

@media (max-width:600px) {
  .page-title { font-size:22px; }
  .service-section h3 { font-size:18px; }
}