@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
*:not(#wpadminbar):not(#wpadminbar *) {
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body, header {
background-color: #EFEEEC !important;
}
.page-id-20 .aboutPageImage {
padding-bottom: 0px !important;
}
.hideThis {
display: none !important;
}
#field_1_9 {
display: none !important;
}
.page-id-509 .sidebarCaseStudies {
padding-top: 0px !important;
}
h1, h2, h3, h4, h5 {
color: #262626;
font-weight: 400;
}
em {
font-family: "latienne-pro", sans-serif !important;
font-weight: 400 !important;
font-style: italic;
}
:root :where(.is-layout-constrained) > *, main {
margin-top: 0px !important;
}
.wp-site-blocks > * {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
.is-layout-constrained > [class^=lazyblock-] {
margin-block-start: 0 !important;
margin-top: 0 !important;
}
ul li {
text-align: left;
}
.classButton,
.wp-block-button__link,
.wp-element-button,
button[type=submit],
input[type=submit],
.btn,
.button {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 15px 20px;
background: #262626;
color: #EFEEEC;
border: 2px solid #262626;
border-radius: 5px;
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 1rem;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
overflow: visible;
box-sizing: border-box;
}
@media only screen and (max-width: 850px) {
.classButton,
.wp-block-button__link,
.wp-element-button,
button[type=submit],
input[type=submit],
.btn,
.button {
padding: 12px 24px;
font-size: 0.95rem;
gap: 6px;
}
}
.classButton::after,
.wp-block-button__link::after,
.wp-element-button::after,
button[type=submit]::after,
input[type=submit]::after,
.btn::after,
.button::after {
content: "";
display: block;
width: 16px;
height: 16px;
background-image: url(//stephenbrowning.com/wp-content/uploads/2025/09/Group-24-1.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-left: 0.5rem;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: center;
flex-shrink: 0;
}
@media only screen and (max-width: 850px) {
.classButton::after,
.wp-block-button__link::after,
.wp-element-button::after,
button[type=submit]::after,
input[type=submit]::after,
.btn::after,
.button::after {
width: 14px;
height: 14px;
margin-left: 4px;
}
}
.classButton:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
button[type=submit]:hover,
input[type=submit]:hover,
.btn:hover,
.button:hover {
background: transparent;
border-color: #262626;
color: #262626;
transform: translateY(-2px);
}
.classButton:hover::after,
.wp-block-button__link:hover::after,
.wp-element-button:hover::after,
button[type=submit]:hover::after,
input[type=submit]:hover::after,
.btn:hover::after,
.button:hover::after {
filter: invert(1);
transform: translateX(4px);
}
.classButton:active,
.wp-block-button__link:active,
.wp-element-button:active,
button[type=submit]:active,
input[type=submit]:active,
.btn:active,
.button:active {
transform: translateY(-1px);
}
.classButton.greyBG,
.wp-block-button__link.greyBG,
.wp-element-button.greyBG,
button[type=submit].greyBG,
input[type=submit].greyBG,
.btn.greyBG,
.button.greyBG {
background: rgba(167, 178, 168, 0.48);
color: #262626;
border-color: rgba(167, 178, 168, 0.48);
border: none;
}
.classButton.greyBG::after,
.wp-block-button__link.greyBG::after,
.wp-element-button.greyBG::after,
button[type=submit].greyBG::after,
input[type=submit].greyBG::after,
.btn.greyBG::after,
.button.greyBG::after {
filter: invert(1);
}
.classButton.greyBG:hover,
.wp-block-button__link.greyBG:hover,
.wp-element-button.greyBG:hover,
button[type=submit].greyBG:hover,
input[type=submit].greyBG:hover,
.btn.greyBG:hover,
.button.greyBG:hover {
background: #262626;
border-color: #262626;
color: #EFEEEC;
}
.classButton.greyBG:hover::after,
.wp-block-button__link.greyBG:hover::after,
.wp-element-button.greyBG:hover::after,
button[type=submit].greyBG:hover::after,
input[type=submit].greyBG:hover::after,
.btn.greyBG:hover::after,
.button.greyBG:hover::after {
filter: invert(0);
}
.accordionTooltipButton {
background: #F3BF82;
border-color: #F3BF82;
color: #262626;
}
.accordionTooltipButton:hover {
background: transparent;
border-color: #F3BF82;
color: #F3BF82;
}
.wp-block-button {
margin: 0;
}
.wp-block-button .wp-block-button__link {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 15px 30px;
background: #262626;
color: #EFEEEC;
text-decoration: none;
border-radius: 5px;
font-weight: 400;
font-size: 1rem;
font-family: "Inter", sans-serif;
border: 2px solid #262626;
cursor: pointer;
transition: all 0.3s ease;
overflow: visible;
box-sizing: border-box;
}
@media only screen and (max-width: 850px) {
.wp-block-button .wp-block-button__link {
padding: 12px 24px;
font-size: 0.95rem;
gap: 6px;
}
}
.wp-block-button .wp-block-button__link::after {
content: "";
display: block;
width: 16px;
height: 16px;
background-image: url(//stephenbrowning.com/wp-content/uploads/2025/09/Group-24-1.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-left: 0.5rem;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: center;
flex-shrink: 0;
}
@media only screen and (max-width: 850px) {
.wp-block-button .wp-block-button__link::after {
width: 14px;
height: 14px;
margin-left: 4px;
}
}
.wp-block-button .wp-block-button__link:hover {
background: transparent;
border: 2px solid #262626;
color: #262626;
transform: translateY(-2px);
}
.wp-block-button .wp-block-button__link:hover::after {
filter: invert(1);
transform: translateX(4px);
}
.wp-block-button .wp-block-button__link:active {
transform: translateY(-1px);
}
.wp-block-button .wp-block-button__link.has-background {
background: #262626;
border: 2px solid #262626;
}
.wp-block-button .wp-block-button__link.has-background:hover {
background: transparent;
border: 2px solid #262626;
color: #262626;
}
.wp-block-button.is-style-outline .wp-block-button__link {
background: transparent;
border: 2px solid #262626;
color: #262626;
}
.wp-block-button.is-style-outline .wp-block-button__link::after {
filter: invert(1);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: #262626;
border-color: #262626;
color: #EFEEEC;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover::after {
filter: invert(0);
}
.wp-block-buttons .wp-block-button {
margin: 0;
}
.wp-block-buttons .wp-block-button * {
box-sizing: border-box;
}
@keyframes svgBreathe {
0%, 100% {
transform: scale(1) translateY(0);
filter: drop-shadow(0 2px 8px rgba(232, 128, 6, 0.15));
}
50% {
transform: scale(1.02) translateY(-2px);
filter: drop-shadow(0 4px 12px rgba(232, 128, 6, 0.25));
}
}
@keyframes svgFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
@keyframes subtleGlow {
0%, 100% {
filter: drop-shadow(0 2px 8px rgba(232, 128, 6, 0.15));
}
50% {
filter: drop-shadow(0 0 15px rgba(232, 128, 6, 0.3));
}
}
@keyframes spiralVortex {
0% {
transform: rotate(0deg) scale(1);
}
20% {
transform: rotate(72deg) scale(1.3);
}
40% {
transform: rotate(144deg) scale(0.7);
}
60% {
transform: rotate(216deg) scale(1.2);
}
80% {
transform: rotate(288deg) scale(0.9);
}
100% {
transform: rotate(360deg) scale(1);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes infiniteScrollSimple {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes infiniteScrollSlider {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes slideInMenu {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInSequence {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-2px);
}
20%, 40%, 60%, 80% {
transform: translateX(2px);
}
}
@keyframes drawPath {
to {
stroke-dashoffset: 0;
}
}
@keyframes drawCircle {
to {
stroke-dashoffset: 0;
}
}
@keyframes drawCheck {
to {
stroke-dashoffset: 0;
}
}
@keyframes drawSuccessArrow {
to {
stroke-dashoffset: 0;
}
}
@keyframes compassPulse {
0%, 100% {
stroke-width: 2;
opacity: 1;
}
50% {
stroke-width: 3;
opacity: 0.7;
}
}
@keyframes compassSpin {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes floatQuestion {
0%, 100% {
transform: translateY(0px);
opacity: 0.6;
}
50% {
transform: translateY(-10px);
opacity: 1;
}
}
@keyframes flyPlane {
0% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(20px, -10px) rotate(5deg);
}
50% {
transform: translate(40px, 0px) rotate(0deg);
}
75% {
transform: translate(20px, 10px) rotate(-5deg);
}
100% {
transform: translate(0, 0) rotate(0deg);
}
}
@keyframes checkmarkAnimation {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.animate-on-scroll,
.animate-fade-in,
.animate-slide-up,
.animate-slide-left,
.animate-slide-right,
.animate-scale-in {
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-in {
opacity: 1;
transform: none;
}
.animate-slide-up {
transform: translateY(30px);
}
.animate-slide-left {
transform: translateX(30px);
}
.animate-slide-right {
transform: translateX(-30px);
}
.animate-scale-in {
transform: scale(0.9);
}
.animate-stagger-container .animate-stagger-child {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.animate-stagger-container .animate-stagger-child.animate-in {
opacity: 1;
transform: translateY(0);
}
.wp-block-lazyblock-main-navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10000000 !important;
background: #EFEEEC;
transition: transform 0.3s ease-in-out;
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.2392156863);
}
.wp-block-lazyblock-main-navigation.navigation-hidden {
transform: translateY(-100%);
}
body.admin-bar .wp-block-lazyblock-main-navigation {
top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar .wp-block-lazyblock-main-navigation {
top: 46px;
}
}
@media screen and (max-width: 600px) {
body.admin-bar .wp-block-lazyblock-main-navigation {
top: 0;
}
}
.hideDesk {
display: none;
}
@media (max-width: 1024px) {
.hideDesk {
display: block;
}
}
.mainNavigation {
position: relative;
z-index: 1000;
background: #EFEEEC;
padding-top: 8px;
padding-bottom: 8px;
}
.mainNavigation .navContainer {
max-width: 1450px;
margin: 0 auto;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
position: relative;
}
@media (max-width: 1200px) {
.mainNavigation .navContainer {
padding: 0 30px;
}
}
@media (max-width: 1024px) {
.mainNavigation .navContainer {
height: 60px;
padding: 0 20px;
}
}
.mainNavigation .navContainer .logoContainer {
flex-shrink: 0;
z-index: 2;
}
.mainNavigation .navContainer .logoContainer .logoLink {
display: block;
transition: opacity 0.3s ease;
}
.mainNavigation .navContainer .logoContainer .logoLink:hover {
opacity: 0.7;
}
.mainNavigation .navContainer .logoContainer .logoLink img {
height: 54px;
width: auto;
display: block;
}
@media (max-width: 1078px) {
.mainNavigation .navContainer .logoContainer .logoLink img {
height: 42px;
}
}
@media (max-width: 346px) {
.mainNavigation .navContainer .logoContainer .logoLink img {
height: 36px;
}
}
.mainNavigation .navContainer .desktopMenu {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 50px;
}
@media (max-width: 1024px) {
.mainNavigation .navContainer .desktopMenu {
display: none;
}
}
.mainNavigation .navContainer .desktopMenu .menuItems {
display: flex;
gap: 40px;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
}
.mainNavigation .navContainer .desktopMenu .menuItems li {
position: relative;
}
.mainNavigation .navContainer .desktopMenu .menuItems li a.menuLink {
text-decoration: none;
color: rgba(0, 0, 0, 0.6);
display: block;
padding: 8px 0;
font-size: 14px;
font-family: "Inter", sans-serif;
font-weight: 400;
letter-spacing: 0.01em;
transition: color 0.3s ease;
position: relative;
}
.mainNavigation .navContainer .desktopMenu .menuItems li a.menuLink::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: #E88006;
transition: width 0.3s ease;
}
.mainNavigation .navContainer .desktopMenu .menuItems li a.menuLink:hover {
color: #E88006;
}
.mainNavigation .navContainer .desktopMenu .menuItems li a.menuLink:hover::before {
width: 100%;
}
.mainNavigation .navContainer .desktopMenu .menuItems li a.menuLink[aria-current=page] {
color: #262626;
font-weight: 500;
}
.mainNavigation .navContainer .desktopMenu .menuItems li a.menuLink[aria-current=page]::before {
width: 100%;
background: #E88006;
}
.mainNavigation .navContainer .desktopMenu .menuItems li.hasDropdown > a.menuLink {
padding-right: 12px;
}
.mainNavigation .navContainer .desktopMenu .menuItems li.hasDropdown > a.menuLink::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-50%) rotate(45deg);
transition: transform 0.3s ease;
opacity: 0.5;
}
.mainNavigation .navContainer .desktopMenu .menuItems li.hasDropdown > a.menuLink:hover::after {
transform: translateY(-50%) rotate(45deg);
opacity: 1;
}
.mainNavigation .navContainer .desktopMenu .menuItems li.hasDropdown:hover > .subMenuItems {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.mainNavigation .navContainer .desktopMenu .menuItems li.hasSubDropdown > a.menuLink {
padding-right: 18px;
}
.mainNavigation .navContainer .desktopMenu .menuItems li.hasSubDropdown > a.menuLink::after {
content: "";
position: absolute;
right: 8px;
top: 50%;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-50%) rotate(-45deg);
transition: transform 0.3s ease;
opacity: 0.5;
}
.mainNavigation .navContainer .desktopMenu .menuItems li.hasSubDropdown > a.menuLink:hover::after {
transform: translateY(-50%) rotate(-45deg) translateX(2px);
opacity: 1;
}
.mainNavigation .navContainer .desktopMenu .subMenuItems {
position: absolute;
top: 100%;
left: -16px;
background: #EFEEEC;
min-width: 200px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border-radius: 12px;
padding: 8px;
margin-top: 0;
z-index: 100;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
pointer-events: none;
}
.mainNavigation .navContainer .desktopMenu .subMenuItems li {
position: relative;
padding-bottom: 0;
}
.mainNavigation .navContainer .desktopMenu .subMenuItems li a.menuLink {
display: block;
padding: 10px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.7);
transition: all 0.2s ease;
}
.mainNavigation .navContainer .desktopMenu .subMenuItems li a.menuLink::before {
display: none;
}
.mainNavigation .navContainer .desktopMenu .subMenuItems li a.menuLink:hover {
background: rgba(232, 128, 6, 0.08);
color: #E88006;
transform: translateX(2px);
}
.mainNavigation .navContainer .desktopMenu .subMenuItems li a.menuLink[aria-current=page] {
color: #E88006;
font-weight: 500;
background: rgba(232, 128, 6, 0.08);
}
.mainNavigation .navContainer .desktopMenu .subSubMenuItems {
position: absolute;
top: 0;
left: calc(100% + 8px);
background: #EFEEEC;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border-radius: 12px;
min-width: 180px;
opacity: 0;
visibility: hidden;
transform: translateX(-10px);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
list-style: none;
margin: 0;
padding: 8px;
}
.mainNavigation .navContainer .desktopMenu .subSubMenuItems li a.menuLink {
padding: 10px 16px;
font-size: 13px;
}
.mainNavigation .navContainer .desktopMenu .subSubMenuItems li a.menuLink:hover {
background: rgba(232, 128, 6, 0.08);
color: #E88006;
}
.mainNavigation .navContainer .desktopMenu .classButton {
font-size: 13px;
padding: 10px 20px;
letter-spacing: 0.01em;
}
.mainNavigation .navContainer .mobile-menu-trigger {
display: none;
background: none;
border: none;
padding: 8px;
cursor: pointer;
z-index: 1002;
position: relative;
width: 40px;
height: 40px;
}
@media (max-width: 1024px) {
.mainNavigation .navContainer .mobile-menu-trigger {
display: flex;
align-items: center;
justify-content: center;
}
}
.mainNavigation .navContainer .mobile-menu-trigger .hamburger {
position: relative;
width: 24px;
height: 2px;
background: #262626;
transition: background 0.3s ease;
}
.mainNavigation .navContainer .mobile-menu-trigger .hamburger::before, .mainNavigation .navContainer .mobile-menu-trigger .hamburger::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background: #262626;
left: 0;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.mainNavigation .navContainer .mobile-menu-trigger .hamburger::before {
top: -7px;
}
.mainNavigation .navContainer .mobile-menu-trigger .hamburger::after {
bottom: -7px;
}
.mainNavigation .navContainer .mobile-menu-trigger.is-active .hamburger {
background: transparent;
}
.mainNavigation .navContainer .mobile-menu-trigger.is-active .hamburger::before {
top: 0;
transform: rotate(45deg);
}
.mainNavigation .navContainer .mobile-menu-trigger.is-active .hamburger::after {
bottom: 0;
transform: rotate(-45deg);
}
.mainNavigation .navContainer .mobile-menu-trigger:hover:not(.is-active) .hamburger::before {
width: 18px;
}
.mainNavigation .navContainer .mobile-menu-trigger:hover:not(.is-active) .hamburger::after {
width: 20px;
}
.page-id-22 .mainNavigation {
background: #262626;
}
.page-id-22 .mainNavigation .navContainer .desktopMenu .menuItems > li > a.menuLink {
color: #A8A8A8;
}
.page-id-22 .mainNavigation .navContainer .desktopMenu .menuItems > li > a.menuLink:hover {
color: #E88006;
}
.page-id-22 .mainNavigation .navContainer .desktopMenu .menuItems > li > a.menuLink[aria-current=page] {
color: #EFEEEC;
}
.page-id-22 .mainNavigation .navContainer .desktopMenu .classButton {
background: #A7B2A8 !important;
color: #262626 !important;
border: 2px solid #A7B2A8 !important;
}
.page-id-22 .mainNavigation .navContainer .desktopMenu .classButton::after {
filter: brightness(0);
}
.page-id-22 .mainNavigation .navContainer .desktopMenu .classButton:hover {
background: transparent !important;
border: 2px solid #A7B2A8 !important;
color: #A7B2A8 !important;
}
.page-id-22 .mainNavigation .navContainer .desktopMenu .classButton:hover::after {
filter: brightness(0) invert(1);
}
.page-id-22 .mainNavigation .navContainer .mobile-menu-trigger .hamburger {
background: #EFEEEC;
}
.page-id-22 .mainNavigation .navContainer .mobile-menu-trigger .hamburger::before, .page-id-22 .mainNavigation .navContainer .mobile-menu-trigger .hamburger::after {
background: #EFEEEC;
}
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mobile-menu-overlay.is-open {
opacity: 1;
visibility: visible;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
}
.mobile-menu-container {
position: fixed;
top: 0;
right: 0;
width: 85%;
max-width: 380px;
height: 100%;
background: #EFEEEC;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1001;
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
}
.is-open .mobile-menu-container {
transform: translateX(0);
}
.mobile-menu-container::-webkit-scrollbar {
width: 6px;
}
.mobile-menu-container::-webkit-scrollbar-track {
background: transparent;
}
.mobile-menu-container::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.mobile-menu-container::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.2);
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
position: sticky;
top: 0;
background: #EFEEEC;
z-index: 10;
}
.mobile-menu-header .logoContainer img {
height: 36px;
width: auto;
}
.mobile-menu-header .mobile-menu-close {
background: none;
border: none;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #262626;
border-radius: 8px;
transition: all 0.2s ease;
position: relative;
}
.mobile-menu-header .mobile-menu-close:hover {
background: rgba(0, 0, 0, 0.05);
}
.mobile-menu-header .mobile-menu-close:active {
transform: scale(0.95);
}
.mobile-menu-header .mobile-menu-close::before, .mobile-menu-header .mobile-menu-close::after {
content: "";
position: absolute;
width: 18px;
height: 2px;
background: currentColor;
transition: all 0.2s ease;
}
.mobile-menu-header .mobile-menu-close::before {
transform: rotate(45deg);
}
.mobile-menu-header .mobile-menu-close::after {
transform: rotate(-45deg);
}
.mobile-menu-header .mobile-menu-close:hover::before {
transform: rotate(45deg) scale(1.1);
}
.mobile-menu-header .mobile-menu-close:hover::after {
transform: rotate(-45deg) scale(1.1);
}
.mobile-menu-items {
list-style: none;
padding: 20px 0;
margin: 0;
font-family: "Inter", sans-serif;
}
.mobile-menu-items > li {
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
opacity: 0;
transform: translateX(20px);
animation: slideInMenu 0.4s ease forwards;
}
.mobile-menu-items > li:nth-child(1) {
animation-delay: 0.08s;
}
.mobile-menu-items > li:nth-child(2) {
animation-delay: 0.11s;
}
.mobile-menu-items > li:nth-child(3) {
animation-delay: 0.14s;
}
.mobile-menu-items > li:nth-child(4) {
animation-delay: 0.17s;
}
.mobile-menu-items > li:nth-child(5) {
animation-delay: 0.2s;
}
.mobile-menu-items > li:nth-child(6) {
animation-delay: 0.23s;
}
.mobile-menu-items > li:nth-child(7) {
animation-delay: 0.26s;
}
.mobile-menu-items > li:nth-child(8) {
animation-delay: 0.29s;
}
.mobile-menu-items > li:nth-child(9) {
animation-delay: 0.32s;
}
.mobile-menu-items > li:nth-child(10) {
animation-delay: 0.35s;
}
.mobile-menu-items > li > a,
.mobile-menu-items > li > .menu-item-wrapper {
position: relative;
display: block;
}
.mobile-menu-items > li > a {
padding: 18px 24px;
text-decoration: none;
color: #262626;
font-weight: 500;
font-size: 16px;
transition: all 0.2s ease;
}
.mobile-menu-items > li > a[aria-current=page] {
color: #E88006;
background: rgba(232, 128, 6, 0.05);
}
.mobile-menu-items > li > a[aria-current=page]::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: #E88006;
border-radius: 0 2px 2px 0;
}
.mobile-menu-items > li > a:active {
transform: scale(0.98);
}
.mobile-menu-items > li.menu-item-has-children > a {
padding-right: 60px;
}
.mobile-menu-items > li.menu-item-has-children .submenu-toggle {
position: absolute;
right: 20px;
top: 12px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 6px;
z-index: 1;
background: rgba(232, 128, 6, 0.08);
}
.mobile-menu-items > li.menu-item-has-children .submenu-toggle svg {
width: 14px;
height: 14px;
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
color: #E88006;
}
.mobile-menu-items > li.menu-item-has-children .submenu-toggle.open svg {
transform: rotate(180deg);
}
.mobile-menu-items > li.menu-item-has-children .submenu-toggle:hover {
background: rgba(232, 128, 6, 0.15);
}
.mobile-menu-items > li.menu-item-has-children .submenu-toggle:active {
transform: scale(0.95);
}
.mobile-menu-items .sub-menu {
list-style: none;
padding: 0;
margin: 0;
background: rgba(0, 0, 0, 0.02);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mobile-menu-items .sub-menu li {
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.mobile-menu-items .sub-menu li:last-child {
border-bottom: none;
}
.mobile-menu-items .sub-menu li a {
display: block;
padding: 14px 24px 14px 48px;
text-decoration: none;
color: rgba(0, 0, 0, 0.7);
font-weight: 400;
font-size: 15px;
transition: all 0.2s ease;
position: relative;
}
.mobile-menu-items .sub-menu li a:hover {
color: #E88006;
background: rgba(232, 128, 6, 0.04);
}
.mobile-menu-items .sub-menu li a[aria-current=page] {
color: #E88006;
font-weight: 500;
background: rgba(232, 128, 6, 0.06);
}
.mobile-menu-items .sub-menu li a:active {
transform: scale(0.98);
}
.mobile-menu-items .sub-menu li.menu-item-has-children {
position: relative;
}
.mobile-menu-items .sub-menu li.menu-item-has-children > a {
padding-right: 60px;
}
.mobile-menu-items .sub-menu li.menu-item-has-children .submenu-toggle {
position: absolute;
right: 20px;
top: 10px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 6px;
z-index: 1;
background: rgba(232, 128, 6, 0.05);
}
.mobile-menu-items .sub-menu li.menu-item-has-children .submenu-toggle svg {
width: 12px;
height: 12px;
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
color: #E88006;
}
.mobile-menu-items .sub-menu li.menu-item-has-children .submenu-toggle.open svg {
transform: rotate(180deg);
}
.mobile-menu-items .sub-menu li.menu-item-has-children .submenu-toggle:hover {
background: rgba(232, 128, 6, 0.12);
}
.mobile-menu-items .sub-menu li.menu-item-has-children .submenu-toggle:active {
transform: scale(0.95);
}
.mobile-menu-items .sub-menu li .sub-menu {
background: rgba(0, 0, 0, 0.03);
}
.mobile-menu-items .sub-menu li .sub-menu li a {
padding-left: 64px;
font-size: 14px;
}
.mobile-menu-items .sub-menu li .sub-menu li a::before {
left: 48px;
width: 3px;
height: 3px;
}
.mobile-menu-items .sub-menu li .sub-menu li a:hover {
padding-left: 68px;
}
@keyframes slideInMenu {
to {
opacity: 1;
transform: translateX(0);
}
}
body.admin-bar .mobile-menu-container {
top: 32px;
height: calc(100% - 32px);
}
@media screen and (max-width: 782px) {
body.admin-bar .mobile-menu-container {
top: 46px;
height: calc(100% - 46px);
}
}
body.no-scroll {
overflow: hidden;
}
@media (max-width: 1024px) {
body.no-scroll {
position: fixed;
width: 100%;
}
}
.wrapper {
max-width: 1450px;
margin: 0 auto;
padding: 80px 0px;
}
@media only screen and (max-width: 1490px) {
.wrapper {
padding-left: 40px;
padding-right: 40px;
}
}
@media only screen and (max-width: 1150px) {
.wrapper {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.wrapper {
padding: 3rem 1rem;
}
}
.wrapper .strategicSlider {
position: relative;
width: 100%;
max-width: 1450px;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
background: #EFEEEC;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.wrapper .strategicSlider .psuedoElem {
position: absolute;
z-index: 5;
top: 140px;
pointer-events: none;
opacity: 0;
transform: translateY(30px) scale(0.95);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
@media only screen and (max-width: 945px) {
.wrapper .strategicSlider .psuedoElem {
top: 70px;
}
}
@media only screen and (max-width: 850px) {
.wrapper .strategicSlider .psuedoElem {
display: none;
}
}
.wrapper .strategicSlider .psuedoElem.drawLines {
opacity: 1;
transform: translateY(0) scale(1);
}
.wrapper .strategicSlider .psuedoElem svg {
width: 100%;
height: auto;
filter: drop-shadow(0 2px 8px rgba(232, 128, 6, 0.15));
}
.wrapper .strategicSlider .psuedoElem svg path {
stroke: #E88006;
stroke-width: 1.5;
fill: none;
opacity: 0;
stroke-linecap: round;
stroke-linejoin: round;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.wrapper .strategicSlider .psuedoElem svg path:nth-child(1) {
transition-delay: 0.2s;
}
.wrapper .strategicSlider .psuedoElem svg path:nth-child(2) {
transition-delay: 0.4s;
}
.wrapper .strategicSlider .psuedoElem svg path:nth-child(3) {
transition-delay: 0.6s;
}
.wrapper .strategicSlider .psuedoElem svg path:nth-child(4) {
transition-delay: 0.8s;
}
.wrapper .strategicSlider .psuedoElem svg.paths-visible path {
opacity: 0.85;
}
.wrapper .strategicSlider .psuedoElem svg.breathing {
animation: svgBreathe 4s ease-in-out infinite;
}
.wrapper .strategicSlider .psuedoElem svg.active-glow {
filter: drop-shadow(0 0 12px rgba(232, 128, 6, 0.3));
}
.wrapper .strategicSlider .psuedoElem svg.active-glow path {
opacity: 1;
stroke-width: 2;
}
.wrapper .strategicSlider .psuedoElem svg.transitioning path {
opacity: 0.4;
transition: opacity 0.3s ease;
}
@media (max-width: 850px) {
.wrapper .strategicSlider .psuedoElem {
bottom: 30px;
transform: translateY(30px) scale(1);
}
.wrapper .strategicSlider .psuedoElem.drawLines {
transform: translateY(0) scale(1);
}
}
.wrapper .strategicSlider .strategicSliderTabs {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
padding: 0 60px;
padding-top: 30px;
justify-content: space-between;
}
@media (max-width: 1150px) {
.wrapper .strategicSlider .strategicSliderTabs {
padding: 0 40px;
padding-top: 20px;
}
}
@media (max-width: 945px) {
.wrapper .strategicSlider .strategicSliderTabs {
display: none;
}
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
padding: 8px 0 12px 0;
margin-right: 40px;
background: transparent;
border: none;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
overflow: hidden;
outline: none;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
@media (max-width: 850px) {
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab {
color: #262626;
margin-right: 20px;
margin-bottom: 10px;
}
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.2);
}
@media (max-width: 850px) {
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab::before {
background: rgba(0, 0, 0, 0.1);
}
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #E88006;
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab.active {
color: #EFEEEC;
}
@media (max-width: 850px) {
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab.active {
color: #E88006;
}
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab.active::after {
transform: translateX(0);
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab.active .strategicSliderTabIcon {
transform: rotate(45deg);
opacity: 1;
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab:focus, .wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab:active {
outline: none;
background: transparent;
box-shadow: none;
border: none;
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab:hover:not(.active) {
color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 850px) {
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab:hover:not(.active) {
color: #E88006;
}
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab:hover:not(.active)::after {
transform: translateX(-50%);
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab:hover:not(.active) .strategicSliderTabIcon {
transform: rotate(15deg);
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab .strategicSliderTabText {
display: block;
line-height: 1.4;
}
.wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab .strategicSliderTabIcon {
width: 12px;
height: 12px;
transition: all 0.3s ease;
flex-shrink: 0;
opacity: 0.5;
}
.strategicSliderTab.active .wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab .strategicSliderTabIcon, .strategicSliderTab:hover .wrapper .strategicSlider .strategicSliderTabs .strategicSliderTab .strategicSliderTabIcon {
opacity: 1;
}
.wrapper .strategicSlider .strategicSliderContainer {
position: relative;
height: 700px;
overflow: hidden;
}
@media (max-width: 1150px) {
.wrapper .strategicSlider .strategicSliderContainer {
height: 600px;
}
}
@media (max-width: 850px) {
.wrapper .strategicSlider .strategicSliderContainer {
height: 400px;
}
}
.wrapper .strategicSlider .strategicSliderTrack {
position: relative;
width: 100%;
height: 100%;
}
.wrapper .strategicSlider .strategicSliderSlide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
opacity: 0;
visibility: hidden;
z-index: 1;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.wrapper .strategicSlider .strategicSliderSlide.active {
opacity: 1;
visibility: visible;
z-index: 2;
}
.wrapper .strategicSlider .strategicSliderOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.4) 100%);
z-index: 1;
}
.wrapper .strategicSlider .strategicSliderContent {
position: relative;
z-index: 999999 !important;
color: #EFEEEC;
padding: 0 60px 60px 60px;
max-width: 600px;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
@media (max-width: 1150px) {
.wrapper .strategicSlider .strategicSliderContent {
padding: 0 40px 40px 40px;
max-width: 500px;
}
}
@media (max-width: 850px) {
.wrapper .strategicSlider .strategicSliderContent {
padding: 0 24px 40px 24px;
max-width: 100%;
}
}
.wrapper .strategicSlider .strategicSliderContent::before {
content: "";
position: absolute;
bottom: 180px;
left: 60px;
width: 80px;
height: 2px;
background: #E88006;
border-radius: 1px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s ease 0.3s;
}
@media (max-width: 1150px) {
.wrapper .strategicSlider .strategicSliderContent::before {
left: 40px;
bottom: 150px;
width: 60px;
}
}
@media (max-width: 850px) {
.wrapper .strategicSlider .strategicSliderContent::before {
left: 24px;
bottom: 130px;
width: 50px;
}
}
.strategicSliderSlide.active .wrapper .strategicSlider .strategicSliderContent::before {
transform: scaleX(1);
}
.strategicSliderSlide:first-child.active .wrapper .strategicSlider .strategicSliderContent::before {
transform: scaleX(1);
transition-delay: 0s;
}
.wrapper .strategicSlider .strategicSliderTitle {
font-family: "Inter", sans-serif;
font-size: 3rem;
font-weight: 300;
margin: 0 0 1.5rem 0;
line-height: 1.2;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
color: #EFEEEC;
}
@media (max-width: 1150px) {
.wrapper .strategicSlider .strategicSliderTitle {
font-size: 2.5rem;
}
}
@media (max-width: 850px) {
.wrapper .strategicSlider .strategicSliderTitle {
font-size: 2rem;
margin-bottom: 1rem;
}
}
.strategicSliderSlide.active .wrapper .strategicSlider .strategicSliderTitle {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
}
.strategicSliderSlide:first-child .wrapper .strategicSlider .strategicSliderTitle {
opacity: 1;
transform: translateY(0);
}
.wrapper .strategicSlider .strategicSliderTitle span {
font-style: italic;
font-weight: 300;
}
.wrapper .strategicSlider .strategicSliderText {
font-size: 1.2rem;
line-height: 1.6;
margin: 0 0 2rem 0;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
font-weight: 400;
}
@media (max-width: 850px) {
.wrapper .strategicSlider .strategicSliderText {
font-size: 1rem;
margin-bottom: 1.5rem;
}
}
.strategicSliderSlide.active .wrapper .strategicSlider .strategicSliderText {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s;
}
.strategicSliderSlide:first-child .wrapper .strategicSlider .strategicSliderText {
opacity: 1;
transform: translateY(0);
}
.wrapper .strategicSlider .classButton {
width: fit-content;
background: transparent;
color: #EFEEEC;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
}
.wrapper .strategicSlider .classButton::after {
filter: none;
}
.wrapper .strategicSlider .classButton:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.6) !important;
color: #EFEEEC !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.wrapper .strategicSlider .classButton:hover::after {
filter: none;
}
@keyframes svgBreathe {
0%, 100% {
transform: scale(1) translateY(0);
filter: drop-shadow(0 2px 8px rgba(232, 128, 6, 0.15));
}
50% {
transform: scale(1.02) translateY(-2px);
filter: drop-shadow(0 4px 12px rgba(232, 128, 6, 0.25));
}
}
@keyframes svgFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
@keyframes subtleGlow {
0%, 100% {
filter: drop-shadow(0 2px 8px rgba(232, 128, 6, 0.15));
}
50% {
filter: drop-shadow(0 0 15px rgba(232, 128, 6, 0.3));
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.footerMain {
background-color: #262626;
}
.footerMain h2 {
color: #EFEEEC;
}
.footerMain * {
margin: 0 !important;
}
.footerMain .footerWrap {
max-width: 1450px;
margin: 0 auto;
padding: 80px 0px;
}
@media only screen and (max-width: 1490px) {
.footerMain .footerWrap {
padding-left: 40px;
padding-right: 40px;
}
}
@media only screen and (max-width: 1150px) {
.footerMain .footerWrap {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.footerMain .footerWrap {
padding: 3rem 1rem;
}
}
.footerMain .footerWrap {
margin: 0 auto !important;
display: flex;
flex-direction: column;
}
.footerMain h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.footerMain h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.footerMain h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.footerMain h2 {
font-size: 1.8rem;
}
}
.footerMain h2 {
max-width: 750px;
}
.footerMain .footerInner {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 4rem;
margin-top: 2rem !important;
border-bottom: 1px solid rgba(239, 238, 236, 0.0901960784);
padding-bottom: 50px;
}
@media only screen and (max-width: 850px) {
.footerMain .footerInner {
flex-direction: column;
align-items: flex-start;
gap: 3rem;
}
}
.footerMain .footerInner .wp-block-image {
flex-shrink: 0;
margin: 0;
}
.footerMain .footerInner .wp-block-image img {
height: 54px;
width: auto !important;
display: block;
}
@media (max-width: 1070px) {
.footerMain .footerInner .wp-block-image img {
height: 42px;
}
}
@media (max-width: 346px) {
.footerMain .footerInner .wp-block-image img {
height: 36px;
}
}
.footerMain .footerInner .footerLinks {
display: flex;
gap: 4rem;
}
@media only screen and (max-width: 850px) {
.footerMain .footerInner .footerLinks {
flex-direction: column;
gap: 2rem;
}
}
.footerMain .footerInner .footerLinks .wp-block-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.footerMain .footerInner .footerLinks .wp-block-group p {
color: #A8A8A8;
}
.footerMain .footerInner .footerLinks .wp-block-group p a {
color: #A8A8A8;
text-decoration: none;
transition: ease all 0.2s;
}
.footerMain .footerInner .footerLinks .wp-block-group p a:hover {
text-decoration: underline;
color: #E88006;
transition: ease all 0.2s;
}
.footerMain .footerInner .footerLinks .wp-block-group p:first-child {
font-weight: 600;
margin-bottom: 1rem !important;
color: #EFEEEC;
}
.footerMain .footerInner .footerLinks .wp-block-group p:not(:first-child) {
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.footerMain .footerInner .footerLinks .wp-block-group.restrict {
max-width: 200px;
}
.footerMain .footerBottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 40px;
flex-wrap: wrap;
gap: 30px;
}
.footerMain .footerBottom p {
color: #EFEEEC;
opacity: 0.9;
font-size: 0.8em;
}
.heroSection .heroContainer {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.heroSection .heroContainer {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.heroSection .heroContainer {
padding: 3rem 1rem;
}
}
.heroSection .heroContainer {
padding-top: 60px;
}
@media only screen and (max-width: 850px) {
.heroSection .heroContainer {
padding-top: 2rem;
}
}
.heroSection .heroContainer {
margin: 0 auto;
padding-bottom: 0px !important;
}
.heroSection .heroContainer .heroContent {
display: flex;
align-items: center;
gap: 60px;
}
@media only screen and (max-width: 1100px) {
.heroSection .heroContainer .heroContent {
gap: 30px;
}
}
@media only screen and (max-width: 850px) {
.heroSection .heroContainer .heroContent {
flex-direction: column;
align-items: flex-start;
gap: 0px;
}
}
.heroSection .heroContainer .heroContent .heroLeft {
flex: 2;
padding-right: 100px;
}
@media only screen and (max-width: 1430px) {
.heroSection .heroContainer .heroContent .heroLeft {
padding-right: 0px;
}
}
.heroSection .heroContainer .heroContent .heroLeft .heroTitle h1 {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.heroSection .heroContainer .heroContent .heroLeft .heroTitle h1 {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.heroSection .heroContainer .heroContent .heroLeft .heroTitle h1 {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.heroSection .heroContainer .heroContent .heroLeft .heroTitle h1 {
font-size: 2rem;
}
}
.heroSection .heroContainer .heroContent .heroLeft .heroTitle h1 {
margin-bottom: 0;
}
.heroSection .heroContainer .heroContent .heroLeft .heroText {
margin-bottom: 2rem;
}
.heroSection .heroContainer .heroContent .heroLeft .heroText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
}
.heroSection .heroContainer .heroContent .heroRight {
flex: 1;
overflow: visible;
}
.heroSection .heroContainer .heroContent .heroRight .heroImageWrapper .heroImage {
width: auto;
height: 500px;
display: block;
}
@media only screen and (max-width: 1200px) {
.heroSection .heroContainer .heroContent .heroRight .heroImageWrapper .heroImage {
height: 450px;
}
}
@media only screen and (max-width: 850px) {
.heroSection .heroContainer .heroContent .heroRight .heroImageWrapper .heroImage {
width: 100%;
height: auto;
display: none;
}
}
.contentBlock {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px 60px 80px;
}
@media only screen and (max-width: 1150px) {
.contentBlock {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.contentBlock {
padding: 3rem 1rem;
}
}
.contentBlock {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
max-width: 900px;
}
@media only screen and (max-width: 850px) {
.contentBlock.addPaddingBottom {
padding-bottom: 3rem !important;
}
}
.contentBlock h1, .contentBlock p, .contentBlock h4, .contentBlock h2, .contentBlock h5 {
margin: 0 !important;
}
.contentBlock h5 {
font-size: 1rem;
line-height: 1.5;
font-weight: 300;
}
@media only screen and (max-width: 1250px) {
.contentBlock h5 {
font-size: 0.9rem;
}
}
@media only screen and (max-width: 1100px) {
.contentBlock h5 {
font-size: 0.8rem;
}
}
@media only screen and (max-width: 850px) {
.contentBlock h5 {
font-size: 1.2rem;
}
}
.contentBlock .contentBlockMainTitle, .contentBlock .contentBlockParagraph, .contentBlock .contentBlockMiniTitle {
text-align: center;
}
.contentBlock .contentBlockParagraph p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
}
.contentBlock .classButton {
margin-top: 24px;
}
.contentBlock .contentBlockMiniTitle {
display: flex;
gap: 8px;
align-items: center;
}
.contentBlock .contentBlockMiniTitle img {
height: 12px;
width: auto;
}
.contentBlock .contentBlockMainTitle h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.contentBlock .contentBlockMainTitle h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.contentBlock .contentBlockMainTitle h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.contentBlock .contentBlockMainTitle h2 {
font-size: 1.8rem;
}
}
.contentBlock .contentBlockMainTitle h1 {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.contentBlock .contentBlockMainTitle h1 {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.contentBlock .contentBlockMainTitle h1 {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.contentBlock .contentBlockMainTitle h1 {
font-size: 2rem;
}
}
.contentBlock .classButton {
margin-top: 0;
}
.ctaWithImage {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.ctaWithImage {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.ctaWithImage {
padding: 3rem 1rem;
}
}
.ctaWithImage {
position: relative;
}
.ctaWithImage .ctaWithImageContainer {
display: flex;
align-items: flex-start;
gap: 60px;
position: relative;
}
@media (max-width: 850px) {
.ctaWithImage .ctaWithImageContainer {
flex-direction: column;
gap: 1.5rem;
text-align: center;
align-items: center;
}
}
.ctaWithImage .ctaWithImageLeft {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
}
.ctaWithImage .ctaWithImageLeft .ctaWithImageTitle {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.ctaWithImage .ctaWithImageLeft .ctaWithImageTitle {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.ctaWithImage .ctaWithImageLeft .ctaWithImageTitle {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.ctaWithImage .ctaWithImageLeft .ctaWithImageTitle {
font-size: 1.8rem;
}
}
.ctaWithImage .ctaWithImageLeft .ctaWithImageTitle {
margin: 0 0 30px 0;
color: #262626;
width: 75%;
}
@media (max-width: 850px) {
.ctaWithImage .ctaWithImageLeft .ctaWithImageTitle {
margin: 0 0 1rem 0;
width: 100%;
}
}
.ctaWithImage .ctaWithImageLeft .ctaWithImageText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin-top: 0;
width: 90%;
}
.ctaWithImage .ctaWithImageLeft .ctaWithImageText p:first-of-type {
margin-top: 25px;
}
@media (max-width: 850px) {
.ctaWithImage .ctaWithImageLeft .ctaWithImageText p:first-of-type {
margin-top: 0px;
}
}
.ctaWithImage .ctaWithImageLeft .ctaWithImageText p:last-of-type {
margin-bottom: 0;
}
@media (max-width: 850px) {
.ctaWithImage .ctaWithImageLeft .ctaWithImageText p:last-of-type {
margin-bottom: 1rem;
}
}
@media (max-width: 850px) {
.ctaWithImage .ctaWithImageLeft .ctaWithImageText p {
width: 100%;
}
}
.ctaWithImage .ctaWithImageRight {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
}
.ctaWithImage .ctaWithImageRight .ctaWithImageButton {
margin-top: 90px;
align-self: flex-end;
margin-bottom: 58px;
position: relative;
}
@media (max-width: 850px) {
.ctaWithImage .ctaWithImageRight .ctaWithImageButton {
align-self: center;
margin-top: 0;
margin-bottom: 2rem;
}
}
.ctaWithImage .ctaWithImageRight .ctaWithImageWrapper {
position: relative;
border-radius: 12px;
overflow: hidden;
}
.ctaWithImage .ctaWithImageRight .ctaWithImageWrapper .ctaWithImageImg {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
position: relative;
}
.ctaWithImage .ctaAnimatedSvg {
opacity: 0;
transform: translateY(30px) scale(0.95);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.ctaWithImage .ctaAnimatedSvg.drawLines {
opacity: 1;
transform: translateY(0) scale(1);
}
.ctaWithImage .ctaAnimatedSvg svg {
width: 100%;
filter: drop-shadow(0 2px 8px rgba(232, 128, 6, 0.15));
}
.ctaWithImage .ctaAnimatedSvg svg path {
stroke: #E88006;
stroke-width: 1.5;
fill: none;
opacity: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.ctaWithImage .ctaAnimatedSvg svg path:nth-child(1) {
transition-delay: 0.2s;
}
.ctaWithImage .ctaAnimatedSvg svg.paths-visible path {
opacity: 0.85;
stroke-dashoffset: 0;
}
.ctaWithImage .ctaAnimatedSvg svg.breathing {
animation: svgBreathe 4s ease-in-out infinite;
}
@media (max-width: 850px) {
.ctaWithImage .ctaAnimatedSvg {
display: none;
}
}
@media (max-width: 850px) {
.singleTabBlock {
padding-top: 0px !important;
}
}
.singleTabBlock {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.singleTabBlock {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.singleTabBlock {
padding: 3rem 1rem;
}
}
.singleTabBlock {
padding-top: 0px !important;
}
.singleTabBlock .singleTabContainer {
display: flex;
min-height: 400px;
border-radius: 16px;
overflow: hidden;
}
@media (max-width: 850px) {
.singleTabBlock .singleTabContainer {
flex-direction: column;
min-height: auto;
}
}
.singleTabBlock .singleTabLeft {
flex: 1;
background-color: #262626;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
overflow: hidden;
}
@media (max-width: 850px) {
.singleTabBlock .singleTabLeft {
min-height: 200px;
padding: 30px;
border-radius: 16px 16px 0 0;
}
}
.singleTabBlock .singleTabLeft .singleTabPencilText {
position: relative;
z-index: 2;
}
.singleTabBlock .singleTabLeft .singleTabPencilText .singleTabPencilImg {
max-width: 200px;
height: auto;
}
@media (max-width: 850px) {
.singleTabBlock .singleTabLeft .singleTabPencilText .singleTabPencilImg {
max-width: 150px;
}
}
.singleTabBlock .singleTabLeft .singleTabSlantedImage {
position: absolute;
right: -54px;
top: -10px;
bottom: -10px;
z-index: 3;
}
@media (max-width: 850px) {
.singleTabBlock .singleTabLeft .singleTabSlantedImage {
right: -30px;
top: 0;
bottom: 0;
transform: none;
}
}
.singleTabBlock .singleTabLeft .singleTabSlantedImage .singleTabSlantedImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.singleTabBlock .singleTabRight {
flex: 1;
background: #CCD1CB;
padding: 60px;
padding-left: 80px !important;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
}
@media (max-width: 1150px) {
.singleTabBlock .singleTabRight {
padding: 40px;
padding-left: 60px !important;
}
}
@media (max-width: 850px) {
.singleTabBlock .singleTabRight {
padding: 30px !important;
gap: 1.5rem;
border-radius: 0 0 16px 16px;
}
}
.singleTabBlock .singleTabRight .singleTabHeader {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 24px;
}
@media (max-width: 850px) {
.singleTabBlock .singleTabRight .singleTabHeader {
gap: 1rem;
margin-bottom: 16px;
}
}
.singleTabBlock .singleTabRight .singleTabHeader .singleTabTitle {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.singleTabBlock .singleTabRight .singleTabHeader .singleTabTitle {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.singleTabBlock .singleTabRight .singleTabHeader .singleTabTitle {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.singleTabBlock .singleTabRight .singleTabHeader .singleTabTitle {
font-size: 1.8rem;
}
}
.singleTabBlock .singleTabRight .singleTabHeader .singleTabTitle {
margin: 0;
color: #262626;
}
.singleTabBlock .singleTabRight .singleTabHeader .singleTabButton {
flex-shrink: 0;
}
.singleTabBlock .singleTabRight .singleTabHeader .singleTabButton .singleTabArrowOnly {
min-width: 48px;
width: 48px;
height: 48px;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
position: relative;
background: transparent !important;
color: #262626 !important;
border: 2px solid #262626 !important;
transition: all 0.3s ease;
}
@media (max-width: 850px) {
.singleTabBlock .singleTabRight .singleTabHeader .singleTabButton .singleTabArrowOnly {
width: 45px;
height: 45px;
min-width: 45px;
}
}
.singleTabBlock .singleTabRight .singleTabHeader .singleTabButton .singleTabArrowOnly::after {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
filter: invert(1);
transition: filter 0.3s ease, transform 0.3s ease;
}
@media (max-width: 850px) {
.singleTabBlock .singleTabRight .singleTabHeader .singleTabButton .singleTabArrowOnly::after {
width: 14px;
height: 14px;
}
}
.singleTabBlock .singleTabRight .singleTabHeader .singleTabButton .singleTabArrowOnly:hover::after {
transform: translate(-50%, -50%) translateX(4px) !important;
}
.singleTabBlock .singleTabRight .singleTabText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0;
}
.quoteBlock {
background-color: #E2E0D6;
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.quoteBlock {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.quoteBlock {
padding: 3rem 1rem;
}
}
.quoteBlock {
margin-left: auto;
margin-right: auto;
max-width: 1450px;
}
@media only screen and (max-width: 1490px) {
.quoteBlock {
margin-left: 20px;
margin-right: 20px;
}
}
@media only screen and (max-width: 850px) {
.quoteBlock {
margin-left: 1rem;
margin-right: 1rem;
padding: 2rem;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0;
}
}
.quoteBlock .quoteBlockContainer {
display: flex;
gap: 80px;
align-items: flex-start;
}
@media (max-width: 1150px) {
.quoteBlock .quoteBlockContainer {
gap: 60px;
}
}
@media (max-width: 850px) {
.quoteBlock .quoteBlockContainer {
flex-direction: column;
gap: 0px;
}
}
.quoteBlock .quoteBlockLeft {
flex: 0 0 auto;
width: 350px;
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (max-width: 1150px) {
.quoteBlock .quoteBlockLeft {
width: 300px;
}
}
@media (max-width: 850px) {
.quoteBlock .quoteBlockLeft {
width: 100%;
gap: 1.5rem;
}
}
.quoteBlock .quoteBlockLeft .quoteBlockMiniTitle {
display: flex;
align-items: center;
gap: 8px;
}
.quoteBlock .quoteBlockLeft .quoteBlockMiniTitle .quoteBlockMiniTitleIcon {
height: 16px;
}
.quoteBlock .quoteBlockLeft .quoteBlockMiniTitle h5 {
font-size: 1rem;
line-height: 1.5;
font-weight: 300;
}
@media only screen and (max-width: 1250px) {
.quoteBlock .quoteBlockLeft .quoteBlockMiniTitle h5 {
font-size: 0.9rem;
}
}
@media only screen and (max-width: 1100px) {
.quoteBlock .quoteBlockLeft .quoteBlockMiniTitle h5 {
font-size: 0.8rem;
}
}
@media only screen and (max-width: 850px) {
.quoteBlock .quoteBlockLeft .quoteBlockMiniTitle h5 {
font-size: 1.2rem;
}
}
.quoteBlock .quoteBlockLeft .quoteBlockMiniTitle h5 {
margin: 0;
}
.quoteBlock .quoteBlockLeft .quoteBlockSupportingText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0;
}
.quoteBlock .quoteBlockLeft .quoteBlockNavigation {
display: flex;
gap: 12px;
margin-top: auto;
}
@media (max-width: 850px) {
.quoteBlock .quoteBlockLeft .quoteBlockNavigation {
margin-top: 0;
}
}
.quoteBlock .quoteBlockLeft .quoteBlockNavigation .quoteBlockNav {
min-width: 50px;
padding: 15px;
font-size: 0;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.quoteBlock .quoteBlockLeft .quoteBlockNavigation .quoteBlockNav.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.quoteBlock .quoteBlockLeft .quoteBlockNavigation .quoteBlockNav.disabled:hover {
background: #262626 !important;
border-color: #262626 !important;
color: #EFEEEC !important;
transform: none !important;
}
.quoteBlock .quoteBlockLeft .quoteBlockNavigation .quoteBlockNav.quoteBlockNavPrev::after {
transform: rotate(180deg) !important;
margin-left: 0;
}
.quoteBlock .quoteBlockLeft .quoteBlockNavigation .quoteBlockNav.quoteBlockNavPrev:hover:not(.disabled)::after {
transform: rotate(180deg) translateX(-2px) !important;
}
.quoteBlock .quoteBlockLeft .quoteBlockNavigation .quoteBlockNav.quoteBlockNavNext::after {
margin-left: 0;
}
.quoteBlock .quoteBlockLeft .quoteBlockNavigation .quoteBlockNav.quoteBlockNavNext:hover:not(.disabled)::after {
transform: translateX(2px);
}
.quoteBlock .quoteBlockRight {
flex: 1;
min-height: 400px;
display: flex;
align-items: center;
position: relative;
}
@media (max-width: 850px) {
.quoteBlock .quoteBlockRight {
min-height: 300px;
}
}
.quoteBlock .quoteBlockRight .quoteBlockSlider {
width: 100%;
position: relative;
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockSlide {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockSlide.active {
opacity: 1;
visibility: visible;
position: relative;
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockSlide.fade-out {
opacity: 0;
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockSlide.fade-in {
opacity: 1;
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuoteWrapper {
width: 100%;
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote {
margin: 0 0 3rem 0;
position: relative;
}
@media (max-width: 850px) {
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote {
margin-bottom: 2rem;
}
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p {
font-size: 1.8rem;
}
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p {
padding: 20px 40px 40px 40px;
margin: 0;
color: #262626;
text-indent: 2.5em;
}
@media (max-width: 1150px) {
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p {
padding: 20px 30px 35px 30px;
text-indent: 2em;
}
}
@media (max-width: 850px) {
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p {
padding: 0;
text-indent: 1.5em;
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
}
@media only screen and (max-width: 850px) and (max-width: 1250px) {
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) and (max-width: 1100px) {
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 850px) and (max-width: 850px) {
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p {
font-size: 1.5rem;
}
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p em, .quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p i {
font-style: italic;
font-weight: 300;
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p strong, .quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockQuote .quoteBlockQuoteText p b {
font-weight: 600;
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockCitation {
text-align: right;
padding-right: 20px;
}
@media (max-width: 850px) {
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockCitation {
text-align: left;
padding-right: 0;
padding-left: 0px;
}
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockCitation .quoteBlockCitationName {
font-size: 1.2rem;
font-weight: 600;
color: #262626;
margin-bottom: 4px;
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockCitation .quoteBlockCitationPosition {
font-size: 1rem;
font-weight: 400;
color: #666;
margin-bottom: 2px;
}
.quoteBlock .quoteBlockRight .quoteBlockSlider .quoteBlockCitation .quoteBlockCitationLocation {
font-size: 0.95rem;
font-weight: 400;
color: #E88006;
margin: 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 850px) {
.ctaWithBGImage {
padding-top: 20px;
}
}
.ctaWithBGImage {
max-width: 1450px;
margin: 0 auto;
padding: 80px 0px;
}
@media only screen and (max-width: 1490px) {
.ctaWithBGImage {
padding-left: 40px;
padding-right: 40px;
}
}
@media only screen and (max-width: 1150px) {
.ctaWithBGImage {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.ctaWithBGImage {
padding: 3rem 1rem;
}
}
.ctaWithBGImage .ctaWithBGImageContainer {
position: relative;
min-height: 500px;
border-radius: 16px;
overflow: hidden;
}
@media (max-width: 850px) {
.ctaWithBGImage .ctaWithBGImageContainer {
min-height: 400px;
}
}
.ctaWithBGImage .ctaWithBGImageContainer:hover .ctaWithBGImageBackground {
transform: scale(1.05);
}
.ctaWithBGImage .ctaWithBGImageContainer:hover .ctaWithBGImageOverlay {
background: rgba(0, 0, 0, 0.2);
}
.ctaWithBGImage .ctaWithBGImageBackground {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ctaWithBGImage .ctaWithBGImageOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 2;
transition: background 0.6s ease;
}
.ctaWithBGImage .ctaWithBGImageContent {
position: relative;
z-index: 10;
display: flex;
align-items: center;
min-height: 500px;
gap: 80px;
padding: 60px;
background: #E2E0D6;
border-radius: 12px;
margin: 80px;
}
@media (max-width: 1150px) {
.ctaWithBGImage .ctaWithBGImageContent {
gap: 60px;
padding: 40px;
margin: 60px;
}
}
@media (max-width: 850px) {
.ctaWithBGImage .ctaWithBGImageContent {
flex-direction: column;
gap: 40px;
padding: 40px 30px;
min-height: 400px;
text-align: center;
margin: 20px;
}
}
.ctaWithBGImage .ctaWithBGImageLeft {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.ctaWithBGImage .ctaWithBGImageLeft .ctaWithBGImageContentImageWrapper {
max-width: 400px;
}
@media (max-width: 850px) {
.ctaWithBGImage .ctaWithBGImageLeft .ctaWithBGImageContentImageWrapper {
max-width: 250px;
}
}
.ctaWithBGImage .ctaWithBGImageLeft .ctaWithBGImageContentImageWrapper .ctaWithBGImageContentImage {
width: 100%;
height: auto;
display: block;
}
.ctaWithBGImage .ctaWithBGImageRight {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (max-width: 850px) {
.ctaWithBGImage .ctaWithBGImageRight {
gap: 1rem;
}
}
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageTitle {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageTitle {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageTitle {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageTitle {
font-size: 1.8rem;
}
}
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageTitle {
margin: 0;
color: #262626;
}
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0;
color: #262626 !important;
}
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageButton {
align-self: flex-start;
}
@media (max-width: 850px) {
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageButton {
align-self: center;
}
}
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageButton .classButton {
width: fit-content;
background: #262626;
color: #EFEEEC !important;
border: 2px solid #262626 !important;
}
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageButton .classButton::after {
filter: none;
}
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageButton .classButton:hover {
background: transparent !important;
border-color: #262626 !important;
color: #262626 !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.ctaWithBGImage .ctaWithBGImageRight .ctaWithBGImageButton .classButton:hover::after {
filter: invert(1);
}
.animate-on-scroll,
.animate-fade-in,
.animate-slide-up,
.animate-slide-left,
.animate-slide-right,
.animate-scale-in {
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-in {
opacity: 1 !important;
transform: none !important;
}
.animate-slide-up {
transform: translateY(30px);
}
.animate-slide-left {
transform: translateX(30px);
}
.animate-slide-right {
transform: translateX(-30px);
}
.animate-scale-in {
transform: scale(0.9);
}
.animate-stagger-container .animate-stagger-child {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.animate-stagger-container .animate-stagger-child.animate-in {
opacity: 1;
transform: translateY(0);
}
.verticalBookSlider {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.verticalBookSlider {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.verticalBookSlider {
padding: 3rem 1rem;
}
}
.verticalBookSlider {
position: relative;
padding-top: 0;
}
@media (max-width: 850px) {
.verticalBookSlider {
padding: 2rem 1.5rem;
}
}
.verticalBookSlider .verticalBookSliderContainer {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 850px) {
.verticalBookSlider .verticalBookSliderContainer {
display: block;
padding: 0;
}
}
.verticalBookSlider .verticalBookSliderTrack {
position: relative;
width: 100%;
max-width: 1450px;
height: 600px;
}
@media (max-width: 1150px) {
.verticalBookSlider .verticalBookSliderTrack {
height: 500px;
}
}
@media (max-width: 850px) {
.verticalBookSlider .verticalBookSliderTrack {
height: auto;
display: block;
max-width: none;
}
}
.verticalBookSlider .verticalBookSliderItem {
position: absolute;
top: 50%;
left: 50%;
width: 90%;
max-width: 1250px;
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
background: #EFEEEC;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
pointer-events: auto;
cursor: pointer;
}
@media (max-width: 850px) {
.verticalBookSlider .verticalBookSliderItem {
position: static;
top: auto;
left: auto;
transform: none !important;
width: 100%;
max-width: none;
opacity: 1 !important;
z-index: auto !important;
pointer-events: auto;
margin-bottom: 2rem;
cursor: default;
}
.verticalBookSlider .verticalBookSliderItem:last-child {
margin-bottom: 0;
}
}
.verticalBookSlider .verticalBookSliderItem:nth-child(1) {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
z-index: 4;
}
.verticalBookSlider .verticalBookSliderItem:nth-child(2) {
transform: translate(-42%, -35%) scale(0.95);
opacity: 1;
z-index: 3;
}
.verticalBookSlider .verticalBookSliderItem:nth-child(3) {
transform: translate(-34%, -20%) scale(0.9);
opacity: 1;
z-index: 2;
}
.verticalBookSlider .verticalBookSliderItem:nth-child(4) {
transform: translate(-26%, -5%) scale(0.85);
opacity: 1;
z-index: 1;
}
.verticalBookSlider .verticalBookSliderItem:nth-child(n+5) {
transform: translate(-18%, 10%) scale(0.8);
opacity: 1;
z-index: 0;
}
.verticalBookSlider .verticalBookSliderItem:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.verticalBookSlider .verticalBookSliderItem.focused .verticalBookSliderSubTitle {
font-weight: 600;
}
.verticalBookSlider .verticalBookSliderCard {
display: flex;
min-height: 400px;
}
@media (max-width: 1150px) {
.verticalBookSlider .verticalBookSliderCard {
min-height: 350px;
}
}
@media (max-width: 850px) {
.verticalBookSlider .verticalBookSliderCard {
flex-direction: column;
min-height: auto;
}
}
.verticalBookSlider .verticalBookSliderImageSide {
flex: 0 0 50%;
position: relative;
overflow: hidden;
}
@media (max-width: 850px) {
.verticalBookSlider .verticalBookSliderImageSide {
flex: none;
height: 250px;
}
}
.verticalBookSlider .verticalBookSliderImageSide .verticalBookSliderImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
@media (max-width: 850px) {
.verticalBookSlider .verticalBookSliderImageSide .verticalBookSliderImage {
position: relative;
}
}
.verticalBookSlider .verticalBookSliderContentSide {
flex: 1;
padding: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
background: #EFEEEC;
}
@media (max-width: 1150px) {
.verticalBookSlider .verticalBookSliderContentSide {
padding: 2rem;
}
}
@media (max-width: 850px) {
.verticalBookSlider .verticalBookSliderContentSide {
padding: 2rem 1.5rem;
}
}
.verticalBookSlider .verticalBookSliderTitle {
font-family: "Inter", sans-serif;
font-size: 2.5rem;
font-weight: 300;
line-height: 1.2;
margin: 0 0 1rem 0;
color: #262626;
}
@media (max-width: 1150px) {
.verticalBookSlider .verticalBookSliderTitle {
font-size: 2rem;
}
}
@media (max-width: 850px) {
.verticalBookSlider .verticalBookSliderTitle {
font-size: 1.75rem;
}
}
.verticalBookSlider .verticalBookSliderTitle p {
margin: 0;
}
.verticalBookSlider .verticalBookSliderSubTitle {
font-size: 1.2rem;
color: #E88006;
font-weight: 500;
margin: 0 0 1.5rem 0;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: font-weight 0.3s ease;
}
@media (max-width: 850px) {
.verticalBookSlider .verticalBookSliderSubTitle {
font-size: 1rem;
}
}
.verticalBookSlider .verticalBookSliderSupportingText {
font-size: 1rem;
line-height: 1.6;
color: #262626;
margin: 0 0 2rem 0;
}
@media (max-width: 850px) {
.verticalBookSlider .verticalBookSliderSupportingText {
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
}
.verticalBookSlider .verticalBookSliderButton {
align-self: flex-start;
z-index: 999999 !important;
}
.verticalBookSlider .verticalBookSliderProgress {
display: none;
}
.infiniteSliderContainer {
width: 100%;
overflow: hidden;
background: #262626;
padding: 40px 0;
padding-top: 0px;
cursor: pointer;
}
.infiniteSliderContainer .infiniteSliderTrack {
display: flex;
align-items: center;
animation: infiniteScrollSimple 40s linear infinite;
gap: 40px;
}
.infiniteSliderContainer .infiniteSliderTrack .sliderItem {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
white-space: nowrap;
}
.infiniteSliderContainer .infiniteSliderTrack .sliderItem .sliderText {
color: #EFEEEC;
font-size: 10rem;
font-weight: 400;
}
.infiniteSliderContainer .infiniteSliderTrack .sliderItem .sliderText em {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 8px;
}
@media only screen and (max-width: 850px) {
.infiniteSliderContainer .infiniteSliderTrack .sliderItem .sliderText {
font-size: 4rem;
}
.infiniteSliderContainer .infiniteSliderTrack .sliderItem .sliderText em {
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
}
.infiniteSliderContainer .infiniteSliderTrack .sliderItem .sliderImage {
height: 250px;
padding-left: 25px;
padding-right: 25px;
}
@media only screen and (max-width: 850px) {
.infiniteSliderContainer .infiniteSliderTrack .sliderItem .sliderImage {
height: 150px;
padding-left: 15px;
padding-right: 15px;
}
}
@keyframes infiniteScrollSimple {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.sliderTooltip {
position: fixed !important;
z-index: 10000001 !important;
pointer-events: none !important;
}
.sliderTooltip .classButton {
background: #F3BF82 !important;
color: #262626 !important;
border: 2px solid #F3BF82 !important;
}
.sliderTooltip .classButton:hover {
background: transparent !important;
color: #F3BF82 !important;
border: 2px solid #F3BF82 !important;
}
.sliderTooltip .classButton:hover::after {
filter: brightness(0) saturate(100%) invert(85%) sepia(56%) saturate(1178%) hue-rotate(338deg) brightness(98%) contrast(92%);
}
.sliderTooltip .classButton::after {
filter: brightness(0) saturate(100%) invert(13%) sepia(9%) saturate(610%) hue-rotate(314deg) brightness(97%) contrast(90%);
}
.heroSimpleText {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.heroSimpleText {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.heroSimpleText {
padding: 3rem 1rem;
}
}
.heroSimpleText {
margin: 0 auto;
padding-top: 60px;
padding-bottom: 60px;
}
.heroSimpleText .heroContainer {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
}
.heroSimpleText .heroContainer .heroBreadcrumb {
font-size: 0.95rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 1.5rem;
}
.heroSimpleText .heroContainer .heroBreadcrumb .breadcrumb-link {
color: rgba(0, 0, 0, 0.6);
text-decoration: none;
transition: color 0.3s ease;
}
.heroSimpleText .heroContainer .heroBreadcrumb .breadcrumb-link:hover {
color: #E88006;
}
.heroSimpleText .heroContainer .heroBreadcrumb .breadcrumb-current {
color: #E88006;
font-weight: 500;
}
.heroSimpleText .heroContainer .heroBreadcrumb .breadcrumb-separator {
margin: 0 0.5rem;
opacity: 0.5;
color: rgba(0, 0, 0, 0.4);
}
.heroSimpleText .heroContainer .heroContent {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
}
.heroSimpleText .heroContainer .heroContent .heroTitle h1 {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.heroSimpleText .heroContainer .heroContent .heroTitle h1 {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.heroSimpleText .heroContainer .heroContent .heroTitle h1 {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.heroSimpleText .heroContainer .heroContent .heroTitle h1 {
font-size: 2rem;
}
}
.heroSimpleText .heroContainer .heroContent .heroTitle h1 {
margin: 0 !important;
}
.heroSimpleText .heroContainer .heroContent .heroTitle h1 p {
margin: 0 !important;
}
.heroSimpleText .heroContainer .heroContent .heroText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 !important;
}
.wp-block-lazyblock-logoslider {
overflow: visible;
max-width: 100%;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.logoSlider {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.logoSlider {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.logoSlider {
padding: 3rem 1rem;
}
}
.logoSlider {
margin: 0 auto;
padding-top: 60px;
padding-bottom: 0px;
}
.logoSlider .logoSliderContainer {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.logoSlider .logoSliderContainer .logoSliderTitle {
text-align: center;
}
.logoSlider .logoSliderContainer .logoSliderTitle h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.logoSlider .logoSliderContainer .logoSliderTitle h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.logoSlider .logoSliderContainer .logoSliderTitle h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.logoSlider .logoSliderContainer .logoSliderTitle h2 {
font-size: 1.8rem;
}
}
.logoSlider .logoSliderContainer .logoSliderTitle h2 {
margin: 0 !important;
}
.logoSlider .logoSliderContainer .logoSliderLine {
width: 1px;
height: 80px;
background-color: #E88006;
border-radius: 2px;
}
.logos {
overflow: hidden;
padding: 40px 0;
width: 100%;
white-space: nowrap;
position: relative;
padding-top: 0px;
}
.logos:before, .logos:after {
content: "";
position: absolute;
top: 0;
width: 100px;
height: 100%;
z-index: 2;
pointer-events: none;
}
.logos:before {
left: 0;
background: linear-gradient(to left, rgba(239, 238, 236, 0), #efeeec);
}
.logos:after {
right: 0;
background: linear-gradient(to right, rgba(239, 238, 236, 0), #efeeec);
}
.logos .logos-slide {
display: inline-block;
animation: 35s slide infinite linear;
}
.logos .logos-slide img {
height: 60px;
width: auto;
margin: 0 40px;
}
@media only screen and (max-width: 850px) {
.logos .logos-slide img {
height: 40px;
margin: 0 30px;
}
}
.serviceOfferings {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.serviceOfferings {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.serviceOfferings {
padding: 3rem 1rem;
}
}
.serviceOfferings {
margin: 0 auto;
padding-top: 0px !important;
padding-bottom: 80px;
}
.serviceOfferings .serviceOfferingsContainer {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 60px;
overflow: visible;
}
@media only screen and (max-width: 850px) {
.serviceOfferings .serviceOfferingsContainer {
flex-direction: column;
gap: 30px;
}
}
.serviceOfferings .serviceOfferingsContainer .column {
flex: 1;
display: flex;
flex-direction: column;
gap: 40px;
}
.serviceOfferings .serviceOfferingsContainer .column:nth-child(1) {
padding-top: 60px;
}
@media only screen and (max-width: 850px) {
.serviceOfferings .serviceOfferingsContainer .column:nth-child(1) {
padding-top: 0px;
}
}
.serviceOfferings .serviceOfferingsContainer .column:nth-child(2) {
padding-top: 0px;
}
@media only screen and (max-width: 850px) {
.serviceOfferings .serviceOfferingsContainer .column:nth-child(2) {
padding-top: 0px;
}
}
.serviceOfferings .serviceOfferingsContainer .column:nth-child(3) {
padding-top: 40px;
}
@media only screen and (max-width: 850px) {
.serviceOfferings .serviceOfferingsContainer .column:nth-child(3) {
padding-top: 0px;
}
}
.serviceOfferings .serviceOfferingsContainer .serviceCard {
position: relative;
text-decoration: none;
color: inherit;
display: block;
border-radius: 12px;
overflow: visible;
transition: all 0.3s ease;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardBg {
position: absolute;
top: 10%;
right: -30px;
bottom: 0;
width: 100px;
z-index: 1;
border-radius: 8px;
overflow: hidden;
}
@media only screen and (max-width: 850px) {
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardBg {
right: -10px;
}
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardBg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent {
position: relative;
z-index: 2;
background: #E2E0D6;
padding: 0;
min-height: 400px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
border-radius: 12px;
overflow: hidden;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardImage {
width: 100%;
height: 200px;
margin-bottom: 0;
position: relative;
}
@media only screen and (max-width: 850px) {
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardImage {
height: 250px;
}
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardImage img {
width: 100%;
height: 100%;
object-fit: cover;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardText {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
padding: 45px;
}
@media only screen and (max-width: 1105px) {
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardText {
padding: 30px;
}
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardText h4 {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardText h4 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardText h4 {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardText h4 {
font-size: 1.2rem;
}
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardText h4 {
margin: 0 !important;
font-weight: 400;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardText p {
margin: 0 !important;
flex: 1;
color: #454545;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceCardContent .serviceCardText .serviceCardLink {
font-weight: 500;
color: #E88006;
margin-top: auto;
padding-top: 10px;
transition: color 0.3s ease;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceInfoButton {
position: absolute;
bottom: 15px;
right: 15px;
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.95);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceInfoButton em {
font-family: "latienne-pro", serif;
font-style: italic;
font-size: 1.2rem;
color: #262626;
font-weight: 500;
line-height: 1;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceInfoButton:hover {
background: #EFEEEC;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceInfoButton.active {
background: #E88006;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceInfoButton.active em {
color: #EFEEEC;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceInfoPopout {
position: absolute;
bottom: 60px;
right: 15px;
max-width: 280px;
min-width: 200px;
background: rgba(38, 38, 38, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
padding: 0;
z-index: 20;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.95);
transform-origin: bottom right;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
pointer-events: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceInfoPopout::after {
content: "";
position: absolute;
bottom: -8px;
right: 12px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(38, 38, 38, 0.95);
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceInfoPopout.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceInfoPopout .serviceInfoContent {
padding: 16px 20px;
color: #EFEEEC;
font-size: 0.95rem;
line-height: 1.5;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard .serviceInfoPopout .serviceInfoContent p {
margin: 0;
color: #EFEEEC !important;
opacity: 0.95;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard:hover:not(.getInTouchCard) {
transform: translateY(-5px);
}
.serviceOfferings .serviceOfferingsContainer .serviceCard:hover:not(.getInTouchCard) .serviceCardContent {
background: rgb(38, 38, 38);
}
.serviceOfferings .serviceOfferingsContainer .serviceCard:hover:not(.getInTouchCard) .serviceCardContent .serviceCardText h4 {
color: #EFEEEC;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard:hover:not(.getInTouchCard) .serviceCardContent .serviceCardText p {
color: rgba(255, 255, 255, 0.8);
}
.serviceOfferings .serviceOfferingsContainer .serviceCard:hover:not(.getInTouchCard) .serviceCardContent .serviceCardText .serviceCardLink {
color: #E88006;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard.getInTouchCard .serviceCardContent {
background: #DCD0DA;
justify-content: center;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard.getInTouchCard .serviceCardContent .serviceCardText {
flex: none;
justify-content: center;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard.getInTouchCard .serviceCardContent .serviceCardText .classButton {
width: fit-content;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard.getInTouchCard:hover {
transform: translateY(-5px);
}
.serviceOfferings .serviceOfferingsContainer .serviceCard.getInTouchCard:hover .serviceCardContent {
background: #DCD0DA;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard.getInTouchCard:hover .serviceCardContent .serviceCardText h4 {
color: #262626;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard.getInTouchCard:hover .serviceCardContent .serviceCardText p {
color: #262626;
}
.serviceOfferings .serviceOfferingsContainer .serviceCard.getInTouchCard:hover .serviceCardContent .serviceCardText .classButton {
background: transparent !important;
border: 2px solid #262626 !important;
color: #262626 !important;
transform: translateY(-2px);
}
.serviceOfferings .serviceOfferingsContainer .serviceCard.getInTouchCard:hover .serviceCardContent .serviceCardText .classButton::after {
filter: invert(1);
transform: translateX(4px);
}
.page-id-509 .heroGeneral {
margin-bottom: 0px !important;
}
.heroGeneral {
background-color: #262626;
color: #EFEEEC;
position: relative;
overflow: hidden;
border-radius: 12px;
display: flex;
align-items: center;
margin: 60px 0;
}
@media only screen and (max-width: 1150px) {
.heroGeneral {
margin: 3rem 0;
}
}
@media only screen and (max-width: 850px) {
.heroGeneral {
margin: 2rem 0;
}
}
.heroGeneral {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
max-width: 1450px;
}
@media only screen and (max-width: 1490px) {
.heroGeneral {
margin-left: 20px;
margin-right: 20px;
}
}
@media only screen and (max-width: 850px) {
.heroGeneral {
margin-left: 1rem;
margin-right: 1rem;
min-height: 300px;
border-radius: 8px;
}
}
.heroGeneral .heroContainer {
margin: 0 auto;
position: relative;
z-index: 2;
width: 100%;
padding: 75px 75px;
}
@media only screen and (max-width: 1150px) {
.heroGeneral .heroContainer {
padding: 55px 55px;
}
}
@media only screen and (max-width: 850px) {
.heroGeneral .heroContainer {
padding: 2rem;
}
}
.heroGeneral .heroContainer .heroBreadcrumb {
margin-bottom: 1.5rem;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
@media only screen and (max-width: 850px) {
.heroGeneral .heroContainer .heroBreadcrumb {
margin-bottom: 1rem;
font-size: 0.9rem;
}
}
.heroGeneral .heroContainer .heroBreadcrumb .breadcrumb-link {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
}
.heroGeneral .heroContainer .heroBreadcrumb .breadcrumb-link:hover {
color: #E88006;
}
.heroGeneral .heroContainer .heroBreadcrumb .breadcrumb-current {
color: #E88006;
font-weight: 500;
}
.heroGeneral .heroContainer .heroBreadcrumb .breadcrumb-separator {
margin: 0 0.5rem;
opacity: 0.5;
color: rgba(255, 255, 255, 0.5);
}
.heroGeneral .heroContainer .heroContent {
max-width: 600px;
position: relative;
z-index: 3;
}
@media only screen and (max-width: 963px) {
.heroGeneral .heroContainer .heroContent {
max-width: 100%;
}
}
.heroGeneral .heroContainer .heroContent .heroTitle {
margin-bottom: 1.5rem;
}
@media only screen and (max-width: 850px) {
.heroGeneral .heroContainer .heroContent .heroTitle {
margin-bottom: 1rem;
}
}
.heroGeneral .heroContainer .heroContent .heroTitle h1 {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.heroGeneral .heroContainer .heroContent .heroTitle h1 {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.heroGeneral .heroContainer .heroContent .heroTitle h1 {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.heroGeneral .heroContainer .heroContent .heroTitle h1 {
font-size: 2rem;
}
}
.heroGeneral .heroContainer .heroContent .heroTitle h1 {
margin: 0;
color: #EFEEEC;
}
.heroGeneral .heroContainer .heroContent .heroTitle h1 p {
margin: 0 !important;
}
.heroGeneral .heroContainer .heroContent .heroText {
margin-bottom: 0;
width: 80%;
}
@media only screen and (max-width: 963px) {
.heroGeneral .heroContainer .heroContent .heroText {
margin-bottom: 0;
width: 100%;
}
}
.heroGeneral .heroContainer .heroContent .heroText p {
font-size: 1rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
margin: 0 0 1em 0;
}
@media only screen and (max-width: 850px) {
.heroGeneral .heroContainer .heroContent .heroText p {
font-size: 1rem;
}
}
.heroGeneral .heroContainer .heroContent .heroText p:last-child {
margin-bottom: 0;
}
.heroGeneral .heroContainer .heroContent .heroButton {
margin-top: 24px;
}
.heroGeneral .heroContainer .heroContent .heroButton .classButton {
background: transparent;
color: #EFEEEC;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
}
.heroGeneral .heroContainer .heroContent .heroButton .classButton::after {
filter: none;
}
.heroGeneral .heroContainer .heroContent .heroButton .classButton:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.6) !important;
color: #EFEEEC !important;
}
.heroGeneral .heroContainer .heroContent .heroButton .classButton:hover::after {
filter: none;
}
.heroGeneral .heroContainer .heroImage {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 99999;
height: 100%;
object-fit: contain;
object-position: center;
border-radius: 0 12px 12px 0;
}
@media only screen and (max-width: 1200px) {
.heroGeneral .heroContainer .heroImage {
right: -30px;
}
}
@media only screen and (max-width: 1150px) {
.heroGeneral .heroContainer .heroImage {
right: -50px;
}
}
@media only screen and (max-width: 1100px) {
.heroGeneral .heroContainer .heroImage {
right: -70px;
}
}
@media only screen and (max-width: 1062px) {
.heroGeneral .heroContainer .heroImage {
right: -90px;
}
}
@media only screen and (max-width: 1020px) {
.heroGeneral .heroContainer .heroImage {
right: -110px;
}
}
@media only screen and (max-width: 1003px) {
.heroGeneral .heroContainer .heroImage {
right: -130px;
}
}
@media only screen and (max-width: 980px) {
.heroGeneral .heroContainer .heroImage {
right: -150px;
}
}
@media only screen and (max-width: 963px) {
.heroGeneral .heroContainer .heroImage {
display: none;
}
}
.heroGeneral.black .heroBreadcrumb {
color: rgba(0, 0, 0, 0.7);
}
.heroGeneral.black .heroBreadcrumb .breadcrumb-link {
color: rgba(0, 0, 0, 0.7);
}
.heroGeneral.black .heroBreadcrumb .breadcrumb-link:hover {
color: #E88006;
}
.heroGeneral.black .heroBreadcrumb .breadcrumb-current {
color: #262626;
}
.heroGeneral.black .heroBreadcrumb .breadcrumb-separator {
color: rgba(0, 0, 0, 0.5);
}
.heroGeneral.black .heroContent .heroTitle h1 {
color: #262626;
}
.heroGeneral.black .heroContent .heroText p {
color: #262626;
}
.heroGeneral.black .heroContent .heroButton .classButton {
color: #262626 !important;
border-color: rgba(0, 0, 0, 0.3) !important;
}
.heroGeneral.black .heroContent .heroButton .classButton::after {
filter: brightness(0);
}
.heroGeneral.black .heroContent .heroButton .classButton:hover {
background: rgba(0, 0, 0, 0.1) !important;
border-color: rgba(0, 0, 0, 0.6) !important;
color: #262626 !important;
}
.heroGeneral.black .heroContent .heroButton .classButton:hover::after {
filter: brightness(0);
}
.simpleTwoColWithImage {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.simpleTwoColWithImage {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.simpleTwoColWithImage {
padding: 3rem 1rem;
}
}
.simpleTwoColWithImage {
position: relative;
}
@media (max-width: 850px) {
.simpleTwoColWithImage {
padding-bottom: 20px !important;
}
}
.simpleTwoColWithImage .simpleTwoColContainer {
display: flex;
align-items: center;
gap: 60px;
position: relative;
}
@media (max-width: 850px) {
.simpleTwoColWithImage .simpleTwoColContainer {
flex-direction: column;
gap: 10px;
text-align: center;
align-items: center;
}
}
.simpleTwoColWithImage .simpleTwoColLeft {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (max-width: 850px) {
.simpleTwoColWithImage .simpleTwoColLeft {
gap: 0.5rem;
}
}
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMiniTitle {
display: flex;
align-items: center;
gap: 8px;
}
@media (max-width: 850px) {
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMiniTitle {
justify-content: center;
}
}
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMiniTitle .simpleTwoColMiniTitleIcon {
height: 16px;
width: auto;
}
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMiniTitle h5 {
font-size: 1rem;
line-height: 1.5;
font-weight: 300;
}
@media only screen and (max-width: 1250px) {
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMiniTitle h5 {
font-size: 0.9rem;
}
}
@media only screen and (max-width: 1100px) {
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMiniTitle h5 {
font-size: 0.8rem;
}
}
@media only screen and (max-width: 850px) {
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMiniTitle h5 {
font-size: 1.2rem;
}
}
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMiniTitle h5 {
margin: 0;
}
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMainTitle h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMainTitle h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMainTitle h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMainTitle h2 {
font-size: 1.8rem;
}
}
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMainTitle h2 {
margin: 0;
}
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColMainTitle h2 p {
margin: 0 !important;
}
.simpleTwoColWithImage .simpleTwoColLeft .simpleTwoColSupportingText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin-top: 0;
}
.simpleTwoColWithImage .simpleTwoColRight {
flex: 1;
display: flex;
flex-direction: column;
}
.simpleTwoColWithImage .simpleTwoColRight .simpleTwoColImageWrapper {
position: relative;
border-radius: 12px;
overflow: hidden;
}
.simpleTwoColWithImage .simpleTwoColRight .simpleTwoColImageWrapper .simpleTwoColImage {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
.simpleTwoColWithImage .simpleTwoColAnimatedSvg {
margin: 8px 0 5px 0;
pointer-events: none;
opacity: 0;
transform: translateY(30px) scale(0.95);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 850px) {
.simpleTwoColWithImage .simpleTwoColAnimatedSvg {
margin: 5px 0 3px 0;
text-align: center;
}
}
.simpleTwoColWithImage .simpleTwoColAnimatedSvg.drawLines {
opacity: 1;
transform: translateY(0) scale(1);
}
.simpleTwoColWithImage .simpleTwoColAnimatedSvg svg {
width: 100%;
filter: drop-shadow(0 2px 8px rgba(232, 128, 6, 0.15));
margin-left: 0;
display: block;
}
@media (max-width: 850px) {
.simpleTwoColWithImage .simpleTwoColAnimatedSvg svg {
max-width: 350px;
}
}
.simpleTwoColWithImage .simpleTwoColAnimatedSvg svg path {
stroke: #E88006;
stroke-width: 1.5;
fill: none;
opacity: 0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.simpleTwoColWithImage .simpleTwoColAnimatedSvg svg path:nth-child(1) {
transition-delay: 0.2s;
}
.simpleTwoColWithImage .simpleTwoColAnimatedSvg svg path:nth-child(2) {
transition-delay: 0.4s;
}
.simpleTwoColWithImage .simpleTwoColAnimatedSvg svg path:nth-child(3) {
transition-delay: 0.6s;
}
.simpleTwoColWithImage .simpleTwoColAnimatedSvg svg path:nth-child(4) {
transition-delay: 0.8s;
}
.simpleTwoColWithImage .simpleTwoColAnimatedSvg svg.paths-visible path {
opacity: 0.85;
stroke-dashoffset: 0;
}
.simpleTwoColWithImage .simpleTwoColAnimatedSvg svg.breathing {
animation: svgBreathe 4s ease-in-out infinite;
}
.simpleTwoColWithImage.flipped .simpleTwoColContainer {
flex-direction: row-reverse;
}
@media (max-width: 850px) {
.simpleTwoColWithImage.flipped .simpleTwoColContainer {
flex-direction: column;
}
}
@keyframes infiniteScrollSlider {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.generalTextSlider {
width: 100%;
overflow: hidden;
background: #EFEEEC;
padding: 20px 0;
margin: 60px 0;
}
@media only screen and (max-width: 1150px) {
.generalTextSlider {
margin: 3rem 0;
}
}
@media only screen and (max-width: 850px) {
.generalTextSlider {
margin: 2rem 0;
}
}
.generalTextSlider {
margin-bottom: 0px !important;
}
@media only screen and (max-width: 850px) {
.generalTextSlider {
margin-top: 0px !important;
}
}
.generalTextSlider .generalTextSliderTrack {
display: flex;
align-items: center;
animation: infiniteScrollSlider 60s linear infinite;
gap: 40px;
}
@media only screen and (max-width: 850px) {
.generalTextSlider .generalTextSliderTrack {
animation: infiniteScrollSlider 20s linear infinite;
}
}
.generalTextSlider .generalTextSliderTrack .sliderItem {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
white-space: nowrap;
}
.generalTextSlider .generalTextSliderTrack .sliderItem .sliderText {
color: #262626;
font-size: 10rem;
font-weight: 400;
line-height: 1;
}
.generalTextSlider .generalTextSliderTrack .sliderItem .sliderText em, .generalTextSlider .generalTextSliderTrack .sliderItem .sliderText i {
font-style: italic;
text-decoration: none;
}
@media only screen and (max-width: 1200px) {
.generalTextSlider .generalTextSliderTrack .sliderItem .sliderText {
font-size: 8rem;
}
}
@media only screen and (max-width: 850px) {
.generalTextSlider .generalTextSliderTrack .sliderItem .sliderText {
font-size: 4rem;
}
}
.generalTextSlider .generalTextSliderTrack .sliderItem .sliderImage {
height: 200px;
padding-left: 25px;
padding-right: 25px;
}
@media only screen and (max-width: 850px) {
.generalTextSlider .generalTextSliderTrack .sliderItem .sliderImage {
height: 150px;
padding-left: 15px;
padding-right: 15px;
}
}
.accordionClients {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.accordionClients {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.accordionClients {
padding: 3rem 1rem;
}
}
.accordionClients .accordionClientsContainer {
margin: 0 auto;
}
.accordionClients .accordionItem {
position: relative;
}
.accordionClients .accordionItem .accordionHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
cursor: pointer;
transition: all 0.3s ease;
}
.accordionClients .accordionItem .accordionHeader h3 {
margin: 0;
font-size: 4rem;
}
@media only screen and (max-width: 1100px) {
.accordionClients .accordionItem .accordionHeader h3 {
font-size: 3rem;
}
}
@media only screen and (max-width: 1000px) {
.accordionClients .accordionItem .accordionHeader h3 {
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
}
@media only screen and (max-width: 1000px) and (max-width: 1250px) {
.accordionClients .accordionItem .accordionHeader h3 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 1000px) and (max-width: 1100px) {
.accordionClients .accordionItem .accordionHeader h3 {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 1000px) and (max-width: 850px) {
.accordionClients .accordionItem .accordionHeader h3 {
font-size: 1.5rem;
}
}
.accordionClients .accordionItem .accordionHeader h3 {
line-height: 1.4;
font-weight: 400;
}
.accordionClients .accordionItem .accordionHeader .accordionToggle {
position: relative;
width: 26px;
height: 25px;
margin-bottom: -170px;
}
@media only screen and (max-width: 1040px) {
.accordionClients .accordionItem .accordionHeader .accordionToggle {
margin-bottom: 0;
}
}
.accordionClients .accordionItem .accordionHeader .accordionToggle svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.accordionClients .accordionItem .accordionHeader .accordionToggle svg path {
stroke: #E88006;
stroke-width: 2;
fill: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: center;
}
.accordionClients .accordionItem .accordionHeader .accordionToggle svg .vertical-path {
opacity: 1;
transform: scaleY(1);
}
.accordionClients .accordionItem .accordionHeader .accordionToggle svg .horizontal-left {
transform: translateX(0);
opacity: 1;
}
.accordionClients .accordionItem .accordionHeader .accordionToggle svg .horizontal-right {
transform: translateX(0);
opacity: 1;
}
.accordionClients .accordionItem .accordionContent {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
width: 70%;
}
@media only screen and (max-width: 950px) {
.accordionClients .accordionItem .accordionContent {
width: 100%;
}
}
.accordionClients .accordionItem .accordionContent .accordionClients {
padding-top: 1rem;
padding-bottom: 3rem;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectHeaders {
display: flex;
padding: 1rem 0;
margin-bottom: 1rem;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectHeaders .clientHeader,
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectHeaders .projectHeader {
font-weight: 600;
color: #E88006;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectHeaders .clientHeader {
flex: 1;
padding-right: 1.5rem;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectHeaders .projectHeader {
flex: 1;
padding-left: 1.5rem;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow {
padding: 1rem 0;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow[data-case-study-url] {
cursor: pointer;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectLink {
display: flex;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
cursor: pointer;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectLink.hasHover:hover {
opacity: 0.7;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectLink.hasHover .clientName,
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectLink.hasHover .projectTitle {
text-decoration: underline;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectLink .clientName,
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectLink .projectTitle {
flex: 1;
line-height: 1.5;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectLink .clientName {
padding-right: 1.5rem;
font-weight: 500;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectLink .projectTitle {
padding-left: 1.5rem;
color: #262626;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectContent {
display: flex;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectContent .clientName,
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectContent .projectTitle {
flex: 1;
line-height: 1.5;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectContent .clientName {
padding-right: 1.5rem;
font-weight: 500;
}
.accordionClients .accordionItem .accordionContent .accordionClients .clientProjectRow .clientProjectContent .projectTitle {
padding-left: 1.5rem;
color: #262626;
}
.accordionClients .accordionItem .accordionSeparator {
width: 100%;
transition: transform 0.4s ease-out;
}
.accordionClients .accordionItem .accordionSeparator img {
width: 100%;
height: auto;
display: block;
}
.accordionClients .accordionItem.active .accordionHeader .accordionToggle svg .vertical-path {
opacity: 0;
transform: scaleY(0);
}
.accordionClients .accordionItem.active .accordionHeader .accordionToggle svg .horizontal-left {
transform: translateX(3.8px);
}
.accordionClients .accordionItem.active .accordionHeader .accordionToggle svg .horizontal-right {
transform: translateX(-3.8px);
}
.accordionClients .accordionItem.active .accordionContent {
max-height: 500px;
}
.accordionClients .accordionItem:last-child .accordionSeparator {
display: none;
}
.serviceHeroImage {
width: 100%;
max-width: 100%;
max-height: 500px;
margin: 0;
padding: 0;
overflow: hidden;
}
@media (max-width: 850px) {
.serviceHeroImage {
max-height: 350px;
}
}
.serviceHeroImage .serviceHeroImg {
width: 100%;
height: 100%;
max-height: 500px;
display: block;
object-fit: cover;
object-position: center;
}
@media (max-width: 850px) {
.serviceHeroImage .serviceHeroImg {
max-height: 350px;
}
}
.serviceBackButton {
flex-direction: row-reverse;
}
.serviceBackButton::after {
transform: rotate(180deg);
margin-left: 0;
margin-right: 0.5rem;
}
@media (max-width: 850px) {
.serviceBackButton::after {
margin-left: 0;
margin-right: 4px;
}
}
.serviceBackButton:hover::after {
transform: rotate(180deg) translateX(-4px);
}
.caseStudyHero {
margin: 60px 0;
}
@media only screen and (max-width: 1150px) {
.caseStudyHero {
margin: 3rem 0;
}
}
@media only screen and (max-width: 850px) {
.caseStudyHero {
margin: 2rem 0;
}
}
.caseStudyHero {
margin-left: auto;
margin-right: auto;
max-width: 1450px;
border-radius: 12px;
padding: 60px 0 60px 0;
margin-bottom: 0px !important;
}
@media only screen and (max-width: 1490px) {
.caseStudyHero {
margin-left: 20px;
margin-right: 20px;
}
}
@media only screen and (max-width: 850px) {
.caseStudyHero {
margin-left: 1rem;
margin-right: 1rem;
padding: 40px 20px 40px 20px;
border-radius: 8px;
}
}
.caseStudyHero .caseStudyHeroContainer {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.caseStudyHero .caseStudyHeroContainer {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudyHero .caseStudyHeroContainer {
padding: 3rem 1rem;
}
}
.caseStudyHero .caseStudyHeroContainer {
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex;
gap: 80px;
align-items: center;
}
@media (max-width: 1150px) {
.caseStudyHero .caseStudyHeroContainer {
gap: 60px;
}
}
@media (max-width: 850px) {
.caseStudyHero .caseStudyHeroContainer {
flex-direction: column;
gap: 40px;
}
}
.caseStudyHero .caseStudyHeroLeft {
flex: 1;
width: 100%;
}
.caseStudyHero .caseStudyBreadcrumb {
margin-bottom: 2rem;
font-size: 0.95rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.caseStudyHero .caseStudyBreadcrumb .breadcrumb-link {
color: rgba(0, 0, 0, 0.6);
text-decoration: none;
transition: color 0.3s ease;
}
.caseStudyHero .caseStudyBreadcrumb .breadcrumb-link:hover {
color: #E88006;
}
.caseStudyHero .caseStudyBreadcrumb .breadcrumb-current {
color: #E88006;
font-weight: 500;
}
.caseStudyHero .caseStudyBreadcrumb .breadcrumb-separator {
margin: 0 0.5rem;
opacity: 0.5;
color: rgba(0, 0, 0, 0.4);
}
.caseStudyHero .caseStudyHeroTitle {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.caseStudyHero .caseStudyHeroTitle {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.caseStudyHero .caseStudyHeroTitle {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudyHero .caseStudyHeroTitle {
font-size: 2rem;
}
}
.caseStudyHero .caseStudyHeroTitle {
margin: 0 0 2rem 0;
color: #262626;
}
.caseStudyHero .caseStudyHeroTags {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.caseStudyHero .caseStudyHeroTags .caseStudyHeroTag {
padding: 8px 16px;
border-radius: 4px;
font-weight: 300;
background: #FAE6CD;
font-size: 0.95rem;
}
@media (max-width: 850px) {
.caseStudyHero .caseStudyHeroTags .caseStudyHeroTag {
padding: 6px 12px;
font-size: 0.9rem;
}
}
.caseStudyHero .caseStudyHeroRight {
flex: 0 0 45%;
}
@media (max-width: 850px) {
.caseStudyHero .caseStudyHeroRight {
flex: none;
width: 100%;
}
}
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
aspect-ratio: 4/3;
}
@media (max-width: 850px) {
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage {
aspect-ratio: 16/9;
}
}
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage .caseStudyHeroImg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage .caseStudyHeroInfoButton {
position: absolute;
bottom: 15px;
right: 15px;
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.95);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage .caseStudyHeroInfoButton em {
font-family: "latienne-pro", serif;
font-style: italic;
font-size: 1.2rem;
color: #262626;
font-weight: 500;
line-height: 1;
}
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage .caseStudyHeroInfoButton:hover {
background: #EFEEEC;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage .caseStudyHeroInfoButton.active {
background: #E88006;
}
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage .caseStudyHeroInfoButton.active em {
color: #EFEEEC;
}
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage .caseStudyHeroInfoPopout {
position: absolute;
bottom: 60px;
right: 15px;
max-width: 280px;
min-width: 200px;
background: rgba(38, 38, 38, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transform: scale(0.9) translateY(10px);
transform-origin: bottom right;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 100;
}
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage .caseStudyHeroInfoPopout::after {
content: "";
position: absolute;
bottom: -6px;
right: 15px;
width: 12px;
height: 12px;
background: rgba(38, 38, 38, 0.95);
transform: rotate(45deg);
}
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage .caseStudyHeroInfoPopout.active {
opacity: 1;
visibility: visible;
transform: scale(1) translateY(0);
}
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage .caseStudyHeroInfoPopout p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
color: rgba(255, 255, 255, 0.9) !important;
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
}
@media (max-width: 850px) {
.caseStudyHero .caseStudyHeroRight .caseStudyHeroImage .caseStudyHeroInfoPopout {
right: 10px;
left: 10px;
max-width: none;
min-width: auto;
}
}
.caseStudyDetails {
margin-bottom: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.caseStudyDetails h3 {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.caseStudyDetails h3 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.caseStudyDetails h3 {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudyDetails h3 {
font-size: 1.2rem;
}
}
.caseStudyDetails h3 {
margin: 0 0 2rem 0;
font-weight: 300;
}
.caseStudyDetails .caseStudyDetail {
margin-bottom: 1.5rem;
}
.caseStudyDetails .caseStudyDetail:last-child {
margin-bottom: 0;
}
.caseStudyDetails .caseStudyDetail .caseStudyDetailLabel {
font-weight: 500;
font-size: 0.95rem;
margin: 0 0 0.5rem 0;
color: #262626;
}
.caseStudyDetails .caseStudyDetail .caseStudyDetailValue {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0;
font-weight: 300;
}
.caseStudyShare {
margin-bottom: 3rem;
}
.caseStudyShare h3 {
margin-bottom: 1.5rem;
}
.caseStudyShare .shareLinks {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.caseStudyShare .shareLinks .shareLink {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f5f5f5;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
}
.caseStudyShare .shareLinks .shareLink:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.caseStudyShare .shareLinks .shareLink svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.caseStudyShare .shareLinks .shareLink.linkedin:hover {
background: #0077b5;
color: white;
}
.caseStudyShare .shareLinks .shareLink.twitter:hover {
background: #000;
color: white;
}
.caseStudyShare .shareLinks .shareLink.facebook:hover {
background: #1877f2;
color: white;
}
.caseStudyShare .shareLinks .shareLink.email:hover {
background: #34495e;
color: white;
}
.gutenColumns {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.gutenColumns {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.gutenColumns {
padding: 3rem 1rem;
}
}
.gutenColumns {
display: flex;
gap: 140px !important;
align-items: flex-start;
}
@media (max-width: 1090px) {
.gutenColumns {
gap: 80px !important;
}
}
@media (max-width: 850px) {
.gutenColumns {
flex-direction: column;
gap: 2rem !important;
}
}
.gutenColumns .wp-block-column:first-child {
flex: 1;
}
.gutenColumns .wp-block-column:first-child h1, .gutenColumns .wp-block-column:first-child h2, .gutenColumns .wp-block-column:first-child h3, .gutenColumns .wp-block-column:first-child h4, .gutenColumns .wp-block-column:first-child h5, .gutenColumns .wp-block-column:first-child h6 {
margin: 2rem 0 1.5rem 0;
}
.gutenColumns .wp-block-column:first-child h1:first-child, .gutenColumns .wp-block-column:first-child h2:first-child, .gutenColumns .wp-block-column:first-child h3:first-child, .gutenColumns .wp-block-column:first-child h4:first-child, .gutenColumns .wp-block-column:first-child h5:first-child, .gutenColumns .wp-block-column:first-child h6:first-child {
margin-top: 0;
}
.gutenColumns .wp-block-column:first-child h1 {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.gutenColumns .wp-block-column:first-child h1 {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.gutenColumns .wp-block-column:first-child h1 {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.gutenColumns .wp-block-column:first-child h1 {
font-size: 2rem;
}
}
.gutenColumns .wp-block-column:first-child h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.gutenColumns .wp-block-column:first-child h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.gutenColumns .wp-block-column:first-child h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.gutenColumns .wp-block-column:first-child h2 {
font-size: 1.8rem;
}
}
.gutenColumns .wp-block-column:first-child h3 {
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.gutenColumns .wp-block-column:first-child h3 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 1100px) {
.gutenColumns .wp-block-column:first-child h3 {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 850px) {
.gutenColumns .wp-block-column:first-child h3 {
font-size: 1.5rem;
}
}
.gutenColumns .wp-block-column:first-child h4 {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.gutenColumns .wp-block-column:first-child h4 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.gutenColumns .wp-block-column:first-child h4 {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.gutenColumns .wp-block-column:first-child h4 {
font-size: 1.2rem;
}
}
.gutenColumns .wp-block-column:first-child p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 0 1.5rem 0;
}
.gutenColumns .wp-block-column:first-child p:last-child {
margin-bottom: 0;
}
.gutenColumns .wp-block-column:first-child img {
width: 100% !important;
height: auto !important;
border-radius: 8px;
margin: 1.5rem 0 3rem 0;
display: block;
}
.gutenColumns .wp-block-column:first-child a:not(.classButton) {
color: inherit;
text-decoration: none;
border-bottom: 1px solid #262626;
transition: color 0.3s ease, border-color 0.3s ease;
}
.gutenColumns .wp-block-column:first-child a:not(.classButton):hover {
color: #E88006;
border-bottom-color: #E88006;
}
.gutenColumns .wp-block-column:first-child ul, .gutenColumns .wp-block-column:first-child ol {
margin: 1.5rem 0;
padding-left: 2rem;
}
.gutenColumns .wp-block-column:first-child ul li, .gutenColumns .wp-block-column:first-child ol li {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin-bottom: 1rem;
}
.gutenColumns .wp-block-column:first-child blockquote {
border-left: 4px solid #E88006;
padding-left: 1.5rem;
margin: 3rem 0;
font-style: italic;
}
.gutenColumns .wp-block-column:first-child blockquote p {
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.gutenColumns .wp-block-column:first-child blockquote p {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 1100px) {
.gutenColumns .wp-block-column:first-child blockquote p {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 850px) {
.gutenColumns .wp-block-column:first-child blockquote p {
font-size: 1.5rem;
}
}
.gutenColumns .wp-block-column:first-child blockquote p {
margin: 0 0 2rem 0 !important;
font-style: normal !important;
line-height: 1.1 !important;
opacity: 1;
}
.gutenColumns .wp-block-column:first-child .wp-block-image {
margin: 1.5rem 0 3rem 0 !important;
width: 100% !important;
}
.gutenColumns .wp-block-column:first-child .wp-block-image img {
width: 100% !important;
height: auto !important;
border-radius: 8px;
}
.gutenColumns .wp-block-column:first-child .wp-block-image figcaption {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
font-size: 0.95rem;
margin-top: 0.5rem;
opacity: 0.7;
}
.gutenColumns .wp-block-column:first-child figure {
margin: 1.5rem 0 3rem 0;
width: 100% !important;
}
.gutenColumns .wp-block-column:first-child figure img {
width: 100% !important;
height: auto !important;
}
.gutenColumns .wp-block-column:first-child strong {
font-weight: 600;
}
.gutenColumns .wp-block-column:first-child em {
font-style: italic;
}
@media (max-width: 850px) {
.gutenColumns .gutenSidebar {
flex: none;
width: 100%;
}
}
.gutenColumns .gutenSidebar h2, .gutenColumns .gutenSidebar h3, .gutenColumns .gutenSidebar h4 {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.gutenColumns .gutenSidebar h2, .gutenColumns .gutenSidebar h3, .gutenColumns .gutenSidebar h4 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.gutenColumns .gutenSidebar h2, .gutenColumns .gutenSidebar h3, .gutenColumns .gutenSidebar h4 {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.gutenColumns .gutenSidebar h2, .gutenColumns .gutenSidebar h3, .gutenColumns .gutenSidebar h4 {
font-size: 1.2rem;
}
}
.gutenColumns .gutenSidebar h2, .gutenColumns .gutenSidebar h3, .gutenColumns .gutenSidebar h4 {
margin: 0 0 1.5rem 0;
}
.gutenColumns .gutenSidebar p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 0 1.5rem 0;
}
.gutenColumns .gutenSidebar p:last-child {
margin-bottom: 0;
}
.gutenColumns .gutenSidebar img {
width: 100% !important;
height: auto !important;
border-radius: 8px;
margin: 1.5rem 0 3rem 0;
display: block;
}
.gutenColumns .gutenSidebar .wp-block-image {
width: 100% !important;
margin: 1.5rem 0 3rem 0 !important;
}
.gutenColumns .gutenSidebar .wp-block-image img {
width: 100% !important;
height: auto !important;
}
.gutenColumns .gutenSidebar figure {
width: 100% !important;
margin: 1.5rem 0 3rem 0;
}
.gutenColumns .gutenSidebar figure img {
width: 100% !important;
height: auto !important;
}
.caseStudyContentContainer {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.caseStudyContentContainer {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudyContentContainer {
padding: 3rem 1rem;
}
}
.caseStudyContentContainer .caseStudyContentInner {
display: flex;
gap: 3rem;
align-items: stretch;
}
@media (max-width: 850px) {
.caseStudyContentContainer .caseStudyContentInner {
flex-direction: column;
gap: 2rem;
}
}
.caseStudySidebar {
flex: 0 0 30%;
display: flex;
}
@media (max-width: 850px) {
.caseStudySidebar {
flex: none;
width: 100%;
}
}
.caseStudySidebar .caseStudySidebarContent {
display: flex;
flex-direction: column;
flex: 1;
}
.caseStudySidebar .caseStudySidebarContent h3 {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.caseStudySidebar .caseStudySidebarContent h3 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.caseStudySidebar .caseStudySidebarContent h3 {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudySidebar .caseStudySidebarContent h3 {
font-size: 1.2rem;
}
}
.caseStudySidebar .caseStudySidebarContent h3 {
margin: 0 0 1.5rem 0;
}
.caseStudySidebar .caseStudySidebarContent p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0;
}
.caseStudySidebar .caseStudySidebarContent .caseStudyShare {
margin-top: auto;
}
.caseStudyContentMain {
flex: 1;
}
.caseStudyContentMain h1, .caseStudyContentMain h2, .caseStudyContentMain h3, .caseStudyContentMain h4, .caseStudyContentMain h5, .caseStudyContentMain h6 {
margin: 2rem 0 1.5rem 0;
}
.caseStudyContentMain h1:first-child, .caseStudyContentMain h2:first-child, .caseStudyContentMain h3:first-child, .caseStudyContentMain h4:first-child, .caseStudyContentMain h5:first-child, .caseStudyContentMain h6:first-child {
margin-top: 0;
}
.caseStudyContentMain h1 {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.caseStudyContentMain h1 {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.caseStudyContentMain h1 {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudyContentMain h1 {
font-size: 2rem;
}
}
.caseStudyContentMain h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.caseStudyContentMain h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.caseStudyContentMain h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudyContentMain h2 {
font-size: 1.8rem;
}
}
.caseStudyContentMain h3 {
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.caseStudyContentMain h3 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 1100px) {
.caseStudyContentMain h3 {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudyContentMain h3 {
font-size: 1.5rem;
}
}
.caseStudyContentMain h4 {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.caseStudyContentMain h4 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.caseStudyContentMain h4 {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudyContentMain h4 {
font-size: 1.2rem;
}
}
.caseStudyContentMain p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 0 1.5rem 0;
}
.caseStudyContentMain p:last-child {
margin-bottom: 0;
}
.caseStudyContentMain img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 1.5rem 0;
}
.caseStudyContentMain ul, .caseStudyContentMain ol {
margin: 1.5rem 0;
padding-left: 2rem;
}
.caseStudyContentMain ul li, .caseStudyContentMain ol li {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin-bottom: 1rem;
}
.caseStudyContentMain blockquote {
border-left: 4px solid #E88006;
padding-left: 1.5rem;
margin: 2rem 0;
font-style: italic;
}
.caseStudyContentMain blockquote p {
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.caseStudyContentMain blockquote p {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 1100px) {
.caseStudyContentMain blockquote p {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudyContentMain blockquote p {
font-size: 1.5rem;
}
}
.caseStudyContentMain blockquote p {
margin: 0 0 2rem 0 !important;
font-style: normal !important;
line-height: 1.1 !important;
opacity: 1;
}
.twoCardsAnimatedImages {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.twoCardsAnimatedImages {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.twoCardsAnimatedImages {
padding: 3rem 1rem;
}
}
.twoCardsAnimatedImages {
text-align: center;
padding-bottom: 100px !important;
}
@media (max-width: 850px) {
.twoCardsAnimatedImages {
padding-bottom: 30px !important;
}
}
.twoCardsAnimatedImages .twoCardsMiniTitle {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 1.5rem;
}
.twoCardsAnimatedImages .twoCardsMiniTitle .twoCardsMiniIcon {
height: 16px;
width: auto;
}
.twoCardsAnimatedImages .twoCardsMiniTitle h5 {
font-size: 1rem;
line-height: 1.5;
font-weight: 300;
}
@media only screen and (max-width: 1250px) {
.twoCardsAnimatedImages .twoCardsMiniTitle h5 {
font-size: 0.9rem;
}
}
@media only screen and (max-width: 1100px) {
.twoCardsAnimatedImages .twoCardsMiniTitle h5 {
font-size: 0.8rem;
}
}
@media only screen and (max-width: 850px) {
.twoCardsAnimatedImages .twoCardsMiniTitle h5 {
font-size: 1.2rem;
}
}
.twoCardsAnimatedImages .twoCardsMiniTitle h5 {
margin: 0;
}
.twoCardsAnimatedImages .twoCardsMainTitle {
margin-bottom: 3rem;
}
.twoCardsAnimatedImages .twoCardsMainTitle h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.twoCardsAnimatedImages .twoCardsMainTitle h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.twoCardsAnimatedImages .twoCardsMainTitle h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.twoCardsAnimatedImages .twoCardsMainTitle h2 {
font-size: 1.8rem;
}
}
.twoCardsAnimatedImages .twoCardsMainTitle h2 {
margin: 0;
}
.twoCardsAnimatedImages .twoCardsContainer {
display: flex;
gap: 60px;
max-width: 1000px;
margin: 0 auto;
}
@media (max-width: 850px) {
.twoCardsAnimatedImages .twoCardsContainer {
flex-direction: column;
gap: 2rem;
}
}
.twoCardsAnimatedImages .twoCard {
position: relative;
flex: 1;
min-height: 500px;
border-radius: 12px;
overflow: visible;
cursor: pointer;
transition: transform 0.4s ease;
}
.twoCardsAnimatedImages .twoCard:hover {
transform: translateY(-8px);
z-index: 20;
}
.twoCardsAnimatedImages .twoCard:hover .classButton {
background: transparent !important;
border: 2px solid #262626 !important;
color: #262626 !important;
}
.twoCardsAnimatedImages .twoCard:hover .classButton::after {
filter: invert(1);
}
.twoCardsAnimatedImages .twoCard:hover .twoCardBgImage1 {
transform: translateY(20px);
height: 80%;
}
.twoCardsAnimatedImages .twoCard:hover .twoCardBgImage2 {
transform: translate(-60px, -30px) scale(1.2);
opacity: 1;
z-index: 25;
}
.twoCardsAnimatedImages .twoCard:hover .twoCardBgImage3 {
transform: translate(60px, 30px) scale(1.2);
opacity: 1;
z-index: 25;
}
.twoCardsAnimatedImages .twoCardBgImage {
position: absolute;
border-radius: 8px;
overflow: hidden;
z-index: 1;
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.twoCardsAnimatedImages .twoCardBgImage img {
width: 100%;
height: 100%;
object-fit: cover;
}
.twoCardsAnimatedImages .twoCardBgImage.twoCardBgImage1 {
top: 10%;
right: -30px;
bottom: 0;
width: 100px;
z-index: 1;
}
@media (max-width: 850px) {
.twoCardsAnimatedImages .twoCardBgImage.twoCardBgImage1 {
right: -10px;
}
}
.twoCardsAnimatedImages .twoCardBgImage.twoCardBgImage2 {
top: -20px;
left: -80px;
width: 140px;
height: 180px;
opacity: 0;
transform: translate(30px, 20px) scale(0.8);
z-index: 0;
}
.twoCardsAnimatedImages .twoCardBgImage.twoCardBgImage3 {
bottom: -20px;
right: -80px;
width: 140px;
height: 180px;
opacity: 0;
transform: translate(-30px, -20px) scale(0.8);
z-index: 0;
}
.twoCardsAnimatedImages .twoCardContent {
position: relative;
z-index: 3;
min-height: 500px;
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
transition: all 0.4s ease;
}
.twoCardsAnimatedImages .twoCardContent .twoCardText {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 3rem;
text-align: left;
}
@media (max-width: 850px) {
.twoCardsAnimatedImages .twoCardContent .twoCardText {
padding: 2rem;
}
}
.twoCardsAnimatedImages .twoCardContent .twoCardText h4 {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.twoCardsAnimatedImages .twoCardContent .twoCardText h4 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.twoCardsAnimatedImages .twoCardContent .twoCardText h4 {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.twoCardsAnimatedImages .twoCardContent .twoCardText h4 {
font-size: 1.2rem;
}
}
.twoCardsAnimatedImages .twoCardContent .twoCardText h4 {
margin: 0;
}
.twoCardsAnimatedImages .twoCardContent .twoCardText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0;
flex: 1;
}
.twoCardsAnimatedImages .twoCardContent .twoCardText .twoCardLink {
margin-top: auto;
}
.twoCardsAnimatedImages .twoCardOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
text-decoration: none;
}
.contactFormSection {
width: 100%;
background: #262626;
}
.contactFormSection .contactFormContainer {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.contactFormSection .contactFormContainer {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.contactFormSection .contactFormContainer {
padding: 3rem 1rem;
}
}
.contactFormSection .contactFormContainer {
display: flex;
gap: 3rem;
align-items: flex-start;
}
@media (max-width: 1000px) {
.contactFormSection .contactFormContainer {
flex-direction: column-reverse;
gap: 2rem;
}
}
.contactFormSection .contactFormLeft {
flex: 0 0 300px;
}
@media (max-width: 850px) {
.contactFormSection .contactFormLeft {
flex: none;
width: 100%;
}
}
.contactFormSection .contactFormLeft .contactInfo {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contactFormSection .contactFormLeft .contactInfo .contactInfoItem h3 {
font-size: 1rem !important;
color: #ffffff;
margin: 0 0 1rem 0;
font-weight: 300;
}
.contactFormSection .contactFormLeft .contactInfo .contactInfoItem p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
color: #A8A8A8 !important;
margin: 0;
line-height: 1.6;
font-weight: 300;
}
.contactFormSection .contactFormLeft .contactInfo .contactInfoItem p a {
color: #A8A8A8 !important;
text-decoration: none;
transition: color 0.3s ease;
font-weight: 300;
}
.contactFormSection .contactFormLeft .contactInfo .contactInfoItem p a:hover {
color: #E88006 !important;
}
.contactFormSection .contactFormDivider {
width: 1px;
background: rgba(255, 255, 255, 0.2);
align-self: stretch;
}
@media (max-width: 850px) {
.contactFormSection .contactFormDivider {
width: 100%;
height: 1px;
align-self: auto;
}
}
.contactFormSection .contactFormRight {
flex: 1;
padding-left: 3rem;
}
@media only screen and (max-width: 1300px) {
.contactFormSection .contactFormRight {
padding-left: 0;
}
}
@media only screen and (max-width: 1000px) {
.contactFormSection .contactFormRight {
width: 100%;
}
}
.contactFormSection .contactFormRight .gform_validation_errors {
display: none;
}
.contactFormSection .contactFormRight .validation_message {
background: transparent;
border: none;
color: #E88006 !important;
padding: 0px;
font-size: 0.95rem !important;
margin-top: 8px !important;
font-weight: 400 !important;
}
.contactFormSection .contactFormRight .gform_wrapper {
color: #EFEEEC;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield_required {
color: #E88006 !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield_label {
margin-bottom: 12px !important;
font-size: 1rem !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield_label .gfield_required {
color: #E88006 !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gform_title {
display: none;
}
.contactFormSection .contactFormRight .gform_wrapper .gform_description {
display: none;
}
.contactFormSection .contactFormRight .gform_wrapper .gform_required_legend {
display: none;
}
.contactFormSection .contactFormRight .gform_wrapper .gform_fields {
grid-column-gap: 30px !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield {
margin-bottom: 24px !important;
position: relative;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .gfield_label {
color: #EFEEEC !important;
font-weight: 300 !important;
margin-bottom: 12px !important;
display: block !important;
font-size: 1.3rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.contactFormSection .contactFormRight .gform_wrapper .gfield .gfield_label {
font-size: 1.2rem;
}
}
@media only screen and (max-width: 1100px) {
.contactFormSection .contactFormRight .gform_wrapper .gfield .gfield_label {
font-size: 1.1rem;
}
}
@media only screen and (max-width: 850px) {
.contactFormSection .contactFormRight .gform_wrapper .gfield .gfield_label {
font-size: 1rem;
}
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .gfield_label {
font-family: "Inter", sans-serif !important;
letter-spacing: 0;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container {
position: relative;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=text],
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=email],
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=tel],
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=url],
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea {
width: 100% !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
color: #EFEEEC !important;
padding: 16px 0 !important;
font-size: 1rem !important;
font-family: "Inter", sans-serif !important;
font-weight: 300 !important;
border-radius: 0 !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
position: relative !important;
z-index: 2 !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=text]::placeholder,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=email]::placeholder,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=tel]::placeholder,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=url]::placeholder,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
font-size: 1rem !important;
font-weight: 300 !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=text]:focus,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=email]:focus,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=tel]:focus,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=url]:focus,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea:focus {
border-bottom-color: transparent !important;
outline: none !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=text]:hover,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=email]:hover,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=tel]:hover,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=url]:hover,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea:hover {
border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=text]:active,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=email]:active,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=tel]:active,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=url]:active,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea:active {
background: transparent !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=text].gfield_error,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=email].gfield_error,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=tel].gfield_error,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=url].gfield_error,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea.gfield_error {
border-bottom-color: #ff4444 !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=text]:-webkit-autofill, .contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=text]:-webkit-autofill:hover, .contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=text]:-webkit-autofill:focus, .contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=text]:-webkit-autofill:active,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=email]:-webkit-autofill,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=email]:-webkit-autofill:hover,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=email]:-webkit-autofill:focus,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=email]:-webkit-autofill:active,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=tel]:-webkit-autofill,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=tel]:-webkit-autofill:hover,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=tel]:-webkit-autofill:focus,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=tel]:-webkit-autofill:active,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=url]:-webkit-autofill,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=url]:-webkit-autofill:hover,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=url]:-webkit-autofill:focus,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container input[type=url]:-webkit-autofill:active,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea:-webkit-autofill,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea:-webkit-autofill:hover,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea:-webkit-autofill:focus,
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #262626 inset !important;
-webkit-text-fill-color: #EFEEEC !important;
background: transparent !important;
font-size: 1rem !important;
font-family: "Inter", sans-serif !important;
font-weight: 300 !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container:not(.gfield:has(textarea))::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #E88006 0%, rgb(249.4285714286, 152.8571428571, 39.5714285714) 100%);
transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 3;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container:not(.gfield:has(textarea)):has(input:focus)::after, .contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container:not(.gfield:has(textarea)):has(select:focus)::after {
width: 100%;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea {
resize: vertical !important;
border: 2px solid rgba(255, 255, 255, 0.2) !important;
padding: 16px !important;
border-radius: 8px !important;
height: 160px !important;
background: rgba(255, 255, 255, 0.02) !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea:focus, .contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea:focus-within, .contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea:active {
border: 2px solid #E88006 !important;
background: rgba(255, 255, 255, 0.04) !important;
outline: none !important;
box-shadow: none !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea:hover:not(:focus) {
border-color: rgba(255, 255, 255, 0.4) !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container textarea.gfield_error {
border-color: #ff6b6b !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container select {
width: 100% !important;
background: #262626 !important;
border: none !important;
border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
color: #EFEEEC !important;
padding: 16px 0 !important;
padding-left: 0 !important;
padding-right: 25px !important;
font-size: 1rem !important;
font-family: "Inter", sans-serif !important;
font-weight: 300 !important;
border-radius: 0 !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23E88006' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
background-position: right 0px center !important;
background-repeat: no-repeat !important;
background-size: 16px !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
position: relative !important;
z-index: 2 !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container select:focus {
border-bottom-color: transparent !important;
outline: none !important;
background: #262626 !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23E88006' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
background-position: right 0px center !important;
background-repeat: no-repeat !important;
background-size: 16px !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container select:hover {
border-bottom-color: rgba(255, 255, 255, 0.4) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23E88006' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container select.gfield_error {
border-bottom-color: #ff4444 !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container select option {
background: #262626 !important;
color: #EFEEEC !important;
padding: 12px !important;
font-size: 1rem !important;
font-family: "Inter", sans-serif !important;
font-weight: 300 !important;
border: none !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container select option:hover, .contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container select option:focus, .contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container select option:checked {
background: rgba(232, 128, 6, 0.1) !important;
color: #EFEEEC !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container .gf_placeholder {
color: rgba(255, 255, 255, 0.4) !important;
font-style: italic !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container:has(select)::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #E88006 0%, rgb(249.4285714286, 152.8571428571, 39.5714285714) 100%);
transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 3;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield .ginput_container:has(select:focus)::after {
width: 100%;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield.gfield_error .validation_message {
color: #ff6b6b !important;
font-size: 0.95rem !important;
margin-top: 8px !important;
font-weight: 400 !important;
animation: shake 0.5s ease-in-out;
}
.contactFormSection .contactFormRight .gform_wrapper .gfield.gfield_error .ginput_container input,
.contactFormSection .contactFormRight .gform_wrapper .gfield.gfield_error .ginput_container textarea,
.contactFormSection .contactFormRight .gform_wrapper .gfield.gfield_error .ginput_container select {
border-bottom-color: #ff6b6b !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer {
position: relative;
padding-top: 0px !important;
margin-top: 20px !important;
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer input[type=submit] {
opacity: 0;
position: absolute;
pointer-events: none;
width: 0;
height: 0;
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
padding: 20px 0;
width: 100%;
position: relative;
overflow: hidden;
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button:hover {
transform: translateX(10px);
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button:hover .send-text {
color: #E88006;
margin-left: 140px;
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button:hover .arrow-graphic {
transform: scale(1.1);
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button:hover .send-sliding-image {
left: 0px;
opacity: 1;
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button .send-sliding-image {
position: absolute;
left: -150px;
top: 50%;
transform: translateY(-50%);
width: 120px;
height: auto;
opacity: 0;
transition: all 0.5s ease;
z-index: 1;
}
@media (max-width: 850px) {
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button .send-sliding-image {
width: 80px;
left: -100px;
}
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button .send-sliding-image img {
width: 100%;
height: auto;
display: block;
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button .send-text {
font-size: 9rem;
font-weight: 400;
color: #EFEEEC;
font-family: "Inter", sans-serif;
transition: margin-left 0.5s ease, color 0.3s ease;
position: relative;
z-index: 2;
margin-left: 0;
}
@media (max-width: 850px) {
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button .send-text {
font-size: 3rem;
}
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button .arrow-graphic {
width: 120px;
height: auto;
transition: transform 0.3s ease;
flex-shrink: 0;
}
@media (max-width: 850px) {
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button .arrow-graphic {
width: 80px;
}
}
.contactFormSection .contactFormRight .gform_wrapper .gform_footer .custom-send-button .arrow-graphic img {
width: 100%;
height: auto;
display: block;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-2px);
}
20%, 40%, 60%, 80% {
transform: translateX(2px);
}
}
.sectorSlider {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.sectorSlider {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.sectorSlider {
padding: 3rem 1rem;
}
}
.sectorSlider {
margin: 0 auto;
padding-top: 0px !important;
}
.sectorSlider .sectorSliderContainer {
display: flex;
height: 500px;
gap: 24px;
position: relative;
}
@media (max-width: 850px) {
.sectorSlider .sectorSliderContainer {
height: auto;
flex-direction: column;
gap: 12px;
}
}
.sectorSlider .sectorSliderItem {
position: relative;
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
overflow: hidden;
border-radius: 12px;
width: 80px;
min-width: 80px;
}
@media (min-width: 851px) {
.sectorSlider .sectorSliderItem:not(.active) .sectorSliderText {
opacity: 0 !important;
transition: opacity 0s !important;
}
}
.sectorSlider .sectorSliderItem.active {
width: calc(100% - 240px - 24px);
min-width: 400px;
}
.sectorSlider .sectorSliderItem.active .sectorSliderOverlay {
background: rgba(0, 0, 0, 0.3);
}
.sectorSlider .sectorSliderItem.active .sectorSliderText {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.sectorSlider .sectorSliderItem.active .sectorSliderVerticalText {
opacity: 0;
}
@media (max-width: 850px) {
.sectorSlider .sectorSliderItem {
width: 100% !important;
min-width: auto !important;
height: 250px;
}
.sectorSlider .sectorSliderItem .sectorSliderOverlay {
background: rgba(0, 0, 0, 0.6) !important;
}
.sectorSlider .sectorSliderItem .sectorSliderText {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
transition: none !important;
}
.sectorSlider .sectorSliderItem .sectorSliderVerticalText {
opacity: 0 !important;
}
}
.sectorSlider .sectorSliderContent {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
}
.sectorSlider .sectorSliderImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.sectorSlider .sectorSliderImage img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sectorSlider .sectorSliderOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
transition: background 0.8s ease;
z-index: 2;
}
.sectorSlider .sectorSliderText {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 3rem;
color: #EFEEEC;
z-index: 5;
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
pointer-events: none;
}
@media (max-width: 850px) {
.sectorSlider .sectorSliderText {
padding: 2rem;
}
}
.sectorSliderItem.active .sectorSlider .sectorSliderText {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.sectorSlider .sectorSliderText .sectorSliderTitle {
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.sectorSlider .sectorSliderText .sectorSliderTitle {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 1100px) {
.sectorSlider .sectorSliderText .sectorSliderTitle {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 850px) {
.sectorSlider .sectorSliderText .sectorSliderTitle {
font-size: 1.5rem;
}
}
.sectorSlider .sectorSliderText .sectorSliderTitle {
margin: 0 0 1.5rem 0;
color: #EFEEEC;
}
.sectorSlider .sectorSliderText .sectorSliderDescription {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
color: rgba(255, 255, 255, 0.9) !important;
margin: 0;
line-height: 1.6;
max-width: 300px;
}
.sectorSlider .sectorSliderVerticalText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
color: #EFEEEC;
font-weight: 500;
font-size: 1.2rem;
z-index: 5;
opacity: 1;
transition: none;
white-space: nowrap;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.sectorSliderItem.active .sectorSlider .sectorSliderVerticalText {
opacity: 0;
}
@media (max-width: 850px) {
.sectorSlider .sectorSliderVerticalText {
transform: translate(-50%, -50%) rotate(0deg);
font-size: 1.5rem;
}
}
.caseStudyShowcase {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.caseStudyShowcase {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudyShowcase {
padding: 3rem 1rem;
}
}
.caseStudyShowcase {
background: #E2E0D6;
padding-right: 0 !important;
}
.caseStudyShowcase:focus {
outline: none !important;
}
@media only screen and (max-width: 1150px) {
.caseStudyShowcase {
padding-right: 0 !important;
}
}
@media only screen and (max-width: 850px) {
.caseStudyShowcase {
padding-right: 0 !important;
padding-left: 1rem !important;
}
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
padding-right: 80px;
}
@media only screen and (max-width: 1150px) {
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader {
padding-right: 2rem;
}
}
@media (max-width: 850px) {
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader {
flex-direction: column;
gap: 1.5rem;
text-align: center;
padding-right: 0;
}
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseTitle h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseTitle h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseTitle h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseTitle h2 {
font-size: 1.8rem;
}
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseTitle h2 {
margin: 0;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseTitle h2 em {
font-style: italic;
font-weight: 300;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseNavigation {
display: flex;
gap: 12px;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseNavigation .classButton {
min-width: 50px;
padding: 15px;
font-size: 0;
}
@media only screen and (max-width: 850px) {
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseNavigation .classButton {
padding: 12px;
min-width: 45px;
}
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseNavigation .classButton::after {
margin-left: 0;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseNavigation .classButton.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseNavigation .classButton.disabled:hover {
background: #262626 !important;
border-color: #262626 !important;
color: #EFEEEC !important;
transform: none !important;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseNavigation .classButton.disabled:hover::after {
filter: none;
transform: none;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseNavigation .classButton.caseStudyNavPrev::after {
transform: rotate(180deg);
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseNavigation .classButton.caseStudyNavPrev:hover:not(.disabled)::after {
transform: rotate(180deg) translateX(-2px);
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseHeader .caseStudyShowcaseNavigation .classButton.caseStudyNavNext:hover:not(.disabled)::after {
transform: translateX(2px);
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseSlider {
overflow: hidden;
position: relative;
width: 100%;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseSlider .caseStudyShowcaseTrack {
display: flex;
gap: 0;
transition: transform 0.5s ease;
padding-left: 0;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard {
flex: 0 0 calc((100vw - 160px) / 3.2);
max-width: 420px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 2rem;
box-sizing: border-box;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:first-child {
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 1100px) {
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard {
flex: 0 0 calc((100vw - 80px) / 2.2);
max-width: 500px;
padding: 0 1.5rem;
}
}
@media (max-width: 850px) {
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard {
flex: 0 0 calc((100vw - 16px) / 1.2);
max-width: none;
padding: 0 1rem;
border-left: none;
border-right: none;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:first-child {
border-left: none;
}
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:hover .caseStudyCardImage img {
transform: scale(1.1);
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:hover .caseStudyReadMore {
opacity: 1;
transform: translateX(0);
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:hover .caseStudyCardActions .caseStudyCardButton.classButton {
background: #262626 !important;
color: #EFEEEC !important;
border: 2px solid #262626 !important;
transform: translateY(-2px) !important;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:hover .caseStudyCardActions .caseStudyCardButton.classButton::after {
filter: none !important;
transform: translateX(4px) !important;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard .caseStudyCardLink {
display: block;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard .caseStudyCardImage {
width: 100%;
height: 250px;
border-radius: 8px;
overflow: hidden;
margin-bottom: 1.5rem;
}
@media (max-width: 850px) {
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard .caseStudyCardImage {
height: 350px;
aspect-ratio: auto;
}
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard .caseStudyCardImage img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
@media (min-width: 851px) {
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:nth-child(6n+1) .caseStudyCardImage {
height: 320px;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:nth-child(6n+2) .caseStudyCardImage {
height: 200px;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:nth-child(6n+3) .caseStudyCardImage {
height: 380px;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:nth-child(6n+4) .caseStudyCardImage {
height: 240px;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:nth-child(6n+5) .caseStudyCardImage {
height: 300px;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard:nth-child(6n+6) .caseStudyCardImage {
height: 220px;
}
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard .caseStudyCardContent .caseStudyCardTitle {
font-size: 1.2rem;
line-height: 1.2;
font-weight: 400;
margin: 0 0 1rem 0;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard .caseStudyCardContent .caseStudyCardExcerpt {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 0 1.5rem 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard .caseStudyCardContent .caseStudyCardActions {
display: flex;
align-items: center;
gap: 1rem;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard .caseStudyCardContent .caseStudyCardActions .caseStudyCardButton {
min-width: auto;
width: 48px;
height: 48px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent !important;
color: #262626 !important;
border: 2px solid #262626 !important;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard .caseStudyCardContent .caseStudyCardActions .caseStudyCardButton::after {
margin: 0;
filter: invert(1);
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard .caseStudyCardContent .caseStudyCardActions .caseStudyCardButton .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.caseStudyShowcase .caseStudyShowcaseContainer .caseStudyShowcaseCard .caseStudyCardContent .caseStudyCardActions .caseStudyReadMore {
font-weight: 500;
color: #E88006;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
}
.serviceContentContainer {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.serviceContentContainer {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.serviceContentContainer {
padding: 3rem 1rem;
}
}
.serviceContentContainer .serviceContentSingle {
max-width: 900px;
margin: 0 auto;
}
.serviceContentContainer .serviceContentSingle .serviceTitle {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.serviceContentContainer .serviceContentSingle .serviceTitle {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.serviceContentContainer .serviceContentSingle .serviceTitle {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.serviceContentContainer .serviceContentSingle .serviceTitle {
font-size: 2rem;
}
}
.serviceContentContainer .serviceContentSingle .serviceTitle {
margin: 0 0 3rem 0;
}
.serviceContentContainer .serviceContentSingle h1, .serviceContentContainer .serviceContentSingle h2, .serviceContentContainer .serviceContentSingle h3, .serviceContentContainer .serviceContentSingle h4, .serviceContentContainer .serviceContentSingle h5, .serviceContentContainer .serviceContentSingle h6 {
margin: 2rem 0 1.5rem 0;
}
.serviceContentContainer .serviceContentSingle h1:first-child, .serviceContentContainer .serviceContentSingle h2:first-child, .serviceContentContainer .serviceContentSingle h3:first-child, .serviceContentContainer .serviceContentSingle h4:first-child, .serviceContentContainer .serviceContentSingle h5:first-child, .serviceContentContainer .serviceContentSingle h6:first-child {
margin-top: 0;
}
.serviceContentContainer .serviceContentSingle h1 {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.serviceContentContainer .serviceContentSingle h1 {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.serviceContentContainer .serviceContentSingle h1 {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.serviceContentContainer .serviceContentSingle h1 {
font-size: 2rem;
}
}
.serviceContentContainer .serviceContentSingle h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.serviceContentContainer .serviceContentSingle h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.serviceContentContainer .serviceContentSingle h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.serviceContentContainer .serviceContentSingle h2 {
font-size: 1.8rem;
}
}
.serviceContentContainer .serviceContentSingle h2 {
font-size: 2rem;
line-height: 1.2;
font-weight: 400;
}
.serviceContentContainer .serviceContentSingle h3 {
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.serviceContentContainer .serviceContentSingle h3 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 1100px) {
.serviceContentContainer .serviceContentSingle h3 {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 850px) {
.serviceContentContainer .serviceContentSingle h3 {
font-size: 1.5rem;
}
}
.serviceContentContainer .serviceContentSingle h3 {
font-size: 1.5rem;
line-height: 1.3;
font-weight: 500;
}
.serviceContentContainer .serviceContentSingle h4 {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.serviceContentContainer .serviceContentSingle h4 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.serviceContentContainer .serviceContentSingle h4 {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.serviceContentContainer .serviceContentSingle h4 {
font-size: 1.2rem;
}
}
.serviceContentContainer .serviceContentSingle h4 {
font-size: 1.2rem;
line-height: 1.4;
font-weight: 400;
margin-bottom: 1rem;
}
.serviceContentContainer .serviceContentSingle p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 0 1.5rem 0;
}
.serviceContentContainer .serviceContentSingle p:last-child {
margin-bottom: 0;
}
.serviceContentContainer .serviceContentSingle strong {
font-weight: 500;
}
.serviceContentContainer .serviceContentSingle img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 1.5rem 0;
}
.serviceContentContainer .serviceContentSingle a:not(.classButton) {
color: inherit;
text-decoration: none;
border-bottom: 1px solid #262626;
transition: color 0.3s ease, border-color 0.3s ease;
}
.serviceContentContainer .serviceContentSingle a:not(.classButton):hover {
color: #E88006;
border-bottom-color: #E88006;
}
.serviceContentContainer .serviceContentSingle ul, .serviceContentContainer .serviceContentSingle ol {
margin: 1.5rem 0;
padding-left: 2rem;
}
.serviceContentContainer .serviceContentSingle ul li, .serviceContentContainer .serviceContentSingle ol li {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
line-height: 1.5;
margin-bottom: 1rem;
}
.serviceContentContainer .serviceContentSingle blockquote {
border-left: 4px solid #E88006;
padding-left: 1.5rem;
margin: 2rem 0;
font-style: italic;
}
.serviceContentContainer .serviceContentSingle blockquote p {
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.serviceContentContainer .serviceContentSingle blockquote p {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 1100px) {
.serviceContentContainer .serviceContentSingle blockquote p {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 850px) {
.serviceContentContainer .serviceContentSingle blockquote p {
font-size: 1.5rem;
}
}
.serviceContentContainer .serviceContentSingle blockquote p {
margin: 0 0 2rem 0 !important;
font-style: normal !important;
line-height: 1.1 !important;
opacity: 1;
}
.serviceShare {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.serviceShare h3 {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.serviceShare h3 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.serviceShare h3 {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.serviceShare h3 {
font-size: 1.2rem;
}
}
.serviceShare h3 {
margin: 0 0 1.5rem 0;
}
.serviceShare .shareLinks {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.serviceShare .shareLinks .shareLink {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f5f5f5;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
}
.serviceShare .shareLinks .shareLink:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.serviceShare .shareLinks .shareLink svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.serviceShare .shareLinks .shareLink.linkedin:hover {
background: #0077b5;
color: white;
}
.serviceShare .shareLinks .shareLink.twitter:hover {
background: #000;
color: white;
}
.serviceShare .shareLinks .shareLink.facebook:hover {
background: #1877f2;
color: white;
}
.serviceShare .shareLinks .shareLink.email:hover {
background: #34495e;
color: white;
}
.error404Container {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.error404Container {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.error404Container {
padding: 3rem 1rem;
}
}
.error404Container {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.error404Container .error404Inner {
display: flex;
align-items: center;
gap: 3rem;
max-width: 1000px;
margin: 0 auto;
}
@media (max-width: 850px) {
.error404Container .error404Inner {
flex-direction: column;
gap: 2rem;
text-align: center;
}
}
.error404Container .error404SVG {
flex: 0 0 400px;
}
@media (max-width: 850px) {
.error404Container .error404SVG {
flex: none;
width: 300px;
}
}
.error404Container .error404SVG svg {
width: 100%;
height: auto;
}
.error404Container .error404SVG svg .compass-circle {
animation: compassPulse 3s ease-in-out infinite;
}
.error404Container .error404SVG svg .compass-needle {
transform-origin: 200px 150px;
animation: compassSpin 4s ease-in-out infinite;
}
.error404Container .error404SVG svg .compass-mark {
opacity: 0;
animation: fadeInSequence 0.5s ease-out forwards;
}
.error404Container .error404SVG svg .compass-mark.north {
animation-delay: 0.5s;
}
.error404Container .error404SVG svg .compass-mark.east {
animation-delay: 0.7s;
}
.error404Container .error404SVG svg .compass-mark.south {
animation-delay: 0.9s;
}
.error404Container .error404SVG svg .compass-mark.west {
animation-delay: 1.1s;
}
.error404Container .error404SVG svg .question-mark {
animation: floatQuestion 3s ease-in-out infinite;
}
.error404Container .error404SVG svg .question-mark.q1 {
animation-delay: 0s;
}
.error404Container .error404SVG svg .question-mark.q2 {
animation-delay: 0.8s;
}
.error404Container .error404SVG svg .question-mark.q3 {
animation-delay: 1.6s;
}
.error404Container .error404SVG svg .question-mark.q4 {
animation-delay: 2.4s;
}
.error404Container .error404SVG svg .path-line {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: drawPath 3s ease-out forwards;
}
.error404Container .error404SVG svg .path-line.path1 {
animation-delay: 1.5s;
}
.error404Container .error404SVG svg .path-line.path2 {
animation-delay: 2s;
}
.error404Container .error404SVG svg .paper-plane {
animation: flyPlane 6s ease-in-out infinite;
}
.error404Container .error404Content {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (max-width: 850px) {
.error404Container .error404Content {
align-items: center;
}
}
.error404Container .error404Title {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.error404Container .error404Title {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.error404Container .error404Title {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.error404Container .error404Title {
font-size: 2rem;
}
}
.error404Container .error404Title {
margin: 0;
color: #262626;
animation: slideInUp 0.8s ease-out;
}
.error404Container .error404Text {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
font-size: 1.2rem;
margin: 0;
animation: slideInUp 0.8s ease-out 0.2s both;
}
@media (max-width: 850px) {
.error404Container .error404Text {
text-align: center;
}
}
.error404Container .error404Actions {
display: flex;
gap: 1.5rem;
margin: 2rem 0;
animation: slideInUp 0.8s ease-out 0.4s both;
}
@media (max-width: 850px) {
.error404Container .error404Actions {
justify-content: center;
flex-wrap: wrap;
}
}
.error404Container .error404Actions .error404Button {
flex-shrink: 0;
}
.error404Container .error404Links {
animation: slideInUp 0.8s ease-out 0.6s both;
}
.error404Container .error404Links p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 0 1rem 0;
font-weight: 500;
}
.error404Container .error404Links ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 2rem;
}
@media (max-width: 850px) {
.error404Container .error404Links ul {
flex-direction: column;
gap: 1rem;
align-items: center;
}
}
.error404Container .error404Links ul li a {
color: #E88006;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.error404Container .error404Links ul li a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: #E88006;
transition: width 0.3s ease;
}
.error404Container .error404Links ul li a:hover {
color: rgb(157.4285714286, 86.8571428571, 4.0714285714);
}
.error404Container .error404Links ul li a:hover::after {
width: 100%;
}
@keyframes compassPulse {
0%, 100% {
stroke-width: 2;
opacity: 1;
}
50% {
stroke-width: 3;
opacity: 0.7;
}
}
@keyframes compassSpin {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fadeInSequence {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes floatQuestion {
0%, 100% {
transform: translateY(0px);
opacity: 0.6;
}
50% {
transform: translateY(-10px);
opacity: 1;
}
}
@keyframes drawPath {
to {
stroke-dashoffset: 0;
}
}
@keyframes flyPlane {
0% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(20px, -10px) rotate(5deg);
}
50% {
transform: translate(40px, 0px) rotate(0deg);
}
75% {
transform: translate(20px, 10px) rotate(-5deg);
}
100% {
transform: translate(0, 0) rotate(0deg);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.titleIntro {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.titleIntro {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.titleIntro {
padding: 3rem 1rem;
}
}
.titleIntro {
padding-bottom: 0 !important;
}
.titleIntro h1 {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.titleIntro h1 {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.titleIntro h1 {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.titleIntro h1 {
font-size: 2rem;
}
}
.titleIntro h1 {
margin: 2rem 0 !important;
}
@media (max-width: 850px) {
.titleIntro h1 {
margin-bottom: 0px !important;
}
}
.titleIntro p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
max-width: 700px;
}
@media (max-width: 850px) {
.titleIntro p {
margin: 1.5rem 0 !important;
}
}
.contentWrapper {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.contentWrapper {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.contentWrapper {
padding: 3rem 1rem;
}
}
.contentWrapper .contentWrapperInner {
display: flex;
gap: 3rem;
align-items: flex-start;
}
@media (max-width: 850px) {
.contentWrapper .contentWrapperInner {
flex-direction: column;
gap: 2rem;
}
}
.contentWrapper .wp-block-column:first-child {
flex: 0 0 30%;
}
@media (max-width: 850px) {
.contentWrapper .wp-block-column:first-child {
flex: none;
width: 100%;
}
}
.contentWrapper .wp-block-column:first-child .serviceShare {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
}
.contentWrapper .wp-block-column:last-child {
flex: 1;
}
.contentWrapper .wp-block-column:last-child h1, .contentWrapper .wp-block-column:last-child h2, .contentWrapper .wp-block-column:last-child h3, .contentWrapper .wp-block-column:last-child h4, .contentWrapper .wp-block-column:last-child h5, .contentWrapper .wp-block-column:last-child h6 {
margin: 2rem 0 1.5rem 0 !important;
}
.contentWrapper .wp-block-column:last-child h1:first-child, .contentWrapper .wp-block-column:last-child h2:first-child, .contentWrapper .wp-block-column:last-child h3:first-child, .contentWrapper .wp-block-column:last-child h4:first-child, .contentWrapper .wp-block-column:last-child h5:first-child, .contentWrapper .wp-block-column:last-child h6:first-child {
margin-top: 0 !important;
}
.contentWrapper .wp-block-column:last-child h1 {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.contentWrapper .wp-block-column:last-child h1 {
font-size: 3.2rem;
}
}
@media only screen and (max-width: 1100px) {
.contentWrapper .wp-block-column:last-child h1 {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 850px) {
.contentWrapper .wp-block-column:last-child h1 {
font-size: 2rem;
}
}
.contentWrapper .wp-block-column:last-child h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.contentWrapper .wp-block-column:last-child h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.contentWrapper .wp-block-column:last-child h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.contentWrapper .wp-block-column:last-child h2 {
font-size: 1.8rem;
}
}
.contentWrapper .wp-block-column:last-child h3 {
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.contentWrapper .wp-block-column:last-child h3 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 1100px) {
.contentWrapper .wp-block-column:last-child h3 {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 850px) {
.contentWrapper .wp-block-column:last-child h3 {
font-size: 1.5rem;
}
}
.contentWrapper .wp-block-column:last-child h4 {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.contentWrapper .wp-block-column:last-child h4 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.contentWrapper .wp-block-column:last-child h4 {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.contentWrapper .wp-block-column:last-child h4 {
font-size: 1.2rem;
}
}
.contentWrapper .wp-block-column:last-child p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 0 1.5rem 0 !important;
}
.contentWrapper .wp-block-column:last-child p:last-child {
margin-bottom: 0 !important;
}
.contentWrapper .wp-block-column:last-child .wp-block-heading {
margin: 2rem 0 1.5rem 0 !important;
}
.contentWrapper .wp-block-column:last-child .wp-block-heading:first-child {
margin-top: 0 !important;
}
.contentWrapper .wp-block-column:last-child ul, .contentWrapper .wp-block-column:last-child ol {
margin: 1.5rem 0 !important;
padding-left: 2rem;
}
.contentWrapper .wp-block-column:last-child ul li, .contentWrapper .wp-block-column:last-child ol li {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin-bottom: 1rem !important;
}
.contentWrapper .wp-block-column:last-child blockquote {
border-left: 4px solid #E88006;
padding-left: 1.5rem;
margin: 2rem 0;
font-style: italic;
}
.contentWrapper .wp-block-column:last-child blockquote p {
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.contentWrapper .wp-block-column:last-child blockquote p {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 1100px) {
.contentWrapper .wp-block-column:last-child blockquote p {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 850px) {
.contentWrapper .wp-block-column:last-child blockquote p {
font-size: 1.5rem;
}
}
.contentWrapper .wp-block-column:last-child blockquote p {
margin: 0 0 2rem 0 !important;
font-style: normal !important;
line-height: 1.1 !important;
opacity: 1;
}
.contentWrapper .wp-block-column:last-child img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 1.5rem 0 !important;
}
.contentWrapper .wp-block-column:last-child .wp-block-image {
margin: 1.5rem 0 !important;
}
.contentWrapper .wp-block-column:last-child .wp-block-image img {
border-radius: 8px;
}
.contentWrapper .wp-block-column:last-child .wp-block-button {
margin: 1.5rem 0 !important;
}
.contentWrapper .wp-block-column:last-child .wp-block-separator {
border: none;
border-top: 1px solid;
margin: 2rem 0 !important;
border-color: rgba(0, 0, 0, 0.1);
}
.contentWrapper .wp-block-column:last-child table {
margin: 2rem 0 !important;
border-collapse: collapse;
width: 100%;
}
.contentWrapper .wp-block-column:last-child table th, .contentWrapper .wp-block-column:last-child table td {
padding: 1rem;
border: 1px solid rgba(0, 0, 0, 0.1);
text-align: left;
}
.contentWrapper .wp-block-column:last-child table th {
background: #f7f7f7;
font-weight: 600;
}
@media (max-width: 850px) {
.contentWrapper {
flex-direction: column-reverse;
}
.contentWrapper .wp-block-column:first-child {
margin-top: 3rem !important;
}
}
.contactFormSuccess {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 600px;
}
@media (max-width: 850px) {
.contactFormSuccess {
min-height: 400px;
padding: 2rem 0;
}
}
.contactSuccessContent {
text-align: center;
max-width: 600px;
}
.contactSuccessContent .contactSuccessIcon {
margin-bottom: 3rem;
animation: slideDown 0.8s ease-out;
}
.contactSuccessContent .contactSuccessIcon .success-checkmark {
animation: checkmarkAnimation 1.5s ease-in-out;
}
.contactSuccessContent .contactSuccessIcon .checkmark-circle {
stroke-dasharray: 283;
stroke-dashoffset: 283;
animation: drawCircle 1s ease-in-out 0.3s forwards;
}
.contactSuccessContent .contactSuccessIcon .checkmark-path {
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: drawCheck 0.8s ease-in-out 1s forwards;
}
@media (max-width: 850px) {
.contactSuccessContent .contactSuccessIcon svg {
width: 80px;
height: 80px;
}
}
.contactSuccessContent .contactSuccessText {
margin-bottom: 3rem;
animation: fadeInUp 0.8s ease-out 0.5s both;
}
.contactSuccessContent .contactSuccessText h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.contactSuccessContent .contactSuccessText h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.contactSuccessContent .contactSuccessText h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.contactSuccessContent .contactSuccessText h2 {
font-size: 1.8rem;
}
}
.contactSuccessContent .contactSuccessText h2 {
color: #EFEEEC;
margin: 0 0 1.5rem 0;
}
.contactSuccessContent .contactSuccessText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
color: rgba(255, 255, 255, 0.8) !important;
margin: 0;
font-size: 1.2rem;
}
.contactSuccessContent .contactSuccessArrow {
margin-bottom: 3rem;
animation: fadeInUp 0.8s ease-out 0.8s both;
}
@media (max-width: 850px) {
.contactSuccessContent .contactSuccessArrow {
display: none;
}
}
.contactSuccessContent .contactSuccessArrow .animated-success-arrow {
width: 100%;
max-width: 400px;
height: auto;
}
.contactSuccessContent .contactSuccessArrow .animated-success-arrow path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: drawSuccessArrow 2s ease-in-out 1.2s forwards;
}
.contactSuccessContent .contactSuccessArrow .animated-success-arrow path:nth-child(1) {
animation-delay: 1.2s;
}
.contactSuccessContent .contactSuccessArrow .animated-success-arrow path:nth-child(2) {
animation-delay: 1.4s;
}
.contactSuccessContent .contactSuccessArrow .animated-success-arrow path:nth-child(3) {
animation-delay: 1.6s;
}
.contactSuccessContent .contactSuccessArrow .animated-success-arrow path:nth-child(4) {
animation-delay: 1.8s;
}
.contactSuccessContent .contactSuccessArrow .animated-success-arrow {
animation: svgBreathe 4s ease-in-out 3s infinite;
}
.contactSuccessContent .contactSuccessActions {
display: flex;
justify-content: center;
animation: fadeInUp 0.8s ease-out 1.2s both;
}
.contactSuccessContent .contactSuccessActions .backToHome {
background: #E88006 !important;
color: #262626 !important;
border: 2px solid #E88006 !important;
}
.contactSuccessContent .contactSuccessActions .backToHome::after {
filter: brightness(0);
}
.contactSuccessContent .contactSuccessActions .backToHome:hover {
background: transparent !important;
border: 2px solid #E88006 !important;
color: #EFEEEC !important;
}
.contactSuccessContent .contactSuccessActions .backToHome:hover::after {
filter: none;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes drawCircle {
to {
stroke-dashoffset: 0;
}
}
@keyframes drawCheck {
to {
stroke-dashoffset: 0;
}
}
@keyframes drawSuccessArrow {
to {
stroke-dashoffset: 0;
}
}
@keyframes checkmarkAnimation {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes svgBreathe {
0%, 100% {
transform: scale(1) translateY(0);
filter: drop-shadow(0 2px 8px rgba(232, 128, 6, 0.15));
}
50% {
transform: scale(1.02) translateY(-2px);
filter: drop-shadow(0 4px 12px rgba(232, 128, 6, 0.25));
}
}
.stackedCardsBlock {
padding-bottom: 0;
max-width: 1450px;
margin: 0 auto;
padding: 80px 0px;
}
@media only screen and (max-width: 1490px) {
.stackedCardsBlock {
padding-left: 40px;
padding-right: 40px;
}
}
@media only screen and (max-width: 1150px) {
.stackedCardsBlock {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.stackedCardsBlock {
padding: 3rem 1rem;
}
}
.stackedCardsBlock {
padding-top: 60px !important;
padding-bottom: 160px !important;
position: relative;
}
@media (max-width: 1150px) {
.stackedCardsBlock {
padding-top: 150px !important;
}
}
@media (max-width: 850px) {
.stackedCardsBlock {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
}
.stackedCardsBlock .stackedCard {
position: sticky;
top: 7em;
height: 0;
padding-bottom: 35%;
transform-origin: center top;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
margin-bottom: 2rem;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}
@media (max-width: 1150px) {
.stackedCardsBlock .stackedCard {
padding-bottom: 45%;
}
}
@media (max-width: 850px) {
.stackedCardsBlock .stackedCard {
padding-bottom: 0;
height: auto;
margin-bottom: 1rem;
}
}
.stackedCardsBlock .stackedCard:last-child {
margin-bottom: 0;
}
.stackedCardsBlock .stackedCard:hover .stackedCardRight {
background-color: #262626;
}
.stackedCardsBlock .stackedCard:hover .stackedCardRight .stackedCardTitle,
.stackedCardsBlock .stackedCard:hover .stackedCardRight .stackedCardSubtitle {
color: #EFEEEC;
}
.stackedCardsBlock .stackedCard:hover .stackedCardRight .stackedCardSubtitle h4 {
color: #EFEEEC;
}
.stackedCardsBlock .stackedCard:hover .stackedCardRight .stackedCardText p {
color: #EFEEEC !important;
}
.stackedCardsBlock .stackedCard:hover .stackedCardRight .stackedCardButton .classButton {
background-color: #E88006 !important;
border-color: #E88006 !important;
}
.stackedCardsBlock .stackedCard:hover .stackedCardRight .stackedCardButton .classButton:hover {
background-color: transparent !important;
border-color: #E88006 !important;
color: #E88006 !important;
transform: none !important;
}
.stackedCardsBlock .stackedCard:hover .stackedCardRight .stackedCardButton .classButton:hover::after {
filter: none !important;
}
.stackedCardsBlock .stackedCardContent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
background-color: #A7B2A8;
}
@media (max-width: 850px) {
.stackedCardsBlock .stackedCardContent {
position: static;
flex-direction: column;
border-radius: 12px;
height: auto;
}
}
.stackedCardsBlock .stackedCardLeft {
flex: 1;
background-color: #262626;
position: relative;
}
@media (max-width: 850px) {
.stackedCardsBlock .stackedCardLeft {
flex: none;
height: 300px;
}
}
.stackedCardsBlock .stackedCardLeft .stackedCardIcon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
transition: transform 0.6s ease;
}
.stackedCardsBlock .stackedCardLeft .stackedCardSlantedImage {
position: absolute;
right: -54px;
top: -10px;
bottom: -10px;
width: 140px;
z-index: 4;
overflow: visible !important;
}
@media (max-width: 850px) {
.stackedCardsBlock .stackedCardLeft .stackedCardSlantedImage {
display: none;
}
}
.stackedCardsBlock .stackedCardLeft .stackedCardSlantedImage img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
overflow: visible !important;
}
.stackedCardsBlock .stackedCardRight {
flex: 1;
background-color: #A7B2A8;
padding: 60px;
padding-left: 120px !important;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
transition: background-color 0.3s ease;
}
@media (max-width: 1150px) {
.stackedCardsBlock .stackedCardRight {
padding: 40px;
padding-left: 100px !important;
}
}
@media (max-width: 850px) {
.stackedCardsBlock .stackedCardRight {
padding: 30px !important;
gap: 1.5rem;
}
}
.stackedCardsBlock .stackedCardRight.purple {
background-color: #977390;
}
.stackedCardsBlock .stackedCardRight.cream {
background-color: #E2E0D6;
}
.stackedCardsBlock .stackedCardRight.offWhite {
background-color: #EFEEEC;
}
.stackedCardsBlock .stackedCardRight .stackedCardHeader {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 24px;
}
@media (max-width: 850px) {
.stackedCardsBlock .stackedCardRight .stackedCardHeader {
gap: 1rem;
margin-bottom: 16px;
}
}
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardTitle {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardTitle {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardTitle {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardTitle {
font-size: 1.8rem;
}
}
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardTitle {
margin: 0;
color: #262626;
transition: color 0.3s ease;
}
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardTitle em {
font-style: italic;
}
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardTitle p {
margin: 0 !important;
}
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardButton {
flex-shrink: 0;
}
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardButton .classButton {
min-width: 48px;
width: 48px;
height: 48px;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
position: relative;
background: transparent !important;
color: #262626 !important;
border: 2px solid #262626 !important;
transition: all 0.3s ease;
}
@media (max-width: 850px) {
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardButton .classButton {
width: 45px;
height: 45px;
min-width: 45px;
}
}
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardButton .classButton::after {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
filter: invert(1);
transition: filter 0.3s ease, transform 0.3s ease;
}
.stackedCardsBlock .stackedCardRight .stackedCardHeader .stackedCardButton .classButton:hover::after {
transform: translate(-50%, -50%) translateX(4px) !important;
}
.stackedCardsBlock .stackedCardRight .stackedCardSubtitle {
margin: 0;
}
@media (max-width: 850px) {
.stackedCardsBlock .stackedCardRight .stackedCardSubtitle {
display: none;
}
}
.stackedCardsBlock .stackedCardRight .stackedCardSubtitle h4 {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
font-weight: 600 !important;
color: #262626;
transition: color 0.3s ease;
}
.stackedCardsBlock .stackedCardRight .stackedCardText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0;
transition: color 0.3s ease;
}
.clientColumns {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.clientColumns {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.clientColumns {
padding: 3rem 1rem;
}
}
.clientColumns {
gap: 120px !important;
}
@media (max-width: 850px) {
.clientColumns {
gap: 2rem !important;
flex-direction: column !important;
}
}
@media (max-width: 850px) {
.clientColumns .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
}
}
.clientColumns .wp-block-column:first-child {
position: sticky;
top: 150px;
align-self: flex-start;
}
@media (max-width: 850px) {
.clientColumns .wp-block-column:first-child {
position: static;
margin-bottom: 2rem;
}
}
.clientColumns .wp-block-column:first-child .lazyblock-anchorsclients-2lC0vL {
display: flex;
flex-direction: column;
gap: 1rem;
}
.clientColumns .wp-block-column:first-child .lazyblock-anchorsclients-2lC0vL p {
font-size: 1.2rem;
font-weight: 500;
color: #262626;
margin: 0 0 1.5rem 0;
padding-bottom: 12px;
position: relative;
width: fit-content;
}
.clientColumns .wp-block-column:first-child .lazyblock-anchorsclients-2lC0vL p::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #E88006;
border-radius: 1px;
}
.clientColumns .wp-block-column:first-child .lazyblock-anchorsclients-2lC0vL .classButton {
width: fit-content;
justify-content: space-between;
}
@media (max-width: 850px) {
.clientColumns .wp-block-column:first-child .lazyblock-anchorsclients-2lC0vL .classButton {
width: 100%;
}
}
.clientColumns .wp-block-column:last-child .wp-block-group {
margin-bottom: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.clientColumns .wp-block-column:last-child .wp-block-group:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.clientColumns .wp-block-column:last-child .wp-block-group h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.clientColumns .wp-block-column:last-child .wp-block-group h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.clientColumns .wp-block-column:last-child .wp-block-group h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.clientColumns .wp-block-column:last-child .wp-block-group h2 {
font-size: 1.8rem;
}
}
.clientColumns .wp-block-column:last-child .wp-block-group h2 {
margin: 0 0 1.5rem 0;
color: #262626;
}
.clientColumns .wp-block-column:last-child .wp-block-group > p:first-of-type {
font-size: 1.2rem;
font-weight: 500;
color: #262626;
margin: 0 0 1.5rem 0;
padding-bottom: 12px;
position: relative;
display: inline-block;
}
.clientColumns .wp-block-column:last-child .wp-block-group > p:first-of-type::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #E88006;
border-radius: 1px;
}
.clientColumns .wp-block-column:last-child .wp-block-group > .wp-block-columns {
gap: 3rem !important;
}
@media (max-width: 850px) {
.clientColumns .wp-block-column:last-child .wp-block-group > .wp-block-columns {
gap: 0 !important;
flex-direction: column !important;
}
}
@media (max-width: 850px) {
.clientColumns .wp-block-column:last-child .wp-block-group > .wp-block-columns .wp-block-column {
margin: 0 !important;
}
.clientColumns .wp-block-column:last-child .wp-block-group > .wp-block-columns .wp-block-column:last-child {
margin: 0 0 0 0 !important;
}
}
.clientColumns .wp-block-column:last-child .wp-block-group > .wp-block-columns .wp-block-column p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 0 0.5rem 0;
}
.page-id-509 .serviceContentContainer .serviceContentSingle {
padding-bottom: 3rem;
margin-bottom: 3rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.page-id-509 .serviceContentContainer .serviceContentSingle:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.page-id-509 .serviceContentContainer .serviceContentSingle h2 {
margin: 0 0 2rem 0;
padding-bottom: 12px;
position: relative;
display: inline-block;
}
.page-id-509 .serviceContentContainer .serviceContentSingle h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #E88006;
border-radius: 1px;
}
.serviceGrid {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.serviceGrid {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.serviceGrid {
padding: 3rem 1rem;
}
}
.serviceGrid {
margin: 0 auto;
}
.serviceGrid .serviceGridContainer {
max-width: 1450px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
overflow: visible;
}
@media only screen and (max-width: 1150px) {
.serviceGrid .serviceGridContainer {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 850px) {
.serviceGrid .serviceGridContainer {
grid-template-columns: 1fr;
gap: 28px;
}
}
.serviceGrid .serviceGridContainer .serviceGridCard {
position: relative;
text-decoration: none;
color: inherit;
display: block;
border-radius: 12px;
overflow: visible;
transition: all 0.3s ease;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardBg {
position: absolute;
left: 0;
right: 0;
bottom: -15px;
height: 100px;
z-index: 1;
border-radius: 8px;
overflow: hidden;
}
@media only screen and (max-width: 850px) {
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardBg {
bottom: -10px;
}
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardBg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent {
position: relative;
z-index: 2;
background: #E2E0D6;
padding: 0;
min-height: 400px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
border-radius: 12px;
overflow: hidden;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardImage {
width: 100%;
height: 200px;
margin-bottom: 0;
position: relative;
}
@media only screen and (max-width: 850px) {
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardImage {
height: 250px;
}
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardImage img {
width: 100%;
height: 100%;
object-fit: cover;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardText {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
padding: 30px;
min-height: 240px;
}
@media only screen and (max-width: 1250px) {
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardText {
min-height: auto;
}
}
@media only screen and (max-width: 1105px) {
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardText {
padding: 24px;
}
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardText h4 {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardText h4 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardText h4 {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardText h4 {
font-size: 1.2rem;
}
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardText h4 {
margin: 0 !important;
font-weight: 400;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardText p {
margin: 0 !important;
flex: 1;
color: #454545;
font-size: 0.9rem;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridCardContent .serviceGridCardText .serviceGridCardLink {
font-weight: 500;
color: #E88006;
margin-top: auto;
padding-top: 8px;
transition: color 0.3s ease;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridInfoButton {
position: absolute;
bottom: 15px;
right: 15px;
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.95);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridInfoButton em {
font-family: "latienne-pro", serif;
font-style: italic;
font-size: 1.2rem;
color: #262626;
font-weight: 500;
line-height: 1;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridInfoButton:hover {
background: #EFEEEC;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridInfoButton.active {
background: #E88006;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridInfoButton.active em {
color: #EFEEEC;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridInfoPopout {
position: absolute;
bottom: 60px;
right: 15px;
max-width: 280px;
min-width: 200px;
background: rgba(38, 38, 38, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
padding: 0;
z-index: 20;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.95);
transform-origin: bottom right;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
pointer-events: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridInfoPopout::after {
content: "";
position: absolute;
bottom: -8px;
right: 12px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(38, 38, 38, 0.95);
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridInfoPopout.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridInfoPopout .serviceGridInfoContent {
padding: 16px 20px;
color: #EFEEEC;
font-size: 0.95rem;
line-height: 1.5;
}
.serviceGrid .serviceGridContainer .serviceGridCard .serviceGridInfoPopout .serviceGridInfoContent p {
margin: 0;
color: #EFEEEC !important;
opacity: 0.95;
}
.serviceGrid .serviceGridContainer .serviceGridCard:hover {
transform: translateY(-5px);
}
.serviceGrid .serviceGridContainer .serviceGridCard:hover .serviceGridCardContent {
background: rgb(38, 38, 38);
}
.serviceGrid .serviceGridContainer .serviceGridCard:hover .serviceGridCardContent .serviceGridCardText h4 {
color: #EFEEEC;
}
.serviceGrid .serviceGridContainer .serviceGridCard:hover .serviceGridCardContent .serviceGridCardText p {
color: rgba(255, 255, 255, 0.8);
}
.serviceGrid .serviceGridContainer .serviceGridCard:hover .serviceGridCardContent .serviceGridCardText .serviceGridCardLink {
color: #E88006;
}
.fullWidthImage {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.fullWidthImage {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.fullWidthImage {
padding: 3rem 1rem;
}
}
.fullWidthImage {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.fullWidthImage img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebarCTA {
padding: 3rem;
border-radius: 12px;
}
@media (max-width: 990px) {
.sidebarCTA {
padding: 2rem;
}
}
.sidebarCTA .sidebarCTATitle {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.sidebarCTA .sidebarCTATitle {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.sidebarCTA .sidebarCTATitle {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.sidebarCTA .sidebarCTATitle {
font-size: 1.2rem;
}
}
.sidebarCTA .sidebarCTATitle {
margin: 0 0 1.5rem 0;
color: #262626;
font-weight: 400;
}
.sidebarCTA .sidebarCTAText {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 0 1.5rem 0;
color: #262626 !important;
font-weight: 300;
}
.sidebarCTA .classButton {
align-self: flex-start;
}
@media (max-width: 850px) {
.sidebarCTA .classButton {
align-self: stretch;
}
}
.projectSliderHome {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.projectSliderHome {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.projectSliderHome {
padding: 3rem 1rem;
}
}
.projectSliderHome {
margin: 0 auto;
padding-bottom: 80px !important;
}
@media (max-width: 850px) {
.projectSliderHome {
padding-bottom: 60px !important;
}
}
.projectSliderHome .projectSliderContainer .projectSliderHeader {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 3rem;
margin-bottom: 3rem;
}
@media (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderHeader {
flex-direction: column;
gap: 2rem;
align-items: flex-start;
}
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft {
gap: 1rem;
}
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMiniTitle {
display: flex;
align-items: center;
gap: 8px;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMiniTitle .projectSliderMiniIcon {
height: 16px;
width: auto;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMiniTitle h5 {
font-size: 1rem;
line-height: 1.5;
font-weight: 300;
}
@media only screen and (max-width: 1250px) {
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMiniTitle h5 {
font-size: 0.9rem;
}
}
@media only screen and (max-width: 1100px) {
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMiniTitle h5 {
font-size: 0.8rem;
}
}
@media only screen and (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMiniTitle h5 {
font-size: 1.2rem;
}
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMiniTitle h5 {
margin: 0;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMainTitle h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMainTitle h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMainTitle h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMainTitle h2 {
font-size: 1.8rem;
}
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMainTitle h2 {
margin: 0 !important;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMainTitle h2 em {
font-style: italic;
font-weight: 300;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderMainTitle h2 p {
margin: 0 !important;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderSupportingText {
max-width: 600px;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderLeft .projectSliderSupportingText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 !important;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderNavigation {
display: flex;
gap: 12px;
flex-shrink: 0;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderNavigation .classButton {
min-width: 50px;
padding: 15px;
font-size: 0;
}
@media (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderNavigation .classButton {
padding: 12px;
min-width: 45px;
}
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderNavigation .classButton::after {
margin-left: 0;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderNavigation .classButton.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderNavigation .classButton.disabled:hover {
background: #262626 !important;
border-color: #262626 !important;
color: #EFEEEC !important;
transform: none !important;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderNavigation .classButton.disabled:hover::after {
filter: none;
transform: none;
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderNavigation .classButton.projectNavPrev::after {
transform: rotate(180deg);
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderNavigation .classButton.projectNavPrev:hover:not(.disabled)::after {
transform: rotate(180deg) translateX(-2px);
}
.projectSliderHome .projectSliderContainer .projectSliderHeader .projectSliderNavigation .classButton.projectNavNext:hover:not(.disabled)::after {
transform: translateX(2px);
}
.projectSliderHome .projectSliderContainer .projectSliderWrapper {
overflow: hidden;
position: relative;
margin-bottom: 3rem;
}
@media (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderWrapper {
margin-bottom: 2rem;
}
}
.projectSliderHome .projectSliderContainer .projectSliderTrack {
display: flex;
gap: 24px;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderTrack {
gap: 16px;
}
}
.projectSliderHome .projectSliderContainer .projectSliderCard {
flex: 0 0 calc((100% - 48px) / 3);
min-width: 0;
}
@media (max-width: 1150px) {
.projectSliderHome .projectSliderContainer .projectSliderCard {
flex: 0 0 calc((100% - 24px) / 2);
}
}
@media (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderCard {
flex: 0 0 calc(100% - 16px);
}
}
.projectSliderHome .projectSliderContainer .projectSliderCard .projectSliderCardImage {
position: relative;
width: 100%;
height: 400px;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease;
}
@media (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderCard .projectSliderCardImage {
height: 300px;
}
}
.projectSliderHome .projectSliderContainer .projectSliderCard .projectSliderCardImage:hover {
transform: translateY(-4px);
}
.projectSliderHome .projectSliderContainer .projectSliderCard .projectSliderCardImage:hover img {
transform: scale(1.05);
}
.projectSliderHome .projectSliderContainer .projectSliderCard .projectSliderCardImage img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.projectSliderHome .projectSliderContainer .projectSliderCard .projectSliderCardImage .projectSliderTag {
position: absolute;
bottom: 20px;
left: 20px;
background: #EFEEEC;
color: #262626;
padding: 8px 16px;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
@media (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderCard .projectSliderCardImage .projectSliderTag {
bottom: 15px;
left: 15px;
padding: 6px 12px;
font-size: 0.9rem;
}
}
.projectSliderHome .projectSliderContainer .projectSliderCard .projectSliderCardImage .projectSliderTag p {
margin: 0 !important;
}
.projectSliderHome .projectSliderContainer .projectSliderCard .projectSliderCardImage:hover .projectSliderTag {
background: #E88006;
color: #EFEEEC;
transform: translateY(-2px);
}
.projectSliderHome .projectSliderContainer .projectSliderFooter {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderFooter {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
}
.projectSliderHome .projectSliderContainer .projectSliderFooter .projectSliderBottomText {
flex: 1;
}
.projectSliderHome .projectSliderContainer .projectSliderFooter .projectSliderBottomText p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 !important;
max-width: 600px;
}
.projectSliderHome .projectSliderContainer .projectSliderFooter .projectSliderBottomText p strong {
font-weight: 600;
color: #262626;
}
.projectSliderHome .projectSliderContainer .projectSliderFooter .projectSliderBottomText p em {
font-style: italic;
}
.projectSliderHome .projectSliderContainer .projectSliderFooter .projectSliderButton {
flex-shrink: 0;
}
@media (max-width: 850px) {
.projectSliderHome .projectSliderContainer .projectSliderFooter .projectSliderButton {
width: 100%;
}
.projectSliderHome .projectSliderContainer .projectSliderFooter .projectSliderButton .classButton {
width: 100%;
justify-content: center;
}
}
.twoColTextBlock {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.twoColTextBlock {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.twoColTextBlock {
padding: 3rem 1rem;
}
}
.twoColTextBlock {
margin: 0 auto;
padding-top: 0px !important;
}
.twoColTextBlock .twoColTextContainer {
margin: 0 auto;
}
.twoColTextBlock .twoColTextHeader {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
@media (max-width: 850px) {
.twoColTextBlock .twoColTextHeader {
gap: 1rem;
margin-bottom: 1rem;
}
}
.twoColTextBlock .twoColTextHeader .twoColTextMiniTitle {
display: flex;
align-items: center;
gap: 8px;
}
.twoColTextBlock .twoColTextHeader .twoColTextMiniTitle .twoColTextMiniIcon {
height: 16px;
width: auto;
}
.twoColTextBlock .twoColTextHeader .twoColTextMiniTitle h5 {
font-size: 1rem;
line-height: 1.5;
font-weight: 300;
}
@media only screen and (max-width: 1250px) {
.twoColTextBlock .twoColTextHeader .twoColTextMiniTitle h5 {
font-size: 0.9rem;
}
}
@media only screen and (max-width: 1100px) {
.twoColTextBlock .twoColTextHeader .twoColTextMiniTitle h5 {
font-size: 0.8rem;
}
}
@media only screen and (max-width: 850px) {
.twoColTextBlock .twoColTextHeader .twoColTextMiniTitle h5 {
font-size: 1.2rem;
}
}
.twoColTextBlock .twoColTextHeader .twoColTextMiniTitle h5 {
margin: 0;
}
.twoColTextBlock .twoColTextHeader .twoColTextMainTitle h2 {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.twoColTextBlock .twoColTextHeader .twoColTextMainTitle h2 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.twoColTextBlock .twoColTextHeader .twoColTextMainTitle h2 {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.twoColTextBlock .twoColTextHeader .twoColTextMainTitle h2 {
font-size: 1.8rem;
}
}
.twoColTextBlock .twoColTextHeader .twoColTextMainTitle h2 {
margin: 0 !important;
}
.twoColTextBlock .twoColTextHeader .twoColTextMainTitle h2 em {
font-style: italic;
font-weight: 300;
}
.twoColTextBlock .twoColTextHeader .twoColTextMainTitle h2 p {
margin: 0 !important;
}
.twoColTextBlock .twoColTextColumns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
margin-bottom: 3rem;
}
@media (max-width: 850px) {
.twoColTextBlock .twoColTextColumns {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 2rem;
}
}
.twoColTextBlock .twoColTextColumns .twoColTextColumn p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 0 1.5rem 0 !important;
}
.twoColTextBlock .twoColTextColumns .twoColTextColumn p:last-child {
margin-bottom: 0 !important;
}
.twoColTextBlock .twoColTextColumns .twoColTextColumn p strong {
font-weight: 600;
color: #262626;
}
.twoColTextBlock .twoColTextColumns .twoColTextColumn p em {
font-style: italic;
}
.twoColTextBlock .twoColTextColumns .twoColTextColumn ul, .twoColTextBlock .twoColTextColumns .twoColTextColumn ol {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 0 1.5rem 0;
padding-left: 2rem;
}
.twoColTextBlock .twoColTextColumns .twoColTextColumn ul:last-child, .twoColTextBlock .twoColTextColumns .twoColTextColumn ol:last-child {
margin-bottom: 0;
}
.twoColTextBlock .twoColTextColumns .twoColTextColumn ul li, .twoColTextBlock .twoColTextColumns .twoColTextColumn ol li {
margin-bottom: 1rem;
}
.twoColTextBlock .twoColTextColumns .twoColTextColumn ul li:last-child, .twoColTextBlock .twoColTextColumns .twoColTextColumn ol li:last-child {
margin-bottom: 0;
}
.twoColTextBlock .twoColTextButton .classButton {
display: inline-flex;
}
.consultancyProjectsImageBlock {
margin-bottom: 3rem;
padding-top: 90px;
}
@media (max-width: 1150px) {
.consultancyProjectsImageBlock {
padding-top: 4.5rem;
}
}
@media (max-width: 850px) {
.consultancyProjectsImageBlock {
margin-bottom: 2rem;
padding-top: 4.5rem;
}
}
.consultancyProjectsImageBlock#strategic {
padding-top: 0;
}
.consultancyProjectsImageBlock .consultancyProjectsImageWrapper {
position: relative;
min-height: 400px;
border-radius: 12px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
@media (max-width: 850px) {
.consultancyProjectsImageBlock .consultancyProjectsImageWrapper {
min-height: 300px;
border-radius: 8px;
}
}
.consultancyProjectsImageBlock .consultancyProjectsOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%);
z-index: 1;
}
.consultancyProjectsImageBlock .consultancyProjectsContent {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 3rem;
z-index: 2;
}
@media (max-width: 850px) {
.consultancyProjectsImageBlock .consultancyProjectsContent {
padding: 2rem;
}
}
.consultancyProjectsImageBlock .consultancyProjectsTitle {
font-size: 2rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.consultancyProjectsImageBlock .consultancyProjectsTitle {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 1100px) {
.consultancyProjectsImageBlock .consultancyProjectsTitle {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 850px) {
.consultancyProjectsImageBlock .consultancyProjectsTitle {
font-size: 1.5rem;
}
}
.consultancyProjectsImageBlock .consultancyProjectsTitle {
color: #EFEEEC;
margin: 0 0 1.5rem 0;
line-height: 1.3;
}
@media (max-width: 850px) {
.consultancyProjectsImageBlock .consultancyProjectsTitle {
margin-bottom: 1rem;
}
}
.consultancyProjectsImageBlock .consultancyProjectsTags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.consultancyProjectsImageBlock .consultancyProjectsTag {
display: inline-block;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
color: #EFEEEC !important;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none !important;
transition: all 0.3s ease;
}
@media (max-width: 850px) {
.consultancyProjectsImageBlock .consultancyProjectsTag {
padding: 6px 12px;
font-size: 0.9rem;
}
}
.consultancyProjectsImageBlock .consultancyProjectsTag:hover {
background: rgba(232, 128, 6, 0.9);
border-color: #E88006;
transform: translateY(-2px);
}
.consultancyStickyNav {
position: sticky;
top: 150px;
z-index: 999;
background: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: none !important;
}
@media (max-width: 850px) {
.consultancyStickyNav {
top: 100px;
}
}
.consultancyStickyNav .consultancyStickyNavContainer {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.consultancyStickyNav .consultancyStickyNavContainer {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.consultancyStickyNav .consultancyStickyNavContainer {
padding: 3rem 1rem;
}
}
.consultancyStickyNav .consultancyStickyNavContainer {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
display: flex;
align-items: center;
gap: 3rem;
}
@media (max-width: 850px) {
.consultancyStickyNav .consultancyStickyNavContainer {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
}
.consultancyStickyNav .consultancyStickyNavLabel {
font-weight: 500;
color: #262626;
font-size: 1rem;
flex-shrink: 0;
}
@media (max-width: 850px) {
.consultancyStickyNav .consultancyStickyNavLabel {
font-size: 0.95rem;
}
}
.consultancyStickyNav .consultancyStickyNavLinks {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
@media (max-width: 850px) {
.consultancyStickyNav .consultancyStickyNavLinks {
gap: 1rem;
}
}
.consultancyStickyNav .consultancyStickyNavLink {
padding: 10px 20px;
background: rgba(167, 178, 168, 0.48);
color: #262626;
text-decoration: none;
border-radius: 6px;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
@media (max-width: 850px) {
.consultancyStickyNav .consultancyStickyNavLink {
padding: 8px 16px;
font-size: 0.9rem;
}
}
.consultancyStickyNav .consultancyStickyNavLink::after {
content: "";
display: block;
width: 12px;
height: 12px;
background-image: url(//stephenbrowning.com/wp-content/uploads/2025/09/Group-24-1.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: invert(1);
transition: transform 0.3s ease;
}
@media (max-width: 850px) {
.consultancyStickyNav .consultancyStickyNavLink::after {
width: 10px;
height: 10px;
}
}
.consultancyStickyNav .consultancyStickyNavLink:hover {
background: #262626;
color: #EFEEEC;
transform: translateY(-2px);
}
.consultancyStickyNav .consultancyStickyNavLink:hover::after {
filter: none;
transform: translateX(3px);
}
.consultancyStickyNav .consultancyStickyNavLink.active {
background: #262626;
color: #EFEEEC;
}
.consultancyStickyNav .consultancyStickyNavLink.active::after {
filter: none;
}
.generalProjectsImageBlock {
margin: 0 auto;
padding: 60px 0;
}
@media (max-width: 1150px) {
.generalProjectsImageBlock {
padding: 3rem 0;
}
}
@media (max-width: 850px) {
.generalProjectsImageBlock {
padding: 2rem 0;
}
}
.generalProjectsImageBlock .generalProjectsImageWrapper {
position: relative;
width: 100%;
height: 500px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
@media (max-width: 850px) {
.generalProjectsImageBlock .generalProjectsImageWrapper {
height: 400px;
}
}
.generalProjectsImageBlock .generalProjectsOverlay {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
z-index: 1;
}
.generalProjectsImageBlock .generalProjectsContent {
position: relative;
z-index: 2;
padding: 2rem;
width: 100%;
}
@media (max-width: 850px) {
.generalProjectsImageBlock .generalProjectsContent {
padding: 1rem;
}
}
.generalProjectsImageBlock .generalProjectsTitle {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.generalProjectsImageBlock .generalProjectsTitle {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 1100px) {
.generalProjectsImageBlock .generalProjectsTitle {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 850px) {
.generalProjectsImageBlock .generalProjectsTitle {
font-size: 1.8rem;
}
}
.generalProjectsImageBlock .generalProjectsTitle {
color: #EFEEEC;
margin: 0 0 1.5rem 0;
}
.generalProjectsImageBlock .generalProjectsTags {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 850px) {
.generalProjectsImageBlock .generalProjectsTags {
gap: 8px;
}
}
.generalProjectsImageBlock .generalProjectsTag {
padding: 8px 16px;
border-radius: 6px;
font-size: 0.95rem;
transition: all 0.3s ease;
}
@media (max-width: 850px) {
.generalProjectsImageBlock .generalProjectsTag {
padding: 6px 12px;
font-size: 0.9rem;
}
}
.generalProjectsImageBlock .generalProjectsTag p {
margin: 0 !important;
line-height: 1.2;
opacity: 1 !important;
}
.sidebarCaseStudies {
padding-top: 2rem;
}
@media only screen and (max-width: 850px) {
.sidebarCaseStudies {
padding-top: 2rem;
}
}
.sidebarCaseStudies .sidebarCaseStudiesTitle {
font-size: 1rem !important;
font-weight: 400 !important;
color: #262626 !important;
margin: 0 0 1.5rem 0 !important;
opacity: 1 !important;
}
.sidebarCaseStudies .sidebarCaseStudiesList {
display: flex;
flex-direction: column;
gap: 3rem;
}
.sidebarCaseStudies .sidebarCaseStudyCard:hover .sidebarCaseStudyImage img {
transform: scale(1.05);
}
.sidebarCaseStudies .sidebarCaseStudyCard:hover .classButton {
background: #262626 !important;
border-color: #262626 !important;
}
.sidebarCaseStudies .sidebarCaseStudyCard:hover .classButton::after {
filter: none !important;
}
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyLink {
display: block;
text-decoration: none;
color: inherit;
}
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyImage {
width: 100%;
aspect-ratio: 16/9;
border-radius: 8px;
overflow: hidden;
}
@media only screen and (max-width: 850px) {
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyImage {
aspect-ratio: 16/9;
}
}
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyImage img {
width: 100%;
height: 100% !important;
object-fit: cover;
transition: transform 0.3s ease;
margin: 0 !important;
border-radius: 0 !important;
}
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent {
padding-top: 1rem;
}
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyTag {
display: inline-block;
background: #DCD0DA;
color: #262626;
padding: 6px 12px;
border-radius: 6px;
font-size: 0.9rem;
margin-bottom: 1rem;
font-weight: 300;
}
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
@media only screen and (max-width: 850px) {
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .sidebarCaseStudyTitle {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
}
@media only screen and (max-width: 850px) and (max-width: 1250px) {
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .sidebarCaseStudyTitle {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 850px) and (max-width: 1100px) {
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .sidebarCaseStudyTitle {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) and (max-width: 850px) {
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .sidebarCaseStudyTitle {
font-size: 1.2rem;
}
}
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .sidebarCaseStudyTitle {
font-size: 1.3rem;
line-height: 1.3;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .sidebarCaseStudyTitle {
font-size: 1.2rem;
}
}
@media only screen and (max-width: 1100px) {
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .sidebarCaseStudyTitle {
font-size: 1.1rem;
}
}
@media only screen and (max-width: 850px) {
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .sidebarCaseStudyTitle {
font-size: 1rem;
}
}
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .sidebarCaseStudyTitle {
margin: 0 !important;
color: #262626 !important;
flex: 1;
font-weight: 400;
}
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .classButton {
width: 48px;
height: 48px;
min-width: 48px;
padding: 0 !important;
font-size: 0;
background: transparent !important;
border: 2px solid #262626 !important;
justify-content: center !important;
align-items: center !important;
flex-shrink: 0;
}
@media only screen and (max-width: 850px) {
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .classButton {
width: 40px;
height: 40px;
min-width: 40px;
}
}
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .classButton::after {
filter: invert(1) !important;
margin: 0 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
@media only screen and (max-width: 850px) {
.sidebarCaseStudies .sidebarCaseStudyCard .sidebarCaseStudyContent .sidebarCaseStudyBottom .classButton::after {
width: 14px;
height: 14px;
}
}
.splitThem {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.page-transition-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(38, 38, 38, 0.2);
backdrop-filter: blur(8px);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
pointer-events: none;
overflow: hidden;
}
.page-transition-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.page-transition-overlay .page-transition-content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
padding: 2rem;
}
.page-transition-overlay .page-transition-svg {
width: 80px;
height: 80px;
overflow: visible;
}
@media (max-width: 850px) {
.page-transition-overlay .page-transition-svg {
width: 60px;
height: 60px;
}
}
.page-transition-overlay .page-transition-svg .loader-circle {
fill: none;
stroke: #E88006;
stroke-width: 4;
stroke-dasharray: 280;
stroke-dashoffset: 280;
stroke-linecap: round;
animation: simpleRotate 1.5s ease-in-out infinite;
transform-origin: center;
}
.page-transition-overlay .page-transition-text {
display: none;
}
@keyframes simpleRotate {
0% {
stroke-dashoffset: 280;
transform: rotate(0deg);
}
50% {
stroke-dashoffset: 75;
transform: rotate(180deg);
}
100% {
stroke-dashoffset: 280;
transform: rotate(360deg);
}
}
.aboutPageCTAs {
gap: 24px !important;
display: flex;
flex-direction: column;
}
.wp-block-lazyblock-ctablockbox {
margin-left: 0 !important;
margin-right: 0 !important;
}
.listProjs p {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0 !important;
padding: 1.5rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.listProjs p:first-of-type {
padding-top: 0;
}
.listProjs p:last-of-type {
padding-bottom: 0;
border-bottom: none;
}
.aboutPageImage {
max-width: 1450px;
margin: 0 auto;
padding: 80px 80px;
}
@media only screen and (max-width: 1150px) {
.aboutPageImage {
padding: 3rem 2rem;
}
}
@media only screen and (max-width: 850px) {
.aboutPageImage {
padding: 3rem 1rem;
}
}
.aboutPageImage {
padding-top: 0px !important;
}
.aboutPageImage .aboutPageImageWrapper {
position: relative;
width: 100%;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease;
}
.aboutPageImage .aboutPageImageWrapper:hover {
transform: translateY(-4px);
}
.aboutPageImage .aboutPageImageWrapper:hover .aboutPageImageImg {
transform: scale(1.05);
}
.aboutPageImage .aboutPageImageWrapper:hover .aboutPageImageTag {
background: #E88006;
color: #EFEEEC;
transform: translateY(-2px);
}
.aboutPageImage .aboutPageImageWrapper .aboutPageImageImg {
width: 100%;
height: auto;
display: block;
object-fit: cover;
transition: transform 0.3s ease;
}
.aboutPageImage .aboutPageImageWrapper .aboutPageImageTag {
position: absolute;
bottom: 20px;
left: 20px;
background: #EFEEEC;
color: #262626;
padding: 8px 16px;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
@media (max-width: 850px) {
.aboutPageImage .aboutPageImageWrapper .aboutPageImageTag {
bottom: 15px;
left: 15px;
padding: 6px 12px;
font-size: 0.9rem;
}
}
.wp-block-lazyblock-stephenbrowningphoto {
margin: 0 !important;
}
.aboutSidebarProfile {
margin-bottom: 24px !important;
}
.aboutSidebarProfile .aboutSidebarProfileCard {
background: #DCD0DA;
border-radius: 12px;
padding: 2rem;
margin-bottom: 1.5rem;
display: flex;
justify-content: center;
}
@media (max-width: 850px) {
.aboutSidebarProfile .aboutSidebarProfileCard {
padding: 1.5rem;
}
}
.aboutSidebarProfile .aboutSidebarProfileCard .aboutSidebarProfileImg {
width: 200px !important;
height: auto;
display: block;
border-radius: 12px;
margin: 1.5rem !important;
}
@media (max-width: 850px) {
.aboutSidebarProfile .aboutSidebarProfileCard .aboutSidebarProfileImg {
width: 180px !important;
margin: 1.5rem !important;
}
}
.aboutSidebarProfile .aboutSidebarProfileText {
text-align: left;
}
.aboutSidebarProfile .aboutSidebarProfileText .aboutSidebarProfileName {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
}
@media only screen and (max-width: 1250px) {
.aboutSidebarProfile .aboutSidebarProfileText .aboutSidebarProfileName {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1100px) {
.aboutSidebarProfile .aboutSidebarProfileText .aboutSidebarProfileName {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 850px) {
.aboutSidebarProfile .aboutSidebarProfileText .aboutSidebarProfileName {
font-size: 1.2rem;
}
}
.aboutSidebarProfile .aboutSidebarProfileText .aboutSidebarProfileName {
margin: 0 0 0.5rem 0;
color: #262626;
}
.aboutSidebarProfile .aboutSidebarProfileText .aboutSidebarProfileTitle {
color: #262626;
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
margin: 0;
color: rgba(0, 0, 0, 0.6) !important;
font-size: 0.95rem;
}
.projectImageWithCredit .projectImageWrapper {
position: relative;
border-radius: 12px;
overflow: hidden;
}
.projectImageWithCredit .projectImageWrapper img {
width: 100%;
height: auto;
display: block;
}
.projectImageWithCredit .projectImageWrapper .projectImageInfoButton {
position: absolute;
bottom: 35px;
right: 15px;
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.95);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.projectImageWithCredit .projectImageWrapper .projectImageInfoButton em {
font-family: "latienne-pro", serif;
font-style: italic;
font-size: 1.2rem;
color: #262626;
font-weight: 500;
line-height: 1;
}
.projectImageWithCredit .projectImageWrapper .projectImageInfoButton:hover {
background: #EFEEEC;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.projectImageWithCredit .projectImageWrapper .projectImageInfoButton.active {
background: #E88006;
}
.projectImageWithCredit .projectImageWrapper .projectImageInfoButton.active em {
color: #EFEEEC;
}
.projectImageWithCredit .projectImageWrapper .projectImageInfoPopout {
position: absolute;
bottom: 80px;
right: 15px;
max-width: 280px;
min-width: 200px;
background: rgba(38, 38, 38, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
padding: 0;
z-index: 20;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.95);
transform-origin: bottom right;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
pointer-events: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.projectImageWithCredit .projectImageWrapper .projectImageInfoPopout::after {
content: "";
position: absolute;
bottom: -8px;
right: 12px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(38, 38, 38, 0.95);
}
.projectImageWithCredit .projectImageWrapper .projectImageInfoPopout.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.projectImageWithCredit .projectImageWrapper .projectImageInfoPopout .projectImageInfoContent {
padding: 16px 20px;
color: #EFEEEC;
font-size: 0.95rem;
line-height: 1.5;
}
.projectImageWithCredit .projectImageWrapper .projectImageInfoPopout .projectImageInfoContent p {
margin: 0;
color: #EFEEEC !important;
opacity: 0.95;
}
@media (max-width: 850px) {
.projectImageWithCredit .projectImageWrapper .projectImageInfoPopout {
right: 10px;
left: 10px;
max-width: none;
min-width: auto;
}
}
.outlineGroup {
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 8px !important;
padding: 2rem !important;
margin: 2rem 0 !important;
}