/*
Theme Name: Dr. Doryumu.de
Text Domain: doryumu
Description: A custom theme for Dr. Doryumu.de
Author: Daniel
Author URI: https://doryumu.de
Version: 2.0
License: Internal IT
*/

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Navbar Styles */
.navbar {
    height: 11rem;
    background-color: #071A38;
    padding: 0 2rem; 
}

.navbar-brand {
    margin-top: 0.2rem;
    height: 5.5rem;
}

.navbar-nav {
    margin-top: 3rem;
    font-weight: bold;
    font-size: 0.9rem;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-link:hover {
    color: #8faeff;
    cursor: pointer;
}

/* Mega Menu Styles */
.mega-item {
    margin-right: 5rem;
    text-align: center;
    font-size: 0.9rem;
    color: white;
    text-decoration: none;
    display: block;
    transition: transform 0.2s;
}

.mega-item:hover {
    transform: scale(1.05);
    color: #8faeff;
}

.mega-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.mega-label {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Dropdown Menu Styles */
.dropdown-menu {
    left: 0;
    right: 0;
    top: 100%;
    background-color: #071A38;
    padding: 1rem;
    border: #071A38;
    display: none;
    transition: opacity 0.3s ease-in-out;
}

/* Dropdown open on hover (desktop only) */
@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .services-section {
        flex-direction: column;
        padding: 30px;
    }
}

/* Mega Dropdown */
.mega-dropdown:hover .mega-menu {
    display: flex;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #0b1d3e;
    padding: 2rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    gap: 3rem;
    z-index: 1000;
}

.team-section {
    width: 220px;
    text-align: center;
    font-size: 0.9rem;
}

.team-section img {
    width: 200px;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.team-section h3 {
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0.5rem 0;
}

.team-section a {
    color: #a3b4ff;
    font-weight: 400px;
    text-decoration: underline;
}

.team-section a:hover {
    color: #ffffff;
}

.megaMenu-content > .txt-service {
    margin-top: 2.5rem;
    text-align: left;
    font-weight: bold;
    color: #a3b4ff;
}

.megaMenu-content > p {
    margin-top: 1rem;
    text-align: left;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: normal;
}

.tm-megaMenu-content > .tm-txt-h {
    color: #a3b4ff;
    margin-top: 2.5rem;
    font-weight: bold;
}

.tm-megaMenu-content > p {
    margin-top: 1rem;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: normal;
}

.landstuhl-contact {
    position: absolute;
    top: -0.1rem;
    right: 27rem;
    padding: 1rem;
    text-align: center;
}

.k-town-contact {
    position: absolute;
    top: -0.1rem;
    right: 15rem;
    padding: 1rem;
    text-align: center;
}

.landstuhl-n,
.k-town-n {
    color: #a3b4ff;
    font-size: 0.95rem;
    font-weight: bold;
}

.ph-nummer-l > a,
.ph-nummer-k > a {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: normal;
    text-decoration: none;
}

.ringer-mm-n {
    position: absolute;
    top: -3rem;
    left: -24rem;
    padding: 0.5rem;
    animation: heartbeat 1.5s infinite;
    display: inline-block;
    color: #a3b4ff;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}

@keyframes heartbeat {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.ringer-mm-n:hover {
    animation: pulse 1s infinite;
}

.termin > a {
    margin-top: 3.4rem;
    background-color: #a3b4ff;
    color: #071A38;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 30px;
    padding-left: 2rem;
    padding-right: 2rem;
}

.termin > a:hover {
    background-color: #FDF8F3;
    color: #071A38;
}

.termin-i-m > a {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 30%; 
    padding: 1rem;
    background-color: #a3b4ff;
    color: #071A38;
    border: none;
    text-align: center;
    font-size: 1.4rem;
    z-index: 1000;
    display: none; 
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    font-weight: bold;
}

.termin-i-m:hover a {
    background-color: #FDF8F3;
    color: #071A38;
}


@media (max-width: 480px) {
    .navbar-brand {
      margin-top: 0.2rem;
      height: 4.6rem;
      width: 11.3rem;
      overflow: hidden;
    }
  
    .navbar-toggler {
      border: none;
      font-size: 1.5rem;
      color: #fff;
      position: absolute;
      top: 5.2rem;
      right: 15px;
    }
  
    .ringer-mm-n.phone-icon,
    .landstuhl-contact,
    .k-town-contact,
    .termin,
    .termin-i-m {
      visibility: hidden;
      display: none;
    }
  
    .offcanvas-end {
      background-color: #071A38;
    }
  
    .hg-menu {
      align-items: center;
      font-size: 1rem;
    }
  
    .nav-link {
      color: white;
    }
  }
  
  @media (min-width: 481px) and (max-width: 768px) {
    .navbar-nav > .nav-item {
      font-size: 1rem;
      gap: 0.5rem;
    }
  
    .navbar-brand {
      margin-top: 0.5rem;
      height: 4.0rem;
      width: 11rem;
      overflow: hidden;
    }
  
    .navbar-toggler {
      border: none;
      font-size: 1.5rem;
      color: #fff;
      position: absolute;
      top: 5.7rem;
      right: 20px;
    }
  
    .offcanvas-end {
      width: 300px;
      background-color: #071A38;
      color: white;
    }
  
    .hg-menu {
      align-items: center;
      font-size: 2rem;
    }
  
    .btn-close {
      color: white;
    }
  
    .nav-link {
      font-size: 1.2rem;
      color: white;
    }
  
    .landstuhl-contact,
    .k-town-contact {
      font-size: 0.7rem;
      padding: 0.5rem;
    }
  
    .landstuhl-n,
    .k-town-n {
      font-size: 0.7rem;
    }
  
    .ph-nummer-l > a,
    .ph-nummer-k > a {
      font-size: 0.7rem;
    }
  
    .termin > a {
      font-size: 0.6rem;
      padding: 0.2rem 0.5rem;
      font-weight: bold;
      display: none;
    }
  
    .team-section {
      width: 200px;
      text-align: center;
      font-size: 0.8rem;
    }
  
    .mega-item {
      margin-right: 4rem;
      text-align: center;
      font-size: 0.6rem;
      color: white;
      text-decoration: none;
      display: block;
      transition: transform 0.2s;
    }
  
    .ringer-mm-n {
        visibility: hidden;
        display: none;
    }
    .k-town-contact {
      right: 18rem;
      top: 1rem;
    }
  
    .landstuhl-contact {
      right: 26.4rem;
      top: 1rem;
    }
  
    .termin-i-m > a {
      display: block;
    }
  
    .hm-sc-bgg {
      position: fixed;
      left: 42rem;
      top: 5.5rem;
      transform: scale(1.2);
      cursor: pointer;
      z-index: 1001;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    #navbarSupportedContent {
      background-color: #071A38;
    }
  
    .navbar-collapse.collapse.show {
      width: 150%;
      opacity: 1;
    }
  
    .landstuhl-contact {
      top: -0.1rem;
      right: 20rem;
      padding: 1rem;
    }
  
    .k-town-contact {
      top: -0.1rem;
      right: 10rem;
      padding: 1rem;
    }
  
    .landstuhl-n,
    .k-town-n {
      color: #a3b4ff;
      font-size: 0.95rem;
      font-weight: bold;
    }
  
    .ph-nummer-l > a,
    .ph-nummer-k > a {
      color: #ffffff;
      font-size: 0.95rem;
      font-weight: normal;
      text-decoration: none;
    }
  }
  
  @media (min-width: 769px) and (max-width: 912px) {
    .navbar-brand {
      height: 3.5rem;
      width: 9rem;
    }
  
    .termin > a {
      display: none;
    }
  
    .navbar-toggler {
      border: none;
      font-size: 1.5rem;
      color: #fff;
      position: absolute;
      top: 5.7rem;
      right: 20px;
    }
    .ringer-mm-n {
        position: absolute;
        top: -3rem;
        left: -15.5rem;
        padding: 0.4rem;
        animation: heartbeat 1.5s infinite;
        display: inline-block;
        color: #a3b4ff;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
      }

      .offcanvas-end {
        width: 300px;
        background-color: #071A38;
        color: white;
      }

      .hg-menu {
        align-items: center;
        font-size: 1.2rem;
        color: #fff;
    }

    .nav-link {
        color: white;
    }

    .landstuhl-contact {
        right: 25rem;
    }

    .k-town-contact {
        right: 14.5rem;
    }


    @media (max-width: 540px) {
        .ringer-mm-n {
            display: none;
        }
        
    }
    

  }
  
  @media (min-width: 913px) and (max-width: 1030px) {
    .navbar-nav > .nav-item {
      font-size: 1.2rem;
      gap: 0.6rem;
    }
  
    .navbar-brand {
      margin-top: 0.7rem;
      height: 3rem;
      width: 8rem;
    }
  
    .navbar-nav > .nav-link {
      font-size: 1rem;
    }
  
    .landstuhl-contact,
    .k-town-contact {
      font-size: 0.8rem;
      padding: 0.6rem;
    }
  
    .landstuhl-n,
    .k-town-n {
      font-size: 0.8rem;
    }
  
    .ph-nummer-l > a,
    .ph-nummer-k > a {
      font-size: 0.8rem;
    }
  
    .termin > a {
      font-size: 0.7rem;
      padding: 0.3rem 0.7rem;
      font-weight: bold;
    }
  
    .team-section {
      width: 220px;
      text-align: center;
      font-size: 0rem;
    }
  
    .mega-item {
      margin-right: 5rem;
      text-align: center;
      font-size: 0.7rem;
      color: white;
      text-decoration: none;
      display: block;
      transition: transform 0.2s;
    }
  
    .ringer-mm-n {
      position: absolute;
      top: -3.3rem;
      left: -26rem;
      padding: 0.5rem;
      animation: heartbeat 1.5s infinite;
      display: inline-block;
      color: #a3b4ff;
      font-size: 1.2rem;
      font-weight: bold;
      text-align: center;
    }
  
    @keyframes heartbeat {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
    }
  
    .ringer-mm-n:hover {
      animation: pulse 1s infinite;
    }
  
    .k-town-contact {
      right: 15.5rem;
    }

    .navbar-nav > .nav-item {
      font-size: 0.8rem;
    }


  }
  
  @media (min-width: 913px) and (max-width: 1199px) {
    .navbar-nav > .nav-item {
      font-size: 1.5rem;
      gap: 0.8rem;
    }
  
    .navbar-brand {
      height: 3.5rem;
      width: 9rem;
    }
  
    .nav-link {
      font-size: 0.7rem;
    }
  
    .landstuhl-contact,
    .k-town-contact {
      font-size: 1rem;
      padding: 0.8rem;
    }
  
    .landstuhl-n,
    .k-town-n {
      font-size: 1rem;
    }
  
    .ph-nummer-l > a,
    .ph-nummer-k > a {
      font-size: 0.8rem;
    }
  
    .termin > a {
      font-size: 0.8rem;
      padding: 0.5rem 1rem;
    }
  }
  
  @media (max-width: 1271px) and (min-width: 1200px) {
    .navbar-nav > .nav-item {
      font-size: 0.75rem;
    }
    .navbar-brand {
      margin-top: 0.2rem;
      height: 5.5rem;
  }
    
  }

  @media (max-width: 1005px) and (min-width: 992px) {
    .navbar-nav > .nav-item {
      font-size: 0.6rem;
    }
  }

  @media (max-width: 991px) and (min-width: 913px) {
    .termin > a {
      display: none;
    }

    .navbar-toggler {
      border: none;
      font-size: 1.5rem;
      color: #fff;
      position: absolute;
      top: 5.7rem;
      right: 20px;
    }
    .ringer-mm-n {
      position: absolute;
      top: -3.3rem;
      left: -13.5rem;
      padding: 0.5rem;
      animation: heartbeat 1.5s infinite;
      display: inline-block;
      color: #a3b4ff;
      font-size: 1.2rem;
      font-weight: bold;
      text-align: center;
    }

    .offcanvas-end {
      width: 300px;
      background-color: #071A38;
      color: white;
    }

    .hg-menu {
      align-items: center;
      font-size: 1.2rem;
      color: white;
    }
    .nav-link { 
        color: white;
        font-size: 1.2rem;
    }
   
    .über-uns-conn {
      flex-direction: row;
    }

    .über-uns-1-1,.über-uns-1-2 {
      flex: 1
    }
    .about-section h2 {
      font-size: 2rem;
    }


  }
  


  

  @media (max-width: 1199px) and (min-width: 1031px) {
    .ringer-mm-n {
        position: absolute;
        top: -3.3rem;
        left: -26.5rem;
        padding: 0.5rem;
        animation: heartbeat 1.5s infinite;
        display: inline-block;
        color: #a3b4ff;
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
    }
  }
  




.sophisticated-footer {
    display: block;
    background-color: #0d1b2a;
    padding: 40px 40px;
    color: #ffffff;
}


.sophisticated-newsletter h2 {
    color: white;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.sophisticated-newsletter p {
    font-size: 0.95rem;
    margin: 5px 0;
    color: white;
}

.sophisticated-newsletter form {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

input[type="email"]::placeholder {
    border-bottom: 2px solid #ffffff;
    color: #ffffff;
    padding-left: 0;
}

#newsletterForm > button {
    max-width: 360px;

}


.sophisticated-newsletter button {
    padding: 10px;
    border: 2px solid #ffffff;
    background-color: transparent;
    color: #ffffff;
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
}

.ns-letter-summit {
    padding: 10px;
    border: 2px solid #ffffff;
    background-color: transparent;
    color: #ffffff;
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
}

.ns-letter-summit:hover {
    background-color: #a3b4ff;
}

.sophisticated-hours-kl > .ktown,
.sophisticated-hours-lan > .lan {
    color: #89aaff;
}

.OP-time-f--1,
.contact-title {
    color: white;
}

.f-form--1 > h2 {
    color: #ffffff;
}

@media (max-width: 1020px) and (min-width: 768px) {
    .hours-wrapper {
        grid-template-columns: 1fr; 
    }

    .sophisticated-contact {
      visibility: hidden;
    }

    .f-form--1.col-md-6,
    .f-form--2.col-md-6,
    .f-form--1.col-md-6 {
      width: 35%;
    }




}
.sophisticated-menu ul {
    list-style: none;
    padding: 0;
}

.sophisticated-menu li {
    margin-bottom: 10px;
}

.sophisticated-menu a {
    color: #ffffff;
    text-decoration: underline;
}

.sophisticated-menu h2 {
    color: white;
}

.sophisticated-contact{
    text-decoration: none;
}

.sophisticated-contact .sophisticated-book-btn {
    margin-top: 20px;
    background-color: #89aaff;
    color: #000;
    padding: 12px 24px;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
}

.footer-bottom {
    background-color: #91abff;
    color: #061836;
    font-size: 0.9rem;
    font-weight: 500;
  }

  .footer-bottom a.footer-bottom-link {
    color: #061836;
    font-weight: 700;
    text-decoration: none;
  }

  .footer-bottom a.footer-bottom-link:hover {
    color:#ffffff;
  }
  


  @media (max-width: 1024px) and (min-width: 768px) {
    .f-form--1 > h2 {
        font-size: 18px;
    }

    .f-form--1 > p {
        font-size: 10px;
        text-align: justify;

    }

    .newsletter-input {
        width: 70%;
    }

    #newsletterForm > button {
        max-width: 68%; 
        height: 50%; 
        padding: 4px;
        font-size: 12px;
    }

    input[type="email"]::placeholder {
        font-size: 12px;
    }

    .OP-time-f--1 {
        font-size: 18px;
    }

    .hours-location > strong {
        font-size: 12px;
    }

    .hours-location > p {
        font-size: 10px;

    }

    .sophisticated-menu {
        font-size: 12px;
    }

    .sophisticated-menu ul li {
       font-size: 10px
    }

    .sophisticated-contact > .contact-title {
        font-size: 18px;
    }

    .sophisticated-contact {
        font-size: 12px;
    }

    .sophisticated-contact .sophisticated-book-btn {
        font-size: 12px;
        padding: 6px 14px;
    }


  }


  @media (max-width:912px) and (min-width: 767px) {

    .f-form--1 > h2 {
        font-size: 18px;
    }

    .f-form--1 > p {
        font-size: 10px;
        text-align: justify;

    }

    .newsletter-input {
        width: 70%;
    }

    #newsletterForm > button {
        max-width: 68%; 
        height: 50%; 
        padding: 4px;
        font-size: 12px;
    }

    input[type="email"]::placeholder {
        font-size: 12px;
    }

    .OP-time-f--1 {
        font-size: 18px;
    }

    .hours-location > strong {
        font-size: 12px;
    }

    .hours-location > p {
        font-size: 10px;

    }

    .sophisticated-menu {
        font-size: 12px;
    }

    .sophisticated-menu ul li {
       font-size: 10px
    }

    .sophisticated-contact > .contact-title {
        font-size: 18px;
    }

    .sophisticated-contact {
        font-size: 12px;
    }

    .sophisticated-contact .sophisticated-book-btn {
        font-size: 12px;
        padding: 8px 16px;
    }
   

  }


  @media (max-width:768px) {
    .f-form--1 > h2 {
        font-size: 25px;
    }
    .f-form--1 > p {
        font-size: 10px;
        text-align: justify;
    }
    .OP-time-f--1 {
        font-size: 25px;
    }
   .sophisticated-hours-lan, 
   .sophisticated-hours-kl {
        font-size: 13.3px;
   }

   .sophisticated-menu > .menu-title{
        font-size: 25px;
   }

   .sophisticated-menu ul li {
        font-size: 12px;
   }
   .sophisticated-contact > .contact-title {
        font-size: 25px;
   }
   .sophisticated-contact > p {
        font-size: 10px;

   }
   .sophisticated-contact .sophisticated-book-btn {
        padding: 10px 10px;
   }

  }

  @media (max-width:344px) {
    .sophisticated-contact .sophisticated-book-btn {
        padding: 10px 3px;
   }

  }


 


 /* CSS for Frontpage <main> (ipads and mobile are below) */

.hm-here-content {
    padding: 4rem;
    text-align: center;
    margin-top: -8rem;
}

.hm-here-content h1 {
    font-family: 'playfair-display', serif;
    font-size: 53px;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #071A38;
    padding-bottom: 0.5rem;
}

.hm-here-content p {
    font-size: 1.5rem;
    color: #071A38;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.hm-here-content a {
    background-color: #071A38;
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
}

.hm-here-content a:hover {
    background-color: #a3b4ff;
    color: #071A38;
}


 .offer-section {
    background-color: #FDF8F3;
    color: #0a1a3d;
 }
.offer-section h2 {
    font-size: 50px;
    font-weight: bold;
    font-family: 'playfair-display', serif;
    text-align: center;
}


.offer-card-mm-1,
.offer-card-mm-2,
.offer-card-mm-3
 {
    background-color: #FDF8F3;
    border: 0;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.offer-card-content-1 > img,
.offer-card-content-2 > img,
.offer-card-content-3 > img 
 {
    width: 184px;
    height: 176px;
}

.offer-title-1,
.offer-title-2,
.offer-title-3 {
    font-family: 'playfair-display', serif;
    font-weight: bold;
}

.offer-text,
.offer-text-2,
.offer-text-3 {
    font-size: 1.1rem;
    color: #071A38;
}
.offer-link-1,
.offer-link-2,
.offer-link-3 {
    font-weight: bold;
    text-decoration: none;
    font-size: 1rem;
}

.offer-link-1:hover,
.offer-link-2:hover,
.offer-link-3:hover {
    color: #071A38;
}

.scroll-section {
    height: 45vh;
}

.treatment-container {
    margin-left: 2rem;
    
}
.scroll-section-1 {
    background-color:#051537;
}
.scroll-section {
    background-color: #FDF8F3;
}

.treatment-section {
    background-color: #FDF8F3;
    padding: 80px 20px;
}

.treatment-heading > h2 {
    font-size: 3.2rem;
    font-weight: bold;
    font-family: 'playfair-display', serif;
}

.treatment-heading > p {
    font-size: 1rem;
    color: #071A38;
}

.btn-custom {
    background-color: #7da3ff;
    color: #fff;
    border-radius: 999px;
    padding: 10px 25px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-custom:hover {
    background-color: #071A38;
    color: white;
}

.card-carousel {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
}

.card-carousel img {
    height: 350px;
    object-fit: cover;
    width: 100%;
}

.card-carousel > a > div {
    font-size: 1.2rem

}

.ccustom-prev-btn,
.custom-next-btn {
    width: 40px;
    height: 25%; 
    background-color: #0a1a3d;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.custom-icon-prev,
.custom-icon-next {
    background-size: 75% 75%;
}

.scroll-section-1 {
    height: 45vh;
}

.stats-section {
    background-color: #051537;
    color: #fff;
    padding: 80px 0;
}

.stats-title {
    font-size: 2.8rem;
    font-weight: bold;
    color: #fff;
}

.stat-card {
    background: transparent;
    padding: 30px 10px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-icon {
    font-size: 3.2rem; 
    color: #7da3ff;
    margin-bottom: 15px;
}

.stat-number {
    font-size: 2.4rem;
    font-weight: 600;
    color: #a4b7ff;
}

.stat-label {
    font-size: 1.1rem;
    margin-top: 5px;
    color: #d4dfff;
}

.testimonial-section {
    background-color: #FDF8F3;
    padding: 4rem 1rem;
}

.testimonial-title {
    font-family: 'playfair-display', serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: #0b2240;
    margin-bottom: 2rem;
}

.testimonial-text {
    font-size: 1.5rem;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
    color: #0b2240;
    line-height: 1.6;
}

.testimonial-source {
    font-size: 1rem;
    font-weight: 600;
    color: #0b2240;
    text-decoration: underline;
    margin-top: 2rem;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: inline-block;
    font-size: 2rem;
    color: #0b2240;
    background-image: none;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    opacity: 1;
    height: 25%;
}

.carousel-control-prev span,
.carousel-control-next span {
    font-size: 2rem;
}

.chief-message {
    background-color: #0b1b3a;
    color: #ffffff;
    padding: 80px 0;
}

.chief-grid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1.5rem;
}

.chief-message h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #a4b7ff;
}

.chief-message .quote {
    font-style: italic;
    font-size: 1.1rem;
    color: #dbe2ff;
    position: relative;
    padding-left: 30px;
}

.chief-message .quote::before {
    content: "“";
    font-size: 3rem;
    color: #ffffff;
    position: absolute;
    left: 0;
    top: -10px;
}

.chief-message .quote::after {
    content: "”";
    font-size: 3rem;
    color: #ffffff;
    position: absolute;
    right: -15px;
    bottom: -20px;
}

.chief-message .chief-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: #a4b7ff;
    margin: 0;
}

.chief-img {
    border-radius: 35px;
    padding: 10px;
    max-width: 65%; 
}

.angebote-section {
    background-color: #FDF8F3;
    padding: 60px 0;
    text-align: center;
  }
  .angebote-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    font-family: 'playfair-display', serif;
    color: #0b1b3a;
    margin-bottom: 50px;
  }
  
  .angebot-item img {
    max-height: 80px;
    margin-bottom: 20px;
    object-fit: contain;
  }

  .angebot-item p {
    font-size: 1rem;
    color: #0b1b3a;
    font-weight: 500;
    max-width: 220px;
    margin: 0 auto;
  }

  .angebot-item:hover img {
    transform: translateY(-10px) scale(0.95);
    transition: transform 0.3s ease-in-out;
  }
    .angebot-item:hover p {
        color: black;
        transition: color 0.3s ease-in-out;
    }

  @media (max-width: 768px) {
    .angebot-item {
      margin-bottom: 40px;
    }
  }

  .standorte-section {
    background-color:#0b1b3a;
    color: white;
    padding: 60px 0;
    text-align: center;
  }

  .standorte-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .standorte-section p.subtitle {
    font-size: 1.1rem;
    margin-bottom: 50px;
    color: #d1d1d1;
  }

  .standort-item {
    text-align: center;
    margin-bottom: 40px;
  }

  .standort-item img {
    border-radius: 20px;
    border-radius: 20px;
    width: 100%;
    height: 255px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  .standort-item p {
    margin-top: 15px;
    font-size: 1rem;
    font-weight: 500;
  }

.standort-item:hover img {
    transform: translateY(-10px) scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.standort-item:hover p {
    color: #a3b4ff;
    transition: color 0.3s ease-in-out;
}

  @media (max-width: 767.98px) {
    .location-card img {
      height: 180px;
    }
  }


  .section-container {
    display: flex;
    flex-direction: row;
    background-color: #FDF8F3;
  }

  .map {
    width: 800px;
    height: 718px;
  }

  .OP-content {
    width: 50%;
    padding: 60px 40px;
    background-color: #fffaf5;
  }

  .section-title {
    font-size: 3rem;
    font-weight: bold;
    font-family: 'playfair-display', serif;
    color: #0b1b3a;
    margin-bottom: 40px;
  }

  .clinic-block {
    margin-bottom: 30px;
  }

  .clinic-name{
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .clinic-location{
    color: #5b6fd3;
    font-weight: 500;
    text-decoration: none;
    
  }

  .time-block {
    font-weight: 600;
    margin-top: 15px;
  }

  .time-range {
    font-weight: 400;
    margin-bottom: 5px;
  }

  .divider {
    width: 60px;
    height: 2px;
    background-color: #5b6fd3;
    margin: 20px 0;
  }

  .contact-info {
    font-size: 0.95rem;
    color: #000;
  }

  @media (max-width: 992px) {
    .section-container {
      flex-direction: column;
    }
    .map,
      .content {
        width: 100%;
        height: auto;
      }

      .content {                
        padding: 40px 20px;
      }
    }




    @media (max-width: 1024px) and (min-width: 768px) {
        .hm-here-content {
            padding: 2rem;
            margin-top: -4rem;
        }
    
        .hm-here-content h1 {
            font-size: 32px;
        }
    
        .hm-here-content p {
            font-size: 1rem;
        }
    
        .hm-here-content a {
            padding: 0.6rem 1.5rem;
            font-size: 0.8rem;
        }
        .offer-section h2 {
            font-size: 30px;

        }
        .offer-card-content-1 > img,
        .offer-card-content-2 > img,
        .offer-card-content-3 > img {
            width: 110px;
            height: 106px
        }


        .offer-title-1,
        .offer-title-2,
        .offer-title-3 {
            font-family: 'playfair-display', serif;
            font-weight: bold;
            font-size: 25px;
        }


        .offer-text,
        .offer-text-2,
        .offer-text-3 {
            font-size: 9.5px;
            color: #071A38;
        }

        .offer-link-1,
        .offer-link-2,
        .offer-link-3 {
            font-weight: bold;
            text-decoration: none;
            font-size: 9.5px;
        }

        .scroll-section { 
            height: 30vh;
        }

        .treatment-heading > h2 {
            font-size: 28px;
            font-weight: bold;
           
        }

        .treatment-heading > p {
            font-size: 12.5px;
            color: #071A38;
        }

        .btn-custom {
            background-color: #7da3ff;
            color: #fff;
            border-radius: 999px;
            padding: 5px 15px; 
            font-weight: 500;
            font-size: 0.8rem; 
            transition: background-color 0.3s ease;
        }

        .card-carousel img {
            height: 250px; 
            object-fit: cover;
            width: 100%;
        }

        .card-carousel > a > div,
        .card-carousel > div{
            font-size: 12px;
        
        }

        .scroll-section-1 {
            height: 30vh;
            
        }
        .stats-title {
            font-size: 2.0rem;
            font-weight: bold;
            color: #fff;
        }

        .stat-number {
            font-size: 2.0rem;
            font-weight: 600;
            color: #a4b7ff;
        }
        
        .stat-label {
            font-size: 1rem;
            margin-top: 5px;
            color: #d4dfff;
        }


        .testimonial-title {
            font-size: 2.0rem;

        }
        
        .testimonial-text {
            font-size: 1rem;
            
        }
        
        .testimonial-source {
            font-size: 1rem;
            
        }

        .map > iframe {
            width: 500px
        }

        .OP-content {
            width: 80%;
        }

        

    }

       
    
    @media (max-width:912px) and (min-width: 767px) {
       
        .hm-here-content {
            padding: 2rem;
            margin-top: -1rem;
        }
    
        .hm-here-content h1 {
            font-size: 24px;
        }
    
        .hm-here-content p {
            font-size: 0.8rem;
        }
    
        .hm-here-content a {
            padding: 0.6rem 1.5rem;
            font-size: 0.7rem;
        }
        .offer-section h2 {
            font-size: 27px;

        }

        .offer-card-content-1 > img,
        .offer-card-content-2 > img,
        .offer-card-content-3 > img {
            width: 110px;
            height: 106px
        }

        .offer-title-1,
        .offer-title-2,
        .offer-title-3 {
            font-family: 'playfair-display', serif;
            font-weight: bold;
            font-size: 18px;
        }

        .offer-text,
        .offer-text-2,
        .offer-text-3 {
            font-size: 8px;
            color: #071A38;
        }

        .offer-link-1,
        .offer-link-2,
        .offer-link-3 {
            font-weight: bold;
            text-decoration: none;
            font-size: 9px;
        }

        .scroll-section{ 
            height: 30vh;
        }

        .treatment-heading > h2 {
            font-size: 1.8rem;
            font-weight: bold;
           
        }

        .treatment-heading > p {
            font-size: 10px;
            color: #071A38;
        }

        .btn-custom {
            background-color: #7da3ff;
            color: #fff;
            border-radius: 999px;
            padding: 5px 15px; 
            font-weight: 500;
            font-size: 0.8rem; 
            transition: background-color 0.3s ease;
        }

        .card-carousel img {
            height: 250px; 
            object-fit: cover;
            width: 100%;
        }

        .card-carousel > a > div,
        .card-carousel > div{
            font-size: 12px;
        
        }

        .scroll-section-1 {
            height: 30vh;
            
        }

        .stats-title {
            font-size: 2.0rem;
            font-weight: bold;
            color: #fff;
        }

        .stat-number {
            font-size: 2.0rem;
            font-weight: 600;
            color: #a4b7ff;
        }
        
        .stat-label {
            font-size: 1.0rem;
            margin-top: 5px;
            color: #d4dfff;
        }


        .testimonial-title {
            font-size: 2.0rem;

        }
        
        .testimonial-text {
            font-size: 0.7rem;
            
        }
        
        .testimonial-source {
            font-size: 1rem;
            
        }



        .chief-message h2 {
            font-size: 2.0rem;
           
        }
        

        .chief-message .quote {
            font-style: italic;
            font-size: 0.9rem;
            color: #dbe2ff;
            position: relative;
            padding-left: 30px;
        }
        
        .chief-message .quote::before {
            content: "“";
            font-size: 2rem;
            color: #ffffff;
            position: absolute;
            left: 0;
            top: -10px;
        }
        
        .chief-message .quote::after {
            content: "”";
            font-size: 2rem;
            color: #ffffff;
            position: absolute;
            right: -15px;
            bottom: -20px;
        }
        
        .chief-message .chief-name {
            font-size: 1.8rem;
            font-weight: 700;
            color: #a4b7ff;
            margin: 0;
        }
        
        .chief-img {
            max-width: 50%;

            
            
        }

        .map > iframe {
            width: 758px;
        }

        .OP-content {
            width: 80%;
        }

        .section-title {
            font-size: 2.0rem;
        }


    }
    
    @media (max-width: 480px) {

        .carl-dy {
            order: 1; 
            display: flex; 
        }

        .dy-hmm-pg {
            order: 2; 
            display: flex; 
        }
 
         .hm-here-content {
            padding: 2rem;
            margin-top: -1rem;
        }
    
        .hm-here-content h1 {
            font-size: 30px;
            text-align: left;
        }

    
        .hm-here-content p {
            font-size: 15px;
            text-align: left;
        }
    
        .hm-here-content a {
            padding: 0.6rem 1.5rem;
            font-size: 0.7rem;
            
        }
        .offer-section h2 {
            font-size: 30px;

        }

        .offer-card-content-1 > img,
        .offer-card-content-2 > img,
        .offer-card-content-3 > img {
            width: 110px;
            height: 106px
        }

        .offer-title-1,
        .offer-title-2,
        .offer-title-3 { 
            font-size: 25px;
       
    }

        .offer-text,
        .offer-text-2,
        .offer-text-3 {
            font-size: 15px;
            color: #071A38;
        }

        .offer-link-1,
        .offer-link-2,
        .offer-link-3 {
            font-weight: bold;
            text-decoration: none;
            font-size: 16px;
        }

        .scroll-section{ 
            height: 30vh;
        }

        .treatment-heading > h2 {
            font-size: 30px;
            
           
        }

        .treatment-heading > p {
            font-size: 15px;
            color: #071A38;
            text-align: left;
        }

        .btn-custom {
            background-color: #7da3ff;
            color: #fff;
            border-radius: 999px;
            padding: 5px 15px; 
            font-weight: 500;
            font-size: 0.8rem; 
            transition: background-color 0.3s ease;
        }

        .card-carousel img {
            height: 250px; 
            object-fit: cover;
            width: 100%;
        }

        .card-carousel > a > div,
        .card-carousel > div{
            font-size: 14px;
        
        }

        .scroll-section-1 {
            height: 30vh;
            
        }

        .stats-title {
            font-size: 30px;
        }

        .stat-label {
            font-size: 15px;
            
        }

        .testimonial-title{
            font-size: 30px;
        }
        .testimonial-text {
            font-size: 12.5px;
            
        }

        .chief-grid > h2 {
            font-size: 30px;
        }

        .chief-message .quote {
            font-size: 13px;
            
        }

        .chief-message .chief-name {
            font-size: 20px;
        }
        
        .chief-message .quote::before {
            content: "“";
            font-size: 1.7rem;
            
        }
        
        .chief-message .quote::after {
            content: "”";
            font-size: 1.7rem;
            color: #ffffff;
            
        }

        .section-title {
            font-size: 30px;
        }

        .OP-content {
            width: 100%;
        }

        .map {
            width: 100%;
        }

        .map > iframe {
            width: 100%;
        }   

}

@media (min-width: 1332px) and (max-width: 1554px) {
    .hm-here-content {
        padding: 2rem;
        margin-top: -4rem;
        display: inline-block;
        transform: scale(0.9);   /* visually shrink */
        transform-origin: left center; /* keep aligned to checkbox */
  }
    

    .hm-here-content h1 {
      font-size: 50px;
      line-height: 1.2;
    }

    .hm-here-content p {
        font-size: 1rem;
    }

    .hm-here-content a {
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
    }
}

@media (min-width: 1104px) and (max-width: 1331px) {
    .hm-here-content {
        padding: 2rem;
        margin-top: -4rem;
        display: inline-block;
        transform: scale(0.95);   /* visually shrink */
        transform-origin: left center; /* keep aligned to checkbox */
  }
    

    .hm-here-content h1 {
      font-size: 40px;
      line-height: 1.2;
    }

    .hm-here-content p {
        font-size: 1rem;
    }

    .hm-here-content a {
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
    }
}


@media (min-width: 1025px) and (max-width: 1103px) {
    .hm-here-content {
        padding: 2rem;
        margin-top: -2rem;
        display: inline-block;
        transform: scale(0.95);   
        transform-origin: left center; 
  }
    

    .hm-here-content h1 {
      font-size: 30px;
      line-height: 1.2;
    }

    .hm-here-content p {
        font-size: 1rem;
    }

    .hm-here-content a {
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
    }
}

@media (min-width: 913px) and (max-width: 990px) {
    .hm-here-content {
        padding: 2rem;
        margin-top: -1rem;
        display: inline-block;
        transform: scale(0.95);   /* visually shrink */
        transform-origin: left center; /* keep aligned to checkbox */
  }
    

    .hm-here-content h1 {
      font-size: 30px;
      line-height: 1.2;
    }

    .hm-here-content p {
        font-size: 1rem;
    }

    .hm-here-content a {
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
    }

}


@media (max-width: 576px) {
    .carl-dy {
        order: 1; 
        display: flex; 
    }

    .dy-hmm-pg {
        order: 2; 
        display: flex; 
    }
      
    .hm-here-content {
        padding: 2rem;
        margin-top: -1rem;
        text-align: left;
  }
    

    .hm-here-content h1 {
      font-size: 30px;
      line-height: 1.2;
      text-align: left;
    
    }

    .hm-here-content p {
        font-size: 1rem;
        text-align: left;
    }

    .hm-here-content a {
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
    }

    .offer-section h2 {
      font-size: 30px;

  }

    .offer-card-content-1 > img,
    .offer-card-content-2 > img,
    .offer-card-content-3 > img {
        width: 110px;
        height: 106px
  }

      .offer-title-1,
      .offer-title-2,
      .offer-title-3 { 
          font-size: 25px;
    
}

    .offer-text,
    .offer-text-2,
    .offer-text-3 {
        font-size: 15px;
        color: #071A38;
  }

    .offer-link-1,
    .offer-link-2,
    .offer-link-3 {
        font-weight: bold;
        text-decoration: none;
        font-size: 16px;
  }

  .scroll-section-1 {
    height: 30vh;
    
}

.stats-title {
    font-size: 30px;
}

.stat-label {
    font-size: 15px;
    
}

.testimonial-title{
    font-size: 30px;
}
.testimonial-text {
    font-size: 12.5px;
    
}

.chief-grid > h2 {
    font-size: 30px;
}

.chief-message .quote {
    font-size: 13px;
    
}

.chief-message .chief-name {
    font-size: 20px;
}

.chief-message .quote::before {
    content: "“";
    font-size: 1.7rem;
    
}

.chief-message .quote::after {
    content: "”";
    font-size: 1.7rem;
    color: #ffffff;
    
}

.section-title {
    font-size: 30px;
}

.OP-content {
    width: 100%;
}

.map {
    width: 100%;
}

.map > iframe {
    width: 100%;
}  

.treatment-heading > h2 {
    font-size: 30px;
    font-weight: bold;

}

}





/* CSS for About-us */
.about-section .tag {
    font-size: 0.875rem;
    font-weight: bold;
    background-color: #FDF8F3;
    color: #071A38;
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
  }

  .about-section h2 {
    font-family: 'playfair-display', serif;
    font-size: 3.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .about-section p {
    color: #071A38;
    font-size: 1.2rem;
  }

  .about-section .btn-custom {
    border-radius: 1.5rem;
    padding: 0.5rem 1.5rem;
    font-weight: bold;
    background-color: #071A38;
  }

  .about-section .btn-custom:hover {
    background-color: #a3b4ff;
    color: #ffffff;
  }

  .about-section .stats h3 {
    font-size: 2.5rem;
    font-weight: bold;
  }

  .about-section .stats p {
    font-size: 1.2rem;
    color: #071A38;
  }

  @media (max-width: 768px) {
    .about-section h2 {
      font-size: 1.5rem;
    }
    .about-section .stats h3 {
      font-size: 1.25rem;
    }
  }

  .values-section {
    background-color: #071A38; 
    color: #ffffff;
  }

  .values-section .title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .values-section .subtitle {
    font-size: 1rem;
    color: #d1d1d1;
    margin-top: 1rem;
  }
  .text-mm-n {
    margin-top: 5rem;
  }
  .value-card {
    background-color: #7b9dff;
    color: #000;
    padding: 2rem;
    border-radius: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .value-card h4 {
    font-weight: bold;
    margin-bottom: 1rem;


  }

  .value-card p {
    font-size: 1rem;
    line-height: 1.5;
    line-clamp: 7;
  }
 

  @media (max-width: 767.98px) {
    .equal-height-sm {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .equal-height-sm .value-card {
      flex: 1;
    }

    .values-section .title,
    .values-section .subtitle {
      text-align: center;
    }
  }

  .offer-mm-section {
    background-color: #FDF8F3;
    padding: 3rem 1rem;
    position: relative;
    background-image: url('../images/toothooth.png'); 
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .Ang-title {
    font-size: 3.3rem;
    font-family: 'playfair-display', serif;
    font-weight: bold;
    color: #0b1b3a;
  }

  .Ang-text {
    font-size: 1rem
  }

.Angebot-bild {
    width: 368px; 
    height: auto;
    border-radius: 2rem;
    object-fit: cover;
}

.btn-primary-mm {
    background-color: #5c73f2;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 999px;
    font-weight: 500;
}

.btn-primary-mm:hover {
    background-color: #3f55d8;
    color: white;
}

.justify {
    text-align: justify;
  }

  @media (min-width: 768px) {
    .offer-text {
      padding-right: 2rem;
    }
  }

  @media (max-width: 1024px) and (min-width: 768px) {
    .about-section h2 {
        font-family: 'playfair-display', serif;
        font-size: 2.5rem;
        font-weight: 700;
       
      }

      .about-section p {
        color: #071A38;
        font-size: 0.8rem;
      }

      .about-section .stats h3 {
        font-size: 2.0rem;
      }

      .about-section .stats p {
        font-size: 1rem;
      }

      .value-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0.8rem;
       
      }

      .values-section .title {
        margin-top: -4rem;
        font-size: 2rem;
      }

      .value-card p { 
        font-size: 0.8rem;
      }

      .Ang-title {
        font-size: 2.5rem;
      }

      .Ang-text {
        font-size: 0.8rem;
      }



  }



  @media (max-width:912px) and (min-width: 767px) {

    .about-section h2 {
        font-family: 'playfair-display', serif;
        font-size: 1.7rem;
        font-weight: 700;
       
      }

      .value-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0.8rem;
    
       
      }

      .values-section .title {
        font-size: 2rem;
        line-height: 1.5;
        
      }

      .über-uns-1-2 > img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
      }


      .über-uns-1-2 {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .Ang-title {
        font-size: 30px;
      }


      .über-uns-conn {
        flex-direction: row;
      }

      .über-uns-1-1,.über-uns-1-2 {
        flex: 1
      }
      

  }

  @media (max-width: 540px) and (min-height: 720px) {
    .über-uns-conn {
        flex-direction: column;
      }

      .über-uns-1-2 {
        order: 1;
        margin-top: -3.0rem;
        max-width: 100%;
        padding: 0;

      }
      .über-uns-1-1 {
        order: 2;
        margin-top: 2rem
      }

      .about-section h2 {
        font-family: 'playfair-display', serif;
        font-size: 1.5rem;
        font-weight: 700;
      }

      .about-section p {
        color: #071A38;
        font-size: 0.9rem;
      }

      .about-section .btn-custom {
        display: none;
      }

      .stat-über-uns {
        flex-direction: row;
        justify-content: center;
      }

      .stat-über-uns .col-md-4 {
        flex: 1;
      }
      .text-mm-n {
        margin-top: 1rem;
      }

      .values-section .title {
        font-size: 2rem;
        line-height: 1.2;
        
      }

      .values-section .subtitle {
        font-size: 0.9rem;
      }

      .value-card p {
        font-size: 0.9rem;

    }

      .value-card {
        border-radius: 1.2rem;
        padding: 0.5rem;
      }

      .Angebot-bild {
        margin-top: -1rem;
        width: 540px;
        height: 400px;
        border-radius: 1.5rem;
        object-fit: cover
      }

      .Ang-title {
        font-size: 30px;
      }

      .Ang-text {
        font-size: 0.9rem;
      }

      .termin-i-m > a {
        bottom: 0.9rem;
        padding: 0.5rem;
        font-size: 1rem;
      }
        
  }


  @media (max-width: 480px) {
    .über-uns-conn {
      flex-direction: column;
    }

    .über-uns-1-2 {
      order: 1;
      margin-top: -3.0rem;
      max-width: 100%;
      padding: 0;

    }
    .über-uns-1-1 {
      order: 2;
      margin-top: 2rem
    }

    .über-uns-1-1 > h2 {
        font-size: 30px;
    }

    .about-section .stats p {
        font-size: 0.9rem;
    }
       
    

    .about-section p {
        font-size: 0.9rem;
    }

    .values-section .title {
        font-size: 30px;

    }

    .values-section .subtitle {
        font-size: 0.9rem;
    }

    .value-card p {
        font-size: 0.9rem;

    }

    .value-card {
        border-radius: 1.2rem;
        padding: 0.5rem;

    }

    .Angebot-bild {
        width: 100%;
        height: 300px;
        border-radius: 1.2rem;
        object-fit: cover;
        
    }

    .Ang-title {
        font-size: 30px;
    }

    .Ang-text {
        font-size: 0.9rem;
    }

    .text-mm-n {
        margin-top: 0.5rem;
    }

  }








/* CSS for Termin Buchen */

.page-termin-buchen {
    background-color: #FDF8F3;
}

.form-wrapper {
    max-width: 720px;
    margin: 3rem auto;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .form-wrapper h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .form-wrapper p {
    color: #555;
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .form-control,
    .form-select {
      border-radius: 8px;
      padding: 0.75rem;
      font-size: 1rem;
    }

    .btn-submit {
        background-color: #071A38;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 0.6rem 1.5rem;
        font-weight: 600;
        font-size: 1rem;
      }

      .btn-submit:hover {
        background-color: #a3b4ff;
      }
  
      .form-label {
        font-weight: 500;
        margin-bottom: 0.4rem;
      }

      .file-upload-wrapper {
        border: 2px dashed #8c7356;
        border-radius: 6px;
        padding: 30px;
        text-align: center;
        background-color: #fdfcf9;
        position: relative;
      }

      #fileUpload {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }

      .choose-files {
        color: #8c7356;
        font-weight: 600;
        cursor: pointer;
        text-decoration: underline;
      }
      
      .upload-info {
        color: #7c7c7c;
      }



      /* CSS for Ästhetik */

    .ästhetische-zahnheilkunde-content {
        background-color:  #fdfcf9;
    }

      .headline-as {
        font-size: 35px;
        font-weight: bold;
        color: #071A38;
        margin-bottom: 2rem;
      }

      .as-behandlung-text > p {
        font-size: 1.2rem;
        color: #071A38;
        margin-bottom: 1.5rem;
      }

      .as-behandlung-text.col-lg-6 {
        position: relative;
        top: -6rem;
      }

      .rounded-img {
        border-radius: 20px;
      }
      
      .icon-grid img {
        width: 50px;
        height: 50px;
      }

      .icon-grid .active {
        background-color: #d6e0ff;
        border-radius: 10px;
      }

      .emoji-card > .mb-3 {
        width: 80px;
        height: 80px;
    }

    .background-tooth {
        background: url('/wp-content/themes/doryumu_de/images/toothooth.png') no-repeat center center;
        background-size: contain;
        opacity: 0.05;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
      }

      .section {
        position: relative;
        z-index: 1;
      }
      .arrow-down {
        width: 40px;
        display: block;
        margin-top: 1rem;
      }
      .behandlung-as-z {
        background-color: #071A38;
        color: white;
        border-radius: 20px;
        padding: 4rem;
      }

      .leist-hd-imi {
        color: white;
        font-size: 35px;
      }

      .as-leist-icon {
        width: 90px;
        height: 90px;
      }

      .as-leistung-nn-text {
        font-size: 1.1rem;
        padding-bottom: 1rem;
        padding-top: 1rem;
      }


      @media (max-width: 767px) {
        .icon-grid {
          display: none;
        }
      }

      .emoji-card:hover {
        transform: scale(1.03);
      }
      .as-leist-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
      }
      .section-title {
        font-weight: bold;
        font-size: 1.75rem;
      }
      .bl-icon-text {
        font-size: 1.1rem;
        color: white;
      }

      .behandlungen-section {
        background-color: #91a7ff;
        color: white;
      }
  
      .behandlung-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
        transition: all 0.3s ease-in-out;
      }
  
      .behandlung-item img {
        width: 80px;
        height: 80px;
        margin-bottom: 0.5rem;
        filter: brightness(2);
        opacity: 0.9;
      }
  
      .behandlung-item p {
        font-size: 1.2rem;
        margin: 0;
        text-align: center;
        line-height: 1.3;
        color: white;
      }
  
    .behandlung-item.active img {
      background-color: #071A38;
      border-radius: 50%;
      padding: 1rem;
    }
    .behandlung-item:hover img {
        background-color: #071A38;
        transform: scale(0.95); 
        cursor: pointer;
        border-radius: 50%; 
    }

    .behandlung-item:hover p {
        transform: scale(0.95); 
        transition: transform 0.2s ease-in-out; 
    }
      .behandlung-item.active img {
        filter: brightness(100%) !important;
      }
  
      .col-lg-5th {
        flex: 0 0 20%;
        max-width: 20%;
      }
  
      @media (max-width: 991.98px) {
        .col-lg-5th {
          flex: 0 0 33.3333%;
          max-width: 33.3333%;
        }
      }
  
      @media (max-width: 767.98px) {
        .col-lg-5th {
          flex: 0 0 50%;
          max-width: 50%;
        }
      }

      @media (max-width: 1020px) and (min-width: 768px) {
        /*
        .ästhetische-zahnheilkunde-content .row.align-items-center {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          gap: 20px;
        }
        */

        .ästhetische-zahnheilkunde-content .as-main,
        .ästhetische-zahnheilkunde-content .as-behandlung-text {
          flex: 0 0 50%;
          max-width: 50%;
          text-align: left;
        }

        .ästhetische-zahnheilkunde-content .as-main img {
          width: 100%;
          height: 400px;
          border-radius: 8px;
        }


        .headline-as {
          font-size: 30px;
        }

        .as-behandlung-text > p {
          font-size: 0.8rem;
          color: #071A38;
          margin-bottom: 1rem;
        }

        .as-main {
          max-width: 100%;
          height: auto;
        }

        .behandlung-as-z > h2 {
          font-size: 25px;
          font-weight: bold;
          color: #071A38;
          margin-bottom: 1rem;
        }

        .as-behand-mm-ii >.emoji-card .card-text {
          font-size: 0.9rem;
        }

      

        .emoji-card {
          height: 90%;
        }
        .as-behandlung-text.col-lg-6 {
          position: relative;
          top: -2.8rem;
        }

        .leist-hd-imi {
          padding-top: 1rem;
          font-size: 30px
        }

        .as-leistung-nn-text,
        .bl-icon-text {
          font-size: 0.9rem;
        }

        .as-leist-icon {
          width: 70px;
          height: 70px;
        }

      }

      @media (max-width: 576px) {
          .ästhetische-zahnheilkunde-content .row.align-items-center {
            flex-direction: column;
        }

          .ästhetische-zahnheilkunde-content .as-main,
          .ästhetische-zahnheilkunde-content .as-behandlung-text {
            max-width: 100%;
          }
          .headline-as {
            font-size: 25px;
            margin-bottom: 1rem;
          }
          .headline-as {
            font-size: 20px;
          }
  
          .as-behandlung-text > p {
            font-size: 0.8rem;
            color: #071A38;
            margin-bottom: 1rem;
          }
  
          .behandlung-as-z > h2 {
            font-size: 20px;
            font-weight: bold;
            color: #071A38;
            margin-bottom: 1rem;
          }
  
          .behandlung-as-z {
            padding-top: 0rem !important;
          }
  
          .as-behand-mm-ii >.emoji-card .card-text {
            font-size: 0.9rem;
          }
  
          .emoji-card > .mb-3 {
              width: 50px;
              height: 50px;
          }
  
          .emoji-card {
            height: 87%;
          }

          .ästhetische-zahnheilkunde-content .as-main img {
            width: 100%;
            height: 400px;
          }
          .as-behandlung-text.col-lg-6 {
            position: relative;
            top: -0.2rem;
          }
          .leist-hd-imi {
            padding-top: 1rem;
            font-size: 25px
          }
  
          .as-leistung-nn-text,
          .bl-icon-text {
            font-size: 0.9rem;
          }

          .as-leist-icon {
            width: 70px;
            height: 70px;
          }
      }

    




      @media (max-width: 480px) {

        .headline-as {
          font-size: 20px;
          margin-bottom: 1rem;
        }

        .as-behandlung-text > p {
          font-size: 0.8rem;
          color: #071A38;
          margin-bottom: 1rem;
        }

        .behandlung-as-z > h2 {
          font-size: 20px;
          font-weight: bold;
          color: #071A38;
          margin-bottom: 1rem;
        }

        .behandlung-as-z {
          padding-top: 0rem !important;
        }

        .as-behand-mm-ii >.emoji-card .card-text {
          font-size: 0.8rem;
        }

        .behandlung-as-z {
          padding: 2rem;
        }

        .leist-hd-imi {
          padding-top: 1rem;
          font-size: 25px
        }

        .as-leistung-nn-text,
        .bl-icon-text {
          font-size: 0.9rem;
        }

        .as-leist-icon {
          width: 50px;
          height: 50px;
        }

        .as-behandlung-text.col-lg-6 {
          position: relative;
          top: -0.2rem;
        }







      }










      /* CSS Unser-team Landstuhl */
      .unser-team-landstuhl {
        background-color: #fdfaf7;
        font-family: 'Helvetica Neue', sans-serif;
        color: #1a1a1a;
      }
      
      .hd-un-team {
        color: #0d1b2a;
      }

      .text-primary {
        color: #a3b4ff;
      }

      
    .team-photo-placeholder {
        width: 100%;
        aspect-ratio: 3/4;
      }
  
      .text-justified {
        text-align: justify;
      }
  
      .img-rounded {
        border-radius: 0.5rem;
      }
  
      @media (max-width: 768px) {
        h2 {
          font-size: 1.3rem;
        }
        .tm-lan-mm {
          font-size: 1rem;
        }

        .lan-tm-mm > p {
          font-size: 0.9rem;
        }
  
        .team-photo-placeholder {
          aspect-ratio: 3/4;
        }
  
        .text-justified {
          text-align: justify;
        }
        .lan-tm-iin > .col-md-6 > h5 {
          font-size: 0.9rem;
          margin-top: 0.5rem;
        }

        .lan-tm-iin > .col-md-6 > p {
          font-size: 0.8rem;
          margin-top: 0.2rem;
        }

        .lan-tm-iin > .col-md-6 {
          transform: scale(0.80)
        }

      }


      @media (max-width: 480px) {
        .hd-un-team {
          font-size: 1.5rem;
        }

        .tm-lan-mm {
          font-size: 1rem;
        }

        .lan-tm-mm > p {
          font-size: 0.8rem;
        }

        .lan-tm-iin{
          display: flex;
          flex-wrap: wrap;
        }

        .lan-tm-iin > .col-md-6{
          width: 50%;
          flex: 0 0 50%;
          max-width: 50%;
        }

        .lan-tm-iin > .col-md-6 > img {
          width: 80%;
          height: auto;
          border-radius: 0.5rem;    
        }


        .lan-tm-iin > .col-md-6 > h5 {
          font-size: 0.8rem;
          margin-top: 0.5rem;
        }

        .lan-tm-iin > .col-md-6 > p {
          font-size: 0.7rem;
          margin-top: 0.2rem;
        }

      }


       /* CSS Unser-team kaiserslautern */

       .unser-team-kaiserslautern {
        background-color: #fdfaf7;
        font-family: 'Helvetica Neue', sans-serif;
        color: #1a1a1a;
      }
      
      .hd-un-team {
        color: #0d1b2a;
      }

      .text-primary {
        color: #a3b4ff;
      }

      
    .team-photo-placeholder {
        width: 100%;
        aspect-ratio: 3/4;
      }
  
      .text-justified {
        text-align: justify;
      }
  
      .img-rounded {
        border-radius: 0.5rem;
      }
  
      @media (max-width: 768px) {
        h2 {
          font-size: 1.3rem;
        }
        .tm-lan-mm {
          font-size: 1rem;
        }

        .kai-tm-iin > p {
          font-size: 0.9rem;
        }
  
        .team-photo-placeholder {
          aspect-ratio: 3/4;
        }
  
        .text-justified {
          text-align: justify;
        }
        .lan-tm-iin > .col-md-6 > h5 {
          font-size: 0.9rem;
          margin-top: 0.5rem;
        }

        .kai-tm-iin > .col-md-6 > p {
          font-size: 0.8rem;
          margin-top: 0.2rem;
        }

        .kai-tm-iin > .col-md-6 {
          transform: scale(0.80)
        }

      }


      @media (max-width: 480px) {
        .hd-un-team {
          font-size: 1.5rem;
        }

        .tm-lan-mm {
          font-size: 1rem;
        }

        .kai-tm-iin > p {
          font-size: 0.8rem;
        }

        .kai-tm-iin{
          display: flex;
          flex-wrap: wrap;
        }

        .kai-tm-iin > .col-md-6{
          width: 50%;
          flex: 0 0 50%;
          max-width: 50%;
        }

        .kai-tm-iin > .col-md-6 > img {
          width: 80%;
          height: auto;
          border-radius: 0.5rem;    
        }


        .kai-tm-iin > .col-md-6 > h5 {
          font-size: 0.8rem;
          margin-top: 0.5rem;
        }

        .kai-tm-iin > .col-md-6 > p {
          font-size: 0.7rem;
          margin-top: 0.2rem;
        }

      }

   
      /* CSS for Chirurgische Zahnheilkunde */
      .chirurgische-zahnheilkunde-content {
        background-color: #fdfcf9;
    }   

    .headline-cs{
        font-size: 35px;
        font-weight: bold;
        color: #071A38;
        margin-bottom: 2rem;
          
    }

    .cs-behandlung-text.col-lg-6 {
        position: relative;
        top: -3.3rem;
    }

    .cs-behandlung-text > p {
        font-size: 1.2rem;
        color: #071A38;
        margin-bottom: 1.5rem;
    }

    @media (max-width: 768px) {
        .cs-behandlung-text.col-lg-6 {
            position: relative;
            top: -1rem;
        }
    }


    .rounded-img {
        border-radius: 20px;
        height: 564px;
        width: 564px;
        object-fit: cover;
    }

    @media (max-width: 1020px) and (min-width: 768px) {
        .cs-behandlung-text.col-lg-6,
        .cs-mm.col-lg-6{
            flex: 0 0 50%;
            max-width: 50%;
            text-align: left;
        }
        .cs-mm img {
            width: 100%;
            height: 400px;
            border-radius: 8px;
        }
        .headline-cs {
            font-size: 30px;
        }

        .cs-behandlung-text > p {
            font-size: 0.8rem;
            color: #071A38;
            margin-bottom: 1rem;
        }
        .cs-mm {
            max-width: 100%;
            height: auto;
        }
        .cs-behandlung-text > p {
            font-size: 0.8rem;
            color: #071A38;
            margin-bottom: 1rem;
        }
        .rounded-img {
            height: 300px;
            width: 300px;
        }
        .cs-behandlung-text > p {
            font-size: 0.9rem;
        }

        .headline-cs {
            font-size: 28px;
        }
    }
    @media (max-width: 576px) {
        .cs-mm img {
            width: 100%;
            height: 300px;
            border-radius: 8px;
        }
        .cs-behandlung-text > p {
            font-size: 0.9rem;
            color: #071A38;
            margin-bottom: 1rem;  
        }
        .cs-behandlung-text.col-lg-6 {
            position: relative;
            top: -0.2rem;
        }
        .headline-cs {
            font-size: 25px;
            margin-bottom: 1rem;
        }
    }

    @media (max-width: 480px) {
        .cs-mm img {
            width: 100%;
            height: 300px;
            border-radius: 8px;
        }
        .cs-behandlung-text > p {
            font-size: 0.9rem;
            color: #071A38;
            margin-bottom: 1rem;  
        }
        .cs-behandlung-text.col-lg-6 {
            top: 0.5rem;
        }
        .headline-cs {
            font-size: 25px;
            font-weight: bold;
            color: #071A38;
            margin-bottom: 1rem;
        }
    }
    /*
      .background-tooth {
        background: url('../images/toothooth.png') no-repeat center center;
        background-size: contain;
        opacity: 0.05;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
      }
    */

      /* CSS for implantologie */
      .implantologie-content{
        background-color: #fdfcf9;
      }

      .implant-behandlung-text.col-lg-6 {
        position: relative;
        top: -8rem; 
      }

      .headline-implant.fw-bold {
        padding-bottom: 1.5rem;
        font-size: 35px;
      }

      .headline-implant.fw-bold > p {
        font-size: 2rem;
        color: #071A38;
        margin-bottom: 1.5rem;
        
      }

      @media (max-width: 1020px) and (min-width: 768px) {
        .implant-mm.col-lg-6,
        .implant-behandlung-text.col-lg-6 {
            flex: 0 0 50%;
            max-width: 50%;
            text-align: left;
        }
        .implant-mm img {
            width: 100%;
            height: 400px;
            border-radius: 8px;
        }
        .cs-behandlung-text.col-lg-6  {
            position: relative;
            top: -1rem;
        }
        
        .headline-implant.fw-bold > p {
            font-size: 0.9rem;
        } 
        .headline-implant.fw-bold {
            font-size: 28px;
            margin-bottom: 1rem;
        }
        
        .headline-implant.fw-bold > p {
            font-size: 0.9rem; 
        }

        .headline-implant.fw-bold {
            font-size: 28px; 
        }   

      }

      @media (max-width: 576px) {
        .headline-implant.fw-bold > p {
            font-size: 0.8rem;
        }
        .headline-implant.fw-bold {
            font-size: 25px;
            margin-bottom: 0.2rem;
        }
        .implant-mm img {
            width: 100%;
            height: 300px;
            border-radius: 8px;
        }
        .implant-behandlung-text > p {
            font-size: 0.9rem;
            color: #071A38;
            margin-bottom: 1rem;  
        }
        .implant-behandlung-text.col-lg-6 {
            position: relative;
            top: -0.2rem;
        }
      }

      @media (max-width: 480px) {
        .headline-implant.fw-bold {
            font-size: 25px;
            font-weight: bold;
            color: #071A38;
            margin-bottom: 1rem;
        }
        .implant-behandlung-text > p {
            font-size: 0.9rem;
            color: #071A38;
            margin-bottom: 1rem;  
        }
        .implant-behandlung-text.col-lg-6 {
            top: 0.5rem;
        }

      }




      /* CSS for Kieferorthopädie */
      .Kieferorthopädie-content {
        background-color: #fdfcf9;
      }

      .headline-kiefer.fw-bold {
        font-size: 35px;
        font-weight: bold;
        color: #071A38;
        margin-bottom: 2rem;
      }

    .kiefe-behandlung-text.col-lg-6 {
      position: relative;
      top: -8rem; 
    }

      .headline-kiefer.fw-bold > p {
        font-size: 1.2rem;
        color: #071A38;
        margin-bottom: 1.5rem;
      }
      .headline-kiefer.fw-bold > p > a {
        color: #7da3ff;
        text-decoration: none;
      }

      .headline-kiefer.fw-bold > p > a:hover {
        color: #071A38;
        text-decoration: underline;
        cursor: pointer;
      }


      .leist-mm.container {
        background-color: #fdfcf9;
      }

      .leist-section {
        background-color: #071A38; 
        border-radius: 20px;
        color: white;
        padding: 2rem;
        margin: 2rem auto;
      }

      .leist-section h2 {
        font-weight: 700;
      }

    .leist-image {
      border-radius: 1rem;
      width: 100%;
      height: auto;
      max-height: 500px; 
      object-fit: cover;
    }

      .Leist-name {
        color: #7faaff;
        font-size: 1.5rem;
        font-weight: 600;
      }

      .leist-text {
        font-size: 1rem;
        text-align: left;
      }

      @media (max-width: 1020px) and (min-width: 768px) {
        .implant-mm.col-lg-6,
        .kiefe-behandlung-text.col-lg-6 {
            flex: 0 0 50%;
            max-width: 50%;
            text-align: left;
        }
        .kiefe-behandlung-text.col-lg-6 {
            position: relative;
            top: -1rem;
        }
        .Kieferorthopädie-content .implant-mm img {
            width: 100%;
            height: 400px;
            border-radius: 8px;
        }
        .headline-kiefer.fw-bold > p {
            font-size: 0.9rem;
        }
        .headline-kiefer.fw-bold {
            font-size: 28px;
            margin-bottom: 1rem;
        }
        .kiefe-behandlung-tex > p {
            font-size: 0.9rem;
            color: #071A38;
            margin-bottom: 1rem;
        }
        .implant-mm img {
            width: 100%;
            height: 400px;
            border-radius: 8px;
        }

        .leist-section {
          padding: 40px 20px;
      }
        .Leist-name {
            text-align: left;
      }
    
        .Leist-name {
            font-size: 25px;
      }
        .leist-text {
            font-size: 0.9rem;
      }
        .leist-image {
            width: 100%;
            height: auto;
            border-radius: 8px;
      }
      .leist-section.row {
        display: flex;
        flex-wrap: wrap;
        
      }

      .leist-srv {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
      }
      .leist-srv-text,
      .leist-section.col-md-4:not(.leist-srv) {
        flex: 0 0 50%;
        max-width: 50%;
        
      }
  
    
    
    }

@media (max-width: 576px) {
        .headline-kiefer.fw-bold > p {
            font-size: 0.8rem;
        }
        .headline-kiefer.fw-bold {
            font-size: 25px;
            margin-bottom: 1rem;
        }
        .kiefe-behandlung-text.col-lg-6 {
            position: relative;
            top: -0.2rem;
        }
        .implant-mm img {
            width: 100%;
            height: 300px;
            border-radius: 8px;
        }
        .kiefe-behandlung-text > p {
            font-size: 0.9rem;
            color: #071A38;
            margin-bottom: 1rem;  
        }
    }

@media (max-width: 480px) {
        .headline-kiefer.fw-bold {
            font-size: 25px;
            font-weight: bold;
            color: #071A38;
            margin-bottom: 1rem;
        }
        .kiefe-behandlung-text > p {
            font-size: 0.9rem;
            color: #071A38;
            margin-bottom: 1rem;  
        }
        .kiefe-behandlung-text.col-lg-6 {
            top: 0.5rem;
        }
    }



/* CSS for Parodontologie */
.parodontologie-content{
    background-color: #fdfcf9;
}

.headline-paradon.fw-bold {
    font-size: 35px;
    font-weight: bold;
    color: #071A38;
    margin-bottom: 2rem;
}
.headline-paradon.fw-bold > p {
    font-size: 2rem;
    color: #071A38;
    margin-bottom: 1.5rem;
    
  }


.paradon-behandlung-text.col-lg-6 {
    position: relative;
    top: -8rem;
}


.procedure-section {
    background-color: #071A38;
    border-radius: 25px;
    color: #ffffff;
    padding: 60px 30px;
    margin: 30px auto;
    max-width: 1300px;
}

.procedure-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
}

.procedure-image {
    width: 100%;
    border-radius: 25px;
    object-fit: cover;
}

.procedure-step h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #9db8f2;
}

.procedure-step p {
    color: #f0f4ff;
    font-size: 0.95rem;
}

@media (max-width: 1020px) and (min-width: 768px) {
    .parodontologie-mm.col-lg-6,
    .paradon-behandlung-text.col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
        text-align: left;
    }

    .paradon-behandlung-text.col-lg-6 {
        position: relative;
        top: -1rem;
    } 
    .procedure-section {
        padding: 40px 20px;
    }
    .procedure-title {
        text-align: center;
    }

    .Leist-name {
        font-size: 1.3rem;
    }

    .procedure-step {
        margin-bottom: 20px;
    }
    .headline-paradon.fw-bold > p {
        font-size: 0.9rem;
    }
    .headline-paradon.fw-bold {
        font-size: 28px;
        margin-bottom: 1rem;
    }
    .paradon-behandlung-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;  
    }
    .parodontologie-mm img {
        width: 100%;
        height: 400px;
        border-radius: 8px;
    }

}

@media (max-width: 576px) {
    .headline-paradon.fw-bold > p {
        font-size: 0.8rem;
    }

    .headline-paradon.fw-bold {
        font-size: 25px;
        margin-bottom: 1rem;
    }

    .paradon-behandlung-text.col-lg-6 {
        position: relative;
        top: -0.2rem;
    }

    .parodontologie-mm img {
        width: 100%;
        height: 300px;
        border-radius: 8px;
    }
    .paradon-behandlung-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;  
    }
}

@media (max-width: 480px) {
    .headline-paradon.fw-bold {
      font-size: 25px;
      font-weight: bold;
      color: #071A38;
      margin-bottom: 1rem;
  }
    .paradon-behandlung-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;  
  }

    .paradon-behandlung-text.col-lg-6 {
        top: 0.5rem;
    }
    
}


/* CSS for Prophylaxe */
.prophylaxe-content {
    background-color: #fdfcf9;
}

.headline-prophy.fw-bold {
    font-size: 35px;
    font-weight: bold;
    color: #071A38;
    margin-bottom: 2rem;
}

.headline-prophy.fw-bold > p {
    font-size: 2rem;
    color: #071A38;
    margin-bottom: 1.5rem;
}

.prophylaxe-mm-text.col-lg-6 {
    position: relative;
    top: -6rem;
}

@media (max-width: 1020px) and (min-width: 768px) {
    .prophylaxe-mm.col-lg-6,
    .prophylaxe-mm-text.col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
        text-align: left; 
    }
    .prophylaxe-mm-text.col-lg-6 {
      position: relative;
      top: -0.2rem;
    }

    .headline-prophy.fw-bold > p {
        font-size: 0.9rem;
    }

    .headline-prophy.fw-bold {
        font-size: 28px;
        margin-bottom: 1rem;
    }
    .prophylaxe-mm-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
    }
    .prophylaxe-mm img {
        width: 100%;
        height: 400px;
        border-radius: 8px;
    }
    
}

