/* Colorful clinic navigation, dark full-width hero and appointment invitation. */
.topbar-hospital { background: linear-gradient(105deg,#0b2343,#114daa 65%,#087d88); padding: 10px 0; }
.topbar-hospital .container { flex-wrap: wrap; gap: 8px 16px; }
.topbar-badge { font-size: 12px; font-weight: 600; }
.topbar-badge i { color: #8de5d0 !important; }
.emergency-pill-top { font-size: 12px; font-weight: 700; }
.topbar-staff-link { font-size: 12px; }
.navbar-hospital,.navbar-hospital.scrolled { padding: 18px 0; background: #fff; border: 0; box-shadow: 0 6px 28px #0a23430c; }
.navbar-hospital::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#1c61e8,#14b8b0,#8760e7,#1c61e8); background-size: 200% 100%; animation: ayanColorFlow 8s linear infinite; }
.navbar-brand-logo { gap: 13px; }
.ayan-brand-mark { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 5px 16px #1761d526; transition: transform .3s ease; }
.navbar-brand-logo:hover .ayan-brand-mark { transform: rotate(-7deg) scale(1.06); }
.ayan-brand-wordmark strong { font-size: 21px; font-weight: 800; letter-spacing: -.6px; color: #102b4c; }
.ayan-brand-wordmark strong span { background: linear-gradient(105deg,#1761d5,#087b8b,#1761d5); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: ayanColorFlow 7s ease-in-out infinite; }
.ayan-brand-wordmark small { font-size: 11px; margin-top: 6px; color: #566f89; }
.header-nav-list { gap: 3px; }
.navbar-hospital .nav-link { display: inline-flex; gap: 7px; align-items: center; font-size: 15px; font-weight: 700; padding: 10px 10px !important; color: #334f6c; border-radius: 10px; transition: color .25s,background .25s,transform .25s; }
.navbar-hospital .nav-link .nav-icon { display: inline-flex; width: 29px; height: 29px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9px; background: #edf3ff; color: #1761d5; font-size: 16px; transition: transform .25s; }
.header-nav-list > li:nth-child(2) .nav-icon { color: #7353ca !important; background: #f1edff; }
.header-nav-list > li:nth-child(3) .nav-icon { color: #087f75 !important; background: #e5f7f1; }
.header-nav-list > li:nth-child(4) .nav-icon { color: #087caa !important; background: #e8f6fd; }
.header-nav-list > li:nth-child(5) .nav-icon { color: #c04458 !important; background: #fff0f2; }
.navbar-hospital .nav-link:hover { background: #f3f7fc; color: #1761d5; transform: translateY(-2px); }
.navbar-hospital .nav-link:hover .nav-icon { transform: rotate(-8deg); }
.navbar-hospital .nav-link.active { background: #edf4ff; color: #1761d5; }
.nav-chevron { font-size: 10px; }
.btn-appointment-nav.btn-animated-cta { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(110deg,#1761d5,#087f9a); border: 0; font-size: 14px; padding: 14px 18px; border-radius: 11px; box-shadow: 0 7px 19px #1761d526; transition: transform .25s,box-shadow .25s; }
.btn-appointment-nav.btn-animated-cta::before { content: ''; display: block; position: absolute; width: 40%; height: 160%; left: -60%; top: -30%; background: linear-gradient(90deg,transparent,#ffffff38,transparent); transform: skewX(-22deg); animation: ayanButtonShine 6s ease-in-out infinite; pointer-events: none; }
.btn-appointment-nav.btn-animated-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #1761d536; }
.navbar-toggler { background: #edf4ff; border-radius: 11px; min-width: 46px; min-height: 46px; }
.navbar-toggler .bi { font-size: 28px !important; }
.mobile-nav-link { font-size: 17px !important; padding: 13px 10px !important; }
.mobile-nav-link .bi { width: 31px; height: 31px; display: inline-grid; place-items: center; background: #edf4ff; border-radius: 8px; }
.offcanvas-header { background: linear-gradient(120deg,#102c48,#1751a1); }

/* Every slide keeps its background across the entire viewport width. */
.hero-cinematic-slider { height: 690px; min-height: 620px; max-height: none; background: #091d36; padding-bottom: 0; }
.hero-slides-viewport { height: 100%; min-height: 0; }
.hero-slide,.hero-slide.active { position: absolute; inset: 0; background: #091d36; }
.hero-slide-bg { inset: 0; width: 100%; height: 100%; border-radius: 0; background-position: center 42%; filter: saturate(.9); }
.hero-slide-overlay,.hero-slide-overlay.overlay-cyan,.hero-slide-overlay.overlay-red { background: linear-gradient(90deg,#06162bec 0%,#071a30d9 34%,#0a223987 70%,#06183060 100%),linear-gradient(0deg,#07182de6,transparent 48%) !important; }
.hero-slide .col-xl-7 { width: 65%; }
.hero-content-block { max-width: 760px; padding: 95px 0 35px; color: #fff; }
.hero-badge-live,.hero-badge-live.badge-cyan,.hero-badge-live.badge-red { color: #b1f4e2; background: #0f77692d; border: 1px solid #80e3d53f; border-radius: 6px; padding: 9px 13px; font-size: 11px; letter-spacing: 1.4px; backdrop-filter: blur(10px); }
.pulsing-dot,.pulsing-dot.dot-cyan,.pulsing-dot.dot-red { background: #67e3c5; width: 7px; height: 7px; }
.hero-main-title { color: #fff; font-size: clamp(45px,4.7vw,68px); line-height: 1.1; max-width: 760px; margin-bottom: 25px; text-shadow: 0 3px 24px #07172b30; }
.hero-main-title span.text-highlight,.hero-main-title span.text-highlight.highlight-cyan,.hero-main-title span.text-highlight.highlight-red { color: #76e2df; -webkit-text-fill-color: #76e2df; }
.hero-lead-text { color: #d4e1ed; font-size: 17px; line-height: 1.85; max-width: 560px; margin-bottom: 30px; }
.hero-actions-group { flex-direction: row; gap: 13px; }
.btn-hero-primary,.btn-hero-emergency,.btn-hero-secondary { width: auto; padding: 16px 24px; font-size: 14px; min-height: 52px; border-radius: 9px; }
.btn-hero-primary { background: linear-gradient(110deg,#236bed,#087f9a); border: 1px solid #71a1ff55; box-shadow: 0 10px 24px #0002; }
.btn-hero-emergency,.btn-hero-secondary { background: #ffffff0a; border: 1px solid #ffffff47; color: #fff !important; backdrop-filter: blur(8px); }
.btn-hero-emergency:hover,.btn-hero-secondary:hover { background: #ffffff1f; border-color: #b2ece5; }
.hero-trust-row { gap: 18px; margin-top: 29px; }
.hero-trust-chip { color: #d4e1ed; font-size: 12px; }
.hero-trust-chip i { font-size: 15px; }
.hero-thumbnails-floating-bar { position: absolute; top: 27px; bottom: auto; left: 0; right: 0; margin: 0; z-index: 8; }
.hero-thumbnails-floating-bar .container { align-items: center; justify-content: space-between !important; gap: 20px; }
.hero-slider-caption { color: #d3e4f4; font-size: 11px; font-weight: 700; letter-spacing: 2px; display: flex; align-items: center; gap: 10px; }
.hero-slider-caption i { color: #7de3cc; font-size: 18px; }
.hero-thumbs-group { gap: 8px; width: auto; }
.hero-thumb-card { width: 178px; min-height: 60px; padding: 9px; background: #0b213dbf; border-color: #ffffff30; border-radius: 10px; backdrop-filter: blur(12px); }
.hero-thumb-card:hover { background: #173d60; }
.hero-thumb-card.active { background: #193c57d9; border-color: #7de3cc; box-shadow: 0 4px 18px #0002; }
.hero-thumb-card .thumb-img { width: 40px; height: 40px; border-radius: 5px; }
.hero-thumb-card .thumb-number { color: #90e7d7; font-size: 10px; }
.hero-thumb-card .thumb-label { color: #e3eef9; font-size: 9px; white-space: normal; }
.thumb-progress-fill { background: #71e2cf; }
.hero-arrow-btn { display: flex; top: auto; bottom: 30px; width: 42px; height: 42px; background: #0c2643c9; color: #fff; border-color: #ffffff40; transform: none; }
.hero-arrow-btn.prev { left: max(20px,calc((100% - 1240px)/2 + 12px)); right: auto; }
.hero-arrow-btn.next { left: max(73px,calc((100% - 1240px)/2 + 65px)); right: auto; }
.hero-arrow-btn:hover { background: #1761d5; transform: translateY(-2px); }

/* Accessible Bootstrap dialog, with the existing appointment route as its CTA. */
.ayan-booking-modal .modal-dialog { max-width: 760px; margin-right: auto; margin-left: auto; }
.ayan-booking-modal .modal-content { border: 1px solid #ffffff44; border-radius: 23px; overflow: hidden; box-shadow: 0 35px 100px #071d3860; }
.ayan-booking-modal .modal-body { padding: 0; }
.ayan-booking-close { position: absolute; top: 15px; right: 15px; z-index: 2; background-color: #fff; padding: 11px; border-radius: 50%; opacity: .8; }
.ayan-booking-layout { display: grid; grid-template-columns: .82fr 1.18fr; }
.ayan-booking-visual { position: relative; background: #102c48; min-height: 410px; padding: 31px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.ayan-booking-visual::before { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 20% 10%,#1761d544,transparent 60%),linear-gradient(135deg,#102c48,#0b4050); color: #ffffff06; font: 800 340px/1 var(--font-heading); }
.ayan-booking-visual > * { position: relative; }
.ayan-popup-brand { display: flex; align-items: center; gap: 10px; color: #fff; font: 800 18px/1.3 var(--font-heading); }
.ayan-popup-brand img { width: 41px; height: 41px; border-radius: 11px; }
.ayan-popup-visual-copy { color: #fff; }
.ayan-popup-visual-copy > i { font-size: 40px; color: #81e8d3; display: block; margin-bottom: 12px; }
.ayan-popup-visual-copy strong { display: block; font: 800 30px/1.2 var(--font-heading); letter-spacing: -.7px; }
.ayan-popup-visual-copy p { color: #c5d9ea; font-size: 12px; margin: 14px 0 0; line-height: 1.8; }
.ayan-booking-copy { padding: 46px 34px 30px; background: linear-gradient(145deg,#fff,#f4f9ff); }
.ayan-popup-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: 1px; font-weight: 800; text-transform: uppercase; color: #087563; background: #e4f5ed; padding: 7px 10px; border-radius: 6px; }
.ayan-booking-copy h2 { margin: 18px 0 13px; color: #102c48; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.9px; }
.ayan-popup-doctor { display: flex; gap: 11px; align-items: center; padding: 15px 0; margin-bottom: 8px; border-bottom: 1px solid #e4edf5; }
.ayan-popup-doctor > i { font-size: 24px; color: #1761d5; background: #edf4ff; border-radius: 11px; padding: 8px 10px; }
.ayan-popup-doctor strong { font-size: 15px; color: #173957; display: block; }
.ayan-popup-doctor small { display: block; font-size: 11px; color: #61788c; margin-top: 3px; }
.ayan-popup-description { font-size: 12px; color: #60768a; line-height: 1.8; margin: 13px 0 19px; }
.ayan-popup-book { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 49px; border-radius: 9px; background: linear-gradient(105deg,#1761d5,#087f9a); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 7px 18px #1761d51a; }
.ayan-popup-book:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 9px 20px #1761d530; }
.ayan-popup-call { display: flex; align-items: center; justify-content: center; gap: 8px; color: #1761d5; font-size: 12px; font-weight: 700; padding: 14px 0 0; }
.ayan-popup-later { display: block; margin: 15px auto 0; border: 0; background: none; font-size: 11px; color: #61788c; padding: 6px 10px; text-decoration: underline; text-underline-offset: 3px; }
.ayan-popup-later:hover { color: #1761d5; }
.ayan-booking-modal.show .ayan-booking-visual { animation: ayanPopupIn .45s ease both; }
.ayan-booking-modal.show .ayan-booking-copy { animation: ayanPopupIn .5s .08s ease both; }
@keyframes ayanColorFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes ayanButtonShine { 0%,65% { left: -60%; } 100% { left: 150%; } }
@keyframes ayanPopupIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1400px) { .hero-cinematic-slider { height: 740px; } }
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ayan-brand-mark { width: 34px; height: 34px; }
    .ayan-brand-wordmark strong { font-size: 17px; }
    .ayan-brand-wordmark small { font-size: 10px; }
    .navbar-brand-logo { gap: 9px; }
    .navbar-hospital .nav-link { font-size: 12px; padding: 8px 6px !important; gap: 5px; }
    .navbar-hospital .nav-link .nav-icon { width: 25px; height: 25px; font-size: 14px; }
    .btn-appointment-nav.btn-animated-cta { font-size: 12px; padding: 13px 12px; }
    .hero-slide .col-xl-7 { width: 78%; }
}
@media (max-width: 991.98px) {
    .navbar-hospital,.navbar-hospital.scrolled { padding: 14px 0; }
    .ayan-brand-wordmark strong { font-size: 20px; }
    .hero-cinematic-slider { height: 680px; min-height: 0; }
    .hero-slide .col-xl-7 { width: 90%; }
    .hero-content-block { max-width: 650px; padding: 95px 0 30px; }
    .hero-thumbnails-floating-bar .container { justify-content: flex-end !important; }
    .hero-slider-caption { display: none; }
    .hero-main-title { font-size: 54px; }
    .topbar-hospital .container { justify-content: center !important; }
    .topbar-hospital .topbar-badge { font-size: 10px; }
}
@media (max-width: 767.98px) {
    .ayan-brand-mark { width: 34px; height: 34px; border-radius: 9px; }
    .ayan-brand-wordmark strong { font-size: 18px; letter-spacing: -.4px; }
    .ayan-brand-wordmark small { font-size: 10px; margin-top: 5px; }
    .navbar-brand-logo { gap: 10px; }
    .hero-cinematic-slider { height: 720px; min-height: 0; }
    .hero-slide-bg { inset: 0; width: 100%; height: 100%; background-position: 60% center; border-radius: 0; }
    .hero-slide-overlay,.hero-slide-overlay.overlay-cyan,.hero-slide-overlay.overlay-red { background: linear-gradient(90deg,#06172beb,#091e34ab),linear-gradient(0deg,#07172df2,transparent) !important; }
    .hero-slide .col-xl-7 { width: 100%; }
    .hero-slide .row { align-items: center !important; }
    .hero-content-block { padding: 90px 0 28px; }
    .hero-main-title { font-size: clamp(39px,9vw,53px); margin-bottom: 22px; }
    .hero-badge-live { font-size: 9px !important; letter-spacing: .6px !important; padding: 8px 10px; margin-bottom: 23px; }
    .hero-lead-text { font-size: 15px; line-height: 1.85; margin-bottom: 25px; }
    .hero-actions-group { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero-actions-group a { width: 100%; padding: 14px 19px; font-size: 13px; min-height: 48px; }
    .hero-trust-row { gap: 11px 15px; margin-top: 24px; }
    .hero-trust-chip { font-size: 10px; }
    .hero-thumbnails-floating-bar { top: 19px; }
    .hero-thumbs-group { width: 100%; gap: 6px; }
    .hero-thumb-card { width: calc((100% - 12px)/3); min-height: 53px; padding: 7px; gap: 6px; }
    .hero-thumb-card .thumb-img { width: 27px; height: 32px; }
    .hero-thumb-card .thumb-label { font-size: 7px; }
    .hero-thumb-card .thumb-number { font-size: 9px; }
    .hero-arrow-btn { bottom: 21px; width: 36px; height: 36px; }
    .hero-arrow-btn.prev { left: 20px; right: auto; }
    .hero-arrow-btn.next { left: 66px; right: auto; }
    .ayan-booking-modal .modal-dialog { margin: 18px; max-width: calc(100% - 36px); min-height: calc(100% - 36px); }
    .ayan-booking-layout { grid-template-columns: 1fr; }
    .ayan-booking-visual { min-height: 128px; padding: 22px; }
    .ayan-popup-brand { font-size: 17px; }
    .ayan-popup-visual-copy { margin-top: 17px; }
    .ayan-popup-visual-copy > i,.ayan-popup-visual-copy p { display: none; }
    .ayan-popup-visual-copy strong { font-size: 23px; }
    .ayan-booking-copy { padding: 25px 24px 20px; }
    .ayan-booking-copy h2 { font-size: 28px; margin-top: 15px; }
    .ayan-booking-close { background-color: #ffffffec; }
}
@media (max-width: 374.98px) {
    .ayan-brand-mark { width: 28px; height: 28px; }
    .ayan-brand-wordmark strong { font-size: 15px; }
    .ayan-brand-wordmark small { font-size: 9px; }
    .navbar-brand-logo { gap: 8px; }
    .navbar-toggler { min-width: 40px; min-height: 40px; }
    .hero-cinematic-slider { height: 760px; }
    .hero-main-title { font-size: 37px; }
    .hero-thumb-card .thumb-img { display: none !important; }
    .hero-thumb-card .thumb-label { font-size: 8px; }
    .ayan-booking-copy { padding: 23px 20px 18px; }
    .ayan-booking-copy h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .ayan-site *, .ayan-site *::before, .ayan-site *::after { animation: none !important; transition: none !important; }
}