.elementor-640 .elementor-element.elementor-element-10462de{--display:flex;}.elementor-640 .elementor-element.elementor-element-10462de:not(.elementor-motion-effects-element-type-background), .elementor-640 .elementor-element.elementor-element-10462de > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-640 .elementor-element.elementor-element-6b4bf47{--display:flex;}.elementor-640 .elementor-element.elementor-element-6d8f97a{width:100%;max-width:100%;}.elementor-640 .elementor-element.elementor-element-61206eb{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-640 .elementor-element.elementor-element-5a4b757{--display:flex;--margin-top:-18px;--margin-bottom:-18px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-640 .elementor-element.elementor-element-5a4b757:not(.elementor-motion-effects-element-type-background), .elementor-640 .elementor-element.elementor-element-5a4b757 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-640 .elementor-element.elementor-element-8b4bdef{width:100%;max-width:100%;}.elementor-640 .elementor-element.elementor-element-16a44c9{--display:flex;--margin-top:-43px;--margin-bottom:-45px;--margin-left:0px;--margin-right:0px;}.elementor-640 .elementor-element.elementor-element-16a44c9:not(.elementor-motion-effects-element-type-background), .elementor-640 .elementor-element.elementor-element-16a44c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-640 .elementor-element.elementor-element-b144e63{width:100%;max-width:100%;}.elementor-640 .elementor-element.elementor-element-6df197d{--display:flex;}.elementor-640 .elementor-element.elementor-element-6df197d:not(.elementor-motion-effects-element-type-background), .elementor-640 .elementor-element.elementor-element-6df197d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-640 .elementor-element.elementor-element-48b655b{--display:flex;}.elementor-640 .elementor-element.elementor-element-48b655b:not(.elementor-motion-effects-element-type-background), .elementor-640 .elementor-element.elementor-element-48b655b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-640 .elementor-element.elementor-element-67e7c61{--display:flex;}.elementor-640 .elementor-element.elementor-element-67e7c61:not(.elementor-motion-effects-element-type-background), .elementor-640 .elementor-element.elementor-element-67e7c61 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-640 .elementor-element.elementor-element-1549e1b{--display:flex;}.elementor-640 .elementor-element.elementor-element-1549e1b:not(.elementor-motion-effects-element-type-background), .elementor-640 .elementor-element.elementor-element-1549e1b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-640 .elementor-element.elementor-element-c53c446{--display:flex;}.elementor-640 .elementor-element.elementor-element-c53c446:not(.elementor-motion-effects-element-type-background), .elementor-640 .elementor-element.elementor-element-c53c446 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-1519d41 */<style>
.dm-services-wow {
    background: #000;
    padding: 100px 0;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
}
.dm-wow-container { max-width: 1600px; margin: 0 auto; padding: 0 40px; }
.dm-wow-head { margin-bottom: 60px; text-align: left; }
.dm-wow-label { font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,0.4); display: block; margin-bottom: 10px; }
.dm-wow-title { 
    font-family: 'Bebas Neue', sans-serif; 
    font-size: clamp(40px, 6vw, 90px); 
    line-height: 0.9; 
    letter-spacing: 4px;
    text-transform: uppercase; 
    background: linear-gradient(180deg, #fff 20%, #666 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dm-accordion { display: flex; width: 100%; height: 600px; gap: 15px; }
.dm-acc-item { position: relative; flex: 1; overflow: hidden; cursor: pointer; transition: all 0.8s cubic-bezier(0.25, 1, 0.2, 1); border-radius: 4px; }
.dm-acc-bg { position: absolute; inset: 0; z-index: 1; }
.dm-acc-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(40%); transition: all 0.8s ease; }
.dm-acc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 100%); z-index: 2; }
.dm-acc-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px; z-index: 3; white-space: nowrap; }
.dm-acc-num { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: #fff; opacity: 0.5; margin-bottom: 10px; }
.dm-acc-name { font-family: 'Bebas Neue', sans-serif; font-size: 32px; margin-bottom: 15px; transform-origin: left bottom; transition: transform 0.8s; }
.dm-acc-desc { font-size: 14px; color: rgba(255,255,255,0.7); opacity: 0; max-width: 300px; white-space: normal; transform: translateY(20px); transition: all 0.5s ease; }

@media (min-width: 1025px) {
    .dm-acc-item:hover { flex: 3; }
    .dm-acc-item:hover .dm-acc-bg img { filter: grayscale(0%) brightness(60%); transform: scale(1.05); }
    .dm-acc-item:hover .dm-acc-desc { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
}

@media (max-width: 1024px) {
    .dm-wow-container { padding: 0 20px; }
    .dm-wow-head { margin-bottom: 40px; }
    .dm-accordion { flex-direction: column; height: auto; gap: 10px; }
    .dm-acc-item { flex: none; height: 100px; width: 100%; transition: height 0.6s cubic-bezier(0.25, 1, 0.2, 1); }
    .dm-acc-content { padding: 20px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
    .dm-acc-num { font-size: 16px; margin-bottom: 5px; }
    .dm-acc-name { font-size: 24px; margin-bottom: 5px; }
    .dm-acc-item.active { height: 300px; }
    .dm-acc-item.active .dm-acc-bg img { filter: grayscale(0%) brightness(60%); }
    .dm-acc-item.active .dm-acc-desc { opacity: 1; transform: translateY(0); margin-top: 10px; }
}
</style>

<section class="dm-services-wow">
    <div class="dm-wow-container">
        <div class="dm-wow-head">
            <span class="dm-wow-label">Kompleksowa Produkcja</span>
            <h2 class="dm-wow-title">Wznoszę Twoją markę <br>na wyższy poziom</h2>
        </div>
        <div class="dm-accordion">
            <div class="dm-acc-item active">
                <div class="dm-acc-bg"><img src="https://images.pexels.com/photos/257904/pexels-photo-257904.jpeg?auto=compress&cs=tinysrgb&w=1260" alt="Wideo"></div>
                <div class="dm-acc-overlay"></div>
                <div class="dm-acc-content">
                    <div class="dm-acc-num">01</div>
                    <h3 class="dm-acc-name">Wideo & Produkcja</h3>
                    <p class="dm-acc-desc">Filmy promocyjne, prezentacje nieruchomości oraz reportaże z eventów – od koncepcji po gotowy montaż.</p>
                </div>
            </div>
            <div class="dm-acc-item">
                <div class="dm-acc-bg"><img src="https://images.pexels.com/photos/1264210/pexels-photo-1264210.jpeg?auto=compress&cs=tinysrgb&w=1260" alt="Foto"></div>
                <div class="dm-acc-overlay"></div>
                <div class="dm-acc-content">
                    <div class="dm-acc-num">02</div>
                    <h3 class="dm-acc-name">Fotografia Premium</h3>
                    <p class="dm-acc-desc">Profesjonalne sesje wnętrz, produktowe, gastronomiczne, motoryzacyjne oraz wizerunkowe dla ekspertów i zespołów.</p>
                </div>
            </div>
            <div class="dm-acc-item">
                <div class="dm-acc-bg"><img src="https://images.pexels.com/photos/267350/pexels-photo-267350.jpeg?auto=compress&cs=tinysrgb&w=1260" alt="Social"></div>
                <div class="dm-acc-overlay"></div>
                <div class="dm-acc-content">
                    <div class="dm-acc-num">03</div>
                    <h3 class="dm-acc-name">Social Media</h3>
                    <p class="dm-acc-desc">Rolki, TikToki, Reelsy i pakiety „Content Day". Strategiczne podejście do krótkich form wideo.</p>
                </div>
            </div>
            <div class="dm-acc-item">
                <div class="dm-acc-bg"><img src="https://images.pexels.com/photos/6883510/pexels-photo-6883510.jpeg?auto=compress&cs=tinysrgb&w=1260" alt="Lab Studio"></div>
                <div class="dm-acc-overlay"></div>
                <div class="dm-acc-content">
                    <div class="dm-acc-num">04</div>
                    <h3 class="dm-acc-name">Lab Studio</h3>
                    <p class="dm-acc-desc">Wielokamerowa realizacja odcinków podcastu wideo oraz kursów z pełną obsługą techniczną w studio.</p>
                </div>
            </div>
            <div class="dm-acc-item">
                <div class="dm-acc-bg"><img src="https://images.pexels.com/photos/3183183/pexels-photo-3183183.jpeg?auto=compress&cs=tinysrgb&w=1260" alt="Montaż"></div>
                <div class="dm-acc-overlay"></div>
                <div class="dm-acc-content">
                    <div class="dm-acc-num">05</div>
                    <h3 class="dm-acc-name">Postprodukcja</h3>
                    <p class="dm-acc-desc">Montaż materiałów powierzonych, oprawa graficzna filmów oraz optymalizacja kanałów YouTube i innych platform.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
document.querySelectorAll('.dm-acc-item').forEach(function(item) {
    item.addEventListener('click', function() {
        if (window.innerWidth <= 1024) {
            document.querySelectorAll('.dm-acc-item').forEach(function(i) { i.classList.remove('active'); });
            this.classList.add('active');
        }
    });
});
</script>/* End custom CSS */