:root {
	--primary-color: #cb0c0c;
	--secondary-color: #1a365d;
	--light-bg: #f8f9fa;
	--light-text: #44596e;
	--border-color: #1a365d;
	--bg-light: #fff9f8;
	--primary-dark: #952624;
	--primary-light: #ff4444;
	--text-dark: #081727;
	--text-medium: #4a4a4a;
	--text-light: #6b7280;
	--bg-light: #f9fafb;
	--bg-white: #ffffff;
	--border-color: #e5e7eb;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--border-radius: 12px;
	--shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
	--shadow-lg: 0 3px 6px rgba(0, 0, 0, 0.15);
	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}

body {
	font-family: "Figtree", sans-serif;
	padding-top: 10rem;
	color: #44596E
}

a {
	text-decoration: none
}

.top-header {
	background: #fff;
	padding: .65rem 0 0;
	border-bottom: 0 solid #e9ecef
}

.logo-container {
	display: flex;
	align-items: center;
	gap: 1rem
}

.logo {
	width: 60px;
	height: 60px;
	background: var(--primary-color);
	border: 3px solid var(--primary-color);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 1.5rem
}

.logo-text h1 {
	color: var(--primary-color);
	font-size: 2rem;
	font-weight: 700;
	margin: 0;
	letter-spacing: 2px
}

.logo-text p {
	color: #666;
	font-size: .75rem;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1px
}

.search-box {
	position: relative
}

.search-box input {
	border-radius: 9px;
	padding: .75rem 3rem .75rem 1.5rem;
	border: 2px solid #cfdeef;
	width: 100%
}

.search-box input:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 .2rem rgb(193 56 50 / .15)
}

.search-box .search-icon {
	position: absolute;
	right: .26em;
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary-color);
	cursor: pointer;
	background: #f9eaea;
	padding: 8px 12px;
	border-radius: 6px
}

.appointment-btn {
	background: var(--primary-color);
	color: #fff;
	padding: .45rem .98rem;
	border-radius: 8px;
	text-decoration: none;
	position: relative;
	display: block;
	align-items: center;
	gap: .5rem;
	font-weight: 500;
	transition: all 0.3s ease
}

.appointment-btn:after,
.appointment-btn:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	padding: 2px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-animation: 4s gradient-spin linear infinite;
	animation: 4s gradient-spin linear infinite;
	border-radius: 9999999px;
	background-image: conic-gradient(from var(--angle), transparent 70%, rgb(216 106 212 / .231373), rgb(151 110 221 / .309804), rgb(162 110 220 / .2), #fff0)
}

.sc-pad {
	padding: 60px 0
}

@-webkit-keyframes gradient-spin {
	to {
		--angle: 360deg
	}
}

@keyframes gradient-spin {
	to {
		--angle: 360deg
	}
}

.appointment-btn:hover {
	background: #a02e29;
	color: #fff;
	box-shadow: 0 4px 12px rgb(193 56 50 / .3)
}

.appointment-label {
	font-size: .7rem;
	display: block
}

nav.bg-white {
	background-color: #fbf5f5 !important
}

.btn-patient {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(90deg, #eaefff 0%, #fbd7d7 100%);
	color: #0d1b2a;
	border: 1px solid #fff;
	border-radius: 8px;
	font-weight: 500;
	padding: .93rem;
	transition: all 0.3s ease
}

.btn-patient:hover {
	background: linear-gradient(90deg, #eaefff 0%, #f3cece 100%);
	color: #0d1b2a;
	border: 1px solid #f3cece
}

.btn-patient svg {
	width: 20px;
	height: 20px;
	fill: #da291c
}

.dropdown-menu {
	border: none;
	border-radius: .75rem;
	padding: .5rem 0;
	box-shadow: 0 8px 24px rgb(0 0 0 / .12);
	transition: all 0.2s ease;
	animation: fadeIn 0.2s ease-in-out
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.dropdown-item {
	font-size: .92rem;
	font-weight: 500;
	padding: .6rem 1rem;
	color: #1a365d;
	transition: all 0.2s ease;
	border-radius: 0rem
}

.dropdown-item:hover {
	background-color: rgb(220 53 69 / .08);
	color: #b3001b;
	transform: translateX(0)
}

.dropdown-submenu {
	position: relative
}

.dropdown-submenu>.dropdown-menu {
	top: 0;
	left: 100%;
	margin-left: .25rem;
	margin-right: .25rem
}

.dropdown-toggle::after {
	display: none !important
}

.nav-link .arrow,
.dropdown-item .arrow {
	transition: transform 0.25s ease;
	font-size: .75rem;
	margin-left: 6px
}

.show>.nav-link .arrow,
.show>.dropdown-item .arrow {
	transform: rotate(180deg)
}

.navbar-nav {
	color: #081727;
	font-weight: 500;
	font-size: .92rem
}

.navbar-nav .btn {
	font-size: .86rem
}

.navbar-collapse {
	display: none !important
}

.navbar .nav-link {
	position: relative
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
	color: #d9232d !important
}

.mobile-footer {
	background: linear-gradient(180deg, #ffffff 0%, #fcefef 100%) !important;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 -3px 10px rgb(0 0 0 / .1);
	border-top: none !important
}

.footer-item {
	flex: 1;
	color: #cb0c0c !important;
	transition: all 0.2s ease-in-out
}

.footer-item i {
	font-size: 1.5rem;
	display: block;
	margin-bottom: 3px;
	color: #cb0c0c !important
}

.footer-item p {
	font-size: .85rem;
	margin: 0;
	color: #cb0c0c !important;
	font-weight: 500
}

.footer-item:hover i,
.footer-item:hover p {
	color: #b81e26 !important
}

.bannerone {
	background: url(../images/bannerone-bg1.png);
	background-size: cover;
	background-repeat: no-repeat
}

.carousel-item {
	min-height: 490px
}

.carousel-content {
	display: flex;
	align-items: center;
	min-height: 510px;
	padding: 40px 0
}

.badge-custom {
	background-color: #fcf5f5;
	border: 1px solid rgb(217 35 45 / .1);
	color: var(--primary-color);
	padding: 9px 12px;
	border-radius: 9px;
	font-weight: 500;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px
}

.badge-custom::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background-color: #28a745;
	color: #fff;
	border-radius: 50%;
	font-size: 12px
}

.main-heading {
	font-size: 3rem;
	color: #72869b;
	font-weight: 600;
	margin-bottom: 0
}

.highlight-heading {
	font-size: 3.6rem;
	color: #022344;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 30px;
	text-shadow: 3px 1px 3px #c5c5c5
}

.breadcrumb-section {
	background-color: #fbf6f7;
	padding: 12px 0
}

.breadcrumb {
	margin-bottom: 0
}

.breadcrumb-item a {
	color: var(--text-medium);
	text-decoration: none;
	transition: color var(--transition-fast)
}

.breadcrumb-item a:hover {
	color: var(--primary-red)
}

.breadcrumb-item.active {
	color: var(--text-light)
}

.features {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 30px
}

.feature-item {
	color: #28333e;
	font-size: 17px;
	position: relative;
	padding-left: 0
}

.feature-item::after {
	content: "|";
	margin-left: 20px;
	color: #ccc
}

.feature-item:last-child::after {
	content: ""
}

.btn-primary-custom {
	background-color: var(--primary-color);
	border: none;
	padding: 14px 32px;
	font-size: 16px;
	border-radius: 6px;
	color: #fff;
	transition: all 0.3s
}

.btn-primary-custom:hover {
	background-color: #b03d3d;
	transform: translateY(-2px);
	color: #fff;
	box-shadow: 0 4px 12px rgb(201 74 74 / .3)
}

.btn-secondary-custom {
	background-color: #fff;
	border: 2px solid #ddd;
	padding: 14px 32px;
	font-size: 16px;
	border-radius: 6px;
	color: #555;
	transition: all 0.3s
}

.btn-secondary-custom:hover {
	border-color: var(--primary-color);
	color: var(--primary-color)
}

.kidney-illustration {
	position: relative;
	max-width: 100%;
	height: auto
}

.kidney-container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center
}

.kidney-svg {
	max-width: 500px;
	width: 100%;
	height: auto
}

.carousel-indicators button {
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background-color: #ccc
}

.carousel-indicators .active {
	background-color: var(--primary-color)
}

.ainu-hero-section {
	padding: 60px 0 40px;
	background: #fff
}

.ainu-hero-title {
	font-size: 2.5rem;
	font-weight: 700;
	color: #333;
	margin-bottom: 3rem;
	text-align: center
}

.ainu-hero-title .ainu-highlight {
	color: var(--primary-color)
}

.ainu-highlight {
	color: var(--primary-color)
}

.ainu-title {
	font-size: 2.25rem;
	font-weight: 700;
	color: #081727;
	margin-bottom: 2rem;
	text-align: center
}

.ainu-feature-card {
	background: #fff;
	border-radius: 12px;
	padding: 2rem 1.5rem;
	height: 100%;
	box-shadow: 0 2px 10px rgb(0 0 0 / .08);
	border: 1px solid #f0f0f0;
	transition: transform 0.3s ease, box-shadow 0.3s ease
}

.ainu-feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 20px rgb(0 0 0 / .12)
}

.ainu-feature-icon {
	width: 70px;
	height: 70px;
	margin: 0 auto 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff5f5;
	border-radius: 12px
}

.ainu-feature-icon i {
	font-size: 2rem;
	color: var(--primary-color)
}

.ainu-feature-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #28333e;
	margin-bottom: 1rem;
	text-align: center
}