@media (max-width: 576px) {
    .headline-prophy.fw-bold > p {
        font-size: 0.8rem;
    }

    .headline-prophy.fw-bold {
        font-size: 25px;
        margin-bottom: 1rem;
    }

    .prophylaxe-mm-text.col-lg-6 {
        position: relative;
        top: -0.2rem;
    }

    .prophylaxe-mm img {
        width: 100%;
        height: 300px;
        border-radius: 8px;
    }
    .prophylaxe-mm-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .headline-prophy.fw-bold {
      font-size: 25px;
      font-weight: bold;
      color: #071A38;
      margin-bottom: 1rem;
  }
    .prophylaxe-mm-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
  }

    .prophylaxe-mm-text.col-lg-6 {
        top: 0.5rem;
    }
    
} 



/* CSS for Schlafapnoe */
.schlafapnoe-content {
    background-color: #fdfcf9;
}

.headline-schlafapnoe.fw-bold {
    font-size: 35px;
    font-weight: bold;
    color: #071A38;
    margin-bottom: 2rem;
}

.headline-schlafapnoe.fw-bold > p {
    font-size: 2rem;
    color: #071A38;
    margin-bottom: 1.5rem;
}

.schlafapnoe-mm-text.col-lg-6 {
    position: relative;
    top: -6rem;
}

