* { margin:0px; padding:0px; }

h1,h2,h3,h4 { margin-top:0px; }

ul li { list-style:none; }
.forpop{
   margin-left : 4%;
    /*margin-right : 30%;*/
    width : 40%;
    height: 300px;
    background-color : white;
    margin-top: 50px;
    font-family : Arial ;
    /*border:1px solid #c9c9c9;*/
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}


.description3
          {
           
             display: block ;
           
             font-size: 32px;
            color :red;
             margin-left : 0px;
             margin-top :0px;
               line-height: 1;

           
             text-align : left ;

               overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
                    }



.newitem_button{
    width: 30%;
    margin-right: 3%;
    height : 35px;
}



.layerbutton{
    margin-right : 15px;
}
#Panel1{
    padding: 10px;
}
.color_master{
width : 100%;
float: left ;


}




.color_setting{
    float : left ;
    margin-left : 3%;
    margin-top : 40px;
    width : 30%;
    border: solid 1px red ;
    position : relative ;
    

}

.imagepop{
   margin-left : 45%;
   /*margin-right : 45%;*/
   margin-top: 10px;
        width : 90px;
        height : 90px;
    /*border:  red solid 1px;*/
float : left;    
 
    }



.forcancel{
   /*margin-left : 45%;*/
   margin-right : 10px;
   margin-top: 10px;
   font-size : 22PX;
        width : 35px;
        height : 35px;
        color: #595959;
    /*border:  red solid 1px;*/
    font-family : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight : bolder;
  
 float : right;
    }

.forimagepop{
    width: 80px;
    height : 80px;
}

#panel_address{
 height: 170px;
 width: 94%;
 margin-left : 3%;
 margin-top : 30px;
}
    .forcomplist{
    height : 50px;
    width : 45%;
    margin-top : 20px;
    background-color: red;
    margin-left : 4%;
    border: solid 1px #e0e0d1;

}

/*#DataList1{
    height : 260px;
}*/


.datalistx{
    height : 50px;
}
.complabel{
    padding : 10px;
    float : left;

    width: 160px;
}

.poppara_login{
   display: block;
   margin-top: 10px;
   color: #595959;
    font-size : 14px;
    margin-left: 25%;
    margin-right : 25%;
    text-align : center ;
    font-weight : bolder;
    font-family : Arial ;
}


.poppara{
   display: block;
   margin-top: 110px;
   color: #595959;
    font-size : 14px;
    margin-left: 25%;
    margin-right : 25%;
    text-align : center ;
    font-weight : bolder;
}

.csitemname{
   display: block;
   margin-top: 10px;
   color: black;
    font-size : 26px;
    margin-left: 25%;
    margin-right : 25%;
    text-align : center ;
    font-weight : bolder;
}

.csitemprice{
   display: block;
   margin-top: 10px;
   color: black;
    font-size : 16px;
    margin-left: 25%;
    margin-right : 25%;
    text-align : center ;
    font-weight : bolder;
}

.b1_login{
  
   margin-top: 15px;
   color:  black;
   color: black;
   background-color:  #bfbfbf;
   cursor: pointer; 
    font-size : 14px;
    margin-left: 24%;
 width: 200px;
    text-align : center ;
    float : left;
      border:2px solid #c9c9c9;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height :40px;
}





.buttomdiv {
    float: left;
    height: auto;
    width: 100%;
    background-color: #00bbff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-top: 30px;
    list-style-type: none;
    font-weight: bolder;
    font-size: 11px;
    color: #4d4d4d;
    /*position: absolute;*/
    bottom: 0;
    display: block;
}


.down1
{
  float: left;
 height: 150px;
    width: 28%;
   position:relative;
  margin-left: 5px;
   list-style-type: none;
    font-weight: bolder;
    font-size: 11px;
      color: #4d4d4d;

   }



img.c44
{
  position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;


}



.down2
{
   float: left;
 height: auto;
    width: 50%;
     
     
   
     
   list-style-type: none;
    font-weight: bolder;
    font-size: 11px;
      color: #4d4d4d;

   }

.subdown1
{
    float: left;
 height: 140px;
    width: 50%;
   
        list-style-type: none;
    font-weight: bolder;
    font-size: 11px;
      color: #4d4d4d;
      margin-top: 30px;

   }

.subdown2
{
    float: left;
 height: 140px;
    width: 50%;
     
        list-style-type: none;
    font-weight: bolder;
    font-size: 11px;
      color: #4d4d4d;
       margin-top: 30px;
   }
