/* ********************************************************** * SECTION COLUMN STYLES * ******************************************************** */ /* ***************************** * CONTAINER ADDITIONAL STYLES * *************************** */ /* ****************************** * BACKGROUND COLORS * *************************** */ .bg-primary { background: var(--e-global-color-primary); } .bg-secondary { background: var(--e-global-color-secondary); } .bg-accent { background: var(--e-global-color-accent); } /* ****************************** * PADDING (ALL SIDES) * *************************** */ .padding-0-5.e-con, .padding-0-5.elementor-element { padding: var(--space-0-5) !important; } .padding-1.e-con, .padding-1.elementor-element { padding: var(--space-1) !important; } .padding-1-5.e-con, .padding-1-5.elementor-element { padding: var(--space-1-5) !important; } .padding-xs.e-con, .padding-xs.elementor-element { padding: var(--space-xs) !important; } .padding-3.e-con, .padding-3.elementor-element { padding: var(--space-3) !important; } .padding-sm.e-con, .padding-sm.elementor-element { padding: var(--space-sm) !important; } .padding-md.e-con, .padding-md.elementor-element { padding: var(--space-md) !important; } .padding-lg.e-con, .padding-lg.elementor-element { padding: var(--space-lg) !important; } .padding-xl.e-con, .padding-xl.elementor-element { padding: var(--space-xl) !important; } /* Small mobile: compress all-around padding on X, keep Y */ @media (max-width: 480px) { .padding-3.e-con, .padding-3.elementor-element { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; } .padding-sm.e-con, .padding-sm.elementor-element { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; } .padding-md.e-con, .padding-md.elementor-element { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; } .padding-lg.e-con, .padding-lg.elementor-element { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; } .padding-xl.e-con, .padding-xl.elementor-element { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; } } /* ****************************** * PADDING Y (TOP + BOTTOM) * *************************** */ .padding-y-0-5 { padding-top: var(--space-0-5) !important; padding-bottom: var(--space-0-5) !important; } .padding-y-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; } .padding-y-1-5 { padding-top: var(--space-1-5) !important; padding-bottom: var(--space-1-5) !important; } .padding-y-xs { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; } .padding-y-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; } .padding-y-sm { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; } .padding-y-md { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; } .padding-y-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; } .padding-y-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; } /* PADDING TOP */ .padding-top-0-5.e-con, .padding-top-0-5.elementor-element { padding-top: var(--space-0-5) !important; } .padding-top-1.e-con, .padding-top-1.elementor-element { padding-top: var(--space-1) !important; } .padding-top-1-5.e-con, .padding-top-1-5.elementor-element { padding-top: var(--space-1-5) !important; } .padding-top-xs.e-con, .padding-top-xs.elementor-element { padding-top: var(--space-xs) !important; } .padding-top-3.e-con, .padding-top-3.elementor-element { padding-top: var(--space-3) !important; } .padding-top-sm.e-con, .padding-top-sm.elementor-element { padding-top: var(--space-sm) !important; } .padding-top-md.e-con, .padding-top-md.elementor-element { padding-top: var(--space-md) !important; } .padding-top-lg.e-con, .padding-top-lg.elementor-element { padding-top: var(--space-lg) !important; } .padding-top-xl.e-con, .padding-top-xl.elementor-element { padding-top: var(--space-xl) !important; } /* PADDING BOTTOM */ .padding-bottom-0-5.e-con, .padding-bottom-0-5.elementor-element { padding-bottom: var(--space-0-5) !important; } .padding-bottom-1.e-con, .padding-bottom-1.elementor-element { padding-bottom: var(--space-1) !important; } .padding-bottom-1-5.e-con, .padding-bottom-1-5.elementor-element { padding-bottom: var(--space-1-5) !important; } .padding-bottom-xs.e-con, .padding-bottom-xs.elementor-element { padding-bottom: var(--space-xs) !important; } .padding-bottom-3.e-con, .padding-bottom-3.elementor-element { padding-bottom: var(--space-3) !important; } .padding-bottom-sm.e-con, .padding-bottom-sm.elementor-element { padding-bottom: var(--space-sm) !important; } .padding-bottom-md.e-con, .padding-bottom-md.elementor-element { padding-bottom: var(--space-md) !important; } .padding-bottom-lg.e-con, .padding-bottom-lg.elementor-element { padding-bottom: var(--space-lg) !important; } .padding-bottom-xl.e-con, .padding-bottom-xl.elementor-element { padding-bottom: var(--space-xl) !important; } /* ****************************** * PADDING X (LEFT + RIGHT) * *************************** */ .padding-x-0-5 { padding-left: var(--space-0-5) !important; padding-right: var(--space-0-5) !important; } .padding-x-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; } .padding-x-1-5 { padding-left: var(--space-1-5) !important; padding-right: var(--space-1-5) !important; } .padding-x-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; } .padding-x-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; } .padding-x-sm { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; } .padding-x-md { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; } .padding-x-lg { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; } .padding-x-xl { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; } /* PADDING LEFT */ .padding-left-0-5.e-con { padding-left: var(--space-0-5) !important; } .padding-left-1.e-con { padding-left: var(--space-1) !important; } .padding-left-1-5.e-con { padding-left: var(--space-1-5) !important; } .padding-left-xs.e-con { padding-left: var(--space-xs) !important; } .padding-left-3.e-con { padding-left: var(--space-3) !important; } .padding-left-sm.e-con { padding-left: var(--space-sm) !important; } .padding-left-md.e-con { padding-left: var(--space-md) !important; } .padding-left-lg.e-con { padding-left: var(--space-lg) !important; } .padding-left-xl.e-con { padding-left: var(--space-xl) !important; } /* PADDING RIGHT */ .padding-right-0-5.e-con { padding-right: var(--space-0-5) !important; } .padding-right-1.e-con { padding-right: var(--space-1) !important; } .padding-right-1-5.e-con { padding-right: var(--space-1-5) !important; } .padding-right-xs.e-con { padding-right: var(--space-xs) !important; } .padding-right-3.e-con { padding-right: var(--space-3) !important; } .padding-right-sm.e-con { padding-right: var(--space-sm) !important; } .padding-right-md.e-con { padding-right: var(--space-md) !important; } .padding-right-lg.e-con { padding-right: var(--space-lg) !important; } .padding-right-xl.e-con { padding-right: var(--space-xl) !important; } /* Small mobile: compress X only, Y stays at 767px values */ @media (max-width: 480px) { .padding-x-3, .padding-left-3.e-con, .padding-right-3.e-con { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; } .padding-x-sm, .padding-left-sm.e-con, .padding-right-sm.e-con { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; } .padding-x-md, .padding-left-md.e-con, .padding-right-md.e-con { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; } .padding-x-lg, .padding-left-lg.e-con, .padding-right-lg.e-con { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; } .padding-x-xl, .padding-left-xl.e-con, .padding-right-xl.e-con { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; } } /* ****************************** * MARGIN Y (TOP + BOTTOM) * *************************** */ .margin-y-0-5.e-con { margin-top: var(--space-0-5) !important; margin-bottom: var(--space-0-5) !important; } .margin-y-1.e-con { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; } .margin-y-1-5.e-con { margin-top: var(--space-1-5) !important; margin-bottom: var(--space-1-5) !important; } .margin-y-xs.e-con { margin-top: var(--space-xs) !important; margin-bottom: var(--space-xs) !important; } .margin-y-3.e-con { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; } .margin-y-sm.e-con { margin-top: var(--space-sm) !important; margin-bottom: var(--space-sm) !important; } .margin-y-md.e-con { margin-top: var(--space-md) !important; margin-bottom: var(--space-md) !important; } .margin-y-lg.e-con { margin-top: var(--space-lg) !important; margin-bottom: var(--space-lg) !important; } .margin-y-xl.e-con { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; } /* MARGIN TOP */ .margin-top-0-5.e-con, .margin-top-0-5.elementor-element, .margin-top-0-5.elementor-widget { margin-top: var(--space-0-5) !important; } .margin-top-1.e-con, .margin-top-1.elementor-element, .margin-top-1.elementor-widget { margin-top: var(--space-1) !important; } .margin-top-1-5.e-con, .margin-top-1-5.elementor-element, .margin-top-1-5.elementor-widget { margin-top: var(--space-1-5) !important; } .margin-top-xs.e-con, .margin-top-xs.elementor-element, .margin-top-xs.elementor-widget { margin-top: var(--space-xs) !important; } .margin-top-3.e-con, .margin-top-3.elementor-element, .margin-top-3.elementor-widget { margin-top: var(--space-3) !important; } .margin-top-sm.e-con, .margin-top-sm.elementor-element, .margin-top-sm.elementor-widget { margin-top: var(--space-sm) !important; } .margin-top-md.e-con, .margin-top-md.elementor-element, .margin-top-md.elementor-widget { margin-top: var(--space-md) !important; } .margin-top-lg.e-con, .margin-top-lg.elementor-element, .margin-top-lg.elementor-widget { margin-top: var(--space-lg) !important; } .margin-top-xl.e-con, .margin-top-xl.elementor-element, .margin-top-xl.elementor-widget { margin-top: var(--space-xl) !important; } @media (max-width: 767px) { .margin-top-md.e-con.margin-top-767-xl { margin-top: var(--space-xl) !important; } } /* MARGIN BOTTOM */ .margin-bottom-0-5.e-con, .margin-bottom-0-5.elementor-element, .margin-bottom-0-5.elementor-widget { margin-bottom: var(--space-0-5) !important; } .margin-bottom-1.e-con, .margin-bottom-1.elementor-element, .margin-bottom-1.elementor-widget { margin-bottom: var(--space-1) !important; } .margin-bottom-1-5.e-con, .margin-bottom-1-5.elementor-element, .margin-bottom-1-5.elementor-widget { margin-bottom: var(--space-1-5) !important; } .margin-bottom-xs.e-con, .margin-bottom-xs.elementor-element, .margin-bottom-xs.elementor-widget { margin-bottom: var(--space-xs) !important; } .margin-bottom-3.e-con, .margin-bottom-3.elementor-element, .margin-bottom-3.elementor-widget { margin-bottom: var(--space-3) !important; } .margin-bottom-sm.e-con, .margin-bottom-sm.elementor-element, .margin-bottom-sm.elementor-widget { margin-bottom: var(--space-sm) !important; } .margin-bottom-md.e-con, .margin-bottom-md.elementor-element, .margin-bottom-md.elementor-widget { margin-bottom: var(--space-md) !important; } .margin-bottom-lg.e-con, .margin-bottom-lg.elementor-element, .margin-bottom-lg.elementor-widget { margin-bottom: var(--space-lg) !important; } .margin-bottom-xl.e-con, .margin-bottom-xl.elementor-element, .margin-bottom-xl.elementor-widget { margin-bottom: var(--space-xl) !important; } /* ****************************** * ZERO OVERRIDES * *************************** */ .no-padding-top.e-con, .no-padding-top.elementor-element { padding-top: 0 !important; } .no-padding-bottom.e-con, .no-padding-bottom.elementor-element { padding-bottom: 0 !important; } .no-padding-left.e-con, .no-padding-left.elementor-element { padding-left: 0 !important; } .no-padding-right.e-con, .no-padding-right.elementor-element { padding-right: 0 !important; } .no-margin-top.e-con { margin-top: 0 !important; } .no-margin-bottom.e-con { margin-bottom: 0 !important; } /* Padding Mobile 767px Overrides */ @media (max-width: 767px) { .padding-mobile-0, .padding-mobile-0.content-wrapper, .banner-section > .content-wrapper.padding-mobile-0.content-wrapper { padding-left: 0 !important; padding-right: 0 !important; } } /* ****************************** * GAP * *************************** */ .gap-0.e-con, .gap-0 .e-con-inner, .gap-0.content-wrapper { gap: var(--space-0) !important; } .gap-0-5.e-con, .gap-0-5 .e-con-inner, .gap-0-5.content-wrapper { gap: var(--space-0-5) !important; } .gap-1.e-con, .gap-1 .e-con-inner, .gap-1.content-wrapper { gap: var(--space-1) !important; } .gap-1-5.e-con, .gap-1-5 .e-con-inner, .gap-1-5.content-wrapper { gap: var(--space-1-5) !important; } .gap-xs.e-con, .gap-xs .e-con-inner, .gap-xs.content-wrapper { gap: var(--space-xs) !important; } .gap-3.e-con, .gap-3 .e-con-inner, .gap-3.content-wrapper { gap: var(--space-3) !important; } .gap-sm.e-con, .gap-sm .e-con-inner, .gap-sm.content-wrapper { gap: var(--space-sm) !important; } .gap-md.e-con, .gap-md .e-con-inner, .gap-md.content-wrapper { gap: var(--space-md) !important; } .gap-lg.e-con, .gap-lg .e-con-inner, .gap-lg.content-wrapper { gap: var(--space-lg) !important; } .gap-xl.e-con, .gap-xl .e-con-inner, .gap-xl.content-wrapper { gap: var(--space-xl) !important; } /* Gap Tablet 1024px Overrides */ @media (max-width: 1024px) { .gap-tablet-0.e-con, .gap-tablet-0 .e-con-inner, .gap-tablet-0.content-wrapper { gap: var(--space-0) !important; } .gap-tablet-0-5.e-con, .gap-tablet-0-5 .e-con-inner, .gap-tablet-0-5.content-wrapper { gap: var(--space-0-5) !important; } .gap-tablet-1.e-con, .gap-tablet-1 .e-con-inner, .gap-tablet-1.content-wrapper { gap: var(--space-1) !important; } .gap-tablet-1-5.e-con, .gap-tablet-1-5 .e-con-inner, .gap-tablet-1-5.content-wrapper { gap: var(--space-1-5) !important; } .gap-tablet-xs.e-con, .gap-tablet-xs .e-con-inner, .gap-tablet-xs.content-wrapper { gap: var(--space-xs) !important; } .gap-tablet-3.e-con, .gap-tablet-3 .e-con-inner, .gap-tablet-3.content-wrapper { gap: var(--space-3) !important; } .gap-tablet-sm.e-con, .gap-tablet-sm .e-con-inner, .gap-tablet-sm.content-wrapper { gap: var(--space-sm) !important; } .gap-tablet-md.e-con, .gap-tablet-md .e-con-inner, .gap-tablet-md.content-wrapper { gap: var(--space-md) !important; } .gap-tablet-lg.e-con, .gap-tablet-lg .e-con-inner, .gap-tablet-lg.content-wrapper { gap: var(--space-lg) !important; } .gap-tablet-xl.e-con, .gap-tablet-xl .e-con-inner, .gap-tablet-xl.content-wrapper { gap: var(--space-xl) !important; } } /* Gap Mobile 767px Overrides */ @media (max-width: 767px) { .gap-mobile-0.e-con, .gap-mobile-0 .e-con-inner, .gap-mobile-0.content-wrapper { gap: var(--space-0) !important; } .gap-mobile-0-5.e-con, .gap-mobile-0-5 .e-con-inner, .gap-mobile-0-5.content-wrapper { gap: var(--space-0-5) !important; } .gap-mobile-1.e-con, .gap-mobile-1 .e-con-inner, .gap-mobile-1.content-wrapper { gap: var(--space-1) !important; } .gap-mobile-1-5.e-con, .gap-mobile-1-5 .e-con-inner, .gap-mobile-1-5.content-wrapper { gap: var(--space-1-5) !important; } .gap-mobile-xs.e-con, .gap-mobile-xs .e-con-inner, .gap-mobile-xs.content-wrapper { gap: var(--space-xs) !important; } .gap-mobile-3.e-con, .gap-mobile-3 .e-con-inner, .gap-mobile-3.content-wrapper { gap: var(--space-3) !important; } .gap-mobile-sm.e-con, .gap-mobile-sm .e-con-inner, .gap-mobile-sm.content-wrapper { gap: var(--space-sm) !important; } .gap-mobile-md.e-con, .gap-mobile-md .e-con-inner, .gap-mobile-md.content-wrapper { gap: var(--space-md) !important; } .gap-mobile-lg.e-con, .gap-mobile-lg .e-con-inner, .gap-mobile-lg.content-wrapper { gap: var(--space-lg) !important; } .gap-mobile-xl.e-con, .gap-mobile-xl .e-con-inner, .gap-mobile-xl.content-wrapper { gap: var(--space-xl) !important; } } /* ****************************** * BORDER RADIUS * *************************** */ .radius-xs.e-con, .radius-xs.elementor-element, .img-radius-xs, .img-radius-xs img, .bg-wrapper:has(.srcset-bg.img-radius-xs) .overlay, .bg-wrapper:has(.srcset-bg.img-radius-xs) .overlay:before, .bg-wrapper:has(.srcset-bg.img-radius-xs) .overlay:after, .bg-wrapper:has(.srcset-bg.img-radius-xs) .srcset-bg .elementor-widget-container { border-radius: var(--radius-xs) !important; } .radius-sm.e-con, .radius-sm.elementor-element, .img-radius-sm, .img-radius-sm img, .bg-wrapper:has(.srcset-bg.img-radius-sm) .overlay, .bg-wrapper:has(.srcset-bg.img-radius-sm) .overlay:before, .bg-wrapper:has(.srcset-bg.img-radius-sm) .overlay:after, .bg-wrapper:has(.srcset-bg.img-radius-sm) .srcset-bg .elementor-widget-container { border-radius: var(--radius-sm) !important; } .radius-md.e-con, .radius-md.elementor-element, .img-radius-md, .img-radius-md img, .bg-wrapper:has(.srcset-bg.img-radius-md) .overlay, .bg-wrapper:has(.srcset-bg.img-radius-md) .overlay:before, .bg-wrapper:has(.srcset-bg.img-radius-md) .overlay:after, .bg-wrapper:has(.srcset-bg.img-radius-md) .srcset-bg .elementor-widget-container { border-radius: var(--radius-md) !important; } .radius-lg.e-con, .radius-lg.elementor-element, .img-radius-lg, .img-radius-lg img, .bg-wrapper:has(.srcset-bg.img-radius-lg) .overlay, .bg-wrapper:has(.srcset-bg.img-radius-lg) .overlay:before, .bg-wrapper:has(.srcset-bg.img-radius-lg) .overlay:after, .bg-wrapper:has(.srcset-bg.img-radius-lg) .srcset-bg .elementor-widget-container { border-radius: var(--radius-lg) !important; } .radius-xl.e-con, .radius-xl.elementor-element, .img-radius-xl, .img-radius-xl img, .bg-wrapper:has(.srcset-bg.img-radius-xl) .overlay, .bg-wrapper:has(.srcset-bg.img-radius-xl) .overlay:before, .bg-wrapper:has(.srcset-bg.img-radius-xl) .overlay:after, .bg-wrapper:has(.srcset-bg.img-radius-xl) .srcset-bg .elementor-widget-container { border-radius: var(--radius-xl) !important; } @media (max-width: 1024px) { .radius-lg.e-con, .radius-lg.elementor-element, .img-radius-lg img, .bg-wrapper:has(.srcset-bg.img-radius-lg) .overlay, .bg-wrapper:has(.srcset-bg.img-radius-lg) .overlay:before, .bg-wrapper:has(.srcset-bg.img-radius-lg) .overlay:after, .bg-wrapper:has(.srcset-bg.img-radius-lg) .srcset-bg .elementor-widget-container { border-radius: var(--radius-lg) !important; } .radius-xl.e-con, .radius-xl.elementor-element, .img-radius-xl img, .bg-wrapper:has(.srcset-bg.img-radius-xl) .overlay, .bg-wrapper:has(.srcset-bg.img-radius-xl) .overlay:before, .bg-wrapper:has(.srcset-bg.img-radius-xl) .overlay:after, .bg-wrapper:has(.srcset-bg.img-radius-xl) .srcset-bg .elementor-widget-container { border-radius: var(--radius-xl) !important; } } @media (max-width: 767px) { .radius-lg.e-con, .radius-lg.elementor-element, .img-radius-lg img, .bg-wrapper:has(.srcset-bg.img-radius-lg) .overlay, .bg-wrapper:has(.srcset-bg.img-radius-lg) .overlay:before, .bg-wrapper:has(.srcset-bg.img-radius-lg) .overlay:after, .bg-wrapper:has(.srcset-bg.img-radius-lg) .srcset-bg .elementor-widget-container { border-radius: var(--radius-lg) !important; } .radius-xl.e-con, .radius-xl.elementor-element, .img-radius-xl img, .bg-wrapper:has(.srcset-bg.img-radius-xl) .overlay, .bg-wrapper:has(.srcset-bg.img-radius-xl) .overlay:before, .bg-wrapper:has(.srcset-bg.img-radius-xl) .overlay:after, .bg-wrapper:has(.srcset-bg.img-radius-xl) .srcset-bg .elementor-widget-container { border-radius: var(--radius-xl) !important; } } /* ***************************** * SRCSET BG IMAGE SHADOW - for single image using srcset * good for Text L Img R type layouts * and Image Shadow * *************************** */ .bg-wrapper:has(.srcset-bg.img-shadow) .overlay, .bg-wrapper:has(.srcset-bg.img-shadow) .overlay:before, .img-shadow img { box-shadow: 0px 0px 10px #00000035; } /* ***************************** * BG WRAPPER INSET SHADOW * Add class "shadow-inset" to bg-wrapper in Elementor * *************************** */ .bg-wrapper.shadow-inset::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 15px 0px inset; } /* ***************************** * HERO * *************************** */ .hero { background-color: var(--color-primary) !important; } /* FULL WIDTH HERO PADDING */ body.home .hero { padding: 35rem 0 5rem; } body:not(.home) .hero { padding: 25rem 0 5rem; } /* HERO LINKS */ .hero-links .elementor-widget-heading { padding: .5rem 4rem .5rem; border-bottom: none; display: inline-block; background: linear-gradient(#B8212A, #B8212A) no-repeat center bottom / 100% 4px !important; transition: background-size .5s, color .35s; pointer-events: auto; margin: 0 1rem; } .hero-links .elementor-widget-heading:hover { background-size: 100% 100% !important; } .hero-links a:hover { color: #FFF !important; } @media (max-width: 1024px) { /* HERO LINKS */ .hero-links .elementor-widget-heading { padding: .75rem 0rem 0.75rem !important; width: 50% !important; } } @media (max-width: 768px) { /* HERO LINKS */ .hero-links .elementor-widget-heading { width: 80% !important; } } @media (max-width: 480px) { /* HERO LINKS */ .hero-links .elementor-widget-heading { width: 100% !important; } } /* HERO PADDING - Boxed Width body.home .hero .e-con-inner { padding: 30rem 0 10rem; } body:not(.home) .hero .e-con-inner { padding: 20rem 0 10rem; } */ /* ***************************** * FULL WIDTH BANNER SECTIONS CONTENT WRAPPER - can use Hero Version if need / if Hero has centered content * *************************** */ .banner-section > .content-wrapper { max-width: 70%; } @media (max-width: 1600px) { .banner-section > .content-wrapper { max-width: 75%; } } @media (max-width: 1440px) { .banner-section > .content-wrapper { max-width: 80%; } } @media (max-width: 1200px) { .banner-section > .content-wrapper { max-width: 90%; } } @media (max-width: 1024px) { .banner-section > .content-wrapper { max-width: 95%; } } @media (max-width: 768px) { .banner-section > .content-wrapper { max-width: 100%; } } /* .hero .content-wrapper, .banner-section > .content-wrapper { max-width: 68%; } @media (max-width: 1600px) { .hero .content-wrapper, .banner-section > .content-wrapper { max-width: 75%; } } @media (max-width: 1440px) { .hero .content-wrapper, .banner-section > .content-wrapper { max-width: 80%; } } @media (max-width: 1200px) { .hero .content-wrapper, .banner-section > .content-wrapper { max-width: 90%; } } @media (max-width: 1024px) { .hero .content-wrapper, .banner-section > .content-wrapper { max-width: 95%; } } @media (max-width: 768px) { .hero .content-wrapper, .banner-section > .content-wrapper { max-width: 100%; } } */ /* ***************************** * BANNER SECTION * *************************** */ .banner-section > .content-wrapper { box-sizing: border-box; } @media (max-width: 768px) { .banner-section > .content-wrapper { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; } } /* ***************************** * BACKGROUND IMAGE USING IMAGE ELEMENT INSTEAD OF CONTAINER BG SETTINGS * BG SOURCESET FOR Elementor Image Widget, Widget Container, Image * *************************** */ .srcset-bg, .srcset-bg .elementor-widget-container { height: 100% !important; width: 100% !important; position: absolute; top: 0px; left: 0px; overflow: hidden !important; } .srcset-bg img { height: 100% !important; width: 100% !important; object-fit: cover; object-position: center center; } /* REQUESTED BY DESIGN - REMOVED BY DEV FINAL REVIEW - switch image instead @media (max-width: 767px) { .srcset-bg.bg-left-mobile img { object-position: center left; } } */ /* OPTIONAL Fixed / Parallax Background Image */ .bg-fixed .srcset-bg, .bg-fixed .srcset-bg .elementor-widget-container, .hero .srcset-bg, .hero .srcset-bg .elementor-widget-container { clip-path: inset(0); } .bg-fixed .srcset-bg img, .hero .srcset-bg img { position: fixed; top: 0; left: 0; z-index: -1; will-change: transform; } /* END OPTIONAL Fixed / Parallax Background Image */ /* ***************************** * FIXED BACKGROUND - OVERRIDE SO ALSO FIXED ON MOBILE * Add the class bg-fixed to the section - adjust as needed * *************************** */ .bg-fixed, .bg-fixed .elementor-background-overlay, .bg-fixed:before { background-attachment: fixed !important; } .ios .bg-fixed, .ios .bg-fixed .elementor-background-overlay, .ios .bg-fixed:before { background-attachment: scroll !important; transform: translateZ(0); /* This can help with rendering */ } html:not(.ios):not(.webkit) .bg-fixed, html:not(.ios):not(.webkit) .bg-fixed .elementor-background-overlay, html:not(.ios):not(.webkit) .bg-fixed:before { background-attachment: fixed !important; } @media (max-width: 1040px) { .mac .bg-fixed, .mac .bg-fixed .elementor-background-overlay, .mac .bg-fixed:before, .ios .bg-fixed, .ios .bg-fixed .elementor-background-overlay, .ios .bg-fixed:before, html.webkit.safari.retina .bg-fixed, html.webkit.safari.retina .bg-fixed .elementor-background-overlay, html.webkit.safari.retina .bg-fixed:before { background-attachment: scroll !important; transform: translateZ(0); background-size: cover !important; background-repeat: no-repeat !important; } } /* ****************************** * FIXED BACKGROUND - IPAD PORTRAIT FIX * Disables fixed/parallax on retina Safari portrait (iPad) * landscape is handled separately below * *************************** */ @media (max-width: 1040px) and (orientation: portrait) { html.webkit.safari.retina .bg-fixed .srcset-bg img, html.webkit.safari.retina .hero .srcset-bg img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; will-change: auto !important; } html.webkit.safari.retina .bg-fixed .srcset-bg, html.webkit.safari.retina .bg-fixed .srcset-bg .elementor-widget-container, html.webkit.safari.retina .hero .srcset-bg, html.webkit.safari.retina .hero .srcset-bg .elementor-widget-container { clip-path: none !important; } } /* ****************************** * FIXED BACKGROUND - APPLE LANDSCAPE TWEAK * *************************** */ /* SAFARI */ @media only screen and (orientation: landscape) { .e--ua-appleWebkit.e--ua-safari .elementor-element.e-con::before { background-attachment: initial !important; } } /* OTHERS */ @media only screen and (orientation: landscape) { .e--ua-appleWebkit .elementor-element.e-con::before { background-attachment: initial !important; } } /* ***************************** * FIXED BG IMAGE - DISABLE ON SMALL SCREENS * *************************** */ @media (max-width: 1200px) { .bg-fixed .srcset-bg img, .hero .srcset-bg img { position: absolute !important; top: 0 !important; left: 0 !important; z-index: 0 !important; /* was -1 — can't be negative with position:absolute or bg color buries it */ will-change: auto; } .bg-fixed .srcset-bg, .bg-fixed .srcset-bg .elementor-widget-container, .hero .srcset-bg, .hero .srcset-bg .elementor-widget-container { clip-path: none !important; z-index: 0 !important; } /* Ensure content inside bg-fixed sections sits above the srcset-bg image */ .bg-fixed > .e-con-inner > *:not(.srcset-bg):not(.bg-wrapper), .bg-fixed > .e-con-inner > .bg-wrapper ~ * { position: relative; z-index: 1; } } /* iPads - Chrome on iPad uses .ipad class, Safari on iPad uses .mac but also .ios or touch */ html.webkit.safari.retina .bg-fixed .srcset-bg img, html.webkit.safari.retina .hero .bg-fixed .srcset-bg img, html.ipad .bg-fixed .srcset-bg img, html.ipad .hero .srcset-bg img, html.ios:not(.mobile) .bg-fixed .srcset-bg img, html.ios:not(.mobile) .hero .srcset-bg img { position: absolute !important; top: 0 !important; left: 0 !important; z-index: 0 !important; will-change: auto; } /* ***************************** * FIXED BG IMAGE - IMAGE POSITION ON SMALL SCREENS * *************************** */ @media (max-width: 1200px) { /* At 1200px - Horizontal image position overrides for bg-fixed sections */ .bg-fixed.bg-1200-0 .srcset-bg img { object-position: 0% center !important; } .bg-fixed.bg-1200-25 .srcset-bg img { object-position: 25% center !important; } .bg-fixed.bg-1200-33 .srcset-bg img { object-position: 33% center !important; } .bg-fixed.bg-1200-50 .srcset-bg img { object-position: 50% center !important; } .bg-fixed.bg-1200-67 .srcset-bg img { object-position: 67% center !important; } .bg-fixed.bg-1200-75 .srcset-bg img { object-position: 75% center !important; } .bg-fixed.bg-1200-100 .srcset-bg img { object-position: 100% center !important; } } @media (max-width: 1024px) { /* At 1024px - Horizontal image position overrides for bg-fixed sections */ .bg-fixed.bg-1024-0 .srcset-bg img { object-position: 0% center !important; } .bg-fixed.bg-1024-25 .srcset-bg img { object-position: 25% center !important; } .bg-fixed.bg-1024-33 .srcset-bg img { object-position: 33% center !important; } .bg-fixed.bg-1024-50 .srcset-bg img { object-position: 50% center !important; } .bg-fixed.bg-1024-67 .srcset-bg img { object-position: 67% center !important; } .bg-fixed.bg-1024-75 .srcset-bg img { object-position: 75% center !important; } .bg-fixed.bg-1024-100 .srcset-bg img { object-position: 100% center !important; } } @media (max-width: 767px) { /* At 767px - Vertical image position overrides for bg-fixed sections */ .bg-fixed.bg-767-0 .srcset-bg img { object-position: center 0% !important; } .bg-fixed.bg-767-25 .srcset-bg img { object-position: center 25% !important; } .bg-fixed.bg-767-33 .srcset-bg img { object-position: center 33% !important; } .bg-fixed.bg-767-50 .srcset-bg img { object-position: center 50% !important; } .bg-fixed.bg-767-67 .srcset-bg img { object-position: center 67% !important; } .bg-fixed.bg-767-75 .srcset-bg img { object-position: center 75% !important; } .bg-fixed.bg-767-100 .srcset-bg img { object-position: center 100% !important; } } @media (max-width: 480px) { /* At 480px - Vertical image position overrides for bg-fixed sections */ .bg-fixed.bg-480-0 .srcset-bg img { object-position: center 0% !important; } .bg-fixed.bg-480-25 .srcset-bg img { object-position: center 25% !important; } .bg-fixed.bg-480-33 .srcset-bg img { object-position: center 33% !important; } .bg-fixed.bg-480-50 .srcset-bg img { object-position: center 50% !important; } .bg-fixed.bg-480-67 .srcset-bg img { object-position: center 67% !important; } .bg-fixed.bg-480-75 .srcset-bg img { object-position: center 75% !important; } .bg-fixed.bg-480-100 .srcset-bg img { object-position: center 100% !important; } } /* CENTER 10% Like Home */ .hero .bg-wrapper.bg-center-10 .srcset-bg img { object-position: center 10% !important; } .hero .bg-wrapper.bg-short-img .srcset-bg img { object-position: 100% 90% !important; top: -5% !important; } @media (max-width: 1200px) { .hero .bg-wrapper.bg-short-img .srcset-bg img { position: absolute !important; top: 0 !important; object-position: 100% 50% !important; } } /* ***************************** * BG ICON - background icon - set to fill container height & maintain aspect ratio width * BG Wrapper Container CLASSES: bg-wrapper bg-icon * *************************** */ .bg-icon { position: absolute !important; top: -2% !important; right: -4rem !important; width: auto !important; height: 104% !important; z-index: 0 !important; pointer-events: none !important; } /* The srcset-bg inner container — let it size to the image naturally */ .bg-icon .srcset-bg { position: relative !important; width: auto !important; height: 100% !important; overflow: visible !important; } .bg-icon .srcset-bg .elementor-widget-container { width: auto !important; height: 100% !important; position: relative !important; overflow: visible !important; } .bg-icon .srcset-bg img { display: block !important; width: auto !important; height: 100% !important; max-width: none !important; object-fit: unset !important; } /* ***************************** * HERO BG OVERLAY * *************************** */ /* Hero BG Wrapper Default Overlay */ .hero .bg-wrapper .overlay:before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 55%, var(--color-big-stone-dark) 88%), linear-gradient(180deg, var(--color-big-stone-dark) 5%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.25) 95%); opacity: 1; } /* ***************************** * BG OVERLAY * *************************** */ /* BG Wrapper Default Overlay */ .bg-wrapper .overlay:before { background: linear-gradient(180deg, var(--color-big-stone-dark) 0%, rgba(0,0,0,0.5) 50%); opacity: 1; } /* ***************************** * BG OVERLAY ALT * BG Wrapper Container CLASSES: bg-wrapper bg-overlay-alt * *************************** */ .bg-wrapper.bg-overlay-alt .overlay:before { background: linear-gradient(90deg, var(--color-san-marino) 50%, var(--color-spindle) 100%) !important; opacity: .95; } .bg-wrapper.bg-overlay-alt .srcset-bg img { opacity: .5 !important; } /* ***************************** * BG OVERLAY DARK * BG Wrapper Container CLASSES: bg-wrapper bg-overlay-dark * *************************** */ .bg-wrapper.bg-overlay-dark .overlay:before { background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%); opacity: 1; } /* ***************************** * BG OVERLAY LIGHT * BG Wrapper Container CLASSES: bg-wrapper bg-overlay-light * *************************** */ .bg-wrapper.bg-overlay-light .overlay:before { background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%); opacity: 1; } /* ***************************** * BG OVERLAY GRADIENT IMAGE * BG Wrapper Container CLASSES: bg-wrapper bg-overlay-gradient * add Gradient bg image in :after below * *************************** */ .bg-wrapper.bg-overlay-gradient .srcset-bg img { filter: grayscale(100%); } /* Kill the default dark overlay */ .bg-wrapper.bg-overlay-gradient .overlay::before { display: none; } .bg-wrapper.bg-overlay-gradient .srcset-bg .elementor-widget-container::after { content: ''; position: absolute; inset: 0; background-image: url(''); background-size: 100% 100%; mix-blend-mode: multiply; } /* ***************************** * SECTION MULTIPLY OVERLAY * *************************** */ .bg-overlay-multiply:before { mix-blend-mode: multiply !important; } /* ***************************** * BG OVERLAY - FLICKER FIX * Promotes overlay pseudo-element to its own compositor layer so it doesn't drop out during scroll repaints * *************************** */ /* only promote compositor layer when there's actually a srcset-bg image */ .bg-wrapper:has(.srcset-bg) .overlay:before { will-change: opacity; transform: translateZ(0); backface-visibility: hidden; } /* ***************************** * NO COLOR OR EFFECT BACKGROUND IMAGE CONTAINERS * *************************** */ /* BG IMAGE COLOR */ .srcset-bg .elementor-widget-container { background-color: transparent; } .srcset-bg img { mix-blend-mode: normal; } /* ***************************** * COLOR BACKGROUND IMAGE CONTAINERS - Image has Multiply Effect on Color Background * BG Wrapper Container CLASSES: bg-wrapper bg-pic-overlay * *************************** */ /* BG IMAGE COLOR */ .bg-wrapper.bg-pic-overlay .srcset-bg .elementor-widget-container { background-color: var(--color-san-marino) !important; } .bg-wrapper.bg-pic-overlay .srcset-bg img { mix-blend-mode: multiply !important; } /* ***************************** * ALTERNATE COLOR BACKGROUND IMAGE CONTAINERS - Image has Multiply Effect on Color Background * BG Wrapper Container CLASSES: bg-wrapper bg-pic-overlay alt * *************************** */ /* BG IMAGE COLOR */ .bg-wrapper.bg-pic-overlay.alt .srcset-bg .elementor-widget-container { background: linear-gradient(90deg, var(--color-san-marino) 50%, var(--color-spindle) 100%) !important; } .bg-wrapper.bg-pic-overlay.alt .srcset-bg img { mix-blend-mode: screen !important; opacity: .15 !important; } .bg-wrapper.bg-pic-overlay.alt .overlay:before { background: none !important; } /* Prevent flash of unblended image on load - only for pic-overlay with actual image */ .bg-wrapper.bg-pic-overlay:has(.srcset-bg) .srcset-bg img, .bg-wrapper.bg-pic-overlay.alt:has(.srcset-bg) .srcset-bg img { animation: bg-fade-in 0ms 150ms both; } @keyframes bg-fade-in { from { opacity: 0; } to { opacity: 1; } } /* HALF PIC HALF TEXT LAYOUTS - REMOVE OVERLAY & MULTIPLY ON MOBILE */ @media (max-width: 1024px) { .half-pic-half-txt.bg-fixed .bg-wrapper.bg-pic-overlay .overlay:before { background: transparent !important; } .half-pic-half-txt.bg-fixed .bg-wrapper.bg-pic-overlay .srcset-bg img { mix-blend-mode: inherit !important; } } /* ***************************** * SEARCH BAR ROW - like on Blog, Blog Category, Shop * *************************** */ .search-col, .search-col .site-search, .search-col .jet-search, .search-col .jet-ajax-search, .search-col .jet-ajax-search__form, .view-all-col, .btn-archive-view-all a { height: 100% !important; width: 100%; } .btn-archive-view-all .elementor-button-wrapper, .btn-archive-view-all .ha-creative-btn-wrap { display: flex; width: 100%; } /* ***************************** * ELEMENTOR VIDEO BACKGROUND * *************************** */ .elementor-background-video-container { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; overflow: hidden; z-index: 0; } .elementor-background-video-hosted { position: absolute !important; top: 50%; left: 50%; width: 100vw !important; /* Full viewport width for extra coverage */ height: auto !important; min-width: 100% !important; min-height: 100% !important; object-fit: cover !important; transform: translate(-50%, -50%); max-width: none !important; /* Overrides any max limits */ } /* ***************************** * PARALLAX SECTION BACKGROUND * *************************** */ .section-bg-parallax { /* Adjust the Effect */ transform: translateZ(-1px) scale(1.15); background-position: center !important; position: absolute; } /* ***************************** * COLUMN GRADIENT - use col-hover and colorX class on the column and change colors below, can add extra classes for different columns w/different colors e.g. Z Demo Content Page Custom Hover Image Boxes * *************************** */ .col-hover .elementor-widget-wrap.elementor-element-populated { background-color: transparent !important; background-image: none !important; overflow: hidden; } .col-hover .elementor-widget-wrap.elementor-element-populated:before, .col-hover .elementor-widget-wrap.elementor-element-populated:after { content: ""; display: block; position: absolute; margin: 1px; top: -1px; left: -1px; right: -1px; bottom: -1px; width: auto; height: auto; z-index: -1; transition: all .5s ease-out; } .col-hover .elementor-widget-wrap.elementor-element-populated:before { z-index: -1; opacity: 1; } .col-hover .elementor-widget-wrap.elementor-element-populated:after { z-index: -1; opacity: 0; } .col-hover .elementor-widget-wrap.elementor-element-populated:hover:before { opacity: 0; } .col-hover .elementor-widget-wrap.elementor-element-populated:hover:after { opacity: 1; } .col-hover.color1 .elementor-widget-wrap.elementor-element-populated:before { background-color: #99000050; background-image: linear-gradient(180deg, #fff 0%, #99000022 100%); } .col-hover.color1 .elementor-widget-wrap.elementor-element-populated:after { background-color: #99000050; background-image: linear-gradient(180deg, #99000022 0%, #fff 100%); } .col-hover.color2 .elementor-widget-wrap.elementor-element-populated:before { background-color: #aaaaaa50; background-image: linear-gradient(180deg, #fff 0%, #aaaaaa22 100%); } .col-hover.color2 .elementor-widget-wrap.elementor-element-populated:after { background-color: #aaaaaa50; background-image: linear-gradient(180deg, #aaaaaa22 0%, #fff 100%); } /* ***************************** * SECTION CONTENT COLUMNS with INNER SECTION with PADDED COLUMNS e.g. Z Demo Content Page - Services We Offer Cols * *************************** */ .section-content-cols.elementor-section.elementor-section-boxed > .elementor-container, .section-content-cols.elementor-section.elementor-section-boxed > .elementor-container .inner-section-padded-cols .elementor-container { max-width: 77rem !important; } .inner-section-padded-cols { margin-left: -1rem; margin-right: -1rem; } @media (min-width: 1024px) { /* Equal Height */ .section-content-cols .elementor-column.content-col { height: 100% !important; } .section-content-cols .elementor-inner-section .elementor-column-wrap { height: 100%; flex-direction: column; } .section-content-cols .inner-section-padded-cols .elementor-widget-wrap { height: 100%; flex-direction: column; } .section-content-cols .elementor-widget-icon { margin-top: auto !important; padding: 1rem; } } @media (max-width: 1024px) { /* CONTENT COLUMNS */ .section-content-cols .content-col.last { margin: 0 auto; } } /* ***************************** * SECTION 3 COL INSET SHADOWS - like Contact * *************************** */ .section-3-cols .col1 { border-left: 0px solid #333 !important; border-right: 1px solid #000 !important; } .section-3-cols .col2 { border-left: 1px solid #333 !important; border-right: 1px solid #000 !important; } .section-3-cols .col3 { border-left: 1px solid #333 !important; border-right: 0px solid #000 !important; } @media (max-width:767px) { .section-3-cols .col1 { border-left: 0px solid #444 !important; border-right: 0px solid #000 !important; border-top: 1px solid #444 !important; border-bottom: 1px solid #000 !important; } .section-3-cols .col2 { border-left: 0px solid #444 !important; border-right: 0px solid #000 !important; border-top: 1px solid #444 !important; border-bottom: 1px solid #000 !important; } .section-3-cols .col3 { border-left: 0px solid #444 !important; border-right: 0px solid #000 !important; border-top: 1px solid #444 !important; } } /* ******************************************************* * * WST CONTAINERS * split-row-img-txt (bg src image left, text right): * split-col--img-sm + split-col--txt-lg IMG SM + TXT LG * split-col--img-lg + split-col--txt-sm IMG LG + TXT SM * * split-row-txt-img (text left, bg src image right): * split-col--txt-sm + split-col--img-lg TXT SM + IMG LG * split-col--txt-lg + split-col--img-sm TXT LG + IMG SM * * split-row-img-txt: 50/50 (image left, text right) * split-col--img + split-col--txt * * split-row-txt-img: 50/50 (text left, image right) * split-col--txt + split-col--img * * split-row-txt-boxes: * split-col--txt-sm + split-col--boxes + content-box--img-full * * split-fwrow-l-boxed-r-full: * l-boxed + r full * * split-fwrow-l-boxed-r-full: * .col-boxed (left, BG full-bleed, content boxed-aligned) + .col-full (right, full-bleed) * * split-fwrow-l-full-r-boxed: * .col-full (left, full-bleed) + .col-boxed (right, BG full-bleed, content boxed-aligned) * * split-fwrow-l-boxed-r-boxed: * .col-boxed-left + .col-boxed-right (both full-bleed BG, content aligns boxed edges) * ****************************************************** */ /* ***************************** * SPLIT ROW TXT IMG COLUMNS * *************************** */ /* Parent Row Containers */ .split-row-img-txt, .split-row-txt-img { display: flex !important; flex-direction: row !important; align-items: stretch; width: 100%; } .split-row-img-txt.e-con .e-con-inner, .split-row-txt-img.e-con .e-con-inner { gap: .5rem; } /* Image Columns */ .split-col--img-sm.e-con { width: 35% !important; flex: 0 0 35% !important; max-width: 35%; } .split-col--img-lg.e-con { width: 65% !important; flex: 0 0 65% !important; max-width: 65%; } /* Text Columns */ .split-row-img-txt .split-col--txt-lg.centered.e-con { width: 65% !important; flex: 0 0 65% !important; max-width: 65%; display: flex; flex-direction: column; justify-content: center; padding: var(--space-md) var(--space-sm) var(--space-md) var(--space-sm) !important; } .split-row-img-txt .split-col--txt-lg.e-con { width: 65% !important; flex: 0 0 65% !important; max-width: 65%; display: flex; flex-direction: column; justify-content: center; padding: var(--space-md) 0 var(--space-md) var(--space-sm) !important; } .split-row-img-txt .split-col--txt-sm.e-con { width: 35% !important; flex: 0 0 35% !important; max-width: 35%; display: flex; flex-direction: column; justify-content: center; padding: var(--space-sm) 0 var(--space-sm) var(--space-sm) !important; } .split-row-txt-img .split-col--txt-lg.e-con { width: 65% !important; flex: 0 0 65% !important; max-width: 65%; display: flex; flex-direction: column; justify-content: center; padding: var(--space-md) var(--space-sm) var(--space-md) 0 !important; } .split-row-txt-img .split-col--txt-sm.e-con { width: 35% !important; flex: 0 0 35% !important; max-width: 35%; display: flex; flex-direction: column; justify-content: center; padding: var(--space-sm) var(--space-sm) var(--space-sm) 0 !important; } @media (max-width: 767px) { /* Image Columns */ .split-row-img-txt, .split-row-txt-img { flex-direction: column !important; } .split-row-img-txt.e-con .e-con-inner, .split-row-txt-img.e-con .e-con-inner { flex-direction: column; gap: 0.5rem; } /* Text on top for split-row-img-txt (image is first in DOM) */ .split-row-img-txt.e-con .e-con-inner { flex-direction: column-reverse !important; } .split-col--img-sm.e-con, .split-col--img-lg.e-con { width: 100% !important; flex: 0 0 100% !important; max-width: 100%; min-height: 250px; /* give image column height when stacked */ } /* Text Columns */ .split-row-img-txt .split-col--txt-lg.centered.e-con, .split-row-img-txt .split-col--txt-lg.e-con, .split-row-img-txt .split-col--txt-sm.e-con, .split-row-txt-img .split-col--txt-sm.e-con, .split-row-txt-img .split-col--txt-lg.e-con { width: 100% !important; flex: 0 0 100% !important; max-width: 100%; padding: var(--space-sm) var(--space-0) !important; } } /* ***************************** * 50/50 SPLIT ROW TXT IMG COLUMNS * *************************** */ /* ROW IMG TXT */ .split-row-img-txt .split-col--img { width: 50% !important; flex: 0 0 50% !important; max-width: 50%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--space-sm) 0 0 !important; } .split-row-img-txt .split-col--txt { width: 50% !important; flex: 0 0 50% !important; max-width: 50%; display: flex; flex-direction: column; justify-content: center; padding: var(--space-md) 0 var(--space-md) var(--space-sm) !important; } /* ROW TXT IMG */ .split-row-txt-img .split-col--txt { width: 50% !important; flex: 0 0 50% !important; max-width: 50%; display: flex; flex-direction: column; justify-content: center; padding: var(--space-md) var(--space-sm) var(--space-md) 0 !important; } .split-row-txt-img .split-col--img { width: 50% !important; flex: 0 0 50% !important; max-width: 50%; display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 var(--space-sm) !important; } @media (max-width: 767px) { /* Image Columns */ .split-row-img-txt, .split-row-txt-img { flex-direction: column !important; } .split-row-img-txt.e-con .e-con-inner, .split-row-txt-img.e-con .e-con-inner { flex-direction: column; gap: 0.5rem; } /* Text on top for split-row-img-txt (image is first in DOM) */ .split-row-img-txt.e-con .e-con-inner { flex-direction: column-reverse !important; } .split-col--img.e-con, .split-col--img.e-con { width: 100% !important; flex: 0 0 100% !important; max-width: 100%; min-height: 250px; /* give image column height when stacked */ padding: 0 !important; } /* Text Columns */ .split-row-img-txt .split-col--txt.centered.e-con, .split-row-img-txt .split-col--txt.e-con, .split-row-img-txt .split-col--txt.e-con, .split-row-txt-img .split-col--txt.e-con, .split-row-txt-img .split-col--txt.e-con { width: 100% !important; flex: 0 0 100% !important; max-width: 100%; padding: var(--space-sm) var(--space-0) !important; } } /* ***************************** * SPLIT ROW TXT + COL BOXES * *************************** */ /* Parent Row Container */ .split-row-txt-boxes { display: flex !important; flex-direction: row !important; align-items: flex-start; width: 100%; } .split-row-txt-boxes.e-con .e-con-inner { gap: var(--space-xs); align-items: flex-start; } /* Text Label Column */ .split-row-txt-boxes .split-col--txt-sm.e-con { align-self: flex-start !important; } /* Boxes Column */ .split-col--boxes.e-con { width: 65% !important; flex: 0 0 65% !important; max-width: 65%; padding: 0 !important; align-self: flex-start !important; height: auto !important; } .split-col--boxes.e-con > .e-con-inner { flex-direction: column !important; gap: 1.5rem !important; padding: 0 !important; } /* Content Box Card */ .content-box.e-con, .split-col--boxes .content-box.e-con { --flex-direction: row !important; background: var(--e-global-color-accent) !important; width: 100% !important; flex: 0 0 auto !important; max-width: 100%; padding: var(--space-xs) !important; height: auto !important; min-height: 0 !important; overflow: hidden; align-items: stretch !important; } /* Image Column */ .content-box .img.e-con, .split-col--boxes .content-box .img.e-con { width: 38% !important; flex: 0 0 38% !important; max-width: 38%; padding: 0 !important; overflow: hidden; align-self: stretch !important; } .content-box .img.e-con, .content-box .img.e-con .elementor-widget-raven-image, .content-box .img.e-con .elementor-widget-container, .content-box .img.e-con .raven-image { height: 100% !important; } .content-box .img.e-con img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center top; display: block; } /* Content Box – Full Height Image Variant */ .content-box--img-full .img.e-con { --flex-grow: 1 !important; flex-grow: 1 !important; align-self: stretch !important; height: unset !important; min-height: 100% !important; } /* Text Column */ .content-box .txt.e-con, .split-col--boxes .content-box .txt.e-con { width: 62% !important; flex: 0 0 62% !important; max-width: 62%; padding: 2.5rem 2.5rem 2rem !important; justify-content: flex-start !important; align-items: flex-start !important; align-self: stretch !important; height: auto !important; } .content-box .txt.e-con h3 { font-size: var(--wst-card-title); margin-bottom: 0.75rem; } .content-box .txt.e-con p { font-size: var(--wst-card-text); margin-bottom: 1.25rem; } /* Tablet: ≤1024px */ @media (max-width: 1024px) { .split-row-txt-boxes { flex-direction: column !important; } .split-row-txt-boxes.e-con .e-con-inner { flex-direction: column !important; gap: 1rem; } .split-row-txt-boxes .split-col--txt-sm.e-con { width: 100% !important; flex: 0 0 100% !important; max-width: 100%; padding: 0 0 1rem 0 !important; } .split-col--boxes.e-con { width: 100% !important; flex: 0 0 100% !important; max-width: 100%; } .content-box.e-con, .split-col--boxes .content-box.e-con { --flex-direction: row !important; } .content-box .img.e-con, .split-col--boxes .content-box .img.e-con { width: 35% !important; flex: 0 0 35% !important; max-width: 35%; } .content-box .txt.e-con, .split-col--boxes .content-box .txt.e-con { width: 65% !important; flex: 0 0 65% !important; max-width: 65%; padding: 2rem 1.75rem !important; } } /* Mobile: ≤767px */ @media (max-width: 767px) { .content-box.e-con, .split-col--boxes .content-box.e-con { --flex-direction: column !important; } .content-box .img.e-con, .split-col--boxes .content-box .img.e-con { width: 100% !important; flex: 0 0 100% !important; max-width: 100%; } .content-box .txt.e-con, .split-col--boxes .content-box .txt.e-con { width: 100% !important; flex: 0 0 100% !important; max-width: 100%; padding: 2rem 0rem !important; } } /* Mobile: ≤480px */ @media (max-width: 480px) { .content-box.e-con, .split-col--boxes .content-box.e-con { --flex-direction: column !important; padding: var(--space-1-5) !important; } } /* ******************************************************* * FULL WIDTH SPLIT ROW - Boxed Left / Full Right split-fwrow-l-boxed-r-full * Full-width row: .col-boxed (left) + .col-full (right) * BG fills full left half, content aligns with boxed containers * ******************************************************* */ .split-fwrow-l-boxed-r-full.e-con { padding: 0 !important; } .split-fwrow-l-boxed-r-full.e-con > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch; gap: 0 !important; padding: 0 !important; width: 100%; max-width: 100% !important; } .split-fwrow-l-boxed-r-full .col-boxed.e-con { width: 50% !important; flex: 0 0 50% !important; max-width: 50%; padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; padding-left: max(var(--space-xs), calc((100vw - 110rem) / 2 + 2rem)) !important; padding-right: var(--space-md) !important; box-sizing: border-box; } .split-fwrow-l-boxed-r-full .col-full.e-con { width: 50% !important; flex: 0 0 50% !important; max-width: 50%; padding: var(--space-sm) 0 !important; overflow: visible; } @media (max-width: 1024px) { .split-fwrow-l-boxed-r-full .col-boxed.e-con { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; } } @media (max-width: 767px) { .split-fwrow-l-boxed-r-full.e-con > .e-con-inner { flex-direction: column !important; } .split-fwrow-l-boxed-r-full .col-boxed.e-con, .split-fwrow-l-boxed-r-full .col-full.e-con { width: 100% !important; flex: 0 0 100% !important; max-width: 100%; } .split-fwrow-l-boxed-r-full .col-boxed.e-con { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; } } /* ******************************************************* * FULL WIDTH SPLIT ROW - Full Left / Boxed Right split-fwrow-l-full-r-boxed * Full-width row: .col-full (left) + .col-boxed (right) * BG fills full right half, content aligns with boxed containers * ******************************************************* */ .split-fwrow-l-full-r-boxed.e-con { padding: 0 !important; } .split-fwrow-l-full-r-boxed.e-con > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch; gap: 0 !important; padding: 0 !important; width: 100%; max-width: 100% !important; } .split-fwrow-l-full-r-boxed .col-full.e-con { width: 50% !important; flex: 0 0 50% !important; max-width: 50%; padding: var(--space-sm) 0 !important; overflow: visible; } .split-fwrow-l-full-r-boxed .col-boxed.e-con { width: 50% !important; flex: 0 0 50% !important; max-width: 50%; padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; padding-left: var(--space-md) !important; padding-right: max(var(--space-xs), calc((100vw - 110rem) / 2 + 2rem)) !important; box-sizing: border-box; } @media (max-width: 1024px) { .split-fwrow-l-full-r-boxed .col-boxed.e-con { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; } } @media (max-width: 767px) { .split-fwrow-l-full-r-boxed.e-con > .e-con-inner { flex-direction: column !important; } .split-fwrow-l-full-r-boxed .col-full.e-con, .split-fwrow-l-full-r-boxed .col-boxed.e-con { width: 100% !important; flex: 0 0 100% !important; max-width: 100%; } .split-fwrow-l-full-r-boxed .col-boxed.e-con { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; } } /* ******************************************************* * FULL WIDTH SPLIT ROW - Boxed Left / Boxed Right split-fwrow-l-boxed-r-boxed * Full-width row: .col-boxed-left (left) + .col-boxed-right (right) * Both halves have full BG, content aligns with boxed edges meeting at center * ******************************************************* */ .split-fwrow-l-boxed-r-boxed.e-con { padding: 0 !important; } .split-fwrow-l-boxed-r-boxed.e-con > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch; gap: 0 !important; padding: 0 !important; width: 100%; max-width: 100% !important; } .split-fwrow-l-boxed-r-boxed .col-boxed-left.e-con { width: 50% !important; flex: 0 0 50% !important; max-width: 50%; padding-left: max(var(--space-xs), calc((100vw - 110rem) / 2 + var(--space-xs))) !important; padding-right: var(--space-md) !important; box-sizing: border-box; } .split-fwrow-l-boxed-r-boxed .col-boxed-right.e-con { width: 50% !important; flex: 0 0 50% !important; max-width: 50%; padding-left: var(--space-md) !important; padding-right: max(var(--space-xs), calc((100vw - 110rem) / 2 + var(--space-xs))) !important; box-sizing: border-box; } @media (max-width: 1024px) { .split-fwrow-l-boxed-r-boxed .col-boxed-left.e-con, .split-fwrow-l-boxed-r-boxed .col-boxed-right.e-con { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; } } @media (max-width: 767px) { .split-fwrow-l-boxed-r-boxed.e-con > .e-con-inner { flex-direction: column !important; } .split-fwrow-l-boxed-r-boxed .col-boxed-left.e-con, .split-fwrow-l-boxed-r-boxed .col-boxed-right.e-con { width: 100% !important; flex: 0 0 100% !important; max-width: 100%; padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; } } /* ***************************** * INNER CONTAINER LAYOUTS * *************************** */ /* 2-Column Text with Divider */ .text-2-cols { display: flex !important; flex-direction: row !important; gap: 0 !important; margin: var(--space-xs) 0 !important; } .text-2-cols > .elementor-element { flex: 1 1 0; min-width: 0; } .text-2-cols > .elementor-element:first-child { border-right: 1px solid var(--e-global-color-primary); padding-right: var(--space-xs); text-align: right; } .text-2-cols > .elementor-element:last-child { padding-left: var(--space-xs); } /* Stack at ≤1024px, no divider */ @media (max-width: 1024px) { .text-2-cols { flex-direction: column !important; gap: 10px !important; margin: 0 !important; } .text-2-cols > .elementor-element:first-child, .text-2-cols > .elementor-element:last-child, .text-2-cols .elementor-element { border-right: none; padding-right: 0; padding-left: 0; text-align: center !important; } } /* ***************************** * BOTTOM CTA / CTA BOX * *************************** */ .cta-box { padding: 4rem 4rem !important; } .cta-box, .cta-box .bg-wrapper, .cta-box .bg-wrapper .overlay:before, .cta-box .bg-wrapper img { border-radius: 30px !important; } .bottom-cta { margin-top: 0; } .bottom-cta .cta-box { transform: translateY(-50%) !important; margin-bottom: -6rem; } .dark-bg.cta-box .elementor-heading-title a { color: #FFF !important; } .dark-bg.cta-box .elementor-heading-title a:hover { color: var(--color-san-marino-lighter) !important; } @media (max-width: 1200px) { .cta-box { padding: 4rem 2rem !important; } } /* ***************************** * IMAGE LINES OVERLAY * Two vertical white lines on the right side of the image * *************************** */ .image-lines .raven-image { filter: drop-shadow(0 0 8px #00000025); } .image-lines .raven-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#1B2A41 0, #1B2A41 10%, #1B2A4100 10%, #1B2A4100 90%, #1B2A41 90%) no-repeat calc(100% - 2.5rem) 0 / 8px 100%; opacity: .95; z-index: 1; } .image-lines .raven-image, .image-lines .raven-image img { border-radius: 30px; } @media (max-width: 1024px) { .image-lines::after { background: linear-gradient(#1B2A41 0, #1B2A41 10%, #1B2A4100 10%, #1B2A4100 90%, #1B2A41 90%) no-repeat calc(100% - 2.5rem) 0 / 6px 100%; opacity: .95; z-index: 1; } } /* ****************************** * PGS MAP COMPONENT * *************************** */ .pgs-map-layout { display: grid; grid-template-columns: 300px 1fr; height: 600px; overflow: hidden; box-shadow: 0 8px 40px #0A101A80; font-family: 'Sora', sans-serif; } /* SIDEBAR */ .pgs-map-sidebar { background: var(--color-big-stone, #1B2A41); display: flex; flex-direction: column; overflow: hidden; } /* Sidebar Header */ .pgs-map-sidebar-header { padding: 22px 20px 16px; background: var(--color-big-stone-dark, #152134); border-bottom: 1px solid var(--color-big-stone-lighter, #D1D4D9); flex-shrink: 0; } .pgs-map-sidebar-header h3 { color: var(--color-cardinal, #B8212A); font-size: var(--wst-h5) !important; text-transform: uppercase; margin-bottom: 4px; } .pgs-map-sidebar-header p { font-size: var(--wst-body-text-sm); color: var(--color-spindle-lighter, #EDF3FA); opacity: 1; } /* Search */ .pgs-map-search-wrap { padding: 12px 14px; background: var(--color-big-stone-dark, #152134); border-bottom: 1px solid rgba(168,198,234,0.15); flex-shrink: 0; } .pgs-map-search-wrap input { width: 100%; background: rgba(168,198,234,0.08); border: 1px solid rgba(168,198,234,0.2); border-radius: 5px; padding: 8px 12px; color: var(--color-spindle-lightest, #F6F9FC); font-family: 'Sora', sans-serif; font-size: var(--wst-body-text-sm); outline: none; transition: border-color 0.2s; } .pgs-map-search-wrap input::placeholder { color: var(--color-spindle-dark, #869EBB); } .pgs-map-search-wrap input:focus { border-color: var(--color-cardinal, #B8212A); } /* Location List */ .pgs-map-loc-list { overflow-y: auto; flex: 1; } .pgs-map-loc-list::-webkit-scrollbar { width: 3px; } .pgs-map-loc-list::-webkit-scrollbar-track { background: transparent; } .pgs-map-loc-list::-webkit-scrollbar-thumb { background: var(--color-big-stone-lighter, #D1D4D9); border-radius: 2px; } /* Location Item */ .pgs-map-loc-item { padding: 13px 20px; border-bottom: 1px solid rgba(168,198,234,0.08); cursor: pointer; transition: background 0.15s; } .pgs-map-loc-item:hover { background: rgba(168,198,234,0.06); } .pgs-map-loc-item.pgs-map-active { background: rgba(168,198,234,0.1); border-left: 3px solid var(--color-cardinal, #B8212A); padding-left: 17px; } .pgs-map-loc-item.pgs-map-hq { background: rgba(184,33,42,0.07); } /* HQ Badge */ .pgs-map-hq-badge { display: inline-block; font-size: var(--wst-body-text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--color-cardinal, #B8212A); color: var(--color-spindle-lightest, #F6F9FC); padding: 2px 7px; border-radius: 3px; margin-left: 7px; vertical-align: middle; position: relative; top: -1px; } /* Location Name & City */ .pgs-map-loc-name { font-size: var(--wst-body-text-sm); font-weight: 600; color: var(--color-spindle-lightest, #F6F9FC); margin-bottom: 2px; } .pgs-map-loc-city { font-size: var(--wst-body-text-sm); color: var(--color-spindle, #A8C6EA); } /* Expanded Details */ .pgs-map-loc-details { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(168,198,234,0.12); } .pgs-map-loc-item.pgs-map-active .pgs-map-loc-details { display: block; } .pgs-map-loc-address { font-size: var(--wst-body-text-sm); color: var(--color-spindle-light, #C2D7F0); line-height: 1.5; margin-bottom: 8px; } .pgs-map-directions-link { display: inline-flex; align-items: center; gap: 5px; font-size: var(--wst-body-text-sm); font-weight: 600; color: var(--color-cardinal-light, #CD6369) !important; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; } .pgs-map-directions-link:hover { color: var(--color-san-marino-light, #7599C0) !important; } .pgs-map-directions-link svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; } .pgs-map-loc-license { font-size: var(--wst-body-text-sm); color: #FFF !important; margin-top: 6px; } /* Hidden (search filter) */ .pgs-map-loc-item.pgs-map-hidden { display: none; } /* MAP CANVAS */ #pgs-map-canvas { width: 100%; height: 100%; } /* MOBILE */ @media (max-width: 768px) { .pgs-map-layout { grid-template-columns: 1fr; grid-template-rows: 360px 300px; height: auto; } .pgs-map-sidebar { order: 2; } #pgs-map-canvas { order: 1; } } /* ****************************** * VERT BOXES — CARE Letter Boxes * *************************** */ /* Wrapper: vertical stack of boxes */ .vert-boxes.e-con, .vert-boxes .e-con-inner { display: flex; flex-direction: column; gap: var(--space-1) !important; padding: 0 !important; width: 100% !important; } /* Individual Box */ .vert-boxes .box.e-con, .vert-boxes .box.elementor-element { display: flex; flex-direction: row; align-items: stretch; background-color: var(--color-big-stone); border-radius: 30px; box-shadow: 0 0px 8px #0A101A50; padding: var(--space-xs) !important; gap: 0 !important; width: 100%; } /* Left Col — Large Letter */ .vert-boxes .left-col.e-con, .vert-boxes .left-col.elementor-element { display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; width: 100px; min-width: 100px; padding: 0 var(--space-xs) 0 0 !important; border-right: 1px solid var(--color-san-marino); } .vert-boxes .left-col .big-letter { font-size: var(--wst-h1); font-family: Montserrat; font-weight: 700; line-height: 1.3em; color: var(--color-cardinal); text-align: center; } /* Right Col — Title + Body Text */ .vert-boxes .right-col.e-con, .vert-boxes .right-col.elementor-element { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 0 0 0 var(--space-xs) !important; gap: var(--space-0-5) !important; } .vert-boxes .right-col .elementor-widget-heading .elementor-heading-title { font-size: var(--wst-kicker); color: var(--color-spindle); font-family: 'Sora'; font-weight: 400; text-transform: uppercase; line-height: 1.5em; letter-spacing: 0.1em; } .vert-boxes .right-col .elementor-widget-text-editor p, .vert-boxes .right-col .elementor-widget-text-editor { font-size: var(--wst-card-text); color: var(--color-white); line-height: 1.5; margin: 0; } /* Media queries at bottom of section */ @media (max-width: 1024px) { .vert-boxes .left-col.e-con, .vert-boxes .left-col.elementor-element { width: 80px; min-width: 80px; } } @media (max-width: 768px) { .vert-boxes .box.e-con, .vert-boxes .box.elementor-element { padding: var(--space-1-5) !important; } .vert-boxes .left-col.e-con, .vert-boxes .left-col.elementor-element { width: 64px; min-width: 64px; } .vert-boxes .right-col .elementor-widget-text-editor p, .vert-boxes .right-col .elementor-widget-text-editor { font-size: var(--wst-body-text); } } @media (max-width: 480px) { .vert-boxes .box.e-con, .vert-boxes .box.elementor-element { flex-direction: column; align-items: flex-start; padding: var(--space-1) !important; gap: var(--space-0-5) !important; } .vert-boxes .left-col.e-con, .vert-boxes .left-col.elementor-element { width: auto; min-width: unset; justify-content: flex-start; } .vert-boxes .right-col.e-con, .vert-boxes .right-col.elementor-element { width: 100%; padding: var(--space-0-5) 0 0 0 !important; } } /* ***************************** * PGS TEAM MEMBER CARDS * *************************** */ /* PARENT CONTAINERS */ .pgs-team-members, .pgs-team-members .e-con-inner { display: block !important; } /* Hide description on card - only shown in modal */ .raven-team-members-wrapper .team-member--description { display: none; } /* Make cards clickable with hover effect */ .raven-team-members-wrapper .elementor-repeater-item { cursor: pointer; } .raven-team-members-wrapper .team-member { cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; border-bottom: 3px solid var(--color-san-marino); border-radius: 30px; } .raven-team-members-wrapper .team-member:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); border-bottom: 3px solid #B8212A; } /* Tighten content padding */ .raven-team-members-wrapper .team-member--content { padding: 16px; } /* Scale down name and title on card */ .raven-team-members-wrapper .team-member--name { font-size: var(--wst-card-text) !important; line-height: 1.3em; margin-bottom: 4px; } .raven-team-members-wrapper .team-member--position { font-size: var(--wst-body-text) !important; color: var(--color-san-marino-light) !important; transition: color 0.25s ease; } .raven-team-members-wrapper .team-member:hover .team-member--position { color: var(--color-cardinal) !important; } /* CEO CENTERED */ .pgs-team-members.ceo .raven-team-members-wrapper { grid-template-columns: minmax(0, 24%) !important; justify-content: center; } @media (max-width: 1024px) { .pgs-team-members.ceo .raven-team-members-wrapper { grid-template-columns: minmax(0, 30%) !important; } } @media (max-width: 767px) { .pgs-team-members.ceo .raven-team-members-wrapper { grid-template-columns: minmax(0, 48%) !important; } } @media (max-width: 480px) { .pgs-team-members.ceo .raven-team-members-wrapper { grid-template-columns: minmax(0, 100%) !important; } } /* ***************************** * PGS TEAM MODAL * *************************** */ .pgs-team-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 99999; align-items: center; justify-content: center; } .pgs-team-modal-overlay.active { display: flex; } .pgs-team-modal { background: #fff; max-width: 680px; width: 90%; max-height: 85vh; overflow-y: auto; border-radius: 6px; position: relative; padding: 0; display: flex; flex-direction: column; align-items: flex-start; } /* Navy header band - scrolls with the modal, not fixed */ .pgs-team-modal-header { background: #1B2A41; width: 100%; display: flex; gap: 24px; align-items: flex-start; padding: 28px 32px; box-sizing: border-box; } .pgs-team-modal-img { width: 110px; min-width: 110px; height: 130px; object-fit: cover; object-position: top; border: 2px solid var(--color-san-marino); flex-shrink: 0; } .pgs-team-modal-header-text { flex: 1; padding-top: 6px; } .pgs-team-modal-name { font-size: var(--wst-h5) !important; font-weight: 700; margin: 0 0 6px; color: #ffffff; line-height: 1.2em; } .pgs-team-modal-title { font-size: var(--wst-body-text) !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-san-marino-light); margin: 0; } /* Bio body */ .pgs-team-modal-bio { font-size: var(--wst-body-text) !important; line-height: 1.7; color: #080A0C; padding: 28px 32px 32px; box-sizing: border-box; width: 100%; } .pgs-team-modal-bio p { margin: 0; } /* Close button */ .pgs-team-modal-close { position: absolute; top: 12px; right: 14px; font-size: 20px !important; cursor: pointer; background: #B8212A !important; border: none; line-height: 1; color: #fff; width: 24px; height: 24px; padding: 2px !important; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; z-index: 10; } .pgs-team-modal-close:hover { background: #93191f !important; } @media (max-width: 600px) { .pgs-team-modal-header { flex-direction: column; padding: 20px; } .pgs-team-modal-img { width: 100%; height: auto; min-width: unset; max-height: none; object-fit: contain; } .pgs-team-modal-bio { padding: 20px; } } /* ***************************** * CONTENT CARDS * *************************** */ .content-cards { flex-direction: row !important; flex-wrap: wrap !important; gap: 16px !important; } /* HOVER CARDS */ .content-cards a.card { transition: transform 0.25s ease, box-shadow 0.25s ease; border-radius: 30px; } .content-cards a.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } /* Card alternating colors */ .content-cards.cards-colors .card { border-radius: 30px !important; } .content-cards.cards-colors .card:nth-child(3n+1) { background-color: var(--color-big-stone) !important; } .content-cards.cards-colors .card:nth-child(3n+2) { background-color: var(--color-san-marino) !important; } .content-cards.cards-colors .card:nth-child(3n+3) { background-color: var(--color-cardinal) !important; } .content-cards.cards-colors .card { text-align: center !important; } /* Title */ .content-cards h3, .content-cards .elementor-heading-title { font-size: var(--wst-kicker) !important; font-family: 'Sora', sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--color-white) !important; text-align: center !important; } /* Text */ .content-cards .card-bottom p { font-size: var(--wst-body-text) !important; font-family: 'Sora', sans-serif !important; font-weight: 400 !important; color: var(--color-white) !important; text-align: center !important; } /* CARDS COLUMNS */ /* Cards 2 Col */ .content-cards.cols-2 .card { flex: 1 1 calc(50% - 16px) !important; min-width: 280px; padding: var(--space-xs); } @media (max-width: 600px) { .content-cards.cols-2 .card { flex: 1 1 100% !important; } } /* Cards 3 Col */ .content-cards.cols-3 .card { flex: 1 1 calc(33.333% - 16px) !important; min-width: 280px; padding: var(--space-xs); } @media (max-width: 1024px) { .content-cards.cols-3 .card { flex: 1 1 calc(50% - 16px) !important; } } @media (max-width: 600px) { .content-cards.cols-3 .card { flex: 1 1 100% !important; } } /* Cards 4 Col */ .content-cards.cols-4 .card { flex: 1 1 calc(25% - 16px) !important; min-width: 240px; padding: var(--space-xs); } @media (max-width: 1024px) { .content-cards.cols-4 .card { flex: 1 1 calc(50% - 16px) !important; } } @media (max-width: 600px) { .content-cards.cols-4 .card { flex: 1 1 100% !important; } } /* ***************************** * CARDS 2 COLS * (image-full card, 2 per row) * *************************** */ /* Inner flex wrapper */ .cards-2-cols.e-con > .e-con-inner, .cards-2-cols.e-con-boxed > .e-con-inner { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 16px !important; align-items: stretch !important; } /* Each card: 50% width */ .cards-2-cols .content-box.e-con { flex: 1 1 calc(50% - 16px) !important; min-width: 300px !important; max-width: calc(50% - 8px) !important; display: flex !important; flex-direction: row !important; overflow: hidden !important; background: var(--color-big-stone) !important; padding: 0 !important; height: auto !important; border-radius: 30px; } /* Image column */ .cards-2-cols .content-box .img.e-con { flex: 0 0 38% !important; width: 38% !important; max-width: 38% !important; padding: 0 !important; overflow: hidden !important; align-self: stretch !important; } .cards-2-cols .content-box .img.e-con, .cards-2-cols .content-box .img.e-con .elementor-widget-raven-image, .cards-2-cols .content-box .img.e-con .elementor-widget-container, .cards-2-cols .content-box .img.e-con .raven-image { height: 100% !important; } .cards-2-cols .content-box .img.e-con img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; display: block !important; } /* Text column */ .cards-2-cols .content-box .txt.e-con { flex: 1 1 62% !important; padding: var(--space-xs) !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; height: auto !important; } /* Title */ .cards-2-cols .content-box .txt.e-con h3, .cards-2-cols .content-box .txt.e-con .elementor-heading-title { font-size: var(--wst-kicker) !important; font-family: 'Sora', sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--color-spindle) !important; text-align: left !important; } /* Body text */ .cards-2-cols .content-box .txt.e-con p { font-size: var(--wst-body-text) !important; font-family: 'Sora', sans-serif !important; font-weight: 400 !important; color: var(--color-white) !important; text-align: left !important; } /* Tablet: keep 2 col, stack img on top of text */ @media (max-width: 1024px) { .cards-2-cols .content-box.e-con.e-con { flex-direction: column !important; min-width: 0 !important; max-width: calc(50% - 8px) !important; } .cards-2-cols .content-box .img.e-con.e-con { width: 100% !important; flex: 0 0 250px !important; max-width: 100% !important; height: 250px !important; min-height: 250px !important; padding: 0 !important; overflow: hidden !important; align-self: auto !important; } .cards-2-cols .content-box .img.e-con.e-con .elementor-widget-raven-image, .cards-2-cols .content-box .img.e-con.e-con .elementor-widget-container, .cards-2-cols .content-box .img.e-con.e-con .raven-image { height: 250px !important; width: 100% !important; } .cards-2-cols .content-box .img.e-con.e-con img { width: 100% !important; height: 250px !important; object-fit: cover !important; object-position: center top !important; display: block !important; } .cards-2-cols .content-box .txt.e-con.e-con { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; padding: var(--space-xs) !important; align-items: center !important; height: auto !important; } .cards-2-cols .content-box .txt.e-con h3, .cards-2-cols .content-box .txt.e-con .elementor-heading-title { text-align: center !important; } .cards-2-cols .content-box .txt.e-con p { text-align: center !important; } } /* Mobile: 1 col */ @media (max-width: 680px) { .cards-2-cols .content-box.e-con.e-con { flex: 1 1 100% !important; max-width: 100% !important; min-width: 0 !important; } }