:root {
  --brand-yellow: #FFC107;
  --brand-yellow-dark: #FFB300;
  --brand-gray: #4A4A4A;
}


@font-face {
  font-family: Manrope;
  src: url(../fonts/Manrope-Light.ttf);
}

@font-face {
  font-family: Manrope-Regular;
  src: url(../fonts/Manrope-Regular.ttf);
}

@font-face {
  font-family: Poppins-Black;
  src: url(../fonts/Poppins-Black.ttf);
}

@font-face {
  font-family: Poppins-Light;
  src: url(../fonts/Poppins-Light.ttf);
}


*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}

body{
	width: 100%;
	font-family: Manrope;
	color: #4A4A4A;
}

a{
	text-decoration: none;
	transition: 300ms;
}
 /*  header  */

h1{
	font-family: Poppins-Light;
	font-weight: 600;
}

/*kolor bazaowy dla tła */
#main-page-footer, .menu-box-item a:hover, ul.timeline::before {
	background-color: #FFC107;
}
/*Wspólby dislpay: block; */
#header, #menu, .menu-box-item, #menu-logo, #container-box, #start-item, .main-box, .box-link-button, #content-box-one,
.content-box-items, .content-box-items-no-flex, .contetx-box-top-panel, .subpage-title, .menu-box-item a, .footer-map-site, .site-map-column,
.hover-menu-box-item a, .column-two .column-text a{
	display: block;
}

#header{
	position: fixed;
	top: 0px;
	height: 100px;
	width: 100%;
	padding: 0 5px;
	background: #fff;
	z-index: 100;
	overflow: hidden;
}


#menu, .menu-box-item{
	height: 100%;
	margin: 0 auto;
	text-align: center;
}

#menu{
	position: relative;
	width: 80%;
	/*margin: 0;
	margin-left: 20px;*/
}

#menu, #hover-menu, .hover-menu-box-item{
	background-color: #ffffff;
}

#menu-logo, .menu-box, .hover-menu-box-item{
	float: left;
}

#hover-menu{
	width: 100%;
	display: none;
	transition: 500ms;
	list-style-type: none;
	/*transform: translateX(-25%);*/

}

#menu-logo{
	width: 20%;
	height: 100%;
	text-align: left;
	transform: translateX(-5px);
}

#menu-logo img{
	width: 100px;
}

.menu-box{
	width: 80%;
	color: red;
	list-style: none;
} 

.menu-box-item{
	width: 20%;
	float: left;
	line-height: 100px;
}

.hover-menu-box-item{
	width: 100%;
	border-top: 1px solid #FFC107;
}

.menu-box-item a, .hover-menu-box-item a{
	width: 100%;
	height: 100%;
	
	color: #333333;
	text-decoration: none;

	transition: 300ms;
}

.menu-box-item a:hover{
	color: #fff;
}

.burger{
  position: absolute;
  right: 0px;
  top: 40px;
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.burger div{
  width: 25px;
  height: 3px;
  background-color: #000000;
  transition: all 0.3s ease;
}

.hide-menu{
	display: none;
}

/* content */

#container, #container-box,{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9;
}

#start-item, #content-box-one, #content-box-two, #content-box-three, #contat-conteiner{
	position: relative;
	min-height: 100vh;

}

#content-box-four{
	height: auto;
}

#content-box-five{
	min-height: 50vh;
}


#start-item{
	width: 100%;

	background: #fff;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	text-align: center;

}

.main-box{
	width: 80%;
	margin: 0 auto;
}

.container-item-background{
	position: absolute;
	top: 100px;
	height: 40vh;
	width: 100%;
	background-image: url(../images/bg.jpg);
	background-position: center;
	background-size: cover;
	z-index: 99;
}

.main-box-item h1, .main-box-item h2{
	margin-bottom: 30px;
	
}

.main-box-item h1, .main-box-item h2, .box-link-button{
	transform: translateY(24vh);

}

