/* DEVELOPMENT */
.otgs-development-site-front-end {
    display: none;
}


/* LOGO */
#logo-container {
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    left: -30px;
}

div#site-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0;
    position: relative;
    scale: 0.9;
}

div#site-logo .left {
    position: absolute;
}

div#site-logo .right {
    display: flex;
    flex-direction: column;
    position: relative;
    left: 120px;
}

div#logo-container + p {
    display: none;
}

/* HEADER */
header {
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0px -5px 15px 10px #00000038;
}

header div#header-container {
    padding-top: 20px;
    padding-bottom: 30px;
    transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
}

header.small div#header-container {
    padding-top: 35px;
    padding-bottom: 10px;
}

#page-links .wp-block-navigation-item__label {
    letter-spacing: 1.5px;
}

/* NAVIGATION HOVER */
.main-navigation li:hover {
/*    background-color: var(--wp--preset--color--antares-blue);*/
/*    color: white;*/
/*    padding: 0 5px!important;*/
    border-bottom: 2px solid #00a0ff;
}

.main-navigation li {
/*    padding: 0 5px!important;*/
/*    margin: 0 15px;*/
    padding-bottom: 2px;
    border-bottom: 2px solid rgba(0,0,0,0.00);
}

ul.main-navigation li:last-of-type.current-menu-item {
/*    margin-right: 0;*/
/*    margin: 0 24px;*/
/*    border-bottom: 2px solid rgba(0,0,0,0.00);*/
}

.main-navigation li span {
    white-space: nowrap;
}

/*
#page-links.small ul.main-navigation li:last-of-type {
    margin-right: 24px;
    margin: 0 24px;
}
*/

/*
#page-links ul.main-navigation li:last-of-type {
    margin-right: 0;
    margin: 0 24px;
}
*/

#page-links ul.main-navigation {
    gap: 35px!important;
}

.main-navigation .current-menu-item {
    font-weight: 500;
    border-bottom: 2px solid #00a0ff;    
}


/* ANIMATION ANTARES */
#logo-container #MainLogoText {
    width: 222px;
    margin-left: 0px;
    transition: width 0.3s ease, margin-left 0.3s ease ;
}

#logo-container.small #MainLogoText {
    width: 200px;
    margin-left: -10px;
    position: relative;
    bottom: 9px;
}


/* ANIMATION WERBEAGENTUR */
#logo-container #subLogoText {
    height: 22px;
    opacity: 1;
    transition: height 0.3s ease, opacity 0.3s ease;
}

#logo-container.small #subLogoText {
    height: 0;
    opacity: 0;
}

/* ANIMATION LOGO */
#logo-container .left img {
    scale: 1;
    transition: scale 0.3s ease
}

#logo-container.small .left img {
    scale: 0.8;
    transition: scale 0.3s ease
}

/* ANIMATION NAVIGATION */
div#page-links {
    height: unset;
    display: flex;
    flex-direction: column;
    position: relative;
    bottom: -9px;
}

div#page-links.small {
    height: 35px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    column-gap: 25px;
    bottom: 12px;
}

#page-links > div {
    gap: 0;
    position: relative;
    right: -24px;
}

div#page-links .wp-block-social-links {
    scale: 0.8;
}

#page-links.small > div {
    gap: 0;
}

div#page-links.small .wp-block-social-links {
    scale: 0.8;
}

/* LOGO ANIMATION OUTLINE */
#logo-container #site-logo .left:before {
    content: '';
    width: 120px;
    height: 120px;
    position: absolute;
    background-color: white;
    display: block;
    border-radius: 50%;
    scale: 1;
    transition: scale 0.3s ease;
}

#logo-container.small #site-logo .left:before {
    scale: 0.77;
}



/* REFERENZEN  TAB NAV */
.tab-trigger-container {
    display: flex;
    flex-direction: row;
    gap: 20px; 
    margin-bottom: 25px;  
    flex-wrap: wrap;
    justify-content: center;
}
    
.tab-trigger h4 {
    margin-bottom: 0;
    padding: 15px 20px;
    background-color: white;
}
    
.tab-trigger h4, .tab-external h4 {
    margin-bottom: 0;
    margin-top: 0;
    padding: 15px 20px;
    background-color: white;
    white-space: nowrap;
    border-radius: 300px;
}
    
.tab-trigger, .tab-external {
    cursor: pointer;
}
    
.tab-external.events h4 a {
    color: var(--wp--preset--color--events-orange);
}
    
.tab-external.concepts h4 a {
    color: var(--wp--preset--color--concepts-blue);
}
    
.tab-trigger.active h4 {
    color: white;
    background-color: var(--wp--preset--color--pictures-blue);
}
    
.tab-trigger:hover h4, .tab-external:hover h4 {
    color: white;
    background-color: var(--wp--preset--color--pictures-blue);
}
    
.tab-external:hover h4 a {
    color: white;
}
    
.tab-external a {
    font-weight: 600!important;
    text-decoration: none;
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

.tab-container figure a img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 1s;
    position: relative;
}

.tab-container figure a {
    position: relative;
}
    
.tab-container figure a:before {
    content: 'zum Projekt';
    position: absolute;
    bottom: 0;
    color: white;
    background-color: #003f6fa1;
    display: block;
    width: 100%;
    height: 42px;
    z-index: 100;
    text-align: center;
    line-height: 42px;
}

/* LEISTUNGEN ANIMATION */
.leistung-link a {
    font-weight: 400;
    text-decoration: none;
    color: unset;
}

.leistung-link a:hover {
    font-weight: 700;
}

