::-webkit-scrollbar{
    display: none;
  }

*{
  margin: 0;
  padding: 0rem;
  box-sizing: border-box;

}

body{
  font-family: 'Poppins', sans-serif;
  background: #efefef;
}

.navbar{
  display: flex;
  align-items: center;
  padding: 20px;

}
nav{
  flex: 1;
  text-align: right;
}
nav ul{
  display: inline;
  
}
nav ul li{
  display: inline-block;
  list-style-type: none;
  margin-right:20px;
}

nav ul li a{
  /* font-size: 24px; */
  text-decoration: none;
  color:#000;
  /* transition: .5s; */
}

nav ul li a:hover{
  text-decoration: none;
  color:rgb(0, 17, 255);
}

/*for menu links*/
a{
  text-decoration: none;
  color:#555;
}
p{
  color:#555;
}



.row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
}
.col-2{
  flex-basis: 50%;
  min-width: 300px;
  padding-left: 25px;
}
.col-2 img{
  max-width: 100%;
  padding: 0px 25px;
}
.col-2 h1{

  margin: 25px 0 ;
}





/*design header button explore now*/
.btn{
  display: inline-block;
  background-color: #3939ff;;
  color: #fff;
  padding: 8px 30px;
  margin: 30px 0;
  margin-left: 25px;
  border-radius: 30px;
  transition: background 0.5s;
}
.btn:hover{
  background: #323c54;
}
.header{
  background: radial-gradient(#fff,#aab8ff);
}
.header .row{
  margin-top: 50px;
}
/*for featured categories are*/
.categories{
  margin: 70px 0px;
}
.col-3{
  flex-basis: 30%;
  min-width: 250px;
  margin-bottom: 30px;
}
.col-3 img{
  width: 100%;}
/*featured products*/




/*col-4 will edit col of images*/
.col-4{
  flex-basis: 25%;
  padding: 10px;
  min-width: 200px;
  margin-bottom: 50px;
  transition: transform 0.5s;
  padding: 30px;
}
.col-4 img{
  width: 100%;/*each image occupies full column width*/
}
/*for title class consist of heading of feature products*/
.title{
  text-align: center;
  margin: 0px auto 80px;
  position: relative;
  line-height: 60px;
  color: #555;
}

/*to make divider after featured products heading*/
.title::after{
  content: '';
  width: 80px;
  height:5px;
  border-radius: 5px;
  background: #4f3bff;
  position: absolute;
  bottom:0px;
  left:50%;
  transform: translateX(-50%);
  margin-bottom: -10px;
}
/*for products title*/
h4{
  color: #555;
  font-weight: normal;
}

.col-4 p{    
  font-size: 14px;
}

.rating .fa{
  color: #ff523b;
}

.col-4:hover{
  transform: translateY(-10px);
}
/*offer section*/

.offer{
  background: radial-gradient(#fff,#aab8ff);
  margin-top: 80px;
  padding: 30px 0;
}
.col-2 .offer-img{
  flex-basis: 50%;
  min-width: 300px;
  padding: 85px;
}
.row small{
  color: #555;
  display: block;
  margin-left:25px; 
}
/*testimonial*/
.testimonial{
  padding-top: 100px;
}
.testimonial .col-3{
  text-align: center;
  padding: 40px 20px;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);/*it will add shadow to each column like a box*/
  cursor: pointer;/*it convert cursor to shape pointer when moving cursor over testimonials*/
  transition: transform 0.5s;/*for hover effect*/
}
.testimonial .col-3 img{/*for the images of testimonials*/
  width: 50px;
  margin-top: 20px;
  border-radius: 50%;

}
.testimonial .col-3:hover{
  transform: translateY(-10px)/*hover effect to each column*/
}
/*designing quote section*/
.fa.fa-quote-left{
  font-size: 34px;
  color: #36415c;/*color of quote icon*/
}
.col-3 p{/*modify p of testimonials*/
  font-size:12px;
  margin: 12px 0;
  color: #777;
}
.testimonial .col-3 h3{
  font-weight: 600;
  color: #555;
  font-size: 16px;
}
/*brands*/

.brands{
  margin: 100px 10rem;
}
.brands .col-5{
  gap: 10rem;
  width: 150px;
}
.brands .col-5 img{

  gap: 100px;
  filter: grayscale(100%)
}
.brands .col-5 img:hover{
  filter: grayscale(0);
}


/*designing footer*/
.footer{
  background: #000;
  color: #8a8a8a;
  font-size: 14px;
  padding: 60px 0 20px;
}




.footer p{
  color: #8a8a8a;
}
.footer h3{
  color: #fff;
  margin-bottom: 20px;
}
.footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4{
  min-width: 250px;
  margin-bottom:20px;
}
.footer-col-1{
  flex-basis: 30%;
}
.footer-col-2{
  flex: 1;
  text-align: center;
}
.footer-col-2 img{
  width: 180px;
  margin-bottom: 20px;
}
.footer-col-3, .footer-col-4{
  flex-basis: 12%;
  text-align: center;
}
ul{
  list-style-type: none;
}
.app-logo{
  margin-top: 20px;
}
.app-logo img{
  width: 140px;
}
.footer hr{
  border: none;
  background: #b5b5b5;
  height: 1px;
  margin: 20px 0;
}
.copyright{
  display: block;
  text-align: center;
  color: #fff;
}

/*-----------media query for menu-------------*/

.menu-icon{
  width: 28px;
  margin-left: 20px;
  display: none;
}

/*menu icon will be visible for width of page less than 800px, above 800px or larger screen it will not be visible and we get navbar */
@media only screen and (max-width:800px){
  nav ul{
      position: absolute;
      top: 70px;
      left: 0;
      background: #333;
      width: 100%;
      overflow: hidden;
      transition: max-height 0.5s;
 
  }
  nav ul li{
      display: block;
      margin-right: 50px;
      margin-top: 10px;
      margin-bottom: 10px;

  }
  nav ul li a{
      color: #fff;
  }
  .menu-icon{/*we again call menu icon in smaller screen, before smaller screen, we set display none, means initially it was not visible for any screen, but now it will be visible for smaller screens as we set display to block*/
      display:block;
      cursor: pointer; 
  }

}
/*All prodcuts page*/
.row-2{
  justify-content: space-between;/*create some space heading and selection panel*/
  margin: 10px 30px 20px;
  padding-right: 20px;
}
select{
  border: 1px solid #4a494e;/*create red border around dropdown select panel*/
  padding: 1px;
}
select:focus{
  outline: none;/*the issue was when create red border above, it shows red border but upon selecting other option it again becomes black, so we set outline none upon clicking and for clicking or tabing, focus is used*/ 
}
.page-btn{
  margin: 0 450px 70px;
}
.page-btn span{/*desigining pages no button which we have made using span tag*/
  display: inline-block;
  border: 1px solid #3939ff;
  margin-left: 10px;
  width: 40px;
  height: 40px;
  text-align: center;  
  line-height: 40px;
  cursor: pointer;
}
.page-btn span:hover{/*adds hover effect to page btn*/
  background: #3939ff;
  color: #fff;
}
/*single product details*/
.single-product{
  
  margin-top: 80px;
}
.single-product .col-2 img{
  padding: 10px;
  border-radius: 4px;
}

.single-product .col-2{
  padding: 80px;
  text-align: left;
}

.single-product select{/*styling size dropdown*/
  display: block;
  padding: 5px;
  margin-top: 20px;
  border-radius: 5%;
}
.single-product h4{
  margin: 20px 0;
  font-size: 22px;
  font-weight: bold; 

}

.single-product input{/*style no of products input*/
  width: 100px;
  height: 30px;
  font-size: 20px;
  margin-right: 10px;
  border: 1px solid rgb(69, 69, 69);
  border-radius: 10%;
}
input:focus{
  outline: none;
}
.single-product .fa{/*styling icon with product details h3*/
  color: #3939ff;
  margin-left: 10px;
}
.small-img-row{
  display:flex;
  justify-content: space-between;
}
.small-img-col{
  flex-basis: 24%;
}
.single-product .col-2 p{
  margin-left: 0px;

}
.single-product .col-2 h1{
  margin-left: 0px;
 
}
/*Cart Items*/
.cart-page{
  margin: 80px auto;
}
table{
  width: 100%;/*takes full width of the web page*/
  border-collapse: collapse;
}
.cart-info{
  display: flex;
  flex-wrap: wrap;
}
th{
  text-align: left;
  padding: 5px;
  color: white;
  background: #3939ff;
  font-weight: normal;
}
td{
  padding: 10px 5px;
}
td input{
  width: 40px;
  height: 30px;
  padding: 5px;
}
td a{
  color: #3939ff;
  font-size: 12px;
}
td img{
  width: 80px;
  height: 80px;
  margin-right: 10px;
}
td small{
  padding-left: 0px;
  margin-left: 0px;
}

.total-price{
  display: flex;
  justify-content: flex-end;/*put content with max width at the end, if flex start, then put content at start with max width as we mentioned max width below*/
}
.total-price table{
  border-top: 3px solid #3939ff;
  width: 100%;
  max-width: 480px;
}
td:last-child{
  text-align: right;/*align all last column values to right, in our case, these are prices*/
}
th:last-child{
  text-align: right;
}
/*account page*/
.account-page{
  padding: 50px 0;
  background: radial-gradient(#fff, #aab8ff);

}
.form-container{/* in account page first column, we place an image, and in second coloumn we place form having following specs*/
  background: #fff;
  width: 300px;
  height: 400px;
  position: relative;
  text-align: center;
  padding: 20px 0;
  margin: auto;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 1);
  overflow: hidden;
}
.form-container span{
  font-weight: bold;
  padding: 0 10px;
  color: #555555;
  cursor: pointer;
  width: 100px;
  display: inline-block;
}
.form-btn{
  display: inline-block;
}
.form-container form{
  max-width: 300px;
  padding: 0 20px;
  position:absolute;
  top: 130px;
  transition: transform 0.3s;

}
form input{
  width: 100%;
  height: 30px;
  margin: 10px 0;
  padding: 0 10px;
  border: 1px solid #ccc;
}
form .btn{
  width: 100%;
  border: none;
  cursor: pointer;
  margin: 10px 0; 
}
form .btn:focus{
  outline: none;
}
#LoginForm{
  left: -300px;
   
}
#RegForm{
  left: 0;
}

form a{
  font-size: 12px;
}
#Indicator{
  width: 100px;
  border: none;
  background: #3939ff;
  height: 3px;
  margin-top: 8px;
  transform: translateX(100px);
  transition: transform 0.3s;
}





/*----------media query for each and every item display on mobile or screen size less than 600px---------------*/

@media only screen and (max-width: 600px){

  .row{/*this is the row which we have used in every section*/
      text-align: center;/*when open on mobile, we make text in every row to be center align*/
  }
  .col-2, .col-3,.col-4{/*for all columns view on mobile, we want one column single line occupying 100% width we not want 3 or 4 in single line*/
      flex-basis: 100%;
  }
  
  /*for single product detail page*/
  .single-product .row{

      text-align: left;
  }
  .single-product .col-2{
      padding: 20px;
  }
  .single-product h1{
      font-size: 26px;
      line-height: 26px;
  }
  /*for cart page*/
  .cart-info p{
      display:none;/*hide product name in smaller screen*/
  }

}