/* Chicago Trading Academy — Bootstrap 5 theme
   Palette/type pairing matches CTA_Upgrade_Proposal.html for brand consistency. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;900&display=swap');

:root {
    --navy:   #0D1B2A;
    --blue:   #1A56A0;
    --gold:   #C89B3C;
    --light:  #F4F6F9;
    --border: #DDE2EA;
    --text:   #2C3E50;
    --muted:  #6B7C93;
    --green:  #1E8449;
    --nav-height: 84px;
}

html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: #fff;
    padding-top: var(--nav-height);
}
/* Homepage hero pulls itself up into the reserved nav space so it still
   sits flush at the very top (behind the transparent nav), while every
   section after it keeps the normal reserved gap — so the nav never
   overlaps real content once it switches to fixed/scrolled state. */
body.is-home #myCarousel { margin-top: calc(-1 * var(--nav-height)); }

/* Bootstrap 3 named this .img-responsive; Bootstrap 5 dropped it for .img-fluid.
   Pages not yet rebuilt still use the old class name, so keep it working. */
.img-responsive { max-width: 100%; height: auto; }

/* Bootstrap 3's .well had no BS5 replacement; review_page.php still uses it. */
.well { background: var(--light); border: 1px solid var(--border); border-radius: 8px; padding: 24px; margin-bottom: 20px; }
.well.final-amount { font-size: 1.1rem; font-weight: 700; color: var(--navy); }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

h1, h2, h3, h4, .sec-head h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--navy);
}

a { color: var(--blue); }
a:hover { color: var(--gold); }

.btn-primary {
    --bs-btn-bg: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-bg: var(--navy);
    --bs-btn-hover-border-color: var(--navy);
    --bs-btn-active-bg: var(--navy);
}
.btn-gold {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
    font-weight: 600;
}
.btn-gold:hover { background: #b3872f; border-color: #b3872f; color: #fff; }
.btn-outline-light:hover { color: var(--navy); }

/* ── NAVBAR ──────────────────────────────────────────────── */
#site-nav {
    top: 0;
    min-height: var(--nav-height);
    transition: background .25s ease, box-shadow .25s ease, top .25s ease;
    z-index: 1030;
}
#site-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
#site-nav .navbar-brand img { height: 58px; transition: height .25s ease; }
#site-nav .navbar-brand .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
#site-nav .navbar-brand .brand-text strong {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
}
#site-nav .navbar-brand .brand-text small {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .02em;
    opacity: .75;
}
#site-nav.navbar-transparent:not(.nav-scrolled) .navbar-brand .brand-text { color: #fff; }
#site-nav.navbar-transparent:not(.nav-scrolled) .navbar-brand .brand-text small { color: rgba(255,255,255,.75); }
#site-nav.navbar-solid .navbar-brand .brand-text,
#site-nav.navbar-transparent.nav-scrolled .navbar-brand .brand-text { color: var(--navy); }
#site-nav .nav-link {
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 1.6rem 1rem !important;
    transition: color .2s ease;
}

/* Solid state: default for inner pages, and homepage once scrolled */
#site-nav.navbar-solid,
#site-nav.navbar-transparent.nav-scrolled {
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 2px 16px rgba(13,27,42,.1);
}
#site-nav.navbar-solid .nav-link,
#site-nav.navbar-transparent.nav-scrolled .nav-link { color: var(--navy); }
#site-nav.navbar-solid .nav-link:hover,
#site-nav.navbar-solid .nav-link.active,
#site-nav.navbar-transparent.nav-scrolled .nav-link:hover,
#site-nav.navbar-transparent.nav-scrolled .nav-link.active { color: var(--blue); }

/* Transparent state: homepage only, before scrolling — sits over the hero */
#site-nav.navbar-transparent {
    background: linear-gradient(to bottom, rgba(13,27,42,.55), rgba(13,27,42,0));
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: none;
    position: absolute;
    width: 100%;
}
#site-nav.navbar-transparent .nav-link { color: #fff; }
#site-nav.navbar-transparent .nav-link:hover,
#site-nav.navbar-transparent .nav-link.active { color: var(--gold); }
#site-nav.navbar-transparent .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}
#site-nav.navbar-transparent.nav-scrolled { position: fixed; }

