:root {
  --primary: #146C94;
  --primary-dark: #0a4271;
  --bg-dark: rgba(0,0,0,0.4);
  --text-light: #fff;
  --text-dark: #222;
}

* {
  margin:0; padding:0; box-sizing:border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background: #f9f9f9; color: var(--text-dark);
  scroll-behavior: smooth;
}
.container {
  width: 90%; max-width: 1200px;
  margin: auto; padding: 60px 0;
}
.hero {
  position: relative; height: 80vh;
  background: url('hero-bg.jpg') center/cover no-repeat;
}
.hero .overlay {
  position: absolute; inset:0;
  background: var(--bg-dark);
}
.hero-content {
  position: relative; z-index:1;
  height:100%; display:flex;
  flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
}
.hero-content h1 {
  font-size:3rem; color: var(--text-light);
  margin-bottom:0.5rem;
}
.hero-content p {
  color: var(--text-light); font-size:1.2rem;
  margin-bottom:1.5rem;
}
.btn {
  background: var(--primary); color: var(--text-light);
  padding:14px 30px; text-decoration:none;
  border-radius:30px; font-weight:600;
  transition: background 0.3s;
}
.btn:hover {
  background: var(--primary-dark);
}

h2 {
  font-size:2rem; text-align:center; margin-bottom:1rem;
  color: var(--primary-dark);
}
.about p {
  text-align:center; max-width:800px;
  margin: auto;
}

.services .grid.three, .portfolio .grid.three {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 40px;
}
.card, .work {
  background:#fff; border-radius:12px;
  overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.05);
  transition: transform .3s, box-shadow .3s;
}
.card:hover, .work:hover {
  transform: translateY(-8px);
  box-shadow:0 8px 30px rgba(0,0,0,0.1);
}
.card { padding:30px; }
.grid.three img {
  width:100%; display:block;
}

.contact {
  text-align:center;
}
.contact p a {
  color: var(--primary);
  text-decoration: none;
}
.contact p a:hover {
  text-decoration: underline;
}

.footer {
  background:#fff; text-align:center;
  padding:30px 0;
}
.footer p {
  color:#666; margin-bottom:10px;
}
.footer .socials a {
  margin: 0 8px;
  filter: grayscale(100%);
  transition: filter .3s;
}
.footer .socials a:hover {
  filter: none;
}

/* Responsive: smaller hero text */
@media(max-width:768px){
  .hero-content h1 { font-size:2.2rem; }
  .hero-content p { font-size:1rem; }
}