.elementor-widget-html.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-html .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-html.pa-bg-clipped-yes.premium-gbadge-custom .premium-global-badge-{{ID}} .premium-badge-text, .elementor-widget-html:not(.premium-gbadge-custom) .premium-global-badge-{{ID}} .premium-badge-container, .elementor-widget-html.premium-gbadge-custom:not(.pa-bg-clipped-yes) .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-widget-icon.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-icon .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-icon.pa-bg-clipped-yes.premium-gbadge-custom .premium-global-badge-{{ID}} .premium-badge-text, .elementor-widget-icon:not(.premium-gbadge-custom) .premium-global-badge-{{ID}} .premium-badge-container, .elementor-widget-icon.premium-gbadge-custom:not(.pa-bg-clipped-yes) .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-icon .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-9 .elementor-element.elementor-element-da03374 .elementor-icon-wrapper{text-align:center;}.elementor-9 .elementor-element.elementor-element-da03374 .elementor-icon{font-size:20px;}.elementor-9 .elementor-element.elementor-element-da03374 .elementor-icon svg{height:20px;}.elementor-9 .elementor-element.elementor-element-5e7ab06{width:initial;max-width:initial;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-5e7ab06.elementor-element{--align-self:flex-start;}.elementor-9 .elementor-element.elementor-element-b6f3244.elementor-element{--align-self:flex-start;}.elementor-9 .elementor-element.elementor-element-8d0f10d.elementor-element{--align-self:flex-start;}.elementor-9 .elementor-element.elementor-element-b01e36e .elementor-icon-wrapper{text-align:center;}.elementor-9 .elementor-element.elementor-element-b01e36e .elementor-icon{font-size:20px;}.elementor-9 .elementor-element.elementor-element-b01e36e .elementor-icon svg{height:20px;}.elementor-9 .elementor-element.elementor-element-a854937 .elementor-icon-wrapper{text-align:center;}.elementor-9 .elementor-element.elementor-element-a854937 .elementor-icon{font-size:20px;}.elementor-9 .elementor-element.elementor-element-a854937 .elementor-icon svg{height:20px;}.elementor-9 .elementor-element.elementor-element-5c41b3f.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-9 .elementor-element.elementor-element-ab89bf1 .elementor-icon-wrapper{text-align:center;}.elementor-9 .elementor-element.elementor-element-ab89bf1.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-d6955c0 );}.elementor-9 .elementor-element.elementor-element-ab89bf1.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-ab89bf1.elementor-view-default .elementor-icon{color:var( --e-global-color-d6955c0 );border-color:var( --e-global-color-d6955c0 );}.elementor-9 .elementor-element.elementor-element-ab89bf1.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-ab89bf1.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-d6955c0 );}.elementor-9 .elementor-element.elementor-element-ab89bf1 .elementor-icon{font-size:20px;}.elementor-9 .elementor-element.elementor-element-ab89bf1 .elementor-icon svg{height:20px;}.elementor-9 .elementor-element.elementor-element-f057b76 .elementor-icon-wrapper{text-align:center;}.elementor-9 .elementor-element.elementor-element-f057b76.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-5b4445c );}.elementor-9 .elementor-element.elementor-element-f057b76.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-f057b76.elementor-view-default .elementor-icon{color:var( --e-global-color-5b4445c );border-color:var( --e-global-color-5b4445c );}.elementor-9 .elementor-element.elementor-element-f057b76.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-f057b76.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-5b4445c );}.elementor-9 .elementor-element.elementor-element-f057b76 .elementor-icon{font-size:20px;}.elementor-9 .elementor-element.elementor-element-f057b76 .elementor-icon svg{height:20px;}/* Start custom CSS for html, class: .elementor-element-f4a7bd7 */.elementor-9 .elementor-element.elementor-element-f4a7bd7{
    display: none;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5e7ab06 */.elementor-9 .elementor-element.elementor-element-5e7ab06{
    margin: auto 0 !important;
    
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b6f3244 */.elementor-9 .elementor-element.elementor-element-b6f3244{
    margin: auto 0 !important;
    
    color: var(--mrkt-text-color-secondary) !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8d0f10d */.elementor-9 .elementor-element.elementor-element-8d0f10d{
    margin-top: auto !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5c41b3f */table{
    margin: 0 !important;
    background-color: var(--mrkt-color-primary-50) !important;
    pointer-events: none;
}


td span{
    padding-right: var(--mrkt-default-gap);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1e100cc */ol{
    list-style-type: none;
}/* End custom CSS */
/* Start custom CSS *//* fonts */

.text-small{
    font-size: var(--mrkt-typo-size-small);
}




/* 


feature based styling


*/




.flex{
  display: flex;
}

.flex-column{
  flex-direction: column;
}

.space-between{
  justify-content: space-between;
}

.gap-default{
  gap: var(--mrkt-default-gap) !important;
}

.gap-double{
  gap: calc(var(--mrkt-default-gap) * 2) !important;
}


.text-white{
    color: var(--mrkt-color-text-secondary);
}


.border-grey{
    border: 1px solid var(--mrkt-color-primary-300);
}



.clip-top-right{
    clip-path: polygon(0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 0% 100%);
}

.clip-bottom-left{
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50px 100%, 0% calc(100% - 50px));
}

.clip-top-and-bottom{
    clip-path: polygon(0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 50px 100%, 0% calc(100% - 50px));
}


.clip-bottom-left-border {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50px 100%, 0% calc(100% - 50px));
  background: var(--mrkt-color-primary-300);
  padding: 0px 1px !important;
}



.image-filter{
  filter:  saturate(0.84) contrast(0.74) brightness(0.65);
}


/* if needed in other direction -> rotate needed element (e.g. rotate: 180deg)*/

.box-decoration{
    border-top: 1px solid var(--mrkt-color-primary-900);
    border-left: 1px solid var(--mrkt-color-primary-900);
}




.scale-background::before{
  content: '';
  position: absolute;
  inset: 0;
  background: inherit; 
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  transition: filter 0.8s ease-in-out;
  pointer-events: none;
  z-index: 1;
}




.icon-wrapper{
  /*background-color: var(--mrkt-color-accent);*/
  max-height: 50px;
  width: auto;
}



.clip-form-icon-wrapper{
    clip-path: polygon(calc(20% - 16px) 0%, 0% 16px, 0% 100%, calc(100% - 16px) 100%, 100% calc(100% - 16px), 100% 0%);
}


.clip-form{
  
  clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0%);
  transition: 
  clip-path 0.5s ease-in-out,
  transform 0.6s ease-in-out;
}

.clip-form::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit; 
  background-size: cover;
  background-position: center;
  filter: blur(2px) brightness(0.7);
  transition: filter 0.8s ease-in-out;
  pointer-events: none;
  z-index: 1;
}


.card img{
  transition: 0.5s all ease-in-out;

  object-fit: cover;

}


.card:hover .scale-background img{
  /* clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 50%, 0% 0%); */
  /*transform: scale(1.05);*/

  
  transform: scale(1.025);
}

/*
.card:hover .clip-form{
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 50%, 0% 0%);
  transform: scale(1.05);
}
*/


.card{
  overflow: hidden;
  
  
  transition: 
  clip-path 0.5s ease-in-out,
  transform 0.6s ease-in-out;
}

.card:hover{
  cursor: pointer;


  /* transition not working with clip-path: none;!!!!*/
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
}

.card:hover .clip-form::before {
    filter: blur(0.5px) brightness(0.7);
}

/* .card-content::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 100%;
    background: var(--mrkt-color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s ease;
    overflow: hidden;
}

.card-content:hover::after{
    transform: scaleX(1);


} */





/* cards "Über uns" section */

.info-card{
    border: 1px solid var(--mrkt-color-primary-100);
    box-shadow: var(--mrkt-shadow-soft);
    flex: 1 1 25%;
}






/* border specs*/

.border-default{
  clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.border-default-outline{
  border: 1px solid var(--mrkt-color-primary-300);
  /*clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);*/
  background-color: var(--mrkt-color-page-bg) !important;
  color: var(--mrkt-color-text-primary);
}

button{
  transition: ease-in-out all 0.2s;
}


.border-default-outline:hover{
  clip-path: polygon(0% 0%, 100% 0, 100% 100%, 100% 100%, 0 100%);
}

.button-filled{
  background-color: var(--mrkt-color-primary-900);
  color: var(--mrkt-color-text-secondary);
}






.geo-border{
    position: relative;
    z-index: 1;
}

.geo-border::after{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 6px solid var(--mrkt-color-primary-1000);
    z-index: -1;
    
    /*clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);*/

    clip-path: polygon(0% 0%, 80% 0%, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0% 100%);
}




.geo-offset-border{
  position: relative;
  z-index: 1;
}

.geo-offset-border::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -20px;
    width: 100%;
    height: 100%;

    
    background: var(--mrkt-color-primary-1000);


    z-index: -2;
    
    /*clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);*/
    clip-path: polygon(0% 0%, 80% 0%, 100% 40px, 100% 100%, 40px 100%, 0% calc(100% - 40px));
}


.geo-offset-border::after{
  content: '';
  position: absolute;

  top: calc(20px + 6px);
  left: calc(-20px + 6px);
  width: calc(100% - 12px); /* Subtract 6px from both sides */
  height: calc(100% - 12px);

  background: var(--mrkt-color-page-bg);

  z-index: -1;

  clip-path: polygon(0% 0%, 80% 0%, 100% 40px, 100% 100%, 40px 100%, 0% calc(100% - 40px));
}






.text-link{
  font-weight: 700;
  color: var(--mrkt-color-text-primary) !important;
  text-transform: uppercase;
}

a{
  color: inherit;
}

.text-link::after{
  content: "";
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  height: 1px;
  width: 20px;
  transform-origin: left;
  background: var(--mrkt-color-text-primary);
  transition: width 0.5s ease-in-out;
}

.text-link:hover::after{
  width: 100%;
}



.text-link-inverted{
   font-weight: 700;
  color: var(--mrkt-color-text-secondary) !important;
  text-transform: uppercase;
}

.text-link-inverted::after{
  content: "";
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  height: 1px;
  width: 20px;
  transform-origin: left;
  background: var(--mrkt-color-text-secondary);
  transition: width 0.5s ease-in-out;
}

.text-link-inverted:hover::after{
  width: 100%;
}



/* Ablauf Section Aufzählung */


.process-wrapper{
    width: 100%;
    justify-content: center;
}


.process{
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;
}

.process li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the 01 number and the text div horizontally */
  text-align: center;  /* Centers the actual text inside the div */
}

