/* Shared public-site design system: layered after the legacy template styles. */
:root {
    --vci-navy: #082b55;
    --vci-ink: #183756;
    --vci-teal: #079b9a;
    --vci-gold: #f4b73c;
    --vci-mist: #f5f8fc;
    --vci-border: #dfe8f2;
    --vci-shadow: 0 14px 38px rgba(8, 43, 85, .11);
    --vci-page-hero-background: linear-gradient(125deg, #052a55, #087d96);
}

html { scroll-behavior: smooth; }
body { color: #4a6075; background: var(--vci-mist); font-family: "Heebo", sans-serif; }
::selection { color: #fff; background: var(--vci-teal); }
a { transition: color .2s ease, transform .2s ease, box-shadow .2s ease; }
h1, h2, h3, h4, h5, h6 { color: var(--vci-ink); font-family: "Nunito", sans-serif; letter-spacing: -.015em; }

.container-xxl, .container-fluid { position: relative; }
.btn { border-radius: 10px; font-weight: 700; letter-spacing: .01em; padding: .65rem 1.15rem; box-shadow: none; }
.btn-primary, .btn-primary:hover, .btn-primary:focus { border-color: transparent; background: linear-gradient(135deg, #087fca, #0aa3a0); }
.btn-warning { border-color: transparent; background: linear-gradient(135deg, #ffca5a, #f59e0b); color: #17344f; }
.btn-outline-primary { border-color: #118bb4; color: #087fa6; }
.btn-outline-primary:hover { color: #fff; border-color: transparent; background: #087fa6; }

.form-control, .form-select { min-height: 48px; border: 1px solid var(--vci-border); border-radius: 10px; color: var(--vci-ink); box-shadow: none; }
textarea.form-control { min-height: 120px; }
.form-control:focus, .form-select:focus { border-color: var(--vci-teal); box-shadow: 0 0 0 .22rem rgba(7, 155, 154, .13); }

/* Consistent hero treatment for About, Courses, Galleries, and document pages. */
.page-header { min-height: 265px; display: flex; align-items: center; overflow: hidden; isolation: isolate; background-image: radial-gradient(circle at 82% 18%, rgba(244, 183, 60, .55), transparent 23%), linear-gradient(rgba(5, 42, 85, .78), rgba(8, 125, 150, .70)), var(--vci-page-hero-background) !important; background-position: center; background-repeat: no-repeat; background-size: auto, auto, cover; }
.page-header::before, .page-header::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; opacity: .22; }
.page-header::before { width: 290px; height: 290px; right: -80px; bottom: -155px; border: 42px solid #fff; }
.page-header::after { width: 150px; height: 150px; left: 7%; top: -82px; background: #53e0d8; }
.page-header h1, .page-header .display-3 { font-weight: 800; letter-spacing: -.035em; text-shadow: 0 3px 20px rgba(0,0,0,.17); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.7); }

.section-title { display: inline-block; color: var(--vci-teal) !important; background: transparent !important; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-title::before, .section-title::after { background: var(--vci-gold) !important; height: 2px !important; }

/* Reusable cards used by courses, gallery, videos, testimonials, and legacy pages. */
.course-item, .service-item, .team-item, .testimonial-item, .bg-light.rounded, .shadow-sm.rounded { border: 1px solid var(--vci-border); border-radius: 18px !important; background: #fff !important; box-shadow: 0 4px 16px rgba(8, 43, 85, .055); overflow: hidden; }
.course-item:hover, .service-item:hover, .team-item:hover { transform: translateY(-6px); border-color: rgba(7, 155, 154, .35); box-shadow: var(--vci-shadow); }
.course-item img, .service-item img { transition: transform .4s ease; }
.course-item:hover img, .service-item:hover img { transform: scale(1.035); }
.course-item .text-center, .service-item .text-center { padding: 1.35rem; }

.navbar-light .navbar-nav .nav-link { position: relative; font-weight: 800; letter-spacing: .025em; }
.navbar-light .navbar-nav .nav-link::after { content: ""; position: absolute; right: .75rem; bottom: .35rem; left: .75rem; height: 2px; border-radius: 2px; background: var(--vci-gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.navbar-light .navbar-nav .nav-link:hover::after, .navbar-light .navbar-nav .nav-link.active::after { transform: scaleX(1); }
.dropdown-menu { border: 1px solid var(--vci-border); border-radius: 14px; box-shadow: var(--vci-shadow); padding: .55rem; }
.dropdown-item { border-radius: 8px; font-weight: 600; padding: .6rem .8rem; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--vci-navy); background: #eaf8f7; }

.wow, .fadeInUp, .slideInDown { animation-duration: .65s !important; }
.modal-content { border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,.22); }
.back-to-top { border-radius: 12px; box-shadow: 0 8px 24px rgba(8, 43, 85, .25); }

/* Homepage announcements and new-student feed. */
.vci-updates { overflow: hidden; background: radial-gradient(circle at 7% 0%, rgba(7,155,154,.13), transparent 27%), linear-gradient(145deg, #f8fbff, #edf4fb); }
.vci-updates__intro { max-width: 720px; margin: 0 auto 2rem; text-align: center; }
.vci-updates__eyebrow { display: inline-flex; gap: .45rem; align-items: center; padding: .35rem .7rem; border-radius: 999px; color: #057e80; background: #dcf5f1; font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.vci-updates__intro h2 { margin: .65rem 0 .35rem; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; }
.vci-updates__intro p { margin: 0; color: #6c8094; }
.vci-updates .vci-update-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--vci-border); border-radius: 20px; background: rgba(255,255,255,.95); box-shadow: var(--vci-shadow); overflow: hidden; }
.vci-update-card__header { display: flex; align-items: center; gap: .85rem; padding: 1.15rem 1.3rem; color: #fff; background: linear-gradient(120deg, #062b56, #087e92); }
.vci-update-card__header { position: relative; overflow: hidden; }
.vci-update-card__header::after { position: absolute; top: 0; left: -42%; width: 26%; height: 100%; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); animation: vci-header-shine 5.8s ease-in-out infinite; }
.vci-update-card__header h3 { margin: .05rem 0 0; color: #fff; font-size: 1.25rem; font-weight: 800; }
.vci-update-card__kicker { display: block; color: #a9f5ed; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vci-update-card__icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #083c5d; background: linear-gradient(135deg, #ffe18d, #f6b53d); font-size: 1.15rem; }
.vci-update-card__icon--students { color: #fff; background: linear-gradient(135deg, #0ac4ba, #0b8abc); }
.vci-announcement-list, .vci-student-list { padding: 1rem 1.15rem; }
.vci-announcement-list { display: grid; gap: .7rem; max-height: 355px; overflow: auto; scrollbar-width: thin; scrollbar-color: #a9c9d9 transparent; }
.vci-announcement-item { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem; border: 1px solid #e4edf3; border-radius: 12px; background: #fbfdff; }
.vci-announcement-item { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.vci-announcement-item:not(.vci-announcement-item--welcome):hover { transform: translateX(5px); border-color: #8bded7; box-shadow: 0 8px 18px rgba(7,155,154,.1); }
.vci-announcement-item:nth-child(2) { border-color: #b9e8df; background: linear-gradient(100deg, #effcf9, #fffdf5); animation: vci-announcement-glow 2.8s ease-in-out infinite; }
.vci-announcement-item--welcome { border-color: #bdece5; background: #edfbf8; }
.vci-announcement-item__mark { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: #109e9d; font-size: .73rem; }
.vci-announcement-item p { flex: 1; margin: .12rem 0 0; color: #25455e; font-weight: 700; line-height: 1.45; }
.vci-announcement-item__image { flex: 0 0 74px; width: 74px; height: 54px; object-fit: cover; border: 1px solid #d7e7ec; border-radius: 9px; box-shadow: 0 4px 10px rgba(8,43,85,.1); }
@media (max-width: 575.98px) { .vci-announcement-item { flex-wrap: wrap; } .vci-announcement-item__image { margin-left: 42px; } }
.vci-new-badge { align-self: center; padding: .22rem .48rem; border-radius: 99px; color: #9a5a00; background: #fff0c9; font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; animation: vci-new-pulse 1.8s ease-in-out infinite; }
.vci-student-list { display: grid; gap: .7rem; max-height: 355px; overflow: auto; scrollbar-width: thin; scrollbar-color: #a9c9d9 transparent; scroll-behavior: auto; }
.vci-student-list:focus { outline: 3px solid rgba(7, 155, 154, .28); outline-offset: 3px; }
.vci-student-mini-card { display: flex; align-items: center; gap: .85rem; padding: .72rem; border: 1px solid #e4edf3; border-radius: 14px; background: #fbfdff; }
.vci-student-mini-card img { flex: 0 0 62px; width: 62px; height: 62px; border: 3px solid #d8f3f0; border-radius: 14px; object-fit: cover; box-shadow: 0 4px 12px rgba(8,43,85,.1); }
.vci-student-mini-card__label { display: inline-block; margin-bottom: .1rem; color: #078983; font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.vci-student-mini-card h4 { margin: 0; color: var(--vci-ink); font-size: 1rem; font-weight: 800; }
.vci-student-mini-card p { display: -webkit-box; margin: .12rem 0; overflow: hidden; color: #587188; font-size: .8rem; font-weight: 600; line-height: 1.28; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vci-student-mini-card time { color: #7b8ea1; font-size: .7rem; font-weight: 600; }
.vci-announcement-empty { padding: 1.2rem; color: #6a7f92; text-align: center; }
.vci-announcement-empty i { margin-right: .4rem; color: var(--vci-teal); }
@keyframes vci-header-shine { 0%, 58% { left: -42%; } 78%, 100% { left: 125%; } }
@keyframes vci-announcement-glow { 0%, 100% { box-shadow: 0 0 0 rgba(7,155,154,0); } 50% { box-shadow: 0 0 0 5px rgba(7,155,154,.08); } }
@keyframes vci-new-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244,183,60,0); } 50% { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(244,183,60,.13); } }

/* Modern document-verification hub on the home page. */
.vci-verify { position: relative; overflow: hidden; color: #d7e7f6; background: radial-gradient(circle at 15% 20%, rgba(12,198,188,.22), transparent 25%), radial-gradient(circle at 85% 75%, rgba(244,183,60,.2), transparent 25%), #082b55; }
.vci-verify::before { position: absolute; inset: 0; content: ""; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.vci-verify .container { z-index: 1; }
.vci-verify h2 { margin: .6rem 0 .3rem; color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; }
.vci-verify__intro { margin: 0 auto 2rem; color: #bed3e7; }
.vci-verify-card { height: 100%; padding: 1.5rem; border: 1px solid rgba(181,224,245,.23); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.vci-verify-card__icon { display: grid; width: 48px; height: 48px; margin-bottom: 1rem; place-items: center; border-radius: 14px; color: #063a61; background: linear-gradient(135deg, #ffe28c, #f5ae32); font-size: 1.25rem; }
.vci-verify-card__icon--marks { color: #fff; background: linear-gradient(135deg, #129f9d, #087dca); }
.vci-verify-card h3 { margin: 0; color: var(--vci-ink); font-size: 1.35rem; font-weight: 800; }
.vci-verify-card p { min-height: 42px; margin: .35rem 0 1rem; color: #658097; }
.vci-verify-card label { display: block; margin-bottom: .4rem; color: var(--vci-ink); font-weight: 800; }
.vci-verify-card .btn { margin-top: .85rem; }

/* Student testimonials. */
.vci-testimonials { overflow: hidden; background: linear-gradient(180deg, #f6faff, #eaf3fb); }
.vci-testimonials h2 { margin: .6rem 0 .35rem; color: var(--vci-ink); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; }
.vci-testimonials__intro { margin: 0 auto 2rem; color: #71869a; }
.vci-testimonial-carousel { padding: 1.2rem .45rem 3.8rem; }
.vci-testimonial-card { position: relative; min-height: 300px; padding: 1.35rem; border: 1px solid #dfeaf4; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(8,43,85,.09); }
.vci-testimonial-card::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; border-radius: 20px 20px 0 0; content: ""; background: linear-gradient(90deg, #0a9d9a, #067ac5, #f4b73c); }
.vci-testimonial-card__top { display: flex; align-items: center; gap: .85rem; padding-bottom: 1rem; border-bottom: 1px solid #e6edf4; }
.vci-testimonial-card__top img { width: 64px !important; height: 64px; border: 3px solid #d9f3f0; border-radius: 18px; object-fit: cover; }
.vci-testimonial-card__top h3 { margin: 0; color: var(--vci-ink); font-size: 1.12rem; font-weight: 800; }
.vci-testimonial-card__top span { color: #0b9692; font-size: .73rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vci-testimonial-card__quote { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #fff !important; background: linear-gradient(135deg, #f7bc42, #ed8d21); font-size: .82rem !important; }
.vci-testimonial-card blockquote { display: -webkit-box; min-height: 115px; margin: 1.05rem 0 .75rem; overflow: hidden; color: #4d667e; font-size: 1rem; font-style: normal; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.vci-testimonial-card__stars { color: #f3ad28; font-size: .8rem; letter-spacing: .12rem; }
.vci-testimonials .owl-dots { margin-top: 1.35rem; text-align: center; }
.vci-testimonials .owl-dot { width: 9px; height: 9px; margin: 0 4px; border-radius: 50%; background: #a8bfce !important; }
.vci-testimonials .owl-dot.active { width: 28px; border-radius: 8px; background: var(--vci-teal) !important; }

/* Course catalogue. */
.vci-course-card { display: flex; flex-direction: column; border: 1px solid #dfeaf2; border-radius: 20px; background: #fff; box-shadow: 0 9px 24px rgba(8,43,85,.08); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.vci-course-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(8,43,85,.15); }
.vci-course-card__media { position: relative; height: 215px; overflow: hidden; background: #e7f0f5; }
.vci-course-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vci-course-card:hover .vci-course-card__media img { transform: scale(1.06); }
.vci-course-card__duration { position: absolute; bottom: .9rem; left: .9rem; padding: .38rem .65rem; border: 1px solid rgba(255,255,255,.4); border-radius: 99px; color: #fff; background: rgba(6,43,85,.8); backdrop-filter: blur(6px); font-size: .76rem; font-weight: 800; }
.vci-course-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.3rem; }
.vci-course-card__eyebrow { color: #078f8e; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vci-course-card h2 { margin: .45rem 0 1rem; color: var(--vci-ink); font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.vci-course-card__pricing { display: flex; align-items: end; justify-content: space-between; margin-top: auto; padding: .85rem 0; border-block: 1px solid #e4edf3; }
.vci-course-card__pricing small { display: block; color: #74889a; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.vci-course-card__pricing strong { color: #078d89; font-size: 1.45rem; font-weight: 800; }
.vci-course-card__pricing span { color: #8597a7; font-size: .85rem; }
.vci-course-card__details { margin-top: .9rem; padding: .85rem; border-radius: 12px; background: #f0f9f8; color: #4e697e; font-size: .9rem; line-height: 1.5; }
.vci-course-card__details p { margin-bottom: .65rem; }
.vci-course-card__actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: .65rem; margin-top: 1rem; }

/* Photo gallery. */
.vci-gallery-page { background: radial-gradient(circle at 80% 10%, rgba(244,183,60,.13), transparent 22%), #f6faff; }
.vci-gallery-intro { max-width: 660px; margin: 0 auto 2.2rem; text-align: center; }
.vci-gallery-intro h2 { margin: .55rem 0 .35rem; color: var(--vci-ink); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; }
.vci-gallery-intro p { color: #72869a; margin: 0; }
.vci-gallery-card { position: relative; height: 100%; border: 0 !important; border-radius: 18px !important; background: #10233a !important; box-shadow: 0 10px 25px rgba(8,43,85,.12) !important; cursor: zoom-in; }
.vci-gallery-thumb { display: block; width: 100%; height: 245px; object-fit: cover; transition: transform .45s ease, filter .3s ease; }
.vci-gallery-card:hover .vci-gallery-thumb { transform: scale(1.08); filter: brightness(.67); }
.vci-gallery-card::after { position: absolute; right: 1rem; bottom: 1rem; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; content: "\f00e"; color: #073357; background: #fff; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease; }
.vci-gallery-card:hover::after { opacity: 1; transform: translateY(0); }

html[data-vci-theme="dark"] body { background: #0d1b2c; color: #bdcad7; }
html[data-vci-theme="dark"] h1, html[data-vci-theme="dark"] h2, html[data-vci-theme="dark"] h3, html[data-vci-theme="dark"] h4, html[data-vci-theme="dark"] h5, html[data-vci-theme="dark"] h6 { color: #e8f3ff; }
html[data-vci-theme="dark"] .course-item, html[data-vci-theme="dark"] .service-item, html[data-vci-theme="dark"] .team-item, html[data-vci-theme="dark"] .testimonial-item, html[data-vci-theme="dark"] .bg-light.rounded, html[data-vci-theme="dark"] .shadow-sm.rounded { border-color: #25415d; background: #14283d !important; }
html[data-vci-theme="dark"] .form-control, html[data-vci-theme="dark"] .form-select { color: #e8f3ff; border-color: #33516d; background: #12263a; }
html[data-vci-theme="dark"] .dropdown-menu { background: #14283d; border-color: #31506e; }
html[data-vci-theme="dark"] .dropdown-item { color: #dceaff; }
html[data-vci-theme="dark"] .dropdown-item:hover { background: #1d4052; color: #fff; }
html[data-vci-theme="dark"] .vci-updates { background: linear-gradient(145deg, #0c1e31, #112a42); }
html[data-vci-theme="dark"] .vci-update-card { border-color: #25415d; background: #14283d; }
html[data-vci-theme="dark"] .vci-announcement-item, html[data-vci-theme="dark"] .vci-student-mini-card { border-color: #294862; background: #10243a; }
html[data-vci-theme="dark"] .vci-announcement-item--welcome { background: #113b3e; }
html[data-vci-theme="dark"] .vci-announcement-item p, html[data-vci-theme="dark"] .vci-student-mini-card h4 { color: #e6f4ff; }
html[data-vci-theme="dark"] .vci-student-mini-card p { color: #b1c5d8; }
html[data-vci-theme="dark"] .vci-verify-card { border-color: #31506e; background: #14283d; }
html[data-vci-theme="dark"] .vci-verify-card h3, html[data-vci-theme="dark"] .vci-verify-card label { color: #e8f3ff; }
html[data-vci-theme="dark"] .vci-testimonials { background: linear-gradient(180deg, #0d1b2c, #132b43); }
html[data-vci-theme="dark"] .vci-testimonial-card { border-color: #294862; background: #14283d; }
html[data-vci-theme="dark"] .vci-testimonial-card__top { border-color: #294862; }
html[data-vci-theme="dark"] .vci-testimonial-card__top h3 { color: #e8f3ff; }
html[data-vci-theme="dark"] .vci-testimonial-card blockquote { color: #bdd0df; }
html[data-vci-theme="dark"] .vci-course-card { border-color: #294862; background: #14283d; }
html[data-vci-theme="dark"] .vci-course-card h2 { color: #e8f3ff; }
html[data-vci-theme="dark"] .vci-course-card__pricing { border-color: #294862; }
html[data-vci-theme="dark"] .vci-course-card__details { background: #123b40; color: #c1e2e1; }
html[data-vci-theme="dark"] .vci-gallery-page { background: #0d1b2c; }

@media (max-width: 991.98px) {
    .page-header { min-height: 225px; }
    .navbar-light .navbar-nav .nav-link::after { right: 0; left: 0; bottom: 0; }
}
@media (max-width: 575.98px) {
    .page-header { min-height: 190px; }
    .page-header h1, .page-header .display-3 { font-size: calc(1.45rem + 1.5vw); }
    .course-item, .service-item, .team-item, .testimonial-item { border-radius: 14px !important; }
    .vci-update-card { border-radius: 15px; }
    .vci-announcement-list { max-height: 330px; padding: .8rem; }
    .vci-student-list { max-height: 330px; padding: .8rem; }
    .vci-new-badge { display: none; }
    .vci-course-card__actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}