/* --- Color Variables & Basic Setup --- */
        :root {
            --maroon-dark: #631010;
            --maroon: #741515;
            --gold: #d6a13c;
            --navy-blue: #0b1f3d;
            --text-dark: #333333;
            --text-gray: #666666;
            --bg-light: #fbfbfb;
            --white: #ffffff;
            --pad-desk: 60px;
            --pad-mob: 20px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
        body { background-color: var(--bg-light); color: var(--text-dark); overflow-x: hidden; width: 100%; }

        /* =========================================
           STRICT CSS ICON IMPLEMENTATION
           (No HTML icon tags used anywhere)
           ========================================= */
		/* Career Specific Icons */
        .ft-guidance::before { content: "\f140"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 35px; color: var(--gold); margin-bottom: 15px; display: block; }
        .ft-workshop::before { content: "\f085"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 35px; color: var(--gold); margin-bottom: 15px; display: block; }
        .ft-interview::before { content: "\f500"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 35px; color: var(--gold); margin-bottom: 15px; display: block; }
        .ft-placement::before { content: "\f0b1"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 35px; color: var(--gold); margin-bottom: 15px; display: block; }	
        .ico-phone::before { content: "\f879"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold); margin-right: 8px; }
        .ico-email::before { content: "\f0e0"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold); margin-right: 8px; }
        
        .ico-fb::before { content: "\f39e"; font-family: "Font Awesome 6 Brands"; }
        .ico-ig::before { content: "\f16d"; font-family: "Font Awesome 6 Brands"; }
        .ico-yt::before { content: "\f167"; font-family: "Font Awesome 6 Brands"; }
        .ico-wa::before { content: "\f232"; font-family: "Font Awesome 6 Brands"; } 
        .ico-tg::before { content: "\f2c6"; font-family: "Font Awesome 6 Brands"; } 
        
        .ico-loc::before { content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--maroon); margin-right: 5px; }
        .ico-univ::before { content: "\f19c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 28px; margin-bottom: 5px; display: block; }
        
        .has-drop::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; margin-left: 5px; }
        .drop-item::before { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold); margin-right: 5px; }
        .btn-arrow::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; margin-left: 8px; }
        
        .slider-left::before { content: "\f053"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
        .slider-right::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
        
        .ico-grad::before { content: "\f19d"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 32px; color: var(--gold); margin-bottom: 10px; display: block; }
        .ico-users::before { content: "\f0c0"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 32px; color: var(--gold); margin-bottom: 10px; display: block; }
        .ico-teacher::before { content: "\f51c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 32px; color: var(--gold); margin-bottom: 10px; display: block; }
        .ico-award::before { content: "\f559"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 32px; color: var(--gold); margin-bottom: 10px; display: block; }
        
        .ico-gem::before { content: "\f3a5"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; color: var(--gold); margin: 0 10px; }

        .prog-icon::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 35px; color: var(--gold); display: block; }
        .ico-flask::before { content: "\f0c3"; }
        .ico-chart::before { content: "\f201"; }
        .ico-book::before { content: "\f518"; }
        .ico-leaf::before { content: "\f06c"; }

        .fac-box::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 32px; color: var(--maroon); margin-bottom: 12px; display: block; }
        .fac-monitor::before { content: "\f108"; }
        .fac-books::before { content: "\f5da"; }
        .fac-laptop::before { content: "\f109"; }
        .fac-vial::before { content: "\f490"; }
        .fac-basketball::before { content: "\f434"; }
        .fac-home::before { content: "\f015"; }
        .fac-utensils::before { content: "\f2e7"; }
        .fac-heartbeat::before { content: "\f21e"; }

        .news-title-notice::before { content: "\f0a1"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold); margin-right: 10px; }
        .news-title-news::before { content: "\f1ea"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: inherit; margin-right: 10px; }
        
        .testi-card::before { content: "\f10e"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; bottom: 20px; right: 20px; font-size: 40px; color: rgba(214, 161, 60, 0.15); z-index: 1; }

        .ft-loc::before { content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--white); width: 25px; display: inline-block; }
        .ft-phone::before { content: "\f879"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--white); width: 25px; display: inline-block; }
        .ft-mobile::before { content: "\f3cd"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--white); width: 25px; display: inline-block; }
        .ft-email::before { content: "\f0e0"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--white); width: 25px; display: inline-block; }
        .ft-link::before { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--white); margin-right: 8px; transition: 0.3s; }
        .ft-link:hover::before { color: var(--gold); }

        .menu-toggle-btn::before { content: "\f0c9"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 24px; color: var(--white); }
        .btn-download::before { content: "\f019"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 8px; }
        /* ========================================= */

        /* 1. TOP BAR */
        .top-bar { background-color: var(--maroon-dark); color: var(--white); display: flex; justify-content: space-between; align-items: center; padding: 8px var(--pad-desk); font-size: 12px; }
        .top-bar-left a { color: var(--white); text-decoration: none; margin-right: 20px; display: inline-block; margin-bottom: 4px; }
        .top-bar-right { display: flex; align-items: center; gap: 15px; }
        .social-icons a { color: var(--white); margin-left: 10px; font-size: 16px; text-decoration: none; transition: 0.3s; }
        .social-icons a:hover { color: var(--gold); }

        /* 2. LOGO HEADER */
        .logo-header { display: flex; justify-content: space-between; align-items: stretch; background-color: var(--white); padding-left: var(--pad-desk); height: 120px; }
        .logo-content { display: flex; align-items: center; gap: 20px; padding: 15px 0; }
        .logo-box { width: 100px; display: flex; align-items: center; justify-content: center; }
        .logo-box img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); }
        .college-title h1 { font-size: 26px; color: var(--maroon); font-weight: 700; margin-bottom: 2px; }
        .college-title p { font-size: 14px; color: var(--text-gray); margin-bottom: 2px; }
        .college-title .location { font-size: 13px; font-weight: 500; }
        .estd-box { background-color: var(--gold); width: 160px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--maroon-dark); margin-right: var(--pad-desk); }
        .estd-box span { font-size: 11px; font-weight: 600; }
        .estd-box strong { font-size: 24px; font-weight: 800; line-height: 1; }

        /* 3. NAVBAR */
        .navbar { background-color: var(--maroon); display: flex; padding: 0 var(--pad-desk); position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.1); flex-wrap: wrap; justify-content: space-between; align-items: center; }
        .nav-menu { display: flex; width: 100%; }
        .nav-item { position: relative; display: inline-block; }
        .nav-link { color: var(--white); text-decoration: none; padding: 15px 20px; font-size: 14px; font-weight: 500; display: flex; align-items: center; transition: 0.3s; height: 100%; }
        .nav-link:hover { background-color: var(--maroon-dark); }
        .nav-link.active { background-color: var(--gold); color: var(--maroon-dark); font-weight: 600; }
        .dropdown-content { display: none; position: absolute; background-color: var(--white); min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15); z-index: 1001; top: 100%; left: 0; border-top: 3px solid var(--gold); border-radius: 0 0 5px 5px; overflow: hidden; }
        .dropdown-content a { color: var(--text-dark); padding: 12px 20px; text-decoration: none; display: block; font-size: 13px; border-bottom: 1px solid #f1f1f1; transition: 0.3s; }
        .dropdown-content a:hover { background-color: var(--bg-light); color: var(--maroon); padding-left: 25px; }
        .nav-item:hover .dropdown-content { display: block; animation: fadeIn 0.3s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .menu-toggle-btn { display: none; background: transparent; border: none; padding: 12px 0; cursor: pointer; }

        /* 4. PREMIUM HERO SECTION (Image Only) */
        .hero-section { position: relative; height: 550px; width: 100%; overflow: hidden; background-color: var(--navy-blue); }
        .slider-track { display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
        .slide { width: 33.3333%; height: 100%; background-size: cover; background-position: center; }
        
        .hero-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); z-index: 2; pointer-events: none; }
        
        .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background-color: rgba(255,255,255,0.8); color: var(--maroon-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.15); border: none; }
        .slider-arrow:hover { background-color: var(--maroon); color: var(--white); transform: translateY(-50%) scale(1.05); }
        .slider-arrow.left { left: 30px; }
        .slider-arrow.right { right: 30px; }
        
        .slider-dots { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
        .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--white); background: rgba(0,0,0,0.2); cursor: pointer; transition: 0.3s; }
        .dot.active { background: var(--white); transform: scale(1.2); }
        
        .wave-container { position: absolute; bottom: -2px; left: 0; width: 100%; height: 80px; z-index: 15; overflow: hidden; pointer-events: none; }
        .wave-container svg { width: 100%; height: 100%; display: block; }

        /* General Layout Utility */
        .section-padding { padding: 40px var(--pad-desk); }
        .title-divider { display: flex; align-items: center; justify-content: center; margin: 5px 0 30px 0; }
        .title-divider::before, .title-divider::after { content: ''; width: 80px; height: 1px; background-color: var(--gold); }
		.title-divider i {color: var(--gold);font-size: 12px;margin: 0 10px;}
        .section-header-center { text-align: center; }
        .section-title { font-size: 24px; color: var(--maroon); font-weight: 700; margin-bottom: 15px; text-transform: uppercase; }
        .btn-maroon { background-color: var(--maroon); color: var(--white); padding: 10px 24px; text-decoration: none; font-size: 13px; border-radius: 4px; display: inline-block; transition: 0.3s; font-weight: 500; }
        .btn-maroon:hover { background-color: var(--maroon-dark); }
		
		/* 7. REDESIGNED CAREER COUNSELING SECTION */
        .career-section { background: var(--bg-light); border-top: 1px solid #eee; }
        
        .career-main-card {
            display: flex;
            align-items: stretch;
            background: var(--white);
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            overflow: hidden;
            max-width: 100%;
            margin: 0 auto;
        }

        /* Left Side: Photo with Background Color */
        .counselor-profile-side {
            flex: 0 0 350px;
            background: linear-gradient(135deg, var(--navy-blue), #061224);
            color: var(--white);
            padding: 50px 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
        }
        /* Subtle texture for the left side */
        .counselor-profile-side::before {
            content: "\f140";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: 20px; left: 20px;
            font-size: 80px;
            color: rgba(255,255,255,0.03);
            pointer-events: none;
        }
        .counselor-profile-side img {
            width: 160px; height: 160px;
            object-fit: cover;
            border-radius: 50%;
            border: 4px solid var(--gold);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            margin-bottom: 20px;
            background-color: var(--white); /* For placeholder contrast */
        }
        .counselor-name { font-weight: 700; color: var(--gold); font-size: 22px; margin: 0 0 5px 0; line-height: 1.2; }
        .counselor-title { font-size: 13px; color: #ddd; margin: 0; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }

        /* Right Side: Text and Buttons */
        .career-details-side {
            flex: 1;
            padding: 40px 50px;
            background: var(--white);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .career-details-side .section-title { text-align: left; margin-bottom: 5px; font-size: 26px; }
        .career-details-side .title-divider { justify-content: flex-start; margin-bottom: 20px; }
        
        .concise-intro { font-size: 14.5px; color: var(--text-gray); margin-bottom: 25px; line-height: 1.7; text-align: justify; }
        
        .compact-features {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 35px;
        }
        .compact-features li { 
            display: flex; 
            align-items: center; 
            gap: 15px; 
            font-size: 14.5px; 
            font-weight: 600; 
            color: var(--navy-blue);
        }
        .compact-features li::before {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            background: var(--bg-light);
            color: var(--maroon);
            width: 40px; height: 40px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px;
            border: 1px solid #eee;
            box-shadow: 0 3px 8px rgba(0,0,0,0.03);
        }
        .ft-guidance::before { content: "\f140"; }
        .ft-workshop::before { content: "\f085"; }
        .ft-placement::before { content: "\f0b1"; }

        /* Buttons Inline */
        .career-buttons {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }


        /* 5. ABOUT & STATS */
        .about-stats-row { display: flex; gap: 40px; align-items: center; background: var(--bg-light); }
        .about-col { flex: 1.2; }
        .about-col p { font-size: 14px; color: var(--text-gray); line-height: 1.7; margin-bottom: 25px; text-align: justify; }
        .stats-col { flex: 2; display: flex; justify-content: space-between; }
        .stat-box { text-align: center; position: relative; flex: 1; }
        .stat-box:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 10%; height: 80%; width: 1px; background-color: #ddd; }
        .stat-box h2 { font-size: 28px; color: var(--maroon-dark); margin-bottom: 2px; font-weight: 800; }
        .stat-box p { font-size: 13px; color: var(--text-gray); font-weight: 500; }

     	/* 6. MESSAGES SECTION (DIRECTOR, PRINCIPAL, DEAN) */
        .messages-section { background: var(--white); }
        
        .message-card { max-width: 1100px; margin: 0 auto 40px auto; background: var(--bg-light); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: flex; overflow: hidden; border: 1px solid #eaeaea; }
        .message-card.reverse { flex-direction: row-reverse; }
        
        .msg-img-box { background: linear-gradient(135deg, var(--navy-blue), #061224); padding: 40px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--white); min-width: 320px; }
        .message-card.reverse .msg-img-box { background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)); }
        
        .msg-img-box img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 4px solid var(--gold); margin-bottom: 15px; box-shadow: 0 8px 15px rgba(0,0,0,0.3); }
        .msg-img-box h3 { color: var(--gold); font-size: 20px; margin-bottom: 5px; }
        .msg-img-box p { font-size: 13px; color: #ccc; margin-bottom: 0; }
        
        .msg-content-box { padding: 40px 50px; display: flex; flex-direction: column; justify-content: center; position: relative; flex: 1; }
        .msg-content-box::before { content: "\f10e"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 25px; right: 40px; font-size: 60px; color: rgba(214, 161, 60, 0.1); }
        .message-card.reverse .msg-content-box::before { left: 40px; right: auto; content: "\f10d"; }
        
        .msg-content-box h2 { font-size: 24px; color: var(--maroon-dark); margin-bottom: 15px; }
        .msg-content-box p { font-size: 14.5px; color: var(--text-gray); line-height: 1.8; font-style: italic; margin-bottom: 25px; text-align: justify; }

        /* 6. PROGRAMS */
        .programs-section { text-align: center; background: var(--white); }
        .programs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
        .program-card { border-radius: 5px; padding: 25px 20px; color: var(--white); text-align: left; display: flex; flex-direction: column; justify-content: space-between; transition: 0.3s; }
        .program-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0,0,0,0.1); }
        .program-card.blue { background-color: var(--navy-blue); }
        .program-card.maroon { background-color: var(--maroon); }
        .prog-top { display: flex; gap: 15px; margin-bottom: 15px; align-items: center; }
        .prog-top h3 { font-size: 18px; margin-bottom: 0; }
        .program-card p { font-size: 12px; opacity: 0.9; line-height: 1.5; margin-bottom: 20px; }
        .btn-outline { border: 1px solid var(--white); color: var(--white); padding: 6px 15px; text-decoration: none; font-size: 12px; border-radius: 3px; align-self: flex-start; transition: 0.3s; }
        .btn-outline:hover { background-color: var(--white); color: var(--text-dark); }

        /* 7. FACILITIES & GALLERY ROW (FIXED GRID & GALLERY SLIDER) */
        .fac-gal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background-color: var(--bg-light); }
        
        .fac-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
        .fac-box { border: 1px solid #eee; border-radius: 5px; padding: 15px 5px; text-align: center; background: var(--white); transition: 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
        .fac-box:hover { border-color: var(--gold); box-shadow: 0 5px 15px rgba(214,161,60,0.1); transform: translateY(-3px); }
        .fac-box p { font-size: 11px; font-weight: 500; color: var(--text-dark); }
        .btn-center { text-align: center; margin-top: 15px; }
        
        .section-header-flex { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
        .section-header-flex .title-block { text-align: left; }
        .section-header-flex .title-block h2 { margin-bottom: 5px; }
        .gallery-carousel-new { position: relative; width: 100%; overflow: hidden; padding-bottom: 30px; }
        .gal-track-new { display: flex; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
        .gal-group { min-width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 5px; }
        .gal-box { height: 160px; background: #ddd; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        .gal-box img { width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }
        .gal-box:hover img { transform: scale(1.08); }
        .gal-dots-new { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
        .gal-dots-new .gal-dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; cursor: pointer; transition: 0.3s; }
        .gal-dots-new .gal-dot.active { background: var(--maroon); width: 25px; border-radius: 5px; }

        /* 8. NEWS & NOTICE BOARD */
        .news-notice-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: var(--white); }
        .news-box { background: var(--white); padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-top: 4px solid var(--maroon); }
        .news-box h2 { font-size: 20px; color: var(--maroon-dark); margin-bottom: 20px; display: flex; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 15px; }
        .news-box.highlight { background: linear-gradient(145deg, var(--navy-blue) 0%, #061224 100%); border-top: 4px solid var(--gold); color: var(--white); }
        .news-box.highlight h2 { color: var(--gold); border-bottom-color: rgba(255,255,255,0.1); }
        .news-box.highlight .news-item { border-bottom-color: rgba(255,255,255,0.15); }
        .news-box.highlight .news-text a { color: #f1f1f1; }
        .news-box.highlight .news-text a:hover { color: var(--gold); }
        .notice-scroll { list-style: none; height: 250px; overflow-y: auto; padding-right: 10px; }
        .notice-scroll::-webkit-scrollbar { width: 4px; }
        .notice-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }
        .news-ticker-wrapper { height: 250px; overflow: hidden; position: relative; padding-right: 10px; }
        .news-ticker { display: flex; flex-direction: column; animation: scrollUp 15s linear infinite; }
        .news-ticker-wrapper:hover .news-ticker { animation-play-state: paused; }
        @keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
        .news-item { display: flex; gap: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #ddd; align-items: flex-start; }
        .news-date { background: var(--bg-light); border: 1px solid var(--gold); color: var(--maroon-dark); min-width: 60px; text-align: center; padding: 8px 5px; border-radius: 4px; font-weight: 700; font-size: 16px; }
        .news-date span { display: block; font-size: 10px; font-weight: 500; color: var(--text-gray); text-transform: uppercase; }
        .news-text a { text-decoration: none; font-size: 13px; line-height: 1.5; transition: 0.3s; font-weight: 500; color: var(--text-dark); }
        .news-text a:hover { color: var(--maroon); }

        /* Admissions */
        .admissions-banner { background: linear-gradient(135deg, var(--maroon), var(--navy-blue)); margin: 0 var(--pad-desk) 40px var(--pad-desk); padding: 30px 40px; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; box-shadow: 0 8px 20px rgba(0,0,0,0.15); position: relative; overflow: hidden; border-left: 5px solid var(--gold); }
        .admissions-banner::before { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(255,255,255,0.05); border-radius: 50%; }
        .admissions-content { color: var(--white); position: relative; z-index: 2; flex: 1; min-width: 280px; }
        .admissions-content h2 { font-size: 26px; font-weight: 700; margin-bottom: 5px; color: var(--gold); }
        .admissions-content p { font-size: 14px; opacity: 0.9; margin: 0; }
        .admissions-btn-group { display: flex; flex-wrap: wrap; gap: 15px; position: relative; z-index: 2; }
        .btn-apply { background: var(--gold); color: var(--maroon-dark); padding: 12px 25px; text-decoration: none; font-weight: 700; border-radius: 4px; font-size: 14px; transition: 0.3s; }
        .btn-apply:hover { background: var(--white); color: var(--maroon); }
        .btn-brochure { background: transparent; color: var(--white); border: 1px solid var(--gold); padding: 12px 25px; text-decoration: none; font-weight: 600; border-radius: 4px; font-size: 14px; transition: 0.3s; }
        .btn-brochure:hover { background: var(--gold); color: var(--maroon-dark); }

        /* Alumni */
        .testimonial-section { background-color: var(--bg-light); text-align: center; }
        .testi-slider-container { max-width: 1200px; margin: 0 auto; overflow: hidden; position: relative; padding: 20px 0; }
        .testi-track { display: flex; transition: transform 0.6s ease-in-out; }
        .testi-slide-group { min-width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; padding: 0 10px; }
        .testi-card { background: var(--white); padding: 30px; border-radius: 8px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid #f1f1f1; text-align: left; }
        .testi-author { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; position: relative; z-index: 2; }
        .testi-author img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
        .testi-author-info { text-align: left; }
        .testi-author-info h4 { color: var(--maroon-dark); font-size: 16px; margin-bottom: 2px; font-weight: 700; }
        .testi-author-info p { font-size: 12px; color: var(--text-gray); margin: 0; font-weight: 500; }
        .testi-text { font-style: italic; font-size: 13px; color: var(--text-gray); line-height: 1.6; position: relative; z-index: 2; min-height: 70px; }
        .testi-controls { display: flex; justify-content: center; gap: 8px; margin-top: 35px; }
        .testi-dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; cursor: pointer; transition: 0.3s; }
        .testi-dot.active { background: var(--maroon); width: 25px; border-radius: 5px; }

        /* Quote */
        .quote-banner { background-color: var(--navy-blue); color: var(--white); text-align: center; padding: 20px; font-size: 16px; font-weight: 500; }
        .quote-banner span { color: var(--gold); font-size: 20px; margin: 0 10px; }

        /* Footer */
        footer { background-color: var(--maroon-dark); color: var(--white); }
        .footer-top { padding: 50px var(--pad-desk); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; position: relative; }
        .footer-col h3 { font-size: 16px; margin-bottom: 20px; color: var(--white); }
        .footer-col ul { list-style: none; }
        .footer-col ul li { margin-bottom: 10px; font-size: 12px; display: flex; align-items: flex-start; gap: 10px; color: #ddd; }
        .footer-col ul li a { color: var(--white); text-decoration: none; transition: 0.3s; }
        .social-circles { display: flex; gap: 10px; flex-wrap: wrap; }
        .social-circles a { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: 0.3s; color: var(--white); font-size: 14px; }
        .social-circles a:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
        .social-circles a.fb { background-color: #3b5998; }
        .social-circles a.ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
        .social-circles a.yt { background-color: #ff0000; }
        .social-circles a.wa { background-color: #25d366; }
        .social-circles a.tg { background-color: #0088cc; }
        .footer-watermark { position: absolute; right: 40px; bottom: 20px; opacity: 0.1; width: 150px; }
        .footer-bottom { background-color: var(--gold); color: var(--maroon-dark); display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15px var(--pad-desk); font-size: 12px; font-weight: 500; gap: 10px; text-align: center; }

        /* =========================================
           RESPONSIVE MEDIA QUERIES
           ========================================= */
		   
        @media (max-width: 1024px) {
            :root { --pad-desk: 30px; }
            .college-title h1 { font-size: 22px; }
            .principal-card-premium { flex-direction: column; }
            .principal-img-box { padding: 40px; flex-direction: row; gap: 25px; text-align: left; align-items: center; justify-content: flex-start; border-right: none; border-bottom: 1px solid #eaeaea; }
            .principal-img-box img { margin-bottom: 0; width: 130px; height: 130px; }
            .fac-gal-row { grid-template-columns: 1fr; gap: 50px; }
            .fac-grid { grid-template-columns: repeat(4, 1fr); }
            .gal-group { grid-template-columns: repeat(2, 1fr); }
			.message-card, .message-card.reverse { flex-direction: column; }
            .msg-img-box { padding: 30px; flex-direction: row; gap: 25px; text-align: left; align-items: center; justify-content: flex-start; border-right: none; border-bottom: 1px solid #eaeaea; }
            .message-card.reverse .msg-img-box { border-left: none; }
            .msg-img-box img { margin-bottom: 0; width: 130px; height: 130px; }
            .message-card.reverse .msg-content-box::before { left: auto; right: 40px; content: "\f10e"; }
            
            .career-main-card { flex-direction: column; }
            .counselor-profile-side { flex: none; width: 100%; padding: 40px; }
            .career-details-side { padding: 40px; }
            .career-details-side .section-title, .career-details-side .concise-intro { text-align: center; }
            .career-details-side .title-divider { margin: 0 auto 20px auto; }
            .career-buttons { justify-content: center; }
            
            .fac-gal-row { grid-template-columns: 1fr; gap: 50px; }
            .fac-grid { grid-template-columns: repeat(4, 1fr); }
            .gal-group { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 768px) {
            :root { --pad-desk: 20px; }
            .top-bar { flex-direction: column; text-align: center; gap: 10px; padding: 10px var(--pad-desk); }
            .logo-header { flex-direction: column; height: auto; text-align: center; padding: 25px var(--pad-desk); gap: 20px; }
            .logo-content { flex-direction: column; gap: 15px; }
            .logo-box { width: 90px; }
            .estd-box { width: 100%; margin: 0; padding: 15px 0; border-radius: 8px; flex-direction: row; gap: 15px; }
            .estd-box::before { margin-bottom: 0; }
            .estd-box strong { font-size: 20px; }

            .menu-toggle-btn { display: block; }
            .navbar { padding: 0 var(--pad-desk); }
            .nav-menu { display: none; flex-direction: column; width: 100%; }
            .nav-menu.active { display: flex; }
            .nav-item { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); }
            .nav-link { padding: 15px 0; }
            .dropdown-content { position: static; box-shadow: none; border: none; background: rgba(0,0,0,0.15); min-width: 100%; border-radius: 0; }
            .dropdown-content a { color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.05); padding-left: 30px; }

            .hero-section { height: 350px; }
            .slider-arrow { display: none; }
            .slider-dots { bottom: 25px; }

            .about-stats-row { flex-direction: column; gap: 30px; }
            .stats-col { flex-wrap: wrap; gap: 20px; }
            .stat-box { flex: 1 1 45%; min-width: 45%; }
            .stat-box:not(:last-child)::after { display: none; }
            
            .fac-grid { grid-template-columns: repeat(2, 1fr); }
			
			.career-details-side { padding: 30px 20px; }
            .career-buttons { flex-direction: column; gap: 10px; }
            .career-buttons a { width: 100%; text-align: center; justify-content: center; }
            
            .news-notice-section { grid-template-columns: 1fr; gap: 30px; }
            .admissions-btn-group { width: 100%; justify-content: center; }
            .footer-bottom { justify-content: center; }
        }

        @media (max-width: 600px) {
            .section-header-flex { flex-direction: column; align-items: flex-start; gap: 15px; }
            .gal-group { grid-template-columns: 1fr; }
        }

        @media (max-width: 480px) {
            .college-title h1 { font-size: 18px; }
            .principal-img-box { flex-direction: column; text-align: center; gap: 15px; }
            .principal-img-box img { margin-bottom: 5px; }
            .principal-content-box { padding: 30px 20px; }
            .principal-content-box::before { display: none; }
            .btn-apply, .btn-brochure { width: 100%; text-align: center; justify-content: center; }
            .fac-grid { grid-template-columns: repeat(2, 1fr); }
        }
		
		
		/* =========================================
           CONTACT PAGE SPECIFIC STYLES
           ========================================= */
        .ico-home::before { content: "\f015"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 5px; }
        .ico-chevron-right::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; margin: 0 10px; color: var(--gold); }
        /* Banner */
        .inner-banner {
            background: linear-gradient(rgba(11, 31, 61, 0.85), rgba(11, 31, 61, 0.85)), url('https://via.placeholder.com/1500x400/5c7ba3/ffffff?text=Contact+Us') center/cover;
            padding: 80px var(--pad-desk);
            text-align: center;
            color: var(--white);
            border-bottom: 5px solid var(--gold);
        }
        .inner-banner h1 { font-size: 36px; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
        .breadcrumb { font-size: 14px; font-weight: 500; color: #ddd; }
        .breadcrumb a { color: var(--gold); text-decoration: none; transition: 0.3s; }
        .breadcrumb a:hover { color: var(--white); }

        /* Contact Layout (No Form) */
        .contact-wrap {
            padding: 80px var(--pad-desk);
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .contact-header {
            text-align: center;
            margin-bottom: 50px;
        }
        .contact-header h2 {
            font-size: 32px;
            color: var(--maroon-dark);
            font-weight: 700;
            margin-bottom: 15px;
        }
        .contact-header p {
            font-size: 15px;
            color: var(--text-gray);
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1.8fr;
            gap: 40px;
            align-items: stretch;
        }

        /* Left Side: Information Cards */
        .contact-info-list {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        .info-card {
            background: var(--white);
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            display: flex;
            align-items: flex-start;
            gap: 20px;
            transition: 0.3s;
            border-bottom: 3px solid transparent;
			border-bottom-color: var(--gold);
        }
        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            border-bottom-color: var(--maroon-dark);
        }
        .info-card:hover .ico-map-pin-large::before,
        .info-card:hover .ico-call-large::before,
        .info-card:hover .ico-mail-large::before {
            background: var(--gold);
            color: var(--white);
            border-color: var(--gold);
        }
        .info-text h4 { font-size: 18px; color: var(--navy-blue); margin-bottom: 8px; font-weight: 600; }
        .info-text p { font-size: 14.5px; color: var(--text-gray); line-height: 1.6; margin: 0; }
        .info-text a { color: var(--text-gray); text-decoration: none; transition: 0.3s; }
        .info-text a:hover { color: var(--maroon); }

        /* Right Side: Google Map */
        .map-card {
            background: var(--white);
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            height: 100%;
            min-height: 450px;
            display: flex;
        }
        .map-wrapper {
            width: 100%;
            height: 100%;
            border-radius: 8px;
            overflow: hidden;
            background: #eee;
        }
        .map-wrapper iframe {
            width: 100%;
            height: 100%;
            border: none;
        }


/* =========================================
           GALLERY PAGE SPECIFIC STYLES
           ========================================= */
        
        /* Banner */
        .inner-banner {
            background: linear-gradient(rgba(11, 31, 61, 0.85), rgba(11, 31, 61, 0.85)), url('https://via.placeholder.com/1500x400/5ca373/ffffff?text=Our+Gallery') center/cover;
            padding: 80px var(--pad-desk);
            text-align: center;
            color: var(--white);
            border-bottom: 5px solid var(--gold);
        }
        .inner-banner h1 { font-size: 36px; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
        .breadcrumb { font-size: 14px; font-weight: 500; color: #ddd; }
        .breadcrumb a { color: var(--gold); text-decoration: none; transition: 0.3s; }
        .breadcrumb a:hover { color: var(--white); }

        .section-padding-g { padding: 80px var(--pad-desk); min-height: 700px; }
        .section-header-center { text-align: center; margin-bottom: 40px; }
        .section-title { font-size: 28px; color: var(--maroon); font-weight: 700; margin-bottom: 10px; }
        /* .title-divider { display: flex; align-items: center; justify-content: center; margin: 5px 0 25px 0; }
        .title-divider::before, .title-divider::after { content: ''; width: 80px; height: 1px; background-color: var(--gold); } */
        
        /* Filter Tabs */
        .gallery-filters {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }
        .filter-btn {
            background: var(--white);
            border: 1px solid #ddd;
            padding: 8px 22px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-gray);
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Poppins', sans-serif;
        }
        .filter-btn:hover, .filter-btn.active {
            background: var(--maroon);
            color: var(--white);
            border-color: var(--maroon);
            box-shadow: 0 4px 10px rgba(116, 21, 21, 0.2);
        }

        /* Image Listing Grid */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            background: var(--white);
            transition: all 0.4s ease;
        }
        /* Class used by JS to animate and hide filtered items */
        .gallery-item.hide {
            display: none;
        }
        .gallery-item.show {
            animation: fadeInItem 0.5s ease forwards;
        }

        @keyframes fadeInItem {
            0% { opacity: 0; transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }

        .gallery-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        
        /* Hover Overlay */
        .gallery-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(11, 31, 61, 0.7);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        .gallery-overlay .ico-zoom {
            transform: translateY(20px);
        }
        .gallery-item:hover .gallery-overlay .ico-zoom {
            transform: translateY(0);
        }
        .overlay-text {
            color: var(--white);
            font-size: 16px;
            font-weight: 600;
            margin-top: 10px;
            transform: translateY(20px);
            transition: 0.4s ease;
            opacity: 0;
            text-align: center;
            padding: 0 10px;
        }
        .gallery-item:hover .overlay-text {
            transform: translateY(0);
            opacity: 1;
        }

        /* =========================================
           POPUP LIGHTBOX SLIDER (CSS Only Structure)
           ========================================= */
        .lightbox-modal {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.92);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease-in-out;
        }
        .lightbox-modal.show {
            opacity: 1;
            visibility: visible;
        }
        .lightbox-content {
            position: relative;
            max-width: 90%;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .lightbox-img {
            max-width: 100%;
            max-height: 80vh;
            border-radius: 8px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.5);
            transition: opacity 0.2s ease-in-out;
            border: 4px solid var(--white);
            background: #fff;
        }
        .lightbox-caption {
            color: var(--white);
            margin-top: 15px;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 1px;
            text-align: center;
        }

        /* Lightbox Controls */
        .lb-close, .lb-prev, .lb-next {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            color: var(--white);
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.3s;
            z-index: 10000;
        }
        .lb-close:hover, .lb-prev:hover, .lb-next:hover {
            background: var(--gold);
            color: var(--maroon-dark);
            transform: scale(1.1);
        }
        .lb-close {
            top: 25px;
            right: 35px;
            width: 45px;
            height: 45px;
        }
        .lb-prev {
            left: 35px;
            top: 50%;
            transform: translateY(-50%);
            width: 55px;
            height: 55px;
        }
        .lb-next {
            right: 35px;
            top: 50%;
            transform: translateY(-50%);
            width: 55px;
            height: 55px;
        }
		
		
		/* =========================================
           INNER PAGE about us  SPECIFIC STYLES
           ========================================= */
        
        /* Page Breadcrumb Banner */
        .inner-banner {
            background: linear-gradient(rgba(11, 31, 61, 0.85), rgba(11, 31, 61, 0.85)), url('https://via.placeholder.com/1500x400/a35c5c/ffffff?text=College+Campus') center/cover;
            padding: 80px var(--pad-desk);
            text-align: center;
            color: var(--white);
            border-bottom: 5px solid var(--gold);
        }
        .inner-banner h1 {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .breadcrumb {
            font-size: 14px;
            font-weight: 500;
            color: #ddd;
        }
        .breadcrumb a {
            color: var(--gold);
            text-decoration: none;
            transition: 0.3s;
        }
        .breadcrumb a:hover { color: var(--white); }

        /* Main Page Layout (Sidebar + Content) */
        .page-layout {
            display: flex;
            gap: 40px;
            padding: 60px var(--pad-desk);
            max-width: 1300px;
            margin: 0 auto;
            align-items: flex-start;
        }

        /* Sidebar Navigation */
        .sidebar {
            flex: 0 0 300px;
            background: var(--white);
            border-radius: 8px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            overflow: hidden;
            position: sticky;
            top: 100px;
        }
        .sidebar-title {
            background: var(--maroon);
            color: var(--white);
            padding: 20px;
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            border-bottom: 3px solid var(--gold);
        }
        .tab-btn {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid #f1f1f1;
            padding: 16px 20px;
            text-align: left;
            font-size: 15px;
            font-weight: 500;
            color: var(--text-gray);
            cursor: pointer;
            transition: 0.3s;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .tab-btn::after {
            content: "\f105";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 12px;
            transition: 0.3s;
        }
        .tab-btn:hover {
            color: var(--maroon);
            padding-left: 25px;
        }
        .tab-btn.active {
            background: var(--bg-light);
            color: var(--maroon);
            font-weight: 600;
            border-left: 4px solid var(--maroon);
        }
        .tab-btn.active::after {
            color: var(--gold);
            transform: translateX(5px);
        }

        /* Content Area */
        .content-area {
            flex: 1;
            background: var(--white);
            border-radius: 8px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            padding: 40px;
            min-height: 500px;
        }
        .tab-content {
            display: none;
            animation: fadeInTab 0.5s ease-in-out;
        }
        .tab-content.active {
            display: block;
        }

        @keyframes fadeInTab {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Section Specific Typography & Design */
        .content-title {
            font-size: 26px;
            color: var(--maroon-dark);
            font-weight: 700;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f1f1f1;
            position: relative;
        }
        .content-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 60px;
            height: 2px;
            background: var(--gold);
        }
        .text-body {
            font-size: 15px;
            color: var(--text-gray);
            line-height: 1.8;
            margin-bottom: 20px;
            text-align: justify;
        }

        /* Intro Layout Details */
        .intro-img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .highlight-box {
            background: var(--bg-light);
            border-left: 4px solid var(--gold);
            padding: 20px;
            margin: 25px 0;
            border-radius: 0 4px 4px 0;
        }
        .highlight-box p { margin: 0; font-weight: 500; color: var(--maroon); }

        /* Principal Layout Details */
        .prin-profile-inner {
            display: flex;
            gap: 30px;
            align-items: flex-start;
            margin-bottom: 30px;
        }
        .prin-profile-inner img {
            width: 200px;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            border: 3px solid var(--gold);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .prin-meta h3 { font-size: 22px; color: var(--maroon); margin-bottom: 5px; }
        .prin-meta p { font-size: 14px; color: var(--gold); font-weight: 600; text-transform: uppercase; margin-bottom: 15px; }
        .quote-block {
            position: relative;
            padding: 30px 40px;
            background: var(--bg-light);
            border-radius: 8px;
            font-style: italic;
        }
        .quote-block::before {
            content: "\f10d";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: -15px; left: 20px;
            font-size: 35px; color: rgba(214, 161, 60, 0.4);
        }

        /* Vision & Mission Layout */
        .vm-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 30px;
        }
        .vm-card {
            background: var(--white);
            border: 1px solid #eee;
            padding: 40px 30px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.02);
            transition: 0.3s;
            border-bottom: 4px solid transparent;
        }
        .vm-card:hover { border-bottom-color: var(--maroon); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }
        .vm-card h3 { font-size: 20px; color: var(--navy-blue); margin-bottom: 15px; }
        
        .core-values { margin-top: 40px; }
        .core-values ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .core-values ul li { font-size: 15px; color: var(--text-gray); display: flex; align-items: center; background: var(--bg-light); padding: 12px 20px; border-radius: 4px; }


 /* =========================================
           INNER PAGE SPECIFIC STYLES academic_programs
           ========================================= */
        
        /* =========================================
           INNER PAGE SPECIFIC STYLES
           ========================================= */
        
        /* Page Breadcrumb Banner */
		/* Inner Page Specific Icons */
        .ico-home::before { content: "\f015"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 5px; }
        .ico-chevron-right::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; margin: 0 10px; color: var(--gold); }
        .ico-check::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold); margin-right: 10px; }
		
		/* Program Icons */
        .prog-header-icon::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 45px; color: var(--maroon); display: block; margin-bottom: 15px; }
        .prog-flask::before { content: "\f0c3"; }
        .prog-chart::before { content: "\f201"; }
        .prog-book::before { content: "\f518"; }
        .prog-leaf::before { content: "\f06c"; }
		
        .inner-banner {
            background: linear-gradient(rgba(11, 31, 61, 0.85), rgba(11, 31, 61, 0.85)), url('https://via.placeholder.com/1500x400/5c7ba3/ffffff?text=Academic+Programs') center/cover;
            padding: 80px var(--pad-desk);
            text-align: center;
            color: var(--white);
            border-bottom: 5px solid var(--gold);
        }
        .inner-banner h1 {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .breadcrumb {
            font-size: 14px;
            font-weight: 500;
            color: #ddd;
        }
        .breadcrumb a {
            color: var(--gold);
            text-decoration: none;
            transition: 0.3s;
        }
        .breadcrumb a:hover { color: var(--white); }

        /* Main Page Layout (Sidebar + Content) */
        .page-layout {
            display: flex;
            gap: 40px;
            padding: 60px var(--pad-desk);
            max-width: 1300px;
            margin: 0 auto;
            align-items: flex-start;
        }

        /* Sidebar Navigation */
        .sidebar {
            flex: 0 0 300px;
            background: var(--white);
            border-radius: 8px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            overflow: hidden;
            position: sticky;
            top: 100px;
        }
        .sidebar-title {
            background: var(--maroon);
            color: var(--white);
            padding: 20px;
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            border-bottom: 3px solid var(--gold);
        }
        .tab-btn {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid #f1f1f1;
            padding: 16px 20px;
            text-align: left;
            font-size: 15px;
            font-weight: 500;
            color: var(--text-gray);
            cursor: pointer;
            transition: 0.3s;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .tab-btn::after {
            content: "\f105";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 12px;
            transition: 0.3s;
        }
        .tab-btn:hover {
            color: var(--maroon);
            padding-left: 25px;
        }
        .tab-btn.active {
            background: var(--bg-light);
            color: var(--maroon);
            font-weight: 600;
            border-left: 4px solid var(--maroon);
        }
        .tab-btn.active::after {
            color: var(--gold);
            transform: translateX(5px);
        }

        /* Content Area */
        .content-area {
            flex: 1;
            background: var(--white);
            border-radius: 8px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            padding: 40px;
            min-height: 500px;
        }
        .tab-content {
            display: none;
            animation: fadeInTab 0.5s ease-in-out;
        }
        .tab-content.active {
            display: block;
        }

        @keyframes fadeInTab {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Program Specific Layouts */
        .program-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f1f1f1;
        }
        .program-header h2 {
            font-size: 28px;
            color: var(--maroon-dark);
            font-weight: 700;
            margin-bottom: 5px;
        }
        .program-header p {
            font-size: 14px;
            color: var(--gold);
            font-weight: 600;
            text-transform: uppercase;
        }
        .text-body {
            font-size: 15px;
            color: var(--text-gray);
            line-height: 1.8;
            margin-bottom: 25px;
            text-align: justify;
        }

        .course-details-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        .detail-box {
            background: var(--bg-light);
            padding: 25px;
            border-radius: 8px;
            border-left: 4px solid var(--gold);
        }
        .detail-box.dark {
            background: var(--navy-blue);
            color: var(--white);
            border-left-color: var(--maroon);
        }
        .detail-box h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: var(--maroon);
        }
        .detail-box.dark h3 { color: var(--gold); }
        
        .subject-list {
            list-style: none;
        }
        .subject-list li {
            font-size: 14.5px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            color: var(--text-gray);
        }
        .detail-box.dark .subject-list li { color: #ddd; }
        
        /* NEW: Course Offered Images Gallery */
        .gallery-title {
            font-size: 20px;
            color: var(--navy-blue);
            font-weight: 600;
            margin-top: 40px;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .gallery-title::before {
            content: "\f03e";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: var(--gold);
            margin-right: 10px;
        }
        .course-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .cg-item {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            border: 2px solid var(--white);
        }
        .cg-item img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            transition: transform 0.4s ease;
            display: block;
        }
        .cg-item:hover img {
            transform: scale(1.1);
        }

        /* Apply Button */
        .btn-apply-program {
            background: var(--maroon);
            color: var(--white);
            padding: 12px 30px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            border-radius: 4px;
            display: inline-block;
            margin-top: 10px;
            transition: 0.3s;
            box-shadow: 0 4px 10px rgba(116, 21, 21, 0.2);
        }
        .btn-apply-program:hover {
            background: var(--navy-blue);
            transform: translateY(-2px);
        }
		
		
		/* =========================================
           ADMISSION PAGE SPECIFIC STYLES
           ========================================= */
        
        /* Banner */
        .inner-banner {
            background: linear-gradient(rgba(11, 31, 61, 0.85), rgba(11, 31, 61, 0.85)), url('https://via.placeholder.com/1500x400/5c7ba3/ffffff?text=Admission+Process') center/cover;
            padding: 80px var(--pad-desk);
            text-align: center;
            color: var(--white);
            border-bottom: 5px solid var(--gold);
        }
        .inner-banner h1 { font-size: 36px; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
        .breadcrumb { font-size: 14px; font-weight: 500; color: #ddd; }
        .breadcrumb a { color: var(--gold); text-decoration: none; transition: 0.3s; }
        .breadcrumb a:hover { color: var(--white); }

       /*  .section-padding { padding: 80px var(--pad-desk); } */
        .section-header-center { text-align: center; margin-bottom: 50px; }
        .section-title { font-size: 30px; color: var(--maroon-dark); font-weight: 700; margin-bottom: 10px; }
        .title-divider { display: flex; align-items: center; justify-content: center; margin: 5px 0 25px 0; }
        /* .title-divider::before, .title-divider::after { content: ''; width: 80px; height: 1px; background-color: var(--gold); } */
        .text-intro { font-size: 15px; color: var(--text-gray); line-height: 1.8; text-align: center; max-width: 900px; margin: 0 auto; }

        /* Eligibility Grid */
        .eligibility-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }
        .eligibility-card {
            background: var(--white);
            border: 1px solid #eaeaea;
            border-radius: 8px;
            padding: 40px 30px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.03);
            transition: 0.3s;
            border-bottom: 4px solid transparent;
        }
        .eligibility-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
            border-bottom-color: var(--maroon);
        }
        .eligibility-card h3 { font-size: 22px; color: var(--navy-blue); margin-bottom: 15px; font-weight: 700; }
        .eligibility-card p { font-size: 14px; color: var(--text-gray); line-height: 1.6; }
        .eligibility-card .marks { display: inline-block; background: var(--bg-light); padding: 5px 15px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--maroon); margin-top: 15px; border: 1px solid var(--gold); }

        /* Dates and Documents Layout */
        .dates-docs-row {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 40px;
            margin-bottom: 60px;
        }
        
        /* Important Dates */
        .dates-box {
            background: var(--navy-blue);
            color: var(--white);
            padding: 40px 30px;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(11, 31, 61, 0.2);
        }
        .dates-box::after { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: rgba(255,255,255,0.05); border-radius: 50%; pointer-events: none; }
        .dates-box h3 { font-size: 22px; color: var(--gold); margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
        
        .date-item { display: flex; flex-direction: column; margin-bottom: 20px; }
        .date-item span.event { font-size: 14px; color: #ddd; margin-bottom: 5px; }
        .date-item span.date { font-size: 16px; font-weight: 600; color: var(--white); display: flex; align-items: center; }

        /* Required Documents */
        .docs-box {
            background: var(--white);
            padding: 40px 30px;
            border-radius: 10px;
            border: 1px solid #eaeaea;
            box-shadow: 0 5px 20px rgba(0,0,0,0.04);
        }
        .docs-box h3 { font-size: 22px; color: var(--maroon-dark); margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
        .docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .doc-item { font-size: 14px; color: var(--text-gray); display: flex; align-items: flex-start; line-height: 1.5; background: var(--bg-light); padding: 12px 15px; border-radius: 6px; }

        /* Admission Process Steps */
        .process-container {
            background: var(--bg-light);
            padding: 50px var(--pad-desk);
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }
        .step-wrapper {
            max-width: 1000px;
            margin: 0 auto;
            position: relative;
        }
        .step-wrapper::before {
            content: '';
            position: absolute;
            top: 0; left: 50%; transform: translateX(-50%);
            width: 2px; height: 100%;
            background: var(--gold);
            z-index: 1;
        }
        .step-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }
        .step-row:last-child { margin-bottom: 0; }
        .step-number {
            width: 50px; height: 50px;
            background: var(--maroon);
            color: var(--white);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; font-weight: 700;
            border: 4px solid var(--white);
            box-shadow: 0 0 0 3px var(--gold);
            position: absolute;
            left: 50%; transform: translateX(-50%);
        }
        .step-content {
            width: 45%;
            background: var(--white);
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            border: 1px solid #eee;
        }
        .step-row:nth-child(even) .step-content { margin-left: auto; }
        .step-content h4 { font-size: 18px; color: var(--navy-blue); margin-bottom: 10px; }
        .step-content p { font-size: 14px; color: var(--text-gray); line-height: 1.6; margin: 0; }

        /* Call To Action Banner */
        .cta-admission {
            margin: 60px var(--pad-desk) 0 var(--pad-desk);
            background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
            border-radius: 12px;
            padding: 40px;
            text-align: center;
            color: var(--white);
            box-shadow: 0 10px 30px rgba(99, 16, 16, 0.3);
            border-bottom: 6px solid var(--gold);
        }
        .cta-admission h2 { font-size: 28px; margin-bottom: 15px; }
        .cta-admission p { font-size: 15px; margin-bottom: 25px; opacity: 0.9; }
        .cta-btn-group { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
        
        .btn-solid { background: var(--gold); color: var(--maroon-dark); padding: 14px 30px; font-size: 15px; font-weight: 700; border-radius: 6px; text-decoration: none; transition: 0.3s; box-shadow: 0 5px 15px rgba(214, 161, 60, 0.3); }
        .btn-solid:hover { background: var(--white); color: var(--maroon); transform: translateY(-3px); }
        
        .btn-bordered { background: transparent; color: var(--white); border: 2px solid var(--gold); padding: 12px 30px; font-size: 15px; font-weight: 600; border-radius: 6px; text-decoration: none; transition: 0.3s; }
        .btn-bordered:hover { background: var(--gold); color: var(--maroon-dark); }
		/* Admission Specific Icons */
        .ico-grad-cap::before { content: "\f19d"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 40px; color: var(--maroon); display: block; margin-bottom: 15px; }
        .ico-calendar::before { content: "\f133"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold); margin-right: 12px; font-size: 18px; }
        .ico-doc-req::before { content: "\f15c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--maroon); margin-right: 12px; font-size: 16px; }
        .ico-check-circle::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold); margin-right: 10px; }
        .ico-download::before { content: "\f019"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 8px; }
        .ico-arrow-right::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: 8px; }

.ico-home::before { content: "\f015"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 5px; }
        .ico-chevron-right::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; margin: 0 10px; color: var(--gold); }
        .ico-gem::before { content: "\f3a5"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; color: var(--gold); margin: 0 10px; }

        /* Gallery Zoom/Popup Icons */
        .ico-zoom::before { content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--white); font-size: 30px; transition: 0.3s ease; }
        .lb-close::before { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 24px; }
        .lb-prev::before { content: "\f053"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 24px; }
        .lb-next::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 24px; }



/* =========================================
           INNER PAGE CSS (CAREER COUNSELING)
           ========================================= */
        
        .inner-banner {
            background: linear-gradient(rgba(11, 31, 61, 0.85), rgba(11, 31, 61, 0.85)), url('../img/cc.jpg') center/cover;
            padding: 80px var(--pad-desk);
            text-align: center;
            color: var(--white);
            border-bottom: 5px solid var(--gold);
        }
        .inner-banner h1 { font-size: 36px; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
        .breadcrumb { font-size: 14px; font-weight: 500; color: #ddd; }
        .breadcrumb a { color: var(--gold); text-decoration: none; transition: 0.3s; }
        .breadcrumb a:hover { color: var(--white); }

        .section-padding { padding: 80px var(--pad-desk); }
        .section-header-center { text-align: center; margin-bottom: 40px; }
        .section-title { font-size: 32px; color: var(--maroon-dark); font-weight: 700; margin-bottom: 10px; }
        .title-divider { display: flex; align-items: center; justify-content: center; margin: 5px 0 25px 0; }
        .title-divider::before, .title-divider::after { content: ''; width: 80px; height: 1px; background-color: var(--gold); }
        
        /* 1. Intro Section Layout */
        .intro-flex { display: flex; gap: 50px; align-items: center; max-width: 1200px; margin: 0 auto; }
        .intro-content { flex: 1.2; }
        .intro-content p { font-size: 15px; color: var(--text-gray); line-height: 1.8; margin-bottom: 20px; text-align: justify; }
        .intro-img-box { flex: 1; position: relative; }
        .intro-img-box img { width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 4px solid var(--white); }
        .intro-img-box::before { content: ''; position: absolute; top: -2px; right: -2px; width: 100%; height: 100%; border: 2px dashed var(--gold); border-radius: 10px; z-index: -1; }

        /* 2. Services Grid */
        .services-section { background: var(--navy-blue); color: var(--white); padding: 80px var(--pad-desk); text-align: center; }
        .services-section .section-title { color: var(--white); }
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; margin-top: 40px; }
        .service-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 40px 25px; border-radius: 10px; transition: 0.3s; }
        .service-card:hover { background: var(--maroon); border-color: var(--maroon); transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
        .service-card h3 { font-size: 18px; margin-bottom: 10px; font-weight: 600; color: var(--white); }
        .service-card p { font-size: 13.5px; color: #ddd; line-height: 1.6; margin: 0; }

        /* 3. PLACED STUDENTS GRID */
        .placed-students-section { background: var(--bg-light); padding: 80px var(--pad-desk); }
        .placed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
        
        .student-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.06); text-align: center; border-bottom: 5px solid var(--maroon); transition: all 0.3s ease; position: relative; }
        .student-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.12); border-bottom-color: var(--gold); }
        
        .student-img-wrapper { position: relative; width: 100%; height: 260px; overflow: hidden; }
        .student-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
        .student-card:hover .student-img-wrapper img { transform: scale(1.08); }
        
        .student-info { padding: 25px 20px; position: relative; }
        .student-info h3 { font-size: 20px; color: var(--navy-blue); font-weight: 700; margin-bottom: 5px; }
        .course-name { font-size: 13px; color: var(--text-gray); font-weight: 500; margin-bottom: 15px; display: block; }
        
        .company-badge { background: var(--gold); color: var(--maroon-dark); padding: 8px 20px; border-radius: 30px; font-size: 13px; font-weight: 700; display: inline-block; box-shadow: 0 4px 10px rgba(214, 161, 60, 0.3); text-transform: uppercase; letter-spacing: 0.5px; }

        /* 4. Top Recruiters Marquee Layout */
        .recruiters-section { padding: 60px var(--pad-desk); text-align: center; border-top: 1px solid #eaeaea; background: var(--white); }
        .recruiters-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; align-items: center; max-width: 1000px; margin: 0 auto; opacity: 0.6; }
        .recruiters-grid img { height: 40px; filter: grayscale(100%); transition: 0.3s; }
        .recruiters-grid img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.1); }

        /* Buttons */
        .btn-maroon { background: var(--maroon); color: var(--white); padding: 12px 30px; font-size: 15px; font-weight: 600; border-radius: 5px; text-decoration: none; display: inline-block; transition: 0.3s; box-shadow: 0 4px 15px rgba(116, 21, 21, 0.2); }
        .btn-maroon:hover { background: var(--navy-blue); transform: translateY(-2px); }


        .ico-rupee::before { content: "\f156"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: inherit; margin-right: 3px; }
        .ico-arrow-right::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: 8px; }
		.page-layout { padding: 60px var(--pad-desk); }
        
        /* DOCUMENT STYLE CONTAINER */
        .fee-document-container {
            background-color: var(--white);
            width: 1000px;
            margin: 0 auto;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            border: 1px solid #eaeaea;
            overflow: hidden;
            border-top: 6px solid var(--maroon);
        }

        /* EXACT HEADER FROM IMAGE */
        .document-header {
            text-align: center;
            padding: 40px 30px 30px 30px;
            border-bottom: 2px solid #eee;
            background-color: #fafafa;
        }
        .hindi-college-name {
            font-family: 'Tiro Devanagari Hindi', serif;
            font-size: 32px;
            color: var(--maroon-dark);
            font-weight: 600;
            margin-bottom: 5px;
            line-height: 1.3;
        }
        .hindi-address {
            font-family: 'Tiro Devanagari Hindi', serif;
            font-size: 18px;
            color: var(--text-gray);
            margin-bottom: 20px;
        }
        .session-text {
            font-size: 18px;
            font-weight: 500;
            color: var(--navy-blue);
            margin-bottom: 20px;
        }
        .fees-heading {
            font-size: 22px;
            font-weight: 700;
            color: var(--maroon);
            text-transform: uppercase;
            letter-spacing: 1px;
            text-decoration: underline;
            text-underline-offset: 5px;
        }

        /* SINGLE TABLE DESIGN */
        .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 20px 30px; }
        .fee-table { width: 100%; border-collapse: collapse; text-align: left; min-width: 700px; border: 1px solid #ddd; }
        .fee-table th, .fee-table td { padding: 15px 20px; border: 1px solid #ddd; font-size: 14.5px; }
        .fee-table th { background-color: var(--maroon); color: var(--white); font-weight: 600; text-transform: uppercase; font-size: 15px; }
        
        .sno-col { width: 60px; text-align: center; font-weight: 600; color: var(--text-gray); }
        .prog-name { font-weight: 500; color: var(--navy-blue); }
        .fee-cell { color: var(--maroon-dark); font-weight: 600; }
        .practical-cell { color: var(--text-gray); font-size: 13.5px; }
        
        .fee-table tbody tr:hover { background-color: rgba(214, 161, 60, 0.05); }

        /* DOCUMENT NOTE */
        .document-note {
            padding: 20px 30px 40px 30px;
            font-size: 14.5px;
            color: var(--text-dark);
            line-height: 1.6;
        }
        .document-note strong { color: var(--maroon-dark); }

        /* Apply Now CTA */
        .apply-now-wrapper { text-align: center; margin-top: 40px; }
        .btn-apply { display: inline-flex; align-items: center; justify-content: center; background: var(--maroon); color: var(--white); padding: 15px 35px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 16px; transition: 0.3s; box-shadow: 0 5px 15px rgba(116, 21, 21, 0.2); }
        .btn-apply:hover { background: var(--navy-blue); transform: translateY(-3px); }