@charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mukta+Malar:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Yuji+Mai&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
}
hr {
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: auto;
margin-inline-end: auto;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
border: none;
}
a {
color: #000000;
}
strong {
font-weight: bold !important;
*{
font-weight: bold !important;
}
} ul[class],
ol[class] {
padding: 0;
} body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
} body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}  a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
} img {
max-width: 100%;
display: block;
} article > * + * {
margin-top: 1em;
} input,
button,
textarea,
select {
font: inherit;
}
a {
text-decoration: none;
} @media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@font-face {
font-family: "SF Pro Display";
src: url(//dental-familie.de/wp-content/themes/dental-familie/fonts/SFPRODISPLAYBLACKITALIC.woff2) format("woff2");
font-weight: 900; font-style: italic;
}
@font-face {
font-family: "SF Pro Display";
src: url(//dental-familie.de/wp-content/themes/dental-familie/fonts/SFPRODISPLAYBOLD.woff2) format("woff2");
font-weight: 700; font-style: normal;
}
@font-face {
font-family: "SF Pro Display";
src: url(//dental-familie.de/wp-content/themes/dental-familie/fonts/SFPRODISPLAYHEAVYITALIC.woff2) format("woff2");
font-weight: 800; font-style: italic;
}
@font-face {
font-family: "SF Pro Display";
src: url(//dental-familie.de/wp-content/themes/dental-familie/fonts/SFPRODISPLAYLIGHTITALIC.woff2) format("woff2");
font-weight: 300; font-style: italic;
}
@font-face {
font-family: "SF Pro Display";
src: url(//dental-familie.de/wp-content/themes/dental-familie/fonts/SFPRODISPLAYMEDIUM.woff2) format("woff2");
font-weight: 500; font-style: normal;
}
@font-face {
font-family: "SF Pro Display";
src: url(//dental-familie.de/wp-content/themes/dental-familie/fonts/SFPRODISPLAYREGULAR.woff2) format("woff2");
font-weight: 400; font-style: normal;
}
@font-face {
font-family: "SF Pro Display";
src: url(//dental-familie.de/wp-content/themes/dental-familie/fonts/SFPRODISPLAYSEMIBOLDITALIC.woff2) format("woff2");
font-weight: 600; font-style: italic;
}
@font-face {
font-family: "SF Pro Display";
src: url(//dental-familie.de/wp-content/themes/dental-familie/fonts/SFPRODISPLAYTHINITALIC.woff2) format("woff2");
font-weight: 100; font-style: italic;
}
@font-face {
font-family: "SF Pro Display";
src: url(//dental-familie.de/wp-content/themes/dental-familie/fonts/SFPRODISPLAYULTRALIGHTITALIC.woff2) format("woff2");
font-weight: 200; font-style: italic;
}
@keyframes l20-1 {
0% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
}
12.5% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
}
25% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
}
50% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
}
62.5% {
clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
}
75% {
clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
}
100% {
clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
}
}
@keyframes l20-2 {
0% {
transform: scaleY(1) rotate(0deg);
}
49.99% {
transform: scaleY(1) rotate(135deg);
}
50% {
transform: scaleY(-1) rotate(0deg);
}
100% {
transform: scaleY(-1) rotate(-135deg);
}
}
@keyframes btn-scale {
0% {
scale: 0;
opacity: 1;
}
30% {
scale: 0.8;
}
100% {
scale: 1;
opacity: 0;
}
}
.loader-container {
position: fixed;
inset: 0;
z-index: 999;
background-color: #ffffff;
display: grid;
place-content: center;
}
.loader-container .loader {
width: 50px;
height: 50px;
aspect-ratio: 1;
border-radius: 50%;
border: 8px solid #5F7B1E;
animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
}
@keyframes bounce {
0% {
transform: translateY(0%);
}
30% {
transform: translateY(-15%);
}
60% {
transform: translateY(0%);
}
70% {
transform: translateY(-7%);
}
80% {
transform: translateY(0%);
}
90% {
transform: translateY(-3%);
}
100% {
transform: translateY(0);
}
}
@keyframes infinite-scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes appear-from-top {
0% {
transform: translateY(-100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.wpforms-container {
margin: 0 !important;
}
* {
transition: 0.4s;
}
html {
font-family: "SF Pro Display";
width: 100%;
max-width: 100vw;
overflow-x: hidden;
font-size: 16px;
}
@media (max-width: 1300px) {
html {
font-size: 14px;
}
}
body {
position: relative;
}
a,
p,
li {
font-size: 1rem;
line-height: 150%;
font-weight: 300;
color: #6e6e6e;
letter-spacing: 0.5px;
}
img {
-o-object-fit: cover;
object-fit: cover;
}
.pagination {
position: relative !important;
display: flex;
box-shadow: none;
justify-content: center;
gap: 0.5rem;
}
.pagination span {
width: 20px;
height: 20px;
border: 1px solid #5F7B1E;
border-radius: 50%;
}
.pagination .swiper-pagination-bullet {
border: 3px solid #5F7B1E;
background: none;
}
.pagination .swiper-pagination-bullet-active {
background: #5F7B1E;
} .body-no-scroll {
overflow: hidden !important;
height: 100vh !important;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
min-height: 100vh;
}
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: clip;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
header,
main,
footer {
width: 100%;
}
.section-dflt .container {
gap: 3rem;
}
@media (max-width: 1100px) {
.section-dflt .container {
gap: 2rem;
}
}
@media (max-width: 768px) {
.section-dflt .container {
gap: 1rem;
}
}
.container {
display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
padding: 0 1rem;
max-width: 1440px;
}
h1 {
color: #000000;
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 600;
}
@media (max-width: 1300px) {
h1 {
font-size: 1.75rem;
}
}
h2 {
color: #000000;
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 600;
}
@media (max-width: 1300px) {
h2 {
font-size: 1.75rem;
}
}
h3 {
color: #000000;
font-size: 1.5rem;
line-height: 1.75rem;
font-weight: 600;
}
@media (max-width: 1300px) {
h3 {
font-size: 1.25rem;
}
}
a,
p,
li {
font-size: 1rem;
line-height: 150%;
font-weight: 300;
color: #6e6e6e;
letter-spacing: 0.5px;
}
a{
font-weight: 500;
color: #5F7B1E;
}
.socials {
position: fixed;
top: 216px;
background: #8ab42b;
border-radius: 8px 0 0 8px;
right: 0;
z-index: 700;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem 1rem;
box-shadow: 5px 7px 7px rgba(0, 0, 0, 0.1);
}
.socials img {
width: 2.5rem;
}
@media (hover: hover) {
.socials a:hover img {
transform: scale(1.2);
}
}
.socials a:first-child {
animation: infinite-scale 3s infinite; animation-timing-function: ease-in-out;
}
@media (max-width: 768px) {
.socials {
top: 85%;
}
.socials a:not(:first-child) {
display: none;
}
}
.socials.scrolled {
background: #5F7B1E; }
.section-title {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.section-title h1 {
text-align: center;
}
.section-title div {
width: -moz-fit-content;
width: fit-content;
display: flex;
align-items: center;
gap: 8px;
}
.section-title div img {
width: 40px;
}
.section-title div hr {
display: block;
width: 100px;
height: 1px;
border: 0;
border-top: 1px solid #5F7B1E;
}
.hidden {
display: none;
}
@media (max-width: 1440px) {
.jet-form-builder__prev-page {
padding-top: calc(1rem + 0 * (100vw - 320px) / 1120);
}
}
@media (max-width: 1440px) {
.jet-form-builder__prev-page {
padding-bottom: calc(1rem + 0 * (100vw - 320px) / 1120);
}
}
@media (max-width: 1440px) {
.jet-form-builder__prev-page {
padding-right: calc(2rem + 0.75 * (100vw - 320px) / 1120);
}
}
@media (max-width: 1440px) {
.jet-form-builder__prev-page {
padding-left: calc(2rem + 0.75 * (100vw - 320px) / 1120);
}
}
@media (hover: hover) {
.jet-form-builder__prev-page:hover {
background-color: #16213e;
}
}
@media (max-width: 1300px) {
.jet-form-builder__prev-page {
font-size: 1rem;
}
}
.full-width {
width: 100%;
}
.fade-in-onload {
opacity: 0;
transform: translateY(60px);
animation: fadeInUp 0.6s ease-out forwards;
}
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
width: 100%;
}
.max800 {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1000px) {
.jet-form-builder-progress-pages {
display: none !important;
}
}
.form-green-choice {
padding: 2rem 2.25rem !important;
}
@media (max-width: 768px) {
.final-form-grid {
grid-template-columns: repeat(1, 1fr) !important;
}
.jet-form-builder img {
max-height: 300px;
}
}
.jet-form-builder__fields-group.checkradio-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin: 3rem 0;
}
.jet-form-builder__fields-group.checkradio-wrap div {
padding: 1rem;
background: #f8f8f8;
}
.jobs-final-form {
justify-content: center;
align-items: center;
}
.jobs-final-form * {
width: 100%;
}
.jobs-final-form input, .jobs-final-form select {
padding: 1rem;
border: 1px solid #a8a8a8;
border-radius: 3px;
color: #6e6e6e;
} .implantat-check-form {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.08) !important;
padding-left: 1rem;
padding-right: 1rem;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
gap: 1.25rem !important;
}
.implantat-check-form p, .implantat-check-form h1, .implantat-check-form h2, .implantat-check-form h3 {
max-width: 600px;
}
.implantat-check-page-description {
max-width: 70%;
margin-left: auto !important;
margin-right: auto !important;
} .triple-choice {
max-width: 750px;
display: grid !important;
grid-template-columns: repeat(3, 1fr);
}
.triple-choice-item {
min-height: 300px;
height: 100%;
justify-content: space-between;
}
.triple-choice-item .wp-block-image {
height: -moz-max-content;
height: max-content;
display: flex;
flex-grow: 1;
}
.triple-choice-item .wp-block-image img {
flex-grow: 1;
}
.triple-choice-item p {
color: #000000 !important;
transition: 0s !important;
}
.triple-choice-item.is-checked p {
color: #FFFFFF !important;
}
@media (max-width: 650px) {
.triple-choice {
grid-template-columns: repeat(1, 1fr);
word-break: break-word;
}
.triple-choice img { }
.triple-choice-item {
max-width: 80%;
margin: 0 auto !important; }
} .checkbox-wrap {
max-width: 750px;
width: 100%;
}
.checkbox-wrap li {
width: 100%;
align-items: start !important;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.checkbox-wrap li span {
transition: none !important;
}
.checkbox-wrap li label {
transition: none !important;
}
.implantat-final-form {
max-width: 600px;
align-items: center;
}
.implantat-final-form input {
padding: 1rem;
border: 1px solid #a8a8a8;
border-radius: 3px;
color: #6e6e6e;
}
.implantat-final-form * {
width: 100%;
}
.checkbox-wrap span {
gap: 1rem;
}
.radio-choice.appear {
animation: slideInRightFade 0.5s ease-out forwards;
}
.radio-choice.is-checked img {
filter: brightness(0) invert(1);
}
.implantat-check-form .checkradio-wrap {
grid-template-columns: 1fr;
gap: 2rem;
}  @keyframes jump {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes slideInRightFade {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.datenschutz-accept .checkradio-wrap {
margin: 0 !important;
}
.jump-animate {
animation: jump 0.8s ease;
}
.jet-form-builder__field-wrap.radio-wrap.checkradio-wrap {
border-radius: 0.5rem;
}
.jet-form-builder__next-page-wrap {
display: flex;
width: 100%;
justify-content: center;
gap: 1.5rem;
}
.jet-form-builder__prev-page {
padding-top: 1rem;
padding-bottom: 1rem;
padding-right: 2.75rem;
padding-left: 2.75rem;
cursor: pointer;
position: relative;
width: -moz-fit-content;
width: fit-content;
background: transparent;
color: #5F7B1E;
border: 2px solid #5F7B1E;
border-radius: 60px;
font-size: 1.25rem;
line-height: auto;
font-weight: 500;
}
.implantat-survey .jet-form-builder__prev-page {
border-color: #5F7B1E !important;
color: #5F7B1E !important;
}
.dflt-btn {
padding-top: 1rem;
padding-bottom: 1rem;
padding-right: 2.75rem;
padding-left: 2.75rem;
position: relative;
width: -moz-fit-content;
width: fit-content;
background: #5F7B1E;
color: #ffffff;
border-radius: 60px;
font-size: 1.25rem;
line-height: auto;
font-weight: 500;
}
@media (max-width: 1440px) {
.dflt-btn {
padding-top: calc(1rem + (1 - 1) * (100vw - 320px) / 1120);
}
}
@media (max-width: 1440px) {
.dflt-btn {
padding-bottom: calc(1rem + (1 - 1) * (100vw - 320px) / 1120);
}
}
@media (max-width: 1440px) {
.dflt-btn {
padding-right: calc(2rem + (2.75 - 2) * (100vw - 320px) / 1120);
}
}
@media (max-width: 1440px) {
.dflt-btn {
padding-left: calc(2rem + (2.75 - 2) * (100vw - 320px) / 1120);
}
}
@media (hover: hover) {
.dflt-btn:hover {
background-color: #16213e;
}
}
@media (max-width: 1300px) {
.dflt-btn {
font-size: 1rem;
}
}
.dflt-btn.reverse-btn {
background: transparent;
color: #5F7B1E;
border: 2px solid #5F7B1E;
}
@media (hover: hover) {
.dflt-btn.reverse-btn:hover {
background-color: #5F7B1E;
color: #ffffff;
}
}
.dark-green-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 50%, rgba(138, 180, 43, 0.1) 100%);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 1; pointer-events: none; }
.dark-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6) 100%;
z-index: 10; pointer-events: none; }
.blog-posts {
width: 100%;
background: #f8f8f8;
height: 100%;
}
.blog-posts .container {
display: flex;
align-items: center;
height: 100%;
}
.blog-posts .container .blog-slider {
width: 100%;
padding: 0.625rem !important;
display: flex;
flex-direction: column;
}
.blog-posts .container .blog-grid {
overflow: scroll;
scrollbar-width: none;
display: grid;
gap: 1.5rem;
height: 100%;
width: 100%;
grid-template-columns: repeat(3, 1fr);
}
.blog-posts .container .blog-grid::-webkit-scrollbar {
display: none; }
@media (max-width: 1200px) {
.blog-posts .container .blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 625px) {
.blog-posts .container .blog-grid {
grid-template-columns: repeat(1, 1fr);
}
}
.blog-post {
height: 100%;
border-radius: 24px;
background: none;
}
@media (hover: hover) {
.blog-post:hover {
box-shadow: 5px 7px 7px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.5s ease-in-out;
}
.blog-post:hover .blog-info {
margin-top: 0;
border-radius: 0 0 24px 24px;
}
.blog-post:hover .blog-info .read-more img {
transform: translateX(0);
opacity: 1;
}
}
.blog-post .blog-img {
position: relative;
z-index: 2;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
height: 15.625rem;
border-radius: 24px 24px 0 0;
width: 100%;
}
.blog-post .blog-info {
position: relative;
z-index: 3;
padding: 1.25rem;
height: auto;
display: flex;
flex-direction: column;
margin-top: -24px;
border-radius: 24px;
background: #ffffff;
box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.1);
gap: 1.5rem;
}
@media (max-width: 768px) {
.blog-post .blog-info {
gap: 1rem;
}
}
.blog-post .blog-info h2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 3.5rem;
}
.blog-post .blog-info .read-more {
display: flex;
justify-content: space-between;
align-items: center;
}
.blog-post .blog-info .read-more span {
text-wrap: nowrap !important;
font-size: 1.25rem;
font-weight: 500;
line-height: 1;
color: #5F7B1E;
border-bottom: 2px #5F7B1E solid;
}
.blog-post .blog-info .read-more img {
transform: translateX(-100px);
opacity: 0;
width: 20px;
}
.blog-tags {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.blog-tags .tag {
padding: 0.25rem 0.75rem;
text-transform: uppercase;
background: #f8f8f8;
font-size: 0.875rem;
border-radius: 24px;
color: #000000;
cursor: pointer;
font-family: "Montserrat";
font-weight: 700;
}
@media (max-width: 768px) {
.blog-tags .tag {
padding: 0.25rem 1.5rem;
}
}
.blog-categories {
display: flex;
width: 100%;
flex-wrap: wrap;
gap: 1.5rem;
}
.blog-categories .blog-category {
padding: 0.5rem 1rem;
text-wrap: nowrap;
text-transform: uppercase;
background: #ffffff;
font-size: 0.875rem;
border-radius: 24px;
color: #000000;
cursor: pointer;
font-family: "Montserrat";
font-weight: 700;
}
@media (hover: hover) {
.blog-categories .blog-category:hover {
background: #000000;
color: #f8f8f8;
}
}
.blog-categories .category-active {
background: #5F7B1E;
color: #f8f8f8;
}
.header {
z-index: 2000;
position: fixed;
width: 100%;
padding: 1.75rem 0;
transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
@media (max-width: 1300px) {
.header {
padding: 1.25rem 0;
}
}
@media (max-width: 1000px) {
.header {
padding: 1rem 0;
}
}
.header .container {
justify-content: space-between;
align-items: center;
display: flex;
flex-direction: row;
}
.header .container .logo {
height: 4.75rem;
}
@media (max-width: 1300px) {
.header .container .logo {
display: none;
}
}
.header .container .logo-mobile {
display: none;
width: 50px;
}
@media (max-width: 1300px) {
.header .container .logo-mobile {
display: block;
}
}
.header .container .logo-dark {
display: none;
}
@media (max-width: 1300px) {
.header .container .logo-dark {
display: none;
}
}
.header .container .burger-icon {
display: none;
cursor: pointer;
}
@media (max-width: 1100px) {
.header .container .burger-icon {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 25px;
width: 25px;
}
}
.header .container .burger-icon span {
width: 100%;
height: 5px;
border-radius: 1px;
background: #ffffff;
}
.header .container .active span:nth-child(2) {
opacity: 0;
}
.header .container .active span:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
.header .container .active span:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}
.header .container nav {
display: flex;
gap: 3rem;
align-items: center;
}
@media (max-width: 1100px) {
.header .container nav {
display: none;
}
}
.header .container nav ul {
display: flex;
list-style: none;
gap: 3rem;
align-items: center;
}
.header .container nav ul .header_link {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 300;
color: #ffffff;
}
@media (hover: hover) {
.header .container nav ul .header_link:hover {
color: #8ab42b !important;
}
}
.header .container nav .dflt-btn {
display: none;
}
.header-white {
background-color: #ffffff;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.header-white .container .burger-icon span {
background: #000000 !important;
}
.header-white .container nav ul .header_link {
color: #000000;
}
.header-white .container .logo {
display: none;
}
.header-white .container .logo-dark {
display: block;
}
@media (max-width: 1300px) {
.header-white .container .logo-dark {
display: none;
}
}
.header-scrolled {
background-color: #f8f8f8 !important;
padding: 1rem 0;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.header-scrolled .container .logo-dark {
display: block !important;
}
.header-scrolled .container .logo-dark img {
height: 52px;
}
@media (max-width: 1300px) {
.header-scrolled .container .logo-dark {
display: none !important;
}
}
.header-scrolled .container .logo {
display: none !important;
}
.header-scrolled .container .burger-icon span {
background: #000000 !important;
}
.header-scrolled .container nav ul .header_link {
color: #000000;
font-size: 1.25rem !important;
}
.header-scrolled .container nav ul .header_link:hover {
color: #8ab42b !important;
}
.header-scrolled .container nav .dflt-btn {
display: block;
padding: 0.5rem 1.5rem;
}
.dropdown-menu {
position: fixed;
height: 100vh;
opacity: 0;
width: 100dvw;
top: -120%; left: 0;
background-color: #f8f8f8;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: top 0.4s, opacity 0.3s; z-index: 900; }
.dropdown-menu ul {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2.75rem 16px;
}
.dropdown-menu ul a {
color: #000000;
font-size: 1.5rem;
width: 100%;
font-weight: 500;
}
@media (hover: hover) {
.dropdown-menu ul a:hover {
color: #5F7B1E;
}
}
.dropdown-menu.visible {
top: 92px;
opacity: 1;
}
.burger-icon.active span {
background: #5F7B1E;
}
main {
display: flex;
flex: 1;
flex-direction: column;
gap: 4rem;
padding-bottom: 84px;
}
@media (max-width: 1100px) {
main {
gap: 2rem;
}
}
@media (max-width: 1100px) {
main {
gap: 1rem;
}
}
section {
padding: 2rem 0;
}
.hero-section-wrapper {
padding: 0;
position: relative;  }
.hero-section-wrapper .hero-section {
position: relative;
height: 100dvh;
width: 100%;
overflow: hidden;
}
.hero-section-wrapper .hero-section .hero-bg {
transition: 0s !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
will-change: transform;
}
.hero-section-wrapper .hero-section .hero_content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hero-section-wrapper .hero-section .hero_content .container {
text-align: center;
display: flex;
gap: 1.25rem;
flex-direction: column;
align-items: center;
max-width: 596px;
}
:not(.doctor-wrapper) .hero-section-wrapper .hero-section .hero_content .container .dflt-btn {
background-color: #8ab42b;
}
.hero-section-wrapper .hero-section .hero_content .container p {
font-size: 1.25rem;
line-height: 150%;
font-weight: 300;
color: #6e6e6e;
letter-spacing: 1px;
}
@media (max-width: 768px) {
.hero-section-wrapper .hero-section .hero_content .container p {
font-size: 1rem;
line-height: 150%;
font-weight: 300;
color: #6e6e6e;
letter-spacing: 0.5px;
}
}
.hero-section-wrapper .hero_bottom-cards {
position: absolute;
z-index: 1;
bottom: 0;
width: 100%;
left: 0;
}
@media (max-width: 1000px) {
.hero-section-wrapper .hero_bottom-cards {
position: relative;
}
}
.hero-section-wrapper .hero_bottom-cards .container {
display: flex;
flex-direction: row;
width: 100%;
gap: 0.75rem;
}
@media (max-width: 1000px) {
.hero-section-wrapper .hero_bottom-cards .container {
flex-direction: column;
padding: 0;
}
}
.hero-section-wrapper .hero_bottom-cards .container .bottom-card {
animation: appear-from-top 1s ease-in-out;
width: 100%;
height: 200px;
padding: 1.5rem;
background: rgba(0, 0, 0, 0.4);
display: flex;
place-items: center;
justify-content: center;
gap: 20px; }
.hero-section-wrapper .hero_bottom-cards .container .bottom-card .icon {
width: 40px;
}
.hero-section-wrapper .hero_bottom-cards .container .bottom-card ul {
list-style: none;
}
:not(.doctor-wrapper) .hero-section-wrapper .hero_bottom-cards .container .bottom-card div {
color: #ffffff;
display: flex;
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
:not(.doctor-wrapper) .hero-section-wrapper .hero_bottom-cards .container .bottom-card div :where(h1, h2, h3, h4, h5, h6, p, span, a, li) {
color: inherit;
}
@media (max-width: 1000px) {
.hero-section-wrapper .hero_bottom-cards .container .bottom-card {
background: rgba(0, 0, 0, 0.7);
min-height: 144px;
height: auto;
}
.hero-section-wrapper .hero_bottom-cards .container .bottom-card div {
margin-right: 40px;
}
}
body:not(:has(.doctor-wrapper)) .hero-section .hero_content .container {
color: #ffffff;
}
body:not(:has(.doctor-wrapper)) .hero-section .hero_content .container :where(h1, h2, h3, h4, h5, h6, p, li, span, a) {
color: inherit;
}
.services .container .services-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1200px) {
.services .container .services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 624px) {
.services .container .services-grid {
display: none;
}
}
.services .container .services-grid .service {
height: auto;
display: grid;
width: 100%;
place-items: center;
gap: 24px;
padding: 24px 64px;
text-align: center;
box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.25);
}
@media (max-width: 1000px) {
.services .container .services-grid .service {
padding: 24px 32px;
}
}
.services .container .services-grid .service p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.services .container .services-grid .service .icon-block {
background: #5F7B1E;
border-radius: 50%;
width: 75px;
height: 75px;
transition: none;
display: flex;
overflow: visible;
position: relative;
}
.services .container .services-grid .service .icon-block .icon {
transition: all;
transition: none;
}
.services .container .services-grid .service .icon-block * {
transition: none;
}
.services .container .services-grid .service .icon-block .icon-wrapper {
position: absolute;
z-index: 111; bottom: 0;
right: 50%;
transform: translateX(50%);
}
.services .container .services-grid .service .icon-block .icon-wrapper .lottie-animation {
display: flex;
}
.services .container .services-grid .service .icon-block .icon-wrapper .lottie-animation svg {
height: 68px !important;
width: auto !important;
}
.services .container .services-grid .service .line {
position: relative;
width: 100%;
}
.services .container .services-grid .service .line .thin {
display: block;
width: 100%;
height: 1px;
border: 0;
border-top: 1px solid #5F7B1E;
}
.services .container .services-grid .service .line div {
position: absolute;
width: 100%;
top: -1px;
}
.services .container .services-grid .service .line .thick {
display: block;
width: 75px;
border: 0;
border-top: 3px solid #5F7B1E;
}
@media (hover: hover) {
.services .container .services-grid .service:hover {
background: #f2f7f9;
transform: scale(1.05);
}
.services .container .services-grid .service:hover .icon-block {
animation: bounce 0.5s ease-in-out;
animation-fill-mode: both;
}
.services .container .services-grid .service:hover .thin {
display: block;
width: 225px;
height: 1px;
border: 0;
border-top: 1px solid #5F7B1E;
}
.services .container .services-grid .service:hover .thick {
display: block;
width: 225px;
border: 0;
border-top: 3px solid #5F7B1E;
}
}
.services .container .services-slider {
display: none;
width: 100%;
padding: 0.625rem !important;
}
@media (max-width: 624px) {
.services .container .services-slider {
display: flex;
flex-direction: column;
gap: 24px;
}
.services .container .services-slider .service {
height: auto;
display: grid;
width: 100%;
place-items: center;
gap: 24px;
padding: 24px 64px;
text-align: center;
box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.25);
}
}
@media (max-width: 624px) and (max-width: 1000px) {
.services .container .services-slider .service {
padding: 24px 32px;
}
}
@media (max-width: 624px) {
.services .container .services-slider .service p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 70%;
}
.services .container .services-slider .service h2 {
color: #000000;
}
.services .container .services-slider .service .icon-block {
background: #5F7B1E;
border-radius: 50%;
width: 75px;
height: 75px;
transition: none;
display: flex;
overflow: visible;
position: relative;
}
.services .container .services-slider .service .icon-block .icon {
transition: all;
transition: none;
}
.services .container .services-slider .service .icon-block * {
transition: none;
}
.services .container .services-slider .service .icon-block .icon-wrapper {
position: absolute;
z-index: 111; bottom: 0;
right: 50%;
transform: translateX(50%);
}
.services .container .services-slider .service .icon-block .icon-wrapper .lottie-animation {
display: flex;
}
.services .container .services-slider .service .icon-block .icon-wrapper .lottie-animation svg {
height: 68px !important;
width: auto !important;
}
.services .container .services-slider .service .line {
position: relative;
width: 100%;
}
.services .container .services-slider .service .line .thin {
display: block;
width: 100%;
height: 1px;
border: 0;
border-top: 1px solid #5F7B1E;
}
.services .container .services-slider .service .line div {
position: absolute;
width: 100%;
top: -1px;
}
.services .container .services-slider .service .line .thick {
display: block;
width: 75px;
border: 0;
border-top: 3px solid #5F7B1E;
}
}
@media (max-width: 624px) and (hover: hover) {
.services .container .services-slider .service:hover {
background: #f2f7f9;
transform: scale(1.05);
}
.services .container .services-slider .service:hover .icon-block {
animation: bounce 0.5s ease-in-out;
animation-fill-mode: both;
}
.services .container .services-slider .service:hover .thin {
display: block;
width: 225px;
height: 1px;
border: 0;
border-top: 1px solid #5F7B1E;
}
.services .container .services-slider .service:hover .thick {
display: block;
width: 225px;
border: 0;
border-top: 3px solid #5F7B1E;
}
}
.services .container .scaled .animation-container .lottie-animation svg {
transform: scale(1.1) !important;
transform-origin: bottom;
}
.about-us {
background: #f8f8f8;
}
.about-us .container .about-us-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "block1 image block4" "block2 image block5" "block3 image block6";
width: 100%;
gap: 2rem;
}
@media (max-width: 1200px) {
.about-us .container .about-us-content {
grid-template-columns: repeat(1, 1fr);
grid-template-areas: "block1" "block2" "block3" "block4" "block5" "block6" "image";
}
}
.about-us .container .about-us-content .center-img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
grid-area: image;
}
@media (max-width: 1200px) {
.about-us .container .about-us-content .center-img {
display: none;
}
}
.about-us .container .about-us-content .about-us-part {
width: 100%;
display: flex;
align-items: center;
height: auto;
gap: 1.25rem;
}
@media (max-width: 1200px) {
.about-us .container .about-us-content .about-us-part {
flex-direction: row-reverse;
width: 100%;
justify-content: start;
}
}
.about-us .container .about-us-content .about-us-part .about-us-part-text {
display: flex;
width: -moz-fit-content;
width: fit-content;
flex-direction: column;
justify-content: center;
gap: 12px;
text-align: end;
}
@media (max-width: 1200px) {
.about-us .container .about-us-content .about-us-part .about-us-part-text {
text-align: start;
}
}
.about-us .container .about-us-content .about-us-part .about-us-part_icon {
height: 100px;
aspect-ratio: 1;
display: grid;
place-items: center;
border: 1px #5F7B1E solid;
border-radius: 50%;
background: #5F7B1E;
}
@media (max-width: 1440px) {
.about-us .container .about-us-content .about-us-part .about-us-part_icon {
height: calc(64px + (100 - 64) * (100vw - 320px) / 1120);
}
}
.about-us .container .about-us-content .about-us-part .about-us-part_icon img {
height: 56px;
}
@media (max-width: 1440px) {
.about-us .container .about-us-content .about-us-part .about-us-part_icon img {
height: calc(32px + (56 - 32) * (100vw - 320px) / 1120);
}
}
.about-us .container .about-us-content .part1 {
grid-area: block1;
}
.about-us .container .about-us-content .part2 {
grid-area: block2;
}
.about-us .container .about-us-content .part3 {
grid-area: block3;
}
.about-us .container .about-us-content .part4 {
grid-area: block4;
}
.about-us .container .about-us-content .part5 {
grid-area: block5;
}
.about-us .container .about-us-content .part6 {
grid-area: block6;
}
.about-us .container .about-us-content .part4,
.about-us .container .about-us-content .part5,
.about-us .container .about-us-content .part6 {
flex-direction: row-reverse;
}
.about-us .container .about-us-content .part4 .about-us-part-text,
.about-us .container .about-us-content .part5 .about-us-part-text,
.about-us .container .about-us-content .part6 .about-us-part-text {
text-align: start;
}
.about-us-video {
position: relative;
}
.about-us-video .container .video {
width: 100%;
}
.about-us-video .container .video .video-section {
position: relative;
text-align: center;
width: 100%;
}
.about-us-video .container .video .video-section .video-thumbnail {
position: relative;
display: inline-block;
width: 100%;
}
.about-us-video .container .video .video-section .video-thumbnail .dark-gradient {
background: rgba(0, 0, 0, 0.2) 100%;
}
.about-us-video .container .video .video-section .video-thumbnail img {
width: 100%;
height: auto;
display: block;
max-height: 364px;
}
.about-us-video .container .video .video-section .video-thumbnail .play-button {
position: absolute;
z-index: 20;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.239);
color: #fff;
border: none;
border-radius: 50%;
width: 90px;
height: 90px;
font-size: 24px;
cursor: pointer;
display: grid;
place-items: center;
}
.about-us-video .container .video .video-section .video-thumbnail .play-button img {
overflow: auto;
width: 24px;
}
.about-us-video .container .video .video-section .video-thumbnail .play-button:after {
content: "";
width: 150%;
height: 150%;
top: -25%;
left: -25%;
border-radius: 50%;
position: absolute;
border: 2px solid #ffffff;
animation: btn-scale 1.2s infinite ease-in-out;
}
.about-us-video .container .video .video-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
}
.about-us-video .container .video .video-modal .video-container {
position: relative;
width: 80%;
max-width: 800px;
background: #000;
}
.about-us-video .container .video .video-modal .video-container iframe {
width: 100%;
height: 450px;
}
.about-us-video .container .video .video-modal .video-container .close-modal {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
}
.reviews {
overflow: hidden;
}
@media (max-width: 1100px) {
.reviews {
height: auto;
}
}
.reviews .container {
z-index: 3;
position: relative;
flex-direction: row;
height: 100%;
overflow: hidden;
}
.reviews .container .circle {
z-index: -1;
max-width: 700px;
position: absolute;
bottom: 20%;
right: 0%;
}
@media (max-width: 1000px) {
.reviews .container .circle {
display: none;
}
}
.reviews .container .bg-img {
position: absolute;
bottom: 20%;
max-width: 700px;
right: 0%;
max-height: 100%;
}
@media (max-width: 1100px) {
.reviews .container .bg-img {
display: none;
}
}
.reviews .container .left {
max-width: 50%;
display: flex;
gap: 3rem;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (max-width: 1100px) {
.reviews .container .left {
gap: 2rem;
max-width: 100%;
}
}
@media (max-width: 768px) {
.reviews .container .left {
gap: 1rem;
}
}
.reviews .container .left .google-maps-section {
display: flex;
flex-direction: column;
align-items: center;
}
.reviews .container .left .google-maps-section img {
height: 2rem;
}
.reviews .container .left .reviews-section-title {
display: flex;
width: 100%;
flex-direction: column;
gap: 1rem;
}
.reviews .container .left .left-top {
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: center;
}
.reviews .container .left .reviews-slider {
display: flex;
width: 100%;
flex-direction: column;
gap: 1.5rem;
}
.reviews .container .left .reviews-slider .review {
width: 100%;
background: #f8f8f8;
padding: 1.5rem;
display: flex;
border-radius: 1.5rem;
flex-direction: column-reverse;
gap: 1rem;
border-width: 0 0 0 10px;
border-color: #5F7B1E;
border-style: solid;
text-align: center;
}
@media (max-width: 1000px) {
.reviews .container .left .reviews-slider .review {
flex-direction: column-reverse;
background: #f0f6f6;
}
}
.reviews .container .left .reviews-slider .review .review-content {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.reviews .container .left .reviews-slider .review .review-content span {
font-size: 96px;
font-family: "Mukta Malar";
font-weight: 600;
line-height: 28px;
color: #5F7B1E;
}
.reviews .container .left .reviews-slider .review .review-content p {
max-width: 400px;
}
.reviews .container .left .reviews-slider .review .review-author {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
@media (max-width: 1000px) {
.reviews .container .left .reviews-slider .review .review-author {
flex-direction: column;
}
}
.reviews .container .left .reviews-slider .review .review-author img {
width: 100px;
height: 100px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.reviews .container .left .reviews-slider .review .review-author p {
color: #5F7B1E;
}
.contact {
padding: 6rem 0;
position: relative;
}
@media (max-width: 1300px) {
.contact {
padding: 2rem 0;
}
}
.contact .container {
flex-direction: row;
justify-content: space-between;
position: relative;
z-index: 20;
}
.contact .container div {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact .container div h2 {
color: #ffffff;
}
@media (max-width: 1300px) {
.contact .container div {
text-align: center;
width: 100%;
align-items: center;
gap: 32px;
}
}
@media (max-width: 1300px) {
.contact .container img {
display: none;
}
}
.contact .contact-bg {
top: 0;
left: 0;
position: absolute;
z-index: -1;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
}
.praxis-wrapper .about-us {
background: transparent;
}
.index-wrapper .team .container {
display: grid;
grid-template-columns: 3fr 7fr;
gap: 3.25rem;
}
@media (max-width: 1000px) {
.index-wrapper .team .container {
grid-template-columns: 1fr;
}
}
@media (hover: none) {
.index-wrapper .team .container {
grid-template-columns: 1fr;
}
}
.index-wrapper .team .container .left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 1.25rem;
}
.index-wrapper .team .container .left p {
font-size: 1.25rem;
line-height: 150%;
font-weight: 300;
color: #6e6e6e;
letter-spacing: 1px;
}
.index-wrapper .team .container .right {
display: flex;
gap: 1.5rem;
}
@media (max-width: 768px) {
.index-wrapper .team .container .right {
display: none;
}
}
.index-wrapper .team .container .right .doctor {
position: relative;
transition: width 1s ease;
height: 594px;
width: 30%;
overflow: hidden;
display: flex; flex-direction: column;
}
.index-wrapper .team .container .right .doctor img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 24px;
transition: width 0.6s ease;
transition: height 0.6s ease; }
.index-wrapper .team .container .right .doctor .doctor_info {
opacity: 0;
position: absolute; bottom: -30%; left: 0;
right: 0;
padding: 1rem 1.5rem;
background: #fff; border-width: 0 1px 1px 1px;
border-color: #5F7B1E;
border-style: solid;
border-radius: 0 0 1.5rem 1.5rem;
display: flex;
flex-direction: column;
transition: all 0.6s ease;
}
.index-wrapper .team .container .right .doctor .doctor_info p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (hover: none) {
.index-wrapper .team .container .right .doctor .doctor_info p {
-webkit-line-clamp: 2;
}
}
.index-wrapper .team .container .right .doctor .doctor_info h2 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.index-wrapper .team .container .right .doctor .doctor_info span {
color: #5F7B1E;
margin: 0.25rem 0 0.75rem 0;
}
.index-wrapper .team .container .right .active {
width: 40%; }
.index-wrapper .team .container .right .active img {
height: 80%; border-radius: 24px24px 0 0; }
.index-wrapper .team .container .right .active .doctor_info {
opacity: 1; bottom: 0; }
.index-wrapper .team .container .right .active .doctor_info * {
transition-delay: 0.1s;
}
.index-wrapper .team .container .right .wide {
width: 40%; }
.index-wrapper .team .container .doctors-slider {
width: 100%;
flex-direction: column;
gap: 1.5rem;
}
@media (max-width: 768px) {
.index-wrapper .team .container .doctors-slider {
display: flex;
}
}
.index-wrapper .team .container .doctors-slider .doctor {
position: relative;
transition: width 1s ease;
height: 594px;
overflow: hidden;
display: flex; flex-direction: column;
}
.index-wrapper .team .container .doctors-slider .doctor img {
height: 100%;
width: 100% !important;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
border-radius: 24px;
transition: width 0.6s ease;
transition: height 0.6s ease; }
.index-wrapper .team .container .doctors-slider .doctor .doctor_info {
opacity: 0;
position: absolute; bottom: -30%; left: 0;
right: 0;
padding: 1rem 1.5rem;
background: #fff; border-width: 0 1px 1px 1px;
border-color: #5F7B1E;
border-style: solid;
border-radius: 0 0 1.5rem 1.5rem;
display: flex;
flex-direction: column;
transition: all 0.6s ease;
}
.index-wrapper .team .container .doctors-slider .doctor .doctor_info p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (hover: none) {
.index-wrapper .team .container .doctors-slider .doctor .doctor_info p {
-webkit-line-clamp: 2;
}
}
.index-wrapper .team .container .doctors-slider .doctor .doctor_info h2 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.index-wrapper .team .container .doctors-slider .doctor .doctor_info span {
color: #5F7B1E;
margin: 0.25rem 0 0.75rem 0;
}
.index-wrapper .team .container .doctors-slider .active {
justify-content: start;
}
.index-wrapper .team .container .doctors-slider .active img {
height: 80%; top: 0;
border-radius: 24px 24px 0 0; }
.index-wrapper .team .container .doctors-slider .active .doctor_info {
opacity: 1; bottom: 0; }
.index-wrapper .team .container .doctors-slider .active .doctor_info * {
transition-delay: 0.1s;
}
.index-wrapper .team .container .doctors-slider .wide {
width: 40%; }
.team-wrapper .team .container {
display: flex;
flex-direction: column;
}
.team-wrapper .team .container .team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 1000px) {
.team-wrapper .team .container .team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 525px) {
.team-wrapper .team .container .team-grid {
grid-template-columns: repeat(1, 1fr);
}
}
.team-wrapper .team .container .team-grid .face_bottom img {
-o-object-position: bottom !important;
object-position: bottom !important;
}
.team-wrapper .team .container .team-grid .doctor {
position: relative;
transition: width 1s ease;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.team-wrapper .team .container .team-grid .doctor img {
height: 524px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
}
.team-wrapper .team .container .team-grid .doctor .doctor_info {
flex-grow: 1; padding: 1.5rem;
background: #fff;
display: flex;
flex-direction: column;
transition: all 0.6s ease;
text-align: center;
gap: 0.25rem;
}
.team-wrapper .team .container .team-grid .doctor .doctor_info p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.team-wrapper .team .container .team-grid .doctor .doctor_info span {
font-size: 1rem;
line-height: 150%;
font-weight: 300;
color: #6e6e6e;
letter-spacing: 0.5px;
font-weight: 500;
color: #5F7B1E;
margin: 0.25rem 0 0.75rem 0;
}
.team-wrapper .team .container .team-slider {
display: none;
}
.content-page-wrapper main {
padding-top: 144px;
}
@media (max-width: 1440px) {
.content-page-wrapper main {
padding-top: calc(84px + (144 - 84) * (100vw - 320px) / 1120);
}
}
.content-page-wrapper main .container {
gap: 1.5rem;
padding: 2rem;
}
.content-page-wrapper main .container a {
color: #5F7B1E;
}
@media (max-width: 768px) {
.content-page-wrapper main .container {
flex-direction: column !important;
}
.content-page-wrapper main .container div,
.content-page-wrapper main .container img {
max-width: 100%;
}
}
.blog-wrapper .main {
padding-top: 144px;
}
@media (max-width: 1440px) {
.blog-wrapper .main {
padding-top: calc(84px + (144 - 84) * (100vw - 320px) / 1120);
}
}
.blog-wrapper .main .tags-filter {
padding: 2.5rem 0.625rem 1rem 0.625rem;
}
@media (max-width: 768px) {
.blog-wrapper .main .tags-filter {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
}
.blog-wrapper .main .hero-blog-post {
display: grid;
grid-template-columns: 4fr 6fr;
gap: 1rem;
border-radius: 1.5rem;
background: #f8f8f8;
overflow: hidden;
}
@media (max-width: 768px) {
.blog-wrapper .main .hero-blog-post {
display: flex;
flex-direction: column-reverse;
}
}
.blog-wrapper .main .hero-blog-post .post-content {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
grid-template-columns: 1fr 1fr;
}
.blog-wrapper .main .hero-blog-post .post-content .post-text {
display: flex;
flex-direction: column;
gap: 2rem;
}
.blog-wrapper .main .hero-blog-post .post-content .post-text h2 {
font-size: 2.25rem;
line-height: 100%;
}
@media (max-width: 1000px) {
.blog-wrapper .main .hero-blog-post .post-content .post-text h2 {
font-size: 1.75rem;
}
}
.blog-wrapper .main .hero-blog-post img {
width: 100%;
height: 100%;
max-height: 446px;
-o-object-fit: cover;
object-fit: cover;
}
.blog-wrapper .main .blog-posts .dflt-btn {
margin-top: 2.5rem;
}
.blog-post-wrapper .main {
padding-top: 144px;
}
@media (max-width: 1440px) {
.blog-post-wrapper .main {
padding-top: calc(84px + (144 - 84) * (100vw - 320px) / 1120);
}
}
.blog-post-wrapper .main .post .container {
gap: 2.75rem;
justify-content: center;
flex-direction: row;
}
.blog-post-wrapper .main .post .container .content {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 720px;
}
.blog-post-wrapper .main .post .container .content .post-top-info {
display: flex;
gap: 1rem;
align-items: center;
}
.blog-post-wrapper .main .post .container .content .post-author {
display: flex;
gap: 1rem;
}
.blog-post-wrapper .main .post .container .content .post-author img {
border-radius: 50%;
width: 3.25rem;
}
.blog-post-wrapper .main .post .container .content .post-author div {
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-post-wrapper .main .post .container .content .post-author span {
color: #5F7B1E;
}
.blog-post-wrapper .main .post .container .content img {
width: 100%;
}
.blog-post-wrapper .main .post .container .content .post-text {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.doctor-wrapper .header-white {
box-shadow: none;
background: none;
}
.doctor-wrapper .header-white .logo-dark {
display: none;
}
.doctor-wrapper .header-white .logo {
display: block;
}
@media (max-width: 1300px) {
.doctor-wrapper .header-white .logo {
display: none;
}
}
.doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container {
max-width: 100%;
padding: 0;
height: 100%;
flex-direction: row;
gap: 0;
}
@media (max-width: 1000px) {
.doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container {
display: flex;
flex-direction: column;
}
}
.doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container .doctor-img {
height: -moz-min-content;
height: min-content;
flex-grow: shrink;
-o-object-fit: cover;
object-fit: cover;
background-image: url(//dental-familie.de/wp-content/themes/dental-familie/images/team/dimitri-schulz.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 40%;
height: 100%;
}
@media (max-width: 1000px) {
.doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container .doctor-img {
width: 100%;
}
}
.doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container .doctor-info {
padding-left: 108px;
padding-right: 108px;
display: flex;
gap: 1rem;
height: 100%;
justify-content: center;
background: #f0f6f6;
flex-direction: column;
width: 60%;
}
@media (max-width: 1440px) {
.doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container .doctor-info {
padding-left: calc(44px + (108 - 44) * (100vw - 320px) / 1120);
}
}
@media (max-width: 1440px) {
.doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container .doctor-info {
padding-right: calc(44px + (108 - 44) * (100vw - 320px) / 1120);
}
}
@media (max-width: 1000px) {
.doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container .doctor-info {
justify-content: start;
padding-top: 1.5rem;
padding-top: 24px;
padding-bottom: 24px;
width: 100%;
gap: 16px;
}
}
.doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container .doctor-info h1 {
color: #000000;
text-align: start;
}
.doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container .doctor-info * {
max-width: 824px;
text-align: start;
}
.doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container .doctor-info p, .doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container .doctor-info a, .doctor-wrapper .main .hero-section-wrapper .hero-section .hero_content .container .doctor-info span {
font-size: 1.25rem;
line-height: 150%;
}
.contact-wrapper .main {
padding-top: 184px;
}
@media (max-width: 1440px) {
.contact-wrapper .main {
padding-top: calc(144px + (184 - 144) * (100vw - 320px) / 1120);
}
}
.contact-wrapper .main .container {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 964px;
height: 100%;
}
@media (max-width: 968px) {
.contact-wrapper .main .container {
grid-template-columns: repeat(1, 1fr);
max-width: -moz-fit-content;
max-width: fit-content;
}
}
.contact-wrapper .main .container .contact-info-wrapper {
display: flex;
justify-content: center;
}
.contact-wrapper .main .container .contact-info-wrapper .contact-info {
display: flex;
flex-direction: column;
height: -moz-fit-content;
height: fit-content;
padding: 4rem 3rem;
gap: 0.75rem;
box-shadow: 0px 0px 10px 1px rgba(175, 175, 175, 0.25);
}
.contact-wrapper .main .container .contact-info-wrapper .contact-info ul {
display: flex;
flex-direction: column;
margin-top: 0.5rem;
gap: 0.75rem;
}
.contact-wrapper .main .container .contact-info-wrapper .contact-info ul li {
display: flex;
align-items: center;
gap: 0.75rem;
}
.contact-wrapper .main .container .contact-info-wrapper .contact-info ul li .icon {
width: 1.25rem;
}
.contact-wrapper .main .container #wpforms-submit-353 {
padding-top: 1rem;
padding-bottom: 1rem;
padding-right: 2.75rem;
padding-left: 2.75rem;
position: relative;
width: -moz-fit-content;
width: fit-content;
background: #5F7B1E;
color: #ffffff;
border-radius: 60px;
font-size: 1.25rem;
line-height: auto;
font-weight: 500;
width: auto;
height: auto;
}
@media (max-width: 1440px) {
.contact-wrapper .main .container #wpforms-submit-353 {
padding-top: calc(1rem + (1 - 1) * (100vw - 320px) / 1120);
}
}
@media (max-width: 1440px) {
.contact-wrapper .main .container #wpforms-submit-353 {
padding-bottom: calc(1rem + (1 - 1) * (100vw - 320px) / 1120);
}
}
@media (max-width: 1440px) {
.contact-wrapper .main .container #wpforms-submit-353 {
padding-right: calc(2rem + (2.75 - 2) * (100vw - 320px) / 1120);
}
}
@media (max-width: 1440px) {
.contact-wrapper .main .container #wpforms-submit-353 {
padding-left: calc(2rem + (2.75 - 2) * (100vw - 320px) / 1120);
}
}
@media (hover: hover) {
.contact-wrapper .main .container #wpforms-submit-353:hover {
background-color: #16213e;
}
}
@media (max-width: 1300px) {
.contact-wrapper .main .container #wpforms-submit-353 {
font-size: 1rem;
}
}
.contact-wrapper .main .container #wpforms-submit-353.reverse-btn {
background: transparent;
color: #5F7B1E;
border: 2px solid #5F7B1E;
}
@media (hover: hover) {
.contact-wrapper .main .container #wpforms-submit-353.reverse-btn:hover {
background-color: #5F7B1E;
color: #ffffff;
}
}
.leistung-wrapper .service-description .container {
gap: 1.5rem;
padding: 2rem;
}
.leistung-wrapper .service-description .container div,
.leistung-wrapper .service-description .container img {
width: 100%;
max-height: 50%;
flex: 1;
}
@media (max-width: 768px) {
.leistung-wrapper .service-description .container {
flex-direction: column !important;
}
.leistung-wrapper .service-description .container div,
.leistung-wrapper .service-description .container img {
max-width: 100%;
}
}
.leistung-wrapper .service-description div {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
}
.leistung-wrapper .reversed {
background: #f8f8f8;
}
.leistung-wrapper .reversed .container {
flex-direction: row-reverse;
}
.footer {
background-image: url(//dental-familie.de/wp-content/themes/dental-familie/images/footer-bg.webp);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding-top: 80px;
}
.footer .footer__container .footer-content {
display: flex;
gap: 3rem;
}
@media (max-width: 1000px) {
.footer .footer__container .footer-content {
flex-direction: column;
}
}
.footer .footer__container .footer-content .working-time {
line-height: 2;
}
.footer .footer__container .footer-content .footer-socials {
display: flex;
flex-direction: row;
}
.footer .footer__container .footer-content .footer-socials a {
background: #5F7B1E;
padding: 1rem;
border-radius: 50%;
}
.footer .footer__container .footer-content .footer-socials a img {
max-width: 20px;
}
.footer .footer__container .footer-content p,
.footer .footer__container .footer-content a,
.footer .footer__container .footer-content li {
font-size: 1rem;
line-height: 150%;
font-weight: 300;
color: #6e6e6e;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer .footer__container .footer-content img {
max-width: 320px;
}
.footer .footer__container .footer-content .icon {
width: 1.25rem;
}
.footer .footer__container .footer-content div {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media (max-width: 1000px) {
.footer .footer__container .footer-content div {
width: 100%;
}
}
.footer .footer__container .footer-content div .logo {
height: 76px;
width: -moz-min-content;
width: min-content;
}
.footer .footer__container .footer-content div ul {
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 1000px) {
.footer .footer__container .footer-content div:first-child {
width: 30%;
}
}
.footer .footer__container .copyright {
margin: 3.25rem auto;
width: 100%;
text-align: center;
font-size: 1.25rem;
line-height: 150%;
font-weight: 300;
color: #6e6e6e;
letter-spacing: 1px;
}
@media (max-width: 1000px) {
.footer .footer__container .copyright {
margin: 36px 0;
}
}
@media (min-width: 425px) {
.footer .footer__container .copyright {
white-space: nowrap;
}
}
.footer .footer__container .copyright a {
color: #5F7B1E;
text-decoration: none;
}
.swiper-slide {
width: auto; flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
.blog-img {
max-width: 100%;
height: auto;
}
.error-404-container {
margin: auto;
}
.error-404-container .error-404 {
display: flex;
max-width: 900px;
gap: 4rem;
margin: 0 auto;
align-items: center;
}
@media (max-width: 575px) {
.error-404-container .error-404 {
flex-direction: column;
gap: 2rem;
}
}
.error-404-container .error-404 img {
max-width: 350px;
}
.error-404-container .error-404 div {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (max-width: 575px) {
.error-404-container .error-404 div {
align-items: center;
text-align: center;
}
.error-404-container .error-404 div * {
max-width: 350px;
}
}
.error-404-container .error-404 div h1 { }
.error-404-container .error-404 div p {
margin-bottom: 0.5rem;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}