.static-page-hero {
padding: 70px 0 40px;
text-align: center;
}
.static-page-hero--image {
padding: 0;
height: 45vh;
min-height: 320px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
}
.static-page-hero-overlay {
width: 100%;
background: linear-gradient(to top, rgba(1, 40, 36, .65), transparent);
padding: 50px 0 30px;
color: #fff;
}
.static-page-hero--image .titleThird {
color: #fff;
}
.static-page-hero-subtitle {
font-size: 1.1rem;
margin-top: 10px;
opacity: .9;
}
.static-page-content {
padding: 20px 0 70px;
line-height: 1.8;
}
.static-page-content h2,
.static-page-content h3 {
margin-top: 30px;
margin-bottom: 15px;
} .contact-details-list {
list-style: none;
margin: 0;
padding: 0;
}
.contact-details-list li {
padding: 14px 0;
border-bottom: 1px solid #e6e6e0;
font-size: 1.05rem;
}
.contact-form .form-control {
width: 100%;
padding: 12px 16px;
border: 1px solid #d8d8d0;
border-radius: 4px;
font-family: inherit;
font-size: 1rem;
}
.contact-form textarea.form-control {
resize: vertical;
}
.contact-form-notice {
padding: 14px 18px;
border-radius: 4px;
margin-bottom: 20px;
font-size: .95rem;
}
.contact-form-notice--success {
background-color: #e6f4ea;
color: #1e7b34;
}
.contact-form-notice--error {
background-color: #fbeaea;
color: #b3261e;
} .testimonial-grid-card {
margin-top: 0;
padding: 35px 30px;
height: 100%;
} .portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.portfolio-item {
position: relative;
overflow: hidden;
border-radius: 4px;
aspect-ratio: 4 / 5;
}
.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.portfolio-item:hover img {
transform: scale(1.05);
}
.portfolio-item-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 18px;
background: linear-gradient(to top, rgba(1, 40, 36, .8), transparent);
color: #fff;
}
.portfolio-item-title {
font-weight: 600;
text-transform: uppercase;
font-size: .95rem;
}
.portfolio-item-category {
font-size: .8rem;
opacity: .85;
}
@media only screen and (max-width: 991px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 575px) {
.portfolio-grid {
grid-template-columns: repeat(1, 1fr);
}
.static-page-hero--image {
height: 35vh;
min-height: 260px;
}
}