.ainu-feature-description {
	font-size: .95rem;
	color: #666;
	line-height: 1.6;
	text-align: center
}

.ainu-stats-section {
	padding: 10px 0 60px
}

.ainu-stat-item {
	text-align: center
}

.ainu-stat-number {
	font-size: 3rem;
	font-weight: 700;
	color: #081727;
	margin-bottom: .5rem
}

.ainu-stat-label {
	font-size: 1.1rem;
	color: #081727;
	font-weight: 500
}

.stats-card {
	background: url(../images/statsbg.png);
	box-shadow: 0 2px 10px #dbddef;
	border: 0;
	border-radius: 12px
}

.centres-section {
	padding: 60px 0;
	background-color: #f6f7f9
}

.section-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-dark);
	text-align: center;
	margin-bottom: 1.6rem
}

.section-title .highlight {
	color: var(--primary-color)
}

.centre-card {
	background: #fff;
	border-radius: 9px;
	padding: 1.2rem;
	height: 100%;
	box-shadow: 0 0 6px #e4eaf0;
	border: 1px solid #e8f3fe;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	overflow: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease
}

.centre-card:hover {
	border-color: #cb0c0c;
	box-shadow: 0 4px 12px #e4eaf0;
	transform: translateY(-5px)
}

.centre-icon {
	width: 80px;
	height: 80px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	font-size: 2.5rem;
	color: #fff
}

