body {
font-family: sans;
color: #1a1619;
padding: 0px;
margin: 0px;
}

.header-img {
text-align: center;
background-color: #fff;
font-size: 3em;
margin: 0;
padding: 10px;
}
.header-img img {
max-width:100%;
max-height:100%;
}

.bar {
background-color: #febc10;
}

h2 {
text-align: center;
font-size: 2em;
margin: 0;
padding: 10px;
}

h3 {
font-size: 1.5em;
text-align: center;
}

.hori-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
}

.picbox {
background-color: #f8fafc;
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
width: 263px;
padding: 0;
}

.picbox p {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}

.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.content {
flex: 1;
background-color: #fff;
}

#footer {
width: 100%;
height: 100px;
}

.contact-form-section {
background-color: #fff;
}

.contact-form-section h2 {
margin-bottom: 24px;
}

#contact-form {
max-width: 540px;
margin: 0 auto;
padding: 0 16px 40px;
}

.form-row {
display: flex;
flex-direction: column;
margin-bottom: 14px;
}

.form-row label {
font-weight: bold;
margin-bottom: 4px;
}

.req {
color: #c0392b;
}

.form-row input,
.form-row textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 10px;
font-size: 1em;
font-family: sans-serif;
background: #f8fafc;
}

.form-row input:focus,
.form-row textarea:focus {
outline: 2px solid #febc10;
border-color: #febc10;
}

#contact-form button[type=submit] {
background-color: #febc10;
border: none;
border-radius: 4px;
padding: 10px 32px;
font-size: 1em;
font-weight: bold;
cursor: pointer;
margin-top: 6px;
}

#contact-form button[type=submit]:disabled {
opacity: 0.6;
cursor: not-allowed;
}

#cf-status {
margin-bottom: 8px;
font-weight: bold;
}

.cf-ok { color: #27ae60; }
.cf-err { color: #c0392b; }