html {
  scroll-behavior: smooth;
}

body{
  font-family: "Montserrat", sans-serif;
    background: #000;
}


/* Header */
.header {
  background-color: #000;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}

.header .container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 15px;
}

.logo img {
  height: 30px;
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 0 30px;
}

.nav a {
  text-decoration: none;
  
    color: rgb(255 255 255 / 90%);
  transition: color 0.3s ease;
    font-family: "Funnel Sans", sans-serif;
  font-weight: 300;
  font-size:18px;
}

.nav a:hover {
  color: #009FE3;
}

.contact {
  display: flex;
  /* flex-direction: column; */
  align-items: flex-end;
  font-size: 18px;
  flex-wrap: wrap;
  /* justify-content: center; */
  background: #111111;
  border: 1px solid #3D3D3D;
  padding: 25px 25px;
}

.contact a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
    font-family: "Funnel Sans", sans-serif;
  font-weight: 300;
}

.contact a:hover {
  color: #009FE3;
}

/* Hero section */
.hero {
    position: relative;
    width: 100%;
    height: calc(100vh - 135px);
    background: url(../img/hero-baner-min.jpg) center top / cover no-repeat;
    display: flex;
    align-items: end;
    color: #fff;
    max-width: 1850px;
    margin: 0 auto;
    margin-top: 135px;
    min-height: 600px;
}

.hero.pp{
    align-items: center;
    height: 27vw;
    min-height: 300px;
    background-position: 0 40%;

}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  width: 1350px;
  margin: 0 auto;
  padding: 30px 15px;
  margin-bottom: 6rem;
}

.hero.pp .hero-content {

    margin-bottom: 0;

}
.hero-content h1 {
  font-size: 90px;
  line-height: 1.2;
}

.hero-content h1 span {
  font-weight: 700;
}

.hero-content p {
  font-size: 18px;
  font-family: 'Funnel Sans';
  font-weight: 300;
  max-width: 470px;
  line-height: 27px;
  margin: 30px 0;
}

.hero-btn {
  display: inline-block;
  background: #fff;
  color: #000;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;

    font-family: 'Funnel Sans';
    font-size: 18px;
    font-weight: 500;
    padding: 20px 35px;
    border-radius: 0;

}

.hero-btn:hover {
  background: #009FE3;
  color: #fff;
}

.contact a {
    transition: 0.5s;
   
    color: rgb(255 255 255 / 90%);
}

.contact a:nth-child(1) {
    border-right: 1px solid #2A2A2A;
    padding-right: 20px;
    margin-right: 20px;
}


.advantages {
  /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  padding: 4rem;
  align-items: center; */
}

.text-block h2 {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.text-block h2 span {
  font-weight: 700;
}

.text-block p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ccc;
}

.image-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

 
section.advantages {
    float: left;
    width: 100%;
    padding: 80px 0 0;
    
    scroll-margin-top: 110px;
}
.advantage {
    max-width: 1350px;
    margin: 0 auto 90px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    justify-content: space-between;
}

.advantage div {
    float: left;
}

.advantage div img {
    max-width: 100%;
    width: auto;
}

.advantage div h2 {
    color: #fff;
    font-size: 60px;
    max-width: 90%;
}

.advantages .advantage:nth-child(odd) img {
    float: right;
}


.advantage div.image-block {
    width: auto;
}

.advantage div.text-block {
    width: 630px;
}

.advantages .advantage:nth-child(odd) .text-block {
    margin-right: 80px;
}

.advantages .advantage:nth-child(even) .text-block {
    margin-left: 80px;
}

.advantages .advantage:nth-child(3) .text-block {
    width: 530px;
}

.advantages .advantage:nth-child(4) {justify-content: normal;}

.text-block p {
    font-family: 'Funnel Sans';
    
    color: rgb(255 255 255 / 90%);
    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
}
#inteligentny-dom {
    width:100%;
    float:left;
    scroll-margin-top: 110px;
    position: relative;
    padding-top:90px;
}

#inteligentny-dom .container {
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
}

#inteligentny-dom h3 {
  font-size: 60px;
  font-weight: 300;
  color:#fff;
  max-width: 750px;
}