.icon-green {
	background: linear-gradient(135deg, #4caf50, #45a049)
}

.icon-blue {
	background: linear-gradient(135deg, #2196f3, #1976d2)
}

.icon-purple {
	background: linear-gradient(135deg, #9c27b0, #7b1fa2)
}

.icon-yellow {
	background: linear-gradient(135deg, #ffc107, #ffa000)
}

.icon-red {
	background: linear-gradient(135deg, #e57373, #d32f2f)
}

.icon-cyan {
	background: linear-gradient(135deg, #00bcd4, #0097a7)
}

.icon-pink {
	background: linear-gradient(135deg, #e91e63, #c2185b)
}

.icon-indigo {
	background: linear-gradient(135deg, #5c6bc0, #3949ab)
}

.icon-orange {
	background: linear-gradient(135deg, #ff9800, #f57c00)
}

.centre-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 1.5rem;
	min-height: 60px;
	display: flex;
	align-items: center
}

.know-more-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	padding: .75rem 1.5rem;
	background: #fff5f5;
	border-radius: 8px;
	transition: all 0.3s ease
}

.know-more-btn:hover {
	background: var(--primary-color);
	color: #fff;
	transform: translateX(4px)
}

.know-more-btn i {
	transition: transform 0.3s ease
}

.know-more-btn:hover i {
	transform: translateX(4px)
}

.doctors-section {
	padding: 60px 0
}

.doctor-card-mobile {
	background: #fff;
	border-radius: 9px;
	padding: 1.2rem;
	margin-bottom: 1rem;
	box-shadow: 0 2px 8px #e4eaf0;
	border: 1px solid #e8f3fe
}

.doctor-image {
	width: 136px;
	height: 136px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 1.5rem;
	margin: 0 auto 18px
}

.doctor-image-mobile {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0
}

.doctor-name {
	font-size: 1.32rem;
	font-weight: 700;
	margin-bottom: .4rem
}

.doctor-name-mobile {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: .25rem
}

.doctor-title {
	font-size: .92rem;
	font-weight: 500;
	margin-bottom: 1rem;
	line-height: 1.4
}

.doctor-title-mobile {
	color: var(--primary-color);
	font-size: .85rem;
	font-weight: 500;
	margin-bottom: .5rem;
	line-height: 1.3
}

.doctor-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	color: var(--text-muted);
	font-size: .9rem;
	margin-bottom: .75rem
}

.doctor-info-mobile {
	display: flex;
	align-items: center;
	gap: .4rem;
	color: var(--text-muted);
	font-size: .85rem;
	margin-bottom: .5rem
}

.doctor-info i,
.doctor-info-mobile i {
	color: #4caf50;
	font-size: 1rem
}

.doctor-info span {
	color: #90a0b1
}

.location-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	color: var(--text-muted);
	font-size: .9rem;
	margin-bottom: 1.5rem
}

.location-info-mobile {
	display: flex;
	align-items: center;
	gap: .4rem;
	color: var(--text-muted);
	font-size: .85rem;
	margin-bottom: .75rem
}

.location-info i,
.location-info-mobile i {
	color: var(--text-muted)
}

.button-group {
	display: flex;
	gap: .6rem;
	width: 100%
}

.button-group-mobile {
	display: flex;
	gap: .5rem;
	margin-top: .5rem
}

.doctor-card {
	background: #fff;
	border-radius: 9px;
	padding: 1.2rem;
	height: 100%;
	box-shadow: 0 2px 12px rgb(0 0 0 / .08);
	border: 1px solid #f0f0f0;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: center
}

.dr-grid {
	display: flex;
	flex-direction: column
}

.doctor-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 8px 12px rgb(237 199 199 / .15);
	border: 1px solid #ffb4b4
}

.doctor-info i {
	color: #4caf50;
	font-size: 1rem
}

.location-info i {
	color: var(--text-muted)
}

.btn-view-profile {
	flex: 1;
	padding: .65rem .4rem;
	background: #fff;
	border: 2px solid #e0e0e0;
	color: var(--text-dark);
	font-weight: 500;
	border-radius: 6px;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	font-size: 13px
}

.btn-view-profile:hover {
	border-color: var(--primary-color);
	color: var(--primary-color)
}

.btn-book-appointment {
	flex: 1;
	padding: .65rem .5rem;
	background: var(--primary-color);
	border: 2px solid var(--primary-color);
	color: #fff;
	font-weight: 500;
	border-radius: 6px;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	font-size: .8rem
}

.btn-book-appointment:hover {
	background: #c82333;
	border-color: #c82333;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgb(220 53 69 / .3)
}

.btn-view-all {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	padding: .875rem 1.6rem;
	background: #fff;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	font-weight: 600;
	font-size: 1.1rem;
	border-radius: 8px;
	transition: all 0.3s ease;
	text-decoration: none
}

.btn-view-all:hover {
	background: var(--primary-color);
	color: #fff
}

.btn-view-all i {
	transition: transform 0.3s ease
}

.btn-view-all:hover i {
	transform: translateX(4px)
}

.desktop-view {
	display: block
}

.mobile-view {
	display: none
}

.locations-section {
	background-color: #fff
}

.location-card {
	background: #fff;
	border-radius: 9px;
	padding: 1.2rem;
	height: 100%;
	box-shadow: 0 2px 12px #e4eaf0;
	border: 1px solid #f0f0f0;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column
}

.location-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 24px rgb(0 0 0 / .12)
}

.location-header {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin-bottom: .5rem
}

.location-icon {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.location-icon i {
	font-size: 1.25rem;
	color: var(--text-muted)
}

.location-name {
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 0rem
}

.location-address {
	font-size: .88rem;
	color: #768798;
	line-height: 1.4;
	margin-bottom: 1.3rem;
	flex-grow: 1
}

.location-phone {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: var(--text-dark);
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 1.5rem
}

.location-phone i {
	color: var(--text-muted);
	font-size: 1.1rem
}

.location-actions {
	display: flex;
	gap: .5rem;
	justify-content: space-between;
	align-items: center
}

.btn-directions {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem .85rem;
	background: #fff;
	border: 1px solid #e4ecf5;
	color: var(--text-dark);
	font-weight: 600;
	font-size: .84rem;
	border-radius: 6px;
	transition: all 0.3s ease;
	text-decoration: none
}

.btn-directions i {
	color: var(--blue-link)
}

.btn-directions:hover {
	border-color: var(--blue-link);
	color: var(--blue-link)
}

.btn-know-more {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem .85rem;
	background: #fff5f5;
	border: none;
	color: var(--primary-color);
	font-weight: 600;
	font-size: .84rem;
	border-radius: 6px;
	transition: all 0.3s ease;
	text-decoration: none
}

.btn-know-more:hover {
	background: var(--primary-color);
	color: #fff
}

.btn-know-more i {
	transition: transform 0.3s ease
}

.btn-know-more:hover i {
	transform: translateX(4px)
}

.health-talks-section {
	padding: 60px 0;
	background: #f8f8f8
}

.video-card {
	background: #fff;
	border-radius: 9px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgb(0 0 0 / .08);
	border: 1px solid #f0f0f0;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	flex: 1 1 calc(25% - 1.125rem);
	min-width: 280px;
	display: flex;
	flex-direction: column;
	padding: .98rem
}

.video-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 8px 24px rgb(0 0 0 / .15)
}

.video-thumbnail {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background: #e0e0e0;
	border-radius: 6px;
	margin-bottom: 16px
}

.video-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	background: rgb(255 255 255 / .95);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgb(0 0 0 / .2)
}

.play-button i {
	font-size: 1.8rem;
	color: var(--primary-color);
	margin-left: 4px
}

.video-card:hover .play-button {
	transform: translate(-50%, -50%) scale(1.1);
	background: #fff
}

.video-title {
	font-size: .98rem;
	font-weight: 600;
	color: var(--text-dark);
	line-height: 1.5;
	margin: 0
}

.mobile-scroll-container {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0 15px 20px
}

.mobile-scroll-container::-webkit-scrollbar {
	display: none
}

.mobile-scroll-wrapper {
	display: flex;
	gap: 1rem
}

.mobile-video-card {
	flex: 0 0 280px;
	max-width: 280px
}

.modal-content {
	border: none;
	border-radius: 12px;
	background: #000
}

.modal-header {
	border: none;
	padding: 1rem;
	background: #000
}

.modal-body {
	padding: 0;
	background: #000
}

.btn-close {
	filter: invert(1);
	opacity: .8
}

.video-wrapper {
	position: relative;
	padding-top: 56.25%;
	background: #000
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.success-stories-section {
	padding: 60px 0;
	background: #fff
}

.stories-container {
	position: relative;
	padding: 0 15px
}

.stories-wrapper {
	display: flex;
	gap: 1.2rem;
	overflow-x: hidden;
	scroll-behavior: smooth
}

.story-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075) !important;
	border: 1px solid #ffe9e9;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	flex: 0 0 calc(33.333% - 1rem);
	min-width: 260px;
	display: flex;
	flex-direction: column;
	margin: 12px 0
}

.story-thumbnail {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	padding: 1.1rem 1.1rem 0rem
}

.story-thumbnail img {
	width: 100%;
	height: 100%;
	border-radius: 6px;
	object-fit: cover
}

.story-content {
	padding: 1.1rem;
	flex-grow: 1;
	display: flex;
	flex-direction: column
}

.story-quote {
	font-size: .95rem;
	color: var(--text-muted);
	line-height: 1.6;
	margin-bottom: 1.2rem;
	font-style: italic;
	flex-grow: 1
}

.patient-name {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: .5rem
}

.patient-info {
	font-size: .85rem;
	color: var(--text-muted);
	line-height: 1.6
}

.navigation-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem
}

.nav-arrow {
	width: 36px;
	height: 36px;
	background: #fff;
	border: 2px solid #d0d0d0;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	flex-shrink: 0
}

.nav-arrow:hover {
	border-color: #999;
	background: #f8f9fa
}

.nav-arrow i {
	font-size: 1.25rem;
	color: #666;
	transition: color 0.3s ease
}

.nav-arrow.disabled {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none
}

.carousel-indicators-custom {
	display: flex;
	align-items: center;
	gap: .5rem
}

.indicator-dot {
	width: 12px;
	height: 9px;
	border-radius: 3px;
	background: #d0d0d0;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	padding: 0
}

.indicator-dot:hover {
	background: #999
}

.indicator-dot.active {
	background: var(--primary-color)
}

.modal-content {
	border: none;
	border-radius: 12px;
	background: #000
}

.modal-header {
	border: none;
	padding: 1rem;
	background: #000
}

.modal-body {
	padding: 0;
	background: #000
}

.btn-close {
	filter: invert(1);
	opacity: .8
}

.video-wrapper {
	position: relative;
	padding-top: 56.25%;
	background: #000
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

@media (max-width:767px) {
	.ainu-title {
		font-size: 1.75rem;
		margin-bottom: 2rem
	}

	.success-stories-section {
		padding: 40px 0
	}

	.stories-container {
		padding: 0 15px
	}

	.stories-wrapper {
		gap: .2rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 1rem
	}

	.stories-wrapper::-webkit-scrollbar {
		display: none
	}

	.story-card {
		flex: 0 0 280px;
		min-width: 280px
	}

	.nav-arrow {
		display: none
	}

	.navigation-controls {
		margin-top: 1.5rem
	}

	.play-button {
		width: 60px;
		height: 60px
	}

	.play-button i {
		font-size: 1.5rem
	}

	.story-thumbnail {
		height: 180px
	}
}

@media (max-width:576px) {
	.ainu-title {
		font-size: 1.5rem
	}
}

@media (min-width:768px) and (max-width:1199px) {
	.story-card {
		flex: 0 0 calc(50% - 0.75rem)
	}
}

.footer {
	background-color: #344256;
	color: #ccc;
	padding: 50px 0;
	font-family: "Figtree", sans-serif
}

.footer h5 {
	color: #fff;
	margin-bottom: 36px;
	font-weight: 600;
	position: relative;
	display: inline-block
}

.footer h5::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -16px;
	width: 52px;
	height: 2px;
	background: linear-gradient(to right, #ff5e5e, transparent);
	border-radius: 2px
}

.footer ul {
	list-style: none;
	padding: 0
}

.footer ul li {
	padding-bottom: 18px
}

.footer ul li a {
	color: #e0edff;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block
}

.footer ul li a:hover {
	color: #fff;
	transform: translatex(5px);
	text-shadow: 0 0 8px rgb(255 255 255 / .7)
}

.social-icons a {
	color: #e0edff;
	margin-right: 15px;
	font-size: 1.2em;
	transition: all 0.3s ease;
	background: #4e617b;
	padding: 10px 12px;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none
}

.social-icons a:hover {
	background-color: #fff;
	color: #b81e26
}

.social-icons a:hover i {
	animation: iconScroll 0.6s ease-in-out
}

@keyframes iconScroll {
	0% {
		transform: translateY(0)
	}

	30% {
		transform: translateY(-4px)
	}

	60% {
		transform: translateY(3px)
	}

	100% {
		transform: translateY(0)
	}
}

.logo-text {
	color: #c3ccd3;
	font-size: .9em;
	line-height: 1.6
}

.divider {
	border-top: 1px solid #657285;
	margin: 30px 0
}

.copyright {
	color: #c3ccd3;
	font-size: .9em
}

.bottom-links a {
	color: #c3ccd3;
	text-decoration: none;
	margin: 0 10px;
	font-size: .9em;
	transition: color 0.3s
}

.bottom-links a:hover {
	color: #ccc
}

.health-blog-section {
	padding: 60px 0
}

.section-title .text-red {
	color: var(--primary-color)
}

.filter-buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px
}

