/* ALO Eye Hospital theme — colours from the logo */
:root {
    --alo-navy: #223f81;
    --alo-navy-dark: #172c5c;
    --alo-sky: #4ab2e5;
    --alo-lavender: #8587b2;
    --alo-soft: #f2f7fc;
    --alo-ink: #1d2433;
    --alo-muted: #5b6577;
    --alo-radius: 18px;
    --alo-shadow: 0 10px 30px rgba(34, 63, 129, .08);
    --alo-font-bn: "Hind Siliguri", "Anek Bangla", system-ui, sans-serif;
    --alo-font-head: "Anek Bangla", "Hind Siliguri", system-ui, sans-serif;
    --alo-font-en: "Montserrat", "Anek Bangla", system-ui, sans-serif;
}

body.alo {
    font-family: var(--alo-font-bn);
    color: var(--alo-ink);
    font-size: 17px;
    line-height: 1.75;
    background: #fff;
}
.alo h1, .alo h2, .alo h3, .alo h4, .alo h5, .alo h6 { font-family: var(--alo-font-head); color: var(--alo-navy); font-weight: 700; line-height: 1.35; }
.alo a { color: var(--alo-navy); }
.alo a:hover { color: var(--alo-sky); }
.alo .btn-light, .alo .btn-light:hover { color: var(--alo-navy); }
.alo .btn-outline-light { color: #fff; }
.alo .btn-outline-light:hover { color: var(--alo-navy); }
.alo .btn-success, .alo .btn-success:hover { color: #fff; }
.alo-en, .alo-eyebrow, .alo-nav .nav-link, .alo-nav .dropdown-item, .alo-btn-primary, .alo-btn-outline { font-family: var(--alo-font-en); }
.text-navy { color: var(--alo-navy); }

/* buttons */
.alo .alo-btn-primary { background: var(--alo-navy); color: #fff; border: 0; border-radius: 999px; padding: .65rem 1.4rem; font-weight: 700; }
.alo .alo-btn-primary:hover, .alo .alo-btn-primary:focus { background: var(--alo-sky); color: #fff; }
.alo .alo-btn-outline { border: 2px solid var(--alo-navy); color: var(--alo-navy); border-radius: 999px; padding: .55rem 1.3rem; font-weight: 700; background: transparent; }
.alo .alo-btn-outline:hover { background: var(--alo-navy); color: #fff; }
.alo .btn-lg { font-size: 1rem; }

/* top bar + nav */
.alo-topbar { background: var(--alo-navy-dark); color: #dfe8f7; font-size: .85rem; padding: .45rem 0; }
.alo-topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.alo-nav { background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); box-shadow: 0 2px 18px rgba(34, 63, 129, .08); padding: .6rem 0; }
.alo-logo { height: 46px; width: auto; }
.alo-nav .nav-link { color: var(--alo-ink); font-weight: 600; font-size: .92rem; padding: .5rem .85rem !important; border-radius: 999px; }
.alo-nav .nav-link:hover, .alo-nav .nav-link.active { color: var(--alo-navy); background: var(--alo-soft); }
.alo-nav .dropdown-menu { border: 0; border-radius: 14px; box-shadow: var(--alo-shadow); padding: .5rem; }
.alo-nav .dropdown-item { font-size: .88rem; border-radius: 8px; padding: .45rem .8rem; }
.alo-nav .dropdown-item.active, .alo-nav .dropdown-item:active { background: var(--alo-navy); color: #fff; }
@media (min-width: 992px) {
    .alo-nav .alo-mega { columns: 2; min-width: 470px; }
    .alo-nav .alo-mega li { break-inside: avoid; }
}

/* hero */
.alo-hero { background: radial-gradient(1100px 500px at 85% 10%, rgba(74, 178, 229, .22), transparent 60%), linear-gradient(180deg, #f5f9fe 0%, #fff 100%); padding: 5rem 0 4rem; overflow: hidden; }
.alo-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--alo-sky); margin-bottom: .6rem; }
.alo-hero-title { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 800; color: var(--alo-navy); line-height: 1.2; }
.alo-hero-title span { color: var(--alo-sky); }
.alo-hero-text { font-size: 1.12rem; color: var(--alo-muted); max-width: 620px; }
.alo-hero-facts { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.alo-hero-facts div { background: #fff; border-radius: 14px; padding: .8rem 1.1rem; box-shadow: var(--alo-shadow); min-width: 150px; }
.alo-hero-facts strong { display: block; font-family: var(--alo-font-head); color: var(--alo-navy); font-size: 1.25rem; }
.alo-hero-facts span { font-size: .85rem; color: var(--alo-muted); }
.alo-hero-card { background: var(--alo-navy); color: #fff; border-radius: 28px; padding: 2.5rem 2rem; text-align: center; box-shadow: 0 30px 60px rgba(34, 63, 129, .25); position: relative; }
.alo-hero-card::after { content: ""; position: absolute; inset: 14px; border: 2px solid rgba(133, 135, 178, .55); border-radius: 20px; pointer-events: none; }
.alo-hero-mark { width: 150px; background: #fff; border-radius: 50%; padding: 18px; margin-bottom: 1.2rem; }
.alo-hero-card h2 { color: #fff; font-size: 2rem; margin-bottom: .3rem; }
.alo-hero-card p { color: #cfe3f6; }
.alo-chip-list { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: 1rem; }
.alo-chip-list span { background: rgba(255, 255, 255, .12); border-radius: 999px; padding: .25rem .8rem; font-size: .85rem; }

/* sections */
.alo-section { padding: 4.5rem 0; }
.alo-bg-soft { background: var(--alo-soft); }
.alo-section-head { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.alo-section-head h2, .alo-h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; }
.alo-section-head p { color: var(--alo-muted); }

/* cards */
.alo-service-card { display: block; height: 100%; background: #fff; border-radius: var(--alo-radius); padding: 1.8rem; box-shadow: var(--alo-shadow); text-decoration: none; color: var(--alo-ink); border: 1px solid #e8eef8; transition: transform .2s, box-shadow .2s, border-color .2s; }
.alo-service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(34, 63, 129, .14); border-color: var(--alo-sky); color: var(--alo-ink); }
.alo-service-card h3 { font-size: 1.25rem; margin: 1rem 0 .5rem; }
.alo-service-card p { color: var(--alo-muted); font-size: .97rem; margin-bottom: 1rem; }
.alo-icon { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--alo-navy), var(--alo-sky)); color: #fff; font-size: 1.4rem; }
.alo-more { font-family: var(--alo-font-head); font-weight: 600; color: var(--alo-navy); }
.alo-more i { transition: transform .2s; }
.alo-service-card:hover .alo-more i { transform: translateX(4px); }

.alo-check-list { list-style: none; padding: 0; margin: 0; }
.alo-check-list li { position: relative; padding: .55rem 0 .55rem 2.1rem; }
.alo-check-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: .6rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: rgba(74, 178, 229, .18); color: var(--alo-navy); font-size: .72rem; display: flex; align-items: center; justify-content: center; }
.alo-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 1.5rem; }
.alo-check-grid li { background: #fff; border-radius: 12px; margin-bottom: .6rem; padding: .7rem 1rem .7rem 2.8rem; box-shadow: 0 4px 14px rgba(34, 63, 129, .05); }
.alo-check-grid li::before { left: .8rem; top: .8rem; }

/* journey */
.alo-journey { display: grid; grid-template-columns: repeat(8, 1fr); gap: .8rem; position: relative; }
.alo-journey-step { text-align: center; background: #fff; border: 1px solid #e3ebf7; border-radius: 16px; padding: 1.2rem .5rem; position: relative; }
.alo-journey-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--alo-soft); color: var(--alo-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .5rem; }
.alo-journey-no { position: absolute; top: .5rem; right: .7rem; font-size: .8rem; color: var(--alo-lavender); font-weight: 700; }
.alo-journey-step strong { display: block; font-family: var(--alo-font-head); color: var(--alo-navy); }
@media (max-width: 991px) { .alo-journey { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575px) { .alo-journey { grid-template-columns: repeat(2, 1fr); } }

/* doctors */
.alo-doctor-card { background: #fff; border-radius: var(--alo-radius); padding: 1.8rem; text-align: center; box-shadow: var(--alo-shadow); height: 100%; }
.alo-avatar { width: 88px; height: 88px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--alo-navy), var(--alo-sky)); color: #fff; font-size: 2.2rem; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--alo-lavender); margin-bottom: 1rem; }
.alo-doctor-card h3 { font-size: 1.3rem; margin-bottom: .2rem; }
.alo-doctor-role { color: var(--alo-sky); font-weight: 600; font-size: .95rem; margin-bottom: .4rem; }
.alo-badge { display: inline-block; background: var(--alo-soft); color: var(--alo-navy); border-radius: 999px; padding: .25rem .8rem; font-size: .82rem; font-weight: 600; }

/* values */
.alo-value { background: #fff; border-radius: 16px; padding: 1.3rem; height: 100%; border: 1px solid #e3ebf7; }
.alo-value-letter { font-family: var(--alo-font-en); font-weight: 900; font-size: 2.2rem; color: var(--alo-sky); line-height: 1; }
.alo-value h3 { font-family: var(--alo-font-en); font-size: 1.05rem; margin: .5rem 0 .3rem; }
.alo-value h3 small { display: block; font-family: var(--alo-font-head); color: var(--alo-lavender); font-weight: 600; font-size: .9rem; }
.alo-value p { color: var(--alo-muted); font-size: .92rem; margin: 0; }

.alo-feature-box { background: #fff; border-radius: 24px; padding: 2.2rem; box-shadow: var(--alo-shadow); }
.alo-heritage { background: linear-gradient(150deg, var(--alo-navy) 0%, var(--alo-navy-dark) 100%); color: #dbe6f7; border-radius: 24px; padding: 2.2rem; position: relative; overflow: hidden; }
.alo-heritage::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 22px solid rgba(74, 178, 229, .25); }

/* visit / map */
.alo-visit { background: var(--alo-soft); border-radius: 24px; padding: 2.2rem; }
.alo-map { border-radius: 24px; overflow: hidden; box-shadow: var(--alo-shadow); height: 100%; min-height: 340px; }
.alo-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.alo-map-tall, .alo-map-tall iframe { min-height: 460px; }
.alo-contact-list li { display: flex; gap: .8rem; margin-bottom: .7rem; align-items: flex-start; }
.alo-contact-list i { color: var(--alo-sky); margin-top: .35rem; width: 18px; text-align: center; }
.alo-contact-list-dark a { color: var(--alo-ink); text-decoration: none; font-weight: 600; }

/* inner page */
.alo-page-hero { background: linear-gradient(120deg, var(--alo-navy) 0%, #2d55a5 60%, var(--alo-sky) 130%); color: #fff; padding: 3.2rem 0 2.8rem; position: relative; overflow: hidden; }
.alo-page-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; border: 30px solid rgba(255, 255, 255, .08); }
.alo-page-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 800; margin: 0; }
.alo-page-hero .lead { color: #d5e6f8; }
.alo-page-hero .breadcrumb { font-family: var(--alo-font-en); font-size: .82rem; }
.alo-page-hero .breadcrumb a { color: #cfe3f6; text-decoration: none; }
.alo-page-hero .breadcrumb-item.active, .alo-page-hero .breadcrumb-item + .breadcrumb-item::before { color: #fff; }
.alo-page { padding-top: 3.5rem; }
.alo-article { max-width: 960px; margin: 0 auto; }
.alo-article > h2, .alo-article .alo-block h2 { font-size: 1.6rem; margin: 2.2rem 0 1rem; }
.alo-article > h2:first-child { margin-top: 0; }
.alo-article h3 { font-size: 1.25rem; }
.alo-article p { color: #39424f; }
.alo-article ul:not(.alo-check-list) li { margin-bottom: .35rem; }
.alo-lead { font-size: 1.15rem; color: var(--alo-muted) !important; border-left: 4px solid var(--alo-sky); padding-left: 1rem; }
.alo-block { background: #fff; border: 1px solid #e3ebf7; border-radius: 20px; padding: 1.8rem; margin-bottom: 1.5rem; box-shadow: 0 6px 20px rgba(34, 63, 129, .05); }
.alo-block h2 { margin-top: 0 !important; }
.alo-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
.alo-mini-card { display: block; background: #fff; border: 1px solid #e3ebf7; border-radius: 16px; padding: 1.3rem; text-decoration: none; color: var(--alo-ink); height: 100%; transition: border-color .2s, transform .2s; }
.alo-mini-card:hover { border-color: var(--alo-sky); transform: translateY(-3px); color: var(--alo-ink); }
.alo-mini-card h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.alo-mini-card p { font-size: .93rem; color: var(--alo-muted); margin: 0; }
.alo-quote { background: var(--alo-navy); color: #fff; border-radius: 20px; padding: 1.6rem 1.8rem; font-family: var(--alo-font-head); font-size: 1.3rem; text-align: center; margin: 2rem 0; }
.alo-timeline { list-style: none; padding: 0; margin: 1.5rem 0; position: relative; }
.alo-timeline::before { content: ""; position: absolute; left: 18px; top: 6px; bottom: 6px; width: 3px; background: linear-gradient(var(--alo-lavender), var(--alo-sky)); border-radius: 3px; }
.alo-timeline li { position: relative; padding: 0 0 1.6rem 3.4rem; }
.alo-timeline li::before { content: ""; position: absolute; left: 9px; top: 6px; width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 5px solid var(--alo-navy); }
.alo-timeline li.alo-now::before { border-color: var(--alo-sky); box-shadow: 0 0 0 6px rgba(74, 178, 229, .2); }
.alo-timeline strong { display: block; font-family: var(--alo-font-head); color: var(--alo-navy); font-size: 1.1rem; }
.alo-timeline span { color: var(--alo-muted); }
.alo-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.alo-compare > div { border-radius: 18px; padding: 1.4rem; }
.alo-compare .alo-old { background: #f4f4f8; border: 1px dashed var(--alo-lavender); }
.alo-compare .alo-new { background: var(--alo-soft); border: 2px solid var(--alo-sky); }
@media (max-width: 575px) { .alo-compare { grid-template-columns: 1fr; } }
.alo-doctor-row { display: flex; gap: 1.4rem; align-items: flex-start; }
.alo-doctor-row .alo-avatar { flex: 0 0 88px; }
.alo-doctor-row ul { list-style: none; padding: 0; margin: .4rem 0 0; color: var(--alo-muted); font-size: .95rem; }
.alo-doctor-row ul li { margin-bottom: .15rem; }
@media (max-width: 575px) { .alo-doctor-row { flex-direction: column; align-items: center; text-align: center; } }

.alo-empty { text-align: center; padding: 3rem 1rem; }
.alo-empty i { font-size: 3rem; color: var(--alo-sky); margin-bottom: 1rem; }

/* CTA + footer */
.alo-cta { background: linear-gradient(110deg, var(--alo-navy), #2d55a5); color: #fff; padding: 2.6rem 0; }
.alo-cta h2 { color: #fff; font-size: 1.7rem; }
.alo-cta p { color: #cfe0f5; }
.alo-footer { background: var(--alo-navy-dark); color: #c6d4ec; padding: 3.5rem 0 1.2rem; font-size: .95rem; }
.alo-footer h6 { color: #fff; font-family: var(--alo-font-en); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-bottom: 1rem; }
.alo-footer a { color: #c6d4ec; text-decoration: none; }
.alo-footer a:hover { color: var(--alo-sky); }
.alo-footer ul li { margin-bottom: .45rem; }
.alo-footer-logo { background: #fff; border-radius: 14px; padding: .7rem 1rem; display: inline-block; }
.alo-footer-logo img { height: 42px; }
.alo-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.2rem; padding-top: 1.1rem; font-size: .85rem; font-family: var(--alo-font-en); }
.alo-float-wa { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 10px 25px rgba(0, 0, 0, .2); z-index: 1030; }

@media (max-width: 991px) {
    .alo-hero { padding: 3rem 0; }
    .alo-section { padding: 3.2rem 0; }
    .alo-logo { height: 38px; }
}

/* nav: Bangla labels read better a bit larger */
.alo-nav .nav-link { font-size: .95rem; }

/* blog list */
.alo-chip { border: 1px solid #d6e2f3; border-radius: 999px; padding: .35rem 1rem; font-family: var(--alo-font-head); font-weight: 600; color: var(--alo-navy); background: #fff; }
.alo-chip:hover { border-color: var(--alo-sky); color: var(--alo-navy); }
.alo .alo-chip.active { background: var(--alo-navy); border-color: var(--alo-navy); color: #fff; }
.alo-blog-search { max-width: 280px; border-radius: 999px; }
.alo-blog-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e3ebf7; border-radius: var(--alo-radius); padding: 1.5rem; text-decoration: none; color: var(--alo-ink); box-shadow: 0 6px 20px rgba(34, 63, 129, .05); transition: transform .2s, border-color .2s, box-shadow .2s; }
.alo-blog-card:hover { transform: translateY(-4px); border-color: var(--alo-sky); box-shadow: var(--alo-shadow); color: var(--alo-ink); }
.alo-blog-card h3 { font-size: 1.2rem; margin: .4rem 0 .5rem; }
.alo-blog-card p { color: var(--alo-muted); font-size: .95rem; flex: 1; }
.alo-badge-staff { background: rgba(133, 135, 178, .18); color: #4d4f86; }

/* service page extras */
.alo-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.alo-steps li { counter-increment: step; position: relative; padding: .45rem 0 .45rem 2.6rem; }
.alo-steps li::before { content: counter(step); position: absolute; left: 0; top: .45rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--alo-navy); color: #fff; font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.alo-faq details { background: #fff; border: 1px solid #e3ebf7; border-radius: 14px; padding: .9rem 1.2rem; margin-bottom: .7rem; }
.alo-faq summary { font-family: var(--alo-font-head); font-weight: 600; color: var(--alo-navy); cursor: pointer; list-style: none; position: relative; padding-right: 1.5rem; }
.alo-faq summary::-webkit-details-marker { display: none; }
.alo-faq summary::after { content: "+"; position: absolute; right: 0; top: -.1rem; font-size: 1.3rem; color: var(--alo-sky); }
.alo-faq details[open] summary::after { content: "−"; }
.alo-faq details p { margin: .7rem 0 0; color: var(--alo-muted); }
.alo-article .alo-grid-2 + .alo-block, .alo-article .alo-grid-2 + h2 { margin-top: 1.8rem; }

/* blog pagination + search */
.alo-blog-search-form { max-width: 420px; }
.alo-pagination .page-link { border-radius: 999px !important; margin: 0 .2rem; border: 1px solid #d6e2f3; color: var(--alo-navy); font-family: var(--alo-font-head); min-width: 2.6rem; text-align: center; }
.alo-pagination .page-item.active .page-link { background: var(--alo-navy); border-color: var(--alo-navy); color: #fff; }
.alo-pagination .page-item.disabled .page-link { color: #a8b3c7; }