/* Global Var */
    :root {
        --msu-maroon: #800000;
        --accent-gold: #c5a017;
        --accent-blue: #3498db;
        --text-dark: #2c3e50;
        --bg-light: #f8f9fa;
        --msu-blue: #2878EB;

/* BODY */
    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        color: #333;
        background: #f5f5f5;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 20px;
    }

/* GENERAL STYLE */  
    .section-heading {
        font-size: 2rem;
        margin: 0 0 20px 0;
        font-weight: 800;
        position: relative;
        display: flex;
        align-items: center;
        color: var(--msu-blue);
    }

    .section-heading::after {
        content: '';
        flex: 1;
        height: 2px;
        background: var(--msu-blue);
        margin-left: 20px;
        margin-right: -15px;
    }

    /*Hero Academia*/
    .hero-section {
        position: relative;
        width: 100%;
        /* height: 400px; /* adjust lang the height here */
        height: 80vh;  /* 60% of viewport height, adjust2 lang if you like */
        overflow: hidden;
    }

    .hero-section img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* makes image fill without distortion */
        display: block;
    }

    .bg-img {
      background: linear-gradient(rgba(40, 120, 235, 0.05), rgba(40, 120, 235, 0.05)), url(/pages/academics/img/bg-image.jpg);
      background-attachment: fixed;
    }


/* Directory Table and Side Bar*/
    .directory-controls {
        background: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #ccc;
        /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); */
    }

    .directory-table thead {
        background-color: #e9e3d3;
        font-weight: 600;
    }

    .directory-table tbody td{
        font-size: 0.90rem;
    }

    .directory-table td,
    .directory-table th {
        padding: 6px 10px; /* compact vertical space */
    }

    .directory-sidebar {
        background: #f8f9fa;
        border-radius: 10px;
    }

    .directory-sidebar ul {
        list-style: none;
        padding: 0;
    }

    .directory-sidebar li {
        margin-bottom: 10px;
    }

    .directory-sidebar a {
        text-decoration: none;
        color: #b22222;
        font-weight: 500;
    }

    .directory-sidebar a:hover {
        text-decoration: underline;
    }

    .alphabet-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;          /* slightly tighter spacing */
        margin-bottom: 15px;
    }

    .alphabet-filter button {
        border: 1px solid #ccc;
        background: white;
        padding: 2.5px 6px;  /* smaller padding */
        font-size: 12px;   /* smaller text */
        cursor: pointer;
        border-radius: 3px;
        min-width: 27px;   /* smaller width */
        line-height: 1.2;
        /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); */
    }

    .alphabet-filter button:hover {
        background: #2878EB;
        color: white;
    }

    /* Faculty Profile*/
    #facultyTable tbody tr {
        cursor: pointer;
    }
    #facultyTable tbody tr:hover {
        background-color: #f0f8ff;
    }

    /* Hover effect on table rows */
    #facultyTable tbody tr:hover {
        background-color: lightgray; /* light blue */
        cursor: pointer;
    }

    /* Selected row highlight */
    #facultyTable tbody tr.selected {
        background-color: #c5e0ff; /* slightly darker blue */
    }

    .faculty-profile {
        display: block;
        background: #fff;
        border: 1px solid #ccc;
        font-size: 0.85rem;
    }

    /* Optional: profile image styling */
    .faculty-profile img {
        width: 100%;
        padding: 30px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

/*Top border box nga naa shadow2*/ 
    .boxcont-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
    }

    .box-widget {
        background: #fff;
        border-radius: 12px;
        padding: 35px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        position: relative;
        border: 1px solid #eee;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Link at bottom */
        .box-widget .download-link {
            margin-top: auto;
        }

    /* Select Thor */
        .box-widget:nth-child(1) { border-top: 5px solid var(--msu-maroon); }
        .box-widget:nth-child(2) { border-top: 5px solid var(--accent-gold); }

    .box-widget:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

    /* Box widget content style */
        .bxwdge-icon {
            font-size: 2.5rem;
            margin-bottom: 20px;
            background: var(--bg-light);
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: var(--msu-maroon);
        }

        .bxwdge-title {
            font-size: 1.5rem;
            font-weight: 800;
            margin-bottom: 20px;
            color: var(--msu-maroon);
        }

        .bxwdge-title::after {
            content: '';
            flex: 1;
            height: 2px;
            background: var(--msu-maroon);
            margin-left: 20px;
        }

        .bxwdge-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .bxwdge-list li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
            font-size: 0.95rem;
        }

        .bxwdge-list li::before {
            content: '\f00c'; /* Check icon */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            color: var(--accent-blue);
            position: absolute;
            left: 0;
            font-size: 0.8rem;
            top: 4px;
        }


/* Side Bar Menu, pero walay beer*/  
    .sidebar-widget {
        background: #fff;
        padding: 30px;
        margin-bottom: 30px;
        border-top: 4px solid var(--msu-blue);
    }

    
    .widget-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--msu-blue);
        margin-bottom: 20px;
        border-bottom: 5px solid #f8f9fa;
        padding-bottom: 10px;
    }

    .download-link {
        display: flex;
        align-items: center;
        padding: 12px;
        background: #f8f9fa;
        color: #444;
        text-decoration: none;
        border-radius: 6px;
        margin-bottom: 10px;
        transition: all 0.2s;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .download-link:hover {
        background: var(--msu-blue);
        color: #fff;
    }

    .download-link i {
        margin-right: 12px;
        font-size: 1.1rem;
        color: var(--accent-gold);
    }
        
    .download-link:hover i {
        color: #fff; 
    }

    .sidebar-img {
        width: 100%;
        height: auto;
        display: block;
        padding: 2px;
    }


    .sidepan-head h6::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        border-top: 2px dashed yellow;
    }

    .sidepan-sec-text {
        color: yellow;
        margin-top: 20px;
    }



/* CUSTOM BORDER */   
    .brdr-rnd-1 {
        border-radius: 0.5rem !important;
    }

    .brdr-rnd-2 {
        border-radius: 1rem !important;
    }

    .brdr-rnd-3 {
        border-radius: 1.5rem !important;
    }

    .brdr-rnd-4 {
        border-radius: 2rem !important;
    }

    .brdr-rnd-5 {
        border-radius: 2.5rem !important;
    }

    .brdr-rnd-6 {
        border-radius: 3rem !important;
    }


    .drop-shadow {
         box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    }