:root {
        --college-primary: #5a0f58;
        --college-primary-dark: #3d083d;
        --college-secondary: #c9952e;
        --college-gold: #e2b44b;
        --college-cream: #f7f3ed;
        --college-text: #172033;
        --college-muted: #667085;
        --college-white: #ffffff;
        --college-shadow: 0 18px 50px rgba(37, 18, 48, .14);
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        overflow-x: hidden;
        background: #fff;
        color: var(--college-text);
        font-family: "Open Sans", Arial, sans-serif;
    }

    /* =========================
       MODERN COLLEGE MASTHEAD
       ========================= */
    .college-masthead {
        position: relative;
        z-index: 20;
        background:
            radial-gradient(circle at 15% 15%, rgba(201,149,46,.09), transparent 25%),
            radial-gradient(circle at 85% 15%, rgba(90,15,88,.08), transparent 28%),
            linear-gradient(180deg, #fffdfa 0%, #f7f1e8 100%);
        border-bottom: 1px solid rgba(90,15,88,.10);
    }

    .college-topbar {
        min-height: 38px;
        background: linear-gradient(90deg, var(--college-primary-dark), var(--college-primary), #6d1769);
        color: #fff;
        display: flex;
        align-items: center;
    }

    .college-topbar-inner {
        max-width: 1240px;
        width: calc(100% - 40px);
        margin: 0 auto;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        font-size: 12px;
        letter-spacing: .35px;
    }

    .college-topbar-left,
    .college-topbar-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .college-topbar a {
        color: #fff;
        text-decoration: none;
        opacity: .94;
    }

    .college-topbar a:hover {
        color: #ffe7a8;
        opacity: 1;
    }

    .college-topbar i {
        margin-right: 5px;
        color: #f2cf7b;
    }

    .college-brand {
        max-width: 1240px;
        width: calc(100% - 40px);
        margin: 0 auto;
        min-height: 155px;
        display: grid;
        grid-template-columns: 150px 1fr 150px;
        align-items: center;
        gap: 24px;
        padding: 20px 0 18px;
    }

    .college-brand-logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .college-brand-logo img {
        width: 112px !important;
        height: 112px !important;
        object-fit: contain;
        margin: 0 !important;
        filter: drop-shadow(0 7px 12px rgba(0,0,0,.10));
        transition: transform .35s ease;
    }

    .college-brand-logo a:hover img {
        transform: translateY(-3px) scale(1.03);
    }

    .college-brand-copy {
        text-align: center;
        min-width: 0;
    }

    .college-brand-copy .college-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--college-primary);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .college-brand-copy .college-kicker::before,
    .college-brand-copy .college-kicker::after {
        content: "";
        width: 32px;
        height: 1px;
        background: var(--college-gold);
    }

    .college-brand-copy .collegename {
        margin: 0 0 6px !important;
        color: var(--college-primary-dark);
        font-family: "Raleway", "Open Sans", sans-serif;
        font-size: clamp(22px, 2.2vw, 32px);
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: .5px;
        text-transform: uppercase;
    }

    .college-brand-copy .affilate {
        margin: 0 0 8px !important;
        color: var(--college-muted);
        font-size: 13px;
        font-weight: 600;
    }

    .college-brand-copy .collegetamil {
        margin: 0 0 4px !important;
        color: #3b203a;
        font-family: "Tiro Tamil", "Mukta", sans-serif;
        font-size: clamp(18px, 1.8vw, 25px);
        font-weight: 700;
        line-height: 1.35;
    }

    .college-brand-copy .collegesub {
        margin: 0 !important;
        color: var(--college-muted);
        font-size: 13px;
        font-weight: 500;
    }

    .college-codebar {
        border-top: 1px solid rgba(90,15,88,.08);
        background: rgba(255,255,255,.72);
    }

    .college-codebar-inner {
        max-width: 1240px;
        width: calc(100% - 40px);
        margin: 0 auto;
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .college-code {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #344054;
        font-size: 13px;
        font-weight: 700;
    }

    .college-code span {
        color: var(--college-primary);
    }

    .college-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #475467;
        font-size: 12px;
        font-weight: 600;
    }

    .college-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #20a464;
        box-shadow: 0 0 0 4px rgba(32,164,100,.12);
    }

    /* =========================
       MODERN NAVIGATION
       ========================= */
    .modern-nav-wrap {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: transparent;
        margin: 0;
    }

    .modern-nav {
        max-width: 100%;
        /* width: calc(100% - 40px); */
        margin: 0 auto;
        min-height: 66px;
        border: 0 !important;
        /* border-radius: 16px !important; */
        background: linear-gradient(110deg, #4b0a49 0%, #5a0f58 52%, #70196c 100%) !important;
        box-shadow: 0 15px 35px rgba(90,15,88,.22);
        overflow: visible;
    }

    .modern-nav .navbar-header {
        min-height: 66px;
    }

    .modern-nav .navbar-collapse {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 12px;
    }

    .modern-nav .navbar-nav {
        margin: 0;
        display: flex;
        align-items: stretch;
        min-height: 66px;
    }

    .modern-nav .navbar-nav > li {
        position: relative;
    }

    .modern-nav .navbar-nav > li > a {
        position: relative;
        min-height: 66px;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 0 21px;
        color: rgba(255,255,255,.88) !important;
        background: transparent !important;
        font-family: "Raleway", "Open Sans", sans-serif;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .7px;
        text-transform: uppercase;
        transition: color .25s ease, background .25s ease;
    }

    .modern-nav .navbar-nav > li > a::after {
        content: "";
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 10px;
        height: 3px;
        border-radius: 99px;
        background: var(--college-gold);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .25s ease;
    }

    .modern-nav .navbar-nav > li:hover > a,
    .modern-nav .navbar-nav > li.active > a {
        color: #fff !important;
    }

    .modern-nav .navbar-nav > li:hover > a::after,
    .modern-nav .navbar-nav > li.active > a::after {
        transform: scaleX(1);
    }

    .modern-nav .navbar-nav > li.active > a {
        background: rgba(255,255,255,.07) !important;
    }

    .modern-nav .caret {
        border-top-color: currentColor;
        margin-top: 2px;
    }

    .modern-nav .dropdown-menu {
        min-width: 245px;
        padding: 8px;
        margin-top: 0;
        border: 1px solid rgba(90,15,88,.10);
        border-radius: 13px;
        background: rgba(255,255,255,.98);
        box-shadow: 0 18px 45px rgba(16,24,40,.16);
    }

    .modern-nav .dropdown-menu > li > a {
        border-radius: 9px;
        padding: 11px 13px;
        color: #344054;
        font-size: 13px;
        font-weight: 600;
        transition: all .2s ease;
    }

    .modern-nav .dropdown-menu > li > a:hover,
    .modern-nav .dropdown-menu > li > a:focus {
        color: var(--college-primary);
        background: #f7eef7;
        padding-left: 17px;
    }

    .modern-nav .navbar-toggle {
        margin: 13px 14px 13px 0;
        border: 1px solid rgba(255,255,255,.35);
        border-radius: 10px;
        padding: 9px 10px;
        background: rgba(255,255,255,.08);
    }

    .modern-nav .navbar-toggle:hover,
    .modern-nav .navbar-toggle:focus {
        background: rgba(255,255,255,.15);
    }

    .modern-nav .navbar-toggle .icon-bar {
        background: #fff;
        width: 22px;
    }

    .modern-nav .nav-quick {
        margin-left: auto;
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .modern-nav .nav-quick a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 15px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 10px;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .5px;
        background: rgba(255,255,255,.07);
        text-decoration: none;
        transition: all .25s ease;
    }

    .modern-nav .nav-quick a:hover {
        color: var(--college-primary-dark);
        background: #fff;
        border-color: #fff;
    }

    /* =========================
       FULL-WIDTH HERO SLIDER
       ========================= */
    .hero-section {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #140714;
        overflow: hidden;
    }

    .hero-carousel {
        position: relative;
        width: 100%;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden;
        background: #140714;
    }

    .hero-carousel .carousel-inner {
        width: 100%;
        overflow: hidden;
    }

    .hero-carousel .item {
        width: 100%;
        height: clamp(430px, 54vw, 720px);
        background: #140714;
        overflow: hidden;
    }

    .hero-carousel .item::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            linear-gradient(90deg, rgba(18,5,22,.66) 0%, rgba(18,5,22,.18) 45%, rgba(18,5,22,.10) 100%),
            linear-gradient(0deg, rgba(18,5,22,.48) 0%, transparent 42%);
        pointer-events: none;
    }

    .hero-carousel .item img {
        width: 100% !important;
        height: 100% !important;
        max-width: none;
        object-fit: cover;
        object-position: center center;
        display: block;
        transform: scale(1.01);
        transition: transform 7s ease;
    }

    .hero-carousel .item.active img {
        transform: scale(1.06);
    }

    .hero-caption {
        position: absolute;
        z-index: 3;
        left: clamp(28px, 8vw, 120px);
        top: 50%;
        transform: translateY(-50%);
        width: min(650px, 72vw);
        color: #fff;
        text-align: left;
    }

    .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 13px;
        border-radius: 999px;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.23);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #ffe7a8;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        margin-bottom: 17px;
    }

    .hero-eyebrow i {
        color: #f5cf75;
    }

    .hero-caption h1 {
        margin: 0 0 14px;
        color: #fff;
        font-family: "Raleway", "Open Sans", sans-serif;
        font-size: clamp(32px, 4.3vw, 64px);
        line-height: 1.05;
        font-weight: 800;
        letter-spacing: -.7px;
        text-shadow: 0 4px 25px rgba(0,0,0,.25);
    }

    .hero-caption p {
        max-width: 590px;
        margin: 0 0 22px;
        color: rgba(255,255,255,.9);
        font-size: clamp(14px, 1.35vw, 18px);
        line-height: 1.75;
        font-weight: 400;
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 11px;
    }

    .hero-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 46px;
        padding: 0 19px;
        border-radius: 11px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .5px;
        text-transform: uppercase;
        text-decoration: none !important;
        transition: all .25s ease;
    }

    .hero-btn-primary {
        color: #3a1238 !important;
        background: #f5cf75;
        box-shadow: 0 12px 30px rgba(0,0,0,.18);
    }

    .hero-btn-primary:hover {
        color: #3a1238 !important;
        background: #fff;
        transform: translateY(-2px);
    }

    .hero-btn-ghost {
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.32);
        background: rgba(255,255,255,.09);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .hero-btn-ghost:hover {
        color: var(--college-primary-dark) !important;
        background: #fff;
        transform: translateY(-2px);
    }

    .hero-carousel .carousel-indicators {
        z-index: 5;
        left: clamp(28px, 8vw, 120px);
        right: auto;
        bottom: 28px;
        width: auto;
        margin: 0;
        text-align: left;
    }

    .hero-carousel .carousel-indicators li {
        width: 26px;
        height: 4px;
        margin: 0 4px 0 0;
        border: 0;
        border-radius: 99px;
        background: rgba(255,255,255,.4);
        transition: all .3s ease;
    }

    .hero-carousel .carousel-indicators .active {
        width: 48px;
        height: 4px;
        margin: 0 4px 0 0;
        background: #f5cf75;
    }

    .hero-carousel .carousel-control {
        z-index: 6;
        top: 50%;
        bottom: auto;
        width: 52px;
        height: 52px;
        margin: -26px 22px 0;
        border-radius: 50%;
        background: rgba(255,255,255,.11);
        border: 1px solid rgba(255,255,255,.2);
        opacity: 0;
        text-shadow: none;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        transition: all .25s ease;
    }

    .hero-carousel:hover .carousel-control {
        opacity: 1;
    }

    .hero-carousel .carousel-control:hover {
        background: #fff;
        color: var(--college-primary) !important;
        transform: scale(1.05);
    }

    .hero-carousel .carousel-control i {
        line-height: 52px;
        font-size: 24px;
    }

    .hero-carousel .carousel-control.left,
    .hero-carousel .carousel-control.right {
        background-image: none !important;
    }

    .hero-meta {
        position: absolute;
        z-index: 4;
        right: clamp(28px, 5vw, 70px);
        bottom: 28px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255,255,255,.8);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    .hero-meta::before {
        content: "";
        width: 34px;
        height: 1px;
        background: rgba(255,255,255,.45);
    }

    /* =========================
       CONTENT POLISH
       ========================= */
    .info_service {
        background:
            radial-gradient(circle at 8% 15%, rgba(90,15,88,.045), transparent 25%),
            linear-gradient(180deg, #fff 0%, #fbfaf8 100%);
    }

    .info_service .intro {
        color: var(--college-primary-dark);
        font-family: "Raleway", sans-serif;
        font-weight: 800;
        letter-spacing: -.3px;
    }

    .head-img {
        border-radius: 16px;
        box-shadow: var(--college-shadow);
    }

    .dividerHeading h4 span {
        color: var(--college-primary) !important;
    }

    /* =========================
       MOBILE
       ========================= */
    @media (max-width: 991px) {
        .college-brand {
            grid-template-columns: 105px 1fr 105px;
            gap: 12px;
            min-height: 135px;
        }

        .college-brand-logo img {
            width: 88px !important;
            height: 88px !important;
        }

        .modern-nav-wrap {
            padding: 8px 0;
        }

        .modern-nav {
            border-radius: 13px !important;
        }

        .modern-nav .navbar-nav {
            display: block;
            min-height: 0;
            padding: 8px 0 12px;
        }

        .modern-nav .navbar-nav > li > a {
            min-height: 48px;
            padding: 0 17px;
            border-radius: 9px;
        }

        .modern-nav .navbar-nav > li > a::after {
            display: none;
        }

        .modern-nav .navbar-nav > li.active > a,
        .modern-nav .navbar-nav > li:hover > a {
            background: rgba(255,255,255,.09) !important;
        }

        .modern-nav .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin: 0 10px 8px;
            box-shadow: none;
            border-color: rgba(255,255,255,.12);
        }

        .modern-nav .dropdown-menu > li > a {
            color: #344054 !important;
        }

        .modern-nav .nav-quick {
            display: none;
        }

        .hero-carousel .item {
            height: 500px;
        }

        .hero-caption {
            width: calc(100% - 56px);
            left: 28px;
        }
    }

    @media (max-width: 767px) {
        .college-topbar-inner {
            width: calc(100% - 24px);
            justify-content: center;
        }

        .college-topbar-left {
            display: none;
        }

        .college-topbar-right {
            gap: 12px;
        }

        .college-brand {
            width: calc(100% - 24px);
            grid-template-columns: 72px 1fr 72px;
            gap: 8px;
            min-height: 125px;
            padding: 13px 0;
        }

        .college-brand-logo img {
            width: 64px !important;
            height: 64px !important;
        }

        .college-brand-copy .college-kicker {
            font-size: 8px;
            letter-spacing: 1px;
            gap: 4px;
            margin-bottom: 5px;
        }

        .college-brand-copy .college-kicker::before,
        .college-brand-copy .college-kicker::after {
            width: 14px;
        }

        .college-brand-copy .collegename {
            font-size: 14px;
            letter-spacing: .1px;
        }

        .college-brand-copy .affilate {
            font-size: 9px;
            margin-bottom: 4px !important;
        }

        .college-brand-copy .collegetamil {
            font-size: 12px;
        }

        .college-brand-copy .collegesub {
            font-size: 9px;
        }

        .college-codebar-inner {
            width: calc(100% - 24px);
            min-height: 42px;
        }

        .college-status {
            display: none;
        }

        .modern-nav {
            width: calc(100% - 24px);
        }

        .hero-carousel .item {
            height: 480px;
        }

        .hero-carousel .item::before {
            background:
                linear-gradient(90deg, rgba(18,5,22,.72), rgba(18,5,22,.28)),
                linear-gradient(0deg, rgba(18,5,22,.62), transparent 55%);
        }

        .hero-caption {
            left: 24px;
            top: 47%;
            width: calc(100% - 48px);
        }

        .hero-caption h1 {
            font-size: 34px;
        }

        .hero-caption p {
            font-size: 13px;
            line-height: 1.6;
        }

        .hero-actions {
            gap: 8px;
        }

        .hero-btn {
            min-height: 42px;
            padding: 0 14px;
            font-size: 10px;
        }

        .hero-carousel .carousel-control {
            width: 42px;
            height: 42px;
            margin-top: -21px;
            margin-left: 10px;
            margin-right: 10px;
            opacity: .85;
        }

        .hero-carousel .carousel-control i {
            line-height: 42px;
            font-size: 18px;
        }

        .hero-carousel .carousel-indicators {
            left: 24px;
            bottom: 18px;
        }

        .hero-meta {
            display: none;
        }
    }
    @media (min-width: 650px) {
        .navbar-nav{
            display: flex !important;
            justify-content: center !important;
            aign-items: center !important;
            width: 100% !important;
        }
    }