.elementor-394 .elementor-element.elementor-element-1cc6d6f{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-394 .elementor-element.elementor-element-1cc6d6f:not(.elementor-motion-effects-element-type-background), .elementor-394 .elementor-element.elementor-element-1cc6d6f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F1F0EA;}.elementor-394 .elementor-element.elementor-element-aea1eee{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-394 .elementor-element.elementor-element-2afba33{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-394 .elementor-element.elementor-element-5d4f78a{--display:flex;--min-height:208px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-394 .elementor-element.elementor-element-5d4f78a:not(.elementor-motion-effects-element-type-background), .elementor-394 .elementor-element.elementor-element-5d4f78a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://marketingly.eu/wp-content/uploads/2026/07/AdobeStock_427771142-2-scaled.jpeg");background-size:cover;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-394 .elementor-element.elementor-element-aebfc44{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:99px 0px 0px 0px;}.elementor-394 .elementor-element.elementor-element-5d4f78a:not(.elementor-motion-effects-element-type-background), .elementor-394 .elementor-element.elementor-element-5d4f78a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://marketingly.eu/wp-content/uploads/2026/07/AdobeStock_427771142-2-scaled.jpeg");background-position:bottom right;}.elementor-394 .elementor-element.elementor-element-5d4f78a{--min-height:208px;}}@media(min-width:768px){.elementor-394 .elementor-element.elementor-element-aea1eee{--width:50%;}.elementor-394 .elementor-element.elementor-element-2afba33{--width:50%;}}/* Start custom CSS for container, class: .elementor-element-1cc6d6f */<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marketingly — Kontakt</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600&display=swap" rel="stylesheet">

<style>
:root{
  --black:#0E0D0C;
  --white:#F2F0EB;
  --olive:#6C7561;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}

body{
  background:var(--white);
  color:var(--black);
  font-family:'Poppins',sans-serif;
  font-weight:300;
  font-size:12px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--olive);color:var(--white)}

/* ================= PAGE SPLIT ================= */

.mkt-contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
}

/* ================= LEFT: TITLE ================= */

.mkt-contact-left{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(40px,6vw,80px);
}

.mkt-title{
  font-family:'Poppins',sans-serif!important;
  font-weight:300!important;
  font-size:clamp(56px,8vw,110px)!important;
  letter-spacing:-.03em!important;
  line-height:.95!important;
  color:var(--black)!important;
  display:flex!important;
  flex-direction:column!important;
  position:relative;
}

.mkt-line-mask{
  display:block;
  overflow:hidden;
  padding-bottom:.08em;
}

.mkt-line{
  display:block;
  transform:translateY(115%);
  opacity:0;
}

/* ================= RIGHT: FORM ================= */

.mkt-contact-right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(40px,6vw,80px);
  gap:clamp(28px,3.6vw,40px);
}

/* Dopasowanie stylu Forminator do reszty strony */
.mkt-contact-right .forminator-custom-form,
.mkt-contact-right form.forminator-custom-form{
  font-family:'Poppins',sans-serif !important;
}

.mkt-contact-right .forminator-field label,
.mkt-contact-right .forminator-label{
  font-size:9px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--black) !important;
  opacity:.6 !important;
}

.mkt-contact-right input[type="text"],
.mkt-contact-right input[type="email"],
.mkt-contact-right input[type="tel"],
.mkt-contact-right textarea,
.mkt-contact-right select{
  border:none !important;
  border-bottom:1px solid rgba(14,13,12,.25) !important;
  background:transparent !important;
  padding:6px 0 10px !important;
  font-family:'Poppins',sans-serif !important;
  font-size:14px !important;
  color:var(--black) !important;
  outline:none !important;
  transition:border-color .3s !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.mkt-contact-right input:focus,
.mkt-contact-right textarea:focus,
.mkt-contact-right select:focus{
  border-color:var(--olive) !important;
}

.forminator-ui#forminator-module-824.forminator-design--material .forminator-button-submit{
  background:transparent !important;
  border:1px solid var(--black) !important;
  color:var(--black) !important;
  border-radius:50% !important;
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:0 !important;
  cursor:pointer !important;
  transition:.3s !important;
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:none !important;
  margin-left:auto !important;
}
.forminator-ui#forminator-module-824.forminator-design--material .forminator-row:has(.forminator-button-submit),
.forminator-ui#forminator-module-824.forminator-design--material .forminator-col:has(.forminator-button-submit),
.forminator-ui#forminator-module-824.forminator-design--material .forminator-field:has(.forminator-button-submit){
  display:flex !important;
  justify-content:flex-end !important;
  width:100% !important;
}

