/* Shared presentation for the six service detail pages. */
.service-info-page { color: #34425a; background: #fff; }
.service-info-page main { overflow: hidden; }
.service-info-page .detail-hero {
    background: radial-gradient(circle at 77% 48%, #173454 0, #13243e 38%, #101d35 75%);
    color: #fff;
    min-height: 420px;
    display: flex;
    align-items: center;
    padding: 42px 0;
}
.service-info-page .detail-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, .82fr);
    align-items: center;
    gap: clamp(30px, 6vw, 90px);
}
.service-info-page .detail-hero .eyebrow,
.service-info-page .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #a9efd9;
    font: 700 11px/1.4 Inter, sans-serif;
    text-transform: uppercase;
    letter-spacing: .18em;
}
.service-info-page .detail-hero .eyebrow::before,
.service-info-page .section-eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.service-info-page .detail-hero h1 {
    max-width: 690px;
    margin: 22px 0;
    color: #fff;
    font: 800 clamp(2.55rem, 5vw, 4.4rem)/1.09 "Plus Jakarta Sans", sans-serif;
    letter-spacing: -.055em;
}
.service-info-page .detail-hero .breadcrumb { margin: 0; font-size: 15px; }
.service-info-page .detail-hero .breadcrumb-item,
.service-info-page .detail-hero .breadcrumb-item.active { color: #d4dfec; }
.service-info-page .detail-hero .breadcrumb-item + .breadcrumb-item::before { color: #a2b2c6; }
.service-info-page .detail-hero .breadcrumb a { color: #a9efd9; text-decoration: none; }
.service-info-page .detail-hero .breadcrumb a:hover { color: #fff; }
.service-info-page .detail-hero-art { justify-self: end; width: min(100%, 370px); position: relative; }
.service-info-page .detail-hero-art::before {
    content: ""; position: absolute; inset: 12px -12px -12px 12px;
    border: 1px solid rgba(169,239,217,.26); border-radius: 24px;
}
.service-info-page .detail-hero-art img {
    display: block; position: relative; width: 100%; aspect-ratio: 1;
    object-fit: cover; border-radius: 24px; box-shadow: 0 24px 54px rgba(0,0,0,.18);
}
.service-info-page .detail-section { padding: 68px 0; }
.service-info-page .detail-section--soft { background: #f3f7f8; }
.service-info-page .detail-section .section-eyebrow,
.service-info-page .detail-related .section-eyebrow { color: #08766f; }
.service-info-page .detail-section h2,
.service-info-page .detail-related h2 {
    color: #14223b; font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1.2; letter-spacing: -.04em;
}
.service-info-page .detail-section h3,
.service-info-page .detail-related h3 { color: #172840; font-family: "Plus Jakarta Sans", sans-serif; }
.service-info-page .detail-section p,
.service-info-page .detail-section li,
.service-info-page .detail-related p { line-height: 1.75; }
.service-info-page .detail-section .service-item {
    background: #fff; border: 1px solid #dde8e9 !important; border-radius: 16px;
    box-shadow: 0 12px 32px rgba(17,29,53,.045); overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.service-info-page .detail-section .service-item:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(17,29,53,.09); }
.service-info-page .detail-section .service-item > i { color: #148782; }
.service-info-page .detail-section .service-item h3 { font-size: 1.12rem; }
.service-info-page .detail-section .service-item p { margin-bottom: 0; }
.service-info-page .detail-section .service-item.card { padding: 0 !important; }
.service-info-page .detail-section .service-item.card .card-img-top {
    height: 165px; object-fit: cover; background: #11213b;
}
.service-info-page .detail-section .service-item.card .card-body { display: flex; flex-direction: column; align-items: flex-start; }
.service-info-page .detail-section .service-item.card .btn { margin-top: auto; }
.service-info-page .detail-section .row > div > img.img-fluid {
    width: 100%; max-height: 460px; object-fit: cover; border-radius: 18px !important;
    background: #11213b; box-shadow: 0 22px 50px rgba(17,29,53,.1);
}
.service-info-page .detail-section li > i { color: #12837b; }
.service-info-page .btn-primary { background: #137e79; border-color: #137e79; }
.service-info-page .btn-primary:hover { background: #0c6965; border-color: #0c6965; }
.service-info-page .btn-outline-primary { color: #117d77; border-color: #117d77; }
.service-info-page .btn-outline-primary:hover { background: #117d77; border-color: #117d77; }
.service-info-page .detail-related { padding: 68px 0; background: #fff; }
.service-info-page .detail-related .service-card-photo {
    background: #fff; border: 1px solid #e0e9ed; border-radius: 16px;
    overflow: hidden; box-shadow: 0 12px 32px rgba(17,29,53,.05);
}
.service-info-page .detail-related .service-card-media img { width: 100%; height: 180px; object-fit: cover; }
.service-info-page .detail-related .service-card-icon { background: #137e79; border-radius: 12px; }
.service-info-page .detail-related .service-card-body { padding: 24px; }
.service-info-page .detail-related .service-card-body .btn { background: #e8f7f2; color: #0a716b; border: 0; }
.service-info-page .detail-related .service-card-body .btn:hover { background: #c7eee1; }
.service-info-page .detail-section [data-bs-toggle="collapse"] { color: #172840 !important; font-size: 1rem; line-height: 1.5; }
.service-info-page .detail-section [data-bs-toggle="collapse"] i { color: #137e79 !important; }
.service-info-page .detail-section .border-bottom { border-color: #d8e5e6 !important; }
.service-info-page .detail-appointment { padding: 24px 0 72px; background: #f3f7f8; }
.service-info-page .detail-appointment .appointment {
    background: radial-gradient(circle at 5% 5%, #1c4860, #101d35 66%);
    border-radius: 22px; box-shadow: 0 25px 60px rgba(17,29,53,.13);
}
.service-info-page .detail-appointment .appointment > .row { padding: clamp(24px, 4vw, 56px) !important; }
.service-info-page .detail-appointment h2 { color: #fff; font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: -.04em; }
.service-info-page .detail-appointment .bg-white { border-radius: 14px !important; }
.service-info-page .detail-appointment .bg-primary { background: #137e79 !important; }
.service-info-page .detail-advisor-icon {
    flex: 0 0 44px; width: 44px; height: 44px; margin-right: 14px;
    display: grid; place-items: center; border-radius: 50%; background: #a9efd9; color: #10233a;
}
.service-info-page .detail-appointment .form-control { border-color: #d9e5e8; }
.service-info-page .detail-appointment .form-control:focus { border-color: #137e79; box-shadow: 0 0 0 .2rem rgba(19,126,121,.12); }
.service-info-page .detail-appointment .btn { width: 100%; }
.service-info-page .detail-feature { background: #fff; border: 1px solid #dce8e8; border-radius: 16px; padding: 30px; height: 100%; box-shadow: 0 12px 32px rgba(17,29,53,.045); }
.service-info-page .detail-feature i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: #e2f5ee; color: #08766f; font-size: 21px; margin-bottom: 24px; }
.service-info-page .detail-feature h3 { font-size: 1.2rem; }
.service-info-page .detail-feature p { margin-bottom: 0; }
.service-info-page .detail-intro { max-width: 740px; }
.service-info-page .detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.service-info-page .detail-actions a { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px; border-radius: 9px; text-decoration: none; font-weight: 700; }
.service-info-page .detail-actions .primary { background: #a9efd9; color: #10233a; }
.service-info-page .detail-actions .secondary { color: #fff; border: 1px solid rgba(255,255,255,.35); }
@media (max-width: 991px) {
    .service-info-page .detail-hero { min-height: 360px; }
    .service-info-page .detail-hero-art { width: min(100%, 310px); }
}
@media (max-width: 767px) {
    .service-info-page .detail-hero { padding: 46px 0 52px; }
    .service-info-page .detail-hero-layout { grid-template-columns: 1fr; gap: 38px; }
    .service-info-page .detail-hero-art { justify-self: center; width: min(70%, 280px); }
    .service-info-page .detail-section, .service-info-page .detail-related { padding: 54px 0; }
    .service-info-page .detail-appointment { padding-bottom: 54px; }
    .service-info-page .detail-appointment .appointment > .row { padding: 24px !important; }
    .service-info-page .detail-appointment .bg-white.p-5 { padding: 24px !important; }
}
@media (max-width: 480px) {
    .service-info-page .detail-hero h1 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
    .service-info-page .detail-hero-art { width: min(66%, 230px); }
    .service-info-page .detail-appointment .appointment > .row { padding: 12px !important; }
}