li.k7
{
  font-size: small;
    clear: left;
    /*line-height: 4%;*/
    margin-left: 40px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

.k8
{

    color: black ;
}

.k9{
    text-align: center;
}

.down3
{
    float: left;
 height: auto;
 margin-top: 30px;
    width: 20%;
   
        list-style-type: none;
    font-weight: bolder;
    font-size: 11px;
      color: #4d4d4d;

   }


.button_address{
            width : 80px;
            margin-left : 0px;
            margin-top : 10px;
            float :left ;
            height : 25px;
              background-color: #ababab;
            border-radius : 5px;
            border: 1px solid #d9d9d9;
            cursor : pointer ;

        }


.b1{
  
   margin-top: 30px;
   color:  black;
   color: black;
   background-color:  #bfbfbf;
   cursor: pointer; 
    font-size : 14px;
    margin-left: 25px;
 width: 200px;
    text-align : center ;
    float : left;
      border:2px solid #c9c9c9;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height :40px;
}

.b2{
  
     margin-top: 30px;
   color:  white;
   cursor: pointer ;
   background-color:  red;
   float: right;
    font-size : 14px;
    margin-right: 30px;
 width: 200px;
    text-align : center ;
    
      border:2px solid #c9c9c9;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height :40px;
}
  .catbox{
    width: 22px;
    height : 17px;
    background-color : #ffb84d;
    float : left ;
    color: white;
    margin-left: 15px;
    margin-top:0px;
    margin-bottom:-13px;
   padding-top: 0px;
    text-align : center;
    font-weight : 400;
    font-size : 14px;
    text-align : center ;

    font-family : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    /*padding:1px;*/

    /*border: 1px solid #b3b3b3;*/
   border-radius : 10px 10px ; 
}  
#animationbox {
    width: 100%;
    height: 155px;
    float: left;
    background-color:white;
    animation: 2s slider infinite;
    
    /*z-index : -1;*/
   
}
.amountbox2 {
    float: left;
    width: 20%;
    /*background-color : yellow;*/
    margin-left: 30%;
    color: grey;
    height : 30px;
}
.abox{
    width: 28px;
    height : 28px;
    float : left;
      margin-left : 4px;
      /*vertical-align : middle ;*/
      
      line-height : 3px;
      text-align : center;
     font-weight : bolder;
     
}

.drop2{
    border-radius : 4px;
    border: 1px solid grey;
    width: 20px;
    height : 25px;
    float: left;
    margin-left : 4px;
    text-align: center ;

}
.amountbox1{
    float : left ;
    width: 15%;
    /*background-color : black;*/
    font-family : Arial ;
    font-weight : bolder;
    margin-left : 10px;
    /*font-size : 18px;*/
}
.amountbox{
    /*background-color : red;*/
    float : left ;
    width: 100%;
    height : 30px;
    margin-top: 15px;
}
.socialimg{
    width:50px;
    height:50px;
}
.hh5 {
    font-size: 20px;
    font-size: large;
}
 .sbox
          {
             width: 97.5%;
             height: 35px;
             
              font-size: 16px;
              padding: 5px;
              border-radius : 5px;
              /*background-color : blue;*/
              
              border: solid 1px #d0d0d0;

          }

 .sboxi
          {
             width: 97.5%;
             /*height: 20px;*/
             
              font-size: 16px;
              padding: 5px;
              border-radius : 5px;
              /*background-color : blue;*/
              
              border: solid 1px #d0d0d0;

          }
 .sbox2 {
     width: 15px;
     height: 14px;
     padding :8.5px;
    /*color: red;*/


 }
  .sbox2i {
     width: 15px;
     height: 15px;
     padding :6px;
    color: #595959;


 }
 
.thirdline{
     background-color: white;
              height: 45px;
              display: block;
              width : 100%;
              top : 300px;
              left : 0px;
              float : left;
              /*background-color : yellow;*/

              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
              /*margin-bottom: 500px;*/
}
.menu2div{
   margin-left  : 15px;

   float: left;
   margin-top : 0px;
   /*background-color: blue;*/
   width : 200px;
}