.subtitle {
  
    color: rgb(255 255 255 / 90%);
  margin-bottom: 2rem;
  font-family: 'Funnel Sans';
  font-size: 18px;
  margin: 15px 0;
  max-width: 500px;
  font-weight: 300;
  
  line-height: 27px;
}

.accordion {
  border-top: 1px solid #2A2A2A;
  position: relative;
  margin-top:50px;
}

.accordion-item {
  border-bottom: 1px solid #2A2A2A;
}

.accordion-header {
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 18px;
  cursor: pointer;
  padding-block: 0;
  margin: 0;
  padding-inline: 0;
}

.accordion-header .icon {
  margin-right: 0;
}

.accordion-header .toggle {
  font-size: 1.5rem;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: #ccc;
}

.accordion-content p {
  padding: 0;
  margin: 0;
  line-height: 1.5;
}

.accordion-item.active .accordion-content {
  max-height: 500px; /* dostosuj jeśli więcej tekstu */
}
.accordion-item .accordion-content {
  width: 70%;
  margin-left: 30%;
  
    max-width: 650px;
}

#inteligentny-dom .container:before {
    content: '';
    background: url(../img/decoration-min.png) no-repeat center / cover;
    width: 120%;
    height: 800px;
    position: absolute;
    right: -110px;
    top: -25%;
    z-index: -2;
}
body {
    overflow-x: hidden;
}

.accordion-item {
    text-align: left;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 25px 0;
}

.accordion-content {
    width: 100%;
}
.accordion-header .icon {
    width: 30%;
    text-align: left;
}

span.toggle {
    position: absolute;
    right: 0;
    border: 1px solid #2A2A2A;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    background:url(../img/plus.svg) no-repeat center / 100% 30%;
    justify-content: center;
}

.active span.toggle{
    border-color:#009fe3;
    background: url(../img/minus.svg) no-repeat center / 30% 30%;
    color: #009fe3;
}

section#co-robimy {
    float: left;
    width: 100%;
    /* height: 20vw; */
    /* min-height: 300px; */
    /* max-height: 550px; */
    padding: 30px 0;
    margin:50px 0;
    
    scroll-margin-top: 110px;
}

section#co-robimy .baner-content {
    max-width: 1850px;
    padding: 60px 15px 0;
    margin: 0 auto;
    background: url(../img/baner-quote-min.png) no-repeat center / cover;
    height: 100%;
    display: flex;
    align-items: center;
    height: 20vw;
    min-height: 300px;
    max-height: 550px;
}

section#kontakt .baner-content{
    max-width: 1850px;
    padding: 60px 15px 0;
    margin: 0 auto;
    background: url(../img/baner-kontakt-min.png) no-repeat center / cover;
    height: 100%;
    display: flex;
    align-items: center;
    height: 20vw;
    min-height: 300px;
    max-height: 550px;

}

section#kontakt .baner-content .text{
  
    color: #fff;
    width: 1350px;
    padding: 0 15px;
    margin: 0 auto;
}
section#co-robimy  .baner-content h5 {
    color: #fff;
    width: 1350px;
    padding: 0 15px;
    margin: 0 auto;
    font-family: Montserrat;
    font-weight: 300;
    font-size: 60px;
}

section#kontakt h5{
   font-family: Montserrat;
    font-weight: 300;
    font-size: 60px;
    width:100%;
    float:left;
}
section#kontakt p{
  font-family: 'Funnel Sans';
  font-size:18px;
  line-height: 27px;
  margin-top:15px;
  float:left;
    color: rgb(255 255 255 / 90%);
    max-width:600px;
}
.baner-content h5 {
    position: relative;
}

.baner-content h5 span {
    position: absolute;
    left: 15px;
    top: -60px;
    background: url(../img/quote.svg) no-repeat center / cover;
    width: 60px;
    height: 40px;
}

.halfs {
    max-width: 1350px;
    padding: 0 15px;
    margin: 60px auto 0;
    color: rgb(255 255 255 / 90%);
}

.halfs h5 {
    font-family: 'Montserrat';
    font-weight: 300;
    font-size: 30px;
    margin: 0 0 20px;
}

