.monaco-slider .monaco-slider__controls {
    position: relative;
    z-index: 20;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.monaco-slider .monaco-slider__controls .splide__arrow,
.monaco-slider .monaco-slider__controls .splide__toggle {
    position: static;
    display: flex;
    width: 55px;
    height: 55px;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    border-radius: 9999px;
    background-color: transparent;
    padding: 0;
    color: #144477;
    opacity: 1;
    transform: none;
    transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out;
}

.monaco-slider .monaco-slider__controls .splide__arrow {
    top: auto !important;
    right: auto !important;
    left: auto !important;
}

.monaco-slider .monaco-slider__controls .splide__arrow svg,
.monaco-slider .monaco-slider__controls .splide__toggle svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

.monaco-slider .monaco-slider__controls .splide__arrow path {
    fill: currentColor;
    stroke: currentColor;
}

.monaco-slider .monaco-slider__controls .splide__toggle__play circle,
.monaco-slider .monaco-slider__controls .splide__toggle__play polygon {
    stroke: currentColor;
}

.monaco-slider .monaco-slider__controls .splide__toggle__pause path {
    fill: currentColor;
}

.monaco-slider .monaco-slider__controls .splide__arrow:hover,
.monaco-slider .monaco-slider__controls .splide__toggle:hover {
    background-color: #144477;
    color: #FFFFFF;
}

.hero-image .monaco-slider .monaco-slider__controls .splide__arrow,
.hero-image .monaco-slider .monaco-slider__controls .splide__toggle,
.bg-primary-blue .monaco-slider .monaco-slider__controls .splide__arrow,
.bg-primary-blue .monaco-slider .monaco-slider__controls .splide__toggle,
.bg-primary-blue-dark .monaco-slider .monaco-slider__controls .splide__arrow,
.bg-primary-blue-dark .monaco-slider .monaco-slider__controls .splide__toggle,
.bg-primary-petrol .monaco-slider .monaco-slider__controls .splide__arrow,
.bg-primary-petrol .monaco-slider .monaco-slider__controls .splide__toggle,
.bg-primary-green .monaco-slider .monaco-slider__controls .splide__arrow,
.bg-primary-green .monaco-slider .monaco-slider__controls .splide__toggle,
.text-inverted .monaco-slider .monaco-slider__controls .splide__arrow,
.text-inverted .monaco-slider .monaco-slider__controls .splide__toggle {
    color: #FFFFFF;
}

.hero-image .monaco-slider .monaco-slider__controls .splide__arrow:hover,
.hero-image .monaco-slider .monaco-slider__controls .splide__toggle:hover,
.bg-primary-blue .monaco-slider .monaco-slider__controls .splide__arrow:hover,
.bg-primary-blue .monaco-slider .monaco-slider__controls .splide__toggle:hover,
.bg-primary-blue-dark .monaco-slider .monaco-slider__controls .splide__arrow:hover,
.bg-primary-blue-dark .monaco-slider .monaco-slider__controls .splide__toggle:hover,
.bg-primary-petrol .monaco-slider .monaco-slider__controls .splide__arrow:hover,
.bg-primary-petrol .monaco-slider .monaco-slider__controls .splide__toggle:hover,
.bg-primary-green .monaco-slider .monaco-slider__controls .splide__arrow:hover,
.bg-primary-green .monaco-slider .monaco-slider__controls .splide__toggle:hover,
.text-inverted .monaco-slider .monaco-slider__controls .splide__arrow:hover,
.text-inverted .monaco-slider .monaco-slider__controls .splide__toggle:hover {
    background-color: rgba(255, 255, 255, .16);
}