.main-box-item h1{
	font-size: 3em;
	color: var(--brand-yellow);
}

.main-box-item h3{
	font-size: 2em;
}

.box-link-button{
	width: 275px;
	height: 50px;
	margin: 0 auto;
	margin-top: 50px;
	padding: 12px 6px;
	border-radius: 25px;
	font-size: 1.2em;
	color: #fff;
	background-color: #FFC107;
	text-align: center;
}

.box-link-button:hover{
	background-color: #FFB300;
	color: #fff;
}

.top-zero{
	transform: translateY(0vh);
	margin-top: 50px;
}

#content-box-one /* #content-box-two */{
	/*padding: 75px 0; */
}


.box-item-one, .content-box-items, .content-box-title{
	width: 80%;
}



.content-box-items{
	min-height: 100vh;
	
	display: flex;
	justify-content: center;
	align-items: center;

	margin: 0 auto;
}

.content-box-items-no-flex{
	width: 80%;
	margin: 0 auto;
}

.content-box-item{
	width: 48%;
	height: 100%;
	margin: 20px;
}

.content-box-item h2{
	height: 20%;
	margin-top: 20%;
}

.text-content p{
	text-align: justify;
	width: 100%;
}

.text-content-list{
	margin: 10px 5px;
}

.list-text{
	margin-bottom: 10px;
}

.text-content-list-item{
	margin-left: 15px;
}

.image-box{
	width: 70%;
	margin: 0 0 0 30%;
	overflow: hidden;
	border: 5px solid #FFC107;	
}

.image-box img{
	width: 100%;
	min-width: 300px;
	transform: scale(1.1);
	
}





.box-item-two{
	padding: 10px 5px;
}

.text-content{
	width: 100%;
	min-height: 400px;
	margin-top: 5%;
}



#content-box-two{		
	overflow: hidden;
	min-height: 100vh;
}

.text-content{
	margin: 5rem 0px;
}

.text-box-title{
	margin-top: 25px;
}

    ul.timeline {
      list-style: none;
      margin: 25px 0 50px 0;
      padding: 0;
      position: relative;

    }

    /* pionowa linia */
    ul.timeline::before {
      content: "";
      position: absolute;
      left: 10px;
      top: 0;
      bottom: 0;
      width: 2px; 
    }

    /* każdy punkt */
    ul.timeline li {
      position: relative;
      height: 150px;
      margin: 50px 0;
      padding-left: 30px;
    }

    /* kółko */
    ul.timeline li::before {
      content: "";
      position: absolute;
      left: -1px;
      top: 0px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;   /*  kółko */
      border: 2px solid #FFC107; /* obrys dla kontrastu */
    }

    .timeline-option{
    	font-size: 3em;
    	color: #888;
    	margin-left: 20px;
    	/*transform: translateY(-20px);*/
    }

    .timeline-title{
    	font-size: 1.4em;
    }

     .timeline-option, .timeline-title{
    	display: inline-block;
    	transform: translateY( -25px);
    	color: #4A4A4A;
    }
    
    .timeline-text, .timeline-title{
    	margin-left: 20px;
    }

.right{
	display: flex;
	justify-content: right;
}

.center{
	display: flex;
	justify-content: center;
}

.left{
	display: flex;
	justify-content: left}
}

.flex-left-wrap{
	display: flex;
	justify-content: left;
	align-items: flex-start;
	flex-wrap: wrap;
}


.contact-content-box-items{
	width: 80%;
	margin: 0 auto;
	padding: 100px 25px;
}

.contact-content-box-items h1{
	margin-bottom: 12px;
}

.contact-info{
	display: flex;
 	flex-direction: column;
 	gap: 12px;

 	margin-top: 5%;
}


.contact-info a {
  font-size: 1.2rem;
  color: #333;
  transition: color 0.2s;
}

#main-page-footer{
	width: 100%;
	min-height: 50vh;
	color: #fff;
}