/* Auth buttons need to flip contrast with the nav state */
.nav-auth .btn-outline-light { border-color: rgba(255,255,255,.6); color: #fff; }
.nav-auth .btn-outline-light:hover { background: #fff; color: var(--navy); }
#site-nav.navbar-solid .nav-auth .btn-outline-light,
#site-nav.navbar-transparent.nav-scrolled .nav-auth .btn-outline-light {
    border-color: var(--navy); color: var(--navy);
}
#site-nav.navbar-solid .nav-auth .btn-outline-light:hover,
#site-nav.navbar-transparent.nav-scrolled .nav-auth .btn-outline-light:hover {
    background: var(--navy); color: #fff;
}

@media (max-width: 991.98px) {
    #site-nav.navbar-transparent { position: fixed; background: rgba(13,27,42,.92); }
    #site-nav .navbar-brand img { height: 42px; }
    #site-nav .navbar-brand .brand-text strong { font-size: .95rem; }
    #site-nav .navbar-brand .brand-text small { font-size: .62rem; }
    .nav-auth { margin-top: 12px; }
}

@media (max-width: 420px) {
    #site-nav .navbar-brand .brand-text small { display: none; }
}

/* ── HERO / CAROUSEL ─────────────────────────────────────── */
#myCarousel .carousel-item, #myCarousel .item {
    min-height: 560px;
    position: relative;
}
#myCarousel .carousel-item::before, #myCarousel .item::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(13,27,42,.93) 0%, rgba(13,27,42,.78) 45%, rgba(26,86,160,.45) 100%);
}
#myCarousel .carousel-item > .container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 560px;
    padding-top: calc(var(--nav-height) + 40px);
    padding-bottom: 40px;
}
#myCarousel .caption-outer { position: relative; z-index: 1; max-width: 640px; }
#myCarousel .carousel-caption {
    text-align: left;
    left: 0; right: auto;
    bottom: auto; position: relative;
}
#myCarousel .carousel-caption h1,
#myCarousel .carousel-caption h2,
#myCarousel .carousel-caption p {
    color: #fff;
}
#myCarousel .carousel-caption .btn-primary { margin-top: 12px; }
.hero-eyebrow {
    display: inline-block;
    background: rgba(200,155,60,.15);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}
#myCarousel .carousel-caption h1,
#myCarousel .carousel-caption h2 {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.15;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
#myCarousel .carousel-caption p {
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: .92;
    max-width: 560px;
    text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
#myCarousel .carousel-caption strong { color: #fff; }

/* ── TICKER STRIP ────────────────────────────────────────── */
#ticker-strip {
    background: var(--gold);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}
.ticker-track {
    display: inline-flex;
    animation: ticker-scroll 32s linear infinite;
}
.ticker-track span {
    color: var(--navy);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .1em;
    padding: 9px 28px;
    display: inline-block;
    border-right: 1px solid rgba(13,27,42,.25);
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
}

/* ── STATS STRIP ─────────────────────────────────────────── */
#stats-strip {
    background: var(--navy);
    padding: 36px 0;
    position: relative;
    z-index: 2;
}
#stats-strip .stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
}
#stats-strip .stat-label {
    color: rgba(255,255,255,.75);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 6px;
}
@media (max-width: 575.98px) {
    #stats-strip .stat-num { font-size: 1.8rem; }
}

/* ── INNER PAGE HEAD (shared by ~11 page views) ─────────── */
.page-head {
    background: linear-gradient(110deg, var(--navy) 0%, var(--blue) 100%);
    padding: 64px 0 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-head::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(200,155,60,.18), transparent 55%);
}
.page-head .sec-head { position: relative; z-index: 1; margin-bottom: 14px; }
.page-head .sec-head h1,
.page-head .sec-head h1 span { color: #fff; font-size: 2.4rem; }
.page-head .sec-head::after { background: var(--gold); }
.page-head .sec-head img { display: none; }
.page-head .breadcrumb {
    position: relative; z-index: 1;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: .85rem;
}
.page-head .breadcrumb li { color: rgba(255,255,255,.6); }
.page-head .breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 6px; color: rgba(255,255,255,.35); }
.page-head .breadcrumb li a { color: rgba(255,255,255,.85); text-decoration: none; }
.page-head .breadcrumb li a:hover { color: var(--gold); }
.page-head .breadcrumb li.active { color: var(--gold); }

