/* russo-one-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Russo One';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/russo-one-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/poppins-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/montserrat-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/roboto-v47-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/roboto-slab-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* merriweather-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/merriweather-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/oswald-v53-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alex-brush-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Alex Brush';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/alex-brush-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* mrs-saint-delafield-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Mrs Saint Delafield';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/mrs-saint-delafield-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* parisienne-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Parisienne';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/parisienne-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('./../fonts/raleway-v36-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



html {
    overflow-x: hidden;
}
/* Change font family for headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar {
    font-family: var(--bs-heading-font-family);
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary); /* Background color */
    --bs-btn-border-color: var(--bs-primary); /* Border color */
    --bs-btn-hover-bg: var(--bs-primary-active); /* Background color on hover */
    --bs-btn-hover-border-color: var(--bs-primary-hover); /* Border color on hover */
    --bs-btn-active-bg: var(--bs-primary-active); /* Background color when active */
    --bs-btn-active-border-color: var(--bs-primary-active); /* Border color when active */
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary); /* Background color */
    --bs-btn-border-color: var(--bs-secondary); /* Border color */
    --bs-btn-hover-bg: var(--bs-secondary-active); /* Background color on hover */
    --bs-btn-hover-border-color: var(--bs-secondary-hover); /* Border color on hover */
    --bs-btn-active-bg: var(--bs-secondary-active); /* Background color when active */
    --bs-btn-active-border-color: var(--bs-secondary-active); /* Border color when active */
}

.btn-link {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
}

:root {
    --bs-body-font-size: 1.25rem;
    --bs-tertiary-color: var(--bs-body-color);
    --bs-link-tertiary-color: var(--bs-link-color);
    --bs-link-tertiary-color-rgb: var(--bs-link-color-rgb);
    --bs-link-tertiary-hover-color: var(--bs-link-hover-color);
    --bs-link-tertiary-hover-color-rgb: var(--bs-link-hover-color-rgb);
    --bs-link-tertiary-active-color: var(--bs-link-tertiary-hover-color);
    --bs-link-tertiary-active-color-rgb: var(--bs-link-tertiary-hover-color-rgb);

    --bs-offcanvas-color: var(--bs-body-color);
    --bs-offcanvas-bg: var(--bs-body-bg);

    --bs-tertiary-offcanvas-color: var(--bs-offcanvas-color);
    --bs-tertiary-offcanvas-bg: var(--bs-offcanvas-bg);
}

.card {
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    word-wrap: normal;
    overflow-wrap: normal;
}
.dropdown-menu {
    --bs-dropdown-font-size: var(--bs-body-font-size);
    --bs-dropdown-item-padding-x: 1.5rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-spacer: -2px;
}


.dropdown-menu {
    --bs-dropdown-link-active-bg: rgba(var(--bs-tertiary-bg-rgb), .7);
}

.bg-body-tertiary {
    color: var(--bs-tertiary-color);
}

.bg-body-tertiary:not(.navbar) a,
.bg-body-tertiary .liame {
    color: rgba(var(--bs-link-tertiary-color-rgb), var(--bs-link-opacity, 1));
}

.bg-body-tertiary a:hover,
.bg-body-tertiary .liame:hover {
    color: rgba(var(--bs-link-tertiary-hover-color-rgb), var(--bs-link-opacity, 1));
}

.bg-body-tertiary .nav {
    --bs-nav-link-color: var(--bs-link-tertiary-color);
    --bs-nav-link-hover-color: var(--bs-link-tertiary-hover-color);
    --bs-nav-link-disabled-color: var(--bs-link-tertiary-hover-color);
}

.bg-body-tertiary .offcanvas {
    color: var(--bs-tertiary-offcanvas-color);
    background: var(--bs-tertiary-offcanvas-bg);

}

/** Demo style */

.demo {
    height: 3.75rem;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
@media screen and (min-width: 768px) {

    .demo {
        height: 40px;
    }
}
/** end Demo*/

.main {
    padding-top: 2rem;
}
body.home .main {
    padding-top: 0;
}

section {
    scroll-margin-top: var(--navbar-height); /* Adjust this to match or exceed the height of the sticky nav */
}

footer,
section + section {
    margin-top: 2rem;
}
@media screen and (min-width: 992px) {
    .main {
        padding-top: 3rem;
    }
    footer,
    section + section {
        margin-top: 3rem;
    }
}

@media (max-width: 991px) {
    .breadcrumbs-mobile-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    section.breadcrumbs-mobile-hidden + section {
        margin-top: 0;
    }
}

@media screen and (max-width: 575px) {
    .display-3 {
        font-size: calc(1.475rem + 2.7vw);
    }
}
.navbar {
    height: var(--navbar-height);
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.5);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
}

