@import url(reset.css);
@import url(tns.css);
@import url(aos.css);
@import url(all.css);

body {
   font-family: 'Poppins', sans-serif;
   font-size: 62.5%;
   word-break:break-word;
}

/* style dla headera */
.header{
   display:flex;
   font-size:17px;
   justify-content:space-evenly;
   align-items:center;
   background:white;
   z-index:-1;   
}

.header-logo-wrapper{
   padding-left:6.25rem;
   width:50%; 
}

.header-logo-wrapper img{
   width: 280px;
   height:162px;
   text-align:left;
}

.header-telephone-wrapper{
   width:3rem;
   height:3rem;
   margin-left:12.7%;
   margin-right:6.5%;
   margin-bottom:1.6rem;
   transition: background-color 0.4s ease;
   display:flex;
   justify-content: center;
   align-items:center;

}

.header-telephone-icon{
   font-size:40px;
   color:black;
   transition: filter 0.4s ease;
}

.header-telephone-icon:hover{
   filter: brightness(0) invert(1);
}



.header-telephone-wrapper:hover{
   background-color: black;
  
}

.header-text{
   width:30%;
   line-height: 1.2;
   color: rgb(87, 87, 87);
   display:flex;
   flex-direction:column;
   font-size:17px;
   padding-bottom:1.65rem;
   letter-spacing:-1px;
   line-height:24px;

}

@media only screen and (max-width:1012px){

   .header-text{
      width:40%;
      font-size:1rem;
      text-align:center;
   }

   .header-telephone-wrapper{
      margin-left:5%;
   }

   .header-logo-wrapper{
      display:flex;
      flex-wrap:nowrap;
   }
   .header-logo-wrapper img{
      width:100%;
      height:100%;
   }
}

@media only screen and (max-width:480px){

   .header-text{
      display:none;
   }

   .header-logo-wrapper{
      display:flex;
      justify-content:center;
      margin-left:10%;
   }

   .header-telephone-wrapper{
      margin-left:0;
      margin-right:0;
      
   }


   /* .header-telephone-wrapper{
      display:none;
   } */

   .header{
      margin-left:-25%;
   }


}


/*style dla nawigacji*/
nav{
   position: relative;
   background-color: rgb(240, 240, 240);
   height:3.65rem;
   margin-top:-1.45rem;
   letter-spacing: 1px;
   display:flex;
   align-items:center;
   justify-content: center;
   
}

.main-nav {
   display:flex;
   justify-content: center;
   gap:2rem;
   font-weight: bold;
   align-items:center;
   font-size:15px;
}

a{
   text-decoration: none;
}

.nav-element p{
   color: rgb(5, 15, 43);
   transition: color 0.3s ease;
   font-weight:700;
   font-family: 'Open Sans', sans-serif;
   
}

.current-page p{
   color: rgb(122, 122, 122);
}

.nav-element p:hover{
   color:rgb(122, 122, 122);
}


/* menu dla mobile */
.nav-btn {
   position: absolute;
   top: 0;
   right: 0;
   width: 4rem;
   height: 100%;
   display:none;
}

.nav-btn span {
   position: absolute;
   left: 1rem;
   width: calc(100% - 2rem);
   height: 5px;
   background: black;
   transition: all 0.4s linear;
   transform-origin: center;
}

.nav-btn span:first-child {
   top: 1rem;
}

.nav-btn span:nth-child(2) {
   top: 50%;
   transform: translateY(-50%);
}

.nav-btn span:last-child {
   bottom: 1rem;
}