@media (max-width: 1020px) and (min-width: 768px) {
    .schlafapnoe-mm.col-lg-6,
    .schlafapnoe-mm-text.col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
        text-align: left;
    } 
    .schlafapnoe-mm-text.col-lg-6 {
        position: relative;
        top: -0.2rem;
    }

    .headline-schlafapnoe.fw-bold > p {
        font-size: 0.9rem;
    }

    .headline-schlafapnoe.fw-bold {
        font-size: 28px;
        margin-bottom: 1rem;
       
    }
    .schlafapnoe-mm img {
        width: 100%;
        height: 400px;
        border-radius: 8px;
    }
    .schlafapnoe-mm-text > p {  
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
    }

}

@media (max-width: 576px) {
    .headline-schlafapnoe.fw-bold > p {
        font-size: 0.8rem;
    }

    .headline-schlafapnoe.fw-bold {
        font-size: 25px;
        margin-bottom: 1rem;
    }

    .schlafapnoe-mm-text.col-lg-6 {
        position: relative;
        top: -0.2rem;
    }

    .schlafapnoe-mm img {
        width: 100%;
        height: 300px;
        border-radius: 8px;
    }
    .schlafapnoe-mm-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
    }
}


@media (max-width: 480px) {
    .headline-schlafapnoe.fw-bold {
      font-size: 25px;
      font-weight: bold;
      color: #071A38;
      margin-bottom: 1rem;
  }
    .schlafapnoe-mm-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
  }

    .schlafapnoe-mm-text.col-lg-6 {
        top: 0.5rem;
    }
  
}


