*{
    margin: 0;
    padding: 0;
}

header{
    /* background-color: lightblue; */
    background-color: rgb(21, 111, 172);
    height: 4vw;
    display: flex;
}

.logo{
    display:flex;
    justify-content: justify;
    align-items: center;
    margin: auto;
}

.name{
    padding: 10px;
    margin-left: 2vw;
}

.name p{
    font-size: 0.75rem;
    color: white;

}

.search{
    height: 2.7vw;
    width: 30vw;
    margin-right: 2vw;
}

.searchicon{
    position: relative;
    right: 8vh;
}

.login{
    background-color: white;
    padding: 5px 30px 5px 30px;
    font-family: sans-serif;
    color: blue;
    margin-left: 1vw;
    margin-right: 1vw;
}

.becomeaseller{
    color: white;
    margin-left: 2vw;
    margin-right: 2vw;
}

.more{
    color: white;
    margin-left: 2vw;
    margin-right: 2vw;
}

.carticon{
    margin: 1vh;
}

.cart{
    color: white;
    /* margin-left: 2vw; */
    margin-right: 2vw;
}

.main{
    display: flex;
    margin: 3vh 5vh 3vh 5vh;
    height: auto;
}

.box{
    margin: auto;
    /* margin-top: 2vh; */
    /* border: 1px solid black; */
    padding: 1vh;
    text-align: center;
}

.box p{
    text-align: justify;
    width: 64px;
    font-size: 0.8rem;
    font-family: sans-serif;
    font-size: 0.7rem;
}

.box p{
    text-align: center;
}

hr{
    margin: 2px;
    opacity: 50%;
}

.animatedbox{
    /* background-color: green; */
    margin: 1vh;
    margin-top: 0;
    height: 45vh;
    width: 98vw;
    max-width: 100vw;

}

.animatedbox img{
    width: 99vw;
    height: 44vh;
    position: absolute;
    
}

.animationbutton1{
    width: 7vh;
    height: 15vh;
    background-color: white;
    /* opacity: 30%; */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 0px;
    top: 13vh;
    border: 1px transparent;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.animationbutton2{
    width: 7vh;
    height: 15vh;
    background-color: white;
    /* opacity: 30%; */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 95vw;
    bottom: 3vh;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}


eletronics{
    display: flex;
}





.categories{
    display: flex;
    width: 100vw;
    height: 45vh+70px;
    margin: 0.5rem;
    max-width: 100vw;
    overflow: scroll;
    /* border: 1px solid red; */
    margin-top: 0;
}

.electronics{
    display: flex;
}

.menu{
    /* padding: 3rem; */
    /* background-color: red; */
    margin: 35px;
    width: 30vh;
    height: 45vh;
    /* border: 1px solid black; */
    justify-content: center;
    align-items: center;
    /* padding: auto; */
}

.textsection p{
    text-align: center;
    margin-top: 1px;
}

.textsection{
    font-size: 2rem;
    margin-top: 10px;
    display: flex;
    margin-top: 3rem auto 0 auto;
}

.viewall{
    text-align: center;
    display: flex;
    font-size: 0.7rem;
    color: white;
    background-color: blue;
    width: 5.5rem;
    height: 2.5rem;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    border: 1px transparent;
    border-radius: 5%;
    margin-top: 2rem;
}

.box2{
    /* border: 1px solid black; */
    /* background-color: yellow; */
    padding: 0.5rem;
    /* object-fit: contain; */
}

.box2 img{
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.box2right{
    display: flex;
    padding: 0.5rem;
    position: absolute;
    /* background-color: red; */
    z-index: 2;    
    width: 15em;
    margin: 0;
    align-self: flex-end;
    justify-self: end;
    left: 69.7em;
    height: 21.5em;
}

.box2right img{
    margin: 0;
    width: 14em;
    height: 21.5;
}

.animationbutton3{
    width: 7vh;
    height: 15vh;
    background-color: rgb(243, 236, 236);
    /* opacity: 30%; */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    right: 36vw;
    top: 20vh;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

i{
    z-index: 5;
}



footer{
    /* background-color: navy; */
    height: 30vw;
    display: flex;
    
}

.f1{
    width: 100vw;
    height: 16vw;
    /* background-color: blue; */
    /* color: white; */
    border: 1px solid black;
    font-size: 0.8rem;
    display: flex;
}

.about{
    margin: auto;
    padding: auto;  
    border: 1 px solid black;
}

.help{
    margin: auto;
    padding: auto;
}

.consumer{
    margin: auto;
    padding: auto;
}

.social{
    margin: auto;
    padding: auto;
}


.f12{
    display: flex;
    border: 1px solid red;
}

span hr{
    width: 100vw;
}

.f2{
    width: 100vw;
    height: 4vw;
}