.process li div {
    align-items: center;
}

.process li::before{
  content: "";
  position: absolute;
  top: 50px;


  /* Start the line from the center of the current item... */
  left: 50%; 
  /* ...and stretch it exactly 100% to the center of the next item */
  width: 100%;

  height: 1px;
  background: var(--mrkt-color-primary-900);
  z-index: 1;
}

.process li:last-child::before{
  display: none;
}

.process li::after{
  content: "";
  position: absolute;
  /* (Optional) I adjusted this from 115px to 116px so a 9px dot is mathematically 
     perfectly vertically centered over a 1px line at 120px */
  top: 45px; 
  left: 50%;
  transform: translateX(-50%);
  
  width: 9px;
  height: 9px;
  background: var(--mrkt-color-page-bg);
  /* border: 1px solid var(--mrkt-color-primary-900); -> Uncomment if you want a visible ring instead of a gap */
  z-index: 2;
}


.process span{
    display: block;
}

.process p{
  max-width: 50%; 
  margin: 0 auto;
}

.process div{
  width: fit-content;
  margin-top: var(--mrkt-space-m);
}


.process h3{
    width: fit-content;
}



.anchor-box:hover{
 background-color: rgb(6, 14, 14, 0.028);
 border-left: 5px solid var(--mrkt-color-primary-1000)!important;
}







