.our_approach_process.section-padding-y {
	padding-top: 0;
}

.process-hex-left {
	width: 95%;
}

.process-hex-right {
	margin-top: 48px;
	margin-bottom: 48px;
	width: 95%;
	margin-left: auto;
}

.process-number {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 500px;
	background-color: var(--line-color);
}

.process-number h4 {
	color: var(--grey-1);
	font-size: 18px;
}

.process-line {
	width: 100%;
	height: 3.5px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: var(--line-color);
}

.process-hex-right .process-text {
	text-align: right;
	padding-left: 0;
	padding-right: 24px;
}

.process-text {
	margin-top: -35px;
	padding-left: 24px;
}

.process-text p {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; 
    overflow: hidden; 
    text-overflow: ellipsis;
    width: 100%;
}

.process-svg {
	margin-left: -4px;
	position: relative;
}

.process-hex-right .process-svg {
	margin-left: 0;
	margin-right: 1px;
}

.process-svg svg {
	width: 120px;
	height: auto;
}

.process-svg svg path {
	fill: var(--line-color);
	transition: fill .2s ease;
}

.process-letter.h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	color: var(--grey-1);
}


.empty-hex {
	position: absolute;
	background-color: var(--line-color);
	-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	display: flex;
	justify-content: center;
	align-items: center;
}

.empty-hex.hex-small {
	bottom: 60px;
	left: -140px;
	width: 50px;
	height: 40px;
}

.empty-hex.hex-medium {
	width: 120px;
	height: 110px;
	transform: scale(.8);
}

.empty-hex.hex-large {
	width: 120px;
	height: 110px;
	transform: scale(.9);
}

.empty-hex.hex-1 {
	bottom: -50px;
	right: -130px;

}

.empty-hex.hex-2 {
	bottom: -40px;
	left: -120px;
}

.empty-hex.hex-3 {
	bottom: -30px;
	right: -140px;
}

.empty-hex.hex-4 {
	bottom: -50px;
	left: -120px;
}

.empty-hex.hex-5 {
	bottom: -70px;
	right: -100px;
}

.empty-hex.hex-6 {
	bottom: 0px;
	right: -180px;
	transform: scale(.7);
}

.empty-hex::after {
	content: '';
	top: 1px;
	bottom: 1px;
	left: 1px;
	right: 1px;
	position: absolute;
	background-color: var(--basic-bg);
	-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	z-index: -1;
}

.hex-4 .empty-hex-text h4,
.hex-4 .empty-hex-text span,
.hex-6 .empty-hex-text h4,
.hex-6 .empty-hex-text span {
	color: var(--primary-blue);
}

.empty-hex-text h4,
.empty-hex-text h3,
.empty-hex-text span {
	color: var(--line-color);
	line-height: 1;
}


.in-view .process-svg svg path {
	fill: var(--primary-blue);
}

.in-view .process-line {
	background-color: var(--primary-blue);
}

.in-view .process-number {
	background-color: var(--primary-blue);
}

.in-view .process-number h4 {
	color: var(--basic-white);
}

.in-view .process-letter.h2 {
	color: var(--basic-white);
}

@media (min-width: 540px) {
	.process-hex-left {
		width: 80%;
	}
	
	.process-hex-right {
		width: 80%;
	}
}

@media (min-width: 768px) {
	.process-hex-left {
		width: 72%;
	}

	.process-svg {
		margin-left: -5px;
	}

	.process-hex-right .process-svg {
		margin-left: 0;
		margin-right: 1px;
	}

	.process-text {
		margin-top: -40px;
	}
}


@media (min-width: 992px) {
	.process-svg svg {
		width: 250px;
	}

	.process-svg {
		margin-left: -8px;
	}

	.process-hex-right .process-svg {
		margin-right: -3px;
	}

	.process-line {
		height: 7.5px;
	}

	.process-letter.h2 {
		font-size: 70px;
	}

	.process-hex-right {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.empty-hex.hex-medium {
		width: 140px;
		height: 120px;
		transform: scale(.9);
	}

	.empty-hex.hex-large {
		width: 160px;
		height: 140px;
		transform: scale(1);
	}

	.empty-hex.hex-small {
		bottom: 70px;
		left: -210px;
		width: 70px;
		height: 60px;
	}

	.empty-hex.hex-1 {
		bottom: -50px;
		right: -150px;
	}

	.empty-hex.hex-2 {
		bottom: -60px;
		left: -160px;
	}

	.empty-hex.hex-3 {
		bottom: 0px;
		right: -190px;
	}

	.empty-hex.hex-4 {
		bottom: -10px;
		left: -150px;
	}

	.empty-hex.hex-5 {
		bottom: -70px;
		right: -140px;
	}

	.empty-hex.hex-6 {
		bottom: 50px;
		right: -230px;
		transform: scale(.7);
	}

}

@media (min-width: 1200px) {
	.process-hex-left {
		width: 80%;
	}

	.process-hex-right {
		width: 80%;

	}

	.process-svg {
		margin-left: -12px;
	}

	.process-hex-right .process-svg {
		margin-right: -5.5px;
	}
	
	.process-svg svg {
		width: auto;
	}

	.process-line {
		height: 10px;
		margin-left: -5px;
	}

	.process-letter.h2 {
		font-size: 96px;
	}

	.process-text p {
		width: 70%;
	}

	.process-hex-right .process-text p {
		width: 70%;
		margin-left: auto;
	}

	.process-text {
		margin-top: -50px;
	}

	.process-number {
		width: 60px;
		height: 60px;
	}

	.process-number h4 {
		font-size: 32px;
	}

	.empty-hex.hex-small {
		bottom: 110px;
		left: -280px;
		width: 90px;
		height: 70px;
	}

	.empty-hex.hex-medium {
		width: 180px;
		height: 160px;
		transform: scale(1);
	}

	.empty-hex.hex-large {
		width: 220px;
		height: 200px;
		transform: scale(1);
	}

	.empty-hex.hex-1 {
		bottom: -50px;
		right: -190px;
	}

	.empty-hex.hex-2 {
		bottom: -80px;
		left: -210px;
	}

	.empty-hex.hex-3 {
		bottom: 0px;
		right: -230px;
	}

	.empty-hex.hex-4 {
		bottom: -10px;
		left: -200px;
	}

	.empty-hex.hex-5 {
		bottom: -90px;
		right: -180px;
	}

	.empty-hex.hex-6 {
		bottom: 75px;
		right: -270px;
		transform: scale(.7);
	}
}

@media (min-width: 1400px) {
	.process-hex-left {
		width: 70%;
	}
	
	.process-hex-right {
		width: 70%;
	}

	.process-text p {
		width: 60%;
	}

	.process-text p {
		display: inline-block;
	}

	.process-hex-right .process-text p {
		width: 60%;
		margin-left: auto;
	}

	.empty-hex.hex-small {
		bottom: 100px;
		left: -400px;
		width: 110px;
		height: 100px;
	}

	.empty-hex.hex-large {
		width: 240px;
		height: 220px;
		transform: scale(1);
	}

	.empty-hex.hex-2 {
		bottom: -70px;
		left: -290px;
	}

	.empty-hex.hex-3 {
		bottom: -30px;
		right: -310px;
	}

	.empty-hex.hex-4 {
		bottom: -10px;
		left: -200px;
	}

	.empty-hex.hex-5 {
		bottom: -90px;
		right: -240px;
	}

	.empty-hex.hex-6 {
		bottom: 75px;
		right: -380px;
		transform: scale(.8);
	}
}