.chips {
    gap: .5rem;
    overflow: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: .75rem 0 1.25rem;
}

.chips::-webkit-scrollbar {
    display: none;
}

.chip {
    border-radius: 999px;
    padding: .4rem .9rem;
    background: #f3f4f6;
    font-weight: 600;
    font-size: .9rem;
    border: none;
}

.chip:hover {
    background: #0a899a;
    color: #fff;
}

.chip.active {
    background: #0a899a;
    color: #fff;
}

/* University card */
.uni-card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .2);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #0a899a10;
}

.uni-logo {
    height: auto;
    object-fit: contain;
    padding: 0px 10px 0px 10px;
}

.uni-photo {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.uni-body {
    padding: 1rem 1.25rem;
}

.uni-title {
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.2;
    margin-bottom: .4rem;
}

.uni-sub {
    color: #093a58;
    font-weight: 600;
    font-size: .93rem;
    margin-bottom: .5rem;
}

.meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #111827;
    font-weight: 700;
    margin: .35rem 0;
}

.meta .icon {
    width: 18px;
    height: 18px;
    color: #093a58;
}

.tuition {
    color: #374151;
    font-weight: 700;
    margin: .35rem 0 .7rem;
}

/* Program badges */
.badge-pill {
    display: inline-block;
    background: #0a899a;
    color: #fff;
    border-radius: 5px;
    padding: .5rem;
    font-weight: 700;
    font-size: .78rem;
    margin: 0 .35rem .35rem 0;
}

.badge-pill:hover {
    display: inline-block;
    background: #6b7280;
    color: #fff;
    border-radius: 5px;
    padding: .5rem;
    font-weight: 700;
    font-size: .78rem;
    margin: 0 .35rem .35rem 0;
}

/* Footer row */
.card-footer-clean {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    margin-top: auto;
}

.price-chip {
    font-weight: 600;
    font-size: 1rem;
    background: #f9fafb;
    color: #000000;
    padding: .4rem .6rem;
    border-radius: 8px;
}

.btn-learn {
    background: #0a899a;
    color: #fff;
    font-weight: 600;
    border-radius: 5px;
    padding: .55rem 1rem;
    border: 0;
}

.btn-learn:hover {
    background: #093a58;
    color: #fff;
}

/* Small tweaks on mobile */
@media (max-width:575.98px) {
    .uni-photo {
        height: 180px;
    }

    .uni-title {
        font-size: 1.15rem;
    }
}


/*-----*/

/* Utilities */
.container-narrow {
    max-width: 1140px;
    margin-inline: auto
}

.rounded-2xl {
    border-radius: 18px
}

.shadow-smooth {
    box-shadow: 0 14px 36px rgba(2, 6, 23, .12)
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #eaf3ff;
    color: #0a899a;
    border-radius: 0px 20px 0px 20px;
    padding: 1rem;
    font-weight: 600;
    font-size: 1rem;
}

.chip .dot {
    width: 8px;
    height: 8px;
    background: #0ea5e9;
    border-radius: 999px;
    display: inline-block
}

/* Top Nav tabs (under hero) */
.page-tabs {
    background: #0a899a;
    color: #fff
}

.page-tabs .tab-link {
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    padding: 1rem 2rem;
    display: inline-block;
    border-right: 3px solid #fff
}

.page-tabs .tab-link.active {
    border-color: #fff
}

/* HERO */
.hero {
    position: relative;
    color: #fff;
    background: linear-gradient(0deg, rgba(11, 26, 66, .65), rgba(11, 26, 66, .65)),
        url('https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
    min-height: 350px;
}

.hero .title {
    font-weight: 900;
    letter-spacing: .2px
}

.breadcrumbs {
    gap: .5rem
}

.breadcrumbs a {
    color: #fff;
    text-decoration: none;
    font-weight: 700
}

.breadcrumbs .sep {
    opacity: .55
}

.hero-badge {
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2)
}

/* Overview icons */
/* ===== Top nav bar (tabs) ===== */
.topbar {
    background: #0a899a
}

.topbar a {
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    padding: 1rem 1.25rem;
    display: inline-block;
}

.topbar .divider {
    width: 1px;
    height: auto;
    background: #ffffff55;
    margin: 0 .25rem;
    display: inline-block;
    vertical-align: middle;
}

.topbar a:hover {
    background: rgba(255, 255, 255, .08)
}

/* ===== Overview badge pill ===== */
.pill_overview {
    background: #0a899a;
    color: #fff;
    font-weight: 800;
    padding: .6rem 1.2rem;
    border-radius: 999px;
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    box-shadow: 0 8px 20px rgba(13, 66, 198, .18);
}