@media only screen and (max-width:960px) {
   .nav-element{
      display:none;
   }
   .nav-btn{
      display:inline;
   }
   .main-nav {
      transition: all .5s ease-in-out;
      position:fixed;
      background: rgb(0,0,0);
      top:0;
      right:0;
      width:300px;
      height:100%;
      z-index:9999;
      display:flex;
      flex-direction: column;
      justify-content:start;
      align-items:end;
      padding-right:5%;
      padding-top:10%;
      transform: translateX(100%);
   }
   .active-menu{
      transform: translateX(0);
   }
   .active-menu .nav-element {
      display: inline;
   }

   .active-menu .nav-element p{
      color:rgb(202, 203, 206);
      padding-top:15%;
      font-size:1.2rem;
   }

   .active-menu .current-page p {
      color: rgb(122, 122, 122);
   }
}

.active-btn{
   display:none;
}

.body-overlay{
   position: fixed;
   width:100%;
   height:100%;
   transform: translateX(100%);
   z-index: 2;


}

.body-overlay-active{
   transform: translateX(0);
}

/* style dla filmiku */

.background-video-section {
   position: relative;
   width:100%;
   height:280px;
}

.background-video{
   width:100%;
   position:absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
   z-index:-9999;
}



.background-video-section::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   z-index: 1;
 }

.contact-information{
   font-family: 'Comfortaa', cursive;
   color:rgb(255, 255, 255);
   position:relative;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
   font-size:37px;
   z-index:100;
   text-align:center; 
   font-weight: 400;
}

@media only screen and (max-width:768px){
   .background-video-section .background-video{
      display:none;
   } 
   .background-video-section{
      background: url("../img/background-media-first.webp") center center;
      background-position: -360px -60px;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      height:180px;
      width:100%;
   }
   .contact-information{
      color:rgb(255, 255, 255);
      position:relative;
      top:50%;
      left:0;
      transform: translate(0,-50%);
      font-size:2.5rem;
      z-index:100;
      text-align:center; 
      font-size:2.2rem;
   }
   .background-video-section::before {
      background-color: rgba(0, 0, 0, 0.0);
    }
}

@media only screen and (max-width:480px){
   .background-video-section{
      background: url("../img/background-media-second.webp");
      background-size: cover;
      background-repeat:no-repeat;
      background-position: -250px -30px;
      height:350px;
      
      width:100%;
      margin-left:auto;
      margin-right:auto;
   }
   .backgroundvideo-section::before {
      background-color: rgba(0, 0, 0, 0);
   }   
}

/* style dla tla w nasz-zespol */
.background-nasz-zespol {
   background: url("../img/nasz-zespol-background.webp") center center;
   background-attachment: fixed;
   background-size: cover;
   height:250px;
   width:100%;
}

@media only screen and (max-width:768px){
   .background-nasz-zespol{
      background: url("../img/background-media-first.webp") center center;
      background-position: -360px -60px;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      height:150px;
      width:100%;
   }
}

@media only screen and (max-width:480px){
   .background-nasz-zespol{
      background: url("../img/background-media-first.webp");
      background-size: cover;
      background-repeat:no-repeat;
      height:270px;
      width:100%;
      margin-left:auto;
      margin-right:auto;
   }
}

/* style dla tla w opcje-platnosci */
.background-opcje-platnosci {
   background: url("../img/opcje-platnosci-background.webp") center center;
   background-attachment: fixed;
   background-size: cover;
   height:250px;
   width:100%;
}

@media only screen and (max-width:768px){
   .background-opcje-platnosci{
      background: url("../img/background-media-first.webp") center center;
      background-position: -360px -60px;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      height:150px;
      width:100%;
   }
}

@media only screen and (max-width:480px){
   .background-opcje-platnosci{
      background: url("../img/background-media-first.webp");
      background-size: cover;
      background-repeat:no-repeat;
      height:270px;
      width:100%;
      margin-left:auto;
      margin-right:auto;
   }
}

/* style dla tla w mediacje */
.background-mediacje {
   background: url("../img/mediacje-background.webp") center center;
   background-size: cover;
   max-width:1110px;
   height:450px;
   margin-left:auto;
   margin-right:auto;
}

@media only screen and (max-width:768px){
   .background-mediacje{
      background: url("../img/background-media-first.webp") center center;
      background-position: -360px -60px;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      height:150px;
      width:100%;
   }
}

