/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/*
Align Center
*/

.mit-team-area-img__team-position {
    text-align: center;
}


/*
NAVIGATION
*/

.mm__nav-items>li>a {
    color: white !important;
}

/*
HERO
*/

.overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 9999;
  
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%);
    mix-blend-mode: screen; /* oder 'normal' je nach gewünschtem Effekt */
    animation: spotlightReveal 2s ease-out forwards;
  }
  @keyframes spotlightReveal {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(10);
      opacity: 0;
    }
  }
.mit-hero-block-bg {
    background-color: rgba(225, 225, 225, 0.15);
}

.mit-hero-heading {
    position: relative;
    z-index: 1;
}

.mit-hero-heading:before {
    content: "";
    background-image: url(https://ks-bricks.dev.zold.at/wp-content/uploads/object-vector.svg);
    width: 100%;
    position: absolute;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mit-hero-container {
    align-items: center!important;
}

.mit-hero-block-right {
    align-self: flex-end;
    position: relative;
    bottom: 16px;
}

.mit-hero-container .mit-hero-block-bg:nth-child(4), .mit-hero-container .mit-hero-block-bg:nth-child(6),
.mit-hero-container .mit-hero-block-bg:nth-child(3) , .mit-hero-container .mit-hero-block-bg:nth-child(5) {
    position: relative;
    top: -50px;
}

.mit-hero-container .mit-hero-block-bg:nth-child(5) {
    right: -50px;
}

.mit-hero-container .mit-hero-block-bg:nth-child(6) {
    position: relative;
    left: -50px;
}

.mit-hero-block-bg {
    box-shadow: 1px 1px 14px #282828;
}

.sticky.scrolling .mit-header {
    background-color: rgba(225, 225, 225, 0.30);
    backdrop-filter: blur(20px);
    margin-top: 1rem;
}

.sticky.scrolling .mit-header .menu-item a {
    color: var(--base) !important;
}

.sticky.scrolling .mit-header .mit-header-btn {
    background-color: var(--base);
    color: var(--white);
    border-color: var(--base);
}

/*
BUTTON EFFECT
*/

.btn--primary-dark:hover, .btn--primary-dark:focus,
.mit-btn--neutral:hover, .mit-btn--neutral:focus,
.btn--primary:hover,.btn--primary:focus {
    animation: pulseshadow 1s;
    box-shadow: 0 0 0 2em transparent;
    transform: scale(1);
    transition: scale 0.5s ease-in-out;
}

@keyframes pulseshadow {
    0% { box-shadow: 0 0 0 0 var(--primary); 
        transform: scale(1.1); 
        transition: scale 0.5s ease-in-out;
    }
}

.mit-btn--neutral:hover {
    background-color: var(--primary)!important;
    border-color: var(--primary)!important;
}

/*
PROJECT
*/

.card-mit-project-card__heading {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    width: 100%;
    border-radius: 20px;
}

.card-mit-project-card__wrapper:hover svg.brxe-vnlsbj.brxe-icon.card-mit-project-icon {
    fill: #D62740;
    top: 0;
    bottom:0;
    transition: fill .3s ease-in-out;
}

.card-mit-link {
    width: 100%;
    padding-inline: var(--space-xs);
}

.mit-border-tag {
    width: 5.5rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fffefe;
    border-right: 0.5rem solid #fff;
    border-left: 0.5rem solid #fff;
    border-radius: 0rem 0 0rem 1rem;
    padding: 0.3rem;
}

.mit-border-tag::after, .mit-border-tag::before {
    width: 5.25rem;
    height: 5.25rem;
    content: "";
    position: absolute;
} 

.mit-border-tag::after {
    background: transparent;
    top: 6rem;
    right: -8px;
    border-top-right-radius: 2.8rem;
    box-shadow: 1.5rem -1rem #fff;
}

.mit-border-tag::before {
    background: transparent;
    right: 5rem;
    top: 0;
    border: 7rem;
    border-top-right-radius: 2.5rem;
    box-shadow: 1.5rem -0.25rem #ffffff;
}


/*
LOGOS SLIDER
*/


.mit-logos-slider__logo-list{
    /* Here you can change the animation time (35s) and also for those who have activated the reduce motion setting (80s), the more time you add, the slower the animation will be. */
    --mit-logos-slider-duration: 35s;
    --mit-logos-slider-duration-reduce: 80s;
    
    animation: mit-logos-slider-horizontal-scroll-rtl var(--mit-logos-slider-duration) linear infinite;
  
    @media (prefers-reduced-motion) {
      animation: mit-logos-slider-horizontal-scroll-rtl var(--mit-logos-slider-duration-reduce) linear infinite !important;
    }
  }
  
  /* Animation from right to left */
  @keyframes mit-logos-slider-horizontal-scroll-rtl {
    from {transform: translateX(0);}
    to {transform: translateX(-100%);}
  }

/*
REVIEWS
*/

.splide__list .splide__slide:not(.is-active) {
    opacity: 0.5;
    transition: opacity .3s linear;
}

.splide__list .splide__slide {
    opacity: 0.5;
    transition: opacity .3s linear;
}

.splide__list .splide__slide.is-active {
    opacity: 1;
}


/* With this property set to "splide__track" it will serve to display the cards outside the container */
.testimonial-4__slider .splide__track{
    overflow: visible
}

/* Cursor styles when the mouse is over and when the click is held to slide. */
.testimonial-4__slider .card-testimonial-4 {
    cursor: grab;
    height: 100%!important;
}
.testimonial-4__slider .card-testimonial-4:active{
    cursor: grabbing;
}

svg.card-testimonial-4__icon {
    position: absolute;
    right: 1rem;
}

/*
TEAM
*/


.mit-team-area-img li:nth-of-type(1) {
    margin-top: 400px;
    grid-column: 2;
}

.mit-team-area-img li:nth-of-type(2) {
    margin-top: 200px;
    grid-column: 3;
}

/*
WORKFLOW SECTION
*/
li.brxe-block.mit-workflow__feature-element {
    color: #fff;
}

/*
FOOTER
*/

.mit-footer-bottom-logo {
    position: absolute;
}

.mit-footer-bottom {
    padding-top: 2rem;
}

#menu-footer a {
    color: #fff;
}

#menu-footer li#menu-item-746 a {
    pointer-events: none;
}

#menu-footer .menu-item a[aria-current="page"]::after {
    content: "";
    border-bottom: 2px solid #fff;
    width: 100%;
    bottom: 0;
    position: absolute;
}

#menu-footer .menu-item a:before {
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: 2px solid #ffffff !important;
    width: 100%;
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease-in-out;
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: left;
    -webkit-transition: transform .4s ease-in-out;
    -moz-transform: scaleX(0);
    -moz-transform-origin: left;
    -moz-transition: transform .4s ease-in-out;
    -o-transform: scaleX(0);
    -o-transform-origin: left;
    -o-transition: transform .4s ease-in-out;
}

#menu-footer .menu-item a:hover:before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
}