.header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--primary-color);
    position: sticky;
    top: 0px;
    z-index: 1;
}

.topbar {
    display: flex;
    justify-content: space-around;
    background-color: var(--primary-color);
    padding: 1rem;
    border-bottom: 1px solid var(--border-rgba-color);
}

.topbar a,
address {
    font-size: var(--top-link-font-size);

}

address {
    color: var(--text-fade-color);
}

.topbar i {
    padding-left: 10px;
    padding-right: 10px;
}

/* responsiveness topbar */
@media (max-width:450px) {
    .header {
        flex-direction: column;
    }

    .topbar {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .left {
        flex-direction: column;
    }

    .navbar {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }
}

.address,
.email,
.phone {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
}

.left {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: var(--spacing-sm);
}

.right {
    display: flex;
    justify-content: space-evenly;
    gap: var(--spacing-sm);
}

.navbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: var(--spacing-sm);
}

.logo-container {
    max-width: 10%;
}
.logo-container > img{
     width: 50%;
}

.logo {
    width: 50%;
    /* border: 2px solid orange; */
}

.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.nav-links li {
    list-style-type: none;
}

.nav-links li a {
    font-size: var(--top-link-font-size);
}

.support {
    background-color: var(--btn-color);
    border-radius: 6px;
    padding: 0.6rem 1.8rem;
}

.support a {
    color: #000;
    gap: 0.5rem;
    display: flex;
    font-size: 1rem;
}

.support i {
    font-size: 1.3rem;
}

@media (max-width: 700px) {

    .topbar {
        display: none;
    }

    .support {
        display: none;
    }

    .navbar {
        gap: 1rem;
    }

    .logo-container {
        max-width: 30%;
    }

    .logo {
        width: 100%;
        /* border: 2px solid orange; */
    }

}