/* RESET & NORMALIZE */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font-size: 100%;
font: inherit;
box-sizing: border-box;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: #F3EDE8;
color: #1B5631;
font-family: 'Roboto', Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.65;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: #1B5631;
text-decoration: none;
transition: color 0.2s;
}
a:hover, a:focus {
color: #89A96B;
}
ul, ol {
margin-left: 1.5em;
}
strong, b {
font-weight: 700;
}
/* BRAND FONTS (Assume Montserrat and Roboto loaded via @import or link in ) */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 700;
letter-spacing: 0.01em;
color: #1B5631;
}
h1 { font-size: 2.5rem; line-height: 1.1; margin-bottom: 24px; }
h2 { font-size: 2rem; line-height: 1.2; margin-bottom: 20px; }
h3 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 12px; }
/* GLOBAL CONTAINERS & LAYOUT */
.container {
width: 100%;
max-width: 1200px;
padding: 0 18px;
margin: 0 auto;
}
.content-wrapper {
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 768px) {
.content-wrapper {
gap: 32px;
}
}
.section {
margin-bottom: 60px;
padding: 40px 20px;
background: none;
}
/* HERO SECTION */
.hero {
background: #89A96B;
color: #fff;
border-bottom: 10px solid #1B5631;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
margin-bottom: 0;
}
.hero .container {
padding-top: 40px;
padding-bottom: 40px;
}
.hero h1, .hero .lead {
color: #fff;
}
.hero .lead {
font-size: 1.2rem;
font-weight: 500;
font-family: 'Roboto', Arial, sans-serif;
margin-bottom: 32px;
}
/* CTA BUTTONS */
.cta-primary {
background: #1B5631;
color: #fff !important;
border: none;
padding: 14px 32px;
border-radius: 6px 32px 6px 32px;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 4px 16px rgba(27,86,49,0.08);
position: relative;
z-index: 1;
display: inline-block;
margin-top: 8px;
transition: background 0.2s, color 0.2s, transform 0.18s;
}
.cta-primary:hover,
.cta-primary:focus {
background: #256D3D;
color: #fff;
transform: translateY(-2px) scale(1.03);
outline: none;
}
/* NAVIGATION BAR */
header {
background: #fff;
border-bottom: 2px solid #89A96B;
position: sticky;
top: 0;
z-index: 102;
}
header .container {
min-height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo img {
height: 48px;
width: auto;
display: block;
}
.main-nav {
display: flex;
align-items: center;
gap: 22px;
}
.main-nav a {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 600;
font-size: 1rem;
color: #1B5631;
border-radius: 4px;
padding: 8px 14px;
transition: color 0.18s, background 0.18s;
position: relative;
}
.main-nav a.active, .main-nav a:hover, .main-nav a:focus {
color: #fff;
background: #1B5631;
}
.main-nav .cta-primary {
margin-left: 12px;
padding: 10px 26px;
font-size: 1rem;
}
.mobile-menu-toggle {
display: none;
}
@media (max-width: 992px) {
.main-nav {
gap: 16px;
}
.logo img {
height: 40px;
}
}
@media (max-width: 800px) {
.main-nav {
display: none;
}
.mobile-menu-toggle {
display: block;
background: none;
border: none;
font-size: 2rem;
color: #1B5631;
cursor: pointer;
z-index: 105;
padding: 8px;
margin-left: 12px;
border-radius: 8px;
transition: background 0.15s;
}
.mobile-menu-toggle:focus {
background: #89A96B20;
outline: none;
}
}
/* MOBILE MENU (SLIDE OVERLAY) */
.mobile-menu {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100vw;
height: 100vh;
background: #1B5631ee;
z-index: 2000;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.68,-0.55,0.27,1.55);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 0;
pointer-events: none;
}
.mobile-menu.open {
transform: translateX(0);
pointer-events: auto;
}
.mobile-menu-close {
align-self: flex-end;
background: none;
border: none;
color: #fff;
font-size: 2.3rem;
cursor: pointer;
padding: 24px 20px 6px 0;
margin-right: 4px;
z-index: 2002;
border-radius: 8px;
transition: background 0.15s;
}
.mobile-menu-close:focus {
background: #89A96B30;
outline: none;
}
.mobile-nav {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 24px;
width: 100%;
padding: 0 36px;
}
.mobile-nav a {
display: block;
width: 100%;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: #fff;
background: none;
border: none;
margin: 0;
padding: 16px 0;
border-radius: 0 40px 0 40px;
transition: background 0.17s, color 0.17s;
}
.mobile-nav a.active,
.mobile-nav a:hover, .mobile-nav a:focus {
background: #89A96B;
color: #1B5631;
}
@media (min-width: 801px) {
.mobile-menu { display: none!important; }
}
/* SECTIONS, FLEX GRIDS & CARDS */
.features, .about, .testimonials, .services, .cta, .contact-info, .legal, .thankyou-cta {
margin-bottom: 60px;
padding: 40px 20px;
background: none;
}
.feature-grid, .service-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 32px;
}
.feature-item, .service-item {
flex: 1 1 240px;
min-width: 220px;
background: #fff;
border: 2px solid #89A96B;
border-radius: 16px 48px 16px 48px;
box-shadow: 0 4px 24px #89A96B16;
padding: 28px 20px 20px 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
transition: transform 0.17s, box-shadow 0.17s;
margin-bottom: 20px;
}
.feature-item img, .service-item img {
height: 44px;
width: 44px;
margin-bottom: 12px;
}
.feature-item h3, .service-item h3 {
font-size: 1.18rem;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 600;
color: #1B5631;
margin-bottom: 6px;
}
.feature-item:hover, .service-item:hover {
transform: translateY(-6px) scale(1.025);
box-shadow: 0 8px 32px #1B563133;
border-color: #1B5631;
}
/* USP LISTS */
.usp-list {
display: flex;
flex-direction: column;
gap: 16px;
margin: 16px 0;
list-style: none;
}
.usp-list li {
display: flex;
align-items: center;
gap: 12px;
background: #F3EDE8;
color: #1B5631;
border-radius: 24px 7px 24px 7px;
padding: 11px 22px;
font-size: 1rem;
font-family: 'Roboto', Arial, sans-serif;
font-weight: 500;
border: 1px solid #89A96B55;
margin-bottom: 0 !important;
}
.usp-list li img {
width: 28px; height: 28px;
}
@media (min-width: 600px) {
.feature-grid, .service-list {
flex-direction: row;
justify-content: flex-start;
}
}
/* SERVICE LIST (IN LIST FORM) */
.services .service-list {
flex-direction: row;
flex-wrap: wrap;
gap: 24px;
}
.services .service-list li {
background: #fff;
border: 2px solid #89A96B;
border-radius: 18px 38px 18px 38px;
box-shadow: 0 4px 22px #89A96B11;
padding: 24px 18px;
margin-bottom: 20px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 1rem;
}
.highlighted-services {
background: #f3ede8;
border-left: 5px solid #1B5631;
border-radius: 0 18px 18px 0;
padding: 16px 20px;
margin-bottom: 20px;
margin-top: 20px;
}
.highlighted-services h3 {
color: #1B5631;
font-size: 1.1rem;
}
.highlighted-services ul {
list-style: disc inside;
margin: 12px 0 0 12px;
}
.highlighted-services li {
font-family: 'Roboto', Arial, sans-serif;
margin-bottom: 3px;
}
/* GENERAL TEXT SECTION FLEX PATTERNS */
.text-section {
font-family: 'Roboto', Arial, sans-serif;
font-size: 1.09rem;
color: #223d28;
background: none;
}
.text-image-section {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.text-image-section {
flex-direction: column;
gap: 18px;
align-items: flex-start;
}
}
/* TESTIMONIALS */
.testimonials {
background: #F3EDE8;
}
.testimonials .content-wrapper {
flex-direction: column;
gap: 28px;
}
.testimonial-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 20px 28px;
min-width: 220px;
max-width: 530px;
background: #fff;
border-left: 6px solid #89A96B;
border-radius: 0 22px 22px 0;
color: #1B5631;
box-shadow: 0 2px 18px #1B563109;
margin-bottom: 20px;
}
.testimonial-card p {
color: #1B5631;
font-family: 'Roboto', Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
.testimonial-card span {
color: #256D3D;
font-size: 0.98rem;
margin-top: 2px;
}
@media (min-width: 700px) {
.testimonials .content-wrapper {
flex-direction: row;
flex-wrap: wrap;
gap: 24px;
}
}
/* CONTACT DETAILS & MAP INFO (CONTACT PAGE) */
.contact-info .content-wrapper {
display: flex;
flex-wrap: wrap;
gap: 28px;
justify-content: space-between;
}
.contact-info .contact-details, .contact-info .map-info {
flex: 1 1 220px;
min-width: 240px;
max-width: 480px;
background: #fff;
border: 2px solid #89A96B;
border-radius: 14px 32px 14px 32px;
padding: 28px 20px;
font-family: 'Roboto', Arial, sans-serif;
}
.contact-info .contact-details a {
color: #1B5631;
text-decoration: underline;
word-break: break-all;
}
.contact-info h3 {
margin-bottom: 10px;
color: #1B5631;
font-size: 1.13rem;
}
@media (max-width: 900px) {
.contact-info .content-wrapper {
flex-direction: column;
}
}
/* ABOUT & LEGAL */
.legal {
background: #fff;
border-left: 6px solid #89A96B;
border-radius: 12px 42px 12px 42px;
margin-bottom: 60px;
}
.legal h2, .legal h3 {
margin-top: 20px;
}
.legal h1 {
font-size: 2rem;
margin-bottom: 20px;
}
.legal ul {
list-style: disc inside;
margin-left: 18px;
margin-top: 8px;
margin-bottom: 12px;
}
.legal ul li {
margin-bottom: 6px;
font-size: 1rem;
color: #2D6640;
font-family: 'Roboto', Arial, sans-serif;
}
/* CTA SECTION */
.cta {
background: #1B5631;
border-radius: 22px 64px 22px 64px;
color: #fff;
margin-bottom: 60px;
}
.cta h2 {
color: #fff;
}
.cta .cta-primary {
background: #F3EDE8;
color: #1B5631 !important;
border: 0;
margin-top: 10px;
}
.cta .cta-primary:hover {
background: #89A96B;
color: #fff !important;
}
/* THANK YOU PAGE */
.thankyou-cta {
background: #F3EDE8;
text-align: center;
}
.thankyou-cta .content-wrapper {
justify-content: center;
align-items: center;
gap: 33px;
}
.thankyou-cta .cta-primary {
margin-top: 18px;
}
/* FOOTER */
footer {
background: #fff;
border-top: 2px solid #89A96B;
padding: 0;
width: 100%;
margin-top: 48px;
}
footer .container {
padding-top: 20px;
padding-bottom: 16px;
}
footer .content-wrapper {
display: flex;
flex-direction: column;
gap: 24px;
}
.brand-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.brand-info img {
height: 36px;
}
.brand-info span:first-of-type {
font-size: 1.12rem;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
color: #1B5631;
margin-top: 4px;
}
.brand-info span:last-of-type {
font-size: 0.95rem;
color: #256D3D;
}
.contact-details span {
font-size: 0.97rem;
display: block;
margin-bottom: 2px;
color: #2D6640;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 8px;
}
.footer-nav a {
color: #1B5631;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 600;
font-size: 0.98rem;
border-radius: 6px;
padding: 6px 10px;
transition: background 0.16s, color 0.17s;
}
.footer-nav a.active, .footer-nav a:hover, .footer-nav a:focus {
background: #89A96B;
color: #fff;
}
@media (min-width: 800px) {
footer .content-wrapper {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.brand-info {
flex: 1 1 220px;
}
.contact-details {
flex: 1 1 220px;
}
.footer-nav {
flex: 1 1 120px;
justify-content: flex-end;
align-items: flex-end;
margin-top: 0;
}
}
/* SPACING AND FLEXBOX PATTERNS (MANDATORY) */
.card-container {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
margin-bottom: 20px;
position: relative;
}
.content-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
.text-image-section {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}
.testimonial-card {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
}
.feature-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
/*--- COOKIE CONSENT BANNER & MODAL ---*/
.cookie-banner {
position: fixed;
left: 0; right: 0;
bottom: 0;
width: 100vw;
z-index: 3000;
background: #fff;
color: #1B5631;
border-top: 3px solid #1B5631;
box-shadow: 0 -5px 32px #1B563118;
display: flex;
flex-direction: column;
align-items: center;
padding: 25px 18px 22px 18px;
gap: 18px;
min-height: 90px;
animation: cookieSlideIn 0.7s cubic-bezier(0.57,1.6,0.47,0.76) both;
}
@keyframes cookieSlideIn {
from {
transform: translateY(110%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.cookie-banner p {
font-family: 'Roboto', Arial, sans-serif;
font-size: 1.03rem;
color: #223d28;
text-align: center;
margin-bottom: 0;
}
.cookie-banner .cookie-btn-group {
display: flex;
flex-direction: row;
gap: 14px;
margin-top: 5px;
}
.cookie-btn, .cookie-btn-primary {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 600;
font-size: 0.97rem;
border: none;
padding: 10px 22px;
border-radius: 8px 24px 8px 24px;
cursor: pointer;
margin: 0;
transition: background .15s, color .15s, border .13s;
}
.cookie-btn-primary {
background: #1B5631;
color: #fff;
}
.cookie-btn-primary:hover, .cookie-btn-primary:focus {
background: #223d28;
color: #fff;
}
.cookie-btn {
background: #F3EDE8;
color: #1B5631;
border: 1px solid #89A96B;
}
.cookie-btn:hover, .cookie-btn:focus {
background: #89A96B;
color: #fff;
border-color: #1B5631;
}
/* COOKIE PREFERENCES MODAL */
.cookie-modal-backdrop {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: #1B5631BB;
z-index: 4000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeInModal 0.25s;
}
@keyframes fadeInModal {
from { opacity: 0; }
to { opacity: 1; }
}
.cookie-modal {
max-width: 402px;
width: 96vw;
background: #fff;
border-radius: 22px 66px 22px 66px;
border: 3px solid #1B5631;
box-shadow: 0 16px 44px #223d2816;
padding: 38px 24px 24px 24px;
position: relative;
animation: popinModal .22s cubic-bezier(0.38,1.6,0.33,0.85);
}
@keyframes popinModal {
from {
transform: scale(0.7);
opacity: 0.1;
}
to {
transform: scale(1);
opacity: 1;
}
}
.cookie-modal-close {
position: absolute;
top: 12px; right: 16px;
background: none;
border: none;
font-size: 1.8rem;
color: #1B5631;
cursor: pointer;
border-radius: 8px;
transition: background .13s;
}
.cookie-modal-close:focus {
background: #f3ede889;
outline: none;
}
.cookie-modal h3 {
margin-top: 0;
margin-bottom: 14px;
font-size: 1.1rem;
color: #1B5631;
}
.cookie-modal .option-group {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 16px;
}
.cookie-modal label {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 1rem;
cursor: pointer;
color: #223d28;
}
.cookie-toggle {
position: relative;
width: 32px;
height: 18px;
margin-right: 7px;
}
.cookie-toggle input[type="checkbox"] {
opacity: 0;
width: 0; height: 0;
}
.cookie-toggle-slider {
position: absolute;
cursor: pointer;
left: 0; top: 0;
width: 32px; height: 18px;
background: #89A96B;
border-radius: 12px;
transition: background .2s;
}
.cookie-toggle-slider:before {
content: "";
position: absolute;
left: 3px; top: 2px;
width: 13px; height: 13px;
background: #fff;
border-radius: 50%;
transition: transform .2s;
box-shadow: 0 2px 8px #223d2822;
}
.cookie-toggle input:checked + .cookie-toggle-slider {
background: #1B5631;
}
.cookie-toggle input:checked + .cookie-toggle-slider:before {
transform: translateX(14px);
}
.cookie-modal .cookie-btn-group {
display: flex;
gap: 12px;
margin-top: 16px;
}
/* Responsive: Mobile First! */
@media (max-width: 700px) {
h1 { font-size: 1.7rem; }
h2 { font-size: 1.22rem; }
.section, .features, .about, .testimonials, .services, .cta, .contact-info, .legal, .thankyou-cta {
padding: 28px 6px;
margin-bottom: 40px;
}
.feature-grid, .service-list, .content-grid {
flex-direction: column;
gap: 20px;
}
.feature-item, .service-item, .testimonial-card {
min-width: 0;
max-width: 100%;
width: 100%;
padding: 18px 10px;
}
.about .content-wrapper, .testimonials .content-wrapper {
gap: 20px;
}
.cta {
text-align: center;
}
}
/* Visually Distinctive Style: GEOMETRIC STRUCTURED */
/* Angular cuts, geometric radius, pseudo-shadows, grid-like rhythm via flex modularity */
.section, .features, .about, .testimonials, .services, .cta, .contact-info, .legal, .thankyou-cta {
position: relative;
z-index: 1;
box-shadow: 0 2px 24px #1B563108;
}
.feature-item, .service-item {
box-shadow: 0 4px 18px #1B563116, 0 0.5px 0 #89A96B88;
border-radius: 14px 36px 14px 36px;
}
.testimonial-card {
box-shadow: 0 2px 10px #1B563110;
border-radius: 2px 16px 2px 16px;
}
.content-wrapper > *:not(:last-child) {
margin-bottom: 24px;
}
/* Hover accent lines – geometric flair */
.feature-item:hover:after, .service-item:hover:after {
content: '';
display: block;
position: absolute;
bottom: 12px; left: 28px; right: 28px;
height: 3.5px;
border-radius: 2px;
background: #1B5631;
opacity: 0.07;
pointer-events: none;
}
/* SCROLLBAR STYLING (for modern browsers) */
::-webkit-scrollbar {
width: 10px;
background: #F3EDE8;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
background: #89A96B;
border-radius: 8px;
}
/* ACCESSIBILITY: FOCUS OUTLINES */
a:focus, button:focus, input:focus, [tabindex]:focus {
outline: 2px dashed #1B5631;
outline-offset: 2px;
}
/* UTILITIES (for spacing, hiding, etc.) */
.hide-desktop { display: none !important; }
@media (max-width: 800px) {
.hide-mobile { display: none !important; }
.hide-desktop { display: block !important; }
}
/* END */