.uslugahero {
  position: relative;
  width: 100%;
  max-width: none;
  background-color: #326e58; /* Firmowy zielony Rooster */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 100px 0; /* padding-top i padding-bottom z kodu Elementora ced4761 */
  overflow: hidden;
}

.uslugahero,
.uslugahero * {
  box-sizing: border-box;
}

/* Nakładka dekoracyjna w tle */
.uslugahero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0.04) 26%, rgba(255, 255, 255, 0) 48%),
    radial-gradient(circle at 82% 76%, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

/* Główny kontener – odpowiednik .elementor-container ze starej strony */
.uslugahero__container {
  position: relative;
  z-index: 3;
  width: min(100% - 40px, 1310px); /* Szerokość dopasowana do gridu Rooster */
  min-height: 400px; /* Dokładna wartość min-height z Elementora */
  margin-right: auto;
  margin-left: auto;
  display: flex;
  align-items: center; /* Wyśrodkowanie w pionie wyciągnięte z elementor-section-items-middle */
}

/* Kolumny – odpowiedniki .elementor-column */
.uslugahero__column {
  position: relative;
  min-height: 1px;
  display: flex;
  width: 50%; /* Podział 50% / 50% jak w starym kodzie */
}

/* Wewnętrzne kontenery kolumn – odpowiedniki .elementor-widget-wrap */
.uslugahero__widget-wrap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Specyficzne ustawienia dla lewej kolumny (Teksty) */
.uslugahero__column--left .uslugahero__widget-wrap {
  align-content: flex-start;
  align-items: flex-start;
  padding: 0; /* Wyczyszczone zgodnie z klasą .elementor-element-36cc15f */
}

/* Specyficzne ustawienia dla prawej kolumny (Obrazek) */
.uslugahero__column--right .uslugahero__widget-wrap {
  align-content: center;
  align-items: center;
  /* Odstęp z kodu Elementora: margin-left: 80px */
  margin: 0px 0px 0px 80px; 
}

/* --- Typografia i Elementy --- */

.uslugahero__title {
  margin: 0;
  color: #fac24a; /* Oryginalny żółto-złoty kolor Rooster */
  font-family: "Oswald", sans-serif;
  font-size: clamp(40px, 4.2vw, 68px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.uslugahero__text {
  margin-top: 24px;
  max-width: 440px;
  color: #fac24a; /* Oryginalny żółto-złoty kolor Rooster */
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
}

.uslugahero__text p {
  margin: 0;
}

.uslugahero__image {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transform: scaleX(-1);
  clip-path: inset(4px 22px 4px 4px);
}
/* --- Responsywność (RWD) --- */
@media (max-width: 1024px) {
  .uslugahero__container {
    flex-direction: column; /* Na tabletach i telefonach przechodzimy w układ pionowy */
    text-align: center;
    gap: 40px;
  }

  .uslugahero__column {
    width: 100%;
  }

  .uslugahero__column--left .uslugahero__widget-wrap {
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
  }

  .uslugahero__column--right .uslugahero__widget-wrap {
    margin: 0; /* Reset marginesu w układzie pionowym */
  }

  .uslugahero__image {
    max-width: 420px;
  }
}

@media (max-width: 767px) {
  .uslugahero {
    padding: 80px 0;
  }
  
  .uslugahero__title {
    font-size: 38px;
  }

  .uslugahero__image {
    max-width: 300px;
  }
}/* GLOBALNIE: Poppins wszędzie */
body,
body *,
.elementor *,
.kontaktsekcja,
.kontaktsekcja *,
.uslugahero,
.uslugahero * {
  font-family: "Poppins", sans-serif !important;
}

/* Nadpisanie globalnych h1-h6 z motywu */
h1,
h2,
h3,
h4,
h5,
h6,
.prelements-heading .title-inner .title,
.kontaktsekcja__title,
.uslugahero__title {
  font-family: "Poppins", sans-serif !important;
}
/* AWARYJNIE: Promowanie lokalnej firmy - stare i nowe ID strony */

body.page-id-232 .uslugahero,
body.page-id-307 .uslugahero {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 676px !important;
  padding: 0 !important;
  overflow: hidden !important;

  background-color: #f4eddf !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  display: flex !important;
  align-items: center !important;
}

body.page-id-232 .uslugahero__overlay,
body.page-id-307 .uslugahero__overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: none !important;
}

body.page-id-232 .uslugahero__container,
body.page-id-307 .uslugahero__container {
  position: relative !important;
  z-index: 3 !important;

  width: min(100% - 40px, 1240px) !important;
  min-height: 676px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  align-items: center !important;
}

body.page-id-232 .uslugahero__column,
body.page-id-307 .uslugahero__column {
  position: relative !important;
  min-height: 1px !important;
  display: flex !important;
  width: 50% !important;
}

body.page-id-232 .uslugahero__column--left .uslugahero__widget-wrap,
body.page-id-307 .uslugahero__column--left .uslugahero__widget-wrap {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.page-id-232 .uslugahero__column--right .uslugahero__widget-wrap,
body.page-id-307 .uslugahero__column--right .uslugahero__widget-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-content: center !important;
  align-items: center !important;
  margin: 0 0 0 40px !important;
  padding: 0 !important;
}

body.page-id-232 .uslugahero__title,
body.page-id-307 .uslugahero__title {
  margin: 0 !important;

  color: #071315 !important;
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(46px, 4vw, 68px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

body.page-id-232 .uslugahero__text,
body.page-id-307 .uslugahero__text {
  margin-top: 24px !important;
  max-width: 520px !important;

  color: #071315 !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

body.page-id-232 .uslugahero__text,
body.page-id-232 .uslugahero__text p,
body.page-id-232 .uslugahero__text *,
body.page-id-307 .uslugahero__text,
body.page-id-307 .uslugahero__text p,
body.page-id-307 .uslugahero__text * {
  color: #071315 !important;
}

body.page-id-232 .uslugahero__text p,
body.page-id-307 .uslugahero__text p {
  margin: 0 !important;
}

body.page-id-232 .uslugahero__image,
body.page-id-307 .uslugahero__image {
  display: block !important;
  width: auto !important;
  max-width: 540px !important;
  height: auto !important;
  object-fit: contain !important;

  transform: none !important;
  clip-path: none !important;
}

/* Kulki */

body.page-id-232 .uslugahero__overlay::before,
body.page-id-232 .uslugahero__overlay::after,
body.page-id-307 .uslugahero__overlay::before,
body.page-id-307 .uslugahero__overlay::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background-color: #326e58 !important;
  border-radius: 50% !important;
  z-index: 4 !important;
  pointer-events: none !important;
  animation: rooster-dot-float-local-hero 6s ease-in-out infinite !important;
}

body.page-id-232 .uslugahero__overlay::before,
body.page-id-307 .uslugahero__overlay::before {
  top: 95px !important;
  right: 17% !important;
}

body.page-id-232 .uslugahero__overlay::after,
body.page-id-307 .uslugahero__overlay::after {
  left: 43% !important;
  bottom: 115px !important;
  animation-delay: 1.5s !important;
}

@keyframes rooster-dot-float-local-hero {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(0);
  }
}

/* TABLET */

@media (max-width: 1024px) {
  body.page-id-232 .uslugahero,
  body.page-id-307 .uslugahero {
    min-height: auto !important;
    padding: 80px 0 !important;
  }

  body.page-id-232 .uslugahero__container,
  body.page-id-307 .uslugahero__container {
    min-height: auto !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 40px !important;
  }

  body.page-id-232 .uslugahero__column,
  body.page-id-307 .uslugahero__column {
    width: 100% !important;
  }

  body.page-id-232 .uslugahero__column--left .uslugahero__widget-wrap,
  body.page-id-307 .uslugahero__column--left .uslugahero__widget-wrap {
    align-items: center !important;
    max-width: 620px !important;
    margin: 0 auto !important;
  }

  body.page-id-232 .uslugahero__column--right .uslugahero__widget-wrap,
  body.page-id-307 .uslugahero__column--right .uslugahero__widget-wrap {
    margin: 0 !important;
  }

  body.page-id-232 .uslugahero__image,
  body.page-id-307 .uslugahero__image {
    max-width: 420px !important;
  }

  body.page-id-232 .uslugahero__overlay::before,
  body.page-id-307 .uslugahero__overlay::before {
    top: 80px !important;
    right: 12% !important;
  }

  body.page-id-232 .uslugahero__overlay::after,
  body.page-id-307 .uslugahero__overlay::after {
    left: 18% !important;
    bottom: 120px !important;
  }
}

/* MOBILE */

@media (max-width: 767px) {
  body.page-id-232 .uslugahero,
  body.page-id-307 .uslugahero {
    padding: 70px 0 !important;
  }

  body.page-id-232 .uslugahero__title,
  body.page-id-307 .uslugahero__title {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }

  body.page-id-232 .uslugahero__text,
  body.page-id-307 .uslugahero__text {
    font-size: 14px !important;
    max-width: 320px !important;
  }

  body.page-id-232 .uslugahero__image,
  body.page-id-307 .uslugahero__image {
    max-width: 300px !important;
  }

  body.page-id-232 .uslugahero__overlay::before,
  body.page-id-232 .uslugahero__overlay::after,
  body.page-id-307 .uslugahero__overlay::before,
  body.page-id-307 .uslugahero__overlay::after {
    width: 16px !important;
    height: 16px !important;
  }

  body.page-id-232 .uslugahero__overlay::before,
  body.page-id-307 .uslugahero__overlay::before {
    top: 60px !important;
    right: 10% !important;
  }

  body.page-id-232 .uslugahero__overlay::after,
  body.page-id-307 .uslugahero__overlay::after {
    left: 12% !important;
    bottom: 90px !important;
  }
}
/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  body.page-id-232 .uslugahero {
    min-height: auto;
    padding: 80px 0;
  }

  body.page-id-232 .uslugahero__container {
    min-height: auto;
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  body.page-id-232 .uslugahero__column {
    width: 100%;
  }

  body.page-id-232 .uslugahero__column--left .uslugahero__widget-wrap {
    align-items: center;
    max-width: 620px;
    margin: 0 auto;
  }

  body.page-id-232 .uslugahero__column--right .uslugahero__widget-wrap {
    margin: 0;
  }

  body.page-id-232 .uslugahero__image {
    max-width: 420px;
  }

  body.page-id-232 .uslugahero__overlay::before {
    top: 80px;
    right: 12%;
  }

  body.page-id-232 .uslugahero__overlay::after {
    left: 18%;
    bottom: 120px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  body.page-id-232 .uslugahero {
    padding: 70px 0;
  }

  body.page-id-232 .uslugahero__title {
    font-size: 38px;
    line-height: 1.15;
  }

  body.page-id-232 .uslugahero__text {
    font-size: 14px;
    max-width: 320px;
  }

  body.page-id-232 .uslugahero__image {
    max-width: 300px;
  }

  body.page-id-232 .uslugahero__overlay::before,
  body.page-id-232 .uslugahero__overlay::after {
    width: 16px;
    height: 16px;
  }

  body.page-id-232 .uslugahero__overlay::before {
    top: 60px;
    right: 10%;
  }

  body.page-id-232 .uslugahero__overlay::after {
    left: 12%;
    bottom: 90px;
  }
}/* =========================================================
   HERO - tylko strona:
   "Obsługa płatnych kampanii reklamowych"
   page-id-255
   Wklej na sam dół CSS
========================================================= */

body.page-id-255 .uslugahero {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 616px;
  padding: 0 !important;
  overflow: hidden;

  background-color: #326e58 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  display: flex;
  align-items: center;
}

/* Overlay zostaje aktywny, ale bez niebieskiej nakładki */
body.page-id-255 .uslugahero__overlay {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: none !important;
}

/* Kontener */
body.page-id-255 .uslugahero__container {
  position: relative;
  z-index: 3;

  width: min(100% - 40px, 1120px);
  min-height: 616px;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  align-items: center;
}

/* Kolumny */
body.page-id-255 .uslugahero__column {
  position: relative;
  display: flex;
  min-height: 1px;
}

body.page-id-255 .uslugahero__column--left {
  width: 46%;
}

body.page-id-255 .uslugahero__column--right {
  width: 54%;
}

/* Lewa kolumna */
body.page-id-255 .uslugahero__column--left .uslugahero__widget-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  padding: 0;
}

/* Prawa kolumna */
body.page-id-255 .uslugahero__column--right .uslugahero__widget-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 0 0 0 40px;
}

/* Tytuł biały / kremowy jak na wzorze */
body.page-id-255 .uslugahero__title {
  margin: 0 !important;

  color: #f4eddf !important;
  font-family: "Oswald", "Poppins", sans-serif !important;
  font-size: clamp(48px, 4.1vw, 68px) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* Opis */
body.page-id-255 .uslugahero__text {
  margin-top: 18px !important;
  max-width: 520px;

  color: #f4eddf !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

body.page-id-255 .uslugahero__text p {
  margin: 0 !important;
  color: #f4eddf !important;
}

/* Obrazek - cofamy globalne odwrócenie/przycinanie */
body.page-id-255 .uslugahero__image {
  display: block;
  width: auto !important;
  max-width: 560px !important;
  height: auto !important;
  object-fit: contain !important;

  transform: none !important;
  clip-path: none !important;
}

/* =========================================================
   Animowane kulki - page-id-255
========================================================= */

body.page-id-255 .uslugahero__overlay::before,
body.page-id-255 .uslugahero__overlay::after {
  content: "";
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  background-color: #f4eddf;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  animation: rooster-dot-float-page-255 6s ease-in-out infinite;
}

/* Górna prawa kulka */
body.page-id-255 .uslugahero__overlay::before {
  top: 72px;
  right: 16.5%;
}

/* Dolna środkowa kulka */
body.page-id-255 .uslugahero__overlay::after {
  left: 47%;
  bottom: 120px;
  animation-delay: 1.5s;
}

@keyframes rooster-dot-float-page-255 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(0);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  body.page-id-255 .uslugahero {
    min-height: auto;
    padding: 80px 0 !important;
  }

  body.page-id-255 .uslugahero__container {
    min-height: auto;
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  body.page-id-255 .uslugahero__column--left,
  body.page-id-255 .uslugahero__column--right {
    width: 100%;
  }

  body.page-id-255 .uslugahero__column--left .uslugahero__widget-wrap,
  body.page-id-255 .uslugahero__column--right .uslugahero__widget-wrap {
    align-items: center;
    text-align: center;
    margin: 0;
  }

  body.page-id-255 .uslugahero__title {
    font-size: 48px !important;
  }

  body.page-id-255 .uslugahero__image {
    max-width: 430px !important;
  }

  body.page-id-255 .uslugahero__overlay::before {
    top: 70px;
    right: 12%;
  }

  body.page-id-255 .uslugahero__overlay::after {
    left: 18%;
    bottom: 120px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  body.page-id-255 .uslugahero {
    padding: 70px 0 !important;
  }

  body.page-id-255 .uslugahero__title {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }

  body.page-id-255 .uslugahero__text {
    font-size: 14px !important;
    max-width: 320px;
  }

  body.page-id-255 .uslugahero__image {
    max-width: 300px !important;
  }

  body.page-id-255 .uslugahero__overlay::before,
  body.page-id-255 .uslugahero__overlay::after {
    width: 16px;
    height: 16px;
  }

  body.page-id-255 .uslugahero__overlay::before {
    top: 55px;
    right: 10%;
  }

  body.page-id-255 .uslugahero__overlay::after {
    left: 12%;
    bottom: 85px;
  }
}/* =========================================================
   HERO - tylko strona:
   "Projektowanie graficzne"
   page-id-253
   Wklej na sam dół CSS
========================================================= */

body.page-id-253 .uslugahero {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 618px !important;
  padding: 0 !important;
  overflow: hidden !important;

  background-color: #d80045 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  display: flex !important;
  align-items: center !important;
}

/* overlay aktywny, ale bez niebiesko-zielonej mgły */
body.page-id-253 .uslugahero__overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: none !important;
}

/* kontener */
body.page-id-253 .uslugahero__container {
  position: relative !important;
  z-index: 3 !important;

  width: min(100% - 40px, 1140px) !important;
  min-height: 618px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  align-items: center !important;
}

/* kolumny */
body.page-id-253 .uslugahero__column {
  position: relative !important;
  display: flex !important;
  min-height: 1px !important;
}

body.page-id-253 .uslugahero__column--left {
  width: 44% !important;
}

body.page-id-253 .uslugahero__column--right {
  width: 56% !important;
}

/* lewa kolumna */
body.page-id-253 .uslugahero__column--left .uslugahero__widget-wrap {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* prawa kolumna */
body.page-id-253 .uslugahero__column--right .uslugahero__widget-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  margin: 0 0 0 30px !important;
  padding: 0 !important;
}

/* tytuł - jasny/kremowy jak na 2 screenie */
body.page-id-253 .uslugahero__title {
  margin: 0 !important;

  color: #f5eddc !important;
  font-family: "Oswald", "Poppins", sans-serif !important;
  font-size: clamp(50px, 4.2vw, 72px) !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* opis */
body.page-id-253 .uslugahero__text {
  margin-top: 18px !important;
  max-width: 520px !important;

  color: #f5eddc !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

body.page-id-253 .uslugahero__text,
body.page-id-253 .uslugahero__text p,
body.page-id-253 .uslugahero__text * {
  color: #f5eddc !important;
}

body.page-id-253 .uslugahero__text p {
  margin: 0 !important;
}

/* obraz koguta */
body.page-id-253 .uslugahero__image {
  display: block !important;
  width: auto !important;
  max-width: 520px !important;
  height: auto !important;
  object-fit: contain !important;

  transform: none !important;
  clip-path: none !important;
}

/* =========================================================
   Kulki animowane - tylko page-id-253
========================================================= */

body.page-id-253 .uslugahero__overlay::before,
body.page-id-253 .uslugahero__overlay::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background-color: #f5eddc !important;
  border-radius: 50% !important;
  z-index: 4 !important;
  pointer-events: none !important;
  animation: rooster-dot-float-page-253 6s ease-in-out infinite !important;
}

/* górna prawa kulka */
body.page-id-253 .uslugahero__overlay::before {
  top: 210px !important;
  right: 16% !important;
}

/* dolna środkowa kulka */
body.page-id-253 .uslugahero__overlay::after {
  left: 46% !important;
  bottom: 150px !important;
  animation-delay: 1.5s !important;
}

@keyframes rooster-dot-float-page-253 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(0);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  body.page-id-253 .uslugahero {
    min-height: auto !important;
    padding: 80px 0 !important;
  }

  body.page-id-253 .uslugahero__container {
    min-height: auto !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 40px !important;
  }

  body.page-id-253 .uslugahero__column--left,
  body.page-id-253 .uslugahero__column--right {
    width: 100% !important;
  }

  body.page-id-253 .uslugahero__column--left .uslugahero__widget-wrap,
  body.page-id-253 .uslugahero__column--right .uslugahero__widget-wrap {
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
  }

  body.page-id-253 .uslugahero__title {
    font-size: 48px !important;
  }

  body.page-id-253 .uslugahero__image {
    max-width: 420px !important;
  }

  body.page-id-253 .uslugahero__overlay::before {
    top: 90px !important;
    right: 12% !important;
  }

  body.page-id-253 .uslugahero__overlay::after {
    left: 18% !important;
    bottom: 120px !important;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  body.page-id-253 .uslugahero {
    padding: 70px 0 !important;
  }

  body.page-id-253 .uslugahero__title {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }

  body.page-id-253 .uslugahero__text {
    font-size: 14px !important;
    max-width: 320px !important;
  }

  body.page-id-253 .uslugahero__image {
    max-width: 300px !important;
  }

  body.page-id-253 .uslugahero__overlay::before,
  body.page-id-253 .uslugahero__overlay::after {
    width: 16px !important;
    height: 16px !important;
  }

  body.page-id-253 .uslugahero__overlay::before {
    top: 60px !important;
    right: 10% !important;
  }

  body.page-id-253 .uslugahero__overlay::after {
    left: 12% !important;
    bottom: 90px !important;
  }
}/* =========================================================
   HERO - tylko strona:
   "Pozycjonowanie stron internetowych"
   page-id-251
   Wklej na sam dół CSS
========================================================= */

body.page-id-251 .uslugahero {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 620px !important;
  padding: 0 !important;
  overflow: hidden !important;

  background-color: #efbf4e !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  display: flex !important;
  align-items: center !important;
}

/* overlay zostaje, ale bez kolorowej mgły */
body.page-id-251 .uslugahero__overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: none !important;
}

/* kontener */
body.page-id-251 .uslugahero__container {
  position: relative !important;
  z-index: 3 !important;

  width: min(100% - 40px, 1256px) !important;
  min-height: 548px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  align-items: center !important;
}

/* kolumny */
body.page-id-251 .uslugahero__column {
  position: relative !important;
  display: flex !important;
  min-height: 1px !important;
}

body.page-id-251 .uslugahero__column--left {
  width: 46% !important;
}

body.page-id-251 .uslugahero__column--right {
  width: 54% !important;
}

/* lewa kolumna */
body.page-id-251 .uslugahero__column--left .uslugahero__widget-wrap {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* prawa kolumna */
body.page-id-251 .uslugahero__column--right .uslugahero__widget-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  margin: 0 0 0 24px !important;
  padding: 0 !important;
}

/* tytuł */
body.page-id-251 .uslugahero__title {
  margin: 0 !important;
  color: #071315 !important;
  font-family: "Oswald", "Poppins", sans-serif !important;
  font-size: clamp(54px, 4.2vw, 72px) !important;
  line-height: 1.03 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  max-width: 560px !important;
}

/* opis */
body.page-id-251 .uslugahero__text {
  margin-top: 18px !important;
  max-width: 520px !important;

  color: #071315 !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

body.page-id-251 .uslugahero__text,
body.page-id-251 .uslugahero__text p,
body.page-id-251 .uslugahero__text * {
  color: #071315 !important;
}

body.page-id-251 .uslugahero__text p {
  margin: 0 !important;
}

/* obraz koguta */
body.page-id-251 .uslugahero__image {
  display: block !important;
  width: auto !important;
  max-width: 560px !important;
  height: auto !important;
  object-fit: contain !important;

  transform: none !important;
  clip-path: none !important;
}

/* =========================================================
   Kulki animowane - tylko page-id-251
========================================================= */

body.page-id-251 .uslugahero__overlay::before,
body.page-id-251 .uslugahero__overlay::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background-color: #d9171c !important;
  border-radius: 50% !important;
  z-index: 4 !important;
  pointer-events: none !important;
  animation: rooster-dot-float-page-251 6s ease-in-out infinite !important;
}

/* górna prawa kulka */
body.page-id-251 .uslugahero__overlay::before {
  top: 142px !important;
  right: 16% !important;
}

/* dolna środkowa kulka */
body.page-id-251 .uslugahero__overlay::after {
  left: 45% !important;
  bottom: 108px !important;
  animation-delay: 1.5s !important;
}

@keyframes rooster-dot-float-page-251 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(0);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  body.page-id-251 .uslugahero {
    min-height: auto !important;
    padding: 80px 0 !important;
  }

  body.page-id-251 .uslugahero__container {
    min-height: auto !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 40px !important;
  }

  body.page-id-251 .uslugahero__column--left,
  body.page-id-251 .uslugahero__column--right {
    width: 100% !important;
  }

  body.page-id-251 .uslugahero__column--left .uslugahero__widget-wrap,
  body.page-id-251 .uslugahero__column--right .uslugahero__widget-wrap {
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
  }

  body.page-id-251 .uslugahero__title {
    font-size: 48px !important;
    max-width: 700px !important;
  }

  body.page-id-251 .uslugahero__image {
    max-width: 430px !important;
  }

  body.page-id-251 .uslugahero__overlay::before {
    top: 88px !important;
    right: 12% !important;
  }

  body.page-id-251 .uslugahero__overlay::after {
    left: 18% !important;
    bottom: 120px !important;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  body.page-id-251 .uslugahero {
    padding: 70px 0 !important;
  }

  body.page-id-251 .uslugahero__title {
    font-size: 38px !important;
    line-height: 1.12 !important;
  }

  body.page-id-251 .uslugahero__text {
    font-size: 14px !important;
    max-width: 320px !important;
  }

  body.page-id-251 .uslugahero__image {
    max-width: 300px !important;
  }

  body.page-id-251 .uslugahero__overlay::before,
  body.page-id-251 .uslugahero__overlay::after {
    width: 16px !important;
    height: 16px !important;
  }

  body.page-id-251 .uslugahero__overlay::before {
    top: 60px !important;
    right: 10% !important;
  }

  body.page-id-251 .uslugahero__overlay::after {
    left: 12% !important;
    bottom: 90px !important;
  }
}/* RUSZAJĄCE SIĘ LITERKI CONTENT - tylko page-id-249 */

body.page-id-249 .uslugahero__column--right .uslugahero__widget-wrap {
  position: relative !important;
}

body.page-id-249 .uslugahero__content-tiles {
  position: absolute !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-16%) !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

body.page-id-249 .uslugahero__tile {
  --rot: 0deg;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ece2cf;
  color: #111;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  transform: rotate(var(--rot));
  animation: rooster-content-tile-float 3.4s ease-in-out infinite;
}

body.page-id-249 .uslugahero__tile--1 {
  --rot: -3deg;
  animation-delay: 0s;
}

body.page-id-249 .uslugahero__tile--2 {
  --rot: 2deg;
  animation-delay: .15s;
}

body.page-id-249 .uslugahero__tile--3 {
  --rot: -2deg;
  animation-delay: .3s;
}

body.page-id-249 .uslugahero__tile--4 {
  --rot: 1deg;
  animation-delay: .45s;
}

body.page-id-249 .uslugahero__tile--5 {
  --rot: -1deg;
  animation-delay: .6s;
}

body.page-id-249 .uslugahero__tile--6 {
  --rot: 2deg;
  animation-delay: .75s;
}

body.page-id-249 .uslugahero__tile--7 {
  --rot: -2deg;
  animation-delay: .9s;
}

@keyframes rooster-content-tile-float {
  0%, 100% {
    transform: translateY(0) rotate(var(--rot));
  }

  50% {
    transform: translateY(-10px) rotate(calc(var(--rot) + 1deg));
  }
}/* =========================================================
   HERO - Działania content marketingowe
   page-id-249
   wersja uproszczona: podobnie do wzoru
========================================================= */

body.page-id-249 .uslugahero {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 620px !important;
  padding: 0 !important;
  overflow: hidden !important;

  background-color: #efbf4e !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  display: flex !important;
  align-items: center !important;
}

body.page-id-249 .uslugahero__overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: none !important;
}

body.page-id-249 .uslugahero__container {
  position: relative !important;
  z-index: 3 !important;

  width: min(100% - 40px, 1256px) !important;
  min-height: 548px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  align-items: center !important;
}

body.page-id-249 .uslugahero__column {
  position: relative !important;
  display: flex !important;
  min-height: 1px !important;
}

body.page-id-249 .uslugahero__column--left {
  width: 42% !important;
}

body.page-id-249 .uslugahero__column--right {
  width: 58% !important;
}

body.page-id-249 .uslugahero__column--left .uslugahero__widget-wrap {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.page-id-249 .uslugahero__column--right .uslugahero__widget-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 0 0 30px !important;
  padding: 0 !important;
}

/* Tekst jak na wzorze */
body.page-id-249 .uslugahero__title {
  margin: 0 !important;
  color: #cc003d !important;
  font-family: "Oswald", "Poppins", sans-serif !important;
  font-size: clamp(54px, 4.4vw, 74px) !important;
  line-height: 1.02 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  max-width: 500px !important;
}

body.page-id-249 .uslugahero__text {
  margin-top: 18px !important;
  max-width: 420px !important;
  color: #cc003d !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

body.page-id-249 .uslugahero__text,
body.page-id-249 .uslugahero__text p,
body.page-id-249 .uslugahero__text * {
  color: #cc003d !important;
}

body.page-id-249 .uslugahero__text p {
  margin: 0 !important;
}

/* Obraz bez odwracania */
body.page-id-249 .uslugahero__image {
  display: block !important;
  width: auto !important;
  max-width: 610px !important;
  height: auto !important;
  object-fit: contain !important;

  transform: none !important;
  clip-path: none !important;
}

/* Czerwone kulki jak na wzorze */
body.page-id-249 .uslugahero__overlay::before,
body.page-id-249 .uslugahero__overlay::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background-color: #d50032 !important;
  border-radius: 50% !important;
  z-index: 4 !important;
  pointer-events: none !important;
  animation: rooster-dot-float-page-249 6s ease-in-out infinite !important;
}

body.page-id-249 .uslugahero__overlay::before {
  top: 220px !important;
  right: 14% !important;
}

body.page-id-249 .uslugahero__overlay::after {
  left: 44% !important;
  bottom: 105px !important;
  animation-delay: 1.6s !important;
}

@keyframes rooster-dot-float-page-249 {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }
}

/* TABLET */
@media (max-width: 1024px) {
  body.page-id-249 .uslugahero {
    min-height: auto !important;
    padding: 80px 0 !important;
  }

  body.page-id-249 .uslugahero__container {
    min-height: auto !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 40px !important;
  }

  body.page-id-249 .uslugahero__column--left,
  body.page-id-249 .uslugahero__column--right {
    width: 100% !important;
  }

  body.page-id-249 .uslugahero__column--left .uslugahero__widget-wrap,
  body.page-id-249 .uslugahero__column--right .uslugahero__widget-wrap {
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
  }

  body.page-id-249 .uslugahero__title {
    font-size: 48px !important;
    max-width: 700px !important;
  }

  body.page-id-249 .uslugahero__image {
    max-width: 470px !important;
  }
}

/* MOBILE */
@media (max-width: 767px) {
  body.page-id-249 .uslugahero {
    padding: 70px 0 !important;
  }

  body.page-id-249 .uslugahero__title {
    font-size: 38px !important;
    line-height: 1.12 !important;
  }

  body.page-id-249 .uslugahero__text {
    font-size: 14px !important;
    max-width: 320px !important;
  }

  body.page-id-249 .uslugahero__image {
    max-width: 320px !important;
  }

  body.page-id-249 .uslugahero__overlay::before,
  body.page-id-249 .uslugahero__overlay::after {
    width: 16px !important;
    height: 16px !important;
  }

  body.page-id-249 .uslugahero__overlay::before {
    top: 60px !important;
    right: 10% !important;
  }

  body.page-id-249 .uslugahero__overlay::after {
    left: 12% !important;
    bottom: 90px !important;
  }
}/* =========================================================
   HERO - Analityka webowa
   page-id-245
   Ma wyglądać jak 2 screen
========================================================= */

body.page-id-245 .uslugahero {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 620px !important;
  padding: 0 !important;
  overflow: hidden !important;

  background-color: #326e58 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  display: flex !important;
  align-items: center !important;
}

/* Wyłączamy niebieską/mętną nakładkę */
body.page-id-245 .uslugahero__overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: none !important;
}

/* Kontener */
body.page-id-245 .uslugahero__container {
  position: relative !important;
  z-index: 3 !important;

  width: min(100% - 40px, 1256px) !important;
  min-height: 548px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  align-items: center !important;
}

/* Kolumny */
body.page-id-245 .uslugahero__column {
  position: relative !important;
  display: flex !important;
  min-height: 1px !important;
}

body.page-id-245 .uslugahero__column--left {
  width: 42% !important;
}

body.page-id-245 .uslugahero__column--right {
  width: 58% !important;
}

/* Lewa kolumna */
body.page-id-245 .uslugahero__column--left .uslugahero__widget-wrap {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Prawa kolumna */
body.page-id-245 .uslugahero__column--right .uslugahero__widget-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  margin: 0 0 0 30px !important;
  padding: 0 !important;
}

/* Tytuł - jasny jak na 2 screenie */
body.page-id-245 .uslugahero__title {
  margin: 0 !important;

  color: #f5eddc !important;
  font-family: "Oswald", "Poppins", sans-serif !important;
  font-size: clamp(54px, 4.2vw, 72px) !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  max-width: 430px !important;
}

/* Opis */
body.page-id-245 .uslugahero__text {
  margin-top: 18px !important;
  max-width: 500px !important;

  color: #f5eddc !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

body.page-id-245 .uslugahero__text,
body.page-id-245 .uslugahero__text p,
body.page-id-245 .uslugahero__text * {
  color: #f5eddc !important;
}

body.page-id-245 .uslugahero__text p {
  margin: 0 !important;
}

/* Obraz koguta - bez odwracania i przycinania */
body.page-id-245 .uslugahero__image {
  display: block !important;
  width: auto !important;
  max-width: 610px !important;
  height: auto !important;
  object-fit: contain !important;

  transform: none !important;
  clip-path: none !important;
}

/* =========================================================
   Kulki - jasne jak na zielonych hero
========================================================= */

body.page-id-245 .uslugahero__overlay::before,
body.page-id-245 .uslugahero__overlay::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background-color: #f5eddc !important;
  border-radius: 50% !important;
  z-index: 4 !important;
  pointer-events: none !important;
  animation: rooster-dot-float-page-245 6s ease-in-out infinite !important;
}

body.page-id-245 .uslugahero__overlay::before {
  top: 175px !important;
  right: 17% !important;
}

body.page-id-245 .uslugahero__overlay::after {
  left: 45% !important;
  bottom: 112px !important;
  animation-delay: 1.5s !important;
}

@keyframes rooster-dot-float-page-245 {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  body.page-id-245 .uslugahero {
    min-height: auto !important;
    padding: 80px 0 !important;
  }

  body.page-id-245 .uslugahero__container {
    min-height: auto !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 40px !important;
  }

  body.page-id-245 .uslugahero__column--left,
  body.page-id-245 .uslugahero__column--right {
    width: 100% !important;
  }

  body.page-id-245 .uslugahero__column--left .uslugahero__widget-wrap,
  body.page-id-245 .uslugahero__column--right .uslugahero__widget-wrap {
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
  }

  body.page-id-245 .uslugahero__title {
    font-size: 48px !important;
    max-width: 700px !important;
  }

  body.page-id-245 .uslugahero__image {
    max-width: 470px !important;
  }

  body.page-id-245 .uslugahero__overlay::before {
    top: 85px !important;
    right: 12% !important;
  }

  body.page-id-245 .uslugahero__overlay::after {
    left: 18% !important;
    bottom: 120px !important;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  body.page-id-245 .uslugahero {
    padding: 70px 0 !important;
  }

  body.page-id-245 .uslugahero__title {
    font-size: 38px !important;
    line-height: 1.12 !important;
  }

  body.page-id-245 .uslugahero__text {
    font-size: 14px !important;
    max-width: 320px !important;
  }

  body.page-id-245 .uslugahero__image {
    max-width: 320px !important;
  }

  body.page-id-245 .uslugahero__overlay::before,
  body.page-id-245 .uslugahero__overlay::after {
    width: 16px !important;
    height: 16px !important;
  }

  body.page-id-245 .uslugahero__overlay::before {
    top: 60px !important;
    right: 10% !important;
  }

  body.page-id-245 .uslugahero__overlay::after {
    left: 12% !important;
    bottom: 90px !important;
  }
}