:root {
        --primary: #192F59;
        --secondary: #0E5D99; /*#28a745;*/
        --light: #f8f9fa;
        --text-dark: #333;
        --link: #003366;
        --top-blue: #192F59;
        --navbar-bg: #C00606;
        --text-red: var(--navbar-bg);
        --hover: #ffd700;
        --heading: var(--top-blue); /*#004A8D;*/
        --primary-red: #a51c24; /* Matching the header/button red */
        --dark-gray: #333;
        --light-gray: #f4f4f4;
    }

    body { font-family: "Times New Roman", Times, serif; color: var(--text-dark); background: #fff; line-height: 1.6; }
    /*body { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--text-dark); background: #fff; line-height: 1.6; }*/
    
    .top-bar { background: var(--top-blue); color: white; padding: 0.5rem 0; font-size: 0.9rem; }
    .top-bar a { color: white; text-decoration: none; margin: 0 0.5rem; }
    .top-bar a:hover { color: var(--hover); }

    .college-header { background: white; /*padding: 1rem 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/ }
	.college-header h3{ color: var(--text-red); }
    .college-name h1 { margin: 0; color: var(--primary); font-size: 2rem; font-weight: bold; }
    .text-primary { color: var(--primary) !important; }

    .helpline-button {
        background-color: var(--navbar-bg);
        font-family: "Roboto",Sans-serif;
        font-size: 16px;
        color: #FFF;
        border-radius: 8px;
        padding: 12px 20px;
    }
    
    .navbar { background: var(--navbar-bg) !important; transition: top 0.3s; }
    .navbar.sticky { position: fixed; top: 0; width: 100%; z-index: 1030; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
    .navbar .dropdown-menu { background-color: var(--primary); border: none; }
    .navbar .dropdown-item { color: white; }
    .navbar .dropdown-item:hover { background-color: rgba(255,255,255,0.1); }

	/* Dropdown Enhancements */
	.navbar .dropdown-menu {
		transition: opacity 0.3s ease, transform 0.3s ease;
		opacity: 0;
		transform: translateY(10px);
		pointer-events: none;
		border: none;
		border-radius: 0 0 8px 8px;
		background-color: var(--primary); /*#C00606;*/ /* Match your navbar red */
		box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        min-width: 200px;
	}

	.navbar .dropdown-menu.show {
		opacity: 1;
		transform: translateY(0);
		pointer-events: all;
	}

	/* Mega Dropdown (wider & columnar) */
	.navbar .mega-dropdown .dropdown-menu {
		width: 700px; /* Adjust as needed */
		left: 50% !important;
		transform: translateX(-50%) translateY(10px) !important;
		padding: 1.5rem;
	}

	.navbar .mega-dropdown .dropdown-menu.show {
		transform: translateX(-50%) translateY(0) !important;
	}

	.navbar .dropdown-item, .navbar .nav-link:hover {
		color: white;
		transition: background 0.2s;
	}
	.navbar .dropdown-item:hover {
		background-color: rgba(255,255,255,0.15);
	}

	/* Column layout inside mega menu */
	.mega-col {
		flex: 1;
		min-width: 200px;
	}

    /* --- Navbar Active Item Styles --- */
    /* 1. Main Navbar Active Link (Top Level) */
    .navbar .nav-link.active {
        color: var(--hover) !important; /* Gold/Yellow color to match the "History" breadcrumb in your image */
        /*font-weight: 600;*/
        position: relative;
    }

    /* 2. Dropdown Active Item (Inside the menu) */
    .navbar .dropdown-item.active {
        background-color: rgba(255, 255, 255, 0.25) !important; /* Slightly brighter than hover */
        color: white !important;
        /*ont-weight: bold;*/
    }

    /* 3. Mega-Dropdown Header Active (If you use titles in mega-menu) */
    .navbar .mega-dropdown .dropdown-item.active {
        border-left: 3px solid var(--hover); /* Vertical gold bar for active item in mega-menu */
        padding-left: 15px;
    }

    /* Social Icons Container background to match your theme */
    /* 1. General Styles (Desktop & Mobile) */
    .social-container {
        display: flex;
        gap: 1px;
        padding: 0px;
        background-color: transparent; /* Removes the mismatched dark box */
    }

    .social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;         /* Smaller circle size */
        height: 30px;
        background: #fff;    /* White circle */
        border-radius: 50%;
        text-decoration: none;
    }

    .social-icon i {
        color: #1a2b48;      /* Icon matches your navy theme */
        font-size: 16px;     /* Smaller icon size */
    }

    /* Hover effect */
    .social-icon:hover {
        /*background-color: #d1d1d1; /* Slight grey on hover */
        transform: translateY(-3px); /* Optional: small pop-up effect */
    }

    .heading{
        color: var(--heading) !important;
    }

    .heading1{
        color: #1a237e; font-weight: bold; border-bottom: 2px solid #d32f2f; display: inline-block;
    }
    
    /* 2. Mobile Specific Styles (Centers the icons) */
    @media (max-width: 768px) {
        .social-container {
            justify-content: center; /* Centers icons horizontally on mobile */
            width: 100%;            /* Ensures container spans full width */
            padding: 5px;
        }
    }

    .swiper { height: 70vh; min-height: 400px; }
    .swiper-slide img { object-fit: cover; height: 100%; width: 100%; }

    /* Page banner css start */
    /* 1. Parent Container */
    .banner-container {
        position: relative; 
        width: 100%;
        height: 180px;       
        overflow: hidden;
        background: #111; /* Fallback background color */
    }

    /* 2. Banner Image with Premium Gradient Overlay */
    .banner-container::after {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        /* Dark modern gradient tint: Left is darker for crisp text readability */
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
        z-index: 1;
    }

    .banner-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 45%; 
        display: block;
        
        /* --- FIRST LOAD ANIMATION --- */
        opacity: 0;
        transform: scale(1.05); /* Starts slightly zoomed in */
        animation: professionalReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    /* 3. Modern, Left-Aligned Typography Layout (No Ugly Box) */
    .banner-text-overlay {
        position: absolute;
        top: 50%;
        left: 4%; /* Aligns beautifully with the standard grid of modern websites */
        transform: translateY(-50%);
        color: #ffffff;
        text-align: left;
        z-index: 2;
        
        /* --- TEXT LOADING ANIMATION --- */
        opacity: 0;
        transform: translateY(-40%); /* Slides smoothly into position */
        animation: textReveal 1s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards; /* Delays slightly after image starts */
    }

    /* Typography Enhancements */
    .banner-text-overlay h1 {
        margin: 0 0 6px 0;
        font-size: 2.2rem; /* Larger, bold corporate presence */
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    }

    /* Update this minor section within your current CSS to polish the breadcrumb spacing */
    .banner-text-overlay p {
        margin: 0;
        font-size: 0.9rem;
        color: #dddddd;
        display: flex;
        align-items: center;
        gap: 5px; /* Adds clean spacing between the home icon and the text */
    }

    /* Optional: Make the active page match your website's red theme brand identity */
    .banner-text-overlay p span.active-page {
        color: #ff4d4d; /* Subtle red tint to match your header elements */
    }

    /* --- KEYFRAME ANIMATIONS --- */
    @keyframes professionalReveal {
        to {
            opacity: 1;
            transform: scale(1); /* Smoothly zooms out to normal scale */
        }
    }

    @keyframes textReveal {
        to {
            opacity: 1;
            transform: translateY(-50%); /* Clean upward settle */
        }
    }
    /* Page banner css end */

    .img_border {
        width: 100%;
        height: 100%;
        outline: 1px solid #333;
        outline-offset: 3px;
        border-radius: 5px;
        object-fit: contain;
    }

    .animate-section { opacity: 0; transform: translateY(50px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
    .animate-section.visible { opacity: 1; transform: translateY(0); }

    .card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .card:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }

    .section-title { color: var(--primary); text-align: center; position: relative; margin-bottom: 2.5rem; font-size: 2.2rem; }
    .section-title small { display: block; font-size: 1rem; color: #6c757d; margin-top: 0.5rem; }
    .section-title::after { content: ''; width: 80px; height: 4px; background: var(--secondary); position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); }

    .list-group-item { border-bottom: 1px solid #eee; padding: 1rem 0; }
    .list-group-item a { color: var(--link); text-decoration: none; }
    .list-group-item a:hover { text-decoration: underline; }

    .btn-custom { background: var(--secondary); border-color: var(--secondary); color: white; border-radius: 5px; padding: 0.75rem 1.5rem; }
    .btn-custom:hover { background: var(--secondary); border-color: var(--secondary); color: white!important; }

    .counter-box { background: var(--primary); color: white; padding: 2rem; border-radius: 10px; text-align: center; }
    .counter-box h3, .counter-box h4 { font-size: 2.5rem; margin-bottom: 0.5rem; }

    footer { 
        background: var(--primary); 
        color: white; 
        padding: 3rem 0 1rem; 
        position: relative; /* Required for watermark positioning */
        overflow: hidden;    /* Keeps the watermark inside the footer */
    }

    /* The Watermark Layer */
    footer::before {
        content: "";
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;
        /* Replace with your actual image path */
        background-image: url('images/footer_bg.jpg'); 
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto; /* Adjust size of the watermark here */
        opacity: 0.1;           /* Keeps it subtle against the primary color */
        pointer-events: none;   /* Ensures you can still click links */
    }

    footer .container {
        position: relative; /* Pulls content above the watermark */
        z-index: 2;
    }

    footer a { color: #ddd; text-decoration: none; }
    footer a:hover { color: white; }

    .copyright { 
        border-top: 1px solid rgba(255,255,255,0.2); 
        padding-top: 1rem; 
        margin-top: 2rem; 
        text-align: center; 
        position: relative;
        z-index: 2;
    }

    .page-header {
        background: #0a0e14; /* Matches the deep dark background in your image */
        padding: 0.75rem 0;     /* Vertical spacing */
        color: white;
        text-align: center;
    }

    .page-header h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .breadcrumb-nav {
        font-size: 0.95rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    /* Home Link Style */
    .breadcrumb-nav a {
        color: white;
        text-decoration: none;
        transition: color 0.3s;
    }

    .breadcrumb-nav a:hover {
        color: var(--hover); /* Uses your primary color on hover */
    }

    /* Separator Style */
    .separator {
        color: white;
        font-size: 0.8rem;
    }

    /* Current Page Style (Orange/Gold color from image) */
    .current {
        color: #c5a059; /* Matches the golden/yellow hue in your screenshot */
        font-weight: 500;
    }

    /* Document-style refinements */
    .page-section {
        color: #333;
        line-height: 1.7;
    }

    .text-justify {
        text-align: justify;
    }

    .page-section h2 {
        color: #1a1a1a;
        font-weight: 700;
    }

    .college-profile {
        font-family: 'Arial', sans-serif;
        line-height: 1.6;
        color: #444;
        max-width: 900px;
        margin: 20px auto;
        padding: 20px;
    }

    .main-title {
        color: #d32f2f; /* Red from your theme */
        text-align: center;
        border-bottom: 2px solid #1a237e;
        padding-bottom: 0px;
        font-weight: bold;
    }

    .college-profile h2 {
        color: #1a237e; /* Navy Blue */
        font-size: 1.2rem;
        margin-top: 25px;
        border-left: 5px solid #d32f2f;
        padding-left: 10px;
    }

    .college-profile ul {
        list-style-type: square;
        padding-left: 20px;
    }

    .college-profile li {
        margin-bottom: 8px;
    }

    .college-profile strong {
        color: #1a237e;
    }

    .biography-section {
        line-height: 1.6;
        color: #333;
        max-width: 800px;
        margin: auto;
        text-align: justify;
    }

    .biography-section h2 {
        color: #1a237e; /* Matching your Navy Blue theme */
        border-bottom: 2px solid #d32f2f; /* Red accent line */
        display: inline-block;
    }
    .biography-section p strong {
        color: #1a237e;
    }

    .biography-section strong {
        color: #d32f2f; /* Using the Red accent from your theme for emphasis */
    }

    .biography-section h2 {
        margin-top: 30px;
        font-variant: small-caps;
    }

    /* Table Container and General Styling */
    .page-section table {
        width: 100%;
        border-collapse: collapse;
        margin: 25px 0;
        font-size: 16px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
    }

    /* Header Styling (Matches Navy Blue Header) */
    .page-section table thead tr {
        background-color: #1a237e; /* Deep Navy Blue */
        color: #ffffff;
        text-align: left;
        font-weight: bold;
    }

    .page-section table th, table td {
        padding: 12px 15px;
        border-bottom: 1px solid #dddddd;
        border-left: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
    }

    /* Zebra Striping for Readability */
    .page-section table tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }

    /* Hover Effect (Matches Button Red) */
    .page-section table tbody tr:hover {
        background-color: #f9f9f9;
        border-left: 5px solid #d32f2f; /* Red Accent from Admission Button */
        transition: all 0.2s ease;
    }

    /* Column-specific alignment */
    .page-section table td:first-child {
        font-weight: bold;
        color: #1a237e;
        width: 50px;
    }

    .page-section table a{
        text-decoration: none;
        color: #1A237E;
    }

    .red_blink_btn {
        border: 1px solid #a80000;
        padding: 3px 11px;
        width: 219px;
        background: white;
        font-size: 18px;
        color: black;
        transition: 0.4s;
        border-radius: 5px;
        text-align: center;
        margin-top: 5px;
        float: right;
        text-transform: uppercase;
    }

    @keyframes glowing {
        0% {
            background-color: white;
            color:black;
            box-shadow: 0 0 5px #a80000;
        }
        50% {
            background-color: #ffcaca;
            color:black;
            box-shadow: 0 0 10px #a80000;
        }
        100% {
            background-color: #ae0000;
            color:white;
            box-shadow: 0 0 5px #a80000;
        }
    }

    .red_blink_btn {
        animation: glowing 1000ms infinite;
    }

    /* Responsive Design */
    @media screen and (max-width: 600px) {
        .page-section table {
            font-size: 14px;
        }
    }

    @media (max-width: 767px) {
      .college-name h1 { font-size: 1.5rem; text-align: center; }
      .swiper { height: 40vh; }
      .section-title { font-size: 1.8rem; }
      .top-bar { text-align: center; font-size: 0.8rem; }
      .top-bar .d-flex { justify-content: center; flex-wrap: wrap; }
      .text-md-end { text-align: center; }
    }
    @media (max-width: 576px) {
      .counter-box h3, .counter-box h4 { font-size: 2rem; }
      .text-md-end { text-align: center; }
    }