/*Desktop Section*/
@media screen and (min-width: 1200px) {
    footer > div > div:has(>img){
        max-width: 400px;
    }
}

/*Tablet Section*/
@media screen and (min-width: 900px) {
    #cate-sec{
        margin-top: -80px;
    }

    #nav-toggle{
        display: none;
    }

    header .subNav > div{
        display: none;
    }

    header .subNav:hover > div{
    position: absolute;
    top: 2.2em;
    left: 50px;
}
}

/*Phone Section*/
@media screen and (max-width: 650px) {
:root{
    --padding-1: 4vw;
}

header nav{
    display: none;
    flex-direction: column;
    width: 100vw;
    position: absolute;
    top: 60px;
    right: -2vw;
    background-color: #ffffff;
    align-items: stretch;
}

#popup-sec > div{
    animation: 0.8s cameUp ease-in-out;
    align-self: end;
    padding-bottom: 50px;
}

.popup-close{
    right: calc(50% - 1em);
    top: -50px;
}

#cate-sec > h2{
    order: -1;
    width: 100%;
    margin-top: 50px;
}

#banner-div {
    order: 1;
}

div#filter{
    flex-direction: column;
}

#main-section{
    text-align: center;
    align-content: center;
    margin: 10px;
}

footer, #product-sec{
    grid-template-columns: 1fr;
}
}