.welcome{
  width: 100px;
  height :20px;
 
  margin-left : -10px;
  color: red;
  
  /*background-color : blue;*/
  word-wrap : break-word ;
  float : left ;
  margin-top: 10px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight : bolder;
  color: #333333;
  line-height: 5px;
}
.welcomename {
    width: 200px;
    height: 40px;
    margin-left: -120px;
    color: red;
    /*background-color : blue;*/
    word-wrap: break-word;
    float: left;
    margin-top: 22px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: bolder;
    color: #333333;
    line-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
 .para {
   margin-top :4px;
   float : left;
   margin-left: 3px;

 }

 .para1 {
   margin-top :5px;
   float : left;
   margin-left: 20%;
   width: 35%;
   /*background-color : blue;*/
 }
 .para1i {
   /*margin-top :5px;*/
   float : left;
   margin-left: 25%;
   width: 35%;
   /*background-color : blue;*/
 }
.myani {
    width: 100%;
   
    float: left;
    height: 250px;
    /*z-index : -1;*/
   
}

#slider {
    overflow: hidden;
    /*z-index : -1;*/
}

    #slider figure {
        position: relative;
        width: 500%;
        margin: 0;
        left: 0;
        animation: 20s slider infinite;
        /*z-index : -1;*/
    }

        #slider figure img {
            width: 20%;
            float: left;
            max-height: 245px;
            /*z-index : -1;*/
        }

@keyframes slider {
    0% {
        left: 0;
      
    }

    20% {
        left: 0;

    }

    25% {
        left: -100%;
       
    }

    45% {
        left: -100%;
     
    }

    50% {
        left: -200%;
        
    }

    70% {
        left: -200%;
        
    }

    75% {
        left: -300%;
     
    }

    95% {
        left: -300%;
      
    }

    100% {
        left: -400%;
      
    }
}

 .orderbox_topi
        {
              width: 100%;
               height : 20px;
              /*padding : 10px;*/
              background-color: red;
              /*position: fixed;*/
              /*right: 50%;*/
         /*top : 350px;*/
    border-radius:   10px 10px 0px 0px;
            margin-top : 0px;
            z-index : 1;
                     
        }



         .orderbox_top
        {
              width: 17.5%;
               height : 20px;
              padding : 10px;
              background-color: red;
              position: fixed;
              right: 2%;
         /*top : 350px;*/
        border-radius:   10px 10px 0px 0px;
            margin-top : 0px;
            z-index : 2;
                     
        }

           .orderbox_bodyi
        {
              width: 100%;
        
                  height: 300px;
              background-color: 	#f0f0e0;
           /*position: fixed;*/
           margin-top : 180px;
              right: 2%;
            
            
        }
          .orderbox_body
        {
              width: 19%;
        
                  height: 300px;
              background-color: 	#f0f0e0;
           position: fixed;
           margin-top : 0px;
              right: 2%;
              z-index : -1;
            
            
        }



        
          .parah{
                      font-family : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
                      font-size : 14px;
                      margin-left : 16%;
                      float : left;
          }


          .parah_u{
                      font-family : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
                      font-size : 14px;
                      margin-left : 10%;
                      float : left;
          }



          .parah_q{
                      font-family : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
                      font-size : 14px;
                      margin-left : 34%;
                      float : left;
          }

            .parah_l{
                      font-family : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
                      font-size : 14px;
                      margin-left : 12%;
                      float : left;
          }



          .beforehead1{
              width: 75.5%;
          margin-left: 1%;
                  float: left  ;
              background-color: white ;
              height : 20px;
              padding : 10px;
                /*position: fixed;*/
               color: black;
               margin-top : 0px;
               color : grey;
               border: 1px, solid, #a9a9a9 ;
          }

            .beforehead1_search{
              width: 75.5%;
          margin-left: 1%;
                  float: left  ;
              background-color: white ;
              height : 20px;
              padding : 10px;
                /*position: fixed;*/
               color: black;
               margin-top : 40px;
               color : grey;
               border: 1px, solid, #a9a9a9 ;
          }

         
          .head1{

             
          }


       .ecomsize
        {
              width: 78%;
          margin-left: 1%;
                  float: left  ;
              background-color: white ;
              margin-top : -5px;
      
        border: 1px red;
        
        }
     

        .div1{
         height: 100px;
          width : 17%;
      margin-top : 0;

    float:left ;
           margin-left: 3%;
      
        }

          .image_order {
	float: left;
    width:30%;
    /*background: blue;*/
    
}


          
          .image_baba_order {
	float: left;
    width:50%;
    /*background: brown;*/
    margin-top: 0px;
    
}


          .image_down_order {
	float: left;
    width:100%;
    /*background: black;*/
    height: 30px;
    margin-left : 25%;
    margin-top : -10px;
    font-family : Arial;

    
}

                    .image_down_order_under {
	float: left;
    
    
 color: #787878;
 font-size: 11px;
 margin-left: 20px;
 font-weight : bolder;

    
}


                    .inner_image{
                       max-width : 15px;
                       margin-right : 2px;
                       vertical-align : middle ;
                      
                       
                    }


          .eprice_order {
	    font-size:18px;
    color: #787878;
  
   font-weight:  200;
  
 
   float: left;

      display: block;
  margin-left: auto;
  margin-right: auto;
  width:15%;
  margin-left : 15px;
   
  text-align : center;
  margin-bottom : 10px;
  overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    margin-top: 40px;
}

          
          .eprice_order_qty {
	    font-size:18px;
    color: #c44747;
  
   font-weight:  200;
  background: yellow;
 
   float: left;

      display: block;
  margin-left: auto;
  margin-right: auto;
  width:14%;
  height : 80px;
   
  text-align : center;
  margin-bottom : 10px;
  overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    margin-top: 40px;
   
}


          .epricen_order {
	
   float: left;
    font-size:18px;
    color: #787878;
 
   font-weight:  200;
   margin-top: 10px;
   font-family : 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;



   /*background: red;*/
}


        .ecommercelist_order {
	width: 95%;
    height: 120px;
    float: left;
    margin: 10px;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
    align-content : center ;
    text-decoration : none;
  border-radius: 5px;
   background-color: red;

   cursor: pointer ;
   position : relative ;
}


         .ecommercelist_pay{
	width: 95%;
    height: 60px;
    float: left;
    margin: 10px;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
    align-content : center ;
    text-decoration : none;
  border-radius: 5px;
   /*background-color: red;*/
   border: 1px solid grey;
   cursor: pointer ;
   position : relative ;
}

