/* ======================================================
   HANTESIS Hair Excellence Days
   Premium Hero
====================================================== */

.hed-hero{

    position:relative;

    width:100%;

    max-width:1400px;

    margin:35px auto 50px;

    border-radius:30px;

    overflow:hidden;

    background:#fff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.12);

}

/* ==========================================
   Slider
========================================== */

.hed-hero-slider{

    position:relative;

    width:100%;

}

/* ==========================================
   Slide
========================================== */

.hed-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:

        opacity 1.2s ease,

        visibility 1.2s ease;

}

.hed-slide.is-active{

    opacity:1;

    visibility:visible;

    position:relative;

    z-index:2;

}
.hed-slide.is-active .hed-slide-image{

    transform:scale(1.035);

}

/* ==========================================
   Bild
========================================== */

.hed-slide-image{

    width:100%;

    height:auto;

    display:block;

    transform:scale(1);

    transition:transform 8s ease;

    will-change:transform;

}

/* ==========================================
   Overlay
========================================== */

.hed-hero::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            to bottom,

            rgba(255,255,255,0),

            rgba(0,0,0,.04)

        );

}

/* ==========================================
   Navigation
========================================== */

.hed-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:rgba(18,18,18,.18);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    color:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:30;

    opacity:.45;

    transition:
        background .35s ease,
        transform .35s ease,
        opacity .35s ease;

}

.hed-arrow:hover{

    background:rgba(212,174,104,.95);

    opacity:1;

    transform:translateY(-50%) scale(1.08);

}

.hed-arrow-prev{

    left:18px;

}

.hed-arrow-next{

    right:18px;

}
.hed-arrow svg{

    width:20px;

    height:20px;

}


/* ==========================================
   Scroll Indicator
========================================== */

.hed-scroll-indicator{

    display:none;

}
@media (hover:hover){

    .hed-hero:hover .hed-arrow{

        opacity:1;

    }

}

/* ==========================================
   Responsive
========================================== */

@media(max-width:900px){

    .hed-hero{

        margin:20px;

        border-radius:20px;

    }

    .hed-arrow{

        width:44px;

        height:44px;

        opacity:.95;

    }

    .hed-arrow-prev{

        left:12px;

    }

    .hed-arrow-next{

        right:12px;

    }

}