.page-container { padding: 64px 0; }
.content-prose {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text);
}
.content-prose p { margin-bottom: 20px; }
.content-prose h1, .content-prose h2, .content-prose h3 { margin: 32px 0 16px; }
.content-prose ul, .content-prose ol { margin-bottom: 20px; padding-left: 22px; }
.content-prose li { margin-bottom: 8px; }
.content-prose strong { color: var(--navy); }
.content-prose a { color: var(--blue); font-weight: 600; }
.content-prose > p:first-of-type {
    font-size: 1.2rem;
    color: var(--navy);
    font-weight: 500;
    border-left: 3px solid var(--gold);
    padding-left: 20px;
}

/* ── COURSE DETAILS PAGE ─────────────────────────────────── */
.courses-img { position: relative; border-radius: 12px; overflow: hidden; }
.courses-img img { width: 100%; border-radius: 12px; }
.courses-img .bottom-dt {
    position: absolute; left: 16px; bottom: 16px; z-index: 1;
    display: flex; gap: 10px; flex-wrap: wrap;
}
.courses-img .bottom-dt .date, .courses-img .bottom-dt .time {
    background: rgba(13,27,42,.85);
    color: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 600;
}
.courses-img .bottom-dt i { color: var(--gold); margin-right: 6px; }
.courses-right-info { background: var(--light); border-radius: 12px; padding: 32px; height: 100%; }
.course-head h1 { font-size: 1.6rem; margin-bottom: 20px; }
.courses-right-info > ul { list-style: none; padding: 0; margin: 0 0 20px; }
.courses-right-info > ul li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: .95rem;
}
.courses-right-info > ul li:empty { display: none; }
.courses-right-info > ul li label { color: var(--muted); font-weight: 600; margin: 0; }
.courses-right-info .fees { color: var(--blue); font-weight: 700; font-size: 1.15rem; }
.courses-right-info select.form-control { width: auto; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); }
.btm-btn { margin-bottom: 18px; }
.btm-btn .btn { width: 100%; padding: 13px; font-size: 1rem; }

.course-des { margin-top: 48px; }
.course-des .nav-tabs { border-bottom: 2px solid var(--border); gap: 6px; }
.course-des .nav-link {
    border: none;
    color: var(--muted);
    font-weight: 600;
    padding: 10px 4px;
    margin-right: 26px;
    border-bottom: 2px solid transparent;
}
.course-des .nav-link.active { color: var(--navy); border-bottom-color: var(--gold); background: none; }
.course-des .tab-content { padding-top: 24px; line-height: 1.8; color: var(--text); }

/* ── CONTACT PAGE INFO BLOCKS ────────────────────────────── */
.address-block { margin-bottom: 48px; }
.address-block .row { row-gap: 24px; }
.block-1 {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 30px 22px;
    text-align: center;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.block-1:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(13,27,42,.1); }
.block-1 i {
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 60px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--light);
    color: var(--blue);
    font-size: 1.3rem;
}
.block-1 h3 { font-size: 1.05rem; margin-bottom: 8px; }
.block-1 p { color: var(--muted); font-size: .9rem; margin-bottom: 0; }
.contact-form { margin-top: 12px; }
.contact-form .contact-submit { margin-top: 8px; }

/* ── CHECKBOXES (sign up, etc.) ──────────────────────────── */
.checkbox { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.checkbox input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); cursor: pointer; }
.checkbox label { margin: 0; font-size: .9rem; color: var(--text); cursor: pointer; }