.ecommercelist {
	width: 19.7%;
    height: 280px;
    float: left;
    margin: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
    align-content : center ;
    text-decoration : none;
  border-radius: 5px;
   background-color: white;
   cursor: pointer ;
   position : relative ;
}




.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  /*height :100px;*/

  background-image: url('img/addicon.png');
     background-repeat: no-repeat;
  background-size: 50px 50px;



background-position-x: center ;
background-position-y: 40% ;


    width: 100%;
    height: 100%;
    float: left;
    /*margin: 10px;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /*padding: 15px;*/
    align-content : center ;
    text-decoration : none;
  border-radius: 5px;
  margin-left: 0px;
  margin-top: 15px;

  border: solid 1px red;

 
   cursor: pointer ;





}

.ecommercelist:hover .image {
  opacity: 0.3;
}

.ecommercelist:hover .middle {
  opacity: 1;
}

.text {
    /*background-color: #4CAF50;*/
    color: white;
    /*background-image: url('img/addicon.png');
     background-repeat: no-repeat;
  background-size: 50px 50px;*/
    font-size: 16px;
    padding: 16px 32px;
}















 /*.ecommercelist .img-top {
        

        width: 87%;
    height: 278px;
    float: left;
    margin: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
    align-content : center ;
    text-decoration : none;
  border-radius: 5px;
  margin-left: 0px;
  margin-top: 0px;

  border: solid 1px red;

   background-color: blue;
   
   cursor: pointer ;

   display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .ecommercelist:hover .img-top {
        display: inline;
    }*/
         /*width: 100%;
    height: 280px;
    }














   
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}



































.forad {
	
   
    font-size:10px;
    color: #404040;
  
   font-weight:  900;
   margin-top: 10px;

     display: block;
  margin-left: auto;
  margin-right: auto;
  width:80%;
  
  text-align : center;
  margin-bottom : 10px;
  overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}


.forimg_home {
	  
  height: 200px;
    max-width: 100%;
   
   display: block;
    margin: 0 auto;
   
}


.forimg {
	  
    height: 200px;
    max-width: 100%;
   
   display: block;
    margin: 0 auto;
  
   
}



.forimghide {
	  
    height: 50px;
    width: 50px;
   
   display: block;
  margin: auto;
  margin-top: 30%;
  
   background-color : red;
}

.epricen {
	
   
    font-size:14px;
    color: black;
  font-family: Arial;
   
 
  
   display: block;
  margin-left: auto;
  margin-right: auto;
  width:80%;
   color: #404040;
  text-align : center;
 
  overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

.eprice {
	    font-size:18px;
    color: #c44747;
  
   font-weight:  200;
  
 


      display: block;
  margin-left: auto;
  margin-right: auto;
  width:80%;
   
  text-align : center;
  margin-bottom : 10px;
  overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}


.forheads {
	   font-size:22px;
    color:grey;
    font-family : Arial ;
    font-weight : bolder ;
  
   
   margin-top : 50px;
   margin-left : 15px;
   vertical-align : central  ;
   
 
}



.forheads2 {
	   font-size:16px;
    color:WHITE;
    font-family : Arial ;
    font-weight : bolder ;
  
   
  
   margin-left : 5px;
   vertical-align : central  ;
   border-radius : 50px 50px 0px 0px;
   
 
}

.ediv {
	
   
  
   background-color: black;
  
  
 
}

   
 .eprice3 {
    
	-moz-box-shadow: 2px 2px 0px 0px #899599;
	-webkit-box-shadow: 2px 2px 0px 0px #899599;
	box-shadow: 2px 2px 0px 0px #899599;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
	background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;
	width: 100px;
    height: 17px;
	cursor:pointer;
	color:#3a8a9e;
	font-family:Arial;
	font-size:11px;
	padding:4px 5px;
	text-decoration:none;
	text-shadow:0px 1px 0px #e1e2ed;
    text-align:center;
   
    margin: auto;
}
.eprice3:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
	background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
	background-color:#bab1ba;
}
.eprice3:active {
	
	
}



.store_closed{

}
.totali{
    width: 100%;
    height: 100px;
  
    margin-top: 10px;
    /*margin-left : 5%;*/
    /*margin-right : 5%;*/
    font-family : arial;
    font-size : 14px;
    font-weight : bold;
    color: #999999;
    
}
.total{
    width: 90%;
    height: 100px;
  
    margin-top: 50px;
    margin-left : 5%;
    margin-right : 5%;
    font-family : arial;
    font-size : 14px;
    font-weight : bold;
    color: #999999;
    
}

