/*
Theme Name: Zadbamy V2 (Dev)
Template: twentytwentyone
Description: Zoptymalizowany motyw potomny z wyczyszczoną architekturą, natywnym menu i obsługą mobilną.
Author: Zadbamy
Version: 2.0.0
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

/* >>> main-section */
body {
  -ms-text-size-adjust: none;
  -webkit-text-size-adjust: none; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  margin: 0; 
  outline: none; 
  padding: 0;
  margin: auto;
  font-family: 'Poppins', sans-serif;  
  font-style: normal;  
  font-size: 16px;
  background-color: white;
}
body, 
.site,
#page {
    background-color: #ffffff !important;
}
.button-orange {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 15px 25px;
  gap: 10px;
  background-color: #ffffff;
  border-radius: 40px;
  /* width: 220px; */
  border: none;
  text-decoration: none;
  background: linear-gradient(90deg, #FBB03B 0%, #F15A24 100%);  
}
.button-orange:hover {
  /* border: 4px solid #F15A24; */
  outline-width: 2px;
  outline-color: #FBAF3B;
  outline-style: solid;
  outline-offset: 4px;
}
.button-orange span {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  gap: 10px;
  height: 24px;
}
.button-orange p {
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
}
.svg-white {
  fill: #ffffff;
}
/* !!! main-section */

/* >>> fonts section */
h1, h2, h3, h4, h5, h6, p, a, input, label {
  font-family: 'Poppins', sans-serif;  
  font-style: normal;  
}
h1 {
  color: #284A61;
  font-size: 47px;
  letter-spacing: 0.03em;
  line-height: 70px;
  font-weight: 400;
  padding: 0px;
  margin: 10px 0px 40px 0px; 
}
h2 {
  font-weight: 400;
  font-size: 27px;
  line-height: 40px;
  letter-spacing: 0.03em;
  color: #284A61;
  padding: 0px;
  margin: 30px 0px 10px 0px; 
}
h3 {
  color: #FBAF3B;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;  
  letter-spacing: 0.03em;
  padding: 0px;
  margin: 10px 0px 40px 0px;   
}
h4 {
  color: #284A61;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
p {
  color: #828282;
  font-size: 1rem;
  line-height: 1.4em;
}
.bold {
  font-weight: 700;
}
/* !!! fonts section */

/* >>> header-section */
.header-container {
  width: 100%;
  position: relative;
  z-index: 2;
}
.header-bg-left {
  position: absolute;
  left: 0;
  top: 0;
  background: #F8F8F8;
  /* width: 1350px; */
  width: 75%;  
  height: 1250px;  
  clip-path: circle(65% at 38% 26%);
  z-index: 3;  
}
.header-bg-right {
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(90deg, #53939F 0%, #1C3E57 100%);
  width: 40%;
  height: 1050px;  
  clip-path: circle(49% at 62% 15%);
  z-index: 4;
}

.header-bg-right-subpage {
 /* subpage */
}
.header-bg-left-subpage {
 /* subpage */
}
.header-info {
  position: relative;
  top: 20px;
  width: 80%;
  margin: 0 10% 0 10%;
  display: flex;
  justify-content: space-between;
  z-index: 4;
}
.header-info-left-logo {

}
.header-info-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.header-info-left ul {
  list-style: none;
  padding: 5px 0 0 0;
}  
.header-info-left-vl {
  width: 5vw; 
  height: 0px;
  border: 1px solid #E0E0E0;
  transform: rotate(90deg);
}
.header-info-left-contact li {
  padding: 0 0 8px 0;
}
.header-info-left-contact a {
  text-decoration: none;
  color: #284A61;
  font-size: 1rem;
}
.header-info-right {
  display: flex;
  align-items: center;
  padding: 0px;
  gap: 10px;
}
/* !!! header-section */
.hero {
  position: relative;
  /* top: 140px; */
  left: 0 10% 0 10%;
  width: 80%;
  margin: auto;
  display: flex;
  padding: 70px 0 0px 0;
  z-index: 5;
  justify-content: space-between;
}
.hero-text {
  width: 50%;
}
.hero-text p {
  line-height: 1.5em;
  padding: 0 0 20px 0;
}
.hero-button {
  display: flex;
  align-items: center;
  padding: 0px;
  gap: 10px;
  margin: 50px 0 0 0;
}
.hero-button p {
  padding: 0;
}
.hero-img-desktop {
  order: 3;  
  margin: -50px 0 0 0;
}
.hero-img-desktop img {
  width: 80%;
}
.hero-img-mobile {
  display: none;
}
.hero-img-mobile img {
  width: 80%;
}
/* !!! header-section */

/* >>> main-section */
.main-container {
  width: 100%;
  position: relative;
  z-index: 1;
}
.content-bg {
  position: absolute;
  background: linear-gradient(90deg, #53939F 0%, #1C3E57 100%);  
  border-radius: 0 100% 100% 0 / 50%;
  width: 35%;
  height: 1200px;
  transform: translateY(100px);  
  z-index: 1;
}

/* >>> offer */
.offer-prnt {
  position: relative;
  z-index: 5;
  transform: translateY(150px);    
}
.offer {
  position: relative;
  padding: 0;
  width: 80%;    
  display: flex;
  justify-content: center;
  margin: auto;
}
.offer-cards {
  flex: 1 1 0%;
  margin: 0.5rem;
  padding: 3.5rem;
  background: #FFFFFF;
  box-shadow: 10px 24px 54px rgba(0, 0, 0, 0.1);
  border-radius: 70px;
}
.offer-cards h2 {
  padding: 0 0 20px 0;
  height: 100px;
}
.offer-cards h3 {
  padding: 0 0 10px 0;
  height: 100px;
}
.offer-cards p {
  padding: 20px 0 0 0;
}
.offer-cards a {
  text-decoration: none;
}
.offer-button {
  display: flex;
  align-items: center;
  padding: 0px;
  gap: 10px;
  margin: 30px 0 0 0;
}
.offer-button p {
  font-weight: 700;
  padding: 0px;
}
.offer-button p:hover {
  color: #FBAF3B;
}
/* !!! offer */
.mission-prnt {
  position: relative;
  z-index: 5;
  transform: translateY(250px);    
}
.mission {
  position: relative;
  width: 80%;
  z-index: 4;
  margin: auto;
}
.mission-first {
  display: flex;
  margin: auto;
}
.mission-img {
  margin-right: 50px;
}
.mission-text {
  padding-top: 30px;
}
.mission-text a {
  margin: 50px 0 0 0;
}
.mission-text p {
  line-height: 1.5em;
  padding: 0 0 20px 0;
}
.mission-text a {
  margin: 50px 0 0 0;
}
.mission-button {
  display: flex;
  align-items: center;
  padding: 0px;
  gap: 10px;
  margin: 0;
}
.mission-button p {
  padding: 0;
}
.mission-second {
  margin: 80px 0 80px 0;
  width: 80%;
}
.mission-second h3 {
  font-style: italic;
}
.mission-second h4 {
  padding: 20px 0 20px 0;
  color: #828282;
}
.mission-third {
  margin: 0px 0 80px 0;
  width: 80%;
}
.mission-table {
  display: flex;
}
.mission-table p {
  text-align: center;
  padding: 20px;
  /* border: 1px solid #828282; */
}
.mission-fourth {
  margin: 50px 0 50px 0;
  width: 80%;
}

/* !!! main-section */

/* >>> form-section */
.form-prnt {
  position: relative;
  z-index: 6;
  transform: translateY(350px);    
}
.form-info {
  position: relative;
  width: 80%;  
  gap: 10%;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin: auto;
  flex-direction: row;
}
.form-left {
  display: flex;
  flex-direction: column;
}
.form-left h1 {
  margin: 0px;  
  padding: 0px;  
}
.form-left h3 {
  margin: 0px 0px 40px 0px;  
  padding: 0px;  
}
.form-left-contact {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  font-size: 14px;
}
.form-left-contact a {
  text-decoration: none;
  color: #284A61;  
}
.form-left-contact ul {
  padding: 0px;
}
.form-left-contact ul li {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 0.8rem;
}
.form-left-contact ul {
  list-style-type: none;
}
.form-left-contact span {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.contact-button {
  display: flex;
  align-items: center;
  padding: 0px;
  gap: 10px;
  margin: 20px 0 0 0;
}

/* >>> form-section */

.form-right {
  background: #FFFFFF !important;
  box-shadow: 10px 24px 54px rgba(0, 0, 0, 0.1) !important;
  border-radius: 70px !important;
  flex-grow: 1 !important;  
}

/* Odstępy kontenerów WPForms */
.wpforms-form,
.wpforms-container {
  padding: 20px !important;
}


/* Wymuszenie siatki Flexbox */
div.wpforms-container-full .wpforms-form .wpforms-field-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 10px 0 0 0 !important;
}

/* Pola Imię i Email (dokładnie 50% szerokości) */
div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field-text,
div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field-email {
  flex: 0 0 calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  width: calc(50% - 10px) !important;
  clear: none !important; /* TO BLOKOWAŁO TWOJE POLA! */
  margin: 0 !important;
  padding: 0 0 20px 0 !important;
  box-sizing: border-box !important;
}

/* Na urządzeniach mobilnych zrzucamy je na pełną szerokość */
@media screen and (max-width: 768px) {
  div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field-text,
  div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field-email {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* Pole wiadomości (Pełna szerokość) */
.wpforms-field-textarea {
  flex-basis: 100% !important;
  padding: 0px 0 20px 0 !important;  
}

/* Ukrywamy etykiety tekstowe (korzystamy z placeholderów) */
.wpforms-field-label {
  display: none !important;
}

/* Wygląd globalny dla inputów i textarey */
.wpforms-field-container input[type=text],
.wpforms-field-container input[type=email],
.wpforms-field-container textarea {
  background: #F2F2F2 !important;
  color: #4F4F4F !important;
  border-radius: 25px !important;
  border: none !important;
  padding: 0.8rem !important;
  font-size: 1rem !important;  
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.wpforms-field-container textarea {
  height: 145px !important;
  resize: none !important;
}

/* --- Sekcja Checkboxów RODO --- */
.wpforms-field-checkbox fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wpforms-field-checkbox fieldset ul {
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wpforms-field-description {
  padding-top: 10px !important;
  font-size: 0.7rem !important;
  color: #828282 !important;
}

/* Customowy wygląd kwadracika */
.button-accept fieldset ul li input[type=checkbox] {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #F2F2F2 !important;
  border: 1px solid #CCC !important;
  height: 20px !important;
  width: 20px !important;
  border-radius: 4px !important;
  float: left !important;
  margin: 0 10px 0 0 !important;
  cursor: pointer !important;
}

/* Stan zaznaczenia (Pomarańczowy) */
.button-accept fieldset ul li input[type=checkbox]:checked {
  background-color: #FBAF3B !important;
  border-color: #FBAF3B !important;
}

/* Tekst obok checkboxa */
.button-accept fieldset ul li label {
  font-size: 0.9rem !important;
  padding: 2px 0 0 0 !important;
  margin: 0 !important;
  display: block !important;
  color: #828282 !important;
}

/* --- Sekcja Przycisku Wysyłania --- */
.wpforms-submit-container {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin-top: 20px !important;
}

.wpforms-submit {
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 40px !important;
  gap: 10px !important;
  margin: 0 !important;
  border: 1px solid #FBAF3B !important;
  border-radius: 40px !important;  
  color: #828282 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.wpforms-submit:hover {
  outline-width: 2px !important;
  outline-color: #FBAF3B !important;
  outline-style: solid !important;
  outline-offset: 4px !important;
  color: #FBAF3B !important;
}

/* Ukryte elementy antyspamowe/techniczne WPForms */
.wpforms-hidden {
  display: none !important;
}

/* !!! form-section */


/* >>> footer */
.footer-prnt {
  position: relative;
  z-index: 5;
  transform: translateY(150px);    
}
.footer-bg {
  position: absolute;
  bottom: 0px;
  right: 0;
  z-index: 1;  
  background: #F2F2F2;
  clip-path: circle(50% at 65% 75%);  
  z-index: 2;
  width: 60%;
  height: 770px;
  margin: 0px 0 0 0;  
}
.footer-info {
  position: relative;
  display: flex;
  margin: auto;
  bottom: 0px;
  /* left: 0vw; */
  width: 100%;
  z-index: 2;
}
.footer-info-bg {
  margin: auto;
  background: linear-gradient(90deg, #53939F 0%, #1C3E57 100%);
  /* border-radius: 100% 100% 100% 100%; */
  width: 650px;
  height: 650px;  
  clip-path: circle(50% at 50% 60%);  
}
.footer-info-text {
  padding: 50% 0 0 0;
  text-align: center;
}
.footer-info-text p {
  padding: 5% 0 0 0;
  color: #ffffff;
  text-align: center;
  line-height: 1.3em;
  font-size: 0.8rem;
}
/* !!! footer */

/* >>> subpages */
.subpage-content {
  position: relative;  
  width: 60vw;
  line-height: 1.5em;
  margin: auto;
  z-index: 20;
  padding: 30px 0 20px 0;
}
/* >>> subpages */

/* >>> modules  */
.cookies-check {
  position: fixed;
  width: 100%;
  /* height: 150px; */
  bottom: 0;
  left: 0;
  z-index: 9999;
  background-color: white;
  padding: 1rem 2rem;
  box-shadow: 10px 24px 54px rgba(0, 0, 0, 0.1);
}
.cookies-inside {
  width: 80%;
  margin: auto;
  padding: 1rem 0 1rem 0;
}
.cookies-content {
  width: 80%;
  margin: auto;  
  display: flex;
  justify-content: space-between;
  /* justify-content: center; */
}
.cookies-content p {
  flex-basis: 75%;
}
.cookies-table {
  table-layout: auto;
}
.cookies-table td {
  border: none;
}
.cookies-check h5 {
  padding: 0 0 1rem 0;
}
.cookies-check p {
  font-size: 0.8rem;
  padding: 0 0 1rem 0;
}
.cookies-display {
  display: none;
}
.cookies-content .button-orange {
  height: 50px;
}

/* !!! modules  */

/* >>> media queries */

/* 320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV. */

/* sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... } */
/* @media screen and (min-width: 96em) {

} */
/* min 320px */
@media screen and (min-width: 20em) { 
  .subpage-content {
    width: 95vw;
  }
  .wp-block-heading {
    font-size: 32px;
    line-height: 1.2em;    
  }
  .header-bg-left {
    width: 100%;  
    height: 320px;  
    clip-path: circle(65% at 38% 16%);
  }
  .header-bg-right {
    width: 30%;
    height: 300px;  
    clip-path: circle(30% at 92% 0%);   
  }
  .header-info {
    width: 96%;
    margin: 0 2% 0 2%;
    display: block;
    justify-content: space-between;
  }
  .header-info-left {
    display: block;
  }
  .header-info-left-vl {
    display: none;
  }
  .header-info-left-logo {
    width: 50%;
  }
  .header-info-left-contact {
    margin-top: 40px;
  }
  .header-info-left-contact a {
    font-size: 0.9rem;
  }
  .header-info-right {
    display: none;
  }
  .hero {
    /* transform: translateY(50px); */
    margin-top: 50px;
    display: block;
    left: 0 2% 0 2%;
    width: 96%;
  }
  .hero-text {
    width: 96%;
  }
  .hero-text h1 {
    font-size: 30px;
    line-height: 1.5em;
  }
  .hero-img-desktop {
    display: none;
  }
  .hero-img-mobile {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 0;
    width: 30%;
    display: block;
    /* transform: translate(10%, -170px); */
  }
  .hero-img-mobile img {
    width: 90%;
  }
  .content-bg {
    position: absolute;
    background: linear-gradient(90deg, #53939F 0%, #1C3E57 100%);  
    border-radius: 0 100% 100% 0 / 50%;
    width: 65%;
    height: 2200px;
    transform: translateY(0px);  
    z-index: 1;
  }
  .offer-prnt {
    transform: translateY(0px);    
    margin-top: 50px;        
  }
  .offer {
    padding-top: 50px;
    width: 96%;    
    display: block;
  }
  .offer-cards {
    margin: 0.5rem;
    padding: 2.5rem 1.5rem;
    background: #FFFFFF;
    box-shadow: 10px 24px 54px rgba(0, 0, 0, 0.1);
    border-radius: 70px;
  }
  .offer-cards h2 {
    font-size: 24px;
  }
  .offer-cards h3 {
    font-size: 18px;
    height: 120px;
  }  
  .mission-prnt {
    transform: translateY(0px);
    margin-top: 60px;
  }
  .mission {
    width: 96%;
    /* display: block; */
  }
  .mission-first {
    display: block;
    margin: auto;
  }
  .mission-second, .mission-third, .mission-fourth {
    width: 100%;
  }
  .mission-img {
    margin-right: 0px;
  }
  .mission-img img {
    width: 260px;
  }
  .mission-text h1 {
    font-size: 30px;
    line-height: 1.5em;
  }
  .mission-table {
    display: block;
  }
  .form-prnt {
    transform: translateY(0px);    
    margin-top: 50px;
  }
  .form-info {
    width: 96%;  
    display: block;
  }
  .form-left h1 {
    font-size: 30px;
  }
  .form-left .contact-button {
    display: none;
  }
  .form-right {
    margin-top: 40px;
  }
  .wpforms-form {
    padding: 5px;
  }
  .wpforms-container {
    padding: 30px 10px;
  }  
  .wpforms-field-container {
    display: block;
  }
  .footer-prnt {
    transform: translateY(0px);    
    margin-top: -100px;
  }
  .footer-bg {
    width: 60%;
    height: 600px;
    clip-path: circle(70% at 50% 50%);  
  }
  .footer-info-bg {
    width: 100%;
    height: 300px;
    /* height: 400px;   */
    clip-path: circle(55% at 50% 50%);  
  }
  .footer-info-text {
    padding: 40% 0 0 0;
  }
  .cookies-check {
    padding: 0.5rem;
  }
  .cookies-content {
    width: 100%;
    display: block;
  }  
}
/* min 480px */
@media screen and (min-width: 30em) { 
  .header-bg-left {
    width: 90%;  
    height: 350px;  
    clip-path: circle(65% at 38% 1%);
  }
  .header-bg-right {
    width: 30%;
    height: 450px;  
    clip-path: circle(30% at 92% 0%);   
  }
  .header-info-left-logo {
    width: 60%;
  }
  .header-info-left-contact {
    margin-top: 40px;
  }
  .hero {
    margin-top: 10px;
  }
  .content-bg {
    width: 60%;
    height: 2050px;
  }
  .offer {
    padding-top: 50px;
    width: 96%;    
    display: block;
  }
  .wpforms-form {
    padding: 15px;
  }
  .footer-prnt {
    transform: translateY(0px);    
    margin-top: -100px;
  }
  .footer-bg {
    width: 60%;
    height: 600px;
    clip-path: circle(70% at 50% 50%);  
  }
  .footer-info-bg {
    width: 100%;
    height: 300px;
    /* height: 400px;   */
    clip-path: circle(55% at 50% 50%);  
  }
  .footer-info-text {
    padding: 120px 0 0 0;
  }  
}
/* min 640px */
@media screen and (min-width: 40em) { 
  .subpage-content {
    width: 90vw;
  }
  .wp-block-heading {
    font-size: 36px;
    line-height: 1.3em;    
  }  
  .header-bg-left {
    width: 85%;  
    height: 350px;  
    clip-path: circle(65% at 38% 1%);
  }
  .header-bg-right {
    width: 60%;
    height: 650px;  
    clip-path: circle(30% at 92% 0%);   
  }
  .header-info {
    width: 90%;
  }
  .header-info-left-logo {
    width: 60%;
  }
  .header-info-left-contact {
    margin-top: 40px;
  }
  .hero {
    margin-top: 30px;
  }
  .hero-text {
    width: 90%;
  }
  .hero-img-mobile img {
    width: 100%;
    margin-left: -30px;
  }  
  .content-bg {
    width: 60%;
    height: 1950px;
  }
  .offer {
    padding-top: 50px;
    width: 90%;    
    display: block;
  }
  .offer-cards {
    margin: 1.5rem;
    padding: 2.5rem;
  }  
  .offer-cards h3 {
    height: 50px;
  }   
  .mission {
    width: 90%;
  }
  .form-info {
    width: 90%;
  }  
  .wpforms-form {
    padding: 50px;
  }
  .footer-prnt {
    transform: translateY(0px);    
    margin-top: -100px;
  }
  .footer-bg {
    width: 60%;
    height: 600px;
    clip-path: circle(70% at 50% 50%);  
  }
  .footer-info-bg {
    width: 100%;
    height: 300px;
    /* height: 400px;   */
    clip-path: circle(55% at 50% 50%);  
  }
  .footer-info-text {
    padding: 130px 0 0 0;
  }      
}
/* min 768px */
@media screen and (min-width: 48em) {
  .header-bg-left {
    width: 85%;  
    height: 750px;  
    clip-path: circle(65% at 38% 1%);
  }
  .header-bg-right {
    width: 60%;
    height: 850px;  
    clip-path: circle(30% at 92% 0%);   
  }
  .header-info {
    width: 85%;
    margin: auto;
  }
  .header-info-left-logo {
    width: 60%;
  }
  .header-info-left-contact {
    margin-top: 40px;
  }
  .header-info-left-contact a {
    font-size: 1rem;
  }  
  .hero {
    margin-top: 60px;
  }
  .hero-text {
    width: 85%;
    margin: auto;
  }
  .content-bg {
    width: 50%;
    height: 1850px;
  }
  .offer {
    width: 85%;    
  }
  .mission {
    width: 85%;
  }
  .form-info {
    width: 85%;
  }  
  .wpcf7-form {
    padding: 30px 4rem;
  } 
  .footer-prnt {
    margin-top: -60px;
  }
  .footer-bg {
    width: 60%;
    height: 550px;
    clip-path: circle(60% at 60% 60%);  
  }
  .footer-info-bg {
    width: 90%;
    height: 300px;
    /* height: 400px;   */
    clip-path: circle(55% at 50% 50%);  
  }
  .footer-info-text {
    padding: 110px 0 0 0;
  }      
}
/* min 1024px */
@media screen and (min-width: 64em) {
  .subpage-content {
    width: 85vw;
  }
  .wp-block-heading {
    font-size: 38px;
    line-height: 1.4em;    
  }  
  .header-bg-left {
    width: 75%;  
    height: 2050px;  
    clip-path: circle(45% at 21% 1%);
  }
  .header-bg-right {
    width: 50%; 
    height: 800px;  
    clip-path: circle(39% at 82% 11%); 
  }
  .header-info {
    width: 90%;
    margin: auto;
  }
  .header-info-left-logo {
    width: 35%;
  }  
  .header-info-left-contact {
    margin-top: 60px;
  }
  .hero {
    display: flex;
    margin-top: 0px;
  }
  .hero-text {
    width: 70%;
    margin: 0 0 0 5%;
  }
  .hero-img-desktop {
    display: block;
    margin: -200px -50px 0 0;    
  }
  .hero-img-desktop img {
    width: 60%;
  }
  .hero-img-mobile {
    display: none;
  }
  .hero-img-mobile img {
    width: 70%;
  }  
  .content-bg {
    width: 40%;
    height: 900px;
  }  
  .offer {
    position: relative;
    width: 95%;    
    display: flex;
  }
  .offer-cards {
    margin: 0.5rem;
    padding: 2rem;
  }
  .offer-cards h3 {
    height: 150px;
  }    
  .mission {
    width: 90%;
    /* display: flex; */
  }
  .mission-first {
    display: flex;
    margin: auto;
  }
  .mission-img {
    margin-right: 50px;
  }
  .form-info {
    width: 90%;
    display: flex;
  }  
  .wpcf7-form {
    padding: 40px;
  }
  .footer-bg {
    width: 50%;
    height: 550px;
    clip-path: circle(60% at 60% 60%);  
  }
  .footer-info-bg {
    width: 50%;
    height: 400px;
    clip-path: circle(55% at 50% 65%);  
  }
  .footer-info-text {
    padding: 150px 0 0 0;
  }     
  .cookies-content {
    display: flex;
  } 
}  
/* min 1280px */
@media screen and (min-width: 80em) {
  .subpage-content {
    width: 80vw;
  }
  .wp-block-heading {
    font-size: 38px;
    line-height: 1.4em;    
  }  
  .header-bg-left {
    width: 75%;  
    height: 2650px;  
    clip-path: circle(46% at 15% 1%);
  }
  .header-bg-right {
    width: 50%; 
    height: 1000px;  
    clip-path: circle(39% at 82% 11%); 
  }
  .header-info {
    width: 90%;
    margin: auto;
    display: flex;
  }
  .header-info-left {
    display: flex;
    width: 80%;
  }  
  .header-info-left-logo {
    width: 30%;
  }  
  .header-info-left-vl {
    display: block;
  }
  .header-info-left-contact {
    margin-top: 60px;
  }
  .header-info-right {
    display: flex;
  }
  .hero {
    display: flex;
    margin-top: 0px;
  }
  .hero-text {
    width: 60%;
    margin: 0 15% 0 5%;
  }
  .hero-img-desktop {
    display: block;
    margin: 0px 0 0 0;    
  }
  .hero-img-desktop img {
    width: 60%;
  }
  .hero-img-mobile {
    display: none;
  }
  .hero-img-mobile img {
    width: 70%;
  }  
  .content-bg {
    width: 35%;
    height: 1050px;
  }
  .offer {
    position: relative;
    width: 90%;    
    display: flex;
    padding-top: 200px;
  }
  .mission-prnt {
    transform: translateY(0px);    
    margin-top: 100px;
  }
  .mission {
    width: 80%;
    /* display: flex; */
  }
  .mission-first {
    display: flex;
    margin: auto;
  }
  .mission-table {
    display: flex;
  }  
  .mission-img {
    margin-right: 50px;
  }
  .form-info {
    width: 80%;
    display: flex;
  }  
  .wpforms-form {
    padding: 20px;
  }
  .wpforms-container {
    padding: 20px;
  }  
  .wpforms-field-container {
    display: flex;
  }
  .footer-bg {
    width: 50%;
    height: 650px;
    clip-path: circle(60% at 60% 60%);  
  }
  .footer-info-bg {
    width: 40%;
    height: 400px;
    clip-path: circle(55% at 50% 65%);  
  }
  .footer-info-text {
    padding: 150px 0 0 0;
  }      
}
/* min 1536px	 */
@media screen and (min-width: 96em) { 
  .subpage-content {
    width: 60vw;
  }
  .wp-block-heading {
    font-size: 50px;
    line-height: 1.5em;    
  }  
  .header-bg-left {
    width: 75%;  
    height: 1050px;  
    clip-path: circle(65% at 38% 26%);
  }
  .header-bg-right {
    width: 60%; 
    height: 1000px;  
    clip-path: circle(39% at 82% 11%); 
  }
  .header-info {
    width: 80%;
  }
  .header-info-left {
    display: flex;
    /* width: 80%; */
  }  
  .header-info-left-logo {
    width: 30%;
  }  
  .header-info-left-contact {
    margin-top: 0px;
  }  
  .header-info-right {
    display: flex;
  }
  .hero {
    width: 80%;
    margin-top: 20px;
  }
  .hero-text {
    width: 50%;
    margin: 0 15% 0 0;
  }
  .hero-text h1 {
    font-size: 36px;
  }
  .hero-img-desktop img {
    width: 60%;
  }
  .content-bg {
    width: 35%;
    height: 950px;
  }
  .offer {
    position: relative;
    width: 80%;    
    display: flex;
    padding-top: 80px;
  }
  .offer-cards h2 {
    font-size: 30px;
  }
  .offer-cards h3 {
    height: 100px;
  }
  .mission-prnt {
    transform: translateY(0px);    
    margin-top: 100px;
  }
  .mission {
    width: 80%;
    /* display: flex; */
  }
  .mission-first {
    display: flex;
    margin: auto;
  }
  .mission-second, .mission-third, .mission-fourth {
    /* width: 50%; */
    padding: 20px 0 0px 0;
  }
  .mission-text h1 {
    font-size: 36px;
  }
  .mission-img {
    margin-right: 50px;
  }
  .form-info {
    width: 80%;
    display: flex;
  }  
  .wpforms-form {
    padding: 40px;
  }
  .wpforms-container {
    padding: 40px;
  } 
  .button-accept {
    /* width: 20px; */
  }  
  .footer-bg {
    width: 40%;
    height: 600px;
    clip-path: circle(60% at 55% 60%);  
  }
}
/* min 1800px */
@media screen and (min-width: 112.5em) { 
  .footer-bg {
    width: 40%;
    height: 600px;
    clip-path: circle(60% at 55% 70%);  
  }
  .mission-second, .mission-third, .mission-fourth {
    width: 80%;
  }
}
/* min 1920px */
@media screen and (min-width: 120em) { 
  .header-bg-left {
    width: 75%;  
    height: 1050px;  
    clip-path: circle(65% at 38% 26%);
  }
  .header-bg-right {
    width: 60%; 
    height: 1000px;  
    clip-path: circle(39% at 82% 11%); 
  }
  .header-info {
    width: 80%;
  }
  .header-info-left {
    display: flex;
    /* width: 80%; */
  }  
  .header-info-left-logo {
    width: 30%;
  }  
  .header-info-left-contact {
    margin-top: 0px;
  }  
  .header-info-right {
    display: flex;
  }
  .hero {
    width: 80%;
    margin-top: 20px;
  }
  .hero-text {
    width: 50%;
    margin: 0 15% 0 0;
  }
  .hero-text h1 {
    font-size: 36px;
  }
  .hero-img-desktop img {
    width: 60%;
  }
  .content-bg {
    width: 35%;
    height: 950px;
  }
  .offer {
    position: relative;
    width: 80%;    
    display: flex;
    padding-top: 80px;
  }
  .offer-cards h2 {
    font-size: 30px;
  }
  .offer-cards h3 {
    height: 100px;
  }
  .mission-prnt {
    transform: translateY(0px);    
    margin-top: 100px;
  }
  .mission {
    width: 80%;
    /* display: flex; */
  }
  .mission-first {
    display: flex;
  }
  .mission-text h1 {
    font-size: 36px;
  }
  .mission-img {
    margin-right: 50px;
  }
  .form-info {
    width: 80%;
    display: flex;
  }  
  .wpcf7-form {
    padding: 40px;
  }
  fieldset:first-of-type {
    /* display: flex; */
    justify-content: space-between;  
    gap: 10px;
    padding: 0px;
  }
  .footer-bg {
    width: 40%;
    height: 600px;
    clip-path: circle(60% at 55% 70%);  
  }
}
/* !!! media queries */

/* ->>>>>>>>>>>>>>> zmiany */


/* ==========================================================================
   >>> NOWA ARCHITEKTURA NAGŁÓWKA: LOGO - MENU - LINKEDIN (W JEDNEJ LINII) <<<
   ========================================================================== */

/* 1. Reset blokad powietrznych motywu Twenty Twenty-One */
.site-header, #masthead {
    padding-top: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
}

/* Gwarancja, że elementy zawsze będą unosić się nad geometrycznymi kołami */
.header-container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* 2. RZĄD 1: INTEGRACJA GÓRNEJ LINII (Szerokość VW zapobiega wąskiemu zgniataniu) */
.header-main-row {
    width: 85vw !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding-top: 20px !important; /* Odległość od krawędzi przeglądarki */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Podział procentowy flex-basis zabezpiecza idealne centrowanie menu na środku ekranu */
.header-logo-col {
    flex: 1 1 25% !important;
    display: flex !important;
    justify-content: flex-start !important;
}

.header-logo-col img,
.header-logo-col svg {
    max-width: 220px !important; /* Czytelna, elegancka szerokość logo */
    width: 100% !important;
    height: auto !important;
}

.header-nav-col {
    flex: 1 1 50% !important;
    display: flex !important;
    justify-content: center !important;
}

.header-linkedin-col {
    flex: 1 1 25% !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* STYLIZACJA MENU: POWRÓT GRADIENTOWEJ PIGUŁKI Z GRACJĄ */
.header-nav-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 25px !important;
    margin: 0 !important;
    
    /* Oryginalny, firmowy błękitno-granatowy gradient */
    background: linear-gradient(90deg, rgba(83, 147, 159, 0.95) 0%, rgba(28, 62, 87, 0.95) 100%) !important;
    backdrop-filter: blur(8px) !important;
    
    padding: 10px 35px !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    list-style: none !important;
}

.header-nav-list li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.header-nav-list li a {
    color: #ffffff !important; /* Wyraziste białe napisy */
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 0.3s ease !important;
}

.header-nav-list li a:hover {
    color: #FBAF3B !important;
}

/* 3. RZĄD 2: DANE KONTAKTOWE DOKŁADNIE POD SPODEM (+20PX PADDINGU) */
.header-contact-row {
    width: 85vw !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding-top: 20px !important; /* Zapowiedziane 20px czystego oddechu */
    display: flex !important;
    justify-content: flex-start !important; /* Wyrównanie do lewej strony pod logo */
}

.header-info-left-contact ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important; /* Układ pionowy (telefon nad mailem) */
    gap: 4px !important;
}

.header-info-left-contact ul li a {
    color: #64748B !important; /* Elegancki, stonowany kolor danych tekstowych */
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.header-info-left-contact ul li a:hover {
    color: #FBAF3B !important;
}

/* ==========================================================================
   >>> LOGIKA MOBILNA DLA UKŁADU SYMETRYCZNEGO <<<
   ========================================================================== */
@media screen and (min-width: 64em) {
    .menu-toggle { display: none !important; }
}

@media screen and (max-width: 63.9em) {
    .desktop-only { display: none !important; }
    
    .header-main-row {
        width: 90% !important;
        position: relative !important;
    }
    
    .header-nav-col {
        position: absolute !important;
        top: 0;
        right: 0;
        width: auto !important;
    }
    
    .menu-toggle {
        display: block !important;
        background: transparent !important;
        border: none !important;
        font-size: 32px !important;
        color: #1C3E57 !important;
        cursor: pointer !important;
    }
    
    .header-nav-list {
        display: none !important;
        position: absolute !important;
        top: 45px !important;
        right: 0 !important;
        background: linear-gradient(90deg, #53939F 0%, #1C3E57 100%) !important;
        padding: 20px !important;
        border-radius: 15px !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 180px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    }
    
    .header-nav-list.is-active { display: flex !important; }
    .header-nav-list li a { color: #ffffff !important; }
}




/* 4. SZEROKOŚĆ PODSTRON I BLOGA */
.subpage-content,
.subpage-content-container,
.container-single-article,
.container-blog {
    width: 85% !important; 
    max-width: 1100px !important; /* Zatrzymujemy brzydkie rozciąganie na wielkich monitorach */
    margin: 0 auto !important; /* Wyśrodkowanie tekstu na ekranie */
    padding: 60px 0 80px 0 !important;
}

/* Czysty i nowoczesny font na podstronach */
.entry-content,
.subpage-content-body {
    font-size: 1.1rem !important;
    color: #4A5568 !important;
    line-height: 1.8 !important;
}

/* ==========================================================================
   >>> POPRAWKA SZEROKOŚCI TREŚCI NA PODSTRONACH I BLOGU (PRZEŁAMANIE WP21) <<<
   ========================================================================== */

/* 1. Ustawienie optymalnej, szerokiej bazy dla kontenerów podstron */
.subpage-content,
.subpage-content-container,
.container-single-article,
.container-blog {
    width: 90% !important; 
    max-width: 1200px !important; /* Zwiększamy do 1200px dla pięknego układu */
    margin: 0 auto !important; 
    padding: 40px 0 60px 0 !important;
}

/* 2. Przełamanie agresywnego zwężania tekstu z motywu Twenty Twenty-One */
.entry-content,
.entry-content > *,
.subpage-content-body,
.subpage-content-body > *,
.single-article-content .entry-content,
.single-article-content .entry-content > *,
.blog-posts-grid article .entry-summary,
.blog-posts-grid article .entry-summary > * {
    max-width: 100% !important; /* Rozbija fabryczną blokadę 610px z motywu nadrzędnego */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Dopasowanie marginesów dla nagłówków artykułów */
.subpage-entry-header,
.blog-header,
.entry-header {
    max-width: 1200px !important;
    margin: 0 auto 30px auto !important;
}

/* 4. Korekta dla standardowych akapitów i list wewnątrz treści */
.entry-content p,
.entry-content ul,
.entry-content ol {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    color: #4A5568 !important;
}

/* ==========================================================================
   >>> PRECYZYJNA KOREKTA WIELKOŚCI LOGO (STOP OVERLAPPING) <<<
   ========================================================================== */

.header-info-left {
    flex: 0 0 auto !important; /* Zdejmujemy agresywne rozpychanie i blokujemy kontener */
}

.header-info-left-logo img,
.header-info-left-logo svg {
    max-width: 260px !important; /* Kompromis: większe niż 200px, ale bezpieczne dla nawigacji */
    width: 100% !important;
    height: auto !important;
}

.header-info-right {
    flex: 0 0 auto !important; /* Stabilizuje pozycję menu po prawej stronie */
}





/* 2. Zmiana jednostki z VW na bezpieczne %, aby kontener nie uciekał w prawo */
.header-main-row,
.header-contact-row {
    width: 100% !important; /* To zatrzyma wysuwanie się za ekran */
/*     max-width: 1600px !important; */
    margin: 0 auto !important; /* Idealne wyśrodkowanie */
}