/* Footer area with logo, socials, and student info */
footer {
    text-align: center;
    background-image: linear-gradient(180deg, #09203A, #162B4F);
    color: #e7edf3;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
        color: #e7edf3;
    }

    /* Left column containing Logo + Social Icons */
    div.logo {
        display: flex;
        flex-direction: column;
        align-items: center;

        .main-logo {
            max-width: 220px; /* Adjust size of main logo as needed */
            height: auto;
        }

        /* Social Icons Row */
        /* Social Icons Row */
        .socials {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;          /* Spacing between social icons */

            a {
                display: flex;
                align-items: center;
                justify-content: center;
                
                /* 1. Create a perfect circle */
                width: 1.6rem;                  /* Circle width */
                height: 1.6rem;                 /* Circle height */
                border: 2px solid #ffffff;    /* White border */
                border-radius: 50%;             /* Makes the box round */
                
                transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

                &:hover {
                    background-color: rgba(255, 255, 255, 0.15); /* Subtle white glow on hover */
                    transform: translateY(-2px);                 /* Slight lift on hover */
                }

                /* 2. Sizing the inner icon inside the circle */
                img {
                    width: 4rem;   /* Inner icon width */
                    height: auto;     /* Maintain aspect ratio */
                    object-fit: contain;
                }
            }
        }
    }

    /* Right column with project details */
    div.extraInfo {
        font-size: 0.7rem;
        text-align: center;
        
        h4 {
            margin: 0.4rem 0 0.2rem 0;
        }

        p {
            margin: 0.15rem 0;
        }
    }
}