.elementor-19925 .elementor-element.elementor-element-ec7bab7:not(.elementor-motion-effects-element-type-background), .elementor-19925 .elementor-element.elementor-element-ec7bab7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://developex.com/wp-content/uploads/2024/05/mobile-app-for-audio-devices.jpg");background-position:bottom center;background-repeat:no-repeat;background-size:cover;}.elementor-19925 .elementor-element.elementor-element-ec7bab7 > .elementor-background-overlay{background-color:#050000;opacity:0.62;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-19925 .elementor-element.elementor-element-ec7bab7 > .elementor-container{max-width:724px;}.elementor-19925 .elementor-element.elementor-element-ec7bab7{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:190px 0px 150px 0px;}.elementor-19925 .elementor-element.elementor-element-8b2f76e{text-align:center;}.elementor-19925 .elementor-element.elementor-element-8b2f76e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:60px;font-weight:600;text-transform:capitalize;line-height:58px;color:#FFFFFF;}.elementor-19925 .elementor-element.elementor-element-662c2e4{--display:flex;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-19925 .elementor-element.elementor-element-7e084d5{z-index:1;}.elementor-19925 .elementor-element.elementor-element-7e084d5 .tlp-portfolio .tlp-overlay{background-color:#4D4A4A7D;}.elementor-19925 .elementor-element.elementor-element-7e084d5 .tlp-content-holder h3 a, .elementor-19925 .elementor-element.elementor-element-7e084d5 .tlp-content-holder h3{color:#111111;}.elementor-19925 .elementor-element.elementor-element-7e084d5 .tlp-content-holder h3{font-size:14px;font-weight:600;}.elementor-19925 .elementor-element.elementor-element-490fc59:not(.elementor-motion-effects-element-type-background), .elementor-19925 .elementor-element.elementor-element-490fc59 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://developex.com/wp-content/uploads/2024/03/get-in-touch.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-19925 .elementor-element.elementor-element-490fc59 > .elementor-background-overlay{background-color:#0A0A0A;opacity:0.79;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-19925 .elementor-element.elementor-element-490fc59 > .elementor-container{min-height:334px;}.elementor-19925 .elementor-element.elementor-element-490fc59{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:40px;margin-bottom:0px;padding:80px 0px 80px 0px;}.elementor-19925 .elementor-element.elementor-element-43d856f{padding:0px 0px 0px 0px;text-align:center;}.elementor-19925 .elementor-element.elementor-element-43d856f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:48px;font-weight:600;text-transform:capitalize;line-height:1.3em;color:#FFFFFF;}.elementor-19925 .elementor-element.elementor-element-69e8c2b > .elementor-container{max-width:756px;}.elementor-19925 .elementor-element.elementor-element-69e8c2b{padding:30px 30px 30px 30px;}.elementor-19925 .elementor-element.elementor-element-71e7a5c{text-align:center;font-family:"Open Sans", Sans-serif;font-size:16px;font-weight:400;color:#B0B0B0;}.elementor-19925 .elementor-element.elementor-element-c6df3c9 .elementor-button{background-color:#1EAAFF;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:3px 3px 3px 3px;border-color:#1EAAFF;border-radius:10px 10px 10px 10px;}.elementor-19925 .elementor-element.elementor-element-c6df3c9 .elementor-button:hover, .elementor-19925 .elementor-element.elementor-element-c6df3c9 .elementor-button:focus{background-color:#02020200;color:#FFFFFF;border-color:#1EAAFF;}.elementor-19925 .elementor-element.elementor-element-c6df3c9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-19925 .elementor-element.elementor-element-c6df3c9 .elementor-button:hover svg, .elementor-19925 .elementor-element.elementor-element-c6df3c9 .elementor-button:focus svg{fill:#FFFFFF;}@media(max-width:1024px) and (min-width:768px){.elementor-19925 .elementor-element.elementor-element-785e1cd{width:100%;}}@media(max-width:1024px){.elementor-19925 .elementor-element.elementor-element-ec7bab7{margin-top:0px;margin-bottom:0px;padding:180px 0px 90px 0px;}.elementor-19925 .elementor-element.elementor-element-785e1cd > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-19925 .elementor-element.elementor-element-8b2f76e{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-19925 .elementor-element.elementor-element-8b2f76e .elementor-heading-title{font-size:45px;}.elementor-19925 .elementor-element.elementor-element-490fc59{padding:40px 20px 40px 20px;}.elementor-19925 .elementor-element.elementor-element-69e8c2b{padding:0px 0px 0px 0px;}}@media(max-width:767px){.elementor-19925 .elementor-element.elementor-element-ec7bab7{padding:160px 10px 120px 10px;}.elementor-19925 .elementor-element.elementor-element-8b2f76e{padding:0px 0px 0px 0px;}.elementor-19925 .elementor-element.elementor-element-8b2f76e .elementor-heading-title{font-size:45px;}.elementor-19925 .elementor-element.elementor-element-490fc59{padding:60px 0px 60px 0px;}.elementor-19925 .elementor-element.elementor-element-43d856f .elementor-heading-title{font-size:30px;}.elementor-19925 .elementor-element.elementor-element-69e8c2b{padding:0px 0px 0px 0px;}.elementor-19925 .elementor-element.elementor-element-c6df3c9{margin:5px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}/* Start custom CSS for tlp-portfolio, class: .elementor-element-7e084d5 */body .tlp-portfolio button {
    background: #fff !important;
    color: #111 !important;
    text-transform: none !important;
    padding: 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 5px !important;
    border: 2px solid #333 !important;
}