.halfs .half {
    width: calc(50% - 100px);
    float: left;
    margin: 50px 50px 0px;
}

.halfs .half p {
    font-family: 'Funnel Sans';
    font-size: 18px;
    font-weight: 300;
       color: rgb(255 255 255 / 90%);
    line-height: 27px;
}


.gallery{
    float:left;
    width:100%;
    margin:30px 0 30px;
    display:flex;
    flex-wrap:wrap;
    gap:25px
}
.gallery .image{
    width:calc(33.3% - 25px);
    overflow:hidden;
    height:280px
}
.gallery .image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s
}

section#realizacje {
    float: left;
    width: 100%;
    padding: 50px 0;
    
    scroll-margin-top: 110px;
}

section#realizacje .hug {
    max-width: 1350px;
    padding: 0 15px;
    margin: 0 auto;
}

.inner-hug {
    width: 100%;
    float: left;
}

.inner-hug p.header {
    font-size: 30px;
    color: #fff;
    float: left;
    position: static;
    background: none;
    font-weight: 300;
    font-size: 60px;
    margin-bottom: 20px;
}

section#kontakt {
    margin: 50px 0;
    float: left;
    width: 100%;
    
    scroll-margin-top: 110px;
}

section#kontakt .baner-content {
    align-items: end;
}

section#kontakt p {
    margin-bottom: 90px;
}

.halfs .half {
    background: url(../img/border-deco.png) no-repeat bottom / contain;
    padding: 0 50px 50px;
    width: calc(50% - 140px);
    margin: 50px 20px 0;
}
.halfs {display: flex;padding: 0;}



.steps-main{
width:100%;
float:left;
}
.steps {
  max-width: 1350px;
  margin: 0 auto;
      padding: 60px 15px;
    scroll-margin-top: 110px;
}

.steps h6.main {
  font-size: 60px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 70px;
  text-align: left;
}

.step {
  display: flex;
  align-items: flex-start;
  padding-bottom: 80px;
  position: relative;
}

.step-number {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border: 1px solid #2A2A2A;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  margin-right: 30px;
  font-size: 18px;
  font-weight: 300;
  color: rgb(255 255 255 / 60%);
}

.step-content h6 {
  margin: 9px 0 10px;
  color: #fff;
  font-size: 30px;
  font-weight: 300;
}

.step-content p {
  margin: 0;
  line-height: 25px;
  font-family: 'Funnel Sans';
  font-size: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 18px;
}


.step-number:after {content: '';width: 1px;height: calc(100% - 52px);background: #2A2A2A;position: absolute;top: 51px;left: 25px;}


.step:nth-child(6) .step-number:after {
    display: none;
}

#loadMore {
  background:#fff;
  color:#000;
  border:none;
  transition:background 0.3s ease, color 0.3s ease;
  font-family: 'Funnel Sans';
  font-size: 18px;
  font-weight: 500;
}
#loadMore:hover {
background: #009FE3;
    color: #fff;
}



/* Domyślnie ukryte zdjęcia */
#realizacje .gallery .image {
  display: none;             /* ukryte */
  opacity: 0;                /* przezroczyste */
  transition: opacity 0.6s ease; /* animacja przenikania */
}

/* Gdy dodamy klasę 'visible' – pokaż */
#realizacje .gallery .image.visible {
  display: block;
  opacity: 1;
}


/* kontener obrazka – żeby efekt hover obejmował cały kafelek */
#realizacje .gallery .image {
  display: none;                /* domyślnie ukryte */
  opacity: 0;
  transition: opacity 0.6s ease; /* fade-in */
  overflow: hidden;             /* żeby powiększony img nie wychodził poza ramkę */
}

/* widoczne elementy */
#realizacje .gallery .image.visible {
  display: block;
  opacity: 1;
}

/* sam obrazek */
#realizacje .gallery .image img {
  display: block;

  transition:0.5s;
}


#realizacje .gallery .image:hover img {
  transform: scale(1.05); /* lekkie powiększenie */
  opacity:0.8;
}




.contact-container {
  /* display: flex; */
  flex-wrap: wrap;
  /* gap: 40px; */
  max-width: 1350px;
  margin: 0px auto;
  padding:0 15px;
}

