/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*                           CSS File                            */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

*{
    margin:0 ;
    padding:0 ;
    font-family: 'Assistant', 'Roboto', Helvetica, Arial, sans-serif;
}

/*++++++++++++++++++++++++++++*/
/*       Responsiveness       */
/*++++++++++++++++++++++++++++*/

.responsivenss {
    display: none;
}


/*++++++++++++++++++++*/
/*      Header        */
/*++++++++++++++++++++*/

header {
    box-shadow: 5px 5px 5px #d1d0d0;
}

.navbar {
    height: 80px ;
    display: flex ;
    justify-content: space-evenly;
    align-items: center;
}

.nav-logo img {
    height: 36px ;
    cursor: pointer ;
}

.nav-categories ul {
    display: flex;
    justify-content: space-evenly;
}

.nav-categories ul li {
    margin-left: 25px ;
    list-style: none;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.nav-categories ul li span {
    color: red ;
    font-weight: 700;
    font-size: 0.75rem;
    position: relative;
    top: -0.35rem ;
}

.nav-search i {
    position: absolute;
    padding: 12px 10px ;
}

.nav-search input{
    width: 400px;
    height: 40px;
    background-color: #f5f5f6;
    border: none ;
    color: #696e79;
    padding: 12px 40px;
    box-sizing: border-box;
}

.nav-search input:focus {
    background-color: #fff ;
}

.nav-last {
    width: 220px ;
    font-size: 0.75rem ;
    font-weight: 500;
    display: flex;
    justify-content: space-evenly;
}

.nav-last > div {
    cursor: pointer ;
}

/*++++++++++++++++++++*/
/*    Hero section    */
/*++++++++++++++++++++*/


.hero-section {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 460px ;
    margin-bottom: 10px ;
}

.hero-section img {
    height: 425px;
}

/*++++++++++++++++++++*/
/*    Omg-deals       */
/*++++++++++++++++++++*/

.omg-deals {
    height: 470px ;
}

.head-img-1 {
    height: 65px ;
    background-image: url("./assets/omg-deals/heading.webp");
    background-size: cover;
    cursor: pointer ;
}

.omg-deals-content {
    display: flex;
    flex-wrap: wrap;
}

.omg-deals-content img {
    height: 188.8px ;
    cursor: pointer ;
}


/*++++++++++++++++++++++++++*/
/*    most-loved-brands     */
/*++++++++++++++++++++++++++*/

.most-loved-brands {
    height: 500px ;
}
.head-img-2 {
    height: 100px ;
    background-image: url("./assets/most-loved-brands/heading.webp");
    background-size: cover;
    cursor: pointer ;
}

.most-loved-brands-content {
    display: flex ;
    flex-wrap: wrap ;
}

.most-loved-brands-content img {
    width: 143px ;
}


/*++++++++++++++++++++++++++++++++++*/
/*    top-brands-at-best-prices     */
/*++++++++++++++++++++++++++++++++++*/

.top-brands-at-best-prices {
    height: 500px ;
}

.head-img-3 {
    height: 100px ;
    background-image: url("./assets/top-brands-at-best-prices/heading.webp");
    background-size: cover ;
}

.top-brands-at-best-prices-content img {
    width: 140px ;
}

/*++++++++++++++++++++++++++++++++++*/
/*    trendiest-picks               */
/*++++++++++++++++++++++++++++++++++*/

.trendiest-picks {
    height: 300px ;
}

.head-img-4 {
    height: 100px;
    background-image: url("./assets/trendiest-picks/heading.webp");
    background-size: cover ;
}

.trendiest-picks-content img {
    width: 140px ;
}


/*++++++++++++++++++++++++++++++++++*/
/*    shop by category              */
/*++++++++++++++++++++++++++++++++++*/

.shop-by-category {
    height: 380px;
}
.head-img-5 {
    height: 100px ;
    background-image: url("./assets/shop-by-category/heading.webp") ;
    background-size: cover ;
}

.shop-by-category-content img {
    width: 175px ;
}


/*++++++++++++++++++++++++++++++++++*/
/*          FOOTER                  */
/*++++++++++++++++++++++++++++++++++*/


footer {
    background-color: #f5f5f6;
}

.footer-content-1 {
    width: 80% ;
    padding: 5% 10% 2% 10% ;
    margin-left: 5% ;  
    display: flex;
}

h4 {
    cursor: pointer ;
    font-size: 0.85rem;
}

.footer-content-1 li {
    list-style: none;
    cursor: pointer ;
    color: #696b79 ;
}

.footer-part {
    margin-right: 50px ;
}

.mobile {
    display: flex;
}
.mobile img {
    width: 140px ;
}

.socials i {
    margin-left: 10px ;
}

.footer-fnal-part {
    margin-right: 50px ;
}
.footer-final-part > div {
    display: flex ;
    margin-bottom: 30px ;
}
.footer-final-part > div > p {
    width: 200px ;
    margin-left: 10px ;
}



.footer-content-2 {
    width: 80% ;
    padding: 0 10% 2% 10% ;
    margin-left: 5% ;
}

.hr-special {
    width: 75% ;
    position: relative;
    top: -0.5rem ;
    left: 8rem ;
    background-color: #eaeaec;
}

.footer-content-2 p , .footer-content-3 p {
    width: 85% ;
    margin-top: 20px ;
    margin-bottom: 30px ;
    color: #94969F ;
}




.footer-content-3 {
    width: 80% ;
    padding: 0 10% 2% 10% ;
    margin-left: 5% ;
}



@media screen and (min-width: 360px) and (max-width: 740px) {
    
    body {
        background-color: #000 ;
    }
    .responsivenss {
        display: block;
        height: 100vh ;
        width: 100vw ;
        background: #000 ;
        color: grey ;
    }
    
    .responsivenss div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 35vh 10px 0 10px ;
    }

    .responsivenss div p {
        font-size: 16px ;
    }

    header {
        display: none ;
    }

    .hero-section {
        display: none ;
    }

    .omg-deals {
        display: none ;
    }
    .most-loved-brands {
        display: none ;
    }
    .top-brands-at-best-prices {
        display: none ;
    }

    .trendiest-picks {
        display: none;
    }
    .shop-by-category {
        display: none;
    }
    footer {
        display: none ;
    }
}