/* CSS for Veneers */
.veneers-content {
    background-color: #fdfcf9;
}

.headline-veneers.fw-bold {
    font-size: 35px;
    font-weight: bold;
    color: #071A38;
    margin-bottom: 2rem;
}

.headline-veneers.fw-bold > p {
    font-size: 2rem;
    color: #071A38;
    margin-bottom: 1.5rem;
}

.veneers-mm-text.col-lg-6 {
    position: relative;
    top: -6rem;
}

@media (max-width: 1020px) and (min-width: 768px) {
    .veneers-mm-img.col-lg-6,
    .veneers-mm-text.col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
        text-align: left;
    }

    .headline-veneers.fw-bold > p {
        font-size: 0.9rem;
    }

    .headline-veneers.fw-bold {
        font-size: 28px;
        margin-bottom: 1rem;
    }

    .veneers-mm-text.col-lg-6 {
        position: relative;
        top: -0.2rem;
    }

    .veneers-mm-img img {
        width: 100%;
        height: 400px;
        border-radius: 8px;
    }

}

@media (max-width: 576px) {
    .headline-veneers.fw-bold > p {
        font-size: 0.8rem;
    }

    .headline-veneers.fw-bold {
        font-size: 25px;
        margin-bottom: 1rem;
    }

    .veneers-mm-text.col-lg-6 {
        position: relative;
        top: -0.5rem;
    }

    .veneers-mm-img img {
        width: 100%;
        height: 300px;
        border-radius: 8px;
    }
    .veneers-mm-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
    }
  }

