html, body {
height: 100%;
margin: 0;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #f4f6f8;
color: #333;
line-height: 1.6;
}
header {
background: #0f4c81;
color: white;
padding: 25px;
text-align: center;
}
nav {
margin-top: 10px;
}
nav a {
color: white;
margin: 0 12px;
text-decoration: none;
font-weight: bold;
}
nav a:focus,
nav a:hover {
text-decoration: underline;
}
section {
max-width: 1000px;
margin: auto;
padding: 40px 20px;
}
h1, h2, h3 {
color: #0f4c81;
}
footer {
background: #222;
color: white;
text-align: center;
padding: 15px;
}
.button {
background: #0f4c81;
color: white;
padding: 12px 25px;
text-decoration: none;
border-radius: 5px;
display: inline-block;
}
input, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
max-width: 500px;
}
label {
font-weight: bold;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
/* Form validation + accessibility */
input:focus, textarea:focus, button:focus {
outline: 3px solid currentColor;
outline-offset: 2px;
}
input:invalid, textarea:invalid {
border: 2px solid #b00020;
}
input:invalid:focus, textarea:invalid:focus {
box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.25);
}
.form-help {
font-size: 0.9em;
margin-top: 6px;
}
/* Header logo */
.header-brand {
text-align: center;
padding: 18px 12px 8px;
}
.brand {
display: inline-block;
}
.brand-logo {
max-width: 180px; /* adjust if you want larger */
width: 100%;
height: auto;
}
.tagline {
margin: 8px 0 0;
font-size: 1rem;
}
@media (max-width: 600px) {
.brand-logo {
max-width: 150px;
}
}
/* ================================
Page background images
Add class on per page:
home-page, about-page, services-page, contact-page
================================ */
body.home-page {
background: url("../assets/images/background2.jpg") center/cover no-repeat fixed;
}
body.about-page {
background: url("../assets/images/about-background.jpg") center/cover no-repeat fixed;
}
body.services-page {
background: url("../assets/images/services-background.jpg") center/cover no-repeat fixed;
}
body.contact-page {
background: url("../assets/images/contact-background.jpg") center/cover no-repeat fixed;
}
/* Optional: makes text readable on background images */
main {
background: rgba(255, 255, 255, 0.92);
max-width: 1100px;
margin: 24px auto;
padding: 24px;
border-radius: 12px;
}
/* ================================
Clickable Gallery (uniform size)
================================ */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 24px;
}
.gallery-link {
display: block;
width: 100%;
max-width: 100%;
border-radius: 12px;
overflow: hidden;
border: 1px solid #ddd;
background: #fff;
}
.gallery-link img {
width: 100%;
height: 240px; /* SAME visual height for all */
object-fit: cover; /* crops cleanly */
display: block;
border-radius: 12px;
}
/* ================================
Lightbox (popup + next/prev)
================================ */
.no-scroll {
overflow: hidden;
}
.lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 18px;
}
.lightbox.is-open {
display: flex;
}
.lightbox-image {
max-width: min(92vw, 1100px);
max-height: 86vh;
width: auto;
height: auto;
border-radius: 10px;
background: #fff;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
position: absolute;
border: 0;
background: rgba(255,255,255,0.95);
color: #111;
cursor: pointer;
border-radius: 999px;
width: 44px;
height: 44px;
font-size: 28px;
line-height: 44px;
text-align: center;
}
.lightbox-close {
top: 14px;
right: 14px;
font-size: 30px;
}
.lightbox-prev {
left: 14px;
top: 50%;
transform: translateY(-50%);
}
.lightbox-next {
right: 14px;
top: 50%;
transform: translateY(-50%);
}
.lightbox-close:focus,
.lightbox-prev:focus,
.lightbox-next:focus {
outline: 3px solid #fff;
outline-offset: 2px;
}
@media (max-width: 600px) {
.lightbox-prev,
.lightbox-next {
width: 40px;
height: 40px;
font-size: 24px;
line-height: 40px;
}
}
.service-list {
margin: 1rem 0 1.5rem 1.25rem;
padding: 0;
list-style-type: disc;
}
.service-list li {
margin-bottom: 0.5rem;
line-height: 1.5;
}