.elementor-kit-10{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-8c5a7db:#FB6F92;--e-global-color-249f1d5:#FF8FAB;--e-global-color-79da24c:#FFD9DA;--e-global-color-375e2f5:#30343F;--e-global-color-a9672cf:#1B2021;--e-global-color-8a4a4b5:#FFFFFF;--e-global-color-8f87dba:#F0EBD2;--e-global-color-4146e85:#D3D3D3;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{--lightbox-text-color:var( --e-global-color-8f87dba );}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */:root { /* ARROW Parameters (Wide Screen) */ --arrow-button-size: 100px; --arrow-icon-size: 20px; --arrow-border-thickness: 1px; --arrow-border-radius: 50%; --arrow-left-offset: 150px; /* Distance from image edge */ --arrow-right-offset: 150px; /* Distance from image edge */ --arrow-vertical-offset: 200px; /* Vertical offset from the image center */ --arrow-icon-color: #FFFFFF; --arrow-border-color: #FFFFFF; --arrow-bg-color: transparent; --arrow-hover-icon-color: #EEEEEE; --arrow-hover-border-color: #555555; --arrow-hover-bg-color: #555555; /* TITLE Parameters (Wide Screen - Top Right Anchor) */ --lightbox-title-font-family: 'Archivo', sans-serif; --lightbox-title-font-size: 40px; --lightbox-title-font-weight: 400; --lightbox-title-color: #ffffff; /* Text color */ --lightbox-title-hover-color: #ffffff; --lightbox-title-padding: 0px 0px; /* No padding/bg for top-right style */ --lightbox-title-bg-color: transparent; --lightbox-title-horizontal-offset: 150px; /* Distance from the RIGHT viewport edge */ --lightbox-title-vertical-offset: 150px; /* Distance from the TOP viewport edge */ } /* * ---------------------------------------------------- * 1. LAPTOP BREAKPOINT (Max-width 1200px) * ---------------------------------------------------- */ @media (max-width: 1200px) { :root { /* Arrow Adjustments for Laptop */ --arrow-button-size: 75px; --arrow-icon-size: 18px; --arrow-left-offset: 15px; --arrow-right-offset: 15px; --arrow-vertical-offset: 0px; /* Title Adjustments for Laptop */ --lightbox-title-font-size: 30px; --lightbox-title-horizontal-offset: 80px; --lightbox-title-vertical-offset: 80px; } } /* * ---------------------------------------------------- * 2. TABLET BREAKPOINT (Max-width 1024px) * ---------------------------------------------------- */ @media (max-width: 1024px) { :root { /* Arrow Adjustments for Tablet */ --arrow-button-size: 70px; --arrow-icon-size: 20px; --arrow-left-offset: 100px; --arrow-right-offset: 100px; --arrow-vertical-offset: 150px; /* Title Adjustments for Tablet */ --lightbox-title-font-size: 24px; --lightbox-title-horizontal-offset: 300px; --lightbox-title-vertical-offset: 20px; } } /* * ---------------------------------------------------- * 3. MOBILE BREAKPOINT (Max-width 767px) * ---------------------------------------------------- */ @media (max-width: 767px) { :root { /* Arrow Adjustments for Mobile */ --arrow-button-size: 40px; --arrow-icon-size: 14px; --arrow-left-offset: 5px; --arrow-right-offset: 5px; --arrow-vertical-offset: 0px; --arrow-border-thickness: 0px; --arrow-hover-bg-color: transparent; /* Title Adjustments for Mobile */ --lightbox-title-font-size: 18px; --lightbox-title-horizontal-offset: 250px; --lightbox-title-vertical-offset: 20px; } } /* ---------------------------------------------------- * CORE LIGHTBOX STYLES (LOGIC - DO NOT EDIT BELOW THIS) * ---------------------------------------------------- */ /* ARROW LOGIC (Anchored to Image Center/Edges) */ .elementor-lightbox .elementor-swiper-button { width: var(--arrow-button-size) !important; height: var(--arrow-button-size) !important; display: flex; justify-content: center; align-items: center; border: var(--arrow-border-thickness) solid var(--arrow-border-color); border-radius: var(--arrow-border-radius); color: var(--arrow-icon-color); background-color: var(--arrow-bg-color); transition: all 0.3s ease; z-index: 100; } /* Re-center the button vertically relative to the image container */ .elementor-lightbox .elementor-swiper-button-prev, .elementor-lightbox .elementor-swiper-button-next { top: calc(50% + var(--arrow-vertical-offset)) !important; transform: translateY(-50%) !important; } .elementor-lightbox .eicon-chevron-left:before, .elementor-lightbox .eicon-chevron-right:before { font-size: var(--arrow-icon-size); } .elementor-lightbox .elementor-swiper-button-prev { left: var(--arrow-left-offset) !important; } .elementor-lightbox .elementor-swiper-button-next { right: var(--arrow-right-offset) !important; } .elementor-lightbox .elementor-swiper-button:hover { background-color: var(--arrow-hover-bg-color); border-color: var(--arrow-hover-border-color); color: var(--arrow-hover-icon-color); transform: scale(1.1); } /* TITLE LOGIC (Fixed to Top-Right of Viewport - Wix Style) */ .elementor-slideshow__title { position: fixed !important; top: var(--lightbox-title-vertical-offset) !important; right: var(--lightbox-title-horizontal-offset) !important; left: auto !important; /* Ensure it doesn't fight 'right' */ transform: none !important; /* Ensure no horizontal centering is applied */ font-family: var(--lightbox-title-font-family) !important; font-size: var(--lightbox-title-font-size) !important; font-weight: var(--lightbox-title-font-weight) !important; color: var(--lightbox-title-color) !important; background-color: var(--lightbox-title-bg-color) !important; padding: var(--lightbox-title-padding) !important; max-width: 50vw !important; z-index: 900 !important; text-align: right; transition: color 0.3s ease; } .elementor-slideshow__title:hover { color: var(--lightbox-title-hover-color) !important; }/* End custom CSS */