html,body{margin:0;padding:0;font-family:'Segoe UI',sans-serif;background:#0f172a;color:white;width:100%;height:100%;overflow-x:hidden}
html{scroll-behavior:smooth}
#mesh-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}
.page-wrapper{position:relative;z-index:2}
a{color:white;text-decoration:none}
.hero-content{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}
.hero-title{font-size:3.5rem;font-weight:bold;margin-bottom:0.5rem}
.hero-subtitle{font-size:2rem;margin-bottom:0.5rem;color:#3b82f6}
.hero-description{font-size:1.2rem;max-width:700px;line-height:1.5;margin-bottom:2rem}
.button-primary{padding:1rem 2rem;background:#3b82f6;color:white;text-decoration:none;border-radius:2rem;font-weight:500;transition:background 0.3s ease}
.button-primary:hover{background:#2563eb}
.section-title{text-align:center;font-size:2rem;margin:4rem 0 2rem}
.services-section,.portfolio-section,.clients-section,.contact-section{padding:2rem 1rem 4rem}
.service-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;max-width:1200px;margin:0 auto}
.service-card{background:#1e293b;border-radius:1.5rem;width:200px;aspect-ratio:1/1;text-align:center;box-shadow:0 0 20px rgba(0,0,0,0.4);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem}
.service-card img{width:55px;height:55px;margin-bottom:0.6rem;filter:drop-shadow(0 0 6px rgba(59,130,246,0.6))}
.service-card h3{margin:0;font-size:0.9rem;text-align:center}

.gallery-wrapper{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem}
.gallery-thumb img{width:100%;height:200px;object-fit:cover;border-radius:0.75rem;box-shadow:0 0 10px rgba(0,0,0,0.5);cursor:pointer;transition:transform 0.3s}
.gallery-thumb img:hover{transform:scale(1.05)}

.modal{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.9);justify-content:center;align-items:center}
.modal-content{position:relative;max-width:90%;text-align:center}
.modal-content img{max-width:100%;max-height:80vh;border-radius:1rem;box-shadow:0 0 20px rgba(0,0,0,0.7)}
.modal-description{margin-top:1rem;font-size:1rem;color:#ccc;background:rgba(50,50,50,0.7);padding:1rem;border-radius:0.75rem;max-width:90%;margin-left:auto;margin-right:auto}
.modal-close{position:absolute;top:20px;right:40px;font-size:40px;color:white;cursor:pointer}
.modal-nav{position:absolute;top:50%;font-size:40px;color:white;background:rgba(0,0,0,0.4);border:none;width:60px;height:60px;padding:0;border-radius:50%;transform:translateY(-50%);cursor:pointer}
.modal-nav.left{left:20px}
.modal-nav.right{right:20px}

.clients-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;max-width:1200px;margin:0 auto}
.client-logo{font-size:1.5rem;font-weight:bold;color:white;opacity:0.8;min-width:150px;text-align:center}
.contact-info{text-align:center;margin-top:2rem;color:#ccc;font-size:1.1rem}
.footer{text-align:center;padding:2rem;color:#777;font-size:0.85rem}
.social-links{margin-bottom:1rem}
.social-links a{margin:0 0.5rem;display:inline-block;opacity:0.8;transition:0.3s}
.social-links a:hover{opacity:1}

.section-title,.service-card,.gallery-thumb,.client-logo,.contact-form{opacity:0;transform:translateY(20px);transition:all 0.6s ease}
.section-title.visible,.service-card.visible,.gallery-thumb.visible,.client-logo.visible,.contact-form.visible{opacity:1;transform:translateY(0)}

.scroll-icon{margin:3rem auto 0 auto;text-align:center;opacity:0.6}

@media(max-width:768px){.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.5rem}.hero-description{font-size:1rem}.service-card{width:85%;aspect-ratio:1/1}.gallery-thumb img{width:90%;height:auto}}

.hero.shrink-gap {
  padding-bottom: 10vh !important;
  padding-bottom: 2vh !important;
  transition: padding 0.3s ease;
}


/* Reduce space below the scroll icon */
.scroll-indicator {
  margin-bottom: 0vh;
}

/* Further reduce gap below hero */
.hero {
  padding-bottom: 18vh;
}
.hero.shrink-gap {
  padding-bottom: 6vh !important;
}