.red-dot-text {
height: 15px;
width: 15px;
background-color: #EC1B33;
border-radius: 50%;
display: inline-block;
margin-left: 10px
}
.title-dot {
font-size: 128px;
color: #EC1B33;
}
.mask {
display: none;
}
@media screen and (min-width: 768px) {
.mask {
position: absolute;
mask-image: url(//pemandu.org/wp-content/uploads/2024/10/circle-mask.svg);
background: #EC1B33;
mask-size: 40px;
mask-repeat: no-repeat;
mask-position: 50%;
height: 100%;
width: 100%;
cursor: crosshair;
display: flex;
}
}
.circle-mask-w-triggers {
display: none;
}
@media screen and (min-width: 768px) {
.circle-mask-w-triggers {
position: absolute;
mask-image: url(//pemandu.org/wp-content/uploads/2024/10/circle-mask.svg);
background: #EC1B33;
mask-size: 300px;
mask-repeat: no-repeat;
mask-position: 50%;
height: 100%;
width: 100%;
cursor: crosshair;
display: flex;
}
}
.medium-title-dot {
color: #EC1B33;
font-size: 60px;
}
.associates-section__image {
position: absolute;
max-height: 100%;
width: auto;
top: 50px;
right: -20%;
transform: translatex(30%);
cursor: pointer;
transition: all 2s ease-in-out;
z-index: 1;
}
.associates-section__image.active {
left: 50%;
transform: translatex(-50%);
transition: all 2s ease-in-out;
}
.associates-section__content {
z-index: 0;
opacity: 1;
transition: opacity 1s ease-in-out 0.3s;
}
.associates-section__content.active {
opacity: 0;
transition: opacity 1s ease-in-out 0s;
}
#brxe-lhpyal,
#brxe-sxiqob {
transition: color 1s ease-in-out;
}
.swap #brxe-lhpyal,
.swap #brxe-sxiqob {
color: #ffffff;
transition: color 1s ease-in-out;
}
.global-reach {
background-color: #EC1B33;
margin: 0 auto;
min-height: 100dvh;
min-width: 100%;
position: relative;
overflow: hidden;
}
.global-react__container {
max-width: 1280px;
padding: 0 50px;
height: 100dvh;
margin: 0 auto;
position: relative;
}
.global-react__text {
max-width: 450px;
}
.stats {
background-color: #00072B;
width: 40%;
height: fit-content;
position: absolute;
right: 0;
bottom: -100%;
}
.red-dot {
background-color: #EC1B33;
border-radius: 50%;
width: 8000px;
height: 8000px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: unset;
z-index: 0;
}
.bfr {
overflow: hidden;
height: 100dvh;
width: 100%;
position: relative;
z-index: -2 !important;
}
.bfr__video-overlay {
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
z-index: -99;
}
.bfr__content {
height: 100%;
display: grid;
place-content: center;
color: white;
z-index: 1;
}
.bfr__heading {
font-weight: bold;
font-size: 100px;
}
.bfr__red-dot-destination {
opacity: 0;
background-color: gray;
width: 30px;
height: 30px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
@media (max-width: 768px) {
.bfr__red-dot-destination {
opacity: 0;
background-color: #ff0000;
width: 15px;
height: 15px;
}
.red-dot {
background-color: #EC1B33;
}
.global-react__container {
height: 100%;
}
}
.hero {
position: absolute;
top: 0;
left: 0;
width: 100dvw;
height: 100dvh;
z-index: 1;
}
.hero__image {
width: 100%;
height: 100%;
}
.country-carousel__image {
object-fit: cover;
object-position: center;
height: 100%;
width: 100%;
}
.methodology-slider .brxe-icon {
opacity: 0 !important;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
}
.methodology-slider .brx-open .brxe-icon {
opacity: 1 !important;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
}
.tab-title .brxe-icon {
opacity: 0;
}
.tab-title.brx-open .brxe-icon {
opacity: 1;
}
.value-card:hover .line {
width: 100% !important;
}
.line {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
}
.blueprint-card {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.blueprint-card:hover .blueprint-card__background {
background-size: 50%;
background-position: center;
}
.post-overview:hover .brxe-button {
display: flex;
transition: transform 0.3s ease;
}
.post-overview:hover .post-overview-image {
transform: scale(1.2);
transition: transform 0.2s ease;
object-fit: cover;
}
.post-overview .post-overview-glass {
opacity: 0;
}
.post-overview:hover .post-overview-glass {
background: radial-gradient(#00000022 30%, #00000044);
box-shadow: 5px 5px 10px #0007, -1px -1px 2px #fff, 1px 1px 2px #555;
backdrop-filter: blur(5px);
opacity: 1;
transition: all 0.15s ease 0.1s;
}
.talent-card {
flex: 1;
overflow: hidden;
transition: all 0.5s ease;
position: relative;
}
.talent-card:hover {
flex: 3;
transform-origin: left;
}
.desc {
opacity: 0;
display: none;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.5s ease;
} .talent-card:hover .desc {
display: block;
opacity: 1;
transform: translateY(0);
@starting-style{
opacity: 0
}
}
.talent-card .talent-content {
transition: visibility 0.5s ease;
}
.apply-button svg {
transition: transform 0.3s ease-in-out;
}
.apply-button:hover svg {
transform: rotate(90deg);
}
.button__reveal { opacity: 0;
transition: opacity .5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s .5s; display: none
}
.button:hover {
background-color: var(--secondary) !important;
transition: background-color .5s cubic-bezier(0.4, 0, 0.2, 1);
}
.button__text {
transition: color .5s cubic-bezier(0.4, 0, 0.2, 1);
}
.button:hover .button__text {
color: var(--white) !important;
}
.button:hover .button__reveal {
height: var(--fit-content);
opacity: 1; transition: opacity .5s cubic-bezier(0.4, 0, 0.2, 1), visibility .5s;
display: flex;
}
.card:hover .front {
display: none;
}
.back {
display: none;
}
.glass:hover {
background: radial-gradient(#fff2 30%, #fff4);
box-shadow: 5px 5px 10px #0007, -1px -1px 2px #fff, 1px 1px 2px #555;
backdrop-filter: blur(40px);
}
.card:hover .glass:hover .back {
display: flex;
}
.capabilities-card__reveal {
display: none;
opacity: 0;
transform: translateY(10px); transition: opacity 1s, transform 1s;
}
.card {
position: relative; overflow: hidden; }
.card .card-glass {
opacity: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
transition: all 0.8s ease-in-out; }
.card .card-image {
transform: scale(1);
transition: transform 0.5s ease-in-out; object-fit: cover;
}
.card .back {
display: none;
opacity: 0; }
.card:hover .back {
display: flex;
opacity: 1;
transition: all 1s ease-in-out; }
.card:hover .card-image {
transform: scale(1.2); }
.card:hover .card-glass {
background: radial-gradient(#fff2 30%, #fff4);
box-shadow: 5px 5px 10px #0007, -1px -1px 2px #fff, 1px 1px 2px #555;
backdrop-filter: blur(30px);
opacity: 1; }
.capabilities-card {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.capabilities-card-reveal {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.capabilities-card:hover .capabilities-card-reveal {
max-height: 100%;
opacity: 1;
transition: max-height 0.8s ease-in 0.1s, opacity 0.8s ease-in 0.1s;
color: var(--white) !important;
}
.capabilities-card-title {
padding-bottom: 0px;
transition: padding-bottom 0.3s ease-in-out;
}
.capabilities-card:hover .capabilities-card-title {
color: var(--white) !important;
padding-bottom: 40px;
transition: padding-bottom 0.5s ease-in-out;
}
.bfr-in-action-cta-section .card--reveal {
display: none;
}
.bfr-in-action-cta-section .card:hover {
background-color: var(--main);
border-color: var(--main) !important;
}
.bfr-in-action-cta-section .card:hover .card__heading {
color: var(--white) !important;
}
.bfr-in-action-cta-section .card:hover .card--reveal {
display: flex;
}
.learn-more-button svg {
transform: rotate(-45deg);
transition: transform 0.5s;
}
.learn-more-button {
transition: transform 0.5s;
}
.learn-more-button:hover {
transform: translateX(20px);
}
.learn-more-button:hover svg {
transform: rotate(-90deg);
} .quick-access-btn {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.quick-access-btn__reveal {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
color: #262625;
}
.quick-access-btn:hover {
color: var(--white) !important;
background-color: var(--secondary) !important;
}
.quick-access-btn:hover .quick-access-btn__reveal {
max-height: 100px;
opacity: 1;
color: var(--white) !important;
transition: max-height 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.quick-access-btn:hover .quick-access-btn__heading {
color: var(--white) !important;
}
//BFR Action
.bfr-action-btn {
display: flex;
flex-direction: col;
justify-content: flex-end;
}
.bfr-action-reveal {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
color: #262625;
}
.bfr-action-btn:hover {
color: var(--white) !important;
background-color: var(--main) !important;
}
.bfr-action-btn:hover .bfr-action-reveal {
max-height: 100px;
opacity: 1;
color: var(--white) !important;
transition: max-height 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.bfr-action-btn:hover .bfr-action-heading {
color: var(--white) !important;
}
.button-lg {
font-size: 24px;
font-weight: 700;
line-height: 1.3;
font-family: "Montserrat", serif;
}
.button-md {
font-size: 20px;
font-weight: 600;
line-height: 1.3;
font-family: "Montserrat", serif;
}
.button-sm {
font-size: 16px;
font-weight: 700;
line-height: 1.3;
font-family: "Montserrat", serif;
} .insight-card {
border-radius: 24px;
cursor: pointer;
padding-bottom: 8px;
transform: scale(1);
transition: box-shadow 0.2s ease-in-out, transform 0.4s ease-in-out;
}
.insight-card:hover {
transform: scale(1.025);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out, box-shadow 0.5s ease-in-out !important;
}
.insight-card-image {
border-bottom-left-radius: 24px !important; 
border-bottom-right-radius: 24px !important; 
transition: all 0.3s ease-in-out !important;
}
.insight-card:hover .insight-card-image {
border-bottom-left-radius: 0px !important; 
border-bottom-right-radius: 0px !important; 
transition: all 0.4s ease-in-out !important;
}
.link-animation:hover .bricks-button{
transform: translatex(10px);
}
.link-animation .bricks-button{
transition: transform .5s;
}
.link-animation:hover.bricks-button{
transform: translatex(10px);
}
.link-animation.bricks-button{
transition: transform .5s;
}
.post-overview-btn__reveal {
max-height: 0;
padding-top: 0px;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding-top 0.8s ease-in-out;
}
.post-overview:hover .post-overview-btn__reveal {
max-height: 100px;
padding-top: 16px;
opacity: 1;
transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding-top 0.4s ease-out;
}
@keyframes rotate45deg {
from {
transform: rotate(0deg) translateX(0);
}
50% {
transform: rotate(45deg) translateX(0);
}
75% {
transform: rotate(45deg) translateX(20px); }
100% {
transform: rotate(45deg) translateX(0); }
}
.rotate-45-deg{
animation-name: rotate45deg;
animation-duration: 2s;
animation-delay: 0.3s;
}
.home-insight-image {
transform: scale(1);
object-fit: cover;
transition: transform 1s ease-out 0.1s;
}
.insights-cta:hover .home-insight-image {
transform: scale(1.2);
transition: transform 0.3s ease-in;
object-fit: cover;
} .home-insight-glass {
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.5886729691876751) 0%, rgba(43,147,224,0) 68%);
transition: all 1s ease-in;
}
.insights-cta:hover .home-insight-glass {
background: radial-gradient(#00000022 30%, #00000044), linear-gradient(0deg, rgba(0,0,0,0.5886729691876751) 0%, rgba(43,147,224,0) 90%);
box-shadow: 5px 5px 10px #0007, -1px -1px 2px #fff, 1px 1px 2px #555;
backdrop-filter: blur(5px);
opacity: 1;
transition: all 0.3s ease-in 0.1s;
}
.capabilities-card {
flex: 1;
overflow: hidden;
transition: all 0.3s ease;
position: relative;
}
.capabilities-card:hover {
flex: 1.5;
transform-origin: left;
transition: all 0.5s ease-in-out;
}
.expertise-glass { background: linear-gradient(180deg, rgba(0, 7, 43, 0.1) 40%, rgba(0, 7, 43, 0.5) 90%);
}
.capabilities-card:hover .expertise-glass {
background: radial-gradient(#00000022 30%, #00000044), linear-gradient(180deg, rgba(0, 7, 43, 0) 10%, #00072B 90%);
box-shadow: 5px 5px 10px #0007, -1px -1px 2px #fff, 1px 1px 2px #555;
backdrop-filter: blur(5px);
opacity: 1;
transition: all 0.3s ease-in-out;
}
.mark-red {
background-color: var(--main);
display:inline-block;
padding: 5px 13px 5px 13px;
color: white;
}
@media screen and (max-width: 768px){
.driving-success-text {
font-size: 40px;
line-height: 1.1;
}
} .find-more,
.find-more__heading,
.find-more__description,
.find-more__cta {
transition: all 0.3s ease-out !important;
}
.find-more:hover {
box-shadow: 10px 10px 16px -7px #EC1B33B2 !important;
}
.find-more:hover .line {
width: 100% !important;
}
.find-more:hover .find-more__heading,
.find-more:hover .find-more__description,
.find-more:hover .find-more__cta {
color: var(--secondary) !important;
}
.slider-section {
height: 70vh;
bottom: 0;
position: relative;
overflow: hidden;
width: 100%;
background-color: #00072B;
}
.wheel {
position: absolute;
top: 40%;
display: flex;
align-items: center;
justify-content: center;
width: 300vw;
height: 300vw;
max-width: 2000px;
max-height: 2000px;
left: 50%;
transform: translateX(-50%);
}
.wheel__card {
background-color: white;
border-radius: 24px;
padding: 20px;
position: absolute;
top: 0;
left: 0;
width: 15%;
aspect-ratio: 1 / 1;
cursor: grab;
}
@media (max-width: 768px) {
.wheel__card {
width: 25%;
}
}
.wheel__card:active {
cursor: grabbing;
} .d-none {
display: none !important;
}
.d-block {
display: block !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
} @media (min-width: 576px) {
.d-sm-none {
display: none !important;
}
.d-sm-block {
display: block !important;
}
.d-sm-inline {
display: inline !important;
}
.d-sm-inline-block {
display: inline-block !important;
}
.d-sm-flex {
display: flex !important;
}
.d-sm-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 768px) {
.d-md-none {
display: none !important;
}
.d-md-block {
display: block !important;
}
.d-md-inline {
display: inline !important;
}
.d-md-inline-block {
display: inline-block !important;
}
.d-md-flex {
display: flex !important;
}
.d-md-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 992px) {
.d-lg-none {
display: none !important;
}
.d-lg-block {
display: block !important;
}
.d-lg-inline {
display: inline !important;
}
.d-lg-inline-block {
display: inline-block !important;
}
.d-lg-flex {
display: flex !important;
}
.d-lg-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1200px) {
.d-xl-none {
display: none !important;
}
.d-xl-block {
display: block !important;
}
.d-xl-inline {
display: inline !important;
}
.d-xl-inline-block {
display: inline-block !important;
}
.d-xl-flex {
display: flex !important;
}
.d-xl-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1400px) {
.d-xxl-none {
display: none !important;
}
.d-xxl-block {
display: block !important;
}
.d-xxl-inline {
display: inline !important;
}
.d-xxl-inline-block {
display: inline-block !important;
}
.d-xxl-flex {
display: flex !important;
}
.d-xxl-inline-flex {
display: inline-flex !important;
}
}
.heading-xl {
font-size: 48px;
font-weight: 700;
line-height: 1.1;
font-family: "Montserrat", serif;
}
.heading-lg {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
font-family: "Montserrat", serif;
}
.heading-md {
font-size: 32px;
font-weight: 700;
line-height: 1.3;
font-family: "Montserrat", serif;
}
.heading-sm {
font-size: 24px;
font-weight: 700;
line-height: 1.3;
font-family: "Montserrat", serif;
}
.heading-xs {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
font-family: "Montserrat", serif;
}
.text-lg {
font-size: 24px;
font-weight: 400;
line-height: 1.3;
font-family: "Gotham", serif;
}
.text-md {
font-size: 20px;
font-weight: 400;
line-height: 1.3;
font-family: "Gotham", serif;
}
.text-sm {
font-size: 16px;
font-weight: 400;
line-height: 1.3;
font-family: "Gotham", serif;
}
.text-xs {
font-size: 14px;
font-weight: 400;
line-height: 1.3;
font-family: "Gotham", serif;
}
.text-xxs {
font-size: 12px;
font-weight: 400;
line-height: 1.3;
font-family: "Gotham", serif;
}
@media only screen and (max-width: 768px) {
.heading-xl {
font-size: 40px;
line-height: 1.3;
}
.heading-lg {
font-size: 32px;
line-height: 1.2;
}
.heading-md {
font-size: 24px;
line-height: 32px;
}
.heading-sm {
font-size: 20px;
line-height: 1.3;
}
.text-lg {
font-size: 20px;
line-height: 1.3;
}
.text-md {
font-size: 16px;
line-height: 1.3;
}
}
.brx-submenu-toggle:hover a{
cursor: default;
}
.custom-post-content{
.wp-block-image, .wp-block-video, figcaption, figure{
margin-bottom: 1.5em;
margin-top: 1.5em;
}
blockquote{
.wp-block-heading{
padding-top: 0.25em;
padding-bottom: 0.25em;
color: #000;
}
}
.wp-block-heading{
padding-top: 1em;
color: var(--main);
}
p,li{
font-size: 18px;
}
p{
padding-top: 1em;
margin-bottom: unset;
}
a{
color: #3858e9;
}
a:hover{
text-decoration: underline;
}
}
.red-bullet-list li::marker{
color: red;
}
.red-bullet-list ul{
padding-left: 25px;
}