.totaltext{
    width: 45%;
    height: 100px;
 
   line-height : 30px;
    float : left;
}

.fortotal{
    font-size : large;
     color: black;
}
.totalvalue{
    height: 100px;
    line-height : 30px;
    width: 45%;
    float : right ;
    text-align : right;
    margin-right  : 20px;
   
}

.checkout{
     width: 50%;
    height: 50px;
    margin-left : 20%;
    margin-right : 25%;
    display : block;

      /*background-color : yellow;*/
}


.promo{
     width: 100%;
    height: 100px;
    display : block;
    /*background-color : green;*/
}
.button {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 4px 2px;
  cursor: pointer;
  color : white;
  float: right;
  margin-right : 3px;
}
.inputpromo {
  width: 80%;
  box-sizing: border-box;
  border: 1px solid #ccc;
 
  font-size: 12px;
  background-color: white;
    margin-left : 10%;
    margin-right : 10%;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  margin-top: 15px;
}

.topbar {
    width: 100%;
    height: 32px;
    text-align: center;
    color: white;
    background-color: #2A3335;
    font-size: 16px;
    font-family: Arial;
}
.firstline{
      background-color: darkred;
              height: 20px;
              display: block;
              width : 100%;
              top : 0px;
              left : 0px;
              float : left;
              /*background-color: red;*/
            display:none;
              font-family : Arial;
             
}
adminpara{
    margin-left : 50px;
      color: white;
              font: 5px;
    color : white;
    width: 50px;
    background-color : yellow;
}

.toimage{

}

.secondline{
     background-color: red;
              height: 45px;
              display: block;
              width : 100%;
              top : 0px;
              left : 0px;
              float : left;
              /*background : black;*/
}