.filter-btn {
	padding: 10px 24px;
	border: 1px solid #d1d5db;
	border-radius: 50px;
	background-color: #fff;
	color: #4b5563;
	font-size: .95rem;
	cursor: pointer;
	transition: all 0.3s ease
}

.filter-btn:hover {
	background-color: #f3f4f6
}

.filter-btn.active {
	background-color: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color)
}

.cards-container {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none
}

.cards-container::-webkit-scrollbar {
	display: none
}

.cards-wrapper {
	display: flex;
	gap: 24px;
	padding-bottom: 20px
}

.cards-scroll-container {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin: 0 -15px;
	padding: 0 15px
}

.cards-scroll-container::-webkit-scrollbar {
	display: none
}

.cards-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0
}

.card-column {
	flex: 0 0 85%;
	max-width: 85%;
	padding-left: 12px;
	padding-right: 12px
}

.blog-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgb(0 0 0 / .08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 24px
}

.blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgb(0 0 0 / .12)
}

.card-image {
	width: 100%;
	height: 160px;
	object-fit: cover
}

.card-body {
	padding: 20px;
	flex-grow: 1;
	display: flex;
	flex-direction: column
}

.card-category {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px
}

.category-label {
	color: #6b7280;
	font-size: .9rem
}

.card-date {
	color: #9ca3af;
	font-size: .85rem
}

.card-title {
	font-size: 1.06rem;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 12px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height: calc(1.4rem * 2)
}

.card-description {
	color: #6b7280;
	font-size: .9rem;
	line-height: 1.6;
	margin-bottom: 20px;
	flex-grow: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height: calc(0.8rem * 2)
}

.read-more-link {
	display: inline-flex;
	align-items: center;
	color: var(--primary-color);
	font-weight: 500;
	text-decoration: none;
	font-size: .95rem;
	transition: gap 0.3s ease;
	gap: 5px
}

.read-more-link:hover {
	gap: 10px
}

.read-more-link svg {
	width: 18px;
	height: 18px
}

.view-all-container {
	text-align: center;
	margin-top: 10px
}

.view-all-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	border: 2px solid var(--primary-color);
	border-radius: 50px;
	background-color: #fff;
	color: var(--primary-color);
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease
}

.view-all-btn:hover {
	background-color: var(--primary-color);
	color: #fff
}

.view-all-btn svg {
	width: 20px;
	height: 20px
}

.awards-section {
	padding: 60px 0;
	background-color: #f9f9fb
}

.award-card {
	background: #fff;
	border-radius: 9px;
	padding: 1.2rem;
	box-shadow: 0 0 4px #d1dde8;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 24px
}

.award-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 6px 9px #c5d7e7
}

.award-icon {
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	background: #f9fafb;
	border-radius: 12px
}

.award-icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain
}

.award-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 15px;
	line-height: 1.4;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center
}

.award-source {
	font-size: 1rem;
	color: #6b7280;
	font-weight: 500
}

.faq-section {
	padding: 60px 0;
	background-color: #fff
}

.section-subtitle {
	text-align: center;
	color: #6b7280;
	font-size: 1.1rem;
	margin-bottom: 50px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto
}

.faq-container {
	max-width: 1100px;
	margin: 0 auto
}

.accordion-item {
	border: 1px solid #d0e4fb;
	border-radius: 9px !important;
	margin-bottom: 16px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 0 12px #e6e6e6
}

.accordion-item:last-child {
	margin-bottom: 0
}

.accordion-button {
	font-size: 1.1rem;
	font-weight: 600;
	color: #1f2937;
	padding: 24px 60px 24px 24px;
	background-color: #fff;
	border: none;
	box-shadow: none !important;
	position: relative
}

.accordion-button:not(.collapsed) {
	background-color: #fff;
	color: #1f2937
}

.accordion-button:hover {
	background-color: #f9fafb
}

.accordion-button::after {
	display: none
}

.accordion-button .icon-wrapper {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border: 2px solid var(--primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	background-color: #fff
}

.accordion-button .icon-wrapper svg {
	width: 18px;
	height: 18px;
	stroke: var(--primary-color);
	transition: opacity 0.3s ease
}

.accordion-button:not(.collapsed) .icon-wrapper {
	background-color: var(--primary-color);
	border-color: var(--primary-color)
}

.accordion-button:not(.collapsed) .icon-wrapper .plus-icon {
	display: none
}

.accordion-button:not(.collapsed) .icon-wrapper .minus-icon {
	display: block;
	stroke: #fff
}

.icon-wrapper .minus-icon {
	display: none
}

.accordion-body {
	padding: 0 24px 24px 24px;
	color: #4b5563;
	font-size: 1rem;
	line-height: 1.7
}

.question-number {
	color: #9ca3af;
	margin-right: 8px
}

.contact-section {
	background-color: #952624;
	padding: 80px 0;
	text-align: center;
	color: #fff
}

.contact-section h2 {
	font-weight: 700;
	margin-bottom: 1rem
}

.contact-section p {
	color: #f3f3f3;
	max-width: 700px;
	margin: 0 auto 3rem;
	font-size: 1.05rem
}

.contact-card {
	background-color: #bc4a4a;
	border-radius: 10px;
	padding: 1.2rem 1.5rem;
	color: #fff;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.contact-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 6px 18px rgb(0 0 0 / .15)
}

.contact-icon {
	font-size: 2rem;
	margin-bottom: 1rem
}

.contact-card h5 {
	font-weight: 600;
	margin-bottom: .75rem
}

.contact-card p {
	margin-bottom: 1.25rem;
	color: #f8f8f8;
	font-size: .95rem
}

.contact-card a.btn {
	background-color: #fff;
	color: var(--primary-color);
	font-weight: 600;
	padding: .5rem 1.25rem;
	border-radius: 6px;
	transition: background-color 0.3s ease, color 0.3s ease
}

.contact-card a.btn:hover {
	background-color: var(--primary-color);
	color: #fff
}

.search-section {
	padding: 30px 0;
	background: linear-gradient(178deg, #ffffff 0%, #f9eaea 50%, #f8eeee 100%)
}

.filter-container {
	padding: .2rem
}

.filter-group {
	margin-bottom: 1.5rem
}

.filter-group:last-child {
	margin-bottom: 0
}

.filter-label {
	font-size: .9rem;
	font-weight: 500;
	color: var(--primary-color);
	margin-bottom: .45rem;
	display: block
}

.search-input-wrapper {
	position: relative
}

.search-input {
	width: 100%;
	padding: .65rem 1rem;
	padding-right: 3rem;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-size: .95rem;
	color: var(--text-dark);
	transition: all 0.3s ease
}

.search-input:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgb(220 53 69 / .1)
}

.search-input::placeholder {
	color: #999
}

.search-icon {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 1.1rem;
	pointer-events: none
}

.custom-select {
	width: 100%;
	padding: .65rem 2.5rem .65rem 1rem;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-size: .95rem;
	color: var(--text-dark);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a 1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 16px;
	appearance: none;
	cursor: pointer;
	transition: all 0.3s ease
}

.custom-select:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgb(220 53 69 / .1)
}

