/* this is navbar */
.navbar{
    display:flex;
    width: 95%;
    height: auto;
    /* border: 1px solid red; */
    margin: auto;
}
.option{
    height: auto;
    width: 100%;
    display: flex;
    margin: auto;
    margin-bottom: 50px;
}

.option1-child{
   height: auto;
   width:12%;
   justify-content: center;
   text-align: center;
  margin: 10px;
 margin-bottom: 20px;

}
.option2-child{
    padding-top: 10px;
    text-align: center;
    /* border: 1px solid blue; */
    height: auto;
   width:25%;
    justify-content: space-around
  
}
/* this is logo */
.logo{
    display: flex;
    padding-top: 10px;
    margin: auto;
    height: auto;
    width: 95%;
    /* border: 1px solid red; */
    text-align: center;
    margin-bottom: 20px;
}
.logo-child{
    justify-content: center;
height: auto;
width: 95%;
/* border: 1px solid rgb(38, 92, 199); */
}
.logo-cart{
    text-align:right;
height:auto;
width: 14%;
/* border: 1px solid rgb(49, 196, 41); */
margin-top: 10px;
margin-left: 10px;
padding-left: 10px;
}

/* this is second navbar */
.navbar-2{
    display:flex;
    flex-direction: column;
    width: 95%;
    height: auto;
    /* border: 1px solid red; */
    margin: auto;

}
.navbar2-child{
    display:flex;
    width: 100%;
    height: auto;
    
}
.item:hover{
    background-color: bisque;
    
}
.item{
    justify-content: center;
    height: auto;
    width:9%;
    /* border: 1px solid rgb(38, 92, 199); */
}
#input{
    margin-left: 20px;
    margin-top: 5px;
   padding-right: 50px;
    height: 20px;
    width: 9%;
}
/* product poster */
#container{
    width: 95%;
    height:auto;
    /* border: 1px solid red; */
    margin: auto;
}
.newarrival{
 width: 95%;
 height:auto;
 /* border:1px solid red; */
 margin: auto;
 margin-top: 30px;
/* background-color: rgb(234, 231, 227); */
text-align: center;
}
button{
    padding: 10px;
    background-color: black;
    color: white;
}
/* roger part start here */
.roger{
    display:flex;
   flex-direction: row;
    width: 95%;
 height:auto;
 /* border:1px solid red; */
 margin: auto;
 text-align: center;
}
.roger-child{
    width: 50%;
    height: auto;
    /* border:1px solid rgb(0, 64, 255); */
}
/* this is poster-2 */
.poster-2{
    display: flex;
    flex-direction: row;
    width: 95%;
    height: auto;
    /* border: 1px solid red; */
    margin: auto;
}
.poster-2-child1{
    width: 50%;
    height: auto;
    /* border: 1px solid rgb(34, 3, 3); */
    margin: auto;
    text-align: center;
   
    
}
.poster-2-child2{
    display: flex;
    flex-direction: column;
    width: 50%;
    height:auto;
    /* border: 1px solid rgb(3, 7, 34); */
    margin: auto;
    padding-top: 10px;
}
#poster-2-child2-1{
    width: 100%;
    height: auto;
    /* border: 1px solid rgb(3, 7, 34); */
    margin: auto;
    text-align: center;
    padding-bottom: 30px;
}
#poster-2-child2-2{
    width: 100%;
    height:auto;
    /* border: 1px solid rgb(3, 7, 34); */
    margin: auto;
    text-align: center;
}
#poster-2-child2-3{
    width: 100%;
    height: auto;
    /* border: 1px solid rgb(3, 7, 34); */
    margin: auto;
    text-align: center;
    padding-bottom: 32px;
}
#posterbutton{
    margin-top: 50px;
}
/* roger1 start here */
.roger1{
    display:flex;
    flex-direction: row;
    width: 95%;
    height:auto;
    /* border:1px solid red; */
    margin: auto;
    text-align: center;
}
.roger-child1{
    width: 50%;
    height: auto;
    /* border:1px solid rgb(0, 64, 255); */
}
/* poster-3 start here */
.poster-3{
    display: flex;
    flex-direction: row;
    width: 95%;
    height: auto;
    /* border: 1px solid red; */
    margin: auto;
}

