:root{
	--blue: #0094ff;
	--dark-blue: #082c6d;
}

body.page-template-telemedycyna{
	.px_container{
		padding-inline: 3rem;
	}
	.uppercase{
		text-transform: uppercase;
		color: var(--blue, #0094ff);
		font-weight: 600;
	}
	header{	
		position: relative;
		  width: min(100vw, 1600px);
		  left: 50%;
		  transform: translateX(-50%);
			background-size: cover;
		background-position: center;
		
		
		.px_container{
			max-width: 1200px;
			margin: auto;
			background-size: cover;
			background-position: 70% 50%;
			background-repeat: no-repeat;
			display: grid;
			grid-template-columns: 420px 1fr 250px 5fr;
			padding-top: 2rem;
			padding-bottom: 7rem;
			
			.hero_text{
				transition: background-color 200ms;
			}
			
			.hero_text h1{
				font-weight: 400;
				color: black;
			}
		}
		
		.boxes{
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: 1rem;
			grid-column: 3;
			margin-top: 2rem;
			
			.box{
				background-color: #fff;
				padding: 1rem;
				border-radius: 0.5rem;
				height: fit-content;
				display: flex;
				gap: 1rem;
				align-items: center;
				
				img{
					width: 38px;
					height: 38px;
				}
				p{
					margin: unset;
					line-height: 1.5;
					font-weight: 600;
				}
				
			}
		}
		ul{
			padding-bottom: 2rem;
			list-style: none;
			padding-left: 1rem;
		}
		li{
			gap: 8px;
			display: flex;
			align-items: center;
			color: black;
			font-weight: 600;
		}
		li:before{
			content: "";
			background: url("http://www.constans-med.pl/wp-content/uploads/2026/07/check-3.svg");
			display: inline-block;
			width: 1rem;
			height: 1rem;
		}
		.buttons{
			display: flex;
			gap: 1rem;
			justify-content: center;
		}
		.button{
			font-weight: 600;
			padding: 0.6rem 1rem;
			border-radius: 10px;
			text-transform: uppercase;
			text-align: center;
		}
		.button.primary{
			background-color: var(--dark-blue, #082c6d);
			color: #fff;
		}
		.button.secondary{
			color: var(--dark-blue, #082c6d);
			border: 2px solid var(--dark-blue, #082c6d);
			backdrop-filter: blur(6px);
			background-color: rgba(255,255,255,0.1);
		}
	} 
	section.hero_bar{
		.bar{
			position: relative;
			margin-top: -50px;
			z-index: 999;
			display: flex;
			justify-content: space-evenly;
			background-color: #fefefe;
			border-radius: 2rem;
			padding-top: 20px;
			gap: 10px;
			padding-inline: 1rem;
			box-shadow: 2px 8px 4px 0px rgba(0,0,0,0.1);

			.separator{
				min-width: 1px;
				height: 100px;
				background-color: #bbb;
				margin: auto;
			}

			.column{
				display: flex;
				flex-direction: row;
				gap: 10px;
				align-items: flex-start;
				width: 100%;
				padding-bottom: 1rem;
				padding-top: 1rem;

				.bar_img{
					width: 40px;
					height: 40px;
					object-fit: contain;
				}
				p{
					margin: unset;
				}
				.text{
					display: flex;
					flex-direction: column;
					gap: 0.5rem;
					font-size: 1rem;
				}
				p{
					font-size: 0.8rem;
				}
				.text .heading{
					color: var(--dark-blue);
					font-weight: 600;
				}
			}
		}	
	}
	
	section.main{
		.px_container{
			margin-top: 2rem;
			display: grid;
			grid-template-columns: 1fr 1fr;
			
			.main_text{
				padding-right: 3rem;
				padding-bottom: 4rem;
				
				.bar{
					display: grid;
					grid-template-columns: 1fr 1px 1fr;
					gap: 1rem;
					width: 140%;
					z-index: 20;
					background-color: #fff;
					position: relative;
					border-radius: 1rem;
					border: 1px solid #aaa;
					padding: 10px 1rem;
					
					.separator{
						background-color: #999;
						width: 1px;
						height: 50%;
						min-height: 50px;
						margin: auto;
					}
					.column{
						display: flex;
						gap: 1rem;
						
						p{
							display: flex;
							justify-content: center;
							flex-direction: column;
						}
						img{
							width: 40px;
							margin: auto;
						}
					}
				}
				
			}
			
			.image{
				background-position: 50% 50%;
				background-size: cover;
				border-radius: 2rem;
				position: relative;
				background-repeat: no-repeat;
			}
			.box{
				background-color: var(--dark-blue);
				max-width: 300px;
				position: absolute;
				padding: 1rem;
				color: white;
				right: 1rem;
				bottom: 1rem;
				border-radius: 1rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				.attributes{
					display: grid;
/* 					gap: 10px; */
					grid-column-gap: 1rem;
					grid-template-columns: 30px 200px;
					margin: auto;
				}
				
				h3{
					color: white;
					font-size: 1.3rem;
				}
				img{
					width: 30px;
					margin: auto;
				}
				p{
					word-wrap: balance;
					margin: 0.5rem 0;
				}
			}
		}
	}
	
	section.timeline{
		.icons, .descriptions{
			display: grid;
		}
		.descriptions{
			grid-template-columns: repeat(5, 1fr);
		}
		h2{
 			margin-bottom: 1rem;
			font-size: 1.9rem;
			
		}
		.px_container{
			padding-bottom: 2rem;
			padding-top: 2rem;
			
			.icons{
				padding-left: 4rem;
				padding-right: 1.5rem;
				grid-template-columns: repeat(9, 1fr);
				img{
					width: 65%;
					
				}
				img.icon{
					background-image: url("http://www.constans-med.pl/wp-content/uploads/2026/07/icon_bg.png");
					background-repeat: no-repeat;
					background-position: 50% 50%;
					background-size: contain;
					padding: 1rem;
				}
			}
			
			.step{
				display: grid;
				grid-template-rows: 50px 1fr;
				align-items: center;
				
				img{
					width: 50px;
					object-fit: contain;
					height: 50px;
					margin: auto;
					grid-row: 1;
				}
				
				.text{
					display: grid;
					grid-template-columns: 2rem 1fr;
					grid-template-rows: auto 1fr;
					grid-column-gap: 0.3rem;
					grid-row: 2;
					
					.number{
						grid-column: 1;
						grid-row: 1;
						color: white;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 600;
						height: fit-content;
						margin-top: auto;
						margin-bottom: auto;
						background: url("http://www.constans-med.pl/wp-content/uploads/2026/07/point-point.png");
						background-size: contain;
						background-repeat: no-repeat;
						background-position: 50% 50%;
					}
					.heading{
						grid-column: 2;
						grid-row: 1;
						margin: unset;
						font-size: 0.8rem;
						font-weight: 600;
					}
					.content{
						grid-column: 2;
						grid-row: 2;
						margin: unset;
						font-size: 0.7rem;
					}
						
					
				}
			}
			.arrow{
				display: grid;
				grid-template-rows: 1.5rem 1fr;
/* 				min-width: 45px; */
				position: relative;
				
				
				img{
					grid-row: 1;
					width: 100%;
					height: 100%;
					object-fit: contain;
					margin: auto;
					position: absolute;
					left: -20px;
					width: 60px;
					top: -60px;
				}
			}
		}
	}
	
	section.benefits{
		background-color: var(--dark-blue);
		border-radius: 1rem;
		.px_container{
			padding: 3rem;
		}
		
		h2{
			color: white;
			font-size: 1.9rem;
		}
		.panels{
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1rem;
			padding: 1rem 0;
			
			.panel{
				display: flex;
				gap: 1rem;
				align-items: flex-start;
				color: white;
				
				img{
					width: 50px;
				}
				p{
					margin: unset;
					font-size: 0.8rem;
				}
			}
		}
	}
	
	section.brief{
		margin-top: 2rem;
	}

	section.form
	{
		
		form{
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 0.5rem;
		}
		.submit{
			display: flex;
			justify-content: flex-end;
			grid-column: 2;
			
		}
		.submit input{
			padding: unset;
		}
		.wpcf7-submit{
			background-color: var(--dark-blue);
			border: unset;
		}
		.submit{
			display: flex;
			align-items: center;
			background-color: var(--dark-blue);
			width: fit-content;
			padding: 0 1rem;
			border-radius: 1.2rem;
			font-size: 0.8rem;
			gap: 1rem;
			margin: auto;
		}
		.submit::after{
			content: " ";
			filter: invert(1);
			width: 20px;
			height: 20px;
			display: inline-block;
			background: url("http://www.constans-med.pl/wp-content/uploads/2026/07/paper-plane.svg");
			background-position: 50% 50%;
			background-size: contain;
			background-repeat: no-repeat;
		}
		input, textarea{
			height: 78px;
			border: 1px solid #222;
		}
		.wpcf7-acceptance input{
			height: unset;
		}
		.form-row{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-column-start: 1;
			grid-column-end: 3;
			gap: 0.5rem;
		}
		.wpcf7-form-control-wrap:has(.wpcf7-acceptance){
			grid-column-start: 1;
			grid-column-end: 3;
		}
		.form-row input{
			height: 100%;
		}
		textarea{
			min-height: 78px;
			max-height: 100px;
		}
		p{
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
		}
	
		.px_container{
			display: grid;
			grid-template-columns: 1fr 3fr;
			grid-column-gap: 1rem;
			background: #f8f9fb;
			padding-top: 1rem;
			border-radius: 2rem;
			.text{
				display: flex;
				flex-direction: column;
				padding-top: 1rem;
				padding-bottom: 4rem;
				justify-content: space-between;
				height: 100%;
			}
/* 			
			.wpcf7-form-control-wrap:has(#message){
				grid-column-start: 1;
				grid-column-end: 3;
			} */
			.box{
				background: #fff;
				  border-radius: 1rem;
				  padding: 0.5rem;
			}
			
			.text h2{
				font-size: 1.5rem;
			}
			h4{
				font-size: 1.3rem !important;
				grid-column-start: 1;
				grid-column-end: 3;
			}
			.bottom{
				display: grid;
				grid-template-columns: 40px 1fr;
				background: #fff;
				padding: 1rem;
				border-radius: 1rem;
				gap: 7px;
				border: 1px solid #ccc;
				grid-column-gap: 10px;
				
				.img{
					grid-column: 1;
					grid-row-start: 1;
					grid-row-end: 3;
					margin: auto;
					img{
						margin: auto;
						
					}
				}
				
				.heading{
					grid-row: 1;
					line-height: 1.1;
				}
				.number{
					grid-row: 2;
					font-size: 1.5rem;
					font-weight: 600;
					line-height: 1.2;
				}
				p{
					margin: unset;
					grid-column: 2;
				}
				
			}
		}
	}
}
@media(max-width: 1100px){
	body.page-template-telemedycyna{	
		section.benefits .panels{
			grid-template-columns: repeat(3, 1fr);
		}
	}
	
}

@media(max-width: 850px){
	#main > .fusion-row{
		display: block !important;
	}
	
	body.page-template-telemedycyna{
		.px_container{
			padding-inline: unset;
			
			.uppercase{
				text-align: center;
			}
		}
		
		header div.px_container{
			grid-template-columns: 1fr;
			
			.hero_text, .boxes{
				grid-column: 1;
			}
			
			.hero_text{
				padding: 1rem;
				background-color: #fff;
				border-radius: 1rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				h1{
					text-align: center;
				}
			}

		}
	
		section.hero_bar{
			.bar{
				flex-wrap: wrap;
				
				.column{
					width: 40%;
				}

				.separator{
					display: none;
				}
			}
		} 
		section.main{
			.px_container{
				grid-template-columns: 1fr;
				grid-template-rows: 1fr 1fr;
				
				.main_text{
					padding-right: unset;
					h2{
						text-align: center;
					}
				}
				.main_text .bar{
					width: 100%;
					flex-direction: column;	
				}
				.bar{
					padding: 10px 0.5rem;
					gap: 0.5rem;
				}
			}
		}
		
		section.timeline{
			margin: auto;
			
			h2{
				text-align: center;
				margin-top: 1rem;
				margin-bottom: unset;
			}
			
			.px_container{
				display: grid;
				grid-template-columns: auto fit-content fit-content auto;
				padding-top: unset;
			}
			.icons, .descriptions{
				grid-template-columns: 1fr !important;	
			}
			.icons{
				grid-template-rows: repeat(9, 2.6rem);
				grid-column: 2;
				margin-top: 1.7rem;
			}
			.descriptions{
				grid-template-rows: repeat(5, 5.4rem);
				grid-column: 3;
			}
			
			.icons img{
				max-width: 30px;
				margin: auto;
			}
			.icons img.icon{
				max-width: 40px;
				padding: 8px !important;
			}
			.arrow{
				transform: rotate(90deg);
			}
			
			.step{
				grid-template-rows: unset !important;
			}
		}
		
		section.benefits{
			h2{
				text-align: center;
			}
			.panels{
				grid-template-columns: 1fr 1fr;
			}
		}
		section.brief{
			h2{
				text-align: center;
			}
		}
		
		section.form{
			.px_container{
				grid-template-columns: 1fr;
			}
		}
	}
}

@media(max-width: 550px){
	body.page-template-telemedycyna{
		section.benefits{
			.panels{
				grid-template-columns: 1fr;
			}
		}
		
		section.hero_bar{
			.bar{
				flex-direction: column;
				
				.column{
					width: unset;
				}
			}
		}
		section.main{
			.px_container{
				grid-template-rows: 2fr 1fr;
				.main_text{
					.bar{
						display: flex;
						flex-direction: column;
					}
					.separator{
						display: none;
					}
				}
			}
			
		}
		section.timeline{
			.px_container .icons{
				padding-left: unset;
				gap: 0.14rem;
				margin-top: 0.7rem;
				padding-right: 0.5rem;
			}
			.icons img.icon{
				max-width: 52px;
			}
		}
		section.form{
			p{
				flex-direction: column;
				gap: 10px;
			}
			
			.wpcf7-form-control-wrap{
/* 				width: 100%; */
				padding-inline: 0.3rem;
			}
			
			form{
				grid-template-columns: 1fr;
			}
			.wpcf7-form-control-wrap, .box, .form-row{
				grid-column-start: 1;
				grid-column-end: 3;
			}
			.form-row{
				display: flex;
				flex-direction: column;
				
				input{
					height: 78px;
				}
			}
		}
	}
}