.contact-info {
  padding: 0 50px 40px;
  color: #fff;
  margin-right: 70px;
  width: 28%;
  float: left;
  margin-top: 70px;
}

.contact-info a {
  color: #fff;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

.contact-form {
  width: calc(72% - 220px);
  margin-left: 50px;
  float: left;
  margin-top: 70px;
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

.contact-form input,
.contact-form textarea {
  background: transparent;
  border: 1px solid #3D3D3D;
  padding: 20px 20px;
  margin-bottom: 30px;
  font-size: 16px;
  font-family: 'Funnel Sans';
  font-weight: 300;
  outline: none;
  
    color:rgb(255 255 255 / 90%);
    font-size: 16px;
    font-family: 'Funnel Sans';
}

.checkbox {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: rgb(255 255 255 / 90%);
  margin-top: 30px;
  font-family: 'Funnel Sans';
}

.contact-form button {
  cursor: pointer;
  width: 220px;
  padding: 20px 0;
  background: #fff;
  color: #000;
  border: none;
  transition: background 0.3s 
ease, color 0.3s 
ease;
  font-family: 'Funnel Sans';
  font-size: 18px;
  font-weight: 500;
  margin-top: 20px;
}

.contact-form button:hover {
  background: #00aaff;
  color: #fff;
}

.contact-info p:nth-child(1), 
.contact-info p:nth-child(2) {
    font-size: 30px;
    margin-bottom:30px;
    font-weight: 300;
}

.contact-info p:nth-child(1) a, .contact-info p:nth-child(2) a {
    transition: 0.5s;
}

.contact-info p:nth-child(1) a:hover, .contact-info p:nth-child(2) a:hover {
    color: #00aaff;
    text-decoration:none;
}

.contact-info p:nth-child(3) {
    color: rgb(255 255 255 / 90%);
    font-size: 18px;
    font-family: 'Funnel Sans';
    line-height: 28px;
    font-weight: 200;
}
.contact-info {
    background: url(../img/border-contact.png) no-repeat left bottom / cover;
}

.contact-form .checkbox input {
    margin-bottom: 0;
}

label.checkbox {
    margin-top: 0;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:rgb(255 255 255 / 90%);
    font-size: 16px;
    font-family: 'Funnel Sans';
}

.contact-form textarea{
  min-width:calc(100% - 40px);
  max-width:calc(100% - 40px);
}



footer.footer {
    float: left;
    width: 100%;
    border-top: 1px solid #2A2A2A;
    margin: 100px 0 0;
}

.footer {
    background-color: #000;
    color: #fff;
}

.footer-container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 50px 20px 0;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.social-icon {
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
}

.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px 40px;
}

.footer-nav a {
    text-decoration: none;
    color: rgb(255 255 255 / 90%);
    font-size: 18px;
    transition: color 0.3s;
    font-family: 'Funnel Sans';
    font-weight: 300;
}

.footer-nav a:hover {
    color: #00aaff;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.privacy-policy {
    text-decoration: none;
    font-family: 'Funnel Sans';
    font-size: 16px;
    color: rgb(255 255 255 / 60%);
    font-weight: 300;
}

.contact-box {
    flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
    background: #111111;
    padding: 10px 0;
    border: 1px solid #3D3D3D;
    padding: 23px 3px;
    margin: 30px 0 20px;
}

.contact-item {
    color: rgb(255 255 255 / 90%);
    text-decoration: none;
    font-size: 18px;
    font-family: 'Funnel Sans';
    font-weight: 300;
    padding: 0 15px;
    transition: 0.5s;
}

a.social-icon {
    margin-left: 40px;
}

.contact-box a {
    float: left;
    transition: 0.5s;
}.privacy-policy{
  
    transition: 0.5s;
}

.contact-box a:nth-child(2) {border-left: 1px solid #2A2A2A;}

.contact-box a:hover,
.privacy-policy:hover {color: #009de3;}

.footer-bottom {
    margin-bottom: 30px;
}

.nav ul li a.active {
    color: #009de3; /* Przykładowy niebieski kolor, możesz go dostosować */
    xfont-weight: bold;
}

section.pp-content {
    float: left;
    width: 100%;
    color: #fff;
    margin: 50px 0 0;
}

section.pp-content h1, section.pp-content h2, section.pp-content p {
    max-width: 1350px;
    padding: 0 15px;
    margin:  0 auto;
}

section.pp-content h1 {
    margin: 20px auto;
    font-size: 60px;
    font-weight: 400;
}

section.pp-content p {
    margin-bottom: 60px;
    font-family: 'Funnel Sans';
    font-size: 18px;
    font-weight: 300;
    color: rgb(255 255 255 / 90%);
    line-height: 27px;
}

section.pp-content h2 {
    font-size: 40px;
    margin-bottom: 20px;
}


.lb-data .lb-close,.lb-nav {
    position: absolute
}


#lightbox {
    position: fixed;
    top: 80px!important
}

.lightbox .lb-image {
    border: none!important;
    height: auto!important;
    width: auto!important;
    max-width: 70vw!important;
    margin: 0 15vw!important;
    max-height: 80vh!important
}

.lb-nav a.lb-next,.lb-nav a.lb-prev {
    opacity: 1!important;
    z-index: 9999!important;
    position: absolute!important;
    top: calc(50% - 10px)!important;
    background: url(/img/next-white.png) center/cover no-repeat!important;
    width: 35px!important;
    height: 35px!important;
    opacity: .7!important
}

.lb-nav {
    left: 0;
    width: 100%
}

.lb-outerContainer {
    height: calc(100vh - 160px)!important;
    width: auto!important;
    background: 0 0!important
}

.lb-container {
    float: left;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

span.lb-number {
    display: none!important
}

.lb-data .lb-close {
    top: -50px;
    right: 50px
}

.lb-nav a.lb-next {
    right: 55px!important
}

.lb-nav a.lb-prev {
    left: 55px!important;
    transform: rotate(180deg)
}

.lb-nav a.lb-next:hover,.lb-nav a.lb-prev:hover {
    opacity: 1!important
}


div#formResponse {
    margin: 40px 0;
    font-size: 20px;
}


.ham {
    display: none;
}


main {
    overflow: hidden;
}

.step-number {
    background: #000;
}

/* 
.step-number:after {
    height: 400%;
} */

.pp-content b,
.pp-content strong,
.pp-content a{
    font-weight: 600;
    color:#fff;
}

ol.primary {
    max-width: 1190px;
    padding: 0;
    margin: 0px auto;
    list-style: number;
    margin-bottom: 60px;
    padding:0 80px;
}

    ol.primary > li {
      margin: 20px 0;
      font-family: 'Funnel Sans';
      font-size: 18px;
      font-weight: 300;
      color: rgb(255 255 255 / 90%);
      line-height: 27px;
    }

    /* style dla listy podpunktów prawnych jako "kropki" */
    .legal-list {
      list-style: none;
      margin: 8px 0 0 20px;
      padding: 0;
    }
    .legal-list li {
      position: relative;
      padding-left: 26px;
      margin: 8px 0;
    }
    .legal-list li::before {
      content: "o";
      position: absolute;
      left: 0;
      top: 0;
      font-weight: 700;
      transform: translateY(-1px);
    }

    strong.emph {
      font-weight: 700;
    }

    ol.primary.small { 
    list-style: none;
    max-width: 1230px;
    padding:0 60px;
}


   section.pp-content p.small {
    max-width: 1235px;
    padding:0 60px;

    }
section.pp-content h2 span {
    width: 35px;
    display: inline-block;
}

.lb-loader {
  display: none !important;
}

.lb-next, .lb-prev {
    display: block !important;
}

.lb-nav {
    display: block !important;
}

a.lb-close {
    display: block !important;
}

.lb-dataContainer {
    display: block !important;
}
form a {
    display: contents;
    color: #fff;
    transition: 0.5s;
}

form a:hover {
    color: #009de3;
}
section.hero {
    margin: 90px 20px 0;
    width: calc(100% - 40px);
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

 .checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 1px solid #3D3D3D;
  border-radius: 5px;
  transition: all 0.2s;
  vertical-align: middle;
  position: relative;
}

 input[type="checkbox"]:checked + .checkmark {
  background-color: #009de3; /* typowy niebieski iOS */
  border-color: #009de3;
}

 .checkmark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg);
  transition: opacity 0.2s;
}

 input[type="checkbox"]:checked + .checkmark::after {
  opacity: 1;
}
.checkbox p {
    width: calc(100% - 25px);
    margin-left: 0px;
}

