*{
    margin: 0;
    padding: 0;
    font-family: Assistant,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ----------Desktop Version---------- */
/*Header Section*/
header{
    background-color: white;    
    height: 80px;
    display: flex;
    overflow-x: hidden;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.5px solid #ebebeb;
}
.hamburger_menu{
    display: none;
}
.logo{
    height: 36px;
}
.logo_container{
    margin-top: 8px;
    margin-left: 3%;
}
.action_bar{
    margin-right: 4%;
}
.nav_bar{
    display: flex;
    min-width: 540px;
    justify-content: space-between;
}
.nav_bar a{
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .3px;
    color: #282c3f;
    font-weight: 700;
    text-transform: uppercase;
    padding: 26px 17px;
    margin: 7.5px 0;
    border-bottom: 4px solid white;
    white-space: nowrap;
    position: relative;
    top: 2px;
}
.red_bar:hover{
    border-bottom: 4px solid #ee5f73;
}
.yellow_bar:hover{
    border-bottom: 4px solid #f2c210;
}
.green_bar:hover{
    border-bottom: 4px solid #0db7af;
}
.nav_bar a sup{
    color: #ff3f6c;
    font-size: 10px;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 20
}
.search_bar{
    display: flex;
    height: 40px;
    min-width: 150px;
    width: 34%;
    align-items: center;
    margin-left: 10px;
}
.search_input{
    border: none;
    height: 40px;
    width: 0%;
    flex-grow: 1;
    background-color: #f5f5f6;
    padding: 8px 10px 10px;
    border-radius: 0 4px 4px 0;
}
.search_input::placeholder{
    color: #696e79;
}
.search_input:focus{
    outline: none;
}
.search_icon{
    height: 40px;
    flex-shrink: 0;
    background-color: #f5f5f6;
    color: #282c3f;
    padding: 8px 10px 10px;
    border-radius: 4px 0 0 4px;
    margin-left: 10px;
}
.action_bar{
    position: relative;
    left: 24px;
    display: flex;
    min-width: 200px;
    justify-content: space-evenly;
}
.action_container a{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: black;
}
.action_name{
    font-size: 12px;
    font-weight: 700;
    line-height: 6px;
    padding-top: 4px;
}
.action_icon {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 20
}
.mobile_searchbar{
    display: none;
}

/*Main Section*/
main{
    margin: 0 50px;
}
.banner_image{
    width: 100%;
    margin: 23px 0;
}
.category_heading{
    text-transform: uppercase;
    color: #3e4152;
    letter-spacing: .15em;
    font-size: 1.8em;
    margin: 50px 0 10px 30px;
    max-height: 5em;
    font-weight: 700;
}
.category_items{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.category_images{
    width: 243px;
    margin: 0 2px;
}

/*Footer Section*/
.footer_container{
    background-color: #FAFBFC;
    height: 500px;
    padding: 30px 0;
    display: flex;
    justify-content: space-evenly;
}
.footer_column{
    display: flex;
    flex-direction: column;
}
.footer_column h3{
    font-size: 12px;
    color: #282c3f;
    font-weight: 700;
    margin: 25px 0;
}
.badge_container{
    display: flex;
    flex-wrap: wrap;
}
.footer_column a{
    font-size: 15px;
    text-decoration: none;
    color: #696b79;
}
.footer_badge img{
    margin-right: 10px;
}
.socials_icon_container{
    display: flex;
    flex-direction: row;
}
.socials a{
    color: #696e79;
    margin-right: 3px;
}
.footer_container2{
    background-color: #FAFBFC;
}
.copyright{
    color: #94969f;
    margin: 0 160px;
    display: flex;
    justify-content: space-between;
}
.address{
    margin-left: 160px;
}
.address h3{
    font-size: 15px;
    font-family: 700;
    margin-bottom: 25px;
}
.address p{
    font-size: 15px;
    color: #94969f;
}

/* ----------Tablet Version ----------*/
@media screen and (max-width:1027px){
    .hamburger_menu{
        margin-left: 12px;
        display: inline-block;
    }
    .nav_bar{
        display: none;
    }
    .logo_container{
        margin-left: 12px;
    }
    .search_bar{
        flex-grow: 1;
    }

    .category_images{
        width: 27vw;
    }
}

/* ----------Mobile Version ----------*/

@media screen and (max-width: 480px) {
    /*Header Section*/
    header{
        width: 100vw;
        height: 56px;
        overflow-x: visible;
        position: fixed;
        display: block;
    }
    .hamburger_menu{
        display: inline-block;
        margin: 0 0 0 17px;
    }
    .menu-icon{
        color: black;
    }
    .logo_container{
        display: inline-block;
        margin: 19px 16px 10px 9px;
        box-sizing: content-box;
    }
    .logo{
        width: 38px;
        height: 21px;
    }
    .search_bar{
        display: none;
    }
    .action_bar{
        display: inline-block;
        float: inline-end;
        margin-right: -62px;
    }
    .action_container{
        display: inline-block;
        margin: 16px 16px 12px 0;
        box-sizing: content-box;
    }
    .action_icon{
        margin-left: -5px;
        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 30
    }
    .action_name{
        display: none;
    }
    .nav_bar{
        display: none;
    }

    .mobile_searchbar{
        background-color: white;
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid rgba(148,150,159,.3);
    }
    .dummy_box{
        border: 1px solid #e9e9eb;    
        border-radius: 20px;
        display: inline-flex;
        width: 96vw;
        height: 37.6px;
        box-shadow: 0 3px 12px 0 rgba(148,150,159,.3);
    }
    .search_mat{
        position: relative;
        top: 7px;
        left: 16px;
    }
    .dummy_box_text{
        margin-left: 6px;
        color: #686b77;
        font-size: 14px;
        line-height: 16px;
        padding-top: 3px;
    }
    .dummy_box_icon{
        color: #686b77;
        font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 20
    }

    /* Main Section */
    main{
        margin: 0;
    }
    .banner_image{
        width: 100%;
        min-width: auto;
        margin-top: 126.5px;
        margin-bottom: 0;
    }
    .category_items{
        justify-content: center;
    }
    .category_images{
        width: 43vw;
    }
    .category_heading{
        font-size: 1.3em;
        margin: 26px 0 3px 30px;
    }

    /*Footer Section*/
    .footer_container{
        flex-direction: column;
        padding-left: 16px;
        height: 550px;
    }
    .footer_column h3{
        font-size: 15px;
    }
    .footer_column{
        display: inline-block;
    }
    .footer_column a{
        margin-right: 31px;
    }
    .copyright{
        margin: 0;
    }
    .address{
        margin: 0;
    }
}