.sidebar {
    width: 20%;
    height: 100%;
    position: fixed;
    transition: all 0.1s ease-in-out;
    overflow-x: hidden;
}

.contact-section a {
    color: var(--bs-card-color);
}

.contact-section i {
    font-size: 1.1rem;
}

ul.nav.flex-column.w-100 {
    --bs-nav-link-hover-color: unset;
}

@media (max-height: 650px) {

    .sidebar {
        height: 70%;
        overflow-y: auto;
    }
}

@media (max-width: 768px) {

    .contact-section {
        display: none;
    }

    .sidebar {
        width: 100%;
        height: 100%;
        position: sticky;
        overflow: hidden;
    }

    .logo-circle {
        width: 80px;
        height: 80px;
    }
}

@media (min-width: 768px) {

    .logo-circle {
        width: 150px;
        height: 150px;
    }
}

.logo-circle {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background-color: inherit;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.logo {
    width: 80%;
    height: 80%;
    content: url('../images/Racer Logo(B).svg');
}

[data-bs-theme="dark"] .logo {
    content: url('../images/Racer Logo(W).svg');
}


.logo-circle:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.35);
}