* {
    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;
}

#itemprice{
    margin-left : 40px;
    margin-top: 30px;
}
.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;
}





.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;
}

.amountbox2 {
    float: left;
    /*width: 20%;*/
    /*background-color : yellow;*/
    margin-left: 43%;
    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: black;
    height: 45px;
    display: block;
    width: 100%;
    top: 0px;
    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: 13px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    font-weight: bolder;
    color: #333333;
    line-height: 15px;
}

.welcomename {
    width: 200px;
    height: 40px;
    margin-left: 10px;
    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;
}

.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: 250px;
            /*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: #020512;
    /*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: #020512;
    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: 0px;
    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;
}




.head1 {
}


.ecomsize {
    width: 78%;
    margin-left: 1%;
    float: left;
    
    margin-top: 0px;
    border: 1px red;
    clear: left;
}


.buttomdiv {
    float: left;
    height: auto;
    width: 100%;
    background-color: black;
    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;
   
    font-weight: bolder;
    font-size: 11px;
    color: white;
    /*position: absolute;*/
    bottom: 0;
    /*display: block;*/
}
.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;
}


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

.toimage {
}


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

    .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 */
    }

    .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 */


   
/* 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: 434px;
    /*
  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;
    }
    

    
}



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































/*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;


}



#animationbox {
    width: 100%;
    height: 155px;
    float: left;
    background-color: white;
    animation: 2s slider infinite;
    margin-top: 4px;
    /*z-index : -1;*/
    display: block;
}


.firstcontainer_home {
    width: 100%;
    height: auto;
    float: left;
    position: relative;
    /*margin-top: 10px;*/
    z-index: -1;
    display: block;
    top: 210px;
    left: 0px;
    /*background-color : yellow;*/
    margin-top:-171px;
    outline: none;
    background-color: transparent;
}





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

.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;
}










.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;
}



    /* Make each image fit within its slide without stretching */
    /* Fill the banner area (no letterboxing) */
    #slider figure img {
        width: 20% !important; /* 5 slides across the 500% track = 1 full viewport each */
        height: 100% !important; /* fill banner height */
        max-height: none !important; /* override earlier caps */
        object-fit: cover !important; /* fill the div; crops edges if needed */
        display: block;
       
    }

    /* Optional: make the banner height responsive but taller if you want */
    .myani, #slider, #slider figure {
        height: clamp(220px, 28vw, 360px);
    }

/* Ensure the inner wrappers inherit height so height:100% resolves properly */
#slider {
    overflow: hidden;
}

    #slider, #slider figure {
        min-height: 1px;
    }

/* Mobile tweak (already sets smaller height; we just ensure proper fit) */
@media (max-width: 600px) {
    #slider figure img {
        height: 100% !important;
        object-fit: contain !important;
    }
}











/* ---- Modern, unified search bar (top section) ---- */

/* Place/center inside the red top bar */


/* INPUT */
.sbox {
    flex: 1;
    height: 50px; /* taller input */
    padding: 0 16px;
    border: 1px solid #e3e3e3;
    border-right: none; /* merges with button */
    border-radius: 28px 0 0 28px;
    font-size: 16px;
    outline: none;
    transition: box-shadow .25s, border-color .25s;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    background: #fff;
}

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

/* BUTTON */
#searchitem {
    height: 52px; /* match + 2px to cover borders */
    min-width: 60px;
    margin-left: 0; /* remove gap */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #ff4d4d;
    border-left: none; /* fuse with input */
    border-radius: 0 28px 28px 0;
    background: linear-gradient(135deg, #ff4d4d, #cc0000);
    color: #fff;
    transition: transform .05s ease, background .25s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

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

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

    /* Search icon in the button */
    #searchitem .sbox2 {
        font-size: 18px;
        color: #fff !important;
        line-height: 1;
    }

/* Small screens: full width */
@media (max-width: 600px) {
    .secondline {
        padding: 15px;
        height: 89px;
    }

        .secondline .para1 {
            width: 92%;
        }

    .sbox {
        height: 46px;
        font-size: 15px;
    }

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



.search-container {
    position: relative;
    width: 100%;
    max-width: 500px; /* adjust as needed */
}

.sbox {
    width: 100%;
    height: 45px; /* taller for modern look */
    border-radius: 25px;
    border: 1px solid #ccc;
    padding: 0 50px 0 15px; /* leave space for icon */
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    outline: none;
}

.search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    height: 35px;
    width: 35px;
    border-radius: 50%;
    border: none;
    background: #e60000;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .search-btn:hover {
        background: #c40000;
    }





.search-container {
    position: relative;
    width: 100%;
    max-width: 560px; /* adjust as you like */
}

.sbox {
    width: 100%;
    height: 52px; /* taller, modern */
    border-radius: 28px;
    border: 1px solid #d9d9d9;
    padding: 0 56px 0 16px; /* space on right for the button */
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    outline: none;
}

    .sbox:focus {
        border-color: #bdbdbd;
        box-shadow: 0 0 0 3px rgba(230,0,0,.12);
    }

.search-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    height: 40px;
    width: 40px;
    border: none;
    border-radius: 50%;
    background: #e60000;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .search-btn:hover {
        background: #c40000;
    }