html,
body {
    margin: 0;
    padding: 0;
    
    /* blokada lewego przycisku  */
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    /* Blokada przeciągania */
    -webkit-user-drag: none; /* działa tam, gdzie jest obsługiwana */
}
* {
    font-family: "Nunito Sans", "Open Sans", "Arial", sans-serif;
    box-sizing: border-box;
    /* cursor: url('../images/cursor.png'), pointer; */
}

/* Globalny reset wszytkich linków  */
a,
a:visited,
a:hover,
a:active,
a:focus,
a:focus-visible {
  color: inherit;
  text-decoration: none;
}

p::selection  {
    background-color: #191919;
    color: lightgray;
}
h1::selection  {
    background-color: #191919;
    color: lightgray;
}
h2::selection  {
    background-color: #191919;
    color: lightgray;
}
h3::selection  {
    background-color: #191919;
    color: lightgray;
}
h4::selection  {
    background-color: #191919;
    color: lightgray;
}
h5::selection  {
    background-color: #191919;
    color: lightgray;
}
h6::selection  {
    background-color: #191919;
    color: lightgray;
}
img::selection  {
    background-color: #191919;
}
br::selection  {
    background-color: #191919;
    color: lightgray;
}
span::selection  {
    background-color: #191919;
    color: lightgray;
}
.copyright p::selection  {
    background-color: #191919;
    color: lightgray;
}
a::selection  {
    background-color: #191919;
    color: lightgray;
}
b::selection  {
    background-color: #191919;
    color: lightgray;
}
button::selection  {
    background-color: #191919;
    color: lightgray;
}
u::selection  {
    background-color: #191919;
    color: lightgray;
}
li::selection  {
    background-color: #191919;
    color: lightgray;
}








/* ukrywanie nagłówków strukturalnych  */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}







/* szczalka przypieta na stale 
 */

 #scrollTopBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#scrollTopBtn:hover {
  background-color: #000000;
  transform: scale(1.1);
}







/* =====================================================
   UKŁAD – PRZYCISKI OBOK SIEBIE
   ===================================================== */

.buttons-main-offer {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 9rem;
  flex-wrap: wrap;
}

/* =====================================================
   FRAME – KOMPONENT BAZOWY
   ===================================================== */

.frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 1.1rem 3.2rem;
  min-width: 180px;

  font-size: 15px;
  /* font-weight: 400; */
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
    
  cursor: pointer;
  z-index: 1;
  
}

/* =====================================================
   RAMKA – PROSTOKĄT
   ===================================================== */

.frame::before {
  content: "";
  position: absolute;
  inset: 0;

  border: 1px solid currentColor;
  border-radius: 2%;

  transition: transform 0.25s ease;
  z-index: -1;
  pointer-events: none;
}

/* =====================================================
   WARIANT – DARK (ciemny tekst)
   ===================================================== */

.frame--dark {
  color: #1e1f22;
}

/* reset wszystkich stanów linku */
.frame--dark,
.frame--dark:visited,
.frame--dark:hover,
.frame--dark:active {
  color: #1e1f22;
}

/* =====================================================
   HOVER – SUBTELNY, BEZ ZMIANY KSZTAŁTU
   ===================================================== */

.frame:hover::before {
  transform: translate(2px, -2px);
}

/* =====================================================
   TEKST WEWNĘTRZNY
   ===================================================== */

.frame span {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 500;
}
.frame span i {
  font-size: 15px;
  padding: 4px;
  align-items: center;
  position:static;

}

/* =====================================================
   RESPONSYWNOŚĆ
   ===================================================== */

@media (max-width: 768px) {
  .buttons-main-offer {
    flex-direction: column;
    gap: 2rem;
  }
  .frame {
  margin: 0 3.2rem;

  padding:0.6rem 3.2rem;
  font-size: 14px;
  
}
.buttons-main-offer {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 6rem;
  flex-wrap: wrap;
}

}








