:root{
--bg:#f7f7f7;
--text:#222;
--muted:#666;
--accent:#b21e35;
--light:#ffffff;
--shadow:0 6px 20px rgba(0,0,0,.08);
--radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family: Calibri, Arial, Helvetica, sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.hero img,
.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.container{
width:min(1100px, 92%);
margin-inline:auto;
}

.site-header{
background:var(--light);
border-bottom:1px solid #e7e7e7;
}
.logo{
margin:18px 0 6px 0;
letter-spacing:2px;
font-weight:700;
}
.tagline{
margin:0 0 14px 0;
color:var(--muted);
}
.nav{
display:flex;
gap:14px;
flex-wrap:wrap;
padding:10px 0 18px 0;
border-top:1px solid #eee;
}
.nav a{
text-decoration:none;
padding:8px 14px;
border-radius:999px;
background:#f0f0f0;
color:#222;
font-weight:600;
transition:transform .06s ease, background .2s ease;
}
.nav a:hover{ transform:translateY(-1px); }
.nav a.active, .nav a:focus{
background:var(--accent);
color:#fff;
}

.gallery{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.images{
    width: 400px;
    padding-top: 40px;
}

.hero-caption{
background:rgba(0,0,0,.55);
color:#fff;
padding:10px 14px;
border-radius:10px;
font-weight:600;
margin:12px;
}

.intro{
background:var(--light);
padding:24px;
margin:18px auto;
border-radius:var(--radius);
box-shadow:var(--shadow);
}
.intro h2{ margin-top:0 }

.cards{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:18px;
margin:22px auto 40px;
}
.card{
background:var(--light);
padding:20px;
border-radius:var(--radius);
box-shadow:var(--shadow);
display:flex;
flex-direction:column;
justify-content: space-between;
gap:12px;
}
.card h3{ margin:0 }
.card p{ margin:0 0 6px 0; color:var(--muted); }

.btn{
align-self:flex-start;
background:var(--accent);
color:#fff;
text-decoration:none;
padding:10px 14px;
border-radius:12px;
font-weight:700;
transition:opacity .2s ease, transform .06s ease;
}
.btn:hover{ opacity:.92; transform:translateY(-1px); }

.site-footer{
padding:28px 0 40px;
color:#888;
font-size:14px;
text-align:center;
}

@media (max-width: 900px){
.cards{ grid-template-columns:1fr 1fr; }
.hero{ height:360px; }
}
@media (max-width: 560px){
.cards{ grid-template-columns:1fr; }
.hero{ height:280px; }
}

.contact-form {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 520px;
  margin: 24px auto;
}

@media (max-width: 560px) {
  .contact-form {
    padding: 16px;
    margin: 16px auto;
  }
}


.contact-form label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.contact-form button {
  margin-top: 15px;
  background-color: #a41414;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.contact-form button:hover {
  background-color: #7d0f0f;
}