.pill_overview .dot {
    width: .6rem;
    height: .6rem;
    background: #093a58;
    border-radius: 999px;
    display: inline-block;
}

/* ===== Overview copy ===== */
.leadish {
    font-size: 1rem;
    line-height: 1.65
}

.logo-uc {
    max-width: 100%;
    width: 100%;
    height: auto
}

/* ===== Fact items ===== */
.fact {
    display: flex;
    gap: 1rem;
    align-items: center
}

.fact h5 {
    margin: 0;
    font-weight: 800
}

.fact small {
    color: #111827
}

.icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #0a899a;
    border: 6px solid #eaf1ff;
}

.icon svg {
    width: 30px;
    height: 30px
}


.icon_sys {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #0a899a;
    border: 6px solid #eaf1ff;
}

.icon_sys svg {
    width: 15px;
    height: 15px
}


@media (max-width: 991.98px) {
    .leadish {
        font-size: 1.05rem
    }

    .topbar a {
        padding: .9rem .9rem
    }
}

.text-title
{
  color: #093a58;
}

/* Programs */
.section-title {
    color: #0a899a;
    font-weight: 900;
    line-height: 1.1;
}

.title-underline {
    width: 120px;
    height: 6px;
    border-radius: 6px;
    background: #f4ad23;
    margin: .6rem auto 1.4rem;
}

.prog-card {
    border: 0;
    background: #f8fafc;
    border-radius: 25px 0px 25px 0px;
    box-shadow: 0 16px 40px rgba(2, 6, 23, .15);
    height: 100%;
}

.prog-card .card-body {
    padding: 1.1rem 1.15rem 1.1rem 1.15rem
}

.prog-card.active {
    background: #0a899a;
    color: #fff;
}

.prog-card.active .muted,
.prog-card.active .small {
    color: #fff !important
}

.prog-card.active .price a {
    color: #fff;
    text-decoration: underline
}

.prog-card .title {
    font-weight: 900;
    font-size: 1.05rem
}

.badge-slim {
    display: inline-block;
    font-weight: 600;
    font-size: .72rem;
    padding: .2rem .5rem;
    border-radius: 1rem;
    margin-right: .35rem;
    margin-bottom: .35rem;
    border: 1px solid #dbe4ff;
    background: #eaf2ff;
    color: #0a899a;
}

.badge-slim.gold {
    background: #fde3ac;
    border-color: #f9d27e;
    color: #4b2f00
}

.muted {
    color: #6b7280
}

.icon_programs {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.divider {
    height: 1px;
    background: #e5e7eb
}

.prog-card.active .divider {
    background: #fff
}

.foot-row {
    font-size: 1rem
}

.foot-row svg {
    margin-top: -2px
}

.loc-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    margin-right: 10px;
    color: #0a899a;
    background: #eaf2ff;
    border-radius: .6rem;
    padding: .35rem .6rem
}

.prog-card.active .loc-chip {
    background: #0a899a;
    color: #fff
}

@media (max-width:575.98px) {
    .prog-card .title {
        font-size: 1rem
    }
}


/* Tuition */
.title {
    font-weight: 900;
    color: #0a899a;
    line-height: 1.1;
}

.title-underline {
    width: 160px;
    height: 6px;
    background: #0a899a;
    border-radius: 6px;
    margin: .75rem auto 1.25rem
}

.subtitle {
    color: #111;
    opacity: .8
}

/* Pills row */
.pillbar {
    gap: .75rem;
    justify-content: center
}

.pill {
    border-radius: 10px;
    padding: .7rem 1rem;
    font-weight: 800;
    border: 0;
    background: #0a899a;
    color: #111;
    box-shadow: 0 8px 18px rgba(231, 166, 26, .25);
}

.pill.active {
    background: #0a899a;
    color: #fff;
    box-shadow: 0 8px 18px rgba(13, 67, 199, .28);
}

/* Panels */
.sheet {
    background: #fff;
    border: 1px solid #dadada;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(2, 6, 23, .2);
}

.sheet-head {
    background: #f1f2f4;
    padding: .85rem 1.2rem;
    font-weight: 900;
    font-size: 1.25rem;
}

.sheet-body {
    padding: 1.25rem 1.4rem;
}

.bullet {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: 1.2rem;
    margin: .5rem 0;
}

.bullet .icon {
    width: 28px;
    height: 28px;
    color: #0a899a;
    background: #eaf1ff;
    border-radius: 999px;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
}

@media (max-width: 575.98px) {
    .sheet-head {
        font-size: 1.1rem
    }

    .bullet {
        font-size: 1.05rem
    }
}