.step {
  opacity: 0.3;
  transition: opacity 0.4s ease;
}

.step.active {
  opacity: 1;
}
.contact.mm {
    display: none;
}


section.pp-content h2{
  display: flex;
  align-items: flex-start; /* żeby numer był wyrównany do góry */
  gap: 0.5em; /* odstęp między numerem a tekstem */
}

section.pp-content h2 span {
  flex-shrink: 0; /* zapobiega ściskaniu numeru */
}


.footer-bottom .links p {
    float: right;
    margin-left: 15px;
    font-size: 13px;
    color: #939598;
    border-left: 1px solid #939598;
    padding-left: 15px;
    margin-top: 2px;
}

.footer-bottom .links p a {color: #939598;transition: 0.5s;}

.footer-bottom .links p a:hover {
    color: #009de3;
}


@media all and (max-width:1400px){
  .hero-content h1 {
    font-size: 60px; 
}

.nav ul {
    gap: 0 20px;
}
}


@media all and (max-width:1300px){

header .contact {
    display: none;
}

.nav ul {
    gap: 0 30px;
}

section.hero {
    margin-top: 90px;
    height: calc(100% - 100px);
}
section#co-robimy .baner-content h5 {
    font-size: 40px;
}
.footer-nav ul {
    gap: 30px 20px;
}
}