/*form NEWITEM PAGE*/

  .ctext{
            width: 100%;
            /*background-color  : red;*/
            height : 40px;
            border: solid 1px  	#A9A9A9 ;
            border-radius : 5px;
             display: inline-block;
        }
   .ctext2{
            width: 100%;
            /*background-color  : red;*/
            height : 100px;
            border: solid 1px  	#A9A9A9 ;
            border-radius : 5px;
             display: inline-block;
        }
         .ctext3{
            width: 77%;
            /*background-color  : red;*/
            height : 40px;
            border: solid 1px  	#A9A9A9 ;
            border-radius : 5px;
            padding: 5px;
             /*display: inline-block;*/
        }

          .ctext3b{
            width: 18%;
            /*background-color  : red;*/
            height : 50px;
            border: solid 1px  	#A9A9A9 ;
            border-radius : 5px;
            /*display: inline-block;*/
        }

           .ctext3b_home{
            width: 15%;
            /*background-color  : red;*/
            left: 10px;
            height : 40px;
            border: solid 1px  	#A9A9A9 ;
            border-radius : 5px;
            /*display: inline-block;*/
        }

        .inputShadow{
box-shadow:0 0 10px 5px #900;
}

        

         .label-left {
            display: inline-block;
            vertical-align: top;
         
            padding: 3px 7px 3px 3px;
            margin: 0;
             width: 100%;
        }

        .formtemplate-wrapper {
            display: block;
            background-color: #fcfcfc;
            padding: 10px 0;
            text-align: left;
            font-weight: bold;
            width: 30%;
            margin-left : 35%;
            margin-right : 35%;
           box-shadow: 0 1px 2px 0 #3399ff;
             font-family : Arial ;
        }

        .formtemplate-wrapper_blue {
            display: block;
            background-color: #fcfcfc;
            padding: 10px 0;
            text-align: left;
            font-weight: bold;
            width: 30%;
            margin-left : 35%;
            margin-right : 35%;
           box-shadow: 0 1px 2px 0 #3399ff;
             font-family : Arial ;
        }

        .formtemplate-buttons {
            display: block;
            padding: 7px;
            text-align: left;
            background-color: #3399ff;
            box-shadow: 0 1px 2px 0 #222;
            min-height: 0;
            margin: 0 -1px 5px;
            border-radius: 0 !important;
        }



         .formtemplate-buttons_blue {
            display: block;
            padding: 7px;
            text-align: left;
            background-color: #3399ff;
            box-shadow: 0 1px 2px 0 #222;
            min-height: 0;
            margin: 0 -1px 5px;
            border-radius: 0 !important;
        }


         .formtemplate-buttons_head {
            display: block;
            padding: 5px;
            text-align: left;
           
           
            min-height: 0;
            margin: 0 -1px 5px;
            border-radius: 0 !important;
        }

        .formtemplate-item {
            display: block;
            padding: 10px 7px;
            border-top: 1px solid #ddd;
        }

        .no-border {
            border: none !important;
        }

     

        .label-seperator {
            display: inline-block;
            vertical-align: top;
            
            margin: 0;
        }

        .control-wrapper {
            display: inline-block;
            vertical-align: top;
            margin: 0;
            width: 98%;
            margin-left : 1%;
            margin-right : 1%;
           
            /*background-color: yellow ;*/
        }

        .text_box {
            background-color: #ffffff;
            border: 1px solid #c4c4c4;
            color: #000;
            padding: 4px 7px;
            resize: none;
        }

            .text_box:focus {
                border: 1px solid #a4a4a4;
                box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.30);
            }

        .validator {
            margin: 0 5px;
            font-weight: 500;
            color: #f10b0b;
        }

        .row_header {
            margin: -10px -1px 5px;
            padding: 5px 7px;
            background: #819fae;
            color: #fff;
            font-size: 15px;
            text-align: center;
        }

        .riTextBox:disabled {
            color: #000 !important;
        }


        /*END FOR NEW ITEM PAGE*/ 

        .mainbody{
            width:100%;
            height:auto;
            position:relative;
        }

.firstcontainer_home{
    
    width: 100%;
    height : auto;
   float : left;
   position : relative;
   margin-top: 100px;
   z-index : -1;
   display:block;
    top: -10px;
    left: 0px;
    
}







.firstcontainer_home_search{
    
    width: 100%;
    height : 1000px;
   float : left;
   position : relative ;
   margin-top: 150px;
   z-index : -1;

  
  
}
.firstcontainer{
    
    width: 100%;
    height : auto;
   float : left;
   position : relative ;
   margin-top: 150px;
   z-index : -1;

  
  
}


.secondcontainer{
    
    width: 100%;
    height : auto;
        position : absolute ;
}

.white_textdiv_mother{
    width: 65%;
    height : 40px;
   
       float: left;
       margin-left : 20%;
       margin-top : 0px;
       /*background-color : green;*/
}
.white_textdiv_motheri{
    width: 25%;
    height : 40px;
   
       float: left;
       margin-left : 20%;
       margin-top : 0px;
       background-color : green;
}
.imagee{
    width: 20px;
   
}


.imagee2{
    width: 30px;
   margin-left : 5px;
}