/* Hero */


.hero{
  position: relative;
}

.svg-bg-escape {
      position: absolute !important;
      top: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      height: auto !important;
      z-index: -1 !important; 
      pointer-events: none;
}

/* 2. Force Elementor's inner container to stretch */
.svg-bg-escape .elementor-widget-container {
      width: 100% !important;
      height: 100% !important;
}

.hero-background{
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0; left: 0;
}

.hero-background #svg1 {
 width: 100% !important;

  object-fit: cover; 
  display: block;
}

#svg1 path{
  fill: var(--mrkt-color-primary-300);
  opacity: 0.5;
}



/* Hero Slider --------------------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------

*/

.mrkt-hero-slider{
  position: relative;
  overflow: hidden;
}


.mrkt-hero-slider__media-track{
  position: absolute;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  pointer-events: none;
}

.mrkt-hero-slider__content{
  position: relative;
  z-index: 2;
  display: grid;
}

.mrkt-hero-slider__nav{
  z-index: -1;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  
  background-color: var(--mrkt-color-page-bg);
}


/* slider nav item */



.mrkt-hero-slider__nav-item::before{
    content: "";
    position: absolute;
    inset: 0;
    width: var(--mrkt-nav-progress, 0%);
    background: var(--mrkt-color-primary-900)!important;
    backdrop-filter: blur(12px);
    transition: none;
    z-index: -1;
}