.custom-select option {
	padding: .5rem
}

.srchpage-title {
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	padding-bottom: 10px
}

.pagination {
	justify-content: center;
	margin-top: 2rem
}

.page-link {
	color: #cb0c0c;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: center
}

.page-item {
	margin: 0 6px
}

.page-item.active .page-link {
	background-color: #cb0c0c;
	border-color: #cb0c0c;
	color: #fff
}

.urology-hero {
	background: linear-gradient(90deg, #fff9f9 0%, #ffffff 100%);
	min-height: 70vh;
	display: flex;
	align-items: center
}

.urology-hero-title {
	font-size: 2.3rem;
	font-weight: 600;
	color: #111827;
	line-height: 1.3
}

.urology-highlight {
	color: #cb0c0c;
	font-weight: 700
}

.urology-hero-text {
	color: #334155;
	font-size: 1rem;
	max-width: 500px
}

.urology-btn {
	background-color: #cb0c0c;
	color: #fff;
	border: none;
	border-radius: 6px;
	transition: all 0.3s ease
}

.urology-btn:hover {
	background-color: #a20909;
	transform: translateY(-2px)
}

.urology-hero-image {
	max-width: 90%;
	height: auto
}

.specialty-card {
	background: #fff;
	border-radius: 9px;
	padding: 1.5rem;
	text-align: center;
	box-shadow: 0 2px 4px rgb(166 186 211 / 32%);
	transition: all 0.3s ease;
	height: 100%;
	border: none
}

.specialty-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 20px rgb(0 0 0 / .15)
}

.icon-wrapper {
	width: 72px;
	height: 72px;
	margin: 0 auto .75rem;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center
}

.icon-wrapper i {
	font-size: 2.5rem;
	color: #fff
}

.bg-green {
	background: linear-gradient(135deg, #5cb85c, #449d44)
}

.bg-red {
	background: linear-gradient(135deg, #d9534f, #c9302c)
}

.bg-pink {
	background: linear-gradient(135deg, #e83e8c, #d63384)
}

.bg-purple {
	background: linear-gradient(135deg, #8b5cf6, #7c3aed)
}

.bg-blue {
	background: linear-gradient(135deg, #5b9bd5, #4a7fb8)
}

.bg-cyan {
	background: linear-gradient(135deg, #17a2b8, #138496)
}

.bg-light-blue {
	background: linear-gradient(135deg, #5bc0de, #46b8da)
}

.bg-orange {
	background: linear-gradient(135deg, #f0ad4e, #ec971f)
}

.specialty-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 1rem
}

.know-more-link {
	color: #dc3545;
	text-decoration: none;
	font-weight: 500;
	font-size: .95rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: gap 0.3s ease;
	background-color: rgb(201 48 44 / .08);
	padding: .625rem 1.25rem;
	border-radius: .3rem
}

.know-more-link:hover {
	color: #c82333;
	gap: .8rem
}

.know-more-link i {
	font-size: .85rem
}

.hero-section {
	background-color: var(--bg-light);
	background: url(../images/hydherobg.png);
	background-size: cover;
	position: relative;
	overflow: hidden
}

.hero-content {
	padding-right: 2rem
}

.hero-title {
	font-size: 2.45rem;
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1.2;
	margin-bottom: 1.5rem
}

.hero-description {
	font-size: 1.125rem;
	color: var(--secondary-color);
	line-height: 1.8;
	margin-bottom: 2rem
}

.features-list {
	list-style: none;
	padding: 0;
	margin: 2rem 0
}

.features-list li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1rem;
	font-size: 1rem;
	color: var(--secondary-color);
	font-weight: 500
}

.check-icon {
	color: var(--primary-color);
	flex-shrink: 0;
	margin-right: .75rem;
	margin-top: .125rem
}

.cta-buttons {
	margin-top: 2.5rem
}

.btn-appointment {
	background-color: var(--primary-color);
	border: none;
	padding: .875rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: .375rem;
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	transition: all 0.3s ease
}

.btn-appointment:hover {
	background-color: #a92822;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgb(201 48 44 / .3)
}

.btn-location {
	background-color: #fff0;
	border: 2px solid var(--border-color);
	color: var(--secondary-color);
	padding: .875rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: .375rem;
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	transition: all 0.3s ease
}

.btn-location:hover {
	border-color: var(--primary-color);
	color: var(--primary-color);
	background-color: #fff0;
	transform: translateY(-2px)
}

.calendar-icon,
.location-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0
}

.hero-illustration {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin-left: auto
}

.hero-illustration svg {
	width: 100%;
	height: auto
}

.monument-path {
	stroke-linecap: round;
	stroke-linejoin: round
}

.cross-accent {
	animation: pulse 3s ease-in-out infinite
}

.city-card {
	background: #fff;
	border-radius: 10px;
	border: 1px solid #e5e9ec;
	box-shadow: 0 2px 8px rgb(0 0 0 / .06);
	transition: all 0.3s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.city-card .bg-light {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	padding: .8rem 1.2rem
}

.city-content {
	padding: 1.2rem
}

.city-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 14px rgb(0 0 0 / .1)
}

.city-header {
	display: flex;
	gap: .3rem
}

.city-header i {
	color: #cb0c0c;
	font-size: 1.25rem;
	margin-right: 8px
}

.city-header h5 {
	font-weight: 600;
	font-size: 1.05rem;
	color: #1a365d;
	margin: 0
}

.city-address {
	color: #344256;
	font-size: .9rem;
	line-height: 1.5;
	margin: .8rem 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height: calc(2.3rem * 2)
}

.city-phone {
	font-weight: 600;
	color: #cb0c0c;
	font-size: 1rem
}

.city-phone i {
	color: #cb0c0c;
	margin-right: 6px;
	font-size: 1.1rem
}

.city-card .btn-outline {
	border: 1px solid #d4d8dc;
	color: #1a365d;
	background: #fff;
	font-weight: 500;
	border-radius: 6px;
	transition: all 0.2s ease;
	padding: .45rem .6rem
}

.btn-outline:hover {
	background-color: #f5f7fa
}

.btn-red {
	background-color: #ffe8e8;
	color: #cb0c0c;
	font-weight: 500;
	border-radius: 6px;
	transition: all 0.2s ease
}

.btn-red:hover {
	background-color: #cb0c0c;
	color: #fff
}

.btn i {
	font-size: .9rem;
	margin-left: 4px
}

.sec-coe {
	background-color: #f6f7f9
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .6;
		transform: scale(.95)
	}
}

.about-section {
	background-color: #fff;
	padding: 5rem 0
}

.about-image-wrapper {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 10px 40px rgb(0 0 0 / .1)
}

.about-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 1rem
}

.image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgb(201 48 44 / .05) 0%, rgb(201 48 44 / .02) 100%);
	pointer-events: none
}

.about-content {
	padding-left: 2rem
}

.about-title {
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--secondary-color);
	line-height: 1.3;
	margin-bottom: .98rem
}

.about-text {
	font-size: 1rem;
	color: var(--light-text);
	line-height: 1.6;
	margin-bottom: .96rem
}

.about-text:last-child {
	margin-bottom: 0
}

.why-choose-section {
	background-color: #fafafa;
	padding: 5rem 0
}

.why-choose-title {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--secondary-color);
	line-height: 1.3
}

.text-highlight {
	color: var(--primary-color)
}

.why-choose-image-wrapper {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 10px 40px rgb(0 0 0 / .08)
}

.why-choose-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 1rem
}

.why-choose-list {
	list-style: none;
	padding: 0;
	margin: 0
}

