/* navbar */
    nav{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 24px 32px;
        position: absolute;
        left: 0; top: 100%;
        width: 100%;
    }

    .box_img_nav{
        width: auto;
        height: 35px;
        img{
            width: 100%; height: 100%;
            object-fit: contain;
        }
    }

    nav > ul{
        list-style: none;
        display: flex;
        gap: 32px;
    }

    nav > ul li{
        display: flex;
        align-items: center;
    }

    nav > ul li a{
        color: var(--white);
        padding-bottom: 3px;
        position: relative;
    }

    nav > ul li a.active::before, nav > ul li a:hover::before{
        content: '';
        width: 50%; height: 2px;
        background-color: var(--yellow);
        position: absolute;
        left: 0; bottom: 0;
        border-radius: 8px;
        animation: menu_animate .3s ease-in-out;
    }

    @keyframes menu_animate {
        0%{
            width: 0%;
        }
        100%{
            width: 50%;
        }
    }

    .box_icon_nav{
        display: flex;
        gap: 16px;
        svg{
            width: 24px; height: 24px;
            fill: var(--yellow);
        }
    }

    .icon_nav{
        position: relative;
        cursor: pointer;
    }

    .icon_nav:hover{
        transform: translateY(-3px);
    }

    .count_cart{
        width: 20px; height: 20px;
        background-color: var(--red);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2px;
        position: absolute;
        top: -8px; right: -8px;
        color: var(--white);
        font-size: 12px;
    }

    /* btn menu tel */
        .btn_menu, .box_nav_logo{
            display: none;
        }
    /* btn menu tel */
/* navbar */

/* navbar sans hero */
    .navbar{
        background-color: var(--light-yellow);

        .box_img_nav:first-child{
            display: none;
        }

        ul li a{
            color: var(--red);
        }

        ul li a.active::before, ul li a:hover::before{
            background-color: var(--red);
        }

        .box_icon_nav svg{
            fill: var(--red);
        }

        .count_cart{
            background-color: var(--yellow);
            color: var(--red);
        }
    }
/* navbar sans hero */

/* nav scrolled */
    nav.scrolled{
        position: fixed;
        top: 0; left: 0;
        z-index: 100000;
        background-color: var(--white);
        box-shadow: 0 2px 5px var(--light-black);
    }

    nav.scrolled > ul li a{
        color: var(--black);
    }

    nav.scrolled .box_icon_nav svg{
        fill: var(--black);
    }
/* nav scrolled */

/* box search */
    .container_search{
        width: 100%; height: 18dvh;
        background-color: var(--red);
        position: fixed;
        top: 0; left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    }

    .container_search.active{
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    .content_search{
        width: 400px;
    }
/* box search */

/* responsive */
    /* nav */
        @media screen and (max-width: 900px) {
            .btn_menu{
                display: block;
            }

            nav, .navbar{
                justify-content: space-between;
                padding: 24px 48px;
            }

            nav ul, .navbar ul{
                position: fixed;
                top: 0; left: 0;
                width: 250px; height: 100dvh;
                background-color: var(--red);
                border-right: 2px solid var(--white);
                flex-direction: column;
                gap: 16px;
                padding: 16px 32px;
                clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
                z-index: 1000000;
            }

            nav ul.active, .navbar ul.active{
                clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            }

            .box_nav_logo{
                display: flex;
                width: 100%; height: 80px;
                padding: 8px;
            }

            nav ul li:first-child, .navbar ul li:first-child{
                display: flex;
                justify-content: center;
                background-color: var(--white);
                border-radius: 16px;
            }

            nav ul li a, .navbar ul li a, nav.scrolled ul li a{
                color: var(--white);
            }

            nav > ul li a.active::before, nav > ul li a:hover::before, 
            .navbar > ul li a.active::before, .navbar > ul li a:hover::before{
                background-color: var(--yellow);
            }
        }

        @media screen and (max-width: 500px) {
            nav, .navbar{
                padding: 16px 32px;
            }
        }
    /* nav */
/* responsive */