@media all and (max-width: 960px) {

  .advantage:nth-child(1) {
    opacity: 1 !important;
    transform: none !important;
}


  section.pp-content h1 {
    font-size: 40px;
}

section.pp-content h2 {
    font-size: 30px;
}

  .hero{
    min-height:480px;
  }

  .contact-info {
    width: calc(100% - 105px);
}

.contact-form {
    margin-left: 0;
    width: 100%;
}

  .gallery .image{
    height:230px;
  }
    .ham.cur {
        display:block;
        cursor: pointer
    }

    .nav {
        position: absolute;
        top: 90px;
        background: #000000;
        z-index: 999999;
        width: 100%;
        left: 0;
        display: none;
        height: calc(100vh - 90px);
    }

    header .nav li {
        width: calc(100% - 40px);
        margin: 0 20px 15px;
        text-align: left;
    }

    header .nav ul {
        width: 100%;
        flex-wrap: wrap;
        margin: 40px 0 0;
    }

    header .nav li.big {
        display: flex;
        justify-content: center;
        margin: 5px 0 20px
    }

    header .nav li a,header .nav li a:hover {
        color: #fff
    }

    header .nav li a span {
        color: #fff;
        background: #fff
    }

    header .nav li.big a:hover {
        background: #fff;
        color: #009fe3
    }


.ham.cur {
    width: 35px;
    margin-top: 0;
    right: 20px;
    top: 35px;
    position: absolute;
    }

.ham.cur span {
    background: #fff
}

.ham span,.ham.cur span {
    float: right;
    width: 100%;
    height: 1px
}


.ham:hover span:first-child {
    width: 25%
}

.ham:hover span:nth-child(2) {
    width: 50%
}

.ham:hover span:nth-child(3) {
    width: 75%
}

.ham span {
    margin: 4px 0;
    background: #fff;
    transition: .5s;
    clear: both
}

.ham span:nth-child(3) {
    margin-bottom: 0;
    width: 100%
}
.nav ul li a.active {
    color: #fff;
    text-decoration: underline;
}
.hero-content {
    padding-bottom: 0;
    margin-bottom: 50px;
}

.advantages .advantage:nth-child(odd) .text-block {
    margin-right: 0;
    width: 100%;
}

.advantage {
    display: block;
    float: left;
}

.advantage div.text-block {
    margin-bottom: 40px;
}

section.advantages {
    padding-top: 30px;
}
.advantages .advantage:nth-child(even) .text-block {
    margin-right: 0;
    margin-left:0;
    width: 100%;
}
.advantages .advantage:nth-child(even){
    display:flex;
    flex-direction:column-reverse;
    justify-content: start !important;
    align-items: baseline;
}

.advantage div h2,
#inteligentny-dom h3,
.inner-hug p.header,
section#kontakt h5 {
    font-size: 50px;
}
section#jak-dzialamy {
    padding-bottom: 0;
}

