body {

	font-family: 'IBM Plex Sans Arabic', sans-serif;

}

.medical-pattern {

	background-image: radial-gradient(#015C92 0.5px, transparent 0.5px), radial-gradient(#015C92 0.5px, #f8fafc 0.5px);

	background-size: 20px 20px;

	background-position: 0 0, 10px 10px;

	opacity: 0.05;

}

.iris-gradient {

	background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.8) 100%);

}



.kerato-hero-cta-group {

	display: grid;

	grid-template-columns: 1fr;

	gap: 0.75rem;

	width: 100%;

	max-width: 36rem;

}



@media (min-width: 640px) {

	.kerato-hero-cta-group {

		grid-template-columns: 1fr 1fr;

		gap: 1rem;

	}

}



.kerato-hero-cta {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	min-height: 3.25rem;

	padding: 0.875rem 1.25rem;

	border-radius: 0.75rem;

	font-size: 1rem;

	font-weight: 700;

	line-height: 1.25;

	text-align: center;

	text-decoration: none;

	overflow: hidden;

	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;

}



.kerato-hero-cta:focus {

	outline: none;

}



.kerato-hero-cta:focus-visible {

	outline: 2px solid rgba(255, 255, 255, 0.45);

	outline-offset: 2px;

}



.kerato-hero-cta-inner {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 0.5rem;

	width: 100%;

	max-width: 100%;

}



.kerato-hero-cta-label {

	flex: 0 1 auto;

	text-align: center;

}



.kerato-hero-cta-icon {

	flex: 0 0 1.25rem;

	width: 1.25rem;

	height: 1.25rem;

	font-size: 1.25rem !important;

	line-height: 1.25rem;

}



.kerato-hero-cta-icon--arrow {

	opacity: 0.7;

	transition: transform 0.3s ease;

}



.kerato-hero-cta-primary {

	color: #fff;

	background: linear-gradient(to left, #015C92, #015C92, #004a75);

	box-shadow: 0 10px 25px -5px rgba(1, 92, 146, 0.35);

}



.kerato-hero-cta-primary:hover {

	transform: translateY(-2px);

	box-shadow: 0 16px 32px -6px rgba(1, 92, 146, 0.45);

}



.kerato-hero-cta-primary:hover .kerato-hero-cta-icon--arrow {

	transform: translateX(-4px);

}



.kerato-hero-cta-primary::before {

	content: '';

	position: absolute;

	inset: 0;

	z-index: 0;

	background: linear-gradient(

		105deg,

		transparent 35%,

		rgba(255, 255, 255, 0.14) 50%,

		transparent 65%

	);

	transform: translateX(120%);

	transition: transform 0.65s ease;

	pointer-events: none;

}



.kerato-hero-cta-primary:hover::before {

	transform: translateX(-120%);

}



.kerato-hero-cta-primary .kerato-hero-cta-inner {

	position: relative;

	z-index: 1;

}



.kerato-hero-cta-whatsapp {

	color: #fff;

	background: rgba(255, 255, 255, 0.07);

	border: 1px solid rgba(255, 255, 255, 0.25);

	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);

	backdrop-filter: blur(12px);

	-webkit-backdrop-filter: blur(12px);

}



.kerato-hero-cta-whatsapp:hover {

	transform: translateY(-2px);

	background: rgba(16, 185, 129, 0.1);

	border-color: rgba(52, 211, 153, 0.45);

	box-shadow: 0 10px 24px -8px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);

}



.kerato-hero-cta-whatsapp:hover .kerato-hero-cta-icon--arrow {

	transform: translateX(-4px);

}



.kerato-hero-cta-icon--whatsapp {

	color: #34d399;

	transition: color 0.3s ease;

}



.kerato-hero-cta-whatsapp:hover .kerato-hero-cta-icon--whatsapp {

	color: #6ee7b7;

}



.kerato-hero-cta-icon--balance {

	visibility: hidden;

}



.kerato-hero-cta-whatsapp:hover .kerato-hero-cta-icon--balance {

	transform: none;

}