@media only screen and (max-width:480px){
   .background-mediacje{
      background: url("../img/background-media-first.webp");
      background-size: cover;
      background-repeat:no-repeat;
      height:270px;
      width:100%;
      margin-left:auto;
      margin-right:auto;
   }
}

/* style dla tlo w rodo */
.background-rodo {
   background: url("../img/rodo-background.webp") center center;
   background-attachment: fixed;
   background-size: cover;
   height:250px;
   width:100%;
}

@media only screen and (max-width:768px){
   .background-rodo{
      background: url("../img/background-media-first.webp") center center;
      background-position: -360px -60px;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      height:150px;
      width:100%;
   }
}

@media only screen and (max-width:480px){
   .background-rodo{
      background: url("../img/background-media-first.webp");
      background-size: cover;
      background-repeat:no-repeat;
      height:270px;
      width:100%;
      margin-left:auto;
      margin-right:auto;
   }
}

/* style dla tla w kontakt */
.background-kontakt{
   background: url("../img/kontakt-background.webp") center center;
   background-attachment: fixed;
   background-size: cover;
   height:250px;
   width:100%;
}

@media only screen and (max-width:768px){
   .background-kontakt{
      background: url("../img/background-media-first.webp") center center;
      background-position: -360px -60px;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      height:150px;
      width:100%;
   }
}

@media only screen and (max-width:480px){
   .background-kontakt{
      background: url("../img/background-media-first.webp");
      background-size: cover;
      background-repeat:no-repeat;
      height:270px;
      width:100%;
      margin-left:auto;
      margin-right:auto;
   }
}

/* style dla tla w polityce prywatnosci */
.polityka-prywatnosci-background{
   background: url("../img/polityka-prywatnosci-background.webp") center center;
   background-attachment: fixed;
   background-size: cover;
   height:250px;
   width:100%;
}

@media only screen and (max-width:768px){
   .polityka-prywatnosci-background{
      background: url("../img/background-media-first.webp") center center;
      background-position: -360px -60px;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      height:150px;
      width:100%;
   }
}

@media only screen and (max-width:480px){
   .polityka-prywatnosci-background{
      background: url("../img/background-media-first.webp");
      background-size: cover;
      background-repeat:no-repeat;
      height:270px;
      width:100%;
      margin-left:auto;
      margin-right:auto;
   }
}

/* glowne informacje o kancelari */
.information{
   display:flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background: #ffff;
   flex-wrap: wrap;
}

.information h1 {
   font-size: 26px;
   margin-top:2%;
   margin-bottom:2%;
   color: rgb(36, 40, 100);
   font-weight: 500;
   text-align:center;
   letter-spacing: -1px;
   font-weight:400;
   font-family:Arial, sans-serif;
}

.information .bigger-information-header-margin{
   margin-top:3.5%;
   margin-bottom:3.5%;
}

.information h1:last-child {
   margin-top:1%;
   margin-bottom:3%;
}

.up-information{
   background:rgb(240, 240, 240);
   width:100%;
   display:flex;
   align-items:center;
   padding-top:2%;
}




.up-information{
   max-width:1170px;
   background:rgb(240, 240, 240);
   width:100%;
}

.my-slider {
   max-height: 500px;
}

.up-information .tns-outer {
   width: 50%;
   max-height: 500px;
}

.up-information .tns-outer img {
   width: 100%;
   height: 500px;
   object-fit: contain;
   object-position: center;
}

.down-information .tns-outer {
   width: 50%;
   max-height: 500px;
}

.down-information .tns-outer img {
   width: 100%;
   height: 500px;
   object-fit: contain;
   object-position: center;
}

.information-up-text{
   color: rgb(84, 84, 84);
   width:50%;
   font-size:16px;
   line-height:1.6;
   display:flex;
   flex-direction: column;
   justify-content: center;
   margin-right: 4%;
   margin-left:4%;
}

