/* =========================================
   HERO BUTTONS
========================================= */

.custom-hero-buttons {
	display: flex;
	align-items: center;
	gap: 16px;
}


/* =========================================
   COMMON BUTTON STYLE
========================================= */

.custom-book-button,
.custom-doctor-button {
	height: 58px;
	box-sizing: border-box;

	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;

	text-decoration: none !important;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}


/* =========================================
   BOOK A CONSULTATION
========================================= */

.custom-book-button {
	width: 302px;

	padding: 0 20px;

	background: #ed5634;
	color: #ffffff !important;

	border: 0;
	border-radius: 8px;

	gap: 9px;
}

.custom-book-button:hover {
	color: #ffffff !important;

	background: hsl(12 76% 48%) !important;

	/* Light smooth expansion */
	transform: scale(1.020);

	/* Soft shadow */
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}


/* =========================================
   PHONE ICON
========================================= */

.book-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;

	flex-shrink: 0;
}

.book-icon svg {
	width: 18px;
	height: 18px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================================
   BUTTON TEXT
========================================= */

.book-text {
	white-space: nowrap;
}


/* =========================================
   CHEVRON
========================================= */

.book-chevron {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 16px;
	height: 16px;

	margin-left: 4px;

	flex-shrink: 0;
}

.book-chevron svg {
	width: 16px;
	height: 16px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.custom-book-button:hover .book-chevron svg {
	transform: translateX(3px);
}


/* =========================================
   MEET DR QUANG DAO
========================================= */

.custom-doctor-button {
	width: 254px;

	padding: 0 20px;

	background: transparent;
	color: #ffffff !important;

	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 8px;
}

.custom-doctor-button:hover {
	color: #ffffff !important;

	background: rgb(255 255 255 / 41%);

	border-color: #ffffff;


	/* Soft shadow */
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

	.custom-hero-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.custom-book-button,
	.custom-doctor-button {
		width: 100%;
		max-width: 100%;
	}

}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

	.custom-book-button,
	.custom-doctor-button,
	.book-chevron svg {
		transition: none !important;
	}

	.custom-book-button:hover,
	.custom-doctor-button:hover {
		transform: none !important;
	}

}
















/* =========================================
   LEARN MORE ABOUT DR DAO
========================================= */

.custom-learn-button {
	width: 300px;
	height: 58px;
	box-sizing: border-box;

	padding: 0 20px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 9px;

	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;

	text-decoration: none !important;

	background: #ed5634;
	color: #ffffff !important;

	border: 0;
	border-radius: 8px;

	transition:
		background-color 0.3s ease,
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease;
}

.custom-learn-button:hover {
	color: #ffffff !important;

	background: hsl(12 76% 48%) !important;

	/* Same expansion effect */
	transform: scale(1.020);

	/* Same shadow effect */
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}


/* =========================================
   LEARN MORE CHEVRON
========================================= */

.learn-chevron {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 16px;
	height: 16px;

	margin-left: 4px;

	flex-shrink: 0;
}

.learn-chevron svg {
	width: 16px;
	height: 16px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.custom-learn-button:hover .learn-chevron svg {
	transform: translateX(3px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
	.custom-learn-button {
		width: 100%;
		max-width: 100%;
	}
}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
	.custom-learn-button,
	.learn-chevron svg {
		transition: none !important;
	}

	.custom-learn-button:hover {
		transform: none !important;
	}
}










/* =========================================
   VIEW OUR LOCATIONS
========================================= */

.custom-location-button {
	width: 264px;
	height: 58px;
	box-sizing: border-box;

	padding: 0 20px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 9px;

	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;

	text-decoration: none !important;

	background: #ed5634;
	color: #ffffff !important;

	border: 0;
	border-radius: 8px;

	transition:
		background-color 0.3s ease,
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease;
}


/* =========================================
   HOVER
========================================= */

.custom-location-button:hover {
	color: #ffffff !important;

	background: hsl(12 76% 48%) !important;

	transform: scale(1.020);

	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}


/* =========================================
   LOCATION ICON
========================================= */

.location-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;

	flex-shrink: 0;
}

.location-icon svg {
	width: 18px;
	height: 18px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================================
   TEXT
========================================= */

.location-text {
	white-space: nowrap;
}


/* =========================================
   CHEVRON
========================================= */

.location-chevron {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 16px;
	height: 16px;

	margin-left: 4px;

	flex-shrink: 0;
}

.location-chevron svg {
	width: 16px;
	height: 16px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.custom-location-button:hover .location-chevron svg {
	transform: translateX(3px);
}



.custom-location-button {
	display: flex;
	margin: 0 auto;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
	.custom-location-button {
		width: 100%;
		max-width: 100%;
	}
}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
	.custom-location-button,
	.location-chevron svg {
		transition: none !important;
	}

	.custom-location-button:hover {
		transform: none !important;
	}
}









.pathway-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.pathway-call-btn,
.pathway-learn-btn {
	height: 58px;
	box-sizing: border-box;
	padding: 0 20px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;

	text-decoration: none !important;
	border-radius: 8px;
}


/* =========================================
   CALL US
========================================= */

.pathway-call-btn {
	width: 189px;
	gap: 9px;

	background: #ed5634;
	color: #fff !important;
	border: 0;

	transition:
		background-color 0.3s ease,
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pathway-call-btn:hover {
	background: hsl(12 76% 48%) !important;
	color: #fff !important;

	/* Expansion */
	transform: scale(1.020);
}


/* =========================================
   PHONE ICON
========================================= */

.pathway-call-icon {
	width: 18px;
	height: 18px;

	display: flex;
	align-items: center;
	justify-content: center;

	flex-shrink: 0;
}

.pathway-call-icon svg {
	width: 18px;
	height: 18px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================================
   CALL ARROW
========================================= */

.pathway-call-arrow {
	width: 16px;
	height: 16px;
	margin-left: 4px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.pathway-call-arrow svg {
	width: 16px;
	height: 16px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition: transform 0.3s ease;
}

.pathway-call-btn:hover .pathway-call-arrow svg {
	transform: translateX(3px);
}


/* =========================================
   LEARN MORE ABOUT DR DAO
========================================= */

.pathway-learn-btn {
	width: 304px;

	background: transparent;
	color: #fff !important;

	border: 2px solid rgba(255, 255, 255, 0.7);

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


/* Hover effects — NO expansion */
.pathway-learn-btn:hover {
	color: #ffffff !important;

	background: rgba(255, 255, 255, 0.08) !important;

	border-color: #ffffff !important;

	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);

	transform: none !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

	.pathway-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.pathway-call-btn,
	.pathway-learn-btn {
		width: 100%;
	}
}