/* ── REVIEW / ENROLLMENT PAGE ────────────────────────────── */
.well h3 { font-size: 1.15rem; margin-bottom: 4px; }
.well .row { margin-bottom: 4px; }
.well label { color: var(--muted); font-weight: 600; margin-bottom: 4px; display: block; }
.well p { margin-bottom: 4px; }
.btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.btns .btn { padding: 12px 28px; }

/* ── THANK YOU / SUCCESS STATE ───────────────────────────── */
.thank-you-panel { max-width: 480px; margin: 0 auto; padding: 40px 0; }
.thank-you-icon { font-size: 4rem; color: var(--green); margin-bottom: 18px; display: block; }
.thank-you-panel h2 { font-size: 2rem; margin-bottom: 12px; }
.thank-you-panel p { color: var(--muted); margin-bottom: 28px; font-size: 1.05rem; }
.thank-you-panel .btn { padding: 12px 32px; }

/* ── VIDEO GALLERY ───────────────────────────────────────── */
.video-outer { margin-bottom: 28px; }
.video-outer .ratio { border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(13,27,42,.08); }
.video-outer h5 { margin-top: 12px; font-size: 1rem; }
.video-outer h5 a { color: var(--navy); text-decoration: none; }
.video-outer h5 a:hover { color: var(--blue); }

/* ── VIDEO DETAILS / COMMENTS ────────────────────────────── */
.comments { margin-top: 24px; }
.added-comments > ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; align-items: flex-start; }
.added-comments .comment-author img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.comment-author-name { font-size: .95rem; margin-bottom: 4px; color: var(--navy); }
.comment-text { color: var(--text); margin: 0; }
.add-comments { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.add-comments h4 { font-size: 1.1rem; }

/* ── SCHEDULE / CALENDAR ─────────────────────────────────── */
.instructor-list { margin-bottom: 12px; }
#interactive_calendar { background: #fff; border-radius: 12px; padding: 8px; box-shadow: 0 4px 16px rgba(13,27,42,.06); }
.fc-button { background: var(--light) !important; border: 1px solid var(--border) !important; color: var(--navy) !important; text-shadow: none !important; box-shadow: none !important; }
.fc-state-active, .fc-button:hover { background: var(--blue) !important; color: #fff !important; }
.fc-toolbar h2 { font-size: 1.2rem !important; color: var(--navy); }
.fc-event { background: var(--blue) !important; border-color: var(--blue) !important; }
.fc-today { background: rgba(200,155,60,.1) !important; }

/* ── ACCORDION (FAQ) ─────────────────────────────────────── */
.cta-accordion .accordion-item { border: 1px solid var(--border); border-radius: 8px !important; margin-bottom: 14px; overflow: hidden; }
.cta-accordion .accordion-button {
    font-weight: 600;
    color: var(--navy);
    background: #fff;
}
.cta-accordion .accordion-button:not(.collapsed) {
    color: var(--blue);
    background: var(--light);
    box-shadow: none;
}
.cta-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(26,86,160,.15); }

/* ── SECTION HEADS ───────────────────────────────────────── */
.sec-head { text-align: center; margin-bottom: 48px; }
.sec-head h1 { font-size: 2.1rem; }
.sec-head h1 span { color: var(--gold); }
.sec-head img { display: none; } /* old gray divider graphic, replaced by rule below */
.sec-head::after {
    content: '';
    display: block;
    width: 56px; height: 3px;
    background: var(--gold);
    margin: 14px auto 0;
}

/* ── CONTACT / INFO BOXES ────────────────────────────────── */
#contact-sec { background: var(--light); padding: 60px 0; }
#contact-sec .con-outer {
    background: #fff;
    border-radius: 10px;
    padding: 28px 20px;
    text-align: center;
    height: 100%;
    box-shadow: 0 4px 16px rgba(13,27,42,.06);
    border-top: 3px solid var(--blue);
}
#contact-sec .icon {
    width: 78px; height: 78px;
    border-radius: 50%;
    background: var(--light);
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    transition: background .25s ease, border-color .25s ease;
}
#contact-sec .con-outer:hover .icon { background: var(--blue); border-color: var(--blue); }
#contact-sec .icon img { height: 34px; margin-bottom: 0; transition: filter .25s ease; }
#contact-sec .con-outer:hover .icon img { filter: brightness(0) invert(1); }
#contact-sec .icon { position: relative; }
#contact-sec .icon::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    opacity: 0;
    animation: icon-pulse 2.6s ease-out infinite;
}
@keyframes icon-pulse {
    0% { transform: scale(1); opacity: .55; }
    80% { transform: scale(1.35); opacity: 0; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #contact-sec .icon::after { animation: none; }
}
#contact-sec h3 { font-size: 1.1rem; }
#contact-sec .con-outer { padding: 36px 20px; }

/* ── ABOUT ───────────────────────────────────────────────── */
#about-sec { padding: 70px 0; }
#about-sec .abt-img-outer { display: block; position: relative; border-radius: 8px; overflow: hidden; margin-bottom: 16px; cursor: pointer; }
#about-sec .abt-img-outer img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }
#about-sec .img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(13,27,42,.85), transparent 60%);
    display: flex; align-items: flex-end; padding: 14px;
}
#about-sec .img-overlay h4 { color: #fff; font-size: .95rem; margin: 0; text-decoration: none; }
#about-sec .btn-danger {
    --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold); color: var(--navy);
    --bs-btn-hover-bg: var(--navy); --bs-btn-hover-border-color: var(--navy); --bs-btn-hover-color: #fff;
}

