.moov-business-services {
--mbs-navy: #1b3a66;
--mbs-navy-dark: #112346;
--mbs-coral: #ed1847;
--mbs-white: #ffffff;
--mbs-divider: rgba(27, 58, 102, 0.2);
--mbs-tab-count: 1;
--mbs-desktop-tab-width: 235px;
--mbs-desktop-tab-auto-width: calc((min(100vw, 1200px) - 24px) / var(--mbs-tab-count));
--mbs-desktop-tab-half-width: calc(var(--mbs-desktop-tab-auto-width) / 2);
--mbs-desktop-tab-height: 184px;
--mbs-desktop-tab-label-height: 40px;
--mbs-desktop-tab-resolved-height: max(var(--mbs-desktop-tab-height), calc(var(--mbs-desktop-tab-label-height) + 124px));
--mbs-desktop-content-height: 526px;
--mbs-desktop-copy-width: 500px;
--mbs-panel-height: var(--mbs-desktop-content-height);
--mbs-content-start-offset: 125px;
--mbs-content-expanded-offset: 51px;
--mbs-desktop-gradient-width: clamp(180px, 15vw, 280px);
width: 100%;
max-width: none;
margin: 0 auto;
color: var(--mbs-navy);
font-family: 'Century Gothic',Helvetica,Arial,Lucida,sans-serif;
}
.moov-business-services *,
.moov-business-services *::before,
.moov-business-services *::after {
box-sizing: border-box;
}
.moov-business-services__mobile-pagination {
display: none;
}
.moov-business-services__tabs {
position: relative;
z-index: 2;
display: flex; width: 90%;
max-width: 1224px;
height: var(--mbs-desktop-tab-resolved-height);
min-height: var(--mbs-desktop-tab-resolved-height);
margin: 0 0 0 50%;
align-items: stretch;
justify-content: center;
justify-content: safe center;
overflow-x: auto;
overflow-y: hidden;
transform: translateX(-50%);
background: var(--mbs-white);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 0 12px;
}
.moov-business-services__tabs::-webkit-scrollbar {
display: none;
} .moov-business-services__tab {
position: relative;
display: flex;
width: auto;
height: var(--mbs-desktop-tab-resolved-height);
min-width: 0;
min-height: var(--mbs-desktop-tab-resolved-height);
padding: 26px 22px 21px;
align-items: center;
justify-content: flex-start;
flex: 1 1 0;
flex-direction: column;
gap: 16px;
border: 0;
border-radius: 12px 12px 0 0;
background: transparent;
color: var(--mbs-navy);
cursor: pointer;
font: inherit;
overflow: visible;
transition: color 180ms ease, background-color 180ms ease;
}
.moov-business-services__tab.is-active {
z-index: 3;
background: var(--mbs-navy);
color: var(--mbs-white);
}
.moov-business-services__tab.is-active::before,
.moov-business-services__tab.is-active::after {
position: absolute;
bottom: 0;
width: 12px;
height: 12px;
content: "";
pointer-events: none;
}
.moov-business-services__tab.is-active::before {
left: -12px;
background: radial-gradient(circle at 0 0, transparent 0 12px, var(--mbs-navy) 13px);
}
.moov-business-services__tab.is-active::after {
right: -12px;
background: radial-gradient(circle at 100% 0, transparent 0 12px, var(--mbs-navy) 13px);
}
.moov-business-services__tab:focus-visible,
.moov-business-services__read-more:focus-visible {
outline: 3px solid var(--mbs-coral);
outline-offset: -4px;
}
.moov-business-services__icon {
display: flex;
width: 68px;
height: 57px;
align-items: center;
justify-content: center;
flex: 0 0 57px;
}
.moov-business-services__icon img {
display: block;
width: 68px;
height: 57px;
object-fit: contain;
}
.moov-business-services__tab.is-active .moov-business-services__icon img {
filter: brightness(0) invert(1);
}
.moov-business-services__tab-label {
position: relative;
display: flex;
width: 100%;
height: var(--mbs-desktop-tab-label-height);
max-width: 190px;
align-items: center;
justify-content: center;
flex: 0 0 var(--mbs-desktop-tab-label-height);
font-family: 'Century Gothic Bold',Helvetica,Arial,Lucida,sans-serif;
font-size: 18px;
line-height: 20px;
text-align: center;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
}
.moov-business-services__tab:not(.is-active):not(:last-child) .moov-business-services__tab-label--desktop::after {
position: absolute;
top: 0;
right: calc(50% - var(--mbs-desktop-tab-half-width));
bottom: 0;
width: 1px;
background: var(--mbs-divider);
content: "";
}
.moov-business-services__tab:has(+ .is-active) .moov-business-services__tab-label--desktop::after {
display: none;
}
.moov-business-services__tab-label--mobile {
display: none;
}
.moov-business-services__panels {
position: relative;
z-index: 1;
width:100%;
max-width: 2560;
margin-left: 50%;
transform: translateX(-50%);
background: var(--mbs-navy);
}
.moov-business-services__panel {
position: relative;
isolation: isolate;
height: var(--mbs-panel-height);
min-height: var(--mbs-panel-height);
overflow: hidden;
background-color: var(--mbs-navy);
background-image: url(//moovenergy.co.za/wp-content/plugins/business-services/assets/images/services-tab-background.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: var(--mbs-white);
}
.moov-business-services__panel[hidden] {
display: none;
}
.moov-business-services__media {
position: absolute;
z-index: 0;
inset: 0 0 0 43%;
}
@media (min-width: 1190px) {
.moov-business-services__media { inset: 0;
right: auto;
left: calc(50% - 150px);
}
} .moov-business-services__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.moov-business-services__media picture,
.moov-business-services__icon picture {
display: block;
width: 100%;
height: 100%;
}
.moov-business-services__content {
position: relative;
z-index: 2;
display: flex;
width: min(46%, calc(var(--mbs-desktop-copy-width) + 24px));
height: 100%;
margin-left: max(12px, calc(50% - 599px));
padding: var(--mbs-content-start-offset) 24px 50px 0;
flex-direction: column;
transition: padding-top 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.moov-business-services__panel.is-expanded .moov-business-services__content {
padding-top: var(--mbs-content-expanded-offset);
}
.moov-business-services__heading {
margin: 0 0 15px;
color: var(--mbs-white);
font-size: 25px;
font-weight: 400;
line-height: 31px;
transition: margin-bottom 360ms ease;
}
.moov-business-services__panel.is-expanded .moov-business-services__heading {
margin-bottom: 0;
}
.moov-business-services__heading span,
.moov-business-services__heading strong {
display: inline;
}
.moov-business-services__heading strong {
font-weight: 700;
}
.moov-business-services__heading span + strong::before {
content: " ";
}
.moov-business-services__rule {
width: 100%;
height: 0;
margin: 0;
background: rgba(255, 255, 255, 0.2);
opacity: 0;
transform: scaleX(0.96);
transform-origin: left center;
transition: height 220ms ease, margin 360ms ease, opacity 260ms ease, transform 360ms ease;
}
.moov-business-services__panel.is-expanded .moov-business-services__rule {
height: 1px;
opacity: 1;
transform: scaleX(1);
}
.moov-business-services__panel.is-expanded .moov-business-services__rule--top {
margin: 20px 0 15px;
}
.moov-business-services__panel.is-expanded .moov-business-services__rule--bottom {
margin: 17px 0 0;
}
.moov-business-services__copy {
height: auto;
padding-right: 12px;
overflow: hidden;
color: var(--mbs-white);
font-family: 'Century Gothic Regular',Helvetica,Arial,Lucida,sans-serif;
font-size: 16px;
line-height: 22px;
scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0);
scrollbar-width: thin;
}
.moov-business-services__copy.is-expanded {
height: 300px;
overflow-y: auto;
overscroll-behavior: contain;
}
.moov-business-services__copy p {
margin: 0 0 16px;
font-family: 'Century Gothic Regular',Helvetica,Arial,Lucida,sans-serif;
font-size: 16px;
line-height: 22px;
}
.moov-business-services__summary p:last-child,
.moov-business-services__copy > div > :last-child {
margin-bottom: 0;
}
.moov-business-services__copy::-webkit-scrollbar {
width: 6px;
}
.moov-business-services__copy::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0);
}
.moov-business-services__copy::-webkit-scrollbar-thumb {
border-radius: 99px;
background: rgba(255, 255, 255, 0.58);
}
.moov-business-services__read-more {
align-self: flex-start;
margin-top: 12px;
padding: 0 0 3px;
border: 0;
border-bottom: 1px solid currentColor;
background: transparent;
color: var(--mbs-white);
cursor: pointer;
font: inherit;
font-size: 16px;
font-family: 'Century Gothic Regular',Helvetica,Arial,Lucida,sans-serif;
line-height: 22px;
}
.moov-business-services__read-more:hover {
color: var(--mbs-coral);
}
.moov-business-services__empty {
padding: 1rem;
border-left: 4px solid #ed1847;
background: #f6f7f7;
}
@media (max-width: 1024px) and (min-width: 768px) {
.moov-business-services__content {
width: 53%;
padding-right: 22px;
}
.moov-business-services__media {
left: 44%;
}
} @media (max-width: 1189px) and (min-width: 768px) {
.moov-business-services--tablet-carousel .moov-business-services__mobile-pagination {
display: flex;
min-height: 54px;
padding: 23px 20px 15px;
align-items: center;
justify-content: center;
gap: 5px;
background: var(--mbs-white);
}
.moov-business-services--tablet-carousel .moov-business-services__dot {
width: 10px;
height: 10px;
padding: 0;
border: 1px solid var(--mbs-navy);
border-radius: 50%;
background: var(--mbs-white);
cursor: pointer;
}
.moov-business-services--tablet-carousel .moov-business-services__dot.is-active {
border-color: var(--mbs-coral);
background: var(--mbs-coral);
}
.moov-business-services--tablet-carousel .moov-business-services__dot:focus-visible {
outline: 2px solid var(--mbs-coral);
outline-offset: 2px;
}
.moov-business-services--tablet-carousel .moov-business-services__tabs {
display: flex;
max-width: none;
height: auto;
min-height: var(--mbs-desktop-tab-height);
padding: 0 24px;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
gap: 10px;
scroll-snap-type: x mandatory;
scroll-padding-inline: 24px;
}
.moov-business-services--tablet-carousel .moov-business-services__tab {
width: var(--mbs-desktop-tab-width);
height: var(--mbs-desktop-tab-height);
min-width: var(--mbs-desktop-tab-width);
min-height: var(--mbs-desktop-tab-height);
padding: 26px 22px 21px; border-radius: 12px;
flex: 1 0 var(--mbs-desktop-tab-width);
gap: 16px;
scroll-snap-align: start;
}
.moov-business-services--tablet-carousel .moov-business-services__tab.is-active {
border-color: transparent;
border-bottom: 0;
border-radius: 12px 12px 0 0;
}
.moov-business-services--tablet-carousel .moov-business-services__tab-label::after, 
.moov-business-services--tablet-carousel .moov-business-services__tabs::before,
.moov-business-services--tablet-carousel .moov-business-services__tabs::after {
display: none;
}
.moov-business-services--tablet-carousel .moov-business-services__tab.is-active::before,
.moov-business-services--tablet-carousel .moov-business-services__tab.is-active::after {
display: block;
}
.moov-business-services__tab:not(.is-active):not(:last-child)::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background: var(--mbs-divider);
content: "";
height: 40%;
margin: auto;
}
.moov-business-services__tab:has(+ .is-active)::after {
display: none;
}
.moov-business-services--tablet-carousel .moov-business-services__icon {
width: 68px;
height: 57px;
flex-basis: 57px;
}
.moov-business-services--tablet-carousel .moov-business-services__icon img {
width: 68px;
height: 57px;
}
.moov-business-services--tablet-carousel .moov-business-services__tab-label {
display: block;
height: auto;
max-width: 190px;
flex-basis: auto;
font-size: 18px;
font-weight: 700;
line-height: 20px;
}
.moov-business-services--tablet-carousel .moov-business-services__tab-label--desktop {
display: block;
}
.moov-business-services--tablet-carousel .moov-business-services__tab-label--mobile {
display: none;
}
}
@media (max-width: 767px) {
.moov-business-services {
--mbs-panel-height: auto;
}
.moov-business-services__mobile-pagination {
display: flex;
min-height: 54px;
padding: 23px 20px 15px;
align-items: center;
justify-content: center;
gap: 5px;
background: var(--mbs-white);
}
.moov-business-services__dot {
width: 10px;
height: 10px;
padding: 0;
border: 1px solid var(--mbs-navy);
border-radius: 50%;
background: var(--mbs-white);
cursor: pointer;
}
.moov-business-services__dot.is-active {
border-color: var(--mbs-coral);
background: var(--mbs-coral);
}
.moov-business-services__dot:focus-visible {
outline: 2px solid var(--mbs-coral);
outline-offset: 2px;
}
.moov-business-services__tabs {
display: flex;
max-width: none;
width: 100% !important;
height: auto;
min-height: 135px;
padding: 0 24px;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
gap: 10px;
scroll-snap-type: x mandatory;
scroll-padding-inline: 24px;
}
.moov-business-services__tab {
width: 120px;
height: auto;
min-width: 120px;
min-height: 135px;
padding: 18px 10px 16px;
border: 0;
border-radius: 10px 10px 0 0;
flex-basis: 120px;
gap: 9px;
scroll-snap-align: start;
}
.moov-business-services__tab-label::after {
display: none;
}
.moov-business-services__tab:not(.is-active):not(:last-child)::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background: var(--mbs-divider);
content: "";
height: 40%;
margin: auto;
}
.moov-business-services__tab:has(+ .is-active)::after {
display: none;
}
.moov-business-services__tab.is-active::before,
.moov-business-services__tab.is-active::after {
display: block;
width: 16px;
height: 16px;
}
.moov-business-services__tab.is-active::before {
left: -16px;
background: radial-gradient(circle at 0 0, transparent 0 16px, var(--mbs-navy) 17px);
}
.moov-business-services__tab.is-active::after {
right: -16px;
background: radial-gradient(circle at 100% 0, transparent 0 16px, var(--mbs-navy) 17px);
}
.moov-business-services__tabs::before,
.moov-business-services__tabs::after {
display: none;
}
.moov-business-services__icon {
width: 60px;
height: 50px;
flex-basis: 50px;
}
.moov-business-services__icon img {
width: 60px;
height: 50px;
}
.moov-business-services__tab-label {
display: block;
height: auto;
max-width: 100px;
flex-basis: auto;
font-size: 15px;
font-weight: 700;
line-height: 18px;
}
.moov-business-services__tab-label--desktop {
display: none;
}
.moov-business-services__tab-label--mobile {
display: block;
}
.moov-business-services__panel {
display: flex;
height: auto;
min-height: 0;
flex-direction: column;
background-color: #1b3a66;
background-image: none;
}
.moov-business-services__media {
position: relative;
z-index: 0;
inset: auto;
order: 1;
height: 388px;
min-height: 388px;
}
.moov-business-services__media::after {
inset: 0;
width: auto;
background: linear-gradient(180deg, rgba(27, 58, 102, 0.45) 0%, rgba(27, 58, 102, 0.04) 42%, rgba(27, 58, 102, 0) 100%);
}
.moov-business-services__content,
.moov-business-services__panel.is-expanded .moov-business-services__content {
width: 100%;
height: auto;
min-height: 0;
margin-left: 0;
padding: 30px 25px;
order: 0;
transition: none;
}
.moov-business-services__heading {
font-size: 25px;
line-height: 31px;
}
.moov-business-services__copy.is-expanded {
height: auto;
max-height: 248px;
}
.moov-business-services__media img {
object-position: center !important;
}
}
@media (prefers-reduced-motion: reduce) {
.moov-business-services__tab,
.moov-business-services__content,
.moov-business-services__heading,
.moov-business-services__rule {
transition: none;
}
}