.career-grid-wrapper .career-filters {
display: flex;
justify-content: flex-start;
margin-bottom: 30px;
gap: 20px;
}
.career-grid-wrapper .career-filters .filter {
display: flex;
align-items: center;
gap: 15px;
position: relative;
}
.career-grid-wrapper .career-filters .filter h4 {
padding: 3px 5px !important;
font-family: 'Century Gothic Regular', Helvetica, Arial, Lucida, sans-serif;
color: #1B3A66 !important;
font-size: 16px;
line-height: 19px;
position: absolute;
top: -13px;
background: white;
left: 15px;
z-index: 9;
}
.career-grid-wrapper .career-filters .filter:hover h4 {
color: #ed1847 !important; 
}
.career-grid-wrapper .career-filters .filter select {
border-radius: 5px;
border-color: #1B3A66;
outline: none !important;
color: #1B3A66;
min-height: 43px;
padding: 4px 18px 0;
font-family: 'Century Gothic Regular', Helvetica, Arial, Lucida, sans-serif;
font-size: 16px;
line-height: 19px;
min-width: 300px;
appearance: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.career-grid-wrapper .career-filters .filter:hover select {
border-color: #ed1847;
box-shadow: 0 3px 6px 0px #00000020;);
}
.career-grid-wrapper .career-filters .filter.location-container select {
min-width: 200px !important;
}
.career-grid-wrapper .career-filters .filter::after {
content: '';
background-image: url(https://staging2.fishgate.co.za/moov-new/wp-content/uploads/2026/06/drop-down-arrow.png);
width: 13px;
height: 11px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
display: block;
pointer-events: none;
position: absolute;
right: 13px;
top: 18px;
} .career-card {
opacity: 0;
transform: translateY(40px);
transition:
opacity 0.6s ease,
transform 0.6s ease,
top 0.25s ease-in-out; will-change: transform, opacity;
position: relative;
top: 0;
}
.career-card:hover {
top: -6px;
border-color: #1B3A66 !important;
background-color: #1B3A66 !important;
}
.career-card.in-view {
opacity: 1;
transform: translateY(0);
}
.career-card h2.career-title {
font-family: 'Century Gothic Regular', Helvetica, Arial, Lucida, sans-serif;
color: #1B3A66;
font-size: 22px;
line-height: 27px;
transition: color 0.2s ease-in-out;
}
.career-card h2.career-title span {
font-family: 'Century Gothic Bold', Helvetica, Arial, Lucida, sans-serif;
color: #ed1847;
transition: all 0.2s ease-in-out;
}
.career-card:hover h2.career-title {
color: white;
}
.career-card:hover h2.career-title span {
color: white;
}
.career-card .additional-info {
display: flex;
gap: 15px;
font-family: 'Century Gothic Regular', Helvetica, Arial, Lucida, sans-serif;
color: #1B3A66;
font-size: 16px;
line-height: 20px;
border-bottom: 1px solid #cbcbcb;
padding-bottom: 15px;
margin-bottom: 13px;
transition: all 0.2s ease-in-out;
}
.career-card:hover .additional-info {
color: white;
border-color: white;
}
.career-card .additional-info div.job-icon,
.career-card .additional-info div.location-icon {
content: '';
display: block;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all 0.2s ease-in-out;
}
.career-card .additional-info div.job-icon {
background-image: url(https://staging2.fishgate.co.za/moov-new/wp-content/uploads/2026/08/mv-job-icon-blue.svg);
min-height: 23px;
min-width: 21px;
}
.career-card:hover .additional-info div.job-icon {
background-image: url(https://staging2.fishgate.co.za/moov-new/wp-content/uploads/2026/08/mv-job-icon-white.svg);
}
.career-card .additional-info div.location-icon {
background-image: url(https://staging2.fishgate.co.za/moov-new/wp-content/uploads/2026/08/mv-location-icon-blue.svg);
min-height: 23px;
min-width: 17.14px;
}
.career-card:hover .additional-info div.location-icon {
background-image: url(https://staging2.fishgate.co.za/moov-new/wp-content/uploads/2026/08/mv-location-icon-white.svg);
}
.career-card .additional-info span {
font-family: 'Century Gothic Bold', Helvetica, Arial, Lucida, sans-serif;
}
.career-card .additional-info div.job-type,
.career-card .additional-info div.location {
display: flex;
align-items: center;
gap: 6px;
}
.career-card .additional-info div.job-type {
border-right: 1px solid #1B3A66;
padding-right: 15px;
transition: all 0.2s ease-in-out;
}
.career-card:hover .additional-info div.job-type {
border-color: white;
}
.career-card .career-excerpt {
font-family: 'Century Gothic Regular', Helvetica, Arial, Lucida, sans-serif;
color: #1B3A66;
font-size: 16px;
line-height: 22px;
border-bottom: 1px solid #cbcbcb;
padding-bottom: 17px;
margin-bottom: 15px;
transition: all 0.2s ease-in-out;
}
.career-card:hover .career-excerpt {
color: white;
border-color: white;
} .career-card .bottom {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-bottom: 3px;
}
.career-card .bottom .closing-date {
font-family: 'Century Gothic Regular', Helvetica, Arial, Lucida, sans-serif;
color: #1B3A66;
font-size: 16px;
line-height: 20px;
transition: all 0.2s ease-in-out;
}
.career-card:hover .bottom .closing-date {
color: white;
}
.career-card .bottom .closing-date span {
font-family: 'Century Gothic Bold', Helvetica, Arial, Lucida, sans-serif;
}
.career-card .bottom a {
background-color: #1B3A66;
background-image: url(https://staging2.fishgate.co.za/moov-new/wp-content/uploads/2026/08/btn_back_white.svg);
background-repeat: no-repeat;
background-position: -150px center;
background-size: 140% !important;
min-height: 45px;
max-height: 45px;
height: 45px;
border-radius: 5px;
padding: 0px 15px;
font-family: 'Century Gothic Bold', Helvetica, Arial, Lucida, sans-serif;
color: white;
font-size: 14px;
line-height: 45px;
display: block;
transition: background-color 0.2s ease-in-out,
border-color 0.2s ease-in-out,
color 0.2s ease-in-out,
background-position 0.35s ease-in-out;
border: none !important;
position: relative;
overflow: hidden;
}
.career-card:hover .bottom a {
background-color: #ed1847;
color: white; }
.career-card .bottom a:hover,
.career-card:hover .bottom a:hover { color: #1B3A66; background-position: 0px center;
} #career-results {
position: relative;
min-height: 150px;
transition: opacity .2s ease;
}
#career-results.loading {
pointer-events: none;
}
#career-results.loading::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,.75);
z-index: 98;
}
#career-results.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 42px;
height: 42px;
margin: -21px 0 0 -21px;
border: 4px solid #d9d9d9;
border-top-color: #ed1847;
border-radius: 50%;
animation: careerSpinner .8s linear infinite;
z-index: 99;
}
@keyframes careerSpinner {
to {
transform: rotate(360deg);
}
} #career-results .career-none {
font-family: 'Century Gothic Regular',Helvetica,Arial,Lucida,sans-serif;
font-size: 25px;
text-align: left;
line-height: 32px;
color: #1B3A66;
padding-top: 25px !important;
}
#career-results .career-none span {
font-family: 'Century Gothic Bold',Helvetica,Arial,Lucida,sans-serif;
}
#career-results .career-none span span {
color: #ed1847;
} @media (max-width: 1298px) and (min-width: 1051px) {
body .career-grid .career-card {
max-width: 48.7% !important;
}
}
@media (max-width: 1050px) {
body .career-grid .career-card {
max-width: 100% !important;
width: 100% !important;
}
}
@media (max-width: 767px) {
body .career-filters {
flex-direction: column !important;
gap: 25px !important;
}
body .career-filters select {
width: 100% !important;
}
body .career-grid {
padding: 0px !important;
}
body .career-card .additional-info {
flex-direction: column !important;
gap: 8px !important;  
}
body .career-card .additional-info .job-type {
border: none !important;
}
body .career-card .bottom {
flex-direction: column !important;
gap: 15px !important;
}
body .career-card .bottom .closing-date {
width: 100% !important;
}
body .career-card .bottom a {
width: 100% !important;
text-align: center !important;
background-image: none !important;
}
body .career-card .bottom a:hover,
body .career-card:hover .bottom a:hover {
background-color: #1B3A66 !important;
}
body .career-card h2.career-title {
padding-bottom: 20px !important;
}
body .career-card .additional-info div.location-icon {
min-width: 21px !important;
}
}