index.css

#arrow_up_img{
    width: 4%;
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 3;
    background-color: transparent;

}
#navbar{
    position: sticky;
    top: 0px;
    z-index: 4;
}


/* akarsha css part for home page  */
/* #navbar{
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#navbar>div:nth-child(1){
    display: flex;
    justify-content: space-between;
    padding: 1%;
}
#logo{
    width: 10%;
}
#navbar>div:nth-child(1) input{
    width: 40%;
    border-radius: 25px;
}
#navbar>div:nth-child(2){
    padding: 1%;
    display: flex;
    justify-content: space-between;
}
#navbar>div:nth-child(2)>div:nth-child(2){
    width: 50%;
    display: flex;
    justify-content: space-between;
}
#navbar>div:nth-child(2)>div:nth-child(3){
    width: 20%;
    display: flex;
    justify-content: space-between;
}
#navbar>div:nth-child(2)>div:nth-child(3) button{
    width: 20%;
    height: 20px;
    display: flex;
    justify-content: space-between;
    text-align: center;
} */

/* slider css  */

#slider{
    width: 100%;
    margin: auto;
    background-color: white;
}
#slider>div:nth-child(1){
    width: 40%;
    display: flex;
    margin: auto;
}
#slider>div:nth-child(1) img{
    width: 5%;
    margin: 5px;
}
#slider>div:nth-child(1) p{
    /* width: 5%; */
    margin-top: 25px;
    margin-left:5px ;
}
#recently{
    width: 95%;
    margin: auto;
    /* display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px; */
    background-color: #f0f1f7;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

#recently img{
    width: 100%;
}
#recently>div{
    /* padding: 5%; */
    padding: 12px;
    width: 300px;
    margin-bottom: 14px;
    background-color: white;
}
#recently>div p{
    text-decoration: underline;
    text-decoration-color:grey ;
}
#recently>div:nth-child(3) img{
    width: 51%;
    margin: 10%;
    margin-bottom: 3.5%;
    margin-left: 22%;
}
#recently>div:nth-child(4){
    display: flex;
    flex-direction: column;
}
#recently>div:nth-child(4)>div:nth-child(1){
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    margin: 2%;
    text-align: center;
}
#recently>div:nth-child(4)>div:nth-child(1) button{
    width: 60%;
    margin-bottom: 5px;
    padding: 4%;
    border-radius: 15px;
    border: 1px solid white;
    background-color: #414467;
    color: white;
}
#recently>div:nth-child(4)>div:nth-child(2){
    padding: 3.6%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#recently>div:nth-child(4)>div:nth-child(2) img{
    width: 100%;
    /* padding: 10%; */
}
#recently>div:nth-child(2) img{
width: 100%;
}
#recently>div:nth-child(1) img{
    width: 100%;
    }
#slider>div:nth-child(2){
    width: 100%;
}
#slider>div:nth-child(2) img{
    width: 100%;
}
    
#popular{
    display: flex;
    width: 95%;
    margin: auto;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#popular>div:nth-child(1){
    width: 30%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    height: 515px;
}
#popular>div:nth-child(1) img{
    width: 90%;
    padding: 3%;
}
#popular>div:nth-child(2){
     width: 65%; 
    display: flex;
    flex-direction: column;
    
}
#popular>div:nth-child(2)>div:nth-child(1){
    display: flex;
    justify-content: space-between;
    padding: 3.5%;
}
#popular>div:nth-child(2)>div:nth-child(1) img{
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
#popular>div:nth-child(2)>div:nth-child(2){
    display: grid;
    width: 80%;
    grid-template-columns: repeat(4,1fr);
    gap: 35px;
    padding: 3.5%;
}
#popular>div:nth-child(2)>div:nth-child(2) div{
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
#pop{
    text-align: center;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 28px;
    color: #2e2c38;
}
#s_logo{
    width: 10%;
    margin: auto;
    
    
}
#s_logo img{
    width: 100%;
}
#hotdeals{
    width: 95%;
    margin: auto;
    /* display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 35px; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: white;
}
#hotdeals>div{
    /* padding: 5%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    padding: 12px;
    background-color: white;
}
#navbar>div:nth-child(2)>div:nth-child(3) button{
border: 0px;
padding: 1.5%;
text-align: center;
}


/* surya code css  */