@media screen and (min-width: 1200px) {
    header .nav-link {
        --bs-nav-link-padding-y: 0;
        /*line-height: var(--navbar-height);*/
        
    }
    header .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: var(--bs-dropdown-spacer);
    }
}
@media screen and (max-width: 1199px) {
    header .dropdown-menu {
        border: 0;
    }
}
.logo-svg svg {
    height: calc(var(--navbar-height) - 2 * var(--bs-navbar-padding-y));
    fill: currentColor;
    max-width: 100%;
}
.default-logo {
    position: relative;
    text-transform: uppercase;
}
.default-logo svg {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: .3;
    transform: translate(-50%, -50%);
}

main {
    min-height: calc(100vh - var(--navbar-height) - 72px);
}

.navbar-logo {
    height: calc(var(--navbar-height) - 2 * var(--bs-navbar-padding-y) - 2 * var(--bs-navbar-padding-y));
    width: auto;
}

@media screen and (max-width: 575px) {
    .navbar-brand {
        max-width: calc(100% - 140px);
    }
    .navbar-logo {
        max-width: 100%;
        height: auto;
        max-height: calc(var(--navbar-height) - 2 * var(--bs-navbar-padding-y) - 2 * var(--bs-navbar-padding-y));
    }
    
}



.bg-cover {
    background-position: center;
    background-size: cover;

}
.intro-fullwidth {
    height: calc(100vh - var(--navbar-height));
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 800px;
    min-height: fit-content;
}

.home:has(.demo) .intro-fullwidth {
    height: calc(100vh - var(--navbar-height) - 3.75rem);

}
@media screen and (min-width: 768px) {

    .home:has(.demo) .intro-fullwidth {
        height: calc(100vh - var(--navbar-height) - 40px);
    }

    .intro-fullwidth-lg {
        height: calc(100vh - var(--navbar-height));
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 800px;
        min-height: fit-content;
    }

    .cover-bg-lg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
.intro-overlay, .intro-overlay > * {
    position: relative;
}
.intro-overlay:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(180deg, rgba(var(--bs-secondary-bg-rgb), .6), rgba(var(--bs-secondary-bg-rgb), 0.8) 30%, rgba(var(--bs-secondary-bg-rgb), .8) 70%, rgba(var(--bs-secondary-bg-rgb), .6));
}

.card-img-top {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 Aspect Ratio → (4 / 3) * 100 */
    overflow: hidden;
    height: 0;
}
.card-img-top .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire space */
    transition: transform .5s ease;
    will-change: transform;
}
.card:hover .img {
    transform: scale(1.25);
}
.service-img {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio → (9 / 16) * 100 */
    overflow: hidden;
}
.service-img .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire space */
}
.card-body {
    display: flex;
    flex-direction: column;
}
.card-body .expand-link {
    margin-top: auto;
    text-align: right;
}

.expand-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.liame {
    unicode-bidi: bidi-override;
    direction: rtl;
    display: inline-block;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
}

.liame:hover {
    --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}

.liame.liame-short {
    font-size: 0;
    text-decoration: none;
}

.liame.liame-short:before {
    content: "E-Mail schreiben";
    font-size: var(--bs-body-font-size);
    direction: ltr;
    unicode-bidi: bidi-override;
    text-decoration: underline;
}

.logify {
    position: relative;
    text-transform: uppercase;
    color: var(--bs-primary);
    display: inline-block;
    white-space: normal;
}

.logify::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 2.25em;
    border-left: .1em solid;
    border-top: .1em solid;
    transform: rotate(75grad) skewY(-35deg) translate(-75%, -70%);
}


.han-seal {
    position: fixed; /* fallback for the sticky together with footer z-index... it will go behind it then */
    position: sticky;
    bottom: 25px;
    right: 0;
    text-align: right;
}

footer {
    position: relative;
    z-index: 1;
}

.profession-logo {
    display: inline-block;
    width: 150px;
    height: 150px;
}
.profession-logo:empty {
    display: none;
}

.profession-logo svg {
    fill: currentColor;
}


@media screen and (min-width: 768px) {
    .han-seal {
        bottom: 50px;
    }
    .han-seal img {
        height: 75px;
    }
    
}

.slider {
    display: flex;
}


.tns-nav {
    text-align: center;
    margin: 10px 0;
  }
  .tns-nav > [aria-controls] {
    width: 9px;
    height: 9px;
    padding: 0;
    margin: 0 5px;
    border-radius: 50%;
    background: #ddd;
    border: 0;
  }
  .tns-nav > .tns-nav-active { background: #999; }


  .usps i.bi {
    display: inline-block;
    width: 6rem;
    height: 6rem;
    background: red;
    font-size: 3rem;
    line-height: 6rem;
    border-radius: 50%;
    color: var(--bs-tertiary-bg);
    background: rgba(var(--bs-primary-rgb), .8);
    text-align: center;
}
.usp-smaller-mobile  .usps i.bi {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    line-height: 3rem;
}
@media screen and (min-width: 576px) {
    .usp-smaller-mobile  .usps i.bi {
        width: 5rem;
        height: 5rem;
        font-size: 2.5rem;
        line-height: 5rem;
    }
}

.small, small {
    font-size: .75em;
}




.masonry-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Space between items */
    justify-content: center; /* Ensures proper alignment */
}

