:root {
    --white-color: #ffffff;
    --black-color: #000000;
    --dark-blue: #131921;
    --muted-dark-blue: #222e3d;
    --light-gray: #e3e6e6;
    --steel-gray: #364659;
    --cerebral-grey: #ccc;
    --animation: all ease .4s;
}

* {
    list-style-type: none;
}

body {
    font-family: "Noto Sans", sans-serif;
}

.container-2 {
    width: 1500px;
    margin: 0 auto;
}

.footer-container {
    width: 1000px;
    margin: 0 auto;
}

/* Header */
.top-nav {
    background-color: var(--dark-blue);
}

.logo {
    width: 130px;
}

.deliver-btn a {
    width: 100%;
}

.db-content {
    font-size: .75rem;
}

.db-content .bd-content {
    font-size: .8rem;
}

#categories {
    cursor: pointer;
    transition: var(--animation);
}

#categories:hover {
    background-color: var(--cerebral-grey);
}

.search-bar select {
    font-size: .75rem;
    padding: 10px 6px;
    width: 50px;
    height: 40px;
    background-color: var(--light-gray);
    border-radius: 5px 0 0 5px;
}

.search-bar .input {
    width: 900px;
}

.search-bar .input input {
    width: 100%;
    padding: 10px 6px;
    height: 40px;
}

.search-bar .input input:focus {
    outline: none;
}

.search-bar .search-icon a {
    display: inline-block;
    width: 45px;
    height: 40px;
    border-radius: 0 5px 5px 0 !important;
    transition: var(--animation);
}

.search-bar .search-icon a:hover {
    background-color: goldenrod !important;
    border: none !important;
}

.lang {
    width: 70px;
}

.lang a {
    font-size: .8rem;
}

.down-arrow {
    font-size: .5rem;
}

.hello-btn {
    font-size: .75rem;
}

.acc-list-btn {
    font-size: .85rem;
}

.cart-btn-content {
    font-size: .85rem;
}

.cart-zero {
    top: 11px;
    left: 12px;
}

.bottom-nav {
    background-color: var(--muted-dark-blue);
}

.bottom-nav ul li .bn-btn {
    font-size: .9rem;
}

header a {
    border-radius: 0px !important;
}

header a:hover {
    border: 1px solid var(--white-color) !important;
}

/* Main */
main {
    background-color: var(--light-gray);
}

main a {
    font-size: .75rem;
    transition: var(--animation);
}

main a:hover {
    color: var(--black-color) !important;
}

.home-section {
    margin-top: -16px;
    background: rgba(0, 0, 0, 0.5) url('assets/images/banner.png') no-repeat scroll center / cover;
}

.home-container {
    margin-top: 24vh;
}

.signin-btn {
    font-size: .85rem;
    padding: 6px 110px;
    transition: var(--animation);
}

.signin-btn:hover {
    background-color: goldenrod !important;
}

.signin-content {
    font-size: .72rem;
}

.signin-content a {
    font-size: .7rem;
}

/* Footer */
.btt-section {
    background-color: var(--steel-gray);
    transition: var(--animation);
}

.btt-section:hover {
    background-color: #364659eb;
}

.btt-btn {
    font-size: .8rem;
}

.lb-section1 {
    background-color: var(--muted-dark-blue);
}

footer .f-btn {
    font-size: .85rem;
    color: var(--cerebral-grey);
    transition: var(--animation);
}

footer .f-btn i {
    font-size: .7rem;
    margin-left: -3px;
}

footer .f-btn:hover {
    text-decoration: underline !important;
}

.footer-logo {
    width: 95px;
}

footer .f-btn2 {
    font-size: .85rem;
    color: var(--cerebral-grey);
}

footer .f-btn2 .f-flag-img img {
    width: 20px;
}

footer .lb-section2 {
    background-color: var(--dark-blue);
}

footer .f-btn3 {
    font-size: .7rem;
    gap: 2px;
    transition: var(--animation);
}

footer .f-btn3:hover {
    text-decoration: underline !important;
    color: var(--light-gray);
}

.lb-ul li {
    width: 135px;
}

footer .ffs-sm {
    font-size: .72rem;
}

.ffs-sm-btn:hover {
    text-decoration: underline !important;
}

/* Responsive Design */
@media screen and (max-width: 1650px) {
    .search-bar .input {
        width: 800px;
    }
}

@media screen and (max-width: 1550px) {
    .search-bar .input {
        width: 700px;
    }
}

@media screen and (max-width: 1500px) {
    .search-bar .input {
        width: 600px;
    }

    .home-section {
        width: 100%;
    }

    .explore-section {
        width: 100%;
    }

    .discover-section {
        width: 100%;
    }

    .picks-section {
        width: 100%;
    }

    .products-section {
        width: 100%;
    }
}

@media screen and (max-width: 1350px) {
    .search-bar .input {
        width: 500px;
    }
}

@media screen and (max-width: 1250px) {
    .search-bar .input {
        width: 400px;
    }
}

@media screen and (max-width: 1150px) {
    .search-bar .input {
        width: 300px;
    }
}

@media screen and (max-width: 1050px) {
    .search-bar .input {
        width: 200px;
    }

    .lb-container1 {
        width: 95%;
    }

    .lb-container2 {
        width: 100%;
    }
}

@media screen and (max-width: 992px) {
    .lb-container1 {
        width: 100%;
    }

    .lb-container2 ul {
        flex-direction: column;
        gap: 20px;
    }

    .lb-container2 ul .opacity-li {
        opacity: 1 !important;
    }
}

@media screen and (max-width: 950px) {
    .search-bar .input {
        width: 100px;
    }

    .search-bar .input input::placeholder {
        font-size: .7rem;
    }
}

@media screen and (max-width: 850px) {
    .search-bar .input {
        display: none;
    }
}

@media screen and (max-width: 750px) {
    .search-bar {
        display: none !important;
    }

    .home-container {
        margin-top: -2vh;
    }
}

@media screen and (max-width: 650px) {
    .deliver-btn {
        display: none;
    }

    .lang {
        display: none;
    }

    .bn-btn-hide {
        display: none;
    }

    .fl-container {
        flex-direction: column;
        align-items: baseline !important;
        margin-top: 50px;
    }

    .fl-container-child {
        flex-direction: column;
        gap: 20px !important;
    }

    .privacy-p-container {
        flex-direction: column;
        align-items: center;
        gap: 3px !important;
        margin-top: 60px;
    }
}

@media screen and (max-width: 450px) {
    .h-m-cart {
        display: none;
    }
}