/* div 4 css */
#div4{
    width: 95%;
    margin: auto;
    /* border: 1px solid black; */
    margin-bottom: 35px;
    padding: 12px 0px 12px 0px;
    background-color: white;
    margin-top: 32px;

}
#div4>h1{
    margin-left: 23px;
    background-color: white;
}
#div4_main{
    display: flex;
}
#div4_first{
    flex: 7;
    width: 300px;
    /* border: 1px solid black; */
    background-color: white;
}
#div4_main>#div4_first img{
    width: 100%;
}
#div4_second{
    flex: 3;
    /* border: 1px solid red; */
}
#div4_second>img{
    width: 100%;
}

/* div 5 css  */
#div5 {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 95%;
    margin: auto;
    /* gap: 30px; */
    background-color: white;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
    /* border: 1px solid red; */
}

#div5 img {
    
    width: 100%;
}

.div5child {
    width: 340px;
    margin: auto;
    height: auto;
    /* padding: 30px; */
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 30px;
    column-gap : 30px;
    background-color: white;
}

/* div 6 css  */
#div6 {
    width: 95%;
    height: auto;
    margin: auto;
    padding: auto;
    gap: 30px;
    background-color: white;
    padding-top: 30px;
}

#div6>h1{
    text-align: center;
    background-color: white;
}

#div6bottom {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background-color: white;
}

#div6bottom>div{
    width: 120px;
}
#div6bottom img {
    width: 100%;
}

.div6child {
    width: 100%;
    height: auto;
    padding: 20px;
    margin: 30px;
    border-radius: 50px;
    text-align: center;
    background-color: white;
    border:5px solid grey;
}
.div6child>h3{
    background-color: white;
}
#div6child h2{
    color: grey;
    font-size: 20px;
    text-align: center;
}

/* div 7 css  */
#div7{
    width: 95%;
    margin: auto;
    /* border: 1px solid black; */
    margin-bottom: 35px;
    padding: 12px 0px 12px 0px;
    background-color: white;
    margin-top: 32px;
}
#div7>h1{
    margin-left: 23px;
    background-color: white;
}

/* div 8 css  */
#div8 {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 95%;
    margin: auto;
    /* gap: 30px; */
    background-color: white;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
    /* border: 1px solid red; */
}

#div8 img {
    
    width: 100%;
}

.div8child {
    width: 340px;
    margin: auto;
    height: auto;
    /* padding: 30px; */
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 30px;
    column-gap : 30px;
    background-color: white;
}



/* utkarsh css part  */
/* div 9 css  */
#div9 {
    margin: auto;
    text-align: center;
    width: 95%;
    background-color: white;
    font-family: serif;
    font-style: normal;
    font-size: 20px;
    color: #2e2c38;
    margin: 20px auto;
    padding: 40px 0px 40px 0px;
}
#div9>h1{
    background-color: white;
    margin-bottom: 12px;
}
#div9 h4{
    font-size: 18px;
    padding: 0px;
    background-color: white;
}

#div9>div {
    display: flex;
    width: 80%;
    margin: auto;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: white;
    gap: 40px;
}

#div9>div>div {
    width: 130px;
    background-color: white;
    text-align: center;
}

#div9>div>div img {
    width: 100%;
    border-radius: 50%;

    border: 8px solid #cbcdd4
}