/* Default: 1 column for mobile */
.masonry-item {
    width: 100%;
    margin-bottom: 15px;
}

/* 2 columns for tablets (min-width: 768px) */
@media (min-width: 768px) {
    .masonry-item {
        width: calc(50% - 10px); /* Account for gap */
    }
}

/* 3 columns for larger screens (min-width: 1200px) */
@media (min-width: 1200px) {
    .masonry-item {
        width: calc(33.333% - 10px);
    }
}

/* Ensure images fit properly */
.masonry-item img {
    width: 100%;
    height: auto; /* Maintains aspect ratio */
    display: block;
}

[data-reveal-class] {
    opacity: 0;    

}

.slide-up {
    animation: slideUp .5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}

.slide-left {
    animation: slideLeft 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}

.slide-right {
    animation: slideRight 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}

.fade-in {
    animation: fadeIn 1s cubic-bezier(.97,.01,.92,1);
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}

/*fadeIn Effects */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*slideLeft Effects */
@keyframes slideRight {
    0%{
        transform: translateX(-900px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/*slideRight Effects */
@keyframes slideLeft {
    0%{
        transform: translateX(900px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/*Animations End*/
@keyframes slideUp {
    0%{
        transform: translateY(900px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.delay-1 {
    animation-delay: .25s;
}

.delay-2 {
    animation-delay: .5s;
}

.delay-3 {
    animation-delay: .75s;
}






.navbar-phone a {
    text-indent: -9999px; /* Hides the text */
    position: relative; /* Needed for the pseudo-element */
    display: inline-block;
    width: calc(1.5em + 2 * var(--bs-navbar-toggler-padding-x)); /* Adjust for icon size */
    
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    overflow: hidden;
    vertical-align: middle;
    border: 1px solid;
    
    /* background-color: var(--bs-primary); 
    border-color: var(--bs-primary);
    color: #fff; */
    border-radius: var(--bs-navbar-toggler-border-radius);
}

.navbar-phone a:before {
    content: "\f5c1";
    font-family: bootstrap-icons;
    font-size: 1.5rem;
    text-indent: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 575px) {
    .contact-list {
        font-size: 1rem;
    }
}

.footer-images .img + .img {
    margin-left: 10px;
}
.footer-images .img {
    max-height: 75px;
    width: auto;    
    margin-top: 15px;
    margin-bottom: 15px;
    max-width: 100%;
}

/* Custom Navigation Buttons */
.modal-body .prev-btn, .modal-body .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 30px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 1000;
}

.modal-body .prev-btn {
    left: 10px;
}

.modal-body .next-btn {
    right: 10px;
}

.open-modal {
    cursor: zoom-in;
}

.modal-slider-image {
    max-width: 100%;
    max-height: calc(100vh - 175px);
    margin: 0 auto;
}

/* CSS Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Adjust image size as needed */
    gap: 40px 20px;
    text-align: center;
} 

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.grid-item img {
    width: 80%;
    height: 100px;
    display: block;
    object-fit: contain;
}

@media screen and (min-width: 768px) {
    .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* Adjust image size as needed */
    }
}



/* Normal table as bootstrap tabe */
table {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: var(--bs-body-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-emphasis-color);
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
    --bs-table-active-color: var(--bs-emphasis-color);
    --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
    --bs-table-hover-color: var(--bs-emphasis-color);
    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
    width: 100%;
    margin: 2rem 0;
    vertical-align: top;
    border-color: var(--bs-table-border-color);
}
table>:not(caption)>*>* {
    padding: .5rem .5rem;
    border-bottom-width: var(--bs-border-width);
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

table > tbody {
    vertical-align: inherit;
}

 table > thead {
    vertical-align: bottom;
}


.table-sm  > :not(caption) > * > * {
    padding: .25rem .25rem;
}


.table-bordered > :not(caption) > * {
    border-width: 0 var(--bs-border-width);
}
.table-bordered  > * {
    border-width: 0 var(--bs-border-width);
}
  

.table-borderless > :not(caption) > * > * {
    border-bottom-width: 0;
  }

.table-borderless > :not(:first-child) {
    border-top-width: 0;
}

th {
    font-family: var(--bs-heading-font-family);
    font-weight: 700;
    color: var(--bs-tertiary-color);
    background: var(--bs-tertiary-bg);
}

@media screen and (max-width: 767px) {
    td, th {
        display: block;
        width: 100% !important;
    }
    colgroup {
        display: none;
    }
}

.image-masked {
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Create a '>' shape */
        /* clip-path: polygon(45% 0%, 100% 0%, 100% 100%, 45% 100%, 60% 50%); */

}

.image-masked:after {
    content: "";    
    background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), .6), rgba(var(--bs-body-bg-rgb), 0.8) 30%, rgba(var(--bs-body-bg-rgb), .8) 70%, rgba(var(--bs-body-bg-rgb), .6));
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;    
    clip-path: polygon(0% 0%, 75% 0%, 120% 50%, 75% 100%, 0% 100%);
}
@media screen and (min-width: 992px) {

    .image-masked:after {
        clip-path: polygon(0% 0%, 50% 0%, 60% 50%, 50% 100%, 0% 100%);
    }
}

* + h2, * + h3 {
    margin-top: 2rem;
}

.link-in-list {
    display: block;
    max-width: 100%;
    overflow: hidden;
}

.slider.fixed-height {
    white-space: nowrap; /* Prevent line breaks between slides */
}

.slider.fixed-height .tns-item {
    height: 300px; /* Fixed height for all slides */
    display: inline-block; /* Ensure items stay inline */
    width: auto;
}

.slider.fixed-height img {
    height: 100%;       /* Make the image fill the slide height */
    width: calc(100vw - 1.5rem);        /* Keep the original aspect ratio */
    object-fit: contain;  /* Adjust how the image fits */
}    

@media (min-width: 576px) {

    .slider.fixed-height img {
        width: calc(540px - 1.5rem);        /* Keep the original aspect ratio */
    }
}

@media (min-width: 768px) {

    .slider.fixed-height img {
        width: auto;        /* Keep the original aspect ratio */
    }    
}

.slider-wrapper .prev-button,
.slider-wrapper .next-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bs-body-bg);
    padding: 2rem 1rem;
    border-radius: 0;
    opacity: .8;
    border: 0;
}
.slider-wrapper .prev-button {
    left: 0;
}
.slider-wrapper .next-button {
    right: 0;
}
.slider-wrapper .prev-button:hover,
.slider-wrapper .next-button:hover {
    opacity: 1;
}

.video-play-button {
    border: 0;
    background-color: rgba(var(--bs-tertiary-bg-rgb), .1);
    transition: all .3s;
}

.video-play-button svg {
    width: 35%;
    height: 35%;
}
.video-play-button svg path {
    fill: rgba(var(--bs-primary-rgb), .7);
    transition: all .3s;
}
.video-play-button:hover {
    background-color: rgba(var(--bs-tertiary-bg-rgb), 0);
}

.video-play-button:hover svg path {
    fill: rgba(var(--bs-primary-rgb), 1);
}

.xing-logo {
        width: 20px;
    height: 20px;
    line-height: 1;
    vertical-align: -.125em;
}


.home-header-transparent .navbar {
    --bs-bg-opacity: .6;
    backdrop-filter: blur(10px);
}
.home-header-transparent .navbar .nav-link {
    font-weight: 700;
}
.home-header-transparent #start {
    padding-top: var(--navbar-height);
}
.home-header-transparent:not(.home),
.home-header-transparent:has(.demo) #start {
    padding-top: calc(var(--navbar-height) + 3.75rem);
}
.home-header-transparent .intro-overlay:before {
    background-image: none;
    background-color: rgba(var(--bs-tertiary-bg-rgb), .6);
    backdrop-filter: blur(10px);
}
@media  screen and (min-width: 768px) {
    .home-header-transparent:not(.home),
    .home-header-transparent:has(.demo) #start {
        padding-top: calc(var(--navbar-height) + 40px);
    }
}

.home-header-services .card {
        background-color: rgba(var(--bs-body-bg-rgb), .6);
    backdrop-filter: blur(10px);
}

.home-header-services .tns-nav > [aria-controls] {

    background: rgba(var(--bs-body-bg-rgb), .6); 
    backdrop-filter: blur(10px);
    border-radius: 9px;
  }
.home-header-services  .tns-nav > .tns-nav-active { 
    background: rgba(var(--bs-body-color-rgb), .6); 
    width: 48px;
    backdrop-filter: blur(10px);
}
.home-header-services .tns-nav {
    margin: 1rem 0 0 0;
    font-size: 0;
}

@media screen and (max-width: 575px) {
    .smaller-phone .display-4 {
        font-size: calc(1.25rem + 2vw);
    }
    .smaller-phone .fs-3 {
        font-size: 1.25rem !important;
    }
    .smaller-phone .btn-lg {
        --bs-btn-font-size: 1rem;
    }
}