. Gutenberg's
wrapper is handled too. */
.ti-text .table-scroll,
.cc-text .table-scroll,
.entry-content .table-scroll,
.single-post-content .table-scroll,
.text-module-body .table-scroll,
.ti-text .wp-block-table,
.cc-text .wp-block-table,
.entry-content .wp-block-table,
.single-post-content .wp-block-table,
.text-module-body .wp-block-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1.5em 0;
}
.ti-text table,
.cc-text table,
.entry-content table,
.single-post-content table,
.text-module-body table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
font-size: clamp(15px, 2vw, 17px);
line-height: 1.5;
color: var(--text);
}
/* Inside a scroll wrapper: no outer margin, and a min-width so the table
scrolls once the viewport is narrower than this instead of squashing. */
.wp-block-table table,
.table-scroll table { margin: 0; }
.table-scroll table { min-width: 600px; }
.ti-text th, .ti-text td,
.cc-text th, .cc-text td,
.entry-content th, .entry-content td,
.single-post-content th, .single-post-content td,
.text-module-body th, .text-module-body td {
padding: 12px 16px;
border: 1px solid #E0E0E0;
text-align: left;
vertical-align: top;
/* Prevent aggressive auto-hyphenation of cell text (inherited from the
body); let long tokens wrap only when they don't fit. */
hyphens: manual;
overflow-wrap: break-word;
}
.ti-text th,
.cc-text th,
.entry-content th,
.single-post-content th,
.text-module-body th {
background: var(--green);
color: var(--white);
font-weight: 600;
}
.ti-text tbody tr:nth-child(even) td,
.cc-text tbody tr:nth-child(even) td,
.entry-content tbody tr:nth-child(even) td,
.single-post-content tbody tr:nth-child(even) td,
.text-module-body tbody tr:nth-child(even) td {
background: #F7F7F7;
}
/* Bullets */
.ti-bullets {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.ti-bullet {
display: flex;
align-items: flex-start;
gap: 8px;
}
.ti-bullet-check {
flex-shrink: 0;
margin-top: 2px;
}
.ti-bullet-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.ti-bullet-body strong {
font-size: clamp(16px,3vw,18px);
font-weight: 600;
color: var(--text);
line-height: 1.2;
}
.ti-bullet-desc {
font-size: clamp(16px,3vw,18px);
color: var(--text);
line-height: 1.5;
font-weight: 400;
}
/* Image */
.ti-image {
border-radius: 14px;
overflow: hidden;
}
.ti-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* ============================================================
SERVICES CARDS
============================================================ */
.section-services-cards {
padding: 120px 0;
}
/* 60px gap when Services Cards sits directly below Text+Image */
.section-text-image:has(+ .section-services-cards) {
padding-bottom: 0;
}
.section-text-image + .section-services-cards {
padding-top: 60px;
}
.section-content-card:has(+ .section-services-cards) {
padding-bottom: 0;
}
.section-content-card + .section-services-cards {
padding-top: 60px;
}
.sc-title {
font-size: clamp(18px,3vw,24px);
font-weight: 600;
color: var(--text);
margin-bottom: 40px;
line-height: 1.2;
}
.sc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-bottom: 40px;
}
/* 3 cards → 3 columns */
.sc-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
/* 2 cards → 2 columns, centered */
.sc-grid--2 {
grid-template-columns: repeat(2, 1fr);
max-width: 660px;
margin-left: auto;
margin-right: auto;
}
/* 1 card → centered single card */
.sc-grid--1 {
grid-template-columns: minmax(0, 320px);
justify-content: center;
}
/* Card */
.sc-card {
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
background: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
transition: box-shadow .3s ease, transform .3s ease;
position: relative;
}
.sc-card-img img {
width: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
height: 360px;
}
.sc-card:hover .sc-card-img img {
transform: scale(1.04);
}
/* Label bar — absolute overlay inside image */
.sc-card-label {
position: absolute;
bottom: 16px;
left: 8px;
right: 8px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--green);
padding: 15px;
gap: 10px;
border-radius: 4px;
transition: background-color .35s ease;
}
.sc-card-label:hover {
background-color: #fff;
}
.sc-card-name {
font-size:clamp(16px,3vw,18px);
font-weight: 600;
color: #fff;
line-height: 1.2;
transition: color .35s ease;
/* Cap very long titles so the label doesn't balloon over the image;
excess is truncated with an ellipsis. Long words wrap instead of
overflowing the label. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: break-word;
}
.sc-card-label:hover .sc-card-name {
color: var(--text);
}
.sc-card-arrow {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .35s ease;
}
.sc-card-label:hover .sc-card-arrow {
background-color: #F9B736;
}
.sc-card-arrow img {
width: 16px;
height: 16px;
display: block;
transition: filter .35s ease;
}
.sc-card-label:hover .sc-card-arrow img {
filter: brightness(0);
}
/* Footer button */
.sc-footer {
display: flex;
justify-content: center;
}
/* ============================================================
CONTENT + INFO CARD
============================================================ */
.section-content-card {
padding: 120px 0;
}
.cc-inner {
display: grid;
grid-template-columns: 1fr 600px;
gap: 80px;
align-items: start;
}
.cc-content .section-title {
margin-bottom: 28px;
}
.cc-text {
font-size: clamp(16px,3vw,18px);
color: var(--text);
line-height: 1.5;
}
.cc-text p { margin-bottom: 1em; }
.cc-text p:last-child { margin-bottom: 0; }
.cc-text p img {
display: inline-block;
vertical-align: top;
height: auto;
}
.cc-text img.alignleft,
.cc-text .alignleft {
float: left;
display: block;
margin: 4px 24px 20px 0;
border-radius: 50%;
max-width: 160px;
height: auto;
}
.cc-text img.alignright,
.cc-text .alignright {
float: right;
display: block;
margin: 4px 0 20px 24px;
border-radius: 8px;
max-width: 260px;
height: auto;
}
.cc-text img.aligncenter,
.cc-text .aligncenter {
display: block;
margin: 0 auto 1em;
border-radius: 8px;
}
.cc-text::after {
content: '';
display: table;
clear: both;
}
.cc-card {
border-radius: 12px;
overflow: hidden;
background: #fff;
border: 1px solid #B3B3B3;
padding: 16px;
}
.cc-card-img img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
border-radius: 12px;
}
.cc-card-body {
padding: 24px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.cc-eyebrow {
font-size: clamp(16px,3vw,18px);
font-weight: 600;
text-transform: uppercase;
color: var(--text);
margin: 0;
text-align: center;
}
.cc-price {
margin: 0 0 9px 0;
display: flex;
align-items: baseline;
gap: 6px;
line-height: 1;
justify-content: center;
}
.cc-price-prefix,.cc-price-suffix {
font-size: clamp(20px,3vw,28px);
font-weight: 600;
color: var(--text);
}
.cc-price-amount {
font-size: clamp(28px,3vw,48px);
font-weight: 600;
color: var(--text);
}
.cc-price-note {
margin: 0;
background: #F7E1BA;
color: var(--text);
font-size: 14px;
font-weight: 400;
padding: 10px 32px;
border-radius: 50px;
text-align: center;
}
/* Feature list */
.cc-features {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding: 0;
}
.cc-feature {
display: flex;
align-items: flex-start;
gap: 10px;
}
.cc-feature-check {
flex-shrink: 0;
margin-top: 3px;
}
.cc-feature-check img {
display: block;
width: 16px;
height: 16px;
}
.cc-feature-body {
display: flex;
flex-direction: column;
gap:8px;
}
.cc-feature-label {
font-size: 18px;
font-weight: 600;
color: var(--text);
line-height: 1.2;
}
.cc-feature-desc {
font-size: 16px;
font-weight: 400;
color: var(--text);
line-height: 1.2;
}
.cc-card-footer {
margin: 0;
font-size: 14px;
color: #757575;
text-align: center;
line-height: 1.5;
}
/* ============================================================
TESTIMONIALS SLIDER
============================================================ */
.section-testimonials {
padding: 120px 0;
background: var(--green);
}
/* Header */
.testi-header {
margin-bottom: 40px;
max-width: 1060px;
}
.testi-subtitle {
font-size: clamp(14px,3vw,16px);
font-weight: 500;
color: #FFFFFF;
margin-bottom: 16px;
}
.testi-title {
font-size: 42px;
font-weight: 700;
color: #fff;
line-height: 1.2;
margin-bottom: 24px;
}
.testi-tagline {
font-size: clamp(16px,3vw,18px);
line-height: 1.5;
color: #FFFFFF;
margin: 0;
}
.testi-row {
display: flex;
align-items: center;
}
.testi-nav-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.testi-swiper-col {
flex: 0 0 min(calc(100% - 160px), 1268px);
width: min(calc(100% - 160px), 1268px);
min-width: 0;
}
/* Navigation arrows */
.testi-nav {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .7);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity .25s ease;
}
.testi-nav.swiper-button-disabled {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
.testi-nav img {
display: block;
width: 20px;
height: 20px;
}
.testi-swiper-col .swiper-wrapper {
align-items: stretch;
}
.testi-swiper-col .swiper-slide {
height: auto !important;
}
/* Cards */
.testi-card {
background: #fff;
border-radius: 12px;
padding: 32px;
height: 100%;
display: flex;
flex-direction: column;
gap: 24px;
box-sizing: border-box;
}
.testi-logo {
height: 70px;
display: flex;
align-items: center;
margin-bottom: 48px;
}
.testi-logo img {
width: auto;
display: block;
object-fit: contain;
}
.testi-quote {
font-size: clamp(18px,3vw,22px);
color: #414141;
line-height: 1.5;
margin: 0;
font-style: normal;
flex: 1;
}
.testi-footer {
margin-top: 0;
display: flex;
flex-direction: column;
gap: 16px;
flex-shrink: 0;
}
.testi-divider {
border: none;
border-top: 1px solid #386129;
margin: 0;
}
.testi-author { margin-top: 0; }
.testi-name {
font-size: clamp(16px,3vw,24px);
font-weight: 600;
color: var(--text);
margin: 0 0 8px;
line-height: 1.2;
}
.testi-position {
font-size: clamp(14px,3vw,22px);
color: #757575;
margin: 0;
line-height: 1.5;
height: 70px;
}
.section-testimonials .swiper-wrapper {
align-items: stretch;
}
.section-testimonials .swiper-slide {
height: auto;
}
/* Pagination dots */
.testi-pagination {
margin-top: 24px;
text-align: center;
position: static !important;
}
.testi-pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #F7E1BA;
border: 1px solid #F7E1BA;
opacity: 1;
transition: background .25s ease;
}
.testi-pagination .swiper-pagination-bullet-active {
background: transparent;
border: 1px solid #fff;
}
/* ============================================================
BLOG SECTION
============================================================ */
.section-blog {
padding: 120px 0;
}
.blog .section-blog,
.archive .section-blog,
.search .section-blog{
padding: 60px 0 120px 0;
}
/* Archive header + empty state */
.archive-header {
margin-bottom: 48px;
}
.archive-empty {
font-size: clamp(16px, 3vw, 18px);
color: #757575;
margin: 0;
}
/* Equalise card heights in the blog swiper:
align-items:stretch makes every slide as tall as the tallest one in the row;
height:100% on the card fills that slide so margin-top:auto works on .blog-card-more */
.blog-swiper .swiper-wrapper { align-items: stretch; }
.blog-swiper .swiper-slide { height: auto; }
.blog-swiper .swiper-slide .blog-card { height: 100%; }
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.blog-card {
display: flex;
flex-direction: column;
}
/* Body fills remaining card height → margin-top:auto on .blog-card-more aligns buttons */
.blog-card-body {
display: flex;
flex-direction: column;
flex: 1;
}
.event-card {
border: 1px solid #B3B3B3;
border-radius: 12px;
}
.event-card .blog-card-body{
padding: 16px;
border-radius: 0 0 12px 12px;
border-top: none;
}
.event-card .blog-card-img-wrap{
margin-bottom: 0px;
border-radius: 12px 12px 0 0;
}
.event-card .blog-card-img {
border-radius: 12px 12px 0 0;
}
.event-card .blog-card-cats{
color: var(--text);
}
.blog-card-img-wrap {
position: relative;
display: block;
border-radius: 12px;
overflow: hidden;
margin-bottom: 16px;
transform: translateZ(0); /* force compositing layer so overflow:hidden clips correctly */
}
.blog-card-img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
transition: transform .4s ease;
}
.blog-card-img--placeholder {
aspect-ratio: 3 / 2;
background: var(--bg-light, #f5f5f5);
}
.blog-card-img-wrap:hover .blog-card-img {
transform: scale(1.03);
}
.blog-card-cats {
font-size: 18px;
font-weight: 500;
color: var(--green);
text-transform: uppercase;
letter-spacing: 2%;
margin: 0 0 16px;
line-height: 1.2;
}
.blog-card-cats a:hover{
color:#386129
}
.blog-card-title {
font-size: clamp(18px,3vw,24px);
font-weight: 600;
color: var(--text);
line-height: 1.2;
margin: 0 0 16px;
}
.blog-card-title a {
color: inherit;
text-decoration: none;
}
.blog-card-title a:hover {
color: var(--green);
text-decoration: underline;
}
.blog-card-more {
display: inline-flex;
align-items: center;
align-self: flex-start; /* shrink to text width — prevents border spanning full card */
gap: 6px;
font-size: 18px;
font-weight: 500;
color: var(--green);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2%;
margin-top: auto;
line-height: 1.2;
border-bottom: 2px solid transparent; /* reserve space so hover doesn't shift layout */
transition: border-color 0.2s;
}
.blog-card-more:hover {
border-bottom-color: #6AA428;
}
.blog-card-more img {
display: block;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.blog-pagination {
margin-top: 56px;
display: flex;
justify-content: center;
}
.blog-pagination ul {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.blog-pagination li a,
.blog-pagination li span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 10px;
border-radius: 8px;
border: 1.5px solid #6AA428;
font-size: 18px;
font-weight: 400;
color: var(--text);
text-decoration: none;
transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.blog-pagination li a:hover {
border-color: var(--green);
color: var(--green);
}
.blog-pagination li span.current {
background: var(--green);
border-color: var(--green);
color: #fff;
}
.blog-pagination li a img {
display: block;
width: 14px;
height: 14px;
}
/* ═══════════════════════════════════════════════════════════════
Newsletter section
─────────────────────────────────────────────────────────────── */
.section-newsletter {
background-color: #24301C;
padding: 60px 0;
}
.nl-inner {
display: flex;
align-items: center;
gap: 80px;
}
.nl-content {
flex: 1 1 0;
color: #fff;
}
.nl-title {
font-size: clamp(20px, 3.5vw, 28px);
font-weight: 600;
line-height: 1.2;
color: #fff;
margin: 0 0 16px;
display: block;
}
.nl-text {
font-size: clamp(16px,3vw,18px);
line-height: 1.5;
color: #FFFFFF;
margin: 0;
}
.nl-form-wrap {
flex: 1 1 0;
}
.nl-form {
background: transparent;
padding: 0;
}
/* Hide Brevo's empty message div by default.
When Brevo shows it (inline style display:block), it takes full width above the fields
because the parent is flex-wrap:wrap and this item is flex: 0 0 100%. */
.nl-form .sib_msg_disp {
display: none;
flex: 0 0 100%;
width: 100%;
order: -1; /* float above the input row */
margin-bottom: 8px;
border-radius: 6px;
}
/* Brevo injects the form fields in wrappers inside a [class*="sib_signup_box_inside"] div.
We turn that into a flex row: two input fields + the submit button. */
.nl-form [class*="sib_signup_box_inside"] {
display: flex;
align-items: stretch;
gap: 12px;
flex-wrap: wrap;
color: rgba(255,255,255,.75);
}
/* Input field wrappers — have classes like sib-FIRSTNAME-area, sib-email-area */
.nl-form [class*="sib_signup_box_inside"] > p[class] {
flex: 1 1 160px;
margin: 0 !important;
font-size: 0; /* hide Brevo's text label — placeholder is used instead */
line-height: 0;
}
/* Consent text paragraph — no class, not the last
(submit is last) */
.nl-form [class*="sib_signup_box_inside"] > p:not([class]):not(:last-of-type) {
flex: 0 0 100%;
order: 10;
font-size: clamp(12px,3vw,14px) !important;
line-height: 1.5 !important;
color: #fff;
margin: 4px 0 0 !important;
}
.nl-form [class*="sib_signup_box_inside"] > p:not([class]):not(:last-of-type) a {
color: rgba(255,255,255,.85);
text-decoration: underline;
}
/* Hide any
wrapper — last
, shrink to fit the button */
.nl-form [class*="sib_signup_box_inside"] > p:last-of-type {
flex: 0 0 auto;
margin: 0 !important;
font-size: 0;
line-height: 0;
}
/* Inputs: white background, no border, pill-radius */
.nl-form #sib_signup_form_1 input[type="email"],
.nl-form #sib_signup_form_1 input[type="text"] {
display: block !important;
width: 100% !important;
height: 54px !important;
padding: 0 20px !important;
background: #fff !important;
border: none !important;
border-radius: 4px !important;
color: var(--text) !important;
font-size: 16px !important;
font-family: inherit !important;
box-sizing: border-box !important;
outline: none !important;
margin: 0 !important;
transition: box-shadow .2s;
}
.nl-form #sib_signup_form_1 input[type="email"]::placeholder,
.nl-form #sib_signup_form_1 input[type="text"]::placeholder {
color: rgba(0,0,0,.35);
}
.nl-form #sib_signup_form_1 input[type="email"]:focus,
.nl-form #sib_signup_form_1 input[type="text"]:focus {
box-shadow: 0 0 0 3px rgba(106,164,40,.4) !important;
}
/* Submit button base styles */
.nl-form input[type="submit"],
.nl-form button[type="submit"],
.nl-form .sib-default-btn {
display: block !important;
height: 54px !important;
padding: 0 20px !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
margin: 0 !important;
flex-shrink: 0;
transition: background-color .2s;
}
/* Checkbox + consent text row */
.nl-form .nl-checkbox-wrap {
order: 5;
flex: 0 0 100%;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: rgba(255,255,255,.75);
line-height: 1.5;
margin-top: 4px;
}
.nl-form .nl-checkbox-wrap input[type="checkbox"] {
flex-shrink: 0;
margin-top: 2px;
width: 16px;
height: 16px;
accent-color: var(--green);
cursor: pointer;
}
.nl-form .nl-checkbox-wrap > span {
flex: 1;
min-width: 0;
}
.nl-form .nl-checkbox-wrap a {
color: rgba(255,255,255,.85);
text-decoration: underline;
}
.nl-form .nl-checkbox-wrap br { display: none; }
.nl-privacy {
font-size: 13px;
color: rgba(255,255,255,.6);
margin: 12px 0 0;
line-height: 1.55;
}
.nl-privacy a {
color: rgba(255,255,255,.85);
text-decoration: underline;
}
/* ---- Brevo submit button ---- */
/* Desktop: icon-only square. input[type="submit"] can't hold children,
so icon goes via background-image; text hidden with font-size:0. */
.nl-form #sib_signup_form_1 .sib-default-btn,
.nl-form #sib_signup_form_1 input[type="submit"],
.nl-form #sib_signup_form_1 button[type="submit"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 54px !important;
height: 54px !important;
padding: 0 !important;
background-color: var(--green) !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
/* icon */
background-image: url('../images/newsletter-submit-icon.svg') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
/* hide Brevo's button text */
font-size: 0 !important;
color: transparent !important;
flex-shrink: 0;
}
.nl-form #sib_signup_form_1 .sib-default-btn:hover,
.nl-form #sib_signup_form_1 input[type="submit"]:hover,
.nl-form #sib_signup_form_1 button[type="submit"]:hover {
background-color: var(--green-dark) !important;
}
/* Icon image injected by JS inside replacement (desktop: hidden) */
.nl-form button[type="submit"] .nl-btn-icon {
display: none;
width: 16px;
height: 16px;
}
/* ---- HubSpot embedded form ---- */
/* HubSpot renders the form inside an