.information-up-text p {
   text-align:left;
}

.information-up-text h2 {
   font-weight: bold;
   padding-bottom:4%;
   color: black;
}

.down-information{
   background:rgb(222, 222, 222);
   width:100%;
   display:flex;
   align-items:center;
   padding-top:2%;
}


.down-information{
   max-width:1170px;
   background:rgb(222, 222, 222);
   width:100%;
   margin-bottom:2rem;
}

.information-down-text{
   color: rgb(84, 84, 84);
   width:50%;
   font-size:16px;
   line-height:1.4;
   display:flex;
   flex-direction: column;
   justify-content: center;
   margin-left:4%;
   margin-right:4%;
}

.information-down-text p {
   text-align:left;
}

.information-down-text h2 {
   font-weight: bold;
   padding-bottom:4%;
   color:black;
}

.underlined-text-in-information{
   margin-top:4%;
   line-height: 1.5;
   text-decoration:underline;
}

@media only screen and (max-width:768px){
   .up-information{
      flex-direction: column;
   }
   .information-up-text{
      width: 90%;
      padding-top:10%;
      padding-left:5%;
      padding-right:5%;
      padding-bottom:5%;
   }
   .up-information .tns-outer{
      width:100%;
   }
   .down-information{
      flex-direction: column;
   }
   .information-down-text{
      width: 90%;
      padding-left:5%;
      padding-right:5%;
      padding-top: 10%;
      padding-bottom:10%;
   }
   .down-information .tns-outer{
      width:100%;
   }
}


/* style dla informacji w podstronie 'kontakt' */

.kontakt-information-container{
   font-size:18px;
   color: rgb(54, 54, 54);
   margin-top:5%;
   line-height:1.5;
   max-width:1300px;
   width:90%;
   display:flex;
   flex-direction:column;
   margin-left:0;
   padding-left:8%;

}


.kontakt-information-section h1 {
   margin-top:4%;
}

.kontakt-map-container{
   width:100%;
   max-width:1300px;
   margin-top:3%;
   margin-bottom:5%;
   height:20rem;
   
}

.kontakt-map-container iframe{
   width:90%;
   height:100%;
}

@media only screen and (max-width:768px){
   .kontakt-information-container{
      text-align:center;
      line-height:1.7;
      padding-left:0;
   }
}

/* style dla informacji w podstronie polityka-prywatnosci */

.polityka-prywatnosci-information-section h1{
   margin-top:5%;
   margin-bottom:5%;
}

.polityka-prywatnosci-text-container{
   max-width:1170px;
   margin-bottom:7%;
   color: rgb(84, 84, 84);
}

.information .polityka-prywatnosci-text{
   column-count:2;
   column-gap:3rem;
   font-size:.9rem;
   line-height: 1.7;
}

@media only screen and (max-width: 768px) {
   .information .polityka-prywatnosci-text{
      column-count:1;
   }
}

/* oferta kancelarii */
.company-offer{
   background: url("../img/panels-background.webp") center center;
   background-repeat:no-repeat;
   background-size:cover;
   background-attachment: fixed;
   position:relative;
   z-index:3;
   display:flex;
   flex-wrap:nowrap;
   justify-content: center;
   align-content: center;
   padding-top:4%;
   padding-bottom:4%;
   overflow:hidden;
}

.circle-container{
   position:absolute;
   bottom:0;
   width:100%;
   height:65%;
   z-index:-100;

}

.circle-container img{
   width:100%;
   height:100%;


}

.company-offer-wrapper{
   max-width:1170px;
   width:100%;
    display:flex;
   flex-wrap:wrap;
   justify-content: center;
   gap:2%;
   align-content: center;
}

 .panel-layer::before{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(192, 192, 194, 0.46);
   z-index:-101;
 }

.company-offer-header{
   font-family: 'Comfortaa', cursive;
   display:flex;
   align-items:center;
   justify-content: center;
   font-size:37px;
   color:white;
   background-color: rgb(19, 39, 120);
   padding-top:2%;
   padding-bottom:2%;
   width:100%;
}