.leistung-link {
    transform: scale(1);
    transition: transform 0.3s ease-in-out; 
    animation: pulse 3s infinite 0.5s; 
}

/* Keyframes for the pulse animation */
@keyframes pulse {
    0% {
        transform: scale(1); /* Start with normal size */
    }
    50% {
        transform: scale(1.03); /* Scale up to 1.03 at 50% of the animation */
    }
    100% {
        transform: scale(1); /* Back to normal size at the end of the animation */
    }
}

.leistung-link:hover {
    transform: scale(1.05); 
    animation: none; 
}

/* CUSTOMER SLIDER */
#customers .splide__arrow--prev {
    left: -2em;
}

#customers .splide__arrow--next {
    right: -2em;
}

#customers .splide__slide img {
  width: 100%;
  height: auto;
}

/*
.customer img {
    object-fit: contain;
    width: 100%;
    height: auto;
    padding: 20px;
}

#customers .splide__slide {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}
*/

.my-carousel-progress {
    background: var(--wp--preset--color--web-medium);
}

.my-carousel-progress-bar {
    background: var(--wp--preset--color--antares-blue);
    height: 3px;
    transition: width 400ms ease;
    width: 0;
}

/* NINJA FORMS FIXES */
label#nf-label-field-9 a {
    color: var(--wp--preset--color--pictures-blue);
    text-decoration: none;
    font-weight: inherit;
}

#nf-field-10 {
    border-radius: 300px;
    padding-left: 30px;
    padding-right: 30px;
}

label#nf-label-field-9 a:hover {
    text-decoration: underline;
}

.nf-form-content {
    padding-left: 0!important;
}

.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {
    background: var(--wp--preset--color--pictures-blue);
    border: 0;
    color: white;
    transition: all .5s;
}

.nf-form-content button:hover, .nf-form-content input[type=button]:hover, .nf-form-content input[type=submit]:hover {
    background: var(--wp--preset--color--pictures-blue);
    font-weight: 800;
    color: white;
}

/* COOKIE BUTTON */
#cookie-options a {
    text-decoration: none;
    color: inherit;
    font-weight: 400;
}

#cookie-options a:hover {
    text-decoration: none;
    color: inherit;
    font-weight: 400;
}
/* OFFSET CAPTION */
figure.offset figcaption {
    position: relative!important;
    left: 17px!important;
}



/* UNITS BLOCK */
.units figcaption {
    position: relative;
    left: 17px;
}

.units .heart {
    position: relative;
    display: inline-block;
}

.units .heart:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://antares-werbeagentur.de/wp-content/uploads/icon-heart-filled.svg');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    z-index: 999/* ensures the :after element does not interfere with clicking */
}

.units:hover .heart:after {
    opacity: 1;
}

.units {
    scale: 1;
    transition: scale 0.3s ease-in-out;
}

.units:hover {
    scale: 1.03;
}

#units-container .overwrite-margin {
    margin-left: 0!important;
    margin-right: 0!important;
    max-width: unset;
}

/* INTRO SLIDER CONTROLS */
#intro-slider .splide__controls {
    position: relative;
    bottom: 70px;
}

#intro-slider figure figcaption {
    position: absolute;
    bottom: 0;
    color: white;
    left: 15px;
}

#intro-slider figure {
    position: relative;
}

/* BINDING FIX */
p.binding-container {
    padding: 0!important;
}

/* JOB BREADCRUM */
.job-breadcrumb a  {
    text-decoration: none;
}

/* APPLICATION PROCESS ARROWS */
/* Container styling for the grey boxes */
#application-process .wp-block-group {
  position: relative; /* Ensure pseudo-elements are positioned relative to the grey boxes */
}

/* Pseudo-element for the first arrow */
#application-process .wp-block-group:nth-of-type(2)::after {
    content: "";
    position: absolute;
    top: 20%;
    left: -26%;
    transform: translateY(-50%) scaleX(-1);
    width: 160px;
    height: 160px;
    background-image: url('https://antares-werbeagentur.de/wp-content/uploads/arrow-a.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Pseudo-element for the second arrow */
#application-process .wp-block-group:nth-of-type(3)::after {
    content: "";
    position: absolute;
    top: 85%;
    left: -27%;
    transform: translateY(-50%) scaleY(-1);
    width: 140px;
    height: 140px;
    background-image: url(
  'https://antares-werbeagentur.de/wp-content/uploads/arrow-b.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Pseudo-element for the third arrow */
#application-process .wp-block-group:nth-of-type(4)::after {
    content: "";
    position: absolute;
    top: 20%;
    left: -27%;
    transform: translateY(-50%);
    width: 150px;
    height: 150px;
    background-image: url('https://antares-werbeagentur.de/wp-content/uploads/arrow-e.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* DIGIACCESS */
button#dAopener {
    display: none!important;
} 

/*
.custom-button {
    display: none!important;
}
*/

/* OVERWRITE SIZE */
.overwrite-size {
    scale: 0.8;
}

/* FACEBOOK OVERWRITE */
.facebook-overwrite svg {
    width: 36px!important;
    height: 36px!important;
    scale: 1.2;
}

.facebook-overwrite a {
    padding: 0;
}

.facebook-overwrite {
    background-color: white!important;
}

.facebook-overwrite svg path {
    fill: var(--wp--preset--color--web-dark);
}

/* VCARDS */

#vcard-footer {
    row-gap: 5px;
}

#vcard-wrapper {
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    z-index: 999;
}

.single-people {
    background-color: white;
}

.single-people #vcard-footer a {
    font-weight: 300;
}