.why-choose-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: .95rem;
	font-size: 1rem;
	color: var(--secondary-color);
	font-weight: 400;
	line-height: 1.6
}

.why-choose-item:last-child {
	margin-bottom: 0
}

.check-icon-red {
	color: var(--primary-color);
	flex-shrink: 0;
	margin-right: 1rem;
	margin-top: .125rem;
	background: #fce9e9;
	padding: .36rem .42rem;
	border-radius: 60px;
	font-size: .96rem
}

.contact-title {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--secondary-color);
	line-height: 1.3
}

.contact-form-wrapper {
	background: #fff;
	border-radius: .75rem;
	padding: 1.5rem 2rem 2rem;
	box-shadow: 0 4px 20px rgb(0 0 0 / .08);
	border-top: 4px solid var(--primary-color)
}

.form-group {
	margin-bottom: 0
}

.form-label {
	font-size: .9375rem;
	font-weight: 500;
	color: var(--secondary-color);
	margin-bottom: .5rem;
	display: block
}

.form-control,
.form-select {
	border: 1px solid #e0e0e0;
	border-radius: .5rem;
	padding: .75rem 1rem;
	font-size: .9375rem;
	color: var(--secondary-color);
	transition: all 0.3s ease;
	background-color: #fff
}

.form-control:focus,
.form-select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 .2rem rgb(201 48 44 / .1);
	outline: none
}

.form-control::placeholder {
	color: #b0b0b0
}

.form-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235A5A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 3rem
}

textarea.form-control {
	resize: vertical;
	min-height: 120px
}

.btn-submit {
	background-color: var(--primary-color);
	border: none;
	color: #fff;
	padding: .875rem 3rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: .5rem;
	transition: all 0.3s ease;
	min-width: 180px
}

.btn-submit:hover {
	background-color: #a92822;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgb(201 48 44 / .3)
}

.text-danger {
	color: var(--primary-color)
}

.videos-container {
	padding: 0 15px
}

.videos-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem
}

.urology-banner {
	background: linear-gradient(135deg, #fdeaea 0%, #ffffff 50%, #f8f9fa 100%);
	padding: 4rem 0;
	position: relative;
	overflow: hidden
}

.urology-banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e5e7eb" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
	opacity: .4;
	z-index: 0
}

.urology-banner .container {
	position: relative;
	z-index: 1
}

.banner-badge {
	display: inline-flex;
	align-items: center;
	background: rgb(255 255 255 / .9);
	color: var(--primary-color);
	padding: .5rem 1rem;
	border-radius: 25px;
	font-weight: 600;
	font-size: .9rem;
	box-shadow: 0 2px 10px rgb(0 0 0 / .1);
	backdrop-filter: blur(10px)
}

.banner-features {
	display: flex;
	gap: .5rem
}

.banner-features .feature-item {
	display: flex;
	align-items: center;
	font-size: .95rem;
	color: #4a5568;
	font-weight: 500
}

.banner-image-wrapper {
	position: relative;
	display: inline-block
}

.banner-image {
	border-radius: 15px;
	box-shadow: 0 10px 30px rgb(0 0 0 / .15);
	transition: transform 0.3s ease
}

.floating-stats {
	position: absolute;
	top: 20px;
	right: -20px;
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.stat-item {
	background: #fff;
	padding: 1rem;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgb(0 0 0 / .1);
	text-align: center;
	min-width: 120px;
	animation: float 3s ease-in-out infinite
}

.stat-item:nth-child(2) {
	animation-delay: 1.5s
}

.stat-number {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: .25rem
}

.stat-label {
	font-size: .8rem;
	color: #6b7280;
	font-weight: 500
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-10px)
	}
}

.banner-title {
	font-size: 2.6rem;
	font-weight: 500;
	color: var(--secondary-color);
	line-height: 1.2;
	margin-bottom: 1.5rem
}

.banner-title span {
	color: var(--primary-color);
	font-weight: 600;
	position: relative
}

.banner-title span::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--primary-color), #ff6b6b);
	border-radius: 2px
}

.banner-subtext {
	font-size: 1.1rem;
	color: #4a5568;
	max-width: 550px;
	line-height: 1.6;
	margin-bottom: 2rem;
	font-weight: 400
}

.btn-primary {
	background: linear-gradient(135deg, var(--primary-color) 0%, #ce2828 100%);
	border: none;
	border-radius: 9px;
	font-weight: 400;
	font-size: 1.1rem;
	padding: .9rem 1.4rem;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden
}

.btn-primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / .2), transparent);
	transition: left 0.5s
}

.btn-primary:hover::before {
	left: 100%
}

.btn-primary:hover {
	background: linear-gradient(135deg, #a50a0a 0%, #c53030 100%);
	box-shadow: 0 8px 25px rgb(203 12 12 / .4);
	transform: translateY(-2px)
}

.best-hospitals {
	background-color: #fff
}

.section-heading {
	font-size: 2rem;
	font-weight: 700;
	color: var(--secondary-color);
	line-height: 1.4
}

.section-heading span {
	color: var(--primary-color)
}

.section-text {
	font-size: 1.05rem;
	color: #344054;
	line-height: 1.8;
	margin-bottom: 1.5rem;
	max-width: 900px
}

.urology-treatments {
	background-color: #f9f9f9
}

.treatment-card {
	position: relative;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	z-index: 1
}

.treatment-card::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: 9px;
	background: conic-gradient(from var(--angle, 0deg), #ffffff, #ebd4c4, #ef3144, #ee0b48, #b10a0a);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	-webkit-mask-composite: destination-out;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: -1
}

.treatment-card:hover::before {
	opacity: 1;
	animation: gradient-spin 3s linear infinite
}

@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false
}

@keyframes gradient-spin {
	to {
		--angle: 360deg
	}
}

.treatment-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 18px rgb(0 0 0 / .08)
}

.treatment-card h5 {
	font-weight: 600;
	color: var(--secondary-color);
	margin-bottom: 5px;
	transition: color 0.3s ease
}

.treatment-card:hover h5 {
	color: var(--primary-color)
}

.treatment-card p {
	font-size: .95rem;
	color: var(--text-color);
	margin: 0
}

.icon-box {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	background-color: #fff0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.icon-box img {
	width: 52px;
	height: 52px
}

.arrow {
	font-size: 1.5rem;
	color: var(--primary-color);
	transition: transform 0.2s ease-in-out
}

.treatment-card:hover .arrow {
	transform: translateX(6px)
}

.urology-intro {
	background-color: #fff
}

.urology-intro h2 {
	font-size: 2rem;
	line-height: 1.4;
	color: #0a1b2b
}

.urology-intro .text-danger {
	color: #d61b1b !important
}

.urology-intro p {
	font-size: 1rem;
	line-height: 1.7;
	color: #44596e
}

.urology-intro-image {
	max-width: 85%;
	transition: transform 0.4s ease, box-shadow 0.4s ease
}

@media (max-width:992px) {
	.banner-title {
		font-size: 2.2rem
	}

	.banner-subtext {
		font-size: 1rem
	}

	.section-heading,
	.section-text {
		text-align: center
	}
}

@media (max-width:576px) {
	.urology-banner {
		padding: 3rem 1rem;
		text-align: center
	}

	.banner-badge {
		font-size: .8rem;
		padding: .4rem .8rem
	}

	.banner-title {
		font-size: 1.4rem;
		margin-bottom: 1rem
	}

	.banner-title span::after {
		height: 2px;
		bottom: -2px
	}

	.banner-subtext {
		font-size: 1rem;
		margin-bottom: 1.5rem
	}

	.banner-features {
		align-items: center;
		margin-bottom: 1.5rem
	}

	.banner-features .feature-item {
		font-size: .9rem
	}

	.btn-primary {
		font-size: 1rem;
		padding: .875rem 2rem
	}

	.floating-stats {
		position: static;
		flex-direction: row;
		justify-content: center;
		margin-top: 2rem;
		gap: 1rem
	}

	.stat-item {
		min-width: 100px;
		padding: .75rem
	}

	.stat-number {
		font-size: 1.2rem
	}

	.stat-label {
		font-size: .7rem
	}

	.section-heading {
		font-size: 1.6rem
	}

	.treatment-card {
		flex-direction: column;
		text-align: center;
		align-items: center;
		padding: 1.25rem
	}

	.icon-box {
		margin-bottom: 10px
	}

	.arrow {
		margin-top: 10px
	}

	.urology-intro h2 {
		font-size: 1.6rem;
		text-align: center
	}

	.urology-intro p {
		text-align: center
	}

	.urology-intro-image {
		max-width: 100%
	}
}

