html, body{
    width: 100%;

    margin: 0;
    padding: 0;
    box-sizing: border-box;
background-color: white;
font-family: "Jacques Francois", serif;
font-weight: 400;
font-style: normal;
overflow-x: hidden;



}


a{
    text-decoration: none;
    color: white;
}
.black_anchor{
    text-decoration: none;
    color:#151315;
}

.is-visibility{
    visibility: visible;
    }

.is-hidden{
        visibility: hidden;
    }
.header_relative_wrapper{
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
    

}
.pre_navigation{
    width: 100%;
  
   display: flex;
  
   position: relative;

 

  }
  .opal{
    position: absolute;
    width: 100vw;
    height: 20vh;
  
    top: 0;

    z-index: 0;
    transform: rotate(5deg);
	transform-origin: top right;
 
  background-image: linear-gradient(199deg, rgba(228, 196, 229, 0.374) 20%, rgba(138, 183, 198, 0.297) 34%, rgba(208, 208, 177, 0.388) 67%, rgba(216, 194, 169, 0.388) 100%),
 radial-gradient(circle, rgba(244, 221, 244, 0.351) 4%, rgba(243, 238, 237, 0.34) 34%, rgba(245, 245, 230, 0.345) 67%, rgba(158, 193, 238, 0.362) 100%);
  box-shadow: -130px 0 80px 40px white, 50px 0 50px 25px rgba(192, 192, 192, 0.378),100px 0 80px 40px white,;
  animation-delay: 5s;
  filter:blur(1.5rem);
    animation: opal-effect infinite ease 10s;
  }
  @keyframes opal-effect{
    from {
      right: -15vw;
    }
    to {
      right: 100vw;
    }


  }
  @media screen and (min-width: 300px) and (max-width: 1023px){
  .opal{
    display: none;
  }
    
  }
   @media screen and (min-width: 300px) and (max-width: 376px){
    .pre_navigation{
      width: 100%;
     
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
    }
   }
   @media screen and (min-width: 377px) and (max-width: 767px){
    .pre_navigation{
      width: 100%;
     
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
    }
   }
   @media screen and (min-width: 768px) and (max-width: 1023px){
    .pre_navigation{
      width: 100%;
     
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
    }
   }
.prenavigation_contact{
    width: 33%;
    display: flex;
    

}
@media screen and (min-width: 300px) and (max-width: 376px){
  .prenavigation_contact{
   
    display: none;

}
 }
 @media screen and (min-width: 377px) and (max-width: 767px){
  .prenavigation_contact{
   
    display: none;

}
 }
 @media screen and (min-width: 768px) and (max-width: 1023px){
  .prenavigation_contact{
   
    display: none;

}
 }
