/* General Styles */
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f5f5f5;
        color: #333;
    }

    .card-text  { 
        text-align: justify !important; }
    
    
    /* Navbar */
    .navbar {
            background: linear-gradient(45deg, #007bff, #00c6ff);
        }
        .navbar .navbar-brand {
                font-weight: bold;
                /* color: #fff; */
                display: flex;
                align-items: center;
            }
    
            .head-name{
            font-size: 1.7rem;
            color: yellow;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, .8);
        }
    
    
        .navbar .navbar-brand img {
                height: 40px; /* Adjust the height as needed */
                margin-right: 10px;
            }
    
        .navbar-nav .nav-link {
            color: #fff;
        }
        .navbar-nav .nav-link:hover, .navbar-nav .nav-item:hover .dropdown-menu {
            color: #ffd700;
        }
        .dropdown-menu {
            background-color: #007bff;
            border: none;
        }
        .dropdown-menu .dropdown-item {
            color: #fff;
        }
        .dropdown-menu .dropdown-item:hover {
            background-color: #ffd700;
            color: #333;
        }
     /* Dropdown menu on hover */
     .navbar-nav .nav-item:hover .dropdown-menu {
                display: block;
            }
            .navbar-nav .dropdown-menu {
                margin-top: 0; /* Ensure it aligns nicely with the navbar */
            }
    
            @media only screen and (max-width: 800px) {
                    .head-name{
            font-size: 1rem;
            color: yellow;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, .8);
        }

        a #inst_name {
            display: none;
        }

            }
    
    
    
    
    
    
    
            .card {
                background-color: #f8f9fa;
                border-radius: 15px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            .card-header {
                background-color: #007bff;
                color: white;
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
                padding: 10px;
            }
            .card-body {
                padding: 20px;
            }
            .principal-image {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                border-bottom-left-radius: 15px;
            }
            .principal-image:hover {
                transform: scale(1.05);
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
                border: 3px solid #007bff;
            }
            .signature {
                max-width: 150px;
                margin-top: 10px;
            }
            .principal-info {
                margin-top: 20px;
                font-style: italic;
            }