.moov-tabs-card-carousel {
--mtc-navy: #1b3a66;
--mtc-coral: #ed1847;
--mtc-white: #ffffff;
--mtc-inner-height: 553px;
--mtc-card-height: 430px;
--mtc-max-width: 1920px;
--mtc-card-width: 318px;
width: 100%;
max-width: var(--mtc-max-width);
margin: 0 auto;
color: var(--mtc-navy);
font-family: 'Century Gothic',Helvetica,Arial,Lucida,sans-serif;
}
.moov-tabs-card-carousel *,
.moov-tabs-card-carousel *::before,
.moov-tabs-card-carousel *::after {
box-sizing: border-box;
}
.moov-tabs-card-carousel__shell {
width: 100%;
padding: 25px;
border-radius: 10px;
background: var(--mtc-white);
box-shadow: 0 2px 10px rgba(17, 35, 70, 0.28);
}
.moov-tabs-card-carousel--without-outer .moov-tabs-card-carousel__shell {
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.moov-tabs-card-carousel__title {
margin: 0 0 25px;
color: var(--mtc-navy);
font-size: 30px;
font-weight: 400;
line-height: 37px;
}
.moov-tabs-card-carousel--without-outer .moov-tabs-card-carousel__title {
margin: 25px 0;
}
.moov-tabs-card-carousel__title strong {
color: var(--mtc-coral);
font-weight: 700;
}
.moov-tabs-card-carousel__inner {
position: relative;
isolation: isolate;
width: 100%;
height: var(--mtc-inner-height);
min-height: 300px;
overflow: hidden;
border-radius: 10px;
background-color: var(--mtc-coral);
background-image: url(//moovenergy.co.za/wp-content/plugins/business-services/assets/images/carousel-background.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
touch-action: pan-y;
}
.moov-tabs-card-carousel__stage {
position: absolute;
inset: 0 0 75px;
overflow: hidden;
touch-action: pan-y;
}
.moov-tabs-card-carousel__card {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
display: flex;
width: var(--mtc-card-width);
height: var(--mtc-card-height);
padding: 25px;
align-items: stretch;
justify-content: flex-start;
border-radius: 10px;
background: var(--mtc-white);
box-shadow: 0 8px 20px rgba(17, 35, 70, 0.16);
color: var(--mtc-navy);
opacity: 0;
overflow: hidden;
pointer-events: none;
transform: translate(-50%, -50%) translateX(var(--mtc-card-offset, 0));
transform-origin: center;
transition: transform 430ms cubic-bezier(0.22, 1, 0.36, 1), height 430ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease, box-shadow 320ms ease;
}
.moov-tabs-card-carousel__card.is-active {
z-index: 4;
opacity: 1;
pointer-events: auto;
height: var(--mtc-card-height);
}
.moov-tabs-card-carousel__card.is-near {
z-index: 3;
opacity: 0.75;
pointer-events: auto;
height: max(220px, calc(var(--mtc-card-height) - 55px));
}
.moov-tabs-card-carousel__card.is-far {
z-index: 2;
opacity: 0.15;
pointer-events: auto;
height: max(200px, calc(var(--mtc-card-height) - 118px));
}
.moov-tabs-card-carousel__card.is-hidden {
z-index: 1;
opacity: 0;
height: max(190px, calc(var(--mtc-card-height) - 132px));
}
.moov-tabs-card-carousel__card-inner {
display: flex;
width: 100%;
min-width: 0;
height: 100%;
align-items: stretch;
flex-direction: column;
gap: 15px;
pointer-events: none;
}
.moov-tabs-card-carousel__icon {
display: flex;
width: 68px;
height: 57px;
min-height: 57px;
margin: 0 auto;
align-items: center;
justify-content: center;
flex: 0 0 57px;
pointer-events: none;
}
.moov-tabs-card-carousel__icon img,
.moov-tabs-card-carousel__icon picture {
display: block;
width: 68px;
height: 57px;
pointer-events: none;
}
.moov-tabs-card-carousel__icon img {
object-fit: contain;
}
.moov-tabs-card-carousel__heading {
margin: 0;
padding: 0;
color: var(--mtc-navy);
font-size: 25px;
font-weight: 400;
line-height: 25px;
text-align: center;
pointer-events: none;
}
.moov-tabs-card-carousel__heading strong {
font-weight: 700;
}
.moov-tabs-card-carousel__heading span + strong::before {
content: " ";
}
.moov-tabs-card-carousel__body {
min-height: 0;
padding-right: 8px;
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
color: var(--mtc-navy);
font-size: 15px;
font-weight: 400;
line-height: 21px;
scrollbar-color: rgba(27, 58, 102, 0.5) rgba(27, 58, 102, 0.1);
scrollbar-width: thin;
pointer-events: none;
}
.moov-tabs-card-carousel__body p,
.moov-tabs-card-carousel__body li {
font-family: 'Century Gothic Regular',Helvetica,Arial,Lucida,sans-serif;
font-size: 16px;
line-height: 22px;
pointer-events: none;
}
.moov-tabs-card-carousel__body p {
margin: 0 0 15px;
}
.moov-tabs-card-carousel__body ul,
.moov-tabs-card-carousel__body ol {
margin: 0 0 15px;
padding: 0 0 0 15px;
}
.moov-tabs-card-carousel__body > :last-child {
margin-bottom: 0;
}
.moov-tabs-card-carousel__body::-webkit-scrollbar {
width: 5px;
}
.moov-tabs-card-carousel__body::-webkit-scrollbar-track {
background: rgba(27, 58, 102, 0.1);
}
.moov-tabs-card-carousel__body::-webkit-scrollbar-thumb {
border-radius: 99px;
background: rgba(27, 58, 102, 0.5);
}
.moov-tabs-card-carousel--body-scroll-disabled .moov-tabs-card-carousel__body {
overflow-y: hidden;
overscroll-behavior: auto;
scrollbar-width: none;
}
.moov-tabs-card-carousel--body-scroll-disabled .moov-tabs-card-carousel__body::-webkit-scrollbar {
display: none;
}
.moov-tabs-card-carousel__navigation {
position: absolute;
z-index: 8;
right: 20px;
bottom: 25px;
left: 20px;
display: flex;
height: 45px;
align-items: center;
justify-content: center;
gap: 10px;
}
.moov-tabs-card-carousel__arrow {
display: flex;
width: 45px;
height: 45px;
min-width: 45px;
min-height: 45px;
padding: 0;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.moov-tabs-card-carousel__arrow.prev {
background-image: url(https://develop.fishgate.co.za/moov/wp-content/uploads/2026/06/prev-btn.svg);
}
.moov-tabs-card-carousel__arrow.prev:hover {
background-image: url(https://develop.fishgate.co.za/moov/wp-content/uploads/2026/06/hover-prev-btn.svg);
}
.moov-tabs-card-carousel__arrow.next {
background-image: url(https://develop.fishgate.co.za/moov/wp-content/uploads/2026/06/next-btn.svg);
}
.moov-tabs-card-carousel__arrow.next:hover {
background-image: url(https://develop.fishgate.co.za/moov/wp-content/uploads/2026/06/hover-next-btn.svg);
} .moov-tabs-card-carousel__arrow:hover {
background: rgba(255, 255, 255, 0.12);
}
.moov-tabs-card-carousel__arrow:focus-visible,
.moov-tabs-card-carousel__dot:focus-visible,
.moov-tabs-card-carousel__card:focus-visible {
outline: 3px solid var(--mtc-white);
outline-offset: 3px;
}
.moov-tabs-card-carousel__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.moov-tabs-card-carousel__dot {
width: 9px;
height: 9px;
padding: 0;
border: 1px solid var(--mtc-white);
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.moov-tabs-card-carousel__dot.is-active {
background: var(--mtc-white);
}
.moov-tabs-card-carousel[data-mtc-count="1"] .moov-tabs-card-carousel__navigation {
display: none;
}
@media (max-width: 767px) {
.moov-tabs-card-carousel--with-outer .moov-tabs-card-carousel__shell {
padding: 25px 0 0;
border-radius: 0;
box-shadow: none;
}
.moov-tabs-card-carousel__title {
margin: 0 0 25px;
font-size: 30px;
line-height: 37px;
text-align: center;
}
.moov-tabs-card-carousel--without-outer .moov-tabs-card-carousel__title {
margin-top: 25px;
}
.moov-tabs-card-carousel__inner {
border-radius: 0;
}
.moov-tabs-card-carousel__card {
padding: 25px;
min-width: 290px;
}
}
@media (prefers-reduced-motion: reduce) {
.moov-tabs-card-carousel__card {
transition: opacity 1ms linear;
}
}