.social-bar {
--social-bar-bg: #ffffff;
--social-bar-hover-bg: #f5f5f5;
--social-icon-size: 4.375rem;
--social-icon-container: 6.25rem;
--social-icon-gap: 0;
--social-icon-padding: 0.5rem;
--social-icon-transition: background-color 0.2s ease;
padding: 0;
background-color: var(--social-bar-bg);
border: none;
width: 100%;
overflow: hidden;
}
.social-icons {
display: flex;
justify-content: center;
align-items: center;
gap: var(--social-icon-gap);
flex-wrap: nowrap;
margin: 0;
width: 100%;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--social-icon-container);
height: var(--social-icon-container);
border: none;
border-radius: 0;
background-color: var(--social-bar-bg);
box-shadow: none;
transition: var(--social-icon-transition);
padding: var(--social-icon-padding);
text-decoration: none;
}
.social-icon:hover {
transform: none;
box-shadow: none;
background-color: var(--social-bar-hover-bg);
}
.social-icon img {
width: var(--social-icon-size);
height: var(--social-icon-size);
object-fit: contain;
border: none;
}
.social-bar {
container-type: inline-size;
}
@container (max-width: 1200px) {
.social-bar {
--social-icon-size: 3.75rem;
--social-icon-container: 5.625rem;
--social-icon-padding: 0.25rem;
}
}
@container (max-width: 768px) {
.social-bar {
--social-icon-size: clamp(2.5rem, 4cqw, 3.125rem);
--social-icon-container: clamp(3.5rem, 6cqw, 5rem);
}
.social-icons {
flex-wrap: wrap;
}
}
@supports not (container-type: inline-size) {
@media (max-width: 1200px) {
.social-bar {
--social-icon-size: 3.75rem;
--social-icon-container: 5.625rem;
--social-icon-padding: 0.25rem;
}
}
@media (max-width: 768px) {
.social-bar {
--social-icon-size: clamp(2.5rem, 4vw, 3.125rem);
--social-icon-container: clamp(3.5rem, 6vw, 5rem);
}
.social-icons {
flex-wrap: wrap;
}
}
}
.social-bar.compact {
--social-icon-size: 2.5rem;
--social-icon-container: 3.5rem;
}
.social-bar.dark {
--social-bar-bg: #1a1a1a;
--social-bar-hover-bg: #333333;
}
.social-bar.spaced {
--social-icon-gap: 1rem;
}
.social-bar.large {
--social-icon-size: 5rem;
--social-icon-container: 7rem;
}
.testimonials-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
@media (max-width: 549px) {
.testimonials-content {
padding: 0 1.5rem;
}
}
.testimonials-carousel {
position: relative;
width: 100%;
margin: 0 auto;
padding: var(--spacing-lg) 0;
background: var(--background-dark);
border-radius: var(--border-radius);
box-shadow: var(--shadow-medium);
}
.carousel-slides-container {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.carousel-wrapper {
position: relative;
overflow: hidden;
flex: 1;
}
.carousel-arrow {
display: none;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--border-light);
border-radius: 50%;
width: 40px;
height: 40px;
flex-shrink: 0;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: var(--text-color);
}
.carousel-arrow:hover {
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transform: scale(1.1);
}
.carousel-arrow:active {
transform: scale(0.95);
}
.carousel-arrow svg {
width: 24px;
height: 24px;
}
.carousel-empty {
display: none;
text-align: center;
padding: var(--spacing-xxl) var(--spacing-sm);
color: var(--text-muted);
font-style: italic;
}
.carousel-loading {
display: none;
text-align: center;
padding: var(--spacing-xxl) var(--spacing-sm);
color: var(--text-muted);
font-style: italic;
}
.testimonial-slide {
display: none;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.testimonial-slide.active {
display: block;
position: relative;
}
.testimonial-slide.slide-in-right {
animation: slideInRight 0.5s ease-out forwards;
}
.testimonial-slide.slide-in-left {
animation: slideInLeft 0.5s ease-out forwards;
}
.testimonial-slide.slide-out-left {
animation: slideOutLeft 0.5s ease-out forwards;
}
.testimonial-slide.slide-out-right {
animation: slideOutRight 0.5s ease-out forwards;
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOutLeft {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
.testimonial-content {
text-align: center;
padding: var(--spacing-lg);
width: 100%;
margin: 0 auto;
background: white;
border: 2px solid var(--border-light);
border-radius: var(--border-radius);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.rating-stars {
font-size: var(--fs-lg);
margin-bottom: var(--spacing-sm);
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
}
.testimonial-quote-box {
display: grid;
place-items: center;
height: calc(1.6em * 5);
margin-bottom: var(--spacing-md);
text-align: center;
}
.testimonial-quote {
font-size: var(--fs-lg);
line-height: 1.6;
color: var(--text-color);
font-style: italic;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: balance;
padding: 0 2px;
}
.testimonial-author {
margin-bottom: 15px;
line-height: 1.4;
}
.testimonial-author strong {
color: var(--text-color);
font-size: var(--fs-body);
}
.author-location {
color: var(--text-muted);
font-size: var(--fs-sm);
}
.author-service {
color: var(--text-tertiary);
font-size: var(--fs-xs);
font-style: italic;
}
.review-link-container {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: var(--spacing-xs);
}
.google-logo {
display: inline-block;
vertical-align: middle;
}
.review-link-text {
color: #0066c0;
text-decoration: none;
font-size: var(--fs-sm);
transition: color 0.2s ease;
}
.review-link-text:hover {
color: #004d99;
text-decoration: underline;
}
.carousel-navigation {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: var(--spacing-md);
width: 100%;
}
.nav-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background-color: #d1d5db;
cursor: pointer;
transition: all 0.15s ease-out;
padding: 0;
}
.nav-dot.dot-pos-1 {
transform: scale(0.6);
order: 1;
}
.nav-dot.dot-pos-2 {
transform: scale(0.8);
order: 2;
}
.nav-dot.dot-pos-3 {
transform: scale(1);
order: 3;
}
.nav-dot.dot-pos-4 {
transform: scale(0.8);
order: 4;
}
.nav-dot.dot-pos-5 {
transform: scale(0.6);
order: 5;
}
.nav-dot.active.dot-pos-1 {
background-color: #3b82f6;
transform: scale(0.65);
order: 1;
}
.nav-dot.active.dot-pos-2 {
background-color: #3b82f6;
transform: scale(0.85);
order: 2;
}
.nav-dot.active.dot-pos-3 {
background-color: #3b82f6;
transform: scale(1.2);
order: 3;
}
.nav-dot.active.dot-pos-4 {
background-color: #3b82f6;
transform: scale(0.85);
order: 4;
}
.nav-dot.active.dot-pos-5 {
background-color: #3b82f6;
transform: scale(0.65);
order: 5;
}
.nav-dot:hover {
background-color: #9ca3af;
}
.carousel-navigation {
position: relative;
}
.carousel-navigation.slide-left .nav-dot.dot-pos-1 {
animation: slideLeft-pos1 0.3s ease-in-out;
}
.carousel-navigation.slide-left .nav-dot.dot-pos-2 {
animation: slideLeft-pos2 0.3s ease-in-out;
}
.carousel-navigation.slide-left .nav-dot.dot-pos-3 {
animation: slideLeft-pos3 0.3s ease-in-out;
}
.carousel-navigation.slide-left .nav-dot.dot-pos-4 {
animation: slideLeft-pos4 0.3s ease-in-out;
}
.carousel-navigation.slide-left .nav-dot.dot-pos-5 {
animation: slideLeft-pos5 0.3s ease-in-out;
}
.carousel-navigation.slide-right .nav-dot.dot-pos-1 {
animation: slideRight-pos1 0.3s ease-in-out;
}
.carousel-navigation.slide-right .nav-dot.dot-pos-2 {
animation: slideRight-pos2 0.3s ease-in-out;
}
.carousel-navigation.slide-right .nav-dot.dot-pos-3 {
animation: slideRight-pos3 0.3s ease-in-out;
}
.carousel-navigation.slide-right .nav-dot.dot-pos-4 {
animation: slideRight-pos4 0.3s ease-in-out;
}
.carousel-navigation.slide-right .nav-dot.dot-pos-5 {
animation: slideRight-pos5 0.3s ease-in-out;
}
@keyframes slideLeft-pos1 {
0% { transform: scale(0.6) translateX(0); }
50% { transform: scale(0.6) translateX(15px); }
100% { transform: scale(0.6) translateX(0); }
}
@keyframes slideLeft-pos2 {
0% { transform: scale(0.8) translateX(0); }
50% { transform: scale(0.8) translateX(15px); }
100% { transform: scale(0.8) translateX(0); }
}
@keyframes slideLeft-pos3 {
0% { transform: scale(1) translateX(0); }
50% { transform: scale(1) translateX(15px); }
100% { transform: scale(1) translateX(0); }
}
@keyframes slideLeft-pos4 {
0% { transform: scale(0.8) translateX(0); }
50% { transform: scale(0.8) translateX(15px); }
100% { transform: scale(0.8) translateX(0); }
}
@keyframes slideLeft-pos5 {
0% { transform: scale(0.6) translateX(0); }
50% { transform: scale(0.6) translateX(15px); }
100% { transform: scale(0.6) translateX(0); }
}
@keyframes slideRight-pos1 {
0% { transform: scale(0.6) translateX(0); }
50% { transform: scale(0.6) translateX(-15px); }
100% { transform: scale(0.6) translateX(0); }
}
@keyframes slideRight-pos2 {
0% { transform: scale(0.8) translateX(0); }
50% { transform: scale(0.8) translateX(-15px); }
100% { transform: scale(0.8) translateX(0); }
}
@keyframes slideRight-pos3 {
0% { transform: scale(1) translateX(0); }
50% { transform: scale(1) translateX(-15px); }
100% { transform: scale(1) translateX(0); }
}
@keyframes slideRight-pos4 {
0% { transform: scale(0.8) translateX(0); }
50% { transform: scale(0.8) translateX(-15px); }
100% { transform: scale(0.8) translateX(0); }
}
@keyframes slideRight-pos5 {
0% { transform: scale(0.6) translateX(0); }
50% { transform: scale(0.6) translateX(-15px); }
100% { transform: scale(0.6) translateX(0); }
}
.carousel-navigation.slide-left .nav-dot.active.dot-pos-3 {
animation: slideLeft-pos3-active 0.3s ease-in-out;
}
.carousel-navigation.slide-right .nav-dot.active.dot-pos-3 {
animation: slideRight-pos3-active 0.3s ease-in-out;
}
@keyframes slideLeft-pos3-active {
0% { transform: scale(1.2) translateX(0); }
50% { transform: scale(1.2) translateX(15px); }
100% { transform: scale(1.2) translateX(0); }
}
@keyframes slideRight-pos3-active {
0% { transform: scale(1.2) translateX(0); }
50% { transform: scale(1.2) translateX(-15px); }
100% { transform: scale(1.2) translateX(0); }
}
.nav-dot:focus {
outline: 2px solid var(--link-color);
outline-offset: 2px;
}
@media (max-width: 768px) {
.testimonials-carousel {
padding: var(--spacing-md) 0;
}
.carousel-slides-container {
gap: 0;
}
.testimonial-quote {
font-size: var(--fs-body);
}
.testimonial-content {
padding: var(--spacing-sm);
}
.carousel-arrow {
width: 32px;
height: 32px;
}
.carousel-arrow svg {
width: 20px;
height: 20px;
}
}
.service-tile {
background: rgba(249, 233, 76, 1);
border-radius: var(--border-radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: var(--shadow-light);
height: 100%;
}
.service-tile:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
.service-tile__image {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: rgba(0, 0, 0, 0.05);
}
.service-tile__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.service-tile__content {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex-grow: 1;
}
.service-tile__title {
font-size: 1.5rem;
font-weight: 700;
color: white;
background: var(--primary-color);
padding: 0.4rem 0.4rem 0.2rem 0.4rem;
margin: 0;
line-height: var(--lh-tight);
display: block;
}
.service-tile__subtitle {
font-size: 1rem;
color: var(--text-secondary);
margin: 0;
line-height: var(--lh-relaxed);
}
.lead-form-status:empty {
display: none;
}
.lead-form-status {
margin: 0.75rem 0 0;
font-size: 0.9rem;
}
form[aria-busy="true"] button[type="submit"] {
cursor: wait;
opacity: 0.7;
}
.lead-form, .hero-form-element, .contact-form, .minimal-form {
width: 100%;
max-width: 100%;
}
.form-group {
margin-bottom: 1rem;
}
.field-error {
color: #dc3545;
font-size: 0.875rem;
margin-top: 0.25rem;
display: block;
}
.hero-form-element .form-group {
margin-bottom: 1rem;
}
.hero-form-element .form-input {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
font-family: inherit;
box-sizing: border-box;
}
.hero-form-element .form-input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.hero-form-element .form-textarea {
min-height: 100px;
resize: vertical;
}
.hero-form-element .form-submit-btn {
width: 100%;
padding: 0.75rem 1.5rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 0.5rem;
}
.hero-form-element .form-submit-btn:hover {
background-color: #0056b3;
}
.hero-form-element .form-disclaimer {
font-size: 0.8rem;
color: #666;
margin-top: 0.75rem;
text-align: center;
line-height: 1.4;
}
.contact-form .form-group {
margin-bottom: 1rem;
}
.contact-form .form-field {
width: 100%;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
font-family: inherit;
box-sizing: border-box;
background-color: #fff;
}
.contact-form .form-field:focus {
outline: none;
border-color: #ff6b35;
box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.25);
}
.contact-form textarea.form-field {
min-height: 120px;
resize: vertical;
}
.contact-form .cta-estimate {
background-color: #ff6b35;
color: white;
padding: 0.75rem 2rem;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
width: auto;
display: inline-block;
}
.contact-form .cta-estimate:hover {
background-color: #e55a2b;
}
.minimal-form .form-group {
margin-bottom: 0.75rem;
}
.minimal-form .form-input {
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 0.9rem;
font-family: inherit;
box-sizing: border-box;
}
.minimal-form .form-input:focus {
outline: none;
border-color: #28a745;
box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
}
.minimal-form .form-submit-btn {
width: 100%;
padding: 0.5rem 1rem;
background-color: #28a745;
color: white;
border: none;
border-radius: 3px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
.minimal-form .form-submit-btn:hover {
background-color: #218838;
}
@media (max-width: 768px) {
.hero-form-element .form-input,
.contact-form .form-field,
.minimal-form .form-input {
font-size: 16px;
}
.hero-form-element .form-submit-btn,
.contact-form .cta-estimate,
.minimal-form .form-submit-btn {
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
}
.lead-form[data-submitting="true"] .form-submit-btn,
.hero-form-element[data-submitting="true"] .form-submit-btn,
.contact-form[data-submitting="true"] .cta-estimate,
.minimal-form[data-submitting="true"] .form-submit-btn {
opacity: 0.7;
cursor: not-allowed;
pointer-events: none;
}
.lead-form[data-submitting="true"] .form-submit-btn::after,
.hero-form-element[data-submitting="true"] .form-submit-btn::after,
.contact-form[data-submitting="true"] .cta-estimate::after,
.minimal-form[data-submitting="true"] .form-submit-btn::after {
content: " ...";
}