/* === Font Imports (keep this in your HTML ) === */
/* Righteous for headers, Rubik for body text */
/* === Root Color Variables === */
:root {
--primary: #2a4f4f; /* Deep Teal */
--secondary: #f4b63d; /* Sun Gold */
--accent: #d56542; /* Rust Orange */
--soft-aqua: #88c1b0; /* Soft Vintage Aqua */
--background: #f3ede3; /* Creamy Paper */
--text: #29373b; /* Soft Black */
}
/* === Global Reset & Base Styles === */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background);
color: var(--text);
font-family: 'Rubik', sans-serif;
line-height: 1.6;
font-size: 16px;
overflow-x: hidden;
}
img {
max-width: 100%;
}
/* === Headings === */
h1, h2, h3, h4 {
font-family: 'Righteous', cursive;
color: var(--primary);
letter-spacing: 0.5px;
margin-bottom: 0.5em;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
position: relative;
}
.why-choose-us h2 {
filter: drop-shadow(2px 3px 0 #a9c9bb);
text-align: center;
font-size: 3rem;
line-height: 3.8rem;
}
.why-choose-us .container {
padding: 10px;
}
/* === Hero Section === */
.hero {
padding: 4rem 2rem;
text-align: center;
background-color: var(--soft-aqua);
color: white;
background-color: #77A99B;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%237cb1a2' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%2381b9a9' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2386c1af' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%238cc8b6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%2392CFBC' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%2395d6c2' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2399dcc7' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%239de2cd' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23a2e7d2' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23A7ECD7' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
}
.why-choose-us {
position: relative;
padding-top: 80px;
background-image: url(../images/03.png);
background-size: contain;
background-position: center;
background-repeat: repeat;
}
.why-choose-us::after {
content: '';
background-image: url(../images/truck-wrap.png);
height: 150px;;
z-index: 10;
max-width: 100%;
width: 300px;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: -80px;
right: 0;
left: 0;
display: flex;
margin-left: auto;
margin-right: auto;
}
.subtitle {
text-align: center;
}
.hero h1 {
color: white;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.dot {
width: 10px;
height: 10px;
background-color: var(--soft-aqua);
margin: 5px;
border-radius: 50%;
}
.features li {
max-width: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0px;
color: var(--primary);
border-radius: 0 2px 2px 0;
gap: 10px;
margin: 0 auto;
}
.features img {
width: 240px;
max-width: 500px;
}
li div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
}
.title-benefit {
background: #4f857d; /* your retro teal or highlight color */
color: white;
font-weight: normal;
font-family: 'Righteous', cursive;
padding: 1px 3px 6px 8px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
line-height: 1.4;
display: inline;
font-size: min(25px, 5.5vw);
text-align: center;
margin: 0 auto;
}
.benefit-description {
padding-top: 10px;
text-align: center;
}
.benefits-review {
color: var(--background);
font-size: 20px;
font-weight: normal;
padding: 40px 30px;
text-transform: uppercase;
background-color: var(--accent);
font-family: 'Righteous', cursive;
background-color: var(--accent);
margin: 40px auto 0 auto;
position: relative;
background-image: url(../images/dust.png);text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
background-size: contain;
font-family: 'Permanent Marker', cursive;
font-weight: 100;
letter-spacing: 2px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
text-shadow: 0 0 2px black;
}
blockquote {
font-family: 'Permanent Marker', cursive;
}
.benefits-section-top {
position: absolute;
background-image: url(/resources/images/star.png);
background-repeat: repeat-x space;
width: 100%;
top: 10px;
left: 0;
right: 0;
margin: 0 auto;
height: 20px;
background-size: contain;
}
.benefits-section-bottom {
position: absolute;
background-image: url(/resources/images/star.png);
background-repeat: repeat-x space;
width: 100%;
bottom: 10px;
left: 0;
right: 0;
margin: 0 auto;
height: 20px;
background-size: contain;
}
.features {
display: flex;
flex-direction: column;
gap: 20px;
}
.hero p {
max-width: 600px;
margin: 1rem auto;
font-size: 1.2rem;
color: #fefefe;
margin-bottom: 20px
}
/* === CTA Button === */
.button.cta {
background-color: var(--secondary);
color: white;
padding: 14px 28px;
font-weight: normal;
font-size: 1rem;
letter-spacing: 1px;
border: none;
border-bottom: 5px solid #c58e00; /* darker gold for 3D shadow */
border-radius: 6px;
cursor: pointer;
box-shadow: 0 4px 0 #c58e00;
transition: all 0.15s ease-in-out;
font-family: 'Righteous', cursive;
text-shadow: 1px 1px rgba(0,0,0,0.1);
margin-top: 30px;
display: block;
}
.button.cta:hover {
background-color: #e09b1f;
}
/* === Retro Scrollbar Style === */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #173b3a; /* retro cream */
border-left: 2px solid #2a4f4f;
}
::-webkit-scrollbar-thumb {
background-color: #f4b63d; /* sun gold */
border: 2px solid #2a4f4f; /* deep teal border */
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #e09b1f;
}
.button.cta:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #c58e00;
border-bottom: 3px solid #c58e00;
}
/* === Links === */
a {
color: var(--primary);
text-decoration: none;
}
a:hover {
color: var(--accent);
}
/* === Utility Classes === */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.dot-holder {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.services-heading {
filter: drop-shadow(2px 3px 0 #a9c9bb);
text-align: center;
font-size: min(3rem, 10vw);
line-height: min(3.8rem, 10vw);
margin-bottom: 50px;
}
.services {
background-color: var(--text);
color: var(--background);
padding: 80px 10px 30px 10px;
background-color: var(--background);
background-image: url(../images/03.png);
background-size: contain;
background-repeat: repeat;
background-position: center;
}
.services p, .services h2, .services h3 {
color: var(--primary);
}
.torn-photo {
display: inline-block;
padding: 8px;
background: var(--background);
border-right: 7px solid #a38a85;
border-bottom: 7px solid #8f7670;
width: 90%;
box-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.5), /* strong bottom shadow */
0 0 3px rgba(0, 0, 0, 0.2); /* slight blur for realism */
position: relative;
margin-bottom: 1rem;
object-fit: cover;
position: relative;
overflow: visible;
margin-left: auto;
margin-right: auto;
}
.torn-photo::after {
content: "";
position: absolute;
rotate: 135deg;
width: 70px;
height: 20px;
color: black;
top: 0;
left: -20px;;
z-index: 10;;
opacity: 1;
border: 1px solid rgb(207, 207, 207);
background-color: var(--primary);
clip-path: polygon(
/* Top left */
0% 0%,
/* Left jagged edge */
5% 10%, 0% 20%, 5% 30%, 0% 40%, 5% 50%, 0% 60%, 5% 70%, 0% 80%, 5% 90%,
/* Bottom left */
0% 100%,
/* Bottom right */
100% 100%,
/* Right jagged edge */
95% 90%, 100% 80%, 95% 70%, 100% 60%, 95% 50%, 100% 40%, 95% 30%, 100% 20%, 95% 10%,
/* Top right */
100% 0%
);
}
.torn-photo img {
display: block;
max-width: 100%;
width: 100%;
border-radius: 2px;
height: 300px;
object-fit: cover;
filter: sepia(0.1) contrast(1.1) saturate(0.8) brightness(0.95);
transform: rotate(-0.5deg);
/* subtle tilt for style */
border: 1px solid rgba(0, 0, 0, 0.349);
}
.thumb-tack-right {
position: absolute;
top: 25px;
right: -10px;
width: 75px !important;
height: 75px !important;
object-fit: contain !important;
clip-path: none !important;
z-index: 10;
}
.thumb-tack-left {
position: absolute;
top: 25px;
left: -10px;
width: 75px !important;
height: 75px !important;
object-fit: contain !important;
clip-path: none !important;
z-index: 10;
}
/* Default stacked layout on mobile */
.service-grid {
display: flex;
flex-direction: column;
gap: 3rem;
}
.service-description {
color: var(--text);
padding: 15px;
text-align: center;
}
.service {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* default alignment */
}
.service:nth-child(odd) .service-description {
padding-left: 10px;;
padding-top: 10px;
padding-bottom: 10px;
}
/* Even-numbered services: pull to the right on mobile */
.service:nth-child(even) {
align-items: flex-end;
text-align: right;
}
/* Ensure images align with content direction */
.service:nth-child(even) .torn-photo {
align-self: flex-end;
}
.service:nth-child(odd) .torn-photo {
align-self: flex-start;
}
.service:nth-child(odd) .service-title {
background-color: #4f857d;
font-weight: normal;
color: var(--background);
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
}
.service:nth-child(even) .service-title {
background-color:#4f857d;
font-weight: normal;
padding-left: 10px;
padding-right: 10px;
color: var(--background);
padding-top: 5px;
}
.service-title {
margin-bottom: 0;
margin-top: 10px;
rotate: 0.5deg;
font-size: 20px;
text-align: center;
margin-left: auto;
margin-right: auto;
border-bottom: 5px solid transparent;
position: relative;
text-shadow: 0 0 3px black;
}
.service-cta {
background-color: var(--secondary);
color: white;
padding: 14px 28px;
font-weight: normal;
font-size: 1rem;
letter-spacing: 1px;
border: none;
border-bottom: 5px solid #c58e00; /* darker gold for 3D shadow */
border-radius: 6px;
cursor: pointer;
box-shadow: 0 4px 0 #c58e00;
transition: all 0.15s ease-in-out;
font-family: 'Righteous', cursive;
text-shadow: 1px 1px rgba(0,0,0,0.1);
margin-top: 10px;
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.521),
-1px 2px 1px rgba(0, 0, 0, 0.24),
1px 2px 1px rgba(0, 0, 0, 0.253)
;
}
.service-cta:hover {
background-color: #e09b1f;
}
.testimonial-slider {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
margin-top: 2rem;
padding: .1rem;
background-color: var(--background);
width: 90%;
margin-right: auto;
margin-left: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
background-image: url(../images/03.png);
background-size: contain;
background-repeat: repeat;
}
.testimonial-slide {
display: none;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 600px;
transition: opacity 0.5s ease;
padding: 10px;
position: relative;
}
.testimonial-slide::after {
content: "";
position: absolute;
rotate: 135deg;
width: 70px;
height: 20px;
color: black;
top: 0;
left: -20px;;
z-index: 10;;
opacity: 1;
border: 1px solid rgb(207, 207, 207);
background-color: var(--primary);
clip-path: polygon(
/* Top left */
0% 0%,
/* Left jagged edge */
5% 10%, 0% 20%, 5% 30%, 0% 40%, 5% 50%, 0% 60%, 5% 70%, 0% 80%, 5% 90%,
/* Bottom left */
0% 100%,
/* Bottom right */
100% 100%,
/* Right jagged edge */
95% 90%, 100% 80%, 95% 70%, 100% 60%, 95% 50%, 100% 40%, 95% 30%, 100% 20%, 95% 10%,
/* Top right */
100% 0%
);
}
.testimonial-slide.active {
display: flex;
}
.testimonial-slide img {
width: 100%;
max-width: 500px;
margin-bottom: 1rem;
object-fit: cover;
height: auto;
aspect-ratio: 1/1;
border: solid white 3px;
box-shadow: 0 0 1px black;
rotate: -.5deg;
}
.testimonial-slide blockquote {
font-size: 1.1rem;
font-style: italic;
line-height: 1.6;
color: #333;
}
.testimonial-slide span {
display: block;
margin-top: 0.5rem;
font-weight: bold;
color: #7f3286; /* Your brand color */
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
background: none;
border: none;
color: #7f3286;
cursor: pointer;
z-index: 1;
}
.arrow.left {
left: -20px;
background-color: #2a4f4f;
color: var(--background);
padding: 5px;
border: 2px solid var(--secondary);
box-shadow: 0 0 2px black;
}
.arrow.right {
right: -20px;
background-color: #2a4f4f;
color: var(--background);
padding: 5px;
border: 2px solid var(--secondary);
box-shadow: 0 0 2px black;
}
.trust-badges {
background-color: #e8782200; /* dusty orange transparent overlay */
padding: 2rem 0;
overflow: hidden;
position: relative;
}
.badge-scroll-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* iOS momentum scroll */
scroll-behavior: smooth;
white-space: nowrap;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
position: relative;
}
.badge-scroll-container::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
.badge-track {
display: flex;
align-items: center;
gap: 40px;
padding: 10px 0;
min-width: 1500px; /* ensures horizontal overflow */
}
.badge-scroll-container img {
height: 100px;
flex-shrink: 0;
display: inline-block;
transition: transform 0.3s ease;
}
.badge-track img:hover {
transform: scale(1.1);
}
/* Decorative border stars */
.trust-badges::before,
.trust-badges::after {
content: "";
position: absolute;
background-image: url(/resources/images/star.png);
background-repeat: repeat-x space;
width: 100%;
height: 20px;
background-size: contain;
left: 0;
right: 0;
margin: 0 auto;
}
.trust-badges::before {
bottom: 10px;
}
.trust-badges::after {
top: 10px;
}
/* Testimonial tweaks */
.testimonials .container {
padding: 10px;
}
blockquote span {
font-size: 24px;
color: var(--text) !important;
}
.testimonials {
background-color: var(--accent);
color: var(--background);
background-image: url(/resources/images/03.png);
background-size: contain;
background-repeat: repeat;
position: relative;
padding-top: 50px;
}
.testimonials::after {
content: "";
position: absolute;
background-image: url(/resources/images/star.png);
background-repeat: repeat-x space;
width: 100%;
top: 10px;
left: 0;
right: 0;
margin: 0 auto;
height: 20px;
background-size: contain;
}
.testimonials h2 {
color: var(--background);
text-shadow:
0 0 2px black,
1px 1px 0 #ffd37a, /* highlight layer */
/* darker shadow */
3px 3px 0 #6b260d; /* deep offset for depth */
font-weight: normal;
letter-spacing: 2px;;
font-size: min(3rem, 10vw);
text-align: center;
}
.testimonial-subtitle {
text-align: center;
text-shadow: 0 0 2px var(--text);
font-size: 20px;
}
@keyframes scroll-badges {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
body {
font-size: 16px;
}
.hero {
padding: 50px 10px;
padding-bottom: 100px;
}
.container {
padding: 0 0;
}
h1 {
font-size: 2rem;
line-height: 1.2;
}
.hero img {
max-width: 80%;
}
.service-grid {
display: flex;
flex-direction: column;
gap: 5.5rem;
}
.before-after {
display: flex;
flex-direction: column;
gap: 1rem;
}
iframe {
height: 200px;
}
form input,
form select,
form button {
width: auto;
margin-bottom: 1rem;
}
.hero-phone {
font-size: 1rem;
margin: 1rem 0;
}
.button.cta {
max-width: 70%;
margin: 0 auto;
font-size: 1rem;
padding: 14px;
}
}