.embla__viewport {
overflow: hidden;
width: 100%;
}

.embla__viewport.is-draggable {
cursor: move;
cursor: grab;
}

.embla__viewport.is-dragging {
cursor: grabbing;
}

.embla__container {
display: flex;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: transparent;
margin-left: -10px;
}

.embla__slide {
position: relative;
padding-left: 10px;
flex:0 0 100%;
}

.embla__button {
outline: 0;
cursor: pointer;
display: flex;
background-color: transparent;
touch-action: manipulation;
position: absolute;
z-index: 1;
top: 50%;
transform: translateY(-50%);
border: 0;
width: 30px;
height: 30px;
justify-content: center;
align-items: center;
padding: 0;
}

.embla__button span{
font-size:17px;
font-weight: 700;
display: flex;
align-items: center;
    justify-content: center;
--bg-opacity: 1;
    background-color: #edf2f7;
    background-color: rgba(237,242,247,var(--bg-opacity));
    --text-opacity: 1;
    color: #919aa6;
    color: rgba(145,154,166,var(--text-opacity));
    border-radius: 9999px;
    height: 100%;
    width: 100%;
}

.embla__button:focus {
    outline:none;
    }

.embla__button:disabled {
cursor: default;
opacity: 0.3;
}

.embla__button__svg {
width: 100%;
height: 100%;
}

.embla__button--prev {
left: -40px;
}

.embla__button--next {
right: -40px;
}

.embla__dot:focus {
    outline:none;
}

.embla__dots {
display: flex;
list-style: none;
justify-content: center;
padding-top: 10px;
}

.embla__dot {
background-color: transparent;
cursor: pointer;
position: relative;
padding: 0;
outline: 0;
border: 0;
width: 10px;
height: 10px;
margin-right: 7.5px;
margin-left: 7.5px;
display: flex;
align-items: center;
}

.embla__dot:after {
background-color: #D6D6D6;
width: 10px;
height: 10px;
border-radius: 500px;
content: "";
}

.embla__dot.is-selected:after {
background-color: #869791;
opacity: 1;
}