/* offer Co daje usługa projektu wnętrz*/
.offer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}
.offer > section {
    width: 410px;
    padding: 15px 40px 15px 40px;
}
.offer p {
    text-align: justify;
    font-weight: 300;
    font-size: 18px;
    color:rgba(0, 0, 0, 0.8);
    text-align-last: center;
}
.offer h4 {
    font-size: 23px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85); 
    padding: 10px 0 20px 0; 
    margin: 5px;
}
.offer i {
    font-size: 22px;
    /* color:rgb(190, 152, 0); */
    color:rgba(0, 0, 0, 0.8);
    /* color: rgba(0, 0, 0, 0.85); */
}
.offer section img {
    max-width: 100%;
    padding-bottom: 15px;
}
.offer b {
    font-size: 20px;
    font-weight: 700;
    color:rgba(0, 0, 0, 0.8);
}
.offer a {
    color: rgb(190, 152, 0);
    text-decoration: none;
    font-weight: 600;
    transition-duration: 0.6s;
}
.offer a:hover {
    color:#1B3244;
    text-decoration: none;
}
.offer button {
    background-color: white;
    color: black;
    font-size: 16px;
    font-weight: 700;
    padding: 15px 35px;
    margin: 20px 0 80px 0;
    border: 1px solid #59656e;
    transition-duration: 0.5s;
}
.offer button:hover {
    background-color: rgba(0, 0, 0, 0.88);
    color: white;
    font-size: 16px;
    font-weight: 700;
}
.additional-paragraph {
    display: none;
}

/* baner */
.baner {
    /* height: 300px; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5% 18%;
}
.baner div {
    display: block;
    text-align: center;
}
.baner i {
    font-size: 40px;
    color:rgb(190, 152, 0);
    padding: 10px;
}
.baner div h3 {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 400;
    text-align: center;
    padding-bottom: 40px;
}
.baner div h3 span {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 700;
    text-align: center;
    padding-bottom: 40px;
}
.baner p {
    font-size: 19px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.85);
}
.baner b {
    letter-spacing: 3px;
    font-size: 18px;
    font-weight: 800;
}




/*Navigation*/
header {
    height: 80px;
    display: flex;
    border: none;
    justify-content: space-between;
    align-items: center;
    width: 100%;  
    padding: 0 6.2%; 
    position: fixed;
    z-index: 1;
}
header i {
    font-size: 25px;
    border-radius: 50px;
    padding: 15px 15px;
    background-color: #F9F9F9;
}
nav > ul {
    display: flex;
    list-style: none;
    padding-left: 0; 
    margin: 0; 
}
.logo img {
    height: 50px;
    margin: 0;
    padding: 0;
}
.logo-phone img {
    height: 40px;
    margin: 0;
    padding: 0;
}



/*Nested-menu*/
.menu-pc {
    height: 80px;
}
.nested-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #191919;
    position: absolute;
    top: 0px;
    display: none; 
    opacity: 0.9;
    right: 0; 
    width: 100%;
    z-index: -1;  
} 
.nested-menu li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.nested-menu a {
    font-size: 23px;
    font-weight: 500;
    color: white;
    letter-spacing: 2px;
    text-decoration: none; 
}
.nested-menu a:hover {
    /* cursor: url('../images/cursor.png'), pointer; */
    border: 1px solid white;
    border-radius: 50px;
    padding: 15px 50px;
    text-decoration: none;  
}

/*Main image*/
.my-img {
    margin-bottom: 80px;
}
.my-img img {
    width: 100%;
    height: 100%;
    position: relative; 
    top: 80px;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
}
.my-img .go-down img  {
    width: 40px;
    height: 40px;
    opacity: 0.75;
    top: 80px;

}
.my-img i {
    position: relative;
    top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.85);
    font-size: 60px;
    padding: 80px 0;
}
.my-img a:hover {
    text-decoration: 0;
    cursor: pointer;

}
/* .my-img a {
    cursor: pointer;
    text-decoration: none;
} */
.my-img h1 {
    font-size: 40px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 140px;
    text-align: center;
    /* word-spacing: 15px; */
    /* line-height: 50px; */
    /* padding-bottom: 50px; */
    
}
.my-img h1 span i {
    font-size: 28px;
    margin: 0;
    padding: 20px 0 0 0;
    /* top: 1px; */
    
}

