/* ==========================================================================
MBK Umzug-Transport-Reinigung - Clean Modern Balanced Theme
Brand: Forest Green (#0b5d2b) & Light Leaf Green (#6fb92c) Accents
Base: Crisp White (#ffffff), Light Cool Gray (#f8fafc), Dark Slate (#0f172a)
"eine saubere Lösung"
========================================================================== */
/* --------------------------------------------------------------------------
1. Design Tokens & CSS Variables
-------------------------------------------------------------------------- */
:root {
/* Brand Accent Colors */
--color-green-primary: #0b5d2b;
--color-green-primary-hover: #084822;
--color-green-light: #5fae22;
--color-green-light-hover: #50971b;
--color-green-bright: #6fb92c;
--color-green-tint: #eaf6ea;
--color-green-badge-bg: rgba(95, 174, 34, 0.12);
--color-green-badge-text: #0b5d2b;
/* Legacy mapping */
--color-navy-dark: #0b1526;
--color-navy-main: #0f1c34;
--color-navy-light: #1e293b;
--color-gold: #5fae22;
--color-gold-hover: #50971b;
--color-gold-light: #eaf6ea;
--color-gold-badge-text: #0b5d2b;
/* Typography & Neutral Palette */
--color-text-title: #0f172a;
--color-text-body: #475569;
--color-text-muted: #64748b;
--color-text-dark: #0f172a;
/* Backgrounds & Clean Neutrals */
--color-bg-white: #ffffff;
--color-bg-light: #f8fafc;
--color-bg-subtle: #f1f5f9;
--color-border-card: #e2e8f0;
--color-border-light: #f1f5f9;
/* Typography */
--font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
/* Radius */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-full: 9999px;
/* Shadows */
--shadow-card: 0 4px 16px rgba(15, 23, 42, 0.04);
--shadow-card-hover: 0 12px 28px rgba(15, 23, 42, 0.09);
}
/* --------------------------------------------------------------------------
2. Reset & Global Styles
-------------------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-sans);
background-color: var(--color-bg-white);
color: var(--color-text-body);
line-height: 1.55;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
button, input, select, textarea {
font-family: inherit;
}
/* --------------------------------------------------------------------------
3. Container & Utility Classes
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.text-center {
text-align: center;
}
.text-gold, .text-accent, .text-light-green {
color: var(--color-green-light);
}
.text-forest {
color: var(--color-green-primary);
}
/* Section Header Styles */
.section-badge {
display: inline-block;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 1.2px;
color: var(--color-green-primary);
background-color: var(--color-green-badge-bg);
padding: 5px 14px;
border-radius: var(--radius-full);
border: 1px solid rgba(11, 93, 43, 0.15);
text-transform: uppercase;
margin-bottom: 12px;
}
.section-badge.badge-left {
margin-bottom: 8px;
}
.section-title {
font-size: 2.3rem;
font-weight: 800;
color: var(--color-text-title);
line-height: 1.25;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.section-subtitle {
font-size: 0.98rem;
color: var(--color-text-body);
max-width: 620px;
margin: 0 auto;
}
.section-subtitle-left {
font-size: 1rem;
color: var(--color-text-body);
margin-bottom: 24px;
line-height: 1.6;
}
/* --------------------------------------------------------------------------
4. Buttons & Badges
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
font-size: 0.96rem;
font-weight: 700;
border-radius: var(--radius-sm);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.25s ease;
line-height: 1.2;
}
.btn-primary-gold, .btn-primary-green {
background-color: var(--color-green-primary);
color: #ffffff;
font-weight: 800;
border: none;
box-shadow: 0 4px 16px rgba(11, 93, 43, 0.35);
}
.btn-primary-gold:hover, .btn-primary-green:hover {
background-color: var(--color-green-primary-hover);
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(11, 93, 43, 0.45);
color: #ffffff;
}
.btn-secondary-glass {
background-color: rgba(255, 255, 255, 0.15);
color: #ffffff;
border: 1.5px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
}
.btn-secondary-glass:hover {
background-color: rgba(255, 255, 255, 0.3);
border-color: #ffffff;
transform: translateY(-2px);
}
.btn-banner-gold, .btn-banner-green {
background-color: var(--color-green-light);
color: #ffffff;
font-weight: 800;
padding: 13px 26px;
border-radius: var(--radius-sm);
border: none;
box-shadow: 0 4px 14px rgba(95, 174, 34, 0.35);
}
.btn-banner-gold:hover, .btn-banner-green:hover {
background-color: var(--color-green-light-hover);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(95, 174, 34, 0.5);
color: #ffffff;
}
.btn-phone,
.btn-booking {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: var(--color-green-primary);
color: #ffffff;
font-weight: 800;
font-size: 0.9rem;
padding: 10px 18px;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 3px 12px rgba(11, 93, 43, 0.25);
text-decoration: none;
}
.btn-phone:hover,
.btn-booking:hover {
background-color: var(--color-green-primary-hover);
transform: translateY(-1px);
color: #ffffff;
box-shadow: 0 6px 18px rgba(11, 93, 43, 0.35);
}
.badge-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: rgba(255, 255, 255, 0.12);
color: #93e84e;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 1px;
padding: 7px 16px;
border-radius: var(--radius-full);
margin-bottom: 22px;
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(6px);
}
.badge-clean, .badge-assembly {
background-color: rgba(255, 255, 255, 0.12);
color: #93e84e;
border-color: rgba(255, 255, 255, 0.25);
}
.badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--color-green-bright);
animation: pulseDot 2s infinite ease-in-out;
}
.dot-cyan, .dot-green {
background-color: var(--color-green-bright);
}
@keyframes pulseDot {
0% { transform: scale(0.9); opacity: 0.7; }
50% { transform: scale(1.4); opacity: 1; }
100% { transform: scale(0.9); opacity: 0.7; }
}
/* --------------------------------------------------------------------------
5. Site Header & Light Green Topbar
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.topbar-wrapper {
background-color: #0b1526;
background: #0b1526;
color: #ffffff;
font-size: 0.82rem;
font-weight: 600;
padding: 7px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.topbar-left {
display: flex;
align-items: center;
gap: 18px;
}
.topbar-item {
display: inline-flex;
align-items: center;
gap: 7px;
color: #ffffff;
}
.topbar-icon {
flex-shrink: 0;
color: #ffffff;
}
.topbar-right {
display: flex;
align-items: center;
gap: 14px;
}
.topbar-phone {
display: inline-flex;
align-items: center;
gap: 6px;
color: #ffffff;
font-weight: 700;
transition: opacity 0.2s ease;
}
.topbar-phone:hover {
opacity: 0.85;
}
.topbar-divider {
width: 1px;
height: 14px;
background-color: rgba(255, 255, 255, 0.4);
}
.topbar-socials {
display: flex;
align-items: center;
gap: 8px;
}
.topbar-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.22);
color: #ffffff;
transition: all 0.2s ease;
}
.topbar-social-link:hover {
background-color: #ffffff;
color: var(--color-green-primary);
transform: translateY(-2px);
}
.navbar-wrapper {
position: relative;
width: 100%;
background-color: #ffffff;
border-bottom: 1px solid #e2e8f0;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}
.navbar-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 98px;
}
.brand-logo {
display: flex;
align-items: center;
gap: 12px;
}
.brand-logo .logo-img {
height: 86px;
width: auto;
object-fit: contain;
display: block;
}
.nav-list {
display: flex;
align-items: center;
gap: 24px;
}
.nav-link {
color: #1e293b;
font-size: 0.94rem;
font-weight: 600;
transition: color 0.2s ease;
}
.nav-link:hover {
color: var(--color-green-primary);
}
.nav-link.active,
.nav-item.active > .nav-link {
color: var(--color-green-primary);
font-weight: 800;
position: relative;
}
.nav-link.active::after,
.nav-item.active > .nav-link::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 2.5px;
background-color: var(--color-green-primary);
border-radius: 2px;
}
/* --------------------------------------------------------------------------
Dropdown Menu & Sub-Menu on Hover
-------------------------------------------------------------------------- */
.nav-item {
position: relative;
}
.nav-link.dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
}
.dropdown-chevron {
transition: transform 0.25s ease;
}
.nav-item.has-dropdown:hover .dropdown-chevron {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(12px);
background-color: #ffffff;
min-width: 290px;
border-radius: var(--radius-md);
padding: 10px;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04);
border: 1px solid #e2e8f0;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;
z-index: 1100;
pointer-events: none;
}
/* Invisible bridge so mouse hover doesn't break */
.dropdown-menu::before {
content: '';
position: absolute;
top: -14px;
left: 0;
width: 100%;
height: 14px;
}
.nav-item.has-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(4px);
pointer-events: auto;
}
.dropdown-menu li {
margin-bottom: 4px;
}
.dropdown-menu li:last-child {
margin-bottom: 0;
}
.dropdown-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
text-decoration: none;
color: #1e293b;
}
.dropdown-item:hover {
background-color: var(--color-green-tint);
transform: translateX(4px);
}
.dropdown-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background-color: #eaf6ea;
color: #0b5d2b;
border: 1px solid rgba(111, 185, 44, 0.28);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.25s ease;
}
.dropdown-icon svg {
width: 18px;
height: 18px;
stroke: #0b5d2b;
stroke-width: 2;
transition: all 0.25s ease;
}
.dropdown-item:hover .dropdown-icon {
background-color: #0b5d2b;
color: #ffffff;
border-color: #0b5d2b;
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(11, 93, 43, 0.25);
}
.dropdown-item:hover .dropdown-icon svg {
stroke: #ffffff;
}
.dropdown-info {
display: flex;
flex-direction: column;
}
.dropdown-info strong {
font-size: 0.88rem;
font-weight: 700;
color: #0f172a;
line-height: 1.25;
transition: color 0.2s ease;
}
.dropdown-item:hover .dropdown-info strong {
color: var(--color-green-primary);
}
.dropdown-info small {
font-size: 0.74rem;
color: #64748b;
line-height: 1.2;
}
/* WP Nav Menu Compatibility */
.nav-item.menu-item-has-children {
position: relative;
}
.nav-item.menu-item-has-children:hover > .sub-menu,
.nav-item.menu-item-has-children:hover > .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(4px);
pointer-events: auto;
}
.sub-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(12px);
background-color: #ffffff;
min-width: 250px;
border-radius: var(--radius-md);
padding: 10px;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04);
border: 1px solid #e2e8f0;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;
z-index: 1100;
pointer-events: none;
list-style: none;
}
.sub-menu::before {
content: '';
position: absolute;
top: -14px;
left: 0;
width: 100%;
height: 14px;
}
.sub-menu li a {
display: block;
padding: 9px 14px;
border-radius: var(--radius-sm);
color: #1e293b;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.sub-menu li a:hover {
background-color: var(--color-green-tint);
color: var(--color-green-primary);
transform: translateX(4px);
}
.nav-mobile-cta {
display: none;
}
.header-action {
display: flex;
align-items: center;
gap: 12px;
}
/* German Language Indicator Badge */
.lang-badge {
display: inline-flex;
align-items: center;
gap: 7px;
height: 42px;
padding: 0 14px;
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 50px;
color: #1e293b;
font-size: 0.84rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
}
.lang-badge:hover {
background-color: #ffffff;
border-color: var(--color-green-primary);
color: var(--color-green-primary);
box-shadow: 0 3px 12px rgba(15, 118, 110, 0.1);
}
.flag-icon-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 14px;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
.flag-icon {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lang-code {
letter-spacing: 0.5px;
}
/* Header Search Action */
.header-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background-color: #f1f5f9;
color: #1e293b;
border: 1px solid #e2e8f0;
cursor: pointer;
transition: all 0.2s ease;
}
.header-search-btn:hover {
background-color: var(--color-green-tint);
color: var(--color-green-primary);
border-color: var(--color-green-primary);
transform: scale(1.05);
}
/* Slide-Down Search Bar */
.header-search-bar {
max-height: 0;
overflow: hidden;
background-color: #ffffff;
border-top: 1px solid transparent;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, padding 0.3s ease;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}
.header-search-bar.open {
max-height: 90px;
border-top-color: #e2e8f0;
padding: 14px 0 16px 0;
}
.search-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.search-form {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.search-form-icon {
position: absolute;
left: 16px;
color: var(--color-green-primary);
pointer-events: none;
}
.search-form input {
width: 100%;
padding: 13px 46px 13px 48px;
font-size: 1rem;
border: 2px solid #cbd5e1;
border-radius: var(--radius-full);
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background-color: #f8fafc;
color: #0f172a;
}
.search-form input:focus {
border-color: var(--color-green-primary);
background-color: #ffffff;
box-shadow: 0 0 0 4px rgba(11, 93, 43, 0.12);
}
.search-close-btn {
position: absolute;
right: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
background: transparent;
border: none;
font-size: 1.4rem;
color: #64748b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.search-close-btn:hover {
background-color: #f1f5f9;
color: #0f172a;
}
.quick-search-tags {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-left: 8px;
}
.tags-label {
font-size: 0.8rem;
font-weight: 700;
color: #64748b;
}
.search-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.78rem;
font-weight: 600;
color: #334155;
background-color: #f1f5f9;
padding: 4px 12px;
border-radius: var(--radius-full);
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
}
.search-tag:hover {
background-color: var(--color-green-tint);
color: var(--color-green-primary);
border-color: var(--color-green-primary);
}
.mobile-toggle {
display: none;
background: transparent;
border: none;
color: #1e293b;
cursor: pointer;
padding: 4px;
}
/* --------------------------------------------------------------------------
6. FULL-WIDTH HERO SLIDER WITH ANIMATED CONTENT
-------------------------------------------------------------------------- */
.hero-slider-section {
position: relative;
width: 100%;
min-height: 640px;
overflow: hidden;
background-color: #0b1526;
display: flex;
align-items: center;
}
.hero-slider-main {
position: relative;
width: 100%;
min-height: 640px;
display: flex;
align-items: center;
}
/* Slide Container & Background */
.full-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
}
.full-slide.active {
opacity: 1;
visibility: visible;
z-index: 2;
}
/* Elegant Dark Overlay For High Text Contrast */
.slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(11, 21, 38, 0.95) 0%,
rgba(11, 21, 38, 0.88) 50%,
rgba(11, 21, 38, 0.5) 100%
);
z-index: 1;
}
.slide-container {
position: relative;
z-index: 2;
width: 100%;
padding: 60px 24px;
display: flex;
align-items: center;
}
.slide-content-box {
max-width: 650px;
}
/* Staggered Animations */
.slide-anim-badge,
.slide-anim-title,
.slide-anim-desc,
.slide-anim-features,
.slide-anim-cta {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.full-slide.active .slide-anim-badge {
opacity: 1;
transform: translateY(0);
transition-delay: 0.15s;
}
.full-slide.active .slide-anim-title {
opacity: 1;
transform: translateY(0);
transition-delay: 0.25s;
}
.full-slide.active .slide-anim-desc {
opacity: 1;
transform: translateY(0);
transition-delay: 0.35s;
}
.full-slide.active .slide-anim-features {
opacity: 1;
transform: translateY(0);
transition-delay: 0.45s;
}
.full-slide.active .slide-anim-cta {
opacity: 1;
transform: translateY(0);
transition-delay: 0.55s;
}
/* Slide Typography */
.slide-anim-title {
font-size: 3.2rem;
font-weight: 800;
line-height: 1.15;
color: #ffffff;
letter-spacing: -0.03em;
margin-bottom: 16px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.slide-anim-desc {
font-size: 1.05rem;
color: #e2e8f0;
line-height: 1.55;
margin-bottom: 24px;
max-width: 560px;
}
/* Glass Feature Items */
.hero-features-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.feature-item-glass {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 8px 14px;
border-radius: var(--radius-sm);
backdrop-filter: blur(8px);
}
.feature-item-glass .feature-icon-circle {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: var(--color-green-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-gold-circle {
font-size: 0.9rem;
background-color: rgba(95, 174, 34, 0.3) !important;
}
.feature-item-glass strong {
display: block;
font-size: 0.84rem;
font-weight: 700;
color: #ffffff;
line-height: 1.25;
}
.feature-item-glass small {
font-size: 0.72rem;
color: #cbd5e1;
}
.hero-cta-group {
display: flex;
align-items: center;
gap: 14px;
}
/* Full Slider Arrows */
.full-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 50%;
background-color: rgba(11, 21, 38, 0.7);
border: 1.5px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: all 0.25s ease;
backdrop-filter: blur(8px);
}
.full-slider-btn:hover {
background-color: var(--color-green-primary);
color: #ffffff;
border-color: var(--color-green-primary);
transform: translateY(-50%) scale(1.08);
}
.prev-btn { left: 24px; }
.next-btn { right: 24px; }
/* Full Slider Pagination Dots */
.full-slider-pagination {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.p-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.35);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.p-dot.active {
background-color: var(--color-green-light);
width: 26px;
border-radius: 20px;
}
/* --------------------------------------------------------------------------
6.5 Lead Generation Quote & Calculator Section
-------------------------------------------------------------------------- */
.lead-quote-section {
padding: 84px 0 92px 0;
background-color: #ffffff;
border-bottom: 1px solid #e2e8f0;
}
.lead-quote-container {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 52px;
align-items: center;
}
.lead-quote-content {
display: flex;
flex-direction: column;
}
.lead-tagline {
display: inline-block;
font-size: 0.92rem;
font-weight: 700;
color: var(--color-green-primary);
margin-bottom: 14px;
letter-spacing: -0.01em;
}
.lead-main-title {
font-size: 2.85rem;
font-weight: 900;
color: #0b1526;
line-height: 1.15;
margin-bottom: 20px;
letter-spacing: -0.02em;
}
.text-gradient-green {
color: var(--color-green-light);
}
.lead-main-desc {
font-size: 1rem;
color: #475569;
line-height: 1.6;
margin-bottom: 36px;
max-width: 580px;
}
.lead-metrics-row {
display: flex;
align-items: center;
gap: 36px;
flex-wrap: wrap;
padding-top: 18px;
border-top: 1px solid #e2e8f0;
}
.metric-item {
display: flex;
flex-direction: column;
}
.metric-val {
font-size: 1.75rem;
font-weight: 800;
color: #0b1526;
line-height: 1.1;
margin-bottom: 3px;
}
.metric-lbl {
font-size: 0.82rem;
color: #64748b;
font-weight: 600;
}
/* Right Free Quote Form Card */
.lead-quote-card {
background-color: #0b1526;
border-radius: var(--radius-lg);
padding: 34px 30px;
box-shadow: 0 20px 45px rgba(11, 21, 38, 0.25);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.quote-card-header {
margin-bottom: 18px;
}
.quote-card-title {
font-size: 1.5rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.quote-card-subtitle {
font-size: 0.86rem;
color: #94a3b8;
}
/* Service Tabs */
.quote-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
background-color: rgba(255, 255, 255, 0.06);
padding: 5px;
border-radius: var(--radius-sm);
margin-bottom: 18px;
}
.quote-tab {
background: transparent;
border: none;
color: #94a3b8;
font-size: 0.92rem;
font-weight: 700;
padding: 9px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.2s ease;
}
.quote-tab.active {
background-color: var(--color-green-primary);
color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.lead-quote-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.quote-radius-banner {
display: flex;
align-items: center;
gap: 8px;
background: rgba(95, 174, 34, 0.12);
border: 1px solid rgba(95, 174, 34, 0.3);
padding: 8px 12px;
border-radius: var(--radius-sm);
color: #a3e635;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 2px;
line-height: 1.35;
}
.quote-radius-banner svg {
flex-shrink: 0;
color: #a3e635;
}
.quote-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 576px) {
.quote-form-grid {
grid-template-columns: 1fr;
}
}
.quote-input-group input,
.quote-input-group select,
.quote-input-group textarea {
width: 100%;
padding: 11px 14px;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-sm);
color: #ffffff;
font-size: 0.88rem;
outline: none;
transition: all 0.2s ease;
font-family: inherit;
}
.quote-input-group textarea {
resize: vertical;
min-height: 60px;
}
.quote-input-group input::placeholder,
.quote-input-group textarea::placeholder {
color: #94a3b8;
opacity: 1;
}
.quote-input-group select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
color: #94a3b8; /* Same placeholder color as inputs */
}
.quote-input-group select:focus,
.quote-input-group select.has-value,
.quote-input-group select:not([value=""]) {
background-image: url("data:image/svg+xml;utf8,");
}
.quote-input-group select option {
background-color: #0b1526;
color: #ffffff;
}
.quote-input-group select option[value=""] {
color: #94a3b8;
}
.quote-input-group input:focus,
.quote-input-group select:focus,
.quote-input-group textarea:focus {
border-color: var(--color-green-light);
background-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 3px rgba(95, 174, 34, 0.25);
color: #ffffff;
}
.btn-quote-submit {
width: 100%;
margin-top: 4px;
padding: 14px;
background: linear-gradient(90deg, #5fae22 0%, #6fb92c 100%);
color: #ffffff;
border: none;
border-radius: var(--radius-sm);
font-size: 1rem;
font-weight: 800;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(95, 174, 34, 0.35);
}
.btn-quote-submit:hover {
background: linear-gradient(90deg, #0b5d2b 0%, #5fae22 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.4);
}
/* Contact Form 7 specific adjustments in quote card */
.wpcf7-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.wpcf7-form .quote-radius-banner {
margin-bottom: 2px;
}
.wpcf7-form .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.wpcf7-form .quote-input-group {
position: relative;
width: 100%;
}
.wpcf7-form .btn-quote-submit {
display: block;
width: 100%;
text-align: center;
}
.wpcf7-form .wpcf7-not-valid-tip {
font-size: 0.75rem;
color: #f87171;
margin-top: 4px;
font-weight: 500;
}
.wpcf7-form .wpcf7-response-output {
border-radius: var(--radius-sm) !important;
padding: 12px 14px !important;
margin: 12px 0 0 0 !important;
font-size: 0.85rem !important;
text-align: center !important;
line-height: 1.4 !important;
}
.wpcf7-form.sent .wpcf7-response-output {
background: rgba(22, 163, 74, 0.2) !important;
border: 1px solid #16a34a !important;
color: #86efac !important;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
background: rgba(220, 38, 38, 0.2) !important;
border: 1px solid #dc2626 !important;
color: #fca5a5 !important;
}
.wpcf7-form .wpcf7-spinner {
margin: 8px auto 0 auto !important;
display: block !important;
}
.quote-card-footer {
margin-top: 14px;
text-align: center;
font-size: 0.82rem;
color: #94a3b8;
}
.quote-card-footer .direct-link {
color: #ffffff;
font-weight: 700;
text-decoration: underline;
transition: color 0.2s ease;
}
.quote-card-footer .direct-link:hover {
color: var(--color-green-light);
}
/* --------------------------------------------------------------------------
7. Services Section (9 Cards Grid)
-------------------------------------------------------------------------- */
.services-section {
padding: 84px 0 92px 0;
background-color: #f8fafc;
border-bottom: 1px solid #edf2f7;
}
.section-header {
margin-bottom: 40px;
}
/* 2 Main Service Division Cards */
.main-services-two-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 44px;
}
.main-service-box {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: var(--radius-lg);
padding: 36px 32px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
cursor: pointer;
}
.main-service-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: #eaf6ea;
color: #0b5d2b;
border: 1px solid rgba(111, 185, 44, 0.32);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-service-icon svg {
width: 30px;
height: 30px;
stroke: #0b5d2b;
stroke-width: 2;
transition: all 0.3s ease;
}
.main-service-box:hover .main-service-icon {
transform: scale(1.08) rotate(-4deg);
}
.main-service-title {
font-size: 1.6rem;
font-weight: 800;
color: #0b1526;
margin-bottom: 12px;
letter-spacing: -0.01em;
transition: color 0.3s ease;
}
.main-service-desc {
font-size: 0.95rem;
color: #475569;
line-height: 1.6;
margin-bottom: 22px;
flex: 1;
transition: color 0.3s ease;
}
.main-service-tags {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 26px;
}
.m-tag {
background-color: #f1f5f9;
color: #1e293b;
font-size: 0.8rem;
font-weight: 600;
padding: 5px 14px;
border-radius: var(--radius-full);
border: 1px solid #e2e8f0;
transition: all 0.25s ease;
}
.btn-main-service {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: var(--color-green-primary);
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
padding: 12px 24px;
border-radius: var(--radius-sm);
text-decoration: none;
align-self: flex-start;
transition: all 0.3s ease;
}
/* Active State (Green Card) - Switched on Hover */
.main-service-box.active-primary {
background-color: var(--color-green-primary);
border-color: var(--color-green-primary);
transform: translateY(-7px);
box-shadow: 0 20px 45px rgba(11, 93, 43, 0.28);
}
.main-service-box.active-primary .main-service-icon {
background-color: #ffffff;
color: var(--color-green-primary);
border-color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.main-service-box.active-primary .main-service-icon svg {
stroke: var(--color-green-primary);
}
.main-service-box.active-primary .main-service-title {
color: #ffffff;
}
.main-service-box.active-primary .main-service-desc {
color: #f1f5f9;
}
.main-service-box.active-primary .m-tag {
background-color: rgba(255, 255, 255, 0.16);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(4px);
}
.main-service-box.active-primary .btn-main-service {
background-color: #ffffff;
color: var(--color-green-primary);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
font-weight: 800;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-card {
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: var(--radius-md);
padding: 22px 20px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: var(--shadow-card);
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.service-card:hover {
background-color: var(--color-green-primary);
border-color: var(--color-green-primary);
transform: translateY(-5px);
box-shadow: 0 14px 28px rgba(11, 93, 43, 0.22);
}
.service-icon-circle {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: #eaf7db;
color: var(--color-green-primary);
transition: all 0.28s ease;
}
/* Light Green Icon Circles for all cards */
.service-icon-circle,
.icon-bg-yellow,
.icon-bg-blue,
.icon-bg-green,
.icon-bg-purple,
.icon-bg-amber,
.icon-bg-teal,
.icon-bg-rose,
.icon-bg-indigo,
.icon-bg-emerald {
background-color: #eaf7db;
color: var(--color-green-primary);
}
/* On Card Hover: Icon becomes White circle with Dark Green icon */
.service-card:hover .service-icon-circle,
.service-card:hover .icon-bg-yellow,
.service-card:hover .icon-bg-blue,
.service-card:hover .icon-bg-green,
.service-card:hover .icon-bg-purple,
.service-card:hover .icon-bg-amber,
.service-card:hover .icon-bg-teal,
.service-card:hover .icon-bg-rose,
.service-card:hover .icon-bg-indigo,
.service-card:hover .icon-bg-emerald {
background-color: #ffffff;
color: var(--color-green-primary);
transform: scale(1.1);
}
.service-card-body {
flex: 1;
}
.service-title {
font-size: 1.02rem;
font-weight: 700;
color: var(--color-text-title);
margin-bottom: 4px;
line-height: 1.35;
transition: color 0.28s ease;
}
.service-card:hover .service-title {
color: #ffffff;
}
.service-desc {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.4;
transition: color 0.28s ease;
}
.service-card:hover .service-desc {
color: #f1f5f9;
}
/* --------------------------------------------------------------------------
8. Dedicated Showcase Sections (Cleaning & Assembly)
-------------------------------------------------------------------------- */
.showcase-section {
padding: 84px 0;
border-bottom: 1px solid #e2e8f0;
}
#cleaning-section {
background-color: #ffffff;
}
.showcase-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 56px;
align-items: center;
}
.showcase-grid.reverse-grid {
grid-template-columns: 0.9fr 1.1fr;
}
.feature-box-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.feature-box-item {
display: flex;
align-items: flex-start;
gap: 16px;
background: #ffffff;
padding: 16px 20px;
border-radius: var(--radius-md);
border: 1px solid #e2e8f0;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.box-icon-wrap {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--color-green-primary);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.feature-box-item strong {
display: block;
font-size: 0.98rem;
font-weight: 700;
color: var(--color-text-title);
margin-bottom: 3px;
}
.feature-box-item p {
font-size: 0.86rem;
color: var(--color-text-muted);
line-height: 1.45;
}
/* Visual Card & Badges */
.visual-card-wrap {
position: relative;
border-radius: var(--radius-lg);
overflow: visible;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
border: 4px solid #ffffff;
}
.visual-img {
width: 100%;
border-radius: var(--radius-lg);
object-fit: cover;
display: block;
}
.floating-service-tag {
position: absolute;
background-color: #ffffff;
padding: 14px 20px;
border-radius: var(--radius-md);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
border: 1px solid #e2e8f0;
display: flex;
align-items: center;
gap: 12px;
z-index: 10;
}
.floating-service-tag.top-right {
top: -18px;
right: -18px;
}
.floating-service-tag.bottom-left {
bottom: -18px;
left: -18px;
}
.tag-icon {
font-size: 1.4rem;
}
.floating-service-tag strong {
display: block;
font-size: 0.92rem;
font-weight: 700;
color: var(--color-text-title);
}
.floating-service-tag small {
font-size: 0.76rem;
color: var(--color-text-muted);
}
/* --------------------------------------------------------------------------
9. Why Choose Us Section
-------------------------------------------------------------------------- */
.why-us-section {
padding: 84px 0 92px 0;
background-color: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.why-us-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.features-checklist {
display: flex;
flex-direction: column;
gap: 16px;
}
.features-checklist li {
display: flex;
align-items: center;
gap: 14px;
font-size: 0.98rem;
font-weight: 700;
color: var(--color-text-title);
}
.check-icon {
width: 22px;
height: 22px;
border-radius: 50%;
background-color: var(--color-green-primary);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.why-us-image-wrap {
position: relative;
}
.why-us-image-card {
position: relative;
border-radius: var(--radius-lg);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}
.why-img {
width: 100%;
border-radius: var(--radius-lg);
object-fit: cover;
display: block;
}
/* 100% Satisfaction Badge */
.floating-stat-badge {
position: absolute;
bottom: -20px;
left: -20px;
background-color: #ffffff;
padding: 22px 26px;
border-radius: var(--radius-md);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
border: 1px solid #e2e8f0;
max-width: 220px;
text-align: left;
}
.stat-number {
font-size: 2.3rem;
font-weight: 800;
color: var(--color-green-primary);
line-height: 1;
margin-bottom: 4px;
letter-spacing: -0.02em;
}
.stat-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text-title);
margin-bottom: 4px;
}
.stat-desc {
font-size: 0.78rem;
color: var(--color-text-muted);
line-height: 1.35;
}
/* --------------------------------------------------------------------------
10. Call to Action Banner
-------------------------------------------------------------------------- */
.cta-banner-section {
padding: 36px 0 64px 0;
}
.cta-banner-card {
background-color: #0b1526;
border-radius: var(--radius-md);
padding: 26px 38px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 16px 36px rgba(11, 21, 38, 0.22);
}
.cta-left {
display: flex;
align-items: center;
gap: 18px;
}
.cta-icon-pill {
width: 52px;
height: 52px;
border-radius: 50%;
background-color: var(--color-green-light);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cta-text h3 {
color: #ffffff;
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 2px;
letter-spacing: -0.01em;
}
.cta-text p {
color: #cbd5e1;
font-size: 0.9rem;
}
/* --------------------------------------------------------------------------
10. Blog & FAQ Sections
-------------------------------------------------------------------------- */
.blog-section {
padding: 84px 0 92px 0;
background-color: #ffffff;
border-bottom: 1px solid #e2e8f0;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.blog-card {
background-color: #ffffff;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: var(--shadow-card);
transition: all 0.25s ease;
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: var(--color-green-light);
}
.blog-img-wrap {
position: relative;
height: 200px;
overflow: hidden;
}
.blog-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.blog-card:hover .blog-img {
transform: scale(1.05);
}
.blog-category {
position: absolute;
top: 14px;
left: 14px;
background-color: var(--color-green-primary);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
padding: 4px 12px;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.blog-card-body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.blog-meta {
display: flex;
align-items: center;
gap: 14px;
font-size: 0.8rem;
color: var(--color-text-muted);
margin-bottom: 12px;
}
.blog-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text-title);
margin-bottom: 10px;
line-height: 1.35;
}
.blog-excerpt {
font-size: 0.88rem;
color: var(--color-text-body);
line-height: 1.5;
margin-bottom: 20px;
flex: 1;
}
.blog-read-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
font-weight: 700;
color: var(--color-green-primary);
transition: gap 0.2s ease;
}
.blog-read-more:hover {
color: var(--color-green-light);
gap: 10px;
}
.blog-bottom-action {
display: flex;
justify-content: center;
align-items: center;
margin-top: 42px;
}
.btn-blog-center {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 32px;
background-color: var(--color-green-primary);
color: #ffffff;
font-size: 0.95rem;
font-weight: 800;
border-radius: var(--radius-sm);
border: none;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(11, 93, 43, 0.25);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-blog-center:hover {
background-color: var(--color-green-primary-hover);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(11, 93, 43, 0.38);
color: #ffffff;
}
.btn-blog-center svg {
transition: transform 0.25s ease;
}
.btn-blog-center:hover svg {
transform: translateX(4px);
}
/* --------------------------------------------------------------------------
10b. Reviews / Testimonials Section (München vertraut MBK)
-------------------------------------------------------------------------- */
.reviews-section {
padding: 85px 0 92px 0;
background-color: #ffffff;
border-top: 1px solid #eef2f6;
border-bottom: 1px solid #eef2f6;
}
.reviews-layout {
display: grid;
grid-template-columns: minmax(0, 68%) minmax(0, calc(32% - 24px)); /* 70% Left, 30% Right */
gap: 24px;
align-items: stretch; /* Both boxes stretch to identical equal height */
width: 100%;
}
/* Service Area Box (München & Umgebung with Map - 70% Width) */
.service-area-box {
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 22px;
padding: 32px 30px 26px 30px;
box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
min-width: 0;
box-sizing: border-box;
}
.area-box-header {
margin-bottom: 18px;
}
.area-badge {
background-color: rgba(111, 185, 44, 0.12);
color: #15803d;
font-weight: 800;
font-size: 0.78rem;
padding: 6px 16px;
border-radius: 20px;
display: inline-block;
letter-spacing: 0.06em;
margin-bottom: 8px;
border: 1px solid rgba(111, 185, 44, 0.28);
}
.area-main-title {
font-size: 2.1rem;
font-weight: 800;
color: #0b1f3a;
line-height: 1.15;
margin: 0;
letter-spacing: -0.02em;
}
.area-box-body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
position: relative;
width: 100%;
flex: 1;
}
.area-districts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 14px;
flex: 1;
min-width: 0;
z-index: 2;
}
.area-col {
display: flex;
flex-direction: column;
gap: 11px;
min-width: 0;
}
.area-item {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.92rem;
font-weight: 700;
color: #0f172a;
transition: all 0.2s ease;
white-space: nowrap;
width: 100%;
background: none;
border: none;
cursor: pointer;
text-align: left;
padding: 6px 8px;
border-radius: 10px;
font-family: inherit;
}
.area-city-btn:hover {
background-color: rgba(111, 185, 44, 0.12);
color: #15803d;
transform: translateX(3px);
}
.area-city-btn.active {
background-color: rgba(111, 185, 44, 0.18);
color: #15803d;
font-weight: 800;
}
.area-city-btn.active .area-pin-icon {
background-color: #15803d;
color: #ffffff;
}
.area-pin-icon {
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #f1f5f9;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.area-name {
overflow: hidden;
text-overflow: ellipsis;
}
/* Right Interactive Google Map Graphic */
.area-map-graphic {
position: relative;
width: 320px;
height: 240px;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
border: 1px solid #e2e8f0;
flex-shrink: 0;
z-index: 1;
}
.google-map-iframe {
width: 100%;
height: 100%;
border: 0;
filter: saturate(1.1) contrast(1.05);
display: block;
transition: transform 0.4s ease;
}
.map-center-badge {
position: absolute;
top: 14px;
left: 14px;
background-color: rgba(15, 23, 42, 0.88);
backdrop-filter: blur(8px);
color: #ffffff;
font-size: 0.82rem;
font-weight: 700;
padding: 6px 14px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 8px;
z-index: 5;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.map-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #22c55e;
box-shadow: 0 0 8px #22c55e;
display: inline-block;
animation: livePulse 2s infinite;
}
@keyframes livePulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
.map-center-pin-marker {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
z-index: 6;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pin-svg-icon {
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
animation: pinFloatBounce 2.4s ease-in-out infinite;
}
.pin-radar-ring {
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 22px;
height: 10px;
border-radius: 50%;
background: rgba(22, 163, 74, 0.4);
box-shadow: 0 0 12px rgba(22, 163, 74, 0.6);
animation: radarRingWave 2s infinite;
}
@keyframes pinFloatBounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
@keyframes radarRingWave {
0% {
transform: translateX(-50%) scale(0.6);
opacity: 0.9;
}
70% {
transform: translateX(-50%) scale(1.8);
opacity: 0;
}
100% {
transform: translateX(-50%) scale(2);
opacity: 0;
}
}
.area-box-footer {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid #f1f5f9;
}
.area-view-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #15803d;
font-weight: 800;
font-size: 0.92rem;
text-decoration: none;
transition: gap 0.2s ease, color 0.2s ease;
}
.area-view-link:hover {
color: #0f172a;
gap: 12px;
}
.area-view-link svg {
transition: transform 0.2s ease;
}
.area-view-link:hover svg {
transform: translateX(4px);
}
/* Right Column: Reviews Carousel (30% Width, Equal Height) */
.reviews-carousel-wrapper {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.reviews-track-container {
overflow: hidden;
width: 100%;
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
padding: 6px 4px; /* Space for hover lift & shadows so border never clips */
margin: -6px -4px;
box-sizing: border-box;
}
.reviews-track {
display: flex;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
height: 100%;
flex: 1;
}
.reviews-slide {
min-width: 100%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
box-sizing: border-box;
padding: 2px 2px;
}
.review-quote-card {
background-color: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 16px;
padding: 18px 22px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
box-sizing: border-box;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.review-quote-card:hover {
background-color: #ffffff;
transform: translateY(-2px);
border-color: #6fb92c;
box-shadow: 0 8px 24px rgba(11, 93, 43, 0.12);
}
.review-quote-text {
font-size: 0.88rem;
color: #334155;
line-height: 1.48;
margin: 0;
}
.review-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.reviewer-name {
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.reviewer-location {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
margin-top: 3px;
}
.review-stars {
display: flex;
align-items: center;
gap: 3px;
color: #ea580c;
font-size: 0.95rem;
}
/* Carousel Controls */
.reviews-carousel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 12px;
padding-top: 2px;
}
.rev-ctrl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #e2e8f0;
color: #334155;
cursor: pointer;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
transition: all 0.2s ease;
}
.rev-ctrl-btn:hover {
background-color: var(--color-green-primary);
color: #ffffff;
border-color: var(--color-green-primary);
transform: scale(1.08);
}
.rev-dots {
display: flex;
align-items: center;
gap: 8px;
}
.rev-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #cbd5e1;
border: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
}
.rev-dot:hover {
background-color: #94a3b8;
}
.rev-dot.active {
width: 24px;
border-radius: 6px;
background-color: var(--color-green-primary);
}
/* FAQ Section */
.faq-section {
padding: 84px 0 92px 0;
background-color: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.faq-container {
max-width: 880px;
}
.faq-accordion-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.faq-item {
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item.active {
border-color: var(--color-green-light);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 24px;
background: none;
border: none;
text-align: left;
font-size: 1.02rem;
font-weight: 700;
color: var(--color-text-title);
cursor: pointer;
transition: color 0.2s ease;
}
.faq-question:hover {
color: var(--color-green-primary);
}
.faq-item.active .faq-question {
color: var(--color-green-primary);
}
.faq-icon {
flex-shrink: 0;
transition: transform 0.3s ease;
color: var(--color-green-primary);
}
.faq-item.active .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
padding: 0 24px;
}
.faq-item.active .faq-answer {
max-height: 800px;
padding: 0 24px 20px 24px;
}
.faq-answer p {
font-size: 0.92rem;
color: var(--color-text-body);
line-height: 1.6;
}
/* --------------------------------------------------------------------------
11. Footer
-------------------------------------------------------------------------- */
.site-footer,
.footer {
position: relative;
background: linear-gradient(135deg, rgba(8, 16, 30, 0.93) 0%, rgba(11, 21, 38, 0.96) 100%),
url('../images/cleaning-service.jpg') center center / cover no-repeat;
color: #94a3b8;
padding: 72px 0 0 0;
width: 100%;
}
.footer-grid {
display: grid;
grid-template-columns: 1.35fr 0.85fr 1.15fr 1.15fr 1fr;
gap: 28px;
margin-bottom: 52px;
}
.footer-logo,
.brand-logo.footer-logo {
margin-bottom: 16px;
display: inline-block;
max-width: 260px;
}
.footer-logo img,
.footer-logo .logo-img,
.brand-logo.footer-logo img,
.brand-logo.footer-logo .logo-img {
height: 70px !important;
max-height: 70px !important;
max-width: 260px !important;
width: auto !important;
object-fit: contain !important;
display: block !important;
}
.footer-bio {
font-size: 0.9rem;
color: #94a3b8;
line-height: 1.6;
max-width: 280px;
}
.footer-heading {
font-size: 1.05rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 18px;
}
.footer-links li,
.footer-links-check li {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 0.9rem;
}
.footer-links li svg,
.footer-links-check li svg {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.footer-links li:hover svg,
.footer-links-check li:hover svg {
transform: translateX(3px);
}
.footer-links a,
.footer-links-check a {
transition: color 0.2s ease;
}
.footer-links a:hover,
.footer-links-check a:hover {
color: var(--color-green-light);
}
.footer-contact-list li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
font-size: 0.9rem;
}
.footer-contact-list a:hover {
color: var(--color-green-light);
}
.footer-socials {
display: flex;
align-items: center;
gap: 12px;
margin-top: 18px;
}
.footer-socials a {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.08);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.footer-socials a:hover {
background-color: var(--color-green-primary);
color: #ffffff;
transform: translateY(-2px);
}
.footer-bottom {
background: linear-gradient(90deg, #5fae22 0%, #6fb92c 100%);
padding: 18px 0;
border-top: 1px solid rgba(255, 255, 255, 0.25);
font-size: 0.86rem;
font-weight: 600;
color: #ffffff;
}
.footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-bottom p {
color: #ffffff;
}
.footer-legal {
display: flex;
align-items: center;
gap: 12px;
}
.footer-legal a {
color: #ffffff;
transition: opacity 0.2s ease;
}
.footer-legal a:hover {
color: #ffffff;
opacity: 0.85;
text-decoration: underline;
}
/* --------------------------------------------------------------------------
12. Modal Popup
-------------------------------------------------------------------------- */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
padding: 20px;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-card {
background-color: #ffffff;
width: 100%;
max-width: 520px;
border-radius: var(--radius-lg);
padding: 32px 28px;
position: relative;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
max-height: 90vh;
overflow-y: auto;
}
.modal-close {
position: absolute;
top: 18px;
right: 18px;
background: #f1f5f9;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 1.3rem;
cursor: pointer;
color: #1e293b;
transition: all 0.2s ease;
}
.modal-close:hover {
background-color: #e2e8f0;
}
.modal-header {
text-align: center;
margin-bottom: 22px;
}
.modal-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--color-green-tint);
color: var(--color-green-primary);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px auto;
}
.modal-header h3 {
font-size: 1.35rem;
font-weight: 800;
color: var(--color-text-title);
margin-bottom: 4px;
}
.booking-form .form-group {
margin-bottom: 14px;
}
.booking-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.booking-form label {
display: block;
font-size: 0.82rem;
font-weight: 700;
color: var(--color-text-title);
margin-bottom: 5px;
}
.booking-form input,
.booking-form select,
.booking-form textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: var(--radius-sm);
font-size: 0.9rem;
outline: none;
background-color: #ffffff;
color: var(--color-text-title);
font-family: inherit;
box-sizing: border-box;
transition: all 0.2s ease;
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus,
.booking-form .wpcf7-form-control:focus {
border-color: var(--color-green-primary);
box-shadow: 0 0 0 3px rgba(11, 93, 43, 0.15);
}
/* Custom Select Dropdown in Modal Form */
.custom-select-wrapper {
position: relative;
width: 100%;
}
.sr-only-select {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.custom-select-trigger {
width: 100%;
min-height: 42px;
padding: 7px 12px;
border: 1px solid #cbd5e1;
border-radius: var(--radius-sm);
background-color: #ffffff;
color: var(--color-text-title);
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
font-size: 0.9rem;
box-sizing: border-box;
}
.custom-select-trigger:focus,
.custom-select-wrapper.open .custom-select-trigger {
border-color: var(--color-green-primary);
box-shadow: 0 0 0 3px rgba(11, 93, 43, 0.15);
outline: none;
}
.custom-select-selected {
display: flex;
align-items: center;
gap: 9px;
overflow: hidden;
white-space: nowrap;
min-width: 0;
}
.custom-select-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 6px;
background-color: var(--color-green-tint);
color: var(--color-green-primary);
flex-shrink: 0;
}
.custom-select-icon svg {
width: 15px;
height: 15px;
}
.custom-select-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
font-size: 0.88rem;
color: #1e293b;
}
.custom-select-arrow {
color: #64748b;
transition: transform 0.25s ease;
flex-shrink: 0;
margin-left: 6px;
}
.custom-select-wrapper.open .custom-select-arrow {
transform: rotate(180deg);
color: var(--color-green-primary);
}
.custom-select-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.05);
max-height: 230px;
overflow-y: auto;
z-index: 1050;
padding: 6px;
margin: 0;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.custom-select-dropdown::-webkit-scrollbar {
width: 6px;
}
.custom-select-dropdown::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.custom-select-dropdown::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.custom-select-wrapper.open .custom-select-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.custom-select-option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 7px;
cursor: pointer;
transition: all 0.15s ease;
font-size: 0.86rem;
color: #334155;
font-weight: 500;
}
.custom-select-option:hover {
background-color: #f1f5f9;
color: #0f172a;
}
.custom-select-option.active {
background-color: var(--color-green-tint);
color: var(--color-green-primary);
font-weight: 700;
}
.custom-select-option .option-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background-color: var(--color-green-tint);
color: var(--color-green-primary);
flex-shrink: 0;
transition: all 0.15s ease;
}
.custom-select-option.active .option-icon,
.custom-select-option:hover .option-icon {
background-color: var(--color-green-primary);
color: #ffffff;
}
.custom-select-option .option-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.booking-form .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.booking-form .wpcf7-not-valid-tip {
font-size: 0.78rem;
color: #dc2626;
margin-top: 4px;
font-weight: 600;
}
.booking-form .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output {
margin: 14px 0 0 0 !important;
padding: 12px 16px !important;
border-radius: var(--radius-sm) !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
text-align: center !important;
}
.booking-form form.sent .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
border: 1px solid #16a34a !important;
background-color: #f0fdf4 !important;
color: #15803d !important;
}
.booking-form form.invalid .wpcf7-response-output,
.booking-form form.unaccepted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
border: 1px solid #ef4444 !important;
background-color: #fef2f2 !important;
color: #b91c1c !important;
}
.booking-form .wpcf7-spinner {
margin: 10px auto 0 auto;
display: block;
}
.btn-full {
width: 100%;
margin-top: 8px;
padding: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* --------------------------------------------------------------------------
13. Floating Items
-------------------------------------------------------------------------- */
.floating-whatsapp {
position: fixed;
bottom: 26px;
right: 26px;
width: 60px;
height: 60px;
background: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 8px 20px rgba(37, 211, 102, 0.45));
z-index: 990;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.floating-whatsapp:hover {
transform: scale(1.12);
}
.whatsapp-btn-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.social-wa-img {
width: 15px;
height: 15px;
object-fit: contain;
display: block;
}
.whatsapp-tooltip {
position: absolute;
right: 68px;
background-color: #0b1526;
color: #ffffff;
font-size: 0.78rem;
font-weight: 600;
padding: 6px 12px;
border-radius: var(--radius-sm);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
.floating-whatsapp:hover .whatsapp-tooltip {
opacity: 1;
visibility: visible;
}
.back-to-top {
position: fixed;
bottom: 88px;
right: 28px;
width: 42px;
height: 42px;
background-color: #0b1526;
color: #ffffff;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.25s ease;
z-index: 980;
}
.back-to-top:hover {
background-color: var(--color-green-primary);
color: #ffffff;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
/* --------------------------------------------------------------------------
14. Responsive Breakpoints (Mobile, Tablet & Desktop)
-------------------------------------------------------------------------- */
/* Laptops & Tablets Landscape (<= 1024px) */
@media (max-width: 1024px) {
.container {
padding: 0 20px;
}
/* Navbar Tablet */
.navbar-container {
height: 88px;
}
.brand-logo .logo-img {
height: 74px;
}
.mobile-toggle {
display: flex;
align-items: center;
justify-content: center;
}
.nav-menu {
position: fixed;
top: 88px;
left: -100%;
width: 100%;
height: calc(100vh - 88px);
background-color: #ffffff;
flex-direction: column;
align-items: flex-start;
padding: 30px 24px;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.nav-menu.open {
left: 0;
}
.nav-list {
flex-direction: column;
align-items: flex-start;
gap: 16px;
width: 100%;
}
.nav-item {
width: 100%;
}
.nav-link {
font-size: 1.15rem;
display: block;
width: 100%;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
color: #1e293b;
}
.nav-link.dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
/* Mobile / Tablet Dropdown Sub-menu */
.dropdown-menu {
position: static;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
box-shadow: none;
border: 1px solid #e2e8f0;
background-color: #f8fafc;
border-radius: var(--radius-sm);
padding: 6px 8px;
margin: 8px 0 12px 0;
min-width: 100%;
display: none;
}
.nav-item.has-dropdown.open .dropdown-menu {
display: block;
}
.nav-item.has-dropdown.open .dropdown-chevron {
transform: rotate(180deg);
}
.nav-mobile-cta {
display: block;
margin-top: 24px;
width: 100%;
}
.nav-mobile-cta .btn-phone {
display: flex;
justify-content: center;
width: 100%;
padding: 13px;
font-size: 1rem;
}
/* Hero Slider Tablet */
.hero-slider-section,
.hero-slider-main {
min-height: 560px;
}
.slide-container {
padding: 48px 20px;
}
.lead-quote-container {
grid-template-columns: 1fr;
gap: 40px;
}
.lead-main-title {
font-size: 2.3rem;
}
/* Grids on Tablet */
.services-grid,
.blog-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.showcase-grid,
.showcase-grid.reverse-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.reviews-layout {
grid-template-columns: 1fr;
gap: 36px;
}
.why-us-container {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 36px;
}
}
/* Tablets Portrait & Large Mobile (<= 768px) */
@media (max-width: 768px) {
.container {
padding: 0 18px;
}
/* Topbar Mobile */
.topbar-left {
display: none;
}
.topbar-container {
justify-content: space-between;
width: 100%;
}
/* Navbar Mobile */
.navbar-container {
height: 82px;
}
.brand-logo .logo-img {
height: 66px;
}
.nav-menu {
top: 82px;
height: calc(100vh - 82px);
}
.header-action .btn-phone {
display: none;
}
/* Hero Slider Mobile */
.hero-slider-section {
min-height: auto;
height: auto;
display: block;
}
.hero-slider-main {
min-height: auto;
height: auto;
display: block;
position: relative;
}
.full-slide {
position: relative;
top: auto;
left: auto;
width: 100%;
min-height: 520px;
display: none;
opacity: 0;
visibility: hidden;
}
.full-slide.active {
display: flex;
opacity: 1;
visibility: visible;
align-items: center;
}
.slide-container {
padding: 44px 18px 76px 18px;
}
.slide-anim-title {
font-size: 2.15rem;
line-height: 1.18;
margin-bottom: 14px;
}
.slide-anim-desc {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 20px;
}
.badge-pill {
padding: 5px 12px;
font-size: 0.72rem;
margin-bottom: 16px;
}
.hero-features-row {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 22px;
}
.feature-item-glass {
padding: 8px 12px;
}
.hero-cta-group {
flex-direction: column;
width: 100%;
gap: 10px;
margin-bottom: 16px;
}
.hero-cta-group .btn {
width: 100%;
padding: 13px 20px;
font-size: 0.95rem;
}
.full-slider-btn {
display: none;
}
.full-slider-pagination {
bottom: 20px;
z-index: 20;
}
/* Section Spacings & Typography */
.services-section,
.showcase-section,
.why-us-section,
.blog-section,
.reviews-section,
.faq-section {
padding: 56px 0 64px 0;
}
.reviews-layout {
grid-template-columns: 1fr;
gap: 36px;
}
.reviews-main-title {
font-size: 1.85rem;
}
.review-quote-card {
padding: 20px 22px;
}
.section-title {
font-size: 1.85rem;
}
.section-subtitle {
font-size: 0.92rem;
}
/* Grids on Mobile */
.main-services-two-cols {
grid-template-columns: 1fr;
gap: 18px;
}
.main-service-box {
padding: 26px 20px;
}
.services-grid,
.blog-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.service-card {
padding: 18px 16px;
}
.floating-service-tag,
.floating-stat-badge {
position: static;
margin-top: 16px;
max-width: 100%;
}
/* CTA Banner Mobile */
.cta-banner-section {
padding: 24px 0 48px 0;
}
.cta-banner-card {
flex-direction: column;
text-align: center;
padding: 28px 20px;
gap: 20px;
}
.cta-left {
flex-direction: column;
text-align: center;
gap: 12px;
}
.cta-right, .cta-right .btn {
width: 100%;
}
/* Footer Mobile & Tablets (50% 50% Two-Column Layout) */
.footer-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 28px 18px !important;
}
.footer-col-brand {
grid-column: 1 / -1 !important;
}
.footer-bio {
max-width: 100% !important;
}
.footer-bottom-inner {
flex-direction: column;
gap: 12px;
text-align: center;
}
.modal-card {
padding: 24px 18px;
}
.booking-form .form-row {
grid-template-columns: 1fr;
}
.faq-question {
padding: 16px 18px;
font-size: 0.95rem;
}
.faq-answer {
padding: 0 18px;
}
.faq-item.active .faq-answer {
padding: 0 18px 18px 18px;
}
}
/* Small Mobile Phones (<= 480px) */
@media (max-width: 480px) {
.container {
padding: 0 16px;
}
.topbar-wrapper {
font-size: 0.76rem;
padding: 5px 0;
}
.topbar-socials {
gap: 7px;
margin-right: 6px;
}
.topbar-social-link {
width: 23px;
height: 23px;
}
.navbar-container {
height: 68px;
}
.header-action {
gap: 8px;
}
.lang-badge {
height: 38px;
padding: 0 10px;
font-size: 0.78rem;
gap: 5px;
}
.header-search-btn {
width: 38px;
height: 38px;
}
.brand-logo .logo-img {
height: 58px;
}
.nav-menu {
top: 76px;
height: calc(100vh - 76px);
}
.slide-anim-title {
font-size: 1.75rem;
}
.slide-anim-desc {
font-size: 0.88rem;
}
.section-title {
font-size: 1.6rem;
}
.service-icon-circle {
width: 46px;
height: 46px;
}
.floating-whatsapp {
bottom: 18px;
right: 18px;
width: 48px;
height: 48px;
}
.back-to-top {
bottom: 74px;
right: 20px;
width: 38px;
height: 38px;
}
}
/* ==========================================================================
14. About Us Page Styles
========================================================================== */
.page-half-banner {
position: relative;
padding: 75px 0 65px 0;
background: linear-gradient(90deg, rgba(11, 31, 20, 0.96) 0%, rgba(16, 45, 29, 0.90) 45%, rgba(16, 45, 29, 0.55) 100%),
url('../images/mover-loading.jpg') center right / cover no-repeat;
color: #ffffff;
overflow: hidden;
border-bottom: 3px solid #6fb92c;
}
.page-half-banner.clean-page-half-banner {
background: linear-gradient(90deg, rgba(11, 31, 20, 0.96) 0%, rgba(16, 45, 29, 0.90) 45%, rgba(16, 45, 29, 0.55) 100%),
url('../images/cleaning-service.jpg') center right / cover no-repeat;
}
.banner-content-left {
text-align: left;
max-width: 750px;
position: relative;
z-index: 2;
}
.banner-page-title {
font-size: 3rem;
font-weight: 800;
color: #ffffff;
margin: 0 0 14px 0;
letter-spacing: -0.02em;
line-height: 1.15;
}
.banner-breadcrumb {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
font-weight: 500;
color: #cbd5e1;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 8px 18px;
border-radius: 30px;
}
.banner-breadcrumb a {
color: #6fb92c;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 0.2s ease;
}
.banner-breadcrumb a:hover {
color: #ffffff;
text-decoration: underline;
}
.banner-breadcrumb .breadcrumb-arrow {
color: rgba(255, 255, 255, 0.45);
font-size: 0.9rem;
}
.banner-breadcrumb .current-page {
color: #ffffff;
font-weight: 600;
}
/* About Stats Counter Bar */
.about-stats-bar {
background: #ffffff;
padding: 70px 0 80px 0;
border-bottom: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.about-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 15px;
}
.about-stat-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 22px 18px;
text-align: center;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.about-stat-card:hover {
transform: translateY(-3px);
border-color: #6fb92c;
box-shadow: 0 10px 24px rgba(111, 185, 44, 0.1);
background: #ffffff;
}
.about-stat-num {
font-size: 2.1rem;
font-weight: 800;
color: #6fb92c;
margin-bottom: 4px;
line-height: 1.1;
}
.about-stat-label {
font-size: 0.88rem;
font-weight: 600;
color: #475569;
}
/* About Story Section */
.about-story-section {
padding: 80px 0;
background: #ffffff;
border-bottom: 1px solid #f1f5f9;
}
.about-story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-image-card {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.about-carousel {
position: relative;
width: 100%;
height: 480px;
overflow: hidden;
border-radius: 20px;
background: #0f172a;
}
.about-carousel-slides {
position: relative;
width: 100%;
height: 100%;
}
.about-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.75s ease, transform 0.75s ease;
transform: scale(1.04);
z-index: 1;
}
.about-slide.active {
opacity: 1;
visibility: visible;
transform: scale(1);
z-index: 2;
}
.about-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.about-slide-tag {
position: absolute;
top: 18px;
right: 18px;
background: rgba(16, 45, 29, 0.9);
backdrop-filter: blur(8px);
color: #6fb92c;
font-weight: 700;
font-size: 0.84rem;
padding: 7px 16px;
border-radius: 20px;
border: 1px solid rgba(111, 185, 44, 0.45);
z-index: 5;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.about-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(6px);
border: none;
display: flex;
align-items: center;
justify-content: center;
color: #0f172a;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.about-carousel-btn:hover {
background: #6fb92c;
color: #ffffff;
transform: translateY(-50%) scale(1.1);
}
.about-carousel-btn.prev-btn {
left: 14px;
}
.about-carousel-btn.next-btn {
right: 14px;
}
.about-carousel-dots {
position: absolute;
bottom: 22px;
right: 22px;
display: flex;
gap: 7px;
z-index: 10;
}
.about-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
padding: 0;
transition: all 0.3s ease;
}
.about-dot.active {
width: 24px;
border-radius: 10px;
background: #6fb92c;
}
.about-exp-badge {
position: absolute;
bottom: 24px;
left: 24px;
background: rgba(16, 45, 29, 0.92);
backdrop-filter: blur(10px);
border: 1px solid rgba(111, 185, 44, 0.4);
padding: 16px 20px;
border-radius: 14px;
color: #ffffff;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
z-index: 12;
}
.about-exp-badge .badge-icon {
font-size: 1.8rem;
}
.about-exp-badge strong {
display: block;
font-size: 1.2rem;
color: #6fb92c;
}
.about-exp-badge span {
font-size: 0.82rem;
color: #cbd5e1;
}
.story-lead-p {
font-size: 1.05rem;
line-height: 1.7;
color: #475569;
margin-bottom: 24px;
}
/* Three Pillars: Mission, Values, Promise */
.pillars-section {
padding: 70px 0 80px 0;
background: #f8fafc;
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 10px;
}
.pillar-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 22px;
padding: 38px 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.pillar-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 32px rgba(111, 185, 44, 0.09);
border-color: rgba(111, 185, 44, 0.4);
}
.pillar-icon-box {
width: 60px;
height: 60px;
border-radius: 16px;
background: rgba(95, 174, 34, 0.12);
border: 1px solid rgba(95, 174, 34, 0.25);
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
transition: all 0.3s ease;
}
.pillar-card:hover .pillar-icon-box {
background: #0b5d2b;
color: #ffffff;
transform: scale(1.08) rotate(3deg);
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.22);
}
.pillar-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.pillar-title {
font-size: 1.4rem;
font-weight: 800;
color: #0f172a;
margin: 0 0 12px 0;
letter-spacing: -0.01em;
}
.pillar-desc {
font-size: 0.98rem;
line-height: 1.65;
color: #64748b;
margin: 0;
}
opacity: 0;
transition: opacity 0.3s ease;
}
.value-card:hover {
background: #ffffff;
border-color: #cbd5e1;
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
}
.value-card:hover::before {
opacity: 1;
}
.value-icon-circle {
width: 52px;
height: 52px;
background: rgba(111, 185, 44, 0.12);
color: #6fb92c;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 18px;
}
.value-card h3 {
font-size: 1.15rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 10px;
}
.value-card p {
font-size: 0.9rem;
line-height: 1.6;
color: #64748b;
margin: 0;
}
/* Process Section */
.process-section {
padding: 80px 0;
background: #f1f5f9;
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 40px;
position: relative;
}
.process-step-card {
background: #ffffff;
border-radius: 16px;
padding: 32px 22px;
text-align: center;
.cat-name {
display: flex;
align-items: center;
gap: 10px;
}
.cat-icon-svg {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #0b5d2b;
flex-shrink: 0;
transition: all 0.2s ease;
}
.widget-cat-list li a:hover .cat-icon-svg {
color: #084822;
transform: scale(1.1);
}
.cat-count {
padding: 2px 8px;
background: #ffffff;
border-radius: 12px;
font-size: 0.78rem;
color: #64748b;
border: 1px solid #e2e8f0;
}
border: 1px solid #e2e8f0;
position: relative;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease;
}
.process-step-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}
.step-number {
position: absolute;
top: 14px;
right: 18px;
font-size: 1.6rem;
font-weight: 900;
color: #e2e8f0;
}
.step-icon-circle {
width: 58px;
height: 58px;
background: #102d1d;
color: #6fb92c;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin: 0 auto 20px auto;
border: 2px solid #6fb92c;
}
.process-step-card h3 {
font-size: 1.1rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 8px;
}
.process-step-card p {
font-size: 0.88rem;
line-height: 1.55;
color: #64748b;
margin: 0;
}
/* Responsive adjustments for About Page */
@media (max-width: 991px) {
.about-hero-title {
font-size: 2.2rem;
}
.about-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.about-story-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.about-image-card img {
height: 380px;
}
.pillars-grid,
.process-grid {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
}
@media (max-width: 640px) {
.about-hero-title {
font-size: 1.8rem;
}
.about-hero-desc {
font-size: 0.95rem;
}
.about-stats-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.about-stat-num {
font-size: 1.7rem;
}
.pillars-grid,
.process-grid {
grid-template-columns: 1fr;
}
.area-box-body {
flex-direction: column-reverse;
align-items: flex-start;
}
.area-districts-grid {
grid-template-columns: repeat(2, 1fr);
width: 100%;
}
.area-map-graphic {
margin: 0 auto 10px auto;
}
}
/* ==========================================================================
Möbelmontage & Demontage Showcase Section (Theme Green Palette)
========================================================================== */
.assembly-section {
padding: 95px 0;
background-color: #f8fafc;
border-top: 1px solid #eef2f6;
border-bottom: 1px solid #eef2f6;
position: relative;
}
.assembly-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 56px;
align-items: center;
}
.assembly-visual-wrap {
position: relative;
}
.assembly-image-card {
position: relative;
border-radius: 24px;
background: #ffffff;
}
.assembly-img {
width: 100%;
height: 480px;
object-fit: cover;
border-radius: 24px;
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
display: block;
}
.assembly-floating-badge {
position: absolute;
bottom: 24px;
left: 24px;
background: #ffffff;
padding: 14px 22px;
border-radius: 16px;
display: inline-flex;
align-items: center;
gap: 14px;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04);
border: 1px solid #f1f5f9;
z-index: 2;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.assembly-floating-badge:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
}
.assembly-badge-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: #eaf6ea;
border: 1px solid rgba(111, 185, 44, 0.25);
display: flex;
align-items: center;
justify-content: center;
color: #0b5d2b;
flex-shrink: 0;
}
.assembly-badge-text strong {
display: block;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
line-height: 1.3;
}
.assembly-badge-text span {
display: block;
font-size: 0.78rem;
color: #64748b;
margin-top: 2px;
line-height: 1.2;
}
.assembly-tagline {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 800;
color: #0b5d2b;
background: #eaf6ea;
padding: 5px 14px;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 14px;
border: 1px solid rgba(111, 185, 44, 0.2);
}
.tagline-slash {
color: #6fb92c;
font-weight: 900;
font-size: 1rem;
}
.assembly-title {
font-size: 2.35rem;
font-weight: 800;
color: #0f172a;
line-height: 1.25;
margin-bottom: 16px;
letter-spacing: -0.025em;
}
.assembly-desc {
font-size: 0.98rem;
color: #64748b;
line-height: 1.65;
margin-bottom: 28px;
max-width: 560px;
}
.assembly-cards-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 32px;
}
.assembly-card-item {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 16px 20px;
display: flex;
align-items: flex-start;
gap: 16px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.assembly-card-item:hover {
border-color: #6fb92c;
background: #fafdf7;
transform: translateX(4px);
box-shadow: 0 8px 22px rgba(11, 93, 43, 0.08);
}
.assembly-check-icon {
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, #6fb92c 0%, #0b5d2b 100%);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
box-shadow: 0 3px 8px rgba(111, 185, 44, 0.35);
}
.assembly-card-body {
flex: 1;
}
.assembly-card-heading {
font-size: 0.98rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 3px;
line-height: 1.35;
transition: color 0.2s ease;
}
.assembly-card-item:hover .assembly-card-heading {
color: #0b5d2b;
}
.assembly-card-sub {
font-size: 0.84rem;
color: #64748b;
line-height: 1.45;
margin: 0;
}
.btn-assembly-action {
background: #0b5d2b;
color: #ffffff;
font-weight: 700;
font-size: 0.95rem;
padding: 15px 32px;
border-radius: 12px;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 8px 24px rgba(11, 93, 43, 0.28);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
}
.btn-assembly-action:hover {
background: #084822;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(11, 93, 43, 0.38);
}
.btn-assembly-action svg {
transition: transform 0.25s ease;
}
.btn-assembly-action:hover svg {
transform: translateX(4px);
}
@media (max-width: 991px) {
.assembly-section {
padding: 65px 0;
}
.assembly-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.assembly-img {
height: 380px;
}
.assembly-title {
font-size: 1.95rem;
}
}
@media (max-width: 640px) {
.assembly-img {
height: 280px;
}
.assembly-floating-badge {
bottom: 14px;
left: 14px;
right: 14px;
padding: 10px 14px;
gap: 10px;
}
.assembly-title {
font-size: 1.6rem;
}
.assembly-desc {
font-size: 0.9rem;
}
.btn-assembly-action {
width: 100%;
justify-content: center;
}
}
/* ==========================================================================
Process / How It Works (4-Steps Stepper Section)
========================================================================== */
.process-steps-section {
padding: 85px 0 95px 0;
background: #ffffff;
position: relative;
border-top: 1px solid #f1f5f9;
}
.process-header {
margin-bottom: 52px;
}
.steps-timeline-wrap {
position: relative;
}
/* Connected Horizontal Timeline Line (Seamless touching from Circle 1 to 4 with trailing fade) */
.steps-timeline-line {
position: absolute;
top: 26px;
left: 26px; /* Exactly at the center of circle 1 */
right: 15px; /* Extends past circle 4 */
height: 3px;
background: linear-gradient(90deg,
#0b5d2b 0%,
#0b5d2b 75%,
#6fb92c 80%,
#cbd5e1 88%,
rgba(203, 213, 225, 0.3) 100%
);
z-index: 1;
border-radius: 999px;
transform: translateY(-50%);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
position: relative;
z-index: 2;
}
.step-card {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
height: 100%;
}
.step-node-wrap {
margin-bottom: 22px;
position: relative;
z-index: 2;
}
.step-number-circle {
width: 52px;
height: 52px;
border-radius: 50%;
background: #ffffff;
border: 3px solid #6fb92c;
color: #0b5d2b;
font-size: 1.25rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(111, 185, 44, 0.2);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 2;
}
.step-card:hover .step-number-circle {
background: linear-gradient(135deg, #6fb92c 0%, #0b5d2b 100%);
color: #ffffff;
border-color: #6fb92c;
transform: scale(1.12);
box-shadow: 0 10px 24px rgba(11, 93, 43, 0.35);
}
/* Step Card Box Container */
.step-card-content {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 26px 22px;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.step-card:hover .step-card-content {
border-color: #6fb92c;
transform: translateY(-6px);
box-shadow: 0 16px 36px rgba(11, 93, 43, 0.1);
background: #ffffff;
}
/* Step Card Top Row (Pill Badge + Icon) */
.step-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
width: 100%;
}
.step-pill {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
background: #eaf6ea;
color: #0b5d2b;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid rgba(111, 185, 44, 0.25);
transition: all 0.3s ease;
}
.step-card:hover .step-pill {
background: #0b5d2b;
color: #ffffff;
border-color: #0b5d2b;
}
.step-icon-badge {
width: 38px;
height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, #f0fdf4 0%, #eaf6ea 100%);
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(111, 185, 44, 0.2);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.step-card:hover .step-icon-badge {
background: linear-gradient(135deg, #6fb92c 0%, #0b5d2b 100%);
color: #ffffff;
transform: rotate(-6deg) scale(1.06);
box-shadow: 0 6px 16px rgba(11, 93, 43, 0.25);
}
.step-heading {
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
line-height: 1.35;
letter-spacing: -0.01em;
transition: color 0.25s ease;
}
.step-card:hover .step-heading {
color: #0b5d2b;
}
.step-text {
font-size: 0.88rem;
color: #64748b;
line-height: 1.6;
margin: 0;
}
@media (max-width: 991px) {
.steps-timeline-line {
display: none;
}
.steps-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (max-width: 640px) {
.process-steps-section {
padding: 60px 0;
}
.steps-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.step-node-wrap {
margin-bottom: 12px;
}
}
/* ==========================================================================
Complete Services 9-Grid Section (Before Blog)
========================================================================== */
.services-full-grid-section {
padding: 85px 0 95px 0;
background-color: #f8fafc;
border-top: 1px solid #eef2f6;
border-bottom: 1px solid #eef2f6;
}
.badge-orange-gold {
background-color: #eaf6ea;
color: #0b5d2b;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.08em;
padding: 6px 16px;
border-radius: 999px;
display: inline-block;
margin-bottom: 12px;
text-transform: uppercase;
border: 1px solid rgba(111, 185, 44, 0.28);
}
.services-3x3-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 48px;
}
.service-feature-card {
background: #ffffff;
border: 1px solid #eef2f6;
border-radius: 16px;
padding: 22px 20px;
display: flex;
align-items: center;
gap: 16px;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
cursor: pointer;
position: relative;
overflow: hidden;
}
.service-feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 30px rgba(11, 93, 43, 0.12);
border-color: #6fb92c;
background: #ffffff;
}
.svc-card-icon-wrap {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #eaf6ea;
color: #0b5d2b;
border: 1px solid rgba(111, 185, 44, 0.25);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-feature-card:hover .svc-card-icon-wrap,
.service-feature-card.active .svc-card-icon-wrap {
background: #0b5d2b;
color: #ffffff;
border-color: #0b5d2b;
transform: scale(1.12) rotate(-5deg);
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.28);
}
.svc-card-body {
flex: 1;
}
.svc-card-title {
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 4px;
line-height: 1.35;
transition: color 0.25s ease;
}
.service-feature-card:hover .svc-card-title {
color: #0b5d2b;
}
.svc-card-desc {
font-size: 0.86rem;
color: #64748b;
line-height: 1.45;
margin: 0;
}
@media (max-width: 991px) {
.services-3x3-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 640px) {
.services-full-grid-section {
padding: 60px 0;
}
.services-3x3-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* ==========================================================================
Clean Service Page Specific Styles (clean-service.html / clean-service.php)
========================================================================== */
.clean-hero-section {
padding: 70px 0 80px 0;
background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%, #f4fbf7 100%);
position: relative;
overflow: hidden;
border-bottom: 1px solid #e2e8f0;
}
.clean-hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 48px;
align-items: center;
}
.clean-hero-left {
display: flex;
flex-direction: column;
gap: 16px;
}
.clean-hero-title {
font-size: 3.4rem;
font-weight: 900;
line-height: 1.1;
color: #0b1526;
letter-spacing: -0.02em;
margin: 0;
}
.clean-hero-title .text-gradient-green {
color: #5fae22;
background: linear-gradient(135deg, #5fae22 0%, #6fb92c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: block;
}
.clean-hero-subtitle {
font-size: 1.05rem;
color: #475569;
line-height: 1.65;
max-width: 580px;
margin: 4px 0 12px 0;
}
.clean-hero-btn-group {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.btn-hero-green {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, #5fae22 0%, #6fb92c 100%);
color: #ffffff;
font-weight: 700;
font-size: 0.98rem;
padding: 14px 28px;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 6px 18px rgba(95, 174, 34, 0.35);
transition: all 0.25s ease;
border: none;
cursor: pointer;
}
.btn-hero-green:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(95, 174, 34, 0.45);
background: linear-gradient(135deg, #0b5d2b 0%, #5fae22 100%);
}
.btn-hero-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #ffffff;
color: #0b1526;
font-weight: 700;
font-size: 0.98rem;
padding: 14px 28px;
border-radius: 999px;
text-decoration: none;
border: 1.5px solid #cbd5e1;
transition: all 0.25s ease;
cursor: pointer;
}
.btn-hero-outline:hover {
border-color: #5fae22;
color: #0b5d2b;
background-color: #f0fdf4;
transform: translateY(-2px);
}
.clean-hero-stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 10px;
}
.clean-stat-pill {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 12px 14px;
text-align: center;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
transition: transform 0.2s ease;
}
.clean-stat-pill:hover {
transform: translateY(-3px);
border-color: #a3e635;
}
.clean-stat-pill .pill-val {
display: block;
font-size: 1.25rem;
font-weight: 800;
color: #0b1526;
line-height: 1.1;
margin-bottom: 3px;
}
.clean-stat-pill .pill-lbl {
font-size: 0.76rem;
color: #64748b;
font-weight: 600;
}
/* Hero Right Visual Carousel Slider Card */
.clean-hero-right {
position: relative;
display: flex;
justify-content: center;
}
.clean-carousel-card {
width: 100%;
max-width: 480px;
background: #ffffff;
border-radius: 28px;
padding: 10px;
border: 3px solid #ffffff;
box-shadow: 0 20px 45px rgba(11, 93, 43, 0.14);
position: relative;
}
.clean-visual-badge-top {
position: absolute;
top: -14px;
left: 24px;
background: #ffffff;
color: #0b5d2b;
font-size: 0.82rem;
font-weight: 800;
padding: 7px 16px;
border-radius: 999px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
border: 1.5px solid #d1fae5;
display: inline-flex;
align-items: center;
gap: 6px;
z-index: 15;
}
.clean-visual-badge-bottom {
position: absolute;
bottom: -14px;
right: 24px;
background: #ffffff;
color: #0b5d2b;
font-size: 0.82rem;
font-weight: 800;
padding: 7px 16px;
border-radius: 999px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
border: 1.5px solid #d1fae5;
display: inline-flex;
align-items: center;
gap: 6px;
z-index: 15;
}
.clean-carousel {
position: relative;
width: 100%;
height: 380px;
overflow: hidden;
border-radius: 22px;
background: #0f172a;
}
.clean-carousel-slides {
position: relative;
width: 100%;
height: 100%;
}
.clean-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1), transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1.05);
z-index: 1;
}
.clean-slide.active {
opacity: 1;
visibility: visible;
transform: scale(1);
z-index: 2;
}
.clean-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.clean-slide-tag {
position: absolute;
top: 22px;
right: 18px;
background: rgba(11, 31, 20, 0.88);
backdrop-filter: blur(8px);
color: #a3e635;
font-weight: 800;
font-size: 0.82rem;
padding: 6px 14px;
border-radius: 20px;
border: 1px solid rgba(163, 230, 53, 0.35);
z-index: 5;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.clean-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(6px);
border: none;
display: flex;
align-items: center;
justify-content: center;
color: #0b1526;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.clean-carousel-btn:hover {
background: #6fb92c;
color: #ffffff;
transform: translateY(-50%) scale(1.1);
}
.clean-carousel-btn.prev-btn {
left: 12px;
}
.clean-carousel-btn.next-btn {
right: 12px;
}
.clean-carousel-dots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
z-index: 10;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
padding: 5px 12px;
border-radius: 20px;
}
.clean-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.clean-dot.active {
background: #6fb92c;
width: 22px;
border-radius: 10px;
}
/* --------------------------------------------------------------------------
3-Column Clean Services Cards
-------------------------------------------------------------------------- */
.clean-services-section {
padding: 85px 0;
background-color: #ffffff;
}
.clean-cards-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 48px;
}
.clean-srv-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 20px;
padding: 32px 26px;
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
position: relative;
}
.clean-srv-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}
/* Uniform Green Card Styling on Hover */
.clean-srv-card:hover {
border-color: #6fb92c;
transform: translateY(-6px);
box-shadow: 0 18px 38px rgba(11, 93, 43, 0.12);
}
.clean-card-icon-wrap {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 1.3rem;
background: #dcfce7;
color: #16a34a;
}
.clean-card-title {
font-size: 1.35rem;
font-weight: 800;
color: #0b1526;
margin-bottom: 8px;
}
.clean-card-desc {
font-size: 0.88rem;
color: #64748b;
line-height: 1.55;
margin-bottom: 22px;
}
.clean-card-features {
list-style: none;
padding: 0;
margin: 0 0 28px 0;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.clean-card-features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.88rem;
font-weight: 600;
color: #334155;
}
.clean-card-features li svg {
flex-shrink: 0;
color: #16a34a;
}
.btn-card-clean {
width: 100%;
padding: 13px 20px;
border-radius: 12px;
font-size: 0.98rem;
font-weight: 800;
color: #ffffff;
background: linear-gradient(135deg, #5fae22 0%, #6fb92c 100%);
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 14px rgba(95, 174, 34, 0.32);
transition: all 0.25s ease;
text-decoration: none;
}
.btn-card-clean:hover {
background: linear-gradient(135deg, #0b5d2b 0%, #5fae22 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.4);
color: #ffffff;
}
/* --------------------------------------------------------------------------
Zusätzliche Vorteile (4 Feature Cards)
-------------------------------------------------------------------------- */
.clean-advantages-section {
padding: 70px 0;
background-color: #f8fafc;
border-top: 1px solid #eef2f6;
border-bottom: 1px solid #eef2f6;
}
.clean-advantages-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 36px;
}
.clean-adv-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 26px 20px;
text-align: center;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
}
.clean-adv-card:hover {
transform: translateY(-6px);
background: linear-gradient(135deg, #0b5d2b 0%, #15803d 50%, #5fae22 100%);
border-color: transparent;
box-shadow: 0 16px 32px rgba(11, 93, 43, 0.25);
}
.clean-adv-icon-wrap {
width: 52px;
height: 52px;
border-radius: 50%;
background: #eaf6ea;
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px auto;
transition: all 0.3s ease;
}
.clean-adv-card:hover .clean-adv-icon-wrap {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
transform: scale(1.08);
}
.clean-adv-card h4 {
font-size: 1.05rem;
font-weight: 800;
color: #0b1526;
margin-bottom: 6px;
transition: color 0.3s ease;
}
.clean-adv-card:hover h4 {
color: #ffffff;
}
.clean-adv-card p {
font-size: 0.84rem;
color: #64748b;
line-height: 1.45;
margin: 0;
transition: color 0.3s ease;
}
.clean-adv-card:hover p {
color: #e8fced;
}
/* --------------------------------------------------------------------------
Bereit für Ihre Reinigung Banner
-------------------------------------------------------------------------- */
.clean-green-cta-section {
padding: 40px 0;
}
.clean-green-cta-box {
background: linear-gradient(135deg, #0b5d2b 0%, #15803d 50%, #5fae22 100%);
border-radius: 20px;
padding: 38px 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
box-shadow: 0 16px 36px rgba(11, 93, 43, 0.28);
}
.clean-green-cta-box h3 {
color: #ffffff;
font-size: 1.7rem;
font-weight: 800;
margin-bottom: 6px;
}
.clean-green-cta-box p {
color: #e8fced;
font-size: 0.98rem;
margin: 0;
}
.btn-white-pill {
background: #ffffff;
color: #0b5d2b;
font-weight: 800;
font-size: 0.95rem;
padding: 13px 28px;
border-radius: 999px;
border: none;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
transition: all 0.25s ease;
text-decoration: none;
display: inline-block;
}
.btn-white-pill:hover {
background: #f0fdf4;
color: #0b5d2b;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
/* --------------------------------------------------------------------------
Clean Service anfragen Form Section
-------------------------------------------------------------------------- */
.clean-booking-section {
padding: 85px 0 95px 0;
background-color: #f8fafc;
}
.clean-form-container {
max-width: 920px;
margin: 40px auto 0 auto;
background: #ffffff;
border-radius: 24px;
border: 1px solid #e2e8f0;
box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
padding: 42px 46px;
}
.clean-step-block {
margin-bottom: 34px;
padding-bottom: 28px;
border-bottom: 1px solid #f1f5f9;
}
.clean-step-block:last-of-type {
border-bottom: none;
margin-bottom: 10px;
padding-bottom: 0;
}
.clean-step-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.clean-step-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: #22c55e;
color: #ffffff;
font-size: 0.85rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.clean-step-header h4 {
font-size: 1.15rem;
font-weight: 800;
color: #0b1526;
margin: 0;
}
.clean-form-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.clean-form-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.clean-form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.clean-input-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.clean-input-item label {
font-size: 0.82rem;
font-weight: 700;
color: #475569;
}
.clean-input-item input,
.clean-input-item select,
.clean-input-item textarea {
width: 100%;
padding: 11px 14px;
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 10px;
font-size: 0.9rem;
color: #0f172a;
font-family: inherit;
outline: none;
transition: all 0.2s ease;
}
.clean-input-item input:focus,
.clean-input-item select:focus,
.clean-input-item textarea:focus {
background: #ffffff;
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.clean-radio-pills {
display: flex;
gap: 10px;
}
.clean-radio-label {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid #cbd5e1;
border-radius: 10px;
font-size: 0.88rem;
font-weight: 700;
color: #334155;
background: #f8fafc;
cursor: pointer;
transition: all 0.2s ease;
}
.clean-radio-label input[type="radio"] {
accent-color: #22c55e;
margin: 0;
width: 16px;
height: 16px;
}
.clean-radio-label:has(input[type="radio"]:checked) {
border-color: #22c55e;
background: #f0fdf4;
color: #15803d;
}
.btn-clean-submit-full {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #5fae22 0%, #6fb92c 100%);
color: #ffffff;
font-size: 1.05rem;
font-weight: 800;
border-radius: 12px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 26px;
box-shadow: 0 4px 14px rgba(95, 174, 34, 0.32);
transition: all 0.25s ease;
}
.btn-clean-submit-full:hover {
background: linear-gradient(135deg, #0b5d2b 0%, #5fae22 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.4);
color: #ffffff;
}
/* --------------------------------------------------------------------------
3 Bottom Quick Contact Cards
-------------------------------------------------------------------------- */
.clean-contact-cards-section {
padding: 50px 0 80px 0;
background: #ffffff;
}
.clean-contacts-3grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.clean-contact-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 32px 24px;
text-align: center;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.clean-contact-card:hover {
transform: translateY(-6px);
background: linear-gradient(135deg, #0b5d2b 0%, #15803d 50%, #5fae22 100%);
border-color: transparent;
box-shadow: 0 18px 36px rgba(11, 93, 43, 0.28);
}
.clean-contact-icon {
width: 58px;
height: 58px;
border-radius: 50%;
background: #eaf6ea;
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px auto;
transition: all 0.3s ease;
}
.clean-contact-card:hover .clean-contact-icon {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
transform: scale(1.08);
}
.clean-contact-card h4 {
font-size: 1.18rem;
font-weight: 800;
color: #0b1526;
margin-bottom: 6px;
transition: color 0.3s ease;
}
.clean-contact-card:hover h4 {
color: #ffffff;
}
.clean-contact-card p {
font-size: 0.88rem;
color: #64748b;
margin-bottom: 14px;
transition: color 0.3s ease;
}
.clean-contact-card:hover p {
color: #e8fced;
}
.clean-contact-card .contact-link {
display: inline-block;
font-size: 0.95rem;
font-weight: 800;
color: #0b5d2b;
text-decoration: none;
padding: 6px 16px;
border-radius: 999px;
transition: all 0.3s ease;
}
.clean-contact-card:hover .contact-link {
color: #0b5d2b;
background: #ffffff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
/* Responsive adjustments for Clean Service page */
@media (max-width: 991px) {
.clean-hero-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.clean-hero-title {
font-size: 2.8rem;
}
.clean-cards-3col,
.clean-advantages-grid,
.clean-contacts-3grid {
grid-template-columns: repeat(2, 1fr);
}
.clean-green-cta-box {
flex-direction: column;
text-align: center;
padding: 32px 24px;
}
.clean-form-container {
padding: 30px 24px;
}
.clean-form-grid-4,
.clean-form-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.clean-hero-title {
font-size: 2.2rem;
}
.clean-hero-stats-row {
grid-template-columns: repeat(2, 1fr);
}
.clean-cards-3col,
.clean-advantages-grid,
.clean-contacts-3grid,
.clean-form-grid-4,
.clean-form-grid-3,
.clean-form-grid-2 {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
Kontakt Page Specific Styles (kontakt.html)
-------------------------------------------------------------------------- */
.kontakt-page-half-banner {
background: linear-gradient(135deg, rgba(11, 93, 43, 0.88) 0%, rgba(15, 23, 42, 0.82) 100%),
url('../images/contact-banner.jpg') center 30%/cover no-repeat;
}
.kontakt-main-section {
padding: 60px 0 70px 0;
background: #f8fafc;
}
.kontakt-header-center {
text-align: center;
margin-bottom: 45px;
}
.kontakt-pill-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: #eaf6ea;
color: #0b5d2b;
font-size: 0.88rem;
font-weight: 800;
padding: 6px 18px;
border-radius: 999px;
margin-bottom: 14px;
letter-spacing: 0.02em;
}
.kontakt-main-title {
font-size: 2.8rem;
font-weight: 900;
color: #0b5d2b;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.kontakt-main-subtitle {
font-size: 1.05rem;
color: #64748b;
max-width: 680px;
margin: 0 auto;
line-height: 1.6;
}
.kontakt-2grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 36px;
align-items: flex-start;
}
/* Contact Form Card (Left Column) */
.kontakt-form-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 36px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
.kontakt-form-card h3 {
font-size: 1.45rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 22px;
}
.kontakt-row-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.kontakt-form-group {
margin-bottom: 16px;
}
.kontakt-form-group label {
display: block;
font-size: 0.88rem;
font-weight: 700;
color: #334155;
margin-bottom: 6px;
}
.kontakt-input,
.kontakt-select,
.kontakt-textarea {
width: 100%;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 12px 16px;
font-size: 0.95rem;
font-family: inherit;
color: #1e293b;
transition: all 0.25s ease;
outline: none;
}
.kontakt-input:focus,
.kontakt-select:focus,
.kontakt-textarea:focus {
border-color: #0b5d2b;
box-shadow: 0 0 0 3px rgba(11, 93, 43, 0.15);
}
.kontakt-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 40px;
cursor: pointer;
}
.kontakt-textarea {
min-height: 125px;
resize: vertical;
}
.btn-kontakt-submit {
width: 100%;
background: linear-gradient(135deg, #0b5d2b 0%, #15803d 50%, #5fae22 100%);
color: #ffffff;
border: none;
border-radius: 12px;
padding: 14px 28px;
font-size: 1rem;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.25);
transition: all 0.25s ease;
}
.btn-kontakt-submit:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(11, 93, 43, 0.35);
}
/* Contact Info Column (Right Column) */
.kontakt-info-col h3 {
font-size: 1.45rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
}
.kontakt-info-col .kontakt-info-lead {
font-size: 0.95rem;
color: #64748b;
line-height: 1.6;
margin-bottom: 22px;
}
.kontakt-info-cards-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.kontakt-info-card-item {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 18px 22px;
display: flex;
align-items: flex-start;
gap: 18px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
color: inherit;
}
.kontakt-info-card-item:hover {
transform: translateY(-4px);
background: linear-gradient(135deg, #0b5d2b 0%, #15803d 50%, #5fae22 100%);
border-color: transparent;
box-shadow: 0 14px 30px rgba(11, 93, 43, 0.22);
}
.kontakt-info-icon-wrap {
width: 48px;
height: 48px;
border-radius: 12px;
background: #eaf6ea;
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.kontakt-info-card-item:hover .kontakt-info-icon-wrap {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
transform: scale(1.08);
}
.kontakt-info-text h4 {
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 4px;
transition: color 0.3s ease;
}
.kontakt-info-card-item:hover .kontakt-info-text h4 {
color: #ffffff;
}
.kontakt-info-text p {
font-size: 0.92rem;
color: #475569;
margin: 0;
line-height: 1.45;
transition: color 0.3s ease;
}
.kontakt-info-card-item:hover .kontakt-info-text p {
color: #e8fced;
}
.kontakt-info-text small {
display: block;
font-size: 0.82rem;
color: #16a34a;
font-weight: 700;
margin-top: 4px;
transition: color 0.3s ease;
}
.kontakt-info-card-item:hover .kontakt-info-text small {
color: #bbf7d0;
}
/* Map Section (Unsere Adresse) */
.kontakt-map-section {
padding: 20px 0 80px 0;
background: #f8fafc;
}
.kontakt-map-box {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 36px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
text-align: center;
}
.kontakt-map-box h3 {
font-size: 1.7rem;
font-weight: 900;
color: #0f172a;
margin-bottom: 6px;
}
.kontakt-map-box p {
font-size: 0.98rem;
color: #64748b;
margin-bottom: 24px;
}
.kontakt-map-iframe-wrap {
width: 100%;
height: 380px;
border-radius: 16px;
overflow: hidden;
margin-bottom: 24px;
border: 1px solid #e2e8f0;
}
.kontakt-map-iframe-wrap iframe {
width: 100%;
height: 100%;
border: 0;
}
.btn-map-gmaps {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #0b5d2b 0%, #15803d 50%, #5fae22 100%);
color: #ffffff;
padding: 14px 32px;
border-radius: 999px;
font-weight: 800;
font-size: 0.98rem;
text-decoration: none;
box-shadow: 0 8px 22px rgba(11, 93, 43, 0.28);
transition: all 0.3s ease;
}
.btn-map-gmaps:hover {
background: linear-gradient(135deg, #094721 0%, #0b5d2b 50%, #4a8d18 100%);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(11, 93, 43, 0.38);
}
/* Responsive adjustments for Kontakt page */
@media (max-width: 991px) {
.kontakt-2grid {
grid-template-columns: 1fr;
gap: 30px;
}
.kontakt-main-title {
font-size: 2.3rem;
}
.kontakt-form-card,
.kontakt-map-box {
padding: 26px 20px;
}
}
@media (max-width: 640px) {
.kontakt-row-2col {
grid-template-columns: 1fr;
}
.kontakt-main-title {
font-size: 2rem;
}
.kontakt-map-iframe-wrap {
height: 280px;
}
}
/* --------------------------------------------------------------------------
Umzug Service Page Specific Styles (umzug-service.html)
-------------------------------------------------------------------------- */
.umzug-page-half-banner {
background: linear-gradient(135deg, rgba(11, 93, 43, 0.88) 0%, rgba(15, 23, 42, 0.82) 100%),
url('../images/hero-mover.jpg') center/cover no-repeat;
}
/* Umzug Process Steps (4 Steps) */
.umzug-process-section {
padding: 70px 0;
background: #ffffff;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
.umzug-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 40px;
position: relative;
}
.umzug-process-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 32px 24px 28px 24px;
position: relative;
text-align: left;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.umzug-process-card:hover {
transform: translateY(-6px);
background: #ffffff;
border-color: #0b5d2b;
box-shadow: 0 16px 36px rgba(11, 93, 43, 0.12);
}
.umzug-step-badge {
position: absolute;
top: -14px;
left: 24px;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #0b5d2b 0%, #15803d 50%, #5fae22 100%);
color: #ffffff;
font-size: 0.88rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(11, 93, 43, 0.3);
}
.umzug-process-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: #eaf6ea;
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
transition: all 0.3s ease;
}
.umzug-process-card:hover .umzug-process-icon {
background: #0b5d2b;
color: #ffffff;
transform: scale(1.05);
}
.umzug-process-card h4 {
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
}
.umzug-process-card p {
font-size: 0.88rem;
color: #64748b;
line-height: 1.55;
margin: 0;
}
/* Umzug Comprehensive Inquiry Form */
.umzug-calculator-section {
padding: 85px 0 95px 0;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
border-top: 1px solid #e2e8f0;
}
.umzug-calc-box {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 24px;
padding: 48px;
box-shadow: 0 16px 44px rgba(15, 23, 42, 0.05);
max-width: 960px;
margin: 0 auto;
}
.umzug-calc-header {
text-align: center;
max-width: 650px;
margin: 0 auto 36px auto;
}
.clean-badge-green {
display: inline-block;
color: #0b5d2b;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 8px;
}
.umzug-calc-header h3 {
font-size: 2rem;
font-weight: 900;
color: #0b1526;
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.umzug-calc-header p {
font-size: 0.96rem;
color: #64748b;
margin: 0;
line-height: 1.55;
}
.umzug-route-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.umzug-route-col {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 24px;
}
.umzug-route-col-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.05rem;
font-weight: 800;
color: #0b5d2b;
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px solid #e2e8f0;
}
.umzug-services-checkboxes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 24px 0;
}
.umzug-check-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.umzug-check-card:hover {
background: #ffffff;
border-color: #0b5d2b;
box-shadow: 0 4px 12px rgba(11, 93, 43, 0.08);
}
.umzug-check-card input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #0b5d2b;
cursor: pointer;
}
.umzug-check-card span {
font-size: 0.88rem;
font-weight: 700;
color: #334155;
}
/* FAQ Accordion */
.umzug-faq-section {
padding: 70px 0;
background: #ffffff;
}
.umzug-faq-list {
max-width: 800px;
margin: 36px auto 0 auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.umzug-faq-item {
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #f8fafc;
overflow: hidden;
transition: all 0.25s ease;
}
.umzug-faq-item.active {
border-color: #0b5d2b;
background: #ffffff;
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.06);
}
.umzug-faq-question {
padding: 18px 24px;
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
cursor: pointer;
user-select: none;
}
.umzug-faq-chevron {
width: 18px;
height: 18px;
transition: transform 0.25s ease;
color: #0b5d2b;
flex-shrink: 0;
}
.umzug-faq-item.active .umzug-faq-chevron {
transform: rotate(180deg);
}
.umzug-faq-answer {
padding: 0 24px 18px 24px;
font-size: 0.94rem;
color: #475569;
line-height: 1.6;
display: none;
}
.umzug-faq-item.active .umzug-faq-answer {
display: block;
}
/* Responsive adjustments for Umzug Service page */
@media (max-width: 991px) {
.umzug-process-grid {
grid-template-columns: repeat(2, 1fr);
}
.umzug-route-grid {
grid-template-columns: 1fr;
}
.umzug-services-checkboxes {
grid-template-columns: repeat(2, 1fr);
}
.umzug-calc-box {
padding: 30px 22px;
}
}
@media (max-width: 640px) {
.umzug-process-grid,
.umzug-services-checkboxes {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
17. Blog & Blog Detail Page Styles
========================================================================== */
.blog-page-half-banner {
background: linear-gradient(90deg, rgba(11, 31, 20, 0.94) 0%, rgba(16, 45, 29, 0.88) 45%, rgba(16, 45, 29, 0.55) 100%),
url('../images/blog-banner.jpg') center right / cover no-repeat;
}
.blog-detail-half-banner {
background: linear-gradient(90deg, rgba(11, 31, 20, 0.95) 0%, rgba(16, 45, 29, 0.90) 50%, rgba(16, 45, 29, 0.58) 100%),
url('../images/blog-banner.jpg') center right / cover no-repeat;
}
.blog-banner-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: rgba(111, 185, 44, 0.18);
border: 1px solid rgba(111, 185, 44, 0.4);
border-radius: 30px;
color: #8be63d;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 12px;
}
.blog-section,
.blog-detail-section {
padding: 60px 0 80px 0;
background-color: #f8fafc;
}
/* --- Category Filter & Quick Search --- */
.blog-filter-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 35px;
flex-wrap: wrap;
}
.blog-filter-pills {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.blog-filter-btn {
padding: 10px 20px;
border-radius: 30px;
border: 1px solid #e2e8f0;
background: #ffffff;
color: #475569;
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}
.blog-filter-btn:hover {
border-color: #0b5d2b;
color: #0b5d2b;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(11, 93, 43, 0.08);
}
.blog-filter-btn.active {
background: #0b5d2b;
border-color: #0b5d2b;
color: #ffffff;
box-shadow: 0 6px 18px rgba(11, 93, 43, 0.22);
}
.blog-search-quick {
min-width: 260px;
}
.blog-quick-search-form {
display: flex;
align-items: center;
position: relative;
}
.blog-quick-search-input {
width: 100%;
padding: 11px 44px 11px 18px;
border: 1px solid #e2e8f0;
border-radius: 30px;
background: #ffffff;
font-size: 0.92rem;
color: #0f172a;
outline: none;
transition: all 0.25s ease;
}
.blog-quick-search-input:focus {
border-color: #0b5d2b;
box-shadow: 0 0 0 3px rgba(11, 93, 43, 0.12);
}
.blog-quick-search-btn {
position: absolute;
right: 6px;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: #0b5d2b;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
}
.blog-quick-search-btn:hover {
background: #084822;
}
/* --- Featured Highlight Hero Card --- */
.blog-featured-card {
display: grid;
grid-template-columns: 1.15fr 1fr;
background: #ffffff;
border-radius: 20px;
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
margin-bottom: 50px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-featured-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10);
}
.blog-featured-media {
position: relative;
min-height: 340px;
overflow: hidden;
}
.blog-featured-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.blog-featured-card:hover .blog-featured-media img {
transform: scale(1.04);
}
.blog-card-badge-floating {
position: absolute;
top: 18px;
left: 18px;
background: #0b5d2b;
color: #ffffff;
font-size: 0.8rem;
font-weight: 800;
padding: 6px 14px;
border-radius: 20px;
letter-spacing: 0.04em;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.blog-featured-body {
padding: 38px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-card-meta {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.blog-category-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: rgba(95, 174, 34, 0.12);
color: #0b5d2b;
font-size: 0.82rem;
font-weight: 800;
border-radius: 20px;
text-decoration: none;
}
.blog-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
color: #64748b;
font-weight: 600;
}
.blog-featured-title {
font-size: 1.65rem;
font-weight: 800;
line-height: 1.3;
color: #0f172a;
margin-bottom: 14px;
}
.blog-featured-title a {
color: #0f172a;
text-decoration: none;
transition: color 0.2s ease;
}
.blog-featured-title a:hover {
color: #0b5d2b;
}
.blog-featured-excerpt {
font-size: 0.96rem;
color: #475569;
line-height: 1.65;
margin-bottom: 24px;
}
.blog-featured-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 20px;
border-top: 1px solid #f1f5f9;
flex-wrap: wrap;
}
.blog-author-info {
display: flex;
align-items: center;
gap: 12px;
}
.blog-author-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #0b5d2b 0%, #6fb92c 100%);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.88rem;
}
.blog-author-text strong {
display: block;
font-size: 0.9rem;
color: #0f172a;
line-height: 1.2;
}
.blog-author-text small {
font-size: 0.78rem;
color: #64748b;
}
.btn-blog-readmore {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
background: #0b5d2b;
color: #ffffff;
font-size: 0.9rem;
font-weight: 700;
border-radius: 30px;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-blog-readmore:hover {
background: #084822;
transform: translateX(4px);
box-shadow: 0 6px 16px rgba(11, 93, 43, 0.25);
}
/* --- Layout Grid (Main 2/3 + Sidebar 1/3) --- */
.blog-layout-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 40px;
align-items: start;
}
.blog-grid-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
margin-bottom: 45px;
}
@keyframes fadeInCard {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Blog Post Card --- */
.blog-card {
background: #ffffff;
border-radius: 18px;
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}
.blog-card:hover {
transform: translateY(-6px);
border-color: #cbd5e1;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
}
.blog-card-thumb {
position: relative;
height: 220px;
overflow: hidden;
}
.blog-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-thumb img {
transform: scale(1.06);
}
.blog-card-category-tag {
position: absolute;
bottom: 14px;
left: 14px;
background: rgba(11, 93, 43, 0.9);
backdrop-filter: blur(6px);
color: #ffffff;
font-size: 0.78rem;
font-weight: 800;
padding: 4px 12px;
border-radius: 20px;
}
.blog-card-content {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog-card-meta-small {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: #64748b;
font-weight: 600;
margin-bottom: 12px;
}
.blog-card-meta-small span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.blog-card-title {
font-size: 1.18rem;
font-weight: 800;
line-height: 1.35;
color: #0f172a;
margin-bottom: 10px;
}
.blog-card-title a {
color: #0f172a;
text-decoration: none;
transition: color 0.2s ease;
}
.blog-card-title a:hover {
color: #0b5d2b;
}
.blog-card-text {
font-size: 0.92rem;
color: #475569;
line-height: 1.6;
margin-bottom: 18px;
flex-grow: 1;
}
.blog-card-bottom {
padding-top: 14px;
border-top: 1px solid #f1f5f9;
}
.blog-link-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
color: #0b5d2b;
font-size: 0.9rem;
font-weight: 800;
text-decoration: none;
transition: gap 0.2s ease, color 0.2s ease;
}
.blog-link-arrow:hover {
gap: 10px;
color: #6fb92c;
}
/* --- Pagination --- */
.blog-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 20px;
}
.blog-page-nav {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 30px;
color: #0f172a;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
}
.blog-page-nav:hover:not(.disabled) {
background: #0b5d2b;
border-color: #0b5d2b;
color: #ffffff;
}
.blog-page-nav.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.blog-page-numbers {
display: flex;
align-items: center;
gap: 8px;
}
.blog-page-num {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid #e2e8f0;
color: #0f172a;
font-size: 0.92rem;
font-weight: 800;
text-decoration: none;
transition: all 0.2s ease;
}
.blog-page-num:hover,
.blog-page-num.active {
background: #0b5d2b;
border-color: #0b5d2b;
color: #ffffff;
box-shadow: 0 4px 12px rgba(11, 93, 43, 0.2);
}
.blog-page-dots {
color: #94a3b8;
font-weight: 700;
}
/* --- Blog Sidebar & Widgets --- */
.blog-sidebar {
display: flex;
flex-direction: column;
gap: 30px;
}
.blog-sidebar-widget {
background: #ffffff;
border-radius: 18px;
padding: 28px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}
.widget-title {
font-size: 1.18rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.widget-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 36px;
height: 3px;
background: #6fb92c;
border-radius: 3px;
}
/* Search Widget */
.search-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.search-input-wrap input {
width: 100%;
padding: 12px 46px 12px 16px;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-size: 0.92rem;
color: #0f172a;
outline: none;
transition: border-color 0.2s ease;
}
.search-input-wrap input:focus {
border-color: #0b5d2b;
box-shadow: 0 0 0 3px rgba(11, 93, 43, 0.1);
}
.search-input-wrap button {
position: absolute;
right: 8px;
width: 32px;
height: 32px;
border: none;
background: #0b5d2b;
color: #ffffff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
}
.search-input-wrap button:hover {
background: #084822;
}
/* Categories List */
.widget-cat-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.widget-cat-list li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-radius: 10px;
background: #f8fafc;
color: #1e293b;
font-size: 0.92rem;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
}
.widget-cat-list li a:hover {
background: #eaf6ea;
color: #0b5d2b;
transform: translateX(4px);
}
.cat-name {
display: flex;
align-items: center;
gap: 8px;
}
.cat-count {
padding: 2px 8px;
background: #ffffff;
border-radius: 12px;
font-size: 0.78rem;
color: #64748b;
border: 1px solid #e2e8f0;
}
/* Popular Posts */
.popular-posts-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.pop-post-item {
display: flex;
gap: 14px;
align-items: center;
}
.pop-thumb {
width: 72px;
height: 72px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
}
.pop-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.pop-post-item:hover .pop-thumb img {
transform: scale(1.08);
}
.pop-date {
font-size: 0.78rem;
color: #94a3b8;
font-weight: 600;
display: block;
margin-bottom: 4px;
}
.pop-title {
font-size: 0.9rem;
font-weight: 700;
line-height: 1.35;
color: #0f172a;
}
.pop-title a {
color: #0f172a;
text-decoration: none;
transition: color 0.2s ease;
}
.pop-title a:hover {
color: #0b5d2b;
}
/* Download Promo Widget */
.widget-download-card {
background: linear-gradient(145deg, #0b311b 0%, #0b5d2b 100%);
color: #ffffff;
border: none;
text-align: center;
padding: 32px 24px;
}
.download-icon-circle {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(111, 185, 44, 0.25);
border: 1px solid rgba(111, 185, 44, 0.5);
color: #8be63d;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px auto;
}
.download-title {
font-size: 1.25rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 10px;
}
.download-desc {
font-size: 0.88rem;
color: #cbd5e1;
line-height: 1.55;
margin-bottom: 20px;
}
.btn-widget-download {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 18px;
background: #6fb92c;
color: #0b311b;
font-weight: 800;
font-size: 0.92rem;
border-radius: 30px;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-widget-download:hover {
background: #ffffff;
color: #0b5d2b;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
/* CTA Sidebar Widget */
.widget-cta-card {
background: #ffffff;
border: 2px solid #0b5d2b;
text-align: center;
padding: 30px 24px;
}
.widget-cta-badge {
display: inline-block;
background: #eaf6ea;
color: #0b5d2b;
font-size: 0.78rem;
font-weight: 800;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 12px;
letter-spacing: 0.04em;
}
.widget-cta-title {
font-size: 1.25rem;
font-weight: 800;
color: #0f172a;
line-height: 1.3;
margin-bottom: 10px;
}
.widget-cta-desc {
font-size: 0.88rem;
color: #475569;
line-height: 1.55;
margin-bottom: 20px;
}
.btn-widget-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 18px;
background: #0b5d2b;
color: #ffffff;
font-weight: 800;
font-size: 0.92rem;
border-radius: 30px;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-widget-cta:hover {
background: #084822;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.25);
}
.widget-cta-phone {
margin-top: 16px;
font-size: 0.85rem;
color: #64748b;
}
.widget-cta-phone a {
display: block;
font-weight: 800;
font-size: 1.05rem;
color: #0b5d2b;
text-decoration: none;
margin-top: 4px;
}
/* Tags Widget */
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-link,
.tag-pill {
padding: 6px 14px;
background: #f1f5f9;
border-radius: 20px;
font-size: 0.82rem;
font-weight: 700;
color: #475569;
text-decoration: none;
transition: all 0.2s ease;
}
.tag-link:hover,
.tag-pill:hover {
background: #0b5d2b;
color: #ffffff;
transform: translateY(-2px);
}
/* ==========================================================================
18. Single Blog Post Detail Styles
========================================================================== */
.blog-detail-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 40px;
align-items: start;
}
.single-post-article {
background: #ffffff;
border-radius: 22px;
padding: 45px;
border: 1px solid #e2e8f0;
box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04);
}
/* Article Header */
.article-header {
margin-bottom: 30px;
}
.article-meta-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.88rem;
color: #64748b;
font-weight: 600;
}
.article-author-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
background: #f8fafc;
border-radius: 14px;
border: 1px solid #f1f5f9;
flex-wrap: wrap;
}
.author-avatar-small {
width: 38px;
height: 38px;
border-radius: 50%;
background: #0b5d2b;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.85rem;
flex-shrink: 0;
}
.author-info-text strong {
display: block;
font-size: 0.92rem;
color: #0f172a;
}
.author-info-text small {
font-size: 0.8rem;
color: #64748b;
}
.btn-share-quick {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 20px;
border: 1px solid #cbd5e1;
background: #ffffff;
font-size: 0.82rem;
font-weight: 700;
color: #0f172a;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-share-quick:hover {
border-color: #0b5d2b;
color: #0b5d2b;
}
/* Featured Image Frame */
.article-featured-image-box {
margin-bottom: 35px;
border-radius: 18px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.article-featured-image-box img {
width: 100%;
height: auto;
max-height: 480px;
object-fit: cover;
}
.image-caption-bar {
padding: 10px 18px;
background: #f8fafc;
font-size: 0.84rem;
color: #64748b;
font-weight: 600;
border-top: 1px solid #f1f5f9;
}
/* Key Takeaways Box */
.article-takeaways-box {
background: #eaf6ea;
border-left: 5px solid #0b5d2b;
border-radius: 14px;
padding: 26px 30px;
margin-bottom: 35px;
}
.takeaways-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.takeaways-icon {
font-size: 1.4rem;
}
.takeaways-header h3 {
font-size: 1.25rem;
font-weight: 800;
color: #0b5d2b;
margin: 0;
}
.takeaways-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.takeaways-list li {
position: relative;
padding-left: 24px;
font-size: 0.94rem;
color: #1e293b;
line-height: 1.6;
}
.takeaways-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: #0b5d2b;
font-weight: 900;
}
/* Inhaltsverzeichnis / TOC */
.article-toc-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 24px 28px;
margin-bottom: 40px;
}
.toc-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 1.1rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 14px;
}
.toc-list {
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.toc-list li a {
color: #0b5d2b;
font-size: 0.92rem;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease, transform 0.2s ease;
display: inline-block;
}
.toc-list li a:hover {
color: #6fb92c;
text-decoration: underline;
}
/* Body Content Typography */
.article-body-content {
font-size: 1.05rem;
line-height: 1.8;
color: #334155;
}
.article-body-content p {
margin-bottom: 22px;
}
.lead-paragraph {
font-size: 1.18rem;
font-weight: 600;
line-height: 1.7;
color: #0f172a;
margin-bottom: 30px;
}
.article-body-content h2 {
font-size: 1.6rem;
font-weight: 800;
color: #0f172a;
margin: 40px 0 16px 0;
letter-spacing: -0.01em;
}
.article-body-content h3 {
font-size: 1.3rem;
font-weight: 800;
color: #0f172a;
margin: 30px 0 14px 0;
}
.article-body-content ul,
.article-body-content ol {
margin: 0 0 24px 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.article-body-content li {
line-height: 1.7;
}
/* Callout Boxes (Pro Tip / Warning) */
.article-pro-tip {
display: flex;
gap: 16px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-left: 4px solid #16a34a;
border-radius: 12px;
padding: 20px 24px;
margin: 30px 0;
}
.article-pro-tip .tip-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.article-pro-tip .tip-content strong {
display: block;
color: #166534;
font-size: 0.96rem;
margin-bottom: 4px;
}
.article-pro-tip .tip-content span {
font-size: 0.94rem;
color: #1e293b;
line-height: 1.6;
}
.article-warning-box {
display: flex;
gap: 16px;
background: #fffbeb;
border: 1px solid #fde68a;
border-left: 4px solid #f59e0b;
border-radius: 12px;
padding: 20px 24px;
margin: 30px 0;
}
.article-warning-box .warning-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.article-warning-box .warning-content strong {
display: block;
color: #92400e;
font-size: 0.96rem;
margin-bottom: 4px;
}
.article-warning-box .warning-content span {
font-size: 0.94rem;
color: #1e293b;
line-height: 1.6;
}
/* Blockquote */
.article-quote {
margin: 35px 0;
padding: 24px 30px;
background: #f8fafc;
border-left: 4px solid #0b5d2b;
border-radius: 0 14px 14px 0;
font-style: italic;
}
.article-quote p {
font-size: 1.15rem;
font-weight: 600;
color: #0f172a;
margin-bottom: 10px;
line-height: 1.6;
}
.article-quote cite {
font-size: 0.88rem;
font-weight: 700;
color: #0b5d2b;
font-style: normal;
}
/* Comparison Table */
.table-responsive-wrapper {
overflow-x: auto;
margin: 30px 0;
border-radius: 14px;
border: 1px solid #e2e8f0;
}
.article-comparison-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
font-size: 0.92rem;
text-align: left;
}
.article-comparison-table th {
background: #0b5d2b;
color: #ffffff;
padding: 14px 18px;
font-weight: 800;
white-space: nowrap;
}
.article-comparison-table td {
padding: 14px 18px;
border-bottom: 1px solid #f1f5f9;
color: #334155;
}
.article-comparison-table tr:nth-child(even) td {
background: #f8fafc;
}
/* Mid-Article CTA Banner */
.article-mid-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: linear-gradient(135deg, #0b311b 0%, #0b5d2b 100%);
color: #ffffff;
padding: 28px 32px;
border-radius: 16px;
margin: 40px 0;
box-shadow: 0 10px 24px rgba(11, 93, 43, 0.15);
flex-wrap: wrap;
}
.mid-cta-icon {
font-size: 2.2rem;
}
.mid-cta-text h4 {
font-size: 1.2rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 6px;
}
.mid-cta-text p {
font-size: 0.9rem;
color: #cbd5e1;
margin-bottom: 0;
line-height: 1.5;
}
.btn-mid-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: #6fb92c;
color: #0b311b;
font-weight: 800;
font-size: 0.92rem;
border-radius: 30px;
text-decoration: none;
white-space: nowrap;
transition: all 0.25s ease;
}
.btn-mid-cta:hover {
background: #ffffff;
color: #0b5d2b;
transform: translateY(-2px);
}
/* Article Tags & Social Share Bar */
.article-footer-tags-share {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 24px 0;
margin: 40px 0;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
flex-wrap: wrap;
}
.article-tags-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.tags-label,
.share-label {
font-size: 0.9rem;
font-weight: 800;
color: #0f172a;
}
.tags-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.article-social-share {
display: flex;
align-items: center;
gap: 12px;
}
.share-btn-group {
display: flex;
gap: 8px;
}
.social-share-btn {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-decoration: none;
transition: transform 0.2s ease;
}
.social-share-btn:hover {
transform: translateY(-3px);
}
.btn-wa { background: #25d366; }
.btn-fb { background: #1877f2; }
.btn-in { background: #0a66c2; }
/* Author Card Box */
.article-author-card {
display: flex;
align-items: center;
gap: 22px;
background: #f8fafc;
border-radius: 18px;
padding: 30px;
border: 1px solid #e2e8f0;
margin-bottom: 40px;
}
.author-card-avatar .avatar-circle {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #0b5d2b 0%, #6fb92c 100%);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: 900;
}
.author-card-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 800;
color: #0b5d2b;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.author-card-name {
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 6px;
}
.author-card-bio {
font-size: 0.9rem;
color: #64748b;
line-height: 1.6;
margin: 0;
}
/* Prev / Next Post Navigation */
.article-prev-next-nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 50px;
}
.nav-post-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 20px 24px;
text-decoration: none;
transition: all 0.25s ease;
display: flex;
flex-direction: column;
}
.nav-post-card:hover {
border-color: #0b5d2b;
background: #f8fafc;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(11, 93, 43, 0.06);
}
.nav-direction {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 700;
color: #0b5d2b;
margin-bottom: 6px;
}
.next-card .nav-direction {
justify-content: flex-end;
}
.next-card {
text-align: right;
}
.nav-post-title {
font-size: 0.96rem;
font-weight: 700;
color: #0f172a;
line-height: 1.4;
margin: 0;
}
/* Related Posts */
.article-related-posts {
margin-bottom: 50px;
}
.related-header {
margin-bottom: 24px;
}
.related-title {
font-size: 1.4rem;
font-weight: 800;
color: #0f172a;
margin-top: 6px;
}
.related-posts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.related-post-card {
background: #f8fafc;
border-radius: 14px;
overflow: hidden;
border: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
transition: all 0.25s ease;
}
.related-post-card:hover {
transform: translateY(-4px);
border-color: #0b5d2b;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.related-thumb {
position: relative;
height: 160px;
}
.related-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.related-cat-tag {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(11, 93, 43, 0.9);
color: #ffffff;
font-size: 0.75rem;
font-weight: 800;
padding: 3px 10px;
border-radius: 12px;
}
.related-content {
padding: 18px 20px;
}
.related-date {
font-size: 0.78rem;
color: #94a3b8;
font-weight: 600;
display: block;
margin-bottom: 6px;
}
.related-post-heading {
font-size: 1rem;
font-weight: 800;
color: #0f172a;
line-height: 1.35;
margin-bottom: 12px;
}
.related-post-heading a {
color: #0f172a;
text-decoration: none;
transition: color 0.2s ease;
}
.related-post-heading a:hover {
color: #0b5d2b;
}
.related-link {
font-size: 0.85rem;
font-weight: 800;
color: #0b5d2b;
text-decoration: none;
}
/* Comments Section */
.article-comments-section {
padding-top: 35px;
border-top: 1px solid #e2e8f0;
}
.comments-header {
margin-bottom: 25px;
}
.comments-title {
font-size: 1.4rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 4px;
}
.comments-subtitle {
font-size: 0.9rem;
color: #64748b;
}
.comments-list {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 35px;
}
.comment-item {
display: flex;
gap: 16px;
padding: 20px;
background: #f8fafc;
border-radius: 14px;
border: 1px solid #f1f5f9;
}
.comment-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: #0b5d2b;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.88rem;
flex-shrink: 0;
}
.comment-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.comment-meta strong {
font-size: 0.95rem;
color: #0f172a;
}
.comment-time {
font-size: 0.78rem;
color: #94a3b8;
}
.comment-text {
font-size: 0.92rem;
color: #475569;
line-height: 1.6;
margin: 0;
}
/* Comment Form */
.comment-respond {
background: transparent;
border: none;
padding: 0;
}
.respond-title {
font-size: 1.2rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 20px;
}
.comment-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-row-2col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label {
font-size: 0.85rem;
font-weight: 700;
color: #1e293b;
}
.form-control {
width: 100%;
padding: 12px 16px;
border: 1px solid #cbd5e1;
border-radius: 10px;
background: #ffffff;
font-size: 0.92rem;
color: #0f172a;
outline: none;
transition: border-color 0.2s ease;
}
.form-control:focus {
border-color: #0b5d2b;
box-shadow: 0 0 0 3px rgba(11, 93, 43, 0.1);
}
/* Bottom CTA Banner on Blog Pages */
.blog-bottom-cta {
background: linear-gradient(135deg, #0b1f14 0%, #0b5d2b 100%);
padding: 70px 0;
color: #ffffff;
}
.blog-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.blog-cta-badge {
display: inline-block;
padding: 5px 14px;
background: rgba(111, 185, 44, 0.25);
border: 1px solid rgba(111, 185, 44, 0.5);
border-radius: 20px;
color: #8be63d;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.05em;
margin-bottom: 12px;
}
.blog-cta-title {
font-size: 2.1rem;
font-weight: 800;
color: #ffffff;
line-height: 1.25;
margin-bottom: 10px;
max-width: 650px;
}
.blog-cta-desc {
font-size: 1.05rem;
color: #cbd5e1;
line-height: 1.6;
margin-bottom: 0;
max-width: 650px;
}
.blog-cta-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.btn-hero-outline-white {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 26px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 30px;
color: #ffffff;
font-size: 0.95rem;
font-weight: 800;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-hero-outline-white:hover {
background: #ffffff;
color: #0b5d2b;
border-color: #ffffff;
transform: translateY(-2px);
}
/* ==========================================================================
Responsive Adjustments for Blog & Blog Detail
========================================================================== */
@media (max-width: 991px) {
.blog-layout-grid,
.blog-detail-layout {
grid-template-columns: 1fr;
}
.blog-featured-card {
grid-template-columns: 1fr;
}
.blog-featured-media {
min-height: 260px;
}
.blog-featured-body {
padding: 28px 24px;
}
.single-post-article {
padding: 30px 22px;
}
.blog-cta-inner {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 640px) {
.blog-grid-cards,
.related-posts-grid,
.article-prev-next-nav,
.form-row-2col {
grid-template-columns: 1fr;
}
.banner-page-title {
font-size: 2.2rem;
}
.blog-cta-title {
font-size: 1.6rem;
}
.article-mid-cta {
flex-direction: column;
align-items: flex-start;
}
}
/* Bottom CTA Banner on Blog Pages */
.blog-bottom-cta {
background: linear-gradient(135deg, #0b1f14 0%, #0b5d2b 100%);
padding: 70px 0;
color: #ffffff;
}
.blog-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.blog-cta-badge {
display: inline-block;
padding: 5px 14px;
background: rgba(111, 185, 44, 0.25);
border: 1px solid rgba(111, 185, 44, 0.5);
border-radius: 20px;
color: #8be63d;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.05em;
margin-bottom: 12px;
}
.blog-cta-title {
font-size: 2.1rem;
font-weight: 800;
color: #ffffff;
line-height: 1.25;
margin-bottom: 10px;
max-width: 650px;
}
.blog-cta-desc {
font-size: 1.05rem;
color: #cbd5e1;
line-height: 1.6;
margin-bottom: 0;
max-width: 650px;
}
.blog-cta-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.btn-hero-outline-white {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 26px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 30px;
color: #ffffff;
font-size: 0.95rem;
font-weight: 800;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-hero-outline-white:hover {
background: #ffffff;
color: #0b5d2b;
border-color: #ffffff;
transform: translateY(-2px);
}
/* ==========================================================================
Responsive Adjustments for Blog & Blog Detail
========================================================================== */
@media (max-width: 991px) {
.blog-layout-grid,
.blog-detail-layout {
grid-template-columns: 1fr;
}
.blog-featured-card {
grid-template-columns: 1fr;
}
.blog-featured-media {
min-height: 260px;
}
.blog-featured-body {
padding: 28px 24px;
}
.single-post-article {
padding: 30px 22px;
}
.blog-cta-inner {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 640px) {
.blog-grid-cards,
.related-posts-grid,
.article-prev-next-nav,
.form-row-2col {
grid-template-columns: 1fr;
}
.banner-page-title {
font-size: 2.2rem;
}
.blog-cta-title {
font-size: 1.6rem;
}
.article-mid-cta {
flex-direction: column;
align-items: flex-start;
}
.next-card {
text-align: left;
}
.next-card .nav-direction {
justify-content: flex-start;
}
}
/* Category Sidebar SVG Icons */
.cat-name {
display: flex;
align-items: center;
gap: 10px;
}
.cat-icon-svg {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #0b5d2b;
flex-shrink: 0;
transition: all 0.2s ease;
}
.widget-cat-list li a:hover .cat-icon-svg {
color: #084822;
transform: scale(1.12);
}
/* ==========================================================================
Clean & Modern Blog Comment Form Styling
========================================================================== */
.blog-comments-clean {
margin-top: 45px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 36px 32px;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}
.comments-form-title {
font-size: 1.35rem;
font-weight: 800;
color: #0f172a;
margin: 0 0 8px 0;
line-height: 1.3;
}
.comments-form-desc {
font-size: 0.9rem;
color: #64748b;
margin: 0 0 24px 0;
line-height: 1.5;
}
.comment-form-box {
display: flex;
flex-direction: column;
gap: 18px;
}
.comment-form-box .form-row-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.comment-form-box .form-group {
display: flex;
flex-direction: column;
gap: 7px;
text-align: left;
}
.comment-form-box .form-group label {
font-size: 0.88rem;
font-weight: 700;
color: #1e293b;
margin: 0;
}
.comment-form-box .form-input,
.comment-form-box .form-textarea {
width: 100%;
padding: 13px 18px;
background: #f8fafc;
border: 1.5px solid #cbd5e1;
border-radius: 12px;
font-size: 0.95rem;
color: #0f172a;
outline: none;
font-family: inherit;
box-sizing: border-box;
transition: all 0.25s ease;
}
.comment-form-box .form-input::placeholder,
.comment-form-box .form-textarea::placeholder {
color: #94a3b8;
}
.comment-form-box .form-input:focus,
.comment-form-box .form-textarea:focus {
background: #ffffff;
border-color: #0b5d2b;
box-shadow: 0 0 0 4px rgba(11, 93, 43, 0.12);
}
.comment-form-box .form-textarea {
min-height: 130px;
resize: vertical;
line-height: 1.6;
}
.comment-form-box .form-checkbox-group {
margin: 4px 0 8px 0;
}
.comment-form-box .checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.86rem;
color: #475569;
cursor: pointer;
line-height: 1.5;
user-select: none;
}
.comment-form-box .checkbox-label input[type="checkbox"] {
width: 17px;
height: 17px;
margin-top: 2px;
accent-color: #0b5d2b;
cursor: pointer;
flex-shrink: 0;
}
.comment-form-box .form-submit-row {
margin-top: 4px;
}
.btn-submit-comment {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 32px;
background: #0b5d2b;
color: #ffffff !important;
font-size: 0.96rem;
font-weight: 800;
border: none;
border-radius: 30px;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(11, 93, 43, 0.2);
}
.btn-submit-comment:hover {
background: #084822;
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(11, 93, 43, 0.3);
}
.btn-submit-comment svg {
transition: transform 0.2s ease;
}
.btn-submit-comment:hover svg {
transform: translateX(4px);
}
@media (max-width: 640px) {
.comment-form-box .form-row-grid {
grid-template-columns: 1fr;
}
.blog-comments-clean {
padding: 24px 18px;
}
.btn-submit-comment {
width: 100%;
}
}
/* WordPress Native Comment Form Styles Support */
#comments,
.comments-area,
.single-comments-section {
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
margin-top: 0 !important;
}
/* Ensure no nested borders or backgrounds inside comment area */
.single-comments-section #comments,
.single-comments-section .comments-area,
.blog-comments-clean #comments,
.blog-comments-clean .comments-area,
.blog-comments-clean .comment-respond,
.blog-comments-clean #respond,
#comments #comments,
.comments-area #comments,
.comments-area .blog-comments-clean .comment-respond {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.logged-in-as {
font-size: 0.88rem;
color: #64748b;
margin: 0 0 20px 0;
}
.logged-in-as a {
color: #0b5d2b;
font-weight: 700;
text-decoration: none;
}
.logged-in-as a:hover {
text-decoration: underline;
}
#commentform {
display: flex;
flex-direction: column;
gap: 18px;
}
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
width: 100%;
padding: 13px 18px;
background: #f8fafc;
border: 1.5px solid #cbd5e1;
border-radius: 12px;
font-size: 0.95rem;
color: #0f172a;
outline: none;
font-family: inherit;
box-sizing: border-box;
transition: all 0.25s ease;
}
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform textarea:focus {
background: #ffffff;
border-color: #0b5d2b;
box-shadow: 0 0 0 4px rgba(11, 93, 43, 0.12);
}
#commentform input[type="submit"],
.form-submit input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 32px;
background: #0b5d2b;
color: #ffffff !important;
font-size: 0.96rem;
font-weight: 800;
border: none;
border-radius: 30px;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(11, 93, 43, 0.2);
}
#commentform input[type="submit"]:hover,
.form-submit input[type="submit"]:hover {
background: #084822;
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(11, 93, 43, 0.3);
}
/* ==========================================================================
Article Title & Meta Bar Generous Spacing
========================================================================== */
.article-title {
font-size: 2.25rem;
font-weight: 800;
color: #0f172a;
line-height: 1.35;
margin: 0 0 24px 0 !important;
letter-spacing: -0.01em;
}
.article-meta-bar {
display: flex !important;
align-items: center;
gap: 18px !important;
row-gap: 14px !important;
margin: 0 0 32px 0 !important;
padding: 0 0 20px 0 !important;
border-bottom: 1px solid #e2e8f0;
flex-wrap: wrap;
font-size: 0.92rem;
color: #64748b;
}
.article-meta-bar .meta-item {
display: inline-flex !important;
align-items: center;
gap: 8px !important;
color: #475569;
font-weight: 600;
}
.article-meta-bar .meta-item svg {
color: #0b5d2b;
flex-shrink: 0;
width: 16px;
height: 16px;
}
.article-meta-bar .meta-item a {
color: #0b5d2b;
text-decoration: none;
font-weight: 700;
transition: color 0.2s ease;
}
.article-meta-bar .meta-item a:hover {
color: #084822;
text-decoration: underline;
}
.article-meta-bar .meta-divider {
color: #cbd5e1;
font-size: 1.05rem;
font-weight: 300;
margin: 0 6px !important;
user-select: none;
}
.article-meta-bar .meta-tags-wrap {
display: inline-flex !important;
align-items: center;
gap: 8px !important;
flex-wrap: wrap;
}
.article-meta-bar .inline-tag {
color: #0b5d2b !important;
background: #eaf6ea;
padding: 4px 12px !important;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
display: inline-block;
}
.article-meta-bar .inline-tag:hover {
background: #0b5d2b;
color: #ffffff !important;
text-decoration: none;
}
/* ==========================================================================
Clean Service Page (Screenshot 2 Precision Styles)
========================================================================== */
.clean-script-font {
font-family: 'Dancing Script', 'Caveat', cursive;
}
/* 1. Hero Panoramic Banner Section (Matching User Screenshot) */
.clean-hero-banner-wrap {
position: relative;
background-color: #ffffff;
overflow: hidden;
padding: 0;
}
.clean-hero-banner-inner {
position: relative;
width: 100%;
min-height: 480px;
background: linear-gradient(90deg, #ffffff 0%, #ffffff 36%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 255, 255, 0.4) 62%, rgba(255, 255, 255, 0) 75%), url('../images/clean-hero-wide.jpg') right center / cover no-repeat;
display: flex;
align-items: center;
}
.uz-hero-banner-inner {
position: relative;
width: 100%;
min-height: 480px;
background: linear-gradient(90deg, #ffffff 0%, #ffffff 36%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 255, 255, 0.4) 62%, rgba(255, 255, 255, 0) 75%), url('../images/uz-hero-wide.jpg') right center / cover no-repeat;
display: flex;
align-items: center;
}
.clean-hero-banner-container {
position: relative;
z-index: 2;
padding-top: 28px;
padding-bottom: 0;
}
.clean-hero-banner-content {
max-width: 580px;
padding: 0;
}
.clean-tag-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #eaf6ea;
color: #0b5d2b;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.8px;
padding: 5px 14px;
border-radius: 9999px;
border: 1px solid rgba(11, 93, 43, 0.15);
text-transform: uppercase;
margin-bottom: 12px;
}
.clean-tag-pill .dot {
width: 6px;
height: 6px;
background-color: #0b5d2b;
border-radius: 50%;
}
.clean-new-hero-title {
font-size: 2.85rem;
font-weight: 850;
color: #0b4d25;
line-height: 1.12;
letter-spacing: -0.025em;
margin-bottom: 12px;
}
.clean-new-hero-subtitle {
font-size: 1.15rem;
font-weight: 750;
color: #0f172a;
margin-bottom: 10px;
line-height: 1.35;
}
.clean-new-hero-desc {
font-size: 0.94rem;
color: #475569;
line-height: 1.55;
margin-bottom: 22px;
max-width: 520px;
}
.clean-hero-btn-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.btn-clean-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: #0b5d2b;
color: #ffffff;
font-weight: 700;
font-size: 0.94rem;
padding: 12px 24px;
border-radius: 10px;
border: none;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(11, 93, 43, 0.25);
text-decoration: none;
}
.btn-clean-primary:hover {
background: #084822;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(11, 93, 43, 0.35);
color: #ffffff;
}
.btn-clean-wa {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffffff;
color: #0b5d2b;
font-weight: 700;
font-size: 0.94rem;
padding: 11px 22px;
border-radius: 10px;
border: 1.5px solid #0b5d2b;
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none;
}
.btn-clean-wa:hover {
background: #eaf6ea;
transform: translateY(-2px);
color: #0b5d2b;
}
.btn-clean-wa svg {
color: #25D366;
}
/* 4 Trust Badges Horizontal Container at Bottom Left */
.clean-hero-bottom-strip {
display: flex;
align-items: center;
gap: 20px;
background: #ffffff;
border: 1px solid #e2ece3;
border-radius: 16px 16px 0 0;
padding: 14px 22px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
margin-top: 24px;
width: fit-content;
}
.clean-trust-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
background: #ffffff;
border: 1px solid #e2ece3;
border-radius: 16px;
padding: 14px 16px;
}
.clean-trust-item {
display: flex;
align-items: center;
gap: 10px;
}
.clean-trust-icon {
width: 34px;
height: 34px;
border-radius: 50%;
background: #eaf6ea;
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.clean-trust-text {
display: flex;
flex-direction: column;
}
.clean-trust-title {
font-size: 0.88rem;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.clean-trust-sub {
font-size: 0.72rem;
color: #64748b;
line-height: 1.2;
}
/* Floating Rating Box on the Bottom-Right */
.clean-hero-rating-badge-card {
position: absolute;
right: 28px;
bottom: 24px;
background: #ffffff;
border-radius: 14px;
padding: 12px 18px;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
border: 1px solid rgba(226, 232, 240, 0.9);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 5;
}
.clean-hero-rating-badge-card .rating-row {
display: flex;
align-items: center;
gap: 10px;
}
.clean-hero-rating-badge-card .rating-icon-wrap {
width: 32px;
height: 32px;
border-radius: 50%;
background: #eaf6ea;
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.clean-hero-rating-badge-card .rating-val {
font-size: 1.05rem;
font-weight: 850;
color: #0f172a;
line-height: 1;
display: block;
}
.clean-hero-rating-badge-card .rating-lbl {
font-size: 0.74rem;
color: #64748b;
font-weight: 600;
}
.clean-hero-rating-badge-card .rating-divider {
height: 1px;
background: #f1f5f9;
}
/* Hero Right Visual with floating cards */
.clean-hero-visual-card {
position: relative;
border-radius: 20px;
}
.clean-hero-visual-card .main-img {
width: 100%;
height: 440px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
display: block;
}
.clean-floating-badge {
position: absolute;
background: #ffffff;
border-radius: 14px;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
border: 1px solid rgba(226, 232, 240, 0.8);
z-index: 5;
animation: cleanFloat 4s ease-in-out infinite alternate;
}
.clean-floating-badge.badge-top-right {
top: 24px;
right: -16px;
}
.clean-floating-badge.badge-mid-right {
bottom: 50px;
right: -16px;
animation-delay: 2s;
}
@keyframes cleanFloat {
0% { transform: translateY(0); }
100% { transform: translateY(-8px); }
}
.clean-floating-badge .badge-icon-wrap {
width: 32px;
height: 32px;
background: #eaf6ea;
color: #0b5d2b;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.clean-floating-badge .badge-num {
font-size: 1.1rem;
font-weight: 850;
color: #0f172a;
line-height: 1;
}
.clean-floating-badge .badge-label {
font-size: 0.75rem;
color: #64748b;
font-weight: 600;
}
/* 2. Services Section (5 Columns) */
.clean-services-section {
padding: 64px 0 54px;
background: #ffffff;
}
.clean-services-5col {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
margin-top: 36px;
}
.clean-srv-card-new {
background: #ffffff;
border: 1px solid #e6efe7;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}
.clean-srv-card-new:hover {
transform: translateY(-6px);
box-shadow: 0 16px 30px rgba(11, 93, 43, 0.1);
border-color: #0b5d2b;
}
.clean-srv-card-new .card-img-wrap {
height: 155px;
overflow: hidden;
position: relative;
}
.clean-srv-card-new .card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.clean-srv-card-new:hover .card-img-wrap img {
transform: scale(1.06);
}
.clean-srv-card-new .card-icon-bubble {
width: 44px;
height: 44px;
border-radius: 50%;
background: #eaf6ea;
color: #0b5d2b;
border: 3px solid #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin: -22px 0 10px 16px;
position: relative;
z-index: 2;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.clean-srv-card-new .card-body {
padding: 0 18px 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.clean-srv-card-new .card-title {
font-size: 1.1rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
line-height: 1.3;
}
.clean-srv-card-new .card-desc {
font-size: 0.86rem;
color: #64748b;
line-height: 1.5;
margin-bottom: 16px;
flex: 1;
}
.clean-srv-card-new .card-more-link {
font-size: 0.88rem;
font-weight: 700;
color: #0b5d2b;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.2s ease;
text-decoration: none;
}
.clean-srv-card-new:hover .card-more-link {
gap: 10px;
color: #084822;
}
/* 3. Why MBK Section (Full-Width Edge-to-Edge Banner Matching Screenshot 2) */
.clean-why-fullwidth-section {
width: 100%;
background: linear-gradient(135deg, #093e20 0%, #062f17 100%);
padding: 50px 0;
color: #ffffff;
position: relative;
overflow: hidden;
margin: 40px 0;
}
.clean-why-fullwidth-container {
display: grid;
grid-template-columns: 1.1fr 1.3fr 1.05fr;
gap: 40px;
align-items: center;
}
.clean-why-pill {
display: inline-block;
background: #6fb92c;
color: #ffffff;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.8px;
padding: 4px 14px;
border-radius: 9999px;
margin-bottom: 14px;
text-transform: uppercase;
}
.clean-why-heading {
font-size: 2.2rem;
font-weight: 850;
line-height: 1.18;
margin-bottom: 14px;
color: #ffffff;
letter-spacing: -0.02em;
}
.clean-why-text {
font-size: 0.92rem;
color: #e2e8f0;
line-height: 1.6;
margin-bottom: 22px;
}
.btn-why-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: #6fb92c;
color: #ffffff;
font-weight: 700;
font-size: 0.9rem;
padding: 10px 22px;
border-radius: 8px;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.btn-why-cta:hover {
background: #5fae22;
transform: translateY(-2px);
color: #ffffff;
}
.clean-why-grid-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 24px;
}
.clean-why-grid-item {
display: flex;
align-items: flex-start;
gap: 14px;
}
.clean-why-icon-bubble {
width: 48px;
height: 48px;
border-radius: 50%;
background: radial-gradient(circle, #259647 0%, #156d31 100%);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.3);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.clean-why-item-title {
font-size: 1.05rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 4px;
line-height: 1.2;
}
.clean-why-item-desc {
font-size: 0.82rem;
color: #cbd5e1;
line-height: 1.4;
}
.clean-why-img-wrap {
position: relative;
border-radius: 16px;
overflow: hidden;
height: 250px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.clean-why-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.clean-why-script-badge {
position: absolute;
bottom: 14px;
right: 14px;
text-align: right;
font-family: 'Dancing Script', 'Caveat', cursive;
font-size: 1.55rem;
font-weight: 700;
color: #ffffff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
pointer-events: none;
line-height: 1.15;
}
/* 4. Steps Section ("SO EINFACH GEHT'S") */
.clean-steps-section {
padding: 60px 0;
background: #ffffff;
}
.clean-steps-grid {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: center;
gap: 16px;
margin-top: 40px;
}
.clean-step-card {
background: #ffffff;
text-align: left;
display: flex;
flex-direction: column;
}
.clean-step-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.clean-step-icon-wrap {
width: 48px;
height: 48px;
border-radius: 50%;
background: #0b5d2b;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.clean-step-num {
font-size: 0.95rem;
font-weight: 800;
color: #0b5d2b;
}
.clean-step-title {
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
}
.clean-step-desc {
font-size: 0.86rem;
color: #64748b;
line-height: 1.5;
}
.clean-step-arrow {
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 24px;
}
/* 5. Reviews Section (Promo Left + Interactive Carousel Right) */
.clean-reviews-section {
padding: 60px 0 70px;
background: #f8fafc;
overflow: hidden;
}
.clean-reviews-layout {
display: grid;
grid-template-columns: 310px 1fr;
gap: 32px;
align-items: stretch;
}
.clean-review-promo-card {
position: relative;
border-radius: 20px;
overflow: hidden;
min-height: 320px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
display: flex;
}
.clean-review-promo-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.clean-review-top-badge {
position: absolute;
top: 18px;
left: 18px;
background: #0b5d2b;
color: #ffffff;
padding: 7px 14px;
border-radius: 12px;
font-size: 0.82rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.clean-review-top-badge .stars {
color: #facc15;
font-size: 0.88rem;
letter-spacing: 1.5px;
}
.clean-review-script-text {
position: absolute;
bottom: 18px;
left: 18px;
right: 18px;
font-family: 'Dancing Script', 'Caveat', cursive;
font-size: 1.8rem;
font-weight: 700;
color: #0f172a;
line-height: 1.2;
text-shadow: 0 1px 4px rgba(255, 255, 255, 0.95);
z-index: 2;
}
/* Right Column Carousel */
.clean-reviews-col-right {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
}
.clean-reviews-top-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.clean-reviews-header-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 700;
color: #0b5d2b;
background: #eaf6ea;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(11, 93, 43, 0.15);
}
.clean-reviews-nav-btns {
display: flex;
align-items: center;
gap: 10px;
}
.clean-rev-nav-btn {
width: 38px;
height: 38px;
border-radius: 50%;
background: #ffffff;
border: 1.5px solid #e2e8f0;
color: #0f172a;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}
.clean-rev-nav-btn:hover {
background: #0b5d2b;
border-color: #0b5d2b;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(11, 93, 43, 0.25);
}
.clean-reviews-slider-viewport {
position: relative;
overflow: hidden;
width: 100%;
min-width: 0;
border-radius: 20px;
padding: 6px 2px;
}
.clean-reviews-slider-track {
display: flex;
gap: 20px;
width: 100%;
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
align-items: stretch;
}
.clean-review-card-item {
width: calc((100% - 20px) / 2);
min-width: calc((100% - 20px) / 2);
box-sizing: border-box;
background: #ffffff;
border: 1px solid #e2ece3;
border-radius: 20px;
padding: 26px 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
flex-shrink: 0;
}
.clean-review-card-item:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(11, 93, 43, 0.1);
border-color: #6fb92c;
}
.clean-review-stars {
color: #f59e0b;
font-size: 1.05rem;
letter-spacing: 2px;
margin-bottom: 12px;
}
.clean-review-quote {
font-size: 0.92rem;
color: #334155;
line-height: 1.6;
margin-bottom: 18px;
min-height: 68px;
}
.clean-review-author {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid #f1f5f9;
padding-top: 14px;
}
.clean-author-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: #e2e8f0;
color: #475569;
font-weight: 800;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.clean-author-name {
font-size: 0.92rem;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.clean-author-city {
font-size: 0.76rem;
color: #64748b;
margin-top: 2px;
}
/* Bullet Pagination */
.clean-reviews-dots-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
.clean-rev-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #cbd5e1;
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.clean-rev-dot:hover {
background: #94a3b8;
}
.clean-rev-dot.active {
background: #0b5d2b;
width: 24px;
border-radius: 999px;
}
.clean-reviews-cta-center {
text-align: center;
margin-top: 32px;
}
.btn-reviews-green {
display: inline-flex;
align-items: center;
gap: 8px;
background: #0b5d2b;
color: #ffffff;
font-weight: 700;
font-size: 0.94rem;
padding: 12px 28px;
border-radius: 9999px;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 4px 14px rgba(11, 93, 43, 0.2);
}
.btn-reviews-green:hover {
background: #084822;
transform: translateY(-2px);
color: #ffffff;
}
/* 6. FAQ Section */
.clean-faq-section {
padding: 60px 0;
background: #ffffff;
}
.clean-faq-grid {
display: grid;
grid-template-columns: 0.85fr 1.35fr;
gap: 48px;
align-items: flex-start;
}
.clean-faq-accordion {
display: flex;
flex-direction: column;
gap: 12px;
}
.clean-faq-item {
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
transition: all 0.25s ease;
}
.clean-faq-item.active {
border-color: #0b5d2b;
box-shadow: 0 4px 16px rgba(11, 93, 43, 0.08);
}
.clean-faq-question {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.98rem;
font-weight: 750;
color: #0f172a;
cursor: pointer;
gap: 16px;
}
.clean-faq-toggle-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: #f1f5f9;
color: #0f172a;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 600;
flex-shrink: 0;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.clean-faq-item.active .clean-faq-toggle-icon {
transform: rotate(45deg);
background: #eaf6ea;
color: #0b5d2b;
}
.clean-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
padding: 0 20px;
color: #475569;
font-size: 0.92rem;
line-height: 1.6;
}
.clean-faq-item.active .clean-faq-answer {
max-height: 300px;
padding: 0 20px 18px;
transition: max-height 0.3s ease-in-out, padding 0.3s ease;
}
/* 7. Full-Width CTA Banner attached to Footer (Screenshot 2 Match) */
.clean-cta-banner-section.clean-cta-fullwidth {
width: 100%;
margin: 0;
padding: 38px 0;
background: linear-gradient(90deg, rgba(8, 48, 22, 0.97) 0%, rgba(8, 55, 25, 0.92) 28%, rgba(8, 55, 25, 0.70) 48%, rgba(8, 55, 25, 0.20) 70%, rgba(8, 55, 25, 0.05) 100%), url('../images/munich-skyline.jpg') center bottom / cover no-repeat;
border-top: 1px solid rgba(255, 255, 255, 0.12);
display: block;
position: relative;
z-index: 2;
}
.clean-cta-full-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
}
.clean-cta-info {
max-width: 480px;
flex-shrink: 0;
}
.clean-cta-pill {
display: inline-block;
background: rgba(255, 255, 255, 0.16);
color: #86efac;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.8px;
padding: 4px 14px;
border-radius: 9999px;
margin-bottom: 8px;
text-transform: uppercase;
}
.clean-cta-title {
font-size: 1.85rem;
font-weight: 850;
margin-bottom: 6px;
color: #ffffff;
line-height: 1.2;
}
.clean-cta-sub {
font-size: 0.90rem;
color: #e2e8f0;
}
.clean-cta-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: nowrap;
}
.btn-cta-phone-pill {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(6, 45, 20, 0.90);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
padding: 9px 20px;
color: #ffffff;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn-cta-phone-pill:hover {
background: #084822;
transform: translateY(-2px);
color: #ffffff;
}
.btn-cta-phone-pill svg {
color: #86efac;
flex-shrink: 0;
}
.btn-cta-phone-pill .phone-text strong {
display: block;
font-size: 0.92rem;
line-height: 1.15;
color: #ffffff;
}
.btn-cta-phone-pill .phone-text small {
font-size: 0.68rem;
color: #cbd5e1;
}
.btn-cta-wa-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(6, 45, 20, 0.90);
backdrop-filter: blur(6px);
border: 1px solid rgba(37, 211, 102, 0.45);
border-radius: 9999px;
padding: 13px 22px;
color: #ffffff;
font-weight: 700;
font-size: 0.90rem;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn-cta-wa-pill:hover {
background: #0b5d2b;
transform: translateY(-2px);
color: #ffffff;
}
.btn-cta-quote-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #6fb92c;
border: none;
border-radius: 9999px;
padding: 14px 24px;
color: #ffffff;
font-weight: 800;
font-size: 0.90rem;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(111, 185, 44, 0.35);
}
.btn-cta-quote-pill:hover {
background: #5fae22;
transform: translateY(-2px);
}
/* Responsive Breakpoints */
@media (max-width: 1100px) {
.clean-services-5col {
grid-template-columns: repeat(3, 1fr);
}
.clean-why-box {
grid-template-columns: 1fr;
}
.clean-why-img-card {
min-height: 220px;
}
.clean-steps-grid {
grid-template-columns: 1fr 1fr;
}
.clean-step-arrow {
display: none;
}
.clean-cta-banner-box {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 868px) {
.clean-hero-banner-inner {
min-height: auto;
padding: 30px 0;
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 100%), url('../images/clean-hero-wide.jpg') center / cover no-repeat;
}
.uz-hero-banner-inner {
min-height: auto;
padding: 30px 0;
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 100%), url('../images/uz-hero-wide.jpg') center / cover no-repeat;
}
.clean-hero-bottom-strip {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
border-radius: 16px;
margin-top: 24px;
}
.clean-hero-rating-badge-card {
position: static;
margin-top: 20px;
width: 100%;
}
.clean-new-hero-grid {
grid-template-columns: 1fr;
}
.clean-hero-visual-card .main-img {
height: 320px;
}
.clean-floating-badge.badge-top-right {
right: 10px;
top: 10px;
}
.clean-floating-badge.badge-mid-right {
right: 10px;
bottom: 20px;
}
.clean-trust-strip {
grid-template-columns: 1fr 1fr;
}
.clean-services-5col {
grid-template-columns: repeat(2, 1fr);
}
.clean-reviews-layout {
grid-template-columns: 1fr;
}
.clean-reviews-cards-wrap {
grid-template-columns: 1fr;
}
.clean-cta-full-container {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.clean-cta-actions {
flex-wrap: wrap;
width: 100%;
}
}
@media (max-width: 580px) {
.clean-new-hero-title {
font-size: 2.1rem;
}
.clean-hero-bottom-strip {
grid-template-columns: 1fr;
}
.clean-trust-strip {
grid-template-columns: 1fr;
}
.clean-services-5col {
grid-template-columns: 1fr;
}
.clean-steps-grid {
grid-template-columns: 1fr;
}
.clean-why-grid-2x2 {
grid-template-columns: 1fr;
}
.clean-review-card-item {
width: 100%;
min-width: 100%;
}
.clean-cta-actions {
flex-direction: column;
align-items: stretch;
}
.btn-cta-phone-pill,
.btn-cta-wa-pill,
.btn-cta-quote-pill {
}
/* ==========================================================================
Clean Service - 3-Column Cards with Top Flush Image
========================================================================== */
.clean-cards-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 40px;
}
.clean-srv-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 20px;
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
position: relative;
}
.clean-srv-card:hover {
border-color: #6fb92c;
transform: translateY(-6px);
box-shadow: 0 16px 36px rgba(11, 93, 43, 0.12);
}
.clean-card-img-wrap {
width: 100%;
height: 210px;
overflow: hidden;
position: relative;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.clean-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease;
}
.clean-srv-card:hover .clean-card-img-wrap img {
transform: scale(1.06);
}
.clean-card-body {
padding: 0 24px 26px;
display: flex;
flex-direction: column;
flex: 1;
}
.clean-card-icon-wrap {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: -24px 0 16px 0;
font-size: 1.25rem;
background: #eaf6ea;
color: #16a34a;
border: 3px solid #ffffff;
position: relative;
z-index: 2;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.clean-srv-card.card-green .clean-card-icon-wrap {
background: #eaf6ea;
color: #16a34a;
}
.clean-card-title {
font-size: 1.35rem;
font-weight: 800;
color: #0b1526;
margin-bottom: 8px;
}
.clean-card-desc {
font-size: 0.88rem;
color: #64748b;
line-height: 1.55;
margin-bottom: 20px;
}
.clean-card-features {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.clean-card-features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.88rem;
font-weight: 600;
color: #334155;
}
.clean-card-features li svg {
flex-shrink: 0;
color: #16a34a;
}
.btn-card-clean {
width: 100%;
padding: 13px 20px;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 800;
color: #ffffff;
background: linear-gradient(135deg, #5fae22 0%, #6fb92c 100%);
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 14px rgba(95, 174, 34, 0.32);
transition: all 0.25s ease;
text-decoration: none;
}
.btn-card-clean:hover {
background: linear-gradient(135deg, #0b5d2b 0%, #5fae22 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.4);
color: #ffffff;
}
@media (max-width: 991px) {
.clean-cards-3col {
grid-template-columns: 1fr;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
}
/* ==========================================================================
MBK Umzug Service Page (Redesigned UI - Screenshot Match)
========================================================================== */
/* --- 1. Hero Section --- */
.uz-hero-section {
position: relative;
background-color: #f8fafc;
padding: 60px 0 70px;
background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%, #f8fafc 100%);
overflow: hidden;
}
.uz-hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.9fr 1.05fr;
gap: 30px;
align-items: center;
}
.uz-hero-center-img {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.uz-hero-center-img img {
width: 100%;
max-height: 540px;
object-fit: cover;
border-radius: 24px;
box-shadow: 0 16px 40px rgba(11, 93, 43, 0.12);
border: 3px solid #ffffff;
transition: transform 0.4s ease;
}
.uz-hero-center-img:hover img {
transform: scale(1.02);
}
.uz-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #0b5d2b;
background-color: #eaf6ea;
border: 1px solid rgba(11, 93, 43, 0.2);
padding: 6px 16px;
border-radius: 9999px;
margin-bottom: 16px;
}
.uz-hero-title {
font-size: 3rem;
font-weight: 900;
color: #0b1526;
line-height: 1.18;
margin-bottom: 12px;
letter-spacing: -0.025em;
}
.uz-hero-title .text-green {
color: #0b5d2b;
}
.uz-hero-subtitle {
font-size: 1.35rem;
font-weight: 800;
color: #0b1526;
margin-bottom: 14px;
}
.uz-hero-desc {
font-size: 1.05rem;
color: #475569;
line-height: 1.6;
margin-bottom: 28px;
max-width: 580px;
}
.uz-hero-ctas {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.uz-btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: #0b5d2b;
color: #ffffff;
font-size: 1rem;
font-weight: 700;
padding: 14px 28px;
border-radius: 9999px;
box-shadow: 0 6px 20px rgba(11, 93, 43, 0.3);
transition: all 0.25s ease;
text-decoration: none;
border: none;
cursor: pointer;
}
.uz-btn-primary:hover {
background-color: #084822;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(11, 93, 43, 0.4);
color: #ffffff;
}
.uz-btn-wa {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: #ffffff;
color: #0b5d2b;
font-size: 1rem;
font-weight: 700;
padding: 13px 26px;
border-radius: 9999px;
border: 1.5px solid #0b5d2b;
transition: all 0.25s ease;
text-decoration: none;
}
.uz-btn-wa:hover {
background-color: #eaf6ea;
transform: translateY(-2px);
color: #0b5d2b;
}
/* 4 Trust Feature Badges below Hero */
.uz-trust-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}
.uz-trust-item {
display: flex;
align-items: flex-start;
gap: 10px;
}
.uz-trust-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #eaf6ea;
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.uz-trust-text strong {
display: block;
font-size: 0.88rem;
font-weight: 800;
color: #0f172a;
line-height: 1.25;
}
.uz-trust-text small {
display: block;
font-size: 0.75rem;
color: #64748b;
line-height: 1.35;
}
/* Quick Quote Card */
.uz-quote-card {
background: #ffffff;
border-radius: 20px;
padding: 32px 30px;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
border: 1px solid #e2e8f0;
}
.uz-quote-card-header {
margin-bottom: 20px;
}
.uz-quote-card-header h3 {
font-size: 1.5rem;
font-weight: 800;
color: #0b5d2b;
margin-bottom: 4px;
}
.uz-quote-card-header p {
font-size: 0.88rem;
color: #16a34a;
font-weight: 600;
}
.uz-tabs-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
background: #f1f5f9;
padding: 5px;
border-radius: 12px;
margin-bottom: 20px;
}
.uz-tab-btn {
padding: 9px 12px;
font-size: 0.88rem;
font-weight: 700;
border: none;
border-radius: 8px;
background: transparent;
color: #64748b;
cursor: pointer;
transition: all 0.2s ease;
}
.uz-tab-btn.active {
background: #0b5d2b;
color: #ffffff;
box-shadow: 0 2px 8px rgba(11, 93, 43, 0.25);
}
.uz-form-group {
position: relative;
margin-bottom: 14px;
}
.uz-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
pointer-events: none;
}
.uz-input {
width: 100%;
padding: 12px 14px 12px 42px;
font-size: 0.92rem;
font-family: inherit;
color: #0f172a;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
transition: all 0.2s ease;
outline: none;
}
.uz-input:focus {
background: #ffffff;
border-color: #0b5d2b;
box-shadow: 0 0 0 3px rgba(11, 93, 43, 0.12);
}
.uz-btn-submit {
width: 100%;
padding: 14px 20px;
font-size: 1rem;
font-weight: 800;
color: #ffffff;
background-color: #0b5d2b;
border: none;
border-radius: 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.25s ease;
margin-top: 6px;
box-shadow: 0 4px 14px rgba(11, 93, 43, 0.3);
}
.uz-btn-submit:hover {
background-color: #084822;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.4);
}
/* --- 2. Intro Section (4 Features Grid) --- */
.uz-intro-section {
padding: 80px 0;
background-color: #ffffff;
}
.uz-intro-grid {
display: grid;
grid-template-columns: 0.95fr 1.65fr;
gap: 40px;
align-items: center;
}
.uz-intro-left {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.uz-intro-left h2 {
font-size: 2.2rem;
font-weight: 900;
color: #0f172a;
line-height: 1.25;
margin-bottom: 16px;
}
.uz-intro-left p {
font-size: 1rem;
color: #475569;
line-height: 1.65;
margin-bottom: 24px;
}
.uz-cards-4col {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.uz-feature-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 16px;
padding: 24px 16px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}
.uz-feature-card:hover {
border-color: #0b5d2b;
transform: translateY(-5px);
box-shadow: 0 12px 28px rgba(11, 93, 43, 0.1);
}
.uz-feature-card-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #eaf6ea;
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px auto;
}
.uz-feature-card h4 {
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
}
.uz-feature-card p {
font-size: 0.84rem;
color: #64748b;
line-height: 1.45;
}
/* --- 3. Process 4 Steps Section --- */
.uz-steps-section {
padding: 80px 0;
background-color: #f8fafc;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
.uz-steps-container {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
gap: 16px;
align-items: flex-start;
margin-top: 48px;
}
.uz-step-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.uz-step-icon-wrap {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #0b5d2b;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
box-shadow: 0 6px 18px rgba(11, 93, 43, 0.25);
}
.uz-step-title {
font-size: 1.1rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
}
.uz-step-desc {
font-size: 0.88rem;
color: #64748b;
line-height: 1.5;
max-width: 220px;
}
.uz-step-arrow {
display: flex;
align-items: center;
justify-content: center;
padding-top: 20px;
color: #94a3b8;
}
/* --- 4. Dark Green Benefit Showcase Section --- */
.uz-benefits-section {
padding: 84px 0;
background-color: #083d1c;
color: #ffffff;
}
.uz-benefits-grid {
display: grid;
grid-template-columns: 1.1fr 1.1fr;
gap: 50px;
align-items: center;
}
.uz-benefits-left .uz-hero-badge {
background-color: rgba(255, 255, 255, 0.15);
color: #6fb92c;
border-color: rgba(255, 255, 255, 0.2);
}
.uz-benefits-title {
font-size: 2.4rem;
font-weight: 900;
color: #ffffff;
line-height: 1.2;
margin-bottom: 32px;
}
.uz-benefits-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.uz-benefit-box {
display: flex;
align-items: flex-start;
gap: 14px;
}
.uz-benefit-icon {
width: 42px;
height: 42px;
border-radius: 50%;
background-color: rgba(111, 185, 44, 0.2);
color: #6fb92c;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.uz-benefit-info h4 {
font-size: 1.1rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 4px;
}
.uz-benefit-info p {
font-size: 0.88rem;
color: #cbd5e1;
line-height: 1.45;
}
.uz-benefits-image-card {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}
.uz-benefits-image-card img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
}
.uz-benefits-img-overlay {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
background: rgba(11, 21, 38, 0.75);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 14px;
padding: 16px 20px;
color: #ffffff;
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
}
/* --- 5. Services Grid Section ("Alles aus einer Hand") --- */
.uz-services-section {
padding: 84px 0;
background-color: #ffffff;
}
.uz-srv-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 44px;
}
.uz-srv-card-item {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.uz-srv-card-item:hover {
border-color: #0b5d2b;
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(11, 93, 43, 0.12);
}
.uz-srv-card-thumb {
width: 100%;
height: 180px;
overflow: hidden;
}
.uz-srv-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.uz-srv-card-item:hover .uz-srv-card-thumb img {
transform: scale(1.06);
}
.uz-srv-card-content {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.uz-srv-card-content h3 {
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
}
.uz-srv-card-content p {
font-size: 0.88rem;
color: #64748b;
line-height: 1.5;
margin-bottom: 16px;
flex: 1;
}
.uz-srv-card-link {
font-size: 0.92rem;
font-weight: 800;
color: #0b5d2b;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: gap 0.2s ease;
}
.uz-srv-card-link:hover {
gap: 10px;
color: #084822;
}
/* --- 6. Reviews Section --- */
.uz-reviews-section {
padding: 80px 0;
background-color: #f8fafc;
border-top: 1px solid #e2e8f0;
}
.uz-reviews-grid {
display: grid;
grid-template-columns: 0.85fr 2fr;
gap: 40px;
align-items: center;
}
.uz-rating-box {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 18px;
padding: 28px 24px;
text-align: center;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}
.uz-rating-num {
font-size: 3.2rem;
font-weight: 900;
color: #0b1526;
line-height: 1;
margin-bottom: 8px;
}
.uz-stars {
color: #f59e0b;
font-size: 1.25rem;
letter-spacing: 2px;
margin-bottom: 8px;
}
.uz-rating-sub {
font-size: 0.88rem;
font-weight: 700;
color: #64748b;
}
.uz-reviews-cards-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.uz-rev-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 16px;
padding: 22px 20px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.uz-rev-card .uz-stars {
font-size: 1rem;
margin-bottom: 10px;
}
.uz-rev-quote {
font-size: 0.88rem;
color: #334155;
line-height: 1.55;
font-style: italic;
margin-bottom: 16px;
flex: 1;
}
.uz-rev-author {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid #f1f5f9;
padding-top: 12px;
}
.uz-rev-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #0b5d2b;
color: #ffffff;
font-size: 0.85rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.uz-rev-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.uz-rev-meta strong {
display: block;
font-size: 0.86rem;
color: #0f172a;
}
.uz-rev-meta small {
font-size: 0.76rem;
color: #64748b;
}
/* --- 7. FAQ Section --- */
.uz-faq-section {
padding: 84px 0;
background-color: #ffffff;
}
.uz-faq-grid {
display: grid;
grid-template-columns: 0.95fr 1.65fr;
gap: 48px;
align-items: flex-start;
}
.uz-faq-left h2 {
font-size: 2.2rem;
font-weight: 900;
color: #0f172a;
line-height: 1.25;
margin-bottom: 14px;
}
.uz-faq-left p {
font-size: 0.98rem;
color: #64748b;
line-height: 1.6;
margin-bottom: 24px;
}
.uz-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.uz-faq-item {
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
transition: all 0.25s ease;
}
.uz-faq-item.active {
background: #ffffff;
border-color: #0b5d2b;
box-shadow: 0 6px 18px rgba(11, 93, 43, 0.08);
}
.uz-faq-btn {
width: 100%;
padding: 18px 20px;
background: none;
border: none;
font-size: 1rem;
font-weight: 800;
color: #0f172a;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-family: inherit;
}
.uz-faq-toggle-icon {
font-size: 1.25rem;
font-weight: 700;
color: #0b5d2b;
transition: transform 0.25s ease;
}
.uz-faq-item.active .uz-faq-toggle-icon {
transform: rotate(45deg);
}
.uz-faq-answer {
padding: 0 20px 18px 20px;
font-size: 0.92rem;
color: #475569;
line-height: 1.6;
display: none;
}
.uz-faq-item.active .uz-faq-answer {
display: block;
}
/* --- 8. Pre-Footer Banner --- */
.uz-prefooter-banner {
padding: 60px 0;
position: relative;
background: url('../images/munich-skyline.jpg') center/cover no-repeat;
}
.uz-prefooter-banner::before {
content: '';
position: absolute;
inset: 0;
background: rgba(11, 21, 38, 0.55);
backdrop-filter: blur(3px);
}
.uz-prefooter-banner .container {
position: relative;
z-index: 2;
}
.uz-prefooter-inner {
background: linear-gradient(135deg, rgba(11, 93, 43, 0.95) 0%, rgba(7, 61, 26, 0.95) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 32px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
color: #ffffff;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}
.uz-prefooter-left {
display: flex;
align-items: center;
gap: 18px;
}
.uz-prefooter-icon {
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.uz-prefooter-left h3 {
font-size: 1.45rem;
font-weight: 800;
margin-bottom: 4px;
}
.uz-prefooter-left p {
font-size: 0.95rem;
color: #e2e8f0;
}
.uz-prefooter-btns {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.uz-prefooter-btn-phone {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
border: 1.5px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
padding: 12px 22px;
border-radius: 9999px;
text-decoration: none;
transition: all 0.25s ease;
}
.uz-prefooter-btn-phone:hover {
background: #ffffff;
color: #0b5d2b;
}
.uz-prefooter-btn-wa {
display: inline-flex;
align-items: center;
gap: 8px;
background: #25d366;
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
padding: 12px 24px;
border-radius: 9999px;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}
.uz-prefooter-btn-wa:hover {
background: #20ba5a;
transform: translateY(-2px);
color: #ffffff;
}
/* --- Responsive Media Queries --- */
@media (max-width: 1100px) {
.uz-hero-title {
font-size: 2.5rem;
}
.uz-trust-row {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.uz-cards-4col {
grid-template-columns: repeat(2, 1fr);
}
.uz-srv-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.uz-reviews-cards-3 {
grid-template-columns: 1fr;
}
}
@media (max-width: 991px) {
.uz-hero-grid,
.uz-intro-grid,
.uz-benefits-grid,
.uz-reviews-grid,
.uz-faq-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.uz-steps-container {
grid-template-columns: 1fr;
gap: 24px;
}
.uz-step-arrow {
display: none;
}
.uz-prefooter-inner {
flex-direction: column;
text-align: center;
padding: 30px 24px;
}
.uz-prefooter-left {
flex-direction: column;
}
.uz-prefooter-btns {
flex-direction: column;
width: 100%;
}
.uz-prefooter-btn-phone,
.uz-prefooter-btn-wa {
width: 100%;
justify-content: center;
}
}
@media (max-width: 600px) {
.uz-hero-title {
font-size: 2rem;
}
.uz-trust-row,
.uz-cards-4col,
.uz-srv-grid-4,
.uz-benefits-2x2 {
grid-template-columns: 1fr;
}
.uz-hero-ctas {
flex-direction: column;
width: 100%;
}
.uz-btn-primary,
.uz-btn-wa {
width: 100%;
justify-content: center;
}
}
/* Panoramic Benefits Section */
.uz-benefits-section {
position: relative;
background: #07381b url('../images/uz-benefits-bg.png') right center / cover no-repeat;
color: #ffffff;
width: 100%;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.uz-benefits-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 55px 24px;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 420px;
position: relative;
z-index: 2;
box-sizing: border-box;
}
.uz-benefits-left-col {
flex: 0 0 520px;
max-width: 520px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.uz-benefits-badge {
background-color: rgba(111, 185, 44, 0.22) !important;
color: #76cf2c !important;
border: 1px solid rgba(111, 185, 44, 0.45) !important;
box-shadow: none !important;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.8px;
padding: 5px 15px;
margin-bottom: 16px;
border-radius: 9999px;
display: inline-flex;
align-items: center;
}
.uz-benefits-main-title {
font-size: 2.55rem;
font-weight: 800;
color: #ffffff;
line-height: 1.15;
margin-bottom: 34px;
letter-spacing: -0.025em;
}
.uz-benefits-grid-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 36px;
row-gap: 28px;
width: 100%;
}
.uz-benefit-card {
display: flex;
align-items: center;
gap: 16px;
}
.uz-benefit-circle-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #6fb92c 0%, #4ea318 100%);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
transition: transform 0.25s ease;
}
.uz-benefit-card:hover .uz-benefit-circle-icon {
transform: scale(1.08);
}
.uz-benefit-text-wrap h4 {
font-size: 1.15rem;
font-weight: 800;
color: #ffffff;
margin: 0 0 3px 0;
line-height: 1.2;
letter-spacing: -0.01em;
}
.uz-benefit-text-wrap p {
font-size: 0.85rem;
color: #e2e8f0;
margin: 0;
line-height: 1.35;
font-weight: 500;
opacity: 0.95;
}
.uz-benefits-right-col {
flex: 0 0 290px;
max-width: 290px;
display: flex;
justify-content: flex-end;
align-items: center;
margin-left: auto;
position: relative;
z-index: 5;
}
.uz-benefits-quote-overlay {
background: rgba(8, 26, 16, 0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
padding: 18px 22px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
width: 100%;
box-sizing: border-box;
}
.uz-benefits-quote-text {
font-size: 1.15rem;
font-weight: 800;
line-height: 1.36;
color: #ffffff;
letter-spacing: -0.01em;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
/* ==========================================================================
COMPREHENSIVE RESPONSIVE MEDIA QUERIES (998px, 798px, 479px, 320px)
========================================================================== */
/* Global Mobile Safety */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* Large Tablet / Small Desktop (<= 1200px) */
@media (max-width: 1200px) {
.uz-hero-section {
background-position: right center !important;
padding: 60px 0 65px 0 !important;
}
.uz-hero-container {
padding: 0 20px;
}
.uz-hero-content {
max-width: 540px;
}
.uz-hero-ctas {
flex-wrap: nowrap !important;
gap: 12px !important;
}
.uz-btn-primary, .uz-btn-wa {
font-size: 0.90rem !important;
padding: 12px 18px !important;
}
.clean-hero-grid {
gap: 28px;
}
}
/* Small Laptops & Tablets Landscape (<= 998px) */
@media (max-width: 998px) {
.container {
padding: 0 20px !important;
}
/* Topbar & Header */
.topbar-wrapper {
display: block !important;
}
.navbar-container {
padding: 12px 20px !important;
}
/* Section 1: Hero */
.uz-hero-section {
background: #ffffff !important;
padding: 45px 0 50px 0 !important;
min-height: auto !important;
}
.uz-hero-content {
max-width: 100% !important;
width: 100% !important;
}
.uz-hero-desc {
max-width: 100% !important;
}
.uz-hero-ctas {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.uz-trust-row {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
/* Section 2: Showcase Carousel & Stats */
.clean-hero-section {
padding: 55px 0 !important;
}
.clean-hero-grid {
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
width: 100% !important;
}
.clean-hero-left,
.clean-hero-right {
max-width: 100% !important;
width: 100% !important;
flex: none !important;
}
.clean-hero-subtitle {
max-width: 100% !important;
}
.clean-carousel-card {
max-width: 100% !important;
width: 100% !important;
}
.clean-hero-stats-row {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
width: 100% !important;
}
.clean-stat-pill {
width: 100% !important;
box-sizing: border-box !important;
}
/* Section 3: Services 3-Col Cards Grid */
.clean-services-section {
padding: 65px 0 75px 0 !important;
}
.clean-cards-3col {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
margin-top: 36px !important;
width: 100% !important;
}
.clean-srv-card {
width: 100% !important;
}
/* Section 4: Intro (Individuell. Flexibel. Zuverlässig.) */
.uz-intro-section {
padding: 65px 0 !important;
}
.uz-intro-grid {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
width: 100% !important;
}
.uz-intro-left,
.uz-intro-right {
width: 100% !important;
max-width: 100% !important;
}
.uz-cards-4col {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
width: 100% !important;
}
/* Section 5: Benefits */
.uz-benefits-section {
padding: 50px 0 !important;
}
.uz-benefits-container {
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
padding: 36px 24px !important;
width: 100% !important;
}
.uz-benefits-left-col,
.uz-benefits-right-col {
flex: none !important;
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
justify-content: flex-start !important;
}
.uz-benefits-grid-2x2 {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 18px !important;
}
.uz-benefits-quote-overlay {
width: 100% !important;
max-width: 100% !important;
}
/* Section 6: Reviews */
.clean-reviews-section {
padding: 65px 0 !important;
}
.clean-reviews-layout {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
width: 100% !important;
}
.clean-reviews-col-left,
.clean-reviews-col-right {
width: 100% !important;
max-width: 100% !important;
}
.clean-review-promo-card {
min-height: 280px !important;
max-height: 340px !important;
width: 100% !important;
}
/* Section 7: FAQ */
.uz-faq-section {
padding: 65px 0 !important;
}
.uz-faq-grid {
display: flex !important;
flex-direction: column !important;
gap: 30px !important;
width: 100% !important;
}
.uz-faq-left,
.uz-faq-right {
width: 100% !important;
max-width: 100% !important;
}
.uz-rating-box {
max-width: 420px !important;
margin: 0 auto !important;
}
/* Section 8: Form (Online Preisanfrage) */
.umzug-calculator-section {
padding: 60px 0 !important;
}
.umzug-route-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.umzug-services-checkboxes {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.umzug-calc-box {
padding: 32px 24px !important;
}
.kontakt-row-2col {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
/* Section 9: Pre-Footer CTA Banner */
.clean-cta-full-container {
display: flex !important;
flex-direction: column !important;
text-align: center !important;
gap: 20px !important;
width: 100% !important;
}
.clean-cta-info {
max-width: 100% !important;
}
.clean-cta-actions {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 14px !important;
}
}
/* Small Tablets & Large Phones (<= 798px) */
@media (max-width: 798px) {
/* Section 1: Hero */
.uz-hero-title {
font-size: 2.15rem !important;
line-height: 1.18 !important;
}
.uz-hero-subtitle {
font-size: 1.05rem !important;
}
.uz-trust-row {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* Section 2: Showcase */
.clean-hero-title {
font-size: 1.95rem !important;
}
.clean-carousel-caption {
font-size: 0.95rem !important;
padding: 12px 16px !important;
}
.clean-hero-stats-row {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* Section 3: Services (1 Column on Tablet Portrait) */
.clean-cards-3col {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
max-width: 540px !important;
margin: 30px auto 0 auto !important;
width: 100% !important;
}
.clean-card-img-wrap {
height: 220px !important;
}
/* Section 4: Intro */
.uz-intro-left h2 {
font-size: 1.95rem !important;
}
.uz-cards-4col {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
max-width: 540px !important;
margin: 0 auto !important;
width: 100% !important;
}
/* Section 5: Benefits */
.uz-benefits-main-title {
font-size: 1.85rem !important;
}
.uz-benefits-grid-2x2 {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.uz-benefits-truck-frame {
height: 280px !important;
}
.uz-benefits-quote-text {
font-size: 1.05rem !important;
}
/* Section 6: Reviews */
.clean-reviews-col-right {
padding: 22px 16px !important;
}
.clean-review-card-item {
width: 100% !important;
min-width: 100% !important;
flex: 0 0 100% !important;
}
/* Section 7: FAQ */
.uz-faq-left h2 {
font-size: 1.80rem !important;
}
/* Section 8: Form */
.umzug-calc-box {
padding: 26px 18px !important;
border-radius: 20px !important;
}
.umzug-services-checkboxes {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.kontakt-row-2col {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.umzug-input-row-2 {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Section 9: CTA Banner */
.clean-cta-title {
font-size: 1.70rem !important;
}
.clean-cta-actions {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
.btn-cta-phone-pill,
.btn-cta-wa-pill,
.btn-cta-quote-pill {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
}
/* Mobile Screens (<= 479px) */
@media (max-width: 479px) {
.container {
padding: 0 16px !important;
}
/* Section 1: Hero */
.uz-hero-section {
padding: 28px 0 36px 0 !important;
background: #ffffff !important;
}
.uz-hero-badge {
font-size: 0.70rem !important;
padding: 5px 12px !important;
margin-bottom: 12px !important;
}
.uz-hero-title {
font-size: 1.80rem !important;
line-height: 1.15 !important;
margin-bottom: 12px !important;
}
.uz-hero-subtitle {
font-size: 1.0rem !important;
line-height: 1.3 !important;
margin-bottom: 10px !important;
}
.uz-hero-desc {
font-size: 0.88rem !important;
line-height: 1.5 !important;
margin-bottom: 18px !important;
}
.uz-hero-ctas {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
.uz-btn-primary,
.uz-btn-wa {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 13px 18px !important;
font-size: 0.90rem !important;
box-sizing: border-box !important;
}
.uz-trust-row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
margin-top: 20px !important;
width: 100% !important;
}
.uz-trust-pill {
padding: 10px 14px !important;
}
/* Section 2: Showcase */
.clean-hero-section {
padding: 40px 0 !important;
}
.clean-hero-badge {
font-size: 0.70rem !important;
padding: 5px 12px !important;
}
.clean-hero-title {
font-size: 1.70rem !important;
line-height: 1.18 !important;
}
.clean-hero-subtitle {
font-size: 0.88rem !important;
line-height: 1.45 !important;
margin-bottom: 20px !important;
}
.clean-hero-btn-group {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
.btn-hero-green,
.btn-hero-outline {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 12px 18px !important;
font-size: 0.90rem !important;
box-sizing: border-box !important;
}
.clean-carousel-card {
border-radius: 16px !important;
}
.clean-carousel-img-wrap {
height: 230px !important;
}
.clean-carousel-caption {
font-size: 0.88rem !important;
padding: 10px 14px !important;
}
.clean-hero-stats-row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
width: 100% !important;
}
.clean-stat-pill {
padding: 10px 14px !important;
}
.clean-stat-pill .pill-val {
font-size: 1.35rem !important;
}
/* Section 3: Services (1 Column Full Width) */
.clean-services-section {
padding: 45px 0 !important;
}
.section-badge {
font-size: 0.72rem !important;
padding: 5px 12px !important;
}
.section-title {
font-size: 1.70rem !important;
line-height: 1.2 !important;
}
.section-subtitle {
font-size: 0.88rem !important;
line-height: 1.45 !important;
}
.clean-cards-3col {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 20px !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 25px !important;
}
.clean-srv-card {
width: 100% !important;
border-radius: 18px !important;
}
.clean-card-img-wrap {
height: 190px !important;
}
.clean-card-body {
padding: 28px 16px 20px 16px !important;
}
.clean-card-icon-wrap {
width: 48px !important;
height: 48px !important;
top: -24px !important;
left: 16px !important;
}
.clean-card-title {
font-size: 1.25rem !important;
margin-bottom: 8px !important;
}
.clean-card-desc {
font-size: 0.86rem !important;
line-height: 1.45 !important;
margin-bottom: 16px !important;
}
.clean-card-features li {
font-size: 0.84rem !important;
gap: 8px !important;
margin-bottom: 7px !important;
}
.btn-card-clean {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 11px 16px !important;
font-size: 0.88rem !important;
box-sizing: border-box !important;
}
/* Section 4: Intro */
.uz-intro-section {
padding: 45px 0 !important;
}
.uz-intro-grid {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
width: 100% !important;
}
.uz-intro-left h2 {
font-size: 1.70rem !important;
line-height: 1.2 !important;
}
.uz-intro-left p {
font-size: 0.88rem !important;
margin-bottom: 18px !important;
}
.uz-intro-left .uz-btn-primary {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
.uz-cards-4col {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
width: 100% !important;
}
.uz-feature-card {
padding: 18px 14px !important;
border-radius: 14px !important;
}
.uz-feature-card h3 {
font-size: 1.15rem !important;
}
.uz-feature-card p {
font-size: 0.86rem !important;
}
/* Section 5: Benefits */
.uz-benefits-section {
padding: 40px 0 !important;
}
.uz-benefits-container {
padding: 24px 16px !important;
border-radius: 20px !important;
gap: 24px !important;
}
.uz-benefits-main-title {
font-size: 1.65rem !important;
line-height: 1.2 !important;
margin-bottom: 20px !important;
}
.uz-benefit-card {
gap: 12px !important;
}
.uz-benefit-circle-icon {
width: 44px !important;
height: 44px !important;
flex-shrink: 0 !important;
}
.uz-benefit-circle-icon svg {
width: 20px !important;
height: 20px !important;
}
.uz-benefit-text-wrap h4 {
font-size: 1.05rem !important;
margin-bottom: 4px !important;
}
.uz-benefit-text-wrap p {
font-size: 0.86rem !important;
line-height: 1.45 !important;
}
.uz-benefits-truck-frame {
border-radius: 16px !important;
height: 220px !important;
}
.uz-benefits-quote-overlay {
padding: 14px 14px !important;
border-radius: 14px !important;
}
.uz-benefits-quote-text {
font-size: 0.92rem !important;
line-height: 1.35 !important;
}
.uz-benefits-quote-author {
font-size: 0.80rem !important;
}
/* Section 6: Reviews */
.clean-reviews-section {
padding: 45px 0 !important;
}
.clean-review-promo-card {
padding: 22px 16px !important;
min-height: 240px !important;
border-radius: 18px !important;
}
.clean-promo-text-wrap h3 {
font-size: 1.35rem !important;
}
.clean-promo-text-wrap p {
font-size: 0.86rem !important;
}
.clean-reviews-col-right {
padding: 18px 12px !important;
border-radius: 18px !important;
}
.clean-reviews-top-bar {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 14px !important;
}
.clean-reviews-header-badge {
font-size: 0.72rem !important;
padding: 4px 10px !important;
}
.clean-review-card-item {
padding: 16px 14px !important;
border-radius: 14px !important;
}
.clean-review-author h4 {
font-size: 0.96rem !important;
}
.clean-review-quote {
font-size: 0.86rem !important;
line-height: 1.45 !important;
min-height: auto !important;
}
/* Section 7: FAQ */
.uz-faq-section {
padding: 45px 0 !important;
}
.uz-faq-left h2 {
font-size: 1.55rem !important;
line-height: 1.22 !important;
}
.uz-faq-left p {
font-size: 0.88rem !important;
}
.uz-faq-btn {
padding: 14px 12px !important;
font-size: 0.88rem !important;
gap: 10px !important;
}
.uz-faq-answer {
padding: 0 12px 14px 12px !important;
font-size: 0.84rem !important;
}
.uz-rating-box {
padding: 20px 16px !important;
border-radius: 16px !important;
}
.uz-contact-pill-card {
padding: 18px 14px !important;
border-radius: 16px !important;
}
/* Section 8: Form */
.umzug-calculator-section {
padding: 40px 0 50px 0 !important;
}
.umzug-calc-box {
padding: 20px 12px !important;
border-radius: 16px !important;
}
.umzug-calc-header h3 {
font-size: 1.35rem !important;
line-height: 1.25 !important;
}
.umzug-calc-header p {
font-size: 0.86rem !important;
}
.umzug-calc-step-title {
font-size: 1.0rem !important;
}
.umzug-route-col {
padding: 14px 10px !important;
border-radius: 12px !important;
}
.umzug-route-col-title {
font-size: 0.90rem !important;
}
.umzug-label {
font-size: 0.78rem !important;
margin-bottom: 4px !important;
}
.umzug-input-text, .umzug-select, .form-control-umzug {
padding: 10px 10px !important;
font-size: 0.86rem !important;
height: auto !important;
}
.umzug-services-checkboxes {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.umzug-service-checkbox {
padding: 10px 10px !important;
}
.checkbox-label strong {
font-size: 0.86rem !important;
}
.checkbox-label small {
font-size: 0.74rem !important;
}
.btn-kontakt-submit {
font-size: 0.92rem !important;
padding: 13px 14px !important;
width: 100% !important;
}
/* Section 9: Pre-Footer CTA */
.clean-cta-banner-section {
padding: 40px 0 !important;
}
.clean-cta-full-container {
padding: 28px 16px !important;
border-radius: 20px !important;
}
.clean-cta-tagline {
font-size: 0.72rem !important;
}
.clean-cta-title {
font-size: 1.45rem !important;
line-height: 1.22 !important;
}
.clean-cta-sub {
font-size: 0.86rem !important;
}
.clean-cta-actions {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
.btn-cta-phone-pill,
.btn-cta-wa-pill,
.btn-cta-quote-pill {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 12px 16px !important;
font-size: 0.88rem !important;
box-sizing: border-box !important;
}
}
/* Small Screen Mobile (<= 320px) */
@media (max-width: 320px) {
.container {
padding: 0 10px !important;
}
/* Section 1: Hero */
.uz-hero-badge {
font-size: 0.65rem !important;
padding: 4px 10px !important;
}
.uz-hero-title {
font-size: 1.55rem !important;
line-height: 1.15 !important;
}
.uz-hero-subtitle {
font-size: 0.90rem !important;
}
.uz-hero-desc {
font-size: 0.82rem !important;
}
.uz-btn-primary, .uz-btn-wa {
padding: 11px 14px !important;
font-size: 0.84rem !important;
}
.uz-trust-pill {
padding: 8px 10px !important;
font-size: 0.78rem !important;
}
.uz-trust-pill-icon {
width: 30px !important;
height: 30px !important;
}
/* Section 2: Showcase */
.clean-hero-title {
font-size: 1.45rem !important;
}
.clean-hero-subtitle {
font-size: 0.82rem !important;
}
.btn-hero-green, .btn-hero-outline {
padding: 10px 14px !important;
font-size: 0.84rem !important;
}
.clean-carousel-img-wrap {
height: 190px !important;
}
.clean-stat-pill .pill-val {
font-size: 1.20rem !important;
}
.clean-stat-pill .pill-lbl {
font-size: 0.74rem !important;
}
/* Section 3: Services */
.section-title {
font-size: 1.45rem !important;
}
.clean-card-img-wrap {
height: 165px !important;
}
.clean-card-body {
padding: 24px 12px 16px 12px !important;
}
.clean-card-title {
font-size: 1.15rem !important;
}
.clean-card-desc {
font-size: 0.82rem !important;
}
.clean-card-features li {
font-size: 0.80rem !important;
}
.btn-card-clean {
padding: 10px 12px !important;
font-size: 0.82rem !important;
}
/* Section 4: Intro */
.uz-intro-left h2 {
font-size: 1.45rem !important;
}
.uz-feature-card {
padding: 14px 10px !important;
}
.uz-feature-card h3 {
font-size: 1.05rem !important;
}
.uz-feature-card p {
font-size: 0.82rem !important;
}
/* Section 5: Benefits */
.uz-benefits-container {
padding: 18px 10px !important;
}
.uz-benefits-main-title {
font-size: 1.45rem !important;
}
.uz-benefit-circle-icon {
width: 38px !important;
height: 38px !important;
}
.uz-benefit-circle-icon svg {
width: 18px !important;
height: 18px !important;
}
.uz-benefit-text-wrap h4 {
font-size: 0.96rem !important;
}
.uz-benefit-text-wrap p {
font-size: 0.80rem !important;
}
.uz-benefits-truck-frame {
height: 200px !important;
}
.uz-benefits-quote-text {
font-size: 0.84rem !important;
}
/* Section 6: Reviews */
.clean-promo-text-wrap h3 {
font-size: 1.20rem !important;
}
.clean-reviews-col-right {
padding: 14px 8px !important;
}
.clean-review-card-item {
padding: 14px 10px !important;
}
.clean-review-quote {
font-size: 0.82rem !important;
}
/* Section 7: FAQ */
.uz-faq-left h2 {
font-size: 1.40rem !important;
}
.uz-faq-btn {
padding: 12px 8px !important;
font-size: 0.82rem !important;
}
.uz-faq-answer {
font-size: 0.80rem !important;
padding: 0 10px 12px 10px !important;
}
/* Section 8: Form */
.umzug-calc-box {
padding: 16px 8px !important;
}
.umzug-calc-header h3 {
font-size: 1.20rem !important;
}
.umzug-route-col {
padding: 10px 8px !important;
}
.umzug-input-text, .umzug-select, .form-control-umzug {
padding: 8px 8px !important;
font-size: 0.82rem !important;
}
.btn-kontakt-submit {
font-size: 0.86rem !important;
padding: 12px 10px !important;
}
/* Section 9: CTA Banner */
.clean-cta-full-container {
padding: 22px 10px !important;
}
.clean-cta-title {
font-size: 1.30rem !important;
}
.btn-cta-phone-pill,
.btn-cta-wa-pill,
.btn-cta-quote-pill {
padding: 10px 12px !important;
font-size: 0.82rem !important;
}
}
/* Topbar German Language Indicator */
.topbar-lang-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background-color: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50px;
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
line-height: 1;
}
.topbar-lang-badge:hover {
background-color: #ffffff;
color: var(--color-green-primary);
border-color: #ffffff;
}
.topbar-lang-badge .flag-icon-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 12px;
overflow: hidden;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.topbar-lang-badge .lang-code {
letter-spacing: 0.5px;
}
/* Blog Cards Full Clickable Support */
.blog-card {
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}
/* ==========================================================================
Comprehensive Topbar & Header Responsive System (Tablet & Mobile)
========================================================================== */
/* 1. Base / Common Enhancements */
.topbar-wrapper {
position: relative;
z-index: 1002;
transition: all 0.25s ease;
}
.topbar-phone {
text-decoration: none;
}
.topbar-lang-badge {
text-decoration: none;
}
/* 2. Tablets Landscape & Laptops (992px to 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
.topbar-wrapper {
display: block !important;
padding: 6px 0;
font-size: 0.80rem;
}
.topbar-item span {
max-width: 440px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-right {
gap: 10px;
}
.topbar-phone {
font-size: 0.80rem;
white-space: nowrap;
}
.navbar-container {
height: 90px;
}
.brand-logo .logo-img {
height: 78px;
}
}
/* 3. Tablets Portrait (769px to 991px) */
@media (max-width: 991px) and (min-width: 769px) {
.topbar-wrapper {
display: block !important;
padding: 6px 0;
font-size: 0.78rem;
}
.topbar-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.topbar-left {
display: flex;
align-items: center;
overflow: hidden;
}
.topbar-item span {
max-width: 320px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.topbar-phone {
font-size: 0.80rem;
white-space: nowrap;
}
.topbar-lang-badge {
padding: 4px 8px;
font-size: 0.74rem;
}
.topbar-socials {
gap: 8px;
margin-right: 6px;
}
.topbar-social-link {
width: 24px;
height: 24px;
}
.navbar-container {
height: 84px;
}
.brand-logo .logo-img {
height: 70px;
max-width: 220px;
}
.header-action {
gap: 10px;
}
.header-search-btn {
width: 38px;
height: 38px;
}
.header-action .btn-booking {
padding: 8px 14px;
font-size: 0.84rem;
border-radius: 8px;
white-space: nowrap;
}
.mobile-toggle {
display: flex;
width: 38px;
height: 38px;
}
.nav-menu {
top: 84px;
height: calc(100vh - 84px);
max-width: 360px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
}
/* 4. Large Mobile & Handhelds (481px to 768px) */
@media (max-width: 768px) {
.topbar-wrapper {
display: block !important;
padding: 6px 0;
font-size: 0.78rem;
}
.topbar-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0 16px !important;
box-sizing: border-box;
}
.topbar-left {
display: none !important;
}
.topbar-right {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 10px;
}
.topbar-phone {
font-size: 0.78rem;
white-space: nowrap;
}
.topbar-divider {
height: 12px;
margin: 0 2px;
background-color: rgba(255, 255, 255, 0.35);
flex-shrink: 0;
}
.topbar-lang-badge {
padding: 3px 8px;
font-size: 0.74rem;
flex-shrink: 0;
}
.topbar-socials {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-right: 6px;
}
.topbar-social-link {
width: 24px;
height: 24px;
}
.navbar-container {
height: 78px;
padding: 0 16px;
}
.brand-logo .logo-img {
height: 62px;
max-width: 190px;
}
.header-action {
gap: 8px;
}
.header-search-btn {
width: 36px;
height: 36px;
}
.header-action .btn-booking {
padding: 7px 12px;
font-size: 0.80rem;
border-radius: 8px;
white-space: nowrap;
}
.mobile-toggle {
display: flex;
width: 36px;
height: 36px;
}
.nav-menu {
top: 78px;
height: calc(100vh - 78px);
width: 100%;
max-width: 100%;
}
}
/* 5. Small Mobile (<= 480px) */
@media (max-width: 480px) {
.container:not(.slide-container) {
padding: 0 12px !important;
}
/* Hero Slider Mobile Spacing Fix - Prevents pagination dots and buttons from overlapping */
.hero-slider-section .slide-container {
padding-top: 40px !important;
padding-bottom: 84px !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
.hero-slider-section .hero-cta-group {
margin-bottom: 16px !important;
}
.hero-slider-section .full-slider-pagination {
bottom: 22px !important;
z-index: 20 !important;
}
.topbar-wrapper {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
padding: 5px 0 !important;
background-color: #0b1526 !important;
}
.topbar-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding: 0 14px !important;
box-sizing: border-box !important;
}
.topbar-left {
display: none !important;
}
.topbar-right {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
gap: 6px !important;
}
.topbar-phone {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
color: #ffffff !important;
font-size: 0.74rem !important;
white-space: nowrap !important;
}
.topbar-phone svg {
width: 12px !important;
height: 12px !important;
flex-shrink: 0 !important;
}
.topbar-divider {
display: inline-block !important;
height: 11px !important;
margin: 0 1px !important;
background-color: rgba(255, 255, 255, 0.35) !important;
flex-shrink: 0 !important;
}
.topbar-lang-badge {
display: inline-flex !important;
align-items: center !important;
padding: 2px 7px !important;
font-size: 0.70rem !important;
gap: 4px !important;
color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.18) !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
border-radius: 50px !important;
flex-shrink: 0 !important;
}
.topbar-lang-badge .flag-icon-wrapper {
width: 14px !important;
height: 10px !important;
display: inline-flex !important;
}
.topbar-socials {
display: flex !important;
align-items: center !important;
gap: 7px !important;
flex-shrink: 0 !important;
margin-right: 6px !important;
}
.topbar-social-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 23px !important;
height: 23px !important;
border-radius: 50% !important;
background-color: rgba(255, 255, 255, 0.22) !important;
color: #ffffff !important;
}
.topbar-social-link svg {
width: 11px !important;
height: 11px !important;
}
.navbar-container {
height: 74px !important;
padding: 0 12px !important;
}
.brand-logo .logo-img {
height: 54px !important;
max-width: 170px !important;
}
.header-action {
gap: 6px !important;
}
.header-search-btn {
width: 34px !important;
height: 34px !important;
}
.mobile-toggle {
display: flex !important;
width: 34px !important;
height: 34px !important;
}
.nav-menu {
top: 74px !important;
height: calc(100vh - 74px) !important;
padding: 20px 16px !important;
}
.nav-link {
font-size: 1.05rem !important;
padding: 10px 0 !important;
}
.dropdown-menu {
padding: 6px 10px !important;
}
.dropdown-item {
padding: 8px 10px !important;
}
/* Footer 50% 50% Two-Column Layout on Mobile (<= 480px) */
.site-footer,
.footer {
padding: 44px 0 0 0 !important;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 22px 14px !important;
margin-bottom: 28px !important;
}
.footer-col-brand {
grid-column: 1 / -1 !important;
margin-bottom: 6px !important;
}
.brand-logo.footer-logo {
margin-bottom: 8px !important;
}
.brand-logo.footer-logo img,
.brand-logo.footer-logo .logo-img {
height: 44px !important;
max-height: 44px !important;
}
.footer-bio {
font-size: 0.82rem !important;
line-height: 1.45 !important;
margin-bottom: 10px !important;
max-width: 100% !important;
}
.footer-socials {
gap: 8px !important;
}
.footer-heading {
font-size: 0.92rem !important;
font-weight: 700 !important;
margin-bottom: 10px !important;
padding-bottom: 4px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.footer-links li,
.footer-links-check li {
gap: 6px !important;
margin-bottom: 8px !important;
font-size: 0.80rem !important;
line-height: 1.35 !important;
}
.footer-links-check li svg {
width: 11px !important;
height: 11px !important;
flex-shrink: 0 !important;
}
.footer-contact-list li {
gap: 6px !important;
margin-bottom: 8px !important;
font-size: 0.80rem !important;
line-height: 1.35 !important;
word-break: break-word !important;
}
.footer-contact-list li svg {
width: 13px !important;
height: 13px !important;
flex-shrink: 0 !important;
}
}
/* 6. Extra Small Mobile (<= 390px down to 320px) */
@media (max-width: 390px) {
.header-action .btn-booking span {
display: none;
}
.header-action .btn-booking {
width: 34px;
height: 34px;
padding: 0;
justify-content: center;
border-radius: 8px;
}
.topbar-container {
padding: 0 8px !important;
}
.topbar-phone {
font-size: 0.70rem !important;
gap: 3px !important;
}
.topbar-phone span {
letter-spacing: -0.3px;
}
.topbar-lang-badge {
padding: 2px 5px !important;
font-size: 0.66rem !important;
}
.topbar-socials {
gap: 6px !important;
margin-right: 2px !important;
}
.topbar-social-link {
width: 21px !important;
height: 21px !important;
display: inline-flex !important;
}
.topbar-social-link svg {
width: 10px !important;
height: 10px !important;
}
/* Hero Slider Mobile Spacing Fix for 390px */
.hero-slider-section .slide-container {
padding-top: 36px !important;
padding-bottom: 80px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.hero-slider-section .hero-cta-group {
margin-bottom: 14px !important;
}
.hero-slider-section .full-slider-pagination {
bottom: 20px !important;
}
}
/* 320px Specific Refinement */
@media (max-width: 340px) {
.topbar-container {
padding: 0 6px !important;
}
.topbar-phone {
font-size: 0.66rem !important;
gap: 2px !important;
}
.topbar-phone svg {
width: 10px !important;
height: 10px !important;
}
.topbar-divider {
margin: 0 1px !important;
}
.topbar-lang-badge {
padding: 1px 4px !important;
font-size: 0.62rem !important;
gap: 2px !important;
}
.topbar-socials {
gap: 5px !important;
margin-right: 2px !important;
}
.topbar-social-link {
width: 20px !important;
height: 20px !important;
display: inline-flex !important;
}
.topbar-social-link svg {
width: 9px !important;
height: 9px !important;
}
/* Hero Slider Mobile Spacing Fix for 320px */
.hero-slider-section .slide-container {
padding-top: 30px !important;
padding-bottom: 74px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.hero-slider-section .hero-cta-group {
margin-bottom: 12px !important;
gap: 8px !important;
}
.hero-slider-section .hero-cta-group .btn {
padding: 11px 14px !important;
font-size: 0.88rem !important;
}
.hero-slider-section .full-slider-pagination {
bottom: 16px !important;
}
/* 320px Footer Specific Spacing */
.footer-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 18px 8px !important;
}
.footer-heading {
font-size: 0.86rem !important;
margin-bottom: 8px !important;
}
.footer-links li,
.footer-links-check li,
.footer-contact-list li {
font-size: 0.76rem !important;
gap: 5px !important;
margin-bottom: 7px !important;
}
.footer-links-check li svg {
width: 10px !important;
height: 10px !important;
}
}
/* ==========================================================================
Clean Service 3-Column Flush Image Cards
========================================================================== */
.clean-cards-3col {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 28px !important;
margin-top: 40px !important;
}
.clean-srv-card {
background: #ffffff !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 20px !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04) !important;
position: relative !important;
}
.clean-srv-card:hover,
.clean-srv-card.card-green {
border-color: #6fb92c !important;
}
.clean-srv-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 16px 36px rgba(11, 93, 43, 0.12) !important;
}
.clean-card-img-wrap {
width: 100% !important;
height: 215px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: relative !important;
border-top-left-radius: 18px !important;
border-top-right-radius: 18px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
display: block !important;
}
.clean-card-img-wrap img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
transition: transform 0.45s ease !important;
}
.clean-srv-card:hover .clean-card-img-wrap img {
transform: scale(1.06) !important;
}
.clean-card-body {
padding: 0 24px 26px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
}
.clean-card-icon-wrap {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: -24px 0 16px 0 !important;
font-size: 1.25rem !important;
background: #eaf6ea !important;
color: #16a34a !important;
border: 3px solid #ffffff !important;
position: relative !important;
z-index: 2 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.clean-card-title {
font-size: 1.35rem !important;
font-weight: 800 !important;
color: #0b1526 !important;
margin-bottom: 8px !important;
}
.clean-card-desc {
font-size: 0.88rem !important;
color: #64748b !important;
line-height: 1.55 !important;
margin-bottom: 20px !important;
}
.clean-card-features {
list-style: none !important;
padding: 0 !important;
margin: 0 0 24px 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
flex: 1 !important;
}
.clean-card-features li {
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
color: #334155 !important;
}
.clean-card-features li svg {
flex-shrink: 0 !important;
color: #16a34a !important;
}
.btn-card-clean,
.btn-clean-submit-full {
width: 100% !important;
padding: 15px 24px !important;
border-radius: 12px !important;
font-size: 1rem !important;
font-weight: 800 !important;
color: #ffffff !important;
background: linear-gradient(135deg, #5fae22 0%, #6fb92c 100%) !important;
border: none !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
box-shadow: 0 4px 14px rgba(95, 174, 34, 0.32) !important;
transition: all 0.25s ease !important;
text-decoration: none !important;
}
.btn-card-clean:hover,
.btn-clean-submit-full:hover {
background: linear-gradient(135deg, #0b5d2b 0%, #5fae22 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.4) !important;
color: #ffffff !important;
}
@media (max-width: 991px) {
.clean-cards-3col {
grid-template-columns: 1fr !important;
max-width: 520px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ==========================================================================
UMZUG SERVICE PAGE - FULL STYLES FROM HTML (SCREENSHOT PIXEL-PERFECT)
========================================================================== */
/* ==========================================================================
MBK Umzug Service Page Styles (Screenshot Pixel-Perfect Implementation)
========================================================================== */
/* 1. Hero Panoramic Banner Section (Matching Clean Service) */
.uz-hero-banner-inner {
position: relative;
width: 100%;
min-height: 480px;
background: linear-gradient(90deg, #ffffff 0%, #ffffff 36%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 255, 255, 0.4) 62%, rgba(255, 255, 255, 0) 75%), url('../images/uz-hero-wide.jpg?v=2') right center / cover no-repeat;
display: flex;
align-items: center;
}
@media (max-width: 868px) {
.uz-hero-banner-inner {
min-height: auto;
padding: 30px 0;
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 100%), url('../images/uz-hero-wide.jpg?v=2') center / cover no-repeat;
}
}
.uz-hero-section {
position: relative;
background: #ffffff url('../images/uz-hero-mover-branded.png?v=3') right center / cover no-repeat;
padding: 70px 0 75px 0;
overflow: hidden;
border-bottom: 1px solid #e2e8f0;
min-height: 540px;
display: flex;
align-items: center;
}
.uz-hero-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 2;
}
.uz-hero-content {
max-width: 560px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.uz-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #ffffff;
background-color: #0b5d2b;
padding: 6px 16px;
border-radius: 9999px;
margin-bottom: 18px;
box-shadow: 0 4px 12px rgba(11, 93, 43, 0.2);
}
.uz-hero-title {
font-size: 3.2rem;
font-weight: 900;
color: #0b1526;
line-height: 1.14;
margin-bottom: 14px;
letter-spacing: -0.03em;
}
.uz-hero-title .text-green {
color: #0b5d2b;
}
.uz-hero-subtitle {
font-size: 1.25rem;
font-weight: 800;
color: #0b1526;
margin-bottom: 14px;
letter-spacing: -0.01em;
}
.uz-hero-desc {
font-size: 0.98rem;
color: #475569;
line-height: 1.6;
margin-bottom: 28px;
max-width: 540px;
}
.uz-hero-ctas {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: nowrap;
margin-bottom: 34px;
width: 100%;
}
.uz-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #0b5d2b;
color: #ffffff !important;
font-size: 0.92rem;
font-weight: 700;
padding: 13px 24px;
border-radius: 9999px;
box-shadow: 0 4px 14px rgba(11, 93, 43, 0.25);
transition: all 0.25s ease;
text-decoration: none;
border: none;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.uz-btn-primary:hover {
background-color: #084822;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.35);
color: #ffffff !important;
}
.uz-btn-wa {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #ffffff;
color: #0b5d2b !important;
font-size: 0.92rem;
font-weight: 700;
padding: 12px 22px;
border-radius: 9999px;
border: 1.8px solid #0b5d2b;
transition: all 0.25s ease;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}
.uz-btn-wa:hover {
background-color: #eaf6ea;
transform: translateY(-2px);
color: #0b5d2b !important;
}
.uz-trust-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding-top: 22px;
border-top: 1px solid #cbd5e1;
width: 100%;
}
.uz-trust-item {
display: flex;
align-items: flex-start;
gap: 10px;
}
.uz-trust-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background-color: #eaf6ea;
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
box-shadow: 0 2px 6px rgba(11, 93, 43, 0.12);
}
.uz-trust-text strong {
display: block;
font-size: 0.90rem;
font-weight: 800;
color: #0b1526;
line-height: 1.2;
margin-bottom: 3px;
}
.uz-trust-text small {
display: block;
font-size: 0.76rem;
font-weight: 600;
color: #334155;
line-height: 1.35;
}
/* 1b. Umzug & Transport Showcase (Slider & Stats) Section */
.clean-hero-section {
padding: 80px 0;
background-color: #ffffff;
border-bottom: 1px solid #e2e8f0;
}
.clean-hero-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 48px;
align-items: center;
}
.clean-hero-left {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.clean-hero-title {
font-size: 2.85rem;
font-weight: 900;
color: #0b1526;
line-height: 1.12;
margin-bottom: 14px;
letter-spacing: -0.025em;
}
.text-gradient-green {
color: #5fae22;
}
.clean-hero-subtitle {
font-size: 0.98rem;
color: #475569;
line-height: 1.6;
margin-bottom: 26px;
max-width: 530px;
}
.clean-hero-btn-group {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.btn-hero-green {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, #5fae22 0%, #6fb92c 100%);
color: #ffffff !important;
font-weight: 700;
font-size: 0.96rem;
padding: 13px 26px;
border-radius: 9999px;
text-decoration: none;
box-shadow: 0 6px 18px rgba(95, 174, 34, 0.32);
transition: all 0.25s ease;
border: none;
cursor: pointer;
}
.btn-hero-green:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(95, 174, 34, 0.42);
background: linear-gradient(135deg, #0b5d2b 0%, #5fae22 100%);
color: #ffffff !important;
}
.btn-hero-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #ffffff;
color: #0b1526 !important;
font-weight: 700;
font-size: 0.96rem;
padding: 12px 24px;
border-radius: 9999px;
text-decoration: none;
border: 1.8px solid #cbd5e1;
transition: all 0.25s ease;
cursor: pointer;
}
.btn-hero-outline:hover {
border-color: #5fae22;
color: #0b5d2b !important;
background-color: #f0fdf4;
transform: translateY(-2px);
}
.clean-hero-stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
width: 100%;
}
.clean-stat-pill {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 14px;
padding: 12px 14px;
text-align: center;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
transition: all 0.2s ease;
}
.clean-stat-pill:hover {
transform: translateY(-3px);
border-color: #5fae22;
box-shadow: 0 8px 20px rgba(95, 174, 34, 0.12);
}
.clean-stat-pill .pill-val {
display: block;
font-size: 1.25rem;
font-weight: 800;
color: #0b1526;
line-height: 1.15;
margin-bottom: 2px;
}
.clean-stat-pill .pill-lbl {
font-size: 0.76rem;
color: #64748b;
font-weight: 600;
}
.clean-hero-right {
position: relative;
display: flex;
justify-content: center;
}
.clean-carousel-card {
width: 100%;
max-width: 490px;
background: #ffffff;
border-radius: 28px;
padding: 10px;
border: 3px solid #ffffff;
box-shadow: 0 20px 45px rgba(11, 93, 43, 0.14);
position: relative;
}
.clean-visual-badge-top {
position: absolute;
top: -14px;
left: 24px;
background: #ffffff;
color: #0b5d2b;
font-size: 0.82rem;
font-weight: 800;
padding: 7px 16px;
border-radius: 9999px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
border: 1.5px solid #d1fae5;
display: inline-flex;
align-items: center;
gap: 6px;
z-index: 15;
}
.clean-visual-badge-bottom {
position: absolute;
bottom: -14px;
right: 24px;
background: #ffffff;
color: #0b5d2b;
font-size: 0.82rem;
font-weight: 800;
padding: 7px 16px;
border-radius: 9999px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
border: 1.5px solid #d1fae5;
display: inline-flex;
align-items: center;
gap: 6px;
z-index: 15;
}
.clean-carousel {
position: relative;
width: 100%;
height: 380px;
overflow: hidden;
border-radius: 22px;
background: #0f172a;
}
.clean-carousel-slides {
position: relative;
width: 100%;
height: 100%;
}
.clean-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1.05);
z-index: 1;
}
.clean-slide.active {
opacity: 1;
visibility: visible;
transform: scale(1);
z-index: 2;
}
.clean-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.clean-slide-tag {
position: absolute;
top: 20px;
right: 18px;
background: rgba(11, 31, 20, 0.88);
backdrop-filter: blur(8px);
color: #a3e635;
font-weight: 800;
font-size: 0.82rem;
padding: 6px 14px;
border-radius: 20px;
border: 1px solid rgba(163, 230, 53, 0.35);
z-index: 5;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.clean-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(6px);
border: none;
display: flex;
align-items: center;
justify-content: center;
color: #0b1526;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.clean-carousel-btn:hover {
background: #6fb92c;
color: #ffffff;
transform: translateY(-50%) scale(1.1);
}
.clean-carousel-btn.prev-btn {
left: 12px;
}
.clean-carousel-btn.next-btn {
right: 12px;
}
.clean-carousel-dots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
z-index: 10;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
padding: 5px 12px;
border-radius: 20px;
}
.clean-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
border: none;
cursor: pointer;
transition: all 0.25s ease;
padding: 0;
}
.clean-dot.active {
background: #6fb92c;
width: 22px;
border-radius: 9999px;
}
/* 3. Services Section: 3-Column Flush-Image Cards Grid (Matching clean-service.html) */
.clean-services-section {
padding: 85px 0 95px 0;
background-color: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.clean-cards-3col {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 28px !important;
margin-top: 45px !important;
}
.clean-srv-card {
background: #ffffff !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 20px !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04) !important;
position: relative !important;
}
.clean-srv-card:hover,
.clean-srv-card.card-green {
border-color: #6fb92c !important;
}
.clean-srv-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 16px 36px rgba(11, 93, 43, 0.12) !important;
}
.clean-card-img-wrap {
width: 100% !important;
height: 215px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: relative !important;
border-top-left-radius: 18px !important;
border-top-right-radius: 18px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
display: block !important;
}
.clean-card-img-wrap img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
transition: transform 0.45s ease !important;
}
.clean-srv-card:hover .clean-card-img-wrap img {
transform: scale(1.06) !important;
}
.clean-card-body {
padding: 0 24px 26px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
}
.clean-card-icon-wrap {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: -24px 0 16px 0 !important;
font-size: 1.25rem !important;
background: #eaf6ea !important;
color: #16a34a !important;
border: 3px solid #ffffff !important;
position: relative !important;
z-index: 2 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.clean-card-title {
font-size: 1.35rem !important;
font-weight: 800 !important;
color: #0b1526 !important;
margin-bottom: 8px !important;
}
.clean-card-desc {
font-size: 0.88rem !important;
color: #64748b !important;
line-height: 1.55 !important;
margin-bottom: 20px !important;
}
.clean-card-features {
list-style: none !important;
padding: 0 !important;
margin: 0 0 24px 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
flex: 1 !important;
}
.clean-card-features li {
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
color: #334155 !important;
}
.clean-card-features li svg {
flex-shrink: 0 !important;
color: #16a34a !important;
}
.btn-card-clean {
width: 100% !important;
padding: 15px 24px !important;
border-radius: 12px !important;
font-size: 1rem !important;
font-weight: 800 !important;
color: #ffffff !important;
background: linear-gradient(135deg, #5fae22 0%, #6fb92c 100%) !important;
border: none !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
box-shadow: 0 4px 14px rgba(95, 174, 34, 0.32) !important;
transition: all 0.25s ease !important;
text-decoration: none !important;
}
.btn-card-clean:hover {
background: linear-gradient(135deg, #0b5d2b 0%, #5fae22 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.4) !important;
color: #ffffff !important;
}
/* 4. Intro Section ("Individuell. Flexibel. Zuverlässig." - 4 Features Grid matching Screenshot) */
.uz-intro-section {
padding: 90px 0;
background-color: #ffffff;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
.uz-intro-grid {
display: grid;
grid-template-columns: 0.9fr 1.4fr;
gap: 48px;
align-items: center;
}
.uz-intro-left {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.uz-intro-title {
font-size: 2.35rem;
font-weight: 900;
color: #0b1526;
line-height: 1.18;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.uz-intro-desc {
font-size: 0.98rem;
color: #475569;
line-height: 1.65;
margin-bottom: 28px;
max-width: 480px;
}
.uz-btn-intro {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #0b5d2b;
color: #ffffff !important;
font-size: 0.95rem;
font-weight: 800;
padding: 14px 26px;
border-radius: 9999px;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(11, 93, 43, 0.25);
}
.uz-btn-intro:hover {
background-color: #084822;
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(11, 93, 43, 0.35);
}
.uz-cards-4col {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.uz-feature-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 18px;
padding: 28px 14px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}
.uz-feature-card:hover {
border-color: #0b5d2b;
transform: translateY(-5px);
box-shadow: 0 12px 28px rgba(11, 93, 43, 0.12);
}
.uz-feature-card-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #eaf6ea;
color: #0b5d2b;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px auto;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.uz-feature-card:hover .uz-feature-card-icon {
transform: scale(1.1);
}
.uz-feature-card h4 {
font-size: 1.05rem;
font-weight: 800;
color: #0b1526;
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.uz-feature-card p {
font-size: 0.82rem;
color: #64748b;
line-height: 1.45;
margin: 0;
font-weight: 500;
}
/* 4. Panoramic Benefits Section (Matching Uploaded Image Pixel-Perfect) */
.uz-benefits-section {
position: relative;
background: #07381b url('../images/uz-benefits-bg.png') right center / cover no-repeat;
color: #ffffff;
width: 100%;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.uz-benefits-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 55px 24px;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 420px;
position: relative;
z-index: 2;
box-sizing: border-box;
}
.uz-benefits-left-col {
flex: 0 0 520px;
max-width: 520px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.uz-benefits-badge {
background-color: rgba(111, 185, 44, 0.22) !important;
color: #76cf2c !important;
border: 1px solid rgba(111, 185, 44, 0.45) !important;
box-shadow: none !important;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.8px;
padding: 5px 15px;
margin-bottom: 16px;
border-radius: 9999px;
display: inline-flex;
align-items: center;
}
.uz-benefits-main-title {
font-size: 2.55rem;
font-weight: 800;
color: #ffffff;
line-height: 1.15;
margin-bottom: 34px;
letter-spacing: -0.025em;
}
.uz-benefits-grid-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 36px;
row-gap: 28px;
width: 100%;
}
.uz-benefit-card {
display: flex;
align-items: center;
gap: 16px;
}
.uz-benefit-circle-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #6fb92c 0%, #4ea318 100%);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
transition: transform 0.25s ease;
}
.uz-benefit-card:hover .uz-benefit-circle-icon {
transform: scale(1.08);
}
.uz-benefit-text-wrap h4 {
font-size: 1.15rem;
font-weight: 800;
color: #ffffff;
margin: 0 0 3px 0;
line-height: 1.2;
letter-spacing: -0.01em;
}
.uz-benefit-text-wrap p {
font-size: 0.85rem;
color: #e2e8f0;
margin: 0;
line-height: 1.35;
font-weight: 500;
opacity: 0.95;
}
.uz-benefits-right-col {
flex: 0 0 290px;
max-width: 290px;
display: flex;
justify-content: flex-end;
align-items: center;
margin-left: auto;
position: relative;
z-index: 5;
}
.uz-benefits-quote-overlay {
background: rgba(8, 26, 16, 0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
padding: 18px 22px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
width: 100%;
box-sizing: border-box;
}
.uz-benefits-quote-text {
font-size: 1.15rem;
font-weight: 800;
line-height: 1.36;
color: #ffffff;
letter-spacing: -0.01em;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.uz-highlight-perspektiven {
position: relative;
display: inline-block;
color: #ffffff;
}
.uz-curve-line {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 7px;
pointer-events: none;
}
@media (max-width: 1200px) {
.uz-benefits-main-title {
font-size: 2.15rem;
}
.uz-benefits-left-col {
flex: 0 0 58%;
}
}
@media (max-width: 991px) {
.uz-benefits-section {
background: #07381b;
}
.uz-benefits-container {
flex-direction: column;
padding: 45px 24px;
gap: 30px;
}
.uz-benefits-left-col {
flex: 1 1 100%;
max-width: 100%;
}
.uz-benefits-right-col {
flex: 1 1 100%;
max-width: 100%;
margin-left: 0;
justify-content: flex-start;
width: 100%;
}
.uz-benefits-quote-overlay {
width: 100%;
}
}
@media (max-width: 640px) {
.uz-benefits-grid-2x2 {
grid-template-columns: 1fr;
gap: 20px;
}
.uz-benefits-main-title {
font-size: 1.8rem;
}
}
/* 5. Services Section (Alles aus einer Hand - 4 Cards Grid) */
.uz-services-section {
padding: 85px 0 95px 0;
background-color: #ffffff;
}
.uz-srv-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 45px;
}
.uz-srv-card-item {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
display: flex;
flex-direction: column;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
padding: 0;
margin: 0;
}
.uz-srv-card-item:hover {
border-color: #0b5d2b;
transform: translateY(-6px);
box-shadow: 0 16px 36px rgba(11, 93, 43, 0.12);
}
.uz-srv-card-thumb {
width: 100%;
height: 195px;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
line-height: 0;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.uz-srv-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin: 0;
padding: 0;
border: none;
transition: transform 0.45s ease;
}
.uz-srv-card-item:hover .uz-srv-card-thumb img {
transform: scale(1.08);
}
.uz-srv-card-content {
padding: 22px 20px 24px 20px;
display: flex;
flex-direction: column;
flex: 1;
background: #ffffff;
}
.uz-srv-card-content h3 {
font-size: 1.25rem;
font-weight: 800;
color: #0b1526;
margin: 0 0 8px 0;
letter-spacing: -0.01em;
}
.uz-srv-card-content p {
font-size: 0.88rem;
color: #64748b;
line-height: 1.5;
margin: 0 0 18px 0;
flex: 1;
}
.uz-srv-card-link {
font-size: 0.92rem;
font-weight: 800;
color: #0b5d2b;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: all 0.25s ease;
margin-top: auto;
}
.uz-srv-card-link:hover {
gap: 10px;
color: #5fae22;
}
/* 6. Reviews Section */
/* 6. Reviews Section ("Das sagen unsere Kunden" with Left Promo Card & Carousel) */
.clean-reviews-section {
padding: 85px 0 95px 0;
background-color: #f8fafc;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
overflow: hidden;
}
.clean-reviews-layout {
display: grid;
grid-template-columns: 310px 1fr;
gap: 32px;
align-items: stretch;
}
.clean-review-promo-card {
position: relative;
border-radius: 20px;
overflow: hidden;
min-height: 320px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
display: flex;
}
.clean-review-promo-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.clean-review-top-badge {
position: absolute;
top: 18px;
left: 18px;
background: #0b5d2b;
color: #ffffff;
padding: 7px 14px;
border-radius: 12px;
font-size: 0.82rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.clean-review-top-badge .stars {
color: #facc15;
font-size: 0.88rem;
letter-spacing: 1.5px;
}
.clean-review-script-text {
position: absolute;
bottom: 18px;
left: 18px;
right: 18px;
font-family: 'Dancing Script', 'Caveat', cursive;
font-size: 1.8rem;
font-weight: 700;
color: #0f172a;
line-height: 1.2;
text-shadow: 0 1px 4px rgba(255, 255, 255, 0.95);
z-index: 2;
}
/* Right Column Carousel Styles */
.clean-reviews-col-right {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
}
.clean-reviews-top-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.clean-reviews-header-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 700;
color: #0b5d2b;
background: #eaf6ea;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(11, 93, 43, 0.18);
}
.clean-reviews-nav-btns {
display: flex;
align-items: center;
gap: 10px;
}
.clean-rev-nav-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
border: 1.5px solid #e2e8f0;
color: #0f172a;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}
.clean-rev-nav-btn:hover {
background: #0b5d2b;
border-color: #0b5d2b;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(11, 93, 43, 0.25);
}
.clean-reviews-slider-viewport {
position: relative;
overflow: hidden;
width: 100%;
min-width: 0;
border-radius: 20px;
padding: 6px 2px;
}
.clean-reviews-slider-track {
display: flex;
gap: 20px;
width: 100%;
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
align-items: stretch;
}
.clean-review-card-item {
width: calc((100% - 20px) / 2);
min-width: calc((100% - 20px) / 2);
box-sizing: border-box;
background: #ffffff;
border: 1.5px solid #e2ece3;
border-radius: 20px;
padding: 26px 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
flex-shrink: 0;
}
.clean-review-card-item:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(11, 93, 43, 0.1);
border-color: #6fb92c;
}
.clean-review-stars {
color: #f59e0b;
font-size: 1.05rem;
letter-spacing: 2px;
margin-bottom: 12px;
}
.clean-review-quote {
font-size: 0.92rem;
color: #334155;
line-height: 1.6;
margin-bottom: 18px;
min-height: 68px;
}
.clean-review-author {
display: flex;
align-items: center;
gap: 12px;
border-top: 1px solid #f1f5f9;
padding-top: 14px;
}
.clean-author-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e2e8f0;
color: #334155;
font-weight: 800;
font-size: 0.88rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.clean-author-name {
font-size: 0.92rem;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.clean-author-city {
font-size: 0.76rem;
color: #64748b;
margin-top: 2px;
}
.clean-reviews-dots-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.clean-rev-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #cbd5e1;
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.clean-rev-dot:hover {
background: #94a3b8;
}
.clean-rev-dot.active {
background: #0b5d2b;
width: 24px;
border-radius: 999px;
}
@media (max-width: 991px) {
.uz-reviews-grid {
grid-template-columns: 1fr;
}
.clean-review-card-item {
width: 100%;
min-width: 100%;
}
}
/* 7. FAQ Section */
.uz-faq-section {
padding: 84px 0;
background-color: #ffffff;
}
.uz-faq-grid {
display: grid;
grid-template-columns: 0.95fr 1.65fr;
gap: 48px;
align-items: flex-start;
}
.uz-faq-left h2 {
font-size: 2.1rem;
font-weight: 900;
color: #0f172a;
line-height: 1.25;
margin-bottom: 12px;
}
.uz-faq-left p {
font-size: 0.96rem;
color: #64748b;
line-height: 1.6;
margin-bottom: 22px;
}
.uz-faq-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.uz-faq-item {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
transition: all 0.25s ease;
}
.uz-faq-item:hover,
.uz-faq-item.active {
border-color: #0b5d2b;
box-shadow: 0 6px 18px rgba(11, 93, 43, 0.08);
}
.uz-faq-btn {
width: 100%;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 1rem;
font-weight: 800;
color: #0f172a;
transition: color 0.2s ease;
}
.uz-faq-item.active .uz-faq-btn {
color: #0b5d2b;
}
.uz-faq-toggle-icon {
font-size: 1.3rem;
font-weight: 700;
color: #0b5d2b;
line-height: 1;
transition: transform 0.25s ease;
}
.uz-faq-item.active .uz-faq-toggle-icon {
transform: rotate(45deg);
}
.uz-faq-answer {
padding: 0 20px 18px 20px;
font-size: 0.9rem;
color: #475569;
line-height: 1.6;
display: none;
}
.uz-faq-item.active .uz-faq-answer {
display: block;
}
/* 7.5 Umzug Comprehensive Online Preisanfrage Form (Matching Screenshot) */
.umzug-calculator-section {
padding: 85px 0 95px 0;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
border-top: 1px solid #e2e8f0;
}
.umzug-calc-box {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 24px;
padding: 48px;
box-shadow: 0 16px 44px rgba(15, 23, 42, 0.05);
max-width: 960px;
margin: 0 auto;
}
.umzug-calc-header {
text-align: center;
max-width: 650px;
margin: 0 auto 36px auto;
}
.clean-badge-green {
display: inline-block;
color: #0b5d2b;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 8px;
}
.umzug-calc-header h3 {
font-size: 2rem;
font-weight: 900;
color: #0b1526;
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.umzug-calc-header p {
font-size: 0.96rem;
color: #64748b;
margin: 0;
line-height: 1.55;
}
.umzug-route-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 20px;
}
.umzug-route-col {
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 16px;
padding: 24px;
}
.umzug-route-col-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.05rem;
font-weight: 800;
color: #0b5d2b;
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px solid #e2e8f0;
}
.kontakt-form-group {
margin-bottom: 16px;
}
.kontakt-form-group label {
display: block;
font-size: 0.88rem;
font-weight: 700;
color: #334155;
margin-bottom: 6px;
}
.kontakt-input,
.kontakt-select,
.kontakt-textarea {
width: 100%;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 12px;
padding: 12px 16px;
font-size: 0.95rem;
font-family: inherit;
color: #1e293b;
transition: all 0.25s ease;
outline: none;
box-sizing: border-box;
}
.kontakt-input:focus,
.kontakt-select:focus,
.kontakt-textarea:focus {
border-color: #0b5d2b;
box-shadow: 0 0 0 3px rgba(11, 93, 43, 0.15);
}
.kontakt-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 40px;
cursor: pointer;
}
.kontakt-row-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.umzug-services-checkboxes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 10px 0 16px 0;
}
.umzug-check-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.umzug-check-card:hover {
background: #ffffff;
border-color: #0b5d2b;
box-shadow: 0 4px 12px rgba(11, 93, 43, 0.08);
}
.umzug-check-card input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #0b5d2b;
cursor: pointer;
margin: 0;
}
.umzug-check-card span {
font-size: 0.88rem;
font-weight: 700;
color: #334155;
}
.kontakt-textarea {
min-height: 110px;
resize: vertical;
}
.btn-kontakt-submit {
width: 100%;
background: linear-gradient(135deg, #0b5d2b 0%, #15803d 50%, #5fae22 100%);
color: #ffffff !important;
border: none;
border-radius: 12px;
padding: 16px 28px;
font-size: 1.05rem;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 8px 20px rgba(11, 93, 43, 0.25);
transition: all 0.25s ease;
text-decoration: none;
}
.btn-kontakt-submit:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(11, 93, 43, 0.35);
}
/* 8. Full-Width CTA Banner Strip (Pre-Footer - Matching Screenshot 2) */
.clean-cta-banner-section.clean-cta-fullwidth {
width: 100%;
margin: 0;
padding: 38px 0;
background: linear-gradient(90deg, rgba(8, 48, 22, 0.97) 0%, rgba(8, 55, 25, 0.92) 28%, rgba(8, 55, 25, 0.70) 48%, rgba(8, 55, 25, 0.20) 70%, rgba(8, 55, 25, 0.05) 100%), url('../images/munich-skyline.jpg') center bottom / cover no-repeat;
border-top: 1px solid rgba(255, 255, 255, 0.12);
display: block;
position: relative;
z-index: 2;
}
.clean-cta-full-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
}
.clean-cta-info {
max-width: 520px;
flex-shrink: 0;
}
.clean-cta-pill {
display: inline-block;
background: rgba(255, 255, 255, 0.16);
color: #86efac;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.8px;
padding: 4px 14px;
border-radius: 9999px;
margin-bottom: 8px;
text-transform: uppercase;
}
.clean-cta-title {
font-size: 1.95rem;
font-weight: 850;
margin-bottom: 6px;
color: #ffffff;
line-height: 1.2;
letter-spacing: -0.01em;
}
.clean-cta-sub {
font-size: 0.92rem;
color: #e2e8f0;
margin: 0;
}
.clean-cta-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: nowrap;
}
.btn-cta-phone-pill {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(6, 45, 20, 0.90);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
padding: 9px 20px;
color: #ffffff !important;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn-cta-phone-pill:hover {
background: #084822;
transform: translateY(-2px);
color: #ffffff !important;
}
.btn-cta-phone-pill svg {
color: #86efac;
flex-shrink: 0;
}
.btn-cta-phone-pill .phone-text strong {
display: block;
font-size: 0.92rem;
line-height: 1.15;
color: #ffffff;
}
.btn-cta-phone-pill .phone-text small {
font-size: 0.68rem;
color: #cbd5e1;
}
.btn-cta-wa-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(6, 45, 20, 0.90);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(37, 211, 102, 0.45);
border-radius: 9999px;
padding: 13px 22px;
color: #ffffff !important;
font-weight: 700;
font-size: 0.90rem;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn-cta-wa-pill:hover {
background: #0b5d2b;
transform: translateY(-2px);
color: #ffffff !important;
}
.btn-cta-quote-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #6fb92c;
border: none;
border-radius: 9999px;
padding: 14px 24px;
color: #ffffff !important;
font-weight: 800;
font-size: 0.90rem;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
text-decoration: none;
box-shadow: 0 4px 14px rgba(111, 185, 44, 0.35);
}
.btn-cta-quote-pill:hover {
background: #5fae22;
transform: translateY(-2px);
color: #ffffff !important;
}
/* ==========================================================================
COMPREHENSIVE RESPONSIVE MEDIA QUERIES (998px, 798px, 479px, 320px)
========================================================================== */
/* Global Mobile Safety */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* Large Tablet / Small Desktop (<= 1200px) */
@media (max-width: 1200px) {
.uz-hero-section {
background-position: right center !important;
padding: 60px 0 65px 0 !important;
}
.uz-hero-container {
padding: 0 20px;
}
.uz-hero-content {
max-width: 540px;
}
.uz-hero-ctas {
flex-wrap: nowrap !important;
gap: 12px !important;
}
.uz-btn-primary, .uz-btn-wa {
font-size: 0.90rem !important;
padding: 12px 18px !important;
}
.clean-hero-grid {
gap: 28px;
}
}
/* Small Laptops & Tablets Landscape (<= 998px) */
@media (max-width: 998px) {
.container {
padding: 0 20px !important;
}
/* Topbar & Header */
.topbar-wrapper {
display: block !important;
}
.navbar-container {
padding: 12px 20px !important;
}
/* Section 1: Hero */
.uz-hero-section {
background: #ffffff !important;
padding: 45px 0 50px 0 !important;
min-height: auto !important;
}
.uz-hero-content {
max-width: 100% !important;
width: 100% !important;
}
.uz-hero-desc {
max-width: 100% !important;
}
.uz-hero-ctas {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.uz-trust-row {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
/* Section 2: Showcase Carousel & Stats */
.clean-hero-section {
padding: 55px 0 !important;
}
.clean-hero-grid {
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
width: 100% !important;
}
.clean-hero-left,
.clean-hero-right {
max-width: 100% !important;
width: 100% !important;
flex: none !important;
}
.clean-hero-subtitle {
max-width: 100% !important;
}
.clean-carousel-card {
max-width: 100% !important;
width: 100% !important;
}
.clean-hero-stats-row {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
width: 100% !important;
}
.clean-stat-pill {
width: 100% !important;
box-sizing: border-box !important;
}
/* Section 3: Services 3-Col Cards Grid */
.clean-services-section {
padding: 65px 0 75px 0 !important;
}
.clean-cards-3col {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
margin-top: 36px !important;
width: 100% !important;
}
.clean-srv-card {
width: 100% !important;
}
/* Section 4: Intro (Individuell. Flexibel. Zuverlässig.) */
.uz-intro-section {
padding: 65px 0 !important;
}
.uz-intro-grid {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
width: 100% !important;
}
.uz-intro-left,
.uz-intro-right {
width: 100% !important;
max-width: 100% !important;
}
.uz-cards-4col {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
width: 100% !important;
}
/* Section 5: Benefits */
.uz-benefits-section {
padding: 50px 0 !important;
}
.uz-benefits-container {
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
padding: 36px 24px !important;
width: 100% !important;
}
.uz-benefits-left-col,
.uz-benefits-right-col {
flex: none !important;
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
justify-content: flex-start !important;
}
.uz-benefits-grid-2x2 {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 18px !important;
}
.uz-benefits-quote-overlay {
width: 100% !important;
max-width: 100% !important;
}
/* Section 6: Reviews */
.clean-reviews-section {
padding: 65px 0 !important;
}
.clean-reviews-layout {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
width: 100% !important;
}
.clean-reviews-col-left,
.clean-reviews-col-right {
width: 100% !important;
max-width: 100% !important;
}
.clean-review-promo-card {
min-height: 280px !important;
max-height: 340px !important;
width: 100% !important;
}
/* Section 7: FAQ */
.uz-faq-section {
padding: 65px 0 !important;
}
.uz-faq-grid {
display: flex !important;
flex-direction: column !important;
gap: 30px !important;
width: 100% !important;
}
.uz-faq-left,
.uz-faq-right {
width: 100% !important;
max-width: 100% !important;
}
.uz-rating-box {
max-width: 420px !important;
margin: 0 auto !important;
}
/* Section 8: Form (Online Preisanfrage) */
.umzug-calculator-section {
padding: 60px 0 !important;
}
.umzug-route-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.umzug-services-checkboxes {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.umzug-calc-box {
padding: 32px 24px !important;
}
.kontakt-row-2col {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
/* Section 9: Pre-Footer CTA Banner */
.clean-cta-full-container {
display: flex !important;
flex-direction: column !important;
text-align: center !important;
gap: 20px !important;
width: 100% !important;
}
.clean-cta-info {
max-width: 100% !important;
}
.clean-cta-actions {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 14px !important;
}
}
/* Small Tablets & Large Phones (<= 798px) */
@media (max-width: 798px) {
/* Section 1: Hero */
.uz-hero-title {
font-size: 2.15rem !important;
line-height: 1.18 !important;
}
.uz-hero-subtitle {
font-size: 1.05rem !important;
}
.uz-trust-row {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* Section 2: Showcase */
.clean-hero-title {
font-size: 1.95rem !important;
}
.clean-carousel-caption {
font-size: 0.95rem !important;
padding: 12px 16px !important;
}
.clean-hero-stats-row {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* Section 3: Services (1 Column on Tablet Portrait) */
.clean-cards-3col {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
max-width: 540px !important;
margin: 30px auto 0 auto !important;
width: 100% !important;
}
.clean-card-img-wrap {
height: 220px !important;
}
/* Section 4: Intro */
.uz-intro-left h2 {
font-size: 1.95rem !important;
}
.uz-cards-4col {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
max-width: 540px !important;
margin: 0 auto !important;
width: 100% !important;
}
/* Section 5: Benefits */
.uz-benefits-main-title {
font-size: 1.85rem !important;
}
.uz-benefits-grid-2x2 {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.uz-benefits-truck-frame {
height: 280px !important;
}
.uz-benefits-quote-text {
font-size: 1.05rem !important;
}
/* Section 6: Reviews */
.clean-reviews-col-right {
padding: 22px 16px !important;
}
.clean-review-card-item {
width: 100% !important;
min-width: 100% !important;
flex: 0 0 100% !important;
}
/* Section 7: FAQ */
.uz-faq-left h2 {
font-size: 1.80rem !important;
}
/* Section 8: Form */
.umzug-calc-box {
padding: 26px 18px !important;
border-radius: 20px !important;
}
.umzug-services-checkboxes {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.kontakt-row-2col {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.umzug-input-row-2 {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Section 9: CTA Banner */
.clean-cta-title {
font-size: 1.70rem !important;
}
.clean-cta-actions {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
.btn-cta-phone-pill,
.btn-cta-wa-pill,
.btn-cta-quote-pill {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
}
/* Mobile Screens (<= 479px) */
@media (max-width: 479px) {
.container {
padding: 0 16px !important;
}
/* Section 1: Hero */
.uz-hero-section {
padding: 28px 0 36px 0 !important;
background: #ffffff !important;
}
.uz-hero-badge {
font-size: 0.70rem !important;
padding: 5px 12px !important;
margin-bottom: 12px !important;
}
.uz-hero-title {
font-size: 1.80rem !important;
line-height: 1.15 !important;
margin-bottom: 12px !important;
}
.uz-hero-subtitle {
font-size: 1.0rem !important;
line-height: 1.3 !important;
margin-bottom: 10px !important;
}
.uz-hero-desc {
font-size: 0.88rem !important;
line-height: 1.5 !important;
margin-bottom: 18px !important;
}
.uz-hero-ctas {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
.uz-btn-primary,
.uz-btn-wa {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 13px 18px !important;
font-size: 0.90rem !important;
box-sizing: border-box !important;
}
.uz-trust-row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
margin-top: 20px !important;
width: 100% !important;
}
.uz-trust-pill {
padding: 10px 14px !important;
}
/* Section 2: Showcase */
.clean-hero-section {
padding: 40px 0 !important;
}
.clean-hero-badge {
font-size: 0.70rem !important;
padding: 5px 12px !important;
}
.clean-hero-title {
font-size: 1.70rem !important;
line-height: 1.18 !important;
}
.clean-hero-subtitle {
font-size: 0.88rem !important;
line-height: 1.45 !important;
margin-bottom: 20px !important;
}
.clean-hero-btn-group {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
.btn-hero-green,
.btn-hero-outline {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 12px 18px !important;
font-size: 0.90rem !important;
box-sizing: border-box !important;
}
.clean-carousel-card {
border-radius: 16px !important;
}
.clean-carousel-img-wrap {
height: 230px !important;
}
.clean-carousel-caption {
font-size: 0.88rem !important;
padding: 10px 14px !important;
}
.clean-hero-stats-row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
width: 100% !important;
}
.clean-stat-pill {
padding: 10px 14px !important;
}
.clean-stat-pill .pill-val {
font-size: 1.35rem !important;
}
/* Section 3: Services (1 Column Full Width) */
.clean-services-section {
padding: 45px 0 !important;
}
.section-badge {
font-size: 0.72rem !important;
padding: 5px 12px !important;
}
.section-title {
font-size: 1.70rem !important;
line-height: 1.2 !important;
}
.section-subtitle {
font-size: 0.88rem !important;
line-height: 1.45 !important;
}
.clean-cards-3col {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 20px !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 25px !important;
}
.clean-srv-card {
width: 100% !important;
border-radius: 18px !important;
}
.clean-card-img-wrap {
height: 190px !important;
}
.clean-card-body {
padding: 28px 16px 20px 16px !important;
}
.clean-card-icon-wrap {
width: 48px !important;
height: 48px !important;
top: -24px !important;
left: 16px !important;
}
.clean-card-title {
font-size: 1.25rem !important;
margin-bottom: 8px !important;
}
.clean-card-desc {
font-size: 0.86rem !important;
line-height: 1.45 !important;
margin-bottom: 16px !important;
}
.clean-card-features li {
font-size: 0.84rem !important;
gap: 8px !important;
margin-bottom: 7px !important;
}
.btn-card-clean {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 11px 16px !important;
font-size: 0.88rem !important;
box-sizing: border-box !important;
}
/* Section 4: Intro */
.uz-intro-section {
padding: 45px 0 !important;
}
.uz-intro-grid {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
width: 100% !important;
}
.uz-intro-left h2 {
font-size: 1.70rem !important;
line-height: 1.2 !important;
}
.uz-intro-left p {
font-size: 0.88rem !important;
margin-bottom: 18px !important;
}
.uz-intro-left .uz-btn-primary {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
.uz-cards-4col {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
width: 100% !important;
}
.uz-feature-card {
padding: 18px 14px !important;
border-radius: 14px !important;
}
.uz-feature-card h3 {
font-size: 1.15rem !important;
}
.uz-feature-card p {
font-size: 0.86rem !important;
}
/* Section 5: Benefits */
.uz-benefits-section {
padding: 40px 0 !important;
}
.uz-benefits-container {
padding: 24px 16px !important;
border-radius: 20px !important;
gap: 24px !important;
}
.uz-benefits-main-title {
font-size: 1.65rem !important;
line-height: 1.2 !important;
margin-bottom: 20px !important;
}
.uz-benefit-card {
gap: 12px !important;
}
.uz-benefit-circle-icon {
width: 44px !important;
height: 44px !important;
flex-shrink: 0 !important;
}
.uz-benefit-circle-icon svg {
width: 20px !important;
height: 20px !important;
}
.uz-benefit-text-wrap h4 {
font-size: 1.05rem !important;
margin-bottom: 4px !important;
}
.uz-benefit-text-wrap p {
font-size: 0.86rem !important;
line-height: 1.45 !important;
}
.uz-benefits-truck-frame {
border-radius: 16px !important;
height: 220px !important;
}
.uz-benefits-quote-overlay {
padding: 14px 14px !important;
border-radius: 14px !important;
}
.uz-benefits-quote-text {
font-size: 0.92rem !important;
line-height: 1.35 !important;
}
.uz-benefits-quote-author {
font-size: 0.80rem !important;
}
/* Section 6: Reviews */
.clean-reviews-section {
padding: 45px 0 !important;
}
.clean-review-promo-card {
padding: 22px 16px !important;
min-height: 240px !important;
border-radius: 18px !important;
}
.clean-promo-text-wrap h3 {
font-size: 1.35rem !important;
}
.clean-promo-text-wrap p {
font-size: 0.86rem !important;
}
.clean-reviews-col-right {
padding: 18px 12px !important;
border-radius: 18px !important;
}
.clean-reviews-top-bar {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 14px !important;
}
.clean-reviews-header-badge {
font-size: 0.72rem !important;
padding: 4px 10px !important;
}
.clean-review-card-item {
padding: 16px 14px !important;
border-radius: 14px !important;
}
.clean-review-author h4 {
font-size: 0.96rem !important;
}
.clean-review-quote {
font-size: 0.86rem !important;
line-height: 1.45 !important;
min-height: auto !important;
}
/* Section 7: FAQ */
.uz-faq-section {
padding: 45px 0 !important;
}
.uz-faq-left h2 {
font-size: 1.55rem !important;
line-height: 1.22 !important;
}
.uz-faq-left p {
font-size: 0.88rem !important;
}
.uz-faq-btn {
padding: 14px 12px !important;
font-size: 0.88rem !important;
gap: 10px !important;
}
.uz-faq-answer {
padding: 0 12px 14px 12px !important;
font-size: 0.84rem !important;
}
.uz-rating-box {
padding: 20px 16px !important;
border-radius: 16px !important;
}
.uz-contact-pill-card {
padding: 18px 14px !important;
border-radius: 16px !important;
}
/* Section 8: Form */
.umzug-calculator-section {
padding: 40px 0 50px 0 !important;
}
.umzug-calc-box {
padding: 20px 12px !important;
border-radius: 16px !important;
}
.umzug-calc-header h3 {
font-size: 1.35rem !important;
line-height: 1.25 !important;
}
.umzug-calc-header p {
font-size: 0.86rem !important;
}
.umzug-calc-step-title {
font-size: 1.0rem !important;
}
.umzug-route-col {
padding: 14px 10px !important;
border-radius: 12px !important;
}
.umzug-route-col-title {
font-size: 0.90rem !important;
}
.umzug-label {
font-size: 0.78rem !important;
margin-bottom: 4px !important;
}
.umzug-input-text, .umzug-select, .form-control-umzug {
padding: 10px 10px !important;
font-size: 0.86rem !important;
height: auto !important;
}
.umzug-services-checkboxes {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.umzug-service-checkbox {
padding: 10px 10px !important;
}
.checkbox-label strong {
font-size: 0.86rem !important;
}
.checkbox-label small {
font-size: 0.74rem !important;
}
.btn-kontakt-submit {
font-size: 0.92rem !important;
padding: 13px 14px !important;
width: 100% !important;
}
/* Section 9: Pre-Footer CTA */
.clean-cta-banner-section {
padding: 40px 0 !important;
}
.clean-cta-full-container {
padding: 28px 16px !important;
border-radius: 20px !important;
}
.clean-cta-tagline {
font-size: 0.72rem !important;
}
.clean-cta-title {
font-size: 1.45rem !important;
line-height: 1.22 !important;
}
.clean-cta-sub {
font-size: 0.86rem !important;
}
.clean-cta-actions {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
.btn-cta-phone-pill,
.btn-cta-wa-pill,
.btn-cta-quote-pill {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 12px 16px !important;
font-size: 0.88rem !important;
box-sizing: border-box !important;
}
}
/* Small Screen Mobile (<= 320px) */
@media (max-width: 320px) {
.container {
padding: 0 10px !important;
}
/* Section 1: Hero */
.uz-hero-badge {
font-size: 0.65rem !important;
padding: 4px 10px !important;
}
.uz-hero-title {
font-size: 1.55rem !important;
line-height: 1.15 !important;
}
.uz-hero-subtitle {
font-size: 0.90rem !important;
}
.uz-hero-desc {
font-size: 0.82rem !important;
}
.uz-btn-primary, .uz-btn-wa {
padding: 11px 14px !important;
font-size: 0.84rem !important;
}
.uz-trust-pill {
padding: 8px 10px !important;
font-size: 0.78rem !important;
}
.uz-trust-pill-icon {
width: 30px !important;
height: 30px !important;
}
/* Section 2: Showcase */
.clean-hero-title {
font-size: 1.45rem !important;
}
.clean-hero-subtitle {
font-size: 0.82rem !important;
}
.btn-hero-green, .btn-hero-outline {
padding: 10px 14px !important;
font-size: 0.84rem !important;
}
.clean-carousel-img-wrap {
height: 190px !important;
}
.clean-stat-pill .pill-val {
font-size: 1.20rem !important;
}
.clean-stat-pill .pill-lbl {
font-size: 0.74rem !important;
}
/* Section 3: Services */
.section-title {
font-size: 1.45rem !important;
}
.clean-card-img-wrap {
height: 165px !important;
}
.clean-card-body {
padding: 24px 12px 16px 12px !important;
}
.clean-card-title {
font-size: 1.15rem !important;
}
.clean-card-desc {
font-size: 0.82rem !important;
}
.clean-card-features li {
font-size: 0.80rem !important;
}
.btn-card-clean {
padding: 10px 12px !important;
font-size: 0.82rem !important;
}
/* Section 4: Intro */
.uz-intro-left h2 {
font-size: 1.45rem !important;
}
.uz-feature-card {
padding: 14px 10px !important;
}
.uz-feature-card h3 {
font-size: 1.05rem !important;
}
.uz-feature-card p {
font-size: 0.82rem !important;
}
/* Section 5: Benefits */
.uz-benefits-container {
padding: 18px 10px !important;
}
.uz-benefits-main-title {
font-size: 1.45rem !important;
}
.uz-benefit-circle-icon {
width: 38px !important;
height: 38px !important;
}
.uz-benefit-circle-icon svg {
width: 18px !important;
height: 18px !important;
}
.uz-benefit-text-wrap h4 {
font-size: 0.96rem !important;
}
.uz-benefit-text-wrap p {
font-size: 0.80rem !important;
}
.uz-benefits-truck-frame {
height: 200px !important;
}
.uz-benefits-quote-text {
font-size: 0.84rem !important;
}
/* Section 6: Reviews */
.clean-promo-text-wrap h3 {
font-size: 1.20rem !important;
}
.clean-reviews-col-right {
padding: 14px 8px !important;
}
.clean-review-card-item {
padding: 14px 10px !important;
}
.clean-review-quote {
font-size: 0.82rem !important;
}
/* Section 7: FAQ */
.uz-faq-left h2 {
font-size: 1.40rem !important;
}
.uz-faq-btn {
padding: 12px 8px !important;
font-size: 0.82rem !important;
}
.uz-faq-answer {
font-size: 0.80rem !important;
padding: 0 10px 12px 10px !important;
}
/* Section 8: Form */
.umzug-calc-box {
padding: 16px 8px !important;
}
.umzug-calc-header h3 {
font-size: 1.20rem !important;
}
.umzug-route-col {
padding: 10px 8px !important;
}
.umzug-input-text, .umzug-select, .form-control-umzug {
padding: 8px 8px !important;
font-size: 0.82rem !important;
}
.btn-kontakt-submit {
font-size: 0.86rem !important;
padding: 12px 10px !important;
}
/* Section 9: CTA Banner */
.clean-cta-full-container {
padding: 22px 10px !important;
}
.clean-cta-title {
font-size: 1.30rem !important;
}
.btn-cta-phone-pill,
.btn-cta-wa-pill,
.btn-cta-quote-pill {
padding: 10px 12px !important;
font-size: 0.82rem !important;
}
}
/* ========================================================
LEGAL PAGES STYLES (Impressum & Datenschutz)
======================================================== */
.legal-half-banner {
min-height: 280px;
padding: 70px 0 50px 0;
position: relative;
display: flex;
align-items: center;
}
.legal-banner-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(111, 185, 44, 0.18);
border: 1px solid rgba(111, 185, 44, 0.4);
color: #84cc16;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 5px 12px;
border-radius: 9999px;
margin-bottom: 14px;
}
.legal-page-section {
padding: 70px 0 90px 0;
background: #f8fafc;
}
.legal-content-card {
background: #ffffff;
border-radius: 16px;
border: 1px solid #e2e8f0;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
padding: 48px 56px;
max-width: 980px;
margin: 0 auto;
}
.legal-body-content {
color: #334155;
font-size: 1.02rem;
line-height: 1.8;
}
.legal-body-content h2 {
font-size: 1.45rem;
font-weight: 800;
color: #0f172a;
margin: 36px 0 16px 0;
padding-bottom: 10px;
border-bottom: 2px solid #f1f5f9;
position: relative;
}
.legal-body-content h2:first-child {
margin-top: 0;
}
.legal-body-content h2::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 48px;
height: 2px;
background: #6fb92c;
}
.legal-body-content h3 {
font-size: 1.15rem;
font-weight: 700;
color: #1e293b;
margin: 22px 0 10px 0;
}
.legal-body-content p {
margin: 0 0 18px 0;
color: #475569;
}
.legal-body-content ul,
.legal-body-content ol {
margin: 0 0 20px 24px;
color: #475569;
}
.legal-body-content li {
margin-bottom: 8px;
line-height: 1.7;
}
.legal-body-content a {
color: #0b5d2b;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
transition: color 0.2s ease;
}
.legal-body-content a:hover {
color: #6fb92c;
}
.legal-info-alert {
display: flex;
align-items: flex-start;
gap: 14px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-left: 4px solid #16a34a;
padding: 16px 20px;
border-radius: 8px;
margin-bottom: 32px;
color: #166534;
font-size: 0.95rem;
line-height: 1.6;
}
.legal-grid-box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 22px;
margin: 18px 0 28px 0;
}
.legal-box-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.legal-box-label {
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
}
.legal-contact-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 18px 0 28px 0;
}
.contact-card-mini {
display: flex;
align-items: center;
gap: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 14px 18px;
transition: all 0.2s ease;
}
.contact-card-mini:hover {
border-color: #6fb92c;
background: #ffffff;
box-shadow: 0 4px 12px rgba(111, 185, 44, 0.08);
}
.contact-card-mini div {
display: flex;
flex-direction: column;
}
.contact-card-mini strong {
font-size: 0.8rem;
color: #64748b;
text-transform: uppercase;
}
.contact-card-mini a {
text-decoration: none;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
}
@media (max-width: 768px) {
.legal-content-card {
padding: 28px 20px;
border-radius: 12px;
}
.legal-body-content h2 {
font-size: 1.25rem;
}
}
/* ========================================================
MODERN PREMIUM STYLING FOR LEGAL PAGES (Impressum & Datenschutz)
======================================================== */
.legal-page-section {
padding: 70px 0 100px 0 !important;
background: #f1f5f9 !important; /* Soft distinct contrast against white cards */
min-height: 60vh;
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.legal-cards-container {
max-width: 960px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
.legal-card-block {
background: #ffffff !important;
border-radius: 18px !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 4px 10px -2px rgba(15, 23, 42, 0.03) !important;
padding: 34px 42px !important;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
position: relative !important;
}
.legal-card-block:hover {
border-color: #cbd5e1 !important;
box-shadow: 0 18px 40px -8px rgba(15, 23, 42, 0.09) !important;
transform: translateY(-2px) !important;
}
.legal-card-header {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding-bottom: 18px !important;
border-bottom: 1px solid #f1f5f9 !important;
margin-bottom: 22px !important;
}
.legal-card-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 38px !important;
height: 38px !important;
padding: 0 8px !important;
border-radius: 10px !important;
background: #eef8ee !important;
color: #16a34a !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
border: 1px solid rgba(22, 163, 74, 0.2) !important;
}
.legal-card-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 1.35rem !important;
font-weight: 800 !important;
color: #0f172a !important;
margin: 0 !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
}
.legal-card-body {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 1.02rem !important;
line-height: 1.85 !important;
color: #334155 !important;
}
.legal-card-body p {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 1.02rem !important;
line-height: 1.85 !important;
color: #334155 !important;
margin: 0 0 14px 0 !important;
}
.legal-card-body p:last-child {
margin-bottom: 0 !important;
}
.legal-company-box {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
padding: 22px 26px !important;
margin-bottom: 20px !important;
}
.legal-company-box .company-name {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 1.2rem !important;
font-weight: 800 !important;
color: #0f172a !important;
margin-bottom: 8px !important;
}
.legal-company-box .company-address {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 1.02rem !important;
color: #334155 !important;
line-height: 1.7 !important;
margin: 0 !important;
}
.legal-contact-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
gap: 14px !important;
margin-top: 20px !important;
}
.legal-contact-item {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 14px 20px !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
text-decoration: none !important;
color: #1e293b !important;
transition: all 0.25s ease !important;
}
.legal-contact-item:hover {
background: #f0fdf4 !important;
border-color: #86efac !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(22, 163, 74, 0.12) !important;
}
.legal-contact-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
background: #eef8ee !important;
color: #16a34a !important;
flex-shrink: 0 !important;
transition: all 0.2s ease !important;
}
.legal-contact-item:hover .legal-contact-icon {
background: #16a34a !important;
color: #ffffff !important;
}
.legal-contact-text {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.legal-contact-label {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.76rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: #64748b !important;
}
.legal-contact-val {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.98rem !important;
font-weight: 700 !important;
color: #0f172a !important;
}
.legal-contact-item:hover .legal-contact-val {
color: #15803d !important;
}
.legal-bullet-list {
margin: 14px 0 18px 0 !important;
padding-left: 0 !important;
list-style: none !important;
}
.legal-bullet-list li {
position: relative !important;
padding-left: 26px !important;
margin-bottom: 10px !important;
line-height: 1.75 !important;
color: #334155 !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 1.01rem !important;
}
.legal-bullet-list li::before {
content: '' !important;
position: absolute !important;
left: 4px !important;
top: 10px !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #16a34a !important;
}
.legal-card-body a {
color: #0b5d2b !important;
font-weight: 600 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
transition: color 0.2s ease !important;
}
.legal-card-body a:hover {
color: #16a34a !important;
}
.legal-stand-wrapper {
display: flex !important;
justify-content: center !important;
margin-top: 10px !important;
}
.legal-stand-pill {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 28px !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 9999px !important;
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
color: #475569 !important;
}
.legal-stand-pill svg {
color: #16a34a !important;
}
/* Fallback for Classic Editor */
.legal-content-card {
background: #ffffff !important;
border-radius: 18px !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06) !important;
padding: 42px 48px !important;
max-width: 960px !important;
margin: 0 auto !important;
}
@media (max-width: 768px) {
.legal-card-block {
padding: 24px 20px !important;
border-radius: 14px !important;
}
.legal-card-title {
font-size: 1.18rem !important;
}
.legal-content-card {
padding: 26px 20px !important;
}
.legal-page-section {
padding: 40px 0 70px 0 !important;
}
.legal-contact-grid {
grid-template-columns: 1fr !important;
}
}