@media (max-width: 480px) {
    .headline-veneers.fw-bold {
      font-size: 25px;
      font-weight: bold;
      color: #071A38;
      margin-bottom: 1rem;
  }
    .veneers-mm-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
  }

    .veneers-mm-text.col-lg-6 {
        top: 0.5rem;
    }
  



}




/* CSS for Zahnersatz */

.zahnersatz-content {
    background-color: #fdfcf9;
}
.headline-zahnersatz.fw-bold {
    font-size: 35px;
    font-weight: bold;
    color: #071A38;
    margin-bottom: 2rem;
}
.headline-zahnersatz.fw-bold > p {
    font-size: 2rem;
    color: #071A38;
    margin-bottom: 1.5rem;
}
.zahnersatz-mm-text.col-lg-6 {
    position: relative;
    top: -6rem;
}
@media (max-width: 1020px) and (min-width: 768px) {
    .headline-zahnersatz.fw-bold > p {
        font-size: 0.9rem;
    }

    .headline-zahnersatz.fw-bold {
        font-size: 28px;
    }

    .zahnersatz-mm-text.col-lg-6 {
        position: relative;
        top: -1rem;
    }
    .zahnersatz-mm.col-lg-6,
    .zahnersatz-mm-text.col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
        text-align: left;
    }
    .zahnersatz-mm img {
        width: 100%;
        height: 400px;
        border-radius: 8px;
    }
    .zahnersatz-mm-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
    }


}