.my-img p {
    position: relative;
    top: 80px;
    display: block;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.9);
    font-size: 15px;
    /* padding: 0 15% 0 15%; */
    text-align: center;
    font-weight: 300;
    padding: 1% 25% 0.1% 25%;
}
.my-img span {
    font-weight: 800;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.85); 
    letter-spacing: 4px;
}
.my-img b {
    font-weight: 500;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.85); 
}
/* .my-img-phone h1 {
    font-size: 55px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 140px;
    text-align: center;
    word-spacing: 15px;
    line-height: 80px;
    padding-bottom: 50px;
} */
.my-img-phone p {
    position: relative;
    top: 70px;
    display: block;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.85);
    font-size: 18px;
    padding: 0 15% 0 15%;
    text-align: center;
    text-align-last: center;
    font-weight: 300;
    padding: 1% 15% 0.1% 15%;
}
.my-img-phone span {
    font-weight: 800;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.85); 
    letter-spacing: 4px;
}

/* .color */
.color-about-us {
    height: 170px;
    background-color: #F9F9F9;
    border: none;
}
.go-down {
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.go-down i {
    font-size: 70px;
    color:rgb(190, 152, 0);
}
.go-down i:hover {
    cursor: pointer;
}

/* Pakets  */
.pakets {
    display: flex;
    justify-content: center;
    padding: 1% 5% 0 5%; 
    flex-wrap: wrap;
}
.paket {
    margin: 20px 50px;
    padding: 0 20px;
    max-width: 430px;
  }
  .arrow {
    /* height: 20px; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }
  .arrow i {
    /* color: rgb(190, 152, 0); */
    color: rgba(0, 0, 0, 0.85);
    font-size: 27px;
  }
  .pakets h3 {
    font-size: 25px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    text-align: center;
    padding-bottom: 5px;
    /* text-transform: uppercase; */
  }
  .paket h3 p {
    text-transform: none;
    font-size: 18px;
  }
  /* .paket h3 b {
    font-weight: 700;
  } */
  .pakets p {
    font-size: 17px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.85);
    margin: 20px 0 10px 0;
    text-transform: uppercase;
  }
  .pakets p i {  
    color: rgba(0, 0, 0, 0.85);
    padding: 8px 20px 8px 0;
    font-size: 22px;
  }
 
    .list ul {
    list-style: none;
    padding: 0 0 50px 0; 
  }
   .list li {
    /* text-align: justify; */
    display: flex;
    padding-left: 0;
    font-size: 17px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.85);
    padding-bottom: 7px;
  }
  .list li i {
    color: rgba(0, 0, 0, 0.85);
    font-size: 18px;
    padding: 8px 30px 8px 0;
    
  }