body .tlp-portfolio button.selected {
    background: #1eaaff !important;
    border-color: #1eaaff !important;
    color: #fff !important;
    outline: none !important;
}

body .tlp-portfolio .button-group {
    margin: 10px !important;
    text-align: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: left !important;
    padding-bottom: 30px;
    align-items: center !important;
}

body .tlp-portfolio-container .tlp-pagination-wrap .tlp-pagination > .active > a,
body .tlp-portfolio-container .tlp-pagination-wrap .tlp-pagination > .active > span,
body .tlp-portfolio-container .tlp-pagination-wrap .tlp-pagination > .active > a:hover,
body .tlp-portfolio-container .tlp-pagination-wrap .tlp-pagination > .active > span:hover,
body .tlp-portfolio-container .tlp-pagination-wrap .tlp-pagination > .active > a:focus,
body .tlp-portfolio-container .tlp-pagination-wrap .tlp-pagination > .active > span:focus {
    background: #1eaaff !important;
    color: #fff !important;
}

body .tlp-portfolio-container .tlp-pagination-wrap .tlp-pagination > li > a,
body .tlp-portfolio-container .tlp-pagination-wrap .tlp-pagination > li > span {
    position: relative !important;
    padding: 6px 12px !important;
    line-height: 1.42857143 !important;
    text-decoration: none !important;
    color: #111 !important;
    background-color: #fff !important;
    border: 0 !important;
}

span[aria-hidden="true"] {
    display: none; /* completely removes it from layout */
}

/* ==========================================================================
   ФІКС TLP PORTFOLIO: АСПЕКТ-СПІВВІДНОШЕННЯ + ОВЕРЛЕЙ ХОВЕРУ
   (виправлено під реальну розмітку Astra: .tlp-portfolio-thum.tlp-item)
   ========================================================================== */

/* 1. Пропорції та фіксована висота контейнера з зображенням */
.tlp-portfolio .tlp-portfolio-thum.tlp-item {
    aspect-ratio: 16 / 10 !important; /* Усі картки однієї висоти */
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important; /* Критично для позиціонування overlay */
    overflow: hidden !important; /* Щоб закруглення corners працювали */
    box-sizing: border-box !important;
    border-radius: 20px !important;
    background-color: #f2f4f8 !important; /* Плейсхолдер до завантаження */
}

/* 2. Саме зображення: займає всю висоту і ширину контейнера */
.tlp-portfolio .tlp-portfolio-thum.tlp-item img,
.tlp-portfolio .tlp-portfolio-thum.tlp-item figure img {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: cover !important; /* Картинка не розтягується, а заповнює */
}

/* 3. Оверлей: при ховері розтягується на всю висоту контейнера */
.tlp-portfolio .tlp-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex !important; /* Для центрування іконки */
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    border-radius: 20px !important;
}

/* Показуємо оверлей при ховері */
.tlp-portfolio .tlp-portfolio-thum.tlp-item:hover .tlp-overlay {
    opacity: 1;
}

/* 4. Заголовок/текст під фото */
.tlp-portfolio .tlp-content {
    position: static !important;
    margin-top: 10px !important;
}

/* 5. ФОРСУЄМО ЗВИЧАЙНИЙ CSS GRID замість JS-розкладки Isotope/Masonry,
      яка розставляє картки по колонках, а не по рядках.
      Реальний контейнер карток: .tlp-portfolio-isotope
      Реальна картка: .tlp-single-item (на ній Isotope додає inline
      position:absolute; left:...px; top:...px, а bootstrap-клас
      tlp-col-md-4 задає width:33.333% — його теж треба перебити). */
.tlp-portfolio-isotope {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    position: relative !important;
    height: auto !important; /* скидаємо фіксовану висоту, яку рахує Isotope */
}

.tlp-portfolio-isotope .tlp-single-item {
    position: static !important;
    width: 100% !important;   /* перебиваємо tlp-col-md-4 (33.333%) */
    max-width: 100% !important;
    top: auto !important;
    left: auto !important;
    margin-bottom: 0 !important; /* відступ тепер задає gap контейнера */
}

@media (max-width: 991px) {
    .tlp-portfolio-isotope {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .tlp-portfolio-isotope {
        grid-template-columns: 1fr !important;
    }
}/* End custom CSS */