:root {
--primary-green: #4CAF50;
--dark-green: #2f7432;
--darker-green: #1b3d1c;
--light-green: #F8F9FA;
--very-light-green: #2f4a35;
--background-light: #F8F9FA;
--info-section-bg: white;
--about-us-bg: white;
--testimonials-bg: white;
--text-dark: #212121;
--text-light: #555;
--cta-orange: #FF5722;
--cta-orange-hover: #E64A19;
--text-white: #ffffff;
--font-family-base: 'Poppins', sans-serif;
--logo-accent-gold: #81C784;
--page-header-bg: #e0f2f7;
--border-light: #d8e0d9;
--border-dark: rgba(255, 255, 255, 0.1);
--form-border: #ced4da;
--shadow-color-base: 0, 0, 0;
--shadow-opacity-low: 0.05;
--shadow-opacity-medium: 0.1;
--shadow-opacity-high: 0.25;
--shadow-cta-opacity: 0.25;
--neutral-light: #ccc;
--neutral-medium: #6c757d;
--neutral-dark: #777777;
--text-muted-light: rgba(255, 255, 255, 0.7);
--text-muted-dark: rgba(255, 255, 255, 0.5);
--border-separator: #e0e0e0;
--cta-gradient-1: #ff5722;
--cta-gradient-2: #ff9800;
}
html {
background: #2c3e2f !important;
margin: 0;
padding: 0;
width: 100vw;
min-height: 100vh;
overflow-x: hidden;
}
html, body {
font-family: var(--font-family-base);
color: var(--text-dark);
scroll-behavior: smooth;
overflow-x: hidden;
width: 100%;
max-width: 100vw;
margin: 0;
padding: 0;
background: #2c3e2f !important;
}
/* LANDSCAPE MOBILE OPTIMIZATION - Force full width and eliminate white margins */
@media screen and (orientation: landscape) and (max-height: 600px) {
html {
background: #2c3e2f !important;
margin: 0 !important;
padding: 0 !important;
}
body {
background: #2c3e2f !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
.container,
.container-fluid {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Force all sections to full width */
section {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
}
/* MOBILE TOUCH OPTIMIZATION - Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
.btn-cta:hover,
.btn-primary:hover,
.btn-outline-primary:hover,
.btn-outline-light:hover,
.pest-card:hover,
.service-card:hover,
.testimonial-card:hover,
.benefit-item:hover,
.modern-card:hover,
.logo-unit:hover,
.nav-link:hover,
.single-stat-item:hover,
.stat-item:hover,
.stat-card:hover {
transform: none !important;
box-shadow: none !important;
background-color: initial !important;
border-color: initial !important;
filter: none !important;
opacity: 1 !important;
}
}
body {
padding-top: 85px;
background: #2c3e2f !important;
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-base); font-weight: 700; letter-spacing: -0.5px; }
h1 { font-weight: 800; }
/* Utility Classes for Common Patterns */
.transition-smooth { transition: all 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); }
.hover-lift-small:hover { transform: translateY(-2px); }
.hover-lift-medium:hover { transform: translateY(-5px); }
.hover-lift-large:hover { transform: translateY(-8px); }
.hover-lift-xl:hover { transform: translateY(-10px); }
.radius-pill { border-radius: 50px; }
.radius-large { border-radius: 20px; }
.radius-medium { border-radius: 12px; }
.radius-small { border-radius: 8px; }
.radius-tiny { border-radius: 4px; }
/* Common Font Sizes */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.85rem; }
.text-md { font-size: 0.9rem; }
.text-base { font-size: 0.95rem; }
.text-lg { font-size: 1.1rem; }
.text-xl { font-size: 1.2rem; }
/* Common Box Shadows */
.shadow-sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); }
.shadow-md { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
.shadow-lg { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); }
.shadow-xl { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }
/* Common Spacing */
.section-spacing { padding: 80px 0; }
.section-spacing-sm { padding: 60px 0; }
.section-spacing-lg { padding: 100px 0; }
/* Enhanced Navbar */
.navbar {
background: linear-gradient(90deg,
var(--primary-green) 0%,
var(--dark-green) 100%
);
position: fixed;
width: 100%;
max-width: 100vw;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: all 0.3s ease;
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.1),
0 0 20px rgba(76, 175, 80, 0.2);
padding: 20px 0;
height: 85px;
display: flex;
align-items: center;
}
.navbar.scrolled {
background: linear-gradient(90deg,
var(--primary-green) 0%,
var(--dark-green) 100%
);
}
.navbar-brand {
padding: 0;
margin-right: 1rem;
text-decoration: none;
display: inline-block;
}
.navbar-collapse {
justify-content: center;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-unit {
display: flex;
align-items: center;
padding: 8px 16px;
background: linear-gradient(135deg, rgba(47, 116, 50, 0.6) 0%, rgba(76, 175, 80, 0.7) 100%);
border-radius: 12px;
border: 1px solid rgba(76, 175, 80, 0.4);
box-shadow:
0 2px 10px rgba(0, 0, 0, 0.2),
0 0 20px rgba(76, 175, 80, 0.1);
transition: all 0.3s ease;
transform: perspective(1000px) translateZ(0);
}
.logo-icon-main {
color: var(--logo-accent-gold);
font-size: 2.2rem;
margin-right: 12px;
line-height: 1;
text-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}
.logo-text-container {
display: flex;
flex-direction: column;
line-height: 1.1;
color: var(--text-white);
}
.logo-text-organic {
font-size: 0.85rem;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0.95;
}
.logo-text-pestcontrol {
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.5px;
}
.navbar-brand:hover .logo-unit {
transform: perspective(1000px) translateZ(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
/* REMOVED: Glow effects that cause issues in Safari */
border-color: rgba(76, 175, 80, 0.6);
}
.nav-link {
color: var(--text-white) !important;
font-weight: 400;
margin: 0 15px;
padding: 8px 0;
position: relative;
text-decoration: none !important;
transition: none;
font-size: 0.95rem;
letter-spacing: 0.3px;
}
.nav-link:visited {
color: var(--text-white) !important;
}
.nav-link:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-green);
transition: width 0.3s ease;
}
.nav-link:hover {
color: var(--text-white) !important;
}
.nav-link:hover:after {
width: 100%;
}
.nav-link.active {
font-weight: 400;
color: var(--text-white) !important;
}
.nav-link.active:after {
width: 0;
}
.nav-link.active:hover:after {
width: 100%;
background-color: var(--primary-green);
}
.btn-cta {
background-color: var(--cta-orange);
border-color: var(--cta-orange);
color: white;
font-weight: 700;
padding: 14px 35px !important;
border-radius: 50px;
font-size: 0.9rem !important;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.5;
min-width: auto;
white-space: nowrap;
}
.btn-cta:hover {
background-color: var(--cta-orange-hover);
border-color: var(--cta-orange-hover);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(255, 87, 34, 0.25);
}
.navbar-toggler { border-color: rgba(255, 255, 255, 0.2); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.btn { border-radius: 50px; padding: 12px 30px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.9rem; }
.btn:focus, .btn.focus { outline: 0; box-shadow: none !important; }
.btn-primary { background-color: var(--primary-green); border-color: var(--primary-green); color: white; }
.btn-primary:hover { background-color: var(--dark-green); border-color: var(--dark-green); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); }
.btn-outline-primary { border-color: var(--primary-green); color: var(--primary-green); background-color: transparent; }
.btn-outline-primary:hover { background-color: var(--primary-green); color: white; transform: translateY(-3px); border-color: var(--primary-green); }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.7); color: white; }
.btn-outline-light:hover { background-color: white; color: var(--dark-green); border-color: white; transform: translateY(-3px); }
.section-title { position: relative; margin-bottom: 50px; font-weight: 700; color: var(--dark-green); }
.section-title:after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background-color: var(--primary-green); border-radius: 2px; }
.page-header {
background-color: var(--page-header-bg);
padding: 80px 0;
text-align: center;
border-bottom: 1px solid #eee;
}
.page-header h1 {
color: var(--dark-green);
margin-bottom: 0;
position: relative;
display: inline-block;
}
.page-header h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 4px;
background-color: var(--primary-green);
border-radius: 2px;
}
/* Remove underline for headers with no-underline class */
.no-underline.page-header h1::after {
display: none;
}
.section-padding {
padding: 80px 0;
background-color: white;
position: relative;
z-index: 1;
border-bottom: 1px solid #eee;
}
#benefits.section-padding {
padding-bottom: 30px;
}
#contact.section-padding { border-bottom: none; }
/* Consultations Section - Enhanced & Professional */
.consultations-section {
background: linear-gradient(135deg, #f8fffe 0%, #f0f9f4 100%) !important;
position: relative;
overflow: hidden;
scroll-margin-top: 150px;
}
.consultations-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300ff8a' fill-opacity='0.02'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
pointer-events: none;
}
/* Section Header Styling - No Orange */
.consultation-section-header {
position: relative;
z-index: 2;
}
.consultation-title-wrapper {
margin-bottom: 1.5rem;
}
.consultation-subtitle {
display: inline-block;
color: #64748b;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 0.5rem;
}
.consultation-main-title {
font-size: 2.6rem;
font-weight: 800;
color: #1e293b;
line-height: 1.1;
margin-bottom: 0;
position: relative;
}
.title-highlight {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
position: relative;
}
.title-accent {
color: #1e293b !important;
position: relative;
}
.title-accent::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, #1e40af 20%, #1d4ed8 80%, transparent 100%);
border-radius: 2px;
}
.consultation-lead-text {
font-size: 1.15rem;
color: #64748b !important;
line-height: 1.6;
max-width: 600px;
margin: 0 auto !important;
font-weight: 400;
text-align: center !important;
}
/* Base Card Styles - Compact & Clean */
.consultation-card {
background: white;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: 1px solid #e2e8f0;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
min-height: 480px;
will-change: transform;
margin-top: 25px;
overflow: hidden;
}
.consultation-card-primary {
border: 2px solid #ff8a00;
background: linear-gradient(135deg, #fff 0%, rgba(255, 138, 0, 0.02) 100%);
}
.consultation-card-primary::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #ff8a00 0%, #ff5722 100%);
border-radius: 18px 18px 0 0;
}
/* Clickable Card Enhancement */
.consultation-card-clickable {
cursor: pointer;
}
.consultation-card-clickable:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.consultation-card-primary:hover {
border-color: #ff6d00;
box-shadow: 0 20px 40px rgba(255, 138, 0, 0.2);
transform: translateY(-8px);
}
/* Column container positioning for badge */
.consultations-section .col-lg-5,
.consultations-section .col-md-6 {
position: relative;
}
/* Recommended Badge - Clean and integrated */
.consultation-badge-recommended {
position: absolute;
top: -12px;
left: 20px;
z-index: 15;
transition: all 0.3s ease;
}
.recommended-text {
display: inline-block;
background: #ff6d00;
color: white;
padding: 6px 16px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(255, 109, 0, 0.3);
border: none;
}
.recommended-arrow {
display: none;
}
/* Simple hover effect for recommended badge */
.col-lg-5:hover .recommended-text,
.col-md-6:hover .recommended-text {
background: #ff8a00;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 138, 0, 0.4);
}
/* Card Header - Enhanced with micro-interactions */
.consultation-header {
display: flex;
align-items: center;
padding: 2rem 2rem 1rem 2rem;
gap: 1.25rem;
transition: all 0.3s ease;
}
.consultation-image-container {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 16px;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.consultation-card-primary .consultation-image-container {
background: linear-gradient(135deg, rgba(255, 138, 0, 0.1) 0%, rgba(255, 87, 34, 0.15) 100%);
}
.consultation-icon-placeholder {
font-size: 1.5rem;
color: #64748b;
transition: all 0.3s ease;
}
.consultation-card-primary .consultation-icon-placeholder {
color: #ff8a00;
}
.consultation-card:hover .consultation-icon-placeholder {
transform: scale(1.1);
}
.consultation-header-content {
flex: 1;
}
.consultation-title {
font-size: 1.3rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.3rem;
line-height: 1.2;
}
.consultation-price {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.price-amount {
font-size: 1.8rem;
font-weight: 800;
color: #1e293b;
line-height: 1;
margin-bottom: 0.1rem;
}
.consultation-card-primary .price-amount {
background: linear-gradient(135deg, #ff8a00 0%, #ff5722 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.price-subtitle {
font-size: 0.85rem;
color: #64748b;
font-weight: 500;
}
/* Card Body - Compact */
.consultation-body {
padding: 0 2rem;
flex: 1;
display: flex;
flex-direction: column;
}
.consultation-description {
font-size: 0.95rem;
line-height: 1.5;
color: #475569;
margin-bottom: 1rem;
}
.consultation-features {
flex: 1;
margin-bottom: 0;
}
.consultation-features li {
display: flex;
align-items: flex-start;
margin-bottom: 0.6rem;
font-size: 0.9rem;
line-height: 1.4;
color: #475569;
}
.consultation-check {
color: #10b981;
font-size: 0.8rem;
margin-right: 0.6rem;
margin-top: 0.1rem;
flex-shrink: 0;
}
.consultation-card-primary .consultation-check {
color: #ff8a00;
}
/* Card Footer - Compact */
.consultation-footer {
padding: 1.5rem 2rem 2rem 2rem;
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: auto;
}
/* Button Styles - Clean & Compact */
.consultation-primary-btn,
.consultation-secondary-btn {
height: 48px;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
border: 2px solid transparent;
text-decoration: none;
width: 100%;
}
.consultation-primary-btn {
background: linear-gradient(135deg, #ff8a00 0%, #ff5722 100%);
color: white;
border: 2px solid transparent;
box-shadow: 0 4px 15px rgba(255, 138, 0, 0.3);
}
.consultation-primary-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 138, 0, 0.4);
color: white;
}
.consultation-secondary-btn {
background: transparent;
color: #64748b;
border: 2px solid #e2e8f0;
}
.consultation-card-primary .consultation-secondary-btn {
border-color: rgba(255, 138, 0, 0.2);
color: #ff8a00;
}
.consultation-secondary-btn:hover {
background: #f8fafc;
border-color: #cbd5e1;
color: #475569;
transform: translateY(-1px);
}
.consultation-card-primary .consultation-secondary-btn:hover {
background: rgba(255, 138, 0, 0.05);
border-color: rgba(255, 138, 0, 0.3);
color: #ff8a00;
}
.consultation-card-primary .consultation-image-container {
background: linear-gradient(135deg, rgba(255, 138, 0, 0.1) 0%, rgba(255, 87, 34, 0.15) 100%);
}
.consultation-card-primary .consultation-icon-placeholder {
color: #ff8a00;
}
.consultation-card-primary .price-amount {
background: linear-gradient(135deg, #ff8a00 0%, #ff5722 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.consultation-card-primary .consultation-check {
color: #ff8a00;
}
/* Modal Styles - Consultation and Study Modals */
.modal-backdrop, #studyModal .modal-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
z-index: 9999;
}
.modal-dialog, #studyModal .modal-dialog {
position: absolute;
top: 50%;
left: 50%;
width: 90%;
max-width: 750px;
max-height: 95vh;
transform: translate(-50%, -50%);
background: white;
border-radius: 20px;
display: flex;
flex-direction: column;
box-shadow:
0 20px 60px rgba(0,0,0,0.3),
0 0 0 1px rgba(59, 130, 246, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
overflow: hidden;
animation: modalFadeIn 0.3s ease-out;
margin: 0;
}
/* Study Modal Specific - Ensure Bootstrap doesn't override */
#studyModal.modal {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
#studyModal.modal.show {
display: block !important;
}
#studyModal .modal-backdrop {
display: none !important;
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.95);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.modal-header {
padding: 25px 30px 20px;
text-align: center;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(29, 78, 216, 0.12) 100%);
flex-shrink: 0;
position: relative;
}
.modal-header::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
border-radius: 2px;
}
.modal-title {
margin: 0;
font-size: 22px;
font-weight: 800;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}
.modal-close {
position: absolute;
top: 15px;
right: 20px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #64748b;
width: 30px;
height: 30px;
transition: color 0.2s ease;
}
.modal-close:hover {
color: #3b82f6;
}
.modal-body {
padding: 20px 30px;
flex: 1;
overflow-y: auto;
color: #64748b;
line-height: 1.6;
background: linear-gradient(180deg, rgba(59, 130, 246, 0.01) 0%, rgba(255, 255, 255, 1) 100%);
}
.modal-body p {
margin: 0 0 14px 0;
font-size: 14px;
transition: color 0.2s ease;
}
.modal-body p:hover {
color: #475569;
}
.modal-footer {
padding: 20px 30px 30px;
text-align: center;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(29, 78, 216, 0.08) 100%);
flex-shrink: 0;
position: relative;
}
.modal-footer::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
border-radius: 2px;
}
.modal-cta-btn {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
border: none;
padding: 16px 40px;
border-radius: 14px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
display: block;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.modal-cta-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.modal-cta-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}
.modal-cta-btn:hover::before {
left: 100%;
}
@media (max-width: 768px) {
.modal-dialog {
width: 95%;
max-height: 95%;
}
.modal-header,
.modal-body,
.modal-footer {
padding-left: 20px;
padding-right: 20px;
}
.modal-title {
font-size: 20px;
}
.modal-body p {
font-size: 13px;
}
}
/* In-Person Card (Blue Theme) */
.consultation-card-secondary {
border: 2px solid #e2e8f0;
}
.consultation-card-secondary::before {
background: transparent;
}
.consultation-card-secondary:hover {
border-color: #2563eb;
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
transform: translateY(-8px);
}
.consultation-card-secondary .consultation-image-container {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(29, 78, 216, 0.15) 100%);
}
.consultation-card-secondary .consultation-icon-placeholder {
color: #3b82f6;
}
.consultation-card-secondary .price-amount {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.consultation-card-secondary .consultation-check {
color: #3b82f6;
}
.consultation-card-secondary .consultation-primary-btn {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.consultation-card-secondary .consultation-primary-btn:hover {
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}
.consultation-card-secondary .consultation-secondary-btn {
border-color: rgba(59, 130, 246, 0.2);
color: #3b82f6;
}
.consultation-card-secondary .consultation-secondary-btn:hover {
background: rgba(59, 130, 246, 0.05);
border-color: rgba(59, 130, 246, 0.3);
color: #3b82f6;
}
/* Mobile Responsiveness for Consultations */
@media (max-width: 768px) {
.consultations-section .container {
padding-left: 15px;
padding-right: 15px;
}
.consultation-card {
min-height: 420px;
margin-bottom: 2rem;
}
.consultation-card-clickable:hover {
transform: translateY(-4px) scale(1.01);
}
.consultation-header {
padding: 1.75rem 1.25rem 0.75rem 1.25rem;
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.consultation-header-content {
display: flex;
flex-direction: column;
align-items: center;
}
.consultation-price {
align-items: center;
}
.consultation-title {
font-size: 1.2rem;
}
.price-amount {
font-size: 1.6rem;
}
.consultation-body {
padding: 0 1.25rem;
}
.consultation-footer {
padding: 1.25rem;
}
.consultation-primary-btn,
.consultation-secondary-btn {
height: 44px;
font-size: 0.9rem;
}
.consultation-badge-recommended {
top: 0;
left: 16px;
transform: translateY(-50%);
}
.recommended-text {
padding: 5px 14px 6px 14px;
font-size: 0.65rem;
border-radius: 6px 6px 0 0;
letter-spacing: 0.3px;
}
.recommended-text::after {
left: 6px;
right: 6px;
height: 1px;
}
.consultation-card-primary:hover {
box-shadow:
0 20px 50px rgba(255, 87, 34, 0.2),
0 0 0 1px rgba(255, 138, 0, 0.2),
0 0 30px rgba(255, 138, 0, 0.1);
}
.consultation-main-title {
font-size: 2.2rem;
}
.consultation-subtitle {
font-size: 0.9rem;
letter-spacing: 1.5px;
}
.consultation-lead-text {
font-size: 1rem;
}
}
}
/* Modern Cards */
.modern-card {
border: 1px solid var(--light-grey);
border-radius: 12px; overflow: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 100%;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
background: white;
display: flex; flex-direction: column;
}
.modern-card:hover { transform: translateY(-10px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); border-color: var(--medium-grey); }
.modern-card .card-body { display: flex; flex-direction: column; flex-grow: 1; }
.service-icon { font-size: 2.2rem; color: var(--primary-green); margin-bottom: 20px; transition: all 0.4s ease; }
.modern-card:hover .service-icon { transform: scale(1.15); color: var(--cta-orange); }
/* Shop Product Cards */
.product-card {
border: 1px solid var(--light-grey);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
background: white;
display: flex;
flex-direction: column;
cursor: pointer; /* Indicate interactivity */
}
.product-card:hover {
transform: translateY(-5px) scale(1.02); /* Subtle scale up and lift */
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); /* More prominent shadow on hover */
border-color: black; /* Black outline on hover */
}
.product-card .card-img-top {
width: 100%;
height: 200px; /* Fixed height for images */
object-fit: cover; /* Ensure images cover the area */
border-bottom: 1px solid var(--light-grey);
}
.product-card .card-body {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.product-card .card-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--dark-green); /* Use dark green for titles */
margin-bottom: 10px;
}
.product-card .card-text {
font-size: 0.9rem;
color: var(--dark-grey); /* Use dark grey for description */
line-height: 1.5;
flex-grow: 1;
margin-bottom: 15px;
}
.product-card .product-price {
font-size: 1.1rem;
font-weight: 700;
color: var(--accent-yellow); /* Use yellow for price */
margin-bottom: 15px;
}
.product-card .btn {
font-size: 0.9rem;
padding: 8px 20px;
border-radius: 5px;
}
.card-title {
min-height: 3.5rem; /* Fixed height for title area */
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.bullet-list {
list-style: none;
padding-left: 0;
margin-bottom: 25px;
flex-grow: 1;
}
.bullet-list li { position: relative; padding-left: 28px; margin-bottom: 10px; font-size: 0.95rem; font-weight: 400; color: var(--text-dark); }
.bullet-list li:before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; color: var(--primary-green); font-size: 1rem; text-align: center; }
/* Benefit Items */
.benefit-item {
display: flex; align-items: flex-start; margin-bottom: 30px;
background-color: white;
padding: 30px; border-radius: 10px;
border: 1px solid #eee;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
}
.benefit-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); border-color: #ddd; }
.benefit-icon { font-size: 1.5rem; color: var(--primary-green); margin-right: 20px; padding-top: 3px; min-width: 25px; }
.benefit-item h4 { font-size: 1.1rem; margin-bottom: 8px; font-weight: 600; color: var(--text-dark); }
.benefit-item p { font-size: 0.95rem; color: var(--text-light); line-height: 1.6; }
/* Testimonial Cards */
.testimonial-card {
background: white;
border-radius: 10px; padding: 35px; box-shadow: none;
border: 1px solid #eee;
transition: all 0.4s ease; height: 100%;
display: flex; flex-direction: column;
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
border-color: #d5d5d5;
}
.quote-icon { font-size: 2rem; color: rgba(76, 175, 80, 0.15); margin-bottom: 15px; }
.testimonial-card p { font-size: 0.95rem; color: var(--text-light); line-height: 1.7; flex-grow: 1; margin-bottom: 25px; }
.customer-name { font-weight: 600; color: var(--text-dark); font-size: 1rem; }
.testimonial-card .text-muted { font-size: 0.85rem; }
.testimonial-card .text-warning i { font-size: 0.9rem; }
.testimonial-card img { border: 3px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
/* Contact Section */
.contact-section {
background-color: var(--background-light);
}
.contact-info i { color: var(--primary-green); margin-right: 15px; font-size: 1.1rem; width: 20px; text-align: center; }
.contact-info p { margin-bottom: 15px; font-size: 0.95rem; }
.contact-info a { color: var(--text-dark); text-decoration: none; transition: color 0.3s ease; }
.contact-info a:hover { color: var(--primary-green); }
.uk-map { border-radius: 10px; overflow: hidden; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); border: none; }
/* Trust Logos Section */
.trust-logos-section {
background-color: var(--background-light);
padding: 40px 0;
border-bottom: 1px solid #eee;
}
.trust-logos-section h5 {
text-align: center;
margin-bottom: 30px;
color: var(--text-light);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
}
.trust-logo {
max-height: 60px;
margin: 0 20px;
filter: grayscale(100%);
opacity: 0.6;
transition: all 0.3s ease;
}
.trust-logo:hover {
filter: grayscale(0%);
opacity: 1;
}
.trust-logos-section.section-padding { border-bottom: none; background-color: var(--background-light); }
/* Footer */
footer { background-color: var(--dark-green); color: rgba(255, 255, 255, 0.7); position: relative; z-index: 2; overflow: hidden; padding: 60px 0 30px; font-size: 0.9rem; }
footer h5 { color: white; font-weight: 600; margin-bottom: 20px; font-size: 1.1rem; }
footer .navbar-brand {
margin-bottom: 15px;
display: inline-block;
}
footer .logo-unit {
background-color: transparent;
border: none;
box-shadow: none;
padding: 0;
}
footer .logo-icon-main {
font-size: 1.8rem;
color: var(--logo-accent-gold);
}
footer .logo-text-container {
color: var(--text-white);
}
footer .logo-text-organic {
font-size: 0.75rem;
}
footer .logo-text-pestcontrol {
font-size: 0.9rem;
}
.footer-links a { color: rgba(255, 255, 255, 0.7); text-decoration: none; margin-right: 0; transition: all 0.3s ease; display: block; padding: 6px 0; }
.footer-links a:hover { color: white; transform: translateX(5px); }
.social-icons a { color: white; font-size: 1rem; margin-right: 10px; transition: all 0.3s ease; width: 35px; height: 35px; background-color: rgba(255, 255, 255, 0.1); display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; }
.social-icons a:hover { transform: translateY(-3px); background-color: var(--cta-orange); color: white; }
/* Back to Top Button */
.back-to-top { position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px; background-color: var(--primary-green); color: white; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 1.3rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; z-index: 1000; opacity: 0; visibility: hidden; text-decoration: none; }
.back-to-top.active { opacity: 1; visibility: visible; }
.back-to-top:hover { background-color: var(--dark-green); transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
/* Responsive Adjustments */
@media (max-width: 991px) {
body { padding-top: 75px; }
.navbar { padding: 8px 0; }
.page-header { padding: 40px 0;}
.section-padding, .trust-logos-section { padding: 60px 0; }
.section-title { margin-bottom: 40px; }
.trust-logo { max-height: 50px; margin: 0 15px;}
}
@media (max-width: 767px) {
body { background: linear-gradient(135deg, #1a2a1f 0%, #0f1811 100%); min-height: 100vh; }
/* Only specific sections get white background, not all */
#benefits.section-padding,
#educational-content-section.section-padding {
background-color: white;
}
.trust-logos-section { background-color: var(--background-light); }
.page-header h1 { font-size: 2rem; }
.footer-links, .social-icons, footer .text-center, footer .text-lg-start { text-align: center !important; }
footer .col-lg-4 { margin-bottom: 30px !important; }
.footer-links a { margin: 0 8px; display: inline-block; padding: 5px 0; }
ul.footer-links { margin-bottom: 20px; }
.social-icons a { margin: 0 5px; }
.btn { padding: 10px 25px; font-size: 0.85rem; }
.btn-cta { padding: 12px 30px; }
h1, .display-3 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
.trust-logo { max-height: 40px; margin: 10px 10px;}
.trust-logos-section .d-flex { flex-wrap: wrap; justify-content: center; }
}
/* Product Detail Overlay */
.product-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9); /* Slightly darker overlay */
display: flex;
justify-content: center;
align-items: center;
z-index: 1060; /* Higher than method overlay */
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease;
}
.product-overlay.active {
opacity: 1;
visibility: visible;
}
.product-overlay-content {
background-color: white;
padding: 30px; /* Slightly less padding */
border-radius: 10px; /* Slightly less rounded corners */
max-width: 90vw; /* Max width for content (90% of viewport width) */
width: 90%; /* Responsive width */
max-height: 90vh; /* Max height for content (90% of viewport height) */
overflow-y: auto;
overflow-x: hidden; /* Ensure no horizontal scrolling */
position: relative;
transform: scale(0.9); /* Slightly smaller initial scale */
opacity: 0; /* Start hidden */
transition: all 0.4s ease; /* Animate all properties */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.product-overlay.active .product-overlay-content {
transform: scale(1);
opacity: 1; /* Fade in */
}
.close-overlay-btn {
position: absolute;
top: 15px; /* Adjusted position */
right: 15px; /* Adjusted position */
background: none;
border: none;
font-size: 1.8rem; /* Slightly smaller size */
color: var(--dark-grey); /* Use dark grey for close button */
cursor: pointer;
transition: color 0.3s ease, transform 0.3s ease;
z-index: 10; /* Ensure it's above content */
}
.close-overlay-btn:hover {
color: var(--cta-orange); /* Orange on hover */
transform: rotate(90deg);
}
.product-overlay-content h2 {
color: var(--dark-green); /* Use dark green for overlay title */
margin-top: 0; /* Remove default top margin */
margin-bottom: 15px; /* Adjusted bottom margin */
font-size: 1.8rem; /* Adjusted font size */
}
.product-overlay-content p {
color: var(--text-dark); /* Use text dark for overlay text */
line-height: 1.6; /* Slightly less line height */
margin-bottom: 15px;
}
.product-overlay-content .text-muted {
color: var(--dark-grey) !important; /* Ensure muted text is dark grey */
font-size: 1.1rem; /* Larger font size for price */
font-weight: 700;
margin-bottom: 15px;
}
/* Responsive adjustments for product overlay */
@media (max-width: 767px) {
.product-overlay-content {
padding: 20px; /* Less padding on small screens */
}
.product-overlay-content h2 {
font-size: 1.5rem; /* Smaller title on small screens */
}
.product-overlay-content .text-muted {
font-size: 1rem; /* Smaller price on small screens */
}
}
.pest-modal-image {
max-width: 100%;
height: auto;
object-fit: contain;
border-radius: 8px;
margin-bottom: 20px;
}
/* Enhanced Service Modal Overlay Styles - Premium Design */
.pest-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 1050;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
will-change: opacity;
}
.pest-modal-overlay.active {
opacity: 1;
visibility: visible;
}
/* Premium Service Modal Content */
.pest-modal-content {
background: white;
border-radius: 24px;
max-width: 95vw;
width: 1200px;
max-height: 98vh;
overflow-y: auto;
position: relative;
transform: scale(0.95) translate3d(0, 0, 0);
opacity: 0;
transition: transform 0.25s ease-out, opacity 0.25s ease-out;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
will-change: transform, opacity;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: rgba(76, 175, 80, 0.3) transparent;
border: 1px solid rgba(76, 175, 80, 0.1);
}
.pest-modal-content::-webkit-scrollbar {
width: 8px;
}
.pest-modal-content::-webkit-scrollbar-track {
background: transparent;
}
.pest-modal-content::-webkit-scrollbar-thumb {
background-color: rgba(76, 175, 80, 0.3);
border-radius: 4px;
}
.pest-modal-content::-webkit-scrollbar-thumb:hover {
background-color: rgba(76, 175, 80, 0.5);
}
.pest-modal-overlay.active .pest-modal-content {
transform: scale(1) translate3d(0, 0, 0);
opacity: 1;
}
/* Clean and Modern Header - Title Section */
.service-modal-header {
position: relative;
background: linear-gradient(135deg,
var(--dark-green) 0%,
var(--primary-green) 100%);
color: white;
padding: 20px 40px;
border-radius: 24px 24px 0 0;
text-align: center;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.service-modal-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.service-modal-header > * {
position: relative;
z-index: 1;
}
.service-modal-icon {
font-size: 3rem;
margin-bottom: 15px;
color: transparent;
background: linear-gradient(135deg, var(--cta-gradient-1), var(--cta-gradient-2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
animation: iconPulse 3s ease-in-out infinite;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); opacity: 0.95; }
50% { transform: scale(1.05); opacity: 1; }
}
.service-modal-title {
font-size: 2rem;
font-weight: 700;
margin: 0 0 10px 0;
color: transparent;
background: linear-gradient(135deg, var(--cta-gradient-1), var(--cta-gradient-2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
}
.service-modal-subtitle {
font-size: 1.1rem;
opacity: 0.9;
font-weight: 400;
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.service-header-layout {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
}
/* Premium Body Layout */
.service-modal-body {
padding: 0;
background: white;
}
/* Hero Image Slideshow Section with Text Overlay */
.service-hero-section {
position: relative;
height: 320px;
overflow: hidden;
}
.service-hero-slideshow {
position: relative;
width: 100%;
height: 100%;
}
.service-hero-image {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.service-hero-image.active {
opacity: 1;
}
.service-hero-image:first-child {
opacity: 1;
}
.service-hero-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 40px 50px;
}
.service-hero-caption {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 10px;
color: #ffffff !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.service-hero-description {
font-size: 1.1rem;
color: #ffffff;
opacity: 0.95;
line-height: 1.5;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* Premium Content Section */
.service-premium-content {
padding: 50px;
background: linear-gradient(135deg,
rgba(248, 249, 250, 0.5) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(248, 249, 250, 0.5) 100%);
}
.service-intro {
font-size: 1.3rem;
color: var(--dark-green);
line-height: 1.7;
text-align: center;
margin-bottom: 50px;
font-weight: 500;
max-width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.service-intro::after {
display: none;
}
/* Enhanced Service Images Grid - Perfectly Organized */
/* Featured Service Images - Top Row */
.service-images-featured {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 40px;
padding: 0 10px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
/* Text and Image Layout */
.content-text-image-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
margin-bottom: 30px;
align-items: start;
}
.content-text-column {
padding-right: 20px;
}
.content-text-column h3 {
color: var(--dark-green);
font-size: 1.8rem;
margin-bottom: 20px;
font-weight: 600;
}
.content-text-column p {
font-size: 1rem;
line-height: 1.7;
color: var(--text-dark);
margin-bottom: 20px;
}
.content-image-column {
display: flex;
flex-direction: column;
gap: 20px;
}
.inline-service-image {
margin: 30px 0;
max-width: 400px;
}
.inline-service-image .service-image-container {
aspect-ratio: 16/9;
}
.service-image-container {
position: relative;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.15s ease, box-shadow 0.15s ease;
width: 100%;
aspect-ratio: 16/10;
background-color: #ffffff;
will-change: transform;
contain: layout style paint;
isolation: isolate;
}
.service-image-container:hover {
transform: translate3d(0, -2px, 0);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.service-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 16px;
will-change: auto;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
background-color: #f5f5f5;
transition: opacity 0.3s ease;
}
.service-image[loading="lazy"] {
opacity: 0;
}
.service-image[loading="lazy"].loaded,
.service-image[loading="eager"] {
opacity: 1;
}
.service-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
color: white;
padding: 15px 20px;
transform: translate3d(0, 100%, 0);
transition: transform 0.2s ease-out;
will-change: transform;
backface-visibility: hidden;
pointer-events: none;
}
.service-image-container:hover .service-image-overlay {
transform: translate3d(0, 0, 0);
}
.service-image-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.service-image-desc {
font-size: 0.85rem;
opacity: 0.9;
line-height: 1.4;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* Performance optimizations for service images */
.service-images-featured,
.content-text-image-layout,
.content-image-column {
contain: layout style paint;
}
.service-image-container {
contain: layout style;
}
/* Responsive Service Images and Layout */
@media (max-width: 968px) {
.content-text-image-layout {
grid-template-columns: 1fr;
gap: 30px;
}
.content-image-column {
grid-template-columns: repeat(2, 1fr);
display: grid;
gap: 20px;
}
}
@media (max-width: 768px) {
.service-images-featured {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 0 5px;
max-width: 600px;
}
.content-text-column {
padding-right: 0;
}
.content-text-column h3 {
font-size: 1.5rem;
}
.inline-service-image {
max-width: 100%;
margin: 20px 0;
}
.service-image-container {
aspect-ratio: 16/9;
}
}
@media (max-width: 576px) {
.service-images-featured {
grid-template-columns: 1fr;
gap: 15px;
max-width: 400px;
}
.content-image-column {
grid-template-columns: 1fr;
gap: 15px;
}
.service-image-container {
aspect-ratio: 16/10;
}
}
/* Premium Content Grid */
.service-content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 50px;
align-items: start;
}
.content-column {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Premium Content Cards */
.content-card {
background: white;
padding: 30px;
border-radius: 20px;
border: 1px solid rgba(76, 175, 80, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.content-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--primary-green), var(--cta-orange));
transition: width 0.3s ease;
}
.content-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.content-card:hover::before {
width: 8px;
}
.content-card-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.content-card:hover .content-card-icon {
transform: scale(1.1) rotate(5deg);
}
.content-card h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--dark-green);
margin-bottom: 15px;
line-height: 1.3;
}
.content-card p {
font-size: 1rem;
color: var(--text-dark);
line-height: 1.6;
margin-bottom: 20px;
}
/* Info Buttons */
.info-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}
.info-btn {
background: rgba(76, 175, 80, 0.1);
color: var(--dark-green);
border: 1px solid rgba(76, 175, 80, 0.2);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
cursor: pointer;
}
.info-btn:hover {
background: var(--primary-green);
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
/* Text Sections Around Images */
.content-with-images {
display: grid;
grid-template-columns: 1fr 300px;
gap: 40px;
margin-bottom: 40px;
align-items: start;
}
.content-text-section {
background: white;
padding: 35px;
border-radius: 16px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
border-left: 4px solid var(--primary-green);
}
.content-text-section h3 {
font-size: 1.4rem;
font-weight: 700;
color: var(--dark-green);
margin-bottom: 20px;
}
.content-text-section p {
font-size: 1rem;
color: var(--text-dark);
line-height: 1.7;
margin-bottom: 15px;
}
.content-side-image {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
transition: transform 0.4s ease;
}
.content-side-image:hover {
transform: scale(1.05);
}
/* Premium Highlight Section */
.service-highlight {
background: linear-gradient(135deg,
var(--primary-green) 0%,
var(--dark-green) 100%);
color: white;
padding: 40px;
border-radius: 20px;
text-align: center;
box-shadow: 0 12px 40px rgba(76, 175, 80, 0.25);
position: relative;
overflow: hidden;
margin-bottom: 40px;
}
.service-highlight::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.service-highlight > * {
position: relative;
z-index: 1;
}
.service-highlight h3 {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.service-highlight p {
font-size: 1.1rem;
opacity: 0.9;
line-height: 1.6;
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* CTA Section - Matching Home Page Style */
.service-modal-cta {
background: linear-gradient(135deg,
var(--dark-green) 0%,
var(--primary-green) 100%);
padding: 50px;
border-radius: 0 0 24px 24px;
text-align: center;
position: relative;
overflow: hidden;
}
.service-modal-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.service-modal-cta > * {
position: relative;
z-index: 1;
}
.service-cta-title {
color: white;
font-size: 2rem;
font-weight: 700;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.service-cta-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 30px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
/* Home Page Style CTA Button */
.service-cta-button {
background: linear-gradient(45deg, var(--cta-gradient-1) 0%, var(--cta-gradient-2) 100%);
border: none;
color: white;
font-weight: 700;
padding: 14px 35px;
border-radius: 50px;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
transition: all 0.5s ease;
background-size: 200% 100%;
background-position: 0% 0%;
}
.service-cta-button::before {
display: none !important;
}
/* @keyframes shine - REMOVED: Unused shine animation keyframes */
.service-cta-button:hover {
background-position: 100% 0%;
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(255, 87, 34, 0.25);
/* REMOVED: Glow effects that cause issues in Safari */
color: white;
}
/* Enhanced Close Button */
.pest-modal-close {
position: absolute;
top: 25px;
right: 25px;
width: 50px;
height: 50px;
border: none;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 50%;
color: white;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.pest-modal-close:hover {
background: rgba(255, 255, 255, 0.25);
transform: rotate(90deg) scale(1.1);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* Responsive Design */
@media (max-width: 768px) {
.pest-modal-content {
width: 98vw;
max-height: 96vh;
}
.service-modal-header {
padding: 6px 30px;
}
.service-modal-title {
font-size: 1.4rem;
}
.service-hero-section {
height: 220px;
}
.service-hero-overlay {
padding: 25px 30px;
}
.service-premium-content {
padding: 40px 30px;
}
.service-content-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.service-images {
flex-direction: column;
align-items: center;
gap: 25px;
padding: 0;
}
.service-image-container {
max-width: 100%;
min-width: auto;
width: 100%;
}
.service-image {
height: 180px;
}
.content-with-images {
grid-template-columns: 1fr;
gap: 25px;
}
.service-modal-cta {
padding: 40px 30px;
}
.service-cta-title {
font-size: 1.6rem;
}
}
/* Focus States for Better Accessibility */
.service-cta-button:focus,
.info-btn:focus {
outline: 2px solid var(--primary-green);
outline-offset: 2px;
}
.pest-modal-close:focus {
outline: 2px solid rgba(255, 255, 255, 0.8);
outline-offset: 2px;
}
/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
.content-card:hover,
.service-image-container:hover,
.content-side-image:hover,
.service-cta-button:hover {
transform: none;
}
.service-modal-icon {
animation: none;
}
}
/* ===== ADDITIONAL STYLES FROM INLINE CSS ===== */
/* Moving Text Banner */
.moving-banner {
background: linear-gradient(90deg,
var(--dark-green) 0%,
var(--primary-green) 50%,
var(--dark-green) 100%
);
color: white;
padding: 12px 0;
position: relative;
overflow: hidden;
white-space: nowrap;
}
.moving-banner-content {
display: inline-flex;
animation: moveText 40s linear infinite;
will-change: transform;
}
.banner-item {
display: inline-block;
padding: 0 50px;
font-weight: 500;
font-size: 0.95rem;
flex-shrink: 0;
opacity: 0.95;
transition: opacity 0.3s ease;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.banner-item:hover {
opacity: 1;
}
@keyframes moveText {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
/* Contact Form Badge Styles */
.contact-form-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--primary-green);
color: white;
padding: 6px 14px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 20px;
}
.contact-form-badge i {
font-size: 0.9rem;
}
.contact-form-title {
font-size: 1.9rem;
font-weight: 700;
margin-bottom: 15px;
color: #333;
}
.contact-form-subtitle {
font-size: 1rem;
color: #666;
margin-bottom: 25px;
line-height: 1.5;
}
.contact-form-button {
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
color: white;
border: none;
padding: 25px 45px;
border-radius: 50px;
font-size: 1.3rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
margin: 30px 0;
box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
width: 100%;
max-width: 400px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.button-content {
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.contact-form-button:hover {
background: linear-gradient(135deg, var(--dark-green), var(--primary-green));
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(76, 175, 80, 0.4);
filter: brightness(110%);
}
.contact-form-button:active {
transform: translateY(0);
}
/* Consultation Cards Improvements */
.consultation-body {
padding: 1rem 1.5rem 0.5rem 1.5rem;
}
.consultation-features {
margin-bottom: 1rem !important;
}
.consultation-features li {
padding: 0.4rem 0;
font-size: 0.9rem;
line-height: 1.4;
}
.consultation-check {
color: var(--primary-green);
margin-right: 0.5rem;
font-size: 0.8rem;
}
.consultation-footer {
padding: 0.5rem 1.5rem 1.5rem 1.5rem;
margin-top: 0;
}
.consultation-card {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border-radius: 16px;
overflow: hidden;
}
.consultation-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}
.consultation-header {
padding: 1.5rem 1.5rem 1rem 1.5rem;
}
.consultation-price {
margin-top: 0.5rem;
}
.contact-form-features {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
margin-top: 20px;
}
.feature-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
color: #666;
}
.feature-item i {
color: var(--primary-green);
font-size: 0.9rem;
}
/* Contact Modal CSS - Removed (now using direct link to form.html) */
/* Hero Section */
.hero {
padding: 180px 0 140px; color: white; position: relative; overflow: hidden;
background-color: #000; /* Fallback background color */
}
.hero-video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.hero-video-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); /* Dark overlay */
z-index: 1; /* Above video, below content */
}
.hero-video-background video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transform: none;
min-width: 100%;
min-height: 100%;
pointer-events: none;
will-change: transform;
opacity: 1; /* Fixed: Show immediately instead of fade-in */
/* transition: opacity 0.5s ease-in-out; REMOVED FADE-IN ANIMATION */
}
.video-fallback-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.hero-video-background video { animation: none; transform: none !important; }
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 768px) {
.hero-video-background { display: none; }
.hero { background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%); }
#benefits.section-padding,
#educational-content-section.section-padding { background-color: white !important; }
.btn { min-height: 44px; padding: 12px 20px; font-size: 16px; }
.nav-link { padding: 12px 8px; min-height: 44px; display: flex; align-items: center; }
.pest-card {
cursor: pointer;
-webkit-tap-highlight-color: rgba(76, 175, 80, 0.2);
}
/* Prevent horizontal scroll */
html, body {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
.container-fluid, .container {
padding-left: 15px;
padding-right: 15px;
max-width: 100%;
}
/* Improve text readability */
body {
font-size: 16px;
line-height: 1.6;
}
h1, h2, h3 {
line-height: 1.3;
}
/* Better spacing for mobile */
.section-padding {
padding: 60px 0;
}
.mb-5 {
margin-bottom: 2rem !important;
}
/* Mobile navbar improvements */
.navbar-toggler {
padding: 8px 12px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='m4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-collapse {
margin-top: 15px;
}
}
/* Small phone screens */
@media (max-width: 576px) {
.hero {
padding: 120px 0 60px;
}
.hero h1 {
font-size: 2.2rem;
}
.hero .lead {
font-size: 1.1rem;
margin-bottom: 30px !important;
}
.hero .btn {
display: block;
width: 100%;
margin-bottom: 10px;
}
.pest-card {
margin-bottom: 20px;
}
.section-title {
font-size: 1.8rem;
margin-bottom: 30px;
}
}
/* Large screen optimizations */
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
}
/* Input optimizations for iOS */
@media (max-width: 768px) {
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
font-size: 16px !important; /* Prevents iOS zoom */
border-radius: 8px;
padding: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Better modal sizing on mobile */
.pest-modal-content {
margin: 10px;
width: calc(100vw - 20px);
max-height: calc(100vh - 20px);
border-radius: 12px;
}
.pest-modal {
padding: 10px;
}
}
.hero .container { position: relative; z-index: 2; } /* Ensure content is above video and overlay */
.hero-badge { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); color: white; font-weight: 400; padding: 8px 18px; border-radius: 50px; display: inline-block; margin-bottom: 30px; border: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.9rem; } /* Keep as is, specific rgba values */
.hero h1 { line-height: 1.2; font-weight: 700; }
.hero .lead { font-size: 1.2rem; font-weight: 400; max-width: 650px; margin-bottom: 40px !important; line-height: 1.6; }
@media (max-width: 767px) { .hero .lead { margin-left: auto; margin-right: auto; font-size: 1.1rem;} }
.section-title { position: relative; margin-bottom: 50px; font-weight: 700; color: var(--dark-green); }
.section-title:after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background-color: var(--primary-green); border-radius: 2px; }
/* Default Section Styles */
.section-padding {
padding: 80px 0;
background-color: white;
position: relative;
z-index: 1;
border-bottom: 1px solid var(--border-separator);
}
#services.section-padding {
background-color: var(--light-green);
}
#benefits.section-padding,
#educational-content-section.section-padding {
background-color: white;
}
#benefits .section-title,
#educational-content-section .section-title {
color: var(--dark-green);
}
#benefits .lead.text-muted,
#educational-content-section .lead.text-muted,
#benefits p, #benefits li,
#educational-content-section p, #educational-content-section li,
#educational-content-section .accordion-body {
color: var(--text-dark);
}
#benefits h4, #educational-content-section h4,
#educational-content-section .accordion-button {
color: var(--dark-green);
}
#educational-content-section .accordion-button {
background-color: var(--light-green);
}
#educational-content-section .accordion-button:not(.collapsed) {
background-color: var(--primary-green);
color: white;
}
#educational-content-section .accordion-button:focus { box-shadow: none; }
#contact.section-padding { background-color: var(--background-light); border-bottom: none; }
.trust-logos-section.section-padding { border-bottom: none; background-color: var(--background-light); }
/* Modern Cards (for Services) */
.modern-card {
border: 1px solid var(--border-light);
border-radius: 12px;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
height: 100%;
box-shadow: 0 6px 18px rgba(var(--shadow-color-base), var(--shadow-opacity-low));
background: white;
display: flex; flex-direction: column;
}
.modern-card:hover { transform: translateY(-10px); box-shadow: 0 12px 28px rgba(var(--shadow-color-base), 0.08); border-color: #c8d0c9; } /* Keep #c8d0c9, it's a specific hover color */
.modern-card .card-body { display: flex; flex-direction: column; flex-grow: 1; }
.service-icon { font-size: 2.2rem; color: var(--primary-green); margin-bottom: 20px; transition: all 0.4s ease; }
.modern-card:hover .service-icon { transform: scale(1.15); color: var(--cta-orange); }
/* About Us - Philosophy Section */
.philosophy-pillar {
text-align: center;
padding: 25px 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(var(--shadow-color-base), var(--shadow-opacity-low));
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.philosophy-pillar .icon-circle {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: var(--light-green);
color: var(--primary-green);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.philosophy-pillar:hover .icon-circle {
background-color: var(--primary-green);
color: white;
transform: scale(1.1);
}
.philosophy-pillar h4 {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 10px;
color: var(--dark-green);
}
.philosophy-pillar p {
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.6;
}
/* Educational Content Card Carousel - MODIFIED FOR HOVER */
.edu-card-slider-container {
position: relative;
padding: 0 40px;
/* Removed margin-top as cards won't move up */
}
.edu-card {
background-color: white;
border-radius: 12px;
border: 1px solid var(--border-light);
box-shadow: 0 5px 20px rgba(var(--shadow-color-base), 0.06); /* Keep 0.06, it's a specific opacity */
transition: box-shadow 0.3s ease; /* Only transition shadow now */
height: 100%;
display: flex;
flex-direction: column;
/* position: relative; No longer needed if z-index is removed */
overflow: hidden; /* Keep for rounding image corners */
}
.edu-card:hover {
/* transform: translateY(-10px); -- REMOVED */
box-shadow: 0 10px 30px rgba(var(--shadow-color-base), 0.09); /* Keep 0.09, it's a specific opacity */
/* z-index: 20; -- REMOVED */
}
.edu-card .card-img-top {
height: 180px;
object-fit: cover;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.edu-card .card-body {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 1.25rem;
}
.edu-card .card-title {
color: var(--dark-green);
font-weight: 600;
font-size: 1.1rem;
}
.edu-card .card-text {
font-size: 0.9rem;
color: var(--text-light);
margin-bottom: 1rem;
}
.edu-card .btn-outline-primary {
margin-top: auto;
font-size: 0.85rem;
padding: 8px 20px;
}
/* Pest Showcase Section Styles */
#pest-showcase.section-padding {
background-color: var(--background-light); /* Off-white background */
}
.pest-card {
border: 1px solid var(--border-light);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
background-color: white;
box-shadow: 0 4px 15px rgba(var(--shadow-color-base), var(--shadow-opacity-low));
}
.pest-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(var(--shadow-color-base), var(--shadow-opacity-medium));
border-color: #c0c0c0; /* A slightly darker gray for hover */
}
.pest-card-img-container {
width: 100%;
height: 200px; /* Increased height for better pest visibility */
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff; /* Clean white background */
border-bottom: 1px solid var(--border-separator);
padding: 15px; /* More padding so pest doesn't touch edges */
box-sizing: border-box;
}
.pest-card-img-container img {
max-width: calc(100% - 10px); /* Leave 5px margin on each side */
max-height: calc(100% - 10px); /* Leave 5px margin top/bottom */
min-width: 60px; /* Ensure minimum visibility */
min-height: 60px; /* Ensure minimum visibility */
width: auto; /* Maintain aspect ratio */
height: auto; /* Maintain aspect ratio */
object-fit: contain; /* Show entire pest without cropping */
transition: transform 0.3s ease;
border-radius: 5px; /* Slight border radius for cleaner look */
filter: brightness(1.02) contrast(1.05); /* Enhance image clarity */
}
.pest-card:hover .pest-card-img-container img {
transform: scale(1.08); /* Slightly more zoom with contain fit */
}
/* Special sizing for specific pest types that might need adjustment */
.pest-card-img-container img[alt*="Rats"] {
min-width: 100px; /* Bigger minimum for rats specifically */
min-height: 100px;
transform: scale(1.15); /* Make rat image 15% bigger */
}
.pest-card-img-container img[alt*="Mice"],
.pest-card-img-container img[alt*="Beetle"],
.pest-card-img-container img[alt*="Badger"] {
min-width: 80px; /* Larger minimum for these pests */
min-height: 80px;
}
.pest-card .card-body {
padding: 1.25rem;
text-align: center;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.pest-card .card-title {
color: var(--dark-green);
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0; /* Remove default margin */
line-height: normal;
}
/* Pest Showcase Wrapper */
.pest-showcase-wrapper {
min-height: auto;
background: white;
padding: 35px 0 15px 0;
position: relative;
}
/* When pest categories are shown, keep section clean */
.pest-showcase-wrapper:has(.additional-pest-categories.show) {
padding-bottom: 0;
}
.pest-showcase-center {
text-align: center;
position: relative;
max-width: 800px;
margin: 0 auto;
/* Fixed height to prevent layout shift */
min-height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 10px;
padding-bottom: 10px;
}
.pest-showcase-title {
font-size: 4rem;
font-weight: 800;
color: var(--dark-green);
margin-bottom: 20px;
line-height: 1.2;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
margin-left: auto;
margin-right: auto;
}
/* Show More Pests Button - Enhanced */
.btn-show-more-pests {
background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
color: white;
border: none;
padding: 20px 40px;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
display: flex;
align-items: center;
gap: 15px;
margin: 0;
user-select: none;
min-width: 280px;
justify-content: center;
/* Fixed size to prevent changes */
width: 280px;
height: auto;
}
.btn-show-more-pests:hover {
/* Removed transform to prevent movement */
box-shadow: 0 8px 30px rgba(76, 175, 80, 0.5);
background: linear-gradient(135deg, var(--dark-green) 0%, var(--primary-green) 100%);
}
.btn-show-more-pests i:last-child {
transition: transform 0.3s ease;
}
.btn-show-more-pests.expanded i:last-child {
transform: rotate(180deg);
}
/* Pest Showcase Subtitle */
.pest-showcase-subtitle {
font-size: 1.3rem;
color: var(--text-light);
margin-top: 30px;
margin-bottom: 0;
font-weight: 400;
line-height: 1.6;
text-align: center;
}
/* Responsive adjustments for pest gallery */
@media (max-width: 768px) {
.pest-showcase-wrapper {
padding: 25px 0 15px 0;
}
.pest-showcase-title {
font-size: 2.5rem;
margin-bottom: 15px;
}
.btn-show-more-pests {
font-size: 1.1rem;
padding: 18px 30px;
min-width: 260px;
}
.pest-showcase-subtitle {
font-size: 1.1rem;
margin-top: 25px;
margin-bottom: 0;
}
}
@media (max-width: 576px) {
.pest-showcase-title {
font-size: 2rem;
}
/* Adjust pest card image container for mobile */
.pest-card-img-container {
height: 180px; /* Slightly smaller on mobile but still adequate */
padding: 12px; /* Adequate padding on mobile */
}
}
/* Collapsible Pest Category Styles - Made smaller and sleeker */
.pest-category-header {
cursor: pointer;
transition: all 0.3s ease;
position: relative;
padding: 10px 18px;
background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
color: white;
border-radius: 25px;
box-shadow: 0 3px 10px rgba(76, 175, 80, 0.2);
user-select: none;
font-size: 1rem;
font-weight: 500;
display: inline-flex;
align-items: center;
margin: 0 auto;
max-width: 300px;
}
.pest-category-header:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(76, 175, 80, 0.3);
}
.category-icon {
transition: transform 0.3s ease;
margin-right: 8px;
font-size: 0.9rem;
}
.pest-category-header[aria-expanded="true"] .category-icon {
transform: rotate(180deg);
}
.pest-category-content {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.6s ease-out, opacity 0.4s ease; /* Slower transition for larger content */
}
.pest-category-content.expanded {
max-height: 5000px; /* Increased to accommodate larger content */
opacity: 1;
}
.pest-category-content.collapsed {
max-height: 0;
opacity: 0;
}
/* Extra bottom spacing for the last pest category (Phytosanitary) */
#phytosanitary-section {
margin-bottom: 40px;
}
/* Additional Pest Categories Container */
.additional-pest-categories {
background: linear-gradient(135deg,
rgba(248, 249, 250, 0.9) 0%,
rgba(255, 255, 255, 0.95) 100%);
border-radius: 20px;
margin-top: 40px;
padding: 40px 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden; /* Keep for animation */
max-width: 1200px;
margin-left: auto;
margin-right: auto;
opacity: 0;
max-height: 0;
transition: all 0.7s ease; /* Slower transition to accommodate larger content */
}
.additional-pest-categories.show {
opacity: 1;
max-height: 8000px; /* Significantly increased to accommodate all expanded categories */
min-height: 400px; /* Ensure minimum height when shown */
padding-bottom: 80px; /* Increased bottom padding for better spacing */
}
.additional-pest-categories::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-green) 0%, var(--dark-green) 100%);
border-radius: 20px 20px 0 0;
}
/* Center all pest category sections */
.pest-category-section {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.pest-category-section .col-12 {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
/* Tiny Slider Controls - Cleaner Arrows */
.tns-controls button {
position: absolute;
top: calc(50% - 20px);
transform: translateY(-50%);
background: var(--primary-green);
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 0.9rem;
z-index: 5;
transition: background-color 0.3s ease, transform 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(var(--shadow-color-base), 0.15);
}
.tns-controls button:hover {
background-color: var(--dark-green);
transform: translateY(-50%) scale(1.1);
}
.tns-controls button:disabled {
background-color: var(--neutral-light);
opacity: 0.5;
cursor: not-allowed;
}
.tns-controls button[data-controls="prev"] { left: 0px; }
.tns-controls button[data-controls="next"] { right: 0px; }
.bullet-list { list-style: none; padding-left: 0; margin-bottom: 25px; flex-grow: 1; }
.bullet-list li { position: relative; padding-left: 28px; margin-bottom: 10px; font-size: 0.95rem; font-weight: 400; }
.bullet-list li:before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; color: var(--primary-green); font-size: 1rem; text-align: center; }
.benefit-item {
display: flex; align-items: flex-start; margin-bottom: 30px;
background-color: white;
padding: 30px; border-radius: 10px;
border: 1px solid #eee; /* Keep as is, specific light border */
box-shadow: 0 5px 15px rgba(var(--shadow-color-base), 0.04); /* Keep 0.04, specific opacity */
transition: all 0.3s ease;
}
.benefit-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(var(--shadow-color-base), 0.07); border-color: #ddd; } /* Keep #ddd, specific hover color */
.benefit-icon { font-size: 1.5rem; color: var(--primary-green); margin-right: 20px; padding-top: 3px; min-width: 25px; }
.benefit-item h4 { font-size: 1.1rem; margin-bottom: 8px; font-weight: 600; }
.benefit-item p { font-size: 0.95rem; line-height: 1.6; }
.testimonial-card {
background: white;
border-radius: 10px; padding: 35px; box-shadow: none;
border: 1px solid #eee; /* Keep as is, specific light border */
transition: all 0.4s ease; height: 100%;
display: flex; flex-direction: column;
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 25px rgba(var(--shadow-color-base), 0.08);
border-color: var(--neutral-medium);
}
.quote-icon { font-size: 2rem; color: rgba(76, 175, 80, 0.15); margin-bottom: 15px; } /* Keep as is, specific rgba value */
.testimonial-card p { font-size: 0.95rem; line-height: 1.7; flex-grow: 1; margin-bottom: 25px; }
.customer-name { font-weight: 600; font-size: 1rem; }
.testimonial-card .text-muted { font-size: 0.85rem; }
.testimonial-card .text-warning i { font-size: 0.9rem; }
.testimonial-card img { border: 3px solid #fff; box-shadow: 0 2px 5px rgba(var(--shadow-color-base), var(--shadow-opacity-medium)); }
#contact {
background-color: var(--background-light);
}
.contact-info i { color: var(--primary-green); margin-right: 15px; font-size: 1.1rem; width: 20px; text-align: center; }
.contact-info p { margin-bottom: 15px; font-size: 0.95rem; }
.contact-info a { color: var(--text-dark); text-decoration: none; transition: color 0.3s ease; }
.contact-info a:hover { color: var(--primary-green); }
.uk-map { border-radius: 10px; overflow: hidden; box-shadow: 0 10px 25px rgba(var(--shadow-color-base), 0.08); border: none; }
.form-control, .form-select {
padding: 12px 18px; border-radius: 8px;
border: 1px solid var(--form-border);
background-color: white;
transition: all 0.3s ease; font-size: 0.95rem;
color: var(--text-dark);
}
.form-control::placeholder { color: var(--neutral-medium); }
.form-control:focus, .form-select:focus {
border-color: var(--primary-green);
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15); /* Keep as is, specific rgba value */
background-color: white;
}
.form-label { font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: var(--text-dark); }
.trust-logos-section h5 {
text-align: center;
margin-bottom: 30px;
color: var(--text-light);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
}
.trust-logo {
max-height: 60px;
margin: 0 20px;
filter: grayscale(100%);
opacity: 0.6; /* Keep as is, specific opacity */
transition: all 0.3s ease;
}
.trust-logo:hover {
filter: grayscale(0%);
opacity: 1;
}
footer { background-color: var(--dark-green); color: var(--text-muted-light); position: relative; z-index: 2; overflow: hidden; padding: 60px 0 30px; font-size: 0.9rem; }
footer h5 { color: white; font-weight: 600; margin-bottom: 20px; font-size: 1.1rem; }
footer .navbar-brand {
margin-bottom: 15px;
display: inline-block;
}
footer .logo-unit {
background-color: transparent;
border: none;
box-shadow: none;
padding: 0;
}
footer .logo-icon-main {
font-size: 1.8rem;
color: var(--logo-accent-gold);
}
footer .logo-text-container {
color: var(--text-white);
}
footer .logo-text-organic {
font-size: 0.75rem;
}
footer .logo-text-pestcontrol {
font-size: 0.9rem;
}
.footer-links a { color: var(--text-muted-light); text-decoration: none; margin-right: 0; transition: all 0.3s ease; display: block; padding: 6px 0; }
.footer-links a:hover { color: white; transform: translateX(5px); }
.social-icons a { color: white; font-size: 1rem; margin-right: 10px; transition: all 0.3s ease; width: 35px; height: 35px; background-color: var(--border-dark); display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; }
.social-icons a:hover { transform: translateY(-3px); background-color: var(--cta-orange); color: white; }
.back-to-top { position: fixed; bottom: 30px; left: 30px; width: 45px; height: 45px; background-color: var(--primary-green); color: white; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 1.3rem; box-shadow: 0 5px 15px rgba(var(--shadow-color-base), 0.15); transition: all 0.3s ease; z-index: 1000; opacity: 0; visibility: hidden; text-decoration: none; }
.back-to-top.active { opacity: 1; visibility: visible; }
.back-to-top:hover { background-color: var(--dark-green); transform: translateY(-4px); box-shadow: 0 8px 20px rgba(var(--shadow-color-base), var(--shadow-opacity-medium)); }
.chatbot-widget {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: var(--cta-orange);
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
box-shadow: 0 5px 15px rgba(var(--shadow-color-base), var(--shadow-opacity-high));
cursor: pointer;
transition: all 0.3s ease;
z-index: 999;
}
.chatbot-widget:hover {
background-color: var(--cta-orange-hover);
/* transform: scale(1.1); - Removed hover enlarging animation */
}
.back-to-top.active + .chatbot-widget {
bottom: 30px;
}
/* Responsive Adjustments */
@media (max-width: 991px) {
body { padding-top: 75px; }
.navbar { padding: 8px 0; }
.navbar-collapse { justify-content: flex-end; }
.navbar-nav { margin: 0; }
.hero { padding: 140px 0 100px; }
.section-padding, .trust-logos-section { padding: 60px 0; }
#benefits.section-padding { padding-bottom: 30px; }
.section-title { margin-bottom: 40px; }
.trust-logo { max-height: 50px; margin: 0 15px;}
.philosophy-pillar { margin-bottom: 20px; }
.edu-card-slider-container { padding: 20px 15px 0 15px; }
.tns-controls button[data-controls="prev"] { left: -10px; }
.tns-controls button[data-controls="next"] { right: -10px; }
}
@media (max-width: 767px) {
body { background: linear-gradient(135deg, #1a2a1f 0%, #0f1811 100%); min-height: 100vh; }
/* Only specific sections get white background, not all */
#services.section-padding { background-color: var(--light-green); }
#benefits.section-padding,
#educational-content-section.section-padding {
background-color: white !important;
padding-bottom: 30px; /* Reduced bottom padding */
}
.trust-logos-section { background-color: var(--background-light); }
#contact.section-padding { background-color: var(--background-light); }
.hero { padding: 100px 0 70px; text-align: center; }
.hero .d-flex { justify-content: center; }
.footer-links, .social-icons, footer .text-center, footer .text-lg-start { text-align: center !important; }
footer .col-lg-4 { margin-bottom: 30px !important; }
.footer-links a { margin: 0 8px; display: inline-block; padding: 5px 0; }
ul.footer-links { margin-bottom: 20px; }
.social-icons a { margin: 0 5px; }
.btn { padding: 10px 25px; font-size: 0.85rem; }
.btn-cta { padding: 12px 30px; }
h1, .display-3 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
.modern-card, .benefit-item, .testimonial-card { background-color: white; }
.edu-card { background-color: white; }
.trust-logo { max-height: 40px; margin: 10px 10px;}
.trust-logos-section .d-flex { flex-wrap: wrap; justify-content: center; }
.chatbot-widget { width: 50px; height: 50px; font-size: 1.5rem; }
.back-to-top { left: 15px; bottom: 15px; }
.chatbot-widget { right: 15px; bottom: 15px; }
.back-to-top.active + .chatbot-widget { bottom: 15px; }
.tns-controls { display: none; }
}
/* Habitat Carousel Styles */
.habitat-carousel-container {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.08);
}
.habitat-carousel {
position: relative;
margin: 0 auto;
}
.carousel-slide {
position: relative;
border-radius: 10px;
overflow: hidden;
}
.carousel-slide img {
width: 100%;
height: auto;
border-radius: 10px;
}
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: white;
padding: 20px;
font-size: 1.1rem;
text-align: center;
}
/* Tiny Slider Custom Styles */
.tns-outer {
position: relative;
}
.tns-controls button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--primary-green);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
z-index: 10;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.tns-controls button:hover {
background: var(--dark-green);
transform: translateY(-50%) scale(1.1);
}
.tns-controls button[data-controls="prev"] {
left: -20px;
}
.tns-controls button[data-controls="next"] {
right: -20px;
}
.tns-nav {
text-align: center;
margin-top: 15px;
}
.tns-nav button {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ddd;
border: none;
margin: 0 4px;
transition: all 0.3s ease;
}
.tns-nav button.tns-nav-active {
background: var(--primary-green);
transform: scale(1.2);
}
/* Additional Info Section Styles */
.additional-info-section {
animation: fadeIn 0.5s ease;
}
.seasonal-list {
list-style: none;
padding: 0;
margin: 0;
}
.seasonal-list li {
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.seasonal-list li:last-child {
border-bottom: none;
}
.lifecycle-stages {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.stage {
text-align: center;
flex: 1;
min-width: 100px;
padding: 15px;
background: rgba(var(--primary-green-rgb), 0.1);
border-radius: 10px;
transition: all 0.3s ease;
}
.stage:hover {
transform: translateY(-5px);
background: rgba(var(--primary-green-rgb), 0.15);
}
.stage i {
font-size: 1.5rem;
color: var(--primary-green);
margin-bottom: 8px;
display: block;
}
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-top: 20px;
}
.resource-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: rgba(var(--primary-green-rgb), 0.05);
border-radius: 10px;
text-decoration: none;
color: var(--text-dark);
transition: all 0.3s ease;
}
.resource-item:hover {
background: rgba(var(--primary-green-rgb), 0.1);
transform: translateY(-5px);
color: var(--primary-green);
}
.resource-item i {
font-size: 1.5rem;
margin-bottom: 10px;
color: var(--primary-green);
}
.learn-more-btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
.learn-more-btn::after {
content: '\f054';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
transition: transform 0.3s ease;
}
.learn-more-btn:hover::after {
transform: translateX(5px);
}
@media (max-width: 768px) {
.tns-controls button {
width: 35px;
height: 35px;
}
.tns-controls button[data-controls="prev"] {
left: -10px;
}
.tns-controls button[data-controls="next"] {
right: -10px;
}
.lifecycle-stages {
grid-template-columns: repeat(2, 1fr);
}
.resources-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ================== IMAGE LIGHTBOX STYLES ================== */
/* Image Lightbox Styles */
.image-lightbox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
backdrop-filter: blur(5px);
}
.image-lightbox-overlay.active {
opacity: 1;
visibility: visible;
}
.image-lightbox-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
flex-direction: column;
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
transform: scale(0.9) translateY(20px);
transition: transform 0.3s ease;
}
.image-lightbox-overlay.active .image-lightbox-content {
transform: scale(1) translateY(0);
}
.image-lightbox-close {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.image-lightbox-close:hover {
background: rgba(0, 0, 0, 0.9);
transform: scale(1.1);
}
.image-lightbox-container {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.lightbox-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #666;
font-size: 1.2rem;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease;
}
.lightbox-loading.visible {
opacity: 1;
visibility: visible;
}
.lightbox-image {
width: 100%;
height: auto;
max-height: 70vh;
object-fit: contain;
background-color: #f8f9fa;
flex-shrink: 0;
transition: opacity 0.15s ease;
}
.image-lightbox-info {
padding: 25px 30px;
background: white;
border-top: 1px solid #e9ecef;
}
.lightbox-title {
font-size: 1.4rem;
font-weight: 600;
color: var(--dark-green);
margin: 0 0 10px 0;
}
.lightbox-description {
font-size: 1rem;
color: var(--text-dark);
line-height: 1.6;
margin: 0;
}
.lightbox-navigation {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 20px;
pointer-events: none;
transform: translateY(-50%);
}
.lightbox-nav-btn {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: background-color 0.2s ease, transform 0.2s ease;
pointer-events: auto;
opacity: 0;
visibility: hidden;
}
.lightbox-nav-btn.visible {
opacity: 1;
visibility: visible;
}
.lightbox-nav-btn:hover {
background: rgba(0, 0, 0, 0.9);
transform: scale(1.1);
}
/* Clickable Image Cursor */
.service-image,
.service-hero-image {
cursor: pointer;
}
.service-image:hover,
.service-hero-image:hover {
opacity: 0.9;
}
/* Responsive Lightbox */
@media (max-width: 768px) {
.image-lightbox-content {
max-width: 95vw;
max-height: 95vh;
margin: 20px;
}
.lightbox-image {
max-height: 60vh;
}
.image-lightbox-info {
padding: 20px;
}
.lightbox-title {
font-size: 1.2rem;
}
.lightbox-description {
font-size: 0.9rem;
}
.lightbox-nav-btn {
width: 40px;
height: 40px;
font-size: 16px;
}
.lightbox-navigation {
padding: 0 10px;
}
}
/* Single Stat Section Styles */
.single-stat-section {
background: linear-gradient(180deg,
rgba(76, 175, 80, 0.05) 0%,
rgba(76, 175, 80, 0.08) 50%,
rgba(76, 175, 80, 0.05) 100%);
padding: 30px 0;
position: relative;
overflow: hidden;
}
.single-stat-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(76, 175, 80, 0.2) 50%, transparent 100%);
}
.single-stat-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(76, 175, 80, 0.2) 50%, transparent 100%);
}
.single-stat-item {
text-align: center;
padding: 25px 20px;
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(76, 175, 80, 0.1);
}
.single-stat-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.9);
}
.single-stat-number-container {
display: block;
margin-bottom: 15px;
line-height: 1;
}
.single-stat-number {
font-size: 3.5rem;
font-weight: 800;
color: var(--dark-green);
line-height: 1;
display: inline;
transition: all 0.3s ease;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.single-stat-item:hover .single-stat-number {
color: var(--primary-green);
transform: scale(1.05);
}
.single-stat-label {
font-size: 1.1rem;
color: var(--text-dark);
line-height: 1.4;
font-weight: 500;
max-width: 400px;
margin: 0 auto 15px auto;
text-align: center;
}
.single-stat-source {
font-size: 0.85rem;
color: var(--text-light);
opacity: 0.8;
margin-top: 10px;
}
.single-stat-source i {
color: var(--primary-green);
}
/* Stats Section Styles (keeping for reference) */
.stats-section {
background: linear-gradient(180deg,
rgba(76, 175, 80, 0.05) 0%,
rgba(76, 175, 80, 0.08) 50%,
rgba(76, 175, 80, 0.05) 100%);
padding: 25px 0;
position: relative;
overflow: hidden;
}
.stats-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(76, 175, 80, 0.2) 50%, transparent 100%);
}
.stats-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(76, 175, 80, 0.2) 50%, transparent 100%);
}
.stat-item {
text-align: center;
padding: 15px 10px;
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 120px;
}
.stat-item:hover {
transform: translateY(-3px);
}
.stat-item:hover .stat-number,
.stat-item:hover .stat-percentage,
.stat-item:hover .stat-plus {
color: var(--primary-green);
}
.stat-number-container {
display: block;
margin-bottom: 12px;
line-height: 1;
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--dark-green);
line-height: 1;
display: inline;
transition: all 0.3s ease;
}
.stat-percentage,
.stat-plus {
font-size: 2.5rem;
font-weight: 800;
color: var(--dark-green);
display: inline;
transition: all 0.3s ease;
}
.stat-label {
font-size: 0.85rem;
color: var(--text-light);
line-height: 1.4;
font-weight: 500;
max-width: 180px;
margin: 12px auto 0 auto;
text-align: center;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.single-stat-section {
padding: 25px 0;
}
.single-stat-item {
padding: 20px 15px;
}
.single-stat-number {
font-size: 2.8rem;
}
.single-stat-label {
font-size: 1rem;
max-width: 300px;
}
.single-stat-source {
font-size: 0.8rem;
}
/* Stats Section Styles (keeping for reference) */
.stats-section {
padding: 20px 0;
}
.stat-number {
font-size: 2rem;
}
.stat-percentage,
.stat-plus {
font-size: 2rem;
}
.stat-number-container {
margin-bottom: 10px;
}
.stat-label {
font-size: 0.8rem;
max-width: 140px;
min-height: 35px;
}
.stat-item {
padding: 12px 8px;
min-height: 100px;
}
}
@media (max-width: 576px) {
.single-stat-number {
font-size: 2.2rem;
}
.single-stat-label {
font-size: 0.9rem;
max-width: 250px;
}
.single-stat-item {
padding: 15px 10px;
}
/* Stats Section Styles (keeping for reference) */
.stat-number {
font-size: 1.8rem;
}
.stat-percentage,
.stat-plus {
font-size: 1.8rem;
}
.stat-label {
font-size: 0.75rem;
max-width: 120px;
min-height: 30px;
}
.stat-number-container {
margin-bottom: 8px;
}
.stat-item {
min-height: 90px;
}
}
/* Service Modal Additional Styles */
.benefit-list {
list-style: none;
padding-left: 0;
margin: 20px 0;
}
.benefit-list li {
position: relative;
padding-left: 25px;
margin-bottom: 12px;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-light);
}
.benefit-list li:before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 2px;
width: 16px;
height: 16px;
color: var(--primary-green);
font-size: 0.9rem;
text-align: center;
}
.service-approach-list {
list-style: none;
padding-left: 0;
margin: 20px 0;
}
.service-approach-list li {
position: relative;
padding-left: 28px;
margin-bottom: 15px;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-light);
font-weight: 400;
}
.service-approach-list li:before {
content: "\f105";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
color: var(--primary-green);
font-size: 1rem;
text-align: center;
}
.service-approach-list li:hover {
color: var(--text-dark);
transform: translateX(3px);
transition: all 0.3s ease;
}
.service-cta-section {
background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(76, 175, 80, 0.1) 100%);
padding: 25px;
border-radius: 12px;
margin: 30px 0;
border-left: 4px solid var(--primary-green);
}
.service-cta-section h4 {
color: var(--dark-green);
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 12px;
line-height: 1.3;
}
.service-cta-section p {
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 0;
}
/* Placeholder Image Styles */
.placeholder-image {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 2px dashed #dee2e6;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
transition: all 0.3s ease;
}
.placeholder-image:hover {
border-color: var(--primary-green);
background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e8 100%);
transform: translateY(-2px);
}
.placeholder-content {
text-align: center;
color: var(--text-light);
}
.placeholder-content i {
font-size: 2.5rem;
color: var(--primary-green);
margin-bottom: 10px;
display: block;
}
.placeholder-content span {
font-size: 0.9rem;
font-weight: 500;
display: block;
margin-top: 8px;
}
@media (max-width: 768px) {
.benefit-list li {
font-size: 0.9rem;
padding-left: 22px;
}
.service-approach-list li {
font-size: 0.9rem;
padding-left: 24px;
margin-bottom: 12px;
}
.service-cta-section {
padding: 20px;
margin: 25px 0;
}
.service-cta-section h4 {
font-size: 1.2rem;
}
.service-cta-section p {
font-size: 0.9rem;
}
.placeholder-image {
min-height: 150px;
}
.placeholder-content i {
font-size: 2rem;
}
.placeholder-content span {
font-size: 0.8rem;
}
}
/* Why Go Organic Section Styles */
/* Pesticide Stats Grid Styles */
.pesticide-stats-grid {
background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(220, 53, 69, 0.08) 50%, rgba(220, 53, 69, 0.05) 100%);
border: 1px solid rgba(220, 53, 69, 0.2);
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.pesticide-stats-grid::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, #dc3545 50%, transparent 100%);
}
.stats-header {
display: flex;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(220, 53, 69, 0.1);
}
.stats-header h3 {
color: #dc3545;
font-weight: 700;
margin: 0;
font-size: 1.5rem;
}
.stats-header i {
font-size: 1.8rem;
color: #dc3545;
}
/* Organic Solution Card Styles */
.organic-solution-card {
background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(40, 167, 69, 0.08) 50%, rgba(40, 167, 69, 0.05) 100%);
border: 1px solid rgba(40, 167, 69, 0.2);
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.organic-solution-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, #28a745 50%, transparent 100%);
}
.solution-header {
display: flex;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(40, 167, 69, 0.1);
}
.solution-header h3 {
color: #28a745;
font-weight: 700;
margin: 0;
font-size: 1.5rem;
}
.solution-header i {
font-size: 1.8rem;
color: #28a745;
}
.risk-warning-card {
background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
border: 2px solid #ffebee;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 8px 25px rgba(244, 67, 54, 0.1);
transition: all 0.3s ease;
}
.risk-warning-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(244, 67, 54, 0.15);
}
.risk-header {
display: flex;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #ffcdd2;
}
.risk-header h3 {
color: #d32f2f;
font-weight: 700;
margin: 0;
}
.benefits-card {
background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e8 100%);
border: 2px solid #c8e6c9;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.1);
transition: all 0.3s ease;
}
.benefits-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(76, 175, 80, 0.15);
}
.benefits-header {
display: flex;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #a5d6a7;
}
.benefits-header h3 {
color: #2e7d32;
font-weight: 700;
margin: 0;
}
.environment-card {
background: linear-gradient(135deg, #e3f2fd 0%, #e1f5fe 100%);
border: 2px solid #b3e5fc;
border-radius: 16px;
padding: 30px;
box-shadow: 0 8px 25px rgba(33, 150, 243, 0.1);
transition: all 0.3s ease;
}
.environment-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(33, 150, 243, 0.15);
}
.environment-header {
display: flex;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #81d4fa;
}
.environment-header h3 {
color: #1565c0;
font-weight: 700;
margin: 0;
}
.stat-card {
background: white;
border-radius: 12px;
padding: 25px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.stat-card.danger {
border-left: 4px solid #f44336;
}
.stat-card.success {
border-left: 4px solid #4caf50;
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 10px;
line-height: 1;
}
.stat-card.danger .stat-number {
color: #d32f2f;
}
.stat-card.success .stat-number {
color: #2e7d32;
}
.stat-label {
font-size: 0.9rem;
color: #666;
line-height: 1.4;
margin-bottom: 15px;
flex-grow: 1;
}
.stat-source {
margin-top: auto;
}
.stat-source a {
color: #2196f3;
text-decoration: none;
font-size: 0.8rem;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.stat-source a:hover {
color: #1976d2;
transform: translateX(3px);
}
.stat-source i {
margin-right: 5px;
font-size: 0.7rem;
}
.impact-comparison {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
height: 100%;
}
.impact-list {
list-style: none;
padding: 0;
margin: 0;
}
.impact-list li {
padding: 8px 0;
border-bottom: 1px solid #eee;
font-size: 0.95rem;
line-height: 1.4;
}
.impact-list li:last-child {
border-bottom: none;
}
.danger-list li {
color: #d32f2f;
}
.success-list li {
color: #2e7d32;
}
.sources-section {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #eee;
}
.sources-section h6 {
color: #666;
font-weight: 600;
margin-bottom: 10px;
}
.source-links {
font-size: 0.8rem;
line-height: 1.5;
}
.source-links a {
color: #2196f3;
text-decoration: none;
transition: color 0.3s ease;
}
.source-links a:hover {
color: #1976d2;
text-decoration: underline;
}
/* Responsive adjustments for the new section */
@media (max-width: 768px) {
.risk-warning-card,
.benefits-card,
.environment-card {
padding: 20px;
margin-bottom: 20px;
}
.stat-card {
padding: 20px;
margin-bottom: 15px;
}
.stat-number {
font-size: 2rem;
}
.stat-label {
font-size: 0.85rem;
}
.impact-comparison {
padding: 20px;
margin-bottom: 15px;
}
.risk-header,
.benefits-header,
.environment-header {
flex-direction: column;
text-align: center;
}
.risk-header i,
.benefits-header i,
.environment-header i {
margin-bottom: 10px;
margin-right: 0;
}
}
@media (max-width: 576px) {
.stat-number {
font-size: 1.8rem;
}
.stat-label {
font-size: 0.8rem;
}
.source-links {
font-size: 0.75rem;
}
}
/* Study Details Dropdown Styles */
.study-details {
display: none;
margin-top: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #2196f3;
animation: slideDown 0.3s ease-out;
}
.study-details.active {
display: block;
}
.study-content h6 {
color: #1976d2;
font-weight: 600;
margin-bottom: 10px;
}
.study-content p {
margin-bottom: 8px;
font-size: 0.9rem;
line-height: 1.5;
}
.study-content p strong {
color: #333;
}
.study-toggle {
font-size: 0.8rem;
padding: 6px 12px;
border-radius: 20px;
transition: all 0.3s ease;
border-width: 1px;
}
.study-toggle:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.study-toggle.active {
background-color: #2196f3;
color: white;
border-color: #2196f3;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive adjustments for study details */
@media (max-width: 768px) {
.study-details {
padding: 12px;
margin-top: 12px;
}
.study-content p {
font-size: 0.85rem;
}
.study-toggle {
font-size: 0.75rem;
padding: 5px 10px;
}
}
/* Source Link Styles */
.source-link {
color: #2196f3;
text-decoration: none;
font-size: 0.85rem;
display: inline-block;
margin-top: 8px;
transition: all 0.3s ease;
}
.source-link:hover {
color: #1976d2;
text-decoration: underline;
transform: translateY(-1px);
}
.source-link i {
margin-right: 4px;
font-size: 0.8rem;
}
/* Study Modal Styles */
.study-modal-content {
padding: 20px;
line-height: 1.6;
}
.study-modal-content h6 {
color: #1976d2;
font-weight: 600;
margin-bottom: 15px;
border-bottom: 2px solid #e3f2fd;
padding-bottom: 8px;
}
.study-modal-content p {
margin-bottom: 10px;
font-size: 0.95rem;
}
.study-modal-content p strong {
color: #333;
font-weight: 600;
}
/* Modal Animation */
.modal.fade .modal-dialog {
transition: transform 0.3s ease-out;
transform: translate(0, -50px);
}
.modal.show .modal-dialog {
transform: none;
}
/* Service Card Button Consistency */
.service-details-btn {
min-height: 48px !important;
padding: 12px 20px !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
border-width: 2px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: normal !important;
line-height: 1.3 !important;
width: 100% !important;
}
/* Ensure consistent button sizing across all devices */
@media (max-width: 576px) {
.service-details-btn {
min-height: 52px !important;
padding: 14px 16px !important;
font-size: 1rem !important;
font-weight: 600 !important;
}
}
@media (min-width: 577px) and (max-width: 768px) {
.service-details-btn {
min-height: 50px !important;
padding: 13px 18px !important;
font-size: 0.98rem !important;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.service-details-btn {
min-height: 48px !important;
padding: 12px 20px !important;
font-size: 0.95rem !important;
}
}
@media (min-width: 993px) {
.service-details-btn {
min-height: 48px !important;
padding: 12px 24px !important;
font-size: 0.95rem !important;
}
}
/* Hover effects for service buttons */
.service-details-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3) !important;
border-color: var(--primary-green) !important;
background-color: var(--primary-green) !important;
color: white !important;
}
/* Focus states for accessibility */
.service-details-btn:focus {
outline: 3px solid rgba(76, 175, 80, 0.4) !important;
outline-offset: 2px !important;
}