/* ── FEATURED / UPCOMING COURSES ────────────────────────── */
#featured-courses, #upCourses-form-sec { padding: 60px 0; }
#upCourses-form-sec { background: var(--light); }
.courses-outer, .upcoming-list .list-outer {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(13,27,42,.07);
    margin-bottom: 4px;
}
.courses-outer .img-outer, .upcoming-list .img-outer { aspect-ratio: 4/3; overflow: hidden; border-radius: 8px; }
.courses-outer .img-outer img, .upcoming-list .img-outer img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 576px) {
    .courses-outer .img-outer, .upcoming-list .img-outer { aspect-ratio: auto; height: 100%; }
}
.courses-info, .upcoming-list h3 { padding: 18px 18px 18px 0; }
.upcoming-list .list-outer .row > div:first-child { padding: 0; }
.courses-info h3 a, .upcoming-list h3 a { color: var(--navy); text-decoration: none; font-size: 1.15rem; }
.courses-date, .courses-time {
    display: inline-block;
    margin: 0 8px 8px 0;
    color: var(--blue);
    background: var(--light);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: .78rem;
    font-weight: 600;
}
.courses-date i, .courses-time i { margin-right: 4px; }
.upcoming-list h4 { font-size: .9rem; color: var(--blue); }

#upCourses-form-sec .form {
    background: #fff;
    border-radius: 12px;
    padding: 36px 32px;
    box-shadow: 0 8px 28px rgba(13,27,42,.08);
}
#upCourses-form-sec .sec-head { text-align: left; margin-bottom: 24px; }
#upCourses-form-sec .sec-head::after { margin: 14px 0 0; }
#upCourses-form-sec .form-control {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: .95rem;
    margin-bottom: 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#upCourses-form-sec .form-control:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(26,86,160,.12);
    outline: none;
}
#upCourses-form-sec .g-recaptcha { margin-bottom: 18px; }
.contact-info-panel {
    background: linear-gradient(135deg, var(--navy), var(--blue));
    border-radius: 12px;
    padding: 36px 32px;
    color: #fff;
    width: 100%;
}
.contact-info-panel h3 { color: #fff; font-size: 1.4rem; margin-bottom: 10px; }
.contact-info-panel p { color: rgba(255,255,255,.75); font-size: .9rem; margin-bottom: 22px; }
.contact-info-panel ul { list-style: none; padding: 0; margin: 0; }
.contact-info-panel li { margin-bottom: 16px; font-size: .95rem; display: flex; align-items: flex-start; gap: 10px; }
.contact-info-panel li i { color: var(--gold); width: 18px; margin-top: 3px; }
.contact-info-panel a { color: #fff; }
.contact-info-panel a:hover { color: var(--gold); }

/* ── GENERIC SIDE FORMS (testimonials.php, contact_us.php, etc.) ─ */
.page-container .form-control {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .92rem;
    margin-bottom: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.page-container .form-control:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(26,86,160,.12);
    outline: none;
}
.page-container textarea.form-control { min-height: 110px; }
.page-container .btn-danger {
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--blue);
    --bs-btn-hover-border-color: var(--blue);
    padding: 10px 28px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .85rem;
}
.testimonials .form { background: #fff; border-radius: 12px; padding: 28px; box-shadow: 0 8px 28px rgba(13,27,42,.08); }

#upCourses-form-sec .btn-danger {
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--blue);
    --bs-btn-hover-border-color: var(--blue);
    padding: 12px 32px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .85rem;
}