@media (max-width:1199.98px) {
	.hero-content {
		padding-right: 0;
		text-align: center
	}

	.features-list li {
		justify-content: center
	}

	.cta-buttons {
		justify-content: center
	}
}

@media (max-width:575.98px) {
	.hero-title {
		font-size: 1.875rem
	}

	.hero-content {
		text-align: left
	}

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

	.about-title {
		font-size: 1.5rem
	}

	.why-choose-title {
		font-size: 1.5rem
	}

	.why-choose-item {
		font-size: .875rem
	}

	.locations-title {
		font-size: 1.5rem
	}

	.locations-subtitle {
		font-size: .9375rem
	}

	.location-name {
		font-size: 1.125rem
	}

	.location-address {
		font-size: .875rem
	}

	.contact-title {
		font-size: 1.5rem
	}

	.contact-form-wrapper {
		padding: 1.5rem
	}

	.form-label {
		font-size: .875rem
	}

	.form-control,
	.form-select {
		font-size: .875rem;
		padding: .625rem .875rem
	}
}

@media (max-width:576px) {
	.section-title {
		font-size: 1.5rem
	}

	.doctors-section {
		padding: 40px 0
	}

	.filter-container {
		padding: .65rem
	}
}

@media (max-width:767.98px) {
	.sidebar {
		display: none
	}

	.hero-title {
		font-size: 2.25rem
	}

	.hero-description {
		font-size: .9375rem
	}

	.btn-appointment,
	.btn-location {
		width: 100%;
		justify-content: center;
		padding: .875rem 1.25rem;
		font-size: .9375rem
	}

	.features-list li {
		font-size: .9375rem;
		text-align: left;
		justify-content: flex-start
	}

	.about-section {
		padding: 3rem 0
	}

	.about-title {
		font-size: 1.75rem
	}

	.about-text {
		font-size: .9375rem;
		text-align: left
	}

	.about-content {
		text-align: left
	}

	.why-choose-section {
		padding: 3rem 0
	}

	.why-choose-title {
		font-size: 1.75rem
	}

	.why-choose-item {
		font-size: .9375rem
	}

	.locations-section {
		padding: 40px 0;
		background-color: #f6f7f9
	}

	.locations-title {
		font-size: 1.75rem
	}

	.location-card {
		padding: .92rem;
		margin-bottom: 1rem
	}

	.location-address,
	.location-phone,
	.location-actions {
		padding-left: 0
	}

	.location-actions {
		flex-direction: column;
		gap: .75rem
	}

	.btn-outline-directions,
	.btn-know-more {
		width: 100%;
		justify-content: center
	}

	.contact-section {
		padding: 3rem 0
	}

	.contact-title {
		font-size: 1.75rem
	}

	.contact-form-wrapper {
		padding: 2rem
	}

	.btn-submit {
		width: 100%
	}

	body {
		padding-bottom: 72px;
		padding-top: 8.8rem
	}

	.sc-pad {
		padding: 30px 0
	}

	.dr-grid {
		display: flex;
		flex-direction: row;
		gap: .9rem
	}

	.ainu-title {
		font-size: 1.6rem;
		font-weight: 700;
		color: #081727;
		margin-bottom: 1.4rem;
		text-align: center
	}

	.centre-title {
		font-size: .98rem;
		margin-bottom: .75rem
	}

	.know-more-btn {
		font-size: .96rem;
		padding: .65rem .95rem;
		background: #fff5f5;
		border-radius: 6px
	}

	.navbar {
		--bs-navbar-padding-y: 0rem
	}

	.main-heading {
		font-size: 2rem
	}

	.highlight-heading {
		font-size: 2.5rem
	}

	.carousel-item {
		min-height: auto
	}

	.carousel-content {
		min-height: auto;
		padding: 40px 0
	}

	.features {
		flex-direction: column;
		gap: 10px
	}

	.feature-item::after {
		content: ""
	}

	.ainu-hero-title {
		font-size: 1.5rem
	}

	.ainu-stat-number {
		font-size: 1.8rem;
		margin-bottom: 0
	}

	.ainu-feature-card {
		padding: 1rem .95rem
	}

	.ainu-feature-title {
		font-size: 1.18rem;
		font-weight: 600;
		color: #28333e;
		margin-bottom: 1rem;
		text-align: center
	}

	.ainu-stat-item {
		text-align: center;
		padding: .6rem 0
	}

	.section-title {
		font-size: 1.75rem;
		margin-bottom: 2rem
	}

	.centre-icon {
		width: 70px;
		height: 70px;
		font-size: 2rem
	}

	.desktop-view {
		display: none
	}

	.mobile-view {
		display: block
	}

	.btn-view-profile,
	.btn-book-appointment {
		padding: .6rem 1rem;
		font-size: .85rem
	}

	.location-header {
		margin-bottom: 1rem
	}

	.location-icon {
		width: 22px;
		height: 22px
	}

	.location-icon i {
		font-size: 1.1rem
	}

	.location-name {
		font-size: .92rem;
		font-weight: 600;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		height: calc(1.4em * 2)
	}

	.location-address {
		display: none
	}

	.location-phone {
		font-size: .95rem;
		margin-bottom: .6rem
	}

	.btn-directions,
	.btn-know-more {
		width: 100%;
		justify-content: center;
		padding: .7rem 1rem
	}

	.health-talks-section {
		padding: 40px 0
	}

	.play-button {
		width: 60px;
		height: 60px
	}

	.play-button i {
		font-size: 1.5rem
	}

	.story-thumbnail {
		height: 200px
	}

	.story-card {
		margin: 0 6px
	}

	.mobile-scroll-wrapper {
		gap: .01rem
	}

	.award-card {
		padding: 30px 20px
	}

	.award-icon {
		width: 100px;
		height: 100px;
		margin-bottom: 20px
	}

	.award-title {
		font-size: 1.1rem;
		min-height: auto
	}

	.award-source {
		font-size: .9rem
	}

	.accordion-button {
		font-size: 1rem;
		padding: 20px 50px 20px 20px
	}

	.accordion-button .icon-wrapper {
		width: 28px;
		height: 28px;
		right: 20px
	}

	.accordion-button .icon-wrapper svg {
		width: 16px;
		height: 16px
	}

	.accordion-body {
		padding: 0 20px 20px 20px;
		font-size: .95rem
	}

	.health-blog-section {
		padding: 40px 0
	}

	.btn-view-all {
		font-weight: 500;
		font-size: .98rem;
		border-radius: 6px;
		padding: .75rem 1.4rem
	}

	.awards-section {
		padding: 40px 0
	}

	.centres-section {
		padding: 40px 0
	}

	.filter-container {
		padding: 1.5rem
	}

	.filter-group {
		margin-bottom: 1.25rem
	}

	.srchpage-title {
		font-size: 17px;
		padding-bottom: 0;
		margin-bottom: 6px;
		padding-left: 16px;
		padding-right: 16px;
		font-weight: 600
	}

	.search-section {
		padding: 20px 0 16px
	}

	.doctor-card {
		flex-direction: row;
		text-align: left;
		gap: .6rem;
		padding: .98rem;
		border-radius: 9px
	}

	.doctor-card:hover {
		transform: none
	}

	.doctor-image {
		width: 60px;
		height: 60px;
		margin-bottom: 0;
		flex-shrink: 0
	}

	.doctor-content {
		flex: 1
	}

	.doctor-name {
		font-size: 1.1rem;
		margin-bottom: .25rem
	}

	.doctor-title {
		font-size: .85rem;
		margin-bottom: .5rem
	}

	.doctor-info {
		justify-content: flex-start;
		font-size: .85rem;
		margin-bottom: .5rem
	}

	.location-info {
		justify-content: flex-start;
		font-size: .85rem;
		margin-bottom: .75rem
	}

	.button-group {
		gap: .5rem;
		margin-top: .5rem
	}

	.btn-view-profile,
	.btn-book-appointment {
		padding: .6rem 1rem;
		font-size: .85rem
	}
}

