.header {
    display: flex;
    flex-direction: column;
}

.header-top, .header-middle, .header-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
}

.header .dropdown {
    position: relative;
    display: inline-block;
}

.header .dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.header .dropdown:hover .dropdown-menu {
    display: block;
}

.header .dropdown-menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

    .header .dropdown-menu a:hover {
        background-color: #f1f1f1;
    }

.cart-dropdown {
    position: relative;
}

    .cart-dropdown .dropdown-box {
        opacity: 1;
        transition: all 0.1s ease-in-out;
        top: 0;
        position: absolute;
        right: 0;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        min-width: 200px;
        border-radius: 5px;
        overflow: hidden;
        padding: 10px 0;
    }

        .cart-dropdown .cart-toggle:hover + .dropdown-box,
        .cart-dropdown .dropdown-box:hover {
            display: block;
        }

    .cart-dropdown .cart-toggle {
        display: flex;
        align-items: center;
        color: #333;
        text-decoration: none;
    }

        .cart-dropdown .cart-toggle i {
            margin-right: 5px;
        }

    .cart-dropdown .dropdown-box a {
        
        padding: 10px 20px;
        color: #333;
        text-decoration: none;
    }

        .cart-dropdown .dropdown-box a:hover {
            background-color: #f5f5f5;
        }

.dropdown-box.show {
    display: block !important;
}