/* =====================================================================
Anwalt Zink — consolidated stylesheet
===================================================================== */
:root {
/* Core dark tones */
--clr-dark: #242f35;
--clr-dark-mid: #2e3c44;
/* Text */
--clr-text-muted: #5f6b71;
--clr-text-subtle: #a3a9ab;
/* Surfaces */
--clr-surface-teal: #e2eeee;
--clr-surface-light: #f3f7f8;
--clr-white: #ffffff;
/* Accent + status */
--clr-accent: #f2a73d;
--clr-danger: #e0584f;
--clr-success: #79b98a;
/* Motion */
--ease: cubic-bezier(0, 0, 0.3642, 1);
--transition-fast: 0.2s var(--ease);
--transition-slow: 0.4s var(--ease);
}
/* Generic layout primitives (replace Elementor .e-con / .site-widget) */
.box { position: relative; width: 100%; }
.widget { position: relative; min-width: 0; max-width: 100%; }
.box-inner {
display: flex; flex-direction: column; gap: 0; width: 100%; height: 100%;
margin: 0 auto; flex: 1 1 auto; max-width: min(100%, 1140px);
}
@media (max-width: 992px) { .box-inner { max-width: min(100%, 1024px); } }
@media (max-width: 767px) { .box-inner { max-width: min(100%, 767px); } }
/* =====================================================================
BASE / THEME (former main.css)
===================================================================== */
/* Local web fonts */
/* latin-ext */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url(../fonts/site/plus-jakarta-sans-3.woff2) format("woff2");
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url(../fonts/site/plus-jakarta-sans-4.woff2) format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}/* latin */
@font-face {
font-family: "Reenie Beanie";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/site/reenie-beanie-latin.woff2) format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}/*!
Theme Name: Anwalt
*/
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}*:focus,
*::before:focus,
*::after:focus {
outline: inherit;
}*::-moz-selection {
color: var(--clr-dark);
background-color: var(--clr-accent);
}*::selection {
color: var(--clr-dark);
background-color: var(--clr-accent);
}::-webkit-scrollbar {
width: 3px;
}::-webkit-scrollbar-track {
background: var(--clr-dark);
}::-webkit-scrollbar-thumb {
background: var(--clr-accent);
}html.lenis {
height: auto;
}.lenis.lenis-smooth {
scroll-behavior: auto !important;
}.lenis.lenis-stopped {
overflow: hidden;
}body {
overscroll-behavior: none;
padding: 0;
margin: 0;
height: auto;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.8rem;
line-height: 175%;
}a {
text-decoration: inherit;
color: inherit;
}p a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: currentColor;
}p a:hover {
color: var( --clr-dark);
text-decoration-color: var( --clr-dark);
}html {
font-size: 9px;
}@media (max-width: 1600px) {
html {
font-size: 8px;
}
}/* =====================================================
Fluid typography · 375 → 1600 px viewport
clamp( min, slope·vw + offset, max )
px values from original rem scale (9px root ≥1600px / 8px root <1600px):
h1 75.6/41.6 h2 37.8/28.8 h3 24/22
h4 19.8/17.6 h5 same h6 16.2/14.4
===================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 800;
color: var(--clr-dark);
line-height: 100%;
letter-spacing: -0.04em;
word-wrap: break-word;
}h1,
.h1 {
font-size: clamp(41.6px, calc(31.19px + 2.78vw), 75.6px);
}h2,
.h2 {
font-size: clamp(28.8px, calc(26.04px + 0.73vw), 37.8px);
line-height: 110%;
}h3,
.h3 {
font-size: clamp(22px, calc(21.39px + 0.16vw), 24px);
line-height: 110%;
letter-spacing: -0.01em;
}h4,
.h4 {
font-size: clamp(17.6px, calc(16.93px + 0.18vw), 19.8px);
line-height: 110%;
letter-spacing: -0.01em;
}h5,
.h5 {
font-size: clamp(17.6px, calc(16.93px + 0.18vw), 19.8px);
line-height: 110%;
font-weight: 700;
letter-spacing: -0.01em;
}h6,
.h6 {
font-size: clamp(14.4px, calc(13.87px + 0.15vw), 16.2px);
line-height: 120%;
font-weight: 700;
letter-spacing: -0.01em;
}p {
hyphens: auto;
overflow-wrap: break-word;
}.t-14 {
font-size: 1.4rem;
line-height: 175%;
}.text-xl,
.text-lg,
.text-sm,
.text-xs {
color: var(--clr-text-muted);
}.text-xl {
font-size: 2.4rem;
line-height: 175%;
}.text-lg {
font-size: 1.8rem;
line-height: 175%;
}.text-sm {
font-size: 1.4rem;
line-height: 160%;
}.text-xs {
font-size: 1.2rem;
line-height: 160%;
}.text-xl p,
.text-lg p,
.text-sm p,
.text-xs p {
margin-bottom: 2rem;
}.text-xl p:last-child,
.text-lg p:last-child,
.text-sm p:last-child,
.text-xs p:last-child {
margin-bottom: 0;
}.text-xl a,
.text-lg a,
.text-sm a,
.text-xs a {
color: var(--clr-dark);
text-decoration: none;
position: relative;
transition: var(--transition-fast);
}.text-xl a:after,
.text-lg a:after,
.text-sm a:after,
.text-xs a:after {
content: "";
width: 0;
height: 0.1rem;
position: absolute;
bottom: 0;
left: 0;
background-color: var(--clr-accent);
transition: var(--transition-fast);
}.text-xl a:hover,
.text-lg a:hover,
.text-sm a:hover,
.text-xs a:hover {
color: var(--clr-accent);
text-decoration: none;
}.text-xl a:hover:after,
.text-lg a:hover:after,
.text-sm a:hover:after,
.text-xs a:hover:after {
width: 100%;
}.c-m-1 {
color: var(--clr-dark);
}.c-m-2 {
color: var(--clr-text-muted);
}.c-m-3 {
color: var(--clr-text-subtle);
}.c-m-4 {
color: var(--clr-surface-teal);
}.c-m-5 {
color: var(--clr-surface-light);
}.c-a-1 {
color: var(--clr-accent);
}.hidden {
display: none !important;
}@media (max-width: 1200px) {
.lg-hidden {
display: none !important;
}
}@media (max-width: 992px) {
.md-hidden {
display: none !important;
}
}@media (max-width: 767px) {
.sm-hidden {
display: none !important;
}
}.mt-0 {
margin-top: 0;
}.mb-0 {
margin-bottom: 0;
}.ml-0 {
margin-left: 0;
}.mr-0 {
margin-right: 0;
}.mt-1 {
margin-top: 1rem;
}.mb-1 {
margin-bottom: 1rem;
}.ml-1 {
margin-left: 1rem;
}.mr-1 {
margin-right: 1rem;
}.mt-2 {
margin-top: 2rem;
}.mb-2 {
margin-bottom: 2rem;
}.ml-2 {
margin-left: 2rem;
}.mr-2 {
margin-right: 2rem;
}.mt-3 {
margin-top: 3rem;
}.mb-3 {
margin-bottom: 3rem;
}.ml-3 {
margin-left: 3rem;
}.mr-3 {
margin-right: 3rem;
}.mt-4 {
margin-top: 4rem;
}.mb-4 {
margin-bottom: 4rem;
}.ml-4 {
margin-left: 4rem;
}.mr-4 {
margin-right: 4rem;
}.mt-5 {
margin-top: 5rem;
}.mb-5 {
margin-bottom: 5rem;
}.ml-5 {
margin-left: 5rem;
}.mr-5 {
margin-right: 5rem;
}.mt-6 {
margin-top: 6rem;
}.mb-6 {
margin-bottom: 6rem;
}.ml-6 {
margin-left: 6rem;
}.mr-6 {
margin-right: 6rem;
}.mt-7 {
margin-top: 7rem;
}.mb-7 {
margin-bottom: 7rem;
}.ml-7 {
margin-left: 7rem;
}.mr-7 {
margin-right: 7rem;
}.mt-8 {
margin-top: 8rem;
}.mb-8 {
margin-bottom: 8rem;
}.ml-8 {
margin-left: 8rem;
}.mr-8 {
margin-right: 8rem;
}.mt-9 {
margin-top: 9rem;
}.mb-9 {
margin-bottom: 9rem;
}.ml-9 {
margin-left: 9rem;
}.mr-9 {
margin-right: 9rem;
}.mt-10 {
margin-top: 10rem;
}.mb-10 {
margin-bottom: 10rem;
}.ml-10 {
margin-left: 10rem;
}.mr-10 {
margin-right: 10rem;
}.flex-row {
display: flex;
flex-direction: row;
}.flex-column {
display: flex;
flex-direction: column;
}.jcc {
justify-content: center;
}.jcs {
justify-content: flex-start;
}.jce {
justify-content: flex-end;
}.jcb {
justify-content: space-between;
}.aic {
align-items: center;
}.ais {
align-items: flex-start;
}.aie {
align-items: flex-end;
}@media (max-width: 1200px) {
.lg-mt-0 {
margin-top: 0;
}.lg-mb-0 {
margin-bottom: 0;
}.lg-ml-0 {
margin-left: 0;
}.lg-mr-0 {
margin-right: 0;
}.lg-mt-1 {
margin-top: 1rem;
}.lg-mb-1 {
margin-bottom: 1rem;
}.lg-ml-1 {
margin-left: 1rem;
}.lg-mr-1 {
margin-right: 1rem;
}.lg-mt-2 {
margin-top: 2rem;
}.lg-mb-2 {
margin-bottom: 2rem;
}.lg-ml-2 {
margin-left: 2rem;
}.lg-mr-2 {
margin-right: 2rem;
}.lg-mt-3 {
margin-top: 3rem;
}.lg-mb-3 {
margin-bottom: 3rem;
}.lg-ml-3 {
margin-left: 3rem;
}.lg-mr-3 {
margin-right: 3rem;
}.lg-mt-4 {
margin-top: 4rem;
}.lg-mb-4 {
margin-bottom: 4rem;
}.lg-ml-4 {
margin-left: 4rem;
}.lg-mr-4 {
margin-right: 4rem;
}.lg-mt-5 {
margin-top: 5rem;
}.lg-mb-5 {
margin-bottom: 5rem;
}.lg-ml-5 {
margin-left: 5rem;
}.lg-mr-5 {
margin-right: 5rem;
}.lg-mt-6 {
margin-top: 6rem;
}.lg-mb-6 {
margin-bottom: 6rem;
}.lg-ml-6 {
margin-left: 6rem;
}.lg-mr-6 {
margin-right: 6rem;
}.lg-mt-7 {
margin-top: 7rem;
}.lg-mb-7 {
margin-bottom: 7rem;
}.lg-ml-7 {
margin-left: 7rem;
}.lg-mr-7 {
margin-right: 7rem;
}.lg-mt-8 {
margin-top: 8rem;
}.lg-mb-8 {
margin-bottom: 8rem;
}.lg-ml-8 {
margin-left: 8rem;
}.lg-mr-8 {
margin-right: 8rem;
}.lg-mt-9 {
margin-top: 9rem;
}.lg-mb-9 {
margin-bottom: 9rem;
}.lg-ml-9 {
margin-left: 9rem;
}.lg-mr-9 {
margin-right: 9rem;
}.lg-mt-10 {
margin-top: 10rem;
}.lg-mb-10 {
margin-bottom: 10rem;
}.lg-ml-10 {
margin-left: 10rem;
}.lg-mr-10 {
margin-right: 10rem;
}.lg-flex-row {
display: flex;
flex-direction: row;
}.lg-flex-column {
display: flex;
flex-direction: column;
}.lg-jcc {
justify-content: center;
}.lg-jcs {
justify-content: flex-start;
}.lg-jce {
justify-content: flex-end;
}.lg-jcb {
justify-content: space-between;
}.lg-aic {
align-items: center;
}.lg-ais {
align-items: flex-start;
}.lg-aie {
align-items: flex-end;
}
}@media (max-width: 992px) {
.md-mt-0 {
margin-top: 0;
}.md-mb-0 {
margin-bottom: 0;
}.md-ml-0 {
margin-left: 0;
}.md-mr-0 {
margin-right: 0;
}.md-mt-1 {
margin-top: 1rem;
}.md-mb-1 {
margin-bottom: 1rem;
}.md-ml-1 {
margin-left: 1rem;
}.md-mr-1 {
margin-right: 1rem;
}.md-mt-2 {
margin-top: 2rem;
}.md-mb-2 {
margin-bottom: 2rem;
}.md-ml-2 {
margin-left: 2rem;
}.md-mr-2 {
margin-right: 2rem;
}.md-mt-3 {
margin-top: 3rem;
}.md-mb-3 {
margin-bottom: 3rem;
}.md-ml-3 {
margin-left: 3rem;
}.md-mr-3 {
margin-right: 3rem;
}.md-mt-4 {
margin-top: 4rem;
}.md-mb-4 {
margin-bottom: 4rem;
}.md-ml-4 {
margin-left: 4rem;
}.md-mr-4 {
margin-right: 4rem;
}.md-mt-5 {
margin-top: 5rem;
}.md-mb-5 {
margin-bottom: 5rem;
}.md-ml-5 {
margin-left: 5rem;
}.md-mr-5 {
margin-right: 5rem;
}.md-mt-6 {
margin-top: 6rem;
}.md-mb-6 {
margin-bottom: 6rem;
}.md-ml-6 {
margin-left: 6rem;
}.md-mr-6 {
margin-right: 6rem;
}.md-mt-7 {
margin-top: 7rem;
}.md-mb-7 {
margin-bottom: 7rem;
}.md-ml-7 {
margin-left: 7rem;
}.md-mr-7 {
margin-right: 7rem;
}.md-mt-8 {
margin-top: 8rem;
}.md-mb-8 {
margin-bottom: 8rem;
}.md-ml-8 {
margin-left: 8rem;
}.md-mr-8 {
margin-right: 8rem;
}.md-mt-9 {
margin-top: 9rem;
}.md-mb-9 {
margin-bottom: 9rem;
}.md-ml-9 {
margin-left: 9rem;
}.md-mr-9 {
margin-right: 9rem;
}.md-mt-10 {
margin-top: 10rem;
}.md-mb-10 {
margin-bottom: 10rem;
}.md-ml-10 {
margin-left: 10rem;
}.md-mr-10 {
margin-right: 10rem;
}.md-flex-row {
display: flex;
flex-direction: row;
}.md-flex-column {
display: flex;
flex-direction: column;
}.md-jcc {
justify-content: center;
}.md-jcs {
justify-content: flex-start;
}.md-jce {
justify-content: flex-end;
}.md-jcb {
justify-content: space-between;
}.md-aic {
align-items: center;
}.md-ais {
align-items: flex-start;
}.md-aie {
align-items: flex-end;
}
}@media (max-width: 767px) {
.sm-mt-0 {
margin-top: 0;
}.sm-mb-0 {
margin-bottom: 0;
}.sm-ml-0 {
margin-left: 0;
}.sm-mr-0 {
margin-right: 0;
}.sm-mt-1 {
margin-top: 1rem;
}.sm-mb-1 {
margin-bottom: 1rem;
}.sm-ml-1 {
margin-left: 1rem;
}.sm-mr-1 {
margin-right: 1rem;
}.sm-mt-2 {
margin-top: 2rem;
}.sm-mb-2 {
margin-bottom: 2rem;
}.sm-ml-2 {
margin-left: 2rem;
}.sm-mr-2 {
margin-right: 2rem;
}.sm-mt-3 {
margin-top: 3rem;
}.sm-mb-3 {
margin-bottom: 3rem;
}.sm-ml-3 {
margin-left: 3rem;
}.sm-mr-3 {
margin-right: 3rem;
}.sm-mt-4 {
margin-top: 4rem;
}.sm-mb-4 {
margin-bottom: 4rem;
}.sm-ml-4 {
margin-left: 4rem;
}.sm-mr-4 {
margin-right: 4rem;
}.sm-mt-5 {
margin-top: 5rem;
}.sm-mb-5 {
margin-bottom: 5rem;
}.sm-ml-5 {
margin-left: 5rem;
}.sm-mr-5 {
margin-right: 5rem;
}.sm-mt-6 {
margin-top: 6rem;
}.sm-mb-6 {
margin-bottom: 6rem;
}.sm-ml-6 {
margin-left: 6rem;
}.sm-mr-6 {
margin-right: 6rem;
}.sm-mt-7 {
margin-top: 7rem;
}.sm-mb-7 {
margin-bottom: 7rem;
}.sm-ml-7 {
margin-left: 7rem;
}.sm-mr-7 {
margin-right: 7rem;
}.sm-mt-8 {
margin-top: 8rem;
}.sm-mb-8 {
margin-bottom: 8rem;
}.sm-ml-8 {
margin-left: 8rem;
}.sm-mr-8 {
margin-right: 8rem;
}.sm-mt-9 {
margin-top: 9rem;
}.sm-mb-9 {
margin-bottom: 9rem;
}.sm-ml-9 {
margin-left: 9rem;
}.sm-mr-9 {
margin-right: 9rem;
}.sm-mt-10 {
margin-top: 10rem;
}.sm-mb-10 {
margin-bottom: 10rem;
}.sm-ml-10 {
margin-left: 10rem;
}.sm-mr-10 {
margin-right: 10rem;
}.sm-flex-row {
display: flex;
flex-direction: row;
}.sm-flex-column {
display: flex;
flex-direction: column;
}.sm-jcc {
justify-content: center;
}.sm-jcs {
justify-content: flex-start;
}.sm-jce {
justify-content: flex-end;
}.sm-jcb {
justify-content: space-between;
}.sm-aic {
align-items: center;
}.sm-ais {
align-items: flex-start;
}.sm-aie {
align-items: flex-end;
}
}.ml-auto {
margin-left: auto;
}.mr-auto {
margin-right: auto;
}.p-10-10 {
padding-top: 10rem;
padding-bottom: 10rem;
}.p-0-10 {
padding-bottom: 10rem;
}.p-10-8 {
padding-top: 10rem;
padding-bottom: 8rem;
}.p-10-6 {
padding-top: 10rem;
padding-bottom: 6rem;
}.p-0-8 {
padding-top: 0;
padding-bottom: 8rem;
}.p-10-5 {
padding-top: 10rem;
padding-bottom: 5rem;
}.p-10-0 {
padding-top: 10rem;
}.p-l-3 {
padding-left: 3rem;
}@media (max-width: 992px) {
.p-l-3 {
padding-left: 0;
}
}.w-100 {
width: 100%;
}.w-80 {
width: 80%;
}@media (max-width: 992px) {
.w-80 {
width: 100%;
}
}.w-60 {
width: 60%;
}@media (max-width: 992px) {
.w-60 {
width: 100%;
}
}.tac {
text-align: center;
}.tal {
text-align: left;
}.tar {
text-align: right;
}@media (max-width: 1200px) {
.lg-tac {
text-align: center;
}.lg-tal {
text-align: left;
}.lg-tar {
text-align: right;
}
}@media (max-width: 992px) {
.md-tac {
text-align: center;
}.md-tal {
text-align: left;
}.md-tar {
text-align: right;
}
}@media (max-width: 767px) {
.sm-tac {
text-align: center;
}.sm-tal {
text-align: left;
}.sm-tar {
text-align: right;
}
}body {
background-color: var(--clr-surface-light);
color: var(--clr-dark);
}.opacity-text {
opacity: 0.5;
transition: var(--transition-slow);
}.opacity-text:hover {
opacity: 1;
}.divider {
width: 12rem;
height: 0;
border-bottom: dashed 1px var(--clr-text-subtle);
}.divider.w-100 {
width: 100%;
}.text-link {
color: var(--clr-dark);
position: relative;
transition: var(--transition-fast);
}.text-link.light {
color: var(--clr-surface-light);
}.text-link:after {
content: "";
width: 0;
height: 0.1rem;
position: absolute;
bottom: 0;
left: 0;
background-color: var(--clr-accent);
transition: var(--transition-fast);
}.text-link:hover,
.text-link.light:hover {
color: var(--clr-accent);
}.text-link:hover:after {
width: 100%;
}.2-row-max {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}.3-row-max {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}.circle-portrait {
width: 10rem;
height: 10rem;
border-radius: 50%;
overflow: hidden;
}.circle-portrait img {
border-radius: 50%;
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: top;
}.half-list li {
list-style-type: none;
display: flex;
justify-content: space-between;
align-items: flex-end;
}.half-list li .dots {
width: 100%;
border-bottom: 1px dashed var(--clr-text-subtle);
margin-left: 2rem;
margin-right: 2rem;
margin-bottom: 0.2rem;
}.half-list li p {
white-space: nowrap;
}.social {
display: flex;
}.social li {
margin-right: 2rem;
list-style-type: none;
font-size: 2rem;
}.social li:last-child {
margin-right: 0;
}.social li a {
transition: var(--transition-fast);
}.social li a:hover {
color: var(--clr-accent);
}.check-list li {
list-style-type: none;
margin-bottom: 2rem;
}.check-list li:last-child {
margin-bottom: 0;
}.check-list li:before {
font-family: "Font Awesome 5 Free";
font-weight: 600;
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 1.5rem;
content: "\f00c";
font-size: 1.2rem;
background-color: var(--clr-accent);
color: var(--clr-dark);
border-radius: 50%;
width: 2rem;
height: 2rem;
transition: var(--transition-fast);
}.check-list li.empty {
opacity: 0.4;
}.check-list li.empty:before {
background-color: var(--clr-text-subtle);
color: var(--clr-surface-light);
}.check-list.type-2 li {
position: relative;
margin-bottom: 4rem;
}.check-list.type-2 li:last-child {
margin-bottom: 0;
}.check-list.type-2 li h6 {
padding-left: 4rem;
}.check-list.type-2 li:before {
position: absolute;
top: 0.1rem;
}.check-list li.t-16 span + span p,
.check-list li.t-16 span + span div {
display: inline;
}.angle {
position: relative;
overflow: hidden;
}.angle:after {
content: "";
width: 15rem;
height: 15rem;
display: block;
background-color: var(--clr-surface-light);
position: absolute;
top: -10rem;
right: -10rem;
z-index: 9;
transform: rotate(45deg);
}.angle.angle-gray:after {
background-color: var(--clr-surface-teal);
}.angle.angle-lg:after {
width: 20rem;
height: 20rem;
top: -12rem;
right: -12rem;
}@media (max-width: 767px) {
.angle.angle-lg:after {
width: 15rem;
height: 15rem;
top: -10rem;
right: -10rem;
}
}.asterisk {
position: relative;
}.asterisk:after {
content: url('data:image/svg+xml,');
position: absolute;
animation: rotate 4s ease-in-out infinite;
}@-webkit-keyframes rotate {
0% {
transform: rotate(0);
}
80% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}@keyframes rotate {
0% {
transform: rotate(0);
}
80% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}.badge {
background-color: var(--clr-dark);
border-radius: 2rem;
font-size: 1.4rem;
color: var(--clr-surface-teal);
font-weight: 600;
display: inline-flex;
padding: 0.2rem 1.2rem 0.4rem;
}.handwrite {
color: var(--clr-dark);
font-family: "Reenie Beanie", cursive;
font-size: 3rem;
}.users-row {
display: flex;
}.users-row li {
list-style-type: none;
height: 6.5rem;
width: 5rem;
}.users-row li img {
height: 100% !important;
width: 6.5rem;
max-width: 6.5rem;
border-radius: 50%;
border: solid 0.5rem var(--clr-surface-light);
}.users-row.dark li img {
border-color: var(--clr-dark);
}.input-frame.dark input:-ms-input-placeholder,
.input-frame.dark textarea:-ms-input-placeholder {
color: var(--clr-text-subtle);
}.input-frame.dark input::-ms-input-placeholder,
.input-frame.dark textarea::-ms-input-placeholder {
color: var(--clr-text-subtle);
}.site-container {
width: 100%;
padding: 0 10rem;
}@media (max-width: 1200px) {
.site-container {
padding: 0 6rem;
}
}@media (max-width: 992px) {
.site-container {
padding: 0 2rem;
}
}.bg-out-left-gray,
.content .bg-out-left-gray {
position: relative;
}.bg-out-left-gray:before,
.content .bg-out-left-gray:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: calc(50vw - 0.2rem);
height: 100%;
background-color: var(--clr-surface-teal);
}@media (max-width: 992px) {
.bg-out-left-gray:before,
.content .bg-out-left-gray:before {
width: 100%;
}.bg-out-left-gray.md-white:before,
.content .bg-out-left-gray.md-white:before {
display: none;
}
}.bg-out-right-gray,
.content .bg-out-right-gray {
position: relative;
}.bg-out-right-gray:before,
.content .bg-out-right-gray:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
left: auto;
width: calc(50vw - 0.2rem);
height: 100%;
background-color: var(--clr-surface-teal);
}@media (max-width: 992px) {
.bg-out-right-gray:before,
.content .bg-out-right-gray:before {
width: 100%;
}.bg-out-right-gray.md-white:before,
.content .bg-out-right-gray.md-white:before {
display: none;
}
}.section {
position: relative;
overflow: hidden;
width: 100%;
}.section .bg-img {
width: 100%;
height: 100% !important;
object-position: center;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}.section .overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgb(36 47 53 / 0.7);
}.section .overlay.blur {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}.section .overlay.side-gradient {
background: linear-gradient(
272.2deg,
rgb(36 47 53 / 0.15) 10.82%,
rgb(36 47 53 / 0.95) 65.88%
);
}.section .container {
position: relative;
}.sticky-section,
.content .sticky-section {
position: relative;
display: flex;
justify-content: flex-end;
}.sticky-section .sticky-part {
position: sticky;
contain: content;
top: 12rem;
height: 100%;
width: 50%;
}.sticky-section .scroll-part {
width: 50%;
}.sticky-section.32 .sticky-part {
width: 40%;
}.sticky-section.32 .scroll-part {
width: 60%;
}@media (max-width: 992px) {
.sticky-section,
.content .sticky-section {
flex-wrap: wrap;
}.sticky-section .sticky-part {
width: 100%;
position: static;
height: auto;
}.sticky-section .scroll-part {
width: 100%;
}
}.space-top {
padding-top: 12rem;
}@media (max-width: 992px) {
.space-top {
padding-top: 10rem;
}
}.fake-container-left {
max-width: 660px;
margin-left: auto;
overflow: visible;
padding: 0 20rem 0 2rem;
}.fake-container-left.no-pad {
padding-right: 0;
}.fake-container-left.pad-10 {
padding-right: 10rem;
}@media (max-width: 1400px) {
.fake-container-left {
max-width: 570px;
}
}@media (max-width: 1200px) {
.fake-container-left {
max-width: 480px;
}
}@media (max-width: 992px) {
.fake-container-left {
padding: 0 2rem;
max-width: 100%;
margin: 0;
}
}.fake-container-right {
max-width: 660px;
margin-right: auto;
overflow: visible;
padding: 0 2rem 0 20rem;
}.fake-container-right.no-pad {
padding-left: 0;
}.fake-container-right.pad-10 {
padding-left: 10rem;
}@media (max-width: 1400px) {
.fake-container-right {
max-width: 570px;
}
}@media (max-width: 1200px) {
.fake-container-right {
max-width: 480px;
}
}@media (max-width: 992px) {
.fake-container-right {
padding: 0 2rem;
max-width: 100%;
margin: 0;
}.fake-container-right.no-pad {
padding: 0 2rem;
}.fake-container-right.pad-10 {
padding: 0 2rem;
}
}.gray-section {
background-color: var(--clr-surface-teal);
}.square-box {
height: 100%;
padding-bottom: calc(100% - 6rem);
position: relative;
overflow: hidden;
}.square-box.short {
padding-bottom: 55%;
}.square-box.short img {
object-position: top;
}.square-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: center;
}.square-box .overlay {
background-color: var(--clr-dark);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}@media (min-width: 1920px) {
.square-box {
padding-bottom: 0;
}.square-box img {
object-position: top;
}
}@media (max-width: 767px) {.breadcrumbs li:last-child {
white-space: nowrap;
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}
}.scroll-hint {
width: 3rem;
display: flex;
flex-direction: column;
align-items: center;
margin-left: auto;
}.scroll-hint .mouse {
position: relative;
border: solid 0.25rem var(--clr-surface-teal);
height: 5rem;
width: 3rem;
border-radius: 3rem;
margin-bottom: 2rem;
transition: var(--transition-fast);
}.scroll-hint .mouse:after {
content: "";
width: 0.3rem;
height: 0.8rem;
background-color: var(--clr-surface-teal);
position: absolute;
top: 0.8rem;
left: 1.15rem;
border-radius: 1rem;
animation: 1s wheel infinite ease-in-out;
transition: var(--transition-fast);
}.scroll-hint:hover .mouse {
transform: scale(1.05);
border-color: var(--clr-accent);
}.scroll-hint:hover .mouse:after {
background-color: var(--clr-accent);
}@-webkit-keyframes wheel {
0% {
transform: translateY(0);
height: 0.8rem;
}
50% {
transform: translateY(0.5rem);
height: 1rem;
}
100% {
transform: translateY(0);
height: 0.8rem;
}
}@keyframes wheel {
0% {
transform: translateY(0);
height: 0.8rem;
}
50% {
transform: translateY(0.5rem);
height: 1rem;
}
100% {
transform: translateY(0);
height: 0.8rem;
}
}.icon {
width: 5rem;
}.icon img {
width: 100%;
}.icon.c-m-4 {
filter: invert(95%);
}.icon-2,
body .icon-2 {
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: var(--clr-surface-teal);
display: flex;
justify-content: center;
align-items: center;
}.author {
position: relative;
width: 4rem;
height: 4rem;
background-color: var(--clr-surface-teal);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
overflow: hidden;
}.author img {
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: top;
}.breadcrumbs {
display: flex;
color: var(--clr-surface-teal);
}.breadcrumbs li {
margin-right: 2rem;
list-style-type: none;
}.breadcrumbs li a {
color: var(--clr-surface-teal);
font-size: 1.6rem;
transition: var(--transition-fast);
}.breadcrumbs li a:hover {
color: var(--clr-accent);
}.breadcrumbs li:after {
content: "/";
margin-left: 2rem;
color: var(--clr-text-subtle);
}.breadcrumbs li:last-child {
margin-right: 0;
cursor: not-allowed;
}.breadcrumbs li:last-child a {
pointer-events: none;
color: var(--clr-accent);
}.breadcrumbs li:last-child:after {
display: none;
}.btn {
border: none;
height: 6rem;
padding: 0 1.5rem 0 4rem;
font-size: 1.6rem;
font-family: "Plus Jakarta Sans", sans-serif;
background-color: var(--clr-dark);
display: inline-flex;
align-items: center;
border-radius: 6rem;
color: var(--clr-surface-teal);
font-weight: 500;
cursor: pointer;
transition: var(--transition-fast);
}.btn i {
height: 4rem;
width: 4rem;
border-radius: 50%;
background-color: var(--clr-accent);
display: flex;
align-items: center;
justify-content: center;
color: var(--clr-dark);
margin-left: 2.5rem;
transition: var(--transition-fast);
}.btn.accent {
background-color: var(--clr-accent);
color: var(--clr-dark);
}.btn.accent i {
background-color: var(--clr-dark);
color: var(--clr-accent);
}.btn.soft {
background-color: var(--clr-surface-teal);
color: var(--clr-dark);
}.btn.light {
background-color: var(--clr-surface-light);
color: var(--clr-dark);
}.btn:hover {
color: var(--clr-accent);
}.btn:hover.accent {
color: var(--clr-dark);
}.btn:hover.soft {
background-color: var(--clr-accent);
color: var(--clr-dark);
}.btn:hover.soft i {
background-color: var(--clr-dark);
color: var(--clr-accent);
}.btn:hover.light {
background-color: var(--clr-surface-light);
color: var(--clr-dark);
}.card {
position: relative;
overflow: hidden;
padding: 3rem;
background-color: var(--clr-surface-light);
}.card.gray-card {
background-color: var(--clr-surface-teal);
}.card.transparent {
background-color: #fff0;
padding: 0;
}.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
color: var(--clr-text-muted);
}.card .card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}.card .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--clr-dark);
}.card .card-content {
position: relative;
}@media (max-width: 767px) {
.card {
padding: 3rem;
}
}.hero-1 {
width: 100%;
height: calc(var(--vh, 1vh) * 100);
background-color: var(--clr-dark);
display: flex;
align-items: flex-end;
padding: 10rem 0;
position: relative;
overflow: hidden;
}.hero-1 .hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}.hero-1 .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
249.77deg,
rgb(36 47 53 / 0.35) 35.14%,
rgb(36 47 53 / 0.8) 58.94%
);
}.hero-1 .hero-content {
position: relative;
width: 100%;
}.hero-1 .hero-content h1 {
font-size: 10rem;
line-height: 95%;
}@media (max-width: 1200px) {
.hero-1 .hero-content h1 {
font-size: 8.2rem;
}
}@media (max-width: 992px) {
.hero-1 {
height: auto;
padding-top: 20rem;
}.hero-1 .overlay {
background: rgb(36 47 53 / 0.7);
}.hero-1 .hero-content h1 {
font-size: 7.2rem;
line-height: 100%;
}
}@media (max-width: 767px) {
.hero-1 .hero-content h1 {
font-size: 5.2rem;
}
}@-webkit-keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}@keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}.hero-5 {
width: 100%;
height: calc(var(--vh, 1vh) * 100);
background-color: var(--clr-dark);
display: flex;
align-items: center;
padding: 10rem 0;
position: relative;
overflow: hidden;
}.hero-5 .slider-bg-img {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
}.hero-5 .hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}.hero-5 .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
rgb(36 47 53 / 0.9) 7.28%,
rgb(36 47 53 / 0.75) 47.6%,
var(--clr-dark) 100%
);
}.hero-5 .hero-content {
position: relative;
width: 100%;
padding-bottom: 5rem;
}.hero-5 .hero-content h1 {
font-size: 10rem;
line-height: 95%;
}@media (max-width: 1200px) {
.hero-5 .hero-content h1 {
font-size: 8.2rem;
}
}@media (max-width: 992px) {
.hero-5 {
height: auto;
padding-top: 20rem;
}.hero-5.hero-404 {
height: calc(var(--vh, 1vh) * 100);
padding-top: 10rem;
}.hero-5 .overlay {
background: rgb(36 47 53 / 0.7);
}.hero-5 .hero-content {
padding-bottom: 15rem;
}.hero-5.hero-404 .hero-content {
padding-bottom: 0rem;
}.hero-5 .hero-content h1 {
font-size: 7.2rem;
line-height: 100%;
}
}@media (max-width: 767px) {
.hero-5 .hero-content h1 {
font-size: 5.2rem;
}
}.hero-inner {
width: 100%;
height: auto;
background-color: var(--clr-dark);
display: flex;
align-items: flex-end;
padding: 14rem 0;
position: relative;
overflow: hidden;
}.hero-inner .hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}.hero-inner .hero-bg.scale-img-center {
object-position: center;
}.hero-inner .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--clr-dark);
}.hero-inner .hero-content {
padding-top: 12rem;
position: relative;
width: 100%;
}.hero-inner .hero-content h1 {
font-size: 6.2rem;
}@media (max-width: 992px) {
.hero-inner {
height: auto;
padding: 10rem 0;
}.hero-inner .hero-content {
padding-top: 10rem;
position: relative;
width: 100%;
}.hero-inner .hero-content h1 {
font-size: 5.8rem;
}
}@media (max-width: 767px) {
.hero-inner .hero-content h1 {
font-size: 4.2rem;
}
}.preloader-frame {
position: fixed;
z-index: 1001;
top: 0;
left: 0;
width: 100%;
height: calc(var(--vh, 1vh) * 100);
background-color: rgb(36 47 53 / 0.6);
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 10rem;
pointer-events: all;
transition: var(--transition-slow);
}.preloader-frame .logo {
margin-top: 5rem;
transform: scale(0.8);
opacity: 0;
transition: var(--transition-slow);
}.preloader-frame .preloader {
text-align: center;
transform: scale(0.7) translateY(100%);
opacity: 0;
transition: var(--transition-slow);
}.preloader-frame .preloader .preloader-line-frame {
background-color: rgb(163 169 171 / 0.4);
height: 0.5rem;
width: 25rem;
border-radius: 1rem;
overflow: hidden;
}.preloader-frame .preloader .preloader-line-frame .preloader-line {
height: 100%;
width: 0;
background-color: var(--clr-accent);
transform: var(--transition-slow);
}.preloader-frame.loading .logo {
transform: scale(1);
opacity: 1;
}.preloader-frame.loading .preloader {
transform: scale(1) translateY(0);
opacity: 1;
}.preloader-frame.ready {
opacity: 0;
pointer-events: none;
}.logo {
display: block;
width: 12rem;
}.logo img {
width: 100%;
}.logo-default {
display: flex;
justify-content: center;
align-items: center;
font-size: 3.2rem;
color: var(--clr-surface-light);
font-weight: 700;
}.logo-default:before {
content: "*";
display: block;
position: relative;
margin-right: 1rem;
font-size: 6.4rem;
top: 1rem;
line-height: 3.2rem;
font-weight: 900;
color: var(--clr-accent);
}.top-panel {
height: 15rem;
width: 100%;
position: fixed;
z-index: 999;
display: flex;
align-items: center;
background: linear-gradient(180deg, rgb(36 47 53 / 0.8) 0%, #fff0 100%);
transition: var(--transition-slow);
}.top-panel > div {
width: 100%;
}.top-panel.static {
height: 12rem;
}.top-panel .widget-content {
width: 100%;
}.top-panel .site-container .mobile-menu,
.top-panel .widget-content .mobile-menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
transition: var(--transition-slow);
}.top-panel .site-container .mobile-menu {
width: auto;
}.top-panel .widget-content .mobile-menu:before {
content: "";
}.top-panel .widget-content .mobile-menu .btn {
position: relative;
cursor: pointer;
}.top-panel .widget-content .mobile-menu .btn i.fa-envelope {
transform: scale(1);
}.top-panel .widget-content .mobile-menu .btn i.fa-times {
position: absolute;
right: 1.5rem;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
transform: scale(0);
}.top-panel .widget-content .mobile-menu .btn.open-contact {
display: none;
}.top-panel .widget-content .mobile-menu .btn.active i.fa-envelope {
transform: scale(0);
}.top-panel .widget-content .mobile-menu .btn.active i.fa-times {
transform: scale(1);
}.top-panel.scroll {
height: 12rem;
background: rgb(36 47 53 / 0.96);
border-bottom: 1px solid rgb(99 112 118 / 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}.top-panel.scroll .widget-content
.mobile-menu::-webkit-scrollbar-track {
background: var(--clr-surface-light);
}.top-panel .widget-content .mobile-menu .btn {
flex-shrink: 0;
background-color: var(--clr-accent);
color: var(--clr-dark);
}.top-panel .widget-content .mobile-menu .btn i {
background-color: var(--clr-dark);
color: var(--clr-accent);
}.top-panel.active {
background: rgb(36 47 53 / 0.95);
border-bottom: 1px solid rgb(226 238 238 / 0.08);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}.top-panel.active .widget-content .mobile-menu .btn {
flex-shrink: 0;
background-color: var(--clr-accent);
color: var(--clr-dark);
}.top-panel.active .widget-content .mobile-menu .btn i {
background-color: var(--clr-dark);
color: var(--clr-accent);
}.top-panel.invert {
background: var(--clr-surface-light);
}.top-panel.invert.static {
height: 12rem;
border-bottom: 1px solid rgb(163 169 171 / 0.2);
}.top-panel.invert .widget-content .mobile-menu .btn {
background-color: var(--clr-dark);
color: var(--clr-surface-light);
}.top-panel.invert .widget-content .mobile-menu .btn i {
background-color: var(--clr-accent);
color: var(--clr-dark);
}.top-panel.invert.scroll {
background: rgb(243 247 248 / 0.98);
border-bottom: 1px solid var(--clr-surface-teal);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}.top-panel.invert.active {
background: rgb(243 247 248 / 0.98);
border-left: 1px solid var(--clr-surface-teal);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}@media (max-width: 992px) {
.top-panel {
height: 10rem;
background: var(--clr-dark);
border-bottom: 1px solid rgb(163 169 171 / 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}.top-panel.static {
height: 10rem;
}.top-panel.scroll {
height: 10rem;
background: var(--clr-dark);
}.top-panel .widget-content .logo {
display: block;
width: 10rem;
}.top-panel .site-container .mobile-menu,
.top-panel .widget-content .mobile-menu {
opacity: 0;
pointer-events: none;
padding: 4rem;
position: absolute;
top: 10rem;
left: 0;
display: flex;
flex-direction: column;
width: 100%;
background: var(--clr-dark);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
overflow: auto;
max-height: calc(var(--vh, 1vh) * 100 - 10rem);
border-bottom: 1px solid rgb(163 169 171 / 0.2);
}.top-panel .widget-content .mobile-menu .btn {
background-color: var(--clr-accent);
color: var(--clr-dark);
}.top-panel .widget-content .mobile-menu .btn i {
background-color: var(--clr-dark);
color: var(--clr-accent);
}.top-panel .widget-content .mobile-menu .open-info {
display: none;
}.top-panel .widget-content .mobile-menu .btn.open-contact {
display: flex;
}.top-panel .widget-content .mobile-menu.active {
pointer-events: all;
opacity: 1;
}.top-panel.invert {
background: var(--clr-surface-light);
}.top-panel.invert .widget-content .mobile-menu {
background-color: var(--clr-surface-light);
}
}nav {
flex-shrink: 1;
}nav ul {
display: flex;
align-items: center;
}nav ul li {
display: flex;
align-items: center;
position: relative;
margin-right: 4rem;
list-style-type: none;
font-size: 1.8rem;
color: var(--clr-text-subtle);
font-weight: 500;
cursor: pointer;
transition: var(--transition-fast);
}nav ul li:before {
content: "";
height: 6rem;
width: 100%;
display: block;
position: absolute;
bottom: -6rem;
}nav ul li:last-child {
margin-right: 0;
}nav ul li.current > a,
nav ul li.current-menu-parent > a,
nav ul li.current-menu-item > a {
color: var(--clr-surface-teal);
}nav ul > li.current:after,
nav ul > li.current-menu-parent:after,
nav ul > li.current-menu-item:after {
content: "";
width: 1rem;
height: 1rem;
background-color: var(--clr-accent);
border-radius: 50%;
margin-left: 1rem;
transform: translateY(0.2rem);
}nav ul li a {
transition: var(--transition-fast);
}nav ul li a:hover {
color: var(--clr-surface-light);
}nav ul li ul {
transform: translateY(1rem) scale(0.95);
opacity: 0;
pointer-events: none;
position: absolute;
top: 5rem;
left: -4rem;
background-color: var(--clr-surface-teal);
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 16rem;
padding: 3.2rem 0;
background: rgb(36 47 53 / 0.95);
border: 1px solid rgb(163 169 171 / 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 0;
transition: var(--transition-fast);
}nav ul li ul li ul {
left: 100%;
top: -30px !important;
background-color: var(--clr-text-muted) !important;
border-color: var(--clr-dark) !important;
}nav ul li ul li {
list-style-type: none;
white-space: nowrap;
margin-right: 0;
margin-bottom: 2rem;
padding-left: 4rem;
padding-right: 5rem;
width: 100%;
}nav ul li ul li:before {
display: none;
}nav ul li ul li:last-child {
margin-bottom: 0;
}nav ul li:hover > ul {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: all;
}@media (max-width: 992px) {
nav {
margin-bottom: 4rem;
width: 100%;
}nav ul {
flex-direction: column;
width: 100%;
}nav ul li {
margin-right: 0;
margin-bottom: 3rem;
display: flex;
flex-direction: column;
width: 100%;
}nav ul > li.current:after,
nav ul > li.current-menu-parent:after,
nav ul > li.current-menu-item:after {
display: none;
}nav ul li:last-child {
margin-bottom: 0;
}nav ul li ul {
padding: 0;
position: static;
opacity: 1;
width: 100%;
max-width: 100%;
overflow: hidden;
max-height: 0;
border-color: #fff0;
}nav ul li ul li:first-child {
margin-top: 3rem;
}nav ul li ul li:last-child {
margin-bottom: 3rem;
}nav ul li:hover ul {
margin-top: 3rem;
max-height: 40rem;
border-color: rgb(163 169 171 / 0.1);
}
}.scroll nav ul li ul {
top: 6.9rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: rgb(36 47 53 / 0.95);
}.invert nav ul {
display: flex;
align-items: center;
}.invert nav ul li {
color: var(--clr-dark);
}.invert nav ul li.current > a,
.invert nav ul li.current-menu-parent > a,
.invert nav ul li.current-menu-item > a {
color: var(--clr-dark);
}.invert nav ul li a:hover {
color: var(--clr-dark);
}.invert nav ul li ul {
background-color: var(--clr-surface-teal);
align-items: flex-start;
}.invert.scroll nav ul li ul {
top: 6.9rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: var(--clr-surface-light);
}@media (max-width: 992px) {
.invert nav ul li ul {
background-color: var(--clr-surface-light);
border-color: #fff0;
}.invert nav ul li:hover ul {
background-color: var(--clr-surface-teal);
border-color: rgb(163 169 171 / 0.2);
}
}@media (max-width: 992px) {
nav ul li:hover ul {
max-height: 1000px;
}nav ul li ul li {
padding-left: 10px;
padding-right: 10px;
}nav ul li ul li a {
font-size: 20px !important;
white-space: wrap;
}
}.info-window-frame {
opacity: 0;
pointer-events: none;
background-color: rgb(36 47 53 / 0.3);
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
position: fixed;
top: 15rem;
left: 0;
z-index: 998;
width: 100%;
height: calc(var(--vh, 1vh) * 100 - 15rem);
transition: var(--transition-slow);
transition-delay: 0.1s;
}.info-window-frame.static {
top: 12rem;
height: calc(var(--vh, 1vh) * 100 - 12rem);
}.info-window-frame .info-window {
padding: 6rem;
background: rgb(36 47 53 / 0.95);
border-left: 1px solid rgb(226 238 238 / 0.08);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
width: 60rem;
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
transform: translateX(100%);
transition: var(--transition-slow);
transition-delay: 0s;
pointer-events: all;
overflow-y: auto;
max-height: 100%;
}.info-window-frame.scroll {
top: 12rem;
height: calc(var(--vh, 1vh) * 100 - 12rem);
}.info-window-frame.scroll .info-window {
height: calc(var(--vh, 1vh) * 100 - 12rem);
}.info-window-frame.active {
opacity: 1;
pointer-events: all;
transition-delay: 0s;
}.info-window-frame.active .info-window {
transform: translateX(0);
transition-delay: 0.1s;
}.info-window-frame.invert .info-window {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}.right-buttons-frame {
position: fixed;
display: flex;
align-items: flex-end;
justify-content: flex-end;
bottom: 10rem;
right: 10rem;
z-index: 996;
transition: var(--transition-slow);
opacity: 0;
transform: scale(0.8);
pointer-events: none;
}.right-buttons-frame.active {
opacity: 1;
transform: scale(1);
pointer-events: all;
}.right-buttons-frame.on-bottom {
bottom: 20rem;
}.right-buttons-frame .right-buttons {
display: flex;
flex-direction: column;
align-items: center;
pointer-events: all;
}.right-buttons-frame .right-buttons .side-btn {
width: 6rem;
height: 6rem;
border-radius: 0 0 50% 50%;
background-color: var(--clr-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
color: var(--clr-accent);
border: none;
cursor: pointer;
transition: var(--transition-slow);
}.right-buttons-frame .right-buttons .side-btn.side-btn-rounded {
border-radius: 50% !important;
}.right-buttons-frame .right-buttons .side-btn.back-to-top {
border-radius: 50% 50% 0 0;
width: 6rem;
height: 6rem;
opacity: 1;
}.right-buttons-frame .right-buttons .side-btn.open-window:after {
font-family: "Line Awesome Free";
font-size: 135%;
font-weight: 900;
content: "\f095";
color: var(--clr-accent);
animation: phone-move 4s ease-in-out infinite;
}.right-buttons-frame .right-buttons .side-btn.open-window.active:after {
content: "\f00d";
animation: none;
font-weight: 100;
font-size: 2.2rem;
}@media screen and (max-width: 1200px) {
.right-buttons-frame {
display: none;
}
}@-webkit-keyframes phone-move {
0% {
transform: rotate(0);
}
5% {
transform: rotate(20deg);
}
10% {
transform: rotate(-20deg);
}
15% {
transform: rotate(20deg);
}
20% {
transform: rotate(0);
}
25% {
transform: rotate(20deg);
}
30% {
transform: rotate(-20deg);
}
35% {
transform: rotate(20deg);
}
40% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}@keyframes phone-move {
0% {
transform: rotate(0);
}
5% {
transform: rotate(20deg);
}
10% {
transform: rotate(-20deg);
}
15% {
transform: rotate(20deg);
}
20% {
transform: rotate(0);
}
25% {
transform: rotate(20deg);
}
30% {
transform: rotate(-20deg);
}
35% {
transform: rotate(20deg);
}
40% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}.open-mobile-menu {
background-color: var(--clr-accent);
border-radius: 50%;
height: 4rem;
width: 4rem;
display: none;
}@media screen and (max-width: 992px) {
.open-mobile-menu {
display: flex;
float: right;
}.mobile-menu-wrap:after {
content: "";
clear: both;
display: block;
}
}.menu-btn {
pointer-events: all;
height: 4rem;
width: 4rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transform: scale(0.7);
transition: var(--transition-slow);
}.menu-btn span,
.menu-btn span:after,
.menu-btn span:before {
content: "";
display: block;
width: 2.7rem;
height: 0.25rem;
background: var(--clr-dark);
border-radius: 0.2rem;
backface-visibility: hidden;
transition: inherit;
}.menu-btn span {
position: relative;
}.menu-btn span:after,
.menu-btn span:before {
position: absolute;
}.menu-btn span:before {
top: -0.9rem;
}.menu-btn span:after {
top: 0.9rem;
}.menu-btn.active span {
transform: rotate(45deg);
}.menu-btn.active span:before {
transform: translate(0, 0.9rem) rotate(-90deg);
}.menu-btn.active span:after {
opacity: 0;
width: 24px;
transform: translate(0, -0.9rem) rotate(-90deg);
}.invert .open-mobile-menu {
background-color: var(--clr-surface-teal);
}.counter-box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 4rem;
background: rgb(36 47 53 / 0.8);
border: 1px solid rgb(163 169 171 / 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 1rem;
font-weight: 800;
}.counter-1 {
font-weight: 800;
font-size: 5.2rem;
}.counter-2 {
font-weight: 800;
font-size: 4.6rem;
}.counter-3 {
font-weight: 800;
font-size: 8.4rem;
}@media screen and (max-width: 992px) {
.counter-3 {
font-size: 5.2rem;
}
}.sub-text-1 {
font-weight: 800;
font-size: 2.4rem;
}.sub-text-2 {
font-weight: 800;
font-size: 4.2rem;
}.services-frame {
position: relative;
overflow: hidden;
}.services-frame .bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: center;
}.large-card .card-head {
position: relative;
overflow: hidden;
padding-bottom: 80%;
}.large-card .card-head img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: center;
transform: scale(1.05);
transition: var(--transition-slow);
}.large-card .card-head .plus {
position: absolute;
bottom: 6rem;
left: 6rem;
width: 4rem;
height: 4rem;
background-color: var(--clr-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
opacity: 0;
transform: scale(0.8);
transition: var(--transition-fast);
}.large-card:hover img {
transform: scale(1);
}.large-card:hover .plus {
opacity: 1;
transform: scale(1);
}.skill {
background-color: var(--clr-surface-teal);
height: 0.7rem;
border-radius: 1rem;
overflow: hidden;
}.skill .skill-prog {
background-color: var(--clr-accent);
height: 100%;
}.timeline {
border-left: dashed 1px var(--clr-text-subtle);
margin-left: 1rem;
}.timeline li {
list-style-type: none;
margin-bottom: 4rem;
position: relative;
padding-left: 4rem;
}.timeline li:before {
display: block;
content: "";
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: var(--clr-accent);
position: absolute;
top: 0.2rem;
left: -1rem;
}.founder-quote {
display: flex;
align-items: center;
gap: 5rem;
}@media (max-width: 767px) {
.founder-quote {
gap: 4rem;
}
}.founder-quote .portrait {
flex-shrink: 0;
width: 18rem;
position: relative;
padding-bottom: 48%;
}.founder-quote .portrait img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: top;
}.partner {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--clr-surface-teal);
height: 10rem;
}.partner img {
height: 3rem !important;
text-align: center;
}.faq .faq-list {
list-style: none;
padding: 0;
margin: 0;
}.faq .faq-item {
border-bottom: 1px solid rgb(163 169 171 / 0.2);
}.faq .faq-item .faq-question {
background: none;
border: none;
width: 100%;
text-align: left;
font-size: 1.8rem;
font-weight: 700;
padding: 2rem 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
color: var(--clr-dark);
}.faq .faq-item .faq-question .faq-icon {
font-size: 1.6rem;
background: var(--clr-surface-light);
color: var(--clr-dark);
border-radius: 50%;
width: 4rem;
height: 4rem;
min-width: 4rem;
min-height: 4rem;
flex: 0 0 4rem;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
transform: rotate(45deg);
transition: var(--transition-fast);
}.faq .faq-item .faq-answer {
padding-right: 6rem;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows var(--transition-slow);
}.faq .faq-item .faq-answer > * {
min-height: 0;
overflow: hidden;
}.faq .faq-item.active .faq-icon {
transform: rotate(90deg);
background: var(--clr-accent);
}.faq .faq-item.active .faq-answer {
grid-template-rows: 1fr;
margin-top: 1rem;
margin-bottom: 3rem;
}.faq .faq-item:first-child .faq-question {
padding-top: 0;
}@media (max-width: 767px) {
.faq .faq-item .faq-question {
font-size: 1.8rem;
}
}.map {
position: relative;
padding-bottom: 65%;
overflow: hidden;
}.footer {
position: relative;
overflow: hidden;
}.footer-links {
display: flex;
}.footer-links li {
margin-right: 3rem;
list-style-type: none;
}.footer-links li:last-child {
margin-right: 0;
}.footer-links li a {
transition: var(--transition-fast);
}.footer-links li a:hover {
color: var(--clr-accent);
}.footer-links.flex-column {
flex-direction: column;
}.footer-links.flex-column li {
margin-right: 0;
margin-bottom: 2rem;
}.footer-links.flex-column li:last-child {
margin-bottom: 0;
}@media screen and (max-width: 767px) {
.footer-links {
flex-direction: column;
}.footer-links li {
margin-right: 0;
margin-bottom: 2rem;
}.footer-links li:last-child {
margin-bottom: 0;
}.footer-links li.current {
color: var(--clr-accent);
}.footer-links li.current:after {
display: none;
}
}.transition-frame {
min-height: 100vh;
}.el-more {
display: block;
}.sidebar-frame {
width: 100%;
padding: 30px;
}.sidebar-frame .sidebar {
padding: 15px;
}@media (max-width: 992px) {
.sidebar-frame.pad-type-1 {
margin-top: 60px;
margin-bottom: 60px;
}.sidebar-frame.pad-type-2 {
margin-top: 90px;
margin-bottom: 0;
}
}@media (max-width: 767px) {
.sidebar-frame .sidebar {
border: none;
padding: 0;
}
}.comment-box {
width: calc(100% - 90px);
float: right;
position: relative;
padding: 3.5rem 6rem 3.5rem 3.5rem;
}.comment-box .comment-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}.comment-box .comment-head h6 {
font-size: 1.5rem;
line-height: 1.5;
}.comment-box .comment-head .date {
padding: 2px 5px;
background-color: var(--clr-text-subtle);
font-size: 1.4rem;
font-weight: 400;
color: var(--clr-surface-teal);
}@media (max-width: 790px) {.reply-list {
padding-left: 50px;
}.reply-list > li:before {
top: 17px;
left: -33px;
}.comment-box {
width: calc(100% - 50px);
}
}.menu-btn {
float: right;
}.main-menu ul li.has-children ul.active {
max-height: 1000px;
}.main-menu ul li > a {
display: inline;
}.main-menu ul li > a:before {
top: 50%;
margin-top: -5px;
}.has-children > a.active + .arrow-dropdown {
transform: rotate(180deg);
}.single-info {
display: flex;
justify-content: space-between;
width: 100%;
height: 120px;
align-items: center;
border-bottom: dashed 1px var(--clr-text-subtle);
font-size: 1.4rem;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
list-style: none;
color: var(--clr-text-muted);
}.single-info .dark {
color: var(--clr-dark);
font-weight: 500;
}@media (max-width: 767px) {
.single-info {
border-top: dashed 1px var(--clr-text-subtle);
flex-direction: column;
padding: 30px 0;
height: auto;
}.single-info > div {
margin: 0 0 20px 0;
}.single-info > div:last-child {
margin: 0;
}
}.pagination {
display: flex;
justify-content: center;
}.pagination ul {
display: flex;
}.pagination ul li,
.pagination a,
.pagination > span {
margin-right: 15px;
list-style-type: none;
}.pagination ul li:last-child,
.pagination a:last-child,
.pagination > span:last-child {
margin-right: 0;
}.pagination ul li a,
.pagination a,
.pagination > span {
color: var(--clr-dark);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--clr-surface-teal);
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
line-height: 100%;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 1px;
transition: var(--transition-fast);
}.pagination.pagination-soft ul li a,
.pagination.pagination-soft a,
.pagination.pagination-soft > span {
background-color: var(--clr-surface-light);
}.pagination ul li a i,
.pagination a i {
font-size: 1.4rem;
}.pagination ul li a:hover,
.pagination a:hover {
transform: scale(1.03);
filter: brightness(95%);
}.pagination.pagination-soft ul li a:hover,
.pagination.pagination-soft a:hover {
filter: brightness(100%);
background-color: var(--clr-dark);
color: var(--clr-accent);
}.pagination ul li.active a,
.pagination > span,
.pagination.pagination-soft ul li.active a,
.pagination.pagination-soft > span {
background-color: var(--clr-accent);
}@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}@media (prefers-reduced-motion: reduce) {
html * {
transition-delay: 0s !important;
transition-duration: 0s !important;
}
}@-ms-viewport {
width: device-width;
}.input-frame input:-ms-input-placeholder {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.4rem;
color: var(--clr-text-muted);
}.input-frame input::-ms-input-placeholder {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.4rem;
color: var(--clr-text-muted);
}.subscribe input:-ms-input-placeholder {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.4rem;
color: var(--clr-text-muted);
}.subscribe input::-ms-input-placeholder {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.4rem;
color: var(--clr-text-muted);
}nav ul li.current > a {
color: var(--clr-surface-teal);
}nav ul > li.current:after {
content: "";
width: 1rem;
height: 1rem;
background-color: var(--clr-accent);
border-radius: 50%;
margin-left: 1rem;
transform: translateY(0.2rem);
}@media (max-width: 992px) {
nav {
margin-bottom: 4rem;
width: 100%;
}nav ul {
flex-direction: column;
width: 100%;
}nav ul li {
margin-right: 0;
margin-bottom: 3rem;
display: flex;
flex-direction: column;
width: 100%;
}nav ul > li.current:after {
display: none;
}nav ul li:last-child {
margin-bottom: 0;
}nav ul li ul {
padding: 0;
position: static;
opacity: 1;
width: 100%;
max-width: 100%;
overflow: hidden;
max-height: 0;
border-color: #fff0;
}nav ul li ul li:first-child {
margin-top: 3rem;
}nav ul li ul li:last-child {
margin-bottom: 3rem;
}nav ul li:hover ul {
margin-top: 3rem;
max-height: 40rem;
border-color: rgb(163 169 171 / 0.1);
}
}.invert nav ul li.current > a {
color: var(--clr-dark);
}.single-post-text p,
.single-post-text ul,
.single-post-text ol,
.single-post-text blockquote,
.single-post-text h1,
.single-post-text h2,
.single-post-text h3,
.single-post-text h4,
.single-post-text h5,
.single-post-text h6 {
margin-bottom: 3rem;
}.single-post-text h1,
.single-post-text h2,
.single-post-text h3,
.single-post-text h4,
.single-post-text h5,
.single-post-text h6 {
color: var(--clr-dark);
}.single-post-text .privacy-storage-heading {
width: 100%;
text-align: left;
}
.single-post-text .privacy-storage-table-wrap {
width: 100%;
margin: 0 0 3rem;
overflow-x: auto;
border: 1px solid rgb(20 47 48 / 0.14);
background: var(--clr-surface-light);
-webkit-overflow-scrolling: touch;
}
.single-post-text .privacy-storage-table {
width: 100%;
min-width: 780px;
border-collapse: collapse;
table-layout: fixed;
color: var(--clr-dark);
font-size: 1.8rem;
line-height: 1.55;
text-align: left;
}
.single-post-text .privacy-storage-table th,
.single-post-text .privacy-storage-table td {
padding: 1.6rem 1.8rem;
border-bottom: 1px solid rgb(20 47 48 / 0.12);
vertical-align: top;
text-align: left;
hyphens: auto;
overflow-wrap: break-word;
}
.single-post-text .privacy-storage-table th {
color: var(--clr-surface-light);
background: var(--clr-dark);
font-weight: 700;
line-height: 1.35;
}
.single-post-text .privacy-storage-table th:nth-child(1),
.single-post-text .privacy-storage-table td:nth-child(1) {
width: 23%;
}
.single-post-text .privacy-storage-table th:nth-child(2),
.single-post-text .privacy-storage-table td:nth-child(2) {
width: 25%;
}
.single-post-text .privacy-storage-table th:nth-child(3),
.single-post-text .privacy-storage-table td:nth-child(3) {
width: 52%;
}
.single-post-text .privacy-storage-table tbody tr:nth-child(even) {
background: rgb(20 47 48 / 0.035);
}
.single-post-text .privacy-storage-table tbody tr:last-child td {
border-bottom: 0;
}.single-post-text ul,
.single-post-text ol {
padding: 0;
}.single-post-text ul {
margin-left: 0;
list-style: none;
}.single-post-text ol {
margin-left: 1.5em;
}.single-post-text li {
line-height: 1.6;
margin-bottom: 0.75rem;
}.single-post-text li:last-child {
margin-bottom: 0;
}.single-post-text ul > li {
position: relative;
padding-left: 2rem;
}.single-post-text ul > li::before {
content: "";
position: absolute;
top: 0.78em;
left: 0;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background-color: var(--clr-accent);
}.single-post-text ol > li::marker {
color: var(--clr-dark);
font-weight: 700;
}.single-post-text ul ul,
.single-post-text ol ol,
.single-post-text ul ol,
.single-post-text ol ul {
margin-top: 0.75rem;
}.single-post-text img {
max-width: 100%;
height: auto;
}.single-post-text select {
display: block;
width: 100%;
height: 50px;
margin-bottom: 0;
padding: 0 60px 0 20px;
border: none;
background-color: rgb(0 0 0 / 0.1);
color: var(--clr-dark);
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 1px;
line-height: 50px;
text-transform: initial;
}.single-post-text blockquote {
margin: 3rem 0;
padding: 3rem 3rem 3rem 4rem;
color: var(--clr-dark);
background: transparent;
font-style: italic;
position: relative;
}.single-post-text blockquote p {
margin-bottom: 0.5rem !important;
font-style: normal;
font-weight: 600;
}.single-post-text blockquote p:first-child {
margin-top: 0;
}.single-post-text blockquote p:last-child {
margin-bottom: 0 !important;
}.single-post-text blockquote::before,
.single-post-text blockquote::after {
position: absolute;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f10d";
color: var(--clr-dark);
font-size: 1.6rem;
opacity: 0.3;
}.single-post-text blockquote::before {
top: 0;
left: 1rem;
}.single-post-text blockquote::after {
right: 0;
bottom: 0;
transform: rotate(180deg);
}.single-post-text a {
color: inherit;
position: relative;
text-decoration: none;
transition: color var(--transition-fast);
}.single-post-text a::after {
content: "";
position: absolute;
left: 0;
bottom: -0.28em;
width: 0;
height: 0.1rem;
background-color: var(--clr-accent);
transition: width var(--transition-fast);
}.single-post-text a:hover {
color: var(--clr-accent);
}.single-post-text a:hover::after {
width: 100%;
}.single-post-text footer {
width: auto;
}.comment:after {
content: "";
position: relative;
display: block;
clear: both;
}.title.comment-reply-title,
.post-comments .title {
margin: 0 0 30px 0;
font-size: 1.8rem;
font-weight: 600;
}.col-lg-10:first-child .single-info {
height: auto;
padding-bottom: 5rem;
}.title.comment-reply-title,
.post-comments .title {
margin: 0 0 30px;
font-size: 1.6rem;
font-weight: 600;
}.form-comment .group-input input {
color: var(--clr-dark);
}.lenis.lenis-scrolling iframe {
pointer-events: none;
}nav ul li.current > a,
nav ul li.current-menu-item > a {
color: var(--clr-surface-teal);
}nav ul > li.current:after,
nav ul > li.current-menu-item:after {
content: "";
width: 1rem;
height: 1rem;
background-color: var(--clr-accent);
border-radius: 50%;
margin-left: 1rem;
transform: translateY(0.2rem);
}@media (max-width: 992px) {
nav {
margin-bottom: 4rem;
width: 100%;
}nav ul {
flex-direction: column;
width: 100%;
}nav ul li {
margin-right: 0;
margin-bottom: 3rem;
display: flex;
flex-direction: column;
width: 100%;
}nav ul > li.current:after,
nav ul > li.current-menu-item:after {
display: none;
}nav ul li:last-child {
margin-bottom: 0;
}nav ul li ul {
padding: 0;
position: static;
opacity: 1;
width: 100%;
max-width: 100%;
overflow: hidden;
max-height: 0;
border-color: #fff0;
}nav ul li ul li:first-child {
margin-top: 3rem;
}nav ul li ul li:last-child {
margin-bottom: 3rem;
}nav ul li:hover ul {
margin-top: 3rem;
max-height: 40rem;
border-color: rgb(163 169 171 / 0.1);
}
}.invert nav ul li.current > a,
.invert nav ul li.current-menu-item > a {
color: var(--clr-dark);
}.map iframe {
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}iframe {
max-width: 100%;
}.custom-embed {
line-height: 0;
}.col-xl-4 .large-card h4.w-80,
.col-xl-4 .large-card h3.w-80 {
max-width: 288px;
}b {
font-weight: 600;
}/* Color utilities — appended last to guarantee cascade precedence over base heading rules */
.c-m-1 {
color: var(--clr-dark);
}.c-m-2 {
color: var(--clr-text-muted);
}.c-m-3 {
color: var(--clr-text-subtle);
}.c-m-4 {
color: var(--clr-surface-teal);
}.c-m-5 {
color: var(--clr-surface-light);
}.c-a-1 {
color: var(--clr-accent);
}
/* =====================================================================
Mobile stacking — Placed before the section rules so per-section mobile overrides still win.
===================================================================== */
@media (max-width: 767px) {
.ar-pricing-card.ar-pricing-card,
.ar-pricing-cards-row.ar-pricing-cards-row,
.ar-pricing-desc-col.ar-pricing-desc-col,
.ar-pricing-header-row.ar-pricing-header-row,
.ar-pricing-section.ar-pricing-section,
.ar-services-desc-col.ar-services-desc-col,
.ar-services-header-row.ar-services-header-row,
.ar-services-section.ar-services-section,
.faq-questions-col.faq-questions-col,
.faq-section-row.faq-section-row,
.faq-sticky-col.faq-sticky-col,
.footer .footer-bottom-row,
.footer .footer-brand,
.footer .footer-copyright-col,
.footer .footer-credits-col,
.footer .footer-links-col,
.footer .footer-main,
.footer .footer-nav-col,
.footer .footer-office,
.footer .footer-online,
.footer .footer-social-group,
.footer .footer-upper,
.project-content-col.project-content-col,
.project-content-header.project-content-header,
.project-content-row.project-content-row,
.project-grid-row.project-grid-row,
.project-similar-portfolio.project-similar-portfolio,
.project-similar-row.project-similar-row,
.project-similar-section.project-similar-section,
.project-sticky-col.project-sticky-col,
.section-about-timeline .timeline-intro,
.section-about-timeline .timeline-intro-copy,
.section-about-timeline .timeline-story,
.section-about-timeline .timeline-story-inner,
.section-about-timeline.section-about-timeline,
.section-attorney-about .attorney-copy,
.section-attorney-about .attorney-copy-inner,
.section-attorney-about .attorney-media,
.section-attorney-about.section-attorney-about,
.section-case-cards .case-card-grid,
.section-case-cards .case-cards-copy-column,
.section-case-cards .case-cards-footer,
.section-case-cards .case-cards-footer-actions,
.section-case-cards .case-cards-footer-copy,
.section-case-cards .case-cards-header,
.section-case-cards .case-cards-title-column,
.section-case-cards.section-case-cards,
.section-case-list .case-list-footer,
.section-case-list .case-list-footer-actions,
.section-case-list .case-list-footer-copy,
.section-case-list .case-list-header,
.section-case-list .case-list-items,
.section-case-list .case-list-metric-column,
.section-case-list .case-list-title-column,
.section-case-list.section-case-list,
.section-contact-cta.section-contact-cta,
.section-contact-details .contact-details-main,
.section-contact-details .contact-details-main-inner,
.section-contact-details .contact-details-sidebar,
.section-contact-details .contact-details-sidebar-inner,
.section-contact-details.section-contact-details,
.section-deadline-cta.section-deadline-cta,
.section-digital-support .support-copy-column,
.section-digital-support .support-header,
.section-digital-support .support-member-four,
.section-digital-support .support-member-one,
.section-digital-support .support-member-three,
.section-digital-support .support-member-two,
.section-digital-support .support-team,
.section-digital-support .support-title-column,
.section-digital-support.section-digital-support,
.section-faq-accordion .faq-intro,
.section-faq-accordion .faq-question-list,
.section-faq-accordion .faq-questions,
.section-feature-grid .features-copy-column,
.section-feature-grid .features-header,
.section-feature-grid .features-title-column,
.section-fees-costs .fees-card-one,
.section-fees-costs .fees-card-three,
.section-fees-costs .fees-card-two,
.section-fees-costs .fees-copy-column,
.section-fees-costs .fees-grid,
.section-fees-costs .fees-header,
.section-fees-costs .fees-title-column,
.section-hero-crisis.section-hero-crisis,
.section-hero-outer.section-hero-outer,
.section-image-cta.section-image-cta,
.section-image-services .services-copy-column,
.section-image-services .services-header,
.section-image-services .services-showcase,
.section-image-services .services-title-column,
.section-image-services-dark .dark-services-copy-column,
.section-image-services-dark .dark-services-header,
.section-image-services-dark .dark-services-showcase,
.section-image-services-dark .dark-services-title-column,
.section-image-services-dark.section-image-services-dark,
.section-image-services.section-image-services,
.section-inner-content.section-inner-content,
.section-intro-text.section-intro-text,
.section-legal-help .legal-benefit-grid,
.section-legal-help .legal-benefits,
.section-legal-help .legal-intro,
.section-legal-help .legal-intro-copy,
.section-legal-help.section-legal-help,
.section-legal-services .legal-service-column-one,
.section-legal-services .legal-service-column-three,
.section-legal-services .legal-service-column-two,
.section-legal-services .legal-services-copy-column,
.section-legal-services .legal-services-grid,
.section-legal-services .legal-services-header,
.section-legal-services .legal-services-title-column,
.section-legal-services.section-legal-services,
.section-page-hero.section-page-hero,
.section-partners.section-partners,
.section-stats-team-image .stats-card-primary,
.section-stats-team-image .stats-card-secondary,
.section-stats-team-image .stats-copy,
.section-stats-team-image .stats-copy-inner,
.section-stats-team-image .stats-grid,
.section-stats-team-image .stats-media,
.section-stats-team-image.section-stats-team-image,
.section-vision-execution .vision-copy,
.section-vision-execution .vision-media,
.section-vision-execution.section-vision-execution,
.service-related-archive-col.service-related-archive-col,
.service-related-header-row.service-related-header-row,
.service-related-portfolio-col.service-related-portfolio-col,
.service-right-col.service-right-col,
.sticky-part.sticky-part,
.top-panel .header-inner,
.top-panel .header-logo-col,
.top-panel .header-nav-col {
width: 100%;
flex-wrap: wrap;
}
}
/* =====================================================================
SECTIONS (former sections.css)
===================================================================== */
/* ─── Site Color Palette ─────────────────────────────────────────────── */
:root {
/* Core dark tones */
--clr-dark: #242f35; /* primary dark — headings, overlays, footer-bottom bg */
--clr-dark-mid: #2e3c44; /* secondary dark — dark-form inputs, disabled states */
/* Text */
--clr-text-muted: #5f6b71; /* secondary text, footer credits */
--clr-text-subtle: #a3a9ab; /* muted text, placeholders, dividers */
/* Surface / section backgrounds */
--clr-surface-teal: #e2eeee; /* teal-gray highlight sections */
--clr-surface-light: #f3f7f8; /* off-white body / light sections */
--clr-white: #ffffff;
/* Accent */
--clr-accent: #f2a73d; /* amber — buttons, hover, scrollbar */
}
/* ─────────────────────────────────────────────────────────────────────── */
/* Global section components. */
.fa,
.fas,
.far,
.fal {
font-family: "Font Awesome 5 Free";
}
.fa,
.fas,
.fal {
font-weight: 900;
}
.fab {
font-family: "Font Awesome 5 Brands";
font-weight: 400;
}
.section-stats-team-image.section-stats-team-image {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-stats-team-image .stats-copy {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 5rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-stats-team-image .stats-copy-inner {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
margin: 0 -20px 0 0;
padding: 0 22rem 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-stats-team-image .stats-grid {
display: flex;
flex-direction: row;
margin: 5rem 0 0;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-stats-team-image .stats-card-primary {
display: flex;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-stats-team-image .stats-primary {
text-align: left;
}
.section-stats-team-image .stats-card-secondary {
display: flex;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-stats-team-image .stats-secondary {
text-align: left;
}
.section-stats-team-image .stats-divider {
--divider-border-style: dashed;
--divider-color: var(--clr-text-subtle);
--divider-border-width: 1px;
}
.section-stats-team-image .stats-divider > .widget-content {
margin: 4rem 0rem 4rem 0rem;
}
.section-stats-team-image .stats-divider .divider-line {
width: 12rem;
}
.section-stats-team-image .stats-divider .divider-wrap {
padding-block-start: 0;
padding-block-end: 0;
}
.section-stats-team-image .stats-text {
text-align: left;
}
.section-stats-team-image .stats-media {
display: flex;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-cards.section-case-cards {
display: flex;
flex-direction: column;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0 8rem;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-cards.section-case-cards {
background-color: var(--clr-surface-teal);
}
.section-case-cards .case-cards-header {
display: flex;
flex-direction: row;
margin: 0 0 5rem;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-cards .case-cards-title-column {
display: flex;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-cards .case-cards-title {
text-align: left;
}
.section-case-cards .case-cards-copy-column {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 65px 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-cards .case-cards-copy {
text-align: left;
}
.section-case-cards .case-cards-header-actions > .widget-content {
margin: -2rem 0rem 0rem 0rem;
}
.section-case-cards .case-cards-header-actions .btns {
text-align: left;
}
.section-case-cards .case-card-grid {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-cards .case-cards-footer {
display: flex;
flex-direction: row;
align-items: center;
margin: 1rem 0 0;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-cards .case-cards-footer-copy {
display: flex;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-cards .case-cards-footer-title > .widget-content {
margin: 5rem 0rem 0rem 0rem;
}
.section-case-cards .case-cards-footer-title {
text-align: left;
}
.section-case-cards .case-cards-footer-actions {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-cards .case-cards-actions .btns {
text-align: left;
}
.section-faq-accordion.section-faq-accordion {
--row-gap: 0px;
--column-gap: 0px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
display: flex;
flex-direction: column;
}
.section-faq-accordion.section-faq-accordion > .box-inner {
flex-direction: row;
padding-top: 0px;
padding-bottom: 0px;
}
.section-faq-accordion .faq-intro {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-faq-accordion .faq-actions .btns {
text-align: left;
}
.section-faq-accordion .faq-questions {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-faq-accordion .faq-question-list {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 0 0 10rem;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 992px) {
.section-stats-team-image.section-stats-team-image {
flex-direction: column;
}
.section-stats-team-image .stats-copy-inner {
margin: 0;
padding: 0 2rem;
}
.section-case-cards.section-case-cards {
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 2rem 8rem;
}
.section-case-cards .case-cards-header {
padding: 0;
}
.section-case-cards .case-card-grid {
padding: 0;
}
.section-case-cards .case-cards-footer {
padding: 0;
}
.section-faq-accordion.section-faq-accordion {
--row-gap: 0px;
--column-gap: 0px;
}
.section-faq-accordion.section-faq-accordion > .box-inner {
flex-direction: column;
}
.section-faq-accordion .faq-intro {
padding: 10rem 2rem 0;
}
.section-faq-accordion .faq-intro-copy {
padding: 0;
min-width: 0;
width: 100%;
}
.section-faq-accordion .faq-title {
width: 100%;
max-width: 100%;
}
.section-faq-accordion .faq-title h2 {
hyphens: auto;
overflow-wrap: anywhere;
}
.section-faq-accordion .faq-text {
width: 100%;
max-width: 100%;
}
.section-faq-accordion .faq-questions {
padding: 10rem 2rem;
}
.section-faq-accordion .faq-question-list {
padding: 0;
}
}
@media (max-width: 767px) {
.section-case-cards .case-cards-header {
--row-gap: 0px;
--column-gap: 0px;
}
.section-case-cards .case-cards-copy-column {
align-items: flex-start;
padding: 0;
}
.section-case-cards .case-cards-footer {
flex-direction: column;
--row-gap: 0px;
--column-gap: 0px;
}
.section-case-cards .case-cards-footer-actions {
align-items: flex-start;
}
}
@media (min-width: 768px) {
.section-stats-team-image .stats-copy {
width: 50%;
}
.section-stats-team-image .stats-media {
width: 50%;
}
.section-case-cards.section-case-cards > .box-inner {
max-width: 1300px;
}
.section-case-cards .case-cards-footer-copy {
width: 66%;
}
.section-case-cards .case-cards-footer-actions {
width: 33%;
}
.section-faq-accordion.section-faq-accordion > .box-inner {
max-width: 1280px;
}
.section-faq-accordion .faq-intro {
width: 50%;
}
.section-faq-accordion .faq-questions {
width: 50%;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.section-case-cards.section-case-cards > .box-inner {
max-width: 960px;
}
.section-faq-accordion.section-faq-accordion > .box-inner {
max-width: 940px;
}
}
@media (max-width: 992px) and (min-width: 768px) {
.section-stats-team-image .stats-copy {
width: 100%;
}
.section-stats-team-image .stats-media {
width: 100%;
}
.section-faq-accordion .faq-questions {
width: 100%;
}
}
.section-about-timeline.section-about-timeline {
display: flex;
flex-direction: row;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-about-timeline .timeline-intro {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 20rem 10rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-about-timeline .timeline-intro-copy {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-about-timeline .timeline-title {
text-align: left;
}
.section-about-timeline .timeline-summary {
width: 85%;
max-width: 85%;
text-align: left;
}
.section-about-timeline .timeline-stat > .widget-content {
margin: -2rem 0rem 0rem 0rem;
}
.section-about-timeline .timeline-stat {
text-align: left;
}
.section-about-timeline .timeline-story {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-about-timeline .timeline-story-inner {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-about-timeline .timeline-lead {
text-align: left;
}
.section-about-timeline .timeline-text {
text-align: left;
}
.section-about-timeline .timeline-note {
text-align: left;
}
.section-about-timeline .timeline-actions .btns {
text-align: left;
}
.section-feature-grid.section-feature-grid {
--row-gap: 0px;
--column-gap: 0px;
padding-left: 0rem;
padding-right: 0rem;
width: 100%;
display: flex;
flex-direction: column;
}
.section-feature-grid.section-feature-grid > .box-inner {
flex-direction: column;
padding-top: 11rem;
padding-bottom: 11rem;
}
.section-feature-grid.section-feature-grid {
background-color: var(--clr-surface-teal);
}
.section-feature-grid .features-header {
display: flex;
flex-direction: row;
margin: 0 0 5rem;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-feature-grid .features-title-column {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-feature-grid .features-title {
text-align: left;
}
.section-feature-grid .features-copy-column {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 70px 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-feature-grid .features-copy {
text-align: left;
}
.section-feature-grid .features-actions > .widget-content {
margin: -2rem 0rem 0rem 0rem;
}
.section-feature-grid .features-actions .btns {
text-align: left;
}
.section-feature-grid .features-grid .card {
height: 100%;
/* Abstand steuert das Raster ueber gap; das mb-2 aus dem Markup wuerde
sich sonst addieren und wegen height:100% aus der Zeile herausragen. */
margin-bottom: 0;
}
.section-feature-grid .features-grid .card h3,
.section-legal-help .legal-benefit-card h3,
.service-related-section .large-card h4,
.service-related-section .large-card h3 {
max-width: 100%;
overflow-wrap: anywhere;
word-break: normal;
hyphens: auto;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
text-wrap: balance;
}
.section-feature-grid .features-grid a.card {
text-decoration: none;
transition:
border-color 0.2s,
transform 0.2s;
}
.section-feature-grid .features-grid a.card:hover {
border-color: var(--clr-accent);
transform: translateY(-3px);
}
.section-feature-grid .features-grid [class*="widget-container"],
.section-feature-grid .features-grid .widget-content {
height: 100%;
}
.section-feature-grid .features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
--row-gap: 2rem;
--column-gap: 2rem;
grid-auto-flow: row;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-image-services.section-image-services {
display: flex;
flex-direction: column;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-image-services .services-header {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
margin: 0 0 5rem;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-image-services .services-title-column {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-image-services .services-title {
text-align: left;
}
.section-image-services .services-copy-column {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 70px 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-image-services .services-copy {
text-align: left;
}
.section-image-services .services-actions > .widget-content {
margin: -2rem 0rem 0rem 0rem;
}
.section-image-services .services-actions .btns {
text-align: left;
}
.section-image-services .services-showcase {
display: flex;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-list.section-case-list {
display: flex;
flex-direction: column;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0 8rem;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-list.section-case-list {
background-color: var(--clr-surface-teal);
}
.section-case-list .case-list-header {
display: flex;
flex-direction: row;
margin: 0 0 5rem;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-list .case-list-title-column {
display: flex;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-list .case-list-title {
text-align: left;
}
.section-case-list .case-list-metric-column {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 45px 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-list .case-list-metric {
text-align: right;
}
.section-case-list .case-list-items {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-list .case-list-footer {
display: flex;
flex-direction: row;
align-items: center;
margin: 4rem 0 0;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-list .case-list-footer-copy {
display: flex;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-list .case-list-footer-title > .widget-content {
margin: 5rem 0rem 0rem 0rem;
}
.section-case-list .case-list-footer-title {
text-align: left;
}
.section-case-list .case-list-footer-actions {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-case-list .case-list-actions .btns {
text-align: left;
}
@media (max-width: 1200px) {
.section-feature-grid .features-grid {
grid-auto-flow: row;
}
}
@media (min-width: 768px) {
.section-about-timeline.section-about-timeline > .box-inner {
max-width: 1280px;
}
.section-about-timeline .timeline-intro {
width: 50%;
}
.section-about-timeline .timeline-story {
width: 50%;
}
.section-feature-grid.section-feature-grid > .box-inner {
max-width: 1300px;
}
.section-image-services .services-header > .box-inner {
max-width: 1280px;
}
.section-case-list.section-case-list > .box-inner {
max-width: 1300px;
}
.section-case-list .case-list-footer-copy {
width: 66%;
}
.section-case-list .case-list-footer-actions {
width: 33%;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.section-about-timeline.section-about-timeline > .box-inner {
max-width: 940px;
}
.section-feature-grid.section-feature-grid > .box-inner {
max-width: 960px;
}
.section-image-services .services-header > .box-inner {
max-width: 940px;
}
.section-case-list.section-case-list > .box-inner {
max-width: 960px;
}
}
@media (max-width: 992px) and (min-width: 768px) {
.section-about-timeline .timeline-intro {
width: 100%;
}
.section-about-timeline .timeline-story {
width: 100%;
}
}
@media (max-width: 992px) {
.section-about-timeline.section-about-timeline {
flex-direction: column;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 2rem;
}
.section-about-timeline .timeline-intro {
padding: 10rem 0 0;
}
.section-about-timeline .timeline-summary {
width: 100%;
max-width: 100%;
}
.section-feature-grid.section-feature-grid {
padding-left: 2rem;
padding-right: 2rem;
}
.section-feature-grid.section-feature-grid > .box-inner {
padding-top: 8rem;
padding-bottom: 8rem;
}
.section-feature-grid .features-header {
padding: 0;
}
.section-feature-grid .features-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row;
padding: 0;
}
.section-image-services .services-header {
padding: 0 2rem;
}
.section-case-list .case-list-header {
padding: 0 2rem;
}
.section-case-list .case-list-items {
padding: 0 2rem;
}
.section-case-list .case-list-footer {
padding: 0 2rem;
}
}
@media (max-width: 767px) {
.section-about-timeline .timeline-story-inner {
flex-wrap: nowrap;
}
.section-feature-grid.section-feature-grid > .box-inner {
flex-wrap: nowrap;
}
.section-feature-grid .features-header {
--row-gap: 0px;
--column-gap: 0px;
}
.section-feature-grid .features-copy-column {
align-items: flex-start;
padding: 0;
}
.section-feature-grid .features-grid {
grid-template-columns: repeat(1, 1fr);
grid-auto-flow: row;
}
.section-image-services .services-copy-column {
align-items: flex-start;
padding: 0;
}
.section-image-services .services-showcase {
flex-wrap: nowrap;
}
.section-case-list .case-list-header {
--row-gap: 0px;
--column-gap: 0px;
}
.section-case-list .case-list-metric-column {
align-items: flex-start;
padding: 0;
}
.section-case-list .case-list-metric {
text-align: left;
}
.section-case-list .case-list-footer {
--row-gap: 0px;
--column-gap: 0px;
}
.section-case-list .case-list-footer-actions {
align-items: flex-start;
}
}
.section-image-services-dark.section-image-services-dark {
display: flex;
flex-direction: column;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-image-services-dark.section-image-services-dark {
background-color: var(--clr-surface-teal);
}
.section-image-services-dark .dark-services-header {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
margin: 0 0 5rem;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-image-services-dark .dark-services-title-column {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-image-services-dark .dark-services-title {
text-align: left;
}
.section-image-services-dark .dark-services-copy-column {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 70px 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-image-services-dark .dark-services-copy {
text-align: left;
}
.section-image-services-dark .dark-services-actions > .widget-content {
margin: -2rem 0rem 0rem 0rem;
}
.section-image-services-dark .dark-services-actions .btns {
text-align: left;
}
.section-image-services-dark .dark-services-showcase {
display: flex;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.section-image-services-dark .dark-services-header > .box-inner {
max-width: 1280px;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.section-image-services-dark .dark-services-header > .box-inner {
max-width: 940px;
}
}
@media (max-width: 992px) {
.section-image-services-dark .dark-services-header {
padding: 0 2rem;
}
}
@media (max-width: 767px) {
.section-image-services-dark .dark-services-copy-column {
align-items: flex-start;
padding: 0;
}
}
.section-vision-execution.section-vision-execution {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
--row-gap: 0rem;
--column-gap: 2rem;
padding: 10rem 0 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-vision-execution .vision-copy {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-vision-execution .vision-icon {
text-align: left;
}
.section-vision-execution .vision-title {
text-align: left;
}
.section-vision-execution .vision-text > .widget-content {
padding: 0% 0% 0% 0%;
}
.section-vision-execution .vision-text {
text-align: left;
}
.section-vision-execution .vision-avatars {
text-align: left;
}
.section-vision-execution .vision-actions .btns {
text-align: left;
}
.section-vision-execution .vision-media {
display: flex;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.section-vision-execution.section-vision-execution > .box-inner {
max-width: 1300px;
}
.section-vision-execution .vision-copy {
width: 41.66666667%;
}
.section-vision-execution .vision-media {
width: 41.66666667%;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.section-vision-execution.section-vision-execution > .box-inner {
max-width: 960px;
}
}
@media (max-width: 992px) and (min-width: 768px) {
.section-vision-execution .vision-copy {
width: 100%;
}
.section-vision-execution .vision-media {
width: 100%;
}
}
@media (max-width: 992px) {
.section-vision-execution.section-vision-execution {
flex-direction: column;
}
.section-vision-execution .vision-copy {
padding: 0 2rem 10rem;
}
.section-vision-execution .vision-media {
padding: 0 2rem;
}
}
@media (max-width: 767px) {
.section-vision-execution .vision-media {
flex-wrap: nowrap;
}
}
.section-hero-crisis.section-hero-crisis {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
margin: 0;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-help.section-legal-help {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-help .legal-intro {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-help .legal-intro-copy {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 28% 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-help .legal-title {
text-align: left;
}
.section-legal-help .legal-text {
text-align: left;
}
.section-legal-help .legal-actions .btns {
text-align: left;
}
.section-legal-help .legal-benefits {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-help .legal-benefit-grid {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 0 0 20rem;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-help .legal-benefit-card {
min-height: 26rem;
padding: 5rem 4rem 4.5rem;
justify-content: center;
}
.angle:before {
content: "";
display: block;
position: absolute;
top: -0.7rem;
right: -0.7rem;
z-index: 10;
width: 0;
height: 0;
border-style: solid;
border-width: 0 5.2rem 5.2rem 0;
border-color: transparent var(--clr-accent) transparent transparent;
pointer-events: none;
}
.section-legal-help .legal-benefit-card .w-80 {
width: 100%;
max-width: 43rem;
margin-left: auto;
margin-right: auto;
}
.section-legal-help .legal-benefit-one {
order: 1;
}
.section-legal-help .legal-benefit-two {
order: 2;
}
.section-legal-help .legal-benefit-three {
order: 3;
}
.section-legal-help .legal-benefit-four {
order: 4;
}
.section-legal-help .legal-benefit-five {
order: 5;
}
.section-legal-help .legal-benefit-six {
order: 6;
}
.section-legal-help .legal-benefit-six > .widget-content {
margin: 0rem 0rem -9rem 0rem;
}
.section-attorney-about.section-attorney-about {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-attorney-about .attorney-copy {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-attorney-about .attorney-copy-inner {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
margin: 0 -20px 0 0;
padding: 0 20rem 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-attorney-about .attorney-title {
text-align: left;
}
.section-attorney-about .attorney-text {
width: 96%;
max-width: 96%;
text-align: left;
}
.section-attorney-about .attorney-text > .widget-content {
padding: 0rem 0rem 2rem 0rem;
}
.section-attorney-about .attorney-media {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 1920px) {
.section-attorney-about .attorney-media {
align-self: stretch;
}
.section-attorney-about .attorney-image {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.section-attorney-about .attorney-image > .widget-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.section-attorney-about .attorney-image > .widget-content > .square-box {
flex: 1 1 auto;
}
}
.section-legal-services.section-legal-services {
display: flex;
flex-direction: column;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0 8rem;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-services.section-legal-services {
background-color: var(--clr-surface-teal);
}
.section-legal-services .legal-services-header {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
margin: 0 0 5rem;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-services .legal-services-title-column {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-services .legal-services-title {
text-align: left;
}
.section-legal-services .legal-services-copy-column {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 70px 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-services .legal-services-copy {
text-align: left;
}
.section-legal-services .legal-services-actions > .widget-content {
margin: -2rem 0rem 0rem 0rem;
}
.section-legal-services .legal-services-actions .btns {
text-align: left;
}
.section-legal-services .legal-services-grid {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-services .legal-service-column-one {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-services .legal-service-column-two {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-legal-services .legal-service-column-three {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-deadline-cta.section-deadline-cta {
display: flex;
flex-direction: column;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-deadline-cta .deadline-cta-widget .section {
background-color: var(--clr-dark);
background-image:
linear-gradient(
90deg,
rgb(36 47 53 / 0.96) 0%,
rgb(36 47 53 / 0.82) 48%,
rgb(36 47 53 / 0.2) 100%
),
url("../images/cta.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.section-deadline-cta .deadline-cta-widget .hero-bg,
.section-deadline-cta .deadline-cta-widget .bg-img,
.section-deadline-cta .deadline-cta-widget .overlay {
display: none;
}
.section-deadline-cta .el-subtitle {
display: flex;
align-items: center;
gap: 0.8rem;
}
.section-deadline-cta .el-subtitle::before {
content: "";
width: 15px;
height: 15px;
flex: 0 0 15px;
background-color: var(--clr-accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L3 6v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V6l-9-4z'/%3E%3C/svg%3E")
center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L3 6v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V6l-9-4z'/%3E%3C/svg%3E")
center / contain no-repeat;
transform: translateY(-0.1rem);
}
@media (max-width: 767px) {
.section-deadline-cta .deadline-cta-widget .section {
background-image:
linear-gradient(
90deg,
rgb(36 47 53 / 0.96) 0%,
rgb(36 47 53 / 0.82) 100%
),
url("../images/cta.webp");
background-position: 64% center;
}
}
.section-fees-costs.section-fees-costs {
--row-gap: 0px;
--column-gap: 0px;
padding-left: 0rem;
padding-right: 0rem;
width: 100%;
display: flex;
flex-direction: column;
}
.section-fees-costs.section-fees-costs > .box-inner {
flex-direction: column;
padding-top: 10rem;
padding-bottom: 8rem;
}
.section-fees-costs.section-fees-costs {
background-color: var(--clr-surface-teal);
}
.section-fees-costs .fees-header {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
margin: 0 0 5rem;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-fees-costs .fees-title-column {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-fees-costs .fees-title {
text-align: left;
}
.section-fees-costs .fees-copy-column {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 70px 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-fees-costs .fees-copy {
text-align: left;
}
.section-fees-costs .fees-actions > .widget-content {
margin: -2rem 0rem 0rem 0rem;
}
.section-fees-costs .fees-actions .btns {
text-align: left;
}
.section-fees-costs .fees-grid {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-fees-costs .fees-card-one {
display: flex;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-fees-costs .fees-card-two {
display: flex;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-fees-costs .fees-card-three {
display: flex;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-fees-costs .card .flex-row {
align-items: center;
}
.section-fees-costs .card .counter-1 {
white-space: nowrap;
flex-shrink: 0;
line-height: 1;
}
.section-fees-costs .card .flex-row > p {
font-size: 1.3rem;
line-height: 1.25;
margin-bottom: 0;
}
.section-digital-support.section-digital-support {
display: flex;
flex-direction: column;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0 8rem;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-digital-support .support-header {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
margin: 0 0 5rem;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-digital-support .support-title-column {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-digital-support .support-title {
text-align: left;
}
.section-digital-support .support-copy-column {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 70px 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-digital-support .support-copy {
text-align: left;
}
.section-digital-support .support-actions > .widget-content {
margin: -2rem 0rem 0rem 0rem;
}
.section-digital-support .support-actions .btns {
text-align: left;
}
.section-digital-support .support-team {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-digital-support .support-member-one {
display: flex;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-digital-support .support-member-two {
display: flex;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-digital-support .support-member-three {
display: flex;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-digital-support .support-member-four {
display: flex;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-contact-cta.section-contact-cta {
display: flex;
flex-direction: column;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-contact-cta .contact-cta-widget .hero-bg,
.section-contact-cta .contact-cta-widget .bg-img {
object-position: center !important;
}
.section-page-hero.section-page-hero {
display: flex;
flex-direction: column;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-page-hero .page-hero-widget .hero-bg,
.section-page-hero .page-hero-widget .bg-img {
object-position: center !important;
}
.section-page-hero .page-hero-widget .overlay {
opacity: 0.88 !important;
}
.section-contact-details.section-contact-details {
display: flex;
flex-direction: row;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-contact-details .contact-details-sidebar {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0 7rem;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-contact-details .contact-details-sidebar-inner {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 25% 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-contact-details .contact-details-title,
.section-contact-details .contact-details-main-title,
.section-contact-details .contact-details-copy,
.section-contact-details .contact-details-map-title,
.section-contact-details .contact-details-form-title {
text-align: left;
}
.section-contact-details .contact-details-info > .widget-content {
margin: 0rem 0rem 5rem 0rem;
}
.section-contact-details .contact-details-social .social {
justify-content: flex-start;
}
.section-contact-details .contact-details-main {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 10rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-contact-details .contact-details-main-inner {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 0 0 10rem;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-contact-details .contact-details-map > .widget-content {
margin: 0rem 0rem 5rem 0rem;
}
.section-contact-details .contact-details-map iframe {
height: 343px;
}
.section-image-cta.section-image-cta {
display: flex;
flex-direction: column;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.section-image-cta .image-cta-widget .hero-bg,
.section-image-cta .image-cta-widget .bg-img {
object-position: top !important;
}
@media (max-width: 1200px) {
.section-legal-services .legal-services-grid {
flex-wrap: wrap;
}
}
@media (min-width: 768px) {
.section-contact-details.section-contact-details > .box-inner {
max-width: 1280px;
}
.section-contact-details .contact-details-sidebar,
.section-contact-details .contact-details-main {
width: 50%;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.section-contact-details.section-contact-details > .box-inner {
max-width: 940px;
}
}
@media (max-width: 992px) and (min-width: 768px) {
.section-contact-details .contact-details-sidebar,
.section-contact-details .contact-details-main {
width: 100%;
}
}
@media (max-width: 992px) {
.section-contact-details.section-contact-details {
flex-direction: column;
}
.section-contact-details .contact-details-sidebar {
padding: 10rem 2rem 7rem;
}
.section-contact-details .contact-details-sidebar-inner {
padding: 0;
}
.section-contact-details .contact-details-main {
padding: 0 2rem 10rem;
}
.section-contact-details .contact-details-main-inner {
padding: 0;
}
.section-legal-help.section-legal-help {
flex-direction: column;
padding: 0 2rem;
}
.section-legal-help .legal-intro-copy {
padding: 0;
}
.section-legal-help .legal-benefits {
padding: 0 0 10rem;
}
.section-legal-help .legal-benefit-grid {
padding: 0;
}
.section-attorney-about.section-attorney-about {
flex-direction: column;
}
.section-attorney-about .attorney-copy {
padding: 10rem 2rem;
}
.section-attorney-about .attorney-copy-inner {
margin: 0;
padding: 0;
}
.section-attorney-about .attorney-image {
width: 100%;
max-width: 100%;
}
.section-attorney-about .attorney-image > .widget-content {
padding: 0% 0% 0% 0%;
}
.section-legal-services.section-legal-services {
padding: 10rem 2rem 8rem;
}
.section-legal-services .legal-services-header {
padding: 0;
}
.section-legal-services .legal-service-column-one {
padding: 0 10px 0 0;
}
.section-legal-services .legal-service-column-two {
padding: 0 0 0 10px;
}
.section-legal-services .legal-service-column-three {
padding: 0 10px 0 0;
}
.section-fees-costs.section-fees-costs {
padding-left: 2rem;
padding-right: 2rem;
}
.section-fees-costs.section-fees-costs > .box-inner {
padding-top: 10rem;
padding-bottom: 8rem;
}
.section-fees-costs .fees-header {
padding: 0;
}
.section-fees-costs .fees-grid {
--row-gap: 0px;
--column-gap: 0px;
flex-wrap: wrap;
}
.section-fees-costs .fees-card-one {
padding: 0 10px 0 0;
}
.section-fees-costs .fees-card-two {
padding: 0 0 0 10px;
}
.section-fees-costs .fees-card-three {
padding: 0 10px 0 0;
}
.section-digital-support.section-digital-support {
padding: 10rem 2rem 8rem;
}
.section-digital-support .support-header {
flex-direction: column;
padding: 0;
}
.section-digital-support .support-copy-column {
align-items: flex-start;
padding: 0;
}
.section-digital-support .support-team {
flex-wrap: wrap;
}
.section-digital-support .support-member-one {
padding: 0 10px 0 0;
}
.section-digital-support .support-member-two {
padding: 0 0 0 10px;
}
.section-digital-support .support-member-three {
padding: 0 10px 0 0;
}
.section-digital-support .support-member-four {
padding: 0 0 0 10px;
}
}
@media (max-width: 767px) {
.section-legal-services .legal-services-copy-column {
align-items: flex-start;
padding: 0;
}
.section-legal-services .legal-service-column-one {
padding: 0;
}
.section-legal-services .legal-service-column-two {
padding: 0;
}
.section-legal-services .legal-service-column-three {
padding: 0;
}
.section-fees-costs .fees-copy-column {
align-items: flex-start;
padding: 0;
}
.section-fees-costs .fees-card-one {
padding: 0;
}
.section-fees-costs .fees-card-two {
padding: 0;
}
.section-fees-costs .fees-card-three {
padding: 0;
}
.section-digital-support .support-member-one {
flex-wrap: nowrap;
padding: 0;
}
.section-digital-support .support-member-two {
flex-wrap: nowrap;
padding: 0;
}
.section-digital-support .support-member-three {
flex-wrap: nowrap;
padding: 0;
}
.section-digital-support .support-member-four {
flex-wrap: nowrap;
padding: 0;
}
}
@media (min-width: 768px) {
.section-legal-help.section-legal-help > .box-inner {
max-width: 1280px;
}
.section-legal-help .legal-intro {
width: 50%;
}
.section-legal-help .legal-benefits {
width: 50%;
}
.section-attorney-about .attorney-copy {
width: 50%;
}
.section-attorney-about .attorney-media {
width: 50%;
}
.section-legal-services.section-legal-services > .box-inner {
max-width: 1300px;
}
.section-fees-costs.section-fees-costs > .box-inner {
max-width: 1300px;
}
.section-digital-support.section-digital-support > .box-inner {
max-width: 1300px;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.section-legal-help.section-legal-help > .box-inner {
max-width: 940px;
}
.section-legal-services.section-legal-services > .box-inner {
max-width: 960px;
}
.section-legal-services .legal-service-column-one {
width: 50%;
}
.section-legal-services .legal-service-column-two {
width: 50%;
}
.section-legal-services .legal-service-column-three {
width: 50%;
}
.section-fees-costs.section-fees-costs > .box-inner {
max-width: 960px;
}
.section-digital-support.section-digital-support > .box-inner {
max-width: 960px;
}
}
@media (max-width: 992px) and (min-width: 768px) {
.section-legal-help.section-legal-help > .box-inner {
max-width: 920px;
}
.section-legal-help .legal-intro {
width: 100%;
}
.section-legal-help .legal-benefits {
width: 100%;
}
.section-attorney-about .attorney-copy {
width: 100%;
}
.section-attorney-about .attorney-media {
width: 100%;
}
.section-fees-costs .fees-card-one {
width: 50%;
}
.section-fees-costs .fees-card-two {
width: 50%;
}
.section-fees-costs .fees-card-three {
width: 50%;
}
.section-digital-support .support-member-one {
width: 50%;
}
.section-digital-support .support-member-two {
width: 50%;
}
.section-digital-support .support-member-three {
width: 50%;
}
.section-digital-support .support-member-four {
width: 50%;
}
}
/* ─── Grouped employment-law navigation ─────────────── */
.menu-item-arbeitsrecht {
position: relative;
}
/* Leading accent dot only for the active top-level item (moved from the old
trailing position to the front; sits inside the tab when "Arbeitsrecht" is
the active section). */
.menu-list > li.current > a,
.menu-list > li.current-menu-item > a,
.menu-list > li.current-menu-parent > a {
display: inline-flex;
align-items: center;
gap: 1rem;
}
.menu-list > li.current > a::before,
.menu-list > li.current-menu-item > a::before,
.menu-list > li.current-menu-parent > a::before {
content: "";
flex: 0 0 auto;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background: var(--clr-accent);
}
/* The marker now lives in front, so drop the old trailing current dot. */
.menu-list > li.current::after,
.menu-list > li.current-menu-parent::after,
.menu-list > li.current-menu-item::after {
display: none;
}
@media (min-width: 993px) {
.menu-item-arbeitsrecht {
--mega-menu-transition: none;
}
.menu-item-arbeitsrecht::before {
content: "";
position: absolute;
right: 0;
left: 0;
top: 100%;
height: 1rem;
}
.menu-item-arbeitsrecht > .mega-menu::before {
display: none;
}
/* Active tab: built from the mega-menu's own material — same dark bg, same
faint gray border and blur, square corners. The transparent border in the
closed state reserves space so nothing shifts on hover. */
.menu-item-arbeitsrecht > a {
position: relative;
z-index: 25;
padding: 0.9rem 1.6rem;
border: 1px solid transparent;
border-bottom: 0;
transition:
background-color var(--mega-menu-transition),
border-color var(--mega-menu-transition);
}
/* Connector: only a dark mask over the mega-menu top border. The tab's own
side borders end at the tab bottom, so no vertical lines bleed into the
panel. */
.menu-item-arbeitsrecht > a::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: -1;
height: var(--mega-menu-mask-height, 2px);
background: rgb(36 47 53);
opacity: 0;
pointer-events: none;
transition: none;
}
.menu-item-arbeitsrecht:hover > a,
.menu-item-arbeitsrecht:has( > a:focus-visible) > a,
.menu-item-arbeitsrecht:has(.mega-menu a:focus-visible) > a {
background: rgb(36 47 53);
border-color: rgb(163 169 171 / 0.16);
}
.menu-item-arbeitsrecht:hover > a::after,
.menu-item-arbeitsrecht:has( > a:focus-visible) > a::after,
.menu-item-arbeitsrecht:has(.mega-menu a:focus-visible) > a::after {
opacity: 1;
}
}
.submenu-toggle {
display: none;
padding: 0;
border: 0;
background: transparent;
color: currentColor;
cursor: pointer;
}
.mega-menu {
position: fixed;
top: var(--mega-menu-top, 10rem);
left: 50%;
z-index: 20;
display: block;
width: min(1300px, calc(100vw - 4rem));
padding: 4rem;
background: rgb(36 47 53);
border: 1px solid rgb(163 169 171 / 0.16);
opacity: 0;
pointer-events: none;
transform: translate(-50%, 1rem) scale(0.98);
transition: var(--mega-menu-transition);
}
.menu-item-arbeitsrecht:hover > .mega-menu,
.menu-item-arbeitsrecht:has( > a:focus-visible) > .mega-menu,
.menu-item-arbeitsrecht:has(.mega-menu a:focus-visible) > .mega-menu {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0) scale(1);
}
.mega-menu .menu-group-title {
margin: 0 0 1.8rem;
color: var(--clr-accent);
font-size: 1.4rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mega-menu .mega-menu-cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mega-menu .mega-menu-cols > .menu-group-list {
padding: 0 2rem;
}
.mega-menu .mega-menu-cols > .menu-group-list:first-child {
padding-left: 0;
}
.mega-menu .mega-menu-cols > .menu-group-list:last-child {
padding-right: 0;
}
.mega-menu .menu-group-list {
position: static;
display: grid;
row-gap: 0.2rem;
align-content: start;
width: 100%;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
opacity: 1;
pointer-events: inherit;
transform: none;
backdrop-filter: none;
}
.mega-menu .menu-group-list li {
display: block;
width: 100%;
margin: 0;
padding: 0;
white-space: normal;
}
.mega-menu .menu-group-list li::before,
.mega-menu .menu-group-list li::after {
display: none;
}
.mega-menu .menu-group-list a {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.65rem 0;
color: var(--clr-text-subtle);
font-size: 1.55rem;
line-height: 1.35;
}
.mega-menu .menu-group-list a::before {
content: "";
flex: 0 0 auto;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
background: var(--clr-accent);
}
.mega-menu .menu-group-list a:hover,
.mega-menu .menu-group-list .current-menu-item > a {
color: var(--clr-surface-light);
}
.invert .mega-menu {
background: rgb(243 247 248);
border-color: rgb(36 47 53 / 0.12);
}
.invert .mega-menu .menu-group-list a {
color: var(--clr-text-muted);
}
.invert .mega-menu .menu-group-list a:hover,
.invert .mega-menu .menu-group-list .current-menu-item > a {
color: var(--clr-dark);
}
@media (max-width: 992px) {
.top-panel .widget-content .mobile-menu {
align-items: stretch;
padding: 2.5rem 3rem 4rem;
text-align: left;
}
.mobile-menu nav,
.mobile-menu .menu-list,
.mobile-menu .menu-list > li {
align-items: stretch;
text-align: left;
}
.mobile-menu .menu-list > li {
position: relative;
margin-bottom: 0;
border-bottom: 1px solid rgb(163 169 171 / 0.14);
}
.mobile-menu .menu-list > li > a {
display: block;
width: 100%;
padding: 1.5rem 4.5rem 1.5rem 0;
text-align: left;
}
.submenu-toggle {
position: absolute;
top: 0.6rem;
right: 0;
z-index: 2;
display: grid;
width: 4.2rem;
height: 4.2rem;
place-items: center;
color: var(--clr-text-subtle);
}
.submenu-toggle i {
transition: transform 0.2s ease;
}
.submenu-open > .submenu-toggle i {
transform: rotate(180deg);
}
.mobile-menu .menu-item-arbeitsrecht > .mega-menu,
.mobile-menu .menu-item-arbeitsrecht:hover > .mega-menu,
.mobile-menu .menu-item-arbeitsrecht:focus-within > .mega-menu {
position: static;
display: grid;
grid-template-columns: 1fr;
width: 100%;
max-height: 0;
margin-top: 0;
padding: 0;
overflow: hidden;
border: 0;
background: transparent;
opacity: 1;
pointer-events: none;
transform: none;
transition:
max-height 0.3s ease,
padding 0.3s ease;
backdrop-filter: none;
}
.mobile-menu .menu-item-arbeitsrecht.submenu-open > .mega-menu,
.mobile-menu .menu-item-arbeitsrecht.submenu-open:hover > .mega-menu,
.mobile-menu .menu-item-arbeitsrecht.submenu-open:focus-within > .mega-menu {
max-height: 140rem;
margin-top: 0;
padding: 0.5rem 0 2rem;
pointer-events: auto;
transform: none;
}
.mega-menu .menu-group-title {
margin-bottom: 0.7rem;
text-align: left;
}
.mega-menu .mega-menu-cols {
display: block;
}
.mega-menu .mega-menu-cols > .menu-group-list {
padding: 0;
}
.mega-menu .mega-menu-cols > .menu-group-list + .menu-group-list {
border-left: 0;
}
.mega-menu .menu-group-list {
display: grid;
max-height: none !important;
margin: 0 !important;
overflow: visible;
text-align: left;
}
.mega-menu .menu-group-list li,
.mega-menu .menu-group-list li:first-child,
.mega-menu .menu-group-list li:last-child {
margin: 0;
text-align: left;
}
.mega-menu .menu-group-list a {
padding: 0.8rem 0;
font-size: 1.55rem !important;
line-height: 1.4;
text-align: left;
}
.invert .submenu-toggle {
color: var(--clr-dark);
}
}
/* ─── Global Header ─────────────────────────────────── */
.top-panel .header-inner {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
--row-gap: 0px;
--column-gap: 0px;
padding: 0 10rem;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.top-panel .header-logo-col {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.top-panel .header-logo {
width: 12rem;
max-width: 12rem;
}
.top-panel .header-logo .logo {
align-items: center;
}
.top-panel .header-logo .logo img {
height: 4rem;
width: auto;
}
.top-panel .header-nav-col {
display: flex;
align-items: flex-end;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.top-panel .header-nav {
width: 100%;
max-width: 100%;
text-align: left;
}
@media (min-width: 768px) {
.top-panel .header-logo-col {
width: 17rem;
}
.top-panel .header-nav-col {
width: calc(100% - 17rem);
}
}
/* Hamburger + mobile CTA: slightly larger circular buttons */
.open-mobile-menu,
.menu-btn {
width: 4.6rem !important;
height: 4.6rem !important;
}
/* Mobile/tablet-only icon CTA: collapses "Jetzt anfragen" to just the
envelope circle (the full text+icon button lives inside the desktop nav
and inside the off-canvas drawer, both hidden in this range). Sits to the
immediate left of the hamburger, same size and vertical position. */
.mobile-cta-btn {
display: none;
text-decoration: none;
}
@media (max-width: 992px) {
.mobile-cta-btn {
display: flex;
align-items: center;
justify-content: center;
float: right;
margin-right: 1.2rem;
width: 4.6rem;
height: 4.6rem;
border-radius: 50%;
background-color: var(--clr-accent);
color: var(--clr-dark);
font-size: 1.6rem;
line-height: 1;
}
.mobile-cta-btn i {
display: block;
line-height: 1;
}
}
@media (max-width: 1200px) {
.top-panel .header-inner {
padding: 0 10px;
}
}
@media (max-width: 992px) {
.top-panel .header-inner {
padding: 0 2rem;
}
.top-panel .header-nav-col {
align-items: center;
}
}
@media (max-width: 767px) {
.top-panel .header-inner {
justify-content: space-between;
align-items: center;
--row-gap: 0px;
--column-gap: 0px;
}
.top-panel .header-inner {
align-self: center;
}
.top-panel .header-logo-col {
width: 50%;
}
.top-panel .header-nav-col {
width: 50%;
align-items: flex-end;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.top-panel .header-inner {
width: 100% !important;
max-width: 960px;
margin: 0 auto;
}
}
/* ─── Global Footer ─────────────────────────────────── */
.footer .footer-upper {
display: flex;
flex-direction: column;
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.footer .footer-main {
display: flex;
flex-direction: row;
justify-content: space-between;
--row-gap: 0px;
--column-gap: 0px;
padding: 9rem 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.footer .footer-brand {
display: flex;
--row-gap: 0px;
--column-gap: 0px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.footer .footer-logo > .widget-content,
.footer .footer-logo > .widget-content {
margin: 0rem 0rem 4rem 0rem;
}
.footer .footer-logo .logo {
align-items: center;
}
.footer .footer-nav-col {
display: flex;
margin: 0 3% 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.footer .footer-nav {
text-align: left;
}
.footer .footer-links-col {
display: flex;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.footer .footer-secondary {
--row-gap: 0px;
--column-gap: 0px;
padding-left: 0rem;
padding-right: 0rem;
width: 100%;
display: flex;
flex-direction: column;
}
.footer .footer-secondary > .box-inner {
flex-direction: row;
justify-content: space-between;
padding-top: 9rem;
padding-bottom: 9rem;
}
.footer .footer-secondary {
background-color: var(--clr-surface-teal);
}
.footer .footer-social-group {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.footer .footer-social .social {
justify-content: flex-start;
}
.footer .footer-office {
display: flex;
margin: 0 3% 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.footer .footer-online {
display: flex;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.footer .footer-bottom {
padding-left: 0px;
padding-right: 0px;
width: 100%;
display: flex;
flex-direction: column;
}
.footer .footer-bottom > .box-inner {
flex-direction: column;
padding-top: 0px;
padding-bottom: 0px;
}
.footer .footer-bottom {
background-color: var(--clr-surface-light);
}
.footer .footer-bottom-row {
display: flex;
min-height: 10rem;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0;
z-index: 1;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.footer .footer-copyright-col {
display: flex;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.footer .footer-copyright {
color: var(--clr-text-muted);
}
.footer .footer-credits-col {
display: flex;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.footer .footer-credits {
text-align: end;
color: var(--clr-text-muted);
}
@media (min-width: 768px) {
.footer .footer-main > .box-inner {
max-width: 1300px;
}
.footer .footer-brand {
width: 62%;
}
.footer .footer-nav-col {
width: 17.5%;
}
.footer .footer-links-col {
width: 17.5%;
}
.footer .footer-secondary > .box-inner {
max-width: 1300px;
}
.footer .footer-social-group {
width: 62%;
}
.footer .footer-office {
width: 17.5%;
}
.footer .footer-online {
width: 17.5%;
}
.footer .footer-bottom > .box-inner {
max-width: 1300px;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.footer .footer-main > .box-inner {
max-width: 960px;
}
.footer .footer-secondary > .box-inner {
max-width: 960px;
}
.footer .footer-bottom > .box-inner {
max-width: 960px;
}
}
@media (max-width: 767px) {
.footer .footer-main {
padding: 10rem 2rem;
}
.footer .footer-brand {
margin: 0 0 5rem;
padding: 0;
}
.footer .footer-logo.widget,
.footer .footer-logo.widget {
align-self: center;
}
.footer .footer-nav-col {
margin: 0 0 5rem;
padding: 0;
}
.footer .footer-links-col {
margin: 0;
padding: 0;
}
.footer .footer-secondary {
padding-left: 2rem;
padding-right: 2rem;
}
.footer .footer-secondary > .box-inner {
padding-top: 10rem;
padding-bottom: 10rem;
}
.footer .footer-social-group {
--row-gap: 0px;
--column-gap: 0px;
padding: 0;
}
.footer .footer-social > .widget-content,
.footer .footer-social > .widget-content {
margin: 0rem 0rem 5rem 0rem;
}
.footer .footer-social .social {
justify-content: center;
}
.footer .footer-secondary-links > .widget-content,
.footer .footer-secondary-links > .widget-content {
margin: 0rem 0rem 5rem 0rem;
}
.footer .footer-office {
margin: 0;
padding: 0 0 5rem;
}
.footer .footer-online {
margin: 0;
padding: 0;
}
.footer .footer-bottom-row {
--row-gap: 0px;
--column-gap: 0px;
padding: 4rem 0;
}
.footer .footer-copyright-col {
margin: 0 0 2rem;
padding: 0;
}
.footer .footer-copyright.widget,
.footer .footer-copyright.widget {
align-self: center;
}
.footer .footer-credits-col {
padding: 0;
}
.footer .footer-credits {
text-align: center;
}
}
/* ─── Shared Section Patterns ─────────────────────────────── */
.section-hero-outer.section-hero-outer {
display: flex;
flex-direction: column;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.bg-top .hero-bg,
.bg-top .bg-img {
object-position: center 72% !important;
}
.section-hero-outer .hero-content .site-container {
max-width: 1300px;
margin: 0 auto;
padding: 0 10px;
}
.section-hero-outer .hero-content .tac {
text-align: left;
}
.section-hero-outer .hero-content .breadcrumbs.jcc {
justify-content: flex-start;
}
@media (max-width: 1200px) and (min-width: 768px) {
.section-hero-outer .hero-content .site-container {
max-width: 960px;
}
}
@media (max-width: 767px) {
.section-hero-outer .hero-content .site-container {
padding: 0 2rem;
}
}
.sticky-section.sticky-section {
padding-left: 0px;
padding-right: 0px;
width: 100%;
display: flex;
flex-direction: column;
}
.sticky-section.sticky-section > .box-inner {
flex-direction: row;
padding-top: 0px;
padding-bottom: 0px;
}
@media (min-width: 768px) {
.sticky-section.sticky-section > .box-inner {
max-width: 1280px;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.sticky-section.sticky-section > .box-inner {
max-width: 940px;
}
}
@media (max-width: 992px) {
.sticky-section.sticky-section {
padding-left: 0rem;
padding-right: 0rem;
}
.sticky-section.sticky-section > .box-inner {
flex-direction: column;
padding-top: 0rem;
padding-bottom: 0rem;
}
}
.sticky-part.sticky-part {
display: flex;
padding: 10rem 0;
overflow: hidden; /* angle::after clip — e-con default is visible, this restores it */ flex-direction: column; width: 100%; gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.sticky-part.sticky-part {
width: 50%;
}
}
@media (max-width: 992px) and (min-width: 768px) {
.sticky-part.sticky-part {
width: 100%;
}
}
@media (max-width: 992px) {
.sticky-part.sticky-part {
padding: 10rem 2rem 0;
}
}
.section-intro-text.section-intro-text {
display: flex;
padding: 0 25% 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 992px) {
.section-intro-text.section-intro-text {
padding-right: 0%;
}
}
.section-inner-content.section-inner-content {
display: flex;
padding: 0 0 0 10rem;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 992px) {
.section-inner-content.section-inner-content {
padding-left: 0rem;
}
}
/* ─── Home-5: Partners ────────────────────────────────────── */
.section-partners.section-partners {
display: flex;
flex-direction: column;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.section-partners.section-partners > .box-inner {
max-width: 1280px;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.section-partners.section-partners > .box-inner {
max-width: 940px;
}
}
@media (max-width: 992px) {
.section-partners.section-partners {
padding-left: 2rem;
padding-right: 2rem;
}
}
.partners-grid.partners-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(1, 1fr);
--row-gap: 0rem;
--column-gap: 2rem;
grid-auto-flow: row;
padding: 10rem 0 8rem;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.partners-grid.partners-grid {
align-self: center;
}
@media (max-width: 767px) {
.partners-grid.partners-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.section-partners .partners-grid .partner img {
height: 3.2rem;
}
/* ─── Service Pages ───────────────────────────────────────── */
.service-desc-widget.service-desc-widget {
width: 80%;
max-width: 80%;
}
@media (max-width: 992px) {
.service-desc-widget.service-desc-widget {
width: 100%;
max-width: 100%;
}
}
.service-counter > .widget-content {
margin: 0rem 0rem 4rem 0rem;
}
.service-right-col.service-right-col {
display: flex;
padding: 10rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.service-right-col.service-right-col {
width: 50%;
}
}
@media (max-width: 992px) and (min-width: 768px) {
.service-right-col.service-right-col {
width: 100%;
}
}
@media (max-width: 992px) {
.service-right-col.service-right-col {
padding-left: 2rem;
padding-right: 2rem;
}
}
.service-related-section.service-related-section {
padding-left: 0rem;
padding-right: 0rem;
background-color: var(--clr-surface-teal);
width: 100%;
display: flex;
flex-direction: column;
}
.service-related-section.service-related-section > .box-inner {
padding-top: 10rem;
padding-bottom: 8rem;
}
@media (min-width: 768px) {
.service-related-section.service-related-section > .box-inner {
max-width: 1300px;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.service-related-section.service-related-section > .box-inner {
max-width: 960px;
}
}
@media (max-width: 992px) {
.service-related-section.service-related-section {
padding-left: 2rem;
padding-right: 2rem;
}
.service-related-section.service-related-section > .box-inner {
flex-direction: column;
}
}
.service-related-header-row.service-related-header-row {
display: flex;
flex-direction: row;
margin: 0 0 5rem;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 1200px) {
.service-related-header-row.service-related-header-row {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 992px) {
.service-related-header-row.service-related-header-row {
flex-direction: column;
}
}
.service-related-portfolio-col.service-related-portfolio-col {
display: flex;
align-items: flex-end;
padding: 70px 10px 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 1200px) {
.service-related-portfolio-col.service-related-portfolio-col {
padding-top: 40px;
}
}
@media (max-width: 992px) {
.service-related-portfolio-col.service-related-portfolio-col {
padding-top: 40px;
padding-left: 20px;
padding-right: 0px;
}
}
@media (max-width: 767px) {
.service-related-portfolio-col.service-related-portfolio-col {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
}
}
.service-related-archive-col.service-related-archive-col {
display: flex;
padding: 0 10px;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 1200px) {
.service-related-archive-col.service-related-archive-col {
padding-left: 0;
padding-right: 0;
}
}
/* ─── FAQ Page ─────────────────────────────────────────────── */
.faq-section-row.faq-section-row {
display: flex;
flex-direction: row;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.faq-section-row.faq-section-row > .box-inner {
max-width: 1280px;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.faq-section-row.faq-section-row > .box-inner {
max-width: 940px;
}
}
@media (max-width: 992px) {
.faq-section-row.faq-section-row {
flex-direction: column;
}
}
.faq-sticky-col.faq-sticky-col {
display: flex;
padding: 10rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.faq-sticky-col.faq-sticky-col {
width: 50%;
}
}
@media (max-width: 992px) and (min-width: 768px) {
.faq-sticky-col.faq-sticky-col {
width: 100%;
}
}
@media (max-width: 992px) {
.faq-sticky-col.faq-sticky-col {
padding-left: 2rem;
padding-right: 2rem;
}
}
.faq-heading-widget.faq-heading-widget {
width: 320px;
max-width: 320px;
}
@media (max-width: 992px) {
.faq-heading-widget.faq-heading-widget {
width: 100%;
max-width: 100%;
}
}
.faq-desc-widget.faq-desc-widget {
width: 280px;
max-width: 280px;
}
@media (max-width: 992px) {
.faq-desc-widget.faq-desc-widget {
width: 100%;
max-width: 100%;
}
}
.faq-questions-col.faq-questions-col {
display: flex;
padding: 10rem 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.faq-questions-col.faq-questions-col {
width: 50%;
}
}
@media (max-width: 992px) and (min-width: 768px) {
.faq-questions-col.faq-questions-col {
width: 100%;
}
}
@media (max-width: 992px) {
.faq-questions-col.faq-questions-col {
padding: 0 2rem 10rem;
}
}
/* ─── Portfolio: Project Single ───────────────────────────── */
.project-content-row.project-content-row {
display: flex;
flex-direction: row;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.project-content-row.project-content-row > .box-inner {
max-width: 1280px;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.project-content-row.project-content-row > .box-inner {
max-width: 940px;
}
}
@media (max-width: 992px) {
.project-content-row.project-content-row {
flex-direction: column;
}
}
.project-sticky-col.project-sticky-col {
display: flex;
padding: 10rem 0 7rem;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.project-sticky-col.project-sticky-col {
width: 50%;
}
}
@media (max-width: 992px) and (min-width: 768px) {
.project-sticky-col.project-sticky-col {
width: 100%;
}
}
@media (max-width: 992px) {
.project-sticky-col.project-sticky-col {
padding: 10rem 2rem 8rem;
}
}
.project-content-col.project-content-col {
display: flex;
padding: 10rem 0 5rem;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.project-content-col.project-content-col {
width: 50%;
}
}
@media (max-width: 992px) and (min-width: 768px) {
.project-content-col.project-content-col {
width: 100%;
}
}
@media (max-width: 992px) {
.project-content-col.project-content-col {
padding: 0;
}
}
.project-content-header.project-content-header {
display: flex;
padding: 0 0 0 10rem;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 992px) {
.project-content-header.project-content-header {
padding: 0 2rem 7rem;
}
}
@media (max-width: 767px) {
.project-content-header.project-content-header {
flex-wrap: nowrap;
}
}
.project-image > .widget-content {
margin: 0rem 0rem 1rem 0rem;
}
.project-similar-section.project-similar-section {
display: flex;
flex-direction: column;
padding: 10rem 0 8rem;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.project-similar-section.project-similar-section {
background-color: var(--clr-surface-teal);
}
@media (min-width: 768px) {
.project-similar-section.project-similar-section > .box-inner {
max-width: 1300px;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.project-similar-section.project-similar-section > .box-inner {
max-width: 960px;
}
}
@media (max-width: 992px) {
.project-similar-section.project-similar-section {
padding-left: 2rem;
padding-right: 2rem;
}
}
.project-similar-row.project-similar-row {
display: flex;
flex-direction: row;
margin: 0 0 5rem;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 992px) {
.project-similar-row.project-similar-row {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 767px) {
.project-similar-row.project-similar-row {
flex-direction: column;
}
}
.project-similar-portfolio.project-similar-portfolio {
display: flex;
align-items: flex-end;
padding: 65px 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 992px) {
.project-similar-portfolio.project-similar-portfolio {
padding-top: 40px;
}
}
@media (max-width: 767px) {
.project-similar-portfolio.project-similar-portfolio {
padding-top: 0;
}
}
.project-grid-row.project-grid-row {
display: flex;
flex-direction: row;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 992px) {
.project-grid-row.project-grid-row {
padding-left: 0;
padding-right: 0;
}
}
/* ─── Arbeitsrecht (Services Page) ───────────────────────── */
.ar-services-section.ar-services-section {
display: flex;
padding: 10rem 0 8rem;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
.ar-services-section.ar-services-section {
background-color: var(--clr-surface-teal);
}
@media (min-width: 768px) {
.ar-services-section.ar-services-section > .box-inner {
max-width: 1300px;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.ar-services-section.ar-services-section > .box-inner {
max-width: 960px;
}
}
@media (max-width: 992px) {
.ar-services-section.ar-services-section {
flex-direction: column;
padding-left: 2rem;
padding-right: 2rem;
}
}
.ar-services-header-row.ar-services-header-row {
display: flex;
flex-direction: row;
margin-top: 0rem;
margin-bottom: 5rem;
padding: 0 10px;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 992px) {
.ar-services-header-row.ar-services-header-row {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 767px) {
.ar-services-header-row.ar-services-header-row {
flex-direction: column;
}
}
.ar-services-desc-col.ar-services-desc-col {
display: flex;
align-items: flex-end;
padding: 65px 10px 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 1200px) {
.ar-services-desc-col.ar-services-desc-col {
padding-top: 40px;
}
}
@media (max-width: 992px) {
.ar-services-desc-col.ar-services-desc-col {
padding-top: 40px;
padding-left: 20px;
padding-right: 0px;
}
}
@media (max-width: 767px) {
.ar-services-desc-col.ar-services-desc-col {
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
}
.ar-pricing-section.ar-pricing-section {
display: flex;
flex-direction: column;
padding: 10rem 0 8rem;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (min-width: 768px) {
.ar-pricing-section.ar-pricing-section > .box-inner {
max-width: 1300px;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.ar-pricing-section.ar-pricing-section > .box-inner {
max-width: 960px;
}
}
@media (max-width: 992px) {
.ar-pricing-section.ar-pricing-section {
padding-left: 2rem;
padding-right: 2rem;
}
}
.ar-pricing-header-row.ar-pricing-header-row {
display: flex;
flex-direction: row;
margin: 0 0 5rem;
padding: 0 1rem;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 992px) {
.ar-pricing-header-row.ar-pricing-header-row {
padding-left: 0;
padding-right: 0;
}
}
.ar-pricing-desc-col.ar-pricing-desc-col {
display: flex;
align-items: flex-end;
padding: 70px 0 0;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 767px) {
.ar-pricing-desc-col.ar-pricing-desc-col {
align-items: flex-start;
padding-top: 0;
}
}
.ar-pricing-btns > .widget-content {
margin: -2rem 0rem 0rem 0rem;
}
.ar-pricing-btns .btns {
text-align: left;
}
.ar-pricing-cards-row.ar-pricing-cards-row {
display: flex;
flex-direction: row;
padding: 0;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 992px) {
.ar-pricing-cards-row.ar-pricing-cards-row {
flex-wrap: wrap;
}
}
.ar-pricing-card.ar-pricing-card {
display: flex;
padding: 0 1rem;
flex-direction: column;
width: 100%;
gap: var(--row-gap, 20px) var(--column-gap, 20px);
}
@media (max-width: 992px) and (min-width: 768px) {
.ar-pricing-card.ar-pricing-card {
width: 50%;
}
}
@media (max-width: 992px) {
.ar-pricing-card.ar-pricing-card {
padding-left: 0;
padding-right: 10px;
}
}
@media (max-width: 767px) {
.ar-pricing-card.ar-pricing-card {
padding-left: 0;
padding-right: 0;
}
}
/* ─── Alternate Footer (FAQ + Privacy-Policy) ─────────── */
/* ─── Equal-height related-service cards ───────────────────────────────── */
#weitere-themen .row {
align-items: stretch;
}
#weitere-themen [class*="col-"] {
display: flex;
flex-direction: column;
}
#weitere-themen .large-card {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
}
#weitere-themen .card {
flex: 1;
}
.service-related-section .row {
align-items: stretch;
}
.service-related-section .row > [class*="col-"] {
display: flex;
flex-direction: column;
}
.service-related-section .large-card {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
}
.service-related-section .large-card > .card {
display: flex;
flex: 1;
flex-direction: column;
}
.badge {
color: var(--clr-white);
}
/* h6 visual class for non-heading elements (e.g. ) */
.check-list li .h6,
.check-list.type-2 li .h6 {
padding-left: 4rem;
}
.h6 {
display: block;
font-size: clamp(14.4px, calc(13.87px + 0.15vw), 16.2px);
line-height: 120%;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--clr-dark);
}
/* .h6's own color beats color utilities (.c-m-4 etc.) on source order since
both are single classes — rescope here for .h6 used on dark surfaces. */
.counter-box .h6 {
color: var(--clr-surface-teal);
}
/* ═══ Dark Footer Redesign ═══════════════════════════════════════════════ */
/* -- backgrounds ---------------------------------------------------------- */
.footer .footer-secondary {
background-color: var(--clr-dark);
}
.footer .footer-bottom {
background-color: #1c272d;
}
/* -- socials in brand col ------------------------------------------------- */
.footer .footer-socials {
display: flex;
gap: 1.8rem;
margin: 0;
padding: 0;
list-style: none;
}
.footer .footer-socials a {
color: rgba(255, 255, 255, 0.4);
font-size: 1.8rem;
transition: color 0.2s;
}
.footer .footer-socials a:hover {
color: var(--clr-white);
}
.footer .footer-social {
margin-top: 3rem;
}
/* -- footer-secondary: logo + nav + legal + contact ----------------------- */
.footer .footer-secondary > .box-inner {
padding-top: 7rem;
padding-bottom: 7rem;
}
.footer .footer-secondary > .box-inner {
align-items: flex-start;
}
.footer .footer-brand {
flex: 1.6 !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.footer .footer-nav-col,
.footer .footer-links-col,
.footer .footer-office {
flex: 1 !important;
flex-direction: column !important;
align-items: flex-start !important;
margin-left: 0;
margin-right: 0;
}
.footer-col-title {
color: var(--clr-text-subtle);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 2rem !important;
}
.footer .footer-tagline .widget-content p,
.footer .footer-tagline .widget-content p {
color: var(--clr-text-subtle);
margin-top: 1.8rem;
}
/* unified col content — links, list items, plain paragraphs */
.footer .footer-secondary .footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer .footer-secondary .footer-links li {
margin: 0;
padding: 0;
}
.footer .footer-secondary .footer-links li span {
pointer-events: none;
}
.footer .footer-secondary .footer-links a,
.footer .footer-secondary .footer-office .widget-content p:not(.footer-col-title),
.footer .footer-secondary .footer-office .widget-content p:not(.footer-col-title) {
color: var(--clr-text-subtle);
font-weight: 400;
line-height: 1.9;
text-decoration: none;
display: block;
padding: 0;
margin-top: 1rem;
transition: color 0.2s;
}
.footer .footer-secondary .footer-links a:hover {
color: var(--clr-white);
}
.footer .footer-contact-list {
display: flex;
flex-direction: column;
gap: 1.05rem;
margin-top: 1rem;
}
.footer .footer-contact-value {
color: var(--clr-text-subtle);
line-height: 1.6;
text-decoration: none;
overflow-wrap: anywhere;
transition: color 0.2s;
}
.footer a.footer-contact-value:hover {
color: var(--clr-white);
}
/* -- footer-bottom: dark copyright bar ------------------------------------ */
.footer .footer-copyright {
color: var(--clr-text-subtle) !important;
}
.footer .footer-credits {
color: var(--clr-text-subtle) !important;
}
.footer .footer-credits a.text-link,
.footer .footer-copyright a.text-link {
color: var(--clr-text-subtle);
text-decoration: none;
transition: color 0.2s;
}
.footer .footer-credits a.text-link + a.text-link,
.footer .footer-copyright a.text-link + a.text-link {
margin-left: 2.8rem;
}
.footer .footer-credits a.text-link:hover,
.footer .footer-copyright a.text-link:hover {
color: var(--clr-white);
}
/* -- footer-secondary: stack columns on mobile -----------------------------
The 4 columns (brand/nav/links/office) get flex: 1.6/1 !important above,
which sizes them by flex-grow at every viewport — the original Elementor
--width vars no longer apply, so they never wrapped into a single column
on narrow screens, just got squeezed (causing the hyphenated text mess).
Switch the row to a column stack below the tablet breakpoint instead. */
@media (max-width: 767px) {
.footer .footer-secondary > .box-inner {
flex-direction: column;
}
.footer .footer-brand,
.footer .footer-nav-col,
.footer .footer-links-col,
.footer .footer-office {
flex: 1 1 100% !important;
width: 100% !important;
margin-bottom: 4rem;
}
.footer .footer-office {
margin-bottom: 0;
}
.footer .footer-logo.widget {
align-self: flex-start;
}
}
/* ── Off-canvas panel: text color & contact block ───────────────────────── */
.info-window-open {
overflow: hidden !important;
overscroll-behavior: none;
}
.info-window-frame {
overflow: hidden;
}
.info-window-frame .info-window {
color: var(--clr-white);
width: min(60rem, 100vw);
height: 100dvh !important;
max-height: 100dvh !important;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
}
.info-window-frame .info-window strong.h6 {
color: var(--clr-white);
}
/* On mobile/tablet the drawer covers the viewport; its inner padding keeps
the form clear of the 10rem navbar. */
@media (max-width: 992px) {
.info-window-frame,
.info-window-frame.static,
.info-window-frame.scroll {
top: 0;
height: 100dvh;
}
.info-window-frame.scroll .info-window {
height: 100dvh;
}
/* Keep the form below the mobile navbar while the drawer itself covers the
entire viewport. Native overflow keeps every field reachable on touch. */
.info-window-frame .info-window {
width: 100vw;
max-width: none;
height: 100dvh !important;
max-height: 100dvh !important;
padding: 11.5rem 2.4rem calc(4rem + env(safe-area-inset-bottom));
border-left: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
touch-action: pan-y;
scrollbar-gutter: auto;
}
}
.panel-contacts {
display: flex;
flex-direction: column;
gap: 1.35rem;
}
.panel-contact-value {
min-width: 0;
font-weight: inherit;
line-height: 1.45;
color: var(--clr-white);
transition: color 0.2s;
overflow-wrap: anywhere;
text-decoration: none;
}
a.panel-contact-value:hover {
color: var(--clr-accent);
}
.panel-sep {
height: 1px;
background: var(--clr-dark-mid);
}
/* ── Off-canvas Anfrageformular ─────────────────────────────────────────── */
.contact-form {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
margin-top: 1.5rem;
}
.cf-form-intro {
margin: 0 0 1.5rem;
color: var(--clr-text-subtle);
font-size: 1.5rem;
line-height: 1.55;
}
.cf-progress {
margin-bottom: 1rem;
}
.cf-progress-meta {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.7rem;
color: var(--clr-text-subtle);
font-size: 1.05rem;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cf-progress-label {
color: var(--clr-accent);
font-weight: 700;
}
.cf-progress-track {
height: 3px;
overflow: hidden;
background: rgb(255 255 255 / 0.1);
}
.cf-progress-track span {
display: block;
width: 0;
height: 100%;
background: var(--clr-accent);
transition: width 0.25s ease;
}
.cf-section {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
padding: 2rem 0 0;
border: 0;
}
.cf-section.is-active-step {
animation: cf-step-in 0.2s ease-out;
}
@keyframes cf-step-in {
from {
opacity: 0;
transform: translateY(0.6rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cf-section:first-of-type {
border-top: 0;
padding-top: 0;
}
.cf-section > legend,
.cf-section > h3 {
display: flex;
flex-direction: row-reverse;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
width: 100%;
margin: 0 0 1.4rem;
padding: 0;
color: var(--clr-white);
font-size: 1.65rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
}
.cf-section > legend span,
.cf-section > h3 span {
flex: 0 0 auto;
color: var(--clr-accent);
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: none;
text-align: right;
}
.cf-section[hidden],
[data-cf-deadline][hidden] {
display: none !important;
}
.cf-field-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
width: 100%;
padding: 1.2rem 1.8rem;
background: var(--clr-dark-mid);
border: none;
border-radius: 0;
color: var(--clr-white);
font-size: inherit;
font-family: inherit;
line-height: 1.4;
outline: none;
transition: box-shadow 0.2s;
-webkit-appearance: none;
appearance: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: var(--clr-text-subtle);
}
.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus,
.contact-form textarea:-webkit-autofill,
.contact-form select:-webkit-autofill {
-webkit-text-fill-color: var(--clr-white);
caret-color: var(--clr-white);
box-shadow: 0 0 0 1000px var(--clr-dark-mid) inset;
transition: background-color 9999s ease-out;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
box-shadow: inset 0 -2px 0 var(--clr-accent);
}
.contact-form textarea {
resize: none;
min-height: 7rem;
}
.contact-form .form-check {
position: relative;
margin-top: 0.2rem;
}
.contact-form .form-check input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.contact-form .form-field {
position: relative;
}
.contact-form select {
min-height: 5.4rem;
padding: 2.25rem 4.5rem 0.65rem 1.8rem;
cursor: pointer;
}
.cf-select-field::after {
content: "\f078";
position: absolute;
top: 50%;
right: 1.8rem;
color: var(--clr-accent);
font-family: "Font Awesome 5 Free";
font-weight: 900;
pointer-events: none;
transform: translateY(-50%);
}
.cf-select-label {
position: absolute;
top: 0.45rem;
left: 1.8rem;
color: var(--clr-text-subtle);
font-size: 1rem;
line-height: 1.15;
letter-spacing: 0.05em;
text-transform: uppercase;
pointer-events: none;
}
.cf-field-help {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 1.4rem 0 1rem;
color: var(--clr-text-subtle);
font-size: 1.3rem;
line-height: 1.45;
text-align: left;
}
.cf-field-help i {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
color: var(--clr-accent);
font-size: 1.2rem;
line-height: 1;
}
.contact-form .form-field input,
.contact-form .form-field textarea {
padding-top: 2.2rem;
padding-bottom: 0.8rem;
}
.cf-label {
position: absolute;
left: 1.8rem;
top: 1.35rem;
font-size: 1.6rem;
font-weight: inherit;
color: var(--clr-text-subtle);
pointer-events: none;
transition:
top 0.18s ease,
font-size 0.18s ease,
letter-spacing 0.18s ease,
color 0.18s ease;
}
.contact-form .form-field input:focus + .cf-label,
.contact-form .form-field input:not(:placeholder-shown) + .cf-label,
.contact-form .form-field textarea:focus + .cf-label,
.contact-form .form-field textarea:not(:placeholder-shown) + .cf-label {
top: 0.6rem;
font-size: 1rem;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.contact-form .form-field input[type="date"] + .cf-date-label {
top: 0.6rem;
font-size: 1rem;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.contact-form input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
opacity: 0.75;
cursor: pointer;
}
.cf-question-label {
margin: 0;
color: var(--clr-text-subtle);
font-size: 1.25rem;
line-height: 1.45;
}
.cf-inline-options {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cf-inline-options--stacked {
grid-template-columns: 1fr;
}
.cf-inline-options label {
position: relative;
cursor: pointer;
}
.cf-inline-options input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cf-inline-options span {
display: block;
min-height: 4.2rem;
padding: 1.15rem 1.3rem 1.15rem 3.8rem;
border: 1px solid rgb(255 255 255 / 0.14);
background: var(--clr-dark-mid);
color: var(--clr-white);
font-size: 1.2rem;
line-height: 1.35;
}
.cf-inline-options span::before {
content: "";
position: absolute;
top: 50%;
left: 1.3rem;
width: 1.5rem;
height: 1.5rem;
border: 1.5px solid var(--clr-text-subtle);
transform: translateY(-50%);
border-radius: 50%;
}
.cf-inline-options input:checked + span {
border-color: var(--clr-accent);
}
.cf-inline-options input:checked + span::before {
border-color: var(--clr-accent);
background: var(--clr-accent);
box-shadow: inset 0 0 0 3px var(--clr-dark-mid);
}
.cf-inline-options input:focus-visible + span {
outline: 2px solid var(--clr-accent);
outline-offset: 2px;
}
.cf-warning {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 1rem;
padding: 1.4rem;
border-left: 3px solid var(--clr-accent);
background: rgb(242 167 61 / 0.09);
color: var(--clr-white);
}
.cf-warning i {
margin-top: 0.25rem;
color: var(--clr-accent);
}
.cf-warning p {
margin: 0;
font-size: 1.2rem;
line-height: 1.5;
}
.cf-warning.is-active {
border-left-color: var(--clr-success);
background: rgb(121 185 138 / 0.1);
}
.cf-warning.is-active i {
color: var(--clr-success);
}
.cf-warning.is-expired,
.cf-warning.is-invalid {
border-left-color: var(--clr-danger);
background: rgb(224 88 79 / 0.1);
}
.cf-warning.is-expired i,
.cf-warning.is-invalid i {
color: var(--clr-danger);
}
.cf-group-error {
margin: 0;
color: var(--clr-danger);
font-size: 1.15rem;
}
.cf-legal-final {
margin-top: 0.5rem;
padding-bottom: 0;
}
.cf-step-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 0.7rem;
padding-top: 1.2rem;
border-top: 1px solid rgb(255 255 255 / 0.1);
}
.cf-step-nav:has(.cf-step-next:only-child) {
justify-content: flex-end;
}
.cf-step-back {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 1rem 0;
border: 0;
background: transparent;
color: var(--clr-text-subtle);
font: inherit;
font-size: 1.2rem;
cursor: pointer;
}
.cf-step-back:hover,
.cf-step-back:focus-visible {
color: var(--clr-white);
}
.cf-step-next {
min-width: 12rem;
justify-content: space-between;
}
@media (min-width: 560px) {
.cf-field-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.cf-section.is-active-step {
animation: none;
}
.cf-progress-track span {
transition: none;
}
}
.contact-form .form-field input:focus + .cf-label,
.contact-form .form-field textarea:focus + .cf-label {
color: var(--clr-accent);
}
.contact-form .form-check label {
display: block;
padding-left: 2.2rem;
position: relative;
font-size: 1.5rem;
line-height: 1.5;
cursor: pointer;
}
.contact-form .form-check label::before {
content: "";
position: absolute;
left: 0;
top: 0.35rem;
width: 1.6rem;
height: 1.6rem;
border: 1.5px solid var(--clr-text-subtle);
background: transparent;
opacity: 0.8;
transition:
border-color 0.15s,
opacity 0.15s;
}
.contact-form .form-check label::after {
content: "";
position: absolute;
left: 0.45rem;
top: 0.8rem;
width: 0.7rem;
height: 0.7rem;
background: var(--clr-accent);
opacity: 0;
transition: opacity 0.15s;
}
.contact-form .form-check input[type="checkbox"]:checked + label::before {
border-color: var(--clr-accent);
opacity: 1;
}
.contact-form .form-check input[type="checkbox"]:checked + label::after {
opacity: 1;
}
.contact-form .form-check label a {
color: var(--clr-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.contact-form .form-check label a:hover {
color: var(--clr-white);
}
/* ── Off-canvas Anfrageformular: Datei-Upload (Drag & Drop) ─────────────── */
.cf-dropzone {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 2rem 1.8rem;
background: var(--clr-dark-mid);
border: 1.5px dashed var(--clr-text-subtle);
text-align: center;
cursor: pointer;
transition:
border-color 0.2s,
background-color 0.2s;
}
.cf-dropzone-icon {
font-size: 1.8rem;
color: var(--clr-text-subtle);
transition: color 0.2s;
}
.cf-dropzone-text {
font-size: 1.4rem;
color: var(--clr-white);
}
.cf-dropzone-browse {
color: var(--clr-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.cf-dropzone-hint {
font-size: 1.4rem;
line-height: 1.2;
color: var(--clr-text-subtle);
}
.cf-dropzone:hover,
.cf-dropzone.dragover {
border-color: var(--clr-accent);
}
.cf-dropzone.dragover .cf-dropzone-icon {
color: var(--clr-accent);
}
.cf-dropzone.has-file {
display: none;
}
.cf-dropzone.has-error {
border-color: var(--clr-danger);
}
.cf-dropzone--compact {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 1.2rem;
padding: 1.2rem 1.6rem;
text-align: left;
}
.cf-dropzone--compact .cf-dropzone-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.cf-dropzone--compact .cf-dropzone-hint {
color: var(--clr-text-muted);
}
.form-field-upload {
position: relative;
}
.cf-file-preview {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 1rem 1.6rem;
background: var(--clr-dark-mid);
color: var(--clr-white);
}
.cf-file-preview[hidden] {
display: none !important;
}
.cf-file-icon {
color: var(--clr-accent);
flex-shrink: 0;
}
.cf-file-name {
flex: 1;
min-width: 0;
font-size: 1.3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cf-file-size {
flex-shrink: 0;
font-size: 1.2rem;
color: var(--clr-text-subtle);
}
.cf-file-remove {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
background: transparent;
border: none;
color: var(--clr-text-subtle);
cursor: pointer;
transition: color 0.2s;
}
.cf-file-remove:hover {
color: var(--clr-accent);
}
.cf-file-error {
margin: 0.8rem 0 0;
font-size: 1.2rem;
color: var(--clr-danger);
}
/* ── Off-canvas Anfrageformular: Honeypot (anti-spam, hidden from humans) ── */
.cf-hp {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
left: -9999px;
}
/* ── Off-canvas Anfrageformular: Sende-Feedback ──────────────────────────── */
.cf-form-message {
padding: 1.2rem 1.6rem;
font-size: 1.3rem;
line-height: 1.5;
border-left: 3px solid var(--clr-accent);
background: var(--clr-dark-mid);
color: var(--clr-white);
}
.cf-form-message[hidden] {
display: none !important;
}
.cf-form-message.is-success {
border-left-color: var(--clr-accent);
}
.cf-form-message.is-error {
border-left-color: var(--clr-danger);
}
/* Datenschutz page */
/* Hervorgehobene Rechte-Kaesten: Widerruf (Art. 7 DSGVO) und
Widerspruch (Art. 21 DSGVO) nutzen dasselbe Markup und dieselbe Optik. */
.privacy-objection-box {
margin: 4rem 0;
padding: 3.2rem;
border-left: 4px solid var(--clr-accent);
background: var(--clr-surface-teal);
color: var(--clr-dark);
}
.privacy-objection-box .privacy-objection-label {
display: inline-flex;
align-items: center;
min-height: 2.8rem;
margin: 0 0 1.6rem;
padding: 0.4rem 1.2rem;
border-radius: 999px;
background: var(--clr-dark);
color: var(--clr-white);
font-size: 1.3rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.privacy-objection-box h3 {
margin-top: 0;
}
.privacy-objection-box p:last-child {
margin-bottom: 0;
}
@media (max-width: 767px) {
.privacy-objection-box {
padding: 2.4rem;
}
}
.imprint-placeholder {
display: inline;
color: var(--clr-dark);
font-weight: 700;
}
#impressum.section-contact-details .contact-details-sidebar,
#impressum.section-contact-details .contact-details-main {
width: 50%;
}
#impressum.section-contact-details .contact-details-sidebar-inner {
padding-right: 8rem;
}
#impressum.section-contact-details .contact-details-main-inner {
padding-left: 8rem;
}
/* Hero: constrain text column width fluidly */
.section-hero-crisis .hero-content .row {
justify-content: space-between;
}
.section-hero-crisis .col-lg-7 {
max-width: min(100%, clamp(44rem, 55vw, 88rem));
}
.section-hero-crisis .el-subtitle {
display: flex;
align-items: center;
gap: 0.8rem;
}
.section-hero-crisis .el-subtitle svg {
display: block;
flex: 0 0 auto;
transform: translateY(-0.1rem);
}
.section-hero-crisis .el-text {
font-size: clamp(1.7rem, 1.9vw, 2.1rem);
font-weight: 500;
max-width: 58rem;
}
/* Hero: counter boxes right-aligned, capped width */
.section-hero-crisis .col-lg-5 {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left: auto;
}
.section-hero-crisis .counter-box {
width: 100%;
max-width: 48rem;
}
@media (max-width: 991px) {
.section-hero-crisis .col-lg-5 {
align-items: stretch;
margin-left: 0;
}
.section-hero-crisis .counter-box {
max-width: 100%;
}
}
/* Hero: scroll indicator inline with CTA button */
.hero-btns {
display: flex;
align-items: center;
}
.hero-scroll-inline {
margin-left: 0;
flex-shrink: 0;
flex-direction: row;
align-items: center;
gap: 1.2rem;
width: auto;
margin-right: 2.5rem;
}
.hero-scroll-inline .mouse {
margin-bottom: 0;
flex-shrink: 0;
}
.hero-scroll-inline div:last-child {
color: rgba(255, 255, 255, 0.65);
font-size: 1.3rem;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
/* Tag cloud */
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.tag-cloud span,
.tag-cloud a {
display: inline-block;
padding: 0.8rem 1.6rem;
border-radius: 10rem;
background-color: var(--clr-surface-teal);
color: var(--clr-text-muted);
font-family: inherit;
font-size: 1.6rem;
font-weight: 500;
line-height: 1;
white-space: nowrap;
text-decoration: none;
transition:
background-color 0.2s,
color 0.2s;
}
.tag-cloud a:hover {
background-color: var(--clr-accent);
color: var(--clr-dark);
}
/* Headline spacing — tighten mb-5 on heading elements */
h1.mb-5,
h2.mb-5,
h3.mb-5,
h4.mb-5,
h5.mb-5,
h6.mb-5 {
margin-bottom: 2rem;
}
/* Check-list icon: smaller + vertically centered */
.check-list li::before {
font-size: 1.1rem;
vertical-align: middle;
}
/* Legal-benefit-cards: mobile fix */
@media (max-width: 767px) {
.section-legal-help .legal-benefits {
padding-top: 2.5rem;
}
.section-legal-help .legal-benefit-grid {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.legal-benefit-card {
min-height: 0 !important;
padding: 2rem !important;
text-align: left !important;
align-items: flex-start !important;
margin-bottom: 1.5rem;
background-color: var(--clr-white) !important;
}
.section-legal-help .legal-benefit-card .w-80 {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
}
/* Legal-help section: constrain width at mid-desktop to add side margins */
@media (min-width: 1201px) and (max-width: 1440px) {
.section-legal-help.section-legal-help > .box-inner {
max-width: 1080px;
}
}
.contact-form .btn {
margin-top: 1.6rem;
width: 100%;
justify-content: space-between;
}
/* ═══ Full-Width Map Section ═══════════════════════════════════════════════ */
.section-map-full {
position: relative;
z-index: 1;
width: 100%;
height: 520px;
overflow: hidden;
background: var(--clr-surface-light);
}
@media (max-width: 767px) {
.section-map-full {
height: 360px;
}
}
#kanzlei-map {
width: 100%;
height: 100%;
}
/* Zoom controls — flat design */
.leaflet-bar {
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
.leaflet-bar a {
background-color: var(--clr-dark-mid) !important;
color: var(--clr-surface-light) !important;
border-radius: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
outline: none !important;
font-weight: 400;
transition:
background-color 0.2s,
color 0.2s;
}
.leaflet-bar a:last-child {
border-bottom: none !important;
}
.leaflet-bar a:hover {
background-color: var(--clr-accent) !important;
color: var(--clr-dark) !important;
}
/* Attribution */
.leaflet-control-attribution {
background: rgba(36, 47, 53, 0.85) !important;
color: var(--clr-text-subtle) !important;
font-size: 1.1rem !important;
backdrop-filter: blur(4px);
}
.leaflet-control-attribution a {
color: var(--clr-accent) !important;
}
.leaflet-control-attribution .leaflet-attribution-flag {
display: none !important;
}
/* Popup */
.leaflet-popup-content-wrapper,
.map-popup-zink .leaflet-popup-content-wrapper {
background: var(--clr-dark);
color: var(--clr-surface-light);
border-radius: 0;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 0;
}
.leaflet-popup-content-wrapper .leaflet-popup-content {
margin: 1.6rem 2rem;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.5rem;
line-height: 1.6;
}
.leaflet-popup-content strong {
color: var(--clr-accent);
display: block;
margin-bottom: 0.4rem;
font-size: 1.4rem;
letter-spacing: 0.03em;
}
.leaflet-popup-tip-container .leaflet-popup-tip {
background: var(--clr-dark);
box-shadow: none;
}
.leaflet-popup-close-button {
display: none;
}
/* Custom marker: no default leaflet icon shadow */
.map-marker-custom {
background: none !important;
border: none !important;
}
/* Address badge overlay (top-right) */
.map-overlay-badge {
position: absolute;
top: 2.4rem;
right: 2.4rem;
z-index: 500;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 1.6rem 2rem;
background: var(--clr-dark);
border-left: 3px solid var(--clr-accent);
border-radius: 0;
pointer-events: none;
}
.map-badge-label {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--clr-accent);
}
.map-badge-address {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.4rem;
color: var(--clr-surface-light);
line-height: 1.5;
}
@media (max-width: 480px) {
.map-overlay-badge {
top: 1.4rem;
right: 1.4rem;
padding: 1.2rem 1.6rem;
}
}
/* =====================================================================
Post-de-scaffold overrides
===================================================================== */
.section-hero-outer.hero-inner {
flex-direction: row;
gap: normal;
padding: 14rem 0;
}
@media (max-width: 992px) {
.section-hero-outer.hero-inner { padding: 10rem 0; }
}