@media (max-width: 576px) {
    .headline-zahnersatz.fw-bold > p {
        font-size: 0.8rem;
    }

    .headline-zahnersatz.fw-bold {
        font-size: 25px;
        margin-bottom: 1rem;
    }

    .zahnersatz-mm-text.col-lg-6 {
        position: relative;
        top: -0.2rem;
    }
}

@media (max-width: 480px) {
    .headline-zahnersatz.fw-bold {
        font-size: 25px;
        font-weight: bold;
        color: #071A38;
        margin-bottom: 1rem;
    }
    .zahnersatz-mm-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
    }
    .zahnersatz-mm-text.col-lg-6 {
        top: 0.5rem;
    }
    .zahnersatz-mm img {
        width: 100%;
        height: 300px;
        border-radius: 8px;
    }

    
}

/* CSS for Zahnerhaltung */

.zahnerhaltung-content {
    background-color: #fdfcf9;
}
.headline-zahnerhaltung.fw-bold {
    font-size: 35px;
    font-weight: bold;
    color: #071A38;
    margin-bottom: 2rem;
}
.headline-zahnerhaltung.fw-bold > p {
    font-size: 2rem;
    color: #071A38;
    margin-bottom: 1.5rem;
}
.zahnerhaltung-mm-text.col-lg-6 {
    position: relative;
    top: -6rem;
}
@media (max-width: 1020px) and (min-width: 768px) {
    .zahnerhaltung-mm.col-lg-6,
    .zahnerhaltung-mm-text.col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
        text-align: left;
    }

    .headline-zahnerhaltung.fw-bold > p {
        font-size: 0.9rem;
    }

    .headline-zahnerhaltung.fw-bold {
        font-size: 28px;
        margin-bottom: 1rem;
    }

    .zahnerhaltung-mm-text.col-lg-6 {
        position: relative;
        top: -0.2rem;
    }

    .zahnerhaltung-mm img {
      width: 100%;
      height: 400px;
      border-radius: 8px;
  }


}


