:root {
--bro-navy: #141e56;
--bro-navy-2: #191d85;
--bro-ink: #25286f;
--bro-sky: #459bd5;
--bro-blue: #1e96e6;
} .bro-st {
display: flex;
align-items: center;
gap: 22px;
margin: 10px 0 28px;
}
.bro-st__line {
flex: 1 1 auto;
height: 1px;
background: var(--bro-st-line, rgba(255, 255, 255, .55));
}
.bro-st .bro-st__title {
flex: 0 0 auto;
margin: 0;
padding: 0;
color: var(--bro-st-color, #fff);
font-family: Montserrat, sans-serif;
font-size: var(--bro-st-size, 26px);
font-style: italic;
font-weight: 800;
line-height: 1.2;
letter-spacing: .02em;
text-transform: uppercase;
text-shadow: 0 2px 12px rgba(10, 20, 70, .35);
} .bro-xp-grid {
display: grid;
grid-template-columns: repeat(var(--bro-cols, 4), minmax(0, 1fr));
gap: var(--bro-gap, 16px);
align-items: stretch;
margin-bottom: 35px;
}
.bro-xp {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden; border: 1px solid rgba(255, 255, 255, .85);
border-radius: 10px; background: linear-gradient(180deg,
rgb(236, 235, 240) 0%,
rgb(233, 233, 237) 40%,
rgba(212, 215, 223, .94) 70%,
rgba(190, 195, 206, .86) 100%);
box-shadow: 0 0 0 1px rgba(20, 30, 86, .18), 0 3px 8px rgba(10, 20, 70, .18);
font-family: Montserrat, sans-serif;
transition: transform .35s ease, box-shadow .35s ease;
}
.bro-xp:hover {
transform: translateY(-3px);
box-shadow: 0 0 0 1px rgba(20, 30, 86, .22), 0 8px 18px rgba(10, 20, 70, .25);
}
.bro-xp__media {
aspect-ratio: 16 / 11;
overflow: hidden;
background: #dfe6f3;
}
.bro-xp__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.bro-xp:hover .bro-xp__media img {
transform: scale(1.04);
}
.bro-xp__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 18px 18px 22px;
color: var(--bro-xp-text, var(--bro-ink));
}
.bro-xp__head {
display: flex;
align-items: center;
gap: 12px;
min-height: 62px;
margin-bottom: 12px;
}
.bro-xp__icon {
flex: 0 0 auto;
width: 56px;
}
.bro-xp__icon img {
display: block;
width: 100%;
height: auto;
max-height: 56px;
object-fit: contain;
}
.bro-xp .bro-xp__title {
margin: 0;
padding: 0;
color: var(--bro-xp-title, var(--bro-sky));
font-family: Montserrat, sans-serif;
font-size: 19px;
font-style: italic;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
}
.bro-xp .bro-xp__intro {
margin: 0 0 14px;
color: inherit;
font-size: 11.5px;
font-style: italic;
font-weight: 600;
line-height: 1.45;
}
.bro-xp .bro-xp__list {
margin: 0;
padding: 0;
list-style: none;
}
.bro-xp .bro-xp__list li {
position: relative;
margin: 0 0 9px;
padding-left: 16px;
color: inherit;
font-size: 14px;
font-style: italic;
font-weight: 600;
line-height: 1.4;
list-style: none;
}
.bro-xp .bro-xp__list li::before {
content: "";
position: absolute;
top: .55em;
left: 2px;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.bro-xp .bro-xp__link {
align-self: flex-start;
margin-top: auto;
padding-top: 12px;
color: var(--bro-xp-title, var(--bro-sky));
font-size: 13px;
font-style: italic;
font-weight: 700;
text-decoration: none;
}
.bro-xp .bro-xp__link:hover {
text-decoration: underline;
}
@media (max-width: 991px) {
.bro-xp-grid {
grid-template-columns: repeat(min(var(--bro-cols, 4), 2), minmax(0, 1fr));
}
}
@media (max-width: 599px) {
.bro-xp-grid {
grid-template-columns: minmax(0, 1fr);
}
.bro-xp__media {
aspect-ratio: 16 / 9;
}
} .bro-cn-row {
display: grid;
grid-template-columns: repeat(var(--bro-cols, 5), minmax(0, 1fr));
gap: 30px 20px;
padding: 45px 0 40px;
color: var(--bro-cn-color, #fff);
} .vc_column-inner:has(> .wpb_wrapper > .bro-cn-row),
.vc_column-inner:has(> .wpb_wrapper > .bro-logos) {
padding-top: 0 !important;
}
.bro-cn {
color: var(--bro-cn-color, #fff);
font-family: Montserrat, sans-serif;
text-align: center;
}
.bro-cn__value {
display: flex;
justify-content: center;
align-items: baseline;
font-size: clamp(2.2rem, 3.6vw, 3.1rem); font-weight: 800;
line-height: 1;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}
.bro-cn__title {
margin-top: 10px;
font-size: clamp(1.2rem, 2vw, 1.75rem);
font-weight: 800;
line-height: 1.15;
}
.bro-cn__desc {
margin-top: 8px;
font-size: 13px;
font-style: italic;
line-height: 1.4;
opacity: .85;
}
@media (max-width: 991px) {
.bro-cn-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 599px) {
.bro-cn-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 30px 0;
}
.bro-cn:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
} .bro-logos {
max-width: 1400px;
margin: 0 auto;
padding: 30px 20px;
}
.bro-logos__item {
display: flex;
justify-content: center;
align-items: center;
height: calc(var(--bro-logo-h, 70px) + 12px);
padding: 6px;
}
.bro-logos__item a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.bro-logos__item img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: var(--bro-logo-h, 70px);
object-fit: contain;
transition: transform .3s ease, filter .3s ease, opacity .3s ease;
}
.bro-logos__item:hover img {
transform: scale(1.06);
}
.bro-logos--gray .bro-logos__item img {
filter: grayscale(1);
opacity: .7;
}
.bro-logos--gray .bro-logos__item:hover img {
filter: none;
opacity: 1;
}
.bro-logos--grid {
display: grid;
grid-template-columns: repeat(var(--bro-cols, 10), minmax(0, 1fr));
gap: 16px 18px;
}
@media (max-width: 991px) {
.bro-logos--grid {
grid-template-columns: repeat(var(--bro-cols-t, 6), minmax(0, 1fr));
}
}
@media (max-width: 599px) {
.bro-logos--grid {
grid-template-columns: repeat(var(--bro-cols-m, 3), minmax(0, 1fr));
gap: 10px 14px;
}
.bro-logos--grid .bro-logos__item {
height: calc(var(--bro-logo-h, 70px) * .65 + 12px);
}
.bro-logos--grid .bro-logos__item img {
max-height: calc(var(--bro-logo-h, 70px) * .65);
}
}
.bro-logos--marquee {
position: relative;
display: flex;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bro-logos--marquee .bro-logos__track {
display: flex;
flex: 0 0 auto;
animation: bro-marquee var(--bro-speed, 40s) linear infinite;
}
.bro-logos--marquee:hover .bro-logos__track {
animation-play-state: paused;
}
.bro-logos--marquee .bro-logos__item {
flex: 0 0 auto;
width: calc(var(--bro-logo-h, 70px) * 2.2);
margin: 0 14px;
}
@keyframes bro-marquee {
to { transform: translateX(-100%); }
} .bro-logos--marquee.is-js .bro-logos__track {
animation: none;
will-change: transform;
}
.bro-logos--marquee .bro-logos__track {
position: relative;
} .bro-logos--zoom {
padding-top: calc(var(--bro-logo-h, 70px) * (var(--bro-zoom, 1.6) - 1) / 2 + 24px);
padding-bottom: calc(var(--bro-logo-h, 70px) * (var(--bro-zoom, 1.6) - 1) / 2 + 24px);
}
.bro-logos--zoom .bro-logos__item {
margin: 0 calc(var(--bro-logo-h, 70px) * .45);
}
.bro-logos--zoom .bro-logos__item img,
.bro-logos--zoom .bro-logos__item:hover img {
transition: none;
transform-origin: 50% 50%;
will-change: transform;
}
@media (max-width: 599px) {
.bro-logos--marquee .bro-logos__item {
width: calc(var(--bro-logo-h, 70px) * 1.6);
}
.bro-logos--zoom .bro-logos__item {
margin: 0 calc(var(--bro-logo-h, 70px) * .3);
}
}
@media (prefers-reduced-motion: reduce) {
.bro-logos--marquee .bro-logos__track { animation: none; }
.bro-logos--marquee { flex-wrap: wrap; justify-content: center; }
.bro-logos--marquee .bro-logos__track[aria-hidden] { display: none; }
}  .bro-pf-style .portfolio .portfolio-filter.gr-horizontal {
display: flex;
flex-wrap: wrap;
justify-content: center;
float: none !important;
left: auto !important;
transform: none !important;
width: max-content;
max-width: 100%;
margin: 0 auto 30px !important;
overflow: hidden;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(10, 20, 70, .3);
}
.bro-pf-style .portfolio .portfolio-filter div {
margin: 0 !important;
padding: 9px 18px !important;
border-left: 1px solid rgba(255, 255, 255, .35);
background-color: var(--bro-blue) !important;
color: #fff !important;
font-family: Montserrat, sans-serif;
font-size: 14px !important;
font-style: italic;
font-weight: 600;
line-height: 1.3;
transition: background-color .25s ease;
}
.bro-pf-style .portfolio .portfolio-filter div:first-child {
border-left: 0;
}
.bro-pf-style .portfolio .portfolio-filter div:hover {
background-color: #1577c4 !important;
}
.bro-pf-style .portfolio .portfolio-filter .cbp-filter-item-active,
.bro-pf-style .portfolio .portfolio-filter .cbp-filter-item-active:hover {
background-color: var(--bro-navy-2) !important;
} .bro-pf-style .portfolio .cbp-item figure {
overflow: hidden;
border-radius: 14px;
box-shadow: 0 12px 28px rgba(10, 20, 70, .35);
-webkit-mask-image: -webkit-radial-gradient(white, black); }
.bro-pf-style .portfolio .cbp-item figure img {
transition: transform .6s ease;
} .bro-pf-style .portfolio .cbp-item .cbp-item-wrapper,
.bro-pf-style .portfolio .cbp-item .cbp-item-wrapper > a,
.bro-pf-style .portfolio .cbp-item figure {
display: block;
height: 100%;
margin: 0;
}
.bro-pf-style .portfolio .cbp-item figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}.bro-pf-style .portfolio .cbp-item:hover figure img {
transform: scale(1.05);
} .bro-pf-style .portfolio .cbp-item figure figcaption {
padding: 0 !important;
background: transparent !important;
opacity: 1 !important;
}
.bro-pf-style .portfolio .cbp-item figure figcaption .outline .table {
vertical-align: bottom;
}
.bro-pf-style .portfolio .cbp-item figure figcaption h3 {
margin: 0 !important;
padding: 34px 16px 13px !important;
background: linear-gradient(0deg, rgba(10, 14, 40, .88) 0%, rgba(10, 14, 40, .55) 60%, rgba(10, 14, 40, 0) 100%) !important;
color: #fff !important;
font-family: Montserrat, sans-serif;
font-size: 15px !important;
font-style: italic;
font-weight: 600 !important;
line-height: 1.3 !important;
text-align: left;
opacity: 1 !important;
transform: none !important;
}
.bro-pf-style .portfolio .cbp-item figure p {
display: none;
} .bro-pf-style .portfolio .cbp-l-loadMore-button {
margin-top: 50px !important;
margin-bottom: 30px !important;
}
.bro-pf-style .portfolio .cbp-l-loadMore-link {
padding: 0 !important;
border: 0 !important;
background: none !important;
color: #fff !important;
font-family: Montserrat, sans-serif;
font-size: 22px !important;
font-style: italic;
font-weight: 400 !important;
letter-spacing: .02em;
text-transform: none !important;
box-shadow: none !important;
}
.bro-pf-style .portfolio .cbp-l-loadMore-link:hover {
text-decoration: underline;
text-underline-offset: 6px;
}
@media (max-width: 767px) {
.bro-pf-style .portfolio .portfolio-filter.gr-horizontal {
width: 100%;
border-radius: 6px;
}
.bro-pf-style .portfolio .portfolio-filter div {
flex: 1 1 auto;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, .25);
}
} .bro-gallery-justify .portfolio-lightbox.bro-justify {
--bro-row-h: 300px;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-right: 0;
margin-left: 0;
}
.bro-gallery-justify .portfolio-lightbox.bro-justify > figure {
flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * var(--bro-row-h)) !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.bro-gallery-justify .portfolio-lightbox.bro-justify > figure a {
display: block;
}
.bro-gallery-justify .portfolio-lightbox.bro-justify > figure img {
display: block;
width: 100%;
height: auto;
} .bro-gallery-justify .portfolio-lightbox.bro-justify::after {
content: "";
flex: 999 1 0px;
}
@media (max-width: 991px) {
.bro-gallery-justify .portfolio-lightbox.bro-justify { --bro-row-h: 220px; gap: 10px; }
}
@media (max-width: 575px) {
.bro-gallery-justify .portfolio-lightbox.bro-justify { --bro-row-h: 150px; gap: 8px; }
}  .single-portfolio .wrapper {
display: flow-root; overflow: clip;
} .single-portfolio .wrapper > .cont > .portfolio-single {
padding-top: 50px;
}
@media (max-width: 767px) {
.single-portfolio .wrapper > .cont > .portfolio-single {
padding-top: 30px;
}
}
.bro-pfd {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
gap: 50px;
align-items: start;
margin-top: 10px;
} .portfolio-single .col-md-8.offset-md-2:has(> .bro-pfd) {
flex: 0 0 100%;
max-width: 100%;
margin-left: 0;
}
.bro-pfd__text {
text-align: left;
}
.bro-pfd__text > .vc_row:last-child .wpb_content_element:last-child {
margin-bottom: 0;
} .bro-pfd .bro-pfd-row > .vc_column_container {
width: 100%;
}
.bro-pfd__logo {
position: sticky;
top: 60px; } .bro-pfd__logo-box {
display: flex;
justify-content: center;
align-items: center;
height: 220px;
padding: 24px;
border: 1px solid rgba(20, 30, 86, .08);
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 30px rgba(20, 30, 86, .08);
}
.bro-pfd__logo .wpb_single_image,
.bro-pfd__logo .wpb_single_image figure,
.bro-pfd__logo .vc_single_image-wrapper,
.bro-pfd__logo .wpb_single_image a {
display: flex !important;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
} .bro-pfd__logo img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
}
.bro-logo-fit {
position: relative;
display: block;
flex: 0 0 auto;
overflow: hidden;
} .bro-pfd__logo .bro-logo-fit img {
position: absolute;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
}
@media (max-width: 991px) {
.bro-pfd {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.bro-pfd__logo {
position: static;
order: -1; }
.bro-pfd__logo-box {
width: 240px;
max-width: 100%;
height: 170px;
margin: 0 auto;
padding: 18px;
}
} .bro-pr {
display: flex;
gap: var(--bro-pr-gap, 16px);
height: var(--bro-pr-h, 520px);
margin: 10px 0 35px;
}
.bro-pr__card {
position: relative;
flex: 1 1 0;
min-width: 0;
overflow: hidden;
isolation: isolate;
border-radius: 12px;
color: #fff;
background: linear-gradient(160deg, var(--bro-navy-2) 0%, var(--bro-navy) 100%);
box-shadow: 0 10px 30px -12px rgba(20, 30, 86, .45);
outline: none;
transition: flex-grow .6s cubic-bezier(.38, .005, .215, 1), box-shadow .4s ease, transform .4s ease;
}
.bro-pr__card:focus-visible {
box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bro-sky);
}
.bro-pr__img {
position: absolute;
inset: 0;
z-index: -2;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
transform: scale(1.04);
transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
} .bro-pr__shade {
position: absolute;
inset: 0;
z-index: -1;
background: var(--bro-pr-overlay, #141e56);
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .55) 40%, #000 92%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .55) 40%, #000 92%);
opacity: .92;
}
.bro-pr__shade::after {
content: "";
position: absolute;
inset: 0;
background: inherit;
opacity: 0;
transition: opacity .5s ease;
}
.bro-pr__card--plain .bro-pr__shade {
opacity: .35;
}
.bro-pr__letter {
position: absolute;
top: 14px;
left: 24px;
font-family: Montserrat, sans-serif;
font-weight: 900;
font-style: italic;
font-size: clamp(110px, 12vw, 190px);
line-height: .85;
color: transparent;
-webkit-text-stroke: 2px rgba(255, 255, 255, .6);
pointer-events: none;
transform-origin: 0 0;
transition: color .5s ease, -webkit-text-stroke-color .5s ease, transform .6s cubic-bezier(.38, .005, .215, 1);
}
.bro-pr__body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 30px 30px 32px;
}
.bro-pr .bro-pr__title {
margin: 0;
padding: 0;
font-family: Montserrat, sans-serif;
font-size: clamp(24px, 2.3vw, 34px);
font-weight: 900;
font-style: italic;
line-height: 1.1;
letter-spacing: .02em;
text-transform: uppercase;
color: #fff;
}
.bro-pr .bro-pr__title::after {
content: "";
display: block;
width: 38px;
height: 3px;
margin-top: 12px;
border-radius: 2px;
background: var(--bro-sky);
transition: width .5s cubic-bezier(.38, .005, .215, 1);
}
.bro-pr .bro-pr__tagline {
margin: 12px 0 0;
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 600;
font-style: italic;
line-height: 1.35;
color: #fff;
} .bro-pr__more {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .55s cubic-bezier(.38, .005, .215, 1), opacity .3s ease;
}
.bro-pr__more-inner {
min-height: 0;
overflow: hidden;
}
.bro-pr__text {
max-width: 460px;
padding-top: 14px;
}
.bro-pr .bro-pr__text p {
margin: 0 0 10px;
font-size: 15px;
line-height: 1.6;
color: rgba(255, 255, 255, .9);
}
.bro-pr .bro-pr__text p:last-child {
margin-bottom: 0;
}
.bro-pr .bro-pr__link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
font-size: 14px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.bro-pr .bro-pr__link span {
transition: transform .3s ease;
}
.bro-pr .bro-pr__link:hover span {
transform: translateX(5px);
} @media (hover: hover) and (min-width: 768px) {
.bro-pr__card:hover,
.bro-pr__card:focus-within {
flex-grow: var(--bro-pr-grow, 2);
box-shadow: 0 18px 40px -14px rgba(20, 30, 86, .6);
}
.bro-pr__card:hover .bro-pr__img,
.bro-pr__card:focus-within .bro-pr__img {
transform: scale(1.12);
}
.bro-pr__card:hover .bro-pr__shade::after,
.bro-pr__card:focus-within .bro-pr__shade::after {
opacity: .35;
}
.bro-pr__card:hover .bro-pr__letter,
.bro-pr__card:focus-within .bro-pr__letter {
color: var(--bro-sky);
-webkit-text-stroke-color: var(--bro-sky);
transform: scale(.72);
}
.bro-pr__card:hover .bro-pr__title::after,
.bro-pr__card:focus-within .bro-pr__title::after {
width: 70px;
}
.bro-pr__card:hover .bro-pr__more,
.bro-pr__card:focus-within .bro-pr__more {
grid-template-rows: 1fr;
opacity: 1;
transition: grid-template-rows .55s cubic-bezier(.38, .005, .215, 1), opacity .45s ease .2s;
}
.bro-pr:hover .bro-pr__card:not(:hover) .bro-pr__img {
filter: grayscale(.85) brightness(.8);
}
} @media (hover: none), (max-width: 767px) {
.bro-pr {
flex-direction: column;
height: auto;
}
.bro-pr__card {
display: flex;
flex: 0 0 auto; flex-direction: column;
justify-content: flex-end;
min-height: 340px;
}
.bro-pr__body {
position: relative;
padding-top: 120px;
}
.bro-pr__more {
grid-template-rows: 1fr;
opacity: 1;
}
.bro-pr__text {
max-width: none;
}
.bro-pr__letter {
font-size: 120px;
}
.bro-pr__shade {
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .8) 35%, #000 60%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .8) 35%, #000 60%);
}
}
@media (prefers-reduced-motion: reduce) {
.bro-pr__card,
.bro-pr__img,
.bro-pr__letter,
.bro-pr__more {
transition: none !important;
}
}