.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-4370 .elementor-element.elementor-element-54e9241e .elementor-button{font-family:"Formula Condensed", Sans-serif;font-size:22px;font-weight:700;border-radius:8px 8px 8px 8px;padding:21px 20px 21px 20px;}.elementor-4370 .elementor-element.elementor-element-1b4db461{--display:flex;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:16px;}.elementor-4370 .elementor-element.elementor-element-1b4db461:not(.elementor-motion-effects-element-type-background), .elementor-4370 .elementor-element.elementor-element-1b4db461 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;}.elementor-4370 .elementor-element.elementor-element-26043d7e{--display:flex;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:16px;}.elementor-4370 .elementor-element.elementor-element-26043d7e:not(.elementor-motion-effects-element-type-background), .elementor-4370 .elementor-element.elementor-element-26043d7e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;}.elementor-4370 .elementor-element.elementor-element-6f419bc8{--display:flex;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:16px;}.elementor-4370 .elementor-element.elementor-element-6f419bc8:not(.elementor-motion-effects-element-type-background), .elementor-4370 .elementor-element.elementor-element-6f419bc8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;}.elementor-4370 .elementor-element.elementor-element-1581fbea{--display:flex;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:16px;}.elementor-4370 .elementor-element.elementor-element-1581fbea:not(.elementor-motion-effects-element-type-background), .elementor-4370 .elementor-element.elementor-element-1581fbea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;}.elementor-4370 .elementor-element.elementor-element-3683b324{--n-accordion-title-font-size:60px;--n-accordion-title-justify-content:initial;--n-accordion-title-flex-grow:initial;--n-accordion-title-icon-order:-1;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-border-radius:0px 0px 0px 0px;--n-accordion-title-normal-color:#B9B9B9;--n-accordion-title-hover-color:var( --e-global-color-primary );--n-accordion-title-active-color:var( --e-global-color-primary );--n-accordion-icon-size:30px;--n-accordion-icon-gap:8px;}.elementor-4370 .elementor-element.elementor-element-3683b324 > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title{background-color:#F5F5F5;border-style:none;}.elementor-4370 .elementor-element.elementor-element-3683b324 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{border-style:solid;border-width:0px 0px 1px 0px;border-color:#B9B9B9;}.elementor-4370 .elementor-element.elementor-element-3683b324 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title:hover{border-style:solid;border-width:0px 0px 1px 0px;border-color:#141414;}.elementor-4370 .elementor-element.elementor-element-3683b324 {--n-accordion-padding:22px 0px 22px 25px;}:where( .elementor-4370 .elementor-element.elementor-element-3683b324 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Formula Condensed", Sans-serif;font-weight:700;text-transform:uppercase;}:where( .elementor-4370 .elementor-element.elementor-element-3683b324 > .e-n-accordion > .e-n-accordion-item ) > .e-con{border-style:none;--border-radius:0px 0px 0px 0px;--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;}.elementor-4370 .elementor-element.elementor-element-500aa699{--display:flex;border-style:none;--border-style:none;--border-radius:0px 0px 8px 8px;}.elementor-4370 .elementor-element.elementor-element-49ed17b1{--display:flex;border-style:none;--border-style:none;--border-radius:0px 0px 8px 8px;}.elementor-4370 .elementor-element.elementor-element-119a7565{--display:flex;border-style:none;--border-style:none;--border-radius:0px 0px 8px 8px;}.elementor-4370 .elementor-element.elementor-element-1107dd43{--display:flex;border-style:none;--border-style:none;--border-radius:0px 0px 8px 8px;}.elementor-4370 .elementor-element.elementor-element-20d52d2e{--display:flex;border-style:none;--border-style:none;--border-radius:0px 0px 8px 8px;}.elementor-4370 .elementor-element.elementor-element-6bb6f1f0{--display:flex;border-style:none;--border-style:none;--border-radius:0px 0px 8px 8px;}.elementor-4370 .elementor-element.elementor-element-63d0ddec{--n-accordion-title-font-size:22px;--n-accordion-title-justify-content:space-between;--n-accordion-title-flex-grow:1;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:10px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-border-radius:8px 8px 0px 0px;--n-accordion-title-normal-color:var( --e-global-color-secondary );--n-accordion-title-hover-color:var( --e-global-color-accent );--n-accordion-title-active-color:var( --e-global-color-accent );--n-accordion-icon-size:15px;--n-accordion-icon-normal-color:var( --e-global-color-accent );--n-accordion-icon-hover-color:var( --e-global-color-accent );--n-accordion-icon-active-color:var( --e-global-color-accent );}.elementor-4370 .elementor-element.elementor-element-63d0ddec > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{background-color:var( --e-global-color-primary );border-style:solid;border-width:1px 1px 1px 1px;border-color:#313131;}.elementor-4370 .elementor-element.elementor-element-63d0ddec > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title:hover{background-color:var( --e-global-color-primary );}.elementor-4370 .elementor-element.elementor-element-63d0ddec > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title{background-color:#313131;border-style:solid;border-width:0px 0px 0px 0px;}:where( .elementor-4370 .elementor-element.elementor-element-63d0ddec > .e-n-accordion > .e-n-accordion-item ) > .e-con{background-color:#313131;border-style:none;--border-radius:0px 0px 8px 8px;--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;}.elementor-4370 .elementor-element.elementor-element-63d0ddec {--n-accordion-padding:24px 20px 24px 20px;}:where( .elementor-4370 .elementor-element.elementor-element-63d0ddec > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Formula Condensed", Sans-serif;font-weight:700;text-transform:uppercase;line-height:120%;}:root{--page-title-display:none;}@media(max-width:1200px){.elementor-4370 .elementor-element.elementor-element-3683b324{--n-accordion-title-font-size:34px;}}@media(max-width:880px){.elementor-4370 .elementor-element.elementor-element-54e9241e .elementor-button{font-size:18px;padding:14px 20px 14px 20px;}.elementor-4370 .elementor-element.elementor-element-3683b324{--n-accordion-title-font-size:28px;}.elementor-4370 .elementor-element.elementor-element-63d0ddec{--n-accordion-title-font-size:18px;}}@media(max-width:767px){.elementor-4370 .elementor-element.elementor-element-3683b324{--n-accordion-title-font-size:24px;--n-accordion-icon-size:24px;}.elementor-4370 .elementor-element.elementor-element-63d0ddec{--n-accordion-title-font-size:16px;}}/* Start custom CSS for nested-accordion, class: .elementor-element-63d0ddec *//* ======================================================= 1. FOR CLASSIC ELEMENTOR ACCORDION ======================================================= */ /* Closed state: 8px border-radius on all sides */ .elementor-4370 .elementor-element.elementor-element-63d0ddec .elementor-tab-title { border-radius: 8px !important; transition: border-radius 0.3s ease !important; /* Smooth corner transition */ } /* Open state: 8px border-radius ONLY on top (0 on bottom) */ .elementor-4370 .elementor-element.elementor-element-63d0ddec .elementor-tab-title.elementor-active { border-radius: 8px 8px 0 0 !important; } /* Optional: make the bottom corners of the content rounded if it has a background color */ .elementor-4370 .elementor-element.elementor-element-63d0ddec .elementor-tab-content { border-radius: 0 0 8px 8px !important; } /* ======================================================= 2. FOR NEW NESTED ACCORDION (Nested Elements) ======================================================= */ /* Closed state */ .elementor-4370 .elementor-element.elementor-element-63d0ddec .e-n-accordion-item-title { border-radius: 8px !important; transition: border-radius 0.3s ease !important; } /* Open state (determined by the aria-expanded attribute) */ .elementor-4370 .elementor-element.elementor-element-63d0ddec .e-n-accordion-item-title[aria-expanded="true"] { border-radius: 8px 8px 0 0 !important; } /* Optional for the content block of the new accordion */ .elementor-4370 .elementor-element.elementor-element-63d0ddec .e-n-accordion-item > *:not(summary) { border-radius: 0 0 8px 8px !important; }/* End custom CSS */ /* Start custom CSS *//* ======================================================= 1. MAIN CARD SETUP (FIXED 536px HEIGHT) ======================================================= */ body.elementor-page-4370 .ha-card-elementor { display: flex !important; flex-direction: column !important; flex: 1 !important; height: 536px !important; /* Strictly fix 536px height */ background: #ffffff; border-radius: 12px; cursor: pointer; overflow: hidden !important; margin: 0 5px; padding: 0 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important; /* Keep rounded corners during animation */ transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; -webkit-mask-image: -webkit-radial-gradient(white, black) !important; } body.elementor-page-4370 .ha-card-elementor:hover { flex: 3 !important; } /* ======================================================= 2. TOP WRAPPER (STRICTLY 400px HEIGHT) ======================================================= */ body.elementor-page-4370 .ha-top-wrapper { display: flex !important; flex-direction: row !important; flex: 0 0 400px !important; height: 400px !important; width: 100% !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; background: #f4f4f4; } /* ======================================================= 3. LEFT IMAGE COLUMN ======================================================= */ body.elementor-page-4370 .ha-visible-image { flex: 1 !important; min-width: 250px !important; height: 100% !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; display: flex; } body.elementor-page-4370 .ha-visible-image .elementor-widget, body.elementor-page-4370 .ha-visible-image .elementor-widget-image, body.elementor-page-4370 .ha-visible-image .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } body.elementor-page-4370 .ha-visible-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; display: block !important; } /* ======================================================= 4. RIGHT HIDDEN TEXT COLUMN (DESKTOP HORIZONTAL) ======================================================= */ body.elementor-page-4370 .ha-hidden-content { flex: 0 0 0px !important; max-width: 0px !important; min-width: 0px !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important; overflow: hidden !important; display: flex; flex-direction: column; justify-content: center; transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), max-width 0.6s cubic-bezier(0.25, 1, 0.5, 1), padding 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease !important; } body.elementor-page-4370 .ha-card-elementor:hover .ha-hidden-content { flex: 0 0 350px !important; max-width: 350px !important; min-width: 350px !important; padding: 30px !important; opacity: 1 !important; transition-delay: 0.1s !important; } /* ======================================================= 5. BOTTOM TITLE AREA ======================================================= */ body.elementor-page-4370 .ha-bottom-title { flex: 0 0 136px !important; width: 100% !important; padding: 0 15px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; background: #ffffff; position: relative; border-top: 1px solid #eeeeee; overflow: hidden !important; } /* ======================================================= 6. SINGLE TITLE ANIMATION (FIXED JUMP) ======================================================= */ body.elementor-page-4370 .ha-title-default { transition: transform 0.4s ease !important; width: 100%; margin: 0 !important; white-space: nowrap !important; /* PREVENT line breaks */ overflow: hidden !important; text-overflow: ellipsis !important; /* Adds "..." if text doesn't fit */ transform: translateY(0) !important; /* Base position */ } /* Disabled the upwards shift so the bottom gap remains perfectly even */ body.elementor-page-4370 .ha-card-elementor:hover .ha-title-default { transform: translateY(0) !important; } /* ======================================================= 7. TABLET & MOBILE ADAPTATION (VERTICAL ACCORDION) ======================================================= */ @media (max-width: 880px) { /* 1. Remove strict height from the main card */ body.elementor-page-4370 .ha-card-elementor { flex: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin-bottom: 10px !important; } /* 2. Top wrapper stacks as a column */ body.elementor-page-4370 .ha-top-wrapper { flex-direction: column !important; flex: none !important; height: auto !important; width: 100% !important; min-height: 0 !important; } /* 3. STRICTLY FIX IMAGE HEIGHT */ body.elementor-page-4370 .ha-visible-image, body.elementor-page-4370 .ha-visible-image > div, body.elementor-page-4370 .ha-visible-image .elementor-widget, body.elementor-page-4370 .ha-visible-image .elementor-widget-image, body.elementor-page-4370 .ha-visible-image .elementor-widget-container, body.elementor-page-4370 .ha-visible-image img { flex: none !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 250px !important; min-height: 250px !important; max-height: 250px !important; object-fit: cover !important; padding: 0 !important; margin: 0 !important; } /* 4. STRICTLY STRETCH TEXT TO 100% */ body.elementor-page-4370 .ha-hidden-content, body.elementor-page-4370 .ha-hidden-content > div, body.elementor-page-4370 .ha-hidden-content > .elementor-widget-wrap { flex: none !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; } /* Animation for the text container itself (Closed State) */ body.elementor-page-4370 .ha-hidden-content { max-height: 0px !important; padding: 0 15px !important; /* Horizontal padding kept so text doesn't jump */ opacity: 0 !important; overflow: hidden !important; box-sizing: border-box !important; transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), padding 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease !important; } /* 5. Open on tap/hover (REDUCED PADDING) */ body.elementor-page-4370 .ha-card-elementor:hover .ha-hidden-content, body.elementor-page-4370 .ha-card-elementor:active .ha-hidden-content { max-height: 150px !important; opacity: 1 !important; /* Force 100% width to override the desktop hover rules */ width: 100% !important; min-width: 100% !important; max-width: 100% !important; /* Reduced padding: 20px top/bottom, 15px left/right */ padding: 20px 15px !important; } /* 6. Title Area */ body.elementor-page-4370 .ha-bottom-title { flex: none !important; width: 100% !important; min-width: 100% !important; padding: 20px !important; } } /* Make sections sticky */ .x-stacked-section { position: sticky !important; top: 0 !important; z-index: 1; } /* ======================================================= ВІДКЛЮЧЕННЯ ЕФЕКТУ НАКЛАДАННЯ ТІЛЬКИ ДЛЯ 768px І НИЖЧЕ ======================================================= */ @media (max-width: 768px) { .x-stacked-section { position: relative !important; /* Відключає липкість */ top: auto !important; /* Скидає відступ від верху */ z-index: auto !important; /* Скасовує накладання шарів */ } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Formula Condensed'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://s1.kanesherwell.com/wp-content/uploads/2026/06/FormulaCondensed-Bold.ttf') format('truetype'); } @font-face { font-family: 'Formula Condensed'; font-style: normal; font-weight: 300; font-display: auto; src: url('https://s1.kanesherwell.com/wp-content/uploads/2026/06/FormulaCondensed-Light.ttf') format('truetype'); } /* End Custom Fonts CSS */