#main-page-footer::after, #start-item::after{
	content: "";
	display: block;
	clear: both;
}

.footer-map-site{
	width: 80%;
	margin: 0 auto;
}

.footer-map-site, .site-map-column{
	height: 100%;
}

.site-map-column{
	width: 25%;
	float: left;
	margin: 0;
	padding: 75px 0;
}

.column-one a{
	color: #fff;
}

.column-one a:hover{
	color: #fff;
}

.column-three{
	width: 50%;
}

.column-one-logo{
	width: 50%;
	margin-bottom: 30px;
	overflow: hidden;
	background: #fff;
}

.column-one-logo img{
	width: 100%;
	transform: scale(1.06);
}

.column-text h3, .column-text p, .column-text a{
	margin-bottom: 5px;
}

.column-text h3{
	font-size: 1.4em;
}

.column-text p, .column-text a{
	font-size: 1em;
}

.column-two{
	padding-left: 20px;
	padding-right: 20px;
	
}

.column-two .column-text h3{
	margin-bottom: 30px;
}

.column-two .column-text a{
	height: 30px;
	width: 80%;
	border-bottom: 1px solid rgba(250, 250, 250, .5);
	transition: 200ms;
	line-height: 30px;
	color: #fff;
}

.column-two .column-text a:hover{
	font-family: Manrope-Regular;
	font-weight: bold;
	padding-left: 20px;
}

.column-three .column-text p{
	margin: 30px auto;
}



