@media only screen and (max-width: 550px){
    html{
        width: 100%;
        height: 100%;
        min-width:0;
    }
    #main_banner{
        width: auto;
    }


    #shop_main_container{
        display: flex;
        flex-direction: column;

    }
    #showcase{
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    
    
    #filter {
        width: 100%;
        height: 100%;
        padding: 0;
        overflow-y: scroll;
       
    }

    #showcase_grid{
        width: 100% !important;
        justify-content: center;
    }

    #showcase_grid a{
        margin: 0 15px 0 15px;
    }

    #showcase_searchbar_container{
        align-self: center !important;
    }

    #whatsapp_contact span{
        display: none;
    }

    #whatsapp_contact i{
        margin: 0 !important;
    }

    #whatsapp_contact{
        width: 40px !important;
        height: 50px !important;
        border-radius: 100% !important;

    }

    .discount_sticker{
        transform: translate(40px, -0) !important;
    }

    .article{
        width: 65px !important;
        height: 165px !important;
    }

    .article_img img{
        width: 107px !important;
        height: 107px !important;

    }

    #desktop_map{
        display: none !important;
    }

    #footer{
        flex-direction: column !important;
    }
    #location_brand_section{
        flex-direction: column;
    }
    #brands{
        flex-direction: column !important;
    }

    #brands_container{
        height: fit-content !important;
        width: 100% !important;
    }

    .maprouter{
        width: 300px !important;
        height: 300px !important;
    }

    .gmap_canvas{
        width: 300px !important;
        height: 300px !important;
    }

    #footer_position_container{
        width: 100% !important;
        margin: 50px 0 50px 0 !important;
        align-items: center;
        justify-content: center;
    }

    #location_brand_section{
        height: fit-content !important;
    }

    #position_title{
        text-align: center;
    }
}

.maprouter{
    width: 700px;
    height: 350px;
}

.gmap_canvas{
    width: 700px;
    height: 350px;
}

#mobile_map{
    display: none;
}

#desktop_map{
    display: block;
}

#showcase_searchbar_container{
    transition: border 0.3s;

    align-self: flex-end;
    width: 250px;
    height: 50px;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid var(--fg);
    padding-top: 50px;
}

#showcase_searchbar_container:hover{
    transition: border 0.3s;
    border-bottom: 2px solid var(--hl_fg);

}

#showcase_searchbar_container:focus-within{
    transition: border 0.3s;
    border-bottom: 2px solid var(--hl_fg);

}

#showcase_searchbar_container i{
    z-index: 1;
    transition: color 0.3s;
    transform: translate(-5px,16px);
    align-self: flex-end;

    font-size: 16pt;
    cursor: pointer;
}

#showcase_searchbar_container i:hover{
    transition: color 0.3s;
    color: var(--hl_fg);
}

#showcase_searchbar{
    width: 85%;
    align-self: flex-start;
    
    border: none;
    text-align: center;
    padding-bottom: 5px;
    padding-right: 7px;

    font-size: 12pt;
}


#showcase{
    padding: 0px 100px 0px 100px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 627px;
}

#showcase_grid{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: max-content;
    overflow-y: scroll;
}


#showcase_grid::-webkit-scrollbar {
    width: 1em;
}

#showcase_grid::-webkit-scrollbar-track {
    background: transparent;
}

#showcase_grid::-webkit-scrollbar-thumb {
    background-color: var(--fg);
}

#whatsapp_a{
    display: contents;
}

#whatsapp_sticky{
    display: flex;
    position: sticky;
    bottom: 0;
    align-content: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: fit-content;
    pointer-events: none; 
}

#whatsapp_contact{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 30px;
    background-color: #49C958;
    color: var(--bg);
    padding: 10px 15px 10px 15px;
    font-size: 14pt;
    border-radius: 1000px;
    pointer-events: all;
    cursor: pointer;
    margin: 0 20px 20px 0;
}

#whatsapp_contact i{
    font-size: 25pt;
    margin-left: 10px;
}



.article{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    height: 270px; 
    border-radius: 20px;
    margin: 30px;
}



.article:hover{
    cursor: pointer;
}

.article_img img{
    transition-property: all;
    transition-duration: 0.3s ;
    width: 200px;
    height: 200px;
}

.article_img img:hover{
    transition-property: all;
    transition-duration: 0.3s ;
    width: 215px;
    height: 215px;
    margin-left: 7.5px;
}

.article_name{
    height: max-content;
}

.article_price{
    height: 20px;
    margin-top: 10px; 
    display: flex;
    flex-direction: column;
}

#showcase_grid a{
    width: fit-content;
    height: fit-content;
}

#section_selected{
    color: var(--hl_fg);
}

#footer{
    height: 100px;
    background: var(--fg);
    display: flex;
    justify-content: space-around;
}

#brands_container{
    width: 20%;
    height: 100%;
}

#brands_title{
    color: var(--hl_fg);
    font-family: "bebas neue";
    font-size: 20pt;
    padding-top: 25px;
    width: 100%;
    text-align: center;
}

#brands{
    margin-top: 30px;
    width: 100%;
    height: 370px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
}

.brand{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
}

.brand img{
    width: 100%;
}

#main_banner{
    width: 100%;
}

#footer_position_container{
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    height: 100%;
    margin-right: 25px;
    width: 750px;
}

#position_info{
    text-align: left;
    margin-right: 25px;
}

#position_title{
    color: var(--hl_fg);
    font-family: "bebas neue";
    font-size: 20pt;
    padding-top: 25px;
    width: 100%;
}

#footer_contacts{
    width: 100%;
}

#footer_contacts_title{
    color: var(--hl_fg);
    font-family: "bebas neue";
    font-size: 20pt;
    padding-top: 25px;
    width: 100%;
    text-align: center;
}

#contacts{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

.contact{
    color: var(--bg);
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact i{
    color: var(--hl_fg);
    margin-right: 15px;
    font-size: 17pt;
}

#location_brand_section{
    width: 100%;
    height: 500px;
    min-height: 500px;
    border-top: 2px solid var(--hl_fg);
    display: flex;
    justify-content: space-around;
    
}

.mapouter{
    margin-top: 25px;
}


.slider_content{
    width: 100%;
    height: 300px;
}

#slider{
    width: 100%;
    height: 400px;
}


.discount_sticker{
    position:absolute;
    transform: translate(70px, -0px);
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}