.imagee4{
    width: 35px;
    height:25px;
   margin-left : 5px;

}
.imagee3 {
    width: 25px;
    height: 25px;
    margin-left: 10px;
    margin-top: 5px;
}


.forp1{
    color: white;
    font-size : 13px;
    font-weight : bolder;
     font-family :  'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    
    
}

.forp2i{
    color: white;
    font-size : 11px;
    font-family :  'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
       font-weight : bolder ;
       margin-top : -10px;
      
     


}

.forp2{
    color: white;
    font-size : 11px;
    font-family :  'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
       font-weight : bolder ;
      
     


}



.forp2{
    color: white;
    font-size : 9px;
    font-family :  'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
       font-weight : bolder ;
      
     
}

.white_textdiv{
    
    width: 26%;
    height : 40px;
     
       float: left;
       margin-left : 0%;
        margin-top : 5px;
        /*background-color : yellow;*/

}
.white_textdiv_middle{
    
    width: 20%;
    height : 40px;
  
       float: left;
       margin-left : 0%;
        margin-top : 5px;
         /*background-color : yellow;*/
}
.white_textdiv_last{

    width: 35%;
    height : 40px;
     
       float: left;
       margin-left : 0%;
        margin-top : 5px;
         /*background-color : yellow;*/
}
.forfloat{
    float : left ;
    margin-right : 0px;
     width: 3%;
     /*background-color : blue;*/
     margin-top : 5px;
   
}
.forfloat2{
    float : left ;
    margin-right : 0px;
     width: 40px;
     /*background-color : blue;*/
     margin-top : 5px;
   
}
.forfloat3 {
    float: left;
    margin-right: 0px;
    width: 40px;
    margin-top: 3px;
    
}

.contactbox {
    width: 29%;
    height: 50px;
    background-color: gold;
    position: absolute;
    top: 2px;
    right: 609px;
    font-family: Arial;
    box-shadow: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center;
    color: white;
    font-weight: bolder;
    padding: 15px;
    z-index: 1;
}





.logo{
    width: 120px;
    height : 50px;
 
    position: fixed ;
    top:50px;
   left: 65px;
  
    
}

.writeup1 {
    margin-left: -11%;
}

.contactpara {
    font-size: 20px;
    margin-left: 266px;
    margin-top: -18px;
}


.menu1{
    font-size: 16px;
    text-shadow : unset ;
    color: red;
    float: left;
    font-family : 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight : bolder;
    margin-left : 20px;
    margin-top: 15px;

    
}


.menu1div{
   margin-left : 20%;
  
   float : left;
}






.menu2{
    font-size: 13px;
    text-shadow : unset ;
    color: red;
    float: left;
    font-family : 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight : bolder;
    margin-left : 2px;
   
  text-decoration : none;

    
}

.catgroup{
    margin-left : 15px;
    background-color : blue;
}







.logoimage{
    width : 150px;
}

.topboxes{
    
}




    .myButton {
	box-shadow: 0px 0px 0px 2px #9fb4f2;
	background:linear-gradient(to bottom, #3A42D5 5%, #476e9e 100%);
	background-color:#3A42D5;
	border-radius:6px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:8px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
    text-align: center;
   margin-top: 5px;
   width : 100%;
}
.myButton:hover {
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
	background-color:#476e9e;
}
.myButton:active {
	position:relative;
	top:1px;
}

.button {
  background-color: red; /* Green */
  border: none;
  color: white;
  padding: 5px 22px;
  text-align: center;
  text-decoration: none;
  
  font-size: 11px;
  float : right ;
}

.fordiscount{
    color: darkgrey ;
    text-align : center;
    margin-top: 15px;
}

.fordiscounti{
    color: darkgrey ;
    text-align : center;
    margin-top: 40px;
}











.secondline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* centers the bar */
    padding: 6px 8px;
    background-color: black;
    height: 90px;
}


    .secondline .logo {
        position: relative !important; /* release it from fixed position */
        top: 0 !important;
        left: 0 !important;
        float: left; /* place it at the start of the red bar */
        height: 100%; /* fill the bar height */
        margin-left: 10px; /* small spacing */
        margin-top:37px;
    }

    .secondline .logoimage {
        height: 100%; /* scale down to bar height */
        width: auto; /* keep aspect ratio */
        max-height: 45px; /* bar height */
    }


    /* Make the two sibling divs behave like one flex group */
    .secondline .para1,
    .secondline .para {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
    }

    /* Width of the whole search bar (input + button) */
    .secondline .para1 {
        width: min(70%, 780px); /* responsive max width */
    }