.forminator-ui#forminator-module-824.forminator-design--material .forminator-button-submit{
  margin-left:auto !important;
}
/* wyrównanie kontenera przycisku do prawej strony */
.forminator-ui#forminator-module-824.forminator-design--material .forminator-row:last-of-type,
.forminator-ui#forminator-module-824.forminator-design--material .forminator-field--button-submit{
  display:flex !important;
  justify-content:flex-end !important;
}

/* ukośna strzałka (↗) zamiast domyślnej ikony/tekstu Forminatora */
.forminator-ui#forminator-module-824.forminator-design--material .forminator-button-submit::after{
  content:"";
  display:block;
  width:18px;
  height:18px;
  background-color:var(--black);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7H17V15'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7H17V15'/></svg>");
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  transition:background-color .3s, transform .3s;
}

.forminator-ui#forminator-module-824.forminator-design--material .forminator-button-submit:hover{
  background:var(--olive) !important;
  border-color:var(--olive) !important;
}

.forminator-ui#forminator-module-824.forminator-design--material .forminator-button-submit:hover::after{
  background-color:var(--white);
  transform:translate(1px,-1px);
}

/* ================= OFFICES ROW ================= */

.mkt-offices{
  display:flex;
  gap:clamp(50px,8vw,110px);
  margin-top:clamp(20px,3vw,30px);
}

.mkt-office h4{
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--olive);
  margin-bottom:8px;
}

.mkt-office p{
  font-size:11px;
  line-height:1.7;
  opacity:.75;
}

/* ================= RESPONSIVE ================= */

@media (max-width:900px){
  .mkt-contact{grid-template-columns:1fr}
  .mkt-contact-left{padding-bottom:0}
  .mkt-offices{flex-wrap:wrap;gap:30px}
}
</style>
</head>

<body>

<div class="mkt-contact">

  <!-- LEFT: TITLE -->
  <div class="mkt-contact-left">
    <h1 class="mkt-title">
      <span class="mkt-line-mask"><span class="mkt-line">Let's</span></span>
      <span class="mkt-line-mask"><span class="mkt-line">Get In</span></span>
      <span class="mkt-line-mask"><span class="mkt-line">Touch</span></span>
    </h1>
  </div>

  <!-- RIGHT: FORM -->
  <div class="mkt-contact-right">

    <!--
      HINWEIS: Dies ist ein WordPress/Forminator-Shortcode.
      Er wird NUR gerendert, wenn dieser Inhalt durch die WordPress-Engine läuft
      (z. B. eingefügt im Seiteneditor, in einem „Shortcode"-Widget, im Beitrags-/Seiteninhalt,
      oder in PHP über do_shortcode()).
      In einer reinen, statischen .html-Datei (direkt im Browser geöffnet)
      wird der folgende Text nur als Zeichenkette angezeigt, NICHT als Formular.
    -->
    <?php echo do_shortcode('[forminator_form id="824"]'); ?>

    <div class="mkt-offices">
      <div class="mkt-office">
        <h4>Studio</h4>
        <p>Sitz in Polen</p>
      </div>
      <div class="mkt-office">
        <h4>Remote</h4>
        <p>Digitale Zusammenarbeit<br>europaweit</p>
      </div>
    </div>

  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
  if(typeof gsap !== 'undefined'){
    gsap.to(".mkt-line", {
      y:"0%",
      opacity:1,
      duration:1.4,
      ease:"power3.out",
      stagger:0.15,
      delay:0.2
    });
  }
});
</script>

</body>
</html>/* End custom CSS */