/* Default styles for larger screens */
.sidebar {
    width: 90%;
    padding: 1em;
    margin-top: 5px;
}

.sidebar .img {
    display: flex;
    justify-content: center;
    padding: 1em;
    background-color: #99cdff;
    width: auto;
    border-radius: 20px;
}

.sidebar img {
    height: 150px;
    width: 150px;
}

.links h4 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.links li {
    text-decoration: none;
    list-style: none;
    padding: 5px;
}

.links a {
    display: block; /* Ensure the link occupies full width */
    padding: 0.5em; /* Define padding around the clickable area */
    margin: 0.5em 0; /* Margin between links */
    text-decoration: none; /* Remove underline */
    color: #000; /* Set text color */
    background-color: #f0f0f0; /* Optional background for clarity */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.links a:hover {
    background-color: #dcdcdc; /* Change background on hover */
    color: #000; /* Ensure text remains readable */
}

/* Bottom Sidebar */
.links2 h4 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 0.5em;
    margin-top: 0.1em;
}

.links2 li {
    list-style: none;
    padding: 5px;
}

.links2 a {
    display: block;
    text-decoration: none;
    padding: 0.5em 0;
    margin: 0.5em 0;
    color: #005e86; /* Link color */
    background-color: #f0f0f0; /* Background color */
    transition: all 0.3s ease; /* Smooth transition */
}

.links2 a:hover {
    background-color: #dcdcdc; /* Change background on hover */
    color: #0025c9; /* Change text color on hover */
    padding-left: 1em; /* Optional: Add a sliding effect */
}

/* Responsive styles for tablet screens */
@media (max-width: 1024px) {
    .sidebar {
        width: 100%; /* Full width for medium screens */
    }

    .links h4 {
        font-size: 1.8rem; /* Reduce font size slightly */
    }

    .links2 h4 {
        font-size: 1.3rem; /* Adjust bottom sidebar title size */
    }
}

/* Responsive styles for mobile screens */
@media (max-width: 768px) {
    .sidebar {
        width: 100%; /* Full width for smaller screens */
        padding: 1em;
    }

    .sidebar .img {
        justify-content: center;
        padding: 0.5em; /* Reduce padding for mobile */
    }

    .sidebar img {
        height: 130px;
        width: 130px; /* Smaller image size for mobile */
    }

    .links h4 {
        font-size: 1.5rem; /* Reduce heading size for mobile */
    }

    .links li {
        padding: 3px; /* Less padding for list items */
    }

    .links a {
        padding: 2em 0; /* Adjust link padding for mobile */
        margin: 2em 0;
    }

    .links2 h4 {
        font-size: 1.2rem; /* Reduce font size for mobile in bottom sidebar */
    }

    .links2 li, .links2 a {
        padding: 3px; /* Adjust padding for mobile */
    }
}

/* Responsive styles for very small screens */
@media (max-width: 480px) {
    .sidebar {
        padding: 0.5em;
    }

    .sidebar img {
        height: 120px; /* Reduce image size further for small screens */
        width: 120px;
    }

    .links h4 {
        font-size: 1.2rem; /* Smaller heading for very small screens */
    }

    .links a {
        margin: 1em 0; /* Reduce margin for very small screens */
    }

    .links li {
        padding: 2px;
    }

    .links2 h4 {
        font-size: 1rem; /* Smaller font for bottom sidebar */
    }

    .links2 li, .links2 a {
        padding: 2px; /* Tighter padding on very small screens */
    }
}