.accordion-item .accordion-content {
    width: 80%;
    max-width: unset;
    margin-left: 10%;
}

.accordion-header .icon {
    width: 10%;
}


.halfs .half {
    width: calc(100% - 140px);
    background-size: cover;
    margin-bottom: 50px;
}

.halfs {
    flex-wrap: wrap;
    margin: 0 auto;
}

section#co-robimy {
    margin-bottom: 0;
}

.steps h6.main{
  font-size:50px;
}

.footer-top {
    flex-wrap: wrap;
}

nav.footer-nav {
    /* width: 100%; */
}

.footer-nav ul li {
    width: 40%;
    text-align: left;
}

.footer-nav ul {
    flex-wrap: wrap;
    gap: 5px 0;
    margin-top: 20px;
    justify-content: end;
}

.footer-logo {
    /* justify-content: center; */
    /* width: 100%; */
    /* flex-wrap: wrap; */
}

a.social-icon {
    margin: 0;
    width: 100%;
    justify-content: center;
    text-align: center;
    margin: 15px 0;
}

.footer-bottom {flex-direction: column-reverse;}
.advantages .advantage:nth-child(1),
.advantages .advantage:nth-child(3){
     display: flex;
     flex-wrap: wrap-reverse;
     margin-bottom: 70px;
}

.advantages .advantage:nth-child(1) .image-block,
.advantages .advantage:nth-child(3) .image-block{
    margin-bottom: 50px;
}

.advantages .advantage:nth-child(2) .image-block,
.advantages .advantage:nth-child(4) .image-block{
    margin-bottom: 50px;
}

.advantages .advantage{
    margin-bottom: 70px;
    
}.advantages .advantage:nth-child(even) {
    flex-direction: column;
}

.accordion-item .accordion-content {
    margin-left: 0;
    width: 100%;
}

button.accordion-header h4 {
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
}

.accordion-header {
    display: block;
    position: relative;
}

.accordion-header .icon {
    display: block;
    margin-bottom: 20px;
}

span.toggle {
    top: 0px;
}


.advantages .advantage:nth-child(4) {
    margin-bottom: 0;
}

.contact-box {
    float: left;
}

.footer-bottom {
    display: block;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    margin-top: 50px;
    justify-content: start;
}

.privacy-policy {
    float: right;
    margin-left: 100px;
}

a.social-icon {
    margin-left: 40px;
}

.checkbox p {
    width: calc(100% - 25px);
    margin-left: 3px;
}


.footer-bottom .links p {
    float: right;
}

.privacy-policy {
    margin-left: 0;
    float: left;
}

.links {
    float: right;
}

