.elementor-2574 .elementor-element.elementor-element-37c694c1{border-radius:12px 12px 0px 0px;}.elementor-2574 .elementor-element.elementor-element-37c694c1 .elementor-wrapper{--video-aspect-ratio:1.5;}.elementor-2574 .elementor-element.elementor-element-470e7555{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 19px) 0px;--e-rating-icon-font-size:22px;--e-rating-gap:10px;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-2574 .elementor-element.elementor-element-6ec414c .elementor-icon-box-wrapper{text-align:start;}.elementor-2574 .elementor-element.elementor-element-6ec414c .elementor-icon-box-title{margin-block-end:4px;color:#0BBBDA;}.elementor-2574 .elementor-element.elementor-element-6ec414c .elementor-icon-box-title, .elementor-2574 .elementor-element.elementor-element-6ec414c .elementor-icon-box-title a{font-family:"Formula Condensed", Sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}.elementor-2574 .elementor-element.elementor-element-6ec414c .elementor-icon-box-description{font-family:"Helvetica Now Var", Sans-serif;font-size:12px;font-weight:400;letter-spacing:0px;color:#8F8F8F;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-2574 .elementor-element.elementor-element-2a8f876 .elementor-icon-wrapper{text-align:center;}.elementor-2574 .elementor-element.elementor-element-2a8f876 .elementor-icon{font-size:18px;}.elementor-2574 .elementor-element.elementor-element-2a8f876 .elementor-icon svg{height:18px;}.elementor-2574 .elementor-element.elementor-element-2a8f876 .elementor-icon-wrapper svg{width:auto;}.elementor-2574 .elementor-element.elementor-element-23d9e718{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 19px) 0px;--e-rating-icon-font-size:22px;--e-rating-gap:10px;}.elementor-2574 .elementor-element.elementor-element-66f98107 .elementor-icon-box-wrapper{text-align:start;}.elementor-2574 .elementor-element.elementor-element-66f98107 .elementor-icon-box-title{margin-block-end:4px;color:#0BBBDA;}.elementor-2574 .elementor-element.elementor-element-66f98107 .elementor-icon-box-title, .elementor-2574 .elementor-element.elementor-element-66f98107 .elementor-icon-box-title a{font-family:"Formula Condensed", Sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}.elementor-2574 .elementor-element.elementor-element-66f98107 .elementor-icon-box-description{font-family:"Helvetica Now Var", Sans-serif;font-size:12px;font-weight:400;letter-spacing:0px;color:#8F8F8F;}.elementor-2574 .elementor-element.elementor-element-71954d2c .elementor-icon-wrapper{text-align:center;}.elementor-2574 .elementor-element.elementor-element-71954d2c .elementor-icon{font-size:18px;}.elementor-2574 .elementor-element.elementor-element-71954d2c .elementor-icon svg{height:18px;}.elementor-2574 .elementor-element.elementor-element-71954d2c .elementor-icon-wrapper svg{width:auto;}.elementor-2574 .elementor-element.elementor-element-f2d39af{border-radius:12px 12px 0px 0px;}.elementor-2574 .elementor-element.elementor-element-f2d39af .elementor-wrapper{--video-aspect-ratio:1.5;}.elementor-2574 .elementor-element.elementor-element-3061c610{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 19px) 0px;--e-rating-icon-font-size:22px;--e-rating-gap:10px;}.elementor-2574 .elementor-element.elementor-element-5431f40b .elementor-icon-box-wrapper{text-align:start;}.elementor-2574 .elementor-element.elementor-element-5431f40b .elementor-icon-box-title{margin-block-end:4px;color:#0BBBDA;}.elementor-2574 .elementor-element.elementor-element-5431f40b .elementor-icon-box-title, .elementor-2574 .elementor-element.elementor-element-5431f40b .elementor-icon-box-title a{font-family:"Formula Condensed", Sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}.elementor-2574 .elementor-element.elementor-element-5431f40b .elementor-icon-box-description{font-family:"Helvetica Now Var", Sans-serif;font-size:12px;font-weight:400;letter-spacing:0px;color:#8F8F8F;}.elementor-2574 .elementor-element.elementor-element-5bceb92e .elementor-icon-wrapper{text-align:center;}.elementor-2574 .elementor-element.elementor-element-5bceb92e .elementor-icon{font-size:18px;}.elementor-2574 .elementor-element.elementor-element-5bceb92e .elementor-icon svg{height:18px;}.elementor-2574 .elementor-element.elementor-element-5bceb92e .elementor-icon-wrapper svg{width:auto;}.elementor-2574 .elementor-element.elementor-element-76dd29d1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 19px) 0px;--e-rating-icon-font-size:22px;--e-rating-gap:10px;}.elementor-2574 .elementor-element.elementor-element-53f1e144 .elementor-icon-box-wrapper{text-align:start;}.elementor-2574 .elementor-element.elementor-element-53f1e144 .elementor-icon-box-title{margin-block-end:4px;color:#0BBBDA;}.elementor-2574 .elementor-element.elementor-element-53f1e144 .elementor-icon-box-title, .elementor-2574 .elementor-element.elementor-element-53f1e144 .elementor-icon-box-title a{font-family:"Formula Condensed", Sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}.elementor-2574 .elementor-element.elementor-element-53f1e144 .elementor-icon-box-description{font-family:"Helvetica Now Var", Sans-serif;font-size:12px;font-weight:400;letter-spacing:0px;color:#8F8F8F;}.elementor-2574 .elementor-element.elementor-element-4ec24e58 .elementor-icon-wrapper{text-align:center;}.elementor-2574 .elementor-element.elementor-element-4ec24e58 .elementor-icon{font-size:18px;}.elementor-2574 .elementor-element.elementor-element-4ec24e58 .elementor-icon svg{height:18px;}.elementor-2574 .elementor-element.elementor-element-4ec24e58 .elementor-icon-wrapper svg{width:auto;}.elementor-2574 .elementor-element.elementor-element-54f4fad1{border-radius:12px 12px 0px 0px;}.elementor-2574 .elementor-element.elementor-element-54f4fad1 .elementor-wrapper{--video-aspect-ratio:1.5;}.elementor-2574 .elementor-element.elementor-element-4c545d91{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 19px) 0px;--e-rating-icon-font-size:22px;--e-rating-gap:10px;}.elementor-2574 .elementor-element.elementor-element-1b770e78 .elementor-icon-box-wrapper{text-align:start;}.elementor-2574 .elementor-element.elementor-element-1b770e78 .elementor-icon-box-title{margin-block-end:4px;color:#0BBBDA;}.elementor-2574 .elementor-element.elementor-element-1b770e78 .elementor-icon-box-title, .elementor-2574 .elementor-element.elementor-element-1b770e78 .elementor-icon-box-title a{font-family:"Formula Condensed", Sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}.elementor-2574 .elementor-element.elementor-element-1b770e78 .elementor-icon-box-description{font-family:"Helvetica Now Var", Sans-serif;font-size:12px;font-weight:400;letter-spacing:0px;color:#8F8F8F;}.elementor-2574 .elementor-element.elementor-element-7b2129bc .elementor-icon-wrapper{text-align:center;}.elementor-2574 .elementor-element.elementor-element-7b2129bc .elementor-icon{font-size:18px;}.elementor-2574 .elementor-element.elementor-element-7b2129bc .elementor-icon svg{height:18px;}.elementor-2574 .elementor-element.elementor-element-7b2129bc .elementor-icon-wrapper svg{width:auto;}.elementor-2574 .elementor-element.elementor-element-47726fec{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 19px) 0px;--e-rating-icon-font-size:22px;--e-rating-gap:10px;}.elementor-2574 .elementor-element.elementor-element-b0d5ca0 .elementor-icon-box-wrapper{text-align:start;}.elementor-2574 .elementor-element.elementor-element-b0d5ca0 .elementor-icon-box-title{margin-block-end:4px;color:#0BBBDA;}.elementor-2574 .elementor-element.elementor-element-b0d5ca0 .elementor-icon-box-title, .elementor-2574 .elementor-element.elementor-element-b0d5ca0 .elementor-icon-box-title a{font-family:"Formula Condensed", Sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}.elementor-2574 .elementor-element.elementor-element-b0d5ca0 .elementor-icon-box-description{font-family:"Helvetica Now Var", Sans-serif;font-size:12px;font-weight:400;letter-spacing:0px;color:#8F8F8F;}.elementor-2574 .elementor-element.elementor-element-16937bc8 .elementor-icon-wrapper{text-align:center;}.elementor-2574 .elementor-element.elementor-element-16937bc8 .elementor-icon{font-size:18px;}.elementor-2574 .elementor-element.elementor-element-16937bc8 .elementor-icon svg{height:18px;}.elementor-2574 .elementor-element.elementor-element-16937bc8 .elementor-icon-wrapper svg{width:auto;}@media(max-width:880px){.elementor-2574 .elementor-element.elementor-element-470e7555{--e-rating-icon-font-size:18px;--e-rating-gap:4px;}.elementor-2574 .elementor-element.elementor-element-3061c610{--e-rating-icon-font-size:18px;--e-rating-gap:4px;}.elementor-2574 .elementor-element.elementor-element-4c545d91{--e-rating-icon-font-size:18px;--e-rating-gap:4px;}}/* Start custom CSS for video, class: .elementor-element-37c694c1 */.elementor-2574 .elementor-element.elementor-element-37c694c1 svg { height: 56px; width: 56px; }/* End custom CSS */ /* Start custom CSS for video, class: .elementor-element-f2d39af */.elementor-2574 .elementor-element.elementor-element-f2d39af svg { height: 56px; width: 56px; }/* End custom CSS */ /* Start custom CSS for video, class: .elementor-element-54f4fad1 */.elementor-2574 .elementor-element.elementor-element-54f4fad1 svg { height: 56px; width: 56px; }/* End custom CSS */ /* Start custom CSS *//* ======================================================= 1. MAIN CARD SETUP (FIXED 536px HEIGHT) ======================================================= */ .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; } .ha-card-elementor:hover { flex: 3 !important; } /* ======================================================= 2. TOP WRAPPER (STRICTLY 400px HEIGHT) ======================================================= */ .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 ======================================================= */ .ha-visible-image { flex: 1 !important; min-width: 250px !important; height: 100% !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; display: flex; } .ha-visible-image .elementor-widget, .ha-visible-image .elementor-widget-image, .ha-visible-image .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .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) ======================================================= */ .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; } .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 ======================================================= */ .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) ======================================================= */ .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 */ .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 */ .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 */ .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 */ .ha-visible-image, .ha-visible-image > div, .ha-visible-image .elementor-widget, .ha-visible-image .elementor-widget-image, .ha-visible-image .elementor-widget-container, .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% */ .ha-hidden-content, .ha-hidden-content > div, .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) */ .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) */ .ha-card-elementor:hover .ha-hidden-content, .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 */ .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; } /* Ensure the correct stacking order for different sizes */ .x-stacked-section:nth-of-type(1) { z-index: 2; } /* ======================================================= ВІДКЛЮЧЕННЯ ЕФЕКТУ НАКЛАДАННЯ ТІЛЬКИ ДЛЯ 768px І НИЖЧЕ ======================================================= */ @media (max-width: 768px) { .x-stacked-section { position: relative !important; /* Відключає липкість */ top: auto !important; /* Скидає відступ від верху */ z-index: auto !important; /* Скасовує накладання шарів */ } }/* End custom CSS */