/* Navigation Enhancements CSS */

/* Make page titles in nav bar larger and reduce spacing */
.sidenav .nav-links a {
    font-size: 22px; /* Increased font size for page titles */
    margin: 8px 0; /* Reduced spacing between nav items */
    letter-spacing: 0.5px; /* Slightly tighter letter spacing */
}

/* Make social media logos circular and bigger in sidebar */
.sidenav-social-item .social-logo {
    width: 36px !important; /* Increased size */
    height: 36px !important; /* Keep it square */
    border-radius: 50% !important; /* Make circular */
    background-color: transparent !important; /* Remove white background */
    padding: 0 !important; /* No padding */
    transition: transform 0.2s ease !important; /* Smooth hover effect */
    display: block !important; /* Ensure proper display */
    object-fit: contain !important; /* Keep logo properly sized within circle */
    border: 1px solid #ffffff !important; /* Add thin white border instead */
    box-sizing: border-box !important; /* Ensure border is included in size */
}

/* Hover effect for sidebar social logos */
.sidenav-social-item .social-logo:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Also update the footer social logos for consistency */
.social-item .social-logo {
    width: 36px !important; /* Match size with sidebar logos */
    height: 36px !important;
    border-radius: 50% !important;
    background-color: transparent !important; /* Remove white background */
    padding: 0 !important; /* No padding */
    transition: transform 0.2s ease !important;
    display: block !important;
    object-fit: contain !important;
    border: 1px solid #ffffff !important; /* Add thin white border instead */
    box-sizing: border-box !important; /* Ensure border is included in size */
}

/* Hover effect for footer social logos */
.social-item .social-logo:hover {
    transform: scale(1.1);
}

/* Override for social-icon to remove any background or styling that creates boxes */
.sidenav-social .social-icon,
.footer-social .social-icon {
    background: transparent !important; 
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Adjust social icons container spacing if needed */
.sidenav-social {
    display: flex;
    gap: 12px; /* Proper spacing between social icons */
    margin-top: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allow wrapping if needed */
    justify-content: flex-start;
}