@media (max-width:767px) {
	.section-title {
		font-size: 1.75rem;
		margin-bottom: 2rem
	}

	.health-talks-section {
		padding: 40px 0
	}

	.videos-container {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none
	}

	.videos-container::-webkit-scrollbar {
		display: none
	}

	.videos-wrapper {
		flex-wrap: nowrap;
		padding-bottom: 1rem
	}

	.video-card {
		flex: 0 0 280px;
		min-width: 280px
	}

	.play-button {
		width: 60px;
		height: 60px
	}

	.play-button i {
		font-size: 1.5rem
	}

	.video-thumbnail {
		height: 180px
	}

	.faq-section {
		padding: 40px 0
	}

	.section-subtitle {
		margin-bottom: 10px
	}
}

@media (max-width:991.98px) {
	.hero-title {
		font-size: 2.75rem
	}

	.hero-description {
		font-size: 1rem
	}

	.about-section {
		padding: 4rem 0
	}

	.about-content {
		padding-left: 0;
		text-align: center
	}

	.about-title {
		font-size: 2rem
	}

	.why-choose-section {
		padding: 4rem 0
	}

	.why-choose-title {
		font-size: 2rem
	}

	.why-choose-list {
		margin-top: 2rem
	}

	.locations-section {
		padding: 4rem 0
	}

	.locations-title {
		font-size: 2rem
	}

	.contact-section {
		padding: 4rem 0
	}

	.contact-title {
		font-size: 2rem
	}

	.contact-form-wrapper {
		padding: 2.5rem
	}
}

@media (max-width:767.98px) {
	.sticky-widgets {
		display: none !important
	}
}

@media (min-width:768px) {
	.mobile-footer {
		display: none !important
	}

	.ainu-hero-title {
		font-size: 1.8rem
	}

	.ainu-stat-number {
		font-size: 2.2rem
	}

	.ainu-stat-label {
		font-size: 1rem
	}

	.ainu-feature-card {
		margin-bottom: 1.5rem
	}

	.section-title {
		font-size: 1.8rem
	}

	.centre-card {
		margin-bottom: 1.5rem
	}

	.centre-title {
		font-size: 1.2rem;
		font-weight: 700;
		min-height: auto
	}

	.cards-wrapper {
		flex-wrap: wrap
	}

	.cards-scroll-container {
		overflow-x: visible;
		margin: 0;
		padding: 0
	}

	.cards-row {
		flex-wrap: wrap;
		margin-bottom: 16px
	}

	.card-column {
		flex: 0 0 50%;
		max-width: 50%
	}

	.contact-section {
		padding: 60px 0
	}

	.contact-card {
		margin-bottom: 1.5rem
	}

	.urology-hero {
		text-align: center;
		padding-top: 2rem
	}

	.urology-hero-title {
		font-size: 1.8rem
	}

	.urology-hero-text {
		font-size: .95rem
	}

	.urology-hero-image {
		margin-top: 1.5rem
	}
}

@media (min-width:768px) and (max-width:991px) {
	.video-card {
		flex: 1 1 calc(50% - 0.75rem)
	}
}

@media (min-width:992px) {
	.navbar-collapse {
		display: flex !important
	}

	/*.offcanvas {
		display: none
	}*/

	.card-column {
		flex: 0 0 25%;
		max-width: 25%
	}
}

@media (min-width:992px) and (max-width:1199px) {
	.video-card {
		flex: 1 1 calc(33.333% - 1rem)
	}
}


/* Page CSS Starts */
.breadcrumb-section {
	background-color: #fff;
	padding: .9rem 0;
	border-bottom: 1px solid #e9ecef
}

.breadcrumb {
	margin-bottom: 0;
	background: #fff0;
	padding: 0
}

.breadcrumb-item {
	font-size: .9rem;
	color: #6c757d
}

.breadcrumb-item a {
	color: #6c757d;
	text-decoration: none
}

.breadcrumb-item.active {
	color: #dc3545
}

.ainu-confirmation-container {
	max-width: 600px;
	margin: 0 auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 0 4px rgb(93 93 93 / .1);
	overflow: hidden
}

.ainu-success-header {
	text-align: center;
	padding: 2rem 2rem 1rem
}

.ainu-success-icon {
	width: 80px;
	height: 80px;
	background: #0CA147;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem
}

.ainu-success-icon i {
	font-size: 2.5rem;
	color: #fff
}

.ainu-success-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: #0CA147;
	margin-bottom: 0
}

.ainu-details-section {
	padding: 1.5rem 2rem 2rem;
	border-top: 1px solid #e9ecef
}

.ainu-section-title {
	font-size: 1rem;
	font-weight: 600;
	color: #6c757d;
	margin-bottom: .85rem;
	padding-bottom: .45rem;
	border-bottom: 1px solid #e9ecef
}

.ainu-info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .6rem;
	margin-bottom: 2rem
}

.ainu-info-item {
	display: flex;
	flex-direction: column;
	gap: .25rem
}

.ainu-info-label {
	font-size: .875rem;
	color: #6c757d;
	font-weight: 500
}

.ainu-info-value {
	font-size: 1rem;
	color: #2c3e50;
	font-weight: 600
}

.ainu-info-value.highlight {
	color: #dc3545
}

.ainu-appointment-card {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 2rem
}

.ainu-doctor-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem
}

.ainu-doctor-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0
}

.ainu-doctor-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.ainu-doctor-details h4 {
	font-size: 1.1rem;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: .25rem
}

.ainu-doctor-details p {
	font-size: .875rem;
	color: #6c757d;
	margin: 0
}

.ainu-appointment-details {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem
}

.ainu-detail-label {
	font-size: .875rem;
	color: #dc3545;
	font-weight: 600;
	margin-bottom: .5rem;
	display: block
}

.ainu-detail-value {
	font-size: 1rem;
	color: #2c3e50;
	font-weight: 600
}

.ainu-btn-home {
	width: 100%;
	padding: .75rem 1rem;
	background-color: #fff0;
	color: #6c757d;
	border: 2px solid #dee2e6;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
	text-align: center
}

.ainu-btn-home:hover {
	background-color: #f8f9fa;
	border-color: #adb5bd;
	color: #495057
}

@media (max-width:767px) {
	.ainu-confirmation-container {
		border-radius: 12px
	}

	.ainu-success-header {
		padding: 2rem 1.5rem 1.5rem
	}

	.ainu-success-icon {
		width: 70px;
		height: 70px
	}

	.ainu-success-icon i {
		font-size: 2rem
	}

	.ainu-success-title {
		font-size: 1.5rem
	}

	.ainu-details-section {
		padding: 1.5rem
	}

	.ainu-info-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem
	}

	.ainu-appointment-details {
		grid-template-columns: 1fr;
		gap: 1rem
	}

	.ainu-detail-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left
	}

	.ainu-detail-label {
		margin-bottom: 0
	}
}

@media (max-width:576px) {
	.ainu-success-title {
		font-size: 1.25rem
	}

	.ainu-doctor-info {
		flex-direction: column;
		text-align: center
	}

	.ainu-appointment-card {
		padding: 1.25rem
	}
}
/* Page CSS Ends */