.prenavigation_information_list{
    display: flex;
    color:#151315;
    justify-content: center;
    align-items: flex-start;
    list-style-type: none;
    flex-direction:column;
    gap: 20px;
    font-size: large;
    font-weight: bold;
    font-family: monospace;
}
.prenavigation_logo{
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .prenavigation_logo{
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.prenavigation_logo img{
  width: 280px;
  height: 200px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .prenavigation_logo{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.prenavigation_logo img{
  width: 280px;
  height: 200px;
}
}
.head_h1{
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 26px;
    
  
 
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .head_h1{
    
    font-size: 22px;
  text-align: center;
  position: relative;
  z-index: 2;
 
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .head_h1{
    
    font-size: 22px;
  text-align: center;
  position: relative;
  z-index: 2;
}
 }
 @media screen and (min-width: 768px) and (max-width: 1023px){
  .head_h1{
    
    font-size: 22px;
  text-align: center;
  position: relative;
  z-index: 2;
 
}
 }
.head_h2{
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 24px;
    margin-top: 5%;
}
.head_h3{
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: 22px;
  margin-top: 5%;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .head_h2{
    text-align: center;
    font-size: 20px;
    position: relative;
    z-index: 2;
   
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .head_h2{
    text-align: center;
    font-size: 20px;
   
    position: relative;
    z-index: 2;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .head_h2{
    text-align: center;
    font-size: 20px;
    position: relative;
    z-index: 2;
   
}
}
.text{
    width: 80%;
    font-size: 20px;
    line-height: 1.4;
    margin-left: 5%;
}
.text_promotion{
    width: 100%;
    font-weight: normal;
    font-size: 25px;
    line-height: 1.4;
    margin-left: 5%;
    margin-bottom:5%;
}
.mosaic{
    display: flex;

    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    width: 10%;
    height: 100%;

   
    
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .mosaic{
    display: none;

}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .mosaic{
    display: none;

}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .mosaic{
    display: none;

}
}
.navigation{
    color: black;
    font-weight:900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
    width: 100%;
    height: 150px;
    position: relative;

    /* background-color:#9e5f0038; */
    /* background-color: #20d4c25d; */
    background-color: #78938c4e;

}
.navigation a{
  color: black;
}
.navigation_promotion a{
  color: black;
}
.navigation_contact a{
  color: black;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .navigation{
    display: none;

}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .navigation{
    display: none;

}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .navigation{
    display: none;

}
}
.we_are_here{
    width: 10%;
    margin-left: 1%;
    left: 0;
    cursor: pointer;

}

.we_are_here_span{
    color: black;
    font-weight:bolder;
    text-transform: uppercase;
    
}
.we_are_here_span:hover{
    color: #902000;
}
.navigation-ul{
  
    font-weight: bolder;
    width: inherit;
    font-size: large;
    list-style-type: none;
    display: flex;
 justify-content: center;
    align-items: center;
    gap: 20px;
   

 

    
}
.li_navigation{
  cursor: pointer;
}
.span_navigation{
  color: inherit;
}
.span_navigation-bathroom{
  color: white;
}
.span_navigation:hover{
    color:#902000;
  }
.important_li{
    cursor: pointer;
    
    
    
    
}
.important_li:hover{
    color: #902000;
}
.navigation_second_deep_container{
    position: absolute;
    width: 10%;
    height: inherit;
    bottom: -103%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color:rgba(48, 5, 88, 0.167); */
    background-color:inherit;
    /* border: 1px solid black; */



    
}


.navigation_second_deep{
 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    color: inherit;
    list-style-type: none;
    gap: 40px;

}
@media screen and (min-width: 1024px) and (max-width: 1439px){
  .navigation_second_deep_container{
    width: 15%;
    left: 40%;
  }
}
.second-deep-li{
    text-transform: uppercase;
    cursor: pointer;
}
.span_second_deep:hover{
    color:#902000;
}

.container_with_map_wrapper{
    width: 60%;
   visibility: hidden;
    
    padding-bottom: 5%;
    /* background-color:rgba(48, 5, 88, 0.167); */
    background-color:#9e5f0038;
    border: 2px solid black;
    z-index: 999;
}
.container_with_map_wrapper.is-visibility {
  visibility: visible;
  }
.container_with_map{
    display: flex;
    background-color: black;
    padding-bottom: 4%;
    width: 95%;
   
}
.information_list{
    display: flex;
    color: white;
    justify-content: center;
    align-items: flex-start;
    list-style-type: none;
    flex-direction:column;
    gap: 20px;
    font-size: larger;

}
.navigation_img{
  display: none;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .navigation_img{
  display: flex;
  width: 100%;
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .navigation_img{
    display: flex;
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .navigation_img{
    display: flex;
    width: 100%;
  }
}
.navigation_static_image{
    background-image: url("../assets/Zdjecie-wejscia-do-salonu-strefam2-homeConcept.webp");
    background-size: cover;
    background-attachment: fixed;
    background-position: 100%;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 1048px;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .navigation_static_image{
   background-image: none;
   width: 100%;
    height: 400px;
    z-index: 0;
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .navigation_static_image{
    background-image: none;
    width: 100%;
     height: 500px;
     z-index: 0;
 }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .navigation_static_image{
    background-image: none;
    width: 100%;
    height: 500px;
    z-index:0;
    
    
 }
}

.main_relative_wrapper{
    position:relative;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
  

}
@media screen and (min-width: 300px) and (max-width: 376px){
  .main_container{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   

}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .main_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
 
 }
}
.mosaic_main{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: absolute;
    right: 0;
   top:0;
    z-index: 0;
    width: 10%;
    height: 100%;
    overflow: hidden;
    
   
    
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .mosaic_main{
    display: none;

}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .mosaic_main{
    display: none;

}
}
.show_demo_container{
    display: flex;
    position: relative;
    margin-top: 10%;
    width: 100%;
    height: 500px;
    z-index: 5;
   
}


.demo_container{
    display: flex;

  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
    width: 50%;
    height: 500px;
    overflow: hidden;
    z-index: 5;
 
}

.span_text_asortiment{
    position: absolute;
    left: 5%;
    top: 20%;
    text-transform: uppercase;

   color: white;
    font-size: 50px;
    text-shadow: 2px 2px rgb(180, 19, 19);
}
.span_text_design{
    position: absolute;
    left: 5%;
    top: 40%;
    text-transform: uppercase;

   color: white;
    font-size: 50px;
    text-shadow: 2px 2px rgb(180, 19, 19);
}
.span_text_enployed{
    position: absolute;
    left: 5%;
    top:60%;
    text-transform: uppercase;

   color: white;
    font-size: 50px;
    text-shadow: 2px 2px rgb(180, 19, 19);
}
.img_demo_img{
  display: none;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .img_demo_img{
    display: flex;
    width: 100%;

  }
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .img_demo_img{
    display: flex;
    width: 100%;

  }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .img_demo_img{
    display: flex;
    width: 100%;

  }
}
.img_demo{
    width: 100%;
    height: 700px;
    position: relative;
    z-index: 2;
    background-attachment: fixed;
    background-image: url("../assets/zdjecie-aranzacji-szafka-i-lustro-mieszczacej-sie-w-salonie-strefam2.webp");
    background-size: cover;

}
@media screen and (min-width: 300px) and (max-width: 376px){
  .img_demo{
   background-image: none;
   height: 400px;
    
  }
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .img_demo{
    background-image: none;
    height: 550px;
     
   }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .img_demo{
    background-image: none;
    height: 550px;
     
   }
}

.squares{
    
    box-shadow: 0 0 2px black;
    height: 10px;
    width: 9px;

    margin: 1px;
}
.squaresMosaic{
    box-shadow: 0 0 2px rgb(243, 238, 238);
     height: 20px;
    width: 20px;
    margin: 1px;  
}
.squaresFooter{
    box-shadow: 0 0 2px rgb(243, 238, 238);
     height: 20px;
    width: 20px;
   
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .squaresFooter{
    box-shadow: 0 0 2px rgb(243, 238, 238);
     height: 40px;
    /* width: calc(370px/140); */
    width: 40px;
   
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .squaresFooter{
    box-shadow: 0 0 2px rgb(243, 238, 238);
     height: 40px;
    /* width: calc(370px/140); */
    width: 40px;
   
}
}
.text_container{
    width: 100%;
    display: flex;
    padding-bottom: 5%;
    padding-top: 5%;


 
    
}
.text_container_second-section{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}
@media screen and (min-width: 300px) and (max-width: 376px){
  .text_container_second-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .text_container_second-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
}
.text_for_slaider{
    width: 50%;

    
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .text_for_slaider{
    width: 100%;

    
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .text_for_slaider{
    width: 100%;

    
}
}
.text_container_paragraph{
    font-size: 20px;
    line-height: 1.8;
    margin-left: 5%;
   
}
@media screen and (min-width: 377px) and (max-width: 767px){
.text_container_paragraph{
  width: 80%;
    font-size: 20px;
    line-height: 1.8;
    margin-left: 5%;
   
}
}
.producent_img_container{
    width: 50%;
    margin-left: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    
   

}

@media screen and (min-width: 300px) and (max-width: 376px){
  .producent_img_container{
   width: auto;
    margin-left: 0%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .producent_img_container img{
    width: 300px;
  }

}
@media screen and (min-width: 377px) and (max-width: 767px){
  .producent_img_container{
    width: 100%;
     margin-left: 0%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
    
 
 }
  .producent_img_container img{
      width: 300px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1439px){
  .producent_img_container img{
    width: 330px;
  }

}

.hue_img{
  display: none;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .hue_img{
    display: flex;
    width: 100%;
  }
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .hue_img{
    display: flex;
    width: 100%;
  }
}
.hue_rotate_animation{
    background-image: url("../assets/zdjecie-aranzacji-lazienki-strefam2.webp");
    background-size: cover;
    background-position: 100%;
    width: 100%;
    height: 960px;
    /* background-attachment: fixed; */
    animation: hue-rot 8s infinite;
    padding-bottom: 5%;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    
    
}

@media screen and (min-width: 300px) and (max-width: 376px){
  .hue_rotate_animation{
    background-image:none;
  
    width: 100%;
     height: auto;
padding-bottom: 0;
    animation: hue-rot 8s infinite;
    
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    position: relative;
 
    
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .hue_rotate_animation{
    background-image:none;
  
    width: 100%;
     height: auto;
padding-bottom: 0;
    animation: hue-rot 8s infinite;
    
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    position: relative;
 
    
}
}
@keyframes hue-rot{
    0% {
        filter: hue-rotate(0deg);
      }
    15% {
        filter: hue-rotate(25deg);
    }
    25% {
        filter: hue-rotate(50deg);
    }
      
      50% {
        filter: hue-rotate(100deg);
      }
    65%{
        filter: hue-rotate( 50deg);
    }
    75% {
        filter: hue-rotate(25deg);
      }  
      100% {
        filter: hue-rotate(0deg);
      }
    }

    .span_key_word{
        width: 30%;
        height: 20%;
        background-color: #d9e3e48d;

        border: 2px doted black;
        cursor: pointer;
        margin-top: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        font-weight: 900;
        text-transform: uppercase;

    }
    @media screen and (min-width: 300px) and (max-width: 376px){
      .span_key_word:first-of-type{
        position: absolute;
        top: 2%;;
        width: 60%;
        height: 20%;
     

    }
    .span_key_word:nth-of-type(2){
      position: absolute;
        top: 25%;;
        width: 60%;
        height: 20%;
    }
    .span_key_word:last-of-type{
      position: absolute;
        top: 47%;;
        width: 60%;
        height: 20%;
    }
    }
    @media screen and (min-width: 377px) and (max-width: 767px){
      .span_key_word:first-of-type{
        position: absolute;
        top: 2%;;
        width: 60%;
        height: 20%;
     

    }
    .span_key_word:nth-of-type(2){
      position: absolute;
        top: 25%;;
        width: 60%;
        height: 20%;
    }
    .span_key_word:last-of-type{
      position: absolute;
        top: 45%;;
        width: 60%;
        
    }
  }
/* ================================================= FOOTER================================================================ */

.footer_container_wrapper{
    width: 100%;
  
    height: auto;
    
    padding-bottom: 2%;
    background-color: #151315;
    display: flex;
   

    color: white;

}
@media screen and (min-width: 300px) and (max-width: 376px){

  .footer_container_wrapper{
    width: 100%;
  
    height: auto;
  
    background-color: #151315;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: white;

}
}
@media screen and (min-width: 377px) and (max-width: 767px){

  .footer_container_wrapper{
    width: 100%;
  
    height: auto;
  
    background-color: #151315;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: white;

}
}
.footer_information{
  width: 33%;
}
@media screen and (min-width: 300px) and (max-width: 376px){

  .footer_information{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    
}
}
@media screen and (min-width: 377px) and (max-width: 767px){

  .footer_information{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    
}
}

.footer_information_list{

    margin-top: 15%;
    display: flex;
    color: white;
    justify-content: center;
    align-items: flex-start;
    list-style-type: none;
    flex-direction:column;
    gap: 20px;
    font-size: larger;
    font-family: monospace;
}
.address{
    color: white;
    text-decoration: none;
}
.footer_logo{
    width: 33%;
    display: flex;
    flex-direction: column;
 
    justify-content:center;
    align-items:center;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .footer_logo{
    width: 100%;
    display: flex;
    flex-direction: column;
 
    justify-content:center;
    align-items:center;
}
.footer_logo img{
  width: 280px;
  height: 200px;
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .footer_logo{
    width: 100%;
    display: flex;
    flex-direction: column;
 
    justify-content:center;
    align-items:center;
}
.footer_logo img{
  width: 280px;
  height: 200px;
}
 
}
.mosaic_footer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20px;
    overflow: hidden;
}

.footer_law{
    margin-top: 10%;
    cursor: pointer;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .footer_law{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: auto;
   
  
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .footer_law{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: auto;
   
  
}
 
}


.d_flex{
    display: flex;
}
.d_none{
    display: none;
}


/* =========================================KUCHNIA======================================================= */
.navigation_static_image_kitchen{
    background-image: url("../assets/zdjecie-ekspozycji-baterii-kuchennych-w-salonie-strefam2.webp");
    background-size: cover;
    background-attachment: fixed;
    background-position: 100%;
    z-index: 2;
    width: 100%;
    height: 700px;
    position: relative;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .navigation_static_image_kitchen{
   background-image: none;
   width: 100%;
    height: 350px;
    z-index: 0;
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .navigation_static_image_kitchen{
    background-image: none;
    width: 100%;
     height: 400px;
     z-index: 0;
 }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .navigation_static_image_kitchen{
    background-image: none;
    width: 100%;
    height: 500px;
    z-index: 0;
    
 }
}
.navigation_kitchen{
  color: white;
    font-weight:900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
    width: 100%;
    height: 150px;
    position: relative;
    
    background-color:#454c6044;

}
@media screen and (min-width: 300px) and (max-width: 376px){
  .navigation_kitchen{
    display: none;

}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .navigation_kitchen{
    display: none;

}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .navigation_kitchen{
    display: none;

}
}
.navigation_second_deep_container_kitchen{
    position: absolute;
    width: 10%;
    height: inherit;
    bottom: -103%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color:rgba(48, 5, 88, 0.167); */
    background-color:#454c6044;
    /* border: 1px solid black; */
}


.main_relative_wrapper_kitchen{
    position:relative;
    width: 100%;
    
    padding-top: 5%;

}
@media screen and (min-width: 300px) and (max-width: 376px){
  .main_relative_wrapper_kitchen{
  
   
    padding-top: 20%;
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .main_relative_wrapper_kitchen{
    padding: 0;
 }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .main_relative_wrapper_kitchen{
    padding: 0;
 }
}
.silver_glass_imitation{  
    position: absolute;
    top: 0;
    right:7%;
   width: 15%;
   height: 100%;
   background-image:linear-gradient(to left, #c5c6c8, #848ca1, #d8dee9,#454c60,#2e3240,#f0edf3);
   z-index: 0;


}
.text_container_bathroom{
  width: 100%;
  padding-bottom: 5%;
    padding-top: 5%;
}
.text_container_kitchen{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5%;
    padding-top: 5%;
}
.kitchen_sink_wall{
    background-color: #151315;
    position: relative;
}

.sink_button_first{
    position: absolute;
    top: 35%;
    left: 41.5%;
    background-color:#0fc33f;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 1;
}
.sink_button_second{
    position: absolute;
    top: 27%;
    right:5%;
    background-color:#0fc33f;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
}
.sink_button_third{
    position: absolute;
    top: 40%;
    right:20%;
    background-color:#0fc33f;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  
  .sink_button_first{
  display: none;}

.sink_button_second{
   display: none;
}
.sink_button_third{
  display: none;
}
  }
  @media screen and (min-width: 377px) and (max-width: 767px){
    .sink_button_first{
      display: none;}
    
    .sink_button_second{
       display: none;
    }
    .sink_button_third{
      display: none;
    }
  }
.sink_presentation_first{
    position: absolute;
    top: 25%;
    left: 6%;
    width: 35%;
    background-color: #f0edf3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
    border: 2px solid black;
}
@media screen and (min-width: 768px) and (max-width: 1025px){
  .sink_presentation_first{
    top: 20%;
    left: 20%;
    width: 70%;
    z-index: 2;
  }
  
  
  .sink_presentation_first img{
    width: 150px;
    height: 100px;
 }
}
@media screen and (min-width: 1026px) and (max-width: 1439px){
  .sink_presentation_first{
    top: 20%;
    left: 20%;
    width: 70%;
    z-index: 2;
  }
  
  
  .sink_presentation_first img{
    width: 150px;
    height: 100px;
 }
}
@media screen and (min-width: 1026px) and (max-width: 1439px){
  .sink_presentation_first{
    top: 20%;
    right: 10%;
    width: 70%;
    z-index: 2;
  }
  
  
  .sink_presentation_first img{
    width: 150px;
    height: 100px;
 }
}
.sink_presentation_second{
    position: absolute;
    top: 15%;
    right: 10%;
    width: 35%;
    width: 40%;
    background-color: #f0edf3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
    border: 2px solid black;
}
@media screen and (min-width: 768px) and (max-width: 1025px){
  .sink_presentation_second{
    top: 20%;
    right: 10%;
    width: 70%;
    z-index: 2;
  }
  
  
  .sink_presentation_second img{
    width: 150px;
    height: 100px;
 }
}
@media screen and (min-width: 1023px) and (max-width: 1439px){
  .sink_presentation_second{
    top: 20%;
    right: 10%;
    width: 70%;
    z-index: 2;
  }
  
  
  .sink_presentation_second img{
    width: 150px;
    height: 100px;
 }
}
.sink_presentation_third{
    position: absolute;
    top: 45%;
    right: 15%;
    width: 60%;
 
    background-color: #f0edf3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
    border: 2px solid black;
}
@media screen and (min-width: 768px) and (max-width: 1025px){
  .sink_presentation_third{
    top: 60%;
    right: 10%;
    width: 55%;
    z-index: 2;
  }
  
  
  .sink_presentation_third img{
    width: 150px;
    height: 100px;
 }
}
/* =====================================ŁAZIENKA========================================================== */
.navigation_static_image_bathroom{
    background-image: url("../assets/wnetrze-salonu-strefaM2-lustra.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    z-index: 2;
    width: 100%;
    height: 700px;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .navigation_static_image_bathroom{
   background-image: none;
   width: 100%;
    height: 400px;
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .navigation_static_image_bathroom{
    background-image: none;
    width: 100%;
     height: 500px;
 }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .navigation_static_image_bathroom{
    background-image: none;
    width: 100%;
    height: 500px;
    
 }
}
.navigation_img_bathroom{
  display: none;
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .navigation_img_bathroom{
  display: flex;
  width: 100%;
}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .navigation_img_bathroom{
    display: flex;
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .navigation_img_bathroom{
    display: flex;
    width: 100%;
  }
}
.navigation_bathroom{
    color:white;
    font-weight:900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
    width: 100%;
    height: 150px;
    position: relative;
 
    background-color:#5b3c315d; 
}
@media screen and (min-width: 300px) and (max-width: 376px){
  .navigation_bathroom{
    display: none;

}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .navigation_bathroom{
    display: none;

}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .navigation_bathroom{
    display: none;

}
}
.navigation_second_deep_container_bathroom {
    position: absolute;
    width: 10%;
    height: inherit;
    bottom: -103%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:#5b3c315d;
    /* border: 1px solid black; */
}
.main_relative_wrapper_bathroom{
  position:relative;
  width: 100%;
  padding-top: 5%;
  padding-bottom: 5%;

}
/* ===========================LIGHTBOX======================================================================== */
.modal {
    visibility: hidden;
  
    position: fixed;
    top: 0;
    
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), black);
    width: 100%;
    height: 100%;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }
  .modal-content{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5%;
  
  }
  
  .mySlides {
    
    display: none;
  

}
@media screen and (max-width: 376px){
  .modal-content{
    margin-bottom: 70%;

  } 
  .mySlides{
    
    display: none;
    width: 100%;
    height: 300px;
    
  }
.slaiderSlaid{

  width: 100%;
  height: 300px;
  object-fit: contain;
}
}
@media screen and (min-width: 377px) and (max-width: 767px) {
  .modal-content{
    margin-bottom: 50%;

  } 
  .mySlides{
    
    display: none;
    width: 100%;
    height: 350px;
    
  }
.slaiderSlaid{

  width: 100%;
  height: 350px;
  object-fit: contain;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .modal-content{
    margin-bottom: 10%;

  } 
  .mySlides{
    
    display: none;
    width: 100%;
    height: auto;
    
  }
.slaiderSlaid{

  width: 100%;
  height: 400px;
  object-fit: contain;
}
}
@media screen and (min-width: 1024px) and (max-width: 1699px){
  .modal-content{
    margin-bottom: 40%;

  }  
  
  .mySlides{
    
    display: none;
    max-width: 70%;
    height: 300px;
    
  }
.slaiderSlaid{

  width: 100%;
  height: 300px;
  object-fit: contain;
}
}
@media screen and (min-width: 1700px){
  /* .modal-content{
    /* margin: 50vh auto; */

  }  */
  .mySlides{
    
    display: none;
    width: 100%;
    height: auto;
    
  }
.slaiderSlaid{

  width: 100%;
  height: 600px;
  object-fit: contain;
}

.gallery {
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
  
   
  }
  .gallery_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    list-style-type: none;
   

  }
  .gallery_list-item {
    width: 30%;
    height: 300px;
    box-shadow: 2px 2px 2px grey;
    cursor: pointer;
    background-image: url("../assets/logo-strefam2.svg");
    background-repeat: no-repeat;
    background-position:right 5% top 50%;
    background-size: 100px;
 
  }


  @media screen and (max-width: 376px) {
    .gallery_list {
    
      flex-direction: column;
     margin-right: 10%;
      
    }
    .gallery_list-item {
      display: flex;
      justify-content: center;
      align-items: center;
    
      width: 200px;
      height: 300px;
      box-shadow: 2px 2px 2px grey;
      background-repeat: none;
    background-position:none;
    background-size: none;
    }
  }
  @media screen and (min-width: 377px) and (max-width: 767px) {
    .gallery_list {
      flex-direction: column;
      margin-left: 0;
  
    }
    .gallery_list-item {
      width: 300px;
      height: 300px;
      box-shadow: 2px 2px 2px grey;
      background-repeat: none;
      background-position:none;
      background-size: none;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px){
    .gallery_list-item {
      width: 300px;
      height: 300px;
      box-shadow: 2px 2px 2px grey;
  
    }
  }
  
  .close {
    color: black;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }
  
  
  
  
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  .prev{
    left: 0;
    border-radius: 3px 0 0 3px;
  }
  
  
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  
  img.demo {
    opacity: 0.6;
    width: 100px;
    height: 100px;
    object-fit: contain;
  }
  @media screen and (min-width: 1700px){
    img.demo {
      opacity: 0.6;
      width: 150px;
      height: 150px;
      
    }
  }
    
  
  .column{
    width: 100%;
    display:inline-flex;
    align-items: center;
     position: absolute;
    flex-direction: row;
    justify-content: center;
    bottom: 10%;
    cursor: pointer;
    gap: 2%;
  }
  @media screen and (max-width: 376px){
    .column{
      display: none;
      object-fit: cover;
    } 
   
  }
  @media screen and (min-width: 377px) and (max-width: 426px) {
    .column{
      display: none;
    }
  }
  @media screen and (min-width: 427px) and (max-width: 1023px){
    .column{
      display: none;
    }
  }
  .demo:hover {
    opacity: 1;
    
  }
  /* ==================================================KONTAKT======================================================================== */
 .main_relative_wrapper_contact{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 5%;
    position: relative;
 }
 @media screen and (min-width: 300px) and (max-width: 376px){
  .main_relative_wrapper_contact{
 flex-direction: column;
 padding-top: 40%;
 padding-bottom: 0;

}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .main_relative_wrapper_contact{
  flex-direction: column;
  padding-top: 40%;
 padding-bottom: 0;
 }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .main_relative_wrapper_contact{
  flex-direction: column;
  padding-top: 40%;
  padding-bottom: 0;
    
 }
}
 .navigation_static_image_contact{
    background-image: url("../assets/logo-strefam2.svg");
    
    background-size: 700px 500px;
    background-repeat: no-repeat;
    background-position: top 20% left 50%;
    height: 500px;
    
 }

 @media screen and (min-width: 300px) and (max-width: 376px){
  .navigation_static_image_contact{
   display: none;
  

}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .navigation_static_image_contact{
   display: none;
  
 }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .navigation_static_image_contact{
  display: none;

    
 }
}
 .navigation_contact{
    color:black;
    font-weight:900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
    width: 100%;
    height: 150px;
    position: relative;
    z-index: 2;
  
    background-color:#78938c9c; 
 }
 @media screen and (min-width: 300px) and (max-width: 376px){
  .navigation_contact{
    display: none;

}
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .navigation_contact{
    display: none;

}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .navigation_contact{
    display: none;

}
}
 .navigation_second_deep_container_contact{
    position: absolute;
    width: 10%;
    height: inherit;
    bottom: -103%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:inherit;
    /* border: 1px solid black; */
    color:inherit;
 }

 .contact_form{
    width:50%;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 20%;
 }
 @media screen and (min-width: 300px) and (max-width: 376px){
  .contact_form{
    width:90%;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 0;
 }
}
@media screen and (min-width: 377px) and (max-width: 767px){
  .contact_form{
    width:90%;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 0;
 
}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .contact_form{
    width:90%;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 0;
 
}
}
  .fieldset_contact-form {
    background-color: #ffffff00;
    width: 100%;


    padding-top: 5%;
    padding-bottom: 2%;
    border: none;
  }
  .form .form-row {
    margin-bottom: 1rem;
  }
  
  .form .form-row:last-child {
    margin-bottom: 0;
  }
  
  .form-control {
    font-family: sans-serif;
    padding: 1rem;
    border: 1px solid #171616;
    display: block;
    width: 100%;
    color: #666;
  }
  
  .form-control:is(textarea) {
    height: 10rem;
  }
  
  .form-label {
    display: block;
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .form-send-error {
    font-family: sans-serif;
    color: red;
    margin: 10px 0;
  }
  
  .form-send-success {
    font-family: sans-serif;
    color: goldenrod;
    margin: 10px 0;
  }
  
  .form-send-success {
    color: inherit;
  }
  
  .form-send-success {
    display: block;
    font-size: 1.5em;
    color: tomato;
    margin-bottom: 0.3em;
  }
  .signup_checbox {
    display: flex;
  }
  .form-check {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3%;
  }
  .label_paragraph {
    font-size: 13px;
    color: #171616;
  }
  .modal_legal-link {
    text-decoration: none;
    color: #171616;
  }
  .is-invalid {
    border-color: red;
    outline: none;
    box-shadow: 0 0 2px red;
  }
  .map_contact{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 4;
  }
  @media screen and (min-width: 300px) and (max-width: 376px){
    .map_contact{
      width: 100%;
    }

      .google_map{
       height: 300px;
      } 

  
  }

  @media screen and (min-width: 377px) and (max-width: 767px){
    .map_contact{
      width: 100%;
      

  
  }
  .google_map{
    height: 400px;
   } 
  }
  @media screen and (min-width: 768px) and (max-width: 1023px){
    .map_contact{
      width: 100%;
     

  
  }
  .google_map{
    width: 100%;
    height: 500px;
   } 
  }
  /* ===========================PROMOCJE===================================== */
  .navigation_static_image_promotion{
    background-image: url("../assets/Ikona-promocji.svg");
    background-repeat: no-repeat;
    background-position: top 5% right 50%;
    
    z-index: 2;
    width: 100%;
    height: 600px;
    position: relative;
  }
  @media screen and (min-width: 300px) and (max-width: 376px){
    .navigation_static_image_promotion{
      z-index: 0;
      height: 300px;
    }
    
  }
  
  @media screen and (min-width: 377px) and (max-width: 767px){
    .navigation_static_image_promotion{
     z-index: 0;
     height: 300px;
  
  }
  }
  @media screen and (min-width: 768px) and (max-width: 1023px){
    .navigation_static_image_promotion{
      z-index: 0;

  
  }
  }
  .navigation_promotion{
    color: black;
    font-weight:900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
    width: 100%;
    height: 150px;
    position: relative;
    background-color:#78938c6c; 
  }
  @media screen and (min-width: 300px) and (max-width: 376px){
    .navigation_promotion{
      display: none;
    }
    
  }
  
  @media screen and (min-width: 377px) and (max-width: 767px){
    .navigation_promotion{
      display: none;
  
  }
  }
  @media screen and (min-width: 768px) and (max-width: 1023px){
    .navigation_promotion{
      display: none;
  
  }
  }
  .navigation_second_deep_container_promotion{
    position: absolute;
    width: 10%;
    height: inherit;
    bottom: -103%;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:inherit;
    color: inherit;
    /* border: 1px solid black; */
  }

.main_relative_wrapper_promotion{
  display: flex;
  flex-direction: column;
  padding-bottom: 5%;
  
}
  .promotion_container{
    width: 100%;
    margin-top: 10%;
   
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .promotion_offert_img{
    margin-left: 5%;
  }
  .promotion_offert_text{
    font-size: 20px;
    line-height: 1.8;
    color: black;
    width: 60%;
    margin-left: 10%;
    text-align: left;



  }
  .promotion_offer_wrapper{
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .promotion_link{
    text-decoration: none;
    color: red;
    
  }
  @media screen and (min-width: 300px) and (max-width: 376px){
    .promotion_offert_text{
    
      width: 100%;
      margin-left: 0;
      text-align: left;
  
  
  
    }
    
    .promotion_container{
      display: flex;
      flex-direction: column;
    }
    
  }
  @media screen and (min-width: 377px) and (max-width: 767px){
    .promotion_offer_wrapper{
      width: 100%;
    
    }
    
    .promotion_container{
      display: flex;
      flex-direction: column;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1023px){
    .promotion_offer_wrapper{
      width: 100%;
    
    }
    
    .promotion_container{
      display: flex;
      flex-direction: column;
    }
  }
  /* ================================MOBILE================================ */
  .mobile_navigation {
    display: none;
  }
  
  .header__mobile-btn {
    display: none;
  }
  /* .header__exit-btn {
    display: none;
  } */
  .header__navigation-hamburger {
    display: none;
  }

  .page-header__exit-icon {
    fill: black
  }
  .header__navigation-icon {
    fill: black;
  }
  .acordeon_mobile {
    display: none;
  }
  @media screen and (min-width: 300px) and (max-width: 376px) {
    .d_none {
      display: none;
    }
    .mobile_navigation {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: inherit;
    }
    .header__navigation-hamburger {
      display: flex;
      position: relative;
    }
    .header__navigation-hamburger {
      position: absolute;
      top: 5%;
      right: 2%;
    }
    .header__mobile-btn {
      display:flex;
      background-color: inherit;
      border: none;
      animation: animationMobile ease 1.5s;
    }
    
    .header__menu-mobile {
     
      background-color: #1716166e;
      position: absolute;
     z-index: 5;
      padding: 10% 0;
      width: 100%;
    }
    .header__mobile-list {
  
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      font-size: 15px;
      list-style-type: none;
    }
    .header__navigation-golddiv{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-left: 5%;
      background-color: rgba(218, 165, 32, 0.436);
      width: 90%;
      z-index: 6;
    }
    .header__navigation_logo{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .header__mobile-list a {
      color: inherit;
    }
    .header__list-item {
      margin-top: 15px;
    }
   
    .header__exit-btn {
      display: flex;
      background-color: inherit;
      border: none;
      position: absolute;
      top: -20%;
      right: 2%;
    }
  }
  @media screen and (min-width: 377px) and (max-width: 1023px){
    .d_none {
      display: none;
    }
    .mobile_navigation {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: inherit;
    }
    .header__navigation-hamburger {
      display: flex;
      position: relative;
    }
    .header__navigation-hamburger {
      position: absolute;
      bottom: 8%;
      right: 48%;
      margin-left: 50%;
    }
    .header__mobile-btn {
      display:flex;
      background-color: inherit;
      border: none;
    }
  
    .header__menu-mobile {
     
      background-color: #171616;
      position: absolute;
     z-index: 5;
      padding: 10% 0;
      width: 100%;
      height: 500px;
    }
    .header__mobile-list {
  
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      font-size: 15px;
      list-style-type: none;
    }
    .header__navigation-golddiv{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-left: 5%;
      background-color: rgba(218, 165, 32, 0.436);
      width: 90%;
      z-index: 6;
    }
    .header__navigation_logo{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .header__mobile-list a {
      color: inherit;
    }
    .header__list-item {
      margin-top: 15px;
    }
   
    .header__exit-btn {
      display: flex;
      background-color: inherit;
      border: none;
      position: absolute;
      bottom: 8%;
      right: 2%;
    }
  }

 
  
  @keyframes spinScale {
    from {
      opacity: 1;
      transform: rotate(0) scale(1);
    }
    to {
      opacity: 0;
      transform: rotate(360deg) scale(0.5);
    }
  }

  .active,
  .demo:hover {
    opacity: 1;
  }

  #us{
    font-family: sans-serif;
    padding: 1rem 2rem;
    cursor: pointer;
    background: goldenrod;
    text-transform: uppercase;
    border: 1px solid black;
    border-radius: 0.2rem;
    color: black;
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 10%;
  }
  #us:hover {
    background: darkgoldenrod;
}


#us:active {
    transform: scale(0.95);
    background: goldenrod;
}
.promotion_div{
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 50px;
}
/* Podstawowy styl dla każdej ikony */
.legal-page-div{
  display: flex;
  width: 100%;
justify-content: center;
align-items: center;
padding-bottom: 10%;

}
.link-mainpage{
  color: red;
}