/* ── TESTIMONIALS ────────────────────────────────────────── */
/* Default: standalone testimonials.php page, plain white background */
.testi-outer {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 28px 26px 24px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(13,27,42,.06);
    margin-bottom: 20px;
    overflow: hidden;
}
.testi-outer .row { position: relative; z-index: 1; }
.testi-quote {
    position: absolute;
    top: 14px; right: 18px;
    font-size: 2.4rem;
    color: var(--light);
    z-index: 0;
}
.testi-outer p { color: var(--text); }
.testi-message { font-style: italic; line-height: 1.6; }
.testi-outer h4 { color: var(--navy); margin-top: 8px; margin-bottom: 0; font-size: 1rem; }
.testi-outer .img-outer img { border-radius: 50%; width: 64px; height: 64px; object-fit: cover; }
.avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--navy));
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Override: homepage carousel version sits on a dark navy section */
#testimonial-sec { padding: 60px 0; background: var(--navy); }
#testimonial-sec .sec-head h1, #testimonial-sec .sec-head h1 span { color: #fff; }
#testimonial-sec .testi-outer {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: none;
}
#testimonial-sec .testi-quote { color: rgba(255,255,255,.08); }
#testimonial-sec .testi-outer p,
#testimonial-sec .testi-outer h4 { color: #fff; }
#testimonial-sec .avatar-initials { background: linear-gradient(135deg, var(--gold), #b3872f); color: var(--navy); }
#testimonial-sec .see-all { margin-top: 24px; }

/* Owl carousel dot navigation — brand styling instead of plain default */
.owl-carousel .owl-dots { text-align: center; margin-top: 18px; }
.owl-carousel .owl-dot span {
    width: 9px; height: 9px;
    margin: 4px;
    background: var(--border);
    display: inline-block;
    border-radius: 50%;
    transition: background .2s ease, transform .2s ease;
}
.owl-carousel .owl-dot.active span { background: var(--blue); transform: scale(1.25); }
#testimonial-sec .owl-dot span { background: rgba(255,255,255,.25); }
#testimonial-sec .owl-dot.active span { background: var(--gold); }

/* Owl carousel nav arrows — used by testimonials instead of a long dot list */
#testimonial-sec .owl-carousel { position: relative; }
#testimonial-sec .owl-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
}
#testimonial-sec .owl-nav button.owl-prev,
#testimonial-sec .owl-nav button.owl-next {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, border-color .2s ease;
}
#testimonial-sec .owl-nav button.owl-prev:hover,
#testimonial-sec .owl-nav button.owl-next:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}
#testimonial-sec .owl-nav .disabled { opacity: .35; pointer-events: none; }

/* ── GET STARTED CTA ─────────────────────────────────────── */
#get-start-sec {
    background: linear-gradient(100deg, var(--blue), var(--navy));
    padding: 56px 0;
    text-align: center;
}
#get-start-sec p {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 20px;
    font-family: 'Playfair Display', serif;
}
#get-start-sec .btn { padding: 12px 30px; font-weight: 600; }
#get-start-sec .btn-danger { --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold); color: var(--navy); }
#get-start-sec .row { align-items: center; row-gap: 20px; }
#get-start-sec .row > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* ── GLOBAL BUTTON POLISH ────────────────────────────────── */
.btn {
    border-radius: 6px;
    letter-spacing: .02em;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(13,27,42,.18); }