.mrkt-hero-slider__nav-line::after{
    content: "";
    position: absolute;
    inset: 0;
    width: 0%;
    background-color: var(--mrkt-color-primary-900) !important;
    transition: none;
}

.elementor-element:where(:not(.e-con)):where(:not(.e-div-block-base)) .elementor-widget-container, .elementor-element:where(:not(.e-con)):where(:not(.e-div-block-base)):not(:has(.elementor-widget-container)){
    transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s);
}






/* hero nav */



/* Slider root must be positioning context for media layers. */
  .mrkt-hero-slider {
    position: relative;
    overflow: hidden;
  }

  /* Dark gradient overlay on each slide for text readability. */
  .mrkt-hero-slider__media-slide::before {
    content: "";
    position: absolute;
    inset: 0;
   background: linear-gradient(180deg, rgba(198, 198, 199, 0.212) 0%, rgba(41, 41, 41, 0.2) 44%, rgba(87, 87, 87, 0.34) 100%);
  }

  /* Soft primary colour glow for depth. */
  .mrkt-hero-slider__media-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 72% 10%, color-mix(in srgb, var(--mrkt-color-primary), transparent 74%) 0%, transparent 56%);
    opacity: 0.65;
  }

  /* Bottom-up shadow — above media (z-index 1) but below content and nav. */
  .mrkt-hero-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(5, 8, 14, 0.82) 0%, rgba(6, 10, 15, 0.55) 42%, transparent 100%);
  }

  /*
    Media track must be absolute AND explicitly sized.
    Elementor gives .e-con.e-child no inherent height,
    so inset:0 alone won't work — width+height force it to fill the root.
  */
  .mrkt-hero-slider__media-track {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    pointer-events: none;
  }

  /*
    Slides are absolute children of the track.
    The track is now explicitly sized so inset:0 fills it correctly.
    Elementor's e-flex/e-con must not collapse the slide dimensions.
  */
  .mrkt-hero-slider__media-slide {
    width: 100% !important;
    height: 100% !important;
  }

  /*
    All slides default to off-screen right so they never flash visible.
    Only --current and the active transition states are ever on-screen.
    Opacity is not used for slide visibility — position handles it entirely.
  */
  .mrkt-hero-slider__media-slide {
    position: absolute !important;
    inset: 0 !important;
    transform: translateX(100%);
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: transform var(--hero-image-duration, 700ms) cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
  }

  /* Current slide sits at rest in viewport. */
  .mrkt-hero-slider__media-slide--current {
    transform: translateX(0) !important;
    z-index: 2;
  }

  /* Incoming slide staged off-screen in the correct direction before animation. */
  .mrkt-hero-slider--dir-next .mrkt-hero-slider__media-slide--incoming {
    transform: translateX(100%) !important;
    z-index: 3;
  }
  .mrkt-hero-slider--dir-prev .mrkt-hero-slider__media-slide--incoming {
    transform: translateX(-100%) !important;
    z-index: 3;
  }

  /* Both slides move simultaneously when --is-animating is applied. */
  .mrkt-hero-slider--is-animating .mrkt-hero-slider__media-slide--incoming {
    transform: translateX(0) !important;
  }
  .mrkt-hero-slider--dir-next.mrkt-hero-slider--is-animating .mrkt-hero-slider__media-slide--outgoing {
    transform: translateX(-100%) !important;
  }
  .mrkt-hero-slider--dir-prev.mrkt-hero-slider--is-animating .mrkt-hero-slider__media-slide--outgoing {
    transform: translateX(100%) !important;
  }

  /* Content stage uses one-cell grid so slides can overlap without absolute positioning. */
  .mrkt-hero-slider__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  /* Nav spans full width, padding creates the gutters instead of left/right offsets. */
  .mrkt-hero-slider__nav {
    z-index: 3;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    padding-left: var(--mrkt-root-padding-left) !important;
    padding-right: var(--mrkt-root-padding-right) !important;
    padding-bottom: var(--mrkt-M) !important;
  }
  @media only screen and (max-width: 767px)  {
     .mrkt-hero-slider__nav {
    padding-bottom: var(--mrkt-root-padding-bottom) !important;
    }
}


  /*
    Nav item: relative for line positioning.
    Overflow hidden clips the growing background pseudo-element.
  */
  .mrkt-hero-slider__nav-item {
    position: relative;
    overflow: hidden;

    
    box-sizing: border-box !important;
    background-origin: border-box !important;
  }

  .mrkt-hero-slider__nav-item p{

    padding: var(--mrkt-default-gap) 3rem !important;

    display: block;
    width: 100%;


    box-sizing: border-box !important;
    background-origin: border-box !important;


    /* * Creates a two-color gradient for the text that perfectly matches 
     * the position of the background progress bar.
     */
    background: linear-gradient(
        to right,
        var(--mrkt-color-text-secondary) var(--mrkt-nav-progress, 0%), /* 1. Text color WHEN background is behind it */
        var(--mrkt-color-text-primary) var(--mrkt-nav-progress, 0%)  /* 2. Text color BEFORE background reaches it */
    );
    
    /* Clips the gradient to the shape of the text */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; 
    
    /* Ensure the text stays on top */
    position: relative;
    z-index: 2;
  }

  /*
    Growing frosted background behind the active nav item.
    Width is driven by the same --mrkt-nav-progress JS variable as the line.
    Sits behind text (z-index -1) and blurs the image behind it.
  */
  /*
    z-index: -1 keeps this pseudo behind ALL nav item children regardless of nesting depth,
    since the nav-item itself is a stacking context (position:relative + overflow:hidden).
  */
  .mrkt-hero-slider__nav-item::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--mrkt-nav-progress, 0%);
    background: var(--mrkt-color-primary-900) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: none;
    z-index: -1;
  }

  /*
    Nav line is the thin base rule at the top of each nav item.
    Must be absolute + overflow:hidden to mask the expanding ::after.
  */
  /* .mrkt-hero-slider__nav-line {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    overflow: hidden;
    z-index: 1;
  }

  /* The animated fill inside the nav line — width driven by JS. 
  .mrkt-hero-slider__nav-line::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 0%;
    background-color: var(--mrkt-color-primary);
    box-shadow: 0 0 15px var(--mrkt-color-primary);
    transition: none;
  }
  
  */
  

  /* Content slides: enter from below + blur to sharp, after image finishes moving. */
  .mrkt-hero-slider__content-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(40px);
    filter: blur(12px);
    pointer-events: none;
    transition: opacity var(--hero-content-duration, 800ms) ease, transform var(--hero-content-duration, 800ms) var(--hero-ease, cubic-bezier(0.22, 1, 0.36, 1)), filter var(--hero-content-duration, 800ms) ease;
    will-change: transform, opacity, filter;
  }

  .mrkt-hero-slider__content-slide--active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    pointer-events: auto;
    transition-delay: var(--hero-content-delay, 600ms);
  }

  /* Active nav line width is driven by JS progress variable. */
  .mrkt-hero-slider__nav-item--active .mrkt-hero-slider__nav-line::after {
    width: var(--mrkt-nav-progress, 0%) !important;
    transition: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .mrkt-hero-slider__media-slide,
    .mrkt-hero-slider__content-slide,
    .mrkt-hero-slider__nav-line::after {
      transition: none !important;
    }
  }
  
  
  .mrkt-hero-slider .elementor .e-div-block-base{
    display: grid !important;
  }/* End custom CSS */