/*offer-tittle*/
.offer-hdr {
    /* height: 200px; */
    background-color: #F9F9F9;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
}
.offer-hdr h1 {
    color: rgba(0, 0, 0, 0.85);
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    /* padding: 0 3% 0 3%; */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.offer-hdr p span {
    color: rgba(0, 0, 0, 0.85);
    font-size: 22px;
    font-weight: 500;
    margin: 0;
    padding: 3% 3% 0 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.offer-hdr i {
    color: rgba(0, 0, 0, 0.85);
    font-size: 22px;
    margin: 0;
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.offer-hdr h2 {
    color: rgba(0, 0, 0, 0.85);
    font-size: 30px;
    font-weight: 700;
    margin: 0;
    padding: 0 3% 0 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.offer-hdr h4 {
    color: rgba(0, 0, 0, 0.85);
    font-size: 33px;

}
/*offer-text*/
.new-offer {
    /* height: 800px; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10% 3% 10%;
    flex-wrap: wrap;
}
.reverse {
    flex-wrap: wrap-reverse;
}
.new-offer > section {
    margin: 0 4%;
}
.color-half {
    height: 100px;
}

.new-img img {
    max-height: 100%;
    max-width: 100%;
    width: 600px;
    background-repeat: no-repeat;
    background-size: cover;
    padding: none;
    border-radius: 100%;
    display: block;
}
.new-text {
    max-width: 600px;
}
.new-text .meta {
    width: 100%;
}
.new-text i {
    font-size: 30px;
    color: rgba(0, 0, 0, 0.85);
    padding-top: 30px;
}
.new-text h4 {
    font-size: 26px; 
    font-weight: 300;
    color: rgba(0, 0, 0, 0.85);
    margin: 20px 0 50px 0;
    text-align: center;    
}
.new-text h4 b {
    font-size: 26px; 
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
    margin: 20px 0 50px 0;
    text-align: center;    
}
.new-text p {
    font-size: 17px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.85);
    text-align: justify; 
    /* text-align-last: center;  */
    padding-bottom: 10px;
}
.new-text p i {
    font-size: 14px;
    text-align: justify; 
    padding-right: 15px;
}
.new-text ul {
    padding-bottom: 0px;
}
.new-text li {
    text-align: justify;
    font-size: 17px;
    display: flex; 
    /* padding-bottom: 0; */

}
.new-text li i {
    padding-right: 20px;
    font-size: 13px;

}
.new-text b {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 700;
    font-size: 18px;
}
.new-text span {
    color: rgba(0, 0, 0, 0.85);
    /* font-weight: 500; */
    font-size: 17px;
}
.new-text div {
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/* .new-text h5 {
    font-size: 21px; 
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin: 50px 0;
    text-align: center;
} */
.new-text button {
    /* border: 3px solid rgb(190, 152, 0); */
    border: 3px solid rgb(190, 152, 0);
    border-radius: 100%;
    padding: 57px 40px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    text-align: center;
    transition-duration: 0.6s;
    background-color: #F9F9F9;
}
.new-text a {
    color: rgb(190, 152, 0);
    font-size: 22px; 
    font-weight: 500;
    display: flex;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}
.new-text button:hover {
    background-color:rgb(190, 152, 0);
    color: white;
}

/* icons  */
.icons {
    /* height: 400px; */
    background-color: #F9F9F9;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 15% 10% 15%;
}
.icon-figure {
    display: block;
    height: 120px;
    width: 120px;
    margin: 100px 55px 70px 55px;
    justify-content: center;
    text-align: center;
}
.icon-img {
    height: 120px;
    width: 120px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    opacity: 0.8;
    transition: all 0.5s ease;
}
.icon-img:hover {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    opacity: 1;
    border-radius: 50%;
    transform: scale(2);    
    margin-bottom: 30px;
    cursor: url('../images/zoom.png'), pointer;
    box-shadow:0 0 12px 2px rgba(0, 0, 0, 0.13) inset; 
}
.inventory {
    background-image: url(../images/inwentaryzacja.png); 
}
.inventory:hover {
    background-image: url(../images/inwentaryzacja.jpg);
}
.demolition {
    background-image: url(../images/projekt-wyburzeń.png); 
}
.demolition:hover {
    background-image: url(../images/plan-wyburzen.jpg); 
}
.wall {
    background-image: url(../images/projekt-ścian-działowych.png); 
}
.wall:hover {
    background-image: url(../images/plan-ścian-działowych.jpg);
}
.function {
    background-image: url(../images/projekt-funkcjonalny.png);
}
.function:hover {
    background-image: url(../images/plan-funkcjonalny.jpg);
}
.models {
    background-image: url(../images/trójwymiarowy-model-cyfrowy.png);
}
.models:hover {
    background-image: url(../images/article-3d-model-kuchni.jpg); 
}
.visualization {
    background-image: url(../images/wizualizacje-3d.png);
}
.visualization:hover {
    background-image: url(../images/wizualizacje-3d.jpg); 
}
.project {
    background-image: url(../images/projekt-aranżacji.png);
}
.project:hover {
    background-image: url(../images/plan-wykonawczy-kompleksowy-aranżacja.jpg); 
}
.tiling {
    background-image: url(../images/projekt-posadzki.png);
}
.tiling:hover {
    background-image: url(../images/plan-posadzki.jpg);
}
.furniture {
    background-image: url(../images/projekt-mebli.png);
}
.furniture:hover {
    background-image: url(../images/projekt-mebli.jpg);
}
.ceiling{
    background-image: url(../images/projekt-funkcjonalny.png);
}
.ceiling:hover {
    background-image: url(../images/plan-sufitow-podwieszanych.jpg);
}
.lights{
    background-image: url(../images/projekt-oświetlenia.png);
}
.lights:hover {
    background-image: url(../images/plan-oświetlenia.jpg); 
}
.electrics {
    background-image: url(../images/wytyczne-elektryka.png); 
}
.electrics:hover {
    background-image: url(../images/wytyczne-elektryka.jpg);
}
.water {
    background-image: url(../images/wytyczne-wodno-kanalizacyjne.png);
}
.water:hover {
    background-image: url(../images/wytyczne-wodno-kanalizacjyjne.jpg);
}
.materials {
    background-image: url(../images/specyfikacja-materialowa.png);
}
.materials:hover {
    background-image: url(../images/lista.jpg);
    opacity: 0.9;
}
.author {
    background-image: url(../images/zadowolenie.png);
}
.author:hover {
    background-image: url(../images/nadzór-autorski.jpg);
}
.icon-figure h4 {
    color: rgba(0, 0, 0, 0.85);
    font-size: 20px;
    font-weight: 300;
    margin: 0;
    padding-top: 45px;
}

/* Mission*/
.mission {
    height: 280px;
    background-color: #191919;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.mission h3 {
    color: lightgray;
    font-size: 40px;
    font-weight: 600;
    border-bottom: 1px solid lightgray;
    padding-bottom: 5px;
    margin: 0;
}
.mission p {
    color: rgb(190, 152, 0);
    font-weight: 200;
    font-size: 28px;
    margin-bottom: 5px;
    margin-top: 0;
}
.mission .autor p {
    color: 	gray;
    font-size: 15px; 
    font-weight: 300;
}


/* text-gallery  */
 .text-gallery p {
    font-size: 19px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.85);
    text-align: center;
    margin: 0 20%;
 }
 .space {
    padding-bottom: 50px;
 }
 body {
    background-color: #F9F9F9;
    min-height: 100vh;
}
.container.gallery-container {
    background-color: #F9F9F9;
    color: #35373a;
    min-height: 100vh;
    padding: 30px 50px;

}
.tz-gallery {
    padding: 40px;
}
/* Override bootstrap column paddings */
.tz-gallery .row > div {
    padding: 15px;
}
.tz-gallery .lightbox img {
    width: 100%;
    border-radius: 50%;
    position: relative;
}
.tz-gallery .lightbox:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    opacity: 0;
    color: #fff;
    font-size: 26px;
    font-family: 'Glyphicons Halflings';
    content: '\e003';
    pointer-events: none;
    z-index: 9000;
    transition: 0.4s;
}
.tz-gallery .lightbox:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.85);
    content: '';
    transition: 0.8s;
    border-radius: 50%; 
}
.tz-gallery .lightbox:hover:after,
.tz-gallery .lightbox:hover:before {
    opacity: 1;
}
.baguetteBox-button {
    background-color: transparent !important;
}



/* opinie */

.testimonials {
    text-align: center;
    margin: 1% 30%;
    /* background: #f8f8f8; */
    position: relative;
    padding: 40px 60px; /* dodane, żeby zrobić miejsce na strzałki */
    box-sizing: border-box;
}

.testimonial {
    display: none;
    max-width: 700px;
    margin: auto;
}
.testimonial.active {
    display: block;
}

.testimonial img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 30px;
}