.btn:active { transform: translateY(0); }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer { background: var(--navy); color: rgba(255,255,255,.7); padding: 60px 0 20px; }
.footer h2 { color: #fff; font-size: 1rem; letter-spacing: .05em; }
.footer-brand img { height: 80px; margin-bottom: 14px; }
.footer-brand h3 { color: #fff; font-size: 1.2rem; margin-bottom: 4px; }
.footer-brand-sub { display: block; color: var(--gold); font-size: .78rem; font-weight: 600; letter-spacing: .03em; margin-bottom: 12px; }
.footer-brand p { font-size: .9rem; line-height: 1.7; max-width: 280px; }
.footer ul { list-style: none; padding: 0; }
.footer a { color: rgba(255,255,255,.65); text-decoration: none; }
.footer a:hover { color: var(--gold); }
.footer .q-links ul li { margin-bottom: 10px; }
.footer .q-links ul li i { color: var(--gold); font-size: .7rem; margin-right: 6px; }
.footer-contact { margin-bottom: 18px; }
.footer-contact li { margin-bottom: 10px; font-size: .9rem; }
.footer-contact i { width: 18px; color: var(--gold); margin-right: 4px; }
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.newsletter-sub { font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.footer .newsletter .search { display: flex; gap: 8px; }
.footer .newsletter .search .form-control { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; }
.footer .newsletter .search .form-control::placeholder { color: rgba(255,255,255,.5); }
.footer .newsletter .search .btn { white-space: nowrap; }
.footer .bottom-footer { color: rgba(255,255,255,.5); font-size: .85rem; padding-top: 16px; }
.footer hr { border-color: rgba(255,255,255,.15); }

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* ── CARD HOVER LIFT ─────────────────────────────────────── */
#contact-sec .con-outer,
.courses-outer,
.upcoming-list .list-outer,
#about-sec .abt-img-outer {
    transition: transform .25s ease, box-shadow .25s ease;
}
#contact-sec .con-outer:hover,
.courses-outer:hover,
.upcoming-list .list-outer:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(13,27,42,.14), 0 0 0 1px rgba(26,86,160,.12);
}
.testi-outer { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.testi-outer:hover {
    transform: translateY(-4px);
    border-color: rgba(200,155,60,.5);
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
#about-sec .abt-img-outer:hover { transform: scale(1.02); }
#about-sec .abt-img-outer:hover img { transform: scale(1.08); }
#about-sec .abt-img-outer img { transition: transform .4s ease; }

/* ── BACK TO TOP ─────────────────────────────────────────── */
#back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--blue);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 6px 18px rgba(13,27,42,.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, background .25s ease;
    z-index: 1040;
}
#back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover { background: var(--navy); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 767px) {
    #myCarousel .carousel-item, #myCarousel .item { min-height: 420px; }
    #myCarousel .carousel-item > .container { padding-top: calc(var(--nav-height) + 20px); padding-bottom: 24px; }
    #myCarousel .carousel-caption h1,
    #myCarousel .carousel-caption h2 { font-size: 2.1rem; }
    #myCarousel .carousel-caption p { font-size: .95rem; }
    .page-head { padding: 48px 0 28px; }
    .page-head .sec-head h1, .page-head .sec-head h1 span { font-size: 1.8rem; }
    .sec-head h1 { font-size: 1.6rem; }
    #get-start-sec p { font-size: 1.3rem; }
    .ticker-track span { font-size: .68rem; padding: 7px 18px; }
}

@media (max-width: 575.98px) {
    #myCarousel .carousel-item, #myCarousel .item { min-height: 460px; }
    #myCarousel .carousel-caption h1,
    #myCarousel .carousel-caption h2 { font-size: 1.7rem; }
    .hero-eyebrow { font-size: .68rem; padding: 4px 12px; }
    #stats-strip .stat-num { font-size: 1.6rem; }
    #stats-strip .stat-label { font-size: .7rem; }
    #get-start-sec .row > div:last-child { flex-direction: column; width: 100%; }
    #get-start-sec .btn { width: 100%; }
    .footer-brand img { height: 64px; }
}