/* Custom Styles for ST&GE */
body {
font-family: 'Montserrat', sans-serif;
}
:root { --stge-nav-h: 64px; } /* adjust to your navbar height */
@media (max-width: 991.98px){ :root { --stge-nav-h: 56px; } }
body { padding-top: var(--stge-nav-h); } /* stop content from hiding under nav */
/* If admin bar is visible, offset the nav and body */
body.admin-bar .navbar.fixed-top { top: 32px; }
@media (max-width: 782px){ body.admin-bar .navbar.fixed-top { top: 46px; } }
body.admin-bar { padding-top: calc(var(--stge-nav-h) + 32px); }
@media (max-width: 782px){
body.admin-bar { padding-top: calc(var(--stge-nav-h) + 46px); }
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
}
h1 {
font-weight: 700;
}
p {
font-weight: 400;
}
.navbar-brand {
font-weight: 600;
}
.section-header {
font-weight: 800;
}
.card img {
height: 200px;
object-fit: cover;
}
footer {
font-size: 0.9rem;
}
footer h6 {
font-weight: bold;
}
footer ul {
padding-left: 0;
list-style: none;
}
footer ul li a {
color: #ccc;
text-decoration: none;
}
footer ul li a:hover {
color: white;
}
.navbar-toggler {
padding: 0.5rem 0.75rem;
font-size: 1.25rem;
border: none;
background: #eee;
}
.navbar-toggler {
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* FrontPage Elements */
/* Hero Section */
.sect-hero-text-h1 {
font-weight: 800;
margin-top: 200px;
}
/* Hero Headings */
.sect-hero-text-h1,
.sect-hero-text-mob {
font-weight: 800;
font-size: 3rem;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0,0,0,0.4);
color: #fff;
}
/* Hero Paragraph */
.hero p,
.hero-mobile p {
font-size: 1.2rem;
max-width: 720px;
margin: 1rem auto;
line-height: 1.6;
color: #f1f1f1;
}
.hero a.btn,
.hero-mobile a.btn {
padding: 0.75rem 1.5rem;
margin: 0 15px;
font-weight: 400;
font-size: 1rem;
border-radius: 50px;
background: linear-gradient(to right, #005e2e, #008037);
border: none;
color: #fff;
box-shadow: 0 5px 15px rgba(0,128,55,0.3);
transition: background 0.3s ease, transform 0.2s ease;
}
.hero a.btn:hover,
.hero-mobile a.btn:hover {
background: linear-gradient(to right, #006d3a, #00a04f);
transform: translateY(-2px);
}
.hero-mobile .container {
padding-top: 1rem;
padding-bottom: 2rem;
}
.section-padding {
padding: 50px 0px;
}
/*.frontpage-section-header {
font-weight: 800 !important;
font-size: 2.2rem !important;
text-align: center;
}*/
/* Sport Icons */
.sporticons-pc {
/*background: green;*/
}
.sporticons-mobile {
/* background: green;*/
}
.sporticons-mobile .sporticons-sport img {
width: 100px;
height: 80px;
display: inline-block;
filter: grayscale(1);
transition: all 0.3s;
}
.sporticons-sport {
/* border: 1px solid #222;*/
padding: 5px;
width: 100px;
text-align: center;
}
.sporticons-sport-imgblock {
margin-bottom: 15px;
}
.sporticons-sport-textblock {
text-align: center;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
}
.sporticons-sport img {
width: auto;
height: 90px;
display: inline-block;
filter: grayscale(1);
transition: all 0.3s;
}
.sporticons-sport img:hover {
cursor: pointer;
filter: grayscale(0);
transition: all 0.3s ease-in-out;
}
/* Unified sport icon styling */
.sporticons-sport-imgblock {
width: 100px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 0 auto 10px;
}
.sporticons-sport-imgblock img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
transition: all 0.3s ease-in-out;
filter: grayscale(1);
}
.sporticons-sport-imgblock img:hover {
filter: grayscale(0);
/* transform: scale(1.05);*/
}
@media (max-width: 576px) {
.sporticons-sport-imgblock {
width: 80px;
height: 70px;
}
.sporticons-sport-textblock {
font-size: 0.75rem;
}
}
/* === Tabbed Section Styles === */
/* Section Header */
.frontpage-section-header {
font-weight: 800;
font-size: 2rem;
margin-bottom: 1rem;
}
/* Tab Buttons */
[role="tablist"] .btn {
border: 2px solid transparent;
color: #008037;
font-weight: 500;
padding: 0.6rem 1.2rem;
border-radius: 0.75rem;
transition: all 0.3s ease;
background: #F9F9F9;
text-transform: uppercase;
}
[role="tablist"] .btn:hover {
background: #E5F6EE;
color: #008037;
}
[role="tablist"] .btn.active {
background: #008037;
color: #fff;
font-weight: 700;
box-shadow: 0 4px 12px rgba(0, 128, 55, 0.3);
}
/* Tab Content Styling */
#servicesTabContent {
background: #ffffff;
border-radius: 1rem;
padding: 2rem;
margin-top: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
/* Tab Images */
#servicesTabContent img {
max-width: 100%;
height: auto;
border-radius: 0.75rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Headings and Text */
#servicesTabContent h3 {
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 1rem;
color: #1A1A1A;
}
#servicesTabContent p {
font-size: 1.05rem;
color: #333333;
}
/* Responsive Tabs Scroll */
[role="tablist"] {
overflow-x: auto;
white-space: nowrap;
}
/* Surfaces */
/* Horizontal Scroll Container on Mobile
.surface-scroll-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
white-space: nowrap;
padding-bottom: 1rem;
margin-bottom: -1rem;
}
.surface-scroll-wrapper::-webkit-scrollbar {
display: none;
}
.surface-scroll-inner {
display: inline-flex;
gap: 1rem;
scroll-snap-align: start;
padding-left: 1rem;
}
.surface-card {
flex: 0 0 auto;
width: 160px;
scroll-snap-align: start;
position: relative;
overflow: hidden;
border-radius: 12px;
transition: transform 0.3s ease;
}
.surface-card img {
width: 100%;
height: auto;
border-radius: 12px;
}
.surface-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.surface-label {
position: absolute;
bottom: 0;
width: 100%;
background: #008037;
color: #fff;
padding: 0.5rem 0.75rem;
font-weight: 600;
font-size: 1.1rem;
text-align: center;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
Desktop Layout
@media (min-width: 768px) {
.surface-scroll-wrapper {
overflow: visible;
}
.surface-scroll-inner {
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.surface-card {
width: 200px;
}
}
*/
/* Testimonials */
.partner-logo {
max-height: 80px;
width: 150px;
border-radius: 10px;
object-fit: contain;
filter: grayscale(30%);
transition: filter 0.3s ease;
background: #ededed;
padding: 10px;
}
.partner-logo:hover {
filter: grayscale(0%);
}
.testimonial-box {
background: #f9f9f9;
border-left: 5px solid #008037;
}
.testimonial-img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Testimonials slider */
/* ----- Testimonial snap slider ----- */
.stge-tsnap-viewport{
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* Hide native scrollbar but keep scrollability */
scrollbar-width: none;
}
.stge-tsnap-viewport::-webkit-scrollbar{ display: none; }
.stge-tsnap-track{
display: flex;
gap: 16px; /* gutter between slides */
padding-bottom: 2px; /* avoid shadow clip on OS scrollbars */
}
.stge-tsnap-slide{
flex: 0 0 100%;
scroll-snap-align: start;
/* Prevent shrinking so we always snap exactly to slide start */
}
@media (min-width: 992px){
/* 2-up: two slides + 1 gap exactly fill the viewport:
(50% - 8px) + (50% - 8px) + 16px gap = 100% */
.stge-tsnap-slide{
flex-basis: calc(50% - 8px);
}
}
.testimonial-box{
background: #fff;
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 6px 24px rgba(0,0,0,.06);
min-height: 100%;
}
/* Scrollable News Layout */
.news-scroll-wrapper {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
.news-scroll-wrapper::-webkit-scrollbar {
display: none;
}
.news-scroll-inner {
display: inline-flex;
gap: 1.5rem;
scroll-snap-align: start;
padding-left: 0.5rem;
}
.news-card {
flex: 0 0 auto;
width: 280px;
background: #fff;
border-radius: 8px;
scroll-snap-align: start;
}
.news-card img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px;
}
.news-meta {
font-size: 0.85rem;
color: #555;
margin-top: 0.5rem;
}
.news-desc {
font-size: 1rem;
color: #111;
margin: 0.5rem 0;
font-weight: 500;
}
.news-desc {
white-space: normal;
word-wrap: break-word;
word-break: break-word;
}
/* Desktop Grid Alignment */
@media (min-width: 768px) {
.news-scroll-wrapper {
overflow-x: hidden;
white-space: normal;
}
.news-scroll-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.news-card {
flex: 0 0 auto;
width: 300px;
}
}
/* Section Title */
#projects-section h2 {
font-weight: 900;
font-size: 2.2rem;
text-align: center;
}
/* Scroll Wrapper for Mobile */
.project-scroll-wrapper {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 1rem;
margin-bottom: -1rem;
}
.project-scroll-wrapper::-webkit-scrollbar {
display: none;
}
.project-scroll-inner {
display: inline-flex;
gap: 1rem;
padding-left: 0.5rem;
}
/* Individual Card */
.project-card {
flex: 0 0 auto;
width: 250px;
border-radius: 12px;
overflow: hidden;
position: relative;
scroll-snap-align: start;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
transform: scale(1.03);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.project-card img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 12px;
}
.project-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background: linear-gradient(to top, rgba(0,0,0,0.80), rgba(0,0,0,0));
color: #fff;
font-weight: 700;
font-size: 1rem;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
/* CTA Block at End */
.project-card.cta-card {
display: flex;
align-items: center;
justify-content: center;
background: #000;
color: #fff;
text-align: center;
}
.project-card.cta-card:hover {
transform: none;
box-shadow: none;
}
.project-card.cta-card a {
color: #fff;
font-weight: 600;
padding: 0.75rem 1.5rem;
border: 2px solid #fff;
border-radius: 30px;
text-decoration: none;
transition: background 0.3s ease;
margin-top: 200px;
}
.project-card.cta-card a:hover {
background: #fff;
color: #000;
}
/* Desktop Layout */
@media (min-width: 768px) {
.project-scroll-wrapper {
overflow: visible;
white-space: normal;
}
.project-scroll-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.project-card {
width: 280px;
}
.project-card img {
height: 350px;
}
.project-card.cta-card {
/*width: 280px;*/
/*height: 200px;*/
}
}
/* Existing styles unchanged above... */
/* Choose us block */
#why-choose-us {
background: green;
}
.choose-card {
padding: 1.5rem;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
height: 100%;
}
.choose-card:hover {
transform: translateY(-5px);
}
.choose-icon i {
font-size: 2.5rem;
/*color: #008037;*/
color: #e8d100;
}
@media (max-width: 575.98px) {
.choose-card {
padding: 1rem;
/*margin-bottom: 1rem;*/
}
.choose-icon i {
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
#why-choose-us h2 {
font-size: 1.5rem;
}
.choose-card h5 {
/*font-size: 1rem;*/
}
.choose-card p {
font-size: 0.9rem;
line-height: 1.4;
}
}
/* Contact Section */
.contact-section {
position: relative;
overflow: hidden;
color: #fff;
}
.contact-bg-image {
position: absolute;
inset: 0;
background-image: url('../img/hero/bggolf.png');
background-size: cover;
background-position: center;
/*filter: brightness(0.5);*/
z-index: 0;
height: 50vc;
}
.contact-section .container {
position: relative;
z-index: 1;
}
.contact-form {
border-radius: 16px;
}
.contact-form .form-control:focus,
.contact-form .input-group-text:focus {
border-color: #008037;
box-shadow: 0 0 0 0.25rem rgba(0, 128, 55, 0.25);
}
.contact-form .input-group-text {
border-right: 0;
color: #008037;
}
.contact-form .form-control {
border-left: 0;
}
/* Expertise Section */
.expertise-card p {
overflow: wrap;
text-overflow: ellipsis;
display: -webkit-box;
}
/* About Page Styling */
.about-hero {
background-size: cover;
background-position: center;
min-height: 330px;
}
.about-hero-text-container {
/*background: rgba(0, 0, 0, 0.5);*/
margin-top: 150px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.timeline {
list-style: none;
padding-left: 0;
}
.timeline li {
padding: 8px 0;
border-left: 3px solid #008037;
padding-left: 12px;
margin-left: 10px;
}
.about-values i {
transition: transform 0.2s ease-in-out;
}
.about-values i:hover {
transform: scale(1.1);
}
.about-cta {
background: #008037;
}
/* Timeline Section */
.stge-timeline-section {
background: #eee;
}
.timeline-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 1rem 0;
}
.timeline-scroll {
display: flex;
flex-wrap: nowrap;
gap: 2rem;
padding-bottom: 20px;
}
.timeline {
display: flex;
gap: 2rem;
padding-left: 1rem;
}
.timeline-item {
flex: 0 0 auto;
width: 250px;
position: relative;
}
.timeline-card {
background: #fff;
border-radius: 10px;
padding: 1rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease-in-out;
}
.timeline-card:hover {
transform: translateY(-5px);
}
.timeline-year {
font-size: 1.2rem;
font-weight: bold;
color: #008037;
margin-bottom: 0.5rem;
}
.timeline-content p {
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.timeline-content img {
width: 100%;
height: auto;
border-radius: 6px;
}
.arrow {
width: 40px;
height: 2px;
position: relative;
margin: 0 -10px;
flex-shrink: 0;
margin-top: 100px;
font-weight: 900;
font-size: 2.5rem;
color: #008037;
}
/*.arrow::after {
content: '';
position: absolute;
top: -5px;
right: -5px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid #008037;
}*/
/* Minimal Scrollbar Styling */
.timeline-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* For smooth iOS scrolling */
}
/* Chrome, Edge, Safari (webkit) only */
.timeline-scroll::-webkit-scrollbar {
height: 6px;
}
.timeline-scroll::-webkit-scrollbar-thumb {
background-color: rgba(0, 128, 55, 0.5);
border-radius: 4px;
}
.timeline-scroll::-webkit-scrollbar-track {
background: transparent;
}
/* Verticals Section */
.verticals-section .card-title {
font-weight: 800;
}
/* Hover effect for business vertical cards */
.card.business-vertical {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card.business-vertical:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
/* Icon pop effect on hover */
.card.business-vertical:hover .card-icon {
transform: scale(1.2);
transition: transform 0.3s ease;
}
/* Reset icon transition for default state */
.card-icon {
transition: transform 0.3s ease;
}
.verticals-section {
/* Accordion Styling */
.accordion-item {
border: none;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
margin-bottom: 1rem;
background-color: #ffffff;
}
.accordion-button {
background-color: #f9f9f9;
color: #008037;
font-weight: 800;
padding: 1rem 1.25rem;
font-size: 1.2rem;
border-radius: 0;
transition: background-color 0.3s ease;
}
.accordion-button:not(.collapsed) {
background-color: #e5f6ee;
color: #008037;
box-shadow: none;
}
.accordion-button:focus {
border-color: #008037;
box-shadow: 0 0 0 0.25rem rgba(0, 128, 55, 0.25);
}
.accordion-body {
padding: 1rem 1.25rem;
background-color: #fff;
}
.accordion-button::after {
filter: hue-rotate(90deg) brightness(0.5); /* green-ish arrow */
}
}
/* Impact Section */
.impact-section {
background-color: #008037; /* primary green */
color: #ffffff; /* default text to white */
padding: 3rem 0;
}
.impact-section .impact-counter {
font-weight: 900;
font-size: 3rem;
color: #FFD700; /* yellow shade for numbers */
}
.impact-section .impact-text {
font-weight: 600;
color: #ffffff;
}
/* Values Section */
/* Green background and white text */
.values-section {
background-color: #008037;
color: white;
}
/* Yellow-green icons */
.value-icon {
color: #e8d100;
transition: transform 0.3s ease;
}
/* Animate on hover */
.value-card:hover .value-icon {
transform: scale(1.2);
}
/* Appear animation */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Initial state */
.animate-value {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
/* When in view */
.animate-value.in-view {
opacity: 1;
transform: translateY(0);
}
/* Optional stagger override (works with JS too) */
.animate-value:nth-child(1) { transition-delay: 0.1s; }
.animate-value:nth-child(2) { transition-delay: 0.2s; }
.animate-value:nth-child(3) { transition-delay: 0.3s; }
.animate-value:nth-child(4) { transition-delay: 0.4s; }
/* Footer CTA */
.footer-cta {
background-color: #008037; /* Primary Green */
color: #ffffff;
}
.footer-cta-heading {
font-size: 2.5rem;
font-weight: 800;
/*text-transform: uppercase;*/
letter-spacing: 1px;
color: #ffffff;
}
.footer-cta-subtext {
font-size: 1.1rem;
color: #E5F6EE; /* Light Green for subtle contrast */
max-width: 700px;
margin: 0 auto;
}
.footer-cta-btn {
font-weight: 600;
font-size: 1rem;
padding: 0.75rem 1.5rem;
border-radius: 8px;
background-color: #ffffff;
color: #008037;
border: 2px solid #ffffff;
transition: all 0.3s ease;
}
.footer-cta-btn:hover {
background-color: #222; /* Accent purple */
border-color: #fff;
color: #ffffff;
}
/* ================================== */
/* Sports Section Improvements */
/* ================================== */
/* 1) Sports Hero (no change if already on page) */
.sports-hero {
background: linear-gradient(
to bottom right,
#008037 0%,
#005f2f 100%
); /* your existing green gradient */
color: #fff;
padding: 3rem 0;
}
.sports-hero h1 {
font-size: 2.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.sports-hero p {
font-size: 1.1rem;
opacity: 0.9;
}
.sport-card {
position: relative;
height: 260px; /* same height as before */
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #000; /* fallback */
}
.sport-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
/* The full‐size background image */
.sport-card .sport-card-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: brightness(0.75);
transition: filter 0.3s ease;
}
.sport-card:hover .sport-card-img {
filter: brightness(0.55);
}
/* Only the bottom 35% of the card has a dark gradient */
.sport-card .sport-card-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 35%; /* overlay covers bottom 35% of card */
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.0) 100%
);
display: flex;
align-items: flex-end;
padding: 0.75rem 1rem;
box-sizing: border-box;
}
/* Title sits on that bottom gradient */
.sport-card .sport-card-overlay h5 {
margin: 0;
font-weight: 700;
color: #ffffff;
font-size: 1.25rem;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
/* Mobile: center‐align both image and overlay text */
@media (max-width: 767px) {
.sport-card .sport-card-overlay {
justify-content: center;
text-align: center;
}
}
/* Ensure your column gutter remains */
.sports-grid .row {
margin: 0 auto;
}
.sports-grid .col-md-4 {
margin-bottom: 1.5rem;
}
/* 4) Add a bottom “Passionate about Sport?” CTA */
.sports-cta {
background-color: #008037; /* same green as hero */
color: #fff;
text-align: center;
padding: 3rem 1rem;
margin-top: 2rem;
}
.sports-cta h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.sports-cta p {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 1.5rem;
}
/* Button style: white outline, invert on hover */
.sports-cta .btn-cta {
background-color: transparent;
border: 2px solid #ffffff;
color: #ffffff;
border-radius: 6px;
padding: 0.6rem 1.4rem;
font-weight: 600;
transition: background-color 0.3s ease, color 0.3s ease;
}
.sports-cta .btn-cta:hover {
background-color: #ffffff;
color: #008037;
text-decoration: none;
}
/* 5) (Optional) Hide default List‐style for removable wrappers */
/* e.g. if you put CTA inside a UL/LI structure, but not required here */
/* ul.no-style { list-style: none; padding: 0; margin: 0; } */
/* Football Page - Enhanced Styling */
/* General Page Styling */
.page-football h2.section-header {
font-weight: 800;
margin-bottom: 1rem;
color: #008037;
}
.page-football p {
font-size: 1.1rem;
line-height: 1.7;
}
.page-football .section {
margin-bottom: 4rem;
}
/* Scrollable Logo Section */
.logo-scroll-section {
background-color: #1A0A2A;
color: #fff;
padding: 2rem 0;
}
.logo-scroll {
display: flex;
overflow-x: auto;
gap: 2rem;
padding: 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
}
.logo-scroll::-webkit-scrollbar {
display: none;
}
.partner-logo {
height: 60px;
object-fit: contain;
background: #fff;
border-radius: 8px;
padding: 6px 10px;
transition: transform 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.partner-logo:hover {
transform: scale(1.08);
}
/* Pitch Type Cards */
.pitch-type-card {
background: #f9f9f9;
border: none;
border-left: 5px solid #008037;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.pitch-type-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}
.pitch-type-icon {
font-size: 2rem;
color: #9055FF;
}
.pitch-type-img {
width: 100%;
height: auto;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
/* Animations */
[data-aos] {
opacity: 0;
transition-property: opacity, transform;
}
[data-aos].aos-animate {
opacity: 1;
}
/* ------------------------------------------ */
/* Who We Work With / Logo Scroll Section */
/* ------------------------------------------ */
.logo-scroll-section {
background-color: #222; /* dark purple background */
color: #fff;
}
/* Heading above the logos */
.logo-scroll-section .section-heading {
font-size: 2rem;
font-weight: 800;
color: #fff; /* muted light green/gray */
}
/* Container that will hold all logos in a single row */
.logo-scroll {
display: flex;
flex-wrap: nowrap;
overflow-x: auto; /* enable horizontal scroll */
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding-bottom: 0.5rem; /* small bottom padding to show scrollbar gap */
margin-top: 1rem;
}
/* Hide default scrollbar styling in most browsers */
.logo-scroll::-webkit-scrollbar {
display: none;
}
.logo-scroll {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE10+ */
}
/* Each logo will occupy 1/6th of the full container width (minus gutters) */
.partner-logo-sport {
flex: 0 0 calc((100% - (5 * 1rem)) / 6);
max-width: calc((100% - (5 * 1rem)) / 6);
margin-right: 1rem; /* 1rem gutter between logos */
height: 6rem;
object-fit: contain;
background-color: #ffffff;
border-radius: 8px;
padding: 6px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
/* Ensure logos are vertically centered if they differ in aspect ratio */
display: inline-block;
vertical-align: middle;
}
/* Remove right‐margin on the last logo so container doesn’t add extra space */
.logo-scroll .partner-logo:last-child {
margin-right: 0;
}
/* Hover effect: slight pop + drop shadow */
.partner-logo:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* If you need six logos visible at once on all viewport sizes,
the calc((100% - 5rem) / 6) ensures that
6 logos + 5rem of total gutters = 100% width. */
/* Adjust logo size on narrow (mobile) view */
@media (max-width: 576px) {
.logo-scroll .partner-logo {
/* Show 4 logos fully across instead of 6 */
flex: 0 0 calc((100% - (3 * 1rem)) / 4);
max-width: calc((100% - (3 * 1rem)) / 4);
margin-right: 1rem;
}
/* Remove trailing margin on last item for cleaner look */
.logo-scroll .partner-logo:last-child {
margin-right: 0;
}
}
/* ==============================================
Why Choose ST&GE? — Dark Green Background + Yellow Icons
(paste into your theme’s custom stylesheet)
============================================== */
.why-choose-section {
background-color: #008037; /* ST&GE dark green */
padding-top: 3rem !important; /* extra space so the circle isn't cut off */
padding-bottom: 6rem !important;
color: #ffffff; /* section heading/text will be white */
}
/* Override the section heading to be white */
.why-choose-section h2 {
color: #ffffff !important;
}
/* Card Container: keep cards white on top of green */
.reason-card {
background-color: #ffffff; /* card background stays white */
border-radius: 0.5rem;
overflow: visible; /* allow the icon bubble to overflow */
margin-top: 2rem; /* push cards downward so the bubble can sit above */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
/* Remove previous green stripe (we’ll add a narrower stripe so it doesn’t cut circle) */
.reason-card .card-top-stripe {
height: 6px;
background-color: #ffffff; /* hide old stripe by default */
}
/* Instead, we place a slimmer stripe just behind the icon bubble */
.reason-card::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 2rem;
right: 2rem;
height: 4px;
background-color: #ffffff;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
/* Icon Bubble: white border, yellow fill */
.reason-card .icon-bubble {
position: absolute;
top: -2rem; /* move bubble above card */
left: 50%;
transform: translateX(-50%);
width: 4.5rem;
height: 4.5rem;
background-color: #FFD700; /* yellow fill */
border: 3px solid #ffffff; /* white border */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #008037; /* icon color = green */
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
z-index: 2; /* stay on top of card */
}
/* On hover, slightly lift card and invert bubble colors */
.reason-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}
.reason-card:hover .icon-bubble {
background-color: #008037; /* bubble turns green */
color: #ffffff; /* icon turns white */
transform: translateX(-50%) scale(1.1);
}
/* Card Body Text: keep text dark inside a white card */
.reason-card .card-body {
margin-top: 3rem; /* give room for the icon bubble above */
padding: 1.5rem;
color: #333333;
}
.reason-card .card-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.reason-card .card-text {
font-size: 0.95rem;
line-height: 1.5;
color: #555555;
}
/* Fade-Up on Scroll: same as before */
.fade-up-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-up-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* Media Queries for smaller screens */
@media (max-width: 767.98px) {
.why-choose-section {
padding-top: 2rem;
padding-bottom: 3rem;
}
.why-choose-section h2 {
font-size: 2rem;
font-weight: 900;
}
.reason-card {
margin-top: 2.5rem;
}
.reason-card .icon-bubble {
width: 3.5rem;
height: 3.5rem;
top: -1.75rem;
font-size: 1.5rem;
}
.reason-card .card-body {
margin-top: 2.5rem;
padding: 1rem;
}
.reason-card .card-title {
font-size: 1.5rem;
}
.reason-card .card-text {
font-size: 1rem;
}
}
/* ==========================================================================
Types of Football Surfaces: Improved Card Styling + Mobile Swipe
========================================================================== */
/* Surfaces grid (refined visuals, matches Services style) - updated surface page*/
.surface-card {
border-radius: 18px;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.surface-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.surface-card .ratio img {
width: 100%;
height: 100%;
object-fit: cover;
}
.surface-card .card-body {
padding: 1.25rem 1.25rem 1.75rem;
}
.surface-card h5 {
font-weight: 700;
}
.surface-card p {
color: #555;
line-height: 1.5;
}
/* 1) Section background padding (optional) */
.football-surface-section {
background: #eee;
}
.football-surface-row {
/* nothing here—just a hook for the mobile rules below */
}
/* 2) Card Styling (all breakpoints) */
.surface-row .card {
border: none;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: #ffffff;
}
/* 3) Hover “lift” effect (desktop/hover-capable devices) */
@media (hover: hover) {
.surface-row .card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
}
/* 4) Top image: fixed height, object-fit cover */
.surface-row .card img {
width: 100%;
height: 200px; /* same height on all cards */
object-fit: cover;
display: block;
border-radius: 0.5rem; /* soften the edges */
}
/* 5) Card body spacing + text colors */
.surface-row .card .card-body {
padding-top: 0.75rem;
padding-bottom: 1.25rem;
}
.surface-row .card h5 {
font-size: 1.25rem;
color: #003E15; /* dark green (adjust to your exact brand green) */
margin-bottom: 0.75rem;
}
.surface-row .card p {
font-size: 0.95rem;
line-height: 1.5;
color: #555555; /* medium gray */
margin-bottom: 0;
}
/* 6) Mobile (max-width: 767px): turn row into horizontal scroll */
@media (max-width: 767px) {
.football-surface-row {
display: flex !important; /* force flex on the .row container */
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.5rem; /* give room for scrollbar */
margin-left: -1rem; /* to allow scroll to “edge” (compensate container padding) */
margin-right: -1rem;
}
.football-surface-row > .col-md-4 {
flex: 0 0 85%; /* each card takes ~85% of viewport width on mobile */
max-width: 85%;
scroll-snap-align: start;
margin-left: 1rem; /* spacing between cards */
}
.football-surface-row > .col-md-4:first-child {
margin-left: 1rem; /* initial offset from left edge */
}
.football-surface-row::-webkit-scrollbar {
display: none; /* hide default scrollbar on WebKit */
}
/* Slightly larger image on small screens */
.surface-row .card img {
height: 220px;
}
.surface-row .card h5 {
font-size: 1.15rem;
}
.surface-row .card p {
font-size: 0.9rem;
}
}
/* ==========================================================================
Our Football Services Styles
========================================================================== */
/* --- Section resets --- */
.desktop-services,
.mobile-services {
margin: 0;
padding: 0;
}
/* === 1) Responsive visibility === */
/* Hide mobile accordion on medium+ screens (>=768px) */
@media (min-width: 768px) {
.mobile-services {
display: none !important;
}
}
/* Hide desktop cards on small screens (<768px) */
@media (max-width: 767.98px) {
.desktop-services {
display: none !important;
}
}
/* === 2) Card Grid (Desktop) === */
.desktop-services .row {
justify-content: center;
}
/* Each “service‐card” wrapper */
.service-card-wrapper {
display: flex; /* allow card to stretch to equal height */
justify-content: center;
}
/* Actual card box */
.service-card {
/* White background and rounded corners */
background-color: #fff;
border-radius: 0.75rem;
padding: 1.5rem;
width: 100%;
max-width: 360px; /* limit to about 260px per card on desktop */
/* Subtle shadow */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
opacity: 0; /* will fade in via animation */
transform: translateY(20px);
}
/* Title style */
.service-card h5 {
font-size: 1.2rem;
font-weight: 600;
color: #008037; /* your brand‐green */
margin-bottom: 0.75rem;
text-align: center;
}
/* Paragraph style */
.service-card p {
font-size: 1rem;
line-height: 1.5;
color: #444444;
text-align: center;
}
/* Hover “lift” effect (desktop only) */
@media (hover: hover) {
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
}
/* === 3) Entrance Animation (staggered) === */
/* We’ll use CSS keyframes + nth‐child to stagger each card’s fade/slide */
@keyframes serviceFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Apply the animation to each card with incremental delay */
.service-card-wrapper:nth-child(1) .service-card {
animation: serviceFadeIn 0.6s ease-out 0.2s forwards;
}
.service-card-wrapper:nth-child(2) .service-card {
animation: serviceFadeIn 0.6s ease-out 0.4s forwards;
}
.service-card-wrapper:nth-child(3) .service-card {
animation: serviceFadeIn 0.6s ease-out 0.6s forwards;
}
.service-card-wrapper:nth-child(4) .service-card {
animation: serviceFadeIn 0.6s ease-out 0.8s forwards;
}
/* === 4) Mobile Accordion (small screens) === */
.mobile-services .accordion {
border: none;
border-radius: 0.75rem;
overflow: hidden;
}
/* Accordion item/card container */
.mobile-services .accordion-item {
border: none;
margin-bottom: 1rem;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
/* The header (button) */
.mobile-services .accordion-button {
background-color: #fff;
color: #008037; /* your green */
font-weight: 600;
border-radius: 0;
padding: 1rem 1.25rem;
border-bottom: 1px solid #e0e0e0;
position: relative;
z-index: 1;
}
.mobile-services .accordion-button:not(.collapsed) {
background-color: #008037; /* highlight open header in green */
color: #fff;
}
/* The collapse body */
.mobile-services .accordion-body {
background: #f9f9f9;
color: #333333;
padding: 1rem 1.25rem;
}
/* Optional: add a small plus/minus icon animation */
.mobile-services .accordion-button::after {
font-family: "bootstrap-icons";
content: "\f05b"; /* “plus” icon by default */
font-size: 1.2rem;
position: absolute;
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease, color 0.3s ease;
}
.mobile-services .accordion-button:not(.collapsed)::after {
content: "\f146"; /* “dash” icon when expanded */
}
/* Hide that default Bootstrap caret if present */
.mobile-services .accordion-button::before {
display: none;
}
/* ======================================== */
/* Hero Section – Football Page Carousel */
/* ======================================== */
.sport-hero-section {
position: relative;
overflow: hidden;
}
/* Each slide fills the section */
.sport-hero-section .carousel-item {
height: 70vh; /* adjust as needed */
min-height: 400px; /* fallback */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* Ensure the carousel wrapper is relative for the overlay */
#footballHeroCarousel {
position: relative;
}
/* Semi-transparent dark layer + centered text */
.sport-hero-section .hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background-color: rgba(0, 0, 0, 0.4);*/
z-index: 5;
color: #ffffff;
padding: 0 1rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
/* Hero title styling */
.sport-hero-section .hero-title {
font-size: 2.5rem; /* adjust as needed */
font-weight: 700;
margin-bottom: 0.5rem;
}
/* Hero subtitle styling */
.sport-hero-section .hero-subtitle {
font-size: 1.2rem; /* adjust as needed */
}
/* ------------------------------------------------ */
/* Responsive Adjustments */
/* ------------------------------------------------ */
@media (max-width: 768px) {
.sport-hero-section {
/* Optional: reduce overall height on smaller screens */
}
.sport-hero-section .hero-title {
font-size: 2rem;
}
.sport-hero-section .hero-subtitle {
font-size: 1rem;
}
.sport-hero-section .carousel-item {
height: 40vh; /* reduce slide height if desired */
}
}
/* ==========================
Football Hero: Darker Overlay & Improved Text Legibility
========================== */
.sport-hero-section .hero-overlay {
/* Make the overlay a bit darker */
/*background: linear-gradient(
);*/
z-index: 5;
color: #ffffff;
padding: 0 1rem;
}
.sport-hero-section .hero-title {
font-size: 3rem;
font-weight: 700;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
margin-bottom: 0.75rem;
}
.sport-hero-section .hero-subtitle {
font-size: 1.25rem;
color: #f0f0f0;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
min-height: 3rem; /* reserve some vertical space even while typing */
white-space: pre-wrap; /* allow wrapping if text is long */
overflow: hidden; /* hide overflow during typewriter effect */
}
/* Responsive text sizes (adjust as needed) */
@media (max-width: 768px) {
.sport-hero-section .hero-title {
font-size: 2.25rem;
}
.sport-hero-section .hero-subtitle {
font-size: 1rem;
}
}
/* =======================
Subtitle Fade-In Animation
======================= */
.sport-hero-section .hero-subtitle {
opacity: 0; /* start hidden */
transition: opacity 1.2s ease-in-out;
}
.sport-hero-section .hero-subtitle.fade-in {
opacity: 1; /* fade up to fully visible */
}
/* (Optional) you can tweak timing-function or delay if desired */
/* ensure images fill their card area */
.object-fit-cover {
width: 100%;
height: 180px;
object-fit: cover;
}
/* Courts Page */
/* sport-card hover lift */
.sport-card {
border: none;
border-radius: .5rem;
transition: transform .3s ease, box-shadow .3s ease;
}
.sport-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
/* CTA card styling */
.cta-card {
background: linear-gradient(135deg, #008037, #00b04b);
border: none;
border-radius: .5rem;
transition: transform .3s ease, box-shadow .3s ease;
}
.cta-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.cta-card .card-title {
font-weight: 600;
}
/* Court Intro Section */
.sport-page-single-intro {
background-color: #f0f8f3; /* very light green tint */
}
.sport-page-single-intro .section-header {
font-size: 2.5rem;
font-weight: 700;
color: #008037; /* ST&GE green */
position: relative;
padding-bottom: 0.5rem;
}
/* Decorative bar under the heading */
.sport-page-single-intro .accent-bar {
display: block;
width: 60px;
height: 4px;
background: #008037;
margin: 0.5rem auto 0;
border-radius: 2px;
}
.sport-page-single-intro p {
font-size: 1rem;
line-height: 1.65;
color: #333;
}
/* Mobile adjustments */
@media (max-width: 767px) {
.sport-page-single-intro {
padding: 2rem 1rem;
}
.sport-page-single-intro .section-header {
font-size: 1.75rem;
}
.sport-page-single-intro p {
text-align: center;
font-size: 0.95rem;
max-width: 90%;
margin: 0 auto;
}
.sport-page-single-intro .row {
--bs-gutter-x: 1rem; /* tighter gutters on mobile */
}
}
/* =================== */
/* Arena Gallery */
/* =================== */
.gallery-scroll-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -1rem; /* full-width effect */
padding: 0 1rem;
}
.gallery-scroll-wrapper::-webkit-scrollbar {
display: none;
}
.gallery-scroll {
display: flex;
gap: 1rem;
scroll-behavior: smooth;
}
.gallery-item {
flex: 0 0 300px; /* fixed card width; adjust as needed */
border-radius: 12px;
overflow: hidden;
cursor: grab;
transition: transform 0.3s ease;
}
.gallery-item:active {
cursor: grabbing;
}
.gallery-item img {
width: 100%;
height: 200px; /* fixed height */
object-fit: cover;
display: block;
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
/* Responsive: narrow cards on small phones */
@media (max-width: 576px) {
.gallery-item {
flex: 0 0 80%;
}
.gallery-item img {
height: 160px;
}
}
/* ==========================================
Key Features Section – Green Background
========================================== */
.bg-green {
background-color: #008037 !important; /* ST&GE green */
/*color: #ffffff;*/
}
.text-yellow {
color: #FFD700 !important;
}
.choose-card {
padding: 1.5rem;
/*background: rgba(255, 255, 255, 0.05);*/
background-color: #008037;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.15);
color: #ffffff;
}
.choose-card h5 {
font-size: 1.25rem;
font-weight: 700;
}
.choose-card:hover {
transform: translateY(-5px);
}
/* ==========================================
Turnkey Process Section – Light Background
========================================== */
.turnkey-process-section {
background-color: #f8f9fa; /* Bootstrap light or custom pale background */
color: #333333;
}
.turnkey-step-card {
background-color: #ffffff;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
border: 1px solid #e0e0e0;
height: 100%;
}
.turnkey-step-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.turnkey-step-card img {
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1rem;
}
.step-label {
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.text-green {
color: #008037;
}
@media (max-width: 576px) {
.turnkey-step-card img {
height: 140px;
}
}
/* Center align scrollable surface cards on desktop */
@media (min-width: 768px) {
.surface-scroll-inner {
justify-content: center;
flex-wrap: wrap;
display: flex;
}
}
/* Contact Form Styling */
.contact-card {
background: rgba(0, 0, 0, 0.6); /* semi-transparent dark */
backdrop-filter: blur(6px); /* glass/frosted look */
border-radius: 1rem;
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
color: #fff;
}
/* Make labels & placeholders visible on dark bg */
.contact-card .form-control,
.contact-card .input-group-text {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
}
.contact-card .form-control::placeholder {
color: rgba(255,255,255,0.7);
}
.contact-card .input-group-text {
color: #fff;
}
/* Button tweaks */
.contact-card .btn-success {
background-color: #0b7d3b;
border: none;
font-weight: 600;
border-radius: .5rem;
transition: background-color .2s ease;
}
.contact-card .btn-success:hover {
background-color: #095f2d;
}
/* CTA Bar Styling */
.cta-bar {
background-color: #008037; /* ST&GE green */
background: linear-gradient( to bottom right, #008037 0%, #005f2f 100%); color:#fff;
}
.cta-bar h2 {
font-size: 2rem;
font-weight: 700;
}
.cta-bar p {
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.cta-bar .btn {
font-weight: 600;
border-radius: .5rem;
transition: all .2s ease;
}
.cta-bar .btn:hover {
background: #fff;
color: #008037;
}
/* ===== Footer ===== */
.site-footer {
background: #1f2426; /* deep grey */
position: relative;
}
.site-footer .footer-title {
font-weight: 800;
letter-spacing: .03em;
color: #fff;
margin-bottom: .75rem;
}
.site-footer .footer-links li {
margin-bottom: .4rem;
}
.site-footer .footer-links a {
color: #cfd6d9;
text-decoration: none;
}
.site-footer .footer-links a:hover {
color: #ffffff;
text-decoration: underline;
}
.site-footer .footer-contact {
color: #cfd6d9;
}
.site-footer .footer-contact a {
color: #cfd6d9;
}
.site-footer .footer-contact a:hover {
color: #fff;
}
.site-footer .btn.btn-outline-light {
border-color: rgba(255,255,255,.25);
color: #fff;
}
.site-footer .btn.btn-outline-light:hover {
background: #fff;
color: #0b7d3b; /* ST&GE green */
}
/* Divider tint */
.site-footer .footer-divider {
border-color: rgba(255,255,255,.15);
}
/* Back to top */
.back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
border-radius: 999px;
padding: .55rem .7rem;
box-shadow: 0 10px 20px rgba(0,0,0,.25);
display: none;
z-index: 1080;
}
/* Make focus states visible on dark bg */
.site-footer a:focus {
outline: 2px dashed #86d19a;
outline-offset: 2px;
}
/* Contact form panel */
/* ===== STGE Design Tokens ===== */
:root{
--stge-green: #0b7d3b;
--stge-green-600:#095f2d;
--stge-text:#1f2426;
--stge-muted:#6c7a80;
--stge-border: rgba(0,0,0,.08);
--stge-card-bg:#ffffff;
--stge-radius: 1rem;
--stge-shadow: 0 8px 24px rgba(0,0,0,.08);
--stge-shadow-sm: 0 4px 16px rgba(0,0,0,.06);
--stge-focus: 0 0 0 .2rem rgba(11,125,59,.25);
}
/* ===== Universal Card ===== */
.stge-card{
background: var(--stge-card-bg);
border: 1px solid var(--stge-border);
border-radius: var(--stge-radius);
box-shadow: var(--stge-shadow);
}
.stge-card--soft{ box-shadow: var(--stge-shadow-sm); }
.stge-card__body{ padding: 1.25rem; }
@media (min-width: 768px){
.stge-card__body{ padding: 1.5rem; }
}
/* ===== Inputs (light) ===== */
.stge-input.form-control,
.stge-input.form-select{
border:1px solid var(--stge-border);
background-color:#fff;
color:var(--stge-text);
border-radius:.6rem;
}
.stge-input.form-control:focus,
.stge-input.form-select:focus{
border-color: var(--stge-green);
box-shadow: var(--stge-focus);
}
.stge-input::placeholder{ color: #9aa4a9; }
/* Input group on light bg */
.input-group .input-group-text{
background:#fff;
border:1px solid var(--stge-border);
border-right:0;
border-radius:.6rem 0 0 .6rem;
color: var(--stge-muted);
}
.input-group .form-control.stge-input{
border-left:0;
border-radius:0 .6rem .6rem 0;
}
/* ===== Icon list (for contact details) ===== */
.stge-iconlist{
list-style:none;
padding-left:0;
margin:0;
}
.stge-iconlist li{
display:flex; align-items:flex-start;
gap:.625rem;
padding:.4rem 0;
color: var(--stge-text);
}
.stge-iconlist i{
color: var(--stge-green);
margin-top:.1rem;
}
/* ===== Brand button ===== */
.btn-stge{
background: var(--stge-green);
border-color: var(--stge-green);
color:#fff; font-weight:600; border-radius:.6rem;
}
.btn-stge:hover{ background: var(--stge-green-600); border-color: var(--stge-green-600); }
/* ===== Map wrapper matches cards ===== */
.stge-map{ overflow:hidden; border-radius: var(--stge-radius); }
/* Page Hero (universal) */
.page-hero {
background: linear-gradient(to bottom right, #008037 0%, #005f2f 100%);
color:#fff;
}
.page-hero-h1 { font-weight: 800; font-size: 2.5rem; }
.page-hero-lead { color: #eee; font-size: 1.1rem; }
@media (min-width: 768px) {
.page-hero-h1 { font-size: 3rem; }
.page-hero-lead { font-size: 1.25rem; }
}
/* Optional variants if needed later */
.page-hero--short { padding: 3rem 0; }
.page-hero--tall { padding: 8rem 0; }
.contact-main{ background:#fff; }
/* Small alert polish on light page */
.alert{ border-radius:.6rem; }
/* Sports Grid */
.sport-overlay h3 {
color: #fff;
font-weight: 700;
margin: 0;
font-size: 1.25rem;
}
/* Clickable sports cards */
.sport-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,.08);
transition: transform .25s ease, box-shadow .25s ease;
position: relative;
background: #f6f8f7;
height: 240px;
}
.sport-card:hover { transform: translateY(-6px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.sport-img {
height: inherit;
background-size: cover;
background-position: center;
position: relative;
}
.sport-overlay {
position: relative;
height: 100%;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.75));
display: flex;
align-items: flex-end;
padding: 15px;
}
.sport-title {
color: #fff;
font-weight: 800;
font-size: 1.125rem;
margin: 0;
text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
/* Make whole card clickable */
.sport-overlay .stretched-link {
position: absolute;
inset: 0;
}
/* Responsive height tweak */
@media (min-width: 992px) {
.sport-img { height: 240px; }
}
/* Navbar look */
/* Desktop/Tablet header nav */
.stge-header .navbar {
box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
background: #fff;
}
.stge-header .navbar-brand img {
max-height: 44px;
width: auto;
}
@media (min-width: 992px) {
.stge-header .navbar .navbar-nav {
flex-direction: row;
gap: .25rem;
}
.stge-header .navbar .nav-link {
padding: .75rem 1rem;
font-weight: 600;
text-transform: none;
letter-spacing: .01em;
text-transform: uppercase;
}
.stge-header .navbar .dropdown-menu {
margin-top: .5rem;
border: 1px solid rgba(0, 0, 0, .08);
border-radius: .5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
padding: .5rem;
}
.stge-header .navbar .dropdown-item {
padding: .5rem .75rem;
border-radius: .35rem;
font-weight: 500;
text-transform: uppercase;
background: #ddd;
color: #222;
}
.stge-header .navbar .navbar-nav>.nav-item:last-child>.dropdown-menu {
right: 0;
left: auto;
}
.stge-header .navbar .dropdown-submenu {
position: relative;
}
.stge-header .navbar .dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-left: .25rem;
}
}
.stge-header .navbar .current-menu-item>.nav-link,
.stge-header .navbar .current-menu-ancestor>.nav-link {
color: #0b7d3b;
}
/* Mobile bar */
@media (max-width: 991.98px) {
.stge-header .navbar {
padding-top: .4rem;
padding-bottom: .4rem;
}
.stge-header .navbar-brand {
margin-right: auto;
}
/* logo stays left */
.stge-header .navbar-toggler {
border: none;
background: #f4f6f5;
border-radius: 10px;
padding: .5rem .6rem;
}
.stge-header .navbar-toggler:focus {
box-shadow: 0 0 0 .15rem rgba(11, 125, 59, .25);
}
}
/* Offcanvas (scoped) */
#stgeOffcanvas {
width: 300px;
}
#stgeOffcanvas .offcanvas-header {
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
#stgeOffcanvas .offcanvas-title {
font-weight: 800;
letter-spacing: .02em;
color: #0b7d3b;
}
#stgeOffcanvas .navbar-nav {
flex-direction: column;
}
#stgeOffcanvas .nav-link {
padding: 14px 6px;
font-size: 1.05rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .01em;
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
#stgeOffcanvas .current-menu-item>.nav-link,
#stgeOffcanvas .current-menu-ancestor>.nav-link {
color: #0b7d3b;
background: rgba(11, 125, 59, .06);
border-radius: 8px;
}
#stgeOffcanvas .dropdown-menu {
position: static;
float: none;
border: 0;
box-shadow: none;
padding: 0 0 0 .5rem;
margin: 0;
}
#stgeOffcanvas .dropdown-item {
padding: .6rem .5rem .6rem 1rem;
font-weight: 600;
text-transform: uppercase;
}
#stgeOffcanvas .dropdown-toggle::after {
margin-left: .35rem;
}
/* Optional: brand logo height + toggler polish */
.logo-img {
height: 40px;
max-width: 100%;
}
.navbar-toggler {
border: none;
background: #f8f9fa;
border-radius: 8px;
padding: 8px 10px;
}
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
/* Keep brand left; bigger mobile toggler */
@media (max-width: 991.98px) {
.stge-header .navbar {
padding: .4rem 0;
}
.stge-header .navbar-brand {
margin-right: auto;
}
.stge-header .navbar-toggler {
border: none;
background: #f4f6f5;
border-radius: 10px;
padding: .5rem .6rem;
}
.stge-header .navbar-toggler:focus {
box-shadow: 0 0 0 .15rem rgba(11, 125, 59, .25);
}
}
/* Offcanvas polish (scoped) */
#stgeOffcanvas {
width: 300px;
}
#stgeOffcanvas .offcanvas-header {
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
#stgeOffcanvas .offcanvas-title {
font-weight: 800;
letter-spacing: .02em;
color: #0b7d3b;
}
#stgeOffcanvas .navbar-nav {
flex-direction: column;
}
#stgeOffcanvas .nav-link {
padding: 14px 6px;
font-size: 1.05rem;
font-weight: 700;
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
#stgeOffcanvas .current-menu-item>.nav-link,
#stgeOffcanvas .current-menu-ancestor>.nav-link {
color: #0b7d3b;
background: rgba(11, 125, 59, .06);
border-radius: 8px;
}
#stgeOffcanvas .dropdown-menu {
position: static;
float: none;
border: 0;
box-shadow: none;
padding: 0 0 0 .5rem;
margin: 0;
}
#stgeOffcanvas .dropdown-item {
padding: .6rem .5rem .6rem 1rem;
font-weight: 600;
}
/* Make sure desktop nav looks tidy */
.stge-header .navbar .navbar-nav {
gap: .25rem;
}
.stge-header .navbar .nav-link {
padding: .75rem 1rem;
font-weight: 600;
}
/* === ST&GE – Mobile Toggler (glass card, bold bars, X animation) === */
.stge-header .navbar-toggler{
width: 46px;
height: 46px;
padding: 0;
border: 1px solid rgba(0,0,0,.06);
border-radius: 12px;
background: rgba(255,255,255,.9);
backdrop-filter: blur(6px);
box-shadow: 0 2px 10px rgba(0,0,0,.12);
display: grid;
place-items: center;
}
/* Remove Bootstrap’s default hamburger image */
.stge-header .navbar-toggler .navbar-toggler-icon{
background-image: none !important;
position: relative;
width: 22px;
height: 2px; /* middle bar */
background: var(--stge-green, #0b7d3b);
border-radius: 2px;
transition: background .2s ease, transform .25s ease;
}
/* Top & bottom bars */
.stge-header .navbar-toggler .navbar-toggler-icon::before,
.stge-header .navbar-toggler .navbar-toggler-icon::after{
content: "";
position: absolute;
left: 0;
width: 22px;
height: 2px;
background: var(--stge-green, #0b7d3b);
border-radius: 2px;
transition: transform .25s ease, top .25s ease, bottom .25s ease, opacity .2s ease;
}
.stge-header .navbar-toggler .navbar-toggler-icon::before{ top: -6px; }
.stge-header .navbar-toggler .navbar-toggler-icon::after { bottom: -6px; }
/* Focus & hover polish */
.stge-header .navbar-toggler:focus{
outline: none;
box-shadow: 0 0 0 .18rem rgba(11,125,59,.25);
}
.stge-header .navbar-toggler:hover{
box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
/* === Transform to "X" when open (Bootstrap toggles aria-expanded) === */
.stge-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
background: transparent;
}
.stge-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{
top: 0;
transform: rotate(45deg);
}
.stge-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{
bottom: 0;
transform: rotate(-45deg);
}
/* ===== Business Verticals – polished tiles ===== */
.vertical-card{
width: 100%;
border-radius: 1rem;
padding: 1.75rem 1.25rem 1.25rem;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
border: 1px solid var(--stge-border);
box-shadow: var(--stge-shadow-sm);
}
.vertical-card:hover,
.vertical-card:focus-within{
transform: translateY(-6px);
box-shadow: var(--stge-shadow);
outline: 0;
}
.vertical-card__icon{
width: 64px; height: 64px;
border-radius: 999px;
background: #E5F6EE; /* pale green bubble */
color: var(--stge-green);
display: grid; place-items: center;
font-size: 30px;
margin: 0 auto .75rem;
}
.vertical-card__title{
text-align: center;
font-weight: 800;
margin-bottom: .75rem;
}
.vertical-card__list{
margin-top: .5rem;
}
.vertical-card__list li{
align-items: center;
gap: .5rem;
color: #333;
padding: .25rem 0;
}
.vertical-card__list i{
color: var(--stge-green);
margin-top: .1rem;
}
/* Mobile: horizontal scroll (keeps cards compact) */
.verticals-scroll{
overflow-x: auto; -webkit-overflow-scrolling: touch;
padding-bottom: .5rem; margin: 0 -1rem;
}
.verticals-scroll::-webkit-scrollbar{ display:none; }
.verticals-scroll__inner{
display:flex; gap: 1rem; padding: 0 1rem;
}
.verticals-scroll .vertical-card{
flex: 0 0 85vw; /* nearly full width cards on small phones */
max-width: 85vw;
}
/* ============================
Frontpage – Sports Strip
============================ */
/* wrapper + spacing */
.fp-sports-strip {
--tile-w: 160px; /* mobile tile width */
--tile-gap: 1rem;
}
/* The adaptive container: scroll on mobile, wrap on desktop */
.sports-strip{
display:flex;
gap: var(--tile-gap);
overflow-x:auto;
-webkit-overflow-scrolling: touch;
padding: .25rem .25rem .75rem;
scroll-snap-type: x mandatory;
}
.sports-strip::-webkit-scrollbar{ display:none; }
/* Tile base */
.sport-tile{
flex: 0 0 var(--tile-w); /* mobile: fixed card width, horizontal scroll */
max-width: var(--tile-w);
scroll-snap-align: start;
display:flex;
flex-direction:column;
align-items:center;
text-decoration:none;
background:#fff;
border:1px solid var(--stge-border, rgba(0,0,0,.08));
border-radius: 14px;
box-shadow: var(--stge-shadow-sm, 0 4px 16px rgba(0,0,0,.06));
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sport-tile:hover{
transform: translateY(-6px);
box-shadow: var(--stge-shadow, 0 8px 24px rgba(0,0,0,.08));
border-color: rgba(0,0,0,.10);
}
/* Image holder (consistent aspect) */
.sport-tile__img{
width: 100%;
height: 120px;
display:grid;
place-items:center;
overflow:hidden;
border-radius: 14px 14px 0 0;
background:#f4f6f5;
}
.sport-tile__img img{
max-width: 90%;
max-height: 90%;
object-fit: contain;
filter: grayscale(1);
transition: filter .25s ease, transform .25s ease;
}
.sport-tile:hover .sport-tile__img img{
filter: grayscale(0);
transform: scale(1.02);
}
/* Caption under image */
.sport-tile__name{
width: 100%;
text-align:center;
padding: .6rem .5rem .8rem;
font-weight: 700;
color: #1f2426;
font-size: .95rem;
}
/* Desktop: turn into static wrapped grid */
@media (min-width: 768px){
.sports-strip{
overflow: visible; /* no scroll */
flex-wrap: wrap;
justify-content: center;
padding: 0;
}
.sport-tile{
flex: 0 0 calc(20% - var(--tile-gap)); /* 5 columns */
max-width: calc(20% - var(--tile-gap)); /* 10 items -> 2 rows of 5 */
}
.sport-tile__img{ height: 140px; }
.sport-tile__name{ font-size: 1rem; }
}
/* Big desktop: slightly larger tiles */
@media (min-width: 1200px){
.sport-tile__img{ height: 160px; }
}
/* ==== Force one-row horizontal scroll on all screens ==== */
.fp-sports-strip{ --tile-w: 220px; --tile-gap: 1.25rem; } /* wider tiles on desktop */
.sports-strip{
display:flex;
gap: var(--tile-gap);
overflow-x: auto; /* always scrollable */
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: .25rem .25rem .75rem;
flex-wrap: nowrap; /* never wrap */
}
.sport-tile{
flex: 0 0 var(--tile-w); /* fixed width tiles */
max-width: var(--tile-w);
scroll-snap-align: start;
}
/* Desktop polish: keep one row, add subtle scrollbar */
@media (min-width: 768px){
.sports-strip{
padding-bottom: .75rem;
margin-inline: -4px; /* slight edge-to-edge feel (optional) */
}
.sports-strip::-webkit-scrollbar{ height: 8px; }
.sports-strip::-webkit-scrollbar-thumb{
background: rgba(0,0,0,.18);
border-radius: 6px;
}
.sports-strip::-webkit-scrollbar-track{ background: transparent; }
/* bigger images on desktop */
.sport-tile .sport-tile__img{ height: 120px; }
.sport-tile .sport-tile__name{ font-size: 1rem; }
}
/* (Optional) fade the edges while scrolling */
.sports-strip--mask{
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
/* smooth auto scroll */
.sports-strip {
scroll-behavior: smooth;
}
/* Infinite loop variant */
.sports-strip.js-loop{
flex-wrap: nowrap; /* one row forever */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: auto; /* we animate ourselves */
scroll-snap-type: none; /* no snapping while auto-looping */
}
.sports-strip.js-loop::-webkit-scrollbar { height: 8px; }
.sports-strip.js-loop::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 6px; }
.sports-strip.js-loop::-webkit-scrollbar-track { background: transparent; }
/* Tiles already had fixed width; keep it for the loop */
.sports-strip.js-loop .sport-tile{
flex: 0 0 var(--tile-w, 220px);
max-width: var(--tile-w, 220px);
}
/* ===== Service Pages template ===== */
.service-hero {
position: relative;
padding-bottom: 0; /* hero has image below the heading */
}
.service-hero .service-hero-media {
margin-top: 1.25rem;
overflow: hidden;
border-radius: 16px 16px 0 0;
max-height: 420px;
}
.service-hero .service-hero-media img{
width: 100%;
height: 100%;
object-fit: cover;
display:block;
}
.service-body .prose p {
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 1rem;
}
.service-gallery {
display: grid;
gap: .75rem;
}
.service-gallery__item img{
width:100%; height:auto;
}
/* Optional: tidy related links */
.service-subnav a { color: #0b7d3b; font-weight: 600; }
.service-subnav a:hover { text-decoration: underline; }
/* Keep the heading bar clean */
.page-hero.service-hero {
background: #0b7d3b; /* your green */
color: #fff;
margin-bottom: 0;
}
/* Hero image sits as its own block */
/* Green header band stays as-is */
.page-hero.service-hero {
background:#0b7d3b;
color:#fff;
margin-bottom: 0;
}
/* 960px inner container */
.container-960{
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: var(--bs-gutter-x, .75rem);
padding-right: var(--bs-gutter-x, .75rem);
}
/* 2:1 media box */
.service-media-box{
width: 100%;
aspect-ratio: 2 / 1; /* keeps 2:1 on all screens */
overflow: hidden;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
background: #f4f6f5; /* subtle fallback bg */
margin-top: 1.25rem;
}
.service-media-box img{
width: 100%;
height: 100%;
object-fit: cover; /* crop nicely within 2:1 */
display: block;
}
/* Body container for service pages */
.service-content {
font-size: 1.05rem;
line-height: 1.8;
color: #333;
}
.service-content .container-960 {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
/* Optional: style text */
.service-content p {
margin-bottom: 1.25rem;
}
.service-content h2,
.service-content h3 {
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
color: #0b7d3b;
}
/* ===== Related Services (under service content) ===== */
.service-related__heading{
color:#0b7d3b;
}
.service-related__list{
display:flex;
flex-wrap:wrap;
gap:.5rem .75rem;
}
.service-related__link{
display:inline-block;
padding:.5rem .85rem;
border:1px solid rgba(0,0,0,.08);
border-radius:999px;
background:#fff;
font-weight:600;
text-decoration:none;
color:#1f2426;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.service-related__link:hover,
.service-related__link:focus{
transform: translateY(-2px);
border-color: rgba(11,125,59,.35);
box-shadow: 0 6px 18px rgba(0,0,0,.08);
color:#0b7d3b;
outline:none;
}
/* ===== Premium Front‑page Hero ===== */
.fp-hero{
position: relative;
min-height: 78vh; /* good height for desktops */
display: grid;
place-items: center;
isolation: isolate; /* keeps overlay layered cleanly */
}
.fp-hero__media,
.fp-hero__overlay{
position: absolute;
inset: 0;
}
.fp-hero__video{
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.0) contrast(1.05) brightness(.75); /* subtle richness */
}
/* soft vignette + brand tint toward bottom for legibility */
.fp-hero__overlay{
background: rgba(0, 0, 0, 0.1);
/*radial-gradient(1100px 50% at 50% 100%, rgba(0,0,0,.55) 0%, transparent 70%),
linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 20%, rgba(0,0,0,.45) 50%);*/
z-index: 1;
}
.fp-hero__content{
position: relative;
z-index: 2;
padding-top: 2rem;
padding-bottom: 2.25rem;
}
/* Glassy content card */
.fp-hero__card{
max-width: 920px;
background: rgba(0,0,0,.05);
backdrop-filter: blur(1px);
border: 1px solid rgba(255,255,255,.02);
border-radius: 1rem;
padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 4vw, 2.25rem);
box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.fp-hero__title{
color: #fff;
font-weight: 800;
letter-spacing: .02em;
line-height: 1.15;
font-size: clamp(1.9rem, 3.8vw, 3.25rem);
text-shadow: 0 4px 18px rgba(0,0,0,.45);
}
.fp-hero__lead{
color:#e8f3ec;
font-size: clamp(1rem, 1.4vw, 1.15rem);
line-height: 1.65;
opacity: .95;
max-width: 760px;
}
/* Buttons */
.btn-hero{
background: linear-gradient(135deg,#005e2e,#008037);
color: #fff;
border: none;
font-weight: 700;
border-radius: 999px;
padding: .8rem 1.35rem;
box-shadow: 0 10px 26px rgba(0,128,55,.25);
transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-hero:hover{
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(0,128,55,.32);
color:#fff;
}
.btn-hero--light{
background: rgba(255,255,255,.15);
color:#fff;
border: 1px solid rgba(255,255,255,.25);
box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.btn-hero--light:hover{
background: rgba(255,255,255,.22);
box-shadow: 0 14px 30px rgba(0,0,0,.26);
}
/* Scroll cue */
.fp-hero__scroll{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: clamp(14px, 2.2vh, 28px);
color:#e7efe9;
opacity:.8;
text-align:center;
font-weight:600;
letter-spacing:.06em;
font-size:.8rem;
}
.fp-hero__mouse{
width: 24px; height: 38px;
border: 2px solid rgba(255,255,255,.8);
border-radius: 16px;
display: inline-block;
position: relative;
}
.fp-hero__mouse::after{
content:"";
position:absolute; left:50%; top:8px;
width:4px; height:8px; border-radius:2px;
transform: translateX(-50%);
background: rgba(255,255,255,.85);
animation: heroWheel 1.4s ease-in-out infinite;
}
@keyframes heroWheel{
0% { transform: translate(-50%,0); opacity: .9; }
70% { transform: translate(-50%,10px); opacity: .25; }
100% { transform: translate(-50%,0); opacity: .9; }
}
/* Mobile spacing */
@media (max-width: 575.98px){
.fp-hero{ min-height: 78vh; }
.fp-hero__card{ padding: 1.1rem 1rem; }
}
/* =========================
Frontpage HERO polish
========================= */
/* Use a lighter, more nuanced shade over the video */
.hero {
position: relative;
overflow: hidden;
}
/* If your hero already had an overlay, this replaces it.
Otherwise it creates a new one without touching the markup. */
.hero::before{
content:"";
position: absolute;
inset: 0;
/* top is very light, bottom is modest so text still reads well */
background: linear-gradient(
to bottom,
rgba(0,0,0,.12) 0%,
rgba(0,0,0,.18) 38%,
rgba(0,0,0,.28) 100%
);
pointer-events: none;
z-index: 1;
}
/* Make sure the text bubble sits above the overlay */
.hero .container,
.hero .hero-content,
.hero .hero-glass,
.hero .btn-group {
position: relative;
z-index: 2;
}
/* Optional: slightly brighten the video itself so it feels crisp */
.hero video,
.hero .bg-video {
filter: brightness(.95) contrast(1.05);
}
/* Scroll cue – positioned bottom center */
.hero-scroll {
position: absolute;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
z-index: 3;
display: inline-flex;
align-items: center;
gap: .35rem;
color: #fff;
opacity: .85;
text-decoration: none;
font-weight: 600;
letter-spacing: .02em;
margin-top: 50px;
}
/* “mouse” icon built with CSS so no asset needed */
.hero-scroll .mouse {
width: 22px; height: 34px;
border: 2px solid rgba(255,255,255,.85);
border-radius: 14px;
position: relative;
display: inline-block;
}
.hero-scroll .mouse::after{
content:"";
position: absolute;
top: 6px; left: 50%;
width: 2px; height: 6px;
background: rgba(255,255,255,.9);
border-radius: 2px;
transform: translateX(-50%);
animation: wheel 1.5s ease-in-out infinite;
}
@keyframes wheel {
0% { opacity: 0; transform: translate(-50%, -4px); }
40% { opacity: 1; transform: translate(-50%, 2px); }
100% { opacity: 0; transform: translate(-50%, 8px); }
}
/* small screens: nudge the cue a bit closer to the edge */
@media (max-width: 575.98px){
.hero-scroll { bottom: 16px; }
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.2)
);
z-index: 1;
}
/* === Project cards === */
.project-card{
display:block;
border-radius: 14px;
overflow:hidden;
background:#fff;
box-shadow: 0 8px 28px rgba(0,0,0,.06);
text-decoration:none;
color:inherit;
transition: transform .15s ease, box-shadow .2s ease;
}
.project-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.10); }
.project-card__media{ position: relative; }
.project-card__media img{ width:100%; height:auto; display:block; }
.project-card__badge{
position:absolute; left:12px; top:12px;
background:#0b7d3b; color:#fff; font-weight:700;
padding:.25rem .5rem; border-radius:999px; font-size:.8rem;
}
.project-card__body{ padding: .9rem 1rem 1.1rem; }
.project-card__title{ font-weight:800; font-size:1.05rem; margin:0 0 .35rem; }
.project-card__meta{ color:#566; margin:0 0 .5rem; }
.project-card__excerpt{ color:#223; opacity:.9; margin:0 0 .5rem; }
.project-card__tags .tag{
display:inline-block; font-size:.75rem; background:#eef6f0; color:#0b7d3b;
padding:.25rem .5rem; border-radius:999px; margin-right:.35rem; margin-bottom:.25rem;
}
/* Gallery grid on single */
.project-gallery{
display:grid; gap: .75rem;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px){
.project-gallery{ grid-template-columns: repeat(3, 1fr); }
}
/* Quote */
.project-quote{
background:#f6fbf8; border-left:4px solid #0b7d3b;
padding:1rem 1.1rem; border-radius: 8px;
}
.project-quote p{ margin:0; font-style:italic; }
.project-quote footer{ margin-top:.5rem; color:#555; font-weight:600; }
/* ========== Project Archive ========== */
.projects-archive{ padding: 2rem 0 3rem; }
.projects-toolbar{
position: sticky; top: 64px; z-index: 5;
background: #fff; border: 1px solid #eef1f2; border-radius: 14px;
padding: .85rem; margin-bottom: 1rem;
box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.toolbar-row{ display: grid; gap: .75rem; grid-template-columns: repeat(12, 1fr); }
.tool{ grid-column: span 3; display:flex; flex-direction: column; gap:.25rem; }
.tool--search{ grid-column: span 3; }
.tool__label{ font-size:.8rem; font-weight:700; color:#2a2f33; }
.tool__select, .tool__search{
width: 100%; border:1px solid #dde5e8; border-radius: 10px; padding:.6rem .75rem;
}
.tool__submit{ grid-column: span 3; width:100%; }
.toolbar-chips{ padding:.35rem .2rem 0; display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{
display:inline-flex; align-items:center; gap:.35rem;
padding:.35rem .6rem; border-radius:999px; background:#f1f6f3; color:#0b7d3b; font-weight:700; text-decoration:none;
border:1px solid #e2efe6;
}
.chip--clear{ background:#fff8f0; color:#a35a00; border-color:#ffe3bf; }
@media (max-width: 991.98px){
.tool{ grid-column: span 6; }
.tool--search, .tool__submit{ grid-column: span 12; }
}
.projects-grid{
display:grid; gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
margin-top: .75rem;
}
.proj-card{
border-radius:16px; overflow:hidden; background:#fff; border:1px solid #eef1f2;
box-shadow:0 10px 26px rgba(0,0,0,.05);
transition:transform .15s ease, box-shadow .2s ease;
}
.proj-card:hover{ transform: translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.08); }
.proj-card__media{ position:relative; display:block; }
.proj-card__media img{ width:100%; height:auto; display:block; aspect-ratio: 16/9; object-fit: cover; }
.proj-card__badge{
position:absolute; left:12px; top:12px; background:#0b7d3b; color:#fff;
padding:.25rem .55rem; border-radius:999px; font-weight:800; font-size:.8rem; box-shadow:0 6px 14px rgba(0,128,55,.25);
}
.proj-card__body{ padding:.9rem 1rem 1.1rem; }
.proj-card__title{ font-weight:800; margin:0 0 .25rem; font-size:1.05rem; }
.proj-card__title a{ text-decoration:none; color:inherit; }
.proj-card__meta{ color:#5d6a6f; font-size:.92rem; margin:0 0 .5rem; }
.proj-card__excerpt{ color:#1e2426; opacity:.92; margin:0 0 .6rem; }
.proj-card__tags .tag{
display:inline-block; background:#eef6f0; color:#0b7d3b; padding:.25rem .55rem; border-radius:999px; font-size:.75rem; font-weight:700;
margin:0 .35rem .35rem 0;
}
.projects-pagination{ margin-top: 1.25rem; }
/* ========== Single Project ========== */
.project-single{ padding: 1.5rem 0 2.5rem; }
.project-lead{ margin: 1rem 0 1.25rem; border-radius:14px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.project-lead img{ width:100%; display:block; }
.project-layout{ display:grid; gap:1.25rem; grid-template-columns: 1.9fr 1fr; }
@media (max-width: 991.98px){ .project-layout{ grid-template-columns: 1fr; } }
.project-h2{ font-weight:800; margin:0 0 .25rem; }
.project-submeta{ color:#5e6a6f; margin:0 0 .9rem; }
.project-main article h2 {
font-weight:800;
margin:0 0 .25rem;
margin-bottom:1.2rem;
color: #008037;
}
.facts-card{
background:#fff; border:1px solid #eef1f2; border-radius:12px; padding:1rem;
box-shadow:0 10px 20px rgba(0,0,0,.05);
}
.facts-card__title{ font-weight:800; margin:0 0 .6rem; color: #008037; padding-bottom:10px; }
.facts-list{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.facts-list li{ display:flex; justify-content:space-between; gap:.75rem; padding: 5px 8px; }
.facts-list li:nth-child(odd) { background: #eee; }
.facts-list li span{ color:#65757a; }
.facts-list li strong{ color:#172126; text-align:right; }
.testimonial{
margin-top:1rem; background:#f6fbf8; border-left:4px solid #0b7d3b; padding:1rem 1.1rem; border-radius:10px;
}
.testimonial p{ margin:0; font-style:italic; }
.testimonial footer{ margin-top:.5rem; color:#5d6a6f; font-weight:700; }
/* Gallery */
.project-gallery{
margin-top:1rem;
display:grid; gap:.75rem; grid-template-columns:repeat(2, 1fr);
}
@media (min-width: 992px){ .project-gallery{ grid-template-columns:repeat(3, 1fr); } }
.project-gallery__item img{ width:100%; border-radius:10px; display:block; }
/* ========== Related Projects ========== */
.related-projects{ padding: 1.25rem 0 0; margin-bottom:2rem; }
.section-h3{ font-weight:800; margin:0 0 .75rem; }
.related-grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rel-card{
display:block; text-decoration:none; color:inherit;
border-radius:12px; overflow:hidden; border:1px solid #eef1f2; background:#fff;
transition: transform .15s ease, box-shadow .2s ease;
box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.rel-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 28px rgba(0,0,0,.10); }
.rel-card__media img{ width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; }
.rel-card__title{ font-weight:800; font-size:1rem; padding:.65rem .75rem .8rem; margin:0; }
/* ===== Project Testimonial (wide) ===== */
.project-testimonial{
padding-top: .25rem;
padding-bottom: .25rem;
}
.tcard{
position: relative;
background: rgba(246, 251, 248, .85); /* soft mint */
backdrop-filter: blur(3px);
border-radius: 18px;
padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1rem, 3vw, 1.5rem);
box-shadow: 0 10px 28px rgba(0,0,0,.06);
overflow: hidden;
}
/* thin, sleek left accent with rounded start */
.tcard::before{
content:"";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 5px;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
background: linear-gradient(180deg, #0b7d3b 0%, #0a6b35 100%);
}
/* decorative quote mark (subtle, not overpowering) */
.tcard::after{
content: "“";
position: absolute;
right: 16px;
top: -10px;
font-size: clamp(56px, 7vw, 82px);
line-height: 1;
color: rgba(11,125,59,.10);
font-weight: 800;
pointer-events: none;
}
.tcard__quote{
margin: 0 0 .5rem;
font-style: italic;
color: #13221a;
font-size: clamp(1rem, 1.2vw, 1.1rem);
line-height: 1.7;
word-break: break-word;
}
.tcard__by{
margin: .25rem 0 0;
color: #1f2d24;
font-weight: 800;
}
/* ===== Advisors grid ===== */
.stge-advisors .advisor-card{
border-radius: 14px;
padding: 1.5rem 1.25rem 1.25rem;
transition: transform .2s ease, box-shadow .25s ease;
}
.stge-advisors .advisor-card:hover{
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.advisor-avatar{
width: 120px; height: 120px; border-radius: 50%;
overflow: hidden; position: relative;
box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.advisor-avatar img{
width: 100%; height: 100%; object-fit: cover;
display: block;
}
.advisor-avatar--placeholder{
width: 100%; height: 100%;
display: grid; place-items: center;
background: #e8f4ee; color: #0b7d3b; font-weight: 800; font-size: 2rem;
}
.advisor-name{ letter-spacing: .01em; }
.advisor-role{ color: #6c7a80; }
/* tighter spacing on small screens */
@media (max-width: 575.98px){
.advisor-avatar{ width: 96px; height: 96px; }
}
/* Fixed logo box */
.partner-logo {
width: 120px;
height: 60px;
background: #fff;
border-radius: 8px;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;
}
/* The logo image inside */
.partner-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* keeps proportions */
}
/* Hover effect */
.partner-logo:hover {
transform: translateY(-3px);
box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
/* Clients Archive Page */
.clients-nav .btn {
border-radius: 999px;
}
.clients-section + .clients-section {
scroll-margin-top: 90px; /* so anchor links clear sticky nav */
}
.clients-heading {
color: #0a2a1b;
font-weight: 800;
}
/* Clients page cards */
.client-card {
display: flex;
flex-direction: column;
align-items: center;
padding: .5rem;
background: #fafafa;
margin: 5px;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
border: 1px solid #eee;
border-radius: 8px;
}
.clients-page .partner-logo {
width: 180px; /* bigger logos for this page */
height: 100px;
border-radius: 8px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.clients-page .partner-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.client-name {
margin-top: .25rem;
font-size: .9rem;
color: #008037;
font-weight: 700;
text-align: center;
}
/* General Frontpage Styling */
.frontpage-section-header {
font-weight: 800;
font-size: 3rem !important;
padding-bottom: 1.5rem !important;
text-align: center;
}
.frontpage-section-header-subtitle {
font-size: 1.1rem;
text-align: center;
line-height: 1.2rem;
padding-top: 1rem;
}
@media (max-width: 991.98px){
.frontpage-section-header {
font-weight: 800;
font-size: 2rem !important;
line-height: 2.3rem !important;
padding-bottom: 1rem !important;
}
}
/* Featured Projects */
/* Grid / Row (desktop) */
.fp-project-row{
display: grid;
grid-template-columns: repeat(4, minmax(260px, 1fr)); /* narrower blocks */
gap: 28px;
}
/* Card container */
.fp-project-card{
position: relative;
display: block;
overflow: hidden;
border-radius: 22px;
border: 1px solid #eee;
min-height: 450px;
background: #111; /* fallback while image loads */
/*box-shadow: 0 10px 28px rgba(0,0,0,.12);*/
transition: transform .25s ease, box-shadow .25s ease;
}
.fp-project-card:hover{
transform: translateY(-6px);
box-shadow: 0 1px 5px rgba(0,0,0,.18);
}
/* IMAGE now as ![]()
(not background) */
.fp-project-img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* fill nicely */
object-position: center;
transform: scale(1.02);
transition: transform .35s ease;
}
.fp-project-card:hover .fp-project-img{ transform: scale(1.06); }
/* Separate gradient layer above image, below caption */
.fp-project-gradient{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.72) 100%);
z-index: 1;
}
/* Caption sits above gradient */
.fp-project-caption{
position: absolute;
z-index: 2;
left: 16px;
right: 16px;
bottom: 16px;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.5);
text-align: center;
}
.fp-project-title{ font-weight: 800; font-size: 1.3rem; line-height: 1.35; }
.fp-project-location{ font-weight: 700; opacity: .95; }
/* Mobile: horizontal swipe */
@media (max-width: 991.98px){
.fp-project-row{
display: flex;
gap: 18px;
overflow-x: auto;
padding: 6px 6px 10px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.fp-project-card{
flex: 0 0 82%;
max-width: 82%;
scroll-snap-align: center;
min-height: 320px;
}
.fp-project-row::-webkit-scrollbar{ display:none; }
.fp-project-row{ scrollbar-width: none; }
}
/* Mobile/Tablet: horizontal swipe */
@media (max-width: 991.98px){
.fp-project-row{
display: flex;
gap: 18px;
overflow-x: auto;
padding: 6px 6px 10px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.fp-project-card{
flex: 0 0 82%; /* card width on mobile (adjust 75–90% to taste) */
max-width: 82%;
scroll-snap-align: center;
min-height: 320px;
}
.fp-project-row::-webkit-scrollbar{ display: none; }
.fp-project-row{ scrollbar-width: none; } /* Firefox */
}
/* Premium CTA button you can reuse across the site */
.btn-cta{
--cta-bg: #111; /* default dark */
--cta-bg-hover: #0b7d3b; /* STGE green on hover */
--cta-color: #fff;
--cta-ring: rgba(11,125,59,.28);
display: inline-flex;
align-items: center;
gap: .25rem;
padding: .95rem 1.5rem;
font-weight: 800;
font-size: 1.05rem;
color: var(--cta-color);
background: var(--cta-bg);
border: 0;
border-radius: 14px;
/*box-shadow: 0 10px 24px rgba(0,0,0,.15);*/
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
text-decoration: none;
}
.btn-cta:hover{
background: var(--cta-bg-hover);
transform: translateY(-2px);
/*box-shadow: 0 16px 36px var(--cta-ring);*/
color: #fff;
}
.btn-cta:active{
transform: translateY(0);
}
.btn-cta .ic{
display: inline-block;
transition: transform .18s ease;
}
.btn-cta:hover .ic{
transform: translateX(4px);
}
/* ---------- Choose Us (Premium) ---------- */
.chooseus {
position: relative;
}
.chooseus-title {
font-weight: 800;
letter-spacing: .2px;
margin-bottom: .25rem;
font-size: clamp(1.6rem, 2.5vw + .8rem, 2.4rem);
}
.chooseus-subtitle {
margin: 0 auto 1.75rem;
max-width: 780px;
font-size: 1.05rem;
}
/* Grid */
.chooseus-grid {
display: grid;
grid-template-columns: repeat(3, minmax(260px, 1fr));
gap: clamp(18px, 2vw, 28px);
}
@media (max-width: 991.98px) {
.chooseus-grid { grid-template-columns: 1fr; }
}
/* Card */
.chooseus-card {
position: relative;
padding: clamp(22px, 2.2vw, 28px);
border-radius: 22px;
/*background:
radial-gradient(120% 120% at 10% -10%, rgba(11,125,59,.075), rgba(11,125,59,0) 50%),
linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.74));*/
background: #e6ede4;
border: 1px solid rgba(11,125,59,.12);
/*box-shadow:
0 10px 28px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.35);*/
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
isolation: isolate;
margin-bottom: 20px;
}
.chooseus-card:hover {
transform: translateY(-6px);
box-shadow: 0 5px 22px rgba(0,0,0,.12);
border-color: rgba(11,125,59,.22);
}
/* Accent left edge */
.chooseus-card::before {
content: "";
position: absolute;
inset: 0 0 0 2px;
width: 4px;
border-radius: 22px 0 0 22px;
background: linear-gradient(180deg, rgba(11,125,59,.0), rgba(11,125,59,.65));
opacity: .5;
transform: translateX(-100%);
transition: opacity .28s ease, transform .28s ease;
}
.chooseus-card:hover::before {
opacity: .85;
transform: translateX(0);
}
/* Badge */
.chooseus-badge {
--size: 64px;
width: var(--size);
height: var(--size);
display: grid;
place-items: center;
border-radius: 16px;
margin-bottom: 14px;
color: #ffc107; /* icon color (warm yellow) */
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.55));
background: #008037;
box-shadow:
0 6px 18px rgba(11,125,59,.12),
inset 0 1px 0 rgba(255,255,255,.6);
position: relative;
}
.chooseus-badge i {
font-size: 28px;
line-height: 1;
}
/* Glow on hover */
.chooseus-card:hover .chooseus-badge {
box-shadow:
0 12px 26px rgba(11,125,59,.22),
inset 0 1px 0 rgba(255,255,255,.7);
}
/* Titles & text */
.chooseus-card-title {
font-weight: 800;
font-size: clamp(1.15rem, 1.1vw + .9rem, 1.45rem);
margin: 4px 0 10px;
}
.chooseus-card-text {
margin: 0;
line-height: 1.6;
color: #274036;
font-size: 1.02rem;
}
/* In-view reveal (progressive, accessible) */
@media (prefers-reduced-motion: no-preference) {
.chooseus-card {
opacity: 0;
transform: translateY(14px);
}
.chooseus-card.is-inview {
animation: cu-fadeup .6s cubic-bezier(.2,.65,.2,1) forwards;
}
.chooseus-card.is-inview:nth-child(2) { animation-delay: .08s; }
.chooseus-card.is-inview:nth-child(3) { animation-delay: .16s; }
@keyframes cu-fadeup {
to { opacity: 1; transform: translateY(0); }
}
}
/* Surface Section */
.surface-section {
/*background-color: #008037;*/
background-color: #e6ede4;
/*color: #fff;*/
}
.surface-card {
border: none;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
height: 400px; /* Increased height */
}
.surface-card:hover {
transform: translateY(-2px);
}
.surface-card img {
height: 330px; /* Taller images */
object-fit: cover;
}
.surface-card .card-footer {
background: #008037;
color: #fff;
font-weight: 600;
font-size: 1.1rem;
padding: 10px;
}
.surface-card a {
text-decoration: none;
}
/* Default: desktop and above — no scroll */
.surface-scroll {
display: flex;
flex-wrap: wrap;
}
/* Mobile/tablet only: horizontal scroll */
@media (max-width: 991px) {
.surface-scroll {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 0.6rem;
}
.surface-scroll > div {
flex: 0 0 auto; /* Prevent shrinking */
width: 220px; /* Fixed width for cards on scroll */
}
.surface-scroll::-webkit-scrollbar {
display: none;
}
}
/* --- Media cards --- */
.news-card {
background: #fff;
border-radius: 1rem;
transition: transform .2s ease, box-shadow .2s ease;
}
.news-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.news-card__thumb > img,
.object-cover { object-fit: cover; }
.text-brand { color: #008037; }
.bg-brand-subtle { background: #e9f6ef; } /* soft green */
.bg-brand-subtle-1 { background: #e6ede4; } /* soft green */
.fw-800 { font-weight: 800; }
.shadow-soft { box-shadow: 0 8px 22px rgba(0,0,0,.08); }
/* section headings */
.section-title { font-weight: 800; }
/* Button pill – shared */
.btn-pill {
border-radius: 9999px;
padding: .85rem 1.35rem;
font-weight: 700;
}
.btn-pill.btn-dark {
background: #121212;
color: #fff;
border: none;
}
.btn-pill.btn-dark:hover {
background: #000;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
/* Archive pagination */
.media-archive .pagination { justify-content: center; gap: .5rem; }
.media-archive .page-numbers {
display:inline-flex; align-items:center; justify-content:center;
width: 44px; height: 44px; border-radius: 50%;
background:#f4f5f7; color:#111; text-decoration:none; font-weight:700;
}
.media-archive .page-numbers.current { background:#008037; color:#fff; }
.media-archive .page-numbers:hover { background:#ddeee4; }
/* ——— News / Posts ——— */
.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.object-cover { object-fit: cover; }
.bg-dark-300 { background:#222; }
.badge.bg-chip {
background: #EAF6EF;
color: #0a7a38;
font-weight: 700;
border-radius: 999px;
padding: .4rem .7rem;
letter-spacing:.01em;
}
/* CTA link style used under cards */
.btn-cta-link {
color:#0a7a38;
font-weight:800;
}
.btn-cta-link:hover { text-decoration: underline; }
/* Post hero media area (keeps it narrow like your 960px body) */
.post-hero-media { max-width: 960px; }
/* Post content typography */
.prose { font-size: 1.0625rem; line-height: 1.85; color:#2b2b2b; }
.prose p { margin-bottom: 1.2rem; }
.prose h2, .prose h3, .prose h4 { font-weight: 800; margin-top: 2rem; margin-bottom: .75rem; }
.prose img, .prose figure { max-width: 100%; height: auto; border-radius: 14px; overflow: hidden; }
.prose blockquote { padding:1.25rem 1.5rem; border-left:6px solid #0a7a38; background:#f5fbf7; border-radius:12px; }
.prose ul, .prose ol { padding-left: 1.2rem; }
/* Card title clamp so lines don’t jump */
.news-card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Pagination */
.pagination .page-link {
border:0;
margin: 0 .25rem;
border-radius: 999px;
color:#0a7a38;
font-weight:700;
background:#EAF6EF;
}
.pagination .page-item.active .page-link {
background:#0a7a38; color:#fff;
}
/* Prev / Next nav buttons */
.post-navigation a {
display: inline-block;
background: #008037;
color: #fff !important;
padding: 0.6rem 1.2rem;
border-radius: 50px;
font-weight: 700;
transition: all 0.2s ease;
text-decoration: none !important;
}
.post-navigation a:hover {
background: #00662b;
transform: translateY(-2px);
}
/* Round share icons */
.btn-outline-dark i {
font-size: 14px;
vertical-align: middle;
}
/* Inline links inside content */
.prose a {
color: #008037;
font-weight: 700;
text-decoration: underline;
transition: color .2s ease;
}
.prose a:hover {
color: #005c29;
text-decoration: none;
}
.share-buttons a.btn {
font-size: 1rem;
}
/* ---------- Home: In the Media ---------- */
/* Desktop/tablet = grid */
.news-grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.25rem; /* 20px */
}
/* Cards */
.news-card{
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 24px rgba(0,0,0,.08);
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.news-card:hover{
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(0,0,0,.12);
}
.news-card .thumb{
display: block;
position: relative;
border-bottom: 1px solid rgba(0,0,0,.04);
}
.news-card .img-cover{
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
}
.news-card .img-cover.ph{
background: #eef2f3;
}
/* Category badge */
.badge.bg-cat{
background: #EAF6EE;
color: #008037;
font-weight: 700;
border-radius: 999px;
padding: .4rem .7rem;
}
/* Links */
a.news-title{
color: #555;
text-decoration: none;
font-size: 1rem;
font-weight: 700;
}
a.news-title:hover{
color: #008037;
}
/* CTA button (shared style) */
.btn-cta{
background: #008037;
color: #fff;
padding: .9rem 1.4rem;
border-radius: 14px;
font-weight: 700;
box-shadow: 0 14px 34px rgba(0,128,55,.18);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-cta:hover{
background: #00712f;
transform: translateY(-2px);
color: #fff;
}
/* ---------- Mobile only: Horizontal scroll ---------- */
@media (max-width: 991.98px){
.news-grid{
/* turn the grid into a scroll row */
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: 1rem;
padding: 0 1rem 1rem;
margin: 0 1rem ; /* edge-to-edge on small screens */
}
.news-card{
flex: 0 0 82%;
max-width: 82%;
scroll-snap-align: start;
}
}
/*SERVICES CPT*/
/* Soft shadow like the old cards */
.shadow-soft { box-shadow: 0 10px 28px rgba(0,0,0,.06); }
/* Keep images nicely contained */
.object-fit-cover { width: 100%; height: 100%; object-fit: cover; }
/* Service card old-style spacing + button */
.service-card--legacy .card-body { padding: 1rem 1.1rem 1.15rem; }
.service-card--legacy .btn-outline-success {
border-width: 2px;
}
/* Hero band text colours (if needed) */
.page-hero.service-hero .page-hero-h1 { color: #fff; font-weight: 800; }
.page-hero.service-hero .page-hero-lead { color: #d9f0e2; }
/* FRONT PAGE OVERVIEW */
.stge-front-overview .btn {
margin-right: 1rem;
}
.stge-front-overview .overview-card {
padding: 20px;
}
.stge-front-overview .overview-card-title {
font-weight: 800;
font-size: 2rem;
}
.stge-front-overview .overview-content {
}
/* Overview tabs look */
.stge-overview-tabs .nav-link{
padding: .55rem 1.1rem;
font-weight: 700;
}
.stge-overview-tabs .nav-link.active{
background: #0b7d3b;
box-shadow: 0 6px 18px rgba(11,125,59,.22);
}
#stge-overview .overview-content p{
font-size: 1.05rem;
line-height: 1.5;
color: #333;
}
/* Overview image responsive fix */
#stge-overview img {
width: 100%;
height: auto;
object-fit: cover; /* keeps it nicely filled */
border-radius: 12px;
}
/* image on top, full-bleed */
.stge-overview-mob {
margin:0;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
overflow:hidden;
}
.stge-overview-mob img{
display:block;
width:100%;
height: 220px; /* uniform height on mobile */
object-fit: cover;
}
/* ABOUT PAGE */
/* ===== Our Journey (Timeline) — drop-in ===== */
/* Tunables */
:root{
--journey-gap: 1.25rem;
--journey-card-min: 280px; /* mobile min width */
--journey-card-ideal: 32vw; /* responsive width */
--journey-card-max: 360px; /* desktop max width */
--journey-green: #0b7d3b;
--journey-shadow: 0 8px 24px rgba(0,0,0,.06);
}
/* Wrapper never scrolls */
.journey-track{
position: relative;
padding-bottom: 30px;
overflow-x: hidden; /* prevents 2nd scrollbar */
}
/* The ONLY scroll container */
.journey-cards{
display: flex;
flex-wrap: nowrap; /* one horizontal row */
gap: var(--journey-gap);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--journey-gap);
scroll-padding-right: var(--journey-gap);
padding: .25rem .25rem 3rem; /* gives room for the scrollbar */
margin-bottom: 20px !important;
}
/* Nicer scrollbar */
.journey-cards::-webkit-scrollbar{ height: 8px; }
.journey-cards::-webkit-scrollbar-thumb{
background: rgba(0,0,0,.18);
border-radius: 6px;
}
/* Cards behave like slides and snap nicely */
.journey-card{
flex: 0 0 clamp(var(--journey-card-min),
var(--journey-card-ideal),
var(--journey-card-max));
max-width: clamp(var(--journey-card-min),
var(--journey-card-ideal),
var(--journey-card-max));
scroll-snap-align: start;
border-radius: 14px;
padding: 1.25rem;
background: #fff;
box-shadow: var(--journey-shadow);
}
.journey-card__timeline{
color: var(--journey-green);
font-weight: 800;
font-size: 1.25rem;
margin-bottom: .5rem;
}
.journey-card__title{
font-weight: 800;
margin-bottom: .5rem;
font-size: 1.05rem;
}
.journey-card__desc{ color:#444; margin-bottom:.75rem; }
.journey-card__media{ border-radius:10px; overflow:hidden; margin:0; }
.journey-card__media img{ width:100%; height:auto; display:block; }
/* Optional arrows (prev/next). Keep them visible with sticky edges */
.journey-arrow{
align-self: center;
width: 44px; height: 44px; min-width: 44px;
border-radius: 50%;
background: var(--journey-green);
box-shadow: 0 6px 20px rgba(11,125,59,.25);
position: sticky; z-index: 2;
flex: 0 0 44px;
}
.journey-arrow--prev{ left: 0; margin-left: -6px; }
.journey-arrow--next{ right: 0; margin-right: -6px; }
.journey-arrow::after{
content:""; position:absolute; inset:0;
-webkit-mask: url('data:image/svg+xml;utf8,') center/22px no-repeat;
mask: url('data:image/svg+xml;utf8,') center/22px no-repeat;
background:#fff;
}
.journey-arrow--prev::after{ transform: rotate(180deg); }
/* Edge fade (subtle), safe to drop if you prefer */
@supports (mask-image: linear-gradient(#000,#000)){
.journey-cards{
mask-image: linear-gradient(to right,
transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
}
/* Accessibility: reduce momentum if user prefers less motion */
@media (prefers-reduced-motion: reduce){
.journey-cards{ scroll-behavior: auto; }
}
/* ==== Universal Sports Strip (works the same on all pages) ==== */
/* If you wrap the strip, make sure any wrapper doesn't clip */
.fp-sports-strip,
.sports-strip-outer,
.sports-strip-holder {
overflow: visible !important;
overflow-x: scrollbar;
}
/* The actual scroller */
.sports-strip{
/* spacing */
--gap: 16px;
--pad-x: 14px; /* left/right breathing room */
--pad-y: 6px;
display: flex;
gap: var(--gap);
/* Only this element scrolls horizontally */
overflow-x: auto;
overflow-y: visible;
/* make it feel roomy even inside tight parents */
padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) + 6px);
margin-left: calc(var(--pad-x) * -1);
margin-right: calc(var(--pad-x) * -1);
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scrollbar-gutter: stable;
}
/* On dark sections, give a touch more breathing room to avoid edge clipping */
.bg-dark .sports-strip,
.section-dark .sports-strip {
--pad-x: 18px;
}
/* Optional: subtle scrollbar */
.sports-strip::-webkit-scrollbar { height: 8px; }
.sports-strip::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.18);
border-radius: 8px;
}
/* Cards */
.sport-tile{
/* fixed card width so layout doesn't jitter */
flex: 0 0 clamp(140px, 42vw, 200px);
scroll-snap-align: start;
background: #fff;
border-radius: 18px;
box-shadow: 0 10px 24px rgba(0,0,0,.08);
overflow: hidden; /* keep image corners tidy */
}
/* Image area inside the card */
.sport-tile__img{
/* keeps consistent height anywhere */
aspect-ratio: 3 / 4; /* or 16/12 if you prefer wider */
background: #f6f6f6;
}
.sport-tile__img img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Title area in your existing markup */
.sport-tile__name{
padding: 10px 14px 12px;
font-weight: 700;
/*color: #0c0c0c;*/
color: #008037;
}
/* If any ancestor has overflow:hidden, prevent strip from being clipped */
.sports-strip{ contain: paint; }
/* ============= STX Sports Carousel (clean, conflict-free) ============= */
/* Outer wrap prevents clipping inside tight sections/cards */
.stx-wrap{ position: relative; overflow: visible !important; }
.stx-container{ position: relative; }
/* Track (the scroller) */
.stx-track{
--pad-x: 18px; --pad-y: 6px;
display: flex; gap: 16px;
padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) + 10px);
margin-left: calc(var(--pad-x) * -1);
margin-right: calc(var(--pad-x) * -1);
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scrollbar-gutter: stable both-edges;
scroll-padding-left: var(--pad-x);
scroll-padding-right: var(--pad-x);
}
/* Slim scrollbar for desktop visibility */
.stx-track { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.28) transparent; }
.stx-track::-webkit-scrollbar{ height: 8px; }
.stx-track::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.28); border-radius: 8px; }
.stx-track::-webkit-scrollbar-track{ background: transparent; }
/* Tiles */
.stx-tile{
flex: 0 0 clamp(160px, 20vw, 220px);
max-width: clamp(160px, 20vw, 220px);
background: #fff;
border-radius: 18px;
box-shadow: 0 10px 24px rgba(0,0,0,.08);
overflow: hidden;
scroll-snap-align: start;
text-decoration: none;
color: inherit;
}
.stx-tile__img{ display:block; aspect-ratio: 3 / 4; background:#f6f6f6; }
.stx-tile__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.stx-tile__name{ display:block; padding: 10px 14px 12px; font-weight:700; color:#0c0c0c; }
/* Arrows (brand new classes) */
.stx-nav{
position:absolute; top:50%; transform:translateY(-50%);
width:42px; height:42px; border-radius:50%;
border:0; background:#0b7d3b; color:#fff;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
z-index: 2; cursor:pointer; opacity:.92;
transition: transform .15s ease, opacity .15s ease;
}
.stx-nav:hover{ transform: translateY(-50%) scale(1.04); opacity:1; }
.stx-nav:active{ transform: translateY(-50%) scale(.98); }
.stx-nav--prev{ left:-6px; }
.stx-nav--next{ right:-6px; }
/* chevrons via mask (no images) */
.stx-nav::after{
content:""; position:absolute; inset:0; margin:auto;
width:22px; height:22px; background:#fff;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.stx-nav--prev::after{ transform: rotate(180deg); }
/* Drag feedback (optional) */
.stx-track.is-dragging{ cursor: grabbing; }
/* ===========================================
SPORTS STRIP — Polished Look
=========================================== */
.stx-wrap {
position: relative;
margin: 3rem auto;
width: 100%;
max-width: 1600px;
padding: 0 3rem;
}
/* Scroll Track */
.stx-track {
display: flex;
align-items: stretch;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
padding: 0.5rem 0 1rem;
}
.stx-track::-webkit-scrollbar {
height: 8px;
}
.stx-track::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.stx-track::-webkit-scrollbar-track {
background: transparent;
}
/* Sport Tile */
.stx-tile {
flex: 0 0 200px;
scroll-snap-align: start;
background: #fff;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 4px 20px rgba(0,0,0,.08);
transition: transform .25s ease, box-shadow .25s ease;
display: flex;
flex-direction: column;
align-items: center;
}
.stx-tile:hover {
transform: translateY(-6px);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.stx-tile__img {
width: 100%;
aspect-ratio: 4 / 5;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
background: linear-gradient(to bottom, #fafafa, #f0f0f0);
}
.stx-tile__img img {
width: 100%;
height: auto;
object-fit: contain;
transition: transform .4s ease;
}
.stx-tile:hover .stx-tile__img img {
transform: scale(1.05);
}
.stx-tile__name {
padding: 1rem .5rem;
font-weight: 700;
color: #111;
text-align: center;
font-size: 1.05rem;
border-top: 1px solid #f0f0f0;
}
/* Arrows */
.stx-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: #0b7d3b;
color: #fff;
box-shadow: 0 4px 12px rgba(11,125,59,.3);
cursor: pointer;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
transition: all .25s ease;
}
.stx-nav:hover {
background: #099b48;
box-shadow: 0 6px 18px rgba(11,125,59,.35);
}
.stx-nav--prev { left: 0; }
.stx-nav--next { right: 0; }
.stx-nav::before {
content: "";
display: block;
width: 14px;
height: 14px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
.stx-nav--prev::before {
transform: rotate(225deg);
}
/* Fade mask edges for subtle blending */
.stx-container::before,
.stx-container::after {
content: "";
position: absolute;
top: 0;
width: 80px;
height: 100%;
pointer-events: none;
z-index: 1;
}
.stx-container::before {
left: 0;
background: linear-gradient(to right, #fff 30%, transparent);
}
.stx-container::after {
right: 0;
background: linear-gradient(to left, #fff 30%, transparent);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.stx-wrap {
padding: 0 1rem;
}
.stx-tile {
flex: 0 0 160px;
}
.stx-nav {
width: 36px;
height: 36px;
}
}
/* CSS for Surface Pages */
/* ===== Base spacing ===== */
.section-pad{padding:64px 0}
.bg-soft{background:#f7f9f8}
/* ===== Hero ===== */
.surface-hero{position:relative; padding:92px 0 56px; background-size:cover; background-position:center}
.surface-hero__overlay{position:absolute; inset:0; background:linear-gradient(180deg, #008037, #005f2f)}
.surface-hero__inner{position:relative; max-width:900px; margin:0 auto; color:#fff}
.surface-hero__kicker{font-weight:800; letter-spacing:.06em; color:#BDF0D0; text-transform:uppercase; font-size:.8rem}
.surface-hero__title{font-size:clamp(2rem,4vw,3rem); font-weight:800; margin:.25rem 0 .5rem}
.surface-hero__sub{font-size:1.1rem; opacity:.95}
/* ===== Cards / tiles ===== */
.surface-card{background:#fff; border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.06); overflow:hidden}
.surface-card__media img{width:100%; height:100%; object-fit:cover}
.benefit-tile, .option-card, .perf-card{background:#fff; border-radius:16px; padding:18px; box-shadow:0 8px 22px rgba(0,0,0,.05)}
.sys-row{padding:.5rem 0; border-bottom:1px dashed rgba(0,0,0,.08)}
.sys-row:last-child{border-bottom:0}
.stat-tile{background:#fff; border-radius:14px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,.05)}
.stat-tile__num{font-size:1.75rem; font-weight:800; color:#0b7d3b; line-height:1}
.stat-tile__label{margin-top:.35rem; font-size:.9rem; color:#6b6b6b}
/* ===== Steps ===== */
.how-steps .how-step{display:flex; gap:14px; padding:12px 0; border-bottom:1px dashed rgba(0,0,0,.08)}
.how-step:last-child{border-bottom:0}
.how-step__num{min-width:40px; height:40px; border-radius:12px; background:#e9f6ef; color:#0b7d3b; display:flex; align-items:center; justify-content:center; font-weight:800}
/* ===== Project cards ===== */
.project-card{display:block; border-radius:14px; overflow:hidden; position:relative; box-shadow:0 10px 26px rgba(0,0,0,.06)}
.project-card img{width:100%; height:240px; object-fit:cover; display:block}
.project-card__caption{position:absolute; left:0; right:0; bottom:0; padding:10px 12px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.65)); color:#fff; font-weight:700}
/* ===== FAQ ===== */
.faq .faq-item{background:#fff; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.05); margin-bottom:10px; padding:12px 14px}
.faq .faq-item summary{cursor:pointer; font-weight:700}
.faq .faq-body{color:#666; margin-top:6px}
/* ===== CTA ===== */
.cta-band{background:linear-gradient(180deg, #f8fbf9, #eef7f1)}
.cta-card{display:flex; gap:18px; align-items:center; justify-content:space-between; background:#fff; border-radius:18px; padding:22px 24px; box-shadow:0 10px 26px rgba(0,0,0,.06)}
@media (max-width: 768px){
.cta-card{flex-direction:column; text-align:center}
}
/* ==== Workflow steps with images ==== */
.how-steps--grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
gap:18px;
}
.how-step{padding:0; border:0}
.how-step__figure{
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 24px rgba(0,0,0,.06);
transition:transform .2s ease, box-shadow .2s ease;
}
.how-step__figure:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(0,0,0,.09);
}
.how-step__media{overflow:hidden}
.how-step__media img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .35s ease;
}
.how-step__figure:hover .how-step__media img{
transform:scale(1.03);
}
.how-step__caption{
display:flex;
gap:10px;
align-items:flex-start;
padding:12px 14px 14px;
}
.how-step__num{
min-width:36px;
height:36px;
border-radius:10px;
background:#e9f6ef;
color:#0b7d3b;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
}
.how-step__body{
font-size:.95rem;
color:#333;
line-height:1.35;
}
/* =========================================
* NEW – Types of Surfaces v2 component
* (does not touch old .surface-section / .surface-card)
* =======================================*/
.surface2-section {
background-color: #e6ede4;
}
/* Desktop grid */
.surface2-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
/* Shared card styles (desktop + mobile) */
.surface2-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,0.22);
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.surface2-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}
.surface2-card-image {
position: relative;
padding-top: 40%; /* tall card */
overflow: hidden;
}
.surface2-card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.surface2-card-title {
background: #008037;
color: #ffffff;
text-align: center;
font-weight: 600;
font-size: 1.05rem;
padding: 0.75rem 0.5rem;
}
/* Mobile horizontal scroller */
.surface2-scroll {
display: flex;
gap: 1rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.5rem;
}
.surface2-scroll .surface2-card {
min-width: 75%;
max-width: 75%;
}
/* optional: hide scrollbar on iOS/Chrome */
.surface2-scroll::-webkit-scrollbar {
display: none;
}
/* ============================
* Values & Impact – new layout
* ============================ */
.values-impact-section {
/*background: #e4f3ea; /* soft green background */
background: #fff;
}
.values-impact-section .values-panel,
.values-impact-section .impact-panel {
position: relative;
border-radius: 24px;
padding: 2.5rem 2.25rem;
background: #008037;
color: #ffffff;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
overflow: hidden;
}
.values-impact-section .impact-panel {
background: #00692f;
}
.values-impact-section .values-panel::before,
.values-impact-section .impact-panel::before {
content: "";
position: absolute;
inset: auto -40%;
top: -40%;
height: 180px;
background: radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 60%);
opacity: 0.9;
}
.values-impact-section .values-panel > *,
.values-impact-section .impact-panel > * {
position: relative;
z-index: 1;
}
/* Small eyebrow text and lead */
.values-impact-section .section-kicker {
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.75rem;
color: #e4ffb3;
}
.values-impact-section .section-lead {
font-size: 0.95rem;
color: #f2f7f3;
}
/* Values list */
.values-impact-section .value-item {
align-items: flex-start;
}
.values-impact-section .value-icon-wrap {
flex: 0 0 42px;
height: 42px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.18);
}
.values-impact-section .value-icon {
font-size: 1.3rem;
color: #ffe76b;
}
.values-impact-section .value-item h6 {
font-weight: 600;
}
/* Impact numbers */
.values-impact-section .impact-item .impact-counter {
font-weight: 800;
font-size: 2.4rem;
color: #ffe76b;
line-height: 1.1;
}
.values-impact-section .impact-item .impact-label {
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #f2f7f3;
}
/* Responsive tweaks */
@media (max-width: 991.98px) {
.values-impact-section .values-panel,
.values-impact-section .impact-panel {
border-radius: 20px;
padding: 2rem 1.75rem;
}
.values-impact-section .impact-item .impact-counter {
font-size: 2.1rem;
}
}
@media (max-width: 575.98px) {
.values-impact-section {
padding-top: 2.75rem;
padding-bottom: 2.75rem;
}
.values-impact-section .impact-item {
margin-bottom: 0.5rem;
}
}
/* Desktop height + centering */
@media (min-width: 992px) {
.values-impact-section {
min-height: 95vh;
display: flex;
align-items: center; /* vertically centre the two cards */
}
.values-impact-section > .container {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
/* Better spacing between value items */
.values-impact-section .values-panel .row.g-3 {
row-gap: 1.75rem; /* more vertical gap between the two rows */
}
.values-impact-section .value-item {
margin-bottom: 0.5rem;
}
.values-impact-section .value-item p.small {
line-height: 1.6;
}
/* ================================================
Footer Hero Slider – Auto Slide + Ken Burns
================================================ */
.footer-image-band {
background-color: #212529; /* fallback under images */
}
/* Height same as your original band */
.footer-hero-carousel,
.footer-hero-carousel .carousel-inner,
.footer-hero-carousel .carousel-item,
.footer-hero-slide {
min-height: 380px;
}
@media (min-width: 992px) {
.footer-hero-carousel,
.footer-hero-carousel .carousel-inner,
.footer-hero-carousel .carousel-item,
.footer-hero-slide {
min-height: 460px;
}
}
/* Background image with dark fade into footer */
.footer-hero-slide {
width: 100%;
background:
linear-gradient(
to bottom,
rgba(33,37,41,0) 0%,
rgba(33,37,41,0.75) 65%,
#212529 100%
),
var(--footer-hero) center top / cover no-repeat;
/* Ken Burns animation (slow zoom) */
transform-origin: center center;
animation: footerHeroZoom 12s ease-out infinite alternate;
}
/* Zoom animation */
@keyframes footerHeroZoom {
from { transform: scale(1); }
to { transform: scale(1.08); } /* increase to 1.12 for stronger zoom */
}
/* Faster fade between slides */
.footer-hero-carousel.carousel-fade .carousel-item {
transition: opacity 0.4s ease-in-out;
}
/* Hide ANY Bootstrap controls just in case */
.footer-hero-carousel .carousel-control-prev,
.footer-hero-carousel .carousel-control-next,
.footer-hero-carousel .carousel-indicators {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Home testimonial card – trimmed quote with soft fade */
.testimonial-quote-short {
max-height: 7.5rem; /* limit visible height */
overflow: hidden;
position: relative;
}
.testimonial-quote-short::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2.25rem;
background: linear-gradient(to bottom, rgba(249, 249, 249, 0), #f9f9f9);
}
.testimonial-read-more {
font-weight: 600;
}
/* Trimmed testimonial text with soft fade */
.testimonial-quote-short {
max-height: 7.5rem;
overflow: hidden;
position: relative;
}
.testimonial-quote-short::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2.25rem;
background: linear-gradient(
to bottom,
rgba(249, 249, 249, 0),
#f9f9f9
); /* adjust if your card bg is different */
}
/* Read more button style */
.testimonial-read-more {
font-size: 0.9rem;
border-radius: 999px;
padding-inline: 1rem;
padding-block: 0.25rem;
font-weight: 600;
}
/* Modal styling */
/* ======================================================
Testimonial Modal — Fix for mobile clipping / disappearing
====================================================== */
/* Reset Bootstrap transforms so dialog cannot move off-screen */
.stge-tmodal .modal-dialog {
transform: none !important;
margin: 1rem auto;
max-width: 640px;
}
/* On mobile, force full-width layout & disable vertical centering */
@media (max-width: 767.98px) {
.stge-tmodal .modal-dialog {
width: 100% !important;
max-width: calc(100% - 2rem) !important;
margin: 1rem !important;
}
/* Make sure modal content is fully visible */
.stge-tmodal .modal-content {
max-height: 85vh !important;
overflow: hidden; /* Prevent overflow outside the rounded container */
display: flex;
flex-direction: column;
}
/* Make body scrollable inside modal */
.stge-tmodal .modal-body {
overflow-y: auto !important;
max-height: 70vh !important;
padding-right: 0.75rem;
}
}
/* Ensure header stays visible (not pushed out) */
.stge-tmodal .modal-header {
flex-shrink: 0;
}
/* Smooth scroll inside modal body */
.stge-tmodal .modal-body::-webkit-scrollbar {
width: 6px;
}
.stge-tmodal .modal-body::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.25);
border-radius: 4px;
}
/* ===== Testimonial teaser gradient (unchanged) ===== */
.testimonial-quote-short {
max-height: 7.5rem;
overflow: hidden;
position: relative;
}
.testimonial-quote-short::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2.25rem;
background: linear-gradient(to bottom, rgba(249, 249, 249, 0), #f9f9f9);
}
/* Read more buttons: desktop vs mobile */
.testimonial-read-more-desktop,
.testimonial-read-more-mobile {
font-size: 0.9rem;
border-radius: 999px;
padding-inline: 1rem;
padding-block: 0.25rem;
font-weight: 600;
}
/* By default show BOTH (will be overridden below), to avoid FOUC */
.testimonial-read-more-mobile { display: inline-flex; }
.testimonial-read-more-desktop { display: inline-flex; }
/* Desktop: only modal button */
@media (min-width: 768px) {
.testimonial-read-more-desktop { display: inline-flex; }
.testimonial-read-more-mobile { display: none; }
}
/* Mobile: only accordion button */
@media (max-width: 767.98px) {
.testimonial-read-more-desktop { display: none; }
.testimonial-read-more-mobile { display: inline-flex; }
}
/* Mobile accordion panel */
.testimonial-full {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
/* When expanded, hide teaser & gradient, show full text */
.testimonial-box.is-expanded .testimonial-quote-short {
display: none;
}
.testimonial-box.is-expanded .testimonial-quote-short::after {
display: none;
}
/* Teaser truncation + fade */
.testimonial-quote-short {
max-height: 10rem;
overflow: hidden;
position: relative;
}
.testimonial-quote-short::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2.25rem;
background: linear-gradient(to bottom, rgba(249, 249, 249, 0), #f9f9f9);
}
/* Read more buttons */
.testimonial-read-more-desktop,
.testimonial-read-more-mobile {
font-size: 0.9rem;
border-radius: 999px;
padding-inline: 1rem;
padding-block: 0.25rem;
font-weight: 600;
}
/* Make collapsed full text look nice on mobile */
.testimonial-full-mobile {
border-top: 1px solid rgba(0,0,0,0.05);
padding-top: 0.75rem;
}
/* ==============================
Business Verticals – Accordion
============================== */
.verticals-accordion-section{
background: #f7fbf8;
}
.verticals-accordion{
max-width: 1000px;
margin: 0 auto;
}
/* Card container */
.vertical-acc-card{
border-radius: 22px;
padding: 0;
}
/* Clickable header */
.vertical-acc-toggle{
width: 100%;
border: 0;
background: transparent;
padding: 1.25rem 1.5rem;
border-radius: 22px;
text-align: left;
}
.vertical-acc-toggle:focus{
outline: none;
box-shadow: 0 0 0 2px rgba(0,155,78,.25);
}
/* Header layout */
.vertical-acc-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.vertical-acc-head-main{
display: flex;
align-items: flex-start;
gap: 1rem;
}
/* Icon circle */
.vertical-acc-icon-circle{
width: 40px;
height: 40px;
border-radius: 999px;
background: #e6f7ed;
display: flex;
align-items: center;
justify-content: center;
}
.vertical-acc-icon-circle i{
font-size: 1.1rem;
color: #009b4e;
}
/* Titles / text */
.vertical-acc-title{
font-size: 1.1rem;
font-weight: 800;
}
.vertical-acc-tagline{
font-size: 0.9rem;
color: #555;
}
/* Small tags row */
.vertical-acc-tags{
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.25rem;
}
.vertical-acc-tags span{
font-size: 0.8rem;
padding: 0.1rem 0.6rem;
border-radius: 999px;
background: rgba(0,155,78,.06);
color: #006836;
}
/* + / − icon */
.vertical-acc-toggle-icon{
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.12);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
background: #fff;
}
.vertical-acc-toggle-icon::before{
content: "+";
line-height: 1;
}
/* When expanded, show minus */
.vertical-acc-toggle[aria-expanded="true"] .vertical-acc-toggle-icon::before{
content: "–";
}
/* Body */
.vertical-acc-body{
border-top: 1px solid rgba(0,0,0,.05);
padding: 0 1.5rem 1.25rem;
}
.vertical-acc-body-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1.25rem;
margin-top: 1rem;
}
@media (max-width: 767.98px){
.vertical-acc-toggle{
padding: 1rem 1.1rem;
}
.vertical-acc-body{
padding: 0 1.1rem 1rem;
}
.vertical-acc-body-grid{
grid-template-columns: 1fr;
}
}
/* Lists reused from earlier tab styles (but keep them here for safety) */
.verticals-subheading{
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.35rem;
}
.verticals-list{
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.verticals-list > li{
position: relative;
padding-left: 1.05rem;
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
.verticals-list > li::before{
content: "";
position: absolute;
left: 0;
top: 0.5rem;
width: 6px;
height: 6px;
border-radius: 50%;
background: #009b4e;
}
/* Second-level bullets */
.verticals-list li ul{
padding-left: 1.1rem;
margin-top: 0.15rem;
}
.verticals-list li ul li{
padding-left: 0.7rem;
font-size: 0.85rem;
margin-bottom: 0.2rem;
}
.verticals-list li ul li::before{
content: "–";
position: absolute;
left: 0;
top: 0;
background: none;
width: auto;
height: auto;
}
/* === In The Media – archive grid === */
.media-archive-grid {
/* ensure normal flex layout; override any old masonry-style rules */
display: flex;
flex-wrap: wrap;
}
.media-archive-grid > [class*="col-"] {
display: flex;
}
.media-archive-card {
border-radius: 18px;
border: none;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.media-archive-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}
.media-archive-thumb img {
width: 100%;
height: 140px;
object-fit: cover;
}
@media (min-width: 992px) {
.media-archive-thumb img {
height: 160px;
}
}
.stge-archive-title-link {
text-decoration: none;
color: #111827;
}
.stge-archive-title-link:hover {
color: #057737; /* your brand green */
}
.stge-archive-readmore {
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
color: #057737;
}
.stge-archive-readmore:hover {
text-decoration: underline;
}
/* Category / type label on media cards */
.media-archive-meta {
display: inline-block;
padding: 0.18rem 0.7rem;
border-radius: 999px;
background: rgba(0, 155, 78, 0.06);
color: #057737;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* If the term is output as a link */
.media-archive-meta a {
color: inherit;
text-decoration: none;
}
.media-archive-meta a:hover {
text-decoration: underline;
}
/* ================================
MOBILE HORIZONTAL MEDIA ROW
================================ */
.media-scroll-wrapper {
overflow-x: auto;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
}
.media-scroll-row {
display: flex;
gap: 1rem;
scroll-snap-type: x mandatory;
}
.media-scroll-item {
flex: 0 0 75%; /* width of card on mobile */
max-width: 250px;
scroll-snap-align: start;
}
.media-scroll-item .media-archive-card {
border-radius: 18px;
overflow: hidden;
height: 100%;
}
/* Optional scrollbar hiding */
.media-scroll-wrapper::-webkit-scrollbar {
display: none;
}
.media-scroll-wrapper {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* ============================
Business Verticals – 4-col cards
============================ */
.vertical-grid-card {
/*background: #ffffff;*/
background: #e6ede4;
border: 1px solid rgba(11, 125, 59, .12);
border-radius: 20px;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
padding: 1.4rem 1.4rem 1.1rem;
display: flex;
flex-direction: column;
height: 100%;
}
.vertical-grid-card__content {
flex: 1 1 auto;
}
/* Icon on top */
.vertical-grid-card__icon--top {
width: 56px;
height: 56px;
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: 1.6rem;
margin-bottom: 0.9rem;
display: flex;
/*background: #e5f6ee;
color: #008037;
*/
color: #ffc107;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55));
background: #008037;
box-shadow: 0 6px 18px rgba(11, 125, 59, .12), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* Title + subtitle */
.vertical-grid-card__title {
font-size: 1.4rem;
font-weight: 800;
margin-bottom: 0.25rem;
}
.vertical-grid-card__subtitle {
font-size: 0.85rem;
color: #555;
margin-bottom: 0.75rem;
}
/* Pills */
.vertical-grid-card__chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.4rem;
}
.vertical-chip {
display: inline-block;
padding: 0.22rem 0.6rem;
border-radius: 999px;
color: #f1faf5;
background: #008037;
font-size: 0.7rem;
font-weight: 600;
}
/* More button at bottom */
.vertical-grid-card__footer {
margin-top: 0.4rem;
}
.vertical-grid-card__more {
width: 100%;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #f7faf8;
font-size: 0.8rem;
font-weight: 600;
padding: 0.45rem 0.85rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
color: #1c1c1c;
}
.vertical-grid-card__more:hover {
background: #e5f6ee;
border-color: #008037;
color: #008037;
}
.vertical-grid-card__more-icon {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}
/* change + / – based on collapse state */
.vertical-grid-card__more .vertical-grid-card__more-icon::before {
content: "+";
line-height: 1;
}
.vertical-grid-card__more[aria-expanded="true"]
.vertical-grid-card__more-icon::before {
content: "–";
}
/* Collapsed body */
.vertical-grid-card__body {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid #eef2ef;
font-size: 0.84rem;
}
.vertical-grid-card__body-title {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #888;
margin-bottom: 0.3rem;
}
.vertical-grid-card__group {
font-size: 0.8rem;
font-weight: 700;
margin: 0.5rem 0 0.15rem;
}
.vertical-grid-card__list {
list-style: none;
padding-left: 0;
margin: 0;
}
.vertical-grid-card__list li {
position: relative;
padding-left: 1rem;
margin-bottom: 0.15rem;
}
.vertical-grid-card__list li::before {
content: "•";
position: absolute;
left: 0;
color: #008037;
}
/* Responsive tweaks */
@media (max-width: 767.98px) {
.vertical-grid-card {
padding: 1.2rem 1.2rem 1rem;
}
.vertical-grid-card__title {
font-size: 0.98rem;
}
.vertical-grid-card__subtitle {
font-size: 0.8rem;
}
}
/* Business Vertical Card Styling */
.vertical-card {
background: #F1F9F4;
border-radius: 22px;
padding: 2rem;
border-left: 6px solid #7ED957;
transition: 0.3s ease;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
/* Icon styling */
.vertical-card .icon-box {
width: 72px;
height: 72px;
border-radius: 18px;
background: #DDF7E5;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
/* Title */
.vertical-card h3 {
font-size: 1.65rem;
font-weight: 800;
color: #0C4126;
margin-bottom: 0.5rem;
}
/* Subtext */
.vertical-card .subtext {
font-size: 1.05rem;
color: #4A4A4A;
margin-bottom: 1rem;
}
/* Pills */
.vertical-card .pill {
background: #DDF7E5;
color: #0C4126;
border-radius: 999px;
padding: 6px 16px;
font-size: 0.85rem;
margin-right: 6px;
margin-bottom: 6px;
display: inline-block;
font-weight: 600;
}
/* Expand Button */
.vertical-card .expand-btn {
margin-top: 1rem;
font-size: 1rem;
font-weight: 700;
color: #0C4126;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.vertical-card .expand-btn span {
margin-left: 6px;
font-weight: 900;
}
/* Hidden section */
.vertical-card .details {
display: none;
margin-top: 1.5rem;
}
/* Show state */
.vertical-card.open .details {
display: block;
}
.vertical-card.open .expand-btn span {
transform: rotate(45deg);
}
/* ================================
* GRASSROOTS SECTION
* ================================ */
.grassroots-section {
background: #F5FBF7; /* same family as other light sections */
}
.grassroots-copy p {
font-size: 0.98rem;
color: #374248;
margin-bottom: 0.75rem;
}
.grassroots-eyebrow {
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: #0C7A34;
margin-bottom: 0.5rem;
}
.grassroots-list {
margin-top: 0.75rem;
padding-left: 1.2rem;
font-size: 0.95rem;
color: #374248;
}
.grassroots-list li {
margin-bottom: 0.25rem;
}
/* Slider container */
.grassroots-slider {
position: relative;
overflow: hidden;
border-radius: 22px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
background: #000; /* fallback behind images */
min-height: 400px;
}
.grassroots-slide {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(1.03);
transition:
opacity 0.8s ease-in-out,
transform 4s ease-out;
pointer-events: none;
}
.grassroots-slide img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* Active slide – visible, slight slow zoom */
.grassroots-slide.is-active {
opacity: 1;
transform: scale(1.08);
pointer-events: auto;
}
/* Make sure the first slide has a defined position even before JS runs */
.grassroots-slider .grassroots-slide:first-child {
position: absolute;
}
/* Responsive tweaks */
@media (max-width: 991.98px) {
.grassroots-section {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.grassroots-slider {
margin-top: 0.5rem;
border-radius: 18px;
min-height: 220px;
}
}