/* Vice Chancellor's Message Section */
.vc-message-section {
    background-color: #f8f9fa; /* Light background for the section */
    padding: 60px 0; /* Vertical padding */
}

    /* Specific adjustment for the container within this section */
    .vc-message-section .container {
        /* Set both margins to auto to keep the container centered */
        margin-left: auto !important;
        margin-right: auto !important;
        /* Increased the overall max-width of the container to make it wider.
        I've set it to 1200px, which is wider than Bootstrap's default
        for 'xl' (1140px) and close to 'xxl' (1320px).
        Adjust this value further if you need an even wider container. */
        max-width: 1500px !important; /* Increased value */
        width: 100%; /* Ensure it's responsive and takes full width up to max-width */
    }


.vc-card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.vc-img {
    width: 100%;
    height: 250px; /* Fixed height for the image */
    object-fit: cover; /* Ensures image covers the area without distortion */
    border-bottom: 3px solid #BF2600; /* Red line under the image */
}

.vc-title {
    color: #BF2600; /* Maroon color for the title */
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 0;
}

.vc-welcome-heading {
    color: #800000; /* Darker maroon for main heading */
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    text-align: center; /* Centered text */
}

    .vc-welcome-heading::after {
        content: '';
        position: absolute;
        left: 50%; /* Center the underline */
        transform: translateX(-50%); /* Adjust to truly center */
        bottom: 0;
        width: 60px; /* Underline width */
        height: 3px;
        background-color: #BF2600; /* Red underline */
    }

.vc-welcome-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
}

.quick-links-heading {
    color: #800000; /* Darker maroon for quick links heading */
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

    .quick-links-heading::after {
        content: '';
        position: absolute;
        left: 0; /* Align underline to the left */
        right: unset; /* Ensure right is unset */
        transform: none; /* No transform needed for left alignment */
        bottom: 0;
        width: 60px; /* Underline width */
        height: 3px;
        background-color: #BF2600; /* Red underline */
    }

.quick-links-list {
    padding-left: 0; /* Remove default list padding */
}

    .quick-links-list li {
        margin-bottom: 10px;
        border-bottom: 1px solid #8000003c; /* Add horizontal line */
        padding-bottom: 5px; /* Space below the line */
    }

        .quick-links-list li:last-child {
            border-bottom: none; /* Remove border from the last item */
            padding-bottom: 0; /* Remove padding for the last item */
        }

        .quick-links-list li a {
            color: #555; /* Default link color */
            text-decoration: none;
            font-size: 1.05rem;
            transition: color 0.3s ease, padding-left 0.3s ease; /* Transition padding-left */
        }

            .quick-links-list li a:hover {
                color: #BF2600; /* Red on hover */
                padding-left: 5px; /* Slight indent from the left on hover */
                padding-right: 0; /* Ensure no right padding interference */
            }

/* Style for Quick Links Column with border and reset padding */
.quick-links-column {
    border-left: 1px solid #8000003c; /* Left border */
    border-right: none; /* Ensure no right border */
    padding-left: 20px !important; /* Spacing after the border */
    padding-right: 0 !important; /* Remove any default right padding */
    text-align: left; /* Align text content to the left */
}


/* Responsive adjustments for Vice Chancellor's Message Section */
@media (max-width: 767.98px) {
    .vc-message-section {
        padding: 40px 0;
    }

    .vc-welcome-heading {
        text-align: center; /* Center headings on small screens */
    }

        .vc-welcome-heading::after {
            left: 50%; /* Re-center underline for small screens */
            right: unset; /* Remove right property */
            transform: translateX(-50%);
        }

    .vc-card {
        margin-bottom: 30px; /* Add space below card on small screens */
    }

    .quick-links-heading,
    .quick-links-list {
        text-align: center; /* Keep centered on small screens */
    }

        .quick-links-heading::after {
            left: 50%; /* Re-center underline for small screens */
            right: unset; /* Remove right property */
            transform: translateX(-50%);
        }

    .quick-links-column {
        border-left: none; /* Remove left border on small screens */
        border-right: none; /* Ensure no right border */
        padding-left: 15px !important; /* Adjust default column padding for small screens */
        padding-right: 15px !important; /* Ensure right padding is also default */
        text-align: center; /* Center content on small screens */
    }

    .quick-links-list li a:hover {
        padding-left: 5px; /* Revert hover padding for small screens */
        padding-right: 0;
    }
}