/* Start Dates */
.dates-hero {
    color: #fff;
    position: relative;
    background:
        linear-gradient(0deg, rgba(9, 24, 66, .70), rgba(9, 24, 66, .70)),
        url("https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=1600&auto=format&fit=crop") center/cover no-repeat;
}

/* Heading styles */
.dates-title {
    font-weight: 900;
    line-height: 1.05;
}

.leadish {
    opacity: .95;
    font-size: 1.05rem;
    line-height: 1.7
}

/* CTA button */
.btn-gold {
    background: #0a899a;
    color: #0f172a;
    border: 0;
    font-weight: 900;
    border-radius: 999px;
    padding: .8rem 1.25rem;
    box-shadow: 0 10px 22px rgba(242, 177, 58, .35);
}

/* Date cards */
.date-card {
    background: #fff;
    color: #0b2a66;
    border: 0;
    border-left: 10px solid #0a899a;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 18px 40px rgba(2, 6, 23, .18);
}

.date-term {
    font-weight: 900;
    font-size: 1.15rem
}

.date-when {
    color: #1f2937;
    font-weight: 700
}

/* spacing on small screens */
@media (max-width: 991.98px) {
    .dates-title {
        font-size: 2rem
    }
}

/*-----------------------------------*/

/* Section heading */
.section-title_programs {
    font-weight: 900;
    line-height: 1.05;
    color: #0a899a;
}

.section-sub_programs {
    color: #111827;
    opacity: .8;
}

/* Filter chips */
.chips_programs {
    gap: .55rem;
    overflow: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.chips_programs::-webkit-scrollbar {
    display: none;
}

.chip_programs {
    background: #f3f4f6;
    border: 0;
    border-radius: 999px;
    padding: .55rem 1rem;
    font-weight: 800;
    color: #0b1324;
}

.chip_programs.active {
    background: #093a58;
    color: #fff;
}
.prog-card_programs.is-match {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .35);
    opacity: 1;
    filter: none;
    background: #0a899a;
    color: #fff;
}

.prog-card_programs.is-match .muted_programs,
.prog-card_programs.is-match .small {
    color: #e5edff !important;
}

.prog-card_programs.is-match .price_programs a {
    color: #fff;
    text-decoration: underline;
}

.prog-card_programs.is-match .divider_programs {
    background: rgba(255, 255, 255, .35);
}


.prog-card_programs.is-dim {
    opacity: 0.25;
    filter: grayscale(0.4);
}

/* Program cards */
.prog-card_programs {
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(2, 6, 23, .2);
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease, filter .25s ease;
}

.prog-card_programs .card-body {
    padding: 1rem 1.15rem 1rem;
}

.prog-card_programs.blue_programs {
    background: #093a58;
    color: #fff;
}

.prog-card_programs.blue_programs .muted_programs {
    color: #dbe6ff !important
}

.prog-card_programs.blue_programs .price_programs a_programs {
    color: #fff;
    text-decoration: underline
}

.uni-pill_programs {
    display: inline-block;
    /* background: #0a899a; */
     background: #fff;
    color: #4b2f00;
    font-weight: 800;
    font-size: .78rem;
    padding: .1rem;
    border-radius: .5rem;
    border:3px solid #0a899a;
}

.uni-pill_programs img{
    border-radius: .5rem;
}

.sub-pill_programs {
    display: inline-block;
    background: #eaf2ff;
    color: #123a9b;
    font-weight: 800;
    font-size: .72rem;
    padding: .2rem .5rem;
    border-radius: .5rem;
    border: 1px solid #dbe5ff;
}

.title_programs {
    font-weight: 900;
    font-size: 1.1rem
}

.price_programs a {
    color: #093a58;
    font-weight: 800
}

.price_programs s {
    opacity: .6
}

.muted_programs {
    color: #6b7280
}

.icon_programs {
    width: 18px;
    height: 18px
}

.divider_programs {
    height: 1px;
    background: #e5e7eb
}

.prog-card_programs.blue_programs .divider_programs {
    background: #7fa7ff
}

/* Bottom CTAs */
.cta-wrap_programs {
    gap: .75rem
}

.btn-pill_programs {
    border-radius: 10px;
    padding: .85rem 1.25rem;
    font-weight: 900;
}

.btn-callback_programs {
    background: #093a58;
    color: #fff
}

.btn-callback_programs:hover {
    background: #0a899a;
    color: #fff
}

.btn-apply_programs {
    background: #0a899a;
    color: #fff
}

.btn-apply_programs:hover {
    background: #093a58;
    color: #fff
}

@media (max-width: 575.98px) {
    .title_programs { font-size: 1rem; }
}