/* div 10 css  */
#div10{
    width: 95%;
    margin: auto;
    /* border: 1px solid black; */
    margin-bottom: 35px;
    padding: 12px 0px 22px 0px;
    background-color: white;
    margin-top: 32px;

}
#div10>h1{
    margin-left: 23px;
    background-color: white;
    margin-bottom: 12px;
}
#div10_main{
    display: flex;
}
#div10_second{
    flex: 7;
    width: 300px;
    background-color: white;
}
#div10_main>#div10_second img{
    width: 100%;
}
#div10_first{
    flex: 3;
    
}
#div10_first>img{
    width: 100%;
}


/* div 11 css  */
#div11{
    width: 95%;
    margin: auto;
    /* border: 1px solid black; */
    margin-bottom: 35px;
    padding: 12px 0px 12px 0px;
    background-color: white;
    margin-top: 32px;

}
#div11>h1{
    margin-left: 23px;
    background-color: white;
}
#div11_main{
    display: flex;
}
#div11_first{
    flex: 7;
    width: 300px;
    /* border: 1px solid black; */
    background-color: white;
}
#div11_main>#div11_first img{
    width: 100%;
}
#div11_second{
    flex: 3;
    /* border: 1px solid red; */
}
#div11_second>img{
    width: 100%;
}

/* div 12 css  */
#div12{
    width: 95%;
    margin: auto;
    /* border: 1px solid black; */
    margin-bottom: 35px;
    padding: 12px 0px 22px 0px;
    background-color: white;
    margin-top: 32px;

}
#div12>h1{
    margin-left: 23px;
    background-color: white;
    margin-bottom: 12px;
}
#div12_main{
    display: flex;
}
#div12_second{
    flex: 7;
    width: 300px;
    background-color: white;
}
#div12_main>#div12_second img{
    width: 100%;
}
#div12_first{
    flex: 3;
    
}
#div12_first>img{
    width: 100%;
}


/* div 13 css  */
#div13{
    width: 95%;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    /* border: 1px solid black; */
    margin-bottom: 35px;
    padding: 40px 0px 40px 0px;
    background-color: white;
    margin-top: 32px;
}



/* nikhil css part for home page  */
*{
    margin: 0px;
    padding: 0px;
    background-color: #f0f1f7;
}
/* div 14 css  */

#div14{
    width: 95%;
    margin: auto;
    /* border: 1px solid black; */
    margin-bottom: 35px;
    padding: 12px 0px 12px 0px;
    background-color: white;
    margin-top: 32px;
}
#div14>h1{
    margin-left: 23px;
    background-color: white;
}
#div14_main{
    display: flex;
    background-color: white;
}
#div14_first{
    flex: 3;
    /* border: 1px solid red; */
    margin: 12px;
    background-color: white;
}
#div14_first>img{
    width: 100%;
}
#div14_second{
    flex: 7;
    display: grid;
    /* border: 1px solid blue; */
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    background-color: white;
}
.div14_cards{
    background-color: white;
}
.div14_cards>img{
    width: 100%;
}
.div14_cards>h2{
    font-weight: normal;
    background-color: white;
}
.div14_cards>.div14_price{
    font-weight: bold;
    font-size: 20px;
    background-color: white;
}
.div14_cards>div>i{
  color: gold;
  background-color: white;
}
.div14_cards>div{
  background-color: white;
}
.div14_cards>.div14_ship{
    color: #07809a;
    background-color: white;
}

/* div 15 css  */
#div15{
    width: 95%;
    margin: auto;
    /* border: 1px solid black; */
    margin-bottom: 35px;
    /* display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px; */
    gap: 30px;
    padding-right: 20px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    background-color: white;
    padding: 18px 5px 28px 5px;
}

#div15 div,#div15 h3,#div15 h5{
    background-color: white;
}

#div15 h3,#div15 h5,#div15 img{
    margin-bottom: 10px;
}

