/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }


body { font-family: Arial, Helvetica, sans-serif; line-height: 1.6; color: #222; background: #f7f7f9; }

.site-nav { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: 1rem 2rem; background: #0b2545; border-bottom: 1px solid rgba(255,255,255,0.06); }
.site-nav .logo { font-weight: 700; color: #fff; text-decoration: none; font-size: 1.1rem; }


.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.nav-links { display: flex; gap: 1rem; list-style: none; }
.nav-links a {
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  padding: .35rem .6rem;
  border-radius: 6px;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}
.nav-links a:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}
.nav-links a[aria-current="page"] {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.hero { padding: 4rem 2rem; text-align: center; }
.hero h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.hero p { color: #555; margin-bottom: 1rem; }


.about-hero {
  width: 100vw; 
  margin-left: calc(50% - 50vw); 
  margin-right: calc(50% - 50vw);
  background: #111;
  color: #fff;
}
.about-hero .hero-img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  filter: brightness(0.75) contrast(0.95);
}
.info-box {
  width: 100%;
  padding: 2rem 1.25rem;
  background: linear-gradient(180deg, rgba(17,17,17,0.9), rgba(10,10,10,0.95));
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.info-box h1 { margin-bottom: .5rem; font-size: 1.6rem; }
.info-box p { color: #ddd; max-width: 980px; margin: 0 auto; line-height: 1.5; }

.content { padding: 2rem; max-width: 900px; margin: 0 auto; }

/* Homepage snippet cards */
.snippets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 2rem; max-width: 1100px; margin: 0 auto 2rem; }
.card { background: #fff; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); overflow: hidden; display: flex; flex-direction: column; }
.card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.card-body { padding: 1rem; flex: 1; }
.card-body h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.card-body p { color: #444; margin-bottom: .75rem; }
.card-link { background: #0b7a44; color: #fff; padding: .4rem .6rem; border-radius: 6px; text-decoration: none; }

@media (max-width: 900px) {
  .snippets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .snippets { grid-template-columns: 1fr; padding: 1rem; }
}

/* Contact form styles */
.contact-inline { display: inline-flex; gap: .75rem; align-items: center; }
.mail-link, .tel-link { color: #fff; background: rgba(255,255,255,0.06); padding: .25rem .5rem; border-radius: 6px; text-decoration: none; }
.tel-link { display: none; }
@media (max-width: 600px) {
  .mail-link { display: none; }
  .tel-link { display: inline-block; }
}

.contact-form { display:block; margin-top:1rem }
.group, .contact-form .group { border:2px solid #0b7a44; padding:1rem; border-radius:8px; margin:0 0 1rem; background:#fff }
.group legend, .contact-form legend { font-weight:700; color:#0b7a44; padding:0 .25rem }
.contact-form label { display:block; margin:.5rem 0 .25rem }
.contact-form :is(input[type="text"],input[type="email"],input[type="date"],select,textarea) { width:100%; padding:.5rem; border:1px solid #dcdcdc; border-radius:4px }
.form-actions { display:flex; gap:.75rem; justify-content:center; margin-top:.75rem }
.btn { background:#0b7a44; color:#fff; padding:.6rem 1rem; border-radius:6px; border:none; cursor:pointer; display:inline-block; text-decoration:none }
.btn-ghost { background:transparent; color:#0b7a44; border:1px solid #0b7a44 }
.contact-form .group label input { margin-right:.5rem }


.flexbox { display: flex; gap: 1.25rem; align-items: center; margin: 1.25rem 0 2rem; }
.flexbox .flexbox-text { flex: 1; }
.side-img { width: 260px; height: 160px; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.flexbox h2 { margin-top: 0; }
.content a { color: #0b2545; text-decoration: underline; }

/* Footer styles with contact links */
.site-footer { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:#0b2545; color:#fff; margin-top:2rem }
.site-footer a { color:rgba(255,255,255,0.95); text-decoration:none; margin-left:.5rem }
.site-footer .tel-link { display:none }
@media (max-width:600px) {
  .site-footer { flex-direction:column; gap:.5rem; text-align:center }
  .site-footer .mail-link { display:none }
  .site-footer .tel-link { display:inline-block }
}

.content h2 { margin-top: 0; }
.content ul { margin-left: 1.1rem; color: #333; }


footer { padding: 1rem 2rem; text-align: center; color: #666; font-size: .9rem; margin-top: 2rem; }

@media (max-width: 600px) {
  .site-nav { padding: .75rem 1rem; }
  .nav-links { gap: .5rem; }
  .hero h1 { font-size: 1.5rem; }
  .about-hero .hero-img { height: 200px; }
  .info-box { padding: 1rem; }
  .content { padding: 1rem; }
  .flexbox { flex-direction: column-reverse; }
  .side-img { width: 100%; height: 220px; }
}