.company-offer-panel-up {
   background-color: rgb(255, 255, 255);
   width:31.8%;
   display:flex;
   flex-direction: column;
   align-items:center;
   padding-bottom:2%;
}

.company-offer-panel-down {
   background-color: rgb(255, 255, 255);
   width:31.8%;
   margin-top:1%;
   display:flex;
   flex-direction: column;
   align-items:center;
   padding-bottom:2%;
}

.company-offer-icon-wrapper {
   height:18%;
   width:18%;
   margin-top:10%;
}

.company-offer-icon{
   width:100%;
   height:100%;
   transition: filter 0.3s ease;
}

.company-offer-icon:hover{
   filter: invert(50%);
}

.panel-header{
   font-size:17px;
   margin-top:5%;
   text-align:center;
}

.panel-text{
   font-size:16px;
   line-height:1.5;
   text-align: center;
   margin-top:7%;
   margin-left:5%;
   margin-right:5%;
   color: rgb(87, 87, 87);
}

@media only screen and (max-width:768px){
   .company-offer{
      background: rgb(19, 39, 120) none;
   }

   .circle-container{
      display:none;
   }

   .company-offer-header{
      width:92%;
      padding: 4% 0;
      opacity: 1 !important;
      transform: translateZ(0) !important;
      text-align:center;
   }
   .company-offer{
      flex-direction: column;
      gap:1%;
   }
   .company-offer-panel-up{
      padding:0;
      margin:4%;
      margin-bottom: 2%;
      margin-top: 2%;
      width:96%;
      opacity: 1 !important;
      transform: translateZ(0) !important;
   }
   .company-offer-panel-down{
      padding:0;
      margin:4%;
      margin-bottom: 2%;
      margin-top: 2%;
      width:96%;
      opacity: 1 !important;
      transform: translateZ(0) !important;
   }
   .company-offer-icon-wrapper {
      height:20%;
      width:20%;
      margin-top:8%;
   }
   .panel-header{
      margin-top:4%;
   }
   .panel-text{
      margin-top:5%;
   }


}

/* dodatkowe style dla panelow  w zakldace mediacje */
.mediation-offer{
   position:relative;
   background: rgba(124, 170, 230, 0.1)
}

.mediation-offer .company-offer-icon-wrapper{
   height:30%;
   width:30%;
}

.mediation-offer .company-offer-panel-down, 
.mediation-offer .company-offer-panel-up{
   padding-bottom:0;
   border:0;
   box-shadow: 3px 8px 12px rgba(0,0,0,0.3);
}

.mediation-offer .company-offer::before{
   background-color: rgba(0,0,0,0);
}

.mediation-offer .company-offer-header{
   margin-bottom:2.5%;
   background: rgb(20, 45, 143);
}

@media only screen and (max-width: 768px){
   .mediation-offer{
      position:relative;
      background: rgb(0, 86, 148);
   }  
}




/* style dla czesci z informacja o pfr */
.pfr-information{
   background: #ffff;
   display:flex;
   align-items:center;
   justify-content: center;
   flex-direction: column;
   margin-top:3.5%;

}

.pfr-text{
   font-size:22px;
   text-align:center;
   color: rgb(36, 40, 100);
   letter-spacing:-1px;
   font-family: Arial, sans-serif;
}
.pfr-photo-wrapper{
   margin-bottom:3%;
   margin-top:3%;
   max-width:965px;
   display:flex;
   align-items:center;
   justify-content: center;

}

.pfr-photo-wrapper img{
   width:100%;
   height:100%;
} 

@media only screen and (max-width:768px) {
   .pfr-photo-wrapper{
      margin-top:7%;
   }

   .pfr-information{
      margin-top:15%;
      margin-bottom:5%;
   }
   
}

/*sekcja nad footerem*/