@media (max-width: 576px) {

    .headline-zahnerhaltung.fw-bold > p {
        font-size: 0.8rem;
    }
    .headline-zahnerhaltung.fw-bold {
        font-size: 25px;
    }

    .zahnerhaltung-mm-text.col-lg-6 {
        position: relative;
        top: -0.5rem;
    }

    .zahnerhaltung-mm-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
    }
    .zahnerhaltung-mm img {
        width: 100%;
        height: 300px;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {

    .headline-zahnerhaltung.fw-bold {
        font-size: 25px;
        font-weight: bold;
        color: #071A38;
        margin-bottom: 1rem;
    }
    .zahnerhaltung-mm-text > p {
        font-size: 0.9rem;
        color: #071A38;
        margin-bottom: 1rem;
    }

    .zahnerhaltung-mm-text.col-lg-6 {
        top: 0.2rem;
    }
}




/* CSS for Kontakt */
.kontakt-page {
    background-color: #fdfcf9;
}

.hd-contact-p{
    font-size: 2.5rem;
    font-weight: bold;
    color: #071A38;
    line-height: 1.2;
    font-weight: 600;
}

.text-k-pg {
    font-size: 1.2rem;
    color: #071A38;
    font-weight: 500;
    
}

.kontakt-btn-1{
    border: none;
    background-color: #a3b4ff;
    color: #071A38;
    border-radius: 999px;
    padding: 7px 20px;
    font-weight: 500;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.kontakt-btn-1:hover {
    background-color: #071A38;
    color: white;
}


.kontakt-btn-2 {
    border: none;
    background-color: #a3b4ff;
    color: #071A38;
    border-radius: 999px;
    padding: 7px 40px; 
    font-weight: 500;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.kontakt-btn-2:hover {
    background-color: #071A38;
    color: white;
}


.kontakt-btn{
    gap: 20px;
}

.kontakt-alles {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.2rem; 
}

.kontakt-pg-info,
.kontakt-pg-info-kt-a {
    font-size: 1.2rem;
    font-weight: bold; 
    color: #071A38;
    line-height: 1.2;
    font-weight: 500;

}

.kontakt-pg-info-kt-a {
    margin-right: 1.8rem;
    margin-top: 15px;
}


@media (max-width: 768px) {
    .hd-contact-p {
        font-size: 1.8rem;
    }
    .text-k-pg {
        font-size: 1rem;
    }
    .kontakt-btn-1{
        font-size: 0.9rem;
        padding: 7px 15px;
    }

    .kontakt-btn-2 {
        font-size: 0.9rem;
        padding: 7px 32px; 
    }

    .btn-k-pg { 
        flex-direction: column;
        align-items: start;
    }

    .kontakt-pg-info,
    .kontakt-pg-info-kt-a {
        font-size: 1rem;
        line-height: 1.2;
        font-weight: 500;
    }

    

}

@media (max-width: 480px) {

    

}

/* CSS for Impressum */
.imp-page-mm,.impressum-page {
    background-color: #fdfcf9;
}

.impressum-container {
    max-width: 900px;
    margin: 60px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.impressum-container > h1,h2 {
    color: #071A38;
    font-weight: 600;

}

.impressum-container > h2 {
    margin-top: 2rem;
    font-size: 1.3rem;
}

.imoressum-container > p > a {
    color: #a3b4ff;
    word-break: break-word;
}

@media (max-width: 576px) {
    .impressum-container {
      margin: 30px 15px;
      padding: 20px;
    }
}



/* CSS for Datenschutz */
.dataschutz-i,.datenschutz-page {
    padding: 2rem;
    background-color: #fdfcf9;
}

@media (max-width: 768px) {
    .datenschutz-i,.datenschutz-page {
        padding: 1rem;
        
    }

    .d-d-pg {
        font-size: 1.3rem;
    }
    .section-title--i,
    .hd-dataschutz {
        font-size: 1rem;
    }

    .text-p-d {
        font-size: 0.9rem;
    }
    

}


/* CSS for Behandlung-page */

.behandlung-content-qq {
    background-color: #071A38;
    
}
.behandlung-txt-1,
.h-bh-1 {
    font-size: 1.4rem;
    font-weight: bold;
    color: #a3b4ff;
}

.behandlung-ss-header {
    margin-bottom: 1rem;
    
}
.text-b-1-3 {
    font-size: 0.9rem;
}

.behandlung-item-1 {
    background-color: transparent;
    text-align: center;
    padding: 15px 5px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.behandlung-item-1:hover {
    transform: scale(1.05);
    color: #a3b4ff; 
}

.behandlung-item-1 img {
    width: 85px;
    height: auto;
    margin-bottom: 10px;
}

.b-lable-1 {
    font-size: 0.9rem;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .behandlung-txt-1 {
        font-size: 1rem;
        font-weight: bold;
    }
    .text-b-1-3 {
        font-size: 0.9rem;
      }
    .h-bh-1 {
        font-size: 1.4rem;
        font-weight: bold;
        
    }
    .text-b-1-3 {
        font-size: 0.8rem;

    }
}

@media (max-width: 768px) {
    .behandlung-item-1 img {
      width: 45px;
    }

    .h-bh-1 {
        font-size: 1rem;
        font-weight: bold;
        color: #a3b4ff;
    }

    .text-b-1-3 {
        font-size: 0.8rem;

    }

  }

  @media (max-width: 576px) {
    .behandlung-txt-1 {
      font-size: 1rem;
    }
    .b-lable-1 {
        font-size: 0.7rem;
    }
    .text-b-1-3 {
        font-size: 0.7rem;
    }

  }

/* CSS for Standorte */

.standorte-pg-content {
    background-color: #fdf8f3;
    padding: 3rem;
    margin: 4rem;
}

.ort-pg-c {
    width: 80%;
  }

.ort-section-title {
    font-size: 3rem;
    font-weight: 800;
    color: #071A38;
    line-height: 1.2;
  }

  .ort-section-text {
    color: #071A38;
    font-size: 1rem;
    max-width: 480px;
    margin-bottom: 2rem;
  }

  .location-column-wrapper {
    position: relative;
    min-height: 350px;
  }

  .location-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    visibility: hidden; 
  }

  .location-overlay.active {
    visibility: visible; 
    opacity: 1;
  }
.location-overlay img {
    width: 85%; 
    height: auto; 
    object-fit: cover; 
    filter: brightness(0.9);
    border-radius: inherit;
    margin: auto; 
}

  .location-overlay.active {
    display: block;
    opacity: 1;
    z-index: 2;
  }

  .location-column-block {
    position: relative;
    padding: 1rem;
    border-radius: 1rem;
    background: transparent;
    margin-bottom: 1.5rem;
    cursor: pointer;
    z-index: 1;
  }

  

  .location-pg-title {
    font-weight: 700;
    font-size: 2rem;
  }

  .location-pg-title.blue {
    color: #071A38;
  }

  .location-pg-title.dark {
    color: #071A38;
  }

  .location-pg-details {
    color: #6c757d;
    font-size: 1rem;
    margin-top: 0.3rem;
  }

 .location-pg-title.blue:hover,
 .location-pg-title.dark:hover {
    color: #a3b4ff;
  }


  .location-inline-image {
    display: none;
    width: 120px;
    height: 80px;
    border-radius: 1rem;
    object-fit: cover;
    margin-left: 1rem;
    flex-shrink: 0;
  }

  .ort-text-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  @media (max-width: 750px) {
    .standorte-pg-content {
        padding: 1rem;
        margin: 0;
    }
    .ort-pg-11 {
        flex-direction: column;
    }

    .location-column-wrapper {
        position: static;
        min-height: auto;
        margin-bottom: 2rem;
        padding: 0 1rem;
      }

      .location-column-block {
        background: #fff;
        box-shadow: 0 0 8px rgb(0 0 0 / 0.05);
        border-radius: 1rem;
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        z-index: 3;
      }

      .location-pg-title {
        margin: 0;
        font-size: 0.9rem;
      }

      .location-pg-details {
        margin-top: 0.3rem;
      }

      .location-inline-image {
        display: block;
      }

      .location-overlay {
        display: none !important;
      }
  }

  @media (max-width: 1024px) and (min-width: 768px) {
     .standorte-pg-content {
      background-color: #fdf8f3;
     }

     .ort-section-title {
      font-size: 30px;
     }

     .ort-pg-c {
      width: 150%;
     }

     .ort-section-text {
      font-size: 0.8rem;
     }

     
    .location-pg-title {
      font-size: 1.3rem;
    }

    .location-pg-details {
      font-size: 1rem;
    }

    .location-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 2rem;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
      visibility: hidden; 
    }
  
    .location-overlay.active {
      visibility: visible; 
      opacity: 1;
    }
  .location-overlay img {
      width: 100%; 
      height: 90%; 
      object-fit: cover; 
      filter: brightness(0.9);
      border-radius: inherit;
      margin: auto; 
  }
  
    .location-overlay.active {
      display: block;
      opacity: 1;
      z-index: 2;
    }
  
    .location-column-block {
      position: relative;
      padding: 1rem;
      border-radius: 1rem;
      background: transparent;
      margin-bottom: 1.5rem;
      cursor: pointer;
      z-index: 1;
    }

     


  }
  

  @media (max-width: 480px) {
    .ort-section-title {
      font-size: 2rem;
      text-align: left;
      margin-bottom: -1rem;
    }

    .ort-section-text {
      font-size: 0.9rem;
      max-width: 100%;
      text-align: left;
      margin-bottom: 1rem;
    }

    .location-column-block {
      padding: 0.5rem;
    }

    .ort-pg-c {
      width: 100%;
     }

    .location-pg-title {
      font-size: 1rem;
    }

    .location-pg-details {
      font-size: 0.8rem;
    }
  }

  /* CSS for Karriere */
  .karriere-content {
    background-color: #fdfcf9;
    padding: 60px 0;
  }
  .arrow-down {
    font-size: 2rem;
    color: #7E8BFF;
    display: inline-block;
    animation: bounce 1.5s infinite;
    flex-shrink: 0;
    margin-right: 15px;
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(8px); }
    60% { transform: translateY(4px); }
  }

  .karriere-hh-nn {
    font-weight: bold;
    font-size: 2.2rem;
    margin: 0;
  }

  .karriere-p-nn  p{
    line-height: 1.6;
  }

  .karriere-p-nn a {
    text-decoration: underline;
    color: #0a1a2f;
  }

  .karriere-p-nn a:hover {
    color: #7E8BFF;
  }

  .karriere-img-1 > img {
    border-radius: 20px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .karriere-button {
    background-color: #0a1a2f;
    color: white;
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: bold;
    margin-top: 20px;
    border: none;
    cursor: pointer;
  }

  .karriere-button:hover, .karriere-button:focus {
    background-color: #7E8BFF;
    color: white;
    box-shadow: 0 0 0 3px #7E8BFF;
  }

  .section-career-benefits{
    margin-top: 6rem;
  }


  .section-career-benefits {
    background-color: #fefaf4;
    position: relative;
    overflow: hidden
  }
  .section-career-benefits::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, transparent 0%, transparent 60%, rgba(255, 213, 158, 0.2) 61%, transparent 62%),
                radial-gradient(circle at center, transparent 0%, transparent 80%, rgba(255, 213, 158, 0.15) 81%, transparent 82%);
    transform: translateX(-50%);
    z-index: 0;
  }
  .why-join-us {
    font-size: 2rem;
    color: #000;
    position: relative;
    z-index: 1

  }

  .feature-box {
    background: transparent;
    padding: 20px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 1;
  }

  .feature-box:hover {
    background: rgba(255, 213, 158, 0.1);
    transform: translateY(-5px);
  }

  .feature-icon img {
    width: 50px;
    height: 50px;
  }

  .feature-box h5 {
    font-size: 1.1rem;
    color: #000;
  }

  .feature-box p {
    font-size: 0.95rem;
    color: #555;
  }

  .jobs-mm-aa > h2 {
    text-align: center;
    margin-top: 1rem;
  }

  .jobs-mm-aa > p {
    text-align: center;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 1rem;
  }

  .no-jobs-message{
   text-align: center;
  }
  .no-jobs-message h4 {
    font-size: 1.2rem;
    margin-top: 20px;
  }
  .no-jobs-message h5 {
    font-size: 1rem;
  }

  .no-jobs-message img {
    width: 80px;
    height: auto;
    margin-top: 20px;
  }

  


  

  @media (max-width: 1020px) and (min-width: 768px) {
    .karriere-p-nn,
    .karriere-img-1 {
      flex: 0 0 50%;
      max-width: 50%;
      text-align: left;
    }

  
    .karriere-img-1 > img {
      max-width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: 20px;
    }
    .karriere-hh-nn {
        font-size: 25px;
    }
    .karriere-p-nn p {
        font-size: 0.9rem;
    }
    .karriere-button {
        padding: 6px 18px;
        font-size: 0.9rem;
    }
    .arrow-down {
        font-size: 1.5rem;
    }

  .section-career-benefits {
        padding: 40px 20px;
    }
    .why-join-us {
        font-size: 25px;
    }
    .feature-box {
        padding: 15px;
    }
    .feature-box h5 {
        font-size: 0.9rem;

    }
  .feature-box p {
        font-size: 0.9rem;
    }

    .no-jobs-message{
      text-align: center;
     }
     .no-jobs-message h4 {
       font-size: 1rem;
       margin-top: 20px;
     }
     .no-jobs-message h5 {
       font-size: 0.9rem;
     }
   
     .no-jobs-message img {
       width: 80px;
       height: auto;
       margin-top: 20px;
     }
   

  }

  @media (max-width: 576px) {
    .karriere-img-1.col-lg-6.text-center {
      order: -1;
    }

    .karriere-p-nn.col-lg-6  {
      order: 1;
    }
    .karriere-hh-nn {
        font-size: 20px;
    }
    .karriere-p-nn p {
        font-size: 0.8rem;
    }
    .karriere-button {
        padding: 5px 15px;
        font-size: 0.8rem;
    }
    .arrow-down {
        font-size: 1.2rem;
    }

    .karriere-img-1 > img {
      max-width: 100%;
      height: 250px;
      object-fit: cover;
      border-radius: 20px;
      margin-bottom: 2rem;
    }

    .section-career-benefits {
        padding: 30px 15px;
    }
    
    .why-join-us {
        font-size: 20px;
    }
    
    .feature-box h5 {
        font-size: 0.9rem;
    }
    
    .feature-box p {
        font-size: 0.8rem;
    }
    .no-jobs-message{
      text-align: center;
     }
     .no-jobs-message h4 {
       font-size: 1rem;
       margin-top: 20px;
     }
     .no-jobs-message h5 {
       font-size: 0.8rem;
     }
   
     .no-jobs-message img {
       width: 80px;
       height: auto;
       margin-top: 20px;
     }
   
    
  }

  @media (max-width: 480px) {
    .karriere-hh-nn {
        font-size: 18px;
    }
    .karriere-p-nn p {
        font-size: 0.8rem;
    }
    .karriere-button {
        padding: 5px 12px;
        font-size: 0.8rem;
    }
    .arrow-down {
        font-size: 1rem;
    }

    .karriere-img-1 > img {
      max-width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 20px;
      margin-bottom: 2rem;
    }

    .section-career-benefits {
        padding: 20px 10px;
    }
    
    .why-join-us {
        font-size: 18px;
    }
    
    .feature-box h5 {
        font-size: 0.8rem;
    }
    
    .feature-box p {
        font-size: 0.7rem;
    }
    .no-jobs-message{
      text-align: center;
     }
     .no-jobs-message h4 {
       font-size: 1rem;
       margin-top: 20px;
     }
     .no-jobs-message h5 {
       font-size: 0.8rem;
     }
   
     .no-jobs-message img {
       width: 80px;
       height: auto;
       margin-top: 20px;
     }
   
  }

  .doryumu-theme {
    background-color: #FDF8F3; 
}

  .awsm-job-main {
    background-color: #FDF8F3;
  }

  .awsm-job-container {
    max-width: 850px;
    margin: 3rem auto;
    padding: 2rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  .awsm-job-container > .awsm-jobs-single-title {
    text-align: left;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .awsm-job-entry-content > .wp-block-heading {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
  }

  .awsm-job-entry-content > p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .awsm-job-form-inner > .text-2xl {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
  }

  .space-y-4 > label {
    font-weight: 500;
    margin-bottom: 0.4rem;
  }
  
  .awsm-job-inline-group > label {
    font-size: 0.7rem;
    color: #555;
    margin: 0; 
  }

  .awsm-job-inline-group {
    display: flex
  }

  .awsm-job-inline-group > input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-right: 0.5rem;
    cursor: pointer;
    margin-top: 0.5rem;
  }

  .awsm-job-form-control {
    border: none;
  }


  .awsm-job-form {
    border: none;
  }


  .custom-job-form {
    background: white;
    border-radius: 12px;
    padding: 2rem;
  }
  
  .custom-job-form .awsm-job-form-group {
    margin-bottom: 1.25rem;
  }
  
  .custom-job-form label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
  }
  
  .custom-job-form input{
    width: 50%;
    border: 1px solid #ddd;
    padding: 0.75rem;
    border-radius: 8px;
  }

  .custom-job-form textarea {
    width: 80%;
    border: 1px solid #ddd;
    padding: 0.75rem;
    border-radius: 8px;
    resize: vertical;
  }
  
  .custom-job-form input[type="submit"] {
    margin-top: -3rem;
    background: #071A38;
    color: #fff;
    border: none;
    width: 200px;
    padding: 0.6rem 2rem;
    border-radius: 40px;
    cursor: pointer;
    transition: background .3s ease;
  }
  
  .custom-job-form input[type="submit"]:hover {
    background: #a3b4ff;
  }
  

  @media (max-width: 1020px) and (min-width: 768px) {
    .awsm-job-container {
      max-width: 720px;
      margin: 3rem auto;
      background-color: #ffffff;
      border-radius: 12px;
      padding: 2rem 2.5rem;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    .awsm-job-container > .awsm-jobs-single-title {
      font-size: 1.5rem;
    }
    .awsm-job-entry-content > .wp-block-heading {
      font-size: 1.2rem;
    }
    .awsm-job-entry-content > p {
      font-size: 0.9rem;
    }
    .awsm-job-form-inner > .text-2xl {
      font-size: 1.1rem;
    }
    .custom-job-form input {
      width: 100%;
    }

    .custom-job-form textarea{
      width: 100%;
    }
  }


  @media (max-width: 576px) {
    .awsm-job-container {
      max-width: 100%;
      padding: 1.5rem;
    }
    .awsm-job-container > .awsm-jobs-single-title {
      font-size: 1.3rem;
    }
    .awsm-job-entry-content > .wp-block-heading {
      font-size: 1rem;
    }
    .awsm-job-entry-content > p {
      font-size: 0.8rem;
    }
    .awsm-job-form-inner > .text-2xl {
      font-size: 1rem;
    }
    .custom-job-form input {
      width: 100%;
    }

    .custom-job-form textarea{
      width: 100%;
    }
    .custom-job-form {
      padding: 0;
    }
  }

  @media (max-width: 480px) {
    .awsm-job-container {
      padding: 1rem;
    }
    .awsm-job-container > .awsm-jobs-single-title {
      font-size: 1.2rem;
    }
    .awsm-job-entry-content > .wp-block-heading {
      font-size: 0.9rem;
    }
    .awsm-job-entry-content > p {
      font-size: 0.8rem;
    }
    .awsm-job-form-inner > .text-2xl {
      font-size: 0.9rem;
    }
    .custom-job-form input {
      width: 100%;
    }
    .custom-job-form textarea{
      width: 100%;
    }
    .custom-job-form {
      padding: 0;
    }
  }