/* div 16 css  */
#div16{
    width: 95%;
    margin: auto;
    /* border: 1px solid black; */
    margin-bottom: 35px;
    padding: 12px 0px 12px 0px;
    background-color: white;
}
#div16>h1{
    margin-left: 23px;
    background-color: white;
}
#div16_main{
    display: flex;
    background-color: white;
}
#div16_second{
    flex: 3;
    /* border: 1px solid red; */
    margin: 12px;
    background-color: white;
}
#div16_second>img{
    width: 100%;
}
#div16_first{
    flex: 7;
    display: grid;
    /* border: 1px solid blue; */
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    background-color: white;
    margin-left: 14px;
}
.div16_cards{
    background-color: white;
}
.div16_cards>img{
    width: 100%;
}
.div16_cards>h2{
    font-weight: normal;
    background-color: white;
}
.div16_cards>.div16_price{
    font-weight: bold;
    font-size: 20px;
    background-color: white;
}
.div16_cards>div>i{
  color: gold;
  background-color: white;
}
.div16_cards>div{
  background-color: white;
}
.div16_cards>.div16_ship{
    color: #07809a;
    background-color: white;
}



#div17{
    width: 95%;
    /* height: 500px; */
    margin: auto;
    /* border: 1px solid black; */
    margin-bottom: 35px;
    background-color: white;
    padding-top: 23px;
   padding-bottom: 50px;
}
#div17>h1{
    background-color: white;
    margin-left: 23px;
}

.swiper-slide>h2{
    font-weight: normal;
    background-color: white;
}
.swiper-slide>.div17_price{
    font-weight: bold;
    font-size: 20px;
    background-color: white;
}
.swiper-slide>.div17_ship{
    color: #07809a;
    background-color: white;
}

.swiper-slide>div>i{
    color: gold;
    background-color: white;
  }
.swiper-slide>img{
    width: 100%;
 }
 .swiper-pagination{
     height: 0px;
     margin: 5px;
 }
 .swiper, .swiper-wrapper,.swiper-button-next,.wiper-button-prev,.swiper-pagination,.swiper-slide,.div17_price,.div17_ship,.swiper-slide h2,.swiper-slide div{
     background-color: white;
 }
 .swiper-pagination{
     position: relative;
 }
 .swiper-button-prev{
     position: relative;
     left: 14px; 
     bottom: 280px;
     background-color: transparent;

 }
 .swiper-button-next{
     position: relative;
     /* right: 14px; 
     bottom: 280px; */
     left: 97%;
     bottom: 255px;

     background-color: transparent;
 }



/* div 18 css  */
#div18{
    width: 95%;
    /* height: 300px; */
    margin: auto;
    /* border: 1px solid black; */
    /* margin-bottom: 35px; */
    background-color: white;
    padding: 12px 3px 52px 3px;
}
#div18>h1{
    background-color: white;
    text-align: center;
    margin: 18px;
}
#div18>#div18_main{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    background-color: white;
}
#div18>#div18_main>div>h3{
    background-color: white;
   padding-bottom: 12px;
}

#div18>#div18_main>div{
    background-color: white;
   /* padding-bottom: 12px; */
}

/* footer css  */
/* #footer{

}
#footer_first{
 width: 100%;
 height: 100px;
 background-color: #545871;
}
#footer_second{
  
}
#footer_second>p{
    margin-left: 8px;
    font-size: 14px;
    margin-top: 6px;
}
#footer_second>hr{
    color: #07809a;
}
#footer_second_logo{
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    margin-bottom: 80px;
    margin-top: 12px;
}
#footer_second_logo img{
    width: 80px;
} */


@media screen and (max-width: 750px){
    #div4_main{
        flex-direction: column;
    }
    #div4_first{
        width: 100%;
    }

    #div10_main{
        flex-direction: column;
    }
    #div10_second{
        width: 100%;
    }

    #div11_main{
        flex-direction: column;
    }
    #div11_first{
        width: 100%;
    }

    #div12_main{
        flex-direction: column;
    }
    #div12_second{
        width: 100%;
    }

    #div14_main{
        flex-direction: column;
    }

    #div16_main{
        flex-direction: column;
    }
  }