/* Base Reset */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; color:#222; background:#fafafa; line-height:1.6; text-transform: uppercase; }

/* Header */
.site-header {
  position: fixed; top:0; left:0; width:100%;
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 20px; background:rgba(255,255,255,0.95);
  backdrop-filter: blur(5px); z-index:1000; box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

/* Logo + Text */
.logo-container {
  display: flex;
  align-items: center;
}
.logo-img {
  height: 40px;
  width: auto;
  margin-right: 10px;
}
.logo-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #222;
}

.nav a { margin-left:15px; text-decoration:none; color:#222; font-weight:500; }
.nav a:hover { color:#555; }

/* Hero Section */
.hero {
  display:flex;
  flex-direction: column;
  align-items: center;
  padding:80px 20px 40px 20px; /* extra top padding for header */
  background:#fff;
}
.hero-img {
  width: 150px;
  height: auto;
  margin-bottom: 20px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.hero-text h1 { font-size:2rem; margin-bottom:12px; text-align:center; }
.hero-text p { font-size:0.95rem; max-width:400px; text-align:center; margin-bottom:20px; color:#444; }
.hero-buttons .btn { display:inline-block; margin:5px 8px; padding:10px 20px; background:#222; color:#fff; border-radius:25px; font-weight:700; transition:all .3s ease; text-decoration:none; }
.hero-buttons .btn:hover { background:#555; }

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

/* Bio Section */
.bio { padding:50px 20px; background:#fff; text-align:center; }
.bio img { width:120px; border-radius:50%; margin-bottom:15px; box-shadow:0 6px 18px rgba(0,0,0,0.15); }
.bio h2 { font-size:1.6rem; margin-bottom:12px; }
.bio p { max-width:550px; margin:0 auto; color:#444; font-size:0.95rem; line-height:1.6; }

/* Services Section */
.services { background:#f7f7f7; padding:40px 15px; }
.services h2 { font-size:1.6rem; text-align:center; margin-bottom:25px; }
.services-grid { display:grid; grid-template-columns:1fr; gap:20px; max-width:900px; margin:0 auto; }
.service-card { background:#fff; padding:18px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.12); text-align:center; transition:transform .3s ease, box-shadow .3s ease; }
.service-card:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,0.15); }
.service-card h3 { font-size:1.1rem; margin-bottom:8px; }
.service-card .price { margin-top:10px; font-weight:700; color:#555; }

/* Contact Section */
.contact { background:#fff; padding:40px 15px; text-align:center; }
.contact-form { max-width:450px; margin:0 auto; display:flex; flex-direction:column; }
.contact-form label { text-align:left; margin:10px 0 5px; font-weight:700; }
.contact-form input, .contact-form textarea { padding:10px; border:1px solid #ccc; border-radius:6px; font-size:0.95rem; width:100%; text-transform: uppercase; }
.contact-form button { margin-top:15px; padding:12px; background:#222; color:#fff; border:none; border-radius:6px; font-weight:700; cursor:pointer; transition:background .3s ease; text-transform: uppercase; }
.contact-form button:hover { background:#555; }

/* Footer */
.site-footer { background:#f0f0f0; padding:20px; text-align:center; color:#777; font-size:0.85rem; text-transform: uppercase; }

/* Responsive Breakpoints */
@media (min-width:768px){ .services-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){
  .hero-text h1{ font-size:1.6rem; }
  .hero-text p{ font-size:0.9rem; }
  .bio img{ width:100px; }
  .service-card h3{ font-size:1rem; }
  .hero-img { width:120px; }
  .logo-img { height:30px; }
  .logo-text { font-size:1.2rem; }
}