.poster-3-child1{
    display: flex;
    flex-direction: column;
    width: 50%;
    height:auto;
    /* border: 1px solid rgb(3, 7, 34); */
    margin: auto;
    padding-top: 10px;
}
#poster-3-child1-1{
    width: 100%;
    height: auto;
    /* border: 1px solid rgb(3, 7, 34); */
    margin: auto;
    text-align: center;
    padding-bottom: 30px;
}

#poster-3-child1-2{
    width: 100%;
    height:auto;
    /* border: 1px solid rgb(3, 7, 34); */
    margin: auto;
    text-align: center;
}
#poster-3-child1-3{
    width: 100%;
    height: auto;
    /* border: 1px solid rgb(3, 7, 34); */
    margin: auto;
    text-align: center;
    padding-bottom: 32px;
}
.poster-3-child2{
    width: 50%;
    height: auto;
    /* border: 1px solid rgb(34, 3, 3); */
    margin: auto;
    text-align: center;
}

/* texture start here */
#texture{
    width: 95%;
    height: auto;
    /* border: 1px solid rgb(34, 3, 3); */
    margin: auto;
    text-align: center;

}

/* bottom start here */
.bottom{
    display: flex;
    flex-direction:row;
    width: 95%;
    height: auto;
    /* border: 1px solid rgb(34, 3, 3); */
    margin: auto;
    text-align: center;

}

.bottom-child{
    width:25%;
    height:auto;
    /* border: 1px solid rgb(34, 3, 3); */
    margin: auto;
    text-align: center;

}
#bottombutton{
    margin: 30px 20px;
    text-align: center;
   justify-content:center;
}
/* footerlevel1 start here */
#footerlevel1{
    width: 95%;
    height: auto;
    /* border: 1px solid rgb(34, 3, 3); */
    margin: auto;
    text-align: center;
}
.footerlevel2{
    display: flex;
    flex-direction: row;
    width: 95%;
    height:auto;
    /* border: 1px solid rgb(34, 3, 3); */
   margin: auto;
   text-align: left;

   
}
.footerlevel2child{
    width: 50%;
    height:auto ;
    /* border: 1px solid rgb(34, 3, 3); */
}
/* this is footer para */
#footer-para{
    width: 95%;
    height:auto;
    /* border: 1px solid rgb(34, 3, 3); */
    margin: auto;
}
/* this is app section */
#app{
    width: 95%;
    height:auto;
    /* border: 1px solid rgb(34, 3, 3); */
    margin: auto;
    text-align: center;
}
/* services section start here */
.service{
    display: flex;
    flex-direction: row;
    width: 95%;
    height:auto;
    /* border: 1px solid rgb(34, 3, 3); */
    margin: auto;
    text-align: left;

}
.service-child{
    width: 25%;
    height:auto;
    /* border: 1px solid rgb(34, 3, 3); */
}
/* pay section start here */
.pay{
    display: flex;
    width: 95%;
    height:100px;
    /* border: 1px solid rgb(34, 3, 3); */
    margin: auto;
}
#pay1{
    width: 80%;
    height:100px;
    /* border: 1px solid rgb(34, 3, 3); */
}
#pay2{
    width: 20%;
    height:100px;
    /* border: 1px solid rgb(34, 3, 3); */
    text-align: right;
}
a{
    display: block;
}
.option1-child:hover{
    background-color: rgb(193, 96, 96);
    cursor: pointer;
}
.option2-child:hover{
    background-color: rgb(193, 96, 96);
    cursor: pointer;
}