.over-footer-section{
   background: rgb(240, 240, 240);
   display:flex;

}

.over-footer-column{
   display:flex;
   flex-direction:column;
   align-items:center;
   padding-top:9rem;
   padding-bottom: 9rem;
   flex-basis:33.33333%;
}

.over-footer-icon-wrapper{
   width:3.25rem;
   height:3.25rem;
}

.over-footer-icon-wrapper img {
   width:100%;
   height:100%;
   transition: filter 0.4s ease;
}

.over-footer-icon-wrapper img:hover{
   filter: invert(50%);
}

.over-footer-column h2 {
   font-size:30.83px;
   font-weight:400;
   padding-top:1.5rem;
   text-align:center;
   font-family: 'Comfortaa', cursive;

}

.over-footer-column  h3 {
   font-weight: bold;
   font-size:16px;
   padding-top:1rem;
   text-align:center;
}

.over-footer-column p {
   font-size: 16px;
   padding-top:1rem;
   line-height:1.5;
   text-align:center;
}

.over-footer-column .over-footer-bigger-font-size{
   font-size:18px;
}


.over-footer-map-wrapper{
   margin-top:2rem;
   width:100%;
   display:flex;
   justify-content:center;
}

.over-footer-map-wrapper iframe{
   width:90%;
   height:16rem;
}

@media only screen and (max-width:768px) {
   .over-footer-section {
      flex-direction: column;
      justify-content:center;
      align-items:center;
   }

   .over-footer-icon-wrapper{
      padding-top:5%;
   }

   .over-footer-map-wrapper{
      margin-bottom:10%;
   }
   .over-footer-section .header-over-footer-media{
      padding-top:8%;
   }
   .over-footer-column {
      margin-left:7.5%;
      margin-right:7.5%;
      width:85%;
      padding:0;
      flex-basis:100%;
   }

}

@media only screen and (max-width: 465px){
   .over-footer-section .header-over-footer-media{
      padding-top:13%;
   }

   .over-footer-column .over-footer-media-white-text{
      color:white;
      font-size:40px;
   }

   .over-footer-column .over-footer-media-white-text strong{
      color:white;
      font-size:16px;
   }

   .over-footer-section .header-over-footer-media{
      font-size: 40px;
   }
   
   .over-footer-column strong {
      font-size:40px;
   }
}

/*footer*/
footer{
   padding:3%;
   background: rgb(20, 45, 143);
   display:flex;
   color:rgb(202, 203, 206);
   justify-content:center;
   gap:5%;
   font-size:.8rem;
   font-weight:bold;
   line-height:1.5;
}

.footer-column{
   display:flex;
   flex-direction: column;
   align-items:center;
   text-align:center;
}

.footer-column strong{
   color: rgb(81, 207, 81);
   text-decoration: none;
}

.footer-column strong:hover{
   opacity:0.5;
}

.footer-button{
   margin-top:1rem;
   background-color: rgb(252, 252, 252);
   transition: background-color 0.3s ease;
}

.footer-button p {
   font-size:.7rem;
   text-align:center;
   padding: .8rem .8rem .8rem .8rem;
   color:rgb(84, 84, 84);
   font-weight: bold;
   letter-spacing:3px;
}

.footer-button:hover{
   background-color: rgb(40, 39, 39);
}

@media only screen and (max-width:768px){
   footer{
      flex-direction:column-reverse;
      padding:0;
      margin:0;
      padding-top:10%;
      padding-bottom:10%;
   }
   .footer-button{
      margin:0;
      margin-top: 10%;
   }
   .footer-column:nth-child(2){
      margin:8% 0;
   }
}

@media only screen and (max-width: 480px) {
   footer{
      background:black url("../img/triangle.svg") center center;
      background-size: contain;
      background-repeat:no-repeat;  
      background-position: center bottom;
      background-size:100% 80%;
      transform: rotate(180deg);
      line-height:1.7;
      
   }

   .footer-column{
      transform: rotate(180deg);
   }
}