.testimonial p {
    font-style: italic;
    color:rgba(0, 0, 0, 0.8);
    font-size: 1.4em;
    padding: 0 10px;
    font-weight: 400;
}

.testimonial h4 {
    margin-bottom: 10px;
    font-size: 22px;
}

.testimonial span {
    font-size: 1.45em;
}

/* --- POPRAWIONE STRZAŁKI --- */
.controls button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;          /* tło, żeby nie wchodziły na tekst */
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.prev { left: 15px; }
.next { right: 15px; }

/* --- MOBILE --- */
@media (max-width: 768px) {
    .testimonials {
        margin: 3% 1%;
        padding: 30px 40px; /* mniejsze marginesy ale dalej miejsce na guziki */
    }

    .controls button {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .testimonial p {
        font-size: 1.3em;
    }
}









/* FOOTER */
footer {
    /* height: 1150px; */
    background-image: url(../images/projektanci-wnętrz-w-Krakowie-w-Małopolsce.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
footer h3 {
    font-size: 40px;
    font-weight: 600;
    color: #aaaaaa;
    margin-top: 300px;
}
footer p {
    font-size: 30px;
    font-weight: 200;
    color: #aaaaaa;
}
footer a {
    font-size: 35px;
    font-weight: 200;
    color: #aaaaaa;
    text-decoration: none;
}
footer a:hover {
    text-decoration: none;
    color: white;
}
.social-media {
    padding-top: 30px;
    padding-left: 0;
    margin:0;
    list-style: none;
    display: flex;
    justify-content: center;
}
footer .social-media i {
    font-size: 40px;
    color: #aaaaaa;
    padding: 15px 15px;

}
footer .social-media i:hover {
    color:white;

}


/* go-up */
.go-up {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
}

.go-up i {
    color: gray;
    font-size: 60px; 
    /* font-weight: 900; */
    padding: 48px 0;   
}
.go-up i:hover {
    color:rgb(190, 152, 0);
}


/*copyright*/
.copyright {
    /* height: 50px; */
    display: block;
    align-items: center;
    justify-content: center;
    
}
.copyright p {
    font-size: 15px;
    font-weight: 400;
    color: gray;
    text-align: justify;
    text-align-last: center;
    padding: 0 20% 0 20%;
    margin: 0;
    padding-bottom: 10px;

}
.copyright a {
    font-size: 15px;
    font-weight: 400;
    color: gray;
    transition-duration: 0.3s;
}
.copyright a:hover {
    color: rgb(155, 155, 155);
}
.copyright b {
    letter-spacing: 2px;
}

/*offer-text-BLOG   BLOG   BLOG   BLOG V  BLOG   BLOG */
span {
    font-size: 25px;
    font-weight: 300;

}
.offer-hdr h3 {
    display: block;
    justify-content: center;

}
.blog {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: #F9F9F9;
}
.blog-figure {
    /* height: 800px; */
    
    display: block;
    justify-content: center;
    align-items: center;
    padding: 1%;
    flex-wrap: wrap;
}
.blog-figure > section {
    margin: 0 4%;
    max-width: 400px;
}
.blog-img img {
    max-height: 100%;
    max-width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: none;
    border-radius: 100%;
}
.blog-botton h6 {
    font-size: 18px; 
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    margin: 20px 0;
    text-align: center;
}
.blog-botton button {
    border: 3px solid rgb(190, 152, 0);
    border-radius: 100%;
    padding: 30px 15px;
    margin-bottom: 30px;
    transition-duration: 0.7s;
    display: flex;
    justify-content: center;
    text-align: center;
}
.blog-botton a {
    display: flex;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}
.blog-botton a button {
    color: rgb(190, 152, 0);
    font-size: 16px; 
    font-weight: 500;
}
.blog-botton button:hover {
    background-color:rgb(190, 152, 0);
    color: white;
}
/* go-up-blog */
/* .go-up-blog {
    height: 200px;
    background-color: #F9F9F9;
    display: flex;
    justify-content: center;
    align-items: center;
}
.go-up-blog i {
    color: #4f4f4f;
    font-size: 60px; 
    padding: 48px 0;   
}
.go-up-blog i:hover {
    color:rgb(190, 152, 0);
    cursor: pointer;
} */

/*copyright-blog*/
.copyright-blog {
    height: 50px;
    background-color: #F9F9F9;
    display: block;
    align-items: center;
    justify-content: center;
    padding-bottom: 3%;
}
.copyright-blog p {
    font-size: 15px;
    font-weight: 400;
    color: #4f4f4f;
    text-align: center;
    
}

/* article */
.span-phone span {
    display: block;

}
.article {
    /* height: 2000px; */
    background-color: #F9F9F9;
    display: flex;
    justify-content: center;
    align-items: center;   
    flex-wrap: wrap;
    margin: 0 3%;
}
.article section {
    max-width: 850px;
}
.article img {
    width: 100%;
    height: 100%;
    /* margin: 20px 0; */
}
.article .land {
    display: flex;
}
.article .land {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.article .land div {
    max-width: 400px;
}
.article .circle-div {
    text-align: center;
}
.article .land img {
    max-width: 400px;
}

.foto-information {
    font-size: 13px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    cursor: pointer;
}
h4 {
    font-size: 28px; 
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
    margin: 50px 0;
    /* text-align: center; */
}
.article p {
    font-size: 18px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.9);
    text-align: justify;
    padding: 20px 0 0 0;
}
.article p b {
    font-size: 22px;
}
.article span {
    font-weight: 600;
    font-size: 19px;
}
.article .blog-read-more {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.6);
    /* text-decoration: none; */
    cursor: pointer;
    font-weight: 500;
    padding-left: 8px;
}
 .color {
    height: 100px;

}






.big-button button {
    border: 6px solid rgb(190, 152, 0);
    border-radius: 100%;
    padding: 95px 25px;
    transition-duration: 0.7s;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 40px;
}
.big-button a {
    display: flex;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}
.big-button a button {
    color: rgb(190, 152, 0);
    font-size: 24px; 
    font-weight: 600;
}
.big-button button:hover {
    background-color:rgb(190, 152, 0);
    color: white;
}



@media(mIN-width: 3000px) {
    .my-img p {
        padding: 1% 34% 0.1% 34%;
    }
    .text-gallery p {
        margin: 0 35%;
     }
     .baner div h3 {
        padding-bottom: 40px;
        padding-left: 25%;
        padding-right: 25%;
    }
}


@media(min-width: 2560px) {
    .copyright p {
        padding: 0 30% 0 30%;
        margin: 0;
        text-align: justify;
        text-align-last: center;
        padding-bottom: 10px;
    }
    /* .copyright-blog p {
        padding: 0 30% 0 30%;
        margin: 0;
        text-align: justify;
        text-align-last: center;
        padding-bottom: 10px;
    } */
}
@media(max-width: 768px) {
    body {
        padding: 0;
    }
}
@media (max-width:767px) {
    header {
        height: 70px;
        background-color: none;
    }
    .logo {
        display: none;
    }
    .logo-phone {
        display: block; 
    }
    .menu-pc {
        display: none;
    }
    .menu-phone {
        display: block;
        height: 60px;
    }
    li .phone-hidden {
        display: none;
    }
    .nested-menu a:hover {
        border: 2px solid white;
        border-radius: 30px;
        padding: 10px 25px;
    }
    .my-img {
        display: none;
    }
    .color-about-us {
        height: 50px;
    }
    .my-img-phone img {
        display: flex;
        position: relative; 
        top: 70px;
        left: 0;
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        max-height: 100%;
    }
    .my-img-phone h1 {
        font-size: 30px;
        line-height: 40px;
        padding-bottom: 5px;
        font-weight: 800;
        margin: 0;
        padding: 0 2% 0 2%;

    }
    .my-img-phone h1 span {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 3px;
        margin: 0;
        padding: 0 2% 0 2%;
    
    }
    .my-img-phone h1 span i {
        font-size: 20px;
        margin: 0;
        padding: 0;
    }
    
    .my-img-phone p {
        font-size: 16px;
        text-align: justify;
        padding: 5%;
    }
    .pakets {
        flex-wrap: wrap;
        padding: 0; 
        margin: 0; 
    }
    .pakets h3 {
        font-size: 28px;
    }
    .paket {
        flex-wrap: wrap;
        padding: 0 3% 0 3%; 
        margin: 0 3% 0 3%;
    }
    .arrow i {
    padding-top: 50px;
  }
    .list ul {
        padding-bottom: 30%;
      }
      .offer-hdr h2 {
        font-size: 36px;
        text-align: center;
    }
    .offer-hdr h3 {
        /* height: 100px; */
        font-size: 35px;
        padding-top: 30px;
        text-align: center;
    }
    .offer h4 {
        font-size:25px;

    }
    .new-offer {
        padding: 15% 1%;
    }
    .new-img img {
        margin-bottom: 5%;
        margin-top: 10%;
    }
    .new-text p {
        font-size: 16px;
    }
    .new-text h4 {
        font-size: 25px;
        font-weight: 600;
        text-align: center;
    }
    .new-text li {
        text-align: justify;
        font-size: 16px;
        display: block; 
    }
    .new-text button {
        padding: 37px 22px;
        margin-top: 40px;
    }
    /* .new-text h5 {
        font-size: 17px;
        font-weight: 500;
    } */
    .new-text a {
        font-size: 18px; 
    }
    .icons {
        margin: 0 3%;;
    }
    .icon-figure {
        margin: 80px 13px 65px 13px;
    }
    .icon-img {
        height: 100px;
        width: 100px;     
    }
    .icon-img:hover {
        transform: scale(1.5);   
    }
    .icon-figure h4 {
        padding: 30px 0;
        text-align: center;
        font-size: 18px;
    }
    .mission h3 {
        font-size: 30px;
        border: none;
    }
    .mission p {
        font-size: 20px;
    }
    .mission .autor p {
        font-size: 12px;
    }
    .text-gallery p {
        font-size: 16px;
        margin: 0 5%;
        text-align: justify;
        text-align-last: center;
    }
    .container.gallery-container {
        padding: 30px 15px;

    }
    .tz-gallery {
        padding: 5px;
    }
    .offer > section {
        width: 410px;
        padding: 5%;
    }
    .offer p {
        font-size: 16px;
    }
    .baner {
        padding: 5% 10%;
    }
    .baner i {
        font-size: 80px;
        padding: 10px;
    }
    .baner div h3 {
        font-size: 25px;
    }
    .baner p {
        font-size: 18px;
        font-weight: 400;
    }
    footer section h3 {
        font-size: 30px;
    }
    footer section p {
        font-size: 20px;
    }
    .color-about-us {
        height: 15px;
    }
    .span-phone h3 span {
        display: none;
    
    }
    /* .article .land img{
        width: 100%;
    } */
    .foto-information {
        font-size: 9px;    
    }
    /* .copyright {
        
    } */
    .copyright p {
        text-align: justify;
        text-align-last: center;
        padding: 0 3% 0 3%;
        padding-bottom: 10px;

    }
}
  @media (min-width:767px) {
    .my-img-phone {
        display: none;
    }

    .logo {
        display: block;
    }
    .logo-phone {
        display: none;
    }
    .menu-pc {
        display: block;
    }
    .menu-phone {
        display: none;
    }
}