:root {
    --icon-fill-light: #212529; /* Light mode color */
    --icon-fill-dark: #f8f9fa;  /* Dark mode color */
}

[data-bs-theme="light"] svg use {
    fill: var(--icon-fill-light);
}

[data-bs-theme="dark"] svg use {
    fill: var(--icon-fill-dark);
}

.square-tab {
    display: inline-block;
    width: 100px;
    height: 100px;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
    background-color: #e9ecef; /* Lighter grey for light mode */
    color: #212529; /* Light black text for light mode */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.square-tab div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.square-tab i {
    font-size: 24px;
    margin-bottom: 5px;
    color: #0D6DFE; /* Social media icon color */
}

.square-tab:hover {
    background-color: #ced4da; /* Slightly darker grey on hover for light mode */
}

[data-bs-theme="dark"] .square-tab {
    background-color: #343a40; /* Darker grey for dark mode */
    color: #f8f9fa; /* Light grey text for dark mode */
}

[data-bs-theme="dark"] .square-tab:hover {
    background-color: #495057; /* Slightly darker grey on hover for dark mode */
}

[data-bs-theme="dark"] .square-tab i {
    color: #0D6DFE; /* Social media icon color remains the same */
}

[data-bs-theme="light"] .square-tab {
    background-color: #e9ecef; /* Lighter grey for light mode */
    color: #212529; /* Light black text for light mode */
}

[data-bs-theme="light"] .square-tab:hover {
    background-color: #ced4da; /* Slightly darker grey on hover for light mode */
}

[data-bs-theme="light"] .square-tab i {
    color: #0D6DFE; /* Social media icon color remains the same */
}