@import "settings/variables";

.civi-modern-heading {
	max-width: 100%;

	.elementor-heading-title {
		font-size: 28px;
		font-weight: 600;
		line-height: 1.3;
	}

	.heading-secondary {
		font-size: 16px;
	}

	.heading-description {
		font-size: 18px;
		line-height: 1.44;
	}

	.heading-primary-wrap,
	.heading-secondary-wrap {
		line-height: 1;
	}

	.heading-primary,
	.heading-secondary,
	.heading-description,
	.heading-divider {
		display: inline-block;
		margin-bottom: 0;
		vertical-align: middle;
	}

	a {
		display: block;
		color: inherit;
		font-size: inherit;

		&:hover {
			color: inherit;
			font-size: inherit;
		}
	}

	mark {
		background-color: transparent;
		padding: 0;
		span {
			margin-left: 5px;
		}
	}

	.heading-description-wrap {
		margin-top: 12px;
		&:first-child {
			margin-top: 0;
		}
	}

	.heading-secondary-wrap {
		margin-bottom: 10px;
	}

	.heading-divider-wrap {
		line-height: 0;
		margin-top: 10px;
	}

	.heading-divider {
		height: 2px;
		width: 100px;
		background: $primary_color;
	}
}

.custom-mark {
	.civi-modern-heading {
		mark {
			position: relative;
			z-index: 2;
			font-style: italic;
			&::before {
				background-image: url("mark-heading.webp");
				content: "";
				width: 100%;
				position: absolute;
				background-size: 100%;
				background-repeat: no-repeat;
				top: 70%;
				height: 100%;
				z-index: -1;
			}
		}
	}
	&.top90{
		.civi-modern-heading {
			mark::before {
				top: 90%;
			}
		}
	}
}

.civi-link-animate-border {
	.heading-primary {
		a {
			&:hover {
				mark {
					&:before {
						transform: scaleX(0) translateZ(0);
						transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
					}

					&:after {
						transform: scaleX(1) translateZ(0);
						transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s,
							-webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
					}
				}
			}

			mark {
				position: relative;
				display: inline-block;
				line-height: 1;
				padding: 3px 0;

				&:before,
				&:after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 1px;
					background: #e0e0e0;
					transform-origin: right;
					transform: scaleX(1) translateZ(0);
					transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s,
						-webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
				}

				&:after {
					transform-origin: left;
				}

				&:after {
					transform: scaleX(0) translateZ(0);
					transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
				}
			}
		}
	}
}

.civi-link-animate-border-02 {
	.heading-primary {
		a {
			&:hover {
				mark {
					&:before {
						width: 100%;
						left: 0;
						right: auto;
					}
				}
			}

			mark {
				position: relative;
				display: inline-block;
				line-height: 1;
				padding: 3px 0;

				&:before {
					content: "";
					width: 0;
					height: 1px;
					position: absolute;
					left: auto;
					right: 0;
					bottom: 0;
					transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
					background: #e0e0e0;
				}
			}
		}
	}
}