.footer-bottom {
    justify-content: space-between;
}


  }



  @media all and (max-width: 850px) {
  .footer-nav ul {
    justify-content: start;
    width: 100%;
    gap: 20px 0;
    margin-top: 40px;
}

.footer-nav ul li {
    width: 50%; 
}

nav.footer-nav {
    width: 100%;
}

a.social-icon {
    float: left;
    margin-left: 0;
    width: auto;
    margin-top: 0;
}

.footer-logo {
    width: 100%;
    display: block;
}

a.logo-link {
    width: 50%;
    display: block;
    float: left;
}

.footer-bottom {flex-direction: column-reverse; margin-top:30px;}

.contact-box {
    width: 100%;
    display: flex;
    padding: 50px 0;
}

.contact-box a {
    width: 100%;
    text-align: center;
    padding: 0;
}

.privacy-policy {
    margin-left: 0;
    text-align: left;
    float: left;
    margin-top: 10px;
    width: 100%;
}
.ham.cur.show span:nth-child(2) {
    display: none;
}

.ham.cur.show span:nth-child(1) {
   transform:rotate(45deg);
   top: 8px;
   position: relative;
}
.ham.cur.show span:nth-child(3) {
   transform:rotate(-45deg);
   top: 0;
   position: relative;
}

.ham.cur.show:hover span{
   width:100% !important; 
}
header .nav li {
    margin-bottom: 35px;
}.contact.mm {
    display: block;
    margin: 0 20px;
    width: calc(100% - 90px);
    padding: 35px 25px;
}

.contact.mm a {
    width: 100%;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
}

.contact.mm a:nth-child(1) {
    margin-bottom: 15px;
}

section.pp-content h2 span{
  width: 30px;
}

.footer-bottom .links p {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    text-align: center;
}

.privacy-policy {
    text-align: center;
    margin-bottom: 10px;
}


}



  @media all and (max-width: 800px) {
    .lb-nav a.lb-next,.lb-nav a.lb-prev {
        width:25px!important;
        height: 27px!important
    }

    .lb-nav a.lb-prev {
        left: 0!important
    }

    .lb-nav a.lb-next {
        right: 0!important
    }

    .lb-data .lb-close {
        right: 5px!important;
        top: -70px!important;
        width: 20px!important;
        height: 20px!important;
        background-size: cover!important
    }

    .lightbox .lb-image {
        max-width: 80vw!important;
        margin: 0 10vw!important
    }

    section#co-robimy .baner-content,
section#kontakt .baner-content{
    margin: 0 20px;
    width: calc(100% - 40px);
}
section#kontakt .baner-content .text {
    padding-left: 0;
}

section#kontakt p {
    margin-bottom: 0;
}

section#kontakt .baner-content {
    padding: 40px 15px;
    align-items: center;
}
}




@media (max-width: 768px) {

  .contact-info{
    background:none;
    padding:0;

  }

  .halfs .half {
    background: none;
    padding: 0;
    width: 100%;
}


    section#co-robimy .baner-content h5 {
        font-size: 26px;
    }

    
.gallery .image {
    width: calc(50% - 13px);
}

  .gallery .image{
    height:200px;
  }
.contact-form button, #loadMore, a.hero-btn {
    font-size: 16px !important;
    width: 170px !important;
    padding: 15px 0 !important;
}

.step-content h6 {
    font-size: 24px;
}

.step-content p {
    font-size: 16px;
    line-height: 22px;
}

.step {
    padding-bottom: 50px;
}

.contact-info p:nth-child(1), .contact-info p:nth-child(2) {
    font-size: 25px;
}
a.hero-btn {
    width: 250px !important;
    text-align: center;
}

  .advantage div h2, #inteligentny-dom h3, .inner-hug p.header, section#kontakt h5,
  .steps h6.main{
    font-size:40px;
  }

  section#co-robimy .baner-content {
    padding: 100px 20px 50px;
}
    section#co-robimy .baner-content h5 {
        font-size: 30px;
    }
.privacy-policy {
    text-align: left;
    width: auto;
}

.links {
    width: 100%;
    float: left;
}

.footer-bottom .links p {
    width: auto;
    margin-top: 12px;
}
.privacy-policy {
    margin-bottom: 0;
}
}
  @media all and (max-width:600px){
    .hero-content h1 {
    font-size: 40px;
}

.hero-content p {
    font-size: 16px;
    margin: 20px 0;
    line-height: 25px;
}

.gallery .image {
    width:100%;
}

 
  .gallery .image{
    height:220px;
  }
.contact-item {
    width: 100%;
    text-align: center;
    padding: 0;
}



.step:nth-child(6) .step-number:after {
    height: 0%;
}

  }


  @media all and (max-width:350px){
    .privacy-policy {
    width: 100%;
    margin-bottom: 0;
    text-align: center;
}

.footer-bottom .links p {
    width: 100%;
    text-align: center;
}
  }

  @media all and (max-height:680px){

header .nav.show  ul {
    margin-top: 20px;
}

header .nav.show  li {
    margin-bottom: 20px;
}

.show .contact.mm {
    margin-top: 10px;
}
}