/* Group cart + login together neatly */
.auth-cart {
    display: flex;
    align-items: center; /* vertical alignment */
    justify-content: flex-end; /* push them to the right side */
    gap: 13px;
    margin-right: 20px; /* space from right edge */


    width: 200px;
    margin-left: 1110px;
    height: 97px;
}




.menu2 {
    font-size: 13px;
    text-shadow: unset;
    color: red;
    float: left;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bolder;
    margin-left: 2px;
    text-decoration: none;
}

    .menu2 a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 16px;
        border-radius: 999px;
        font: 600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        color: #fff !important;
        background: linear-gradient(135deg, #3A42D5, #476e9e);
        text-decoration: none !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.12);
        transition: transform .05s ease, background .25s ease;
    }

        .menu2 a:hover {
            background: linear-gradient(135deg, #2f36b8, #5d84b2);
        }

/* Cart badge stays styled as pill */
#countcat {
   
}

    /* Cart icon before number */
    #countcat::before {
      
    }

/* Login button */


/*/////////////////////////////////////*/

/* A11y helper (screen-reader only) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Center the whole bar where you want it (e.g., inside .secondline) */
.searchbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0; /* fuse edges */
    width: 60%;
    padding: 6px 8px;
    margin-left: 20%;
    margin-top: 47px;
    /*
  background-color: white;
*/
    /*background-color : white;*/
}

/* Use class if you set CssClass="searchbox" */
.searchbox {
    flex: 1 1 auto;
    max-width: min(760px, 72vw);
    height: 50px;
    padding: 0 16px;
    border: 1px solid #e3e3e3;
    border-right: none;
    border-radius: 28px 0 0 28px;
    font-size: 16px;
    outline: none;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    transition: box-shadow .25s, border-color .25s;
}

    .searchbox:focus {
        border-color: #ff4d4d;
        box-shadow: 0 4px 12px rgba(255,77,77,.25);
    }

#searchitem {
    height: 52px;
    width: 60px;
    border: 1px solid #ff4d4d;
    border-left: none;
    border-radius: 0 28px 28px 0;
    background: linear-gradient(135deg, #ff4d4d, #cc0000);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    transition: background .25s, transform .05s;
}

    #searchitem::before {
        content: "";
        width: 18px;
        height: 18px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center/contain;
    }

    #searchitem:hover {
        background: linear-gradient(135deg, #cc0000, #ff4d4d);
    }

    #searchitem:active {
        transform: translateY(1px);
    }

@media (max-width:600px) {
    .searchbox {
        height: 46px;
        font-size: 15px;
        max-width: 92vw;
    }

    #searchitem {
        height: 48px;
        width: 56px;
    }
}



/*/////////////////////////////////////////*/

















/* 1) Grid container */
.products {
    --gap: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--gap);
    align-items: stretch;
}

/* 2) Card (replaces .ecommercelist floats/heights) */
.card {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0,0,0,.08);
    }

    /* 3) Image area (no fixed height) */
    .card img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        border-radius: 8px;
    }

    /* 4) Text */
    .card .title {
        margin: .5rem 0 0;
        font-size: clamp(14px, 1.6vw, 16px);
        color: #222;
    }

    .card .price {
        color: #c44747;
        font-weight: 600;
        margin-top: .25rem;
    }



:root {
    --radius: 12px;
    --space: 8px;
}

h1, .forheads {
    font-size: clamp(18px, 2.5vw, 28px);
}
/* modern button base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem .9rem;
    border-radius: var(--radius);
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #111;
    transition: background .15s ease, box-shadow .15s ease;
}

    .btn:hover {
        background: #f6f6f6;
        box-shadow: 0 2px 10px rgba(0,0,0,.06);
    }


:root {
    --bg: #fff;
    --text: #222;
    --muted: #6b7280;
    --brand: #00bbff;
    --radius: 12px;
    --shadow: 0 1px 8px rgba(0,0,0,.06);
}




.eprice3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 100px;
    padding: 0 .8rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: 500 12px/1.2 inherit;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

    .eprice3:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 18px rgba(0,0,0,.08);
        background: #f9fafb;
    }


footer.buttomdiv {
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    box-shadow: none; /* was very heavy */
    padding: 24px 16px;
    font-size: 12px;
    color: #4b5563;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}