/* Media */

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

	.image-box{
		width: 90%;

	}

	.boxes-list-item:hover > .boxes-list-item-name{
		transform: translateY(-190px);
	}

    .boxes-list-item:hover > .boxes-list-item-text{
		transform: translateY(-190px);
	}

}


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


	.text-item-one, .text-item-two, .text-item-three{
		margin: 7.5% 0;
	}

	.box-item-one{
		min-height: 0;
		margin-bottom: 50px;
	}


	#content-box-one{
		align-items: stretch;
	}

	.content-box-items{
		width: 80%;
		flex-wrap: wrap;
		align-items: center;
		gap: 3%; 

		margin: 0 auto;


	}

	.content-box-item{
		width: 45%;
	}

	.content-box-item h2{
		margin-bottom: 10%;
	}

	
	.text-content{
		width: 100%;
		min-height: 400px;
		margin: 0;
	}

	.text-content-box{
		width: 100%;
	}

	.image-box{
		width: 100%;
		margin: 0 auto;
		margin-bottom: 15%;
	}

	.background{
		height: 150vh;
		top: 0;
	}

	.content-box-item{
		width: 100%;
	}

	.contetx-box-top-panel{
		margin: 50px 10%;
		width: 80%; 
	}

	.content-one-item{
		top: 3.5vh;

	}


	#content-box-one h1{
		text-align: left;
	}

	#content-box-two{
		background-position: center;
	}


	.boxes-list-item{
		border: none;
		width: 100%;
	}
	
	.boxes-list-item-text{
		padding: 0px;
	}
	
	.border-top-left, .border-top-mid, .border-top-mid, .border-bottom-left, .border-bottom-mid, .border-top-right{
		border-bottom: 1px solid #ff8fab;
	}

	.boxes-list-item:hover > .boxes-list-item-name{
		transform: translateY(-150px);
	}

    .boxes-list-item:hover > .boxes-list-item-text{
		transform: translateY(-150px);
	}

	#main-page-footer{
		padding-bottom: 5%;

	}



}

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


	.menu-box{
		display: none;
	}

	.hide-menu{
		position: fixed;
		top: 100px;
		display: block;
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
		padding: 0 25px;
		transform: translateX(-100%);
		z-index: 999;
		transition: 500ms;
	}

	.active{
		transform: translateX(0%);
	}

	.hide-menu-box, .hide-menu-box, .hide-hover-menu-box-item{
		position: relative;
	}

	.hide-menu-box{
		top: 150px;
		width: 70%;
		margin: 0 auto;
		list-style-type: none;
	}

	

	.hide-hover-menu-box-item, .hide-menu-box-item{
		height: 70px;
		width: 100%;
		border-bottom: 1px solid #FFC107;
		list-style-type: none;
		line-height: 50px;
		overflow: hidden;
		padding: 10px;

		transition: 500ms;
	}

	.hide-hover-menu-box-item:last-child, .hide-menu-box-item:last-child{
		border: none;
	}

	.hide-hover-menu-box-item{
		left: 20px;
	}

	.show-item:hover{
		height: 420px;
	}

	.hide-menu-box-item a, .hide-hover-menu-box-item a{
		width: 100%;
		height: 100%;	
		max-height: 50px;
		display: block;
	
		color: #333333;
		text-decoration: none;

		transition: 300ms;
	}

	.burger{
    	display: flex;
  	}

  	.burger.toggle .line1 {
 		 transform: rotate(45deg) translate(6px, 5px);
 		 width: 30px;
	}

	.burger.toggle .line2 {
 		 opacity: 0;
	}

   .burger.toggle .line3 {
   	 width: 30px;
     transform: rotate(-45deg) translate(5px, -6px);
   }


	#menu{
		width: 80%;
	}

	.content-box-items{
		width: 90%;
		margin: 0 5%;
	}

	.main-box-item h1, .main-box-item h2, .box-link-button{
		transform: translateY(25vh);	
	}

	.main-box-item h1{
		font-size: 2.5em;
	}

	.content-box-item{
		width: 100%;
	}
	
	.content-box-item h1{
		margin-bottom: 50px;
	}

	#content-box-one h1{
		text-align: left;
	}

	#content-box-two{
		background-position: center;
	}


	.boxes-list-item{
		border: none;
		width: 100%;
	}
	
	.boxes-list-item-text{
		padding: 0px;
	}
	/*
	.image-box{
		max-height: 400px;
		transform: translateY(-5vh); 
		
	}


	.image-box img{
		min-height: 400px;
		transform: translateY(-30%);
	}
	*/

	.image-box img{
	   transform: scale(1.1);
	}

	ul.timeline li {
      width: 90%;
      height: 200px
    }

    .top-zero{
	  transform: translateY(-0vh);
	}
	
	#main-page-footer{
	/*min-height: 100vh;*/
	padding-bottom: 10%;
	}

	.site-map-column{
	width: 50%;
	height: 50%;
	}

	.column-three{
	width: 100%;
	height: 50%;
	padding-top: 10px;
	}
	
}


@media only screen and (max-width: 568px){
	
	#content-box-one, #content-box-two, #content-box-three, /* #main-page-footer */, #contat-conteiner{
		min-height: 120vh;
	}

	.image-box{
		transform: translateY(0vh);
	}

	.image-box img{
		
	}

	#main-page-footer{
		padding-bottom: 10%;
		min-height: 95vh;
	}

}

/* Telefon / małe ekrany */
@media (max-width: 768px) {
  .content-box-item {
    width: 100%; /* jedna kolumna, pełna szerokość ekranu */
  }

  .content-box-items {
    justify-content: center; /* wycentrowanie kolumn */
  }
}


@media screen and (max-width: 1024px) and (min-width: 769px) {
  #header{
  	height: 70px;
  }

  #menu-logo img{
	width: 70px;
}

  .menu-box-item{
	line-height: 70px;
}
  .main-box-item h1,
  .main-box-item h2,
  .box-link-button{
    transform: translateY(150px);
  }

  #start-item{
  	top: 0;
  	left: 0;
  	padding-bottom: 20px;
  }

  .container-item-background{
  	top: 70px;
  	height: 30vh;
  }

  .padding-top-mobile-verticle{
  	min-height: 10vh;
  	padding-top: 150px;
  }

  .content-box-item h1{
  	margin-bottom: 50px;
  }
}