/* Create a class for the softened edge effect */
.soft-edges {
	/* For compatibility with WebKit browsers (Chrome, Safari, Edge) */
	-webkit-mask-image: radial-gradient(
		circle,
		/* Mask is a centered circle */ rgba(0, 0, 0, 1) 60%,
		/* Center is fully opaque (adjust percentage) */ rgba(0, 0, 0, 0) 90%
			/* Edges fade to fully transparent (adjust percentage) */
	);

	/* Standard CSS property for future/other browser support */
	mask-image: radial-gradient(
		circle,
		rgba(0, 0, 0, 1) 60%,
		rgba(0, 0, 0, 0) 90%
	);

	/* Prevent the mask from repeating */
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	/* Standard gradient behavior: covers the whole image from center */
}

/* mobilenav */
/* Target the icons specifically inside the social-links div and force them to black */
.mobile-nav__content .social-links i.text-white {
	color: #000000 !important;
}

/* Keep your main .blog-card__image__link class exactly as it is */

/* 1. The main horizontal shaft of the arrow */
.blog-card__image__link::before {
	content: "";
	width: 32px;
	height: 2px;
	background-color: var(--aigence-white, #ffffff);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 2. The arrow tip (replaces the vertical line) */
.blog-card__image__link::after {
	content: "";
	width: 12px;
	height: 12px;
	background-color: transparent; /* Remove the solid background */
	border-top: 2px solid var(--aigence-white, #ffffff);
	border-right: 2px solid var(--aigence-white, #ffffff);
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 10px; /* Pushes the tip to the right end of the shaft */
	transform: translate(-50%, -50%) rotate(45deg); /* Rotates the borders to point right */
}