/* styles.css - ZEEL GREETH NIG. LTD */

/* Global */
:root{
  --primary:#0b5ed7;
  --accent:#ffb703;
  --dark:#0f1724;
  --muted:#6b7280;
  --bg:#f7f9fb;
  --whatsapp:#25d366;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Rubik',sans-serif;
  background:var(--bg);
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Utilities */
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.section{padding:3.2rem 0}
.lead{color:var(--muted);margin-bottom:1rem}

/* NAVBAR */
.navbar{
  position:sticky;top:0;z-index:1200;
  display:flex;align-items:center;justify-content:space-between;
  background:white;padding:1rem 1.25rem;border-bottom:1px solid #e6eef9;
}
.brand h1{font-size:1.05rem;letter-spacing:0.6px}
.brand .tagline{font-size:0.8rem;color:var(--muted)}

a {
  color: var(--primary);
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
}

/* underline grow effect */
a::after {
  display: none;
}

a:hover {
  color: var(--accent);
}


/* desktop nav links */
.nav-links ul{display:flex;gap:1.25rem;list-style:none;align-items:center}
.nav-links a{color:var(--dark);font-weight:500;padding:0.3rem 0.45rem;border-radius:6px;transition:all .18s}
.nav-links a:hover{background:rgba(11,94,215,0.08);color:var(--primary)}

/* menu toggle (hamburger) */
.menu-toggle{
  display:none;
  background:transparent;border:0;font-size:1.6rem;cursor:pointer;color:var(--dark);
}

/* HERO */
.hero{
  position:relative;
  min-height:62vh;display:flex;align-items:center;justify-content:center;
  background-image: url('/build1.jpg');
  background-position:center;background-size:cover;background-repeat:no-repeat;
  color:white;text-align:center;padding:3rem 1rem;
}
.hero-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,7,18,0.48), rgba(3,7,18,0.64));
}
.hero-content{position:relative;z-index:2;max-width:900px;padding:1rem}
.hero h2{font-size:2.25rem;margin-bottom:0.5rem}
.hero p{font-size:1rem;margin-bottom:1rem;color:rgba(255,255,255,0.9)}

/* Buttons */
.btn{
  display:inline-block;background:var(--primary);color:#fff;padding:0.65rem 1.05rem;border-radius:8px;
  font-weight:600;text-decoration:none;box-shadow:0 6px 18px rgba(11,94,215,0.12);transition:transform .18s, box-shadow .18s, opacity .18s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(11,94,215,0.14)}
.btn.small{background:var(--accent);color:#08203a;padding:0.45rem 0.9rem;border-radius:6px;font-size:0.95rem}

/* SERVICES */
.services .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.25rem}
.service-card{background:white;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(16,24,40,0.06);transition:transform .25s, box-shadow .25s}
.service-card img{width:100%;height:160px;object-fit:cover;display:block}
.service-card h4{padding:0.9rem 1rem 0 1rem;font-size:1.05rem;color:var(--dark)}
.service-card p{padding:0 1rem 1rem 1rem;color:var(--muted);font-size:0.95rem}
.service-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(16,24,40,0.08)}

/* PROJECTS */
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.project-card{display:flex;gap:1rem;background:white;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.project-card img{width:40%;height:140px;object-fit:cover}
.project-info{padding:0.9rem 1rem}

/* ABOUT */
.company-info{list-style:none;margin-top:1rem;color:var(--muted)}
.company-info li{margin:0.4rem 0}

/* CONTACT */
.contact-grid{display:flex;gap:1.5rem;align-items:center;justify-content:space-between}
.contact-cta{text-align:right}

/* FOOTER */
.site-footer{background:#061024;color:#cfe6ff;padding:1.2rem 0;margin-top:2rem}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:1rem}

/* PROJECTS GALLERY */
.gallery-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.projects-gallery {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1rem 0;
  scrollbar-width: none; /* Firefox */
}
.projects-gallery::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.project-card {
  flex: 0 0 auto;
  width: 300px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  transition: transform .25s, box-shadow .25s;
}
.project-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16,24,40,0.08);
}

/* Gallery buttons */
.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(11,94,215,0.8);
  color: white;
  border: none;
  padding: 0.6rem 0.9rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  transition: background 0.3s;
  z-index: 5;
}
.gallery-btn:hover {
  background: rgba(11,94,215,1);
}
.gallery-btn.prev { left: -12px; }
.gallery-btn.next { right: -12px; }



/* FLOATING WHATSAPP */
.whatsapp-float{
  position:fixed;right:18px;bottom:18px;background:var(--whatsapp);
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,0.18);z-index:1400;transition:transform .18s;
  animation:wh-pulse 2.2s infinite;
}
.whatsapp-float:hover{transform:scale(1.06)}
.whatsapp-float .wh-icon{width:26px;height:26px}

/* Animations */
@keyframes wh-pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

/* Fade-in base */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity .9s ease-out, transform .9s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Mobile styles */
@media (max-width: 900px){
  .services .service-grid{grid-template-columns:repeat(2,1fr)}
  .projects-grid{grid-template-columns:1fr}
  .project-card img{height:120px}
  .contact-grid{flex-direction:column;align-items:flex-start}
  .contact-cta{text-align:left;width:100%}
  .footer-grid{flex-direction:column;align-items:flex-start}
}

/* Mobile: show hamburger, hide desktop nav, animate slide-down */
@media (max-width: 768px){
  .menu-toggle{display:block}
  .nav-links{position:fixed;top:0;right:-100%;height:100vh;width:260px;background:white;box-shadow:-6px 0 30px rgba(2,6,23,0.12);padding:3.5rem 1rem;transition:right .36s cubic-bezier(.2,.9,.2,1);z-index:1300}
  .nav-links.open{right:0}
  .nav-links ul{flex-direction:column;gap:1rem}
  .nav-links a{display:block;padding:0.6rem 0.7rem}
}

/* smaller screens extra tweaks */
@media (max-width:600px){
  .hero h2{font-size:1.5rem}
  .hero{min-height:54vh;padding:2rem 1rem}
  .service-card img{height:120px}
   .project-card { width: 240px; }
  .project-card img { height: 160px; }
}

/* small visual niceties */
a{outline:none}
a:focus{box-shadow:0 0 0 3px rgba(11,94,215,0.12);border-radius:6px}