section.what-is-webhook {
	margin-bottom: 5px;
}
section.what-is-webhook .box {
	padding: 50px 45px;
	overflow: hidden;
}
section.what-is-webhook .left {
	position: relative;
}
section.what-is-webhook .right {
	position: relative;
}
section.what-is-webhook h2 {
	color: var(--color-darker);
}
section.what-is-webhook h2 span {
	color: var(--color);
}

section.what-is-webhook .grid {
	grid-template-columns: 1fr 1fr;
}
section.what-is-webhook svg {
	width: 800px;
	height: 240px;
	position: absolute;
	right: 0;
	bottom: -17px;
}
section.what-is-webhook .c-dashed-line__path {
	animation: c-dashed-line-path 3s linear infinite;
	fill: none;
	stroke: var(--color-darker);
	stroke-dasharray: 200 740;
	stroke-dashoffset: 0;
	stroke-width: 19px;
	stroke-linecap: round;
}
section.what-is-webhook .c-dashed-line__dash {
	fill: none;
	stroke: rgba(255, 255, 255, 0.5);
	stroke-dasharray: 1 16;
	stroke-width: 2px;
	stroke-linecap: round;
}
@keyframes c-dashed-line-path {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: 940;
	}
}
@media all and (max-width: 1140px) {
	section.what-is-webhook .grid {
		grid-template-columns: 1fr;
	}
	section.what-is-webhook svg {
		bottom: -56px;
		right: -38px;
	}
}
@media all and (max-width: 960px) {
	section.what-is-webhook .box {
		padding-bottom: 100px;
	}
}
@media all and (max-width: 576px) {
	section.what-is-webhook .box {
		padding: 15px;
		padding-bottom: 78px;
	}
	section.what-is-webhook svg {
		bottom: -81px;
		right: 0;
	}
}