/* =========================================================
   Tokens (teal + navy + red + gold)
   ========================================================= */
    :root {
        /* Palette: teal (brand) + navy (dark surfaces) + red (calls to action) + gold (accent) */
        --brand: #0f766e;
        /* rgb(15 118 110) */
        --brand-d: #0b5a54;
        --brand-l: #e4f3f1;
        --accent: #ba181b;
        /* red: buttons, badges (white text) */
        --accent-d: #8f1214;
        /* darker red: text/icons on white, hover */
        --accent-l: #fbe9e9;
        --gold: #e0a526;
        /* gold: navbar underline, divider lines */
        --gold-d: #b8860b;
        --cream: #fff8ea;
        /* warm tint for section backgrounds */
        --deep: #13315c;
        /* navy */
        --deep-d: #0b1f3d;
        --hi: #6fd6cb;
        /* light teal for highlights on dark backgrounds */
        --ink: #101c2e;
        --sky: #e6eff5;
        --page: #f6f9fb;
        --card: #ffffff;
        --line: #dce5ec;
        --muted: #5a6b7b;
        --purple: #6d23b6;
        --shadow: 0 10px 28px -18px rgba(19, 49, 92, .5);
        --font: 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
        --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    }

    html {
        scroll-behavior: smooth
    }

    body {
        font-family: var(--font);
        color: var(--ink);
        background: var(--page);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased
    }

    body.has-solid-header {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    body.dc-lock {
        overflow: hidden
    }

    .dc-wrap {
        width: min(1280px, 100% - 32px);
        margin-inline: auto
    }

    .dc-hdr ul {
        margin: 0;
        padding: 0;
        list-style: none
    }

    .dc-hdr a {
        text-decoration: none
    }

    .dc-hdr :focus-visible {
        outline: 3px solid var(--hi);
        outline-offset: 2px
    }

    @media (prefers-reduced-motion:reduce) {
        html {
            scroll-behavior: auto
        }

        .dc-hdr * {
            transition-duration: .01ms !important
        }
    }

    /* =========================================================
   Row 1: navy top strip
   ========================================================= */
    .dc-top {
        background: var(--deep);
        color: #e4f3f1;
        font-size: .8125rem
    }

    .dc-top-in {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-height: 38px
    }

    .dc-mail {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #e4f3f1
    }

    .dc-mail:hover {
        color: #fff
    }

    .dc-top-r {
        display: flex;
        align-items: center;
        gap: 14px
    }

    .dc-social {
        display: flex;
        gap: 2px
    }

    .dc-social a {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 6px;
        color: #e4f3f1;
        transition: background .2s, color .2s
    }

    .dc-social a:hover {
        background: rgba(255, 255, 255, .2);
        color: #fff
    }

    .dc-fs {
        display: flex;
        border-radius: 6px;
        overflow: hidden;
        background: rgba(0, 0, 0, .18)
    }

    .dc-fs button {
        border: 0;
        background: none;
        color: #fff;
        padding: 2px 11px;
        font: inherit;
        font-weight: 600;
        cursor: pointer
    }

    .dc-fs button+button {
        border-left: 1px solid rgba(255, 255, 255, .22)
    }

    .dc-fs button:hover {
        background: rgba(255, 255, 255, .18)
    }

    /* =========================================================
   Row 2: logo + wordmark + quick links + student login + search
   ========================================================= */
    .dc-brandrow {
        background: linear-gradient(100deg, #ffffff 0%, #fff8ea 62%, #fdeeee 100%)
    }

    .dc-brandrow-in {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        min-height: 104px;
        padding: 10px 0
    }

    /* --- Brand lockup: logo + two-line wordmark + tagline --- */
    .dc-brand {
        flex: none;
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
    }

    .dc-brand img {
        height: 72px;
        width: auto;
        max-width: 120px;
        object-fit: contain;
        flex: none;
    }

    .dc-brand-txt {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        padding-left: 16px;
        border-left: 1px solid var(--line);
    }

    .dc-brand-txt b {
        font-family: var(--serif);
        font-weight: 700;
        font-size: clamp(1.05rem, 1.45vw, 1.35rem);
        line-height: 1.15;
        letter-spacing: -.015em;
        color: var(--deep);
        display: block;
        transition: color .2s;
    }

    /* Assamese name: separated from the English name by a gradient rule */
    .dc-brand-txt em {
        display: block;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 2px solid transparent;
        border-image: linear-gradient(90deg, var(--accent), var(--gold) 60%, transparent) 1;
        font-style: normal;
        font-weight: 600;
        font-size: clamp(.82rem, 1.6vw, 1.15rem);
        line-height: 1.3;
        color: var(--accent);
        letter-spacing: 0;
        transition: color .2s;
    }

    .dc-brand-txt small {
        display: block;
        margin-top: 3px;
        font-size: .72rem;
        font-weight: 500;
        letter-spacing: .015em;
        color: var(--purple);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 56ch;
        transition: color .2s;
    }

    .dc-right {
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0
    }

    .dc-quick {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 2px
    }

    .dc-quick a {
        position: relative;
        padding: 3px 11px;
        font-size: .8rem;
        font-weight: 600;
        color: var(--ink);
        transition: color .2s
    }

    .dc-quick a+a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        height: 12px;
        margin-top: -6px;
        border-left: 1px solid var(--line)
    }

    .dc-quick a:hover {
        color: var(--brand);
        text-underline-offset: 5px;
        text-decoration-thickness: 2px
    }

    .dc-login {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: 8px;
        padding: 9px 16px;
        border-radius: 6px;
        background: var(--accent);
        color: #fff;
        font-weight: 700;
        font-size: .8rem;
        letter-spacing: .02em;
        white-space: nowrap;
        transition: background .2s
    }

    .dc-login:hover {
        background: var(--accent-d)
    }

    .dc-sbtn {
        width: 40px;
        height: 40px;
        border: 0;
        background: none;
        border-radius: 50%;
        color: var(--ink);
        font-size: 1rem;
        cursor: pointer;
        transition: background .2s
    }

    .dc-sbtn:hover,
    .dc-sbtn[aria-expanded="true"] {
        background: var(--brand-l);
        color: var(--brand)
    }

    .dc-searchbar {
        background: var(--brand-l);
        border-top: 1px solid var(--line)
    }

    .dc-searchbar[hidden] {
        display: none
    }

    .dc-searchbar form {
        display: flex;
        gap: 10px;
        padding: 12px 0
    }

    .dc-searchbar input {
        flex: 1;
        min-width: 0;
        padding: 10px 16px;
        border: 2px solid transparent;
        border-radius: 8px;
        font: inherit;
        background: #fff;
        color: var(--ink)
    }

    .dc-searchbar input:focus {
        outline: none;
        border-color: var(--brand)
    }

    .dc-searchbar button {
        padding: 0 22px;
        border: 0;
        border-radius: 8px;
        background: var(--brand);
        color: #fff;
        font: inherit;
        font-weight: 600;
        cursor: pointer
    }

    .dc-searchbar button:hover {
        background: var(--brand-d)
    }

    .dc-burger {
        display: none;
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 10px;
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px
    }

    .dc-burger span {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--brand);
        border-radius: 2px
    }

    /* =========================================================
   Row 3: sticky navigation
   ========================================================= */
    .dc-navrow {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 10px 20px -12px rgba(19, 49, 92, .32)
    }

    .dc-primary {
        display: flex;
        justify-content: center
    }

    .dc-drawer-head,
    .dc-drawer-extra {
        display: none
    }

    .dc-list {
        display: flex;
        align-items: stretch;
        justify-content: center;
        flex-wrap: wrap
    }

    .dc-list>li {
        position: relative
    }

    .dc-list>li>a {
        display: flex;
        align-items: center;
        gap: 7px;
        height: 100%;
        padding: 14px 16px;
        font-size: .95rem;
        font-weight: 600;
        color: var(--ink);
        border-bottom: 3px solid transparent;
        transition: background .2s, color .2s, border-color .2s;
    }

    .dc-list>li:hover>a,
    .dc-list>li.open>a {
        background: var(--brand-l);
        color: var(--brand-d)
    }

    .dc-list>li>a.active {
        color: var(--brand);
        border-bottom-color: var(--brand)
    }

    .dc-caret {
        font-size: .6rem;
        opacity: .7;
        transition: transform .25s
    }

    .dc-m-only {
        display: none
    }

    .dc-dd {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px;
        background: #fff;
        border: 1px solid var(--line);
        border-top: 3px solid var(--gold);
        border-radius: 0 0 12px 12px;
        padding: 8px;
        box-shadow: 0 24px 40px -20px rgba(19, 49, 92, .45);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity .2s, transform .2s, visibility .2s;
        z-index: 50;
    }

    .dc-dd li {
        position: relative
    }

    .dc-dd a,
    .dc-dd button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding: 9px 12px;
        border: 0;
        background: none;
        cursor: pointer;
        text-align: left;
        font: inherit;
        font-size: .9rem;
        font-weight: 500;
        color: var(--ink);
        border-radius: 8px;
        transition: background .15s, color .15s, padding .2s;
    }

    .dc-dd a:hover,
    .dc-dd button:hover,
    .dc-dd li:hover>a {
        background: var(--brand-l);
        color: var(--brand-d);
        padding-left: 16px
    }

    .dc-post {
        margin: 0
    }

    .dc-dd .dc-dd {
        top: -11px;
        left: calc(100% + 2px);
        border-radius: 12px;
        border-top-width: 1px
    }

    .dc-dd .dc-dd::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -8px;
        width: 8px
    }

    .dc-dd .dc-caret {
        transform: rotate(-90deg);
        opacity: .6
    }

    .dc-list>li:nth-last-child(-n+3)>.dc-dd {
        left: auto;
        right: 0
    }

    .dc-list>li:nth-last-child(-n+3)>.dc-dd .dc-dd {
        left: auto;
        right: calc(100% + 2px)
    }

    .dc-list>li:nth-last-child(-n+3)>.dc-dd .dc-dd::before {
        left: auto;
        right: -8px
    }

    @media (min-width:1101px) {

        .dc-list li:hover>.dc-dd,
        .dc-list li:focus-within>.dc-dd,
        .dc-list li.open>.dc-dd {
            opacity: 1;
            visibility: visible;
            transform: none
        }

        .dc-list>li:hover>a .dc-caret,
        .dc-list>li.open>a .dc-caret {
            transform: rotate(180deg)
        }
    }

    /* ---------- Desktop: navy navbar with gold underline ---------- */
    @media (min-width:1101px) {
        .dc-navrow {
            background: linear-gradient(90deg, var(--deep-d) 0%, var(--deep) 50%, var(--deep-d) 100%);
            border-top: 0;
            border-bottom: 3px solid var(--gold);
        }

        .dc-navrow .dc-list>li>a {
            color: #fff
        }

        .dc-navrow .dc-list>li:hover>a,
        .dc-navrow .dc-list>li.open>a {
            background: rgba(255, 255, 255, .12);
            color: #fff
        }

        .dc-navrow .dc-list>li>a.active {
            background: rgba(255, 255, 255, .1);
            color: #fff;
            border-bottom-color: var(--gold)
        }
    }

    .dc-scrim {
        position: fixed;
        inset: 0;
        background: rgba(8, 20, 40, .6);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s;
        z-index: 1090
    }

    .dc-scrim.show {
        opacity: 1;
        visibility: visible
    }

    /* =========================================================
   Tablet + mobile: off-canvas drawer
   ========================================================= */
    @media (max-width:1100px) {
        .dc-burger {
            display: flex
        }

        .dc-quick {
            display: none
        }

        .dc-login {
            margin-left: 0
        }

        .dc-brandrow-in {
            min-height: 86px
        }

        .dc-brand img {
            height: 54px;
            max-width: 96px
        }

        .dc-brand {
            gap: 10px
        }

        .dc-brand-txt {
            padding-left: 10px
        }

        .dc-brand-txt b {
            font-size: 1rem
        }

        .dc-brand-txt em {
            font-size: .82rem
        }

        .dc-brand-txt small {
            font-size: .66rem;
            max-width: 30ch
        }

        .dc-navrow {
            position: static;
            background: none;
            box-shadow: none;
            border: 0
        }

        .dc-primary {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 1100;
            width: min(88vw, 370px);
            background: #fff;
            flex-direction: column;
            justify-content: flex-start;
            transform: translateX(-102%);
            transition: transform .3s ease;
            overflow-y: auto;
            box-shadow: 20px 0 40px -20px rgba(0, 0, 0, .5);
        }

        .dc-primary.open {
            transform: none
        }

        .dc-drawer-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            background: var(--deep);
            border-bottom: 3px solid var(--gold);
            color: #fff;
            font-weight: 700;
            position: sticky;
            top: 0;
            z-index: 2
        }

        .dc-drawer-head button {
            width: 36px;
            height: 36px;
            border: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, .18);
            color: #fff;
            font-size: 1.1rem;
            cursor: pointer
        }

        .dc-list {
            flex-direction: column;
            align-items: stretch;
            flex-wrap: nowrap;
            padding: 8px 10px
        }

        .dc-list>li {
            border-bottom: 1px solid var(--line)
        }

        .dc-list>li>a {
            justify-content: space-between;
            padding: 14px 10px;
            font-size: 1rem;
            border-bottom: 0
        }

        .dc-list>li:hover>a,
        .dc-list>li.open>a,
        .dc-list>li>a.active {
            background: none
        }

        .dc-list>li>a.active,
        .dc-list li.open>a {
            color: var(--brand)
        }

        .dc-list li.open>a .dc-caret,
        .dc-list li.open>.dc-sub .dc-caret {
            transform: rotate(180deg)
        }

        .dc-m-only {
            display: list-item
        }

        .dc-dd,
        .dc-list>li:nth-last-child(-n+3)>.dc-dd,
        .dc-dd .dc-dd,
        .dc-list>li:nth-last-child(-n+3)>.dc-dd .dc-dd {
            position: static;
            display: none;
            min-width: 0;
            border: 0;
            border-left: 2px solid var(--brand-l);
            box-shadow: none;
            border-radius: 0;
            opacity: 1;
            visibility: visible;
            transform: none;
            padding: 0 0 8px 12px;
            margin: 0 0 6px 10px;
        }

        .dc-dd .dc-dd::before {
            display: none
        }

        .dc-list li.open>.dc-dd {
            display: block
        }

        .dc-dd .dc-caret {
            transform: none
        }

        .dc-dd a:hover,
        .dc-dd button:hover {
            padding-left: 12px
        }

        .dc-drawer-extra {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 6px 18px 26px
        }

        .dc-drawer-extra a {
            padding: 7px 14px;
            border-radius: 999px;
            border: 1px solid var(--line);
            color: var(--brand-d);
            font-size: .875rem;
            font-weight: 600
        }

        .dc-drawer-extra a:hover {
            background: var(--brand);
            color: #fff
        }
    }

    @media (max-width:760px) {

        /* College name stays visible on phones: the text block takes the free space and wraps */
        .dc-brand {
            flex: 1;
            min-width: 0
        }

        .dc-right {
            flex: none
        }

        .dc-brand-txt {
            min-width: 0
        }

        .dc-brand-txt small {
            display: none
        }

        .dc-brand-txt b {
            font-size: .92rem;
            line-height: 1.2
        }

        .dc-brand-txt em {
            font-size: .76rem;
            margin-top: 4px;
            padding-top: 4px
        }

        .dc-brand img {
            height: 46px;
            max-width: 78px
        }

        .dc-brandrow-in {
            min-height: 72px
        }
    }

    @media (max-width:640px) {
        .dc-mail span {
            display: none
        }

        .dc-login span {
            display: none
        }

        .dc-login {
            padding: 10px 12px
        }

        .dc-social {
            display: none
        }
    }

    @media (max-width:480px) {
        .dc-brandrow-in {
            gap: 8px
        }

        .dc-brand {
            gap: 8px
        }

        .dc-brand img {
            height: 40px;
            max-width: 56px
        }

        .dc-brand-txt {
            padding-left: 8px
        }

        .dc-brand-txt b {
            font-size: .8rem
        }

        .dc-brand-txt em {
            font-size: .68rem
        }

        .dc-sbtn {
            width: 36px;
            height: 36px
        }

        .dc-burger {
            width: 40px;
            height: 40px
        }

        .dc-login {
            padding: 9px 10px
        }
    }

    .dc-useful-track {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 6px 2px 10px;
    }

    .dc-useful-track::-webkit-scrollbar {
        display: none
    }

    .dc-useful-item {
        flex: 0 0 calc((100% - 64px) / 5);
        /* 5 per view */
        scroll-snap-align: start;
        min-width: 0;
    }

    .dc-useful-item .dc-logo-card {
        height: 100%
    }

    @media (max-width:1100px) {
        .dc-useful-item {
            flex-basis: calc((100% - 48px) / 4)
        }
    }

    @media (max-width:820px) {
        .dc-useful-item {
            flex-basis: calc((100% - 32px) / 3)
        }
    }

    @media (max-width:540px) {
        .dc-useful-item {
            flex-basis: calc((100% - 16px) / 2)
        }
    }